:root{
  --blue0:#021838;--blue1:#03275f;--blue2:#0647a6;--blue3:#0969dc;--blue4:#1c9cff;
  --milk:#fffdf8;--cream:#f4eadb;--gold:#ffd33d;--gold2:#f3a900;--ink:#07162f;
  --danger:#ff5b4b;--green:#39d98a;--glass:rgba(3,26,70,.78);--line:rgba(255,255,255,.20);
  --safeT:max(14px,env(safe-area-inset-top));--safeB:max(14px,env(safe-area-inset-bottom));
  --safeL:max(14px,env(safe-area-inset-left));--safeR:max(14px,env(safe-area-inset-right));
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#01132e;color:white}
body{display:grid;place-items:center;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
button{font:inherit;border:0;color:inherit;cursor:pointer}button:focus-visible{outline:3px solid #fff;outline-offset:3px}
[hidden]{display:none!important}
.app{position:relative;width:100vw;height:100dvh;max-width:560px;overflow:hidden;background:linear-gradient(#0a67d4,#03265c);isolation:isolate}
@media(min-width:700px){body{background:radial-gradient(circle at 50% 20%,#0d4d9e,#020d23 68%)}.app{height:min(100dvh,980px);border-radius:28px;border:1px solid #ffffff22;box-shadow:0 30px 90px #0009}}
.screen{position:absolute;inset:0;z-index:10;opacity:0;pointer-events:none;transform:translateY(8px) scale(.995);transition:opacity .24s ease,transform .24s ease}
.screen.active{opacity:1;pointer-events:auto;transform:none}

/* HOME */
.home{display:flex;flex-direction:column;background:linear-gradient(#0b73e2,#063f91)}
.homeArt{position:relative;height:66%;min-height:470px;background-image:linear-gradient(180deg,transparent 76%,#06316f 100%),url('assets/backgrounds/scene_10.webp');background-size:cover;background-position:center top;overflow:hidden}
.homeArt:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:100px;background:linear-gradient(transparent,#052c66)}
.homeTop{position:absolute;z-index:3;left:var(--safeL);right:var(--safeR);top:var(--safeT);display:flex;align-items:center;justify-content:space-between;gap:10px}
.uyPill,.statPill,.miniIcon{background:rgba(0,42,102,.76);border:1px solid #ffffff33;box-shadow:inset 0 0 0 1px #64c5ff33,0 10px 20px #00133855;backdrop-filter:blur(8px)}
.uyPill{border-radius:999px;padding:8px 12px;font-size:10px;font-weight:900;letter-spacing:.11em;text-transform:uppercase;display:flex;align-items:center;gap:7px}
.flag{width:22px;height:15px;border-radius:3px;background:repeating-linear-gradient(#fff 0 2px,#5eb5ff 2px 4px);position:relative;box-shadow:0 0 0 1px #fff7}.flag:before{content:"";position:absolute;left:0;top:0;width:8px;height:8px;background:#fff}.flag:after{content:"✦";position:absolute;left:1px;top:-2px;color:#f6c21c;font-size:8px}
.homeTopRight{display:flex;gap:8px}.miniIcon{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:18px;font-weight:900}
.homeDock{position:relative;z-index:4;flex:1;margin-top:-28px;padding:0 var(--safeR) calc(var(--safeB) + 10px) var(--safeL);display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(180deg,#052d69 0,#031c47 100%)}
.homeSummary{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:12px}
.statPill{min-height:62px;border-radius:17px;padding:10px 11px;display:flex;flex-direction:column;justify-content:center}.statPill small{font-size:8px;font-weight:900;letter-spacing:.12em;color:#bce7ff;text-transform:uppercase}.statPill b{font-size:17px;margin-top:3px}
.mainPlay{position:relative;width:100%;min-height:68px;border-radius:22px;background:linear-gradient(180deg,#ffd956,#f6a900);color:#0a2b64;font-size:22px;font-weight:1000;text-transform:uppercase;letter-spacing:.02em;box-shadow:0 7px 0 #b66a00,0 16px 30px #00133966,inset 0 2px #fff9;overflow:hidden}
.mainPlay:before{content:"";position:absolute;inset:3px;border:2px solid #fff7;border-radius:18px;pointer-events:none}.mainPlay:active{transform:translateY(3px);box-shadow:0 4px 0 #b66a00,0 10px 20px #00133955}
.homeMenu{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:12px}.menuBtn{min-height:62px;border-radius:18px;background:linear-gradient(180deg,#0d65ca,#053e8e);border:1px solid #ffffff2e;box-shadow:inset 0 0 0 1px #59baff2c,0 10px 18px #0012374d;font-size:11px;font-weight:900;text-transform:uppercase;display:grid;place-items:center;gap:3px;padding:7px}.menuBtn span{font-size:20px}.menuBtn:active{transform:scale(.98)}

/* PANEL SCREENS */
.panelScreen{padding:calc(var(--safeT) + 8px) var(--safeR) calc(var(--safeB) + 10px) var(--safeL);background:radial-gradient(circle at 50% 0,#147cde,#04285f 48%,#021838 100%);overflow:auto}
.panelHeader{display:flex;align-items:center;gap:12px;margin-bottom:16px}.backBtn{width:46px;height:46px;border-radius:50%;background:#0c57b5;border:1px solid #ffffff35;font-size:24px;font-weight:900}.panelTitle{flex:1}.panelTitle small{display:block;font-size:9px;font-weight:900;letter-spacing:.14em;color:#acdfff;text-transform:uppercase}.panelTitle h2{margin:2px 0 0;font-size:26px}.creamCard{background:linear-gradient(#fffdf8,#efe5d6);color:#08204c;border-radius:24px;border:4px solid #073d8b;box-shadow:0 20px 35px #00122f66,inset 0 0 0 2px #ffffff;padding:16px}
.tutorialHero{height:150px;border-radius:18px;background:linear-gradient(135deg,#0b78dd,#053b88);position:relative;overflow:hidden;margin-bottom:14px}.tutorialHero:before{content:"";position:absolute;inset:0;background-image:url('assets/characters/run_01.png');background-size:125px auto;background-repeat:no-repeat;background-position:80% 50%;filter:drop-shadow(0 18px 15px #001b4d66)}.tutorialHero b{position:absolute;left:18px;top:26px;max-width:48%;font-size:24px;line-height:1.03;color:#fff;text-shadow:0 3px #003277}
.step{display:grid;grid-template-columns:52px 1fr;gap:12px;align-items:center;padding:12px;border-bottom:1px solid #09265a18}.step:last-child{border-bottom:0}.stepIcon{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;background:#0b62c9;color:#fff;font-size:24px;font-weight:900;box-shadow:inset 0 -4px #003d8c33}.step strong{display:block;font-size:15px}.step p{margin:3px 0 0;color:#4d5d78;font-size:12px;line-height:1.35}.wideBtn{width:100%;min-height:56px;border-radius:18px;background:linear-gradient(#147ae2,#0752ae);color:#fff;font-weight:900;font-size:16px;box-shadow:0 6px 0 #043477;margin-top:14px}.wideBtn.gold{background:linear-gradient(#ffd94f,#f2a600);color:#092c63;box-shadow:0 6px 0 #ad6500}

/* LOCKER */
.skinGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.skinCard{position:relative;border-radius:20px;overflow:hidden;background:linear-gradient(#0f6ed1,#073d8c);border:2px solid #ffffff35;min-height:210px;padding:8px;color:#fff;text-align:center}.skinCard.selected{border-color:#ffd94f;box-shadow:0 0 0 3px #ffd94f55,0 15px 30px #00143f70}.skinCard.locked{filter:saturate(.4) brightness(.75)}.skinImg{height:142px;display:grid;place-items:center}.skinImg img{max-height:136px;max-width:135px;filter:drop-shadow(0 14px 12px #00184477)}.skinImg.celeste img{filter:hue-rotate(14deg) saturate(.75) brightness(1.18) drop-shadow(0 14px 12px #00184477)}.skinImg.green img{filter:hue-rotate(90deg) saturate(1.15) drop-shadow(0 14px 12px #00184477)}.skinImg.red img{filter:hue-rotate(205deg) saturate(1.2) drop-shadow(0 14px 12px #00184477)}.skinCard b{display:block;font-size:14px}.skinCard small{display:block;margin-top:4px;color:#cce8ff;font-size:10px}.lockTag{position:absolute;right:8px;top:8px;background:#001c47cc;border-radius:999px;padding:5px 8px;font-size:9px;font-weight:900}

/* ACHIEVEMENTS */
.achList{display:grid;gap:10px}.ach{display:grid;grid-template-columns:52px 1fr auto;gap:11px;align-items:center;padding:13px;border-radius:18px;background:#ffffff0f;border:1px solid #ffffff20}.achIcon{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(#ffd950,#f2a800);color:#663700;font-size:22px;box-shadow:inset 0 -4px #a95d0030}.ach h3{margin:0;font-size:14px}.ach p{margin:3px 0 0;color:#bfe6ff;font-size:10px}.achState{font-size:18px}.progress{height:7px;background:#ffffff22;border-radius:999px;margin-top:7px;overflow:hidden}.progress i{display:block;height:100%;background:linear-gradient(90deg,#52d8ff,#ffd34d);border-radius:inherit}

/* GAME */
.game{background:#071a3c}.game canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.hud{position:absolute;z-index:6;left:var(--safeL);right:var(--safeR);top:var(--safeT);display:grid;grid-template-columns:1fr auto;gap:8px;pointer-events:none}.hudTop{display:grid;grid-template-columns:1.25fr .9fr .9fr;gap:7px}.hudChip{height:58px;border-radius:17px;background:linear-gradient(180deg,#0c438dE8,#06275ee8);border:1px solid #ffffff2d;box-shadow:inset 0 0 0 1px #54baff22,0 8px 18px #0013335e;padding:8px 10px;display:flex;align-items:center;gap:8px}.hudChip small{display:block;font-size:7px;letter-spacing:.13em;color:#bde7ff;font-weight:900;text-transform:uppercase}.hudChip b{display:block;font-size:17px;line-height:1.1}.hudCookie{width:30px;height:30px;object-fit:contain}.pauseBtn{width:58px;height:58px;border-radius:50%;background:linear-gradient(#0d5bc0,#053777);border:1px solid #ffffff2d;font-size:20px;font-weight:1000;pointer-events:auto;box-shadow:0 8px 18px #00133366}.missionBar{grid-column:1/-1;height:17px;border-radius:999px;background:#001b46aa;border:1px solid #ffffff26;padding:3px;overflow:hidden}.missionBar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#fff,#ffd54b,#f3a600);width:0%;box-shadow:0 0 14px #ffd24a88;transition:width .2s}.powerRow{grid-column:1/-1;display:flex;justify-content:center;gap:8px;min-height:32px}.powerPill{display:flex;align-items:center;gap:5px;height:30px;padding:0 9px;border-radius:999px;background:#06265ee6;border:1px solid #ffffff2b;font-size:10px;font-weight:900}.powerPill img{width:20px;height:20px;object-fit:contain}
.controls{position:absolute;z-index:6;left:var(--safeL);right:var(--safeR);bottom:calc(var(--safeB) + 12px);display:flex;justify-content:space-between;align-items:end;pointer-events:none}.controlBtn{pointer-events:auto;width:84px;height:84px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 28%,#4ab7ff,#0755b9 64%,#033578);border:3px solid #ffffff9a;box-shadow:inset 0 0 0 4px #0b83ee88,0 12px 24px #00153888;color:white;font-size:30px;font-weight:1000}.controlBtn.slide{width:70px;height:70px;font-size:26px;opacity:.92}.controlBtn:active{transform:scale(.94)}
.comboToast,.eventToast{position:absolute;z-index:7;left:50%;transform:translateX(-50%) scale(.9);opacity:0;pointer-events:none;transition:.22s ease}.comboToast.show,.eventToast.show{opacity:1;transform:translateX(-50%) scale(1)}.comboToast{top:145px;background:linear-gradient(#ffd852,#f2a500);color:#6f3a00;border-radius:14px;padding:8px 14px;font-weight:1000;box-shadow:0 10px 20px #00173f55}.eventToast{top:190px;background:#073b89e8;border:1px solid #ffffff30;border-radius:15px;padding:9px 14px;font-size:11px;font-weight:900;letter-spacing:.05em}.countdown{position:absolute;inset:0;z-index:8;display:grid;place-items:center;pointer-events:none;font:1000 92px/1 Arial Black,Arial,sans-serif;font-style:italic;color:#fff;text-shadow:0 8px 0 #0043a1,0 15px 28px #001236aa;opacity:0;transform:scale(.7)}.countdown.show{animation:popCount .66s ease both}@keyframes popCount{0%{opacity:0;transform:scale(.55)}35%{opacity:1;transform:scale(1.1)}75%{opacity:1}100%{opacity:0;transform:scale(.9)}}

/* MODALS */
.modal{position:absolute;inset:0;z-index:20;display:grid;place-items:center;padding:calc(var(--safeT) + 14px) 16px calc(var(--safeB) + 14px);background:#011635b8;backdrop-filter:blur(10px)}.modalCard{width:min(100%,430px);border-radius:28px;padding:18px;background:linear-gradient(180deg,#0b4ea4,#04275f);border:1px solid #ffffff2a;box-shadow:0 26px 55px #0008,inset 0 0 0 1px #53baff22;text-align:center}.modalBadge{display:inline-block;padding:6px 10px;border-radius:999px;background:#ffffff13;color:#c9eaff;font-size:9px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.modalCard h2{margin:10px 0 4px;font-size:31px}.modalCard p{margin:0;color:#c9e9ff;font-size:12px;line-height:1.4}.pauseArt{width:210px;max-width:65%;margin:6px auto 0;display:block}.resultGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0}.resultBox{border-radius:16px;background:#ffffff12;padding:11px}.resultBox small{display:block;color:#bce6ff;font-size:8px;font-weight:900;letter-spacing:.1em}.resultBox b{display:block;font-size:20px;margin-top:3px}.rewardBox{position:relative;border-radius:20px;overflow:hidden;background:#031f51;margin:14px 0;border:1px solid #ffffff2a;min-height:230px}.rewardBox:before{content:"";position:absolute;inset:0;background:url('assets/backgrounds/scene_11.webp') center 40%/cover no-repeat;opacity:.38;filter:saturate(1.1)}.rewardInner{position:relative;z-index:1;padding:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:230px;background:linear-gradient(transparent,#02183bdc)}.rewardInner img{width:92px;height:92px;object-fit:contain;filter:drop-shadow(0 10px 16px #0006)}.rewardInner strong{font-size:24px;margin-top:4px}.rewardInner small{color:#d3efff;margin-top:5px}.code{margin-top:8px;background:#fff;color:#083471;border-radius:10px;padding:8px 12px;font-weight:900;letter-spacing:.08em}
.modalActions{display:grid;gap:9px}.modalActions .wideBtn{margin-top:0}.ghostBtn{width:100%;min-height:48px;border-radius:16px;background:#ffffff10;border:1px solid #ffffff20;color:#fff;font-weight:800}

.loading{position:absolute;inset:0;z-index:50;display:grid;place-items:center;background:linear-gradient(#0b6ad5,#03265c);text-align:center}.loadingLogo{font:1000 italic 48px/1 Arial Black,Arial,sans-serif;letter-spacing:-.06em;text-shadow:0 6px 0 #00397e}.loader{width:190px;height:9px;border-radius:999px;background:#ffffff25;overflow:hidden;margin:18px auto 0}.loader i{display:block;height:100%;width:25%;background:#fff;border-radius:inherit;animation:load 1s ease-in-out infinite}@keyframes load{50%{width:70%;translate:70% 0}}
.homeToast{position:absolute;left:50%;bottom:calc(var(--safeB) + 18px);z-index:70;transform:translateX(-50%);max-width:86%;padding:11px 15px;border-radius:15px;background:#fff;color:#06316f;box-shadow:0 14px 30px #0007;font-size:11px;font-weight:800;text-align:center}.rotate{position:absolute;inset:0;z-index:60;display:grid;place-items:center;text-align:center;background:#021838;padding:28px}.rotate b{font-size:24px}.rotate p{color:#bfe6ff;max-width:280px}
@media(orientation:landscape) and (max-height:600px){.rotate{display:grid!important}}

/* V6 visual depth */
.app{max-width:620px}
.homeArt{min-height:520px;background-position:center 10%;}
.homeDock{padding-top:12px}
.gameHudLabel{letter-spacing:.12em}
@media(max-height:760px){.homeArt{height:61%;min-height:390px}.homeSummary{margin-bottom:8px}.mainPlay{min-height:60px}.homeMenu{margin-top:8px}.menuBtn{min-height:54px}}

/* V6.1 clarity pass */
.homeArt{height:64%;min-height:500px;background-size:cover;background-position:center top}
.homeDock{margin-top:-18px;border-top:1px solid rgba(116,205,255,.22);box-shadow:0 -24px 44px rgba(1,15,49,.22);}
.homeSummary{gap:10px}.statPill{min-height:66px}.mainPlay{min-height:72px}.menuBtn{min-height:66px}
.hud{gap:10px}.hudTop{gap:8px}.hudChip{height:62px;padding:9px 11px}.pauseBtn{width:62px;height:62px}
@media(max-width:420px){.hud{left:10px;right:10px}.hudTop{grid-template-columns:1.15fr .9fr .82fr;gap:5px}.hudChip{height:56px;padding:7px 8px}.hudChip small{font-size:7px}.hudChip b{font-size:17px}.pauseBtn{width:56px;height:56px}.homeSummary{gap:7px}.statPill{padding:9px}.statPill b{font-size:15px}}

/* ============================================================
   V7 MOBILE HUB — iPhone / Android portrait first
   The menus scroll. Only the live game remains a fixed viewport.
   ============================================================ */
:root{--contentX:clamp(14px,4vw,24px)}
html,body{height:100%;height:100dvh}
body{overflow:hidden;touch-action:manipulation}
.app{width:100%;height:100dvh;max-width:640px;overflow:hidden;border-radius:0}
.screen{height:100%;overflow:hidden}

/* HOME — long, scrollable hub instead of one compressed viewport */
.home{display:block;background:#021735}
.homeScroller{position:absolute;inset:0;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;scroll-behavior:smooth;background:#021735;padding-bottom:max(20px,var(--safeB));}
.homeScroller::-webkit-scrollbar,.panelScreen::-webkit-scrollbar,.scenarioRail::-webkit-scrollbar,.miniSkinRow::-webkit-scrollbar{display:none}
.homeHero{position:relative;width:100%;height:auto;min-height:520px;aspect-ratio:9/11;overflow:hidden;background:linear-gradient(#42aef4,#0c63bb)}
.homeHeroImage{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;display:block;transform:scale(1.015)}
.homeHeroOverlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,33,87,.08) 0%,rgba(1,25,65,0) 48%,rgba(1,25,65,.14) 66%,#021735 100%);pointer-events:none}
.homeTop{position:absolute;z-index:4;left:var(--contentX);right:var(--contentX);top:var(--safeT);display:flex;justify-content:space-between;align-items:center;gap:10px}
.heroCaption{position:absolute;z-index:3;left:var(--contentX);right:var(--contentX);bottom:42px;text-align:left;text-shadow:0 4px 20px rgba(0,20,60,.6)}
.heroCaption>span{display:inline-flex;padding:7px 10px;border-radius:999px;background:rgba(2,31,80,.62);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px);font-size:8px;letter-spacing:.16em;font-weight:1000;color:#d8f3ff}
.heroCaption h1{margin:11px 0 6px;font:1000 italic clamp(38px,11vw,62px)/.93 "Arial Black",Arial,sans-serif;letter-spacing:-.055em;color:#fff;max-width:390px}
.heroCaption p{margin:0;max-width:330px;font-size:12px;line-height:1.42;color:#e8f7ff;font-weight:600}

.homeHub{position:relative;z-index:5;margin-top:-24px;padding:0 var(--contentX) 30px;background:linear-gradient(180deg,#062c67 0,#031b42 14%,#02152f 100%);border-radius:28px 28px 0 0;border-top:1px solid rgba(111,205,255,.34);box-shadow:0 -25px 45px rgba(0,14,44,.34)}
.homeSummary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding-top:16px;margin:0 0 12px}
.statPill{min-width:0;min-height:68px;padding:10px 10px;border-radius:17px;background:linear-gradient(180deg,rgba(10,77,157,.82),rgba(4,38,89,.9));border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 0 0 1px rgba(82,187,255,.12),0 9px 18px rgba(0,17,52,.22);backdrop-filter:blur(8px)}
.statPill small{font-size:7px;line-height:1.15;letter-spacing:.1em}.statPill b{font-size:clamp(13px,3.6vw,17px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mainPlay{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:76px;border-radius:22px;margin:0;background:linear-gradient(180deg,#ffe06a 0,#ffc22e 48%,#f6a600 100%);color:#06285c;box-shadow:0 7px 0 #a95f00,0 18px 28px rgba(0,16,49,.28),inset 0 2px rgba(255,255,255,.75)}
.mainPlay span{font-size:21px;line-height:1;font-weight:1000}.mainPlay small{font-size:9px;margin-top:5px;letter-spacing:.09em;text-transform:uppercase;color:#715000}
.mainPlay:before{inset:4px;border-radius:17px;border-color:rgba(255,255,255,.55)}
.homeMenu{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:13px 0 0}
.menuBtn{min-width:0;min-height:82px;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:8px 5px;background:linear-gradient(180deg,#0d69cf,#06448f);border:1px solid rgba(255,255,255,.2);box-shadow:inset 0 0 0 1px rgba(94,194,255,.16),0 10px 18px rgba(0,15,48,.2);text-transform:none}
.menuBtn span{font-size:21px;line-height:1}.menuBtn b{font-size:10px;line-height:1.1;text-transform:uppercase;letter-spacing:.02em}.menuBtn small{display:block;font-size:7px;line-height:1.2;color:#bce5ff;font-weight:700;text-transform:none}
.scrollCue{height:52px;display:flex;align-items:center;justify-content:center;gap:8px;color:#85cfff;font-size:8px;font-weight:900;letter-spacing:.16em}.scrollCue i{display:block;width:7px;height:7px;border-right:2px solid #85cfff;border-bottom:2px solid #85cfff;transform:rotate(45deg);animation:scrollCue 1.4s ease-in-out infinite}@keyframes scrollCue{50%{translate:0 5px;opacity:.45}}

.hubSection{margin-top:10px;padding:18px;border-radius:24px;background:linear-gradient(145deg,rgba(11,66,139,.65),rgba(3,31,73,.88));border:1px solid rgba(255,255,255,.15);box-shadow:inset 0 0 0 1px rgba(80,183,255,.08),0 16px 30px rgba(0,11,38,.2)}
.sectionHeading{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:14px}.sectionHeading small{display:block;color:#7fd2ff;font-size:8px;font-weight:1000;letter-spacing:.16em}.sectionHeading h2{margin:2px 0 0;font-size:23px;line-height:1}.sectionMeta{font-size:9px;color:#9bd9ff}.textLink{padding:7px 10px;border-radius:999px;background:#ffffff0f;border:1px solid #ffffff1e;color:#d7efff;font-size:9px;font-weight:900}
.runnerFeature{display:grid;grid-template-columns:minmax(120px,.86fr) 1.14fr;gap:12px;align-items:center;min-height:205px;padding:12px;border-radius:20px;background:linear-gradient(135deg,#0a70d9,#063e8e);overflow:hidden;position:relative}
.runnerPreview{position:relative;min-height:180px;display:grid;place-items:center}.runnerGlow{position:absolute;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,#83d8ff66,transparent 68%);filter:blur(4px)}.runnerPreview img{position:relative;z-index:1;width:min(160px,40vw);height:auto;filter:drop-shadow(0 18px 16px rgba(0,18,55,.48))}
.runnerInfo{min-width:0}.eyebrowMini{display:inline-block;padding:5px 7px;border-radius:999px;background:#ffffff14;color:#bfe9ff;font-size:7px;letter-spacing:.13em;font-weight:1000}.runnerInfo h3{margin:7px 0 5px;font-size:24px}.runnerInfo p{margin:0;color:#c7eaff;font-size:10px;line-height:1.42}.unlockBar{height:8px;background:#001d4a;border-radius:999px;margin:12px 0 5px;overflow:hidden}.unlockBar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#6ad8ff,#ffd84d);border-radius:inherit;transition:width .25s ease}.runnerInfo>small{display:block;color:#9edcff;font-size:8px;line-height:1.3}
.miniSkinRow{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(82px,1fr);gap:8px;overflow-x:auto;margin:10px -2px 0;padding:2px 2px 4px;scroll-snap-type:x proximity}.miniSkin{scroll-snap-align:start;min-height:96px;padding:7px;border-radius:16px;background:#041f4d;border:1px solid #ffffff1b;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}.miniSkin.selected{border-color:#ffd64a;box-shadow:inset 0 0 0 1px #ffd64a55}.miniSkin img{width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 8px 8px #00133a88)}.miniSkin.celeste img{filter:hue-rotate(14deg) saturate(.75) brightness(1.18) drop-shadow(0 8px 8px #00133a88)}.miniSkin.green img{filter:hue-rotate(90deg) saturate(1.15) drop-shadow(0 8px 8px #00133a88)}.miniSkin.red img{filter:hue-rotate(205deg) saturate(1.2) drop-shadow(0 8px 8px #00133a88)}.miniSkin span{font-size:8px;font-weight:900;margin-top:2px}

.powerGrid{display:grid;gap:9px}.powerCard{display:grid;grid-template-columns:74px 1fr;gap:12px;align-items:center;padding:11px;border-radius:18px;background:#021b43;border:1px solid rgba(255,255,255,.12)}.powerVisual{width:74px;height:74px;display:grid;place-items:center;border-radius:17px;background:radial-gradient(circle at 35% 28%,#176fd1,#062a68);box-shadow:inset 0 0 0 1px #5bc5ff22}.powerVisual img{width:58px;height:58px;object-fit:contain;filter:drop-shadow(0 8px 10px #00103499)}.powerCard b{display:block;font-size:14px}.powerCard p{margin:4px 0 0;color:#b9ddf8;font-size:9px;line-height:1.35}

.scenarioRail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(210px,76%);gap:10px;overflow-x:auto;margin:0 -4px;padding:2px 4px 7px;scroll-snap-type:x mandatory}.scenarioCard{position:relative;height:190px;border-radius:19px;overflow:hidden;background:#062555;border:1px solid #ffffff1d;scroll-snap-align:start;box-shadow:0 12px 24px #00103255}.scenarioCard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}.scenarioCard:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 35%,rgba(1,14,38,.95) 100%)}.scenarioCard>div{position:absolute;z-index:2;left:13px;right:13px;bottom:12px}.scenarioCard small{display:block;color:#79ceff;font-size:7px;letter-spacing:.14em;font-weight:1000}.scenarioCard b{display:block;font-size:16px;margin-top:2px}.scenarioCard span{display:block;font-size:8px;color:#c3e8ff;margin-top:2px}.scenarioCard.featured{border-color:#ffd74d}

.achievementPreview{display:grid;gap:8px}.achievementPreview article{display:grid;grid-template-columns:42px 1fr;gap:10px;align-items:center;padding:10px 11px;border-radius:16px;background:#021b43;border:1px solid #ffffff14}.achievementPreview article>span{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(#ffdb55,#eda300);color:#603700;font-size:16px;font-weight:1000}.achievementPreview b{display:block;font-size:11px}.achievementPreview small{display:block;margin-top:2px;color:#a9d8f5;font-size:8px}
.rewardTeaser{display:grid;grid-template-columns:104px 1fr;gap:14px;align-items:center;background:radial-gradient(circle at 0 50%,#0b73d7,#062b67 45%,#031a41 100%);overflow:hidden}.rewardCookie{width:104px;height:104px;display:grid;place-items:center;position:relative}.rewardCookie:before{content:"";position:absolute;width:100px;height:100px;border-radius:50%;background:radial-gradient(circle,#8fdfff55,transparent 70%)}.rewardCookie img{position:relative;width:88px;height:88px;object-fit:contain;filter:drop-shadow(0 12px 15px #00103688)}.rewardTeaser>div:last-child>small{color:#85d3ff;font-size:7px;letter-spacing:.14em;font-weight:1000}.rewardTeaser h2{margin:3px 0 5px;font-size:21px}.rewardTeaser p{margin:0;color:#c8e9ff;font-size:9px;line-height:1.4}.inlinePlay{margin-top:10px;padding:9px 12px;border-radius:12px;background:#ffd13d;color:#06295f;font-size:9px;font-weight:1000}
.gameFooter{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:24px 4px 4px;color:#75bce8}.gameFooter b{font:1000 italic 17px/1 Arial Black,Arial,sans-serif;color:#fff}.gameFooter span{font-size:7px;text-align:right}

/* Full menu screens — sticky header + true mobile scrolling */
.panelScreen{padding:0 var(--contentX) calc(max(30px,var(--safeB)) + 10px);overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;scrollbar-width:none;background:radial-gradient(circle at 50% -10%,#1181e8 0,#063a82 34%,#021837 78%)}
.panelHeader{position:sticky;top:0;z-index:5;margin:0 calc(var(--contentX) * -1) 16px;padding:calc(var(--safeT) + 10px) var(--contentX) 12px;background:linear-gradient(180deg,rgba(3,40,94,.98),rgba(3,40,94,.9) 72%,rgba(3,40,94,0));backdrop-filter:blur(12px);display:flex;align-items:center;gap:12px}
.backBtn{flex:0 0 46px}.panelTitle h2{font-size:28px}.panelTitle small{font-size:8px}
.creamCard{margin-bottom:6px}.wideBtn{margin-bottom:6px}
.skinGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;padding-bottom:4px}.skinCard{min-height:248px;padding:9px;border-radius:21px;display:flex;flex-direction:column;justify-content:flex-end}.skinImg{height:176px;min-height:176px}.skinImg img{max-height:170px;max-width:160px}.skinCard b{font-size:15px}.skinCard small{font-size:9px;margin-bottom:4px}
.achList{padding-bottom:20px}.ach{min-height:82px;padding:13px}.ach h3{font-size:13px}.ach p{font-size:9px}

/* GAME — preserve 9:16 world geometry, crop only the safe outer edges */
.game{overflow:hidden;background:#031738}.game canvas{position:absolute;top:0;bottom:0;left:50%;right:auto;width:auto;height:100%;max-width:none;aspect-ratio:9/16;transform:translateX(-50%);display:block;touch-action:none}
.hud{left:max(10px,var(--safeL));right:max(10px,var(--safeR));top:calc(var(--safeT) + 3px);gap:8px}.hudTop{grid-template-columns:1.15fr .92fr .82fr;gap:5px;min-width:0}.hudChip{min-width:0;height:58px;padding:7px 8px;border-radius:16px}.hudChip small{font-size:6.5px}.hudChip b{font-size:15px;white-space:nowrap}.hudCookie{width:26px;height:26px}.pauseBtn{width:58px;height:58px}.missionBar{height:16px}.powerRow{min-height:30px;overflow:hidden}
.controls{left:max(14px,var(--safeL));right:max(14px,var(--safeR));bottom:calc(var(--safeB) + 16px);align-items:end}.controlBtn{width:90px;height:90px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;border-width:3px}.controlBtn.slide{width:78px;height:78px}.controlBtn b{font-size:29px;line-height:.9}.controlBtn small{display:block;margin-top:4px;font-size:7px;letter-spacing:.09em;font-weight:1000}.controlBtn.slide b{font-size:25px}.comboToast{top:142px}.eventToast{top:184px}

/* Modals scroll on small-height phones instead of clipping */
.modal{overflow-y:auto;align-items:start;-webkit-overflow-scrolling:touch}.modalCard{margin:auto;max-height:none}.pauseArt{max-height:220px;object-fit:contain}

@media(max-width:430px){
  :root{--contentX:14px}
  .homeHero{min-height:500px;aspect-ratio:9/11.5}
  .homeTop{left:12px;right:12px}.uyPill{padding:7px 9px;font-size:8px}.miniIcon{width:40px;height:40px}
  .heroCaption{bottom:37px}.heroCaption h1{font-size:40px}.heroCaption p{font-size:11px;max-width:290px}
  .homeHub{margin-top:-22px;border-radius:24px 24px 0 0}.homeSummary{gap:6px}.statPill{min-height:64px;padding:9px 8px}.statPill small{font-size:6.5px}
  .menuBtn{min-height:78px}.runnerFeature{grid-template-columns:128px 1fr;padding:10px}.runnerPreview{min-height:166px}.runnerPreview img{width:145px}.runnerInfo h3{font-size:21px}.runnerInfo p{font-size:9px}
  .hubSection{padding:15px;border-radius:21px}.sectionHeading h2{font-size:21px}.scenarioRail{grid-auto-columns:82%}.scenarioCard{height:178px}
  .skinCard{min-height:228px}.skinImg{height:158px;min-height:158px}.skinImg img{max-height:154px;max-width:144px}
  .hud{left:8px;right:8px}.hudTop{gap:4px}.hudChip{height:54px;padding:6px 6px}.hudChip b{font-size:14px}.hudCookie{width:23px;height:23px}.pauseBtn{width:54px;height:54px}.controls{left:12px;right:12px}
}

@media(max-width:350px){
  .homeMenu{grid-template-columns:1fr}.menuBtn{min-height:56px;display:grid;grid-template-columns:32px 1fr;grid-template-rows:auto auto;text-align:left;justify-items:start;padding:8px 12px}.menuBtn span{grid-row:1/3}.menuBtn b{font-size:10px}.menuBtn small{font-size:7px}
  .runnerFeature{grid-template-columns:1fr}.runnerPreview{min-height:150px}.skinGrid{grid-template-columns:1fr}.skinCard{min-height:250px}.scenarioRail{grid-auto-columns:90%}.rewardTeaser{grid-template-columns:84px 1fr}.rewardCookie{width:84px;height:84px}.rewardCookie img{width:70px;height:70px}
  .hudTop{grid-template-columns:1.15fr .95fr}.hudChip:nth-child(3){display:none}.pauseBtn{width:52px;height:52px}.hudChip{height:52px}.controlBtn{width:82px;height:82px}.controlBtn.slide{width:72px;height:72px}
}

@media(max-height:700px) and (orientation:portrait){
  .homeHero{min-height:450px}.heroCaption h1{font-size:36px}.heroCaption p{font-size:10px}.homeSummary{padding-top:14px}.mainPlay{min-height:70px}
  .controls{bottom:calc(var(--safeB) + 9px)}.controlBtn{width:82px;height:82px}.controlBtn.slide{width:72px;height:72px}
}

@media(min-width:700px){
  .app{height:min(100dvh,980px);border-radius:28px;border:1px solid #ffffff22;box-shadow:0 30px 90px #0009}.homeHero{min-height:600px}.homeHub{padding-left:28px;padding-right:28px}.hubSection{padding:22px}.scenarioRail{grid-auto-columns:60%}
}

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.scrollCue i{animation:none}.screen{transition:none}}