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

body {
  font-family: var(--font);
  background: var(--bg-main);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
  /* No body padding — app shell fills viewport edge-to-edge. Screens outside
     the shell carry their own `.screen { padding: 20px }`. */
  padding: 0;
}

#app {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

h1 { font-size: 3rem; font-weight: 700; color: var(--text-primary); }
h2 { font-size: 1.7rem; font-weight: 600; color: var(--text-primary); }
h3 { font-size: 1.2rem; font-weight: 600; color: var(--text-secondary); }
h4 { font-size: 1rem; font-weight: 600; color: var(--text-muted); }

.screen {
  width: 100%; max-width: 1600px; padding: 20px;
  display: flex; flex-direction: column; align-items: center;
}
.screen:not(.title-screen) > h2,
.screen:not(.title-screen) > .recruit-header h2 {
  padding-bottom: 10px; border-bottom: 1px solid var(--border); margin-bottom: 16px; width: 100%;
}

.title-screen { justify-content: center; min-height: 90vh; gap: 8px; }
.title-emblem { font-size: 4rem; margin-bottom: 4px; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4)); }
.title-greek {
  font-size: 2.2rem; color: var(--accent-gold); font-weight: 400;
  letter-spacing: 3px; text-shadow: 0 2px 8px color-mix(in srgb, var(--accent-gold) 20%, transparent);
}
.title-main {
  font-size: 4rem; letter-spacing: -1px;
  text-shadow: 0 2px 16px rgba(255,255,255,0.08);
}
.title-screen .subtitle {
  font-size: 1.4rem; color: var(--text-muted); font-weight: 400;
  font-style: italic; letter-spacing: 1px;
}
.title-divider {
  width: 120px; height: 2px; background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);
  margin: 12px 0;
}
.title-play-btn {
  padding: 16px 48px !important; font-size: 1.2rem !important;
  letter-spacing: 0.5px; margin-top: 8px;
  box-shadow: 0 4px 16px rgba(129, 182, 76, 0.3);
}
.title-play-btn:hover { box-shadow: 0 4px 24px rgba(129, 182, 76, 0.5); }
.title-screen .tagline {
  font-size: 1rem; color: var(--text-muted); max-width: 700px;
  text-align: center; line-height: 1.7; margin-top: 16px; white-space: nowrap;
}
.title-screen .tagline p { margin: 2px 0; }
.title-units {
  font-size: 2rem; letter-spacing: 12px; margin-top: 12px;
  opacity: 0.6; filter: grayscale(0.3);
}

.title-test-btn {
  margin-top: 4px; opacity: 0.78;
  padding: 16px 48px !important; font-size: 1.2rem !important;
}
.title-test-btn:hover { opacity: 1; }
.title-rules-btn {
  margin-top: 4px; opacity: 0.78;
  padding: 16px 48px !important; font-size: 1.2rem !important;
}

