/* V&M usability pass: consistent density, reachable primary actions and quiet motion. */
:root{--ux-gap:16px;--ux-radius:18px;--ux-out:cubic-bezier(.23,1,.32,1)}
html{scroll-padding-top:90px;scroll-padding-bottom:104px}.shell{padding-bottom:120px}.topbar{position:sticky;top:0;z-index:30;background:#0b1727f5;backdrop-filter:blur(16px);padding-top:12px;padding-bottom:12px;margin-bottom:20px}.topbar .brand-mark{width:44px;height:44px}.topbar .brand{font-size:13px}.topbar .nav-toggle{margin-left:0}
.screen-hero{padding:4px 0 20px;margin-bottom:20px}.screen-hero h1{font-size:clamp(30px,5vw,42px)}.screen-hero>p:last-child{font-size:14px;line-height:1.6;margin-top:12px}.section-description,.shop-description{line-height:1.65}.shop-body .section-description,.shop-body .shop-description{font-size:13px}.section-message:not(:empty){padding:10px 12px;border-left:2px solid var(--vm-cyan);border-radius:6px;background:#a5e8e209;font-size:13px}.editor-hint{font-size:12px}.stage-card{padding:22px}.stage-card h2{font-size:22px}
.quick-nav{position:fixed;z-index:40;bottom:max(12px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:grid;grid-template-columns:repeat(4,1fr);gap:6px;width:min(440px,calc(100% - 24px));padding:7px;border:1px solid #45647a;border-radius:20px;background:#122438f5;box-shadow:0 10px 36px #0006;backdrop-filter:blur(16px)}.quick-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:52px;border:1px solid transparent;border-radius:13px;background:transparent;color:#b5c9dd;font:600 11px Manrope,Arial,sans-serif;cursor:pointer;transition:background 150ms,color 150ms}.quick-nav svg{width:22px;height:22px}.quick-nav button[aria-current=page]{background:#204d6b;color:#a5e8e2;border-color:#477f91}.quick-nav button:active{background:#2c536c}.quick-nav button:focus-visible{outline:2px solid #a5e8e2;outline-offset:1px}
.carousel-toolbar{align-items:center;gap:12px}.carousel-toolbar h2{font-size:17px}.carousel-track{scrollbar-width:none}.carousel-track::-webkit-scrollbar{display:none}.carousel-controls{gap:7px}.carousel-counter{min-width:44px}.carousel-arrow{display:grid;place-items:center}.carousel-arrow svg{margin:0}.product-art{height:230px;padding-bottom:58px}.art-pc{height:278px;padding-bottom:100px}.pixel-art-caption{padding:10px}.pixel-art-caption strong{font-size:26px}.shop-body{padding:18px;gap:12px}.shop-body h3{font-size:21px}.shop-body .primary-action{font-size:13px}.wardrobe-tabs{gap:8px;margin:16px 0}.wardrobe-tabs button{font-size:12px;padding:8px 12px}.inventory-dialog{padding:20px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#45647a transparent;scroll-padding-top:75px}.inventory-dialog .summary-close{position:sticky;top:0;float:right;margin:0 0 8px 12px;z-index:5;display:grid;place-items:center;background:#223c54;border:1px solid #51718a}.inventory-dialog>h2{margin-top:8px}.accessory-card h3{font-size:18px}.accessory-card>img{height:140px}
.wardrobe-panel .profile-hero{margin-bottom:16px;padding-bottom:16px;gap:16px}.wardrobe-panel .profile-hero .avatar{width:64px;height:64px;flex:none}.wardrobe-heading{font-size:12px;align-items:center}.wardrobe-balance{font-size:24px;margin:12px 0}.wardrobe-panel .mascot-stage{width:min(100%,270px);margin:10px auto 16px}.wardrobe-panel .inventory-open{margin:16px 0 0;display:flex;align-items:center;justify-content:center;gap:10px}.inventory-open svg{width:20px;height:20px}.promo-box{margin-top:18px;padding-top:16px}.profile-stat{padding:16px}.profile-stat small{font-size:12px}.profile-stat strong{font-size:19px}.profile-stats{gap:12px}
.pass-hero-copy{padding:20px}.pass-hero h1{font-size:clamp(26px,5vw,38px)}.pass-progress h2{margin-top:0}.pass-premium{padding:20px}.pass-premium h2{font-size:20px}.pass-premium details{margin:10px 0;color:var(--vm-muted);font-size:13px}.pass-premium summary{min-height:44px;cursor:pointer;display:flex;align-items:center;gap:8px}.pass-premium summary::marker{content:''}.pass-premium summary::-webkit-details-marker{display:none}.pass-premium summary svg{width:18px;height:18px}.pass-premium details .section-description{margin-top:8px}.pass-jump{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}.pass-jump button{background:#152c42;color:var(--vm-cyan);border:1px solid var(--vm-border);border-radius:12px;padding:10px 16px;min-height:44px;font:600 13px Manrope,sans-serif;cursor:pointer}.pass-quest{padding:16px}.pass-quest h3{font-size:15px}.pass-quests{gap:12px}.pass-progress>.section-description{margin:10px 0}.pass-level>h2{font-size:28px}.pass-branches .primary-action{min-height:46px}
.screen.is-active{animation:ux-screen 180ms var(--ux-out) both}.confirm-dialog[open]{animation:ux-dialog 180ms var(--ux-out)}button:not(:disabled):active{transform:scale(.985)}.click-button:not(:disabled):active{transform:none;filter:brightness(1.1)}.cursor{animation:blink 1.3s step-end infinite}.expand-panel{transition:grid-template-rows 200ms var(--ux-out),opacity 150ms}.quick-nav~dialog{scroll-margin-bottom:110px}.bottom-nav,.bottom-nav.is-open{top:max(86px,calc(env(safe-area-inset-top) + 72px));max-height:calc(100dvh - 110px)}footer{margin-top:28px;line-height:1.7}
@keyframes ux-screen{from{opacity:.35;transform:translateY(5px)}to{opacity:1;transform:none}}@keyframes ux-dialog{from{opacity:0;transform:translateY(6px) scale(.985)}to{opacity:1;transform:none}}
@media(max-width:799px){.shell{width:calc(100% - 28px);padding-top:0}.topbar{gap:7px}.topbar .brand{gap:8px;font-size:12px}.intro{min-height:130px;padding:20px;margin-bottom:14px}.intro h1{font-size:29px;line-height:1.05;max-width:68%}.intro .eyebrow{margin-bottom:8px;font-size:9px}.intro .subtitle{font-size:11px;line-height:1.4;max-width:76%;margin-top:12px;background:none}.intro-mascot{width:170px;height:170px;top:50%;right:-10px;mask-image:linear-gradient(90deg,transparent,#000 30%)}.balance-card{min-height:135px;padding:18px 20px}.balance-number{font-size:35px;margin:7px 0 10px}.balance-unit{font-size:15px}.card-head{font-size:10px}.coin-icon{width:24px;height:24px}.balance-foot{font-size:11px;gap:6px}.editor{margin-top:14px}.editor-bar{height:38px}.code-view{height:112px;min-height:112px;max-height:112px;padding:14px 16px;font-size:11px;overflow-y:auto;scrollbar-width:thin}.click-button{min-height:52px;padding:14px;font-size:13px}.editor-hint{margin:8px 12px 10px;min-height:18px;font-size:11px}.progress-card{margin-top:14px;padding:16px}.stage-card{margin-top:16px;padding:18px}.screen-hero h1{font-size:30px}.program-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.program-option{min-height:86px}.profile-stat strong{font-size:17px}.pass-quests{grid-template-columns:1fr;margin:14px 0}.pass-quest{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:center}.pass-quest h3{grid-column:1;grid-row:1;margin:0}.pass-quest>strong{grid-column:2;grid-row:1;font-size:16px}.pass-quest>.section-description{grid-column:1;grid-row:2;margin:0;font-size:12px}.pass-quest>progress{grid-column:1;grid-row:3}.pass-quest>button{grid-column:2;grid-row:2 / span 2;margin:0;font-size:11px;padding:9px;min-width:110px}.pass-hero-copy{padding:18px}.pass-hero-copy>p:last-child{margin-bottom:0}.pass-progress .primary-action{font-size:12px}.pass-level{padding:14px}.pass-branches{gap:8px}.pass-reward{padding:12px}.pass-reward h3{font-size:13px}.inventory-dialog{max-height:88dvh}.topbar .pass-header-button{font-size:10px;padding:8px}.ranking-mascot .mascot-stage{max-width:200px}.ranking-stats{gap:10px}}
@media(min-width:800px){#screen-play{gap:18px}#screen-play .intro{min-height:210px;padding:28px}#screen-play .intro-mascot{width:320px;height:320px}.quick-nav{bottom:16px}.pass-hero{display:grid;grid-template-columns:1fr 1fr;align-items:center}.pass-hero-copy{padding:24px}.pass-hero>img{min-width:0}.inventory-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:350px){.intro h1{font-size:26px}.intro .subtitle{max-width:75%;font-size:10px}.intro-mascot{right:-23px;width:160px;height:160px}.topbar .brand>span:last-child{display:none}.pass-quest>button{min-width:95px;font-size:10px}.pass-quest>strong{font-size:14px}.progress-head{font-size:9px}.quick-nav{bottom:max(8px,env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(hover:hover) and (pointer:fine){.quick-nav button:hover,.pass-jump button:hover{background:#20435b}.carousel-arrow:hover:not(:disabled){border-color:var(--vm-cyan)}}
@media(max-width:799px){.intro .subtitle{max-width:55%;font-size:11px;line-height:1.45}.intro-mascot{width:155px;height:155px;right:-6px}.intro{min-height:158px}.intro h1{font-size:28px}.intro .subtitle{margin-top:10px}}button,input,select,summary{scroll-margin-top:95px;scroll-margin-bottom:110px}dialog button,dialog input,dialog select,dialog summary{scroll-margin-top:65px;scroll-margin-bottom:20px}
.event-summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;min-height:62px;cursor:pointer;list-style:none}.event-summary::-webkit-details-marker{display:none}.event-summary::marker{content:''}.event-summary strong{font-size:14px;line-height:1.4}.event-summary small{display:block;color:var(--vm-cyan);font-size:12px;margin-top:4px}.event-summary svg{width:22px;height:22px;flex:none;transition:transform 180ms var(--ux-out)}.event-content[open] .event-summary svg{transform:rotate(180deg)}.event-content[open] .event-summary{border-bottom:1px solid var(--vm-border)}.event-content .event-copy>strong{display:none}.keyboard-mode button:active{transform:none!important}
/* Cohesive surfaces: pixel objects remain transparent, cards carry the visual frame. */
:root{--ux-radius:22px}.launch-screen{background:radial-gradient(ellipse at 50% 38%,#183d5466,transparent 65%),#0b1727;transition:opacity 220ms var(--ux-out),visibility 220ms}.launch-progress{height:6px!important;width:240px;max-width:80%}.launch-progress span{animation:none!important;transform:scaleX(0);transition:transform 160ms var(--ux-out);background:linear-gradient(90deg,#286ce4,#a5e8e2)!important}.launch-status{font:12px/1.6 Manrope,sans-serif;color:#afc3d7;margin:14px auto;max-width:300px;min-height:38px}.launch-actions{max-width:300px;margin:20px auto}.launch-continue{min-height:44px;padding:12px;border:0;background:transparent;color:#afc3d7;cursor:pointer;font:12px Manrope,sans-serif}.launch-title{margin:12px 0}.launch-kicker{margin-bottom:4px}.launch-logo{animation:vm-mascot 1.6s ease-in-out infinite alternate}.launch-screen .launch-ellipsis{display:none}
.shop-card{border:1px solid #3b5b74;border-radius:22px;clip-path:none;padding:0;background:linear-gradient(155deg,#1b354d,#112235);box-shadow:0 8px 24px #020b151f;transition:border-color 180ms,box-shadow 180ms}.shop-card.is-owned,.shop-card.is-you,.shop-card:focus-within{background:linear-gradient(155deg,#1c3e50,#112235);border-color:var(--vm-cyan)}.shop-body{background:transparent;border:0;box-shadow:none;padding:18px 20px 22px}.product-art{background:transparent!important;border-radius:22px 22px 0 0;position:relative}.product-art img{padding:16px 16px 4px;object-fit:contain}.pixel-art-caption{background:transparent;border:0;padding:10px 16px 12px;text-shadow:none}.pixel-art-caption strong{font-size:27px;color:#b9f1ea}.pixel-hardware span{font-size:17px;color:#b3cadf}.shop-price{color:#b9f1ea}.shop-badge{color:#94c5d6}.shop-body h3{font-size:20px}.shop-description{font-size:13px}.shop-card .primary-action{border-radius:13px;background:linear-gradient(120deg,#225ed0,#267ce3);box-shadow:inset 0 1px #ffffff21,0 4px 14px #06132535;border-color:#628fd0}.shop-card .primary-action:disabled{background:#21364d;box-shadow:none}.carousel-track{padding:4px 2px 16px;border-radius:22px}.carousel-arrow{border-radius:13px}.carousel-counter{color:#c0d3e5}.catalog-carousel{margin:22px 0}.stage-card,.editor,.progress-card,.profile-stat{border-radius:22px;box-shadow:inset 0 1px #c8e8ff07}.editor-bar{background:linear-gradient(90deg,#213b52,#193147)}.code-view{background:#0b1b2c}.click-button{background:linear-gradient(105deg,#225ed0,#267ce3);box-shadow:inset 0 1px #ffffff2a,0 5px 20px #07172655}.balance-card{background:linear-gradient(125deg,#17406a,#245f93 70%,#246579);border-color:#5e8dab}.balance-card::after{color:#a5e8e210}.intro{border-color:#35566e;background:linear-gradient(135deg,#102437,#0b1727);box-shadow:inset 0 1px #b7e6ff07}.intro-mascot{mix-blend-mode:lighten}.pass-reward{border-radius:16px;background:#08162530}.pass-reward.premium{background:linear-gradient(140deg,#542c442b,#fcbe7e09)}.pass-level{background:linear-gradient(150deg,#193248,#112235);border-radius:22px}.pass-hero{box-shadow:inset 0 1px #22dff820}.accessory-card{border-radius:20px;background:linear-gradient(145deg,#142a3e,#0b1727)}.quick-nav{box-shadow:0 10px 36px #0006,inset 0 1px #bfe6fa14}.quick-nav button[aria-current=page]{background:linear-gradient(130deg,#235370,#204351)}.image-pending{opacity:0}.image-ready{opacity:1;transition:opacity 160ms}.image-failed{opacity:.35}.screen-load-label{font-size:12px;line-height:1.5;color:#afc3d7;padding:8px 0}.screen-load-label:empty{display:none}
@media(hover:hover) and (pointer:fine){.shop-card:hover{background:linear-gradient(155deg,#1b354d,#112235);border-color:#76a7bc;box-shadow:0 12px 28px #020b1533}}
@media(max-width:600px){.shop-body{padding:16px 18px 20px}.product-art img{padding:12px 12px 2px}.pixel-art-caption strong{font-size:25px}.shop-body h3{font-size:19px}}
@media(prefers-reduced-motion:reduce){.image-ready,.launch-progress span{transition:none}.launch-logo{animation:none!important}}
/* Mobile game shell: one palette, tactile controls, compact game panels. */
:root{--game-panel:#152e43;--game-edge:#365970;--game-shadow:#061320;--game-highlight:#9dece2}
body{background:radial-gradient(ellipse at 50% 0,#21445d 0,transparent 65%),#0b1727;background-attachment:fixed;overscroll-behavior-y:none;-webkit-tap-highlight-color:transparent}
.launch-screen{background:#0b1727;isolation:isolate}.launch-logo{animation:none!important;background:transparent;box-shadow:none;border:0}.launch-logo img{mix-blend-mode:lighten}.launch-logo::before,.launch-logo::after,.launch-runway::before,.launch-runway::after{display:none!important}.launch-runway{border:0;background:none}.launch-kicker{font-size:16px;letter-spacing:.14em}.launch-title{color:#eef8ff}.launch-progress{height:9px!important;border:1px solid #477286;background:#132c40;padding:1px}.launch-progress span{border-radius:6px}
.shell{max-width:960px;padding-bottom:112px}.shell>footer{display:none}.topbar{background:#0b1727f5;border-bottom:1px solid #3c60734d;padding:10px 0;margin-bottom:14px}.topbar .brand-mark{border:0;background:transparent;border-radius:0;overflow:visible}.brand-mark img{mix-blend-mode:lighten}.topbar .brand{font-size:13px}.topbar .stage{display:none}.topbar .nav-toggle{margin-left:0}.topbar .pass-header-button{margin-left:auto;border-color:#9b7852;background:linear-gradient(#514138,#2d2930);color:#ffdbac;min-height:44px;box-shadow:0 3px #15121d,inset 0 1px #ffd5a42b}.nav-toggle{box-shadow:0 3px #061320,inset 0 1px #c8f7ff12!important}
.screen-hero{border:0;margin:0 0 16px;padding:8px 2px}.screen-hero .eyebrow{font-size:9px;letter-spacing:.14em;margin:0 0 5px;color:#8ab8c7}.screen-hero h1{font-size:28px;line-height:1.15;margin:0}.screen-hero>p:last-child{font-size:12px;line-height:1.5;margin-top:8px;max-width:520px}
#screen-play .intro{min-height:94px;padding:14px 16px;margin:0 0 12px;border:0;background:transparent;box-shadow:none;display:block}#screen-play .intro h1{font-size:24px;line-height:1.12;margin:0;max-width:70%}#screen-play .intro .eyebrow{font-size:9px;margin:0 0 6px}#screen-play .intro .subtitle{font-size:11px;margin:7px 0 0;max-width:72%}#screen-play .intro-mascot{width:125px;height:125px;right:-8px;mask-image:none;mix-blend-mode:lighten}
.balance-card{min-height:0!important;padding:14px 18px;background:linear-gradient(120deg,#21485c,#19384d);border:1px solid #508095;border-radius:18px;box-shadow:inset 0 1px #c0fff224,0 4px #071521}.balance-card::after{display:none}.balance-number{font-size:32px;margin:3px 0 8px}.balance-unit{font-size:13px}.balance-foot{font-size:11px}.card-head{font-size:9px;letter-spacing:.12em}.coin-icon{width:22px;height:22px;border-radius:8px;background:#a5e8e2;color:#14354b;box-shadow:0 2px #53968f}.balance-foot span{background:#081c2b50;border-radius:7px;padding:4px 6px}
.stage-card,.progress-card,.profile-stat,.pass-level,.pass-premium,.pass-quest,.accessory-card,.shop-card{border-color:var(--game-edge);background:linear-gradient(155deg,#1a354a,#11283b);box-shadow:inset 0 1px #d8f8ff10,0 4px 0 var(--game-shadow);border-radius:18px}.stage-card{padding:18px}.stage-card h2{font-size:20px}.section-heading,.section-kicker{font-size:10px;letter-spacing:.08em}.section-description{font-size:12px;line-height:1.55}.editor{border:1px solid #4e7b91;border-radius:18px;box-shadow:0 5px #061320,inset 0 1px #ffffff12;margin-top:14px;overflow:hidden}.editor-bar{height:34px;background:#1b374a}.window-dots{display:none}.editor-bar::before{content:'</>';font:700 13px monospace;color:#9dece2}.code-view{height:120px;min-height:120px;max-height:120px;background:#0b1d2c;font-size:12px}.click-button{border:1px solid #9dece26b;background:linear-gradient(#3588d2,#235fba);border-radius:13px;box-shadow:0 4px #123c70,inset 0 2px #c6f9ff35;min-height:56px;font-size:14px;margin:10px;width:calc(100% - 20px)}.click-button:not(:disabled):active{transform:translateY(2px);box-shadow:0 2px #123c70;filter:brightness(1.1)}.editor-hint{font-size:11px;margin:12px 14px}.button-plus{background:#102f6880;border-radius:8px;padding:4px 8px}.progress-card{padding:14px 16px;margin-top:14px}.progress-track{height:10px;border-radius:6px;background:#061725;border:1px solid #38566a;padding:1px}.progress-fill{border-radius:5px;background:linear-gradient(90deg,#267fde,#9dece2)}.progress-foot{font-size:10px}.program-option{min-height:76px;background:#0b2133;border-color:#34566c;box-shadow:inset 0 1px #ffffff08}.program-option.is-selected{background:#204659;border-color:#9dece2;box-shadow:inset 0 0 0 1px #9dece23b}.primary-action{box-shadow:0 3px #10305a,inset 0 1px #def5ff24;min-height:48px}.primary-action:disabled{box-shadow:none}
.quick-nav{width:min(460px,calc(100% - 20px));border-radius:23px;background:linear-gradient(#1b374b,#112538);border-color:#4e7187;box-shadow:0 5px 0 #061321,0 10px 30px #0005,inset 0 1px #d1f6ff1f;gap:5px;padding:7px}.quick-nav button{min-height:54px;border-radius:16px;gap:5px;font-size:10px}.quick-nav button[aria-current=page]{background:linear-gradient(#30617a,#204356);border-color:#7ebbbf;box-shadow:inset 0 1px #caffef22,0 2px #081a27;color:#bdfff0}.quick-nav svg{width:23px;height:23px}.bottom-nav button{background:#1a354a;border:1px solid #35556a;min-height:58px}.bottom-nav{background:#102538!important;border-color:#55798c!important}.nav-heading{color:#c3eee7}.product-art{height:220px}.art-pc{height:275px}.shop-body{padding:16px 18px 20px;gap:10px}.shop-card .primary-action{box-shadow:0 3px #10305a,inset 0 1px #c6f9ff35}.shop-card .primary-action:disabled{box-shadow:none}.carousel-toolbar h2{font-size:16px}.carousel-arrow{width:44px;height:44px;background:#1c3a50;border:1px solid #4b738b;box-shadow:0 3px #081a29}.carousel-counter{font-size:12px}.catalog-carousel{margin:18px 0}.pass-hero{border-radius:18px}.pass-jump button,.wardrobe-tabs button{box-shadow:0 2px #071725}.pass-reward{border:1px solid #35576a}.pass-reward.premium{border-color:#85644e}.profile-hero{border-radius:18px}.wardrobe-panel .mascot-stage{max-width:290px}.inventory-dialog{border-radius:24px;background:#102538}.confirm-dialog::backdrop{background:#020c1dcc;backdrop-filter:blur(5px)}
@media(min-width:800px){#screen-play{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:'intro intro' 'balance editor' 'progress editor' 'check check' 'program program';gap:16px}#screen-play .intro{min-height:110px;padding:16px 0}#screen-play .intro-mascot{right:0;width:160px;height:160px}#screen-play .code-view{min-height:130px}.topbar{padding:12px 0}.screen-hero h1{font-size:32px}}
@media(max-width:799px){.shell{width:calc(100% - 24px);padding-top:env(safe-area-inset-top,0px)}.topbar{gap:8px}.topbar .brand-mark{width:42px;height:42px}.topbar .brand{font-size:11px;gap:5px}.topbar .nav-toggle{width:44px;height:44px}.topbar .pass-header-button{font-size:10px;padding:7px}.bottom-nav,.bottom-nav.is-open{top:max(78px,calc(env(safe-area-inset-top) + 70px));right:12px;width:calc(100vw - 24px)}.program-options{grid-template-columns:repeat(2,minmax(0,1fr))}.screen-hero h1{font-size:27px}}
@media(prefers-reduced-motion:reduce){.click-button:not(:disabled):active{transform:none}}
#screen-play .intro{isolation:auto}#screen-play .intro-mascot{z-index:0}#screen-play .intro>*:not(img){z-index:1}

#screen-play .intro{background:#173247;border-radius:18px}.intro-mascot{mix-blend-mode:lighten}
/* Motion layer: short state transitions with no ambient logo animation. */
.screen.is-active{animation:game-screen-in 230ms cubic-bezier(.23,1,.32,1) both}
@keyframes game-screen-in{from{opacity:.4;transform:translateY(9px)}to{opacity:1;transform:none}}
.quick-nav button{transition:background 160ms,color 160ms,border-color 160ms,transform 120ms}.quick-nav button svg{transition:transform 180ms cubic-bezier(.23,1,.32,1)}.quick-nav button[aria-current=page] svg{transform:translateY(-2px)}.quick-nav button:active{transform:translateY(2px)}
.bottom-nav,.bottom-nav.is-open{transition:transform 240ms cubic-bezier(.32,.72,0,1),opacity 160ms,visibility 240ms}.menu-scrim{transition:opacity 180ms,visibility 180ms}
.inventory-dialog[open],.confirm-dialog[open]{animation:game-dialog-in 240ms cubic-bezier(.23,1,.32,1) both}
@keyframes game-dialog-in{from{opacity:0;transform:translateY(18px) scale(.975)}to{opacity:1;transform:none}}
.inventory-dialog::backdrop,.confirm-dialog::backdrop{animation:game-backdrop-in 180ms ease-out}
@keyframes game-backdrop-in{from{opacity:0}to{opacity:1}}
.primary-action,.carousel-arrow,.wardrobe-tabs button,.program-option{transition:transform 120ms cubic-bezier(.23,1,.32,1),background 160ms,border-color 160ms,box-shadow 120ms}.primary-action:not(:disabled):active,.carousel-arrow:not(:disabled):active{transform:translateY(2px);box-shadow:0 1px #081a29}
.progress-fill{transition:width 220ms cubic-bezier(.23,1,.32,1)}
.game-gain{position:fixed;z-index:60;pointer-events:none;color:#baffef;text-shadow:0 2px 0 #071d30;font:700 18px Manrope,sans-serif;animation:game-gain 650ms cubic-bezier(.23,1,.32,1) forwards}
@keyframes game-gain{0%{opacity:0;transform:translate(-50%,0) scale(.9)}20%{opacity:1;transform:translate(-50%,-12px) scale(1)}100%{opacity:0;transform:translate(-50%,-48px) scale(.95)}}
@media(hover:hover) and (pointer:fine){.carousel-arrow:not(:disabled):hover{transform:translateY(-2px)}.primary-action:not(:disabled):hover{filter:brightness(1.08)}}
@media(prefers-reduced-motion:reduce){.screen.is-active,.inventory-dialog[open],.confirm-dialog[open],.inventory-dialog::backdrop,.confirm-dialog::backdrop{animation:none!important}.game-gain{display:none}.quick-nav button svg{transform:none!important}}
/* Stable header compositing and one coordinate system for avatar frames. */
.topbar,.topbar:has(.nav-toggle[aria-expanded=true]){z-index:51;background:#0b1727;backdrop-filter:none;isolation:isolate}
.topbar .brand-mark{background:#0b1727;isolation:isolate;overflow:hidden;flex-shrink:0}
.topbar .brand-mark img{display:block;transform:none;width:100%;height:100%;object-fit:contain;mix-blend-mode:lighten}
.avatar,.public-avatar,.ranking-portrait .public-avatar{box-sizing:border-box;aspect-ratio:1;padding:0;flex-shrink:0;isolation:isolate}
.avatar:has(.equipped-frame),.public-avatar:has(.equipped-frame){border:0;box-shadow:none}
.avatar>img:not(.equipped-frame),.public-avatar>img:not(.equipped-frame){position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;margin:0;transform:none}
.avatar>.equipped-frame,.public-avatar>.equipped-frame{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;margin:0!important;padding:0!important;transform:none!important;object-fit:contain!important;display:block;image-rendering:pixelated;z-index:2;pointer-events:none}

.avatar>img[hidden],.public-avatar>img[hidden]{display:none!important}
/* Header paint reaches the viewport edges; controls retain their content alignment. */
.topbar::before{content:'';position:absolute;inset:0 calc((100% - 100vw)/2);background:#0b1727;border-bottom:1px solid #3c60734d;z-index:-1;pointer-events:none}