:root{font-family:system-ui,'Malgun Gothic',sans-serif;color:#edf2e8;background:#101e1b;color-scheme:dark}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 0,#2c4034,#101e1b 65%)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{cursor:default}button:focus-visible,a:focus-visible{outline:2px solid #d7e6aa;outline-offset:3px}[hidden]{display:none!important}main{--field-width:min(420px,calc(100vw - 24px),calc((100dvh - 161px - env(safe-area-inset-top) - env(safe-area-inset-bottom))*420/740));width:var(--field-width);margin:auto;padding-top:max(10px,env(safe-area-inset-top));padding-bottom:env(safe-area-inset-bottom)}.game-header{display:flex;align-items:center;justify-content:space-between;min-height:44px;gap:8px}.home{display:flex;align-items:center;gap:8px;min-height:44px;color:#dde7d4;text-decoration:none}.home>span{font-size:22px}.home img{width:clamp(58px,16vw,90px);height:24px;object-fit:contain;filter:brightness(0) invert(.9)}.tools{display:flex;gap:4px}.icon-button{display:grid;place-items:center;width:44px;height:44px;border:1px solid #7f997344;border-radius:12px;background:#20332a;color:#e9f1df;font-weight:700;font-size:21px}.icon-button:disabled{opacity:.35}.icon-button:hover:not(:disabled){background:#314b38}.title-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 1px 12px}.title-row h1{margin:0;font-size:18px;letter-spacing:-.04em}.title-row>span{font-size:11px;color:#aabbab}.game{position:relative;aspect-ratio:420/740;width:100%;border:1px solid #72806b66;border-radius:14px;overflow:hidden;background:#172520;box-shadow:0 12px 45px #0005;touch-action:none}canvas{width:100%;height:100%;display:block}.overlay{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(#0816129c,#081612d9);z-index:3}.overlay.hidden{display:none}.panel{width:88%;padding:27px 20px 20px;text-align:center;background:#182b24ed;border:1px solid #889e6b77;border-radius:18px;box-shadow:0 14px 40px #0006}.eyebrow{font-size:10px;letter-spacing:.09em;color:#b8d494;font-weight:750}.panel h2{margin:13px 0 12px;font-size:32px;letter-spacing:-.05em;line-height:1.2}.panel>p{color:#c1cebd;font-size:13px;line-height:1.8;margin:10px 0 18px}.start-guide{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:20px 0;font-size:10px;color:#bfcdb4}.start-guide>*{padding:5px 8px;border:1px solid #6b846255;border-radius:6px;font-weight:500}.primary{width:100%;min-height:48px;padding:12px 16px;background:#d2e39f;border:1px solid #e4edbb;border-radius:11px;color:#1a2c1f;font-size:15px;font-weight:800}.primary:hover:not(:disabled){background:#e2edb9}.primary:disabled{opacity:.6}.secondary{display:block;min-height:44px;width:100%;border:1px solid #66825866;border-radius:10px;margin-top:10px;background:transparent;color:#c5d4b9;font-size:12px}.panel .status{min-height:16px;margin:12px 0 0;font-size:10px;color:#a9baa1}.skill{position:absolute;right:12px;bottom:14px;min-width:84px;min-height:84px;padding:12px 8px;background:#142a24ed;color:#e5efdc;border:1px solid #bfd79e88;border-radius:18px;font-size:11px;font-weight:700;touch-action:manipulation}.skill span{display:block}.skill #charge{font-size:23px;color:#d9e9ac;margin:2px 0}.skill small{font-size:9px;color:#b7c8ab}.skill.ready{background:#d2e39f;color:#14281a;border-color:#edf7cf;box-shadow:0 0 20px #c8df8b44}.skill.ready #charge{color:#203823}.skill.ready small{color:#3e5636}.skill:disabled{opacity:.68}.control-hint{text-align:center;color:#9bb099;font-size:10px;line-height:1.7;margin:12px 0 0;min-height:21px}kbd{font:inherit;color:#ccdac1}.touch-hint{display:none}dialog{width:min(420px,calc(100vw - 28px));max-height:calc(100dvh - 36px);overflow:auto;border:1px solid #8b9e6c88;border-radius:20px;background:#1b2e26;color:#e8efdf;padding:22px;box-shadow:0 20px 80px #0008}dialog::backdrop{background:#06110edb}.help-top{display:flex;align-items:center;justify-content:space-between}dialog h2{font-size:23px;letter-spacing:-.04em;margin:8px 0 22px}dialog ol{padding-left:22px}dialog li{padding:0 0 12px 4px;color:#cce1ad;font-size:14px}dialog li p,.help-note{font-size:12px;line-height:1.8;color:#c0ceba;margin:7px 0}.help-note{border-top:1px solid #66825855;padding-top:14px;margin:8px 0 20px}@media(pointer:coarse){.touch-hint{display:inline}.pc-hint{display:none}}@media(max-width:420px){main{--field-width:min(calc(100vw - 16px),calc((100dvh - 153px - env(safe-area-inset-top) - env(safe-area-inset-bottom))*420/740))}.game{border-radius:10px}.title-row>span{display:none}.panel{padding:22px 15px 16px}.panel h2{font-size:28px}.skill{min-width:76px;min-height:78px;right:9px;bottom:10px}.control-hint{font-size:9px}}@media(max-height:620px){main{--field-width:min(420px,calc(100vw - 16px),calc((100dvh - 126px)*420/740))}.title-row{padding:4px 0 7px}.title-row h1{font-size:14px}.title-row>span,.control-hint{display:none}.panel{padding:14px 12px}.panel h2{font-size:22px}.panel>p{font-size:11px}.start-guide{margin:12px 0}.home img{width:70px}.icon-button{width:40px;height:40px}.skill{min-width:65px;min-height:65px;padding:8px 6px}#skill-name{font-size:9px}}

.language-control select{font:inherit;font-size:11px;min-height:32px;max-width:105px;padding:4px 9px;border-radius:8px;background:#20332a;color:#e7efdf;border:1px solid #7f997355}.panel #description{white-space:pre-line}html[lang=en] .panel h2{font-size:26px}html[lang=en] .start-guide{gap:4px}html[lang=en] .start-guide>*{font-size:9px;padding:5px}html[lang=en] #skill-name{max-width:100px;font-size:10px}

@media(max-width:420px){html[lang=en] .title-row h1{font-size:14px}.language-control select{max-width:90px}}

/* Native fullscreen and the same viewport layout when fullscreen APIs are unavailable. */
html.immersive,html.immersive body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none;background:#0c1815}
html.immersive main{--field-width:min(calc(100dvw - env(safe-area-inset-left) - env(safe-area-inset-right)),calc((100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom))*420/740));position:fixed;inset:0;width:100%;height:100dvh;margin:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);display:grid;place-items:center}
html.immersive .game{width:var(--field-width);border:0;border-radius:0;box-shadow:none}
html.immersive .title-row,html.immersive .control-hint,html.immersive .home{display:none}
html.immersive .game-header{position:absolute;z-index:5;left:50%;top:calc(env(safe-area-inset-top) + (100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - var(--field-width)*740/420)/2 + 8px);transform:translateX(-50%);width:var(--field-width);padding:0 max(8px,env(safe-area-inset-right));justify-content:flex-end;pointer-events:none}
html.immersive .tools{pointer-events:auto}html.immersive .tools #help,html.immersive .tools #mute{display:none}
html.immersive main:has(.overlay:not(.hidden)) .tools #help,html.immersive main:has(.overlay:not(.hidden)) .tools #mute{display:grid}
html.immersive .tools .icon-button{width:44px;height:44px;background:#14261fe8}
html.immersive .skill{bottom:max(14px,env(safe-area-inset-bottom));right:max(12px,env(safe-area-inset-right))}
.rotate-overlay{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:22px;background:#0c1c17f5;text-align:center}.rotate-overlay>div{width:min(340px,100%);max-height:100%;overflow:auto;padding:18px}.rotate-icon{font-size:55px;color:#cddd9d}.rotate-overlay h2{font-size:24px}.rotate-overlay p{font-size:13px;line-height:1.8;color:#beccba}.rotate-overlay .primary{margin:15px 0}.rotate-overlay a{display:block;min-height:44px;padding:12px;color:#cadab8;font-size:13px}.rotate-overlay div:focus{outline:none}
@media(max-width:420px){.game-header{gap:4px}.game-header .home{gap:4px}.game-header .home img{width:58px}.game-header .tools{gap:2px}.game-header .tools .icon-button{width:40px;height:44px}html.immersive .game-header .icon-button{width:44px}}

/* The status strip owns its space; no HUD is painted over the enemy lanes. */
.game{display:grid;grid-template-rows:55px minmax(0,1fr)}canvas{min-height:0;grid-row:2}.battle-hud{grid-row:1;background:#132820;position:relative;padding:7px 10px;z-index:1;overflow:hidden}.hud-stats{display:flex;gap:14px;align-items:center;white-space:nowrap;font-size:12px;font-weight:600;line-height:20px}.hud-stats b{color:#dcdf9d}.hud-detail{display:flex;justify-content:space-between;gap:8px;font-size:10px;line-height:16px;color:#a9bca2}.hud-meter{position:absolute;bottom:0;left:0;width:100%;height:3px;background:#2e4435}.hud-meter i{display:block;height:100%;background:#bfd67c}.hud-meter i.boss{background:#ed9770}.overlay{top:55px}.panel{max-height:calc(100% - 18px);overflow:auto}
html.immersive main{--field-width:min(calc(100dvw - env(safe-area-inset-left) - env(safe-area-inset-right)),calc((100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom))*.9))}
html.immersive .game{height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));aspect-ratio:auto}
html.immersive .game-header{top:calc(env(safe-area-inset-top) + 5px)}html.immersive .battle-hud{padding-right:108px}html.immersive .hud-stats{gap:10px;font-size:12px}html.immersive .hud-detail{font-size:10px}
@media(max-width:420px){.hud-stats{font-size:11px;gap:10px}html.immersive .hud-stats{font-size:11px;gap:9px}.hud-detail{font-size:9px}html.immersive .hud-detail{font-size:9px}}

