/* App shell and game-specific surfaces. Consumes tokens and components. */

/* ---------- Shell ---------- */
.app { min-height: 100vh; }
/* Brand mark: used by the style guide header */
.brand { display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-2); text-decoration: none; color: var(--text-primary); }
.brand__logo { display: block; height: 40px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.22)); }   /* the Buvette FC logo (Icons.brand): crest and ribbon in one piece */
.brand__logo .brand-logo { display: block; height: 100%; width: auto; }

/* Floating tab bar: fixed at the bottom on every screen size, like a native app */
/* The tab bar, like Uber's: a compact capsule floating above the bottom, centred and only as wide as
   its tabs (each a fixed width, never stretched); the open tab is simply darker and bolder. */
.tabbar { position: fixed; left: 0; right: 0; bottom: calc(var(--space-3) + env(safe-area-inset-bottom)); z-index: var(--z-drawer); display: flex; justify-content: center; pointer-events: none; }   /* a full-width rail that ignores taps: the capsule sits in its middle */
.tabbar__bar { position: relative; display: flex; gap: 2px; padding: var(--space-1); pointer-events: auto; background: var(--bg-tabbar); backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px); border: 1px solid var(--border-default); border-radius: var(--radius-full); box-shadow: var(--shadow-lg); }
.tabbar__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 66px; height: var(--tabbar-item); padding: 0; border: 0; border-radius: var(--radius-full); background: transparent; color: var(--text-secondary); font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: var(--weight-medium); white-space: nowrap; transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
.tabbar__item .icon { width: 20px; height: 20px; }
.tabbar__item:hover { color: var(--text-primary); }
.tabbar__item[aria-current="page"] { background: var(--tabbar-active-bg); color: var(--text-primary); font-weight: var(--weight-bold); }   /* the open tab in its own pill */
.tabbar__item[aria-current="page"] .icon { stroke-width: 2.2; }
.tabbar__item:disabled { opacity: 0.4; pointer-events: none; }
.tabbar--static { position: static; transform: none; display: inline-block; max-width: 100%; overflow-x: auto; }   /* style guide example */

.season-card { padding: var(--space-4); border-radius: var(--radius-lg); background: var(--bg-subtle); display: flex; flex-direction: column; gap: var(--space-2); }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: var(--z-sticky); height: var(--topbar-height); display: flex; align-items: center; gap: var(--space-6); padding: 0 var(--page-pad); background: var(--bg-topbar); backdrop-filter: var(--topbar-blur); -webkit-backdrop-filter: var(--topbar-blur); border-bottom: 1px solid transparent; transition: border-color var(--dur-base) var(--ease-out); }
/* no line at the top of the page; a faint one once content scrolls under the bar (under the page tabs when there are some) */
body.is-scrolled .topbar { border-bottom-color: var(--border-subtle); }
body.is-scrolled:has(.content > .tabs--page) .topbar { border-bottom-color: transparent; }
/* Back chevron on detail pages (match report, club), at the start of the fixed top bar like a native app */
.topbar__back { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; margin-left: calc(-1 * var(--space-3)); margin-right: calc(-1 * var(--space-3)); border: 0; border-radius: var(--radius-full); background: transparent; color: var(--text-primary); transition: background-color var(--dur-fast) var(--ease-out); }
.topbar__back:hover { background: var(--bg-hover); }
.topbar__back .icon { width: 28px; height: 28px; stroke-width: 2; }

.content { --content-top: var(--space-6); width: 100%; max-width: var(--content-max); margin: 0 auto; padding: var(--content-top) var(--page-pad) calc(var(--tabbar-height) + var(--space-12)); display: flex; flex-direction: column; gap: var(--section-gap); }
.group { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }   /* related blocks that belong together inside a page */
.content > .legend { margin-top: calc(var(--space-3) - var(--section-gap)); }
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.page-header__desc { color: var(--text-secondary); margin-top: var(--space-1); }

/* Staggered entrance for top-level blocks of a view */
.content > * { animation: rise-in var(--dur-slow) var(--ease-out) both; }
.content > *:nth-child(2) { animation-delay: 50ms; }
.content > *:nth-child(3) { animation-delay: 100ms; }
.content > *:nth-child(4) { animation-delay: 150ms; }
.content.no-anim > * { animation: none; }

@media (max-width: 1023px) {
  .topbar { gap: var(--space-3); }
}
@media (max-width: 639px) {
  .topbar__play-label { display: none; }
  .topbar .topbar__play-short { display: inline; }   /* a phone: just "Play" (the week is on the left) */
  .content { --content-top: var(--space-3); }
  .topbar { padding: 0 var(--space-4); }   /* the title bar keeps its native inset */
  .content > p, .content > .page-header, .content > h2, .content > h3, .content > .league-head, .group > .league-head { padding-inline: var(--space-2); }   /* loose text lines up with the text inside the cards */
  .page-header h1 { font-size: var(--text-lg); line-height: var(--leading-lg); }
}

/* ---------- Scoreboard (match) ---------- */
.scoreboard__score { font-family: var(--font-display); font-size: var(--text-3xl); line-height: var(--leading-3xl); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; display: flex; gap: var(--space-3); }
.scoreboard__score .sep { color: var(--text-tertiary); }
.scoreboard__score .bump { animation: score-pop 600ms var(--ease-out); }
@keyframes score-pop { 0% { transform: scale(1); } 30% { transform: scale(1.22); color: var(--accent-text); } 100% { transform: scale(1); } }
.scoreboard__clock { width: 100%; max-width: 360px; margin: var(--space-5) auto 0; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse 1.2s var(--ease-in-out) infinite; }
@media (max-width: 639px) {
  .scoreboard__score { font-size: 40px; line-height: 40px; }
}

/* ---------- Match timeline ---------- */
.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; max-height: 640px; overflow-y: auto; scroll-behavior: smooth; }
.timeline__item { display: grid; grid-template-columns: 40px 28px 1fr; gap: var(--space-3); align-items: start; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); font-size: var(--text-sm); line-height: var(--leading-sm); animation: rise-in var(--dur-base) var(--ease-out); }
.timeline__min { text-align: right; color: var(--text-tertiary); font-variant-numeric: tabular-nums; font-weight: var(--weight-semibold); padding-top: 4px; }
.timeline__icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bg-subtle); color: var(--text-tertiary); }
.timeline__icon .icon { width: 16px; height: 16px; }
.timeline__text { padding-top: 4px; }
.timeline__item.is-new { animation: timeline-in var(--dur-slow) var(--ease-out) both; }   /* live: each new line drops in on top */
@keyframes timeline-in { from { opacity: 0; transform: translateY(calc(-1 * var(--space-2))); } }
.timeline__item--goal { background: var(--success-bg); }
.timeline__item--goal .timeline__icon { background: var(--success-solid); color: #fff; }
.timeline__item--goal .timeline__text { font-weight: var(--weight-semibold); }
.timeline__item--save .timeline__icon { color: var(--info-text); background: var(--info-bg); }
.timeline__item--yellow .timeline__icon { color: var(--warning-text); background: var(--warning-bg); }
.timeline__item--red { background: var(--danger-bg); }
.timeline__item--red .timeline__icon, .timeline__item--injury .timeline__icon { color: var(--danger-text); background: var(--danger-bg); }
.timeline__item--info { color: var(--text-secondary); }
.timeline__item--info .timeline__text { font-style: italic; }
.timeline__score { display: inline-flex; margin-left: var(--space-2); }
.timeline__divider { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-2) 0; color: var(--text-tertiary); }
.timeline__divider::before, .timeline__divider::after { content: ""; flex: 1; height: 1px; background: var(--border-default); }

/* ---------- Fixtures ---------- */
.fixture { display: grid; grid-template-columns: 1fr 64px 1fr; align-items: center; gap: var(--space-3); min-height: 40px; border-bottom: 1px solid var(--border-subtle); font-size: var(--text-sm); }
.fixture:last-child { border-bottom: 0; }
.fixture__home { justify-content: flex-end; }
.fixture__home .crest { order: 2; }
.fixture__score { justify-self: center; display: inline-grid; place-items: center; min-width: 52px; height: 24px; padding: 0 var(--space-2); border-radius: var(--radius-sm); background: var(--bg-subtle); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.fixture__score--pending { background: transparent; color: var(--text-tertiary); font-weight: var(--weight-medium); }
.fixture.is-me .team { color: var(--accent-text); font-weight: var(--weight-semibold); }
.fixture--link { width: calc(100% + var(--space-4)); margin: 0 calc(var(--space-2) * -1); padding: 0 var(--space-2); border: 0; border-bottom: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: none; color: inherit; font: inherit; text-align: inherit; cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out); }
.fixture--link:hover { background: var(--bg-hover); }
.fixture--link:hover .fixture__score { background: var(--accent-subtle); color: var(--accent-text); }
.fixture__go { width: 16px; height: 16px; margin-left: auto; color: var(--text-tertiary); }
.fixture--link:hover .fixture__go { color: var(--accent-text); }

/* ---------- Pitch ---------- */
.pitch { position: relative; width: 100%; max-width: 620px; margin: 0 auto; aspect-ratio: 68 / 88; border-radius: var(--radius-lg); overflow: hidden; background: var(--pitch-1); }   /* the stripes and lines: PITCH_MARKS */
.pitch__marks { position: absolute; inset: 0; width: 100%; height: 100%; stroke: var(--pitch-line); stroke-width: 1.25; fill: none; vector-effect: non-scaling-stroke; }
.pitch__marks * { vector-effect: non-scaling-stroke; }
.pitch__marks .pitch__dot { fill: var(--pitch-line); stroke: none; }
.pitch__marks .pitch__grass { stroke: none; }
.pitch__grass--a { fill: var(--pitch-1); }
.pitch__grass--b { fill: var(--pitch-2); }
/* A slot: the player's portrait in a ring, his fit for the role as a badge, his name underneath */
.slot { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: var(--space-1); width: 19%; max-width: 128px; padding: 0; border: 0; background: none; color: var(--pitch-ink); text-align: center; }
.slot__role { font-size: 10px; font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--pitch-ink-soft); }
.slot__token { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--pitch-spot); color: var(--pitch-ink); box-shadow: 0 0 0 2px var(--pitch-spot-ring); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.slot__token .face { width: 100%; height: 100%; box-shadow: none; }
.slot__token--gk { box-shadow: 0 0 0 2px var(--amber-300); }
.slot__fit { position: absolute; right: -6px; bottom: -4px; min-width: 22px; height: 18px; padding: 0 4px; border-radius: var(--radius-full); background: var(--fit-good); color: var(--fit-ink); box-shadow: 0 0 0 2px var(--pitch-bg); font-family: var(--font-display); font-size: 11px; font-weight: var(--weight-bold); line-height: 18px; font-variant-numeric: tabular-nums; }
.slot__name { max-width: 100%; padding: 1px var(--space-2); border-radius: var(--radius-full); background: var(--pitch-chip); font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: var(--weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot:hover .slot__token { transform: translateY(-2px); box-shadow: 0 0 0 2px var(--pitch-ink); }
.slot:focus-visible { box-shadow: none; }
.slot:focus-visible .slot__token { box-shadow: 0 0 0 3px var(--pitch-ink), 0 0 0 6px var(--g-500); }
.slot--empty .slot__token { box-shadow: none; }
.slot--empty .slot__token .icon { width: 20px; height: 20px; }
.slot--empty .slot__name { color: var(--pitch-ink-soft); font-weight: var(--weight-medium); }
.slot--weak .slot__fit { background: var(--fit-best); color: var(--fit-best-ink); }
@media (max-width: 639px) {
  .slot__token { width: 40px; height: 40px; }
  .slot__fit { right: -8px; bottom: -5px; min-width: 20px; height: 16px; font-size: 10px; line-height: 16px; }
  .slot__role { display: none; }
  .slot__name { font-size: 10px; }
}

/* ---------- Skill sheet (player modal) ---------- */
.skill-sheet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-6); }
.skill-sheet__row { display: grid; grid-template-columns: 1fr 44px; gap: var(--space-1) var(--space-2); align-items: center; font-size: var(--text-sm); }
.skill-sheet__row .meter { grid-column: 1 / -1; }
.skill-sheet__val { text-align: right; font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.skill-sheet__lvl { font-size: var(--text-xs); color: var(--text-tertiary); }
@media (max-width: 479px) { .skill-sheet { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Design-system page ---------- */
.ds-swatch { border-radius: var(--radius-md); border: 1px solid var(--border-subtle); overflow: hidden; font-size: var(--text-xs); }
.ds-swatch__chip { height: 56px; }
.ds-swatch__label { padding: var(--space-2); display: flex; flex-direction: column; }
.ds-swatches { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); }
.ds-type-row { display: grid; grid-template-columns: 120px 1fr; gap: var(--space-4); align-items: baseline; padding: var(--space-3) 0; border-bottom: 1px solid var(--border-subtle); }
.ds-space { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-xs); }
.ds-space i { display: block; height: 12px; background: var(--accent); border-radius: 2px; }

/* ---------- Small game helpers ---------- */
.xi-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.xi-dot--off { background: transparent; }
.player-cell { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-semibold); }
.mini-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--border-subtle); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; }
.mini-stat { background: var(--bg-raised); padding: var(--space-3); display: flex; flex-direction: column; gap: 2px; }
.mini-stat__value { font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-top: var(--space-3); font-size: var(--text-xs); color: var(--text-tertiary); }
.legend__item { display: inline-flex; align-items: center; gap: var(--space-1); }
.rank { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: var(--radius-sm); font-weight: var(--weight-semibold); color: var(--text-secondary); }
.rank--1 { background: var(--warning-bg); color: var(--warning-text); }
.round-nav { display: flex; align-items: center; gap: var(--space-2); }
.round-nav__label { min-width: 88px; text-align: center; font-weight: var(--weight-semibold); font-size: var(--text-sm); }

@media (max-width: 639px) {
  .pick { grid-template-columns: minmax(0, 1fr) 88px; gap: var(--space-3); }
  .timeline__item { grid-template-columns: 28px 28px 1fr; gap: var(--space-2); padding: var(--space-2); }
}

/* ---------- Stadium illustration ---------- */
.stadium-art { display: block; width: 100%; height: auto; border-radius: var(--radius-md); }
@keyframes flash { 0%, 96%, 100% { opacity: 0; } 97.5% { opacity: 1; } }
.stadium-art__ghost { fill-rule: evenodd; fill: var(--accent); fill-opacity: 0.22; stroke: var(--accent); stroke-width: 1.4; stroke-dasharray: 4 3; opacity: 0; transition: opacity var(--dur-base) var(--ease-out); }
.stadium-art[data-preview="0"] .stadium-art__ghost--0,
.stadium-art[data-preview="1"] .stadium-art__ghost--1,
.stadium-art[data-preview="2"] .stadium-art__ghost--2 { opacity: 1; }

/* ---------- Statement detail rows ---------- */
.statement th, .statement td { padding-left: var(--space-2); padding-right: var(--space-2); }
.statement th { white-space: normal; height: auto; padding-top: var(--space-2); padding-bottom: var(--space-2); line-height: var(--leading-xs); vertical-align: bottom; }

/* ---------- League zones ---------- */
/* Standings: zones get a header row (like a league app) instead of coloured edges; form as dots under the name */
.standings__zone td, .table__group td { position: static; padding: var(--space-4) var(--space-3) var(--space-1); border-bottom: 0; background: transparent; }
.zone-divider { display: flex; align-items: center; gap: var(--space-3); color: var(--text-tertiary); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; white-space: nowrap; }
.zone-divider::before, .zone-divider::after { content: ""; flex: 1; height: 1px; background: var(--border-default); }
.table__group .zone-divider::before { display: none; }   /* wide tables scroll sideways: keep the label at the left */
.standings tr.zone-start td { box-shadow: inset 0 1px 0 var(--border-strong); }
.standings tr.zone-start.is-me td:first-child { box-shadow: inset 3px 0 0 var(--accent), inset 0 1px 0 var(--border-strong); }   /* your row keeps its bar and the zone line */
@media (max-width: 639px) {   /* phones: played, goal difference and points, like a league app; long names shorten */
  .standings .col-wide { display: none; }
  .standings tbody tr:not(.standings__zone) td:first-child { width: 100%; max-width: 0; }
  .standings .team-link { display: block; max-width: 100%; }
}
.standings__club { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.standings__name { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

/* ---------- Transfers ---------- */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--card-pad) var(--card-pad) var(--space-4); }
.filters__select { width: 168px; }
.star { display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--radius-xs); background: none; color: var(--text-disabled); flex-shrink: 0; }
.star .icon { width: 16px; height: 16px; }
.star:hover { color: var(--warning-text); background: var(--bg-hover); }
.star.is-on { color: var(--warning-solid); }
.star.is-on .icon { fill: currentColor; }
.offer { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--border-subtle); }
.offer:first-child { padding-top: 0; }
.offer:last-child { border-bottom: 0; padding-bottom: 0; }
.offer__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.offer__amount { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; color: var(--success-text); }
.team-link, .link { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: var(--radius-xs); }
.team-link:hover .truncate, .link:hover { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.link { color: var(--accent-text); }
@media (max-width: 639px) { .offer { grid-template-columns: minmax(0, 1fr) auto; } .offer .cluster { grid-column: 1 / -1; justify-content: flex-end; } .filters__select { width: calc(50% - var(--space-2)); } }

/* ---------- Stadium facilities ---------- */
.facilities { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-3); }
.facility { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-surface); }
.facility.is-built { border-color: var(--accent-subtle-border); }
.pips { display: inline-flex; gap: 3px; }
.pips i { display: block; width: 14px; height: 4px; border-radius: 2px; background: var(--border-default); }
.pips i.on { background: var(--grad-accent); }

/* Facility illustrations: built parts in soft colour, the next level as a dashed blueprint */
.facility { overflow: hidden; }
.facility__art { display: block; width: 100%; height: auto; background: var(--bg-subtle); border-bottom: 1px solid var(--border-subtle); }
.facility.is-building { border-color: var(--warning-border); }
.pips i.next { background: var(--warning-solid); animation: pulse 2.4s var(--ease-in-out) infinite; }
/* Last matchday report */
.matchday { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-6); }
.matchday__takings { display: flex; flex-direction: column; gap: var(--space-2); }
.matchday__row { display: grid; grid-template-columns: 112px minmax(0, 1fr) 72px; gap: var(--space-3); align-items: center; }
.matchday__row > :last-child { text-align: right; }
.matchday__moment { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-2) 0; font-size: var(--text-sm); color: var(--text-secondary); border-bottom: 1px solid var(--border-subtle); }
.matchday__moment:first-child { padding-top: 0; }
.matchday__moment:last-child { border-bottom: 0; }
.matchday__moment .icon { flex-shrink: 0; margin-top: 2px; color: var(--accent-text); }
@media (max-width: 767px) { .matchday { grid-template-columns: minmax(0, 1fr); } }
.facility.is-built .facility__art { background: var(--accent-subtle); border-bottom-color: var(--accent-subtle-border); }

/* Development plans: position and focus pickers side by side */
.plan-selects { display: inline-flex; gap: var(--space-2); flex-wrap: wrap; }
.plan-selects .select-wrap { width: 156px; }
@media (max-width: 639px) { .member:has(.plan-selects) { grid-template-columns: minmax(0, 1fr); } }

/* Formation map on the player card */
.posmap { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.pitch--mini { max-width: 168px; margin: 0; border-radius: var(--radius-md); }
.posmap__spot { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 1px; }
.posmap__token { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; background: var(--fit-ok); color: var(--fit-ink); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); }
.posmap__role { font-size: 9px; font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); color: var(--fit-ink-weak); }
.posmap__spot--best .posmap__token { background: var(--fit-best); color: var(--fit-best-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fit-best) 35%, transparent), 0 1px 4px rgba(0, 0, 0, 0.3); }
.posmap__spot--good .posmap__token { background: var(--fit-good); }
.posmap__spot--weak .posmap__token { background: var(--fit-weak); color: var(--fit-ink-weak); box-shadow: none; }
.posmap__side { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.posmap__legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--text-xs); color: var(--text-tertiary); }
.posmap__legend span { display: inline-flex; align-items: center; gap: var(--space-1); }
.posmap__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--fit-ok); outline: 1px solid var(--border-default); }
.posmap__dot--best { background: var(--fit-best); }
.posmap__dot--good { background: var(--fit-good); }
.posmap__dot--weak { background: var(--fit-weak); }
@media (max-width: 479px) { .posmap { grid-template-columns: minmax(0, 1fr); } .pitch--mini { margin: 0 auto; width: 168px; } }
.matchday-sum { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-4); }
.matchday-sum__item { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); }

/* Academy scouts */
.scouts { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-3); }
.scout { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-surface); }
.scout.is-away { border-color: var(--info-border); }
.scout--hire { border-style: dashed; background: transparent; }
.scout__who { display: flex; align-items: flex-start; gap: var(--space-3); }
.scout__who .btn { margin-left: auto; }
.scout__info { flex: 1; min-width: 0; }
.scout__form { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.scout__form .select-wrap { flex: 1 1 140px; min-width: 0; }
.scout__mission { display: flex; flex-direction: column; gap: var(--space-2); }
.scout__mission .icon { vertical-align: -3px; color: var(--info-text); }
.scout-stars { display: inline-flex; gap: 2px; vertical-align: 1px; margin-left: 2px; }
.scout-stars i { width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); }
.scout-stars i.on { background: var(--warning-solid); }
.chat-avatar--empty { background: var(--bg-subtle); color: var(--text-tertiary); }
.scouts__note { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-4); }
/* League position on the League tab: a quiet number beside the icon, tinted only in a special zone */
.tabbar__icon { position: relative; display: inline-flex; }
.tabbar__badge { position: absolute; top: -3px; left: calc(100% + 2px); font-size: 10px; line-height: 1; font-weight: var(--weight-semibold); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--text-tertiary); white-space: nowrap; }
.tabbar__badge--title { color: var(--warning-text); }
.tabbar__badge--up { color: var(--success-text); }
.tabbar__badge--down { color: var(--danger-text); }
.tabbar__badge--europe, .tabbar__badge--shield { color: var(--info-text); }
/* the place after the final whistle: it rises into place (green) or drops into it (red), then settles */
.tabbar__badge.is-up { animation: badge-up 900ms var(--ease-out); }
.tabbar__badge.is-down { animation: badge-down 900ms var(--ease-out); }
@keyframes badge-up { 0% { opacity: 0; transform: translateY(8px); color: var(--success-text); } 35% { opacity: 1; transform: translateY(-2px) scale(1.25); color: var(--success-text); } 100% { transform: none; } }
@keyframes badge-down { 0% { opacity: 0; transform: translateY(-8px); color: var(--danger-text); } 35% { opacity: 1; transform: translateY(2px) scale(1.25); color: var(--danger-text); } 100% { transform: none; } }

