/* One battle frame for preparation and combat. The map gets the space;
   headers, controls and the six tower choices form a compact strip around it. */
#campaignView{max-width:1880px;margin-inline:auto}
.campaign-layout,.is-playing .campaign-layout{
  --battle-inspector-width:280px;--battle-gap:16px;
  --battle-map-height:clamp(300px,calc(100dvh - 220px),1000px);
  width:100%;max-width:min(1880px,calc(var(--battle-map-height) * 1.777778 + var(--battle-inspector-width) + var(--battle-gap)));
  margin-inline:auto;grid-template-columns:minmax(0,1fr) var(--battle-inspector-width);gap:var(--battle-gap);align-items:start;
}
.is-playing .campaign-layout{margin-top:8px}
.is-playing .topbar{height:60px}
.is-playing .commander-line,.is-playing footer{display:none}
.is-playing main{padding-bottom:12px}
.campaign-layout .battle-topline{display:flex;align-items:center;min-height:44px;flex-wrap:nowrap}
.campaign-layout .battle-title{flex:1;min-width:0;gap:10px;padding:8px 12px}
.campaign-layout .battle-title .eyebrow{display:none}
.campaign-layout .battle-title h2{font-size:22px;line-height:1.15;margin:0}
.campaign-layout .level-badge{font-size:12px;padding:5px 8px}
.campaign-layout .battle-hud{padding:8px 12px;gap:18px;border-top:0}
.campaign-layout .battle-hud>span{display:flex;flex-direction:row;gap:6px;align-items:center}
.campaign-layout .battle-hud small{font-size:12px;line-height:1.2}
.campaign-layout .battle-hud b{font-size:22px;line-height:1.15}
.campaign-layout .battle-hud #nextWaveValue{display:none}
.campaign-layout .battle-controls{padding:5px 10px;gap:8px;flex-wrap:nowrap;justify-content:flex-end}
.campaign-layout .battle-controls>span{display:none}
.campaign-layout .battle-controls button{min-height:36px;padding:7px 12px;font-size:12px;line-height:1.3}
.campaign-layout .squad-dock{padding-bottom:0}
.campaign-layout .squad-dock .panel-heading{display:none}
.campaign-layout .tower-deck{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(124px,1fr);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;padding:8px 10px;gap:8px}
.campaign-layout .tower-card,.is-playing .tower-card{display:grid;grid-template-columns:42px minmax(0,1fr);grid-template-rows:1fr auto auto;align-items:center;column-gap:6px;row-gap:2px;min-height:88px;height:88px;padding:6px 8px;text-align:left}
.campaign-layout .tower-card .tower-portrait{grid-column:1;grid-row:1/3;width:42px;height:46px;max-width:42px;flex-basis:auto}
.campaign-layout .tower-card .tower-meta{display:contents}
.campaign-layout .tower-card .tower-meta strong{grid-column:2;grid-row:1;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:14px;line-height:1.1;white-space:normal;overflow:hidden}
.campaign-layout .tower-card .tower-meta small{grid-column:1/-1;grid-row:3;display:block;font-size:12px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.campaign-layout .tower-card>b{grid-column:2;grid-row:2;font-size:15px;line-height:1.2}
.campaign-layout .tower-card .dock-index{display:none}
.campaign-layout .tower-card.empty-deck,.is-playing .tower-card.empty-deck{display:flex;justify-content:center;min-height:88px;height:88px;font-size:12px;padding:6px;white-space:nowrap}
.campaign-layout .squad-dock-note{display:none}

/* A compact mission overlay stays inside the map on desktop. */
#startOverlay{position:absolute;inset:0;min-height:0;padding:24px}
#startOverlay>.overlay-emblem{display:none}
#startOverlay>.eyebrow{font-size:12px}
#startOverlay h3{font-size:clamp(28px,2.6vw,44px);line-height:1.1;margin:8px 0}
#startOverlay #startHint{font-size:14px;line-height:1.5;margin:6px 0;max-width:520px}
#startOverlay .deploy-stats{gap:30px;margin:12px 0 18px}
#startOverlay .deploy-stats b{font-size:30px}
#startOverlay .deploy-stats small{font-size:12px}
#startOverlay .primary-button{min-width:220px;min-height:48px;font-size:15px}
#startOverlay .deploy-loadout-note{font-size:12px;margin-top:10px}

/* The details panel has a clear rhythm and leaves the main board dominant. */
.campaign-layout .battle-inspector{position:sticky;top:84px}
.campaign-layout .battle-inspector-heading{display:block;padding:16px 16px 0}
.campaign-layout .battle-inspector-heading h2{font-size:28px;line-height:1.1;margin:8px 0}
.campaign-layout .battle-inspector-heading>.eyebrow{font-size:12px}
.campaign-layout .battle-rarity{font-size:13px}
.campaign-layout .battle-model{height:112px;margin:0}
.campaign-layout .battle-tower-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:12px 8px;margin:0 14px 14px;text-align:center}
.campaign-layout .battle-tower-stats>div{display:flex;flex-direction:column;gap:6px;align-items:center}
.campaign-layout .battle-tower-stats dt{font-size:12px}
.campaign-layout .battle-tower-stats dd{font-size:22px}
.campaign-layout .battle-inspector .selected-controls{padding:0 14px 14px;gap:10px}
.campaign-layout .battle-inspector .selected-controls b{font-size:13px}
.campaign-layout .battle-inspector .selected-controls small{font-size:14px;line-height:1.5}
.campaign-layout .battle-inspector #upgradeTower,.campaign-layout .battle-inspector #sellTower{min-height:42px;padding:10px;font-size:14px}
.campaign-layout .upcoming-wave{padding:12px;margin:0 14px 14px}
.campaign-layout .upcoming-wave-preview{margin-top:10px;gap:6px}
.campaign-layout .upcoming-wave-preview .wave-enemy{min-height:80px;padding:6px}
.campaign-layout .wave-enemy-art{height:36px}
.campaign-layout .field-manual-button{min-height:40px;font-size:13px}
.is-playing .battle-inspector{top:72px;max-height:var(--battle-panel-height,calc(100dvh - 84px));overflow-y:auto;overscroll-behavior:contain}

