/* Kozel Hold'em — the gallery's design language dealt at a poker table.
   Same tokens as admin.css and STYLE-DNA.md: paper, ink, accent, 2px borders,
   hard shadows, no radius. Playing cards are the one new object, and they are
   built the way the site builds everything else: a bordered plate, a pinned
   label, no gradients and no rounded corners pretending to be plastic. */

:root {
  --paper: #F4EDE0;
  --card: #FFFDF7;
  --ink: #141210;
  --accent: #C42B7A;
  --body: #443E36;
  --muted: #6B6257;
  --ok: #1F8A7A;
  --warn: #C4633A;
  --edge: 2px solid var(--ink);
  --display: Oswald, "Arial Narrow", sans-serif;
  --text: "Golos Text", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

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

/* The UA hides [hidden] with a display rule and any author display rule beats
   it — stated outright so no class resurrects a hidden element (v1.19.0). */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--paper);
  background-image: radial-gradient(var(--ink) 1px, transparent 1px);
  background-size: 22px 22px;
  font-family: var(--text);
  color: var(--ink);
}

.mono { font-family: var(--mono); text-transform: uppercase; letter-spacing: .12em; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.table { max-width: 1080px; margin: 0 auto; padding: 20px 24px 8px; }

/* ── Header ─────────────────────────────────────────────────────────── */

.game-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.eyebrow { font-size: 10px; color: var(--muted); }
.game-title {
  margin: 2px 0 0;
  font-family: var(--display); font-weight: 700; font-size: clamp(26px, 3.6vw, 40px);
  line-height: .9; letter-spacing: -.02em; text-transform: uppercase;
}
.legend { font-size: 9px; color: var(--muted); margin-top: 4px; }
.head-actions { display: flex; gap: 10px; }

.btn {
  border: var(--edge); background: var(--card); color: var(--ink);
  padding: 10px 16px; text-decoration: none; display: inline-block;
  font-family: var(--display); font-weight: 600; font-size: 14px;
  letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 4px 4px 0 var(--ink);
  transition: box-shadow .14s ease, transform .14s ease;
}
.btn:hover:not(:disabled) { box-shadow: 0 0 0 var(--ink); transform: translate(4px, 4px); }
.btn-primary { background: var(--accent); color: var(--card); }
.btn-fold { color: var(--warn); }
.btn:disabled { opacity: .5; cursor: default; }

/* ── Score strip: your stack, the pot, the herd's ───────────────────── */

.score-strip {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  border: var(--edge); background: var(--card);
  box-shadow: 5px 5px 0 var(--ink);
  margin: 16px 0;
}
.score-tile { padding: 8px 16px; text-align: center; }
.score-tile + .score-tile { border-left: var(--edge); }
.score-mid { background: var(--ink); color: var(--paper); }
.score-label { font-size: 9px; color: var(--muted); }
.score-mid .score-label { color: #CFC6B7; }
.score-num { font-family: var(--display); font-weight: 700; font-size: 28px; line-height: 1.05; }
.score-sub { font-size: 9px; color: var(--muted); min-height: 12px; }
.score-mid .score-sub { color: #CFC6B7; }
.score-strip .score-tile:first-child .score-num { color: var(--accent); }

/* ── Arena ──────────────────────────────────────────────────────────── */

.arena { display: grid; gap: 16px; }

/* ── Playing cards ──────────────────────────────────────────────────── */

.pcard-face, .pcard-back, .pcard-slot {
  width: 42px; height: 58px; border: var(--edge); background: var(--card);
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 700; line-height: 1;
  flex: none;
}
.pcard-rank { font-size: 20px; }
.pcard-suit { font-size: 13px; margin-top: 1px; }
.pcard-face.red { color: var(--accent); }
/* Face down: ink with the site's dot grid, so the deck belongs to the paper
   it is played on rather than looking like a stock card back. */
.pcard-back {
  background: var(--ink);
  background-image: radial-gradient(var(--paper) 1px, transparent 1px);
  background-size: 7px 7px;
}
.pcard-slot { border-style: dashed; border-color: var(--muted); background: transparent; }

/* ── Seats ──────────────────────────────────────────────────────────── */

.seats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.seat {
  position: relative;
  border: var(--edge); background: var(--card);
  box-shadow: 5px 5px 0 var(--ink);
  padding: 10px;
  display: grid; gap: 8px;
}
.seat-you { box-shadow: 5px 5px 0 var(--accent); }
/* The player to act wears the accent border — the one piece of state a poker
   table must never make you hunt for. */
.seat.acting { border-color: var(--accent); box-shadow: 5px 5px 0 var(--accent); }
.seat.folded { opacity: .45; }
.seat.out { opacity: .3; }
.seat-head { display: flex; gap: 9px; align-items: center; }
.seat-face {
  width: 46px; height: 46px; border: var(--edge); object-fit: cover; flex: none;
  cursor: help;
}
.seat-face-you {
  display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--paper); font-size: 10px; cursor: default;
}
.seat-id { min-width: 0; }
.seat-name {
  font-family: var(--display); font-weight: 600; font-size: 15px;
  text-transform: uppercase; line-height: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.seat-chips { font-size: 10px; color: var(--ink); margin-top: 3px; }
.seat-note { font-size: 8px; color: var(--muted); margin-top: 2px; min-height: 10px; }
.seat-cards { display: flex; gap: 5px; }
.seat-bet {
  position: absolute; top: -11px; right: 10px;
  background: var(--accent); color: var(--card);
  border: var(--edge); padding: 1px 7px; font-size: 10px;
}

/* ── The board ──────────────────────────────────────────────────────── */

.board {
  border: var(--edge); background: var(--ink); color: var(--paper);
  box-shadow: 6px 6px 0 var(--accent);
  padding: 14px; display: grid; gap: 10px; justify-items: center;
}
.board-pot { font-size: 13px; }
.board-cards { display: flex; gap: 7px; }
.board-street { font-size: 9px; color: #CFC6B7; }
.your-hand { font-size: 10px; color: var(--body); text-align: center; }

/* ── Controls ───────────────────────────────────────────────────────── */

.controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.raise-wrap { display: flex; gap: 10px; align-items: center; flex: 1 1 260px; min-width: 0; }
/* The slider is drawn by hand: a 2px ink track with a square ink thumb, since
   the platform default is a rounded pill in a palette this site does not own. */
.raise-slider { -webkit-appearance: none; appearance: none; flex: 1 1 auto; min-width: 90px; height: 22px; background: none; }
.raise-slider::-webkit-slider-runnable-track { height: 6px; border: var(--edge); background: var(--card); }
.raise-slider::-moz-range-track { height: 6px; border: var(--edge); background: var(--card); }
.raise-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 20px; margin-top: -9px;
  background: var(--accent); border: var(--edge);
}
.raise-slider::-moz-range-thumb { width: 16px; height: 20px; background: var(--accent); border: var(--edge); border-radius: 0; }
.pot-odds { font-size: 9px; color: var(--muted); }

/* ── Verdict bar ────────────────────────────────────────────────────── */

.verdict-row {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  margin-top: 16px; padding: 10px 0;
  background: var(--paper); border-top: var(--edge);
}
.verdict-row .btn { flex-shrink: 0; }
.verdict { font-size: 11px; color: var(--body); }
.verdict strong { color: var(--accent); }

/* ── Final banner ───────────────────────────────────────────────────── */

.final {
  border: var(--edge); background: var(--ink); color: var(--paper);
  box-shadow: 6px 6px 0 var(--accent);
  padding: 22px 24px; text-align: center;
}
.final h2 {
  margin: 0 0 6px; font-family: var(--display); font-weight: 700;
  font-size: clamp(26px, 4vw, 40px); text-transform: uppercase; line-height: .95;
}
.final .mono { color: #CFC6B7; font-size: 10px; }

/* ── Mobile ─────────────────────────────────────────────────────────────
   AFTER everything it overrides — a media query buys no cascade priority,
   only file order does (learned the hard way in v1.20.1, kept as law). The
   three opponents stack into one column so a seat can hold a face, a stack
   and two cards on a 380px screen without any of them shrinking to nothing. */
@media (max-width: 720px) {
  .table { padding: 12px 12px 4px; }
  .arena { gap: 12px; }
  .seats { grid-template-columns: 1fr; gap: 8px; }
  .seat { padding: 8px; box-shadow: 3px 3px 0 var(--ink); }
  .seat-you { box-shadow: 3px 3px 0 var(--accent); }
  .seat.acting { box-shadow: 3px 3px 0 var(--accent); }
  /* Sideways seat: face left, name and stack centre, hole cards right — one
     row per opponent, three opponents in the height one used to take. */
  .seat { grid-template-columns: 1fr auto; align-items: center; }
  .seat-cards { justify-content: flex-end; }
  .seat-face { width: 38px; height: 38px; }
  .seat-name { font-size: 13px; }
  .pcard-face, .pcard-back, .pcard-slot { width: 34px; height: 47px; }
  .pcard-rank { font-size: 16px; }
  .pcard-suit { font-size: 11px; }
  .board { padding: 10px; box-shadow: 4px 4px 0 var(--accent); }
  .board-cards { gap: 5px; }
  .controls .btn { padding: 9px 12px; font-size: 12px; }
  .raise-wrap { flex: 1 1 100%; }

  .game-head { align-items: center; }
  .game-title { font-size: 24px; }
  .head-actions .btn { padding: 7px 10px; font-size: 11px; }
  .score-strip { margin: 12px 0; }
  .score-tile { padding: 7px 6px; }
  .score-num { font-size: 22px; }
  .verdict { font-size: 10px; }
  .verdict-row { margin-top: 12px; padding: 8px 0; gap: 10px; }
}