:root{color-scheme:light;--ink:#213534;--paper:#f3eddc;--muted:#687365;--line:#d8d1bd;--gold:#b5a16d}
*{box-sizing:border-box} [hidden]{display:none!important}
body{margin:0;background:#101f23;color:var(--ink);font-family:system-ui,-apple-system,'Hiragino Kaku Gothic ProN',sans-serif;overscroll-behavior:none}
button,select,input{font:inherit} button{border:1px solid var(--line);background:#fffaf0;color:var(--ink);border-radius:7px;min-height:44px;min-width:44px;padding:7px 11px;touch-action:manipulation;cursor:pointer;font-size:13px;font-weight:650}
button:disabled{opacity:.4;cursor:default}button:active{transform:translateY(1px)}button:focus-visible{outline:3px solid #d2a851;outline-offset:1px}
.primary{background:#244c4a;border-color:#244c4a;color:#fff9e9}.danger{color:#fff;background:#954449;border-color:#954449}.subtle{background:transparent}.wide{width:100%;margin-top:10px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#app{max-width:700px;margin:auto;height:100svh;height:100dvh;display:flex;flex-direction:column;background:var(--paper);padding-top:env(safe-area-inset-top);overflow:hidden}
#battleHeader{height:52px;flex:none;display:flex;align-items:center;gap:8px;padding:4px 8px;background:#203b3b;color:#f2e8ce}
.turn-status{display:flex;align-items:center;gap:7px;white-space:nowrap}.turn-status b{font-size:15px;letter-spacing:.03em}.turn-status span{font-size:12px;color:#e5d09c;padding-left:7px;border-left:1px solid #76816d}
#battleHeader .mission-link{margin-left:auto;border:0;background:transparent;color:#d2d8c8;font-size:11px;line-height:1.5;padding:4px 6px;white-space:nowrap}
#menuBtn{border-color:#718173;color:#f5ecd5;font-size:12px;padding:7px 9px}
#forecast{position:absolute;z-index:5;top:0;left:0;right:0;max-height:72px;overflow:auto;background:#f5e2c6;border-bottom:1px solid #b58f64;color:#8c3e34;padding:6px 10px;font-size:12px;font-weight:650;line-height:1.55}
h2{font:700 23px Georgia,'Yu Mincho',serif;margin:5px 0 14px}h3{font-size:15px;margin:16px 0 7px}p{font-size:13px;line-height:1.8;margin:9px 0}
.map-wrap{position:relative;flex:1;min-height:80px;background:#203634;border-bottom:2px solid #baaa7a;overflow:hidden}
#mapViewport{width:100%;height:100%;overflow:auto;touch-action:pan-x pan-y pinch-zoom;scrollbar-width:thin;scrollbar-color:#91a085 #263f36;overscroll-behavior:contain;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
#battlefield{display:block;image-rendering:pixelated;touch-action:pan-x pan-y pinch-zoom}
#minimap{position:absolute;right:8px;top:8px;width:45px;height:86px;background:#172e2e;border:2px solid #e2ce94;cursor:pointer;box-shadow:0 2px 7px #0006;image-rendering:pixelated;touch-action:manipulation}
.map-tools{position:absolute;bottom:7px;left:7px;display:flex;align-items:center;gap:3px;background:#162e2ee8;padding:3px;border-radius:7px;color:#f3eddc;box-shadow:0 2px 8px #0004}
.map-tools button{padding:5px 8px;font-size:12px;border-color:#a1a483;background:#e8e5cf}.map-tools span{font-size:10px;min-width:24px;text-align:center}
button[aria-pressed=true]{background:#954449;color:white}
#phaseFlash{position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);background:#172d2ef2;color:#ead598;white-space:nowrap;font:22px Georgia,serif;letter-spacing:.12em;border-block:1px solid #b8a16e;padding:14px 28px;pointer-events:none;opacity:0;transition:opacity .1s}#phaseFlash.visible{opacity:1}
/* Overlay windows do not participate in battlefield layout or scroll anchoring. */
#orders{position:absolute;z-index:3;left:8px;right:8px;width:calc(100% - 16px);max-width:360px;background:#f3edddf5;border:2px solid #e5d3a3;outline:1px solid #314e53;box-shadow:0 3px 0 #152b3b88,0 5px 12px #102a3255;border-radius:3px;overflow:hidden;padding:7px 8px}
#orders[data-side=right]{left:auto}
#orders[data-dock=top]{top:8px}
#orders[data-dock=bottom]{bottom:64px}
.map-wrap:has(#forecast:not([hidden])) #orders[data-dock=top]{top:76px}
#mapViewport{overflow-anchor:none;scrollbar-gutter:stable}
#orders.idle{bottom:64px;top:auto;border:0;outline:0;box-shadow:none;background:#173535d9;pointer-events:none;color:#fff5d5;max-width:max-content}
#orders.idle .idle-tip{color:inherit}
#orders.result{top:8px;bottom:auto}

#orders.idle{height:36px;display:flex;align-items:center}.idle-tip{font-size:11px;color:#697360}
#orders.selected{height:244px;display:grid;grid-template-rows:44px 44px minmax(0,1fr) 44px;gap:4px}
#orders.result{min-height:110px;max-height:200px;overflow:auto}.result-title{font:700 20px Georgia,'Yu Mincho',serif}.result-title small{font:11px system-ui}
.unit-head{display:flex;gap:6px;align-items:center;min-width:0}.unit-name{flex:1;min-width:0}.unit-name strong{font:700 18px Georgia,'Yu Mincho',serif;display:block}.unit-name small{font-size:10px;color:#687463;white-space:nowrap;display:block;overflow:hidden;text-overflow:ellipsis}
.unit-head button{padding:5px 6px;font-size:11px}.hp{font-weight:750;color:#285f61;font-size:17px;white-space:nowrap}.hp small{font-size:11px;color:#687463}
.command-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.command-row button{padding:5px 3px;font-size:12px;line-height:1.25}.chosen{background:#d9e4d6;border:2px solid #45776e}
.confirm-row{display:flex;gap:7px}.confirm-row .primary{flex:1}
.preview{border-left:3px solid #bc9553;padding:4px 7px;background:#e7dfc9;font-size:12px;line-height:1.55;overflow:auto}
.hint{font-size:12px;color:#62705e;line-height:1.7}.risk{color:#a43838;font-weight:700}
footer{display:flex;gap:7px;padding:6px 10px calc(6px + env(safe-area-inset-bottom));border-top:1px solid var(--line);flex-shrink:0}footer button{font-size:12px}#endTurn{flex:1}
dialog{max-width:550px;width:calc(100% - 20px);max-height:88svh;border:1px solid #b6a473;border-radius:12px;background:#f5f0e2;color:var(--ink);padding:16px;box-shadow:0 16px 80px #0009;overscroll-behavior:contain}
dialog::backdrop{background:#071b23b8;backdrop-filter:blur(3px)}#closeModal{position:sticky;bottom:-16px;z-index:1;box-shadow:0 -7px 14px #f5f0e2;background:#f5f0e2;min-height:46px}
.map-card{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px;border:1px solid #d0c6ab;margin:8px 0;border-radius:7px;background:#fffcf1}
.map-card.active{border-left:4px solid #3c7470}.map-card strong{font:700 17px Georgia,'Yu Mincho',serif}.map-card small{display:block;color:#7a796a;font-size:10px;margin-top:4px}.map-card button{flex:none}
.action-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.settings{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:12px;margin-top:6px}
label{font-size:12px;display:flex;gap:6px;flex-direction:column;min-width:0}select{min-height:44px;background:#fffaf0;border:1px solid #cabf9f;border-radius:5px;padding:5px;color:var(--ink);width:100%;font-size:16px}
#modalBody .log-line{font:11px/1.7 ui-monospace,monospace;padding:4px 0;border-bottom:1px solid #e0d8c5}details{font-size:12px;line-height:1.8;border-top:1px solid #d7ccb4;margin-top:10px}summary{font-weight:700;cursor:pointer;min-height:44px;padding:11px 0}a{color:#2b6e79}#rosterList button{width:100%;text-align:left}.focus-select{margin-top:10px}.eyebrow{font-size:10px;letter-spacing:.12em;color:#697360}
@media(min-width:700px){#app{border-inline:1px solid #897950}}
@media(max-width:340px){#battleHeader{gap:5px;padding-inline:6px}.turn-status{gap:4px}#battleHeader .mission-link{font-size:10px;padding-inline:3px}#orders{padding-inline:7px}.unit-head{gap:4px}}
@media(max-height:500px){#orders.selected{height:244px;max-width:340px}#battleHeader{height:48px}#orders.idle{height:30px}dialog{max-height:94svh}}
@media(prefers-reduced-motion:reduce){#phaseFlash{transition:none}}

#orders.selected.readonly{height:116px;grid-template-rows:44px minmax(0,1fr)}

/* On short screens the command window shares the map sideways with the tools. */
@media(max-height:500px){
 #orders.selected[data-dock]{top:8px;bottom:auto}
 .map-wrap:has(#forecast:not([hidden])) #orders.selected[data-dock]{top:76px;height:196px;grid-template-rows:44px 44px minmax(0,1fr) 44px}
 .map-wrap:has(#orders.selected) .map-tools{max-width:calc(100% - 354px);flex-wrap:wrap}
 .map-wrap:has(#orders.selected[data-side=left]) .map-tools{left:auto;right:7px}
}
#orders.selected.choosing{height:100px;grid-template-rows:44px minmax(0,1fr)}
#orders.choosing .command-row,#orders.choosing .confirm-row{display:none}
#orders .unit-name strong{font-size:16px}
#orders .unit-head{gap:4px}
#orders .unit-head button{padding-inline:5px}

#mapViewport.routing,#mapViewport.routing #battlefield{touch-action:none}

.battle-forecast{display:grid;grid-template-columns:1fr 1fr;gap:0 8px;padding-block:3px;line-height:1.35}
.battle-forecast>div{min-width:0}.battle-forecast strong,.battle-forecast span,.battle-forecast small{display:block}
.battle-forecast strong{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.battle-forecast small{font-size:10px;color:#536356}.battle-forecast p{grid-column:1/-1;font-size:10px;line-height:1.4;margin:2px 0 0}
#mapViewport:focus-visible{outline:3px solid #e5cc86;outline-offset:-3px}
#phaseFlash{z-index:4;top:auto;bottom:64px;transform:translateX(-50%);width:max-content;max-width:calc(100% - 20px);white-space:normal;text-align:center;font:600 13px/1.6 system-ui;letter-spacing:0;padding:8px 14px}
footer{gap:4px;padding-inline:6px}footer button{padding-inline:7px;font-size:11px;white-space:nowrap}
@media(max-width:340px){footer button{padding-inline:5px;font-size:10px}}

/* v0.4: one gesture, one quick choice. The battlefield owns touch from down. */
html,body{height:100%;overflow:hidden}
#app{-webkit-user-select:none;user-select:none}
#mapViewport,#battlefield,#mapViewport.routing,#mapViewport.routing #battlefield{touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
#soundBtn{font-size:10px;padding:5px;border-color:#718173;background:transparent;color:#f5ecd5;flex:none}
#soundBtn[aria-pressed=true]{background:#315953;color:#f5ecd5}
#battleHeader{gap:5px}#battleHeader .mission-link{padding-inline:3px}
#orders{max-width:300px;background:#152f32cf;color:#fff5dc;border:1px solid #dbc99199;outline:1px solid #132c34aa;box-shadow:0 3px 12px #102a3255;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);border-radius:8px;padding:7px 8px}
#orders.selected:not(.choosing):not(.readonly){height:194px;grid-template-rows:44px minmax(0,1fr) 44px}
#orders.selected.choosing{height:90px;grid-template-rows:44px minmax(0,1fr)}
#orders.selected.readonly{height:116px;grid-template-rows:44px minmax(0,1fr)}
#orders .unit-name small,#orders .hp small{color:#d3e2d2}#orders .hp{color:#aee4da}
#orders .unit-head button,#orders .subtle{background:#f3eddd14;color:#fff3d3;border-color:#f3eddd44}
#orders .preview{color:#fff4dc;background:#0d242638;border-left:2px solid #d7ba78}
#orders .battle-forecast small{color:#d4e6d6}#orders .battle-forecast .risk{color:#ffb0a2}
#orders .hint{color:#e3e8d9;margin:2px 0}
#orders .command-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
#orders .command-row button{font-size:13px;background:#2f6564e8;border-color:#a6d1bf80;color:#fff7df}
#orders .command-row .attack{background:#914d4be6;border-color:#e9ae9677}
#orders .command-row .subtle{background:#f3eddd14;border-color:#f3eddd55}
#orders .command-row button:disabled{opacity:.3}
#phaseFlash{background:#132e30ce;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);font-size:12px;max-height:88px;overflow:hidden;border-radius:5px}
@media(max-height:500px){
 #orders.selected:not(.choosing):not(.readonly){height:194px;max-width:300px}
 .map-wrap:has(#forecast:not([hidden])) #orders.selected:not(.choosing):not(.readonly){height:188px;grid-template-rows:44px minmax(0,1fr) 44px}
 .map-wrap:has(#orders.selected) .map-tools{max-width:calc(100% - 314px)}
}
dialog{background:#f5f0e2ed}dialog::backdrop{background:#071b2359;backdrop-filter:blur(2px)}
#closeModal{background:#f5f0e2eb;box-shadow:0 -7px 14px #f5f0e288}
.map-card{background:#fffcf1d6}


/* v0.5: leave the lower battlefield open; windows avoid the active tiles. */
#orders.idle{display:none}
.map-tools{background:#162e2e94;box-shadow:none;max-width:calc(100% - 14px)}
#mapToolChoices{display:flex;gap:3px;align-items:center;flex-wrap:wrap}
#toolsToggle{background:#173c3bca;color:#fff3d3;border-color:#c4d6bb80}
#orders{max-width:284px;background:#152f328f;backdrop-filter:none;-webkit-backdrop-filter:none}
#orders.selected:not(.choosing):not(.readonly):not(.has-target){height:158px}
#orders .unit-head,#orders .preview{background:#112e32b3;border-radius:3px}
#orders .unit-head{padding-inline:3px}
#orders .preview{font-size:11px;line-height:1.4}
#minimap{opacity:.8;width:36px;height:68px}
#phaseFlash{bottom:auto;top:8px;background:#132e30e8;transform:translateX(-50%);max-width:calc(100% - 96px);padding:7px 10px}
.map-wrap:has(#forecast:not([hidden])) #phaseFlash{top:76px}
@media(max-height:500px){
 .map-wrap:has(#orders.selected) .map-tools{max-width:calc(100% - 14px);flex-wrap:nowrap;left:7px;right:auto}
 #orders.selected:not(.choosing):not(.readonly){max-width:284px}
}

/* v0.5.2: command controls live outside the clipped battlefield. */
#commandDock{height:144px;flex:none;position:relative;background:#17343b;border-top:1px solid #89b7c6;color:#eff8ff}
#commandHint{position:absolute;inset:0;display:grid;place-items:center;font-size:14px;color:#c8e0eb;pointer-events:none}
#commandDock #orders{position:static;width:100%;max-width:none;height:100%;min-height:0;max-height:none;display:grid;grid-template-rows:20px minmax(0,1fr) 44px;gap:4px;padding:6px 10px;border:0;outline:0;border-radius:0;box-shadow:none;background:#17343be6;overflow:hidden}
#commandDock #orders::after{display:none}
#commandDock #orders .unit-head{background:none;padding:0;display:flex;gap:10px;min-height:0;align-items:center;white-space:nowrap;overflow:hidden}
#commandDock #orders .unit-head strong{font:700 15px system-ui}
#commandDock #orders .unit-head span{font-size:13px;color:#c4dbe8;overflow:hidden;text-overflow:ellipsis}
#commandDock #orders .preview{background:none;border:0;padding:0;font-size:14px;line-height:1.35;white-space:pre-line;min-height:0;overflow:auto;color:#f0f8ff}
#commandDock #orders .command-row{display:grid;grid-template-columns:repeat(var(--choices,4),minmax(44px,1fr));gap:6px}
#commandDock #orders .command-row button{font-size:14px;padding:5px 3px;min-height:44px;min-width:44px;line-height:1.2}
#commandDock #orders .command-row .attack{background:#306a9b;border-color:#8dbede}
#commandDock #orders.idle{display:flex;align-items:center;justify-content:center;font-size:13px;line-height:1.6;color:#c8e0eb;text-align:center}
/* The former floating idle overlay disabled pointer events; the fixed dock contains a real sortie button. */
#commandDock #orders.idle{pointer-events:auto;gap:12px;justify-content:space-between}
#commandDock #orders.idle button{pointer-events:auto;min-height:44px;min-width:100px;flex-shrink:0;color:#fff5de;background:#5b4562;border-color:#c1a2c4}

#commandDock #orders.result{display:block}
#commandDock #orders.result .action-row{margin-top:10px}

/* v0.6: direct commands, readable forecasts and persistent, nonblocking battle reports. */
#commandDock #orders .combat-forecast{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:center;white-space:normal;overflow:hidden}
.combat-forecast>div{min-width:0}.combat-forecast span,.combat-forecast small{display:block;white-space:nowrap;font-size:14px;line-height:1.2}
.hp-track{height:5px;background:#091e2b;border-radius:4px;overflow:hidden;margin:4px 0}.hp-track i{display:block;height:100%;background:#9bd9ff;transition:width .16s ease-out}.hp-track.enemy i{background:#f2c182}.hp-track.ally i{background:#91ddf5}
.fatal{color:#ffe2a2;font-weight:750}
#commandDock #orders.battle-report{grid-template-rows:20px minmax(0,1fr) 20px;gap:5px;padding:8px 10px}
.report-title{font-size:14px;font-weight:750;color:#e1f1ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.combatants{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:center}.combatant{min-width:0}.combatant strong{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.combatant span{font-size:14px;line-height:1.3;white-space:nowrap}.combatant b{font-size:18px}.combatant .hp-track{height:7px;margin:5px 0}
.report-tail{font-size:12px;line-height:20px;color:#bdd6e3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.report-note{align-self:center;font-size:14px;line-height:1.6}
#musicVolume{min-height:44px;accent-color:#276e89;width:100%}
@media(prefers-reduced-motion:reduce){.hp-track i{transition:none}}

/* Charcoal / warm ivory / muted brass: interface distinct from team colours. */
:root{--ink:#eee9e2;--paper:#27252c;--muted:#c4bbc6;--line:#69616c;--gold:#d5b886;color-scheme:dark}
body{background:#18171d}
button,select{background:#38333e;color:var(--ink);border-color:var(--line)}
.primary{background:#d3bb91;color:#27232b;border-color:#e5cfa9}
.subtle{background:transparent}
#battleHeader{background:#27232e;color:#f2ebe2}
.turn-status span{color:#d9c39f;border-color:#736575}
#battleHeader .mission-link{color:#d9d1dc}
#menuBtn,#soundBtn{color:#eee6dc;border-color:#746778}
#soundBtn[aria-pressed=true]{background:#514454;color:#fff2df}
.map-wrap{background:#29252d;border-bottom-color:#9c8769}
#mapViewport{scrollbar-color:#9b8c9c #29252d}
.map-tools{background:#29232ee8;color:#f3eade}
.map-tools button{background:#49404d;color:#fff1e0;border-color:#847287}
button[aria-pressed=true]{background:#66516c;color:#fff4e2}
#orders{background:#27212de6;color:#f5eee5;border-color:#c3a9828c;outline-color:#18141ecc;box-shadow:0 4px 14px #17121d40;backdrop-filter:none;-webkit-backdrop-filter:none}
#orders.idle{background:#27212dd9;color:#f5eee5;height:auto;min-height:36px}
#orders .unit-name small,#orders .hp small,#orders .battle-forecast small{color:#d5c8d6}
#orders .hp{color:#f0d5a8}
#orders .unit-head button,#orders .subtle{background:#eee3f012;color:#f5eee5;border-color:#d3c0d449}
#orders .preview{background:#140f1a33;border-color:#c9aa78;color:#f5eee5}
#orders .hint{color:#ddd0de}
#orders .command-row button{background:#66556c;color:#fff6ea;border-color:#ba9ebd88}
#orders .command-row .attack{background:#d3bb91;color:#27232b;border-color:#e5cfa9}
#orders .command-row .subtle{background:#eee3f012;border-color:#d3c0d455}
#phaseFlash{background:#27212de6;color:#f0d5a8;backdrop-filter:none;-webkit-backdrop-filter:none;border-color:#b69d79}
#orders.idle:has(.idle-tip){max-width:calc(100% - 16px)}
footer{background:#27232e}
dialog{background:#2b2532f5;color:var(--ink);border-color:#a38aab}
dialog::backdrop{background:#18121c66;backdrop-filter:none}
#closeModal{background:#39303f;box-shadow:0 -7px 14px #2b253288}
.map-card{background:#ffffff08;border-color:#756379}
.map-card.active{border-left-color:#d4b88a}
.map-card small,.hint,.eyebrow{color:#c8bacd}
a{color:#e4c8f0}
#modalBody .log-line,details{border-color:#65526d}

#commandDock{background:#292330;border-color:#8a748e;color:#f5eee5}
#commandDock #orders{background:#292330eb}
#commandDock #orders .unit-head span,#commandHint,#commandDock #orders.idle,.report-tail{color:#d5c8d6}
#commandDock #orders .preview,.report-title{color:#f5eee5}
#commandDock #orders .command-row .attack{background:#d3bb91;color:#27232b;border-color:#e5cfa9}
#toolsToggle{background:#29232ee0;color:#f5eee5;border-color:#a591ab}
#orders .unit-head{background:none}
#commandDock #orders .command-row button{font-size:14px}
.hp-track{background:#17111e}.hp-track.ally i{background:#ddd1ed}.hp-track.enemy i{background:#e3bf85}
#musicVolume{accent-color:#b79ac4}

/* Sound room: easy thumb-size playback controls within the existing menu. */
#soundRoomList{display:grid;gap:8px;margin:8px 0}
.sound-room-card{border:1px solid #65526d;border-radius:8px;padding:9px;background:#ffffff08}
.sound-room-card strong{display:block;font-size:14px;color:#e8d6b5;margin-bottom:6px}
.sound-room-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.sound-room-actions button{font-size:12px;line-height:1.35;min-height:48px;text-align:left;overflow-wrap:anywhere}
.sound-room-actions button[aria-pressed=true]{background:#79617f;border-color:#d5b886;color:#fff7e9}
#soundRoomNow{font-size:13px;line-height:1.5;color:#e6d5bf;min-height:20px}

.sound-room-section{font-size:13px;letter-spacing:.025em;color:#e6c793;margin:12px 0 0}
.sound-room-mood{margin:0 0 9px;font-size:12px;line-height:1.45;color:#cfc1d2}

/* HP6 readability without changing the fixed command-dock geometry. */
#commandDock #orders .unit-head .hp-value{font-size:16px;font-variant-numeric:tabular-nums;color:#f3e2bb;white-space:nowrap}
#commandDock #orders .unit-head .hp-value.hp-critical{color:#ffd18a}
#commandDock #orders .hp-track{height:9px;border:1px solid #9c879d;border-radius:3px;box-sizing:border-box}
#commandDock #orders .combatant .hp-track{height:10px}

/* Position preview stays inside the existing fixed dock while the finger is held. */
#commandHint{align-content:center;justify-items:stretch;gap:8px;padding:10px;text-align:left;line-height:1.4}
#commandHint .route-readout{font-size:14px;color:#f3e2bb;font-variant-numeric:tabular-nums}
#commandHint .route-intent{font-size:14px;white-space:pre-line;color:#f5eee5}
#commandHint .route-help{font-size:12px;color:#d5c8d6}

/* Issue17: keep the 144px dock, expose sortie after reports, and wrap 320px controls. */
#commandDock #orders.battle-report{grid-template-rows:20px minmax(0,1fr) 44px}
#commandDock .report-tail{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:12px}
#commandDock .report-sortie{min-height:44px;min-width:100px;flex:none;font-size:14px;padding:4px 6px}
@media(max-width:340px){
 #commandDock #orders{padding-inline:6px}
 #commandDock #orders .command-row{gap:3px}
 #commandDock #orders .unit-head{gap:5px}
 #commandDock #orders.idle{gap:6px}
 #commandDock #orders.idle>span{font-size:12px}
}

#commandDock .report-tail-text{min-width:0;overflow:hidden;text-overflow:ellipsis}
#commandDock #waitOrder{white-space:pre-line}
/* Numbered music catalogue: clear mobile map/phase references. */
.sound-room-map-assignments{display:grid;gap:3px;margin:6px 0 14px;padding:10px;border:1px solid #65526d;border-radius:8px;background:#ffffff08}
.sound-room-map-line{font-size:12px;line-height:1.5;color:#e8d8c4;font-variant-numeric:tabular-nums}
.sound-room-actions button{text-align:left}
/* Menu links (source, balance notes) keep a 44px touch target like the other controls. */
#modalBody a{display:inline-flex;align-items:center;min-height:44px}

/* Castle sortie roster: readable class icons without shrinking mobile tap targets. */
#deploymentList .sortie-choice{display:flex;align-items:center;text-align:left;gap:11px;min-height:49px;padding:6px 9px}
.sortie-choice-icon{display:grid;place-items:center;flex:0 0 35px;height:35px;border-radius:7px;background:#294d50;color:#fff2c7;font-size:20px;font-weight:700}
.sortie-choice-copy{flex:1;min-width:0;line-height:1.35;font-size:13px}
/* Issue #24: a fixed, low-noise one-step movement undo, never part of map scrolling. */
#moveUndo{position:absolute;right:10px;bottom:10px;z-index:6;width:48px;height:48px;min-width:48px;min-height:48px;border-radius:12px;background:#302936b8;color:#ffe9b5;border:1px solid #d2bd9f9c;font-size:29px;line-height:1;padding:0;box-shadow:0 2px 8px #1a142333;backdrop-filter:none}
#moveUndo:active{background:#5e4d63}
/* Side-by-side battle forecast: stable rows and tabular figures down to 320px. */
#commandDock #orders .combat-forecast{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:stretch;align-content:center;padding-block:0}
#commandDock #orders .combat-forecast .forecast-side{display:grid;grid-template-rows:18px 10px 18px;align-content:center;min-width:0;gap:3px}
#commandDock #orders .combat-forecast .forecast-side span{font-size:14px;line-height:18px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#commandDock #orders .combat-forecast .forecast-side .hp-track{height:10px;margin:0;align-self:center}
#commandDock #orders .combat-forecast .forecast-side small{font-size:13px;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
@media(max-width:340px){#commandDock #orders .combat-forecast{gap:8px}#commandDock #orders .combat-forecast .forecast-side span{font-size:13px}}
/* Issue #113: three diamonds with two independent half-points in the in-game sound/motion audition. */
.gem-demo-board{margin:10px 0 14px;padding:15px 12px;background:#201d29;border:1px solid #9e8d9d;border-radius:10px;text-align:center;overflow:hidden}
#gemDemoStatus{font-size:18px;font-weight:750;letter-spacing:.05em;font-variant-numeric:tabular-nums;color:#f1dfb2}
.gem-demo-pips{display:flex;justify-content:center;gap:8px;margin:18px auto 13px}
.gem-demo-jewel{position:relative;display:inline-block;width:38px;height:38px;flex:0 0 38px;background:#687584;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.gem-demo-half{position:absolute;inset:1px;background:linear-gradient(135deg,#fff8dc,#f2c993 38%,#be819d 70%,#eadac2)}
.gem-demo-half.left{clip-path:polygon(50% 0,50% 100%,0 50%)}
.gem-demo-half.right{clip-path:polygon(50% 0,100% 50%,50% 100%)}
.gem-demo-half.ally{background:linear-gradient(135deg,#eaf5ff,#b8c8e4 42%,#9883b9)}
.gem-demo-half.gone{background:#303945}
.gem-demo-half.pending{background:#aeb6bf}
.gem-demo-half.breaking{animation:gem-crack .13s ease-out both}
.gem-demo-half.reforming{animation:gem-reform .13s ease-out both}
.gem-demo-board[data-stage="defeat-hold"] .gem-demo-pips{transform:scale(.94);filter:drop-shadow(0 0 7px #ffe8b0)}
.gem-demo-board[data-stage="collapse"] .gem-demo-pips{animation:gem-burst .25s ease-out both}
@keyframes gem-burst{from{transform:scale(.94);filter:drop-shadow(0 0 12px #ffe8b0)}to{transform:scale(1.24);filter:none;opacity:.25}}
.gem-demo-hitstop{outline:2px solid #dfb78d;transform:translateX(2px)}
#gemDemoMessage{min-height:26px;font-size:14px;color:#e8d4bb;line-height:1.7}
.gem-demo-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:10px 0}
.gem-demo-controls button{font-size:13px;line-height:1.3;padding:8px 5px;min-height:48px;white-space:normal}
@media(max-width:340px){.gem-demo-pips{gap:4px}.gem-demo-jewel{width:23px;height:30px}}
@media(prefers-reduced-motion:reduce){.gem-demo-jewel{transition:none}.gem-demo-half.breaking,.gem-demo-half.reforming,.gem-demo-board[data-stage="collapse"] .gem-demo-pips{animation:none}.gem-demo-hitstop{transform:none}}
@keyframes gem-crack{from{filter:brightness(2);transform:scale(1.16)}to{filter:brightness(.65);transform:scale(.82)}}
@keyframes gem-reform{from{filter:brightness(1.7);transform:scale(.74)}to{filter:brightness(1);transform:scale(1)}}


/* Issue #50: a single glance communicates where the army is in its four phases.
   Absolutely positioned: never steals map pixels or changes the 52px header. */
#battleHeader{position:relative;padding-bottom:6px}
#phaseRail{position:absolute;left:7px;right:7px;bottom:1px;height:4px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;pointer-events:none}
#phaseRail span{display:block;height:4px;border-radius:3px;background:#645968;box-shadow:inset 0 1px 1px #170f2266}
#phaseRail span.past{background:#9d8a79}
#phaseRail span.current{background:#f5ddb0;box-shadow:0 0 5px #f5d9a088}
#phaseRail[data-phase="2"] span.current{background:#e8aaa2}
#phaseRail[data-phase="3"] span.current{background:#b7d9cf}
#phaseRail[data-phase="4"] span.current{background:#dfb7e0}
#battleHeader .mission-link{min-width:0;max-width:38%;overflow:hidden;text-overflow:ellipsis}
@media(max-width:340px){#battleHeader .mission-link{max-width:32%}}

/* Emergency first, weather second. Warning content remains selectable/readable. */
#forecast{z-index:5;border-bottom:1px solid #a78c85;border-left:4px solid #a49cb1;border-radius:0 0 5px 5px;background:#332c3a;color:#eee3e5;font-size:13px;line-height:1.45;padding:7px 10px;overflow:auto;max-height:72px;box-shadow:0 3px 10px #17121d75}
#forecast[data-level="weather"]{background:#302d3a;color:#e2d8eb;border-left-color:#9ca7bf}
#forecast[data-level="reinforcement"]{background:#372a3e;color:#f2dced;border-left-color:#dab2ee}
#forecast[data-level="cannon"]{background:#4c2832;color:#fff3e6;border-left-color:#f0b381;border-bottom-color:#bf6973;box-shadow:0 3px 12px #2a121acc}
#forecast[data-level="cannon"]::before{content:"砲撃警戒";font-weight:850;letter-spacing:.05em;color:#ffdb9c;margin-right:9px}
#forecast[data-level="reinforcement"]::before{content:"増援予告";font-weight:800;color:#efc4f1;margin-right:9px}
#forecast[data-level="weather"]::before{content:"戦場状況";font-weight:750;color:#bdc9e5;margin-right:8px}

/* Exact numerical HP stays visible. Three paired cells retain six exact half-HP divisions superimposed
   over the existing authoritative engine-driven percentage fill. */
#commandDock .hp-track{position:relative;isolation:isolate;border:1px solid #968296;background-color:#41384a;overflow:hidden;border-radius:3px}
#commandDock .hp-track i{height:100%;border-radius:0;background-image:linear-gradient(180deg,#fff3d9 0%,#d5af80 48%,#966c5a 100%);box-shadow:inset 0 1px 1px #fff9df65}
#commandDock .hp-track.ally i{background-image:linear-gradient(180deg,#f5eafc,#c6addb 48%,#7d6998)}
#commandDock .hp-track.enemy i{background-image:linear-gradient(180deg,#fff0d2,#d8ae70 48%,#9d6849)}
#commandDock .hp-track::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(33.33333% - 2px),#292330 calc(33.33333% - 2px),#292330 33.33333%),repeating-linear-gradient(90deg,transparent 0,transparent calc(16.66667% - 1px),#ada0b44d calc(16.66667% - 1px),#ada0b44d 16.66667%)}
#commandDock .combat-forecast .forecast-side{min-width:0;border-left:2px solid #b6a5bb;padding-left:7px}
#commandDock .combat-forecast .forecast-side.ally{border-color:#b9a5d8}
#commandDock .combat-forecast .forecast-side.enemy{border-color:#e4bf88}
#commandDock .combat-forecast .forecast-side span{font-weight:700}
#commandDock .combat-forecast .forecast-side .fatal{color:#ffdcaa}

/* One command hierarchy while the finger is on the field. No layout shift. */
#commandHint{border-left:3px solid transparent;padding-inline:13px}
#commandHint[data-intent="attack"]{border-left-color:#e4bc83;background:#322934}
#commandHint[data-intent="locked"]{border-left-color:#a7d8c4;background:#29353a}
#commandHint[data-intent="invalid"]{border-left-color:#f0a3a5;background:#402d3a}
#commandHint[data-intent="attack"] .route-intent{color:#fff1c9;font-weight:750}
#commandHint[data-intent="locked"] .route-help{color:#c4ebd6;font-weight:750}
#commandHint[data-intent="invalid"] .route-intent{color:#ffd1c9;font-weight:750}
#commandHint .route-readout{font-variant-numeric:tabular-nums}
#commandDock #orders.battle-report .report-title{font-weight:850;letter-spacing:.025em}
#nextUnit:not(:disabled){border-color:#c1a7c7;box-shadow:inset 0 2px 0 #c1a7c73d}
@media(prefers-reduced-motion:reduce){#phaseRail span,#commandDock .hp-track i{transition:none}}

/* Issue #21: landscape phones put the fixed command panel beside the battlefield.
   The panel keeps one fixed width and the full map height in every draft/command
   state, so the battlefield geometry still never moves; portrait is unchanged. */
@media(orientation:landscape) and (max-height:500px) and (min-width:600px){
 #app{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) 300px;grid-template-rows:48px minmax(0,1fr) auto;grid-template-areas:"head head" "map dock" "map foot"}
 #battleHeader{grid-area:head}
 .map-wrap{grid-area:map;min-height:0;border-bottom:0;border-right:2px solid #9c8769}
 #commandDock{grid-area:dock;height:auto;min-height:0;border-top:0;border-left:1px solid #89b7c6}
 #commandDock #orders{grid-template-rows:auto minmax(0,1fr) auto}
 #commandDock #orders.idle{flex-direction:column;justify-content:center;gap:10px}
 footer{grid-area:foot;padding:5px 6px calc(5px + env(safe-area-inset-bottom));gap:4px;border-left:1px solid var(--line)}
 footer button{padding-inline:5px;font-size:11px;white-space:nowrap}
}

/* Issue #43: war record list in the chapter result dialog. */
.war-record{padding-left:1.3em;line-height:1.6}.war-record li{margin:0 0 10px}.war-record small{color:#cbb9a5}.war-record-note{font-size:12px;opacity:.8}


/* Issue #55: quiet, readable previews, no new modal or battlefield overlay.
   The P2 number is a conservative sum of independent enemy reach scenarios. */
#commandHint{gap:4px;padding-block:7px}
#commandHint .route-risk{display:block;min-height:17px;line-height:17px;max-width:100%;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#bfd5c4;font-variant-numeric:tabular-nums}
#commandHint .route-risk[data-level="caution"]{color:#f4d2a3}
#commandHint .route-risk[data-level="high"]{color:#f9bd9d;font-weight:700}
#commandHint .route-risk[data-level="critical"]{color:#ffaca7;font-weight:800}
#commandHint .route-risk[data-level="cannon"]{color:#ffd08d;font-weight:800}
#commandHint .route-intent{overflow-wrap:anywhere}
#commandDock #orders .report-tail-text{color:#ead8bf;font-variant-numeric:tabular-nums}
#commandDock #orders.battle-report .report-tail-text{font-weight:700;white-space:normal;line-height:1.3;max-height:2.6em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:clip;overflow-wrap:anywhere}

/* Reversible thumb reach zones: only two battlefield overlay controls move.
   Dock, header, world coordinates and the left/right scroll positions are untouched. */
#app[data-thumb="left"] #moveUndo{right:auto;left:10px}
#app[data-thumb="left"] .map-tools{left:auto;right:7px}
#thumbControl{margin-top:10px}
#thumbSideToggle{width:100%;min-height:48px;text-align:center}
#thumbSideToggle[aria-pressed="true"]{background:#66516c;border-color:#ccb19b;color:#fff4e8}
@media(max-width:340px){#commandHint .route-risk{font-size:11px}#commandHint{gap:3px;padding-block:6px}}
@media(prefers-reduced-motion:reduce){#app[data-thumb="left"] #moveUndo,#app[data-thumb="left"] .map-tools{transition:none}}
/* Off-screen announced cells: the banner names it and a tap pans there; height stays within the existing 72px cap. */
#forecast[data-jump="1"]{cursor:pointer}
#forecast:not([hidden]){min-height:44px;box-sizing:border-box}
#forecast:focus-visible{outline:2px solid #ffdf9d;outline-offset:-3px}
#forecast .forecast-return{display:inline-block;margin-left:8px;font-weight:800;text-decoration:underline}
#forecast .forecast-jump{display:inline-block;margin-left:8px;padding:0 6px;border:1px solid currentColor;border-radius:4px;font-size:12px;font-weight:800;white-space:nowrap}
#forecast .forecast-jump::before{content:"◎ "}

/* Trial controls never change the fixed battlefield/dock geometry. */
.trial-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:10px 0}
.trial-grid button{min-height:48px;padding:7px 4px;line-height:1.4;font-size:clamp(11px,3.4vw,14px);text-wrap:balance}
#tacticalLabCanvas{display:block;max-width:100%;height:auto!important;margin:0 auto;background:#243746;image-rendering:pixelated}
.direct-sortie{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
#modal:has(#deploymentList){max-height:64dvh;margin-block:auto 12px}
#modal:has(#deploymentList) h2{font-size:20px;margin-bottom:5px}
#modal:has(#deploymentList) p{font-size:12px;line-height:1.5}
#deploymentList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
#deploymentList .sortie-choice{margin:0;min-width:0;gap:5px;padding:5px}
#deploymentList .sortie-choice-icon{flex-basis:26px;font-size:16px}
#deploymentList .sortie-choice-copy{font-size:11px}
@media(max-height:500px) and (min-width:600px){#modal:has(#deploymentList){width:310px;max-height:96dvh;margin:6px 8px 6px auto}}

.sample-preview{display:block}