/* ============================================================
   DANGER CLOSE — field-dispatch aesthetic
   The whole UI is the battery commander's table: paper, ink,
   stencil type. Tone variables shift wave by wave (stage-0..7)
   from warm spring paper to cold grey-blue ash.
   ============================================================ */

@font-face {
  font-family: 'Kenney Future Narrow';
  src: url('../assets/fonts/Kenney Future Narrow.ttf') format('truetype');
}
@font-face {
  font-family: 'Kenney Future';
  src: url('../assets/fonts/Kenney Future.ttf') format('truetype');
}
@font-face {
  font-family: 'Kenney Mini';
  src: url('../assets/fonts/Kenney Mini.ttf') format('truetype');
}
@font-face {
  font-family: 'Kenney Pixel';
  src: url('../assets/fonts/Kenney Pixel.ttf') format('truetype');
}

:root {
  /* tone-controlled — overwritten by JS each stage */
  --paper:      #e8d9b0;
  --paper-hi:   #f4e9c8;
  --paper-dim:  #d6c294;
  --ink:        #3a2f1b;
  --ink-faint:  #6b5b3a;
  --accent:     #a33c2a;   /* wax-seal red */
  --table:      #4c4436;   /* the desk under everything */
  --table-deep: #332d22;
  --vignette:   0.25;
  --desk-sat:   1;
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Paint html too — mobile browsers (esp. iOS Safari) otherwise flash a
   default white strip below 100%/100dvh content when the chrome resizes
   or the home-indicator safe area is exposed. */
html {
  height: 100%;
  background-color: var(--table-deep);
}

html, body {
  min-height: 100%;
  min-height: 100dvh;
  min-height: -webkit-fill-available;
  /* Kill double-tap zoom app-wide (canvas already uses touch-action: none).
     manipulation still allows pinch-zoom for accessibility. */
  touch-action: manipulation;
}

body {
  font-family: 'Kenney Mini', monospace;
  height: 100%;
  background:
    radial-gradient(ellipse at 50% 30%, var(--table) 0%, var(--table-deep) 90%);
  background-color: var(--table-deep);
  color: var(--ink);
  overflow: hidden;
  transition: background 2.5s ease;
  filter: saturate(var(--desk-sat));
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* faint woodgrain on the desk */
body::before {
  content: '';
  position: fixed; inset: 0;
  background: repeating-linear-gradient(
    93deg,
    transparent 0 26px,
    rgba(0,0,0,0.05) 26px 28px
  );
  pointer-events: none;
  z-index: 0;
}

#vignette {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 60;
  background: radial-gradient(ellipse at center,
    transparent 45%, rgba(10, 8, 4, var(--vignette)) 100%);
  transition: opacity 2s;
}

/* ---------- screens ---------- */
.screen {
  position: fixed; inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10;
  padding:
    max(8px, var(--safe-top))
    max(8px, var(--safe-right))
    max(8px, var(--safe-bottom))
    max(8px, var(--safe-left));
}
.screen.visible { display: flex; }

/* ---------- shared paper ---------- */
.paper {
  background:
    linear-gradient(160deg, var(--paper-hi) 0%, var(--paper) 55%, var(--paper-dim) 100%);
  border: 2px solid var(--ink-faint);
  outline: 1px solid rgba(0,0,0,0.35);
  outline-offset: 4px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.25) inset,
    0 18px 50px rgba(0,0,0,0.55),
    6px 6px 0 rgba(0,0,0,0.18);
  position: relative;
  transition: background 2.5s ease, border-color 2.5s;
}
.paper::after { /* paper grain */
  content: '';
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(90,70,30,0.03) 3px 4px),
    repeating-linear-gradient(90deg, transparent 0 7px, rgba(90,70,30,0.02) 7px 8px);
  pointer-events: none;
}

/* ---------- buttons ---------- */
.btn-paper {
  font-family: 'Kenney Future Narrow', sans-serif;
  font-size: 22px;
  letter-spacing: 2px;
  padding: 14px 34px;
  color: var(--paper-hi);
  background: linear-gradient(180deg, #7a4a35, #5d3626);
  border: 2px solid #3c2318;
  border-radius: 4px;
  box-shadow: 0 4px 0 #2c1a10, 0 6px 12px rgba(0,0,0,0.4);
  cursor: pointer;
  transition: transform .06s, box-shadow .06s, filter .3s;
  touch-action: manipulation;
}
.btn-paper:hover  { filter: brightness(1.12); }
.btn-paper:active { transform: translateY(3px); box-shadow: 0 1px 0 #2c1a10; }
.btn-paper:disabled { opacity: .45; cursor: default; filter: grayscale(.6); }

.btn-flat {
  font-family: 'Kenney Mini', monospace;
  font-size: 13px;
  padding: 8px 12px;
  background: transparent;
  color: var(--ink-faint);
  border: 1px dashed var(--ink-faint);
  cursor: pointer;
  margin-top: 14px;
  width: 100%;
  touch-action: manipulation;
}
.btn-flat:hover { color: var(--ink); border-color: var(--ink); }
.title-variant-link { display: block; text-decoration: none; }

button, .shell-btn, .upg {
  touch-action: manipulation;
}

/* ============================================================
   SPLASH / LOADING
   ============================================================ */
#screen-splash {
  z-index: 50;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(76, 68, 54, 0.55) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 30%, var(--table) 0%, var(--table-deep) 90%);
  flex-direction: column;
  overflow: hidden;
  transition: opacity 0.85s ease, visibility 0.85s ease;
}
#screen-splash.splash-exit {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.splash-stage {
  position: relative;
  width: min(640px, 92vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 12px;
}