/* Split status corners, with a clear center and controls above the battlefield. */
.game{grid-template-rows:60px minmax(0,1fr)}.overlay{top:60px}.battle-hud,html.immersive .battle-hud{padding:6px 10px 4px;display:flex;justify-content:space-between;gap:100px}.hud-left,.hud-right{display:flex;flex-direction:column;gap:1px;max-width:calc((100% - 92px)/2);min-width:0;line-height:15px;font-size:11px}.hud-left b,.hud-right b{font-size:12px;color:#e7edb9}.hud-left small,.hud-right small{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#a9bca2}.hud-right{text-align:right}.hud-left>*,.hud-right>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.immersive .game-header{justify-content:center}html.immersive .game-header .tools{justify-content:center}
html.immersive main:has(.overlay:not(.hidden)) .battle-hud{visibility:hidden}
@media(max-width:420px){.battle-hud,html.immersive .battle-hud{padding:6px 7px 4px;gap:94px}.hud-left b,.hud-right b{font-size:11px}.hud-left,.hud-right{font-size:10px}}

.panel{max-width:400px}@media(min-width:600px){.hud-left,.hud-right{font-size:13px;line-height:16px}.hud-left b,.hud-right b{font-size:14px}.hud-left small,.hud-right small{font-size:10px}}

/* Persistent catalog exit shares the HUD's reserved control space. */
.game-header{justify-content:center}
.game-list{flex-shrink:0;display:flex;flex-direction:column;justify-content:center;gap:2px;text-decoration:none;font-size:9px;line-height:12px}
.game-list svg{display:block}
html.immersive .battle-hud{gap:148px}
html.immersive .hud-left,html.immersive .hud-right{max-width:calc((100% - 148px)/2)}
.back-to-games{display:grid;place-items:center;text-decoration:none}
@media(max-width:420px){html.immersive .battle-hud{gap:146px}html.immersive .hud-left,html.immersive .hud-right{max-width:calc((100% - 146px)/2)}}