/* --- Shared look: colors, sizes and layers for every panel (in-game and home page) --- */
:root {
  --panel-bg: rgba(20, 24, 30, 0.78);
  --panel-solid: rgba(24, 28, 34, 0.96);
  --panel-border: rgba(255, 255, 255, 0.12);
  --text: #e8ecef;
  --accent: #e0b84a;      /* active buttons, primary buttons, checkboxes */
  --accent-text: #f2d27a; /* gold text: status, notes, titles */
  --on-accent: #1a1d22;
  --danger: #ff7a6a;
  --btn-bg: rgba(255, 255, 255, 0.12);
  --btn-hover: rgba(255, 255, 255, 0.2);
  --btn-border: rgba(255, 255, 255, 0.25);
  --radius: 6px;
  --gap: 12px;            /* panels' distance from the window's edges */
  --topbar-h: 40px;
  --unit-panel-h: 132px;  /* set from the unit panel's real height (see main.js) */
  /* Layers: the map, then panels, the turn frame, banner and toasts, the settings drawer, covers. */
  --z-panel: 4;
  --z-frame: 5;
  --z-banner: 6;
  --z-drawer: 7;
  --z-handoff: 9;
  --z-home: 10;
  --z-paused: 12;
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #9fc4e0;
  font-family: system-ui, sans-serif;
}

#app, #app canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Touch gestures on the map belong to the game; otherwise the browser takes over a drag
   after a few pixels (to scroll or zoom the page) and cancels it. */
#app canvas { cursor: grab; touch-action: none; }
#app canvas.dragging { cursor: grabbing; }

[hidden] { display: none !important; }

/* One button style for the in-game panels; .primary and .active in gold. */
.btn, #settings button, #editor button, #unit-panel .unit-actions button, #clock button {
  font: inherit;
  font-size: 12px;
  padding: 3px 10px;
  background: var(--btn-bg);
  color: inherit;
  border: 1px solid var(--btn-border);
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover:not(:disabled), #settings button:hover, #editor button:hover, #unit-panel .unit-actions button:hover:not(:disabled),
#clock button:hover { background: var(--btn-hover); }
.btn.primary, .btn.active, #settings .button-group button.active, #settings .tabs button.active, #editor .tools button.active, #editor .combat button.active,
#unit-panel .unit-actions button.active {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600;
}
.btn:disabled, #unit-panel .unit-actions button:disabled { opacity: 0.4; cursor: default; }
#unit-panel .unit-actions button.active:disabled { opacity: 1; } /* the unit's current command (see unitInfo) stays bright */
.btn.icon { min-width: 28px; height: 28px; padding: 0 8px; font-size: 14px; line-height: 1; }

.panel {
  background: var(--panel-bg);
  color: var(--text);
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.5;
}

/* --- Top bar: the menu, whose turn it is, the clock, the session, settings and help --- */
/* The top bar: its left and right pieces (and the clock's) are panels just as wide as what's in
   them, so the map shows between them (the camera keeps the top row clear of the screen's edge:
   see #edges in camera.js). The row itself is transparent and lets clicks through. */
#topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-panel);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 0 var(--gap);
  box-sizing: border-box;
  pointer-events: none;
  color: var(--text);
  font-size: 13px;
}
#topbar .tb-left, #topbar .tb-right, #topbar #clock {
  display: flex; align-items: center; gap: 10px; flex: 0 1 auto; min-width: 0;
  min-height: var(--topbar-h); padding: 4px 12px; box-sizing: border-box; pointer-events: auto;
  background: linear-gradient(rgba(16, 19, 24, 0.88), rgba(16, 19, 24, 0.72));
  border: 1px solid var(--panel-border); border-top: none; border-radius: 0 0 10px 10px;
}
#topbar #clock[hidden] { display: none; }
#topbar .tb-left { max-width: 50%; }
#topbar .tb-right { justify-content: flex-end; }
#turn-status { font-weight: 600; color: var(--accent-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#turn-status .swatch {
  display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin: 0 5px 0 2px; vertical-align: -1px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
}
#turn-status .wins { color: #fff; }
#session-status { opacity: 0.8; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#session-status .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; background: #6fd08c; }
#session-status .dot.off { background: var(--danger); }
#session-status .dot.cpu { background: #8a8f98; }

