:root{
  --master-w:941;
  --master-h:1672;
  --gold:#d6a44f;
  --cream:#f1d7a0;
  --ink:#100c09;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#080706;color:#f8ecd2;font-family:Georgia,"Times New Roman",serif}
body{overflow-x:hidden}
button,input,select{font:inherit}

.shell{
  min-height:100vh;
  display:grid;
  place-items:start center;
  padding:10px 10px 30px;
  background:
    radial-gradient(circle at 50% 15%, rgba(111,53,20,.22), transparent 44%),
    #080706;
}
.game-wrap{width:100%;display:flex;justify-content:center}

.stage{
  position:relative;
  width:min(100%, calc((100vh - 20px) * 941 / 1672));
  aspect-ratio:941/1672;
  overflow:hidden;
  background:#21150d;
  box-shadow:0 18px 70px #000, 0 0 0 1px rgba(240,184,84,.32);
  user-select:none;
  -webkit-user-select:none;
  touch-action:none;
  isolation:isolate;
}
.layer,.lever,.lukas-head,.socket-cover,.gong{
  position:absolute;
  pointer-events:none;
  -webkit-user-drag:none;
}
.base{inset:0;width:100%;height:100%;object-fit:cover;z-index:1}

.steam-layer,.fog-layer,.spark-layer,.dust-layer,.confetti-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.steam-layer{z-index:8}
.fog-layer{z-index:9;mix-blend-mode:screen}
.spark-layer{z-index:14}
.dust-layer{z-index:16}
.confetti-layer{z-index:40}

.gong{
  z-index:5;
  left:65.8%;
  top:58.7%;
  width:20%;
  height:auto;
  filter:drop-shadow(0 7px 12px rgba(0,0,0,.5));
  transform-origin:50% 50%;
}
.gong.hit{animation:gongHit .54s cubic-bezier(.2,.9,.25,1)}
@keyframes gongHit{
  0%{transform:rotate(0) scale(1)}
  18%{transform:rotate(2.8deg) scale(1.055)}
  36%{transform:rotate(-2deg) scale(.992)}
  58%{transform:rotate(1.2deg) scale(1.018)}
  100%{transform:rotate(0) scale(1)}
}

.lever-group{
  position:absolute;
  inset:0;
  z-index:10;
  transform-origin:49.95% 75.78%;
  transform:rotate(0deg);
  will-change:transform;
  transition:transform .095s cubic-bezier(.22,.72,.28,1);
  pointer-events:none;
}
.lever{inset:0;width:100%;height:100%;object-fit:contain}

.lukas-head{
  z-index:11;
  left:30.5%;
  top:13.15%;
  width:38.5%;
  height:21.7%;
  object-fit:contain;
  object-position:center bottom;
  filter:drop-shadow(0 11px 12px rgba(0,0,0,.42));
  transform-origin:50% 82%;
}

.lukas-head.flap{animation:headFlap .36s ease-out}
@keyframes headFlap{
  0%{transform:rotate(0deg)}
  30%{transform:rotate(-4deg)}
  58%{transform:rotate(3deg)}
  100%{transform:rotate(0deg)}
}

.socket-cover{
  z-index:12;
  left:39.85%;
  top:70.57%;
  width:20.3%;
  height:11.67%;
  object-fit:cover;
  object-position:center;
}

.gauge-needle-img{
  position:absolute;
  z-index:13;
  left:61.65%;
  top:50.96%;
  width:19.1%;
  height:auto;
  transform-origin:48.3% 50%;
  transform:rotate(135deg);
  pointer-events:none;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.55));
  will-change:transform;
}

.rub-zone{
  position:absolute;
  z-index:30;
  left:25.7%;
  top:80.15%;
  width:49%;
  height:8.15%;
  cursor:ew-resize;
  border-radius:6px;
  outline:none;
  touch-action:none;
}
.rub-zone:focus-visible{box-shadow:inset 0 0 0 3px #ffd26c}
.rub-prompt{
  position:absolute;
  z-index:31;
  left:50%;
  top:72.2%;
  transform:translateX(-50%) translateY(8px) scale(.96);
  min-width:44%;
  padding:10px 14px 12px;
  display:grid;
  justify-items:center;
  gap:2px;
  border:1px solid rgba(255,214,131,.82);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(67,26,11,.88),rgba(24,12,8,.92));
  box-shadow:0 10px 24px rgba(0,0,0,.55),0 0 18px rgba(255,174,74,.16);
  pointer-events:none;
  opacity:0;
}
.rub-prompt.show{
  opacity:1;
  animation:rubPromptFloat 1.8s ease-in-out infinite alternate;
  transform:translateX(-50%) translateY(0) scale(1);
}
.rub-prompt.vanish{
  animation:rubPromptVanish .55s cubic-bezier(.18,.78,.26,1) forwards;
}
.rub-prompt::before,.rub-prompt::after{
  content:'✦';
  position:absolute;
  top:10px;
  color:rgba(255,220,137,.95);
  font-size:clamp(10px,1.6vw,14px);
  text-shadow:0 0 8px rgba(255,204,98,.55);
  animation:rubPromptSpark 1.45s ease-in-out infinite alternate;
}
.rub-prompt::before{left:14px}
.rub-prompt::after{right:14px; animation-delay:.32s}
.rub-prompt-arrow{
  display:block;
  font:900 clamp(18px,4vw,30px)/1 Arial,sans-serif;
  color:#ffd975;
  text-shadow:0 0 10px rgba(255,188,74,.35),0 2px 4px rgba(0,0,0,.6);
  animation:rubArrowBounce .9s ease-in-out infinite;
}
.rub-prompt strong{
  font:900 clamp(11px,2.2vw,18px)/1 Arial,sans-serif;
  letter-spacing:.08em;
  color:#fff1cb;
  text-shadow:0 2px 4px rgba(0,0,0,.55);
}
.rub-prompt span:last-child{
  font:800 clamp(8px,1.45vw,11px)/1.2 Arial,sans-serif;
  letter-spacing:.04em;
  color:#ffd9a0;
}
@keyframes rubPromptFloat{
  from{filter:drop-shadow(0 0 0 rgba(255,180,74,.0))}
  to{filter:drop-shadow(0 0 8px rgba(255,180,74,.22))}
}
@keyframes rubArrowBounce{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(5px)}
}
@keyframes rubPromptSpark{
  from{opacity:.35; transform:scale(.8)}
  to{opacity:1; transform:scale(1.15)}
}
@keyframes rubPromptVanish{
  0%{opacity:1; transform:translateX(-50%) translateY(0) scale(1); filter:blur(0px)}
  55%{opacity:1; transform:translateX(-50%) translateY(-6px) scale(1.03); filter:blur(0px)}
  100%{opacity:0; transform:translateX(-50%) translateY(-18px) scale(.86); filter:blur(6px)}
}
.rub-zone.active{box-shadow:inset 0 0 24px rgba(255,178,59,.26),0 0 28px rgba(255,126,25,.20)}
.rub-hint{
  position:absolute;
  left:50%;
  bottom:8%;
  transform:translateX(-50%);
  white-space:nowrap;
  font-family:Arial,sans-serif;
  font-size:clamp(8px,1.9vw,15px);
  font-weight:800;
  letter-spacing:.09em;
  color:#ffd98a;
  text-shadow:0 2px 4px #000;
  opacity:.78;
  transition:opacity .2s;
}
.playing .rub-hint{opacity:.18}
.rub-glint{
  position:absolute;
  top:0;bottom:0;width:14%;
  left:-18%;
  background:linear-gradient(90deg,transparent,rgba(255,230,164,.28),transparent);
  transform:skewX(-16deg);
  opacity:0;
}
.rub-zone.active .rub-glint{opacity:1;animation:glint .75s linear infinite}
@keyframes glint{to{left:104%}}