/* ---------- Match report ---------- */
.match-hero { display: flex; flex-direction: column; gap: var(--space-5); }
.match-hero__meta { text-align: center; }
.match-hero { --score-col: 168px; }
.match-hero__board { display: grid; grid-template-columns: minmax(0, 1fr) var(--score-col) minmax(0, 1fr); align-items: center; gap: var(--space-6); }
.match-hero__team { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.match-hero__team--home { justify-content: flex-end; text-align: right; }
.match-hero__team--home .crest { order: 2; }
.match-hero__name { font-size: var(--text-lg); line-height: var(--leading-lg); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); }
.match-hero__who { display: grid; gap: 2px; min-width: 0; }
.match-hero__pos { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-tertiary); font-variant-numeric: tabular-nums; }   /* a league game: where each club stands, quietly */
.match-hero__center { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.match-hero__ft { font-size: var(--text-xs); color: var(--text-tertiary); font-weight: var(--weight-medium); white-space: nowrap; }
.match-hero__scorers { display: grid; grid-template-columns: minmax(0, 1fr) var(--score-col) minmax(0, 1fr); gap: var(--space-6); margin-top: calc(-1 * var(--space-2)); }
.match-hero__scorers > :last-child { grid-column: 3; }
.match-hero__events { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--text-sm); color: var(--text-secondary); }
.match-hero__events:first-child { align-items: flex-end; text-align: right; }
.match-hero__events li { display: inline-flex; align-items: center; gap: var(--space-2); }
.match-hero__events:first-child li { flex-direction: row-reverse; }
.match-hero__events .icon { color: var(--text-tertiary); flex-shrink: 0; }
.match-hero__events .is-red .icon { color: var(--danger-solid); }
.match-hero__foot { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-2) var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); }
.match-hero__chip { font-size: var(--text-sm); color: var(--text-secondary); text-align: center; }

/* key moments: home events on the left, away on the right, minutes in the middle */
.moments { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.moment { display: grid; grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr); align-items: center; }
.moment__min { grid-column: 2; grid-row: 1; justify-self: center; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.moment__body { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--bg-subtle); min-width: 0; }
.moment--home .moment__body { grid-column: 1; grid-row: 1; flex-direction: row-reverse; text-align: right; }
.moment--away .moment__body { grid-column: 3; grid-row: 1; }
.moment__icon { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--bg-surface); color: var(--text-tertiary); }
.moment--goal .moment__body { background: var(--success-bg); }
.moment--goal .moment__icon { color: var(--success-text); }
.moment--yellow .moment__icon { color: var(--warning-solid); }
.moment--red .moment__icon { color: var(--danger-solid); }
.moment--injury .moment__icon { color: var(--danger-text); }
.moment__who { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.moment__what { font-size: var(--text-xs); color: var(--text-secondary); }
.moments__divider { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-2) 0; color: var(--text-tertiary); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.moments__divider::before, .moments__divider::after { content: ""; flex: 1; height: 1px; background: var(--border-subtle); }

/* stats */
.match-legend { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-4); font-size: var(--text-xs); color: var(--text-secondary); }
.match-legend span { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; }
.match-legend__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--home); flex-shrink: 0; }
.match-legend__dot--away { background: var(--away); }
.match-subhead { margin: var(--space-6) 0 var(--space-3); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.match-subhead span { display: block; font-size: var(--text-xs); font-weight: var(--weight-regular); color: var(--text-tertiary); }

/* lineups */
.lineups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
.lineup__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); min-width: 0; }
.lineup__list { list-style: none; margin: 0; padding: 0; }
.lineup__row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); min-height: 36px; border-bottom: 1px solid var(--border-subtle); font-size: var(--text-sm); }
.lineup__row:last-child { border-bottom: 0; }
.lineup__row--sub { color: var(--text-secondary); }
.lineup__role { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--text-tertiary); letter-spacing: var(--tracking-caps); }
.lineup__name { text-align: left; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--weight-medium); color: var(--text-primary); }
.lineup__marks { display: inline-flex; align-items: center; gap: var(--space-2); }
.lineup__mark { display: inline-flex; align-items: center; gap: 2px; color: var(--text-secondary); font-size: var(--text-xs); }
.lineup__motm { display: inline-flex; color: var(--warning-text); }
.lineup__mark--inj { color: var(--danger-text); }
.lineup__card { display: inline-block; width: 9px; height: 12px; border-radius: 2px; }
.lineup__card--yellow { background: var(--warning-solid); }
.lineup__card--red { background: var(--danger-solid); }
.results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0 var(--space-6); }

@media (max-width: 639px) {
  .match-hero__board { gap: var(--space-3); }
  .match-hero__team { flex-direction: column; gap: var(--space-2); text-align: center; }
  .match-hero__team--home { text-align: center; }
  .match-hero__team--home .crest { order: 0; }
  .match-hero__name { font-size: var(--text-md); line-height: var(--leading-md); }
  .match-hero { --score-col: 104px; }
  .match-hero__scorers { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); }
  .match-hero__scorers > :last-child { grid-column: 2; }
  .match-hero__events li { max-width: 100%; }
  .match-hero__events li > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .card__header:has(> .cluster > .segmented) { flex-direction: column; align-items: stretch; }
  .card__header > .cluster > .segmented { width: 100%; flex-wrap: nowrap; }
  .card__header > .cluster > .segmented .segmented__item { flex: 1; }
  .match-hero__events { font-size: var(--text-xs); }
  .lineups { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .moment { grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); }
  .moment__body { padding: var(--space-2); gap: var(--space-2); }
  .moment__icon { width: 24px; height: 24px; }
}

/* Loan offers */
.loan-head { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.loan-terms .settings-row { min-height: 64px; padding-block: var(--space-2); }
.loan-terms .settings-row__label, .settings-row__label--stack { flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; }   /* a switch with a line under its name */
.loan-terms .settings-toggle { flex-shrink: 0; }
.segmented--block .segmented__item--2line, .segmented__item--2line { display: flex; flex-direction: column; justify-content: center; gap: 1px; height: auto; min-height: 48px; padding-block: var(--space-2); line-height: 1.2; white-space: normal; }
.segmented__item--2line small { font-size: var(--text-xs); font-weight: var(--weight-regular); color: var(--text-tertiary); }
.loan-offers { display: grid; gap: var(--space-2); margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.loan-offer { display: grid; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-raised); }
.loan-offer__club { display: flex; align-items: center; gap: var(--space-3); min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.loan-offer__club > span { display: grid; gap: 1px; min-width: 0; }
.loan-offer__tags { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.loan-offer__deal { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.loan-offer__deal > span { display: grid; gap: 1px; min-width: 0; }
.loan-rows { margin: 0; padding: 0; list-style: none; }
.loan-row { display: grid; gap: var(--space-2); padding: var(--space-3) var(--card-pad); border-top: 1px solid var(--border-subtle); }
.train-group + .loan-row { border-top: 0; }
.loan-row__who { display: flex; align-items: center; gap: var(--space-3); min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.loan-row__stats { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding-left: calc(40px + var(--space-3)); font-size: var(--text-sm); color: var(--text-secondary); }
.loan-row__stats b { color: var(--text-primary); }
.loan-row__strip { display: inline-flex; gap: var(--space-1); }

/* Pre-match */
.prematch__vs { font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-2xl); font-weight: var(--weight-bold); letter-spacing: 0.06em; color: var(--text-tertiary); }
/* Conditions under the fixture: the forecast and the crowd as two tiles */
.conditions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.condition { position: relative; display: flex; align-items: center; gap: var(--space-3); min-width: 0; padding: var(--space-3); border-radius: var(--radius-md); background: var(--bg-inset); overflow: hidden; }
.condition__icon { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: var(--radius-full); background: var(--bg-surface); color: var(--text-secondary); }
.condition__icon .icon { width: 20px; height: 20px; }
.condition__icon--sun { background: var(--warning-bg); color: var(--warning-text); }
.condition__icon--rain, .condition__icon--cold { background: var(--info-bg); color: var(--info-text); }
.condition__text { display: grid; gap: 1px; min-width: 0; }
.condition__text b { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.condition__text span { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--text-secondary); }
.condition__fill { position: absolute; left: 0; bottom: 0; height: 3px; width: var(--fill); background: var(--grad-accent); }   /* how full the ground will be */
.match-hero--cup .condition__icon { background: var(--cup-panel); color: var(--cup-gold); }

/* Before kick-off: one row per thing to do, with its action */
.todo-list { display: grid; margin: calc(-1 * var(--space-2)) 0 0; padding: 0; list-style: none; }
.todo { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--border-subtle); }
.todo:first-child { border-top: 0; }
.todo__icon { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: var(--radius-full); background: var(--bg-inset); color: var(--text-secondary); }
.todo__icon .icon { width: 16px; height: 16px; }
.todo__icon--accent { background: var(--accent-subtle); color: var(--accent-text); }
.todo__icon--warning { background: var(--warning-bg); color: var(--warning-text); }
.todo__icon--danger { background: var(--danger-bg); color: var(--danger-text); }
.todo__text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.todo__text b { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.todo__text > span { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--text-secondary); }
.todo__gain { font-weight: var(--weight-semibold); color: var(--success-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.todo .btn { flex-shrink: 0; }

/* Your XI at a glance */
.xi { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: var(--space-4); align-items: center; }
.xi__pitch { max-width: 132px; }
.xi__pitch .posmap__token { width: 24px; height: 24px; font-size: var(--text-xs); background: var(--fit-good); color: var(--fit-ink); }
.xi__spot--weak .posmap__token { background: var(--warning-bg); color: var(--warning-text); }
.xi__spot--out .posmap__token, .xi__spot--empty .posmap__token { background: var(--danger-bg); color: var(--danger-text); }
.xi__side { display: grid; gap: var(--space-4); min-width: 0; }
.xi__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); margin: 0; }
.xi__facts dt { font-size: var(--text-xs); color: var(--text-tertiary); }
.xi__facts dd { margin: 0; font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.xi__actions { display: grid; gap: var(--space-2); }
.xi__note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-4) 0 0; font-size: var(--text-xs); color: var(--text-tertiary); }
.xi__check { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); }   /* before kick-off: what needs a look, at the bottom of Your XI */

/* What the weather does to each outlet */
.wx-effects { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.wx-effects__label { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--text-secondary); }
.prematch__go { display: flex; justify-content: center; }
.prematch__go .btn { min-width: 220px; }
.prematch__controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.prematch__control { display: flex; flex-direction: column; gap: var(--space-1); }
.prematch-hero + .grid .callout { margin-bottom: var(--space-3); }
@media (max-width: 639px) { .prematch__go .btn { width: 100%; min-width: 0; } }

/* The lineup pitch, smaller on the pre-match screen; injured or suspended players get a red ring */
.pitch--compact { max-width: 440px; margin-top: var(--space-2); }
.pitch--compact .slot__token { width: 40px; height: 40px; }
.slot--out .slot__token { box-shadow: 0 0 0 2px var(--pitch-danger); }
.slot--out .slot__fit { background: var(--pitch-danger-bg); color: var(--pitch-danger-ink); }
.slot--out .slot__name { color: var(--pitch-danger); }

/* ---------- Weather atmosphere (pre-match and match pages) ----------
   A fixed, see-through layer that never takes clicks, plus a tint on the match card. */
.wx { position: fixed; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.wx i { position: absolute; display: block; }
.wx__drop { top: -120px; width: 1px; background: linear-gradient(to bottom, transparent, var(--wx-rain)); transform: rotate(12deg); animation: wx-fall linear infinite; }
@keyframes wx-fall { to { transform: translate3d(-90px, calc(100vh + 160px), 0) rotate(12deg); } }
.wx__flake { top: -10px; border-radius: 50%; background: var(--wx-snow); animation: wx-snow linear infinite; }
@keyframes wx-snow { 0% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(24px, 55vh, 0); } 100% { transform: translate3d(-12px, calc(100vh + 20px), 0); } }
.wx__star { width: 2px; height: 2px; border-radius: 50%; background: var(--wx-star); animation: wx-twinkle 4s ease-in-out infinite; }
@keyframes wx-twinkle { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } }
.wx--mild { background: linear-gradient(to bottom, var(--wx-tint-mild), transparent 45%); }
.wx__fog { width: 140vw; height: 38vh; border-radius: 50%; background: radial-gradient(ellipse at center, var(--wx-fog), transparent 70%); filter: blur(20px); animation: wx-drift 26s ease-in-out infinite alternate; }
.wx__fog--0 { left: -30vw; bottom: -12vh; }
.wx__fog--1 { left: -10vw; bottom: 18vh; height: 26vh; opacity: 0.7; animation-duration: 34s; animation-direction: alternate-reverse; }
.wx__fog--2 { left: -40vw; top: -10vh; height: 24vh; opacity: 0.5; animation-duration: 40s; }
@keyframes wx-drift { from { transform: translateX(-6vw); } to { transform: translateX(10vw); } }
.wx__sun { top: -140px; right: -140px; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, var(--wx-sun), transparent 62%); animation: wx-glow 6s ease-in-out infinite alternate; }
@keyframes wx-glow { from { opacity: 0.75; } to { opacity: 1; } }
.wx-card { background-image: linear-gradient(160deg, var(--wx-card-tint, transparent), transparent 70%); }
.wx-card--rain { --wx-card-tint: var(--wx-tint-rain); }
.wx-card--sun { --wx-card-tint: var(--wx-tint-sun); }
.wx-card--cold { --wx-card-tint: var(--wx-tint-cold); }
.wx-card--fog { --wx-card-tint: var(--wx-tint-fog); }
.wx-card--mild { --wx-card-tint: var(--wx-tint-mild); }
@media (prefers-reduced-motion: reduce) { .wx i { display: none; } }
/* The weather scene inside the match card: behind the content, clipped to the card. */
.wx-card { position: relative; overflow: hidden; isolation: isolate; }
.wx-card > :not(.wxs):not(.sr-only) { position: relative; z-index: 1; }
.wxs { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: linear-gradient(to bottom, var(--wxs-sky), transparent 75%); }
.wxs i { position: absolute; display: block; }
.wxs--rain { --wxs-sky: var(--wxs-sky-rain); }
.wxs--cold { --wxs-sky: var(--wxs-sky-cold); }
.wxs--sun { --wxs-sky: var(--wxs-sky-sun); }
.wxs--fog { --wxs-sky: var(--wxs-sky-fog); }
.wxs--mild { --wxs-sky: var(--wxs-sky-mild); }
/* rain: slanted streaks, and splashes rippling out along the bottom */
.wxs__drop { top: -60px; width: 2px; border-radius: 1px; background: linear-gradient(to bottom, transparent, var(--wxs-rain)); transform: rotate(14deg); animation: wxs-fall linear infinite; }
@keyframes wxs-fall { to { transform: translate3d(-110px, 520px, 0) rotate(14deg); } }
.wxs__splash { bottom: 6px; width: 18px; height: 5px; margin-left: -9px; border: 1.5px solid var(--wxs-splash); border-radius: 50%; opacity: 0; animation: wxs-splash 1.6s ease-out infinite; }
@keyframes wxs-splash { 0% { transform: scale(0.2); opacity: 0; } 15% { opacity: 1; } 70%, 100% { transform: scale(1.6); opacity: 0; } }
/* snow: flakes drifting down, a cap of snow on the card's top edge */
.wxs__flake { top: -10px; border-radius: 50%; background: var(--wxs-snow); animation: wxs-snow linear infinite; }
@keyframes wxs-snow { 0% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(18px, 250px, 0); } 100% { transform: translate3d(-10px, 520px, 0); } }
.wxs__cap { top: -2px; left: -2%; width: 104%; height: 14px; background:
  radial-gradient(ellipse 34px 12px at 6% 0, var(--wxs-cap) 70%, transparent 72%), radial-gradient(ellipse 44px 14px at 24% 0, var(--wxs-cap) 70%, transparent 72%),
  radial-gradient(ellipse 30px 10px at 43% 0, var(--wxs-cap) 70%, transparent 72%), radial-gradient(ellipse 50px 13px at 63% 0, var(--wxs-cap) 70%, transparent 72%),
  radial-gradient(ellipse 36px 11px at 82% 0, var(--wxs-cap) 70%, transparent 72%), radial-gradient(ellipse 40px 13px at 98% 0, var(--wxs-cap) 70%, transparent 72%);
  filter: drop-shadow(0 1px 0 var(--wxs-cap-edge)); }
/* sun: a pale disc in the corner with a soft halo, no glare */
.wxs__sun { top: -22px; right: -22px; width: 84px; height: 84px; border-radius: 50%; background: radial-gradient(circle, var(--wxs-sun-core) 0 30%, var(--wxs-sun) 44%, transparent 70%); animation: wx-glow 6s ease-in-out infinite alternate, wxs-breathe 9s ease-in-out infinite alternate; }
@keyframes wxs-breathe { from { transform: scale(1); } to { transform: scale(1.12); } }   /* the sun breathes, slowly */
.wxs__mote.wxs__mote--sun { background: var(--wxs-sun-core); width: 3px; height: 3px; filter: blur(0.6px); animation-duration: 9s; }   /* warm specks in the light, never stars */
/* mist: three soft banks drifting across */
.wxs__mist { left: -40%; width: 180%; height: 46%; border-radius: 50%; background: radial-gradient(ellipse at center, var(--wxs-mist), transparent 68%); filter: blur(10px); animation: wxs-drift 18s ease-in-out infinite alternate; }
.wxs__mist--0 { bottom: -12%; }
.wxs__mist--1 { top: 30%; height: 34%; opacity: 0.75; animation-duration: 24s; animation-direction: alternate-reverse; }
.wxs__mist--2 { top: -14%; height: 32%; opacity: 0.6; animation-duration: 30s; }
@keyframes wxs-drift { from { transform: translateX(-12%); } to { transform: translateX(12%); } }
/* a mild evening: dusk, a crescent moon, stars, and the floodlights on. The moon keeps to the top right,
   below the title bar when the card runs under it (the back chevron sits top left) */
.match-hero--top .wxs__moon { top: calc(var(--topbar-height) + 6px); }
.wxs__moon { top: 12px; right: 18px; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset -5px 2px 0 0 var(--wxs-moon), 0 0 18px 2px var(--wxs-moon-glow); }
.wxs__star { width: 2px; height: 2px; border-radius: 50%; background: var(--wxs-star); animation: wx-twinkle 4s ease-in-out infinite; }
/* clouds: soft banks of puffs drifting along the top (rain, snow) */
.wxs__cloud { top: -28px; left: -20%; width: 140%; height: 70px; background:
  radial-gradient(ellipse 90px 34px at 10% 60%, var(--wxs-cloud) 60%, transparent 62%), radial-gradient(ellipse 120px 40px at 30% 45%, var(--wxs-cloud) 60%, transparent 62%),
  radial-gradient(ellipse 100px 36px at 52% 62%, var(--wxs-cloud) 60%, transparent 62%), radial-gradient(ellipse 130px 42px at 74% 48%, var(--wxs-cloud) 60%, transparent 62%),
  radial-gradient(ellipse 90px 32px at 94% 60%, var(--wxs-cloud) 60%, transparent 62%); filter: blur(3px); animation: wxs-cloud 26s ease-in-out infinite alternate; }
.wxs__cloud--b { top: -8px; opacity: 0.6; transform: scale(0.8); animation-duration: 34s; animation-direction: alternate-reverse; }
.wxs__cloud--snow { --wxs-cloud: var(--wxs-cloud-snow); }
@keyframes wxs-cloud { from { translate: -6% 0; } to { translate: 6% 0; } }
.wxs__drop--far { width: 1px; opacity: 0.4; }
.wxs__flash { inset: 0; background: var(--wxs-flash); opacity: 0; animation: wxs-flash 11s linear infinite; }   /* the odd flash of lightning */
@keyframes wxs-flash { 0%, 91%, 93.5%, 95%, 100% { opacity: 0; } 92%, 94% { opacity: 1; } }
.wxs__sheen { left: 0; right: 0; bottom: 0; height: 26px; background: linear-gradient(to top, var(--wxs-sheen), transparent); }   /* a wet pitch catches the light */
.wxs__flake--near { filter: blur(1.5px); opacity: 0.85; }
.wxs__frost { inset: 0; background: radial-gradient(circle at 0 0, var(--wxs-frost), transparent 22%), radial-gradient(circle at 100% 0, var(--wxs-frost), transparent 20%), radial-gradient(circle at 0 100%, var(--wxs-frost), transparent 18%), radial-gradient(circle at 100% 100%, var(--wxs-frost), transparent 20%); }
.wxs__drift { left: -2%; right: -2%; bottom: -6px; height: 16px; background: radial-gradient(ellipse 60px 12px at 12% 100%, var(--wxs-cap) 70%, transparent 72%), radial-gradient(ellipse 80px 14px at 40% 100%, var(--wxs-cap) 70%, transparent 72%), radial-gradient(ellipse 70px 12px at 70% 100%, var(--wxs-cap) 70%, transparent 72%), radial-gradient(ellipse 60px 13px at 94% 100%, var(--wxs-cap) 70%, transparent 72%); }
.wxs__mist--3 { top: 55%; height: 30%; opacity: 0.5; animation-duration: 40s; }
.wxs__halo { top: -40px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, var(--wxs-halo), transparent 65%); filter: blur(4px); }   /* the floodlights glowing through the mist */
.wxs__halo--l { left: -40px; } .wxs__halo--r { right: -40px; }
.match-hero--top .wxs__halo { top: calc(var(--topbar-height) + 4px); }   /* below the title bar when the card runs under it */
.wxs__mote { width: 3px; height: 3px; border-radius: 50%; background: var(--wxs-mote); animation: wxs-mote 7s ease-in-out infinite; }   /* specks of light floating under the floodlights */
@keyframes wxs-mote { 0%, 100% { transform: translate(0, 0); opacity: 0; } 30% { opacity: 1; } 50% { transform: translate(8px, -14px); } 80% { opacity: 0.6; } }
@media (prefers-reduced-motion: reduce) { .wxs__drop, .wxs__splash, .wxs__flake, .wxs__mist, .wxs__star, .wxs__mote, .wxs__flash { display: none; } .wxs__sun, .wxs__cloud { animation: none; } }
/* the weather line in the match card's footer */
.wx-chip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px var(--space-2); flex-basis: 100%; font-size: var(--text-sm); color: var(--text-secondary); }
.wx-chip b { font-weight: var(--weight-semibold); color: var(--text-primary); }
.wx-chip .icon { color: var(--text-primary); }
.wx-chip__feel { flex-basis: 100%; text-align: center; font-size: var(--text-xs); color: var(--text-tertiary); }

/* ---------- League: country picker ---------- */
/* One flag per country above the table; names on wide screens, the code on phones */
.country-tabs__item { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-width: 0; }
.country-tabs__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.country-tabs__code { display: none; }
@media (max-width: 900px) {
  .country-tabs__name { display: none; }
  .country-tabs__code { display: inline; }
}

/* ---------- What's new ---------- */
.changelog { max-width: 720px; }
.changelog__list { margin: 0; padding-left: var(--space-5); display: grid; gap: var(--space-2); color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-sm); }