@media (max-width: 600px) {
  .game-screen { padding: 8px; }
  .game-main { flex-direction: column; gap: 12px; }
  .board-area { width: 100%; }
  .game-panel { flex-direction: column; gap: 10px; }
  .game-panel > * { min-width: 100%; }
  .modal-card { margin: 16px; padding: 20px 24px; max-width: calc(100% - 32px); }
  .modal-buttons { flex-direction: column; }
  .modal-buttons .btn { width: 100%; }
  .player-bar { margin-left: 0; border-radius: 6px; flex-wrap: wrap; }
  .pb-left { flex: 1; }
  .pb-right { flex-basis: 100%; margin-left: 0; }
  .stats-card { min-width: auto; width: 100%; }

  .title-screen { min-height: 100dvh; gap: 6px; padding: 24px 16px; }
  h1.title-main { font-size: 2.6rem; }
  .title-emblem { font-size: 2.6rem; }
  .title-greek { font-size: 1.4rem; letter-spacing: 2px; }
  .title-screen .subtitle { font-size: 1rem; }
  .title-divider { margin: 8px 0; }
  .title-play-btn,
  .title-test-btn,
  .title-rules-btn { padding: 14px 32px !important; font-size: 1rem !important; width: 100%; max-width: 320px; }
  .title-screen .tagline { font-size: 0.82rem; white-space: normal; margin-top: 10px; }
  .title-units { font-size: 1.4rem; letter-spacing: 6px; }

  .recruit-screen { padding: 12px; }
  .recruit-header h2 { font-size: 1rem; flex-direction: column; gap: 4px; }
  .recruit-points { margin-left: 0; font-size: 1rem; }

  .deploy-screen { padding: 12px; }

  .right-panel { width: 100%; height: auto; max-height: none; overflow: visible; }
  .left-col-wrap { width: 100%; overflow: visible; }
  .left-panel { min-height: auto; }
  .game-panel { width: 100%; }
  .actions-card { flex: initial; min-height: auto; overflow-y: visible; }
  .log-scroll { max-height: 300px; }

  .gameover-buttons { flex-direction: column; min-width: auto; }

  .rules-screen { padding: 16px 12px; }
  .rules-section h3 { font-size: 0.95rem; }

  /* Mobile popup overlay — canonical rule lives in game-ui.css; this
     duplicate must stay in sync. */
  .popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(0, 0, 0, 0.78);
    border-radius: 0;
    padding: 16px;
  }
  .popup-card {
    position: static;
    transform: none;
    top: auto; right: auto; left: auto;
    min-width: 0;
    width: 100%;
    max-width: 420px;
    padding: 16px 18px;
  }
  .popup-buttons { flex-direction: column; gap: 6px; }
  .popup-buttons .btn { width: 100%; }
  .defend-table td { padding: 4px 6px; font-size: 0.8rem; }
  .ai-confirm-prompt { margin-left: 0; width: 100%; justify-content: space-between; }

  .coin-toast-card { padding: 20px 28px; }
  .coin-toast-icon { font-size: 2rem; }
  .coin-toast-msg { font-size: 1.1rem; }

  .acpop-btn { width: 40px; height: 40px; }
  .acpop-icon { font-size: 0.95rem; }
  .acpop-lbl { font-size: 0.38rem; }
}

.recruit-screen { max-width: 1300px; }
.recruit-header { text-align: center; margin-bottom: 16px; }
.recruit-points { font-size: 1.2rem; font-weight: 700; color: var(--accent-green); margin-left: 8px; }

/* Top row: readiness (slim, matches map below) → spec dropdown (1fr,
   matches table below) → AI panel (admin only, auto width).  The slim left
   + 1fr middle mirror the body's [map | table] layout so spec sits directly
   above the unit table. */
.recruit-top-row {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  margin-bottom: 16px;
}
.recruit-top-row > .readiness-bar { min-width: 0; }
.recruit-top-row > .spec-selector { margin: 0; min-width: 0; }
.recruit-top-row .ai-mode-panel {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
}
.recruit-top-row .ai-mode-select { padding: 10px 14px; font-size: 0.92rem; }

.recruit-body {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  gap: 16px;
  width: 100%;
  margin-bottom: 16px;
}
/* TOP version visible on desktop, BODY version visible on tablet/mobile.
   Hidden mismatched copies via display:none so the visible grid stays clean. */
.spec-selector-body { display: none; }
@media (max-width: 900px) {
  .recruit-top-row { grid-template-columns: minmax(0, 1fr); }
  .recruit-top-row .ai-mode-panel,
  .recruit-top-row .ai-mode-panel-mount,
  .recruit-top-row .ai-mode-select { width: 100%; }
  .recruit-body { grid-template-columns: minmax(0, 1fr); }
  .recruit-top-row > .spec-selector-top { display: none; }
  .recruit-body > .spec-selector-body  { display: block; grid-column: 1; }
}

/* Pins the remaining-points figure to top-right so the player doesn't lose
   sight of their budget while scrolling the unit table. Mobile-only. */