/* The game clock, in the middle of the top bar (see clockUi.js). */
#clock { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 12px; font-size: 13px; }
#clock .teams { display: flex; flex-wrap: wrap; gap: 4px 14px; }
#clock .team { font-variant-numeric: tabular-nums; opacity: 0.7; white-space: nowrap; }
#clock .team i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; }
#clock .team.active { opacity: 1; font-weight: 600; }
#clock .team.low { color: var(--danger); }
#clock .row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; }
#clock button { padding: 1px 8px; }

/* --- Settings drawer (right; see settingsDrawer.js) --- */
#settings {
  position: absolute;
  top: calc(var(--topbar-h) + 8px);
  right: var(--gap);
  max-height: calc(100% - var(--topbar-h) - 8px - var(--gap));
  z-index: var(--z-drawer);
  width: 260px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background: var(--panel-solid);
  border: 1px solid var(--panel-border);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}
#settings .drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px 6px; }
#settings .drawer-head .title { font-size: 15px; margin: 0; }
#settings .tabs { display: flex; gap: 4px; padding: 0 14px 8px; border-bottom: 1px solid var(--panel-border); }
#settings .tabs button { flex: 1; }
#settings .pane { overflow-y: auto; padding: 0 14px 12px; }
#settings .title { font-weight: 600; font-size: 14px; margin-bottom: 6px; }
#settings .slider-row { display: grid; grid-template-columns: 1fr auto; margin-bottom: 8px; }
#settings .value { opacity: 0.75; font-variant-numeric: tabular-nums; }
#settings input[type="range"] { grid-column: 1 / -1; width: 100%; margin: 4px 0 0; accent-color: var(--accent); }
#settings .toggle-row { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; cursor: pointer; }
#settings .toggle-row input { margin: 0; accent-color: var(--accent); }
#settings .section { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.15); }
/* The obsidian border's options while its surface is None (see edgeStyleControls.js). */
#settings .border-options.disabled { opacity: 0.4; pointer-events: none; }
#settings .pane > .section:first-child { border-top: none; margin-top: 2px; }
/* Accordion panes (Advanced; see settingsDrawer.js): a closed section shows only its title. */
#settings .pane.accordion > .section > .title { display: flex; justify-content: space-between; align-items: center; cursor: pointer; user-select: none; }
#settings .pane.accordion > .section > .title::after { content: '▸'; opacity: 0.6; font-size: 12px; }
#settings .pane.accordion > .section.open > .title::after { content: '▾'; }
#settings .pane.accordion > .section > .title:hover { color: var(--accent); }
#settings .pane.accordion > .section:not(.open) > .title { margin-bottom: 0; }
#settings .pane.accordion > .section:not(.open) > :not(.title) { display: none; }
#settings .hint { font-weight: 400; font-size: 11px; opacity: 0.6; margin-left: 4px; }
#settings .button-group { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
#settings .section > .label { font-size: 12px; opacity: 0.75; margin: 6px 0 4px; }
#settings button.danger { border-color: var(--danger); color: var(--danger); }

/* --- Event log (top left; see eventLog.js) and the toast for the newest event --- */
#event-log {
  position: absolute;
  top: calc(var(--topbar-h) + 8px);
  left: var(--gap);
  z-index: var(--z-panel);
  width: 320px;
  max-width: calc(100vw - 2 * var(--gap));
  padding: 3px 0;
}
#event-log .log-head { display: flex; align-items: center; gap: 6px; padding: 0 10px; font-size: 12px; cursor: pointer; user-select: none; opacity: 0.85; }
#event-log .log-head .count { opacity: 0.6; }
#event-log .log-head .caret { margin-left: auto; opacity: 0.7; }
#event-log ol { list-style: none; margin: 2px 0 0; padding: 0; max-height: 132px; overflow-y: auto; }
#event-log li { display: flex; gap: 8px; padding: 2px 10px; font-size: 12px; line-height: 1.4; }
#event-log li .turn { opacity: 0.5; font-variant-numeric: tabular-nums; flex: none; }
#event-log li.at { cursor: pointer; }
#event-log li.at:hover { background: rgba(255, 255, 255, 0.08); }
#event-log li.fresh { color: var(--accent-text); }
#event-log.collapsed ol { display: none; }