/* ---------- Club museum ---------- */
/* The entrance: a dark gallery band like the season finale, then the rooms as cards */
.museum-hero { display: grid; gap: var(--space-6); margin-bottom: var(--gap); padding: var(--space-8) var(--space-8) 0; border-radius: var(--radius-lg); background: var(--moment-bg); color: var(--moment-text); overflow: hidden; }
.museum-hero__head { display: flex; align-items: center; gap: var(--space-5); }
.museum-hero__eyebrow { margin: 0; color: var(--trophy-hi); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; }
.museum-hero__title { margin: var(--space-1) 0; font-size: var(--text-2xl); line-height: var(--leading-2xl); color: var(--moment-text); }
.museum-hero__sub { margin: 0; color: var(--moment-muted); font-size: var(--text-sm); max-width: 56ch; }
.museum-hero__stats { display: flex; gap: 1px; margin: 0 calc(-1 * var(--space-8)); border-top: 1px solid var(--moment-line); background: var(--moment-line); }
.museum-hero__stat { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--space-4) var(--space-2); background: var(--moment-panel); }
.museum-hero__value { font-size: var(--text-xl); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.museum-hero__label { color: var(--moment-muted); font-size: var(--text-xs); }
@media (max-width: 640px) {
  .museum-hero { padding: var(--space-5) var(--space-5) 0; }
  .museum-hero__head { align-items: flex-start; gap: var(--space-4); }
  .museum-hero__stats { margin: 0 calc(-1 * var(--space-5)); }
}

/* Trophy room: cups on shelves; each row of the grid sits on a plank */
.museum-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--space-5) var(--space-3); }
.museum-shelf--empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); min-height: 140px; padding: var(--space-6) var(--space-4); text-align: center; border: 1px dashed var(--border-default); border-radius: var(--radius-md); }
.museum-shelf--empty .empty__icon { margin-bottom: 0; }
.museum-shelf--empty p { margin: 0; }
.museum-trophy { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); margin: 0; padding-bottom: var(--space-2); border-bottom: var(--space-1) solid var(--border-strong); text-align: center; }
.museum-cup { width: 64px; height: 64px; filter: drop-shadow(0 4px 10px var(--moment-glow)); }
.museum-trophy figcaption { display: grid; gap: 2px; }
.museum-trophy__name { font-size: var(--text-xs); font-weight: var(--weight-semibold); line-height: var(--leading-xs); }
.museum-trophy__season { font-size: var(--text-xs); color: var(--text-tertiary); }

/* Palmarès: a season timeline, titles marked in gold */
.museum-timeline { list-style: none; margin: 0; padding: 0; display: grid; }
.museum-timeline__item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--border-subtle); }
.museum-timeline__item:first-child { border-top: 0; padding-top: 0; }
.museum-timeline__season { flex: 0 0 auto; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-full); background: var(--bg-inset); color: var(--text-secondary); font-size: var(--text-xs); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.museum-timeline__item.is-title .museum-timeline__season { background: var(--warning-bg); color: var(--warning-text); }
.museum-timeline__body { flex: 1; min-width: 0; display: grid; gap: var(--space-1); }
.museum-timeline__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }   /* the finish (place, up or down), then the points and the scorer */
.museum-timeline__meta .cluster { gap: var(--space-1); }
.museum-timeline__item > .btn { align-self: center; }

/* Hall of legends */
.legend-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-3); }
.legend-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-surface); }
.legend-card--legend { border-color: var(--warning-border); }
.legend-card.is-clickable { cursor: pointer; }
.legend-card.is-clickable:hover { background: var(--bg-hover); }
.legend-card__head { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.legend-card__who { display: grid; gap: var(--space-1); min-width: 0; }
.legend-card__name { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-semibold); min-width: 0; }
.legend-card__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin: 0; }
.legend-card__stats div { display: grid; gap: 2px; padding: var(--space-2); border-radius: var(--radius-sm); background: var(--bg-inset); text-align: center; }
.legend-card__stats dt { font-size: var(--text-xs); color: var(--text-tertiary); }
.legend-card__stats dd { margin: 0; font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.legend-card__story { margin: 0; font-size: var(--text-xs); color: var(--text-secondary); line-height: var(--leading-xs); }

/* Rooms the museum hasn't opened yet */
.museum-locked { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.museum-locked > .icon { color: var(--text-tertiary); }
.museum-locked p { margin: 0; }
.museum-record { text-align: right; }

/* ---------- Stories (League page) ---------- */
/* Bubbles: a gradient ring while a reel has something new, a quiet ring once seen */
.stories-bar { display: flex; gap: var(--space-3); overflow-x: auto; margin: calc(-1 * var(--space-2)) calc(-1 * var(--page-pad)) 0; padding: var(--space-1) var(--page-pad) var(--space-1); scrollbar-width: none; }
.stories-bar::-webkit-scrollbar { display: none; }
.story-bubble { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-1); width: 62px; padding: 0; border: 0; background: none; color: var(--text-secondary); cursor: pointer; }
.story-bubble__ring { display: grid; place-items: center; width: 56px; height: 56px; padding: 2px; border-radius: var(--radius-full); background: var(--border-strong); transition: transform var(--dur-fast) var(--ease-out); }
.story-bubble.is-new .story-bubble__ring { background: var(--story-ring); }
.story-bubble:hover .story-bubble__ring { transform: scale(1.04); }
.story-bubble:active .story-bubble__ring { transform: scale(0.96); }
.story-bubble__img { display: grid; place-items: center; width: 100%; height: 100%; border-radius: var(--radius-full); background: var(--bg-surface); border: 2px solid var(--bg-canvas); color: var(--warning-text); }
.story-bubble__img .icon { width: 22px; height: 22px; }
.story-bubble__img .crest--lg { --size: 36px; }
.story-bubble__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-xs); }
.story-bubble.is-new .story-bubble__label { color: var(--text-primary); font-weight: var(--weight-semibold); }

/* Viewer: a 9:16 card on wide screens, the whole screen on a phone */
.modal--story { width: min(400px, 100%); aspect-ratio: 9 / 16; max-height: calc(100vh - var(--space-8)); padding: 0; overflow: hidden; border: 0; background: var(--moment-bg); color: var(--story-text); }
.story { position: relative; display: flex; flex-direction: column; height: 100%; padding: var(--space-3) var(--space-5) var(--space-8); overflow: hidden; background: var(--story-shade), linear-gradient(160deg, var(--story-a), color-mix(in srgb, var(--story-a) 40%, #000)); }   /* club colours are set on .story, so it paints them */
.story::before { content: ""; position: absolute; inset: -20% -40% auto auto; width: 80%; aspect-ratio: 1; border-radius: var(--radius-full); background: var(--story-b); opacity: 0.22; filter: blur(40px); pointer-events: none; }
.story__bars { display: flex; gap: var(--space-1); }
.story__bar { flex: 1; height: 3px; border-radius: var(--radius-full); background: var(--story-bar); overflow: hidden; }
.story__bar i { display: block; height: 100%; width: 0; background: var(--story-text); }
.story__bar.is-done i { width: 100%; }
.story__bar.is-active i { animation: story-fill linear forwards; }
@keyframes story-fill { to { width: 100%; } }
.story__head { position: relative; z-index: 2; display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); font-size: var(--text-sm); }
.story__avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-full); background: var(--story-panel); }
.story__who { display: grid; font-weight: var(--weight-semibold); line-height: 1.2; }
.story__followers { font-size: var(--text-xs); font-weight: var(--weight-regular); color: var(--story-muted); }
.story__likes { display: inline-flex; align-items: center; gap: var(--space-1); margin: var(--space-4) 0 0; font-size: var(--text-sm); color: var(--story-muted); }
.story__likes .icon { color: var(--story-like); fill: var(--story-like); }
.story__likes b { color: inherit; font-weight: var(--weight-semibold); }
.story__when { color: var(--story-muted); font-size: var(--text-xs); }
.story__close { margin-left: auto; color: var(--story-text); }
.story__body { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); text-align: center; animation: story-in var(--dur-slow) var(--ease-out) both; }
@keyframes story-in { from { opacity: 0; transform: scale(0.97); } }
.story__eyebrow { margin: 0; color: var(--story-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.1em; text-transform: uppercase; }
.story__huge { margin: 0; font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-2xl); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: 0.02em; }
.story__huge--name { text-transform: none; }
.story__giant, .story__score { margin: 0; font-family: var(--font-display); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; line-height: 1; }
.story__giant { font-size: calc(var(--text-2xl) * 3.5); }
.story__score { font-size: calc(var(--text-2xl) * 2); }
.story__line { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin: 0; font-size: var(--text-md); }
.story__sub { margin: 0; color: var(--story-muted); font-size: var(--text-sm); }
.story__list { list-style: none; margin: var(--space-2) 0 0; padding: var(--space-3) var(--space-4); display: grid; gap: var(--space-2); border-radius: var(--radius-md); background: var(--story-panel); font-size: var(--text-sm); }
.story__list li { display: flex; align-items: center; gap: var(--space-2); }
.story__face .face { box-shadow: 0 0 0 4px var(--story-line); }
.story__face .face--xl { width: 132px; height: 132px; }
.story__cup .museum-cup { width: 140px; height: 140px; }
.story__vs { display: flex; align-items: center; gap: var(--space-4); font-weight: var(--weight-bold); color: var(--story-muted); }
.story__podium { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: var(--space-2); }
.story__podium li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); background: var(--story-panel); text-align: left; }
.story__podium li.is-me { box-shadow: inset 0 0 0 2px var(--story-text); }
.story__rank { width: 20px; font-weight: var(--weight-bold); }
.story__club { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--weight-semibold); }
.story__pts { color: var(--story-muted); font-variant-numeric: tabular-nums; }
.story__body--result .story__huge--W { color: var(--story-text); }
/* tap zones: left third back, the rest forward (like the app) */
.story__tap { position: absolute; top: 72px; bottom: 0; z-index: 1; border: 0; padding: 0; background: transparent; cursor: pointer; }
.story__tap--prev { left: 0; width: 33%; }
.story__tap--next { right: 0; width: 67%; }
.story__tap:focus-visible { outline: 2px solid var(--story-text); outline-offset: -4px; }
@media (max-width: 639px) {
  .modal--story { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; border-radius: 0; }
}

/* ---------- Agenda (Club › Agenda, dashboard) ---------- */
/* Weeks down a line: the week number, your match, then anything else due that week */
.agenda { list-style: none; margin: 0; padding: 0; display: grid; }
.agenda--page > .agenda__week:first-child { border-top: 0; padding-top: var(--space-1); }   /* the Agenda tab: weeks straight on the page, no card */
@media (max-width: 639px) { .agenda--page { padding-inline: var(--space-2); } }
.agenda--page .agenda__week { grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-3); }   /* the week badge hugs the left: more room for the matches */
.agenda--page .agenda__when { align-items: flex-start; }
.agenda--page .agenda__label { max-width: 44px; text-align: left; }
.agenda__week { display: grid; grid-template-columns: 64px 1fr; gap: var(--space-4); padding: var(--space-4) 0; border-top: 1px solid var(--border-subtle); }
.agenda__week:first-child { border-top: 0; padding-top: 0; }
.agenda__week.is-played { opacity: 0.66; }
.agenda__when { display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: var(--space-1); }
.agenda__num { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--bg-inset); font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.agenda__week.is-now .agenda__num { background: var(--grad-button); color: var(--on-accent); }
.agenda__label { font-size: var(--text-xs); color: var(--text-tertiary); white-space: nowrap; }
.agenda__week.is-now .agenda__label { color: var(--accent-text); font-weight: var(--weight-semibold); }
.agenda__body { display: grid; gap: var(--space-2); min-width: 0; }
.agenda__match { display: flex; align-items: center; gap: var(--space-2); min-width: 0; min-height: var(--control-md); padding: 0 var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-surface); color: inherit; font: inherit; text-align: left; }
.agenda__match > :last-child:not(.truncate):not(.text-xs) { margin-left: auto; }
.agenda__wx { display: inline-flex; align-items: center; gap: var(--space-1); margin-left: auto; flex-shrink: 0; font-size: var(--text-xs); color: var(--text-secondary); }
@media (max-width: 639px) { .agenda__wx span { display: none; } }   /* phones: the icon is enough */
.agenda__vs { width: 18px; color: var(--text-tertiary); font-size: var(--text-xs); }
.agenda__score { font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.agenda__score--W { color: var(--success-text); }
.agenda__score--L { color: var(--danger-text); }
.agenda__items { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.agenda__item { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-1) 0; font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-sm); }
.agenda__item > .icon { flex-shrink: 0; margin-top: 3px; color: var(--text-tertiary); }
.agenda__item--success > .icon { color: var(--success-text); }
.agenda__item--warning > .icon { color: var(--warning-text); }
.agenda__item--info > .icon { color: var(--info-text); }
.agenda__item b { color: var(--text-primary); font-weight: var(--weight-semibold); }
.agenda__item--link { width: 100%; border: 0; border-radius: var(--radius-sm); background: none; font: inherit; color: var(--text-secondary); text-align: left; cursor: pointer; }
.agenda__item--link:hover { background: var(--bg-hover); }
.agenda__chev { margin-left: auto; color: var(--text-tertiary); }
.agenda__match--cup { border-color: var(--warning-border); }
.agenda__fixture { display: grid; gap: var(--space-1); }
.agenda__comp { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-tertiary); }
.agenda__comp--cup { color: var(--warning-text); }
.agenda__week--cup .agenda__num { color: var(--warning-text); }
.agenda__week--pre .agenda__num, .agenda__week--winter .agenda__num { background: transparent; border: 1px dashed var(--border-default); color: var(--text-secondary); }
.agenda__label { max-width: 64px; white-space: normal; text-align: center; line-height: var(--leading-xs); }   /* "Pre-season" wraps at its hyphen */
.agenda--compact .agenda__week { padding: var(--space-3) 0; }

/* ---------- European Cup (League › European Cup) ---------- */
/* The bracket: one column per round, scrolling sideways on a phone; your ties outlined */
.cup-card { overflow: hidden; }
.cup-bracket { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: var(--space-4); padding: var(--card-pad); overflow-x: auto; }
.cup-round { display: flex; flex-direction: column; justify-content: space-around; gap: var(--space-2); min-width: 0; }
.cup-round__name { display: flex; justify-content: space-between; margin: 0 0 var(--space-1); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); }
.cup-round__name span { font-weight: var(--weight-regular); letter-spacing: 0; text-transform: none; color: var(--text-tertiary); }
.cup-round__name { align-items: center; gap: var(--space-2); }
.cup-round__name span { margin-left: auto; }
.cup-round__replay { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: -6px -6px -6px 0; border: 0; border-radius: var(--radius-full); background: none; color: var(--accent-text); cursor: pointer; }
.cup-round__replay:hover { background: var(--bg-hover); }
.cup-tie { display: grid; gap: 2px; padding: var(--space-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-surface); color: inherit; font: inherit; text-align: left; }
.cup-tie.is-mine { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.cup-tie--tbd { min-height: 56px; place-items: center; border-style: dashed; color: var(--text-tertiary); font-size: var(--text-xs); }
.cup-tie__team { display: flex; align-items: center; gap: var(--space-2); min-width: 0; font-size: var(--text-sm); color: var(--text-secondary); }
.cup-tie__team.is-won { color: var(--text-primary); font-weight: var(--weight-semibold); }
.cup-tie__team.is-me .truncate { color: var(--accent-text); }
.cup-tie__score { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: var(--weight-semibold); }
.cup-tie__score small { margin-left: 2px; font-size: var(--text-xs); color: var(--text-tertiary); }
.story__list--ties { width: 100%; text-align: left; }
.story__list--ties li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: var(--space-2); }
.story__list--ties .story__muted { grid-column: 2 / -1; color: var(--story-muted); font-size: var(--text-xs); }

/* ---------- National cup ---------- */
.ncup-road { display: grid; margin: 0; padding: 0; list-style: none; }
.ncup-road__row { display: flex; align-items: center; gap: var(--space-3); min-height: 56px; padding: var(--space-2) 0; border-top: 1px solid var(--border-subtle); }
.ncup-road__row:first-child { border-top: 0; }
.ncup-road__row.is-gone { opacity: 0.55; }
.ncup-road__when { display: grid; gap: 1px; width: 112px; flex-shrink: 0; }
.ncup-road__when b { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.ncup-road__when span { font-size: var(--text-xs); color: var(--text-tertiary); }
.ncup-road__tie { display: flex; align-items: center; gap: var(--space-2); flex: 1; min-width: 0; }
.cup-tie__tier { margin-left: auto; font-size: var(--text-xs); color: var(--text-tertiary); white-space: nowrap; }
.ncup-ties { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-2); }

/* ---------- European Cup nights ---------- */
/* Match report, pre-match and the dashboard's next-match card on a cup night: the navy stage, stars,
   a floodlight glow and a gold rim. Text tokens are switched inside so every child reads on it. */
.card--cup, .match-hero--cup {
  --text-primary: var(--cup-text); --text-secondary: var(--cup-muted); --text-tertiary: var(--cup-muted);
  --border-subtle: var(--cup-line); --border-default: var(--cup-line); --bg-inset: rgba(255, 255, 255, 0.08); --bg-hover: rgba(255, 255, 255, 0.06);
  background-color: var(--cup-bg); background-image: linear-gradient(160deg, var(--wx-card-tint, transparent), transparent 70%), var(--cup-glow), var(--cup-stars);
  border-color: var(--cup-line); color: var(--cup-text); box-shadow: inset 0 3px 0 var(--cup-gold), var(--shadow-md);
}
.match-hero--cup .match-hero__meta, .card--cup .card__title { color: var(--cup-gold); }
.match-hero__meta .icon { width: 14px; height: 14px; vertical-align: -2px; margin-right: var(--space-1); }
.match-hero--cup .prematch__vs { color: var(--cup-gold); }

