/* styles.css — Poker Coach
 * Dark room, deep-green felt oval table, crisp CSS-drawn playing cards
 * (no images, no fonts fetched — system font stack + unicode suit glyphs).
 * Owned by the ui-shell agent per SPEC §3/§10.
 */

/* ---------------------------------------------------------------------- */
/* Reset + base                                                            */
/* ---------------------------------------------------------------------- */

:root { color-scheme: dark; }

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: radial-gradient(ellipse at 50% -10%, #241a10 0%, #0a0704 55%, #030201 100%);
  color: #e8ddc8;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

button, select, input {
  font-family: inherit;
}

button:focus-visible, select:focus-visible, input:focus-visible {
  outline: 2px solid #ffd35c;
  outline-offset: 2px;
}

ul { margin: 0; padding: 0; }

.hidden { display: none !important; }
.muted { color: #7a6c50; font-style: italic; }

#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ---------------------------------------------------------------------- */
/* Top bar                                                                 */
/* ---------------------------------------------------------------------- */

#topbar {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 10px 20px;
  background: linear-gradient(#151008, #0d0a06);
  border-bottom: 1px solid #3a2c18;
  font-size: 13px;
  flex-wrap: wrap;
}

.tb-group { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.tb-label { color: #a08c66; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }
.tb-blinds { font-weight: 700; color: #ffd35c; }
.tb-sub { color: #7a6c50; font-size: 11px; }
.tb-spacer { flex: 1; }

.tb-btn {
  background: #1f1710;
  border: 1px solid #4a3820;
  color: #f0e0b8;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}
.tb-btn:hover { background: #2c2013; }

/* ---------------------------------------------------------------------- */
/* Layout: table + action log                                             */
/* ---------------------------------------------------------------------- */

#main-row {
  display: flex;
  flex: 1;
  min-height: 0;
}

#table-wrap {
  flex: 1;
  position: relative;
  padding: 56px 60px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#action-log-panel {
  width: 260px;
  flex-shrink: 0;
  background: #120d08;
  border-left: 1px solid #3a2c18;
  padding: 14px;
  overflow-y: auto;
}
#action-log-panel h2 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #a08c66;
  margin: 0 0 10px;
}
#action-log-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: #d8cbb0;
}
#action-log-list li {
  padding: 5px 8px;
  background: rgba(255,255,255,0.03);
  border-radius: 4px;
  border-left: 2px solid #4a3820;
}

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

#table {
  position: relative;
  width: min(100%, 980px);
  aspect-ratio: 1.9 / 1;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 35%, #3a2418, #1c110a 70%);
  box-shadow:
    inset 0 0 0 14px #2a1a10,
    inset 0 0 40px 20px rgba(0,0,0,0.6),
    0 20px 60px rgba(0,0,0,0.7);
}

#table::before {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 30%, #1e6b47, #0d3d28 78%);
  box-shadow:
    inset 0 0 60px 10px rgba(0,0,0,0.55),
    inset 0 0 0 3px rgba(212,175,55,0.35);
}

#board-area {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 3;
}

#board-cards { display: flex; gap: 6px; min-height: 74px; }

#pot-display {
  color: #f5e6b8;
  font-weight: 700;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