.mobile-points-sticky { display: none; }
@media (max-width: 640px) {
  .mobile-points-sticky {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    position: fixed;
    top: 8px;
    right: 8px;
    z-index: 200;
    padding: 5px 12px;
    background: var(--bg-card);
    border: 1px solid var(--accent-gold);
    border-radius: 999px;
    font-size: 0.85rem;
    color: var(--text-primary);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  }
  .mobile-points-sticky strong {
    color: var(--accent-gold);
    font-weight: 700;
    font-size: 1rem;
  }
}
.recruit-map-pane,
.recruit-shop-pane {
  background: var(--bg-card);
  border-radius: 8px;
  padding: 14px;
  min-width: 0;
}
.recruit-map-pane {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.recruit-map-eyebrow {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.recruit-map-name {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
}
.recruit-map-pane .recruit-map-grid {
  width: 100%;
  max-width: 280px;
  aspect-ratio: 1;
  border-radius: 4px;
  overflow: hidden;
  margin-top: 4px;
}
.recruit-map-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.35;
}
.recruit-shop-pane {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.army-item {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; background: var(--bg-card); border-radius: var(--border-radius);
  font-size: 0.85rem;
}
.army-sym { font-size: 1.1rem; width: 24px; text-align: center; flex-shrink: 0; }
.army-name { flex: 1; font-weight: 500; }
.army-qty { width: 32px; text-align: center; color: var(--text-muted); font-size: 0.8rem; flex-shrink: 0; }
.army-action { width: 24px; flex-shrink: 0; }
.army-total {
  text-align: right; font-size: 0.8rem; color: var(--text-muted); padding: 6px 10px 0;
  border-top: 1px solid var(--border); margin-top: 4px;
}

.recruit-quick {
  display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; justify-content: flex-start;
}
.recruit-quick .preset-select,
.recruit-quick .btn {
  flex: 1 1 0;
}
/* Canonical dropdown style — every <select> in the app inherits this.
   Per-class rules below override sizing only; never bg/border/color. */
select,
.battlefield-select,
.preset-select,
.ai-mode-select {
  background: var(--bg-hover);
  color: var(--text-primary);
  border: 1px solid var(--bg-hover);
  border-radius: var(--border-radius);
  padding: 6px 10px;
  font-family: var(--font);
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
select:hover,
.battlefield-select:hover,
.preset-select:hover,
.ai-mode-select:hover {
  border-color: var(--accent-gold);
}
select:focus,
.battlefield-select:focus,
.preset-select:focus,
.ai-mode-select:focus {
  outline: none;
  border-color: var(--accent-gold);
}
select option,
.battlefield-select option,
.preset-select option {
  background: var(--bg-panel);
  color: var(--text-primary);
}

.transition-screen { justify-content: center; min-height: 80vh; gap: 16px; text-align: center; }
.transition-screen p { color: var(--text-secondary); font-size: 1.1rem; }

/* Mirrors .recruit-screen so recruit + deploy share the same geometry.
   align-items falls through to .screen's default (center). */
.deploy-screen { max-width: 1600px; }

/* 2-row grid:
     row 1 (auto):  tray (top) | board-header
     row 2 (1fr):   tray (cont)| board-wrap
   Tray spans BOTH rows (grid-row: 1 / 3) so its top aligns with
   deploy-board-header — formation dropdown + chevron reads as a sibling
   of the header strip rather than dropping below. Col 2 is `auto` (sized
   by the board's natural pixel width). */
.deploy-body {
  display: grid;
  grid-template-columns: minmax(240px, 320px) auto;
  grid-template-rows: auto 1fr;
  gap: 4px 16px;
  width: 100%;
  margin-bottom: 16px;
  justify-content: center;
}
.deploy-body > .deploy-board-header { grid-column: 2; grid-row: 1; }
.deploy-body > .board-wrap          { grid-column: 2; grid-row: 2; }
.deploy-body > .deploy-tray         { grid-column: 1; grid-row: 1 / 3; align-self: stretch; }
@media (max-width: 900px) {
  .deploy-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    justify-content: stretch;
  }
  .deploy-body > .deploy-board-header { grid-column: 1; grid-row: 1; }
  .deploy-body > .board-wrap          { grid-column: 1; grid-row: 2; }
  .deploy-body > .deploy-tray         { grid-column: 1; grid-row: 3; align-self: auto; }
}

/* readiness + AI + rotate row above the board. All three at 36px so row
   reads as one strip; left padding aligns content with board-grid (skipping
   board-axis-left gutter). Wraps on narrow screens. */
.deploy-board-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  padding-left: 16px;
  box-sizing: border-box;
}
/* Locked to 40px so inner readiness-tag pill (~32px tall) fits without
   clipping. Bar's vertical padding is zeroed for the same reason. */
.deploy-board-header > .readiness-bar {
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
}
.deploy-board-header .ai-mode-panel,
.deploy-board-header .ai-mode-panel-mount { flex: 0 0 auto; }
.deploy-board-header .ai-mode-panel {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
}
.deploy-board-header .ai-mode-select {
  height: 40px;
  padding: 0 14px;
  font-size: 0.88rem;
  box-sizing: border-box;
}
.deploy-board-header .rotate-board-control { flex: 0 0 auto; margin: 0; }
.deploy-board-header .btn-rotate-board { width: 40px; height: 40px; }
@media (max-width: 640px) {
  /* Mobile order: row1 readiness|rotate, row2 AI panel (admin) full-width.
     `order:` rearranges; readiness flexes next to rotate; AI flex-basis:100%
     forces own row below. */
  .deploy-board-header { padding-left: 0; row-gap: 6px; }
  .deploy-board-header > .readiness-bar { order: 1; flex: 1 1 auto; min-width: 0; }
  .deploy-board-header .rotate-board-control { order: 2; }
  .deploy-board-header .ai-mode-panel,
  .deploy-board-header .ai-mode-panel-mount { order: 3; flex-basis: 100%; }
  .deploy-board-header .ai-mode-select { width: 100%; }
}

.deploy-tray {
  background: var(--bg-card);
  border-radius: 8px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  align-self: start;
  transition: width 0.18s ease, max-height 0.18s ease, padding 0.18s ease, background 0.18s ease;
}
.deploy-tray-content { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

/* align-items: stretch makes the chevron toggle grow to match the dropdown's
   natural height so they read as one aligned strip. */
.deploy-tray-header {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.deploy-tray-header > .preset-select {
  flex: 1 1 auto;
  min-width: 0;
}

/* margin-left: auto pins toggle to the right edge whether the dropdown is
   visible or hidden (without this it slides left when dropdown disappears).
   height: auto + align-self:stretch resolves to the dropdown's height. */
.deploy-tray-toggle {
  width: 28px;
  height: auto;
  min-height: 28px;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  margin-left: auto;
  align-self: stretch;
  flex: 0 0 auto;
}
.deploy-tray-toggle:hover {
  background: var(--bg-hover);
  border-color: var(--accent-gold);
  color: var(--accent-gold);
}
/* When collapsed, KEEP the header so toggle's screen position is preserved.
   min-height keeps the tap-target size when dropdown is gone. */
.deploy-tray.is-collapsed > .deploy-tray-header > .preset-select { display: none; }

/* Padding KEPT at 14px (matching expanded base) so chevron stays pinned to
   the same screen position whether tray is open or closed; resetting to 0
   shifts the toggle 14px up + right. Background + border-radius transparent
   so gray card visually disappears. */
.deploy-tray.is-collapsed {
  background: transparent;
  border-radius: 0;
  gap: 0;
}
.deploy-tray.is-collapsed > .deploy-tray-content { display: none; }
.deploy-tray .preset-select { width: 100%; }
.deploy-tray .deploy-random-btn { width: 100%; }
.deploy-units-header {
  margin-top: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}
.deploy-units-list { display: flex; flex-direction: column; gap: 4px; }
.deploy-all-placed { color: var(--text-muted); font-size: 0.85rem; margin: 0; }

.deploy-legend {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent);
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.deploy-legend p { margin: 0 0 4px; }
.deploy-legend-row { display: flex; align-items: center; gap: 8px; }
/* Mini deploy-zone cells: striped bg + coloured outline. Shape matches across
   all three variants (green/gold/red) for visual consistency. */
.legend-swatch {
  width: 16px; height: 16px;
  border-radius: 2px;
  flex: 0 0 auto;
  box-sizing: border-box;
  background-color: rgba(120, 95, 60, 0.45);
  background-image: repeating-linear-gradient(45deg, rgba(0,0,0,0.3) 0, rgba(0,0,0,0.3) 2px, transparent 2px, transparent 5px);
  border: 2px solid transparent;
}
.legend-swatch.legend-green { border-color: rgba(129, 182, 76, 0.9); }
.legend-swatch.legend-gold  {
  border-color: rgba(255, 184, 50, 0.95);
  background-image: repeating-linear-gradient(45deg, rgba(255, 184, 50, 0.45) 0, rgba(255, 184, 50, 0.45) 2px, transparent 2px, transparent 5px);
}
.legend-swatch.legend-enemy-border { border-color: rgba(220, 60, 60, 0.85); }

.deploy-unit {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 10px; background: var(--bg-panel);
  border: 2px solid transparent; border-radius: var(--border-radius);
  cursor: grab; font-size: 0.85rem; transition: border-color 0.15s;
}
.deploy-unit-name { flex: 1; }
/* Fixed min-width so every pill renders the same width regardless of digit
   count (1/1 through 16/16). */
.deploy-qty {
  display: inline-block;
  min-width: 3.5em;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent-gold);
  background: color-mix(in srgb, var(--accent-gold) 12%, transparent);
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 8px;
  white-space: nowrap;
  box-sizing: border-box;
}
.deploy-unit:hover { border-color: var(--accent-green); }
.deploy-unit.selected { border-color: var(--accent-gold); background: var(--bg-hover); }
.deploy-unit-placed {
  opacity: 0.4; text-decoration: line-through; pointer-events: none;
  border-color: transparent;
}

.deploy-board-pane {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: 0;
}
.deploy-done-btn {
  padding: 14px 60px; font-size: 1.1rem;
}

/* Mirrors .deploy-board-header — slim row [turn-banner | rotate | AI panel].
   Banner keeps its colour-coded state styles; rotate + AI dock right.
   AI dropdown chrome stripped, matching deploy. */
.play-board-header {
  display: flex;
  align-items: stretch;
  gap: 8px;
  /* Outer box starts at grid's left edge so the DIV itself aligns with
     .player-bar and .group-status-bar; inner turn-banner drops its own
     margin-left (defined in game-ui.css) since parent carries it now. */
  margin-left: var(--board-label-width, 16px);
}
.play-board-header > .turn-banner { flex: 1 1 auto; min-width: 0; }

/* Sits in left-panel ABOVE unit-info card so admin (scenarios + vs-bot)
   gets seat-toggle above contextual unit info. Hidden when
   renderAiModePanel() returns '' (non-admin / vs-human). */
.ai-mode-panel-row {
  display: block;
  width: 100%;
  margin-bottom: 4px;
}
/* Cosmetic override for game-screen sidebar mount — keeps base flex-row
   layout so the two P1/P2 selects sit side-by-side. */
.ai-mode-panel-row .ai-mode-panel,
.ai-mode-panel-row .ai-mode-panel-mount {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  width: 100%;
}
.ai-mode-panel-row .ai-mode-select {
  height: 36px;
  padding: 0 12px;
  font-size: 0.85rem;
  box-sizing: border-box;
}

/* AI deployment overlay (~650ms) while an AI seat auto-deploys; fills the
   .board-wrap so empty board isn't mistaken for broken UI. */
.deploy-ai-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.42);
  border-radius: 8px;
  z-index: 12;
  pointer-events: none;
  animation: deploy-ai-overlay-fade 180ms ease-out;
}
.deploy-ai-overlay-card {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 24px;
  background: var(--bg-card);
  border: 1px solid var(--accent-gold);
  border-radius: 10px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
  max-width: 86%;
}
.deploy-ai-spinner {
  width: 22px; height: 22px;
  border: 3px solid rgba(255, 255, 255, 0.18);
  border-top-color: var(--accent-gold);
  border-radius: 50%;
  animation: deploy-ai-spin 820ms linear infinite;
  flex-shrink: 0;
}
.deploy-ai-overlay-msg {
  color: var(--text-primary);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.01em;
}
@keyframes deploy-ai-spin { to { transform: rotate(360deg); } }
@keyframes deploy-ai-overlay-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .deploy-ai-spinner { animation: none; }
  .deploy-ai-overlay { animation: none; }
}


