@font-face{font-family:HeyComic;src:url('assets/native-menu/HeyComic-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
:root{color-scheme:dark;--bg:#102c30;--accent:#ffe000;--aura:181,153,107;--offset-near:260px;--offset-far:465px;--hero-height:420px;--hero-top:30px;--near-scale:.79;--far-scale:.63}
*{box-sizing:border-box}
body{margin:0;min-height:100svh;overflow-x:hidden;background:var(--bg)}
button{-webkit-tap-highlight-color:transparent;cursor:pointer}
*:focus,*:focus-visible{outline:none}
main{position:relative;z-index:1;width:100%;min-height:100svh;margin:0 auto;padding:32px;display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center}
.brand-mark{max-height:clamp(40px,calc(100svh - 675px),148px)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.selection-menu{position:relative;isolation:isolate;width:100%;max-width:1370px;padding:21px 25px;animation:menu-arrive .6s cubic-bezier(.16,1,.3,1) both}
.menu-frame,.portrait-frame{position:absolute;inset:0;pointer-events:none;z-index:-2}
.menu-frame img,.portrait-frame img{display:block;width:100%;height:100%;user-select:none}
.menu-frame{filter:brightness(.74) saturate(.7) drop-shadow(0 20px 28px #020d12a6)}
.portrait-frame{filter:brightness(.47) saturate(.72)}
.selection-action{position:relative;display:flex;justify-content:center;flex-shrink:0;padding:17px 0 0}
.select-button{position:relative;isolation:isolate;display:grid;place-items:center;width:224px;height:64px;padding:0;border:0;background:transparent url('assets/class-menu/select.webp') center/100% 100% no-repeat;color:#fff8d9;font:400 29px/1 HeyComic,Arial,sans-serif;filter:drop-shadow(0 3px 0 #10350766);transition:translate .16s,filter .16s,scale .16s;touch-action:manipulation}
.select-button span{position:relative;z-index:1}
.select-button:not(:disabled):hover{translate:0 -2px;filter:brightness(1.12) drop-shadow(0 7px 0 #10350755)}
.select-button:not(:disabled):active{translate:0 2px;scale:.985;filter:brightness(.96) drop-shadow(0 2px 0 #10350755)}
.select-button:disabled{cursor:default}
/* Keep the native panel's complete outline; a CSS radius clips its corners. */
.carousel-scene{position:relative;isolation:isolate;width:100%;height:calc(var(--hero-height) + var(--hero-top)*2);overflow:hidden;touch-action:pan-y}
.ambient-light{position:absolute;z-index:-1;width:850px;height:600px;left:50%;top:50%;transform:translate(-50%,-50%);background:radial-gradient(ellipse,rgba(var(--aura),.12),#ffffff03 45%,transparent 70%);transition:background .5s;pointer-events:none}
.carousel{position:relative;height:100%;width:100%;max-width:1280px;margin:auto}
.hero{border:0;background:transparent;position:absolute;top:var(--hero-top);left:50%;width:330px;height:var(--hero-height);padding:0;display:flex;align-items:center;justify-content:center;transform-origin:50% 80%;user-select:none;will-change:transform,opacity;border-radius:40%}
.hero-art{position:relative;display:flex;align-items:center;justify-content:center;height:100%;width:auto;aspect-ratio:6/5;flex-shrink:0;pointer-events:none}
.hero-art:after{content:'';position:absolute;width:150px;height:17px;top:80%;left:50%;border-radius:50%;background:#091d25a8;filter:blur(7px);transform:translate(-50%,-50%);z-index:-1}
.hero-art:before{content:'';position:absolute;width:235px;height:31px;top:80%;left:50%;border:2px solid #e6eeb640;background:radial-gradient(ellipse,#dce5b21c,transparent 70%);box-shadow:0 0 16px #e3e4a00c;border-radius:50%;transform:translate(-50%,-50%);transition:opacity .4s;opacity:0}
.hero[aria-checked=true] .hero-art:before{opacity:1}
.hero img{height:100%;max-width:100%;object-fit:contain;pointer-events:none}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;transition:opacity .2s ease}
.hero.live canvas{opacity:1}.hero.live img{visibility:hidden}
@keyframes menu-arrive{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@media(min-width:1600px) and (min-height:1000px){:root{--hero-height:490px;--hero-top:35px;--offset-near:290px;--offset-far:505px}.hero{width:380px}.selection-menu{max-width:1490px}}
@media(max-width:1150px){:root{--offset-near:222px;--offset-far:390px;--hero-height:380px;--near-scale:.76;--far-scale:.59}.hero{width:300px}main{padding:24px}.selection-menu{padding:18px 21px}}
@media(max-width:900px){:root{--offset-near:190px;--offset-far:330px;--hero-height:355px;--near-scale:.71;--far-scale:.53}.hero{width:280px}.selection-menu{padding:18px}.ambient-light{width:640px}}
@media(max-width:600px){:root{--offset-near:175px;--offset-far:330px;--hero-height:335px;--hero-top:20px;--near-scale:.65;--far-scale:.5}main{padding:12px}.selection-menu{padding:19px 13px}.hero{width:260px}.hero-art:before{width:205px;height:30px}.ambient-light{width:460px;height:400px}.select-button{width:206px;height:59px;font-size:27px}.selection-action{padding-top:14px}}
@media(max-height:720px){:root{--hero-height:300px;--hero-top:20px}main{padding-top:18px;padding-bottom:18px}.selection-menu{padding-top:16px;padding-bottom:16px}.selection-action{padding-top:12px}.select-button{height:58px;font-size:27px}}
@media(max-height:480px) and (min-width:601px){:root{--hero-height:235px;--hero-top:9px}.selection-menu{padding:12px 20px}.selection-action{padding-top:8px}.select-button{height:49px;width:190px;font-size:24px}}
@media(max-height:720px){.brand-mark{max-height:clamp(48px,calc(100svh - 500px),120px)}}
@media(max-height:480px) and (min-width:601px){main{gap:4px}.brand-mark{width:210px;max-height:clamp(30px,calc(100svh - 400px),64px)}}
@media(prefers-reduced-motion:reduce){.world-cloud{animation:none}.selection-menu,.brand-mark{animation:none}.select-button{transition:filter .15s}.ambient-light{transition:none}}