/* ---------- The board and your career ---------- */
.board { display: grid; gap: var(--space-4); }
.board__head { display: flex; align-items: center; gap: var(--space-3); }
.board__head > .badge { margin-left: auto; }
.board-objs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.board-obj { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.board-obj > .icon { flex-shrink: 0; color: var(--text-tertiary); }
.board-obj__label { flex: 1; min-width: 0; }
.board-obj__now { font-size: var(--text-xs); color: var(--text-tertiary); white-space: nowrap; }
.board-obj--met > .icon, .board-obj--met .board-obj__now { color: var(--success-text); }
.board-obj--failed > .icon, .board-obj--failed .board-obj__now { color: var(--danger-text); }
.board-obj--off > .icon, .board-obj--off .board-obj__now { color: var(--warning-text); }
.board-obj--failed .board-obj__label { text-decoration: line-through; color: var(--text-tertiary); }
/* Board meeting: two sets of targets side by side, the whole panel is the choice */
.board-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-3); }
.board-option { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--bg-surface); color: var(--text-primary); font: inherit; text-align: left; cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
.board-option:hover { border-color: var(--accent); background: var(--bg-hover); }
.board-option--ambitious { border-color: var(--warning-border); }
.board-option--ambitious:hover { border-color: var(--warning-solid); }
.board-option__title { font-size: var(--text-md); font-weight: var(--weight-bold); }
.board-option__sub { font-size: var(--text-sm); color: var(--text-secondary); }
.board-option__list { list-style: none; margin: var(--space-1) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.board-option__list li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.board-option__list li span { flex: 1; }
.board-option__list b { font-variant-numeric: tabular-nums; }
.board-option__cta { display: inline-flex; align-items: center; gap: var(--space-1); margin-top: auto; padding-top: var(--space-2); color: var(--accent-text); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.board-option--ambitious .board-option__cta { color: var(--warning-text); }
/* Sacked and the job lists */
.sack-letter { display: grid; gap: var(--space-3); padding: var(--space-5); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--bg-subtle); }   /* the chairman's letter */
.sack-letter p { margin: 0; color: var(--text-primary); line-height: var(--leading-base); }
.sack-letter .modal__title { margin: 0; }
.sack-letter__sign { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-1); }
.sack-letter__sign > span { display: grid; }
.sack-letter__rep { margin: var(--space-4) 0 0; }
.job-list { display: grid; gap: var(--space-2); }
.job-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-surface); min-width: 0; }
.job-row__who { display: grid; gap: 2px; flex: 1; min-width: 0; }
.job-row__who .text-xs { display: inline-flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }
.job-row__go { flex-shrink: 0; }
@media (max-width: 639px) { .job-row { flex-wrap: wrap; } .job-row__go { width: 100%; } .job-row__go .cluster { justify-content: flex-end; } }
.career-hero { display: grid; grid-template-columns: auto 1fr minmax(220px, 320px); align-items: center; gap: var(--space-5); }
.career-hero__who { display: grid; gap: 2px; min-width: 0; }
.career-hero__name { margin: 0; font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-2xl); }
.career-hero__rep .field__hint { margin-top: var(--space-2); }
@media (max-width: 760px) { .career-hero { grid-template-columns: auto 1fr; } .career-hero__rep { grid-column: 1 / -1; } }
/* the chairman in the chat */
.chat-row__body { display: grid; gap: var(--space-1); flex: 1; min-width: 0; }   /* the assistant's messages use the whole row beside her face */
.chat-row__body .chat-msg { max-width: 100%; align-items: stretch; }
.chat-msg__from { font-size: var(--text-xs); color: var(--text-tertiary); padding-left: var(--space-2); }
.chat-msg--board .chat-bubble { width: 100%; background: var(--bg-surface); border-color: var(--border-default); box-shadow: inset 3px 0 0 var(--accent), var(--shadow-xs); }   /* the board's letterhead */
.chat-bubble__letterhead { display: inline-flex; align-items: center; gap: var(--space-1); margin-bottom: var(--space-1); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); }
/* Board cards inside a message */
.bcard { display: grid; gap: var(--space-2); margin-top: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); background: var(--bg-inset); }
.bcard__mood { display: flex; justify-content: space-between; font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.bcard__mood .tabular { font-weight: var(--weight-regular); color: var(--text-secondary); font-size: var(--text-xs); }
.bcard__list { list-style: none; margin: var(--space-1) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.bcard__item { display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-2); align-items: start; font-size: var(--text-sm); }
.bcard__item > .icon { margin-top: 2px; color: var(--text-tertiary); }
.bcard__label { font-weight: var(--weight-medium); }
.bcard__state { grid-column: 2; font-size: var(--text-xs); color: var(--text-tertiary); }
.bcard__item.is-met > .icon, .bcard__item.is-met .bcard__state { color: var(--success-text); }
.bcard__item.is-off > .icon, .bcard__item.is-off .bcard__state { color: var(--warning-text); }
.bcard__item.is-failed > .icon, .bcard__item.is-failed .bcard__state { color: var(--danger-text); }
.bcard--ultimatum { border: 1px solid var(--danger-border); background: var(--danger-bg); }
.bcard--ultimatum.is-done { border-color: var(--success-border); background: var(--success-bg); }
.bcard__target { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: var(--text-secondary); }
.bcard__big { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1; font-weight: var(--weight-bold); color: var(--danger-text); }
.bcard--ultimatum.is-done .bcard__big { color: var(--success-text); }
.bcard__slots { display: flex; align-items: center; gap: var(--space-2); }
.bcard__slot { width: 28px; height: 8px; border-radius: var(--radius-full); background: var(--border-strong); }
.bcard__slot.is-played { background: var(--text-secondary); }
.bcard__pts { margin-left: auto; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--text-secondary); }
.bcard--meeting { grid-template-columns: 1fr 1fr; gap: var(--space-2); padding: 0; background: none; }
.bcard__opt { display: grid; gap: var(--space-1); align-content: start; padding: var(--space-3); border-radius: var(--radius-md); background: var(--bg-inset); font-size: var(--text-xs); }
.bcard__opt--ambitious { box-shadow: inset 0 0 0 1px var(--warning-border); }
.bcard__opt-title { font-size: var(--text-sm); font-weight: var(--weight-bold); }
.bcard__opt-row { display: grid; gap: 1px; color: var(--text-secondary); }
.bcard__opt-row b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.bcard--sacked { grid-template-columns: auto 1fr; align-items: center; color: var(--danger-text); }
/* the assistant's cards: a result (light), deals and prospects (player rows), something built, the money, a moment */
.rcard { gap: var(--space-1); }
.rcard__side { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); }
.rcard__side b { font-size: var(--text-md); color: var(--text-secondary); }
.rcard__side.is-win, .rcard__side.is-win b { color: var(--text-primary); font-weight: var(--weight-semibold); }
.rcard__side.is-mine .truncate { font-weight: var(--weight-semibold); }
.rcard__note { display: flex; gap: var(--space-2); align-items: flex-start; margin: var(--space-2) 0 0; padding-top: var(--space-2); border-top: 1px solid var(--border-subtle); font-size: var(--text-sm); }   /* the cup: through, or out */
.rcard__note .icon { flex: none; margin-top: 2px; color: var(--success-text); }
.rcard__note.is-out .icon { color: var(--danger-text); }
.rcard__table { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: center; margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--border-subtle); }
.rcard__pos { display: grid; justify-items: center; font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-bold); line-height: 1.1; }
.rcard__move { display: inline-flex; align-items: center; font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.rcard__move.is-up { color: var(--success-text); } .rcard__move.is-down { color: var(--danger-text); }
.rcard__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; min-width: 0; }
.rcard__rows li { display: grid; grid-template-columns: 1.4em auto 1fr auto; gap: var(--space-2); align-items: center; padding: 1px var(--space-1); border-radius: var(--radius-sm); font-size: var(--text-xs); color: var(--text-secondary); }
.rcard__rows li.is-mine { background: var(--accent-subtle); color: var(--text-primary); font-weight: var(--weight-semibold); }
.rcard__rank { color: var(--text-tertiary); text-align: right; }
.dcard { list-style: none; gap: var(--space-2); }
.dcard__row { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-2); align-items: center; min-width: 0; }
.dcard__row + .dcard__row { padding-top: var(--space-2); border-top: 1px solid var(--border-subtle); }
.dcard__who { display: grid; min-width: 0; font-size: var(--text-sm); }
.dcard__pot { display: inline-flex; align-items: center; gap: 3px; font-size: var(--text-sm); color: var(--text-secondary); }
.dcard__pot b { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1; }
.dcard__pot.is-up b, .dcard__pot.is-up .icon { color: var(--success-text); }
.dcard__pot.is-down b, .dcard__pot.is-down .icon { color: var(--danger-text); }
.dcard__bids { list-style: none; margin: 0; padding: var(--space-2) 0 0; display: grid; gap: var(--space-1); border-top: 1px solid var(--border-subtle); }
.dcard__bid { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-2); align-items: center; font-size: var(--text-sm); color: var(--text-secondary); }
.dcard__bid.is-best { color: var(--text-primary); font-weight: var(--weight-semibold); }
.dcard__bid.is-best b { color: var(--success-text); }
.dcard__deal { display: grid; justify-items: end; gap: 2px; font-size: var(--text-sm); }
.dcard__route { display: inline-flex; align-items: center; gap: 2px; color: var(--text-tertiary); }
.dcard__noface { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-full); background: var(--bg-surface); color: var(--text-tertiary); }
.dcard__more { padding-top: var(--space-2); border-top: 1px solid var(--border-subtle); }
.kcard { gap: 0; padding: 0; overflow: hidden; }
.kcard__art svg { display: block; width: 100%; height: auto; max-height: 190px; }   /* the drawing edge to edge, on its own sky */
.kcard__cap { display: flex; align-items: center; justify-content: center; gap: var(--space-1); margin: 0; padding: var(--space-2) var(--space-3); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--text-secondary); }
.kcard__cap .icon { color: var(--success-text); }
.cash-card { gap: var(--space-2); }
.cash-card__bar { display: grid; grid-template-columns: 2.4em 1fr auto; gap: var(--space-2); align-items: center; font-size: var(--text-xs); color: var(--text-secondary); }
.cash-card__bar b { color: var(--text-primary); font-size: var(--text-sm); }
.cash-card__track { height: 8px; border-radius: var(--radius-full); background: var(--border-subtle); overflow: hidden; }
.cash-card__fill { display: block; height: 100%; border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.cash-card__fill--in { background: var(--grad-accent); } .cash-card__fill--out { background: var(--grad-danger); }
.cash-card__cash { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-2); align-items: center; padding-top: var(--space-2); border-top: 1px solid var(--border-subtle); }
.cash-card__spark { width: 100%; height: 28px; overflow: visible; }
.cash-card__spark polyline { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.scard { gap: var(--space-3); }
.scard--title { background: linear-gradient(135deg, var(--warning-bg), var(--bg-inset) 70%); }
.scard__top { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-3); align-items: center; }
.scard__pos { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--weight-bold); line-height: 1; }
.scard--title .scard__pos, .scard__cup { color: var(--warning-text); }
.scard__lg { display: grid; min-width: 0; font-size: var(--text-sm); }
.scard__cup { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--bg-surface); }
.scard__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--space-2) var(--space-3); margin: 0; padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); }
.scard__facts dt { font-size: var(--text-xs); color: var(--text-tertiary); }
.scard__facts dd { display: flex; align-items: center; gap: var(--space-1); margin: 0; font-size: var(--text-sm); font-weight: var(--weight-semibold); min-width: 0; }
.scard__move { display: flex; align-items: center; gap: var(--space-2); margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-size: var(--text-sm); }
.scard--up .scard__move { background: var(--success-bg); color: var(--success-text); }
.scard--down .scard__move { background: var(--danger-bg); color: var(--danger-text); }
.scard__move b { font-weight: var(--weight-bold); }
.cdraw { gap: var(--space-3); background: linear-gradient(135deg, color-mix(in srgb, var(--info-solid) 14%, var(--bg-inset)), var(--bg-inset) 70%); }   /* the European Cup: a night-blue touch */
.cdraw__money { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.cdraw__money > span { display: grid; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--bg-surface); }
.cdraw__money b { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.1; }
.cdraw__ties { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-2); }
.cdraw__tie { display: grid; grid-template-columns: auto auto 1fr auto; gap: var(--space-2); align-items: center; min-width: 0; font-size: var(--text-sm); font-weight: var(--weight-medium); }
.cdraw__md { font-size: var(--text-xs); color: var(--text-tertiary); }
.cdraw__ha { min-width: 20px; padding: 0 4px; border-radius: var(--radius-full); background: var(--bg-surface); font-size: 10px; font-weight: var(--weight-bold); text-align: center; color: var(--text-secondary); }
.cdraw__ha.is-home { background: var(--accent-subtle); color: var(--accent-text); }
.vcard { gap: var(--space-3); }
.vcard--renewed { background: linear-gradient(135deg, var(--success-bg), var(--bg-inset) 65%); }
.vcard--warning { background: linear-gradient(135deg, var(--warning-bg), var(--bg-inset) 65%); }
.vcard--sacked { background: linear-gradient(135deg, var(--danger-bg), var(--bg-inset) 65%); }
.vcard__head { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-3); align-items: center; }
.vcard__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--bg-surface); }
.vcard--renewed .vcard__icon { color: var(--success-text); } .vcard--warning .vcard__icon { color: var(--warning-text); } .vcard--sacked .vcard__icon { color: var(--danger-text); }
.vcard__word { display: grid; min-width: 0; font-size: var(--text-sm); }
.vcard__paid { display: grid; justify-items: end; }
.vcard__paid b { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1; color: var(--success-text); }
.vcard__list { list-style: none; margin: 0; padding: var(--space-2) 0 0; display: grid; border-top: 1px solid var(--border-subtle); }
.vcard__item { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-2); align-items: center; padding: var(--space-2) 0; font-size: var(--text-sm); }
.vcard__item + .vcard__item { border-top: 1px solid var(--border-subtle); }
.vcard__item > .icon { color: var(--success-text); }
.vcard__item.is-failed > .icon, .vcard__item.is-off > .icon { color: var(--danger-text); }
.vcard__val { font-weight: var(--weight-semibold); color: var(--success-text); }
.vcard__item.is-failed .vcard__val, .vcard__item.is-off .vcard__val { color: var(--danger-text); font-weight: var(--weight-medium); }
.qcard { gap: var(--space-3); background: linear-gradient(135deg, color-mix(in srgb, var(--info-solid) 16%, var(--bg-inset)), var(--bg-inset) 70%); }   /* through to the knockouts: the European night colours */
.qcard--qf { background: linear-gradient(135deg, var(--warning-bg), color-mix(in srgb, var(--info-solid) 10%, var(--bg-inset)) 75%); }
.qcard__top { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-3); align-items: center; }
.qcard__pos { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--weight-bold); line-height: 1; color: var(--warning-text); }
.qcard__line { display: grid; min-width: 0; font-size: var(--text-sm); }
.qcard__cup { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--bg-surface); color: var(--warning-text); }
.qcard__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); }
.qcard__opp { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; font-size: var(--text-sm); font-weight: var(--weight-medium); }
.qcard__prize b { font-family: var(--font-display); font-size: var(--text-xl); color: var(--success-text); }
.fcard { gap: var(--space-3); }   /* a pre-season tournament invitation: the rivals, the prizes, what it's for */
.fcard__teams { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.fcard__teams li { display: grid; justify-items: center; gap: var(--space-1); min-width: 0; padding: var(--space-2); border-radius: var(--radius-md); background: var(--bg-surface); font-size: var(--text-xs); font-weight: var(--weight-medium); text-align: center; }
.fcard__teams .truncate { max-width: 100%; }
.fcard__prizes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.fcard__prize { display: grid; justify-items: center; padding: var(--space-2); border-radius: var(--radius-md); background: var(--bg-surface); }
.fcard__place { font-size: var(--text-xs); font-weight: var(--weight-bold); }
.fcard__prize--gold .fcard__place { color: var(--warning-text); } .fcard__prize--silver .fcard__place { color: var(--text-secondary); } .fcard__prize--bronze .fcard__place { color: color-mix(in srgb, var(--warning-text) 60%, var(--danger-text)); }
.fcard__prize b { font-family: var(--font-display); font-size: var(--text-lg); }
.fcard__perks { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin: 0; font-size: var(--text-xs); color: var(--text-secondary); }
.fcard__perks .icon { color: var(--success-text); }
.ocard { grid-template-columns: auto 1fr; align-items: center; gap: var(--space-3); background: linear-gradient(120deg, var(--accent-subtle), var(--bg-inset) 75%); }
.ocard--record { background: linear-gradient(120deg, var(--warning-bg), var(--bg-inset) 75%); }
.ocard__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--bg-surface); color: var(--warning-text); }
.ocard__text { display: grid; min-width: 0; }
.ocard__faces { display: flex; }
.ocard__faces .face + .face { margin-left: -12px; box-shadow: 0 0 0 2px var(--bg-inset); }   /* overlapping, like a team photo */
.ocard__names { font-family: var(--font-display); font-size: var(--text-md); line-height: 1.25; }
.ocard__eyebrow { font-size: var(--text-xs); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-text); }
.ocard--record .ocard__eyebrow { color: var(--warning-text); }
.ocard__big { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the board's verdict in the season finale */
.finale__board { display: grid; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-md); background: var(--moment-panel); border: 1px solid var(--moment-line); }
.finale__board ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.finale__board li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.finale__board li span { flex: 1; }
.finale__board li.is-met .icon { color: var(--trophy-hi); }
.finale__board li.is-failed { color: var(--moment-muted); }
.finale__cups { display: grid; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-md); background: var(--moment-panel); border: 1px solid var(--moment-line); }
.finale__cups ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.finale__cups li { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-sm); }
.finale__cups li .icon { flex-shrink: 0; margin-top: 2px; }
.finale__cups li.is-won .icon { color: var(--trophy-hi); }
.finale__cups li.is-out, .finale__cup-by { color: var(--moment-muted); }
.finale__verdict { margin: var(--space-1) 0 0; font-weight: var(--weight-semibold); }
.finale__board--sacked .finale__verdict { color: var(--trophy-hi); }

/* ---------- Native title bar ---------- */
/* Mobile first: back or your crest, the page title over where the season stands (a week label and a strip of the season's weeks), your cash, Play on the right */
.topbar { gap: var(--space-3); }
.titlebar__title { display: grid; min-width: 0; flex: 1; }
.titlebar__h1 { margin: 0; font-size: var(--text-md); line-height: var(--leading-md); font-weight: var(--weight-bold); }
.topbar .topbar__play { flex-shrink: 0; }
.topbar__play-short { display: none; }   /* a wide screen says "Play week 8" */
/* left: what comes next, the week over the opponent (it opens his club) */
.topbar__next { flex: 1; min-width: 0; display: grid; gap: 1px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; }
button.topbar__next { cursor: pointer; }
button.topbar__next:hover .topbar__next-what > .truncate { text-decoration: underline; text-underline-offset: 3px; }
.topbar__next-when { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.topbar__next-what { display: flex; align-items: center; gap: var(--space-1); min-width: 0; font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: var(--weight-semibold); }
.topbar__next-what .icon { color: var(--text-tertiary); flex-shrink: 0; }
.topbar__next-what > .crest, .topbar__next-what > .icon { margin-right: var(--space-1); }
/* right: one capsule holds the cash and Play */
.topbar__dock { display: inline-flex; align-items: center; gap: var(--space-1); flex-shrink: 0; padding: 3px; border: 1px solid var(--border-subtle); border-radius: var(--radius-full); background: var(--bg-surface); box-shadow: var(--shadow-sm); }
.topbar__dock .money-chip { padding: 0 var(--space-2); border-color: transparent; background: transparent; }
.topbar__dock .money-chip:hover { background: var(--bg-hover); }
.topbar__dock .money-chip.is-neg { background: var(--danger-bg); }
.topbar__dock .topbar__play { height: var(--control-sm); border-radius: var(--radius-full); padding-inline: var(--space-3); }
/* the next match already opens the page: the line arrives once it scrolls away */
.topbar__next { transition: opacity var(--dur-base) var(--ease-out); }
.has-hero:not(.is-scrolled) .topbar__next { opacity: 0; pointer-events: none; }
.money-chip { display: inline-flex; align-items: center; gap: var(--space-1); flex-shrink: 0; height: var(--control-sm); padding: 0 var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-full); background: var(--bg-surface); color: var(--text-primary); font: inherit; font-size: var(--text-sm); cursor: pointer; font-variant-numeric: tabular-nums; }
.money-chip:hover { background: var(--bg-hover); }
.money-chip b { font-weight: var(--weight-semibold); }
.money-chip .icon { color: var(--text-tertiary); }
.money-chip__trend.is-up { color: var(--success-text); }
.money-chip__trend.is-down { color: var(--danger-text); }
.money-chip.is-neg { border-color: var(--danger-border); background: var(--danger-bg); color: var(--danger-text); }
@media (min-width: 640px) { .titlebar__h1 { font-size: var(--text-lg); line-height: var(--leading-lg); } }
.page-header:empty { display: none; }

/* ---------- Assistant chat head (above the tab bar) ---------- */
.chat-head { display: flex; align-items: center; margin-left: var(--space-2); pointer-events: none; }   /* beside the capsule, on the same line */
.chat-head > * { pointer-events: auto; }
.chat-head__btn { position: relative; display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border: 0; border-radius: var(--radius-full); background: var(--bg-raised); box-shadow: var(--shadow-lg), 0 0 0 2px var(--bg-canvas); cursor: pointer; transition: transform var(--dur-fast) var(--ease-out); }
.chat-head__btn:active { transform: scale(0.94); }
.chat-head__btn .face { width: 52px; height: 52px; }
.chat-head__count { position: absolute; top: -2px; right: -2px; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--radius-full); background: var(--danger-solid); color: var(--on-solid); font-size: var(--text-xs); font-weight: var(--weight-bold); box-shadow: 0 0 0 2px var(--bg-canvas); }
@keyframes peek-in { from { opacity: 0; transform: translateY(8px) scale(0.96); } }
.tabbar__icon--face .face { width: 26px; height: 26px; box-shadow: 0 0 0 1.5px currentColor; }
.tabbar__icon--crest .crest { --size: 21px; }   /* your club's crest is the Club tab's icon */

/* ---------- You ---------- */
.opinion { display: flex; gap: var(--space-3); align-items: flex-start; }
.opinion__quote { margin: 0; font-size: var(--text-md); line-height: var(--leading-md); }
.opinion__quote cite { display: block; margin-top: var(--space-2); font-size: var(--text-xs); font-style: normal; color: var(--text-tertiary); }
/* Settings: grouped rows like a phone's settings app */
.settings { display: grid; gap: var(--space-5); max-width: 640px; }
.settings-group { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--bg-surface); overflow: hidden; }
.settings-section { display: grid; gap: var(--space-2); }   /* a labelled group of settings rows */
.settings-section__label { margin: 0; padding-inline: var(--space-4); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-tertiary); }
.settings-group li + li { border-top: 1px solid var(--border-subtle); }
.settings-row { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 52px; padding: 0 var(--space-4); border: 0; background: none; color: var(--text-primary); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.settings-row:hover { background: var(--bg-hover); }
.settings-row__icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--radius-sm); background: var(--bg-inset); color: var(--text-secondary); }
.settings-row__icon .icon { width: 18px; height: 18px; }
.settings-row__label { flex: 1; display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.settings-row__label.settings-row__label--stack { flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; }
.pref-row { min-height: 68px; padding-block: var(--space-3); }   /* a switch that sets how the assistant behaves */
.pref-row .settings-row__icon { width: 36px; height: 36px; border-radius: var(--radius-md); flex-shrink: 0; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.pref-row.is-on .settings-row__icon { background: var(--accent-subtle); color: var(--accent-text); }
.pref-row b { font-weight: var(--weight-semibold); }
.pref-row .settings-toggle { flex-shrink: 0; }
.settings-row__chev { color: var(--text-tertiary); }
.settings-row--danger { color: var(--danger-text); }
.settings-row--danger .settings-row__icon { background: var(--danger-bg); color: var(--danger-text); }
.settings-toggle { position: relative; width: 44px; height: 26px; border-radius: var(--radius-full); background: var(--border-strong); transition: background-color var(--dur-fast) var(--ease-out); }
.settings-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--on-solid); box-shadow: var(--shadow-sm); transition: transform var(--dur-fast) var(--ease-out); }
.settings-toggle.is-on { background: var(--grad-accent); }
.settings-toggle.is-on::after { transform: translateX(18px); }

/* A card's actions on a phone: the main one full width first, the others side by side under it */
@media (max-width: 639px) {
  .card__footer--stack { display: grid; grid-template-columns: 1fr 1fr; }
  .card__footer--stack > .btn:first-child { grid-column: 1 / -1; }
  .card__footer--stack > .btn { width: 100%; margin: 0; justify-content: center; }
}
@media (min-width: 640px) { .card__footer--stack > .btn:first-child { order: 3; } .card__footer--stack > .btn--ghost { margin-right: auto; } }
.content { padding-bottom: calc(var(--tabbar-height) + var(--space-12) + 64px); }   /* room for the chat head */
.agenda--compact .agenda__week:not(.has-cup) .agenda__comp { display: none; }   /* the dashboard's short list: a heading only where two competitions meet */
.bcard__opt.is-picked { box-shadow: inset 0 0 0 2px var(--accent); }
.bcard__opt-title .icon { color: var(--accent-text); vertical-align: -2px; }

/* ---------- Training (Squad › Training) ---------- */
/* A native list: grouped by position, a row per player, growth on the right, tap for the plan sheet */
.train-card { overflow: hidden; }
.train-list { list-style: none; margin: 0; padding: 0; }
.train-group { padding: var(--space-4) var(--card-pad) var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); }
.train-group--warn { display: flex; align-items: center; gap: var(--space-1); color: var(--warning-text); }   /* contracts that end this summer */
.train-row { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 64px; padding: var(--space-3) var(--card-pad); border: 0; border-top: 1px solid var(--border-subtle); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.train-group + li .train-row { border-top: 0; }
.train-group__desc { display: block; margin-top: 2px; font-size: var(--text-xs); font-weight: var(--weight-regular); letter-spacing: 0; text-transform: none; color: var(--text-secondary); }
.train-row:hover { background: var(--bg-hover); }
.train-row:active { background: var(--bg-inset); }
.train-row__who { display: grid; gap: 2px; flex: 1; min-width: 0; }
.train-row__name { display: flex; align-items: center; gap: var(--space-2); min-width: 0; font-weight: var(--weight-semibold); }
.train-row__plan { font-size: var(--text-xs); color: var(--text-secondary); }
.train-row__tag { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin-top: 2px; }   /* badges side by side (potential, status) */
.train-row__tag .badge { height: 20px; font-size: var(--text-xs); }
.train-row__growth { display: grid; justify-items: end; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.train-row__growth b { font-size: var(--text-md); line-height: var(--leading-md); color: var(--success-text); }
.train-row__growth > span { font-size: var(--text-xs); color: var(--text-tertiary); }
.train-row__growth .train-row__season { color: var(--text-secondary); }
.train-row__growth.is-flat b { color: var(--text-tertiary); }
.train-row__growth.is-down b { color: var(--danger-text); }
.train-row__chev { flex-shrink: 0; color: var(--text-tertiary); }
.train-filter { margin: 0; }
/* How training works: a disclosure instead of an always-open table */
.train-how { padding: 0; }
.train-how > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 52px; padding: 0 var(--card-pad); font-weight: var(--weight-semibold); cursor: pointer; list-style: none; }
.train-how > summary::-webkit-details-marker { display: none; }
.train-how[open] > summary .icon { transform: rotate(180deg); }
.train-how__list { margin: 0; padding: 0 var(--card-pad) var(--space-4) calc(var(--card-pad) + var(--space-4)); display: grid; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); }
.train-how__list b { color: var(--text-primary); }
.train-how .table-wrap { padding: 0 0 var(--space-3); }
/* The plan sheet */
.plan-sheet__label { margin: var(--space-4) 0 var(--space-2); }
.plan-opts { display: grid; gap: var(--space-2); }
.plan-opt { display: grid; grid-template-columns: 1fr auto; column-gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-surface); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.plan-opt:hover { background: var(--bg-hover); }
.plan-opt.is-on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.plan-opt__label { font-weight: var(--weight-semibold); display: inline-flex; align-items: center; gap: var(--space-1); }
.plan-opt__label .icon { color: var(--accent-text); }
.plan-opt__metric { grid-column: 1; font-size: var(--text-xs); color: var(--text-tertiary); }
.plan-opt__gain { grid-column: 2; grid-row: 1 / span 2; font-size: var(--text-lg); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.plan-opt__gain.is-best { color: var(--success-text); }
.plan-sheet__why { margin-top: var(--space-4); }
.stat-tile__value small { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-tertiary); }
.segmented__count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; margin-left: var(--space-1); padding: 0 5px; border-radius: var(--radius-full); background: var(--bg-inset); color: var(--text-secondary); font-size: var(--text-xs); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.academy-tabs .segmented__item { white-space: nowrap; padding-inline: var(--space-2); }
.segmented__count.is-warn { background: var(--warning-bg); color: var(--warning-text); box-shadow: inset 0 0 0 1px var(--warning-border); }
.segmented__count.is-over { background: var(--danger-bg); color: var(--danger-text); box-shadow: inset 0 0 0 1px var(--danger-border); }   /* over the limit: a transfer stop */