/* --- Score panel (top right, under the drawer; see scorePanel.js) --- */
#scores {
  position: absolute;
  top: calc(var(--topbar-h) + 8px);
  right: var(--gap);
  z-index: var(--z-panel);
  min-width: 150px;
  padding: 3px 0;
  background: rgba(20, 24, 30, 0.45); /* lighter than other panels: the map shows through */
}
#scores .score-head { display: flex; align-items: center; gap: 6px; padding: 0 10px; font-size: 12px; cursor: pointer; user-select: none; opacity: 0.85; }
#scores .score-head .caret { margin-left: auto; opacity: 0.7; }
#scores ol { list-style: none; margin: 2px 0 0; padding: 0; }
#scores li { display: flex; align-items: center; gap: 6px; padding: 2px 10px; font-size: 12px; line-height: 1.4; }
#scores li .swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45); }
#scores li .name { flex: 1; white-space: nowrap; }
#scores li .score { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 2.5em; text-align: right; }
#scores li.active { color: var(--accent-text); }
#scores li.out { opacity: 0.45; text-decoration: line-through; }
#scores.collapsed ol { display: none; }

#toast {
  position: absolute;
  top: calc(var(--topbar-h) + 10px);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-banner);
  max-width: min(640px, calc(100vw - 2 * var(--gap)));
  box-sizing: border-box;
  padding: 6px 16px;
  color: var(--accent-text);
  font-weight: 600;
  text-align: center;
  pointer-events: none;
  animation: toast-in 0.18s ease-out;
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, -6px); } }

/* --- Mode chip (above the unit panel): what the player is doing and the keys for it; the alert
   chip (under the top bar) for lasting trouble, like losing sync with the server --- */
#mode-chip, #alert-chip {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-panel);
  max-width: min(760px, calc(100vw - 2 * var(--gap)));
  box-sizing: border-box;
  padding: 4px 14px;
  border-radius: 14px;
  background: var(--panel-bg);
  border: 1px solid rgba(242, 210, 122, 0.45);
  color: var(--accent-text);
  font-size: 13px;
  text-align: center;
  pointer-events: none;
}
#mode-chip { bottom: calc(var(--gap) + var(--unit-panel-h) + 8px); }
#alert-chip { top: calc(var(--topbar-h) + 48px); border-color: var(--danger); color: var(--danger); font-weight: 600; }

/* --- Away banner (online, see refreshAway in main.js): over the paused cover, so its button works --- */
#away {
  position: absolute;
  top: calc(var(--topbar-h) + 84px);
  left: 50%;
  transform: translateX(-50%);
  z-index: calc(var(--z-paused) + 1);
  max-width: min(640px, calc(100vw - 2 * var(--gap)));
  box-sizing: border-box;
  padding: 6px 14px;
  font-size: 13px;
  text-align: center;
}
#away .row + .row { margin-top: 4px; }
#away button { margin-left: 8px; font: inherit; padding: 2px 10px; background: var(--accent); border: 1px solid var(--accent);
  color: var(--on-accent); border-radius: 4px; cursor: pointer; }

/* --- Hover card: the hex under the cursor (see showHoverText in main.js) --- */
#hover-card {
  position: fixed;
  z-index: var(--z-panel);
  max-width: 280px;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.45;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
#hover-card .head { font-weight: 600; font-size: 13px; }
#hover-card .attack { color: #ffb19f; font-weight: 600; }
#hover-card .warn { color: var(--danger); }
#hover-card .dim { opacity: 0.6; }
#hover-card .edit { color: var(--accent-text); }
/* Touch: docked above the unit panel (a finger would cover it at the touch point). */
#hover-card.docked { left: 50% !important; top: auto !important; transform: translateX(-50%);
  bottom: calc(var(--gap) + var(--unit-panel-h) + 44px); max-width: min(420px, calc(100vw - 2 * var(--gap))); }

/* The compass in the top bar while the view is turned (see viewTurned in main.js): N points north. */
#compass[hidden] { display: none; }
#compass .needle { display: inline-block; font-weight: 700; color: #e0503a; }
#compass .needle::before { content: '▲'; display: block; font-size: 8px; line-height: 6px; text-align: center; }

/* The unit panel's chips for what's on the hex (see setHere in unitPanel.js): units aboard indented
   under their ship, the selected one highlighted. */
#unit-panel .unit-here { display: flex; flex-wrap: wrap; gap: 3px; margin: 4px 0 2px; max-width: 440px; pointer-events: auto; }
#unit-panel .unit-here[hidden] { display: none; }
#unit-panel .here-chip { font-size: 11px; padding: 2px 6px; border-radius: 10px; cursor: pointer;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.18); color: inherit; }
#unit-panel .here-chip.aboard { margin-left: 8px; border-style: dashed; }
#unit-panel .here-chip.active { border-color: var(--accent); color: var(--accent); }
#unit-panel .here-chip .tag { opacity: 0.6; margin-left: 4px; }

