/* RTW design system, extracted by scripts/_port-rtw-ui.js — do not edit by hand */

@font-face{ font-family:'Lilita One'; src:url('ui/LilitaOne-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Luckiest Guy'; src:url('ui/LuckiestGuy-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
/* Baloo 2 (variable, OFL) — the clean, crisp, friendly font for the FTUE/guide coach pills. Real weight
   axis (no synthetic bolding) + unambiguous i/l, unlike Lilita One which blurred them in the teach bubbles. */
@font-face{ font-family:'Baloo 2'; src:url('ui/Baloo2.ttf') format('truetype'); font-weight:100 900; font-style:normal; font-display:swap; }
:root{
  --bg0:#0d1422; --panel:rgba(15,23,38,.88); --panel2:rgba(22,32,52,.92);
  --line:rgba(255,255,255,.09); --ink:#eef4ff; --sub:#9fb2cf;
  --accent:#ffd34d; --coral:#ff6b6b; --green:#7ed957; --blue:#5fb9ff;
  --rad:16px; --shadow:0 6px 18px rgba(0,0,0,.35);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent; user-select:none; -webkit-user-select:none}
html,body{margin:0;padding:0;height:100%;overflow:hidden;background:#9ed8f2}
body{font-family:'Baloo 2',system-ui,sans-serif;color:var(--ink);
  background:linear-gradient(180deg,#aee2f7 0%,#cdeefb 40%,#bfe9c9 100%)}
/* form controls don't inherit font-family by default (UA forces Arial) — make every button/input use Baloo 2 */
button,input,select,textarea{font-family:inherit}
#c{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
/* The 3D WebGL canvas renders the world continuously even on menus, where the opaque .scr covers it.
   But its GPU compositing layer still leaks behind popups (a dark "box" of the 3D scene) on real GPUs.
   It's only needed during a level (body.inGame) and while result modals are up, so stop compositing it
   on menus. visibility:hidden keeps layout (no WebGL resize) but removes it from paint entirely. */
body:not(.inGame) #c{visibility:hidden}
/* BoomFX: transparent 2D explosion overlay (dynamite blasts), above the scene+HUD, below the danger tints */
#boomfx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:6;display:block}
body:not(.inGame) #boomfx{visibility:hidden}
#hud{position:fixed;inset:0;pointer-events:none;z-index:5}
#hud .ui{pointer-events:auto}

/* top bar (Figma "IN GAME UI") — gear left, distance pill center, coins pill right */
#topBar{position:absolute;top:calc(8px + env(safe-area-inset-top));left:12px;right:12px;height:0;padding:0}
#topBar .igGoldBar{position:absolute;right:0;left:auto;top:6px;width:auto;display:flex;align-items:center;padding:0;gap:0;z-index:5}
#bestPill{display:none}
.pill{display:flex;align-items:center;gap:7px;background:var(--panel);border:1px solid var(--line);
  border-radius:18px;padding:7px 13px;box-shadow:var(--shadow);backdrop-filter:blur(8px)}
.pill svg{width:20px;height:20px;flex:0 0 auto}
.pill b{font-size:19px;line-height:1;font-weight:800;letter-spacing:.3px}
.pill.small{padding:6px 11px;opacity:.92}
.pill.small span{font-size:14px;font-weight:700;color:var(--sub)}
/* World Cup in-run goals pill: WIDER pill, the real soccer-ball asset vertically centred ON TOP of its left end */
#goalPill{position:relative;padding:6px 16px 6px 32px;min-width:68px;justify-content:center;box-sizing:border-box}
#goalPill .gpBall{position:absolute;left:-7px;top:50%;transform:translateY(-50%);width:31px;height:31px;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3));pointer-events:none;z-index:2}
/* requirement pill MET (station goal satisfied) */
.pill.small.met{background:#1fbf57;border-color:#0e8a3b;opacity:1}
.pill.small.met span{color:#fff}
.depotDot{display:none;position:absolute;top:6%;right:18%;width:11px;height:11px;background:#ff3b30;border:2px solid #fff;border-radius:50%;z-index:3}
.depotDot.on{display:block}
#spacer{display:none}
/* settings gear (left) */
.igGear{position:absolute;left:0;top:0;width:46px;height:46px;border:0;background:none;padding:0;cursor:pointer;display:flex;filter:drop-shadow(0 3px 4px rgba(10,30,60,.32))}
.igGear img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}
.igGear:active{transform:scale(.92)}
/* distance pill (center) — Figma asset 40:1564 */
.igDist{position:absolute;left:42%;top:4px;transform:translateX(-50%);height:40px;min-width:164px;display:flex;align-items:center;justify-content:center;padding:0 30px 3px;background:url("ui/rtw-ig-dist.png?v=86") center/100% 100% no-repeat;filter:drop-shadow(0 3px 4px rgba(10,40,80,.28))}
.igDist b{font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;font-size:20px;line-height:1;color:#fbf9ea;letter-spacing:.3px;-webkit-text-stroke:1.6px #000;paint-order:stroke;text-shadow:0 2px 0 #000;white-space:nowrap}
/* coins pill (right) — Figma asset 40:1567 (gray pill body) + coin + green plus */
.igCoins{position:absolute;right:0;top:1px;height:44px;display:flex;align-items:center;gap:3px;padding:0 2px 0 37px;background:url("ui/rtw-ig-coins.png?v=86") center/100% 100% no-repeat;filter:drop-shadow(0 2px 3px rgba(10,40,80,.16))}
.igCoins.bump{animation:bump .4s}
.igCoins .igCoinIco{position:absolute;left:-14px;top:50%;transform:translateY(-50%);width:44px;height:44px;object-fit:contain;pointer-events:none;filter:drop-shadow(0 2px 2px rgba(40,30,0,.3))}
.igCoins #goldVal{font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;font-size:18px;color:#fff;line-height:1;-webkit-text-stroke:1.4px #000;paint-order:stroke;text-shadow:0 1.5px 0 #000;min-width:16px;text-align:center}
.igCoinPlus{width:38px;height:38px;border:0;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:0 0 auto;margin-right:-3px;background:url("ui/rtw-ig-plus.png?v=86") center/100% 100% no-repeat}
.igCoinPlus b{font-family:'Luckiest Guy','Lilita One',cursive;font-weight:400;font-size:21px;line-height:1;color:#fff;-webkit-text-stroke:1px rgba(0,45,12,.4);paint-order:stroke;padding-bottom:3px;pointer-events:none}
.igCoinPlus:active{transform:translateY(1px)}
/* objective pills (pax/animal/food) — centered row under the distance pill, shown only when carrying cargo */
.igObj{position:absolute;left:50%;top:55px;transform:translateX(-50%);display:flex;gap:7px;align-items:center}
.cbtn{width:42px;height:42px;border-radius:50%;background:var(--panel);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);color:var(--ink)}
.cbtn svg{width:20px;height:20px}
.cbtn:active{transform:scale(.92)}

/* boosters bottom-left column (Figma "NEW IN GAME UI PLACEMENT" — discs stacked, bottom-aligned with tray) */
#boosters{position:absolute;left:3.5vw;right:auto;top:auto;bottom:calc(18px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2.6vw;width:auto;z-index:6}
.boost{position:relative;width:16vw;height:16vw;max-width:74px;max-height:74px;border:0;background:none;padding:0;display:flex;align-items:center;justify-content:center;
  transition:transform .12s;cursor:pointer;filter:drop-shadow(0 3px 4px rgba(10,30,60,.32))}
.boost::before{content:"";position:absolute;inset:0;z-index:0;background:url("ui/rtw-ig-boost.png?v=86") center/100% 100% no-repeat}
.boost .boostImg2,.boost>svg{position:relative;z-index:1;width:62%;height:62%;object-fit:contain;display:block;margin:auto}
.boost:active{transform:scale(.92)}
/* count badge — Figma coral disc asset (40:1726), top-right, cream number + dark-red stroke */
.boost .cnt{position:absolute;right:-3px;top:-2px;z-index:3;width:23px;height:23px;border-radius:50%;background:url("ui/rtw-ig-badge.png?v=86") center/100% 100% no-repeat;color:#fbf9ea;
  font-family:'Lilita One','Baloo 2',sans-serif;font-style:normal;font-weight:400;font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;
  padding-bottom:2px;border:0;-webkit-text-stroke:1px #801322;paint-order:stroke;text-shadow:0 1px 0 #801322;filter:drop-shadow(0 1px 2px rgba(0,0,0,.28))}
.boost.zero{opacity:1}   /* boosters stay FULL COLOR at 0 (no fade) — the count badge shows the 0 */
.boost.bump .cnt{animation:bump .45s}
@keyframes bump{30%{transform:scale(1.5)}}
/* ACTIVE booster (Figma "Booster Activated"): bright green rim + yellow disc behind the icon, just +5% bigger + a glow */
.boost.armed{ transform:scale(1.01); z-index:7; transition:transform .14s cubic-bezier(.34,1.56,.64,1); animation:boostActiveGlow 1.1s ease-in-out infinite }
.boost.armed::before{ content:""; position:absolute; inset:-6%; border-radius:50%;
  background:radial-gradient(circle at 50% 35%, #fffb84 0%, #fff200 47%, #f2d400 75%, #c9a302 100%);
  box-shadow: inset 0 -5px 7px rgba(150,108,0,.42), 0 0 0 4px #4ef000, 0 0 0 7px #1f9c00, 0 0 16px 4px rgba(72,240,0,.5);
  z-index:0; pointer-events:none }
.boost.armed .boostImg2{ position:relative; z-index:1 }
.boost.armed .cnt{ z-index:2 }
@keyframes boostActiveGlow{ 0%,100%{ filter:drop-shadow(0 0 3px rgba(120,255,40,.55)) } 50%{ filter:drop-shadow(0 0 13px rgba(140,255,55,.95)) drop-shadow(0 0 6px rgba(255,240,120,.7)) } }
/* LOCKED (Figma "NEW LOCKED BOOSTER IN GAME BTN"): our normal blue button, NO icon, big white padlock centred, LVL N at the bottom */
.boost.locked .boostImg2,.boost.locked>svg{display:none!important}
.boost.locked .cnt{display:none}
.boost .lk{display:none;position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);width:47%;height:auto;z-index:4;pointer-events:none}
.boost .lk img{width:100%;height:auto;object-fit:contain;display:block;filter:drop-shadow(0 2px 2px rgba(30,50,80,.3))}
.boost.locked .lk{display:block}
.boost .bLvl{display:none}
.boost.locked .bLvl{display:block;position:absolute;left:50%;top:85%;bottom:auto;transform:translate(-50%,-50%);z-index:4;pointer-events:none;
  font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;font-style:normal;font-size:14px;line-height:1;color:#f8fbff;white-space:nowrap;
  -webkit-text-stroke:1.5px #242424;paint-order:stroke;text-shadow:0 1.5px 0 #242424}
.wob{animation:wob .35s}
@keyframes wob{25%{translate:-5px 0;rotate:-3deg}60%{translate:5px 0;rotate:3deg}}   /* independent props so wob never clobbers an element's centering transform */

/* bottom tray (Figma "NEW IN GAME UI PLACEMENT") — main rail centred, HOLD + NEXT TRACKS boxes on the right */
#tray{position:absolute;left:0;right:0;bottom:calc(16px + env(safe-area-inset-bottom));height:0;pointer-events:none}
#tray .slot,#tray .trayInset,#tray .holdBox,#tray .nextBox{pointer-events:auto}
.pieceWrap{border-radius:12px;overflow:visible;display:flex}
.pieceWrap svg{display:block;transition:transform .16s cubic-bezier(.34,1.56,.64,1)}
/* main rail (centre) — Figma "MAIN RAIL BTN IN GAME" (169x172) */
.slot.big{position:absolute;left:44.5%;bottom:0;transform:translateX(-50%);
  width:27vw;height:27.4vw;max-width:128px;max-height:130px;box-sizing:border-box;padding:0;
  display:flex;align-items:center;justify-content:center;border:0;box-shadow:none;
  background:url("ui/rtw-ig-slot-active.png?v=87") center/100% 100% no-repeat;
  filter:drop-shadow(0 4px 5px rgba(40,80,120,.24))}
.slot.big .pieceWrap svg{width:17vw;height:17vw;max-width:80px;max-height:80px}
.slot.big .pieceWrap img.p3d{width:18vw;height:18vw;max-width:86px;max-height:86px;display:block}
/* rotate badge — top-right corner of the main rail (Figma orange arrows) */
#rotBadge{position:absolute;top:-3.8vw;right:-3.8vw;width:10.5vw;height:10.5vw;max-width:50px;max-height:50px;z-index:6;
  display:flex;align-items:center;justify-content:center;border:0;box-shadow:none;border-radius:50%}
#rotBadge.hide{display:none}
#rotBadge img{width:64%;height:64%;object-fit:contain;display:block;pointer-events:none}
/* right column: HOLD (top) + NEXT TRACKS (bottom), right-aligned */
#trayRight{position:absolute;right:6vw;bottom:0;display:flex;flex-direction:column;align-items:flex-end;gap:3vw;z-index:4}
/* shared recessed tile slot (Figma 293030497) */
.trayInset{position:relative;width:12.3vw;height:11.8vw;max-width:58px;max-height:56px;box-sizing:border-box;
  background:url("ui/rtw-ig-tray-inset.png") center/100% 100% no-repeat;
  display:flex;align-items:center;justify-content:center}
.trayInset .pieceWrap svg{width:8.6vw;height:8.6vw;max-width:42px;max-height:42px}
.trayInset .pieceWrap img.p3d{width:9vw;height:9vw;max-width:44px;max-height:44px;display:block}
.trayInset.dis{opacity:.5}
.trayInset.dis.locked{opacity:1}
/* NEXT TRACKS box (Figma 82:1306) */
.nextBox{position:relative;box-sizing:border-box;width:31.7vw;max-width:150px;padding:5vw 1.6vw 1.6vw;
  background:url("ui/rtw-ig-next-box.png") center/100% 100% no-repeat;
  filter:drop-shadow(0 4px 5px rgba(40,80,120,.2))}
/* L2 teach: pulse the NEXT box to draw the eye */
.nextBox.teachPulse{animation:nextTeachPulse 1s ease-in-out infinite}
@keyframes nextTeachPulse{0%,100%{transform:scale(1);filter:drop-shadow(0 4px 5px rgba(40,80,120,.2))}50%{transform:scale(1.08);filter:drop-shadow(0 0 3.4vw rgba(90,205,120,.95))}}
/* L2 NEXT teach bubble — white pill, black text, sits ABOVE the NEXT box (positioned in JS); own element so it never fights the guided finger */
#nextCoach{position:fixed;z-index:11;transform:translate(-50%,-100%);display:none;background:#fff;color:#15233f;border:2px solid #15233f;border-radius:13px;padding:6px 13px;
  font-family:'Baloo 2',system-ui,sans-serif;font-weight:600;font-size:14px;line-height:1.1;white-space:nowrap;box-shadow:0 4px 10px rgba(20,60,110,.28);pointer-events:none}
#nextCoach.on{display:block;animation:nextCoachBob 1.4s ease-in-out infinite}
#nextCoach::after{content:"";position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid #fff}
@keyframes nextCoachBob{0%,100%{transform:translate(-50%,-100%)}50%{transform:translate(-50%,calc(-100% - 5px))}}
.nextBox .nextSlots{display:flex;gap:1.4vw;align-items:center;justify-content:center}
.nextBox>label,.holdBox>label{position:absolute;top:0;left:0;right:0;text-align:center;
  font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;font-size:2.85vw;line-height:1;
  letter-spacing:.2px;color:#a05c2a;text-transform:uppercase;padding-top:1.9vw;white-space:nowrap;z-index:2}
/* HOLD box (Figma 82:1365) */
.holdBox{position:relative;box-sizing:border-box;width:18.3vw;max-width:88px;padding:5vw 2.3vw 2.4vw;
  background:url("ui/rtw-ig-hold-box.png") center/100% 100% no-repeat;
  display:flex;align-items:flex-end;justify-content:center;
  filter:drop-shadow(0 3px 4px rgba(40,80,120,.18))}
.holdBar{ position:absolute;left:3%;right:3%;bottom:8%;width:94%;height:auto;z-index:1;pointer-events:none }
.holdBox .trayInset{ position:relative;z-index:2;width:100%;display:flex;align-items:flex-end;justify-content:center;padding-bottom:17% }
.holdBox .pieceWrap img.p3d{ width:12.2vw;max-width:57px;height:auto;filter:drop-shadow(0 0.4vw 0.4vw rgba(20,40,70,.3)) }
.holdBox.dis{opacity:.6}
/* tray locks (Figma tan padlock + LVL) */
.trayLock{position:absolute;top:12%;left:50%;transform:translateX(-50%);width:40%;height:auto;object-fit:contain;display:block;z-index:3;filter:drop-shadow(0 1px 2px rgba(60,40,0,.3))}
.trayLockLvl{position:absolute;top:72%;left:0;right:0;text-align:center;font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;font-size:2.7vw;line-height:1;color:#9f612c;white-space:nowrap;z-index:3}

/* toasts */
#toastWrap{position:fixed;top:calc(64px + env(safe-area-inset-top));left:0;right:0;z-index:30;
  display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
.toast{display:flex;align-items:center;gap:8px;background:var(--panel2);border:1px solid var(--line);
  border-radius:14px;padding:7px 14px;font-weight:700;font-size:15px;box-shadow:var(--shadow);
  opacity:0;transform:translateY(-8px) scale(.92);transition:all .25s}
.toast.on{opacity:1;transform:none}
.toast svg{width:19px;height:19px}
.toast.gold{color:var(--accent)}

/* network status pill (top center): hidden by default, shows offline (red) / syncing (gold, pulsing dot) */
.netPill{position:fixed;top:calc(6px + env(safe-area-inset-top));left:50%;transform:translateX(-50%) translateY(-8px);z-index:32;
  display:none;align-items:center;gap:6px;opacity:0;transition:opacity .22s ease,transform .22s ease;pointer-events:none}
.netPill.show{display:flex;opacity:1;transform:translateX(-50%) translateY(0)}
.netPill .netDot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px rgba(255,211,77,.6);flex:0 0 auto}
.netPill #netPillLabel{font-size:13px;font-weight:800;letter-spacing:.2px}
.netPill.syncing .netDot{animation:netDotPulse 1.1s ease-in-out infinite}
.netPill.syncing #netPillLabel{color:var(--accent)}
.netPill.offline{border-color:#ff5e6c}
.netPill.offline .netDot{background:#ff5e6c;box-shadow:0 0 6px rgba(255,94,108,.7);animation:none}
.netPill.offline #netPillLabel{color:#ff5e6c}
@keyframes netDotPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}

/* IAP loader: dim + spinner shown on Buy until the native store sheet / Stars invoice surfaces */
#iapLoad{position:fixed;inset:0;background:rgba(13,20,34,.72);display:none;
  align-items:center;justify-content:center;z-index:240;pointer-events:auto}
#iapLoad.on{display:flex}
#iapLoad .iapSpin{width:56px;height:56px;border:5px solid rgba(255,255,255,.22);border-top-color:var(--accent,#ffd34d);
  border-right-color:var(--coral,#ff6b6b);border-radius:50%;animation:iapSpin .85s linear infinite}
#iapLoad .iapLbl{position:absolute;margin-top:96px;color:#fff;font-weight:800;font-size:14px;letter-spacing:.5px;text-shadow:0 2px 4px rgba(0,0,0,.6)}
@keyframes iapSpin{to{transform:rotate(360deg)}}

/* guiding finger for the bridge tutorial — projected onto the flashing + on the river */
#bridgeFinger{position:fixed;left:0;top:0;z-index:8;display:none;pointer-events:none;transform:translate(-5%,-95%)}
#bridgeFinger.on{display:block}
#bridgeFinger svg{width:100%;height:100%;filter:drop-shadow(0 3px 4px rgba(0,0,0,.35));animation:fingerTap 1s ease-in-out infinite;transform-origin:50% 0}
#depotFinger{position:fixed;left:0;top:0;z-index:60;display:none;pointer-events:none;transform:translate(-5%,-95%)}
#depotFinger.on{display:block}
#depotFinger svg{width:100%;height:100%;filter:drop-shadow(0 3px 5px rgba(0,0,0,.4));animation:fingerTap 1s ease-in-out infinite;transform-origin:50% 0}
.depotGuideHi{ animation:depotGuideHi 1s ease-in-out infinite; border-radius:14px }
@keyframes depotGuideHi{ 0%,100%{ box-shadow:0 0 0 3px rgba(255,206,64,.9), 0 0 14px 5px rgba(255,190,40,.55) } 50%{ box-shadow:0 0 0 6px rgba(255,206,64,1), 0 0 26px 10px rgba(255,190,40,.85) } }
@keyframes fingerTap{0%,100%{transform:translateY(0)}50%{transform:translateY(11px) scale(.93)}}
/* L2 rotation tutorial: tiny caption + tapping finger hovering over the current piece in the tray */
/* L5 place-anywhere coach banner: centred text over the play area */
#placeAnyCoach{position:fixed;left:50%;top:15%;transform:translateX(-50%);z-index:40;max-width:84vw;display:inline-block;text-align:center;font-family:'Baloo 2',system-ui,sans-serif;font-weight:600;font-size:15px;line-height:1.18;color:#141414;background:#fff;border:2px solid #fff;border-radius:14px;padding:7px 15px;box-shadow:0 4px 10px rgba(20,60,110,.28);pointer-events:none;opacity:0;transition:opacity .3s ease}   /* same white pill as 'Tap to rotate', a tad bigger */
#placeAnyCoach.on{opacity:1;animation:placeAnyBob 1.7s ease-in-out infinite}
#placeAnyCoach.firstTileLow{top:40%}   /* L1: short level, finish sits high — drop the coach into the clear field above the train */
#placeAnyCoach.guideCoach{top:12%;animation:none}   /* L1/L2 guided: static, pushed UP (pill style from the base) */
#placeAnyCoach.junctionCoach{white-space:nowrap;max-width:96vw}   /* L7: size the pill to its content so the two <br> lines never re-wrap a last word onto a 3rd line */
@keyframes placeAnyBob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-1.1vw)}}
#rotTeach{position:fixed;left:0;top:0;z-index:10;display:none;flex-direction:column;align-items:center;gap:4px;pointer-events:none;transform:translate(-5%,-95%)}   /* anchor the asset fingertip (5%,95%) on the target */
#rotTeach.on{display:flex}
#rotTeach p{position:absolute;bottom:108%;left:50%;transform:translateX(-50%);margin:0;background:#fff;color:#141414;border:2px solid #fff;border-radius:13px;padding:6px 14px;font-family:'Baloo 2',system-ui,sans-serif;font-weight:600;font-size:15px;line-height:1;white-space:nowrap;box-shadow:0 4px 10px rgba(20,60,110,.28)}
#rotTeach p:empty{display:none}   /* L4 place-anywhere reuses the finger with no label (banner carries the text) */
/* finger flipped vertically (scaleY -1) so it points DOWN; animation taps DOWNWARD in screen space */
#rotTeach svg{width:46px;height:46px;display:block;filter:drop-shadow(0 3px 4px rgba(0,0,0,.35));transform-origin:50% 50%;animation:rotFingerTap 1s ease-in-out infinite}
@keyframes rotFingerTap{0%,100%{transform:scaleY(-1) translateY(0)}50%{transform:scaleY(-1) translateY(-9px)}}
.fingerImg{width:64px;height:auto;display:block;filter:drop-shadow(0 4px 5px rgba(0,0,0,.4));transform-origin:5% 95%;animation:fingerTapImg 1s ease-in-out infinite}
@keyframes fingerTapImg{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-3px,3px) scale(.93)}}
/* L3-4 forgiving crash: "YOUR TRAIN WILL CRASH HERE" + a Try Again that lifts the bad tile */
#crashWarn{position:fixed;inset:0;z-index:46;display:none;pointer-events:none}
body:not(.inGame) #crashWarn{display:none!important}
#crashWarn.on{display:block;pointer-events:auto;background:rgba(10,8,20,.26)}
/* white guide-bubble (black font) positioned ABOVE the crashing tile; left/top set in JS */
#cwBubble{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;gap:2.8vw;
  max-width:84vw;background:#fff;border:0.7vw solid #15233f;border-radius:4.2vw;padding:3.6vw 4.8vw 4vw;
  box-shadow:0 1.2vw 0 rgba(10,30,70,.2),0 1.8vw 2.8vw rgba(0,0,0,.32);pointer-events:auto;animation:cwBubIn .22s ease-out}
@keyframes cwBubIn{from{opacity:0}to{opacity:1}}   /* opacity-only: must NOT animate transform (it would fight the translate that anchors the bubble ABOVE the tile) */
#cwBubble::after{content:"";position:absolute;left:50%;bottom:-2vw;transform:translateX(-50%);width:0;height:0;
  border-left:2.6vw solid transparent;border-right:2.6vw solid transparent;border-top:2.4vw solid #fff}
/* placed BELOW the tile when there's no room above: anchor at the top, tail points UP */
#cwBubble.below{transform:translate(-50%,0)}
#cwBubble.below::after{bottom:auto;top:-2vw;border-top:0;border-bottom:2.4vw solid #fff}
#cwLabel{text-align:center;font-family:'Baloo 2',system-ui,sans-serif;font-weight:600;font-size:4.6vw;line-height:1.18;color:#141414;white-space:normal;max-width:74vw}
#crashWarn .cwBtn{pointer-events:auto;font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;font-size:4.8vw;color:#fff;
  background:linear-gradient(180deg,#54d058,#2f9e34);border:0.6vw solid #fff;border-radius:3.6vw;padding:2.4vw 9vw;
  box-shadow:0 1vw 0 #1f7a25,0 1.5vw 1.4vw rgba(0,0,0,.28);cursor:pointer;-webkit-text-stroke:0.3vw #14233f;paint-order:stroke;text-shadow:0 0.4vw 0 #14233f}
#crashWarn .cwBtn:active{transform:translateY(3px);box-shadow:0 0.3vw 0 #1f7a25}
/* SUPER-noticeable red marker over the crashing tile; flashes 2x then holds */
#cwTileFlash{position:absolute;width:18vw;height:18vw;transform:translate(-50%,-50%) rotate(45deg);border-radius:2.6vw;
  border:1.2vw solid #ff2a2a;background:rgba(255,42,42,.26);box-shadow:0 0 4.5vw 1vw rgba(255,40,40,.65),inset 0 0 3vw rgba(255,40,40,.55);opacity:0;pointer-events:none}
#cwTileFlash.flash{animation:cwTileFlash .44s ease-in-out 2 forwards}   /* flash 2x, then HOLD the red mark */
@keyframes cwTileFlash{0%{opacity:0;transform:translate(-50%,-50%) rotate(45deg) scale(.62)}45%{opacity:1;transform:translate(-50%,-50%) rotate(45deg) scale(1.15)}100%{opacity:.85;transform:translate(-50%,-50%) rotate(45deg) scale(1)}}
/* ftue */
#ftue{position:absolute;left:50%;bottom:calc(166px + env(safe-area-inset-bottom));transform:translateX(-50%);
  max-width:86%;background:var(--panel2);border:1px solid var(--line);border-radius:18px;
  padding:10px 16px;display:none;align-items:center;gap:10px;box-shadow:var(--shadow)}
#ftue.on{display:flex;animation:pop .3s}
#ftue svg{width:34px;height:34px;flex:0 0 auto}
#ftue p{margin:0;font-size:15px;font-weight:700;line-height:1.25}
@keyframes pop{0%{transform:translateX(-50%) scale(.8);opacity:0}}

/* dynamite bar */
#dynBar{position:absolute;left:50%;bottom:calc(166px + env(safe-area-inset-bottom));transform:translateX(-50%);
  background:var(--panel2);border:1px solid var(--coral);border-radius:18px;padding:9px 14px;
  display:none;align-items:center;gap:10px;box-shadow:var(--shadow);max-width:88%}
#dynBar.on{display:flex;animation:pop .25s}
#dynBar p{margin:0;font-size:14px;font-weight:700}
#dynBar button{background:var(--coral);border:none;border-radius:12px;color:#fff;
  font-family:inherit;font-weight:800;font-size:13px;padding:7px 12px}

/* modals */
.modal{position:fixed;inset:0;z-index:20;display:none;align-items:center;justify-content:center;
  background:rgba(7,11,20,.62)}
.modal.on{display:flex}
/* The always-present full-screen WebGL canvas (#c) poisons backdrop-filter on Chromium (desktop web +
   Android WebView): the blur samples the GPU-composited canvas layer (a dark 3D frame) instead of the
   opaque menu painted on top of it, so a dark "box" appears behind popups. (Headless/software rendering
   composites differently and never shows it — which is why this slipped past earlier.) Kill
   backdrop-filter everywhere; every element that used it already carries a solid background, so the dim
   becomes a plain solid scrim instead of frosted glass. */
*{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.card{width:min(86vw,340px);background:linear-gradient(180deg,#16203a,#101a30);border:1px solid var(--line);
  border-radius:24px;padding:24px 22px;text-align:center;box-shadow:0 18px 50px rgba(0,0,0,.5);animation:pop .3s}
.card h1{margin:0 0 4px;font-size:26px;font-weight:800}
.card h2{margin:0 0 8px;font-size:22px;font-weight:800}
.card .sub{color:var(--sub);font-size:14px;font-weight:600;margin:0 0 14px}
.bigDist{font-size:44px;font-weight:800;color:var(--accent);line-height:1.05;margin:8px 0 2px}
.statRow{display:flex;justify-content:center;gap:8px;align-items:center;color:var(--sub);font-weight:700;font-size:14px;margin:3px 0}
.statRow svg{width:17px;height:17px}
.btn{display:block;width:100%;border:none;border-radius:16px;padding:13px;font-family:inherit;
  font-size:17px;font-weight:800;margin-top:12px;box-shadow:var(--shadow);color:#542d00;background:linear-gradient(180deg,#ffd34d,#fdb52e)}
.btn:active{transform:scale(.97)}
.btn.ghost{background:var(--panel);border:1px solid var(--line);color:var(--ink)}
.btn.coral{background:linear-gradient(180deg,#ff8473,#ff5d57);color:#fff}
#splashArt{margin:4px auto 8px;width:150px;height:120px}
#splash .card{background:linear-gradient(180deg,#18244233,#101a30ee),linear-gradient(180deg,#16203a,#101a30)}
.newBest{display:none;color:var(--green);font-weight:800;font-size:16px;margin:2px 0}
.newBest.on{display:block;animation:pop .4s}
#verTag{position:absolute;top:calc(env(safe-area-inset-top) + 152px);right:14px;font-size:11px;color:#ffffff55;font-weight:700}

/* danger edges */
#dangerVig{position:fixed;inset:0;pointer-events:none;z-index:7;opacity:0;transition:opacity .35s;
  background:linear-gradient(90deg,rgba(255,60,60,.45) 0%,transparent 16%,transparent 84%,rgba(255,60,60,.45) 100%)}
#dangerVig.on{opacity:1;animation:dangerPulse .85s ease-in-out infinite}
@keyframes dangerPulse{50%{opacity:.3}}

/* bottom nav */
#navBar{position:fixed;left:0;right:0;bottom:0;z-index:18;display:flex;justify-content:space-around;align-items:stretch;
  background:rgba(10,15,26,.96);border-top:1px solid var(--line);padding:6px 8px calc(7px + env(safe-area-inset-bottom));backdrop-filter:blur(10px)}
body.inGame #navBar{display:none}
.tab-btn{flex:1;max-width:130px;display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:none;
  color:#7e8eab;font-family:inherit;font-weight:800;font-size:11px;letter-spacing:.4px;padding:6px 4px;border-radius:14px}
.tab-btn svg{width:24px;height:24px}
.tab-btn.active{color:var(--accent)}
.tab-btn.active svg{animation:navHop .5s ease}
@keyframes navHop{40%{transform:translateY(-4px) scale(1.12)}}
.tab-btn:active{transform:scale(.94)}
/* ===== UNIVERSAL TAP FEEDBACK — every button gets a quick press-down + spring-back pulse on click.
   Uses the independent `scale` property (composes with transform-based positioning, never clobbers
   translateX(-50%) centering) and a keyframe `animation` (so it never overrides existing `transition`
   declarations like .tab-btn's). Toggled by a global delegated pointerdown (see universalTap()). ===== */
@keyframes tapPress{ 0%{scale:1} 16%{scale:.88} 52%{scale:1.03} 100%{scale:1} }
.tapping{ animation:tapPress .2s cubic-bezier(.3,.7,.4,1); }
/* press flash for transparent hit-area buttons (settings/pause card) whose graphic is baked into the
   card background — scaling an invisible <button> shows nothing, so darken the button footprint instead */
.setHit{ border-radius:4vw }
.setHit.tapping::after{ content:"";position:absolute;inset:4%;border-radius:inherit;background:rgba(8,26,52,.22);
  pointer-events:none;animation:setHitInk .22s ease-out }
@keyframes setHitInk{ 0%{opacity:0;scale:1} 20%{opacity:1} 100%{opacity:0;scale:.96} }

/* full screens over the idle 3D world */
.scr{position:fixed;inset:0;z-index:14;display:none;flex-direction:column;align-items:center;overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:linear-gradient(180deg,rgba(9,14,25,.82),rgba(9,14,25,.95) 70%);backdrop-filter:blur(7px);
  padding:calc(16px + env(safe-area-inset-top)) 18px calc(88px + env(safe-area-inset-bottom))}
.scr.on{display:flex}
.scr h1{margin:6px 0 2px;font-size:30px;text-align:center}
.scr .sub{color:var(--sub);font-weight:700;font-size:14px;margin:0 0 8px;text-align:center}
#lobby #splashArt{width:150px;height:120px;margin:4px 0}
.pillRow{display:flex;gap:10px;margin:8px 0;flex-wrap:wrap;justify-content:center}
.bigBtn{display:flex;align-items:center;justify-content:center;gap:10px;width:min(78vw,300px);border:none;border-radius:20px;
  padding:16px;font-family:inherit;font-size:21px;font-weight:800;color:#542d00;background:linear-gradient(180deg,#ffd34d,#fdb52e);
  box-shadow:0 8px 24px rgba(253,181,46,.35);margin-top:14px}
.bigBtn:active{transform:scale(.96)}
.ghostBtn{display:flex;align-items:center;justify-content:center;gap:8px;width:min(78vw,300px);border:1px solid var(--line);
  border-radius:18px;padding:12px;font-family:inherit;font-size:15px;font-weight:800;color:var(--ink);background:var(--panel);margin-top:10px}
.ghostBtn svg{width:18px;height:18px}
.ghostBtn:active{transform:scale(.96)}
.cardBox{width:min(88vw,340px);background:var(--panel2);border:1px solid var(--line);border-radius:20px;padding:14px;margin-top:12px}
.cartCard{display:flex;align-items:center;gap:12px;padding:11px 6px;border-bottom:1px solid var(--line)}
.cartCard:last-child{border-bottom:none}
.cartCard.locked{opacity:.45}
.cartArt{width:64px;height:46px;flex:0 0 auto}
.cartInfo{flex:1}
.cartInfo b{font-size:16px}
.cartInfo span{display:block;color:var(--sub);font-size:12px;font-weight:700}
.buyBtn{border:none;border-radius:13px;background:linear-gradient(180deg,#ffd34d,#fdb52e);color:#542d00;
  font-family:inherit;font-weight:800;font-size:14px;padding:9px 13px;display:flex;align-items:center;gap:5px}
.buyBtn svg{width:15px;height:15px}
.buyBtn:active{transform:scale(.94)}
.buyBtn.cant{filter:saturate(.35);opacity:.6}
.ownTag{color:var(--green);font-weight:800;font-size:13px;padding:6px 4px}
.statLine{display:flex;justify-content:space-between;align-items:center;padding:9px 6px;border-bottom:1px solid var(--line);font-weight:700}
.statLine:last-child{border-bottom:none}
.statLine .lab{color:var(--sub);font-size:14px;display:flex;gap:8px;align-items:center}
.statLine .lab svg{width:17px;height:17px}
.statLine .val{font-size:16px}
.playCost{display:inline-flex;align-items:center;gap:4px;font-size:14px;background:#00000026;border-radius:11px;padding:3px 9px;margin-left:10px;vertical-align:middle}
.playCost svg{width:15px;height:15px}
.slotPrice{display:flex;align-items:center;gap:4px;font-weight:800;color:var(--accent);font-size:14px}
.slotPrice svg{width:15px;height:15px}
.slotPrice i{font-style:normal;color:var(--sub);font-size:10px;font-weight:700;margin-left:2px}
.slotPrice.dim{color:var(--sub);font-size:24px;font-weight:700}
.cartCard{cursor:pointer;border-radius:12px}
.cartCard:active{background:rgba(255,255,255,.05)}
/* full-screen shop: section header + a 2-col grid of vertical SKU cards */
/* Figma shop: light-blue section banner */
.shopHdr{display:flex;align-items:center;justify-content:center;height:11vw;max-height:54px;margin:3.5vw auto 3vw;width:min(90vw,400px);
  background:#4ed1fa;border:2px solid #1c6f9e;border-radius:5vw;
  font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;color:#fff;-webkit-text-stroke:0.42vw #000;paint-order:stroke;text-shadow:0 2px 0 #000;font-size:5.2vw;text-transform:uppercase}
.skuGrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:2.6vw}
/* Figma shop card: gold frame, cream icon panel, green price button (used by gold packs + offers + boosters) */
.skuCard{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.4vw;
  padding:2vw 2vw 2.6vw;border-radius:4.5vw;background:#efb13f;border:2px solid #161616;box-shadow:0 4px 0 #b67c18,0 7px 10px rgba(70,35,0,.25);cursor:pointer;transition:transform .12s}
.skuCard:active{transform:translateY(2px)}
.skuCard.feature{box-shadow:0 0 0 2px #ffe9a8,0 4px 0 #b67c18,0 7px 14px rgba(255,180,40,.4)}
.skuCard.feature::before{content:attr(data-badge);position:absolute;top:-2.6vw;left:50%;transform:translateX(-50%);white-space:nowrap;z-index:3;
  background:linear-gradient(180deg,#ff9d3a,#f5791f);color:#fff;font-size:2.7vw;font-weight:400;font-family:'Lilita One','Baloo 2',sans-serif;-webkit-text-stroke:0.22vw #000;paint-order:stroke;
  padding:0.6vw 2.4vw;border-radius:3vw;border:1.5px solid #000;box-shadow:0 2px 4px rgba(120,50,0,.4)}
.skuCard .skuName{order:-1;font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;font-size:4.3vw;line-height:1;color:#fff;-webkit-text-stroke:0.38vw #000;paint-order:stroke;text-shadow:0 1px 0 #000}
.skuCard .skuIco{order:0;width:100%;height:18vw;max-height:92px;background:#fce8cf;border:2px solid #e0801c;border-radius:3.6vw;display:flex;align-items:center;justify-content:center;padding:1.4vw}
.skuCard .skuIco svg{width:64%;height:64%}
.skuCard .skuIco img{width:74%;height:74%;object-fit:contain}
.skuCard .skuDesc{order:1;font-size:2.9vw;font-weight:800;color:#7a4a12;line-height:1.1;min-height:0}
.skuBuy{order:2;margin-top:0.6vw;display:inline-flex;align-items:center;justify-content:center;gap:1vw;font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;font-size:3.7vw;color:#fff;
  background:linear-gradient(180deg,#79e35c,#4cbf38);border:2px solid #161616;box-shadow:0 3px 0 #2f9a2a;border-radius:3vw;padding:1.5vw 2.6vw;-webkit-text-stroke:0.26vw #000;paint-order:stroke;text-shadow:0 1px 0 #000}
.skuBuy svg{width:3.6vw;height:3.6vw}
.skuBuy.cant{filter:grayscale(.5);opacity:.7}
.skuBuy s{opacity:.55;font-weight:700;margin-right:1px}
.skuCard.owned{opacity:.8;cursor:default}
body:not(.inGame) #hud{display:none}
body.lvlNoGear #pauseBtn{display:none}   /* L1-L2: no settings gear */
body.lvlNoGold #topBar .igGoldBar{display:none}  /* L1-L5: no gold top bar (id-specificity to beat #topBar .igGoldBar) */
body.resultOpen #hud{display:none}   /* result modal up: hide the in-game HUD so it doesn't double the top bar */
.pill.bump{animation:bump .4s}
#trainChain{display:flex;gap:4px;align-items:flex-end;justify-content:center;margin:4px 0 10px;flex-wrap:wrap;
  padding:14px 10px 12px;border-radius:14px;background:linear-gradient(180deg,#eaf4fb,#dcebf6);
  border-bottom:5px solid #b9894f;position:relative}
#trainChain:after{content:"";position:absolute;left:8px;right:8px;bottom:6px;height:4px;border-radius:2px;
  background:repeating-linear-gradient(90deg,#c4ccd4 0,#c4ccd4 13px,transparent 13px,transparent 18px)}
#trainChain svg{height:38px}
#lvlPickRow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.starRow{display:flex;justify-content:center;gap:4px;margin:4px 0}
.starRow svg{width:26px;height:26px}
.starRow.big{margin:10px 0}
.starRow.big svg{width:44px;height:44px}
#lvlPrev:disabled,#lvlNext:disabled{opacity:.3}

/* fx overlays */
#vignette{position:fixed;inset:0;pointer-events:none;z-index:8;opacity:0;transition:opacity .4s;
  background:radial-gradient(ellipse at center,transparent 52%,rgba(70,140,255,.38) 100%)}
#vignette.on{opacity:1}
#flash{position:fixed;inset:0;pointer-events:none;z-index:9;opacity:0;background:rgba(255,80,60,.32)}
#flash.go{animation:flashA .5s}
@keyframes flashA{0%{opacity:1}100%{opacity:0}}
.confetti{position:fixed;width:9px;height:13px;z-index:30;pointer-events:none;border-radius:3px;animation:confA 1.5s ease-in forwards}
@keyframes confA{0%{transform:translateY(0) rotate(0)}100%{transform:translateY(105vh) rotate(560deg);opacity:.6}}

/* === LOGO WORDMARK title treatment (matches the splash logo): chunky Baloo bubble letters,
   thick blue outline, cream/gold fill, 3D bevel + soft drop shadow. Use on light/varied bg. === */
.wm{font-family:'Baloo 2',system-ui,sans-serif;font-weight:800;line-height:1.06;letter-spacing:.5px;color:#fff4e0;-webkit-text-stroke:.17em #2f6cc4;paint-order:stroke fill;text-shadow:0 .04em 0 #2a5cae,0 .08em 0 #20509a,0 .12em 0 #20509a,0 .17em .1em rgba(16,40,90,.4)}
.wm.gold{color:#ffc233}
/* boot splash */
#bootSplash{position:fixed;inset:0;z-index:100;background:#0d1422;transition:opacity .45s}
#bootSplash.off{opacity:0;pointer-events:none}
#bootSplash.off *{animation-play-state:paused}   /* idle when hidden between level transitions */
#bootArt{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* splash LOGO wordmark + Dumpling-style masked sweep-of-light shine */
.splash-logo-wrap{position:absolute;left:50%;top:calc(env(safe-area-inset-top,0px) + 3vh);width:min(70vw,370px);pointer-events:none;transform:translateX(-50%);filter:drop-shadow(0 8px 16px rgba(18,44,82,.30))}
.splash-logo-wrap img{width:100%;height:auto;display:block}
.splash-logo-wrap::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.45) 47%,rgba(255,255,255,.9) 50%,rgba(255,255,255,.45) 53%,transparent 62%);background-size:260% 100%;background-position:220% 0;mix-blend-mode:screen;-webkit-mask:url("rtw-logo.png") center/100% 100% no-repeat;mask:url("rtw-logo.png") center/100% 100% no-repeat;animation:splashLogoShine 2.2s linear infinite;pointer-events:none}
@keyframes splashLogoShine{from{background-position:220% 0}to{background-position:-120% 0}}
#bootBarWrap{position:absolute;left:0;right:0;height:26px;bottom:calc(7.5% + env(safe-area-inset-bottom))}
/* loading "progress bar" = a horizontal RAILROAD TRACK (rails + wooden ties, matching the in-game .lvlTrack),
   with the little train riding along it as it loads. */
/* same clean white-rail look as the in-game .lvlTrack (vertical hexagon path), rotated horizontal:
   two white rails + wooden ties + a soft light base — no heavy ballast. */
#bootBar{position:absolute;left:-20vw;right:-20vw;top:0;height:26px;border-radius:0;box-shadow:0 3px 8px rgba(20,60,110,.26);overflow:visible;
  background:
    linear-gradient(180deg,transparent 4px,#ffffff 4px,#ffffff 7px,transparent 7px,transparent 19px,#ffffff 19px,#ffffff 22px,transparent 22px),
    repeating-linear-gradient(90deg,#bd894f 0,#bd894f 7px,#a9743c 7px,#a9743c 8px,transparent 8px,transparent 26px),
    linear-gradient(180deg,rgba(255,255,255,.48),rgba(255,255,255,.18))}
/* minimalistic: no fill bar — the train crossing the rail IS the progress */
#bootFill{display:none}
#bootTrain{position:absolute;top:-13px;left:-10%;width:40px;height:30px;transition:left .26s linear;filter:drop-shadow(0 3px 4px rgba(0,0,0,.4));overflow:visible;animation:bootChug .5s ease-in-out infinite}
@keyframes bootChug{0%,100%{transform:translateX(-55%) translateY(0)}50%{transform:translateX(-55%) translateY(-1.6px)}}
#bootTrain .puff{animation:bootPuff 1.15s ease-out infinite}
#bootTrain .p2{animation-delay:.38s}
#bootTrain .p3{animation-delay:.76s}
@keyframes bootPuff{
  0%{opacity:0;transform:translate(4px,2px) scale(.5)}
  25%{opacity:.95}
  100%{opacity:0;transform:translate(-7px,-6px) scale(1.5)}
}
#bootMsg{position:absolute;left:0;right:0;bottom:calc(3.4% + env(safe-area-inset-bottom));text-align:center;font-weight:800;font-size:13px;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.7)}
/* ===== FPS meter (admin-toggled, hidden by default) ===== */
#fpsMeter{position:fixed;top:calc(env(safe-area-inset-top) + 6px);left:6px;z-index:99;display:none;flex-direction:column;align-items:flex-start;gap:0;
  padding:3px 7px 4px;border-radius:8px;background:rgba(8,14,26,.62);color:#7CFFA0;font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  line-height:1.15;pointer-events:none;-webkit-user-select:none;user-select:none;backdrop-filter:blur(2px);box-shadow:0 1px 4px rgba(0,0,0,.4)}
#fpsMeter.on{display:flex}
#fpsMeter b{font-size:15px;font-weight:800;letter-spacing:.3px}
#fpsMeter b.warn{color:#ffd24a} #fpsMeter b.bad{color:#ff6a6a}
#fpsMeter i{font-style:normal;font-size:9.5px;opacity:.82;color:#bfe9ff}
#fpsMeter u{text-decoration:none;font-size:9.5px;opacity:.7;color:#cfd8e6}
/* ===== admin cheats (hidden) ===== */
#verTag{padding:7px 9px;cursor:pointer;-webkit-user-select:none;user-select:none}
.admCard{position:relative;text-align:left;max-height:84vh;overflow-y:auto;width:min(90vw,360px)}
.admX{position:absolute;top:10px;right:12px;width:34px;height:34px;border-radius:50%;border:none;background:var(--panel);color:var(--ink);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow)}
.admX svg{width:18px;height:18px}
.admCard h2{margin:2px 0 0;font-size:24px;font-weight:800}
#admLock{text-align:center}
.admInput{width:100%;box-sizing:border-box;border:1px solid var(--line);background:var(--panel2);color:var(--ink);border-radius:14px;padding:12px;font-family:inherit;font-size:16px;font-weight:700;margin:8px 0;text-align:center}
.admMsg{color:#ff6b6b;font-weight:700;font-size:13px;margin-top:6px;min-height:16px;text-align:center}
.admSec{font-weight:800;font-size:12px;letter-spacing:.4px;color:var(--accent);margin:16px 2px 8px;text-transform:uppercase}
.admG3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.admBtn{border:1px solid var(--line);background:var(--panel2);color:var(--ink);border-radius:14px;padding:10px 6px;font-family:inherit;font-weight:800;font-size:14px;display:flex;flex-direction:column;align-items:center;gap:2px;box-shadow:var(--shadow)}
.admBtn:active{transform:scale(.95)}
.admBtn svg{width:26px;height:26px}
.admBtn i{font-style:normal;font-size:11px;color:var(--sub);font-weight:700}
.admGoldNow{display:flex;align-items:center;gap:6px;margin:10px 2px 2px;font-weight:700;color:var(--sub)}
.admGoldNow svg{width:20px;height:20px}
.admGoldNow b{color:var(--accent);margin-left:auto;font-size:18px}
.admStep{display:flex;align-items:center;justify-content:center;gap:20px;margin:4px 0}
.admStep #admLvlNum{font-size:30px;font-weight:800;min-width:56px;text-align:center}
.admFoot{margin-top:16px;font-size:11px;color:var(--sub);text-align:center;opacity:.85}

/* ============================================================
   CUTE SKY-BLUE CANDY RE-SKIN (v0.7) — overrides everything above
   ============================================================ */
:root{
  --bg0:#5bbef7; --panel:#ffffff; --panel2:#ffffff;
  --line:rgba(40,100,160,.14); --ink:#1c3f63; --sub:#6f93b4;
  --accent:#ffc01e; --coral:#ff5e6c; --green:#3fcf6a; --blue:#3aa6f0; --purple:#a86be8;
  --rad:18px; --shadow:0 6px 16px rgba(40,100,160,.18);
}
html,body{background:#7cc6f7}
body{background:linear-gradient(180deg,#7cc6f7 0%,#a6dcff 55%,#c9ece0 100%)}
/* bright menu screens */
.scr{background:radial-gradient(130% 55% at 50% 0%,rgba(255,255,255,.42),rgba(255,255,255,0) 60%),linear-gradient(180deg,#6cc8fb 0%,#9fd9ff 55%,#bfeaff 100%);backdrop-filter:none;padding-bottom:calc(104px + env(safe-area-inset-bottom))}
.scr h1{color:#11436f;text-shadow:0 2px 0 rgba(255,255,255,.55)}
.scr .sub{color:#3d6c93}
#verTag{color:rgba(17,67,111,.5)}
/* white sticker pills + round buttons */
.pill{background:#fff;border:2px solid #fff;box-shadow:0 4px 12px rgba(40,100,160,.18);backdrop-filter:none}
.pill b{color:var(--ink)}
.pill.small span{color:#6f93b4}
.cbtn{background:#fff;border:2px solid #fff;box-shadow:0 4px 12px rgba(40,100,160,.18);color:var(--ink)}
.boost{background:none;border:0;box-shadow:none}
.boost .cnt{border-color:#fff}
#rotBadge{border:0;background:url("ui/rtw-ig-rotate.png?v=86") center/100% 100% no-repeat;box-shadow:none}
.slot{background:url("ui/rtw-ig-slot.png?v=86") center/100% 100% no-repeat;border:0;box-shadow:none;filter:drop-shadow(0 3px 4px rgba(40,80,120,.22))}
.slot.big{background:url("ui/rtw-ig-slot-active.png?v=87") center/100% 100% no-repeat}
.slot.mini{width:76px;height:76px;box-sizing:border-box;padding:5px;justify-content:center;position:relative}
.slot label{color:#9f612c}
.slot.empty .pieceWrap{border:0}
/* chunky candy buttons (white outline + solid bottom bevel) */
.btn{border:3px solid #fff;color:#7a4400;background:linear-gradient(180deg,#ffdb55,#ffc01e);box-shadow:0 5px 0 #e2950e,0 10px 16px rgba(226,149,14,.28)}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 #e2950e,0 5px 10px rgba(226,149,14,.28)}
.btn.ghost{background:#eaf5ff;color:var(--ink);box-shadow:0 4px 0 #bcd6ee,0 8px 14px rgba(60,120,180,.2)}
.btn.ghost:active{transform:translateY(3px);box-shadow:0 1px 0 #bcd6ee}
.btn.coral{background:linear-gradient(180deg,#ff8088,#ff5160);color:#fff;box-shadow:0 5px 0 #d83a48,0 10px 16px rgba(216,58,72,.28)}
.btn.coral:active{transform:translateY(3px);box-shadow:0 2px 0 #d83a48}
.btn.green{background:linear-gradient(180deg,#86df6a,#56c44a);color:#fff;box-shadow:0 5px 0 #3a9b34,0 10px 16px rgba(58,155,52,.28)}
.btn.green:active{transform:translateY(3px);box-shadow:0 2px 0 #3a9b34}
.bigBtn{border:3px solid #fff;color:#7a4400;background:linear-gradient(180deg,#ffdb55,#ffc01e);box-shadow:0 6px 0 #e2950e,0 12px 20px rgba(226,149,14,.3)}
.bigBtn:active{transform:translateY(4px);box-shadow:0 2px 0 #e2950e,0 6px 12px rgba(226,149,14,.3)}
.ghostBtn{background:#eaf5ff;border:3px solid #fff;color:var(--ink);box-shadow:0 4px 0 #bcd6ee,0 8px 14px rgba(60,120,180,.2)}
.ghostBtn:active{transform:translateY(3px);box-shadow:0 1px 0 #bcd6ee}
.buyBtn{border:2px solid #fff;color:#7a4400;background:linear-gradient(180deg,#ffdb55,#ffc01e);box-shadow:0 3px 0 #e2950e}
.buyBtn:active{transform:translateY(2px);box-shadow:0 1px 0 #e2950e}
/* white cards */
.card{background:#fff;border:3px solid #fff;border-radius:28px;box-shadow:0 16px 40px rgba(20,70,120,.32),0 0 0 5px rgba(150,205,255,.3)}
.card .sub{color:var(--sub)}
.bigDist{color:#f59000}
#splash .card{background:#fff}
.modal{background:rgba(10,30,62,.72)}
/* list boxes / rows / toasts */
.cardBox{background:#eef7ff;border:2px solid #fff;box-shadow:0 4px 12px rgba(40,100,160,.12)}
.cartCard:active{background:rgba(40,120,200,.06)}
.toast{background:#fff;border:2px solid #fff;color:var(--ink);box-shadow:0 6px 16px rgba(40,100,160,.22)}
.toast.gold{color:#e8920a}
#ftue{background:#fff;border:2px solid #fff}
#ftue p{color:var(--ink)}
#dynBar{background:#fff;border:2px solid var(--coral)}
#dynBar p{color:var(--ink)}
/* bright bottom nav (pixel-flow style: rounded top, raised active tab) */
#navBar{background:#fff;border-top:none;border-radius:26px 26px 0 0;box-shadow:0 -5px 20px rgba(40,100,160,.16);backdrop-filter:none;overflow:visible;padding-top:10px}
.tab-btn{color:#9bb4cf;transition:transform .16s,background .16s}
.tab-btn.active{color:#fff;transform:translateY(-12px);background:linear-gradient(180deg,#5cc0fa,#3aa6f0);border:3px solid #fff;border-radius:20px;padding:9px 12px;box-shadow:0 5px 0 #2b86d1,0 10px 14px rgba(40,100,160,.32)}
.tab-btn.active svg{width:26px;height:26px}

/* ===== upward stage map (levels screen) ===== */
#levelsScr{padding:0 0 calc(112px + env(safe-area-inset-bottom));overflow:hidden;align-items:stretch;justify-content:flex-start}
#levelsScr #lvlTitle,#levelsScr #lvlSubTxt{display:none}
#lvlTop{position:relative;z-index:3;display:flex;flex-direction:column;gap:5px;width:100%;
  padding:calc(12px + env(safe-area-inset-top)) 14px 8px;background:linear-gradient(180deg,#6cc8fb,rgba(108,200,251,0))}
.lvlTopRow{display:flex;align-items:center;gap:8px;width:100%}
#lvlWorld{text-align:center;font-size:20px;margin-top:2px}
/* conductor's pass */
#metaRow{display:flex;gap:7px;width:100%;align-items:stretch;margin-top:2px}
#roadBtn{position:relative;width:48px;border-radius:16px;background:#fff;border:2px solid #fff;
  box-shadow:0 4px 12px rgba(40,100,160,.18);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-family:inherit}
#roadBtn svg{width:24px;height:24px}
#roadBtn i{font-style:normal;font-size:10px;font-weight:800;color:#8a5e00;background:#fff6dd;border-radius:8px;padding:0 6px}
#passBar{display:flex;align-items:center;gap:9px;flex:1;min-width:0;background:#fff;border:2px solid #fff;
  border-radius:16px;padding:7px 12px;box-shadow:0 4px 12px rgba(40,100,160,.18);font-family:inherit;cursor:pointer;position:relative}
#passBar .pIc{width:28px;height:28px;flex:0 0 auto}
#passBar .pCol{flex:1;min-width:0;display:block;text-align:left}
#passBar .pName{display:block;font-size:12px;font-weight:800;color:#2b4a66;letter-spacing:.4px}
#passBar .pTrack{display:block;height:9px;border-radius:6px;background:#e3edf6;margin-top:4px;overflow:hidden}
#passBar .pFill{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#ffd34d,#fdb52e);transition:width .4s}
#passBar .pTier{font-size:13px;font-weight:800;color:#b27c14;flex:0 0 auto}
#passBar .pDot{position:absolute;top:-4px;right:-4px;width:15px;height:15px;border-radius:50%;background:#ff6b6b;border:2.5px solid #fff;display:none}
#passBar.ready .pDot{display:block;animation:passPulse 1.2s infinite}
#passBar.bump{animation:passBump .5s}
@keyframes passBump{30%{transform:scale(1.05)}}
@keyframes passPulse{50%{transform:scale(1.3)}}
#passLanes{overflow-y:auto;margin:6px 0;padding:2px}
.passHead{display:flex;gap:8px;margin:6px 0 5px}
.passHead i{width:26px;flex:0 0 auto}
.passHead span{flex:1;font-size:11px;font-weight:800;letter-spacing:1px;color:#6f93b4;text-transform:uppercase;text-align:center}
.passRow{display:flex;gap:8px;align-items:stretch;margin-bottom:7px}
.passT{width:26px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;color:#a9bccf}
.passT.cur{color:#b27c14}
.passChip{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;border-radius:12px;border:2px solid #e2eaf4;
  background:#f2f6fb;padding:7px 4px;font-weight:800;font-size:13px;position:relative;color:#2b4a66;min-width:0}
.passChip svg{width:19px;height:19px;flex:0 0 auto}
.passChip.prem{background:#fff6dd;border-color:#ffe9b8}
.passChip.ready{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,211,77,.35)}
.passChip.done{opacity:.45}
.passChip.dim{opacity:.55}
.passChip .pk{position:absolute;right:4px;top:4px;width:13px;height:13px}
/* full-screen Conductor Pass (not a popup) */
#passModal.on{padding:0}
.passFull{position:absolute;inset:0;width:100%;height:100%;display:flex;flex-direction:column;background:linear-gradient(180deg,#eef6ff,#dcebfb);overflow:hidden}
.passHero{position:relative;flex:0 0 auto;text-align:center;color:#fff;padding:calc(env(safe-area-inset-top) + 14px) 16px 16px;
  background:linear-gradient(135deg,#4f86c6,#2b4a66);box-shadow:0 5px 16px rgba(30,70,120,.4);border-bottom:3px solid rgba(255,255,255,.25)}
.passHero h2{color:#fff;margin:4px 0 5px;font-size:24px}
.passHeroIco{width:56px;height:56px;margin:0 auto;filter:drop-shadow(0 3px 4px rgba(0,0,0,.25))}
.passHero #passSeasonChip{background:rgba(255,255,255,.22);color:#fff}
.passHero .admX{color:#fff;top:calc(env(safe-area-inset-top) + 10px);right:12px}
.passBody{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:10px 14px 10px;max-width:540px;width:100%;margin:0 auto}
.passBody .passRow{margin-bottom:9px}
.passBody .passChip{padding:11px 6px}
.passFoot{flex:0 0 auto;padding:8px 16px calc(env(safe-area-inset-bottom) + 12px);background:#fff;box-shadow:0 -3px 14px rgba(30,70,120,.14);max-width:540px;width:100%;margin:0 auto;box-sizing:border-box}
.passFoot .btn{margin:6px 0 0}
/* world-complete celebration (full screen) */
.worldCel{position:absolute;inset:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px;text-align:center;
  background:radial-gradient(circle at 50% 34%,#fff7da,#ffd97a 55%,#fdb52e)}
.worldCelTrophy{width:118px;height:118px;animation:wTrophyPop .6s cubic-bezier(.2,1.4,.4,1)}
.worldCelTrophy svg{width:100%;height:100%;filter:drop-shadow(0 6px 8px rgba(150,90,0,.35))}
#worldCelTitle{font-size:27px;color:#7a4f00;margin:2px}
#worldCelSub{color:#9a6b15;font-weight:800;margin:0 0 2px}
.worldCelGifts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:6px 0 4px}
.wGift{display:flex;flex-direction:column;align-items:center;gap:2px;background:#fff;border:2.5px solid #fff;border-radius:16px;padding:10px 12px;min-width:62px;
  box-shadow:0 4px 0 #e6b24a,0 8px 14px rgba(150,90,0,.25);animation:wGiftPop .5s backwards}
.wGift svg{width:34px;height:34px}
.wGift b{font-size:14px;font-weight:800;color:#2b4a66}
#worldCelBtn{min-width:200px;margin-top:8px}
@keyframes wTrophyPop{0%{transform:scale(0) rotate(-18deg)}100%{transform:scale(1) rotate(0)}}
@keyframes wGiftPop{0%{transform:scale(0) translateY(18px);opacity:0}100%{transform:scale(1) translateY(0);opacity:1}}
/* === redesigned level-complete (win) modal === */
.winCard{width:min(88vw,360px);padding:18px 20px 22px;overflow:visible;position:relative;animation:winCardPop .4s cubic-bezier(.2,1.4,.4,1)}
@keyframes winCardPop{0%{transform:scale(.7);opacity:0}100%{transform:scale(1);opacity:1}}
.winTrophyWrap{position:relative;width:122px;height:116px;margin:4px auto 2px;display:flex;align-items:center;justify-content:center}
/* DD-style fireworks: colored shards burst upward over the modal */
.winFx{position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none;overflow:visible;z-index:6}
.winFx i{position:absolute;left:var(--x);top:56%;width:var(--s);height:var(--s);background:var(--c);border-radius:2px;opacity:0;will-change:transform,opacity;animation:winFxFly var(--d) var(--dl) cubic-bezier(.22,.61,.36,1) forwards}
@keyframes winFxFly{0%{opacity:0;transform:translate3d(0,0,0) rotate(0)}12%{opacity:1}100%{opacity:0;transform:translate3d(var(--dx),var(--dy),0) rotate(var(--r))}}
/* trophy SHINE: a diagonal glint sweeping across the cup (screen-blended so it only catches the gold) */
.winShine{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.92) 50%,transparent 58%);background-size:250% 100%;background-position:200% 0;mix-blend-mode:screen;animation:winShineSweep 3.2s ease-in-out infinite}
@keyframes winShineSweep{0%{background-position:200% 0}55%,100%{background-position:-90% 0}}
/* twinkling 4-point sparkles around the trophy */
.winSparkles{position:absolute;inset:-28px;pointer-events:none}
.winSparkles .spark{position:absolute;background:#fffefb;clip-path:polygon(50% 0,59% 41%,100% 50%,59% 59%,50% 100%,41% 59%,0 50%,41% 41%);opacity:.4;transform:scale(.5);animation:winTwinkle 2.1s ease-in-out infinite;filter:drop-shadow(0 0 5px rgba(255,168,46,.95))}
@keyframes winTwinkle{0%,100%{opacity:.4;transform:scale(.5) rotate(0)}50%{opacity:1;transform:scale(1) rotate(20deg)}}
.spark.s1{width:23px;height:23px;top:8px;left:2px;animation-delay:0s}
.spark.s2{width:15px;height:15px;top:2px;right:6px;animation-delay:.5s}
.spark.s3{width:13px;height:13px;top:64px;left:-2px;animation-delay:1s}
.spark.s4{width:19px;height:19px;top:54px;right:0;animation-delay:1.4s}
.spark.s5{width:12px;height:12px;top:-10px;left:54%;animation-delay:.8s}
@keyframes winRays{100%{transform:rotate(360deg)}}
.winTrophy{position:relative;width:120px;height:120px;animation:wTrophyPop .55s cubic-bezier(.2,1.4,.4,1);background:url("ui/trophy.png?v=o1") no-repeat center/contain}
.winTrophy svg{display:none}   /* swapped for the illustrated asset (Nano Banana Pro, wordmark family) */
/* kawaii ribbon title banner (DD-style notched ribbon, in RTW's candy palette) */
.winBanner{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;gap:7px;max-width:88%;margin:0 auto 2px;padding:7px 16px;background:linear-gradient(180deg,#fff8ec,#ffe6bf);border:3px solid #fff;border-radius:13px;box-shadow:0 3px 0 #eab85a,0 6px 13px rgba(190,140,20,.24);font-weight:800;font-size:15px;letter-spacing:.5px;text-transform:uppercase;white-space:nowrap}
.winBanner #winTitle{color:#9c6a1e}
.winBanner #winDoneLbl{color:#e8740f}
.winBanner::before,.winBanner::after{content:"";position:absolute;top:50%;transform:translateY(-50%);border-top:9px solid transparent;border-bottom:9px solid transparent;z-index:-1}
.winBanner::before{left:-10px;border-right:11px solid #f2c46a}
.winBanner::after{right:-10px;border-left:11px solid #f2c46a}
/* loss variant (defeat / game over) — same ribbon, red-pink palette, no fireworks */
.winBanner.loss{background:linear-gradient(180deg,#fff0f3,#ffd9e1);box-shadow:0 3px 0 #ec8a9e,0 6px 13px rgba(190,40,70,.22)}
.winBanner.loss #overTitle{color:#d23b5b}
.winBanner.loss::before{border-right-color:#f4a9b8}
.winBanner.loss::after{border-left-color:#f4a9b8}
.winRewardCard{background:linear-gradient(180deg,#eaf6ff,#d6ecff);border:3px solid #fff;border-radius:22px;padding:13px 14px 12px;box-shadow:inset 0 2px 6px rgba(40,120,200,.12),0 4px 12px rgba(40,100,160,.16)}
.winRewardHdr{font-size:15px;font-weight:800;letter-spacing:2px;color:#3a7bb0;text-transform:uppercase;margin:0 0 8px}
.winRewardBurst{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;background:radial-gradient(circle at 50% 50%,#fff7d6,#ffe690 60%,#ffd34d);border:3px solid #fff;border-radius:18px;padding:14px 18px;box-shadow:0 4px 0 #e6b24a,0 8px 16px rgba(200,140,20,.28);overflow:hidden}
.winRewardBurst::before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,rgba(255,255,255,.55) 0deg 10deg,transparent 10deg 36deg,rgba(255,255,255,.55) 36deg 46deg,transparent 46deg 72deg,rgba(255,255,255,.55) 72deg 82deg,transparent 82deg 108deg,rgba(255,255,255,.55) 108deg 118deg,transparent 118deg 144deg);animation:winRays 12s linear infinite;pointer-events:none}
.winRewardCoin{position:relative;width:42px;height:42px;flex:0 0 auto;filter:drop-shadow(0 2px 3px rgba(150,90,0,.35))}
.winRewardNum{position:relative;font-size:40px;font-weight:800;color:#7a4f00;line-height:1;text-shadow:0 2px 0 rgba(255,255,255,.4)}
/* --- crest: stars cradle the cup --- */
/* --- reward burst: delayed swing-in + flip + count-up flash --- */
.winRewardBurst{opacity:0;transform:scale(.6)}
.winRewardBurst.reveal{animation:winRewardSwing .5s cubic-bezier(.2,1.5,.4,1) forwards}
@keyframes winRewardSwing{0%{opacity:0;transform:scale(.6) rotate(-6deg)}60%{opacity:1;transform:scale(1.08) rotate(3deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
.winRewardBurst.pulse{animation:winRewardPulse .3s ease-out}
@keyframes winRewardPulse{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}
.winRewardBurst.flash::before{animation:winRays 12s linear infinite,winRayFlash .5s ease-out}
@keyframes winRayFlash{0%{filter:brightness(2.2)}100%{filter:brightness(1)}}
.winRewardCoin.spin{animation:winCoinSpin .5s ease-out}
@keyframes winCoinSpin{0%{transform:scaleX(1)}50%{transform:scaleX(.15)}100%{transform:scaleX(1)}}
.winSpray{position:absolute;inset:0;pointer-events:none;z-index:4}
.winSpray span{position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:radial-gradient(circle at 50% 40%,#ffe690,#fdb52e);box-shadow:0 0 0 1px #fff7d6;opacity:0}
.winSpray span.go{animation:winSprayFly .55s ease-out forwards}
@keyframes winSprayFly{0%{opacity:1;transform:translate(0,0) scale(.6)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1)}}
/* --- sub-reward chips --- */
.winChips{display:flex;justify-content:center;flex-wrap:wrap;gap:7px;margin-top:9px;min-height:0}
.winChip{display:inline-flex;align-items:center;gap:5px;border:2px solid #fff;border-radius:13px;padding:5px 11px 6px;font-family:inherit;font-weight:800;font-size:13px;line-height:1;opacity:0;transform:translateY(8px)}
.winChip svg{width:18px;height:18px;display:block;flex:0 0 auto}
.winChip.reveal{animation:winChipUp .32s ease-out forwards;animation-delay:var(--d,0s)}
@keyframes winChipUp{to{opacity:1;transform:translateY(0)}}
.winChip.coins{background:linear-gradient(180deg,#eaf6ff,#d6ecff);color:#3a7bb0;box-shadow:0 3px 0 #b9d8ee,0 5px 9px rgba(40,100,160,.16)}
.winChip.packs{background:linear-gradient(180deg,#ffe3ec,#ffd0df);color:#e8729a;box-shadow:0 3px 0 #f2a8c2,0 5px 9px rgba(200,90,140,.16)}
.winChip.road{background:linear-gradient(180deg,#fff3cf,#ffe39a);color:#8a5e00;box-shadow:0 3px 0 #e9c86a,0 5px 9px rgba(190,140,20,.18);cursor:pointer}
.winChip.road:active{transform:translateY(1px)}
.winChip.streak{background:linear-gradient(180deg,#ffe0c2,#ffc78f);color:#c4621a;box-shadow:0 3px 0 #f0b27e,0 5px 9px rgba(200,110,30,.18)}
.winChip.streak svg{width:16px;height:16px}
@media (prefers-reduced-motion:reduce){
  .winRewardBurst.reveal,.winSpray span,.winChip.reveal,.winRewardCoin.spin{animation:none!important}
  .winRewardBurst{opacity:1;transform:none}
  .winChip.reveal{opacity:1;transform:none}
}
/* MVP cleanup — Sticker Album + Daily Run hidden everywhere for the initial launch (entry points + modals + reward chips) */
#albBtn,#albCard,#albModal,#dchBtn,#dchModal,#winPackRow{display:none!important}
#nextLvlBtn{min-width:190px;margin-top:14px}
.flyCoin{position:fixed;width:26px;height:26px;z-index:60;pointer-events:none;will-change:transform,opacity;filter:drop-shadow(0 2px 3px rgba(150,90,0,.4))}
.flyCoin svg,.flyCoin img{width:100%;height:100%;display:block}
#lvlMapWrap{position:relative;flex:1;width:100%;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%);mask-image:linear-gradient(180deg,transparent 0,#000 18%)}
#lvlMap{position:relative;width:100%;height:100%}
.lvlTrackFixed{left:50%;transform:translateX(-50%);top:0;bottom:70px;height:auto}
.lvlNode.stackNode{left:50%;top:auto;transform:translateX(-50%)}
.lvlNode{position:absolute;z-index:2;transform:translate(-50%,-50%);width:104px;height:100px;display:flex;align-items:center;justify-content:center}
.lvlTrack{position:absolute;z-index:1;width:104px;border-radius:0;
  background:url("ui/rtw-rail.png?v=o1") top center / 104px auto repeat-y;
  filter:drop-shadow(0 2px 3px rgba(20,60,110,.18))}
.hexBtn,.hexInner,.hexGloss{clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0 50%)}   /* DD-style FLAT-TOP hexagon (was pointy-top) */
.hexBtn{position:relative;width:98px;height:94px;background:#fff;display:flex;align-items:center;justify-content:center;
  filter:drop-shadow(0 4px 6px rgba(20,60,110,.45))}   /* near-square box = REGULAR flat-top hexagon; soft DD-style shadow */
.hexInner{position:absolute;inset:5px}
.hexGloss{position:absolute;inset:5px;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.4) 0%,rgba(255,255,255,.08) 32%,rgba(255,255,255,0) 55%)}   /* faint top sheen — the domed gel gradient does the work (like DD) */
.nodeTip{position:absolute;top:-3px;left:50%;transform:translateX(-50%);width:0;height:0;z-index:4;
  border-left:7px solid transparent;border-right:7px solid transparent;border-top:10px solid #fff;
  filter:drop-shadow(0 1.5px 1px rgba(20,60,110,.3))}
.lvlNode.future .nodeTip{border-top-color:#dfe9f2}
.lvlNode.future{opacity:.66}
.lvlNode .num{position:relative;z-index:3;font-weight:800;font-size:33px;color:#fff;transform:translateY(-4px);text-shadow:0 2px 0 rgba(0,0,0,.32),0 0 5px rgba(0,0,0,.22)}   /* DD-style clean white number */
.hexBtn.hasDiff .num{transform:translateY(-9px)}
.hexDiff{position:absolute;left:8px;right:8px;top:57%;z-index:3;text-align:center;font-size:10px;font-weight:800;color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.45);letter-spacing:.2px;line-height:1.1;pointer-events:none}
.lvlNode:active .hexBtn{transform:translateY(2px)}
.lvlNode.done .hexBtn{filter:drop-shadow(0 3px 5px rgba(20,60,110,.36))}
.lvlNode.current .hexBtn{animation:nodePulse 1.5s ease-in-out infinite}
@keyframes nodePulse{0%,100%{transform:scale(1.03)}50%{transform:scale(1.09)}}
.lvlNode.current::after{content:"";position:absolute;inset:-16px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.85),rgba(255,255,255,0) 66%);z-index:-1;animation:nodeGlow 1.5s ease-in-out infinite}
@keyframes nodeGlow{50%{opacity:.45}}
.nodeStars{position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);display:flex;gap:0}
.nodeStars svg{width:15px;height:15px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.2))}
.nodeLock{position:relative;z-index:3;width:30px;height:30px}
.nodeBanner{position:absolute;left:50%;top:auto;bottom:-13px;transform:translateX(-50%);white-space:nowrap;z-index:6;
  background:#fff;border-radius:11px;padding:3px 10px;font-size:11px;font-weight:800;color:#1c3f63;box-shadow:0 3px 8px rgba(20,60,110,.3)}
#lvlPlayBar{position:relative;z-index:3;width:100%;display:flex;justify-content:center;
  padding:8px 14px 14px;background:none}
#lvlPlayBar .bigBtn{margin-top:0;width:min(86vw,360px)}
@keyframes lvlPlayPulse{0%,100%{transform:scale(1)}45%{transform:scale(1.07)}}
#lvlPlayBar.pulse{animation:lvlPlayPulse .42s ease}   /* a hex tap nudges the player to the Play button (levels enter via Play only) */
/* (PLAY button styling consolidated into the single Figma-asset rule below — see "#startBtn.bigBtn, #levelsScr #startLvlBtn.bigBtn") */
/* drifting doodle background layer (shared) */
.scrBg{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:.4;pointer-events:none}
/* floating endless-mode button (top-left, under the resources bar) */
#endlessBtn{position:absolute;left:10px;top:calc(env(safe-area-inset-top) + 84px);z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:1px;width:54px;
  background:#fff;border:2.5px solid #fff;border-radius:14px;padding:6px 3px 5px;color:#ff6b6b;
  box-shadow:0 4px 0 #e7b3ab,0 7px 11px rgba(40,100,160,.22)}
#endlessBtn:active{transform:translateY(3px);box-shadow:0 1px 0 #e7b3ab}
#endlessBtn svg{width:22px;height:22px}
#endlessBtn span{font-size:8.5px;font-weight:800;color:var(--ink);line-height:1.1;text-align:center}
/* floating sticker-album button, top-right, across from the endless button */
#albBtn{position:absolute;right:10px;top:calc(env(safe-area-inset-top) + 84px);z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:1px;width:54px;
  background:#fff;border:2.5px solid #fff;border-radius:14px;padding:6px 3px 5px;
  box-shadow:0 4px 0 #e7b3ab,0 7px 11px rgba(40,100,160,.22)}
#albBtn:active{transform:translateY(3px);box-shadow:0 1px 0 #e7b3ab}
#albBtn svg{width:24px;height:24px}
#albBtn span{font-size:8.5px;font-weight:800;color:var(--ink);line-height:1.1;text-align:center}
/* ===== standardized EVENT BUTTONS (Figma "EVENT BTNS FIXES"): ONE shared circle + a dynamic icon
   + a pill (navy when locked / blue when unlocked) + dynamic Lilita text. Used by Race, World Cup,
   Rail Pass and Daily so they all share size, chrome and text style (no baked-in text). ===== */
.evBtn{position:absolute;z-index:5;width:18vw;max-width:80px;border:0;background:none;padding:0;margin:0;cursor:pointer;display:block;-webkit-tap-highlight-color:transparent}
.evBtn:active{transform:translateY(3px)}
.evCircle{position:relative;display:block;width:100%;aspect-ratio:1;background:url("ui/rtw-ev-circle.png?v=2") center/100% 100% no-repeat;filter:drop-shadow(0 0.5vw 0.7vw rgba(20,60,110,.32))}
.evIco{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);width:92%;height:92%;object-fit:contain;pointer-events:none}
.evPill{position:absolute;left:50%;bottom:-6%;transform:translateX(-50%);width:108%;aspect-ratio:414/114;display:flex;align-items:center;justify-content:center;background:url("ui/rtw-ev-pill.png?v=2") center/100% 100% no-repeat;pointer-events:none;z-index:2}
.evBtn.unlocked .evPill{background-image:url("ui/rtw-ev-pill-blue.png?v=2")}
.evTxt{font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;color:#f8ffff;font-size:min(3.2vw,13px);line-height:1;letter-spacing:.3px;white-space:nowrap;-webkit-text-stroke:0.08em #14233f;paint-order:stroke;text-shadow:0 0.075em 0 #14233f;pointer-events:none;padding-bottom:0.15em}
.evDot{position:absolute;top:1%;right:3%;width:20%;aspect-ratio:1;background:#ff3b30;border:2px solid #fff;border-radius:50%;display:none;z-index:3}
.evBtn.has .evDot{display:block}
.evBtn:not(.unlocked){filter:grayscale(1) brightness(.92)}  /* LOCKED event buttons read greyed out (WC is always .unlocked) */
/* placement only (size + chrome come from .evBtn): Race + Pass top row, World Cup + Daily second row */
#sprintBtn{left:5vw;top:calc(env(safe-area-inset-top) + 86px);display:none!important}   /* Rail Race hidden from Start tab for now */
#worldCupBtn{left:5vw;top:calc(env(safe-area-inset-top) + 86px)}                          /* raised into the Rail Race slot */
#railPassBtn{right:5vw;top:calc(env(safe-area-inset-top) + 86px)}
#dailyBtn{right:5vw;top:calc(env(safe-area-inset-top) + 86px + min(21vw,93px))}
/* per-icon size tuning (the ticket + gift art have wider transparent margins than the trophy/ball) */
#railPassBtn .evIco{width:100%;height:100%;top:47%;transform:translate(-50%,-50%)}  /* new RAIL OLD ticket art has the tilt baked in — no CSS rotate */
#dailyBtn .evIco{width:98%;height:98%;top:46%}
/* Daily come-to-life when it first unlocks: a pop on the circle + the dot + the guiding finger
   (no grayscale: the icon is always colour; the navy pill + "LVL N" is what conveys locked) */
#dailyBtn.dailyAwaken .evCircle{ animation:dailyAwaken 1.15s cubic-bezier(.2,1.45,.4,1) both }
@keyframes dailyAwaken{ 0%{ transform:scale(.78) } 56%{ transform:scale(1.18) } 76%{ transform:scale(.96) } 100%{ transform:scale(1) } }
#dailyBtn.dailyAwaken .evDot{ display:block;animation:dailyDotPop .5s .55s cubic-bezier(.2,1.6,.4,1) both }
@keyframes dailyDotPop{ 0%{ transform:scale(0) } 70%{ transform:scale(1.3) } 100%{ transform:scale(1) } }
/* finger guiding the player to tap the freshly-unlocked Daily button */
#dailyFinger{ position:fixed;z-index:60;width:60px;pointer-events:none;transform:translateX(-50%);filter:drop-shadow(0 -3px 4px rgba(0,0,0,.4)) }
#dailyFinger img{ width:100%;height:auto;display:block;transform:scaleY(-1);animation:dailyFingerBob 1s ease-in-out infinite }
@keyframes dailyFingerBob{ 0%,100%{ transform:scaleY(-1) translateY(0) } 50%{ transform:scaleY(-1) translateY(7px) } }
/* L9 lobby guide: finger under the WORLD CUP button (same look as the daily finger) + button pulse */
#wcGuideFinger{ position:fixed;z-index:60;width:60px;pointer-events:none;transform:translateX(-50%);filter:drop-shadow(0 -3px 4px rgba(0,0,0,.4)) }
#wcGuideFinger img{ width:100%;height:auto;display:block;transform:scaleY(-1);animation:dailyFingerBob 1s ease-in-out infinite }
.wcGuidePulse{ animation:wcGuidePop 1.05s ease-in-out infinite }
@keyframes wcGuidePop{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.12) } }
#wcGoalFx{position:fixed;left:0;right:0;top:30%;text-align:center;z-index:60;pointer-events:none;font-family:'Lilita One','Baloo 2',sans-serif;font-size:17vw;color:#fff;-webkit-text-stroke:1.3vw #14233f;paint-order:stroke;text-shadow:0 1vw 0 #14233f;opacity:0;transform:scale(.4)}
#wcGoalFx.on{animation:wcGoalPop 1s ease-out}
@keyframes wcGoalPop{0%{opacity:0;transform:scale(.3) rotate(-6deg)}22%{opacity:1;transform:scale(1.18) rotate(3deg)}52%{opacity:1;transform:scale(1) rotate(0)}100%{opacity:0;transform:scale(1.08)}}
#flagModal .avGrid{grid-template-columns:repeat(4,1fr);gap:8px;max-height:54vh;overflow-y:auto}
.flagCell{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 3px;border-radius:12px;border:2px solid transparent;background:#f2f6fb;cursor:pointer}
.flagCell.sel{border-color:#16e652;background:#fff6dd}
.flagCell canvas{width:100%;height:auto;aspect-ratio:3/2;border-radius:5px;display:block;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.flagCell span{font-size:2.6vw;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#2b4a66;font-weight:700}
.flagPrevWrap{display:flex;align-items:center;justify-content:center;gap:10px;margin:2px 0 8px}
.flagPrevWrap canvas{width:96px;height:60px;border-radius:6px;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.lbFlag{width:34px;height:22px;border-radius:3px;flex:none;margin-right:8px;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.wcLbSub{text-align:center;color:#9fb4cc;font-size:13px;font-weight:700;margin:-2px 0 10px}
#wcLbList{max-height:50vh;overflow-y:auto;margin:0 -4px}
.wcLbInvite{margin-top:12px!important;width:100%!important;max-width:none!important;height:auto!important;padding:12px 10px!important;font-size:4.6vw!important;border-radius:14px!important}
.wcOverBtn{display:block;margin:8px auto 0;width:62vw;max-width:300px;padding:11px 10px;border:2.5px solid #14233f;border-radius:14px;font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;font-size:4.4vw;color:#fff;background:linear-gradient(180deg,#5fb9ff,#2f8fe0);box-shadow:inset 0 -5px 0 -2px rgba(20,80,150,.8);cursor:pointer}
.wcOverBtn.alt{background:linear-gradient(180deg,#65f079,#16e652);box-shadow:inset 0 -5px 0 -2px rgba(31,173,92,.9)}
.wcOverBtn:active{transform:translateY(2px)}
/* ===== World Cup FINAL flow (Figma page 122:108): Choose-Flag popup / INFO / MAIN ===== */
/* CHOOSE FLAG (126:679): avatar-picker card, red X, player avatar + country-name pill, 3-col flag grid, green Save */
/* the avatar-picker styles are #avatarModal-scoped, so replicate the card chrome for #flagModal */
#flagModal .avCard{ position:relative;width:min(87.3vw,400px);background:linear-gradient(180deg,#2796ff,#45bfff);border:2px solid #08203c;border-radius:6vw;
  box-shadow:inset 0 6px 5px -2px #5fd0ff, inset 0 -14px 12px -8px #2f63b6, 0 10px 30px rgba(0,20,60,.5);
  padding:7vw 5vw 6vw;display:flex;flex-direction:column;align-items:center;animation:pop .3s }
#flagModal .avX{ position:absolute;top:-3vw;right:-3vw;width:13.5vw;height:13.5vw;border:0;padding:0;background:none;cursor:pointer;z-index:3;display:flex;align-items:center;justify-content:center }
#flagModal .avX img{ width:100%;height:100%;object-fit:contain;display:block }
#flagModal .avX:active{ transform:translateY(2px) }
#flagModal .avTitle{ margin:0 0 4.5vw;font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;color:#fff;font-size:7.35vw;line-height:1;-webkit-text-stroke:0.5vw #08203c;paint-order:stroke;text-shadow:0 2px 0 #08203c }
#flagModal .avHead{ display:flex;align-items:center;gap:3.2vw;width:100%;margin-bottom:4vw }
#flagModal .avPrev{ width:19vw;height:19vw;flex:0 0 auto;box-sizing:border-box;border-radius:21%;padding:6%;
  background:linear-gradient(180deg,#74bafe,#1f78d6 52%,#0262c9);box-shadow:0 0 0 0.35vw #0a2a52, 0 3px 6px rgba(0,15,40,.3) }
#flagModal .avPrev img{ width:100%;height:100%;object-fit:cover;display:block;border-radius:15%;border:0;background:#3b49cb }
#flagModal .avSave{ width:46vw;max-width:220px;height:14vw;max-height:74px;border:2px solid #0c3a16;border-radius:4vw;cursor:pointer;margin-top:1vw;
  background:linear-gradient(180deg,#8bf17c 0%,#36cb50 50%,#27bd45 100%);
  box-shadow:inset 0 4px 0 -1px rgba(180,255,190,.8), inset 0 -7px 0 -2px rgba(20,120,45,.7), 0 5px 10px rgba(10,80,30,.3);
  font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;color:#fff;font-size:7vw;line-height:1;-webkit-text-stroke:0.4vw #0c3a16;paint-order:stroke;text-shadow:0 2px 0 #0c3a16;padding:0 0 1vw }
#flagModal .avSave:active{ transform:translateY(2px) }
.wcCountryPill{ flex:1;min-width:0;display:flex;align-items:center;height:12.3vw;max-height:65px;padding:0 4.5vw;box-sizing:border-box;
  background:#7758d8;border:2px solid #4a2fa0;border-radius:4.3vw;
  font-family:'Lilita One','Baloo 2',sans-serif;color:#fff;font-size:5vw;-webkit-text-stroke:0.5vw #2a1f6e;paint-order:stroke;text-shadow:0 0.4vw 0 #2a1f6e }
.wcCountryPill span{ overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
#flagModal .flagGrid{ display:grid!important;grid-template-columns:repeat(3,1fr)!important;grid-auto-rows:14.5vw!important;gap:2.8vw!important;max-height:44vh!important;overflow-y:auto;width:100%;box-sizing:border-box;
  background:#2a6ed1;border:0.65vw solid #2144a6;border-radius:6.4vw;padding:3.2vw!important;box-shadow:inset 0 4px 10px rgba(0,20,60,.4) }
#flagModal .flagCell{ display:block!important;width:100%;padding:0!important;border:0.7vw solid #003f77!important;border-radius:2.4vw;background:#d9d9d9!important;
  box-shadow:0 0.5vw 0 rgba(0,30,70,.4);overflow:hidden;cursor:pointer }
#flagModal .flagCell canvas{ width:100%!important;height:100%!important;display:block;border-radius:1.9vw }
#flagModal .flagCell span{ display:none!important }
#flagModal .flagCell.sel{ border-color:#ffd34d!important;background:#0f5bb0!important;box-shadow:0 0 0 0.5vw #7a5410,0 0 4vw rgba(255,200,60,.75) }
#flagModal .flagCell:active{ transform:scale(.94) }
/* INFO page (126:611): dark overlay, WORLD CUP banner, 3 explainer rows, Let's Go! */
#wcInfoModal.modal{ background:rgba(7,16,34,.94);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);flex-direction:column;z-index:26;padding:0 5vw }
.wcInfoBanner{ position:relative;width:64vw;max-width:300px;margin-top:8.5vh;flex:0 0 auto }
.wcInfoBanner img{ width:100%;display:block;filter:drop-shadow(0 1vw 1vw rgba(0,30,60,.4)) }
.wcInfoBanner span{ position:absolute;left:0;right:0;top:6%;height:66%;display:flex;align-items:center;justify-content:center;font-family:'Lilita One','Baloo 2',sans-serif;color:#fff;font-size:6.1vw;letter-spacing:.3vw;-webkit-text-stroke:0.4vw #000;paint-order:stroke;text-shadow:0 0.5vw 0 #000 }
.wcInfoRows{ display:flex;flex-direction:column;gap:5vw;margin:6vh 0 auto;width:100%;max-width:380px }
.wcInfoRow{ display:flex;align-items:center;gap:3vw }
.wcInfoRow.rev{ flex-direction:row-reverse;text-align:right }
.wcInfoRow img{ width:28vw;max-width:145px;aspect-ratio:1;object-fit:contain;flex:0 0 auto;filter:drop-shadow(0 0.8vw 0.8vw rgba(0,0,0,.45)) }
.wcInfoRow p{ flex:1;margin:0;font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;color:#fff;font-size:4.5vw;line-height:1.12;-webkit-text-stroke:0.3vw #000;paint-order:stroke;text-shadow:0 0.3vw 0 #000 }
.wcLetsGo{ flex:0 0 auto }
#wcInfoModal .wcLetsGo{ width:43vw;max-width:270px;height:19.4vw;max-height:121px;border-radius:5.9vw;margin-bottom:3.5vh }
.wcInfoX{ position:absolute;right:5vw;top:calc(env(safe-area-inset-top) + 2vh);width:12vw;max-width:56px;aspect-ratio:1;border:0;background:none;padding:0;cursor:pointer;z-index:6 }
.wcInfoX img{ width:100%;height:100%;object-fit:contain;display:block }
.wcInfoX:active{ transform:translateY(2px) }
.wcArrow{ width:14vw;max-width:70px;height:auto;align-self:center;margin:-1vw 0;display:block;filter:drop-shadow(0 0.4vw 0.5vw rgba(0,0,0,.28)) }
.wcArrow.flip{ transform:scaleX(-1) }
/* ===== World Cup screens rendered 1:1 from the actual Figma frame art + live overlays ===== */
.wcImgModal{ align-items:center;justify-content:center;background:#0186f7;padding:0 }
.wcImgScreen{ position:relative;width:100vw;height:100vh;height:100dvh;container-type:inline-size;overflow:hidden }
@media(min-aspect-ratio:3/4){ .wcImgScreen{ width:auto;height:100dvh;aspect-ratio:624/1318 } }
.wcImgScreen>*{ position:absolute }
.wcImgBg{ inset:0;width:100%;height:100%;object-fit:fill;display:block }
.wcHit{ background:transparent;border:0;padding:0;margin:0;cursor:pointer;z-index:4;-webkit-tap-highlight-color:transparent }
.wcHit:active{ transform:scale(.96) }
.wcOvl{ position:absolute;z-index:3 }
.wcOvlText{ display:flex;align-items:center;justify-content:center;font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;color:#fff;line-height:1;white-space:nowrap }
/* FLAG popup: live 3-col flag grid covering the baked grid panel */
#wcFlagGrid{ display:grid;grid-template-columns:repeat(3,1fr);gap:2.2cqw;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:1cqw;box-sizing:border-box;z-index:3 }
#wcFlagGrid .fcell{ width:100%;aspect-ratio:3/2;border-radius:2.4cqw;overflow:hidden;border:0.5cqw solid #cfe4ff;box-shadow:0 0.4cqw 0 rgba(0,30,70,.45);background:#0f5bb0;cursor:pointer;padding:0 }
#wcFlagGrid .fcell canvas{ width:100%;height:100%;display:block }
#wcFlagGrid .fcell.sel{ border-color:#ffd34d;box-shadow:0 0 0 0.5cqw #7a5410,0 0 3cqw rgba(255,200,60,.8) }
#wcFlagGrid .fcell:active{ transform:scale(.93) }
/* MAIN page: live leaderboard list covering the baked rows */
#wcMainList2{ overflow-y:auto;-webkit-overflow-scrolling:touch;z-index:3;padding:0 0.5cqw }
#wcMainList2 .wcr{ position:relative;width:100%;height:17.4cqw;background:url("ui/rtw-rr-row.png?v=1") center/100% 100% no-repeat;margin-bottom:2.2cqw }
#wcMainList2 .wcr.me::before{ content:"";position:absolute;left:1%;right:1%;top:5%;bottom:14%;border-radius:3cqw;background:rgba(255,205,80,.30);z-index:1 }
.wcr .wmMedal{ position:absolute;left:2.4%;top:50%;transform:translateY(-50%);width:11.4cqw;height:auto;z-index:2 }
.wcr .wmMedalN{ position:absolute;left:2.4%;width:11.4cqw;text-align:center;top:50%;transform:translateY(calc(-50% - 1cqw));font-family:'Lilita One','Baloo 2',sans-serif;font-size:4.2cqw;color:#fff;z-index:3;line-height:1;text-shadow:0 0.4cqw 0 #14233f;-webkit-text-stroke:0.45cqw #14233f;paint-order:stroke }
.wcr .wmRankN{ position:absolute;left:0;width:11%;text-align:center;top:50%;transform:translateY(-50%);font-family:'Lilita One','Baloo 2',sans-serif;font-size:4.8cqw;color:#fff;z-index:3;line-height:1;text-shadow:0 0.4cqw 0 #14233f;-webkit-text-stroke:0.45cqw #14233f;paint-order:stroke }
.wcr .wmFlag{ position:absolute;left:16.5%;top:50%;transform:translateY(-50%);width:14.5cqw;height:9.7cqw;border-radius:1.6cqw;overflow:hidden;border:0.34cqw solid #fff;box-shadow:0 0.3cqw 0.4cqw rgba(0,0,0,.3);z-index:2 }
.wcr .wmFlag canvas{ width:100%;height:100%;display:block }
.wcr .wmName{ position:absolute;left:33.5%;top:50%;transform:translateY(-50%);max-width:26%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:'Lilita One','Baloo 2',sans-serif;color:#f8ffff;font-size:5cqw;line-height:1.1;-webkit-text-stroke:0.5cqw #a5553d;paint-order:stroke;text-shadow:0 0.45cqw 0 #a5553d }
.wcr .wmRew{ position:absolute;left:62.5%;top:50%;transform:translateY(-50%);width:12.5cqw;height:auto;z-index:2 }
.wcr .wmGoals{ position:absolute;right:3.5%;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:1cqw;z-index:3 }
.wcr .wmGoals img{ width:7.4cqw;height:7.4cqw;object-fit:contain }
.wcr .wmGoals b{ font-family:'Lilita One','Baloo 2',sans-serif;color:#f8ffff;font-size:4.9cqw;-webkit-text-stroke:0.5cqw #14233f;paint-order:stroke;text-shadow:0 0.45cqw 0 #14233f }
/* per-screen overlay positions (Figma node coords) */
#flagModal .wcFlagAv{ left:10.7%;top:26.2%;width:20%;height:9.7%;display:flex;align-items:center;justify-content:center }
#flagModal .wcFlagAv img{ width:74%;height:74%;object-fit:cover;border-radius:18%;background:#3b49cb }
#flagModal .wcFlagName{ left:35%;top:27.7%;width:52.5%;height:5.6%;border-radius:2.6cqw;background:linear-gradient(180deg,#7b6cf0,#5a45d6);color:#fff;font-size:4.2cqw;-webkit-text-stroke:0.4cqw #2a1f6e;paint-order:stroke;padding:0 4cqw;box-sizing:border-box;justify-content:flex-start }
#flagModal #wcFlagGrid{ left:14.6%;top:39%;width:69%;height:40%;background:#1769bf;border-radius:2.6cqw }
#wcMainModal .wcGoalsBox{ left:33%;top:34.4%;width:14%;height:5.6%;border-radius:1.2cqw;background:#2096e9;color:#fff;font-size:5cqw;-webkit-text-stroke:0.5cqw #14233f;paint-order:stroke;text-shadow:0 0.4cqw 0 #14233f }
#wcMainModal #wcMainList2{ left:4.5%;top:58.5%;width:91%;height:26.5% }
/* MAIN page (126:1096) = Rail Race screen re-skin (reuses .rrModal/.rrScreen/.rrRow + rr assets) */
.wcInfoBtn{ position:absolute;left:5%;top:4.4%;width:11%;aspect-ratio:1;border:0;background:none;padding:0;cursor:pointer;z-index:8 }
.wcInfoBtn img,.wcInfoBtn svg{ width:100%;height:100%;object-fit:contain;display:block }
.wcInfoBtn:active{ transform:translateY(2px) }
.wcMainBall{ object-fit:contain }
.wcSub{ left:50%;right:auto;transform:translateX(-50%);width:96%;top:40.7%;text-align:center;font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;color:#fff;font-size:3.5cqw;line-height:1.15;white-space:nowrap;text-shadow:0 0.16cqw 0 #000;z-index:3 }
#wcMainModal .rrHero{ content:url('ui/rtw-wc-hero.png?v=o1');height:21.9%;object-fit:cover;object-position:center top;filter:saturate(1.12) brightness(1.05) }
#wcMainModal .rrDivider{ top:21.9% }
#wcMainModal .rrGlow{ display:none }
#wcMainModal .rrScreen{ background:#296cf6 }
#wcMainModal .rrPanel{ border:0.32cqw solid #0060ac;opacity:.5;box-shadow:none }
#wcMainModal .rrTitle{ top:16.6% }
#wcMainModal .rrPanel{ top:25.9% }
#wcMainModal .rrLblRank,#wcMainModal .rrLblRew{ top:27.2% }
#wcMainModal .rrTrophy,#wcMainModal .rrClock{ top:33% }
#wcMainModal .rrPill{ top:35.5%;height:8.94cqw }
#wcMainModal .rrRewX{ top:37.6% }
#wcMainModal .rrStatus{ top:45%!important;width:auto!important;min-width:26cqw;padding:0 3.5cqw;gap:1.6cqw;background:#32a5ff!important;border:0.34cqw solid #0c63b8!important;box-shadow:inset 0 0.5cqw 0 rgba(255,255,255,.35),inset 0 -0.6cqw 0 rgba(0,40,90,.3)!important }
#wcMainModal .rrStatus b{ color:#fff!important;-webkit-text-stroke:0!important;text-shadow:0 0.3cqw 0 rgba(0,30,70,.6)!important }
.wcStatusClock{ width:4.4cqw;height:4.4cqw;flex:0 0 auto;display:block }
#wcMainModal .rrList{ top:50.5%!important;bottom:13%;left:4.6%;right:4.6% }
#wcMainModal .wcPlayBtn{ position:absolute;left:50%;bottom:3.5%;transform:translateX(-50%);width:62%;max-width:none;z-index:5 }
#wcMainModal .wcPlayBtn:active{ transform:translateX(-50%) translateY(3px) }
.wcInfoRow img.wcFieldIco{ width:21vw;max-width:115px;object-fit:cover;border-radius:4.5vw;aspect-ratio:1 }
.wcInfoRow img.wcBallIco{ width:15vw;max-width:82px }
.wcInfoRow img.wcChestIco{ width:38vw;max-width:205px;aspect-ratio:auto;height:auto }
.wcLbRow .rrName{ left:36.2%;max-width:46% }
.wcRowFlag{ position:absolute;left:16%;top:50%;transform:translateY(-50%);width:9cqw;height:6.7cqw;border-radius:1.4cqw;overflow:hidden;border:0.55cqw solid #003f77;box-shadow:0 0.3cqw 0.4cqw rgba(0,0,0,.3);background:#d9d9d9;z-index:2 }
.wcRowFlag canvas{ width:100%;height:100%;display:block;border-radius:1.2cqw }
.wcRowRew{ position:absolute;left:58.5%;top:50%;transform:translateY(-50%);width:12.5cqw;height:auto;z-index:2;filter:drop-shadow(0 0.3cqw 0.4cqw rgba(0,0,0,.22)) }
.wcRowGoals{ position:absolute;right:3%;top:50%;transform:translateY(-50%);width:12cqw;height:12cqw;z-index:3 }
.wcRowGoals img{ position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block }
.wcRowGoals b{ position:absolute;left:50%;top:73%;transform:translate(-50%,-50%);font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;color:#f8ffff;font-size:5.2cqw;line-height:1;white-space:nowrap;-webkit-text-stroke:0.6cqw #14233f;paint-order:stroke;text-shadow:0 0.45cqw 0 #14233f }
/* ===== IN-COUNTRY player leaderboard (Figma 130:106): inset card, tap a country to drill in ===== */
#wcMainModal .wcLbRow{ cursor:pointer }
#wcCountryModal.modal{ align-items:center;justify-content:center;background:rgba(8,10,20,.84);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:30;padding:0 }
.wcCard{ position:relative;container-type:inline-size;width:min(89vw,420px);height:min(86vh,772px);box-sizing:border-box;
  background:linear-gradient(180deg,#45bfff,#2796ff);border:2px solid #000;border-radius:11cqw;
  box-shadow:inset 0 1.1cqw 0 #1dd1e0, inset 0 -2.2cqw 0 #3165b9, 0 2.4cqw 6cqw rgba(0,15,45,.55);
  display:flex;flex-direction:column;align-items:center;padding:15cqw 4cqw 4cqw;animation:pop .3s }
.wcCardInfo,.wcCardX{ position:absolute;top:1cqw;width:12cqw;aspect-ratio:1;border:0;background:none;padding:0;cursor:pointer;z-index:6 }
.wcCardInfo{ left:0.5cqw }
#wcCountryInfo{ display:none!important }   /* removed per request */
.wcCardX{ right:0.5cqw }
.wcCardInfo img,.wcCardX img{ width:100%;height:100%;object-fit:contain;display:block }
.wcCardInfo:active,.wcCardX:active{ transform:translateY(2px) }
.wcCardRibbon{ position:absolute;left:50%;top:-1.5cqw;transform:translateX(-50%);width:86%;aspect-ratio:439/108;z-index:5 }
.wcCardRibbon>img{ position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 1cqw 1cqw rgba(0,30,60,.4)) }
.wcCardRibIn{ position:absolute;left:6%;right:6%;top:14%;bottom:34%;display:flex;align-items:center;justify-content:center;gap:3.5cqw }
.wcCardFlag{ width:16cqw;aspect-ratio:3/2;border-radius:2.6cqw;overflow:hidden;border:0.6cqw solid #0a2a52;box-shadow:0 0.4cqw 0 rgba(0,20,50,.35);background:#3b49cb;flex:0 0 auto }
.wcCardFlag canvas{ width:100%;height:100%;display:block }
.wcCardName{ font-family:'Lilita One','Baloo 2',sans-serif;color:#fff;font-size:7.4cqw;line-height:1;-webkit-text-stroke:0.3cqw #5d2110;paint-order:stroke;text-shadow:0 0.4cqw 0 #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52% }
.wcCardPanel{ width:100%;box-sizing:border-box;display:flex;align-items:center;background:rgba(22,128,212,.5);border:0.4cqw solid #0060ac;border-radius:6.5cqw;padding:3cqw 1cqw;margin-bottom:3cqw;flex:0 0 auto }
.wcCardCol{ flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:1.8cqw }
.wcCardLbl{ font-family:'Lilita One','Baloo 2',sans-serif;color:#fff;font-size:8cqw;line-height:1;text-shadow:0 0.3cqw 0 #000 }
.wcCardGoals{ display:flex;align-items:center;gap:2cqw;background:#164ccc;border-radius:5cqw;padding:1cqw 6cqw 1cqw 1.4cqw;box-sizing:border-box }
.wcCardGoals img{ width:9.4cqw;height:9.4cqw;object-fit:contain;display:block }
.wcCardGoals b{ font-family:'Lilita One','Baloo 2',sans-serif;color:#fff;font-size:6cqw;text-shadow:0 0.3cqw 0 #000 }
.wcCardRew{ position:relative;display:flex;align-items:flex-end;gap:0.6cqw }
.wcCardRew img{ width:13cqw;height:13cqw;object-fit:contain;display:block;filter:drop-shadow(0 0.4cqw 0.5cqw rgba(0,0,0,.3)) }
.wcCardRew b{ font-family:'Lilita One','Baloo 2',sans-serif;color:#fff;font-size:6cqw;line-height:1;text-shadow:0 0.3cqw 0 #000;margin-bottom:0.6cqw }
.wcCardSub{ width:84%;text-align:center;font-family:'Lilita One','Baloo 2',sans-serif;color:#fff;font-size:5cqw;line-height:1.18;text-shadow:0 0.3cqw 0 #000;margin-bottom:3cqw;flex:0 0 auto }
.wcCardList{ width:100%;flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;container-type:inline-size;padding:0.5cqw }
.wcCardList .rrRow{ margin-bottom:3cqw;height:23cqw }
.wcpRow .rrName{ max-width:50% }
#wcMainModal .wcLbRow .rrMedal{ left:2.5%;width:8cqw }
#wcMainModal .wcLbRow .rrMedalN{ left:2.5%;width:8cqw;font-size:4.5cqw }
#wcMainModal .wcLbRow .rrRankN{ left:0;width:14.5%;font-size:4.7cqw }
#wcMainModal .wcRowGoals{ right:8%;width:7cqw;height:7cqw }
#wcMainModal .wcRowGoals b{ font-size:3.3cqw;top:72% }
.wcCardList .wcRowGoals{ right:4%;width:11cqw;height:11cqw }
.wcCardList .wcRowGoals b{ font-size:5.4cqw }
.wcCardPlay{ flex:0 0 auto;margin-top:3cqw;width:60cqw;max-width:none;height:17cqw }
.wcCardPlay:active{ transform:translateY(3px) }
/* ===== Milestone progress bar (Figma CHANGES TO MAIN WC 133:598) ===== */
#wcMainModal .rrPanel{ height:13.9% }
#wcMainModal .rrLblRew{ left:62%;width:22% }
.wcMileBar{ position:absolute;left:19.5%;top:32.2%;width:63%;height:11cqw;box-sizing:border-box;display:flex;align-items:center;gap:1.7cqw;background:#164ccc;border:0.95cqw solid #00236c;border-radius:5.4cqw;padding:0 1cqw 0 0;z-index:4 }
.wcMileBall{ width:12.5cqw;height:12.5cqw;object-fit:contain;flex:0 0 auto;margin:-2cqw 0.2cqw -2cqw -3cqw;filter:drop-shadow(0 0.3cqw 0.5cqw rgba(0,0,0,.4)) }
.wcMileTrack{ position:relative;flex:1 1 auto;height:7.4cqw;background:#0c2257;border-radius:3.7cqw;overflow:hidden;box-shadow:inset 0 0.3cqw 0.5cqw rgba(0,0,0,.4) }
.wcMileFill{ position:absolute;left:0;top:0;bottom:0;width:50%;border-radius:3.7cqw;background:#52c505;box-shadow:inset 0 0.45cqw 0 rgba(255,255,255,.45),inset 0 -0.5cqw 0 rgba(20,120,10,.5);transition:width .85s cubic-bezier(.3,1,.5,1) }
.wcMileTxt{ position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;font-family:'Lilita One','Baloo 2',sans-serif;color:#fff;font-size:4.97cqw;line-height:1;-webkit-text-stroke:0.3cqw #0a3a14;paint-order:stroke;text-shadow:0 0.35cqw 0 #0a3a14 }
.wcMileSep{ display:none }
.wcMileRew{ position:relative;flex:0 0 auto;width:16cqw;height:16cqw;margin:-3.6cqw -0.4cqw -3.6cqw 0.4cqw }
.wcMileRewImg{ width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 0.5cqw 0.6cqw rgba(0,0,0,.42)) }
.wcMileRew .wcMileX{ position:absolute;left:50%;bottom:0.2cqw;transform:translateX(-50%);font-family:'Lilita One','Baloo 2',sans-serif;color:#fff;font-size:5.2cqw;line-height:1;white-space:nowrap;-webkit-text-stroke:0.5cqw #14233f;paint-order:stroke;text-shadow:0 0.4cqw 0 #14233f }
/* ===== Figma 1:1 leaderboard parity (main + in-country rows) ===== */
/* row names: Figma uses WHITE + a thin black drop shadow, not the Rail Race brown stroke */
.wcLbRow .rrName,.wcpRow .rrName{ text-shadow:0 0.18cqw 0 #000,0 0 0.4cqw rgba(0,0,0,.45) }
#wcMainModal .wcLbRow .rrName{ font-size:4.2cqw }
.wcCardList .wcpRow .rrName{ font-size:5.4cqw }
#wcMainModal .wcLbRow .rrName{ left:27%;max-width:56% }
/* in-country player avatar = Figma BLUE badge (#6fb8fd->#0480ff, dark navy border, dark inner) */
.wcpRow .rrAv{ background:linear-gradient(180deg,#6fb8fd,#0480ff);border:0.4cqw solid #01325e;width:12.5cqw;height:12.5cqw;border-radius:2.6cqw }
.wcpRow .rrAv img{ background:#3b49cb }
.drModal{align-items:center;justify-content:center}
.drModal .drRsrc{position:absolute;top:calc(env(safe-area-inset-top) + 12px);left:50%;transform:translateX(-50%);width:auto;justify-content:center;gap:3.5vw;padding:0;z-index:6}
body.dailyOpen #lvlTop{visibility:hidden}   /* daily modal up: its own top bar replaces the (dimmed) levels bar */
.drScreen{position:relative;width:min(100vw,430px,calc(100vh * 624 / 1318));aspect-ratio:624/1318;container-type:inline-size}
.drScreen>*{position:absolute}
.drPanelOuter{left:3.5%;top:13.5%;width:93%;height:80%;background:linear-gradient(180deg,#fad238,#f69105);border:0.36cqw solid #735845;border-radius:5cqw;box-shadow:inset 0 -2cqw 1cqw rgba(200,80,4,.32)}
.drPanelMid{left:5.2%;top:14.3%;width:89.6%;height:78.2%;background:#f7be15;border-radius:4cqw}
.drPanelInner{left:6%;top:14.8%;width:88%;height:77.2%;background:#1983f8;border:0.32cqw solid #735845;border-radius:3.6cqw}
.drBanner{left:15.5%;top:10.5%;width:70.4%;height:auto;pointer-events:none;z-index:2}
.drTitle{left:0;right:0;top:12%;width:100%;text-align:center;font-family:'Lilita One','Baloo 2',sans-serif;font-size:6.73cqw;color:#fff;-webkit-text-stroke:1.8px #000;paint-order:stroke;text-shadow:0 2px 0 #000;pointer-events:none;z-index:3}
.drX{left:83.8%;top:11.3%;width:12.5%;aspect-ratio:1;border:0;background:none;padding:0;cursor:pointer;z-index:4}
.drX img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}
.drX:active{transform:translateY(2px)}
.drInfo{left:14.9%;top:19.4%;width:11.2%;aspect-ratio:1;border:0;background:none;padding:0;cursor:pointer;z-index:3}
.drInfo img{width:100%;height:100%;display:block}
.drHero{left:13.9%;top:17.3%;width:72.5%;height:auto}
.drProgWrap{left:0;top:38%;width:100%;height:9%}
.drProgImgBox{position:absolute;left:20.4%;top:0;width:66.2%;aspect-ratio:1652/414}
.drProgImgBox .drProg{position:absolute;inset:0;left:auto;width:100%;height:100%;z-index:1}
.drNode{position:absolute;top:42.99%;width:8.72%;height:34.78%;z-index:3;pointer-events:none;background:url("ui/rtw-dr-progress.png?v=o1") no-repeat;background-size:1147.2% 287.5%}
.drNode.n8{left:18.89%;background-position:20.69% 65.93%}
.drNode.n15{left:39.16%;background-position:42.90% 65.93%}
.drNode.n23{left:62.35%;background-position:68.30% 65.93%}
/* re-draw the baked milestone circles ON TOP of the green fill (a masked copy of the bar showing only the circles), so the progress bar never covers them */
.drProgImgBox .drProgCircles{position:absolute;inset:0;z-index:4;pointer-events:none;background:url("ui/rtw-dr-progress.png?v=o1") center/100% 100% no-repeat;
  -webkit-mask:radial-gradient(ellipse 5.4% 22% at 23.2% 73%,#000 86%,transparent 100%),radial-gradient(ellipse 5.4% 22% at 43.5% 73%,#000 86%,transparent 100%),radial-gradient(ellipse 5.4% 22% at 66.7% 73%,#000 86%,transparent 100%);-webkit-mask-repeat:no-repeat;
  mask:radial-gradient(ellipse 5.4% 22% at 23.2% 73%,#000 86%,transparent 100%),radial-gradient(ellipse 5.4% 22% at 43.5% 73%,#000 86%,transparent 100%),radial-gradient(ellipse 5.4% 22% at 66.7% 73%,#000 86%,transparent 100%);mask-repeat:no-repeat}
.drProgFill{position:absolute;left:1.2%;top:60%;height:26.4%;width:0;z-index:2;pointer-events:none;overflow:hidden;
  background:linear-gradient(180deg,#8cee54 0%,#39bf20 58%,#239610 100%);border-radius:2.4cqw/4.5cqw;
  box-shadow:inset 0 0.5cqw 0 rgba(255,255,255,.4),inset 0 -0.6cqw 0 rgba(20,90,0,.32);transition:width .5s cubic-bezier(.3,1,.4,1)}
.drTotLbl{left:16.7%;top:41.5%;width:10.6%;height:4.8%;box-sizing:border-box;background:#fff3f3;border:0.32cqw solid #000;border-radius:1.8cqw;overflow:hidden;z-index:4;padding:0}
.drTotLbl i{position:absolute;left:0;right:0;top:0;height:38%;background:#d00407;display:flex;align-items:center;justify-content:center;font-family:'Lilita One',sans-serif;font-style:normal;font-weight:400;font-size:1.45cqw;white-space:nowrap;letter-spacing:-.02em;color:#fff;line-height:1;text-shadow:.5px 0 0 #000,-.5px 0 0 #000,0 .5px 0 #000,0 -.5px 0 #000}
.drTotLbl b{position:absolute;left:0;right:0;top:38%;bottom:0;display:flex;align-items:center;justify-content:center;font-family:'Lilita One',sans-serif;font-weight:400;font-size:4cqw;color:#fff;line-height:1;text-shadow:1px 0 0 #000,-1px 0 0 #000,0 1px 0 #000,0 -1px 0 #000}
.drGrid{left:0;top:0;width:100%;height:100%;pointer-events:none}
.drCard{position:absolute;width:24%;aspect-ratio:124/145;pointer-events:auto}
.drCard .drFrame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.drCard .drSep{position:absolute;left:1.5%;width:97%;top:22.3%;height:auto;pointer-events:none;z-index:1}
.drCard .drDay{position:absolute;left:0;right:0;top:3.5%;text-align:center;font-family:'Lilita One','Baloo 2',sans-serif;font-size:4.4cqw;color:#f8ffff;-webkit-text-stroke:0.62cqw #14233f;paint-order:stroke;text-shadow:0 0.42cqw 0 #14233f;z-index:2}
.drCard .drBody{position:absolute;left:5%;right:5%;top:25%;bottom:5%;display:flex;align-items:center;justify-content:center;z-index:2}
.drCard .drQ{width:96%;height:auto;object-fit:contain;opacity:.95}
.drCard .drBox{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.drCard .drRew{position:relative;width:100%;height:100%}
.drCard .drIco{position:absolute;left:50%;top:39%;transform:translate(-50%,-50%);width:74%;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 0.4cqw 0.4cqw rgba(0,0,0,.28))}
.drCard .drIco svg,.drCard .drIco img{width:100%;height:100%;object-fit:contain;display:block}
.drCard .drAmt{position:absolute;left:0;right:0;bottom:7%;text-align:center;font-family:'Lilita One','Baloo 2',sans-serif;font-size:5.4cqw;line-height:1;color:#f8ffff;-webkit-text-stroke:0.7cqw #14233f;paint-order:stroke;text-shadow:0 0.5cqw 0 #14233f;z-index:3}
.drCard .drChk{position:absolute;right:-6%;bottom:-2%;width:42%;height:auto;z-index:3}
.drCard.drClaimed{filter:saturate(.9)}
.drCard.drActive{cursor:pointer}
.drCard.drActive:active{transform:translateY(2px)}
.drDay7{left:7.5%;top:76%;width:85%;aspect-ratio:423/145}
.drDay7 .drDay{font-size:4cqw;top:6%}
.drDay7 .drBody{left:4%;right:4%}
@keyframes drCardPop{0%{transform:scale(1)}25%{transform:scale(1.13)}55%{transform:scale(.97)}100%{transform:scale(1)}}
@keyframes drRewPop{0%{transform:scale(0) rotate(-25deg)}60%{transform:scale(1.22) rotate(7deg)}100%{transform:scale(1) rotate(0)}}
@keyframes drFlashA{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}35%{opacity:.92}100%{opacity:0;transform:translate(-50%,-50%) scale(1.95)}}
.drCard.drRevealing{animation:drCardPop .6s ease-out;z-index:20}
.drCard.drRevealing .drRew{animation:drRewPop .52s .1s both cubic-bezier(.2,1.5,.45,1)}
.drCard .drFlash{position:absolute;left:50%;top:50%;width:170%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,255,210,.95),rgba(255,210,80,.55) 38%,rgba(255,210,80,0) 70%);pointer-events:none;animation:drFlashA .66s ease-out forwards;z-index:9}
.drDay7 .d7slot{position:absolute;top:60%;transform:translate(-50%,-50%);width:27%;height:72%;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:2}
.drDay7 .d7slot .drIco{position:static;transform:none;left:auto;top:auto;width:62%;aspect-ratio:1;margin:0 auto}
.drDay7 .d7slot .drAmt{position:static;bottom:auto;font-size:3.9cqw;margin-top:-2%}
@keyframes drPressBounce{0%{transform:translateY(0) scale(1)}35%{transform:translateY(4px) scale(.955)}70%{transform:translateY(0) scale(1.025)}100%{transform:translateY(0) scale(1)}}
.drCard.drPressAnim{animation:drPressBounce .26s ease}
#dailyBigModal.modal{ background:radial-gradient(120% 90% at 50% 38%, #16213c, #07070b)!important;flex-direction:column;z-index:24;padding:0 6vw }
.dailyBigModal .usRays{ top:40%!important }
.dbgTitle{ position:relative;z-index:3;margin:0;font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;font-size:11vw;line-height:1;letter-spacing:1px;text-transform:uppercase;text-align:center;white-space:pre-line;color:#f5c739;text-shadow:0 0.4vw 0 #d37200;animation:usNameIn .5s .1s cubic-bezier(.2,1.5,.4,1) both }
.dbgTitle.twoLine{ font-size:9vw }   /* multi-line title (DAILY MILESTONE) shrinks a touch so both lines fit */
.dbgTitle::after{ content:attr(data-name);position:absolute;left:0;right:0;top:0;color:#fff77b;clip-path:inset(0 0 64% 0);pointer-events:none;text-shadow:none;white-space:pre-line }
.dbgPrizes{ position:relative;z-index:3;display:flex;flex-wrap:wrap;justify-content:center;gap:3.5vw 5vw;margin-top:4vw;max-width:92vw }
.dbgPrize{ display:flex;flex-direction:column;align-items:center;animation:dbgPrizeIn .55s cubic-bezier(.2,1.6,.4,1) both;animation-delay:calc(.18s + var(--i,0)*.12s) }
.dbgPrize img{ width:19vw;max-width:100px;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 0.6vw 0.6vw rgba(0,0,0,.5)) }
.dbgPrize b{ margin-top:1vw;font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;font-size:5.4vw;color:#f8ffff;-webkit-text-stroke:0.6vw #14233f;paint-order:stroke;text-shadow:0 0.4vw 0 #14233f }
.dbgSub{ position:relative;z-index:3;max-width:82vw;text-align:center;color:#dbe7f4;font-weight:700;font-size:4.5vw;line-height:1.36;margin-top:6vw;text-wrap:balance }
.dbgTap{ position:absolute;left:50%;bottom:9vw;transform:translateX(-50%);z-index:5;animation:usClaimFade .4s ease both }
.dbgTap:active{ transform:translateX(-50%) translateY(2px) }
@keyframes dbgPrizeIn{ 0%{opacity:0;transform:translateY(6vw) scale(.5)} 100%{opacity:1;transform:none} }
/* ===== Daily Rewards INFO page (Figma 96:466) ===== */
.drInfoModal{align-items:center;justify-content:center;z-index:30;background:rgba(9,16,34,.965);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.drInfoModal .diBanner{top:8.1%}
.drInfoModal .diTitle{top:9.6%}
.diTxt{position:absolute;font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;color:#fff;-webkit-text-stroke:1px #000;paint-order:stroke;text-shadow:0 2px 0 #000;font-size:4.49cqw;line-height:1.15;text-align:center}
.diTxt1{left:3.4%;top:30.8%;width:50.9%}
.diTxt2{left:33.4%;top:54.6%;width:53.6%}
.diTxt3{left:0.6%;top:79.4%;width:53.6%}
.diDay{position:absolute;left:0;right:0;top:6%;text-align:center;font-family:'Lilita One',sans-serif;font-size:2.56cqw;color:#fff;-webkit-text-stroke:1px #000;paint-order:stroke;z-index:2}
.diCal{position:absolute;left:17.1%;top:20.3%;width:19.3%;height:auto}
.diGift{position:absolute;left:8%;top:61%;width:40%;height:auto;opacity:.9}
.diGiftBox{position:absolute;left:12%;top:64%;width:32%;height:auto;filter:drop-shadow(0 5px 7px rgba(0,0,0,.32))}
.diArrow{position:absolute;width:12.4%;height:auto}
.diArrow1{left:46.8%;top:36.2%}
.diArrow2{left:41.8%;top:61.8%;transform:scaleX(-1)}
.diPanel{position:absolute;left:34%;top:42.5%;width:52.5%;height:10.4%;background:#0879fd;border-radius:4.17cqw;box-sizing:border-box;display:flex;align-items:center;justify-content:space-around;padding:0 1.4%;box-shadow:inset 0 0.4cqw 0 #74b1f4, inset 0 -1cqw 0 #034695}
.diCard{position:relative;width:30%;aspect-ratio:124/145}
.diCard .drFrame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.diCard .diChk{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64%;height:auto}
.diCard .diQ{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);width:80%;height:auto}
.diCard .diRew{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);width:86%;display:flex;align-items:center;justify-content:center}
.diCard .diRew>img:first-child{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.diCard .diCoin{position:relative;width:52%;height:auto}
.diCard .diRew span{position:absolute;bottom:6%;left:0;right:0;text-align:center;font-family:'Lilita One',sans-serif;font-size:3.2cqw;color:#fff;-webkit-text-stroke:.8px #000;paint-order:stroke}
.diCont{position:absolute;left:0;right:0;top:91.1%;text-align:center;font-family:'Lilita One','Baloo 2',sans-serif;font-size:5.13cqw;color:#fff;-webkit-text-stroke:1.4px #000;paint-order:stroke;text-shadow:0 2px 0 #000;animation:drTotPulse 1.4s ease-in-out infinite}
@keyframes drTotPulse{0%,100%{opacity:.8}50%{opacity:1}}



#endlessBtn .endCost{font-style:normal;font-size:9px;font-weight:800;color:#e8920a;display:flex;align-items:center;gap:2px;margin-top:1px}
#endlessBtn .endCost svg{width:10px;height:10px}
#verTag{z-index:6}
/* floating invite button under the endless button */
#inviteBtn{position:absolute;left:10px;top:calc(env(safe-area-inset-top) + 148px);z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:1px;width:54px;
  background:#fff;border:2.5px solid #fff;border-radius:14px;padding:6px 3px 5px;color:#ff6b6b;
  box-shadow:0 4px 0 #e7b3ab,0 7px 11px rgba(40,100,160,.22)}
#inviteBtn:active{transform:translateY(3px);box-shadow:0 1px 0 #e7b3ab}
#inviteBtn svg{width:22px;height:22px}
#inviteBtn span{font-size:8.5px;font-weight:800;color:var(--ink);line-height:1.1;text-align:center}
#inviteBadge{position:absolute;right:-5px;top:-5px;min-width:17px;height:17px;border-radius:9px;
  background:#7ed957;border:2px solid #fff;color:#1d4d10;font-style:normal;font-weight:800;font-size:11px;
  display:none;align-items:center;justify-content:center;padding:0 4px}
#refClaimBtn{display:none}
/* daily challenge: pure skill, booster buttons hidden during the run */
body.dailyRun #boosters{display:none}
/* stage 10 experiment: real 3D piece renders in the tray */
.pieceWrap img.p3d{width:46px;height:46px;display:block;transition:transform .16s cubic-bezier(.34,1.56,.64,1)}
.slot.big .pieceWrap img.p3d{width:18vw;height:18vw;max-width:86px;max-height:86px}
.trayInset .pieceWrap img.p3d{width:9vw;height:9vw;max-width:44px;max-height:44px}
#dchBtn{position:absolute;left:10px;top:calc(env(safe-area-inset-top) + 280px);z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:1px;width:54px;
  background:#fff;border:2.5px solid #fff;border-radius:14px;padding:6px 3px 5px;color:#ff6b6b;
  box-shadow:0 4px 0 #e7b3ab,0 7px 11px rgba(40,100,160,.22)}
#dchBtn:active{transform:translateY(3px);box-shadow:0 1px 0 #e7b3ab}
#dchBtn svg{width:22px;height:22px}
#dchBtn span{font-size:8.5px;font-weight:800;color:var(--ink);line-height:1.1;text-align:center}
#dchDot{position:absolute;right:-5px;top:-5px;width:14px;height:14px;border-radius:50%;
  background:#7ed957;border:2px solid #fff;display:flex;animation:passPulse 1.4s infinite}
/* floating leaderboard button under the invite button */
#lbBtn{position:absolute;left:10px;top:calc(env(safe-area-inset-top) + 216px);z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:1px;width:54px;
  background:#fff;border:2.5px solid #fff;border-radius:14px;padding:6px 3px 5px;color:#ff6b6b;
  box-shadow:0 4px 0 #e7b3ab,0 7px 11px rgba(40,100,160,.22)}
#lbBtn:active{transform:translateY(3px);box-shadow:0 1px 0 #e7b3ab}
#lbBtn svg{width:22px;height:22px}
#lbBtn span{font-size:8.5px;font-weight:800;color:var(--ink);line-height:1.1;text-align:center}
#lbBtn{display:none}/* leaderboard now lives inside the Win hub */
/* WIN hub button + rows */
#winBtn{position:absolute;left:10px;top:calc(env(safe-area-inset-top) + 216px);z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:1px;width:54px;
  background:#fff;border:2.5px solid #fff;border-radius:14px;padding:6px 3px 5px;color:#ff6b6b;
  box-shadow:0 4px 0 #e7b3ab,0 7px 11px rgba(40,100,160,.22)}
#winBtn:active{transform:translateY(3px);box-shadow:0 1px 0 #e7b3ab}
#winBtn svg{width:24px;height:24px}
#winBtn span{font-size:8.5px;font-weight:800;color:var(--ink);line-height:1.1;text-align:center}
#winDot{position:absolute;right:-5px;top:-5px;width:14px;height:14px;border-radius:50%;background:#ff5e6c;border:2px solid #fff;display:none;animation:passPulse 1.4s infinite}
.questTabs{flex-wrap:wrap}
.questTabs .lbTab{padding:6px 9px;font-size:11px}
#questBody{max-height:60vh;overflow-y:auto}
.qRow{display:flex;align-items:center;gap:9px;padding:9px 4px;border-bottom:1px solid var(--line)}
.qRow .qInfo{flex:1;min-width:0}
.qRow .qTitle{font-weight:800;font-size:13px;color:var(--ink)}
.qBar{height:7px;border-radius:4px;background:#e6eef6;margin:4px 0 2px;overflow:hidden}
.qBar i{display:block;height:100%;background:linear-gradient(90deg,#5cc0fa,#3aa6f0);border-radius:4px}
.qRew{font-size:11px;font-weight:800;color:#e8920a;display:flex;align-items:center;gap:3px}
.qRew svg{width:13px;height:13px}
.qCta{flex:0 0 auto;border-radius:11px;font-family:inherit;font-weight:800;font-size:12px;padding:7px 12px;
  background:linear-gradient(180deg,#ffdb55,#ffc01e);color:#7a4400;border:2px solid #fff;box-shadow:0 3px 0 #e2950e}
.qCta:active{transform:translateY(2px);box-shadow:0 1px 0 #e2950e}
.qCta.wait{background:#edf2f8;color:#9bb4cf;box-shadow:none;border:2px solid #edf2f8}
.qCta.done{background:#dff3d8;color:#2f7d4f;box-shadow:none;border:2px solid #dff3d8}
.qGrand{margin-top:10px;padding:10px;border-radius:13px;background:#fff6dd;border:2px solid #ffe9b8;display:flex;align-items:center;gap:8px;justify-content:space-between;font-weight:800;font-size:12px;color:#7a4400}
.qHead{font-weight:800;font-size:12px;color:var(--sub);margin:8px 2px 4px;text-align:center}
.ccChip{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:22px;padding:0 6px;border-radius:7px;background:#1c3f63;color:#fff;font-weight:800;font-size:12px}
.qCountdown{text-align:center;font-weight:800;font-size:13px;color:#3aa6f0;margin:4px 0}
/* leaderboard modal */
.lbTabs{display:flex;gap:6px;justify-content:center;margin:6px 0}
.lbTab{font-family:inherit;font-weight:800;font-size:13px;border:none;border-radius:12px;padding:7px 14px;background:#edf2f8;color:#6f93b4}
.lbTab.on{background:var(--accent);color:#5a4300}
#lbList{max-height:48vh;overflow-y:auto;margin:4px 0;text-align:left}
.lbRow{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:12px;margin-bottom:4px;background:#f2f6fb;border:2px solid #e2eaf4}
.lbRow.self{background:#fff6dd;border-color:var(--accent)}
.lbRank{width:30px;height:30px;border-radius:50%;background:#e3edf6;color:#46688c;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex:0 0 auto}
.lbRow:nth-child(1) .lbRank{background:#ffd34d;color:#5a4300}
.lbRow:nth-child(2) .lbRank{background:#dfe7f0;color:#5a6c80}
.lbRow:nth-child(3) .lbRank{background:#ecc59a;color:#7a4a14}
/* ===== Conductor's Sprint = RAIL RACE screen (Figma "RAIL RACE PAGE" 108:1142, 624x1318 -> cqw) ===== */
/* FULL-SCREEN (not a popup card): fill the viewport keeping the 624:1318 proportions; blue gutters on desktop so it reads as a screen, not a floating modal. Integer-px container width on phones keeps text crisp (the old fractional card width under container-type was the blur cause). */
.rrModal{align-items:center;justify-content:center;background:#0186f7;padding:0}
.rrScreen{position:relative;width:100vw;height:100vh;height:100dvh;container-type:inline-size;overflow:hidden;border-radius:0;background:linear-gradient(180deg,#0199fe 0%,#0081f6 100%);box-shadow:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
/* portrait phones: fill the whole viewport edge-to-edge (no letterbox/cut). Wide/desktop: keep the 624:1318 column so it doesn't stretch. */
@media(min-aspect-ratio:3/4){.rrScreen{width:auto;height:100dvh;aspect-ratio:624/1318}}
.rrScreen>*{position:absolute}
.rrHero{left:0;top:0;width:100%;height:31.7%;object-fit:cover;object-position:center 30%;z-index:0}
.rrDivider{left:0;right:0;top:31.2%;height:1.4cqw;background:#efb317;z-index:1}
.rrX{right:7.5%;top:4.4%;width:12.5%;aspect-ratio:1;border:0;background:none;padding:0;cursor:pointer;z-index:8}
.rrX img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}
.rrX:active{transform:translateY(2px)}
/* cyan halo behind the title (Figma Rectangle 293030270) */
.rrGlow{left:26.4%;top:32%;width:47.3%;height:21%;background:#16d6f5;border-radius:50%;filter:blur(6cqw);opacity:.5;z-index:1}
/* orange RAIL RACE title ribbon (Figma Group 1171284322) straddling the hero seam */
.rrTitle{left:18.5%;top:27.4%;width:64.2%;z-index:6}
.rrTitle img{width:100%;height:auto;display:block;filter:drop-shadow(0 0.6cqw 0.6cqw rgba(0,30,60,.28))}
/* flex-center (no fractional translateY) so glyphs land on the device pixel grid = crisper outline on iOS WebKit */
.rrTitle span{position:absolute;left:0;right:0;top:7%;height:66%;display:flex;align-items:center;justify-content:center;text-align:center;font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;color:#fff;font-size:6.14cqw;letter-spacing:0.25cqw;line-height:1;
  text-shadow:1px 0 0 #8a2a00,-1px 0 0 #8a2a00,0 1px 0 #8a2a00,0 -1px 0 #8a2a00,1px 1px 0 #8a2a00,-1px 1px 0 #8a2a00,1px -1px 0 #8a2a00,-1px -1px 0 #8a2a00}
/* blue Rank/Reward panel (Figma Rectangle 293030401) */
.rrPanel{left:9.5%;top:36%;width:80.6%;height:13.9%;background:#1680d4;border-radius:5.8cqw;z-index:1;box-shadow:inset 0 0.5cqw 0 rgba(255,255,255,.13),inset 0 -0.6cqw 0 rgba(0,40,90,.18),0 0.6cqw 0 rgba(0,40,90,.22)}
.rrColLbl{text-align:center;font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;color:#fff;font-size:6.41cqw;line-height:1;z-index:3;
  text-shadow:1px 0 0 #0a3a7a,-1px 0 0 #0a3a7a,0 1px 0 #0a3a7a,0 -1px 0 #0a3a7a,1px 1px 0 #0a3a7a,-1px 1px 0 #0a3a7a,1px -1px 0 #0a3a7a,-1px -1px 0 #0a3a7a}
.rrLblRank{left:22.2%;top:37.3%;width:22.1%}
.rrLblRew{left:57.4%;top:37.3%;width:22.1%}
.rrTrophy{left:18.4%;top:42%;width:11.7cqw;height:auto;z-index:4;filter:drop-shadow(0 0.3cqw 0.4cqw rgba(0,0,0,.3))}
.rrPill{left:23.3%;top:43.3%;width:25.2cqw;height:8.4cqw;box-sizing:border-box;display:flex;align-items:center;justify-content:flex-end;padding-right:3cqw;background:#164ccc;border:0.22cqw solid #0c3a9e;border-radius:4.3cqw;z-index:3}
.rrPill b{font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;color:#fff;font-size:4.97cqw;line-height:1;
  text-shadow:1px 0 0 #08266a,-1px 0 0 #08266a,0 1px 0 #08266a,0 -1px 0 #08266a}
.rrClock{left:62.2%;top:42%;width:13.8cqw;height:auto;z-index:3}
.rrRewX{left:60%;top:46.5%;width:22%;text-align:center;font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;color:#fff;font-size:6.09cqw;line-height:1;z-index:3;
  text-shadow:1px 0 0 #0a3a7a,-1px 0 0 #0a3a7a,0 1px 0 #0a3a7a,0 -1px 0 #0a3a7a,1px 1px 0 #0a3a7a,-1px 1px 0 #0a3a7a,1px -1px 0 #0a3a7a,-1px -1px 0 #0a3a7a}
.rrStatus{left:36.4%;top:50.7%;width:27.3cqw;height:6.8cqw;box-sizing:border-box;display:flex;align-items:center;justify-content:center;background:#32a5ff;border:0.3cqw solid #0c63b8;border-radius:3.4cqw;z-index:4;box-shadow:0 0.5cqw 0 rgba(0,40,90,.25)}
.rrStatus b{font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;color:#fff;font-size:3.53cqw;line-height:1;
  text-shadow:1px 0 0 #0a3a7a,-1px 0 0 #0a3a7a,0 1px 0 #0a3a7a,0 -1px 0 #0a3a7a}
.rrList{left:3.2%;right:3.2%;top:55.6%;bottom:14%;overflow-y:auto;-webkit-overflow-scrolling:touch;z-index:2;padding:0.5cqw 0.5cqw 0}
.rrScreen.live .rrList{bottom:3.5%}
.rrScreen.live .rrClaim{display:none}
/* ROW = the actual Figma "RACE ROW CONTAINER" (108:1007) asset, not a CSS-faked box */
.rrRow{position:relative;width:100%;height:18.46cqw;background:url("ui/rtw-rr-row.png?v=1") center/100% 100% no-repeat;margin-bottom:2.24cqw}
.rrRow.me::before{content:"";position:absolute;left:1%;right:1%;top:4%;bottom:13%;border-radius:3.2cqw;background:rgba(255,205,80,.28);pointer-events:none;z-index:1}
.rrMedal{position:absolute;left:2.5%;top:50%;transform:translateY(-50%);width:11.66cqw;height:auto;z-index:2;filter:drop-shadow(0 0.3cqw 0.4cqw rgba(0,0,0,.22))}
.rrMedalN{position:absolute;left:2.5%;width:11.66cqw;text-align:center;top:50%;transform:translateY(calc(-50% - 1cqw));font-family:'Lilita One','Baloo 2',sans-serif;font-size:4.4cqw;color:#fff;z-index:3;line-height:1;
  text-shadow:1px 0 0 #5d2110,-1px 0 0 #5d2110,0 1px 0 #5d2110,0 -1px 0 #5d2110}
.rrRankN{position:absolute;left:0;width:11%;text-align:center;top:50%;transform:translateY(-50%);font-family:'Lilita One','Baloo 2',sans-serif;font-size:5cqw;color:#fff;z-index:3;line-height:1;
  text-shadow:1px 0 0 #5d2110,-1px 0 0 #5d2110,0 1px 0 #5d2110,0 -1px 0 #5d2110}
.rrAv{position:absolute;left:18.5%;top:50%;transform:translateY(-50%);width:13.7cqw;height:13.7cqw;border-radius:3.7cqw;background:linear-gradient(180deg,#eaf4ff,#cfe6ff);border:0.28cqw solid #9cc3ec;overflow:hidden;display:flex;align-items:center;justify-content:center}
.rrAv img{width:90%;height:90%;object-fit:contain;border-radius:1.6cqw;display:block}
.rrName{position:absolute;left:33%;top:50%;transform:translateY(-50%);max-width:35%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:'Lilita One','Baloo 2',sans-serif;color:#fff;font-size:5.1cqw;line-height:1.15;padding:0.3cqw 0.9cqw;box-sizing:border-box;
  text-shadow:1px 0 0 #a5553d,-1px 0 0 #a5553d,0 1px 0 #a5553d,0 -1px 0 #a5553d,1px 1px 0 #a5553d,-1px 1px 0 #a5553d}
.rrChest{position:absolute;left:67.7%;top:50%;transform:translateY(-50%);width:11.6cqw;height:auto;z-index:2;filter:drop-shadow(0 0.3cqw 0.4cqw rgba(0,0,0,.2))}
.rrAmt{position:absolute;right:4.5%;top:50%;transform:translateY(-50%);width:11cqw}
.rrAmt img{width:100%;height:auto;display:block}
/* trophy COUNT = plain number centered on the cup (per Figma); the MEDIUM BUNDLE stroke styling below gives it contrast on the gold */
.rrAmt b{position:absolute;left:-12%;right:-12%;top:82%;transform:translateY(-50%);text-align:center;font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;font-size:5cqw;line-height:1;white-space:nowrap;z-index:3}
.rrClaim{left:31.3%;top:87.2%;width:37.4cqw;height:16.8cqw;background:#16e652;border:0.4cqw solid #0a7a2c;border-radius:5.13cqw;cursor:pointer;z-index:5;padding:0;display:flex;align-items:center;justify-content:center}
.rrClaim::before{content:"";position:absolute;left:2.5%;top:8%;width:95%;height:40%;background:#65f079;border-radius:3.8cqw 3.8cqw 0.3cqw 0.3cqw;pointer-events:none}
.rrClaim span{position:relative;z-index:2;font-family:'Lilita One','Baloo 2',sans-serif;color:#f8ffff;font-size:7.05cqw;line-height:1;
  text-shadow:1px 0 0 #0a7a2c,-1px 0 0 #0a7a2c,0 1px 0 #0a7a2c,0 -1px 0 #0a7a2c,1px 1px 0 #0a7a2c,-1px 1px 0 #0a7a2c}
.rrClaim:active{transform:translateY(3px)}
/* ALL Race text uses the shop MEDIUM BUNDLE font styling (.bdlTitle): white fill + a -webkit-text-stroke painted BEHIND the fill (paint-order:stroke = crisp, NOT the fuzzy default) + one hard navy bottom shadow. Overrides the per-element halo shadows above. */
.rrTitle span,.rrColLbl,.rrPill b,.rrRewX,.rrStatus b,.rrName,.rrMedalN,.rrRankN,.rrAmt b,.rrClaim span{
  color:#f8ffff;-webkit-text-stroke:0.55cqw #14233f;paint-order:stroke;text-shadow:0 0.5cqw 0 #14233f}
/* (Race dot now uses the shared .evDot from the event-button system) */
.lbName{flex:1;font-weight:800;font-size:14px;color:#2b4a66;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbM{font-weight:800;font-size:14px;color:#b27c14}
#lbMine{margin-top:6px;font-weight:800;font-size:13px;color:#46688c}
.lbEmpty{text-align:center;color:#6f93b4;font-weight:700;padding:18px 0}
/* sticker album */
#albCard{display:flex;align-items:center;gap:10px;width:100%;margin:2px 0 8px;background:#fff;border:2px solid #fff;
  border-radius:16px;padding:9px 12px;box-shadow:0 4px 12px rgba(40,100,160,.18);font-family:inherit;cursor:pointer;position:relative;text-align:left}
#albCard svg.aIc{width:34px;height:34px;flex:0 0 auto}
#albCard .aName{display:block;font-size:14px;font-weight:800;color:#2b4a66}
#albCard .aSub{display:block;font-size:12px;font-weight:700;color:#6f93b4;margin-top:1px}
#albCard .aPk{margin-left:auto;display:flex;align-items:center;gap:4px;background:#fff6dd;border:2px solid #ffe9b8;
  border-radius:12px;padding:5px 9px;font-weight:800;font-size:13px;color:#8a5e00}
#albCard .aPk svg{width:17px;height:17px}
#albCard .aPk.zero{opacity:.5}
.albHead{display:flex;align-items:center;justify-content:center;gap:10px;margin:4px 0 6px}
.albHead button{background:#edf2f8;border:none;border-radius:12px;width:34px;height:34px;display:flex;
  align-items:center;justify-content:center;color:#46688c;font-family:inherit}
.albHead button:disabled{opacity:.35}
.albHead .albPgName{font-weight:800;font-size:15px;color:#2b4a66;min-width:130px;text-align:center}
#albGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:6px 0}
.albStk{position:relative;border-radius:14px;padding:6px 4px;display:flex;align-items:center;justify-content:center;min-height:74px}
.albStk svg{width:56px;height:56px}
.albStk.r1{background:#f2f6fb;border:2.5px solid #dde7f2}
.albStk.r2{background:#fff6dd;border:2.5px solid #ffd34d}
.albStk.r3{background:#fde9ff;border:2.5px solid #e387f0;box-shadow:0 0 10px rgba(227,135,240,.45)}
.albStk.miss{background:#eef1f5;border:2.5px dashed #c8d4e0;box-shadow:none}
.albStk.miss svg{opacity:.22;filter:grayscale(1)}
.albStk.miss::after{content:"?";position:absolute;font-size:24px;font-weight:800;color:#9fb2c6}
.albStk .cnt2{position:absolute;right:4px;bottom:4px;background:#46688c;color:#fff;border-radius:9px;
  font-size:10px;font-weight:800;padding:1px 6px}
.stkNew{position:absolute;left:3px;top:3px;background:#7ed957;color:#1d4d10;border-radius:8px;font-size:9px;font-weight:800;padding:1px 6px;z-index:1;font-style:normal}
#albTotRow{display:flex;align-items:center;gap:8px;margin:6px 0 2px}
#albTotFill{flex:1;height:10px;border-radius:6px;background:#e3edf6;overflow:hidden}
#albTotFill i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#ff8fb0,#e8729a);transition:width .3s}
#albTotN{font-size:12px;font-weight:800;color:#46688c}
#albDaily{display:flex;gap:8px;margin:7px 0 0}
.albDayCard{flex:1;display:flex;align-items:center;gap:7px;background:#f2f6fb;border:2px solid #e2eaf4;border-radius:13px;
  padding:6px 9px;font-weight:800;font-size:11px;color:#46688c;font-family:inherit;text-align:left}
.albDayCard .sArt{width:36px;height:36px;display:flex;flex:0 0 auto}
.albDayCard .sArt svg{width:36px;height:36px}
.albDayCard.ready{border-color:var(--accent);background:#fff6dd;color:#8a5e00}
#albDots{display:flex;gap:8px;justify-content:center;margin:8px 0 0}
.albDot{width:13px;height:13px;border-radius:50%;border:2.5px solid #fff;box-shadow:0 1px 4px rgba(40,100,160,.25);opacity:.5;transition:transform .15s}
.albDot.on{opacity:1;transform:scale(1.3)}
#albShineRow{display:flex;align-items:center;gap:8px;margin:4px 0 8px;justify-content:center}
.shinePill{display:inline-flex;align-items:center;gap:4px;background:#e9f7ff;border:2px solid #c9ecff;border-radius:11px;padding:4px 10px;font-weight:800;font-size:13px;color:#2f93c8}
.shinePill svg{width:15px;height:15px}
#albSwapBtn{display:inline-flex;align-items:center;gap:5px;background:#fff;border:2px solid #e2eaf4;border-radius:11px;
  padding:5px 11px;font-weight:800;font-size:12px;color:#2b4a66;font-family:inherit}
#albSwapBtn svg{width:15px;height:15px}
#albSwapBtn.cant{opacity:.5}
#stkArt{display:flex;justify-content:center;margin:6px 0}
#stkArt svg{width:150px;height:150px}
#stkStars{display:flex;justify-content:center;gap:5px;margin:2px 0 6px}
#stkStars svg{width:25px;height:25px}
#stkCnt{font-weight:800;font-size:15px;color:#46688c;margin-bottom:6px}
#albPgRow{display:flex;align-items:center;gap:8px;margin:2px 0 6px}
#albPgFill{flex:1;height:9px;border-radius:6px;background:#e3edf6;overflow:hidden}
#albPgFill i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#ffd34d,#fdb52e);transition:width .3s}
#albPgN{font-size:12px;font-weight:800;color:#46688c}
/* pack reveal */
#packRow{display:flex;gap:10px;justify-content:center;margin:14px 0}
.pkCard{width:96px;height:118px;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;animation:pkIn .5s cubic-bezier(.34,1.56,.64,1) both}
.pkCard:nth-child(2){animation-delay:.22s}
.pkCard:nth-child(3){animation-delay:.44s}
@keyframes pkIn{0%{transform:scale(.3) rotate(-8deg);opacity:0}}
.pkCard svg{width:62px;height:62px}
.pkCard .pkTag{font-size:11px;font-weight:800;border-radius:9px;padding:2px 8px}
.pkCard .pkTag.new{background:#7ed957;color:#1d4d10}
.pkCard .pkTag.dup{background:#e3edf6;color:#46688c}
/* trophy road: vertical climb, bottom to top */
#roadList{max-height:60vh;overflow-y:auto;margin:6px 0;padding:2px 0}
#roadTrack{position:relative;display:flex;flex-direction:column;gap:20px;padding:12px 0}
.rdLine{position:absolute;left:50%;top:8px;bottom:8px;width:8px;transform:translateX(-50%);background:#e3edf6;border-radius:4px}
.rdFill{position:absolute;left:50%;bottom:8px;width:8px;transform:translateX(-50%);background:linear-gradient(180deg,#ffd34d,#fdb52e);border-radius:4px}
.rdNode{position:relative;display:flex;align-items:center;justify-content:center;min-height:56px}
.rdDot{position:relative;width:56px;height:56px;border-radius:50%;background:#fff;border:3px solid #dde7f2;
  display:flex;align-items:center;justify-content:center;z-index:1;box-shadow:0 3px 8px rgba(40,100,160,.14)}
.rdDot svg{width:34px;height:34px}
.rdNode.done .rdDot{border-color:#7ed957;opacity:.88}
.rdNode.cur .rdDot{border-color:var(--accent);box-shadow:0 0 0 5px rgba(255,211,77,.32);animation:passPulse 1.7s infinite}
.rdNode.fut .rdDot{opacity:.6}
.rdChk{position:absolute;right:-5px;bottom:-5px;background:#fff;border-radius:50%;width:21px;height:21px;
  display:flex;align-items:center;justify-content:center;border:2px solid #7ed957}
.rdLbl{position:absolute;display:flex;flex-direction:column;align-items:center;gap:3px;font-weight:800;font-size:12.5px;color:#2b4a66;width:90px;z-index:1}
.rdNode.lft .rdLbl{right:calc(50% + 46px)}
.rdNode.rgt .rdLbl{left:calc(50% + 46px)}
.rdW{font-style:normal;display:inline-flex;align-items:center;gap:3px;background:#e3edf6;color:#46688c;border-radius:9px;font-size:10.5px;font-weight:800;padding:1.5px 8px}
.rdW svg{width:11px;height:11px}
.rdNode.done .rdW{background:#dff3d8;color:#2f7d4f}
.rdNode.cur .rdW{background:#fff6dd;color:#8a5e00}
#roadWins{display:inline-flex;align-items:center;gap:5px;background:#fff6dd;border:2px solid #ffe9b8;color:#8a5e00;
  font-weight:800;font-size:13px;border-radius:11px;padding:4px 11px;margin:2px auto 0}
#roadWins svg{width:16px;height:16px}
#unlockArt{display:flex;justify-content:center;margin:8px 0}
#unlockArt svg{width:96px;height:96px}
#infoArt{display:flex;justify-content:center;margin:6px 0}
#infoArt svg{width:72px;height:72px}

/* ===== MVP polish shared design system + hamburger drawer (v0.49.61 phase 0+1) ===== */
/* ====================================================================
   RAIL FAMILY v1 — SHARED PRIMITIVES
   Place ONCE in the global stylesheet, before any surface-specific CSS.
   All four MVP surfaces (Depot, Shop, Trophy Road, Hamburger) reference
   these classes. Adding/changing a primitive here updates all surfaces.
   ==================================================================== */

:root{
  --rf-sky-1:#cfeaff;--rf-sky-2:#aee2f7;--rf-sky-3:#9fd9ff;
  --rf-ink:#1c3f63;--rf-ink-soft:#46688c;--rf-ink-mute:#5b7a96;
  --rf-blue-stroke:#2f6cc4;--rf-blue-rail:#5fb9ff;
  --rf-gold-1:#fff5c0;--rf-gold-2:#ffe27a;--rf-gold-3:#ffd34d;--rf-gold-4:#fdb52e;
  --rf-gold-stroke:#b27c14;--rf-gold-ink:#8a5e00;
  --rf-pink-1:#ffd0e2;--rf-pink-2:#ff8fb0;--rf-pink-3:#e8729a;--rf-pink-stroke:#a04764;
  --rf-green-1:#7ed957;--rf-green-2:#5fb960;--rf-green-3:#3fa83c;--rf-green-stroke:#2b8a2a;
  --rf-cream:#fff4e0;--rf-cream-warm:#fff8ec;
  --rf-tie:#a87a3e;--rf-tie-dark:#6b4a23;--rf-rail-steel:#cdd6e0;
  --rf-r-card:22px;--rf-r-row:14px;--rf-r-chip:11px;--rf-r-btn:14px;
  --rf-inset:inset 0 2px 0 rgba(255,255,255,.9), inset 0 -2px 0 rgba(40,100,160,.06);
}

/* ============ 1. CARD CHROME ============ */
.mvpCard{
  position:relative;
  background:#fff;
  border:3px solid #fff;
  border-radius:var(--rf-r-card);
  box-shadow:var(--rf-inset),0 6px 0 rgba(40,100,160,.10),0 12px 22px rgba(40,100,160,.18);
  overflow:hidden;
}
.mvpCard.gold{
  background:linear-gradient(180deg,var(--rf-cream-warm) 0%,#ffe6bf 100%);
  box-shadow:var(--rf-inset),0 4px 0 #eab85a,0 8px 16px rgba(190,140,20,.22);
}
.mvpCard.pink{
  background:linear-gradient(180deg,var(--rf-pink-1) 0%,var(--rf-pink-2) 55%,var(--rf-pink-3) 100%);
  border-color:#fff;color:#fff;
  box-shadow:0 0 0 2.5px #c43f78,inset 0 2px 0 rgba(255,255,255,.7),
             inset 0 -6px 0 rgba(180,40,90,.35),0 8px 0 rgba(28,63,99,.18),0 14px 28px rgba(28,63,99,.22);
}
.mvpCard.blue{
  background:linear-gradient(180deg,#fff 0%,#f3fbff 100%);
  box-shadow:0 0 0 2.5px var(--rf-blue-rail),var(--rf-inset),
             0 6px 0 rgba(28,63,99,.15),0 12px 22px rgba(28,63,99,.18);
}

/* ============ 2. SECTION HEADER (notched flag, matches winBanner) ============ */
.mvpSecHdr{
  position:relative;display:inline-flex;align-items:center;gap:8px;
  margin:14px auto 4px;padding:8px 16px 9px;
  border:3px solid #fff;border-radius:13px;
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:14px;letter-spacing:.4px;
  text-transform:uppercase;z-index:3;
}
.mvpSecHdr::before,.mvpSecHdr::after{
  content:"";position:absolute;top:50%;transform:translateY(-50%);
  border-top:9px solid transparent;border-bottom:9px solid transparent;z-index:-1;
}
.mvpSecHdr.gold{background:linear-gradient(180deg,var(--rf-cream-warm),#ffe6bf);color:#9c6a1e;
  box-shadow:0 3px 0 #eab85a,0 6px 13px rgba(190,140,20,.24)}
.mvpSecHdr.gold::before{left:-10px;border-right:11px solid #f2c46a}
.mvpSecHdr.gold::after {right:-10px;border-left:11px solid #f2c46a}
.mvpSecHdr.blue{background:linear-gradient(180deg,#eaf6ff,#cfe6f8);color:#2b6a9c;
  box-shadow:0 3px 0 #9bc4e3,0 6px 13px rgba(40,100,160,.22)}
.mvpSecHdr.blue::before{left:-10px;border-right:11px solid #aacde4}
.mvpSecHdr.blue::after {right:-10px;border-left:11px solid #aacde4}
.mvpSecHdr.pink{background:linear-gradient(180deg,#ffeef3,#ffd6e2);color:#c45478;
  box-shadow:0 3px 0 #ec9eb4,0 6px 13px rgba(200,90,140,.22)}
.mvpSecHdr.pink::before{left:-10px;border-right:11px solid #f3b3c4}
.mvpSecHdr.pink::after {right:-10px;border-left:11px solid #f3b3c4}
.mvpSecHdr svg{width:22px;height:22px;flex:0 0 auto;filter:drop-shadow(0 1px 0 rgba(255,255,255,.7))}

/* ============ 3. CHIP ============ */
.mvpChip{
  display:inline-flex;align-items:center;gap:5px;
  border:2px solid #fff;border-radius:var(--rf-r-chip);
  padding:4px 9px 5px;
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:12px;
}
.mvpChip svg{width:13px;height:13px;flex:0 0 auto}
.mvpChip.gold{
  background:linear-gradient(180deg,var(--rf-gold-1),var(--rf-gold-3));
  color:var(--rf-gold-ink);
  box-shadow:0 2px 0 #e6b24a,inset 0 1px 0 rgba(255,255,255,.7);
}
.mvpChip.blue{
  background:linear-gradient(180deg,#fff,#d9efff);color:var(--rf-ink);
  box-shadow:0 2px 0 #8ec7ec;
}
.mvpChip.green{
  background:linear-gradient(180deg,#dff3d8,#c6ebbb);color:#2f7d4f;
  box-shadow:0 2px 0 #9bc78c;
}
.mvpChip.pink{
  background:linear-gradient(180deg,#fff,#ffe1ec);color:var(--rf-pink-stroke);
  box-shadow:0 2px 0 var(--rf-pink-3);
}
.mvpChip.cream{
  background:#fff;color:var(--rf-ink);border-color:rgba(95,185,255,.2);
  box-shadow:0 1.5px 0 #c6dff2;
}

/* ============ 4. BUTTONS (the 3D candy "lip") ============ */
.mvpBtn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border:2px solid #fff;border-radius:var(--rf-r-btn);
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:14px;
  padding:10px 14px 11px;
  color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.18);
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:transform .1s ease,box-shadow .1s ease;
}
.mvpBtn svg{width:15px;height:15px}
.mvpBtn.green{
  background:linear-gradient(180deg,var(--rf-green-1) 0%,var(--rf-green-2) 55%,var(--rf-green-3) 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.55),inset 0 -3px 0 var(--rf-green-stroke),
             0 4px 0 var(--rf-green-stroke),0 7px 12px rgba(60,140,40,.32);
}
.mvpBtn.green:active{transform:translateY(3px);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.55),inset 0 -1px 0 var(--rf-green-stroke),
             0 1px 0 var(--rf-green-stroke),0 3px 6px rgba(60,140,40,.3)}
.mvpBtn.gold{
  color:var(--rf-gold-ink);text-shadow:0 1px 0 rgba(255,255,255,.6);
  background:linear-gradient(180deg,var(--rf-gold-1),var(--rf-gold-3) 55%,var(--rf-gold-4));
  box-shadow:inset 0 1.4px 0 rgba(255,255,255,.85),inset 0 -3px 0 #c98a16,
             0 3px 0 var(--rf-gold-stroke),0 7px 12px rgba(190,140,20,.28);
}
.mvpBtn.gold:active{transform:translateY(2px);
  box-shadow:inset 0 1.4px 0 rgba(255,255,255,.85),inset 0 -1px 0 #c98a16,0 1px 0 var(--rf-gold-stroke)}
.mvpBtn.blue{
  color:var(--rf-ink);text-shadow:0 1px 0 rgba(255,255,255,.6);
  background:linear-gradient(180deg,#fff,#d9efff);
  box-shadow:inset 0 1px 0 #fff,inset 0 -3px 0 #8ec7ec,0 3px 0 var(--rf-ink),0 6px 12px rgba(40,100,160,.18);
}
.mvpBtn.blue:active{transform:translateY(2px);
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 #8ec7ec,0 1px 0 var(--rf-ink)}
.mvpBtn.pink{
  background:linear-gradient(180deg,var(--rf-pink-1),var(--rf-pink-2) 55%,var(--rf-pink-3));
  box-shadow:inset 0 2px 0 rgba(255,255,255,.55),inset 0 -3px 0 var(--rf-pink-stroke),
             0 4px 0 var(--rf-pink-stroke),0 7px 12px rgba(200,90,140,.28);
}
.mvpBtn.pink:active{transform:translateY(3px);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.55),inset 0 -1px 0 var(--rf-pink-stroke),0 1px 0 var(--rf-pink-stroke)}
.mvpBtn.cant,.mvpBtn[disabled]{filter:saturate(.4) brightness(.95);opacity:.7;cursor:default}
.mvpBtn .mvpChip{margin-left:4px}

/* ============ 5. LIST ROW ============ */
.mvpRow{
  width:100%;
  display:flex;align-items:center;gap:11px;
  padding:12px 14px;
  background:transparent;border:0;
  border-bottom:1px dashed rgba(95,185,255,.22);
  font-family:'Baloo 2',sans-serif;font-weight:700;font-size:15px;
  color:var(--rf-ink);text-decoration:none;text-align:left;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background .14s ease,transform .12s ease;
}
.mvpRow:last-child{border-bottom:0}
.mvpRow:active{background:rgba(95,185,255,.10);transform:scale(.985)}
.mvpRow .mvpRowLbl{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mvpRow .mvpRowVal{flex:0 0 auto;display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--rf-gold-stroke)}
.mvpRow.danger{color:var(--rf-pink-stroke)}

/* ============ 5b. KAWAII ICON CHIP (leading on rows + section hdrs) ============ */
.mvpIco{
  flex:0 0 auto;
  width:36px;height:36px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#fff,#eaf6ff);
  border:2px solid #fff;
  box-shadow:0 2px 0 #c6dff2,inset 0 1.5px 0 rgba(255,255,255,.95);
}
.mvpIco svg{width:22px;height:22px;display:block}
.mvpIco.gold {background:linear-gradient(180deg,var(--rf-cream-warm),#ffe6bf);box-shadow:0 2px 0 #eab85a,inset 0 1.5px 0 rgba(255,255,255,.85)}
.mvpIco.pink {background:linear-gradient(180deg,#ffe3ec,#ffd0df);box-shadow:0 2px 0 #f2a8c2,inset 0 1.5px 0 rgba(255,255,255,.85)}
.mvpIco.green{background:linear-gradient(180deg,#dff3d8,#c6ebbb);box-shadow:0 2px 0 #9bc78c,inset 0 1.5px 0 rgba(255,255,255,.9)}

/* ============ 6. RIBBON (BEST VALUE / NEW / CURRENT) ============ */
.mvpRibbon{
  position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:9px;letter-spacing:1.2px;
  color:#fff;
  background:linear-gradient(180deg,#ff7a6b 0%,#d63a4a 100%);
  padding:3px 8px 2px;border-radius:10px;
  border:1.6px solid #fff;box-shadow:0 2px 0 var(--rf-ink);
  white-space:nowrap;z-index:4;
}
.mvpRibbon.gold{background:linear-gradient(180deg,var(--rf-gold-2),var(--rf-gold-4))}
.mvpRibbon.blue{background:linear-gradient(180deg,var(--rf-blue-rail),var(--rf-blue-stroke))}

/* ============ 7. CHEVRON ============ */
.mvpChev{width:18px;height:18px;flex:0 0 auto;color:#9fb2cf}
.mvpRow.danger .mvpChev{color:var(--rf-pink-stroke)}

/* ============ 8. WORDMARK helper (small variant) ============ */
.mvpWm{
  font-family:'Baloo 2',sans-serif;font-weight:800;line-height:1;
  color:#fff8df;-webkit-text-stroke:5px var(--rf-ink);paint-order:stroke fill;
  text-shadow:0 3px 0 var(--rf-ink),0 5px 0 rgba(28,63,99,.35);
  letter-spacing:.5px;text-transform:uppercase;
}
.mvpWm.sm{font-size:24px}
.mvpWm.md{font-size:30px}
.mvpWm.lg{font-size:36px}
.mvpWm.gold{color:#fff3d3;text-shadow:0 3px 0 var(--rf-gold-stroke),0 6px 0 rgba(28,63,99,.35)}

/* ============ ANIMATION UTILITIES ============ */
.rfStagIn{opacity:0;transform:translateY(14px);
  animation:rfStag .45s cubic-bezier(.2,1.5,.4,1) forwards;
  animation-delay:calc(60ms + var(--si,0) * 90ms);
}
@keyframes rfStag{
  0%{opacity:0;transform:translateY(14px) scale(.985)}
  60%{opacity:1;transform:translateY(-2px) scale(1.005)}
  100%{opacity:1;transform:none}
}
.rfBob{animation:rfBob 1.6s ease-in-out infinite}
@keyframes rfBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}}
.rfPulse{animation:rfPulse 1.6s ease-in-out infinite}
@keyframes rfPulse{
  0%,100%{box-shadow:0 0 0 5px rgba(255,255,255,.85),0 0 0 9px rgba(95,185,255,.55),var(--rf-lip-blue)}
  50%{box-shadow:0 0 0 7px rgba(255,255,255,.95),0 0 0 14px rgba(255,211,77,.45),var(--rf-lip-gold)}
}
.rfRays::before{content:"";position:absolute;inset:-50%;pointer-events:none;
  background:conic-gradient(from 0deg,rgba(255,255,255,.45) 0deg 8deg,transparent 8deg 36deg,
    rgba(255,255,255,.45) 36deg 44deg,transparent 44deg 72deg,
    rgba(255,255,255,.45) 72deg 80deg,transparent 80deg 108deg);
  animation:rfRays 14s linear infinite;
}
@keyframes rfRays{to{transform:rotate(360deg)}}
.rfShine{position:relative;overflow:hidden}
.rfShine::after{content:"";position:absolute;top:0;left:-40%;width:40%;height:100%;
  background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.55) 50%,transparent 100%);
  transform:skewX(-18deg);
  animation:rfShine 4.4s ease-in-out 1.2s infinite;pointer-events:none;
}
@keyframes rfShine{0%,55%{left:-40%}75%,100%{left:120%}}

/* ============ RAIL TRACK (splash + trophy road share this) ============ */
.rfRailSpine{
  background:
    linear-gradient(90deg,transparent 6px,rgba(255,255,255,.65) 6px 8px,transparent 8px) repeat-y,
    linear-gradient(90deg,transparent 26px,rgba(255,255,255,.65) 26px 28px,transparent 28px) repeat-y,
    linear-gradient(90deg,transparent 4px,var(--rf-rail-steel) 4px 10px,transparent 10px 24px,var(--rf-rail-steel) 24px 30px,transparent 30px) repeat-y,
    repeating-linear-gradient(180deg,#fff7e2 0 10px,var(--rf-tie) 10px 22px),
    var(--rf-tie-dark);
  box-shadow:inset 0 0 0 2px #4d3318;
}

@media (prefers-reduced-motion:reduce){
  .rfStagIn,.rfBob,.rfPulse,.rfShine::after,.rfRays::before{animation:none!important}
  .rfStagIn{opacity:1;transform:none}
}
/* ============ HAMBURGER + DRAWER — surface-specific ============ */
#ham.ham{
  position:absolute;top:calc(env(safe-area-inset-top) + 12px);left:12px;right:auto;
  width:46px;height:46px;padding:0;border:3px solid #fff;border-radius:15px;
  background:linear-gradient(180deg,#fff 0%,#eaf6ff 100%);
  box-shadow:0 4px 0 #c6dff2,0 8px 18px rgba(40,100,160,.22),inset 0 2px 0 rgba(255,255,255,.9);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  -webkit-tap-highlight-color:transparent;z-index:8;
  transition:transform .12s ease,box-shadow .12s ease;
}
#ham.ham svg{width:26px;height:22px;display:block}
#ham.ham:active{transform:translateY(2px);
  box-shadow:0 2px 0 #c6dff2,0 4px 10px rgba(40,100,160,.22),inset 0 2px 0 rgba(255,255,255,.9)}
body.gameOn #ham.ham{display:none}
#ham .hamDot{position:absolute;top:-4px;right:-4px;width:14px;height:14px;
  background:#ff5e6c;border:2px solid #fff;border-radius:50%;
  box-shadow:0 2px 4px rgba(200,40,60,.4);
  animation:hamDotPulse 1.6s ease-in-out infinite}
@keyframes hamDotPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}

/* Auto-offset the existing top-right floating cluster while #ham is mounted */
body.hasHam #endlessBtn,body.hasHam #lbBtn,body.hasHam #dchBtn,body.hasHam #winBtn,body.hasHam #albBtn{
  margin-top:56px;
}

.menuBackdrop{position:fixed;inset:0;z-index:30;
  background:rgba(7,20,40,.42);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  opacity:0;pointer-events:none;transition:opacity .26s ease}
.menuBackdrop.on{opacity:1;pointer-events:auto}

.menuDrawer{position:fixed;top:0;right:0;bottom:0;
  width:min(78vw,332px);z-index:31;
  display:flex;flex-direction:column;
  background:radial-gradient(120% 40% at 0% 0%,rgba(255,255,255,.55),rgba(255,255,255,0) 60%),
             linear-gradient(180deg,var(--rf-sky-3) 0%,var(--rf-sky-2) 55%,#9fd9ff 100%);
  border-left:4px solid #fff;border-radius:24px 0 0 24px;
  box-shadow:-14px 0 32px rgba(20,70,120,.30),inset 2px 0 0 rgba(255,255,255,.6);
  transform:translateX(102%);
  transition:transform .34s cubic-bezier(.22,1.2,.36,1);
  padding:0 0 env(safe-area-inset-bottom);
  font-family:'Baloo 2',system-ui,sans-serif;overflow:hidden}
.menuDrawer.on{transform:translateX(0)}

.menuHead{flex:0 0 auto;
  padding:calc(env(safe-area-inset-top) + 12px) 14px 12px 18px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:linear-gradient(180deg,var(--rf-sky-3) 0%,var(--rf-sky-2) 100%);
  border-bottom:3px solid #fff;box-shadow:0 4px 10px rgba(40,100,160,.10)}
.menuHeadInner{display:flex;align-items:center;gap:9px;min-width:0}
.menuLoco svg{width:38px;height:26px;display:block;filter:drop-shadow(0 2px 0 rgba(40,100,160,.2))}
.menuClose{flex-shrink:0}
.menuClose svg{width:22px;height:22px}

.menuBody{flex:1 1 auto;overflow-y:auto;padding:14px 14px 18px;
  display:flex;flex-direction:column;gap:12px;-webkit-overflow-scrolling:touch}
.menuCard--featured{box-shadow:var(--rf-inset),0 4px 0 #eab85a,0 8px 16px rgba(190,140,20,.22)}
.menuCard--featured .mvpRow{color:#7a5410}
.menuCard--featured .mvpRow{border-bottom-color:rgba(178,124,20,.18)}
.menuCard--featured .mvpChev{color:var(--rf-gold-stroke)}

/* row entrance stagger inside the drawer */
.menuDrawer.on .mvpRow{animation:menuRowIn .34s cubic-bezier(.22,1.2,.36,1) forwards;opacity:0;transform:translateX(14px)}
.menuDrawer.on .menuCard--featured .mvpRow:nth-child(1){animation-delay:.10s}
.menuDrawer.on .menuCard--featured .mvpRow:nth-child(2){animation-delay:.16s}
.menuDrawer.on .mvpCard:not(.menuCard--featured) .mvpRow:nth-child(1){animation-delay:.22s}
.menuDrawer.on .mvpCard:not(.menuCard--featured) .mvpRow:nth-child(2){animation-delay:.28s}
.menuDrawer.on .mvpCard:not(.menuCard--featured) .mvpRow:nth-child(3){animation-delay:.34s}
.menuDrawer.on .mvpCard:not(.menuCard--featured) .mvpRow:nth-child(4){animation-delay:.40s}
.menuDrawer.on .mvpCard:not(.menuCard--featured) .mvpRow:nth-child(5){animation-delay:.46s}
@keyframes menuRowIn{to{opacity:1;transform:translateX(0)}}

/* TOGGLE (sound) */
.menuToggle{position:relative;flex:0 0 auto;width:54px;height:30px;border-radius:15px;
  background:linear-gradient(180deg,#cfd9e6,#b6c2d2);border:2px solid #fff;
  box-shadow:0 2px 0 rgba(120,140,170,.45),inset 0 2px 4px rgba(40,60,90,.15);
  transition:background .2s ease,box-shadow .2s ease}
.menuToggleKnob{position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;
  background:linear-gradient(180deg,#fff,#eaf6ff);
  box-shadow:0 2px 4px rgba(40,60,90,.3);
  transition:transform .22s cubic-bezier(.22,1.2,.36,1)}
.menuToggle[data-on="true"]{background:linear-gradient(180deg,var(--rf-green-1),var(--rf-green-3));
  box-shadow:0 2px 0 var(--rf-green-stroke),inset 0 2px 4px rgba(255,255,255,.25)}
.menuToggle[data-on="true"] .menuToggleKnob{transform:translateX(24px)}

.menuFoot{flex:0 0 auto;display:flex;align-items:center;gap:10px;
  padding:11px 14px calc(11px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,var(--rf-sky-2),var(--rf-sky-3));
  border-top:3px solid #fff;box-shadow:0 -3px 8px rgba(40,100,160,.10)}
.menuFootLogo svg{width:36px;height:36px;display:block;filter:drop-shadow(0 2px 0 rgba(40,100,160,.22))}
.menuFootCol{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;gap:0}
.menuFootName{font-size:14px;line-height:1.1;letter-spacing:.4px}
.menuFootSub{font-size:10.5px;font-weight:700;color:#1c3f6399;line-height:1.15;margin-top:1px}
.menuFootVer{flex:0 0 auto;padding:4px 9px;font-size:11.5px}

@media (prefers-reduced-motion:reduce){
  .menuDrawer,.menuBackdrop{transition:none}
  .menuDrawer.on .mvpRow{animation:none;opacity:1;transform:none}
  #ham .hamDot{animation:none}
}

/* ===== MVP polish phase 2 — Depot surface CSS ===== */
/* ============ DEPOT — surface-specific (uses shared mvp* primitives) ============ */
#depot{padding:14px 14px 96px; background:url("ui/rtw-bg-glow.png?v=o1") no-repeat center top / 78% auto, #0287ff!important; background-blend-mode:soft-light!important}
#depot .scrBg{ display:none }
#depot .scrBg.homeBg{ display:block; position:fixed; inset:0; opacity:.13; background:url("ui/rtw-train-bg.svg?v=3") 0 0 / 320px 320px repeat; animation:rtwTrainDrift 60s linear infinite; pointer-events:none; z-index:-1 }
/* ===== DEPOT BODY redesign (Figma DEPOT PAGE > "Depot BODY Content redesign", 535-unit design -> cqw) ===== */
#depot>h1#depotTitle,#depot>p#depotSubTxt,#depot>#albCard{ display:none!important }
#dpxWrap{ container-type:inline-size; width:min(92vw,412px); margin:22px auto 0; padding-bottom:10px }
.dpxCard{ position:relative; width:100%; border-radius:6.58cqw; background:linear-gradient(180deg,#57b2ff 0%,#3ca1f7 50%,#2f93f0 100%); border:0.36cqw solid #1f74d4; box-shadow:inset 0 1.1cqw 0 rgba(255,255,255,.34), inset 0 -1.6cqw 0 rgba(0,44,98,.16), inset 0.7cqw 0 0.6cqw rgba(0,166,255,.4), inset -0.7cqw 0 0.7cqw rgba(33,106,223,.4), 0 1.1cqw 0 #1a69be; margin-bottom:2.3cqw }
.dpxTrainCard,.dpxEquipCard{ height:50.3cqw }
/* Your Train card is the GOLD variant (Figma) */
.dpxTrainCard{ background:linear-gradient(180deg,#f7ed5f 0%,#f4ba3f 100%); border:0.33cqw solid #000; box-shadow:inset 0 1.1cqw 0 rgba(255,255,255,.5), inset 0 -1.6cqw 0 rgba(150,90,10,.16), 0 1.1cqw 0 #c5851a }
.dpxTrainBox{ background:#da7300!important; border-color:#2378e0!important; box-shadow:none }
/* chuffing smoke from the loco chimney */
.dpxSmoke{ position:absolute; left:55%; top:-4%; width:18%; height:42%; pointer-events:none; z-index:4; overflow:visible }
.dpxSmoke i{ position:absolute; left:50%; bottom:0; width:4.8cqw; height:4.8cqw; border-radius:50%;
  background:radial-gradient(circle at 42% 38%, rgba(255,255,255,.98), rgba(228,237,248,.62) 56%, rgba(214,226,240,0) 72%);
  opacity:0; transform:translate(-50%,20%) scale(.3); animation:dpxPuff 2.6s ease-out infinite; will-change:transform,opacity }
.dpxSmoke i:nth-child(2){ animation-delay:.65s }
.dpxSmoke i:nth-child(3){ animation-delay:1.3s }
.dpxSmoke i:nth-child(4){ animation-delay:1.95s }
@keyframes dpxPuff{ 0%{ opacity:0; transform:translate(-50%,20%) scale(.28) } 16%{ opacity:.95 } 62%{ opacity:.6 } 100%{ opacity:0; transform:translate(-108%,-235%) scale(1.5) } }
@media (prefers-reduced-motion: reduce){ .dpxSmoke{ display:none } }
.dpxCartsCap{ position:absolute; left:63.4cqw; top:23.9cqw; width:32.5cqw; text-align:center; z-index:5; font-family:'Lilita One','Baloo 2',sans-serif; font-weight:400; color:#f8ffff; font-size:3.88cqw; line-height:1;
  text-shadow:1px 0 0 #000,-1px 0 0 #000,0 1px 0 #000,0 -1px 0 #000,1px 1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000,-1px -1px 0 #000 }
.dpxShopCard{ padding-bottom:3.6cqw }
.dpxTitle{ position:absolute; left:0; right:0; top:2.62cqw; text-align:center; font-family:'Lilita One','Baloo 2',sans-serif; font-weight:400; color:#fff; font-size:6.77cqw; line-height:1; z-index:3;
  text-shadow:1px 0 0 #00316d,-1px 0 0 #00316d,0 1px 0 #00316d,0 -1px 0 #00316d,1px 1px 0 #00316d,-1px 1px 0 #00316d,1px -1px 0 #00316d,-1px -1px 0 #00316d,0 2px 0 #00316d }
.dpxTitleShop{ position:relative; top:0; padding:2.6cqw 0 2.2cqw }
.dpxBadge{ position:absolute; display:flex; align-items:center; justify-content:center; background:#ffcf56; border:0.33cqw solid #000; border-radius:2.4cqw; font-family:'Lilita One','Baloo 2',sans-serif; font-weight:400; color:#f8ffff; line-height:1; z-index:6; box-shadow:0 0.37cqw 0 #000; padding-bottom:.3cqw;
  text-shadow:1px 0 0 #000,-1px 0 0 #000,0 1px 0 #000,0 -1px 0 #000 }
.dpxTitleBadge{ left:41.3cqw; top:12.1cqw; width:17.2cqw; height:5.2cqw; font-size:3.5cqw }
.dpxBox{ position:absolute; left:1.7cqw; top:14cqw; width:96.5cqw; height:32.9cqw; background:#0298fe; border:0.3cqw solid #2378e0; border-radius:4.94cqw; box-shadow:inset 0 0.5cqw 1cqw rgba(0,40,90,.25) }
.dpxArt{ position:absolute; inset:1cqw; display:flex; align-items:center; justify-content:center; pointer-events:none }
.dpxArt img{ max-width:100%; max-height:100%; object-fit:contain; display:block; transform:translateY(2cqw) }
.dpxUpg{ position:absolute; left:63.4cqw; top:29.7cqw; width:32.5cqw; height:14.6cqw; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.2cqw; cursor:pointer; z-index:5; padding:0;
  background:#16e652; border:0.36cqw solid #000; border-radius:4.5cqw }
.dpxUpg::before,.dpxBuy::before,.dpxUp::before{ content:""; position:absolute; left:2.5%; top:7%; width:95%; height:41%; background:#65f079; border-radius:3.4cqw 3.4cqw 0.3cqw 0.3cqw; pointer-events:none }
.dpxUpg::after,.dpxBuy::after,.dpxUp::after{ content:""; position:absolute; left:6%; top:13%; width:1.31cqw; height:1.31cqw; border-radius:50%; background:#fff8d9; filter:blur(0.25cqw); pointer-events:none; z-index:2 }
/* green CTA inner bevel (Figma INNER_SHADOW #A2FFCA top + #209F5C bottom) */
.dpxUpg,.dpxBuy,.dpxOwn .dpxUp{ box-shadow:inset 0 0.62cqw 0 rgba(162,255,202,.95), inset 0 -1.1cqw 0 rgba(32,159,92,.55) }
.dpxUpgTop{ position:relative; z-index:2; font-family:'Lilita One','Baloo 2',sans-serif; font-weight:400; color:#f8ffff; font-size:3.88cqw; line-height:1;
  text-shadow:1px 0 0 #000,-1px 0 0 #000,0 1px 0 #000,0 -1px 0 #000,1px 1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000,-1px -1px 0 #000 }
.dpxUpgCost{ position:relative; z-index:2; display:flex; align-items:center; gap:1cqw }
.dpxCoin{ width:5.8cqw; height:6cqw; object-fit:contain; display:block }
.dpxUpgCost b,.dpxBuy b,.dpxUp b{ font-family:'Lilita One','Baloo 2',sans-serif; font-weight:400; color:#f8ffff; font-size:5.1cqw; line-height:1;
  text-shadow:1px 0 0 #000,-1px 0 0 #000,0 1px 0 #000,0 -1px 0 #000,1px 1px 0 #000,-1px 1px 0 #000 }
.dpxUpg.maxed,.dpxBuy.maxed,.dpxUp.maxed{ filter:grayscale(.45) brightness(.94); cursor:default }
.dpxEquipRow{ position:absolute; left:1.7cqw; top:14cqw; width:96.5cqw; height:32.9cqw; background:#0298fe; border:0.3cqw solid #2378e0; border-radius:4.94cqw; display:flex; align-items:flex-start; gap:1.7cqw; padding:1.2cqw 1.7cqw 0 }
.dpxSlot{ position:relative; flex:1 1 0; height:30.5cqw; border-radius:4.3cqw 4.94cqw 4.94cqw 4.94cqw }
.dpxSlot.empty{ background:#0067cc; border:1.5cqw dashed #2378e0 }
.dpxSlot.filled{ background:#0067cc; border:0.3cqw solid #2378e0; cursor:pointer }
.dpxPlus{ position:absolute; left:50%; top:37.7%; transform:translate(-50%,-50%); width:9.16cqw; height:9.91cqw; display:flex; align-items:center; justify-content:center; background:#00e364; border:0.37cqw solid #000; border-radius:2.62cqw; box-shadow:inset 0 1cqw 0 rgba(175,255,205,.55), inset 0 -1.2cqw 0 rgba(0,90,35,.3) }
.dpxPlus::after{ content:"+"; font-family:'Lilita One',sans-serif; color:#fff; font-size:9.72cqw; line-height:0; margin-top:-.6cqw;
  text-shadow:1px 0 0 #05853b,-1px 0 0 #05853b,0 1px 0 #05853b,0 -1px 0 #05853b }
.dpxSlotName{ position:absolute; left:0; right:0; bottom:3.36cqw; text-align:center; font-family:'Lilita One','Baloo 2',sans-serif; font-weight:400; color:#fff; font-size:4.49cqw; line-height:1;
  text-shadow:1px 0 0 #000,-1px 0 0 #000,0 1px 0 #000,0 -1px 0 #000,1px 1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000,-1px -1px 0 #000 }
.dpxSlot .dpxArt{ inset:1.4cqw 1cqw 6.5cqw }
.dpxSlot .dpxBadge{ left:50%; transform:translateX(-50%); top:-0.56cqw; width:14.95cqw; height:4.49cqw; font-size:3.01cqw }
.dpxSlot .dpxSwitch{ position:absolute; top:-2.06cqw; right:-1.87cqw; width:6.73cqw; height:6.73cqw; z-index:7; pointer-events:none; filter:drop-shadow(0 0.3cqw 0.45cqw rgba(0,0,0,.3)) }
.dpxShop{ display:flex; flex-direction:column; gap:2.9cqw }
.dpxShopSec{ position:relative; width:96cqw; height:79.4cqw; margin:0 auto; background:#0298fe; border:0.3cqw solid #2378e0; border-radius:4.93cqw }
.dpxShopHdr{ position:absolute; left:3.74cqw; top:1.87cqw; width:92.7cqw; height:20.6cqw; background:#0067cc; border:0.3cqw solid #2378e0; border-radius:4.3cqw 4.93cqw 4.93cqw 4.93cqw }
.dpxShopName{ position:absolute; left:9.16cqw; top:5.6cqw; font-family:'Lilita One','Baloo 2',sans-serif; font-weight:400; color:#fff; font-size:6cqw; line-height:1;
  text-shadow:1px 0 0 #00316d,-1px 0 0 #00316d,0 1px 0 #00316d,0 -1px 0 #00316d,1px 1px 0 #00316d,-1px 1px 0 #00316d,1px -1px 0 #00316d,-1px -1px 0 #00316d }
.dpxOwned{ position:absolute; left:9.53cqw; top:14.4cqw; font-family:'Lilita One','Baloo 2',sans-serif; font-weight:400; color:#fff; font-size:4.3cqw; line-height:1;
  text-shadow:1px 0 0 #00316d,-1px 0 0 #00316d,0 1px 0 #00316d,0 -1px 0 #00316d }
.dpxBuy{ position:absolute; left:58.7cqw; top:4.5cqw; width:33.3cqw; height:10.3cqw; display:flex; align-items:center; justify-content:center; gap:1cqw; cursor:pointer; padding:0;
  background:#16e652; border:0.37cqw solid #000; border-radius:4.1cqw }
.dpxBuy .dpxCoin,.dpxBuy b{ position:relative; z-index:2 }
.dpxBuy.dpxFree b{ font-size:4.2cqw; letter-spacing:0.2cqw }
.dpxBuy.claimPulse{ animation:claimPulse 1s ease-in-out infinite }
@keyframes claimPulse{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.07) } }
/* booster TEACH cue: no box — the whole button SHINES (glow + grow pulse) with a finger above it */
#bDyn.dynTeach, .boost.boostTeach{ animation:boostShine 1.05s ease-in-out infinite; z-index:6 }
@keyframes boostShine{
  0%,100%{ transform:scale(1); filter:drop-shadow(0 2px 3px rgba(0,0,0,.4)) brightness(1) }
  50%{ transform:scale(1.12); filter:drop-shadow(0 0 12px rgba(255,242,128,.98)) drop-shadow(0 0 5px rgba(255,206,64,.92)) brightness(1.18) } }
.dpxShopRow{ position:absolute; left:1.3cqw; top:28.22cqw; width:93.4cqw; height:48cqw; display:flex; align-items:flex-start; gap:1.6cqw; padding:1.7cqw 1.5cqw 0 }
.dpxOwn{ position:relative; flex:1 1 0; height:43.55cqw; border-radius:6.54cqw }
.dpxOwn.have{ background:#efb13f; border:0.33cqw solid #000; box-shadow:inset 0 0.56cqw 0.5cqw rgba(253,218,78,1), inset 0 -0.75cqw 0.5cqw rgba(223,116,33,1), inset 0.75cqw 0 0.67cqw rgba(223,116,33,.9), inset -0.75cqw 0 0.67cqw rgba(223,116,33,.9) }
.dpxOwn.gap{ background:#0067cc; border:1.5cqw dashed #2378e0; cursor:pointer }
.dpxOwnWin{ position:absolute; left:5.45%; top:4.3%; width:88.5%; height:74.7%; background:#ffeede; border:0.19cqw solid #946613; border-radius:4.3cqw; box-shadow:inset 0 0.5cqw 0.5cqw rgba(189,154,132,.55), inset 0 -0.4cqw 0.4cqw rgba(255,252,241,.8) }
.dpxOwn .dpxArt{ inset:0 }
.dpxOwn .dpxBadge{ left:50%; transform:translateX(-50%); top:-1.68cqw; width:17cqw; height:5.2cqw; font-size:3.4cqw }
.dpxOwn .dpxUp{ position:absolute; left:50%; transform:translateX(-50%); bottom:-2.8cqw; width:25.8cqw; height:10.3cqw; display:flex; align-items:center; justify-content:center; gap:.8cqw; cursor:pointer; padding:0;
  background:#16e652; border:0.37cqw solid #000; border-radius:4.1cqw }
.dpxOwn .dpxUp .dpxCoin,.dpxOwn .dpxUp b{ position:relative; z-index:2 }

/* ===== DEPOT PAGE v2 (Figma 114:2478) — gold-framed cyan panels + MEDIUM BUNDLE (.bdlTitle) fonts.
   Per the brief: ALL depot text uses the shop MEDIUM BUNDLE styling (Lilita One, white fill, stroke
   painted behind via paint-order, one hard bottom shadow); stroke COLOR matches the Figma per element
   (black -> the bundle default #14233f; otherwise the Figma colour). ===== */
#depot .dpxCard{ background:linear-gradient(180deg,#00ddff 0%,#00baff 100%) }
#depot .dpxTrainCard{ background:linear-gradient(180deg,#ffcc26 0%,#ffc826 100%) }
#depot .dpxCard, #depot .dpxTrainCard{ border:0.36cqw solid #000;
  box-shadow:0 0 0 0.2cqw #a8560c, 0 0 0 0.52cqw #ffd76b, inset 0 1.2cqw 0 rgba(255,255,255,.30), inset 0 -1.5cqw 0 rgba(0,0,0,.10), 0 1.2cqw 0 0.52cqw rgba(0,0,0,.10) }
#depot .dpxOwn.have{ background:#ffbe26 }
#depot .dpxBadge{ background:#ffcc26 }
/* fonts: MEDIUM BUNDLE treatment, per-element stroke colour */
#depot .dpxTitle,#depot .dpxCartsCap,#depot .dpxBadge,#depot .dpxUpgTop,#depot .dpxUpgCost b,#depot .dpxBuy b,#depot .dpxUp b,#depot .dpxSlotName,#depot .dpxShopName,#depot .dpxOwned{ color:#f8ffff; paint-order:stroke }
#depot .dpxTitle{ -webkit-text-stroke:0.55cqw #00316d; text-shadow:0 0.5cqw 0 #00316d }
#depot .dpxTrainCard .dpxTitle{ -webkit-text-stroke:0.55cqw #863323; text-shadow:0 0.5cqw 0 #863323 }
#depot .dpxCartsCap{ -webkit-text-stroke:0.31cqw #14233f; text-shadow:0 0.29cqw 0 #14233f }
#depot .dpxBadge{ -webkit-text-stroke:0.27cqw #863323; text-shadow:0 0.24cqw 0 #863323 }
#depot .dpxUpgTop{ -webkit-text-stroke:0.31cqw #14233f; text-shadow:0 0.29cqw 0 #14233f }
#depot .dpxUpgCost b,#depot .dpxBuy b,#depot .dpxUp b{ -webkit-text-stroke:0.41cqw #14233f; text-shadow:0 0.37cqw 0 #14233f }
#depot .dpxSlotName{ -webkit-text-stroke:0.36cqw #14233f; text-shadow:0 0.33cqw 0 #14233f }
#depot .dpxShopName{ -webkit-text-stroke:0.49cqw #00316d; text-shadow:0 0.44cqw 0 #00316d }
#depot .dpxOwned{ -webkit-text-stroke:0.35cqw #00316d; text-shadow:0 0.32cqw 0 #00316d }
#depot .dpxPlus::after{ color:#f8ffff; -webkit-text-stroke:0.79cqw #05853b; paint-order:stroke; text-shadow:0 0.71cqw 0 #05853b }
/* #depot is a flex column; default flex-shrink squishes tall sections to fit the viewport and
   .mvpCard overflow:hidden then clips them ("nested boxes, no scroll"). Keep natural heights so
   the whole page scrolls as one long column instead. */
#depot>*{flex-shrink:0}
#depot h1.mvpWm{margin:8px 0 2px;text-align:center}
#depot .sub{margin:0 0 6px;text-align:center}
#depot .pillRow{display:flex;justify-content:center;margin:4px 0 10px}
#depot .mvpCard{width:min(92vw,360px);margin:14px auto 0;padding:0}

/* hero diorama */
#depot .dpHero{padding-bottom:12px}
#depot .dpDio{
  position:absolute;left:0;right:0;top:54px;height:120px;
  background:linear-gradient(180deg,var(--rf-sky-1) 0%,#e7f6ff 60%,#fff 100%);
  pointer-events:none;overflow:hidden;
  border-bottom:1px dashed rgba(40,100,160,.12);
}
#depot .dpCloud{position:absolute;background:#fff;border-radius:50%;
  box-shadow:14px 4px 0 -2px #fff,-14px 4px 0 -3px #fff;opacity:.95}
#depot .dpCloud.c1{width:26px;height:14px;top:14px;left:18%;animation:dpDrift 22s linear infinite}
#depot .dpCloud.c2{width:34px;height:18px;top:8px;left:62%;animation:dpDrift 30s linear infinite reverse;animation-delay:-7s}
#depot .dpCloud.c3{width:22px;height:12px;top:30px;left:40%;animation:dpDrift 26s linear infinite;animation-delay:-12s}
#depot .dpHills{position:absolute;left:-10%;right:-10%;bottom:24px;height:46px}
#depot .dpHills span{position:absolute;bottom:0;border-radius:50% 50% 0 0 / 90% 90% 0 0}
#depot .dpHills span:nth-child(1){left:0;width:55%;height:34px;background:#bfe4c5}
#depot .dpHills span:nth-child(2){left:32%;width:55%;height:44px;background:#a9d8b0}
#depot .dpHills span:nth-child(3){left:62%;width:55%;height:30px;background:#cdebd2}
#depot .dpRail{position:absolute;left:0;right:0;bottom:6px;height:18px;
  display:flex;align-items:center;justify-content:space-evenly;
  background:linear-gradient(180deg,transparent 0,transparent 7px,#fff 7px,#fff 10px,transparent 10px)}
#depot .dpRail i{display:block;width:14px;height:8px;background:#8a5a2b;border-radius:2px;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.18)}
@keyframes dpDrift{0%{transform:translateX(0)}100%{transform:translateX(40px)}}

#depot .dpHeroInner{position:relative;z-index:2;padding:8px 12px 0}
#depot .dpHeroSub{margin:0 0 4px;text-align:left;color:var(--rf-ink-mute)}
#depot .dpChainStage{
  position:relative;min-height:84px;margin:6px 0 4px;
  display:flex;align-items:flex-end;justify-content:center;gap:4px;
  filter:drop-shadow(0 4px 0 rgba(40,100,160,.18)) drop-shadow(0 6px 8px rgba(40,100,160,.18));
}
#depot .dpCartList{margin-top:8px;border-top:1px dashed rgba(40,100,160,.14);padding-top:6px}

#depot .dpListWrap{padding:4px 12px 12px}
/* SAFE re-skin of renderActiveTrain / renderTrainUp / renderFuse rows */
#depot .dpListWrap .cartCard,
#depot .dpCartList .cartCard{
  border-bottom:1px dashed rgba(40,100,160,.12);padding:11px 4px;
}
#depot .dpListWrap .cartCard:last-child,#depot .dpCartList .cartCard:last-child{border-bottom:none}

/* The existing .buyBtn nodes inside #trainUp / #fuseBox get the shared green CTA look
   by promoting them in JS (one-liner; see interactions). */
#depot .buyBtn{
  /* fallback skin if JS promotion hasn't run yet */
  border:2px solid #fff;border-radius:14px;
  background:linear-gradient(180deg,var(--rf-green-1),var(--rf-green-3));
  color:#fff;font-family:inherit;font-weight:800;font-size:14px;
  padding:9px 11px 10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 0 rgba(0,0,0,.12),
             0 4px 0 var(--rf-green-stroke),0 7px 12px rgba(60,140,40,.32);
  text-shadow:0 1px 0 rgba(0,0,0,.18);
}
#depot .buyBtn:active{transform:translateY(2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 1px 0 var(--rf-green-stroke),0 3px 6px rgba(60,140,40,.3)}
#depot .buyBtn.cant{filter:saturate(.35);opacity:.65}
#depot .buyBtn .cost,#depot .buyBtn .goldCost{
  display:inline-flex;align-items:center;gap:4px;
  background:#fff;color:var(--rf-gold-stroke);
  border-radius:10px;padding:3px 8px 4px;margin-left:4px;font-weight:800;
}

/* ===== Depot fleet redesign — slots / loco / fleet / cart picker ===== */
#depot .dpLocoBar{display:flex;align-items:center;gap:10px;margin-top:8px;padding-top:10px;border-top:1px dashed rgba(40,100,160,.16)}
#depot .dpLocoBar .dpLocoIco{flex:0 0 46px;width:46px;display:flex;justify-content:center}
#depot .dpLocoBar .dpLocoIco svg{width:46px;height:auto}
#depot .dpLocoBar .dpLocoInfo{flex:1;min-width:0}
#depot .dpLocoBar .dpLocoInfo b{display:flex;align-items:center;font-size:15px;color:#1c3f63}
#depot .dpLocoBar .dpLocoInfo span{display:block;color:#6b8199;font-size:12px;font-weight:700;margin-top:2px}
#depot .slotCard{cursor:default}
#depot .slotIco{flex:0 0 64px;width:64px;display:flex;align-items:center;justify-content:center}
#depot .slotIco.dim{opacity:.5}
#depot .slotEmpty{background:#f6fafd}
#depot .slotLocked{opacity:.9}
#depot .slotLocked .slotIco svg{width:30px;height:30px}
#depot .buyBtn.alt{background:linear-gradient(180deg,#7cc0ff,#3f8ee0);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 0 rgba(0,0,0,.12),0 4px 0 #2c6bb0,0 7px 12px rgba(40,110,180,.32)}
#depot .buyBtn.alt:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 1px 0 #2c6bb0}
#depot .buyBtn.small{font-size:12px;padding:9px 12px 10px;min-height:42px;box-sizing:border-box}
#depot .buyBtn svg{vertical-align:-2px}
#depot .fleetHead{margin-top:4px}
#depot .fleetCart{padding-left:16px;background:rgba(40,100,160,.04)}
#depot .fleetCartLv{flex:0 0 64px;width:64px;display:flex;justify-content:center}
#depot .dpPulse{animation:dpPulse 1.1s ease-out 1}
@keyframes dpPulse{0%{box-shadow:0 0 0 0 rgba(255,180,40,.55)}100%{box-shadow:0 0 0 16px rgba(255,180,40,0)}}
#cartPicker .pickCard{width:min(92vw,380px);max-height:78vh;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#ffffff,#eef6fd);border:2px solid #fff;border-radius:22px;
  box-shadow:0 18px 50px rgba(0,0,0,.4);overflow:hidden;animation:pop .3s}
#cartPicker .pickHdr{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;
  font-weight:800;font-size:17px;color:#1c3f63;background:linear-gradient(180deg,#dff0ff,#cfe6fb)}
#cartPicker .pickX{border:none;background:rgba(28,63,99,.12);color:#1c3f63;width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer}
#cartPicker .pickX svg{width:16px;height:16px}
#cartPicker .pickList{padding:10px 12px 14px;overflow-y:auto;display:flex;flex-direction:column;gap:8px}
#cartPicker .pickOpt{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  border:2px solid #e3edf6;background:#fff;border-radius:14px;padding:8px 10px;cursor:pointer;font-family:inherit}
#cartPicker .pickOpt:active{transform:scale(.98)}
#cartPicker .pickOpt.cur{border-color:#9bd6a6;background:#f1faf1}
#cartPicker .pickOpt .slotIco{flex:0 0 56px;width:56px}
#cartPicker .pickOpt .slotIco .cartArt{width:50px;height:36px}
#cartPicker .pickOpt .cartInfo{flex:1}
#cartPicker .pickOpt .cartInfo b{display:block;color:#1c3f63;font-size:15px}
#cartPicker .pickOpt .cartInfo span{display:block;color:#6b8199;font-size:12px;font-weight:700}
#cartPicker .pickCur{margin-left:auto;color:#2f7d4f;font-weight:800;font-size:12px}
#cartPicker .pickRemove{border-color:#f1c5bf;background:#fdf3f1}
#cartPicker .pickRemove b{color:#c0392b}
#cartPicker .pickNone{text-align:center;color:#6b8199;font-weight:700;font-size:14px;padding:18px 8px}

/* ===== MVP polish phase 3 — Shop surface CSS ===== */
/* ============ SHOP — surface-specific (uses shared mvp* primitives) ============ */
#shopScr.shopScr2{
  padding:0 0 100px;
  background:linear-gradient(180deg,#2069c8 0%,#184a96 100%)!important;
  min-height:100vh;
}
#shopScr #shopTitle, #shopScr > .sub, #shopScr .surfaceHead, #shopScr .mvpSecHdr, #shopScr .zoneSep{ display:none!important }
#shopScr .mvpCard{ background:none!important;border:0!important;box-shadow:none!important;padding:0!important;width:min(86vw,384px)!important;margin:0 auto 2vw!important;overflow:visible!important;height:auto!important }
/* ===== in-LEVEL shop overlay: tap the gold pill mid-run -> pause + shop over the game (no bottom nav),
   red X (reused close asset) top-right to close + resume. Reuses #shopScr so all its styles apply. ===== */
#shopScr.lvlOvl{ display:flex!important; background:rgba(8,12,26,.88)!important; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  padding-top:calc(env(safe-area-inset-top) + 18vw)!important; padding-bottom:calc(8vw + env(safe-area-inset-bottom))!important }
#shopScr.lvlOvl .shopHead{ display:none!important }
.lvlShopX{ position:fixed; top:calc(env(safe-area-inset-top) + 12px); right:3.5vw; width:13vw; max-width:60px; aspect-ratio:1; border:0; background:none; padding:0; cursor:pointer; z-index:16; display:none }
.lvlShopX img{ width:100%; height:100%; display:block; filter:drop-shadow(0 3px 4px rgba(0,0,0,.4)) }
.lvlShopX:active{ transform:translateY(2px) }
#shopScr.lvlOvl .lvlShopX{ display:block }
#shopScr .rfShine::after{ display:none } /* the shine sweep needs overflow:hidden; drop it so cards aren't clipped */
#shopScr .pillRow{ margin:2.5vw auto 0 }
/* awning at the top edge (full-bleed; #shopScr has no top padding); resource bar OVERLAID on it,
   lowered to the same Y as the Depot/Start bar via the .tbar top below */
#shopScr .shopHead{ position:relative;width:100vw;left:50%;transform:translateX(-50%);margin:0 0 1vw }
#shopScr .shopAwning{ width:100%;line-height:0;margin:0;transform-origin:top center }
#shopScr .shopAwning img{ width:100%;display:block }
/* the red+white awning unrolls down into place each time you enter the shop */
#shopScr .shopAwning.rollIn{ animation:shopAwningRoll .55s cubic-bezier(.2,.95,.3,1.12) both;will-change:transform }
@keyframes shopAwningRoll{
  0%{ transform:scaleY(0);opacity:.35 }
  55%{ opacity:1 }
  72%{ transform:scaleY(1.06) }
  87%{ transform:scaleY(.98) }
  100%{ transform:scaleY(1);opacity:1 }
}
@media (prefers-reduced-motion:reduce){ #shopScr .shopAwning.rollIn{ animation:none } }
/* the shared .tbar bar, OVERLAID on the awning (all other bar styling comes from the global .tbar rules) */
#shopScr .shopHead .tbar{ position:absolute;left:50%;top:calc(env(safe-area-inset-top) + 16px);transform:translateX(-50%);z-index:2;width:min(96vw,448px) }   /* match Depot bar position */
/* in-game booster buttons use the Figma PNGs */
#boosters .boost .boostImg2{ width:67%;height:67%;object-fit:contain;display:block;margin:auto;pointer-events:none }
#shopScr .shopHdr{ display:flex!important } /* Figma blue section banner */
.zoneSep{display:flex;justify-content:center;margin:14px 0 4px}
.zoneSep span{width:60%;height:2px;border-radius:2px;
  background:repeating-linear-gradient(90deg,var(--rf-ink) 0 6px,transparent 6px 12px);opacity:.18}

/* ===== PREMIUM HERO ===== */
#shopScr .shopHero{padding:0;min-height:1px}
#shopScr .shopHero:empty{display:none}
#shopScr .shopHero > *{
  position:relative;z-index:1;padding:16px 16px 18px;color:#fff;
  font-family:'Baloo 2',sans-serif;font-weight:800;
  text-shadow:0 1.5px 0 rgba(170,40,90,.55);
}
/* primary green CTA inside the hero — promoted in JS to .mvpBtn.green (see interactions),
   but a fallback skin so it always reads right */
#shopScr .shopHero button,#shopScr .shopHero .buyBtn{
  display:block;width:100%;font-family:'Baloo 2',sans-serif;font-weight:800;font-size:18px;
  color:#fff;letter-spacing:.4px;padding:14px 14px 16px;border-radius:18px;border:2px solid #fff;
  background:linear-gradient(180deg,var(--rf-green-1) 0%,var(--rf-green-2) 55%,var(--rf-green-3) 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.55),inset 0 -5px 0 var(--rf-green-stroke),
             0 5px 0 var(--rf-ink),0 10px 16px rgba(28,63,99,.25);
  text-shadow:0 1.5px 0 #1c5a1c;margin-top:10px;cursor:pointer;
}
#shopScr .shopHero button:active{transform:translateY(3px);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.55),inset 0 -2px 0 var(--rf-green-stroke),0 2px 0 var(--rf-ink)}

/* ===== TIER (gold packs) ===== */
#shopScr .shopTier{padding:14px 12px 12px}
#shopScr .shopTier > *{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
#shopScr .shopTier > * > *{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:14px 6px 10px;
  background:linear-gradient(180deg,#e8f6ff 0%,#cfeaff 100%);
  border:2.4px solid #fff;border-radius:16px;
  box-shadow:0 0 0 2px var(--rf-blue-rail),inset 0 1.5px 0 rgba(255,255,255,.8),
             inset 0 -4px 0 rgba(70,130,180,.25),0 4px 0 rgba(28,63,99,.15);
  font-family:'Baloo 2',sans-serif;font-weight:800;color:var(--rf-ink);text-align:center;
}
#shopScr .shopTier > * > *:nth-child(2){
  background:linear-gradient(180deg,#fff7d6 0%,var(--rf-gold-2) 100%);
  box-shadow:0 0 0 2px var(--rf-gold-4),inset 0 1.5px 0 rgba(255,255,255,.85),
             inset 0 -4px 0 rgba(180,124,20,.3),0 5px 0 rgba(28,63,99,.18);
  transform:translateY(-4px);
}
#shopScr .shopTier > * > *:nth-child(3){
  background:linear-gradient(180deg,var(--rf-pink-1) 0%,var(--rf-pink-2) 100%);
  box-shadow:0 0 0 2px var(--rf-pink-3),inset 0 1.5px 0 rgba(255,255,255,.7),
             inset 0 -4px 0 rgba(180,40,90,.35),0 4px 0 rgba(28,63,99,.15);
  color:#fff;text-shadow:0 1.2px 0 rgba(180,40,90,.55);
}
#shopScr .shopTier > * > *:nth-child(3)::before{
  content:"BEST VALUE";position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:9px;letter-spacing:1.2px;color:#fff;
  background:linear-gradient(180deg,#ff7a6b 0%,#d63a4a 100%);
  padding:3px 8px 2px;border-radius:10px;border:1.6px solid #fff;box-shadow:0 2px 0 var(--rf-ink);
  white-space:nowrap;
}
#shopScr .shopTier svg{width:42px;height:42px;filter:drop-shadow(0 2px 0 rgba(28,63,99,.18))}
#shopScr .shopTier button{
  width:100%;font-family:'Baloo 2',sans-serif;font-weight:800;font-size:13px;color:var(--rf-ink);
  padding:7px 6px 8px;border-radius:12px;border:2px solid #fff;
  background:linear-gradient(180deg,#fff 0%,#d9efff 100%);
  box-shadow:inset 0 1px 0 #fff,inset 0 -3px 0 #8ec7ec,0 3px 0 var(--rf-ink);
  cursor:pointer;margin-top:2px;
}
#shopScr .shopTier > * > *:nth-child(3) button{
  background:linear-gradient(180deg,#fff 0%,#ffe1ec 100%);
  box-shadow:inset 0 1px 0 #fff,inset 0 -3px 0 var(--rf-pink-3),0 3px 0 var(--rf-ink);
}
#shopScr .shopTier button:active{transform:translateY(2px);
  box-shadow:inset 0 1px 0 #fff,0 1px 0 var(--rf-ink)}

/* tier card pop-in (staggered) */
#shopScr .shopTier > * > *{animation:tierPop .4s cubic-bezier(.2,.9,.3,1.4) backwards}
#shopScr .shopTier > * > *:nth-child(1){animation-delay:.30s}
#shopScr .shopTier > * > *:nth-child(2){animation-delay:.38s;animation-name:tierPopMid}
#shopScr .shopTier > * > *:nth-child(3){animation-delay:.46s}
@keyframes tierPop{from{opacity:0;transform:translateY(8px) scale(.92)}}
@keyframes tierPopMid{from{opacity:0;transform:translateY(8px) scale(.92)}to{opacity:1;transform:translateY(-4px) scale(1)}}

/* ===== BOOSTER GRID ===== */
#shopScr .shopBoost{padding:14px 12px 14px;
  box-shadow:0 0 0 2.5px var(--rf-gold-4),var(--rf-inset),0 6px 0 rgba(178,124,20,.25),0 12px 22px rgba(28,63,99,.16)}
#shopScr .shopBoost > *{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
#shopScr .shopBoost > * > *{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:12px 4px 8px;
  background:linear-gradient(180deg,#fff7e0 0%,#ffe7a8 100%);
  border:2.4px solid #fff;border-radius:18px;
  box-shadow:0 0 0 2px var(--rf-gold-4),inset 0 1.5px 0 rgba(255,255,255,.85),
             inset 0 -4px 0 rgba(180,124,20,.3),0 4px 0 rgba(28,63,99,.15);
  font-family:'Baloo 2',sans-serif;font-weight:800;color:#5a3700;text-align:center;
}
#shopScr .shopBoost > * > * svg:first-child{
  width:56px;height:56px;
  background:radial-gradient(circle at 35% 30%,#fff 0%,#d9efff 60%,var(--rf-sky-2) 100%);
  border-radius:50%;padding:6px;
  box-shadow:inset 0 -3px 0 rgba(70,130,180,.25),0 2px 0 rgba(28,63,99,.18);
}
#shopScr .shopBoost button{
  width:100%;font-family:'Baloo 2',sans-serif;font-weight:800;font-size:13px;color:#5a3700;
  padding:7px 6px 9px;border-radius:14px;border:2px solid #fff;
  background:linear-gradient(180deg,var(--rf-gold-1) 0%,var(--rf-gold-3) 55%,var(--rf-gold-4) 100%);
  box-shadow:inset 0 1.4px 0 rgba(255,255,255,.85),inset 0 -3px 0 #c98a16,0 3px 0 var(--rf-ink);
  cursor:pointer;margin-top:2px;
}
#shopScr .shopBoost button:active{transform:translateY(2px);
  box-shadow:inset 0 1.4px 0 rgba(255,255,255,.85),0 1px 0 var(--rf-ink)}
#shopScr .shopBoost button[disabled]{filter:saturate(.4) brightness(.95);opacity:.7;cursor:default}

/* ===== FIGMA SHOP — one clean card style for every section (overrides the older
   light-blue tier / gold booster / premium-hero skins that stacked into a mess) ===== */
#shopScr .shopHero > *,#shopScr .shopTier > *,#shopScr .shopBoost > *{
  display:grid!important;grid-template-columns:1fr 1fr 1fr!important;gap:2.6vw!important;
  padding:0!important;background:none!important;box-shadow:none!important;border:0!important;
  width:min(94vw,420px)!important;margin:0 auto!important;animation:none!important;transform:none!important }
#shopScr .skuGrid .skuCard{ position:relative;display:flex!important;flex-direction:column;align-items:center;gap:1.2vw;
  background:#f3e3bf!important;border:0.8vw solid #e3a948!important;border-radius:4.2vw!important;
  box-shadow:0 1vw 0 #bf8128,0 1.8vw 2.6vw rgba(90,50,0,.22)!important;padding:2vw 1.6vw 2.4vw!important;
  transform:none!important;animation:none!important }
#shopScr .skuGrid .skuCard:active{ transform:translateY(2px)!important }
#shopScr .skuGrid .skuCard::before{ display:none!important }   /* kill the old BEST VALUE pseudo-badge */
#shopScr .skuGrid .skuName{ order:-1!important;color:#2a1c08!important;-webkit-text-stroke:0!important;text-shadow:none!important;
  font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;font-size:4.6vw!important;line-height:1 }
#shopScr .skuGrid .skuIco{ order:0!important;background:none!important;border:0!important;width:100%!important;height:15vw!important;
  display:flex;align-items:center;justify-content:center;padding:0!important }
#shopScr .skuGrid .skuIco img{ width:84%!important;height:84%!important;object-fit:contain }
#shopScr .skuGrid .skuIco svg{ width:74%!important;height:74%!important }
#shopScr .skuGrid .skuDesc{ order:1!important;color:#8a5a18!important;font-size:2.9vw!important }
#shopScr .skuGrid .skuBuy{ order:2!important }   /* keep the green price button from the base .skuBuy */

/* ===== GOLD PACKS — composed from the REAL Figma SHOP SCREEN assets (node 21:882) ===== */
/* GOLDEN section banner — matches image-1 (cohesive with the gold card frames). The Figma node is currently
   blue; the design intent + reference are gold, so the banner is gold to match the packs. */
/* STORE SECTION SEPARATOR — exact Figma bar (37:786 / 36:329) + Lilita One white + black stroke */
#shopScr .gpBanner{ position:relative;width:min(84vw,374px);aspect-ratio:548/44;margin:2.5vw auto 3.6vw;display:flex;align-items:center;justify-content:center;
  background:url("ui/rtw-sep.png?v=85") center/100% 100% no-repeat;filter:drop-shadow(0 0.6vw 0.8vw rgba(10,20,80,.22)) }
#shopScr .gpBanner span{ position:relative;top:-2px;white-space:nowrap;font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;color:#fff;text-transform:uppercase;
  font-size:4.8vw;letter-spacing:.5px;-webkit-text-stroke:0.42vw #000;paint-order:stroke;text-shadow:0 0.4vw 0 #000 }
/* BUNDLES — Figma frame + exported icons + DYNAMIC numbers/title/price (data-driven, 1:1 to Figma).
   Everything is overlaid on the frame at the Figma positions; cqw (1% of card width) keeps it scaling. */
#shopScr .bundleCard{ position:relative;display:block;width:100%;max-width:420px;margin:0 auto 3.6vw;border:0;background:none;padding:0;cursor:pointer;container-type:inline-size;line-height:1 }
#shopScr .bundleCard:active{ transform:translateY(2px) }
.bdlFrame{ width:100%;display:block;aspect-ratio:1615/736;filter:drop-shadow(0 1cqw 1.6cqw rgba(120,70,15,.24)) }
.bdlSlot{ position:absolute;transform:translate(-50%,-50%);pointer-events:none;display:flex;align-items:center;justify-content:center }
.bdlSlot img{ display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0.4cqw 0.5cqw rgba(0,0,0,.25)) }
.bdlNum{ position:absolute;transform:translate(-50%,-50%);pointer-events:none;white-space:nowrap;text-align:center;
  font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;color:#fff;-webkit-text-stroke:0.55cqw #14233f;paint-order:stroke;text-shadow:0 0.4cqw 0 rgba(0,0,0,.4) }
.bdlGoldIco{ left:14.3%;top:27%;width:16%;height:31% }
.bdlGoldNum{ left:14.2%;top:49.5%;font-size:5.7cqw }
.bdlBoostIco{ top:33%;width:13%;height:21% }
.bdlBoostNum{ top:43.6%;font-size:4.9cqw }
.bdlB0{ left:37.6% } .bdlB1{ left:50.7% } .bdlB2{ left:62.7% }
.bdlHeartIco{ left:85%;top:28.5%;width:15%;height:27% }
.bdlInf{ position:absolute;left:85%;top:28%;transform:translate(-50%,-50%);width:8.5%;pointer-events:none;z-index:2 }
.bdlHoursNum{ left:85.5%;top:49.5%;font-size:5.7cqw }
.bdlTitle{ position:absolute;left:7%;top:82.5%;transform:translateY(-50%);text-align:left;pointer-events:none;white-space:nowrap;
  font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;color:#f8ffff;font-size:6.8cqw;-webkit-text-stroke:0.55cqw #14233f;paint-order:stroke;text-shadow:0 0.5cqw 0 #14233f }
.bdlPrice{ position:absolute;left:80.4%;top:82%;transform:translate(-50%,-50%);width:33%;height:22.5%;display:flex;align-items:center;justify-content:center;pointer-events:none;
  background:linear-gradient(180deg,#5bf06f 0,#5bf06f 38%,#16e652 38%,#16e652 100%);border:0.55cqw solid #07351a;border-radius:8cqw;
  box-shadow:inset 0 -1.6cqw 0 -0.9cqw rgba(13,130,55,.95);
  font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;color:#fff;font-size:5.4cqw;-webkit-text-stroke:0.5cqw #07351a;paint-order:stroke;text-shadow:0 0.4cqw 0 rgba(0,0,0,.3) }
#shopScr .gpGrid{ display:grid;grid-template-columns:1fr 1fr 1fr;column-gap:2.6vw;row-gap:9vw;width:min(86vw,384px);margin:0 auto }
#shopScr .gpCard{ position:relative;display:block;width:100%;aspect-ratio:165/233;border:0;background:none;padding:0;cursor:pointer;overflow:visible }
#shopScr .gpCard:active{ transform:translateY(2px) }
#shopScr .gpCard .gpFrame{ position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none }
#shopScr .gpCard .gpPanel{ position:absolute;left:5.5%;right:5.5%;top:6.5%;width:89%;pointer-events:none }
#shopScr .gpCard .gpAmt{ position:absolute;top:58%;left:4%;right:4%;text-align:center;line-height:1;
  font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;color:#fff;font-size:5vw;
  text-shadow:1px 0 0 #3a2708,-1px 0 0 #3a2708,0 1px 0 #3a2708,0 -1px 0 #3a2708,1px 1px 0 #3a2708,-1px 1px 0 #3a2708,1px -1px 0 #3a2708,-1px -1px 0 #3a2708,2px 0 0 #3a2708,-2px 0 0 #3a2708,0 2px 0 #3a2708 }
#shopScr .gpCard .gpCoins{ position:absolute;left:26%;top:26%;width:48%;pointer-events:none }
/* Figma green button: two-tone (lighter top band) + dark border + bottom bevel + glint dot top-left.
   Hangs below the card so the card's bottom bump shows (nudged up a touch from before). */
/* exact Figma green button: base (21:1079) + lighter-top sheen (21:1080) + glint dot (21:1082); price = Lilita One white + black stroke */
#shopScr .gpCard .gpBuy{ position:absolute;left:6%;right:6%;bottom:-8%;height:23%;display:flex;align-items:center;justify-content:center;gap:1vw;
  font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;color:#f8ffff;font-size:3.7vw;padding-bottom:1%;
  background:url("ui/rtw-gp-cta.png?v=85") center/100% 100% no-repeat;border:0;border-radius:0;box-shadow:none;
  text-shadow:1px 0 0 #000,-1px 0 0 #000,0 1px 0 #000,0 -1px 0 #000,1px 1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000,-1px -1px 0 #000,0 2px 0 #000 }
#shopScr .gpCard .gpBuy::before{ content:"";position:absolute;left:2.2%;top:6.5%;width:95.6%;height:41.3%;
  background:url("ui/rtw-gp-cta-top.png?v=85") center/100% 100% no-repeat;pointer-events:none }
#shopScr .gpCard .gpBuy::after{ content:"";position:absolute;left:6.1%;top:13%;width:5%;height:11%;
  background:url("ui/rtw-gp-cta-dot.png?v=85") center/100% 100% no-repeat;pointer-events:none }
#shopScr .gpCard .gpBuy .gpFiat, #shopScr .gpCard .gpBuy svg, #shopScr .gpCard .gpBuy s{ position:relative;z-index:2 }
#shopScr .gpCard .gpBuy svg{ width:3.6vw;height:3.6vw }
/* ===== Buy Booster with Gold (in-game) — Figma 155:496; reuses card/x3 (exported) + gp-cta button + pop-close X + bg-glow + spark ===== */
#buyBoostModal{ z-index:62 }
#buyBoostModal .bbWrap{ position:relative; width:min(80vw,350px); aspect-ratio:720/771; filter:drop-shadow(0 14px 30px rgba(8,18,55,.5)); animation:bbPop .28s cubic-bezier(.34,1.56,.64,1) }
@keyframes bbPop{ 0%{ transform:scale(.82); opacity:0 } 100%{ transform:scale(1); opacity:1 } }
#buyBoostModal .bbCard{ position:absolute; inset:0; width:100%; height:100% }
#buyBoostModal .bbIconWrap{ position:absolute; left:50%; top:-5%; width:55%; height:34%; transform:translateX(-50%); z-index:2 }
/* live ray-shine behind the icon — the SAME rotating rays+core+sparks as the unlock screen (.usRays), sized down */
#buyBoostModal .bbRays{ z-index:0; top:56%; width:140%; max-width:none;
  --ray:92%; --core:100%; --spin-a:46s; --spin-b:64s; --fade:4.2s; --core-fade:3.2s; --ray-min:.46; --ray-max:.96; --core-min:.62; --core-max:.96 }
#buyBoostModal .bbIcon{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; z-index:2; filter:drop-shadow(0 7px 9px rgba(10,30,60,.42)) }
#buyBoostModal .bbSparks{ position:absolute; inset:-16%; pointer-events:none; z-index:4 }
#buyBoostModal .bbSpark{ position:absolute; width:12%; transform:translate(-50%,-50%); opacity:0; animation:bbTwinkle 1.7s ease-in-out infinite; filter:drop-shadow(0 0 4px rgba(255,255,255,.9)) }
#buyBoostModal .bbSparkBlue{ filter:drop-shadow(0 0 5px #3aa6ff) drop-shadow(0 0 9px #3aa6ff) }
@keyframes bbTwinkle{ 0%,100%{ opacity:0; transform:translate(-50%,-50%) scale(.3) } 45%{ opacity:1; transform:translate(-50%,-50%) scale(1) } }
#buyBoostModal .bbBadge{ position:absolute; right:-6%; bottom:1%; width:43%; z-index:5; pointer-events:none; filter:drop-shadow(0 3px 4px rgba(0,0,0,.3)); animation:bbBadgePop .42s .12s both cubic-bezier(.34,1.7,.5,1) }
@keyframes bbBadgePop{ 0%{ transform:scale(0) rotate(-28deg) } 100%{ transform:scale(1) rotate(0) } }
/* title reuses the SHOP MEDIUM-BUNDLE font (.bdlTitle): white fill + crisp navy text-stroke behind + one hard navy bottom shadow */
#buyBoostModal .bbTitle{ position:absolute; left:4%; right:4%; top:33.5%; text-align:center; margin:0; line-height:1; letter-spacing:.5px; text-transform:uppercase; white-space:nowrap;
  font-family:'Lilita One','Baloo 2',sans-serif; font-weight:400; color:#f8ffff; font-size:7.8vw;
  -webkit-text-stroke:0.62vw #14233f; paint-order:stroke; text-shadow:0 0.58vw 0 #14233f }
/* instruction reuses the SAME bundle font (.bdlTitle), just smaller */
#buyBoostModal .bbDesc{ position:absolute; left:8%; right:8%; top:47.5%; text-align:center; margin:0; line-height:1.22;
  font-family:'Lilita One','Baloo 2',sans-serif; font-weight:400; color:#f8ffff; font-size:4.3vw;
  -webkit-text-stroke:0.34vw #14233f; paint-order:stroke; text-shadow:0 0.3vw 0 #14233f }
/* BUY button reuses the green CLAIM button (.vicContinue, applied in markup); only position/size overridden here */
#buyBoostModal .bbBuy{ position:absolute; left:50%; bottom:9.5%; transform:translateX(-50%); width:74%; cursor:pointer; overflow:hidden; gap:2vw }
#buyBoostModal .bbBuy .bbShine{ position:absolute; top:-25%; bottom:-25%; width:28%; left:-45%; pointer-events:none; z-index:3; background:linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent); transform:skewX(-18deg); animation:bbShineSweep 2.6s ease-in-out infinite }
@keyframes bbShineSweep{ 0%{ left:-45% } 62%,100%{ left:135% } }
#buyBoostModal .bbBuy .bbCoin{ width:7.4vw; height:7.4vw; position:relative; z-index:2; filter:drop-shadow(0 1px 1px rgba(0,0,0,.35)) }
#buyBoostModal .bbBuy b{ position:relative; z-index:2 }
#buyBoostModal .bbBuy:active{ transform:translateX(-50%) translateY(2px) }
#buyBoostModal .bbX{ position:absolute; top:-3%; right:-3.5%; width:17%; aspect-ratio:1; border:0; background:none; padding:0; cursor:pointer; z-index:6 }
#buyBoostModal .bbX img{ width:100%; height:100%; display:block; filter:drop-shadow(0 3px 4px rgba(0,0,0,.4)) }
#buyBoostModal .bbX:active{ transform:translateY(2px) }

/* booster-card variants (same Figma frame, booster art) */
#shopScr .gpCard.gpCant{ filter:saturate(.6) brightness(.98);opacity:.85 }
#shopScr .gpCard .gpAmt.gpNm{ font-size:3.5vw;top:7% }
#shopScr .gpCard .gpIcoSvg{ display:flex;align-items:center;justify-content:center }
#shopScr .gpCard .gpIcoSvg svg{ width:100%!important;height:100%!important }
#shopScr .gpCard .gpBuy.gpBuyLk{ background:linear-gradient(180deg,#cfd8e2,#a9b6c5);border:0.5vw solid #3a4452;border-radius:3vw;
  box-shadow:inset 0 0.4vw 0 rgba(255,255,255,.6),0 0.6vw 0 #818f9f;-webkit-text-stroke:0 }
#shopScr .gpCard .gpBuy.gpBuyLk svg{ fill:#3a4452 }
/* ===== SHOP NEW: lives+gold-only bar, RAIL PASS banner, fiat label, big pile ===== */
#shopScr .tbar .tbAvatar, #shopScr .tbar .tbCog{ display:none!important }
#shopScr .shopHead .tbar{ justify-content:center;gap:3vw }
#shopScr .gpCard .gpCoins.gpCoinsBig{ left:17%;top:21%;width:66% }
#shopScr .gpCard .gpFiat{ font-size:3.4vw;font-style:normal;letter-spacing:.2px;display:inline-flex;align-items:baseline;gap:0.6vw;justify-content:center }
#shopScr .gpCard .gpFiat .gpCur{ font-size:2.7vw;font-style:normal;font-weight:400;opacity:1 }      /* USD: NOT italic, crisp */
#shopScr .gpCard .gpFiat .gpNum{ font-size:4.6vw;font-style:normal;font-weight:400 }                /* price: no faux-bold blur */
.tgStar{ width:17px;height:17px;vertical-align:-3px;display:inline-block }
#shopScr .gpCard .gpBuy .gpStar{ gap:1vw }
#shopScr .gpCard .gpBuy .gpStarIco{ width:5vw;height:5vw;align-self:center;z-index:2 }
.bdlPrice .bdlStar{ display:inline-flex;align-items:center;gap:0.5vw }
.bdlPrice .bdlStarIco{ width:1.15em;height:1.15em }
/* gold-pack sparkles (more on bigger packs) */
#shopScr .gpCard .gpSparks{ position:absolute;inset:0;pointer-events:none;z-index:2 }
#shopScr .gpCard .gpSpark{ position:absolute;transform:translate(-50%,-50%);display:block;filter:drop-shadow(0 0 0.5vw rgba(255,238,150,.95));animation:gpTwinkle 1.8s ease-in-out infinite }
#shopScr .gpCard .gpSpark svg{ width:100%;height:auto;display:block }
@keyframes gpTwinkle{ 0%,100%{ opacity:.2;transform:translate(-50%,-50%) scale(.55) rotate(0) } 50%{ opacity:1;transform:translate(-50%,-50%) scale(1) rotate(40deg) } }
/* bundle: glowing rotating ray behind the leftmost gold icon (Figma) */
.bdlRay{ position:absolute;left:14.3%;top:27%;width:28%;height:61.5%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,224,130,.55),rgba(255,224,130,0) 62%),url("ui/rtw-vic-rays.png?v=o1") center/contain no-repeat;opacity:.85;animation:bdlRaySpin 16s linear infinite }
@keyframes bdlRaySpin{ from{ transform:translate(-50%,-50%) rotate(0) } to{ transform:translate(-50%,-50%) rotate(360deg) } }
#shopScr .shopPassBanner{ position:relative;display:block;width:min(86vw,384px);margin:1vw auto 3.2vw;border:0;background:none;padding:0;cursor:pointer }
#shopScr .shopPassBanner:active{ transform:translateY(2px) }
#shopScr .shopPassBanner img{ width:100%;display:block;filter:drop-shadow(0 1vw 1.6vw rgba(120,70,15,.22)) }
#shopScr .shopPassBanner .passBannerPrice{ position:absolute;left:81.6%;top:62.4%;transform:translate(-50%,-50%);
  font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;font-style:normal;color:#fff;font-size:4.2vw;line-height:1;white-space:nowrap;
  -webkit-text-stroke:0.34vw #0d3a16;paint-order:stroke;text-shadow:0 1px 0 #0d3a16;display:flex;align-items:center;justify-content:center;gap:0.7vw }
#shopScr .shopPassBanner .passBannerPrice svg{ width:4.6vw;height:4.6vw }
#shopScr .shopPassBanner .passBannerPrice .ppStar{ display:inline-flex;align-items:center;gap:0.8vw }
#shopScr .shopPassBanner .passBannerPrice .ppUsd{ font-size:3.7vw;letter-spacing:.2px }

.shopFootSpacer{height:14px}

/* ===== MVP polish phase 4 — Trophy Road CSS ===== */
/* ============ TROPHY ROAD — surface-specific (uses shared mvp* primitives) ============ */
.rdCard{padding:14px 14px 16px;width:min(92vw,360px);
  background:linear-gradient(180deg,#fbfdff 0%,#eaf5ff 100%)}

.rdHeader{display:flex;flex-direction:column;align-items:center;gap:8px;margin:2px 0 6px}
.rdHeader .mvpWm{margin:0}
.rdHeadStack{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%}

/* GOLD CUP PILL — reuses shared .rfRays for the conic sweep */
#roadWins.rdCupPill{position:relative;display:inline-flex;align-items:center;gap:6px;margin:0;
  background:radial-gradient(circle at 50% 50%,#fff7d6,var(--rf-gold-2) 60%,var(--rf-gold-3));
  border:3px solid #fff;border-radius:16px;padding:5px 14px 6px;
  box-shadow:0 3px 0 #e6b24a,0 6px 12px rgba(200,140,20,.26);
  color:var(--rf-gold-ink);font-weight:800;font-size:15px;overflow:hidden;
}
#roadWins.rdCupPill svg{width:18px;height:18px;position:relative;z-index:1}
#roadWins.rdCupPill b{position:relative;z-index:1;font-size:17px;font-weight:800}

/* NEXT-STATION PROGRESS HINT */
.rdNext{width:80%;max-width:280px;display:flex;flex-direction:column;align-items:center;gap:3px}
.rdNextLine{position:relative;width:100%;height:8px;background:#e3edf6;border-radius:5px;
  box-shadow:inset 0 1px 2px rgba(40,80,140,.18);overflow:hidden}
.rdNextFill{display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--rf-gold-3),var(--rf-gold-4));
  border-radius:5px;box-shadow:0 0 8px rgba(255,200,80,.7);
  transition:width .9s cubic-bezier(.2,1,.3,1)}
.rdNextTxt{font-weight:800;font-size:11.5px;color:var(--rf-ink-soft);display:inline-flex;gap:4px;align-items:center}
.rdNextTxt b{color:var(--rf-gold-ink)}

/* TRACK */
#roadList{max-height:62vh;overflow-y:auto;margin:8px 0 2px;padding:4px 0 8px;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%)}
#roadTrack{position:relative;display:flex;flex-direction:column;gap:30px;padding:18px 0}

/* spine — uses the SHARED .rfRailSpine background (white rails + brown ties + tie-dark plank).
   trophyRoad just gives it a position + width via .rdLine */
.rdLine{position:absolute;left:50%;top:0;bottom:0;width:34px;transform:translateX(-50%);
  border-radius:18px;z-index:0;
  /* inherit spine background from .rfRailSpine — set on the same element */
}
.rdLine.rfRailSpine{border-radius:18px;box-shadow:inset 0 0 0 2px #4d3318,0 3px 0 rgba(40,80,140,.12)}
.rdLine::before,.rdLine::after{content:"";position:absolute;left:0;right:0;height:14px;
  background:linear-gradient(180deg,var(--rf-sky-2),transparent);pointer-events:none}
.rdLine::before{top:0}
.rdLine::after{bottom:0;background:linear-gradient(0deg,var(--rf-sky-2),transparent)}

/* GOLD COMPLETED OVERLAY */
.rdFill{position:absolute;left:50%;bottom:0;width:34px;transform:translateX(-50%);
  border-radius:18px;z-index:0;
  background:linear-gradient(180deg,rgba(255,211,77,0),rgba(255,211,77,.55) 30%,rgba(253,181,46,.78));
  box-shadow:0 0 14px rgba(255,200,80,.55);mix-blend-mode:multiply;
  transition:height 1.1s cubic-bezier(.2,1,.3,1)}

/* STATIONS */
.rdNode{position:relative;display:flex;align-items:center;justify-content:center;min-height:64px;
  opacity:0;transform:translateY(10px);animation:rdStationIn .42s ease-out forwards;
  animation-delay:calc(var(--i,0) * .055s)}
@keyframes rdStationIn{to{opacity:1;transform:translateY(0)}}

.rdDot{position:relative;width:62px;height:62px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,#eaf5ff 70%);
  border:3px solid #fff;
  box-shadow:0 3px 0 #c8dcef,0 6px 12px rgba(40,80,140,.22),inset 0 -3px 0 rgba(40,80,140,.08);
  display:flex;align-items:center;justify-content:center;z-index:2;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1)}
.rdDot:active{transform:scale(.94)}
.rdDot svg{width:36px;height:36px;filter:drop-shadow(0 1px 0 rgba(40,80,140,.18))}

.rdNode.done .rdDot{
  background:radial-gradient(circle at 35% 30%,#fff7d6,var(--rf-gold-2) 70%);
  border-color:var(--rf-gold-2);
  box-shadow:0 3px 0 #e6b24a,0 6px 12px rgba(200,140,20,.28),inset 0 -3px 0 rgba(178,124,20,.18);
  opacity:.92}
.rdNode.done .rdDot svg{opacity:.78}

/* CURRENT — uses shared .rfPulse via class added in renderRoad */
.rdNode.cur .rdDot{border-color:#fff;
  box-shadow:0 0 0 5px rgba(255,255,255,.85),0 0 0 9px rgba(95,185,255,.55),
             0 4px 0 #c8dcef,0 8px 14px rgba(40,120,200,.24);
  animation:rdCurPulse 1.6s ease-in-out infinite}
@keyframes rdCurPulse{
  0%,100%{box-shadow:0 0 0 5px rgba(255,255,255,.85),0 0 0 9px rgba(95,185,255,.55),0 4px 0 #c8dcef,0 8px 14px rgba(40,120,200,.24)}
  50%{box-shadow:0 0 0 7px rgba(255,255,255,.95),0 0 0 14px rgba(255,211,77,.45),0 4px 0 #c8dcef,0 8px 18px rgba(255,200,80,.4)}
}

/* FUTURE — dim + REAL inline padlock SVG injected by renderRoad (preferred over pseudo-element).
   If renderRoad isn't updated yet, .rdDot.lock gets a CSS-fallback brass padlock. */
.rdNode.fut .rdDot{filter:saturate(.55) brightness(.96);opacity:.62}
.rdNode.fut .rdLock{position:absolute;right:-4px;bottom:-4px;width:22px;height:22px}

/* CHECK PENNANT — green flag on claimed */
.rdChk{position:absolute;right:-6px;bottom:-6px;background:var(--rf-green-1);border-radius:50%;
  width:22px;height:22px;display:flex;align-items:center;justify-content:center;
  border:2px solid #fff;box-shadow:0 2px 0 #4f9a3a;z-index:3}
.rdChk svg{width:13px;height:13px}
.rdChk svg path{stroke:#fff}

/* STATION LABEL CARD — built from shared mvpCard chrome */
.rdLbl{position:absolute;display:flex;flex-direction:column;align-items:center;gap:4px;
  background:#fff;border:3px solid #fff;border-radius:14px;padding:6px 10px 7px;
  width:108px;font-weight:800;font-size:12.5px;color:var(--rf-ink);line-height:1.15;text-align:center;
  box-shadow:0 3px 0 #c8dcef,0 6px 10px rgba(40,80,140,.16);z-index:2}
.rdLbl > span{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.rdLbl::before{content:"";position:absolute;top:50%;width:14px;height:10px;transform:translateY(-50%);
  background:#fff;clip-path:polygon(0 50%,100% 0,100% 100%)}
.rdNode.lft .rdLbl{right:calc(50% + 44px)}
.rdNode.lft .rdLbl::before{right:-10px;transform:translateY(-50%) scaleX(-1)}
.rdNode.rgt .rdLbl{left:calc(50% + 44px)}
.rdNode.rgt .rdLbl::before{left:-10px}

/* threshold pill inside the label — uses shared .mvpChip */
.rdW{font-style:normal;display:inline-flex;align-items:center;gap:3px;
  background:#e3edf6;color:var(--rf-ink-soft);border-radius:10px;
  font-size:10.5px;font-weight:800;padding:2px 8px}
.rdW svg{width:11px;height:11px}
.rdNode.done .rdW{background:linear-gradient(180deg,#dff3d8,#c6ebbb);color:#2f7d4f;box-shadow:0 2px 0 #9bc78c}
.rdNode.cur  .rdW{background:linear-gradient(180deg,#fff6dd,#ffe9b8);color:var(--rf-gold-ink);box-shadow:0 2px 0 #e9c86a}

.rdNode.done .rdLbl{background:linear-gradient(180deg,#fffaec,#fff1c9);
  box-shadow:0 3px 0 #e6b24a,0 6px 10px rgba(200,140,20,.18);color:var(--rf-gold-ink)}
.rdNode.done .rdLbl::before{background:#fff1c9}
.rdNode.cur .rdLbl{box-shadow:0 3px 0 #c8dcef,0 6px 10px rgba(40,80,140,.16),0 0 0 3px rgba(255,211,77,.45)}
.rdNode.fut .rdLbl{opacity:.65;color:var(--rf-ink-soft)}

/* PARKED TRAIN on current station — small CSS body, .rfBob handles the wobble */
.rdNode.cur .rdDot::after{content:"";position:absolute;
  left:50%;top:-22px;width:20px;height:14px;border-radius:5px 7px 4px 4px;
  background:linear-gradient(180deg,#ef5f5f,#c84545);
  border:2px solid #fff;box-shadow:0 2px 0 #8a3030;transform:translateX(-50%);
  animation:rdTrainBob 1.6s ease-in-out infinite}
@keyframes rdTrainBob{
  0%,100%{transform:translateX(-50%) translateY(0) rotate(-2deg)}
  50%{transform:translateX(-50%) translateY(-2px) rotate(2deg)}
}

.rdNode .rdLbl{cursor:default}
.rdNode.cur .rdDot,.rdNode.done .rdDot{cursor:pointer}

@media (prefers-reduced-motion:reduce){
  .rdNode{opacity:1;transform:none;animation:none}
  .rdNode.cur .rdDot,.rdNode.cur .rdDot::after{animation:none}
}

/* ============================================================
   FIGMA HOME OVERHAUL (page "IMPLEMENT") — scoped to #levelsScr + the nav bar.
   Deep-blue radial bg, clean HUD (avatar / hearts / coins / settings cog), gold
   Play, dark-navy 3-tab nav (Shop / Start / locked Coming Soon). Hexagons untouched.
   ============================================================ */
/* Figma: BACKGROUND BASE (#0287ff) + BACKGROUND GLOW blended soft-light (no harsh white flash) */
#levelsScr{ background:url("ui/rtw-bg-glow.png?v=o1") no-repeat center top / 78% auto, #0287ff!important; background-blend-mode:soft-light!important; }
#levelsScr .scrBg{ display:none; }
#levelsScr .scrBg.homeBg{ display:block!important; opacity:.13; background:url("ui/rtw-train-bg.svg?v=3") 0 0 / 320px 320px repeat; animation:rtwTrainDrift 60s linear infinite; }
@keyframes rtwTrainDrift{ from{ background-position:0 0 } to{ background-position:-320px 320px } }
/* hide everything not in the design */
#levelsScr #ham, #levelsScr #metaRow, #levelsScr #endlessBtn, #levelsScr #inviteBtn,
#levelsScr #lbBtn, #levelsScr #dchBtn, #levelsScr #winBtn, #levelsScr #albBtn,
#levelsScr #streakPill, #levelsScr #lvlTitle, #levelsScr #lvlSubTxt, #levelsScr #lvlWorld,
#levelsScr #notifMenu, #levelsScr #verTag{ display:none!important; }

/* --- HUD row --- */
#levelsScr #lvlTop{ gap:0; padding-top:calc(env(safe-area-inset-top) + 16px); }   /* match Depot bar position */
/* ===== SHARED TOP RESOURCE BAR (.tbar) — ONE bar reused identically on Start, Shop, Depot.
   Figma UPPER BAR RESOURCES: avatar | hearts(count + timer/MAX) | gold | settings. Fixed-width
   capsules (never resize with the value), icon overlapping the LEFT end, green "+" on the RIGHT end,
   even gaps between pills. ===== */
.tbar{ display:flex;align-items:center;justify-content:space-between;width:100%;gap:1.5vw;padding:0 2vw;box-sizing:border-box }
/* top-bar avatar = the same rounded-SQUARE badge (blue frame + dark border) holding the chosen (frameless) avatar art */
.tbar .tbAvatar{ width:11.4vw;height:11.4vw;flex:0 0 auto;box-sizing:border-box;border:0;border-radius:21%;padding:1.1vw;cursor:pointer;overflow:visible;
  background:linear-gradient(180deg,#74bafe,#1f78d6 52%,#0262c9);box-shadow:0 0 0 0.32vw #0a2a52 }
.tbar .tbCog{ width:9vw;height:9vw;flex:0 0 auto;border:0;background:none;box-shadow:none;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;overflow:visible }
.tbar .tbAvatar:active,.tbar .tbCog:active{ transform:translateY(2px) }
.tbar .tbAvatar img{ width:100%;height:100%;object-fit:cover;display:block;border-radius:15%;border:0;background:#3b49cb }
/* World Cup: chosen flag, SMALL, on the top-left corner of the avatar badge */
.tbAvatar{ position:relative }
.tbFlag{ position:absolute;left:-1vw;top:-1vw;width:6vw;max-width:30px;height:auto;aspect-ratio:3/2;border-radius:1.1vw;border:0.45vw solid #fff;box-shadow:0 0.3vw 0.5vw rgba(0,0,0,.4);z-index:5;background:#eef;pointer-events:none;display:block }
.tbar .tbCog img{ width:100%;height:100%;object-fit:contain;display:block }
.tbar .tbPill{ position:relative;flex:0 0 auto;width:30vw;height:8.6vw;box-sizing:border-box;opacity:1;
  background:rgba(8,12,30,.5);border:0;border-radius:2.6vw;box-shadow:none;
  display:flex;align-items:center;justify-content:center;padding:0 8vw 0 9vw;overflow:visible }
.tbar .tbVal,.tbar .tbTimer{ color:#fff;font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;font-style:normal;font-size:4.1vw;line-height:1;
  -webkit-text-stroke:1.2px #141414;paint-order:stroke;text-shadow:0 1px 0 rgba(0,0,0,.3);white-space:nowrap }
.tbar .tbTimer{ font-size:3.7vw;-webkit-text-stroke:1px #141414 }
.tbar .tbGold .hudIco{ position:absolute;left:-1.8vw;top:50%;transform:translateY(-50%);width:11vw;height:11vw;object-fit:contain;display:block;z-index:2;pointer-events:none }
.tbar .tbHearts{ width:27.8vw;padding-left:10vw;margin-left:2.2vw }
.tbar .tbHearts .tbTimer{ font-size:3.5vw }
/* modal status pills: heart + count only (no timer/+), keep compact, dont stretch */
.tbar.modalRsrc .tbHearts{ width:auto;padding-left:11vw;padding-right:3.5vw;margin-left:0 }
.tbar .tbHearts .heartWrap{ position:absolute;left:-2.3vw;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;z-index:2;pointer-events:none }
.tbar .tbHearts .heartWrap .hudIco{ width:11.5vw;height:11.5vw;object-fit:contain;display:block }
/* heart count: chunky Luckiest Guy + dark stroke */
.tbar .tbHearts .tbHeartVal{ position:absolute;left:0;right:0;top:44%;transform:translateY(-50%);text-align:center;font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;font-style:normal;font-size:5.7vw;line-height:1;-webkit-text-stroke:1.5px #141414;paint-order:stroke;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.3) }
/* infinite lives: the ∞ is a wide short glyph, so render it MUCH bigger on the heart */
.tbar .tbHearts .tbHeartVal.tbInf{ font-size:8.4vw;top:40%;-webkit-text-stroke:1.7px #141414;text-shadow:0 1.4px 0 #141414 }
/* green "+" button (real Figma asset) sits flush ON the pill's right end, fully backed by the wider box */
.hudPlus{ position:absolute;right:0;top:50%;transform:translateY(-50%);z-index:2;
  width:8vw;height:8vw;flex:0 0 auto;border:0;border-radius:0;cursor:pointer;padding:0;overflow:visible;
  background:url("ui/rtw-plusbtn.png?v=70") center/100% 100% no-repeat;box-shadow:none;display:flex;align-items:center;justify-content:center}
.hudPlus:active{transform:translateY(calc(-50% + 2px))}
.hudPlus .plusImg{ width:54%;height:54%;object-fit:contain;display:block;pointer-events:none }
.hudPlus .plusGlyph{ display:none }
#levelsScr #soundMenu{ display:none!important }
#levelsScr #hudCog{ width:9.6vw;height:9.6vw;flex:0 0 auto;border:0;background:none;box-shadow:none;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer}
#levelsScr #hudCog:active{transform:translateY(2px)}
#levelsScr #hudCog img{width:100%;height:100%;object-fit:contain;display:block}

/* --- PLAY button: the REAL Figma "PLAY BUTTON MAIN" asset (base art = thick stroke + gloss + bottom shadow,
       baked at scale 4). Gloss overlaid as a background layer so the localized text always paints on top. --- */
#startBtn.bigBtn, #levelsScr #startLvlBtn.bigBtn{
  position:relative;
  background:url("ui/rtw-play-gloss.png?v=86") 50% 7.5% / 95.6% 41% no-repeat,
             url("ui/rtw-play-base.png?v=86") center / 100% 100% no-repeat!important;
  color:#f8ffff!important;font-family:'Lilita One','Baloo 2',sans-serif!important;font-weight:400!important;letter-spacing:0;
  font-size:min(14.2vw,62px)!important;border:0!important;border-radius:0!important;box-shadow:none!important;
  width:min(50vw,231px)!important;height:min(22.8vw,105px)!important;
  -webkit-text-stroke:min(1.4vw,6px) #000000;paint-order:stroke;text-shadow:0 5px 0 #000!important;
  padding:0 0 4% 0!important;overflow:visible;transform:translateY(-15px) }
/* Figma "Ellipse 1892": tiny white specular dot, top-left of the button */
#startBtn.bigBtn::before, #levelsScr #startLvlBtn.bigBtn::before{
  content:"";position:absolute;left:5.2%;top:12.5%;width:4.2%;height:9.7%;
  background:#ffffff;border-radius:50%;opacity:.9;pointer-events:none;z-index:3}
/* animated specular shine sweep (clipped to the button's rounded shape) */
#startBtn.bigBtn::after, #levelsScr #startLvlBtn.bigBtn::after{
  content:"";position:absolute;inset:0;border-radius:10%/22%;z-index:2;pointer-events:none;
  background:linear-gradient(108deg,transparent 41%,rgba(255,255,255,.5) 48%,rgba(255,255,255,.75) 50%,rgba(255,255,255,.5) 52%,transparent 59%);
  background-size:220% 100%;background-repeat:no-repeat;background-position:-80% 0;
  animation:playShine 3.8s ease-in-out infinite}
@keyframes playShine{0%,55%{background-position:-80% 0}100%{background-position:180% 0}}
@media (prefers-reduced-motion:reduce){#startBtn.bigBtn::after,#levelsScr #startLvlBtn.bigBtn::after{animation:none;background-position:-80% 0}}
#startBtn.bigBtn:active, #levelsScr #startLvlBtn.bigBtn:active{transform:translateY(-11px)!important;box-shadow:none!important}

/* --- dark-navy bottom nav (Shop / Start / Coming-Soon lock) --- */
/* ===== bottom-anchored nav (Figma: NAV BAR BASE + sliding SELECTED NAV BAR) ===== */
/* TALLER base (Figma NAV BAR BASE 132/624 = ~21vw) so unselected icons sit fully inside it */
#navBar{ background:#1e2340!important;border-radius:0!important;border-top:2.5px solid #0a0e1c!important;
  box-shadow:inset 0 7px 8px -5px #0c2e3a, 0 -3px 12px rgba(0,10,40,.32)!important;
  height:20vw!important;min-height:74px!important;max-height:108px!important;padding:0 0 env(safe-area-inset-bottom)!important;align-items:stretch!important;overflow:visible }
/* the blue SELECTED indicator (Figma SELECTED NAV BAR 220x156, r17). Wider; bottom bleeds off-screen so
   only the rounded top shows; JS anchors it to the screen edge on the side tabs. */
#navSel{ position:absolute;bottom:-3vw;width:36vw;height:26vw;z-index:1;pointer-events:none;left:0;
  background:url("ui/rtw-tab.png?v=86") center top / 100% 100% no-repeat;
  transition:left .26s cubic-bezier(.4,1.25,.5,1) }
.tab-btn{ position:relative;z-index:2;flex:1;max-width:none;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:0;color:#8aa0c8!important;padding:0!important;height:100% }
/* UNSELECTED: icon only, centered inside the base */
.tab-btn span{ display:none }
.tab-btn img.navIco{ width:11vw;height:11vw;object-fit:contain;display:block;transition:width .18s,height .18s,margin .18s }
.tab-btn.navDepot img.navIco{ width:12vw;height:12vw }
/* SELECTED: bigger icon poking ABOVE the indicator + the label inside it */
.tab-btn.active{ color:#f8ffff!important;background:none!important;border:0!important;box-shadow:none!important;transform:none!important;justify-content:flex-end!important;padding-bottom:2.6vw!important }
.tab-btn.active span{ display:block;font-size:6vw;line-height:1;margin-bottom:0;font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;letter-spacing:.3px;
  -webkit-text-stroke:0.6vw #0a1430;paint-order:stroke;text-shadow:0 2px 0 rgba(0,0,0,.45) }
.tab-btn.active img.navIco{ width:16vw;height:16vw;margin-top:-9vw;margin-bottom:0.4vw }
.tab-btn.navStart.active img.navIco{ width:17vw;height:17vw;margin-top:-9.5vw;margin-bottom:0.4vw }   /* train mascot a touch bigger */
.tab-btn.navDepot.active img.navIco{ width:16vw;height:16vw }
/* notification badge on the Shop tab (Figma badge asset) */
.tab-btn .navDot{ display:none;position:absolute;bottom:7.6vw;left:calc(50% + 2.4vw);top:auto;right:auto;width:4.6vw;height:4.6vw;border:0;border-radius:0;
  background:url("ui/rtw-badge.png") center / contain no-repeat }
/* locked nav tabs (Shop until all boosters unlock, Depot until L18): grayscale the icon */
.tab-btn.locked img.navIco{ filter:grayscale(1) brightness(.86) }
.tab-btn.navDepot.locked img.navIco{ filter:grayscale(1) brightness(.86) }
.tab-btn.navDepot .navSoon{ display:none }
.navLk{ position:absolute;left:calc(50% + 6px);bottom:14px;width:16px;height:16px;object-fit:contain;display:none;z-index:3 }
.tab-btn.navDepot.locked .navLk{ display:none }
/* "Reach level 20" bubble (Figma: white, black outline, light-blue inner glow, down tail) */
.navSoon{ position:absolute;top:-20px;left:50%;transform:translateX(-50%);white-space:nowrap;z-index:4;
  background:#fff;color:#f8ffff;font-family:'Lilita One',cursive;font-weight:400;font-size:11px;
  -webkit-text-stroke:.7px #0a0a0a;paint-order:stroke;
  padding:3px 9px 4px;border-radius:11px;border:1.5px solid #0a0a0a;
  box-shadow:inset 0 -3px 0 rgba(128,211,243,.85), 0 3px 5px rgba(0,10,40,.3) }
.navSoon::before{ content:"";position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:#0a0a0a;border-bottom:0 }
.navSoon::after{ content:"";position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:#fff;border-bottom:0 }
/* hexagon nodes now use the exported Figma art (rtw-hex.png) with the number overlaid */
#levelsScr .hexBtn{ clip-path:none!important;background:none!important;width:22.5vw;height:22.5vw;
  filter:drop-shadow(0 5px 5px rgba(20,60,110,.4)) }
#levelsScr .hexImg{ position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;pointer-events:none }
#levelsScr .lvlNode .num{ z-index:3;transform:translateY(0);font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;font-size:7.7vw;line-height:1;color:#f8ffff;-webkit-text-stroke:0.62vw #000000;paint-order:stroke;text-shadow:0 2px 0 #000 }
#levelsScr .hexBtn.hasDiff .num{ transform:translateY(-5px) }

/* (fixed-width HUD pills now handled by the shared .tbar / .tbPill rules above) */

/* ===== VICTORY + DEFEAT cards (Figma) — shared card/banner/button ===== */
#winModal.modal, #overModal.modal{ background:rgba(6,10,22,.88)!important }
#winModal .card, #overModal .card{ background:none!important;border:0!important;box-shadow:none!important;padding:0!important;overflow:visible!important;max-width:none!important }
.vicWrap{ position:relative;width:80vw;max-width:410px;margin:0 auto }
#winModal .vicWrap{ padding-top:33vw }
#overModal .vicWrap{ padding-top:9vw }
/* rotating sunburst behind the trophy (centered via margin so transform is free to spin) */
#winModal .vicRays{ position:absolute;top:-7vw;left:0;right:0;margin-inline:auto;width:62vw;max-width:320px;z-index:1;opacity:.9;pointer-events:none;animation:winRays 22s linear infinite }
/* trophy tucked a bit BEHIND the card (z below .vicCard z2) so it peeks up from behind, with a shine sweep */
#winModal .vicTrophyBox{ position:absolute;top:8vw;left:0;right:0;margin-inline:auto;width:30vw;max-width:152px;aspect-ratio:281/250;z-index:1;filter:drop-shadow(0 5px 5px rgba(0,0,0,.28));animation:vicTrophyBob 3.4s ease-in-out infinite }
#winModal .vicTrophy{ position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block }
#winModal .vicShine{ position:absolute;inset:0;pointer-events:none;opacity:0;
  -webkit-mask:url("ui/rtw-vic-trophy.png?v=o1") center/contain no-repeat;mask:url("ui/rtw-vic-trophy.png?v=o1") center/contain no-repeat;
  background:linear-gradient(115deg,transparent 44%,rgba(255,255,255,.95) 50%,transparent 56%);background-size:300% 100%;mix-blend-mode:screen;
  animation:vicShineSweep 3.6s ease-in-out infinite }
/* single glint per loop, then opacity:0 so nothing stays stuck on the trophy between sweeps */
@keyframes vicShineSweep{ 0%{background-position:150% 0;opacity:0} 8%{opacity:1} 32%{background-position:-50% 0;opacity:1} 40%,100%{background-position:-50% 0;opacity:0} }
@keyframes vicTrophyBob{ 0%,100%{transform:translateY(0)}50%{transform:translateY(-1.2vw)} }
#winModal .winFx{ position:absolute;inset:0;z-index:6;pointer-events:none }
.vicCard{ position:relative;z-index:2;width:100%;
  background:linear-gradient(180deg,#278fff,#45f4ff);border:2px solid #000;border-radius:6vw;
  box-shadow:inset 0 6px 5px -2px #1dd1e0, inset 0 -14px 12px -8px #3165b9, 0 6px 16px rgba(0,20,60,.4);
  padding:13.5vw 6.5vw 6.5vw;display:flex;flex-direction:column;align-items:center }
.vicBanner{ position:absolute;top:-7vw;left:50%;transform:translateX(-50%);width:74vw;max-width:380px;height:17.6vw;max-height:90px;z-index:4;
  background:url("ui/rtw-vic-banner.png") center/100% 100% no-repeat;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;padding-bottom:1.4vw }
.vicLevel,.vicDone,.vicRewardsLbl,.vicAmount,.vicContinue,.defeatProg{ font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;color:#fff;paint-order:stroke;text-shadow:0 2px 0 #000 }
.vicLevel{ font-size:6.7vw;line-height:1.04;-webkit-text-stroke:0.42vw #000;text-transform:uppercase }
.vicDone{ font-size:4.5vw;line-height:1.1;-webkit-text-stroke:0.34vw #000;text-transform:uppercase }
.vicRewardsLbl{ font-size:6.7vw;-webkit-text-stroke:0.42vw #000;text-transform:uppercase;margin:0 0 3.6vw }
.vicRewardBox{ position:relative;width:100%;height:31vw;max-height:158px;background:#1680d4;border:2px solid #0060ac;border-radius:6vw;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:5.5vw }
/* the existing glow behind the coin slowly rotates (the "rays" layer); the extra rays img was removed */
.vicCoinGlow{ position:absolute;top:50%;left:50%;width:80%;z-index:1;pointer-events:none;
  transform:translate(-50%,-50%);animation:vicCoinGlowSpin 16s linear infinite }
@keyframes vicCoinGlowSpin{ from{transform:translate(-50%,-50%) rotate(0)} to{transform:translate(-50%,-50%) rotate(360deg)} }
.vicCoin{ position:relative;z-index:2;width:23vw;max-width:118px;transform:translateX(-20%);filter:drop-shadow(0 3px 3px rgba(0,30,70,.28)) }
/* amount sits to the RIGHT of the coin (Figma), bigger */
.vicAmount{ position:absolute;left:54%;top:50%;transform:translateY(-50%);z-index:3;font-size:13vw;-webkit-text-stroke:0.55vw #000 }
/* twinkling sparkles around the coin (reuse the .spark clip-path + winTwinkle) */
.vicSparks{ position:absolute;inset:0;z-index:3;pointer-events:none }
.vicSparks .spark{ position:absolute;background:#fffefb;clip-path:polygon(50% 0,59% 41%,100% 50%,59% 59%,50% 100%,41% 59%,0 50%,41% 41%);opacity:.4;transform:scale(.5);animation:winTwinkle 2.1s ease-in-out infinite;filter:drop-shadow(0 0 4px rgba(255,200,80,.95)) }
.vicSparks .spark:nth-child(1){ width:5vw;height:5vw;top:15%;left:25% }
.vicSparks .spark:nth-child(2){ width:3.4vw;height:3.4vw;top:22%;right:27%;animation-delay:.5s }
.vicSparks .spark:nth-child(3){ width:3vw;height:3vw;bottom:18%;left:31%;animation-delay:1s }
.vicSparks .spark:nth-child(4){ width:4.2vw;height:4.2vw;bottom:22%;right:29%;animation-delay:1.4s }
.vicSparks .spark:nth-child(5){ width:2.6vw;height:2.6vw;top:48%;left:19%;animation-delay:.8s }
#winModal .winChips{ display:none!important }
.vicContinue{ width:46vw;max-width:234px;height:16.5vw;max-height:86px;border:2.5px solid #000;border-radius:5vw;cursor:pointer;color:#f8ffff;
  background:linear-gradient(180deg,#65f079 0,#65f079 36%,#16e652 36%,#16e652 100%);
  box-shadow:inset 0 -6px 0 -2px rgba(31,173,92,.9);
  font-size:6.4vw;-webkit-text-stroke:0.55vw #14233f;text-shadow:0 0.5vw 0 #14233f;display:flex;align-items:center;justify-content:center;padding:0 0 1vw }
.vicContinue:active{ transform:translateY(2px) }
/* shine sweep on the victory Continue button */
#nextLvlBtn{ position:relative;overflow:hidden;isolation:isolate }
#nextLvlBtn::after{ content:"";position:absolute;top:-40%;bottom:-40%;left:-80%;width:46%;z-index:2;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.85) 50%,rgba(255,255,255,0) 100%);
  transform:skewX(-20deg);animation:vicShine 3.4s ease-in-out infinite }
@keyframes vicShine{ 0%{left:-80%} 22%{left:150%} 100%{left:150%} }
/* ===== DEFEAT-specific ===== */
#overModal .defeatProg{ font-size:6.7vw;color:#e8736b;-webkit-text-stroke:0.3vw #000;margin:0 0 3.6vw;line-height:1 }
#overModal .vicRewardBox{ gap:0 }
#overModal .defeatHeart{ position:relative;z-index:2;width:25vw;max-width:128px;filter:drop-shadow(0 3px 3px rgba(0,30,70,.28)) }
/* infinite-lives loss variant (Figma "Infinite lives modal on loss"): skull+smoke header, heart-infinity, yellow Try Again */
/* exact Figma values (frame 165:314): container = the smoke bbox (ratio 325.658/124.99), centered; its top sits
   ~10.94vw above the card top (minus the 9vw wrap pad = -1.94vw) so the smoke bottom lands ~9.3vw into the banner.
   The skull pokes ABOVE the smoke (Figma top -32.86%), 42.6% wide at left 29.1%. */
/* NB: no transform/z-index on the container (transform would trap the children in a stacking context). Centered via left%
   so the children's z-indexes escape to compete with .vicCard (z2): smoke BEHIND the card, skull IN FRONT of the banner. */
#overModal .defeatSkull{ position:absolute;left:17.1%;top:-1.94vw;width:65.8%;max-width:300px;aspect-ratio:325.658/124.99;pointer-events:none }
#overModal .defeatSkull .dsSmoke{ position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;z-index:1 }
#overModal .defeatSkull .dsSkull{ position:absolute;left:29.1%;top:-55%;width:42.6%;height:auto;display:block;z-index:6;filter:drop-shadow(0 3px 4px rgba(0,0,0,.2)) }
#overModal .defeatHeartInf{ width:30vw;max-width:142px;display:block;margin:0.5vw auto 2.5vw;filter:drop-shadow(0 3px 5px rgba(180,20,20,.32)) }
/* red X close button (Figma node 165:263), straddling the card top-right corner — reuses the game's standard rtw-pop-close */
#overModal .defeatX{ position:absolute;top:3.4vw;right:-1.2vw;width:13vw;max-width:66px;aspect-ratio:1;border:0;background:none;padding:0;cursor:pointer;z-index:7;display:none }
#overModal .defeatX img{ width:100%;height:100%;display:block;filter:drop-shadow(0 3px 4px rgba(0,0,0,.32)) }
#overModal .defeatX:active{ transform:translateY(2px) }
/* inf-lives "You Failed" is WHITE in Figma (165:261), not the red distance color */
#overModal .defeatProg.ovInfTxt{ color:#fff }
/* our result button (.vicContinue) recolored to the Figma yellows (165:274) — keeps the black border, radius, white text + navy stroke */
#overModal #againBtn.ovInfBtn{ background:linear-gradient(180deg,#f9d15f 0,#f9d15f 40%,#f7b730 40%,#f7b730 100%);box-shadow:inset 0 -6px 0 -2px #ca7e32 }
#overModal .defeatMinus{ position:relative;z-index:3;font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;color:#fff;font-size:9vw;-webkit-text-stroke:0.5vw #000;paint-order:stroke;text-shadow:0 2px 0 #000;align-self:flex-end;margin:0 0 4.5vw -2vw }
/* ===== Purchase result popup (Success! / Canceled) — Figma 1:1 ===== */
#buyResultModal.modal{ background:rgba(10,10,18,.79)!important }
#buyResultModal .card{ background:none!important;border:0!important;box-shadow:none!important;padding:0!important;overflow:visible!important;max-width:none!important }
/* brWrap is the (unclipped) positioning context so the close button can sit fully OUTSIDE the card corner */
.brWrap{ position:relative;width:80vw;max-width:392px;margin:0 auto }
.brCard{ position:relative;width:100%;
  background:linear-gradient(180deg,#2796ff,#45bfff);border:2px solid #000;border-radius:6.4vw;
  box-shadow:inset 0 6px 5px -2px #1dd1e0, inset 0 -14px 12px -8px #3165b9, 0 8px 20px rgba(0,18,55,.5);
  overflow:hidden;display:flex;flex-direction:column;align-items:center;
  animation:brCardIn .26s cubic-bezier(.2,1.25,.5,1) both }
@keyframes brCardIn{ 0%{transform:scale(.86);opacity:0} 100%{transform:scale(1);opacity:1} }
.brHeader{ width:100%;height:13.6vw;max-height:72px;background:#2086f4;border-bottom:3px solid #3168bc;
  display:flex;align-items:center;justify-content:center }
.brTitle{ font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;color:#fff;font-size:8vw;line-height:1;
  -webkit-text-stroke:0.5vw #000;paint-order:stroke;text-shadow:0 2px 0 rgba(0,0,0,.4) }
.brClose{ position:absolute;top:-3.4vw;right:-3.4vw;width:14vw;max-width:70px;aspect-ratio:1;border:0;background:none;padding:0;cursor:pointer;z-index:6 }
.brClose img{ width:100%;height:100%;display:block;filter:drop-shadow(0 3px 4px rgba(0,0,0,.32)) }
.brClose:active{ transform:translateY(2px) }
.brBody{ width:100%;display:flex;flex-direction:column;align-items:center;padding:5vw 6vw 6.5vw }
.brIconWrap{ position:relative;width:42vw;max-width:210px;height:30vw;max-height:150px;display:flex;align-items:center;justify-content:center;margin-bottom:3.4vw }
.brIcon{ position:relative;z-index:3;max-width:74%;max-height:100%;object-fit:contain;filter:drop-shadow(0 5px 5px rgba(0,0,0,.26));animation:brIconPop .42s cubic-bezier(.2,1.35,.5,1) both }
@keyframes brIconPop{ 0%{transform:scale(.3) rotate(-12deg);opacity:0} 62%{transform:scale(1.14) rotate(4deg)} 100%{transform:scale(1) rotate(0);opacity:1} }
/* "what you bought" chips (mirror the win-modal reward box look) */
.brRewards{ display:flex;flex-wrap:wrap;gap:2.4vw;justify-content:center;align-items:center;margin:0 0 4.5vw }
.brRewards:empty{ display:none }
.brChip{ display:inline-flex;align-items:center;gap:1.4vw;background:#1680d4;border:2px solid #0a5ba0;border-radius:3.4vw;padding:1.3vw 3.2vw 1.3vw 2.4vw;
  font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;color:#fff;font-size:5.2vw;line-height:1;-webkit-text-stroke:0.3vw #000;paint-order:stroke;text-shadow:0 2px 0 rgba(0,0,0,.4);
  animation:brChipPop .34s cubic-bezier(.2,1.4,.5,1) both }
.brChip .brChipIco{ width:7.6vw;height:7.6vw;display:flex;align-items:center;justify-content:center;flex:0 0 auto }
.brChip .brChipIco img,.brChip .brChipIco svg{ width:100%;height:100%;display:block;object-fit:contain }
@keyframes brChipPop{ 0%{transform:scale(.4);opacity:0} 100%{transform:scale(1);opacity:1} }
.brMsg{ font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;color:#fff;font-size:5.1vw;line-height:1.18;text-align:center;
  -webkit-text-stroke:0.32vw #000;paint-order:stroke;text-shadow:0 2px 0 rgba(0,0,0,.4);margin:0 0 5vw;max-width:90% }
.brContinue{ margin:0 }
#buyResultModal.br-ok .brIconX{ display:none }
#buyResultModal.br-cancel .brIconCheck{ display:none }
#buyResultModal.br-cancel .brRewards{ display:none }
/* flying reward icon that arcs from the popup into its top-bar pill */
.brFly{ position:fixed;z-index:60;pointer-events:none;width:8vw;max-width:42px;height:8vw;max-height:42px;will-change:transform,opacity }
.brFly img,.brFly svg{ width:100%;height:100%;display:block;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3)) }
.brBumped{ animation:brPillBump .32s ease }
@keyframes brPillBump{ 0%,100%{transform:scale(1)} 42%{transform:scale(1.16)} }
/* daily booster reward = full-screen celebration (confetti shower + center icon pop + gold flash) */
.dayCelebrate{ position:fixed;inset:0;z-index:60;pointer-events:none;display:flex;align-items:center;justify-content:center;overflow:hidden }
.dayCelebrate .dcFlash{ position:absolute;inset:0;background:radial-gradient(circle at 50% 42%, rgba(255,241,186,.6), rgba(255,210,90,0) 60%);animation:dcFlash 1.15s ease-out forwards }
.dayCelebrate .dcIco{ position:relative;width:46vw;max-width:248px;height:46vw;max-height:248px;filter:drop-shadow(0 6px 20px rgba(0,0,0,.45));animation:dcIco 1.55s cubic-bezier(.2,1.5,.4,1) forwards }
.dayCelebrate .dcIco svg,.dayCelebrate .dcIco img{ width:100%;height:100%;object-fit:contain;display:block }
@keyframes dcFlash{ 0%{opacity:0;transform:scale(.6)} 18%{opacity:1} 100%{opacity:0;transform:scale(1.35)} }
@keyframes dcIco{ 0%{opacity:0;transform:scale(.2) rotate(-12deg)} 32%{opacity:1;transform:scale(1.14) rotate(5deg)} 55%{transform:scale(1) rotate(0deg)} 80%{opacity:1} 100%{opacity:0;transform:scale(1.04) translateY(-7vh)} }
@media (prefers-reduced-motion:reduce){ .dayCelebrate .dcIco,.dayCelebrate .dcFlash{ animation-duration:.6s } }
/* ===== Victory unlock bar (Figma UP NEXT: full-bleed cream/green/brown bar + big light-blue end badges) ===== */
/* the bar bleeds OFF both screen edges in Figma (no end caps) -> overflow-clipped full-bleed strip */
/* UP NEXT step (separate overlay shown after the victory card) */
#upNextScreen.modal{ background:
    radial-gradient(130% 82% at 50% 16%, #3fb0f0 0%, #1391e6 40%, #0287ff 74%) !important }   /* Figma UP NEXT: vivid azure, brighter behind the logo */
#upNextScreen.modal::before{ display:none }   /* clean blue (old navy sparkle field removed) */
/* logo at the top with a soft glow behind it (Figma "UP NEXT CHANGE") */
.upNextGlow{ position:absolute;left:50%;top:18%;transform:translate(-50%,-50%);width:128vw;height:128vw;max-width:780px;max-height:780px;z-index:0;pointer-events:none;
  background:radial-gradient(circle, rgba(188,240,255,.62) 0%, rgba(126,212,255,.30) 30%, rgba(126,212,255,0) 60%) }
.upNextLogo{ position:absolute;left:0;right:0;top:11%;z-index:2;display:flex;justify-content:center;pointer-events:none }
.upNextLogo img{ width:64vw;max-width:300px;height:auto;display:block;filter:drop-shadow(0 0.9vw 1.4vw rgba(6,46,92,.38)) }
.upNextInner{ position:absolute;left:0;right:0;bottom:16%;z-index:8;display:flex;flex-direction:column;align-items:center;gap:3vw;pointer-events:none;overflow-x:clip;overflow-y:visible;padding-top:2.2vw }   /* full-width bar low in the screen; appears INSTANTLY (no slide-in) */
.wuFill.wuPop{ animation:wuFillPop .5s ease }
@keyframes wuFillPop{ 0%,100%{ filter:none } 40%{ filter:brightness(1.5) saturate(1.3) } }
.wuBadge.wuPing{ animation:wuPing .55s cubic-bezier(.2,1.6,.4,1) }
@keyframes wuPing{ 0%{ transform:translateY(-50%) scale(1) } 45%{ transform:translateY(-50%) scale(1.28) } 100%{ transform:translateY(-50%) scale(1) } }
.wuUp{ font-family:'Lilita One','Baloo 2',sans-serif;color:#fff;font-size:6.4vw;line-height:1;letter-spacing:.5px;text-transform:uppercase;-webkit-text-stroke:0.44vw #0b1a36;paint-order:stroke;text-shadow:0 3px 0 #000 }
.wuBar{ position:relative;width:100%;height:20vw;max-height:104px }
/* track extends beyond both viewport edges so it spans side to side (rounded ends never visible) */
.wuTrack{ position:absolute;left:-9vw;right:-9vw;top:50%;transform:translateY(-50%);height:11.6vw;max-height:60px;
  background:#3d1605;border:1.2vw solid #f3eedc;box-sizing:border-box;overflow:hidden;box-shadow:0 2px 5px rgba(0,0,0,.45) }
.wuFill{ position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(180deg,#74e63f,#52c505 56%,#3f9a08);
  box-shadow:inset 0 -2vw 0 -1.2vw rgba(158,237,51,.5) }
.wuCount{ position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;z-index:3;
  font-family:'Lilita One','Baloo 2',sans-serif;color:#fff;font-size:4.6vw;line-height:1;-webkit-text-stroke:0.36vw #1a1004;paint-order:stroke;text-shadow:0 2px 0 #000;pointer-events:none }
/* circular two-tone disc badge (boosters/coin) */
.wuBadge{ position:absolute;top:50%;transform:translateY(-50%);width:20vw;max-width:104px;height:20vw;max-height:104px;z-index:4;
  background:url("ui/rtw-vic-badge.png") center/contain no-repeat;display:flex;align-items:center;justify-content:center;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.45)) }
.wuBadge.wuTile{ background:none }                 /* rails: the icon IS the framed tile */
.wuDone{ left:7vw } .wuNext{ right:7vw }   /* nudge the end icons a bit inside the screen (bar stays full-width) */
.wuIcoImg{ width:60%;height:60%;object-fit:contain;display:block }
.wuBadge.wuTile .wuIcoImg{ width:100%;height:100% }
.wuBadge .wuSvg{ position:relative;z-index:1;width:60%;height:60%;display:flex;align-items:center;justify-content:center }
.wuBadge .wuSvg svg{ width:100%;height:100%;display:block }
.wuBadge.wuTile .wuSvg{ width:100%;height:100% }
.wuBadge.wuRail{ background:url("ui/rtw-ig-slot-active.png?v=87") center/100% 100% no-repeat }
.wuBadge.wuRail .wuP3d{ width:67%;height:67%;object-fit:contain;display:block;position:relative;z-index:1 }
.wuBadge.wuBox{ background:none }
.wuBadge.wuBox .wuIcoImg{ width:94%;height:94% }
/* ROTATE reward = the actual in-game GOLD rotate button (gold disc + arrows on top), not a blue badge */
.wuBadge.wuRotate{ background:url("ui/rtw-ig-rotate.png") center/100% 100% no-repeat }
.wuBadge.wuRotate .wuIcoImg{ width:62%;height:62% }
.wuHoldPc{ position:absolute;top:48%;left:50%;transform:translate(-50%,-50%);width:46%;height:46%;z-index:3;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 1px 2px rgba(60,40,0,.25)) }
.wuHoldPc svg{ width:100%;height:100% }
.wuChk{ position:absolute;right:-0.6vw;bottom:-0.4vw;width:7.6vw;max-width:40px;height:auto;display:block;z-index:5;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4)) }
/* ===== Unlock / reward screen = composed hero (real item visual) + rotating rays + fireworks + shine ===== */
#unlockScreen.modal{ background:radial-gradient(120% 90% at 50% 40%, #16213c, #08080c)!important;flex-direction:column }
/* Reward Shine FX (vendored from ray fxs.zip / reward-shine-fx, gold variant): core bloom + two
   counter-rotating ray layers + drifting sparks, all additive (mix-blend screen). */
.usRays{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:0;pointer-events:none;
  width:96vw;max-width:460px;aspect-ratio:1;display:grid;place-items:center;
  --ray:91.5%; --core:100%; --spin-a:90s; --spin-b:120s; --fade:6s; --core-fade:4.2s;
  --ray-min:.32; --ray-max:.80; --core-min:.5; --core-max:.82 }
.usRays>*{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;will-change:transform,opacity;backface-visibility:hidden }
.usRays .core{ width:var(--core);height:var(--core);background:url("ui/rtw-rsfx-core.png") center/contain no-repeat;mix-blend-mode:screen;opacity:var(--core-min);animation:rsfxCore var(--core-fade) ease-in-out infinite }
.usRays .ray{ width:var(--ray);height:var(--ray) }
.usRays .ray i{ display:block;width:100%;height:100%;mix-blend-mode:screen;background:center/contain no-repeat;will-change:opacity }
.usRays .ray-a{ animation:rsfxSpinCw var(--spin-a) linear infinite }
.usRays .ray-b{ animation:rsfxSpinCcw var(--spin-b) linear infinite }
.usRays .ray-a i{ background-image:url("ui/rtw-rsfx-rayA.png");animation:rsfxFadeA var(--fade) ease-in-out infinite }
.usRays .ray-b i{ background-image:url("ui/rtw-rsfx-rayB.png");animation:rsfxFadeB var(--fade) ease-in-out infinite }
.usRays .sparks{ width:0;height:0 }
.usRays .spark{ position:absolute;top:0;left:0;width:var(--s,20px);height:var(--s,20px);background:url("ui/rtw-rsfx-spark.png") center/contain no-repeat;mix-blend-mode:screen;opacity:0;animation:rsfxSpark var(--dur,4s) ease-out infinite;animation-delay:var(--delay,0s) }
@keyframes rsfxCore{ 0%,100%{opacity:var(--core-min);transform:translate(-50%,-50%) scale(.97)} 50%{opacity:var(--core-max);transform:translate(-50%,-50%) scale(1.05)} }
@keyframes rsfxSpinCw{ from{transform:translate(-50%,-50%) rotate(0)} to{transform:translate(-50%,-50%) rotate(360deg)} }
@keyframes rsfxSpinCcw{ from{transform:translate(-50%,-50%) rotate(0)} to{transform:translate(-50%,-50%) rotate(-360deg)} }
@keyframes rsfxFadeA{ 0%,100%{opacity:var(--ray-min)} 50%{opacity:var(--ray-max)} }
@keyframes rsfxFadeB{ 0%,100%{opacity:var(--ray-max)} 50%{opacity:var(--ray-min)} }
@keyframes rsfxSpark{ 0%{transform:translate(0,0) scale(.25);opacity:0} 20%{opacity:var(--peak,.5)} 100%{transform:translate(var(--dx),var(--dy)) scale(.85);opacity:0} }
@media (prefers-reduced-motion:reduce){ .usRays .core,.usRays .ray-a,.usRays .ray-b,.usRays .ray i,.usRays .spark{ animation:none!important } .usRays .ray-a i{opacity:var(--ray-max)} .usRays .ray-b i{opacity:var(--ray-min)} .usRays .core{opacity:var(--core-max)} }
.usFx{ position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden }
.usHeroWrap{ position:relative;z-index:3;width:42vw;max-width:222px;aspect-ratio:1;margin-top:-4vw;display:flex;align-items:center;justify-content:center;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.5));animation:usHeroIn .55s cubic-bezier(.2,1.5,.4,1) both }
.usHero{ position:relative;z-index:1;width:100%;height:100%;object-fit:contain;display:block;animation:usHeroBob 3s ease-in-out infinite }
.usHeroTile{ display:none;position:absolute;inset:7%;z-index:1;align-items:center;justify-content:center;animation:usHeroBob 3s ease-in-out infinite }
.usHeroTile svg{ width:100%;height:100%;display:block;filter:drop-shadow(0 6px 10px rgba(0,0,0,.42)) }
.usHeroTile.usRailTile{ background:url("ui/rtw-ig-slot-active.png?v=87") center/100% 100% no-repeat }
.usHeroTile.usRailTile .usP3d{ width:67%;height:67%;object-fit:contain;display:block;filter:drop-shadow(0 5px 7px rgba(0,0,0,.4)) }
.usHeroTile.usBoost{ background:url("ui/rtw-ig-boost.png?v=86") center/100% 100% no-repeat }
.usHeroTile.usBoost .usBoostIco{ width:62%;height:62%;object-fit:contain;display:block;filter:drop-shadow(0 5px 7px rgba(0,0,0,.4)) }
.usHeroTile.usRotate{ background:url("ui/rtw-ig-rotate.png") center/100% 100% no-repeat }
.usHeroTile.usRotate .usRotArrows{ width:56%;height:56%;object-fit:contain;display:block }
.usHoldIco{ display:none;position:absolute;inset:0;align-items:center;justify-content:center;pointer-events:none;z-index:2 }
.usHoldIco svg{ width:42%;height:42%;display:block;filter:drop-shadow(0 3px 5px rgba(0,0,0,.4));animation:usHeroBob 3s ease-in-out infinite }
.usShine{ display:none }
.usShine::after{ content:"";position:absolute;top:-30%;bottom:-30%;left:-60%;width:42%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.7),transparent);transform:skewX(-18deg);animation:usShine 2.8s ease-in-out .6s infinite }
/* Unlock title = Figma GOLD SHOWER linear 2-tone (pale #fff77b top, gold #f5c739 bottom, hard split).
   Solid gold base + a pale ::after copy clipped to the top — robust everywhere (the background-clip:text
   gradient renders on device but its split position is impossible to control reliably). */
.usName{ position:relative;z-index:3;margin:4vw 0 0;font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;
  font-size:10vw;line-height:1;letter-spacing:1px;text-transform:uppercase;text-align:center;padding:0 6vw 2.6vw;
  color:#f5c739;text-shadow:0 0.35vw 0 #d37200;
  animation:usNameIn .5s .12s cubic-bezier(.2,1.5,.4,1) both }
.usName::after{ content:attr(data-name);position:absolute;left:0;right:0;top:0;padding:0 6vw;box-sizing:border-box;
  font:inherit;letter-spacing:inherit;text-transform:inherit;text-align:inherit;color:#fff77b;
  text-shadow:none;clip-path:inset(0 0 68% 0);pointer-events:none }
.usSub{ position:relative;z-index:3;margin-top:1.6vw;font-family:'Lilita One','Baloo 2',sans-serif;color:#fff;
  font-size:5.6vw;-webkit-text-stroke:0.42vw #0b1a36;paint-order:stroke;text-shadow:0 2px 0 #000;animation:usNameIn .5s .2s both }
.usDesc{ position:relative;z-index:3;margin-top:2.2vw;max-width:80vw;text-align:center;color:#dbe7f4;font-weight:700;font-size:4.2vw;line-height:1.3;
  text-wrap:balance;animation:usNameIn .5s .28s both }
.usTap{ position:absolute;bottom:11vw;left:0;right:0;z-index:3;text-align:center;
  font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;font-size:4.6vw;letter-spacing:.6px;text-transform:uppercase;
  background:linear-gradient(105deg,#efb01b 0%,#efb01b 34%,#fff7da 49%,#ffe79a 56%,#efb01b 70%,#efb01b 100%);
  background-size:260% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 0.25vw 0.18vw rgba(90,55,0,.5));
  animation:usTapShine 2.4s linear infinite, usTapBob 1.5s ease-in-out infinite }
.usFire{ position:absolute;width:2.6vw;height:2.6vw;border-radius:50%;will-change:transform,opacity }
@keyframes usHeroIn{ from{ opacity:0;transform:scale(.35) } to{ opacity:1;transform:scale(1) } }
@keyframes usHeroBob{ 0%,100%{ transform:translateY(-1.6%) } 50%{ transform:translateY(1.6%) } }
@keyframes usNameIn{ from{ opacity:0;transform:translateY(3vw) scale(.8) } to{ opacity:1;transform:none } }
.usNameRow{ position:relative;z-index:3;align-self:center }
.usNameSparks{ position:absolute;inset:-2vw -7vw;pointer-events:none;z-index:0 }
.usNameSparks i{ position:absolute;left:var(--x);top:var(--y);width:5.4vw;height:5.4vw;transform:translate(-50%,-50%) scale(0);
  background:radial-gradient(circle at 50% 50%, #fffdf2 0%, #ffe796 42%, rgba(255,205,80,0) 72%);
  clip-path:polygon(50% 0%,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0% 50%,42% 42%);
  filter:drop-shadow(0 0 1.1vw rgba(255,222,130,.75));animation:usNameSpark 1.9s ease-in-out infinite both;animation-delay:var(--d) }
@keyframes usNameSpark{ 0%,100%{ transform:translate(-50%,-50%) scale(0) rotate(0deg);opacity:0 } 45%{ transform:translate(-50%,-50%) scale(1) rotate(25deg);opacity:1 } 72%{ transform:translate(-50%,-50%) scale(.66) rotate(34deg);opacity:.55 } }
@media (prefers-reduced-motion:reduce){ .usNameSparks i{ animation:none;opacity:.5;transform:translate(-50%,-50%) scale(.78) } }
@keyframes usShine{ 0%{ left:-60% } 45%{ left:130% } 100%{ left:130% } }
@keyframes usTapShine{ 0%{ background-position:140% 0 } 100%{ background-position:-40% 0 } }
@keyframes usTapBob{ 0%,100%{ transform:translateY(0) scale(1) } 50%{ transform:translateY(-1vw) scale(1.06) } }
/* unlock screen CLAIM button (Figma "Gold Reward Unlocks" CTA): the green vicContinue pinned bottom-centre.
   Must be CLICKED to continue (no more full-screen tap-anywhere). Fade-in only so :active press isn't overridden. */
.usClaim{ position:absolute;left:50%;bottom:11vw;transform:translateX(-50%);z-index:5;animation:usClaimFade .4s ease both }
.usClaim:active{ transform:translateX(-50%) translateY(2px) }
@keyframes usClaimFade{ from{ opacity:0 } to{ opacity:1 } }
@keyframes usFire{ 0%{ transform:translate(0,0) scale(1);opacity:1 } 100%{ transform:translate(var(--dx),var(--dy)) scale(.3);opacity:0 } }
/* ===== Gold Shower mini-game (Figma title + new coin raining) ===== */
#goldShower.gsModal{ background:radial-gradient(120% 90% at 50% 10%, #15131c, #08080c)!important;display:none }
#goldShower.gsModal.on{ display:block }
.gsField{ position:absolute;inset:0;z-index:2;overflow:hidden }
.gsCoin{ position:absolute;top:-16%;width:14vw;max-width:72px;height:14vw;max-height:72px;cursor:pointer;will-change:transform;
  animation:gsFall var(--dur,1.8s) linear forwards;filter:drop-shadow(0 3px 5px rgba(0,0,0,.45)) }
.gsCoin.big{ width:19vw;max-width:96px;height:19vw;max-height:96px }
.gsCoin img{ width:100%;height:100%;display:block;pointer-events:none }
.gsCoin.pop{ animation:gsPop .18s ease forwards }
@keyframes gsFall{ from{ transform:translateY(0) rotate(-12deg) } to{ transform:translateY(132vh) rotate(300deg) } }
@keyframes gsPop{ 0%{ transform:scale(1) } 100%{ transform:scale(1.7);opacity:0 } }
.gsTitleImg{ position:absolute;top:9vw;left:50%;transform:translateX(-50%);width:74vw;max-width:400px;z-index:3;pointer-events:none;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5)) }
.gsHud{ position:absolute;top:27vw;left:0;right:0;z-index:3;display:flex;gap:3vw;align-items:center;justify-content:center;pointer-events:none }
.gsPill{ display:inline-flex;align-items:center;gap:1.4vw;background:rgba(8,12,30,.7);border:2px solid rgba(255,255,255,.2);border-radius:6vw;padding:1.4vw 4vw;
  font-family:'Lilita One','Baloo 2',sans-serif;color:#fff;font-size:5.4vw;line-height:1;-webkit-text-stroke:0.3vw #000;paint-order:stroke }
.gsPill .gsCoinIco{ width:6.6vw;height:6.6vw;display:block;object-fit:contain }
.gsTimer{ color:#ffe26b }
.gsBottom{ position:absolute;bottom:0;left:0;right:0;z-index:3;display:flex;flex-direction:column;align-items:center;gap:3vw;padding:0 5vw 12vw;pointer-events:none }
.gsHint{ font-family:'Lilita One','Baloo 2',sans-serif;color:#fff;font-size:5vw;-webkit-text-stroke:0.3vw #000;paint-order:stroke;text-shadow:0 2px 0 rgba(0,0,0,.4) }
.gsBtn{ pointer-events:auto }
/* result-modal top resource bar (reuses START .tbar pills; avatar/settings omitted) */
.modalRsrc{ position:absolute;top:calc(env(safe-area-inset-top) + 12px);left:50%;transform:translateX(-50%);
  width:min(94vw,440px);z-index:30;justify-content:center;gap:3vw;padding:0 }
.modalRsrc .tbPill{ padding:0 4vw 0 9vw }
.modalRsrc .mbVal{ color:#fff;font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;font-style:normal;
  font-size:4.4vw;line-height:1;-webkit-text-stroke:1.2px #141414;paint-order:stroke;text-shadow:0 1px 0 rgba(0,0,0,.3);white-space:nowrap }
/* loss: full heart shakes, then snaps to the broken heart + "-1" */
#overModal .defeatHeartFull{ position:absolute;left:50%;top:50%;z-index:4;width:25vw;max-width:128px;opacity:0;
  filter:drop-shadow(0 3px 3px rgba(0,30,70,.28)) }
#overModal .defeatHeart{ opacity:0 }
#overModal .defeatMinus{ opacity:0 }
#overHeartLost{ overflow:visible }   /* let the break shards fly past the box */
#overHeartLost.breaking .defeatHeartFull{ animation:heartBreakFull 1.45s ease-out forwards }
#overHeartLost.breaking .defeatHeart{ animation:heartBreakBroken .6s cubic-bezier(.2,1.4,.4,1) 1.05s forwards }
#overHeartLost.breaking .defeatMinus{ animation:heartMinusIn .4s ease-out 1.25s forwards }
/* the full heart now shakes ~500ms longer, then pops/breaks at ~1.05s */
@keyframes heartBreakFull{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}
  11%{opacity:1;transform:translate(-50%,-50%) scale(1.12) rotate(0)}
  18%{transform:translate(-50%,-50%) scale(1) rotate(-7deg)}
  26%{transform:translate(-50%,-50%) scale(1.03) rotate(7deg)}
  34%{transform:translate(-50%,-50%) scale(1) rotate(-6deg)}
  42%{transform:translate(-50%,-50%) scale(1.03) rotate(6deg)}
  50%{transform:translate(-50%,-50%) scale(1) rotate(-6deg)}
  58%{transform:translate(-50%,-50%) scale(1.03) rotate(6deg)}
  66%{transform:translate(-50%,-50%) scale(1) rotate(-5deg)}
  70%{transform:translate(-50%,-50%) scale(1.03) rotate(5deg)}
  72%{opacity:1;transform:translate(-50%,-50%) scale(1.16) rotate(0)}
  78%{opacity:0;transform:translate(-50%,-50%) scale(1.26)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.26)} }
/* break particle burst: red heart shards fly out + a quick flash ring, timed to the break (~1.05s) */
#overModal .heartShards{ position:absolute;left:50%;top:50%;width:0;height:0;z-index:5;pointer-events:none }
#overModal .hShard{ position:absolute;left:0;top:0;width:3vw;height:3vw;margin:-1.5vw;opacity:0;
  background:radial-gradient(circle at 38% 30%,#ffb0b0,#e2342f 70%);border:1px solid #7a1414;border-radius:38% 38% 50% 50%;filter:drop-shadow(0 1px 2px rgba(120,0,0,.45)) }
#overModal .heartFlash{ position:absolute;left:50%;top:50%;width:30vw;height:30vw;margin:-15vw 0 0 -15vw;z-index:1;opacity:0;pointer-events:none;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.95) 0%,rgba(255,160,160,.55) 38%,rgba(255,110,110,0) 70%) }
#overHeartLost.breaking .hShard{ animation:hShardFly .8s cubic-bezier(.18,.7,.3,1) 1.0s forwards }
#overHeartLost.breaking .heartFlash{ animation:heartFlash .55s ease-out 1.0s forwards }
@keyframes hShardFly{ 0%{opacity:0;transform:rotate(var(--a)) translateY(0) scale(.35)} 14%{opacity:1} 100%{opacity:0;transform:rotate(var(--a)) translateY(calc(-1 * var(--d))) rotate(var(--s)) scale(1)} }
@keyframes heartFlash{ 0%{opacity:0;transform:scale(.3)} 28%{opacity:.95} 100%{opacity:0;transform:scale(1.5)} }
.heartShards .hShard:nth-child(1){ --a:20deg;--d:16vw;--s:130deg;width:3.4vw;height:3.4vw;margin:-1.7vw }
.heartShards .hShard:nth-child(2){ --a:58deg;--d:13vw;--s:-90deg }
.heartShards .hShard:nth-child(3){ --a:96deg;--d:15vw;--s:160deg;width:2.4vw;height:2.4vw;margin:-1.2vw }
.heartShards .hShard:nth-child(4){ --a:134deg;--d:13vw;--s:-150deg }
.heartShards .hShard:nth-child(5){ --a:172deg;--d:15vw;--s:80deg;width:3.6vw;height:3.6vw;margin:-1.8vw }
.heartShards .hShard:nth-child(6){ --a:210deg;--d:13vw;--s:-60deg;width:2.6vw;height:2.6vw;margin:-1.3vw }
.heartShards .hShard:nth-child(7){ --a:248deg;--d:16vw;--s:150deg }
.heartShards .hShard:nth-child(8){ --a:286deg;--d:13vw;--s:-120deg;width:2.8vw;height:2.8vw;margin:-1.4vw }
.heartShards .hShard:nth-child(9){ --a:324deg;--d:15vw;--s:110deg }
@keyframes heartBreakBroken{ 0%{opacity:0;transform:scale(.5)} 40%{opacity:1;transform:scale(1.18)} 70%{transform:scale(.96)} 100%{opacity:1;transform:scale(1)} }
@keyframes heartMinusIn{ 0%{opacity:0;transform:translateY(-8px) scale(.7)} 100%{opacity:1;transform:translateY(0) scale(1)} }
@media (prefers-reduced-motion:reduce){
  .vicCoinGlow{ animation:none!important }
  #overHeartLost.breaking .defeatHeartFull{ animation:none!important;opacity:0 }
  #overHeartLost.breaking .defeatHeart,#overHeartLost.breaking .defeatMinus{ animation:none!important;opacity:1 }
  #overHeartLost.breaking .hShard,#overHeartLost.breaking .heartFlash{ animation:none!important;opacity:0 }
}
#overModal .vicContinue{ margin-bottom:1.5vw }
#overModal .defeatHome{ background:none;border:0;color:#dbeeff;font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;font-size:4.2vw;-webkit-text-stroke:0.3vw rgba(0,0,0,.45);paint-order:stroke;text-shadow:0 1px 0 rgba(0,0,0,.4);cursor:pointer;padding:1vw 4vw;opacity:.92 }
#overModal .ovHide{ display:none!important }
/* owner-only admin button — now lives at the bottom of the Settings card */
#adminBtn{ display:none;position:absolute;left:50%;bottom:2.4%;transform:translateX(-50%);z-index:4;align-items:center;gap:1.4vw;
  background:#1e2340;color:#ff8088;border:0.6vw solid #ff6b6b;border-radius:2.6vw;
  font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;font-size:3.4vw;letter-spacing:.5px;padding:1.1vw 4vw;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.35);opacity:.95 }
#adminBtn svg{ width:4vw;height:4vw;flex:0 0 auto }
#adminBtn:active{ transform:translateX(-50%) translateY(1px) }
#adminBtn.show{ display:inline-flex }

/* ===== AVATAR SELECTION ("Edit Profile") modal (Figma 48:752) ===== */
#avatarModal .avCard{ position:relative;width:min(86vw,400px);background:linear-gradient(180deg,#2796ff,#45bfff);border:2px solid #08203c;border-radius:6vw;
  box-shadow:inset 0 6px 5px -2px #5fd0ff, inset 0 -14px 12px -8px #2f63b6, 0 10px 30px rgba(0,20,60,.5);
  padding:7vw 5vw 6vw;display:flex;flex-direction:column;align-items:center;animation:pop .3s }
#avatarModal .avX{ position:absolute;top:-3vw;right:-3vw;width:11vw;height:11vw;border-radius:50%;border:2px solid #08203c;cursor:pointer;z-index:3;
  background:linear-gradient(180deg,#ff7b7b,#e8433f);display:flex;align-items:center;justify-content:center;box-shadow:0 3px 6px rgba(80,0,0,.35) }
#avatarModal .avX svg{ width:5.4vw;height:5.4vw }
#avatarModal .avX:active{ transform:translateY(2px) }
#avatarModal .avTitle{ margin:0 0 4.5vw;font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;color:#fff;font-size:7vw;line-height:1;
  -webkit-text-stroke:0.5vw #08203c;paint-order:stroke;text-shadow:0 2px 0 #08203c }
#avatarModal .avHead{ display:flex;align-items:center;gap:3.2vw;width:100%;margin-bottom:4vw }
/* avatar = rounded-SQUARE badge (Figma 48:800): blue frame + dark inner outline + the art (NOT a circle) */
#avatarModal .avPrev{ width:19vw;height:19vw;flex:0 0 auto;box-sizing:border-box;border-radius:21%;padding:6%;
  background:linear-gradient(180deg,#74bafe,#1f78d6 52%,#0262c9);box-shadow:0 0 0 0.35vw #0a2a52, 0 3px 6px rgba(0,15,40,.3) }
#avatarModal .avPrev img{ width:100%;height:100%;object-fit:cover;display:block;border-radius:15%;border:0;background:#3b49cb }
#avatarModal .avName{ flex:1;height:11vw;min-width:0;box-sizing:border-box;border-radius:3vw;border:0.6vw solid #08203c;background:#3aa0f0;color:#fff;
  font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;font-size:4.6vw;padding:0 4vw;outline:none;
  box-shadow:inset 0 3px 6px rgba(0,20,60,.3);-webkit-text-stroke:0.18vw #08203c;paint-order:stroke }
#avatarModal .avName::placeholder{ color:rgba(255,255,255,.7);-webkit-text-stroke:0 }
#avatarModal .avGrid{ display:grid;grid-template-columns:repeat(3,1fr);gap:3.2vw;width:100%;background:#1769bf;border:0.6vw solid #08203c;border-radius:4vw;
  padding:4vw;box-shadow:inset 0 4px 10px rgba(0,20,60,.4);margin-bottom:5vw;max-height:46vh;overflow-y:auto }
#avatarModal .avCell{ position:relative;width:100%;aspect-ratio:1;box-sizing:border-box;border-radius:21%;padding:6.5%;cursor:pointer;
  background:linear-gradient(180deg,#74bafe,#1f78d6 52%,#0262c9);box-shadow:0 0 0 0.3vw #0a2a52, 0 3px 5px rgba(0,15,40,.3);transition:transform .12s }
#avatarModal .avCell img{ width:100%;height:100%;object-fit:cover;display:block;border-radius:15%;border:0;background:#3b49cb;pointer-events:none }
#avatarModal .avCell:active{ transform:scale(.93) }
#avatarModal .avCell.sel{ background:linear-gradient(180deg,#ffe27a,#f5b73f);box-shadow:0 0 0 0.3vw #7a5410, 0 0 4vw rgba(255,200,60,.7) }
#avatarModal .avSave{ width:46vw;max-width:220px;height:14vw;max-height:74px;border:2px solid #0c3a16;border-radius:4vw;cursor:pointer;
  background:linear-gradient(180deg,#8bf17c 0%,#36cb50 50%,#27bd45 100%);
  box-shadow:inset 0 4px 0 -1px rgba(180,255,190,.8), inset 0 -7px 0 -2px rgba(20,120,45,.7), 0 5px 10px rgba(10,80,30,.3);
  font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;color:#fff;font-size:5.6vw;line-height:1;
  -webkit-text-stroke:0.4vw #0c3a16;paint-order:stroke;text-shadow:0 2px 0 #0c3a16;padding:0 0 1vw }
#avatarModal .avSave:active{ transform:translateY(2px) }

/* ===== first-misplacement lesson: "you'll crash here, rotate to place correctly" + Try Again ===== */
#misplaceModal.modal{ align-items:flex-start;padding-top:9vh }
#misplaceModal .misCard{ position:relative;width:min(84vw,360px);box-sizing:border-box;background:linear-gradient(180deg,#1c2c4e,#101a30);border:0.85vw solid #fff;border-radius:6vw;padding:7vw 6vw 6vw;display:flex;flex-direction:column;align-items:center;gap:5.5vw;box-shadow:0 12px 30px rgba(0,20,60,.55);animation:pop .3s }
#misplaceModal .misTxt{ margin:0;text-align:center;font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;font-size:4.7vw;line-height:1.22;color:#f8ffff;-webkit-text-stroke:0.5vw #14233f;paint-order:stroke;text-shadow:0 0.4vw 0 #14233f }
/* ===== GIVE UP confirm (Figma 53:1329) — pause -> exit; uses the exported Figma art 1:1 ===== */
#giveUpModal .guWrap{ position:relative;width:min(74vw,330px);aspect-ratio:482/605;animation:pop .3s }
#giveUpModal .guCardImg{ position:absolute;inset:0;width:100%;height:100%;display:block;filter:drop-shadow(0 10px 24px rgba(0,20,60,.5)) }
/* close X (Figma 53:1357) — overhangs the top-right corner of the card */
#giveUpModal .guX{ position:absolute;top:-3.8%;left:88.5%;width:17%;border:0;background:none;padding:0;cursor:pointer;z-index:3 }
#giveUpModal .guX img{ width:100%;display:block }
#giveUpModal .guX:active{ transform:translateY(2px) }
/* "You will lose one heart!" sits below the heart (Figma y58%) */
#giveUpModal .guMsg{ position:absolute;left:8%;right:8%;top:57.5%;margin:0;text-align:center;
  font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;color:#fff;font-size:min(3.7vw,17px);line-height:1.15;
  -webkit-text-stroke:0.28vw #1d4e86;paint-order:stroke;text-shadow:0 1.5px 0 #1d4e86 }
/* green Give Up button (Figma 53:1365) */
#giveUpModal .guBtn{ position:absolute;left:25.8%;top:70%;width:48.5%;border:0;background:none;padding:0;cursor:pointer;z-index:2 }
#giveUpModal .guBtn img{ width:100%;display:block }
#giveUpModal .guBtn:active{ transform:translateY(2px) }

/* ===== REFILL HEARTS (Figma 56:1382) — exact art, positioned by Figma % ===== */
/* gold pill at the EXACT HUD spot (top-right, overlaying the real .tbGold pill, with the "+") */
#refillModal .rhRsrc{ position:absolute;top:calc(env(safe-area-inset-top) + 23px);right:17.7vw;left:auto;transform:none;width:auto;z-index:30;justify-content:flex-end;padding:0 }
#refillModal .rhWrap{ position:relative;width:min(80vw,350px);aspect-ratio:482/498;animation:pop .3s }
#refillModal .rhWrap img{ position:absolute;display:block;pointer-events:none }
#refillModal .rhCard{ left:0;top:0;width:100%;height:100%;filter:drop-shadow(0 10px 26px rgba(20,0,50,.5)) }
#refillModal .rhBanner{ left:4.4%;top:-11.5%;width:91.1% }
#refillModal .rhPanel{ left:7.6%;top:24.8%;width:84.8% }
#refillModal .rhHeart{ left:14.5%;top:35.1%;width:23.9%;filter:drop-shadow(0 3px 4px rgba(20,0,50,.3)) }
/* baked Figma text labels (exact font/stroke/shadow) — positioned by their node bbox % */
#refillModal .rhTitle{ left:15.8%;top:-6.7%;width:68.3%;z-index:2 }
#refillModal .rhNht{ left:45%;top:37.1%;width:40.5%;z-index:2 }
#refillModal .rhPlus{ left:30.5%;top:45.9%;width:8.6%;z-index:3 }
/* live values — Lilita One (Figma's font) with the Figma's WHITE fill + BLACK stroke + black drop-shadow */
#refillModal .rhCount{ position:absolute;left:14.5%;width:23.9%;top:38%;text-align:center;z-index:2;
  font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;color:#fff;font-size:9vw;line-height:1;
  -webkit-text-stroke:1.5px #000;paint-order:stroke;text-shadow:0 2px 0 #000 }
#refillModal .rhTimer{ position:absolute;left:46%;width:42%;top:43%;text-align:center;z-index:2;
  font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;color:#f8ffff;font-size:7.4vw;line-height:1;
  -webkit-text-stroke:1.3px #000;paint-order:stroke;text-shadow:0 2px 0 #000 }
#refillModal .rhBtn{ position:absolute;left:25.8%;top:69.9%;width:48.5%;border:0;background:none;padding:0;cursor:pointer;z-index:3 }
#refillModal .rhBtn img{ position:static;width:100%;pointer-events:none }
#refillModal .rhBtn:active{ transform:translateY(2px) }
#refillModal .rhCoin{ left:38%;top:80.5%;width:8.4%;z-index:4 }
/* "Ask friends for a life" CTA below the refill card: the system .vicContinue button recipe, recolored blue
   (two-tone fill + inset bottom bevel + Lilita One white text w/ navy stroke), same as #againBtn.ovInfBtn does in yellow */
#refillModal .rhAskGroup{ position:absolute;left:50%;top:101%;transform:translateX(-50%);display:none;z-index:5;
  flex-direction:column;align-items:center;gap:2.4vw;width:max-content }
#refillModal .rhAskBtn{ display:flex;align-items:center;justify-content:center;white-space:nowrap;
  height:13vw;max-height:64px;padding:0 6.5vw 1vw;cursor:pointer;
  border:2.5px solid #000;border-radius:4vw;color:#f8ffff;
  font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;font-size:min(4.6vw,21px);
  -webkit-text-stroke:0.42vw #14233f;text-shadow:0 0.45vw 0 #14233f;paint-order:stroke;
  background:linear-gradient(180deg,#3aa6ff 0,#3aa6ff 36%,#0a86ff 36%,#0a86ff 100%);
  box-shadow:inset 0 -6px 0 -2px rgba(6,84,164,.95) }
#refillModal .rhAskBtn:active{ transform:translateY(2px) }
#refillModal .rhAskCap{ font-family:'Baloo 2','Lilita One',sans-serif;font-weight:700;font-size:min(3.3vw,14px);
  color:#eaf3ff;text-shadow:0 1px 2px rgba(0,20,50,.6);letter-spacing:.2px;white-space:nowrap }
/* heart-gift confirmation modal -- composed like the GIVE UP sheet: blue card (recolor of rtw-rh-card) + real heart + green vicContinue */
#heartGiftModal .hgWrap{ position:relative;width:min(80vw,338px);aspect-ratio:1280/1321;animation:pop .3s }
#heartGiftModal .hgCardImg{ position:absolute;inset:0;width:100%;height:100%;display:block;filter:drop-shadow(0 10px 24px rgba(0,20,60,.5)) }
#heartGiftModal .hgInner{ position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding:9% 11% 8%;text-align:center;box-sizing:border-box }
#heartGiftModal .hgTitle{ font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;color:#fff;text-transform:uppercase;
  font-size:min(7.4vw,31px);line-height:1.02;-webkit-text-stroke:0.5vw #14233f;paint-order:stroke;text-shadow:0 0.5vw 0 #14233f;margin:0 }
#heartGiftModal .hgHeartImg{ width:33%;margin:4% 0 3%;filter:drop-shadow(0 4px 7px rgba(150,10,40,.42)) }
#heartGiftModal .hgMsg{ font-family:'Baloo 2','Lilita One',sans-serif;font-weight:800;color:#fff;margin:0 0 auto;
  font-size:min(4.1vw,17px);line-height:1.26;-webkit-text-stroke:0.16vw #14233f;paint-order:stroke;text-shadow:0 2px 0 rgba(8,40,90,.45) }
#heartGiftModal .hgMsg b{ color:#ffe27a }
#heartGiftModal .hgBtn.vicContinue{ width:auto;min-width:44%;height:13.5vw;max-height:66px;font-size:min(5.4vw,26px);border-radius:4.2vw;margin-top:4% }

/* ===== RAIL PASS (Figma page 67:90) — SCREEN + INFO + PURCHASE ===== */
.passModalNew{padding:0;align-items:center;justify-content:center;overflow:hidden}
.passModalNew .passScreen{position:absolute;left:0;top:0;width:100vw;height:100vh;height:100dvh;margin:0;display:flex;flex-direction:column;background:#1661f2;border-radius:0;overflow:hidden;box-shadow:none;transform:none}
.passModalNew .passHero{position:relative;width:100%;flex:0 0 20vh;height:20vh;background:url("ui/rtw-pass-hero.png?v=o1") center 46%/cover no-repeat;padding:0;text-align:left;color:inherit}
.passInfoBtn{position:absolute;left:4%;top:11%;width:12.5%;aspect-ratio:1;border:0;background:none;padding:0;cursor:pointer;z-index:6}
.passInfoBtn img{width:100%;display:block;pointer-events:none;filter:drop-shadow(0 2px 2px rgba(0,0,0,.3))}
.passXBtn{position:absolute;right:4.4%;top:10%;width:12.6%;border:0;background:none;padding:0;cursor:pointer;z-index:4}
.passXBtn img{width:100%;display:block;pointer-events:none}
.passInfoBtn:active,.passXBtn:active{transform:scale(.92)}
.passTopGold{position:absolute!important;left:50%;top:3%;transform:translateX(-50%);width:auto!important;z-index:4;padding:0!important;gap:3vw!important;display:flex;align-items:center}
/* ===== NATIVE (Capacitor / Android immersive) safe-area TOP fix — ANDROID NATIVE ONLY (html.cap) =====
   The Android build runs immersive fullscreen + draws under the display cutout (patch-android.js:
   LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES, status bar hidden). The Depot screen (#depot dropped the
   env inset -> flat 14px) and the Rail Pass header (top-anchored % offsets, no inset) sit under the
   camera there. Telegram/web do NOT get html.cap, so they stay byte-for-byte unchanged. max(env, 32px)
   keeps a hard floor on Android even if the WebView under-reports the inset under immersive. */
html.cap{ --rtw-cap-top: max(env(safe-area-inset-top), 32px); }
html.cap #depot{ padding-top: calc(14px + var(--rtw-cap-top)); }
html.cap .passModalNew .passTopGold{ top: calc(3% + var(--rtw-cap-top)); }
html.cap .passModalNew .passInfoBtn{ top: calc(11% + var(--rtw-cap-top)); }
html.cap .passModalNew .passXBtn{ top: calc(10% + var(--rtw-cap-top)); }
html.cap #shopScr .shopHead .tbar{ top: calc(16px + var(--rtw-cap-top)); }   /* Shop tab resource bar — same cutout fix as Depot/Rail Pass */
.passTimer{position:absolute;left:50%;top:0;transform:translate(-50%,-52%);z-index:7;display:flex;align-items:center;background:linear-gradient(180deg,#42abff,#1a8cf2);border:.55vw solid #0a3a6b;border-radius:7vw;padding:1.2vw 4vw 1.2vw 9vw;box-shadow:0 .45vw 0 rgba(4,40,90,.35)}
.passTimer::before{content:"";position:absolute;left:-1.4vw;top:50%;transform:translateY(-50%);width:9.6vw;height:9.6vw;background:url("ui/rtw-pass-clock.png?v=1") center/contain no-repeat;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.3))}
.passTimer span{font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;color:#fff;font-size:4vw;line-height:1;text-shadow:1px 0 0 #0a3a6b,-1px 0 0 #0a3a6b,0 1px 0 #0a3a6b,0 -1px 0 #0a3a6b,1px 1px 0 #0a3a6b,-1px 1px 0 #0a3a6b,1px -1px 0 #0a3a6b,-1px -1px 0 #0a3a6b,0 2px 0 #0a3a6b;white-space:nowrap}
/* RAIL PASS MASTER progress row — exact Figma proportions (624-frame units / 6.24 = vw) */
.passProgRow{flex:0 0 auto;margin-top:1.6vw;display:flex;align-items:center;justify-content:space-between;padding:0 7.5vw 0 2.7vw;overflow:visible}
.passBar{position:relative;flex:0 0 43.1vw;height:14.7vw}
.passBar .passBarFillWrap{position:absolute;left:3.4vw;right:3.2vw;top:50%;transform:translateY(-50%);height:8.8vw;background:#272d4d;border:1vw solid #f3eedc;border-radius:99px;overflow:hidden;box-shadow:0 0 0 .5vw #15101f,inset 0 .5vw 1.2vw rgba(0,0,0,.45)}
.passBar .passBarFill{display:block;height:100%;width:0%;background:linear-gradient(180deg,#ffd434 42%,#fc9006);border-radius:0;transition:width .4s}
.passKey{position:absolute;left:-.5vw;top:50%;transform:translateY(-50%);height:15.2vw;width:auto;z-index:4;pointer-events:none;filter:drop-shadow(0 2px 2px rgba(0,0,0,.32))}
.passBarTxt{position:absolute;left:3.4vw;right:3.2vw;top:50%;transform:translateY(-50%);text-align:center;z-index:3;font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;color:#fff;font-size:4.6vw;line-height:1;text-shadow:1px 0 0 #15101f,-1px 0 0 #15101f,0 1px 0 #15101f,0 -1px 0 #15101f,1px 1px 0 #15101f,-1px 1px 0 #15101f,1px -1px 0 #15101f,-1px -1px 0 #15101f,0 2px 0 #15101f}
.passTierBadge{position:absolute;right:0;top:50%;transform:translateY(-50%);width:10.6vw;height:10.6vw;z-index:5;background:url("ui/rtw-pass-num.png") center/100% 100% no-repeat;display:flex;align-items:center;justify-content:center;font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;color:#fff;font-size:4.6vw;-webkit-text-stroke:1px #2a6aa0;paint-order:stroke;padding-bottom:.4vw}
.passActivate{position:relative;top:1.3vw;right:1.7vw;flex:0 0 32.7vw;aspect-ratio:204/84;border:0;background:url("ui/rtw-pass-activate.png?v=2") center/100% 100% no-repeat;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0 0 1vw;overflow:visible}
.passActivate::before{content:"";position:absolute;left:48%;top:-7.2vw;transform:translateX(-50%);width:11.4vw;height:12.2vw;background:url("ui/rtw-pass-actlock.png?v=2") center/contain no-repeat;pointer-events:none;z-index:2}
.passActivate span{font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;color:#f8ffff;font-size:6vw;line-height:1;text-shadow:1px 0 0 #000,-1px 0 0 #000,0 1px 0 #000,0 -1px 0 #000,1px 1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000,-1px -1px 0 #000,0 2px 0 #000;display:inline-flex;align-items:center;gap:1vw}
.passActivate:active{transform:translateY(2px)}
.passActivate.owned{filter:grayscale(.15) brightness(.96)}
.passActivate.owned::before{display:none}
/* RAIL PASS MASTER: Free / Rail Pass lane headers above the two reward lanes */
.passLaneLabels{flex:0 0 auto;margin-top:1.4vw;display:flex;align-items:center;justify-content:space-between;padding:.4vw 13.7vw 0 12.1vw}
.passLaneLabels img{flex:0 0 auto;width:23.6vw;min-width:0;height:auto;display:block;filter:drop-shadow(0 2px 2px rgba(0,0,0,.22))}
.passModalNew .passSection{position:relative;flex:0 0 auto;background:linear-gradient(180deg,#0b95fb 0%,#0085f5 100%);padding-top:6.5vw;padding-bottom:3vw;margin-bottom:-1.5vw;z-index:3;box-shadow:inset 0 -.7vw .45vw rgba(0,0,0,.25)}
.passModalNew .passSection::before{content:"";position:absolute;left:0;right:0;top:0;height:2.6vw;background:linear-gradient(180deg,#f8cb46,#ecae12);z-index:4;box-shadow:inset 0 .5vw .55vw rgba(255,204,57,.85),inset 0 -.45vw .25vw rgba(222,110,34,.9)}
.passModalNew .passSecSep{position:absolute;left:50%;top:0;bottom:-3vw;transform:translateX(-50%);width:2.9vw;background:#017dfe;box-shadow:inset .55vw 0 0 rgba(132,197,255,.6),inset -.45vw 0 0 rgba(0,64,156,.38);z-index:1;pointer-events:none}
.passModalNew .passTierArea{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;background:#1661f2}
.passModalNew .passBackdrop{position:absolute;left:0;right:0;top:0;height:118.6vw;background:url("ui/rtw-pass-backdrop.png?v=o1") top center/100% 100% no-repeat;opacity:.95;pointer-events:none;z-index:0}
.passModalNew .passVSep{position:absolute;left:50%;top:0;transform:translateX(-50%);width:2.9vw;background:#017dfe;box-shadow:inset .55vw 0 0 rgba(132,197,255,.6),inset -.45vw 0 0 rgba(0,64,156,.38);border-radius:0 0 1.6vw 1.6vw;z-index:2;pointer-events:none}
.passGrid{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;padding:4.5vw 0 8vw;-webkit-overflow-scrolling:touch;background:transparent;z-index:1}
.passModalNew .passRow{position:relative;height:33.7vw;display:block;gap:0;margin:0;align-items:initial;background:url("ui/rtw-pass-stars.png?v=2") top center/100% 100% no-repeat}
.passModalNew .passRow::before{display:none}
.passModalNew .passRow::after{content:"";position:absolute;left:-3vw;right:-3vw;top:30vw;height:1px;background:#174499;z-index:0}
.passNum{position:absolute;left:50%;top:12.8vw;transform:translate(-50%,-50%);width:9.8vw;height:9.8vw;z-index:5;background:url("ui/rtw-pass-num.png") center/100% 100% no-repeat;display:flex;align-items:center;justify-content:center;font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;color:#fff;font-size:4.6vw;text-shadow:1px 0 0 #0a3b6b,-1px 0 0 #0a3b6b,0 1px 0 #0a3b6b,0 -1px 0 #0a3b6b,1px 1px 0 #0a3b6b,-1px 1px 0 #0a3b6b,1px -1px 0 #0a3b6b,-1px -1px 0 #0a3b6b;padding-bottom:.6vw}
.passNum.passStar{padding-bottom:0}
.passNum.passStar img{width:80%;height:80%;object-fit:contain;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.3))}
.passTile{position:absolute;top:0;width:28.2vw;aspect-ratio:176/157;display:flex;flex-direction:column;align-items:center;justify-content:center;background-position:center;background-size:100% 100%;background-repeat:no-repeat}
.passTile.free{left:9.8vw;background-image:url("ui/rtw-pass-tile-free.png")}
.passTile.prem{right:11.4vw;background-image:url("ui/rtw-pass-tile-prem.png")}
.passTile .ptIco{position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);width:52%;height:52%;object-fit:contain;margin:0;filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}
.passTile.free .ptIco{left:43%}
.passTile.prem .ptIco{left:57%}
.passTile .ptVal{position:absolute;top:62%;left:50%;transform:translate(-50%,-50%);margin:0;font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;color:#fff;font-size:5.2vw;line-height:1;text-shadow:1px 0 0 #000,-1px 0 0 #000,0 1px 0 #000,0 -1px 0 #000,1px 1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000,-1px -1px 0 #000,2px 0 0 #000,-2px 0 0 #000,0 2px 0 #000,0 -2px 0 #000}
.passTile.free .ptVal{left:43%}
.passTile.prem .ptVal{left:57%}
.passTile .ptClaim{position:absolute;left:50%;bottom:-2.4vw;transform:translateX(-50%);width:24vw;aspect-ratio:111/50;border:0;background:url("ui/rtw-pass-claim.png") center/100% 100% no-repeat;cursor:pointer;z-index:4;padding:0}
.passTile .ptClaim:active{transform:translateX(-50%) translateY(2px)}
.passTile .ptLock{position:absolute;right:-2.9vw;bottom:-1vw;width:8.2vw;z-index:4;pointer-events:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.passTile.lockedRw .ptIco,.passTile.lockedRw .ptVal{opacity:1}
.passTile.dim{filter:none}
.passTile:not(.claimed){cursor:pointer}
.passTile .ptDone{position:absolute;right:-1.2vw;bottom:-1.4vw;width:9.6vw;height:9.6vw;object-fit:contain;z-index:5;pointer-events:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.passTile.claimed .ptIco,.passTile.claimed .ptVal{opacity:1}
.passClaimAllBtn{position:absolute;left:50%;bottom:2.5vw;transform:translateX(-50%);width:62%;max-width:300px;z-index:7}
/* INFO overlay (how it works) */
.passInfoModal{padding:0;align-items:center;justify-content:center;background:#090502;backdrop-filter:none}
.passInfoCard{position:relative;width:100%;max-width:430px;aspect-ratio:624/1318;margin:auto;background:url("ui/rtw-pass-info-bg.png?v=o1") center/100% 100% no-repeat #090502;cursor:pointer}
.piTxt{position:absolute;color:#fff;font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;font-style:normal;line-height:1.05;background:#090502;text-align:center;display:none;align-items:center;justify-content:center;text-shadow:1px 0 0 #000,-1px 0 0 #000,0 1px 0 #000,0 -1px 0 #000,1px 1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000,-1px -1px 0 #000,2px 0 0 #000,-2px 0 0 #000,0 2px 0 #000,0 -2px 0 #000;pointer-events:none;font-size:clamp(13px,4.3vw,19px)}
.piBeat{left:9.6%;top:33%;width:41.3%;height:7.4%}
.piKeys{left:51.6%;top:47.6%;width:41.3%;height:7.4%}
.piUnlock{left:5.4%;top:64.3%;width:41.3%;height:7.4%}
.piAct{left:18.4%;top:72.7%;width:80.6%;height:9.2%;font-size:clamp(11px,3.5vw,16px);line-height:1.12}
.piTap{left:25.9%;right:auto;width:41.3%;top:87.9%;height:7.6%;font-size:clamp(15px,4.8vw,22px)}
/* PURCHASE modal */
.passBuyModal{padding:0}
.passBuyModal .passBuyCard{position:relative;width:92vw;max-width:440px;aspect-ratio:624/1318;background:url("ui/rtw-pass-buy-bg.png?v=o1") center/100% 100% no-repeat}
.passBuyX{position:absolute;right:6%;top:11.5%;width:13%;border:0;background:none;padding:0;cursor:pointer;z-index:3}
.passBuyX img{width:100%;display:block;pointer-events:none}
.passBuyX:active{transform:scale(.92)}
.passBuyGold{display:none!important}   /* Figma purchase modal has only the baked timer + price button — no gold-balance pill */
.passBuyCta{position:absolute;left:30.4%;top:78%;width:37.5%;aspect-ratio:234/105;border:0;background:url("ui/rtw-gp-cta.png?v=85") center/100% 100% no-repeat;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0 0 1.2vw;z-index:3}
.passBuyCta span{font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;color:#fff;font-size:5vw;line-height:1;text-shadow:1px 0 0 #000,-1px 0 0 #000,0 1px 0 #000,0 -1px 0 #000,1px 1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000,-1px -1px 0 #000,0 2px 0 #000;display:inline-flex;align-items:center;gap:1vw}
.passBuyCta:active{transform:translateY(2px)}

/* ===== SETTINGS (Figma page 69:90) — LOBBY (69:91) + IN-GAME (69:240) ===== */
.setModal{padding:0}
.setModal .setCard{position:relative;width:86vw;max-width:380px;background-position:center;background-repeat:no-repeat;background-size:100% 100%}
.setCard--lobby{aspect-ratio:514/802;background-image:url("ui/rtw-set-lobby.png?v=o1")}
.setCard--game{aspect-ratio:514/752;background-image:url("ui/rtw-set-game.png?v=o1")}
.setCard .setX{position:absolute;right:1.5%;top:0.5%;width:15%;aspect-ratio:1;border:0;background:none;padding:0;cursor:pointer;font-size:0;color:transparent;z-index:3}
.setCard .setX:active{transform:scale(.92)}
.setHit{position:absolute;border:0;background:none;padding:0;cursor:pointer;font-size:0;color:transparent;z-index:2}
.setHit:active{transform:translateY(2px)}
/* toggle widget — OPAQUE so it fully covers the baked toggle in the card art; shows live state.
   Matches the Figma toggle: dark-navy pill + green fill + light knob (knob left=off, right=on). */
.setToggle{position:absolute;right:7%;width:27%;height:5.4%;border-radius:999px;background:#464975;border:0.55vw solid #14121e;box-shadow:inset 0 0.45vw 0.7vw rgba(0,0,0,.35);cursor:pointer;z-index:3}
.setToggle::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(#88f173,#5bd649);border-radius:999px;transition:width .16s}
.setToggle.on::before{width:0}
.setToggle .setKnob{position:absolute;top:50%;left:-1.5%;transform:translateY(-50%);height:128%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 32%,#ffffff,#dde2e6);border:0.5vw solid #14121e;box-shadow:0 0.3vw 0.5vw rgba(0,0,0,.3);transition:left .16s,right .16s}
.setToggle.on .setKnob{left:auto;right:-1.5%;background:radial-gradient(circle at 50% 32%,#9bf283,#5bd649)}
.setToggle .setOff{display:none}
.setSlider{position:absolute;border-radius:999px;background:#464975;border:0.5vw solid #14121e;box-shadow:inset 0 0.5vw 0.9vw rgba(0,0,0,.45);cursor:pointer;z-index:3;touch-action:none}
.setSlider .setSliderFill{position:absolute;left:0;top:0;bottom:0;width:50%;min-width:9%;background:linear-gradient(#9bf283,#5bd649);border-radius:999px;pointer-events:none}
.setSlider .setSliderKnob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:138%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 32%,#fff,#dde2e6);border:0.5vw solid #14121e;box-shadow:0 0.3vw 0.6vw rgba(0,0,0,.35);pointer-events:none}
.setRestoreIco{position:absolute;width:8.5%;z-index:4;pointer-events:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.3))}
.setCard--lobby .setRestoreIco{left:12.5%;top:calc(60.2% + 4px)}
.setVer{position:absolute;left:50%;transform:translateX(-50%);text-align:center;white-space:nowrap;font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;color:#2972a9;font-size:3.4vw;line-height:1;background:#2a9afe;width:62%;padding:0.9vw 0;border-radius:1.2vw;z-index:3}
/* LOBBY toggle/button/version positions (card 514x802) */
.setCard--lobby .setSlider.setTogSound{left:51%;top:18.4%;width:37%;height:5.9%}
.setCard--lobby .setToggle.setTogHap{top:30.4%}
.setCard--lobby .setBtnPrivacy{left:8.6%;top:43.4%;width:40.6%;height:13.4%}
.setCard--lobby .setBtnContact{left:51.5%;top:43.4%;width:40.6%;height:13.4%}
.setCard--lobby .setBtnRestore{left:8.6%;top:58%;width:40.6%;height:13.4%}
.setCard--lobby .setBtnSave{left:51.5%;top:58.2%;width:40.6%;height:13.4%}
.setSavePatch{display:none}
body.tg #setSaveProg{display:none}
body.tg .setCard--lobby .setSavePatch{display:block;position:absolute;left:49.8%;top:56.8%;width:43.5%;height:16.2%;background:#30a3fe;border-radius:3.4vw;z-index:1}
.setCard--lobby .setHitDelete{left:28%;top:78.6%;width:44%;height:6.4%}
.setCard--lobby .setVer{top:86.4%}
/* IN-GAME toggle/button/version positions (card 514x752) */
.setCard--game .setToggle{height:5.6%}
.setCard--game .setSlider.setTogSound{left:51%;top:19.8%;width:37%;height:6.2%}
.setCard--game .setToggle.setTogHap{top:32%}
.setCard--game .setHitRestart{left:27.5%;top:46.3%;width:46%;height:14.5%}
.setCard--game .setHitHome{left:27.5%;top:62.6%;width:46%;height:14.5%}
.setCard--game .setVer{top:84.6%}
.boostLockFloat{position:fixed;left:50%;top:52%;transform:translate(-50%,0);z-index:60;pointer-events:none;font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;font-size:4.8vw;max-width:96vw;white-space:pre-line;text-align:center;line-height:1.2;color:#fff;-webkit-text-stroke:0.52vw #000;paint-order:stroke;text-shadow:0 0.45vw 0 #000;opacity:0;transition:opacity .45s ease, transform 1.9s cubic-bezier(.2,.7,.3,1)}
.boostLockFloat.go{opacity:1;transform:translate(-50%,-20vh)}
.boostLockFloat.out{opacity:0}
.dynHint{position:fixed;left:50%;top:19%;transform:translate(-50%,8px);z-index:60;pointer-events:none;font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;font-size:4vw;max-width:78vw;text-align:center;line-height:1.2;color:#fff;-webkit-text-stroke:0.5vw #000;paint-order:stroke;text-shadow:0 0.45vw 0 #000;opacity:0;transition:opacity .4s ease, transform .5s ease}
.dynHint.go{opacity:1;transform:translate(-50%,0)}
/* SSO (Save Your Progress) popup */
/* SSO popup — REAL Figma assets: card (90:83) + button rows (90:102/90:163) + logos + X + check, 2 states */
#ssoModal .ssoCard{position:relative;width:86%;max-width:344px;aspect-ratio:538/555;overflow:visible}
.ssoCardBg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}
.ssoState{position:absolute;left:6%;right:6%;top:17%;height:27%;z-index:2;display:flex;align-items:center;justify-content:center;gap:2.6vw}
.ssoCheck{display:none;width:13%;height:auto;flex:0 0 auto}
.ssoSub{margin:0;font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;font-size:5.2vw;line-height:1.16;color:#fff;-webkit-text-stroke:0.42vw #143a6e;paint-order:stroke;text-shadow:0 0.4vw 0 #143a6e;text-align:center}
.ssoCta{position:absolute;left:5.2%;top:48.3%;width:87.9%;height:43.1%;z-index:2}
.ssoCtaImg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}
.ssoLogo{position:absolute;z-index:3;pointer-events:none;display:block;height:auto}
.ssoLogoA{left:7.2%;top:7%;width:10.2%}
.ssoLogoG{left:5.5%;top:65.5%;width:11.6%}
.ssoTap{position:absolute;left:0;width:100%;border:0;background:none;padding:0;cursor:pointer;z-index:4}
.ssoTapTop{top:0;height:44%}
.ssoTapBot{top:56%;height:44%}
.ssoTap:active{transform:translateY(0.4vw)}
.ssoX{position:absolute;top:-6.5%;right:-1%;width:14.5%;aspect-ratio:1;border:0;background:none;padding:0;cursor:pointer;z-index:5}
.ssoX img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4))}
.ssoX:active{transform:translateY(2px)}
.ssoNote{position:absolute;left:6%;right:6%;bottom:0.5%;text-align:center;font-size:3vw;color:#eaf6ff;opacity:.85;line-height:1.3;z-index:2;margin:0}
.ssoNote{margin:14px 2px 0;font-size:12px;color:#8aa3ba;line-height:1.4;min-height:0}