/* Channel Zero — Broadcast Poker Aesthetic */

:root {
  --void: #0a0508;
  --void-2: #14090f;
  --rose: #ff7fb8;
  --rose-deep: #e05a97;
  --rose-quartz: #ffb3d1;
  --white: #f8ecf3;
  --blue: #7fd8ff;
  --blue-deep: #4b9dcf;
  --gold: #ffd166;
  --felt: #2b0d1e;
  --felt-2: #1f0916;
  --border: rgba(255, 127, 184, 0.35);
  --border-strong: rgba(255, 127, 184, 0.7);
  --glow: 0 0 12px rgba(255, 127, 184, 0.4), 0 0 24px rgba(255, 127, 184, 0.2);
  --glow-blue: 0 0 12px rgba(127, 216, 255, 0.4);
  --glow-gold: 0 0 12px rgba(255, 209, 102, 0.6), 0 0 30px rgba(255, 209, 102, 0.3);
  --mono: "Courier New", "SF Mono", ui-monospace, monospace;
  --serif: "Fraunces", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  min-height: 100vh;
  background: radial-gradient(ellipse at center, var(--void-2) 0%, var(--void) 100%);
  color: var(--white);
  font-family: var(--sans);
  overflow-x: hidden;
}

body {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  min-height: 100vh;
}

/* CRT scanline overlay */
#crt-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 127, 184, 0.02) 0px,
    rgba(255, 127, 184, 0.02) 1px,
    transparent 1px,
    transparent 3px
  );
  z-index: 9999;
  mix-blend-mode: overlay;
  opacity: 0.6;
}
body.no-scanlines #crt-overlay { display: none; }

/* Broadcast bar */
#broadcast-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1.5rem;
  background: linear-gradient(to bottom, rgba(255, 127, 184, 0.12), rgba(255, 127, 184, 0.04));
  border-bottom: 1px solid var(--border);
  box-shadow: var(--glow);
  gap: 1rem;
  flex-wrap: wrap;
}

.channel-brand {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.ch-num {
  font-family: var(--mono);
  font-size: 1.6rem;
  color: var(--rose);
  letter-spacing: 0.05em;
  text-shadow: var(--glow);
}
.ch-name {
  font-family: var(--mono);
  font-size: 0.9rem;
  color: var(--white);
  letter-spacing: 0.3em;
}

.broadcast-mission {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--rose-quartz);
  text-align: center;
}

.broadcast-tourney {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--blue);
  text-shadow: var(--glow-blue);
}

/* Main table view — grid layout */
#table-view {
  display: grid;
  grid-template-columns: 260px 1fr 260px;
  grid-template-rows: 1fr auto;
  gap: 1rem;
  padding: 1rem;
  min-height: 0;
}