/* Academy: the youth list reuses the training rows; prospects are cards with a deadline */
.youth-gain { font-size: var(--text-xs); color: var(--success-text); }
.youth-form { display: flex; gap: var(--space-1); margin-bottom: var(--space-3); }
.prospects { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-3); }
.prospect { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--bg-surface); box-shadow: var(--shadow-xs); }
.prospect.is-urgent { border-color: var(--warning-border); }
.prospect__head { display: flex; align-items: center; gap: var(--space-3); margin: calc(-1 * var(--space-2)); padding: var(--space-2); width: calc(100% + 2 * var(--space-2)); border: 0; border-radius: var(--radius-md); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.prospect__head:hover { background: var(--bg-hover); }
.prospect__who { display: grid; gap: 2px; flex: 1; min-width: 0; }
.prospect__name { display: flex; align-items: center; gap: var(--space-2); min-width: 0; font-weight: var(--weight-semibold); font-size: var(--text-md); }
.prospect__meta { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--text-secondary); }
.prospect__meta b { color: var(--text-primary); }
.prospect__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); }
.prospect__when { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); color: var(--text-tertiary); }
.prospect.is-urgent .prospect__when { color: var(--warning-text); }
.plan-sheet__pot { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-1); }
.modal__footer--split .btn--primary { margin-left: auto; }
.modal__footer--split { position: sticky; bottom: calc(-1 * var(--space-6)); z-index: 1; margin: var(--space-5) calc(-1 * var(--space-6)) calc(-1 * var(--space-6)); padding: var(--space-4) var(--space-6) var(--space-6); background: var(--bg-raised); border-top: 1px solid var(--border-subtle); }   /* promote stays in reach on a long sheet */
@media (max-width: 639px) {
  .prospects { grid-template-columns: minmax(0, 1fr); }
  .modal__footer--split { flex-direction: row; flex-wrap: wrap; bottom: calc(-1 * var(--space-5)); margin: var(--space-4) calc(-1 * var(--space-5)) calc(-1 * var(--space-5)); padding: var(--space-3) var(--space-5) calc(var(--space-4) + env(safe-area-inset-bottom)); row-gap: 0; }
  .modal__footer--split .btn { width: auto; flex: 1; }
  .modal__footer--split .btn--primary { flex-basis: 100%; order: -1; margin-left: 0; }
}

/* An offer you can't refuse: a gold-edged offer row with the warning line */
.offer.offer--huge { margin-bottom: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--warning-border); border-radius: var(--radius-md); background: var(--warning-bg); }
.offer__huge { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: var(--space-2); padding-bottom: var(--space-3); border-bottom: 1px solid var(--warning-border); font-size: var(--text-sm); color: var(--warning-text); }
.offer__huge .icon { flex-shrink: 0; margin-top: 2px; }

/* Player screen: a profile sheet. Hero with four key numbers, compact alerts, tabs, sections and a
   fixed action bar (three tiles for your own players). */
.modal--player { --pad: var(--space-6); width: min(600px, 100%); padding: 0; display: flex; flex-direction: column; overflow-x: hidden; }
.player-hero { padding: var(--pad) var(--pad) var(--space-4); background: linear-gradient(180deg, var(--bg-inset), var(--bg-raised)); border-bottom: 1px solid var(--border-subtle); }
.player-hero__top { display: flex; align-items: flex-start; gap: var(--space-4); }
.player-hero__who { display: grid; gap: var(--space-1); flex: 1; min-width: 0; padding-top: var(--space-1); }
.player-hero__name { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.player-hero__name { align-items: flex-start; }
.player-hero__name .pos { margin-top: 3px; flex-shrink: 0; }
.player-hero__name .modal__title { margin: 0; overflow-wrap: anywhere; }
.player-hero__meta { display: flex; align-items: center; gap: var(--space-1); margin: 0; font-size: var(--text-sm); color: var(--text-secondary); }
.player-hero__meta .pos { flex-shrink: 0; margin-right: var(--space-1); }
.player-hero__status { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-1); }
.player-hero__tools { display: flex; align-items: center; gap: var(--space-1); margin: calc(-1 * var(--space-2)) calc(-1 * var(--space-2)) 0 0; }
.player-kpis, .kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-raised); }
.player-kpi, .kpi { display: grid; gap: 1px; min-width: 0; padding: var(--space-2) var(--space-3); text-align: center; }
.player-kpi + .player-kpi, .kpi + .kpi { border-left: 1px solid var(--border-subtle); }
.player-kpi__label, .kpi__label { font-size: var(--text-xs); color: var(--text-tertiary); }
.player-kpi__value, .kpi__value { font-size: var(--text-md); line-height: var(--leading-md); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-kpi__sub, .kpi__sub { font-size: var(--text-xs); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-alerts { list-style: none; margin: var(--space-4) var(--pad) 0; padding: 0; display: grid; gap: var(--space-2); }
.player-alert { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--bg-inset); font-size: var(--text-sm); }
.player-alert > .icon { flex-shrink: 0; color: var(--text-tertiary); }
.player-alert__text { flex: 1 1 180px; min-width: 0; }
.player-alert--danger { background: var(--danger-bg); } .player-alert--danger > .icon { color: var(--danger-text); }
.player-alert--warning { background: var(--warning-bg); } .player-alert--warning > .icon { color: var(--warning-text); }
.player-alert--success { background: var(--success-bg); } .player-alert--success > .icon { color: var(--success-text); }
.player-alert--info { background: var(--info-bg); } .player-alert--info > .icon { color: var(--info-text); }
.player-tabs { position: sticky; top: 0; z-index: 2; margin-top: var(--space-2); padding: var(--space-2) var(--pad); background: var(--bg-raised); }   /* stays in reach while the sheet scrolls */
.player-body { display: grid; gap: var(--space-6); padding: var(--space-3) var(--pad) var(--pad); }
.player-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Every section: a title with a short summary or one small action on the right, then plain rows. */
.player-sec__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--control-sm); margin-bottom: var(--space-1); }
.player-sec__title { margin: 0; }
.player-sec__aside { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); white-space: nowrap; }
.player-sec__note { margin: var(--space-3) 0 0; font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--text-secondary); }
.player-sec__act { margin-top: var(--space-2); }
.player-sec__foot { margin: 0; }
.player-sec .rating-run { margin: var(--space-2) 0 var(--space-1); }
.rating-run__avg { font-size: var(--text-xs); color: var(--text-tertiary); }
.rating-run__avg b { color: var(--text-primary); font-weight: var(--weight-semibold); }
.happy-row__val { display: inline-flex; align-items: center; gap: var(--space-3); }
.happy-row__meter { width: 72px; }
.player-sec .happy__why { margin: var(--space-2) 0 0; }
.player-traits { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.player-traits li { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-sm); }
.player-traits li > .icon { flex-shrink: 0; margin-top: 2px; color: var(--info-text); }
.player-traits li > span { display: grid; gap: 1px; }
.player-traits li > span > span { color: var(--text-secondary); }
.player-plan { border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.player-foot { position: sticky; bottom: 0; z-index: 1; display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: auto; padding: var(--space-4) var(--pad); background: var(--bg-raised); border-top: 1px solid var(--border-subtle); }
.player-foot--acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.player-act { display: grid; justify-items: center; gap: 2px; min-height: 64px; padding: var(--space-2); border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-surface); color: var(--text-primary); font: inherit; cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out); }
.player-act:hover:not(:disabled) { background: var(--bg-hover); }
.player-act:disabled { opacity: 0.5; cursor: not-allowed; }
.player-act > .icon { color: var(--accent-text); }
.player-act__label { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.player-act__sub { font-size: var(--text-xs); color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.player-act--danger > .icon, .player-act--danger .player-act__label { color: var(--danger-text); }
@media (max-width: 639px) {
  .modal--player { --pad: var(--space-4); max-height: 92vh; padding: 0; }
  .player-kpi, .kpi { padding: var(--space-2) var(--space-1); }
  .player-kpi__value, .kpi__value { font-size: var(--text-sm); }
  .player-foot { padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom)); }
  .player-foot:not(.player-foot--acts) { flex-direction: column-reverse; }
  .player-foot:not(.player-foot--acts) .btn { width: 100%; }
}

/* Stadium: the ground as the hero, tabs, facilities as a list with a sheet each */
.stadium-hero { margin: calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) var(--space-3); overflow: hidden; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.stadium-hero .stadium-art { border-radius: 0; }
.stadium-card .kpis { margin-top: 0; }
.stadium-hero__sum { margin: 0 0 var(--space-3); font-size: var(--text-xs); color: var(--text-tertiary); }
.list-link { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 60px; padding: var(--space-3) var(--card-pad); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.list-link > .icon:first-child { color: var(--accent-text); flex-shrink: 0; }
.list-link:hover { background: var(--bg-hover); }
.list-link__text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.ticket { display: grid; gap: var(--space-4); }
.ticket__price { display: flex; align-items: center; justify-content: center; gap: var(--space-5); }
.ticket__value { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1; color: var(--text-secondary); }
.ticket__value b { font-size: 48px; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.ticket__est { margin: 0 0 calc(-1 * var(--space-2)); }
.ticket__est2 { display: grid; grid-template-columns: 1fr auto; gap: var(--space-4); align-items: end; padding: var(--space-3); border-radius: var(--radius-md); background: var(--bg-inset); }   /* the estimate: the crowd on its bar, the gate beside it */
.ticket__crowd { display: grid; gap: var(--space-1); min-width: 0; }
.ticket__crowd b, .ticket__gate b { font-family: var(--font-display); font-size: var(--text-xl); }
.ticket__gate { display: grid; justify-items: end; gap: var(--space-1); }
.ticket__best { justify-self: center; }
.ticket__best .icon { color: var(--warning-text); }
.ticket__best-ok { display: flex; align-items: center; justify-content: center; gap: var(--space-1); margin: 0; font-size: var(--text-xs); color: var(--success-text); }
.ground-health { display: grid; gap: var(--space-2); }   /* the stadium card: how full the ground gets, and what to do about it */
.ground-health__top { display: flex; justify-content: space-between; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); }
.ground-health__top b { color: var(--text-primary); }
.ground-health__tip { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; font-size: var(--text-sm); }
.ground-health__tip .icon { flex: none; margin-top: 2px; }
.ground-health__tip--warning { color: var(--warning-text); } .ground-health__tip--success { color: var(--success-text); } .ground-health__tip--info { color: var(--text-secondary); }
.ground-health__facts { margin: 0; font-size: var(--text-xs); color: var(--text-tertiary); }
.kpis--3, .ticket__est { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpis--3 { margin: 0; }
.facility-list, .expansion-list { list-style: none; margin: 0; padding: 0; }
.facility-row { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 72px; padding: var(--space-3) var(--card-pad); border: 0; border-top: 1px solid var(--border-subtle); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.facility-list li:first-child .facility-row { border-top: 0; }
.facility-row:hover { background: var(--bg-hover); }
.facility-row:active { background: var(--bg-inset); }
.facility-row__art { flex-shrink: 0; width: 92px; overflow: hidden; border-radius: var(--radius-sm); border: 1px solid var(--border-subtle); }
.facility-row__art .facility__art { border-bottom: 0; }
.facility-row.is-built .facility__art { background: var(--accent-subtle); }
.facility-row__who { display: grid; gap: 2px; flex: 1; min-width: 0; }
.facility-row__name { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-weight: var(--weight-semibold); }
.facility-row__earn { font-size: var(--text-xs); color: var(--text-secondary); }
.facility-row__earn.is-off { color: var(--text-tertiary); font-weight: var(--weight-regular); }
.facility-row__status .badge { height: 20px; font-size: var(--text-xs); }
.facility-row__cost { font-size: var(--text-xs); color: var(--text-primary); font-weight: var(--weight-semibold); }
.facility-sheet__art { position: relative; overflow: hidden; margin-bottom: var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--border-subtle); }
.facility-sheet__art .facility__art { background: var(--accent-subtle); border-bottom: 0; }
.facility-reqs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); font-size: var(--text-sm); color: var(--danger-text); }
.facility-reqs li { display: flex; align-items: center; gap: var(--space-2); }
.facility-reqs li.is-met { color: var(--success-text); }
.facility-sheet__why { align-self: center; margin-right: auto; }
.expansion { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--border-subtle); border-radius: var(--radius-sm); outline-offset: 2px; }
.expansion:first-child { border-top: 0; padding-top: 0; }
.expansion__who { display: grid; gap: 2px; flex: 1; min-width: 0; }
@media (max-width: 639px) { .facility-sheet__why { flex-basis: 100%; order: -2; margin: 0 0 var(--space-2); } }

.stadium-layout, .stadium-layout__side, .stadium-layout__main { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
@media (min-width: 960px) {
  .stadium-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
  .stadium-layout__side { position: sticky; top: calc(var(--topbar-height) + 48px + var(--space-4)); }   /* the drawing stays in view for expansion previews */
}

/* League: the league named in one line (tap to switch), a chip back to your own league */
.league-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
.league-head__pick { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; margin-left: calc(-1 * var(--space-2)); padding: 0 var(--space-2); border: 0; border-radius: var(--radius-md); background: none; color: var(--text-primary); font: inherit; cursor: pointer; }
.league-head__pick:hover { background: var(--bg-hover); }
.league-head__name { font-family: var(--font-display); font-size: var(--text-xl); line-height: var(--leading-xl); font-weight: var(--weight-bold); }
.league-head__pick > .icon { color: var(--text-tertiary); }
.league-head__meta { flex-basis: 100%; order: 3; margin-top: calc(-1 * var(--space-2)); font-size: var(--text-xs); color: var(--text-tertiary); }
.league-head__home { margin-left: auto; }
.league-head__pick > .icon:first-child { color: var(--accent-text); }
.comp-row__icon { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: var(--radius-full); background: var(--accent-subtle); color: var(--accent-text); }
.league-rules { display: grid; gap: var(--space-3); padding: 0 var(--card-pad) var(--card-pad); }
.league-rules p { margin: 0; }
.league-sheet { margin: var(--space-3) calc(-1 * var(--space-6)) 0; }
.league-row.is-on { background: var(--accent-subtle); }
.league-row__check { color: var(--accent-text); flex-shrink: 0; }
.league-row .train-row__name .badge { height: 20px; font-size: var(--text-xs); }
@media (max-width: 639px) { .league-sheet { margin-inline: calc(-1 * var(--space-5)); } }

.round-nav--bar { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-subtle); }
.round-nav--bar .round-nav__label { display: grid; justify-items: center; line-height: 1.2; }
.round-nav--bar .round-nav__label span { font-size: var(--text-xs); color: var(--text-tertiary); font-weight: var(--weight-regular); }
.mcards { list-style: none; margin: 0; padding: 0; }
.mcard { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-3) var(--card-pad); border: 0; border-top: 1px solid var(--border-subtle); background: none; color: inherit; font: inherit; text-align: left; }
.mcards > li:first-child .mcard, .mcards > .mcard:first-child { border-top: 0; }
.mcard.is-mine { box-shadow: inset 3px 0 0 var(--accent); background: var(--accent-subtle); }
.cash-card__teams { display: grid; gap: var(--space-1); flex: 1; min-width: 0; }
.cash-card__team { display: flex; align-items: center; gap: var(--space-2); min-width: 0; font-size: var(--text-sm); color: var(--text-secondary); }
.cash-card__team.is-won { color: var(--text-primary); font-weight: var(--weight-semibold); }
.cash-card__team.is-me { color: var(--text-primary); }
.cash-card__goals { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: var(--weight-semibold); }
.cash-card__when { font-size: var(--text-xs); color: var(--text-tertiary); }

