/* Production baseline retained: depth, motion, direct access, no new visual template. */
.layered-art{filter:none}.space-depth{position:absolute;inset:0;background:#20215e;border:1px solid #e0e9c65c;overflow:hidden;isolation:isolate;box-shadow:12px 16px #090c1850}.space-layer{position:absolute;transition:transform .5s cubic-bezier(.2,.65,.2,1);pointer-events:none}.layered-art .space-layer>img,.layered-art .space-figure>img{width:100%;height:100%;position:absolute;inset:0;object-fit:fill;clip-path:none;border:none}.space-stars{inset:0;opacity:.85;animation:star-breathe 6s ease-in-out infinite}.space-far{width:48%;height:47%;right:-4%;top:-4%;animation:planet-orbit 17s ease-in-out infinite}.space-moon{left:15%;top:6%;width:13%;aspect-ratio:1;animation:planet-drift 11s ease-in-out infinite}.space-saturn{left:0;top:15%;width:10%;aspect-ratio:173/190;animation:planet-orbit 14s ease-in-out infinite reverse}.space-front{left:-3%;bottom:-4%;width:26%;height:32%}.space-ring{right:6%;bottom:4%;width:16%;aspect-ratio:251/335;animation:planet-drift 12s ease-in-out infinite reverse}.space-pilot{position:absolute;inset:0;transition:transform .5s cubic-bezier(.2,.65,.2,1);z-index:2}.space-figure{position:absolute;inset:0;background:none;width:100%;height:100%;padding:0;transform-origin:52% 55%;animation:pilot-float 9s ease-in-out infinite;cursor:grab}.space-figure:hover{filter:drop-shadow(0 0 10px #c5f36733)}.space-figure:active{cursor:grabbing}.space-figure.is-nudged{animation:pilot-nudge 1.8s ease-out}.helmet-light,.hose-light{position:absolute;inset:0;pointer-events:none;mask-size:100% 100%;mask-repeat:no-repeat}.helmet-light{mask-image:url('/assets/hero-panda-astro-helmet.webp');background:linear-gradient(110deg,transparent 42%,#fff9 49%,#c5f3ffb0 53%,transparent 60%);background-size:260% 100%;animation:helmet-sweep 7s ease-in-out infinite}.hose-light{mask-image:url('/assets/hero-panda-astro-hose.webp');background:linear-gradient(150deg,transparent 35%,#c5f3679c 48%,transparent 58%);background-size:160% 180%;animation:hose-flow 4.5s ease-in-out infinite}.space-trail{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 69% 65%,#c5f3678a 0 1px,transparent 2px),radial-gradient(circle at 40% 82%,#fff8 0 1px,transparent 2px),radial-gradient(circle at 78% 37%,#fff8 0 1px,transparent 2px);animation:trail-drift 6s ease-in-out infinite;z-index:3}
@keyframes pilot-float{0%,100%{transform:translate(0,0) rotate(-2deg)}25%{transform:translate(1%,-2%) rotate(0)}55%{transform:translate(-.5%,-3.5%) rotate(2.4deg)}80%{transform:translate(-1%,-1%) rotate(.5deg)}}@keyframes pilot-nudge{0%{transform:translate(0,0) rotate(-2deg)}30%{transform:translate(2%,-5%) rotate(6deg)}70%{transform:translate(-1%,-2%) rotate(-3deg)}100%{transform:translate(0,0) rotate(-2deg)}}@keyframes planet-drift{0%,100%{translate:0 0;rotate:-2deg}50%{translate:3px -14px;rotate:4deg}}@keyframes planet-orbit{0%,100%{translate:0 0;rotate:0}50%{translate:-9px 5px;rotate:6deg}}@keyframes star-breathe{0%,100%{opacity:.65}50%{opacity:1}}@keyframes helmet-sweep{0%,45%{background-position:0 0;opacity:0}50%{opacity:1}73%{background-position:100% 0;opacity:1}80%,100%{background-position:100% 0;opacity:0}}@keyframes hose-flow{0%,100%{background-position:0 0;opacity:.1}50%{background-position:100% 100%;opacity:.65}}@keyframes trail-drift{0%,100%{translate:0 5px;opacity:.35}50%{translate:0 -10px;opacity:.8}}
#lobby-selection[hidden]{display:none!important}#lobby-selection{height:100svh;width:100%;flex-shrink:0}#lobby-selection .game{height:100svh}body[data-view=selection]>.title-hud,body[data-view=selection]>.title-stage,body[data-view=selection]>.title-footer,body[data-view=selection]>.title-grain{display:none}body[data-view=selection]{min-height:0}.role-details{background:none;border:0;padding:5px 0;color:var(--secondary);font-size:10px;cursor:pointer}.role-details:hover{text-decoration:underline}.launch-dialog{max-width:780px;background:#171f25}.launch-dialog h2{font-family:'Noto Sans SC',sans-serif;font-size:31px;font-style:normal}.launch-note{font-size:12px;line-height:1.8;color:#c1cec2}.launch-group{margin:24px 0}.launch-group h3{font-size:12px;color:var(--secondary);margin:0 0 12px}.launch-group>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.launch-group a{position:relative;border:1px solid #d2e0b64c;background:#111a1c;padding:14px 25px 14px 14px;min-height:72px}.launch-group a:hover{background:#263329;border-color:var(--secondary)}.launch-group b{display:block;font-size:14px}.launch-group small{display:block;font-size:10px;color:#b0bea9;margin-top:6px}.launch-group a>span{position:absolute;right:10px;top:15px}.launch-group[data-launch-group=mobile] a{border:2px solid var(--secondary)}.launch-group[data-launch-group=web]{margin-top:28px;opacity:.8}.launch-group[data-launch-group=web] a{min-height:55px;padding-top:10px;padding-bottom:10px}.launch-group[data-launch-group=web] b{font-size:12px}.launch-risk{font-size:10px;line-height:1.7;color:#9ead9a}#launch-institutional>p{font-size:13px;line-height:1.8}#launch-institutional>small{display:block;font-size:10px;margin-top:15px;color:#a7b4a3}.institutional-phone{display:block;margin-top:20px;font-size:18px}.launch-dialog [hidden]{display:none!important}
@media(prefers-reduced-motion:no-preference){body[data-view=selection] #lobby-selection{animation:selection-arrive .35s ease-out}@keyframes selection-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}}
@media(max-width:800px){.space-far{width:46%;height:40%}.space-moon{left:10%;top:6%}.space-saturn{left:-3%;top:24%}.space-ring{right:0;bottom:3%}.space-front{height:26%}.launch-dialog{padding:40px 20px 24px;max-height:90svh}.launch-dialog h2{font-size:24px}.launch-group>div{grid-template-columns:1fr 1fr}.launch-group a{padding:12px 22px 12px 12px;min-height:65px}.launch-group b{font-size:12px}.launch-group small{font-size:9px}.launch-group>div>a:last-child:nth-child(odd){grid-column:1/-1}.launch-note{font-size:11px}.launch-group{margin:20px 0}.launch-group h3{font-size:11px}}
@media(prefers-reduced-motion:reduce){.space-layer,.space-figure,.helmet-light,.hose-light,.space-trail{animation:none!important;transition:none!important;transform:none!important;translate:none!important;rotate:none!important}.helmet-light,.hose-light{opacity:0}}
#lobby-selection .enter-hint{display:block}
.layered-art .space-figure>img,.layered-art .space-stars>img{object-fit:cover}.space-far{height:auto;aspect-ratio:845/601}.space-front{height:auto;aspect-ratio:467/350}.helmet-light,.hose-light{mask-size:cover;mask-position:center}
@media(max-width:800px){body[data-view=selection] .hud .wordmark{font-size:35px}body[data-view=selection] .hud .wordmark span,body[data-view=selection] #about-button,body[data-view=selection] #fullscreen{display:none}body[data-view=selection] .hud{gap:8px}body[data-view=selection] .title-languages{font-size:9px;gap:5px;margin:0}body[data-view=selection] .utilities{gap:5px}}
@media(max-width:800px){body[data-view=selection]{height:auto;min-height:100svh;overflow-y:auto}#lobby-selection{height:auto;min-height:100svh}#lobby-selection .game{height:auto;min-height:100svh;padding-bottom:95px}#lobby-selection #confirm{position:fixed;z-index:8;bottom:max(12px,env(safe-area-inset-bottom));left:20px;width:calc(100% - 40px);margin:0;filter:drop-shadow(0 -8px 15px #101317aa)}#lobby-selection .enter-hint{margin-top:12px}}
body[data-view=selection][data-character=fafa]{--scene:#314437;--accent:#ff6336;--secondary:#c5f367}
@media(prefers-reduced-motion:no-preference){body[data-view=selection] #lobby-selection{animation:selection-opacity .25s ease-out}@keyframes selection-opacity{from{opacity:0}to{opacity:1}}}
/* One typographic direction across the full brand lettering. */
.brand-title .title-kicker,.brand-title .title-name,.brand-title .title-name-en,.brand-title .title-position{transform:rotate(-5deg);transform-origin:left center}

/* Original company logo, reversed for the dark game header. */
.brand-title header .company-wordmark{display:flex;align-items:center;flex-shrink:0;transform:none;line-height:1}
.brand-title header .company-wordmark img{display:block;width:140px;height:40px;object-fit:contain;filter:invert(1)}
@media(max-width:800px){.brand-title header .company-wordmark img{width:112px;height:32px}}
/* A deep star field sits behind the supplied illustration layers. */
.space-depth{background:radial-gradient(ellipse at 52% 43%,#414187 0,#24245f 38%,#101530 100%)}
.space-flight{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.space-layer{z-index:1}.space-stars{opacity:.38}
.space-front{animation:foreground-float 16s ease-in-out infinite}
@keyframes foreground-float{0%,100%{translate:-5px 5px;rotate:-2deg}50%{translate:10px -9px;rotate:2deg}}
@media(prefers-reduced-motion:reduce){.space-flight{display:none}}
/* Shared spatial camera: the scene breathes quietly instead of flying at warp speed. */
.space-depth{transform-origin:52% 43%;will-change:transform}
.space-layer,.space-stars,.space-figure,.space-front{animation:none!important}
.space-layer,.space-pilot{transition:none;will-change:transform}
.space-stars{opacity:.4}
.space-stars>img{opacity:.62}
.helmet-light,.hose-light,.space-trail{display:none}
.space-figure{transform:none;filter:none}
.space-figure:hover{filter:none}
.astronaut-rig{display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:hidden}
.space-figure.segmented-ready>img{opacity:0}
@media(prefers-reduced-motion:reduce){.astronaut-rig{display:block}.space-figure.segmented-ready>img{opacity:0}}
@media(min-width:801px){.brand-title:not([data-view=selection]){overflow:clip}}
/* Match the brand heading's italic lettering as well as its shared rotation. */
.brand-title .title-position,.brand-title .title-position span{font-style:italic}
.brand-title .title-kicker{font-style:italic}
.brand-title .title-kicker span{font-style:normal}
/* Keep the character slogan in the orange negative space, clear of the face. */
#lobby-selection .scribble{left:66%;top:5%;max-width:130px}
@media(max-width:800px){#lobby-selection .scribble{left:68%;top:9%;font-size:21px;max-width:95px}}
#lobby-selection .santiz-display{position:absolute;inset:0;width:100%;height:100%;transform:scale(1.08);pointer-events:none;filter:none}
#lobby-selection .santiz-display[hidden]{display:none}
.display-scan{animation:screen-scan 2.4s linear infinite}
@keyframes screen-scan{from{transform:translateY(0);opacity:0}20%{opacity:.5}to{transform:translateY(78px);opacity:0}}
/* Balance perceived body mass rather than the three exported canvas bounds. */
body[data-character=fafa]{--role-art-scale:.92;--role-art-y:3%}
body[data-character=santiz]{--role-art-scale:1.24;--role-art-y:-3%}
body[data-character=qizai]{--role-art-scale:1.16;--role-art-y:-2%}
#lobby-selection .art-wrap #hero-art,#lobby-selection .art-wrap .santiz-display{transform:translateY(var(--role-art-y,0%)) scale(var(--role-art-scale,1.08))}
@media(min-width:801px){body.brand-title[data-view=selection]{overflow:clip}#lobby-selection .game{min-height:0}}
@media(max-width:800px){body[data-character=fafa]{--role-art-scale:.89;--role-art-y:3%}body[data-character=santiz]{--role-art-scale:1.08;--role-art-y:-2%}body[data-character=qizai]{--role-art-scale:1.10;--role-art-y:-1%}}
@media(min-width:801px){#lobby-selection .game{overflow:clip}}
#lobby-selection .scribble{white-space:nowrap}

/* Two explicit primary actions: learn the product or start using it. */
#lobby-selection .selection-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px;isolation:isolate}
#lobby-selection .selection-actions .confirm{margin:0;min-width:0;width:100%;transform:none}
#lobby-selection .selection-actions .confirm>span{padding:12px 14px;font-size:20px}
#lobby-selection .selection-actions .confirm b{right:12px;font-size:24px}
#lobby-selection .role-details{position:relative;display:flex;flex-direction:column;justify-content:center;gap:5px;min-height:76px;padding:12px 32px 12px 14px;border:2px solid var(--secondary);background:#192621;color:#f8f8e7;text-align:left;text-decoration:none;box-shadow:4px 4px #080d0a;font-size:18px;font-weight:900;line-height:1.15;transition:background .15s,transform .15s,box-shadow .15s}
#lobby-selection .role-details small{font-size:8px;font-family:monospace;letter-spacing:1px;color:var(--secondary);font-weight:400}
#lobby-selection .role-details b{position:absolute;right:10px;top:27px;font-size:23px;color:var(--secondary)}
#lobby-selection .role-details:hover,#lobby-selection .role-details:focus-visible{background:var(--secondary);color:#142017;transform:translate(-2px,-2px);box-shadow:6px 6px #080d0a;outline:2px solid #faffdc;outline-offset:3px;text-decoration:none}
#lobby-selection .role-details:is(:hover,:focus-visible) :is(small,b){color:#142017}
#lobby-selection .role-details:active{transform:translate(2px,2px);box-shadow:1px 1px #080d0a}
#lobby-selection .enter-hint:empty{display:none}
@media(min-width:801px) and (max-height:780px){#lobby-selection .selection-actions{margin-top:14px}#lobby-selection .role-details{min-height:68px;font-size:16px}#lobby-selection .selection-actions .confirm>span{font-size:19px}}
@media(max-width:800px){#lobby-selection .selection-actions{position:fixed;z-index:8;bottom:max(12px,env(safe-area-inset-bottom));left:20px;width:calc(100% - 40px);margin:0;filter:drop-shadow(0 -8px 15px #101317aa)}#lobby-selection .selection-actions #confirm{position:relative;inset:auto;width:100%;filter:none}#lobby-selection .role-details{min-height:72px;font-size:17px}#lobby-selection .selection-actions .confirm>span{font-size:20px}}

#lobby-selection .role-details{background:var(--secondary);color:#142017;padding-right:28px}
#lobby-selection .role-details :is(small,b){color:#142017}
#lobby-selection .role-details:is(:hover,:focus-visible){background:#fbffd1}
#lobby-selection .selection-actions .confirm{border:2px solid var(--secondary);background:#192621;box-shadow:4px 4px #080d0a;filter:none}
#lobby-selection .selection-actions .confirm>span{background:none;color:#f8f8e7;clip-path:none}
#lobby-selection .selection-actions .confirm:hover{background:#2b3b2c}
#lobby-selection .selection-actions .confirm small{letter-spacing:1px;white-space:nowrap}

#lobby-selection .selection-actions .confirm{grid-column:auto;align-self:stretch}

/* Keep the player marker clear of the illustrated heads. */
#lobby-selection .selected-marker{top:auto;left:auto;right:3px;bottom:3px;z-index:3;letter-spacing:1px;padding:3px 6px;pointer-events:none}

/* Keep selection feedback local to the card and character. */
#lobby-selection .selection-flash{display:none}
#lobby-selection .is-switching .art-wrap,body.is-switching #lobby-selection .art-wrap{animation:role-arrive .22s cubic-bezier(.2,.7,.3,1)}
@keyframes role-arrive{from{opacity:.5;translate:14px 0}to{opacity:1;translate:0 0}}
#lobby-selection .roster-card:focus-visible{outline:3px solid #fffde1;outline-offset:6px}
#lobby-selection .roster-card:active{transform:skew(-9deg) translateY(-2px)}
#lobby-selection .selection-actions :is(a,button):focus-visible{outline:3px solid #fffde1;outline-offset:4px}
#lobby-selection .selection-actions :is(a,button){touch-action:manipulation}
@media(hover:hover){#lobby-selection .roster-card:not([aria-pressed=true]):hover{border-color:#e9f7c4;background:#3a4840}}
@media(hover:none){#lobby-selection .roster-card:not([aria-pressed=true]):hover{transform:skew(-9deg)}#lobby-selection .roster-card[aria-pressed=true]:hover{transform:skew(-9deg) translateY(-5px)}}
@media(prefers-reduced-motion:reduce){body.is-switching #lobby-selection .art-wrap{animation:none}}