/* Commentary booth (left) */
#commentary-booth {
  background: linear-gradient(to bottom, rgba(255, 127, 184, 0.06), rgba(10, 5, 8, 0.4));
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow: hidden;
  min-height: 300px;
  grid-row: 1;
}
.mic-badge {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--rose);
  border-bottom: 1px dashed var(--border);
  padding-bottom: 0.4rem;
  letter-spacing: 0.15em;
}
#commentary-feed {
  flex: 1;
  overflow-y: auto;
  font-family: var(--serif);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--white);
  display: flex;
  flex-direction: column-reverse;
  gap: 0.5rem;
  padding-right: 0.3rem;
}
#commentary-feed .commentary-line {
  padding: 0.4rem 0.5rem;
  border-left: 2px solid var(--rose);
  background: rgba(255, 127, 184, 0.03);
  border-radius: 0 4px 4px 0;
  animation: slidein 0.3s ease-out;
}
#commentary-feed .commentary-line.strong {
  border-left-color: var(--gold);
  color: var(--gold);
}
@keyframes slidein {
  from { opacity: 0; transform: translateX(-4px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Poker table (center) — PokerStars-style oval, CH·0 PINK felt 💗 */
#poker-table {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 520px;
  grid-row: 1;
  padding: 34px 78px;          /* breathing room so rail pods never clip */
  overflow: visible;
}
#table-felt {
  width: 100%;
  max-width: 780px;
  aspect-ratio: 16 / 10;       /* true oval regardless of container height */
  min-height: 430px;
  margin: 0 auto;
  position: relative;
  border-radius: 50% / 50%;
  /* the pink felt: bright rose sheen over deep magenta */
  background:
    radial-gradient(ellipse 68% 58% at 50% 40%, rgba(255,179,209,0.35) 0%, rgba(255,127,184,0.08) 46%, transparent 72%),
    radial-gradient(ellipse at center, #c23c7e 0%, #8a2657 52%, #5c1839 100%);
  /* dark rose rail + rose glow */
  border: 15px solid #2e0c1d;
  box-shadow:
    0 0 0 3px var(--rose-deep),
    0 0 28px rgba(255,127,184,0.55),
    0 0 70px rgba(255,127,184,0.28),
    inset 0 0 70px rgba(0,0,0,0.5),
    inset 0 6px 34px rgba(255,255,255,0.07);
}
/* faint broadcast watermark on the felt */
#table-felt::before {
  content: "CH·0";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--mono);
  font-size: clamp(2.5rem, 7vw, 5rem);
  letter-spacing: 0.15em;
  color: rgba(255, 179, 209, 0.07);
  pointer-events: none;
  z-index: 0;
}

#seats {
  position: absolute;
  inset: 0;
}

.seat {
  position: absolute;
  width: 128px;
  padding: 7px 9px 8px;
  border-radius: 13px;
  background: linear-gradient(to bottom, rgba(38,10,24,0.94), rgba(16,5,11,0.94));
  border: 1px solid var(--border);
  text-align: center;
  transition: all 0.25s;
  transform: translate(-50%, -50%);
  box-shadow: 0 5px 16px rgba(0,0,0,0.55);
  z-index: 2;
}
.seat.active {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px var(--gold), var(--glow-gold);
  background: linear-gradient(to bottom, rgba(58,40,12,0.96), rgba(22,13,4,0.96));
}
.seat.folded {
  opacity: 0.32;
  filter: grayscale(0.8);
}
.seat.out {
  opacity: 0.16;
}
.seat.dealer::after {
  content: "D";
  position: absolute;
  top: -9px;
  right: -9px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #ffd1e4 60%, var(--rose-deep));
  color: var(--void);
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--glow);
}
.seat.you {
  border-color: var(--rose);
  box-shadow: 0 0 0 2px rgba(255,127,184,0.55), 0 5px 16px rgba(0,0,0,0.55);
}
.seat-name {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--rose-quartz);
  letter-spacing: 0.05em;
  margin-bottom: 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.seat-stack {
  font-family: var(--mono);
  font-size: 0.88rem;
  color: var(--gold);
  margin-bottom: 0.25rem;
}
.seat-bet {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--rose-quartz);
  min-height: 1em;
}
.seat-cards {
  display: flex;
  gap: 4px;
  justify-content: center;
  margin-top: 4px;
  min-height: 42px;
}
.seat-action {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--white);
  min-height: 1em;
  margin-top: 3px;
}
.seat-tell {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.68rem;
  color: var(--rose);
  margin-top: 3px;
  min-height: 1em;
}

/* Seat positions — 7 pods centered on points around the oval */
.seat[data-pos="0"] { left: 50%; top: 99%; }   /* seat 7 — Hymn, bottom center */
.seat[data-pos="1"] { left: 13%; top: 87%; }   /* seat 6 — bottom left */
.seat[data-pos="2"] { left: 1%;  top: 42%; }   /* seat 5 — mid left */
.seat[data-pos="3"] { left: 27%; top: 2%;  }   /* seat 4 — top left */
.seat[data-pos="4"] { left: 73%; top: 2%;  }   /* seat 3 — top right */
.seat[data-pos="5"] { left: 99%; top: 42%; }   /* seat 2 — mid right */
.seat[data-pos="6"] { left: 87%; top: 87%; }   /* seat 1 — bottom right */

