/* ==========================================================================
   AGENTPOKER — lit arcade cabinet styling.
   Charcoal-indigo cabinet, neon teal accent, bright felt, pixel type.
   The CRT texture is still there, just turned way down.
   ========================================================================== */

:root {
  --bg: #131a26;
  --panel: #1a2333;
  --panel-2: #223047;
  --green: #6bffb8;
  --green-glow: rgba(107, 255, 184, 0.4);
  --teal: #34e2e2;
  --teal-dim: #2b7a86;
  --teal-glow: rgba(52, 226, 226, 0.45);
  --amber: #ffc960;
  --amber-dim: #a8813a;
  --red: #ff6b7d;
  --blue: #7fd8ff;
  --purple: #c07bff;
  --ink: #101725;
  --card-face: #f7f4e9;

  --pixel: "Press Start 2P", "Courier New", monospace;
  --term: "VT323", "Courier New", monospace;

  /* Card metrics live in variables so a breakpoint can rescale the whole
     table — board, hole cards, pips and corners — from one place. */
  --card-w: 62px;
  --card-h: 88px;
  --card-gap: 8px;
  --card-pip: 26px;
  --card-corner: 11px;

  /* Height of the collapsed log sheet handle on mobile. */
  --log-bar: 30px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: #dbe8f5;
  font-family: var(--term);
  font-size: 20px;
  min-height: 100%;
}

body {
  background-image:
    radial-gradient(
      ellipse at 50% -10%,
      rgba(52, 226, 226, 0.16),
      transparent 62%
    ),
    radial-gradient(
      ellipse at 15% 110%,
      rgba(107, 255, 184, 0.1),
      transparent 55%
    ),
    radial-gradient(
      ellipse at 88% 90%,
      rgba(255, 201, 96, 0.07),
      transparent 50%
    );
  padding: 0 0 40px;
}

/* ---------------------------------------------------------------- CRT fx */

/* A hint of raster, not a CRT: 1px lines on a 3px pitch at ~4% opacity read
   as texture up close and disappear at arm's length. */
.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 900;
  opacity: 0.5;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.08) 2px,
    rgba(0, 0, 0, 0.08) 3px
  );
}

/* Was a hard black vignette; now a faint cool wash that only frames the
   corners so the cabinet still feels like a screen without going dim. */
.vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 899;
  background: radial-gradient(
    ellipse at center,
    transparent 70%,
    rgba(8, 12, 22, 0.28) 100%
  );
}

@keyframes blink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

.blink {
  animation: blink 1s steps(1) infinite;
}

/* ---------------------------------------------------------------- layout */

.cabinet {
  max-width: 1040px;
  margin: 0 auto;
  padding: 18px 16px 0;
}

.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 3px double var(--teal-dim);
  padding-bottom: 12px;
  margin-bottom: 16px;
}

.logo {
  font-family: var(--pixel);
  font-size: 22px;
  margin: 0;
  letter-spacing: 2px;
  color: #f2f7ff;
  text-shadow: 0 0 14px rgba(140, 190, 255, 0.35);
}

.logo-accent {
  color: var(--teal);
  text-shadow:
    0 0 8px var(--teal-glow),
    0 0 22px rgba(52, 226, 226, 0.3);
}

.masthead-side {
  display: flex;
  align-items: center;
  gap: 12px;
}