/* faint survey grid behind the mark */
.splash-grid {
  position: absolute;
  inset: -18% -12%;
  background-image:
    linear-gradient(rgba(232, 217, 176, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 217, 176, 0.045) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(ellipse at center, #000 20%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 72%);
  pointer-events: none;
  animation: splash-grid-drift 18s linear infinite;
  opacity: 0;
  animation-name: splash-grid-in, splash-grid-drift;
  animation-duration: 1.2s, 18s;
  animation-timing-function: ease, linear;
  animation-fill-mode: both, none;
  animation-iteration-count: 1, infinite;
}
@keyframes splash-grid-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes splash-grid-drift {
  from { transform: translate(0, 0); }
  to   { transform: translate(-36px, -36px); }
}

/* ranging rings */
.splash-rings {
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(520px, 88vw);
  height: min(520px, 88vw);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.splash-ring {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(232, 217, 176, 0.12);
  border-radius: 50%;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.15);
  animation: splash-ring-pulse 4.5s ease-in-out infinite;
}
.splash-ring.r1 { inset: 18%; animation-delay: 0s; }
.splash-ring.r2 { inset: 8%;  animation-delay: .4s; opacity: .85; }
.splash-ring.r3 { inset: 0;   animation-delay: .8s; opacity: .65; }
@keyframes splash-ring-pulse {
  0%, 100% { border-color: rgba(232, 217, 176, 0.10); transform: scale(1); }
  50%      { border-color: rgba(163, 60, 42, 0.28); transform: scale(1.015); }
}

/* artillery crosshair / aiming plate */
.splash-crosshair {
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(280px, 55vw);
  height: min(280px, 55vw);
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  animation: splash-ch-in 1s ease 0.15s both;
}
@keyframes splash-ch-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(1.12); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.splash-crosshair .ch-h,
.splash-crosshair .ch-v {
  position: absolute;
  background: rgba(232, 217, 176, 0.18);
}
.splash-crosshair .ch-h {
  left: 0; right: 0; top: 50%;
  height: 1px;
  transform: translateY(-50%);
}
.splash-crosshair .ch-v {
  top: 0; bottom: 0; left: 50%;
  width: 1px;
  transform: translateX(-50%);
}
.splash-crosshair .ch-dot {
  position: absolute;
  left: 50%; top: 50%;
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  border: 1.5px solid rgba(163, 60, 42, 0.85);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(163, 60, 42, 0.45);
  animation: splash-dot-pulse 1.6s ease-in-out infinite;
}
@keyframes splash-dot-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.35); opacity: .7; }
}
.splash-crosshair .ch-corner {
  position: absolute;
  width: 18px; height: 18px;
  border-color: rgba(232, 217, 176, 0.35);
  border-style: solid;
  border-width: 0;
}
.splash-crosshair .ch-corner.tl { top: 12%; left: 12%; border-top-width: 2px; border-left-width: 2px; }
.splash-crosshair .ch-corner.tr { top: 12%; right: 12%; border-top-width: 2px; border-right-width: 2px; }
.splash-crosshair .ch-corner.bl { bottom: 12%; left: 12%; border-bottom-width: 2px; border-left-width: 2px; }
.splash-crosshair .ch-corner.br { bottom: 12%; right: 12%; border-bottom-width: 2px; border-right-width: 2px; }

.splash-card {
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: center;
  padding: 8px 8px 4px;
}

.splash-classif {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 18px;
  margin-bottom: 22px;
  opacity: 0;
  animation: splash-rise 0.7s ease 0.2s both;
}
.splash-stamp {
  font-family: 'Kenney Pixel', monospace;
  font-size: 14px;
  letter-spacing: 4px;
  color: var(--accent);
  border: 2px solid var(--accent);
  padding: 4px 14px;
  transform: rotate(-2.2deg);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.25);
  text-shadow: 0 0 18px rgba(163, 60, 42, 0.35);
  animation: splash-stamp 0.55s cubic-bezier(.2, 1.4, .4, 1) 0.55s both;
}
@keyframes splash-stamp {
  0%   { opacity: 0; transform: rotate(-8deg) scale(1.4); }
  70%  { opacity: 1; transform: rotate(-1.4deg) scale(0.96); }
  100% { opacity: 1; transform: rotate(-2.2deg) scale(1); }
}
.splash-order {
  font-family: 'Kenney Pixel', monospace;
  font-size: 13px;
  letter-spacing: 3px;
  color: rgba(232, 217, 176, 0.55);
  text-transform: uppercase;
}

.splash-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 10px;
  font-family: 'Kenney Pixel', monospace;
  font-size: 12px;
  letter-spacing: 2px;
  color: rgba(232, 217, 176, 0.42);
  margin-bottom: 18px;
  opacity: 0;
  animation: splash-rise 0.7s ease 0.35s both;
}
.splash-meta-div { opacity: .35; }

.splash-title {
  margin: 0;
  line-height: 0.9;
  opacity: 0;
  animation: splash-title-in 0.9s cubic-bezier(.2, .9, .3, 1) 0.45s both;
}
.splash-danger,
.splash-close {
  display: block;
  font-family: 'Kenney Future Narrow', sans-serif;
  font-size: clamp(52px, 14vw, 108px);
  letter-spacing: 8px;
  font-weight: normal;
}
.splash-danger {
  color: #f0e2b8;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.35),
    0 8px 28px rgba(0, 0, 0, 0.55),
    0 0 40px rgba(240, 226, 184, 0.08);
}
.splash-close {
  color: var(--accent);
  letter-spacing: 14px;
  margin-top: 2px;
  text-shadow:
    0 2px 0 rgba(60, 18, 12, 0.55),
    0 0 30px rgba(163, 60, 42, 0.45),
    0 10px 36px rgba(0, 0, 0, 0.5);
  animation: splash-close-glow 2.8s ease-in-out 1.2s infinite;
}
@keyframes splash-title-in {
  from { opacity: 0; transform: translateY(18px) scale(0.96); letter-spacing: 14px; }
  to   { opacity: 1; transform: none; }
}
@keyframes splash-close-glow {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.18); }
}

.splash-tag {
  font-family: 'Kenney Future', sans-serif;
  font-size: clamp(11px, 2.8vw, 15px);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(232, 217, 176, 0.58);
  margin-top: 16px;
  opacity: 0;
  animation: splash-rise 0.7s ease 0.7s both;
}

.splash-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 22px auto 26px;
  width: min(320px, 70%);
  opacity: 0;
  animation: splash-rise 0.7s ease 0.85s both;
}
.splash-rule-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 217, 176, 0.45), transparent);
}
.splash-rule-pip {
  width: 7px; height: 7px;
  border: 1.5px solid rgba(163, 60, 42, 0.8);
  transform: rotate(45deg);
  box-shadow: 0 0 10px rgba(163, 60, 42, 0.35);
}

.splash-load {
  width: min(360px, 88%);
  margin: 0 auto;
  opacity: 0;
  animation: splash-rise 0.7s ease 1s both;
}
.splash-load-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
  font-family: 'Kenney Pixel', monospace;
  font-size: 13px;
  letter-spacing: 2px;
  color: rgba(232, 217, 176, 0.7);
}
#splash-pct {
  color: rgba(232, 217, 176, 0.95);
  font-variant-numeric: tabular-nums;
  min-width: 3ch;
  text-align: right;
}
#splash-status {
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.splash-bar {
  position: relative;
  height: 10px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.28));
  border: 1px solid rgba(232, 217, 176, 0.28);
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
.splash-fill {
  height: 100%;
  width: 0%;
  background:
    linear-gradient(180deg, #c4553a 0%, var(--accent) 45%, #6e2418 100%);
  box-shadow:
    0 0 12px rgba(163, 60, 42, 0.55),
    inset 0 1px 0 rgba(255, 200, 160, 0.25);
  transition: width 0.18s linear;
  position: relative;
}
.splash-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 230, 190, 0.18) 50%,
    transparent 100%
  );
  background-size: 48px 100%;
  animation: splash-sheen 1.1s linear infinite;
}
@keyframes splash-sheen {
  from { background-position: -48px 0; }
  to   { background-position: 48px 0; }
}
.splash-bar-ticks {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 9%,
    rgba(0, 0, 0, 0.18) 9% 10%
  );
  pointer-events: none;
}
.splash-coords {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-family: 'Kenney Pixel', monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: rgba(232, 217, 176, 0.32);
}

