:root{font-family:Inter,"Malgun Gothic",system-ui,sans-serif;color:#e8fbff;background:#071018;color-scheme:dark}*{box-sizing:border-box}body{margin:0;min-height:100vh;display:grid;place-items:center;overflow:hidden}button{font:inherit}.game-shell{position:relative;width:min(100vw,177.7778vh);aspect-ratio:16/9;overflow:hidden;background:#12202a;box-shadow:0 0 90px #000}canvas{display:block;width:100%;height:100%}.hud{position:absolute;inset:0;pointer-events:none}.top-hud{position:absolute;top:2%;left:2%;right:2%;display:flex;align-items:flex-start;gap:1%;filter:drop-shadow(0 2px 4px #000)}.level-panel,.timer-panel,.progress-panel{background:linear-gradient(135deg,#0a1a26ee,#0a121ce0);border:1px solid #3a7685;padding:7px 12px;min-height:49px}.level-panel{width:110px;border-left:3px solid #5be8f2}.level-panel small,.timer-panel small{display:block;color:#8bb4bb;font-size:9px;letter-spacing:.15em;font-weight:700}.level-panel strong,.timer-panel strong{font-size:19px;letter-spacing:.04em}.progress-panel{flex:1;padding:7px 12px}.progress-label{display:flex;justify-content:space-between;color:#9abac2;font-size:9px;letter-spacing:.16em;font-weight:bold;margin-bottom:5px}.timer-panel{min-width:150px;text-align:right;border-right:3px solid #ff657f}.timer-panel strong{color:#ff9bac}.bar{background:#1a3540;overflow:hidden;transform:skewX(-15deg);border:1px solid #4a7781}.bar span{display:block;height:100%;transition:width .15s}.bar.exp{height:13px}.exp span{background:linear-gradient(90deg,#1eb8d3,#70f7f6)}.exp.boss span{background:linear-gradient(90deg,#f63b62,#ff899e)}.bottom-hud{position:absolute;bottom:2.5%;left:2%;right:2%;display:flex;align-items:end;gap:4%}.player-panel{display:flex;align-items:end;filter:drop-shadow(0 2px 4px #000)}.portrait{height:100px;width:88px;flex:none;clip-path:polygon(17% 0,100% 0,100% 85%,86% 100%,0 100%,0 18%);background-image:url('references/battle-concept.png');background-size:950% 495%;background-position:left bottom;border:2px solid #6ce7f1}.health-panel{background:#071620ec;border:1px solid #4b8994;padding:8px 12px 7px;width:210px;margin-left:-1px}.health-heading{display:flex;justify-content:space-between;font-size:14px;letter-spacing:.08em}.health-heading span{font-weight:900;color:#9df3f1}.health-panel small{display:block;color:#81a9aa;font-size:8px;letter-spacing:.15em;margin-top:5px}.bar.hp{height:15px;margin:6px 2px 0}.hp span{background:linear-gradient(90deg,#36daa7,#9fffd5)}.skills{display:flex;gap:9px}.skill{position:relative;width:74px;height:74px;background:linear-gradient(145deg,#0c2e3bf2,#07151feb);border:1px solid #70d9e9;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:inset 0 0 20px #27b9d721,0 3px 8px #0009}.skill .key{position:absolute;top:3px;left:5px;font-weight:900;font-size:10px;color:#a2f8ff}.skill-icon{font-size:25px;line-height:27px;color:#69efff}.skill-name{font-size:10px;font-weight:700;white-space:nowrap}.skill-cool{font-size:10px;color:#ffd787}.skill-cool.ready{color:#a3ffda}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at center,#102833d9,#040a10f2);z-index:3}.overlay.hidden{display:none}.start-card,.modal{width:min(650px,84%);padding:38px 42px;background:linear-gradient(135deg,#102632ef,#07121ded);border:1px solid #326777;box-shadow:0 20px 80px #0009;position:relative}.start-card:before,.modal:before{content:"";position:absolute;top:-1px;left:0;width:110px;height:3px;background:#61f4f4}.eyebrow{display:flex;gap:10px;align-items:center;font-size:10px;letter-spacing:.2em;font-weight:800;color:#68d6dd}.eyebrow span:last-child{margin-left:auto;color:#718e98}.start-card h1{margin:20px 0 0;font-size:clamp(42px,6vw,76px);line-height:.93;letter-spacing:-.055em;font-style:italic}.start-card h1 span{display:block;color:#69eaf0}.subtitle{color:#c3dce0;font-size:16px;margin:20px 0 25px}.instructions{display:flex;border-top:1px solid #284953;border-bottom:1px solid #284953;margin-bottom:24px}.instructions div{flex:1;padding:15px 8px;border-right:1px solid #284953}.instructions div:last-child{border-right:0}.instructions b,.instructions span{display:block}.instructions b{color:#8bf4fa;font-size:13px;letter-spacing:.06em}.instructions span{margin-top:6px;color:#9ab4bb;font-size:12px}.primary{border:0;background:#74edf0;color:#071820;padding:15px 19px;min-width:190px;font-size:15px;font-weight:900;cursor:pointer;text-align:left;transition:background .15s,transform .15s}.primary:hover,.primary:focus-visible{background:#c2ffff;transform:translateY(-2px)}.primary span{float:right}.hint{color:#78949b;font-size:11px;margin:15px 0 0}.corner-mark{position:absolute;right:3%;bottom:4%;font-size:9px;letter-spacing:.18em;color:#60828d}.corner-mark i{display:inline-block;width:5px;height:5px;background:#77ffc4;border-radius:50%;margin:0 5px}.modal h2{font-size:32px;margin:16px 0 5px}.modal>p{color:#9dbbc1;font-size:14px;margin:0 0 24px}.upgrade-options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.upgrade-card{min-height:155px;text-align:left;padding:18px 15px;background:#102b35;border:1px solid #315b68;color:#e8fbff;cursor:pointer;display:flex;flex-direction:column;gap:12px}.upgrade-card:hover,.upgrade-card:focus-visible{border-color:#8cf9fa;background:#16404a;outline:2px solid #5cdae1;outline-offset:1px}.upgrade-card small{color:#58c5cd;letter-spacing:.12em;font-size:9px}.upgrade-card strong{font-size:17px}.upgrade-card span{color:#abc3c9;font-size:13px;line-height:1.5}.stats{display:flex;gap:0;margin:8px 0 26px;border-block:1px solid #2b4e59}.stats div{flex:1;padding:16px 5px}.stats small,.stats strong{display:block}.stats small{color:#7d9fa8;font-size:9px;letter-spacing:.12em}.stats strong{font-size:24px;margin-top:5px}@media(max-width:800px){.level-panel{width:80px}.timer-panel{min-width:110px}.level-panel strong,.timer-panel strong{font-size:14px}.level-panel,.timer-panel,.progress-panel{min-height:38px;padding:5px 8px}.portrait{height:66px;width:59px}.health-panel{width:145px;padding:5px}.health-heading{font-size:10px}.health-panel small{display:none}.bar.hp{height:10px}.skill{width:50px;height:55px}.skill-icon{font-size:18px;line-height:19px}.skill-name,.skill-cool,.skill .key{font-size:8px}.start-card,.modal{padding:20px}.start-card h1{font-size:36px}.subtitle{font-size:13px;margin:10px 0}.instructions div{padding:8px 4px}.instructions b,.instructions span{font-size:10px}.instructions{margin-bottom:12px}.primary{padding:10px}.hint{display:none}.modal h2{font-size:22px}.modal>p{margin-bottom:10px}.upgrade-card{min-height:100px;padding:8px;gap:6px}.upgrade-card strong{font-size:13px}.upgrade-card span{font-size:10px}}

.skill-icon{width:29px;height:29px;object-fit:contain}.skill-icon[hidden]{display:none}.ranking{margin:-10px 0 15px;color:#c1e3e6;font-size:12px}.ranking>strong{color:#74edf0}.ranking p{margin:4px 0;color:#91b2b7;font-size:11px}.ranking ol{margin:5px 0;padding-left:23px;line-height:1.55}.result{max-height:95%;overflow:auto}

.reroll{margin-top:16px;padding:10px 16px;color:#abfaff;background:#102b35;border:1px solid #58c5cd;cursor:pointer;font-weight:700}.reroll:disabled{opacity:.45;cursor:not-allowed}.reroll[hidden]{display:none}

.result-layout{display:flex;align-items:stretch;width:min(940px,92%);max-height:92%;gap:12px}.result-layout .result{flex:1;width:auto;min-width:0;max-height:none;overflow:auto}.result-character{position:relative;flex:0 0 34%;margin:0;border:1px solid #326777;background:#111a28;overflow:hidden}.result-character img{width:100%;height:100%;max-height:590px;object-fit:contain;display:block}.result-character figcaption{position:absolute;bottom:0;left:0;right:0;padding:8px;background:#07121dcc;color:#72dbe3;font-size:9px;letter-spacing:.14em}@media(max-width:800px){.result-layout{width:94%;max-height:96%;gap:6px}.result-character{flex-basis:30%}.result-character figcaption{font-size:7px;padding:3px}.result-layout .result{padding:14px}.result .stats div{padding:6px 3px}.result .stats strong{font-size:16px}.ranking{font-size:10px}.ranking ol{line-height:1.3}.result .primary{padding:8px;min-width:150px}}

.level-flash{position:absolute;inset:0;pointer-events:none;z-index:4;opacity:0;background:radial-gradient(circle,rgba(108,247,255,.13),rgba(108,247,255,0) 70%);box-shadow:inset 0 0 45px rgba(108,247,255,.35)}.level-flash.active{animation:level-flash .45s ease-out forwards}@keyframes level-flash{0%{opacity:0}25%{opacity:1}100%{opacity:0}}@media(prefers-reduced-motion:reduce){.level-flash.active{animation:none;opacity:0}}

/* Start menus and mission report */
.start-actions{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap}.secondary{border:1px solid #477781;background:#102632;color:#d9f7fa;padding:10px 15px;font-weight:700;cursor:pointer}.secondary:hover,.secondary:focus-visible{border-color:#91f5f3;background:#1b3a43;outline:2px solid #6ce7f1;outline-offset:2px}.selected-skin{font-size:12px;color:#91b2b7;margin:10px 0 0}.selected-skin strong{color:#9af4f4}.skin-modal{width:min(480px,85%);max-height:94%;overflow:auto}.skin-modal h2{margin:10px 0}.skin-picker{display:flex;align-items:center;justify-content:center;gap:18px}.skin-arrow{font-size:26px;min-width:48px}.skin-preview{margin:0;text-align:center;height:min(48vh,350px);display:flex;flex-direction:column;align-items:center;gap:4px}.skin-preview figcaption{font-weight:bold;color:#a7f5f5}.art-frame{height:100%;aspect-ratio:2 / 7;position:relative;overflow:hidden;margin:auto}.art-frame img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain}.skin-modal>.primary{display:block;margin:10px auto 0}.start-ranking-list{color:#cef2f2;line-height:1.9;min-height:90px}.result-layout .result{border-left:3px solid #f27682;background:linear-gradient(135deg,#161e2cf5,#0a121dee)}.failure-mark{color:#ff8294;font-size:11px;letter-spacing:.2em;font-weight:900;margin-top:24px}.result #result-title{font-size:clamp(26px,4vw,52px);margin:4px 0;color:#fff}.result-character .art-frame{height:min(78vh,590px);max-width:100%}.result-character img{max-height:none}.result-character figcaption{text-align:center}.result .stats{margin-bottom:20px}@media(max-width:800px){.start-actions{gap:5px}.start-actions .primary{min-width:130px}.secondary{padding:8px}.skin-preview{height:min(42vh,270px)}.result-character .art-frame{height:min(75vh,430px)}.failure-mark{margin-top:8px}.selected-skin{font-size:10px}}

.art-frame{aspect-ratio:2 / 3;max-width:100%}

.skin-unlock{color:#bfe5e7;text-align:center;margin:8px 0;font-size:12px}.skin-actions{display:flex;gap:8px;justify-content:center}.skin-actions .primary{margin:0}.primary:disabled{opacity:.45;cursor:not-allowed;transform:none}.unlock-notice:not(:empty){color:#82f4d6;margin:5px 0;font-weight:bold;font-size:12px}
/* Shared portrait frame and touch controls. */
.art-frame{aspect-ratio:2 / 3;width:auto;max-width:100%;flex:none;background:radial-gradient(ellipse at 50% 65%,#23414b55,transparent 68%)}
.skin-preview{height:auto;min-width:0;flex:1;gap:10px}
.skin-preview .art-frame{height:min(48vh,350px);height:min(48dvh,350px);max-width:100%}
.skin-preview figcaption{min-height:24px;font-size:14px;line-height:1.4}
.skin-picker{gap:12px}.skin-arrow{min-width:48px;min-height:48px;padding:8px;flex:none}
.skin-modal{max-height:94dvh}.skin-modal .skin-unlock{margin:10px 0;line-height:1.5}
.skill{color:inherit;padding:4px;pointer-events:auto;cursor:pointer;touch-action:none;user-select:none}
.skill:disabled{opacity:.55;cursor:default}.skill:active:not(:disabled){border-color:white;background:#245866}.skill:focus-visible{outline:2px solid #b5ffff;outline-offset:3px}
#game{touch-action:none}.touch-controls{position:absolute;inset:0;pointer-events:none;z-index:2;display:none}.touch-controls[hidden]{display:none!important}
.move-pad{position:absolute;left:max(24px,env(safe-area-inset-left));bottom:max(24px,env(safe-area-inset-bottom));width:116px;height:116px;border:1px solid #a2eff04d;border-radius:50%;background:#071b2c66;pointer-events:auto;touch-action:none;user-select:none;display:grid;place-items:center}
#move-stick{width:42px;height:42px;border-radius:50%;background:#71d5df55;border:1px solid #a7f4f0aa;pointer-events:none}.move-pad small{position:absolute;bottom:8px;color:#b8dce1;font-size:12px;pointer-events:none}
@media(any-pointer:coarse),(max-width:900px){
 body{height:100dvh;min-height:0;overscroll-behavior:none}.game-shell{width:100vw;height:100dvh;aspect-ratio:auto}
 #game{width:100%;height:100%;object-fit:contain}.touch-controls:not([hidden]){display:block}
 .overlay{padding: max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
 .start-card,.modal{max-height:100%;overflow:auto;padding:18px;width:min(650px,100%)}
 .top-hud{top:max(10px,env(safe-area-inset-top));left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right))}
 .bottom-hud{bottom:max(20px,env(safe-area-inset-bottom));left:max(16px,env(safe-area-inset-left));right:max(20px,env(safe-area-inset-right));justify-content:flex-end}
 .player-panel{position:absolute;left:0;bottom:140px}.portrait{width:50px;height:58px}.health-panel{width:130px}.health-heading{font-size:13px}.health-panel small{display:none}
 .skills{gap:12px}.skill{width:64px;height:72px}.skill .key{display:none}.skill-name,.skill-cool{font-size:12px}.skill-icon{width:27px;height:27px}
 .level-panel{width:64px;padding:6px}.timer-panel{min-width:86px;padding:6px}.level-panel small,.timer-panel small{display:none}.level-panel strong,.timer-panel strong{font-size:16px}.progress-panel{min-width:0}.progress-label{font-size:11px;letter-spacing:0}
 .instructions b,.instructions span{font-size:12px}.primary,.secondary,.reroll{min-height:48px;font-size:15px}.hint{display:block;font-size:12px;line-height:1.5}
 .upgrade-card{min-height:110px}.upgrade-card strong{font-size:16px}.upgrade-card span{font-size:14px;line-height:1.5}
 .result-layout{width:100%;max-height:100%}.result-layout .result{padding:14px}.result-character{flex-basis:35%}.result-character .art-frame{height:min(75dvh,500px)}
 .skin-modal{width:min(480px,100%)}.skin-preview .art-frame{height:min(48dvh,350px)}
}
@media(max-width:600px) and (orientation:portrait){
 .upgrade-options{grid-template-columns:1fr}.upgrade-card{min-height:0;padding:12px;gap:5px}.upgrade-card small{display:none}
 .start-card h1{font-size:48px}.instructions{flex-direction:column}.instructions div{display:flex;justify-content:space-between;border-right:0;gap:12px}.instructions span{margin:0}
 .start-actions{display:grid;grid-template-columns:1fr 1fr}.start-actions .primary{grid-column:1/-1}.start-actions button{min-width:0}
 .player-panel{bottom:150px}.skin-actions{flex-wrap:wrap}.skin-actions .primary{min-width:150px}
 .result-layout{flex-wrap:wrap;align-content:center;overflow:auto}.result-layout .result{flex:1 1 55%;max-height:85dvh}.result-character{flex:0 0 36%;align-self:center}.result-character .art-frame{height:auto;width:100%;aspect-ratio:2/3}.result-character figcaption{font-size:9px}
}
@media(max-height:500px) and (orientation:landscape){
 .start-card{padding:14px 22px}.start-card h1{font-size:30px;margin:8px 0}.start-card h1 span{display:inline;margin-left:8px}.subtitle{margin:8px 0}.instructions{margin-bottom:8px}.instructions div{padding:5px}.hint{margin:6px 0}.corner-mark{display:none}
 .skin-modal{padding:10px 18px}.skin-modal .eyebrow{display:none}.skin-modal h2{font-size:19px;margin:0 0 4px}.skin-preview .art-frame{height:42dvh}.skin-preview{gap:3px}.skin-preview figcaption{font-size:12px;min-height:17px}.skin-modal .skin-unlock{font-size:12px;margin:4px 0}.skin-actions .primary,.skin-actions .secondary{min-height:44px;padding:8px}.skin-picker{gap:18px}
 .player-panel{bottom:120px}.move-pad{width:100px;height:100px;bottom:16px}.skill{width:60px;height:64px}.portrait{height:44px;width:40px}.result .stats{margin:5px 0}.failure-mark{margin-top:3px}.result #result-title{font-size:24px}
}
.skin-preview .art-frame{width:min(100%,233.333px,32dvh);height:auto;aspect-ratio:2/3}
.result-character .art-frame{width:100%;height:auto;aspect-ratio:2/3}
@media(max-height:500px) and (orientation:landscape){.skin-preview .art-frame{width:min(100%,28dvh);height:auto}}

/* Character-first operation result: full silhouette, compact record, no failure panel. */
#result-screen{background:radial-gradient(ellipse at 30% 40%,#22424cf2,#06131af8 70%);overflow:hidden}
.game-shell:has(#result-screen:not(.hidden)) .hud{visibility:hidden}
.result-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);grid-template-rows:minmax(0,1fr);align-items:center;gap:20px;width:min(1100px,100%);height:100%;min-width:0;max-width:100%;max-height:100%;padding:24px;overflow:auto;overscroll-behavior:contain}
.result-layout .result{grid-column:2;grid-row:1;width:100%;min-width:0;max-width:100%;max-height:100%;overflow:auto;padding:18px 6px;background:transparent;border:0;box-shadow:none}
.result-layout .result:before{display:none}.result .eyebrow{flex-wrap:wrap;letter-spacing:.1em;color:#9bbfc5}.result .eyebrow span:last-child{margin-left:0}
.operation-mark{color:#7be9e2;font-size:12px;font-weight:800;letter-spacing:.18em;margin:20px 0 4px}.result #result-title{font-size:clamp(28px,4vw,48px);margin:0 0 10px;color:#e9ffff}
.result .stats{min-width:0;margin:16px 0;border-color:#5ba7b455}.result .stats div{min-width:0;padding:12px 4px}.result .stats strong{font-size:25px}.result .stats small{font-size:10px;letter-spacing:.04em}
.result .primary{min-width:0;width:100%;min-height:48px}.result .ranking{font-size:13px;margin:0 0 16px}.result-records summary{cursor:pointer;min-height:44px;padding:12px 0;color:#8ee8e7;border-bottom:1px solid #355b66}.result-records[open]{padding-bottom:8px}.result-records summary:focus-visible{outline:2px solid #7ff4ee}
.result-character{grid-column:1;grid-row:1;width:100%;height:100%;min-width:0;min-height:0;margin:0;align-self:stretch;overflow:visible;border:0;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center}
.result-character .art-frame{height:calc(100% - 30px);width:auto;max-width:100%;aspect-ratio:2/3;flex:0 1 auto;background:none}
.result-character figcaption{position:static;flex:none;padding:8px 4px;line-height:1.4;font-size:11px;letter-spacing:.18em;color:#a2e4e9;background:none;overflow-wrap:anywhere}
@media(max-width:900px),(any-pointer:coarse){.result-layout{padding:10px;gap:12px}.result-layout .result{padding:10px 2px}.result #result-title{font-size:30px}.result .eyebrow{font-size:9px}.operation-mark{margin:12px 0 3px}.result .stats strong{font-size:21px}.result .stats{margin:12px 0}.result .stats div{padding:8px 3px}.result .ranking{font-size:12px}.result-character{flex:none}.result .modal>p{font-size:13px}}
@media(max-width:600px) and (orientation:portrait){
 .result-layout{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding:0 14px 12px;overflow:auto}
 .result-character{order:0;height:54dvh;min-height:260px;width:100%;flex:none;align-self:center}
 .result-character .art-frame{width:auto;height:calc(100% - 26px);max-width:100%;aspect-ratio:2/3}
 .result-character figcaption{font-size:10px;padding:5px}
 .result-layout .result{order:1;flex:none;width:100%;max-height:none;overflow:visible;padding:4px 0}
 .result .eyebrow{display:none}.operation-mark{margin:0;font-size:10px}.result #result-title{font-size:27px;margin:0 0 5px}.result #result-message{margin:0 0 6px;font-size:12px}.result .stats{margin:5px 0}.result .stats div{padding:6px 3px}.result .stats strong{font-size:22px}.result .ranking{margin-bottom:8px}.result-records summary{min-height:40px;padding:10px 0}
}
@media(max-height:500px) and (orientation:landscape){.result-layout{padding:6px 14px;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}.result-layout .result{padding:4px}.result .eyebrow{display:none}.operation-mark{margin:0;font-size:10px}.result #result-title{font-size:28px;margin-bottom:4px}.result #result-message{font-size:12px;margin-bottom:8px}.result .stats{margin:6px 0}.result-records summary{min-height:40px;padding:9px 0}.result .ranking{margin-bottom:8px}}