/* Community area — pot + board dead center */
#community-area {
  position: absolute;
  top: 43%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  z-index: 1;
}
#pot-display {
  font-family: var(--mono);
  font-size: 0.95rem;
  color: var(--gold);
  text-shadow: var(--glow-gold);
  letter-spacing: 0.08em;
  background: rgba(0,0,0,0.42);
  border: 1px solid rgba(255,209,102,0.45);
  padding: 5px 18px;
  border-radius: 999px;
}
#community-cards {
  display: flex;
  gap: 6px;
  min-height: 70px;
}
#side-pot-display {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--rose-quartz);
  min-height: 1em;
}

/* Cards */
.card {
  width: 44px;
  height: 62px;
  border-radius: 5px;
  background: var(--white);
  color: var(--void);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: bold;
  border: 1px solid rgba(0,0,0,0.3);
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  padding: 4px;
}
.card.big { width: 56px; height: 78px; font-size: 0.85rem; }
.card.mini { width: 32px; height: 46px; font-size: 0.6rem; }
.card .rank { font-size: 1.2em; }
.card.red { color: #c81c4a; }
.card.black { color: #0d0510; }
.card.hidden {
  background: linear-gradient(135deg, var(--rose-deep), var(--rose));
  color: transparent;
  background-image:
    repeating-linear-gradient(45deg, rgba(0,0,0,0.15) 0 4px, transparent 4px 8px),
    linear-gradient(135deg, var(--rose-deep), var(--rose));
}
.card.hidden::before { content: "0"; color: var(--white); font-family: var(--serif); font-style: italic; opacity: 0.6; }
.card.new { animation: dealcard 0.4s ease-out; }
@keyframes dealcard {
  from { transform: translateY(-30px) rotate(15deg); opacity: 0; }
  to { transform: translateY(0) rotate(0); opacity: 1; }
}

/* Lesson panel (right) */
#lesson-panel {
  background: linear-gradient(to bottom, rgba(127, 216, 255, 0.05), rgba(10, 5, 8, 0.4));
  border: 1px solid rgba(127, 216, 255, 0.35);
  border-radius: 8px;
  padding: 0.8rem;
  min-height: 300px;
  grid-row: 1;
}
.lesson-title {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--blue);
  border-bottom: 1px dashed rgba(127, 216, 255, 0.35);
  padding-bottom: 0.4rem;
  letter-spacing: 0.15em;
  margin-bottom: 0.6rem;
}
#lesson-content {
  font-family: var(--serif);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--white);
}

/* Player controls (bottom row) */
#player-controls {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 1rem;
  padding: 0.6rem;
  background: rgba(255, 127, 184, 0.03);
  border: 1px solid var(--border);
  border-radius: 8px;
}
#player-hole-display {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.hole-title {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--rose);
  letter-spacing: 0.15em;
}
#player-hole-cards {
  display: flex;
  gap: 6px;
  min-height: 80px;
}
#word-math-display {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--blue-deep);
  min-height: 1em;
  line-height: 1.4;
}

#action-prompt {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
#action-status {
  font-family: var(--serif);
  font-size: 0.95rem;
  color: var(--rose-quartz);
  min-height: 1.4em;
}
#action-buttons {
  display: flex;
  gap: 0.5rem;
}
.action-btn {
  font-family: var(--mono);
  font-size: 0.9rem;
  padding: 0.6rem 1rem;
  background: var(--void-2);
  color: var(--rose);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  cursor: pointer;
  letter-spacing: 0.1em;
  transition: all 0.15s;
  box-shadow: var(--glow);
}
.action-btn:hover:not(:disabled) {
  background: var(--rose);
  color: var(--void);
  transform: translateY(-1px);
}
.action-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  box-shadow: none;
}
.action-btn.primary {
  background: var(--rose);
  color: var(--void);
}