/* Clickable HQ / profile recent-match rows — generic helper used by both. */
.home-row-clickable { cursor: pointer; transition: background 120ms ease; }
.home-row-clickable:hover { background: color-mix(in srgb, var(--accent-gold) 8%, transparent); }
.home-row-clickable:focus-visible { outline: 2px solid var(--accent-gold); outline-offset: -2px; }

.reveal-screen { gap: 16px; }
.coin-screen { justify-content: center; min-height: 80vh; gap: 16px; text-align: center; }
.coin-result { font-size: 2rem; color: var(--accent-green); font-weight: 700; }







.title-battlefield-btn         {
  margin-bottom: 8px;
  background: var(--bg-card);
  color: var(--text-secondary);
  border: 1px solid var(--bg-hover);
}
.title-battlefield-btn:hover   { background: var(--bg-hover); color: var(--text-main); }

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #555; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #777; }

.title-feedback-btn { display: block; margin-top: 10px; }

/* Modular data-table system — single source of truth for paginated tables.
     .data-toolbar           top row (info + action buttons)
     .data-table-wrap        scrollable shell
     .data-table             the table itself
     .data-pagination-row    full-width row that centers its child pill
     .data-pagination        the pill
   .admin-feedback-table + .leaderboard-table aliased to .data-table so
   existing markup stays valid; per-screen rules below. */
