/* ==================================================================
   APEX XI — dark navy base, glass cards, condensed numerals
   ================================================================== */
:root {
  --bg: #05070e;
  --bg-2: #0a0f1c;
  --panel: rgba(255, 255, 255, .045);
  --panel-hi: rgba(255, 255, 255, .085);
  --line: rgba(255, 255, 255, .11);
  --line-strong: rgba(255, 255, 255, .2);
  --text: #eef2fb;
  --text-dim: #8b97b0;
  --text-mute: #5c6780;
  /* v162: 27 rules (Account, Online, chemistry key…) asked for --muted, which was never
     defined — every one was dropped and the text came out full white */
  --muted: var(--text-dim);
  /* APEX green. `applyTheme` sets these on <html> too, but they are stated here
     so the first paint is already the right colour rather than a cyan flash. */
  --accent: #23c55e;
  --accent-deep: #0f9e56;
  --accent-soft: rgba(35, 197, 94, .18);
  --good: #3ddc97;
  --warn: #ffb703;
  --bad: #ff5d6c;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 18px 50px rgba(0, 0, 0, .55);
  --font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-num: "Bahnschrift", "DIN Alternate", "Oswald", "Arial Narrow", "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; }

/* The browser's own [hidden] rule is a plain attribute selector, so any class
   that sets `display` outranks it — that is how the back arrow ended up on the
   main menu. Everything that hides itself through the attribute relies on this. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body {
  background:
    radial-gradient(1200px 700px at 12% -10%, #12203d 0%, transparent 60%),
    radial-gradient(900px 600px at 92% 6%, #1b1030 0%, transparent 62%),
    linear-gradient(180deg, #070b14 0%, #05070e 55%, #04060c 100%);
  background-attachment: fixed;
}

/* The menu's key art: a frame shot with the game's own renderer — its real
   stadium, floodlights and crowd — graded dark at capture so UI sits on it.
   On body so it never rides a screen animation's containing block; the grid
   and orbs paint over it and read as part of the grade. */
/* The menu key art: a frame shot in the game's own engine from a low pitchside
   camera, then graded — see tools/keyart/. Most of the darkening lives in the
   image itself (its lower half is scrimmed there, under where the tiles and the
   small print sit); this gradient only finishes the job, because a scrim heavy
   enough to make the art safe in CSS alone flattens it to a grey wash. */
body.on-menu::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4, 6, 13, .22) 0%, rgba(4, 6, 13, .18) 34%, rgba(4, 6, 13, .72) 100%),
    url('../assets/keyart.webp') center center / cover no-repeat;
}
/* v126: the new art is 2560 wide for big screens; a phone takes the 1600 cut */
@media (max-width: 900px) {
  body.on-menu::before {
    background:
      linear-gradient(180deg, rgba(4, 6, 13, .22) 0%, rgba(4, 6, 13, .18) 34%, rgba(4, 6, 13, .72) 100%),
      url('../assets/keyart-1600.webp') center center / cover no-repeat;
  }
}
/* The wordmark is back: the art it was hidden for carried its own lockup, and
   this one does not. If the art is ever swapped for one that does, hide it
   again rather than stacking two titles. */
/* the blue/magenta orbs and the grid are the backdrop for screens that have no
   art; over the key art they only put a colour cast in two corners */
body.on-menu .bg-orb, body.on-menu .bg-grid { display: none; }
body.on-menu .disclaimer { text-shadow: 0 1px 10px rgba(0, 0, 0, .85); }
/* A short landscape phone crops the art vertically, and centring it leaves the
   lockup sliced in half behind the top bar. Drop the framing so the title goes
   cleanly off the top instead — the top bar is already carrying the brand. */
@media (max-height: 620px) {
  body.on-menu::before { background-position: center 78%, center 78%; }
}

.bg-grid {
  position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .35;
  background-image:
    linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at 50% 0%, #000 10%, transparent 78%);
}
.bg-orb {
  position: fixed; border-radius: 50%; filter: blur(90px); opacity: .34;
  pointer-events: none; z-index: 0;
}
.bg-orb.one { width: 460px; height: 460px; background: #1a4fff; top: -160px; left: -120px; }
.bg-orb.two { width: 420px; height: 420px; background: #b7248a; bottom: -180px; right: -140px; }

/* ------------------------------- Top bar ------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(5, 7, 14, .78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.icon-btn {
  width: 36px; height: 36px; flex: 0 0 36px;
  border-radius: 11px; border: 1px solid var(--line);
  background: var(--panel); color: var(--text);
  font-size: 24px; line-height: 1; cursor: pointer;
  display: grid; place-items: center; padding-bottom: 4px;
  transition: background .18s, border-color .18s, transform .18s;
}
.icon-btn:hover { background: var(--panel-hi); border-color: var(--line-strong); transform: translateX(-2px); }
.brand {
  display: flex; align-items: center; gap: 10px;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--text); font: inherit;
  font-weight: 700; letter-spacing: .02em; font-size: 15px;
  margin-right: auto; min-width: 0;
}
.brand span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The header badge: the publisher mark shrunk to 30px.
   It used to be a rounded square filled with a gradient from the user's accent
   colour to near-white, which on the amber accent read as a stray yellow box
   next to the title. Same disc, ring and A as the cover, with the diagonal
   accent dropped because at this size it is one grey pixel. */
.brand-mark {
  display: grid; place-items: center;
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%;
  color: transparent; font-size: 0;
  position: relative;
  background: no-repeat center / 100% 100%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='46' fill='%230b1220'/%3E%3Ccircle cx='50' cy='50' r='46' fill='none' stroke='%2323c55e' stroke-width='6'/%3E%3Cpath d='M25 75 L50 26 L75 75' fill='none' stroke='%23f6f9ff' stroke-width='12' stroke-linejoin='miter'/%3E%3Cpath d='M35 59 H65' stroke='%23f6f9ff' stroke-width='10'/%3E%3C/svg%3E");
}

.coin-chip {
  font-family: var(--font-num); font-weight: 700; font-size: 13px;
  padding: 6px 12px; border-radius: 999px; white-space: nowrap;
  background: linear-gradient(180deg, rgba(255, 183, 3, .18), rgba(255, 183, 3, .06));
  border: 1px solid rgba(255, 183, 3, .32); color: #ffd97a;
}
.coin-chip i { font-style: normal; }

/* ------------------------------ Layout --------------------------- */
.screen {
  position: relative; z-index: 1;
  /* 1180px was sized for tablets and read as a postage stamp on a desktop
     monitor — on a 1920px screen the app used 61% of it and every tile came
     out small. 1520px fills a desktop properly and is still comfortably
     within a laptop; the auto-fit grids inside simply take the extra room. */
  max-width: 1520px; margin: 0 auto;
  padding: 20px 18px 72px;
}
/* ---------------------------- Navigation ------------------------- *
 * Going somewhere should look like going somewhere. The incoming screen rises
 * and settles while the outgoing one is pushed away from the viewer, so the
 * two read as a move rather than a swap — see `ghostOut` in app.js for why the
 * old screen still exists at that point.                                     */
.screen-in { animation: screenIn .38s cubic-bezier(.22, .9, .3, 1) both; }
@keyframes screenIn {
  from { opacity: 0; transform: translateY(16px) scale(.988); }
  to   { opacity: 1; transform: none; }
}
.reduce-motion .screen-in { animation: none; }

/* The screen you just left, held for the length of its exit. Fixed and
   pointer-dead: it is a picture of a screen, not a screen. */
.screen-ghost {
  position: fixed; z-index: 3; overflow: hidden; pointer-events: none;
  transform-origin: 50% 30%;
  animation: screenOut .32s cubic-bezier(.4, 0, .8, .4) both;
}
/* Deeper in: the old screen recedes, as though you moved past it. */
@keyframes screenOut {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-10px) scale(1.035); }
}
/* Back out to the hub: it drops towards you instead, so the direction of
   travel is legible without a label. */
.screen-ghost.is-back { animation-name: screenOutBack; }
@keyframes screenOutBack {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(12px) scale(.965); }
}

/* Panels arrive in sequence rather than as one slab. Capped at six: past that
   the last panel is waiting on an animation nobody is still watching, and a
   stagger that outlasts attention reads as lag. */
.screen-in .panel { animation: panelIn .4s cubic-bezier(.22, .9, .3, 1) both; }
.screen-in .panel:nth-of-type(1) { animation-delay: .05s; }
.screen-in .panel:nth-of-type(2) { animation-delay: .10s; }
.screen-in .panel:nth-of-type(3) { animation-delay: .15s; }
.screen-in .panel:nth-of-type(4) { animation-delay: .19s; }
.screen-in .panel:nth-of-type(5) { animation-delay: .22s; }
.screen-in .panel:nth-of-type(n+6) { animation-delay: .25s; }
@keyframes panelIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.reduce-motion .screen-in .panel,
.reduce-motion .screen-ghost { animation: none; }

.glass {
  background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .022));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
}

.panel { padding: 16px; margin-bottom: 16px; }
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
/* Panel titles carry a short accent rule. It is small, but it is the reason a
   stack of panels reads as this game rather than as a settings app: the same
   bold green mark the cover is built on, repeated down the page. */
.panel-head h2 {
  position: relative; margin: 0; padding-left: 13px;
  font-family: var(--font-num);
  font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-dim); font-weight: 800;
}
.panel-head h2::before {
  content: ''; position: absolute; left: 0; top: 50%; translate: 0 -50%;
  width: 4px; height: 1.05em; border-radius: 2px;
  background: linear-gradient(180deg, var(--accent), var(--accent-deep, var(--accent)));
}
.panel-head h2 small {
  font-family: var(--font-num); color: var(--accent); margin-left: 6px;
  letter-spacing: 0; font-size: 13px;
}
.lede { color: var(--text-dim); margin: 0 0 18px; line-height: 1.55; max-width: 62ch; }
.hint { color: var(--text-mute); font-size: 12.5px; margin: -6px 0 12px; }
.empty { color: var(--text-mute); text-align: center; padding: 26px 12px; margin: 0; line-height: 1.5; }

/* v120: facts, not paragraphs — icon chips, a folded explanation, big numbers */
.ico { flex: none; display: inline-block; vertical-align: -3px; }
.facts { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 12px; }
.fact {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, .06); border: 1px solid var(--line); color: var(--text-dim);
  font-size: 12px; line-height: 1.2; white-space: nowrap;
}
.fact .ico { color: var(--accent); }
.fact b { font-weight: 700; color: var(--text); font-family: var(--font-num); letter-spacing: .01em; }
.fact.good .ico, .fact.good b { color: var(--good); }
.fact.gold .ico, .fact.gold b { color: #ffd166; }
.fact.warn .ico, .fact.warn b { color: #ff9f5a; }
.about { position: relative; }
.panel-head:has(> .about) > h2 { margin-inline-end: auto; }
.about > summary {
  list-style: none; cursor: pointer; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font: 800 12px/1 var(--font-num); font-style: italic;
  color: var(--text-mute); border: 1.5px solid var(--line-strong); user-select: none;
}
.about > summary::-webkit-details-marker { display: none; }
.about[open] > summary, .about > summary:hover { color: var(--accent); border-color: var(--accent); }
.about > p {
  position: absolute; z-index: 30; right: 0; top: 28px; width: min(300px, 78vw); margin: 0;
  padding: 12px 14px; border-radius: 12px; background: var(--bg-2, #111827); border: 1px solid var(--line-strong);
  color: var(--text-dim); font-size: 13px; line-height: 1.5; box-shadow: 0 14px 40px rgba(0, 0, 0, .45);
}
[dir="rtl"] .about > p { right: auto; left: 0; }
.big-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; margin: 4px 0 12px; }
.big-stat {
  display: grid; justify-items: center; gap: 2px; padding: 10px 6px; border-radius: 14px;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--line); text-align: center;
}
.big-stat .ico { color: var(--accent); }
.big-stat b { font: 800 22px/1.1 var(--font-num); color: var(--text); }
.big-stat span { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-mute); }
.vs-strip {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: 0 0 12px;
  padding: 12px; border-radius: 16px; background: linear-gradient(90deg, var(--accent-soft), rgba(255, 255, 255, .03) 50%, rgba(255, 90, 90, .12));
  border: 1px solid var(--line);
}
.vs-strip > em { font: 900 italic 18px/1 var(--font-num); color: var(--text-mute); letter-spacing: .08em; }
.vs-side { display: grid; justify-items: center; gap: 2px; min-width: 0; }
.vs-side b { font: 900 34px/1 var(--font-num); color: var(--text); }
.vs-side.you b { color: var(--accent); }
.vs-side span { font-size: 12px; color: var(--text-dim); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.big-stat.good b { color: var(--good); } .big-stat.gold b { color: #ffd166; } .big-stat.warn b { color: #ff9f5a; }
.tag {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
  padding: 5px 10px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); border: 1px solid rgba(255, 255, 255, .1);
}
.tag.budget { background: rgba(61, 220, 151, .14); color: var(--good); }
.ta-l { text-align: left !important; }

/* ------------------------------ Buttons -------------------------- */
.btn {
  font: inherit; font-weight: 650; font-size: 14px;
  padding: 11px 18px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--line-strong);
  background: var(--panel-hi); color: var(--text);
  transition: transform .16s, background .18s, border-color .18s, box-shadow .18s;
}
.btn:hover { background: rgba(255, 255, 255, .13); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.985); }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.btn.primary {
  background: linear-gradient(150deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #7b5cff));
  color: #04121a; border-color: transparent;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 28%, transparent);
}
.btn.primary:hover { box-shadow: 0 14px 38px color-mix(in srgb, var(--accent) 40%, transparent); }
.btn.ghost { background: transparent; }
.btn.ghost:hover { background: var(--panel); }
.btn.big { padding: 14px 28px; font-size: 15px; }
.btn.danger { color: var(--bad); border-color: rgba(255, 93, 108, .35); }
.btn.danger:hover { background: rgba(255, 93, 108, .12); }

.mini-btn {
  font: inherit; font-size: 11px; font-weight: 650;
  padding: 6px 8px; border-radius: 8px; cursor: pointer; flex: 1;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .05); color: var(--text-dim);
  transition: background .16s, color .16s, border-color .16s;
  white-space: nowrap;
}
.mini-btn:hover { background: var(--panel-hi); color: var(--text); }
.mini-btn.danger:hover { color: var(--bad); border-color: rgba(255, 93, 108, .4); }
.mini-btn.buy { color: var(--good); border-color: rgba(61, 220, 151, .3); }
.mini-btn.buy:hover { background: rgba(61, 220, 151, .14); }
.mini-btn:disabled { opacity: .35; cursor: not-allowed; }

.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer;
  padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--line); background: transparent; color: var(--text-mute);
  transition: all .16s;
}
.chip:hover { color: var(--text); border-color: var(--line-strong); }
.chip.on { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }

.field { display: flex; flex-direction: column; gap: 5px; }
.field span { font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--text-mute); }
select {
  font: inherit; font-weight: 650; font-size: 14px;
  padding: 10px 14px; border-radius: 12px;
  background: #0d1424; color: var(--text); border: 1px solid var(--line-strong); cursor: pointer;
}

/* -------------------------------- Hero --------------------------- */
.hero { position: relative; text-align: center; padding: 30px 10px 34px; margin-bottom: 8px; }
.hero-glow {
  position: absolute; left: 50%; top: 0; translate: -50% 0;
  width: 420px; height: 220px; border-radius: 50%;
  background: var(--accent); filter: blur(110px); opacity: .3; pointer-events: none;
}
.hero-title {
  position: relative; margin: 0; font-family: var(--font-num);
  font-size: clamp(48px, 15vw, 104px); line-height: .88; font-weight: 800;
  letter-spacing: -.03em; text-transform: uppercase;
  background: linear-gradient(180deg, #fff 25%, #8ea3c9 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-title span {
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 40%, #7b5cff));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-left: .08em;
}
.hero-sub {
  position: relative; margin: 12px 0 0; color: var(--text-dim);
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
}
.hero-stats {
  position: relative; display: flex; justify-content: center; gap: 10px;
  margin-top: 22px; flex-wrap: wrap;
}
.hstat {
  min-width: 108px; padding: 12px 16px; border-radius: 14px;
  background: var(--panel); border: 1px solid var(--line);
}
.hstat b { display: block; font-family: var(--font-num); font-size: 22px; font-weight: 700; }
.hstat span { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); }

.resume-card {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 14px 16px; margin-bottom: 18px; cursor: pointer;
  border-radius: var(--radius); border: 1px solid var(--line-strong);
  background: linear-gradient(110deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02));
  color: var(--text); font: inherit;
  transition: transform .18s, border-color .18s, background .18s;
}
.resume-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.resume-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.resume-kicker { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.resume-txt b { font-size: 17px; }
.resume-meta { font-size: 12px; color: var(--text-dim); }
.resume-arrow { margin-left: auto; font-size: 22px; color: var(--accent); }

/* ------------------------------- Tiles --------------------------- */
/* The hub: a rail of small utility tiles, then the two big doors. Same four
   destinations as the old 2x2 grid — only the space moved to where sessions
   actually go. */
.hub { display: grid; gap: 14px; grid-template-columns: 128px 1fr; margin-top: 10px; }
.hub-rail { display: flex; flex-direction: column; gap: 14px; }
.hub-main { display: grid; gap: 14px; grid-template-columns: 1.1fr .9fr; }
.tile.t-mini {
  flex: 1; min-height: 0; padding: 16px 10px; gap: 7px;
  align-items: center; text-align: center; justify-content: center;
}
.t-mini .tile-name { font-size: 13.5px; }
.t-mini .mini-lock { position: absolute; top: 9px; right: 9px; color: var(--text-mute); }
.tile.t-club, .tile.t-play { min-height: 236px; }
/* Kick Off is the PLAY door: the one solid block of APEX green in the app,
   which is what makes it read as "press this first" without a word of copy. */
.tile.t-play {
  /* bright end first: the text sits top-left, and dark-on-dark-green is
     unreadable — the deep shade belongs under the swoosh, not the words */
  background: linear-gradient(140deg, #3ddf75 0%, var(--accent) 55%, var(--accent-deep) 100%);
  border-color: color-mix(in srgb, var(--accent) 70%, transparent);
  color: #04170b;
}
.tile.t-play .tile-blurb, .tile.t-play .tile-cta { color: rgba(4, 23, 11, .78); }
.tile.t-play .tile-icon {
  background: rgba(4, 23, 11, .16); border-color: rgba(4, 23, 11, .25); color: #04170b;
}
.tile.t-play .tile-swoosh path { stroke: rgba(255, 255, 255, .5); }
.tile.t-play::before { display: none; }
/* v92: nor the dark scrim every other tile gets under its words — on the green
   door it turned the dark text into dark-on-near-black, the least readable
   words on the menu */
.tile.t-play::after { display: none; }
@media (max-width: 760px) {
  .hub { grid-template-columns: 1fr; }
  .hub-rail { flex-direction: row; }
  .hub-main { grid-template-columns: 1fr; }
  .tile.t-club, .tile.t-play { min-height: 190px; }
}
/* A desktop monitor gets desktop-sized doors, not tablet ones scaled by
   nothing. Type scales with them — a big card with small text reads as empty. */
@media (min-width: 1400px) {
  .hub { grid-template-columns: 150px 1fr; gap: 18px; }
  .tile.t-club, .tile.t-play { min-height: 300px; padding: 30px 28px; }
  .tile.t-club .tile-name, .tile.t-play .tile-name { font-size: 30px; }
  .tile.t-club .tile-blurb, .tile.t-play .tile-blurb { font-size: 14.5px; }
  .t-mini .tile-name { font-size: 14.5px; }
  .menu-wordmark { font-size: 84px; }
}
.tile {
  position: relative; overflow: hidden; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 8px;
  padding: 24px 22px 22px; min-height: 208px;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
  color: var(--text); font: inherit;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: transform .26s cubic-bezier(.2, .9, .3, 1), border-color .26s, box-shadow .26s;
}
.tile::before {
  content: ''; position: absolute; inset: -40% -10% auto -10%; height: 200px;
  background: radial-gradient(closest-side, var(--tone, var(--accent)), transparent 70%);
  opacity: .22; transition: opacity .3s, transform .4s; pointer-events: none;
}

/* The swoosh, carried down from the cover.
   Sits in the lower corner of every tile and sweeps up to the right, so the
   four buttons read as a set and as the same product as the title screen. The
   It follows the accent. The one thing that does not is the APEX roundel: that
   is the publisher's mark, and a logo that changes colour with a preference is
   not a logo. Everything else in the interface is the player's to recolour. */
.tile-swoosh {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
  opacity: .85; transition: opacity .3s, transform .45s cubic-bezier(.2, .9, .3, 1);
}
.tile-swoosh path { fill: none; stroke-linecap: square; }
.ts-a {
  stroke: var(--accent); stroke-width: 13;
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--accent) 55%, transparent));
}
.ts-b { stroke: color-mix(in srgb, var(--accent) 30%, transparent); stroke-width: 5; }

.tile:hover .tile-swoosh { opacity: 1; transform: translate(6px, -6px); }
.reduce-motion .tile-swoosh { transition: none; }
.reduce-motion .tile:hover .tile-swoosh { transform: none; }

/* everything else in the tile sits above the artwork */
.tile-icon, .tile-name, .tile-blurb, .tile-cta { position: relative; z-index: 1; }

/* Hover is a mouse idea. On a phone there is no hover state to enter, so the
   lift only ever appeared *after* a tap, as a thing left behind — which is why
   it is fenced behind `hover: hover` and the press below does the work on
   touch. */
@media (hover: hover) {
  .tile:hover { transform: translateY(-5px); border-color: var(--accent); box-shadow: 0 22px 50px rgba(0, 0, 0, .5); }
  .tile:hover::before { opacity: .4; transform: translateY(12px); }
}
/* Snappier than the hover transition on purpose: a press has to feel like it
   happened at the moment your thumb lands, and 260ms of easing reads as lag. */
.tile:active { transform: scale(.975); transition-duration: .08s; }
.tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* The tiles deal in rather than appearing all at once.
   The menu is the screen you see most, so it is worth the third of a second —
   four doors arriving in sequence reads as the app opening, where four doors
   already there reads as a page load. Staggered off :nth-child so nothing has
   to be numbered in the markup. */
.menu-screen .tile { animation: tileIn .42s cubic-bezier(.2, .9, .3, 1) both; }
.hub-main .tile:nth-child(1) { animation-delay: .04s; }
.hub-main .tile:nth-child(2) { animation-delay: .10s; }
.hub-rail .tile:nth-child(1) { animation-delay: .16s; }
.hub-rail .tile:nth-child(2) { animation-delay: .22s; }
@keyframes tileIn {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.menu-wordmark { animation: tileIn .42s cubic-bezier(.2, .9, .3, 1) both; }
.reduce-motion .menu-screen .tile,
.reduce-motion .menu-wordmark { animation: none; }

/* One family shaded off the accent, rather than the four unrelated pastels the
   tiles used to carry — cyan, lime, pink and amber all at once, which is why
   they read as bland placeholders next to a cover built on one bold colour. */
.tone-a { --tone: var(--accent); }
.tone-b { --tone: #4b5563; }   /* Career Mode is locked; it should look it */
.tone-c { --tone: color-mix(in srgb, var(--accent) 78%, #ffffff); }
.tone-d { --tone: color-mix(in srgb, var(--accent) 55%, #ffffff); }
.tile-icon {
  width: 46px; height: 46px; border-radius: 13px;
  display: grid; place-items: center; color: var(--tone);
  background: color-mix(in srgb, var(--tone) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--tone) 34%, transparent);
}
.tile-glyph { display: block; }
/* the padlock sits inline with the CTA text, so it has to ride the baseline */
.tile-cta .tile-glyph { display: inline-block; vertical-align: -2px; margin-right: 3px; }
.tile-name { font-family: var(--font-num); font-size: 25px; font-weight: 700; letter-spacing: -.01em; }
.tile-blurb { font-size: 13px; color: var(--text-dim); line-height: 1.5; }
.tile-cta {
  margin-top: auto; font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tone);
}
.tile.is-locked .tile-swoosh { opacity: .12; filter: grayscale(1); }
.tile.is-locked:hover { border-color: var(--line); transform: none; }
.tile.is-locked:hover .tile-swoosh { transform: none; opacity: .12; }

/* ------------------------- Screen banner -------------------------
   Every mode screen opens with one of these. See components/screenHead.js for
   what the parts are and why the game needed them. */
.screen-head {
  position: relative; overflow: hidden; isolation: isolate;
  margin: 0 0 18px; padding: 22px 24px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  border-left: 3px solid var(--tone, var(--accent));
  background:
    linear-gradient(100deg, rgba(8, 12, 22, .92) 42%, rgba(8, 12, 22, .3) 78%),
    linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
/* the tinted wash behind the type, the same one the menu tiles carry */
.screen-head::before {
  content: ''; position: absolute; inset: -60% 40% auto -10%; height: 260px; z-index: -2;
  background: radial-gradient(closest-side, var(--tone, var(--accent)), transparent 70%);
  opacity: .2; pointer-events: none;
}
.sh-motif {
  position: absolute; right: 0; top: 0; height: 100%; width: min(58%, 420px);
  z-index: -1; color: var(--tone, var(--accent)); opacity: .3; pointer-events: none;
}
.sh-swoosh {
  position: absolute; right: 0; top: 0; height: 100%; width: min(38%, 300px);
  z-index: -1; opacity: .9; pointer-events: none;
}
.sh-swoosh path { fill: none; stroke-linecap: square; }

.sh-kicker {
  margin: 0 0 2px; font-family: var(--font-num);
  font-size: 11px; font-weight: 800; letter-spacing: .3em; text-transform: uppercase;
  color: var(--tone, var(--accent));
}
/* the cover's typography, one step down: same family, same 800 italic, same
   negative tracking — this is what makes the screen feel like the title card */
.sh-title {
  margin: 0; font-family: var(--font-num); font-weight: 800; font-style: italic;
  font-size: clamp(34px, 6vw, 54px); line-height: .9; letter-spacing: -.04em;
  color: #f6f9ff;
}
.sh-sub {
  margin: 8px 0 0; max-width: 46ch;
  font-size: 12.5px; line-height: 1.5; color: var(--text-dim);
}

@media (max-width: 640px) {
  .screen-head { padding: 16px 18px 15px; }
  .sh-motif { opacity: .2; }
}
/* v159: a phone held sideways is ~390 px tall. The full title card plus the top
   bar took ~260 px of it, and with Ultimate XI's tab bar about 50 px of the
   screen's own content showed on arrival. Short screens get a one-line card. */
/* v160: the career hubs' club / player card, the same treatment: one compact band */
@media (max-height: 500px) and (orientation: landscape) {
  .chub { padding: 10px 16px 10px; margin-bottom: 10px; }
  .chub-top { gap: 12px; }
  .chub-crest svg, .chub-face svg { width: 46px; height: 46px; }
  .chub-id b { font-size: 18px; }
  .chub-chips { margin-top: 8px; gap: 6px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .screen-head { margin-bottom: 10px; padding: 8px 16px 9px; }
  .sh-kicker { font-size: 9px; letter-spacing: .25em; }
  .sh-title { font-size: 26px; }
  .sh-sub { display: none; }
}

/* The wordmark on the menu, sharing the cover's typography exactly — same
   family, same 800 italic, same white-over-green split — just sized for a
   screen that has four buttons under it rather than one. */
.menu-wordmark {
  margin: 0 0 18px; display: flex; align-items: baseline; gap: .06em;
  font-family: var(--font-num); font-weight: 800; font-style: italic;
  font-size: clamp(46px, 9vw, 86px); line-height: .84; letter-spacing: -.045em;
}
.menu-wordmark .t1 { color: #f6f9ff; }
.menu-wordmark .t2 {
  background: linear-gradient(180deg, var(--accent), var(--accent-deep, var(--accent)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  /* v96: see .splash-title .t2 */
  padding-right: .16em; margin-right: -.16em;
}

/* The tiles are the whole screen now, so they sit in the middle of it rather
   than clinging to the header with a void underneath. `dvh` because iOS counts
   the address bar in `vh` and the row ends up pushed off the bottom. */
.menu-screen {
  min-height: calc(100dvh - 150px);
  display: flex; flex-direction: column; justify-content: center;
}
.menu-screen .disclaimer { margin-top: 26px; }

/* A scrim under the left column so the swoosh can never take a bite out of
   the words. */
.tile::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(100deg, rgba(8, 12, 22, .82) 32%, transparent 68%);
}

.disclaimer {
  margin: 28px auto 0; max-width: 66ch; text-align: center;
  font-size: 11.5px; line-height: 1.65; color: var(--text-mute);
}

/* ---------------------------- Player card ------------------------ */
.pcard {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 12px; border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--rar) 45%, transparent);
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--rar) 22%, transparent) 0%, rgba(10, 14, 26, .92) 46%),
    linear-gradient(180deg, #0d1426, #080c17);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.pcard::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 26px var(--rar-glow); opacity: .55;
}
.rar-special .pcard, .pcard.rar-special { box-shadow: 0 12px 34px var(--rar-glow), inset 0 1px 0 rgba(255, 255, 255, .12); }
.rar-star .pcard, .pcard.rar-star,
.rar-icon .pcard, .pcard.rar-icon { box-shadow: 0 14px 40px var(--rar-glow), inset 0 1px 0 rgba(255, 255, 255, .18); }
.pc-sheen {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 2;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .22) 50%, transparent 65%);
  transition: opacity .3s;
}
.pcard:hover .pc-sheen { opacity: 1; animation: sheen 1s ease; }
@keyframes sheen { from { transform: translateX(-70%); } to { transform: translateX(70%); } }
.reduce-motion .pc-sheen { display: none; }

.pc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.pc-rating { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.pc-ovr {
  font-family: var(--font-num); font-size: 34px; font-weight: 800; letter-spacing: -.03em;
  color: var(--rar); text-shadow: 0 2px 14px var(--rar-glow);
}
.pc-pos {
  font-size: 10.5px; font-weight: 800; letter-spacing: .12em; color: var(--text-dim);
  margin-top: 3px;
}
.pc-badges { display: flex; align-items: center; gap: 6px; }
.pc-name {
  margin-top: 8px; font-weight: 700; font-size: 14px; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pc-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin-top: 10px; }
.pc-stat { display: grid; grid-template-columns: 26px 22px 1fr; align-items: center; gap: 5px; }
.pc-stat-k { font-size: 9.5px; font-weight: 800; letter-spacing: .06em; color: var(--text-mute); }
.pc-stat-v { font-family: var(--font-num); font-size: 13px; font-weight: 700; }
.pc-stat-bar { height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.pc-stat-bar b { display: block; height: 100%; background: var(--rar); border-radius: 2px; }
.pc-foot {
  display: flex; justify-content: space-between; gap: 8px; margin-top: 10px;
  padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .09);
  font-size: 10.5px; color: var(--text-mute);
}
.pc-club { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-meta { white-space: nowrap; }
.pc-rar-tag {
  position: absolute; top: 0; right: 0; z-index: 3;
  font-size: 8.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  padding: 3px 8px 3px 10px; color: #06101c;
  background: var(--rar); border-bottom-left-radius: 10px;
}
.pc-rar-tag.static { position: static; border-radius: 6px; display: inline-block; }
.pc-chem {
  position: absolute; bottom: 10px; right: 10px; font-size: 8px; letter-spacing: 1px; z-index: 3;
}
.chem-hi { color: var(--good); }
.chem-mid { color: var(--warn); }
.chem-lo { color: var(--bad); }

.pc-mini { padding: 10px; }
.pc-mini .pc-ovr { font-size: 26px; }
.pc-mini .pc-name { font-size: 12.5px; margin-top: 6px; }
.pc-mini .pc-foot { margin-top: 7px; padding-top: 6px; font-size: 9.5px; }
.pc-full { padding: 16px; }
.pc-full .pc-ovr { font-size: 46px; }
.pc-full .pc-name { font-size: 17px; }
.pc-radar-wrap { display: grid; place-items: center; margin: 6px 0 2px; }
.radar { display: block; }

/* --------------------------- Squad builder ----------------------- */
.sb-head { display: flex; gap: 14px; flex-wrap: wrap; align-items: stretch; margin-bottom: 16px; }
.sb-metrics { display: flex; gap: 8px; padding: 14px 16px; flex: 1 1 320px; }
.metric { flex: 1; min-width: 84px; }
.metric .big { display: block; font-family: var(--font-num); font-size: 30px; font-weight: 800; line-height: 1; }
.metric .big small { font-size: 14px; color: var(--text-mute); font-weight: 600; }
.metric span { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); }
.chem-num { color: var(--bad); transition: color .3s; }
.chem-num[data-chem^="10"], .chem-num[data-chem="9"], .chem-num[data-chem="8"] { color: var(--good); }
.chem-bar { display: block; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .1); margin-top: 7px; overflow: hidden; }
.chem-bar b { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--bad), var(--warn) 55%, var(--good)); transition: width .35s; }
.sb-actions { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }

.sb-layout { display: grid; gap: 16px; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 900px) { .sb-layout { grid-template-columns: minmax(0, 1fr); } }

.pitch-wrap { padding: 14px; }
.pitch {
  position: relative; width: 100%; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden;
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .022) 0 8%, transparent 8% 16%),
    linear-gradient(180deg, #0c2a1e, #071a13 55%, #061510);
  border: 1px solid rgba(120, 255, 190, .16);
}
.pitch-lines span { position: absolute; border: 1.5px solid rgba(255, 255, 255, .13); }
.pl-halfway { left: 0; right: 0; top: 50%; border-width: 0 0 1.5px 0; }
.pl-circle { left: 50%; top: 50%; width: 22%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; }
.pl-box { left: 22%; right: 22%; height: 15%; }
.pl-box.top { top: -1px; border-top: 0; }
.pl-box.bottom { bottom: -1px; border-bottom: 0; }
.pl-six { left: 36%; right: 36%; height: 6.5%; }
.pl-six.top { top: -1px; border-top: 0; }
.pl-six.bottom { bottom: -1px; border-bottom: 0; }

.slot {
  position: absolute; translate: -50% -50%; width: 72px;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 7px 4px 6px; border-radius: 12px; cursor: pointer;
  border: 1px dashed rgba(255, 255, 255, .25);
  background: rgba(4, 12, 10, .5);
  transition: transform .18s, border-color .18s, background .18s, box-shadow .18s;
  touch-action: none;
}
.slot:hover { transform: translate(-50%, -50%) scale(1.06); border-color: var(--accent); }
.slot.drop-target {
  border-color: var(--accent); background: color-mix(in srgb, var(--accent) 22%, rgba(4, 12, 10, .7));
  box-shadow: 0 0 0 3px var(--accent-soft); transform: translate(-50%, -50%) scale(1.12);
}
.slot.filled {
  border-style: solid; border-color: color-mix(in srgb, var(--rar) 60%, transparent);
  background: linear-gradient(170deg, color-mix(in srgb, var(--rar) 26%, rgba(6, 14, 12, .9)), rgba(6, 12, 20, .95));
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45), 0 0 16px var(--rar-glow);
}
.slot-plus { font-size: 19px; color: rgba(255, 255, 255, .34); line-height: 1; }
.slot-ovr { font-family: var(--font-num); font-size: 18px; font-weight: 800; line-height: 1; color: var(--rar); }
.slot-crest { line-height: 0; margin: 1px 0; }
.slot-name {
  font-size: 8.5px; font-weight: 700; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.slot-pos { font-size: 8px; font-weight: 800; letter-spacing: .1em; color: var(--text-dim); }
.slot-pos.empty { color: rgba(255, 255, 255, .4); }
/* v158: the page-wide `.empty` (an empty-state message: 26 px of padding) was also
   matching these position labels, doubling every empty slot — they overlapped
   on a phone (the CDM sat on both centre-backs in a 4-3-3) */
.slot-pos.empty, .bslot-pos.empty { padding: 0; line-height: 1.2; margin: 0; }
.slot-chem {
  position: absolute; top: -6px; left: -6px; width: 17px; height: 17px; border-radius: 50%;
  display: grid; place-items: center; font-size: 9px; font-weight: 800;
  background: #0a1220; border: 1px solid currentColor;
}
.slot-x {
  position: absolute; top: -7px; right: -7px; width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: #131a2c; color: var(--text-dim);
  font-size: 13px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0;
}
.slot-x:hover { background: var(--bad); color: #fff; border-color: transparent; }
.pitch-hint { margin: 10px 2px 0; font-size: 11.5px; color: var(--text-mute); text-align: center; }

.sb-side { display: flex; flex-direction: column; }
.pack-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 8px; }
.pack-btn {
  display: flex; flex-direction: column; gap: 3px; cursor: pointer; text-align: left;
  padding: 12px; border-radius: 13px; font: inherit; color: var(--text);
  border: 1px solid color-mix(in srgb, var(--pk, #b9c4d0) 40%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--pk, #b9c4d0) 18%, transparent), rgba(255, 255, 255, .02));
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.pack-btn.rar-bronze { --pk: #c88a4a; }
.pack-btn.rar-silver { --pk: #b9c4d0; }
.pack-btn.rar-gold { --pk: #f4c95d; }
.pack-btn.rar-special { --pk: #ff2e88; }
.pack-btn.rar-star { --pk: #a06bff; }
.pack-btn.rar-icon { --pk: #7af7ff; }
.pack-btn:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0, 0, 0, .45); border-color: var(--pk); }
.pack-btn:disabled { opacity: .38; cursor: not-allowed; }
.pack-name { font-family: var(--font-num); font-size: 16px; font-weight: 700; }
.pack-note { font-size: 10.5px; color: var(--text-mute); }
.pack-cost { font-family: var(--font-num); font-size: 13px; font-weight: 700; color: var(--pk); margin-top: 2px; }

.collection {
  display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr));
  max-height: 560px; overflow-y: auto; padding-right: 4px;
}
.collection::-webkit-scrollbar, .table-scroll::-webkit-scrollbar, .commentary::-webkit-scrollbar { width: 8px; height: 8px; }
.collection::-webkit-scrollbar-thumb, .table-scroll::-webkit-scrollbar-thumb, .commentary::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .14); border-radius: 8px;
}
.coll-item, .grid-item { display: flex; flex-direction: column; gap: 6px; touch-action: none; }
.coll-item .pcard { cursor: grab; }
.coll-item.in-xi .pcard { outline: 2px solid var(--good); outline-offset: 1px; }
.coll-item.is-selected .pcard {
  outline: 2px solid var(--accent); outline-offset: 2px;
  transform: translateY(-3px); box-shadow: 0 14px 32px var(--accent-soft);
}
.coll-tools { display: flex; gap: 5px; }

/* Cards in the challenge submission picker. They are clickable and had no rule
   at all, so they showed a text cursor and gave no sign anything would happen. */
.coll-card { cursor: pointer; border-radius: var(--radius-sm); transition: transform .16s, filter .16s; }
.coll-card:hover { transform: translateY(-3px); filter: brightness(1.08); }
.coll-card:active { transform: translateY(-1px) scale(.985); }
/* full-width rows inside the collection grid */
.collection > .empty, .coll-banner { grid-column: 1 / -1; }
.coll-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border-radius: 10px; margin-bottom: 2px;
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.coll-banner b { font-size: 12.5px; letter-spacing: .06em; color: var(--accent); }
.coll-fit {
  font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  text-align: center; padding: 3px 6px; border-radius: 999px; border: 1px solid transparent;
}
.fit-0 { color: var(--good); border-color: color-mix(in srgb, var(--good) 45%, transparent); }
.fit-1 { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.fit-2 { color: var(--text-mute); border-color: var(--line); }
.coll-item.is-misfit .pcard { opacity: .62; }
/* the slot the collection is currently filling */
.slot.is-picking {
  border-style: solid; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft), 0 0 18px var(--accent-soft);
}
.field.inline { flex-direction: row; align-items: center; gap: 8px; }
.field.inline span { white-space: nowrap; }
.sb-side .chips { margin-bottom: 8px; }
.card-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

.drag-ghost {
  position: fixed; left: 0; top: 0; z-index: 200; pointer-events: none;
  translate: -50% -50%; padding: 8px 12px; border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; line-height: 1.15;
  background: rgba(10, 16, 30, .95); border: 1px solid var(--rar);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .6);
}
.drag-ghost b { font-family: var(--font-num); font-size: 20px; color: var(--rar); }
.drag-ghost span { font-size: 10px; font-weight: 700; }
.drag-ghost i { font-size: 9px; font-style: normal; color: var(--text-mute); }
body.is-dragging { user-select: none; cursor: grabbing; }

/* ------------------------- Pack animation ------------------------ */
.pack-overlay {
  position: fixed; inset: 0; z-index: 120; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 45%, rgba(10, 14, 28, .93), rgba(3, 5, 10, .98));
  backdrop-filter: blur(8px); padding: 20px;
  /* A landscape phone is 390px tall: the card plus its button overflow the
   * overlay, and a grid that centres its content lets the button fall off
   * the bottom edge with no way to reach it. Scroll instead. */
  overflow-y: auto; -webkit-overflow-scrolling: touch; place-items: start center;
}
.pack-overlay > * { margin: auto 0; }
.pack-overlay[hidden] { display: none; }
.pack-stage { position: relative; display: grid; place-items: center; gap: 18px; width: min(340px, 92vw); }
.pack-burst {
  position: absolute; width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle, var(--rar-glow) 0%, transparent 68%);
  animation: burst 1.6s ease-out infinite;
}
@keyframes burst { 0% { transform: scale(.6); opacity: .85; } 100% { transform: scale(1.5); opacity: 0; } }
.pack-rays {
  position: absolute; width: 520px; height: 520px; opacity: .28; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, var(--rar) 0deg 5deg, transparent 5deg 16deg);
  mask-image: radial-gradient(circle, #000 12%, transparent 62%);
  animation: spin 14s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.pack-overlay[data-rarity="bronze"] .pack-rays,
.pack-overlay[data-rarity="silver"] .pack-rays { display: none; }
.reduce-motion .pack-rays, .reduce-motion .pack-burst { animation: none; }

.walkout { position: relative; z-index: 2; width: min(280px, 84vw); }
.walkout-card { animation: walkoutIn .7s cubic-bezier(.2, 1.1, .3, 1) both; }
.reveal-gold { animation: walkoutIn .8s cubic-bezier(.2, 1.2, .3, 1) both, glowPulse 2s ease-in-out infinite .8s; }
.reveal-special { animation: walkoutSpecial 1.05s cubic-bezier(.18, 1.25, .3, 1) both, glowPulse 1.5s ease-in-out infinite 1s; }
@keyframes walkoutIn {
  0% { opacity: 0; transform: translateY(46px) scale(.72) rotateX(35deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes walkoutSpecial {
  0% { opacity: 0; transform: translateY(70px) scale(.5) rotateY(180deg); }
  55% { opacity: 1; transform: translateY(-10px) scale(1.09) rotateY(0deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes glowPulse {
  0%, 100% { filter: drop-shadow(0 0 8px var(--rar-glow)); }
  50% { filter: drop-shadow(0 0 26px var(--rar-glow)); }
}
.reduce-motion .walkout-card { animation: none !important; }
.pack-overlay.flash::before {
  content: ''; position: absolute; inset: 0; background: var(--rar); opacity: 0;
  animation: flash .5s ease-out; pointer-events: none;
}
@keyframes flash { 0% { opacity: .5; } 100% { opacity: 0; } }
.pack-foot { position: relative; z-index: 3; display: flex; align-items: center; gap: 14px; }
.pack-foot span { font-family: var(--font-num); font-size: 13px; color: var(--text-dim); }

/* --------------------------- Detail overlay ---------------------- */
.detail-overlay {
  position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; padding: 20px;
  background: rgba(3, 5, 12, .84); backdrop-filter: blur(10px);
  animation: fade .2s ease both;
}
.detail-overlay[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.detail-card {
  position: relative; width: min(430px, 94vw); max-height: 88vh; overflow-y: auto; padding: 20px;
  border-color: color-mix(in srgb, var(--rar) 45%, transparent);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .7), 0 0 40px var(--rar-glow);
  animation: popIn .28s cubic-bezier(.2, 1.1, .3, 1) both;
}
@keyframes popIn { from { opacity: 0; transform: scale(.9) translateY(16px); } to { opacity: 1; transform: none; } }
.close-x {
  position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--panel); color: var(--text-dim);
  font-size: 18px; cursor: pointer; display: grid; place-items: center; padding: 0; z-index: 2;
}
.close-x:hover { background: var(--bad); color: #fff; }
.detail-top { display: flex; gap: 16px; align-items: flex-start; padding-right: 34px; }
.detail-id { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.detail-ovr { font-family: var(--font-num); font-size: 52px; font-weight: 800; line-height: .9; color: var(--rar); }
.detail-pos { font-size: 11px; font-weight: 800; letter-spacing: .12em; color: var(--text-dim); }
.detail-name h3 { margin: 4px 0 8px; font-size: 21px; letter-spacing: -.01em; }
.detail-name p {
  margin: 0 0 5px; font-size: 12.5px; color: var(--text-dim);
  display: flex; align-items: center; gap: 7px;
}
.detail-body { display: flex; gap: 14px; align-items: center; margin-top: 16px; flex-wrap: wrap; justify-content: center; }
.detail-stats { flex: 1 1 170px; display: flex; flex-direction: column; gap: 8px; min-width: 160px; }
.dstat { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; }
.dstat span { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); }
.dstat b { font-family: var(--font-num); font-size: 15px; }
.dstat i { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.dstat i b { display: block; height: 100%; background: var(--rar); border-radius: 2px; }

/* ---------------------------- Quick match ------------------------ */
.vs-strip {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px;
  padding: 20px 18px; margin-bottom: 16px;
}
.vs-side { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; min-width: 0; }
.vs-label { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-mute); }
.vs-name { font-size: 16px; }
.vs-rating { font-family: var(--font-num); font-size: 13px; color: var(--accent); font-weight: 700; }
.vs-star { font-size: 11px; color: var(--text-dim); }
.vs-mark { font-family: var(--font-num); font-size: 26px; font-weight: 800; color: var(--text-mute); }
.picker-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 760px) { .picker-cols { grid-template-columns: 1fr; } }
.club-list { display: flex; flex-direction: column; gap: 6px; max-height: 380px; overflow-y: auto; }
.club-row {
  display: flex; align-items: center; gap: 10px; cursor: pointer; text-align: left; width: 100%;
  padding: 8px 12px; border-radius: 11px; font: inherit; color: var(--text);
  border: 1px solid transparent; background: rgba(255, 255, 255, .035);
  transition: background .16s, border-color .16s, transform .16s;
}
.club-row:hover { background: var(--panel-hi); transform: translateX(3px); }
.club-row.on { border-color: var(--team); background: color-mix(in srgb, var(--team) 16%, transparent); }
.cr-name { flex: 1; font-size: 13.5px; font-weight: 600; }
.cr-rating { font-family: var(--font-num); font-weight: 700; font-size: 15px; color: var(--accent); }
.kick-row { display: flex; gap: 10px; justify-content: center; margin-top: 6px; }

/* ------------------------------ Career --------------------------- */
.pick-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.pick-card {
  position: relative; overflow: hidden; cursor: pointer; text-align: center; font: inherit; color: var(--text);
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 16px;
  transition: transform .24s, border-color .24s, box-shadow .24s;
}
.pick-card::before {
  content: ''; position: absolute; inset: auto -20% -60% -20%; height: 170px;
  background: radial-gradient(closest-side, var(--team), transparent 72%); opacity: .25; transition: opacity .3s;
}
.pick-card:hover { transform: translateY(-5px); border-color: var(--team); box-shadow: 0 22px 46px rgba(0, 0, 0, .5); }
.pick-card:hover::before { opacity: .45; }
.pick-crest { line-height: 0; }
.pick-name { font-size: 16px; }
.pick-meta { display: flex; gap: 14px; position: relative; }
.pick-meta span { display: flex; flex-direction: column; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-mute); }
.pick-meta i { font-family: var(--font-num); font-style: normal; font-size: 16px; font-weight: 700; color: var(--text); letter-spacing: 0; }
.pick-cta { position: relative; margin-top: 4px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--team); }

.career-head {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; margin-bottom: 14px; flex-wrap: wrap;
}
.career-head::before {
  content: ''; position: absolute; inset: -60% 40% auto -20%; height: 220px;
  background: radial-gradient(closest-side, var(--team), transparent 70%); opacity: .3;
}
.ch-crest { position: relative; line-height: 0; }
.ch-id { position: relative; display: flex; flex-direction: column; }
.ch-id b { font-family: var(--font-num); font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
.ch-id span { font-size: 11.5px; color: var(--text-dim); }
.ch-stats { position: relative; display: flex; gap: 18px; margin-left: auto; flex-wrap: wrap; }
.ch-stats b { display: block; font-family: var(--font-num); font-size: 22px; font-weight: 700; line-height: 1; }
.ch-stats b small { font-size: 12px; color: var(--text-mute); }
.ch-stats span { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); }

/* The dock.
 *
 * The mode's navigation is a bar along the bottom edge — icon over label, the
 * shape every mobile football game trains thumbs on. Same DOM, same handlers;
 * only this stylesheet knows the pills moved. The accent line across its top
 * is the cover's diagonal carried down: a two-stop gradient rather than a
 * flat rule, so even the furniture keeps the APEX signature. */
.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; justify-content: center; gap: 2px;
  padding: 7px 10px calc(9px + env(safe-area-inset-bottom, 0px));
  background: rgba(4, 6, 13, .96);
  border-top: 1px solid var(--line-strong);
}
.tabs::before {
  content: ''; position: absolute; left: 0; right: 0; top: -2px; height: 2px;
  background: linear-gradient(100deg, transparent 8%, var(--accent-deep) 38%, var(--accent) 62%, transparent 92%);
}
.tab {
  position: relative; flex: 1; max-width: 150px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 4px 5px; border: 0; border-radius: 10px; background: none;
  font: inherit; font-size: 10px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-mute); transition: color .15s;
}
.tab svg { opacity: .85; }
.tab:hover { color: var(--text); }
.tab.on { color: var(--accent); }
.tab.on svg { opacity: 1; }
.tab.on::after {
  content: ''; position: absolute; left: 25%; right: 25%; bottom: 0; height: 2px;
  border-radius: 2px; background: var(--accent);
}
/* the locker count rides the Store icon's shoulder */
.tab .tab-dot { position: absolute; top: 0; right: calc(50% - 22px); margin: 0; }
/* the dock floats over the page, so the page needs floor space under it */
.screen:has(#uTabs) { padding-bottom: 132px; }

/* The Club tab's second row.
   Deliberately a different shape from the pills above it — condensed caps on a
   rule, with the accent underlining the open one — so two navigations stacked
   together read as a hierarchy rather than as one long run of buttons. */
.subtabs {
  display: flex; gap: 2px; margin: -4px 0 16px;
  border-bottom: 1px solid var(--line); overflow-x: auto;
}
.subtab {
  position: relative; font: inherit; cursor: pointer; white-space: nowrap;
  padding: 10px 18px 11px; background: none; border: 0;
  font-family: var(--font-num); font-size: 12.5px; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; color: var(--text-mute);
  transition: color .16s;
}
.subtab::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px;
  border-radius: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: 50% 50%; transition: transform .2s cubic-bezier(.2,.9,.3,1);
}
.subtab:hover { color: var(--text); }
.subtab.on { color: var(--accent); }
.subtab.on::after { transform: scaleX(1); }
.reduce-motion .subtab::after { transition: none; }

.next-match .nm-fixture {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin: 8px 0 18px;
}
.nm-team { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.nm-team b { font-size: 14px; }
.nm-team span { font-family: var(--font-num); font-size: 12px; color: var(--accent); }
.nm-vs { font-family: var(--font-num); font-size: 20px; font-weight: 800; color: var(--text-mute); }
.nm-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.fixture-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.fixture-list li {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, .03); font-size: 12.5px;
}
.fixture-list.results li { grid-template-columns: auto 1fr auto 1fr; }
.fixture-list li.mine { background: var(--accent-soft); }
.fx-team { display: flex; align-items: center; gap: 7px; min-width: 0; }
.fx-team.right { justify-content: flex-end; }
.fx-team span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-v, .fx-md { color: var(--text-mute); font-size: 11px; }
.fx-score { font-family: var(--font-num); font-weight: 700; font-size: 15px; }

.table-scroll { overflow-x: auto; }
.league-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 560px; }
.league-table th {
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute);
  font-weight: 700; padding: 8px 6px; text-align: center; border-bottom: 1px solid var(--line);
}
.league-table td { padding: 9px 6px; text-align: center; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.league-table .pos { font-family: var(--font-num); color: var(--text-mute); font-weight: 700; }
.league-table .pts { font-family: var(--font-num); font-weight: 800; font-size: 15px; }
.club-cell { display: flex; align-items: center; gap: 9px; }
.club-cell span { white-space: nowrap; }
.league-table tr.is-me { background: var(--accent-soft); }
.league-table tr.is-me .pos { color: var(--accent); }
.league-table tr.is-top td:first-child { box-shadow: inset 3px 0 0 var(--good); }
.league-table tr.is-drop td:first-child { box-shadow: inset 3px 0 0 var(--bad); }

.season-end h2 { font-family: var(--font-num); font-size: 26px; margin: 0 0 6px; }
.season-line { color: var(--text-dim); margin: 0 0 16px; line-height: 1.6; }
.season-end .panel { padding: 0; margin: 0 0 16px; background: none; border: 0; box-shadow: none; backdrop-filter: none; }
.career-foot { display: flex; justify-content: center; margin-top: 6px; }

/* ------------------------------ Match ---------------------------- */
.match-shell { position: relative; }
.scoreboard {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  padding: 18px 16px; margin-bottom: 12px;
}
.sb-team { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; min-width: 0; }
.sb-team b { font-size: 13.5px; }
.sb-score { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sb-nums { display: flex; align-items: baseline; gap: 8px; font-family: var(--font-num); font-weight: 800; }
.sb-nums i { font-style: normal; font-size: 44px; line-height: 1; }
.sb-nums em { font-style: normal; font-size: 26px; color: var(--text-mute); }
.sb-clock {
  font-family: var(--font-num); font-size: 13px; color: var(--accent);
  padding: 2px 10px; border-radius: 999px; background: var(--accent-soft);
}
.match-bars { padding: 14px 16px; margin-bottom: 12px; }
.bar-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.bar-row span { font-family: var(--font-num); font-size: 13px; font-weight: 700; }
.poss-bar { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.poss-bar b { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 40%, #7b5cff)); transition: width .5s; }
.bar-legend { text-align: center; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-mute); margin-top: 5px; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 6px 16px; margin-top: 12px; }
.stat-grid > div { display: grid; grid-template-columns: 26px 1fr 26px; align-items: center; gap: 6px; }
.stat-grid b { font-family: var(--font-num); font-size: 15px; font-weight: 700; text-align: center; }
.stat-grid span { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-mute); text-align: center; }

.commentary { padding: 6px; height: 340px; overflow-y: auto; margin-bottom: 14px; scroll-behavior: smooth; }
.feed-inner { display: flex; flex-direction: column; gap: 3px; }
.fline {
  display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: baseline;
  padding: 8px 10px; border-radius: 9px; font-size: 13px; line-height: 1.45;
  animation: lineIn .3s ease both;
}
@keyframes lineIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.reduce-motion .fline { animation: none; }
.fmin { font-family: var(--font-num); font-size: 12px; color: var(--text-mute); font-weight: 700; }
.ftext { color: var(--text-dim); }
.f-goal { background: linear-gradient(90deg, var(--accent-soft), transparent); }
.f-goal .ftext { color: var(--text); font-weight: 650; }
.fscore { font-family: var(--font-num); font-weight: 800; color: var(--accent); }
.f-save .ftext { color: #c7d2e6; }
.f-half, .f-full, .f-kickoff { background: rgba(255, 255, 255, .05); }
.f-half .ftext, .f-full .ftext, .f-kickoff .ftext {
  font-weight: 700; color: var(--text); letter-spacing: .04em; text-transform: uppercase; font-size: 11.5px;
}
.match-controls { display: flex; gap: 10px; justify-content: center; }

.goal-flash {
  position: fixed; inset: 0; z-index: 90; display: grid; place-content: center; text-align: center;
  pointer-events: none; animation: goalFlash 1.5s ease-out both;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--team) 34%, transparent), transparent 62%);
}
.goal-flash span {
  font-family: var(--font-num); font-size: clamp(52px, 16vw, 120px); font-weight: 800;
  letter-spacing: -.03em; color: #fff; text-shadow: 0 0 40px var(--team);
}
.goal-flash small { display: block; font-size: 15px; letter-spacing: .3em; text-transform: uppercase; color: var(--team); }
@keyframes goalFlash {
  0% { opacity: 0; transform: scale(.6); }
  18% { opacity: 1; transform: scale(1.05); }
  70% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.15); }
}
.reduce-motion .goal-flash { display: none; }

.result-overlay {
  position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: 18px;
  background: rgba(3, 5, 12, .88); backdrop-filter: blur(12px); overflow-y: auto;
  animation: fade .25s ease both;
}
.result-overlay[hidden] { display: none; }
.result-card {
  width: min(430px, 94vw); padding: 22px; text-align: center;
  animation: popIn .4s cubic-bezier(.2, 1.1, .3, 1) both;
  max-height: 92vh; overflow-y: auto;
}
.result-kicker { font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--text-mute); }
.result-score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin: 12px 0 4px; }
.result-score div { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.result-score b { font-family: var(--font-num); font-size: 13px; color: var(--text-dim); }
.rs-nums { font-family: var(--font-num); font-size: 42px; font-weight: 800; letter-spacing: -.02em; }
.result-verdict { margin: 4px 0 16px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.motm { margin-bottom: 16px; }
.motm-label { display: block; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--warn); margin-bottom: 8px; }
.motm .pcard { max-width: 220px; margin: 0 auto; text-align: left; }
.motm-line { margin-top: 8px; font-size: 12px; color: var(--text-dim); }
.motm-line b { font-family: var(--font-num); font-size: 15px; color: var(--good); }
.result-stats { display: flex; flex-direction: column; gap: 5px; margin-bottom: 18px; }
.result-stats > div { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; padding: 6px 4px; border-radius: 8px; background: rgba(255, 255, 255, .035); }
.result-stats b { font-family: var(--font-num); font-size: 14px; }
.result-stats span { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); }

/* ---------------------------- Title screen ----------------------- */
body.on-splash .topbar { display: none; }
body.on-splash { overflow: hidden; }
body.on-splash #screen { max-width: none; padding: 0; animation: none; transform: none; }

.splash { position: fixed; inset: 0; z-index: 45; overflow: hidden; background: #05070e; }
#splashBg { position: absolute; inset: 0; display: block; }
.splash-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 62% 42%, transparent 30%, rgba(2, 4, 10, .82) 100%);
}

.swoosh { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.swoosh path { fill: none; stroke-linecap: square; }
.swoosh-a {
  stroke: var(--accent); stroke-width: 15;
  stroke-dasharray: 2200; stroke-dashoffset: 2200;
  animation: swoosh 1.5s cubic-bezier(.2, .8, .25, 1) .25s forwards;
  filter: drop-shadow(0 0 22px color-mix(in srgb, var(--accent) 50%, transparent));
}
.swoosh-b {
  stroke: color-mix(in srgb, var(--accent) 32%, transparent); stroke-width: 5;
  stroke-dasharray: 2200; stroke-dashoffset: 2200;
  animation: swoosh 1.7s cubic-bezier(.2, .8, .25, 1) .42s forwards;
}
@keyframes swoosh { to { stroke-dashoffset: 0; } }

.splash-body {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: 6px; padding: 6vh clamp(24px, 7vw, 110px);
  max-width: 1400px; margin: 0 auto;
}
.mark { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; opacity: 0; animation: riseIn .8s ease .1s forwards; }
.mark svg { width: 66px; height: 66px; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .55)); }
.mark-disc { fill: #0b1220; }
.mark-ring { fill: none; stroke: url(#markG); stroke-width: 5; }
/* an accent behind the letter, not a wedge in front of it */
.mark-sweep { fill: none; stroke: #23c55e; stroke-width: 7; opacity: .32; }
.mark-a {
  fill: none; stroke: #f6f9ff; stroke-width: 11;
  stroke-linecap: square; stroke-linejoin: miter;
}
.mark-bar { fill: none; stroke: #f6f9ff; stroke-width: 9; stroke-linecap: butt; }

/* Type set as a lockup rather than two stacked strings: the name in the display
   italic the rest of the cover uses, the descriptor small and wide beneath a
   hairline rule. */
.mark-type { display: flex; flex-direction: column; gap: 3px; }
.mark-apex {
  font-family: var(--font-num); font-style: italic; font-weight: 800;
  font-size: 22px; line-height: 1; letter-spacing: -.02em; color: #f4f7fb;
}
.mark-sports {
  font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .42em;
  /* part of the logo lockup, so it holds the brand green whatever the accent */
  color: #7fe3a8; padding-top: 4px;
  border-top: 1px solid rgba(63, 240, 138, .35);
}

.splash-title {
  margin: 0; display: flex; align-items: baseline; gap: .06em;
  font-family: var(--font-num); font-weight: 800; font-style: italic;
  font-size: clamp(74px, 17vw, 210px); line-height: .82; letter-spacing: -.045em;
  opacity: 0; animation: riseIn .9s cubic-bezier(.2, .9, .3, 1) .28s forwards;
}
.splash-title .t1 { color: #f6f9ff; }
.splash-title .t2 {
  background: linear-gradient(180deg, var(--accent), var(--accent-deep, var(--accent)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  /* v96: the italic I leans out past its box, and a text-clipped background
     only paints inside the box, so the top of the I was cut off. Pad the box
     to cover the lean and take the same space back. */
  padding-right: .16em; margin-right: -.16em;
}
.splash-tag {
  margin: 10px 0 0; font-size: 12.5px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--text-dim); opacity: 0; animation: riseIn .8s ease .5s forwards;
}
.start-btn {
  margin-top: 30px; padding: 16px 62px; cursor: pointer; position: relative;
  font-family: var(--font-num); font-size: 20px; font-weight: 800; letter-spacing: .3em;
  color: #04121a; border: 0; border-radius: 999px;
  background: linear-gradient(120deg, var(--accent), var(--accent-deep, var(--accent)) 55%, var(--accent));
  box-shadow: 0 14px 44px color-mix(in srgb, var(--accent) 40%, transparent);
  opacity: 0; animation: riseIn .7s ease .68s forwards, pulseBtn 2.6s ease-in-out 1.6s infinite;
  transition: transform .18s, box-shadow .18s;
}
.start-btn:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 18px 54px color-mix(in srgb, var(--accent) 58%, transparent); }
.start-btn:active { transform: translateY(0) scale(.99); }
@keyframes pulseBtn {
  0%, 100% { box-shadow: 0 14px 44px color-mix(in srgb, var(--accent) 35%, transparent); }
  50% { box-shadow: 0 14px 56px color-mix(in srgb, var(--accent) 60%, transparent); }
}
.splash-note {
  margin: 22px 0 0; font-size: 10.5px; letter-spacing: .1em; color: var(--text-mute);
  opacity: 0; animation: riseIn .8s ease .9s forwards;
}
@keyframes riseIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* ------------------------------ the updater ----------------------------- *
 * Sits where the START button was, on the title screen's own plate, so it
 * reads as part of the cover rather than an error that happened to it.       */
.updater {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 10px; margin-top: 26px;
  /* an explicit width, not just a max: a flex column shrinks to its widest
     child, which left the progress bar about half the length it should be */
  width: min(420px, 100%);
  opacity: 0; animation: riseIn .5s ease forwards;
}
.up-kicker {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(255, 183, 3, .14); border: 1px solid rgba(255, 183, 3, .45);
  color: #ffc63d;
  font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
}
.up-kicker::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: #ffc63d; box-shadow: 0 0 8px #ffc63d;
  animation: upBlink 1.6s ease-in-out infinite;
}
@keyframes upBlink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.up-copy {
  margin: 0; max-width: 38ch;
  font-size: 13px; line-height: 1.5; color: var(--text-dim);
}
/* the update button starts immediately rather than waiting out the cover's
   staggered entrance — it is the only thing on screen that can be pressed */
.up-start { margin-top: 4px; animation: riseIn .5s ease .05s forwards, pulseBtn 2.6s ease-in-out 1s infinite; }

.up-progress { width: 100%; display: flex; flex-direction: column; gap: 7px; margin-top: 6px; }
.up-track {
  position: relative; height: 8px; border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5);
}
.up-track i {
  /* positioned, so the sheen below is clipped to the filled part — without it
     the sheen anchors to the track and lights up the empty section too */
  position: relative; overflow: hidden;
  display: block; height: 100%; width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-deep, var(--accent)) 60%, var(--accent));
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 70%, transparent);
  transition: width .22s ease-out;
}
/* a sheen travelling along the filled part, so it reads as working even while
   a stage is easing towards its ceiling */
.up-track i::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .55) 50%, transparent 80%);
  background-size: 220px 100%;
  animation: upSheen 1.15s linear infinite;
}
@keyframes upSheen { from { background-position: -220px 0; } to { background-position: 220px 0; } }
.reduce-motion .up-track i::after,
.reduce-motion .up-kicker::before { animation: none; }

.up-row { display: flex; justify-content: space-between; align-items: baseline; }
.up-stage { font-size: 11px; letter-spacing: .08em; color: var(--text-dim); }
.up-pct {
  font-family: var(--font-num); font-size: 13px; font-weight: 800; color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.reduce-motion .swoosh path { animation-duration: .01s; }
.reduce-motion .splash-body * { animation-delay: 0s !important; animation-duration: .01s !important; }

@media (max-width: 640px) {
  .splash-body { padding: 5vh 22px; align-items: center; text-align: center; }
  .start-btn { padding: 15px 48px; font-size: 18px; }
}

/* --------------------------- Playable match ---------------------- */
/* The match takes over the viewport — the app chrome steps out of the way. */
body.in-game .topbar, body.in-drill .topbar { display: none; }
body.in-game { overflow: hidden; }
/* the screen-entry animation leaves a transform behind, which would make #screen
   a containing block and trap the fixed-position match shell inside it */
body.in-game #screen {
  max-width: none; padding: 0; animation: none; transform: none;
}

.gm {
  position: fixed; inset: 0; z-index: 50; overflow: hidden;
  background: #05070e; touch-action: none;
}
.gm:fullscreen { width: 100vw; height: 100vh; }
#gmCanvas { display: block; width: 100%; height: 100%; }

/* ------------------------- Loading screen -------------------------
   Over everything, including the touch pad, until the match is genuinely worth
   looking at. z-index sits above the HUD and the pause overlay both. */
.gm-load {
  position: absolute; inset: 0; z-index: 20;
  display: grid; place-items: center; padding: 24px;
  background:
    radial-gradient(900px 520px at 50% 0%, rgba(35, 197, 94, .1), transparent 62%),
    linear-gradient(180deg, #070d18 0%, #04070e 100%);
  transition: opacity .4s ease;
}
.gm-load[hidden] { display: none; }
.gm-load.done { opacity: 0; pointer-events: none; }
.gl-inner { width: min(560px, 100%); display: flex; flex-direction: column; align-items: center; gap: 22px; }
.gl-teams { display: flex; align-items: center; gap: clamp(18px, 6vw, 46px); }
.gl-team {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--font-num); font-size: 15px; font-weight: 800; letter-spacing: .12em;
}
.gl-vs {
  font-family: var(--font-num); font-style: italic; font-weight: 800;
  font-size: clamp(26px, 6vw, 40px); letter-spacing: -.03em; color: var(--accent);
}
.gl-bar {
  width: 100%; height: 6px; border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, .09);
}
.gl-bar i {
  display: block; height: 100%; width: 0%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-deep, var(--accent)), var(--accent));
  transition: width .28s ease;
}
.gl-status {
  margin: 0; min-height: 1.3em;
  font-family: var(--font-num); font-size: 12.5px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--text-dim);
}
.gl-status::after {
  content: '…'; margin-left: 2px;
}

.gm-hud {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 12px 14px; pointer-events: none; gap: 12px;
}
/* No `backdrop-filter` on anything sitting over the match canvas — see the
 * black-flicker note in HANDOFF.
 *
 * A backdrop-filter forces the compositor to copy the pixels *behind* the
 * element into its own layer, blur them, and composite the result. When what is
 * behind it is a WebGL canvas being rewritten sixty times a second, iOS has to
 * sample a surface the GPU is still writing, every frame, and when that sample
 * comes back before the canvas has resolved, the element composites over
 * nothing — a black rectangle with tile-aligned edges, which is exactly the
 * artefact being reported.
 *
 * It costs nothing to drop: these backgrounds were already 82-86% opaque, so
 * the blur behind them was barely visible. The few points of extra opacity
 * below buy back the contrast and the compositing path goes away entirely.
 *
 * Menus and cards outside a match keep their blur — there is no live canvas
 * under those, so none of this applies. */
.gm-bug {
  display: flex; align-items: stretch; pointer-events: auto;
  border-radius: 8px; overflow: hidden; font-family: var(--font-num);
  background: rgba(8, 12, 24, .94);
  border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 8px 26px rgba(0, 0, 0, .5);
}
.bug-team {
  display: flex; align-items: center; gap: 6px; padding: 6px 10px;
  font-size: 13px; font-weight: 700; letter-spacing: .04em;
  box-shadow: inset 0 -3px 0 var(--team);
}
.bug-score {
  display: grid; place-items: center; min-width: 30px; padding: 6px 4px;
  font-size: 18px; font-weight: 800; background: rgba(255, 255, 255, .07);
}
.bug-score + .bug-score { border-left: 1px solid rgba(255, 255, 255, .14); }
.bug-clock {
  display: grid; place-items: center; padding: 6px 11px; font-size: 12px; font-weight: 700;
  color: #04121a; background: var(--accent);
}
.gm-tools { display: flex; align-items: center; gap: 8px; pointer-events: auto; }
/* Lives in the match HUD, over the canvas — no blur, per the note above. */
.icon-btn.sm {
  width: 32px; height: 32px; flex: 0 0 32px; font-size: 14px; padding: 0;
  background: rgba(8, 12, 24, .94);
}
.icon-btn.sm:hover { transform: none; }
.gm-pad {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--text-mute); background: rgba(8, 12, 24, .8);
}
.gm-pad.on { color: var(--good); border-color: rgba(61, 220, 151, .45); }

/* ---------------------------- Touch controls ---------------------------- *
 * A stick that appears under the thumb rather than waiting in a corner, and
 * buttons big enough to hit at a sprint. Sizes are deliberately generous: the
 * old 46px circles were under the 44px minimum once a thumb covered them.
 *
 * Below the base size, `(pointer: coarse)` is the tier that actually matters —
 * it is the one query guaranteed to be true on every touch device and false on
 * every mouse — and a second, taller tier goes further still on an iPad.
 *
 * The size step used to be a `(max-width: 640px)` rule aimed at "short landscape
 * phones". Width is the wrong axis for that: this screen only ever plays in
 * landscape, where width is a phone's *long* edge — an iPhone in landscape is
 * upwards of 660px wide, so the rule that was supposed to shrink the buttons
 * for phones essentially never fired on one, and iPads never got anything
 * bigger than the plain default. `(max-height: …)` is what "short" actually
 * means once the device is sideways, and that is the query below.            */
.gm-touch { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
/* v122: the pause menu and full time sit over the pitch with the pad hidden —
   the buttons were drawn across the menu's own options */
:has(> .gm-overlay:not([hidden])) > .gm-touch,
.gm-paused .gm-touch, .gm-paused #gmHints { visibility: hidden; }
.gm-touch[hidden] { display: none; }

.tstick-zone {
  position: absolute; left: 0; top: 52px; bottom: 0; width: 46%;
  pointer-events: auto; touch-action: none;
}
.tstick {
  position: fixed; width: 148px; height: 148px; margin: -74px 0 0 -74px;
  display: grid; place-items: center; pointer-events: none;
}
.tstick .ts-base {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .13), rgba(255, 255, 255, .05) 70%);
  border: 2px solid rgba(255, 255, 255, .35);
}
.tstick i {
  position: relative; width: 62px; height: 62px; border-radius: 50%;
  background: rgba(255, 255, 255, .82); box-shadow: 0 4px 14px rgba(0, 0, 0, .5);
}

.tpad {
  position: absolute; right: 0; bottom: 0; pointer-events: none;
  padding: 12px max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) 12px;
  display: grid; gap: 10px; align-items: end; justify-items: center;
  grid-template-columns: repeat(4, auto);
  grid-template-areas: 'skill .     through shoot'
                       'lob   cross pass    sprint';
}
.tbtn {
  pointer-events: auto; touch-action: none; -webkit-tap-highlight-color: transparent;
  position: relative; width: 74px; height: 74px; border-radius: 50%; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  background: radial-gradient(circle at 50% 35%, rgba(28, 40, 34, .82), rgba(6, 12, 10, .88));
  border: 3px solid var(--tb, #9fb0c4);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .45), inset 0 0 14px rgba(0, 0, 0, .5);
  transition: transform .08s, box-shadow .08s;
}
.tbtn b {
  font-size: 11.5px; font-weight: 800; letter-spacing: .04em; color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .9); line-height: 1;
}
.tbtn.is-down { transform: scale(.93); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tb) 35%, transparent); }
.t-pass { --tb: #3ea8ff; grid-area: pass; }
.t-through { --tb: #ffc02e; grid-area: through; }
.t-cross { --tb: #ff8b3d; grid-area: cross; }
.t-shoot { --tb: #ff4d4d; grid-area: shoot; }
.t-sprint { --tb: #34e06a; grid-area: sprint; width: 96px; height: 96px; }
.t-sprint b { font-size: 13px; }

/* Every touch device, phone or tablet: bigger again than the base above. */
@media (pointer: coarse) {
  .tpad { gap: 14px; }
  .tbtn { width: 84px; height: 84px; }
  .tbtn b { font-size: 12.5px; }
  .t-sprint { width: 106px; height: 106px; }
  .t-sprint b { font-size: 14px; }
}

/* iPad-class landscape: a lot of screen and nothing else fighting for the
   corner, so the buttons get to be genuinely big rather than merely adequate. */
@media (pointer: coarse) and (min-height: 620px) {
  .tpad { gap: 20px; padding: 22px max(22px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) 22px; }
  .tbtn { width: 100px; height: 100px; border-width: 4px; }
  .tbtn b { font-size: 14.5px; }
  .t-sprint { width: 124px; height: 124px; }
  .t-sprint b { font-size: 16px; }
}

/* Short landscape phones — every iPhone in this game's own orientation lands
   here. Pulled in from the coarse-pointer tier above to actually fit, but
   still ahead of where this game started. */
@media (pointer: coarse) and (max-height: 440px) {
  .tpad { gap: 9px; }
  .tbtn { width: 72px; height: 72px; }
  .tbtn b { font-size: 11px; }
  .t-sprint { width: 90px; height: 90px; }
  .t-sprint b { font-size: 12.5px; }
  .tstick { width: 132px; height: 132px; margin: -66px 0 0 -66px; }
  .tstick i { width: 56px; height: 56px; }
}
/* how much power is on the shot, drawn round the rim while it is held */
.tb-charge {
  position: absolute; inset: -3px; border-radius: 50%;
  background: conic-gradient(#fff calc(var(--charge, 0%)), transparent 0);
  mask: radial-gradient(circle, transparent 60%, #000 62%);
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 62%);
  opacity: .9; pointer-events: none;
}

/* --------------------------- Team select ------------------------- */
.teamsel {
  display: grid; grid-template-columns: 1fr minmax(230px, 290px) 1fr;
  grid-template-rows: 1fr auto; gap: 18px;
  /* centred, not pinned to the top: the old layout left the bottom two thirds
     of a tablet screen empty */
  align-items: start;      /* the sides start level; an International rail of 67 flags used to push its card up */
  min-height: calc(100dvh - 130px);
}
.ts-side { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ts-label {
  font-family: var(--font-num); font-size: clamp(20px, 3vw, 34px); font-weight: 800;
  letter-spacing: .3em; color: rgba(255, 255, 255, .16);
}
.ts-seat {
  font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); padding: 4px 12px; border-radius: 999px;
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.ts-card {
  position: relative; overflow: hidden; width: 100%; max-width: 330px;
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 16px 14px;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: linear-gradient(165deg, color-mix(in srgb, var(--team) 20%, transparent), rgba(10, 14, 24, .9));
  box-shadow: var(--shadow);
}
.ts-card::before {
  content: ''; position: absolute; inset: auto -30% -55% -30%; height: 190px;
  background: radial-gradient(closest-side, var(--team), transparent 72%); opacity: .28;
}
.ts-head { position: relative; text-align: center; }
.ts-name { font-size: 17px; font-weight: 700; }
.ts-meta { margin-top: 2px; font-size: 10.5px; color: var(--text-mute); }
.ts-crest-row { position: relative; display: flex; align-items: center; gap: 8px; }
.ts-crest { line-height: 0; }
.ts-arrow {
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 13px;
  border: 1px solid var(--line-strong); background: rgba(255, 255, 255, .06); color: var(--text);
  transition: background .16s, transform .16s;
}
.ts-arrow:hover { background: var(--accent); color: #04121a; transform: scale(1.08); }
.ts-stars { position: relative; letter-spacing: .18em; color: #ffd166; font-size: 15px; }
.ts-stats { position: relative; display: flex; gap: 18px; align-items: flex-end; }
.ts-stats .ovr { padding-left: 16px; margin-left: 2px; border-left: 1px solid rgba(255,255,255,.12); }
.ts-stats .ovr b { color: var(--accent); }
.ts-stats div { display: flex; flex-direction: column; align-items: center; }
.ts-stats span { font-size: 9.5px; letter-spacing: .14em; color: var(--text-mute); }
.ts-stats b { font-family: var(--font-num); font-size: 22px; font-weight: 800; }
/* the one player anyone would have heard of */
.ts-star {
  position: relative; display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 7px 10px; border-radius: 10px;
  background: rgba(255,255,255,.06); border: 1px solid var(--line);
}
.tss-kicker {
  font-size: 8.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-mute);
}
.ts-star b { flex: 1; font-size: 12.5px; font-weight: 700; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.tss-pos { font-size: 9.5px; letter-spacing: .08em; color: var(--text-dim); }
.tss-ovr {
  font-family: var(--font-num); font-size: 14px; font-weight: 800; color: #ffd166;
}

.ts-kit {
  position: relative; display: flex; align-items: center; gap: 6px;
  width: 100%; margin-top: 2px; padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-family: var(--font-num); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-dim);
}
.ts-kit i { width: 11px; height: 11px; border-radius: 3px; border: 1px solid rgba(255,255,255,.25); }
.ts-kit span { margin-left: auto; }

/* --------- pick any club directly, rather than nine taps of an arrow -------- */
.ts-rail {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
  /* five and five: ten badges on one line are too small to hit, and 7+3 looks
     like an accident */
  max-width: 272px; margin-top: 2px;
}
.ts-chip {
  display: grid; place-items: center; padding: 3px; cursor: pointer; line-height: 0;
  border-radius: 10px; border: 1px solid transparent; background: rgba(255,255,255,.04);
  transition: background .14s, border-color .14s, transform .14s, opacity .14s;
}
.ts-chip:hover:not(:disabled) { background: rgba(255,255,255,.11); transform: translateY(-2px); }
.ts-chip.on { border-color: var(--team); background: color-mix(in srgb, var(--team) 26%, transparent); }
.ts-chip:disabled { opacity: .22; cursor: default; }

/* ------------------------------ head to head ------------------------------ */
.ts-h2h { display: flex; flex-direction: column; gap: 7px; }
.h2h-row { display: flex; align-items: center; gap: 7px; }
.h2h-row b {
  min-width: 22px; font-family: var(--font-num); font-size: 13px; font-weight: 800;
  color: var(--text-dim); text-align: center;
}
.h2h-row b.win { color: #fff; }
.h2h-bar { flex: 1; height: 5px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden;
  display: flex; }
/* each side's bar carries that club's colour, so which half is whose needs no
   explaining */
.h2h-bar i { display: block; height: 100%; border-radius: 3px; }
.h2h-bar.left i { background: var(--hc, var(--accent)); }
.h2h-bar.right i { background: var(--ac, var(--accent)); }
/* the home bar grows leftward from the centre, so the two meet at the label */
.h2h-bar.left { justify-content: flex-end; }
.h2h-label {
  min-width: 30px; text-align: center; font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-mute);
}

.ts-mid { display: flex; flex-direction: column; align-items: stretch; gap: 13px; }
.ts-vs {
  text-align: center; font-family: var(--font-num); font-style: italic; font-weight: 800;
  font-size: clamp(34px, 5vw, 58px); line-height: 1;
  background: linear-gradient(180deg, #fff, var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ts-opt { display: flex; flex-direction: column; gap: 6px; }
.ts-opt > span { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-mute); }
.seg.col { flex-direction: column; }
.seg.col button { text-align: left; padding: 8px 12px; display: flex; flex-direction: column; gap: 1px; }
.seg.col button b { font-size: 13px; font-weight: 700; }
.seg.col button i { font-style: normal; font-size: 10.5px; opacity: .7; }

.ts-hints {
  grid-column: 1 / -1; display: flex; gap: 20px; flex-wrap: wrap; align-items: center;
  justify-content: center; padding-top: 4px; font-size: 11.5px; color: var(--text-mute);
}
.ts-hints b {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
  margin-right: 5px; border-radius: 999px; background: rgba(255, 255, 255, .12);
  font-size: 10px; color: #fff;
}
.ts-pads { margin-left: auto; color: var(--text-dim); }

@media (max-width: 860px) {
  .teamsel { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; align-items: start; }
  .ts-mid { order: 3; padding-top: 0; }
  .ts-away { order: 2; }
  .ts-hints { order: 4; }
  .ts-pads { margin-left: 0; width: 100%; text-align: center; }
}

/* ------------------------------ Portraits ------------------------------ */
.pc-portrait { display: flex; justify-content: center; margin-top: 8px; }
.face { display: block; border-radius: 9px; background: rgba(255, 255, 255, .05); }
.pc-mini .pc-portrait { margin-top: 6px; }
.detail-top .face { border-radius: 12px; }

/* -------------------------------- Store -------------------------------- */
.tab-dot {
  display: inline-grid; place-items: center; min-width: 17px; height: 17px; margin-left: 6px;
  padding: 0 4px; border-radius: 999px; background: var(--warn); color: #1a1200;
  font-style: normal; font-size: 10px; font-weight: 800;
}
.store-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* Shelves. Each category is a panel; inside it the packs sit in one row that
   scrolls sideways when it must, so a shelf never dictates the layout of the
   one below it — and the packs get to be big. */
.store-head { display: flex; align-items: center; justify-content: space-between; margin: 2px 2px 12px; }
.store-head h2 { margin: 0; font-family: var(--font-num); font-size: 19px; }
.sc-blurb { font-size: 11.5px; color: var(--text-mute); font-weight: 500; }
.store-row {
  display: flex; gap: 16px; overflow-x: auto; padding: 6px 2px 10px;
  scrollbar-width: thin;
}
.store-row .store-pack { flex: 0 0 234px; }
.cat-limited .panel-head h2 { color: #7af7ff; }

/* The packs breathe. A slow, small bob with staggered phases so the shelf
   reads as a shop window rather than a spreadsheet; the foil sweep on hover
   is still the only fast motion in the store. */
.store-row .sp-art { animation: packFloat 4.6s ease-in-out infinite; }
.store-row .store-pack:nth-child(2n) .sp-art { animation-delay: -1.5s; }
.store-row .store-pack:nth-child(3n) .sp-art { animation-delay: -2.9s; }
@keyframes packFloat {
  0%, 100% { transform: translateY(0) rotate(-.8deg); }
  50%      { transform: translateY(-6px) rotate(.9deg); }
}
.reduce-motion .store-row .sp-art { animation: none; }

/* Every card is the same skeleton in the same order — art, name, note, promise,
 * odds, button — but the promise line only exists on some packs and the notes
 * wrap to different heights. The grid already stretches each card to its row,
 * so without help the buy buttons landed at whatever height their own content
 * ran out at, and a row of packs read as a row of things at slightly wrong
 * heights. `margin-top: auto` on the button spends the leftover space above it
 * instead, so every price in a row sits on one line. */
.store-pack {
  display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 16px 14px 14px;
  border-radius: 16px; text-align: center;
  border: 1px solid color-mix(in srgb, var(--pk, #b9c4d0) 45%, transparent);
  background:
    radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--pk, #b9c4d0) 26%, transparent), transparent 70%),
    linear-gradient(165deg, color-mix(in srgb, var(--pk, #b9c4d0) 13%, transparent), rgba(255, 255, 255, .02));
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
@media (hover: hover) {
  .store-pack:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--pk, #b9c4d0) 75%, transparent);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .5), 0 0 26px color-mix(in srgb, var(--pk, #b9c4d0) 26%, transparent);
  }
}
.reduce-motion .store-pack { transition: none; }
.reduce-motion .store-pack:hover { transform: none; }

.store-pack.rar-bronze { --pk: #c88a4a; }
.store-pack.rar-silver { --pk: #b9c4d0; }
.store-pack.rar-gold { --pk: #f4c95d; }
.store-pack.rar-special { --pk: #ff2e88; }
.store-pack.rar-star { --pk: #a06bff; }
.store-pack.rar-icon { --pk: #7af7ff; }
/* Packs sold for what they do rather than what they roll, so they are not named
   after a rarity and need a colour of their own. */
.store-pack.rar-keeper { --pk: #46d6a0; }
.store-pack.rar-dip { --pk: #ff9f43; }

/* The pack art.
 *
 * A foil face with two card edges fanned out behind it, rather than a coloured
 * rectangle with letters on. The fan is what says "this contains cards" before
 * a word is read, and the count on the face is the number a buyer wants ahead
 * of the odds — it used to be plain text buried in the note line.
 *
 * `overflow: visible` on the frame, because the fan sits outside it. The face
 * clips its own foil instead. */
.sp-art {
  position: relative; width: 122px; height: 152px; margin-bottom: 10px;
  display: grid; place-items: center;
}
/* Two card edges, peeking left and right. Behind the face and slightly short
   of it, the way a stack sits when it is not square. */
.sp-fan i {
  position: absolute; top: 9px; width: 84px; height: 130px; border-radius: 10px;
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--pk) 42%, #070b14), #060910 78%);
  border: 1px solid color-mix(in srgb, var(--pk) 38%, transparent);
}
.sp-fan i:nth-child(1) { left: 6px;  transform: rotate(-9deg); }
.sp-fan i:nth-child(2) { right: 6px; transform: rotate(9deg); }

/* The face: the pack itself. */
.sp-face {
  position: relative; z-index: 2; overflow: hidden;
  width: 100px; height: 145px; border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--pk) 80%, #05070e), #05070e 74%);
  border: 1px solid color-mix(in srgb, var(--pk) 65%, transparent);
  box-shadow:
    inset 0 0 26px color-mix(in srgb, var(--pk) 34%, transparent),
    inset 0 -18px 24px -18px color-mix(in srgb, var(--pk) 62%, transparent),
    0 8px 18px rgba(0, 0, 0, .45);
}
/* the chevron band, so the face reads as packaging */
.sp-face::after {
  content: ''; position: absolute; left: -25%; right: -25%; top: 54%; height: 24px;
  background: color-mix(in srgb, var(--pk) 34%, transparent);
  transform: rotate(-11deg);
}
/* a serrated tear-strip along the top, which is the detail that makes it a
   packet rather than a card */
.sp-face::before {
  content: ''; position: absolute; left: 0; right: 0; top: 9px; height: 3px;
  background: repeating-linear-gradient(90deg,
    color-mix(in srgb, var(--pk) 70%, transparent) 0 3px, transparent 3px 6px);
  opacity: .85;
}
.sp-mark {
  position: relative; z-index: 1;
  font-family: var(--font-num); font-style: italic; font-weight: 800;
  font-size: 30px; color: #fff; letter-spacing: -.02em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .6);
}
.sp-count {
  position: relative; z-index: 1;
  font-family: var(--font-num); font-size: 12px; font-weight: 800;
  color: color-mix(in srgb, var(--pk) 60%, #ffffff);
  letter-spacing: .06em;
}
/* Foil. Rests as a static highlight; on a pointer it sweeps once, which is the
   only motion in the store and the reason a foil pack looks like foil. */
.sp-foil {
  position: absolute; inset: 0; z-index: 3; border-radius: 10px;
  pointer-events: none; overflow: hidden;
}
.sp-foil::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .34), transparent);
  transform: skewX(-14deg);
}
@media (hover: hover) {
  .store-pack:hover .sp-foil::before { animation: foilSweep .75s ease-out; }
}
@keyframes foilSweep { from { left: -60%; } to { left: 120%; } }
.reduce-motion .sp-foil::before { animation: none !important; }

.sp-name { font-family: var(--font-num); font-size: 16.5px; line-height: 1.15; }
.sp-note { font-size: 11px; color: var(--text-mute); }
.sp-odds { font-size: 10px; color: var(--text-dim); line-height: 1.45; }
/* `margin-top: auto` is the line that puts every buy button in a row on the
   same baseline — see the note on .store-pack. `padding-top` keeps it off the
   odds line on the tallest card, where there is no leftover space to spend. */
.store-pack .btn { width: 100%; padding: 10px; font-size: 13px; margin-top: auto; }
.sp-odds { padding-bottom: 8px; }

.locker { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.locker-pack {
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px;
  border-radius: 13px; cursor: pointer; font: inherit; color: var(--text);
  border: 1px solid color-mix(in srgb, var(--pk, #b9c4d0) 45%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--pk, #b9c4d0) 18%, transparent), rgba(255, 255, 255, .02));
  transition: transform .16s, box-shadow .16s;
}
.locker-pack.rar-bronze { --pk: #c88a4a; }
.locker-pack.rar-silver { --pk: #b9c4d0; }
.locker-pack.rar-gold { --pk: #f4c95d; }
.locker-pack.rar-special { --pk: #ff2e88; }
.locker-pack.rar-star { --pk: #a06bff; }
.locker-pack.rar-icon { --pk: #7af7ff; }
.locker-pack:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0, 0, 0, .45); }
.lp-art {
  width: 52px; height: 70px; border-radius: 8px; display: grid; place-items: center;
  background: linear-gradient(150deg, color-mix(in srgb, var(--pk) 65%, #05070e), #05070e 72%);
  border: 1px solid color-mix(in srgb, var(--pk) 50%, transparent);
}
.lp-art i { font-family: var(--font-num); font-style: italic; font-weight: 800; color: var(--pk); font-size: 15px; }
.locker-pack b { font-family: var(--font-num); font-size: 14px; }
.lp-count { font-size: 11px; color: var(--text-dim); }
.lp-cta { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--pk); font-weight: 700; }

/* --------------------- Staged pack reveal (plinths) --------------------- */
.plinths {
  position: relative; z-index: 3; display: flex; gap: 12px; justify-content: center;
  margin-bottom: 14px; transition: opacity .35s, transform .35s;
}
.plinths.done { opacity: 0; transform: translateY(-14px) scale(.94); pointer-events: none; }
.plinth {
  width: 104px; min-height: 104px; border-radius: 14px; padding: 10px 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
  border: 1px solid var(--line); opacity: .35; transform: translateY(10px);
  transition: opacity .45s ease, transform .45s cubic-bezier(.2, 1.1, .3, 1), box-shadow .45s;
}
.plinth.lit {
  opacity: 1; transform: none;
  border-color: color-mix(in srgb, var(--rar) 60%, transparent);
  box-shadow: 0 0 26px var(--rar-glow), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.pl-label { font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-mute); }
.pl-slot {
  display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center;
  animation: plPop .45s cubic-bezier(.2, 1.2, .3, 1) both;
}
.pl-slot em { font-style: normal; font-size: 11px; font-weight: 650; }
.pl-slot strong { font-family: var(--font-num); font-size: 30px; font-weight: 800; color: var(--rar); }
@keyframes plPop { from { opacity: 0; transform: scale(.6) translateY(8px); } to { opacity: 1; transform: none; } }
.reduce-motion .plinth, .reduce-motion .pl-slot { transition: none; animation: none; }

@media (max-width: 640px) {
  .plinth { width: 84px; min-height: 88px; }
  .pl-slot strong { font-size: 22px; }
}

/* --------------------------- Pack summary ------------------------------ */
.pack-summary {
  position: relative; z-index: 3; width: min(880px, 94vw); max-height: 90vh;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 22px; overflow-y: auto; text-align: center;
  border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--rar) 40%, transparent);
  background: linear-gradient(165deg, rgba(255, 255, 255, .07), rgba(6, 10, 20, .95));
  box-shadow: 0 24px 70px rgba(0, 0, 0, .7), 0 0 44px var(--rar-glow);
  animation: popIn .32s cubic-bezier(.2, 1.1, .3, 1) both;
}
.ps-kicker { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--text-mute); }
.pack-summary h3 { margin: 0; font-family: var(--font-num); font-size: 26px; font-weight: 800; }
.ps-tally { display: flex; gap: 7px; flex-wrap: wrap; justify-content: center; margin-bottom: 4px; }
.ps-tag {
  font-size: 11px; font-weight: 800; letter-spacing: .06em; padding: 4px 10px; border-radius: 999px;
  color: #06101c;
}
.ps-tag.rar-bronze { background: #c88a4a; }
.ps-tag.rar-silver { background: #b9c4d0; }
.ps-tag.rar-gold { background: #f4c95d; }
.ps-tag.rar-special { background: #ff2e88; color: #fff; }
.ps-tag.rar-star { background: #a06bff; color: #fff; }
.ps-tag.rar-icon { background: #7af7ff; color: #04121a; }
/* a card you already own: banked as coins instead, and said so rather than
   disappearing between the pack and the collection */
.ps-tag.dup { background: transparent; color: var(--text-dim); border: 1px solid var(--line-strong); }
.ps-card.is-dup { position: relative; }
.ps-card.is-dup .pcard { opacity: .45; filter: grayscale(.6); }
.ps-dup {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-family: var(--font-num); font-size: 13px; font-weight: 800; letter-spacing: .04em;
  padding: 4px 9px; border-radius: 999px; white-space: nowrap;
  background: rgba(6, 10, 20, .88); border: 1px solid var(--line-strong); color: var(--warn);
}
.dup-tag {
  position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%);
  font-size: 11px; font-weight: 700; letter-spacing: .06em; white-space: nowrap;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(6, 10, 20, .9); border: 1px solid var(--line-strong); color: var(--warn);
}
.walkout-card { position: relative; }
.ps-grid {
  display: grid; gap: 9px; width: 100%;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
}
.ps-card { animation: psIn .3s ease both; }
.ps-grid .ps-card:nth-child(n+9) { animation-delay: .04s; }
@keyframes psIn { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
.pack-summary .btn { margin-top: 6px; min-width: 170px; }
.reduce-motion .ps-card, .reduce-motion .pack-summary { animation: none; }

@media (max-width: 640px) {
  .ps-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 7px; }
  .pack-summary { padding: 16px; }
}

/* --------------------------- Apex Division ----------------------------- */
.div-hero { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.div-badge {
  width: 84px; height: 84px; flex: 0 0 84px; display: grid; place-items: center;
  border-radius: 20px; position: relative;
  background: linear-gradient(150deg, var(--accent), color-mix(in srgb, var(--accent) 40%, #7b5cff));
  box-shadow: 0 12px 34px color-mix(in srgb, var(--accent) 32%, transparent);
}
.div-num { font-family: var(--font-num); font-size: 38px; font-weight: 800; color: #04121a; }
.div-info { display: flex; flex-direction: column; gap: 4px; min-width: 200px; flex: 1; }
.div-kicker { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.div-info b { font-family: var(--font-num); font-size: 26px; }
.div-need { font-size: 12px; color: var(--text-dim); }
.div-pips { display: flex; gap: 5px; margin: 3px 0; }
.div-pips i {
  width: 26px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .14);
}
.div-pips i.on { background: var(--accent); box-shadow: 0 0 10px var(--accent-soft); }
.div-rec { display: flex; gap: 16px; margin-left: auto; }
.div-rec div { display: flex; flex-direction: column; align-items: center; }
.div-rec b { font-family: var(--font-num); font-size: 22px; }
.div-rec span { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); }

.obj-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.obj-list li {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--line);
}
.obj-list li.done { border-color: color-mix(in srgb, var(--good) 45%, transparent); background: rgba(61, 220, 151, .08); }
/* 70% or more, and not finished: the one worth playing another match for. It
   used to read exactly like an objective at 5% — same row, same bar. */
.obj-list li.close {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}
.obj-list li.close .obj-bar b { box-shadow: 0 0 10px var(--accent); }
.obj-list li.close .obj-body > span { color: var(--accent); font-weight: 700; }
.obj-tick {
  width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line-strong); color: var(--good); font-size: 13px; font-weight: 800;
}
.obj-list li.done .obj-tick { background: var(--good); color: #04121a; border-color: transparent; }
.obj-body { flex: 1; display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; }
.obj-body b { font-size: 13.5px; font-weight: 650; }
.obj-body > span { font-family: var(--font-num); font-size: 12px; color: var(--text-dim); }
.obj-bar { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.obj-bar b {
  display: block; height: 100%; background: var(--accent); border-radius: 2px;
  /* grows from wherever it was to where it is, on open — a bar that is simply
     *there* says a number, a bar that moves says progress */
  transform-origin: left center;
  animation: objFill .55s cubic-bezier(.2, .9, .3, 1) both;
}
@keyframes objFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.reduce-motion .obj-bar b { animation: none; }

/* The climb: the whole ladder as one bar, with a marker where the Ultimate
   rungs begin. The per-objective bars say how a slot is going; this is the only
   place the shape of the whole run is visible, and the run is what the rewards
   are actually attached to. */
.obj-climb {
  position: relative; height: 8px; border-radius: 4px; margin: 0 0 14px;
  background: rgba(255, 255, 255, .08); overflow: hidden;
}
.obj-climb i {
  display: block; height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent));
  transform-origin: left center;
  animation: objFill .7s cubic-bezier(.2, .9, .3, 1) both;
}
.obj-climb u {
  position: absolute; top: -2px; bottom: -2px; width: 2px; text-decoration: none;
  background: #c9a4ff; box-shadow: 0 0 8px rgba(201, 164, 255, .8);
}
.reduce-motion .obj-climb i { animation: none; }
.obj-reward {
  display: flex; flex-direction: column; align-items: flex-end;
  font-family: var(--font-num); font-size: 13px; color: var(--warn);
}
.obj-reward em { font-style: normal; font-family: var(--font); font-size: 10px; color: var(--text-mute); text-transform: capitalize; }
/* the premium currency, on the one or two objectives that pay it */
.obj-ult { color: #c9a4ff; font-size: 12px; font-weight: 800; letter-spacing: .04em; }

/* When the finished ones get swapped out. Lit only when there is actually
   something waiting to be replaced — a countdown to nothing is just noise. */
.obj-clock {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 10px 14px; border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .04); border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  font-size: 12.5px; color: var(--text-dim);
}
.obj-clock b {
  font-family: var(--font-num); font-size: 15px; font-weight: 800;
  letter-spacing: .06em; color: var(--text);
}
.oc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-mute); }
.obj-clock.is-due { border-left-color: var(--accent); }
.obj-clock.is-due b { color: var(--accent); }
.obj-clock.is-due .oc-dot { background: var(--accent); animation: rtBlink 1.4s steps(2) infinite; }
.obj-fresh {
  margin: -6px 0 14px; font-size: 12.5px; font-weight: 650; color: var(--accent);
}

.mystery-pack {
  position: relative; overflow: hidden; width: 100%; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; margin-bottom: 10px;
  border-radius: 13px; font: inherit; color: var(--text);
  border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent);
  background: linear-gradient(140deg, rgba(255, 183, 3, .2), rgba(255, 255, 255, .03));
  animation: mpPulse 2.4s ease-in-out infinite;
}
.mystery-pack b { font-family: var(--font-num); font-size: 16px; }
.mystery-pack span:last-child { font-size: 11px; color: var(--text-dim); }
@keyframes mpPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 183, 3, .28); }
  50% { box-shadow: 0 0 26px 2px rgba(255, 183, 3, .34); }
}

.div-result {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 12px; margin-bottom: 16px; border-radius: 12px;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--line);
}
.div-result.up { border-color: var(--good); background: rgba(61, 220, 151, .1); }
.div-result.down { border-color: var(--bad); background: rgba(255, 93, 108, .1); }
.dr-kicker { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-dim); }
.div-result b { font-family: var(--font-num); font-size: 20px; }
.dr-reward { font-family: var(--font-num); font-size: 13px; color: var(--warn); }
.dr-objs { list-style: none; margin: 6px 0 0; padding: 0; font-size: 11.5px; color: var(--good); }

/* the once-ever "are these graphics right for your device" card */
.gfx-ask {
  display: flex; flex-direction: column; gap: 8px;
  padding: 13px 14px; margin-bottom: 16px; border-radius: 12px;
  text-align: left;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--line);
}
.gfx-ask.rough { border-color: var(--warn); background: rgba(255, 183, 3, .09); }
.ga-kicker { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-dim); }
.gfx-ask p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--text); }
.gfx-ask b { font-family: var(--font-num); }
.ga-btns { display: flex; gap: 8px; }
.ga-btns .btn { flex: 1; }
.gfx-ask em { font-size: 10.5px; font-style: normal; color: var(--text-dim); }

/* ------------------------------ iOS / PWA ------------------------------ */
html {
  /* stop Safari resizing text when the device rotates */
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;   /* v100: pinch-zoom yes, double-tap zoom (and its tap delay) no */
  height: -webkit-fill-available;
}
body {
  /* no rubber-band scroll or long-press callouts over the pitch */
  overscroll-behavior: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  min-height: 100dvh;
}
button, .tile, .coll-item, .pcard { -webkit-user-select: none; user-select: none; }
/* respect the notch / home indicator when installed */
.topbar { padding-top: max(12px, env(safe-area-inset-top)); }
.screen { padding-bottom: max(72px, calc(env(safe-area-inset-bottom) + 60px)); }
.gm-hud { padding-top: max(12px, env(safe-area-inset-top)); }

.rotate-hint {
  position: fixed; inset: 0; z-index: 400;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: #05070e; text-align: center; padding: 24px;
}
.rotate-hint[hidden] { display: none; }
.rh-phone {
  font-size: 54px; color: var(--accent); line-height: 1;
  animation: rhTurn 2.2s ease-in-out infinite;
}
.rotate-hint b { font-size: 18px; letter-spacing: .02em; }
.rotate-hint span:last-child { font-size: 12.5px; color: var(--text-dim); }
@keyframes rhTurn {
  0%, 40% { transform: rotate(90deg); }
  60%, 100% { transform: rotate(0deg); }
}

/* Controller focus ring for the front-end screens. */
.pad-focus {
  outline: 2px solid var(--accent) !important;
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--accent-soft) !important;
  border-radius: 10px;
}

/* Replay banner */
.replay-tag {
  position: absolute; left: 50%; top: 16px; translate: -50% 0; z-index: 5;
  display: flex; align-items: center; gap: 9px;
  /* the tag itself is not a target — only the skip button inside it is */
  pointer-events: none;
  padding: 7px 8px 7px 16px; border-radius: 999px;
  background: rgba(8, 12, 24, .8); border: 1px solid rgba(255, 255, 255, .16);
  font-family: var(--font-num); font-size: 13px; font-weight: 800; letter-spacing: .22em;
  color: #fff;
}
.replay-tag[hidden] { display: none; }
.rt-dot {
  width: 9px; height: 9px; border-radius: 50%; background: #ff3b52;
  animation: rtBlink 1s steps(2) infinite;
}
@keyframes rtBlink { 50% { opacity: .25; } }
.replay-tag em {
  font-style: normal; font-family: var(--font); font-size: 10.5px;
  letter-spacing: .08em; color: var(--text-dim); font-weight: 600;
}
/* Tap target for the same thing the controller does by holding ◯. Sized to the
   44px minimum with padding rather than height so the tag stays a slim pill. */
.rt-skip {
  pointer-events: auto; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  appearance: none; cursor: pointer;
  padding: 7px 14px; margin: -4px 0; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  font-family: var(--font-num); font-size: 11.5px; font-weight: 800; letter-spacing: .16em;
  color: var(--accent);
}
.rt-skip:active { background: var(--accent); color: #07130c; }

/* ------------------------- Release notes -------------------------
   Two readers, one look: the card that appears over the menu on a new build,
   and the full page at notes.html. Shared bits live at the top. */
.np-tag {
  font-family: var(--font-num); font-size: 10px; font-weight: 800;
  letter-spacing: .22em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
}
.np-ver {
  font-family: var(--font-num); font-size: 12px; font-weight: 800;
  letter-spacing: .12em; color: var(--text-dim);
}

/* ---- the in-game card ---- */
.np-layer {
  position: fixed; inset: 0; z-index: 70;
  display: grid; place-items: center; padding: 20px;
  opacity: 0; transition: opacity .26s ease;
}
.np-layer.in { opacity: 1; }
.np-scrim { position: absolute; inset: 0; background: rgba(3, 5, 12, .74); backdrop-filter: blur(10px); }
.np-card {
  position: relative; width: min(620px, 100%); max-height: min(86vh, 760px);
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--radius); border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  background: linear-gradient(180deg, #0b1120 0%, #070b14 100%);
  box-shadow: var(--shadow);
  transform: translateY(14px) scale(.985);
  transition: transform .3s cubic-bezier(.2, .9, .3, 1);
}
.np-layer.in .np-card { transform: none; }

.np-head { position: relative; padding: 24px 26px 18px; border-bottom: 1px solid var(--line); }
.np-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.np-meta time { font-size: 12px; color: var(--text-mute); }
.np-title {
  margin: 0; font-family: var(--font-num); font-weight: 800; font-style: italic;
  font-size: clamp(28px, 5.2vw, 40px); line-height: .96; letter-spacing: -.035em; color: #f6f9ff;
}
.np-lede { margin: 10px 0 0; max-width: 48ch; font-size: 14px; line-height: 1.55; color: var(--text-dim); }
.np-x {
  position: absolute; top: 16px; right: 16px;
  width: 32px; height: 32px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .05);
  color: var(--text-dim); font-size: 13px;
}
.np-x:hover { color: var(--text); border-color: var(--line-strong); }

.np-list { flex: 1 1 auto; overflow-y: auto; margin: 0; padding: 6px 26px 6px; list-style: none; }
.np-item { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.np-item:last-child { border-bottom: 0; }
.np-num {
  flex: 0 0 auto; font-family: var(--font-num); font-size: 12px; font-weight: 800;
  letter-spacing: .1em; color: var(--accent); padding-top: 3px;
}
.np-item h3 { margin: 0 0 5px; font-size: 15px; font-weight: 700; color: var(--text); }
.np-item p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--text-dim); }

.np-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 16px 26px; border-top: 1px solid var(--line); background: rgba(255, 255, 255, .02);
}
.np-more {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 650; color: var(--accent); text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: 1px;
}
.np-more:hover { border-bottom-color: currentColor; }
.np-more svg { transition: transform .18s ease; }
.np-more:hover svg { transform: translateX(3px); }

@media (max-width: 560px) {
  .np-head { padding: 18px 18px 14px; }
  .np-list { padding: 4px 18px; }
  .np-foot { padding: 14px 18px; }
}

/* ---- the full page ---- */
/* the page reuses .screen for its gutter and max width, same as the game */
.notes-page .screen { padding-bottom: 64px; }
/* the top-bar brand is a real link here rather than the game's button */
.notes-page .brand { text-decoration: none; color: var(--text); }
.np-back { font-size: 13px; color: var(--text-dim); text-decoration: none; }
.np-back:hover { color: var(--accent); }
.rn-hero { margin-bottom: 8px; }
.rn-index {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 26px;
}
.rn-index a {
  font-family: var(--font-num); font-size: 12px; font-weight: 800; letter-spacing: .1em;
  padding: 6px 12px; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .04); color: var(--text-dim);
}
.rn-index a:hover { border-color: var(--accent); color: var(--accent); }

.rn {
  padding: 28px 0 8px; border-top: 1px solid var(--line);
  /* the fragment link lands here, and the sticky top bar must not cover it */
  scroll-margin-top: 74px;
}
.rn:first-of-type { border-top: 0; }
.rn-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.rn-meta time { font-size: 12px; color: var(--text-mute); }
.rn-latest {
  font-family: var(--font-num); font-size: 10px; font-weight: 800; letter-spacing: .2em;
  text-transform: uppercase; padding: 4px 9px; border-radius: 999px;
  background: var(--accent); color: #07130c;
}
.rn-head h2 {
  margin: 0; font-family: var(--font-num); font-weight: 800; font-style: italic;
  font-size: clamp(30px, 5.4vw, 46px); line-height: .96; letter-spacing: -.038em; color: #f6f9ff;
}
.rn-lede { margin: 12px 0 0; max-width: 56ch; font-size: 16px; line-height: 1.6; color: var(--text-dim); }

.rn-entry {
  margin-top: 26px; padding-left: 18px;
  border-left: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.rn-entry h3 {
  margin: 0 0 8px; font-size: 17px; font-weight: 700; color: var(--text); letter-spacing: -.01em;
}
.rn-sum { margin: 0 0 10px; font-size: 15px; line-height: 1.6; color: var(--text); }
.rn-detail { margin: 0; max-width: 68ch; font-size: 14.5px; line-height: 1.75; color: var(--text-dim); }

/* what the ladder looks like after this result — the stakes for next time */
.dr-ladder {
  font-size: 12px; letter-spacing: .04em; color: var(--text-mute); margin-top: 2px;
}

/* -------------------------- Club identity ------------------------- */
.ci-top { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 8px; }
.ci-preview {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 176px; height: 176px; border-radius: var(--radius);
  background: rgba(255, 255, 255, .04); border: 1px solid var(--line);
}
.ci-names { flex: 1 1 240px; display: flex; flex-direction: column; gap: 10px; }
/* the badge page's read-only reminder of what the club is called */
.ci-kitnote { flex: 1 1 200px; display: flex; flex-direction: column; gap: 2px; }
.ci-kitnote b { font-family: var(--font-num); font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.ci-kitnote > span {
  font-family: var(--font-num); font-size: 13px; font-weight: 800;
  letter-spacing: .22em; color: var(--accent);
}
.ci-kitnote .p-note { margin-top: 8px; }

/* a live preview of the in-match scoreboard, so the three letters are chosen
   against the thing they actually appear in */
.ci-scorebug {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
}
.ci-sb-label {
  font-family: var(--font-num); font-size: 10.5px; font-weight: 800;
  letter-spacing: .22em; text-transform: uppercase; color: var(--text-mute);
}
.ci-scorebug .gm-bug { position: static; }
.ci-names .field input {
  width: 100%; padding: 10px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: rgba(255, 255, 255, .05);
  color: var(--text); font: inherit; font-size: 15px;
}
.ci-names .field input:focus { outline: none; border-color: var(--accent); }
#ciShort { font-family: var(--font-num); letter-spacing: .22em; text-transform: uppercase; }

.ci-row { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--line); }
.ci-label {
  flex: 0 0 84px; padding-top: 8px;
  font-family: var(--font-num); font-size: 11px; font-weight: 800;
  letter-spacing: .2em; text-transform: uppercase; color: var(--text-mute);
}
.ci-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.ci-opt {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 10px 6px; border-radius: var(--radius-sm); cursor: pointer;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .04);
  color: var(--text-dim); font: inherit;
  transition: border-color .16s, background .16s;
}
/* wrapper the live badge is written into on every change — see the repaint note */
.ci-badge { display: grid; place-items: center; }
.ci-opt em { font-style: normal; font-size: 10px; letter-spacing: .08em; text-transform: capitalize; }
.ci-opt:hover { border-color: var(--line-strong); }
.ci-opt.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

/* the kit swatch is the two colours side by side — which is what a shirt is */
.ci-kit {
  width: 46px; height: 40px; padding: 4px; cursor: pointer;
  border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: rgba(255, 255, 255, .04);
}
.ci-kit i {
  display: block; width: 100%; height: 100%; border-radius: 6px;
  background: linear-gradient(105deg, var(--a) 0 52%, var(--b) 52% 100%);
}
.ci-kit.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }

/* Which gameplay preset a mode runs. Stated up front rather than buried in
   Settings, because the two modes deliberately do not play the same. */
.preset-note {
  margin: 0 0 12px; padding: 9px 12px; border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-left: 3px solid var(--accent);
  font-size: 12.5px; line-height: 1.45; color: var(--text-dim);
}
.preset-note b {
  display: block; color: var(--accent);
  font-family: var(--font-num); font-size: 11px; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase;
}

/* Goal card — rides the celebration, then clears for the restart. */
.goal-card {
  position: absolute; left: 0; right: 0; top: 22%; z-index: 5;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  pointer-events: none; text-align: center;
}
.goal-card[hidden] { display: none; }
.gc-word {
  font-family: var(--font-num); font-weight: 800; font-style: italic;
  font-size: clamp(60px, 13vw, 168px); line-height: .86; letter-spacing: -.045em;
  color: #fff; text-shadow: 0 0 38px var(--team), 0 8px 40px rgba(0, 0, 0, .6);
  opacity: 0; transform: translateY(26px) scale(.86);
}
.gc-scorer {
  font-size: clamp(16px, 2.4vw, 27px); font-weight: 700; letter-spacing: .04em; color: #fff;
  opacity: 0; transform: translateY(16px);
}
.gc-score {
  font-family: var(--font-num); font-size: 14px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--team); font-weight: 700;
  opacity: 0; transform: translateY(12px);
}
.goal-card.show .gc-word { animation: gcPop .62s cubic-bezier(.16, 1.2, .3, 1) forwards, gcThrob 1.5s ease-in-out .62s infinite; }
.goal-card.show .gc-scorer { animation: gcRise .5s cubic-bezier(.2, .9, .3, 1) .26s forwards; }
.goal-card.show .gc-score { animation: gcRise .5s cubic-bezier(.2, .9, .3, 1) .42s forwards; }
@keyframes gcPop {
  0% { opacity: 0; transform: translateY(26px) scale(.86); }
  60% { opacity: 1; transform: translateY(0) scale(1.06); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes gcRise { to { opacity: 1; transform: none; } }
@keyframes gcThrob { 0%, 100% { text-shadow: 0 0 34px var(--team), 0 8px 40px rgba(0, 0, 0, .6); }
  50% { text-shadow: 0 0 66px var(--team), 0 8px 40px rgba(0, 0, 0, .6); } }
.reduce-motion .goal-card.show * { animation-duration: .01s !important; opacity: 1; transform: none; }

/* Pause menu: a vertical list over the dimmed live scene, which keeps rendering. */
.pause {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: minmax(230px, 27%) 1fr;
  grid-template-rows: auto 1fr auto; gap: 0;
  background: linear-gradient(100deg, rgba(4, 7, 14, .95) 0%, rgba(4, 7, 14, .88) 34%, rgba(4, 7, 14, .35) 68%, rgba(4, 7, 14, .18) 100%);
  animation: fade .18s ease both;
}
.pause-head {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 10px;
  padding: 20px 26px 0; font-size: 14px; font-weight: 700; letter-spacing: .02em;
}
/* Half time: the pause menu standing in for the interval, so it announces
   itself rather than looking like the player hit the button by accident. */
.half-head {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; gap: 3px;
  /* clears the score bug and the stamina bar, which stay on screen behind the
     menu — the interval title is large enough to collide with both */
  padding: 62px 26px 0;
  border-left: 3px solid var(--accent); margin-left: 23px;
}
.half-word {
  font-family: var(--font-num); font-weight: 800; font-style: italic;
  font-size: clamp(30px, 5vw, 46px); line-height: 1; letter-spacing: -.035em;
  color: #f6f9ff;
}
.half-score {
  font-family: var(--font-num); font-size: 17px; font-weight: 800;
  letter-spacing: .06em; color: var(--accent);
}
.half-note { font-size: 12.5px; color: var(--text-dim); }

.pause-nav {
  grid-column: 1; align-self: start;
  display: flex; flex-direction: column; gap: 2px; padding: 34px 0 0 26px;
}
.pause-item {
  position: relative;
  text-align: left; background: none; border: 0; cursor: pointer; font: inherit;
  padding: 9px 14px 9px 0; font-size: clamp(15px, 1.5vw, 19px); font-weight: 600;
  color: rgba(226, 234, 248, .42); letter-spacing: .01em;
  transition: color .15s, transform .15s;
}
.pause-item:hover { color: rgba(255, 255, 255, .8); }
.pause-item.on { color: #fff; font-weight: 800; transform: translateX(4px); }
.pause-item.open { color: rgba(255, 255, 255, .92); }
.pause-item.on::before {
  content: ''; position: absolute; margin-left: -14px; margin-top: 4px;
  width: 3px; height: 18px; background: var(--accent); border-radius: 2px;
}
.pause-panel {
  grid-column: 2; grid-row: 2; align-self: start;
  padding: 26px 30px; max-height: 100%; overflow-y: auto;
  max-width: 560px;
}
.pause-panel h3 {
  margin: 0 0 16px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-dim); font-weight: 700;
}
.pause-hints {
  grid-column: 1 / -1; display: flex; gap: 18px; align-items: center;
  padding: 0 26px 20px; font-size: 12px; color: var(--text-dim);
}
.pause-hints b {
  display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 6px;
  border-radius: 50%; background: rgba(255, 255, 255, .14); font-size: 11px; color: #fff;
}

.p-forms { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 18px; }
.form-list { display: flex; flex-direction: column; gap: 5px; flex: 1; }
.form-opt {
  font: inherit; font-family: var(--font-num); font-size: 15px; font-weight: 700;
  text-align: left; padding: 8px 12px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .04); color: var(--text-dim);
  transition: all .15s;
}
.form-opt:hover { color: var(--text); border-color: var(--line-strong); }
.form-opt.on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.form-preview { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.form-preview span { font-family: var(--font-num); font-size: 13px; color: var(--text-dim); }
.form-mini { width: 104px; height: 160px; }
.fm-pitch { fill: rgba(30, 92, 52, .55); stroke: rgba(255, 255, 255, .18); }
.fm-line { stroke: rgba(255, 255, 255, .2); }
.fm-dot { fill: var(--accent); }
.fm-dot.gk { fill: #ffe66d; }

.p-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
.p-row > span { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-mute); }
.p-note { margin: 12px 0 0; font-size: 11.5px; color: var(--text-mute); line-height: 1.5; }
.p-facts { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.p-facts > div {
  display: grid; grid-template-columns: 46px 1fr 46px; align-items: center;
  padding: 7px 4px; border-radius: 8px; background: rgba(255, 255, 255, .05);
}
.p-facts b { font-family: var(--font-num); font-size: 15px; text-align: center; }
.p-facts span { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); text-align: center; }

@media (max-width: 720px) {
  .pause { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr auto; }
  .pause-nav { grid-column: 1; flex-direction: row; flex-wrap: wrap; gap: 4px 14px; padding: 14px 18px 0; }
  .pause-item { font-size: 14px; padding: 6px 0; }
  .pause-item.on::before { display: none; }
  .pause-panel { grid-column: 1; grid-row: 3; padding: 16px 18px; }
  .p-forms { flex-direction: column; align-items: stretch; }
  .form-preview { align-self: center; }
}

.gm-overlay {
  position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; padding: 18px;
  /* Full-screen and directly over the canvas — the worst case for the
     compositor sampling bug described above, so no blur here either. */
  background: rgba(3, 5, 12, .95); animation: fade .2s ease both;
}
.gm-overlay[hidden] { display: none; }
/* the pause menu dims the live scene rather than hiding it behind a blur */
.gm-overlay.is-pause { background: linear-gradient(90deg, rgba(3, 5, 12, .94), rgba(3, 5, 12, .84)); backdrop-filter: none; padding: 0; }   /* v122: the bench list was unreadable over the pitch */
.gm-panel {
  width: min(360px, 94vw); padding: 22px; text-align: center;
  animation: popIn .3s cubic-bezier(.2, 1.1, .3, 1) both;
}
.gm-panel h3 { margin: 0 0 16px; font-family: var(--font-num); font-size: 24px; }
.gm-ft { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--text-mute); }
.gm-final { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: 10px 0 14px; }
.gm-final div { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.gm-final b { font-family: var(--font-num); font-size: 12px; color: var(--text-dim); }
.gm-final span { font-family: var(--font-num); font-size: 38px; font-weight: 800; }
.gm-goals { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.gm-goals li { font-size: 12.5px; color: var(--text-dim); }
.gm-goals i { font-family: var(--font-num); font-style: normal; color: var(--accent); margin-right: 6px; }
.gm-goals em { font-style: normal; color: var(--text-mute); font-size: 11px; }
.gm-stats { display: flex; flex-direction: column; gap: 5px; margin-bottom: 18px; }
.gm-stats > div { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; padding: 6px 4px; border-radius: 8px; background: rgba(255, 255, 255, .035); }
.gm-stats b { font-family: var(--font-num); font-size: 14px; }
/* v120: each row carries a split bar — home's share in the accent, away's in red */
.gm-stats.split > div {
  background: linear-gradient(90deg, var(--accent) var(--l, 50%), #ff5a6a var(--l, 50%)) bottom / 100% 3px no-repeat, rgba(255, 255, 255, .035);
}
.gm-stats span { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); }
.gm-btns { display: flex; gap: 8px; justify-content: center; }

.opt-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 10px; }
.opt { display: flex; align-items: center; gap: 8px; }
.opt > span { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-mute); }
.opt-row #kickOff { margin-left: auto; }
.hint.center { text-align: center; margin: 0; }

/* ----------------------------- Settings -------------------------- */
.setting-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, .06); flex-wrap: wrap;
}
.setting-row:last-child { border-bottom: 0; padding-bottom: 0; }
.setting-row > div:first-child { display: flex; flex-direction: column; gap: 3px; min-width: 180px; flex: 1; }
.setting-row b { font-size: 14px; font-weight: 650; }
.setting-row div > span { font-size: 12px; color: var(--text-mute); line-height: 1.45; }   /* v108: the description only — it caught the row's tag too (12 px against every other tag's 11) */
.seg { display: flex; gap: 3px; padding: 3px; border-radius: 11px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); }
.seg button {
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  padding: 7px 13px; border-radius: 8px; border: 0; background: transparent; color: var(--text-mute);
  transition: all .16s;
}
.seg button.on { background: var(--accent); color: #04121a; }
.switch {
  width: 50px; height: 28px; border-radius: 999px; cursor: pointer; padding: 3px;
  border: 1px solid var(--line-strong); background: rgba(255, 255, 255, .06); transition: background .2s, border-color .2s;
}
.switch i { display: block; width: 20px; height: 20px; border-radius: 50%; background: var(--text-mute); transition: transform .2s, background .2s; }
.switch.on { background: var(--accent-soft); border-color: var(--accent); }
.switch.on i { transform: translateX(22px); background: var(--accent); }
.about p { margin: 0 0 9px; font-size: 13px; color: var(--text-dim); line-height: 1.6; }
.about .disclaimer { text-align: left; margin: 12px 0 0; }
.ctrl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 16px; }
.ctrl-grid > div { display: flex; align-items: baseline; gap: 8px; }
.ctrl-grid b {
  font-family: var(--font-num); font-size: 12px; color: var(--accent);
  min-width: 78px; letter-spacing: .02em;
}
.ctrl-grid span { font-size: 12.5px; color: var(--text-dim); }
.ctrl-grid.compact { grid-template-columns: repeat(2, 1fr); gap: 6px 12px; margin-bottom: 18px; text-align: left; }
.ctrl-grid.compact b { min-width: 24px; font-size: 13px; }

/* ------------------------------ Toasts --------------------------- */
.toasts {
  position: fixed; left: 50%; bottom: 22px; translate: -50% 0; z-index: 300;
  display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none;
}
.toast {
  padding: 11px 18px; border-radius: 12px; font-size: 13px; font-weight: 600;
  background: rgba(14, 20, 36, .96); border: 1px solid var(--line-strong);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .55); animation: toastIn .28s cubic-bezier(.2, 1.1, .3, 1) both;
  max-width: 90vw; text-align: center;
}
.toast-good { border-color: var(--good); color: var(--good); }
.toast-warn { border-color: var(--warn); color: var(--warn); }
.toast.out { animation: toastOut .3s ease both; }
@keyframes toastIn { from { opacity: 0; transform: translateY(18px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(10px) scale(.96); } }

/* ---------------------------- Responsive ------------------------- */
@media (max-width: 640px) {
  .screen { padding: 16px 12px 60px; }
  .sb-metrics { flex: 1 1 100%; }
  .sb-actions { width: 100%; }
  .sb-actions .btn { flex: 1; }
  .slot { width: 58px; padding: 5px 3px; }
  .slot-ovr { font-size: 15px; }
  .slot-name { font-size: 7.5px; }
  .collection { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); max-height: 460px; }
  .ch-stats { gap: 14px; width: 100%; margin-left: 0; }
  .sb-nums i { font-size: 34px; }
  .detail-body { flex-direction: column; }
  .vs-strip { padding: 16px 12px; gap: 8px; }
  .hstat { min-width: 92px; padding: 10px 12px; }
  .opt-row #kickOff { margin-left: 0; width: 100%; }
  .gm-hud { padding: 8px 10px; }
  .bug-team { padding: 5px 7px; font-size: 11px; }
  .bug-score { min-width: 24px; font-size: 15px; }
  .bug-clock { padding: 5px 8px; font-size: 11px; }
  /* Touch-control sizing lives with its own `(pointer: coarse)` rules above —
     a width query is the wrong axis for a screen that only plays in landscape,
     see the note there. */
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ==================================================================== *
 * Online — account, matchmaking, leaderboard
 * ==================================================================== */
.acct-wrap { max-width: 520px; margin: 0 auto; }

.acct {
  padding: 26px 24px 22px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.acct-kicker {
  font: 700 11px/1 var(--font);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
}
.acct-title { margin: 0; font-size: 26px; letter-spacing: -.01em; }
.acct-sub { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }

.acct-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: rgba(255,255,255,.05);
  border-radius: 12px;
}
.acct-tabs button {
  flex: 1;
  padding: 9px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font: 600 13px/1 var(--font);   /* v141: "inherit" is not a family: the whole declaration was being dropped */
  cursor: pointer;
  transition: background .18s, color .18s;
}
.acct-tabs button.on { background: var(--accent-soft); color: var(--accent); }

.acct-form { display: flex; flex-direction: column; gap: 12px; }
.acct-form input {
  width: 100%;
  padding: 11px 13px;
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.35);
  color: var(--text);
  font: 500 15px/1 var(--font);   /* v141: "inherit" is not a family: the whole declaration was being dropped */
}
.acct-form input:focus { outline: none; border-color: var(--accent); }
.acct-error {
  margin: 0;
  font-size: 13px;
  color: #ff6b8a;
  background: rgba(255,46,88,.1);
  border-radius: 9px;
  padding: 8px 11px;
}
.acct-note { margin: 0; font-size: 11.5px; color: var(--muted); opacity: .8; line-height: 1.5; }
.btn.wide { width: 100%; justify-content: center; }

/* ------------------------------ signed in ------------------------------ */
.ol-me {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.ol-avatar {
  width: 44px; height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--accent-soft);
  color: var(--accent);
  font: 800 20px/1 var(--font);   /* v141: "inherit" is not a family: the whole declaration was being dropped */
}
.ol-id { display: flex; flex-direction: column; gap: 3px; margin-right: auto; }
.ol-id b { font-size: 16px; }
.ol-conn { font-size: 11px; color: var(--muted); }
.ol-conn.good { color: #7ef0a8; }
.ol-conn.bad { color: #ff8f6b; }
.ol-record { display: flex; gap: 16px; }
.ol-record div { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ol-record b { font-size: 17px; }
.ol-record span { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }

.ol-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}
.ol-card { padding: 18px; border-radius: 16px; display: flex; flex-direction: column; gap: 10px; }
.ol-card h3 { margin: 0; font-size: 19px; }
.ol-card p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.ol-kicker {
  font: 700 10px/1 var(--font);   /* v141: "inherit" is not a family: the whole declaration was being dropped */
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
.ol-warn { color: #ffc078 !important; }
.ol-card .btn { margin-top: auto; }

.ol-lobby { display: flex; gap: 8px; flex-wrap: wrap; }
.ol-join { display: flex; gap: 6px; flex: 1; min-width: 150px; }
.ol-join input {
  flex: 1;
  min-width: 0;
  padding: 9px 11px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.35);
  color: var(--text);
  font: 700 15px/1 var(--font);   /* v141: "inherit" is not a family: the whole declaration was being dropped */
  letter-spacing: .22em;
  text-transform: uppercase;
  text-align: center;
}
.ol-join input:focus { outline: none; border-color: var(--accent); }
.ol-code { margin: 0; font-size: 13px; color: var(--muted); }
.ol-code b { color: var(--accent); font-size: 20px; letter-spacing: .2em; }

.ol-board { padding: 18px; border-radius: 16px; }
.ol-board h3 { margin: 0 0 12px; font-size: 18px; }
.ol-rows { display: flex; flex-direction: column; gap: 2px; }
.ol-row {
  display: grid;
  grid-template-columns: 30px 1fr auto auto 46px 44px;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border-radius: 10px;
  font-size: 13px;
}
.ol-row:nth-child(odd) { background: rgba(255,255,255,.03); }
.ol-row.me { background: var(--accent-soft); }
.ol-row i { font-style: normal; color: var(--muted); font-size: 12px; }
.ol-row span { color: var(--muted); font-size: 12px; }
.ol-row .ol-gd { text-align: right; }
.ol-row em { font-style: normal; font-weight: 800; text-align: right; color: var(--accent); }
.ol-empty { margin: 0; color: var(--muted); font-size: 13px; }

/* ----------------------------- searching ----------------------------- */
.ol-search {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  background: rgba(4,6,14,.78);
  backdrop-filter: blur(6px);
}
.ols-inner {
  padding: 30px 34px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.ols-inner b { font-size: 18px; }
.ols-inner span { font-size: 13px; color: var(--muted); }
.ols-spin {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.12);
  border-top-color: var(--accent);
  animation: olspin .8s linear infinite;
}
@keyframes olspin { to { transform: rotate(360deg); } }

/* --------------------------- in-match pip --------------------------- */
.gm-net {
  padding: 4px 9px;
  border-radius: 8px;
  background: rgba(0,0,0,.45);
  font: 600 11px/1 var(--font);   /* v141: "inherit" is not a family: the whole declaration was being dropped */
  color: var(--muted);
  white-space: nowrap;
}
/* --------------------------- stamina bar ---------------------------- */
.gm-left { display: flex; flex-direction: column; align-items: flex-start; }
.gm-stam {
  display: flex; align-items: center; gap: 8px;
  margin-top: 6px; padding: 4px 9px;
  border-radius: 8px;
  background: rgba(0,0,0,.45);
  pointer-events: none;
  width: max-content;
}
.stam-who {
  font: 700 10px/1 var(--font);   /* v141: "inherit" is not a family: the whole declaration was being dropped */
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-dim);
  max-width: 130px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gm-stam i {
  display: block; width: 130px; height: 5px;
  border-radius: 3px;
  background: rgba(255,255,255,.16);
  overflow: hidden;
}
.gm-stam b {
  display: block; height: 100%; width: 100%;
  border-radius: 3px;
  background: var(--good, #3ddc97);
  /* eased, or a bar that only ever moves in whole percents looks like it ticks */
  transition: width .25s linear, background-color .4s ease;
}
.gm-stam.low b { background: #ffc63d; }
.gm-stam.spent b { background: #ff5d6c; }

/* Tabular figures, or the badge jitters sideways every time the number
   changes and the eye reads that as the game stuttering. */
.gm-fps {
  padding: 4px 9px;
  border-radius: 8px;
  background: rgba(0,0,0,.45);
  font: 700 11px/1 ui-monospace, "SF Mono", Menlo, monospace;
  font-variant-numeric: tabular-nums;
  color: #7ef0a8;
  white-space: nowrap;
}
.gm-net.good { color: #7ef0a8; }
.gm-net.ok { color: #ffd479; }
.gm-net.bad { color: #ff8f6b; }
.pause-live {
  margin: 0 0 8px;
  font-size: 11.5px;
  color: #ffc078;
  opacity: .9;
}

/* `hidden` must beat the layout display, or the overlay is permanently on */
.ol-search[hidden] { display: none; }

/* ------------------------- locked mode tile ------------------------- */
.tile.is-locked {
  opacity: .5;
  cursor: not-allowed;
  filter: saturate(.35);
}
.tile.is-locked:hover { transform: none; }
.tile.is-locked .tile-cta { color: var(--muted); }

/* --------------------- settings explanatory note -------------------- */
.setting-note {
  margin: -4px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}
.setting-note.warn { color: #ffc078; }

/* --------------------- currency, icons and the reset --------------------- */
.coin-chip.ult { color: #b892ff; border-color: rgba(184, 146, 255, .35); }

/* Icon tier — the eight 99s. Cyan, so it cannot be mistaken for gold. */
.rar-star {
  --rar: #a06bff;
  --rar-glow: rgba(160, 107, 255, .7);
  border-color: rgba(160, 107, 255, .5);
}
.rar-icon {
  --rar: #7af7ff;
  --rar-glow: rgba(122, 247, 255, .75);
  border-color: rgba(122, 247, 255, .5);
}
.store-pack.rar-star { box-shadow: 0 0 26px rgba(160, 107, 255, .2); }
.store-pack.rar-icon { box-shadow: 0 0 26px rgba(122, 247, 255, .22); }
.sp-tag {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  padding: 3px 8px; border-radius: 999px;
  background: #7af7ff; color: #04121a;
  font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.store-pack { position: relative; }
.sp-badge { position: absolute; top: 8px; inset-inline-start: 8px; z-index: 3; padding: 3px 9px; border-radius: 999px; font: 800 10px/1.2 var(--font-num); letter-spacing: .12em; text-transform: uppercase; color: #06140c; background: var(--accent); box-shadow: 0 4px 12px rgba(0,0,0,.35); }
.sp-badge.b-updated { background: #41d3ff; } .sp-badge.b-back { background: #ffd166; } .sp-badge.b-season { background: linear-gradient(90deg, #0f7a41, #1fbf62); color: #fff; }
.sp-leaves { position: absolute; top: 8px; inset-inline-end: 8px; z-index: 3; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; color: var(--text-dim); background: rgba(0,0,0,.45); }
/* v126: the National Day pack */
.store-pack.rar-nationalday .sp-face { background: linear-gradient(135deg, transparent 43%, rgba(255,255,255,.95) 44% 56%, transparent 57%) 0 0 / 14px 12px repeat-x, linear-gradient(170deg, #1fbf62, #0b5a31 60%, #04210f); color: #fff; }
.store-pack.rar-nationalday { --rar: #1fbf62; }
.sp-alt { font-size: 10px; color: var(--text-mute); text-align: center; }

.apology { border-color: rgba(255, 183, 3, .4); }
.apology p { margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: var(--text); }
.ap-list { margin: 0 0 12px; padding-left: 18px; font-size: 13px; line-height: 1.7; }
.ap-list b { color: var(--accent); }
.ap-note { font-size: 11.5px !important; color: var(--text-dim) !important; }

.dr-why { font-size: 10.5px; color: var(--text-dim); }
.wallet { display: flex; align-items: center; gap: 6px; }
@media (max-width: 420px) {
  /* two balances plus a title do not fit on a small phone; Apex is the one
     that is actually spendable, so Ultimate is the one that goes */
  .wallet .ult { display: none; }
}

/* what a Limited pack promises, said plainly above the odds */
.sp-promise {
  display: block; margin: 2px 0 4px; padding: 3px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--pk) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--pk) 45%, transparent);
  color: var(--pk);
  font-size: 10px; font-weight: 800; letter-spacing: .04em; text-align: center;
}


/* build stamp in Settings — monospaced so a hash is readable and copyable */
.tag.mono {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px; letter-spacing: .02em;
  user-select: all;
}
.tag.mono.stale { color: var(--warn); border-color: rgba(255, 183, 3, .5); }

/* ------------------------------- the bench ------------------------------ */
.bench-strip { margin-top: 12px; }
.bench-label {
  display: block; margin-bottom: 7px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-dim);
}
.bench-slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.bslot {
  position: relative; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 1px;
  min-height: 74px; padding: 8px 4px;
  border-radius: 11px; cursor: pointer;
  border: 1px dashed var(--line); background: rgba(255, 255, 255, .03);
  transition: border-color .16s, background .16s, transform .16s;
}
.bslot.filled {
  border-style: solid;
  border-color: color-mix(in srgb, var(--rar) 55%, transparent);
  background: linear-gradient(170deg, color-mix(in srgb, var(--rar) 20%, transparent), rgba(10, 14, 26, .9));
}
.bslot:hover { transform: translateY(-2px); border-color: var(--accent); }
.bslot.is-picking { border-color: var(--accent); background: var(--accent-soft); }
.bslot-ovr { font-family: var(--font-num); font-size: 19px; font-weight: 800; line-height: 1; color: var(--rar, var(--text)); }
.bslot-name { font-size: 9.5px; font-weight: 600; text-align: center; line-height: 1.15;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bslot-pos { font-size: 8.5px; letter-spacing: .1em; color: var(--text-dim); text-transform: uppercase; }
.bslot-pos.empty { color: var(--text-mute); }
.bslot .slot-x { top: 2px; right: 2px; }

@media (max-width: 520px) {
  .bench-slots { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------- substitutions --------------------------- */
.sub-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 10px 0 6px; }
.sub-col { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.sub-head {
  font-size: 9.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 2px;
}
.sub-row {
  position: relative; display: grid; align-items: center; gap: 8px;
  grid-template-columns: 26px 1fr auto;
  padding: 7px 9px 9px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .04);
  color: inherit; font: inherit; text-align: left;
  transition: border-color .14s, background .14s;
}
.sub-row:hover:not(:disabled) { border-color: var(--accent); }
.sub-row.on { border-color: var(--accent); background: var(--accent-soft); }
.sub-row:disabled, .sub-row.is-off { opacity: .34; cursor: default; }
.sub-row b { font-family: var(--font-num); font-size: 15px; font-weight: 800; }
.sub-name { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub-row em {
  font-style: normal; font-size: 9px; letter-spacing: .08em;
  color: var(--text-dim); text-transform: uppercase;
}
/* how much he has left, along the foot of his row */
.sub-stam {
  position: absolute; left: 9px; right: 9px; bottom: 3px; height: 3px;
  border-radius: 2px; background: rgba(255, 255, 255, .12); overflow: hidden;
}
.sub-stam::before {
  content: ''; display: block; height: 100%; width: var(--s, 100%);
  background: var(--good, #3ddc97); border-radius: 2px;
}
.sub-stam.low::before { background: #ff5d6c; }

@media (max-width: 480px) {
  .sub-cols { grid-template-columns: 1fr; }
}

/* ----------------------------- the shootout ----------------------------- */
.so { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.so-kicker { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-dim); }
.so-score {
  display: flex; align-items: baseline; gap: 14px;
  font-family: var(--font-num); font-size: 30px; font-weight: 800;
}
.so-score b { font-size: 15px; color: var(--text-dim); }
.so-pips { display: flex; flex-direction: column; gap: 4px; }
.so-pips > div { display: flex; gap: 5px; min-height: 10px; }
.so-pip {
  width: 10px; height: 10px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .25);
}
.so-pip.scored { background: var(--good, #3ddc97); border-color: transparent; }
.so-pip.missed { background: #ff5d6c; border-color: transparent; }

/* The goal, seen from behind the kicker. Flat on purpose — a perspective goal
   here would fight the 3D match that is still on screen behind this panel. */
.so-goal {
  position: relative; width: min(360px, 78vw); height: 128px; margin: 6px 0 2px;
  border: 3px solid rgba(255, 255, 255, .82);
  border-bottom-width: 4px; border-radius: 3px;
  background: rgba(255, 255, 255, .03);
  overflow: hidden;
}
.so-net {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px);
  background-size: 13px 13px;
}
.so-keeper {
  position: absolute; left: 50%; bottom: 6px; width: 40px; height: 62px;
  margin-left: -20px; border-radius: 9px 9px 4px 4px;
  background: linear-gradient(180deg, #ffe066, #f0a202);
  transition: transform .28s cubic-bezier(.2, .8, .3, 1);
}
/* what your aim currently is, sweeping across the mouth of the goal */
.so-marker {
  position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1.5px;
  background: var(--accent); box-shadow: 0 0 12px var(--accent);
}
.so-ball {
  position: absolute; top: 32px; width: 20px; height: 20px; margin-left: -10px;
  border-radius: 50%; background: #fff;
  box-shadow: 0 0 18px rgba(255, 255, 255, .7);
  animation: soHit .22s ease-out;
}
.so-ball.missed { background: #ff8f6b; box-shadow: 0 0 18px rgba(255, 143, 107, .7); }
@keyframes soHit { from { transform: scale(2.2); opacity: .2; } to { transform: none; opacity: 1; } }

.so-status { margin: 2px 0 0; font-size: 13px; min-height: 1.4em; color: var(--text-dim); }
.so-status.good { color: var(--good, #3ddc97); font-weight: 700; }
.so-status.bad { color: #ff8f6b; font-weight: 700; }

.so-offer { width: 100%; margin-bottom: 10px; }
.so-result {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px; margin-bottom: 12px; border-radius: 12px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .05);
}
.so-result.won { border-color: var(--good, #3ddc97); background: rgba(61, 220, 151, .1); }
.so-result.lost { border-color: var(--bad, #ff5d6c); background: rgba(255, 93, 108, .1); }
.so-result span { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-dim); }
.so-result b { font-family: var(--font-num); font-size: 22px; }

/* --------------------------- Icon Exchange --------------------------- */
.exchange .hint { margin-bottom: 12px; }
.xchg-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
}
.xchg {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 12px; border-radius: 13px;
  border: 1px solid color-mix(in srgb, var(--rar) 45%, transparent);
  background: linear-gradient(165deg, color-mix(in srgb, var(--rar) 18%, transparent), rgba(10, 14, 26, .92));
}
.xchg.owned { opacity: .55; }
.xchg-ovr { font-family: var(--font-num); font-size: 26px; font-weight: 800; color: var(--rar); line-height: 1; }
.xchg-name { font-size: 12.5px; font-weight: 700; }
.xchg-meta { font-size: 10px; color: var(--text-dim); letter-spacing: .04em; }
.xchg-buy { margin-top: 8px; width: 100%; font-size: 12px; padding: 7px 10px; }
.xchg-owned {
  margin-top: 8px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--good, #3ddc97);
}

/* ------------------------ squad-building challenges ------------------------ */
.sbc-list { display: flex; flex-direction: column; gap: 10px; }
/* v120: SBC groups fold — one open at a time */
.sbc-grp { border-top: 1px solid var(--line); }
.sbc-grp:first-of-type { border-top: 0; }
.sbc-grp > .sbc-list { padding-bottom: 12px; }
.sbc-group {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 14px 2px;
  font: 800 15px/1.2 var(--font-num); letter-spacing: .04em; text-transform: uppercase; color: var(--text);
}
.sbc-group::-webkit-details-marker { display: none; }
.sbc-group::after { content: '▾'; margin-inline-start: auto; color: var(--text-mute); transition: transform .2s; }
.sbc-grp:not([open]) > .sbc-group::after { transform: rotate(-90deg); }
.sbc-group em { font-style: normal; font-size: 11px; padding: 3px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.sbc {
  display: grid; grid-template-columns: 1fr auto; gap: 14px;
  padding: 14px; border-radius: 13px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .04);
}
.sbc.done { opacity: .5; }
.sbc-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sbc-body b { font-size: 15px; }
.sbc-brief { font-size: 12px; color: var(--text-dim); line-height: 1.45; }
.sbc-reqs {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none;
}
.sbc-reqs li {
  padding: 3px 8px; border-radius: 999px; font-size: 10.5px;
  background: rgba(255, 255, 255, .07); color: var(--text-dim);
}
.sbc-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 116px; }
.sbc-reward { font-family: var(--font-num); font-size: 15px; font-weight: 800; color: var(--warn); }
.sbc-reward.ult { color: #b892ff; }
.sbc-pack { font-size: 10px; text-transform: capitalize; color: var(--text-dim); }
.sbc-rep, .sbc-tick {
  font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-mute);
}
.sbc-tick { color: var(--good, #3ddc97); }

.sbc-check { display: flex; flex-direction: column; gap: 5px; margin: 12px 0; }
.sbc-row {
  display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--text-dim);
}
.sbc-row i {
  width: 12px; height: 12px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .25);
}
.sbc-row.ok { color: var(--text); }
.sbc-row.ok i { background: var(--good, #3ddc97); border-color: transparent; }
.sbc-row b { font-family: var(--font-num); font-size: 12.5px; }

.sbc-tray {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
  gap: 8px; margin-bottom: 12px;
}
.sbc-actions { display: flex; gap: 8px; }
.sbc-actions .btn:first-child { flex: 1; }

@media (max-width: 620px) {
  .sbc { grid-template-columns: 1fr; }
  .sbc-side { flex-direction: row; align-items: center; flex-wrap: wrap; }
}

/* ============================== Tutorial ============================== *
 * A spotlight over the real interface. The "hole" is one element with a very
 * large spread box-shadow — everything outside it is shadow, so the cut-out
 * moves and resizes as a single box with no mask, no SVG and no four-panel
 * edge rig. Positions are written from JS every frame; nothing here animates
 * position, because a transition on `left`/`top` would fight the rAF loop and
 * leave the spotlight permanently trailing its target.                      */
.tut { position: fixed; inset: 0; z-index: 200; }

/* Catches stray taps so a mis-tap cannot half-navigate the app underneath.
   `pan-y` hands vertical scrolling back to the browser, so a touch drag still
   moves the page — see the wheel forwarder in tutorial.js for the mouse. */
.tut-scrim { position: absolute; inset: 0; touch-action: pan-y; }

.tut-hole {
  position: fixed; border-radius: 12px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(3, 5, 12, .78);
  outline: 2px solid var(--accent);
  outline-offset: 0;
  animation: tutRing 1.9s ease-in-out infinite;
}
/* A step with no target dims through the scrim instead — with no cut-out there
   is no box for the hole to cast its shadow from. */
.tut.no-target .tut-scrim { background: rgba(3, 5, 12, .78); }
@keyframes tutRing {
  0%, 100% { outline-color: var(--accent); }
  50%      { outline-color: color-mix(in srgb, var(--accent) 35%, transparent); }
}
.reduce-motion .tut-hole { animation: none; }

.tut-card {
  position: fixed; width: min(360px, calc(100vw - 20px));
  background: linear-gradient(165deg, rgba(20, 28, 44, .98), rgba(10, 14, 24, .99));
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 16px; padding: 14px 15px 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .7), 0 0 34px rgba(35, 197, 94, .13);
}
.tut-card.pop { animation: tutPop .26s cubic-bezier(.2, 1.1, .3, 1) both; }
@keyframes tutPop { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } }
.reduce-motion .tut-card.pop { animation: none; }

/* The pointer back to the spotlight. `is-up` means the card sits below the
   target, so the arrow has to be on the card's top edge. */
.tut-arrow {
  position: absolute; width: 14px; height: 14px; transform: rotate(45deg) translateX(-50%);
  background: rgba(20, 28, 44, .98);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.tut-arrow.is-up { top: -7px; border-right: 0; border-bottom: 0; }
.tut-arrow:not(.is-up) { bottom: -7px; border-left: 0; border-top: 0; }

.tut-card header { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.tut-card header > div { flex: 1; min-width: 0; }
.tut-icon {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.tut-chapter {
  display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent);
}
.tut-card header b { display: block; font-family: var(--font-num); font-size: 16.5px; line-height: 1.2; }
.tut-x {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; padding: 0;
  background: transparent; border: 1px solid var(--line); color: var(--text-mute);
  font: inherit; font-size: 12px; cursor: pointer;
}
.tut-x:hover { color: var(--text); border-color: var(--line-strong); }

.tut-body { font-size: 13px; line-height: 1.55; color: var(--text-dim); }
.tut-body b { color: var(--text); font-weight: 700; }
.tut-note {
  margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--line);
  font-size: 11.5px; color: var(--text-mute);
}

/* The control map: a glyph and what it does, which is the one thing a page of
   prose about controls never manages to be. */
.tut-keys { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 0; }
.tut-keys div { display: flex; align-items: baseline; gap: 9px; }
.tut-keys span { flex: 0 0 auto; display: flex; gap: 4px; }
.tut-keys em { font-style: normal; font-size: 12px; color: var(--text-dim); }
.tut-body kbd {
  display: inline-block; padding: 2px 6px; border-radius: 5px;
  background: rgba(255, 255, 255, .08); border: 1px solid var(--line-strong);
  font-family: var(--font-num); font-size: 11px; font-weight: 700; color: var(--text);
  white-space: nowrap;
}

/* One dot a chapter — progress without a percentage, which is the honest way
   to show a tour whose steps are not all the same size. */
.tut-dots { display: flex; gap: 4px; margin: 12px 0 10px; }
.tut-dots i {
  flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .12);
}
.tut-dots i.seen { background: color-mix(in srgb, var(--accent) 45%, transparent); }
.tut-dots i.on { background: var(--accent); }

.tut-card footer { display: flex; align-items: center; gap: 8px; }
.tut-card footer .btn.sm { padding: 7px 12px; font-size: 12px; }
.tut-card footer #tutSkip { margin-right: auto; }
.tut-card footer #tutBack:disabled { opacity: .35; pointer-events: none; }

@media (max-width: 480px) {
  .tut-card { width: calc(100vw - 16px); }
  .tut-card footer .btn.sm { padding: 8px 10px; font-size: 11.5px; }
}

/* ============================ The pack rip ============================ *
 * The pack sits in your hand before it opens: breathing slightly, foil
 * catching the light, tear-strip along the top. Tapping tears the strip off
 * and bursts the packet; the plinth walkout starts only after. One rip per
 * opening, however many cards follow.                                       */
.pack-rip {
  position: relative; z-index: 2; display: flex; flex-direction: column;
  align-items: center; gap: 22px; cursor: pointer; outline: none;
  -webkit-tap-highlight-color: transparent;
}
.rip-pack { position: relative; width: 210px; height: 300px; }
.rip-fan i {
  position: absolute; top: 14px; width: 150px; height: 258px; border-radius: 14px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--rar) 40%, #070b14), #060910 78%);
  border: 1px solid color-mix(in srgb, var(--rar) 36%, transparent);
}
.rip-fan i:nth-child(1) { left: 4px;  transform: rotate(-8deg); }
.rip-fan i:nth-child(2) { right: 4px; transform: rotate(8deg); }
.rip-face {
  position: absolute; left: 50%; top: 0; translate: -50% 0;
  width: 176px; height: 288px; border-radius: 16px; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--rar) 78%, #05070e), #05070e 76%);
  border: 1px solid color-mix(in srgb, var(--rar) 65%, transparent);
  box-shadow:
    inset 0 0 40px color-mix(in srgb, var(--rar) 32%, transparent),
    0 18px 44px rgba(0, 0, 0, .55), 0 0 44px var(--rar-glow);
  animation: ripBreathe 2.6s ease-in-out infinite;
}
@keyframes ripBreathe {
  0%, 100% { transform: scale(1) rotate(-.6deg); }
  50%      { transform: scale(1.025) rotate(.6deg); }
}
.rip-face::after {
  content: ''; position: absolute; left: -25%; right: -25%; top: 55%; height: 44px;
  background: color-mix(in srgb, var(--rar) 32%, transparent); transform: rotate(-11deg);
}
.rip-strip {
  position: absolute; left: 0; right: 0; top: 0; height: 34px;
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--rar) 55%, transparent) 0 6px, transparent 6px 12px),
    color-mix(in srgb, var(--rar) 22%, #0a0f1a);
  border-bottom: 2px dashed color-mix(in srgb, var(--rar) 70%, transparent);
}
.rip-mark {
  position: relative; z-index: 1; font-family: var(--font-num); font-style: italic;
  font-weight: 800; font-size: 52px; color: #fff; letter-spacing: -.02em;
  text-shadow: 0 3px 16px rgba(0, 0, 0, .65);
}
.rip-count {
  position: relative; z-index: 1; font-family: var(--font-num); font-size: 18px;
  font-weight: 800; color: color-mix(in srgb, var(--rar) 55%, #ffffff); letter-spacing: .06em;
}
.rip-flash {
  position: absolute; inset: -40px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, #fff 0%, var(--rar-glow) 35%, transparent 70%);
}
.rip-hint {
  font-family: var(--font-num); font-size: 13px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-dim); animation: ripHint 1.6s ease-in-out infinite;
}
@keyframes ripHint { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* the tear itself: strip peels up and away, packet bursts, flash pops */
.pack-rip.ripping { pointer-events: none; }
.pack-rip.ripping .rip-strip {
  animation: stripOff .5s cubic-bezier(.3, .6, .4, 1) forwards;
}
@keyframes stripOff {
  40% { transform: translate(14px, -40px) rotate(9deg); opacity: 1; }
  100% { transform: translate(60px, -160px) rotate(26deg); opacity: 0; }
}
.pack-rip.ripping .rip-face {
  animation: packBurst .6s cubic-bezier(.4, 0, .6, 1) forwards;
}
@keyframes packBurst {
  0% { transform: scale(1); }
  55% { transform: scale(1.06) rotate(-1.5deg); }
  100% { transform: scale(1.3); opacity: 0; }
}
.pack-rip.ripping .rip-fan i { transition: all .5s ease .1s; opacity: 0; transform: translateY(40px) scale(.9); }
.pack-rip.ripping .rip-flash { animation: ripFlash .55s ease-out .18s forwards; }
@keyframes ripFlash { 0% { opacity: 0; transform: scale(.5); } 35% { opacity: 1; } 100% { opacity: 0; transform: scale(1.6); } }
.pack-rip.ripping .rip-hint { opacity: 0; transition: opacity .2s; }
.reduce-motion .rip-face, .reduce-motion .rip-hint { animation: none; }

/* the stage jolt when a special or better lands */
.pack-stage.shake { animation: stageShake .42s cubic-bezier(.36, .07, .19, .97); }
@keyframes stageShake {
  10%, 90% { transform: translate(-2px, 1px); }
  20%, 80% { transform: translate(4px, -2px); }
  30%, 50%, 70% { transform: translate(-7px, 3px); }
  40%, 60% { transform: translate(7px, -3px); }
}

/* confetti for the big pulls, in the pull's own colours */
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 4; }
.confetti i {
  position: absolute; top: -24px; border-radius: 2px; opacity: .95;
  animation: confFall linear forwards;
}
@keyframes confFall {
  to { transform: translateY(105vh) rotate(660deg); opacity: .75; }
}

/* --------------------- Wheel latching (the scroll bug) --------------------- *
 *
 * `overflow: hidden` still makes a **scroll container** — it only hides the
 * scrollbar. A box clipping a decoration by a pixel or two therefore has real
 * scrollable overflow, and Chrome latches a wheel gesture onto the first such
 * box under the pointer: it scrolls that box its one available pixel, refuses
 * to chain to the page for the rest of the gesture, and the page sits still.
 *
 * That is the mouse-wheel bug people kept reporting after the `body.in-game`
 * fix. `.screen-head` sits at the top of *every* screen with 50px of clipped
 * artwork behind it — which is why "the wheel doesn't work anywhere" — and the
 * pitch, the menu tiles and the team cards each clip a few pixels of their own.
 * It never reproduced in a headless run because a synthetic wheel event is one
 * event, not a latched gesture.
 *
 * `overflow: clip` clips identically and is **not** a scroll container, so
 * there is nothing to latch onto. Every one of these boxes is clipping
 * decoration, never content anyone needs to reach. The `hidden` declarations
 * above stay as the fallback for browsers too old to know `clip` (Safari < 16),
 * which is why this block sets only `clip` and sets it last.
 *
 * Rule for new code: a box that clips for looks wants `clip`. Reach for
 * `hidden` only when something inside is genuinely meant to be scrolled. */
.screen-head, .pitch, .tile, .ts-card, .sp-face, .pack-art, .store-pack,
.coll-item, .pcard, .card-art, .confetti, .obj-row, .ch-card {
  overflow: clip;
}

/* The scroll check panel (Settings → App). A diagnostic, not chrome: plain,
   dense and readable in a screenshot, which is the only way it gets used. */
.scroll-diag {
  position: fixed; z-index: 60; right: 14px; bottom: 14px; width: min(440px, calc(100vw - 28px));
  max-height: 70vh; overflow: auto; padding: 12px 14px 14px;
  border-radius: 14px; border: 1px solid var(--line);
  background: rgba(6, 9, 18, .96); box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
  font-size: 12px; color: var(--text);
}
.scroll-diag header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.scroll-diag .sd-note { margin: 6px 0 10px; color: var(--text-dim); }
.scroll-diag .sd-grid {
  display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin-bottom: 10px;
}
.scroll-diag .sd-grid span { color: var(--text-mute); }
.scroll-diag .sd-grid b { font-family: var(--font-num); }
.scroll-diag .sd-log { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.scroll-diag .sd-log li { line-height: 1.35; }
.scroll-diag .sd-log em {
  display: block; color: var(--text-mute); font-style: normal; font-size: 10.5px;
  word-break: break-all;
}
.scroll-diag .sd-ua {
  margin: 10px 0 0; color: var(--text-mute); font-size: 10px; word-break: break-all;
}

/* ------------------- synchronized pause (online) ------------------- */
/* the queued-pause banner: pinned under the HUD on both screens at once */
.gm-queue {
  position: absolute; top: 64px; left: 50%; transform: translateX(-50%);
  z-index: 22; padding: 8px 16px; border-radius: 999px;
  background: rgba(6, 10, 18, .88); border: 1px solid rgba(34, 197, 94, .45);
  color: var(--text); font-size: 12.5px; white-space: nowrap;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  animation: fade .2s ease both;
}
.gm-queue b { color: var(--accent); }
.gm-queue[hidden] { display: none; }

/* the shared countdown in the pause menu header */
.pause-sync {
  grid-column: 1 / -1; margin: 8px 26px 0; display: flex; align-items: center; gap: 12px;
  font-size: 12.5px; color: var(--text-dim);
}
.pause-sync b {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  font-family: var(--font-num); font-size: 19px; color: var(--accent);
  border: 2px solid rgba(34, 197, 94, .55); background: rgba(34, 197, 94, .10);
}

/* ======================= Manager Career ======================= */
/* mode select */
.cm-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cm-mode {
  position: relative; text-align: left; padding: 26px 24px; border-radius: var(--radius);
  border: 1px solid var(--line); cursor: pointer; overflow: clip; color: var(--text); font: inherit;
}
.cm-mode b { display: block; font-size: 24px; letter-spacing: .04em; margin: 8px 0 10px; }
.cm-mode p { margin: 0 0 16px; color: var(--text-dim); font-size: 13.5px; line-height: 1.55; }
.cm-kicker { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.cm-cta { color: var(--accent); font-weight: 700; }
.cm-mode.is-locked { cursor: default; opacity: .78; }
.cm-mode.is-locked .cm-kicker { color: var(--text-mute); }
.cm-uc {
  display: inline-block; padding: 6px 12px; border-radius: 8px; font-size: 11px; font-weight: 800;
  letter-spacing: .12em; color: #e8c15a; border: 1px dashed rgba(232, 193, 90, .5); background: rgba(232, 193, 90, .07);
}
@media (max-width: 760px) { .cm-modes { grid-template-columns: 1fr; } }

/* manager select + custom */
.mgr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.mgr-card {
  display: grid; justify-items: center; gap: 8px; padding: 18px 12px; text-align: center;
  border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; color: var(--text); font: inherit;
}
.mgr-card:hover { border-color: var(--accent); }
.mgr-face { width: 72px; height: 72px; border-radius: 50%; overflow: clip; background: #1a2130; display: grid; place-items: center; }
.mgr-face.plus { font-size: 34px; color: var(--accent); border: 1px dashed rgba(34, 197, 94, .5); }
.mgr-sub { font-size: 11.5px; color: var(--text-mute); display: flex; gap: 6px; align-items: center; }
.cs-layout { display: grid; grid-template-columns: 260px 1fr; gap: 16px; align-items: start; }
.cs-preview { display: grid; justify-items: center; gap: 8px; padding: 22px; border-radius: var(--radius); text-align: center; }
.csp-face { width: 96px; height: 96px; border-radius: 50%; overflow: clip; background: #1a2130; }
.csp-suit { display: flex; gap: 8px; align-items: center; font-size: 11px; color: var(--text-mute); }
.csp-suit i { width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--line); }
.cs-form { display: grid; gap: 12px; padding: 20px; border-radius: var(--radius); }
.cs-form label { display: grid; gap: 5px; font-size: 12px; color: var(--text-dim); }
.cs-form input, .cs-form select {
  padding: 9px 11px; border-radius: 9px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, .05); color: var(--text); font: inherit;
}
.cs-row { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 10px; font-size: 12px; color: var(--text-dim); }
.cs-swatches { display: flex; gap: 7px; }
.cs-sw { width: 26px; height: 26px; border-radius: 8px; border: 2px solid transparent; cursor: pointer; color: #cfd6e4; font-size: 10px; }
.cs-sw.on { border-color: var(--accent); }
.cs-check, .cs-form .cs-check { flex-direction: row; display: flex; align-items: center; gap: 8px; }
/* v96: `.cs-form label` (a grid) outranked this, so the Facial hair box sat alone
   mid-form with its label on the line below */
.cs-form .cs-check input { padding: 0; width: 18px; height: 18px; accent-color: var(--accent); }
@media (max-width: 760px) { .cs-layout { grid-template-columns: 1fr; } }

/* club select */
.cc-league h3 { margin: 22px 2px 10px; font-size: 15px; }
.cc-league h3 span { color: var(--text-mute); font-size: 12px; font-weight: 500; margin-left: 8px; }
.cc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.cc-card {
  position: relative; display: grid; justify-items: center; gap: 8px; padding: 18px 14px;
  border-radius: var(--radius); border: 1px solid var(--line); cursor: pointer; color: var(--text);
  font: inherit; overflow: clip; isolation: isolate;
}
.cc-card::before { content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(150deg, color-mix(in srgb, var(--team) 26%, transparent), transparent 55%); }
.cc-card:hover { border-color: var(--team); }
.cc-meta { display: flex; gap: 16px; }
.cc-meta span { display: grid; justify-items: center; font-size: 10px; color: var(--text-mute); }
.cc-meta i { font-style: normal; font-family: var(--font-num); font-size: 14px; color: var(--text); }
.cc-cta { font-size: 12px; color: var(--accent); font-weight: 700; }

/* hub bits reused from old career styles; the new ones: */
.ch-coins { color: #e8c15a; }
.ov-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
@media (max-width: 860px) { .ov-cols { grid-template-columns: 1fr; } }
.ov-empty { color: var(--text-mute); font-size: 12.5px; }
.ov-meters { display: grid; gap: 8px; margin-top: 14px; }
.ov-meter { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 10px; font-size: 11.5px; color: var(--text-dim); }
.ov-meter i { height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .08); overflow: clip; display: block; }
.ov-meter b { display: block; height: 100%; background: linear-gradient(90deg, #16a34a, #29d364); }
/* v160: `.hint` pulls itself up 6 px (it usually sits under a heading); under a meter row
   that put the Player Career trust line through the "Manager trust" label */
.ov-meters + .hint { margin-top: 10px; }
.rr { display: flex; justify-content: space-between; padding: 7px 4px; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.rr b { font-family: var(--font-num); }
.rr.win b { color: var(--accent); } .rr.loss b { color: #e25c5c; } .rr.draw b { color: var(--text-mute); }
.ltable { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ltable th { text-align: right; font-size: 10px; color: var(--text-mute); padding: 4px; }
.ltable td { padding: 6px 4px; border-top: 1px solid var(--line); text-align: right; font-family: var(--font-num); }
.ltable .lt-club { text-align: left; display: flex; gap: 7px; align-items: center; font-family: var(--font); }
.ltable tr.mine td { background: rgba(34, 197, 94, .08); }
.cq-rows { display: grid; }
.cq-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.cq-ovr { width: 34px; text-align: center; font-family: var(--font-num); font-size: 15px; border-radius: 8px; padding: 3px 0; background: rgba(255,255,255,.06); }
.cq-pos { width: 34px; color: var(--text-mute); font-size: 11px; }
.cq-name { flex: 1; min-width: 0; overflow: clip; text-overflow: ellipsis; white-space: nowrap; }
.cq-name small { display: block; color: var(--text-mute); font-size: 10.5px; }
.cq-nat { display: flex; gap: 5px; align-items: center; color: var(--text-mute); font-size: 11px; }
.cq-form.up { color: var(--accent); } .cq-form.dn { color: #e25c5c; }
.cq-val, .cq-wage { font-family: var(--font-num); font-size: 12px; }
.cq-con { font-family: var(--font-num); } .cq-con.warn { color: #e8c15a; }
.tm-tools { display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px; margin-bottom: 10px; }
.tm-tools input, .tm-tools select {
  padding: 9px 11px; border-radius: 9px; border: 1px solid var(--line);
  background: rgba(255,255,255,.05); color: var(--text); font: inherit; font-size: 12.5px;
}
.neg-facts { display: flex; flex-wrap: wrap; gap: 18px; margin: 4px 0 12px; }
.neg-facts span { display: grid; font-size: 10.5px; color: var(--text-mute); }
.neg-facts b { font-size: 15px; font-family: var(--font-num); color: var(--text); }
.neg-note { font-size: 13px; color: var(--text-dim); }
.neg-offer { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin: 12px 0; }
.neg-offer input, .neg-offer select { padding: 10px 12px; border-radius: 9px; border: 1px solid var(--line);
  background: rgba(255,255,255,.05); color: var(--text); font: inherit; width: 170px; }
.neg-offer label { display: grid; gap: 4px; font-size: 11px; color: var(--text-mute); }
.neg-round { font-size: 11px; color: var(--text-mute); }
.neg.is-done h2 { color: var(--accent); }

/* ---------- matchday: the touchline HUD ---------- */
/* A diamond of four fat shout buttons around a hub. Semi-transparent at rest,
   solid under the pointer; every slot has its number stitched on, because on a
   keyboard the wheel is played 1–4 without ever mousing to it. */
.mgr-hud { position: absolute; right: 16px; bottom: 16px; z-index: 24; display: grid; justify-items: end; gap: 12px; }
.mgr-hud[hidden] { display: none; }
.mgr-wheel {
  position: relative; width: 292px; height: 226px; opacity: .88; transition: opacity .2s;
}
.mgr-wheel:hover { opacity: 1; }
.mw-hub {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  font-size: 7.5px; font-weight: 800; letter-spacing: .14em; color: var(--text-mute);
  background: rgba(6, 10, 18, .78); border: 1px solid var(--line);
}
.mw-opt {
  position: absolute; width: 118px; padding: 11px 6px 10px; border-radius: 13px; cursor: pointer;
  border: 1px solid rgba(34, 197, 94, .5); background: rgba(7, 11, 19, .93); color: var(--text);
  font: inherit; font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-align: center;
  line-height: 1.25; box-shadow: 0 6px 22px rgba(0, 0, 0, .45);
}
.mw-opt:hover, .mw-opt:focus-visible { background: rgba(34, 197, 94, .22); border-color: var(--accent); transform: scale(1.05); }
.mw-opt i {
  position: absolute; top: -7px; left: -7px; width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; font-style: normal; font-size: 10px;
  font-family: var(--font-num); color: #04210f; background: var(--accent);
}
.mw-opt.p0 { top: 0; left: 87px; }                    /* N */
.mw-opt.p1 { top: 85px; right: 0; }                   /* E */
.mw-opt.p2 { bottom: 0; left: 87px; }                 /* S */
.mw-opt.p3 { top: 85px; left: 0; }                    /* W */
.mgr-meters { display: grid; gap: 6px; width: 210px; }
.mm {
  display: grid; grid-template-columns: 52px 1fr 26px; gap: 8px; align-items: center;
  font-size: 8.5px; letter-spacing: .12em; color: var(--text-dim); font-weight: 700;
  background: rgba(6, 10, 18, .72); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 12px;
}
.mm i { height: 7px; border-radius: 4px; background: rgba(0, 0, 0, .55); overflow: clip; display: block; }
.mm b { display: block; height: 100%; background: linear-gradient(90deg, #d3a622, #29d364); transition: width .4s; }
.mm b.low { background: #e25c5c; }
.mm b.high { background: linear-gradient(90deg, #16a34a, #29d364); }
.mm em { font-style: normal; font-family: var(--font-num); font-size: 12px; color: var(--text); text-align: right; }
.mgr-cam { position: absolute; right: 0; top: -38px; }
.mgr-shout {
  position: absolute; left: 50%; top: 20%; transform: translateX(-50%); z-index: 23;
  padding: 10px 22px; border-radius: 999px; font-size: 17px; font-weight: 900; letter-spacing: .06em;
  color: #fff; background: rgba(6,10,18,.82); border: 1px solid rgba(34,197,94,.5);
  text-shadow: 0 2px 12px rgba(0,0,0,.6); animation: shoutPop .3s cubic-bezier(.2,1.4,.4,1) both;
}
.mgr-shout[hidden] { display: none; }
@keyframes shoutPop { from { transform: translateX(-50%) scale(.7); opacity: 0; } }
.mgr-talk { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(3,5,10,.45); }
.mgr-talk[hidden] { display: none; }
.mt-card { width: min(640px, 92%); padding: 26px; border-radius: 18px; }
.mt-kicker { font-size: 11px; letter-spacing: .14em; color: var(--accent); text-transform: uppercase; }
.mt-card h3 { margin: 8px 0 16px; font-size: 21px; }
.mt-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mt-opt {
  text-align: left; padding: 14px; border-radius: 12px; border: 1px solid var(--line); cursor: pointer;
  background: rgba(255,255,255,.04); color: var(--text); font: inherit;
}
.mt-opt:hover { border-color: var(--accent); background: rgba(34,197,94,.1); }
.mt-opt b { display: block; font-size: 13px; letter-spacing: .05em; margin-bottom: 4px; }
.mt-opt span { font-size: 11.5px; color: var(--text-dim); }
.mgr-ft-note { font-size: 10.5px; color: var(--text-mute); }
/* negotiation: the two-sided money readout and the patience bar */
.neg-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0 4px; }
.neg-vs > div { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.03); }
.neg-vs span { display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 4px; }
.neg-vs b { font-family: var(--font-num); font-size: 19px; }
.neg-vs .nv-you b { color: var(--accent); }
.neg-vs .nv-you b.bad { color: #e25c5c; }
.neg-tension { display: grid; grid-template-columns: 62px 1fr auto; gap: 10px; align-items: center; margin: 8px 0 2px; font-size: 10.5px; color: var(--text-mute); }
.neg-tension i { height: 7px; border-radius: 4px; background: rgba(226,92,92,.25); overflow: clip; display: block; }
.neg-tension b { display: block; height: 100%; background: linear-gradient(90deg, #29d364, #16a34a); transition: width .3s; }
.neg-tension.warm b { background: #d3a622; }
.neg-tension.hot b { background: #e25c5c; }
.neg-tension em { font-style: normal; }
.neg-tension.hot em { color: #e25c5c; font-weight: 700; }
.tm-frozen { font-family: var(--font-num); font-size: 11px; color: #e25c5c; border: 1px solid rgba(226,92,92,.4); border-radius: 8px; padding: 4px 8px; }
/* the shout cooldown: the wheel dims and its hub counts back down to SHOUT */
.mgr-wheel.cooling .mw-opt { opacity: .38; pointer-events: none; filter: saturate(.4); }
.mgr-wheel.cooling .mw-hub { border-color: var(--accent); color: var(--accent); font-size: 15px; font-family: var(--font-num); }
/* walking the technical area on touch */
.mgr-walk { position: absolute; left: 14px; bottom: 16px; z-index: 24; display: flex; gap: 12px; }
.mgr-walk[hidden] { display: none; }
.mw-arrow {
  width: 58px; height: 58px; border-radius: 50%; border: 1px solid rgba(34, 197, 94, .45);
  background: rgba(7, 11, 19, .8); color: var(--text); font-size: 19px; cursor: pointer;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.mw-arrow:active { background: rgba(34, 197, 94, .25); }
/* phones: everything smaller, nothing overlapping */
@media (max-width: 900px), (max-height: 540px) {
  .mt-opts { grid-template-columns: 1fr; }
  .mgr-hud { right: 10px; bottom: 10px; gap: 8px; }
  .mgr-wheel { width: 208px; height: 164px; }
  .mw-opt { width: 88px; font-size: 9px; padding: 8px 4px 7px; border-radius: 11px; }
  .mw-opt.p0 { left: 60px; top: 0; }
  .mw-opt.p1 { top: 62px; }
  .mw-opt.p2 { left: 60px; }
  .mw-opt.p3 { top: 62px; }
  .mw-hub { width: 34px; height: 34px; font-size: 6.5px; }
  .mgr-meters { width: 164px; }
  .mm { padding: 4px 9px; grid-template-columns: 42px 1fr 22px; font-size: 7.5px; }
  .mm em { font-size: 10.5px; }
  .mgr-shout { font-size: 13px; padding: 8px 16px; top: 14%; }
  .mgr-walk { left: 10px; bottom: 10px; }
  .mw-arrow { width: 50px; height: 50px; }
  .mgr-cam { top: -32px; }
}

/* ------------------- Career hub, redesigned ------------------- */
.chub {
  position: relative; border-radius: var(--radius); overflow: clip; isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--team) 45%, var(--line));
  background:
    radial-gradient(120% 180% at 0% 0%, color-mix(in srgb, var(--team) 30%, transparent), transparent 55%),
    radial-gradient(130% 200% at 100% 100%, color-mix(in srgb, var(--team2) 26%, transparent), transparent 50%),
    rgba(8, 11, 20, .85);
  padding: 20px 22px 16px; margin-bottom: 14px;
}
.chub::after {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background: linear-gradient(115deg, transparent 55%, color-mix(in srgb, var(--team) 22%, transparent) 56%, transparent 72%);
}
.chub-top { display: flex; align-items: center; gap: 16px; }
.chub-crest { filter: drop-shadow(0 6px 20px rgba(0, 0, 0, .5)); }
.chub-id { flex: 1; min-width: 0; display: grid; gap: 2px; }
.chub-id b { font-size: 22px; letter-spacing: -.01em; }
.chub-id span { font-size: 12px; color: var(--text-dim); }
.chub-mgr { color: var(--accent) !important; font-weight: 600; }
.chub-coins { text-align: right; display: grid; gap: 2px; }
.chub-coins span { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-mute); }
.chub-coins b { font-family: var(--font-num); font-size: 21px; color: #e8c15a; }
.chub-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chip {
  padding: 5px 12px; border-radius: 999px; font-size: 11px; color: var(--text-dim);
  border: 1px solid var(--line); background: rgba(0, 0, 0, .3);
}
.chip b { font-family: var(--font-num); color: var(--text); margin-right: 3px; }
.chip.good b { color: var(--accent); }
.chip.bad b { color: #e25c5c; }

/* segmented nav — in flow, never the fixed dock */
.cnav {
  display: flex; gap: 4px; padding: 5px; margin-bottom: 14px;
  border-radius: 14px; border: 1px solid var(--line); background: rgba(8, 11, 20, .7);
  overflow-x: auto; scrollbar-width: none;
}
.cnav::-webkit-scrollbar { display: none; }
.cnav-b {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 12px; border-radius: 10px; border: none; cursor: pointer; white-space: nowrap;
  background: none; color: var(--text-dim); font: inherit; font-size: 12.5px; font-weight: 600;
}
.cnav-b i { font-style: normal; font-size: 13px; opacity: .8; }
.cnav-b.on { background: rgba(34, 197, 94, .16); color: var(--text); box-shadow: inset 0 0 0 1px rgba(34, 197, 94, .4); }
.cnav-b.on i { color: var(--accent); }

/* the matchday hero */
.cfix {
  position: relative; border-radius: var(--radius); overflow: clip; isolation: isolate;
  border: 1px solid var(--line); padding: 22px 20px;
  background:
    radial-gradient(90% 160% at 12% 50%, color-mix(in srgb, var(--th) 24%, transparent), transparent 55%),
    radial-gradient(90% 160% at 88% 50%, color-mix(in srgb, var(--ta) 24%, transparent), transparent 55%),
    rgba(8, 11, 20, .8);
  display: grid; gap: 18px; justify-items: center; text-align: center;
}
.cfix-kicker { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute); }
.cfix-teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 26px; width: min(460px, 100%); }
.cfix-t { display: grid; justify-items: center; gap: 6px; }
.cfix-t b { font-size: 18px; letter-spacing: .04em; }
.cfix-t span { font-size: 11px; color: var(--text-mute); font-family: var(--font-num); }
.cfix-vs { font-size: 13px; font-weight: 800; color: var(--text-mute); letter-spacing: .1em; }
.cfix-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
@media (max-width: 640px) {
  .chub-top { flex-wrap: wrap; }
  .chub-coins { text-align: left; }
  .cnav-b { font-size: 11px; padding: 9px 8px; }
  .cnav-b i { display: none; }
}

/* pairing a watch: one code, big enough to read at arm's length */
.pair-overlay { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(3, 5, 10, .7); }
.pair-card { padding: 26px 30px; border-radius: 18px; display: grid; gap: 10px; justify-items: center; text-align: center; }
.pair-kicker { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.pair-code { font-family: var(--font-num); font-size: 42px; letter-spacing: .12em; }
.pair-note { font-size: 12px; color: var(--text-mute); }
.ol-acct-btns { display: flex; gap: 8px; }
/* v184: deleting an account */
.btn.danger { color: #ff8a8a; border-color: rgba(255, 110, 110, .45); }
.btn.primary.danger { background: #c8333b; color: #fff; border-color: #c8333b; }
.del-card { width: min(380px, calc(100vw - 32px)); }
.del-card input { width: 100%; }
/* v191: the reminders question (menu.js askReminders), once, in the iPhone app */
/* v194: the penalty duel (screens/pens.js); the goal and the pips are the shootout's (.so-*) */
.pens-panel { max-width: 640px; margin: 0 auto; padding: 18px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.pens-status { margin: 0; font-weight: 600; }
.pens-code { font: 800 44px/1 var(--font-cond, var(--font)); letter-spacing: .3em; color: var(--accent); }
.pens-clock { display: block; width: min(420px, 100%); height: 4px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; }
.pens-clock b { display: block; height: 100%; width: 0; background: var(--accent); }
.pens-act { min-height: 48px; display: flex; justify-content: center; }
.pens-dives { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.pens-dives .btn { min-width: 96px; }
.pens-leave { margin-top: 6px; opacity: .8; }
.pens-end { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.pens-end b { font-size: 22px; }
.pens-end.good b { color: var(--good, #3ddc97); }
.pens-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
/* a sideways phone: no screen head, the goal on the left, what to do on the right — the buttons above the fold */
@media (max-height: 560px) and (orientation: landscape) {
  .pens-screen .screen-head { display: none; }
  .pens-screen .pens-panel { max-width: 880px; padding: 10px 16px; }
  .pens-duel { display: grid; grid-template-columns: auto minmax(220px, 1fr); grid-template-areas: 'score status' 'pips act' 'goal act' 'clock leave';
    column-gap: 24px; row-gap: 6px; align-items: center; justify-items: center; width: 100%; }
  .pens-duel .so-score { grid-area: score; } .pens-duel .so-pips { grid-area: pips; } .pens-duel .so-goal { grid-area: goal; margin: 0; }
  .pens-duel .pens-clock { grid-area: clock; } .pens-duel .so-status { grid-area: status; } .pens-duel .pens-act { grid-area: act; align-self: center; }
  .pens-duel .pens-leave { grid-area: leave; margin: 0; }
}
/* v193: the ghost defence line on the online profile card */
.ol-id .ol-def { display: block; margin-top: 2px; font-size: 12px; color: var(--text-dim); letter-spacing: .02em; }
.remind-ask { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 60;
  width: min(560px, calc(100vw - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))); display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; border-radius: 16px; box-shadow: 0 12px 40px rgba(0,0,0,.55); animation: raIn .35s cubic-bezier(.2,.9,.2,1) both; }
.remind-ask .ra-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.remind-ask .ra-text span { color: var(--text-dim); font-size: 13px; line-height: 1.3; }
.remind-ask .ra-btns { display: flex; gap: 8px; flex: none; }
@keyframes raIn { from { opacity: 0; transform: translate(-50%, 14px); } }
@media (prefers-reduced-motion: reduce) { .remind-ask { animation: none; } }
.del-btns { display: flex; gap: 8px; justify-content: center; }

/* ------------------------------ crash card ------------------------------ */
.crash {
  position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 16px;
  background: rgba(3, 6, 12, .82); backdrop-filter: blur(6px);
}
.crash-card {
  width: min(460px, 100%); border-radius: 18px; padding: 22px 22px 16px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03));
  border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 30px 80px -30px #000;
}
.crash-eyebrow { margin: 0 0 4px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #f87171; }
.crash-card h2 { margin: 0 0 8px; font-size: 20px; }
.crash-msg { margin: 0 0 10px; opacity: .85; }
.crash-card details { margin-bottom: 12px; font-size: 12px; opacity: .8; }
.crash-detail { white-space: pre-wrap; word-break: break-word; max-height: 140px; overflow: auto; font-size: 11px; margin: 6px 0 0; }
.crash-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.crash-foot { margin: 12px 0 0; font-size: 11px; opacity: .55; }

/* ================================ v68: Today ================================ */
.tile-badge { position: absolute; top: 8px; right: 8px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--bad); color: #fff; font: 700 11px/20px var(--font-num); text-align: center; z-index: 2; }
.tile-sub { display: block; font-size: 10.5px; color: var(--text-dim); margin-top: 2px; position: relative; z-index: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.today { display: grid; gap: 14px; }
@media (min-width: 900px) { .today { grid-template-columns: 1fr 1fr; } .today .season, .today .ev-card { grid-column: 1 / -1; } }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 12px; }
.cal-day { border-radius: var(--radius-sm); padding: 8px 4px; text-align: center; background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.cal-day span { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-mute); }
.cal-day b { font-family: var(--font-num); font-size: 11.5px; line-height: 1.2; }
.cal-day.past { opacity: .5; }
.cal-day.now { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 18px var(--accent-soft); }
.cal-day.done { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
@media (max-width: 560px) { .cal { grid-template-columns: repeat(4, 1fr); } }
.ev-card, .ev-shelf { border-color: color-mix(in srgb, var(--ev) 45%, transparent); background: linear-gradient(140deg, color-mix(in srgb, var(--ev) 18%, transparent), var(--panel)); }
.ev-kicker { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ev, var(--accent)); }
.ev-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.ev-feat { display: flex; flex-direction: column; gap: 2px; }
.ev-feat b { font-family: var(--font-num); font-size: 22px; }
.ev-feat span:last-child { font-size: 12px; color: var(--text-dim); }
.ev-pack { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ev-pack-body { display: flex; flex-direction: column; gap: 3px; }
.ev-pack-body b { font-size: 16px; }
/* v161: the promise pills are coloured by --pk, which only the pack tiles set — here it was
   undefined, so the pills had no fill or border and read as oddly indented centred text */
.ev-pack-body { --pk: var(--ev, var(--accent)); align-items: flex-start; }
.obj-list { display: grid; gap: 8px; }
.obj { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 4px 12px; align-items: center; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--panel); border: 1px solid var(--line); margin-bottom: 8px; }
.obj-text { display: flex; flex-direction: column; gap: 2px; }
.obj-text span { font-size: 12px; color: var(--text-dim); }
.obj-bar { grid-column: 1 / -1; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.obj-bar i { display: block; height: 100%; background: var(--accent); border-radius: 4px; transition: width .4s; }
.obj-count { font-family: var(--font-num); font-weight: 700; color: var(--text-dim); }
.obj.done { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.obj.done .obj-count { color: var(--accent); }
.season-bar { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: center; margin-bottom: 12px; }
.season-bar b { font-family: var(--font-num); font-size: 26px; grid-row: span 2; }
.season-bar b small { font-size: 14px; color: var(--text-mute); }
.season-track { height: 8px; border-radius: 8px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.season-track i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-deep), var(--accent)); border-radius: 8px; }
.season-bar span { font-size: 12px; color: var(--text-dim); }
.tiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 6px; margin-bottom: 12px; }
.tier { border-radius: var(--radius-sm); padding: 8px 6px; background: var(--panel); border: 1px solid var(--line); color: var(--text); font: inherit; display: flex; flex-direction: column; gap: 3px; align-items: center; text-align: center; cursor: default; }
.tier b { font-family: var(--font-num); font-size: 15px; }
.tier span { font-size: 10.5px; color: var(--text-dim); line-height: 1.2; }
.tier.locked { opacity: .45; }
.tier.claim { border-color: var(--accent); background: var(--accent-soft); cursor: pointer; box-shadow: 0 0 16px var(--accent-soft); animation: tierPulse 1.6s ease-in-out infinite; }
.tier.done { border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.tier.done b::after { content: ' ✓'; color: var(--accent); }
.tier.milestone { border-color: var(--warn); }
@keyframes tierPulse { 50% { transform: translateY(-2px); } }
.claim-row, .wl-claim, .wl-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.claim-row:last-child, .wl-row:last-child { border-bottom: none; }
.claim-row div, .wl-row div { display: flex; flex-direction: column; gap: 2px; }
.claim-row span, .wl-row span { font-size: 12px; color: var(--text-dim); }
.wl-row b { font-family: var(--font-num); font-size: 20px; }

/* trophy room */
.trophies { display: grid; gap: 14px; }
.shelf-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.trophy { display: flex; flex-direction: column; gap: 5px; align-items: center; text-align: center; padding: 14px 10px 12px; border-radius: var(--radius-sm); background: var(--panel); border: 1px solid var(--line); opacity: .62; }
.trophy.earned { opacity: 1; border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.trophy.claimable { border-color: var(--accent); box-shadow: 0 0 20px var(--accent-soft); }
.trophy b { font-size: 13.5px; }
.trophy span { font-size: 11.5px; color: var(--text-dim); line-height: 1.3; min-height: 30px; }
.trophy em { font-style: normal; font-size: 11px; color: var(--text-mute); }
.trophy-bar { width: 100%; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.trophy-bar i { display: block; height: 100%; background: var(--accent); }
.cup { color: var(--text-mute); }
.cup.lit.bronze { color: #c88a4a; filter: drop-shadow(0 0 8px rgba(200, 138, 74, .6)); }
.cup.lit.silver { color: #d6dde6; filter: drop-shadow(0 0 8px rgba(214, 221, 230, .6)); }
.cup.lit.gold { color: #f4c95d; filter: drop-shadow(0 0 10px rgba(244, 201, 93, .7)); }

/* weekend league */
.wl { display: grid; gap: 14px; }
.wl-hero { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.wl-big { display: flex; flex-direction: column; align-items: center; min-width: 90px; }
.wl-big b { font-family: var(--font-num); font-size: 52px; line-height: 1; }
.wl-big span { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-mute); }
.wl-info { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 200px; }
.wl-info > b { font-family: var(--font-num); font-size: 26px; }
.wl-info span { font-size: 12.5px; color: var(--text-dim); }
.div-pips i.lost { background: rgba(255, 93, 108, .45); }
.wl-ranks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.wl-rank { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.wl-rank.on { border-color: var(--accent); background: var(--accent-soft); }
.wl-rank b { font-family: var(--font-num); font-size: 16px; }
.wl-rank span { font-size: 11px; color: var(--text-mute); }
.wl-rank em { font-style: normal; font-size: 11.5px; color: var(--text-dim); }
.lb-row { display: grid; grid-template-columns: 28px 1fr auto auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.lb-row i { font-style: normal; font-family: var(--font-num); color: var(--text-mute); }
.lb-row em { font-style: normal; color: var(--accent); font-size: 12px; }

/* evolve + chemistry */
.evo { margin: 10px 0 4px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--panel); border: 1px solid var(--line); }
.evo-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.evo-kicker { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.evo-head > b { font-family: var(--font-num); font-size: 22px; }
.evo-head > b small { font-size: 12px; color: var(--accent); }
.evo-pips { display: flex; gap: 4px; }
.evo-pips i { width: 14px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .12); }
.evo-pips i.on { background: var(--accent); box-shadow: 0 0 8px var(--accent-soft); }
.evo-max { font-size: 11.5px; color: var(--text-dim); margin-left: auto; }
.evo-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.evo-actions .btn small { display: block; font-size: 10px; opacity: .7; font-weight: 500; }
.slot-lvl { font-style: normal; font-size: 8px; color: var(--accent); vertical-align: top; }
.sbc-card { font-size: 11.5px; color: #ff2e88; font-weight: 700; }
.evo .hint { margin: 10px 0 0; }

/* ============================ v69: match presentation ============================ */
.gm-feed {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); width: min(560px, 80vw);
  display: flex; flex-direction: column; gap: 2px; pointer-events: none; z-index: 4; text-align: center;
}
.gm-feed span { font-size: 12.5px; color: rgba(255, 255, 255, .55); text-shadow: 0 1px 6px #000; line-height: 1.3; transition: opacity .6s; }
.gm-feed span.now { color: #fff; font-size: 14px; font-weight: 600; }
.gm-feed span i { font-style: normal; font-family: var(--font-num); color: var(--accent); margin-right: 6px; font-size: 11px; }
.gm-feed:not(.flash) span { opacity: .25; }
.gm-feed.flash span { opacity: 1; }
.gm-setpiece {
  position: absolute; top: 52px; left: 50%; transform: translateX(-50%); z-index: 5; padding: 8px 14px 8px 12px;
  border-radius: 12px; background: rgba(5, 8, 16, .78); border: 1px solid rgba(255, 255, 255, .18); backdrop-filter: blur(6px);
  display: flex; align-items: center; gap: 10px; pointer-events: none; max-width: 92vw;
}
.gm-setpiece b { font-family: var(--font-num); font-size: 16px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.gm-setpiece span { font-size: 12px; color: var(--text-dim); }
.gm-setpiece .sp-clock { font-style: normal; font-family: var(--font-num); font-size: 15px; min-width: 22px; text-align: center; color: #fff; }
.gm-hints {
  position: absolute; top: 52px; right: 12px; z-index: 4; max-width: 260px; padding: 7px 10px; border-radius: 10px;
  background: rgba(35, 197, 94, .14); border: 1px solid rgba(35, 197, 94, .4); font-size: 11.5px; line-height: 1.35; color: #dff; pointer-events: none;   /* v97: an inherited tight line-height let three-line tips spill over the border */
}
.gm-hints kbd {
  display: inline-block; min-width: 20px; padding: 1px 6px; margin: 0 1px; border-radius: 6px; text-align: center;
  font: 800 11px/1.5 var(--font-num); color: #06140c; background: var(--accent); box-shadow: 0 2px 0 rgba(0, 0, 0, .35);
}
.gm-hints { font-size: 13px; font-weight: 600; white-space: nowrap; }
@media (max-width: 700px) { .gm-hints { display: none; } .gm-feed { bottom: 108px; width: 70vw; } .gm-feed span { font-size: 11px; } .gm-feed span.now { font-size: 12px; } }
.tbtn.t-skill { grid-area: skill; } .tbtn.t-lob { grid-area: lob; }
.tbtn.t-skill, .tbtn.t-lob { width: 50px; height: 50px; opacity: .85; }
.tbtn.t-skill b, .tbtn.t-lob b { font-size: 9px; }
.p-sub { margin: 14px 0 6px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-mute); }
.p-log { list-style: none; margin: 0; padding: 0; max-height: 160px; overflow: auto; font-size: 12.5px; }
.p-log li { padding: 3px 0; border-bottom: 1px solid var(--line); }
.p-log li i { font-style: normal; font-family: var(--font-num); color: var(--accent); margin-right: 8px; font-size: 11px; }

/* ============================== v69: career v2 ============================== */
.press { border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.press-q { font-size: 16px; font-style: italic; margin: 0 0 10px; }
.press-a { display: flex; gap: 8px; flex-wrap: wrap; }
.offer { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 6px 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.offer > div:first-child { display: flex; flex-direction: column; gap: 2px; }
.offer > div:first-child span { font-size: 12px; color: var(--text-dim); }
.offer-fee { font-family: var(--font-num); font-size: 20px; }
.offer-fee small { font-size: 12px; color: var(--accent); }
.offer-actions { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.scout-leagues { display: flex; gap: 6px; flex-wrap: wrap; }
.ov-offer { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.wl-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.wl-search { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--accent-soft); font-size: 13px; }

/* ---- v70: venue line on the loading veil, division tags on the club rails ---- */
.gl-venue { margin: 6px 0 10px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); text-align: center; }
.gl-note { margin: -4px auto 10px; max-width: 34ch; font-size: 12px; line-height: 1.4; color: var(--text-dim); text-align: center; }
.ts-rail + .ts-rail { margin-top: 6px; }
.ts-rail-tag { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px; display: inline-grid; place-items: center; font-family: var(--font-num); font-size: 11px; font-weight: 700; color: var(--text-dim); background: rgba(255,255,255,.06); border: 1px solid var(--line); align-self: center; }

/* ---- v70: foil and holographic cards ----
   Special, Star and Icon cards carry a foil: a conic rainbow that moves with
   the card's tilt (`--tx`/`--ty`, set by the pointer on hover) and a fine
   diagonal grating. Pure CSS, one extra layer per card, no images. */
.pcard.rar-special::before, .pcard.rar-star::before, .pcard.rar-icon::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; z-index: 1;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 2px, transparent 2px 6px),
    conic-gradient(from calc(var(--ty, 0) * 60deg + var(--tx, 0) * 120deg) at calc(50% + var(--tx, 0) * 40%) calc(50% + var(--ty, 0) * 40%),
      rgba(255, 90, 160, .38), rgba(255, 220, 90, .36), rgba(90, 255, 200, .36), rgba(90, 160, 255, .38), rgba(200, 90, 255, .36), rgba(255, 90, 160, .38));
  mix-blend-mode: screen; opacity: .28; transition: opacity .25s;
}
.pcard.rar-icon::before { opacity: .42; }
.pcard.is-tilting::before { opacity: .62; }
.pcard.is-tilting { transform: perspective(700px) rotateX(calc(var(--ty, 0) * -10deg)) rotateY(calc(var(--tx, 0) * 12deg)); transition: transform .06s; }
.reduce-motion .pcard.is-tilting { transform: none; }
.pcard.rar-star::before { animation: foilDrift 6s ease-in-out infinite alternate; }
.pcard.rar-icon::before { animation: foilDrift 4.5s ease-in-out infinite alternate; }
@keyframes foilDrift { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(40deg); } }
.reduce-motion .pcard::before { animation: none; }

/* the pack reveal turns the card over in 3D before the walk-out */
.walkout-card { transform-style: preserve-3d; perspective: 900px; }
.walkout-card.flipping { animation: cardFlip .9s cubic-bezier(.3, .9, .25, 1) both; }
.card-back {
  position: absolute; inset: 0; border-radius: 16px; z-index: 5; backface-visibility: hidden;
  transform: rotateY(180deg);
  background:
    radial-gradient(ellipse at 50% 35%, color-mix(in srgb, var(--rar, #7af7ff) 45%, transparent), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 3px, transparent 3px 9px),
    linear-gradient(180deg, #0d1426, #070a14);
  border: 1px solid color-mix(in srgb, var(--rar, #7af7ff) 55%, transparent);
  display: grid; place-items: center;
  font-family: var(--font-num); font-weight: 800; font-style: italic; font-size: 34px; letter-spacing: -.04em; color: #f6f9ff;
}
.walkout-card.flipping .pcard { backface-visibility: hidden; }
@keyframes cardFlip {
  0% { transform: rotateY(180deg) scale(.86); }
  60% { transform: rotateY(-12deg) scale(1.02); }
  100% { transform: rotateY(0deg) scale(1); }
}
.reduce-motion .walkout-card.flipping { animation: none; }
.reduce-motion .card-back { display: none; }

/* ---- v70: the title-screen footballer ---- */
.menu-screen { position: relative; }
.menu-hero {
  position: absolute; right: -6px; top: -26px; width: 230px; height: 330px; pointer-events: none; z-index: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
}
.menu-hero-canvas { width: 230px; height: 300px; display: block; opacity: 0; transition: opacity .8s ease; }
.menu-hero-canvas.is-live { opacity: 1; }
.menu-hero-tag {
  font-family: var(--font-num); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-dim); opacity: 0; transition: opacity .8s ease .2s; text-shadow: 0 1px 8px rgba(0,0,0,.8);
}
.menu-hero-canvas.is-live + .menu-hero-tag { opacity: 1; }
/* v126: the hero stands where the right-hand palm would; one of them has to give way */
.menu-screen:has(.menu-hero-canvas.is-live) .sz-palm.flip { display: none; }
.menu-wordmark, .hub, .menu-screen .disclaimer { position: relative; z-index: 1; }
/* On a wide screen the figure gets a column of his own to the right of the
   hub, full height, so all of him is in frame; on anything narrower he stands
   behind the tiles, head and shoulders over the top of them. */
@media (min-width: 1000px) {
  .menu-wordmark, .hub { margin-right: 250px; }
  .menu-hero { width: 250px; height: calc(100% + 20px); top: -30px; right: -10px; justify-content: center; }
  .menu-hero-canvas { width: 250px; height: min(560px, 100%); }
}
@media (max-width: 720px) {
  .menu-hero { width: 150px; height: 220px; top: -18px; right: -10px; }
  .menu-hero-canvas { width: 150px; height: 200px; }
}
@media (max-width: 480px) { .menu-hero { display: none; } }

/* ---- v70: touch-first hit targets ---- */
@media (pointer: coarse) {
  .seg button { min-height: 42px; }
  .btn { min-height: 44px; }
  .ts-chip { padding: 5px; }
  .tile.t-mini { min-height: 78px; }
}

/* ---- v70: the World screen ---- */
.wtabs { margin: 0 0 14px; flex-wrap: wrap; }
.wtabs button { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.wtabs button i { font-style: normal; font-size: 11px; color: var(--text-dim); }
.wtable { width: 100%; border-collapse: collapse; font-size: 13px; }
.wtable th, .wtable td { padding: 7px 5px; text-align: center; border-bottom: 1px solid var(--line); white-space: nowrap; }
.wtable th { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); }
.wtable .club { text-align: left; }
.wtable .pts { font-family: var(--font-num); font-weight: 700; }
.wtable tr.up td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.wtable tr.down td:first-child { box-shadow: inset 3px 0 0 var(--warn, #ff6b6b); }
.wtable .form i { display: inline-grid; place-items: center; width: 16px; height: 16px; margin: 0 1px; border-radius: 4px; font-style: normal; font-size: 10px; font-weight: 700; }
.wtable .f-W { background: color-mix(in srgb, var(--accent) 35%, transparent); color: #d9ffe8; }
.wtable .f-D { background: rgba(255,255,255,.12); color: #e5e9f3; }
.wtable .f-L { background: rgba(255, 90, 90, .3); color: #ffd6d6; }
.wclub { display: inline-flex; align-items: center; gap: 7px; }
.wclub b { font-weight: 600; }
.wzone { margin: 8px 0 0; font-size: 12px; color: var(--text-dim); }
.z-up { color: var(--accent); } .z-down { color: var(--warn, #ff6b6b); }
.wfix { display: grid; gap: 8px; }
.wfix-row { display: grid; grid-template-columns: 1fr auto 1fr 1.4fr auto; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.03); }
.wfix-v { color: var(--text-dim); font-size: 12px; }
.wfix-ground { font-size: 12px; color: var(--text-dim); }
.wmovers { display: grid; gap: 10px; }
.wmovers > div { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.wmovers .wclub { font-size: 13px; }
@media (max-width: 640px) {
  .wtable th.form, .wtable td.form, .wtable th:nth-child(4), .wtable td:nth-child(4), .wtable th:nth-child(5), .wtable td:nth-child(5), .wtable th:nth-child(6), .wtable td:nth-child(6) { display: none; }
  .wfix-row { grid-template-columns: 1fr auto 1fr auto; }
  .wfix-ground { display: none; }
}

/* ---- v71: cups and nations on the World screen ---- */
.wround { margin: 14px 0 6px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.wround em { color: var(--accent); font-style: normal; }
.wfix-row.cup .wclub.won b { color: var(--accent); }
.wnations { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.wnation { display: grid; grid-template-columns: 24px 24px 1fr auto auto; gap: 8px; align-items: center; text-align: left; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.03); color: inherit; cursor: pointer; }
.wnation:hover { background: rgba(255,255,255,.08); }
.wn-rank { font-family: var(--font-num); color: var(--text-dim); font-size: 12px; }
.wn-pool { font-size: 11px; color: var(--text-dim); }
.wn-ovr { font-family: var(--font-num); font-weight: 700; }
.wxi { display: grid; gap: 4px; }
.wxi-row { display: grid; grid-template-columns: 40px 1fr auto 40px; gap: 8px; align-items: center; padding: 6px 8px; border-bottom: 1px solid var(--line); font-size: 13px; }
.wxi-pos { font-family: var(--font-num); font-size: 11px; color: var(--text-dim); }
.wxi-club { font-size: 11px; color: var(--text-dim); }
#natOpp { background: rgba(255,255,255,.06); color: inherit; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; }
.hall-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.hall-card { display: flex; flex-direction: column; gap: 6px; opacity: .78; }
.hall-card.owned { opacity: 1; }
.hall-line { margin: 0; font-size: 11px; color: var(--text-dim); line-height: 1.4; }
.hall-tag { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.hall-tag.dim { color: var(--text-dim); }
.honours td, .honours th { font-size: 12px; }

/* ---- v71: photo mode ---- */
.photo-mode .gm-hud, .photo-mode #gmFeed, .photo-mode #gmHints, .photo-mode #gmSetPiece, .photo-mode .gm-touch { visibility: hidden !important; }
.photo-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; flex-direction: column; gap: 8px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, transparent, rgba(4,6,13,.85)); }
.photo-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.photo-filters button { padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: rgba(6,10,20,.7); color: var(--text); font-size: 12px; font-weight: 700; cursor: pointer; }
.photo-filters button.on { border-color: var(--accent); color: var(--accent); }
.photo-actions { display: flex; align-items: center; gap: 10px; }
.photo-hint { margin-right: auto; font-size: 12px; color: var(--text-dim); }

/* ---- v71: stadium showcase ---- */
.showcase { display: grid; gap: 14px; }
.showcase-view { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: #05070e; }
#scCanvas { width: 100%; height: 100%; display: block; }
.showcase-cap { position: absolute; left: 14px; bottom: 12px; display: flex; flex-direction: column; gap: 2px; text-shadow: 0 1px 8px rgba(0,0,0,.9); }
.showcase-cap b { font-family: var(--font-num); font-size: 22px; font-weight: 800; font-style: italic; }
.showcase-cap span { font-size: 12px; color: var(--text-dim); }
.showcase-note { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--text-dim); }
.showcase-opts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.showcase-list { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.sc-item { display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: left; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.03); color: inherit; cursor: pointer; }
.sc-item svg, .sc-star { grid-row: span 2; }
.sc-star { color: var(--accent); font-size: 20px; text-align: center; }
.sc-item b { font-size: 13px; }
.sc-item span { font-size: 11px; color: var(--text-dim); }
.sc-item.on { border-color: var(--team); background: color-mix(in srgb, var(--team) 18%, transparent); }

/* ---- v71: larger text, right-to-left ---- */
html.large-text { font-size: 118%; }
html.large-text .tile-name { font-size: 27px; }
[dir="rtl"] { text-align: right; }
/* the side rail only exists beside the main doors on a wide screen; on a phone
   the hub is one column in either direction (v77: this rule outranked the
   phone layout and pushed Arabic players' mini tiles off the left edge) */
@media (min-width: 761px) {
  [dir="rtl"] .hub { grid-template-columns: 1fr 128px; }
  [dir="rtl"] .hub-rail { order: 2; }
  [dir="rtl"] .hub-main { order: 1; }
}
[dir="rtl"] .tile-swoosh { transform: scaleX(-1); }
[dir="rtl"] .menu-hero { right: auto; left: -6px; }
@media (min-width: 1000px) { [dir="rtl"] .menu-wordmark, [dir="rtl"] .hub { margin-right: 0; margin-left: 250px; } [dir="rtl"] .menu-hero { right: auto; left: -10px; } }
[dir="rtl"] .menu-wordmark { flex-direction: row-reverse; justify-content: flex-end; }
[dir="rtl"] .wtable th, [dir="rtl"] .wtable td { text-align: center; }
[dir="rtl"] .wtable .club { text-align: right; }
[dir="rtl"] .wtable tr.up td:first-child, [dir="rtl"] .wtable tr.down td:first-child { box-shadow: inset -3px 0 0 var(--accent); }
[dir="rtl"] .photo-hint { margin-right: 0; margin-left: auto; }
[dir="rtl"] .gm-bug, [dir="rtl"] .gm-hud { direction: ltr; }
[dir="rtl"] .pc-head { flex-direction: row-reverse; }
[dir="rtl"] .setting-row > div:first-child { text-align: right; }
[dir="rtl"] .ts-kit span { margin-left: 0; margin-right: auto; }
[dir="rtl"] .seg button i, [dir="rtl"] .seg button b { direction: rtl; }
/* v164: in Arabic, a line of English (a club name, a blurb not yet translated, "+7")
   reads in its own direction — its full stop stays at the end and a sign stays
   before its number — while the page around it stays right to left */
[dir="rtl"] :is(p, span, b, small, em, strong, td, th, label, figcaption, li, h1, h2, h3, h4, a, button, .hint) { unicode-bidi: plaintext; }
[dir="rtl"] .gm :is(span, b, em, i), [dir="rtl"] .gm-hints, [dir="rtl"] .icon-btn { unicode-bidi: normal; }
/* v163: the match words in Arabic — joined letters cannot be tracked apart or slanted, and the scores keep reading left to right */
[dir="rtl"] .gc-word, [dir="rtl"] .half-word, [dir="rtl"] .gm-setpiece b, [dir="rtl"] .gm-ft, [dir="rtl"] .gm-adv, [dir="rtl"] .replay-tag, [dir="rtl"] .gm-hints { letter-spacing: 0; font-style: normal; }
[dir="rtl"] .gm-setpiece b { white-space: nowrap; }
[dir="rtl"] .gc-word { font-family: var(--font); font-size: clamp(54px, 11vw, 140px); line-height: 1.1; }
[dir="rtl"] .gc-score, [dir="rtl"] .half-score, [dir="rtl"] .gm-final { direction: ltr; }

/* ---- v71: onboarding ---- */
.onboard { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(4, 6, 13, .78); backdrop-filter: blur(6px); }
.onboard-card { display: grid; grid-template-columns: 220px 1fr; gap: 22px; align-items: center; max-width: 720px; width: 100%; padding: 22px; border-radius: 20px; border: 1px solid var(--line-strong); background: linear-gradient(180deg, #0d1426, #080c17); box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.onboard-kicker { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.onboard-text h2 { margin: 4px 0 8px; font-family: var(--font-num); font-weight: 800; font-style: italic; font-size: 30px; }
.onboard-text p { margin: 0 0 16px; color: var(--text-dim); line-height: 1.5; }
.onboard-actions { display: flex; flex-wrap: wrap; gap: 10px; }
#gmHints.guide { background: color-mix(in srgb, var(--accent) 22%, rgba(6,10,20,.85)); border-color: var(--accent); font-weight: 700; }
@media (max-width: 640px) { .onboard-card { grid-template-columns: 1fr; } .onboard-hero { display: none; } }

/* ---- v72: world tournament ---- */
.wgroups { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-top: 6px; }
.wgroup { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; font-size: 12px; }
.wgroup b { margin-bottom: 3px; color: var(--accent); }
.wgroup span { display: flex; align-items: center; gap: 6px; }
.wgroup span i { margin-left: auto; font-style: normal; font-family: var(--font-num); }
.wtable tr.mine td { background: color-mix(in srgb, var(--accent) 12%, transparent); }
#wtNation { background: rgba(255,255,255,.06); color: inherit; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; }

/* ------------------------- Emotes (online matches) ------------------------- *
 * The only thing one player can say to another is one of these ids. */
.gm-emotes {
  position: absolute; top: 58px; right: 12px; z-index: 22; display: flex; gap: 4px;
  padding: 6px; border-radius: 999px; background: rgba(6, 10, 18, .88); border: 1px solid var(--line-strong);
  animation: fade .15s ease both;
}
.gm-emotes[hidden] { display: none; }
.gm-emotes button {
  width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255,255,255,.06);
  font-size: 18px; cursor: pointer; color: inherit;
}
.gm-emotes button:hover, .gm-emotes button:focus-visible { background: var(--accent-soft); }

/* ------------------------------- Guilds ------------------------------- */
.ol-sub { margin: -6px 0 10px; font-size: 12.5px; color: var(--muted); }
.gd-code { font-family: var(--font-num); letter-spacing: .12em; color: var(--accent); }
.gd-members { display: flex; flex-wrap: wrap; gap: 6px; }
.gd-members span {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px;
  font-size: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line);
}
.gd-members i, .fr-row i { width: 7px; height: 7px; border-radius: 50%; background: #566; flex: none; }
.gd-members .on i, .fr-row.on i { background: var(--good); box-shadow: 0 0 6px var(--good); }
.gd-members em { font-style: normal; color: var(--muted); font-size: 11px; }
.gd-objs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.gd-obj { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; font-size: 13px; }
.gd-obj i { grid-column: 1 / -1; display: block; height: 5px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.gd-obj i b { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.gd-obj em { font-style: normal; font-family: var(--font-num); color: var(--muted); font-size: 12px; }
.gd-obj.done em { color: var(--good); }
.gd-obj .btn, .gd-pay, .gd-claimed { grid-column: 1 / -1; justify-self: start; font-size: 12px; }
.gd-pay { color: var(--muted); }
.gd-claimed { color: var(--good); }
.gd-board .ol-row { grid-template-columns: 26px 1fr auto auto 0 44px; }
.gd-board small, .ol-card h3 small { color: var(--muted); font-weight: 600; font-size: .75em; }

/* ------------------------------- Friends ------------------------------- */
.fr-list { display: flex; flex-direction: column; gap: 4px; }
.fr-row {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; font-size: 13px;
  background: rgba(255,255,255,.03);
}
.fr-row small { color: var(--muted); }
.fr-row span { color: var(--muted); font-size: 12px; margin-inline-start: auto; }
.fr-row .btn.sm { padding: 5px 10px; font-size: 12px; }
.ols-invite { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; margin-top: 12px; font-size: 12px; color: var(--muted); }
.invite-toast {
  position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 90;
  display: flex; align-items: center; gap: 10px; color: var(--text);
}
.invite-toast .btn.sm { padding: 5px 12px; font-size: 12px; }

/* ---------------------------- Stadium Builder ---------------------------- */
.builder { display: grid; gap: 14px; grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); align-items: start; }
.bld-view { position: sticky; top: 70px; }
#bldCanvas { width: 100%; height: 100%; display: block; }
.bld-time { position: absolute; top: 12px; right: 12px; }
.bld-panel { padding: 16px; border-radius: 16px; display: flex; flex-direction: column; gap: 12px; }
.bld-row { display: grid; grid-template-columns: 96px 1fr; gap: 8px 12px; align-items: center; font-size: 13px; }
.bld-row > span:first-child { color: var(--muted); font-weight: 600; }
.bld-row > span:first-child b { display: block; color: var(--text); font-family: var(--font-num); }
.bld-seg { display: flex; flex-wrap: wrap; gap: 4px; }
.bld-seg button { padding: 6px 10px; font-size: 12px; }
.bld-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bld-name select { padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255,255,255,.05); color: inherit; font: inherit; }
.bld-row input[type="range"] { width: 100%; accent-color: var(--accent); }
.bld-colours { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.bld-colours label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.bld-colours input[type="color"] { width: 34px; height: 26px; border: 1px solid var(--line); border-radius: 6px; background: none; padding: 0; }
.bld-check { grid-template-columns: 96px auto 1fr; }
.bld-check em { font-style: normal; font-size: 12px; color: var(--muted); }
.bld-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.bld-code { margin: 0; font-size: 13px; color: var(--muted); word-break: break-all; }
.bld-code b { font-family: var(--font-num); color: var(--accent); letter-spacing: .06em; user-select: all; }
.bld-load { display: flex; gap: 6px; }
.bld-load input { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255,255,255,.05); color: inherit; font: inherit; letter-spacing: .06em; text-transform: uppercase; }
.bld-saved { display: flex; flex-direction: column; gap: 4px; }
.bld-savedrow { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; background: rgba(255,255,255,.03); font-size: 13px; }
.bld-savedrow i { width: 14px; height: 14px; border-radius: 4px; background: linear-gradient(135deg, var(--a) 50%, var(--b) 50%); flex: none; }
.bld-savedrow span { color: var(--muted); font-size: 12px; margin-inline-start: auto; }
@media (max-width: 760px) {
  .builder { grid-template-columns: 1fr; }
  .bld-view { position: relative; top: auto; }   /* v101: static let .bld-time (absolute) escape onto the screen title */
  .bld-row { grid-template-columns: 1fr; }
  .bld-check { grid-template-columns: auto auto 1fr; }
}

/* ---------------------- iPhone: notch, home bar, photo exit ---------------------- */
.gm-hud { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
.gm-emotes { right: max(12px, env(safe-area-inset-right)); }
.gm-queue { top: max(64px, calc(env(safe-area-inset-top) + 52px)); }
.gm:fullscreen { height: 100dvh; }
.photo-bar { position: fixed; z-index: 60; padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
.photo-exit {
  position: fixed; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); z-index: 60;
  width: 44px; height: 44px; font-size: 20px; border-radius: 50%;
  background: rgba(6, 10, 18, .9); border: 1px solid var(--line-strong); color: var(--text);
}
.rotate-hint .btn { margin-top: 14px; }
.tpad { padding-left: max(12px, env(safe-area-inset-left)); }

/* ------------------------- Cards where there was text ------------------------- */
.pc-showcase { padding: 14px; width: 210px; }
.pc-showcase .pc-ovr { font-size: 40px; }
.pc-showcase .pc-name { font-size: 16px; text-align: center; margin-top: 6px; }
.pc-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; margin-top: 10px; text-align: center; }
.pc-row span { display: flex; flex-direction: column; align-items: center; }
.pc-row i { font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: .06em; color: var(--text-mute); }
.pc-row b { font-family: var(--font-num); font-size: 15px; }
.card-strip { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: none; }
.card-strip::-webkit-scrollbar { display: none; }
.card-strip .pcard { flex: none; width: 118px; }
.strip-showcase .pcard { width: 210px; }
.wstars { margin-bottom: 10px; }
.wxi-cards { flex-wrap: wrap; overflow: visible; }
.ev-showcase { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; margin: 6px 0 12px; }
.ev-feat-card { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.ev-pack-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1; }
.ev-pack-side .btn { align-self: flex-start; }
.sbc-legend .pcard { width: 118px; }
.sp-could { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-mute); margin-top: 8px; }
.sp-strip .pcard { width: 92px; padding: 7px; }
.sp-strip .pc-ovr { font-size: 20px; }
.sp-strip .pc-name { font-size: 10.5px; }
.sp-strip .pc-foot, .sp-strip .pc-rar-tag { display: none; }
.obj.has-art { grid-template-columns: auto 1fr auto; }
.wl-packs { display: inline-flex; gap: 4px; margin-inline-start: 6px; }
/* the pack as a picture, at three sizes */
.pack-art { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; vertical-align: middle; }
.pack-art b { font-size: 11px; }
.pack-art .sp-art { margin-bottom: 0; }
.pack-art-md .sp-art { width: 96px; height: 120px; }
.pack-art-sm .sp-art { width: 58px; height: 72px; transform-origin: top; }
.pack-art-sm .sp-mark, .pack-art-xs .sp-mark { font-size: 9px; }
.pack-art-sm .sp-count, .pack-art-xs .sp-count { font-size: 8px; }
.pack-art-xs .sp-art { width: 34px; height: 44px; }
.pack-art-xs .sp-fan { display: none; }
.pack-art.rar-bronze { --pk: #c88a4a; } .pack-art.rar-silver { --pk: #b9c4d0; } .pack-art.rar-gold { --pk: #f4c95d; }
.pack-art.rar-special { --pk: #ff2e88; } .pack-art.rar-star { --pk: #a06bff; } .pack-art.rar-icon { --pk: #7af7ff; }
.pack-art.rar-keeper { --pk: #46d6a0; } .pack-art.rar-dip { --pk: #ff9f43; } .pack-art.rar-prime { --pk: #ff2e88; }
.pack-art-md .sp-face { width: 84px; height: 120px; }
.pack-art-sm .sp-face { width: 50px; height: 72px; border-radius: 8px; }
.pack-art-xs .sp-face { width: 30px; height: 44px; border-radius: 6px; }
.pack-art-sm .sp-fan i, .pack-art-md .sp-fan i { width: 44px; }
.obj.has-art .pack-art { grid-row: 1 / 3; }
/* photo mode: nothing over the picture but the filters and the way out */
.gm.photo-mode .gm-hud, .gm.photo-mode .gm-emotes, .gm.photo-mode .gm-queue, .gm.photo-mode .mgr-hud { visibility: hidden; }
/* the developer dot: there, not advertised */
.dev-dot { display: block; margin: 18px auto 0; width: 28px; height: 28px; border-radius: 50%; border: 0; background: transparent; color: rgba(255,255,255,.18); font-size: 22px; line-height: 1; cursor: pointer; }
.dev-dot:hover { color: var(--text-dim); }

/* ------------------------- Kick Off by country ------------------------- */
.ts-country { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; width: 100%; max-width: 330px; min-width: 0; }
.ts-country .ts-flag { display: inline-flex; flex: none; }
.ts-select { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.05); color: inherit; font: inherit; font-weight: 700; }
.ts-rail { flex-wrap: wrap; }

/* ------------------------------ camera settings ------------------------------ */
.cam-seg { flex-wrap: wrap; }
.cam-sliders { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px 18px; align-items: end; }
.cam-sliders label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--text-dim); }
.cam-sliders label span { display: flex; justify-content: space-between; }
.cam-sliders label b { color: var(--text); font-family: var(--font-num); }
.cam-sliders input[type="range"] { width: 100%; accent-color: var(--accent); }

/* ---- v77: nothing wider than the phone ----
   A grid track of 1fr is at least as wide as its widest child's content, so a
   nowrap line or a fixed-size card inside a panel made the whole column wider
   than a 320–390 px screen and the panel's right edge (the left in Arabic)
   fell off it. Letting the children shrink puts the wrapping back where it
   belongs, inside the panel. */
.hub > *, .hub-main > *, .today > *, .teamsel > *, .wl > *, .builder > * { min-width: 0; }
.today > .panel, .wl > .panel { max-width: 100%; }
@media (max-width: 760px) {
  .hub-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
  .hub-rail .tile { min-width: 0; }
  .hub-rail .tile.t-mini { padding-left: 4px; padding-right: 4px; }
  .hub-rail .t-mini .tile-name { font-size: clamp(10.5px, 3.2vw, 13.5px); overflow-wrap: normal; word-break: normal; }
}
/* Kick Off: the team card column is the side's width, never its content's —
   on a 320 px phone the country arrows were clipped at both edges */
.ts-side > div { width: 100%; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.ts-card { min-width: 0; }
/* the Ultimate XI dock: six labels have to fit a 320 px phone */
.tab { min-width: 0; }
@media (max-width: 380px) {
  .tabs { padding-left: 4px; padding-right: 4px; gap: 0; }
  .tab { font-size: 8.5px; letter-spacing: .01em; padding-left: 1px; padding-right: 1px; }
}

/* ---- v78: the Grounds gallery ---- */
.gr-cam { position: absolute; top: 10px; right: 10px; z-index: 2; }
.gr-hint { position: absolute; top: 48px; right: 12px; margin: 0; font-size: 11.5px; color: var(--text-dim); text-shadow: 0 1px 6px rgba(0,0,0,.9); }
.showcase-view { touch-action: none; }
.gr-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.gr-stat { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.04); min-width: 0; }
.gr-stat span { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-mute); }
.gr-stat b { font-family: var(--font-num); font-size: 16px; }
.gr-stat i { font-style: normal; font-weight: 500; color: var(--text-dim); font-size: 12px; }
.gr-filter { flex-wrap: wrap; }
#scWinter.on { border-color: var(--accent); color: var(--accent); }
/* v78: five weather choices have to fit a 320 px phone */
.ts-opt .seg { flex-wrap: wrap; max-width: 100%; }
.ts-opt { min-width: 0; }

/* ---- v79: traits and skill stars on cards ---- */
.pc-stars { display: block; font-size: 9px; letter-spacing: -1px; color: var(--rar, #ffd166); opacity: .9; line-height: 1; margin-top: 2px; }
.pc-traits { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; margin: 2px 6px 0; min-height: 0; }
.trait { font-size: 9.5px; font-weight: 700; letter-spacing: .02em; padding: 1px 6px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); white-space: nowrap; }
.trait.elite { background: linear-gradient(90deg, rgba(255,209,102,.3), rgba(255,160,40,.25)); border-color: rgba(255,209,102,.6); color: #ffe7a8; }
.pc-mini .pc-traits, .pc-sm .pc-traits { display: none; }
/* v79: tactics in Team Management */
.p-slider { display: grid; grid-template-columns: 90px auto 1fr auto; gap: 8px; align-items: center; }
.p-slider input { width: 100%; accent-color: var(--accent); }
.p-slider small { color: var(--text-mute); font-size: 11px; }
.p-roles summary { cursor: pointer; font-weight: 700; margin: 8px 0; }
.role-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px 12px; }
.role-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12.5px; }
.role-row select { max-width: 60%; background: rgba(255,255,255,.06); color: inherit; border: 1px solid var(--line); border-radius: 8px; padding: 4px 6px; }
.skills-head { margin: 16px 0 8px; font-size: 15px; }
.skills-head small { display: block; font-weight: 500; color: var(--text-dim); font-size: 11.5px; margin-top: 3px; }
.skills-grid b { color: #ffd166; }

/* ---- v80: the promo card designs ----
   Each campaign wears its own animated face, all CSS: In-Form a green pulse,
   Team of the Week black and gold with a sweeping sheen, Future Stars a
   cyan-to-violet nebula that drifts, Heroes of the Desert a heat shimmer over
   sand, Winter Legends a frosted pane with falling glints. Icon tiers carry a
   ribbon naming the tier; evolved cards a glowing edge by stage. */
.pcard.rar-inform, .pcard.rar-totw, .pcard.rar-future, .pcard.rar-desert, .pcard.rar-winter { box-shadow: 0 12px 34px var(--rar-glow), inset 0 1px 0 rgba(255,255,255,.14); }
.pcard.rar-inform { background: linear-gradient(165deg, rgba(124,255,107,.26) 0%, rgba(8,24,14,.94) 50%), #07120b; }
.pcard.rar-inform::after { animation: informPulse 2.6s ease-in-out infinite; }
@keyframes informPulse { 0%, 100% { opacity: .45; } 50% { opacity: .9; } }
.pcard.rar-totw { background: linear-gradient(160deg, #1a1608 0%, #07070a 55%, #1e1a0a 100%); border-color: #ffe066; }
.pcard.rar-totw::before, .pcard.rar-future::before, .pcard.rar-desert::before, .pcard.rar-winter::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1; mix-blend-mode: screen;
}
.pcard.rar-totw::before { background: linear-gradient(115deg, transparent 30%, rgba(255,224,102,.45) 48%, transparent 62%); background-size: 260% 100%; animation: sheenSweep 3.4s linear infinite; }
@keyframes sheenSweep { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.pcard.rar-future { background: radial-gradient(120% 90% at 20% 10%, rgba(25,227,255,.45), transparent 55%), radial-gradient(100% 80% at 90% 90%, rgba(106,27,255,.55), transparent 60%), #0a0a22; }
.pcard.rar-future::before { background: radial-gradient(40% 30% at 30% 30%, rgba(255,255,255,.18), transparent 70%), radial-gradient(30% 25% at 70% 60%, rgba(25,227,255,.25), transparent 70%); animation: nebulaDrift 7s ease-in-out infinite alternate; }
@keyframes nebulaDrift { from { transform: translate(-6%, -4%) scale(1); } to { transform: translate(6%, 5%) scale(1.12); } }
.pcard.rar-desert { background: linear-gradient(180deg, rgba(255,190,90,.45) 0%, rgba(160,80,20,.5) 38%, #1c0f06 70%), #120a04; }
.pcard.rar-desert::before { background: repeating-linear-gradient(0deg, rgba(255,230,180,.08) 0 2px, transparent 2px 5px); animation: heatHaze 2.2s ease-in-out infinite alternate; }
@keyframes heatHaze { from { transform: translateY(0) skewX(0deg); opacity: .5; } to { transform: translateY(-3px) skewX(1.5deg); opacity: .9; } }
.pcard.rar-winter { background: linear-gradient(170deg, rgba(216,241,255,.4) 0%, rgba(40,80,130,.55) 42%, #081424 76%); border-color: #d8f1ff; }
.pcard.rar-winter::before { background: radial-gradient(2px 2px at 20% 20%, #fff, transparent), radial-gradient(2px 2px at 60% 40%, #fff, transparent), radial-gradient(1.5px 1.5px at 80% 10%, #fff, transparent), radial-gradient(1.5px 1.5px at 35% 65%, #fff, transparent); background-size: 100% 60%; animation: glintFall 5s linear infinite; }
@keyframes glintFall { from { background-position: 0 -60%; } to { background-position: 0 160%; } }
/* v126: National Day — Saudi green, a white Najdi parapet across the top, a gold sheen */
.pcard.rar-nationalday { background:
    linear-gradient(135deg, transparent 43%, rgba(255,255,255,.95) 44% 56%, transparent 57%) 0 0 / 16px 14px repeat-x,
    linear-gradient(180deg, rgba(31,191,98,.55) 0%, rgba(8,90,48,.7) 40%, #041a0e 78%), #03140b;
  border-color: #e8f5ec; box-shadow: 0 12px 34px var(--rar-glow), inset 0 1px 0 rgba(255,255,255,.2); }
.pcard.rar-nationalday::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1; mix-blend-mode: screen;
  background: linear-gradient(115deg, transparent 30%, rgba(227,193,111,.5) 48%, transparent 62%); background-size: 260% 100%; animation: sheenSweep 4s linear infinite; }
/* the Saudi Icons: the Icon tier's glow, in green and gold */
.pcard.sa-icon { --rar: #3ee58a; --rar-glow: rgba(62,229,138,.75);
  background: radial-gradient(120% 80% at 50% 0%, rgba(62,229,138,.4), transparent 60%), linear-gradient(180deg, #0b3a22 0%, #06180e 80%); border-color: #e3c16f; }
.reduce-motion .pcard.rar-nationalday::before { animation: none; }
.reduce-motion .pcard.rar-inform::after, .reduce-motion .pcard.rar-totw::before, .reduce-motion .pcard.rar-future::before, .reduce-motion .pcard.rar-desert::before, .reduce-motion .pcard.rar-winter::before { animation: none; }
.pc-tier { position: absolute; top: 8px; right: -26px; transform: rotate(35deg); background: var(--rar); color: #04121a; font-size: 9px; font-weight: 800; letter-spacing: .08em; padding: 2px 30px; z-index: 3; }
.pcard.evo-1 { box-shadow: 0 0 0 1px #7cff6b, 0 10px 30px rgba(124,255,107,.35); }
.pcard.evo-2 { box-shadow: 0 0 0 2px #19e3ff, 0 10px 32px rgba(25,227,255,.4); }
.pcard.evo-3 { box-shadow: 0 0 0 2px #ff5ce1, 0 12px 36px rgba(255,92,225,.45); }
.pcard.evo-4 { box-shadow: 0 0 0 3px #ffd166, 0 12px 40px rgba(255,209,102,.55); }
.pc-promo { position: absolute; bottom: 30px; left: 0; right: 0; text-align: center; font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--rar); opacity: .9; z-index: 2; }

/* ---------------------------------------------------------------------- *
 * v80: Ultimate XI depth — squad hub, modes, tasks, evolutions, market, binder
 * ---------------------------------------------------------------------- */
.chem-links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.chem-links line { stroke-width: 2.5px; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.cl-club { stroke: #3ddc97; background: #3ddc97; }
.cl-nation { stroke: #ffd166; background: #ffd166; }
.cl-league { stroke: #41d3ff; background: #41d3ff; }
.cl-none { stroke: rgba(255, 90, 90, .45); background: rgba(255, 90, 90, .45); }
.chem-links .cl-none { stroke-dasharray: 3 4; }
.pitch .slot { z-index: 1; }
.chem-key { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .72rem; color: var(--muted, #9aa3b5); align-items: center; margin: 6px 0 2px; }
.chem-key i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: -6px; }
.squad-hub .panel-head { flex-wrap: wrap; gap: 8px; }
.squad-hub select { max-width: 100%; }
.hub-break { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 8px 0; }
.hub-break div { background: rgba(255, 255, 255, .04); border: 1px solid var(--line); border-radius: 10px; padding: 6px; text-align: center; }
.hub-break b { display: block; font-size: 1.1rem; }
.hub-break span { font-size: .68rem; opacity: .7; }
.hub-break.lines b { font-size: .95rem; }
.hub-h { font-size: .85rem; margin: 10px 0 4px; opacity: .8; }
.saved-squads { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.saved-squads li { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 4px 6px; border-radius: 8px; background: rgba(255, 255, 255, .03); }
.saved-squads li b { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved-squads li .empty { flex: 1; margin: 0; padding: 0; }

.mode-card .btn { margin-top: 8px; }
.fives-five { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.ff-p { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 999px; background: rgba(255, 255, 255, .05); font-size: .8rem; }
.ff-p i { font-style: normal; opacity: .6; font-size: .7rem; }
.mode-rec { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .8rem; opacity: .8; }
.claim-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border-radius: 10px; background: var(--accent-soft); margin: 8px 0; }
.clash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 10px 0; }
.clash-opp { position: relative; display: grid; gap: 3px; padding: 10px 10px 10px 34px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); min-width: 0; }
.clash-opp b { font-size: .85rem; overflow-wrap: anywhere; }
.clash-opp span { font-size: .72rem; opacity: .75; }
.clash-opp em { font-style: normal; font-size: .7rem; color: var(--good); }
.clash-opp .mini-btn { justify-self: start; }
.clash-opp.done { opacity: .7; }
.co-kit { position: absolute; left: 10px; top: 12px; width: 16px; height: 20px; border-radius: 4px 4px 6px 6px; background: linear-gradient(90deg, var(--c1) 50%, var(--c2) 50%); box-shadow: 0 0 0 1px rgba(255, 255, 255, .2); }
.rank-strip { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.rank-strip span { flex: 0 0 auto; display: grid; gap: 2px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line); font-size: .72rem; }
.rank-strip span.on { border-color: var(--accent); background: var(--accent-soft); }
.rank-strip em { font-style: normal; opacity: .7; }
.tag.good { color: var(--good); }
.wl-qual { display: grid; gap: 4px; margin: 10px 0; padding: 10px; border-radius: 10px; border: 1px solid var(--line); }
.wl-qual.ok { border-color: var(--good); }
.wl-qual span { font-size: .8rem; opacity: .8; }

.club-level .lvl-track { display: flex; gap: 6px; overflow-x: auto; margin-top: 8px; }
.lvl-track span { flex: 0 0 auto; display: grid; gap: 2px; padding: 6px 10px; border-radius: 10px; background: rgba(255, 255, 255, .04); font-size: .72rem; }
.lvl-track span.big { border: 1px solid var(--accent); }
.lvl-track b { font-size: .9rem; }
#taskBoard .obj-reward .mini-btn { margin-top: 4px; }

.evo-run { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 10px 0; border-top: 1px solid var(--line); }
.evo-info { display: grid; gap: 4px; min-width: 0; }
.evo-info .mini-btn { justify-self: start; }
.evo-path { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 4px; }
.evo-path li { display: grid; grid-template-columns: 22px 1fr; gap: 2px 8px; font-size: .78rem; align-items: center; opacity: .65; }
.evo-path li b { grid-row: span 2; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); font-size: .7rem; }
.evo-path li em { font-style: normal; font-size: .7rem; opacity: .8; }
.evo-path li.done { opacity: 1; }
.evo-path li.done b { background: var(--accent); border-color: var(--accent); color: #031; }
.evo-path li.now { opacity: 1; }
.evo-path li.now b { border-color: var(--accent); box-shadow: 0 0 8px var(--accent); }
.evo-tracks { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.evo-track { display: grid; gap: 6px; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); min-width: 0; }
.evo-track header { display: grid; gap: 2px; }
.evo-track header span { font-size: .75rem; opacity: .7; }
.evo-start { display: flex; gap: 6px; flex-wrap: wrap; }
.evo-start select { flex: 1 1 140px; min-width: 0; }
.evo-done-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.evo-fin { display: grid; gap: 4px; justify-items: center; font-size: .7rem; max-width: 120px; text-align: center; }
.evo-done { margin-top: 6px; }

.mkt-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.mkt-filters input, .mkt-filters select { flex: 1 1 110px; min-width: 0; }
.mkt-list { display: grid; gap: 4px; max-height: 420px; overflow-y: auto; }
.mkt-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; grid-template-areas: "o n b bn" "o n e e"; gap: 0 10px; align-items: center; text-align: left; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line); border-left: 3px solid var(--rar); background: rgba(255, 255, 255, .03); color: inherit; font: inherit; cursor: pointer; }
.mkt-row.on { background: var(--accent-soft); }
.mr-ovr { grid-area: o; font-size: 1.05rem; }
.mr-name { grid-area: n; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; }
.mr-name small { display: block; opacity: .6; font-size: .7rem; }
.mr-bid { grid-area: b; font-size: .72rem; opacity: .75; }
.mr-bn { grid-area: bn; font-weight: 700; font-size: .85rem; }
.mr-end { grid-area: e; justify-self: end; font-size: .68rem; opacity: .6; }
.mkt-detail { display: grid; grid-template-columns: auto 1fr; gap: 12px; margin-top: 10px; padding: 10px; border-radius: 12px; border: 1px solid var(--accent); }
.md-info { display: grid; gap: 6px; min-width: 0; }
.md-info span { font-size: .78rem; opacity: .8; }
.md-act { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.md-act input { width: 110px; }
.mkt-graph { max-width: 100%; height: auto; color: inherit; }
.mkt-sell { display: grid; gap: 8px; }
.mkt-sell label { display: flex; align-items: center; gap: 8px; font-size: .8rem; }
.mkt-sell label input, .mkt-sell label select { flex: 1; min-width: 0; }
.mkt-range { font-size: .78rem; opacity: .8; }
.mkt-mine { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.mkt-mine li { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: .82rem; padding: 4px 0; border-bottom: 1px solid var(--line); }

.binder-sets { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }   /* v120: tiles, two to a phone */
.bset.open { grid-column: 1 / -1; }
.bset { display: grid; gap: 6px; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); min-width: 0; }
.bset header { display: grid; gap: 2px; cursor: pointer; }
.bset header span { font-size: .74rem; opacity: .7; }
.bset.done { border-color: var(--good); }
.bset.claimed { opacity: .7; }
.bset-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .75rem; }
.bset-foot em { font-style: normal; opacity: .7; flex: 1; }
.bset-cards { display: flex; flex-wrap: wrap; gap: 4px; }
.bc { font-size: .68rem; padding: 2px 6px; border-radius: 6px; background: rgba(255, 255, 255, .04); opacity: .45; }
.bc b { margin-right: 4px; }
.bc.has { opacity: 1; background: var(--accent-soft); }
@media (max-width: 520px) {
  .hub-break { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .evo-run, .mkt-detail { grid-template-columns: 1fr; }
}
/* the manager list's long option labels must not widen the side column */
.sb-side, .squad-hub, .squad-hub .field { min-width: 0; }
.squad-hub select, .mkt-sell select, .evo-start select { width: 100%; max-width: 100%; text-overflow: ellipsis; }
.squad-hub .field { display: grid; }

/* ---------------------------------------------------------------------- *
 * v81: career depth — the ceremonies, Player Career, the manager's new tabs
 * ---------------------------------------------------------------------- */
.ceremony { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(4, 8, 16, .82); backdrop-filter: blur(6px); opacity: 0; transition: opacity .25s; overflow: hidden; }
.ceremony.in { opacity: 1; }
.ceremony.still, .ceremony.still * { transition: none !important; animation: none !important; }
.cer-kicker { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.cer-name { font-size: clamp(1.4rem, 5vw, 2.4rem); font-weight: 800; text-align: center; overflow-wrap: anywhere; }
.cer-meta, .cer-sub { opacity: .8; text-align: center; }
.cer-press .cer-wall { position: absolute; inset: 0 0 38% 0; display: grid; grid-template-columns: repeat(6, 1fr); align-content: center; gap: 18px 10px; padding: 24px; opacity: .16; font-weight: 800; letter-spacing: .08em; font-size: .9rem; text-align: center; transform: rotate(-4deg) scale(1.1); pointer-events: none; }
.cer-press .cer-crest { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); }
.cer-desk { position: absolute; left: 10%; right: 10%; bottom: 0; height: 22%; background: linear-gradient(#1b2433, #0c111b); border-top: 3px solid var(--accent); border-radius: 12px 12px 0 0; display: flex; justify-content: center; gap: 20%; pointer-events: none; }
.cer-desk i { width: 6px; height: 50px; margin-top: -46px; background: #2a3242; border-radius: 3px; box-shadow: 0 -10px 0 4px #11151d; }
.cer-card { position: relative; max-width: 560px; width: 100%; padding: 22px; border-radius: 16px; display: grid; gap: 12px; }
.cer-q { font-size: 1.15rem; font-style: italic; min-height: 3em; margin: 0; }
.cer-answers { display: grid; gap: 8px; }
.cer-answers .btn { text-align: left; white-space: normal; }
.cer-sign .cer-wipe { position: absolute; inset: -20%; background: linear-gradient(115deg, var(--c1) 0 48%, var(--c2) 48% 100%); transform: translateX(-120%) skewX(-12deg); transition: transform .6s cubic-bezier(.2, .8, .2, 1); opacity: .9; }
.cer-sign.in .cer-wipe { transform: translateX(0) skewX(-12deg); }
.cer-sign.still .cer-wipe { transform: none; }
.cer-sign-body, .cer-trophy-body { position: relative; display: grid; justify-items: center; gap: 10px; max-width: 520px; width: 100%; padding: 22px; border-radius: 18px; background: rgba(6, 10, 18, .72); }
.cer-sign-body .cer-face { border-radius: 50%; overflow: hidden; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
.cer-sign-body .cer-crest.big { transform: scale(.4); opacity: 0; transition: transform .5s .35s, opacity .5s .35s; }
.cer-sign.in .cer-crest.big { transform: none; opacity: 1; }
.cer-confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cer-cup { filter: drop-shadow(0 12px 30px rgba(255, 209, 102, .35)); transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.cer-trophy.lifted .cer-cup { transform: translateY(-40px) rotate(-6deg) scale(1.1); }
.cer-podium { display: flex; align-items: flex-end; gap: 4px; margin-top: -8px; }
.cer-podium i { width: 52px; background: linear-gradient(#2c3446, #161b26); border-radius: 6px 6px 0 0; }
.cer-podium i:nth-child(1) { height: 26px; } .cer-podium i:nth-child(2) { height: 42px; } .cer-podium i:nth-child(3) { height: 18px; }

.cc-card.on { outline: 2px solid var(--accent); }
.cc-lg { font-size: .72rem; opacity: .7; }
.chub-face { border-radius: 50%; overflow: hidden; display: inline-flex; box-shadow: 0 6px 20px rgba(0, 0, 0, .5); }
.pro-pot { font-size: .7rem; opacity: .8; }
.pro-sel { margin: 6px 0 0; font-weight: 600; }
.pro-sel.sel-out { color: #ff8a8a; } .pro-sel.sel-bench { color: var(--warn); } .pro-sel.sel-start { color: var(--good); }
.pro-form { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.pro-form span { padding: 4px 8px; border-radius: 8px; background: rgba(255, 255, 255, .06); font-weight: 700; }
.pro-form span.up { background: rgba(61, 220, 151, .18); color: var(--good); } .pro-form span.dn { background: rgba(255, 90, 90, .14); color: #ff8a8a; }
.pro-attrs { display: grid; gap: 6px; margin-top: 8px; }
.pro-attrs div { display: grid; grid-template-columns: 90px 1fr 32px; align-items: center; gap: 8px; font-size: .8rem; text-transform: capitalize; }
.pro-attrs i { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.pro-attrs i b { display: block; height: 100%; background: var(--accent); }
.pro-attrs em { font-style: normal; font-weight: 700; text-align: right; }
.drill { display: grid; gap: 10px; margin: 10px 0; padding: 12px; border-radius: 12px; border: 1px solid var(--line); }
.drill.is-done { opacity: .6; }
.drill-bar { position: relative; height: 28px; border-radius: 14px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.drill-zone { position: absolute; top: 0; bottom: 0; background: rgba(35, 197, 94, .35); border-left: 2px solid var(--accent); border-right: 2px solid var(--accent); }
.drill-mark { position: absolute; top: 2px; bottom: 2px; width: 6px; margin-left: -3px; border-radius: 3px; background: #fff; box-shadow: 0 0 10px #fff; left: 0; }
.drill-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.pro-miles { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .85rem; }
.pro-miles em { font-style: normal; opacity: .55; margin-right: 6px; font-size: .75rem; }
.pro-seasons { width: 100%; font-size: .8rem; }
.pro-talk { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.pro-talk label { display: grid; gap: 2px; font-size: .78rem; }
.legacy-top { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; }
.legacy-top > div { display: grid; gap: 2px; }
.legacy-name { font-size: 1.6rem; font-weight: 800; }

.dep-rows { display: grid; gap: 4px; }
.dep-row { display: grid; grid-template-columns: 34px 40px minmax(0, 1fr) 70px 70px minmax(0, 160px); align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: rgba(255, 255, 255, .03); font-size: .82rem; text-align: left; color: inherit; font: inherit; border: 1px solid transparent; }
.dep-row.as-btn { cursor: pointer; grid-template-columns: 34px 40px minmax(0, 1fr) 90px 70px 110px; }
.dep-row.as-btn.on { border-color: var(--accent); }
.dep-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dep-name em { font-style: normal; font-size: .7rem; margin-left: 4px; color: var(--warn); }
.dep-name em.bad { color: #ff8a8a; }
.dep-ovr { font-size: 1rem; }
.dep-pos { opacity: .7; font-size: .75rem; }
.dep-bar { display: block; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.dep-bar b { display: block; height: 100%; background: var(--good); }
.dep-bar.sharp b { background: #41d3ff; } .dep-bar.bad b { background: #ff6b6b; } .dep-bar.good b { background: var(--good); }
.dep-plan { min-width: 0; width: 100%; font-size: .75rem; }
.dep-role { font-size: .7rem; padding: 2px 6px; border-radius: 6px; background: rgba(255, 255, 255, .06); text-align: center; }
.role-crucial { color: #ffd166; } .role-important { color: var(--good); } .role-prospect { color: #41d3ff; }
.dep-mins { font-size: .72rem; opacity: .75; }
.dep-sp { display: flex; flex-wrap: wrap; gap: 10px; }
.dep-sp label { display: grid; gap: 2px; font-size: .78rem; flex: 1 1 160px; min-width: 0; }
.dep-sp select { width: 100%; }
.dep-fac { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.fac { display: grid; gap: 6px; padding: 10px; border-radius: 12px; border: 1px solid var(--line); }
.fac span { font-size: .75rem; opacity: .75; }
.fac-lv { display: flex; gap: 4px; }
.fac-lv i { width: 18px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .1); }
.fac-lv i.on { background: var(--accent); }
.rr.total { border-top: 1px solid var(--line); font-weight: 700; }
.rr b.neg { color: #ff8a8a; }
.ov-meter i b.over { background: #ff6b6b; }
.scout { padding: 10px 0; border-top: 1px solid var(--line); }
.scout-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.scout-head .stars { color: #ffd166; letter-spacing: 1px; }
.scout-head select { flex: 1 1 140px; min-width: 0; }
.dep-loan { display: flex; flex-wrap: wrap; gap: 8px; }
.dep-loan select { flex: 1 1 160px; min-width: 0; }
.pillar span { font-size: .78rem; }
.career-foot { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
@media (max-width: 620px) {
  .dep-row, .dep-row.as-btn { grid-template-columns: 30px 34px minmax(0, 1fr) 60px; }
  .dep-row > .dep-m:nth-of-type(2), .dep-row .dep-mins { display: none; }
  .dep-row .dep-plan { grid-column: 1 / -1; }
  .cer-press .cer-wall { grid-template-columns: repeat(3, 1fr); }
}
/* v81: the career squad and market rows on a phone held upright */
@media (max-width: 520px) {
  .cq-row { flex-wrap: wrap; row-gap: 2px; }
  .cq-row .cq-name { flex: 1 1 40%; }
  .cq-row .cq-val, .cq-row .cq-wage, .cq-row .cq-con, .cq-row .cq-nat { font-size: 11px; }
  .cq-row .cq-nat { order: 5; }
  .tm-tools { grid-template-columns: 1fr 1fr; }
  .tm-tools input { grid-column: 1 / -1; }
  .tm-tools select { min-width: 0; width: 100%; }
}
@media (max-width: 520px) {
  .pro-hub .chub-top { flex-wrap: wrap; }
  .pro-hub .chub-id { flex: 1 1 60%; min-width: 0; }
  .pro-hub .chub-coins { flex: 1 1 100%; display: flex; gap: 10px; align-items: baseline; text-align: left; }
}
/* v81: creation forms fit the narrowest phones, either direction */
.cs-swatches { flex-wrap: wrap; min-width: 0; }
.cs-row { grid-template-columns: 90px minmax(0, 1fr); }
.cs-form, .cs-preview { min-width: 0; }
.cs-form select, .cs-form input { min-width: 0; max-width: 100%; }
@media (max-width: 760px) { .cs-layout { grid-template-columns: minmax(0, 1fr); } }
/* v82: six small doors — Today, Trophies, Career, Street, Skills, Settings */
.hub { grid-template-columns: 250px 1fr; }
.hub-rail { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 10px; }
.hub-rail .tile.t-mini { padding: 12px 8px; }
@media (max-width: 760px) {
  .hub { grid-template-columns: 1fr; }
  .hub-rail { grid-template-columns: repeat(3, 1fr); flex-direction: unset; }
}
@media (min-width: 1400px) { .hub { grid-template-columns: 290px 1fr; } }
.hub-rail .tile:nth-child(5) { animation-delay: .34s; } .hub-rail .tile:nth-child(6) { animation-delay: .4s; }

/* v82: the street */
.st-bar { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; font-size: .8rem; margin: 6px 0 10px; }
.st-tour { display: grid; gap: 12px; }
.st-stop { border-left: 4px solid var(--s1); }
.st-stop.locked { opacity: .5; }
.st-stop.done { box-shadow: inset 0 0 0 1px var(--good); }
.st-games { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.st-game { display: grid; gap: 4px; justify-items: center; text-align: center; padding: 10px 6px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); min-width: 0; }
.st-game b { font-size: .85rem; overflow-wrap: anywhere; }
.st-game span { font-size: .7rem; opacity: .7; }
.st-game em { font-style: normal; color: #ffd166; font-size: .8rem; }
.st-game.boss { border-color: #ffd166; }
.st-game.won { background: rgba(61, 220, 151, .08); }
.st-game .btn { width: 100%; padding-left: 4px; padding-right: 4px; }
.st-venues { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 8px 0; }
.st-venue { display: grid; gap: 2px; text-align: left; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: linear-gradient(135deg, var(--s1), rgba(0, 0, 0, .4)); color: #fff; font: inherit; cursor: pointer; }
.st-venue span { font-size: .72rem; opacity: .85; }
.st-venue.on { outline: 2px solid var(--s2); }
.st-cos { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.st-co { display: grid; gap: 4px; justify-items: start; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.st-co i { width: 28px; height: 16px; border-radius: 4px; }
.st-co span { font-size: .7rem; opacity: .75; }
.st-co.on { border-color: var(--accent); background: var(--accent-soft); }
.st-co.locked { opacity: .5; cursor: default; }
@media (max-width: 420px) { .st-games { grid-template-columns: 1fr; } }
/* v82: skills & practice */
.sk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.sk-card { display: grid; gap: 8px; align-content: start; }
.sk-board { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: .8rem; min-height: 60px; }
.sk-board li { display: grid; grid-template-columns: 20px 1fr auto; gap: 6px; }
.sk-board li.empty { display: block; opacity: .6; }
.sk-board i { font-style: normal; opacity: .6; } .sk-board em { font-style: normal; font-weight: 700; }
.drill-stage { position: fixed; inset: 0; z-index: 80; background: #050a12; display: grid; grid-template-rows: auto 1fr; }
.drill-top { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: rgba(0, 0, 0, .5); }
.drill-top span { flex: 1; font-variant-numeric: tabular-nums; opacity: .85; }
#drillCv { width: 100%; height: 100%; display: block; touch-action: none; }
.drill-msgs { position: absolute; top: 56px; left: 50%; transform: translateX(-50%); display: grid; gap: 4px; justify-items: center; pointer-events: none; }
.drill-msgs span { padding: 4px 12px; border-radius: 999px; background: rgba(0, 0, 0, .6); font-weight: 700; }
.drill-touch { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; justify-content: space-between; padding: 0 18px; pointer-events: none; }
.drill-pad { width: 110px; height: 110px; border-radius: 50%; background: rgba(255, 255, 255, .08); border: 2px solid rgba(255, 255, 255, .2); display: grid; place-items: center; pointer-events: auto; touch-action: none; }
.drill-pad i { width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .35); transition: transform .05s; }
.drill-btn { width: 96px; height: 96px; border-radius: 50%; border: 0; background: var(--accent); color: #04170b; font-weight: 800; pointer-events: auto; touch-action: none; }
@media (hover: hover) and (pointer: fine) { .drill-touch { display: none; } }
.drill-end { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .55); }
.drill-score { font-size: 3rem; font-weight: 800; display: block; text-align: center; }
.gm-practice { position: absolute; top: 52px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; z-index: 5; }
.btn.sm { padding: 6px 10px; font-size: .78rem; }
/* v82: two players on one tablet */
.gm-split { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; pointer-events: none; z-index: 4; }
.split-half { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: end; padding: 0 12px 14px; pointer-events: none; }
.split-half.right { grid-template-columns: auto 1fr; }
.split-half.right .split-btns { order: -1; }
.split-zone { position: relative; height: 62%; align-self: end; pointer-events: auto; touch-action: none; }
.split-zone .tstick { position: absolute; transform: translate(-50%, -50%); }
.split-btns { display: grid; grid-template-columns: repeat(2, 76px); gap: 8px; pointer-events: auto; }
.split-btns .tbtn { width: 76px; height: 60px; font-size: .62rem; }
.split-tag { position: absolute; top: 60px; left: 14px; font-weight: 800; opacity: .5; }
.split-half.right .split-tag { left: auto; right: 14px; }
.split-half.left { border-right: 1px dashed rgba(255, 255, 255, .12); }
/* v82: parties and the button map */
.pty-modes { display: grid; gap: 8px; margin: 8px 0; }
.pty-mode { display: grid; gap: 2px; text-align: left; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); color: inherit; font: inherit; cursor: pointer; }
.pty-mode span { font-size: .75rem; opacity: .75; }
.pty-mode:hover, .pty-mode:focus-visible { border-color: var(--accent); }
.pty-code { letter-spacing: .12em; color: var(--accent); }
.pty-sides { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin: 8px 0; }
.pty-side { display: grid; gap: 4px; padding: 10px; border-radius: 12px; border: 1px solid var(--line); }
.pty-side span.dropped { opacity: .5; text-decoration: line-through; }
.pty-side em { font-style: normal; opacity: .6; }
.bind-grid { display: grid; gap: 6px; }
.bind-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; }
.bind-row .btn { min-width: 64px; }
.btn.is-listening { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }

/* ============================ v83 · the broadcast ============================ */
.bc-layer { position: absolute; inset: 0; pointer-events: none; z-index: 4; font-family: var(--font-num); }
.bc-layer > [hidden] { display: none !important; }
.bc-layer .in { animation: bcIn .38s cubic-bezier(.2, .9, .3, 1.2) both; }
.bc-layer .out { animation: bcOut .36s ease both; }
.bc-layer.still .in, .bc-layer.still .out { animation: none; }
@keyframes bcIn { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
@keyframes bcOut { to { opacity: 0; transform: translateX(-18px); } }
.bc-mom { position: absolute; top: 50px; left: 14px; width: 190px; height: 5px; border-radius: 3px; background: rgba(8, 12, 24, .8); overflow: hidden; }
.bc-mom i { position: absolute; top: 0; bottom: 0; transition: width .4s ease; }
.bc-mom i.h { right: 50%; background: var(--hc, var(--accent)); }
.bc-mom i.a { left: 50%; background: var(--ac, var(--bad)); }
.bc-mom b { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 2px; background: #fff; opacity: .7; }
.bc-board { position: absolute; top: 62px; left: 14px; display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: 8px; background: #050a07; border: 1px solid #1d3b28; box-shadow: 0 0 18px rgba(35, 197, 94, .25); }
.bb-k { font-size: 10px; letter-spacing: .14em; color: #8fe3ad; }
.bb-n { font-size: 26px; font-weight: 800; color: #5dff95; text-shadow: 0 0 10px rgba(93, 255, 149, .8); letter-spacing: .05em; }
.bc-subs { position: absolute; top: 108px; left: 14px; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 2px 10px; padding: 8px 12px; border-radius: 10px; background: rgba(8, 12, 24, .92); border: 1px solid rgba(255, 255, 255, .14); min-width: 200px; }
.bs-crest { grid-row: 1 / 3; display: grid; place-items: center; }
.bs-row { display: flex; align-items: center; gap: 8px; font-size: 13px; font-family: var(--font-ui, inherit); }
.bs-row i { font-style: normal; font-size: 11px; }
.bs-row.off i { color: var(--bad); } .bs-row.on i { color: var(--good); }
.bc-card { position: absolute; top: 112px; right: 14px; display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border-radius: 10px; background: rgba(8, 12, 24, .92); border: 1px solid rgba(255, 255, 255, .14); }
.bc-card span { display: flex; flex-direction: column; font-family: var(--font-ui, inherit); }
.bc-card b { font-size: 14px; } .bc-card em { font-style: normal; font-size: 11px; color: var(--text-dim); }
.bc-cardface { width: 18px; height: 26px; border-radius: 3px; box-shadow: 0 2px 8px rgba(0, 0, 0, .5); transform: rotate(-8deg); }
.bc-cardface.yellow { background: linear-gradient(160deg, #ffe45c, #f2b705); }
.bc-cardface.red { background: linear-gradient(160deg, #ff5a5a, #c1121f); }
.bc-strap { position: absolute; left: 50%; bottom: 58px; translate: -50% 0; display: flex; align-items: stretch; border-radius: 8px; overflow: hidden; background: rgba(8, 12, 24, .94); border: 1px solid rgba(255, 255, 255, .14); max-width: 92vw; }
.st-num { display: grid; place-items: center; min-width: 40px; font-size: 20px; font-weight: 800; background: var(--kit); color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.st-who { display: flex; flex-direction: column; justify-content: center; padding: 5px 12px; font-family: var(--font-ui, inherit); }
.st-who b { font-size: 15px; white-space: nowrap; } .st-who em { font-style: normal; font-size: 11px; color: var(--text-dim); }
.st-line { display: grid; place-items: center; padding: 0 12px; font-size: 12px; color: var(--accent); border-left: 1px solid rgba(255, 255, 255, .1); white-space: nowrap; }
.bc-stat { position: absolute; top: 112px; right: 14px; width: 220px; padding: 8px 12px; border-radius: 10px; background: rgba(8, 12, 24, .92); border: 1px solid rgba(255, 255, 255, .14); }
.ss-k { display: block; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 5px; }
.ss-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; }
.ss-row i { height: 6px; border-radius: 3px; background: var(--bad); overflow: hidden; }
.ss-row i em { display: block; height: 100%; background: var(--accent); }
.bc-review { position: absolute; top: 76px; left: 50%; translate: -50% 0; width: min(320px, 86vw); padding: 10px 12px; border-radius: 12px; background: rgba(6, 10, 22, .95); border: 1px solid rgba(120, 180, 255, .35); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.rv-k { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .12em; color: #9cc8ff; }
.rv-k i { width: 8px; height: 8px; border-radius: 50%; background: #5aa9ff; animation: bcBlink 1s infinite; }
.bc-review.done .rv-k i { animation: none; background: var(--good); }
@keyframes bcBlink { 50% { opacity: .2; } }
.rv-pitch { position: relative; height: 70px; margin: 8px 0; border-radius: 6px; background: repeating-linear-gradient(90deg, #1c6b3a 0 22px, #1a6236 22px 44px); overflow: hidden; }
.rv-line { position: absolute; top: 0; bottom: 0; width: 2px; left: var(--x); }
.rv-line.def { background: #5aa9ff; box-shadow: 0 0 8px #5aa9ff; }
.rv-line.atk { background: #ff5d6c; box-shadow: 0 0 8px #ff5d6c; }
.bc-review.in .rv-line { animation: rvSlide 1.6s ease both; }
.bc-review.in .rv-line.atk { animation-delay: .3s; }
@keyframes rvSlide { from { left: 0; opacity: 0; } to { left: var(--x); opacity: 1; } }
.rv-dot { position: absolute; left: var(--x); top: var(--y, 50%); width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: #fff; }
.rv-box { position: absolute; right: 0; top: 14%; bottom: 14%; width: 42%; border: 2px solid rgba(255, 255, 255, .8); border-right: 0; }
.rv-v { display: block; font-size: 14px; font-weight: 700; font-family: var(--font-ui, inherit); }
.bc-review.done .rv-v { color: var(--good); }
.bc-wipe { position: absolute; inset: 0; overflow: hidden; z-index: 9; }
.bc-wipe-band { position: absolute; top: -20%; bottom: -20%; left: -60%; width: 60%; background: linear-gradient(90deg, transparent, var(--accent) 30%, #0b3d22 60%, transparent); transform: skewX(-18deg); }
.bc-wipe-logo { position: absolute; top: 50%; left: 50%; width: 90px; height: 90px; margin: -45px; color: #fff; opacity: 0; }
.bc-wipe.go .bc-wipe-band { animation: wipeBand .62s cubic-bezier(.6, 0, .3, 1) both; }
.bc-wipe.go .bc-wipe-logo { animation: wipeLogo .62s ease both; }
@keyframes wipeBand { to { left: 120%; } }
@keyframes wipeLogo { 30% { opacity: 1; transform: scale(1.05); } 60% { opacity: 1; } to { opacity: 0; transform: scale(.9); } }
.bc-sub { position: absolute; left: 50%; bottom: 12px; translate: -50% 0; max-width: min(640px, 88vw); padding: 6px 12px; border-radius: 8px; background: rgba(0, 0, 0, .66); font-family: var(--font-ui, inherit); font-size: 14px; line-height: 1.35; text-align: center; }
.bc-sub b { display: inline-block; margin-inline-end: 8px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.bc-sub.co b { color: #ffc15a; }
.bc-layer.rtl .bc-sub { direction: rtl; }
#gmRoot.bc-subtitled .gm-feed { display: none; }
.rt-angle { font-style: normal; font-size: 11px; opacity: .8; letter-spacing: .08em; }
.bc-heat { margin-top: 10px; }
.bc-heat-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.bc-heat figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bc-heat canvas { width: min(200px, 40vw); height: auto; border-radius: 6px; }
@media (max-height: 460px) { .bc-heat { margin-top: 4px; } .bc-heat canvas { width: min(128px, 24vw); } .bc-heat .pm-k { display: none; } }
.bc-heat figcaption { font-size: 11px; color: var(--text-dim); letter-spacing: .1em; }

/* the pre-match show */
.pg-layer { position: absolute; inset: 0; z-index: 12; pointer-events: none; display: grid; place-items: center; }
.pg-skip { position: absolute; bottom: 16px; right: 16px; pointer-events: auto; background: rgba(8, 12, 24, .85); }
/* the show has the screen: no match furniture under it */
#gmRoot.pregame-on .gm-touch, #gmRoot.pregame-on .gm-hints, #gmRoot.pregame-on .gm-stam, #gmRoot.pregame-on .gm-feed,
#gmRoot.pregame-on .bc-mom, #gmRoot.pregame-on .gm-tools, #gmRoot.pregame-on .bc-sub { visibility: hidden; }
.pg-stage { width: min(760px, 94vw); max-height: 86vh; overflow: hidden; }
.pg-stage.in > * { animation: bcIn .5s cubic-bezier(.2, .9, .3, 1.1) both; }
.pg-fly { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 18px; border-radius: 16px; background: linear-gradient(180deg, rgba(5, 8, 16, .2), rgba(5, 8, 16, .82)); }
.pg-logo { width: 44px; height: 44px; color: var(--accent); }
.pg-fix { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; font-size: clamp(18px, 3.6vw, 30px); font-weight: 800; text-shadow: 0 2px 10px #000; }
.pg-fix i { font-style: normal; color: var(--accent); font-size: .7em; }
.pg-where { font-size: 13px; color: var(--text-dim); letter-spacing: .08em; text-transform: uppercase; }
.pg-derby { padding: 3px 10px; border-radius: 999px; background: var(--bad); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pg-sheet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); grid-template-rows: auto 1fr; gap: 10px 14px; padding: 14px; border-radius: 16px; background: rgba(6, 10, 20, .9); border: 1px solid rgba(255, 255, 255, .12); border-top: 4px solid var(--kit); }
.pg-sheet header { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; }
.pg-sheet header b { font-size: 20px; display: block; } .pg-sheet header em { font-style: normal; font-size: 12px; color: var(--text-dim); }
.pg-shape { position: relative; min-height: 200px; border-radius: 10px; background: repeating-linear-gradient(0deg, #1b6537 0 24px, #195d33 24px 48px); border: 2px solid rgba(255, 255, 255, .5); }
.pg-dot { position: absolute; translate: -50% 50%; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.pg-dot i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--kit); color: #fff; font-style: normal; font-size: 11px; font-weight: 800; border: 2px solid #fff; }
.pg-dot em { font-style: normal; font-size: 9.5px; color: #fff; text-shadow: 0 1px 3px #000; white-space: nowrap; max-width: 70px; overflow: hidden; text-overflow: ellipsis; }
.pg-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; align-content: start; min-width: 0; }
.pg-list li { display: grid; grid-template-columns: 30px 22px minmax(0, 1fr) auto auto; align-items: center; gap: 6px; font-size: 12.5px; }
.pg-list li i { font-style: normal; font-family: var(--font-num); color: var(--text-dim); text-align: right; }
.pg-list li b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.pg-list li em { font-style: normal; font-size: 10.5px; color: var(--text-dim); }
.pg-list li span { font-family: var(--font-num); font-weight: 700; color: var(--accent); }
.pg-list svg { width: 28px; height: 28px; border-radius: 50%; }
.pg-pundit { padding: 18px 20px; border-radius: 16px; background: rgba(6, 10, 20, .9); border: 1px solid rgba(255, 255, 255, .12); border-left: 4px solid var(--accent); }
.pg-pundit p { margin: 8px 0 0; font-size: clamp(14px, 2.2vw, 17px); line-height: 1.5; }
.pg-k, .pm-k { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.pg-strap { justify-self: center; align-self: end; display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 50vh; padding: 10px 22px; border-radius: 10px; background: rgba(6, 10, 20, .88); border-bottom: 3px solid var(--accent); }
.pg-strap b { font-size: 18px; } .pg-strap em { font-style: normal; font-size: 12px; color: var(--text-dim); }
.pg-coin { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 16px; border-radius: 16px; background: rgba(6, 10, 20, .8); }
.pg-coin b { font-size: 16px; } .pg-coin em { font-style: normal; color: var(--accent); font-weight: 800; letter-spacing: .1em; }
.coin { position: relative; width: 70px; height: 70px; transform-style: preserve-3d; }
.coin i { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3b0, #d4a017 70%); border: 3px solid #a67c00; backface-visibility: hidden; }
.coin i.t { transform: rotateY(180deg); }
.pg-stage.in .coin.heads { animation: coinH 1.6s cubic-bezier(.2, .7, .3, 1) both; }
.pg-stage.in .coin.tails { animation: coinT 1.6s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes coinH { from { transform: translateY(0) rotateY(0); } 40% { transform: translateY(-50px) rotateY(900deg); } to { transform: translateY(0) rotateY(1800deg); } }
@keyframes coinT { from { transform: translateY(0) rotateY(0); } 40% { transform: translateY(-50px) rotateY(900deg); } to { transform: translateY(0) rotateY(1980deg); } }
@media (max-height: 460px) {
  .pg-sheet { grid-template-columns: minmax(0, 1fr); padding: 10px 12px; gap: 6px; }
  .pg-shape { display: none; }
  .pg-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; }
  .pg-list svg { width: 22px; height: 22px; }
  .pg-list li { grid-template-columns: 22px 18px minmax(0, 1fr) auto auto; }
}
@media (max-width: 640px), (max-height: 460px) {
  .pg-sheet { grid-template-columns: minmax(0, 1fr); }
  .pg-shape { display: none; }
  .pg-list li { font-size: 11.5px; }
  .pg-stage { max-height: 80vh; }
  .bc-mom { width: 130px; }
  .bc-stat { width: 180px; }
}

/* full time */
.pm-block { display: flex; flex-direction: column; gap: 10px; margin: 8px 0; }
.pm-potm { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto auto; align-items: center; gap: 2px 12px; padding: 10px 14px; border-radius: 14px; background: linear-gradient(120deg, rgba(255, 211, 77, .14), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 211, 77, .35); animation: potmIn .7s cubic-bezier(.2, .9, .3, 1.2) both; }
.pm-potm .pm-k { grid-column: 1 / -1; color: #ffd34d; }
.pm-face { grid-row: 2 / 4; }
.pm-face svg { width: 60px; height: 60px; border-radius: 50%; border: 2px solid #ffd34d; }
.pm-potm b { font-size: 17px; } .pm-potm em { font-style: normal; font-size: 12px; color: var(--text-dim); grid-column: 2; }
.pm-rating { grid-column: 3; grid-row: 2 / 4; font-family: var(--font-num); font-size: 26px; font-weight: 800; }
@keyframes potmIn { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
.pm-tabs { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.pm-tabs button { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--panel); color: var(--text); font: inherit; font-size: 12.5px; cursor: pointer; }
.pm-tabs button.on { background: var(--accent); border-color: var(--accent); color: #04121a; font-weight: 700; }
.pm-col { text-align: start; }
.pm-ratings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pm-col header { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 13px; }
.pm-col ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pm-col li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 6px; font-size: 12.5px; }
.pm-col li b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.pm-col li em { grid-column: 2; font-style: normal; font-size: 10.5px; color: var(--text-dim); }
.pm-col li .pm-star { grid-column: 3; grid-row: 1; color: #ffd34d; font-style: normal; }
.pm-r { grid-row: 1 / 3; display: grid; place-items: center; height: 26px; border-radius: 6px; font-family: var(--font-num); font-weight: 800; font-size: 12.5px; }
.r-top { background: #1f9d55; color: #fff; } .r-good { background: #2fbf71; color: #04121a; } .r-ok { background: #d9a400; color: #04121a; } .r-low { background: #c0392b; color: #fff; }
.pm-rating.r-top, .pm-rating.r-good, .pm-rating.r-ok, .pm-rating.r-low { background: none; color: #ffd34d; }
.pm-mom { width: 100%; height: 80px; border-radius: 8px; background: rgba(255, 255, 255, .04); }
.pm-react p { margin: 6px 0; font-size: 13.5px; color: var(--text-dim); }
.pm-react blockquote { margin: 0; padding: 8px 12px; border-left: 3px solid var(--accent); font-size: 15px; }
.pm-react cite { display: block; font-size: 11px; color: var(--text-dim); font-style: normal; margin-top: 4px; }

/* seasonal menu themes */
.menu-screen { position: relative; }
.season-deco { position: absolute; inset: 0 0 auto 0; height: 100%; pointer-events: none; z-index: 0; overflow: hidden; }
.season-deco .sz-top { position: absolute; top: 0; left: 0; width: 100%; height: 90px; }
/* v126: Ramadan and winter — the same rule */
.sz-band { position: absolute; top: 0; left: 0; width: 100%; height: 24px; }
.sz-ramadan .sz-glowtop { position: absolute; inset: 0 0 auto 0; height: 240px; background: radial-gradient(110% 100% at 50% 0%, rgba(40, 60, 170, .45), transparent 70%); }
.sz-lan { position: absolute; top: 22px; left: var(--x); width: 44px; height: calc(110px + var(--drop)); translate: -50% 0; transform-origin: 50% 0; animation: lanternSway 5s ease-in-out var(--dl) infinite; filter: drop-shadow(0 0 14px rgba(255, 210, 120, .35)); }
.sz-lan line { transform: scaleY(calc(1 + var(--drop) / 22px)); }
.sz-lan > g { transform: translateY(var(--drop)); }
.sz-flame { animation: lanternGlow 3.2s ease-in-out infinite; }
.sz-moon { position: absolute; top: 54px; right: 2%; width: 84px; height: 84px; filter: drop-shadow(0 0 18px rgba(255, 231, 163, .45)); }
.sz-twinkle { position: absolute; left: var(--x); top: var(--y); width: 3px; height: 3px; border-radius: 50%; background: #ffe7a3; animation: szTwinkle 2.6s ease-in-out var(--t) infinite; }
@keyframes szTwinkle { 0%, 100% { opacity: .2; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.4); } }
@media (max-width: 700px) { .sz-lan:nth-of-type(n+5) { display: none; } .sz-moon { width: 60px; height: 60px; top: 60px; } }
.sz-winter .sz-glowtop { position: absolute; inset: 0 0 auto 0; height: 220px; background: radial-gradient(110% 100% at 50% 0%, rgba(160, 210, 255, .28), transparent 70%); }
.sz-ice { height: 30px; filter: drop-shadow(0 3px 4px rgba(120, 180, 255, .35)); }
.sz-flake { position: absolute; top: -30px; left: var(--x); width: var(--s); height: var(--s); opacity: .85; animation: szFlake var(--d) linear var(--o) infinite; }
@keyframes szFlake { 0% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(var(--sw), 50vh) rotate(180deg); } 100% { transform: translate(0, 105vh) rotate(360deg); } }
.sz-drift { position: absolute; left: -5%; right: -5%; bottom: -40px; height: 90px; border-radius: 50%; background: radial-gradient(60% 100% at 50% 0%, rgba(240, 248, 255, .5), transparent 70%); filter: blur(6px); }
/* v126: National Day — fixed-size pieces, tiled or placed, never stretched */
.sz-national .sz-glowtop { position: absolute; inset: 0 0 auto 0; height: 220px; background: radial-gradient(120% 100% at 50% 0%, rgba(31, 191, 98, .28), transparent 70%); }
.sz-najdi { position: absolute; top: 0; left: 0; width: 100%; height: 22px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }
.sz-palm { position: absolute; bottom: 0; left: -6px; width: clamp(96px, 12vw, 170px); height: auto; aspect-ratio: 160 / 220; opacity: .9; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45)); }
.sz-palm.flip { left: auto; right: -6px; transform: scaleX(-1); }
.sz-burst { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); translate: -50% -50%; opacity: 0; animation: szBurst 5.2s ease-out var(--d) infinite; }
@keyframes szBurst { 0% { opacity: 0; transform: scale(.2); } 8% { opacity: 1; } 40% { opacity: .9; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.18); } }
.sz-conf { position: absolute; top: -12px; left: var(--x); width: 6px; height: 10px; border-radius: 1px; background: var(--c); opacity: .85; rotate: var(--r); animation: szConf var(--d) linear var(--o) infinite; }
@keyframes szConf { to { transform: translateY(105vh) rotate(540deg); } }
.sz-national .sz-hi b { display: inline-grid; place-items: center; min-width: 24px; height: 20px; margin-inline-end: 8px; padding: 0 5px; border-radius: 6px; background: #fff; color: #0f7a41; font-family: var(--font-num); }
.sz-hi { position: absolute; top: 4px; inset-inline-end: 8px; padding: 3px 12px; z-index: 1; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .06em; white-space: nowrap; }
.sz-ramadan .sz-hi { top: 30px; background: rgba(12, 16, 48, .75); color: #ffe7a3; border: 1px solid rgba(201, 162, 74, .6); }
.sz-national .sz-hi { top: 30px; background: #0f7a41; color: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); display: inline-flex; align-items: center; }
.sz-winter .sz-hi { top: 36px; background: rgba(160, 200, 255, .18); color: #dff0ff; }
.sz-lantern { animation: lanternSway 5s ease-in-out infinite; transform-origin: 0 0; }
.sz-glow { animation: lanternGlow 3.2s ease-in-out infinite; }
@keyframes lanternSway { 50% { transform: rotate(3deg); } }
@keyframes lanternGlow { 50% { opacity: .55; } }
.sz-winter i { position: absolute; top: -10px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; background: #fff; opacity: .8; animation: snowFall var(--d) linear var(--o) infinite; }
@keyframes snowFall { to { transform: translate(24px, 110vh); } }
.menu-screen.theme-ramadan { --accent: #d9b35a; }
.menu-screen.theme-nationalDay { --accent: #1fbf62; }
.menu-screen.theme-winter { --accent: #7cc4ff; }
@media (prefers-reduced-motion: reduce) { .sz-lantern, .sz-glow, .sz-winter i, .sz-conf, .sz-lan, .sz-flame, .sz-twinkle, .sz-flake { animation: none; } .sz-flake { top: calc(var(--s) * 8); } .sz-burst { animation: none; opacity: .5; } .sz-conf { display: none; } .sz-winter i { top: calc(var(--o) * 900%); } }
html.reduce-motion .sz-lantern, html.reduce-motion .sz-glow, html.reduce-motion .sz-winter i { animation: none; }
html.reduce-motion .sz-burst { animation: none; opacity: .5; } html.reduce-motion .sz-conf { display: none; }
html.reduce-motion .sz-lan, html.reduce-motion .sz-flame, html.reduce-motion .sz-twinkle, html.reduce-motion .sz-flake { animation: none; }
.music-player { position: relative; margin: 18px auto 0; width: fit-content; display: flex; align-items: center; gap: 4px; padding: 3px 6px; border-radius: 999px; background: rgba(8, 12, 24, .7); border: 1px solid rgba(255, 255, 255, .1); z-index: 2; font-size: 12px; max-width: 60vw; }
.mp-b { background: none; border: 0; color: var(--text); font-size: 13px; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; }
.mp-b:hover, .mp-b:focus-visible { background: rgba(255, 255, 255, .1); }
.mp-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-dim); min-width: 0; }
.seg.seg-wrap { flex-wrap: wrap; justify-content: flex-end; }

/* v87: a screen's chunk still on its way */
/* v127: the curtain over a screen change — blur what is behind, spin the ring, lift when the screen is in */
#screenCurtain { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; pointer-events: none; opacity: 0; visibility: hidden;
  background: radial-gradient(60% 60% at 50% 45%, rgba(10, 30, 20, .55), rgba(3, 5, 12, .82)); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1);
  transition: opacity .18s ease, visibility 0s linear .18s; }
#screenCurtain.on { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .12s ease, visibility 0s; }
#screenCurtain.out { opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility 0s linear .28s; }
.sc-mark { position: relative; width: 72px; height: 72px; display: grid; place-items: center; }
.sc-ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin .9s linear infinite; filter: drop-shadow(0 0 12px color-mix(in srgb, var(--accent) 60%, transparent)); }
.sc-mark b { font: 900 italic 30px/1 var(--font-num); color: #fff; letter-spacing: -.02em; }
html.reduce-motion .sc-ring { animation-duration: 2.4s; }
body.screen-loading::after { display: none; }   /* the curtain has it now */
body.screen-loading #screen { opacity: .55; transition: opacity .2s; }
body.screen-loading::after { content: ''; position: fixed; top: 50%; left: 50%; width: 34px; height: 34px; margin: -17px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .15); border-top-color: var(--accent); animation: spin .8s linear infinite; z-index: 50; }
@keyframes spin { to { transform: rotate(360deg); } }

/* v87: a focus ring you can always see, on everything you can reach by keyboard */
:where(button, a[href], input, select, textarea, [tabindex], .tile):focus-visible {
  outline: 3px solid var(--accent) !important; outline-offset: 2px !important;
}
.switch:focus-visible { box-shadow: 0 0 0 3px var(--accent); }

/* v87: reduced motion, everywhere. Durations go to (almost) nothing rather than
   to zero, so code that waits on animationend / transitionend still hears it;
   loops play once. The match's own motion (camera, walk-out, wipes) is gated
   in script on the same setting. */
html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after {
  animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
  transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* v87: text size (Settings → Accessibility). Zoom scales the whole front end —
   the canvas of a match is left alone, its panels and captions are not. */
body:not(.in-game) #screen, .topbar, #toasts, .gm-overlay, .bc-sub, .gm-feed, .gm-hints { zoom: var(--ui-scale, 1); }
html.large-text { font-size: 100%; }
/* colour-vision filters on the match picture */
#gmCanvas.cb-protan { filter: url(#cbProtan); }
#gmCanvas.cb-deutan { filter: url(#cbDeutan); }
#gmCanvas.cb-tritan { filter: url(#cbTritan); }
/* one-handed touch: the buttons in a column at the edge, the stick zone just
   inside them — all within one thumb's arc */
#gmRoot.one-hand .tpad { grid-template-columns: repeat(2, auto); gap: 6px; transform: scale(.78); bottom: 0; top: auto; transform-origin: bottom right; }
#gmRoot.one-hand .tstick-zone { top: 38%; width: 38%; }
#gmRoot.one-hand-right .tstick-zone { left: auto; right: 190px; }
#gmRoot.one-hand-right .tpad { right: 0; left: auto; }
#gmRoot.one-hand-left .tstick-zone { right: auto; left: 190px; }
#gmRoot.one-hand-left .tpad { left: 0; right: auto; transform-origin: bottom left; }

/* v87: the save-conflict chooser and the backups list */
.sc-card { max-width: min(640px, 94vw); }
.sc-lede { color: var(--text-dim); font-size: 14px; margin: 6px 0 14px; }
.sc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.sc-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line-strong); color: var(--text); text-align: start; cursor: pointer; font: inherit; }
.sc-opt:hover, .sc-opt:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
.sc-opt b { font-size: 17px; } .sc-opt em { font-style: normal; font-size: 12px; color: var(--text-dim); }
.sc-opt ul { margin: 6px 0 0; padding-inline-start: 18px; font-size: 13px; }
.sv-list { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.bc-sub.pa b { color: #9cc8ff; }

/* v89: controller — quick-action glyphs (shown only while a pad is in use) */
body.pad-active [data-pad][data-pad-glyph] { position: relative; }
body.pad-active [data-pad][data-pad-glyph]::after {
  content: attr(data-pad-glyph);
  position: absolute; top: -8px; inset-inline-end: -8px;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  display: grid; place-items: center;
  font: 800 11px/1 var(--font-num, system-ui); color: #0a0f1a;
  background: var(--accent); box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
  pointer-events: none;
}

/* v89: the on-screen keyboard */
.osk-layer {
  position: fixed; inset: 0; z-index: 9000;
  display: grid; place-items: end center; padding: 16px;
  background: rgba(4, 7, 14, .62);
}
.osk-card {
  width: min(720px, 100%); padding: 16px; border-radius: 18px;
  background: #0d1422;               /* solid: --panel is a translucent wash */ border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.osk-field {
  min-height: 44px; padding: 10px 14px; margin-bottom: 12px; border-radius: 10px;
  background: rgba(255, 255, 255, .06); font-size: 18px; word-break: break-all;
}
.osk-field i { opacity: .45; font-style: normal; }
.osk-caret { display: inline-block; width: 2px; height: 1.1em; margin-inline-start: 2px; vertical-align: -3px; background: var(--accent); animation: oskBlink 1s steps(1) infinite; }
@keyframes oskBlink { 50% { opacity: 0; } }
.osk-row { display: flex; gap: 6px; justify-content: center; margin-top: 6px; }
.osk-key {
  flex: 1 1 0; max-width: 60px; height: 46px; border-radius: 10px;
  background: rgba(255, 255, 255, .08); color: inherit; border: 1px solid rgba(255, 255, 255, .1);
  font: 700 17px/1 system-ui, sans-serif;
}
.osk-key.wide { max-width: 140px; font-size: 14px; }
.osk-done { background: var(--accent); color: #0a0f1a; }
.osk-hint { margin: 10px 0 0; text-align: center; font-size: 12px; opacity: .65; }
@media (prefers-reduced-motion: reduce) { .osk-caret { animation: none; } }
/* v90: controller layout headings span the grid */
.ctrl-grid .ctrl-head { grid-column: 1 / -1; margin: 10px 0 2px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }

/* v91: side select — up to four people at one screen */
.ss-layer { position: fixed; inset: 0; z-index: 8800; display: grid; place-items: center; padding: 16px; background: rgba(4, 7, 14, .82); backdrop-filter: blur(6px); }
.ss-card { width: min(980px, 100%); max-height: 100%; overflow: auto; padding: 18px; border-radius: 18px; background: #0d1422; border: 1px solid rgba(255, 255, 255, .12); }
.ss-card h2 { margin: 0 0 4px; }
.ss-hint { margin: 0 0 14px; opacity: .7; font-size: 13px; }
.ss-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.ss-col { min-height: 180px; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, .04); }
.ss-col.home { box-shadow: inset 0 3px 0 var(--accent); }
.ss-col.away { box-shadow: inset 0 3px 0 #ffc63d; }
.ss-col h3 { margin: 0 0 8px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.ss-token { display: flex; align-items: center; gap: 6px; padding: 8px; margin-bottom: 8px; border-radius: 10px; background: rgba(255, 255, 255, .07); border: 1px solid transparent; }
.ss-token.is-ready { border-color: var(--accent); background: var(--accent-soft, rgba(35, 197, 94, .18)); }
.ss-token span { flex: 1; display: grid; min-width: 0; }
.ss-token b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-token i { font-style: normal; font-size: 12px; opacity: .7; }
.ss-arrow { width: 30px; height: 30px; border-radius: 8px; background: rgba(255, 255, 255, .08); color: inherit; border: 0; }
.ss-arrow:disabled { opacity: .25; }
.ss-empty { opacity: .35; text-align: center; }
.ss-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; }
@media (max-width: 640px) { .ss-cols { grid-template-columns: 1fr; } .ss-col { min-height: 0; } }
/* v92: the season grid's "show all" sits clear of the grid and the hint */
#allTiers { display: inline-flex; margin: 10px 8px 6px 0; }

/* v95: the attract demo — no controls, a banner that says how to get out */
.attract .gm-touch, .attract #gmPause, .attract .gm-hints { display: none !important; }
.gm-attract {
  position: absolute; left: 50%; bottom: max(28px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  z-index: 40; display: flex; align-items: center; gap: 12px; pointer-events: none;
  padding: 10px 20px; border-radius: 999px; background: rgba(5, 7, 14, .78);
  border: 1px solid rgba(63, 240, 138, .45); color: #fff; font-weight: 700; letter-spacing: .04em;
  animation: attractPulse 2.4s ease-in-out infinite;
}
.gm-attract b { color: #3ff08a; text-transform: uppercase; font-size: 13px; letter-spacing: .18em; }
.gm-attract span { font-size: 15px; }
@keyframes attractPulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .gm-attract { animation: none; } }
.credit-list { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: 6px 16px; margin: 8px 0 4px; font-size: 13px; }
.credit-list dt { font-weight: 700; color: var(--text); }
.credit-list dd { margin: 0; color: var(--text-dim); line-height: 1.5; }
@media (max-width: 560px) { .credit-list { grid-template-columns: 1fr; } .credit-list dd { margin-bottom: 6px; } }
/* v96: a set piece's own banner says what to press; the rotating hint behind it
   only collided with it (seen on a landscape phone, 844×390) */
.gm-setpiece:not([hidden]) ~ .gm-hints { display: none; }

/* v101: one form field. The UI audit (tools/ui-audit.mjs) found three text
   input styles and four select styles across the screens — 12 to 16px type,
   8 to 12px corners, 31 to 40px tall — each set by its own screen. They now
   share the buttons' corner and height. 16px is not a taste call: since v100
   the page can be zoomed, and iOS Safari zooms into any field set smaller
   than 16px the moment it is tapped. */
#screen input:is([type=text], [type=number], [type=search], [type=password], [type=email], :not([type])),
#screen select,
.ss-layer select, .ss-layer input:is([type=text], :not([type])) {
  font-size: 16px; line-height: 1.2;
  height: 40px; padding: 0 12px; border-radius: 12px;
  border: 1px solid var(--line); background-color: rgba(255, 255, 255, .05); color: var(--text);
  box-sizing: border-box;
}
#screen select { padding-right: 30px; }
#screen input:is([type=text], [type=number], [type=search], [type=password], [type=email], :not([type])):focus-visible,
#screen select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }

/* v105 (backlog #20): the arc pad — buttons placed round the right thumb by
   components/touchLayout.js, each from the bottom-right corner */
.tpad.arc { display: block; inset: 0; padding: 0; }
.tpad.arc .tbtn { position: absolute; margin-right: env(safe-area-inset-right); margin-bottom: env(safe-area-inset-bottom); opacity: 1; }
.tpad.arc .tbtn b { font-size: var(--tb-font, 11px); }
/* The HUD's small round buttons stay small to look at, but a thumb gets the
   44 px Apple asks for (they measured 32 px) */
@media (pointer: coarse) { .gm-hud .icon-btn.sm { position: relative; } .gm-hud .icon-btn.sm::after { content: ''; position: absolute; inset: -6px; } }
/* On a touch screen the bottom-centre belongs to the pad: the name strap and
   the subtitles move up under the score row (the strap sat over CROSS and LOB
   on a first-gen SE) */
#gmRoot:has(#gmTouch:not([hidden])) .bc-strap { bottom: auto; top: 88px; }   /* below the player strip (it covered it at 50px on an SE) */
#gmRoot:has(#gmTouch:not([hidden])) .bc-sub { bottom: auto; top: 136px; }

/* v106 (backlog #20): the touch button editor — the match's buttons over a
   stand-in pitch, the stick's half shaded, the controls in the HUD's row */
.tedit { position: fixed; inset: 0; z-index: 80; overflow: hidden; touch-action: none;
  background: repeating-linear-gradient(90deg, #2f7a3e 0 60px, #2a7039 60px 120px); }
.tedit-stick { position: absolute; left: 0; top: 56px; bottom: 0; width: 46%; display: grid; place-items: center;
  background: rgba(0, 0, 0, .18); border-right: 2px dashed rgba(255, 255, 255, .35); pointer-events: none; }
.tedit-stick span { font: 700 13px/1 system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.tedit-bar { position: absolute; top: 8px; left: 8px; right: 8px; height: 44px; display: flex; gap: 8px; align-items: center; justify-content: flex-end;
  padding: 0 8px; border-radius: 12px; background: rgba(6, 12, 10, .8); color: #fff; }
.tedit-size { display: flex; align-items: center; gap: 8px; margin-right: auto; font-weight: 700; font-size: 14px; }
.tedit-size input { width: min(180px, 28vw); }
.tedit-size output { min-width: 3.2em; font-variant-numeric: tabular-nums; }
.tedit-hint { position: absolute; left: 12px; top: 60px; margin: 0; max-width: 42%; font-size: 13px; color: rgba(255, 255, 255, .85); pointer-events: none; }
.tedit .tpad { position: absolute; }
.tedit .tbtn { cursor: grab; transition: none; }
.tedit .tbtn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
/* v107: a flick on SHOOT or PASS names the kick it has become */
.tbtn[data-flick]::after {
  content: attr(data-flick); position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%);
  padding: 2px 6px; border-radius: 6px; white-space: nowrap; pointer-events: none;
  font: 800 10px/1.2 system-ui, sans-serif; letter-spacing: .06em; color: #0b120e; background: var(--tb);
}

/* v112: a booking — the card and the name. v114: with the advantage pill, in
   one column on the left under the player strip; top right it covered SKILL
   on a small phone's touch pad, and top centre the pill sat on the strip */
.gm-alerts { position: absolute; top: 80px; left: 14px; z-index: 6; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; pointer-events: none; }
.gm-booking {
  position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center;
  padding: 8px 14px 8px 10px; border-radius: 12px; background: rgba(6, 12, 10, .82); color: #fff; pointer-events: none; max-width: min(46vw, 320px);
}
.gm-booking[hidden] { display: none; }
.bug-reds { display: inline-flex; gap: 2px; margin: 0 4px; }
.bug-reds[hidden] { display: none; }
.bug-reds b { width: 7px; height: 10px; border-radius: 1.5px; background: #e0242e; box-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.gm-booking.red .gb-card { background: linear-gradient(160deg, #ff5a5a, #c1121f); }
.gm-booking .gb-card { grid-row: span 2; width: 18px; height: 26px; border-radius: 3px; background: #ffd21f; box-shadow: 0 2px 6px rgba(0, 0, 0, .5); }
.gm-booking b { font-size: 14px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-booking span { font-size: 12px; color: rgba(255, 255, 255, .75); }
.gm-booking.in { animation: gbIn .35s cubic-bezier(.2, .8, .3, 1.2); }
.gm-booking.in .gb-card { animation: gbFlip .5s ease-out; }
@keyframes gbIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes gbFlip { from { transform: rotateY(90deg) scale(.6); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .gm-booking.in, .gm-booking.in .gb-card { animation: none; } }
.reduce-motion .gm-booking.in, .reduce-motion .gm-booking.in .gb-card { animation: none; }
/* v113: advantage being played */
.gm-adv {
  position: relative; pointer-events: none;
  padding: 5px 14px; border-radius: 999px; background: rgba(6, 12, 10, .82); color: #7dffb0;
  font: 800 12px/1.2 system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase;
}
.gm-adv[hidden] { display: none; }

/* v115: the kit designer's colour swatches (a football palette, not a wheel) */
.kd-swatches { gap: 8px; }
.kd-sw {
  position: relative; width: 32px; height: 32px; padding: 0; border-radius: 50%; cursor: pointer;
  background: var(--c); border: 2px solid rgba(255, 255, 255, .22); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35);
}
.kd-sw.on { border-color: #fff; box-shadow: 0 0 0 3px var(--accent), inset 0 0 0 1px rgba(0, 0, 0, .35); }
.kd-sw:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (pointer: coarse) { .kd-sw::after { content: ''; position: absolute; inset: -6px; } }
.ci-kitnote #kdReset { align-self: flex-start; width: auto; }
.kd-preview svg { display: block; margin: auto; }

/* v118: Custom Cup */
.cup-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; }
.cup-name { flex: 1 1 220px; }
.cup-pick { margin-top: 14px; }
.cup-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; max-height: 220px; overflow-y: auto; }
.cup-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; min-height: 44px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .04); color: var(--text); cursor: pointer; }
.cup-chip b { font-size: 13px; font-weight: 650; } .cup-chip i { font-style: normal; font-size: 12px; color: var(--text-mute); }
.cup-chip.on { border-color: var(--accent); background: var(--accent-soft); }
.cup-picked { margin-top: 14px; }
.cup-picked-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 8px; }
.cup-picked-head span { color: var(--text-mute); font-size: 13px; margin-right: auto; }
.cup-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; }
.cup-entry { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 10px; background: rgba(255, 255, 255, .04); }
.cup-entry b { flex: 1; font-size: 13px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cup-entry.you { outline: 1px solid var(--accent); }
.cup-star, .cup-x { min-width: 44px; min-height: 40px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--text); cursor: pointer; font-weight: 700; }
.cup-entry.you .cup-star { color: var(--accent); border-color: var(--accent); }
.cup-make #cupDraw { margin-top: 16px; }
.cup-vs { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 8px 0 14px; }
.cup-vs b { font-size: 18px; } .cup-vs span { color: var(--text-mute); font-weight: 800; }
.cup-bracket { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.cup-round { display: flex; flex-direction: column; gap: 8px; min-width: 190px; justify-content: space-around; }
.cup-tie { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .04); font-size: 13px; }
.cup-tie span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-mute); }
.cup-tie span.w { color: var(--text); font-weight: 700; }
.cup-tie em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.cup-tie small { grid-column: 1 / -1; color: var(--text-mute); font-size: 11px; }
.cup-tie.mine { outline: 1px solid var(--accent); }
.cup-end { text-align: center; }
/* v119: a derby picked on Kick Off */
.ts-derby { text-align: center; margin-bottom: 8px; font: 800 12px/1.2 system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #ffb347; }

/* ---------------- v129: the Ultimate shop and the checkout ---------------- */
.ult-sub { color: #b892ff; font-weight: 900; }
.ult-shop { display: grid; gap: 16px; margin-top: 14px; }
.ult-hero {
  display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 18px;
  background: radial-gradient(120% 140% at 0% 0%, rgba(184,146,255,.28), transparent 60%), linear-gradient(135deg, #1a1333, #0b0c1a);
  border: 1px solid rgba(184,146,255,.3);
}
.ult-hero h2 { margin: 0; font-size: 22px; }
.ult-hero p { margin: 2px 0 0; color: var(--muted, #9aa3b5); }
.ult-hero p b { color: #d9c9ff; font-family: var(--font-num); }
.ult-gem { font-size: 34px; color: #b892ff; text-shadow: 0 0 18px rgba(184,146,255,.7); line-height: 1; }
.ult-testchip { margin-left: auto; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; border-radius: 99px; background: rgba(255,196,0,.14); color: #ffd35c; border: 1px solid rgba(255,196,0,.35); }
.ult-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.ult-b {
  position: relative; display: grid; justify-items: center; gap: 4px; padding: 20px 12px 14px; border-radius: 16px; cursor: pointer;
  background: linear-gradient(180deg, rgba(184,146,255,.12), rgba(255,255,255,.03)); border: 1px solid rgba(184,146,255,.22); color: #fff;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.ult-b:hover, .ult-b:focus-visible { transform: translateY(-3px); border-color: rgba(184,146,255,.6); box-shadow: 0 10px 28px rgba(120,80,220,.25); }
.ult-b strong { font-family: var(--font-num); font-size: 30px; line-height: 1; }
.ult-b small { color: #b8b0d6; font-size: 12px; }
.ult-b small b { color: var(--accent); }
.ult-stack { height: 34px; display: flex; align-items: center; }
.ult-stack em { font-style: normal; color: #b892ff; font-size: 22px; margin: 0 -3px; text-shadow: 0 0 10px rgba(184,146,255,.6); }
.ult-price { margin-top: 8px; width: 100%; padding: 8px 0; border-radius: 10px; background: var(--accent); color: #04130a; font-weight: 800; font-family: var(--font-num); }
.ult-tag { position: absolute; top: -9px; font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 99px; background: #b892ff; color: #140b2b; }
.ult-b.tier-4 { background: linear-gradient(180deg, rgba(184,146,255,.26), rgba(35,197,94,.08)); border-color: rgba(184,146,255,.5); }

.co-layer {
  position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 16px; overflow-y: auto;
  background: rgba(3,5,10,.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); opacity: 0; transition: opacity .18s;
}
.co-layer.in { opacity: 1; }
.co-sheet {
  position: relative; width: min(460px, 100%); display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 22px;
  border-radius: 20px; background: #0c111b; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 30px 80px rgba(0,0,0,.6);
  transform: translateY(12px) scale(.98); transition: transform .2s;
}
.co-layer.in .co-sheet { transform: none; }
.co-wide { grid-column: 1 / -1; }
.co-x { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(255,255,255,.07); color: #fff; cursor: pointer; }
.co-test { grid-column: 1 / -1; margin: 0 36px 0 0; padding: 8px 12px; border-radius: 10px; font-size: 12px; background: rgba(255,196,0,.1); border: 1px solid rgba(255,196,0,.3); color: #ffe39a; }
.co-test b { color: #ffd35c; margin-right: 6px; letter-spacing: .06em; }
.co-head { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; }
.co-head h2 { margin: 0; font-size: 20px; }
.co-head p { margin: 2px 0 0; color: #9aa3b5; font-size: 13px; }
.co-head p b { color: var(--accent); }
.co-gem { color: #b892ff; font-size: 28px; text-shadow: 0 0 14px rgba(184,146,255,.6); }
.co-total { margin-left: auto; font-family: var(--font-num); font-size: 22px; }
.co-card {
  grid-column: 1 / -1; justify-self: center; width: min(100%, 320px); position: relative; aspect-ratio: 1.586; border-radius: 14px; padding: 16px 18px; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; color: #fff; overflow: hidden;
  background: linear-gradient(135deg, #1d2536, #0f141f); border: 1px solid rgba(255,255,255,.1);
}
.co-card::after { content: ''; position: absolute; inset: 0; background: radial-gradient(80% 90% at 100% 0%, rgba(35,197,94,.25), transparent 60%); pointer-events: none; }
.co-card[data-brand="visa"] { background: linear-gradient(135deg, #1a2d6b, #0d1633); }
.co-card[data-brand="mastercard"] { background: linear-gradient(135deg, #3b1d12, #1a0e0b); }
.co-card[data-brand="amex"] { background: linear-gradient(135deg, #16475a, #0b2029); }
.co-card[data-brand="mada"] { background: linear-gradient(135deg, #0f3b2a, #07170f); }
.co-chip { position: absolute; top: 18px; left: 18px; width: 38px; height: 28px; border-radius: 6px; background: linear-gradient(135deg, #e8cf7a, #a8893a); }
.co-brand { position: absolute; top: 18px; right: 18px; font-style: italic; font-weight: 900; font-size: 18px; letter-spacing: .04em; }
.co-num { font-family: var(--font-num); font-size: clamp(16px, 5vw, 21px); letter-spacing: .12em; }
.co-meta { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: .1em; color: #c6cedc; }
.co-f { display: grid; gap: 5px; font-size: 12px; color: #9aa3b5; }
.co-f input, .co-f select {
  font: inherit; font-size: 15px; color: #fff; padding: 11px 12px; border-radius: 10px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); outline: none; min-width: 0;
}
.co-f input:focus, .co-f select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.co-f.bad input { border-color: #ff5d6c; }
.co-f small { min-height: 0; color: #ff8a95; font-size: 11px; }
.co-f small:empty { display: none; }
.co-pay { padding: 14px; font-size: 16px; }
.co-fine { margin: 0; text-align: center; font-size: 11px; color: #6b7589; }
.co-sheet.busy { min-height: 280px; place-items: center; }
.co-proc { grid-column: 1 / -1; display: grid; justify-items: center; gap: 14px; color: #c6cedc; }
.co-proc .sc-mark { position: relative; }
.co-done { grid-column: 1 / -1; display: grid; justify-items: center; gap: 10px; text-align: center; }
.co-done h2 { margin: 0; }
.co-tick { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 32px; font-weight: 900; color: #04130a; background: var(--accent); box-shadow: 0 0 0 8px var(--accent-soft); animation: co-pop .35s cubic-bezier(.2,1.6,.4,1); }
@keyframes co-pop { from { transform: scale(.4); opacity: 0; } }
.co-big { margin: 0; font-family: var(--font-num); font-size: 26px; font-weight: 800; }
.co-receipt { width: 100%; display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 6px 0; padding: 14px; border-radius: 12px; background: rgba(255,255,255,.04); font-size: 13px; text-align: left; }
.co-receipt dt { color: #8b95a7; }
.co-receipt dd { margin: 0; text-align: right; font-family: var(--font-num); overflow-wrap: anywhere; }
.co-done .co-test { margin: 0; }
@media (max-width: 420px) { .co-sheet { padding: 18px 14px; } }

/* v136: less text — Settings in sections, trophies explain themselves on a tap */
.set-tabs { margin-bottom: 14px; }
.set-tabs .subtab { display: inline-flex; align-items: center; gap: 7px; }
.set-tabs .subtab svg { opacity: .8; }
.trophy { cursor: pointer; }
.trophy .tr-how { display: none; }
.trophy.open .tr-how { display: block; }
.trophy:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hall-tag svg { vertical-align: -2px; }
.cm-mode .cm-facts { margin: 8px 0 4px; flex-wrap: wrap; }
.cm-mode .cm-facts .fact { min-width: 0; }
.cm-mode .cm-facts .fact b { white-space: normal; font-size: 13px; letter-spacing: .01em; text-transform: none; font-style: normal; }
/* the honours table scrolls inside its panel on a phone rather than widening the page */
.wtable-scroll { max-width: 100%; overflow-x: auto; }
.trophies > *, .trophies .panel { min-width: 0; }
/* v136: a league table wider than a small phone scrolls inside itself rather than pushing the page */
@media (max-width: 480px) { .wtable { display: block; max-width: 100%; overflow-x: auto; } }

/* ---- v150: a promo pull's own reveal (squad.js promoWeather) ---- */
.walkout-card.promo-back .card-back {
  background:
    radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--promo-a) 70%, transparent), transparent 62%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .06) 0 4px, transparent 4px 11px),
    linear-gradient(180deg, var(--promo-b), #070a14);
  border-color: var(--promo-a);
}
.walkout-card.promo-back .card-back span {
  display: block; max-width: 80%; text-align: center; font-size: 22px; line-height: 1.05; letter-spacing: -.01em;
  text-shadow: 0 0 18px var(--promo-a);
}
.promo-fx i { position: absolute; top: -24px; animation: confFall linear forwards; background: var(--c); }
/* Future Stars: thin streaks of light falling fast */
.fx-future i { width: 2px; height: 34px; border-radius: 2px; opacity: .9; box-shadow: 0 0 8px var(--c); animation-name: fxStreak; }
@keyframes fxStreak { to { transform: translateY(110vh); opacity: .2; } }
/* Heroes of the Desert: sand blown across the stage */
.fx-desert i { width: 4px; height: 4px; border-radius: 50%; top: auto; bottom: calc(10% + var(--y, 0%)); left: -10px !important; animation-name: fxSand; }
.fx-desert i:nth-child(3n) { --y: 30%; } .fx-desert i:nth-child(3n + 1) { --y: 55%; } .fx-desert i:nth-child(3n + 2) { --y: 75%; }
@keyframes fxSand { to { transform: translate(110vw, -30px); opacity: 0; } }
/* Winter Legends: slow snow */
.fx-winter i { width: 7px; height: 7px; border-radius: 50%; background: #ffffff; opacity: .9; animation-name: fxSnow; animation-timing-function: ease-in-out; }
@keyframes fxSnow { 50% { transform: translate(18px, 50vh); } to { transform: translate(-10px, 105vh); opacity: .5; } }
/* National Day: green and white ribbons */
.fx-nationalday i { width: 12px; height: 5px; border-radius: 2px; }
.reduce-motion .promo-fx { display: none; }

/* ---- v152: the trophy cabinet ---- */
.cabinet .cab-3d { display: block; width: 100%; height: clamp(200px, 38vw, 360px); border-radius: 12px; background: #0c0907; }
.cab-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.cab-list li { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); }
.cab-list li span { grid-row: span 2; font-size: 20px; }
.cab-list li b { font-size: 13px; }
.cab-list li em { font-style: normal; font-size: 11px; color: var(--text-dim); }

/* v156: through a goal's celebration nothing is controlled — the touch pad steps
   aside, and the subtitle (moved to the top on touch, under the GOAL card) drops
   to the bottom where the pad was */
#gmRoot.gm-goal-on #gmTouch, #gmRoot.gm-replay-on #gmTouch,
#gmRoot.gm-goal-on .gm-hints, #gmRoot.gm-replay-on .gm-hints { visibility: hidden; }
#gmRoot.gm-goal-on:has(#gmTouch:not([hidden])) .bc-sub { top: auto; bottom: 14px; }

/* v157: on a phone held sideways the top of the screen is short, and the
   transient boards landed on the stamina bar and on each other. The bar is not
   needed while a set-piece banner or the added-time board is up; a review card
   sits below the set-piece banner and sends the caption to the bottom-left
   (the stick's empty corner) instead of on top of its picture. */
@media (max-height: 520px) {
  #gmRoot:has(.gm-setpiece:not([hidden])) .gm-stam,
  #gmRoot:has(#bcBoard:not([hidden])) .gm-stam { visibility: hidden; }
  #gmRoot:has(.gm-setpiece:not([hidden])) .bc-review { top: 108px; }
}
#gmRoot:has(#bcReview:not([hidden])):has(#gmTouch:not([hidden])) .bc-sub { top: auto; bottom: 14px; left: 14px; translate: none; max-width: 48vw; text-align: start; }

/* v182: the goal gallery in the Trophy Room */
.goal-gallery .gg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.goal-gallery li { display: flex; gap: 6px; align-items: stretch; }
.goal-gallery .gg-play { flex: 1; display: grid; grid-template-columns: auto auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: start; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2, rgba(255,255,255,.04)); color: var(--text); font: inherit; cursor: pointer; }
.goal-gallery .gg-play i { grid-row: 1 / 3; font-style: normal; color: var(--accent); font-size: 18px; }
.goal-gallery .gg-play b { grid-row: 1 / 3; font-family: var(--font-num); font-size: 20px; }
.goal-gallery .gg-play span { font-weight: 700; }
.goal-gallery .gg-play em { font-style: normal; font-size: 12px; color: var(--text-dim); }
.goal-gallery .gg-rec { width: 40px; border-radius: 12px; border: 1px solid var(--line); background: transparent; color: var(--accent); cursor: pointer; font-size: 16px; }
.goal-gallery .gg-del { width: 40px; border-radius: 12px; border: 1px solid var(--line); background: transparent; color: var(--text-dim); cursor: pointer; }

/* v185: a phone held sideways puts the notch or Dynamic Island at the left or
   right edge, and the menus ran under it. Last in the file so it wins over the
   padding shorthands above; where there is no notch env() is 0 and nothing moves. */
.topbar { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
.screen { padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right)); }
@media (max-width: 640px) {
  .screen { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
}

/* v187: the full-time card scrolls. On a phone held sideways it is taller than
   the screen, and it sat centred in a box that could not scroll inside a match
   surface that blocks touch scrolling — "Back to Ultimate XI" was below the
   bottom edge with no way down to it. The card now starts at the top when it
   does not fit (auto margins centre it when it does), the overlay scrolls with
   a thumb, and on a short screen the buttons ride along the bottom edge so the
   way out is always in view. The pause menu keeps its own layout. */
.gm-overlay:not(.is-pause) { align-items: start; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
.gm-overlay:not(.is-pause) > .gm-panel { margin-block: auto; }
@media (max-height: 560px) {
  .gm-overlay:not(.is-pause) .gm-btns {
    position: sticky; bottom: -18px; z-index: 1;
    margin: 12px -22px -22px; padding: 12px 22px calc(14px + env(safe-area-inset-bottom));
    background: rgba(6, 9, 18, .96); border-top: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius);
  }
}

/* v188: the pack reveal on a phone held sideways. The Nation / Position / Club
   plinths fade out once the card arrives but kept their space, so the card
   landed below the bottom edge of a 430 px screen and had to be scrolled to.
   Faded, they leave the flow; and the card is sized to the height there is. */
@media (max-height: 560px) and (orientation: landscape) {
  .plinths.done { position: absolute; top: 0; left: 0; right: 0; margin: 0; }
  .pack-stage { gap: 10px; }
  /* the stat radar is on the card everywhere else; here it is what pushed the
     rest off the screen */
  .walkout .pc-radar-wrap { display: none; }
}

/* v189: a newer match protocol is out (js/net/protocol.js) */
.ol-update { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; margin-bottom: 12px; border-color: rgba(255, 196, 0, .45); }
.ol-update b { color: #ffd34d; font-size: 14px; }
.ol-update span { font-size: 12.5px; color: var(--text-dim); }

/* v189: the match on a phone held sideways. The notch or Dynamic Island takes
   the left or right edge (about 59 px on a current iPhone), and these sat 10 to
   16 px from it: the pause menu's list, the broadcast boards, the manager's
   shout wheel, the alerts. They keep their spacing where there is no cut-out
   (env() is 0) and step clear of it where there is. */
.mgr-walk, .bc-mom, .bc-board, .bc-subs, .gm-alerts { left: max(14px, env(safe-area-inset-left)); }
.tedit-hint { left: max(12px, env(safe-area-inset-left)); }
.mgr-hud, .pg-skip { right: max(16px, env(safe-area-inset-right)); }
.bc-card, .bc-stat { right: max(14px, env(safe-area-inset-right)); }
.gm-hints, .gr-hint { right: max(12px, env(safe-area-inset-right)); }
.gr-cam { right: max(10px, env(safe-area-inset-right)); }
.pause-nav { padding-left: max(26px, calc(env(safe-area-inset-left) + 10px)); }
.pause-panel { padding-right: max(30px, calc(env(safe-area-inset-right) + 10px)); }
@media (max-width: 720px) {
  .pause-nav { padding-left: max(18px, calc(env(safe-area-inset-left) + 10px)); }
  .pause-panel { padding-left: max(18px, calc(env(safe-area-inset-left) + 10px)); padding-right: max(18px, calc(env(safe-area-inset-right) + 10px)); }
}
.pack-overlay { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
.gm-overlay:not(.is-pause) { padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right)); }

/* v190: report and block */
.ps-card { width: min(380px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; }
.ps-name { font-size: 20px; }
.ps-btns, .ps-reasons { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ps-reasons .btn { flex: 1 1 45%; }
.ps-list { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.ps-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; border-radius: 10px; background: rgba(255, 255, 255, .04); }
.ol-row .ol-name { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: inherit; cursor: pointer; text-align: start; text-decoration: underline dotted rgba(255, 255, 255, .3); text-underline-offset: 3px; }

/* v195: the guild weekend panel inside the guild card */
.gw { margin: 14px 0 6px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.gw.open { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.gw .ol-kicker { margin: 0; }
.gw-sub { margin: 0; font-size: 12px; color: var(--muted); }
.gw-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.gw-stats div { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border-radius: 10px; background: color-mix(in srgb, var(--text) 5%, transparent); }
.gw-stats b { font-size: 18px; font-variant-numeric: tabular-nums; }
.gw-stats small { color: var(--muted); font-size: 11px; }
.gw-stats span { font-size: 11px; color: var(--muted); }
.gw-top, .gw-last { margin: 0; font-size: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.gw-top em, .gw-last em { font-style: normal; color: var(--muted); }
.gw-last small { color: var(--muted); }
.gw-rewards summary { cursor: pointer; font-size: 12px; color: var(--muted); }
.gw-rewards ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.gw-rewards li { display: flex; justify-content: space-between; gap: 10px; }
.gw-top span b { margin-inline-start: 2px; }

/* v196: the Draft */
.draft-screen { display: flex; flex-direction: column; gap: 14px; }
.draft-screen > .btn.ghost { align-self: flex-start; }
.draft-entry { display: flex; flex-direction: column; gap: 12px; }
.draft-entry p { margin: 0; }
.draft-rewards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.draft-rewards li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 10px; border-radius: 9px; background: color-mix(in srgb, var(--text) 5%, transparent); font-size: 13px; }
.draft-rewards li:last-child { background: color-mix(in srgb, var(--gold, #f4c95d) 14%, transparent); }
.draft-step { margin: 0 0 10px; font-size: 18px; }
.draft-step small { color: var(--muted); font-weight: 600; font-size: 12px; margin-inline-start: 6px; }
.draft-shapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.draft-shape-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: color-mix(in srgb, var(--text) 4%, transparent); color: var(--text); font: inherit; cursor: pointer; }
.draft-shape-btn:hover, .draft-shape-btn:focus-visible { border-color: var(--accent); }
.draft-shape { width: 100%; max-width: 120px; }
.draft-shape rect { fill: #0c2a1e; stroke: rgba(120, 255, 190, .2); stroke-width: 1.5; }
.draft-shape circle { fill: var(--accent); }
.draft-layout { display: grid; gap: 14px; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; }
.draft-layout .facts { margin-bottom: 10px; }
.draft-pitch { max-width: 420px; margin: 0 auto; }
.draft-pitch .slot { cursor: default; width: 64px; }
.draft-pitch .slot:hover { transform: translate(-50%, -50%); border-color: inherit; }
.slot.draft-now { border: 2px solid var(--accent); box-shadow: 0 0 0 4px var(--accent-soft), 0 0 22px var(--accent-soft); animation: draftPulse 1.4s ease-in-out infinite; }
@keyframes draftPulse { 50% { box-shadow: 0 0 0 7px transparent, 0 0 26px var(--accent-soft); } }
@media (prefers-reduced-motion: reduce) { .slot.draft-now { animation: none; } }
.draft-offer { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px; }
.draft-card { padding: 0; border: 0; background: none; cursor: pointer; border-radius: 14px; display: flex; justify-content: center; color: var(--text); font: inherit; text-align: start; }
.draft-card .pcard { width: 100%; }
.draft-card:hover .pcard, .draft-card:focus-visible .pcard { outline: 2px solid var(--accent); outline-offset: 2px; }
.draft-card .pcard { pointer-events: none; }
.draft-bracket { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.draft-bracket li { display: grid; grid-template-columns: 96px 14px 1fr auto; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--line); font-size: 13px; }
.draft-bracket li > span { color: var(--muted); font-size: 11px; }
.draft-bracket li .db-kit { width: 14px; height: 14px; border-radius: 4px; background: linear-gradient(135deg, var(--c1) 50%, var(--c2) 50%); }
.draft-bracket li em { font-style: normal; font-variant-numeric: tabular-nums; color: var(--muted); }
.draft-bracket li.next { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.draft-bracket li.won em { color: var(--good); }
.draft-bracket li.lost { opacity: .75; }
.draft-bracket li.lost em { color: var(--bad); }
.draft-done.champ { border-color: color-mix(in srgb, var(--gold, #f4c95d) 55%, transparent); }
.draft-pay { font-size: 20px; font-weight: 800; margin: 6px 0 12px; }
.draft-layout .panel > .btn { margin-inline-end: 8px; margin-top: 4px; }
@media (max-width: 900px) {
  .draft-layout { grid-template-columns: minmax(0, 1fr); }
  /* the choice first on a phone, the pitch it fills underneath */
  .draft-layout > .panel:nth-child(2) { order: -1; }
  .draft-pitch { max-width: 320px; }
}
@media (max-width: 520px) {
  .draft-offer { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .draft-offer .pcard { zoom: .8; }
  .draft-bracket li { grid-template-columns: 78px 12px 1fr auto; padding: 8px; }
  /* compact slots: the back line and the keeper otherwise overlap on a narrow pitch */
  .draft-pitch .slot { width: 54px; padding: 4px 3px; }
  .draft-pitch .slot-crest { display: none; }
  .draft-pitch .slot-ovr { font-size: 15px; }
}

/* v197: scenarios (Skills & Practice → Scenarios) */
.scen-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 12px; }
.scen-card { display: flex; flex-direction: column; gap: 8px; }
.scen-card.all { border-color: color-mix(in srgb, #f4c95d 50%, transparent); }
.scen-top { display: flex; align-items: center; gap: 8px; }
.scen-top b { flex: 1; font-size: 16px; }
.scen-min { font-family: var(--font-num); font-weight: 800; font-size: 13px; padding: 3px 7px; border-radius: 7px; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.scen-got { color: #f4c95d; letter-spacing: 2px; }
.scen-score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 8px; border-radius: 10px; background: color-mix(in srgb, var(--text) 5%, transparent); }
.scen-score > span { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.scen-score em { font-style: normal; font-weight: 700; font-size: 12px; text-align: center; }
.scen-score > b { font-family: var(--font-num); font-size: 26px; font-variant-numeric: tabular-nums; }
.scen-red { font-style: normal; display: block; font-size: 10.5px; color: var(--bad); }
.scen-brief { margin: 0; font-size: 13px; }
.scen-sides { margin: 0; font-size: 11.5px; color: var(--muted); }
.scen-goals { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--muted); }
.scen-goals li.ok { color: #f4c95d; }
.scen-card > .btn { align-self: flex-start; }
.scen-stars { color: #f4c95d; letter-spacing: 3px; }
.dr-objs li.no { color: var(--muted); }
.dr-objs li em { font-style: normal; color: #f4c95d; }

/* v198: Store → Style (screens/styleShop.js) and the locks in the pickers it sells into */
.sty-kind { margin: 18px 4px 8px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.sty-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.sty-item { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 12px; }
.sty-item.owned { border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.sty-item p { margin: 0; font-size: 11.5px; color: var(--muted); flex: 1; }
.sty-prev { height: 84px; display: grid; place-items: center; }
.sty-pose { width: 96px; height: 78px; }
.sty-pose circle, .sty-pose line, .sty-pose polyline { fill: none; stroke: var(--text); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.sty-pose circle { fill: var(--text); }
.sty-pitch { width: 120px; height: 78px; }
.sty-on { font-size: 12px; font-weight: 700; color: var(--good); }
.ci-opt.is-locked, .bld-seg button.is-locked { opacity: .55; }

/* v201: Kick Off — the settings as pictures */
.seg .seg-ico { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; padding-inline: 10px; }
.mode-pics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.mode-pics button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; }
.mode-pics .mp { display: inline-flex; align-items: center; gap: 2px; }
.mode-pics .mp i { font-style: normal; font-size: 9px; font-weight: 800; opacity: .6; letter-spacing: .04em; }
.mode-pics b { font-size: 11px; font-weight: 700; }
.qm-more { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; }
.qm-more .btn { display: inline-flex; align-items: center; gap: 6px; padding-inline: 14px; }
.btn.big .ico { vertical-align: -4px; }
.ts-hints.touch-only { display: none; }

/* v201: the Division tab — tiles that are buttons, stats as chips, reward tables folded */
button.clash-opp { font: inherit; color: inherit; text-align: start; cursor: pointer; padding-right: 30px; transition: border-color .15s, background .15s, transform .15s; }
button.clash-opp:hover, button.clash-opp:focus-visible { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
button.clash-opp:active { transform: scale(.98); }
button.clash-opp:disabled { cursor: default; opacity: .55; }
.co-go { position: absolute; right: 9px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-style: normal; }
.clash-opp em { font-style: normal; }
.facts.mode-stats { margin: 6px 0 10px; }
.rank-fold { margin-top: 6px; }
.rank-fold > summary { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--muted); list-style: none; }
.rank-fold > summary::-webkit-details-marker { display: none; }
.rank-fold[open] > summary { margin-bottom: 8px; }
.btn .ico { vertical-align: -3px; }
.gw-head { display: flex; align-items: center; gap: 8px; justify-content: space-between; }

/* v201: saved squads as tiles */
.saved-squads { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; }
.saved-squads li { flex-direction: column; align-items: stretch; gap: 4px; padding: 8px; min-height: 66px; }
.saved-squads li span:not(.sq-acts) { font-size: 11px; color: var(--muted); }
.saved-squads li.free { padding: 0; background: none; }
.sq-acts { display: flex; gap: 4px; }
.sq-acts .mini-btn { flex: 1; display: inline-flex; justify-content: center; padding-inline: 0; }
.sq-plus { width: 100%; height: 100%; min-height: 66px; border-radius: 8px; border: 1px dashed var(--line); background: rgba(255, 255, 255, .02); color: var(--muted); font: inherit; font-size: 22px; cursor: pointer; }
.sq-plus:hover, .sq-plus:focus-visible { border-color: var(--accent); color: var(--accent); }

/* v201: a skill game's card leads with its picture */
.sk-card .panel-head { flex-wrap: nowrap; }
.sk-card .panel-head h2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 0 8px; }
.sk-pic { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 16px; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
/* v201: an ⓘ that wraps onto its own line in a panel head stays at the right, so its popover opens inside the panel */
.panel-head > .about { margin-inline-start: auto; }
/* …and in a centred row of buttons it opens as a line underneath instead of a popover */
.qm-more .about[open] { flex-basis: 100%; display: flex; flex-direction: column; align-items: center; }
.qm-more .about > p { position: static; width: auto; max-width: 520px; margin-top: 8px; }
.mode-pics { width: 100%; box-sizing: border-box; }
.mode-pics button { min-width: 0; padding-inline: 4px; }
.mode-pics b { white-space: normal; text-align: center; line-height: 1.15; overflow-wrap: anywhere; }
.about:not([open]) > p { display: none; }