/* Tower Takeout v2.6.10 */
:root{
  --red:#ff5a3c;--red-d:#d63c22;--mustard:#ffc93c;--mustard-d:#e0a400;--ink:#2b1712;
  --cream:#fff4e0;--cream-d:#f1d9b5;--teal:#2ec4b6;--teal-d:#1a9a8e;--green:#5ccf4a;--green-d:#2f9a22;
  --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px);
  /* --app-h: real usable height (JS keeps it in sync; iOS standalone reports innerHeight short by the top inset).
     --dead-b: strip below innerHeight that may not receive touches on affected iOS builds (0 elsewhere). */
  --app-h:100dvh;--dead-b:0px;--safe-b:max(var(--sab),var(--dead-b));
  --font:ui-rounded,"SF Pro Rounded","Arial Rounded MT Bold","Nunito","Varela Round",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --pop:cubic-bezier(.2,1.5,.4,1);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;overflow:hidden;background:#7a1238;overscroll-behavior:none}
@supports (height:100dvh){html,body{height:100dvh}}
/* iOS home-screen web apps: fill the whole panel (fixes the band under the counter) */
@media (display-mode:standalone){html,body{height:100lvh}}
body{position:fixed;left:0;right:0;top:0;height:var(--app-h);font-family:var(--font);color:var(--ink);
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none;-webkit-text-size-adjust:100%}
img{-webkit-user-drag:none;pointer-events:none}
button{font-family:inherit;border:0;cursor:pointer;color:inherit;touch-action:manipulation}
svg{display:block}
#game{position:fixed;left:0;top:0;width:100%;height:var(--app-h);display:block;touch-action:none}
/* full-screen layers are sized to --app-h rather than inset:0 (the viewport can be shorter than the screen on iOS) */
.screen,#hud,#wipe,.rotate{top:0!important;bottom:auto!important;height:var(--app-h)}
.hidden{display:none!important}

/* ---------- screens + transitions ---------- */
.screen{position:fixed;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;
  padding:calc(var(--sat) + 14px) calc(var(--sar) + 16px) calc(var(--safe-b) + 14px) calc(var(--sal) + 16px);z-index:10}
