/* Tactico web UI styles.
 *
 * Layout: menu | opponent-graveyard | board | player-graveyard |
 * status-bar (stacked vertically).
 *
 * Proportions are responsive only to the board size (4×4 vs 10×10);
 * everything else scales with the board edge length.
 */

:root {
  --bg: #1f2530;
  --panel: #2a3140;
  --panel-light: #36405a;
  --text: #e6e8ee;
  --muted: #9aa3b8;
  --accent: #d4a017;
  --accent-bright: #f0c040;
  /* Player-piece palette.  Human (pid 0) renders as off-white,
     AI (pid 1) renders as near-black.  Text contrast is set
     per-class below since the default grave-cell text is white
     (readable on the black piece but not on the white one). */
  --player-white: #ececec;
  --player-white-text: #111;
  --player-black: #1a1a1a;
  --player-black-text: #f0f0f0;
  --valid: rgba(80, 200, 120, 0.45);
  --selected: rgba(240, 192, 64, 0.85);
  --brick: #9c4733;
  --board-bg: #5e8c3e;
  --board-line: #2d3e1e;
  --grave-bg: #1a1f29;
}

* { box-sizing: border-box; }

#scan-video {
  width: 100%; max-width: 320px; aspect-ratio: 1 / 1;
  object-fit: cover; background: #000; border-radius: 8px;
  margin: 0.6rem 0;
}
html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  height: 100%;
  overflow: hidden;
}

body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

#menu-bar {
  display: flex; align-items: center; gap: 1rem;
  background: var(--panel); padding: 0.4rem 0.8rem;
  /* Keep the menu clear of the device status bar / notch. */
  padding-top: calc(0.4rem + env(safe-area-inset-top));
  padding-left: calc(0.8rem + env(safe-area-inset-left));
  padding-right: calc(0.8rem + env(safe-area-inset-right));
  border-bottom: 1px solid #000;
  position: relative;
}
#menu-bar .title { flex: 1; text-align: center; font-weight: bold; }
#counters { font-family: monospace; color: var(--muted); }
/* Installed app version shown in the About dialog (from version.json — the
   single source of truth shared with android/app/build.gradle), so you can
   confirm which build is installed and that updates land. */
.about-version { font-family: monospace; color: var(--muted); margin-top: 0; }
.about-version #app-version { color: var(--text); font-weight: bold; }

.menu-root { position: relative; }
.menu-button {
  background: var(--panel-light); color: var(--text);
  border: 1px solid #000; padding: 0.25rem 0.6rem; cursor: pointer;
  border-radius: 3px;
}
.menu-dropdown {
  position: absolute; top: 100%; left: 0; margin: 0; padding: 0.25rem 0;
  background: var(--panel-light); border: 1px solid #000; border-radius: 4px;
  list-style: none; min-width: 11rem; z-index: 20;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}
.menu-dropdown li {
  padding: 0.35rem 0.9rem; cursor: pointer;
}
.menu-dropdown li:hover:not(.disabled):not(.separator) {
  background: var(--accent); color: #111;
}
.menu-dropdown li.disabled { color: var(--muted); cursor: not-allowed; }
.menu-dropdown li.separator {
  border-top: 1px solid #000; padding: 0; margin: 0.25rem 0; cursor: default;
}

#ai-graveyard, #human-graveyard {
  background: var(--grave-bg);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  height: 3.1rem;
  border-bottom: 1px solid #000;
}
#human-graveyard { border-top: 1px solid #000; border-bottom: none; }

