:root {
  /* the floating ball button: its own size, and the space pages leave for it */
  --fab-size: 52px;
  --fab-gap: 16px;
  --fab-inset-b: max(16px, env(safe-area-inset-bottom, 0px));

  --bg: #0d1117;
  --panel: #161c26;
  --panel2: #1d2533;
  --line: #2a3446;
  --text: #e6edf3;
  --dim: #8b98a9;
  --green: #3fb950;
  --pitch: #2ea043;
  --amber: #d29922;
  --red: #f85149;
  --grass: #12402a;
  --grass2: #155232;
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 -apple-system, "Segoe UI", system-ui, sans-serif;
  min-height: 100vh;
  /* Backstop only. This hides a sideways scrollbar but does NOT stop the
     document from being wider than the screen — see .app-shell, which is
     where the slide is actually contained. */
  overflow-x: hidden;
  /* An app does not rubber-band. Without this a press-and-drag anywhere on the
     page pulls the whole document — header and all — away from the edge of the
     screen and lets it spring back, which is browser behaviour showing through
     the native shell. It also stops a downward drag being read as
     pull-to-refresh. Inner scrollers keep their own scrolling; what goes is the
     chaining to the document underneath them. */
  overscroll-behavior: none;
}
html { overscroll-behavior: none; }
/* iOS zooms the whole page in when a text field smaller than 16px takes focus,
   and it does NOT zoom back out afterwards. Sign in on an iPhone with 15px
   inputs and the game is left at roughly 4x for the rest of the session —
   which is why it only ever happened on the FIRST login, the one time a field
   is touched. 16px is the documented floor that stops it; overrides below are
   free to go bigger, never smaller. */
input, select, textarea { font-size: 16px; }
/* app surfaces: kill the tap delay, disallow accidental text selection on chrome */
button, .home-notif-row, .home-widget, .wt-card, .fac-tile, .tb-chip, .side-drawer button, .menu-toggle { touch-action: manipulation; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 14px; }
/* the header lives in its own frame outside .app-shell so it's never part of
   the drawer's push/slide — same centering as .wrap, no bottom padding since
   the header's own margin-bottom already spaces it from what's below */
.topbar-frame { max-width: 1180px; margin: 0 auto; padding: 14px 14px 0; }

/* ---- landscape for the GAME only -----------------------------------------
   Signing in is a portrait job; the game is a landscape one. So the rotate
   prompt is scoped to `body.in-game`, set by lockOrientation() once a club is
   loaded — otherwise a player meets "rotate your device" on the very first
   screen, holding the phone exactly the way that screen wants. */
#rotate-gate { display: none; }
@media (orientation: portrait) {
  body.in-game .app-shell, body.in-game .topbar-frame { display: none; }
  body.in-game #rotate-gate {
    display: flex; position: fixed; inset: 0; z-index: 999;
    align-items: center; justify-content: center; text-align: center;
    background: var(--bg); padding: 32px;
  }
  body.in-game .rg-inner { max-width: 320px; }
  body.in-game .rg-icon { font-size: 60px; animation: rgSpin 2.4s ease-in-out infinite; }
  body.in-game #rotate-gate h2 { font-size: 22px; margin: 16px 0 8px; }
  body.in-game #rotate-gate p { color: var(--dim); font-size: 14px; line-height: 1.5; }
  @keyframes rgSpin { 0%,55% { transform: rotate(0); } 75%,100% { transform: rotate(-90deg); } }
}

/* Running edge to edge with no system bars, the only thing left to respect is
   a camera cutout — hence the safe-area insets rather than fixed padding.

   The game plays in LANDSCAPE, where the notch sits on a side edge, not the
   top — and iOS may put it left or right depending on which way the phone was
   turned, so both sides are padded. Only the top was handled before, which is
   why a Dynamic Island ran straight over the drawer and the header. */
.topbar-frame {
  padding-top: max(14px, env(safe-area-inset-top));
  padding-left: max(14px, env(safe-area-inset-left));
  padding-right: max(14px, env(safe-area-inset-right));
}
.wrap { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
/* The ball button floats over everything, so whatever sits at the FOOT of a
   page ends up underneath it — the ledger's "Balance carried" was hiding
   behind it, and every page has the same last row. Content gets scrolled past
   it instead: enough bottom padding to clear the button, its inset and a gap.
   Derived from the same variables the button uses, so resizing it cannot
   silently un-fix this. */
.wrap { padding-bottom: calc(var(--fab-size) + var(--fab-inset-b) + 12px); }

/* ---- app top bar: the persistent status strip ---- */
header#topbar {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 14px; margin-bottom: 12px;
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 1px solid var(--line); border-radius: 12px;
}
/* Drop your own image at public/img/header-bg.jpg to replace this — the path
   below is already wired up, no code change needed. A dark-to-light scrim
   fades left→right so the crest/club name (no background of their own)
   stay legible; the chips on the right have their own opaque pill so they
   don't need as much cover. */
.topbar-bg {
  position: absolute; inset: 0; z-index: 0;
  background-color: #141a26;
  background-image:
    linear-gradient(90deg, rgba(13,17,23,.9) 0%, rgba(13,17,23,.55) 45%, rgba(13,17,23,.15) 100%),
    url('img/header-bg.jpg');
  background-size: 100% 100%, cover;
  background-position: center, center;
}
.club, .topbar-chips { position: relative; z-index: 1; }
.club { display: flex; align-items: center; gap: 10px; min-width: 0; }
.club-id { min-width: 0; }
header#topbar h1 { font-size: 18px; letter-spacing: .3px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.club-mgr {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 1px;
  background: none; border: none; color: var(--dim); font: inherit; font-size: 12px; cursor: pointer; padding: 0;
}
.club-mgr:hover { color: var(--text); }
.topbar-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.tb-chip {
  display: inline-flex; align-items: baseline; gap: 4px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 10px; font-size: 12px; color: var(--dim); white-space: nowrap;
}
.tb-chip b { color: var(--text); font-size: 13px; font-variant-numeric: tabular-nums; }
.tb-chip i { font-style: normal; font-size: 10.5px; color: var(--dim); }
/* mood movement since the last match — visible progress even inside one face tier */
.tb-chip .mood-delta { font-style: normal; font-size: 9px; margin-left: 1px; }
.tb-chip .mood-delta.up { color: var(--pitch); }
.tb-chip .mood-delta.down { color: var(--red); }
.tb-chip b.tone-pos { color: var(--green); }
.tb-chip b.tone-warn { color: var(--amber); }
.tb-chip b.tone-neg { color: var(--red); }
.tb-chip-link { cursor: pointer; }
.tb-chip-link:hover { border-color: var(--pitch); background: rgba(46, 160, 67, .1); }

/* the club crest (chosen logo) in the top bar */
/* The crest is the club's face — it earns real size in the header. 52px sits
   taller than the two stacked text lines beside it (name + manager, ~34px),
   so the header row grows a little rather than the badge being boxed in by
   them. The bar itself is fixed-height by design, so nothing below shifts. */
/* a button, not a decoration: it navigates Home. Stripped back to the bare
   badge so it reads as the crest it is, with a press state to prove it took
   the tap — a control that looks like a picture still has to feel like one. */
.header-crest {
  flex: none; display: inline-flex; line-height: 0;
  background: none; border: none; padding: 0; cursor: pointer;
  border-radius: 9px; transition: transform .1s ease;
}
.header-crest:active { transform: scale(.93); }
.header-crest .logo-svg, .header-crest .logo-img { width: 52px; height: 52px; display: block; }
.header-crest .logo-img { border-radius: 9px; object-fit: contain; }

/* ---- app shell: the header (above, in .topbar-frame) never moves or
   resizes. The drawer is a fixed overlay that starts right below it and
   only the content (.app-main) slides via transform when it opens — no
   flex-shrink, so nothing inside reflows/shrinks, and body's overflow-x:
   hidden clips the sliver that briefly extends past the right edge instead
   of growing a horizontal scrollbar. --drawer-top is set from JS to the
   header's actual rendered height (it varies by breakpoint). ---- */
/* The drawer pushes .app-main sideways with a transform, and a transform
   counts towards scrollable overflow: with the slide uncontained the document
   measured ~150px wider than the screen and STAYED that way after the drawer
   closed. body's overflow-x:hidden only hid the scrollbar, it didn't shrink
   the document, so the layout viewport stayed wide.

   That is invisible in a desktop browser, which pins position:fixed to the
   visual viewport — but a mobile webview pins it to the LAYOUT viewport, so
   the bottom-RIGHT drawer button was being placed ~150px off the right edge
   of the screen and vanished. (Bottom-left, where it used to live, was immune,
   which is why this only appeared after the button moved across.)

   Containing the slide here fixes it at the source. `clip` rather than
   `hidden` deliberately: hidden would force overflow-y to compute to auto and
   turn the shell into a scroll container, breaking normal page scrolling.
   Neither the drawer nor the button is affected — both are position:fixed, so
   the viewport is their containing block and an ancestor's clip can't reach
   them. */
.app-shell { position: relative; overflow-x: clip; }
.app-main {
  position: relative; z-index: 1;
  transition: transform .22s ease;
}
.app-main.shifted { transform: translateX(150px); }

.side-drawer {
  position: fixed; top: var(--drawer-top, 91px); left: 0; bottom: 0; z-index: 55;
  width: 0; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-start; gap: 3px;
  background: var(--panel); border-right: 1px solid var(--line);
  padding: 0; white-space: nowrap;
  transition: width .22s ease, padding .22s ease;
}
/* The drawer is pinned to the left edge, which in landscape is exactly where
   a notch can be. Its BACKGROUND still runs to the physical edge (a gap there
   would look like a bug); the rows are pushed clear of the cutout instead, and
   the open width grows by the same amount so they keep their full 150px. */
/* top-aligned: with a bottom anchor the stack drifted out of view whenever
   the page itself scrolled, which looked broken. Anchoring to the top keeps
   it in the same place relative to the content regardless of scroll. */
.side-drawer.open {
  width: calc(150px + env(safe-area-inset-left, 0px));
  padding: 16px 0 16px env(safe-area-inset-left, 0px);
  /* A landscape phone is ~390px tall and the nav is eleven rows — they do not
     fit. Without this the last rows (Settings among them) are simply
     unreachable, silently clipped by the overflow that makes the width
     transition work. X stays hidden so the slide never grows a scrollbar. */
  overflow-x: hidden; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  /* Eleven buttons fill this thing edge to edge, so every touch lands on one.
     Claiming vertical panning for the drawer itself means a drag is always a
     scroll, whatever it started on. */
  touch-action: pan-y;
}
.side-drawer.open::-webkit-scrollbar { width: 4px; }
.side-drawer.open::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }
/* rows must not squash when the stack is taller than the drawer */
.side-drawer button { flex: 0 0 auto; }
/* real buttons, not text rows: side-to-side (no horizontal inset), square
   corners, depth from a top highlight + bottom drop shadow only — nothing
   on the left/right edges. Pressed flat (shadow collapses, nudges down)
   on tap or when active. A 46×46 image rides flush on the LEFT (see the
   per-tab ::before rules below); the label sits right next to it, not
   spread apart — any slack space falls on the right instead. */
.side-drawer button {
  display: flex; align-items: center; justify-content: flex-start; gap: 10px;
  height: 46px; padding: 0;
  background: var(--panel2); color: var(--dim); font: 800 14px/1 inherit;
  border: none; border-radius: 0;
  cursor: pointer; text-align: left;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 3px 6px rgba(0,0,0,.35);
  transform: translateY(0);
  transition: background .12s ease, color .12s ease, transform .1s ease, box-shadow .1s ease;
}
.side-drawer button span { padding-right: 12px; }
/* a 46×46px square image per tab, already wired to the exact files supplied
   — falls back to a plain panel colour if a file is missing. */
.side-drawer button::before {
  content: ''; flex: none; width: 46px; height: 46px;
  background-color: var(--panel2); background-size: cover; background-position: center;
}
.side-drawer button[data-tab="home"]::before { background-image: url('img/homebt-bg.jpg'); }
.side-drawer button[data-tab="squad"]::before { background-image: url('img/Squad-bg.jpg'); }
.side-drawer button[data-tab="league"]::before { background-image: url('img/league-bg.jpg'); }
.side-drawer button[data-tab="cup"]::before { background-image: url('img/cupbtn-bg.jpg'); }
.side-drawer button[data-tab="finance"]::before { background-image: url('img/finaince-bg.jpg'); }
.side-drawer button[data-tab="facilities"]::before { background-image: url('img/camp-bg.jpg'); }
.side-drawer button[data-tab="facilities"][data-fac="youth"]::before { background-image: url('img/academy-bt.jpg'); }
.side-drawer button[data-tab="transfers"]::before { background-image: url('img/transfers-bg.jpg'); }
.side-drawer button[data-tab="training"]::before { background-image: url('img/training-bg.jpg'); }
.side-drawer button[data-tab="club"]::before { background-image: url('img/club-bg.jpg'); }
.side-drawer button:hover { color: var(--text); font-weight: 800; }
/* discrete selection: a lighter panel tone + a thin accent edge, not a solid
   fill — reads as "current" without shouting. Bold stays the same weight
   as every other button — selection is colour/edge, not extra emphasis. */
.side-drawer button.active {
  color: var(--text); background: var(--panel); font-weight: 800;
  box-shadow: inset 3px 0 0 var(--pitch), inset 0 1px 0 rgba(255,255,255,.08), 0 1px 2px rgba(0,0,0,.3);
  transform: translateY(2px);
}

/* the corner toggle is now just your photo in a circle, no icon glyph */
/* Bottom-RIGHT, and always reachable: fixed (so scrolling can't take it
   away), opposite the drawer (so an open drawer can't cover it), and inset by
   the safe area — a rounded corner, a landscape camera cutout and the
   home-indicator strip all eat exactly this corner on a real phone.
   NB: these insets live in the base rule on purpose. An earlier override
   block placed ABOVE this one lost the cascade silently. */
.menu-toggle {
  position: fixed; z-index: 60;
  bottom: var(--fab-inset-b);
  right: max(var(--fab-gap), env(safe-area-inset-right));
  width: var(--fab-size); height: var(--fab-size); border-radius: 50%;
  background-color: var(--panel2);
  background-image: url('img/home-but.jpg');
  background-size: cover; background-position: center;
  border: 2px solid var(--panel2); cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.45);
  transition: transform .15s ease;
}
.menu-toggle:hover { filter: brightness(1.08); }
.menu-toggle:active { transform: scale(.92); }

/* Settings lives IN the drawer now, last and pushed to its foot: account,
   data and legal are places you visit rarely and deliberately, so they sit
   apart from the screens you move between constantly — and they no longer
   occupy a corner of every single screen. The gear is an SVG rather than a
   photo tile because there is no photograph of "your account". */
.side-drawer .drawer-settings {
  margin-top: auto;                    /* the foot of the drawer */
  padding-left: 0; gap: 10px;
  border-top: 1px solid var(--line);
}
/* Every drawer row draws a 46×46 photo tile via ::before. Settings has no
   photograph, so that tile must be suppressed — otherwise the row renders an
   empty square AND the gear, pushing its label 56px out of the column. */
.side-drawer .drawer-settings::before { content: none; }
/* The gear then occupies the SAME 46×46 slot the photos do, so "Settings"
   starts at exactly the x every other label starts at. */
.side-drawer .drawer-settings svg {
  width: 46px; height: 46px; flex: 0 0 46px; padding: 12px;
  box-sizing: border-box;
  fill: var(--dim); transition: fill .12s ease, transform .4s ease;
}
.side-drawer .drawer-settings:hover svg { fill: var(--text); transform: rotate(45deg); }
.side-drawer .drawer-settings.active svg { fill: var(--text); }


/* sub-tabs inside a screen: one concern per view */
.subtabs { display: flex; gap: 8px; margin-bottom: 12px; }
.subtabs button {
  flex: 1; max-width: 200px; background: var(--panel2); border: 1px solid var(--line);
  color: var(--dim); font: 600 13px/1 inherit; padding: 10px 12px;
  border-radius: 9px; cursor: pointer;
}
.subtabs button.active { color: var(--text); border-color: var(--pitch); background: rgba(46, 160, 67, .12); }

/* roster as tappable rows (phone-first) */
/* ---- roster filters: position, and a skill floor ---- */
.pl-filters {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 9px 0 11px; margin-bottom: 4px; border-bottom: 1px solid var(--line);
}
.pl-chiprow { display: flex; gap: 5px; flex-wrap: wrap; }
.pl-chip {
  display: inline-flex; align-items: baseline; gap: 5px;
  background: var(--panel2); border: 1px solid var(--line); color: var(--dim);
  border-radius: 7px; padding: 5px 10px; font: 700 12px/1 inherit; cursor: pointer;
}
.pl-chip i { font-style: normal; font-size: 10px; opacity: .65; font-weight: 600; }
.pl-chip:hover:not(:disabled) { border-color: var(--pitch); color: var(--text); }
.pl-chip.on { background: var(--pitch); border-color: var(--pitch); color: #04160a; }
.pl-chip.on i { opacity: .8; }
.pl-chip:disabled { opacity: .35; cursor: default; }
.pl-count { margin-left: auto; font-size: 11px; color: var(--dim); white-space: nowrap; }

/* Column headings, on the same flex rhythm as .pl-row so Skill sits directly
   over the stars it sorts. Only that one is a button — it is the only column
   with an order worth changing. */
.pl-head {
  display: flex; align-items: center; gap: 10px; padding: 2px 4px 6px;
  font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--dim); border-bottom: 1px solid var(--line);
}
.pl-head-pos { flex: none; min-width: 42px; }
.pl-head-name { flex: 1; min-width: 140px; }
.pl-head-cond { flex: none; width: 82px; }
.pl-sort {
  flex: none; width: 132px; text-align: left;
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--dim);
}
.pl-sort i { font-style: normal; font-size: 9px; opacity: .7; margin-left: 2px; }
.pl-sort:hover { color: var(--text); }
.pl-sort.on { color: var(--pitch); }
.pl-sort.on i { opacity: 1; }
@media (max-width: 620px) { .pl-head-cond { display: none; } }

.pl-list { display: flex; flex-direction: column; }
.pl-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 4px; border-bottom: 1px solid var(--line);
}
.pl-row:last-child { border-bottom: none; }
.pl-row > .pos-badge { flex: none; min-width: 42px; }
.pl-main { flex: 1; min-width: 140px; }
.pl-main b { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.pl-sub { font-size: 11.5px; color: var(--dim); display: flex; align-items: center; gap: 5px; }
/* fixed-width, LEFT-aligned column so every row's stars share a left edge
   (their count now varies, so without this they'd float right, ragged) */
.pl-stars { flex: none; width: 132px; display: flex; justify-content: flex-start; }
.pl-stars .star-svg { width: 17px; height: 17px; }
.pl-stars .star-svg + .star-svg { margin-left: -6px; }
.pl-bars { display: flex; flex-direction: column; gap: 3px; flex: none; }
.pl-bar { display: flex; align-items: center; gap: 5px; }
.pl-bar label { font-size: 9px; font-weight: 700; letter-spacing: .5px; color: var(--dim); text-transform: uppercase; width: 22px; }
.bar.sm { width: 54px; height: 6px; }
.ov-training { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }

/* ----- narrow screens: tighten the chrome; the drawer already handles nav ----- */
@media (max-width: 640px) {
  .wrap { padding: 10px; }
  .topbar-frame { padding: 10px 10px 0; }
  header#topbar { padding: 8px 10px; margin-bottom: 10px; }
  header#topbar h1 { font-size: 15px; }
  .tb-chip { padding: 3px 8px; font-size: 11px; }
  .tb-chip b { font-size: 12px; }
  .side-drawer.open { width: 180px; }
  .app-main.shifted { transform: translateX(180px); }
  .card { padding: 12px; }
  .hide-sm { display: none; }
  th, td { padding: 6px 5px; font-size: 13px; }
  .pl-end { min-width: 58px; }
}

.card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 16px; margin-bottom: 14px; }
.card h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--dim); margin-bottom: 12px; }