.data-toolbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}
.data-toolbar-info {
  color: var(--text-muted); font-size: 0.82rem;
  flex: 1 1 auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.data-toolbar-actions {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  flex: 0 0 auto;
  margin-left: auto;
}
.data-table-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  overflow: auto;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
/* Shared table chrome (headers, borders, padding, typography).
   Layout-specific rules (widths, sorting, hover states) remain per table. */
.data-table,
.admin-feedback-table,
.leaderboard-table,
.rules-table,
.legal-table,
.home-recent-table,
.profile-games-table,
.ad-map-table,
.ad-funnel-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
/* Apply max-content width only to tables inside .data-table-wrap.
   Wrapped tables can scroll horizontally; unwrapped tables should wrap
   to fit their container and avoid overflow. */
.data-table-wrap table { min-width: max-content; }
/* table-layout: fixed only for tables with explicit column widths.
   Auto layout would override their `<col>` widths and break the layout. */
.data-table,
.admin-feedback-table,
.leaderboard-table,
.rules-table {
  table-layout: fixed;
}
.data-table thead,
.admin-feedback-table thead,
.leaderboard-table thead,
.rules-table thead,
.legal-table thead,
.home-recent-table thead,
.profile-games-table thead,
.ad-map-table thead,
.ad-funnel-table thead {
  background: var(--bg-hover);
  position: sticky; top: 0; z-index: 1;
}
.data-table thead th,
.admin-feedback-table thead th,
.leaderboard-table thead th,
.rules-table thead th,
.legal-table thead th,
.home-recent-table thead th,
.profile-games-table thead th,
.ad-map-table thead th,
.ad-funnel-table thead th {
  padding: 12px 14px;
  text-align: left;
  color: var(--accent-gold);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  border-bottom: 2px solid var(--accent-gold);
  background: var(--bg-hover);
}
.data-table tbody td,
.admin-feedback-table tbody td,
.leaderboard-table tbody td,
.rules-table tbody td,
.legal-table tbody td,
.home-recent-table tbody td,
.profile-games-table tbody td,
.ad-map-table tbody td,
.ad-funnel-table tbody td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
  vertical-align: top;
  line-height: 1.5;
}
.data-table tbody tr:last-child td,
.admin-feedback-table tbody tr:last-child td,
.leaderboard-table tbody tr:last-child td,
.rules-table tbody tr:last-child td,
.legal-table tbody tr:last-child td,
.home-recent-table tbody tr:last-child td,
.profile-games-table tbody tr:last-child td,
.ad-map-table tbody tr:last-child td,
.ad-funnel-table tr:last-child td { border-bottom: 0; }
/* Shared row-hover; per-screen blocks add cursor:pointer where appropriate. */
.data-table tbody tr:hover,
.admin-feedback-table tbody tr.admin-feedback-row:hover,
.leaderboard-table tbody tr.leaderboard-row:hover,
.profile-games-table tbody tr:hover,
.ad-map-table tbody tr:hover { background: var(--bg-hover); }