#pot-total { font-size: 14px; }
.pot-layer { font-size: 11px; color: #d8c893; font-weight: 500; }

/* ---------------------------------------------------------------------- */
/* Seats                                                                   */
/* ---------------------------------------------------------------------- */

#seats { position: absolute; inset: 0; z-index: 4; }

.seat {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 128px;
  text-align: center;
  transition: opacity 0.25s ease;
}

/* Ascending seats must flow CLOCKWISE on screen (engine deal order), so the
   blinds sit to the button's left like a real table: seat 1 is bottom-LEFT. */
.seat-0 { left: 50%; top: 96%; width: 168px; }
.seat-1 { left: 20%; top: 85%; }
.seat-2 { left: 4%; top: 60%; }
.seat-3 { left: 4%; top: 33%; }
.seat-4 { left: 20%; top: 9%; }
.seat-5 { left: 50%; top: -1%; }
.seat-6 { left: 80%; top: 9%; }
.seat-7 { left: 96%; top: 33%; }
.seat-8 { left: 96%; top: 60%; }
.seat-9 { left: 80%; top: 85%; }

.seat.empty { opacity: 0.28; }
.seat.busted { opacity: 0.4; }
.seat.folded .seat-cards { opacity: 0.4; filter: grayscale(0.7); }

.dealer-btn {
  position: absolute;
  top: -4px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #ddd 60%, #aaa);
  color: #222;
  font-weight: 800;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
  z-index: 6;
}

.seat-cards {
  display: flex;
  gap: 2px;
  justify-content: center;
  margin-bottom: 4px;
  min-height: 44px;
}

.seat-plate {
  background: rgba(18,13,9,0.88);
  border: 1px solid rgba(212,175,55,0.32);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 12px;
}
.seat-name { font-weight: 700; font-size: 13px; color: #f5e6c8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seat.is-hero .seat-name { color: #ffd35c; }
.seat-style { font-size: 9px; color: #b8a888; text-transform: uppercase; letter-spacing: 0.04em; min-height: 11px; }
.seat-position { font-size: 10px; color: #79c9ff; font-weight: 700; min-height: 12px; }
.seat-stack { font-size: 12px; color: #bfe8bf; margin-top: 1px; }

.seat.to-act .seat-plate {
  box-shadow: 0 0 0 2px #ffd35c, 0 0 14px 3px rgba(255,211,92,0.6);
  animation: pulse-glow 1.1s ease-in-out infinite;
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 2px #ffd35c, 0 0 10px 2px rgba(255,211,92,0.45); }
  50% { box-shadow: 0 0 0 2px #ffd35c, 0 0 20px 7px rgba(255,211,92,0.85); }
}

.seat-bet {
  display: inline-block;
  margin-top: 4px;
  background: #17324a;
  border: 1px solid #4fa3d1;
  color: #cfeeff;
  padding: 2px 9px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
}

.seat-status {
  display: inline-block;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(0,0,0,0.5);
  color: #ffb3b3;
}

/* ---------------------------------------------------------------------- */
/* Cards                                                                    */
/* ---------------------------------------------------------------------- */

.card {
  position: relative;
  width: 40px;
  height: 58px;
  background: #fdfdf8;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.5);
  border: 1px solid rgba(0,0,0,0.15);
  flex-shrink: 0;
}
.card-small { width: 30px; height: 44px; }
/* Hero's own hole cards: noticeably larger than opponents' card backs (or
   the default .card size) so they read clearly while hero is deciding an
   action (Issue 2 — previously hero used the same 30x44 card-small as
   everyone else and was covered by the action bar besides). */
.card-hero { width: 56px; height: 80px; }
.card-hero .card-corner-top, .card-hero .card-corner-bottom { font-size: 13px; }
.card-hero .card-pip { font-size: 32px; }

.card-back {
  background: repeating-linear-gradient(45deg, #7a1f2b, #7a1f2b 4px, #5c1620 4px, #5c1620 8px);
  border: 1px solid #3d0f16;
}
.card-back::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 3px;
}

.card-corner {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 700;
  line-height: 1;
  font-size: 10px;
}
.card-corner-top { top: 3px; left: 3px; }
.card-corner-bottom { bottom: 3px; right: 3px; transform: rotate(180deg); }
.card-small .card-corner-top, .card-small .card-corner-bottom { font-size: 8px; }

.card-pip {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.card-small .card-pip { font-size: 14px; }

.card.suit-black { color: #14171a; }
.card.suit-red { color: #c21f2b; }
.card.suit-blue { color: #1a63c4; }
.card.suit-green { color: #1a7a3c; }

#board-cards .card { width: 52px; height: 74px; }
#board-cards .card .card-pip { font-size: 26px; }
#board-cards .card .card-corner-top, #board-cards .card .card-corner-bottom { font-size: 12px; }

/* ---------------------------------------------------------------------- */
/* Hero action bar                                                         */
/* ---------------------------------------------------------------------- */

/* Issue 2: the action bar used to be `position:absolute; bottom:6px` over
   the table, anchored to its OWN bottom edge — so opening the raise panel
   made it grow upward, straight over hero's hole cards (seat 0 sits near
   the table's bottom edge). It's now a normal-flow sibling stacked below
   #table (both are centered by #table-wrap's flex column + align-items),
   so it can only ever grow downward, away from the table, and can never
   overlap hero's cards in either the collapsed or the raise-panel-open
   state, at any window size. */
#hero-action-bar {
  /* 72px clears the hero seat plate + bet chip that overhang the table's
     bottom edge (seat-0 sits at top:96%), so the "To call" line is never
     hidden behind them. Same clearance on #hand-banner below. */
  margin-top: 72px;
  background: rgba(10,8,5,0.94);
  border: 1px solid rgba(212,175,55,0.4);
  border-radius: 12px;
  padding: 12px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 380px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}

.hero-info { text-align: center; color: #f5e6b8; font-size: 13px; font-weight: 600; }
.hero-buttons { display: flex; gap: 10px; justify-content: center; }

.action-btn {
  padding: 10px 18px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  transition: transform 0.08s ease, filter 0.15s ease;
}
.action-btn:disabled { opacity: 0.32; cursor: not-allowed; }
.action-btn:not(:disabled):hover { filter: brightness(1.14); }
.action-btn:not(:disabled):active { transform: scale(0.96); }

.btn-fold { background: #6b2b2b; }
.btn-checkcall { background: #2b6b4a; }
.btn-raise, .btn-raise-confirm { background: #a3781f; }
.btn-raise-cancel { background: #3a2c18; }

kbd {
  font-size: 10px;
  background: rgba(255,255,255,0.16);
  border-radius: 3px;
  padding: 1px 4px;
  margin-left: 5px;
}

#raise-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid rgba(212,175,55,0.25);
  padding-top: 8px;
}
.raise-presets { display: flex; gap: 6px; justify-content: center; }
.preset-btn {
  background: #241a10;
  border: 1px solid #4a3820;
  color: #f0e0b8;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
}
.preset-btn:hover { background: #33251d; }
.raise-slider-row { display: flex; align-items: center; gap: 10px; }
#raise-slider { flex: 1; accent-color: #ffd35c; }
#raise-amount {
  width: 96px;
  padding: 5px 7px;
  border-radius: 6px;
  border: 1px solid #4a3820;
  background: #1a130c;
  color: #f0e0b8;
}
.raise-confirm-row { display: flex; gap: 8px; justify-content: center; }

/* The three below-table bars paint ABOVE any seat overhang: even if a
   viewport puts the hero plate/chip into their space, the bar's opaque
   background wins and its text stays readable. */
#hero-action-bar, #hand-banner, #replay-dock { position: relative; z-index: 40; }

#app-version { font-size: 11px; color: #6b5a3e; margin-left: 8px; align-self: center; }

/* ---------------------------------------------------------------------- */
/* Post-hand banner                                                        */
/* ---------------------------------------------------------------------- */

/* Same normal-flow reasoning as #hero-action-bar above — stacked below the
   table instead of absolutely overlapping it. */
#hand-banner {
  margin-top: 72px;
  background: rgba(10,8,5,0.95);
  border: 1px solid rgba(212,175,55,0.4);
  border-radius: 12px;
  padding: 14px 22px;
  text-align: center;
  min-width: 340px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}
#hand-banner-text { font-size: 15px; font-weight: 700; color: #f5e6b8; margin-bottom: 10px; }
.hand-banner-buttons { display: flex; gap: 10px; justify-content: center; }

.banner-btn {
  padding: 9px 16px;
  border-radius: 8px;
  border: 1px solid #4a3820;
  background: #241a10;
  color: #f0e0b8;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}
.banner-btn:hover { background: #33251d; }
.banner-btn:disabled { opacity: 0.32; cursor: not-allowed; }
.banner-btn-primary { background: #a3781f; border-color: #c8991f; color: #1a1305; }
.banner-btn-primary:hover { background: #bb8a26; }

.btn-danger { background: #6b2b2b; border-color: #8a3a3a; color: #fff; margin-top: 16px; }
.btn-danger.armed { background: #8a3a3a; }

#autodeal-note { margin-top: 8px; font-size: 11px; color: #b8a888; min-height: 14px; }

/* ---------------------------------------------------------------------- */
/* Overlays (generic)                                                      */
/* ---------------------------------------------------------------------- */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.overlay.hidden { display: none; }

#review-backdrop, #stats-backdrop, #settings-backdrop, #tournament-end-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
}

#stats-panel, #settings-panel, #tournament-end-panel {
  position: relative;
  z-index: 2;
  background: rgba(14,10,7,0.97);
  border: 1px solid rgba(212,175,55,0.4);
  border-radius: 14px;
  padding: 20px 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7);
  max-height: 86vh;
  overflow-y: auto;
}
#stats-panel { width: min(94%, 720px); }
#settings-panel { width: min(94%, 420px); }
#tournament-end-panel { width: min(94%, 560px); text-align: center; }

.panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.panel-header h2 { margin: 0; font-size: 18px; }
.icon-btn { background: transparent; border: none; color: #d8cbb0; font-size: 16px; cursor: pointer; padding: 4px 8px; }
.icon-btn:hover { color: #fff; }

/* ---------------------------------------------------------------------- */
/* Visual instant replay v2 (SPEC §14) — the felt itself is the replay.    */
/* All of #replay-dock / #replay-timeline / #replay-controlbar /           */
/* .replay-popover are built by ui.js (buildReplayDom()), not index.html — */
/* this phase doesn't own index.html, and the old review-overlay markup    */
/* there (styled directly below, "docked panel over the live table") is    */
/* exactly what this replaces. That markup stays in the DOM permanently    */
/* `.hidden` and unreferenced; its CSS below is dead but harmless, kept    */
/* rather than risk editing around HTML this phase can't touch.            */
/* ---------------------------------------------------------------------- */

/* Docks in the live action bar's normal-flow slot, same margin/centering
   treatment as #hero-action-bar / #hand-banner (SPEC §14.3: "control bar
   docks in its place"). */
#replay-dock {
  margin-top: 72px; /* same hero-plate clearance as #hero-action-bar */
  width: min(96%, 940px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.replay-timeline {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  padding: 5px 8px;
  background: rgba(10,8,5,0.7);
  border: 1px solid rgba(212,175,55,0.25);
  border-radius: 8px;
  scrollbar-width: thin;
}
.timeline-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  background: #4a3820;
  position: relative;
}
.timeline-dot:hover { filter: brightness(1.3); }
.timeline-dot.active { box-shadow: 0 0 0 2px #ffd35c; }
.timeline-dot-plain { width: 6px; height: 6px; background: #3a2c18; }
/* "Small suit-marked dots" (§14.3): a distinct tinted square carrying the
   glyph of the newest board card via `data-glyph` (set in ui.js). */
.timeline-dot-street {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: #7a1f2b;
}
.timeline-dot-street::after {
  content: attr(data-glyph);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  line-height: 1;
  color: #f5e6c8;
}
/* Hero decision dots: enlarged + verdict-colored (§14.3). */
.timeline-dot-decision { width: 14px; height: 14px; }
.timeline-dot-decision.verdict-best { background: #3fae67; }
.timeline-dot-decision.verdict-fine { background: #7d8f9c; }
.timeline-dot-decision.verdict-questionable { background: #d1a13a; }
.timeline-dot-decision.verdict-mistake { background: #d1493a; }

.replay-controlbar {
  background: rgba(10,8,5,0.94);
  border: 1px solid rgba(212,175,55,0.4);
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}
.replay-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.replay-btn {
  padding: 7px 12px;
  border-radius: 7px;
  border: 1px solid #4a3820;
  background: #241a10;
  color: #f0e0b8;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}
.replay-btn:hover { background: #33251d; }
.replay-btn-primary { background: #a3781f; border-color: #c8991f; color: #1a1305; }
.replay-btn-primary:hover { background: #bb8a26; }

.replay-chip-group { display: flex; gap: 4px; }
.replay-chip {
  background: #1f1710;
  border: 1px solid #4a3820;
  color: #d8cbb0;
  padding: 5px 9px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 11px;
}
.replay-chip:hover { background: #2c2013; }
.replay-chip.active { background: #a3781f; border-color: #c8991f; color: #1a1305; font-weight: 700; }

.replay-queue-label { font-size: 12px; color: #ffd35c; font-weight: 700; white-space: nowrap; }

.replay-caption {
  margin-top: 8px;
  text-align: center;
  font-size: 13px;
  color: #d8cbb0;
  min-height: 16px;
}

/* Summary drawer: opens DOWNWARD, in normal flow below the control bar —
   never over the felt (§14.3). */
.replay-summary-drawer {
  background: rgba(10,8,5,0.9);
  border: 1px solid rgba(212,175,55,0.3);
  border-radius: 10px;
  padding: 12px 16px;
}
.replay-summary-drawer h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: #a08c66; margin: 0 0 6px; }
.replay-summary-drawer p { font-size: 13px; line-height: 1.5; margin: 0 0 8px; }
.leak-tags-row { display: flex; flex-wrap: wrap; gap: 6px; }

/* Verdict pop-over: a child of #table (position:relative), so its absolute
   position and ~1/3-of-felt cap are relative to the table, not the
   viewport. Anchored near the bottom-center hero seat, sitting clear of the
   board above it (§14.3: "never more than ~1/3 of the felt"). */
.replay-popover {
  position: absolute;
  left: 50%;
  bottom: 12%;
  transform: translateX(-50%);
  z-index: 8;
  width: max-content;
  max-width: 34%;
  min-width: 220px;
  max-height: 34%;
  overflow-y: auto;
  background: rgba(12,9,6,0.97);
  border: 1px solid rgba(212,175,55,0.5);
  border-radius: 10px;
  padding: 10px 30px 12px 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.7);
}
.replay-popover-close {
  position: absolute;
  top: 2px;
  right: 4px;
}
.replay-popover .verdict-card { background: transparent; padding: 0; border-left: none; }

/* Award-frame winner highlight (SPEC §14.1 frame.award), reusing the same
   glow the live to-act highlight uses. */
.seat.winner .seat-plate {
  box-shadow: 0 0 0 2px #ffd35c, 0 0 16px 4px rgba(255,211,92,0.5);
}

/* X-ray equity badge (§14.3), review-only. */
.seat-equity {
  display: inline-block;
  margin-top: 4px;
  margin-left: 4px;
  background: #241a4a;
  border: 1px solid #6a5cc0;
  color: #d8ccff;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 800;
}

/* ---------------------------------------------------------------------- */
/* Review overlay (docked panel over the live table underneath)            */
/* DEAD as of SPEC §14 v2 — index.html still has this markup (out of scope */
/* this phase to remove) but ui.js no longer references any of these IDs.  */
/* ---------------------------------------------------------------------- */

#review-overlay { align-items: flex-end; justify-content: center; padding-bottom: 14px; }

#review-panel {
  position: relative;
  z-index: 2;
  width: min(94%, 900px);
  max-height: 62vh;
  overflow-y: auto;
  background: rgba(12,9,6,0.97);
  border: 1px solid rgba(212,175,55,0.45);
  border-radius: 14px;
  padding: 16px 22px 20px;
  box-shadow: 0 -10px 40px rgba(0,0,0,0.7);
}

#review-header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
#review-header h2 { font-size: 16px; margin: 0; flex-shrink: 0; }
#review-hand-no { color: #a08c66; font-weight: 400; }

.grade-badge {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  background: #444;
  color: #fff;
  flex-shrink: 0;
}
.grade-badge.grade-a { background: #2b7a4b; }
.grade-badge.grade-b { background: #3a6ea5; }
.grade-badge.grade-c { background: #b8860b; }
.grade-badge.grade-d { background: #a4302f; }
.grade-badge.grade-none { background: #444; }

.xray-toggle { margin-left: auto; font-size: 12px; display: flex; align-items: center; gap: 6px; color: #d8cbb0; white-space: nowrap; }

#review-street-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 10px 0; }
#review-street-label { font-weight: 700; color: #ffd35c; min-width: 130px; text-align: center; }
#review-action-text { text-align: center; color: #d8cbb0; font-size: 13px; margin-bottom: 12px; min-height: 18px; }

.verdict-card {
  border-radius: 10px;
  padding: 12px 14px;
  border-left: 4px solid #666;
  background: rgba(255,255,255,0.03);
}
.verdict-card.verdict-best { border-color: #3fae67; }
.verdict-card.verdict-fine { border-color: #7d8f9c; }
.verdict-card.verdict-questionable { border-color: #d1a13a; }
.verdict-card.verdict-mistake { border-color: #d1493a; }

.verdict-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.verdict-badge {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 3px 9px;
  border-radius: 5px;
  background: rgba(255,255,255,0.14);
}
.verdict-card.verdict-best .verdict-badge { background: #3fae67; color: #0a1a10; }
.verdict-card.verdict-fine .verdict-badge { background: #7d8f9c; color: #10161a; }
.verdict-card.verdict-questionable .verdict-badge { background: #d1a13a; color: #251a02; }
.verdict-card.verdict-mistake .verdict-badge { background: #d1493a; color: #240604; }

.verdict-actual { font-size: 12px; color: #ccbfae; }
.verdict-explanation { margin: 6px 0; font-size: 13px; line-height: 1.5; }
.verdict-better { font-size: 12px; color: #ffd35c; margin: 4px 0; }
.verdict-empty { color: #8a7c60; font-style: italic; font-size: 13px; }

.math-table { margin-top: 8px; border-collapse: collapse; font-size: 12px; }
.math-table td { padding: 3px 12px 3px 0; color: #d8cbb0; }
.math-table td:first-child { color: #a08c66; }

#review-summary-wrap { margin-top: 14px; border-top: 1px solid rgba(212,175,55,0.2); padding-top: 10px; }
#review-summary-wrap h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: #a08c66; margin: 0 0 6px; }
#review-summary { font-size: 13px; line-height: 1.5; margin: 0; }
#review-leak-tags { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }

.leak-tag {
  background: #3a2c18;
  border: 1px solid #5a4526;
  color: #f0e0b8;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 12px;
}

/* ---------------------------------------------------------------------- */
/* Stats screen                                                            */
/* ---------------------------------------------------------------------- */

.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.stat-tile { background: rgba(255,255,255,0.04); border-radius: 10px; padding: 14px; text-align: center; }
.stat-value { font-size: 22px; font-weight: 800; color: #ffd35c; }
.stat-label { font-size: 11px; color: #a08c66; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 4px; }

.stats-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.stats-col h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: #a08c66; margin: 0 0 8px; }

.leak-list, .hand-note-list, #te-leak-list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.leak-list li, #te-leak-list li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  background: rgba(255,255,255,0.03);
  padding: 6px 10px;
  border-radius: 6px;
}
.leak-count { font-weight: 800; color: #ffd35c; flex-shrink: 0; }
.hand-note-list li { font-size: 12px; background: rgba(255,255,255,0.03); padding: 6px 10px; border-radius: 6px; }
.hand-note-tag { color: #ffd35c; font-weight: 700; margin-right: 4px; }

/* ---------------------------------------------------------------------- */
/* Settings screen                                                         */
/* ---------------------------------------------------------------------- */

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 13px;
}
.settings-row:last-child { border-bottom: none; }
.settings-row select {
  background: #1a130c;
  color: #f0e0b8;
  border: 1px solid #4a3820;
  border-radius: 6px;
  padding: 5px 8px;
}
.settings-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: #ffd35c; }
.seed-display { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: #a08c66; }

/* ---------------------------------------------------------------------- */
/* Tournament-end screen                                                   */
/* ---------------------------------------------------------------------- */

#te-place-text { font-size: 22px; margin: 0 0 14px; color: #ffd35c; }
#te-standings {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}
#te-leak-recap h3 { font-size: 12px; text-transform: uppercase; color: #a08c66; margin: 0 0 8px; text-align: left; }

/* ---------------------------------------------------------------------- */
/* Scrollbars (webkit) — keep them from looking out of place               */
/* ---------------------------------------------------------------------- */

#action-log-panel::-webkit-scrollbar,
#review-panel::-webkit-scrollbar,
#stats-panel::-webkit-scrollbar,
#settings-panel::-webkit-scrollbar,
#tournament-end-panel::-webkit-scrollbar {
  width: 8px;
}
#action-log-panel::-webkit-scrollbar-thumb,
#review-panel::-webkit-scrollbar-thumb,
#stats-panel::-webkit-scrollbar-thumb,
#settings-panel::-webkit-scrollbar-thumb,
#tournament-end-panel::-webkit-scrollbar-thumb {
  background: #4a3820;
  border-radius: 4px;
}

/* ---------------------------------------------------------------------- */
/* Responsive                                                              */
/* ---------------------------------------------------------------------- */

@media (max-width: 980px) {
  #main-row { flex-direction: column; }
  #action-log-panel { width: 100%; border-left: none; border-top: 1px solid #3a2c18; max-height: 160px; }
  #table-wrap { padding: 40px 12px 20px; }
  .stats-columns { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  #topbar { gap: 12px; font-size: 11px; padding: 8px 12px; }
  .seat { width: 96px; }
  .seat-0 { width: 120px; }
  .card { width: 32px; height: 46px; }
  .card-small { width: 24px; height: 36px; }
  #hero-action-bar, #hand-banner { min-width: 0; width: calc(100% - 24px); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  #replay-dock { width: calc(100% - 24px); }
  .replay-row { gap: 6px; }
  .replay-btn, .replay-chip { padding: 5px 8px; font-size: 10px; }
  .replay-popover { max-width: 80%; min-width: 0; }
}