/*
 * One source for every size: the player.
 * --player-w is the largest 16:9 box that fits the screen's width and height
 * once the header is taken out. Everything else (type, cuts, spacing inside the
 * player) scales with --s, 1% of that width, and is clamped to sane limits.
 * Header and player share .shell, so their edges always line up.
 */
@layer tokens, base, primitives, layout, components;

@layer tokens {
  :root {
    /* Color */
    --bg: #070b14;
    --bg-2: #0b1222;
    --panel: #0e1629;
    --panel-hi: #142039;
    --line: #1c2842;
    --line-hi: #2a3a5e;
    --gold: #d4a843;
    --gold-hi: #f0cd72;
    --gold-dim: #7d6430;
    --text: #e9edf5;
    --muted: #8d99b3;
    --live: #ff4655;
    --gold-fill: linear-gradient(180deg, var(--gold-hi), var(--gold));

    /* Type families */
    --font-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
    --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* Viewport height; 100dvh where supported, so mobile browser bars don't cover the player */
    --vh: 100vh;

    /* Page rhythm, from the viewport */
    --gutter: clamp(16px, 2.5vw, 48px);
    --pad-y: clamp(10px, 2.2vh, 28px);
    --gap: clamp(8px, 1.6vh, 18px);
    --bar-h: clamp(44px, 6.5vh, 72px);
    --tabs-h: clamp(34px, 5vh, 44px);

    /* Header layout. Default: tabs on their own row under brand and status. */
    --tabs-row: calc(var(--tabs-h) + var(--gap));
    --header-areas: "brand status" "tabs tabs";
    --header-cols: minmax(0, 1fr) auto;
    --header-rows: var(--bar-h) var(--tabs-h);
    --tab-grow: 1;
    --tab-pad: clamp(14px, 1.8 * var(--s), 30px);
    --tag-display: block;
    --title-display: block;

    /* Height taken by everything that isn't the player (2px rounding margin) */
    --chrome: calc(2 * var(--pad-y) + var(--bar-h) + var(--gap) + var(--tabs-row) + 2px);

    /* The player: limited by width or by height, whichever bites first, never under 288px */
    --player-w: max(
      min(100vw - 2 * var(--gutter), (var(--vh) - var(--chrome)) * 16 / 9),
      min(100vw - 2 * var(--gutter), 288px)
    );
    --s: calc(var(--player-w) / 100);

    /* Type scale */
    --fs-title: clamp(20px, 2.2 * var(--s), 40px);
    --fs-tag: clamp(10px, 0.85 * var(--s), 15px);
    --fs-ui: clamp(13px, 1.25 * var(--s), 20px);
    --fs-hero: clamp(26px, 6 * var(--s), 112px);
    --fs-lead: clamp(13px, 1.5 * var(--s), 24px);

    /* Shapes */
    --border: 2px;
    --cut-lg: clamp(8px, 1.2 * var(--s), 22px);
    --cut-sm: clamp(5px, 0.6 * var(--s), 10px);
    --slant: clamp(7px, 0.8 * var(--s), 12px);
  }

  @supports (height: 100dvh) {
    :root { --vh: 100dvh; }
  }

  /*
   * One header row: brand, tabs and status side by side, and the player gets
   * the tabs row's height back.
   * - Big screens: fits once the player is ~760px wide; at 820×520 it is 779px.
   * - Phones on their side (2:1 or wider): height is what's scarce, so the
   *   second row costs more than it's worth.
   */
  @media (min-width: 820px) and (min-height: 520px), (min-aspect-ratio: 2/1) and (min-width: 640px) {
    :root {
      --tabs-row: 0px;
      --header-areas: "brand tabs status";
      --header-cols: minmax(0, 1fr) auto minmax(0, 1fr);
      --header-rows: var(--bar-h);
      --tab-grow: 0;
    }
  }

  /* Phones on their side: no room to center the tabs on the page, nor for the
     title and tagline next to tabs, reload and status. The logo stays. */
  @media (max-height: 519px) and (min-aspect-ratio: 2/1) and (min-width: 640px) {
    :root {
      --header-cols: auto minmax(0, 1fr) auto;
      --tab-pad: 10px;
      --tag-display: none;
      --title-display: none;
    }
  }
}

