/* ============================================================
   EVERFIELD — design system
   Aesthetic: floodlit night broadcast. Near-black green-cast
   surfaces, chalk ink, volt accent used sharply, gold for glory.
   ============================================================ */

:root {
  /* surfaces */
  --bg: #070b08;
  --surface: #0d130e;
  --surface-2: #121a12;
  --surface-3: #182218;
  --line: #223122;
  --line-soft: rgba(120, 150, 110, 0.12);

  /* ink */
  --ink: #edf2e4;
  --ink-2: #a3b198;
  --ink-3: #63735c;

  /* signals */
  --volt: #d7f95c;
  --volt-ink: #0b0f06;
  --volt-glow: rgba(215, 249, 92, 0.35);
  --gold: #f2c94c;
  --danger: #ff5d45;
  --sky: #6ecff6;
  --win: #7fe08a;
  --loss: #ff7a68;
  --draw: #8b9a84;

  /* charts — fixed categorical order, validated for dark surface */
  --chart-1: #d7f95c;
  --chart-2: #6ecff6;
  --chart-3: #ff8a5c;
  --chart-4: #c9a1f5;
  --chart-5: #5ce8b2;
  --chart-6: #f76ea1;

  /* type */
  --font-display: 'Bricolage Grotesque', sans-serif;
  --font-body: 'Schibsted Grotesk', sans-serif;
  --font-mono: 'Spline Sans Mono', monospace;
  --font-serif: 'Instrument Serif', serif;

  --rad: 10px;
  --rad-sm: 6px;
  --topbar-h: 58px;
  --ticker-h: 40px;
  --nav-w: 132px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.45;
  overflow: hidden;
  /* faint floodlight wash + grain-ish vignette */
  background-image:
    radial-gradient(1200px 600px at 18% -10%, rgba(150, 200, 120, 0.07), transparent 60%),
    radial-gradient(1400px 700px at 85% 110%, rgba(110, 207, 246, 0.045), transparent 60%);
}

::selection { background: var(--volt); color: var(--volt-ink); }

/* scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; }
*::-webkit-scrollbar-track { background: transparent; }

/* ---------- boot splash ---------- */
#boot-splash {
  position: fixed; inset: 0; z-index: 99;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; background: var(--bg);
}
.boot-mark {
  font-family: var(--font-display); font-weight: 800; font-size: 44px; letter-spacing: 0.04em;
}
.boot-mark span { color: var(--volt); }
.boot-sub {
  font-family: var(--font-serif); font-style: italic; color: var(--ink-2); font-size: 16px;
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.35; } }

/* ---------- app frame ---------- */
#app { height: 100vh; display: flex; flex-direction: column; }

#topbar {
  height: var(--topbar-h); flex: 0 0 auto;
  display: flex; align-items: center; gap: 18px; padding: 0 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(215, 249, 92, 0.035), transparent 70%), var(--surface);
}
.brand { display: flex; flex-direction: column; line-height: 1.05; }
.wordmark {
  font-family: var(--font-display); font-weight: 800; font-size: 21px; letter-spacing: 0.05em;
}
.wordmark span { color: var(--volt); }
.brand-sub { font-family: var(--font-serif); font-style: italic; font-size: 11.5px; color: var(--ink-3); }

.topbar-mid { display: flex; gap: 8px; align-items: center; flex: 1; justify-content: center; }

.chip {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 99px; border: 1px solid var(--line); color: var(--ink-2);
  background: var(--surface-2); white-space: nowrap;
}
.chip-season { color: var(--volt); border-color: rgba(215, 249, 92, 0.35); }

/* ---------- my club (SPEC4 §2) ----------
   The followed club lives in the top bar: crest, short name, next fixture, form.
   Two controls in one pill — the club itself (opens its page) and a ▾ that opens
   the picker — so neither gesture has to guess what the other meant. */
.myclub { display: flex; align-items: stretch; }
/* an author `display` beats the UA's [hidden] rule — say it again, or the empty
   pill sits in the top bar of every universe with no club followed */