.mini-hud{
  position:absolute;
  z-index:25;
  left:3.4%;
  top:66.8%;
  width:19.8%;
  padding:8px 9px 9px;
  background:rgba(17,13,10,.76);
  border:1px solid rgba(216,164,79,.55);
  border-radius:8px;
  backdrop-filter:blur(4px);
  font-family:Arial,sans-serif;
  box-shadow:0 6px 18px rgba(0,0,0,.38);
}
.hud-row{display:flex;justify-content:space-between;gap:8px;font-size:clamp(8px,1.45vw,12px);letter-spacing:.08em}
.hud-row strong{color:#ffd77c}
.hud-row.subtle{margin-top:7px;opacity:.82}
.bar{height:5px;margin-top:4px;background:#21170f;border-radius:99px;overflow:hidden;box-shadow:inset 0 0 2px #000}
.bar i{display:block;height:100%;width:0%;background:linear-gradient(90deg,#8b4f22,#ffcb63);transition:width .08s linear}
.bar.rhythm i{background:linear-gradient(90deg,#7a5a2a,#ffd978)}
.bar.heat i{background:linear-gradient(90deg,#8a3b24,#ff6c2f)}
.heat-row{margin-top:7px}
.score-row{margin-top:8px;padding-top:6px;border-top:1px solid rgba(255,215,124,.16);opacity:.92}.score-row strong{font-size:1.05em}



.score-pop{position:absolute;z-index:95;pointer-events:none;transform:translate(-50%,-50%);font:900 clamp(9px,1.45vw,13px)/1 Arial,sans-serif;letter-spacing:.02em;text-shadow:0 1px 3px #000,0 0 8px rgba(255,209,116,.36);animation:scorePop .82s ease-out forwards}.score-pop.good{color:#ffe19a}.score-pop.bad{color:#ff9c79}@keyframes scorePop{0%{opacity:0;transform:translate(-50%,15%) scale(.88)}18%{opacity:1}100%{opacity:0;transform:translate(-50%,-90%) scale(1.02)}}

.firework-spark{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--fw-color,#ffd76b);box-shadow:0 0 6px var(--fw-color,#ffd76b),0 0 12px var(--fw-color,#ffd76b);animation:fireworkBurst .88s cubic-bezier(.08,.56,.22,1) forwards}@keyframes fireworkBurst{0%{opacity:0;transform:translate(0,0) scale(.45)}12%{opacity:1}100%{opacity:0;transform:translate(var(--fx),var(--fy)) scale(.15)}}


.live-highscore{
  position:absolute;
  z-index:26;
  left:50%;
  bottom:6.7%;
  transform:translateX(-50%);
  width:min(54%,310px);
  text-align:center;
  padding:5px 12px 6px;
  border:1px solid rgba(255,214,131,.78);
  border-radius:26px;
  background:linear-gradient(180deg,rgba(85,28,12,.84),rgba(34,15,8,.88));
  box-shadow:0 0 0 1px rgba(83,42,12,.58) inset, 0 5px 15px rgba(0,0,0,.38), 0 0 16px rgba(255,164,52,.12);
  pointer-events:none;
  overflow:hidden;
}
.live-highscore::before{
  content:'';
  position:absolute;
  inset:-10% auto -10% -45%;
  width:38%;
  background:linear-gradient(90deg,transparent,rgba(255,241,191,.20),rgba(255,229,167,.62),rgba(255,241,191,.18),transparent);
  transform:skewX(-20deg);
  opacity:0;
}
.live-highscore.show{
  animation:scorePanelRise .42s cubic-bezier(.18,.78,.26,1) both;
}
.live-highscore.show::before{
  animation:panelShimmer 2.4s ease-in-out infinite;
  opacity:1;
}
.live-highscore.result-mode{
  width:min(66%,385px);
  padding:9px 14px 10px;
  border-radius:22px;
  box-shadow:0 0 0 1px rgba(83,42,12,.58) inset, 0 8px 22px rgba(0,0,0,.52), 0 0 24px rgba(255,164,52,.24);
}
.live-highscore.result-mode.champion{
  border-color:rgba(255,227,144,.96);
  box-shadow:0 0 0 1px rgba(255,220,127,.62) inset, 0 10px 26px rgba(0,0,0,.58), 0 0 28px rgba(255,194,76,.34);
}
.live-highscore-label{
  display:block;
  position:relative;
  z-index:1;
  font:900 clamp(7px,1.25vw,10px)/1 Arial,sans-serif;
  letter-spacing:.13em;
  color:#ffd8a0;
  opacity:.94;
}
.live-highscore-value{
  display:block;
  position:relative;
  z-index:1;
  margin-top:2px;
  font:900 clamp(17px,3.4vw,27px)/1 Arial,sans-serif;
  color:#fff4cc;
  text-shadow:0 0 6px rgba(255,176,73,.48), 0 2px 0 rgba(79,27,9,.82);
  animation:scoreBlink 1.15s ease-in-out infinite;
}
.live-highscore-subline{
  display:block;
  position:relative;
  z-index:1;
  margin-top:4px;
  font:800 clamp(8px,1.4vw,11px)/1.2 Arial,sans-serif;
  color:#f5dfb1;
  opacity:.92;
}
.live-highscore.flash .live-highscore-value{
  animation:scoreBurst .2s linear 0s 5 alternate, scoreBlink .9s ease-in-out .9s infinite;
}
@keyframes scorePanelRise{
  from{opacity:0;transform:translate(-50%,14px) scale(.94)}
  to{opacity:1;transform:translate(-50%,0) scale(1)}
}
@keyframes panelShimmer{
  0%{transform:translateX(-18%) skewX(-20deg);opacity:0}
  14%{opacity:.9}
  42%{transform:translateX(260%) skewX(-20deg);opacity:0}
  100%{transform:translateX(260%) skewX(-20deg);opacity:0}
}
@keyframes scoreBlink{
  0%,100%{opacity:1; transform:scale(1)}
  50%{opacity:.84; transform:scale(1.03)}
}
@keyframes scoreBurst{
  from{opacity:.55; transform:scale(.98)}
  to{opacity:1; transform:scale(1.06)}
}

.ticker-shell{
  position:absolute;
  z-index:26;
  left:50%;
  bottom:1.55%;
  transform:translateX(-50%);
  width:min(68%,390px);
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:7px;
  padding:5px 9px;
  border:1px solid rgba(255,206,116,.48);
  border-radius:999px;
  background:linear-gradient(180deg,rgba(23,12,7,.78),rgba(54,22,10,.68));
  box-shadow:0 5px 14px rgba(0,0,0,.34), inset 0 0 10px rgba(255,184,76,.08);
  backdrop-filter:blur(3px);
}
.ticker-title{
  font:900 clamp(7px,1.25vw,10px)/1 Arial,sans-serif;
  letter-spacing:.10em;
  color:#f7ce7a;
  white-space:nowrap;
}
.ticker-window{
  position:relative;
  overflow:hidden;
  min-height:1em;
}
.ticker-track{
  display:inline-block;
  white-space:nowrap;
  padding-left:100%;
  font:700 clamp(8px,1.45vw,11px)/1 Arial,sans-serif;
  color:#f6e4bf;
  text-shadow:0 1px 1px rgba(0,0,0,.8);
  animation:tickerRun 24s linear infinite;
  will-change:transform;
}
@keyframes tickerRun{
  from{transform:translateX(0)}
  to{transform:translateX(-100%)}
}

.start-card{
  position:absolute;
  inset:0;
  z-index:50;
  display:grid;
  place-items:center;
  padding:8%;
  background:linear-gradient(to bottom,rgba(2,2,2,.22),rgba(2,2,2,.58));
  backdrop-filter:blur(1.5px);
}

.result-card{
  position:absolute;
  z-index:55;
  left:50%;
  bottom:15.8%;
  transform:translateX(-50%);
  width:min(84%,430px);
  display:block;
  background:transparent;
  padding:0;
  pointer-events:auto;
}
.start-inner{
  width:min(92%,510px);
  padding:clamp(18px,4vw,34px);
  text-align:center;
  background:linear-gradient(160deg,rgba(34,20,12,.94),rgba(11,9,7,.94));
  border:2px solid #a36c2d;
  outline:1px solid rgba(255,208,116,.26);
  border-radius:14px;
  box-shadow:0 20px 55px #000;
}

.result-inner{
  width:100%;
  padding:clamp(12px,2.7vw,20px);
  text-align:center;
  background:linear-gradient(160deg,rgba(34,20,12,.93),rgba(11,9,7,.94));
  border:1px solid #a36c2d;
  outline:1px solid rgba(255,208,116,.20);
  border-radius:12px;
  box-shadow:0 10px 28px rgba(0,0,0,.72);
  backdrop-filter:blur(5px);
}
.start-inner small,.result-inner small{color:#dfa94e;letter-spacing:.22em;font-family:Arial,sans-serif;font-weight:900}
.start-inner h1,.result-inner h2{margin:.42em 0 .35em;font-size:clamp(26px,6vw,46px);line-height:.92;color:#f2d9a3;text-shadow:0 3px 0 #40210e}
.start-inner p,.result-inner p{font-family:Arial,sans-serif;line-height:1.45;color:#e8ddca}
.main-btn{
  margin-top:10px;
  border:1px solid #ffca6f;
  border-radius:999px;
  padding:11px 20px;
  font-weight:900;
  color:#241307;
  background:linear-gradient(#ffd782,#c88a31);
  box-shadow:0 5px 0 #6e3c16,0 9px 18px #0008;
  cursor:pointer;
}
.main-btn:active{transform:translateY(3px);box-shadow:0 2px 0 #6e3c16,0 5px 12px #0008}
.result-score{display:flex;align-items:baseline;justify-content:center;gap:10px;margin:13px 0;font-family:Arial,sans-serif}
.result-score span{letter-spacing:.16em;font-size:12px;color:#d1b27b}
.result-score strong{font-size:clamp(28px,7vw,50px);color:#ffd777}

.hidden{display:none!important}

.steam{
  position:absolute;
  width:38px;height:38px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,244,224,.33),rgba(255,244,224,.12) 45%,transparent 70%);
  filter:blur(3px);
  animation:steamRise var(--life,1.6s) ease-out forwards;
}
@keyframes steamRise{
  from{transform:translate(0,0) scale(.55);opacity:.65}
  to{transform:translate(var(--drift,15px),-120px) scale(1.9);opacity:0}
}
.spark{
  position:absolute;
  width:4px;height:9px;
  border-radius:60% 60% 50% 50%;
  background:#ffd66f;
  box-shadow:0 0 6px #ff7a21;
  animation:sparkFly var(--life,.7s) cubic-bezier(.1,.7,.4,1) forwards;
}
@keyframes sparkFly{
  from{transform:translate(0,0) rotate(0);opacity:1}
  to{transform:translate(var(--dx),var(--dy)) rotate(240deg);opacity:0}
}

.debug{
  width:min(620px,94vw);
  margin:12px auto 0;
  color:#d6c4a6;
  font:14px Arial,sans-serif;
}
.debug summary{cursor:pointer;text-align:center;opacity:.66}
.debug-grid{
  margin-top:8px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  padding:10px;
  border:1px solid #493520;
  border-radius:8px;
  background:#120e0b;
}
.debug label{display:grid;gap:4px}
.debug input,.debug select,.debug button{
  width:100%;
  background:#211710;
  color:#ead9b9;
  border:1px solid #604324;
  border-radius:5px;
  padding:7px;
}
.debug button{cursor:pointer}

.stage.overheated{animation:heatPulse .16s linear 3}
@keyframes heatPulse{
  0%,100%{filter:none}
  50%{filter:sepia(.18) saturate(1.3) brightness(1.04)}
}
.stage.snap .lever-group{
  transition:transform .16s cubic-bezier(.02,.9,.18,1.15);
}
.stage.snap .lukas-head{animation:headFlap .36s ease-out}

@media (max-width:700px){
  .shell{padding:0 0 22px}
  .stage{width:100vw;max-height:none}
  .mini-hud{left:2.5%;width:22.5%}
  .debug{padding:0 8px}
}


.stage.rhythm-slip .lever-group{
  transition:transform .14s cubic-bezier(.18,.78,.22,1);
}
.stage.rhythm-slip .rub-zone{
  box-shadow:inset 0 0 30px rgba(255,90,35,.30),0 0 24px rgba(255,80,20,.18);
}


.fog{
  position:absolute;
  width:140px;height:76px;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(255,235,204,.18), rgba(235,245,255,.10) 48%, rgba(255,255,255,0) 72%);
  filter:blur(10px);
  opacity:.0;
  animation:fogDrift var(--life,6s) ease-out forwards;
}
@keyframes fogDrift{
  0%{transform:translate(0,0) scale(.75);opacity:.0}
  12%{opacity:.34}
  78%{opacity:.22}
  100%{transform:translate(var(--dx,40px),var(--dy,-120px)) scale(1.45);opacity:0}
}

.dust{
  position:absolute;
  width:3px;height:3px;
  border-radius:50%;
  background:rgba(255,228,170,.85);
  box-shadow:0 0 8px rgba(255,205,116,.55);
  opacity:0;
  animation:dustFloat var(--life,4.2s) linear forwards;
}
@keyframes dustFloat{
  0%{transform:translate(0,0) scale(.7);opacity:0}
  10%{opacity:.45}
  100%{transform:translate(var(--dx,10px),var(--dy,-130px)) scale(1.3);opacity:0}
}

.stage.playing::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
  background:radial-gradient(circle at 50% 18%, rgba(255,210,110,.08), transparent 36%), radial-gradient(circle at 50% 84%, rgba(255,180,72,.06), transparent 20%);
  animation:alivePulse 2.6s ease-in-out infinite;
}
@keyframes alivePulse{
  0%,100%{opacity:.55}
  50%{opacity:1}
}

.stage.crowd-hype .mini-hud{box-shadow:0 0 0 1px rgba(255,226,134,.4), 0 0 18px rgba(255,177,57,.25), 0 6px 18px rgba(0,0,0,.38)}
.stage.big-hit{animation:stageHit .28s ease-out}
@keyframes stageHit{
  0%{transform:translateY(0)}
  25%{transform:translateY(-2px)}
  50%{transform:translateY(3px)}
  100%{transform:translateY(0)}
}



.target-marker{
  position:absolute;
  z-index:24;
  left:4.5%;
  top:13.4%;
  width:21.5%;
  opacity:0;
  transform:translateX(10px) rotate(-34deg);
  transform-origin:50% 50%;
  transition:opacity .28s ease, transform .28s ease;
  pointer-events:none;
  filter:drop-shadow(0 6px 11px rgba(0,0,0,.66));
}
.playing .target-marker{
  opacity:.98;
  transform:translateX(0) rotate(-34deg);
}
.target-arrow-img{
  display:block;
  width:100%;
  height:auto;
  transform-origin:50% 50%;
  animation:targetPulse 1.0s ease-in-out infinite;
}
@keyframes targetPulse{
  0%,100%{transform:translateX(0) scale(1)}
  50%{transform:translateX(-7px) scale(1.025)}
}
  50%{transform:translateX(-9px) scale(1.07)}
}

.stage.rhythm-slip .lukas-head{
  animation:slipHead .46s cubic-bezier(.15,.88,.28,1.2);
}
@keyframes slipHead{
  0%{transform:rotate(0deg)}
  26%{transform:rotate(4deg)}
  52%{transform:rotate(-3deg)}
  72%{transform:rotate(1.8deg)}
  100%{transform:rotate(0deg)}
}

.stage.rhythm-slip .target-marker{
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.75)) drop-shadow(0 0 7px rgba(255,80,25,.5));
}

.rub-zone.active{
  box-shadow:inset 0 0 30px rgba(255,178,59,.29),0 0 34px rgba(255,126,25,.25);
}

.spark.hot{
  width:5px;height:13px;
  background:#fff3a8;
  box-shadow:0 0 7px #ff8c24,0 0 14px #ff3d13;
}


.sound-toggle{
  position:absolute;
  z-index:70;
  right:2.1%;
  top:1.25%;
  width:clamp(30px,7vw,48px);
  height:clamp(30px,7vw,48px);
  border-radius:50%;
  border:1px solid rgba(255,215,133,.72);
  background:rgba(30,17,9,.78);
  color:#ffe1a2;
  font-size:clamp(15px,3.5vw,23px);
  cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,.55), inset 0 0 10px rgba(255,179,57,.11);
  backdrop-filter:blur(3px);
}
.sound-toggle:hover{transform:scale(1.06)}
.sound-toggle.audio-error{
  animation:soundWarn .85s ease-in-out infinite;
  border-color:#ff7048;
}
@keyframes soundWarn{
  0%,100%{box-shadow:0 4px 12px rgba(0,0,0,.55)}
  50%{box-shadow:0 0 18px rgba(255,76,36,.72)}
}

.circus-glow{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  opacity:.48;
  background:
    radial-gradient(circle at 8% 18%, rgba(255,205,87,.13), transparent 12%),
    radial-gradient(circle at 91% 21%, rgba(255,119,43,.11), transparent 13%),
    radial-gradient(circle at 18% 54%, rgba(255,199,72,.10), transparent 11%),
    radial-gradient(circle at 84% 55%, rgba(255,184,62,.10), transparent 13%),
    radial-gradient(circle at 50% 82%, rgba(255,116,26,.08), transparent 18%);
  animation:circusGlow 1.35s ease-in-out infinite alternate;
}
@keyframes circusGlow{
  from{opacity:.32;filter:brightness(.95)}
  to{opacity:.74;filter:brightness(1.18)}
}

.stage.playing.hot-machine .circus-glow{
  animation-duration:.48s;
  opacity:.92;
  filter:saturate(1.2);
}
.stage.playing.boiling-machine{
  animation:boilingShake .18s linear infinite;
}
@keyframes boilingShake{
  0%,100%{transform:translate(0,0)}
  25%{transform:translate(-1px,1px)}
  50%{transform:translate(1px,-1px)}
  75%{transform:translate(1px,1px)}
}

.steam.jet{
  width:72px;
  height:38px;
  border-radius:55% 45% 60% 40%;
  background:
    radial-gradient(ellipse at 25% 50%, rgba(255,255,245,.73), rgba(245,239,224,.36) 35%, rgba(255,255,255,0) 73%);
  filter:blur(4px);
  animation:steamJet var(--life,.9s) cubic-bezier(.13,.68,.25,1) forwards;
}
@keyframes steamJet{
  0%{transform:translate(0,0) scale(.5,.6);opacity:.12}
  16%{opacity:.76}
  100%{transform:translate(var(--dx,70px),var(--dy,-28px)) scale(2.2,1.3);opacity:0}
}

.dust.big{
  width:6px;height:6px;
  background:rgba(255,211,126,.86);
  box-shadow:0 0 10px rgba(255,137,38,.48);
}

.confetti{
  position:absolute;
  width:8px;
  height:14px;
  border-radius:2px;
  background:var(--paper,#d3a044);
  transform:rotate(var(--rot,0deg));
  animation:confettiFall var(--life,2.8s) cubic-bezier(.18,.65,.32,1) forwards;
}
@keyframes confettiFall{
  0%{
    transform:translate(0,0) rotate(var(--rot,0deg)) scale(.7);
    opacity:1;
  }
  100%{
    transform:translate(var(--dx,0px),var(--dy,500px)) rotate(calc(var(--rot,0deg) + 620deg)) scale(1);
    opacity:0;
  }
}

.stage.rhythm-slip{
  animation:slipStage .38s cubic-bezier(.16,.82,.24,1);
}
@keyframes slipStage{
  0%{transform:translateX(0)}
  16%{transform:translateX(-4px)}
  33%{transform:translateX(4px)}
  52%{transform:translateX(-2px)}
  72%{transform:translateX(1px)}
  100%{transform:translateX(0)}
}


.debug summary::after{
  content:" · BALANCE RESET";
  opacity:.65;
  font-size:.85em;
}


.result-card:not(.hidden){
  animation:resultRise .34s cubic-bezier(.18,.78,.26,1);
}
@keyframes resultRise{
  from{opacity:0;transform:translate(-50%,14px) scale(.97)}
  to{opacity:1;transform:translate(-50%,0) scale(1)}
}
.result-inner small{font-size:clamp(8px,1.5vw,11px)}
.result-inner h2{
  margin:.3em 0 .24em;
  font-size:clamp(20px,4.7vw,34px);
  line-height:1;
}
.result-inner p{
  margin:.35em 0;
  font-size:clamp(11px,2.2vw,14px);
  line-height:1.3;
}
.result-score{margin:7px 0 5px}
.result-score strong{font-size:clamp(22px,5vw,38px)}
.result-inner .main-btn{
  margin-top:5px;
  padding:9px 18px;
  font-size:clamp(12px,2.2vw,15px);
}

/* V9: Hitze soll wieder sichtbar "leben". */
.bar.heat{
  position:relative;
  overflow:visible;
}
.bar.heat::after{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius:99px;
  opacity:0;
  box-shadow:0 0 9px rgba(255,92,30,.65);
  transition:opacity .18s ease;
}
.stage.hot-machine .bar.heat::after{opacity:.55}
.stage.boiling-machine .bar.heat::after{
  opacity:1;
  animation:heatBarPulse .34s ease-in-out infinite alternate;
}
@keyframes heatBarPulse{
  from{box-shadow:0 0 7px rgba(255,111,31,.65)}
  to{box-shadow:0 0 16px rgba(255,55,20,.96)}
}

@media (max-width: 620px){
  .live-highscore{bottom:6.9%; width:58%; padding:5px 9px 6px;}
  .live-highscore.result-mode{width:71%; padding:8px 10px 9px;}
  .rub-prompt{top:72.7%; min-width:56%; padding:8px 10px 9px;}
  .ticker-shell{width:72%; bottom:1.45%; gap:6px; padding:4px 8px;}
  .result-card{bottom:16.6%; width:min(90%,390px);}
  .target-marker{left:4.2%; top:13.6%; width:24.5%; transform:translateX(8px) rotate(-34deg);}
  .playing .target-marker{transform:translateX(0) rotate(-34deg);}
}


/* V12: Bei längerem Nichtstun wirkt der Automat sichtbar ungeduldig. */
.stage.idle-return .lukas-head{
  animation:idleNod .88s ease-in-out infinite;
}
@keyframes idleNod{
  0%,100%{transform:rotate(0deg)}
  35%{transform:rotate(1.6deg)}
  68%{transform:rotate(-1deg)}
}


/* ------------------------------------------------------------
   V14: DER BOXHANDSCHUH – rechtschaffend fies, aber am Rand versteckt
   ------------------------------------------------------------ */
.glove-assembly{
  position:absolute;
  z-index:18;
  left:-27.8%;
  top:22.0%;
  width:48.4%;
  aspect-ratio:1448/1086;
  pointer-events:none;
  transform-origin:17% 50%;
  transform:translateX(0) rotate(0deg);
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.55));
  opacity:.98;
}
.glove-frame{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.playing .glove-assembly{
  opacity:1;
  animation:gloveIdle .56s ease-in-out infinite;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.55)) drop-shadow(0 0 14px rgba(255,90,48,.28)) brightness(1.04);
}
@keyframes gloveIdle{
  0%,100%{transform:translateX(0) translateY(0) rotate(0deg); filter:drop-shadow(0 8px 12px rgba(0,0,0,.55)) drop-shadow(0 0 12px rgba(255,90,48,.20)) brightness(1.02);}
  18%{transform:translateX(1px) translateY(-1px) rotate(.2deg); filter:drop-shadow(0 8px 12px rgba(0,0,0,.55)) drop-shadow(0 0 14px rgba(255,104,58,.24)) brightness(1.04);}
  42%{transform:translateX(3px) translateY(1px) rotate(-.25deg); filter:drop-shadow(0 8px 12px rgba(0,0,0,.55)) drop-shadow(0 0 18px rgba(255,124,62,.34)) brightness(1.07);}
  64%{transform:translateX(1px) translateY(-1px) rotate(.18deg); filter:drop-shadow(0 8px 12px rgba(0,0,0,.55)) drop-shadow(0 0 15px rgba(255,92,44,.30)) brightness(1.05);}
  84%{transform:translateX(4px) translateY(0) rotate(-.18deg); filter:drop-shadow(0 8px 12px rgba(0,0,0,.55)) drop-shadow(0 0 20px rgba(255,132,64,.38)) brightness(1.08);}
}
.stage.goal-near .glove-assembly{
  animation:gloveReady .72s ease-in-out infinite;
}
@keyframes gloveReady{
  0%,100%{transform:translateX(1px) translateY(0) rotate(0deg)}
  24%{transform:translateX(4px) translateY(-1px) rotate(.35deg)}
  45%{transform:translateX(8px) translateY(1px) rotate(.55deg)}
  70%{transform:translateX(3px) translateY(-1px) rotate(-.25deg)}
}
.stage.goal-armed .glove-assembly{
  animation:gloveThreat .18s linear infinite;
}
@keyframes gloveThreat{
  0%,100%{transform:translateX(1px) translateY(0)}
  20%{transform:translateX(5px) translateY(-1px)}
  40%{transform:translateX(10px) translateY(1px)}
  60%{transform:translateX(6px) translateY(-1px)}
  80%{transform:translateX(12px) translateY(0)}
}

/* Beim Schlag kommt der Handschuh explosiv aus dem linken Rand.
   Er touchiert maximal die linke Backe – dann fliegt Lukas los. */
.stage.punch-finale .glove-assembly{
  animation:glovePunch 1.06s cubic-bezier(.16,.86,.25,1) forwards !important;
}
@keyframes glovePunch{
  0%{transform:translateX(7px) rotate(0deg)}
  18%{transform:translateX(20px) rotate(.6deg)}
  32%{transform:translateX(46px) rotate(0deg)}
  40%{transform:translateX(66px) rotate(0deg)}
  48%{transform:translateX(58px) rotate(-.5deg)}
  68%{transform:translateX(22px) rotate(0deg)}
  100%{transform:translateX(0) rotate(0deg)}
}

.impact-burst{
  position:absolute;
  z-index:35;
  left:8.6%;
  top:20.2%;
  width:29%;
  height:auto;
  opacity:0;
  transform:scale(.35) rotate(-10deg);
  pointer-events:none;
  filter:drop-shadow(0 0 18px rgba(255,179,49,.75));
}
.impact-burst.show{
  animation:impactBoom .62s cubic-bezier(.12,.8,.22,1) forwards;
}
@keyframes impactBoom{
  0%{opacity:0;transform:scale(.25) rotate(-14deg)}
  22%{opacity:1;transform:scale(1.05) rotate(3deg)}
  58%{opacity:.86;transform:scale(.92) rotate(-2deg)}
  100%{opacity:0;transform:scale(1.2) rotate(5deg)}
}

/* Lukas bekommt bei 100 einen echten Kirmes-Kinnhaken.
   Er fliegt nach rechts und pendelt sich danach wieder ein. */
.stage.punch-finale .lever-group{
  transition:none !important;
  animation:lukasPunchSwing 1.82s cubic-bezier(.18,.74,.28,1) forwards !important;
}
@keyframes lukasPunchSwing{
  0%   {transform:rotate(-27.5deg) scaleY(.986)}
  10%  {transform:rotate(25deg) scaleY(1)}
  24%  {transform:rotate(-15deg) scaleY(.996)}
  39%  {transform:rotate(10deg) scaleY(1)}
  54%  {transform:rotate(-6.5deg) scaleY(.998)}
  68%  {transform:rotate(4deg) scaleY(1)}
  80%  {transform:rotate(-2.2deg) scaleY(1)}
  90%  {transform:rotate(1.0deg) scaleY(1)}
  100% {transform:rotate(0deg) scaleY(1)}
}
.stage.punch-finale .lukas-head{
  animation:punchedHead 1.70s ease-out forwards !important;
}
@keyframes punchedHead{
  0%{filter:drop-shadow(0 11px 12px rgba(0,0,0,.42));}
  12%{filter:drop-shadow(0 11px 12px rgba(0,0,0,.42)) brightness(1.18);}
  100%{filter:drop-shadow(0 11px 12px rgba(0,0,0,.42));}
}

/* ------------------------------------------------------------
   V13: 100 muss eindeutig als Ziel erkennbar sein
   ------------------------------------------------------------ */
.goal100{
  position:absolute;
  z-index:23;
  left:71.8%;
  top:50.9%;
  transform:translate(-50%,-50%) rotate(-5deg) scale(.92);
  pointer-events:none;
  opacity:.86;
}
.goal100 span{
  display:inline-block;
  padding:3px 7px;
  border:1px solid rgba(255,217,111,.68);
  border-radius:999px;
  background:rgba(80,25,10,.76);
  color:#ffe6aa;
  font:900 clamp(7px,1.4vw,10px)/1 Arial,sans-serif;
  letter-spacing:.05em;
  text-shadow:0 1px 2px #000;
  box-shadow:0 0 8px rgba(255,152,44,.22);
}
.stage.goal-near .goal100 span{
  animation:goalBlink .72s ease-in-out infinite;
  border-color:#ffd45f;
  box-shadow:0 0 10px rgba(255,158,35,.58),0 0 18px rgba(255,65,20,.25);
}
.stage.goal-armed .goal100 span{
  animation-duration:.28s;
  background:rgba(124,31,8,.88);
}
@keyframes goalBlink{
  0%,100%{opacity:.72;transform:scale(1)}
  50%{opacity:1;transform:scale(1.08)}
}

/* Beim Finale sollen Ergebnis/Highscore kurz verschwinden,
   damit man den Schlag frei sehen kann. */
.stage.punch-finale .live-highscore,
.stage.punch-finale .ticker-shell,
.stage.punch-finale .mini-hud{
  opacity:.25;
  transition:opacity .18s ease;
}

@media (max-width:620px){
  .glove-assembly{
    left:-25.9%;
    top:22.7%;
    width:51.6%;
  }
  .impact-burst{
    left:7.8%;
    top:21.2%;
    width:32%;
  }
  .goal100{
    left:72.2%;
    top:51.7%;
  }
}


/* ------------------------------------------------------------
   V19: 60-SEKUNDEN-BONUSUHR auf der unteren Messingscheibe
   ------------------------------------------------------------ */
.timer-dial{
  position:absolute;
  z-index:7;
  left:65.8%;
  top:58.7%;
  width:20%;
  aspect-ratio:1/1;
  border-radius:50%;
  pointer-events:none;
  opacity:.97;
}
.timer-ticks{
  position:absolute;
  inset:6%;
  border-radius:50%;
  background:
    repeating-conic-gradient(
      from 0deg,
      rgba(78,38,14,.72) 0deg 1.4deg,
      transparent 1.4deg 6deg
    );
  -webkit-mask:radial-gradient(circle, transparent 0 76%, #000 77% 100%);
  mask:radial-gradient(circle, transparent 0 76%, #000 77% 100%);
  opacity:.62;
}
.timer-needle{
  position:absolute;
  z-index:3;
  left:49.2%;
  top:12%;
  width:2.4%;
  height:39%;
  border-radius:999px 999px 2px 2px;
  transform-origin:50% 98%;
  transform:rotate(0deg);
  background:linear-gradient(90deg,#7d351b,#f0bb55 45%,#fff0b2 55%,#8b3f1d);
  box-shadow:0 0 4px rgba(0,0,0,.75),0 0 7px rgba(255,169,55,.35);
  will-change:transform;
}
.timer-hub{
  position:absolute;
  z-index:4;
  left:50%;
  top:50%;
  width:9%;
  aspect-ratio:1/1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#ffe7a3,#b86d26 48%,#4d2611 100%);
  border:1px solid rgba(74,31,12,.9);
  box-shadow:0 1px 5px #000;
}
.timer-status{
  position:absolute;
  left:50%;
  bottom:15%;
  transform:translateX(-50%);
  white-space:nowrap;
  padding:2px 5px;
  border-radius:999px;
  background:rgba(39,17,9,.66);
  color:#f8d891;
  font:900 clamp(6px,1.2vw,10px)/1 Arial,sans-serif;
  letter-spacing:.04em;
  text-shadow:0 1px 2px #000;
}
.timer-dial.expired .timer-needle{
  background:linear-gradient(90deg,#4c1c14,#c64128 48%,#ff9977 54%,#4c1c14);
  box-shadow:0 0 7px rgba(255,65,34,.58);
}
.timer-dial.expired .timer-status{
  color:#ffb096;
  background:rgba(75,18,12,.76);
}

/* ------------------------------------------------------------
   +5 GOLD: kurzer Bonus-Pop
   ------------------------------------------------------------ */
.gold-bonus-popup{
  position:absolute;
  z-index:75;
  left:50%;
  top:49%;
  transform:translate(-50%,-50%);
  min-width:42%;
  text-align:center;
  padding:12px 18px 10px;
  border:2px solid #ffd46e;
  border-radius:14px;
  background:linear-gradient(180deg,rgba(91,49,10,.96),rgba(42,21,7,.96));
  box-shadow:
    0 0 0 2px rgba(105,55,13,.85) inset,
    0 0 24px rgba(255,190,62,.65),
    0 12px 30px rgba(0,0,0,.58);
  pointer-events:none;
}
.gold-bonus-popup strong{
  display:block;
  color:#fff1a9;
  font:900 clamp(26px,6vw,48px)/1 Arial,sans-serif;
  text-shadow:0 0 10px #ffab2f,0 3px 0 #7e3d0d;
}
.gold-bonus-popup span{
  display:block;
  margin-top:4px;
  color:#ffe5a5;
  font:900 clamp(9px,1.8vw,13px)/1 Arial,sans-serif;
  letter-spacing:.12em;
}
.gold-bonus-popup.show{
  display:block !important;
  animation:goldPop 2.05s cubic-bezier(.16,.83,.25,1) forwards;
}
@keyframes goldPop{
  0%{opacity:0;transform:translate(-50%,-42%) scale(.55) rotate(-4deg)}
  14%{opacity:1;transform:translate(-50%,-50%) scale(1.12) rotate(2deg)}
  30%{transform:translate(-50%,-50%) scale(.98) rotate(0)}
  72%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-58%) scale(.92)}
}

/* ------------------------------------------------------------
   V19: Beim Treffer jetzt RICHTIG Kirmes.
   ------------------------------------------------------------ */
.stage.punch-finale{
  animation:cabinetMayhem 1.24s cubic-bezier(.14,.76,.22,1) !important;
}
@keyframes cabinetMayhem{
  0%{transform:translate(0,0) rotate(0)}
  6%{transform:translate(-6px,2px) rotate(-.28deg)}
  12%{transform:translate(7px,-4px) rotate(.34deg)}
  19%{transform:translate(-7px,5px) rotate(-.34deg)}
  27%{transform:translate(6px,-3px) rotate(.28deg)}
  36%{transform:translate(-5px,3px) rotate(-.22deg)}
  47%{transform:translate(4px,-2px) rotate(.17deg)}
  59%{transform:translate(-3px,2px) rotate(-.12deg)}
  72%{transform:translate(2px,-1px) rotate(.08deg)}
  86%{transform:translate(-1px,1px) rotate(-.04deg)}
  100%{transform:translate(0,0) rotate(0)}
}
.stage.punch-finale::after{
  content:"";
  position:absolute;
  z-index:60;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 16% 25%,rgba(255,242,190,.76),transparent 15%),
    radial-gradient(circle at 22% 31%,rgba(255,118,35,.34),transparent 28%);
  animation:punchFlash .58s ease-out forwards;
}
@keyframes punchFlash{
  0%{opacity:0}
  9%{opacity:1}
  34%{opacity:.46}
  100%{opacity:0}
}

@media (max-width:620px){
  .timer-status{font-size:6px;padding:2px 4px;}
  .gold-bonus-popup{min-width:54%;top:48%;}
}


/* ------------------------------------------------------------
   V20: Nachfederung bis Neustart
   ------------------------------------------------------------ */
.stage.aftershock .lever-group{
  transition:none !important;
  animation:lukasAftershock 2.25s ease-in-out infinite !important;
}
@keyframes lukasAftershock{
  0%{transform:rotate(0deg) scaleY(1)}
  10%{transform:rotate(2.8deg) scaleY(1)}
  24%{transform:rotate(-4.2deg) scaleY(.998)}
  36%{transform:rotate(3.6deg) scaleY(1)}
  48%{transform:rotate(-3.1deg) scaleY(.999)}
  60%{transform:rotate(2.4deg) scaleY(1)}
  72%{transform:rotate(-1.9deg) scaleY(.999)}
  84%{transform:rotate(1.3deg) scaleY(1)}
  100%{transform:rotate(0deg) scaleY(1)}
}
.stage.aftershock .lukas-head{
  animation:aftershockHead 1.85s ease-in-out infinite !important;
}
@keyframes aftershockHead{
  0%,100%{transform:rotate(0deg); filter:drop-shadow(0 11px 12px rgba(0,0,0,.42));}
  25%{transform:rotate(-2.8deg); filter:drop-shadow(0 11px 12px rgba(0,0,0,.42)) brightness(1.03);}
  50%{transform:rotate(2.1deg);}
  75%{transform:rotate(-1.2deg);}
}


/* ------------------------------------------------------------
   V21: Anleitung
   ------------------------------------------------------------ */
.help-btn{
  position:absolute;
  z-index:70;
  right:2.1%;
  top:7.4%;
  width:clamp(30px,7vw,48px);
  height:clamp(30px,7vw,48px);
  border-radius:50%;
  border:1px solid rgba(255,215,133,.72);
  background:rgba(30,17,9,.78);
  color:#ffe1a2;
  font:900 clamp(16px,3.8vw,25px)/1 Arial,sans-serif;
  cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,.55), inset 0 0 10px rgba(255,179,57,.11);
  backdrop-filter:blur(3px);
}
.help-btn:hover{transform:scale(1.06)}

.start-actions{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.secondary-btn{
  margin-top:10px;
  border:1px solid rgba(255,204,112,.62);
  border-radius:999px;
  padding:10px 18px;
  color:#f3ddb3;
  background:rgba(57,33,18,.88);
  font-weight:800;
  cursor:pointer;
  box-shadow:0 4px 0 #3e2413,0 7px 15px #0006;
}
.secondary-btn:active{transform:translateY(2px);box-shadow:0 2px 0 #3e2413,0 4px 10px #0006}

.help-card{
  position:absolute;
  inset:0;
  z-index:90;
  display:grid;
  place-items:center;
  padding:7%;
  background:rgba(5,4,3,.62);
  backdrop-filter:blur(4px);
}
.help-inner{
  position:relative;
  width:min(94%,520px);
  max-height:88%;
  overflow:auto;
  padding:clamp(18px,4vw,30px);
  background:linear-gradient(160deg,rgba(43,24,13,.98),rgba(14,10,8,.98));
  border:2px solid #ad7432;
  outline:1px solid rgba(255,214,132,.26);
  border-radius:14px;
  box-shadow:0 18px 48px rgba(0,0,0,.75);
  text-align:left;
}
.help-inner small{
  color:#dba34b;
  font:900 11px/1 Arial,sans-serif;
  letter-spacing:.2em;
}
.help-inner h2{
  margin:.35em 0 .55em;
  color:#f2d9a3;
  font-size:clamp(24px,5.5vw,40px);
  line-height:1;
}
.help-steps{
  margin:0;
  padding-left:1.35em;
  color:#eee0c8;
  font:clamp(12px,2.3vw,15px)/1.45 Arial,sans-serif;
}
.help-steps li{margin:.58em 0}
.help-steps strong{color:#ffd98e}
.help-note{
  margin:14px 0 4px;
  padding:9px 11px;
  border-left:3px solid #d99a39;
  background:rgba(255,188,73,.07);
  color:#e7d2ad;
  font:italic clamp(11px,2.1vw,14px)/1.35 Arial,sans-serif;
}
.help-close{
  position:absolute;
  right:10px;
  top:8px;
  width:36px;
  height:36px;
  border-radius:50%;
  border:1px solid rgba(255,215,133,.48);
  background:rgba(20,12,8,.82);
  color:#f6d9a5;
  font:700 25px/1 Arial,sans-serif;
  cursor:pointer;
}

/* Nach dem Hauptschlag beginnt das Nachwippen sofort.
   Kein eingefrorener Zwischenzustand mehr. */
.stage.aftershock .lever-group{
  transition:none !important;
  animation:lukasAftershock 2.25s ease-in-out infinite !important;
}
.stage.aftershock .lukas-head{
  animation:aftershockHead 1.85s ease-in-out infinite !important;
}

@media (max-width:620px){
  .help-btn{top:7.4%;right:2.2%;}
  .help-card{padding:5%;}
}

/* 7R Startscreen Standard 1.0.0 */
.game-shell-hidden{display:none!important}.lukas-cover-screen{position:fixed;z-index:5000;inset:0;display:grid;place-items:center;overflow:hidden;background:#130804}.lukas-cover-screen::before{content:"";position:absolute;inset:-5%;background:url('start-cover.webp') center/cover no-repeat;filter:blur(34px) brightness(.22);transform:scale(1.08)}.lukas-cover-wrap{position:relative;z-index:1;width:min(100vw,calc(100vh * 941 / 1672));height:min(100vh,calc(100vw * 1672 / 941));aspect-ratio:941/1672;background:#2a1007;box-shadow:0 0 70px #000}.lukas-cover-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;user-select:none;pointer-events:none;-webkit-user-drag:none}.lukas-cover-hotspot{position:absolute;z-index:8;border:0;background:transparent;color:transparent;padding:0;cursor:pointer;outline:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}.lukas-cover-hotspot span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.lukas-cover-hotspot:focus-visible{outline:3px solid #fff4c4;outline-offset:-4px;background:rgba(255,205,91,.12)}.lukas-cover-profile{left:71.5%;top:1.4%;width:18.7%;height:7.2%}.lukas-cover-settings{left:91.6%;top:1.3%;width:7.6%;height:7.4%}.lukas-cover-start{left:3.0%;top:79.2%;width:94.0%;height:9.8%;z-index:30;pointer-events:auto!important;touch-action:manipulation}.lukas-cover-help{left:2.4%;top:89.2%;width:23.0%;height:7.5%}.lukas-cover-records{left:25.7%;top:89.2%;width:23.1%;height:7.5%}.lukas-cover-share{left:49.0%;top:89.2%;width:23.1%;height:7.5%}.lukas-cover-music{left:72.4%;top:89.2%;width:25.0%;height:7.5%}.lukas-cover-new{left:76.0%;top:68.7%;width:22.4%;height:11.0%}
.lukas-cover-modal{position:fixed;z-index:5100;inset:0;display:grid;place-items:center;padding:18px;background:rgba(27,8,2,.84);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}.lukas-cover-modal[hidden]{display:none!important}.lukas-cover-card{width:min(620px,92vw);max-height:90vh;overflow:auto;padding:26px 30px;border:2px solid #e4b65e;border-radius:18px;background:linear-gradient(180deg,#4d1608,#240b05);color:#fff1cf;box-shadow:0 0 60px #000,0 0 30px rgba(255,164,47,.28);font-family:Georgia,"Times New Roman",serif}.lukas-cover-card.compact{width:min(410px,90vw);text-align:center}.lukas-cover-card small{display:block;color:#ffd777;letter-spacing:.14em;font:800 11px Arial,sans-serif}.lukas-cover-card h2{margin:7px 0 15px;color:#fff5d4;font-size:30px}.lukas-cover-card ol{margin:0;padding-left:1.35em;line-height:1.48}.lukas-cover-card li{margin:.55em 0}.lukas-cover-card p{color:#f0c98d;line-height:1.45}.lukas-cover-card button{display:block;width:100%;margin-top:13px;border:1px solid #f0c369;border-radius:10px;background:linear-gradient(180deg,#9e3b0b,#632208);color:#fff2c7;padding:11px 16px;font-weight:900;letter-spacing:.05em;cursor:pointer;box-shadow:inset 0 0 12px rgba(255,205,102,.12)}.lukas-cover-card button:hover{filter:brightness(1.15)}
@media (orientation:landscape){.lukas-cover-wrap{height:100vh;width:auto}.lukas-cover-screen{overflow:auto}}


/* 7R V21.2 · sauberer Run-Abschluss */
.result-core-summary{margin:7px auto 2px;max-width:360px;padding:8px 10px;border:1px solid rgba(255,202,111,.32);border-radius:9px;background:rgba(8,7,6,.42);color:#e9dcc4;font:700 clamp(10px,1.8vw,13px)/1.35 Arial,sans-serif}
.result-core-summary.good{border-color:rgba(107,220,157,.55);color:#c7f3db;background:rgba(12,42,28,.48)}
.result-core-summary.warn{border-color:rgba(255,202,111,.5);color:#ffe0a2}
.result-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:4px}
.result-inner .main-btn.secondary{background:linear-gradient(#34291b,#1c160f);border-color:#9b773e;color:#f1ddb5;box-shadow:0 4px 0 #100b07,0 8px 16px #0007}
@media(max-width:620px){.result-actions{gap:6px}.result-inner .main-btn.secondary{padding-inline:13px}}


/* 21.5 – Rubbelstopp: 0,5 s ohne gültigen Hub = Punkte auf 0 */
.rub-stop-warning{position:absolute;z-index:100;left:50%;top:73.5%;transform:translate(-50%,10px) scale(.94);display:grid;gap:2px;min-width:44%;padding:7px 12px;border:1px solid rgba(255,188,74,.78);border-radius:9px;background:rgba(52,12,5,.90);box-shadow:0 8px 24px rgba(0,0,0,.55),0 0 16px rgba(255,104,42,.20);text-align:center;pointer-events:none;opacity:0;transition:opacity .15s ease,transform .18s ease}
.rub-stop-warning.show{opacity:1;transform:translate(-50%,0) scale(1)}
.rub-stop-warning strong{font:900 clamp(10px,1.65vw,14px)/1 Arial,sans-serif;letter-spacing:.08em;color:#ffd777;text-shadow:0 1px 3px #000}
.rub-stop-warning span{font:800 clamp(8px,1.15vw,11px)/1.1 Arial,sans-serif;color:#ffb18d}
@media(prefers-reduced-motion:reduce){.rub-stop-warning{transition:none}}

/* 1.60.11 – Rubbelstopp: kompletter Rückschlag */
.stage.rub-stop-reset .lukas-head{filter:drop-shadow(0 11px 12px rgba(0,0,0,.42)) brightness(.96)}
.stage.rub-stop-reset .lever-group{transition:none}

/* 21.7 · Tablet: Punkte über dem Finger sichtbar */
@media (pointer:coarse) and (min-width:621px) and (max-width:1100px){
  .score-pop{font-size:clamp(16px,2.55vw,23px);text-shadow:0 2px 4px #000,0 0 12px rgba(255,209,116,.58)}
}