/* Spotlight's screen. Every rule sits under html.spotlight-host, which host.js adds only when it
   takes over the page, so nothing here touches the service's site otherwise. */
/* The colours are the brand's (chosen by the user 2026-11-10): black, yellow #FFD23F, white and
   plain greys. The website uses the same ones (site/site.css). */
html.spotlight-host {
  --panel: rgba(10, 10, 10, 0.92);
  --text: #f5f5f5;
  --muted: #a3a3a3;
  --accent: #ffd23f;
  --button: #2a2a2a;
  --sheet: #0e0e0e;                     /* the My bets sheet and the banner */
  --card: #1a1a1a;                      /* one bet, one team, one form */
  --line: rgba(255, 255, 255, 0.12);    /* hairlines */
  --good: #3ddc84;
  --bad: #ff6b6b;
  color-scheme: dark;
  height: 100%;
  overflow: hidden;
  background: #000;
  color: var(--text);
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;

  & body { margin: 0; height: 100%; overflow: hidden; background: #000; }
  & .muted { color: var(--muted); }

  /* The banner (bets and players) takes a strip on the right; the games get the rest. */
  --banner-w: 0px;
  &.with-banner { --banner-w: 320px; }

  /* Games. Tiles are never moved in the page (moving an iframe reloads it); views change by CSS only. */
  & #stage { position: fixed; inset: 0 var(--banner-w) 0 0; background: #000; transition: top 0.18s ease, bottom 0.18s ease; }
  /* The controls were brought down with the mouse: the games move down by the controls' height
     (--bar-h, set by host.js) instead of being covered, so the top of a game page, where services
     put their sign-in, stays in reach. Moved, never resized: a resized game page re-arranges itself. */
  --bar-h: 0px;
  &.bar-down #stage { top: var(--bar-h); bottom: calc(-1 * var(--bar-h)); }
  & .tile { position: relative; background: #000; }
  & .tile iframe { display: block; width: 100%; height: 100%; border: 0; background: #000; }

  /* One game: every tile fills the screen, stacked; the game on screen sits on top. The ones
     underneath keep playing, so switching is instant. */
  & #stage.focus .tile { position: absolute; inset: 0; z-index: 1; }
  & #stage.focus .tile.active { z-index: 2; }

  /* Grid: 2 games side by side, 3–4 games in a 2×2 grid. Each game stays full-screen size and is
     shrunk to fit its square (sizes come from fitGrid() in host.js), so game pages never re-arrange. */
  & #stage.grid { display: grid; gap: 4px; }
  & #stage.grid .tile { overflow: hidden; }
  & #stage.grid .tile iframe {
    position: absolute; left: 0; top: 0;
    width: var(--full-w); height: var(--full-h);
    transform: translate(var(--dx), var(--dy)) scale(var(--scale));
    transform-origin: 0 0;
  }
  & #stage.grid[data-count="1"] { grid-template: 1fr / 1fr; }
  & #stage.grid[data-count="2"] { grid-template: 1fr / 1fr 1fr; }
  & #stage.grid[data-count="3"],
  & #stage.grid[data-count="4"] { grid-template: 1fr 1fr / 1fr 1fr; }
  & #stage.grid .tile.active::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 3px solid var(--accent);
    pointer-events: none;
  }

  /* Whose play Spotlight flipped to this game for: a small tag in the corner of the picture. */
  & .tile .why {
    position: absolute; left: 16px; bottom: 16px; z-index: 3; pointer-events: none;
    padding: 6px 12px; border-radius: 999px; background: var(--accent); color: #000;
    font-weight: 700; font-size: 13px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  }
  & .tile .why[hidden] { display: none; }

  /* A game left out of an automatic 2-4 game box: out of sight but still playing, so coming back
     to it is instant. "fixed" takes it out of the grid, so it does not use up a square. */
  & #stage .tile.off {
    position: fixed; inset: 0 var(--banner-w) 0 0; z-index: 0;
    opacity: 0; pointer-events: none;
  }

  /* Controls: hidden until the mouse reaches the top edge or a key is pressed. */
  & #hotzone { position: fixed; top: 0; left: 0; right: 0; height: 12px; z-index: 10; }
  & #bar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 11;
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    padding: 8px 16px;
    background: var(--panel);
    transform: translateY(-100%);
    transition: transform 0.18s ease;
  }
  & #bar.show { transform: none; }
  /* The name in the brand's lettering (Oswald Bold; host.js loads the file). If the host site
     refuses the file, the next fonts in the list stand in. */
  & .brand { font: 700 17px/1 "Spotlight Oswald", Impact, "Arial Narrow", sans-serif; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; }
  & #slots { display: flex; gap: 4px; }

  & button {
    font: inherit; color: var(--text); background: var(--button);
    border: 0; border-radius: 8px; padding: 6px 10px; cursor: pointer;
    transition: filter 0.12s ease, background 0.12s ease, color 0.12s ease;
  }
  & button:hover { filter: brightness(1.25); }
  & button:disabled { opacity: 0.3; cursor: default; filter: none; }
  & button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  & #slots button.active { background: var(--accent); color: #000; font-weight: 700; }
  /* The game Spotlight thinks each screen is showing, and a star on the default game (key H). */
  & #slots button[data-game]:not([data-game=""])::after {
    content: attr(data-game); margin-left: 6px; font-size: 11px; font-weight: 400; color: var(--muted);
  }
  & #slots button.active::after { color: #333; }
  & #slots button.pinned::before { content: "★ "; }

  & #toast {
    position: fixed; top: 24px; left: 50%; transform: translateX(-50%); z-index: 12;
    padding: 8px 18px; border-radius: 8px; background: var(--panel); font-weight: 600;
    max-width: min(640px, 80vw); text-align: center;
  }
  & #toast[hidden], & aside[hidden], & #manager[hidden] { display: none; }

  /* The big pop-up when one of the user's numbers changes: the one yellow thing on the screen,
     over the middle of the games, in the brand's lettering. It never takes a click. */
  & #pop {
    position: fixed; left: calc((100vw - var(--banner-w)) / 2); top: 14%; z-index: 12;
    display: grid; gap: 6px; justify-items: center; padding: 14px 28px; border-radius: 8px;
    background: var(--accent); color: #0a0a0a; text-align: center; pointer-events: none;
    font-family: "Spotlight Oswald", Impact, "Arial Narrow", sans-serif; text-transform: uppercase; letter-spacing: 0.02em;
    transform: translateX(-50%);
  }
  & #pop[hidden] { display: none; }
  /* The banner at the top of the game during a flip, naming the player and the bet in full. It is
     a frame of the add-on's own (tag.html), yellow all over; this page only places it. */
  & #flip-tag {
    position: fixed; left: calc((100vw - var(--banner-w)) / 2); top: 10px; z-index: 12;
    width: min(640px, calc(100vw - var(--banner-w) - 32px)); height: 46px;
    border: 0; border-radius: 8px; pointer-events: none; transform: translateX(-50%);
  }
  & #flip-tag[hidden] { display: none; }
  & #pop b { font-size: clamp(18px, 2.2vw, 26px); font-weight: 700; line-height: 1; }
  & #pop i { font-size: clamp(40px, 6vw, 72px); font-weight: 700; font-style: normal; line-height: 1; }
  & #pop.in { animation: pop-in 0.25s ease-out; }
  @media (prefers-reduced-motion: reduce) { & #pop.in { animation: none; } }

  /* "Sign in first": shown over the top of a game page that offers a sign-in while nothing plays
     in it. Yellow, because until the user is signed in it is the one thing on the screen that
     matters. Its arrow points up at the page's own top bar, where services put their sign-in. */
  & #signin-note {
    position: fixed; left: calc((100vw - var(--banner-w)) / 2); top: 76px; z-index: 12;
    display: flex; align-items: center; gap: 14px; max-width: min(720px, calc(100vw - var(--banner-w) - 32px));
    padding: 12px 16px; border-radius: 8px; background: var(--accent); color: #0a0a0a;
    transform: translateX(-50%);
  }
  & #signin-note[hidden], & #signin-note [hidden] { display: none; }
  & #signin-note .arrow { font-size: 28px; font-weight: 700; line-height: 1; }
  & #signin-note b { display: block; font-size: 17px; }
  & #signin-note .more { font-size: 13px; }
  & #signin-note button { flex: none; background: #0a0a0a; color: #fff; font-weight: 700; padding: 8px 12px; }
  & #signin-note #signin-hide { background: none; color: #0a0a0a; font-weight: 400; text-decoration: underline; }

  & #help, & #diag {
    position: fixed; right: calc(var(--banner-w) + 16px); bottom: 16px; z-index: 12;
    max-width: min(560px, calc(100vw - var(--banner-w) - 32px));
    padding: 12px 16px; border-radius: 10px; background: var(--panel);
  }
  & #help { left: 16px; right: auto; }   /* keys on the left, test readout on the right: both can be open */
  & #help h2 { margin: 0 0 8px; font-size: 15px; }
  & #help p, & #diag p { margin: 4px 0; }
  & kbd {
    display: inline-block; min-width: 1.2em; padding: 0 5px; border-radius: 4px;
    background: var(--button); text-align: center; font: 600 12px/1.6 ui-monospace, monospace;
  }

  /* The add-on's own frame (panel.html), where the banner and My bets are drawn out of the host
     site's reach: a strip on the right, and the whole screen while My bets is open. It is
     see-through except for what it draws. The rules for #banner and #manager below apply inside it. */
  & #panel {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 5;
    width: var(--banner-w); height: 100%; border: 0; background: transparent; color-scheme: dark;
  }
  & #panel.open { left: 0; width: 100%; z-index: 20; }
  /* No game open: the frame gets the whole screen for the start card (start.js), under the controls. */
  &.no-games #panel { left: 0; width: 100%; }

  /* The start card, inside the frame: centred in the part of the screen the games would have. */
  & #start {
    position: fixed; inset: 0 0 0 0; z-index: 4; overflow-y: auto;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    box-sizing: border-box; padding: 56px 24px 24px; background: #000; text-align: center;
  }
  &.with-banner #start { right: var(--banner-w); }
  & #start[hidden] { display: none; }
  /* The brand's main logo, from its own file (never the name typed in a font): 84px tall, above
     its smallest allowed size of 56px. */
  & #start img.logo { display: block; width: auto; height: 84px; margin: 0 0 18px; }
  & #start h2 { margin: 18px 0 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
  & #start p { margin: 4px 0; max-width: 520px; }
  & #start .nothing { font-size: 17px; font-weight: 600; }
  & #start ul.games { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; width: min(560px, 100%); }
  & #start ul.games li {
    display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px;
    background: var(--card); border: 1px solid var(--line); text-align: left;
  }
  & #start ul.games .game { flex: 1; font-weight: 600; }
  & #start .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 10px 0 2px; }
  & #start button { padding: 8px 14px; }
  & #start button.primary { background: var(--accent); color: #000; font-weight: 700; }

  /* Banner: the user's games tonight, then their bets and fantasy players with live numbers. */
  & #banner {
    position: fixed; top: 0; right: 0; bottom: 0; width: var(--banner-w); z-index: 5;
    box-sizing: border-box; padding: 6px 12px 16px; overflow-y: auto;
    background: var(--sheet); border-left: 1px solid var(--line);
  }
  & #banner h2 {
    margin: 12px 0 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--muted);
  }
  & #banner .games { list-style: none; margin: 0; padding: 0; }
  & #banner .games li { display: flex; gap: 8px; align-items: baseline; padding: 3px 0; }
  & #banner .where {
    flex: none; min-width: 1.5em; border-radius: 4px; background: var(--button);
    text-align: center; font-weight: 700; color: var(--muted);
  }
  & #banner .games li.open .where { background: var(--accent); color: #000; }
  /* A game of the user's that is not open: click it to add a screen for it. */
  & #banner .games li.closed { cursor: pointer; border-radius: 6px; }
  & #banner .games li.closed:hover, & #banner .games li.closed:focus-visible { outline: none; background: var(--card); }
  & #banner .games li.closed:hover .where { color: var(--text); }
  /* First-time guide: three steps that tick off. */
  & #banner .guide { margin: 8px 0 0; padding: 4px 12px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
  & #banner .guide ol { list-style: none; margin: 0; padding: 0; }
  & #banner .guide li { display: flex; gap: 8px; align-items: baseline; padding: 3px 0; }
  & #banner .guide .tick {
    flex: none; width: 16px; height: 16px; border: 1.5px solid var(--muted); border-radius: 50%;
    font-size: 11px; font-weight: 700; line-height: 16px; text-align: center;
  }
  & #banner .guide li.done { color: var(--muted); }
  & #banner .guide li.done .tick { border-color: var(--good); background: var(--good); color: #000; }
  & #banner .guide p { margin: 6px 0; font-size: 12px; }
  & #banner .guide button.hide { padding: 2px 0; background: none; color: var(--muted); font-size: 12px; text-decoration: underline; }
  & #banner .games .game { flex: 1; min-width: 0; }
  & #banner .time { flex: none; font-size: 12px; color: var(--muted); white-space: nowrap; }
  & #banner .row {
    margin-bottom: 6px; padding: 8px 10px; border-radius: 8px;
    background: var(--card); border-left: 3px solid transparent;
  }
  & #banner .row .line { display: flex; justify-content: space-between; gap: 8px; }
  & #banner .row .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
  & #banner .row .result { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; }
  /* A fantasy player's live numbers ("5 rush yds, 2 rec, 10 rec yds") are longer than a bet's
     number: they go under the name, on a line of their own that may wrap. */
  & #banner .row.fantasy .line:not(.small) { flex-wrap: wrap; }
  & #banner .row.fantasy .result { flex: 1 1 100%; font-weight: 600; }
  & #banner .row .small { font-size: 12px; color: var(--muted); }
  & #banner .row .market { min-width: 0; }   /* wraps onto a second line, so stake and odds are never cut off */
  & #banner .row.won { border-left-color: var(--good); }
  & #banner .row.won .result { color: var(--good); }
  & #banner .row.lost { border-left-color: var(--bad); }
  & #banner .row.lost .result { color: var(--bad); }
  /* A number just changed: lit for 4 seconds (FLASH_MS in banner.js). */
  & #banner .row.flash { animation: spotlight-flash 4s ease-out both; }
  /* A leg whose parlay is already lost on another leg. */
  & #banner .row.dead { opacity: 0.5; }
  /* How the night is going: decided bets and what they add up to. */
  & #banner .tally {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px;
    margin: 8px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--card); font-size: 13px;
  }
  & #banner .tally strong { margin-left: auto; font-variant-numeric: tabular-nums; }
  & #banner .tally.up strong { color: var(--good); }
  & #banner .tally.down strong { color: var(--bad); }
  & #banner .tally .muted { flex-basis: 100%; font-size: 12px; }
  & #banner .note { margin: 12px 0; }
  & #banner .empty { margin: 20px 4px; text-align: center; }
  & #banner .empty button { margin-top: 8px; padding: 8px 16px; background: var(--accent); color: #000; font-weight: 700; }

  /* My bets / My players: one sheet over the games (which keep playing). It opens on a chooser
     of four big buttons; each leads to a page with "Back" at the top. Bottom: one button back
     to the games. */
  & #manager {
    position: fixed; inset: 0; z-index: 20; box-sizing: border-box; padding: 32px 16px;
    display: flex; align-items: flex-start; justify-content: center;
    background: rgba(0, 0, 0, 0.66);
  }
  & #manager .panel {
    display: flex; flex-direction: column; width: min(760px, 100%); max-height: 100%;
    overflow: hidden; border-radius: 16px; background: var(--sheet);
    border: 1px solid var(--line); box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
  }
  & #manager .panel > header {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    min-height: 48px; padding: 4px 8px 4px 12px; border-bottom: 1px solid var(--line);
  }
  & #manager .panel > header .title { flex: 1; font-size: 15px; }
  & #manager button.back { padding: 6px 10px; background: none; color: var(--muted); font-weight: 600; }
  & #manager button.back:hover { color: var(--text); filter: none; }
  /* The chooser: what do you want to do? Two big buttons to a row, one to a row when narrow. */
  & #manager h3.ask { margin: 4px 0 14px; font-size: 18px; color: var(--text); }
  & #manager .chooser { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
  & #manager .choice {
    display: grid; gap: 4px; padding: 18px 16px; border: 1px solid var(--line); border-radius: 10px;
    background: var(--card); text-align: left;
  }
  & #manager .choice:hover, & #manager .choice:focus-visible { border-color: var(--accent); filter: none; }
  & #manager .choice strong { font-size: 16px; }
  & #manager .choice span { color: var(--muted); font-size: 13px; font-weight: 400; }
  & #manager .actions.minor { margin-top: 16px; }
  & #manager button.close { padding: 4px 10px; background: none; color: var(--muted); font-size: 22px; line-height: 1; }
  & #manager button.close:hover { color: var(--text); filter: none; }
  & #manager button.primary { background: var(--accent); color: #000; font-weight: 700; }
  & #manager button.quiet, & #manager button.danger { background: none; color: var(--muted); }
  & #manager button.quiet:hover { color: var(--text); background: var(--button); filter: none; }
  & #manager button.danger:hover { color: var(--bad); background: rgba(255, 107, 107, 0.12); filter: none; }
  & #manager .note { margin: 0; padding: 8px 16px; background: rgba(255, 255, 255, 0.06); }
  & #manager .note.busy { background: rgba(255, 210, 63,0.1); color: var(--accent); }
  & #manager .body { padding: 16px 16px 20px; overflow-y: auto; }
  & #manager .panel > footer {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 16px; border-top: 1px solid var(--line); font-size: 13px;
  }
  & #manager button.watch { flex: none; padding: 10px 20px; border-radius: 10px; font-size: 15px; }
  & #manager h3 { margin: 20px 0 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
  & #manager .section { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 20px 0 8px; }
  & #manager .section h3 { margin: 0; }
  & #manager p { margin: 6px 0; }
  & #manager .hint { font-size: 12px; }
  & #manager input, & #manager select {
    font: inherit; color: var(--text); background: #000000;
    border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 8px; padding: 7px 10px;
    transition: border-color 0.12s ease;
  }
  & #manager input:focus-visible, & #manager select:focus-visible { outline: none; border-color: var(--accent); }
  & #manager input[type="checkbox"] { padding: 0; accent-color: var(--accent); }
  & #manager .fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px 12px; }
  & #manager .field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
  & #manager .field input, & #manager .field select { font-size: 14px; }
  /* Something the user still has to fill in before the bet can be saved. */
  & #manager .field.need input, & #manager .field.need select { border-color: var(--bad); }
  & #manager .field.need > span::after { content: " (needed)"; color: var(--bad); }
  & #manager details.more { margin-top: 10px; }
  & #manager details.past { margin-top: 20px; }
  & #manager details.past .section { margin: 8px 0; }
  & #manager details summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted); }
  & #manager details summary:hover { color: var(--text); }
  & #manager details.more .fields { margin-top: 8px; }
  & #manager .line-field {
    flex-direction: row; align-items: center; justify-content: space-between;
    max-width: 480px; margin: 6px 0; font-size: 14px; color: var(--text);
  }
  & #manager .line-field input { width: 90px; }
  & #manager .wide-field { max-width: 520px; margin: 10px 0; }
  & #manager .check { display: block; margin: 6px 0; }
  & #manager .checks { display: flex; flex-wrap: wrap; gap: 0 18px; }
  & #manager .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 4px; }
  & #manager .actions.warn { padding: 8px 10px; border-radius: 8px; background: #3a2f12; }
  & #manager .error { color: var(--bad); }
  & #manager .error:empty { display: none; }
  /* The "add from a picture" box: paste, drop a picture on it, or click it. */
  & #manager .drop {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 20px 16px; text-align: center; cursor: pointer;
    border: 1.5px dashed rgba(255, 255, 255, 0.22); border-radius: 12px; background: rgba(255, 255, 255, 0.02);
    transition: border-color 0.12s ease, background 0.12s ease;
  }
  & #manager .drop:hover, & #manager .drop.over, & #manager .drop:focus-visible {
    outline: none; border-color: var(--accent); background: rgba(255, 210, 63,0.06);
  }
  & #manager .drop .plus {
    width: 36px; height: 36px; margin-bottom: 4px; border-radius: 50%;
    background: var(--accent); color: #000; font-size: 24px; font-weight: 600; line-height: 34px;
  }
  & #manager .drop strong { font-size: 16px; }
  & #manager .drop small { margin-top: 4px; font-size: 12px; color: var(--muted); }
  & #manager .bet-form, & #manager .roster {
    margin: 8px 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card);
  }
  /* One bet, team or favorite. Open bets carry their rank and can be dragged into a new order. */
  & #manager .card {
    display: flex; align-items: center; gap: 8px; margin: 6px 0; padding: 10px 12px;
    border: 1px solid var(--line); border-radius: 10px; background: var(--card);
    transition: border-color 0.12s ease, opacity 0.12s ease;
  }
  & #manager .card:hover { border-color: rgba(255, 255, 255, 0.2); }
  & #manager .card[draggable="true"] { cursor: grab; }
  & #manager .card.dragging { opacity: 0.4; }
  & #manager .card.over { border-color: var(--accent); }
  & #manager .card.draft { border-style: dashed; }
  & #manager .card .what { flex: 1; min-width: 0; }
  & #manager .card .what .muted { font-size: 12px; }
  & #manager .card .rank {
    flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #000;
    font-size: 12px; font-weight: 700; line-height: 24px; text-align: center;
  }
  & #manager .card .order { display: flex; flex-direction: column; flex: none; }
  & #manager .card .order button { padding: 0 6px; background: none; color: var(--muted); font-size: 10px; line-height: 14px; }
  & #manager .card .order button:hover:not(:disabled) { color: var(--text); filter: none; }
  & #manager .card.won { border-left: 3px solid var(--good); }
  & #manager .card.lost { border-left: 3px solid var(--bad); }
  & #manager form.inline { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
  /* Fantasy tab: one tile per fantasy company; the chosen one is outlined in the brand yellow. */
  & #manager .tiles { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
  & #manager .site-tile { min-width: 110px; padding: 12px 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); font-weight: 700; }
  & #manager .site-tile.on { border-color: var(--accent); color: var(--accent); }
  /* How a team's points are counted: its league's own rules, or the user's choice for a catch. */
  & #manager .scoring { margin: 10px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; }
  & #manager .scoring p { margin: 0 0 4px; }
  & #manager input.wide { flex: 1; min-width: 260px; }
  & #manager .player { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0; }
  & #manager .player input.short { width: 130px; }
}

/* Lights a banner row whose number just changed. (Animations cannot sit inside the block above.) */
@keyframes spotlight-flash {
  from { background: #8a6f1c; }
  to { background: #1c1d24; }   /* the row's own colour (--card) */
}
/* The pop-up's entrance. It keeps the sideways shift that centres it (see #pop). */
@keyframes pop-in {
  from { opacity: 0; transform: translateX(-50%) scale(0.85); }
  to { opacity: 1; transform: translateX(-50%) scale(1); }
}