.myclub[hidden], .myclub-add[hidden], .ticker-mine[hidden] { display: none; }
.myclub-open, .myclub-change {
  background: rgba(215, 249, 92, 0.07); border: 1px solid rgba(215, 249, 92, 0.35);
  color: var(--ink); cursor: pointer; transition: all 0.15s ease;
  font-family: var(--font-body);
}
.myclub-open {
  display: flex; align-items: center; gap: 8px;
  padding: 3px 9px; border-radius: 99px 0 0 99px; border-right: none; max-width: 260px;
}
.myclub-open:hover, .myclub-change:hover { background: rgba(215, 249, 92, 0.14); }
.myclub-txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; min-width: 0; }
.myclub-txt b { font-family: var(--font-display); font-weight: 700; font-size: 12.5px; letter-spacing: 0.02em; }
.myclub-sub {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em; color: var(--volt);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px;
}
.myclub-form { display: inline-flex; }
.myclub-change {
  border-radius: 0 99px 99px 0; padding: 0 8px;
  font-family: var(--font-mono); font-size: 10px; color: var(--volt);
}
.myclub-add { cursor: pointer; color: var(--volt); border-color: rgba(215, 249, 92, 0.3); }
.myclub-add:hover { background: rgba(215, 249, 92, 0.12); }

.controls { display: flex; gap: 6px; align-items: center; }
.ctl-btn {
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-2);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--rad-sm);
  padding: 6px 10px; cursor: pointer; transition: all 0.15s ease;
}
.ctl-btn:hover { color: var(--ink); border-color: var(--ink-3); }
.speed-group { display: flex; }
.speed-group .ctl-btn { border-radius: 0; margin-left: -1px; }
.speed-group .ctl-btn:first-child { border-radius: var(--rad-sm) 0 0 var(--rad-sm); margin-left: 0; }
.speed-group .ctl-btn:last-child { border-radius: 0 var(--rad-sm) var(--rad-sm) 0; }
.ctl-btn.active, .ctl-btn.active:hover {
  background: var(--volt); color: var(--volt-ink); border-color: var(--volt); font-weight: 700;
}
.ctl-universe { color: var(--gold); }

#shell { flex: 1; display: flex; min-height: 0; }

/* ---------- side nav ---------- */
#sidenav {
  width: var(--nav-w); flex: 0 0 auto; padding: 14px 10px; display: flex; flex-direction: column; gap: 4px;
  border-right: 1px solid var(--line); background: var(--surface);
}
.nav-btn {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  background: none; border: none; border-radius: var(--rad-sm); cursor: pointer;
  color: var(--ink-2); font-family: var(--font-body); font-size: 13.5px; font-weight: 500;
  text-align: left; transition: all 0.15s ease;
}
.nav-btn:hover { color: var(--ink); background: var(--surface-2); }
.nav-btn.active { color: var(--volt); background: rgba(215, 249, 92, 0.08); }
.nav-ico { width: 18px; text-align: center; font-size: 13px; opacity: 0.9; }

/* ---------- stage & views ---------- */
#stage { flex: 1; min-width: 0; overflow-y: auto; overflow-x: hidden; position: relative; }
.view { display: none; padding: 20px 24px 40px; }
.view.active { display: block; animation: view-enter 0.28s ease; }
#view-live.view { padding: 16px; height: 100%; }
@keyframes view-enter { from { opacity: 0; transform: translateY(6px); } }

/* section headings shared by views */
.sec-title {
  font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: 0.01em;
  margin: 4px 0 14px;
}
.sec-sub { font-family: var(--font-serif); font-style: italic; color: var(--ink-2); margin: -10px 0 16px; }

/* ---------- live view ----------
   The scoreboard and commentary are siblings of the pitch, not children of it:
   on desktop they are absolutely overlaid on the broadcast; on phones they
   drop into normal flow above/below it so they never eat the pitch. */