/* --- End turn (bottom right) --- */
#end-turn {
  position: absolute;
  right: var(--gap);
  bottom: var(--gap);
  z-index: var(--z-panel);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  width: 150px;
  padding: 8px;
  box-sizing: border-box;
}
#end-turn .btn { font-size: 13px; padding: 5px 10px; }
#end-turn #end-turn-button { font-size: 15px; padding: 8px 10px; font-weight: 600; }
#end-turn #end-turn-button.ready {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
  box-shadow: 0 0 14px rgba(224, 184, 74, 0.7); animation: ready-pulse 1.6s ease-in-out infinite;
}
@keyframes ready-pulse { 50% { box-shadow: 0 0 4px rgba(224, 184, 74, 0.4); } }
#end-turn .auto-end { display: flex; align-items: center; gap: 6px; font-size: 12px; opacity: 0.85; cursor: pointer; }
#end-turn .auto-end input { margin: 0; accent-color: var(--accent); }

/* --- Watch bar (bottom right, in the End turn box's place, while only computers play) --- */
#watch-bar {
  position: absolute;
  right: var(--gap);
  bottom: var(--gap);
  z-index: var(--z-panel);
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 236px;
  padding: 8px;
  box-sizing: border-box;
  font-size: 12px;
}
#watch-bar[hidden] { display: none; }
#watch-bar .wb-row { display: flex; flex-wrap: wrap; gap: 4px; }
#watch-bar .wb-row .btn { flex: 1; font-size: 12px; padding: 4px 6px; }
#watch-bar .wb-play { font-size: 14px !important; font-weight: 600; }
#watch-bar .wb-play.ready { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
#watch-bar .wb-status { opacity: 0.85; }
#watch-bar .wb-label { font-size: 11px; opacity: 0.6; text-transform: uppercase; letter-spacing: 0.05em; }
#watch-bar .btn.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
#watch-bar .wb-team { border-left: 4px solid var(--team); }
#watch-bar .wb-replay { display: flex; flex-direction: column; gap: 4px; padding-bottom: 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
#watch-bar .wb-replay[hidden] { display: none; }
#watch-bar .wb-seek { align-items: center; }
#watch-bar .wb-slider { flex: 1; min-width: 0; accent-color: var(--accent); }
#watch-bar .wb-turns { font-size: 12px; opacity: 0.85; white-space: nowrap; }
#watch-bar .wb-team.out { text-decoration: line-through; opacity: 0.5; }

/* The editor (games started with &edit; see editor.js): left side, under the event log. */
#editor {
  position: absolute;
  top: calc(var(--topbar-h) + 190px);
  left: var(--gap);
  z-index: var(--z-panel);
  width: 200px;
  padding: 10px 14px;
  background: var(--panel-bg);
  color: var(--text);
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-size: 13px;
}
#editor.editing { border-color: var(--accent); }
#editor .title { font-weight: 600; font-size: 15px; margin-bottom: 6px; }
#editor .hint { font-weight: 400; font-size: 11px; opacity: 0.6; margin-left: 4px; }
#editor .label { margin: 8px 0 4px; opacity: 0.75; }
#editor .button-group { display: flex; flex-wrap: wrap; gap: 4px; }
#editor button { padding: 3px 9px; }
#editor .teams button { border-left: 4px solid var(--team); }
#editor .teams button.active { background: var(--team); border-color: var(--team); color: #fff; }
#editor .toggle-row { display: flex; align-items: center; gap: 6px; margin-top: 10px; cursor: pointer; }
#editor .toggle-row input { margin: 0; accent-color: var(--accent); }

#perf {
  position: absolute;
  bottom: var(--gap);
  left: var(--gap);
  z-index: var(--z-panel);
  min-width: 200px;
  padding: 8px 12px;
  background: var(--panel-bg);
  color: var(--text);
  border-radius: var(--radius);
  font-size: 12px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
#perf div { display: flex; justify-content: space-between; gap: 16px; }
#perf span:first-child { opacity: 0.65; }
#perf .gpu-name { display: block; margin-top: 4px; opacity: 0.65; font-size: 11px; }

/* F1: the top bar, settings, event log, perf overlay and editor hidden (see main.js). */
body.panels-hidden #settings, body.panels-hidden #topbar, body.panels-hidden #perf, body.panels-hidden #editor,
body.panels-hidden #event-log, body.panels-hidden #scores { display: none !important; }