.grave-cell {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  border-right: 1px solid #000;
  font-family: system-ui, sans-serif;
  color: white;
  padding: 2px 0;
  min-width: 0;
}
.grave-cell:last-child { border-right: none; }
.grave-cell .grave-name {
  /* Rank label ("F", "B", "1", …, "10").  Bold serif so it reads
     clearly as a *label* and is visually distinct from the count
     row below. */
  font-family: "Georgia", "Times New Roman", serif;
  font-size: 1.05rem; font-weight: 700; line-height: 1;
  letter-spacing: 0.02em;
  text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.grave-cell .grave-count {
  /* Remaining-count badge — deliberately a different family/weight
     from the label so the two lines can never be confused. */
  font-family: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
  font-size: 0.7rem; font-weight: 400; line-height: 1.1;
  opacity: 0.85;
  margin-top: 1px;
}
.grave-cell.white { background: var(--player-white); color: var(--player-white-text); }
.grave-cell.black { background: var(--player-black); color: var(--player-black-text); }
.grave-cell.dim  { background: #444; color: #888; }
/* Legacy flex graveyard styles kept in case other surfaces use them. */
.grave-piece {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.85rem; font-weight: bold;
  width: 1.6rem; height: 1.6rem; border-radius: 3px;
}
.grave-piece.white { background: var(--player-white); color: var(--player-white-text); }
.grave-piece.black { background: var(--player-black); color: var(--player-black-text); }
.grave-piece .count { font-size: 0.65rem; margin-left: 0.15rem; }

#board-wrap {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  background: #0c0e14;
  min-height: 0;
  position: relative;
}
#board {
  background: var(--board-bg);
  border: 2px solid var(--board-line);
  display: block;
  max-width: 100%; max-height: 100%;
  cursor: pointer;
  /* Disable browser default touch behaviours and tap highlights so
     dragging a piece on a phone does not (a) scroll/zoom the page
     and (b) flash a translucent grey rectangle over the cell on
     every touch (the "flashing on every move" symptom). */
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

/* On-board ▶ Play button shown only when waitingForPlay (see
   _maybeShowPlayOverlay).  Centered on the board so it cannot
   be missed; large enough to read at a glance. */
#play-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;  /* let canvas clicks pass through the
                            transparent wrapper; the button itself
                            re-enables pointer events below. */
  z-index: 20;
}
#play-overlay[hidden] { display: none; }
#play-overlay-btn {
  pointer-events: auto;
  background: var(--accent); color: #111;
  font-size: 1.6rem; font-weight: bold;
  border: 3px solid #111; border-radius: 8px;
  padding: 0.9rem 2.2rem;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}
#play-overlay-btn:hover { background: var(--accent-bright); }

#status-bar {
  display: flex; align-items: center; gap: 1rem;
  background: var(--panel); padding: 0.5rem 0.8rem;
  /* Keep the bottom controls clear of the gesture-nav bar / home indicator. */
  padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
  padding-left: calc(0.8rem + env(safe-area-inset-left));
  padding-right: calc(0.8rem + env(safe-area-inset-right));
  border-top: 1px solid #000;
  /* Anchor for the absolutely-centered #status-buttons below.  Using
     absolute centering (rather than flex spacers) guarantees the CTA
     stays in the exact horizontal middle of the row regardless of
     how wide the status text gets. */
  position: relative;
}
#status-text { flex: 1; }
#status-buttons {
  /* Center the CTA in the row, independent of #status-text width. */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex; gap: 0.5rem;
  align-items: center; justify-content: center;
}
#status-buttons button {
  background: var(--accent); color: #111; font-weight: bold;
  border: none; padding: 0.4rem 0.9rem; border-radius: 3px;
  cursor: pointer;
}
#status-buttons button:disabled { background: #555; color: #888; cursor: not-allowed; }
#status-buttons button:not(:disabled):hover { background: var(--accent-bright); }

/* Primary CTA button — Auto-Deploy.  Larger, prominent, and pulses
   to draw the eye while clickable.  The pulse animation is paused
   while the button is :disabled (server in flight or game already
   started) so it does not become visual noise.
   `transform-origin` centers the scale around the button center so
   surrounding layout doesn't shift as it pulses. */
#status-buttons button.primary-cta {
  font-size: 1.4rem;
  padding: 0.7rem 1.8rem;
  border-radius: 6px;
  border: 2px solid #111;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  transform-origin: center;
  animation: cta-pulse 1.4s ease-in-out infinite;
}
#status-buttons button.primary-cta:disabled {
  animation: none;
  box-shadow: none;
  border-color: transparent;
}
@keyframes cta-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5),
                0 0 0 0 rgba(255, 215, 0, 0.7);
  }
  50% {
    transform: scale(1.06);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55),
                0 0 0 10px rgba(255, 215, 0, 0);
  }
}