/* Full-width row guarantees the centered pill aligns with table above
   regardless of flex-context quirks (align-self:center alone fails in some
   viewport / wrap-mode combos). */
.data-pagination-row {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 10px;
}
.data-pagination,
.admin-feedback-pagination,
.leaderboard-pagination {
  display: inline-flex; align-items: center; gap: 8px;
  justify-content: center;
  padding: 10px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  flex-wrap: wrap;
  flex: 0 0 auto;
  width: max-content;
  max-width: 100%;
}
.data-page-indicator,
.admin-feedback-page-indicator,
.leaderboard-pagination .leaderboard-page-indicator {
  color: var(--text-secondary); font-size: 0.88rem;
  padding: 0 10px;
  font-variant-numeric: tabular-nums;
}
.data-page-indicator strong,
.admin-feedback-page-indicator strong,
.leaderboard-pagination .leaderboard-page-indicator strong {
  color: var(--accent-gold); font-weight: 700;
}
.data-page-btn,
.admin-feedback-page-btn,
.leaderboard-page-btn { min-width: 38px; }
.data-page-btn:disabled,
.admin-feedback-page-btn:disabled,
.leaderboard-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Shared loading / error / empty cards (DataCard helpers in data-card.js). */
.data-state {
  display: flex; flex-direction: column; align-items: center;
  gap: 12px; padding: 40px 20px;
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  text-align: center;
}
.data-state-msg { color: var(--text-secondary); font-size: 0.95rem; }
.data-state-sub { color: var(--text-muted); font-size: 0.82rem; }
.data-state-icon { font-size: 1.6rem; }
.data-state-loading .data-state-spinner {
  width: 28px; height: 28px;
  border: 3px solid var(--border-color);
  border-top-color: var(--accent-gold);
  border-radius: 50%;
  animation: battlefield-spin 0.9s linear infinite;
}
.data-state-error { border-color: var(--accent-red); }
.data-state-error .data-state-icon { color: var(--accent-red); }
.data-empty-cell {
  text-align: center !important;
  color: var(--text-muted);
  padding: 40px 20px !important;
}
.data-empty-icon { display: inline-block; margin-right: 8px; font-size: 1.1rem; }



