@font-face{font-family:RoundedSmile;src:url('../assets/fonts/rounded-smile/HakgyoansimDunggeunmisoTTF-R.woff2?v=9bca4dca118f') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:RoundedSmile;src:url('../assets/fonts/rounded-smile/HakgyoansimDunggeunmisoTTF-B.woff2?v=9bca4dca118f') format('woff2');font-weight:700;font-display:swap}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#11121c;color:#eee6de;font:14px/1.5 RoundedSmile,system-ui}#scene{display:block;width:100vw;height:100dvh;outline:none;touch-action:none}#status{position:fixed;inset:0;display:grid;place-items:center;background:#11121c;color:#e3ded6;z-index:10}[hidden]{display:none!important}
:root{--entry-paper:#fbfbfa;--entry-ink:#2b3145;--entry-accent-edge:#9e791f;--entry-accent-soft:#fff3c9;--entry-lemon:#ffdf78;--entry-neutral:#f0f1f3;--entry-line:#d4d7de}
/* Character select: a game scene and one compact control group, no editorial subtitles. */
.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}
#entry{position:fixed;inset:0;display:grid;place-items:center;isolation:isolate;background:#161822;overflow:auto;padding:24px 20px;z-index:5}
#entry-world{position:fixed;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none;filter:blur(1px) saturate(.8)}
#entry::before{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(17,20,31,.57),rgba(19,22,34,.69) 45%,rgba(13,16,25,.92))}
.entry-card{width:min(440px,100%);margin:auto;text-align:center;padding:28px 30px 18px;background:var(--entry-paper);border:1px solid #e7e8ec;border-radius:16px;box-shadow:0 16px 60px #0b102333}
#entry-title{font-size:24px;font-weight:700;letter-spacing:0;line-height:1.3;margin:0 0 8px;color:var(--entry-ink);text-align:left}
.character-preview{height:264px;position:relative;margin:0 auto 24px;width:260px}
#selected-character{display:block;width:220px;height:240px;margin:auto;image-rendering:pixelated;filter:drop-shadow(0 5px 2px #171a3118)}
#selected-name{font-size:16px;font-weight:400;color:var(--entry-ink);line-height:24px}
.selected-in{animation:select-in .18s ease-out}
@keyframes select-in{from{opacity:.65;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
#choices{display:flex;justify-content:center;gap:12px;border:0;margin:0 auto 24px;padding:0}
.choice{position:relative;display:block;width:76px;height:86px;border:2px solid transparent;border-radius:14px;background:var(--entry-neutral);cursor:pointer;transition:border-color .12s,background .12s,transform .12s}
.choice:hover{background:#e7e9ee;transform:translateY(-2px)}
.choice:has(input:checked){border-color:var(--entry-accent-edge);background:var(--entry-accent-soft);box-shadow:none}
.choice:has(input:focus-visible){outline:3px solid var(--entry-ink);outline-offset:3px}
.choice input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.choice canvas{display:block;width:60px;height:70px;margin:4px auto;image-rendering:pixelated;pointer-events:none}
.entry-actions{display:flex;gap:10px;width:100%;max-width:370px;margin:auto}
#nickname{min-width:0;flex:1;border:1px solid var(--entry-line);background:#fff;border-radius:8px;color:var(--entry-ink);padding:12px 14px;font:inherit;outline:none;box-shadow:none}
#nickname::placeholder{color:#73798a}#nickname:focus{border-color:var(--entry-accent-edge)}
#join-button{min-width:96px;background:var(--entry-lemon);color:var(--entry-ink);border:0;border-radius:8px;padding:11px 18px;font:700 17px RoundedSmile,system-ui;cursor:pointer}
#join-button:hover{background:#ffdd7d}#join-button:active{background:#f5d06c}#join-button:focus-visible{outline:3px solid var(--entry-ink);outline-offset:3px}#join-button:disabled{opacity:.6;cursor:wait}
#entry-error{color:#ae3e4f;min-height:24px;margin:12px 0 0;font-size:13px}
@media(prefers-reduced-motion:reduce){.choice{transition:none}.selected-in{animation:none}}
#connection-error{position:fixed;inset:0;display:grid;place-items:center;background:#171720d9;z-index:20;text-align:center}#connection-error>div{padding:30px;border-radius:14px;background:#302c3a}#reconnect{font:inherit;padding:10px 25px;background:#e9c998;color:#2e2831;border:0;border-radius:9px;cursor:pointer}@media(max-width:520px){#entry{padding:20px 16px}.entry-card{padding:24px 20px 14px}#choices{gap:10px}.choice{width:68px;height:82px}.choice canvas{width:57px;height:67px}.character-preview{margin-bottom:18px}}@media(max-height:640px){#entry{padding:16px}#entry-title{font-size:22px;margin-bottom:0}.character-preview{height:204px;margin-bottom:12px}#selected-character{width:170px;height:185px}#selected-name{font-size:15px;line-height:19px}#choices{margin-bottom:18px}#entry-error{margin-top:6px}}

/* Shared two-step entry; no extra onboarding copy. */
.entry-heading{display:flex;align-items:center;gap:6px;margin-bottom:8px;min-height:34px}
.entry-heading #entry-title{margin:0;outline:none}
#entry-back{display:grid;place-items:center;flex:none;width:34px;height:34px;margin-left:-8px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--entry-ink);cursor:pointer}
#entry-back:hover{background:var(--entry-neutral)}
#entry-back:focus-visible{outline:3px solid var(--entry-ink);outline-offset:2px}
#age-form{padding:18px 0 10px}
#age-choices{display:grid;grid-template-columns:1fr;gap:8px;margin:0 0 24px;padding:0;border:0}
.age-choice{position:relative;display:flex;align-items:center;min-height:48px;text-align:left;padding:11px 16px;border:2px solid transparent;border-radius:10px;background:var(--entry-neutral);color:var(--entry-ink);cursor:pointer;font-size:16px}
.age-choice:hover{background:#e7e9ee}
.age-choice:has(input:checked){border-color:var(--entry-accent-edge);background:var(--entry-accent-soft)}
.age-choice:has(input:checked)::after{content:'✓';margin-left:auto;font-weight:700;padding-left:8px}
.age-choice:has(input:focus-visible){outline:3px solid var(--entry-ink);outline-offset:2px}
.age-choice input{position:absolute;inset:0;margin:0;width:100%;height:100%;opacity:0;cursor:pointer}
#age-next{width:100%;min-height:48px;border:0;border-radius:8px;background:var(--entry-lemon);color:var(--entry-ink);font:700 17px RoundedSmile,system-ui;cursor:pointer}
#age-next:hover:enabled{background:#ffdd7d}
#age-next:disabled{background:#eceef1;color:#8a8f9d;cursor:default}
#age-next:focus-visible{outline:3px solid var(--entry-ink);outline-offset:3px}