/* GM Sports — the approved editorial football language across the site.
   Loaded after legacy sheets so pages with and without .gm-view share
   the same controls and surfaces. */
.stadium-app {
  --gm-page-ink: var(--text);
  --gm-page-muted: var(--muted);
  --gm-page-accent: var(--color-accent);
  --gm-page-line: var(--surface-border-soft);
  --gm-page-surface: #102b29;
  --gm-page-surface-raised: #153631;
  --gm-page-deep: #0a2327;
  --gm-gold: var(--pos-gk);
  --gm-ink: var(--text);
  --gm-muted: var(--muted);
  --gm-hairline: var(--surface-border-soft);
  --row: #102d2c;
  --row-2: #153330;
  --row-hl: #26483b;
  --panel: #102b29;
  --panel-2: #193b35;
  --line: var(--surface-border-solid);
  --muted: #bbd0c6;
}

.stadium-app > .board {
  background:
    radial-gradient(ellipse at 100% 0%, rgba(61, 115, 88, .09), transparent 44%),
    linear-gradient(165deg, #0e2b31, #071e26 70%);
}
.stadium-app .board > .main { color: var(--gm-page-ink); min-width: 0; }
.stadium-app .board > .main :is(.gm-view, .grid, .tabs, .chips, .topbar, .table-wrap) { min-width: 0; }
.stadium-app .board > .main .gm-view { --gm-gold: var(--gm-page-accent); background: transparent; }
.stadium-app .board > .main :is(.muted, .gm-hero-note, .small, small) { color: var(--gm-page-muted); }
.stadium-app .board > .main :is(.good, .badge.good) { color: var(--color-pos); }
.stadium-app .board > .main :is(.bad, .badge.bad) { color: var(--color-neg); }
.stadium-app .board > .main :is(.warn, .badge.warn) { color: var(--color-warn); }
.stadium-app .board > .main a:not(.btn):not(.tab):not(.stadium-page-link) { text-underline-offset: 3px; }
.stadium-app .board > .main :is(p, li, td) a:not(.btn):not(.tab):not(.badge):not(.placar-box) { text-decoration-color: rgba(189, 231, 181, .65); }
.stadium-app .board > .main :is(p, li, td) a:not(.btn):not(.tab):not(.badge):not(.placar-box):is(:hover, :focus-visible) { color: var(--color-accent-light); text-decoration-color: currentColor; }

/* Section actions are recognizable controls throughout the manager, not faint text in a corner. */
.stadium-app .board > .main .card > .topbar > a:not(.btn):not(.tab),
.stadium-app .board > .main .gm-data-panel > .topbar > a:not(.btn):not(.tab) {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  min-height: 38px; padding: 7px 12px; border: 1px solid #517966; border-radius: 7px;
  color: #e3f4dc; background: #24463a; font-size: .82rem; font-weight: 750;
  line-height: 1.25; text-decoration: none;
}
.stadium-app .board > .main .card > .topbar > a:not(.btn):not(.tab):is(:hover, :focus-visible),
.stadium-app .board > .main .gm-data-panel > .topbar > a:not(.btn):not(.tab):is(:hover, :focus-visible) {
  border-color: var(--color-accent); color: var(--color-accent-ink); background: var(--color-accent); text-decoration: none;
}
.stadium-app .board > .main :is(.btn, .tabs button, .tabs a.tab) {
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

/* Direct page headings and titles nested in a first-child wrapper are both
   found in real views. Keep the dashboard's slim heading exactly as approved. */
.stadium-app .board > .main:not(.dashboard) > h1:first-child,
.stadium-app .board > .main:not(.dashboard) > .gm-view > h1:first-child,
.stadium-app .board > .main:not(.dashboard) > .gm-view > .topbar:first-child {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 20px;
  width: 100%;
  min-height: 0;
  margin: 0 0 clamp(16px, 2vw, 25px);
  padding: 3px 2px 14px;
  border: 0;
  border-bottom: 1px solid var(--gm-page-line);
  border-radius: 0;
  color: var(--gm-page-ink);
  background: none;
  box-shadow: none;
  font-size: clamp(1.45rem, 1.15rem + 1.15vw, 2rem);
  font-weight: 760;
  line-height: 1.22;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.stadium-app .board > .main:not(.dashboard) > :is(div, section):first-child:not(.gm-view, .card, .start-guide, .gm-hero):has(> h1) > h1 {
  margin: 0 0 18px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--gm-page-line);
  color: var(--gm-page-ink);
  font-size: clamp(1.45rem, 1.15rem + 1.15vw, 2rem);
  font-weight: 760;
  letter-spacing: -.035em;
}
.stadium-app .board > .main:not(.dashboard) > .card:first-child > h1:first-child,
.stadium-app .board > .main:not(.dashboard) > .card:first-child > .topbar:first-child h1 {
  font-size: clamp(1.45rem, 1.15rem + 1.15vw, 2rem);
  font-weight: 780;
  letter-spacing: -.035em;
}
.stadium-app .board > .main:not(.dashboard) :is(.card, .gm-data-panel) > h2,
.stadium-app .board > .main:not(.dashboard) .card > .topbar h2 {
  color: var(--text);
  font-size: clamp(1.06rem, 1rem + .42vw, 1.38rem);
  font-weight: 750;
  letter-spacing: -.025em;
  line-height: 1.3;
}
.stadium-app .board > .main:not(.dashboard) :is(.card, .gm-data-panel) > h3 {
  color: #c5dcbf;
  font-size: .86rem;
  font-weight: 760;
  letter-spacing: .045em;
}

/* A single illustrated hero carries the atmosphere. Data cards stay quiet. */
.stadium-app .board .main:not(.dashboard) .gm-hero {
  border: 1px solid rgba(130, 177, 141, .5);
  border-radius: var(--radius-md);
  background:
    linear-gradient(92deg, rgba(6, 30, 32, .98) 4%, rgba(7, 35, 35, .89) 48%, rgba(8, 37, 39, .43) 100%),
    url('/assets/torcida-guache-sm.webp') center 44% / cover;
  box-shadow: inset 3px 0 var(--gm-page-accent);
}
.stadium-app .board .main:not(.dashboard) .gm-hero :is(h1, h2) {
  color: var(--text);
  letter-spacing: -.04em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .5);
}
.stadium-app .board .main:not(.dashboard) .gm-hero .gm-eyebrow,
.stadium-app .board .main:not(.dashboard) .gm-section-index { color: var(--color-accent-light); }
.stadium-app .board .main:not(.dashboard) :is(.card, .gm-data-panel, .gm-filter-panel):not(.stadium-hero-card, .scoreboard, .crest-editor, .crest-landing) {
  border: 1px solid var(--gm-page-line);
  border-radius: var(--radius-md);
  background: var(--gm-page-surface);
  box-shadow: none;
}
.stadium-app .board .main:not(.dashboard) :is(.card, .gm-data-panel, .gm-filter-panel):not(.stadium-hero-card, .scoreboard, .crest-editor, .crest-landing):hover {
  border-color: rgba(130, 178, 154, .37);
}
.stadium-app .board .main:not(.dashboard) :is(.stat-card, .gm-metric:not(.squad-wage), .summary-card) {
  border-color: rgba(144, 184, 151, .3);
  background: var(--gm-page-surface-raised);
  box-shadow: inset 3px 0 rgba(184, 243, 75, .55);
}
.stadium-app .board .main:not(.dashboard) :is(.stat, .gm-metric-value) {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
}
.stadium-app .board .main:not(.dashboard) :is(.gm-filter-panel, .gm-tab-rail) {
  border-color: var(--gm-page-line);
  background: #122f2d;
  box-shadow: none;
}
.stadium-app .board .main:not(.dashboard) :is(.badge, .chip, .gm-count-pill) {
  border: 1px solid rgba(138, 176, 151, .35);
  border-radius: var(--radius-sm);
  color: var(--text);
  background: #1b3d36;
  box-shadow: none;
}
.stadium-app .board .main:not(.dashboard) .badge.good { border-color: #4c816a; color: var(--color-pos); background: #193e32; }
.stadium-app .board .main:not(.dashboard) .badge.bad { border-color: #986574; color: var(--color-neg); background: #493039; }
.stadium-app .board .main:not(.dashboard) .badge.warn { border-color: #9a8053; color: var(--color-warn); background: #443b2b; }

/* Tables and tabs stay legible across squad, league, transfers and finances. */
.stadium-app .board .main:not(.dashboard) :is(.table-wrap, .gm-view .table-wrap) {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  border: 1px solid var(--gm-page-line);
  border-radius: var(--radius-md);
  background: var(--gm-page-deep);
  scrollbar-color: #577c6d #0b282b;
}
.stadium-app .board .main:not(.dashboard) table { color: var(--gm-page-ink); }
.stadium-app .board .main:not(.dashboard) th {
  border-bottom: 1px solid rgba(145, 182, 159, .35);
  background: #1b3936;
  color: #cdddcf;
  font-size: .74rem;
  font-weight: 770;
  letter-spacing: .065em;
  text-transform: uppercase;
}
.stadium-app .board .main:not(.dashboard) td { border-bottom-color: rgba(129, 168, 153, .18); }
.stadium-app .board .main:not(.dashboard) tbody tr:nth-child(odd) td { background: #102c2b; }
.stadium-app .board .main:not(.dashboard) tbody tr:nth-child(even) td { background: #153331; }
.stadium-app .board .main:not(.dashboard) tbody tr:is(:hover, :focus-within) td { background: #23453d; }
.stadium-app .board .main:not(.dashboard) tbody tr.me td { background: #25463b; }
.stadium-app .board .main:not(.dashboard) tbody tr.me td:first-child { box-shadow: inset 3px 0 var(--gm-page-accent); }
.stadium-app .board .main:not(.dashboard) .tabs {
  max-width: 100%;
  gap: 7px;
  scrollbar-width: thin;
}
.stadium-app .board .main:not(.dashboard) .tabs :is(button, a.tab) {
  min-height: 42px;
  border: 1px solid #365d51;
  border-radius: var(--radius-sm);
  color: #c6d8cc;
  background: #15342f;
  box-shadow: none;
  text-shadow: none;
}
.stadium-app .board .main:not(.dashboard) .tabs :is(button, a.tab).active,
.stadium-app .board .main:not(.dashboard) .tabs [aria-selected="true"] {
  border-color: #729d60;
  color: #dcffa1;
  background: #284a37;
  box-shadow: inset 0 -2px var(--color-accent);
}
.stadium-app .board .main:not(.dashboard) .tabs :is(button, a.tab):is(:hover, :focus-visible) {
  border-color: #9cc573;
  color: #f3ffe0;
}

/* Inputs, secondary actions and alerts use the same stadium palette.
   Keep destructive controls visibly red, and never restyle disabled states. */
.stadium-app .board .main :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  min-width: 0;
  border: 1px solid #476e62;
  border-radius: var(--radius-sm);
  color: var(--text);
  background: #09262a;
  accent-color: var(--gm-page-accent);
}
.stadium-app .board .main :is(input, textarea)::placeholder { color: var(--muted); }
.stadium-app .board .main :is(label.field, .invite-field) { color: #c5dacf; }
.stadium-app .board .main :is(input, select, textarea):focus-visible {
  border-color: var(--color-accent);
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.stadium-app .board .main :is(.btn, button.primary):not(.danger) {
  border-color: #557e69;
  border-radius: var(--radius-sm);
  color: var(--text);
  background: #23473d;
  background-image: none;
  box-shadow: none;
  text-shadow: none;
}
.stadium-app .board .main :is(.btn.primary, button.primary):not(.danger) {
  border-color: #c8f87f;
  color: var(--color-accent-ink);
  background: var(--color-accent);
  font-weight: 800;
}
.stadium-app .board .main :is(.btn, button.primary):not(.danger):is(:hover, :focus-visible):not(:disabled) {
  border-color: #b9e48d;
  background: #315847;
  color: #f1ffe7;
}
.stadium-app .board .main :is(.btn.primary, button.primary):not(.danger):is(:hover, :focus-visible):not(:disabled) {
  border-color: #d9ffa3;
  background: #d1ff7d;
  color: var(--color-accent-ink);
}
.stadium-app .board .main .btn.danger { border-color: #c66e7a; background: #813a4a; color: #fff0f0; }
.stadium-app .board .main :is(.btn, button):disabled { opacity: .53; cursor: not-allowed; }
.stadium-app .board .main :is(a, button, summary, [role="tab"]):focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* Match centres, finances and messages keep their existing layouts. */
.stadium-app .board .main:not(.dashboard) :is(.empty, .loading) { color: #b8d0c2; }
.stadium-app .board .main:not(.dashboard) :is(.result-row, .offer, .manual-card, .changelog-card) {
  border-color: var(--gm-page-line);
}
.stadium-app .board .main:not(.dashboard) :is(.gm-section-index, .gm-eyebrow) {
  letter-spacing: .11em;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
}
.stadium-app .board .main:not(.dashboard) :is(.danger-zone, .error) { border-color: rgba(188, 105, 117, .5); }
.stadium-app .board .main:not(.dashboard) .danger-zone { background: #36272c; }

/* The public manual, privacy notice and changelog render outside the signed-in
   shell. Give them the same palette without changing the immersive login. */
body:has(#app > :is(.manual-page.public, .changelog-container, .card)) {
  background:
    linear-gradient(115deg, rgba(4, 24, 31, .94), rgba(6, 30, 33, .91)),
    url('/assets/torcida-guache-sm.webp') center top / cover fixed;
}
#app > :is(.manual-page.public, .changelog-container, .card) {
  --panel: #102b29;
  --panel-2: #153631;
  --muted: #bbd0c6;
  --accent: var(--color-accent);
  --accent-light: var(--color-accent-light);
  --line: var(--surface-border-solid);
  color: var(--text);
}
#app > .manual-page.public,
#app > .changelog-container { padding: clamp(16px, 3vw, 38px) var(--space-4) var(--space-8); }
#app > :is(.manual-page.public, .changelog-container, .card) .card,
#app > .card {
  border: 1px solid var(--surface-border-soft);
  border-radius: var(--radius-md);
  background: #102b29;
  box-shadow: none;
}
#app > :is(.manual-page.public, .changelog-container, .card) h1 {
  color: var(--text);
  font-size: clamp(1.45rem, 1.15rem + 1.15vw, 2rem);
  font-weight: 760;
  letter-spacing: -.035em;
}
#app > :is(.manual-page.public, .changelog-container, .card) a { color: var(--color-accent); }
#app > :is(.manual-page.public, .changelog-container, .card) .manual-index {
  border-color: var(--surface-border-soft);
  background: #153631;
}
#app > :is(.manual-page.public, .changelog-container, .card) .btn {
  border-color: #557e69;
  color: var(--text);
  background: #23473d;
  background-image: none;
  box-shadow: none;
}
#app > :is(.manual-page.public, .changelog-container, .card) .btn.primary {
  border-color: #c8f87f;
  color: var(--color-accent-ink);
  background: var(--color-accent);
}
#app > :is(.manual-page.public, .changelog-container, .card) :is(a, button, summary):focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* Overlay elements are attached to document.body in some routes. */
body:has(.stadium-app) :is(.modal, .drawer) {
  border-color: #527869;
  color: var(--text);
  background: linear-gradient(150deg, #173730, #0b232a);
}
body:has(.stadium-app) .toast {
  border-color: #638d75;
  color: var(--text);
  background: #173b34;
}

@media (max-width: 760px) {
  .stadium-app .board > .main:not(.dashboard) > h1:first-child,
  .stadium-app .board > .main:not(.dashboard) > .gm-view > h1:first-child,
  .stadium-app .board > .main:not(.dashboard) > .gm-view > .topbar:first-child {
    padding-bottom: 12px;
    margin-bottom: 15px;
    font-size: clamp(1.35rem, 5vw, 1.75rem);
  }
  .stadium-app .board .main:not(.dashboard) :is(.card, .gm-data-panel, .gm-filter-panel) { min-width: 0; }
  .stadium-app .board .main:not(.dashboard) .tabs { overflow-x: auto; }
  .stadium-app .board .main:not(.dashboard) .tabs :is(button, a.tab) { min-height: 44px; }
  .stadium-app .board .main:not(.dashboard) .gm-hero { background-position: center, 64% center; }
}

@media (prefers-reduced-motion: reduce) {
  .stadium-app .board .main :is(.btn, .tabs button, .tabs a.tab) { transition: none; }
}

/* Persistent GM Sports Radio Bar - Compact Corner Pill */
.gm-radio-bar {
  position: fixed;
  bottom: 16px;
  right: 16px;
  left: auto;
  height: 42px;
  z-index: 99;
  background: rgba(11, 35, 44, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-full, 9999px);
  display: flex;
  align-items: center;
  padding: 0 6px;
  box-shadow: var(--shadow-md);
  user-select: none;
  max-width: calc(100vw - 32px);
  transition: all 250ms ease;
}
.gm-radio-content {
  display: flex;
  align-items: center;
  width: auto;
  margin: 0;
  gap: var(--space-1, 4px);
}
.gm-radio-info {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  pointer-events: none;
  transition: max-width 250ms ease, opacity 200ms ease, margin 250ms ease;
  margin: 0;
}
.gm-radio-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  flex-shrink: 0;
}
.gm-radio-live-indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #64748b;
  transition: background-color 200ms ease, box-shadow 200ms ease;
}
.gm-radio-live-indicator.playing {
  background: var(--color-accent);
  box-shadow: 0 0 6px var(--color-accent);
}
.gm-radio-track-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}
.gm-radio-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.gm-radio-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: all 150ms ease;
}
.gm-radio-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-accent);
}
.gm-radio-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.gm-radio-btn.gm-radio-btn-play {
  width: 36px;
  height: 36px;
  background: var(--color-accent);
  color: var(--surface-bg);
}
.gm-radio-btn.gm-radio-btn-play:hover {
  background: var(--color-accent-light);
  color: var(--surface-bg);
  transform: scale(1.05);
}
.gm-radio-btn-prev {
  display: none;
}
.gm-radio-volume-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}
.gm-radio-volume-slider {
  width: 70px;
  max-width: 0;
  opacity: 0;
  /* The page's generic input rule (styles.css) gives a 44 px height, padding and a border: a range must reset all
     of them or it shows as a white box with a floating green dot instead of a track. */
  min-height: 0;
  height: 4px;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  background: linear-gradient(to right, var(--color-accent) 0 var(--vol, 50%), rgba(255, 255, 255, 0.22) var(--vol, 50%) 100%);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
  pointer-events: none;
  transition: max-width 250ms ease, opacity 200ms ease;
}
.gm-radio-volume-slider:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}
.gm-radio-volume-slider::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-accent);
  cursor: pointer;
}
.gm-radio-volume-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-accent);
  cursor: pointer;
  border: none;
}
.gm-radio-btn:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}
/* Expand on hover, focus-within, or when .expanded class is present */
.gm-radio-bar:hover .gm-radio-info,
.gm-radio-bar:focus-within .gm-radio-info,
.gm-radio-bar.expanded .gm-radio-info {
  max-width: 200px;
  opacity: 1;
  pointer-events: auto;
  margin-right: 6px;
}
.gm-radio-bar:hover .gm-radio-btn-prev,
.gm-radio-bar:focus-within .gm-radio-btn-prev,
.gm-radio-bar.expanded .gm-radio-btn-prev {
  display: inline-flex;
}
.gm-radio-bar:hover .gm-radio-volume-slider,
.gm-radio-bar:focus-within .gm-radio-volume-slider,
.gm-radio-bar.expanded .gm-radio-volume-slider {
  max-width: 70px;
  opacity: 1;
  pointer-events: auto;
}

