/* The battlefield gets the available height; the two status cards stay visible. */
.battle-panel{min-width:0;min-height:0}#move-guide{font-size:13px;line-height:1.5;padding:8px 4px;color:#f1dfaf}#move-guide[hidden]{display:none}#view-zoom,#view-center{font-size:12px}
@media(min-width:1101px) and (pointer:fine){.battle-panel{display:flex;flex-direction:column}#battle-hud{grid-template-columns:1fr}body[data-game-mode=battle] .field{grid-template-rows:auto minmax(0,1fr) auto}}
@media(max-width:1100px),(pointer:coarse){
 body[data-game-mode=battle] #game-main{position:relative;grid-template-columns:1fr;grid-template-rows:44px minmax(0,1fr) 68px;gap:0}
 body[data-game-mode=battle] #game-main header{grid-column:1;grid-row:1}
 body[data-game-mode=battle] #game-main .game{display:flex;flex-direction:column;grid-column:1;grid-row:2;gap:0;min-height:0}
 body[data-game-mode=battle] #game-main .field{flex:1;grid-template-rows:28px minmax(0,1fr) 24px;min-height:140px}
 body[data-game-mode=battle] .battle-panel{flex:none;display:flex;flex-direction:column;background:#101f2b}
 body[data-game-mode=battle] #battle-hud{grid-template-columns:1fr 1fr;padding:6px;gap:6px}
 body[data-game-mode=battle] .status-card{padding:7px;border-radius:5px}
 body[data-game-mode=battle] .status-label{font-size:12px;margin-bottom:4px;letter-spacing:0}
 body[data-game-mode=battle] .status-identity{gap:6px;margin-bottom:5px}
 body[data-game-mode=battle] .status-identity strong{font-size:15px}
 body[data-game-mode=battle] .status-identity span{font-size:12px;line-height:1.3}
 body[data-game-mode=battle] .status-identity .avatar{width:32px;height:36px}
 body[data-game-mode=battle] .status-resource{display:flex;width:auto;font-size:12px;margin:4px 0;gap:3px;padding-bottom:4px}
 body[data-game-mode=battle] .status-resource b{font-size:12px}
 body[data-game-mode=battle] .status-numbers{font-size:12px;margin-top:5px;padding-top:4px;gap:2px}
 body[data-game-mode=battle] .status-numbers b{font-size:13px}
 body[data-game-mode=battle] .status-equipment{font-size:12px;margin-top:4px}
 body[data-game-mode=battle] .status-empty{padding:12px 2px;font-size:13px;line-height:1.6}
 body[data-game-mode=battle] #game-main aside{position:static;display:block;width:auto;max-height:106px;overflow-y:auto;padding:5px 7px;min-height:0;z-index:auto}
 body[data-game-mode=battle] #commands .actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
 body[data-game-mode=battle] #commands button{min-height:48px;font-size:14px;padding:7px;border-radius:6px}
 body[data-game-mode=battle] #commands .wide{grid-column:auto}
 body[data-game-mode=battle] #commands .target,body[data-game-mode=battle] #commands [data-action=back]{grid-column:1/-1}
 body[data-game-mode=battle] #move-guide{font-size:13px;padding:3px 0 7px}
 body[data-game-mode=battle] #mobile-dock{display:none}
 body[data-game-mode=battle] #field-controls{grid-column:1;grid-row:3;padding:4px 8px;gap:8px;height:68px;min-height:0}
 body[data-game-mode=battle] #touch-stick{width:58px;height:58px;flex:none}
 body[data-game-mode=battle] #stick-knob{width:32px;height:32px;left:12px;top:12px}
 body[data-game-mode=battle] .stick-cross{width:44px;left:6px;top:27px}.battle-controls .stick-cross:after{left:21px;top:-21px;height:44px}
 body[data-game-mode=battle] .touch-actions{display:flex;max-width:none;gap:6px;flex:1;min-width:0}
 body[data-game-mode=battle] #map-zoom{display:none}
 body[data-game-mode=battle] #field-interact{flex:1;min-width:0;min-height:54px;font-size:15px;padding:8px;background:#466c70;border-color:#addfe0}
 body[data-game-mode=battle] #field-interact:disabled{background:#273b45;border-color:#536a71;opacity:1;color:#c4d0d4}
 body[data-game-mode=battle] #touch-cancel{min-height:54px;min-width:64px;font-size:14px;padding:6px}
 body[data-game-mode=battle] .map-bottom #cancel{display:none}
 body[data-game-mode=battle] .map-bottom #hint{font-size:12px;line-height:1.4;white-space:nowrap}
 body[data-game-mode=battle] #tactical-tools{top:5px;left:5px;right:5px;display:block}
 body[data-game-mode=battle] .tactical-view{display:flex;gap:4px;max-width:100%;flex-wrap:wrap}
 body[data-game-mode=battle] .tactical-view button{font-size:12px;min-height:44px;min-width:44px;padding:5px 7px;border-radius:5px}
 body[data-game-mode=battle] .tile-legend{position:absolute;right:0;top:49px;gap:6px;font-size:12px;padding:5px;pointer-events:none}
 #scene[open] .cinema-controls button{font-size:14px}
}
@media(max-width:1100px) and (orientation:landscape),(pointer:coarse) and (orientation:landscape){
 body[data-game-mode=battle] #game-main{grid-template-columns:minmax(0,1fr) 292px;grid-template-rows:36px minmax(0,1fr)}
 body[data-game-mode=battle] #game-main header{grid-column:1/-1;grid-row:1;height:36px}
 body[data-game-mode=battle] #game-main .game{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:minmax(0,1fr) 292px;grid-template-rows:minmax(0,1fr);height:100%}
 body[data-game-mode=battle] #game-main .field{grid-column:1;grid-row:1;height:100%;min-height:0}
 body[data-game-mode=battle] .battle-panel{grid-column:2;grid-row:1;display:flex;min-height:0;padding-bottom:68px;border-left:1px solid #6f8077}
 body[data-game-mode=battle] #battle-hud{grid-template-columns:1fr;gap:5px;padding:5px;flex:none}
 body[data-game-mode=battle] .status-card{padding:5px 7px}
 body[data-game-mode=battle] .status-label{font-size:12px;margin-bottom:3px}
 body[data-game-mode=battle] .status-identity{margin-bottom:3px}
 body[data-game-mode=battle] .status-identity .avatar{width:26px;height:28px}
 body[data-game-mode=battle] .status-identity strong{font-size:14px}
 body[data-game-mode=battle] .status-identity span{font-size:12px;margin-top:1px}
 body[data-game-mode=battle] .status-resource{display:inline-flex;width:48%;margin:1px 2% 1px 0;font-size:12px}
 body[data-game-mode=battle] .status-resource b{font-size:12px}
 body[data-game-mode=battle] .status-numbers{font-size:12px;margin-top:3px;padding-top:3px}
 body[data-game-mode=battle] .status-equipment{font-size:12px;line-height:1.2;margin-top:2px}
 body[data-game-mode=battle] #game-main aside{flex:1;max-height:none;min-height:0;overflow:auto;padding:5px}
 body[data-game-mode=battle] #commands .actions{grid-template-columns:1fr 1fr}
 body[data-game-mode=battle] #commands button{min-height:44px;font-size:13px}
 body[data-game-mode=battle] #field-controls{position:absolute;right:0;bottom:env(safe-area-inset-bottom);width:292px;height:68px;z-index:5;grid-column:auto;grid-row:auto;padding:4px 5px;gap:5px;box-sizing:border-box}
 body[data-game-mode=battle] #field-interact{font-size:13px;padding:6px}
 body[data-game-mode=battle] #touch-cancel{min-width:52px;font-size:13px}
}
@media(max-height:700px) and (orientation:portrait){body[data-game-mode=battle] .status-identity .avatar{display:none}body[data-game-mode=battle] .status-resource{display:inline-flex;width:48%;font-size:11px}body[data-game-mode=battle] .status-resource b{font-size:11px}body[data-game-mode=battle] .status-equipment{font-size:11px}body[data-game-mode=battle] #game-main aside{max-height:86px}}
@media(max-width:1100px),(pointer:coarse){
 #scene .cinema canvas{top:122px;height:calc(100% - 122px)}
 #scene .cinema-unit{top:27px;height:89px;min-height:89px;padding:5px 7px}
 #scene .cinema-unit .scene-status-name strong{font-size:14px}
 #scene .cinema-unit .scene-status-name small{font-size:12px!important}
 #scene .scene-status-name .avatar{width:28px;height:30px}
 #scene .scene-status-resource{font-size:12px;margin-top:3px;display:inline-flex;width:48%;gap:3px}
 #scene .scene-status-resource b{font-size:12px!important}
 #scene .scene-status-stats{font-size:12px;margin-top:3px}
 #scene .cinema-heading{font-size:11px}
 #scene-next{grid-column:1/-1;min-height:52px!important;font-size:15px!important}
}
@media(max-width:1100px) and (orientation:landscape),(pointer:coarse) and (orientation:landscape){#scene[open]{grid-template-columns:minmax(0,1fr) 188px}#scene .cinema canvas{top:122px;height:calc(100% - 122px)}#scene .cinema-controls{gap:5px}#scene .cinema-controls button{font-size:13px}#scene-text{font-size:13px!important}}

@media(max-width:1100px) and (orientation:landscape),(pointer:coarse) and (orientation:landscape){
 body[data-game-mode=battle] .status-card{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:14px 28px 17px 16px 14px;gap:1px 6px;padding:5px 7px}
 body[data-game-mode=battle] .status-label{grid-column:1/-1;line-height:14px;margin:0}
 body[data-game-mode=battle] .status-identity{grid-column:1/-1;margin:0;height:28px}
 body[data-game-mode=battle] .status-identity strong{line-height:15px}
 body[data-game-mode=battle] .status-identity span{line-height:13px;font-size:12px}
 body[data-game-mode=battle] .status-resource{display:flex;width:auto;margin:0;line-height:14px;padding-bottom:3px}
 body[data-game-mode=battle] .status-numbers{grid-column:1/-1;line-height:16px;margin:0;padding:0;border:0}
 body[data-game-mode=battle] .status-equipment{grid-column:1/-1;line-height:14px;margin:0}
 body[data-game-mode=battle] .status-empty{grid-column:1/-1;grid-row:2/-1;padding:8px 0}
}

@media(max-width:1100px) and (orientation:landscape),(pointer:coarse) and (orientation:landscape){
 body[data-game-mode=battle] #battle-hud{grid-template-columns:1fr 1fr}
 body[data-game-mode=battle] .status-card{grid-template-rows:14px 42px 17px 17px 16px 28px;padding:5px;column-gap:0}
 body[data-game-mode=battle] .status-identity{height:42px;align-items:start}
 body[data-game-mode=battle] .status-identity .avatar{display:none}
 body[data-game-mode=battle] .status-identity span{white-space:normal;line-height:13px}
 body[data-game-mode=battle] .status-resource{grid-column:1/-1}
 body[data-game-mode=battle] .status-equipment{white-space:normal;font-size:12px;line-height:14px}
}

/* Cinematic projection and a dedicated subtitle area. */
#opening-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#opening-art[hidden]{display:none!important}.opening-gradient{background:linear-gradient(0deg,#071522f2,transparent 38%,transparent 82%,#07152277)}
.opening-words{left:8%;right:8%;bottom:8%;text-align:left;max-width:1080px}
#opening-perspective{font-size:12px;letter-spacing:.16em;color:#d8c597}
#opening-caption{font-size:clamp(24px,3vw,40px);font-weight:400;letter-spacing:.07em;line-height:1.45}
#opening-sub{font-size:clamp(14px,1.6vw,20px);line-height:1.85;max-width:46em}
#opening-signature{top:14%;pointer-events:none}#opening-signature h1{letter-spacing:.22em;text-shadow:0 2px 15px #07111a}
@media(orientation:portrait){#opening-canvas{top:5%;height:61%}.opening-gradient{background:linear-gradient(0deg,#071522 0%,#071522 34%,transparent 67%,#07152277)}.opening-words{left:7%;right:7%;bottom:8%;text-align:left}#opening-caption{font-size:26px;line-height:1.5}#opening-sub{font-size:16px;line-height:1.9}#opening-signature{top:45%;}#opening-signature h1{font-size:40px}#opening-perspective{font-size:12px}}
@media(orientation:landscape)and(max-height:500px){.opening-words{bottom:7%;left:6%;right:6%}#opening-caption{font-size:23px;margin:.22em 0}#opening-sub{font-size:13px;line-height:1.65;max-width:46em}#opening-signature{top:8%;}#opening-signature h1{font-size:38px}#opening-perspective{font-size:11px}}

#scene .scene-status-resource{width:46%;margin-right:4%;justify-content:space-between}

/* Cinematic subtitles stay in a separate portrait reading area. */
#opening-caption{letter-spacing:.045em}#opening-sub{letter-spacing:.025em;color:#dde2de}.opening-controls button{min-height:44px;min-width:68px}#opening-vignette{transition:opacity .08s linear}#opening-signature small{font-size:10px;letter-spacing:.25em;color:#d7c797}#opening-signature h1{margin:.25em 0}.opening-words::before{content:"";display:block;width:42px;height:1px;background:#cfb786;margin-bottom:12px}
@media(orientation:portrait){#opening-canvas{top:6%;height:56%}.opening-words{bottom:9%}#opening-caption{font-size:23px;line-height:1.6}#opening-sub{font-size:15px;line-height:1.9}#opening-signature{top:38%}.opening-controls{top:7%;right:12px}.opening-gradient{background:linear-gradient(0deg,#071522 0%,#071522 39%,#07152211 68%,#07152233)}}
@media(orientation:landscape)and(max-height:500px){.opening-words{bottom:8%}#opening-caption{font-size:22px}#opening-sub{font-size:13px;max-width:57em}.opening-controls{top:6%}.opening-words::before{margin-bottom:8px}}

@media(max-width:1100px),(pointer:coarse){#scene .cinema-unit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:40px 22px 18px;column-gap:6px;row-gap:2px;height:98px;min-height:98px;box-sizing:border-box}#scene .scene-status-name{grid-column:1/-1;gap:6px;align-items:center}#scene .scene-status-name small{line-height:1.25;margin:2px 0 0}#scene .scene-status-resource{display:flex;width:auto;margin:0;justify-content:space-between;line-height:16px;padding-bottom:4px;gap:2px;white-space:nowrap}#scene .scene-status-stats{grid-column:1/-1;line-height:18px;margin:0;white-space:nowrap;font-size:12px}#scene .cinema canvas{top:131px;height:calc(100% - 131px)}}

.recruit-guide{padding:14px 4px 4px;font-size:12px;color:#cad7d0}.recruit-guide>strong{color:#d6bd86;font-weight:500;letter-spacing:.08em}.recruit-guide p{margin:9px 0;padding-top:9px;border-top:1px solid #ffffff16}.recruit-guide b,.recruit-guide span{display:block}.recruit-guide span{margin-top:3px;line-height:1.6;color:#a8bbb9}

/* 5.3: keep the film and touch controls readable on narrow phones. */
@media(orientation:portrait){
 #opening-canvas{top:0;height:65%}
 .opening-gradient{background:linear-gradient(0deg,#071522 0%,#071522 31%,#07152211 67%,#07152222)}
 .opening-words{left:6%;right:6%;bottom:7%;max-height:30%;overflow:auto}
 #opening-caption{font-size:clamp(20px,5.5vw,28px);line-height:1.5;margin:.3em 0}
 #opening-sub{font-size:clamp(14px,3.6vw,18px);line-height:1.75;margin:.45em 0}
 #opening-perspective{font-size:12px;letter-spacing:.06em}
 .opening-controls{top:max(12px,env(safe-area-inset-top));right:12px}
 #opening-signature{top:42%}
 #scene .cinema-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px 0}
 #scene .cinema-controls button,#scene .cinema-controls select{min-height:48px;font-size:15px}
 #scene .cinema-controls label{display:flex;align-items:center;justify-content:center;gap:7px;font-size:13px}
 #scene-text{font-size:15px!important;line-height:1.6;padding:10px 12px!important}
 #scene-next{min-height:52px!important}
}
@media(orientation:portrait) and (max-width:480px){
 body[data-game-mode=battle] .status-resource{display:inline-flex;gap:3px;font-size:12px;width:48%;white-space:nowrap}
 body[data-game-mode=battle] .status-resource b{font-size:12px}
 body[data-game-mode=battle] .status-equipment{font-size:12px;line-height:1.35}
 body[data-game-mode=battle] .status-numbers{gap:3px}
 body[data-game-mode=battle] .tile-legend{font-size:11px;top:49px;padding:4px;gap:5px}
 body[data-game-mode=battle] .tactical-view{max-width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
 body[data-game-mode=battle] .tactical-view button{flex-shrink:0;min-height:44px}
}