.scorer.is-me { background: var(--accent-subtle); }
.scorer__rank { width: 20px; flex-shrink: 0; text-align: center; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.scorers li:first-child .train-row { border-top: 0; }
.scorer__goals { display: grid; justify-items: end; flex-shrink: 0; }
.scorer__goals b { font-size: var(--text-lg); line-height: var(--leading-lg); font-variant-numeric: tabular-nums; }
.scorer__goals span { font-size: var(--text-xs); color: var(--text-tertiary); }
@media (min-width: 960px) { .academy-tabs { max-width: 480px; } }   /* page segmented tabs: compact on wide screens */

/* Finances: the balance as the hero, line lists, weeks that open, budget bars */
.fin-hero { display: grid; gap: 2px; margin-bottom: var(--space-4); }
.fin-hero__label { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-tertiary); }
.fin-hero__cash { font-family: var(--font-display); font-size: 44px; line-height: 1.05; font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.fin-hero__delta { font-size: var(--text-sm); color: var(--text-secondary); }
.fin-graph { display: block; width: 100%; height: 64px; margin-top: var(--space-3); }
.fin-graph__line { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.fin-graph__area { fill: var(--accent-subtle); }
.fin-graph.is-neg .fin-graph__line { stroke: var(--danger-solid); }
.fin-graph.is-neg .fin-graph__area { fill: var(--danger-bg); }
.fin-graph__zero { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.kpis--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
/* the cash card's quick reads: the season so far and the wage bill against income */
.fin-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.fin-chip { display: inline-flex; align-items: baseline; gap: var(--space-2); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); background: var(--bg-inset); font-size: var(--text-xs); color: var(--text-secondary); }
.fin-chip b { font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.fin-chip--good b { color: var(--success-text); } .fin-chip--warn b { color: var(--warning-text); } .fin-chip--bad b { color: var(--danger-text); }
/* a typical week: one bar in, one bar out, each split by source, with its legend */
.fin-stack { display: grid; gap: var(--space-2); }
.fin-stack + .fin-stack { margin-top: var(--space-5); }
.fin-stack__head { display: flex; justify-content: space-between; font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.fin-stack__head b { font-variant-numeric: tabular-nums; }
.fin-stack__bar { display: flex; gap: 2px; min-width: 8%; height: 14px; border-radius: var(--radius-full); overflow: hidden; }
.fin-stack__seg { display: block; min-width: 3px; }
.fin-stack__seg--in-0 { background: var(--g-500); } .fin-stack__seg--in-1 { background: var(--g-200); } .fin-stack__seg--in-2 { background: var(--g-700); } .fin-stack__seg--in-3 { background: var(--info-solid); } .fin-stack__seg--in-4 { background: var(--g-300); }
.fin-stack__seg--out-0 { background: var(--danger-solid); } .fin-stack__seg--out-1 { background: var(--warning-solid); } .fin-stack__seg--out-2 { background: color-mix(in srgb, var(--danger-solid) 50%, var(--warning-solid)); } .fin-stack__seg--out-3 { background: var(--text-tertiary); }
.fin-stack__legend { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.fin-stack__legend li { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-2); align-items: center; font-size: var(--text-sm); color: var(--text-secondary); }
.fin-stack__legend b { color: var(--text-primary); font-weight: var(--weight-medium); }
.fin-stack__dot { width: 10px; height: 10px; border-radius: 3px; }
.fin-net { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-top: var(--space-5); }
.fin-net > div { display: grid; gap: 2px; padding: var(--space-3); border-radius: var(--radius-md); background: var(--bg-inset); }
.fin-net span { font-size: var(--text-xs); color: var(--text-secondary); }
.fin-net b { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.1; font-variant-numeric: tabular-nums; }
.pool-filters { display: grid; gap: var(--space-2); }   /* Transfers › Scouting: starred or all, the age, then the positions */
.pool-filters__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.pool-filters .chips { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
.train-empty { margin: 0; padding: var(--card-pad); text-align: center; }   /* a training filter with nobody in it */
.xwin { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--bg-surface); border: 1px solid var(--border-subtle); }   /* Transfers: the window, open or shut */
.xwin.is-open { background: linear-gradient(135deg, var(--success-bg), var(--bg-surface) 70%); border-color: var(--success-border); }
.xwin__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-full); background: var(--bg-inset); color: var(--text-tertiary); }
.xwin.is-open .xwin__icon { color: var(--success-text); background: var(--bg-surface); }
.xwin__text { display: grid; min-width: 0; font-size: var(--text-sm); }
.xwin__strip { grid-column: 1 / -1; display: flex; gap: 2px; height: 8px; margin-top: var(--space-1); }
.xwin__wk { flex: 1; border-radius: 2px; background: var(--border-subtle); }
.xwin__wk.is-open { background: color-mix(in srgb, var(--success-solid) 45%, transparent); }
.xwin__wk.is-past { opacity: 0.45; }
.xwin__wk.is-now { background: var(--text-primary); opacity: 1; transform: scaleY(1.5); }
.fin-pending { display: grid; gap: var(--space-2); margin-top: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); background: var(--bg-inset); }   /* the cash card: money that moved since the last statement */
.fin-pending__head { display: flex; justify-content: space-between; font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.fin-pending__head b { font-variant-numeric: tabular-nums; }
.fin-pending__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.fin-pending__list li { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-2); align-items: center; font-size: var(--text-sm); color: var(--text-secondary); }
.fin-pending__list .icon { color: var(--text-tertiary); }
.fin-pending__note { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); color: var(--text-tertiary); }
.window-mark { display: inline-flex; }
.segmented__mark { display: inline-flex; align-items: center; margin-left: var(--space-1); color: var(--text-tertiary); vertical-align: middle; }   /* a quiet icon beside a tab's name (all scouts away) */
.segmented__mark .icon { width: 14px; height: 14px; }   /* the Transfers tab's icon: the market stall with its badge */
.mkt-icon { position: relative; display: inline-flex; }
.mkt-icon__badge { position: absolute; right: -4px; bottom: -3px; display: grid; place-items: center; width: 12px; height: 12px; border-radius: 50%; background: var(--bg-canvas); color: var(--text-primary); box-shadow: inset 0 0 0 1.25px currentColor, 0 0 0 1.5px var(--bg-canvas); }   /* shut: an outline cross, white on the dark bar (the text colour) */
.mkt-icon.is-open .mkt-icon__badge { background: var(--success-solid); color: var(--n-0); box-shadow: 0 0 0 1.5px var(--bg-canvas); }   /* open: filled green, a white tick */
.mkt-icon .mkt-icon__badge .icon, .tabs--page .tabs__item[aria-current="page"] .mkt-icon__badge .icon { width: 9px; height: 9px; stroke-width: 3.5; color: inherit; }   /* the badge keeps its own colour, whatever the tab does to icons */
.xwin__icon .mkt-icon__badge { width: 14px; height: 14px; right: -5px; bottom: -4px; background: var(--bg-inset); box-shadow: inset 0 0 0 1.5px currentColor, 0 0 0 2px var(--bg-inset); }
.xwin__icon .mkt-icon.is-open .mkt-icon__badge { background: var(--success-solid); box-shadow: 0 0 0 2px var(--bg-inset); }
.xwin__icon .mkt-icon .mkt-icon__badge .icon { width: 10px; height: 10px; }
.sstrip { display: grid; gap: var(--space-2); padding: var(--space-2) var(--space-4) var(--space-3); border-bottom: 1px solid var(--border-subtle); }   /* the chat header: the season so far */
.sstrip__top { display: flex; justify-content: space-between; gap: var(--space-2); font-size: var(--text-xs); color: var(--text-secondary); }
.sstrip__top b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.sstrip__row { display: flex; gap: 2px; height: 8px; }
.sstrip__wk { flex: 1; border-radius: 2px; background: var(--border-subtle); }
.sstrip__wk.is-W { background: var(--success-solid); } .sstrip__wk.is-D { background: var(--warning-solid); } .sstrip__wk.is-L { background: var(--danger-solid); }
.sstrip__wk.is-next { background: var(--text-tertiary); transform: scaleY(1.5); }
.fac-sum { display: grid; gap: var(--space-3); }   /* Facilities: the summary card, compact */
.fac-sum__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.fac-sum__big { display: flex; align-items: baseline; gap: var(--space-2); }
.fac-sum__big b { font-family: var(--font-display); font-size: 30px; line-height: 1.05; }
.fac-sum__big span { font-size: var(--text-sm); color: var(--text-secondary); }
.fac-sum__net { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.fac-sum__net.is-good { background: var(--success-bg); color: var(--success-text); } .fac-sum__net.is-bad { background: var(--danger-bg); color: var(--danger-text); }
.fac-sum__bars { display: grid; gap: var(--space-1); }
.fac-sum__bars > div { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--space-2); align-items: center; font-size: var(--text-xs); color: var(--text-secondary); }
.fac-sum__bars b { color: var(--text-primary); font-size: var(--text-xs); min-width: 48px; text-align: right; }
.fac-sum__track { height: 6px; border-radius: var(--radius-full); background: var(--border-subtle); overflow: hidden; }
.fac-sum__fill { display: block; height: 100%; border-radius: inherit; }
.fac-sum__fill--in { background: var(--grad-accent); } .fac-sum__fill--out { background: var(--grad-danger); }
.fac-sum__squad { list-style: none; margin: 0; padding: var(--space-3) 0 0; border-top: 1px solid var(--border-subtle); display: flex; flex-wrap: wrap; gap: var(--space-2); }   /* what the squad facilities give: players, not cash */
.fac-sum__squad li { display: inline-flex; align-items: center; gap: var(--space-1); padding: 3px var(--space-2); border-radius: var(--radius-full); background: var(--bg-inset); font-size: var(--text-xs); color: var(--text-secondary); }
.fac-sum__squad li > .icon { color: var(--accent-text); }
.fac-sum__facts { margin: 0; font-size: var(--text-xs); color: var(--text-tertiary); }
.fin-lines { list-style: none; margin: 0; padding: 0; }
.fin-line { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--border-subtle); font-size: var(--text-sm); }
.fin-line:first-child { border-top: 0; padding-top: 0; }
.fin-line > .icon { flex-shrink: 0; color: var(--text-tertiary); }
.fin-line__label { display: grid; flex: 1; min-width: 0; }
.fin-line__label span { font-size: var(--text-xs); color: var(--text-tertiary); }
.fin-line b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-line--total { border-top: 1px solid var(--border-default); font-weight: var(--weight-semibold); }
.fin-line--total b { font-size: var(--text-md); }
.fin-weeks { list-style: none; margin: 0; padding: 0; }
.fin-weeks > li + li { border-top: 1px solid var(--border-subtle); }
.fin-week > summary { display: flex; align-items: center; gap: var(--space-3); min-height: 60px; padding: var(--space-2) var(--card-pad); list-style: none; cursor: pointer; }
.fin-week > summary::-webkit-details-marker { display: none; }
.fin-week > summary:hover { background: var(--bg-hover); }
.fin-week__when { display: grid; flex: 1; min-width: 0; }
.fin-week__when span { font-size: var(--text-xs); color: var(--text-tertiary); }
.fin-week__net { font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-week__bal { width: 76px; text-align: right; font-size: var(--text-xs); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.fin-week__chev { flex-shrink: 0; color: var(--text-tertiary); transition: transform var(--dur-fast) var(--ease-out); }
.fin-week[open] .fin-week__chev { transform: rotate(180deg); }
.fin-week[open] > summary { background: var(--bg-inset); }
.fin-week__items { list-style: none; margin: 0; padding: var(--space-2) var(--card-pad) var(--space-3); display: grid; gap: var(--space-2); font-size: var(--text-sm); background: var(--bg-inset); }
.fin-week__items li { display: flex; justify-content: space-between; gap: var(--space-3); }
.fin-week__items b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-week__total { padding-top: var(--space-2); border-top: 1px solid var(--border-default); font-weight: var(--weight-semibold); }

/* Transfers: one-line window status, filter block, player rows with the price on the right */
.xfer-filters { display: grid; gap: var(--space-3); }
.xfer-filters > .filters__select { flex: 1 1 120px; min-width: 0; width: auto; }
.xfer-filters:has(> .segmented:not(.segmented--block)) { display: flex; flex-wrap: wrap; align-items: center; }
.xfer-price { display: grid; justify-items: end; flex-shrink: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.xfer-price b { font-size: var(--text-md); line-height: var(--leading-md); }
.xfer-price > span { font-size: var(--text-xs); color: var(--text-tertiary); }
.xfer-row .train-row__plan b { color: var(--text-primary); }
.xfer-star { color: var(--warning-text); display: inline-flex; }
.xfer-dir { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: var(--radius-full); background: var(--bg-inset); color: var(--text-tertiary); }
.xfer-dir--loan { background: var(--info-bg); color: var(--info-text); }
.xfer-dir--in { background: var(--info-bg); color: var(--info-text); }
.xfer-dir--out { background: var(--success-bg); color: var(--success-text); }
.xfer-row .train-row__plan .flag { margin-right: var(--space-1); vertical-align: -1px; }
@media (min-width: 960px) { .xfer-filters { max-width: 640px; } }

/* Squad › Players: List · Skills switch with the sort menu, rating and form on the right of a row */
.squad-controls { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.squad-controls .filters__select { width: auto; min-width: 0; }
.squad-controls .segmented__item { white-space: nowrap; }
.view-switch { flex: 0 0 auto; flex-wrap: nowrap; }
.view-switch .segmented__item { display: inline-flex; align-items: center; gap: var(--space-1); }
.view-switch .segmented__count { margin-left: 2px; }
.squad-controls__note { margin-left: auto; }
.team-switch { margin-bottom: calc(-1 * var(--space-1)); }
@media (min-width: 640px) { .team-switch { max-width: 420px; } }
@media (max-width: 639px) { .squad-controls .filters__select { flex: 1 1 auto; } .view-switch .segmented__item:not(.is-on) .view-switch__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }   /* a phone: one row; the open view keeps its name, the others are icons */
.squad-rating { display: grid; justify-items: end; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.squad-rating b { font-size: var(--text-lg); line-height: var(--leading-lg); }
.squad-rating > span { font-size: var(--text-xs); color: var(--text-tertiary); white-space: nowrap; }
.squad-rating .squad-form--good { color: var(--success-text); }
.squad-rating .squad-form--bad { color: var(--danger-text); }

.pips--10 { gap: 2px; }
.pips--10 i { width: 6px; }   /* ten levels: thinner pips */
.facility-row__status { display: flex; align-items: center; gap: var(--space-2); margin-top: 2px; }

/* Lineup & tactics: the pitch as the hero, settings rows that open sheets, a ratings grid */
.lineup-alerts { margin: 0; }

/* Career: offer cards (club, size next to yours, facts, deadline and the answer), vacancy rows and a timeline */
.job-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-3); }
.job-card { display: flex; flex-direction: column; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--bg-surface); box-shadow: var(--shadow-xs); overflow: hidden; }
.job-card__head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.job-card__head:hover { background: var(--bg-hover); }
.job-card__who { display: grid; gap: 2px; flex: 1; min-width: 0; }
.job-card__name { font-size: var(--text-md); font-weight: var(--weight-semibold); }
.job-card__meta { display: flex; align-items: center; gap: var(--space-1); min-width: 0; font-size: var(--text-xs); color: var(--text-tertiary); }
.job-card__facts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); padding: 0 var(--space-4) var(--space-3); font-size: var(--text-xs); color: var(--text-secondary); }
.job-card__facts span { display: inline-flex; align-items: center; gap: var(--space-1); }
.job-card__facts .icon { color: var(--text-tertiary); }
.job-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border-subtle); background: var(--bg-inset); }
.job-card__foot .cluster { margin-left: auto; }
.job-card__when { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); color: var(--text-tertiary); }
.job-card__when.is-urgent { color: var(--warning-text); font-weight: var(--weight-semibold); }
.job-size { flex-shrink: 0; padding: 2px var(--space-2); border-radius: var(--radius-full); background: var(--bg-inset); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--text-secondary); white-space: nowrap; }
.job-size.is-up { background: var(--success-bg); color: var(--success-text); }
.job-size.is-down { background: var(--warning-bg); color: var(--warning-text); }
.job-vac { cursor: default; }
.job-vac:hover { background: none; }
.career-line { list-style: none; margin: 0; padding: 0; }
.career-line__item { position: relative; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0 var(--space-3) var(--space-6); }
.career-line__item::before { content: ''; position: absolute; left: 5px; top: 0; bottom: 0; width: 2px; background: var(--border-default); }
.career-line__item:first-child::before { top: 50%; }
.career-line__item:last-child::before { bottom: 50%; }
.career-line__item:only-child::before { display: none; }
.career-line__dot { position: absolute; left: 0; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--bg-raised); box-shadow: inset 0 0 0 2px var(--border-strong); }
.career-line__item.is-now .career-line__dot { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-subtle); }
.career-line__who { display: grid; gap: 2px; flex: 1; min-width: 0; }
@media (max-width: 639px) { .job-cards { grid-template-columns: minmax(0, 1fr); } }

/* Clubs in the match header open their page: the opponent before kick-off is labelled Scout */
.match-hero__team--link { border: 0; background: none; color: inherit; font: inherit; cursor: pointer; border-radius: var(--radius-md); padding: var(--space-2); margin: calc(-1 * var(--space-2)); transition: background-color var(--dur-fast) var(--ease-out); }
.match-hero__team--link:hover { background: var(--bg-hover); }
.match-hero__team--link:active { background: var(--bg-inset); }
.match-hero__team--link .match-hero__name { text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }

/* Manage a facility: what it offers, as toggle tiles (picked, free, locked until a level) */
.range-head { display: flex; justify-content: space-between; align-items: baseline; }
.range-head__count { font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.range-hint { margin: 0 0 var(--space-3); }
.range-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px; }
.range-item { position: relative; display: flex; align-items: center; gap: var(--space-3); min-height: 52px; padding: var(--space-2) var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-surface); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
.range-item:hover:not(:disabled) { background: var(--bg-hover); }
.range-item.is-on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.range-item.is-locked { opacity: 0.55; cursor: not-allowed; border-style: dashed; }
.range-item[data-full] { opacity: 0.75; }
.range-item__icon { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: var(--radius-sm); background: var(--bg-inset); color: var(--text-secondary); }
.range-item.is-on .range-item__icon { background: var(--accent-subtle); color: var(--accent-text); }
.range-item__text { display: grid; gap: 1px; flex: 1; min-width: 0; padding-right: var(--space-5); }
.range-item__label { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.range-item__note { font-size: var(--text-xs); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.range-item__tags { font-size: var(--text-xs); color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.range-item__check { position: absolute; top: 50%; right: var(--space-3); margin-top: -8px; color: var(--accent-text); }
@media (max-width: 639px) { .range-grid { grid-template-columns: minmax(0, 1fr); } }

/* Facility scenes, levels 4-10: a crowd, a canopy, spotlights; a level badge in the corner */
.facility-row__art, .facility-sheet__art { position: relative; }
.facility__lvl { position: absolute; right: 4px; bottom: 4px; padding: 0 5px; border-radius: var(--radius-full); background: var(--bg-raised); box-shadow: 0 0 0 1px var(--border-subtle); color: var(--text-primary); font-size: 10px; font-weight: var(--weight-bold); line-height: 16px; font-variant-numeric: tabular-nums; }
.facility-sheet__art .facility__lvl { right: var(--space-2); bottom: var(--space-2); padding: 2px var(--space-2); font-size: var(--text-xs); }

/* Stadium surroundings: a paved plaza, trees, lit windows */

/* Pre-season tournament: the dashboard card and the final table */
.friendly-card.is-invite { border-color: var(--warning-border); }
.friendly-card > .icon:first-child { color: var(--warning-text); }
/* The pre-season tournament sheet */
.fr { position: relative; display: grid; gap: var(--space-6); }
.fr__close { position: absolute; top: calc(-1 * var(--space-2)); right: calc(-1 * var(--space-2)); z-index: 1; }
.fr-hero { display: flex; align-items: center; gap: var(--space-4); margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) 0; padding: var(--space-6) var(--space-12) var(--space-5) var(--space-6); border-bottom: 1px solid var(--border-subtle);
  background: radial-gradient(120% 140% at 0% 0%, var(--warning-bg), transparent 70%); border-radius: var(--radius-xl) var(--radius-xl) 0 0; flex-wrap: wrap; }
.fr-hero__cup .museum-cup { width: 72px; height: 72px; }
.fr-hero__text { display: grid; gap: var(--space-1); flex: 1; min-width: 0; }
.fr-hero__title { margin: 0; font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-2xl); font-weight: var(--weight-bold); }
.fr-hero__facts { font-size: var(--text-sm); color: var(--text-secondary); }
.fr-hero__result { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--text-primary); }
.fr-hero__result .icon { color: var(--warning-text); }
.fr-hero__status { margin-top: var(--space-1); }
.fr-sec { display: grid; gap: var(--space-3); }
.fr-sec__title { margin: 0; }
.fr-games { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-raised); }
.fr-game { display: flex; align-items: center; gap: var(--space-3); min-height: 64px; padding: var(--space-2) var(--space-3); border-top: 1px solid var(--border-subtle); }
.fr-game:first-child { border-top: 0; }
.fr-game__n { display: grid; justify-items: center; width: 40px; flex-shrink: 0; }
.fr-game__n b { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1; }
.fr-game__n span { font-size: var(--text-xs); color: var(--text-tertiary); }
.fr-game__club { display: flex; align-items: center; gap: var(--space-3); flex: 1; min-width: 0; padding: var(--space-1); margin: calc(-1 * var(--space-1)); border: 0; border-radius: var(--radius-sm); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.fr-game__club:hover { background: var(--bg-hover); }
.fr-game__who { display: grid; gap: 1px; min-width: 0; }
.fr-game__who .flag { vertical-align: -1px; }
.fr-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: var(--space-2); }
.fr-podium__step { display: grid; justify-items: center; gap: 2px; padding: var(--space-3) var(--space-2); border-radius: var(--radius-md) var(--radius-md) var(--radius-sm) var(--radius-sm); background: var(--bg-inset); text-align: center; }
.fr-podium__step--1 { padding-top: var(--space-5); background: var(--warning-bg); }
.fr-podium__step .museum-cup { width: 36px; height: 36px; }
.fr-podium__step--1 .museum-cup { width: 48px; height: 48px; }
.fr-podium__step b { font-size: var(--text-md); font-variant-numeric: tabular-nums; }
.fr-podium__step span { font-size: var(--text-xs); color: var(--text-secondary); }
.fr-podium__step.is-me { box-shadow: inset 0 0 0 2px var(--accent); }
.fr-perks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.fr-perk { display: grid; align-content: start; gap: 2px; padding: var(--space-3); border-radius: var(--radius-md); background: var(--bg-inset); }
.fr-perk__icon { display: grid; place-items: center; width: 28px; height: 28px; margin-bottom: var(--space-1); border-radius: var(--radius-full); background: var(--success-bg); color: var(--success-text); }
.fr-perk b { font-size: var(--text-sm); }
.fr-perk > span:last-child { font-size: var(--text-xs); color: var(--text-secondary); }
.fr-foot { position: sticky; bottom: calc(-1 * var(--space-6)); z-index: 1; margin: var(--space-6) calc(-1 * var(--space-6)) calc(-1 * var(--space-6)); padding: var(--space-4) var(--space-6); background: var(--bg-raised); border-top: 1px solid var(--border-subtle); }
@media (max-width: 639px) {
  .fr-hero { margin: calc(-1 * var(--space-5)) calc(-1 * var(--space-5)) 0; padding: var(--space-5) var(--space-12) var(--space-4) var(--space-5); }
  .fr-foot { bottom: calc(-1 * var(--space-5)); margin: var(--space-5) calc(-1 * var(--space-5)) calc(-1 * var(--space-5)); padding: var(--space-4) var(--space-5); }
}
.friendly-table { display: grid; gap: 2px; }
.friendly-table__row { display: grid; grid-template-columns: 20px auto minmax(0, 1fr) auto 28px; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); font-size: var(--text-sm); }
.friendly-table__row.is-me { background: var(--accent-subtle); font-weight: var(--weight-semibold); }
.friendly-table__row b { text-align: right; }

/* Development type on the player sheet (early, normal or late bloomer) */

/* Pre-match: each club as one centred block (crest, name, country or place, form dots) */
.match-hero .prematch__club { flex-direction: column; justify-content: flex-start; align-items: center; gap: var(--space-2); text-align: center; }
.match-hero .prematch__club.match-hero__team--home { justify-content: flex-start; text-align: center; }
.match-hero .prematch__club.match-hero__team--home .crest { order: 0; }
.prematch__info { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); color: var(--text-secondary); }
.match-hero--cup .prematch__info { color: var(--cup-muted); }
.prematch__form { display: inline-flex; }
.prematch-hero .match-hero__board { align-items: start; }
.prematch-hero .match-hero__center { align-self: center; margin-top: calc(-1 * var(--space-6)); }

/* Scouting a player from his sheet */
.scout-check { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); flex-wrap: wrap; margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); }
.scout-check__head { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); color: var(--text-secondary); }

/* Choose a player for a position: rows with the role fit on the right */
.pick-list { margin: 0 calc(-1 * var(--space-6)); }
@media (max-width: 639px) { .pick-list { margin-inline: calc(-1 * var(--space-5)); } }
.pick-row.is-on { background: var(--accent-subtle); }
.pick-fit { position: relative; display: grid; justify-items: end; flex-shrink: 0; width: 72px; padding-bottom: 6px; font-variant-numeric: tabular-nums; }
.pick-fit b { font-size: var(--text-lg); line-height: var(--leading-lg); }
.pick-fit span { font-size: var(--text-xs); color: var(--text-tertiary); white-space: nowrap; }
.pick-fit i { position: absolute; right: 0; bottom: 0; height: 3px; border-radius: var(--radius-full); background: var(--border-strong); }
.pick-fit.is-best b { color: var(--success-text); }
.pick-fit.is-best i { background: var(--success-solid); }
.pick-fit.is-weak b, .pick-fit.is-weak span { color: var(--warning-text); }
.pick-fit.is-weak i { background: var(--warning-solid); }
.pick-out { display: flex; align-items: flex-start; gap: var(--space-2); margin-top: var(--space-3); }
.pick-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }

/* Why join: a short list of benefits with icons */

/* The other club in the dashboard's next match opens its page */

