/* JUICE SHIFT */
:root{
  --plum:#2A1436;
  --plum-2:#43215C;
  --plum-deep:#1B0A24;
  --cream:#F7EDE2;
  --cream-warm:#F0D8C5;
  --chrome:#C9CED8;
  --chrome-dark:#8F96A3;
  --orange:#FF6B2C;
  --orange-deep:#E6511B;
  --gold:#FFC93C;
  --teal:#3FC7B4;
  --red:#E4453A;
  --ink:#2A1024;
  --shadow:0 18px 42px rgba(14,3,22,.55);
  --ease:cubic-bezier(.22,.9,.28,1);
  --display:'Shrikhand', Georgia, serif;
  --text:'Figtree', system-ui, sans-serif;
  --mono:'Chivo Mono', ui-monospace, monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
html{background:#2A1436}
body{
  margin:0; overflow:hidden; background:var(--plum);
  font-family:var(--text); color:var(--cream);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  touch-action:manipulation;
  -webkit-user-select:none; user-select:none;
  overscroll-behavior:none;
}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
img{display:block;max-width:none}
.app{position:fixed;inset:0;overflow:hidden;isolation:isolate}

/* ============ STAGE ============ */
.stage{position:absolute;inset:0;overflow:hidden}
.hall{
  position:absolute;inset:0;
  background:url(assets/factory_hall.webp) center 48%/cover no-repeat;
  transform:scale(1.02);
  filter:saturate(1.08) contrast(1.03);
  transition:filter .5s var(--ease), transform .8s var(--ease);
}
.hall::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 80% at 14% 0%, rgba(255,176,96,.20), rgba(255,176,96,0) 45%),
    radial-gradient(90% 70% at 78% 10%, rgba(160,110,255,.18), rgba(160,110,255,0) 55%),
    linear-gradient(180deg, rgba(42,20,54,.30) 0%, rgba(42,20,54,.02) 32%, rgba(42,20,54,.10) 62%, rgba(26,8,38,.46) 100%);
  pointer-events:none;
}
.lightwash{
  position:absolute;left:-10%;top:-20%;width:70%;height:80%;
  background:radial-gradient(closest-side, rgba(255,196,120,.20), rgba(255,196,120,0));
  filter:blur(8px);pointer-events:none;z-index:1;
  animation:wash 9s ease-in-out infinite alternate;
}
@keyframes wash{from{opacity:.65;transform:translate3d(0,0,0)}to{opacity:1;transform:translate3d(4%,2%,0)}}
.dust{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.mote{position:absolute;width:3px;height:3px;border-radius:50%;background:rgba(255,236,205,.55);
  box-shadow:0 0 8px rgba(255,210,150,.65);animation:moteFloat linear infinite}
@keyframes moteFloat{
  0%{transform:translate3d(0,20px,0);opacity:0}
  12%{opacity:.7}
  85%{opacity:.45}
  100%{transform:translate3d(34px,-90px,0);opacity:0}
}

/* ============ DECK ============ */
.factory{position:absolute;inset:0;z-index:3;transition:filter .45s var(--ease)}
.deck-wrap{
  position:absolute;left:-2.2vw;top:33.5vh;width:104.4vw;
  z-index:4;pointer-events:none;
}
.deck{width:100%;height:auto;filter:drop-shadow(0 22px 30px rgba(12,2,20,.45))}
.treads{position:absolute;inset:0;pointer-events:none}
.tread{
  position:absolute;left:6.2%;right:0;overflow:hidden;
  --tilew:120px;
}
.tread[data-band="0"]{top:2.1%;height:11.6%}
.tread[data-band="1"]{top:24.4%;height:13.4%}
.tread[data-band="2"]{top:49.8%;height:15.4%}
.tread > i{
  position:absolute;left:0;top:0;height:100%;
  width:calc(100% + var(--tilew));
  background-repeat:repeat-x;background-size:auto 100%;
  will-change:transform;
  animation:treadScroll var(--treaddur, 1s) linear infinite;
}
.tread[data-band="0"] > i{background-image:url(assets/tread_top.webp)}
.tread[data-band="1"] > i{background-image:url(assets/tread_mid.webp);animation-delay:-.3s}
.tread[data-band="2"] > i{background-image:url(assets/tread_bot.webp);animation-delay:-.6s}
@keyframes treadScroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-1 * var(--tilew)),0,0)}}
.app[data-screen="paused"] .tread > i,
.app[data-screen="over"] .tread > i{animation-play-state:paused}
.app.overload .tread > i{filter:saturate(1.12) brightness(1.03)}