.live-grid { display: grid; grid-template-columns: 1fr 300px; gap: 14px; height: 100%; }
.pitch-col { position: relative; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.pitch-wrap {
  position: relative; border-radius: var(--rad); overflow: hidden;
  border: 1px solid var(--line); background: #0a150c; min-height: 0; flex: 1;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), inset 0 0 120px rgba(0, 0, 0, 0.4);
}
#pitch { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

#scoreboard {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 2;
  background: rgba(7, 11, 8, 0.82); backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: var(--rad);
  padding: 7px 16px 9px; min-width: 320px; text-align: center;
}
.sb-comp {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 3px;
}
.sb-main { display: flex; align-items: center; justify-content: center; gap: 14px; }
.sb-team { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 16px; min-width: 110px; justify-content: flex-end; }
.sb-team.sb-away { justify-content: flex-start; }
.sb-team .crest { width: 22px; height: 22px; }
.sb-mid { display: flex; flex-direction: column; align-items: center; }
.sb-score {
  font-family: var(--font-mono); font-weight: 700; font-size: 24px; letter-spacing: 0.02em;
  line-height: 1; white-space: nowrap;   /* never wrap "1–0" onto two lines */
}
.sb-clock { font-family: var(--font-mono); font-size: 11px; color: var(--volt); margin-top: 2px; }
.sb-comm {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 2;
  width: 72%; text-align: center; pointer-events: none;
  font-family: var(--font-serif); font-style: italic; font-size: 15px; color: rgba(237, 242, 228, 0.92);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9); min-height: 22px;
  transition: opacity 0.3s ease;
}

#live-side { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }

/* ---------- ticker ---------- */
#ticker {
  height: var(--ticker-h); flex: 0 0 auto; overflow: hidden; position: relative;
  border-top: 1px solid var(--line); background: var(--surface);
  display: flex; align-items: center;
}
#ticker::before {
  content: 'LIVE'; position: absolute; left: 0; top: 0; bottom: 0; z-index: 2;
  display: flex; align-items: center; padding: 0 14px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.18em;
  color: var(--volt-ink); background: var(--volt);
}
#ticker-track {
  display: inline-flex; gap: 44px; white-space: nowrap; padding-left: 80px;
  will-change: transform; animation: ticker-scroll var(--ticker-dur, 60s) linear infinite;
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-2);
}
#ticker-track:hover { animation-play-state: paused; }
@keyframes ticker-scroll { to { transform: translateX(-50%); } }
.tick-item b { color: var(--ink); font-weight: 600; }
.tick-item .tick-flag { color: var(--volt); margin-right: 6px; }
.tick-item .tick-goal { color: var(--gold); }
.tick-mine .tick-flag { color: var(--gold); }
.tick-mine b { color: var(--gold); }

/* the wire's one switch: everything, or only your club (SPEC4 §2) */
.ticker-mine {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%); z-index: 3;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
  padding: 4px 9px; border-radius: 99px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2);
  transition: all 0.15s ease;
}
/* the switch sits ON the wire, so it carries its own patch of surface with it —
   headlines fade out behind it instead of running under it */
.ticker-mine { box-shadow: -14px 0 18px 12px var(--surface); }
.ticker-mine:hover { color: var(--ink); border-color: var(--ink-3); }
.ticker-mine.active {
  background: var(--gold); border-color: var(--gold); color: #1a1405; font-weight: 700;
  box-shadow: -14px 0 18px 12px var(--surface), 0 0 18px rgba(242, 201, 76, 0.25);
}

/* ---------- overlay (interstitials) ---------- */
/* Starts right of the side nav so navigation stays clickable during phase overlays;
   switchView (app.js) hides/restores the pending overlay when leaving/returning to Live. */
#overlay {
  position: fixed; top: var(--topbar-h); left: var(--nav-w); right: 0; bottom: var(--ticker-h); z-index: 50;
  background: rgba(4, 7, 5, 0.78); backdrop-filter: blur(10px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  animation: view-enter 0.3s ease;
}
#overlay[hidden] { display: none; }
#overlay-content { max-width: 980px; width: 92%; max-height: 82vh; overflow-y: auto; }
#overlay-skip { margin-top: 18px; }

/* ---------- drawer (entity pages) ---------- */
/* Above #overlay (50) so entity links inside phase overlays open a usable drawer;
   below #boot-splash (99). */