/* --- Unit panel (bottom center): the focused unit's diorama and details (see src/unitPanel.js) --- */
#unit-panel {
  position: absolute;
  bottom: var(--gap);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-panel);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px 8px 8px;
  pointer-events: none; /* only the buttons take clicks */
  min-width: 300px;
  max-width: calc(100vw - 2 * var(--gap) - 2 * 160px); /* clear of End turn (and centered) */
  box-sizing: border-box;
}
#unit-panel .unit-view { width: 116px; height: 116px; flex: none; border-radius: 4px; background: rgba(255, 255, 255, 0.05); }
#unit-panel.no-unit .unit-view { display: none; }
#unit-panel .unit-title { font-weight: 600; font-size: 15px; }
#unit-panel .unit-hex { opacity: 0.75; }
#unit-panel .unit-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; max-width: 440px; pointer-events: auto; }
#unit-panel .unit-actions button { padding: 2px 8px; }

/* --- Dialogs --- */
dialog {
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 16px 20px;
  background: var(--panel-solid);
  color: var(--text);
  font: 14px system-ui, sans-serif;
  min-width: 260px;
  max-width: calc(100vw - 48px);
  box-sizing: border-box;
}
dialog::backdrop { background: rgba(0, 0, 0, 0.35); }
dialog .dialog-title { font-weight: 600; font-size: 17px; margin-bottom: 8px; }
dialog .dialog-body { opacity: 0.85; margin-bottom: 12px; }
dialog .dialog-info { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 8px 10px; font-size: 12px;
  background: rgba(255, 255, 255, 0.05); border-radius: 5px; }
dialog .dialog-info span { flex: 1; opacity: 0.8; }
dialog .dialog-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
dialog select, dialog button {
  font: inherit;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.1);
  color: inherit;
  border: 1px solid var(--btn-border);
  border-radius: 4px;
}
dialog select option { background: #1c2026; }
dialog .dialog-buttons { display: flex; justify-content: flex-end; gap: 8px; }
dialog button { background: var(--accent); border-color: var(--accent); color: var(--on-accent); cursor: pointer; font-weight: 600; }
dialog button.secondary { background: rgba(255, 255, 255, 0.1); border-color: var(--btn-border); color: inherit; font-weight: 400; }
dialog .dialog-radios { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
dialog .dialog-radio { display: flex; align-items: center; gap: 8px; cursor: pointer; }
dialog .dialog-radio input { margin: 0; accent-color: var(--accent); }
dialog .dialog-radio span { opacity: 0.65; }
dialog .dialog-check { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; font-size: 13px; opacity: 0.85; cursor: pointer; }
dialog .dialog-check input { margin: 0; accent-color: var(--accent); }
dialog input[type="number"] {
  width: 80px;
  font: inherit;
  padding: 3px 6px;
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  border: 1px solid var(--btn-border);
  border-radius: 4px;
}

/* The keys-and-mouse sheet (? key or button; see helpSheet.js). */
#menu-dialog { width: min(380px, calc(100vw - 48px)); }
#menu-dialog .menu-teams { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
#menu-dialog .menu-teams li { display: flex; align-items: center; gap: 8px; }
#menu-dialog .menu-teams .swatch { width: 10px; height: 10px; border-radius: 2px; flex: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45); }
#menu-dialog .menu-teams .who { flex: 1; opacity: 0.7; }
#menu-dialog .menu-teams .out { opacity: 0.55; text-decoration: line-through; }
#menu-dialog .menu-actions { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
#menu-dialog .menu-actions button { text-align: left; }
#confirm-dialog button[value="ok"].danger { background: var(--danger); border-color: var(--danger); }
#help-dialog { width: min(780px, calc(100vw - 48px)); max-height: calc(100vh - 80px); }
#help-dialog .help-groups { columns: 2 300px; column-gap: 28px; margin-bottom: 12px; }
#help-dialog section { break-inside: avoid; margin-bottom: 14px; }
#help-dialog h3 { margin: 0 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-text); }
#help-dialog dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0; font-size: 13px; }
#help-dialog dt { white-space: nowrap; }
#help-dialog dd { margin: 0; opacity: 0.8; }
#help-dialog kbd { display: inline-block; min-width: 1.2em; padding: 0 5px; text-align: center; font: 600 11px/1.6 system-ui, sans-serif;
  background: rgba(255, 255, 255, 0.1); border: 1px solid var(--btn-border); border-bottom-width: 2px; border-radius: 4px; }

/* --- Home page (src/home.js): over a dimmed map --- */
#home {
  position: fixed;
  inset: 0;
  z-index: var(--z-home);
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, rgba(14, 18, 24, 0.35), rgba(14, 18, 24, 0.8));
  color: var(--text);
  overflow: auto;
}
#home .home-card {
  width: min(460px, calc(100vw - 32px));
  padding: 22px 26px 18px;
  background: rgba(22, 26, 32, 0.9);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}