/* ============ MACHINES ============ */
.machines{position:absolute;inset:0;z-index:9;pointer-events:none}
.machine{position:absolute;width:var(--mw,260px);height:var(--mh,340px);will-change:transform}
.machine-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 18px 22px rgba(12,2,20,.4))}
.machine-name{
  position:absolute;left:7%;bottom:1.6%;width:86%;
  padding:.30em .38em .34em;border-radius:8px;
  background:linear-gradient(180deg,#fffaf2,#f4e6d6 56%,#e2cdb8);
  border:2px solid #c9d0da;
  box-shadow:inset 0 1px 0 #fff, inset 0 -3px 0 rgba(120,80,60,.18), 0 5px 10px rgba(10,2,18,.4);
  text-align:center;line-height:1.02;letter-spacing:.1em;
}
.machine-name::before,.machine-name::after{content:"";position:absolute;top:20%;width:5px;height:5px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,#9aa2ae 58%,#6f7784);box-shadow:0 1px 1px rgba(0,0,0,.4)}
.machine-name::before{left:3%}.machine-name::after{right:3%}
.machine-name b{display:block;font-size:clamp(7px,.62vw,12px);font-weight:700;color:#4a1c2c}
.machine-name span{display:block;margin-top:.24em;font-size:clamp(5px,.44vw,8px);font-weight:700;color:#9a4a2c;letter-spacing:.12em}
.machine-steam{position:absolute;left:44%;top:-5%;width:40%;opacity:0;animation:steamPuff 5.2s ease-out infinite}
.machine[data-machine="berry"] .machine-steam{left:40%;top:-9%;animation-delay:-1.7s}
.machine[data-machine="melon"] .machine-steam{left:52%;top:-2%;animation-delay:-3.1s}
.machine-steam img{width:100%;height:auto}
@keyframes steamPuff{
  0%{opacity:0;transform:translate3d(0,14%,0) scale(.7)}
  16%{opacity:.72}
  55%{opacity:.3}
  100%{opacity:0;transform:translate3d(6%,-32%,0) scale(1.35)}
}
.glass-glow{
  position:absolute;border-radius:50%;opacity:0;pointer-events:none;
  mix-blend-mode:screen;filter:blur(2px);
  transition:opacity .25s ease;
}
.machine[data-machine="citrus"] .glass-glow{left:47%;top:43%;width:31%;height:19%;background:radial-gradient(closest-side,#ffb04a,rgba(255,120,30,0))}
.machine[data-machine="berry"] .glass-glow{left:12%;top:32%;width:48%;height:26%;background:radial-gradient(closest-side,#ff4f6d,rgba(180,20,60,0))}
.machine[data-machine="melon"] .glass-glow{left:55%;top:39%;width:28%;height:21%;background:radial-gradient(closest-side,#ff8193,rgba(230,70,100,0))}
.machine.correct .glass-glow{animation:glassPulse .7s var(--ease)}
.machine.correct .machine-img{animation:machineGulp .62s var(--ease)}
@keyframes machineGulp{0%{transform:translateY(0) scale(1)}32%{transform:translateY(2px) scale(1.035,.955)}64%{transform:translateY(-1px) scale(.985,1.02)}100%{transform:translateY(0) scale(1)}}
@keyframes glassPulse{0%{opacity:0;transform:scale(.7)}35%{opacity:.95}100%{opacity:0;transform:scale(1.25)}}
.lamp-red{position:absolute;width:21%;right:8%;top:-5%;opacity:0;transform-origin:50% 50%;pointer-events:none}
.machine.jammed .lamp-red{opacity:1;animation:lampPulse .48s steps(2,end) infinite}
@keyframes lampPulse{0%,100%{filter:brightness(1) drop-shadow(0 0 0 rgba(255,40,30,0))}50%{filter:brightness(1.5) drop-shadow(0 0 16px rgba(255,50,40,.95))}}
.gauge-red{position:absolute;width:17%;opacity:0;pointer-events:none;transition:opacity .2s}
.machine[data-machine="citrus"] .gauge-red{right:2%;top:47%}
.machine[data-machine="berry"] .gauge-red{right:2%;top:41%}
.machine[data-machine="melon"] .gauge-red{right:2%;top:49%}
.machine.jammed .gauge-red{opacity:1;animation:gaugeShake .36s ease-in-out infinite}
@keyframes gaugeShake{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
.machine.jammed{animation:machineRattle .34s ease-in-out 3}
@keyframes machineRattle{0%,100%{transform:translate3d(0,0,0) rotate(0)}25%{transform:translate3d(-2px,1px,0) rotate(-.4deg)}70%{transform:translate3d(2px,0,0) rotate(.35deg)}}
.machine .murky{position:absolute;border-radius:9px;opacity:0;background:rgba(78,54,50,.55);mix-blend-mode:multiply;transition:opacity .3s}
.machine[data-machine="citrus"] .murky{left:47%;top:43%;width:31%;height:19%}
.machine[data-machine="berry"] .murky{left:12%;top:32%;width:48%;height:26%}
.machine[data-machine="melon"] .murky{left:55%;top:39%;width:28%;height:21%}
.machine.jammed .murky{opacity:.8}
.splash-anchor{position:absolute;left:8%;top:56%;width:1px;height:1px}

/* ============ BARRIERS ============ */
.barriers{position:absolute;inset:0;z-index:11;pointer-events:none}
.barrier{position:absolute;width:var(--bw,300px);opacity:0;transform-origin:92% 34%;
  transform:translate3d(0,-40px,0) rotate(-46deg);transition:opacity .18s ease}
.barrier img{width:100%;height:auto;transform:scaleX(-1);filter:drop-shadow(0 10px 14px rgba(10,2,18,.45))}
.barrier.down{opacity:1;transform:translate3d(0,0,0) rotate(-9deg);transition:transform .26s cubic-bezier(.3,1.5,.5,1),opacity .1s}

/* ============ FRUIT ============ */
.fruits,.demo-fruits{position:absolute;inset:0;z-index:8;pointer-events:none}
.fruit{position:absolute;left:0;top:0;transform-origin:50% 92%;will-change:transform}
.fruit::before{content:"";position:absolute;left:8%;right:8%;bottom:-2%;height:16%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(24,5,30,.48),rgba(24,5,30,0));filter:blur(2px);pointer-events:none}
.fruit img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 7px 6px rgba(18,3,24,.42))}
.fruit.golden img{filter:drop-shadow(0 0 10px rgba(255,201,60,.9)) sepia(.25) saturate(1.5) brightness(1.08)}
.fruit.golden::after{content:"";position:absolute;inset:8% 8% 12%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,214,90,.32),rgba(255,214,90,0));animation:goldenGlow 1.1s ease-in-out infinite alternate}
@keyframes goldenGlow{from{opacity:.4}to{opacity:1}}
.fruit.delivering{pointer-events:none}
.fruit.jammed{filter:saturate(.75)}
.fruit.jammed img{animation:jamShiver .16s steps(2,end) infinite}
@keyframes jamShiver{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(1px,0,0) rotate(.6deg)}}

/* ============ SWITCHES ============ */
.switches{position:absolute;inset:0;z-index:12;pointer-events:none}
.switch{
  position:absolute;width:var(--sws,110px);height:var(--sws,110px);
  pointer-events:auto;border-radius:22px;
  filter:drop-shadow(0 10px 14px rgba(10,2,18,.5));
  transition:transform .12s var(--ease);
  transform:translate(-50%,-50%);
}
.switch:active{transform:translate(-50%,-50%) scale(.93)}
.switch-inner{position:absolute;inset:0;display:block}
.switch-inner img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .12s}
.switch-inner .sw-up{transform:rotate(-90deg);opacity:0}
.switch-inner .sw-down{transform:rotate(-90deg);opacity:0}
.switch[data-state="up"] .sw-up{opacity:1}
.switch[data-state="down"] .sw-down{opacity:1}
.switch .sw-lit{opacity:0;transform:scale(.96)}
.switch.flash .sw-lit{opacity:1;animation:swFlash .24s ease-out}
@keyframes swFlash{0%{opacity:1;transform:scale(.97)}55%{opacity:1;transform:scale(1.04)}100%{opacity:0;transform:scale(1)}}
.switch-tag{
  position:absolute;left:50%;bottom:-7%;transform:translateX(-50%);
  display:flex;align-items:center;gap:.3em;
  padding:.22em .55em .26em;border-radius:999px;
  background:linear-gradient(180deg,#2e1026,#1e0a1a);
  border:1px solid rgba(255,220,180,.22);
  box-shadow:0 4px 10px rgba(8,1,14,.4);
  white-space:nowrap;
}
.switch-tag i{font-style:normal;font-size:calc(var(--sws,110px) * .105);color:var(--orange);transition:transform .2s var(--ease)}
.switch-tag b{font-family:var(--mono);font-weight:700;font-size:calc(var(--sws,110px) * .095);letter-spacing:.12em;color:#ffe7cf}
.switch[data-state="up"] .switch-tag i{transform:rotate(180deg)}
.switch.glow{animation:switchGlow 1.1s ease-in-out infinite alternate}
@keyframes switchGlow{from{filter:drop-shadow(0 10px 14px rgba(10,2,18,.5))}to{filter:drop-shadow(0 0 18px rgba(255,107,44,.75)) drop-shadow(0 10px 14px rgba(10,2,18,.5))}}
.switch .hit-ring{position:absolute;inset:-14%;border-radius:50%;border:2px solid rgba(255,201,60,0);pointer-events:none}
.switch.glow .hit-ring{border-color:rgba(255,201,60,.35);animation:hitRing 1.1s ease-out infinite}
@keyframes hitRing{0%{transform:scale(.8);opacity:.8}100%{transform:scale(1.12);opacity:0}}

/* ============ FX ============ */
.fx-layer{position:absolute;inset:0;z-index:26;pointer-events:none}
.splash{position:absolute;transform:translate(-50%,-50%) scale(.35);opacity:0;
  animation:splashBurst 1.02s var(--ease) forwards;will-change:transform,opacity}
.splash img{width:100%;height:auto;filter:drop-shadow(0 8px 14px rgba(10,2,18,.35))}
@keyframes splashBurst{
  0%{opacity:0;transform:translate(-50%,-42%) scale(.3) rotate(-8deg)}
  25%{opacity:1}
  55%{opacity:1;transform:translate(-50%,-58%) scale(1.14) rotate(3deg)}
  100%{opacity:0;transform:translate(-50%,-78%) scale(1.3) rotate(6deg)}
}
.puff{position:absolute;transform:translate(-50%,-50%);opacity:0;animation:puffUp .8s ease-out forwards}
.puff img{width:100%;height:auto;opacity:.6}
@keyframes puffUp{0%{opacity:0;transform:translate(-50%,-30%) scale(.5)}30%{opacity:.65}100%{opacity:0;transform:translate(-50%,-85%) scale(1.2)}}
.score-pop{
  position:absolute;transform:translate(-50%,-50%);
  font-family:var(--mono);font-weight:700;letter-spacing:.04em;
  color:#ffe9c9;text-shadow:0 2px 0 #7a2c12,0 6px 14px rgba(10,2,18,.6);
  animation:scorePop 1s var(--ease) forwards;white-space:nowrap;
}
.score-pop.gold{color:var(--gold);text-shadow:0 2px 0 #7a4b00, 0 0 18px rgba(255,201,60,.8)}
.score-pop.bad{color:#ffd0c9;font-size:.8em;text-shadow:0 2px 0 #6d1812,0 6px 14px rgba(10,2,18,.6)}
@keyframes scorePop{0%{opacity:0;transform:translate(-50%,-20%) scale(.7)}18%{opacity:1;transform:translate(-50%,-60%) scale(1.1)}65%{opacity:1}100%{opacity:0;transform:translate(-50%,-140%) scale(1)}}
.spark{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 10px rgba(255,201,60,.9);pointer-events:none;animation:sparkFly .7s ease-out forwards}
@keyframes sparkFly{0%{opacity:1;transform:translate3d(0,0,0) scale(1)}100%{opacity:0;transform:translate3d(var(--sx),var(--sy),0) scale(.2)}}

/* ============ HUD ============ */
.hud{position:absolute;inset:0;z-index:40;pointer-events:none}
.hud button{pointer-events:auto}
.score-hud{position:absolute;left:1.7vw;top:2vh;width:16.5vw;max-width:330px;min-width:172px;aspect-ratio:413/205;
  filter:drop-shadow(0 12px 18px rgba(8,1,14,.5))}
.score-plate{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.score-word{position:absolute;left:14%;right:14%;top:6.5%;text-align:center;
  font-family:var(--text);font-weight:700;font-size:clamp(8px,.66vw,12px);letter-spacing:.28em;color:#4b2a2a}
.score-digits{
  position:absolute;left:14.4%;top:27%;width:71.2%;height:45%;
  display:flex;align-items:center;justify-content:center;
  border-radius:8px;background:linear-gradient(180deg,#220d20,#2c122a 55%,#200a1d);
  box-shadow:inset 0 4px 9px rgba(0,0,0,.6), inset 0 -2px 4px rgba(255,220,180,.06);
  font-family:var(--mono);font-weight:700;font-size:clamp(15px,2.15vw,37px);
  letter-spacing:.06em;color:#ffe7cc;text-shadow:0 2px 0 rgba(70,20,10,.45);
  font-variant-numeric:tabular-nums;line-height:1;
}
.score-hud.hot .score-digits{color:#ffd98a;text-shadow:0 0 14px rgba(255,201,60,.55)}

.timer-hud{position:absolute;left:50%;top:1.2vh;width:19.5vh;max-width:235px;min-width:120px;aspect-ratio:1/1;
  transform:translateX(-50%);filter:drop-shadow(0 12px 18px rgba(8,1,14,.5))}
.timer-ring{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.timer-face{position:absolute;left:8.3%;top:8.2%;width:83.4%;height:83.4%;border-radius:50%;
  background:radial-gradient(120% 120% at 34% 22%, #fdf3e4 0%, #f0d8c5 52%, #dcbca6 100%);
  box-shadow:inset 0 5px 10px rgba(255,255,255,.55), inset 0 -8px 16px rgba(120,70,60,.28), 0 2px 4px rgba(70,35,30,.25);
}
.timer-face::before{content:"";position:absolute;inset:8%;border-radius:50%;
  background:repeating-conic-gradient(from -90deg,#6b3a45 0deg .9deg,transparent .9deg 7.5deg);
  -webkit-mask:radial-gradient(closest-side,transparent 62%,#000 63%,#000 70%,transparent 71%);
          mask:radial-gradient(closest-side,transparent 62%,#000 63%,#000 70%,transparent 71%);
  opacity:.7;
}
.face-num{position:absolute;font-family:var(--mono);font-weight:700;color:#5a2a36;
  font-size:clamp(8px,.95vw,15px);line-height:1;letter-spacing:-.03em}
.tn-90{left:50%;top:5.5%;transform:translateX(-50%)}
.tn-45{right:6.5%;top:50%;transform:translateY(-50%)}
.tn-0{left:50%;bottom:6%;transform:translateX(-50%)}
.timer-digital{position:absolute;left:14%;top:52%;width:30%;text-align:center;
  font-family:var(--mono);font-weight:700;color:#3b1a2a;
  font-size:clamp(11px,1.2vw,22px);line-height:1;font-variant-numeric:tabular-nums;
  text-shadow:0 1px 0 rgba(255,255,255,.6)}
.timer-sec{position:absolute;left:14%;top:71%;width:30%;text-align:center;
  font-family:var(--text);font-weight:700;font-size:clamp(5px,.44vw,8px);letter-spacing:.22em;color:#8a5560}
.timer-hand{position:absolute;left:50%;bottom:50%;width:3.4%;height:35%;
  margin-left:-1.7%;border-radius:99px;background:linear-gradient(180deg,#ff8b45,#ef521c);
  box-shadow:0 2px 4px rgba(120,40,10,.35);transform-origin:50% 100%;transform:rotate(0deg);
  will-change:transform}
.timer-hub{position:absolute;left:50%;top:50%;width:11%;height:11%;transform:translate(-50%,-50%);
  border-radius:50%;background:radial-gradient(circle at 34% 30%,#ffd0a0,#ff7a32 45%,#d94b17 100%);
  box-shadow:0 2px 5px rgba(90,25,5,.45)}

.top-right{position:absolute;right:1.6vw;top:2.6vh;display:flex;align-items:flex-start;gap:.7vw}
.sound-btn{width:3.1vw;min-width:42px;max-width:58px;aspect-ratio:1;border-radius:50%;
  background:linear-gradient(180deg,#f7e8d7,#dcc4ae 70%,#c19c85);
  border:2px solid #cfd4dd;
  box-shadow:inset 0 2px 1px rgba(255,255,255,.9), inset 0 -4px 6px rgba(110,70,60,.3), 0 6px 12px rgba(8,1,14,.42);
  display:grid;place-items:center;transition:transform .12s}
.sound-btn:active{transform:scale(.94)}
.sound-btn svg{width:52%;height:52%;fill:#4b2434;stroke:#4b2434;stroke-width:1.7;fill-rule:evenodd}
.sound-btn .wave,.sound-btn .slash{fill:none;stroke-linecap:round}
.sound-btn[aria-pressed="false"] .wave{display:none}
.sound-btn[aria-pressed="false"] .slash{display:block}
.sound-btn .slash{display:none}
.pause-btn{width:8.1vw;max-width:160px;min-width:66px;aspect-ratio:287/168;filter:drop-shadow(0 10px 16px rgba(8,1,14,.48));transition:transform .12s}
.pause-btn:active{transform:scale(.94)}
.pause-btn img{width:100%;height:100%;object-fit:contain}

.combo-hud{position:absolute;left:50%;top:22.4vh;transform:translateX(-50%);
  display:flex;align-items:center;gap:.7vw;width:19vw;max-width:370px;min-width:170px;
  filter:drop-shadow(0 8px 12px rgba(8,1,14,.4))}
.combo-label{font-family:var(--text);font-weight:700;font-size:clamp(6px,.56vw,10px);letter-spacing:.2em;color:#e7bfa8;white-space:nowrap}
.pips{position:relative;flex:1;aspect-ratio:378/76}
.pips-base{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.pip-covers{position:absolute;inset:0}
.pip-cover{position:absolute;width:13.7%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);
  top:50.5%;background:radial-gradient(circle at 34% 28%,#fffaf2,#f3e3d0 58%,#d7bfa9 100%);
  box-shadow:inset 0 -2px 3px rgba(140,95,80,.35);transition:background .18s, box-shadow .18s, transform .18s}
.pip-cover.lit{background:radial-gradient(circle at 34% 28%,#ffd0a8,#ff7d33 55%,#e6511b 100%);
  box-shadow:inset 0 -2px 3px rgba(120,40,10,.4), 0 0 12px rgba(255,107,44,.55);transform:translate(-50%,-50%) scale(1.05)}
.pip-cover.gold{background:radial-gradient(circle at 34% 28%,#fff0ac,#ffc93c 52%,#e8a100 100%);
  box-shadow:inset 0 -2px 3px rgba(120,80,0,.35), 0 0 14px rgba(255,201,60,.65);transform:translate(-50%,-50%) scale(1.08)}
.combo-mult{font-family:var(--mono);font-weight:700;font-size:clamp(10px,1vw,17px);color:#ffe2c0;white-space:nowrap;min-width:2.4em;text-align:right;text-shadow:0 2px 0 rgba(70,20,10,.4)}
.combo-hud.gold .combo-mult{color:var(--gold);text-shadow:0 0 12px rgba(255,201,60,.7)}

/* ============ ORDER RAIL ============ */
.order-rail{position:absolute;right:1.4vw;top:12.2vh;width:35vw;height:21vh;z-index:38;pointer-events:none}
.rail-bar{position:absolute;left:0;right:0;top:0;height:clamp(5px,.52vw,10px);border-radius:99px;
  background:linear-gradient(180deg,#f2f4fa 0%,#c5cbd5 42%,#8f97a3 58%,#d9dde5 100%);
  box-shadow:0 2px 0 rgba(255,255,255,.45), 0 7px 12px rgba(8,1,14,.45);
}
.rail-bar::before,.rail-bar::after{content:"";position:absolute;top:50%;width:10px;height:10px;border-radius:50%;
  transform:translateY(-50%);background:radial-gradient(circle at 35% 30%,#fff,#b8bec9 55%,#7c8490);box-shadow:0 2px 4px rgba(0,0,0,.3)}
.rail-bar::before{left:-4px}.rail-bar::after{right:-4px}
.tickets{position:absolute;left:0;right:0;top:clamp(8px,.8vw,15px);bottom:0}
.ticket{position:absolute;top:0;transform-origin:top left;transition:left .55s var(--ease),width .55s var(--ease),transform .55s var(--ease),opacity .4s ease;will-change:transform,left,width}
.ticket img{width:100%;height:auto;filter:drop-shadow(0 9px 12px rgba(8,1,14,.42))}
.ticket[data-pos="0"]{left:0%;width:24.5%;z-index:5;transform:rotate(-3.5deg)}
.ticket[data-pos="1"]{left:24%;width:20.5%;z-index:4;transform:rotate(2.4deg) translateY(5%)}
.ticket[data-pos="2"]{left:43.4%;width:17.4%;z-index:3;transform:rotate(-1.4deg) translateY(9%)}
.ticket[data-pos="3"]{left:59.6%;width:14.8%;z-index:2;transform:rotate(2deg) translateY(12%)}
.ticket[data-pos="4"]{left:73.2%;width:12.6%;z-index:1;transform:rotate(-2deg) translateY(15%)}
.ticket.enter{opacity:0;transform:translateY(-18%) scale(.8) rotate(6deg)}
.ticket.golden img{filter:drop-shadow(0 0 14px rgba(255,201,60,.85)) drop-shadow(0 9px 12px rgba(8,1,14,.42))}
.ticket-meta{position:absolute;right:2%;top:30%;width:24%;text-align:center;line-height:1.05}
.ticket-meta b{display:block;font-family:var(--mono);font-weight:700;font-size:clamp(6px,.62vw,11px);color:#5a2a36;letter-spacing:.02em}
.ticket-meta span{display:block;margin-top:.35em;font-family:var(--text);font-weight:700;font-size:clamp(4px,.38vw,7px);letter-spacing:.1em;color:#8b5a4a}
.ticket-lane{position:absolute;left:5%;top:6%;min-width:1.5em;padding:.14em .3em;border-radius:99px;
  background:#2a1024;color:#ffe2c0;font-family:var(--mono);font-weight:700;font-size:clamp(5px,.52vw,9px);
  text-align:center;box-shadow:0 2px 4px rgba(0,0,0,.3)}
.order-cap{position:absolute;left:-.4vw;top:-3.1vh;display:flex;align-items:baseline;gap:.55em;
  transform:rotate(-2deg)}
.order-cap span{font-family:var(--display);font-size:clamp(11px,1.25vw,22px);color:#ffd9b0;text-shadow:0 2px 0 rgba(60,15,30,.5)}
.order-cap i{font-family:var(--text);font-style:normal;font-weight:700;font-size:clamp(5px,.46vw,8px);letter-spacing:.2em;color:#e7b79c}

/* ============ BANNER ============ */
.banner{position:absolute;left:50%;top:29vh;transform:translate(-50%,-10px);z-index:44;
  display:flex;flex-direction:column;align-items:center;gap:.1em;opacity:0;pointer-events:none;
  transition:opacity .25s ease,transform .35s var(--ease);text-align:center}
.banner span{font-family:var(--display);font-size:clamp(18px,2.5vw,42px);letter-spacing:.01em;color:#ffe0b0;
  text-shadow:0 2px 0 #a33b14,0 6px 18px rgba(10,2,18,.7)}
.banner i{font-family:var(--text);font-style:normal;font-weight:700;font-size:clamp(6px,.58vw,10px);letter-spacing:.28em;color:#ffd08a}
.banner.show{opacity:1;transform:translate(-50%,0)}
.banner.gold span{color:var(--gold);text-shadow:0 2px 0 #8a4a00,0 0 24px rgba(255,201,60,.6),0 6px 18px rgba(10,2,18,.7)}
.banner.hot span{color:#ff8a45}

/* ============ TUTORIAL ============ */
.tutorial{position:absolute;z-index:41;pointer-events:none;opacity:0;transition:opacity .4s ease, transform .4s var(--ease);transform:translate(-50%,calc(-100% + 10px))}
.tutorial.show{opacity:1;transform:translate(-50%,-100%)}
.tut-card{display:flex;align-items:center;gap:.55vw;padding:.55vw .85vw .55vw .45vw;border-radius:14px;
  background:linear-gradient(180deg,#fff8ee,#f2e2cf 72%,#e4cdb7);
  border:2px solid rgba(255,255,255,.7);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.9), inset 0 -5px 0 rgba(150,110,90,.18), 0 16px 26px rgba(10,2,18,.45);
  transform:rotate(-1.5deg)}
.tut-switch{width:5vw;min-width:38px;max-width:74px;height:auto;transform:rotate(-90deg);filter:drop-shadow(0 4px 6px rgba(60,30,20,.25))}
.tut-copy{display:flex;flex-direction:column;gap:.18em;text-align:left}
.tut-copy b{font-family:var(--display);font-weight:400;font-size:clamp(12px,1.25vw,22px);color:#3a1728;line-height:1}
.tut-copy span{font-family:var(--text);font-weight:600;font-size:clamp(6px,.58vw,10px);color:#7d4a3a;letter-spacing:.04em}
.tut-point{width:0;height:0;margin:.55em auto 0;border-left:9px solid transparent;border-right:9px solid transparent;border-top:13px solid #f2e2cf;
  filter:drop-shadow(0 2px 2px rgba(10,2,18,.25))}

/* ============ SCREENS ============ */
.screen{position:absolute;inset:0;z-index:60;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility .45s}
.screen.visible{opacity:1;visibility:visible;pointer-events:auto}
.title-screen{background:
  radial-gradient(90% 85% at 0% 0%, rgba(30,8,40,.55), rgba(30,8,40,0) 55%),
  linear-gradient(180deg, rgba(30,9,40,.45) 0%, rgba(30,9,40,.05) 40%, rgba(30,9,40,.5) 100%);
  display:flex;align-items:flex-start;justify-content:space-between}
.title-left{position:relative;padding:4vh 0 0 4vw;max-width:58vw;pointer-events:none}
.brand{position:relative;width:max-content;transform:rotate(-3deg)}
.logo-splash{position:absolute;left:-7%;top:-12%;width:115%;height:130%;
  background:url(assets/splash_fx_01_tangerine_splash.webp) center/contain no-repeat;
  opacity:.9;filter:drop-shadow(0 12px 18px rgba(10,2,18,.35));animation:splashBreathe 3.4s ease-in-out infinite alternate;z-index:0}
@keyframes splashBreathe{from{transform:scale(.98) rotate(-1deg);opacity:.8}to{transform:scale(1.04) rotate(1deg);opacity:1}}
.logo{position:relative;z-index:1;margin:0;font-family:var(--display);font-weight:400;
  font-size:clamp(54px,9.4vw,188px);line-height:.76;letter-spacing:-.01em;
  display:flex;flex-direction:column;
}
.logo span{
  background:linear-gradient(180deg,#fff1b8 0%,#ffd166 18%,#ff9a3a 48%,#ff6b2c 72%,#e94d17 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 0 #ffd9a8) drop-shadow(0 7px 0 #c14a1c) drop-shadow(0 14px 18px rgba(15,3,24,.55));
}
.logo span:last-child{margin-left:9%}
.tagline{position:relative;z-index:2;margin-top:2.1vh;margin-left:2%;
  display:flex;flex-direction:column;gap:.06em;width:max-content;max-width:96%;
  padding:.55em 1.1em .6em;border-radius:11px;
  background:linear-gradient(180deg,#fff9f0,#f3e5d4 70%,#e5d0ba);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.9), inset 0 -4px 0 rgba(150,110,90,.18), 0 10px 20px rgba(10,2,18,.4);
  transform:rotate(-.8deg);color:#3a1828;
  font-weight:600;font-size:clamp(10px,1.12vw,21px);letter-spacing:.01em;line-height:1.16;
}
.tagline b{font-weight:700;color:#b03a12}
.title-notes{position:absolute;right:4vw;top:4vh;display:flex;align-items:center;gap:.8vw;pointer-events:auto;z-index:3}
.best-chip{display:flex;align-items:center;gap:.5em;padding:.35em .8em .4em;border-radius:999px;
  background:linear-gradient(180deg,#fff2cf,#f5ce72 55%,#d99f2f);
  border:2px solid #ffdf8c;box-shadow:inset 0 2px 0 rgba(255,255,255,.8),0 8px 14px rgba(10,2,18,.35)}
.best-chip em{font-style:normal;font-family:var(--text);font-weight:700;font-size:clamp(6px,.56vw,10px);letter-spacing:.2em;color:#6c3a05}
.best-chip b{font-family:var(--mono);font-weight:700;font-size:clamp(11px,1.15vw,20px);color:#3d2203;font-variant-numeric:tabular-nums}
.mode-chip{font-family:var(--text);font-weight:700;font-size:clamp(6px,.56vw,10px);letter-spacing:.16em;color:#efc4ad}
.mode-chip i{font-style:normal;color:var(--gold)}


.title-control{position:absolute;left:4.5vw;bottom:5vh;display:flex;flex-direction:column;align-items:center;gap:.5em;pointer-events:auto;z-index:2}
.lever-btn{position:relative;display:block;width:13.5vw;max-width:250px;min-width:110px;aspect-ratio:309/344;
  filter:drop-shadow(0 18px 26px rgba(8,1,14,.55));transition:transform .14s var(--ease)}
.lever-btn:hover{transform:translateY(-2px)}
.lever-btn:active{transform:translateY(3px) scale(.97)}
.lever-img{width:100%;height:100%;object-fit:contain;animation:leverBreath 2.6s ease-in-out infinite alternate}
@keyframes leverBreath{from{transform:rotate(-1.4deg) translateY(0)}to{transform:rotate(1.2deg) translateY(-2px)}}
.lever-plate{position:absolute;left:50%;bottom:-7%;transform:translateX(-50%) rotate(-1deg);
  padding:.42em 1.1em .46em;border-radius:9px;white-space:nowrap;
  background:linear-gradient(180deg,#fff8ee,#eedcc8 70%,#dcc3ab);
  border:2px solid #d5d9e1;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.9), inset 0 -4px 0 rgba(140,100,80,.2), 0 8px 16px rgba(8,1,14,.45);
  font-family:var(--display);font-weight:400;font-size:clamp(10px,1.15vw,20px);color:#3a1728;letter-spacing:.02em}
.press-hint{font-family:var(--text);font-weight:700;font-size:clamp(5px,.5vw,9px);letter-spacing:.22em;color:#ffe4d0;margin-top:1.1em;padding:.4em .85em .45em;border-radius:999px;background:rgba(26,8,34,.86);border:1px solid rgba(255,220,180,.2);box-shadow:0 4px 10px rgba(8,1,14,.3)}

/* pause */
.pause-screen{background:rgba(22,7,32,.45);backdrop-filter:blur(1.5px)}
.app[data-screen="paused"] .stage{filter:saturate(.38) brightness(.62)}
.app[data-screen="paused"] .hall{transform:scale(1.04)}
.blind{position:absolute;left:0;right:0;top:18vh;height:57vh;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.055) 0 2px,rgba(20,25,35,.035) 2px 4px),
    linear-gradient(180deg,#e9edf2 0%,#c9d0da 7%,#aab2be 20%,#d3d8e0 38%,#a5adb9 56%,#8b93a0 76%,#bcc3cd 92%,#d9dde4 100%);
  border-top:4px solid #eef1f5;
  border-bottom:5px solid #6f7784;
  box-shadow:0 30px 60px rgba(5,1,12,.7), inset 0 2px 0 rgba(255,255,255,.8), inset 0 -10px 20px rgba(55,62,78,.45), inset 0 10px 22px rgba(255,255,255,.2);
  transform:translateY(-115%);transition:transform .55s cubic-bezier(.2,.9,.2,1);
  display:flex;align-items:center;justify-content:center;
}
.pause-screen.visible .blind{transform:translateY(0)}
.blind::before{content:"";position:absolute;left:1.5%;right:1.5%;top:2.2%;height:10px;border-radius:99px;background-image:radial-gradient(circle,#f7f8fa 0 2.2px,#8d95a1 2.8px,transparent 3.2px);background-size:7vw 10px;background-repeat:repeat-x;opacity:.9}
.blind::after{content:"";position:absolute;left:0;right:0;bottom:0;height:14px;background:repeating-linear-gradient(90deg,#7c8490 0 22px,#aeb5bf 22px 44px);opacity:.4}
.blind-inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:2.1vh;width:min(78vw,900px)}
.paused-title{font-family:var(--display);font-size:clamp(30px,4.6vw,76px);color:#3a1728;line-height:1;letter-spacing:.02em;
  padding:.14em .8em .2em;border-radius:18px;transform:rotate(-1.2deg);
  background:linear-gradient(180deg,#fff8ee,#f1e2d0 68%,#dfc9b3);
  border:2px solid rgba(255,255,255,.85);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.9), inset 0 -5px 0 rgba(150,110,90,.2), 0 14px 24px rgba(40,45,58,.4)}
.tally{display:flex;gap:3vw;align-items:flex-start}
.tally div{display:flex;flex-direction:column;align-items:center;gap:.25em}
.tally span{font-family:var(--text);font-weight:700;font-size:clamp(6px,.6vw,11px);letter-spacing:.22em;color:#656d7a}
.tally b{font-family:var(--mono);font-weight:700;font-size:clamp(15px,1.9vw,32px);color:#2e1830;font-variant-numeric:tabular-nums}
.pause-actions{display:flex;gap:3vw;margin-top:1.4vh}
.plate-btn{position:relative;width:11vw;max-width:190px;min-width:88px;aspect-ratio:1/1;transition:transform .12s}
.plate-btn:hover{transform:translateY(-2px) scale(1.02)}
.plate-btn:active{transform:scale(.95)}
.plate-btn img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 18px rgba(10,5,20,.35))}
.plate-btn span{position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--display);font-weight:400;font-size:clamp(9px,1.1vw,19px);color:#3a1728;letter-spacing:.03em;padding-top:2%}
.link-btn{font-family:var(--text);font-weight:700;font-size:clamp(6px,.6vw,10px);letter-spacing:.22em;color:#4d5561;
  padding:.55em 1.1em;border-radius:999px;border:1px solid rgba(60,60,80,.25);background:rgba(255,255,255,.25)}
.link-btn:hover{background:rgba(255,255,255,.5)}

/* over */
.over-screen{display:flex;align-items:center;justify-content:flex-end;padding-right:5vw}
.app[data-screen="over"] .stage{filter:saturate(.6) brightness(.64)}
.app[data-screen="over"] .tread > i{animation-play-state:paused}
.over-veil{position:absolute;inset:0;background:
  radial-gradient(90% 90% at 100% 50%, rgba(25,8,36,.55), rgba(25,8,36,.15) 60%, rgba(25,8,36,.45) 100%)}
.over-panel{position:relative;width:min(42vw,620px);display:flex;flex-direction:column;align-items:center;
  gap:1.4vh;padding:3vh 2.6vw 3vh;border-radius:26px;
  background:linear-gradient(180deg,rgba(59,30,66,.96),rgba(38,16,48,.97));
  border:2px solid rgba(255,220,180,.22);
  box-shadow:0 28px 60px rgba(5,1,12,.7), inset 0 2px 0 rgba(255,255,255,.14);
  transform:translateY(14px) scale(.97);opacity:0;transition:transform .5s var(--ease),opacity .4s ease;
}
.over-screen.visible .over-panel{transform:translateY(0) scale(1);opacity:1}
.over-kicker{font-family:var(--text);font-weight:700;font-size:clamp(6px,.6vw,10px);letter-spacing:.34em;color:#e8b58e}
.over-title{font-family:var(--display);font-weight:400;font-size:clamp(22px,3vw,48px);color:#ffe0b0;line-height:.95;margin:0;
  text-shadow:0 3px 0 rgba(120,40,20,.6),0 10px 20px rgba(10,2,18,.5);text-align:center}
.final-plate{position:relative;width:min(30vw,430px);aspect-ratio:413/205;margin-top:.6vh}
.final-plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 20px rgba(8,1,14,.5))}
.final-word{position:absolute;left:14%;right:14%;top:6.5%;text-align:center;font-weight:700;font-size:clamp(7px,.6vw,11px);letter-spacing:.28em;color:#4b2a2a}
.final-digits{position:absolute;left:14.4%;top:27%;width:71.2%;height:45%;display:flex;align-items:center;justify-content:center;
  border-radius:8px;background:linear-gradient(180deg,#220d20,#2c122a 55%,#200a1d);
  box-shadow:inset 0 4px 9px rgba(0,0,0,.6);font-family:var(--mono);font-weight:700;
  font-size:clamp(17px,2.1vw,36px);color:#ffe7cc;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.best-row{position:relative;display:flex;align-items:center;gap:1vw;margin-top:.4vh}
.best-plate{display:flex;align-items:center;gap:.7em;padding:.4em .85em .45em;border-radius:999px;
  background:linear-gradient(180deg,#3a2036,#251028);border:2px solid var(--gold);
  box-shadow:0 0 0 2px rgba(255,201,60,.12),0 8px 16px rgba(8,1,14,.4)}
.best-plate span{font-family:var(--text);font-weight:700;font-size:clamp(5px,.5vw,9px);letter-spacing:.2em;color:#e8b979}
.best-plate b{font-family:var(--mono);font-weight:700;font-size:clamp(10px,1.05vw,19px);color:var(--gold);font-variant-numeric:tabular-nums}
.new-best{position:absolute;right:0;top:-58%;transform:rotate(8deg) scale(.6);opacity:0;
  padding:.2em .55em .24em;border:2px solid var(--gold);border-radius:6px;
  font-family:var(--mono);font-weight:700;color:var(--gold);font-size:clamp(7px,.72vw,13px);letter-spacing:.12em;
  text-shadow:0 0 10px rgba(255,201,60,.5);transition:transform .4s cubic-bezier(.3,1.7,.5,1),opacity .3s}
.new-best.show{transform:rotate(8deg) scale(1);opacity:1}
.over-stats{display:flex;gap:2.2vw;justify-content:center;margin-top:.8vh}
.over-stats div{display:flex;flex-direction:column;align-items:center;gap:.2em}
.over-stats span{font-family:var(--text);font-weight:700;font-size:clamp(5px,.48vw,8px);letter-spacing:.16em;color:#cf9f86}
.over-stats b{font-family:var(--mono);font-weight:700;font-size:clamp(10px,1.1vw,20px);color:#ffe7cc;font-variant-numeric:tabular-nums}
.over-lever{width:9.5vw;max-width:170px;min-width:92px;margin-top:.2vh}
.over-screen .link-btn{color:#e0b9a4;border-color:rgba(255,220,180,.25);background:rgba(255,255,255,.06)}

/* pause blind */ 
.app[data-screen="title"] .hud,.app[data-screen="over"] .hud,.app[data-screen="title"] .order-rail,.app[data-screen="over"] .order-rail{opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.hud,.order-rail{transition:opacity .4s ease,visibility .4s}

/* mascot chips on title? none */

/* ============ RESPONSIVE ============ */
@media (max-aspect-ratio:11/10){
  .deck-wrap{left:0;top:38.5vh;width:132vh}
  .machines .machine-name b{font-size:7px}
  .machines .machine-name span{font-size:5px}
  .hud .score-hud{left:2vw;top:2vh;width:34vw;min-width:0;max-width:none}
  .hud .timer-hud{top:1.6vh;width:27vw;min-width:0;max-width:none}
  .hud .top-right{right:2vw;top:2.4vh;gap:2vw}
  .hud .sound-btn{width:9vw;min-width:38px;max-width:52px}
  .hud .pause-btn{width:17vw;min-width:0;max-width:none}
  .combo-hud{top:14.4vh;width:40vw;min-width:150px;max-width:none;gap:1.2vw}
  .combo-label{font-size:6px}
  .order-rail{right:2vw;left:2vw;top:18.6vh;width:auto;height:16vh}
  .order-cap{top:-3.6vh}
  .ticket[data-pos="0"]{width:25%}
  .ticket[data-pos="1"]{left:24.5%;width:21%}
  .ticket[data-pos="2"]{left:44%;width:18.5%}
  .ticket[data-pos="3"]{left:61.4%;width:16.6%}
  .ticket[data-pos="4"]{left:77%;width:15%}
  .ticket-meta b{font-size:6px}
  .ticket-meta span{display:none}
  .ticket[data-pos="4"]{display:none}
  .banner{top:33vh}
  .title-screen{flex-direction:column;justify-content:flex-start}
  .title-left{max-width:none;padding:5vh 5vw 0 5vw;width:100%}
  .logo{font-size:clamp(50px,18vw,110px)}
  .logo span:last-child{margin-left:6%}
  .tagline{font-size:clamp(11px,3.1vw,17px);margin-top:1.8vh}
  .title-notes{position:static;margin-top:1.6vh;gap:1.1vh;margin-left:5vw;right:auto;top:auto;flex-direction:column;align-items:flex-start}
  .best-chip b{font-size:13px}
  .best-chip em{font-size:7px}
  .mode-chip{font-size:7px;background:rgba(26,8,34,.82);color:#f3d0b8;border-color:rgba(255,220,180,.3)}
    .title-control{left:50%;bottom:4vh;transform:translateX(-50%)}
  .lever-btn{width:38vw;max-width:180px;min-width:120px}
  .press-hint{font-size:6px}
  .over-screen{justify-content:center;align-items:center;padding:2vh 4vw}
  .over-panel{width:92vw;max-width:none;padding:2.4vh 5vw 2.4vh}
  .final-plate{width:74vw;max-width:390px}
  .over-lever{width:28vw;max-width:150px}
  .over-stats{gap:7vw}
  .blind{top:13vh;height:66vh}
  .blind-inner{width:90vw;gap:1.8vh}
  .plate-btn{width:26vw;max-width:150px}
  .tally{gap:9vw}
}
@media (max-aspect-ratio:11/10) and (max-height:700px){
  .deck-wrap{top:36.5vh}
  .title-left{padding-top:2.5vh}
  .logo{font-size:clamp(42px,14vw,86px)}
  .order-rail{top:17vh;height:14vh}
}
@media (min-aspect-ratio:21/10){
  .score-hud{width:14vw}
  .timer-hud{width:13vw}
  .order-rail{width:32vw}
  .combo-hud{width:23vw}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}


/* extra feedback states */
.timer-hud.urgent .timer-face{animation:timerUrgent .7s ease-in-out infinite alternate}
@keyframes timerUrgent{from{box-shadow:inset 0 5px 10px rgba(255,255,255,.55), inset 0 -8px 16px rgba(120,70,60,.28), 0 2px 4px rgba(70,35,30,.25)}
  to{box-shadow:inset 0 5px 10px rgba(255,255,255,.55), inset 0 -8px 16px rgba(120,70,60,.28), 0 0 20px rgba(255,107,44,.75)}}
.timer-hud.urgent .timer-digital{color:#c93d12}
.stage.shake{animation:stageShake .32s ease-in-out}
@keyframes stageShake{0%,100%{transform:translate3d(0,0,0)}18%{transform:translate3d(-5px,2px,0) rotate(-.15deg)}40%{transform:translate3d(4px,-2px,0)}62%{transform:translate3d(-3px,1px,0)}82%{transform:translate3d(2px,0,0)}}
.tread.jam > i{filter:sepia(1) saturate(5) hue-rotate(-28deg) brightness(.82)}
.machine.pressing{animation:pressing .18s steps(2,end) infinite}
@keyframes pressing{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,1.5px,0) rotate(.2deg)}}
.machine[data-machine="citrus"] .splash-anchor{left:18%;top:64%}
.machine[data-machine="berry"] .splash-anchor{left:20%;top:69%}
.machine[data-machine="melon"] .splash-anchor{left:31%;top:68%}
.app[data-screen="over"] .machine-steam{animation-play-state:paused}
.app[data-screen="paused"] .machine-steam{animation-play-state:paused}
.splash.melon img{filter:saturate(.95) brightness(1.05) drop-shadow(0 8px 14px rgba(10,2,18,.35))}

@media (max-aspect-ratio:11/10){
  .timer-hud{width:28vw;max-width:none;min-width:0}
  .combo-hud{top:14.4vh}
}

.machine[data-machine="citrus"] .machine-name{left:51%;top:9%;bottom:auto;width:46%}
.machine[data-machine="citrus"] .machine-name b{font-size:clamp(5px,.48vw,9px)}
.machine[data-machine="citrus"] .machine-name span{font-size:clamp(4px,.38vw,7px)}
.ticket-meta b{font-size:clamp(6px,.64vw,11px)}
.ticket-meta span{font-size:clamp(4px,.42vw,7px)}
.tread.jam > i{filter:none}
.tread.jam::after{content:"";position:absolute;inset:0;background:rgba(228,69,58,.62);mix-blend-mode:multiply;pointer-events:none}
@media (max-aspect-ratio:11/10){
  .machines .machine-name{display:none}
  .tutorial .tut-card{transform:rotate(-1.5deg) scale(.9)}
}


/* persistent sound controls */
.sound-mini{position:absolute;width:46px;height:46px;min-width:0;max-width:none;aspect-ratio:1;z-index:2}
.title-sound{right:2.6vw;bottom:3.2vh}
.pause-sound{right:2.6vw;bottom:3.2vh;z-index:70}
.over-sound{right:1.4vw;top:1.6vh;width:40px;height:40px;z-index:3}
@media (max-aspect-ratio:11/10){
  .sound-mini{width:44px;height:44px}
  .title-sound{right:4vw;bottom:3.4vh}
  .pause-sound{right:4vw;bottom:3.2vh}
  .over-sound{right:2.4vw;top:1.6vh}
  .combo-hud{width:44vw}
}

.ticket[data-pos="2"] .ticket-meta,
.ticket[data-pos="3"] .ticket-meta,
.ticket[data-pos="4"] .ticket-meta{display:none}

/* ================= ENDLESS FACTORY OVERHAUL ================= */

/* danger vignette */
.danger{position:absolute;inset:0;z-index:35;pointer-events:none;opacity:0;transition:opacity .45s ease;
  box-shadow:inset 0 0 0 rgba(0,0,0,0);}
.app[data-stress="warning"] .danger{opacity:1;
  background:radial-gradient(120% 100% at 50% 50%,rgba(255,209,102,0) 55%,rgba(255,196,60,.22) 100%);
  animation:dangerBreathe 2.4s ease-in-out infinite alternate}
.app[data-stress="critical"] .danger{opacity:1;
  background:radial-gradient(120% 100% at 50% 50%,rgba(228,69,58,0) 48%,rgba(228,69,58,.34) 100%);
  animation:dangerPulse 1.15s ease-in-out infinite alternate}
.app.overloading .danger{opacity:1;background:radial-gradient(120% 100% at 50% 50%,rgba(255,240,220,.55),rgba(228,69,58,.65));animation:dangerPulse .18s steps(2,end) infinite}
@keyframes dangerBreathe{from{opacity:.55}to{opacity:1}}
@keyframes dangerPulse{from{opacity:.7}to{opacity:1}}

.app[data-stress="warning"] .machine .lamp-red{opacity:.6;filter:hue-rotate(38deg) brightness(1.1);animation:lampWarn 2.2s ease-in-out infinite}
.app[data-stress="critical"] .machine .lamp-red{opacity:1;animation:lampPulse .42s steps(2,end) infinite}
@keyframes lampWarn{0%,100%{opacity:.25;filter:hue-rotate(38deg) brightness(1)}50%{opacity:.8;filter:hue-rotate(38deg) brightness(1.5) drop-shadow(0 0 10px rgba(255,210,80,.8))}}
.app[data-stress="critical"] .machine:not(.jammed){animation:machineVibe .17s steps(2,end) infinite}
@keyframes machineVibe{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(1.2px,0,0) rotate(.16deg)}}
.app[data-screen="paused"] .machine,.app[data-screen="levelup"] .machine,.app[data-screen="over"] .machine{animation-play-state:paused}

/* junction chutes */
.junctions{position:absolute;inset:0;z-index:7;pointer-events:none}
.junction{position:absolute;overflow:visible}
.jtrack{display:block;width:100%;height:100%;overflow:visible}
.junction path{fill:none;stroke-linecap:round;stroke-linejoin:round;transition:opacity .22s ease,stroke .22s ease,filter .22s ease}
.jchute{stroke:#26232c;opacity:.5}
.jbelt{stroke:#1c5c5c;opacity:.42}
.jchev{stroke:#e9fff8;stroke-linecap:butt;opacity:.15;animation:chevFlow 1.05s linear infinite;animation-play-state:paused}
.jglow{stroke:#ff6b2c;opacity:0}
.jhead{opacity:0;fill:#ffc93c;filter:drop-shadow(0 0 7px rgba(255,201,60,.9));transition:opacity .22s ease}
@keyframes chevFlow{to{stroke-dashoffset:calc(-1 * var(--period,24px))}}
.junction.route-up .jchute-up,
.junction.route-down .jchute-down{stroke:#3a3742;opacity:.95}
.junction.route-up .jbelt-up,
.junction.route-down .jbelt-down{stroke:#3fc7b4;opacity:1;filter:drop-shadow(0 0 7px rgba(63,199,180,.45))}
.junction.route-up .jchev-up,
.junction.route-down .jchev-down{opacity:.9;animation-play-state:running}
.junction.route-up .jglow-up,
.junction.route-down .jglow-down{opacity:.42}
.junction.route-up .jhead-up,
.junction.route-down .jhead-down{opacity:1}
.junction.route-up .jchute-down,
.junction.route-down .jchute-up{opacity:.18}
.junction.route-up .jbelt-down,
.junction.route-down .jbelt-up{opacity:.1}
.junction.route-up .jchev-down,
.junction.route-down .jchev-up{opacity:.03;animation-play-state:paused}

/* switches mounted on the chutes */
.switch{
  position:absolute;transform:none;border-radius:14px;
  filter:drop-shadow(0 10px 14px rgba(10,2,18,.5));
  transition:filter .15s ease;
  pointer-events:auto;
}
.switch:active{transform:scale(.965)}
.switch-mount{
  position:absolute;right:1.5%;top:-7%;width:calc(var(--sws) * .97);height:calc(var(--sws) * 1.14);
  border-radius:16px;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,#eef1f6 0%,#b9c0cb 34%,#858d99 52%,#c9ced6 72%,#8d95a1 100%);
  border:2px solid rgba(255,255,255,.62);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.85),inset 0 -6px 9px rgba(60,66,78,.42),0 4px 8px rgba(8,1,14,.35);
}
.switch-mount::before,.switch-mount::after{content:"";position:absolute;top:50%;width:22%;height:12%;border-radius:99px;
  transform:translateY(-50%);background:linear-gradient(180deg,#f6f7fa,#9aa2ae);box-shadow:0 1px 2px rgba(0,0,0,.4)}
.switch-mount::before{left:-13%}
.switch-mount::after{right:-13%}
.switch-base{position:absolute;right:0;top:0;width:var(--sws);height:var(--sws);z-index:2}
.switch-base img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .13s ease,transform .18s var(--ease)}
.switch-base .sw-up,.switch-base .sw-down{transform:rotate(-90deg) scale(.97);opacity:0}
.switch[data-state="up"] .sw-up{opacity:1}
.switch[data-state="down"] .sw-down{opacity:1}
.switch[data-state="up"] .sw-up{transform:rotate(-90deg) scale(1.01)}
.switch[data-state="down"] .sw-down{transform:rotate(-90deg) scale(1.01)}
.switch-base .sw-lit{opacity:0;transform:scale(.96)}
.switch.flash .sw-lit{opacity:1;animation:swFlash .3s ease-out}
.switch-code{
  position:absolute;left:6%;top:5%;font-style:normal;font-family:var(--mono);font-weight:700;
  font-size:calc(var(--sws) * .13);line-height:1;color:#5a2a36;opacity:.7;
  text-shadow:0 1px 0 rgba(255,255,255,.6);
}
.switch-dirs{
  position:absolute;left:0;top:0;width:calc(var(--sws) * .40);height:100%;z-index:3;
  display:flex;flex-direction:column;justify-content:center;gap:calc(var(--sws) * .07);
}
.dir{
  display:flex;align-items:center;justify-content:center;gap:.12em;
  padding:.18em .05em .22em;border-radius:7px;
  background:linear-gradient(180deg,#3a2029,#1e0c16);
  border:1px solid rgba(255,220,180,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 3px 6px rgba(8,1,14,.35);
  color:#d8b9a6;opacity:.5;transition:all .16s ease;
  font-family:var(--mono);line-height:1;white-space:nowrap;
}
.dir i{font-style:normal;font-size:calc(var(--sws) * .14);line-height:1}
.dir b{font-size:calc(var(--sws) * .108);letter-spacing:.04em;line-height:1}
.switch[data-state="up"] .dir-up,
.switch[data-state="down"] .dir-down{
  opacity:1;color:#ffe6a6;border-color:rgba(255,201,60,.7);
  background:linear-gradient(180deg,#e6511b,#a9320c);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 12px rgba(255,107,44,.6);
}
.switch.glow{animation:switchGlow 1.1s ease-in-out infinite alternate}
.switch.glow .switch-mount{box-shadow:inset 0 2px 0 rgba(255,255,255,.85),inset 0 -6px 9px rgba(60,66,78,.42),0 0 18px rgba(255,107,44,.8)}
.switch .hit-ring{position:absolute;inset:-14%;border-radius:50%;border:2px solid rgba(255,201,60,0);pointer-events:none}
.switch.glow .hit-ring{border-color:rgba(255,201,60,.35);animation:hitRing 1.1s ease-out infinite}

/* factory control panel */
.shift-hud{
  position:absolute;left:50%;top:1.4vh;transform:translateX(-50%);
  width:min(29vw,420px);min-width:240px;
  padding:1vh 1.1vw 1.1vh;border-radius:16px;z-index:41;
  background:linear-gradient(180deg,#fff8ee 0%,#f0dfcc 62%,#dcc4ac 100%);
  border:2px solid #cfd4dd;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.92),inset 0 -6px 12px rgba(120,80,60,.16),0 14px 24px rgba(8,1,14,.42);
  pointer-events:none;
}
.shift-head{display:flex;align-items:flex-end;justify-content:space-between;gap:.8vw}
.level-block{display:flex;align-items:baseline;gap:.42em;min-width:0}
.level-block span{font-family:var(--text);font-weight:700;font-size:clamp(6px,.55vw,10px);letter-spacing:.2em;color:#7a4350}
.level-block b{font-family:var(--mono);font-weight:700;font-size:clamp(20px,2.1vw,34px);line-height:.86;color:#3a1728;font-variant-numeric:tabular-nums}
.level-block em{font-style:normal;font-family:var(--text);font-weight:700;font-size:clamp(5px,.5vw,9px);letter-spacing:.14em;color:#b03a12;white-space:nowrap}
.delivery-block{display:flex;flex-direction:column;align-items:flex-end;gap:.16em;min-width:0;flex:0 0 auto}
.delivery-block span{font-family:var(--text);font-weight:700;font-size:clamp(5px,.48vw,8px);letter-spacing:.18em;color:#7a4350}
.delivery-block b{font-family:var(--mono);font-weight:700;font-size:clamp(11px,1.15vw,19px);color:#3a1728;font-variant-numeric:tabular-nums;line-height:1}
.progress-track{width:clamp(72px,8vw,150px);height:clamp(5px,.55vw,9px);border-radius:99px;background:#3a2030;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.55);overflow:hidden;margin-top:.14em}
.progress-track i{display:block;height:100%;width:0%;border-radius:99px;
  background:linear-gradient(90deg,#3fc7b4,#8fd14f);box-shadow:0 0 6px rgba(63,199,180,.6);transition:width .3s var(--ease)}
.stress-block{display:flex;align-items:center;gap:.55vw;margin-top:.9vh}
.stress-head{display:flex;flex-direction:column;gap:.1em;min-width:0;flex:0 0 auto}
.stress-head span{font-family:var(--text);font-weight:700;font-size:clamp(5px,.48vw,8px);letter-spacing:.18em;color:#7a4350;white-space:nowrap}
.stress-head b{font-family:var(--mono);font-weight:700;font-size:clamp(7px,.66vw,11px);letter-spacing:.1em;color:#2b7a68;line-height:1}
.stress-track{position:relative;flex:1;height:clamp(8px,.86vw,13px);border-radius:99px;background:#3a2030;overflow:hidden;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.6), inset 0 -1px 2px rgba(255,255,255,.08)}
.stress-track i{display:block;height:100%;width:0%;border-radius:99px;transition:width .3s var(--ease),background .3s;
  background:linear-gradient(90deg,#3fc7b4,#8fd14f)}
.stress-mid,.stress-high{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.35);z-index:2}
.stress-mid{left:40%}
.stress-high{left:70%}
.stress-num{font-family:var(--mono);font-weight:700;font-size:clamp(11px,1.1vw,18px);color:#3a1728;min-width:1.9em;text-align:right;font-variant-numeric:tabular-nums;line-height:1}
.app[data-stress="warning"] .stress-head b{color:#a86a00}
.app[data-stress="warning"] .stress-track i{background:linear-gradient(90deg,#ffc93c,#ff9a3a);box-shadow:0 0 8px rgba(255,201,60,.65)}
.app[data-stress="critical"] .stress-head b{color:#c9241b}
.app[data-stress="critical"] .stress-track i{background:linear-gradient(90deg,#ff8a45,#e4453a);box-shadow:0 0 10px rgba(228,69,58,.8)}
.app[data-stress="critical"] .stress-num{color:#c9241b}
.app[data-stress="warning"] .shift-hud{border-color:#ffc93c}
.app[data-stress="critical"] .shift-hud{border-color:#e4453a;box-shadow:inset 0 2px 0 rgba(255,255,255,.92),inset 0 -6px 12px rgba(120,80,60,.16),0 14px 24px rgba(8,1,14,.42),0 0 16px rgba(228,69,58,.45)}

.combo-hud{top:14.3vh}
.order-rail{top:15.4vh;width:33vw}
.order-cap i{color:#ffd08a}
.ticket-status{
  position:absolute;left:50%;bottom:4%;transform:translateX(-50%);
  padding:.16em .52em .2em;border-radius:999px;white-space:nowrap;
  font-family:var(--mono);font-weight:700;font-size:clamp(4px,.42vw,7px);letter-spacing:.06em;
  color:#2a1024;background:linear-gradient(180deg,#d9dde5,#aab2be);
  box-shadow:0 2px 4px rgba(0,0,0,.3);
}
.ticket.active img{filter:drop-shadow(0 0 12px rgba(255,201,60,.55)) drop-shadow(0 9px 12px rgba(8,1,14,.42))}
.ticket.active .ticket-status{background:linear-gradient(180deg,#ffb347,#e6511b);color:#2a1024}
.ticket.onbelt .ticket-status{background:linear-gradient(180deg,#7fe3d3,#2fa596);color:#0c2a26}
.ticket.done .ticket-status{background:linear-gradient(180deg,#c6f07a,#6fae23);color:#17270a}
.ticket.failed .ticket-status{background:linear-gradient(180deg,#ff8d84,#c9241b);color:#2a0a08}
.ticket.done{animation:ticketDone .65s var(--ease)}
.ticket.failed{animation:ticketBad .6s ease}
@keyframes ticketDone{0%{transform:scale(1)}35%{transform:scale(1.09) rotate(0)}100%{transform:scale(.96)}}
@keyframes ticketBad{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px) rotate(-2deg)}45%{transform:translateX(5px) rotate(2deg)}70%{transform:translateX(-3px)}}
.ticket[data-pos="5"]{display:none}

/* emergency cleanup */
.emergency-btn{
  position:absolute;left:1.8vw;bottom:5.2vh;z-index:42;pointer-events:auto;
  display:flex;align-items:center;gap:.6em;
  padding:.6em .9em .64em .55em;border-radius:14px;
  background:linear-gradient(180deg,#f7e8d7,#dcc4ae 70%,#c19c85);
  border:2px solid #cfd4dd;
  box-shadow:inset 0 2px 1px rgba(255,255,255,.9),inset 0 -4px 6px rgba(110,70,60,.3),0 8px 16px rgba(8,1,14,.42);
  opacity:.88;transition:transform .13s var(--ease),opacity .2s,box-shadow .2s;
  text-align:left;
  box-shadow:inset 0 2px 1px rgba(255,255,255,.92),inset 0 -4px 6px rgba(110,70,60,.3),0 10px 20px rgba(8,1,14,.55);
}
.emergency-btn:disabled{cursor:default}
.emergency-btn.used{opacity:.62;filter:grayscale(.35)}
.emg-icon{
  display:grid;place-items:center;width:2.2em;height:2.2em;border-radius:50%;
  font-family:var(--mono);font-weight:700;font-size:clamp(13px,1.2vw,20px);color:#7a150c;
  background:radial-gradient(circle at 34% 30%,#ffe0a8,#ffb020 50%,#d97a10);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.7),0 3px 7px rgba(90,30,5,.4);
}
.emg-copy{display:flex;flex-direction:column;gap:.12em}
.emg-copy b{font-family:var(--display);font-weight:400;font-size:clamp(9px,1vw,16px);color:#3a1728;line-height:1;white-space:nowrap}
.emg-copy i{font-style:normal;font-family:var(--mono);font-weight:700;font-size:clamp(5px,.5vw,8px);letter-spacing:.12em;color:#8a5140}
.emergency-btn.ready{opacity:1;border-color:#ffc93c;
  box-shadow:inset 0 2px 1px rgba(255,255,255,.9),inset 0 -4px 6px rgba(110,70,60,.3),0 0 20px rgba(255,201,60,.7),0 8px 16px rgba(8,1,14,.42);
  animation:emgPulse 1.1s ease-in-out infinite alternate}
.emergency-btn.ready .emg-icon{background:radial-gradient(circle at 34% 30%,#ffd0a0,#ff5a33 52%,#c9241b);color:#fff3d8}
.emergency-btn.ready .emg-copy i{color:#b03a12}
.emergency-btn.ready:active{transform:scale(.95)}
@keyframes emgPulse{from{filter:brightness(1)}to{filter:brightness(1.12)}}
.app.cleaning .factories,.app.cleaning .stage{animation:cleanSweep .9s var(--ease)}
.app.cleaning .danger{opacity:1;background:radial-gradient(120% 100% at 50% 60%,rgba(255,255,255,.24),rgba(63,199,180,.10));animation:none}
@keyframes cleanSweep{0%{filter:saturate(.8) brightness(1.06)}45%{filter:saturate(.55) brightness(1.2)}100%{filter:none}}

/* in-game control hint */
.control-hint{
  position:absolute;left:1.8vw;bottom:1.9vh;z-index:41;pointer-events:none;
  display:flex;align-items:center;gap:.6em;
  padding:.42em .8em .46em;border-radius:999px;
  background:rgba(20,6,30,.93);border:1px solid rgba(255,220,180,.32);
  box-shadow:0 6px 14px rgba(8,1,14,.45);
}
.control-hint b{font-family:var(--text);font-weight:700;font-size:clamp(7px,.62vw,10px);letter-spacing:.16em;color:#fff1df}
.control-hint span{font-family:var(--mono);font-weight:700;font-size:clamp(6px,.55vw,9px);letter-spacing:.1em;color:#ffc93c}
.app[data-screen="title"] .control-hint,.app[data-screen="over"] .control-hint,.app[data-screen="levelup"] .control-hint{display:none}
.app[data-screen="paused"] .control-hint{display:none}

/* achievement toast */
.achievement{
  position:absolute;left:50%;bottom:3.6vh;transform:translate(-50%,14px);z-index:46;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:.15em;
  padding:.55em 1.2em .6em;border-radius:12px;opacity:0;
  background:linear-gradient(180deg,#3a2036,#251028);border:2px solid var(--gold);
  box-shadow:0 0 20px rgba(255,201,60,.35),0 10px 20px rgba(8,1,14,.5);
  transition:opacity .3s ease,transform .35s var(--ease);
}
.achievement span{font-family:var(--text);font-weight:700;font-size:clamp(5px,.5vw,8px);letter-spacing:.26em;color:#e8b979}
.achievement b{font-family:var(--display);font-weight:400;font-size:clamp(11px,1.15vw,19px);color:var(--gold);letter-spacing:.02em;white-space:nowrap}
.achievement.show{opacity:1;transform:translate(-50%,0)}

/* machine acceptance chips */
.accept-chips{display:flex;align-items:center;justify-content:center;gap:.22em;margin-top:.32em}
.accept-chips img{width:clamp(12px,1.3vw,20px);height:clamp(12px,1.3vw,20px);object-fit:contain;
  filter:drop-shadow(0 1px 1px rgba(60,20,10,.4))}
.machine-name{transition:border-color .3s,box-shadow .3s}
.app[data-stress="warning"] .machine-name{border-color:rgba(255,201,60,.6);box-shadow:inset 0 1px 0 rgba(255,220,180,.12),0 0 12px rgba(255,201,60,.3)}
.app[data-stress="critical"] .machine-name{border-color:rgba(228,69,58,.8);box-shadow:inset 0 1px 0 rgba(255,220,180,.12),0 0 14px rgba(228,69,58,.5)}

/* title additions */
.title-how{
  position:relative;z-index:2;margin-top:1.6vh;margin-left:2%;
  width:max-content;max-width:min(46vw,520px);
  display:flex;flex-direction:column;gap:.2em;
  padding:.6em 1em .66em;border-radius:11px;
  background:linear-gradient(180deg,rgba(255,249,240,.96),rgba(240,224,205,.96));
  border:1px solid rgba(255,255,255,.8);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.9),0 10px 20px rgba(10,2,18,.34);
  transform:rotate(.5deg);
}
.title-how b{font-family:var(--display);font-weight:400;font-size:clamp(9px,1vw,17px);color:#b03a12;letter-spacing:.02em;line-height:1}
.title-how span{font-family:var(--text);font-weight:600;font-size:clamp(7px,.7vw,12px);line-height:1.22;color:#3a1828}
.title-how i{font-style:normal;font-family:var(--mono);font-weight:700;font-size:clamp(5px,.52vw,8px);letter-spacing:.1em;color:#8a5560}
.fruit-line{position:relative;z-index:2;display:flex;align-items:center;gap:.4vw;margin-top:1.2vh;margin-left:2%;flex-wrap:wrap;max-width:min(50vw,560px)}
.fruit-chip{
  display:flex;align-items:center;gap:.3em;padding:.24em .55em .26em .3em;border-radius:999px;
  background:linear-gradient(180deg,#fff8ee,#e8d6c2);border:1px solid rgba(255,255,255,.7);
  box-shadow:0 4px 8px rgba(8,1,14,.28);
}
.fruit-chip img{width:clamp(13px,1.25vw,22px);height:clamp(13px,1.25vw,22px);object-fit:contain}
.fruit-chip i{font-style:normal;font-family:var(--text);font-weight:700;font-size:clamp(5px,.5vw,8px);letter-spacing:.08em;color:#5a2a36}
.fruit-chip.locked{opacity:.34;filter:grayscale(1)}
.level-chip{display:flex;align-items:center;gap:.5em;padding:.35em .8em .4em;border-radius:999px;
  background:linear-gradient(180deg,#dff8f3,#9fe4d8 58%,#4fb5a6);
  border:2px solid #bff3ea;box-shadow:inset 0 2px 0 rgba(255,255,255,.8),0 8px 14px rgba(10,2,18,.35)}
.level-chip em{font-style:normal;font-family:var(--text);font-weight:700;font-size:clamp(6px,.56vw,10px);letter-spacing:.18em;color:#175e54}
.level-chip b{font-family:var(--mono);font-weight:700;font-size:clamp(11px,1.15vw,20px);color:#0c3f38;font-variant-numeric:tabular-nums}

/* level complete */
.level-screen{
  display:flex;align-items:center;justify-content:center;
  background:rgba(22,7,32,.5);backdrop-filter:blur(2px);
}
.app[data-screen="levelup"] .stage{filter:saturate(.82) brightness(.7)}
.level-veil{position:absolute;inset:0;background:
  radial-gradient(90% 80% at 50% 44%,rgba(255,201,60,.12),rgba(25,8,36,0) 60%),
  radial-gradient(90% 90% at 50% 100%,rgba(25,8,36,.5),rgba(25,8,36,.12) 60%,rgba(25,8,36,.45) 100%)}
.level-panel{
  position:relative;width:min(46vw,620px);display:flex;flex-direction:column;align-items:center;
  gap:1.2vh;padding:3.2vh 3vw 3.4vh;border-radius:26px;
  background:linear-gradient(180deg,rgba(59,30,66,.97),rgba(38,16,48,.98));
  border:2px solid rgba(255,201,60,.4);
  box-shadow:0 28px 60px rgba(5,1,12,.7),inset 0 2px 0 rgba(255,255,255,.14),0 0 42px rgba(255,201,60,.14);
  transform:translateY(14px) scale(.97);opacity:0;transition:transform .5s var(--ease),opacity .4s ease;
}
.level-screen.visible .level-panel{transform:translateY(0) scale(1);opacity:1}
.level-kicker{font-family:var(--text);font-weight:700;font-size:clamp(6px,.6vw,10px);letter-spacing:.34em;color:#e8b58e}
.level-title{font-family:var(--display);font-weight:400;font-size:clamp(26px,3.4vw,54px);color:var(--gold);line-height:.95;margin:0;
  text-shadow:0 3px 0 rgba(120,70,10,.6),0 0 30px rgba(255,201,60,.35),0 10px 20px rgba(10,2,18,.5);text-align:center}
.level-badge{display:flex;align-items:baseline;gap:.4em;padding:.3em .95em .36em;border-radius:999px;
  background:linear-gradient(180deg,#3a2036,#251028);border:2px solid var(--gold);
  box-shadow:0 0 16px rgba(255,201,60,.28),0 6px 14px rgba(8,1,14,.4)}
.level-badge span{font-family:var(--text);font-weight:700;font-size:clamp(5px,.5vw,9px);letter-spacing:.2em;color:#e8b979}
.level-badge b{font-family:var(--mono);font-weight:700;font-size:clamp(15px,1.7vw,28px);color:var(--gold);font-variant-numeric:tabular-nums}
.level-stats{display:flex;gap:2.6vw;justify-content:center;margin-top:.4vh}
.level-stats div{display:flex;flex-direction:column;align-items:center;gap:.2em}
.level-stats span{font-family:var(--text);font-weight:700;font-size:clamp(5px,.48vw,8px);letter-spacing:.16em;color:#cf9f86}
.level-stats b{font-family:var(--mono);font-weight:700;font-size:clamp(11px,1.15vw,20px);color:#ffe7cc;font-variant-numeric:tabular-nums}
.unlock-line{font-family:var(--text);font-weight:700;font-size:clamp(7px,.68vw,11px);letter-spacing:.1em;color:#ffd08a;text-align:center;
  padding:.4em .9em .44em;border-radius:999px;background:rgba(255,201,60,.1);border:1px solid rgba(255,201,60,.28)}
.level-lever{width:10vw;max-width:180px;min-width:96px;margin-top:.2vh}
.level-sound{right:1.2vw;top:1.4vh;width:40px;height:40px;z-index:3}

/* over screen ext */
.over-title{font-size:clamp(22px,3.1vw,50px)}
.over-stats{flex-wrap:wrap;gap:1.1vh 2.1vw;max-width:34vw}
.over-stats div{flex:0 0 auto;min-width:5.2vw}
.over-panel{width:min(44vw,660px)}

/* motion preferences */
@media (prefers-reduced-motion:reduce){
  .jchev,.danger,.machine{animation:none !important}
}

/* responsive: portrait and narrow screens */
@media (max-aspect-ratio:11/10){
  .shift-hud{
    top:10.4vh;left:3vw;transform:none;width:94vw;min-width:0;max-width:none;
    display:grid;grid-template-columns:auto 1fr 1.25fr;align-items:center;gap:2.4vw;
    padding:.7vh 2.6vw .8vh;border-radius:13px;
  }
  .shift-head{display:contents}
  .level-block{gap:.34em}
  .level-block b{font-size:clamp(18px,5.4vw,26px)}
  .level-block em{display:none}
  .delivery-block{align-items:flex-start;gap:.12em}
  .delivery-block b{font-size:clamp(10px,3vw,15px)}
  .progress-track{width:26vw;height:5px}
  .stress-block{margin-top:0;gap:1.4vw}
  .stress-head span{font-size:5px;letter-spacing:.1em}
  .stress-head b{font-size:7px}
  .stress-track{height:9px}
  .stress-num{font-size:12px;min-width:1.6em}
  .combo-hud{top:20.3vh;width:46vw;min-width:140px;max-width:none;gap:1.2vw}
  .combo-label{font-size:6px}
  .order-rail{left:2vw;right:2vw;top:23.9vh;width:auto;height:11.4vh}
  .order-cap{top:-2.9vh}
  .order-cap span{font-size:13px}
  .order-cap i{font-size:5px}
  .ticket[data-pos="4"]{display:none}
  .ticket-status{font-size:5px;padding:.14em .4em .18em}
  .banner{top:35.6vh}
  .emergency-btn{left:50%;bottom:8.6vh;transform:translateX(-50%);padding:.5em .8em .54em .48em;opacity:.6}
  .emg-icon{width:2em;height:2em;font-size:15px}
  .emg-copy b{font-size:11px}
  .emg-copy i{font-size:6px}
  .control-hint{left:50%;bottom:3.4vh;transform:translateX(-50%);gap:.5em;padding:.36em .7em .4em}
  .achievement{bottom:14.2vh}
  .title-how{margin-top:1.2vh;max-width:88vw;width:auto}
  .title-how b{font-size:11px}
  .title-how span{font-size:9px}
  .title-how i{font-size:6px}
  .fruit-line{max-width:92vw;gap:1.1vw;margin-top:1vh}
  .fruit-chip{padding:.2em .45em .22em .26em}
  .fruit-chip img{width:16px;height:16px}
  .fruit-chip i{font-size:6px}
  .title-notes{position:static;margin-top:3vh;margin-left:5vw;right:auto;top:auto;flex-direction:row;align-items:center;gap:1.6vw;flex-wrap:wrap}
  .best-chip b{font-size:13px}
  .best-chip em{font-size:7px}
  .level-chip b{font-size:13px}
  .level-chip em{font-size:7px}
  .mode-chip{font-size:7px;background:rgba(26,8,34,.82);color:#f3d0b8;border:1px solid rgba(255,220,180,.3);padding:.35em .7em .4em;border-radius:999px}
  .level-screen{padding:2vh 4vw}
  .level-panel{width:94vw;max-width:none;padding:2.6vh 5vw 3vh;gap:1vh}
  .level-stats{gap:7vw}
  .level-lever{width:28vw;max-width:150px}
  .over-panel{width:92vw;max-width:none;padding:2.4vh 5vw 2.4vh}
  .over-stats{gap:1.1vh 7vw;max-width:86vw}
  .over-stats div{min-width:0}
  .over-title{font-size:clamp(23px,7.4vw,38px)}
  .machines .machine-name{display:block;left:6%;right:auto;bottom:5%;width:88%;padding:.22em .3em .26em;border-radius:5px}
  .machines .machine-name b{font-size:clamp(5px,1.5vw,8px)}
  .machines .machine-name span{display:none}
  .accept-chips{margin-top:.2em;gap:.18em}
  .accept-chips img{width:9px;height:9px}
  .machine[data-machine="citrus"] .machine-name{left:4%;top:auto;bottom:5%;width:92%}
  .machine[data-machine="citrus"] .machine-name b{font-size:clamp(5px,1.4vw,8px)}
  .junction .jchev{animation:none}
}
@media (max-aspect-ratio:11/10) and (max-height:700px){
  .shift-hud{top:10.8vh;padding:.5vh 2.4vw .6vh}
  .combo-hud{top:20.8vh}
  .order-rail{top:24.4vh;height:10.5vh}
  .title-how{display:none}
  .fruit-line{margin-top:.6vh}
  .level-panel{padding:2vh 4vw 2.4vh}
}
@media (min-aspect-ratio:21/10){
  .shift-hud{width:26vw}
  .order-rail{width:31vw}
  .combo-hud{top:14.6vh}
}

/* junction paint correction */
.jchute{stroke:#2b2a33;opacity:.92}
.jbelt{stroke:#1a6662;opacity:.3}
.jchev{stroke:#f2fffb;opacity:.12}
.jglow{stroke:#ffe27a;opacity:0;stroke-linecap:round}
.junction.route-up .jbelt-up,
.junction.route-down .jbelt-down{stroke:#37c8b4;opacity:1;filter:drop-shadow(0 0 7px rgba(63,199,180,.55))}
.junction.route-up .jglow-up,
.junction.route-down .jglow-down{opacity:.88;filter:drop-shadow(0 0 5px rgba(255,226,122,.9))}
.junction.route-up .jchute-down,
.junction.route-down .jchute-up{opacity:.16}
.junction.route-up .jbelt-down,
.junction.route-down .jbelt-up{opacity:.05}
.junction.route-up .jchev-down,
.junction.route-down .jchev-up{opacity:.02}

/* hide play furniture on overlay screens */
.app[data-screen="paused"] .hud,
.app[data-screen="paused"] .order-rail,
.app[data-screen="levelup"] .hud,
.app[data-screen="levelup"] .order-rail{opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.app[data-screen="title"] .switches,
.app[data-screen="title"] .junctions,
.app[data-screen="title"] .machine-name{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s,visibility .3s}

/* ramps read as metal chutes with a lit belt */
.junction.route-up .jchute-down,
.junction.route-down .jchute-up{opacity:.42}
.junction.route-up .jbelt-down,
.junction.route-down .jbelt-up{opacity:.14}
.junction.route-up .jchev-down,
.junction.route-down .jchev-up{opacity:.05}

@media (max-aspect-ratio:11/10){
  .order-cap{display:none}
  .machine[data-machine="citrus"] .machine-name{left:0;top:5%;bottom:auto;width:100%}
  .machines .machine-name b{font-size:clamp(6px,1.7vw,9px);letter-spacing:.06em}
  .machines .machine-name span{display:none}
}

/* foreground fruit over the switch, mechanical throw, new best placement */
.switches{z-index:7}
.switch.flash .switch-base{animation:swTurn .3s var(--ease)}
@keyframes swTurn{0%{transform:rotate(-7deg)}45%{transform:rotate(4deg)}100%{transform:rotate(0)}}
.best-row{gap:1vw}
.new-best{position:static;display:none;top:auto;right:auto;transform:rotate(8deg);opacity:1}
.new-best.show{display:inline-block;animation:newBestPop .42s cubic-bezier(.3,1.7,.5,1)}
@keyframes newBestPop{0%{transform:rotate(8deg) scale(.5);opacity:0}100%{transform:rotate(8deg) scale(1);opacity:1}}

.banner{top:23vh}
@media (max-aspect-ratio:11/10){
  .banner{top:33.4vh}
}
@media (max-width:860px) and (min-aspect-ratio:11/10){
  .shift-hud{width:30vw;min-width:220px}
  .order-rail{width:30vw;top:17.6vh}
  .combo-hud{top:15.8vh}
}

.app[data-screen="overloading"] .tread > i,
.app[data-screen="overloading"] .machine-steam{animation-play-state:paused}

/* only the armed ramp is drawn, so the junction reads as one clear chute */
.junction.route-up .jchute-down,
.junction.route-down .jchute-up,
.junction.route-up .jbelt-down,
.junction.route-down .jbelt-up,
.junction.route-up .jchev-down,
.junction.route-down .jchev-up,
.junction.route-up .jhead-down,
.junction.route-down .jhead-up{opacity:0}

.jchute,.jbelt{stroke-linecap:butt}

/* make the stress readout easier to read at a glance */
.stress-head span{font-size:clamp(6px,.6vw,10px)}
.stress-head b{font-size:clamp(8px,.8vw,13px)}
.stress-track{height:clamp(10px,1vw,15px)}
.stress-num{font-size:clamp(13px,1.3vw,20px)}
.delivery-block span{font-size:clamp(6px,.55vw,9px)}
.level-block em{font-size:clamp(6px,.56vw,10px)}
@media (max-aspect-ratio:11/10){
  .stress-head span{font-size:6px}
  .stress-head b{font-size:8px}
  .stress-track{height:10px}
  .stress-num{font-size:13px}
}