.marquee {
  font-size: 17px;
  color: #9fb6c9;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.screen.hidden,
.hidden {
  display: none !important;
}

.footer {
  margin-top: 22px;
  padding-top: 10px;
  border-top: 1px solid rgba(52, 226, 226, 0.25);
  text-align: center;
  color: #7f9bb0;
  font-size: 15px;
  letter-spacing: 1px;
}

/* ---------------------------------------------------------------- panels */

.panel {
  border: 3px solid var(--teal-dim);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 0 22px rgba(52, 226, 226, 0.12);
  padding: 22px;
}

.panel-title {
  font-family: var(--pixel);
  font-size: 13px;
  line-height: 1.7;
  color: var(--teal);
  margin: 0 0 20px;
  letter-spacing: 1px;
  text-shadow: 0 0 10px var(--teal-glow);
}

.config-panel {
  max-width: 640px;
  margin: 30px auto;
}

.config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field-label {
  font-family: var(--pixel);
  font-size: 9px;
  color: var(--teal);
  letter-spacing: 1px;
}

select,
input[type="number"] {
  font-family: var(--term);
  font-size: 20px;
  color: #e8f6ff;
  background: var(--ink);
  border: 2px solid var(--teal-dim);
  padding: 6px 8px;
  outline: none;
}

select:focus,
input:focus {
  border-color: var(--teal);
  box-shadow: 0 0 10px var(--teal-glow);
}

.config-note {
  margin: 20px 0;
  color: #b6cadd;
  line-height: 1.5;
  letter-spacing: 1px;
}

.config-note b {
  color: var(--teal);
}

/* --------------------------------------------------------------- buttons */

.btn {
  font-family: var(--pixel);
  font-size: 11px;
  letter-spacing: 1px;
  color: #dff4ff;
  background: var(--panel-2);
  border: 2px solid var(--teal-dim);
  padding: 12px 14px;
  cursor: pointer;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition:
    transform 0.05s,
    box-shadow 0.12s,
    color 0.12s,
    background 0.12s;
}

.btn:hover:not(:disabled) {
  background: #2c3f5c;
  color: var(--teal);
  border-color: var(--teal);
  box-shadow: 0 0 14px var(--teal-glow);
}

.btn:active:not(:disabled) {
  transform: translateY(2px);
}

.btn:disabled {
  opacity: 0.34;
  cursor: not-allowed;
}

.btn-primary {
  color: #06212a;
  background: var(--teal);
  border-color: #7ff2f2;
  text-shadow: none;
  box-shadow: 0 0 18px rgba(52, 226, 226, 0.35);
}

.btn-primary:hover:not(:disabled) {
  color: #06212a;
  background: #7ff2f2;
  border-color: #b6fbfb;
}

.btn-big {
  display: block;
  width: 100%;
  padding: 18px;
  font-size: 14px;
}

.btn-tiny {
  font-size: 9px;
  padding: 8px 10px;
}

.btn-fold {
  color: var(--red);
  border-color: #8f3a48;
}
.btn-fold:hover:not(:disabled) {
  color: #ff9aa8;
  border-color: var(--red);
  box-shadow: 0 0 14px rgba(255, 107, 125, 0.45);
}
.btn-check,
.btn-call {
  color: var(--green);
  border-color: #3f7f68;
}
.btn-check:hover:not(:disabled),
.btn-call:hover:not(:disabled) {
  color: var(--green);
  border-color: var(--green);
  box-shadow: 0 0 14px var(--green-glow);
}
.btn-raise {
  color: var(--amber);
  border-color: var(--amber-dim);
}
.btn-raise:hover:not(:disabled) {
  color: #ffdb99;
  border-color: var(--amber);
  box-shadow: 0 0 14px rgba(255, 201, 96, 0.45);
}

/* ------------------------------------------------------------ scoreboard */

.scoreboard {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  border: 2px solid var(--teal-dim);
  background: var(--teal-dim);
  margin-bottom: 14px;
}

.score-cell {
  background: var(--panel-2);
  padding: 8px 6px;
  text-align: center;
}

.score-key {
  display: block;
  font-family: var(--pixel);
  font-size: 8px;
  color: #93b0c4;
  margin-bottom: 4px;
}

.score-val {
  display: block;
  font-size: 22px;
  color: var(--amber);
}
.score-val.neg {
  color: var(--red);
}
.score-val.pos {
  color: var(--green);
}

/* ------------------------------------------------------------------ felt */

/* Lit felt: a bright mid-green centre falling to a deep — not black —
   forest edge, with an inner rim highlight instead of a black shadow. */
.felt {
  border: 3px solid #2f8f6d;
  background: radial-gradient(
    ellipse at 50% 45%,
    #2fa877,
    #17694b 62%,
    #0f4735 100%
  );
  box-shadow:
    inset 0 0 60px rgba(120, 255, 200, 0.14),
    inset 0 0 0 2px rgba(140, 255, 205, 0.12),
    0 0 26px rgba(24, 130, 92, 0.28);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.seat {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 12px;
  border: 2px dashed transparent;
  transition:
    border-color 0.2s,
    background 0.2s;
}

.seat.acting {
  border-color: var(--teal);
  background: rgba(52, 226, 226, 0.14);
  box-shadow: 0 0 16px rgba(52, 226, 226, 0.22);
}

.seat.folded {
  opacity: 0.4;
}

.seat-agent {
  justify-content: flex-start;
}
.seat-human {
  justify-content: flex-end;
}

.seat-info {
  min-width: 190px;
}

/* Everything inside the felt sits on lit green, so seat type goes light and
   solid rather than neon — neon-on-green is where legibility went to die. */
.seat-name {
  font-family: var(--pixel);
  font-size: 12px;
  color: #eafff6;
  text-shadow: 0 1px 2px rgba(0, 40, 26, 0.6);
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.seat-human .seat-name {
  color: var(--amber);
}

.seat-tag {
  font-family: var(--term);
  font-size: 16px;
  color: #bff0d9;
  letter-spacing: 1px;
}

.seat-stack {
  font-size: 26px;
  color: #fff;
  line-height: 1.2;
  text-shadow: 0 1px 3px rgba(0, 40, 26, 0.55);
}

.seat-stack .unit {
  font-size: 14px;
  color: #a9dcc6;
  margin-left: 6px;
}

.dealer-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--card-face);
  color: var(--ink);
  font-family: var(--pixel);
  font-size: 8px;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}

/* ----------------------------------------------------------------- chips */

.chip-pile {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  min-height: 20px;
  align-items: flex-end;
}

.chip-col {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
}

.chip {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  margin-top: -16px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
  position: relative;
}

.chip:first-child {
  margin-top: 0;
}

.chip::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.55);
}