#drawer {
  position: fixed; top: var(--topbar-h); right: 0; bottom: var(--ticker-h); z-index: 60;
  width: min(620px, 92vw); background: var(--surface);
  border-left: 1px solid var(--line); box-shadow: -30px 0 80px rgba(0, 0, 0, 0.55);
  animation: drawer-in 0.24s ease; display: flex; flex-direction: column;
}
#drawer[hidden] { display: none; }
@keyframes drawer-in { from { transform: translateX(40px); opacity: 0; } }
#drawer-close { position: absolute; top: 12px; right: 14px; z-index: 2; }
#drawer-content { overflow-y: auto; padding: 20px 22px 40px; flex: 1; }

/* ---------- shared components ---------- */
.panel {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--rad);
  padding: 14px 16px;
}
.panel-title {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 10px;
}

.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3); text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line);
  font-weight: 600;
}
.tbl td { padding: 6px 8px; border-bottom: 1px solid var(--line-soft); }
.tbl .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.tbl tr { transition: background 0.12s ease; }
.tbl tbody tr:hover { background: rgba(215, 249, 92, 0.045); }

[data-nav] { cursor: pointer; }
a, .linkish { color: var(--sky); text-decoration: none; cursor: pointer; }
.linkish:hover { text-decoration: underline; }

.crest { display: inline-block; vertical-align: middle; }
.crest svg { display: block; width: 100%; height: 100%; }

/* form dots */
.form-dots { display: inline-flex; gap: 3px; }
.form-dot { width: 7px; height: 7px; border-radius: 50%; }
.form-dot.W { background: var(--win); }
.form-dot.D { background: var(--draw); }
.form-dot.L { background: var(--loss); }

/* rating tints (player overalls & match ratings) */
.rate { font-family: var(--font-mono); font-weight: 700; font-variant-numeric: tabular-nums; }
.rate-elite { color: var(--gold); }
.rate-great { color: var(--volt); }
.rate-good { color: var(--win); }
.rate-mid { color: var(--ink-2); }
.rate-low { color: var(--ink-3); }

/* importance styling for chronicle */
.news-3 { border-left: 3px solid var(--gold); }
.news-2 { border-left: 3px solid var(--volt); }
.news-1 { border-left: 3px solid var(--line); }

/* generic stagger reveal for lists views render */
.stagger > * { animation: view-enter 0.3s ease backwards; }
.stagger > *:nth-child(1) { animation-delay: 0.02s; }
.stagger > *:nth-child(2) { animation-delay: 0.05s; }
.stagger > *:nth-child(3) { animation-delay: 0.08s; }
.stagger > *:nth-child(4) { animation-delay: 0.11s; }
.stagger > *:nth-child(5) { animation-delay: 0.14s; }
.stagger > *:nth-child(6) { animation-delay: 0.17s; }
.stagger > *:nth-child(7) { animation-delay: 0.2s; }
.stagger > *:nth-child(8) { animation-delay: 0.23s; }

/* trophy / award flourish */
.trophy-gold { color: var(--gold); text-shadow: 0 0 24px rgba(242, 201, 76, 0.45); }

/* ---------- responsive ---------- */