.screen.show{display:flex;animation:fadeIn .28s ease-out}
.screen.leaving{display:flex;pointer-events:none;animation:fadeOut .22s ease-in forwards}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeOut{to{opacity:0}}
#wipe{position:fixed;inset:0;z-index:80;pointer-events:none;filter:drop-shadow(0 8px 0 rgba(43,23,18,.3))}
#wipe .wp{position:absolute;left:0;right:0;top:-10px;height:calc(100% + 60px);transform:translateY(-115%);
  background:linear-gradient(rgba(255,255,255,.18),rgba(0,0,0,.12)),repeating-linear-gradient(90deg,#ff5a3c 0 39px,#fff6e6 39px 78px);
  -webkit-mask:linear-gradient(#000,#000) top/100% calc(100% - 22px) no-repeat,radial-gradient(circle 19.5px at 19.5px 0,#000 97%,transparent 100%) bottom left/39px 22px repeat-x;
          mask:linear-gradient(#000,#000) top/100% calc(100% - 22px) no-repeat,radial-gradient(circle 19.5px at 19.5px 0,#000 97%,transparent 100%) bottom left/39px 22px repeat-x}
#wipe.in{pointer-events:auto}
#wipe.in .wp{transform:translateY(0);transition:transform .34s cubic-bezier(.55,0,.85,.45)}
#wipe.out .wp{transform:translateY(115%);transition:transform .42s cubic-bezier(.15,.6,.3,1)}

/* ---------- splash / loading ---------- */
#splash{background:radial-gradient(circle at 50% 36%,#ffb35c 0,#ff6a3c 30%,#e2393a 58%,#a81d3e 88%,#7a1238 100%);z-index:50;padding:0}
#splashCv{position:absolute;inset:0;width:100%;height:100%}
#splash.out{animation:splashOut .5s cubic-bezier(.5,0,.8,.4) forwards}
@keyframes splashOut{to{opacity:0;transform:scale(1.12)}}
.splash-ui{position:absolute;left:0;right:0;top:var(--splash-ui-top,calc(44% + min(25vw,105px)*0.36 + 26px));display:flex;flex-direction:column;align-items:center;gap:18px}
.logo-text{display:flex;flex-direction:column;align-items:center;line-height:.9;font-weight:900;letter-spacing:1px}
.logo-text span{display:flex}
.logo-text i,.title i{font-style:normal;display:inline-block;-webkit-text-stroke:3px var(--ink);filter:drop-shadow(0 5px 0 var(--ink));
  -webkit-background-clip:text;background-clip:text;color:transparent;background-size:300% 100%;background-position:100% 0}
.logo-text .w1 i{font-size:min(11vw,46px);background-image:linear-gradient(105deg,#ffc93c 0 40%,#fffbe0 48% 52%,#ffc93c 60% 100%),linear-gradient(#fff3a0,#ffc93c 55%,#f39a00)}
.logo-text .w2 i{font-size:min(12.6vw,54px);background-image:linear-gradient(105deg,transparent 0 40%,rgba(255,255,255,.95) 48% 52%,transparent 60% 100%),linear-gradient(#ffffff,#fff1dc 60%,#ffd9b0)}
.logo-text .w1 i,.logo-text .w2 i{background-size:300% 100%,100% 100%;background-position:100% 0,0 0;
  animation:letterPop .5s var(--pop) calc(1.3s + var(--i)*45ms) both,shine 1.1s ease-in-out calc(2.05s + var(--i)*40ms) both}
@keyframes letterPop{from{transform:translateY(26px) scale(.2) rotate(-14deg);opacity:0}60%{opacity:1}to{transform:none;opacity:1}}
@keyframes shine{from{background-position:100% 0,0 0}to{background-position:0 0,0 0}}
.loader{width:min(66vw,260px);display:flex;flex-direction:column;gap:8px;animation:fadeUp .5s ease-out .25s both}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.progress{height:20px;border-radius:12px;background:linear-gradient(#5a0f22,#7a1a32);border:3px solid var(--ink);overflow:hidden;position:relative;
  box-shadow:0 4px 0 rgba(43,23,18,.45),inset 0 3px 0 rgba(0,0,0,.25)}
#progressFill{height:100%;width:0;border-radius:8px;position:relative;transition:width .25s ease-out;
  background:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,0) 55%),repeating-linear-gradient(-45deg,#ffc93c 0 9px,#ffe27d 9px 18px);
  background-size:100% 100%,26px 100%;animation:stripes .6s linear infinite;box-shadow:0 0 14px rgba(255,220,120,.8)}
#progressFill::after{content:"";position:absolute;right:-2px;top:-2px;bottom:-2px;width:8px;border-radius:6px;background:#fffbe6;box-shadow:0 0 10px 3px rgba(255,250,210,.9)}
@keyframes stripes{from{background-position:0 0,0 0}to{background-position:0 0,26px 0}}
.loader-row{display:flex;justify-content:space-between;align-items:center;color:#fff}
.tip{font-weight:800;font-size:14px;opacity:.92;text-shadow:0 2px 0 rgba(60,0,20,.4)}
.tip.swap{animation:tipIn .35s ease-out}
@keyframes tipIn{from{opacity:0;transform:translateY(6px)}}
#progressPct{font-weight:900;font-size:15px;font-variant-numeric:tabular-nums;text-shadow:0 2px 0 rgba(60,0,20,.4)}
.splash-foot{position:absolute;bottom:calc(var(--safe-b) + 10px);left:0;right:0;text-align:center;color:rgba(255,255,255,.55);font-size:11px;font-weight:800;letter-spacing:1px}

/* ---------- buttons (shared) ---------- */
.btn{position:relative;border:3px solid var(--ink);border-radius:20px;font-weight:900;font-size:18px;padding:13px 10px;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.65),inset 0 -4px 0 rgba(0,0,0,.08),0 6px 0 var(--ink),0 10px 14px rgba(43,23,18,.25);
  transition:transform .07s ease-out,box-shadow .07s ease-out,filter .1s;display:flex;align-items:center;justify-content:center;gap:8px;overflow:hidden}
.btn:active{transform:translateY(5px)!important;box-shadow:inset 0 3px 0 rgba(255,255,255,.5),0 1px 0 var(--ink),0 2px 4px rgba(43,23,18,.2);filter:brightness(.96)}
.btn-play{background:linear-gradient(#ffe57a,#ffc93c 55%,#f5a800);color:var(--ink);font-size:30px;padding:15px;letter-spacing:2px}
.btn-play.btn-small{font-size:22px;padding:12px;width:100%;margin-top:10px}
.btn-sec{background:linear-gradient(#fffaf0,var(--cream) 60%,var(--cream-d))}
.btn-wide{width:100%}
.btn-danger{background:linear-gradient(#ffe3dd,#ffd0c6);color:var(--red-d);font-size:15px;width:100%;margin-top:8px}
.btn .ico svg{width:100%;height:100%}

/* ---------- home ---------- */
#home{justify-content:flex-start;padding-bottom:calc(var(--safe-b) + 10px)}
.home-top{width:100%;display:grid;grid-template-columns:minmax(0,1fr) max-content minmax(0,1fr);align-items:center;gap:13px;animation:dropIn .5s var(--pop) .1s both}
.home-top>.coin-pill{grid-column:1;justify-self:start;white-space:nowrap;gap:4px;padding:3px 8px 3px 4px;font-size:16px}
.home-top>.coin-pill .coin{width:22px;height:22px}
.home-top>.home-best{grid-column:2;justify-self:center;white-space:nowrap}
.home-top>.icon-btn{grid-column:3;justify-self:end;position:relative;background:transparent;border:0;box-shadow:none}
.home-top>.icon-btn::before{content:"";position:absolute;inset:4px;border:3px solid var(--ink);border-radius:13px;
  background:linear-gradient(#fffaf0,var(--cream) 60%,var(--cream-d));box-shadow:inset 0 2px 0 #fff,0 3px 0 var(--ink);pointer-events:none}
.home-top>.icon-btn svg{position:relative;z-index:1;width:22px;height:22px}
.home-top>.icon-btn:active{box-shadow:none}
.home-top>.icon-btn:active::before{box-shadow:inset 0 2px 0 #fff,0 1px 0 var(--ink)}
/* Keep full values readable when unusually long counters need more space. */
.home-top.compact-best>.home-best{display:grid;grid-template-columns:16px auto;column-gap:4px;row-gap:0;padding:4px 6px}
.home-top.compact-best>.home-best svg{width:16px;height:16px}
.home-top.compact-best>.home-best span{font-size:10.5px;line-height:1.1}
.home-top.compact-best>.home-best b{grid-column:1/-1;text-align:center;font-size:16px;line-height:1.1}
.home-top.compact-coins>.coin-pill{flex-direction:column;gap:1px;padding:3px;min-width:0;font-size:clamp(12px,3.8vw,14px);line-height:1.1}
.home-top.compact-coins>.coin-pill .coin{width:18px;height:18px}
.home-top.compact-coins>.coin-pill b{max-width:100%;white-space:normal;overflow-wrap:anywhere}
@keyframes dropIn{from{transform:translateY(-40px);opacity:0}}
.coin-pill{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(#fffaf0,var(--cream));border:3px solid var(--ink);border-radius:20px;padding:4px 12px 4px 5px;font-weight:900;font-size:18px;
  box-shadow:inset 0 2px 0 #fff,0 3px 0 var(--ink);font-variant-numeric:tabular-nums}
.coin-pill.center{align-self:center;margin:-2px 0 4px}
.coin{display:inline-block;width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff7c2 0,#ffd23f 38%,#e89d00 100%);border:2.5px solid var(--ink);vertical-align:middle;position:relative;flex:none}
.coin::after{content:"";position:absolute;inset:4px;border-radius:50%;border:2px solid rgba(160,90,0,.45)}
.icon-btn{width:46px;height:46px;border-radius:15px;background:linear-gradient(#fffaf0,var(--cream) 60%,var(--cream-d));border:3px solid var(--ink);
  box-shadow:inset 0 2px 0 #fff,0 4px 0 var(--ink);display:grid;place-items:center;color:var(--ink);transition:transform .07s}
.icon-btn svg{width:24px;height:24px}
.icon-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.home-best{display:flex;align-items:center;gap:6px;background:rgba(43,23,18,.62);color:#fff;border-radius:16px;padding:6px 14px 6px 10px;font-weight:800;font-size:13px;letter-spacing:1px;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.12)}
.home-best svg{width:18px;height:18px;color:var(--mustard)}
.home-best b{color:var(--mustard);font-size:19px;letter-spacing:0;font-variant-numeric:tabular-nums}
.title-wrap{text-align:center;margin-top:max(1.2vh,6px)}
.title{display:flex;flex-direction:column;align-items:center;font-weight:900;line-height:.88}
.title span{display:flex}
.title i{-webkit-text-stroke:3.5px var(--ink);filter:drop-shadow(0 7px 0 var(--ink))}
.t1 i{font-size:min(16vw,72px);background-image:linear-gradient(105deg,transparent 0 42%,rgba(255,255,255,.95) 48% 52%,transparent 58% 100%),linear-gradient(#fff6b0,#ffd23f 50%,#f59a00)}
.t2 i{font-size:min(14.6vw,66px);background-image:linear-gradient(105deg,transparent 0 42%,rgba(255,255,255,.95) 48% 52%,transparent 58% 100%),linear-gradient(#ffffff,#fff3e2 55%,#ffd2a8)}
.t1 i,.t2 i{background-size:300% 100%,100% 100%;background-position:100% 0,0 0;
  animation:titleLetter .65s var(--pop) calc(.15s + var(--i)*55ms) both,wave 2.8s ease-in-out calc(1.1s + var(--i)*110ms) infinite,shineLoop 5s ease-in-out calc(1.4s + var(--i)*45ms) infinite}
@keyframes titleLetter{from{transform:translateY(-90px) scale(.3) rotate(-20deg);opacity:0}to{transform:none;opacity:1}}
@keyframes wave{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-5px) rotate(-3deg)}50%{transform:translateY(0) rotate(0)}75%{transform:translateY(2px) rotate(2deg)}}
@keyframes shineLoop{0%,62%{background-position:100% 0,0 0}82%,100%{background-position:0 0,0 0}}
.tagline{display:inline-block;margin-top:12px;color:#fff;font-weight:800;font-size:13.5px;padding:6px 14px;border-radius:14px;background:transparent;opacity:1;
  text-shadow:0 1px 2px rgba(43,23,18,.6),0 2px 5px rgba(43,23,18,.25);animation:fadeUp .6s ease-out .8s both}
.hero-space{flex:1;min-height:150px}
.menu{width:min(100%,360px);display:flex;flex-direction:column;gap:12px;margin-bottom:6px}
.menu-row{display:flex;gap:10px}
.menu-row .btn{flex:1}
.btn-hero{font-size:34px;padding:16px 10px 15px;border-radius:24px;animation:riseIn .55s var(--pop) .35s both,breathe 2.2s ease-in-out 1.2s infinite}
.btn-hero .ico{width:30px;height:30px;filter:drop-shadow(0 2px 0 rgba(255,255,255,.6))}
.btn-hero::after{content:"";position:absolute;top:-20%;bottom:-20%;width:38%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);transform:skewX(-18deg);animation:sweep 3.2s ease-in-out 1.6s infinite}
@keyframes sweep{0%,55%{left:-60%}85%,100%{left:130%}}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@keyframes riseIn{from{transform:translateY(60px) scale(.8);opacity:0}}
.tiles .btn-tile{flex-direction:column;gap:3px;font-size:13.5px;padding:9px 4px 8px;border-radius:18px;background:linear-gradient(#fffaf0,var(--cream) 60%,var(--cream-d));animation:riseIn .5s var(--pop) both}
.tiles .btn-tile:nth-child(1){animation-delay:.45s}.tiles .btn-tile:nth-child(2){animation-delay:.52s}.tiles .btn-tile:nth-child(3){animation-delay:.59s}
.btn-tile .ico{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;padding:4px;color:#fff;border:2.5px solid var(--ink);box-shadow:inset 0 2px 0 rgba(255,255,255,.45)}
.btn-tile:nth-child(1) .ico{background:linear-gradient(#5fd9cc,var(--teal-d))}
.btn-tile:nth-child(2) .ico{background:linear-gradient(#ffd96a,#f0a500)}
.btn-tile:nth-child(3) .ico{background:linear-gradient(#ff8a6e,var(--red-d))}
.version{color:rgba(255,255,255,.65);font-size:11px;font-weight:800;letter-spacing:1px;margin-top:2px}
@media (orientation:portrait), (min-height:700px){#home .version{transform:translateY(7px)}}

/* ---------- panels ---------- */
.panel-screen{background:rgba(30,12,30,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:30}
.panel{width:min(100%,380px);max-height:100%;overflow-y:auto;background:linear-gradient(#fffaf0,var(--cream) 40%);border:4px solid var(--ink);border-radius:28px;padding:18px 18px 20px;
  box-shadow:inset 0 3px 0 #fff,0 10px 0 var(--ink),0 22px 40px rgba(0,0,0,.35);animation:popIn .38s var(--pop);display:flex;flex-direction:column;gap:9px;touch-action:pan-y;-webkit-overflow-scrolling:touch}
.panel-screen.leaving .panel{animation:popOut .22s ease-in forwards}
@keyframes popIn{from{transform:scale(.6) translateY(30px);opacity:0}to{transform:none;opacity:1}}
@keyframes popOut{to{transform:scale(.85) translateY(20px);opacity:0}}
.panel h2{text-align:center;font-size:28px;font-weight:900;color:var(--red);-webkit-text-stroke:1.5px var(--ink);margin-bottom:2px;filter:drop-shadow(0 3px 0 rgba(43,23,18,.25))}
.panel h3{font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:1.5px;opacity:.6;margin-top:6px}
.small{font-size:12px;opacity:.7;font-weight:700;text-align:center}
.howto-steps{display:flex;flex-direction:column;gap:9px}
.step{display:flex;gap:12px;align-items:center;font-size:14.5px;line-height:1.3;font-weight:600;background:#fff;border-radius:16px;padding:6px 10px 6px 6px;box-shadow:inset 0 0 0 2px rgba(43,23,18,.08)}
.step-ico{flex:0 0 56px;height:56px;border-radius:14px;background:linear-gradient(#fff1d8,#ffd9a6);border:3px solid var(--ink);display:grid;place-items:center;overflow:hidden;box-shadow:inset 0 2px 0 #fff}
.step-ico img{width:50px;height:50px}
.g{color:var(--green-d);font-weight:900}
.toggle{display:flex;align-items:center;justify-content:space-between;background:#fff;border:3px solid var(--ink);border-radius:16px;padding:10px 14px;font-weight:900;font-size:18px;box-shadow:0 3px 0 rgba(43,23,18,.25)}
.toggle input{display:none}
.toggle i{width:58px;height:32px;border-radius:20px;background:#d9c8b4;border:3px solid var(--ink);position:relative;transition:background .2s;box-shadow:inset 0 3px 0 rgba(0,0,0,.12)}
.toggle i::after{content:"";position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:linear-gradient(#fff,#f0e6da);border:2.5px solid var(--ink);transition:left .2s cubic-bezier(.3,1.6,.5,1)}
.toggle input:checked+i{background:linear-gradient(#7ee36a,var(--green))}
.toggle input:checked+i::after{left:26px}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.stat-grid div{background:#fff;border:3px solid var(--ink);border-radius:14px;padding:7px;text-align:center;display:flex;flex-direction:column;box-shadow:0 3px 0 rgba(43,23,18,.2)}
.stat-grid span{font-size:10.5px;font-weight:900;opacity:.55;text-transform:uppercase;letter-spacing:.5px}
.stat-grid b{font-size:22px;font-weight:900;font-variant-numeric:tabular-nums}
.score-list{list-style:none;display:flex;flex-direction:column;gap:6px;margin-top:4px}
.score-list li{display:flex;align-items:center;gap:10px;background:#fff;border:2.5px solid var(--ink);border-radius:12px;padding:6px 12px 6px 6px;font-weight:900;font-variant-numeric:tabular-nums}
.score-list .rk{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:var(--cream-d);font-size:13px}
.score-list li:nth-child(1) .rk{background:linear-gradient(#fff3a0,#ffc400)}
.score-list li:nth-child(2) .rk{background:linear-gradient(#fff,#cfd6dd)}
.score-list li:nth-child(3) .rk{background:linear-gradient(#ffd6b0,#d98b4a)}
.score-list li span{flex:1;opacity:.55;font-size:13px;font-weight:800}
.score-list .empty{justify-content:center;opacity:.6;padding:10px}
/* v2.1 shop: tabs + live preview + internally scrolling grid */
.shop-panel{overflow:hidden;gap:7px;height:100%;max-height:min(100%,760px);padding:14px 14px 16px}
.shop-panel h2{font-size:25px}
.shop-panel .coin-pill.center{margin:-4px 0 0}
.shop-panel .btn-play.btn-small{margin-top:2px;padding:10px;font-size:20px}
.shop-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;flex:none;padding:2px 1px 4px}
.shop-tabs::-webkit-scrollbar{display:none}
.shop-tab{min-width:0;border:2.5px solid var(--ink);border-radius:13px;background:#fff;font-weight:900;font-size:12.5px;padding:6px 9px 5px;line-height:1.05;
  display:flex;flex-direction:column;align-items:center;box-shadow:0 3px 0 rgba(43,23,18,.3)}
.shop-tab small{font-size:9.5px;opacity:.55;letter-spacing:.3px}
.shop-tab.on{background:linear-gradient(#ffd23f,#ffb020);transform:translateY(1px);box-shadow:0 2px 0 rgba(43,23,18,.35)}
.shop-preview{flex:none;display:flex;gap:10px;align-items:stretch;background:#fff;border:3px solid var(--ink);border-radius:18px;padding:6px;box-shadow:0 4px 0 rgba(43,23,18,.25)}
#shopPrevCv{width:44%;height:104px;border-radius:12px;border:2px solid rgba(43,23,18,.15);flex:none}
.sp-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;justify-content:center}
.sp-info b{font-size:16px;font-weight:900;line-height:1.1}
.sp-info p{font-size:11.5px;font-weight:700;opacity:.7;line-height:1.25}
.sp-btns{display:flex;gap:5px;margin-top:3px}
.sp-btn{font-size:13.5px;padding:7px 5px;min-width:0;border-radius:13px;flex:1;background:linear-gradient(#7ee36a,var(--green));display:flex;align-items:center;justify-content:center;gap:4px;white-space:nowrap}
.sp-btn .coin{width:16px;height:16px;border-width:2px}.sp-btn .coin::after{display:none}
.sp-btn.off{background:linear-gradient(#fffaf0,var(--cream-d));opacity:.75}
.sp-btn.buy{background:linear-gradient(#ffe27a,#ffb020)}
.sp-btn.arm{background:linear-gradient(#9ff0ff,#3cb4e6)}
.sp-btn.arm.off{background:linear-gradient(#fffaf0,var(--cream-d))}
/* A recessed selector shelf keeps scrolling cards visually separate from the fixed preview. */
.shop-shelf{--shelf:#ecd8b9;position:relative;isolation:isolate;display:flex;flex:1 1 auto;min-height:96px;margin:3px -4px 0;
  background:var(--shelf);border:2px solid rgba(43,23,18,.45);border-radius:16px;overflow:hidden;
  box-shadow:inset 0 3px 0 rgba(43,23,18,.12),0 1px 0 rgba(255,255,255,.85)}
.shop-shelf::before,.shop-shelf::after{content:"";position:absolute;left:0;right:0;height:14px;z-index:1;pointer-events:none}
.shop-shelf::before{top:0;height:5px;background:linear-gradient(var(--shelf),rgba(236,216,185,0))}
.shop-shelf::after{bottom:0;background:linear-gradient(rgba(236,216,185,0),var(--shelf))}
.shop-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;margin:0;padding:10px 4px 10px;overscroll-behavior:contain;
  border-radius:13px;scrollbar-width:none}
.shop-scroll::-webkit-scrollbar{display:none;width:0;height:0}
.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.shop-item{background:#fff;border:3px solid var(--ink);border-radius:15px;padding:5px 4px 6px;display:flex;flex-direction:column;align-items:center;gap:3px;font-weight:800;font-size:11.5px;line-height:1.1;text-align:center;position:relative;
  box-shadow:0 4px 0 rgba(43,23,18,.3);transition:transform .07s;min-width:0}
.shop-item:active{transform:translateY(3px)}
.shop-item canvas{width:100%;height:52px;border-radius:9px;border:2px solid rgba(43,23,18,.15)}
.shop-item .nm{min-height:2.2em;display:flex;align-items:center}
.shop-item .price{display:flex;align-items:center;gap:3px;font-size:13px;font-weight:900}
.shop-item .price .coin{width:15px;height:15px;border-width:2px}
.shop-item .price .coin::after{display:none}
.shop-item.sel{background:#e2ffd9;box-shadow:inset 0 0 0 3px var(--green),0 4px 0 rgba(43,23,18,.3)}
.shop-item.focus{outline:3px solid #ffb020;outline-offset:1px}
.shop-item.locked canvas{filter:grayscale(.75) brightness(.88)}
.shop-item.cant .price{opacity:.5}
.shop-item .tag{font-size:9.5px;background:var(--ink);color:#fff;border-radius:7px;padding:2px 6px;letter-spacing:.4px}
.shop-item .tag.own{background:var(--teal-d)}
.shop-item .tag.arm{background:#1f7fb8}
@media (max-height:700px){.shop-panel{padding:10px 12px 12px;gap:5px}.shop-panel h2{font-size:21px}#shopPrevCv{height:86px}.shop-item canvas{height:44px}.shop-panel .small{display:none}}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;pointer-events:none;z-index:5;display:flex;flex-direction:column;justify-content:flex-start;
  padding:calc(var(--sat) + 8px) calc(var(--sar) + 10px) calc(var(--safe-b) + var(--hb-gap,12px)) calc(var(--sal) + 10px)}
#hud .hud-top{animation:dropIn .45s var(--pop) .1s both}
#hud .hud-bottom{animation:riseIn .45s var(--pop) .15s both}
/* 3-column grid: timer is always dead centre and can never be squeezed by a long score */
.hud-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
.hud-top>.hud-score{justify-self:start}
.hud-top>.icon-btn{justify-self:end}
.hud-top .icon-btn{pointer-events:auto;width:44px;height:44px}
.hud-top .icon-btn svg{width:20px;height:20px}
.chip{background:linear-gradient(#fffaf0,var(--cream) 60%,var(--cream-d));border:3px solid var(--ink);box-shadow:inset 0 2px 0 #fff,0 4px 0 var(--ink)}
.hud-score{background:linear-gradient(#fffaf0,var(--cream) 60%,var(--cream-d));border:3px solid var(--ink);box-shadow:inset 0 2px 0 #fff,0 4px 0 var(--ink);border-radius:16px;padding:2px 14px 4px;min-width:118px;display:flex;flex-direction:column;line-height:1}
.hud-score small{font-size:10px;font-weight:900;opacity:.55;letter-spacing:1.5px;margin-top:3px}
.hud-score b{font-size:26px;font-weight:900;font-variant-numeric:tabular-nums;display:inline-block;transform-origin:0 50%}
.hud-score.bump b{animation:bump .25s}
@keyframes bump{50%{transform:scale(1.22);color:var(--red)}}
.hud-timer{position:relative;width:60px;height:60px;flex:none;display:grid;place-items:center;filter:drop-shadow(0 3px 0 var(--ink))}
/* viewBox is padded (-3..43) so the 8-unit track stroke (outer radius 21) is inside the SVG viewport and never clipped */
.hud-timer svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform:rotate(-90deg)}
.hud-timer circle{fill:#fffaf0;stroke-width:5}
.hud-timer .trk{stroke:var(--ink);stroke-width:8}
.hud-timer .arc{fill:none;stroke:var(--teal);stroke-dasharray:106.8;stroke-dashoffset:0;stroke-linecap:round;transition:stroke .3s}
.hud-timer b{position:relative;font-size:20px;font-weight:900;font-variant-numeric:tabular-nums}
.hud-timer.low .arc{stroke:var(--red)}
.hud-timer.low b{color:var(--red-d);animation:bump .5s infinite}
.order-card{align-self:center;margin-top:8px;background:#fffdf7;border:3px solid var(--ink);border-radius:14px;padding:6px 10px 9px;box-shadow:0 4px 0 var(--ink),0 8px 14px rgba(43,23,18,.2);min-width:224px;transform-origin:50% 0;position:relative;
  background-image:repeating-linear-gradient(transparent 0 19px,rgba(43,23,18,.05) 19px 20px)}
.order-card::before{content:"";position:absolute;left:50%;top:-9px;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ff9a86,var(--red-d));border:2.5px solid var(--ink)}
.order-card.new{animation:ticket .55s var(--pop)}
@keyframes ticket{from{transform:translateY(-50px) rotate(-8deg) scale(.7);opacity:0}}
.order-card.done{background-color:#e6ffdc}
.order-card.done .order-head{color:var(--green-d)}
.order-head{display:flex;justify-content:space-between;font-weight:900;font-size:14px;gap:12px;align-items:center}
.ticket{font-size:11px;background:var(--red);color:#fff;border-radius:8px;padding:1px 7px;box-shadow:inset 0 -2px 0 rgba(0,0,0,.15)}
.order-items{display:flex;gap:5px;justify-content:center;margin-top:5px}
.oi{width:52px;height:46px;position:relative;border-radius:11px;background:linear-gradient(#fff6e8,#ffe8c8);border:2px solid rgba(43,23,18,.22);display:grid;place-items:center;transition:background .2s}
.oi img{width:46px;height:42px}
.oi.got{background:linear-gradient(#ddffd2,#b6f0a6);border-color:#3d9b2f;animation:gotPop .35s var(--pop)}
@keyframes gotPop{50%{transform:scale(1.15)}}
.oi.got::after{content:"✓";position:absolute;right:-6px;top:-8px;width:20px;height:20px;border-radius:50%;background:var(--green);border:2px solid var(--ink);color:#fff;font-size:12px;font-weight:900;display:grid;place-items:center;animation:popIn .3s cubic-bezier(.2,1.8,.4,1)}
/* bottom bar: all three controls share one centre line (align-items:center) */
.hud-bottom{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;height:var(--hb-h,74px)}
.combo{width:96px;height:58px;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(#fffaf0,var(--cream) 60%,var(--cream-d));border:3px solid var(--ink);border-radius:15px;padding:4px 7px 7px;box-shadow:inset 0 2px 0 #fff,0 4px 0 var(--ink)}
.combo-label{font-size:10px;font-weight:900;letter-spacing:.5px}
.combo-label b{font-size:17px;color:var(--red)}
.combo-bar{height:11px;border-radius:6px;background:#e7d4bd;border:2px solid var(--ink);overflow:hidden;margin-top:2px;box-shadow:inset 0 2px 0 rgba(0,0,0,.12)}
#hComboFill{height:100%;width:0;background:linear-gradient(rgba(255,255,255,.5),transparent 60%),linear-gradient(90deg,var(--mustard),var(--red));transition:width .15s}
.combo.up{animation:bump .4s}
.combo.max{background:linear-gradient(#fff3b0,#ffd23f);box-shadow:inset 0 2px 0 #fff,0 4px 0 var(--ink),0 0 18px rgba(255,170,30,.8)}
.combo.max #hComboFill{animation:rainbow .6s linear infinite}
@keyframes rainbow{0%{filter:hue-rotate(0)}100%{filter:hue-rotate(360deg)}}
.serve{pointer-events:auto;flex:1;max-width:190px;height:var(--hb-h,74px);border-radius:24px;border:4px solid var(--ink);position:relative;overflow:hidden;
  background:linear-gradient(#d6cbc0,#b3a79c);box-shadow:inset 0 3px 0 rgba(255,255,255,.5),0 7px 0 var(--ink),0 12px 16px rgba(43,23,18,.25);
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;transition:transform .07s}
.serve-main{font-size:30px;font-weight:900;color:#fff;-webkit-text-stroke:1.5px var(--ink);letter-spacing:1px;filter:drop-shadow(0 2px 0 var(--ink))}
.serve-sub{font-size:11px;font-weight:900;color:var(--ink);opacity:.7;margin-top:4px}
.serve.ready{background:linear-gradient(#9af58a,#5ccf4a 50%,#33a725);animation:serveGlow .9s ease-in-out infinite}
.serve.ready::after{content:"";position:absolute;top:-20%;bottom:-20%;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-18deg);animation:sweep 1.8s ease-in-out infinite}
.serve.ready .serve-sub{opacity:1}
.serve.hot{background:linear-gradient(#fff07a,#ffb21e 50%,#ff7a12)}
@keyframes serveGlow{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.serve:active{transform:translateY(5px)!important;box-shadow:inset 0 3px 0 rgba(255,255,255,.4),0 2px 0 var(--ink)}
.serve.nope{animation:nope .3s}
@keyframes nope{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.tower-mult{width:96px;height:58px;justify-content:center;background:linear-gradient(#fffaf0,var(--cream) 60%,var(--cream-d));border:3px solid var(--ink);border-radius:15px;padding:4px 7px 5px;box-shadow:inset 0 2px 0 #fff,0 4px 0 var(--ink);text-align:center;display:flex;flex-direction:column;line-height:1;transition:background .2s}
.tower-mult small{font-size:10px;font-weight:900;letter-spacing:.5px}
.tower-mult b{font-size:24px;font-weight:900;color:var(--teal-d);font-variant-numeric:tabular-nums}
.tower-mult.on{background:linear-gradient(#e0fff9,#b6f2e8)}
.tower-mult.risky{background:linear-gradient(#ffe1da,#ffb4a4)}
.tower-mult.risky b{color:var(--red);animation:bump .5s infinite}

/* ---------- results ---------- */
.results{align-items:stretch;overflow:visible}
.res-ribbon{position:relative;margin:-34px -30px 0;align-self:center;padding:8px 30px 10px;background:linear-gradient(#ff7a5c,var(--red) 55%,var(--red-d));border:4px solid var(--ink);border-radius:14px;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.4),0 5px 0 var(--ink);animation:popIn .5s var(--pop) .1s both}
.res-ribbon h2{color:#fff;-webkit-text-stroke:1.5px var(--ink);font-size:26px;margin:0;white-space:nowrap}
.res-ribbon::before,.res-ribbon::after{content:"";position:absolute;top:12px;width:26px;height:100%;background:#b8202f;border:4px solid var(--ink);z-index:-1}
.res-ribbon::before{left:-20px;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,35% 50%);border-radius:4px 0 0 4px}
.res-ribbon::after{right:-20px;clip-path:polygon(0 0,100% 0,65% 50%,100% 100%,0 100%);border-radius:0 4px 4px 0}
.stars{display:flex;justify-content:center;gap:4px;margin:6px 0 0}
.stars i{width:66px;height:66px;position:relative;transform:scale(.82);filter:drop-shadow(0 4px 0 rgba(43,23,18,.35))}
.stars i::before,.stars i::after{content:"";position:absolute;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.stars i::before{inset:0;background:var(--ink)}
.stars i::after{inset:6px 6px 7px;background:linear-gradient(#e9dccb,#cdb9a3)}
.stars i:nth-child(2){transform:translateY(-10px) scale(1)}
.stars i.on::after{background:linear-gradient(#fffbd0,#ffd23f 45%,#ff9d00)}
.stars i.on{animation:starPop .55s cubic-bezier(.2,1.8,.4,1) both}
.stars i:nth-child(2).on{animation-name:starPop2}
@keyframes starPop{from{transform:scale(0) rotate(-120deg)}to{transform:scale(.82)}}
@keyframes starPop2{from{transform:translateY(-10px) scale(0) rotate(-120deg)}to{transform:translateY(-10px) scale(1)}}
.res-score{text-align:center;position:relative;display:flex;flex-direction:column;align-items:center;gap:8px}
.res-score b{font-size:56px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums;-webkit-text-stroke:2.5px var(--ink);
  background:linear-gradient(#ff8a6e,var(--red) 50%,var(--red-d));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 0 var(--ink))}
.new-best{position:static;max-width:100%;background:linear-gradient(#fff3a0,var(--mustard));border:2.5px solid var(--ink);border-radius:10px;padding:2px 8px;font-weight:900;font-size:13px;animation:breathe .8s infinite;box-shadow:0 3px 0 var(--ink)}
.res-best{text-align:center;font-weight:800;opacity:.7;margin-top:-4px}
.coin-earn{display:flex;align-items:center;justify-content:center;gap:5px}
.coin-earn em{font-style:normal}
.results .btn-play{font-size:26px;margin-top:6px}
#results .panel{margin-top:22px}

.toast{position:fixed;left:50%;top:40%;transform:translate(-50%,-50%) scale(.6);opacity:0;z-index:60;background:var(--ink);color:#fff;font-weight:900;padding:10px 18px;border-radius:14px;pointer-events:none;transition:all .2s var(--pop)}
.toast.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.rotate{position:fixed;left:0;right:0;z-index:100;display:none;align-items:center;justify-content:center;text-align:center;
  padding:calc(var(--sat) + 16px) calc(var(--sar) + 20px) calc(var(--sab) + 16px) calc(var(--sal) + 20px);
  background:radial-gradient(circle at 50% 40%,#ff8a4c 0,#e2393a 45%,#a81d3e 80%,#7a1238 100%);color:var(--ink)}
.rotate-card{background:linear-gradient(#fffaf0,var(--cream) 60%,var(--cream-d));border:4px solid var(--ink);border-radius:26px;padding:18px 26px 20px;max-width:360px;
  box-shadow:inset 0 3px 0 #fff,0 8px 0 var(--ink),0 18px 30px rgba(0,0,0,.3);display:flex;flex-direction:column;align-items:center;gap:8px}
.rotate-phone{width:46px;height:74px;border:4px solid var(--ink);border-radius:12px;background:linear-gradient(#bdebff,#7fd2ff);position:relative;
  box-shadow:0 4px 0 rgba(43,23,18,.3);animation:rotPhone 2.4s ease-in-out infinite}
.rotate-phone::after{content:"";position:absolute;left:50%;bottom:4px;width:14px;height:3px;margin-left:-7px;border-radius:2px;background:var(--ink);opacity:.6}
@keyframes rotPhone{0%,20%{transform:rotate(-90deg)}45%,80%{transform:rotate(0)}100%{transform:rotate(-90deg)}}
.rotate-card b{font-size:21px;font-weight:900;color:var(--red);-webkit-text-stroke:1px var(--ink)}
.rotate-card p{font-size:14.5px;font-weight:800;opacity:.8;line-height:1.3}
/* phones/tablets turned sideways (portrait-only game) */
@media (orientation:landscape) and (max-height:540px) and (hover:none){.rotate{display:flex}}
html.landscape .rotate{display:flex}
@media (max-height:700px){:root{--hb-h:64px;--hb-gap:10px}.order-card{margin-top:4px}.combo,.tower-mult{height:52px}.btn-hero{font-size:28px;padding:12px}.tiles .btn-tile{padding:7px 4px 6px}.hero-space{min-height:120px}.title i{-webkit-text-stroke:3px var(--ink)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001s!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001s!important}}

/* ---------- v2.2 Hard Mode ---------- */
.hud-top{position:relative}
.hard-badge{position:absolute;right:52px;top:50%;transform:translateY(-50%) rotate(-4deg);display:flex;align-items:center;gap:2px;padding:3px 9px 3px 6px;
  background:linear-gradient(#ffd36a,#ff8a2a 55%,#e8501c);border:3px solid var(--ink);border-radius:12px;box-shadow:inset 0 2px 0 rgba(255,255,255,.55),0 3px 0 var(--ink);
  color:#fff;font-weight:900;font-size:14px;letter-spacing:1px;-webkit-text-stroke:.6px var(--ink);pointer-events:none;animation:hardGlow 1.6s ease-in-out infinite}
.hard-badge svg{width:16px;height:16px;color:#fff3c4;filter:drop-shadow(0 1px 0 var(--ink))}
@keyframes hardGlow{0%,100%{filter:drop-shadow(0 0 0 rgba(255,120,40,0))}50%{filter:drop-shadow(0 0 6px rgba(255,140,40,.85))}}
.hud-timer.hard .arc{stroke:#ff8a2a}
.hard-row .hr-txt{display:flex;flex-direction:column;line-height:1.15}
.hard-row .hr-name{display:flex;align-items:center;gap:4px}
.hard-row .hr-name svg{width:18px;height:18px;color:#ff7a1f}
.hard-row small{font-size:12px;font-weight:700;opacity:.62;margin-top:2px}
.hard-row input:checked+i{background:linear-gradient(#ffc46a,#ff7a1f)}
.hard-hint{text-align:center;font-size:12.5px;font-weight:800;color:#c4501a;margin:-2px 0 -4px}
#restartBtn.hot{background:linear-gradient(#ffe3b0,#ffb35a 60%,#ff8a2a);font-size:16px}
.res-hard{display:flex;flex-direction:column;align-items:center;gap:4px;font-weight:800;font-size:14px;margin-top:-2px}
.res-hard-times{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;max-width:290px}
.res-hard-stat{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;text-align:center}
.res-hard-label{font-size:10.5px;line-height:1.1;font-weight:900;text-transform:uppercase;letter-spacing:.5px;opacity:.65}
.res-hard-value{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px;max-width:100%;min-height:18px}
.res-hard b{font-size:16px;line-height:1.1;font-variant-numeric:tabular-nums;max-width:100%;overflow-wrap:anywhere}
.res-hard em{font-style:normal;font-size:10px;line-height:1.1;font-weight:900;background:var(--mustard);border:2px solid var(--ink);border-radius:8px;padding:0 4px}
.res-hard .hard-pill{line-height:1.1}
@media (max-height:700px){.res-hard{gap:3px}.res-hard-stat{gap:1px}.res-hard-label{font-size:10px}.res-hard-value{min-height:16px;gap:3px}.res-hard b{font-size:14px}.res-hard em{font-size:9px}.res-hard .hard-pill{font-size:11px;padding:0 7px}}
.hard-pill{background:linear-gradient(#ffd36a,#ff8a2a 55%,#e8501c);color:#fff;-webkit-text-stroke:.5px var(--ink);border:2.5px solid var(--ink);border-radius:10px;padding:1px 8px;font-size:12px;letter-spacing:1px;font-weight:900}
.new-best.hard{font-size:11.5px;padding:2px 7px;background:linear-gradient(#ffd36a,#ff8a2a 55%,#e8501c);color:#fff;-webkit-text-stroke:.5px var(--ink)}

/* ===== v2.3: game-style switches (pause menu + settings). Markup: label.toggle > input[role=switch] + i ===== */
.toggle{position:relative;cursor:pointer;user-select:none;-webkit-user-select:none}
.toggle input{display:block;position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.toggle i{--on1:#8ef07a;--on2:var(--green);--on3:var(--green-d);--k:26px;
  flex:none;width:58px;height:36px;margin:-2px 0;border-radius:999px;position:relative;border:3px solid var(--ink);
  background:linear-gradient(#d4b58a,#e2c9a2 55%,#ecd9b9);
  box-shadow:inset 0 4px 0 rgba(43,23,18,.20),inset 0 -2px 0 rgba(255,255,255,.55),0 3px 0 var(--ink);
  transition:background .25s,box-shadow .25s,transform .12s}
/* in-track state mark: OFF ring on the right; when ON, the row's icon on the left */
.toggle i::before{content:"";position:absolute;top:50%;right:7px;width:12px;height:12px;margin-top:-6px;background:#8a6a46;
  -webkit-mask:var(--ico-off) center/contain no-repeat;mask:var(--ico-off) center/contain no-repeat;transition:opacity .2s,transform .3s}
.toggle input:checked+i::before{right:auto;left:6px;width:15px;height:15px;margin-top:-7.5px;background:#fff;
  -webkit-mask-image:var(--ico);mask-image:var(--ico);filter:drop-shadow(0 1px 0 rgba(43,23,18,.55))}
/* knob */
.toggle i::after{content:"";position:absolute;top:2px;left:2px;width:var(--k);height:var(--k);border-radius:999px;border:3px solid var(--ink);
  background:linear-gradient(90deg,transparent 0 3px,rgba(150,108,66,.55) 3px 5px,transparent 5px 8px,rgba(150,108,66,.55) 8px 10px,transparent 10px) center/13px 9px no-repeat,
    radial-gradient(circle at 34% 28%,#fff 0 24%,rgba(255,255,255,0) 25%),linear-gradient(#fffaf1,#f6e6cd 62%,#e6cca7);
  box-shadow:0 2.5px 0 rgba(43,23,18,.45),inset 0 -2px 0 rgba(170,130,85,.35);
  transform:translateX(0);transition:transform .42s cubic-bezier(.34,1.7,.5,1),width .16s ease-out}
.toggle input:checked+i{background:linear-gradient(180deg,var(--on1),var(--on2) 58%,var(--on3));
  box-shadow:inset 0 4px 0 rgba(0,0,0,.18),inset 0 -2px 0 rgba(255,255,255,.35),0 3px 0 var(--ink)}
.toggle input:checked+i::after{left:2px;transform:translateX(22px)}
/* press: track sinks onto its depth shadow, knob squashes (stretches toward travel) */
.toggle:active i{transform:translateY(2px);box-shadow:inset 0 4px 0 rgba(43,23,18,.22),inset 0 -2px 0 rgba(255,255,255,.4),0 1px 0 var(--ink)}
.toggle:active i::after{width:31px}
.toggle:active input:checked+i::after{transform:translateX(17px)}
.toggle input:focus-visible+i{outline:3px solid #3d8bff;outline-offset:3px}
/* per-row icons + Hard Mode flame colours */
.toggle.t-music i{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 18.2a3.2 3.2 0 1 1-2-2.95V5.2L19 3v12.6a3.2 3.2 0 1 1-2-2.95V7.1l-7.5 1.5Z' fill='%23000'/%3E%3C/svg%3E")}
.toggle.t-sfx i{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 9h4l5.5-4.5v15L7.5 15h-4Z' fill='%23000'/%3E%3Cpath d='M16 8.6a4.8 4.8 0 0 1 0 6.8M18.6 6a8.5 8.5 0 0 1 0 12' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E")}
.toggle.t-haptics i{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='8' y='3.5' width='8' height='17' rx='2' fill='none' stroke='%23000' stroke-width='2.6'/%3E%3Cpath d='M4.5 8v8M19.5 8v8' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E")}
.toggle.t-bonus i{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2.6 2.8 5.8 6.3.9-4.6 4.4 1.1 6.3L12 17l-5.6 3 1.1-6.3-4.6-4.4 6.3-.9L12 2.6Z' fill='%23000'/%3E%3C/svg%3E")} /* v2.6.3 */
.toggle.hard-row i{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.6 2.5c.5 3-1.2 4.6-2.6 6.2C8.6 10.3 7 12 7 14.6A5 5 0 0 0 12 20a5 5 0 0 0 5-5.2c0-1.7-.7-3-1.6-4.1-.2 1.3-.9 2.2-1.9 2.6.6-2.9-.1-6.6-.9-10.8Z' fill='%23000'/%3E%3C/svg%3E");--on1:#ffd36a;--on2:#ff8a2a;--on3:#e8501c}
.toggle i{--ico-off:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='6.2' fill='none' stroke='%23000' stroke-width='3.2'/%3E%3C/svg%3E")}
.toggle.hard-row input:checked+i{box-shadow:inset 0 4px 0 rgba(170,60,10,.35),inset 0 -2px 0 rgba(255,255,255,.35),0 3px 0 var(--ink),0 0 12px 2px rgba(255,138,42,.55);animation:swGlow 1.8s ease-in-out infinite}
.toggle.hard-row:active input:checked+i{animation:none}
@keyframes swGlow{0%,100%{box-shadow:inset 0 4px 0 rgba(170,60,10,.35),inset 0 -2px 0 rgba(255,255,255,.35),0 3px 0 var(--ink),0 0 8px 1px rgba(255,138,42,.45)}
  50%{box-shadow:inset 0 4px 0 rgba(170,60,10,.35),inset 0 -2px 0 rgba(255,255,255,.35),0 3px 0 var(--ink),0 0 16px 4px rgba(255,120,30,.7)}}
@media (prefers-reduced-motion:reduce){.toggle i,.toggle i::before,.toggle i::after{transition:none!important}
  .toggle.hard-row input:checked+i{animation:none!important}.toggle:active i::after{width:var(--k)}.toggle:active input:checked+i::after{transform:translateX(22px)}}

/* ===== v2.3: shop polish — everything sits inside its box ===== */
.shop-preview{padding:8px;gap:10px;align-items:stretch}
#shopPrevCv{height:auto;min-height:104px;align-self:stretch}
.sp-info{padding:1px 0 3px;overflow-wrap:anywhere;justify-content:flex-start}             /* 3px = the button's depth edge, so bottom margin == side margins */
.sp-btns{flex-wrap:wrap;margin-top:auto;padding-top:5px;gap:6px}   /* pinned to the card's bottom edge */
.sp-btn{flex:1 1 auto;min-width:max-content;max-width:100%;min-height:34px;padding:6px 9px;font-size:13px;border-width:2.5px;border-radius:12px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 3px 0 var(--ink)}
.sp-btn:active{transform:translateY(3px)!important;box-shadow:inset 0 2px 0 rgba(255,255,255,.45),0 0 0 var(--ink)}
.shop-tab{padding:6px 4px 5px;white-space:nowrap;overflow:hidden;font-size:clamp(11.5px,3.35vw,12.5px)}
.shop-grid{gap:8px}
.shop-item{padding:5px 5px 7px;overflow:hidden}
.shop-item .nm{width:100%;justify-content:center}
.shop-item .nm span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;max-width:100%}
.shop-item .price{margin-top:auto;flex-wrap:wrap;justify-content:center;row-gap:2px;max-width:100%}
.shop-item .amt{display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
.shop-item .tag{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.toast.in-shop{width:max-content;max-width:min(330px,calc(100vw - 48px));font-size:14px;line-height:1.2;padding:8px 14px;text-align:center}
@media (max-height:700px){#shopPrevCv{min-height:86px;height:auto}}

/* ===== v2.3.1: Home stays laid out under menu panels; its entrance animation plays once ===== */
#home.show.covered{pointer-events:none;animation:homeCover .22s ease-in forwards}
@keyframes homeCover{to{opacity:0;visibility:hidden}}
#home.intro-done .home-top,#home.intro-done .tagline,#home.intro-done .tiles .btn-tile{animation:none}
#home.intro-done .btn-hero{animation:breathe 2.2s ease-in-out 1.2s infinite}
#home.intro-done .t1 i,#home.intro-done .t2 i{animation:wave 2.8s ease-in-out calc(1.1s + var(--i)*110ms) infinite,shineLoop 5s ease-in-out calc(1.4s + var(--i)*45ms) infinite}
@media (prefers-reduced-motion:reduce){#home.show.covered{opacity:0;visibility:hidden}}

/* ===== v2.3.2: Home's entrance waits (frame 0, paused) under the fading splash and plays once after it is gone ===== */
#home.pre-intro *{animation-play-state:paused!important}
#splash.out{animation:splashOut .38s cubic-bezier(.3,0,.25,1) forwards} /* eases out to 0 so its removal is invisible (was ease-in: steep last frames) */

/* ===== v2.3.3: timer ring always clear of the order card + pin =====
   v2.3.2 rest: ring+shadow bottom 60.4px into the HUD row vs pin top 59px (55px on <=700px-tall screens) -> pin overlapped the ring;
   the ticket entrance started 50px higher, sweeping card+pin across the timer on every new order. Now: the HUD row paints above the card,
   the card sits 6px lower (8px on short screens), the pin 3px lower on the card edge, and the ticket swings in on its pin (no upward travel). */
.hud-top{z-index:2}
.order-card{margin-top:14px}
.order-card::before{top:-6px}
@media (max-height:700px){.order-card{margin-top:12px}}
@keyframes ticket{from{transform:rotate(-8deg) scale(.7);opacity:0}}

/* ===== v2.3.4: SCORE box text centred =====
   The 'SCORE' label and the number were left-aligned. Now both are centred horizontally, and vertically as a group, in a box of the
   same size as before (118x51, fixed so long scores no longer widen it; game.js fitScore() shrinks the number's font instead),
   and the score bump scales from the number's centre. Optical (ink) centring: digits/caps have no descenders, so the group's line boxes
   sit 2.5px high -> 5px top padding; the label's trailing letter-spacing is cancelled with a -1.5px right margin.
   (TOWER box was already centred; COMBO is a label + full-width bar, unchanged.) */
.hud-score{width:118px;min-width:0;height:51px;padding:5px 14px 0;align-items:center;justify-content:center;text-align:center}
.hud-score small{margin-top:0;margin-right:-1.5px}
.hud-score b{transform-origin:50% 50%;white-space:nowrap}

/* ===== v2.4: top HUD layout (placement / spacing only - score box, pause button, timer ring, order card and pin keep their
   v2.3.4 size, art, colours, outline + depth). Two-column structure with one spacing token --g (8px):
   - top row: SCORE box (left) and pause button (right) at the v2.3.4 edge margins, the Hard badge beside pause as before;
   - right column: the timer ring hangs directly under pause, centred on the pause button's vertical axis, its ring --g below
     the button's 4px depth;
   - left column: the compact order card hangs under the SCORE box, left edges flush, --g + 4px depth below the row, and is
     capped so it always keeps >= 7px (target ~--g+) from the timer ring - including the swing-in overshoot. */
#hud{--g:8px}
.hud-top{grid-template-columns:1fr auto}
.hud-timer{position:absolute;right:-8px;top:calc(50% + 22px + 4px + var(--g) - 60px * 2 / 46)}
.order-card{align-self:flex-start;margin-top:calc(var(--g) + 4px);max-width:calc(100% - 22px - 60px * 21 / 46 - 7px - 4px)}
@media (max-height:700px){.order-card{margin-top:calc(var(--g) + 4px)}}
/* 5-item orders on the narrowest phones: same 52x46 tiles, just tighter gaps/padding so the card stays left of the timer column */
@media (max-width:380px){.order-card{padding-left:6px;padding-right:6px}.order-items{gap:4px}}

/* ===== v2.4.1: order card centred on screen (timer column unchanged from v2.4). The card's v2.4 width cap and the narrow-phone
   5-item gap tweak are dropped (v2.3.4 card padding/gaps; tiles/icons unchanged). If the centred card would come within 7px of the
   timer during any frame of its swing-in, placeCard() in game.js adds the smallest extra margin-top that clears it.
   Pin: 16px -> 11px (69%), same gradient/colour + ink outline (2px), centred on the card's top border so it reads as pinned. */
.order-card{align-self:center;max-width:100%}
@media (max-width:380px){.order-card{padding-left:10px;padding-right:10px}.order-items{gap:5px}}
.order-card::before{width:11px;height:11px;margin-left:-5.5px;top:-7px;border-width:2px}

/* Five ingredients share the upper HUD's left edge and leave the timer column clear,
   including the ticket's small swing overshoot. Smaller orders keep their centred layout. */
.order-card.five-items{align-self:flex-start;width:306px;max-width:calc(100% - 72px);min-width:0;margin-top:calc(var(--g) + 10px)}
.order-card.five-items .oi{flex:1;min-width:0}
.order-card.five-items .oi img{max-width:100%;object-fit:contain}

/* ===== v2.4.2: playful counter-clockwise tilt (-5deg) of the SCORE box. Rotates about its own centre, so the box
   keeps its v2.4.1 footprint/centre and the label + number (and their bump) rotate with it, staying centred in the box. */
.hud-top>.hud-score{transform:rotate(-5deg);transform-origin:50% 50%}

/* ===== v2.4.3: Play button first-launch entrance without the flash.
   v2.3.2 parked Home's entrance animations paused at frame 0 under the fading splash, then resumed them. Resuming a paused,
   not-yet-started (delay phase, fill-backwards) opacity/transform animation is what made the big Play button blink on iOS.
   Now Play has no animation at all while the splash fades - it just sits in riseIn's first frame as plain style - and its
   entrance starts fresh when the splash is gone (same .55s / .35s delay / easing, explicit end frame). game.js keeps the
   .hold first-frame style under it until that entrance has finished, so no frame can ever show the button un-animated. */
@keyframes heroRise{from{transform:translateY(60px) scale(.8);opacity:0}to{transform:none;opacity:1}}
.btn-hero{animation:heroRise .55s var(--pop) .35s both,breathe 2.2s ease-in-out 1.2s infinite}
#home.pre-intro .btn-hero{animation:none}
/* v2.4.4: the hold is opacity only. Holding the transform too meant that, when .hold came off as the entrance finished, the
   button's own .07s transform transition (.btn) replayed the jump from translateY(60px) scale(.8) to rest on iOS - transitions
   outrank animations, so it showed as a one-frame drop/flash. Opacity isn't transitioned, and the transform is never touched. */
#home.pre-intro .btn-hero,#home .btn-hero.hold{opacity:0}

/* ===================== v2.6.0: Daily Special, Signature Stacks, global leaderboards, mute ===================== */
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* v2.6.1: Home is back to exactly v2.5.9 (no Daily bar, no extra header button). Sound lives in Settings / Pause as before. */
/* Panels: Daily + Leaderboard */
.daily-panel h2,.board-panel h2{font-size:26px}
/* v2.6.2 Daily Special popup: diner theme. Awning-stripe header, recipe on an order ticket, (i) top-left mirroring the x,
   rules live in the (i) card, top 3 in a soft inset panel, two big buttons (Daily Special / Play Game), one light link. */
.daily-panel{position:relative;gap:10px;padding-top:30px;overflow-x:hidden}
.dp-awning{position:absolute;left:0;right:0;top:0;height:22px;pointer-events:none;
  background:repeating-linear-gradient(90deg,var(--red) 0 24px,#fffaf0 24px 48px);
  -webkit-mask:radial-gradient(12px 8px at 12px 14px,#000 98%,transparent) 0 0/24px 22px repeat-x,linear-gradient(#000 0 14px,transparent 14px);
          mask:radial-gradient(12px 8px at 12px 14px,#000 98%,transparent) 0 0/24px 22px repeat-x,linear-gradient(#000 0 14px,transparent 14px)}
.dp-awning::after{content:"";position:absolute;left:0;right:0;top:5px;height:2px;background:rgba(255,255,255,.3)}
.dp-corner{position:absolute;z-index:3;top:24px;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;color:var(--ink);opacity:.55;background:transparent;border:0;padding:0}
.dp-corner svg{width:22px;height:22px}.dp-corner:active{opacity:1;background:rgba(43,23,18,.08)}
.dp-close{right:8px}.dp-info{left:8px}
.dp-info[aria-expanded="true"]{opacity:1;color:var(--teal-d)}
.daily-panel h2{margin-bottom:-7px}
.dp-date{text-align:center;font-size:13px;font-weight:800;opacity:.6;letter-spacing:.3px}
.dp-more{position:absolute;z-index:4;left:12px;right:12px;top:66px;background:#fffdf7;border:3px solid var(--ink);border-radius:14px;
  box-shadow:0 4px 0 var(--ink),0 10px 22px rgba(43,23,18,.25);padding:10px 14px 11px;font-size:13px;font-weight:700;line-height:1.35;text-align:left;cursor:pointer;
  background-image:repeating-linear-gradient(transparent 0 19px,rgba(43,23,18,.05) 19px 20px)}
.dp-more::before{content:"";position:absolute;left:12px;top:-10px;width:12px;height:12px;background:#fffdf7;border-left:3px solid var(--ink);border-top:3px solid var(--ink);transform:rotate(45deg);border-radius:3px 0 0 0}
.dp-more-h{display:block;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:1.2px;color:var(--red-d);margin-bottom:4px}
.dp-more ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.dp-more li{position:relative;padding-left:14px}.dp-more li::before{content:"";position:absolute;left:2px;top:.5em;width:6px;height:6px;border-radius:50%;background:var(--mustard-d)}
.dp-hero{align-self:center;display:flex;flex-direction:column;align-items:stretch;gap:7px;padding:7px 12px 10px;min-width:236px;margin-top:4px;
  background:#fffdf7;border:3px solid var(--ink);border-radius:14px;box-shadow:0 4px 0 var(--ink);position:relative;
  background-image:repeating-linear-gradient(transparent 0 19px,rgba(43,23,18,.05) 19px 20px)}
.dp-hero::before{content:"";position:absolute;left:50%;top:-7px;width:11px;height:11px;margin-left:-5.5px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ff9a86,var(--red-d));border:2px solid var(--ink)}
.dp-ticket-head{display:flex;justify-content:center}
.dp-name{font-weight:900;font-size:20px;color:var(--red-d);letter-spacing:.3px;line-height:1.15}
.dp-items{display:flex;gap:6px;justify-content:center}
.dp-items .oi{width:52px;height:46px}.dp-items .oi img{width:46px;height:42px}
.dp-stats{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:6px 6px;border-bottom:2px dashed rgba(43,23,18,.18);font-size:13px;font-weight:800;white-space:nowrap}
.dp-stats span{opacity:.85}.dp-stats b{font-size:16px;font-weight:900;margin-left:4px;font-variant-numeric:tabular-nums;opacity:1}
.dp-board{background:rgba(241,217,181,.38);border:2px solid rgba(43,23,18,.16);border-radius:14px;padding:6px 8px 4px;box-shadow:inset 0 2px 0 rgba(43,23,18,.06)}
.daily-panel .dp-board h3{margin:0 0 2px;text-align:center;font-size:12px}
.lb-list.mini{gap:0}
.lb-list.mini li{background:transparent;border:0;border-radius:0;border-top:1.5px solid rgba(43,23,18,.12);min-height:34px;padding:3px 4px}
.lb-list.mini li:first-child{border-top:0}
.lb-list.mini .rk{width:24px;height:24px;font-size:12px}
.lb-list.mini .nm{flex-direction:row;align-items:baseline;gap:6px;font-size:14px}
.lb-list.mini .nm small{display:none}
.lb-list.mini .sc{font-size:15px}
.lb-list.mini li.me{background:rgba(46,196,182,.16);border-radius:9px}
.lb-list.mini li.lb-state{border:0;background:transparent;padding:8px 6px 9px;font-size:13px;opacity:.65;min-height:0}
.lb-list.mini li.lb-state.err{opacity:1;background:#fff3ef;border-radius:12px}
.daily-panel #dpPlay{margin-top:2px}
.dp-regular{width:100%;font-size:20px;padding:10px;letter-spacing:1px}
.dp-links{display:flex;justify-content:center;margin:-6px 0 -10px}
.txt-btn{background:transparent;border:0;font:inherit;font-weight:900;font-size:14px;color:var(--teal-d);padding:10px 16px;min-height:44px;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
.txt-btn:active{opacity:.6}
.lb-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--cream-d);border:3px solid var(--ink);border-radius:15px;padding:4px}
.lb-tab{display:flex;align-items:center;justify-content:center;gap:5px;border-radius:10px;padding:7px 4px;font-weight:900;font-size:15px;color:var(--ink);background:transparent;opacity:.65}
.lb-tab svg{width:17px;height:17px}
.lb-tab.on{background:linear-gradient(#fffaf0,#fff);box-shadow:0 2px 0 var(--ink);opacity:1;border:2px solid var(--ink)}
.lb-sub{text-align:center;font-size:12px;font-weight:800;opacity:.65;margin:-2px 0}
.lb-list{list-style:none;display:flex;flex-direction:column;gap:5px;min-height:120px}
.lb-list.mini{min-height:0}
.lb-list li{display:flex;align-items:center;gap:9px;background:#fff;border:2.5px solid var(--ink);border-radius:12px;padding:5px 11px 5px 5px;font-weight:900;font-variant-numeric:tabular-nums;min-height:42px}
.lb-list .rk{width:28px;height:28px;flex:none;border-radius:8px;display:grid;place-items:center;background:var(--cream-d);font-size:13px}
.lb-list li:nth-child(1) .rk{background:linear-gradient(#fff3a0,#ffc400)}
.lb-list li:nth-child(2) .rk{background:linear-gradient(#fff,#cfd6dd)}
.lb-list li:nth-child(3) .rk{background:linear-gradient(#ffd6b0,#d98b4a)}
.lb-list .nm{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.15;font-size:15px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.lb-list .nm i{font-style:normal;font-size:10px;letter-spacing:1px;text-transform:uppercase;background:var(--teal);color:#fff;border-radius:6px;padding:0 5px;margin-left:5px;vertical-align:2px}
.lb-list .nm small{font-size:11px;font-weight:800;opacity:.55}
.lb-list .sc{font-size:17px}
.lb-list li.me{background:linear-gradient(#e0fff9,#c4f5ec);border-color:var(--teal-d)}
.lb-list li.sk .rk,.lb-list li.sk .nm,.lb-list li.sk .sc{background:linear-gradient(90deg,#f1e4cf 0,#fbf3e6 40%,#f1e4cf 80%);background-size:300% 100%;animation:lbShimmer 1.1s linear infinite;border-radius:7px}
.lb-list li.sk .nm{height:14px;flex:0 0 46%}.lb-list li.sk .sc{width:54px;height:16px;margin-left:auto}
@keyframes lbShimmer{from{background-position:100% 0}to{background-position:-50% 0}}
.lb-list li.lb-state{justify-content:center;flex-direction:column;text-align:center;font-size:14px;font-weight:800;padding:14px 10px;opacity:.7;gap:8px;border:0;background:rgba(255,255,255,.55)}
.lb-list li.lb-state.err{opacity:1;background:#fff3ef;border-color:var(--red-d);border-style:solid;color:var(--red-d)}
.lb-retry{font-size:15px;padding:7px 18px;color:var(--ink)}
.lb-me{text-align:center;font-size:13px;font-weight:800;opacity:.7;min-height:18px}
.lb-me.has{opacity:1}.lb-me b{color:var(--teal-d)}
@media (max-height:700px){.board-panel,.daily-panel{gap:6px;padding:12px 14px 14px}.lb-list li{min-height:36px;padding-top:3px;padding-bottom:3px}.lb-list .nm small{display:none}.daily-panel{gap:7px;padding-top:28px}.dp-items .oi{width:48px;height:42px}.dp-items .oi img{width:42px;height:38px}.daily-panel .btn-play.btn-small{padding:10px}.dp-regular{padding:8px}}
/* HUD: Daily badge + Signature row on the ticket */
.daily-badge{background:linear-gradient(#7ee6da,var(--teal) 55%,var(--teal-d));animation:none}
.daily-badge svg{color:#ffe27a}
#hud.daily .hud-timer .arc{stroke:var(--teal)}
.sig-row{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:6px;padding:3px 8px;border-radius:10px;
  background:linear-gradient(#fff3c4,#ffe08a);border:2px solid var(--ink);font-weight:900;font-size:12px;line-height:1;white-space:nowrap}
.sig-row .sg-star{color:#e0a400;font-size:14px;-webkit-text-stroke:.5px var(--ink)}
.sig-row .sg-name{letter-spacing:.3px}
.sig-row .sg-seq{display:flex;align-items:center;gap:2px}
.sig-row .sg-i{width:26px;height:24px;border-radius:7px;display:grid;place-items:center;background:rgba(255,255,255,.7);border:1.5px solid rgba(43,23,18,.3)}
.sig-row .sg-i img{width:24px;height:22px}
.sig-row .sg-i.ok{background:#b6f0a6;border-color:#3d9b2f}
.sig-row .sg-i.next{border-color:var(--ink);box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--teal);animation:sigNext .9s ease-in-out infinite}
@keyframes sigNext{50%{transform:scale(1.1)}}
.sig-row .sg-ar{font-style:normal;opacity:.45;font-size:12px}
.sig-row .sg-b{background:var(--ink);color:var(--mustard);border-radius:7px;padding:3px 5px;font-size:11.5px;font-variant-numeric:tabular-nums}
.sig-row.wait{opacity:.82}
.sig-row.done,.sig-row.banked{background:linear-gradient(#e6ffdc,#b6f0a6);animation:gotPop .35s var(--pop)}
.sig-row.done .sg-b{background:var(--green-d);color:#fff;animation:bump .6s infinite}
.sig-row.failed,.sig-row.forfeit{background:#eee3d6;opacity:.6;filter:grayscale(.7)}
.sig-row.failed .sg-name{text-decoration:line-through}
@media (max-width:380px){.sig-row{gap:3px;padding:3px 5px}.sig-row .sg-name{font-size:11px}}
/* Results: Daily pill + leaderboard block */
.res-daily{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:-2px}
.daily-pill{display:inline-flex;align-items:center;gap:3px;background:linear-gradient(#7ee6da,var(--teal) 55%,var(--teal-d))}
.daily-pill svg{width:13px;height:13px;color:#ffe27a}
.res-daily small{font-size:11.5px;font-weight:800;opacity:.65}
/* v2.6.3: no white panel - the Post section sits on the popup's own cream; Post is styled like Home (cream .btn-sec look), same size */
.res-lb{display:flex;flex-direction:column;gap:7px;background:transparent;border:0;border-radius:16px;padding:8px}
.rl-status{text-align:center;font-weight:900;font-size:13.5px;min-height:18px}
.rl-status.loading{opacity:.6}.rl-status.loading::after{content:"";display:inline-block;width:10px;height:10px;margin-left:6px;border:2.5px solid var(--ink);border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite;vertical-align:-1px}
@keyframes spin{to{transform:rotate(360deg)}}
.rl-status.good{color:var(--green-d)}.rl-status.bad{color:var(--red-d)}.rl-status.muted{opacity:.62;font-size:12.5px}
.rl-form{display:flex;gap:6px}
.rl-form input{flex:1;min-width:0;font:inherit;font-weight:900;font-size:16px;padding:9px 12px;border:3px solid var(--ink);border-radius:14px;background:#fff;color:var(--ink);-webkit-user-select:text;user-select:text;touch-action:manipulation}
.rl-form input:focus{outline:none;box-shadow:0 0 0 3px var(--teal)}
.rl-post{background:linear-gradient(#fffaf0,var(--cream) 60%,var(--cream-d));color:var(--ink);font-size:16px;padding:8px 16px}
.rl-post:disabled{opacity:.6;color:var(--ink)}
.rl-btns .btn{font-size:15px;padding:8px 6px;box-shadow:inset 0 3px 0 rgba(255,255,255,.65),0 4px 0 var(--ink)}
.rl-btns svg{width:17px;height:17px}
#results .panel{transition:translate .18s ease-out}
/* v2.6.3 keyboard mode (JS sets left/width/top/max-height from the real visual viewport): one intact card that scrolls inside its
   own border; the ribbon tucks inside so nothing is clipped; no scroll bar. Removed on blur, so the normal layout is untouched. */
#results.kb{overflow:hidden}
#results .panel.kbm{position:fixed;margin:0;max-width:none;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;transition:none;scrollbar-width:none}
#results .panel.kbm::-webkit-scrollbar{display:none}
#results .panel.kbm>*{flex-shrink:0}
#results .panel.kbm .res-ribbon{margin:2px auto 0}
/* v2.6.3 short-screen fit (e.g. 375x667 "Couldn't post" state): tighten first, scroll inside the card only if still needed */
#results .panel.tight{gap:7px}
#results .panel.tight>*{flex-shrink:0}
#results .panel.tight .stars{margin:0 0 -6px}
#results .panel.tight .stars i{width:44px;height:44px}
#results .panel.tight .stars i:nth-child(2){transform:translateY(-6px) scale(1)}
#results .panel.tight .res-score{gap:4px}
#results .panel.tight .res-score b{font-size:46px}
#results .panel.tight .stat-grid{gap:6px}
#results .panel.tight .stat-grid div{padding:3px 7px 4px}
#results .panel.tight .stat-grid b{font-size:19px;line-height:1.2}
#results .panel.tight .btn-play{font-size:24px;padding:9px;margin-top:2px}
#results .panel.tight #homeBtn{padding-top:8px;padding-bottom:8px}
#results .panel.fitm{overflow-y:auto;overflow-x:hidden;scrollbar-width:none;overscroll-behavior:contain}
#results .panel.fitm::-webkit-scrollbar{display:none}
#results .panel.fitm .res-ribbon{margin:2px auto 0}
@media (max-height:700px){.res-lb{gap:5px;padding:6px}.rl-btns .btn{padding:6px}.rl-form input{padding:7px 10px}}
#scoresBoard{font-size:16px;padding:10px}#scoresBoard svg{width:20px;height:20px}

/* v2.6.1: ticket with a Signature strip. The tile row lines up with the title and strip inset, is a touch more compact,
   and the spacing is even (title · tiles · strip · card bottom). A ticket without a strip is unchanged. */
/* v2.6.2: the tile row shares the card's inner width (title row, tiles and strip all span the same inset - no empty corner beside #N);
   tiles grow together up to 76px wide, the row stays centred, and vertical spacing stays even (6 / 6 / 7). */
.order-card.has-sig{padding-top:4px;padding-bottom:4px}
.order-card.has-sig .order-head{line-height:1.1}
.order-card.has-sig .order-items{justify-content:center;margin-top:6px;gap:6px}
.order-card.has-sig .oi{flex:1 1 0;min-width:46px;max-width:76px;width:auto;height:42px}
.order-card.has-sig .oi img{width:42px;height:38px}
.order-card.has-sig .oi.got::after{top:-5px;right:-5px}
.order-card.has-sig .sig-row{margin-top:6px}
.order-card.has-sig.five-items .oi{width:auto}

/* ===================== v2.6.3: leaderboard rows as diner order tickets ===================== */
.lb-list li.lb-row{gap:10px;background:linear-gradient(#fffdf7,#fff5e3);border:2.5px solid var(--ink);border-radius:12px;padding:5px 12px 5px 6px;
  box-shadow:inset 0 2px 0 #fff,0 3px 0 rgba(43,23,18,.16)}
.lb-list li.lb-row .rk{width:28px;height:28px;border-radius:50%;border:2px solid var(--ink);background:var(--cream-d);font-size:13px;box-shadow:inset 0 2px 0 rgba(255,255,255,.55)}
.lb-list li.lb-row:nth-child(1) .rk{background:linear-gradient(#fff3a0,#ffc400)}
.lb-list li.lb-row:nth-child(2) .rk{background:linear-gradient(#fff,#cfd6dd)}
.lb-list li.lb-row:nth-child(3) .rk{background:linear-gradient(#ffd6b0,#d98b4a)}
.lb-list li.lb-row .nm{display:flex;flex-direction:column;gap:1px;overflow:hidden}
.lb-list .nm-l{display:flex;align-items:center;gap:6px;min-width:0}
.lb-list .nt{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.lb-list .nm i.you{flex:none;margin:0;font-style:normal;font-size:9.5px;font-weight:900;letter-spacing:1px;line-height:1;padding:3px 5px 2px;border-radius:6px;
  background:var(--red);color:#fff;border:1.5px solid var(--ink);box-shadow:0 1.5px 0 var(--ink);vertical-align:0}
.lb-list li.lb-row small{font-size:11px;font-weight:800;color:var(--ink);opacity:.58;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.lb-list li.lb-row small .sg{color:#a87400;opacity:1}
.lb-list li.lb-row .sc{flex:none;margin-left:auto;text-align:right;font-size:17px;font-weight:900;color:var(--ink)}
.lb-list li.lb-row.me{background:linear-gradient(#fff6d2,#ffe9a8);border-color:var(--ink);box-shadow:inset 0 0 0 2px rgba(255,201,60,.55),0 3px 0 rgba(43,23,18,.16)}
.lb-me b{color:var(--red-d)}
.board-panel{scrollbar-width:none}.board-panel::-webkit-scrollbar{display:none}
/* Daily popup top 3: same row content, quieter (ruled lines inside the soft panel) */
.lb-list.mini li.lb-row{background:transparent;border:0;border-radius:0;box-shadow:none;border-top:1.5px dashed rgba(43,23,18,.16);padding:3px 6px 3px 4px;min-height:34px}
.lb-list.mini li.lb-row:first-child{border-top:0}
.lb-list.mini li.lb-row .rk{width:24px;height:24px;font-size:12px;border-width:1.5px}
.lb-list.mini li.lb-row .nm{font-size:14px}
.lb-list.mini li.lb-row small{display:none}
.lb-list.mini li.lb-row .sc{font-size:15px}
.lb-list.mini li.lb-row.me{background:linear-gradient(90deg,rgba(255,214,90,.42),rgba(255,214,90,.18));border-radius:9px;box-shadow:none}
.lb-list.mini li.lb-row.me+li{border-top-color:transparent}
.board-panel>*{flex-shrink:0}   /* never squash the list under "Your best"; the panel scrolls (hidden bar) if it ever has to */
@media (max-height:700px){.lb-list li.lb-row{min-height:34px;padding-top:2px;padding-bottom:2px}.lb-list li.lb-row small{display:none}.board-panel .lb-list:not(.mini){gap:4px}.board-panel h2{font-size:24px}.lb-list:not(.mini) li.lb-row .rk{width:25px;height:25px;font-size:12px}}
/* v2.6.3: (i) card height is set by dpInfoFit() so its bottom sits 11px above Today's Top 3; content centred in that space */
.dp-more{box-sizing:border-box;display:flex;flex-direction:column;justify-content:center}
.dp-more.tight{padding:7px 12px 8px;line-height:1.25;font-size:12.5px}
.dp-more.tight ul{gap:1px}
.dp-more.tight .dp-more-h{margin-bottom:2px}
.dp-more.fitm{justify-content:flex-start;overflow-y:auto;scrollbar-width:none}.dp-more.fitm::-webkit-scrollbar{display:none}

/* v2.6.4: rows are name-only (no stats subline) - name block centred vertically against the badge and score */
.lb-list li.lb-row .nm{justify-content:center;gap:0}
/* v2.6.5: Post button's bottom edge thinner (4px, same as the Leaderboard/Share buttons) instead of the default 6px */
.rl-post{box-shadow:inset 0 3px 0 rgba(255,255,255,.65),inset 0 -3px 0 rgba(0,0,0,.07),0 4px 0 var(--ink),0 7px 10px rgba(43,23,18,.2)}
.rl-post:active{transform:translateY(3px)!important;box-shadow:inset 0 3px 0 rgba(255,255,255,.5),0 1px 0 var(--ink),0 2px 4px rgba(43,23,18,.2)}
/* v2.6.6: the Post section (hint, name + Post, Leaderboard/Share) sits in its own soft container, with a gap above and below it */
.res-lb{background:linear-gradient(rgba(241,217,181,.38),rgba(241,217,181,.22));border:2.5px solid rgba(43,23,18,.2);border-radius:18px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.7);padding:9px 11px 12px;margin:8px 0 2px}
.res-lb.hidden{display:none}
@media (max-height:700px){.res-lb{padding:7px 9px 10px;margin:4px 0 1px}}
#results .panel.tight .res-lb{margin:3px 0 1px}
/* v2.6.7: popup titles - the rounded font has overlapping strokes inside letters, so a centred -webkit-text-stroke drew thin seam
   lines through them on iPhone. Paint the outline first and the fill on top (paint-order), at double width so the visible outline
   stays the same thickness - the fill now covers the inner seams. */
.panel h2,.res-ribbon h2,.res-score b,.rotate-card b{paint-order:stroke fill}
.panel h2,.res-ribbon h2{-webkit-text-stroke-width:3px}
/* the score's fill is a see-through gradient, so paint-order can't hide its seams - outline it with stacked shadows instead */
.res-score b{-webkit-text-stroke:0;paint-order:normal;filter:drop-shadow(2.5px 0 0 var(--ink)) drop-shadow(-2.5px 0 0 var(--ink)) drop-shadow(0 2.5px 0 var(--ink)) drop-shadow(0 -2.5px 0 var(--ink)) drop-shadow(0 4px 0 var(--ink))}
.rotate-card b{-webkit-text-stroke-width:2px}
/* v2.6.8: results Leaderboard button - nudge icon+label left so the label isn't tight against the right edge */
/* v2.6.9: trophy icon removed - label centred with even padding */
#rlBoard{padding-left:6px;padding-right:6px;justify-content:center;text-align:center}
/* v2.6.10: loading-page logo - the per-letter filter:drop-shadow re-rendered every frame of the shine sweep and tore into jumpy,
   static-y streaks on iPhone. Same look, no filter: an ink copy of the letters (same stroke, same pop-in) sits 5px below as the shadow. */
.logo-text{position:relative;isolation:isolate}
.logo-text>.w1 i,.logo-text>.w2 i{filter:none}
.logo-shade{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;transform:translateY(5px);z-index:-1;pointer-events:none}
.logo-shade i{background:none!important;color:var(--ink)!important;-webkit-text-fill-color:var(--ink);filter:none!important;
  animation:letterPop .5s var(--pop) calc(1.3s + var(--i)*45ms) both!important}
#splash.loading-waiting .logo-shade i{animation:none!important}