/*
 * The live page, in the Season 04 palette.
 *
 * This page is the crowdplay surface: the HLS player, the betting rounds, the
 * chat socket, the pot. All of that is working, tested code, and rewriting the
 * markup underneath it to match a mockup would put the most fragile part of the
 * platform at risk to change some colours.
 *
 * So the colours are changed instead. watch.css reads its palette from tokens
 * rather than hardcoding it, so remapping the tokens on this page moves the
 * whole thing onto the Season palette without touching a line of behaviour.
 * What is left after that is the chrome, restyled below to match the panel and
 * top bar every other page in the design uses.
 */

.watch-page .shell {
  /* The Season surfaces. Scoped to the content, so the shared header keeps the
     platform's own tokens rather than inheriting this page's. */
  --void: #000;
  --ground: #0a0a0b;
  --card: #101013;
  --raised: #16161b;

  --line: #26262a;
  --line-hard: #2c2c31;

  --ink: #e7e7e7;
  --muted: #9a9aa3;
  --faint: #5d5d66;

  /*
   * The green used to be remapped here, because the rest of the platform's
   * tokens still said yellow. They say green now, so this page inherits it like
   * every other page and there is one place the brand colour lives.
   */

  --red: #c92a30;
  --live: #c92a30;
  --red-dim: rgba(201, 42, 48, .16);

}

.watch-page {
  background: #000;
}

/* ---------------- the chrome ---------------- */

/*
 * Nothing. The header is the same component on every page and it was being
 * given a different background, padding, wordmark size, tab casing and button
 * shape here, so this was the one page where it did not match the platform.
 *
 * The palette remap below is scoped to the page's content for the same reason:
 * it used to sit on the body, so the header inherited this page's colours as
 * well and drifted from the header everywhere else.
 */

/* ---------------- headings and buttons ---------------- */

/*
 * The design's voice: uppercase, tracked out, heavy. Applied to the labels and
 * controls rather than to body copy, because chat messages and stream titles
 * are somebody's own words and shouting them is not a style choice.
 */
.watch-page .panel-head,
.watch-page .rail-head,
.watch-page .crowd-head h3,
.watch-page .section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* The player bar is not part of this voice: every button in it, the row's
   .ctl and the menu rows alike, is styled in player-bar.css and nowhere else. */
.watch-page button:not(.chat-send):not(.player-btn):not(.player-bar *) {
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
}

.watch-page .btn-primary,
.watch-page .bet-go {
  background: #3fdc6f;
  color: #04120a;
  border-radius: 999px;
}

/* The live mark keeps its red, because it is the one urgent thing on the page. */
.watch-page .live-dot,
.watch-page .badge-live { background: var(--red); color: #fff; }

/* Rounded to match the panels elsewhere in the design. */
.watch-page .panel,
.watch-page .card,
.watch-page .crowd,
.watch-page .chat { border-radius: 14px; }

.watch-page .player { border-radius: 14px; overflow: hidden; }