/* A battle has four separate regions. Targets never sit behind the command board. */
#app.combat-layout{--combat-hud:80px;--combat-target:92px;--combat-footer:48px;--combat-gap:10px;--combat-edge:14px;display:grid;grid-template-rows:var(--combat-hud) var(--combat-target) minmax(0,1fr) var(--combat-footer);gap:var(--combat-gap);padding:var(--combat-edge);height:100dvh;min-height:0;isolation:isolate}
#app.combat-layout #top-hud{grid-row:1;position:relative;inset:auto;height:100%;width:100%;min-width:0;padding:10px 18px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;animation:none;border-radius:9px;box-shadow:0 4px 18px #0002}
#app.combat-layout #metric-card{width:100%;max-width:780px;min-width:0;height:100%;margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center}
#app.combat-layout #metric-card .metric-cell{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;min-width:0;height:100%;padding:0 12px;letter-spacing:0}
.combat-metric-heading{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:12px;line-height:20px;white-space:nowrap;color:#c5d8c9}
#metric-card .combat-metric-heading .game-icon{width:20px;height:20px}
#app.combat-layout #metric-card .metric-val{font-size:32px;line-height:1.05;margin:0;white-space:nowrap;max-width:100%;font-variant-numeric:tabular-nums}
#app.combat-layout #hud-actions{position:static;inset:auto;display:flex;align-items:center;justify-content:flex-end;gap:10px;height:auto}
#app.combat-layout #challenge-clock{min-width:118px;padding:5px 10px;gap:8px;align-items:center}
#app.combat-layout #challenge-clock strong{font-size:26px;line-height:1.1}#app.combat-layout #challenge-clock span{font-size:10px;line-height:1.4;letter-spacing:1px}
#app.combat-layout :is(#btn-pause,#script-battle-help){font-size:13px;min-height:40px;padding:8px 12px;align-self:center}
#battle-target-zone{grid-row:2;position:relative;z-index:20;display:flex;align-items:center;justify-content:center;gap:18px;min-width:0;height:100%;padding:0 12px}
#app.combat-layout #prompt-board,#app.combat-layout #prompt-board.compact{position:relative;inset:auto;transform:none;width:fit-content;max-width:100%;min-width:0;padding:4px 18px;border:0;background:none;box-shadow:none;backdrop-filter:none;text-align:center;flex:0 1 auto}
#battle-stage-hint{font-size:13px;color:#d7e5cd;line-height:1.4;letter-spacing:1px;margin-bottom:5px}
#app.combat-layout #prompt-main,#app.combat-layout #prompt-board.compact #prompt-main{font-size:clamp(30px,3.2vw,44px);line-height:1.2;letter-spacing:.13em;margin:0;overflow-wrap:anywhere}
#battle-target-zone:is([data-stage="1"],[data-stage="3"]) #prompt-main{font-size:clamp(18px,1.8vw,26px)!important;line-height:1.4!important;letter-spacing:.23em!important;color:#b7cfbd}
#battle-target-zone:is([data-stage="4"],[data-stage="5"]) #prompt-main{display:none}
#app.combat-layout #word-progress{font-size:clamp(28px,3.2vw,42px);line-height:1.2;margin:0;letter-spacing:.13em;overflow-wrap:anywhere;max-width:100%}
#app.combat-layout #word-progress .phonetic-hint{font-size:15px;letter-spacing:2px}
#battle-target-zone #stage2-qte-panel{position:relative;inset:auto;transform:none;min-width:88px;width:auto;padding:6px 10px;flex-shrink:0;box-shadow:none}
#battle-target-zone #stage2-qte-panel.show{display:block}
#battle-target-zone #boss-qte-panel{position:absolute;inset:0;left:50%;transform:translateX(-50%);min-width:0;width:min(420px,100%);height:100%;padding:8px 18px;background:#123b32;border-color:#a8d6b580;box-shadow:none}
#app.combat-layout:has(#boss-qte-panel.show) #prompt-board{visibility:hidden}
#battle-target-zone #boss-qte-key{font-size:34px;height:44px;min-width:44px}#battle-target-zone #boss-qte-countdown{top:18px;right:18px}
#app.combat-layout #arena{grid-row:3;position:relative;inset:auto!important;width:100%;height:100%;min-height:0;border-radius:9px;overflow:hidden}
#app.combat-layout :is(#hero-wrap,#enemy-wrap){width:clamp(170px,30vh,300px);height:clamp(170px,30vh,300px);bottom:54px}
#app.combat-layout #hero-wrap{left:6%}#app.combat-layout #enemy-wrap{right:6%}
#app.combat-layout .enemy-script-name{font-size:13px;bottom:-30px;line-height:20px}
#app.combat-layout .enemy-script-intent{font-size:12px;line-height:18px;top:-18px}
#app.combat-layout .health-strip{height:4px;bottom:-8px}
#app.combat-layout #ultimate-ready{font-size:12px;top:-35px}
#battle-feedback{grid-row:4;position:relative;display:flex;justify-content:center;align-items:center;gap:12px;min-width:0;padding:0 155px;border:1px solid #aec9ae29;border-radius:7px;background:#08251ecc;z-index:20}
#app.combat-layout #input-feedback{position:static;inset:auto;transform:none;white-space:normal;text-align:center;font-size:14px;line-height:1.4;padding:0;margin:0;letter-spacing:.5px;background:none;color:#cbddca;max-width:100%}
#battle-feedback[data-feedback=retry] #input-feedback{color:#ffd6b8}#battle-feedback:is([data-feedback=correct],[data-feedback=charge],[data-feedback=strike]) #input-feedback{color:#cbf5ca}
.combat-charge{display:inline-flex;gap:5px;flex-shrink:0}.combat-charge i{width:8px;height:8px;border-radius:50%;background:#476354;border:1px solid #c2dd9a55}.combat-charge i.filled{background:#e4cf8d;border-color:#ffe2a0;box-shadow:0 0 6px #e6cf8d55}
@media(min-width:1000px) and (min-height:600px){
 body[data-view=legacy] #screen{align-items:center;justify-content:center}
 body[data-view=legacy] .legacy-wrap{flex:0 1 auto;width:100%;max-width:1680px;aspect-ratio:16/10;height:auto;max-height:100%;margin:auto}
 body[data-view=legacy] .legacy-back{font-size:13px;min-height:38px;padding:7px 12px;left:28px;bottom:18px}
}
@media(max-height:650px) and (min-width:701px){
 #app.combat-layout{--combat-hud:64px;--combat-target:64px;--combat-footer:40px;--combat-gap:7px;--combat-edge:10px}
 #app.combat-layout #top-hud{padding:5px 12px;gap:12px}.combat-metric-heading{font-size:11px;line-height:18px}#metric-card .combat-metric-heading .game-icon{width:17px;height:17px}
 #app.combat-layout #metric-card .metric-val{font-size:27px}
 #app.combat-layout :is(#hero-wrap,#enemy-wrap){width:clamp(140px,30vh,185px);height:clamp(140px,30vh,185px);bottom:44px}
 #app.combat-layout #challenge-clock strong{font-size:23px}#app.combat-layout #challenge-clock{min-width:110px;padding:3px 8px}
 #app.combat-layout #prompt-main,#app.combat-layout #prompt-board.compact #prompt-main,#app.combat-layout #word-progress{font-size:32px}
 #battle-stage-hint{font-size:12px;margin-bottom:2px}#app.combat-layout #input-feedback{font-size:13px}
}
@media(max-width:900px){#app.combat-layout #top-hud{gap:10px;padding-inline:10px}#app.combat-layout #metric-card .metric-cell{padding:0 6px}#app.combat-layout #challenge-clock{min-width:100px}#app.combat-layout #hud-actions{gap:6px}}
@media(max-width:700px){
 #app.combat-layout{--combat-hud:116px;--combat-target:86px;--combat-footer:60px;--combat-gap:7px;--combat-edge:8px}
 #app.combat-layout #top-hud{grid-template-columns:1fr;grid-template-rows:55px 40px;padding:7px 8px;gap:4px}
 #app.combat-layout #metric-card{max-width:none;margin:0;height:55px}
 #app.combat-layout #metric-card .metric-cell{gap:1px}#app.combat-layout #metric-card .metric-val{font-size:27px}
 .combat-metric-heading{font-size:11px;line-height:17px}#metric-card .combat-metric-heading .game-icon{width:17px;height:17px}
 #app.combat-layout #hud-actions{height:40px;justify-content:center;gap:8px}
 #app.combat-layout #challenge-clock{padding:2px 8px;gap:6px;min-width:110px}#app.combat-layout #challenge-clock>div{display:block}#app.combat-layout #challenge-clock strong{font-size:21px}#app.combat-layout #challenge-clock>.game-icon{width:20px;height:20px}
 #app.combat-layout :is(#btn-pause,#script-battle-help){font-size:12px;min-height:36px;padding:6px 10px}
 #battle-target-zone{gap:8px;padding:0 2px}#battle-stage-hint{font-size:12px;letter-spacing:0}
 #app.combat-layout #prompt-board{padding:2px 4px}#app.combat-layout #prompt-main,#app.combat-layout #prompt-board.compact #prompt-main,#app.combat-layout #word-progress{font-size:30px;letter-spacing:.07em}
 #battle-target-zone:has(#stage2-qte-panel.show) #prompt-board{max-width:calc(100% - 92px)}
 #app.combat-layout :is(#hero-wrap,#enemy-wrap){width:clamp(120px,32vw,175px);height:clamp(120px,32vw,175px);bottom:47px}
 #app.combat-layout #hero-wrap{left:1%}#app.combat-layout #enemy-wrap{right:1%}
 #app.combat-layout .enemy-script-name{font-size:11px;bottom:-27px}
 #battle-feedback{padding:5px 10px 5px 122px;flex-direction:column;gap:4px;justify-content:center}
 #app.combat-layout #input-feedback{font-size:12px;line-height:1.4}
 body[data-view=legacy] .legacy-back{font-size:12px;min-height:38px;padding:7px 10px;left:16px;bottom:18px}
}
/* The story HUD uses the same compact, measurable metric rows. */
#screen .story-hud{min-height:72px;height:auto!important;padding:8px 14px;grid-template-columns:minmax(0,1fr) auto;align-items:center}
#screen .story-hud .metrics{width:100%;max-width:820px;min-width:0;margin:auto;align-items:center}
#screen .story-hud .metric{display:grid;grid-template-rows:20px 32px;gap:3px;line-height:1.2;min-width:0;font-size:12px}
#screen .story-hud .metric-label{font-size:12px;line-height:20px}
#screen .story-hud .metric-label .game-icon{width:20px;height:20px}
#screen .story-hud .metric b{font-size:30px;line-height:32px;margin:0}
#screen .story-hud [data-action=pause]{min-height:40px;padding:7px 10px}
.portrait-art[data-art-src*="assets/v3/q3/"]{max-height:430px!important}
@media(max-height:650px) and (min-width:701px){#app.combat-layout :is(#hero-wrap,#enemy-wrap){width:clamp(100px,calc((100dvh - 230px)*.75),185px);height:clamp(100px,calc((100dvh - 230px)*.75),185px)}}
@media(max-width:700px) and (max-height:600px){#app.combat-layout :is(#hero-wrap,#enemy-wrap){width:clamp(104px,25vh,150px);height:clamp(104px,25vh,150px)}}
@media(max-width:700px) and (max-height:500px){body[data-view=legacy] .legacy-wrap,body[data-view=legacy] .legacy-wrap iframe{min-height:500px}}
@media(max-width:700px){#screen .story-hud{gap:6px;padding:7px 8px}#screen .story-hud .metric-label{font-size:11px;gap:4px}#screen .story-hud .metric b{font-size:26px}#screen .story-hud .metric-label .game-icon{width:17px;height:17px}}
#battle-target-zone{border:1px solid #b6cda333;border-radius:8px;background:linear-gradient(100deg,#0a2824eb,#10382ee6,#0a2824eb)}
#app.combat-layout #arena:focus{outline:1px solid #c5d9a34d;outline-offset:1px}
.sprite-art{transform-origin:50% 94%}
#battle-target-zone :is(#boss-qte-panel,#stage2-qte-panel).show{animation:combat-cue-in .16s ease both}
@keyframes combat-cue-in{from{opacity:.5}to{opacity:1}}
#battle-stage-hint{font-size:16px}
@media(max-height:650px) and (min-width:701px){#battle-stage-hint{font-size:13px;line-height:1.25}#app.combat-layout #word-progress{font-size:30px}}
@media(max-width:700px){#battle-stage-hint,#app.combat-layout #input-feedback{font-size:14px}}
/* Give wrapped phonetic targets their actual height, rather than clipping them. */
#app.combat-layout{grid-template-rows:var(--combat-hud) minmax(var(--combat-target),auto) minmax(0,1fr) var(--combat-footer)}
#battle-target-zone{height:auto;min-height:var(--combat-target);align-self:stretch}
#app.combat-layout #word-progress br{display:none}
#app.combat-layout #word-progress:has(.phonetic-hint){font-size:32px;line-height:1.1}
#app.combat-layout #word-progress .phonetic-hint{display:block;font-size:13px;line-height:16px;margin-top:3px;letter-spacing:1px;color:#c6d5be}
@supports(width:1cqh){
 #app.combat-layout #arena{container-type:size}
 #app.combat-layout :is(#hero-wrap,#enemy-wrap){width:clamp(80px,min(28vh,calc(100cqh - 86px),38cqw),300px);height:clamp(80px,min(28vh,calc(100cqh - 86px),38cqw),300px)}
}
@media(max-height:650px) and (min-width:701px){#battle-target-zone:has(.phonetic-hint) #battle-stage-hint{display:none}}
@media(max-width:700px){#app.combat-layout #word-progress:has(.phonetic-hint){font-size:28px}}
@media(max-height:460px) and (min-width:701px){body[data-view=legacy] .legacy-wrap,body[data-view=legacy] .legacy-wrap iframe{min-height:420px}}
#app.combat-layout #arena::before{background:none;opacity:0}
@supports(width:1cqh){@media(min-width:1000px) and (min-height:600px){
 #screen .battle .story-actors{container-type:size}
 #screen .battle .actor-wrap{width:min(100cqh,380px);height:min(100cqh,380px);max-height:none;aspect-ratio:1}
}}
/* A portrait's aspect ratio must not enlarge it past the reserved mobile stage. */
@media(max-width:760px){
 .home .hero-figure .portrait-art{width:calc(200px * var(--portrait-aspect,1));height:200px;max-height:200px!important;min-width:0;margin:0 auto;flex:none}
 .entry-portrait{overflow:visible;display:grid;place-items:center}
 .entry-portrait .portrait-art{height:180px;max-height:180px!important;background-size:contain}
}

/* The current opponent owns a readable HP display; death remains visible before hand-off. */
#encounter-health{position:absolute;right:14px;top:12px;width:min(230px,38%);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;padding:9px 12px;border:1px solid #dfbc8455;border-radius:7px;background:#081d20e8;z-index:10;pointer-events:none}
.encounter-health-name{font-size:13px;line-height:18px;color:#f3e1bc;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.encounter-health-value{font-size:12px;line-height:18px;color:#e6c6ad;font-variant-numeric:tabular-nums;white-space:nowrap}
#encounter-health .health-strip{position:relative;inset:auto;width:100%;height:7px;grid-column:1/-1;background:#c8b79922;border:1px solid #ebd4a533}
#encounter-health .health-strip span{background:linear-gradient(90deg,#a86952,#dfb38b);transition:width .16s ease}
#encounter-health[data-defeated=true]{border-color:#f2d58e99;background:#283322ed}#encounter-health[data-defeated=true] .encounter-health-value{color:#f5dc91}
#app.combat-layout #arena #toast{top:auto;bottom:12px;max-width:70%;font-size:13px;line-height:1.4;padding:7px 13px;white-space:normal;text-align:center}
#arena[data-encounter=defeated] #projectile-layer{opacity:.25}
@media(max-width:700px){#encounter-health{right:8px;top:8px;width:min(190px,58%);padding:6px 8px;gap:4px 6px}.encounter-health-name,.encounter-health-value{font-size:11px;line-height:16px}#app.combat-layout #arena #toast{font-size:12px;max-width:90%}}