/* Alternate concept: tournament broadcast. Loaded only with ?skin=broadcast. */
[data-skin="broadcast"] {
  color-scheme: dark;
  --paper: #070a12;
  --paper-deep: #101729;
  --ink: #f4f7ff;
  --ink-soft: #8b96ad;
  --line: #26334d;
  --signal: #16b8ff;
  --signal-hot: #65d2ff;
  --acid: #d8ff3e;
  --tile-exact: #00a878;
  --tile-partial: #d69219;
  --tile-miss: #252e42;
  --white: #f4f7ff;
}

[data-skin="broadcast"] body {
  background:
    linear-gradient(90deg, transparent 49.9%, #16b8ff0d 50%, transparent 50.1%),
    linear-gradient(180deg, #0e1425 0, #070a12 52%, #05070c 100%);
  color: var(--white);
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
}
[data-skin="broadcast"] body::before {
  opacity: .32;
  background-image:
    linear-gradient(#16b8ff10 1px, transparent 1px),
    linear-gradient(90deg, #16b8ff10 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, black, transparent 78%);
}
[data-skin="broadcast"] .top-rule {
  padding-block: 10px;
  border-bottom: 1px solid #23304b;
  background: #05070de8;
  color: #8b96ad;
}
[data-skin="broadcast"] .top-rule span:first-child::before { content: "● "; color: #d8ff3e; }
[data-skin="broadcast"] .shell { width: min(1160px, calc(100% - 48px)); padding-top: 42px; }
[data-skin="broadcast"] .hero { min-height: 285px; border: 1px solid var(--line); background: linear-gradient(110deg, #101729e8 0 54%, #0a0e19d9 54%); overflow: hidden; }
[data-skin="broadcast"] .hero::before {
  right: -80px;
  top: -250px;
  width: 620px;
  height: 620px;
  border: 1px solid #16b8ff55;
  box-shadow: 0 0 100px #16b8ff1c inset;
}
[data-skin="broadcast"] .hero::after {
  content: "01";
  position: absolute;
  right: 60px;
  bottom: -52px;
  color: #ffffff08;
  font: 950 260px/.8 "Arial Black", sans-serif;
}
[data-skin="broadcast"] .hero-top { padding: 38px 42px 0; }
[data-skin="broadcast"] .eyebrow { color: var(--acid); letter-spacing: .2em; }
[data-skin="broadcast"] .hero h1 {
  max-width: none;
  font: italic 950 clamp(56px, 9vw, 118px)/.8 "Arial Black", sans-serif;
  letter-spacing: -.08em;
  text-shadow: 7px 7px 0 #16b8ff22;
  transform: skew(-4deg);
}
[data-skin="broadcast"] .hero h1::first-letter { color: inherit; }
[data-skin="broadcast"] .hero-footer { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 13px 42px; border-top: 1px solid var(--line); background: #070a12c9; }
[data-skin="broadcast"] .hero p { margin: 0; color: #aab4c8; font-size: 12px; letter-spacing: .12em; }
[data-skin="broadcast"] .round-stamp { width: auto; height: auto; margin: 0; border: 0; border-radius: 0; background: none; color: var(--signal); font: italic 950 26px/1 sans-serif; transform: none; }
[data-skin="broadcast"] .round-stamp::before { content: "LIVE // "; color: var(--acid); font: 800 9px/1 monospace; vertical-align: middle; }
[data-skin="broadcast"] .locale-toggle { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 999px; background: #070a12; overflow: hidden; }
[data-skin="broadcast"] .locale-toggle button { color: var(--ink-soft); border-radius: 999px; }
[data-skin="broadcast"] .locale-toggle button { min-width: 40px; padding: 0 10px; }
[data-skin="broadcast"] .locale-toggle button[aria-pressed="true"] { background: var(--signal); color: #04101a; }

[data-skin="broadcast"] .controls {
  width: min(880px, 82%);
  margin: -22px auto 22px;
  padding: 17px;
  border: 1px solid #31405e;
  border-radius: 12px;
  background: #0d1322ed;
  box-shadow: 0 18px 50px #0008, 0 0 0 5px #070a12;
  backdrop-filter: blur(14px);
}
[data-skin="broadcast"] .controls::before { color: var(--signal); letter-spacing: .2em; }
[data-skin="broadcast"] input,
[data-skin="broadcast"] button { border: 1px solid #33415e; border-radius: 7px; }
[data-skin="broadcast"] input { background: #080c16; color: var(--white); font-family: monospace; }
[data-skin="broadcast"] input:focus { outline: 2px solid var(--signal); outline-offset: 1px; }
[data-skin="broadcast"] button { background: var(--signal); color: #03101b; }
[data-skin="broadcast"] button:hover:not(:disabled) { background: var(--signal-hot); transform: none; }
[data-skin="broadcast"] button.secondary,
[data-skin="broadcast"] .setting-toggle { background: #151d30; color: var(--white); }
[data-skin="broadcast"] .hint-budget { color: #8b96ad; }
[data-skin="broadcast"] .status { color: var(--acid); }

[data-skin="broadcast"] .help-panel { width: min(880px, 82%); margin-inline: auto; border: 0; }
[data-skin="broadcast"] .help-panel summary { padding-inline: 4px; color: #8b96ad; font-size: 10px; }
[data-skin="broadcast"] .help-panel summary::after { color: var(--signal); }
[data-skin="broadcast"] .help-list { padding: 14px 18px; border: 1px solid var(--line); border-radius: 8px; background: #0b101d; }
[data-skin="broadcast"] .help-chip { color: #aab4c8; }
[data-skin="broadcast"] .help-chip i { border-radius: 3px; }

[data-skin="broadcast"] .grid-wrap { width: min(1040px, 100%); margin: 38px auto; }
[data-skin="broadcast"] .grid { gap: 9px; }
[data-skin="broadcast"] .grid-row { grid-template-columns: .7fr 1fr 1.6fr .7fr 1fr; gap: 9px; }
[data-skin="broadcast"] .column-header { color: #68748d; letter-spacing: .16em; }
[data-skin="broadcast"] .tile { min-height: 88px; border: 1px solid #34415c; border-radius: 7px; background: #11182a; box-shadow: 0 7px 18px #0004; }
[data-skin="broadcast"] .tile::before { background: linear-gradient(135deg, #ffffff0d, transparent 45%); }
[data-skin="broadcast"] .tile.exact { border-color: #00d69a; background: linear-gradient(145deg, #00a878, #087257); }
[data-skin="broadcast"] .tile.partial { border-color: #f4b435; background: linear-gradient(145deg, #b97d0b, #805b14); }
[data-skin="broadcast"] .tile.miss { background: linear-gradient(145deg, #29334a, #1a2233); }
[data-skin="broadcast"] .tile strong { letter-spacing: -.025em; text-transform: none; }

[data-skin="broadcast"] .hint-panel { width: min(880px, 82%); margin-inline: auto; border: 1px solid #16b8ff55; border-left: 4px solid var(--signal); border-radius: 6px; background: #0c1726; }
[data-skin="broadcast"] .reveal-card {
  width: min(880px, 82%);
  margin-inline: auto;
  border: 1px solid #4b5c7c;
  border-radius: 14px;
  background: linear-gradient(120deg, #131c31, #0b101c);
  box-shadow: 0 25px 70px #0009, 0 0 50px #16b8ff0d;
}
[data-skin="broadcast"] .portrait-frame { border: 1px solid #344663; border-radius: 9px; background: linear-gradient(145deg, #1c2942, #0a0f1a); transform: none; }
[data-skin="broadcast"] .reveal-kicker { color: var(--acid); }
[data-skin="broadcast"] .reveal-card h2 { font-style: italic; letter-spacing: -.05em; }
[data-skin="broadcast"] .reveal-facts p,
[data-skin="broadcast"] .identity-note,
[data-skin="broadcast"] .flavor-line { color: #aab4c8; }
[data-skin="broadcast"] .report-link { color: var(--signal); }

[data-skin="broadcast"] .stats-panel { width: min(880px, 82%); margin-inline: auto; border: 1px solid var(--line); border-radius: 10px; background: #0c111e; }
[data-skin="broadcast"] .stats-grid { border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
[data-skin="broadcast"] .stats-grid div { border-color: var(--line); background: #101729; }
[data-skin="broadcast"] .stats-grid dt { color: #7f8aa1; }
[data-skin="broadcast"] .stats-grid dd { color: var(--acid); font-family: monospace; }
[data-skin="broadcast"] .setting-toggle[aria-pressed="true"] { background: var(--signal); color: #03101b; }
[data-skin="broadcast"] .share-panel { width: min(880px, 82%); margin-inline: auto; }
[data-skin="broadcast"] .site-footer { border-color: var(--line); color: #59657b; }

@media (max-width: 620px) {
  [data-skin="broadcast"] .shell { width: min(100% - 24px, 1160px); padding-top: 22px; }
  [data-skin="broadcast"] .hero { min-height: 255px; }
  [data-skin="broadcast"] .hero-top { padding: 28px 20px 0; }
  [data-skin="broadcast"] .brand-lockup { min-width: 0; }
  [data-skin="broadcast"] .hero h1 { margin-top: 15px; font-size: clamp(50px, 17vw, 72px); }
  [data-skin="broadcast"] .hero-footer { padding: 12px 20px; }
  [data-skin="broadcast"] .hero p { max-width: 240px; font-size: 10px; }
  [data-skin="broadcast"] .locale-toggle { top: -12px; right: 30px; }
  [data-skin="broadcast"] .controls,
  [data-skin="broadcast"] .help-panel,
  [data-skin="broadcast"] .hint-panel,
  [data-skin="broadcast"] .reveal-card,
  [data-skin="broadcast"] .stats-panel,
  [data-skin="broadcast"] .share-panel { width: calc(100% - 16px); }
  [data-skin="broadcast"] .controls { margin-top: -15px; padding: 13px; }
  [data-skin="broadcast"] .grid-row { padding: 6px; border-color: #26334d; border-radius: 9px; background: #0a0f1a; }
  [data-skin="broadcast"] .tile { border-radius: 5px; }
  [data-skin="broadcast"] .reveal-card { grid-template-columns: 90px 1fr; }
}