@media(max-width:1100px){
  .campaign-layout,.is-playing .campaign-layout{max-width:calc(var(--battle-map-height) * 1.777778);grid-template-columns:minmax(0,1fr)}
  .campaign-layout .battle-inspector{position:static;max-height:none;overflow:visible;display:grid;grid-template-columns:minmax(180px,.8fr) minmax(0,1.2fr)}
}
@media(min-width:701px) and (max-width:1100px){
  #startOverlay{padding:16px}
  #startOverlay>#startKicker,#startOverlay #startHint{display:none}
  #startOverlay h3{font-size:30px;margin:8px 0}
  #startOverlay .deploy-stats{margin:8px 0 12px}
  #startOverlay .deploy-stats b{font-size:26px}
  #startOverlay .deploy-stats small{font-size:11px}
  #startOverlay .primary-button{min-height:44px}
  #startOverlay .deploy-loadout-note{font-size:11px;margin-top:6px}
}
@media(max-width:700px){
  .is-playing .topbar{height:56px}
  .campaign-layout .battle-topline{flex-wrap:wrap}
  .campaign-layout .battle-title{flex:1 0 100%;padding:10px 12px}
  .campaign-layout .battle-hud{width:100%;justify-content:space-between;border-top:1px solid #36556e;padding:8px 12px}
  .campaign-layout .battle-hud>span{flex-direction:row;gap:5px}
  .campaign-layout .battle-hud b{font-size:22px}
  .campaign-layout .battle-controls{flex-wrap:wrap;padding:6px 8px}
  .campaign-layout .battle-controls>button{flex:1;min-height:44px;padding:8px;font-size:12px}
  .campaign-layout .tower-deck{grid-auto-columns:150px}
  .campaign-layout .battle-inspector{display:block}
  #startOverlay{position:relative;inset:auto;padding:22px 18px;background:#0d2437;border-top:1px solid #3b5870}
  #startOverlay h3{font-size:30px}
  #startOverlay .deploy-stats{gap:24px}
}
@media(max-height:500px) and (orientation:landscape){
  .campaign-layout,.is-playing .campaign-layout{--battle-map-height:clamp(120px,calc(100dvh - 150px),300px)}
  .is-playing .topbar{display:none}
  .campaign-layout .battle-title{padding:5px 8px;flex:1;min-width:0}
  .campaign-layout .battle-title h2{font-size:16px}
  .campaign-layout .level-badge{display:none}
  .campaign-layout .battle-topline{flex-wrap:nowrap;min-height:34px}
  .campaign-layout .battle-hud{width:auto;padding:5px 8px;gap:8px;border-top:0}
  .campaign-layout .battle-hud small{font-size:10px}
  .campaign-layout .battle-hud b{font-size:16px}
  .campaign-layout .battle-controls{padding:4px 8px;flex-wrap:nowrap}
  .campaign-layout .battle-controls button{flex:1;min-width:0;min-height:36px;padding:4px;font-size:11px;white-space:normal}
  #startOverlay{position:absolute;inset:0;padding:8px;background:#102334d9;border-top:0}
  #startOverlay h3{font-size:22px;margin:4px 0 8px}
  #startOverlay #startHint,#startOverlay>.eyebrow,#startOverlay .deploy-loadout-note{display:none}
  #startOverlay .deploy-stats{gap:22px;margin:0 0 10px}
  #startOverlay .deploy-stats b{font-size:22px}
  #startOverlay .deploy-stats small{font-size:10px}
  #startOverlay .primary-button{min-width:180px;min-height:44px;font-size:13px}
  #pauseOverlay{padding:8px}
  #pauseOverlay>.overlay-symbol,#pauseOverlay>.eyebrow{display:none}
  #pauseOverlay h3{font-size:20px;margin:0 0 8px}
  #pauseOverlay .primary-button{min-width:160px;min-height:44px;padding:8px 12px;font-size:14px}
}
@media(min-width:701px) and (max-width:1100px) and (max-height:500px) and (orientation:landscape){
  .campaign-layout,.is-playing .campaign-layout{--battle-inspector-width:240px;max-width:calc(var(--battle-map-height) * 1.777778 + var(--battle-inspector-width) + var(--battle-gap));grid-template-columns:minmax(0,1fr) var(--battle-inspector-width)}
  .campaign-layout .battle-inspector{display:block;max-height:var(--battle-panel-height,calc(100dvh - 20px));overflow-y:auto;position:sticky;top:8px}
  .campaign-layout .battle-model{height:80px}
  .campaign-layout .battle-inspector-heading h2{font-size:24px}
}