/* DeetsTanks — the game's own art + layout (docs/tanks.md).
   Loaded after chrome.css → table.css; gt- classes are the shell's and
   are never restyled here (docs/games.md, "Class prefixes").

   ── The art carve-out ─────────────────────────────────────────────
   The arena is canvas-drawn, but its palette lives HERE, on the .tk
   root, read once by render.js (getComputedStyle) — so the fixed
   literals stay inside the game-art carve-out like every sibling's
   felt. Wii Play's cork board is the reference: warm tan floor with
   visible tile seams, raised walls. Seat colors are NOT part of this —
   player hulls wear --gseat via the seat view's hex (docs/games.md). */
.tk {
  --tk-floor-a: #d9c893;
  --tk-floor-b: #d2c084;
  --tk-seam: rgba(90, 70, 40, 0.16);
  --tk-wall: #8a7757;
  --tk-hole: #4a4034;
  --tk-hole-rim: #332c23;
  --tk-wall-top: #a08c68;
  --tk-block: #b98a4e;
  --tk-block-top: #cda05f;
  --tk-enemy1: #a3562c;
  --tk-enemy1-dark: #77401f;
  --tk-track: rgba(30, 24, 16, 0.55);
  /* a shell is a BALL sitting on the board, not a dot punched into it:
     -lit is the light side, -rim the far edge, --tk-shadow the contact
     shadow it drops. render.js shades between them (docs/tanks.md,
     "Shells"), so a theme gets its own shell for free. */
  --tk-bullet: #2e2820;
  --tk-bullet-lit: #cdbfa4;
  --tk-bullet-rim: #14110c;
  --tk-shadow: rgba(40, 30, 18, 0.28);
  /* the turret wears the hull's colour and sits ON it, so it needs an
     edge of its own or the barrel reads as part of the body */
  --tk-turret-rim: rgba(22, 17, 11, 0.85);
  --tk-mine: #3a332a;
  --tk-mine-arm: #d8442e;
  --tk-boom: #e0862f;
  --tk-aim: rgba(40, 90, 160, 0.55);
}

/* ── per-level themes (docs/tanks.md, "Per-level art") ────────────
   A level names one with a `theme` header line; render.js stamps it on
   this root as data-tk-theme and re-reads the palette. Cork above is
   the default and the fallback.

   TO ADD A LOOK: copy a block, rename it, change the hexes. That is
   the whole procedure — no JS, no build step, no registry to keep in
   sync. Only override what differs; everything unset inherits cork.

   To add hand-drawn TILES instead of (or on top of) colours, drop
   PNGs into assets/sprites/tanks/<theme>/ — tile-floor, tile-wall,
   tile-block, tile-hole, plus tile-floor-1..3 for floor variety. They
   are probed once when a level using the theme loads, and anything
   missing falls back to these colours. Draw tiles at roughly display
   size (~64px); do NOT upscale chunky art, or the floor reads at a
   different apparent resolution from the tanks (docs/tanks.md, "Floor
   art and the one rule"). */

/* snow — bright, cold, low-contrast ground so shells stay legible */
.tk[data-tk-theme="snow"] {
  --tk-floor-a: #e8eef2;
  --tk-floor-b: #dde5ec;
  --tk-seam: rgba(70, 90, 110, 0.14);
  --tk-wall: #8fa3b4;
  --tk-wall-top: #b3c4d1;
  --tk-block: #6f8496;
  --tk-block-top: #8ba0b0;
  --tk-hole: #2f3b45;
  --tk-hole-rim: #1d262d;
  --tk-track: rgba(40, 55, 70, 0.42);
  --tk-scorch: rgba(30, 40, 50, 0.30);
  --tk-bullet-lit: #ccd9e4;
  --tk-shadow: rgba(45, 65, 85, 0.26);
  --tk-turret-rim: rgba(16, 26, 36, 0.85);
}

/* dusk — warm dark ground; walls read as silhouette */
.tk[data-tk-theme="dusk"] {
  --tk-floor-a: #3a3350;
  --tk-floor-b: #342e48;
  --tk-seam: rgba(200, 190, 230, 0.10);
  --tk-wall: #241f34;
  --tk-wall-top: #4a4166;
  --tk-block: #6b4a7a;
  --tk-block-top: #8a629b;
  --tk-hole: #14111d;
  --tk-hole-rim: #0a0810;
  --tk-track: rgba(10, 8, 16, 0.55);
  --tk-bullet: #f2e6c0;
  --tk-bullet-lit: #fffaf0;
  --tk-bullet-rim: #8d7a4a;
  --tk-shadow: rgba(0, 0, 0, 0.38);
  /* dark ground: the barrel needs a LIGHT rim to survive overhanging it */
  --tk-turret-rim: rgba(240, 235, 255, 0.6);
  --tk-aim: rgba(150, 190, 255, 0.55);
  --tk-scorch: rgba(0, 0, 0, 0.35);
}

