/* Original arcade/anime direction: violet ink, paper seals and bright response colors. */
:root{--bg:#131427;--panel:#242540;--panel2:#303251;--line:#45486c;--yellow:#ffda70;--green:#8ce4bc;--radius:20px}
body{background:radial-gradient(ellipse at 4% 0%,#6c55da38,transparent 45%),radial-gradient(ellipse at 95% 70%,#734d9f22,transparent 45%),var(--bg);min-height:100vh}
body:before{content:'';position:fixed;inset:0;pointer-events:none;z-index:-1;background:repeating-linear-gradient(132deg,transparent 0 145px,#ffffff02 146px 147px,transparent 148px 260px)}
.topbar{max-width:1260px}.shell{width:min(1180px,calc(100% - 48px))}.brand-mark{box-shadow:3px 5px 0 #0004}.button{border:1px solid #ffffff25;box-shadow:0 4px 0 #090b2044;font-weight:800}.button:active:not(:disabled){transform:translateY(3px)}.primary{background:linear-gradient(180deg,#ffe691,var(--yellow));color:#30283e}.accent{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 85%,white),var(--accent))}.panel{box-shadow:0 5px 0 #080b1940,inset 0 1px #ffffff06}.tabs{max-width:840px;margin-bottom:22px}.tabs button{min-height:47px}.heading h1{font-size:34px}.character-card{border-radius:13px}.character-card.selected{box-shadow:0 0 0 1px #b9a4ff40}.character-card input:disabled{cursor:default}.character-grid{max-height:clamp(300px,calc(100vh - 390px),560px)}.play-board{border-width:2px}.answer{min-height:88px;font-size:27px}.answer small{font-size:12px}.incoming-character h3{font-size:27px}.incoming-character .portrait-wrap{width:85px;height:105px}.room-bar{margin-top:6px}.room-bar strong{font-size:14px}.room-bar small{font-size:11px}.version{white-space:nowrap}
body[data-scene=home] #roomBar,body[data-scene=home] #menuButton,body[data-scene=home] #openRoom,body[data-scene=home] #libraryButton{display:none}body[data-scene=home] .page-footer{max-width:1030px;margin:36px auto 22px}body[data-scene=home] #lastAnswer{display:none}
.home-screen{padding:8px 0 24px}.home-title{text-align:center;margin:0 auto 27px;position:relative}.home-title>.eyebrow{margin-bottom:12px;font-size:10px;letter-spacing:3px}.home-title h1{font-size:clamp(45px,7vw,72px);line-height:1;letter-spacing:-3px;font-weight:950;color:var(--ink);text-shadow:0 6px #090b2055}.home-title h1>span{color:var(--yellow)}.home-title h1>small{display:block;font-size:10px;letter-spacing:8px;color:var(--muted);margin:12px 0 20px;text-shadow:none}.home-title>p:last-child{color:var(--muted);font-size:14px;line-height:1.6}.home-seal{position:absolute;left:calc(50% - 255px);top:14px;width:57px;height:70px;display:grid;place-items:center;background:var(--accent);border:2px solid #d3c6ff;border-radius:6px 6px 20px 6px;color:#302243;font-size:31px;transform:rotate(-13deg);box-shadow:4px 6px 0 #0003}
.home-layout{display:grid;grid-template-columns:1.14fr 1fr;gap:22px;max-width:1030px;margin:auto}.home-play,.home-how{padding:30px;border-width:2px}.home-play{background:linear-gradient(150deg,#6552b52b,transparent 75%),var(--panel);display:flex;flex-direction:column}.home-player{display:flex;align-items:center;gap:25px;margin:4px 0 26px}.home-player>div:last-child{flex:1;min-width:0}.home-player label{font-size:12px;margin:0 0 9px}.home-player input{min-height:48px;font-size:16px;border-width:2px}.home-player small{display:block;font-size:10px;color:var(--muted);margin-top:8px}.player-emblem{width:107px;height:107px;border:3px solid var(--accent);outline:5px solid #b9a4ff15;border-radius:36px;display:grid;place-items:center;color:var(--yellow);font-size:90px;line-height:1;background:radial-gradient(circle,#56517b,var(--input));transform:rotate(-8deg);position:relative;flex:none}.player-emblem>span{position:absolute;color:var(--input);font-size:35px;font-weight:950;transform:rotate(8deg)}.home-actions{display:grid;gap:13px}.home-actions>.button{min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:19px;border:2px solid #ffffff40;border-radius:15px}.home-actions .button>span{width:34px;height:34px;display:grid;place-items:center;background:#24223822;border:1px solid #24223822;border-radius:10px;font-size:24px}.home-actions .button>b{font-size:22px;opacity:.65}.home-actions .quiet{font-size:13px;padding:13px}.home-play>.text-button{font-size:11px;margin-top:auto;padding-top:16px;text-align:center;border-top:1px solid var(--line)}.home-how h2{font-size:27px;line-height:1.25}.home-portraits{display:flex;align-items:center;margin:22px 0 22px;position:relative;padding-left:3px}.home-portraits>.portrait-wrap{width:60px;height:72px;border:2px solid var(--panel);border-radius:12px;margin-right:-8px;box-shadow:0 3px 0 #080b1944;transform:rotate(-5deg)}.home-portraits>.portrait-wrap:nth-child(2){transform:rotate(3deg);z-index:1}.home-portraits>.portrait-wrap:nth-child(3){transform:rotate(-3deg);z-index:2}.portrait-question{display:grid;place-items:center;border-radius:50%;width:49px;height:49px;background:var(--yellow);color:#302243;font-weight:950;font-size:30px;margin-left:24px;transform:rotate(9deg);box-shadow:3px 4px 0 #0003}.home-how ol{list-style:none;margin:0;padding:0;display:grid;gap:18px}.home-how li{display:flex;align-items:center;gap:14px}.home-how li>b{font-size:12px;color:var(--yellow);background:var(--input);border:1px solid var(--line);border-radius:10px;padding:9px}.home-how li>span{font-size:11px;color:var(--muted)}.home-how li strong{display:block;font-size:13px;color:var(--ink);margin-bottom:3px}.home-chips{display:block;margin-top:25px;padding-top:16px;border-top:1px solid var(--line);color:var(--muted);font-size:10px;text-align:center}.home-chips i{font-style:normal;color:var(--accent);margin:0 10px}
.lobby-code{font-size:12px;font-weight:800;letter-spacing:2px;color:var(--yellow);padding:12px 16px;border:1px dashed var(--line);border-radius:11px;white-space:nowrap}.lobby-layout{display:grid;grid-template-columns:1.15fr 1fr;gap:22px}.lobby-people,.lobby-options{padding:26px}.lobby-team{margin:18px 0;padding:17px;background:var(--input);border:1px solid var(--line);border-left-width:4px;border-radius:13px}.lobby-team h3{font-size:10px;text-transform:uppercase;letter-spacing:1.4px;color:var(--muted);margin-bottom:12px}.lobby-team.team-0{border-left-color:var(--green)}.lobby-team.team-1{border-left-color:var(--accent)}.lobby-player{display:flex;align-items:center;gap:11px;padding:10px 0;min-width:0}.lobby-player+.lobby-player{border-top:1px solid var(--line)}.lobby-player strong{font-size:13px;overflow-wrap:anywhere;flex:1}.lobby-player small{font-size:10px;color:var(--green)}.lobby-player.empty-slot{opacity:.55}.lobby-player.empty-slot small{color:var(--muted)}.lobby-avatar{display:grid;place-items:center;width:36px;height:36px;background:var(--panel2);border-radius:10px;color:var(--yellow);font-size:24px;flex:none}.lobby-invites{display:flex;flex-wrap:wrap;gap:11px}.lobby-invites>.button{flex:1}.lobby-next{margin-top:25px;border-top:1px solid var(--line);padding-top:20px}.lobby-next .button{min-height:52px;font-size:15px}.option-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.lobby-options label,.creation-options label{font-size:11px;margin-top:19px}.lobby-options select,.creation-options select{font-size:12px;margin-top:8px}.lobby-options .button{margin-top:15px}.creation-options{border-top:1px solid var(--line);padding-top:2px;margin-bottom:18px}.creation-options .option-grid{gap:10px}.creation-options .check-line{font-size:11px}.mode-picker{margin-bottom:19px}.lobby-options .check-line{align-items:center}.lobby-options .status{min-height:18px}
.creation-options{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}.creation-options>.option-grid,.creation-options>.check-line{grid-column:1/-1}.creation-options>label{min-width:0}.creation-options select{font-size:11px;padding-inline:8px}
.turn-ribbon{display:flex;align-items:center;gap:14px;padding:17px 20px;border:1px solid #a899ed77;border-left:5px solid var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--panel));border-radius:14px;margin:0 0 22px}.turn-ribbon.your-turn{border-color:#84e1b077;border-left-color:var(--green);background:color-mix(in srgb,var(--green) 8%,var(--panel))}.turn-ribbon>span:first-child{font-size:30px;font-weight:900;color:var(--accent)}.turn-ribbon.your-turn>span:first-child{color:var(--green)}.turn-ribbon>div{flex:1}.turn-ribbon strong{display:block;font-size:17px}.turn-ribbon small{display:block;color:var(--muted);font-size:11px;margin-top:4px}#turnCounter{font-size:9px;font-weight:800;letter-spacing:1.5px;color:var(--muted);white-space:nowrap}.last-answer{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--green);padding:10px 14px;font-size:12px;color:var(--green);border-radius:9px;margin-bottom:20px;overflow-wrap:anywhere}.last-answer.is-no{color:var(--red);border-left-color:var(--red)}.result-toast{position:fixed;z-index:30;left:50%;bottom:28px;transform:translateX(-50%);display:flex;align-items:center;gap:18px;width:min(590px,calc(100% - 28px));padding:20px 24px;background:var(--panel);border:2px solid var(--green);border-radius:18px;box-shadow:0 15px 70px #0008,0 0 0 6px #84e1b015;animation:result-pop .22s ease-out}.result-toast.negative{border-color:var(--red);box-shadow:0 15px 70px #0008,0 0 0 6px #f6a3ad15}.result-toast>span{display:grid;place-items:center;border-radius:15px;background:var(--green);color:#142b22;font-size:42px;font-weight:900;width:64px;height:64px;flex:none}.result-toast.negative>span{background:var(--red);color:#451d29}.result-toast>div{flex:1;min-width:0}.result-toast strong{font-size:23px;line-height:1.2;display:block}.result-toast p{font-size:12px;color:var(--muted);margin-top:7px;overflow-wrap:anywhere}.result-toast .icon-button{flex:none;font-size:18px;width:30px;height:30px}.hint{font-size:12px}.online-rule-form>label{font-size:14px}.online-rule-form>.button{width:100%}#sendOnlineGuess{min-height:50px;font-size:14px}
@keyframes result-pop{from{opacity:0;bottom:14px}to{opacity:1;bottom:28px}}
.candidate-badge{position:absolute;left:6px;top:9px;max-width:calc(100% - 40px);padding:4px 5px;border-radius:5px;background:#ffda70ee;color:#332a36;font-size:8px;font-weight:800;line-height:1.2;z-index:2;box-shadow:0 2px 5px #0003}
:root[data-theme=light]{--bg:#edeefa;--panel:#fff;--panel2:#f2effa;--line:#d9dbed;--green:#24734e}:root[data-theme=light] .home-play{background:linear-gradient(150deg,#b6a2ee16,transparent 75%),var(--panel)}:root[data-theme=light] .home-title h1{color:var(--ink);text-shadow:0 3px #d6cbea}:root[data-theme=light] .home-title h1>span{color:#7254bd}:root[data-theme=light] .home-how li>b,:root[data-theme=light] .lobby-code{color:#806019}:root[data-theme=light] .player-emblem{background:#e5dff8;color:#f6c94a}:root[data-theme=light] .player-emblem>span{color:#4a396a}:root[data-theme=light] .last-answer.is-no{color:#a13249}:root[data-theme=light] .result-toast>span{color:#fff}:root[data-theme=light] .result-toast.negative>span{color:#451d29}
@media(min-width:721px){body[data-scene=home] .topbar{padding-bottom:0}}
@media(min-width:761px) and (max-height:820px){.home-title{margin-bottom:20px}.home-title h1{font-size:59px}.home-title h1>small{margin:10px 0 13px}.home-title>p:last-child{font-size:12px}.home-play,.home-how{padding:24px}.home-player{margin:3px 0 22px}.home-actions>.button{min-height:57px}.home-how h2{font-size:24px}.home-portraits{margin:16px 0}.home-portraits>.portrait-wrap{height:62px;width:54px}.home-how ol{gap:13px}.home-chips{margin-top:18px}.home-play>.text-button{padding-top:12px}body[data-scene=home] .page-footer{margin-top:22px}}
@media(max-width:1000px){.home-play,.home-how{padding:24px}.home-player{gap:17px}.player-emblem{width:83px;height:83px;font-size:72px}.player-emblem>span{font-size:28px}.home-actions>.button{font-size:17px}.header-actions .version{display:none}.lobby-people,.lobby-options{padding:21px}}
@media(max-width:760px){.shell{width:calc(100% - 28px)}.home-layout,.lobby-layout{grid-template-columns:1fr}.home-title{margin:20px auto 24px}.home-title h1{font-size:49px;letter-spacing:-2px}.home-title>.eyebrow{font-size:8px;letter-spacing:2px}.home-seal{width:38px;height:48px;font-size:23px;left:calc(50% - 165px);top:20px}.home-title>p:last-child{font-size:12px}.home-play,.home-how{padding:22px}.home-how h2{font-size:24px}.home-portraits{position:absolute;top:20px;right:22px;margin:0;transform:scale(.78);transform-origin:top right}.home-how{position:relative}.home-how ol{margin-top:24px}.home-how>.eyebrow{font-size:9px;max-width:45%}.home-chips{margin-top:22px}.home-how h2{max-width:50%;font-size:23px}.home-title h1>small{font-size:8px;letter-spacing:6px}.heading h1{font-size:27px}.lobby-code{font-size:9px;padding:9px;letter-spacing:1px}.lobby-player small{font-size:9px}.turn-ribbon{padding:13px 14px;gap:10px}.turn-ribbon strong{font-size:14px}.turn-ribbon small{font-size:10px}.turn-ribbon>span:first-child{font-size:25px}.turn-ribbon #turnCounter{display:none}.result-toast{padding:15px;gap:12px;bottom:20px}.result-toast strong{font-size:18px}.result-toast>span{width:49px;height:49px;font-size:34px}.result-toast p{font-size:11px}.tabs button{font-size:10px;padding:9px 6px;min-height:40px}.tabs{gap:3px}.tabs b{font-size:8px;margin-left:3px}.incoming-character h3{font-size:22px}.incoming-character .portrait-wrap{width:67px;height:84px}.answer{font-size:24px;min-height:82px}.room-bar{gap:10px}.room-bar small{font-size:10px}.character-grid{max-height:475px}.page-footer{font-size:9px}.header-actions #menuButton{font-size:10px;padding:5px}.header-actions .quiet:not(#menuButton){display:none}.header-actions{gap:4px}.home-screen{padding-bottom:0}}
@media(max-width:380px){.home-portraits{right:15px;transform:scale(.63)}.home-how h2{font-size:20px}.home-player{gap:14px}.player-emblem{width:68px;height:68px;font-size:60px}.player-emblem>span{font-size:25px}.lobby-code{display:none}.option-grid{gap:9px}.tabs button{font-size:9px;padding-inline:4px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important;transition:none!important}}
.home-seal{left:calc(50% - 300px)}
@media(max-width:760px){.home-seal{left:12px;top:78px;width:28px;height:36px;font-size:20px}.home-portraits{position:static;transform:none;margin:18px 0}.home-how h2,.home-how>.eyebrow{max-width:none}.home-how h2{font-size:25px}}
.room-bar>div{min-width:0}.room-bar strong{overflow-wrap:anywhere}
@media(max-width:900px){.room-bar{flex-wrap:wrap}.room-bar>div{flex:1 1 250px}}
@media(max-width:760px){.home-title h1{font-size:clamp(39px,12vw,49px)}}
/* Menu alignment: equal icon slots keep labels on the exact button center. */
.home-actions>.button{display:grid;grid-template-columns:34px minmax(0,1fr) 34px;align-items:center;text-align:center}
.home-actions .button>.home-action-label{display:block;width:auto;height:auto;min-width:0;background:none;border:0;border-radius:0;font-size:inherit;line-height:1.3}
.home-actions .button>.home-action-icon,.home-actions .button>.home-action-arrow{display:grid;place-items:center;width:34px;height:34px;padding:0;line-height:0}
.home-actions .button>.home-action-arrow{background:none;border:0;opacity:.65}
.home-action-icon svg{display:block;width:22px;height:22px}
.home-action-arrow svg{display:block;width:18px;height:18px}
.player-emblem{transform:none;line-height:0}
.player-emblem>svg{display:block;width:86%;height:86%}
:root[data-theme=light] .player-emblem>svg{--input:#4a396a}
.portrait-question{line-height:1;transform:none}