.splash-retry {
  width: min(360px, 88%);
  margin: 18px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  animation: splash-rise 0.45s ease both;
}
.splash-error {
  margin: 0;
  max-width: 100%;
  font-family: 'Kenney Pixel', monospace;
  font-size: 12px;
  letter-spacing: 1px;
  line-height: 1.45;
  color: rgba(232, 170, 140, 0.88);
  text-align: center;
  word-break: break-word;
}
#screen-splash.splash-failed .splash-fill {
  background:
    linear-gradient(180deg, #a84a3a 0%, #6e2418 50%, #3a1510 100%);
  box-shadow:
    0 0 12px rgba(163, 60, 42, 0.4),
    inset 0 1px 0 rgba(255, 160, 120, 0.15);
  transition: none;
}
#screen-splash.splash-failed .splash-fill::after {
  animation: none;
  opacity: 0;
}
#screen-splash.splash-failed #splash-status {
  color: rgba(232, 170, 140, 0.95);
}
#btn-retry {
  font-size: 16px;
  padding: 12px 28px;
  letter-spacing: 2px;
}

.splash-foot {
  position: relative;
  z-index: 2;
  margin-top: 28px;
  font-family: 'Kenney Pixel', monospace;
  font-size: 12px;
  letter-spacing: 1.5px;
  color: rgba(232, 217, 176, 0.28);
  text-align: center;
  opacity: 0;
  animation: splash-rise 0.8s ease 1.2s both;
}

#screen-splash.splash-ready .splash-fill {
  background:
    linear-gradient(180deg, #8aab5c 0%, #5c7040 50%, #3d4d2a 100%);
  box-shadow:
    0 0 14px rgba(92, 112, 64, 0.55),
    inset 0 1px 0 rgba(220, 240, 180, 0.25);
}
#screen-splash.splash-ready .splash-close {
  animation: none;
  filter: brightness(1.1);
}
#screen-splash.splash-ready .ch-dot {
  border-color: rgba(125, 148, 85, 0.95);
  box-shadow: 0 0 14px rgba(125, 148, 85, 0.5);
}

@keyframes splash-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 480px) {
  .splash-danger,
  .splash-close {
    letter-spacing: 4px;
  }
  .splash-close { letter-spacing: 6px; }
  .splash-classif { flex-direction: column; gap: 10px; }
  .splash-foot { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .splash-grid,
  .splash-ring,
  .splash-crosshair,
  .splash-classif,
  .splash-stamp,
  .splash-meta,
  .splash-title,
  .splash-close,
  .splash-tag,
  .splash-rule,
  .splash-load,
  .splash-foot,
  .splash-fill::after,
  .splash-crosshair .ch-dot {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .splash-crosshair { transform: translate(-50%, -50%); }
  #screen-splash { transition: opacity 0.2s ease; }
}

/* ============================================================
   TITLE
   ============================================================ */
.title-card {
  width: min(560px, 92vw);
  max-height: min(92vh, 100%);
  overflow: auto;
  padding: 48px 52px 36px;
  text-align: center;
  transform: rotate(-0.6deg);
}
.title-stamp {
  font-family: 'Kenney Pixel', monospace;
  font-size: 15px;
  letter-spacing: 4px;
  color: var(--accent);
  border: 2px solid var(--accent);
  display: inline-block;
  padding: 3px 12px;
  transform: rotate(1.6deg);
  opacity: .85;
  margin-bottom: 18px;
}
.title-word {
  font-family: 'Kenney Future Narrow', sans-serif;
  font-size: clamp(48px, 12vw, 96px);
  line-height: .92;
  letter-spacing: 6px;
  color: var(--ink);
  text-shadow: 3px 3px 0 rgba(0,0,0,0.12);
}
.title-sub {
  font-family: 'Kenney Future', sans-serif;
  font-size: 15px;
  letter-spacing: 3px;
  margin-top: 10px;
  color: var(--ink-faint);
  text-transform: uppercase;
}
.title-rule {
  height: 2px; background: var(--ink-faint);
  margin: 22px 60px; opacity: .5;
}
.title-brief {
  font-size: 15px;
  line-height: 1.65;
  text-align: left;
  color: var(--ink);
}
.title-howto {
  list-style: none;
  text-align: left;
  margin: 16px 0 26px;
  font-size: 13px;
  line-height: 2;
  color: var(--ink-faint);
}
.title-howto b { color: var(--ink); }
.title-foot {
  margin-top: 18px;
  font-family: 'Kenney Pixel', monospace;
  font-size: 13px;
  color: var(--ink-faint);
  letter-spacing: 1px;
}

/* ============================================================
   GAME LAYOUT (desktop default)
   ============================================================ */
#screen-game {
  align-items: stretch;
  padding: 0;
  /* Match desk so any sub-pixel / safe-area gap never reads as white */
  background-color: var(--table-deep);
}

#game-layout {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr) 250px;
  grid-template-rows: 1fr;
  gap: 18px;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding:
    max(18px, var(--safe-top))
    max(22px, var(--safe-right))
    max(18px, var(--safe-bottom))
    max(22px, var(--safe-left));
  position: relative;
}

/* mobile chrome — hidden on desktop */
#combat-top,
#combat-dock {
  display: none;
}

.drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.drawer-head .panel-title {
  flex: 1;
  margin-bottom: 10px;
}
.drawer-close {
  display: none;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin: -6px -4px 0 0;
  font-size: 18px;
  line-height: 1;
  color: var(--ink-faint);
  background: transparent;
  border: 1px solid var(--ink-faint);
  border-radius: 4px;
  cursor: pointer;
}
.drawer-close:hover { color: var(--ink); border-color: var(--ink); }

#drawer-scrim {
  display: none;
}

.side-panel {
  align-self: center;
  max-height: 94vh;
  overflow: hidden auto;
  background: linear-gradient(170deg, var(--paper) 0%, var(--paper-dim) 100%);
  border: 2px solid var(--ink-faint);
  box-shadow: 5px 6px 0 rgba(0,0,0,0.22), 0 14px 30px rgba(0,0,0,0.35);
  padding: 16px 14px;
  transition: background 2.5s;
}
#panel-log { transform: rotate(-0.5deg); }
#panel-battery { transform: rotate(0.4deg); }

.panel-title {
  font-family: 'Kenney Future Narrow', sans-serif;
  font-size: 17px;
  letter-spacing: 3px;
  color: var(--ink);
  border-bottom: 2px solid var(--ink-faint);
  padding-bottom: 6px;
  margin-bottom: 10px;
}
.panel-title:not(:first-child) { margin-top: 18px; }
#shell-block .panel-title { margin-top: 18px; }