/* rust — industrial floor plate, oxidised walls */
.tk[data-tk-theme="rust"] {
  --tk-floor-a: #6e5a48;
  --tk-floor-b: #66533f;
  --tk-seam: rgba(20, 14, 8, 0.28);
  --tk-wall: #4a3a2c;
  --tk-wall-top: #7a6247;
  --tk-block: #9c5a2e;
  --tk-block-top: #c2743c;
  --tk-hole: #1c1610;
  --tk-hole-rim: #0e0a07;
  --tk-track: rgba(15, 10, 6, 0.6);
  --tk-scorch: rgba(10, 6, 3, 0.4);
  --tk-bullet-lit: #d6c5a8;
  --tk-shadow: rgba(12, 8, 4, 0.34);
  --tk-turret-rim: rgba(8, 5, 3, 0.88);
}

/* ── the bento (poker's grid: big + rail, role strip below) ────── */
.tk-bento {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 15rem;
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas:
    "big rail"
    "role role";
  gap: var(--space-3);
  position: relative;
  align-items: start;
}
.tk-tile {
  background: var(--menu-surface);
  -webkit-backdrop-filter: var(--menu-backdrop);
  backdrop-filter: var(--menu-backdrop);
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel);
  padding: var(--space-3);
}
.tk-tile--big {
  grid-area: big;
  height: 34rem;
  position: relative;
  overflow: hidden;
}
.tk-rail {
  grid-area: rail;
  height: 34rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}
.tk-tile--players {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  overflow-y: auto;
}
.tk-tile--campaign {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
/* the controls strip — where poker's hand panel sits, collapsed to a
   strip because a tank has no hidden state (docs/tanks.md) */
.tk-tile--role {
  grid-area: role;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 3.4rem;
}

/* ── the arena canvas + its two overlays ───────────────────────── */
.tk-canvas {
  position: absolute;
  inset: var(--space-2);
  width: calc(100% - var(--space-2) * 2);
  height: calc(100% - var(--space-2) * 2);
  border-radius: var(--radius-control);
}
.tk-canvas.is-hidden { visibility: hidden; }
.tk-lobbywrap {
  position: relative;
  height: 100%;
  overflow-y: auto;
  scrollbar-gutter: stable;
}
.tk-preview { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); margin-top: var(--space-3); }
.tk-preview__cv { width: 100%; max-width: 24rem; height: 12rem; }
.tk-preview__cap { margin: 0; color: var(--subtext); font-size: 0.8rem; }
/* the interstitial card floats over the arena — mahjong's handOver
   idiom: absolute overlay, never a new layout */
/* the author display beats the UA's [hidden] rule, so hidden must be
   restated — without this the invisible overlay eats every lobby click */
.tk-overlay[hidden] { display: none; }
.tk-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--bg) 35%, transparent);
  border-radius: var(--radius-panel);
}
.tk-over {
  background: var(--menu-surface);
  -webkit-backdrop-filter: var(--menu-backdrop);
  backdrop-filter: var(--menu-backdrop);
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel);
  padding: var(--space-4) var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}
.tk-over__line { margin: 0; color: var(--title); font-family: var(--font-title); font-size: 1.15rem; }
.tk-over__sub { margin: 0; color: var(--subtext); font-size: 0.85rem; min-height: 1.2em; }

/* ── participants: dot · name · hearts · kills ─────────────────── */
.tk-pstrip {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gseat, var(--border));
  border-radius: var(--radius-control);
}
.tk-pstrip.is-empty { opacity: 0.5; border-left-color: var(--border); }
.tk-pstrip__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9rem;
}
.tk-pstrip__nums { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
.tk-hearts { color: var(--stop, #c74a57); letter-spacing: 0.06em; font-size: 0.85rem; }
.tk-heart.is-spent { opacity: 0.22; }
.tk-kills { color: var(--subtext); font-family: var(--font-mono); font-size: 0.8rem; white-space: nowrap; }

/* ── campaign: numeral + one pip per enemy still up ────────────── */
.tk-campaign__num { color: var(--title); font-family: var(--font-title); font-size: 2rem; line-height: 1; }
.tk-campaign__pips { margin-left: auto; display: flex; gap: var(--space-1); flex-wrap: wrap; }
.tk-campaign__pip {
  width: 0.7rem; height: 0.7rem;
  border-radius: 3px;
  background: var(--tk-enemy1);
}

/* ── the controls strip ────────────────────────────────────────── */
.tk-role__keys { display: flex; align-items: center; gap: var(--space-2); }
.tk-key {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--subtext);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  padding: 0.15rem 0.5rem;
  cursor: default;
}
.tk-role__ammo { margin-left: auto; display: flex; align-items: center; gap: var(--space-4); }
.tk-pips { display: flex; gap: var(--space-1); }
.tk-pip {
  width: 0.55rem; height: 0.55rem;
  border-radius: 50%;
  background: var(--title);
}
.tk-pip--mine { border-radius: 2px; background: var(--tk-mine-arm); }
.tk-pip.is-spent { background: transparent; box-shadow: inset 0 0 0 1px var(--border); }
.tk-role__note { color: var(--subtext); font-size: 0.85rem; }

/* ── desktop-only guard (the sibling pages' rule) ──────────────── */
.tk-desktop-note { color: var(--subtext); }
@media (max-width: 56rem) {
  .tk-bento { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  /* motion here is canvas-drawn; the CSS side has nothing to quiet */
}