/* Tablet / narrow desktop: icon rail, side panels move under the pitch. */
@media (max-width: 1080px) {
  :root { --nav-w: 56px; }
  .nav-lbl { display: none; }
  .nav-btn { justify-content: center; }
  .live-grid { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  /* cap the side rail so the pitch row keeps the remaining height (rail scrolls instead) */
  #live-side { flex-direction: row; overflow-x: auto; max-height: clamp(160px, 35vh, 300px); }
  #live-side > * { min-width: 260px; }
  .brand-sub { display: none; }
}

/* ---------- phones ----------
   The fixed-height broadcast shell doesn't fit a phone. Here the live view
   becomes a SCROLLING COLUMN: slim score bar → pitch at its true aspect →
   commentary → full-width panels. Nothing overlaps the pitch, and the pitch
   is the one element guaranteed its space. */
@media (max-width: 700px) {
  :root { --topbar-h: 50px; --ticker-h: 32px; --nav-w: 100%; }

  /* the side rail costs 56px of a 393px screen — on phones the nav becomes a
     horizontal strip so the pitch gets the full width */
  #shell { flex-direction: column; }
  #sidenav {
    width: 100%; flex: 0 0 auto; flex-direction: row; justify-content: space-between;
    gap: 2px; padding: 5px 6px; overflow-x: auto;
    border-right: none; border-bottom: 1px solid var(--line);
  }
  /* THE LABELS COME BACK ON A PHONE. `.nav-lbl` is hidden from 1080px down, which on a
     tablet is fine — there is a cursor, and the tooltip does the work. On a touch screen
     there is no hover at all, so this row was nine bare glyphs with no way to learn what
     ◬, ◷, ▮ or ⚇ open other than tapping each in turn. Stacked under the icon at 8.5px
     they cost 11px of a 52px strip and buy the one thing a first-time viewer needs.
     Measured: nine labels fit without the strip scrolling down to 360px. Below that the
     longest ('Chronicle') no longer fits the share and the glyphs stand alone again,
     which is why the rule is scoped to a min-width. */
  .nav-btn { flex: 1 1 auto; padding: 6px 2px 5px; justify-content: center; min-height: 44px; }
  .nav-btn.active { box-shadow: inset 0 -2px 0 var(--volt); }
  .nav-ico { font-size: 15px; width: auto; }

  @media (min-width: 361px) {
    .nav-btn { flex-direction: column; gap: 2px; }
    .nav-lbl {
      display: block; font-family: var(--font-mono); font-size: 8.5px;
      letter-spacing: 0.02em; line-height: 1; text-transform: uppercase;
      max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
  }

  /* topbar: everything must fit on one row */
  #topbar { gap: 8px; padding: 0 8px; }
  .wordmark { font-size: 15px; letter-spacing: 0.03em; }
  .topbar-mid { gap: 5px; flex: 0 1 auto; }
  .chip { font-size: 9px; padding: 3px 7px; letter-spacing: 0.04em; }

  /* my club: at 393px the pill keeps the crest, the short name and the form —
     the next fixture is one tap away on the club page and not worth the row */
  .myclub-open { max-width: 118px; padding: 2px 6px; gap: 5px; }
  .myclub-open .crest { width: 16px !important; height: 16px !important; }
  .myclub-txt b { font-size: 11px; }
  .myclub-sub { display: none; }
  .myclub-form { display: none; }
  .myclub-change { padding: 0 5px; }
  .myclub-add-lbl { display: none; }

  .ticker-mine { right: 5px; font-size: 9px; padding: 3px 7px; }
  .controls { gap: 4px; margin-left: auto; }

  /* TAP TARGETS. Measured at 393px: pause was 21×28px and the speed buttons 27×28 —
     the controls a viewer of a zero-input sim touches more than anything else, and
     under the 24×24 CSS-pixel floor on width. Successive rounds of squeezing the one
     top-bar row had paid for the fit out of the padding of these buttons.
     The bar is 50px tall and the buttons were 28, so 44px of HEIGHT is free and costs
     no layout at all. Width is the scarce axis: measured free space in the tightest
     state (360px with a club followed) is 13px across seven controls, so min-width is
     sized to the budget rather than to a wish, and 2× steps aside on phones to pay
     for the rest (see below). Every number here was measured, not chosen. */
  .ctl-btn { padding: 5px 7px; font-size: 11px; min-height: 44px; min-width: 30px; }
  .speed-btn[data-speed="0.5"] { display: none; }   /* ½× is the least useful on a phone */

  /* live view scrolls instead of being clipped to the viewport */
  #view-live.view { height: auto; padding: 10px 10px 24px; }
  .live-grid { display: flex; flex-direction: column; gap: 10px; height: auto; }
  .pitch-col { gap: 8px; }

  /* score bar: in-flow, one line, compact */
  #scoreboard {
    position: static; transform: none; width: 100%; min-width: 0;
    padding: 6px 10px 7px; backdrop-filter: none;
  }
  .sb-comp { font-size: 9px; letter-spacing: 0.08em; }
  .sb-main { gap: 10px; }
  .sb-team { font-size: 14px; min-width: 0; flex: 1; gap: 6px; }
  .sb-team .crest { width: 18px; height: 18px; flex: 0 0 auto; }
  .sb-score { font-size: 20px; }
  .sb-mid { flex: 0 0 auto; }

  /* the pitch keeps its true proportions and all the room it needs */
  .pitch-wrap { flex: none; aspect-ratio: 105 / 68; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); }

  /* commentary: in-flow line under the pitch */
  .sb-comm {
    position: static; transform: none; width: 100%; min-height: 34px;
    font-size: 14px; text-shadow: none; padding: 0 4px;
    display: flex; align-items: center; justify-content: center;
  }

  /* side panels: full-width stack, no horizontal scroller */
  #live-side {
    flex-direction: column; overflow: visible; max-height: none; gap: 10px;
  }
  #live-side > * { min-width: 0; }

  /* other views */
  .view { padding: 14px 12px 32px; }
  .sec-title { font-size: 19px; }
  .v-tables-grid, .v-two-col, .v-res-grid, .v-rh-scorers, .v-xi-grid { grid-template-columns: 1fr !important; }
  .tbl { font-size: 12px; }
  .tbl th, .tbl td { padding: 5px 4px; }

  /* drawer + overlays take the full screen */
  #drawer { width: 100vw; }
  #drawer-content { padding: 16px 14px 40px; }
  #overlay { left: 0; padding: 0 8px; }   /* --nav-w is 100% here; the nav is a top strip now */
  #overlay-content { width: 100%; max-height: 74vh; }

  #ticker-track { font-size: 11px; gap: 28px; padding-left: 62px; }
  #ticker::before { padding: 0 9px; font-size: 9px; }
}