@media (max-width: 600px) {
  .profile-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .profile-games-table { font-size: 0.78rem; }
  .profile-games-table th, .profile-games-table td { padding: 6px 8px; }
  .admin-feedback-toolbar-actions { width: 100%; }
  .admin-feedback-table { font-size: 0.78rem; }
}

/* Hidden on desktop; shown via @media tablet/mobile blocks below. */
.game-end-turn-mobile { display: none; }

/* Left panel collapsed: surface the End-Turn button under the board so the
   user can still end the turn without re-expanding the panel. Mirrors the
   mobile pattern (and ultra-focus mode in app-shell.css). */
.left-col-wrap.is-collapsed ~ .board-area .game-end-turn-mobile {
  display: block;
  padding: 0;
  margin-top: 6px;
}
.left-col-wrap.is-collapsed ~ .board-area .game-end-turn-mobile .btn-end-turn {
  width: 100%;
  padding: 12px 16px;
  font-size: 1rem;
  font-weight: 700;
}

/* PLAY screen at ≤1100px: board → end-turn → panels. The wrap rules above
   already make panels full-width; this adds order + prominent End-Turn row.
   MUST come AFTER `.game-end-turn-mobile { display: none }` so the
   `display: block` below wins the cascade. */
@media (max-width: 1100px) {
  .game-main > .board-area           { order: 1; }
  .game-main > .left-col-wrap        { order: 2; }
  .game-main > .right-panel          { order: 3; }
  /* end-turn-mobile lives in .board-area so it takes the board's natural
     width. Inline End-Turn in left-panel hidden — prominent row takes over. */
  .game-main .left-panel .btn-end-turn { display: none; }
  .game-end-turn-mobile {
    display: block;
    padding: 0;
    margin-top: 6px;
  }
  .game-end-turn-mobile .btn-end-turn {
    width: 100%;
    padding: 12px 16px;
    font-size: 1rem;
    font-weight: 700;
  }
}