/* -------- signals log -------- */
#log-entries {
  display: flex;
  flex-direction: column-reverse; /* newest at top */
  gap: 6px;
  min-height: 200px;
  max-height: 72vh;
}
.log-entry {
  font-size: 12px;
  line-height: 1.45;
  padding: 6px 8px;
  background: rgba(255,255,255,0.28);
  border-left: 3px solid var(--ink-faint);
  animation: slip-in .35s ease both;
}
.log-entry.grim  { border-left-color: var(--accent); color: #5c2018; background: rgba(163,60,42,0.10); }
.log-entry.good  { border-left-color: #5c7040; }
.log-entry.draft {
  border-left-color: var(--ink-faint);
  opacity: 0.92;
  font-size: 11px;
  line-height: 1.4;
  padding-top: 4px;
  padding-bottom: 4px;
}
.log-entry .t {
  font-family: 'Kenney Pixel', monospace;
  color: var(--ink-faint);
  margin-right: 6px;
  font-size: 11px;
}
@keyframes slip-in {
  from { transform: translateX(-14px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* -------- field -------- */
#field-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
}
#field-frame {
  position: relative;
  /* desktop: fit height, leave room for side panels (~480px chrome) */
  height: min(90vh, calc((100vw - 520px) * 1.3333), 860px);
  max-width: 100%;
  aspect-ratio: 3 / 4;
  background: #111;
  border: 10px solid #f2ecd8;             /* photo print border */
  outline: 1px solid rgba(0,0,0,0.6);
  box-shadow: 0 22px 55px rgba(0,0,0,0.65), 4px 4px 0 rgba(0,0,0,0.25);
  transform: rotate(0.3deg);
  transition: border-color 2.5s;
}
#field {
  width: 100%; height: 100%;
  display: block;
  image-rendering: auto;
  cursor: crosshair;
  touch-action: none;
  user-select: none;
}
#field-caption {
  margin-top: 10px;
  width: min(100%, 660px);
  padding: 7px 10px 9px;
  color: #f4e9c8;
  background: rgba(18,14,10,.82);
  border: 1px solid rgba(244,233,200,.32);
  box-shadow: 0 5px 14px rgba(0,0,0,.35);
}
.line-status-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: 'Kenney Pixel', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  line-height: 1;
}
.line-status-track {
  height: 9px;
  margin-top: 5px;
  background: rgba(40,32,22,.95);
  border: 1px solid rgba(0,0,0,.65);
  overflow: hidden;
}
#line-status-fill {
  width: 100%; height: 100%;
  transition: width .18s ease, background-color .18s linear;
  box-shadow: inset 0 2px rgba(255,255,220,.2);
}
#field-caption.critical { animation: line-critical .8s ease-in-out infinite alternate; }
@keyframes line-critical { to { border-color: rgba(210,70,48,.8); } }