#home .home-card:has(> #home-menu:not([hidden])) { width: min(360px, calc(100vw - 32px)); } /* the menu: just buttons */
#home h1 { margin: 0 0 2px; font-size: 34px; letter-spacing: 0.06em; color: var(--accent-text); text-align: center; }
#home .tagline { margin: 0 0 6px; font-size: 13px; font-style: italic; opacity: 0.65; text-align: center; }
#home h2 { margin: 18px 0 10px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.7; }
/* New Game: the rows in groups (Players, Map, Rules), each under a small heading with a rule. */
#home .group { margin: 0 0 12px; }
#home .group > h3 {
  display: flex; align-items: center; gap: 8px; margin: 0 0 8px;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-text); opacity: 0.85;
}
#home .group > h3::after { content: ''; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.12); }
/* A row: its label in a fixed column, its options filling the rest, so every row's buttons start
   and end at the same place; a row's buttons share its width equally. */
#home .field { display: grid; grid-template-columns: 100px 1fr; column-gap: 14px; align-items: center; margin-bottom: 8px; font-size: 14px; }
#home .seg, #home .toggles { display: flex; min-width: 0; }
#home .seg button, #home .toggles button {
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;
  text-align: center;
  font: inherit;
  font-size: 13px;
  padding: 5px 4px;
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  border: 1px solid rgba(255, 255, 255, 0.2);
  margin-left: -1px;
  cursor: pointer;
}
#home .seg button:first-child, #home .toggles button:first-child { border-radius: 5px 0 0 5px; margin-left: 0; }
#home .seg button:last-child, #home .toggles button:last-child { border-radius: 0 5px 5px 0; }
#home .seg button.on, #home .toggles button.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; position: relative; }
/* Advanced options (New Game): a collapsible group, its header like a group heading with a chevron
   and, on the right, a summary of its values (changed ones in gold). */
#home details.advanced { margin: 0 0 12px; }
#home details.advanced > summary {
  display: flex; align-items: center; gap: 8px; margin: 0 0 8px; cursor: pointer; list-style: none; user-select: none;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-text);
}
#home details.advanced > summary::-webkit-details-marker { display: none; }
#home details.advanced > summary::before { content: '▸'; font-size: 11px; width: 8px; transition: transform 0.15s; }
#home details.advanced[open] > summary::before { transform: rotate(90deg); }
#home details.advanced > summary::after { content: ''; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.12); order: 1; }
#home .advanced-title { opacity: 0.85; }
#home .advanced-summary {
  order: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11px; font-weight: 400; text-transform: none; letter-spacing: 0; color: rgba(255, 255, 255, 0.55);
}
#home .advanced-summary .changed { color: var(--accent-text); font-weight: 600; }
#home details.advanced > summary:hover .advanced-title, #home details.advanced > summary:focus-visible .advanced-title { opacity: 1; text-decoration: underline; }
#home details.advanced > summary:focus-visible { outline: none; }
/* New Game help: an ⓘ after each label, and the one floating box its tip shows in (see home.js). */
#home .field > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
#home button.tip {
  display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; padding: 0; flex: none;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.35); background: none; color: inherit; opacity: 0.6;
  font: italic 600 9px/1 Georgia, serif; cursor: help;
}
#home button.tip:hover, #home button.tip:focus-visible { opacity: 1; border-color: var(--accent); color: var(--accent-text); outline: none; }
#home .tip-box {
  position: fixed; z-index: 1; padding: 7px 10px; border-radius: 6px; font-size: 12px; line-height: 1.4;
  background: rgba(14, 18, 24, 0.97); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
/* Played by: a button per team (all four), its icon (a person or a computer) in the team's color;
   no "on" state. Teams past the player count are off and dimmed. */
#home .toggles .who { display: inline-flex; align-items: center; justify-content: center; vertical-align: -4px; }
#home .toggles .who svg { width: 18px; height: 18px; fill: currentColor; filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.9)); }