/* Raise slider */
#raise-controls {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.5rem;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
}
#raise-slider { width: 100%; accent-color: var(--rose); }
.raise-labels {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--white);
}
#raise-current { color: var(--gold); font-size: 1rem; }

/* Word input */
#word-input-panel {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.5rem;
  background: rgba(127, 216, 255, 0.06);
  border: 1px solid rgba(127, 216, 255, 0.35);
  border-radius: 4px;
}
#word-input-panel label {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--blue);
}
#word-input {
  padding: 0.5rem;
  background: var(--void-2);
  color: var(--white);
  border: 1px solid var(--border);
  border-radius: 3px;
  font-family: var(--serif);
  font-size: 0.95rem;
}

/* Ticker */
#ticker-container {
  overflow: hidden;
  background: var(--void-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  position: relative;
  height: 32px;
  display: flex;
  align-items: center;
}
#ticker-track {
  display: inline-block;
  animation: tickerscroll 60s linear infinite;
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--rose);
  letter-spacing: 0.1em;
  padding-left: 100%;
}
#ticker-container:hover #ticker-track,
#ticker-track:focus-within {
  animation-play-state: paused;
}
.ticker-link {
  color: var(--rose);
  text-decoration: none;
  border-bottom: 1px dotted var(--border-strong);
  padding-bottom: 1px;
  transition: color 0.15s, border-color 0.15s;
}
.ticker-link:hover,
.ticker-link:focus-visible {
  color: var(--gold);
  border-bottom-color: var(--gold);
  text-shadow: var(--glow-gold);
}
@keyframes tickerscroll {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}
body.reduced-motion #ticker-track { animation: none; }

/* Scoreboard bar */
#scoreboard-bar {
  background: rgba(0, 0, 0, 0.6);
  border-top: 1px solid var(--border);
  padding: 0.5rem 1rem;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--rose-quartz);
  letter-spacing: 0.05em;
  overflow-x: auto;
  white-space: nowrap;
}

/* Settings panel */
#settings-panel {
  position: fixed;
  top: 60px;
  right: 12px;
  z-index: 100;
}
#btn-settings-toggle {
  background: var(--void-2);
  border: 1px solid var(--border-strong);
  color: var(--rose);
  font-size: 1.3rem;
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: var(--glow);
}
#settings-content {
  position: absolute;
  top: 42px;
  right: 0;
  width: 280px;
  background: var(--void-2);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 1rem;
  box-shadow: var(--glow);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
#settings-content h3 {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--blue);
  letter-spacing: 0.15em;
  margin-top: 0.5rem;
  border-bottom: 1px dashed var(--border);
  padding-bottom: 0.2rem;
}
#settings-content label {
  font-family: var(--sans);
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
#state-io {
  width: 100%;
  min-height: 60px;
  background: var(--void);
  color: var(--white);
  border: 1px solid var(--border);
  padding: 0.4rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  border-radius: 3px;
}
#test-output {
  max-height: 200px;
  overflow-y: auto;
  background: var(--void);
  padding: 0.5rem;
  border: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--white);
  border-radius: 3px;
  white-space: pre-wrap;
}

