:root{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,"Noto Sans Mono CJK SC",monospace;color:#edf2ff;background:#080d1c}
*{box-sizing:border-box}
body{margin:0;overflow:hidden}
button{font:inherit;cursor:pointer}
button:focus-visible,input:focus-visible{outline:3px solid #d9c7ff;outline-offset:3px}
::selection{background:#a8bff5;color:#0d152c}
#game-wrap{position:fixed;inset:0;width:100vw;height:100dvh;overflow:hidden}
#game{display:block;width:100%;height:100%}
#language{position:absolute;z-index:4;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));min-width:52px;min-height:42px;padding:6px 10px;border:2px solid #8fa9da;background:#172746;color:#edf2ff;box-shadow:0 5px 16px #0008;font-size:13px;font-weight:800}
#language:hover{background:#294475}
.hidden{display:none!important}
.overlay{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;padding:24px 24px 72px;background:rgba(5,9,23,.94);overflow-y:auto}
.menu-panel,.panel{border:3px solid #738ab9;background:#111a31;box-shadow:0 18px 46px #000a,8px 8px 0 #25365b}
.menu-panel{width:min(1050px,100%);min-height:570px;display:grid;grid-template-columns:minmax(270px,380px) 1fr}
.menu-copy{padding:clamp(28px,4vw,56px);display:flex;flex-direction:column;justify-content:center;border-right:3px solid #34486e;background:repeating-linear-gradient(0deg,#0e1930,#0e1930 23px,#14213d 24px)}
.menu-copy h1{margin:0;font-size:clamp(52px,6vw,86px);line-height:1.08;letter-spacing:-.045em;color:#f4f2ff;text-shadow:4px 4px 0 #3e4d7a}
.menu-copy h1 em{font-style:normal;color:#b6c9ff}
html[lang="en"] .menu-copy h1{font-size:clamp(36px,4vw,52px)}
.menu-copy .edition{color:#cbbdf5;font-size:13px;letter-spacing:.2em;margin:20px 0 35px}
.menu-copy>p:not(.edition){max-width:290px;color:#c4d0e9;font-size:14px;line-height:1.8}
.menu-controls{margin-top:35px}
.dev-option{display:flex;align-items:center;gap:11px;color:#eef2ff;font-size:13px;cursor:pointer}
.dev-option input{width:18px;height:18px;accent-color:#9dc8ff}
.dev-option small{display:block;color:#b8c7e4;font-size:11px;margin-top:3px}
.overlay button:not(.character){border:2px solid #111a31;border-radius:0;background:#9fc8f4;color:#101a32;padding:13px 20px;font-size:14px;font-weight:800;box-shadow:4px 4px 0 #354b79}
.overlay button:not(.character):hover{background:#bfdcff;transform:translate(-2px,-2px);box-shadow:6px 6px 0 #354b79}
.menu-controls>button{width:100%;margin-top:25px;text-align:left}
.roster{padding:clamp(25px,4vw,50px);display:flex;flex-direction:column}
.roster h2{margin:0 0 25px;font-size:22px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.roster h2 span{font-size:12px;color:#aabde3}
.characters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.character{min-width:0;min-height:158px;border:2px solid #425780;border-radius:0;background:#172542;color:#f1f3ff;text-align:left;padding:10px;display:flex;flex-direction:column;gap:5px}
.character.selected{border-color:#c6b8ff;background:#283057;box-shadow:inset 0 0 0 2px #111a31,0 0 0 2px #c6b8ff}
.character.deepseek.selected{border-color:#78c6ff;background:#25455c;box-shadow:inset 0 0 0 2px #111a31,0 0 0 2px #78c6ff}
.character.deepseek .portrait{background:#244961}
.character.claude.selected{border-color:#f5a36c;background:#583827;box-shadow:inset 0 0 0 2px #111a31,0 0 0 2px #f5a36c}
.character.claude .portrait{background:#493027}
.character.grok.selected{border-color:#e67b9c;background:#50273e;box-shadow:inset 0 0 0 2px #111a31,0 0 0 2px #e67b9c}
.character.grok .portrait{background:#38233f}
.character.gemini.selected{border-color:#a996ff;background:#39305c;box-shadow:inset 0 0 0 2px #111a31,0 0 0 2px #a996ff}
.character.gemini .portrait{background:#302a50}
.character.qwen.selected{border-color:#9acbff;background:#2b4567;box-shadow:inset 0 0 0 2px #111a31,0 0 0 2px #9acbff}
.character.qwen .portrait{background:#263d61}
.character.kimi.selected{border-color:#e0b3ff;background:#49365d;box-shadow:inset 0 0 0 2px #111a31,0 0 0 2px #e0b3ff}
.character.kimi .portrait{background:#332b4b}
.character.grok.selected:hover{background:#60304a}
.character.claude.selected:hover{background:#674331}
.character.selected:hover{background:#343e70}
.character.deepseek.selected:hover{background:#315b77}
.character.locked{opacity:.55;cursor:not-allowed;border-style:dashed}
.portrait{height:120px;display:flex;align-items:center;justify-content:center;background:#222d51;overflow:hidden}
.character-art{display:block;max-width:100%;height:116px;object-fit:contain;image-rendering:pixelated}
.portrait canvas{display:block;width:82px;height:96px;image-rendering:pixelated}
.portrait.mystery{color:#7083af;font-size:52px;background:#111d37}
.character strong{font-size:16px}
.character small{color:#b9c7e4;font-size:10px}
.roster-note{margin:auto 0 0;color:#a8b8dc;font-size:11px;padding-top:18px}
.credits-note{margin:8px 0 0;color:#91a5cb;font-size:10px;line-height:1.5}
.credits-note a{color:#b8d7ff;text-decoration:underline}
.panel{width:min(950px,100%);padding:clamp(24px,4vw,42px);text-align:center}
.panel.compact{width:min(540px,100%)}
.panel h1{font-size:clamp(30px,4vw,52px);line-height:1.2;margin:0 0 10px;color:#f0f2ff}
.panel p{color:#c1cce7;line-height:1.7;margin:0 auto 22px}
#choices{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
#choices:has(.choice:nth-child(4)) .choice{width:calc(25% - 11px);min-width:190px}
@media(max-width:760px){#choices:has(.choice:nth-child(4)) .choice{width:100%;min-width:0}}
.overlay .choice{width:calc(33.333% - 10px);min-width:215px;min-height:205px;display:flex;flex-direction:column;gap:10px;padding:17px;text-align:left;background:#1b2a47!important;color:#edf2ff!important;border:2px solid #4e6593!important;box-shadow:none!important;transform:none!important}
.overlay .choice:hover,.overlay .choice:focus-visible{border-color:#b8aaf7!important;background:#293758!important}
.choice-level{color:#b7cafa;font-size:11px;letter-spacing:.08em}
.choice b{font-size:20px;color:#f4f3ff}
.choice-desc{color:#c2cfe9;font-size:12px;line-height:1.5}
.choice,.character{overflow-wrap:anywhere}
.choice strong{margin-top:auto;font-size:12px;color:#d5cafa;line-height:1.5}
.choice-track{display:flex;gap:4px}
.choice-track i{height:7px;flex:1;background:#435678}
.choice-track i.on{background:#b8aaf7}
#hud{position:absolute;z-index:2;inset:16px 20px auto;pointer-events:none;text-shadow:1px 2px #070d1e}
#hud>div:first-child{display:flex;align-items:center;gap:16px;font-size:13px}
#hud b{font-size:17px;color:#dce7ff;margin-right:auto}
#hero-name,#quota{color:var(--character-color,#c6b8ff)}
#fullscreen{pointer-events:auto;background:#172746;border:2px solid #7a9ac9;color:#edf2ff;padding:5px 10px}
#fullscreen:hover{background:#27416e}
.bar{height:9px;border:2px solid #617dab;background:#172440;margin:9px 0}
.bar i{display:block;background:var(--character-color,#c6b8ff);width:0;height:100%}
#hud small{font-size:11px;color:#d0dcf5}
#pause-list{max-height:40vh;overflow-y:auto;text-align:left;margin:0 auto 20px;border-block:2px solid #4a608c}
.pause-skill{display:flex;justify-content:space-between;gap:12px;padding:9px 2px;border-bottom:1px solid #33486f;font-size:12px}
.pause-skill b{color:#c7bcff}
.pause-settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 22px;text-align:left}
.pause-settings .dev-option{padding:12px;border:2px solid #4a608c;background:#1b2a47}
.pause-settings .dev-option:has(input:checked){border-color:#9dc8ff;background:#263b60}
.pause-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.overlay .ghost{background:#1b2a47!important;color:#edf2ff!important;border-color:#839bc4!important}
#score{display:block;color:#b8cfff;font-size:clamp(40px,6vw,70px);margin:10px 0}
#score-rule{font-size:11px}
#touch-controls,#touch-pause,#start-mobile,.touch-help{display:none}
#touch-controls{position:absolute;z-index:2;left:max(16px,env(safe-area-inset-left));bottom:max(20px,env(safe-area-inset-bottom));pointer-events:none}
#joystick{display:grid;place-items:center;width:124px;height:124px;padding:0;border:2px solid #9fb8e5;border-radius:50%;background:rgba(22,38,72,.65);box-shadow:0 8px 24px #0008;pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none}
#stick{display:block;width:54px;height:54px;border:2px solid #c7d9fb;border-radius:50%;background:#7398cc;box-shadow:0 4px 12px #0008;pointer-events:none}
#touch-pause{align-items:center;justify-content:center;pointer-events:auto;background:#172746;border:2px solid #7a9ac9;color:#edf2ff}
@media(pointer:coarse){#touch-controls{display:block}#touch-pause{display:inline-flex}.keyboard-help{display:none}.touch-help{display:inline}.overlay button:not(.character){min-height:44px}.character{touch-action:manipulation}}
@media(max-width:760px){.overlay{align-items:flex-start;padding:13px}.menu-panel{grid-template-columns:1fr;min-height:0}.menu-copy{padding:24px;border-right:0;border-bottom:3px solid #34486e}.menu-copy h1{font-size:48px}.menu-copy .edition{margin:8px 0 14px}.menu-copy>p:not(.edition){margin:0}.menu-controls{margin-top:18px}.menu-controls>button{margin-top:14px}.roster{padding:22px}.characters{grid-template-columns:repeat(2,minmax(0,1fr))}.character{min-height:150px}.portrait{height:94px}.character-art{height:90px}.panel{margin:auto;padding:22px}.overlay .choice{width:100%;min-height:140px}#hud{inset:8px 10px auto}#hud>div:first-child{gap:7px;font-size:10px}#hud b{font-size:12px}#hud small{font-size:9px}}
@media(max-width:480px){.pause-settings{grid-template-columns:1fr}}
@media(max-width:760px){.overlay{padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}.menu-controls>#start{display:none}#start-mobile{display:block;width:100%;margin-top:18px}.roster-note{font-size:12px}.character small{font-size:12px}.panel{padding:18px}#choices{gap:10px}.overlay .choice{min-height:116px;padding:12px;gap:6px}.choice b{font-size:17px}.choice-desc{font-size:13px}#hud{inset:max(8px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) auto max(10px,env(safe-area-inset-left))}#hud>div:first-child{flex-wrap:wrap;gap:6px 8px;font-size:11px}#hud b{display:none}#hud small{font-size:11px}#fullscreen,#touch-pause{min-width:44px;min-height:44px;padding:6px}}
@media(max-height:500px) and (min-width:560px){.overlay{align-items:flex-start;padding:max(12px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}#hud{inset:max(8px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) auto max(12px,env(safe-area-inset-left))}.menu-panel{grid-template-columns:minmax(190px,36%) 1fr;min-height:0}.menu-copy{border-right:3px solid #34486e;border-bottom:0;padding:16px;justify-content:flex-start}.menu-copy h1{font-size:38px}.menu-controls{margin-top:12px}.menu-controls>#start{display:block;margin-top:12px}#start-mobile{display:none}.roster{padding:16px}.characters{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.character{min-height:110px;padding:6px}.portrait{height:68px}.character-art{height:66px}#choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}#choices:has(.choice:nth-child(4)) .choice,.overlay .choice{width:auto;min-width:0;min-height:104px}}
@media(prefers-reduced-motion:no-preference){.menu-panel{animation:appear .35s ease-out both}@keyframes appear{from{opacity:.5;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}}
@media(max-height:500px) and (min-width:560px){html[lang="en"] .menu-copy h1{font-size:28px}}
@media(max-width:760px){.overlay{padding-bottom:max(72px,env(safe-area-inset-bottom))}}