@media (max-width: 600px) {
  .board-wrap, .board-area {
    --cell-size: calc((100vw - 48px) / var(--board-size, 16));
  }
  .board-grid {
    grid-template-columns: repeat(var(--board-size, 16), var(--cell-size));
    grid-template-rows:    repeat(var(--board-size, 16), var(--cell-size));
  }
  .board-wrap { overflow: visible; max-width: none; }

  /* Mobile order: board → end-turn → left-col-wrap → right-panel.
     .game-main is already flex-column on mobile. */
  .game-main { gap: 8px; }
  .game-main > .left-col-wrap        { order: 3; }
  .game-main > .board-area           { order: 1; }
  .game-main > .game-end-turn-mobile { order: 2; }
  .game-main > .right-panel          { order: 4; }

  .game-main .left-panel .btn-end-turn { display: none; }

  .game-end-turn-mobile {
    display: block;
    padding: 0 4px;
  }
  .game-end-turn-mobile .btn-end-turn {
    width: 100%;
    padding: 12px 16px;
    font-size: 1rem;
    font-weight: 700;
  }

  /* Cap scrollable panel cards to ~1/3 viewport so expanded cards can't
     dominate the screen. */
  .game-main > .right-panel .ai-think-body,
  .game-main > .right-panel .log-scroll {
    max-height: 30vh;
  }

  /* Desktop grid assumes ~260px column; on mobile let it auto-fit. */
  .left-panel .actions-card {
    width: 100%;
    box-sizing: border-box;
  }
  .left-panel .actions-card .action-grid,
  .left-panel .actions-card .action-row {
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  }

  .recruit-screen .recruit-layout { scroll-margin-top: 12px; }

  /* Pin board-area + children flush-left on mobile so banner / status-bar /
     board-wrap share the same edge instead of leaving a left dead-strip. */
  .game-main > .board-area {
    align-items: flex-start;
    width: 100%;
  }
  .game-main > .board-area > * {
    width: 100%;
    box-sizing: border-box;
  }
  .game-main > .board-area .group-status-bar {
    text-align: left;
  }

  .online-recruit-top-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 12px;
  }
  .online-recruit-top-col {
    width: 100%;
    flex: 1 1 auto;
  }
  .readiness-bar {
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 12px;
    font-size: 0.82rem;
  }
  .readiness-side {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-start;
  }
  .readiness-side .readiness-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .readiness-divider {
    flex: 0 0 auto;
  }
  .readiness-tag {
    font-size: 0.7rem;
    padding: 2px 8px;
  }

  .recruit-screen .recruit-layout { gap: 12px; margin-bottom: 16px; }
  .recruit-col { padding: 10px 12px; }
  .recruit-army-col { min-height: 0; }
  .online-recruit-top-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .online-recruit-top-col { width: 100%; }
  .online-recruit-top-row .ai-mode-panel,
  .online-recruit-top-row .ai-mode-panel-mount { width: 100%; }
  .recruit-screen .recruit-quick { flex-wrap: wrap; gap: 6px; }
  .unit-shop-table { font-size: 0.82rem; }
  .unit-shop-table th, .unit-shop-table td { padding: 6px 8px; }
  .spec-card { padding: 10px 12px; }

  .deploy-screen .online-recruit-footer { margin-top: 12px; }

  /* Bigger tap targets + visually unambiguous selection — user taps unit
     then taps cell, so the "selected" state must be unmissable. */
  .deploy-tray .deploy-unit {
    min-height: 44px;
    padding: 10px 14px;
    font-size: 0.95rem;
    border-radius: 8px;
    margin-bottom: 6px;
  }
  .deploy-tray .deploy-unit.selected {
    box-shadow: 0 0 0 2px var(--accent-gold);
  }
  .deploy-tray .deploy-unit-name { flex: 1 1 auto; }
  .deploy-tray .deploy-qty { flex: 0 0 auto; }
  /* When all of a type is placed, fade AND non-tappable so stale taps
     don't clear current selection. */
  .deploy-tray .deploy-unit-placed {
    opacity: 0.45;
    pointer-events: none;
  }

  /* Drop desktop min-height:250px on mobile so the log card doesn't stay
     needlessly tall when collapsed by default. */
  .game-main > .right-panel .log-card {
    min-height: 0;
  }
  .game-main > .right-panel .log-card .log-scroll {
    max-height: 35vh;
  }

  .battlefield-game-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 12px 14px;
  }
  .battlefield-game-host {
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
  }
  .battlefield-game-hostname { font-size: 1rem; }
  .battlefield-game-elo      { font-size: 0.85rem; opacity: 0.85; }
  .battlefield-game-meta {
    gap: 8px 10px;
  }
  .battlefield-tag {
    font-size: 0.7rem;
    padding: 3px 9px;
  }
  .battlefield-join-btn {
    width: 100%;
    padding: 12px 16px;
    font-size: 0.95rem;
    font-weight: 700;
  }
}