/* The radio pill floats over the bottom-right corner, so the PAGE (the whole app column, footer included) keeps a strip as tall as the pill + its offset + a gap below its
   last element: at the end of any page nothing is under the pill. The class-free selector exists only while the player is mounted (#gm-radio-bar), so no ghost space without it. */
body:has(#gm-radio-bar) .stadium-app {
  padding-bottom: calc(16px + 42px + 12px);
}

/* Tabs layout (<= 1023 px): the radio is ONE round icon above the bottom tabs (where the old "Sound" button was). Tapping it opens a popup with the track, previous / play / next, mute
   and the volume slider; tapping outside closes it. The old "Sound" panel is hidden: this replaces it. */
.gm-radio-toggle { display: none; }
@media (max-width: 1023px) {
  .gm-radio-bar {
    left: auto;
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(78px + env(safe-area-inset-bottom));
    z-index: 68;
    width: 46px;
    height: 46px;
    max-width: none;
    padding: 0;
    border-radius: 50%;
    background: rgba(11, 35, 44, 0.97);
    border-color: #4b7a6a;
    justify-content: center;
    overflow: visible;
  }
  .gm-radio-toggle {
    position: relative;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-accent);
    cursor: pointer;
  }
  .gm-radio-toggle svg { width: 22px; height: 22px; }
  .gm-radio-toggle .gm-radio-live-indicator { position: absolute; top: 9px; right: 9px; }
  .gm-radio-bar.expanded .gm-radio-toggle { background: #234239; }
  .gm-radio-content {
    display: none;
    position: absolute;
    right: 0;
    bottom: 54px;
    width: min(312px, calc(100vw - 24px));
    padding: 14px;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    background: #172a39;
    border: 1px solid #466171;
    border-radius: 16px;
    box-shadow: 0 16px 35px #0009;
  }
  .gm-radio-bar.expanded .gm-radio-content { display: flex; }
  .gm-radio-info, .gm-radio-bar:hover .gm-radio-info { max-width: none; opacity: 1; pointer-events: auto; margin: 0; gap: 8px; }
  .gm-radio-track-title { flex: 1 1 auto; min-width: 0; max-width: none; font-size: .9rem; }
  .gm-radio-controls { justify-content: center; gap: 10px; }
  .gm-radio-btn { width: 44px; height: 44px; }
  .gm-radio-btn.gm-radio-btn-play { width: 52px; height: 52px; }
  .gm-radio-btn-prev { display: inline-flex; order: -1; }
  .gm-radio-volume-wrap { gap: 8px; }
  .gm-radio-volume-slider, .gm-radio-bar:hover .gm-radio-volume-slider { flex: 1 1 auto; width: auto; max-width: none; opacity: 1; pointer-events: auto; height: 6px; }
  .gm-radio-volume-slider::-webkit-slider-thumb { width: 20px; height: 20px; }
  .gm-radio-volume-slider::-moz-range-thumb { width: 20px; height: 20px; }
  body:has(#gm-radio-bar) .stadium-app { padding-bottom: calc(94px + env(safe-area-inset-bottom)); }
  .gm-audio-control { display: none !important; }
}
/* --- Non-destructive Network Error Banner --- */
.network-banner {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3, 12px);
  padding: 10px 16px;
  margin-bottom: 12px;
  background: var(--surface-card, #102b35);
  border: 1px solid var(--color-warn);
  border-left: 4px solid var(--color-warn);
  border-radius: 8px;
  color: var(--text, #e2f0e8);
  font-size: var(--text-sm, 0.8125rem);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  z-index: 1000;
  animation: bannerSlideDown 0.2s ease-out;
}
@keyframes bannerSlideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.network-banner .network-banner-content {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.network-banner .network-banner-icon {
  font-size: 1.15rem;
  color: var(--color-warn);
  flex-shrink: 0;
}
.network-banner .network-banner-text {
  font-weight: 600;
  color: #f7faf8;
  word-break: break-word;
}
.network-banner .network-banner-retry {
  flex-shrink: 0;
  margin-left: auto;
}

/* --- Status Badges (Injury & Card / Ban) with Count --- */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  vertical-align: middle;
}
.status-badge .status-badge-icon {
  font-size: 0.75rem;
  line-height: 1;
}
.status-badge .status-count {
  font-family: var(--font-num, tabular-nums);
  font-size: 0.72rem;
  line-height: 1;
}
.status-badge.injury {
  background: rgba(255, 142, 155, 0.16);
  border: 1px solid var(--color-neg, #ff8e9b);
  color: var(--color-neg, #ff8e9b);
}
.status-badge.banned {
  background: rgba(255, 202, 112, 0.16);
  border: 1px solid var(--color-warn);
  color: var(--color-warn);
}

/* --- UI Standards: Selects & Touch Targets --- */
#cup-region,
.league-pickers select {
  min-height: 44px;
}

.report-btn {
  min-height: 28px;
  min-width: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (pointer: coarse) {
  .report-btn {
    min-height: 44px;
    min-width: 44px;
  }
}