/* Commercial overlay */
#commercial-overlay,
#champion-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 5, 8, 0.95);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  animation: fadein 0.3s;
}
#commercial-overlay[hidden],
#champion-overlay[hidden],
#raise-controls[hidden],
#word-input-panel[hidden],
#settings-content[hidden] {
  display: none !important;
}
@keyframes fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}
#commercial-card {
  max-width: 640px;
  background: linear-gradient(135deg, var(--rose-deep), var(--void-2));
  border: 2px solid var(--rose);
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  box-shadow: var(--glow);
}
.commercial-brand {
  font-family: var(--mono);
  font-size: 2rem;
  color: var(--gold);
  letter-spacing: 0.15em;
  margin-bottom: 1rem;
  text-shadow: var(--glow-gold);
}
.commercial-jingle {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--white);
  margin-bottom: 1.5rem;
  white-space: pre-line;
}
.commercial-tag {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--rose-quartz);
  margin-bottom: 0.5rem;
  letter-spacing: 0.15em;
}
.commercial-cta { margin-bottom: 1rem; font-size: 1rem; padding: 0.8rem 1.5rem; }
.skip-btn { font-size: 0.8rem; opacity: 0.7; }

/* Champion overlay */
#champion-card {
  max-width: 720px;
  max-height: 90vh;
  overflow-y: auto;
  background: linear-gradient(135deg, var(--void-2), rgba(255, 209, 102, 0.15));
  border: 3px solid var(--gold);
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  box-shadow: var(--glow-gold);
}
.champion-title {
  font-family: var(--mono);
  font-size: 1.4rem;
  color: var(--gold);
  letter-spacing: 0.2em;
  margin-bottom: 1rem;
  text-shadow: var(--glow-gold);
}
#champion-name {
  font-family: var(--serif);
  font-size: 2rem;
  color: var(--rose);
  margin-bottom: 1.5rem;
}
#unlimited-karmabux-card {
  border: 2px solid var(--gold);
  border-radius: 8px;
  padding: 1.5rem;
  margin: 1.5rem auto;
  max-width: 400px;
  background: linear-gradient(135deg, var(--gold), var(--rose));
  color: var(--void);
}
.uk-title {
  font-family: var(--mono);
  font-size: 1rem;
  letter-spacing: 0.15em;
  margin-bottom: 0.6rem;
}
.uk-holder {
  font-family: var(--serif);
  font-size: 1.4rem;
  margin-bottom: 0.6rem;
}
.uk-tag {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.85rem;
}
#champion-interview,
#highlight-reel,
#social-drafts,
#final-scoreboard {
  text-align: left;
  font-family: var(--serif);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--white);
  padding: 1rem;
  border-left: 3px solid var(--rose);
  margin: 1rem 0;
  background: rgba(0,0,0,0.2);
  border-radius: 0 6px 6px 0;
}
#highlight-reel-title,
#social-drafts-title {
  font-family: var(--mono);
  font-size: 0.9rem;
  color: var(--gold);
  letter-spacing: 0.15em;
  margin-top: 1.5rem;
}
.social-draft {
  padding: 0.6rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  margin-bottom: 0.5rem;
  background: rgba(255, 127, 184, 0.05);
}

/* Responsive */
@media (max-width: 900px) {
  #table-view {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
  }
  #commentary-booth, #lesson-panel { min-height: 180px; }
  #poker-table { padding: 20px 44px; min-height: 0; }
  #table-felt { aspect-ratio: 4 / 3.2; min-height: 0; }   /* scale by width, keep oval — no tall capsule */
  .seat { width: 104px; padding: 5px 7px 6px; }
  .seat-name { font-size: 0.66rem; }
  /* pull edge pods inward so they don't clip on narrow screens */
  .seat[data-pos="2"] { left: 7%; }
  .seat[data-pos="5"] { left: 93%; }
  .seat[data-pos="1"] { left: 15%; }
  .seat[data-pos="6"] { left: 85%; }
  #player-controls { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  #poker-table { padding: 14px 20px; }
  #table-felt { aspect-ratio: 3 / 3.1; }
  .seat { width: 84px; font-size: 0.9em; padding: 4px 5px 5px; }
  .seat-name { font-size: 0.6rem; }
  .seat[data-pos="2"] { left: 12%; }
  .seat[data-pos="5"] { left: 88%; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  #ticker-track { animation: none; }
}
body.reduced-motion * { animation-duration: 0.01ms !important; transition: none !important; }