/* Club names open their page everywhere; reports get their own button */
.club-link { min-width: 0; max-width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.club-link:hover .truncate { text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 2px; }
.agenda__club { flex: 1 1 auto; }
.club-link .truncate { text-decoration: underline dotted; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }   /* a quiet sign the name opens the club */
.agenda__report { white-space: nowrap; flex-shrink: 0; }
.agenda__score { white-space: nowrap; }
.agenda__report { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; min-height: 32px; padding: 0 var(--space-1) 0 var(--space-2); border: 0; border-radius: var(--radius-sm); background: none; color: inherit; font: inherit; cursor: pointer; }
.agenda__report:hover { background: var(--bg-hover); }
.agenda__report > .icon { color: var(--text-tertiary); }
.cash-card__go-btn { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border: 0; border-radius: var(--radius-full); background: none; color: var(--text-tertiary); cursor: pointer; }
.cash-card__go-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.cash-card__team .club-link { flex: 1; }
.cup-tie__report { display: inline-flex; align-items: center; gap: 2px; margin-top: var(--space-1); padding: 0; border: 0; background: none; color: var(--accent-text); font: inherit; font-size: var(--text-xs); font-weight: var(--weight-semibold); cursor: pointer; }
.cup-tie__team .club-link { flex: 1; }
.club-link__chev { display: inline-flex; flex-shrink: 0; color: var(--text-tertiary); margin-left: -2px; }

/* ---------- The academy campus ---------- */
.campus { display: grid; gap: var(--space-4); }
.campus__scene { position: relative; margin: calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) 0; overflow: hidden; border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom: 1px solid var(--border-subtle); background: linear-gradient(180deg, var(--accent-subtle), transparent 70%); }
.campus__art { display: block; width: 100%; height: auto; border-bottom: 0; }
.campus__hit { fill: transparent; cursor: pointer; }
.campus__hit:hover, .campus__hit:focus-visible { fill: color-mix(in srgb, var(--accent) 10%, transparent); outline: none; }
.campus__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.campus__rating { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-1); font-family: var(--font-display); font-size: var(--text-xl); line-height: 1; }
.academy-stars { display: inline-flex; gap: 2px; }
.academy-stars .icon { color: var(--border-strong); }
.academy-stars .icon.is-on { color: var(--warning-solid); fill: var(--warning-solid); }
.campus__rep { display: grid; justify-items: end; gap: 1px; text-align: right; }
.campus__rep b { font-size: var(--text-md); }
.campus__hint { margin: 0; }
.facility-row__icon { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--bg-inset); color: var(--text-tertiary); }
.facility-row__icon.is-on { background: var(--accent-subtle); color: var(--accent-text); }
.pips--5 i { width: 16px; }
.philosophy { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.philosophy .plan-opt__label .icon { vertical-align: -2px; }
.class-card .plan-sheet__label { padding: var(--space-4) var(--card-pad) var(--space-1); margin: 0; }
.class-list .train-row { min-height: 60px; }
.facility-sheet__art .campus__art { background: var(--accent-subtle); max-height: 180px; }   /* one building: a wide band, not a square */

/* ---------- Contracts and happiness ---------- */
.happy { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.happy__why { display: grid; gap: var(--space-1); margin: var(--space-1) 0 0; padding: 0; list-style: none; font-size: var(--text-xs); color: var(--text-secondary); }
.happy__why li { display: flex; align-items: flex-start; gap: var(--space-2); }
.happy__why .icon { flex-shrink: 0; margin-top: 1px; }
.happy__why .is-good .icon { color: var(--success-text); }
.happy__why .is-bad .icon { color: var(--warning-text); }
.contract-acts { display: grid; gap: var(--space-2); margin-top: var(--space-4); }

/* ---------- How to play ---------- */
.help-chips { display: flex; gap: var(--space-2); margin: 0 calc(-1 * var(--space-6)) var(--space-4); padding: 0 var(--space-6) var(--space-1); overflow-x: auto; scrollbar-width: none; }
.help-chips::-webkit-scrollbar { display: none; }
.help-chips .chip { flex-shrink: 0; }
.help-chips .chip.is-on { background: var(--accent-subtle); border-color: var(--accent-subtle-border); color: var(--accent-text); }
@media (max-width: 639px) { .help-chips { margin-inline: calc(-1 * var(--space-5)); padding-inline: var(--space-5); } }

/* ---------- Chat: filters, the weekly digest, the preview's go button ---------- */
.digest { display: grid; margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.digest__row { display: flex; align-items: center; gap: var(--space-2); width: 100%; padding: var(--space-2) 0; border: 0; border-top: 1px solid var(--border-subtle); background: none; color: inherit; font: inherit; text-align: left; }
button.digest__row { cursor: pointer; }
button.digest__row:hover .digest__text b { color: var(--accent-text); }
.digest li:first-child .digest__row { border-top: 0; }
.digest__text { display: grid; gap: 1px; flex: 1; min-width: 0; font-size: var(--text-sm); }
.digest__text b { font-weight: var(--weight-semibold); }
.digest__text > span { font-size: var(--text-xs); color: var(--text-secondary); }
.digest__row .icon { color: var(--text-tertiary); flex-shrink: 0; }

/* ---------- Another club's page ---------- */
.club-card { display: grid; gap: var(--space-4); }
.club-hero { display: flex; align-items: center; gap: var(--space-4); }
.club-hero__who { display: grid; gap: var(--space-1); min-width: 0; }
.club-hero__who .eyebrow .flag { vertical-align: -1px; }
.club-hero__name { margin: 0; font-family: var(--font-display); font-size: var(--text-xl); line-height: var(--leading-xl); font-weight: var(--weight-bold); overflow-wrap: anywhere; }   /* the title bar has no title: the club names itself here */
.club-hero__place { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.club-card .kpis { margin-top: 0; }
.club-hero__play { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--text-sm); color: var(--text-secondary); }
.club-row { display: flex; align-items: center; }
.club-row .train-row { flex: 1; min-width: 0; }
.club-row .star { flex-shrink: 0; margin-right: var(--space-3); }

.job-vac__need { flex-shrink: 0; max-width: 84px; text-align: right; line-height: var(--leading-xs); }

@media (min-width: 1024px) { .club-grid { grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr); } .club-grid > .club-grid__side { order: 2; position: sticky; top: calc(var(--topbar-height) + var(--space-4)); } }   /* desktop: the squad in front, the club card alongside */

/* How to play: three short points per topic */
.help-points { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.help-points li { display: flex; align-items: flex-start; gap: var(--space-3); }
.help-points__dot { flex-shrink: 0; width: 8px; height: 8px; margin-top: 8px; border-radius: var(--radius-full); background: var(--accent); }
.help-points li > span:last-child { display: grid; gap: 1px; }
.help-points b { font-size: var(--text-md); line-height: var(--leading-md); }
.help-points li > span:last-child > span { font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--text-secondary); }
/* a small ? that opens the topic behind a number */
.rep-label { display: inline-flex; align-items: center; gap: var(--space-1); }
.help-q { display: inline-grid; place-items: center; width: 24px; height: 24px; margin: -4px 0; padding: 0; border: 0; border-radius: var(--radius-full); background: none; color: var(--text-tertiary); cursor: pointer; }
.help-q:hover { background: var(--bg-hover); color: var(--accent-text); }

/* ---------- Your look and your crest (editor sheets) ---------- */
.career-hero__face { position: relative; flex-shrink: 0; padding: 0; border: 0; border-radius: var(--radius-full); background: none; cursor: pointer; }
.career-hero__face:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.career-hero__edit { position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--radius-full); background: var(--bg-raised); color: var(--text-primary); box-shadow: 0 0 0 1px var(--border-default), var(--shadow-xs); }
.career-hero__face:hover .career-hero__edit { color: var(--accent-text); }
.editor-preview { display: flex; justify-content: center; align-items: center; gap: var(--space-5); padding: var(--space-2) 0 var(--space-5); }
.editor-preview .face--xl { width: 104px; height: 104px; }
.editor-preview--crest .crest--xl { width: 88px; height: auto; }
.editor-preview__sizes { display: flex; align-items: center; gap: var(--space-3); }
.editor { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); padding-bottom: var(--space-4); }
.editor-row { min-width: 0; }   /* lets a row of tiles scroll sideways instead of stretching the sheet */
.editor-row__label { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin: 0 0 var(--space-2); }
.editor-row__lock { display: inline-flex; align-items: center; gap: var(--space-1); text-transform: none; letter-spacing: 0; font-weight: var(--weight-medium); color: var(--text-tertiary); }
.editor-row.is-locked .swatches, .editor-row.is-locked .editor-tiles { opacity: 0.45; }
.swatches { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.swatch { width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--radius-full); background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14); cursor: pointer; }
.swatch--pair { background: linear-gradient(135deg, var(--sw) 50%, var(--sw2) 50%); }
.swatch.is-on { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14), 0 0 0 2px var(--bg-raised), 0 0 0 4px var(--accent); }
.swatch:disabled, .editor-tile:disabled { cursor: not-allowed; }
.editor-tiles { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; padding: 2px; }
.editor-tiles::-webkit-scrollbar { display: none; }
.editor-tile { flex-shrink: 0; display: grid; justify-items: center; gap: var(--space-1); width: 76px; padding: var(--space-2) var(--space-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-surface); color: var(--text-secondary); font: inherit; font-size: var(--text-xs); cursor: pointer; }
.editor-tile:hover:not(:disabled) { background: var(--bg-hover); }
.editor-tile.is-on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent-text); font-weight: var(--weight-semibold); }
.editor-tiles--crest .crest--lg { width: 40px; height: auto; }

/* Career: the trophies won in each spell, on their own line */
.career-line__titles { display: flex; align-items: flex-start; gap: var(--space-1); margin-top: 2px; font-size: var(--text-xs); color: var(--text-secondary); }
.career-line__titles .icon { flex-shrink: 0; margin-top: 1px; color: var(--warning-text); }
.career-line__titles b { color: var(--text-primary); font-weight: var(--weight-semibold); }

/* ---------- Digital studio: its perks, the ones you have and the next one ---------- */
.studio-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.studio-perk { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-surface); }
.studio-perk__icon { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: var(--radius-full); background: var(--accent-subtle); color: var(--accent-text); }
.studio-perk__text { display: grid; gap: 2px; flex: 1; min-width: 0; font-size: var(--text-sm); }
.studio-perk__text > span { font-size: var(--text-xs); color: var(--text-secondary); }
.studio-perk__lvl { flex-shrink: 0; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--success-text); }
.studio-perk.is-next { border-style: dashed; background: none; }
.studio-perk.is-next .studio-perk__icon { background: var(--bg-inset); color: var(--text-tertiary); }
.studio-perk.is-next .studio-perk__lvl { color: var(--text-tertiary); }

.xfer-banner { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-3) var(--space-4); border: 1px solid var(--warning-border); border-radius: var(--radius-md); background: var(--warning-bg); color: var(--warning-text); font: inherit; font-size: var(--text-sm); text-align: left; cursor: pointer; }
.xfer-banner > span { flex: 1; min-width: 0; color: var(--text-primary); }
.xfer-banner b { color: var(--warning-text); }
/* the market's filters stick under the switcher while the list scrolls */
.content .xfer-filters--market { position: sticky; top: calc(var(--topbar-height) + 49px); z-index: calc(var(--z-sticky) - 3); margin: 0 calc(-1 * var(--page-pad)); padding: var(--space-1) var(--page-pad) var(--space-2); background: var(--bg-canvas); }
.xfer-tools { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.xfer-tools .xfer-sort { width: auto; min-width: 150px; }
.filter-opts { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ---------- Your channel: followers, the curve, milestones and the best posts ---------- */
.channel__curve { width: 100%; height: 64px; }
.channel__curve polyline { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.channel__miles { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-2); padding: 0; list-style: none; }
.channel__mile { display: inline-flex; align-items: center; gap: var(--space-1); height: 28px; padding: 0 var(--space-3); border-radius: var(--radius-full); background: var(--bg-inset); color: var(--text-secondary); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.channel__mile.is-on { background: var(--success-bg); color: var(--success-text); }
.channel__posts { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.channel__post { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); }
.channel__res { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: var(--weight-bold); background: var(--bg-inset); color: var(--text-secondary); }
.channel__res--W { background: var(--success-bg); color: var(--success-text); }
.channel__res--L { background: var(--danger-bg); color: var(--danger-text); }
.channel__post-text { display: grid; flex: 1; min-width: 0; }
.channel__post-text > span { font-size: var(--text-xs); color: var(--text-tertiary); }
.channel__likes { display: inline-flex; align-items: center; gap: var(--space-1); font-weight: var(--weight-semibold); color: var(--text-secondary); }
.channel__likes .icon { color: var(--danger-text); }

/* ---------- Club › Studio ---------- */
.channel__hero { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-3); }
.channel__big { margin: var(--space-1) 0 2px; font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1; }
.channel__big span { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-secondary); }
/* the facility sheet's way to the Studio page */
.studio-launch__icon { display: grid; place-items: center; width: 96px; height: 96px; border-radius: var(--radius-full); background: var(--moment-panel); color: var(--trophy-hi); }
.studio-launch__icon .icon { width: 44px; height: 44px; }
.finale--studio .finale__foot { display: grid; gap: var(--space-2); }   /* one full-width action, then Later */
.finale--studio .finale__foot .btn { width: 100%; }

/* ---------- Stories like Instagram: a zoom in, a cube between clubs, hold to pause ---------- */
.modal--story { animation: story-open 240ms var(--ease-out) both; perspective: 1400px; isolation: isolate; }
@keyframes story-open { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }
.modal--story .story { position: absolute; inset: 0; backface-visibility: hidden; transform-style: preserve-3d; }
.story--leave-next { transform-origin: 100% 50%; animation: cube-leave-next 400ms cubic-bezier(.4, 0, .2, 1) forwards; }
.story--enter-next { transform-origin: 0% 50%; animation: cube-enter-next 400ms cubic-bezier(.4, 0, .2, 1) forwards; }
.story--leave-prev { transform-origin: 0% 50%; animation: cube-leave-prev 400ms cubic-bezier(.4, 0, .2, 1) forwards; }
.story--enter-prev { transform-origin: 100% 50%; animation: cube-enter-prev 400ms cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes cube-leave-next { from { transform: translateX(0) rotateY(0); } to { transform: translateX(-100%) rotateY(-90deg); } }
@keyframes cube-enter-next { from { transform: translateX(100%) rotateY(90deg); } to { transform: translateX(0) rotateY(0); } }
@keyframes cube-leave-prev { from { transform: translateX(0) rotateY(0); } to { transform: translateX(100%) rotateY(90deg); } }
@keyframes cube-enter-prev { from { transform: translateX(-100%) rotateY(-90deg); } to { transform: translateX(0) rotateY(0); } }
.story.is-paused .story__bar.is-active i { animation-play-state: paused; }
@media (max-width: 639px) { .modal-overlay .modal--story { animation: story-open 220ms var(--ease-out) both; } }
@media (prefers-reduced-motion: reduce) { .modal--story, .story--leave-next, .story--enter-next, .story--leave-prev, .story--enter-prev { animation: none; } }
.flag--inline { vertical-align: -1px; margin-right: 3px; }   /* a flag inside a message's text */

/* Academy › Scouts: the prospects they found, then the scouts and their missions */
.academy-head { margin: var(--space-2) 0 calc(-1 * var(--space-1)); }
.academy-none { display: flex; align-items: center; gap: var(--space-2); margin: 0; }

/* Phones: the title bar and the page tabs scroll away with the page as you read down (--head-y, the
   distance they have travelled, set in app.js) and slide back the moment you scroll up; stopped
   half-way, they settle in or out. Sticky filters follow them. */
@media (max-width: 639px) {   /* their sticky offsets move (not a transform), so a bar in the flow keeps its place and never leaves a gap */
  .topbar { top: calc(-1 * var(--head-y, 0px)); }
  .tabs--page { top: calc(var(--topbar-height) - var(--head-y, 0px)); }
  .content .xfer-filters--market { top: calc(var(--topbar-height) + 45px - var(--head-y, 0px)); }
  body.head-settle .topbar, body.head-settle .tabs--page, body.head-settle .content .xfer-filters--market { transition: top 280ms var(--ease-out); }   /* coming back: a calm slide, never a jump */
}
@media (max-width: 639px) and (prefers-reduced-motion: reduce) { body.head-settle .topbar, body.head-settle .tabs--page, body.head-settle .content .xfer-filters--market { transition: none; } }

/* ---------- Isometric illustrations (js/iso.js): materials and their three shades ---------- */
.iso { background: var(--iso-sky); }
.iso polygon, .iso path, .iso ellipse { stroke: var(--iso-ink); stroke-width: 0.7; stroke-linejoin: round; }
.iso .iso-t { fill: var(--m); }
.iso .iso-y { fill: color-mix(in srgb, var(--m) 84%, var(--iso-shade-1)); }
.iso .iso-x { fill: color-mix(in srgb, var(--m) 66%, var(--iso-shade-1)); }
.iso .iso-grass { --m: var(--iso-grass); } .iso .iso-soil { --m: var(--iso-soil); }
.iso .iso-wall { --m: var(--iso-wall); } .iso .iso-white { --m: var(--iso-white); } .iso .iso-stone { --m: var(--iso-stone); }
.iso .iso-blue { --m: var(--iso-blue); } .iso .iso-glass { --m: var(--iso-glass); } .iso .iso-glow { --m: var(--iso-glow); } .iso .iso-screen { --m: var(--iso-screen); }
.iso .iso-roof { --m: var(--iso-roof); } .iso .iso-gold { --m: var(--iso-gold); } .iso .iso-red { --m: var(--iso-red); } .iso .iso-wood { --m: var(--iso-wood); }
.iso .iso-dark { --m: var(--iso-dark); } .iso .iso-asphalt { --m: var(--iso-asphalt); } .iso .iso-sign { --m: var(--iso-sign); }
.iso .iso-club { --m: var(--club-1, var(--iso-blue)); }
.iso .iso-car-0 { --m: var(--iso-red); } .iso .iso-car-1 { --m: var(--iso-blue); } .iso .iso-car-2 { --m: var(--iso-gold); } .iso .iso-car-3 { --m: var(--iso-white); }
.iso .iso-shadow { fill: var(--iso-shadow); stroke: none; }
.iso .iso-bay { fill: none; stroke: var(--iso-white); stroke-width: 0.8; opacity: 0.8; }
.iso .iso-pole, .iso .iso-trunk { fill: none; stroke: var(--iso-ink); stroke-width: 1; stroke-linecap: round; }
.iso .iso-trunk { stroke: var(--iso-wood); stroke-width: 1.6; }
.iso .iso-lamp { fill: var(--iso-glow); stroke: var(--iso-ink); stroke-width: 0.7; }
.iso .iso-bush { fill: var(--iso-bush); stroke: var(--iso-ink); stroke-width: 0.7; }
.iso .iso-tree { fill: var(--iso-tree); stroke: var(--iso-ink); stroke-width: 0.7; }
.iso .iso-tree-hi { fill: color-mix(in srgb, var(--iso-tree) 60%, var(--iso-white)); stroke: none; }
.iso .iso-person { stroke-width: 0.5; } .iso .iso-person--0 { fill: var(--iso-red); } .iso .iso-person--1 { fill: var(--iso-blue); } .iso .iso-person--2 { fill: var(--iso-gold); } .iso .iso-person--3 { fill: var(--club-1, var(--iso-roof)); }
.iso .iso-head { fill: var(--iso-glass); stroke: var(--iso-ink); stroke-width: 0.5; }
.iso .iso-line-soft { fill: none; stroke: var(--iso-white); stroke-width: 0.8; opacity: 0.6; }
.iso .iso-beam { fill: var(--iso-beam); stroke: none; }
.iso text { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.04em; stroke: none; }
.iso .iso-sign-text { fill: var(--iso-white); } .iso .iso-sign-gold { fill: var(--iso-gold); }
.iso .is-ghost polygon, .iso .is-ghost path, .iso .is-ghost ellipse, .iso .is-ghost circle, .iso .is-ghost polyline { fill: none; stroke: var(--iso-ink); stroke-width: 0.6; stroke-dasharray: 2.5 2; opacity: 0.45; }
.iso .is-ghost text { fill: none; }
.iso .iso-lawn { --m: color-mix(in srgb, var(--iso-grass) 78%, var(--iso-white)); }
.iso .iso-build { --m: var(--iso-gold); }
.iso .iso-concrete { --m: var(--iso-stone); }   /* the new rows already poured */
.iso .iso-scaffold-pole { fill: none; stroke: var(--iso-gold); stroke-width: 1.1; }
.iso .iso-netting { fill: var(--iso-gold); fill-opacity: 0.16; stroke: none; }
.iso .iso-scaffold-rail { fill: none; stroke: var(--iso-gold); stroke-width: 0.8; }
.iso .iso-scaffold-brace { fill: none; stroke: var(--iso-ink); stroke-width: 0.35; opacity: 0.5; }
.iso .iso-crane-lattice { fill: none; stroke: var(--iso-ink); stroke-width: 0.4; opacity: 0.7; }
.iso .iso-cable { fill: none; stroke: var(--iso-ink); stroke-width: 0.4; }
.iso .iso-scaffold polygon { fill-opacity: 0.35; stroke-dasharray: 3 2; animation: pulse 2.4s var(--ease-in-out) infinite; }
.campus__art.iso .campus__hit { stroke: none; }
.iso .iso-tier-0 { --m: var(--club-1, var(--iso-blue)); }
.iso .iso-tier-1 { --m: color-mix(in srgb, var(--club-1, var(--iso-blue)) 78%, var(--iso-white)); }
.iso .iso-tier-2 { --m: color-mix(in srgb, var(--club-1, var(--iso-blue)) 60%, var(--iso-white)); }
.iso .iso-tier-3 { --m: color-mix(in srgb, var(--club-1, var(--iso-blue)) 46%, var(--iso-white)); }
.iso .iso-crowd { fill: url(#iso-crowd); stroke: none; }
.iso .iso-seatrow { fill: none; stroke: var(--iso-white); stroke-width: 0.5; opacity: 0.35; }
.iso .iso-roofsheet { --m: var(--iso-stone); fill-opacity: 0.94; }
.iso .iso-strip { fill: none; stroke: var(--iso-glow); stroke-width: 1.4; stroke-linecap: round; }
.iso .iso-mullion { fill: none; stroke: var(--iso-ink); stroke-width: 0.5; opacity: 0.45; }   /* the new stadium: its glass façade and segmented roof */
.iso .iso-seam { fill: none; stroke: var(--iso-stone); stroke-width: 0.7; }
.iso .iso-paving { fill: none; stroke: var(--iso-wall); stroke-width: 0.5; opacity: 0.6; }
.iso .iso-crane { fill: none; stroke: var(--iso-gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.iso .iso-pitchline { fill: none; stroke: var(--iso-white); stroke-width: 0.8; opacity: 0.85; }
.iso .iso-tifo, .iso .iso-tifo-base { font-family: var(--font-display); font-weight: 800; letter-spacing: 0.06em; }   /* the club's name in seats: a block of seats in the stand's colour, seat dots of the lettering colour in it */
.iso .iso-tifo-base { fill: var(--club-1, var(--iso-blue)); }
.iso .iso-tifo-seat { fill: var(--tifo, var(--iso-white)); } .iso .iso-tifo-gap { fill: var(--tifo-gap); }
.stadium-art { --tifo-gap: color-mix(in srgb, var(--club-1, var(--iso-blue)) 55%, var(--iso-ink)); }   /* between the lettering's seats (read by the pattern in the svg's defs) */
.iso .iso-tifo-row { fill: none; stroke: var(--club-1, var(--iso-blue)); stroke-width: 0.4; opacity: 0.35; }   /* seat rows through the letters */
.iso .stadium-art__ghost { fill-opacity: 1; stroke: none; }
.iso .iso-ghost { fill: color-mix(in srgb, var(--iso-gold) 55%, transparent); stroke: var(--iso-ink); stroke-width: 0.7; stroke-dasharray: 3 2; }   /* a planned extension, previewed on hover */
.facility__art.iso, .facility-row.is-built .facility__art.iso, .facility-sheet__art .facility__art.iso { background: var(--iso-sky); }

/* League home: your part of the table (you and two clubs either side) and the way to the full table */
.mini-table-card .table-wrap, .mini-table { margin: 0; }
.mini-table th:first-child, .mini-table td:first-child { width: 100%; }
.mini-table .team-link { max-width: 100%; text-align: left; }
.mini-table__pts { font-weight: var(--weight-regular); font-size: var(--text-xs); color: var(--text-tertiary); }
.mini-table__more { width: 100%; border: 0; border-top: 1px solid var(--border-subtle); border-radius: 0; background: none; }

.chat-bubble__emoji { margin-right: var(--space-1); }   /* the assistant's emoji in front of a title */

.settings-row__stack { display: grid; gap: 2px; min-width: 0; text-align: left; }   /* Report a problem: the label and when it happened */

/* Lineup: the pitch straight on the page, at most half the screen's height (its width follows the pitch's shape) */
.lineup-pitch { display: flex; flex-direction: column; gap: var(--space-2); }
.lineup-pitch .pitch { width: min(100%, calc(50vh * 68 / 88)); width: min(100%, calc(50dvh * 68 / 88)); }
.lineup-chips .chip { padding: 0 var(--space-2); gap: 3px; }   /* Best XI, formation, tactic, ratings under the pitch: all four fit on a phone */
.lineup-chips > :first-child { margin-left: auto; }   /* centred while they fit, still scrollable from the first one when they don't */
.lineup-chips > :last-child { margin-right: auto; }
.lineup-chips .chip--icon { width: 32px; padding: 0; justify-content: center; }

/* The assistant beside the tab bar: as tall as the capsule; his red count pops in when it grows and gently pings while there is news */
.tabbar .chat-head__btn { width: var(--tabbar-height); height: var(--tabbar-height); border: 1px solid var(--border-default); background: var(--bg-tabbar); backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px); }
.tabbar .chat-head__btn .face { width: 46px; height: 46px; }
.chat-head__count { animation: chat-ping 2.4s var(--ease-out) infinite; }
.chat-head__btn.is-fresh .chat-head__count { animation: chat-pop 520ms var(--ease-out) both, chat-ping 2.4s 520ms var(--ease-out) infinite; }
.chat-head__btn.is-fresh .face { animation: chat-nudge 620ms var(--ease-out) both; }
/* he talks when a message arrives: the mouth opens and shuts, typing dots above him, then the count pops in */
.face__mouth-open { opacity: 0; }
.is-talking .face__mouth-open { animation: mouth-open 300ms linear infinite; }
.is-talking .face__mouth { animation: mouth-shut 300ms linear infinite; }
.chat-head__btn.is-talking .face__mouth-open, .chat-head__btn.is-talking .face__mouth { animation-iteration-count: 6; }
.chat-head__btn.is-talking .face { animation: none; }
.chat-head__btn.is-talking .chat-head__count { animation: chat-pop 520ms 1.7s var(--ease-out) both, chat-ping 2.4s 2.2s var(--ease-out) infinite; }
.chat-head__typing { position: absolute; right: 2px; bottom: calc(100% + 6px); display: flex; gap: 3px; padding: 6px 8px; border-radius: 12px 12px 4px 12px; background: var(--bg-raised); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-md); pointer-events: none; animation: head-typing 1.9s var(--ease-out) both; }
.chat-head__typing span { width: 5px; height: 5px; border-radius: 50%; background: var(--text-tertiary); animation: typing-dot 1s var(--ease-in-out) infinite; }
.chat-head__typing span:nth-child(2) { animation-delay: 0.15s; }
.chat-head__typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes mouth-open { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
@keyframes mouth-shut { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes head-typing { 0% { opacity: 0; transform: translateY(4px) scale(0.9); } 12%, 82% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .is-talking .face__mouth-open, .is-talking .face__mouth { animation: none; } .chat-head__typing { display: none; } .chat-head__btn.is-talking .chat-head__count { animation: none; } }
@keyframes chat-pop { 0% { transform: scale(0); } 55% { transform: scale(1.35); } 80% { transform: scale(0.9); } 100% { transform: scale(1); } }
@keyframes chat-ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger-solid) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--danger-solid) 0%, transparent); } }
@keyframes chat-nudge { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-10deg); } 50% { transform: rotate(8deg); } 75% { transform: rotate(-4deg); } }
@media (prefers-reduced-motion: reduce) { .chat-head__count, .chat-head__btn.is-fresh .chat-head__count, .chat-head__btn.is-fresh .face { animation: none; } }
.chat-head__bubble { position: absolute; left: -3px; bottom: -2px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: var(--radius-full); background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 2px var(--bg-surface); }   /* a speech bubble: this is your assistant's messages */
.chat-head__bubble .icon { width: 13px; height: 13px; }

