/* Scoreboard design: LED bulbs on a black board. Loaded after style.css and overrides its base look. */
/* Dot-matrix (--led) only where a real board uses bulbs: scores, clocks, points, the lockup.
   Everything you read in words is set in a clean condensed face. */
:root {
  --bg: #050505; --card: #0c0c0c; --ink: #ffb400; --muted: #cfa44a; --faint: #4a3a10; --line: #262626;
  --alert: #ff2d1f; --gold: #52ff8f;
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --led: "Doto", "Share Tech Mono", ui-monospace, monospace;
  --body: "Share Tech Mono", ui-monospace, Menlo, monospace;
  --intro-bg: #050505; --intro-fg: #ffb400; --intro-accent: #ff2d1f;
  --glow: 0 0 8px rgba(255, 180, 0, 0.45);
  color-scheme: dark;
}
body { background-image: radial-gradient(rgba(255, 180, 0, 0.08) 1px, transparent 1.5px); background-size: 7px 7px; text-transform: uppercase; }
button, input { text-transform: uppercase; }
.s-baseball { --sport: #4d8dff; }
.s-football { --sport: #e08a3c; }
.s-basketball { --sport: #ff7a1a; }
.s-hockey { --sport: #2fd6ee; }
.s-soccer { --sport: #3ddc6a; }
#intro .lockup { font-family: var(--led); font-weight: 900; }
.mark { background: var(--ink); color: #000; border-radius: 3px; font-weight: 900; }
.name { font-family: var(--led); font-weight: 900; font-size: 27px; text-shadow: var(--glow); }
.tool, .chip { border-radius: 3px; background: #0c0c0c; border-color: #2c2c2c; font-size: 14px; font-weight: 400; }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #000; }
.chip[class*="s-"][aria-pressed="true"] { background: var(--sport); border-color: var(--sport); color: #000; }
.chip[class*="s-"][aria-pressed="true"]::before { background: #000; }
.chip.live[aria-pressed="true"] { background: var(--alert); border-color: var(--alert); color: #000; }
.days button { font-weight: 800; font-size: 28px; letter-spacing: 0.02em; }
.days button[aria-current="true"] { text-shadow: var(--glow); }
h2 { font: 800 22px/1 var(--display); letter-spacing: 0.1em; color: var(--ink); border-bottom: 2px dotted var(--faint); padding-bottom: 8px; margin-bottom: 0; }
h2 small { font: 400 14px var(--body); color: var(--muted); }
.row,
.row:last-child { background: linear-gradient(#0d0d0d, #080808); border: 1px solid #2a2a2a; border-radius: 6px; margin-top: 10px; padding: 12px 12px 12px 20px; box-shadow: inset 0 0 0 2px #000, 0 2px 0 #000; }
.row::before { left: 8px; top: 12px; bottom: 12px; box-shadow: 0 0 8px var(--sport); }
.row { grid-template-columns: 150px minmax(0, 1fr) auto; }
.t { font-weight: 800; font-size: 26px; height: 34px; gap: 6px; letter-spacing: 0.01em; }
.t img { width: 24px; height: 24px; }
.t .sc { font: 900 24px/1 var(--led); background: #000; border: 1px solid #2e2e2e; border-radius: 3px; padding: 5px 6px 3px; min-width: 2.3ch; text-align: right; color: #ffd24a; text-shadow: var(--glow); }
.t.dim .abbr { color: var(--muted); }
.t.dim .sc { color: #a8842a; text-shadow: none; }
.t .abbr small { font-family: var(--body); font-size: 13px; }
.st { color: var(--gold); font-weight: 400; font-size: 15px; }
.lg { color: #000; border-radius: 2px; }
.sub { font-size: 15px; }
.sub.gold { color: #ff7a4a; font-weight: 400; }
.math { font-size: 12px; }
.pts { font: 900 18px/1 var(--led); border-radius: 3px; background: #000; border-color: #2e2e2e; color: var(--muted); padding-top: 7px; }
.pts.warm { color: var(--ink); border-color: #2e2e2e; }
.pts.hot { background: #000; color: #ff4a3d; border-color: var(--alert); text-shadow: 0 0 8px rgba(255, 45, 31, 0.7); }
.watch { border-radius: 3px; font-weight: 400; font-size: 13px; }
.panel { border: 1px solid #2e2e2e; border-bottom: 0; border-radius: 10px 10px 0 0; }
.big { font-weight: 800; font-size: 28px; }
.big .num { font-family: var(--led); font-weight: 900; text-shadow: var(--glow); }
.panel h3 { font-weight: 800; }
.wp .bar span.lead { background: var(--gold); box-shadow: 0 0 8px rgba(82, 255, 143, 0.6); }
.flag, .watchbtn, .done, .services .svc, .switch, #teamq { border-radius: 4px; }
.flag.rare, .done { color: #000; }
table.score tr.total td { color: var(--ink); }

/* ---- Alerts: a sideways ribbon of tiles ---- */
.alert .tag { background: var(--alert); color: #000; border-radius: 2px; font: 800 14px/1 var(--display); letter-spacing: 0.1em; padding: 6px 7px 5px; }
.alert .what b { font: 800 21px/1.05 var(--display); letter-spacing: 0.01em; }
.alert .meta { display: block; font: 400 13px/1.3 var(--body); margin-top: 3px; }
.alert .on { font-weight: 400; }
.alert .tm { display: inline-flex; align-items: center; gap: 6px; font: 800 20px/1 var(--display); }
.alert .tm b { font: 900 20px/1 var(--led); color: #ffd24a; text-shadow: var(--glow); padding-top: 2px; }



.alerts { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-left: -16px; margin-right: -16px; padding: 0 16px; }
.alerts::-webkit-scrollbar { display: none; }
.alert { flex: none; width: 236px; scroll-snap-align: start; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "tag on" "who who" "what what"; align-items: center; gap: 10px; padding: 10px 12px 12px; background: #140201; border: 1px solid var(--alert); border-radius: 6px; color: #ff6a5e; box-shadow: inset 0 0 26px rgba(255, 45, 31, 0.14); }
.alert .tag { grid-area: tag; }
.alert .on { grid-area: on; justify-self: end; }
.alert .who { grid-area: who; display: grid; gap: 6px; }
.alert .what { grid-area: what; }
.alert .tm { display: grid; grid-template-columns: 22px 1fr auto; color: var(--ink); }
.alert .what b { color: #ff7a6e; text-shadow: 0 0 10px rgba(255, 45, 31, 0.6); font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alert .what .meta { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alert .on { color: var(--gold); font-size: 13px; }

/* Big plays, on the board */
.play .when { font-family: var(--body); }
.play .sc { font: 900 14px/1 var(--led); color: var(--ink); }
.play.key .txt b { text-shadow: 0 0 8px rgba(255, 45, 31, 0.6); }
.clip { font-family: var(--display); font-size: 16px; }
.chip .ll { width: 18px; height: 18px; }

@media (max-width: 480px) {
  .row { grid-template-columns: 124px minmax(0, 1fr) auto; gap: 6px 10px; padding-left: 18px; }
  .t { font-size: 22px; }
  .t .sc { font-size: 20px; padding: 4px 5px 2px; }
  .st { font-size: 14px; }
  .sub { font-size: 14px; }
}