.chip-1 {
  background: #e8e8e8;
}
.chip-5 {
  background: #d8323f;
}
.chip-25 {
  background: #24a35a;
}
.chip-100 {
  background: #1b1f26;
}
.chip-500 {
  background: #8a3ec8;
}

.chip-count {
  font-size: 14px;
  color: #bff0d9;
  margin-top: 4px;
}

.bet-area {
  min-width: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 18px;
  color: #ffd98a;
}

.bet-area .chip-pile {
  margin-top: 0;
}

/* ----------------------------------------------------------------- cards */

.hole-cards,
.board {
  display: flex;
  gap: var(--card-gap);
}

.card {
  width: var(--card-w);
  height: var(--card-h);
  flex: 0 0 auto;
  border-radius: 6px;
  background: var(--card-face);
  color: var(--ink);
  border: 2px solid #cfc9b6;
  box-shadow:
    0 3px 0 rgba(3, 42, 30, 0.45),
    0 2px 10px rgba(0, 30, 20, 0.35);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--pixel);
  animation: dealin 0.22s ease-out;
}

@keyframes dealin {
  from {
    transform: translateY(-14px) scale(0.9);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

.card .pip-big {
  font-size: var(--card-pip);
}

.card .corner {
  position: absolute;
  font-size: var(--card-corner);
  line-height: 1.2;
  text-align: center;
}

.card .corner.tl {
  top: 5px;
  left: 5px;
}
.card .corner.br {
  bottom: 5px;
  right: 5px;
  transform: rotate(180deg);
}

.card.red {
  color: #c1282f;
}
.card.black {
  color: #14181c;
}

.card.back {
  background: repeating-linear-gradient(45deg, #2a4b7c 0 6px, #1b3255 6px 12px);
  border-color: #4f7fc4;
  color: transparent;
  box-shadow:
    inset 0 0 0 3px #16294a,
    0 3px 0 rgba(3, 42, 30, 0.45);
}

.card.slot {
  background: rgba(255, 255, 255, 0.04);
  border: 2px dashed rgba(220, 255, 240, 0.3);
  box-shadow: none;
  animation: none;
}

.card.winner {
  border-color: var(--teal);
  box-shadow:
    0 0 20px rgba(52, 226, 226, 0.85),
    0 3px 0 rgba(3, 42, 30, 0.45);
}

/* ------------------------------------------------------------ board area */

.board-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid rgba(220, 255, 240, 0.22);
  border-bottom: 1px solid rgba(220, 255, 240, 0.22);
}

.pot-display {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
}

.pot-label {
  font-family: var(--pixel);
  font-size: 10px;
  color: #d3f5e6;
}
.pot-value {
  color: #ffd98a;
  font-size: 28px;
  text-shadow: 0 0 12px rgba(255, 201, 96, 0.55);
}
.pot-chips .chip-pile {
  margin: 0;
}

.street-label {
  font-family: var(--pixel);
  font-size: 10px;
  color: #d3f5e6;
  letter-spacing: 2px;
}

/* ------------------------------------------------------------ table talk */

.talk-row {
  display: flex;
  justify-content: flex-start;
  min-height: 0;
}

.talk-bubble {
  border: 2px solid var(--teal);
  color: #eafeff;
  background: rgba(12, 46, 60, 0.72);
  box-shadow: 0 0 14px rgba(52, 226, 226, 0.25);
  padding: 6px 12px;
  font-size: 18px;
  letter-spacing: 1px;
  max-width: 80%;
  animation: dealin 0.2s ease-out;
}

/* ------------------------------------------------------------ status bar */

.status-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 2px solid var(--teal-dim);
  border-top: none;
  background: var(--ink);
  color: #e4f3ff;
  padding: 8px 12px;
  font-size: 20px;
  letter-spacing: 1px;
  min-height: 42px;
  text-transform: uppercase;
}

.cursor {
  color: var(--teal);
}

/* -------------------------------------------------------------- controls */

.controls {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.control-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.control-row > .btn[data-action] {
  flex: 1 1 120px;
}

.sizer {
  flex-direction: column;
  border: 2px solid var(--amber-dim);
  padding: 12px;
  background: rgba(255, 201, 96, 0.08);
}

.sizer-quick,
.sizer-confirm {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.sizer-confirm {
  align-items: stretch;
}
.sizer-confirm input {
  flex: 1 1 120px;
  font-size: 24px;
}

input[type="range"] {
  width: 100%;
  appearance: none;
  height: 18px;
  background: var(--ink);
  border: 2px solid var(--teal-dim);
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 22px;
  height: 22px;
  background: var(--teal);
  border: 2px solid var(--ink);
  cursor: pointer;
  box-shadow: 0 0 12px var(--teal-glow);
}

input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  background: var(--teal);
  border: 2px solid var(--ink);
  cursor: pointer;
}

/* ------------------------------------------------------------------- log */

.log-panel {
  margin-top: 14px;
  border: 2px solid var(--teal-dim);
  background: var(--ink);
}

.log-title {
  font-family: var(--pixel);
  font-size: 9px;
  color: #9fb6c9;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(52, 226, 226, 0.25);
  /* <summary> ships a disclosure triangle that fights the pixel type; the
     [+]/[-] caret below plays the same role in the right typeface. */
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  user-select: none;
}

.log-title::-webkit-details-marker {
  display: none;
}

.log-title:hover,
.log-panel[open] > .log-title {
  color: var(--teal);
}

.log-caret::before {
  content: "[+]";
  color: var(--teal);
}

.log-panel[open] > .log-title .log-caret::before {
  content: "[-]";
}

.log {
  height: 152px;
  overflow-y: auto;
  padding: 8px 10px;
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: 0.5px;
}

.log-line {
  color: #a8c0d3;
}
.log-line.you {
  color: var(--amber);
}
.log-line.bot {
  color: var(--blue);
}
.log-line.sys {
  color: var(--teal);
}
.log-line.win {
  color: #fff;
  text-shadow: 0 0 10px var(--teal-glow);
}
.log-line.bad {
  color: var(--red);
}

.table-footer {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}

/* -------------------------------------------------------------- game over */

.over-panel {
  max-width: 620px;
  margin: 30px auto;
  text-align: center;
}

.over-stats {
  font-family: var(--term);
  font-size: 22px;
  color: #dcecf8;
  line-height: 1.6;
  text-align: left;
  margin: 0 0 24px;
  white-space: pre-wrap;
}

/* ------------------------------------------------------------ responsive */

/* --- tablet / compact landscape: shrink, but keep the desktop shape ------ */

@media (max-width: 900px) {
  html,
  body {
    font-size: 18px;
  }
  :root {
    --card-w: 52px;
    --card-h: 74px;
    --card-pip: 21px;
    --card-corner: 9px;
    --card-gap: 6px;
  }
  .logo {
    font-size: 17px;
  }
  .marquee {
    display: none;
  }
  .cabinet {
    padding: 12px 10px 0;
  }
  .seat {
    gap: 10px;
  }
  .seat-info {
    min-width: 150px;
  }
  .seat-stack {
    font-size: 22px;
  }
  .log {
    height: 128px;
  }
}

/* --- handheld: one screen, no page scroll, thumbs at the bottom ----------
   The cabinet becomes the viewport: a fixed 100dvh flex column where only
   the felt is elastic. Everything below the felt (status, controls) is
   pinned in view, and the log turns into a collapsible sheet so it can
   never push the action row past the fold.

   Keyed on either axis: a narrow portrait phone and a short landscape one
   need the same compact seats, and a felt with `overflow: hidden` clips
   anything it can't shrink. Landscape adds its own tweaks further down. */

@media (max-width: 640px), (max-height: 560px) and (orientation: landscape) {
  html,
  body {
    font-size: 17px;
    height: 100%;
    overflow: hidden;
  }
  body {
    padding: 0;
  }

  :root {
    --card-w: clamp(38px, 13.5vw, 60px);
    --card-h: calc(var(--card-w) * 1.42);
    --card-pip: clamp(17px, 5.6vw, 26px);
    --card-corner: 8px;
    --card-gap: 4px;
  }

  .cabinet {
    position: relative;
    height: 100dvh;
    max-width: none;
    padding: 6px 8px 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .masthead {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: 8px;
    padding-bottom: 6px;
    margin-bottom: 6px;
    border-bottom-width: 2px;
  }
  /* Logo, SND and QUIT share one line down to 320px, so all three scale
     with the viewport rather than any of them being clipped. */
  .logo {
    font-size: clamp(10px, 3.3vw, 13px);
    letter-spacing: 1px;
  }
  .footer {
    display: none;
  }

  .screen {
    flex: 1 1 auto;
    min-height: 0;
  }
  /* Config and game-over stay ordinary scrolling pages. */
  #screen-config,
  #screen-over {
    overflow-y: auto;
  }
  .panel {
    padding: 14px;
  }
  .config-panel,
  .over-panel {
    margin: 10px auto;
  }
  .panel-title {
    font-size: 11px;
    margin-bottom: 14px;
  }
  .config-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .config-note {
    margin: 14px 0;
    font-size: 16px;
  }
  select,
  input[type="number"] {
    padding: 10px 8px;
    min-height: 44px;
  }
  .over-stats {
    font-size: 18px;
  }

  /* ---- the table screen as a fixed column ---- */

  #screen-table {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
  }

  .scoreboard {
    order: 1;
    flex: 0 0 auto;
    margin-bottom: 0;
    grid-template-columns: repeat(5, 1fr);
    border-width: 1px;
    gap: 1px;
  }
  .score-cell {
    padding: 3px 1px;
    min-width: 0;
  }
  .score-key {
    font-size: 6px;
    margin-bottom: 2px;
  }
  .score-val {
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* QUIT lifts out of the flow into the masthead so the bottom of the
     screen belongs entirely to the action row. The reserve has to cover
     the button's own width or it lands on top of SND. */
  .btn-tiny {
    font-size: clamp(7px, 2.2vw, 8px);
    padding: 7px 8px;
  }
  .cabinet:has(#screen-table:not(.hidden)) .masthead {
    padding-right: clamp(88px, 28vw, 110px);
  }
  #screen-table .table-footer {
    position: absolute;
    top: 6px;
    right: 8px;
    margin: 0;
    z-index: 40;
  }

  .felt {
    order: 2;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding: 6px;
    gap: 2px;
    justify-content: space-between;
    border-width: 2px;
  }

  /* Seats become one compact row: name + stack, cards, bet. */
  .seat {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 4px 4px;
    border-width: 1px;
  }
  .seat-human {
    /* DOM order is bet / cards / info; reversing lands the name on the left
       so both seats read the same way down the screen. */
    flex-direction: row-reverse;
    justify-content: flex-end;
  }
  .seat-info {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
  }
  .seat-name {
    font-size: 8px;
    gap: 5px;
    flex: 0 1 auto;
    min-width: 0;
  }
  .seat-tag {
    font-size: 13px;
  }
  .seat-stack {
    font-size: 19px;
    white-space: nowrap;
  }
  .seat-stack .unit {
    display: none;
  }
  .dealer-chip {
    width: 15px;
    height: 15px;
    font-size: 6px;
  }
  /* Stack chips are pure decoration and cost a whole row of height; the
     bet chips stay because they carry live information. */
  .seat-info .chip-pile,
  .pot-chips {
    display: none;
  }
  .bet-area {
    min-width: 0;
    font-size: 15px;
    flex: 0 0 auto;
  }
  .bet-area .chip-pile {
    min-height: 0;
    gap: 3px;
  }
  .bet-area .chip {
    width: 13px;
    height: 13px;
    border-width: 1px;
    margin-top: -9px;
  }
  .bet-area .chip::after {
    inset: 2px;
  }
  .bet-area .chip-count {
    font-size: 11px;
    margin-top: 2px;
  }

  .talk-row {
    flex: 0 0 auto;
  }
  .talk-bubble {
    font-size: 14px;
    line-height: 1.25;
    padding: 3px 8px;
    max-width: 100%;
    /* Long agent chatter must not eat the felt. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .board-area {
    flex: 1 1 auto;
    justify-content: center;
    padding: 4px 0;
    gap: 4px;
  }
  /* Pot rides inline with the street label above the board. */
  .pot-display {
    gap: 6px;
    font-size: 17px;
  }
  .pot-label {
    font-size: 8px;
  }
  .pot-value {
    font-size: 21px;
  }
  .street-label {
    font-size: 8px;
  }

  /* ---- log: collapsible sheet between felt and status ---- */

  .log-panel {
    order: 3;
    flex: 0 0 auto;
    margin-top: 0;
    border-width: 1px;
  }
  .log-title {
    padding: 7px 10px;
    font-size: 8px;
    min-height: var(--log-bar);
  }
  .log {
    height: 26dvh;
    font-size: 15px;
    padding: 6px 8px;
    overscroll-behavior: contain;
  }
  .log-line {
    /* Two lines each, then ellipsis — the whole line is still in the DOM
       for anyone who widens the viewport. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .status-bar {
    order: 4;
    flex: 0 0 auto;
    font-size: 15px;
    min-height: 0;
    padding: 5px 8px;
    gap: 6px;
    border-width: 1px;
    border-top: none;
  }
  #status-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ---- controls: pinned to the bottom, 48px+ targets ---- */

  .controls {
    order: 5;
    flex: 0 0 auto;
    position: relative;
    margin-top: 0;
    gap: 6px;
    padding-bottom: max(6px, env(safe-area-inset-bottom));
  }
  .control-row {
    gap: 5px;
    flex-wrap: nowrap;
  }
  .control-row > .btn[data-action] {
    flex: 1 1 0;
    min-width: 0;
    min-height: 54px;
    font-size: 9px;
    letter-spacing: 0;
    padding: 8px 2px;
    overflow: hidden;
  }
  .btn-big {
    padding: 14px;
    font-size: 12px;
    min-height: 54px;
  }

  /* The sizer covers the action row instead of growing the column, so the
     board never moves when you press RAISE. */
  /* Kept deliberately short: the whole panel has to fit in the strip below
     the felt (status bar + log handle + action row) or it starts covering
     the cards it is asking you to bet on. */
  #sizer:not(.hidden) {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    padding: 6px;
    gap: 6px;
    background: var(--panel);
    border-color: var(--amber);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.55);
  }
  .sizer-quick {
    flex-wrap: nowrap;
    gap: 5px;
  }
  .sizer-quick .btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 40px;
    font-size: 8px;
    padding: 6px 2px;
  }
  .sizer-confirm {
    gap: 5px;
  }
  .sizer-confirm input {
    flex: 1 1 70px;
    min-width: 0;
    font-size: 20px;
    padding: 4px 8px;
  }
  .sizer-confirm .btn {
    min-height: 46px;
    font-size: 9px;
    padding: 8px 10px;
  }
  input[type="range"] {
    height: 22px;
  }
  input[type="range"]::-webkit-slider-thumb {
    width: 30px;
    height: 22px;
  }
  input[type="range"]::-moz-range-thumb {
    width: 30px;
    height: 22px;
  }
}