#home .toggles .swatch { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45); }
#home .hint { font-size: 12px; opacity: 0.65; margin: 4px 0 12px; line-height: 1.4; }
#home button.primary, #home .row button, #home .code-box button {
  font: inherit;
  font-size: 14px;
  padding: 7px 16px;
  border-radius: 5px;
  border: 1px solid var(--btn-border);
  background: rgba(255, 255, 255, 0.1);
  color: inherit;
  cursor: pointer;
}
#home button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
#home button:disabled { opacity: 0.45; cursor: default; }
/* (Played by: the host's Blue, online, is locked but playing: full strength; teams not playing dim.) */
#home .toggles button:disabled { opacity: 1; }
#home .toggles button.out { opacity: 0.3; }
#home button.wide { width: 100%; }
#home .menu-buttons { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
#home .menu-buttons button { font: inherit; font-size: 15px; padding: 9px 16px; border-radius: 6px; border: 1px solid var(--btn-border);
  background: rgba(255, 255, 255, 0.08); color: inherit; cursor: pointer; text-align: center; }
#home .menu-buttons button:hover:not(:disabled) { background: rgba(255, 255, 255, 0.16); }
#home .menu-buttons button.primary { font-size: 16px; padding: 11px 16px; background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
#home .menu-buttons button.primary:hover:not(:disabled) { filter: brightness(1.08); background: var(--accent); }
#home .menu-buttons #resume-hint { margin: -2px 0 8px; text-align: center; }
#home .screen-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
#home .screen-head h2 { margin: 0; }
#home .screen-head .back { font: inherit; font-size: 13px; padding: 3px 10px; border-radius: 5px; border: 1px solid var(--btn-border);
  background: rgba(255, 255, 255, 0.08); color: inherit; cursor: pointer; }
#home .screen-head .back:hover { background: rgba(255, 255, 255, 0.16); }
#home #load-list { list-style: none; padding: 0; margin: 0; }
#home #load-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
#home #load-list li .hint { display: block; margin: 2px 0 0; }
#home .about { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 16px 0 12px; font-size: 14px; }
#home .about dt { opacity: 0.65; }
#home .about dd { margin: 0; }
/* New Game map preview (src/mapPreview.js): a sample map on near-black, so its grayscale land and sea stand out (Hidden: grayscale but around the starts). */
#home .map-preview { position: relative; aspect-ratio: 1.68; margin: 0 0 14px; background: #15181d; border-radius: 6px; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
#home .map-preview canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* The map's east and west edges: gray bars where it doesn't wrap, none where it does. */
#home .preview-frame { position: absolute; box-sizing: border-box; border-left: 4px solid #7a808a; border-right: 4px solid #7a808a; pointer-events: none; }
#home .preview-frame.wraps { border-left: none; border-right: none; }
#home .preview-badge { position: absolute; padding: 2px 7px; border-radius: 10px; font-size: 11px; background: rgba(14, 18, 24, 0.82); color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.15); pointer-events: none; }
#home .preview-badge.clock { top: 6px; right: 6px; }
#home .preview-badge.size { top: 6px; left: 6px; }
#home .preview-badge.wrap { bottom: 6px; left: 6px; color: var(--accent-text); }
#home .preview-badge.sample { bottom: 6px; right: 6px; opacity: 0.8; font-style: italic; }
/* Settings from the home page: the drawer shows over it. */
body.at-home #settings { z-index: calc(var(--z-home) + 1); }
#home .join { display: flex; gap: 8px; }
/* The clock's settings, right under Game clock and lined up with its buttons (past the label column). */
#home .clock-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin: -2px 0 10px 114px; padding: 6px 8px; border-left: 2px solid rgba(255, 255, 255, 0.15); font-size: 12px; opacity: 0.9; }
#home .clock-fields input {
  width: 54px;
  font: inherit;
  padding: 2px 4px;
  margin: 0 3px;
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  border: 1px solid var(--btn-border);
  border-radius: 4px;
}
#home .join input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 16px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  border: 1px solid var(--btn-border);
  border-radius: 5px;
}
#home .code-box { display: flex; align-items: center; gap: 12px; font-size: 13px; }
#home .code-box strong { font-size: 28px; letter-spacing: 0.18em; color: var(--accent-text); font-variant-numeric: tabular-nums; }
#home #lobby-seats { list-style: none; padding: 0; margin: 8px 0; }
#home #lobby-seats li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); font-size: 14px; }
#home #lobby-seats .swatch { width: 14px; height: 14px; border-radius: 3px; flex: none; }
#home #lobby-seats .who { margin-left: auto; opacity: 0.7; font-size: 13px; }
#home .row { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; }
#home .error { color: #ff8a7a; font-size: 13px; min-height: 1em; margin: 12px 0 0; }