/* Phones can't fit brand + both chips + 7 controls on one row. The matchday is
   already named on the score bar, so the chip is the redundant thing to drop. */
@media (max-width: 480px) {
  #phase-chip { display: none; }
  .wordmark { font-size: 14px; }
  #topbar { padding: 0 6px; }
  .ctl-btn { padding: 5px 6px; min-width: 28px; }
  /* 2× steps aside here rather than at 340px. It is the redundant speed — 1× and 4×
     flank it — and dropping it returns ~27px to the row, which is what pays for every
     remaining control clearing the 24px floor on width at 360px WITH a club followed.
     That state had 13px of slack, so the width had to come from somewhere. */
  .speed-btn[data-speed="2"] { display: none; }
  /* Following a club adds the club pill to the middle of the bar; at ~393-429px that
     pushed the skip/universe controls off the right edge (user-reported). The season
     chip is the redundant thing to drop here — it is on every other view — so the
     controls stay on-screen and tappable. */
  body.following #season-chip { display: none; }
}

/* The smallest phones (~360px Android) can't fit brand + season chip + controls on one
   row even with NO club followed — the base bar overflowed ~15px, and following pushed
   it further. Drop the season chip outright here (it lives on every other view) and
   tighten the control gaps so the whole bar, followed or not, stays on-screen. */
@media (max-width: 400px) {
  #season-chip { display: none; }
  #topbar { gap: 6px; }
  .controls { gap: 3px; }
  .topbar-mid { gap: 4px; }
}

/* Tiny/legacy phones. 360px keeps every control; the club pill just truncates a touch
   sooner. 2× already stepped aside at 480px, so the row here is pause + 1× + 4× + 8× +
   skip + universe, six controls. */
@media (max-width: 360px) {
  .myclub-open { max-width: 96px; }
}
/* ≤340px is iPhone SE 1st gen / iPhone 5 — a 2016 screen, and the one width where the
   budget genuinely runs out. Measured with a club followed: 23px of slack across six
   controls, which buys 24px of width each and not a pixel more. So this is the floor
   exactly, not with margin, and the wordmark gives up a point and a half of size to
   keep it from being the thing that overflows. Anything further needs the controls off
   this row altogether, which is a layout decision and not a padding one. */
@media (max-width: 340px) {
  .myclub-open { max-width: 84px; }
  .wordmark { font-size: 12.5px; }
  .ctl-btn { padding: 5px 4px; min-width: 24px; }
}