/* -------- weighted wave progress (responsive top chrome) -------- */
#wave-progress { width: 100%; min-width: 0; }
#wave-progress-label {
  margin-bottom: 4px;
  font-family: 'Kenney Future Narrow', sans-serif;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 2px;
  color: var(--ink);
}
#wave-progress-track {
  display: flex;
  width: 100%; height: 17px;
  overflow: hidden;
  background: rgba(50,25,20,.2);
  border: 1px solid var(--ink-faint);
  transform-origin: center;
}
.wave-segment {
  flex: 0 0 calc(var(--segment-weight) * 100% / var(--wave-total-weight, 1));
  width: calc(var(--segment-weight) * 100% / var(--wave-total-weight, 1));
  min-width: 0;
  background: #b43c31;
  border-right: 1px solid rgba(55,10,8,.7);
  box-shadow: inset 0 3px rgba(255,190,170,.12);
  transition: flex-basis .22s cubic-bezier(.4,0,.2,1), width .22s cubic-bezier(.4,0,.2,1), opacity .16s;
}
.wave-segment.type-officer { background: #a6342b; }
.wave-segment.type-mortar { background: #922c25; }
.wave-segment.type-mg { background: #7e241f; }
.wave-segment.type-tank { background: #681c19; }
.wave-segment.resolved { flex-basis: 0; width: 0; border-width: 0; opacity: 0; }
#wave-progress-track.impact-ordinary { animation: wave-pulse .24s ease-out; }
#wave-progress-track.impact-specialist { animation: wave-specialist .34s ease-out; }
#wave-progress-track.impact-tank { animation: wave-tank .48s ease-out; }
@keyframes wave-pulse { 45% { filter: brightness(1.4); } }
@keyframes wave-specialist {
  25% { transform: translateX(-3px); filter: brightness(1.75); }
  50% { transform: translateX(3px); }
  75% { transform: translateX(-1px); }
}
@keyframes wave-tank {
  15% { transform: translateX(-6px); filter: brightness(2.25); }
  32% { transform: translateX(6px); }
  49% { transform: translateX(-4px); }
  68% { transform: translateX(3px); }
}
}

#wave-banner {
  position: absolute;
  top: 38%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Kenney Future Narrow', sans-serif;
  font-size: clamp(22px, 6vw, 44px);
  letter-spacing: 8px;
  color: #f4e9c8;
  text-shadow: 0 3px 0 rgba(0,0,0,.6), 0 0 26px rgba(0,0,0,.9);
  pointer-events: none;
  animation: banner 2.6s ease both;
  text-align: center;
  white-space: nowrap;
}
@keyframes banner {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(1.15); }
  15%  { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}

#dc-warning {
  position: absolute;
  bottom: 26%;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Kenney Future Narrow', sans-serif;
  font-size: clamp(12px, 3.5vw, 20px);
  letter-spacing: 4px;
  color: #ffd2a0;
  background: rgba(120, 30, 16, 0.82);
  padding: 5px 18px;
  border: 1px solid #ffb37a;
  pointer-events: none;
  animation: dc-blink .5s steps(2) infinite;
  white-space: nowrap;
}
@keyframes dc-blink { 50% { opacity: .35; } }
.hidden { display: none !important; }

.difficulty-select { margin: 16px 0; border: 1px solid rgba(65,55,38,.35); display: grid; gap: 6px; padding: 10px; }
.difficulty-select legend { font: 12px "Kenney Future Narrow", sans-serif; letter-spacing: .12em; }
.difficulty-select label { display: grid; grid-template-columns: auto 90px 1fr; align-items: center; gap: 7px; font-size: 12px; }
.difficulty-select small { opacity: .65; }
.campaign-select { margin: 14px 0 10px; border: 1px solid rgba(65,55,38,.35); padding: 9px; }
.campaign-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.campaign-card { min-width: 0; padding: 8px 5px; border: 1px solid rgba(58,47,27,.35); background: rgba(255,255,255,.12); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.campaign-card strong, .campaign-card small { display: block; }
.campaign-card small { margin-top: 3px; font-size: 9px; color: var(--faint); }
.campaign-card.selected { outline: 2px solid #795f2d; background: rgba(121,95,45,.15); }
.campaign-card.locked { opacity: .5; cursor: not-allowed; }
.campaign-detail { min-height: 58px; margin-top: 8px; font-size: 10px; line-height: 1.35; }
.campaign-detail b { font-size: 11px; }
.campaign-feats { margin-top: 4px; color: var(--faint); }
.ironman-order { display: block; margin: 8px 0; font-size: 11px; }
.ironman-order small { display: block; margin-left: 20px; color: var(--faint); }
@media (max-width: 620px) { .campaign-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.observer-orders { border-top: 1px solid rgba(220,195,126,.25); margin-top: 14px; padding-top: 12px; }
.observer-orders select, .spotter-row select { width: 100%; background: #29251d; color: #e7dbb8; border: 1px solid #746747; padding: 6px; }
#observer-guns { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: 8px 0; font-size: 11px; }
#observer-shells { display: flex; gap: 4px; margin: 8px 0; }
#observer-shells .shell-btn { min-width: 0; flex: 1; padding: 6px 2px; }
#observer-status { font-size: 10px; line-height: 1.5; opacity: .75; margin-top: 7px; }
.observation-setup { position: fixed; inset: 0; z-index: 65; pointer-events: none; background: rgba(10,12,9,.18); }
.observation-setup-head { pointer-events: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; color: #eee2be; background: rgba(25,25,20,.94); border-bottom: 2px solid #9f8244; }
.observation-setup-head h2 { margin: 3px 0 0; font: 20px "Kenney Future Narrow", sans-serif; letter-spacing: .14em; }
.observation-setup-actions { display: flex; gap: 8px; }
.observation-setup-message { position: absolute; top: 82px; left: 50%; transform: translateX(-50%); max-width: min(540px, 70vw); padding: 7px 12px; color: #f3e7c3; background: rgba(25,25,20,.88); border: 1px solid #8e7440; font-size: 11px; text-align: center; }
.observation-setup-message.rejected { color: #ffd0c5; border-color: #b94b3d; }
.observation-setup-cards { pointer-events: auto; position: absolute; top: 78px; right: 12px; bottom: 12px; width: min(340px, 34vw); overflow: auto; padding: 8px; background: rgba(28,27,22,.95); border: 1px solid #8e7440; color: #e9ddba; }
.observer-setup-card { margin-bottom: 8px; padding: 10px; border: 1px solid #665b40; background: rgba(255,255,255,.04); }
.observer-setup-card.selected { border: 2px solid #d6b65e; background: rgba(214,182,94,.09); }
.observer-setup-card h3 { margin: 0 0 3px; font: 14px "Kenney Future Narrow", sans-serif; letter-spacing: .08em; }
.observer-setup-card .observer-meta { font-size: 9px; line-height: 1.45; opacity: .78; }
.observer-setup-card fieldset { margin: 8px 0 0; padding: 6px; border: 1px solid #5c533d; }
.observer-setup-card label { display: block; padding: 3px 0; font-size: 10px; }
.observer-setup-card label.disabled { opacity: .45; }
.observer-setup-card small { display: block; margin-left: 20px; color: #d0b87c; }
.observer-shell-row { display: flex; gap: 4px; }
.observer-shell-row button { flex: 1; min-width: 0; padding: 5px 2px; }
body.observation-setup-active #panel-log, body.observation-setup-active #panel-battery, body.observation-setup-active #combat-dock { opacity: .22; pointer-events: none; }
body.observation-setup-active #field { cursor: crosshair; touch-action: none; }
@media (max-width: 760px) {
  .observation-setup-head { padding: 7px 9px; }
  .observation-setup-head h2 { font-size: 16px; }
  .observation-setup-actions button { padding: 6px; font-size: 9px; }
  .observation-setup-message { top: 62px; left: 8px; right: 8px; max-width: none; transform: none; }
  .observation-setup-cards { top: auto; left: 6px; right: 6px; bottom: 6px; width: auto; max-height: 38vh; display: flex; overflow-x: auto; overflow-y: hidden; }
  .observer-setup-card { flex: 0 0 min(310px, 83vw); overflow-y: auto; }
}
.gun-card.assigned { border-color: #c59f4e; box-shadow: inset 3px 0 #c59f4e; }
.spotter-dispatch { margin-top: 18px; border-top: 2px solid rgba(69,56,37,.35); padding-top: 10px; }
.spotter-row { display: grid; grid-template-columns: 1fr auto; gap: 6px; padding: 7px 0; border-bottom: 1px solid rgba(69,56,37,.18); }
.spotter-row div { display: flex; flex-direction: column; }
.spotter-row small { opacity: .65; font-size: 10px; }
.spotter-row select { grid-column: 1 / -1; background: rgba(55,46,33,.9); }
.tutorial-actions { display: flex; flex-wrap: wrap; gap: 8px; }
#spotter-tutorial.tutorial-coach { pointer-events: none; align-items: flex-start; justify-content: flex-start; padding: 72px 12px 12px; }
#spotter-tutorial.tutorial-coach .draft-scrim { display: none; }
#spotter-tutorial.tutorial-coach .draft-card { pointer-events: auto; width: min(330px, calc(100vw - 24px)); margin: 0; }

/* -------- battery panel -------- */
#gun-cards { display: flex; flex-direction: column; gap: 8px; }
.gun-card {
  background: rgba(255,255,255,0.3);
  border: 1px solid var(--ink-faint);
  padding: 8px 10px;
  position: relative;
}
.gun-card .gname {
  font-family: 'Kenney Future Narrow', sans-serif;
  font-size: 14px;
  letter-spacing: 2px;
}
.gun-card .gstat {
  font-family: 'Kenney Pixel', monospace;
  font-size: 11px;
  color: var(--ink-faint);
  margin-top: 2px;
}
.reload-track {
  height: 8px;
  margin-top: 6px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(0,0,0,0.3);
}
.reload-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(180deg, #b8873e, #8f6425);
  transition: width .12s linear;
}
.gun-card.ready .reload-fill { background: linear-gradient(180deg, #7d9455, #5c7040); }
.gun-card.ready::after {
  content: 'READY';
  position: absolute;
  top: 8px; right: 10px;
  font-family: 'Kenney Pixel', monospace;
  font-size: 11px;
  color: #47562f;
}

/* -------- shell selector -------- */
#shell-select { display: flex; gap: 6px; }
.shell-btn {
  flex: 1;
  font-family: 'Kenney Mini', monospace;
  font-size: 12px;
  padding: 8px 4px;
  min-height: 44px;
  background: rgba(255,255,255,0.25);
  border: 1px solid var(--ink-faint);
  color: var(--ink-faint);
  cursor: pointer;
  text-align: center;
}
.shell-btn .key {
  display: block;
  font-family: 'Kenney Pixel', monospace;
  font-size: 10px;
  opacity: .7;
}
.shell-btn.sel {
  background: var(--ink);
  color: var(--paper-hi);
  border-color: var(--ink);
}
.shell-btn.locked { opacity: .35; cursor: default; }

.btn-fire-all {
  display: block;
  width: 100%;
  margin-top: 8px;
  min-height: 44px;
  font-family: 'Kenney Future Narrow', sans-serif;
  font-size: 14px;
  letter-spacing: 2px;
  padding: 10px 12px;
  color: var(--ink-faint);
  background: rgba(255,255,255,0.2);
  border: 2px solid var(--ink-faint);
  cursor: pointer;
  touch-action: manipulation;
}
.btn-fire-all:hover { color: var(--ink); border-color: var(--ink); }
.btn-fire-all[aria-pressed="true"] {
  color: var(--paper-hi);
  background: var(--accent);
  border-color: #6e2418;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.25) inset;
}

/* -------- counters -------- */
#counters {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.counter {
  text-align: center;
  border: 1px solid var(--ink-faint);
  padding: 8px 4px;
  background: rgba(255,255,255,0.22);
}
.counter-label {
  display: block;
  font-family: 'Kenney Pixel', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--ink-faint);
}
.counter-num {
  font-family: 'Kenney Future Narrow', sans-serif;
  font-size: 30px;
  color: var(--ink);
}
.counter.small .counter-num { font-size: 20px; }
#c-ours { color: var(--accent); }

/* ============================================================
   DISPATCH
   ============================================================ */
.dispatch-card {
  width: min(880px, 94vw);
  max-height: min(92vh, 100%);
  overflow: auto;
  padding: 34px 40px;
  transform: rotate(0.35deg);
}
.dispatch-head { position: relative; margin-bottom: 18px; }
.dispatch-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin: -4px 0 20px;
}
.dispatch-stats div {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 7px 5px;
  text-align: center;
  background: rgba(255,255,255,.25);
  border: 1px solid var(--ink-faint);
}
.dispatch-stats span { font-family: 'Kenney Future Narrow', sans-serif; font-size: 22px; color: var(--ink); }
.dispatch-stats label {
  font-family: 'Kenney Pixel', monospace;
  font-size: 8px;
  line-height: 1.2;
  color: var(--ink-faint);
}
.stamp {
  position: absolute;
  right: -6px; top: -10px;
  font-family: 'Kenney Pixel', monospace;
  font-size: 14px;
  letter-spacing: 3px;
  color: var(--accent);
  border: 2px solid var(--accent);
  padding: 4px 10px;
  transform: rotate(6deg);
  opacity: .8;
}
#dispatch-title {
  font-family: 'Kenney Future Narrow', sans-serif;
  font-size: clamp(20px, 5vw, 30px);
  letter-spacing: 4px;
  border-bottom: 2px solid var(--ink-faint);
  padding-bottom: 10px;
  padding-right: 70px;
}
.dispatch-cols {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 30px;
}
#dispatch-report {
  font-size: 14px;
  line-height: 1.8;
  white-space: pre-line;
  min-height: 120px;
}
.typed::after {
  content: '\258B';
  animation: caret 1s steps(2) infinite;
  color: var(--ink-faint);
}
.typed.done::after { content: none; }
@keyframes caret { 50% { opacity: 0; } }

.letter {
  margin-top: 18px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.35);
  border: 1px solid var(--ink-faint);
  font-size: 13px;
  line-height: 1.75;
  font-style: italic;
  white-space: pre-line;
  transform: rotate(-0.4deg);
}
.letter:empty { display: none; }

#roll-honour { margin-top: 18px; }
#roll-honour h3, .dispatch-right h3 {
  font-family: 'Kenney Future Narrow', sans-serif;
  font-size: 15px;
  letter-spacing: 3px;
  color: var(--ink-faint);
  margin-bottom: 8px;
}
#roll-names {
  font-family: 'Kenney Pixel', monospace;
  font-size: 13px;
  line-height: 1.8;
  color: var(--ink-faint);
  columns: 2;
  max-height: 180px;
  overflow: auto;
}
#roll-names .cause { opacity: .6; font-size: 11px; }
#roll-names .bio {
  opacity: .55;
  font-size: 10px;
  line-height: 1.35;
  margin: 0 0 4px 0;
  font-style: italic;
}
#roll-names .own { color: var(--accent); }

/* -------- draft dossier (reinforcements popup) -------- */
.draft-modal {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(12px, var(--safe-top)) max(12px, var(--safe-right)) max(12px, var(--safe-bottom)) max(12px, var(--safe-left));
}
.draft-modal.hidden { display: none; }
.draft-scrim {
  position: absolute;
  inset: 0;
  background: rgba(20, 16, 10, 0.62);
  backdrop-filter: blur(2px);
}
.draft-card {
  position: relative;
  z-index: 1;
  width: min(520px, 96vw);
  max-height: min(88vh, 100%);
  overflow: auto;
  padding: 26px 28px 22px;
  transform: rotate(-0.4deg);
  animation: draft-slip .4s ease both;
}
@keyframes draft-slip {
  from { transform: rotate(-0.4deg) translateY(18px); opacity: 0; }
  to   { transform: rotate(-0.4deg) translateY(0); opacity: 1; }
}
.draft-head {
  position: relative;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--ink-faint);
  padding-right: 72px;
}
.draft-stamp { top: -4px; right: 0; }
#draft-title {
  font-family: 'Kenney Future Narrow', sans-serif;
  font-size: clamp(18px, 4.5vw, 26px);
  letter-spacing: 3px;
}
.draft-sub {
  margin-top: 6px;
  font-size: 12px;
  color: var(--ink-faint);
  letter-spacing: 0.5px;
}
.observer-transaction { margin: 0 0 18px; }
.observer-transaction div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--ink-faint);
}
.observer-transaction dt, .observer-transaction dd { margin: 0; }
.observer-transaction dd { font-family: 'Kenney Future Narrow', sans-serif; letter-spacing: 1px; }
.observer-transaction-total { font-weight: 700; border-bottom-width: 2px !important; }
.observer-confirm-actions { display: flex; justify-content: flex-end; gap: 10px; }
.draft-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}
.draft-man {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  align-items: start;
  padding: 8px 10px;
  background: rgba(255,255,255,0.22);
  border: 1px solid rgba(0,0,0,0.12);
  border-left: 3px solid var(--ink-faint);
}
.draft-portrait {
  width: 64px;
  height: 64px;
  object-fit: cover;
  object-position: center top;
  border: 1px solid var(--ink-faint);
  box-shadow: 1px 1px 0 rgba(0,0,0,0.18);
  /* Print aging escalates with the war — faces stay dignified; the silvering fades. */
  filter: grayscale(1) contrast(1.05) sepia(0.18) brightness(1);
  background: var(--paper-dim);
}
.draft-portrait.wear-mid {
  filter: grayscale(1) contrast(1.1) sepia(0.28) brightness(0.94);
  border-color: color-mix(in srgb, var(--ink-faint) 80%, #3a3428);
}
.draft-portrait.wear-late {
  filter: grayscale(1) contrast(1.16) sepia(0.36) brightness(0.86);
  border-color: color-mix(in srgb, var(--ink-faint) 55%, #2a2620);
  box-shadow: 1px 1px 0 rgba(0,0,0,0.28);
}
#draft-modal[data-wear="mid"] .draft-sub { opacity: 0.9; }
#draft-modal[data-wear="late"] .draft-sub { opacity: 0.85; font-style: italic; }
.draft-man-name {
  font-family: 'Kenney Future Narrow', sans-serif;
  font-size: 14px;
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.draft-man-bio {
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-faint);
  font-style: italic;
}
#btn-draft-close {
  width: 100%;
}

/* -------- company roster (dispatch dossier) -------- */
.roster-card {
  width: min(560px, 96vw);
  max-height: min(90vh, 100%);
}
.roster-list {
  max-height: min(58vh, 520px);
  overflow: auto;
  padding-right: 4px;
}
.roster-section {
  font-family: 'Kenney Future Narrow', sans-serif;
  font-size: 13px;
  letter-spacing: 3px;
  color: var(--ink-faint);
  margin: 6px 0 4px;
  border-bottom: 1px solid var(--ink-faint);
  padding-bottom: 4px;
}
.roster-section:first-child { margin-top: 0; }
.roster-stats {
  font-family: 'Kenney Pixel', monospace;
  font-size: 12px;
  letter-spacing: 0.3px;
  color: var(--ink);
  margin-bottom: 4px;
  opacity: 0.88;
}
.roster-cause {
  margin-top: 4px;
  font-size: 11px;
  color: var(--accent, #8b3a2a);
  opacity: 0.9;
  font-style: italic;
}
.roster-man.fallen {
  opacity: 0.72;
  border-left-color: color-mix(in srgb, var(--ink-faint) 50%, #6a3028);
}
.roster-man.fallen .draft-portrait {
  filter: grayscale(1) contrast(1.08) sepia(0.4) brightness(0.78);
}
.roster-empty {
  font-size: 13px;
  color: var(--ink-faint);
  font-style: italic;
  padding: 12px 4px;
}
.btn-roster {
  width: 100%;
  margin-bottom: 10px;
  opacity: 0.92;
}
#btn-roster-close { width: 100%; }

#upgrade-list { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }

/* Development H.Q. is intentionally a separate, formation-scale surface. */
.development-card { width: min(1120px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; margin: 16px auto; padding: 24px; color: var(--ink); }
.development-head { position: sticky; top: -24px; z-index: 8; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 4px 14px; background: var(--paper, #d8c9a5); border-bottom: 2px solid rgba(69,56,37,.35); }
.development-head h2 { margin: 5px 0 0; letter-spacing: .16em; }
.development-balance { font-family: 'Kenney Future Narrow', sans-serif; font-size: 24px; text-align: right; }
.development-balance small { display: block; font: 10px 'Kenney Pixel', sans-serif; opacity: .65; }
.feature-announcement { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 18px 0; padding: 12px; border: 2px solid #8b2720; background: rgba(139,39,32,.08); }
.feature-announcement.empty { display: none; }
.feature-announcement span { display: block; margin-top: 4px; opacity: .7; }
.development-trees { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.tree-card,.quartermaster-card { min-width: 0; padding: 14px; border: 2px solid rgba(69,56,37,.35); background: rgba(255,255,255,.16); }
.tree-card header { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.tree-card header h3 { margin: 0; }
.tree-locked { opacity: .55; }
.new-badge { padding: 2px 5px; color: #fff; background: #8b2720; font: 8px 'Kenney Pixel',sans-serif; }
.skill-map { position: relative; display: grid; grid-template-columns: repeat(3,minmax(118px,1fr)); gap: 22px 10px; overflow-x: auto; padding: 20px 3px 4px; scroll-snap-type: x proximity; }
.skill-map::before { content:''; position:absolute; left:8%; right:8%; top:50%; border-top:2px solid rgba(69,56,37,.3); }
.skill-node { position:relative; z-index:1; min-height:72px; padding:8px; border:2px solid #66583f; color:var(--ink); background:#cbb98f; font-family:'Kenney Mini',sans-serif; scroll-snap-align:center; }
.skill-node b,.skill-node small { display:block; }
.skill-node small { margin-top:5px; font:8px 'Kenney Pixel',sans-serif; opacity:.72; }
.skill-node.owned { color:#f2e8cc; background:#4f6944; }
.skill-node.available { cursor:pointer; box-shadow:0 0 0 3px rgba(139,39,32,.2); }
.skill-node.locked { filter:grayscale(1); opacity:.62; }
.quartermaster-card { margin-top:14px; }
.doctrine-card { grid-column: 1 / -1; }
.doctrine-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:12px; }
.doctrine-choices p,.doctrine-branch p { margin:6px 0; font-size:10px; line-height:1.35; }
.doctrine-branch { margin-top:14px; grid-template-columns:repeat(4,minmax(150px,1fr)); }
.bunker-placement { margin-top:14px; padding:12px; border:2px dashed #8b2720; }
.bunker-placement button { margin:8px 6px 0 0; padding:8px 12px; }
#field.doctrine-targeting { cursor:crosshair; outline:3px solid #d6b65e; outline-offset:-3px; touch-action:none; }
.development-primary { position: sticky; bottom: -24px; z-index: 8; padding: 12px 0 20px; background: linear-gradient(transparent,#d8c9a5 24%); }
.development-primary .btn-paper { width:100%; }
@media (max-width: 760px) {
  .development-card { width:100%; max-height:100vh; margin:0; padding:14px; }
  .development-head { top:-14px; }
  .development-trees { grid-template-columns:1fr; }
  .development-primary { bottom:-14px; }
}
.upg {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  min-height: 48px;
  border: 1px solid var(--ink-faint);
  background: rgba(255,255,255,0.28);
  cursor: pointer;
  transition: background .15s, opacity .15s;
}
.upg:hover:not(.locked):not(.short) { background: rgba(255,255,255,0.55); }
/* Short of pts — still a live goal, not a dead line. */
.upg.short {
  opacity: 0.72;
  cursor: default;
  border-style: dashed;
}
.upg.locked {
  opacity: 0.42;
  cursor: default;
}
.upg .u-name {
  font-size: 13px;
}
.upg .u-desc {
  display: block;
  font-size: 11px;
  color: var(--ink-faint);
  margin-top: 2px;
}
.upg .u-cost {
  font-family: 'Kenney Future Narrow', sans-serif;
  font-size: 17px;
  white-space: nowrap;
}
.upg.short .u-cost { opacity: 0.9; }
.upg.locked .u-cost {
  font-size: 12px;
  letter-spacing: 0.04em;
  opacity: 0.85;
}
.upg-note {
  font-size: 11px;
  line-height: 1.35;
  color: var(--ink-faint);
  font-style: italic;
  padding: 4px 6px 2px;
}
#btn-nextwave { width: 100%; }

/* ============================================================
   EPILOGUE
   ============================================================ */
#screen-end { background: rgba(8, 8, 10, 0.9); }
.end-card {
  text-align: center;
  color: #b9b2a2;
  max-width: 640px;
  max-height: min(92vh, 100%);
  overflow: auto;
  padding: 30px;
  width: min(640px, 100%);
}
#end-title {
  font-family: 'Kenney Future Narrow', sans-serif;
  font-size: clamp(32px, 10vw, 58px);
  letter-spacing: 10px;
  color: #d8d0bd;
  animation: end-fade 3s ease both;
}
.end-line {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.7;
  animation: end-fade 3s ease 1s both;
}
.end-tally {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px 38px;
  margin: 34px 0 26px;
  animation: end-fade 3s ease 2s both;
}
.end-tally div { display: flex; flex-direction: column; min-width: 90px; }
.end-tally span {
  font-family: 'Kenney Future Narrow', sans-serif;
  font-size: clamp(28px, 8vw, 42px);
  color: #d8d0bd;
}
.end-tally label {
  font-family: 'Kenney Pixel', monospace;
  font-size: 12px;
  letter-spacing: 1px;
  color: #7d776a;
}
#end-roll {
  font-family: 'Kenney Pixel', monospace;
  font-size: 13px;
  line-height: 2;
  color: #7d776a;
  max-height: 200px;
  overflow: auto;
  columns: 2;
  margin-bottom: 24px;
  animation: end-fade 3s ease 3s both;
}
#end-quote {
  font-style: italic;
  font-size: 14px;
  color: #948d7c;
  margin-bottom: 26px;
  animation: end-fade 3s ease 4.2s both;
}
#screen-end .btn-flat {
  width: auto; padding: 10px 30px;
  color: #948d7c; border-color: #55503f;
  animation: end-fade 2s ease 5.5s both;
}
@keyframes end-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* stage darkening of the whole desk */
body.stage-2 { --desk-sat: .92; }
body.stage-3 { --desk-sat: .85; --vignette: .34; }
body.stage-4 { --desk-sat: .75; --vignette: .42; }
body.stage-5 { --desk-sat: .62; --vignette: .5; }
body.stage-6 { --desk-sat: .5;  --vignette: .58; }
body.stage-7 { --desk-sat: .38; --vignette: .66; }

/* ============================================================
   TABLET / PHONE — combat reflow
   ============================================================ */
@media (max-width: 999px) {
  #game-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 0;
    padding: 0;
    /* Fill the fixed screen (inset: 0), not 100dvh — dvh can be shorter
       than the fixed layer and leave a strip under the combat dock. */
    height: 100%;
    min-height: 100%;
  }

  #combat-top {
    display: flex;
    align-items: center;
    gap: 8px;
    grid-row: 1;
    padding:
      max(8px, var(--safe-top))
      max(10px, var(--safe-right))
      8px
      max(10px, var(--safe-left));
    background: linear-gradient(180deg, var(--paper) 0%, var(--paper-dim) 100%);
    border-bottom: 2px solid var(--ink-faint);
    z-index: 20;
    min-height: 52px;
  }

  #combat-top-main {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }

  .btn-chrome {
    flex-shrink: 0;
    min-width: 48px;
    min-height: 44px;
    padding: 8px 10px;
    font-family: 'Kenney Future Narrow', sans-serif;
    font-size: 13px;
    letter-spacing: 1px;
    color: var(--ink);
    background: rgba(255,255,255,0.35);
    border: 1px solid var(--ink-faint);
    border-radius: 4px;
    cursor: pointer;
  }
  .btn-chrome:hover,
  .btn-chrome:active {
    background: rgba(255,255,255,0.55);
  }

  #field-wrap {
    grid-row: 2;
    min-height: 0;
    padding: 6px 8px 4px;
    justify-content: center;
  }
  #field-frame {
    height: auto;
    width: min(100%, calc((100dvh - 168px - var(--safe-top) - var(--safe-bottom)) * 0.75));
    max-height: calc(100dvh - 168px - var(--safe-top) - var(--safe-bottom));
    aspect-ratio: 3 / 4;
    border-width: 6px;
    transform: none;
    box-shadow: 0 10px 28px rgba(0,0,0,0.55);
  }
  #field-caption {
    margin-top: 6px;
    font-size: 11px;
    letter-spacing: 1px;
  }

  #combat-dock {
    display: block;
    grid-row: 3;
    padding:
      8px
      max(10px, var(--safe-right))
      max(10px, var(--safe-bottom))
      max(10px, var(--safe-left));
    background: linear-gradient(180deg, var(--paper-dim) 0%, var(--paper) 100%);
    border-top: 2px solid var(--ink-faint);
    z-index: 20;
  }
  #combat-dock #shell-block .panel-title {
    display: none;
  }
  #combat-dock #shell-block {
    display: flex;
    align-items: stretch;
    gap: 8px;
  }
  #combat-dock #shell-select {
    flex: 1;
    min-width: 0;
  }
  #combat-dock .btn-fire-all {
    width: auto;
    margin-top: 0;
    min-width: 96px;
    flex-shrink: 0;
  }
  #combat-dock .shell-btn {
    min-height: 48px;
    font-size: 13px;
  }
  #combat-dock .shell-btn .key { display: none; }

  /* drawers */
  .side-panel {
    position: fixed;
    top: 0;
    bottom: 0;
    width: min(320px, 88vw);
    max-height: none;
    align-self: stretch;
    z-index: 40;
    transform: none;
    border-radius: 0;
    padding-top: max(16px, var(--safe-top));
    padding-bottom: max(16px, var(--safe-bottom));
    transition: transform .22s ease, background 2.5s;
    box-shadow: 0 0 40px rgba(0,0,0,0.45);
  }
  #panel-log {
    left: 0;
    transform: translateX(-105%);
    padding-left: max(14px, var(--safe-left));
  }
  #panel-battery {
    right: 0;
    left: auto;
    transform: translateX(105%);
    padding-right: max(14px, var(--safe-right));
  }
  #panel-log.open { transform: translateX(0); }
  #panel-battery.open { transform: translateX(0); }

  .drawer-close { display: block; }

  #log-entries {
    min-height: 0;
    max-height: none;
    height: calc(100% - 52px);
  }

  #drawer-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 35;
    background: rgba(8, 6, 4, 0.55);
    border: none;
    cursor: pointer;
  }
  #drawer-scrim.hidden { display: none !important; }

  /* when shells live in dock, hide battery's empty shell slot */
  #panel-battery #shell-block { display: none; }
}