/* --- Your turn: frame and banner (colors set from the team in main.js) --- */
#turn-frame {
  position: fixed;
  inset: 0;
  z-index: var(--z-frame);
  pointer-events: none;
  border: 3px solid var(--team);
  box-shadow: inset 0 0 18px var(--team);
}
#turn-banner {
  position: fixed;
  top: 14%;
  left: 50%;
  z-index: var(--z-banner);
  transform: translateX(-50%);
  pointer-events: none;
  padding: 10px 34px;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: #fff;
  background: rgba(20, 24, 30, 0.82);
  border: 2px solid var(--team);
  border-radius: 10px;
  text-shadow: 0 0 12px var(--team);
  animation: turn-banner 2.4s ease forwards;
}
@keyframes turn-banner {
  0% { opacity: 0; transform: translate(-50%, -12px) scale(0.96); }
  12% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  75% { opacity: 1; }
  100% { opacity: 0; }
}

/* --- Game clock pause cover --- */
#paused {
  position: fixed;
  inset: 0;
  z-index: var(--z-paused);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #14181e;
  color: var(--text);
}
#paused .paused-card { text-align: center; }
#paused .paused-title { font-size: 36px; font-weight: 700; }
#paused .paused-note { margin: 10px 0 14px; opacity: 0.7; }
#paused button {
  font: inherit;
  font-size: 15px;
  padding: 7px 22px;
  background: var(--accent);
  border: 1px solid var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  border-radius: 5px;
  cursor: pointer;
}

/* --- Hot Seat hand-off cover --- */
#handoff {
  position: fixed;
  inset: 0;
  z-index: var(--z-handoff);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #14181e;
  color: var(--text);
  cursor: pointer;
}
#handoff .handoff-card { text-align: center; }
#handoff .handoff-team { font-size: 40px; font-weight: 700; letter-spacing: 0.04em; }
#handoff .handoff-hint { margin-top: 10px; opacity: 0.65; }
/* Auto-end turn here too, to change before the turn's own orders run (see showHandoff in main.js). */
#handoff .handoff-auto-end { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-size: 13px; opacity: 0.85; cursor: pointer; }
#handoff .handoff-auto-end input { margin: 0; accent-color: var(--accent); }

/* --- Small screens (phones, narrow windows) --- */
@media (max-width: 760px) {
  :root { --gap: 8px; --topbar-h: 68px; }
  #topbar { flex-wrap: wrap; gap: 4px 6px; }
  #topbar .tb-left, #topbar .tb-right, #topbar #clock { min-height: 32px; padding: 3px 8px; }
  #topbar .tb-left { order: 1; flex: 1 1 auto; max-width: none; }
  #topbar .tb-right { order: 2; flex: 0 0 auto; }
  #topbar #clock { order: 3; flex: 1 1 100%; justify-content: flex-start; border-radius: 0 0 10px 10px; }
  #session-status { display: none; }
  #settings { left: var(--gap); right: var(--gap); width: auto; }
  #event-log { width: auto; right: calc(var(--gap) + 120px); }
  #scores { min-width: 104px; }
  #editor { top: auto; bottom: calc(var(--gap) + var(--unit-panel-h) + 50px); }
  #unit-panel {
    left: var(--gap); right: var(--gap); transform: none; min-width: 0; max-width: none;
    bottom: calc(var(--gap) + 50px); padding: 6px 8px 6px 6px; gap: 8px; font-size: 12px;
  }
  #unit-panel .unit-view { width: 72px; height: 72px; }
  #unit-panel .unit-title { font-size: 14px; }
  #unit-panel .unit-actions { max-width: none; }
  #mode-chip { bottom: calc(var(--gap) + 50px + var(--unit-panel-h) + 6px); font-size: 12px; }
  #end-turn { left: var(--gap); width: auto; flex-direction: row; align-items: center; padding: 6px; }
  #end-turn .btn { flex: 1; }
  #end-turn #end-turn-button { font-size: 14px; padding: 6px 10px; }
  #end-turn .auto-end { flex: none; }
  #watch-bar { left: var(--gap); width: auto; }
  #turn-banner { font-size: 24px; padding: 8px 20px; }
  #hover-card.docked { bottom: calc(var(--gap) + 50px + var(--unit-panel-h) + 44px); }
}