/* The map's own address (docs/MAP.md sections 1 and 6, d1118): the website's board engine on the war-room table,
   with the order panel on the right. The element ids are the engine's, the same as on the website's /map page. */
:root {
  --ink: #0f110d;
  --graphite: #1b1e18;
  --grid: rgba(196, 186, 150, 0.08);
  --text: #ddd6c1;
  --muted: #9c9580;
  --brass: #b9a46c;
  --stamp: #b3261e;
  --glass: rgba(24, 26, 20, 0.86);
  --edge: rgba(185, 164, 108, 0.4);
  --font-body: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head: "Courier New", ui-monospace, monospace;
  /* The ground's grade (a canvas filter, read by the engine): muted olive, slate and sepia; "none" turns it off. The
     website's stylesheet carries the same value. */
  --map-grade: grayscale(0.6) sepia(0.45) hue-rotate(20deg) saturate(0.75) contrast(0.95) brightness(0.78);
  --vignette: radial-gradient(ellipse 75% 70% at 50% 50%, transparent 55%, rgba(8, 9, 6, 0.6));
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; margin: 0; background: var(--ink); color: var(--text); font: 14px/1.4 var(--font-body); }

/* The table: graphite with a very fine grid; it shows wherever there are no tiles. */
.table {
  position: fixed; inset: 0; display: flex; gap: 12px; padding: 18px;
  background:
    repeating-linear-gradient(0deg, var(--grid) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 24px),
    var(--graphite);
}

/* The screen: the board's canvas under a thin bezel, with the vignette over it. */
.board { position: relative; flex: 1 1 auto; min-width: 0; height: 100%; overflow: hidden; border: 1px solid var(--edge);
  border-radius: 6px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55); }
.board::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--vignette); z-index: 1; }
.board canvas { display: block; width: 100%; height: 100%; touch-action: none; outline: none; }

.board-panel, .board-status, .board-where, .replay, .tactical-hint,
.tactical-bar, .tactical-menu, .tactical-popup {
  background: var(--glass); border: 1px solid var(--edge); color: var(--text);
}
.board-panel, .board-status, .board-where, .replay, .tactical-hint { position: absolute; z-index: 2; }
.board-panel, .board-status { padding: 8px 12px; white-space: pre-line; }
.board-panel { right: 8px; top: 8px; max-width: 300px; }
.board-status { left: 50%; top: 8px; transform: translateX(-50%); }
.board-where { right: 8px; bottom: 8px; padding: 2px 8px; font: 13px var(--font-head); color: var(--muted); }
.board-where:empty { display: none; }
.board-grip { display: none; }
.board-actions { display: grid; gap: 4px; margin-top: 6px; }

button, select, input, textarea { font: inherit; color: var(--text); background: rgba(15, 17, 13, 0.9);
  border: 1px solid var(--edge); border-radius: 3px; padding: 6px 10px; }
button { cursor: pointer; }
button:disabled { cursor: default; }

/* The battle replay bar (MAP.md 4b). */
.replay { left: 50%; bottom: 40px; transform: translateX(-50%); width: min(560px, calc(100% - 16px)); padding: 8px 12px; }
.replay-title { margin: 0 0 6px; font: 700 13px var(--font-head); }
.replay-row { display: flex; gap: 8px; align-items: center; }
.replay-row input[type=range] { flex: 1 1 auto; min-width: 0; padding: 0; }
.replay-time { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* The order panel (d1399): greyed out under a slanted "Sign in to deploy" for a visitor with no nation. */
.tactical-bar { position: relative; flex: 0 0 200px; display: grid; gap: 8px; align-content: start; padding: 10px; border-radius: 6px; }
.tactical-heading { margin: 0; font: 700 13px var(--font-head); text-transform: uppercase; letter-spacing: .08em; }
.tactical-bar.locked > :not(.tactical-locked) { opacity: .35; filter: grayscale(1); pointer-events: none; }
.tactical-locked { display: none; }
.tactical-bar.locked .tactical-locked { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; pointer-events: none;
  font: 800 20px var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--stamp); transform: rotate(-24deg); }
.tactical-button { width: 100%; min-height: 44px; text-align: left; }
.tactical-menu { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; display: grid; gap: 4px; padding: 8px; }
.tactical-menu-title { margin: 0 0 4px; font-weight: 700; }
#tactical-members { display: grid; gap: 4px; }
.tactical-member { width: 100%; text-align: left; }
.muted { color: var(--muted); }
.tactical-hint { left: 8px; bottom: 8px; max-width: calc(100% - 140px); padding: 4px 10px; }
.tactical-popup { position: fixed; z-index: 61; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(380px, calc(100vw - 32px));
  display: grid; gap: 10px; padding: 18px 20px; border-radius: 6px; box-shadow: 0 18px 40px rgb(0 0 0 / 60%); }
.tactical-popup p { margin: 0; }
.tactical-title { font-weight: 700; font-size: 1.1rem; }
.tactical-warning, .tactical-error { color: #ef6b62; font-weight: 600; }
#assign-players label, #assign-troops label { display: flex; gap: 6px; align-items: center; }
.tactical-answers { display: flex; gap: 8px; justify-content: flex-end; }
.tactical-answers button { min-width: 96px; font-weight: 700; color: #fff; }
.tactical-yes { background: #1f8a3b; border-color: #1f8a3b; }
.tactical-no { background: #c0262d; border-color: #c0262d; }

@media (max-width: 600px) {
  .table { flex-direction: column; padding: 8px; }
  .tactical-bar { flex: none; grid-template-columns: 1fr 1fr; }
  .tactical-heading { grid-column: 1 / -1; }
}

/* `?preview`: the front page's live picture (d1138), the map alone with no controls. */
.preview .table { padding: 0; }
.preview .board { border: 0; border-radius: 0; }
.preview .tactical-bar, .preview .board-where, .preview .board-panel,
.preview .replay, .preview .tactical-hint, .preview .board-status { display: none !important; }