.btn {
  background: var(--pitch); color: #04160a; border: none; border-radius: 8px;
  font: 600 15px/1 inherit; padding: 12px 22px; cursor: pointer;
  transition: transform .06s ease, filter .12s ease;
}
.btn:hover { filter: brightness(1.1); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.ghost { background: var(--panel2); color: var(--text); border: 1px solid var(--line); }
.btn.small { padding: 7px 14px; font-size: 13px; }
.btn.sel { outline: 2px solid var(--pitch); }

/* mobile tap feedback: everything pressable dips under the finger */
.btn:active:not(:disabled),
.home-notif-row:active,
.home-widget.clickable:active,
.wt-card.clickable:active,
.fac-tile:active,
.subtabs button:active,
.tb-chip:active { transform: scale(.96); }

/* drawer buttons get a real "pressed" feel — the shadow collapses and the
   button nudges down, matching its raised resting state, rather than scaling */
.side-drawer button:active {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 2px rgba(0,0,0,.3);
  transform: translateY(2px);
}

/* swipe-between-screens: a quick slide-in cue on the new screen */
@keyframes swipeIn { from { opacity: .35; transform: translateX(var(--swipe-from, 0)); } to { opacity: 1; transform: none; } }
#view.swipe-in { animation: swipeIn .18s ease-out; }
@media (prefers-reduced-motion: reduce) { #view.swipe-in { animation: none; } }

/* Club <-> Management: the swipe gesture that links them has no affordance
   of its own, so this pager gives it one — plain carousel dots, tappable as
   a mouse-friendly stand-in for the flick. */
.swipe-pager { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 16px 0 4px; }
.swipe-dot {
  width: 7px; height: 7px; padding: 0; border-radius: 50%; border: none;
  background: var(--line); cursor: pointer; transition: background .15s ease, transform .15s ease;
}
.swipe-dot.on { background: var(--pitch); transform: scale(1.3); }

/* ---------- pre-match hero ---------- */
.hero { text-align: center; padding: 12px 0; }
.hero .teams { display: flex; align-items: center; justify-content: center; gap: 26px; flex-wrap: wrap; }
.hero .side { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 150px; }
.hero .side b { font-size: 17px; }
.hero .side .logo-svg, .hero .side .logo-img { width: 56px; height: 56px; }
.hero .side .logo-img { border-radius: 10px; object-fit: contain; }
.hero .side .sub { color: var(--dim); font-size: 12px; }
.hero .mid { font-size: 26px; font-weight: 700; color: var(--dim); }
.hero .tag { color: var(--dim); font-size: 13px; margin-top: 10px; }
.controls { display: flex; gap: 8px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }

/* ---------- live match ---------- */
/* the scoreboard reads like a broadcast bug: each club's colour bleeds in
   from its own side, the score sits on a raised centre plate */
.scoreline {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px;
  margin: -18px -18px 12px; padding: 14px 18px;
  border-radius: 12px 12px 0 0;
  background:
    linear-gradient(100deg,
      color-mix(in srgb, var(--hc, #4da3ff) 32%, #10141b) 0%,
      color-mix(in srgb, var(--hc, #4da3ff) 10%, #10141b) 38%,
      #10141b 50%,
      color-mix(in srgb, var(--ac, #8b98a9) 10%, #10141b) 62%,
      color-mix(in srgb, var(--ac, #8b98a9) 32%, #10141b) 100%);
  border-bottom: 1px solid var(--line);
}
.scoreline .t { display: flex; align-items: center; gap: 8px; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.scoreline .t.away { justify-content: flex-end; }
.scoreline .t .logo-svg, .scoreline .t .logo-img { width: 34px; height: 34px; flex: none; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.scoreline .t .logo-img { border-radius: 6px; object-fit: contain; }
.scoreline .mid2 {
  text-align: center; padding: 4px 18px; border-radius: 10px;
  background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 3px 10px rgba(0,0,0,.4);
}
.scoreline .score { font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; }
.scoreline .minute { color: var(--amber); font-size: 13px; font-variant-numeric: tabular-nums; min-height: 20px; }

.pitch {
  position: relative; width: 100%; border-radius: 10px; overflow: hidden;
  background:
    repeating-linear-gradient(90deg, var(--grass) 0 12.5%, var(--grass2) 12.5% 25%);
  border: 1px solid #1e5c3a;
}
.pitch.landscape { aspect-ratio: 16 / 9.5; }
.pitch.portrait { aspect-ratio: 10 / 12.5; max-width: 460px; margin: 0 auto; }
.pitch svg.lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.pitch svg.lines * { stroke: rgba(255,255,255,.30); stroke-width: .6; fill: none; }

.dot {
  position: absolute; width: 3.2%; aspect-ratio: 1; min-width: 12px;
  border-radius: 50%; background: var(--c); border: 1.5px solid rgba(255,255,255,.75);
  transform: translate(-50%, -50%); transition: opacity .3s;
}
.dot.off { opacity: .15; }
.ball {
  position: absolute; width: 11px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #cfd6dd 70%, #97a1ac);
  box-shadow: 0 2px 5px rgba(0,0,0,.6);
  transform: translate(-50%, -50%);
  transition: left .32s ease-out, top .32s ease-out;
  z-index: 3;
}
.no-anim .ball { transition: none; }

.stage3d {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: #0a0f1e; border-radius: 10px; overflow: hidden;
}
.stage3d canvas { display: block; width: 100% !important; height: 100% !important; }
.player-tag {
  position: absolute; transform: translate(-50%, -130%);
  background: rgba(10, 14, 20, .72); color: #fff;
  font: 700 11px/1 -apple-system, "Segoe UI", system-ui, sans-serif;
  letter-spacing: .5px; padding: 4px 8px; border-radius: 4px;
  pointer-events: none; white-space: nowrap; z-index: 4;
}
.player-tag::after {
  content: ''; position: absolute; left: 50%; top: 100%;
  transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: rgba(10, 14, 20, .72);
}

.overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 4px; z-index: 5; pointer-events: none;
  text-shadow: 0 2px 10px rgba(0,0,0,.8);
}
.overlay .big { font-size: 44px; font-weight: 800; letter-spacing: 2px; animation: pop .5s ease-out; }
.overlay .who { font-size: 16px; font-weight: 600; }
@keyframes pop { 0% { transform: scale(.3); opacity: 0; } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }

.board-phase {
  text-align: center; font-size: 12px; font-weight: 800; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--amber); min-height: 18px; margin-bottom: 8px;
}
.subs-note { font-size: 12px; color: var(--dim); align-self: center; }
#match-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  background: #23180a; border-top: 2px solid var(--amber);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  font-size: 13px; color: #ffd98a;
}
/* unsubmitted team changes: the submit button demands attention */
.btn.pulse { animation: submit-pulse 1.1s ease-in-out infinite; }
@keyframes submit-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(46, 160, 67, .55); }
  50% { box-shadow: 0 0 0 7px rgba(46, 160, 67, 0); }
}
@media (prefers-reduced-motion: reduce) { .btn.pulse { animation: none; outline: 2px solid var(--pitch); } }
@media (max-width: 640px) { #match-banner { bottom: 58px; } }

/* Event log, Top Eleven "Faze cheie" style: minutes down the centre column,
   home events flow left, away events flow right, event icon nearest the
   minute. The central pill turns green on goals. */
#feed {
  max-height: 210px; overflow-y: auto; display: flex; flex-direction: column;
  gap: 3px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line);
}
.ev-row {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 8px; font-size: 13px; padding: 3px 0; border-radius: 6px;
}
.ev-row.mine { background: rgba(255, 255, 255, .035); }   /* your own events, grouped */
.ev-side { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ev-side.left { justify-content: flex-end; text-align: right; }
.ev-side.right { justify-content: flex-start; text-align: left; }
.ev-side .ev-txt { min-width: 0; overflow-wrap: anywhere; }
.ev-side .feed-ico { flex: none; width: 16px; height: 16px; display: inline-flex; }
.ev-side .feed-ico svg { width: 100%; height: 100%; display: block; }
.ev-min {
  flex: none; min-width: 30px; text-align: center; align-self: center;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 6px;
  padding: 2px 7px; font-size: 12px; font-weight: 700; color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.ev-min.goal { background: #1f6f34; border-color: #2ea043; color: #eafff0; }
/* event-type colour on the text (independent of which side/team) */
.ev-row.goal .ev-txt { color: var(--green); font-weight: 600; }
.ev-row.injury .ev-txt { color: var(--amber); }
.ev-row.card-y .ev-txt { color: #e8c31e; }
.ev-row.card-r .ev-txt { color: var(--red); font-weight: 600; }
.ev-row.sub .ev-txt { color: #79c0ff; }
/* team-neutral events: centred banner */
.ev-row.neutral { grid-template-columns: 1fr; justify-items: center; gap: 4px; }
.ev-row.neutral .ev-neutral { color: var(--dim); font-style: italic; font-size: 12px; text-align: center; }

/* ---------- match stats, broadcast style ---------- */
.ms-wrap { display: flex; flex-direction: column; gap: 7px; margin-top: 6px; font-variant-numeric: tabular-nums; }
/* possession: one split bar, the two colours physically shoulder to shoulder */
.ms-poss { display: flex; height: 26px; border-radius: 8px; overflow: hidden; box-shadow: inset 0 2px 5px rgba(0,0,0,.45); }
.ms-poss-h, .ms-poss-a {
  display: flex; align-items: center; min-width: 44px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 85%, #fff) 0%, var(--tc) 45%, color-mix(in srgb, var(--tc) 70%, #000) 100%);
}
.ms-poss-h { justify-content: flex-start; }
.ms-poss-a { justify-content: flex-end; }
.ms-poss span { font-size: 12.5px; font-weight: 800; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.75); padding: 0 9px; }
.ms-poss-label { text-align: center; font-size: 10.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--dim); margin: -2px 0 2px; }
/* mirrored tug-of-war rows in true team colours */
.ms-row { display: grid; grid-template-columns: 34px 1fr 84px 1fr 34px; align-items: center; gap: 8px; }
.ms-row > b { font-size: 15px; font-weight: 800; }
.ms-row > b:first-child { text-align: right; }
.ms-row > span { text-align: center; color: var(--dim); font-size: 12px; }
.ms-bar { height: 13px; border-radius: 7px; background: rgba(0,0,0,.4); overflow: hidden; display: flex; box-shadow: inset 0 2px 4px rgba(0,0,0,.5); }
.ms-bar.left { justify-content: flex-end; }
.ms-bar i {
  display: block; height: 100%; border-radius: 7px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 80%, #fff) 0%, var(--tc) 45%, color-mix(in srgb, var(--tc) 70%, #000) 100%);
}
/* bookings as physical little cards */
.ms-glyphs { display: flex; align-items: center; gap: 3px; }
.ms-glyphs.left { justify-content: flex-end; }
.ms-glyphs b { font-size: 11px; }
.ms-card {
  width: 10px; height: 14px; border-radius: 2px; display: inline-block;
  box-shadow: 0 1px 2px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.35);
  transform: rotate(6deg);
}
.ms-card.y { background: linear-gradient(160deg, #ffe14d, #e0b420); }
.ms-card.r { background: linear-gradient(160deg, #ff6a5b, #c62828); }
.ms-none { color: var(--dim); font-size: 11px; }
/* man of the match: a proper player chip with a gold rating plate */
.ms-motm {
  display: flex; align-items: center; gap: 12px; margin-top: 6px; padding: 10px 14px;
  border-radius: 10px; border: 1px solid rgba(240, 193, 74, .35);
  background: linear-gradient(115deg, rgba(240,193,74,.14), rgba(240,193,74,.03) 60%);
}
.ms-motm .shirt { width: 38px; height: 38px; font-size: 14px; }
.ms-motm-main { display: flex; flex-direction: column; gap: 1px; flex: 1; }
.ms-motm-tag { font-size: 10px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: #f0c14b; }
.ms-motm-main b { font-size: 15px; }
.ms-motm-rating {
  font-size: 16px; font-weight: 800; color: #14181e; padding: 4px 12px; border-radius: 8px;
  background: linear-gradient(180deg, #ffe08a, #f0c14b 55%, #cf9f2e);
  box-shadow: 0 2px 6px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.5);
}

/* ---------- historical match detail (box score) ---------- */
.md-card { padding: 0; max-width: 720px; }
.md-head {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px;
  padding: 20px 40px 16px; border-bottom: 1px solid var(--line);
}
.md-team { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 13px; }
.md-team .logo-img, .md-team .logo-svg { width: 42px; height: 42px; }
.md-score { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.md-score span { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.md-score i { font-style: normal; font-size: 11px; color: var(--dim); white-space: nowrap; }
/* lineups: one club at a time, flipped by the switcher — tight one-line rows */
.md-lu-switch { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.md-lu-row {
  display: grid; grid-template-columns: 40px 34px 1fr 20px 40px; align-items: center; gap: 8px;
  padding: 6px 4px; border-bottom: 1px solid var(--line); cursor: pointer;
}
.md-lu-row:last-child { border-bottom: none; }
.md-lu-row em { font-style: normal; font-size: 11.5px; color: var(--dim); font-variant-numeric: tabular-nums; }
.md-lu-row > b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-lu-row .md-lu-card { text-align: center; }
.md-lu-row .mr-rating { text-align: right; }
.mr-rating { font-size: 13px; color: var(--pitch); font-weight: 700; }

/* post-match: home gate attendance & ticket revenue */
.attend-card { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; }
.attend-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.attend-num { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.attend-num span { font-size: 13px; font-weight: 500; color: var(--dim); }
.attend-pct { font-size: 13px; color: var(--dim); font-weight: 600; }
.attend-bar { background: var(--panel); border-radius: 4px; height: 7px; overflow: hidden; margin: 7px 0; }
.attend-bar i { display: block; height: 100%; background: var(--pitch); border-radius: 4px; }
.attend-rev { font-size: 12.5px; color: var(--dim); }
.attend-rev b { color: var(--green); font-weight: 700; }

.results-list { display: flex; flex-direction: column; gap: 6px; }
.results-list .row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; }
.results-list .row .h { text-align: right; }
.results-list .row .s { font-weight: 600; font-variant-numeric: tabular-nums; }
.results-list .mine { color: var(--amber); }

/* ---------- squad / drag & drop ---------- */
.cell {
  position: absolute; width: 18%; max-width: 78px;
  transform: translate(-50%, -50%); text-align: center;
}
.cell .cell-dot {
  width: 34px; height: 34px; margin: 0 auto; border-radius: 50%;
  border: 2px dashed rgba(255,255,255,.0); color: rgba(255,255,255,.0);
  display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700;
  transition: all .15s;
}
.pitch.dragging .cell.free .cell-dot {
  border-color: rgba(255,255,255,.4); color: rgba(255,255,255,.65);
  background: rgba(0,0,0,.18);
}
.cell.hover .cell-dot { border-color: #fff; color: #fff; transform: scale(1.15); background: rgba(0,0,0,.35); }
.cell.hover .shirt, .bench-zone.hover { outline: 2px solid #fff; outline-offset: 2px; border-radius: 10px; }
.p-pos {
  font-size: 9px; font-weight: 800; letter-spacing: .5px; margin-top: 1px;
  color: #bff3cc; text-shadow: 0 1px 3px rgba(0,0,0,.8);
}
.p-pos.bad { color: #ffb3ad; }
.pos-badge.mini { font-size: 9px; min-width: 0; padding: 1px 5px; font-weight: 800; }
.pos-badge.oop-badge { background: #5a1d20; color: #ffb3ad; outline: 1px solid #f85149; }
.presets { margin-bottom: 12px; }
.lineup-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.lineup-head h2 { margin-bottom: 0; }
.scout-pitch .p-chip.scout { cursor: default; }
.scout-pitch .p-chip.scout .shirt { font-size: 15px; font-weight: 800; }
/* both sides are tappable — a full card, same as anywhere else in the app */
.scout-pitch .cell[data-card] { cursor: pointer; }
.scout-pitch .cell[data-card]:active .p-chip.scout { filter: brightness(1.15); }
/* your XI, faded underneath the opponent's (painted first, so their chips —
   added after in markup — naturally sit on top wherever they overlap) —
   a spatial + tactical reference, dimmed so the eye still favours theirs */
.scout-pitch .p-chip.mine-faded { opacity: .5; filter: grayscale(.4); }
.scout-pitch .p-chip.mine-faded .shirt { box-shadow: none; }
.team-morale {
  display: flex; align-items: center; gap: 10px; margin: -4px 0 12px;
  font-size: 12px; color: var(--dim);
}
.team-morale b { font-size: 14px; color: var(--text); }
.tm-face { font-size: 16px; }
.chip-btn.small { padding: 5px 10px; font-size: 12px; }

.p-chip { display: inline-flex; flex-direction: column; align-items: center; width: 100%; user-select: none; position: relative; }
/* status icon: outside the shirt, so it keeps its color when the shirt grays out */
.st-ico {
  position: absolute; top: -5px; left: calc(50% - 30px); z-index: 3;
  width: 17px; height: 17px; font-size: 13px; line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6));
}
.st-ico svg { width: 100%; height: 100%; display: block; }
.note-ico { width: 13px; height: 13px; vertical-align: -2px; }
.card-ico { width: 10px; height: 13px; flex: none; filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
.p-chip .shirt {
  width: 44px; height: 44px; border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, var(--c), color-mix(in srgb, var(--c) 60%, #000));
  border: 2px solid rgba(255,255,255,.8);
  color: #10141b; font-weight: 800; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 8px rgba(0,0,0,.5);
  position: relative;
}
.p-chip.draggable { cursor: grab; touch-action: none; }
.p-chip .shirt .q {
  position: absolute; right: -6px; bottom: -4px;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 8px;
  font-size: 10px; font-weight: 700; color: var(--text); padding: 0 5px; line-height: 14px;
}
.p-chip .shirt .flag {
  position: absolute; left: -7px; top: -6px; font-size: 12px; line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.7));
}
/* the star fan overlaps the bottom of the shirt circle, Top Eleven style */
.chip-stars { margin-top: -9px; position: relative; z-index: 2; }
.chip-stars .star-svg { width: 13px; height: 13px; }
.chip-stars .star-svg + .star-svg { margin-left: -5px; }
.p-chip .p-name {
  font-size: 11px; font-weight: 600; margin-top: 2px; max-width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  overflow: hidden; white-space: nowrap;
  color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.8);
}
.p-name .p-pos { margin: 0; }
.p-chip .fit { width: 40px; height: 3px; border-radius: 2px; background: rgba(0,0,0,.45); margin-top: 3px; overflow: hidden; }
.p-chip .fit i { display: block; height: 100%; }
.p-chip.oop .shirt { border-color: var(--red); }
.p-chip.out .shirt { filter: grayscale(1) brightness(.7); }
.p-chip.ghost {
  position: fixed; z-index: 100; pointer-events: none; width: 74px; opacity: .9;
  transform: translate(-50%, -60%) scale(1.08);
}

.bench-zone {
  margin-top: 12px; background: var(--panel2); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px; display: flex; flex-wrap: wrap; gap: 10px 4px;
}
.bench-zone .p-chip { width: 72px; }
.bench-zone .p-chip .p-name { color: var(--text); text-shadow: none; }
.bench-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; margin-bottom: -4px; }
.bench-title h2 { margin: 0; }
/* Auto-pick was a ghost button in a corner — the quietest treatment in the
   app, for the one control that saves a manager eleven separate drags. It
   takes the accent fill now, and the app's existing .pulse ring is added
   while the XI is short, since that is exactly when it is the answer. */
.autopick {
  display: inline-flex; align-items: center; gap: 7px; flex: none; white-space: nowrap;
  box-shadow: 0 2px 10px rgba(46, 160, 67, .35);
}
.autopick svg { width: 14px; height: 14px; fill: currentColor; flex: none; }
.squad-note { color: var(--dim); font-size: 12px; margin-top: 8px; }
.squad-note .warn { color: var(--red); }

/* ---------- tables ---------- */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; color: var(--dim); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; padding: 6px 8px; border-bottom: 1px solid var(--line); }
td { padding: 7px 8px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
tr:last-child td { border-bottom: none; }
tr.me td { background: rgba(210,153,34,.08); }
tr.me td:first-child { border-left: 2px solid var(--amber); }
.num { text-align: right; }

/* promotion / relegation zones */
tr.zone-down td:first-child { border-left: 3px solid var(--red); }
tr.zone-up td:first-child { border-left: 3px solid var(--pitch); }
tr.zone-down.me td:first-child, tr.zone-up.me td:first-child { border-left-width: 4px; }
.promo-legend { display: flex; gap: 16px; margin-top: 10px; font-size: 11.5px; color: var(--dim); }
.promo-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
.promo-legend i.zone-down { background: var(--red); }
.promo-legend i.zone-up { background: var(--pitch); }
.promo-banner { border-left: 3px solid var(--amber); }
.promo-line { font-size: 13px; margin: 6px 0; color: var(--text); }
.promo-tag { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; margin-right: 8px; }
.promo-tag.up { background: rgba(46,160,67,.18); color: var(--pitch); }
.promo-tag.down { background: rgba(248,81,73,.16); color: var(--red); }
.promo-tag.retire { background: rgba(210,153,34,.14); color: #d9b976; }

/* "where am I towards promotion/relegation" — it used to be a second banner
   under the subtabs with its own trophy backdrop; it lives in the League
   header now (see .lg-head), which took the artwork with it. */
.standing-pos {
  font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; min-width: 44px; text-align: center;
  text-shadow: 0 1px 4px rgba(0,0,0,.7);
}
.standing-info { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 13px; text-align: right; text-shadow: 0 1px 4px rgba(0,0,0,.7); }
.standing-info b { font-size: 14px; }
.standing-info span { color: #c7d0dc; }

.lg-head.standing-chasing .standing-pos { color: var(--amber); }
.lg-head.standing-safe .standing-pos { color: var(--pitch); }
.club-cell { display: flex; align-items: center; gap: 8px; }
.pos-badge {
  display: inline-block; min-width: 30px; text-align: center; font-size: 11px; font-weight: 700;
  border-radius: 4px; padding: 2px 4px;
}
.pos-GK { background: #3d2f00; color: #e3b341; }
.pos-DF { background: #0d2d4a; color: #79c0ff; }
.pos-MF { background: #0f3520; color: #56d364; }
.pos-FW { background: #43181a; color: #ff7b72; }

/* star quality tiers: 5 stars per color, yellow -> green -> blue -> purple.
   Chunky SVG stars, fanned left-over-right; partial fill clips the color.
   All four tiers share the same rim/gloss treatment so they read as one
   consistent family — only the fill color marks the tier. */
.star-row { display: inline-flex; align-items: center; white-space: nowrap; }
.star-svg {
  position: relative; width: 24px; height: 24px; flex: none;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .45));
}
.star-svg + .star-svg { margin-left: -9px; } /* fanned overlap, left star on top */
/* A star is always its tier COLOUR — solid where earned, a dim-but-solid
   wash of the same colour where not, whether that's the unfilled sliver of
   a partially-earned star or a whole padding star trailing after it (see
   starsHTML's `pad` — the current tier always fills out to 5 slots so a
   moderate player reads as "2 of 5 filled", not a sparse 1-2 stars). This
   tint has to be strong enough that a dim BLUE row and a dim GREEN row are
   obviously different tiers at a glance, not just "yellow + green" both
   times — too faint and every non-yellow player ends up looking the same
   regardless of how far into their tier they actually are. */
.star-svg .empty { fill: transparent; }
.star-svg.yellow .empty { fill: rgba(246, 200, 30, .5); }
.star-svg.green  .empty { fill: rgba(62, 196, 85, .5); }
.star-svg.blue   .empty { fill: rgba(77, 163, 255, .52); }
.star-svg.purple .empty { fill: rgba(163, 113, 247, .54); }
.star-svg.gray   .empty { fill: rgba(139, 152, 169, .5); }
.star-svg .rim { fill: none; stroke: #10141b; stroke-width: 1.5; stroke-linejoin: round; }
.star-svg .gloss { fill: rgba(255, 255, 255, .38); }
.star-svg.yellow .fill { fill: #f6c81e; }
.star-svg.green .fill { fill: #3ec455; }
.star-svg.blue .fill { fill: #4da3ff; }
.star-svg.purple .fill { fill: #a371f7; }
.star-svg.gray .fill { fill: #8b98a9; }

/* text stars: legend + compact chip badges */
.stars { font-size: 13px; letter-spacing: 1px; white-space: nowrap; }
.stars i { font-style: normal; color: rgba(139, 152, 169, .28); } /* empty stars */
.stars.yellow { color: #e8c31e; }
.stars.green { color: #3fb950; }
.stars.blue { color: #58a6ff; }
.stars.purple { color: #a371f7; }
.stars.compact { font-size: 10px; font-weight: 800; letter-spacing: 0; }

.bar { background: var(--panel2); border-radius: 4px; height: 8px; width: 70px; overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 4px; }
.status-out { color: var(--red); font-size: 12px; display: inline-flex; align-items: center; gap: 3px; }
.card-wrap { display: inline-flex; }
.starter-dot { color: var(--pitch); font-size: 12px; }

.form span { display: inline-block; width: 16px; height: 16px; line-height: 16px; text-align: center; border-radius: 3px; font-size: 10px; font-weight: 700; margin-right: 2px; }
.form .W { background: var(--pitch); color: #04160a; }
.form .D { background: var(--panel2); color: var(--dim); }
.form .L { background: #6e2226; color: #ffb3ad; }
/* Before a ball is kicked there are no results to show. Five empty slots say
   that in the shape the row will keep — better than the words "no games yet",
   which wrapped onto three lines in the narrow column of the match card, and
   it means the card doesn't change height once the first result lands. */
.form .F { background: rgba(255, 255, 255, .07); border: 1px dashed var(--line); }

/* ---------- tactics ---------- */
.tac-board { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 700px) { .tac-board { grid-template-columns: 1fr; } }
.tac-panel h2 { font-size: 14px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.tac-group { margin-bottom: 6px; }
.tac-group label { display: block; font-size: 13px; color: var(--text); margin-bottom: 6px; font-weight: 600; }
.tac-group .choice-row { margin-bottom: 6px; }
.tac-group .hint { margin: 0 0 12px; font-size: 12px; }
.train-select {
  background: var(--panel2); color: var(--text); border: 1px solid var(--line);
  border-radius: 6px; font: inherit; font-size: 12px; padding: 3px 6px;
}
.training { font-size: 12px; color: var(--amber); white-space: nowrap; }
.training-none { font-size: 11px; color: var(--dim); font-style: italic; }
.link-btn { background: none; border: none; color: var(--dim); cursor: pointer; font-size: 12px; }
.link-btn:hover { color: var(--red); }
.pos-list { display: flex; gap: 3px; flex-wrap: wrap; min-width: 84px; }
.pos-badge { min-width: 26px; }

.choice-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.chip-btn {
  background: var(--panel2); border: 1px solid var(--line); color: var(--text);
  border-radius: 8px; padding: 8px 16px; cursor: pointer; font: inherit;
}
.chip-btn.sel { border-color: var(--pitch); background: rgba(46,160,67,.15); }
.chip-btn.sm { padding: 5px 11px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.hint { color: var(--dim); font-size: 13px; margin: -8px 0 16px; }
/* that -8px is there to hug a heading above — but two hints in a row would
   overlap by exactly that much, so a hint following a hint sits normally */
.hint + .hint { margin-top: 6px; }

/* match plan panel */
.plan-panel { grid-column: 1 / -1; }
.plan-rule { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; background: var(--panel2); }
.plan-rule.off { opacity: .55; }
.plan-rule label { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.plan-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.mini-chip {
  background: var(--panel); border: none; color: var(--dim); cursor: pointer;
  font: 600 11.5px inherit; padding: 4px 12px;
}
.mini-chip.sel { background: var(--pitch); color: #04160a; }
.plan-when { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--dim); }
.plan-when b { color: var(--text); }
.plan-rule.off .plan-when { pointer-events: none; }
.ev-row.plan .ev-txt { color: #58a6ff; font-weight: 600; }

/* ---- fixtures carousel: one round per screen, snap-scrolled, centered on
   the current round; arrows + the number strip jump, swiping flips ---- */
.fx-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.fx-arrow {
  flex: none; width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--panel2); color: var(--text); font-size: 20px; line-height: 1; cursor: pointer;
}
.fx-arrow:active { background: rgba(46,160,67,.18); }
.round-jump { flex: 1; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.round-jump::-webkit-scrollbar { display: none; }
.round-jump button {
  flex: none; min-width: 32px; background: var(--panel2); border: 1px solid var(--line); color: var(--dim);
  border-radius: 6px; padding: 6px 9px; font: 600 12.5px inherit; font-variant-numeric: tabular-nums; cursor: pointer;
}
.round-jump button.active { background: rgba(46,160,67,.18); border-color: var(--pitch); color: var(--text); }

.fx-carousel {
  position: relative; display: flex; overflow-x: auto;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.fx-carousel::-webkit-scrollbar { display: none; }
.fx-slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: center; scroll-snap-stop: always; }
.fx-card { margin: 0 2px; }
.fx-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.fx-head h2 { margin-bottom: 0; font-size: 15px; color: var(--text); }
.fx-when { margin-left: auto; font-size: 12.5px; color: var(--dim); font-variant-numeric: tabular-nums; }
.fx-status { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; padding: 2px 8px; border-radius: 5px; }
.fx-status.next { background: rgba(46,160,67,.18); color: var(--green); }
.fx-status.played { background: var(--panel2); color: var(--dim); }

.fx-games { display: flex; flex-direction: column; gap: 18px; max-width: 760px; margin: 0 auto; }
.fx-match {
  position: relative;
  display: grid; grid-template-columns: 1fr 84px 1fr; align-items: center; gap: 12px;
  padding: 13px 16px; border-radius: 10px; background: var(--panel2); border: 1px solid var(--line);
  font-size: 15px;
}
.fx-match.rowlink { cursor: pointer; }
.fx-match.rowlink:hover { border-color: var(--pitch); }
/* your own fixture: a floating badge + tinted card + amber glow — not just a
   different border colour, so it actually jumps out of the round's list */
.fx-match.mine-match {
  border-color: var(--amber);
  background: linear-gradient(90deg, rgba(210,153,34,.16), rgba(210,153,34,.05));
  box-shadow: 0 0 0 1px rgba(210,153,34,.3), 0 6px 16px rgba(210,153,34,.18);
}
.fx-mine-badge {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--amber); color: #10141b; font-size: 10.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .4px; padding: 3px 10px; border-radius: 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,.4); white-space: nowrap;
}
.fx-side { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fx-side.h { justify-content: flex-end; }
.fx-side.h .fx-name { text-align: right; }
.fx-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.fx-side.mine .fx-name { color: var(--amber); }
.logo-svg.fx-crest, .logo-img.fx-crest { width: 34px; height: 34px; display: block; flex: none; }
.logo-img.fx-crest { border-radius: 7px; object-fit: contain; }
.fx-score {
  text-align: center; font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 7px 0;
}
.fx-score:not(.played) { color: var(--dim); font-size: 12.5px; font-weight: 600; }

/* real club crest art, sized for a dense list row (table + top performers) */
.logo-svg.tbl-crest, .logo-img.tbl-crest { width: 22px; height: 22px; display: block; flex: none; }
.logo-img.tbl-crest { border-radius: 5px; object-fit: contain; }

/* Top performers: three distinct sections (goals / assists / rating), each
   its own card so they read as separate leaderboards, not one shared table.
   A dark scrim over the action-shot backdrop keeps every row legible. */
.perf-sections { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.perf-sections .perf-card { margin-bottom: 0; }
.perf-card {
  position: relative; overflow: hidden;
  background-color: #141a26;
  background-image:
    linear-gradient(180deg, rgba(13,17,23,.86) 0%, rgba(13,17,23,.93) 100%),
    url('img/top-perform.jpg');
  background-size: 100% 100%, cover;
  background-position: center, center 22%;
}
.perf-card h2 { text-shadow: 0 1px 4px rgba(0,0,0,.6); }
@media (max-width: 720px) {
  .perf-sections { grid-template-columns: 1fr; }
}

/* the #1 spot gets a richer spotlight treatment, clearly set apart from 2nd-5th */
.perf-leader {
  display: flex; align-items: center; gap: 10px; padding: 10px; margin: 10px 0 8px;
  border-radius: 8px; border: 1px solid rgba(210,153,34,.35);
  background:
    linear-gradient(135deg, rgba(210,153,34,.24), rgba(210,153,34,.06)),
    linear-gradient(135deg, rgba(13,17,23,.55), rgba(13,17,23,.55));
}
.perf-leader-medal { font-size: 20px; flex: none; line-height: 1; }
.logo-svg.perf-leader-crest, .logo-img.perf-leader-crest { width: 40px; height: 40px; display: block; flex: none; }
.logo-img.perf-leader-crest { border-radius: 8px; object-fit: contain; }
.perf-leader-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
/* the name and its "yours" chip share one row — dropped straight into the
   column they became stacked flex items, and the chip stretched into a green
   bar the width of the card */
.perf-leader-nameline { display: flex; align-items: center; min-width: 0; }
.perf-leader-name { font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.perf-leader-nameline .perf-mine-tag { flex: none; }
.perf-leader-team { font-size: 11.5px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.perf-leader-val { font-size: 21px; font-weight: 800; color: #e3b341; font-variant-numeric: tabular-nums; flex: none; }
.perf-mine-tag {
  display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .3px; padding: 1px 6px; border-radius: 4px; background: var(--pitch); color: #04160a; vertical-align: middle;
}

/* 2nd-5th: a compact list under the leader spotlight, on its own translucent
   backing so the photo behind the card doesn't fight the text */
.perf-list { display: flex; flex-direction: column; background: rgba(13,17,23,.4); border-radius: 8px; padding: 2px 0; overflow: hidden; }
/* the inset lives on the ROW, not the list: a highlighted row needs room on
   both sides for its rail and its ground, or the green bar lands on the rank
   digit and the tally is flush against the edge */
.perf-row { display: grid; grid-template-columns: 16px 22px 1fr auto; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid rgba(255,255,255,.08); }
.perf-row:last-child { border-bottom: none; }
/* One of ours. It is the CLUB that identifies him as ours, so the club is what
   goes green — the row picks up a green rail and ground so it reads at a
   glance, instead of a single amber word that could be anything. */
.perf-row.mine { background: rgba(46, 160, 67, .10); box-shadow: inset 3px 0 0 var(--pitch); }
.perf-row.mine .perf-name { color: var(--text); font-weight: 700; }
.perf-row.mine .perf-team { color: var(--pitch); font-weight: 700; }
.perf-leader.mine { border-color: var(--pitch); box-shadow: inset 3px 0 0 var(--pitch); }
.perf-leader.mine .perf-leader-team { color: var(--pitch); font-weight: 700; }
.perf-rank { color: var(--dim); font-size: 12px; font-variant-numeric: tabular-nums; }
.perf-who { display: flex; flex-direction: column; min-width: 0; }
.perf-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.perf-team { font-size: 11px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.perf-val { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- player card ---------- */
.modal-back {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(5, 8, 12, .72);
  display: flex; align-items: center; justify-content: center; padding: 18px;
}
.p-card {
  position: relative; background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 18px; max-width: 640px; width: 100%;
  max-height: 92vh; overflow-y: auto; overflow-x: hidden;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .6);
}
.card-close { position: absolute; top: 10px; right: 12px; font-size: 16px; z-index: 2; }
.scout-tag {
  position: absolute; top: 12px; left: 16px; z-index: 2;
  font-size: 10.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px; background: rgba(0,0,0,.55); color: #f0c14b;
  border: 1px solid rgba(240,193,74,.4);
}

/* ---------- player card v2: hero + tab rail (Top Eleven style) ---------- */
.p-card.v2 { padding: 0; max-width: 760px; }
.card-hero {
  display: flex; align-items: center; gap: 18px; padding: 20px 22px 18px;
  background: linear-gradient(130deg,
    color-mix(in srgb, var(--c) 42%, #10141b),
    color-mix(in srgb, var(--c) 14%, #10141b) 70%);
  border-bottom: 1px solid var(--line);
}
.hero-shirt { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; }
.shirt.xl {
  width: 84px; height: 84px; border-radius: 50%; font-size: 26px; font-weight: 800;
  background: radial-gradient(circle at 50% 30%, var(--c), color-mix(in srgb, var(--c) 60%, #000));
  border: 3px solid rgba(255, 255, 255, .85); color: #10141b;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}
.hero-shirt .shirt-num { font-size: 16px; }
.hero-main { flex: 1; min-width: 0; }
.hero-name { font-size: 24px; font-weight: 800; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* whose player this is — the first thing you want to know about one that
   isn't yours, and the card never said it */
.hero-club { display: flex; align-items: center; gap: 7px; margin-top: 4px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.82); }
.hero-club .hero-crest { width: 20px; height: 20px; display: block; flex: none; }
.hero-club.none { color: rgba(255,255,255,.6); font-style: italic; font-weight: 500; }
/* a wage we have no business knowing — stated, not blanked, so it reads as a
   fact about the scouting report rather than a value that failed to load */
.salary-unknown { font-style: italic; font-weight: 600; opacity: .72; }
.hero-ovr { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 8px; flex-wrap: wrap; }
.ovr-label { font-size: 11px; font-weight: 800; letter-spacing: 1.5px; color: rgba(255,255,255,.65); }
.ovr-value { font-size: 34px; font-weight: 800; line-height: 1; }
.hero-stars { transform: translateY(-2px); }
.hero-meta { display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgba(255,255,255,.8); flex-wrap: wrap; }
.hero-meta i { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.35); }
.hero-age b { font-size: 19px; font-weight: 800; color: #fff; }
.hero-salary { margin-top: 7px; font-size: 12px; color: rgba(255,255,255,.65); display: flex; align-items: baseline; gap: 5px; }
.hero-salary b { font-size: 16px; font-weight: 800; color: #fff; }
.hero-salary span { color: rgba(255,255,255,.55); }
.hero-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex: none; }
.hero-pos .pos-badge, .card-hero .pos-badge {
  font-size: 13px; padding: 5px 9px; min-width: 38px;
  border: 1px solid rgba(255, 255, 255, .75);
}
.hero-abil { font-size: 20px; letter-spacing: 4px; }
.pop-badge {
  font-size: 12px; font-weight: 700; color: var(--pc);
  background: rgba(0, 0, 0, .3); border: 1px solid color-mix(in srgb, var(--pc) 50%, transparent);
  border-radius: 10px; padding: 3px 10px;
}
.pop-tier { font-size: 11px; font-weight: 700; }

.card-body { display: flex; min-height: 340px; }
.card-tabs {
  display: flex; flex-direction: column; gap: 2px; flex: none; width: 128px;
  background: var(--panel2); border-right: 1px solid var(--line); padding: 12px 0;
}
.card-tabs button {
  background: none; border: none; color: var(--dim); font: 600 13px/1.2 inherit;
  text-align: left; padding: 11px 14px; cursor: pointer;
  border-left: 3px solid transparent;
}
.card-tabs button:hover { color: var(--text); }
.card-tabs button.active { color: var(--text); border-left-color: var(--pitch); background: rgba(46, 160, 67, .08); }
/* compare sits apart from the info tabs above it — a lesser, distinct action */
.card-tabs-compare { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); color: var(--dim); }
.card-view { flex: 1; padding: 16px 18px; overflow-y: auto; min-width: 0; }

/* overview tab */
.ov-meters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.ov-meter { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--dim); }
.ov-meter b { font-size: 14px; color: var(--text); }
.bar.big { width: 110px; height: 10px; }
.ov-status {
  margin-left: auto; font-size: 12px; color: var(--dim);
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
/* Unavailable is the headline fact about a player, not a footnote: a badge,
   at a size you can read at arm's length, in the colour of the problem. */
.ov-status-out {
  font-size: 14px; font-weight: 800; letter-spacing: .01em;
  color: #ffb3ad; background: rgba(248, 81, 73, .16);
  border: 1px solid #6e2226; border-radius: 999px; padding: 7px 14px;
}
.ov-status-out svg { width: 15px; height: 15px; }
.ov-status-note { color: var(--amber); font-weight: 700; font-size: 12.5px; }
.ov-section { margin-bottom: 14px; }
.ov-section h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--dim); margin-bottom: 8px; }
.ov-combos { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.char-prose {
  font-size: 13.5px; font-style: italic; color: #d5c9ee; line-height: 1.55;
  border-left: 3px solid #4a3d63; background: rgba(93, 63, 145, .1);
  border-radius: 0 8px 8px 0; padding: 10px 12px; margin: 0;
}
.ov-ability { display: flex; gap: 10px; align-items: flex-start; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; margin-bottom: 6px; }
.ov-ability .ov-ic { font-size: 20px; line-height: 1.2; }
.ov-ability b { font-size: 13px; }
.ov-ability p { font-size: 12px; color: var(--dim); margin: 1px 0 0; }

/* attributes tab: spacious rows, colored accents, big numbers */
.attr-grid2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 12px; }
@media (max-width: 700px) { .attr-grid2 { grid-template-columns: 1fr; } }
.attr-head2 {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .7px;
  padding: 4px 2px 8px;
}
.attr-head2 b { font-size: 18px; }
.attr-head2.g-def { color: #56d364; }
.attr-head2.g-att { color: #e8c31e; }
.attr-head2.g-phy { color: #79c0ff; }
.attr-head2.g-gk { color: #79d0ff; }
.attr2 {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  background: var(--panel2); border-radius: 6px; padding: 9px 12px; margin-bottom: 6px;
  border-left: 3px solid var(--line); font-size: 13px;
}
.attr2.g-def { border-left-color: #2ea043; }
.attr2.g-att { border-left-color: #d4a017; }
.attr2.g-phy { border-left-color: #3d8bd4; }
.attr2.g-gk { border-left-color: #3d9bd4; }
.attr2 b { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* compare tab */
.cmp-picker { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--dim); margin-bottom: 12px; }
.cmp-picker select {
  flex: 1; max-width: 260px; background: var(--panel2); color: var(--text);
  border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: 12px; padding: 6px 8px;
}
.cmp-heroes { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-bottom: 12px; }
.cmp-hero { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.cmp-hero .shirt {
  width: 46px; height: 46px; border-radius: 50%; font-size: 14px; font-weight: 800;
  background: radial-gradient(circle at 50% 30%, var(--c), color-mix(in srgb, var(--c) 60%, #000));
  border: 2px solid rgba(255,255,255,.8); color: #10141b;
  display: flex; align-items: center; justify-content: center;
}
.cmp-hero b { font-size: 13px; }
.cmp-stars .star-svg { width: 14px; height: 14px; }
.cmp-stars .star-svg + .star-svg { margin-left: -5px; }
.cmp-vs { color: var(--dim); font-size: 12px; font-weight: 700; padding: 0 8px; }
.cmp-salary { font-size: 11.5px; font-weight: 700; color: var(--text); margin-top: 2px; }
.cmp-salary i { font-style: normal; font-weight: 500; color: var(--dim); }
.cmp-grid { display: flex; flex-direction: column; gap: 3px; }
.cmp-row {
  display: grid; grid-template-columns: 30px 1fr 86px 1fr 30px; gap: 8px; align-items: center;
  background: var(--panel2); border-radius: 6px; padding: 7px 12px; font-size: 12.5px;
}
.cmp-row span { text-align: center; color: var(--dim); }
.cmp-row b { font-size: 15px; font-variant-numeric: tabular-nums; }
.cmp-row b:first-child { text-align: right; }
.cmp-row b:last-child { text-align: left; }
.cmp-row b.win { color: #4da3ff; }
.cmp-bar { height: 8px; border-radius: 4px; background: rgba(0, 0, 0, .35); overflow: hidden; display: flex; }
.cmp-bar.left { justify-content: flex-end; } /* grows from the center, leftward */
.cmp-bar i { display: block; height: 100%; border-radius: 4px; background: #e6edf3; }
.cmp-bar i.dom { background: #4da3ff; }
.cmp-head {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .8px;
  color: var(--dim); padding: 10px 4px 4px; text-align: center;
}
.cmp-head.g-def { color: #56d364; }
.cmp-head.g-att { color: #e8c31e; }
.cmp-head.g-phy { color: #79c0ff; }
.cmp-head.g-gk { color: #79d0ff; }
.cmp-head.g-char-h { color: #c8a8ff; }
.cmp-head.g-team-h { color: var(--pitch); }
.team-cmp { margin-top: 14px; }

/* statistics tab */
.stats-h { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--dim); margin-bottom: 10px; }
.stat-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 600px) { .stat-tiles { grid-template-columns: repeat(2, 1fr); } }
.stat-tile {
  background: var(--panel2); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 10px; text-align: center;
}
.stat-tile b { display: block; font-size: 26px; font-weight: 800; line-height: 1.1; }
.stat-tile span { font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: .6px; }

@media (max-width: 640px) {
  .card-body { flex-direction: column; }
  .card-tabs { flex-direction: row; width: auto; border-right: none; border-bottom: 1px solid var(--line); padding: 0; }
  .card-tabs button { border-left: none; border-bottom: 3px solid transparent; }
  .card-tabs button.active { border-bottom-color: var(--pitch); }
  .card-hero { flex-wrap: wrap; }
}
.card-head { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.card-head .shirt.lg {
  width: 62px; height: 62px; border-radius: 50%; font-size: 19px; font-weight: 800;
  background: radial-gradient(circle at 50% 30%, var(--c), color-mix(in srgb, var(--c) 60%, #000));
  border: 2px solid rgba(255,255,255,.8); color: #10141b;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.card-name { font-size: 19px; font-weight: 700; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nation-flag { background: none; border: none; cursor: pointer; padding: 0; line-height: 1; display: inline-flex; }
.flag-svg {
  width: 21px; height: 15px; border-radius: 2px;
  outline: 1px solid rgba(255, 255, 255, .25); display: inline-block; vertical-align: -2px;
}
.nation-name { font-size: 13px; color: var(--dim); font-weight: 600; }
.shirt-num {
  font-size: 13px; font-weight: 800; color: var(--amber); cursor: pointer;
  border: 1px dashed transparent; border-radius: 6px; padding: 1px 6px;
}
.shirt-num:hover { border-color: var(--amber); }
.num-input {
  width: 44px; background: var(--panel2); color: var(--text); font: inherit;
  border: 1px solid var(--amber); border-radius: 4px; padding: 0 4px;
}
.card-sub { display: flex; align-items: center; gap: 6px; margin: 3px 0 5px; flex-wrap: wrap; }
.card-skill { color: var(--dim); font-size: 12px; }
.card-meters {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12px; color: var(--dim); margin-bottom: 14px;
}
.card-status { margin-left: auto; }
.attr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 640px) { .attr-grid { grid-template-columns: 1fr; } }
.attr-group { background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
.attr-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
  padding: 2px 4px 8px; border-bottom: 1px solid var(--line); margin-bottom: 8px;
}
.attr-head b { font-size: 14px; }
.g-def .attr-head { color: #56d364; }
.g-att .attr-head { color: #e8c31e; }
.g-phy .attr-head { color: #79c0ff; }
.g-gk .attr-head { color: #79d0ff; }
.g-char { margin-top: 12px; border-color: #4a3d63; background: rgba(93, 63, 145, .12); }
.foot-badge {
  display: inline-flex; align-items: center;
  border-radius: 10px; padding: 2px 6px; border: 1px solid var(--line);
  background: var(--panel2);
}
.foot-badge .feet { width: 30px; height: 18px; display: block; }
.foot-badge .feet g { fill: #454e5c; }        /* the foot he doesn't favor */
.foot-badge .feet g.on { fill: #3fb950; }     /* his foot (or both) in green */

.combo {
  background: rgba(200, 168, 255, .14); border: 1px solid #4a3d63; color: #d9c4ff;
  border-radius: 10px; padding: 2px 9px; font-size: 11px; font-weight: 600;
  text-transform: none; letter-spacing: 0; margin-left: 6px;
}
.g-char .attr-head { color: #c8a8ff; border-color: #4a3d63; }
.char-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: 10px; padding: 4px 2px 2px; }
.char-item { text-align: center; font-size: 11px; color: var(--dim); }
.char-item b { display: block; font-size: 20px; margin-bottom: 2px; }
.attr { display: grid; grid-template-columns: 1fr 64px 26px; gap: 8px; align-items: center; font-size: 12.5px; padding: 3px 4px; }
.attr b { text-align: right; font-variant-numeric: tabular-nums; }
.attr-bar { background: rgba(0,0,0,.35); height: 6px; border-radius: 3px; overflow: hidden; }
.attr-bar i { display: block; height: 100%; border-radius: 3px; }
.card-abilities { margin-top: 12px; font-size: 12px; color: var(--dim); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ability-chip {
  background: rgba(210, 153, 34, .12); border: 1px solid #5a4a1e; color: #ffd98a;
  border-radius: 10px; padding: 3px 10px; font-size: 12px; font-weight: 600;
}
.card-affin { margin-top: 12px; font-size: 12px; color: var(--dim); display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.card-affin .pos-badge b { font-weight: 600; opacity: .8; }
.pos-badge.dim { opacity: .45; }
.rowlink { cursor: pointer; }
.rowlink:hover td { background: rgba(255,255,255,.025); }
.results-list .rowlink { border-radius: 6px; }
.results-list .rowlink:hover { background: rgba(255,255,255,.04); }

.banner { text-align: center; padding: 24px 12px; }
.banner .big { font-size: 26px; margin-bottom: 6px; }
.banner p { color: var(--dim); margin-bottom: 16px; }
/* off-season: next-season countdown (Home banner + League banner) */
.season-next { font-size: 15px; color: var(--text); margin-bottom: 14px; }
.season-next .season-count { color: var(--amber); font-variant-numeric: tabular-nums; }
.season-next-sub { display: block; font-size: 11.5px; color: var(--dim); margin-top: 3px; font-weight: 400; }
/* the Cup: a Top Eleven-style knockout TREE — rounds as columns, ties as
   two-row cards with per-team score cells, rails pointing toward the final */
.cup-tree-wrap { overflow-x: auto; margin-top: 10px; padding-bottom: 6px; --cup-node-h: 54px; }
.cup-tree { display: flex; gap: 30px; min-width: 760px; align-items: stretch; }
.cup-col { flex: 1; min-width: 185px; display: flex; flex-direction: column; }
.cup-col h3 { font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px; color: var(--dim); margin: 0 0 8px; text-align: center; }
.cup-when { font-weight: 700; color: var(--amber); text-transform: none; letter-spacing: 0; margin-left: 6px; }
/* EVERY level distributes its children evenly with space-around and no gaps —
   that's what makes the tree line up: a node in a column of N sits at
   (i + 0.5)/N of the height, so each pair's midpoint in one column lands
   exactly on the centre of the tie it feeds in the next. (Using
   space-between inside pairs put node centres at fixed pixel offsets
   instead, which drifted out of line from the quarter-finals on.) */
.cup-col-ties { flex: 1; display: flex; flex-direction: column; justify-content: space-around; min-height: calc(var(--cup-node-h) * 8 + 60px); }
/* a PAIR of ties: two nodes evenly spaced, so their centres sit at 25% and
   75% of the pair — joined by a vertical rail that runs on into the tie they feed */
.cup-pair { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: space-around; }
.cup-node {
  position: relative; background: var(--panel2); border: 1px solid var(--line);
  border-radius: 8px; overflow: visible; font-size: 12px; height: var(--cup-node-h);
  display: flex; flex-direction: column;
}
/* horizontal stub out of every tie that feeds a next round */
.cup-col:not(:last-child) .cup-node::after {
  content: ''; position: absolute; right: -15px; top: 50%; width: 15px; height: 2px;
  background: var(--line);
}
/* the VERTICAL rail joining a pair — spans exactly between the two nodes'
   centres (each node is a known height, so the offsets are exact) */
.cup-col:not(:last-child) .cup-pair::after {
  content: ''; position: absolute; right: -15px;
  top: calc(var(--cup-node-h) / 2); bottom: calc(var(--cup-node-h) / 2);
  width: 2px; background: var(--line);
}
/* and on from the rail's midpoint into the next round's tie */
.cup-col:not(:last-child) .cup-pair::before {
  content: ''; position: absolute; right: -30px; top: 50%; width: 15px; height: 2px;
  background: var(--line);
}
.cup-node.me { border-color: color-mix(in srgb, var(--amber) 60%, var(--line)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--amber) 30%, transparent); }
.cup-node.rowlink { cursor: pointer; }
.cup-node.rowlink:hover { border-color: var(--dim); }
.cup-node.ghost { opacity: .35; border-style: dashed; }
.cupt-row { flex: 1; display: flex; align-items: center; gap: 6px; padding: 0 8px; color: var(--dim); min-width: 0; }
.cupt-row + .cupt-row { border-top: 1px solid var(--line); }
.cupt-club { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; cursor: pointer; }
.cupt-club:hover .cupt-name { color: var(--amber); text-decoration: underline; }
.cupt-row.winner { color: var(--text); font-weight: 700; background: color-mix(in srgb, var(--green) 7%, transparent); }
.cupt-row.mine .cupt-name { color: var(--amber); }
.cupt-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cupt-score {
  min-width: 22px; text-align: center; padding: 2px 5px; border-radius: 4px;
  background: rgba(0,0,0,.35); font-weight: 800; font-variant-numeric: tabular-nums; flex: none;
}
.cupt-pens { min-width: 20px; text-align: center; padding: 2px 4px; border-radius: 4px; background: color-mix(in srgb, var(--amber) 22%, transparent); color: var(--amber); font-weight: 800; font-size: 11px; flex: none; }
.cup-crest { width: 15px; height: 15px; flex: none; }
.cup-decider { position: absolute; top: -8px; right: 6px; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--amber); background: var(--panel); border: 1px solid color-mix(in srgb, var(--amber) 40%, var(--line)); border-radius: 999px; padding: 1px 6px; }
.cup-champ-col .cup-champbox {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  background: color-mix(in srgb, var(--amber) 10%, var(--panel2));
  border: 1px solid color-mix(in srgb, var(--amber) 50%, var(--line));
  border-radius: 10px; padding: 14px 12px; font-size: 14px;
}
.cup-drawnote { margin-top: 12px; }
/* multiplayer entry gate: sign-in + claim-a-club screens */
.mp-gate {
  position: fixed; inset: 0; z-index: 80;
  background: var(--bg, #0d1117);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  overflow-y: auto;
}
.mp-card {
  width: 100%; max-width: 420px; text-align: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 26px 22px; display: flex; flex-direction: column; gap: 12px;
}
.mp-card.mp-wide { max-width: 720px; }
.mp-card h1 { font-size: 22px; }
.mp-card .rename-input { text-align: center; font-size: 16px; }  /* the sign-in fields: see the 16px floor above */
/* real sign-in additions: the quieter secondary actions under the main button */
/* The base .btn is the green primary, so it carries near-black text. A
   secondary button must override the COLOUR as well as the background —
   forgetting that leaves dark text on a dark panel, which is invisible. */
.mp-card .btn.mp-alt { background: var(--panel2); color: var(--text); border: 1px solid var(--line); }
.mp-card .btn:disabled { opacity: .55; pointer-events: none; }
.mp-or {
  display: flex; align-items: center; gap: 10px;
  color: var(--dim); font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
}
.mp-or::before, .mp-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.mp-link {
  background: none; border: none; padding: 2px; cursor: pointer;
  color: var(--dim); font: inherit; font-size: 13px; text-decoration: underline;
}
.mp-link:hover { color: var(--text); }
/* the country line (M5): detected from the connection, changeable in place */
.mp-country { display: flex; align-items: center; gap: 8px; justify-content: center; }
.mp-country-label { color: var(--dim); font-size: 13px; white-space: nowrap; }
.mp-country-select {
  background: var(--panel2); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 14px; max-width: 220px;
}

/* the world label on the League header */
.lg-world { font-size: 14px; font-weight: 600; color: var(--dim); margin-right: 10px; }
.club-flag .flag-svg, .club-flag .flag-emoji { vertical-align: -1px; }
.flag-emoji { font-size: 15px; line-height: 1; }

/* the world market (M6): foreign listings sit in the same row shape as the
   home board, with the seller's country carried on every line */
.mk-world-sub {
  font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--dim); margin: 10px 2px 6px;
}
.mk-world-sub:first-child { margin-top: 0; }
.mk-world-row .mk-from {
  display: inline-flex; align-items: center; gap: 5px; margin-left: 8px;
  padding: 1px 8px; border-radius: 9px;
  background: var(--panel2); border: 1px solid var(--line);
  font-size: 11px; color: var(--dim); white-space: nowrap;
}
.mk-world-row .mk-from .flag-svg, .mk-world-row .mk-from .flag-emoji { width: 14px; height: 10px; }
.mk-noclock { color: var(--dim); }
.mk-clock { font-variant-numeric: tabular-nums; }
.mk-you { color: var(--accent, #2ecc71); }
/* both listing routes fit side by side on the sell rows */
.mk-sell-actions { display: flex; flex-direction: column; gap: 5px; align-items: stretch; }
.mk-sell-actions .btn { white-space: nowrap; }
/* The world-market bid dialog. Built like a game panel, not a form: the
   player reads at a glance, ONE number dominates, and the rest is chips.
   Its own classes throughout so nothing collides with the home auction
   window (which owns .bid-who / .bid-box). */
.wb-box { max-width: 380px; display: flex; flex-direction: column; gap: 12px; padding: 20px 18px 16px; }
.wb-player { display: flex; align-items: center; gap: 11px; }
.wb-flag { flex: 0 0 auto; display: flex; }
.wb-flag .flag-svg { width: 30px; height: 21px; border-radius: 3px; }
.wb-flag .flag-emoji { font-size: 25px; }
.wb-id { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wb-name { font-size: 19px; font-weight: 700; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--dim); }
/* stars carry the whole "how good is he" read in this dialog — at 13px they
   were decoration; at 26px they're the second thing the eye lands on */
.wb-stars { flex: 0 0 auto; }
.wb-stars .star-svg { width: 26px; height: 26px; }
.wb-stars .star-svg + .star-svg { margin-left: -7px; }
/* the world board rows get a bump too, so a listing reads at a glance */
.mk-world-row .mk-stars .star-svg { width: 19px; height: 19px; }
.mk-world-row .mk-stars .star-svg + .star-svg { margin-left: -5px; }
.wb-origin-chip {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  padding: 4px 10px; border-radius: 999px;
  background: var(--panel2); border: 1px solid var(--line);
  font-size: 12px; color: var(--dim);
}
.wb-origin-chip .flag-svg { width: 16px; height: 11px; }
/* the one number that matters */
.wb-amount-wrap { display: flex; align-items: stretch; gap: 8px; }
.wb-amount-field {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 2px;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 8px;
}
.wb-amount-field:focus-within { border-color: var(--accent, #2ecc71); }
.wb-cur { font-size: 20px; font-weight: 700; color: var(--dim); }
.wb-amount {
  min-width: 0; width: 100%; text-align: center;
  background: none; border: none; padding: 0;
  color: var(--text); font: inherit; font-size: 26px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.wb-amount:focus { outline: none; }
.wb-step {
  flex: 0 0 52px; border-radius: 12px; cursor: pointer;
  background: var(--panel2); border: 1px solid var(--line); color: var(--text);
  font-size: 24px; line-height: 1; font-weight: 700;
}
.wb-step:hover { border-color: var(--accent, #2ecc71); color: var(--accent, #2ecc71); }
.wb-step:active { transform: translateY(1px); }
.wb-stats { display: flex; justify-content: space-between; font-size: 12px; color: var(--dim); }
.wb-stats b { color: var(--text); font-variant-numeric: tabular-nums; margin-left: 4px; }
.wb-lead { font-size: 12px; color: var(--dim); display: flex; align-items: center; gap: 6px; }
.wb-lead .flag-svg { width: 14px; height: 10px; }
#wbid-modal .confirm-actions, #wlist-modal .confirm-actions { margin-top: 2px; }
#wlist-modal .rename-input { text-align: center; font-size: 20px; font-weight: 700; margin-top: 8px; }
.mp-clubs { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-top: 4px; }
.mp-club {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; cursor: pointer; color: var(--text); font: inherit;
  transition: border-color .12s ease, transform .1s ease;
}
.mp-club:hover { border-color: var(--cc, var(--dim)); transform: translateY(-1px); }
.mp-club-chip { width: 26px; height: 26px; border-radius: 7px; background: var(--cc, #8b98a9); margin-bottom: 4px; }
.mp-club b { font-size: 14px; }
.mp-club-sub { font-size: 11px; color: var(--dim); }

/* club detail card (opens from a table row, bracket team, fixture) */
.tc-card {
  position: relative; background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; width: 100%; max-width: 520px; max-height: 92vh;
  overflow: hidden; display: flex; flex-direction: column;
}
/* its own body — the shared .card-body is a flex ROW for the player card's
   side tab-rail, which would lay these sections out side by side */
.tc-body { padding: 14px 16px 16px; overflow-y: auto; flex: 1; }
.tc-card .card-close { position: absolute; top: 10px; right: 12px; z-index: 2; font-size: 16px; }
.tc-head { display: flex; align-items: center; gap: 12px; padding: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--tc) 30%, var(--panel)) 0%, var(--panel) 70%); border-bottom: 1px solid var(--line); }
.tc-crest { width: 46px; height: 46px; flex: none; }
.tc-id { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tc-id b { font-size: 17px; }
.tc-id span { font-size: 11.5px; color: var(--dim); }
.tc-form { display: flex; gap: 3px; margin-top: 3px; }
.tc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.tc-stat { background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 6px; text-align: center; }
.tc-stat span { display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--dim); }
.tc-stat b { font-size: 16px; font-variant-numeric: tabular-nums; }
/* head-to-head banner above the mine-vs-theirs bars */
.tc-cmp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; font-size: 12px; font-weight: 700; }
.tc-cmp-side { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--dim); }
.tc-cmp-side.mine { color: var(--amber); }
.tc-cmp-side:last-child { flex-direction: row-reverse; text-align: right; }
.tc-cmp-crest { width: 18px; height: 18px; flex: none; }
.tc-cmp-vs { flex: none; font-size: 10px; text-transform: uppercase; letter-spacing: .8px; color: var(--dim); }
.tc-h { font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px; color: var(--dim); margin: 14px 0 6px; }
.tc-list { display: flex; flex-direction: column; }
.tc-row { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 12.5px; }
.tc-row:last-child { border-bottom: none; }
.tc-row:hover { background: var(--panel2); }
.tc-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-out { color: var(--red); font-style: normal; }
.tc-stars { flex: none; display: inline-flex; }
.tc-stars .star-svg { width: 14px; height: 14px; }
.tc-stars .star-svg + .star-svg { margin-left: -5px; }
.tc-age { flex: none; width: 22px; text-align: right; color: var(--dim); font-variant-numeric: tabular-nums; }
/* league table rows and fixture clubs are click targets now */
tr.rowlink { cursor: pointer; }
tr.rowlink:hover td { background: var(--panel2); }
.fx-side[data-team] { cursor: pointer; }
.fx-side[data-team]:hover .fx-name { color: var(--amber); text-decoration: underline; }

/* cup top performers */
.cup-perf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.cup-perf-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.cup-perf-row:last-child { border-bottom: none; }
.cup-perf-row.mine .cup-perf-name { color: var(--amber); }
.cup-perf-pos { width: 18px; text-align: center; color: var(--dim); font-weight: 700; flex: none; }
.cup-perf-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cup-perf-name small { display: block; color: var(--dim); font-size: 10.5px; }
.cup-perf-val { font-variant-numeric: tabular-nums; font-size: 14px; }

.lg-season-done { text-align: center; border-color: color-mix(in srgb, var(--amber) 40%, var(--line)); background: color-mix(in srgb, var(--amber) 7%, var(--panel)); }
.lg-season-done-title { font-weight: 800; font-size: 15px; margin-bottom: 4px; }
.lg-season-done-sub { font-size: 12px; color: var(--dim); line-height: 1.5; }
.lg-season-done-sub .season-count { color: var(--amber); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- finance ---------- */
.pos { color: var(--green); }
.neg { color: var(--red); }
.fin-out { color: var(--dim); font-weight: 600; } /* routine outgoing — dim, not alarm-red */
.fin-balance { text-align: center; }
.fin-balance-num { font-size: 34px; font-weight: 800; letter-spacing: .3px; }
.fin-net { color: var(--dim); font-size: 13px; margin-top: 6px; display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.fin-net b { margin-left: 5px; }

/* season projection — the at-a-glance "am I OK?" card */
.fin-proj { border-left: 4px solid var(--line); }
.fin-proj.tone-pos { border-left-color: var(--green); }
.fin-proj.tone-warn { border-left-color: var(--amber); }
.fin-proj.tone-neg { border-left-color: var(--red); }
.fin-proj-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.fin-proj-cell { min-width: 0; }
.fin-plabel { font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: var(--dim); }
.fin-proj-now { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.fin-proj-now.neg { color: var(--red); }
.fin-proj-arrow { color: var(--dim); font-size: 22px; }
.fin-proj-end { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.fin-proj-end.tone-pos { color: var(--green); }
.fin-proj-end.tone-warn { color: var(--amber); }
.fin-proj-end.tone-neg { color: var(--red); }
.fin-verdict { font-size: 15px; font-weight: 700; margin-top: 12px; }
.fin-verdict.tone-pos { color: var(--green); }
.fin-verdict.tone-warn { color: var(--amber); }
.fin-verdict.tone-neg { color: var(--red); }
.fin-advice { font-size: 12.5px; color: var(--dim); margin-top: 4px; line-height: 1.45; }
.fin-proj-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; color: var(--dim); }
.fin-proj-meta i { width: 3px; height: 3px; border-radius: 50%; background: var(--dim); opacity: .5; }

/* cash flow: money in and money out as two opposite panels (not one column
   with a group label buried between them), each still broken down this
   week / last week / season; amounts stay neutral in here — colour is
   reserved for the Net bar below, the one place "ahead" vs "behind" matters */
.fin-cf-split { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.fin-cf-side-label {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px;
  padding-bottom: 6px; margin-bottom: 4px; border-bottom: 2px solid var(--line);
}
.fin-cf-side-label.in { color: var(--green); border-bottom-color: var(--green); }
.fin-cf-side-label.out { color: var(--red); border-bottom-color: var(--red); }
.fin-cf { display: flex; flex-direction: column; }
.fin-cf-row {
  display: grid; grid-template-columns: 1fr 60px 60px 60px; align-items: center; gap: 6px;
  padding: 5px 0; font-size: 12.5px; border-bottom: 1px solid var(--line);
}
.fin-cf-row:last-child { border-bottom: none; }
.fin-cf-row span { color: var(--dim); }
.fin-cf-row em { font-style: normal; font-variant-numeric: tabular-nums; text-align: right; }
.fin-cf-head { padding-bottom: 8px; }
.fin-cf-head em { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--dim); }
.fin-cf-total { border-top: 1px solid var(--line); margin-top: 2px; padding-top: 7px; font-weight: 700; }
.fin-cf-total span, .fin-cf-total em { color: var(--text); }
@media (max-width: 640px) { .fin-cf-split { grid-template-columns: 1fr; gap: 4px; } }
@media (max-width: 480px) { .fin-cf-row { grid-template-columns: 1fr 52px 52px 52px; font-size: 11.5px; gap: 4px; } }
.fin-cf-note {
  font-size: 12px; color: var(--dim); background: var(--panel2);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 11px; margin-bottom: 10px;
}

/* Net: a conclusion drawn FROM the two columns above, not one more row
   belonging to either — its own highlighted strip, full width, below both */
.fin-cf-netbar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  margin-top: 16px; padding: 11px 14px; border-radius: 10px;
  background: var(--panel2); border: 1px solid var(--line);
}
.fin-cf-netbar > span { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--dim); }
.fin-cf-net-vals { display: flex; gap: 20px; flex-wrap: wrap; }
.fin-cf-net-val { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.fin-cf-net-val i { font-style: normal; font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: var(--dim); }
.fin-cf-net-val b { font-size: 16px; font-variant-numeric: tabular-nums; }
.fin-cf-net-val b.pos { color: var(--green); }
.fin-cf-net-val b.neg { color: var(--red); }
.fin-sub-note { font-size: 12px; color: var(--dim); font-weight: 500; }

/* Financials overview: the same wide-column + narrow-rail shape as Home and
   the Management office (3fr/1fr) — reports you read top to bottom on the
   left, the transaction-by-transaction statement you only skim on the right */
.fin-grid { display: grid; grid-template-columns: 3fr 1fr; gap: 12px; align-items: start; }
.fin-col-main { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.fin-col-rail { min-width: 0; }
@media (max-width: 900px) { .fin-grid { grid-template-columns: 1fr; } }
/* the statement reads tighter in the narrow rail than it ever had to
   full-width — shave the fixed when/amount columns back so the description
   still has room to breathe before it has to ellipsize */
.fin-col-rail .inv-row { grid-template-columns: 46px 1fr 70px; gap: 6px; font-size: 12px; }
.fin-col-rail .inv-when { font-size: 9.5px; }
.fin-col-rail .inv-head { flex-direction: column; gap: 2px; }
.fin-col-rail .inv-org { text-align: left; }

/* ---------- bank & rescue: its own screen, action-shaped ---------- */
.bank-intro { margin-bottom: 12px; }
.lever-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
@media (max-width: 720px) { .lever-grid { grid-template-columns: 1fr; } }
/* sponsorship + matchday gate, side by side — both cards keep their own
   card chrome, this just governs the row */
.fin-2col { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 14px; }
.fin-2col > .card { margin-bottom: 0; }
@media (max-width: 760px) { .fin-2col { grid-template-columns: 1fr; } }
.lever-card {
  display: flex; flex-direction: column; gap: 10px; margin-bottom: 0;
  border-color: rgba(240,193,74,.28);
  background: linear-gradient(160deg, rgba(240,193,74,.07), transparent 55%), var(--panel);
}
.lever-head { display: flex; align-items: center; gap: 9px; }
.lever-head h3 { margin: 0; font-size: 15px; }
.lever-icon {
  font-size: 17px; line-height: 1; width: 32px; height: 32px; flex: none;
  display: flex; align-items: center; justify-content: center; border-radius: 9px;
  background: rgba(0,0,0,.35); border: 1px solid rgba(240,193,74,.3);
}
.lever-body { flex: 1; }
.lever-sub { font-size: 12.5px; color: var(--dim); line-height: 1.5; }
.lever-last { font-size: 12px; color: var(--dim); margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--line); }
/* the season's allowance, stated rather than left to be inferred from a
   disabled button — green while it's there, amber once it's gone */
.lever-allow {
  display: inline-block; margin-top: 7px; padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700;
  background: rgba(46, 160, 67, .14); border: 1px solid var(--pitch); color: #8ce0a3;
}
.lever-allow.spent { background: rgba(210, 153, 34, .12); border-color: #6b5310; color: var(--amber); }
.loan-figure { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.loan-figure span { font-size: 12px; color: var(--dim); }
.loan-figure b { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.loan-bar { height: 8px; border-radius: 4px; background: rgba(0,0,0,.45); overflow: hidden; margin: 7px 0 5px; }
.loan-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--amber), #f0c14b); }
.bank-take { display: flex; gap: 6px; flex-wrap: wrap; }
.lever-list { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--dim); line-height: 1.75; }
.fin-rescue-link { margin-top: 10px; }

/* today | season breakdown table (Top Eleven style) */
.fin-breakdown { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 640px) { .fin-breakdown { grid-template-columns: 1fr; gap: 16px; } }
.fin-row { display: grid; grid-template-columns: 1fr 72px 72px; align-items: center; gap: 8px; padding: 6px 0; font-size: 13px; border-bottom: 1px solid var(--line); }
.fin-row:last-child { border-bottom: none; }
.fin-row span { color: var(--dim); min-width: 0; }
.fin-row em { font-style: normal; text-align: right; font-variant-numeric: tabular-nums; font-size: 12.5px; }
.fin-row em.zero { color: var(--line); }
.fin-head { border-bottom: 1px solid var(--line); }
.fin-head .fin-sec { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .6px; }
.fin-head em { color: var(--dim); font-size: 10px; text-transform: uppercase; letter-spacing: .5px; }
.fin-total { border-top: 1px solid var(--line); border-bottom: none; margin-top: 3px; padding-top: 8px; font-weight: 700; }
.fin-total span { color: var(--text); }
.fin-total.pos em { color: var(--green); }
.fin-total.neg em { color: var(--red); }
.fin-col-h { font-size: 12px; color: var(--dim); margin: 4px 0 8px; }
.fin-wage-hint { grid-column: 1 / -1; margin-top: 4px; }

.fin-tix { font-size: 20px; font-weight: 800; }
.fin-tix span { font-size: 12px; font-weight: 500; color: var(--dim); }
.fin-tix-rev { font-size: 13px; color: var(--dim); margin: 4px 0 8px; }
.fin-tix-rev b { color: var(--green); font-weight: 700; }

/* ---------- sponsorship, drawn as a signed contract ---------- */
.spon-logo { width: 44px; height: 44px; flex: none; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.45); }
.spon-logo.sm { width: 30px; height: 30px; border-radius: 7px; }
.spon-contract {
  position: relative; border-radius: 10px; padding: 15px 16px;
  background: linear-gradient(150deg, rgba(255,255,255,.05), transparent 60%), var(--panel2);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.sc-head { display: flex; align-items: center; gap: 12px; }
.sc-party { flex: 1; min-width: 0; }
.sc-party h3 { margin: 1px 0 2px; font-size: 17px; }
.sc-kicker { font-size: 9.5px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase; color: var(--dim); }
.sc-term { font-size: 11.5px; color: var(--dim); }
/* a rubber-stamp, tilted like it was pressed on by hand */
.sc-stamp {
  flex: none; transform: rotate(-11deg);
  font-size: 12px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
  color: rgba(86,211,100,.85); border: 2px solid rgba(86,211,100,.55);
  border-radius: 6px; padding: 4px 10px; opacity: .9;
}
.sc-terms {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin: 14px 0 4px; padding: 11px 0; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line);
}
@media (max-width: 520px) { .sc-terms { grid-template-columns: 1fr; gap: 6px; } }
.sc-cell { display: flex; flex-direction: column; gap: 2px; }
.sc-cell span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--dim); }
.sc-cell b { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sc-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 12px; }
.sc-sign-cell { display: flex; flex-direction: column; }
.sc-sign-cell i {
  font-family: 'Segoe Script', 'Bradley Hand', 'Brush Script MT', cursive;
  font-size: 16px; color: #dfe7f0; padding-bottom: 3px; border-bottom: 1px solid var(--line);
}
.sc-sign-cell span { font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: var(--dim); margin-top: 4px; }
.spon-contract + .spon-contract { margin-top: 10px; }
.sc-title-bonus { color: #f0c14b; }
.sc-slots { font-size: 11.5px; color: var(--dim); margin-top: 10px; }
.sc-slots b { color: var(--amber); }
/* a sponsor demanding the shirt to itself */
.sc-excl {
  margin-left: 7px; font-size: 9px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase;
  color: #ffd98a; background: rgba(210,153,34,.16); border: 1px solid rgba(240,193,74,.45);
  border-radius: 999px; padding: 1px 7px; vertical-align: 1px;
}
.sc-offer.blocked { opacity: .5; }
.sc-offers { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 12px; }
.sc-offer { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.sc-offer:last-child { border-bottom: none; }
.sc-offer-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sc-offer-main b { font-size: 13.5px; }
.sc-offer-main span { font-size: 11.5px; color: var(--dim); }
.sc-offer .btn { white-space: nowrap; }

/* ---------- the gate, drawn as a torn matchday ticket ---------- */
.ticket-stub { display: flex; align-items: stretch; border-radius: 10px; overflow: hidden; }
@media (max-width: 520px) { .ticket-stub { flex-direction: column; } }
.ts-main {
  flex: 1; min-width: 0; padding: 13px 15px;
  background: linear-gradient(135deg, #2b3546, #1b2230);
  border: 1px solid var(--line); border-right: none;
  border-radius: 10px 0 0 10px;
}
@media (max-width: 520px) { .ts-main { border-right: 1px solid var(--line); border-radius: 10px 10px 0 0; } }
.ts-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ts-kicker { font-size: 9.5px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase; color: #9fb0c4; }
.ts-tier { font-size: 11.5px; color: #c7d0da; font-weight: 700; }
.ts-count { font-size: 27px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.15; margin-top: 3px; }
.ts-count em { font-style: normal; font-size: 13px; font-weight: 500; color: var(--dim); margin-left: 5px; }
.ts-bar { height: 7px; border-radius: 4px; background: rgba(0,0,0,.45); overflow: hidden; margin: 7px 0 5px; }
.ts-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--pitch), #56d364); }
.ts-foot { font-size: 11.5px; color: var(--dim); }
/* the stub: separated by a perforation, notched top and bottom */
.ts-stub {
  flex: none; width: 132px; padding: 13px 15px;
  display: flex; flex-direction: column; justify-content: center; gap: 2px; text-align: right;
  background: linear-gradient(135deg, #3a2f14, #241d0d);
  border: 1px solid var(--line); border-left: 2px dashed rgba(255,255,255,.28);
  border-radius: 0 10px 10px 0;
  /* punched notches where the two halves meet */
  -webkit-mask-image: radial-gradient(circle 6px at 0 0, transparent 98%, #000 100%), radial-gradient(circle 6px at 0 100%, transparent 98%, #000 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
@media (max-width: 520px) {
  .ts-stub { width: auto; text-align: left; border-left: 1px solid var(--line); border-top: 2px dashed rgba(255,255,255,.28); border-radius: 0 0 10px 10px; -webkit-mask-image: none; mask-image: none; }
}
.ts-stub-k { font-size: 9.5px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase; color: #d6b874; }
.ts-stub b { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; color: #ffdf9a; }
.ts-serial { font-size: 9.5px; letter-spacing: 1px; color: #8d7c53; font-weight: 700; }

/* ---------- transactions, drawn as a statement of account ---------- */
.invoice { position: relative; }
.inv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 11px; border-bottom: 2px solid var(--line); }
.inv-head h2 { margin: 2px 0 0; }
.inv-kicker { font-size: 9.5px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase; color: var(--dim); }
.inv-org { text-align: right; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.inv-org i { display: block; font-style: normal; font-size: 11px; font-weight: 500; color: var(--dim); margin-top: 2px; }
.inv-cols {
  display: grid; grid-template-columns: 62px 1fr 96px; gap: 10px; padding: 9px 0 6px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--dim);
  border-bottom: 1px solid var(--line);
}
.inv-cols span:last-child { text-align: right; }
.inv-body { display: flex; flex-direction: column; max-height: 360px; overflow-y: auto; }
.inv-row { display: grid; grid-template-columns: 62px 1fr 96px; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.inv-row:nth-child(odd) { background: rgba(255,255,255,.015); }
.inv-row:last-child { border-bottom: none; }
.inv-when { font-size: 10.5px; font-weight: 700; color: var(--dim); white-space: nowrap; }
.inv-desc { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-amt { text-align: right; font-variant-numeric: tabular-nums; }
.inv-total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-top: 4px; padding-top: 11px; border-top: 2px solid var(--line);
}
.inv-total span { font-size: 10.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--dim); }
.inv-total b { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---------- contract tab (player card) ---------- */
.ctr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
@media (max-width: 560px) { .ctr-grid { grid-template-columns: 1fr; } }
.ctr-cell { background: var(--panel2); border: 1px solid var(--line); border-radius: 9px; padding: 11px 12px; }
.ctr-cell span { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--dim); margin-bottom: 4px; }
.ctr-cell b { font-size: 17px; font-weight: 700; }
.ctr-cell b i { font-style: normal; font-size: 12px; color: var(--dim); font-weight: 500; }
.ctr-cell small { display: block; font-size: 11px; color: var(--dim); margin-top: 3px; }
.ctr-cell .ctr-auction-start { color: var(--amber); font-weight: 600; }
.ctr-expired { color: var(--red); }
.ctr-note { font-size: 12.5px; border-radius: 8px; padding: 9px 11px; margin-bottom: 10px; }
.ctr-note.loan { background: rgba(88, 166, 255, .12); border: 1px solid #2b4a6e; color: #a8cbff; }
.ctr-note.list { background: rgba(210, 153, 34, .12); border: 1px solid #5a4a1e; color: #ffd98a; }
.ctr-note.expired { background: rgba(248, 81, 73, .12); border: 1px solid #6e2226; color: #ffb3ad; }
/* These five were outline buttons carrying sentence-length labels ("Loan out
   for the season", "Sell now — €412,000 (65%)"), which on a phone wrapped and
   spilled out of the card. Short labels, and a filled colour each so what a
   button DOES is readable before the word is: green to keep him, blue to lend
   him, amber to cash him in, red to be rid of him. The detail that came out of
   the labels has not gone — it is on each button's tooltip and in the
   paragraph below, which explains the 65% and the loan term. */
.ctr-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-bottom: 10px; }
.ctr-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 10px; font-size: 12.5px; font-weight: 700;
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ctr-btn:disabled { opacity: .4; }
.ctr-renew { background: var(--pitch); color: #04160a; }
.ctr-list  { background: #2f6fd0; color: #eaf2ff; }
.ctr-sell  { background: var(--amber); color: #241a04; }
.ctr-loan  { background: var(--panel2); color: var(--text); border: 1px solid var(--line); }
.ctr-loan:hover { border-color: #58a6ff; }
/* Red, and actually red this time: .btn.ghost's two classes used to beat a
   single-class .ctr-danger on specificity, so Sack and Release never rendered
   in the colour they were given. They are filled buttons now, so nothing is
   competing. */
.ctr-danger { background: #7d2822; color: #ffd9d4; }
.ctr-danger:hover { background: var(--red); color: #2a0a08; }

/* roster row transfer tag */
.tag-transfer { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 8px; margin-left: 4px; white-space: nowrap; }
.tag-transfer.loan { background: rgba(88, 166, 255, .16); color: #a8cbff; }
.tag-transfer.list { background: rgba(210, 153, 34, .16); color: #ffd98a; }
.tag-transfer.expired { background: rgba(248, 81, 73, .16); color: #ffb3ad; }
.tag-transfer.retiring { background: rgba(210, 153, 34, .1); color: #d9b976; }
.tag-transfer.expiring { background: rgba(88, 166, 255, .12); color: #8fc1ff; }

/* ---------- fan stats (Arena building detail) ---------- */
.fans-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--dim); }
.fans-count { font-size: 30px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.fans-sub { font-size: 11.5px; color: var(--dim); }

.fans-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 560px) { .fans-tiers { grid-template-columns: 1fr; } }
.fans-tier {
  text-align: left; background: var(--panel2); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px; cursor: pointer; font-family: inherit; color: var(--text);
}
.fans-tier:hover { border-color: var(--dim); }
.fans-tier.on { border-color: var(--pitch); background: rgba(46, 160, 67, .12); }
.fans-tier-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.fans-tier-name { font-size: 13px; font-weight: 700; }
.fans-tier-price { font-size: 15px; font-weight: 800; }
.fans-tier-est-label { display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--dim); }
.fans-tier-proj { font-size: 12.5px; color: var(--dim); margin-top: 1px; }
.fans-tier-est-val { font-style: italic; font-weight: 600; color: #b9c3d0; font-variant-numeric: tabular-nums; }
.fans-tier-rev { font-size: 12px; color: var(--green); font-weight: 600; margin-top: 3px; }
/* the global .hint has a pull-up negative margin for use under a heading —
   wrong wherever it instead follows a grid of cards, which needs real
   clearance below it or the hint text sits on top of the last row */
.fans-tiers + .hint, .staff-cards + .hint, .ya-grid + .hint, .mgmt-staff-list + .hint { margin-top: 12px; }

/* ---------- staff tab ---------- */
.staff-wage { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .staff-wage { grid-template-columns: 1fr; gap: 14px; } }
.fans-count i { font-style: normal; font-size: 14px; font-weight: 500; color: var(--dim); }

/* the department banner: role name, its live effect as a full sentence,
   and a labelled five-pip strength meter on the right */
.dept-strip {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 12px 14px; margin-bottom: 12px; border-radius: 10px;
  background: var(--panel2); border: 1px solid var(--line); border-left: 3px solid var(--dept, var(--line));
}
.dept-strip-main { min-width: 0; }
.dept-strip-label { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--dim); margin-bottom: 3px; }
.dept-strip-effect { font-size: 14px; }
.dept-strip.empty .dept-strip-effect { color: var(--amber); font-weight: 600; }
.dept-strip-meter { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.dept-strip-meter > span { font-size: 9.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--dim); }
.dept-pips { display: flex; gap: 3px; }
.dept-pips i { width: 16px; height: 7px; border-radius: 3px; background: var(--panel); border: 1px solid var(--line); }
.dept-pips i.on { background: var(--dept, var(--pitch)); border-color: var(--dept, var(--pitch)); }

/* each department's accent colour, shared by its strip edge, pips and avatars */
.dept-physio { --dept: #4da3ff; }
.dept-psych { --dept: #c084fc; }
.dept-medic { --dept: #f87171; }
.dept-coach { --dept: #34d399; }
.dept-youthcoach { --dept: #fbbf24; }
.dept-scout { --dept: #5eead4; }

/* people as cards on a board — an avatar in the department's colour, the
   tier badge, the two facts that matter, and one clear action */
.staff-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px 10px; margin-top: 4px; }
/* the job board is secondary to your actual staff — its cards are shorter
   (see .staff-card.candidate), so the grid can run them tighter too */
.job-board-section .staff-cards { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px 8px; }
.staff-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center;
  padding: 14px 12px 12px; border-radius: 12px;
  background-color: var(--panel2); background-size: cover; background-position: center;
  border: 1px solid var(--line); border-top: 3px solid var(--dept, var(--line));
}
.staff-card.expired { border-color: rgba(248,81,73,.5); }
/* a real photo runs the card's full height on the left, like a photo ID,
   instead of being cropped into the small initials circle — name, tier,
   wage/contract and the action all stack to its right instead of centred
   underneath. Only kicks in once a photo actually exists for that member;
   no photo yet still gets the old centred initials-circle layout. */
.staff-card.has-photo {
  display: grid; grid-template-columns: 96px 1fr; grid-template-rows: auto auto auto;
  align-items: stretch; text-align: left; padding: 0; gap: 0;
}
.staff-card.has-photo .staff-card-avatar {
  grid-row: 1 / 4; grid-column: 1;
  width: 100%; height: 100%;
  /* rounded to match the card's own corners directly, not clipped via the
     card's overflow — clipping there would also cut off the "Candidate"
     flag, which is deliberately positioned poking up above the card */
  border-radius: 11px 0 0 11px; border: none; box-shadow: none; background: none;
  object-fit: cover; object-position: top center;
}
.staff-card.has-photo .staff-card-id { grid-row: 1; grid-column: 2; align-items: flex-start; padding: 12px 12px 0; }
.staff-card.has-photo .staff-card-facts { grid-row: 2; grid-column: 2; padding: 8px 12px 0; }
.staff-card.has-photo .staff-card-actions { grid-row: 3; grid-column: 2; padding: 10px 12px 12px; align-self: end; }
/* a candidate isn't yours yet — dashed, see-through, not "settled" the way
   an employed card is, so On the books and Job board are unmistakable even
   with the heading scrolled out of view */
/* candidates aren't hired yet and there can be a whole batch of them — a
   compact grid instead of the tall stacked layout "On the books" gets, so a
   full job board doesn't dominate the section. Row 1 (avatar + name/tier,
   name and tier stacked, never sharing a line) always has the card's full
   width to itself. Row 2 packs wage + contract — captions dropped, values
   only, "€2,700 · 2 seasons" reads fine without "per week"/"contract" spelled
   out right next to a Hire button — freeing enough room for a smaller Hire
   to sit on that same line instead of floating alone on its own row. Facts
   still wrap if a number ever runs long, so this can't overflow either. */
.staff-card.candidate {
  border-style: dashed; background-color: rgba(13,17,23,.55); backdrop-filter: blur(2px);
  display: grid; grid-template-columns: 32px 1fr auto; column-gap: 9px; row-gap: 5px;
  align-items: start; text-align: left; padding: 9px 10px;
}
.staff-card.candidate .staff-card-avatar {
  grid-row: 1; grid-column: 1; align-self: center;
  width: 32px; height: 32px; font-size: 10.5px;
  background: none; border-style: dashed; border-color: var(--dept, var(--line)); color: var(--dept, var(--text));
  box-shadow: none;
}
.staff-card.candidate .staff-card-id { grid-row: 1; grid-column: 2 / 4; align-items: flex-start; min-width: 0; }
.staff-card.candidate .staff-card-facts { grid-row: 2; grid-column: 2; flex-wrap: wrap; gap: 3px 10px; align-self: center; }
/* the compact candidate card gets the same full-height photo treatment,
   just narrower — the photo spans both its rows instead of one small circle */
.staff-card.candidate.has-photo { grid-template-columns: 56px 1fr auto; padding: 0; column-gap: 0; }
.staff-card.candidate.has-photo .staff-card-avatar {
  grid-row: 1 / 3; grid-column: 1; align-self: stretch;
  /* the "Candidate" flag floats up from the card's true top edge and always
     dips back down ~11px into it — invisible against the old blank padding,
     but landing right on the photo's face once the photo runs edge to edge.
     A matching top margin here clears it instead of the two overlapping. */
  margin-top: 14px;
  width: 100%; height: calc(100% - 14px); border-radius: 11px 0 0 11px; border: none; box-shadow: none;
  object-fit: cover; object-position: top center;
}
.staff-card.candidate.has-photo .staff-card-id { padding: 8px 8px 0 10px; }
.staff-card.candidate.has-photo .staff-card-facts { padding: 0 0 8px 10px; }
.staff-card.candidate.has-photo .staff-card-actions { padding: 0 8px 8px 0; }
.staff-card.candidate .staff-card-fact { flex-direction: row; align-items: baseline; gap: 3px; }
.staff-card.candidate .staff-card-fact b { font-size: 12px; }
.staff-card.candidate .staff-card-fact i { display: none; }
.staff-card.candidate .staff-card-actions { grid-row: 2; grid-column: 3; margin-top: 0; }
.staff-card.candidate .staff-card-actions .btn { padding: 4px 10px; font-size: 11.5px; }
.staff-card-flag {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  background: var(--panel); border: 1px solid var(--dept, var(--line)); color: var(--dept, var(--dim));
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  padding: 2px 9px; border-radius: 20px; white-space: nowrap;
}
.staff-card-avatar {
  width: 46px; height: 46px; border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, var(--dept, #666), color-mix(in srgb, var(--dept, #666) 45%, #000));
  border: 2px solid rgba(255,255,255,.75); color: #10141b; font-weight: 800; font-size: 14px;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 8px rgba(0,0,0,.5);
  object-fit: cover; /* a real photo (img) crops to fill the circle instead of stretching */
}
.staff-card-id { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.staff-card-name { font-size: 14px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.staff-card-facts { display: flex; gap: 18px; }
.staff-card-fact { display: flex; flex-direction: column; gap: 1px; }
.staff-card-fact b { font-size: 13.5px; font-variant-numeric: tabular-nums; }
.staff-card-fact i { font-style: normal; font-size: 9.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--dim); }
.staff-card-actions { display: flex; gap: 6px; margin-top: 2px; }
.staff-card-actions .btn { white-space: nowrap; }
/* employed card: Renew / Sack sit as two equal, single-line buttons (the arrow
   used to wrap "Renew →" onto a second line and blow the button up) */
.staff-card.has-photo .staff-card-actions .btn,
.staff-card:not(.candidate) .staff-card-actions .btn { flex: 1 1 0; font-size: 11.5px; padding: 6px 8px; text-align: center; }

.staff-tier { display: inline-flex; align-items: center; gap: 6px; }
.staff-tier .star-row .star-svg { width: 13px; height: 13px; }
.staff-tier .star-row .star-svg + .star-svg { margin-left: -4px; }
.staff-tier-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
.staff-tier-label.tier-gray { color: #8b98a9; }
.staff-tier-label.tier-yellow { color: #f6c81e; }
.staff-tier-label.tier-green { color: #3ec455; }
.staff-tier-label.tier-blue { color: #4da3ff; }
.staff-tier-label.tier-purple { color: #a371f7; }
.staff-expired { color: var(--red); font-weight: 700; }

/* ---------- Management building: the club's front office ---------- */
.mgmt-card > h2 { font-size: 14px; color: var(--text); text-transform: none; letter-spacing: .2px; }
/* the expiry alert banner up top: coloured pills + a plain call to action */
.mgmt-alert { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.mgmt-alert.ok { opacity: .85; }
.mgmt-pill { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; white-space: nowrap; }
.mgmt-pill.crit { background: rgba(248,81,73,.16); color: #ffb3ad; border: 1px solid #6e2226; }
.mgmt-pill.warn { background: rgba(210,153,34,.16); color: #ffd98a; border: 1px solid #5a4a1e; }
.mgmt-pill.ok { background: rgba(46,160,67,.16); color: #7ee29a; border: 1px solid #1e5e46; }
.mgmt-alert-text { font-size: 12px; color: var(--dim); }

.mgmt-staff-list { display: flex; flex-direction: column; gap: 10px; }
/* one member = an identity row (coloured left edge for his department) and,
   when his deal's running out, a renewal-negotiation strip below it */
.mgmt-staff {
  border: 1px solid var(--line); border-left: 3px solid var(--dept, var(--line));
  border-radius: 10px; background: var(--panel2); overflow: hidden;
}
.mgmt-staff-head { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
.mgmt-avatar {
  flex: none; width: 42px; height: 42px; border-radius: 50%; object-fit: cover;
  background: radial-gradient(circle at 50% 30%, var(--dept, #666), color-mix(in srgb, var(--dept, #666) 45%, #000));
  border: 2px solid rgba(255,255,255,.7); color: #10141b; font-weight: 800; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.mgmt-staff-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.mgmt-staff-name { font-size: 14px; }
.mgmt-staff-role { font-size: 11px; color: var(--dim); }
.mgmt-staff-tier { display: inline-flex; }
.mgmt-staff-tier .star-svg { width: 13px; height: 13px; }
.mgmt-staff-tier .star-svg + .star-svg { margin-left: -4px; }
.mgmt-staff-facts { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; }
.mgmt-staff-wage { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.mgmt-staff-wage b { font-size: 14px; font-variant-numeric: tabular-nums; }
.mgmt-staff-wage i { font-style: normal; font-size: 9px; text-transform: uppercase; letter-spacing: .4px; color: var(--dim); }
.mgmt-chip { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 20px; white-space: nowrap; }
.mgmt-chip.ok { background: rgba(139,152,169,.14); color: var(--dim); }
.mgmt-chip.warn { background: rgba(210,153,34,.16); color: #ffd98a; }
.mgmt-chip.crit { background: rgba(248,81,73,.16); color: #ffb3ad; }

/* the negotiation strip: a set-apart panel under the identity row */
.mgmt-nego { border-top: 1px solid var(--line); background: rgba(13,17,23,.35); padding: 10px 12px; }
.mgmt-nego-msg { font-size: 12px; color: var(--text); margin: 0 0 8px; }
.mgmt-nego-msg.rej { color: #ffb3ad; }
.mgmt-nego-form { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.mgmt-nego-label { font-size: 12px; color: var(--dim); }
.mgmt-nego-wage {
  width: 92px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--panel); color: var(--text); font: inherit; font-size: 13px; font-variant-numeric: tabular-nums;
}
.mgmt-nego-term {
  padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--panel); color: var(--text); font: inherit; font-size: 13px;
}
.mgmt-nego-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.mgmt-nego-hint { display: block; margin-top: 7px; font-size: 11px; color: var(--dim); }

/* Management front office: a wide working column + a narrow at-a-glance rail,
   the same shape as the Home screen (stacks to one column on narrow screens) */
.mgmt-grid { display: grid; grid-template-columns: 3fr 1fr; gap: 12px; align-items: start; }
.mgmt-col-main, .mgmt-col-rail { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.mgmt-col-main > .card, .mgmt-col-rail > .card { margin-bottom: 0; }
/* The gate ticket stacks (main over stub) in the narrow rail. It needs the
   SAME treatment the mobile breakpoint gives it, not just a flex-direction
   flip: the stub otherwise keeps its fixed 132px width, its right-side
   radius and the perforation notches punched for a VERTICAL seam, which
   leaves it floating oddly under the main body. */
.mgmt-col-rail .ticket-stub { flex-direction: column; }
.mgmt-col-rail .ts-main { border-right: 1px solid var(--line); border-radius: 10px 10px 0 0; }
.mgmt-col-rail .ts-stub {
  width: auto; text-align: left;
  flex-direction: row; align-items: baseline; justify-content: space-between; gap: 8px;
  border-left: 1px solid var(--line); border-top: 2px dashed rgba(255,255,255,.28);
  border-radius: 0 0 10px 10px;
  -webkit-mask-image: none; mask-image: none;
}
@media (max-width: 900px) { .mgmt-grid { grid-template-columns: 1fr; } }

/* the club briefing: internal business, grouped into plain blocks — who's
   unavailable, whose paper is running out, and what the books say */
.brief-card > h2 { font-size: 14px; color: var(--text); text-transform: none; letter-spacing: .2px; }
.brief-block + .brief-block { margin-top: 14px; }
.brief-block > h3 {
  margin: 0 0 7px; font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .7px; color: var(--dim);
}
.brief-row {
  display: flex; align-items: center; gap: 9px; padding: 7px 0;
  border-top: 1px solid var(--line); cursor: pointer; font-size: 13px;
}
.brief-row:first-of-type { border-top: none; }
.brief-row:hover { background: rgba(255,255,255,.03); }
.brief-row .pos-badge { flex: none; }
.brief-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.brief-why { flex: none; font-size: 11.5px; color: var(--dim); display: inline-flex; align-items: center; gap: 4px; }
.brief-why.hurt { color: #ffb3ad; }
.brief-why.ban { color: #ffb3ad; }
.brief-why.warn { color: #ffd98a; }
.brief-why.loan { color: #a8cbff; }
.brief-clear { margin: 0; font-size: 12.5px; color: #7ee29a; }
/* the money verdict carries the same tone colours the Finance tab uses */
.brief-money { border-radius: 10px; padding: 11px 12px; border: 1px solid var(--line); background: var(--panel2); }
.brief-money.tone-neg { border-color: #6e2226; background: rgba(248,81,73,.08); }
.brief-money.tone-warn { border-color: #5a4a1e; background: rgba(210,153,34,.08); }
.brief-money.tone-pos { border-color: #1e5e46; background: rgba(46,160,67,.08); }
.brief-verdict { font-size: 13.5px; font-weight: 700; color: var(--text); }
.brief-advice { font-size: 12px; color: var(--dim); margin: 4px 0 9px; line-height: 1.45; }

/* the news room: a press wire — each story an icon, a category chip, a
   headline and a standfirst, ruled apart like column inches */
.news-feed { display: flex; flex-direction: column; }
.news-item { display: flex; gap: 11px; padding: 11px 0; border-top: 1px solid var(--line); }
.news-item:first-child { border-top: none; padding-top: 2px; }
.news-icon { flex: none; font-size: 16px; line-height: 1.4; opacity: .9; }
.news-main { min-width: 0; }
.news-tag {
  display: inline-block; font-size: 9.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .7px; color: var(--dim); margin-bottom: 3px;
}
.news-headline { margin: 0; font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--text); text-transform: none; letter-spacing: 0; }
.news-body { margin: 3px 0 0; font-size: 12px; color: var(--dim); line-height: 1.45; }
/* a story's tone tints only its chip + a slim edge, never the headline */
.news-item.tone-pos { border-left: 3px solid var(--pitch); padding-left: 9px; }
.news-item.tone-neg { border-left: 3px solid var(--red); padding-left: 9px; }
.news-item.tone-pos .news-tag { color: #7ee29a; }
.news-item.tone-neg .news-tag { color: #ffb3ad; }

/* campus upkeep breakdown: a plain running-costs list with a ruled total */
.upk-list { display: flex; flex-direction: column; }
.upk-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.upk-row span { color: var(--text); }
.upk-row b { font-variant-numeric: tabular-nums; color: var(--dim); }
.upk-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 10px; margin-top: 4px; font-size: 13px; }
.upk-total span { color: var(--dim); text-transform: uppercase; letter-spacing: .4px; font-size: 11px; }
.upk-total b { font-size: 16px; font-variant-numeric: tabular-nums; }

/* ---------- campus / facilities ---------- */
/* the campus header rides on the campus photo, text scrimmed on the left */
.fac-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  position: relative; overflow: hidden; min-height: 96px;
  background-color: #141a26;
  background-image:
    linear-gradient(90deg, rgba(13,17,23,.92) 0%, rgba(13,17,23,.55) 55%, rgba(13,17,23,.18) 100%),
    url('img/campus-bg.jpg');
  background-size: 100% 100%, cover;
  background-position: center, center;
}
.fac-head h2 {
  font-size: 20px; color: var(--text); text-transform: none; letter-spacing: .2px;
  margin-bottom: 0; text-shadow: 0 1px 4px rgba(0,0,0,.7);
}
.fac-head-sub { margin: 4px 0 0; font-size: 13px; color: #c7d0dc; text-shadow: 0 1px 3px rgba(0,0,0,.7); }

/* the finance header rides on its own photo, same treatment as Campus's */
.fin-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  position: relative; overflow: hidden; min-height: 90px;
  background-color: #141a26;
  background-image:
    linear-gradient(90deg, rgba(13,17,23,.92) 0%, rgba(13,17,23,.55) 55%, rgba(13,17,23,.18) 100%),
    url('img/finance.jpg');
  background-size: 100% 100%, cover;
  background-position: center, center;
}
.fin-head h2 { margin-bottom: 0; text-shadow: 0 1px 4px rgba(0,0,0,.7); }

/* the Cup header rides on its own photo, same treatment as Finance/Campus's */
.cup-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  position: relative; overflow: hidden; min-height: 90px;
  background-color: #141a26;
  background-image:
    linear-gradient(90deg, rgba(13,17,23,.92) 0%, rgba(13,17,23,.55) 55%, rgba(13,17,23,.18) 100%),
    url('img/cup-bg.jpg');
  background-size: 100% 100%, cover;
  background-position: center, center;
}
.cup-head h2 { font-size: 20px; text-transform: none; letter-spacing: .2px; margin-bottom: 0; text-shadow: 0 1px 4px rgba(0,0,0,.7); }
.cup-season { font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px; color: var(--dim); margin: 0 0 4px; }

/* the League header rides on its own photo, same treatment as the Cup's */
.lg-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  position: relative; overflow: hidden; min-height: 96px;
  background-color: #141a26;
  background-image:
    linear-gradient(90deg, rgba(13,17,23,.94) 0%, rgba(13,17,23,.42) 48%, rgba(13,17,23,.92) 100%),
    url('img/Championship-bg.jpg');
  background-size: 100% 100%, cover;
  background-position: center, center 30%;
}
.lg-head h2 { font-size: 20px; text-transform: none; letter-spacing: .2px; margin-bottom: 0; text-shadow: 0 1px 4px rgba(0,0,0,.7); }
.lg-head-main { min-width: 0; }
.lg-head-standing { display: flex; align-items: center; gap: 14px; flex: none; }
/* the zone rail rides the header's own right edge now */
.lg-head.standing-down { border-right: 4px solid var(--red); }
.lg-head.standing-down .standing-pos { color: var(--red); }
.lg-head.standing-up { border-right: 4px solid var(--pitch); }
.lg-head.standing-up .standing-pos { color: var(--pitch); }
.lg-head.standing-chasing { border-right: 4px solid var(--amber); }
.lg-head.standing-safe { border-right: 4px solid var(--pitch); }
@media (max-width: 520px) {
  .lg-head { flex-wrap: wrap; }
  .lg-head .fac-head-sub { display: none; }   /* the strapline is the first thing to go */
}

.fac-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
@media (max-width: 720px) { .fac-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .fac-grid { grid-template-columns: 1fr; } }

/* a building block IS its photo — name and info anchored to the scrimmed
   foot, the level riding a chip in the corner (no icons) */
.fac-tile {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  gap: 3px; text-align: left; padding: 14px; min-height: 172px;
  border-radius: 12px; cursor: pointer; font-family: inherit;
  background-color: var(--panel2); background-size: cover; background-position: center;
  border: 1px solid var(--line); color: var(--text);
}
.fac-tile.built:hover { border-color: var(--pitch); }
.fac-tile.locked { filter: grayscale(.8) brightness(.75); }
.fac-tile.locked:hover { filter: grayscale(.2); border-color: var(--amber); }
.fac-tile.building { border-color: var(--amber); border-style: dashed; }
.fac-name { font-size: 15.5px; font-weight: 800; text-shadow: 0 1px 4px rgba(0,0,0,.85); }
.fac-status { font-size: 12.5px; color: #dbe3ec; text-shadow: 0 1px 3px rgba(0,0,0,.85); }
.fac-tile.building .fac-status { color: var(--amber); font-weight: 700; }
.fac-foot { font-size: 11px; color: #9aa7b5; text-shadow: 0 1px 3px rgba(0,0,0,.85); }
.fac-bar { display: block; width: 100%; background: rgba(255,255,255,.16); border-radius: 3px; height: 5px; overflow: hidden; margin: 3px 0; }
.fac-bar i { display: block; height: 100%; border-radius: 3px; background: var(--amber); }
.fac-lvl-chip {
  position: absolute; top: 10px; right: 10px;
  background: rgba(13,17,23,.75); border: 1px solid var(--line); color: var(--text);
  font-size: 11px; font-weight: 800; letter-spacing: .3px; padding: 3px 10px; border-radius: 20px;
}
.fac-lvl-chip.building { border-color: var(--amber); color: var(--amber); }
.fac-lvl-chip.locked { color: var(--dim); }

/* building detail: the header carries the building's own photo */
.fac-detail-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  position: relative; overflow: hidden; min-height: 84px;
  background-color: #141a26; background-size: cover; background-position: center;
}
.fac-detail-title { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.fac-detail-title h2 { margin: 0; text-shadow: 0 1px 4px rgba(0,0,0,.7); }
.fac-detail-upkeep { font-size: 12px; color: #c7d0dc; text-shadow: 0 1px 3px rgba(0,0,0,.7); }

/* the arena's ticket-price section and the staff job board both carry their
   own photo, nested inside the shared card as a rounded panel rather than
   bleeding to the card's edge — one backdrop for the whole board, not one
   repeated behind every listing on it */
.fac-section.ticket-section, .fac-section.job-board-section {
  position: relative; overflow: hidden; border-bottom: none; border-radius: 12px; padding: 16px; margin: 4px 0;
  background-color: #141a26; background-size: cover; background-position: center;
}
.fac-section.ticket-section {
  background-image:
    linear-gradient(180deg, rgba(13,17,23,.5) 0%, rgba(13,17,23,.82) 100%),
    url('img/ticketing.jpg');
  background-size: 100% 100%, cover;
  background-position: center, center 35%;
}
.ticket-section h3 { color: var(--text); text-shadow: 0 1px 4px rgba(0,0,0,.7); }
.ticket-section > .hint { color: #c7d0dc; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.job-board-section h3 { color: var(--text); text-shadow: 0 1px 4px rgba(0,0,0,.7); }
.job-board-section > .hint { color: #c7d0dc; text-shadow: 0 1px 3px rgba(0,0,0,.7); }

.fac-section { padding: 12px 0; border-bottom: 1px solid var(--line); }
.fac-section:first-child { padding-top: 2px; }
.fac-section:last-child { border-bottom: none; padding-bottom: 2px; }
.fac-section h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--dim); margin: 0 0 8px; }
.fac-arena-stats { display: flex; gap: 30px; flex-wrap: wrap; }
.fac-stat { display: flex; flex-direction: column; gap: 3px; }
/* a gate we haven't got: dimmed, so an empty slot doesn't read as zero fans */
.fans-count-none { color: var(--dim); }
.fac-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.fac-chip { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px; background: rgba(46,160,67,.14); border: 1px solid var(--pitch); color: var(--text); }
.fac-upgrade { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; }
.fac-build-note { font-size: 13px; color: var(--amber); }

/* the arena's full expansion roadmap: every stage in one strip, capacity
   climbing, and an icon for whatever revenue stream that stage unlocks.
   The connecting rail is a per-node pseudo-element (edge-to-edge of two
   equal-width, gap-less flex siblings) rather than a separate DOM element,
   so it never needs manual realignment against card height. It's inset by
   the badge's own radius on each side — center-to-center would run the
   line underneath both circles, and since a couple of badge states use a
   translucent fill (done/current), the line would visibly bleed through
   instead of stopping cleanly at the edge. */
.arena-roadmap { display: flex; align-items: flex-start; gap: 0; overflow-x: auto; padding: 20px 2px 14px; margin-bottom: 4px; }
.arena-stage {
  position: relative; flex: none; width: 118px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-align: center; padding: 2px 6px;
}
.arena-stage:not(:first-child)::before {
  content: ''; position: absolute; z-index: 0; top: 17px;
  left: calc(-50% + 15px); width: calc(100% - 30px); height: 2px; background: var(--line);
}
.arena-stage.done:not(:first-child)::before,
.arena-stage.current:not(:first-child)::before { background: var(--pitch); }
.arena-stage-badge {
  position: relative; z-index: 1;
  width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 800; background: var(--panel2); border: 1px solid var(--line); color: var(--dim);
}
.arena-stage-cap { font-size: 13.5px; font-weight: 700; color: var(--dim); font-variant-numeric: tabular-nums; margin-top: 2px; }
.arena-stage-name { font-size: 11px; color: var(--dim); line-height: 1.25; min-height: 28px; }
.arena-stage-unlock {
  font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 20px;
  background: var(--panel2); border: 1px solid var(--line); color: var(--dim); white-space: nowrap;
}
.arena-stage.done .arena-stage-badge { background: rgba(46,160,67,.16); border-color: var(--pitch); color: var(--pitch); }
.arena-stage.done .arena-stage-cap,
.arena-stage.done .arena-stage-name { color: var(--text); }
.arena-stage.done .arena-stage-unlock { background: rgba(46,160,67,.14); border-color: var(--pitch); color: var(--pitch); }
.arena-stage.current .arena-stage-badge { background: var(--amber); border-color: var(--amber); color: #10141b; box-shadow: 0 0 0 4px rgba(210,153,34,.18); }
.arena-stage.current .arena-stage-cap,
.arena-stage.current .arena-stage-name { color: var(--text); font-weight: 700; }
.arena-stage.current .arena-stage-unlock { background: rgba(210,153,34,.16); border-color: var(--amber); color: var(--amber); }
.arena-stage.locked { opacity: .55; }
.arena-stage-potential { display: block; font-size: 9.5px; font-style: italic; color: var(--dim); margin-top: 2px; }

/* ---------- Fan Club ---------- */
.fanclub-tile .fac-lvl-chip { background: rgba(210,153,34,.2); border-color: var(--amber); color: var(--amber); }
.fanclub-mood { display: flex; align-items: center; gap: 14px; }
.fanclub-mood-face { font-size: 40px; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.fanclub-mood-info { display: flex; flex-direction: column; gap: 2px; }
.fanclub-mood-info b { font-size: 16px; }
.fanclub-mood-info span { font-size: 12.5px; color: var(--dim); }
.fanclub-mood-count { margin-top: 2px; }
/* supporters gained or lost yesterday — the one fan number worth showing */
.fanclub-day { font-weight: 700; }
.fanclub-day.up { color: var(--pitch); }
.fanclub-day.down { color: var(--red); }
.fanclub-day.flat { color: var(--dim); font-weight: 500; }
.fanclub-mood-info .mood-delta { font-style: normal; font-weight: 700; }
.fanclub-mood-info .mood-delta.up { color: var(--pitch); }
.fanclub-mood-info .mood-delta.down { color: var(--red); }

.fanclub-fav {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px;
  border-radius: 10px; border: 1px solid var(--line); background: var(--panel2);
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.fanclub-fav:hover { border-color: var(--pitch); }
.fanclub-fav .shirt {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, var(--c), color-mix(in srgb, var(--c) 60%, #000));
  border: 2px solid rgba(255,255,255,.8); color: #10141b; font-weight: 800; font-size: 14px;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 8px rgba(0,0,0,.5);
}
.fanclub-fav-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fanclub-fav-info b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fanclub-stat-row { display: flex; align-items: baseline; gap: 10px; }
.fanclub-stat-row b { font-size: 18px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.fanclub-stat-row span { font-size: 12.5px; color: var(--dim); }

.fanclub-shop.on h3 { color: var(--pitch); }
.fanclub-shop.locked { opacity: .85; }

/* the 3-level facilities reuse the Arena's stepper, but their "unlock" text
   is a sentence rather than a short stream name — so the stages get wider
   and the chip is allowed to wrap onto a few lines */
.fac-roadmap .arena-stage { width: 190px; }
.fac-roadmap .arena-stage-unlock { white-space: normal; line-height: 1.35; text-align: center; }
.fac-roadmap .arena-stage-cap { font-size: 12px; }

/* ---------- youth academy ---------- */
/* the two jobs get their own coloured top edge, so "find a player" and
   "develop the ones you have" are distinguishable at a glance */
.scouting-card { border-top: 2px solid rgba(88,166,255,.6); }
.academy-card { border-top: 2px solid rgba(210,153,34,.55); }
.scouting-card > h2, .academy-card > h2 { font-size: 14px; color: var(--text); text-transform: none; letter-spacing: .2px; }

.ya-hero { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.ya-hero-text { min-width: 0; }
.ya-hero-text h3 { margin: 0; font-size: 15px; text-transform: none; letter-spacing: 0; color: var(--text); }
.ya-hero-text .hint { margin: 6px 0 0; }
.ya-hero-action { flex: none; }
.ya-scout-note { font-size: 12.5px; color: var(--dim); text-align: right; max-width: 220px; }
.ya-count { font-size: 12px; color: var(--dim); font-weight: 600; }
.mk-fa-next { font-size: 11px; color: var(--amber); font-weight: 700; margin-left: 8px; font-variant-numeric: tabular-nums; }
/* job board's daily-reroll countdown, same cue as the free-agent chip */
.staff-next { font-size: 11px; color: var(--amber); font-weight: 700; margin-left: 8px; font-variant-numeric: tabular-nums; text-transform: none; letter-spacing: 0; }

/* a scouted prospect gets a "reveal" treatment — a gold spotlight card, like
   unwrapping a find, instead of just another row under a plain heading */
.ya-reveal {
  position: relative; margin: 0 0 16px; padding: 16px 14px 10px;
  border-radius: 12px; border: 1px solid rgba(210,153,34,.4);
  background: linear-gradient(135deg, rgba(210,153,34,.14), rgba(210,153,34,.02));
}
.ya-reveal-tag {
  position: absolute; top: -11px; left: 14px; background: var(--amber); color: #10141b;
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px;
  padding: 3px 10px; border-radius: 20px; box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.ya-reveal .ya-prospect { border: none; background: none; padding: 6px 0 0; }

.ya-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 820px) { .ya-grid { grid-template-columns: 1fr; } }

.ya-prospect { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
/* training focus reads at a glance on the roster — a coloured left edge,
   the same "edge = category" language as a department strip */
.ya-prospect.foc-def { border-left: 4px solid var(--pitch); }
.ya-prospect.foc-mid { border-left: 4px solid var(--amber); }
.ya-prospect.foc-att { border-left: 4px solid var(--red); }
.ya-prospect.foc-gk { border-left: 4px solid #4da3ff; }
.ya-slot-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 150px; color: var(--dim); font-size: 12.5px; border-style: dashed;
  opacity: .5;
}
.ya-slot-plus { font-size: 26px; line-height: 1; color: var(--line); }

/* prospect card head: a shirt avatar, name/age/position, ceiling stars */
.ya-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ya-avatar {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, var(--c), color-mix(in srgb, var(--c) 60%, #000));
  border: 2px solid rgba(255,255,255,.8); color: #10141b; font-weight: 800; font-size: 13px;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 8px rgba(0,0,0,.5);
}
.ya-id { flex: 1; min-width: 0; }
.ya-id-top { display: flex; align-items: center; gap: 6px; }
.ya-id-sub { display: flex; align-items: center; gap: 6px; margin-top: 3px; flex-wrap: wrap; }
.ya-name { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ya-age { font-size: 11.5px; color: var(--dim); }
.ya-abil { font-size: 14px; letter-spacing: 2px; }
.ya-flag svg { width: 18px; height: 12px; border-radius: 2px; vertical-align: middle; }

/* the growth read: two plain stat blocks side by side, "now" and
   "potential", each with its own number, bar and stars — deliberately NOT
   one clever combined bar, so reading either number never depends on first
   decoding what the other one is doing */
.ya-growth {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
  padding: 10px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line);
}
.ya-growth-stat { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ya-growth-label { font-size: 9.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--dim); }
.ya-growth-num { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.ya-growth-stat.potential .ya-growth-num { color: #e3b341; }
.ya-growth-arrow { flex: none; font-size: 16px; color: var(--line); }
.ya-growth-bar { position: relative; height: 6px; border-radius: 3px; background: var(--panel2); overflow: hidden; }
.ya-growth-bar i { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 3px; }
.ya-growth-bar:not(.potential) i { background: var(--pitch); }
.ya-growth-bar.potential i.hi { background: rgba(227,179,65,.4); }
.ya-growth-bar.potential i.lo { background: #e3b341; }
.ya-growth-stars .star-svg { width: 17px; height: 17px; }
.ya-growth-stars .star-svg + .star-svg { margin-left: -6px; }
/* the scouting reveal (driven by runProspectReveal): elements marked `.rv`
   start hidden and the animator adds `.rv-in` to fade+rise each in on its
   own beat — Skill now counts up with its bar, its stars pop one by one,
   then Potential does the same at a more dramatic pace. `.ya-star-hidden`
   stars are invisible until the animator un-hides them (one at a time), the
   pop keyframe giving each a little slot-machine bounce as it lands. */
.ya-prospect .rv { opacity: 0; transform: translateY(6px); }
.ya-prospect .rv.rv-in { opacity: 1; transform: none; transition: opacity .4s ease, transform .4s ease; }
@keyframes ya-star-in { from { opacity: 0; transform: scale(.35) rotate(-12deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
.star-svg.ya-star-hidden { opacity: 0; }
.star-svg:not(.ya-star-hidden).star-just-shown { animation: ya-star-in .42s cubic-bezier(.34, 1.56, .64, 1); }
.ya-label { font-size: 9.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--dim); }
/* the payoff of the gauge above: a real timeframe, not just a rate */
.ya-eta { display: block; font-size: 11px; color: var(--dim); margin: -6px 0 10px; }

.ya-character { font-size: 11.5px; color: var(--text); font-style: italic; line-height: 1.4; margin: 0 0 10px; opacity: .85; }
.ya-nofocus { font-size: 11.5px; color: #ffd98a; margin: 0 0 8px; }

/* training focus reads as ONE segmented control, not three loose buttons —
   a single bordered strip with the active choice as a solid pill inside it */
.ya-focus-block { margin-bottom: 12px; }
.ya-focus-block .ya-label { display: block; margin-bottom: 5px; }
.ya-focus-group {
  display: inline-flex; padding: 2px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line);
}
.ya-focus-btn {
  font: 600 11px inherit; padding: 5px 12px; border-radius: 6px; cursor: pointer;
  background: none; border: none; color: var(--dim);
}
.ya-focus-btn:hover { color: var(--text); }
.ya-focus-btn.on { background: var(--pitch); color: #04160a; }
/* a specialist with only one sensible focus gets a plain statement, not a
   picker with a single pre-selected option pretending to be a choice */
.ya-focus-fixed { font-size: 13px; }

/* the action row is visually separated from the control above it, so the
   two never read as one jumbled strip of mismatched buttons */
.ya-actions { display: flex; gap: 7px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--line); }
/* academy mode has no promote button (he's always 17) — the standing fact
   sits where the button would, Release still gets its own control */
.ya-actions-academy { justify-content: space-between; align-items: center; }
.ya-auto-note { font-size: 11px; color: var(--dim); }

/* ---------- transfer market ----------
   An open window turns the Transfers row amber. That is the whole signal.

   There used to be a pulsing dot as well, and it was a bad idea twice over:
   it was position:absolute inside a fixed, SCROLLING drawer with no positioned
   row to anchor to, so it floated over the list instead of sitting on its own
   row — and an animation running forever inside a scroll container is exactly
   what makes that container fight the finger. The colour says the same thing
   and costs nothing to scroll past. */
#tabs [data-tab="transfers"].tab-alert { color: var(--amber); }

/* the transfers header rides on the market photo, same treatment as the campus header */
.mk-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  position: relative; overflow: hidden; min-height: 96px;
  background-color: #141a26;
  background-image:
    linear-gradient(90deg, rgba(13,17,23,.92) 0%, rgba(13,17,23,.55) 55%, rgba(13,17,23,.18) 100%),
    url('img/transfers.jpg');
  background-size: 100% 100%, cover;
  background-position: center, center;
}
.mk-head.mk-open { border-left: 4px solid var(--pitch); }
.mk-head h2 { text-shadow: 0 1px 4px rgba(0,0,0,.7); }
.mk-head .hint { text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.mk-shut { color: var(--dim); }
.mk-closes { text-align: right; font-size: 11px; color: #c7d0dc; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.mk-closes b { font-size: 20px; color: var(--amber); font-variant-numeric: tabular-nums; }

.mk-list { display: flex; flex-direction: column; }
.mk-auc { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.mk-auc:last-child { border-bottom: none; }
/* an auction you are in — yours to sell, or one you have bid on — reads as
   yours at a glance instead of sitting anonymously in the list */
.mk-inplay, .mk-selling { box-shadow: inset 3px 0 0 var(--pitch); padding-left: 9px; }
.mk-selling { box-shadow: inset 3px 0 0 #2f6fd0; }
/* the live figure is the way in to the bidding window */
.mk-auc-bid[data-watch] { cursor: pointer; border-radius: 8px; }
.mk-auc-bid[data-watch]:hover { background: var(--panel2); }

/* "Your auctions" — the two an owner actually tracks, above the browse list */
.mk-live-card h2 { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.mk-live-list { display: flex; flex-direction: column; gap: 6px; }
.mk-live {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 11px; cursor: pointer; font: inherit; color: inherit;
}
.mk-live:hover { border-color: var(--pitch); }
.mk-live-role {
  flex: none; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  padding: 3px 8px; border-radius: 999px;
}
.mk-live-role.bid { background: rgba(46, 160, 67, .16); color: #8ce0a3; border: 1px solid var(--pitch); }
.mk-live-role.sell { background: rgba(47, 111, 208, .16); color: #a8cbff; border: 1px solid #2f6fd0; }
.mk-live-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mk-live-main b { font-size: 13px; }
.mk-live-main i { font-size: 11px; color: var(--dim); font-style: normal; }
.mk-live-go { flex: none; color: var(--dim); font-size: 15px; }
.mk-auc-main { min-width: 0; flex: 1; }
.mk-auc-name { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 14px; }
.mk-auc-name svg { width: 18px; height: 12px; border-radius: 2px; }
.mk-stars .star-svg { width: 13px; height: 13px; }
.mk-stars .star-svg + .star-svg { margin-left: -4px; }
.mk-auc-sub { font-size: 11.5px; color: var(--dim); margin-top: 3px; }
.mk-mine { color: var(--amber); }
.mk-auc-bid { flex: none; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 108px; }
.mk-bid-now { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mk-bid-now.you { color: var(--green); }
.mk-bid-now.rival { color: var(--text); }
.mk-bid-lead { font-size: 10.5px; color: var(--dim); }
.auc-timer { font-size: 12px; font-weight: 700; color: var(--amber); font-variant-numeric: tabular-nums; }
.auc-timer.idle { color: var(--dim); font-weight: 600; }
.mk-auc-bid .btn { margin-top: 3px; }

.mk-list-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.mk-list-row:last-child { border-bottom: none; }
.mk-list-row small { color: var(--dim); }
/* Sell-your-players position filter bar */
.mk-posfilter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.mk-posf {
  background: var(--panel2); border: 1px solid var(--line); color: var(--dim);
  font: 800 11px/1 inherit; letter-spacing: .4px; padding: 6px 11px; border-radius: 999px;
  cursor: pointer; transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.mk-posf:hover { color: var(--text); border-color: var(--dim); }
.mk-posf.on { background: var(--amber); border-color: var(--amber); color: #1a1206; }
/* market accordion: Auctions / Free players / Sell — one open at a time */
.mk-acc { padding: 0; overflow: hidden; }
.mk-acc-head {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: none; border: none; cursor: pointer; padding: 14px 16px; text-align: left;
  color: var(--dim); font: 800 13px/1.3 inherit; text-transform: uppercase; letter-spacing: 1px;
}
.mk-acc-head:hover { color: var(--text); }
.mk-acc-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mk-acc-caret { font-size: 11px; color: var(--dim); transition: transform .15s ease; flex: none; }
.mk-acc[data-open="false"] .mk-acc-caret { transform: rotate(-90deg); }
.mk-acc[data-open="false"] .mk-acc-body { display: none; }
.mk-acc-body { padding: 0 16px 14px; }
.mk-log { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--dim); }

/* ---------- home dashboard ---------- */

/* landscape: the match is the centrepiece at 3/4 width, a slim single-column
   rail takes the remaining 1/4 — that quarter is too narrow for sub-columns */
.home-grid { display: grid; grid-template-columns: 3fr 1fr; gap: 12px; align-items: start; }
.home-main { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.home-main .card { margin-bottom: 0; }
/* round results + transfer market ride under the match card as an even split */
.home-main-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.home-cards { min-width: 0; display: grid; grid-template-columns: 1fr; gap: 12px; align-items: start; }
.home-cards .card { margin-bottom: 0; }
@media (max-width: 820px) { .home-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .home-main-row { grid-template-columns: 1fr; } }

/* immersive next-match hero: two teams over a colour-split backdrop, sized to
   own the screen — the next game, not a widget on a dashboard. Drop your own
   image at public/img/match-bg.jpg to replace the backdrop — already wired,
   no code change needed. The team-colour tint + a dark scrim (so the crests,
   stats and text stay legible over any photo) sit on .mh-bg, in front of it. */
.match-hero {
  position: relative; overflow: hidden; padding: 0; margin-bottom: 0;
  border: 1px solid var(--line);
  display: flex; flex-direction: column;
  background-color: var(--panel);
}
.mh-bg {
  position: absolute; inset: 0; z-index: 0;
  background-image: url('img/match-bg.jpg');
  background-size: cover; background-position: center;
}
.mh-bg::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(120% 80% at 50% 12%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(105deg,
      color-mix(in srgb, var(--hc) 40%, rgba(13,17,23,.55)) 0%,
      rgba(13,17,23,.6) 44%, rgba(13,17,23,.6) 56%,
      color-mix(in srgb, var(--ac) 40%, rgba(13,17,23,.55)) 100%);
}
.match-hero > *:not(.mh-bg) { position: relative; z-index: 1; }
.mh-top {
  padding: 11px 16px; font-size: 12px; letter-spacing: .4px;
  background: rgba(0, 0, 0, .3); border-bottom: 1px solid var(--line);
}
.mh-comp { font-weight: 700; text-transform: uppercase; color: var(--text); }
.mh-grid { flex: 1; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 14px 14px 10px; }
.mh-side { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; min-width: 0; border-radius: 10px; padding: 6px; transition: background .12s ease; }
.mh-side.mh-clickable { cursor: pointer; }
.mh-side.mh-clickable:hover { background: rgba(255, 255, 255, .05); }
.mh-side.mh-clickable:active { background: rgba(255, 255, 255, .09); }
/* the kit shirt is the main visual; a small crest badge sits at its
   lower-right, so the whole shirt stays visible */
.mh-crest { position: relative; width: 118px; height: 118px; }
.mh-kit { position: absolute; inset: 0; z-index: 0; }
.mh-kit-art { width: 118px; height: 118px; display: block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.6)); }
.mh-crest .logo-svg, .mh-crest .logo-img { position: absolute; z-index: 1; right: 8px; bottom: 6px; width: 68px; height: 68px; display: block; filter: drop-shadow(0 2px 5px rgba(0,0,0,.85)); }
.mh-crest .logo-img { border-radius: 7px; object-fit: contain; }
.mh-name { font-size: 15px; font-weight: 800; line-height: 1.15; }
.mh-stars { transform: scale(.85); }
.mh-ovr { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.mh-ovr span { font-size: 9px; letter-spacing: 1.5px; color: var(--dim); }
.mh-ovr b { font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mh-form { display: flex; gap: 0; }

/* the scheduled date/time is the centrepiece; venue (home/away) reads directly
   underneath as plain text — no icon, nothing that could read as a button.
   The kickoff test button lives here too, right under VS. */
.mh-center { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 90px; }
.mh-datetime { display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.mh-date { font-size: 11px; font-weight: 700; letter-spacing: .3px; color: var(--text); text-transform: uppercase; }
.mh-time { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); }
/* matchday: the countdown takes the big slot the time held, and the time drops
   to the caption underneath — on the day itself, how long is the question */
.mh-count {
  font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--amber); line-height: 1.05; text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
.mh-count-label { font-size: 10px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: #d7e2ee; }
/* a dark backing on the venue + VS so they stay clearly visible over the photo */
.mh-venue { font-size: 10px; font-weight: 800; letter-spacing: .8px; color: #eef3f8; background: rgba(0,0,0,.6); padding: 3px 10px; border-radius: 999px; }
.mh-vs { font-size: 12px; font-weight: 800; color: #eef3f8; background: rgba(0,0,0,.55); padding: 2px 9px; border-radius: 6px; }
.mh-center .mh-cal { margin-top: 3px; }

/* morale readout — a small, centred strip at the very bottom, not a headline */
.mh-morale {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 5px 16px 8px; border-top: 1px solid var(--line); background: rgba(0,0,0,.18);
}
.mh-ready-label { font-size: 10px; color: var(--dim); white-space: nowrap; }
.mh-ready-bar { width: 70px; flex: none; background: var(--bg); border-radius: 2px; height: 3px; overflow: hidden; }
.mh-ready-bar i { display: block; height: 100%; border-radius: 2px; }
.mh-ready-icon { font-size: 10px; line-height: 1; opacity: .85; }
.mh-ready-val { font-size: 10px; font-weight: 700; white-space: nowrap; }

/* the one action on the match card. Glass rather than the green .btn fill:
   it sits over a backdrop split between the two clubs' colours, and a solid
   accent fights whichever side it lands on. */
.mh-cal {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  background: rgba(255, 255, 255, .10); color: var(--text);
  border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(3px);
}
.mh-cal:hover { background: rgba(255, 255, 255, .18); }
.mh-cal svg {
  width: 14px; height: 14px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round;
}

.home-notif-list { display: flex; flex-direction: column; gap: 5px; }
.home-notif-row {
  display: flex; align-items: center; gap: 9px; width: 100%;
  background: var(--panel2); border: 1px solid var(--line); border-left: 3px solid var(--line);
  border-radius: 7px; padding: 7px 11px; cursor: pointer; font: inherit; color: var(--text); text-align: left;
}
.home-notif-row:hover { border-color: var(--pitch); }
.home-notif-row.sev-crit { border-left-color: var(--red); }
.home-notif-row.sev-warn { border-left-color: var(--amber); }
.home-notif-row.sev-info { border-left-color: var(--dim); }
.home-notif-icon { flex: none; font-size: 15px; }
.home-notif-text { flex: 1; font-size: 12.5px; }
.home-notif-arrow { flex: none; color: var(--dim); font-size: 15px; }

/* shared by Needs-your-attention / Round-results / Transfer-market: only the
   title strip carries a background image, not the whole card. Drop your own
   image at public/img/widget-header-bg.jpg to replace it — already wired,
   no code change needed. */
.wt-card { padding: 0; overflow: hidden; }
.wt-header {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 16px;
  background-color: var(--panel2);
  background-image:
    linear-gradient(90deg, rgba(13,17,23,.74) 0%, rgba(13,17,23,.48) 100%),
    url('img/widget-header-bg.jpg');
  background-size: cover; background-position: center;
  border-bottom: 1px solid var(--line);
}
.wt-header h2 { margin-bottom: 0; color: #eef3f8; text-shadow: 0 1px 3px rgba(0,0,0,.55); }
.wt-header .hw-arrow { color: #d7e2ee; }
.wt-body { padding: 14px 16px; }

/* campus / transfer widgets: each its own tappable tile */
.home-widget { position: relative; overflow: hidden; padding: 0; min-height: 132px; display: flex; }
.home-widget.clickable { cursor: pointer; }
.home-widget h2 { margin-bottom: 0; }
/* Drop your own image at public/img/campus-bg.jpg to replace this — the path
   below is already wired up, no code change needed. */
.hw-bg {
  position: absolute; inset: 0; z-index: 0;
  background-color: #0c2a5e;
  background-image: url('img/campus-bg.jpg');
  background-size: cover; background-position: center;
}
.hw-body { position: relative; z-index: 1; width: 100%; align-self: flex-end; padding: 12px 14px; }
.hw-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.hw-arrow { color: var(--dim); font-size: 16px; }

/* campus: a stadium photo backdrop, darkened toward the caption, + progress */
.campus-widget .hw-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,17,23,.15) 0%, rgba(13,17,23,.55) 45%, rgba(13,17,23,.9) 100%);
}
.campus-widget h2 { color: #dfe7f0; }
/* The backdrop gradient darkens toward the BOTTOM, where the building rows
   are — which leaves the heading sitting on the brightest part of the stadium
   photo with nothing behind it. Give it its own bar, bled out to the tile's
   edges so it reads as the widget's header rather than a floating label. */
.campus-widget .hw-head {
  background: rgba(13, 17, 23, .6);
  margin: -12px -14px 6px; padding: 7px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
/* one row per building: name left, level chip right; a construction adds a
   progress bar + countdown underneath its row */
.cw-b {
  display: block; width: 100%; padding: 5px 0; border: none; border-bottom: 1px solid rgba(255,255,255,.1);
  background: none; font: inherit; text-align: left; color: inherit; cursor: pointer;
}
.cw-b:last-child { border-bottom: none; padding-bottom: 0; }
.cw-b:hover .cw-b-name { color: var(--amber); }
.cw-b:hover .cw-b-lv { border-color: rgba(255,255,255,.4); }
.cw-b-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cw-b-name { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.cw-b-lv {
  flex: none; font-size: 10.5px; font-weight: 800; font-variant-numeric: tabular-nums;
  padding: 1px 9px; border-radius: 999px;
  background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.18);
}
.cw-b-lv.build { color: #ffd98a; border-color: rgba(240,193,74,.55); }
.cw-b-lv.none { color: #9aa5b1; font-weight: 600; }
.cw-progress { position: relative; background: rgba(0,0,0,.55); border-radius: 5px; height: 15px; overflow: hidden; margin: 6px 0 3px; }
.cw-progress i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--amber), #f0c14b); }
/* the % sits on the filled (yellow) part, in black */
.cw-pct { position: absolute; left: 7px; top: 0; line-height: 15px; font-size: 10px; font-weight: 800; color: #101418; }
.cw-sub { font-size: 11px; color: #c7d0da; }

/* transfer market: a distinct widget with open/closed state */
.tw-status { font-size: 15px; font-weight: 800; }
.tw-open { color: var(--green); }
.tw-shut { color: var(--dim); }
.tw-sub { font-size: 12px; color: var(--dim); margin-top: 4px; }
.tw-hint { font-size: 11px; color: var(--dim); margin-top: 8px; line-height: 1.4; opacity: .85; }
.tw-stats { display: flex; gap: 20px; margin: 9px 0 8px; }
.tw-stat { display: flex; flex-direction: column; line-height: 1.1; }
.tw-stat b { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tw-stat span { font-size: 10.5px; color: var(--dim); }
.tw-logs { display: flex; flex-direction: column; gap: 3px; }
.tw-log { font-size: 11px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* transfer widget: the manager's own live auctions */
.tw-closes { font-variant-numeric: tabular-nums; }
.tw-mine-label { font-size: 10px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--dim); margin: 10px 0 6px; }
.tw-auclist { display: flex; flex-direction: column; gap: 6px; }
.tw-auc {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 10px; cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
.tw-auc:hover { border-color: var(--dim); }
.tw-auc:active { transform: scale(.99); }
.tw-auc.live { border-color: color-mix(in srgb, var(--green) 55%, var(--line)); background: color-mix(in srgb, var(--green) 8%, var(--panel2)); }
.tw-auc-l { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tw-auc-l b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tw-auc-stars { flex: none; font-size: 11px; }
.tw-auc-r { display: flex; align-items: center; gap: 8px; flex: none; }
.tw-bid { font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; }
.tw-bid.you { color: var(--green); }
.tw-bid.in { color: var(--amber); }
.tw-auc-timer { font-size: 11px; font-weight: 700; color: var(--amber); font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; }
.tw-nobid { font-size: 11px; color: var(--dim); font-style: italic; }
.tw-empty { font-size: 12px; color: var(--dim); margin-top: 10px; line-height: 1.5; }
.tw-empty-cta { color: var(--amber); font-weight: 700; }

/* live-view bid modal note (own player) + sell-list floor warning */
.bid-watch-note {
  font-size: 12px; line-height: 1.5; color: var(--text);
  background: color-mix(in srgb, var(--amber) 12%, var(--panel2));
  border: 1px solid color-mix(in srgb, var(--amber) 40%, var(--line));
  border-radius: 8px; padding: 9px 11px; margin: 4px 0 12px;
}
.mk-floor-hint { color: var(--amber); font-weight: 600; margin-bottom: 8px; }

/* round results sit in a narrow card now — tighten so names stay on one line */
.home-cards .results-list { gap: 4px; }
.home-cards .results-list .row { gap: 7px; font-size: 12px; }
.home-cards .results-list .row .h,
.home-cards .results-list .row span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- training tab ---------- */
/* same backdrop as the Campus Training Centre tile, so the two clearly
   read as the same real place */
.tg-top {
  position: relative; overflow: hidden; min-height: 84px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background-color: #141a26;
  background-image:
    linear-gradient(90deg, rgba(13,17,23,.9) 0%, rgba(13,17,23,.6) 55%, rgba(13,17,23,.2) 100%),
    url('img/trainin-center.jpg');
  background-size: 100% 100%, cover;
  background-position: center, center;
}
.tg-top h2 { text-shadow: 0 1px 4px rgba(0,0,0,.7); }
.tg-top .hint { color: #c7d0dc; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.tg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
.tg-card { margin-bottom: 0; }
.tg-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.tg-head h2 { margin: 0; }
.tg-status { font-size: 10.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; }
.tg-status.on { background: rgba(46,160,67,.16); color: var(--green); }
.tg-status.paused { background: var(--panel2); color: var(--dim); }
.tg-status.no-coach { background: rgba(210,153,34,.14); color: var(--amber); }
.tg-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--dim); min-width: 44px; }
.tg-coach-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.tg-coach-sel, #tg-ed-coach {
  flex: 1; background: var(--panel2); color: var(--text); border: 1px solid var(--line);
  border-radius: 7px; padding: 7px 10px; font: inherit;
  font-size: 16px;   /* a <select> under 16px zooms iOS in on focus, same as an input */
}
.tg-skills { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.tg-skill { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px; background: rgba(56,163,224,.12); border: 1px solid #2b5f85; color: #a9d6f5; }
.tg-pl-list { display: flex; flex-direction: column; }
.tg-pl {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; width: 100%;
  padding: 7px 4px; border-bottom: 1px solid var(--line); text-align: left;
}
.tg-pl:last-child { border-bottom: none; }
.tg-pl-main { flex: 1; min-width: 0; }
.tg-pl-main b { font-size: 13px; font-weight: 600; }
.tg-pl-sub { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--dim); }
.tg-flag { font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.tg-flag.hurt { background: rgba(248,81,73,.15); color: #ffb3ad; }
.tg-flag.rest { background: rgba(210,153,34,.15); color: #ffd98a; }
/* every value on the row carries its own caption — nothing here should
   depend on a hover title (dead weight on a touch screen) to be readable */
.tg-pl-mini-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--dim); }
.tg-pl-mini-row { display: flex; align-items: center; gap: 6px; }
.tg-pl-stam { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; }
.tg-pl-stam .tg-pl-mini-row span { font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums; width: 30px; text-align: right; }
.tg-pl-skill { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; min-width: 64px; }
/* start vs end of training: today's rating, an arrow, the rating once every
   trained-and-applicable attribute of his has run all the way to 99 */
.tg-pl-skill-cmp { display: inline-flex; align-items: center; gap: 5px; }
.tg-pl-arrow { font-style: normal; color: var(--dim); font-size: 10px; }
/* the "expected result" line — always its own full-width row under a
   player's main details, never squeezed in as a fourth column */
.tg-pl-rate {
  flex: 1 1 100%; display: flex; align-items: center; gap: 8px;
  margin-top: 4px; padding-top: 6px; border-top: 1px dashed var(--line);
  font-size: 11px; color: var(--dim);
}
.tg-pl-rate.none { font-style: italic; }
.tg-pl-rate span { font-variant-numeric: tabular-nums; }
.tg-pl-rate-bar { flex: none; width: 50px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.tg-pl-rate-bar i { display: block; height: 100%; border-radius: 3px; background: var(--pitch); }
/* the shared session clock — a real bar, not a line of text you have to
   parse to see how close the next tick is */
.tg-cycle { margin: 10px 0; }
.tg-cycle-row { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--dim); margin-bottom: 4px; }
.tg-cycle-row b { color: var(--text); font-variant-numeric: tabular-nums; }
.tg-cycle-bar { position: relative; background: rgba(255,255,255,.08); border-radius: 4px; height: 7px; overflow: hidden; }
.tg-cycle-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--amber), #f0c14b); }
.tg-cycle-sub { font-size: 11px; color: var(--dim); margin-top: 5px; }
.tg-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tg-create {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 140px; background: var(--panel); border: 2px dashed var(--line); border-radius: 10px;
  color: var(--text); font: 700 15px/1.3 inherit; cursor: pointer;
}
.tg-create span { font-size: 11px; color: var(--dim); font-weight: 600; }
.tg-create:hover { border-color: var(--pitch); }
.tg-locked { margin-bottom: 0; display: flex; align-items: center; }

/* editor modal */
.tg-editor-box { max-width: 720px; }
.tg-ed-sec { margin-bottom: 14px; }
.tg-ed-sec h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--dim); margin: 0 0 8px; }
.tg-count { color: var(--pitch); margin-left: 6px; }
.tg-skill-sec h3 { font-size: 10px; margin: 8px 0 5px; color: var(--dim); }
.tg-skill-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.tg-pick { background: none; border: none; cursor: pointer; color: var(--text); font: inherit; border-radius: 8px; }
.tg-pick.on { background: rgba(46,160,67,.12); box-shadow: inset 3px 0 0 var(--pitch); }
.tg-pick.blocked { opacity: .45; cursor: default; }
.tg-blocked { flex: none; font-size: 10.5px; color: var(--dim); }
.tg-ed-foot { display: flex; justify-content: flex-end; margin-top: 4px; }
.tg-editor-box .tg-pl-list { max-height: 300px; overflow-y: auto; }

/* ---------- club tab ---------- */
/* locker: home kit · crest · away kit on the locker-room's own photo */
.club-locker {
  display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 12px; align-items: end;
  background:
    linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.5)),
    url('img/vestiar-bg.jpg');
  background-size: cover; background-position: center;
  border-color: #4a3626;
}
.locker-slot { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.locker-label { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: #d9c3a5; }
.locker-holder {
  position: relative; background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px; padding: 8px; cursor: pointer; line-height: 0;
  transition: transform .12s ease, box-shadow .12s ease;
}
.locker-holder:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.4); }
.kit-svg.lg, .kit-img.lg { width: 118px; height: 118px; display: block; object-fit: contain; }
.kit-img.lg { border-radius: 8px; }
.logo-svg.lg, .logo-img.lg { width: 108px; height: 108px; display: block; object-fit: contain; }
.logo-img.lg { border-radius: 8px; }
.crest-holder { padding: 12px; }
.pick-badge {
  position: absolute; bottom: 5px; right: 5px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--pitch); color: #04160a; font-size: 12px; line-height: 22px; text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
.locker-crest { justify-content: flex-end; }
.club-name-btn {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 4px;
  background: none; border: none; cursor: pointer; padding: 0;
}
.club-name-text { font-size: 20px; font-weight: 800; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.club-name-btn .club-edit-ico { font-size: 13px; opacity: .7; }
.club-name-btn:hover .club-edit-ico { opacity: 1; }
@media (max-width: 620px) { .club-locker { grid-template-columns: 1fr; } .locker-crest { order: -1; } }

/* club details grid */
.club-details { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 620px) { .club-details { grid-template-columns: 1fr 1fr; } }
.cd-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cd-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--dim); }
.cd-cell b { font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.cd-edit-btn { background: none; border: none; padding: 0; margin: 0; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.cd-edit-btn .club-edit-ico { font-size: 12px; opacity: .6; }
.cd-edit-btn:hover .club-edit-ico { opacity: 1; }

/* trophy cabinet + this-season stats */
.trophy-cabinet { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.trophy {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 22px;
}
.trophy.empty { opacity: .5; }
.trophy.won { border-color: color-mix(in srgb, var(--amber) 50%, var(--line)); }
.trophy-cup { font-size: 34px; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.trophy.empty .trophy-cup { filter: grayscale(1) opacity(.6); }
.trophy b { font-size: 22px; font-variant-numeric: tabular-nums; }
.trophy span { font-size: 11px; color: var(--dim); }
.trophy-facts { display: flex; flex-direction: column; gap: 6px; }
.tf-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.tf-row span { color: var(--dim); min-width: 96px; }
.tf-row b { font-variant-numeric: tabular-nums; }

.season-stats { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.ss-head { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--dim); margin-bottom: 8px; }
.ss-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
@media (max-width: 620px) { .ss-grid { grid-template-columns: repeat(3, 1fr); } }
.ss-cell { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.ss-cell b { font-size: 18px; font-variant-numeric: tabular-nums; }
.ss-cell b.pos { color: var(--green); }
.ss-cell b.neg { color: var(--red); }
.ss-cell span { font-size: 10px; color: var(--dim); text-transform: uppercase; letter-spacing: .4px; }

/* preset picker modal */
.modal-overlay {
  position: fixed; inset: 0; z-index: 80; background: rgba(5,8,12,.72);
  display: flex; align-items: center; justify-content: center; padding: 18px;
}
.modal-box {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 18px; width: 100%; max-width: 640px; max-height: 90vh; overflow-y: auto;
  box-shadow: 0 18px 60px rgba(0,0,0,.6);
}
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.modal-head h2 { margin: 0; }
.rename-box { max-width: 360px; }
.rename-input {
  width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--panel2); color: var(--text); font: inherit; font-size: 16px;
}
.rename-input:focus { outline: none; border-color: var(--pitch); }
.rename-foot { display: flex; justify-content: flex-end; margin-top: 14px; }
/* the confirm dialog: an icon badge + title stand in for window.confirm()'s
   bare sentence, a from→to stat pair does the arithmetic instead of burying
   two numbers in a run-on clause, and tone (default/danger) carries all the
   way to the Confirm button so an irreversible action never looks as calm
   as a reversible one */
.confirm-box { max-width: 380px; position: relative; padding-top: 22px; }
.confirm-close {
  position: absolute; top: 10px; right: 10px; background: none; border: none;
  color: var(--dim); font-size: 13px; cursor: pointer; padding: 6px; line-height: 1; border-radius: 6px;
}
.confirm-close:hover { color: var(--text); background: var(--panel2); }
.confirm-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding-right: 20px; }
.confirm-icon {
  flex: none; width: 42px; height: 42px; border-radius: 50%; font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(46, 160, 67, .12); border: 1px solid #1e5b30;
}
.confirm-title { margin: 0; font-size: 17px; font-weight: 800; color: var(--text); line-height: 1.25; }
.confirm-stats {
  display: flex; align-items: center; gap: 10px;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 10px;
}
.confirm-stat { flex: 1; min-width: 0; }
.confirm-stat span { display: block; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--dim); margin-bottom: 4px; }
.confirm-stat b { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); }
.confirm-stat b.hi { color: var(--amber); }
.confirm-arrow { flex: none; color: var(--dim); font-size: 15px; }
/* the one editable figure in a confirm dialog — same size/weight as the
   read-only stat beside it, but a visible field so it doesn't read as fixed */
.confirm-stat-input {
  width: 100%; background: var(--panel); border: 1px solid var(--pitch); border-radius: 6px;
  padding: 4px 7px; font: inherit; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--amber);
}
.confirm-stat-input:focus { outline: none; border-color: var(--amber); }
.confirm-badge {
  display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
  background: rgba(210, 153, 34, .14); border: 1px solid #5a4a1e; color: #ffd98a; margin-bottom: 12px;
}
.confirm-msg { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--dim); }
/* errors live INSIDE the dialog — window.alert() is a no-op in some webviews,
   so a rejected action must never depend on it to be visible */
.modal-err {
  margin-top: 10px; padding: 9px 11px; border-radius: 8px; font-size: 12.5px; line-height: 1.45;
  background: rgba(248, 81, 73, .12); border: 1px solid #6e2226; color: #ffb3ad;
}

/* the bidding window: who he is, who's bidding, the clock, and the money */
.bid-box { max-width: 460px; position: relative; padding-top: 22px; }
.bid-player { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding-right: 24px; }
.bid-player .shirt { flex: none; }
.bid-player-id { flex: 1; min-width: 0; }
.bid-player-id b { display: block; font-size: 16px; font-weight: 800; }
.bid-player-id span { display: block; font-size: 11.5px; color: var(--dim); }
.bid-stars { margin-top: 2px; }
.bid-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.bid-panel { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; }
.bid-panel-label { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--dim); margin-bottom: 7px; }
.bid-list { display: flex; flex-direction: column; gap: 5px; max-height: 116px; overflow-y: auto; }
.bid-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; }
.bid-who { color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bid-amt { font-variant-numeric: tabular-nums; }
.bid-row.you .bid-who { color: var(--green); font-weight: 700; }
.bid-row.you .bid-amt { color: var(--green); }
.bid-clock { font-size: 26px; font-weight: 800; color: var(--red); font-variant-numeric: tabular-nums; text-align: center; line-height: 1.1; }
.bid-clock.idle { color: var(--dim); font-size: 20px; }
.bid-clock-label { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--dim); text-align: center; }
.bid-current { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line); text-align: center; font-size: 23px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.05; }
.bid-current.bump { animation: bidBump .55s ease; }
@keyframes bidBump {
  0% { transform: scale(1); color: var(--text); }
  30% { transform: scale(1.18); color: var(--green); text-shadow: 0 0 14px color-mix(in srgb, var(--green) 60%, transparent); }
  100% { transform: scale(1); color: var(--text); text-shadow: none; }
}
.bid-vs { text-align: center; font-size: 11px; color: var(--dim); margin-top: 3px; font-variant-numeric: tabular-nums; }
.bid-vs .over { color: var(--green); }
.bid-vs .under { color: var(--amber); }
.bid-next { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line); text-align: center; font-size: 11.5px; color: var(--dim); }
.bid-next b { display: block; font-size: 17px; color: var(--amber); font-variant-numeric: tabular-nums; margin-top: 2px; }
.bid-wallet {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px; border-radius: 8px; background: var(--panel2); border: 1px solid var(--line); margin-bottom: 12px;
}
.bid-wallet span { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--dim); }
.bid-wallet b { font-size: 16px; font-variant-numeric: tabular-nums; }
.bid-wallet b.neg { color: var(--red); }
.bid-input-label { display: block; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--dim); margin-bottom: 5px; }
@media (max-width: 520px) { .bid-grid { grid-template-columns: 1fr; } }

/* a market row is tappable for the full player card */
.mk-auc[data-mkcard] { cursor: pointer; }
.mk-auc[data-mkcard]:hover { background: rgba(255,255,255,.03); }
.mk-tap { font-size: 10px; color: var(--dim); opacity: .55; margin-left: 4px; }
.mk-auc[data-mkcard]:hover .mk-tap { opacity: 1; color: var(--amber); }

/* toast: the app's own message strip, since alert() can be swallowed */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 14px); z-index: 200;
  max-width: min(520px, 90vw); padding: 12px 18px; border-radius: 10px;
  background: var(--panel2); border: 1px solid var(--line); color: var(--text);
  font-size: 13.5px; line-height: 1.45; box-shadow: 0 10px 34px rgba(0,0,0,.55);
  opacity: 0; transition: opacity .2s ease, transform .2s ease; pointer-events: none;
}
.toast.in { opacity: 1; transform: translate(-50%, 0); }
.toast.err { background: #2a1214; border-color: #6e2226; color: #ffb3ad; }
.toast.ok { background: #102417; border-color: #1e5b30; color: #8ce0a3; }
/* Discord's own blurple, so the button is recognisable as the thing it opens */
.set-discord { display: inline-flex; align-items: center; gap: 8px; border-color: #5865f2; }
.set-discord svg { width: 16px; height: 16px; fill: #8f9bf6; flex: none; }
.set-discord:hover { background: rgba(88, 101, 242, .15); }

/* The typed confirmation used to sit right under the warning, so the label and
   the paragraph above it read as one block of text and the field looked like
   part of the sentence. It gets its own boxed step, set apart from the prose,
   because deciding to type DELETE is a separate act from reading why. */
.dl-confirm {
  margin: 18px 0 4px; padding: 12px 14px;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 10px;
  display: flex; flex-direction: column; gap: 9px;
}
.dl-confirm label { font-size: 12.5px; color: var(--dim); }
.dl-confirm label b { color: var(--text); letter-spacing: .06em; }
.dl-confirm .rename-input { margin: 0; }

.confirm-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.btn.danger { background: var(--red); color: #2a0a08; }
/* danger tone: the header itself reads as a warning, not just the button */
.confirm-box.tone-danger .confirm-icon { background: rgba(248, 81, 73, .12); border-color: #6e2226; }
.confirm-box.tone-danger .confirm-badge { background: rgba(248, 81, 73, .14); border-color: #6e2226; color: #ffb3ad; }
/* "Add to which calendar?" — the game's own app picker. It exists because
   Android's resolver is a fixed-size system window taller than a landscape
   phone; this one is capped to the viewport and scrolls its list instead. */
.cal-pick-box { max-width: 360px; }
.cal-pick-box h2 { margin: 0 0 12px; font-size: 16px; }
.cal-pick-list { display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow-y: auto; }
.cal-pick {
  display: block; width: 100%; text-align: left;
  background: var(--panel2); color: var(--text); border: 1px solid var(--line);
  border-radius: 9px; padding: 11px 14px; font: 600 14px/1 inherit; cursor: pointer;
}
.cal-pick:hover { border-color: var(--pitch); }

/* ---- getting started: the first six decisions, on Home ------------------
   Sits above the match card because for a brand-new club it IS the screen.
   It ticks itself off from real state and retires itself when the six are
   done, so it never becomes furniture. */
.gs-card { padding: 12px 14px; border-color: var(--pitch); }
.gs-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.gs-title { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.gs-title h2 { margin: 0; font-size: 15px; }
.gs-title span { font-size: 11px; color: var(--dim); font-weight: 700; }
.gs-dismiss {
  flex: none; background: none; border: none; color: var(--dim);
  font-size: 12px; cursor: pointer; padding: 4px 6px; line-height: 1; border-radius: 6px;
}
.gs-dismiss:hover { color: var(--text); background: var(--panel2); }
.gs-bar { height: 3px; border-radius: 2px; background: var(--bg); overflow: hidden; margin: 8px 0 10px; }
.gs-bar i { display: block; height: 100%; border-radius: 2px; background: var(--pitch); transition: width .3s ease; }
.gs-rows { display: flex; flex-direction: column; gap: 5px; }
.gs-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: var(--panel2); border: 1px solid var(--line); border-left: 3px solid var(--pitch);
  border-radius: 7px; padding: 7px 10px; cursor: pointer; font: inherit; color: inherit;
}
.gs-row:hover { border-color: var(--pitch); }
.gs-tick {
  flex: none; width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--line); display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 900; color: #04160a;
}
.gs-icon { flex: none; font-size: 14px; }
.gs-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.gs-text b { font-size: 12.5px; font-weight: 700; }
.gs-text i { font-size: 11px; color: var(--dim); font-style: normal; }
.gs-go { flex: none; color: var(--dim); font-size: 15px; }
/* a finished task stays readable but stops competing for the eye */
.gs-row.done { border-left-color: var(--line); opacity: .6; }
.gs-row.done .gs-tick { background: var(--pitch); border-color: var(--pitch); }
.gs-row.done .gs-text b { text-decoration: line-through; }

/* the one-time hello in front of it */
.welcome-box { max-width: 420px; text-align: center; }
.welcome-logo { width: 168px; height: auto; display: block; margin: 0 auto 14px; }
.welcome-box h2 { margin: 0 0 8px; font-size: 18px; }
.welcome-lead { font-size: 13px; color: var(--dim); margin: 0 0 12px; }
.welcome-list {
  display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px;
  padding: 0; list-style: none; text-align: left;
}
.welcome-list li {
  display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 600;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 7px; padding: 7px 10px;
}
.welcome-list li span { flex: none; font-size: 14px; }
.welcome-note { margin: 0 0 10px; }

/* A landscape phone is ~390px tall and this dialog has eight things in it —
   stacked, the button lands below the fold and the box grows a scrollbar,
   which is the same trap the Android app-chooser fell into. Wide and short,
   it splits: the greeting on the left, the list and the button on the right,
   so nothing ever needs scrolling to reach. */
@media (min-width: 620px) and (max-height: 560px) {
  .welcome-box {
    display: grid; grid-template-columns: 0.85fr 1fr; gap: 18px;
    align-items: center; text-align: left; max-width: 660px;
  }
  .welcome-logo { margin: 0 0 10px; width: 150px; }
  .welcome-box h2 { font-size: 16px; }
  .welcome-lead { margin: 0; font-size: 12px; }
  .welcome-list { gap: 4px; margin: 0 0 7px; }
  .welcome-list li { padding: 5px 9px; font-size: 11.5px; }
  .welcome-note { font-size: 10.5px; margin: 0 0 8px; }
  /* the default 18px lead-in would be the couple of pixels that grow a
     scrollbar on a 390px screen — the list above it already spaces it */
  .welcome-box .confirm-actions { margin-top: 0; }
}

.pick-grid { display: grid; gap: 12px; }
.pick-grid.logos { grid-template-columns: repeat(4, 1fr); }
.pick-grid.kits { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 520px) { .pick-grid.logos, .pick-grid.kits { grid-template-columns: repeat(3, 1fr); } }
.pick-tile {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: var(--panel2); border: 2px solid var(--line); border-radius: 10px;
  padding: 10px 6px; cursor: pointer; color: var(--text);
}
.pick-tile:hover { border-color: color-mix(in srgb, var(--pitch) 45%, var(--line)); }
.pick-tile.on { border-color: var(--pitch); background: rgba(46,160,67,.12); }
.pick-tile .kit-svg, .pick-tile .logo-svg, .pick-tile .kit-img, .pick-tile .logo-img { width: 64px; height: 64px; object-fit: contain; }
.pick-tile-name { font-size: 11px; color: var(--dim); }
/* Uploading your own crest is the thing most managers came here for, so it
   sits above the presets as its own labelled control rather than as the last
   tile in the grid, where it read as one more crest to scroll past. */
.pick-upload-btn {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: rgba(46, 160, 67, .12); border: 1px solid var(--pitch);
  border-radius: 10px; padding: 11px 14px; margin-bottom: 12px; cursor: pointer;
  transition: background .12s ease;
}
.pick-upload-btn:hover { background: rgba(46, 160, 67, .2); }
.pick-upload-btn .pu-plus {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--pitch); color: #04160a; font-size: 16px; font-weight: 900;
  display: inline-flex; align-items: center; justify-content: center;
}
.pu-text { display: flex; flex-direction: column; gap: 1px; }
.pu-text b { font-size: 13.5px; }
.pu-text i { font-size: 11px; color: var(--dim); font-style: normal; }
/* a quiet divider so the presets read as the alternative, not the only option */
.pick-or {
  display: flex; align-items: center; gap: 10px; margin: 0 0 10px;
  font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: .08em;
}
.pick-or::before, .pick-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* ===== boot screen: the logo, over its own clock running =====================
   Lives in index.html so it paints on the first frame, before app.js parses —
   the gap a native app feels most.

   The wordmark is the real artwork (the same file the sign-in screen loads),
   not the word set in the UI font. The clock below it is the preloader, and
   it stays SVG rather than preloader.png because a flat image can't move its
   own hand: the sweeping arm has to be a separate shape. */
#boot {
  position: fixed; inset: 0; z-index: 200;
  background: #0d1117;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .35s ease;
}
#boot.boot-done { opacity: 0; pointer-events: none; }
.boot-inner { display: flex; flex-direction: column; align-items: center; gap: 22px; }
/* the lockup is wide (892x233), so it's sized off the viewport and capped —
   room to breathe on a landscape phone, never edge to edge on a tablet */
.boot-logo { width: min(56vw, 300px); height: auto; display: block; }
/* the clock is the preloader now: subordinate to the logo, not the headline */
.boot-mark { width: 58px; height: 58px; }

/* the orange arm sweeps the face like a minute hand */
.boot-hand {
  transform-origin: 60px 58px;
  animation: boot-sweep 1.9s cubic-bezier(.55, .12, .3, .95) infinite;
}
@keyframes boot-sweep { to { transform: rotate(360deg); } }

/* the arc draws itself in behind the hand, then releases */
.boot-arc {
  stroke-dasharray: 128;
  animation: boot-draw 1.9s ease-in-out infinite;
}
@keyframes boot-draw {
  0%   { stroke-dashoffset: 128; opacity: .35; }
  55%  { stroke-dashoffset: 0;   opacity: 1; }
  100% { stroke-dashoffset: -128; opacity: .35; }
}
/* the pivot pulses on each pass — the tick of the clock */
.boot-pivot { transform-origin: 60px 58px; animation: boot-tick 1.9s ease-in-out infinite; }
@keyframes boot-tick { 0%, 100% { transform: scale(1); } 52% { transform: scale(1.32); } }

/* Anyone who asks for less motion gets a still mark, not a spinning one. */
@media (prefers-reduced-motion: reduce) {
  .boot-hand, .boot-arc, .boot-pivot { animation: none; }
  .boot-arc { stroke-dashoffset: 0; }
}

/* ---- consent on the sign-in screen (M8-4) ---- */
.mp-consent {
  display: flex; align-items: flex-start; gap: 9px; text-align: left;
  font-size: 13px; color: var(--dim); line-height: 1.45;
}
.mp-consent input { margin-top: 2px; width: 17px; height: 17px; accent-color: var(--pitch); flex: 0 0 auto; }
.mp-link.inline { display: inline; padding: 0; font-size: 13px; }

/* ---- Settings screen ---- */
.set-head h2 { margin: 0; }
.set-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.set-danger { border-color: color-mix(in srgb, var(--danger, #e05d4b) 40%, var(--line)); }
.set-danger h2 { color: var(--danger, #e05d4b); }
/* the legal sheet, read inside the app — a native build has no address bar */
.legal-box {
  width: min(860px, 94vw); height: min(82vh, 760px);
  padding: 0; overflow: hidden; position: relative;
}
.legal-box iframe { width: 100%; height: 100%; border: 0; display: block; background: #0d1117; }
.legal-box .confirm-close { position: absolute; top: 10px; right: 12px; z-index: 2; }

/* ---- donation prompt (M9) -------------------------------------------------
   Its own visual language rather than the game's card style: this is Ninety
   speaking as itself, not another screen. Spec-built — #1E293B card, amber
   primary, and a tertiary "later" that carries no guilt at all. */
.donate-overlay { display: flex; align-items: center; justify-content: center; }
.donate-card {
  width: 100%; max-width: 360px; padding: 32px 24px; text-align: center;
  background: #1E293B; border: 1px solid rgba(255,255,255,.1); border-radius: 16px;
  animation: donate-in .3s ease both;
}
@keyframes donate-in { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: scale(1); } }
.donate-icon {
  width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 26px;
  background: rgba(245,158,11,.15); border: 1px solid rgba(245,158,11,.4);
}
.donate-head { font-size: 20px; font-weight: 600; color: #fff; margin: 0 0 6px; }
.donate-sub { font-size: 14px; font-weight: 400; color: #94A3B8; margin: 0 0 18px; }
.donate-box {
  text-align: left; border: 1px solid rgba(245,158,11,.45); border-radius: 10px;
  background: rgba(245,158,11,.06); padding: 13px 15px; margin-bottom: 20px;
}
.donate-box-title {
  font-size: 11px; font-weight: 700; letter-spacing: .09em; color: #F59E0B; margin-bottom: 5px;
}
.donate-box-text { font-size: 13px; font-weight: 400; color: #CBD5E1; margin: 0; line-height: 1.5; }
.donate-card button { display: block; width: 100%; cursor: pointer; border-radius: 10px; }
.donate-primary {
  background: #F59E0B; color: #0F172A; border: none;
  font-size: 14px; font-weight: 600; padding: 13px 16px; margin-bottom: 9px;
}
.donate-primary.pulsing { animation: donate-pulse 2s ease-in-out infinite; }
@keyframes donate-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); }
  50%      { box-shadow: 0 0 0 6px rgba(245,158,11,.22); }
}
.donate-secondary {
  background: rgba(255,255,255,.1); color: #fff; border: none;
  font-size: 15px; font-weight: 500; padding: 12px 16px; margin-bottom: 9px;
}
.donate-tertiary {
  background: transparent; color: #64748B; border: none;
  font-size: 13px; font-weight: 400; padding: 9px 16px;
}
.donate-tertiary:hover { color: #94A3B8; }
.donate-foot { font-size: 11px; font-weight: 400; color: #475569; margin: 14px 0 0; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) {
  .donate-card { animation: none; }
  .donate-primary.pulsing { animation: none; }
}

/* The sign-in screen wears the real wordmark — the SAME file the native
   splash uses, generated from "Ninety logo.png" by make-app-icons.mjs and
   recoloured for a dark ground. Replacing the source art updates both. */
.mp-logo {
  display: block; width: min(230px, 74%); height: auto;
  margin: 0 auto 6px;
}

/* ---- a building you haven't built yet ------------------------------------
   Reached from the campus map or straight from the nav (the Academy button
   used to dead-end here). Same header as the real page so it reads as that
   building's page, not an error. */
.locked-card { padding: 20px; }
.locked-note h3 { font-size: 17px; margin: 0 0 8px; }
.locked-note p { color: var(--dim); font-size: 14px; line-height: 1.6; margin: 0 0 14px; max-width: 62ch; }
.locked-figures { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.locked-fig {
  display: flex; flex-direction: column; gap: 3px; min-width: 108px;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px;
}
.locked-fig span { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--dim); }
.locked-fig b { font-size: 15px; font-variant-numeric: tabular-nums; }
.locked-short { color: var(--red); margin-bottom: 12px; }
.locked-note .fac-bar { display: block; margin: 4px 0 8px; }

/* ---- you won him -----------------------------------------------------------
   The payoff of an auction, which used to be a dialog that just stopped
   counting down. Short, loud, and it leaves on its own. */
.won-overlay { z-index: 120; }
.won-box {
  position: relative; overflow: hidden; text-align: center;
  background: var(--panel); border: 1px solid var(--pitch); border-radius: 16px;
  padding: 26px 24px 22px; width: 100%; max-width: 340px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 0 4px rgba(46,160,67,.12);
  animation: won-in .38s cubic-bezier(.2,.9,.3,1.2) both;
}
@keyframes won-in { from { opacity: 0; transform: scale(.86) translateY(10px); } to { opacity: 1; transform: none; } }
.won-kicker {
  font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: #04160a; background: var(--pitch); display: inline-block;
  padding: 4px 12px; border-radius: 999px; margin-bottom: 12px;
}
.won-shirt { display: flex; justify-content: center; margin-bottom: 8px; }
.won-name { margin: 0 0 2px; font-size: 21px; }
.won-price { font-size: 27px; font-weight: 800; color: var(--pitch); line-height: 1.1; }
.won-sub { margin: 8px 0 16px; font-size: 12.5px; color: var(--dim); }
/* confetti: cheap, CSS-only, and gone in a second and a half */
.won-burst { position: absolute; inset: 0; pointer-events: none; }
.won-burst i {
  position: absolute; top: -12px; width: 7px; height: 11px; border-radius: 1px; opacity: 0;
  animation: won-fall 1.5s ease-in forwards;
}
.won-burst i:nth-child(3n)   { background: var(--pitch); }
.won-burst i:nth-child(3n+1) { background: var(--amber); }
.won-burst i:nth-child(3n+2) { background: #58a6ff; }
.won-burst i:nth-child(1){left:6%;animation-delay:.02s}   .won-burst i:nth-child(2){left:14%;animation-delay:.20s}
.won-burst i:nth-child(3){left:22%;animation-delay:.08s}  .won-burst i:nth-child(4){left:30%;animation-delay:.30s}
.won-burst i:nth-child(5){left:38%;animation-delay:.13s}  .won-burst i:nth-child(6){left:46%;animation-delay:.26s}
.won-burst i:nth-child(7){left:54%;animation-delay:.05s}  .won-burst i:nth-child(8){left:62%;animation-delay:.34s}
.won-burst i:nth-child(9){left:70%;animation-delay:.17s}  .won-burst i:nth-child(10){left:78%;animation-delay:.11s}
.won-burst i:nth-child(11){left:86%;animation-delay:.28s} .won-burst i:nth-child(12){left:94%;animation-delay:.07s}
.won-burst i:nth-child(13){left:50%;animation-delay:.38s} .won-burst i:nth-child(14){left:10%;animation-delay:.40s}
@keyframes won-fall {
  0%   { opacity: 1; transform: translateY(0) rotate(0deg); }
  100% { opacity: 0; transform: translateY(320px) rotate(420deg); }
}
@media (prefers-reduced-motion: reduce) {
  .won-box { animation: none; }
  .won-burst { display: none; }
}

/* the bid field flashing as it follows a rival's raise, so the number
   changing under you is something you SEE rather than something you discover */
.bid-input-bumped { animation: bid-bump .55s ease; }
@keyframes bid-bump {
  0%, 100% { box-shadow: none; }
  35% { box-shadow: 0 0 0 3px rgba(210, 153, 34, .35); border-color: var(--amber); }
}

/* ---- the bid footer: a live price you read, a field you own ----------------
   The asking price was the value of an input, and the ticker rewrote it under
   the cursor — so the field could not be typed in. It is a read-only figure
   now; the editable one appears only if you ask for it, and nothing ever
   writes to it again. */
.bid-ask-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 9px 12px; margin-bottom: 8px;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 9px;
}
.bid-ask-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); font-weight: 700; }
.bid-ask { font-size: 19px; font-weight: 800; color: var(--amber); font-variant-numeric: tabular-nums; border-radius: 5px; }
.bid-custom-toggle {
  background: none; border: none; padding: 0 0 8px; cursor: pointer;
  color: var(--dim); font: inherit; font-size: 12px; text-decoration: underline;
}
.bid-custom-toggle:hover { color: var(--text); }
.bid-custom { padding-bottom: 4px; }

/* ---- the off-pitch edge -----------------------------------------------------
   A bonus nobody can see is a bonus nobody believes in. The total leads, in
   the accent, and each chip says where its share came from. It appears only
   when something is actually in force, so its presence IS the signal. */
.bst-strip {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 8px 0 2px; padding: 7px 10px;
  background: linear-gradient(90deg, rgba(46,204,113,.16), rgba(46,204,113,.04));
  border: 1px solid rgba(46,204,113,.34); border-radius: 10px;
}
.bst-strip.pre {
  margin: 0 12px 10px;
  background: rgba(0,0,0,.42);
  border-color: rgba(255,255,255,.16);
  backdrop-filter: blur(2px);
}
.bst-total {
  font-size: 17px; font-weight: 900; color: #2ecc71; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.bst-strip.pre .bst-total { color: #6ee7a0; }
.bst-chips { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
.bst-chip {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  font-size: 11px; color: var(--dim); white-space: nowrap;
}
.bst-chip b { font-size: 12px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.bst-chip.bst-you b { color: #4da3ff; }
.bst-chip.bst-crowd b { color: #f2c14e; }
/* a ground at ninety per cent is a different animal — let it say so */
.bst-chip.bst-crowd.packed {
  background: rgba(242,193,78,.16); border-color: rgba(242,193,78,.4);
  animation: bstPacked 2.6s ease-in-out infinite;
}
@keyframes bstPacked {
  0%, 100% { box-shadow: 0 0 0 0 rgba(242,193,78,0); }
  50% { box-shadow: 0 0 0 3px rgba(242,193,78,.13); }
}
@media (prefers-reduced-motion: reduce) { .bst-chip.bst-crowd.packed { animation: none; } }

/* ---- the groups, seen from inside the building --------------------------
   A read-only window on the Training screen: enough to know whether the
   pitches are busy, and a way straight there. Whole row is the target. */
.tgp-card h2 { margin: 0 0 2px; }
.tgp-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px; margin-bottom: 8px; text-align: left;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 10px;
  color: inherit; font: inherit; cursor: pointer;
}
.tgp-row:hover { border-color: var(--accent); background: rgba(255,255,255,.045); }
.tgp-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--dim); }
.tgp-dot.on { background: #2ecc71; box-shadow: 0 0 0 3px rgba(46,204,113,.16); }
.tgp-dot.paused { background: #f2c14e; }
.tgp-dot.no-coach { background: #e0555a; }
.tgp-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.tgp-name { font-weight: 700; font-size: 13px; }
.tgp-meta, .tgp-when { font-size: 11px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tgp-bar { display: block; height: 4px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.tgp-bar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.tgp-state {
  flex: 0 0 auto; font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; padding: 3px 7px; border-radius: 999px;
  background: rgba(255,255,255,.07); color: var(--dim);
}
.tgp-state.on { background: rgba(46,204,113,.16); color: #2ecc71; }
.tgp-state.no-coach { background: rgba(224,85,90,.16); color: #e0555a; }
.tgp-go { margin-top: 2px; }
/* an upgrade in flight, said plainly — "Level 2 of 3" alongside a build bar
   was reading as "level 2 isn't finished" */
.tg-upgrading { margin: 4px 0 0; font-size: 12px; color: #f2c14e; font-weight: 600; }

/* ---- a stage with a crane in it ------------------------------------------
   done / current / locked left no way to say "the builders are here". A
   dashed, breathing amber ring and a countdown do; without it the strip read
   as finished while an upgrade was still hours away. */
.arena-stage.building .arena-stage-badge {
  background: rgba(242,193,78,.14);
  border: 2px dashed #f2c14e;
  color: #f2c14e;
  animation: stageBuild 2.2s ease-in-out infinite;
}
.arena-stage.building .arena-stage-cap,
.arena-stage.building .arena-stage-name { color: #f2c14e; }
.arena-stage-eta {
  display: block; margin-top: 3px;
  font-size: 10px; font-weight: 700; color: #f2c14e;
  font-variant-numeric: tabular-nums;
}
@keyframes stageBuild {
  0%, 100% { box-shadow: 0 0 0 0 rgba(242,193,78,.34); }
  50% { box-shadow: 0 0 0 6px rgba(242,193,78,0); }
}
@media (prefers-reduced-motion: reduce) { .arena-stage.building .arena-stage-badge { animation: none; } }

/* ---- what was on the scales ---------------------------------------------
   The full-time report says what happened; this says what was weighing on it.
   Two columns, yours first and lit, each itemising the multipliers the engine
   actually applied. A penalty (a man short) is the same kind of fact and sits
   in the same list, in red. */
.mb-card { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.mb-h { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--dim); }
.mb-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { .mb-cols { grid-template-columns: 1fr; } }
.mb-col {
  padding: 9px 10px; border-radius: 9px;
  background: var(--panel2); border: 1px solid var(--line);
}
.mb-col.mine { border-color: rgba(46,160,67,.4); background: rgba(46,160,67,.07); }
.mb-col-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding-bottom: 7px; margin-bottom: 7px; border-bottom: 1px solid var(--line);
}
.mb-col-title {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mb-col.mine .mb-col-title { color: var(--pitch); }
.mb-col-net { font-size: 15px; font-weight: 800; color: #2ecc71; font-variant-numeric: tabular-nums; flex: none; }
.mb-col-net.neg { color: #e0555a; }
.mb-row { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 7px; padding: 4px 0; }
.mb-ico { font-size: 13px; line-height: 1; text-align: center; }
.mb-body { display: flex; flex-direction: column; min-width: 0; }
.mb-body b { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-note { font-size: 10.5px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-pct { font-size: 12px; font-weight: 800; color: #2ecc71; font-variant-numeric: tabular-nums; flex: none; }
.mb-row.neg .mb-pct { color: #e0555a; }
.mb-none { margin: 0; font-size: 11.5px; color: var(--dim); }

/* ---- room to grow --------------------------------------------------------
   The division sets both the ceiling and the pace, and neither was visible —
   so promotion looked like a trophy rather than the thing that makes a club
   big. This says it in one bar and two lines. */
.fanclub-growth h3 { margin-bottom: 8px; }
.fg-bar { height: 8px; border-radius: 5px; background: rgba(255,255,255,.08); overflow: hidden; }
.fg-bar i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--pitch), #6ee7a0); }
.fg-line {
  display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  margin-top: 7px; font-size: 12px; color: var(--dim);
}
.fg-line b { font-variant-numeric: tabular-nums; }
.fg-next { margin: 9px 0 0; font-size: 12px; color: var(--amber); }

/* ---- the warning at the moment of the spend ------------------------------
   Silence means you can afford it; a line means stop and think. It sits
   directly under the button or price it is about, in the colour of how bad. */
.spend-warn {
  display: flex; align-items: baseline; gap: 6px;
  margin-top: 7px; padding: 7px 10px; border-radius: 8px;
  font-size: 12px; line-height: 1.4;
  background: rgba(242,193,78,.1); border: 1px solid rgba(242,193,78,.32); color: #f2c14e;
}
.spend-warn.crit { background: rgba(224,85,90,.1); border-color: rgba(224,85,90,.38); color: #e0555a; }
.staff-card-actions .spend-warn { flex-basis: 100%; }
.mk-auc-bid .spend-warn { margin-top: 5px; font-size: 11px; }
/* the strip's noun: the percentages are TEAM STRENGTH, and say so */
.bst-label {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: #2ecc71; flex: none;
}
.bst-strip.pre .bst-label { color: #6ee7a0; }
.mb-sub { margin: -6px 0 10px; font-size: 11.5px; color: var(--dim); }
/* a deal running out is a run-in job — say when the desk opens, don't sit a
   dead negotiation form on the screen for a whole season */
.mgmt-nego-wait {
  margin-top: 8px; padding: 7px 10px; border-radius: 8px;
  font-size: 11.5px; color: var(--dim);
  background: var(--panel2); border: 1px dashed var(--line);
}

/* ---- general training ----------------------------------------------------
   The session that always runs: no coach, no slot, no level. It sits above the
   groups because it is what a brand-new club has, and it is styled quieter
   than they are — it is the floor, not the ambition. */
.gt-card { border-left: 3px solid var(--line); }
.gt-card.on { border-left-color: var(--pitch); }
.gt-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.gt-head h2 { margin: 0; }
.gt-head .btn { flex: none; }
.gt-facts { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px; }
.gt-fact { display: flex; flex-direction: column; }
.gt-fact b { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.gt-fact i { font-size: 10.5px; font-style: normal; color: var(--dim); text-transform: uppercase; letter-spacing: .04em; }

/* ---- the scout on the road ----------------------------------------------
   While he is away the wait is the whole story of this card, so it reads
   like one: full-width, the countdown the biggest thing on it. */
.ya-out {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; margin-bottom: 12px; border-radius: 12px;
  background: linear-gradient(90deg, rgba(77,163,255,.14), rgba(77,163,255,.03));
  border: 1px solid rgba(77,163,255,.32);
}
.ya-out-icon { font-size: 28px; line-height: 1; flex: none; }
.ya-out-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ya-out-title { font-size: 15px; font-weight: 800; }
.ya-out-sub { font-size: 12px; color: var(--dim); }
.ya-out-clock { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex: none; }
.ya-out-clock b {
  font-size: 22px; font-weight: 900; color: #4da3ff; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.ya-out-clock span { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--dim); }
@media (max-width: 480px) { .ya-out { flex-wrap: wrap; } .ya-out-clock { align-items: flex-start; } }

/* ---- the ground, section by section --------------------------------------
   Terraces at the bottom, boxes at the top, exactly like standing in it.
   Each row: what the seat costs, how it's selling at today's mood, what it
   brings in. The fill bar is the story — watch the posh rows drain as the
   mood does. */
.seat-head, .seat-row {
  display: grid; grid-template-columns: 22px minmax(90px, 1.2fr) 52px minmax(60px, 1fr) 110px 78px;
  gap: 8px; align-items: center;
}
.seat-head { font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--dim); padding: 0 0 4px; }
.seat-row { padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.07); font-size: 12.5px; }
.seat-row:last-of-type { border-bottom: none; }
.seat-ico { display: flex; align-items: center; justify-content: center; }
.seat-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat-price { color: var(--dim); font-variant-numeric: tabular-nums; }
.seat-bar { display: block; height: 6px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; }
.seat-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--pitch), #6ee7a0); }
.seat-fill { font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums; text-align: right; }
.seat-rev { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
@media (max-width: 560px) {
  .seat-head { display: none; }
  .seat-head + .seat-row { border-top: none; }
  .seat-row { grid-template-columns: 20px 1fr 46px 64px; }
  .seat-bar, .seat-fill { display: none; }
}

/* a stage that builds a NEW kind of seat says so on the roadmap */
/* ---- the ground, drawn ---------------------------------------------------
   Each roadmap stage carries a pie of that level's ground: one slice per kind
   of seat, sized by its share of capacity. Read along the strip and you watch
   the grey terraces give way to blue seats, then a green roof, then gold and
   violet at the top of the ladder. One palette, cheap to posh, shared with the
   seating table's swatches so the two views teach the same vocabulary. */
.seat-terraces { --seat-c: #7d8ea3; }   /* bare concrete   */
.seat-seats    { --seat-c: #4da3ff; }   /* plastic blue    */
.seat-covered  { --seat-c: #2ecc71; }   /* under the roof  */
.seat-premium  { --seat-c: #f2c14e; }   /* padded, warm    */
.seat-vip      { --seat-c: #d977f2; }   /* the boxes       */
/* the same five as plain values, for the conic-gradient stop list */
.arena-roadmap, .seat-legend {
  --sc-terraces: #7d8ea3; --sc-seats: #4da3ff; --sc-covered: #2ecc71;
  --sc-premium: #f2c14e; --sc-vip: #d977f2;
}

.arena-pie {
  position: relative; display: block;
  width: 58px; height: 58px; margin: 8px auto 5px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 1px 5px rgba(0,0,0,.35);
}
/* a hole in the middle keeps the thin slices readable at this size and stops
   the pie reading as a solid disc of colour */
.arena-pie::after {
  content: ''; position: absolute; inset: 30%;
  border-radius: 50%; background: var(--panel);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09);
}
/* a stage that BUILDS a new kind of seat wears its dot, and breathes */
.arena-pie.fresh { animation: pieNew 2.4s ease-in-out infinite; }
@keyframes pieNew {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 1px 5px rgba(0,0,0,.35), 0 0 0 0 rgba(255,255,255,0); }
  50%      { box-shadow: inset 0 0 0 1px rgba(255,255,255,.3),  0 1px 5px rgba(0,0,0,.35), 0 0 0 4px rgba(255,255,255,.07); }
}
.pie-new {
  position: absolute; top: -3px; right: -3px; z-index: 1;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--seat-c);
  box-shadow: 0 0 0 2px var(--panel), 0 0 6px var(--seat-c);
}
.pie-new + .pie-new { top: 9px; right: -6px; }
/* a stage you haven't built yet is a plan, not a ground */
.arena-stage.locked .arena-pie { opacity: .5; filter: saturate(.6); animation: none; }
@media (prefers-reduced-motion: reduce) { .arena-pie.fresh { animation: none; } }

.seat-legend { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 10px; }
.seat-key { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--dim); }
.seat-key.locked { opacity: .45; }
.seat-swatch {
  display: inline-block; width: 10px; height: 10px; border-radius: 2px;
  background: var(--seat-c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
}

/* the post-match gate, broken down by section */
.attend-kinds { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 5px; }
.attend-kind { font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums; }

/* ---- the roof, stated separately from the seat tiers ---------------------
   "Covered stand 62%" was a tier name that read as a coverage figure, so a
   fully roofed Mega Arena looked 62% covered. The tier is the grandstand;
   THIS is the roof, and it says its own number. */
.arena-roof {
  display: block; margin-top: 2px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .02em;
  color: var(--dim); white-space: nowrap;
}
.arena-roof.full { color: #6ee7a0; }
.arena-pie.roofed { box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 0 0 2px rgba(110,231,160,.45), 0 1px 5px rgba(0,0,0,.35); }
.seat-roof { font-style: normal; margin-left: 5px; opacity: .6; font-size: 11px; }
.seat-roof-tag {
  margin-left: 8px; padding: 2px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 700; text-transform: none; letter-spacing: 0;
  background: rgba(255,255,255,.07); color: var(--dim);
}
.seat-roof-tag.full { background: rgba(46,204,113,.16); color: #6ee7a0; }

/* ---- the ground you actually built ---------------------------------------
   The stage strip is 7 x 118px; on a wide screen that left a dead column on
   the right. It holds the photograph of the tier you own now — not the one
   you're saving for — so the picture changes the day an expansion completes.
   The strip keeps its own horizontal scroll; the portrait never shrinks it. */
.arena-roadmap-wrap { display: flex; align-items: stretch; gap: 16px; }
.arena-roadmap-wrap .arena-roadmap { flex: 1 1 auto; min-width: 0; margin-bottom: 0; }
.arena-art {
  /* A cut-out on transparency: no frame, no panel, no caption. It stands on
     the card's own background — the strip beside it already names the tier. */
  display: block; flex: 0 0 250px; align-self: center;
  width: 260px; height: 142px; object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.45));
}
/* narrow screens: the photo leads, full width, and the strip scrolls beneath */
@media (max-width: 900px) {
  .arena-roadmap-wrap { flex-direction: column-reverse; gap: 4px; }
  .arena-art { flex: none; width: 100%; height: 132px; }
}

/* ---- the language picker -------------------------------------------------
   Six chips, the active one lit. Native names, not English exonyms — a
   player hunting for their language recognises "Română", not "Romanian". */
.lang-row { display: flex; gap: 8px; flex-wrap: wrap; }
.lang-chip {
  padding: 8px 16px; border-radius: 999px; cursor: pointer;
  background: var(--panel2); border: 1px solid var(--line);
  color: var(--text); font: inherit; font-size: 13px; font-weight: 600;
}
.lang-chip:hover { border-color: var(--accent); }
.lang-chip.on { background: rgba(46,204,113,.14); border-color: var(--pitch); color: #6ee7a0; }