/* narrow phones — title / dispatch / end */
@media (max-width: 520px) {
  .title-card {
    padding: 28px 22px 24px;
    width: min(560px, 96vw);
    transform: none;
  }
  .title-rule { margin: 16px 20px; }
  .title-brief { font-size: 14px; }
  .title-howto { font-size: 12px; line-height: 1.75; }
  .btn-paper {
    font-size: 18px;
    padding: 14px 22px;
    width: 100%;
  }

  .dispatch-card {
    padding: 22px 16px 20px;
    width: min(880px, 96vw);
    transform: none;
  }
  .stamp {
    position: static;
    display: inline-block;
    margin-bottom: 8px;
    transform: rotate(2deg);
  }
  #dispatch-title { padding-right: 0; }
  .dispatch-cols {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .dispatch-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* shop first on mobile — easier to spend and stand to */
  .dispatch-right { order: -1; }
  #roll-names { columns: 1; max-height: 140px; }
  #btn-nextwave {
    position: sticky;
    bottom: 0;
    margin-top: 8px;
  }

  .end-card { padding: 22px 16px; }
  #end-roll { columns: 1; }
  .end-tally { gap: 16px 20px; margin: 24px 0 18px; }

  #wave-banner { letter-spacing: 3px; }
  #dc-warning { letter-spacing: 2px; padding: 4px 10px; }
}

/* short landscape phones */
@media (max-width: 999px) and (max-height: 480px) {
  #field-caption { margin-top: 3px; padding-block: 4px 5px; }
  .line-status-track { height: 6px; margin-top: 3px; }
  #field-frame {
    max-height: calc(100dvh - 168px - var(--safe-top) - var(--safe-bottom));
    width: auto;
    height: calc(100dvh - 168px - var(--safe-top) - var(--safe-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  .wave-segment { transition-duration: .01s; }
  #wave-progress-track.impact-ordinary,
  #wave-progress-track.impact-specialist,
  #wave-progress-track.impact-tank { animation: wave-pulse .22s ease-out; }
  #field-caption.critical { animation: none; }
}