/* Field command shares the homepage's charcoal, amber and clear typography. */
:root { --bg:#101719; --panel:#152023; --panel2:#202e30; --line:#35484a; --amber:#f4c56f; --amber2:#ffdda0; --text:#eff0e7; --dim:#b3c3bf; --green:#90deb6; --ink:#101719; }
#app, #lab, #gameover, #victory, #settings { font-family:Arial,Helvetica,sans-serif; }
button, select { font:inherit; }
button:focus-visible, select:focus-visible, summary:focus-visible { outline:3px solid #f4c56f; outline-offset:3px; }
.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; }
#hud { background:#10191c; border-bottom:1px solid var(--line); min-height:50px; }
#hud .stat { background:#1a292c; border-color:#334648; border-radius:6px; font-variant-numeric:tabular-nums; }
#hud button { border-radius:6px; min-height:36px; }
#hud #waveTicker { display:none; } /* The readable mission rail owns the preview at every size. */
#missionRail { flex:none; background:#152023; padding:9px 16px; border-bottom:1px solid #35484a; }
.chapter-row { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12px; }
#chapterTitle { color:#f4c56f; letter-spacing:.04em; }
#chapterGoal { color:#b3c3bf; white-space:nowrap; }
#fieldThreat { margin-top:5px; font-size:12px; line-height:1.4; color:#e2ebe7; }
#stage { background:#0d1517; overflow:hidden; min-height:0; }
#btnOverview { display:none; }
#app:not(.in-game) #btnOverview, #app:not(.in-game) #fieldBrief, #app:not(.in-game) #buildUndo, #app:not(.in-game) #towerDock { display:none!important; }
#fieldBrief { position:absolute; z-index:12; bottom:12px; left:50%; transform:translateX(-50%); width:min(560px,calc(100% - 24px)); padding:12px 16px; background:#142326f5; color:#eef5ed; border:1px solid #74836d; border-radius:10px; box-shadow:0 6px 24px #0005; text-align:center; }
#fieldBrief p { font-size:13px; line-height:1.45; }
#skipGuide { border:0; background:transparent; color:#c2d3ca; text-decoration:underline; padding:10px 12px 0; font-size:12px; cursor:pointer; }
#buildUndo { position:absolute; top:12px; left:12px; z-index:13; }
#undoPlacement { padding:10px 12px; border:1px solid #698d85; border-radius:8px; color:#e3f3ea; background:#172b29f2; cursor:pointer; font-size:12px; min-height:40px; }
#shop { width:244px; border-left:1px solid var(--line); padding:12px; gap:12px; }
.armory-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }
#btnArmory { display:none; }
#shop h3 { color:#c0d2c9; font-size:11px; letter-spacing:.12em; }
.shopCard { border:1px solid #3c4f50; border-top-width:3px; border-radius:9px; background:#1e2d30; padding:9px 5px; }
.shopCard.sel { background:#334033; box-shadow:inset 0 0 0 2px #f4c56f; }
.shopCard.locked { opacity:.65; }
.shopCard.cant { opacity:.78; }
.shopCard .nm { font-size:11px; color:#f1f2e8; }
.shopCard .cost { color:#f4c56f; font-size:12px; margin:4px 0; }
.weapon-role { display:block; color:#c4d5cd; font-size:10px; line-height:1.3; min-height:25px; }
#towerPop { width:300px; background:#18282bef; border:1px solid #87947c; border-radius:12px; color:#ecf1e8; box-shadow:0 12px 32px #0007; gap:9px; padding:16px; max-height:calc(100% - 24px); overflow-y:auto; overscroll-behavior:contain; }
#towerPop::after { display:none; }
#tpName { color:#f4c56f; font-size:15px; padding-right:52px; }
#tpRole { color:#b9d5c8; font-size:12px; }
#tpStats { color:#c4d1cb; font-size:11px; line-height:1.5; }
#tpContribution { color:#b4c7bd; font-size:11px; }
#tpUpgradePreview { color:#e7ecdc; font-size:12px; line-height:1.4; }
#towerPop button { border:1px solid #5e7372; border-radius:7px; background:#243a3c; color:#eff3e8; min-height:40px; cursor:pointer; }
#towerPop button:disabled { cursor:default; opacity:.65; }
#towerPop #up_main.can { background:#f4c56f; color:#142023; border-color:#f4c56f; font-weight:700; }
#towerPop #tpClose, #towerPop #tpMute { width:32px; height:32px; min-height:32px; top:8px; }
#towerPop #tpClose { right:8px; }
#towerPop #tpMute { right:44px; }
#tpBranches:empty { display:none; }
#tpBranches > p { font-size:10px; line-height:1.4; color:#d3c7a9; margin:3px 0 8px; }
#tpBranches .branch-choice { display:block; width:100%; text-align:left; padding:10px; margin-top:6px; }
.branch-choice strong, .branch-choice span { display:block; }
.branch-choice strong { font-size:12px; color:#ffdaa0; margin-bottom:4px; }
.branch-choice span { font-size:11px; line-height:1.4; font-weight:400; }
#towerDock { display:none; }
#researchGoal { margin:16px 0; padding:14px; border-radius:10px; border:1px solid #526957; background:#21372f; }
#researchGoal p { font-size:13px; line-height:1.5; margin-bottom:8px; }
#researchGoal progress { width:100%; height:8px; accent-color:#a2deae; }
#researchGoal button { display:block; margin-top:10px; background:#f4c56f; color:#172426; border:0; border-radius:6px; padding:9px 12px; cursor:pointer; }
#labList .labRow.recommended { border-color:#c1c68b; }
#labList section { display:flex; flex-direction:column; gap:9px; }
#labList h3 { font-size:13px; color:#f4c56f; margin:8px 0 4px; }
#labList details { margin-top:18px; border-top:1px solid #425755; padding-top:14px; }
#labList summary { cursor:pointer; color:#c6d8cf; font-size:13px; padding:10px 0; }
#labList details .labRow { margin-top:9px; }
#labList .labRow { background:#1d3032; border-color:#425b59; border-radius:9px; }
#labList .labBuy:not(:disabled) { border-color:#aebd8d; background:#32463a; color:#fff1cf; }
#lab .sub { line-height:1.65; font-size:13px; color:#c4d2ca; }
#defeatDebrief { padding:16px; background:#1d2f31; border:1px solid #526561; border-radius:10px; margin:16px 0; }
#defeatDebrief h3 { color:#f4c56f; font-size:15px; margin-bottom:8px; }
#defeatDebrief p, #defeatDebrief li { font-size:13px; line-height:1.6; }
#defeatDebrief ul { padding-left:20px; margin:10px 0; }
#settings select { background:#26393b; color:#fff1cf; border:1px solid #647972; border-radius:7px; padding:9px; }
@media(max-width:920px) and (orientation:portrait) {
  #hud { flex:none; min-height:78px; gap:4px; padding:5px 8px; }
  #hud .stat { font-size:11px; padding:4px 6px; }
  #hud button { min-height:32px; }
  #hud #hDna, #hud #streakBadge { display:none; }
  #hud #levelTitle { display:none; }
  #missionRail { padding:7px 10px; flex:0 0 76px; overflow:hidden; }
  .chapter-row { font-size:10px; }
  #fieldThreat { font-size:11px; line-height:1.35; min-height:30px; max-height:45px; }
  #main { flex:1; min-height:0; }
  #stage { flex:1; min-height:180px; overflow:hidden; }
  canvas#game { flex:none; height:100%; width:auto; max-width:none; max-height:none; aspect-ratio:16/9; }
  #stage.map-overview canvas#game { width:100%; height:auto; max-height:100%; }
  #btnOverview { display:block; position:absolute; z-index:14; top:9px; left:9px; padding:9px 11px; min-height:36px; border:1px solid #6d8177; border-radius:20px; color:#eff3e8; background:#172a2bdd; font-size:11px; cursor:pointer; }
  #buildUndo { top:54px; left:9px; }
  #fieldBrief { bottom:8px; padding:10px; width:calc(100% - 18px); }
  #fieldBrief p { font-size:12px; }
  #shop { flex:0 0 174px; width:100%; max-height:38dvh; padding:8px; overflow:hidden; gap:6px; border-top:1px solid var(--line); border-left:0; }
  #shop.expanded { flex-basis:300px; overflow-y:auto; }
  #btnArmory { display:block; min-height:32px; padding:6px 10px; border:1px solid #536c64; background:#263c36; color:#f8dfad; border-radius:6px; font-size:11px; cursor:pointer; }
  #shopCards { display:grid; grid-auto-flow:column; grid-auto-columns:104px; grid-template-columns:none; grid-template-rows:1fr; gap:6px; overflow-x:auto; overflow-y:hidden; flex:none; padding-bottom:4px; scrollbar-width:thin; }
  #shop.expanded #shopCards { grid-auto-flow:row; grid-auto-columns:auto; grid-template-columns:repeat(3,minmax(0,1fr)); overflow:visible; }
  #shopCards .shopCard { min-height:106px; padding:6px; }
  .shopCard .ico { height:33px; }
  .shopCard .ico canvas { max-height:33px; }
  .shopCard .nm { font-size:10px; }
  .weapon-role { font-size:9px; min-height:24px; }
  #weaponHoldHint { margin:0; font-size:10px; }
  #shop:not(.expanded) > h3, #shop:not(.expanded) #airCard, #shop:not(.expanded) #omegaCard { display:none; }
  #shop:not(.expanded) .arsenal-open { display:none; }
  #shop:not(.expanded) .shopCard { touch-action:pan-x; }
  #main.has-tower #shop { display:none; }
  #main.has-tower #towerDock { display:block; flex:0 0 auto; max-height:42dvh; min-height:0; overflow:auto; background:#18282b; border-top:1px solid #526861; }
  #towerDock #towerPop { position:relative; width:100%; max-height:none; left:auto!important; top:auto!important; border:0; border-radius:0; box-shadow:none; padding:12px 14px; display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; }
  #towerDock #tpName, #towerDock #tpRole, #towerDock #tpStats, #towerDock #tpContribution, #towerDock #tpBranches { grid-column:1/-1; }
  #towerDock #tpHardware { display:none; }
  #towerDock #tpUpgradePreview { align-self:center; font-size:11px; }
  #towerDock .tpRow { grid-column:1/-1; }
  #towerDock #tpBranches { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
  #towerDock #tpBranches > p { grid-column:1/-1; margin:0; }
  #towerDock #tpBranches .branch-choice { margin:0; }
  #towerDock #tpBranches .branch-choice:only-of-type { grid-column:1/-1; }
  #towerDock #tpClose, #towerDock #tpMute { position:absolute; }
  #towerDock #tpContribution { font-size:10px; }
  #towerDock #tpStats .mast { display:none; }
  #startPrompt { bottom:8px; max-width:calc(100% - 18px); }
}
@media(max-width:920px) and (orientation:portrait) and (max-height:650px) {
  #shop { flex-basis:144px; gap:3px; }
  #weaponHoldHint { display:none; }
  #fieldThreat { min-height:0; }
  #stage { min-height:160px; }
  #fieldBrief p { font-size:11px; }
  #skipGuide { padding-top:5px; }
  #towerDock #tpRole, #towerDock #tpContribution { display:none; }
}
@media(orientation:landscape) and (max-height:560px), (orientation:landscape) and (pointer:coarse) {
  #app { height:100dvh; }
  #app.in-game { padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right); padding-bottom:env(safe-area-inset-bottom); }
  #hud { flex:0 0 48px; min-height:48px; padding:3px 8px; gap:5px; }
  #hud #levelTitle, #hud #hDna, #hud #streakBadge, #speedBtns { display:none; }
  #speedCycle { display:inline-block; }
  #hud .stat { flex:none; font-size:11px; padding:5px 6px; }
  #hud button { min-width:40px; min-height:40px; padding:5px 9px; font-size:11px; }
  #missionRail { display:flex; align-items:center; gap:12px; flex:0 0 24px; height:24px; padding:3px 10px; overflow:hidden; }
  #missionRail .chapter-row { flex:none; font-size:10px; }
  #chapterTitle { display:none; }
  #chapterGoal { display:block; }
  #fieldThreat { min-width:0; font-size:11px; line-height:16px; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #main { position:relative; display:grid; grid-template-columns:minmax(0,1fr)96px; grid-template-rows:minmax(0,1fr); }
  #stage { grid-column:1; grid-row:1; min-height:0; container-type:size; }
  canvas#game { flex:none; width:max(100cqw, calc(100cqh * 16 / 9)); height:auto; max-width:none; max-height:none; }
  #stage.map-overview canvas#game { width:min(100cqw, calc(100cqh * 16 / 9)); height:auto; }
  #shop { grid-column:2; grid-row:1; width:100%; min-height:0; height:100%; padding:4px; gap:4px; border-left:1px solid var(--line); scroll-padding-top:48px; }
  #shop .armory-heading { flex:none; position:sticky; top:0; z-index:2; background:var(--panel); }
  #shop .armory-heading h3, #weaponHoldHint, #shop .hint { display:none; }
  #btnArmory { display:block; width:100%; min-height:40px; padding:6px 3px; border:1px solid #536c64; border-radius:7px; background:#263c36; color:#f8dfad; font-size:11px; cursor:pointer; }
  #shopCards { flex:none; grid-template-columns:1fr; gap:4px; }
  #shopCards .shopCard { min-height:66px; padding:4px 3px; }
  #shopCards .ico, #shopCards .ico canvas { height:26px; }
  #shopCards .ico canvas { width:52px; margin:0 auto; }
  #shopCards .nm { font-size:9px; margin-top:2px; }
  #shopCards .cost { font-size:10px; margin:3px 0 0; }
  #shop:not(.expanded) .weapon-role, #shop:not(.expanded) .arsenal-open, #shop:not(.expanded) > h3, #shop:not(.expanded) #airCard, #shop:not(.expanded) #omegaCard { display:none; }
  #shop.expanded { position:absolute; grid-column:1/-1; z-index:20; inset:0 0 0 auto; width:min(300px,48%); box-shadow:-10px 0 25px #0006; padding:8px; }
  #shop.expanded #shopCards { grid-template-columns:repeat(3,minmax(0,1fr)); }
  #shop.expanded .weapon-role { font-size:9px; min-height:24px; }
  #shop.expanded .shopCard { min-height:100px; }
  #shop.expanded #airCard, #shop.expanded #omegaCard { flex:none; min-height:48px; }
  #main.has-tower { grid-template-columns:minmax(0,1fr)min(280px,44vw); }
  #main.has-tower #shop { display:none; }
  #main.has-tower #towerDock { display:block; grid-column:2; grid-row:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; background:#18282b; border-left:1px solid #526861; }
  #towerDock #towerPop { position:relative; width:100%; max-height:none; left:auto!important; top:auto!important; border:0; border-radius:0; box-shadow:none; padding:12px; gap:9px; }
  #towerDock #tpHardware { display:none; }
  #towerDock #tpName { font-size:13px; padding-right:70px; min-height:32px; }
  #towerDock #tpStats, #towerDock #tpContribution { font-size:10px; }
  #towerDock #tpRole, #towerDock #tpUpgradePreview { font-size:11px; }
  #towerDock #tpClose, #towerDock #tpMute { width:40px; height:40px; min-height:40px; top:7px; }
  #towerDock #tpMute { right:50px; }
  #towerDock #up_main, #towerDock .tpRow button, #towerDock .branch-choice { min-height:44px; }
  #btnOverview { display:block; position:absolute; z-index:14; top:8px; left:8px; min-height:40px; padding:8px 11px; border:1px solid #6d8177; border-radius:20px; color:#eff3e8; background:#172a2bdd; font-size:11px; cursor:pointer; }
  #stage[data-map-art] #zoomBar { padding:3px; gap:4px; }
  #zoomBar .zBtn { width:36px; height:36px; }
  #zoomSlider, #zoomBar .zIcon { display:none; }
  #buildUndo { top:56px; left:8px; }
  #fieldBrief { bottom:8px; width:min(520px,calc(100% - 16px)); padding:5px 10px; display:flex; align-items:center; gap:8px; border-radius:8px; }
  #fieldBrief p { font-size:11px; line-height:1.35; }
  #skipGuide { flex:none; max-width:70px; min-height:40px; padding:4px; font-size:10px; }
  #pausePrompt .pause-title { margin-bottom:6px; }
}
@media(orientation:landscape) and (max-height:560px) and (max-width:700px) {
  #hud { gap:3px; padding:3px 5px; }
  #hud button { padding:5px 6px; }
  #missionRail .chapter-row { display:none; }
}
@media(prefers-reduced-motion:reduce) { #waveTicker .tickWarn { animation:none; } }