@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { color-scheme: dark; }
  body {
    margin: 0;
    min-height: var(--vh);
    padding: var(--pad-y) 0;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    background:
      radial-gradient(1200px 600px at 50% -200px, #12213f 0%, transparent 70%),
      linear-gradient(180deg, var(--bg-2), var(--bg) 60%);
    background-color: var(--bg);
    color: var(--text);
    font: 15px/1.5 var(--font-body);
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, p { margin: 0; }
}

@layer primitives {
  /* Uppercase condensed type. --track sets letter spacing. */
  .display {
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--track, 0.12em);
    line-height: 1;
  }

  /* Box with top-left and bottom-right corners cut at 45°. --cut sets the size. */
  .chamfer {
    clip-path: polygon(
      var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)),
      calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)
    );
  }

  /* Parallelogram. --slant sets the lean. */
  .slant {
    clip-path: polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
  }

  .gold-text {
    background: linear-gradient(180deg, #fff 10%, var(--gold-hi) 60%, var(--gold));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

@layer layout {
  .shell {
    width: var(--player-w);
    margin-inline: auto;
  }

  .topbar {
    display: grid;
    grid-template-areas: var(--header-areas);
    grid-template-columns: var(--header-cols);
    grid-template-rows: var(--header-rows);
    row-gap: var(--gap);
    column-gap: var(--gap);
    align-items: center;
  }
  .brand { grid-area: brand; }
  .switcher { grid-area: tabs; }
  .status { grid-area: status; justify-self: end; }
}

@layer components {
  /* Brand */
  .brand { display: flex; align-items: center; gap: calc(var(--gap) * 0.9); min-width: 0; }
  .brand-text { min-width: 0; }
  .mark {
    --cut: var(--cut-sm);
    width: calc(var(--bar-h) * 0.62);
    aspect-ratio: 1;
    flex: none;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--gold-hi), var(--gold) 55%, var(--gold-dim));
  }
  .mark::after {
    content: "";
    width: 34%;
    height: 40%;
    margin-left: 8%;
    background: var(--bg);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
  }
  .title { --track: 0.04em; display: var(--title-display); font-size: var(--fs-title); white-space: nowrap; }
  .title span { color: var(--gold); }
  .tag {
    --track: 0.14em;
    display: var(--tag-display);
    margin-top: 0.4em;
    font-size: var(--fs-tag);
    font-weight: 600;
    color: var(--muted);
    /* The markup only allows a break after the "·", so narrow screens get two clean lines. */
    text-wrap: balance;
  }

  /* Small header controls: status badge and reload button */
  .switcher { display: flex; align-items: center; gap: calc(var(--gap) * 0.5); min-width: 0; }
  .control {
    --cut: var(--cut-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: calc(var(--tabs-h) * 0.82);
    font-size: var(--fs-ui);
    color: var(--muted);
    background: var(--panel);
    border: 1px solid var(--line-hi);
  }
  .control[hidden] { display: none; }

  .reload { aspect-ratio: 1; padding: 0; cursor: pointer; transition: color 0.15s, border-color 0.15s; }
  .reload svg { width: 50%; height: 50%; }
  .reload:hover { color: var(--gold-hi); border-color: var(--gold-dim); }
  .reload:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }

  .status {
    --track: 0.14em;
    gap: 0.55em;
    padding: 0 1em 0 0.85em;
    white-space: nowrap;
  }
  .dot { width: 0.6em; height: 0.6em; border-radius: 50%; background: currentColor; }
  .status[data-state="live"] {
    color: #fff;
    border-color: var(--live);
    background: linear-gradient(90deg, #3a0d16, var(--panel));
  }
  .status[data-state="live"] .dot { background: var(--live); animation: pulse 1.6s ease-out infinite; }
  .status[data-state="break"] { color: var(--gold); border-color: var(--gold-dim); }
  .status[data-state="offline"] .dot,
  .status[data-state="connecting"] .dot { animation: blink 1.2s steps(2) infinite; }

  /* Tabs */
  .tabs { flex: var(--tab-grow) 1 auto; display: flex; justify-content: center; gap: calc(var(--gap) * 0.5); min-width: 0; }
  .tab {
    flex: var(--tab-grow) 1 auto;
    height: var(--tabs-h);
    min-width: 0;
    padding: 0 var(--tab-pad);
    border: 0;
    cursor: pointer;
    appearance: none;
    font-size: var(--fs-ui);
    color: var(--muted);
    background: var(--panel);
    transition: color 0.15s, background 0.15s;
  }
  .tab:hover { color: var(--text); background: var(--panel-hi); }
  .tab[aria-selected="true"] { color: var(--bg); background: var(--gold-fill); }
  .tab:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }

  /* Player frame: the frame is the 16:9 box, the stage sits inside its border */
  .frame {
    --cut: var(--cut-lg);
    position: relative;
    aspect-ratio: 16 / 9;
    background: linear-gradient(
      135deg, var(--gold) 0%, var(--line-hi) 18%, var(--line) 50%, var(--line-hi) 82%, var(--gold) 100%
    );
  }
  .stage {
    /* inner corner cut that stays parallel to the outer one across the border */
    --cut: calc(var(--cut-lg) - var(--border) * 0.586);
    position: absolute;
    inset: var(--border);
    overflow: hidden;
    background: #04070d;
  }
  .player,
  .player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

  /* Intermission screen */
  .screen {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: calc(var(--s) * 3);
    text-align: center;
    background:
      repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 4px),
      radial-gradient(60% 70% at 50% 50%, #101b33 0%, #04070d 100%);
  }
  .screen[hidden] { display: none; }
  .screen-title { --track: 0.08em; font-size: var(--fs-hero); }
  .rule {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    margin: 0.8em auto 0.7em;
    font-size: var(--fs-lead);
  }
  .rule::before,
  .rule::after { content: ""; height: 1px; width: 4em; background: linear-gradient(90deg, transparent, var(--gold)); }
  .rule::after { transform: scaleX(-1); }
  .rule i { width: 0.5em; height: 0.5em; background: var(--gold); transform: rotate(45deg); }
  .screen-text { max-width: 32em; color: var(--muted); font-size: var(--fs-lead); }

  @keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 70, 85, 0.7); }
    70% { box-shadow: 0 0 0 0.6em rgba(255, 70, 85, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 70, 85, 0); }
  }
  @keyframes blink { 50% { opacity: 0.25; } }

  @media (prefers-reduced-motion: reduce) {
    .dot { animation: none !important; }
  }
}