/* --- phone landscape: the block above already reshaped the table; this
   only buys back the vertical millimetres a 400px-tall screen is short. -- */

@media (max-height: 560px) and (orientation: landscape) {
  /* Table talk is the one element that can be dropped without losing
     state — it is echoed in the log. */
  .talk-row {
    display: none;
  }
  :root {
    --card-w: clamp(28px, 4.6vw, 40px);
    --card-h: calc(var(--card-w) * 1.42);
    --card-pip: 15px;
    --card-gap: 3px;
  }
  .cabinet {
    padding-top: 4px;
  }
  /* Wide and short is the one shape where the middle of the table reads
     better as a row: POT · board · street, all on the cards' own line. */
  .board-area {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 14px;
  }
  .masthead {
    padding-bottom: 4px;
    margin-bottom: 4px;
  }
  .logo {
    font-size: 12px;
  }
  .scoreboard {
    /* Wide and short: the keys fit beside nothing else, so tighten rather
       than wrap. */
    grid-template-columns: repeat(5, 1fr);
  }
  .score-cell {
    padding: 2px 1px;
  }
  .felt {
    padding: 4px 8px;
  }
  .board-area {
    padding: 2px 0;
  }
  .log {
    height: 30dvh;
  }
  .control-row > .btn[data-action] {
    min-height: 44px;
  }
  .btn-big {
    min-height: 44px;
    padding: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scanlines,
  .blink,
  .card {
    animation: none;
  }
}

.footer .stats-link {
  color: var(--teal, #34e2e2);
  text-decoration: none;
}
.footer .stats-link:hover {
  text-decoration: underline;
}