/* Sand-timer overlay shown over the human's deployment area during a
   deploy round-trip (the P2P friend flow).  Positioned at 75% from the
   top of the board-wrap so it
   sits centered over the human's bottom-4-rows deployment area on a
   10x10 board.  Pointer-events:none so it never blocks input
   (defensive — the canvas is also disabled while busy). */
#deploy-busy-overlay {
  position: absolute;
  top: 75%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 25;
  display: flex; align-items: center; justify-content: center;
}
#deploy-busy-overlay[hidden] { display: none; }
.deploy-busy-hourglass {
  font-size: 5rem;
  line-height: 1;
  /* Dark halo behind the emoji so it remains readable over any
     piece colour beneath. */
  background: rgba(20, 24, 32, 0.78);
  border-radius: 50%;
  padding: 0.5rem 0.7rem;
  animation: deploy-busy-spin 1.2s ease-in-out infinite;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6));
}

/* Sand-timer overlay shown while ``/api/start_game`` is in flight
   (after the user clicks ▶ Start Game).  Reuses the same hourglass
   spinner as the deploy-busy overlay but is centred on the board
   rather than biased toward the human's deployment area. */
#start-busy-overlay {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 25;
  display: flex; align-items: center; justify-content: center;
}
#start-busy-overlay[hidden] { display: none; }
@keyframes deploy-busy-spin {
  0%   { transform: rotate(0deg)   scale(1);    }
  50%  { transform: rotate(180deg) scale(1.08); }
  100% { transform: rotate(360deg) scale(1);    }
}

#overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: flex; align-items: center; justify-content: center;
  z-index: 50;
}
/* The HTML [hidden] attribute must override our display:flex above. */
#overlay[hidden] { display: none; }
.menu-dropdown[hidden] { display: none; }
.overlay-box {
  background: var(--panel); padding: 2rem 3rem; border-radius: 6px;
  text-align: center; border: 2px solid var(--accent);
}
#overlay-text { font-size: 1.6rem; margin-bottom: 1rem; }
#overlay-restart {
  background: var(--accent); color: #111; font-weight: bold;
  border: none; padding: 0.5rem 1.2rem; border-radius: 3px; cursor: pointer;
}

/* About dialog — same backdrop / box treatment as the game-over
   overlay but with a wider, left-aligned text body. */
#about-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: flex; align-items: center; justify-content: center;
  z-index: 60;
}
#about-overlay[hidden] { display: none; }
.about-box {
  text-align: left;
  max-width: 36rem;
  max-height: 85vh;
  overflow-y: auto;
}
.about-box h2 { margin-top: 0; color: var(--accent); }
.about-box h3 {
  color: var(--accent);
  margin: 0.9rem 0 0.3rem 0;
  font-size: 1.05rem;
}
.about-box p { line-height: 1.45; margin: 0.4rem 0; }
.about-box code {
  background: #1a1d24;
  padding: 0.05rem 0.35rem;
  border-radius: 3px;
  font-weight: bold;
}
.about-box ul.combat-rules {
  margin: 0.3rem 0 0.6rem 1.2rem;
  padding: 0;
  line-height: 1.4;
}
.about-box ul.combat-rules li { margin: 0.25rem 0; }
#about-close {
  margin-top: 1rem;
  background: var(--accent); color: #111; font-weight: bold;
  border: none; padding: 0.5rem 1.2rem; border-radius: 3px; cursor: pointer;
}
#about-close:hover { background: var(--accent-bright); }