/* Phones: the next match that opens the League tab or the Next match page is the top of the page,
   edge to edge and up behind the title bar, so its colour (and weather) runs into the header; the
   title bar stays see-through over it until you scroll. */
@media (max-width: 639px) {
  .content > .match-hero--top { margin: calc(-1 * (var(--topbar-height) + var(--content-top))) calc(-1 * var(--page-pad)) 0; padding-top: calc(var(--topbar-height) + var(--space-2)); border-width: 0 0 1px; border-radius: 0 0 var(--radius-xl) var(--radius-xl); }
  .has-hero:not(.is-scrolled) .topbar { background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ---------- Page transitions between the match pages (app.js morph, View Transitions) ----------
   The match card is one object that changes place: it grows from the League card (or a result's
   row) into the report's hero along a decelerating curve, its old face fading out early and the new
   one in late, the text pinned to the top so nothing squashes. The rest of the page fades out fast
   and rises in a beat later; the title bar and the tab bar never move. */
.topbar { view-transition-name: topbar; }
#tabbar { view-transition-name: tabbar; }
::view-transition-group(match-card) { animation-duration: 460ms; animation-timing-function: cubic-bezier(0.2, 0, 0, 1); }
::view-transition-old(match-card), ::view-transition-new(match-card) { height: 100%; object-fit: none; object-position: 50% 0; }
::view-transition-old(match-card) { animation: vt-fade-out 200ms var(--ease-in) both; }
::view-transition-new(match-card) { animation: vt-fade-in 300ms 120ms var(--ease-out) both; }
::view-transition-old(root) { animation: vt-fade-out 160ms var(--ease-in) both; }
::view-transition-new(root) { animation: vt-rise 360ms 140ms var(--ease-out) both; }
::view-transition-group(topbar), ::view-transition-group(tabbar) { animation-duration: 200ms; }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; } }
@keyframes vt-rise { from { opacity: 0; transform: translateY(12px); } }

/* ---------- The new stadium: the steps of the move and the sites to choose from ---------- */
.move-steps { display: flex; gap: var(--space-2); margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.move-steps__step { flex: 1; display: grid; gap: var(--space-1); font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-tertiary); }
.move-steps__step::before { content: ""; height: 4px; border-radius: 2px; background: var(--bg-inset); }
.move-steps__step.is-done, .move-steps__step.is-now { color: var(--text-primary); }
.move-steps__step.is-done::before { background: var(--grad-accent); }
.move-steps__step.is-now::before { background: var(--warning-solid); }
.site-list { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.site { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-subtle); }
.site__who { display: grid; gap: var(--space-1); min-width: 0; }
@media (max-width: 639px) { .site { flex-direction: column; align-items: stretch; } .site .btn { width: 100%; } }

/* ---------- Player history (the player sheet's History tab) ---------- */
.hist-chart { display: block; width: 100%; height: auto; overflow: visible; }
.hist-chart__area { fill: var(--accent-subtle); }
.hist-chart__line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.hist-chart__tick { stroke: var(--border-subtle); stroke-width: 1; }
.hist-chart__label { font-size: 9px; fill: var(--text-tertiary); }
.hist-chart__dot { fill: var(--accent); stroke: var(--bg-surface); stroke-width: 2; }
.hist-chart__value { font-size: 11px; font-weight: 600; fill: var(--text-primary); }
.hist-chart__sum { margin: var(--space-1) 0 0; }
.hist-moves { display: grid; margin: 0; padding: 0; list-style: none; }
.hist-move { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; border-top: 1px solid var(--border-subtle); }
.hist-move:first-child { border-top: 0; }
.hist-move__when { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.hist-move__clubs { display: flex; align-items: center; gap: var(--space-1); min-width: 0; font-size: var(--text-sm); }
.hist-move__clubs > * { min-width: 0; }
.hist-move__clubs > .icon { flex-shrink: 0; color: var(--text-tertiary); }
.hist-move__fee { font-size: var(--text-sm); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.hist-move__fee.is-fee { font-weight: var(--weight-semibold); color: var(--text-primary); }

/* ---------- Training › Coaching staff: the specialists, those you have and those still to come ---------- */
/* Training › Coaching staff: the head coach as a portrait card, the specialists as tiles (locked ones wait as an empty frame) */
.coach-hero { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); margin-bottom: var(--space-3); border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--accent-subtle), transparent 70%); border: 1px solid var(--accent-subtle-border); }
.coach-hero .face { flex-shrink: 0; }
.coach-hero__who { display: grid; gap: 2px; flex: 1; min-width: 0; }
.coach-hero__name { font-size: var(--text-md); }
.coach-hero__boost { display: grid; justify-items: center; flex-shrink: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--grad-button); color: var(--on-accent); line-height: 1.1; }
.coach-hero__boost b { font-family: var(--font-display); font-size: var(--text-xl); }
.coach-hero__boost span { font-size: var(--text-xs); opacity: 0.9; }
.spec-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.spec { position: relative; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--border-subtle); background: var(--bg-inset); min-width: 0; }
.spec.is-on { background: var(--bg-surface); border-color: var(--accent-subtle-border); box-shadow: var(--shadow-xs); }
.spec .face, .spec__empty { flex-shrink: 0; width: 36px; height: 36px; }
.spec__empty { display: grid; place-items: center; border-radius: 50%; border: 1.5px dashed var(--border-strong); color: var(--text-tertiary); }
.spec__who { display: grid; gap: 1px; min-width: 0; font-size: var(--text-sm); }
.spec__who b { font-weight: var(--weight-semibold); }
.spec:not(.is-on) .spec__who b { color: var(--text-secondary); }
.spec__boost { position: absolute; top: 6px; right: 8px; font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--success-text); font-variant-numeric: tabular-nums; }
@media (max-width: 639px) { .spec-grid { grid-template-columns: 1fr; } }

/* ---------- Transfers › Market: your first-team scouts ---------- */
.rscouts { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.rscout { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); }
.rscout .meter { width: 72px; }
.rscout__who { display: grid; min-width: 0; }
.rscouts__pick { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-3); }
.rscouts__pick .filters__select { width: auto; }
.mentor-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); }   /* the player sheet's mentor */
.mentor-row .train-row__who { display: grid; }


/* ---------- Academy › Squad: a bid for one of your youngsters ---------- */
.poach { display: grid; gap: var(--space-4); }
.poach__who { display: flex; align-items: center; gap: var(--space-3); }
.poach__who > span { display: grid; gap: 2px; min-width: 0; }
.poach__acts { justify-content: flex-end; }

/* ---------- Sort chips: a sort as a chip like the Tactic one (sort icon, the choice, a chevron); it opens a sheet ---------- */
.sort-chip { flex-shrink: 0; gap: var(--space-1); }
.sort-chip > .icon:first-child { color: var(--text-tertiary); }
.sort-chip > .icon:last-child { color: var(--text-tertiary); }
.sort-chip.is-static { cursor: default; }
.sort-chip.is-static:hover { background: inherit; }
.squad-controls .sort-chip { margin-left: auto; }

/* ---------- The first hour ---------- */
/* The intro: a chat with your assistant, full screen on a phone, a tall panel on a wide screen */
.modal--intro { animation: fade-in var(--dur-slow) var(--ease-out) both; width: min(560px, 100%); height: min(860px, calc(100vh - var(--space-8))); max-height: none; padding: 0; overflow: hidden; background: var(--bg-canvas); }
.intro { display: flex; flex-direction: column; height: 100%; }
.intro__head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); background: var(--bg-surface); }
.intro__head .face { width: 36px; height: 36px; }
.intro__who { display: grid; flex: 1; min-width: 0; line-height: var(--leading-sm); }
.intro-hero { display: grid; justify-items: center; gap: var(--space-1); padding: var(--space-4) 0 var(--space-6); text-align: center; }
.intro-hero .face { width: 112px; height: 112px; margin-bottom: var(--space-3); box-shadow: 0 0 0 6px var(--accent-subtle), var(--shadow-md); }
.intro-hero .eyebrow { color: var(--accent-text); }
.intro-hero__title { margin: 0; font-size: var(--text-xl); line-height: var(--leading-xl); font-weight: var(--weight-bold); }
.intro-link { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); border: 0; background: none; color: var(--text-secondary); font: inherit; font-size: var(--text-xs); cursor: pointer; }
.intro-link:hover { color: var(--text-primary); }
.intro__thread { position: relative; flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5) var(--space-4) var(--space-6); scroll-behavior: smooth; }
.intro__note { margin: 0 0 var(--space-2); }
.intro-msg { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); max-width: 100%; }
.intro-msg--me { align-items: flex-end; margin: var(--space-2) 0; }
.intro-bubble { max-width: 85%; padding: var(--space-3) var(--space-4); border-radius: 20px 20px 20px 6px; background: var(--bg-surface); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-xs); font-size: var(--text-md); line-height: var(--leading-md); }
.intro-bubble--me { border-radius: 20px 20px 6px 20px; border-color: transparent; background: var(--grad-button); color: var(--on-accent); font: inherit; font-size: var(--text-md); font-weight: var(--weight-medium); cursor: pointer; }
.intro-bubble--me:hover { filter: brightness(1.06); }
.intro-new { display: flex; flex-direction: column; gap: var(--space-2); }
.intro-new > * { animation: rise-in var(--dur-slow) var(--ease-out) both; }
.intro-new.is-typing > .intro-msg { animation-delay: 0.75s; }
.intro-new.is-typing > .intro-msg + .intro-msg { animation-delay: 1.35s; }
.intro-new.is-typing > .intro-msg + .intro-msg + .intro-msg { animation-delay: 1.95s; }
.intro-typing { align-self: flex-start; display: flex; gap: 4px; padding: 12px 14px; border-radius: 20px 20px 20px 6px; background: var(--bg-surface); border: 1px solid var(--border-subtle); overflow: hidden; animation: typing-life 0.75s linear both !important; }
.intro-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--text-tertiary); animation: typing-dot 1s var(--ease-in-out) infinite; }
.intro-typing span:nth-child(2) { animation-delay: 0.15s; }
.intro-typing span:nth-child(3) { animation-delay: 0.3s; }
.intro__foot { padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom)); border-top: 1px solid var(--border-subtle); background: var(--bg-surface); }
.intro-compose { display: flex; gap: var(--space-2); margin: 0; }
.intro-compose .input { flex: 1; min-width: 0; border-radius: var(--radius-full); }
.intro-compose .btn { border-radius: var(--radius-full); width: var(--control-md); flex-shrink: 0; }
/* the three clubs (and your own), as cards under his message */
.intro-clubs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); width: 100%; }
.intro-club { display: flex; align-items: flex-start; gap: var(--space-3); width: 100%; padding: var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--bg-surface); color: inherit; font: inherit; text-align: left; cursor: pointer; box-shadow: var(--shadow-xs); transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.intro-club:hover { border-color: var(--border-strong); }
.intro-club:active { transform: scale(0.99); }
.intro-club.is-on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-xs); }
.intro-club__crest { flex-shrink: 0; width: 48px; display: grid; place-items: center; }
.intro-club__crest svg { width: 44px; height: auto; }
.intro-club__crest--new { height: 52px; border: 1.5px dashed var(--border-strong); border-radius: var(--radius-md); color: var(--text-secondary); }
.intro-club__text { display: grid; gap: 2px; min-width: 0; justify-items: start; }
.intro-club__name { font-weight: var(--weight-semibold); font-size: var(--text-md); }
.intro-club__meta { font-size: var(--text-xs); color: var(--text-secondary); }
.intro-club__story { font-size: var(--text-sm); color: var(--text-secondary); margin: 2px 0 var(--space-1); }
/* your own club: a live crest, a name, colours and a shape */
.intro-own { width: 100%; display: grid; gap: var(--space-4); padding: var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--bg-surface); }
.intro-own__preview { justify-self: center; display: grid; place-items: center; }
.intro-own__preview svg { width: 88px; height: auto; filter: drop-shadow(var(--shadow-sm)); }
.intro-own__pairs { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.intro-swatch { width: 36px; height: 36px; padding: 0; border-radius: var(--radius-full); border: 2px solid var(--bg-surface); background: linear-gradient(135deg, var(--sw-a) 50%, var(--sw-b) 50%); box-shadow: 0 0 0 1px var(--border-default); cursor: pointer; }
.intro-swatch.is-on { box-shadow: 0 0 0 2px var(--accent); }
.intro-own__shapes { flex-wrap: wrap; }
.intro-opts { display: grid; gap: var(--space-2); width: 100%; }
@media (max-width: 639px) {
  .modal--intro { width: 100%; height: 100%; max-height: none; border: 0; border-radius: 0; }
  .intro-bubble { max-width: 90%; }
}

/* the tour's checklist in the chat */
.tour-card__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.tour-card__step { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); }
.tour-card__icon { display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--radius-full); background: var(--bg-surface); color: var(--text-tertiary); flex-shrink: 0; }
.tour-card__step.is-done { color: var(--text-tertiary); text-decoration: line-through; text-decoration-color: var(--border-strong); }
.tour-card__step.is-done .tour-card__icon { background: var(--accent-subtle); color: var(--accent-text); }
.tour-card__step.is-now { color: var(--text-primary); font-weight: var(--weight-semibold); }
.tour-card__step.is-now .tour-card__icon { background: var(--grad-button); color: var(--on-accent); }
.tour-card__skip { justify-self: start; margin-top: var(--space-1); padding: var(--space-1) 0; border: 0; background: none; color: var(--text-secondary); font: inherit; font-size: var(--text-xs); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tour-card__skip:hover { color: var(--text-primary); }
/* the challenge: the striker and a slot per game */
.challenge__who { display: flex; align-items: center; gap: var(--space-3); }
.challenge__name { display: grid; gap: 2px; min-width: 0; }
.challenge__slot { display: grid; place-items: center; height: 18px; font-size: 10px; font-weight: var(--weight-bold); color: var(--on-accent); }
.challenge__slot.is-W { background: var(--accent); }
.challenge__slot.is-D { background: var(--text-tertiary); color: var(--bg-surface); }
.challenge__slot.is-L { background: var(--danger-text); color: var(--bg-surface); }
/* the spotlight: a ring on the control that matters and his line beside it (clicks pass through) */
.spot { position: fixed; inset: 0; z-index: var(--z-toast); pointer-events: none; }
.spot__ring { position: fixed; border-radius: var(--radius-lg); box-shadow: 0 0 0 3px var(--accent), 0 0 0 9999px var(--spot-dim); animation: spot-pulse 1.6s var(--ease-in-out) infinite; transition: left 120ms linear, top 120ms linear, width 120ms linear, height 120ms linear; }
.spot__tip { position: fixed; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg); background: var(--bg-raised); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-lg); font-size: var(--text-sm); line-height: var(--leading-sm); animation: rise-in var(--dur-slow) var(--ease-out) both; }
.spot__tip .face { flex-shrink: 0; }
@keyframes spot-pulse { 0%, 100% { box-shadow: 0 0 0 3px var(--accent), 0 0 0 9999px var(--spot-dim); } 50% { box-shadow: 0 0 0 7px var(--accent-subtle-border), 0 0 0 9999px var(--spot-dim); } }
@media (prefers-reduced-motion: reduce) { .spot__ring { animation: none; transition: none; } }
/* the assistant speaks up beside his button (the first friendly) */
.assist-pop { position: fixed; z-index: var(--z-toast); max-width: 240px; padding: var(--space-2) var(--space-3); border-radius: 18px 18px 6px 18px; background: var(--bg-raised); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-lg); font-size: var(--text-sm); font-weight: var(--weight-semibold); animation: rise-in var(--dur-base) var(--ease-out) both; }
.assist-pop.is-leaving { opacity: 0; transform: translateY(4px); transition: opacity 250ms, transform 250ms; }

/* The card that leads to Play (the next match, the break's week): a light runs around its border.
   A conic gradient turns behind a mask that keeps only a thin ring (needs @property to turn; without
   it the ring stays still). Reduced motion: the ring, no movement. */
@property --ring-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.glow-ring { position: relative; isolation: isolate; }
.glow-ring::after { content: ""; position: absolute; inset: 0; z-index: 5; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--ring-angle), transparent 0deg, transparent 130deg, var(--ring-1) 220deg, var(--ring-2) 290deg, var(--ring-3) 335deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: ring-turn 4.5s linear infinite; }
@keyframes ring-turn { to { --ring-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) { .glow-ring::after { animation: none; --ring-angle: 120deg; } }

.expansion__art { flex-shrink: 0; width: 132px; height: auto; border-radius: var(--radius-md); align-self: flex-start; }
.expansion__art .is-ghost polygon { fill: var(--accent); fill-opacity: 0.22; stroke: var(--accent); stroke-width: 0.8; stroke-dasharray: 2 1.5; opacity: 1; }   /* what the project adds: a clear blueprint at this size */
@media (max-width: 639px) { .expansion__art { width: 104px; } }
@media (max-width: 639px) { .xfer-tabs .segmented__item { padding-inline: var(--space-1); font-size: var(--text-sm); } .xfer-tabs .segmented__count { margin-left: 2px; } }   /* five tabs on a phone */
/* over the match card the bar is see-through: the back chevron sits on a small glass disc so the sky never swallows it */
.has-hero:not(.is-scrolled) .topbar__back { background: var(--bg-topbar); -webkit-backdrop-filter: var(--topbar-blur); backdrop-filter: var(--topbar-blur); }
.hist-move--empty { display: block; }   /* the empty note spans the row */
/* Transfers › Market: buy or loan, first thing on the page */
.market-kind { --cols: 2; display: grid; grid-template-columns: repeat(2, 1fr); max-width: 320px; }
.market-kind .segmented__item { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); }
.sell-opt--danger .plan-opt__label { color: var(--danger-text); }   /* sell now: the quick sale, for less */
.sell-opt .plan-opt__label { display: inline-flex; align-items: center; gap: var(--space-2); }
@media (max-width: 639px) { .expansion { flex-wrap: wrap; } .expansion > .btn { flex-basis: 100%; } }   /* a phone: the price button under the project, full width */
/* the new stadium's sites: each with a small model of its surroundings (the plot as a blueprint) */
.site__art { flex-shrink: 0; width: 150px; height: auto; border-radius: var(--radius-md); align-self: center; }
.site__art .is-ghost polygon { fill: var(--accent); fill-opacity: 0.22; stroke: var(--accent); stroke-width: 0.8; stroke-dasharray: 2 1.5; opacity: 1; }
.site__who { flex: 1; }
@media (max-width: 639px) { .site { flex-direction: column; align-items: stretch; } .site__art { width: 100%; max-height: 150px; } .site > .btn { width: 100%; } }
.xfer-price > span.truncate { max-width: 112px; }   /* a club name under the price stays on one line */
.poach__title { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-1); }   /* the club (a link with its crest) and "want …" on one line */
/* work in progress on a tab: a small crane and the weeks left */
.work-mark { display: inline-flex; align-items: center; gap: 2px; margin-left: var(--space-1); padding: 0 6px; height: 18px; border-radius: var(--radius-full); background: var(--warning-bg); color: var(--warning-text); font-size: var(--text-xs); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.work-mark .icon { width: 12px; height: 12px; }
/* Training: the coaching staff at a glance, faces overlapping like a team photo */
.staff-strip { align-items: center; }
.staff-strip__faces { display: inline-flex; flex-shrink: 0; }
.staff-strip__face { display: inline-grid; border-radius: 50%; box-shadow: 0 0 0 2px var(--bg-surface); }
.staff-strip__face + .staff-strip__face { margin-left: -10px; }
.staff-strip__face .face { width: 32px; height: 32px; }
.card:has(#coaching-staff) { scroll-margin-top: calc(var(--topbar-height) + 64px); }   /* lands below the sticky tabs */
.modal.is-still, .modal.is-still * { animation: none !important; }   /* updated in place: no entrance again */
.grid > .staff-card { grid-column: 1 / -1; }   /* the staff gets the full width: room for the tiles */
.staff-strip__more { display: inline-grid; place-items: center; width: 32px; height: 32px; background: var(--bg-inset); color: var(--text-secondary); font-size: var(--text-xs); font-weight: var(--weight-semibold); }   /* the rest of the staff you have */
.match-hero--top .wxs__sun { top: calc(var(--topbar-height) - 30px); right: -20px; }   /* below the title bar on a full-bleed card */
/* European Cup: the league phase table's zones (a coloured edge), and the four pots of its draw */
.cup-table .cup-row--qf td:first-child { box-shadow: inset 3px 0 0 var(--success-solid); }
.cup-table .cup-row--po td:first-child { box-shadow: inset 3px 0 0 var(--info-solid); }
.cup-table .cup-row--out td { color: var(--text-tertiary); }
.cup-table tr.is-me td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.draw__pots--four { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.draw__pots--four .draw__bowl { width: 64px; height: 64px; }   /* four pots side by side on a phone */
.draw__pot.is-yours .draw__pot-name { color: var(--accent-text); }
.challenge__result { display: inline-flex; align-items: center; gap: var(--space-1); justify-self: start; padding: 2px var(--space-2); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.challenge__result.is-won { background: var(--success-bg); color: var(--success-text); }
.challenge__result.is-lost { background: var(--danger-bg); color: var(--danger-text); }
.chat__header .chat__settings { color: var(--text-tertiary); }   /* the chat header's gear to Assistant messages: there, but quiet */
.chat__header .chat__settings:hover { color: var(--text-secondary); }
.facility-down { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); }   /* a facility's sheet: take it down a level */
.facility-down > div { display: grid; gap: 2px; min-width: 0; }