/* Send-comment dialog. */
#comment-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: flex; align-items: center; justify-content: center;
  z-index: 60;
}
#comment-overlay[hidden] { display: none; }
.comment-box {
  text-align: left;
  width: 32rem;
  max-width: 90vw;
}
.comment-box h2 { margin-top: 0; color: var(--accent); }
.comment-box p { line-height: 1.4; margin: 0.4rem 0 0.6rem 0; }
#comment-text {
  width: 100%;
  box-sizing: border-box;
  background: #1a1d24;
  color: #e6e6e6;
  border: 1px solid #444;
  border-radius: 3px;
  padding: 0.5rem;
  font-family: inherit;
  font-size: 0.95rem;
  resize: vertical;
}
#comment-status {
  min-height: 1.2rem;
  margin: 0.4rem 0;
  font-size: 0.9rem;
  color: var(--accent);
}
#comment-status.error { color: #ff7066; }
.comment-buttons {
  display: flex; justify-content: flex-end; gap: 0.6rem;
  margin-top: 0.3rem;
}
.comment-buttons button {
  background: var(--accent); color: #111; font-weight: bold;
  border: none; padding: 0.5rem 1.2rem; border-radius: 3px; cursor: pointer;
}
.comment-buttons button:disabled {
  background: #555; color: #888; cursor: not-allowed;
}
.comment-buttons button:not(:disabled):hover { background: var(--accent-bright); }
#comment-cancel {
  background: #555 !important; color: #e6e6e6 !important;
}
#comment-cancel:hover { background: #6a6a6a !important; }

/* ── P2P (human-vs-human) overlays + status pill ─────────────────── */

#mode-overlay,
#host-overlay,
#join-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex; align-items: center; justify-content: center;
  z-index: 70;
}
#mode-overlay[hidden],
#host-overlay[hidden],
#join-overlay[hidden] { display: none; }

.mode-box, .host-box, .join-box {
  width: 26rem; max-width: 90vw; text-align: center;
}
.mode-box h2, .host-box h2, .join-box h2 {
  margin-top: 0; color: var(--accent);
}
.mode-box p, .host-box p {
  line-height: 1.45; margin: 0.4rem 0 1rem 0;
}

.mode-choice {
  display: block; width: 100%;
  margin: 0.6rem 0; padding: 0.9rem 1rem;
  font-size: 1.1rem; font-weight: bold;
  border: 1px solid var(--accent); border-radius: 4px;
  background: #1a1d24; color: #e6e6e6; cursor: pointer;
}
.mode-choice:hover { background: #232732; }
.mode-choice.primary-cta {
  background: var(--accent); color: #111; border-color: var(--accent);
}
.mode-choice.primary-cta:hover { background: var(--accent-bright); }

/* The QR needs a light background so cameras read it reliably. */
#host-qr {
  background: #fff; padding: 0.75rem; border-radius: 4px;
  display: inline-block; margin: 0.4rem auto 0.8rem auto; line-height: 0;
}
#host-qr img, #host-qr canvas, #host-qr svg {
  display: block; width: 200px; height: 200px; image-rendering: pixelated;
}

#host-link-row { display: flex; gap: 0.4rem; margin: 0.4rem 0; }
#host-link {
  flex: 1; min-width: 0;
  background: #1a1d24; color: #e6e6e6;
  border: 1px solid #444; border-radius: 3px; padding: 0.45rem 0.5rem;
  font-family: inherit; font-size: 0.85rem;
}
#host-copy {
  background: var(--accent); color: #111; font-weight: bold;
  border: none; padding: 0.45rem 0.9rem; border-radius: 3px; cursor: pointer;
}
#host-copy:hover { background: var(--accent-bright); }

#host-status, #join-status {
  min-height: 1.3rem; margin: 0.6rem 0;
  color: var(--accent); font-size: 0.95rem;
}
#host-status.error, #join-status.error { color: #ff7066; }

#host-cancel, #join-cancel {
  margin-top: 0.8rem;
  background: #555; color: #e6e6e6; font-weight: bold;
  border: none; padding: 0.5rem 1.2rem; border-radius: 3px; cursor: pointer;
}
#host-cancel:hover, #join-cancel:hover { background: #6a6a6a; }

/* Connection status pill shown during a P2P game. */
#p2p-pill {
  position: fixed; top: 0.5rem; right: 0.5rem;
  z-index: 40;
  padding: 0.3rem 0.7rem; border-radius: 999px;
  font-size: 0.8rem; font-weight: bold;
  background: #1a1d24; color: #e6e6e6; border: 1px solid #444;
  pointer-events: none;
}
#p2p-pill[hidden] { display: none; }
#p2p-pill.connecting { border-color: #d6a64a; color: #f0c674; }
#p2p-pill.connected  { border-color: #5ac26a; color: #8fe39b; }
#p2p-pill.closed     { border-color: #ff7066; color: #ff9b94; }