/* ==========================================================================================
   Game Plan — design system and components.
   One scene (the stadium), one hero object (the pitch), sharp light surfaces floating in it.
   Every colour, shadow and duration is a token below; components only compose them.
   Nothing but pieces, dots and thumbs is round.
   ========================================================================================== */

@font-face { font-family: "Barlow Condensed"; font-weight: 500; font-display: swap; src: url("../fonts/BarlowCondensed-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url("../fonts/BarlowCondensed-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url("../fonts/BarlowCondensed-700.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url("../fonts/Barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-display: swap; src: url("../fonts/Barlow-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url("../fonts/Barlow-600.woff2") format("woff2"); }

:root {
  --font-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --font-ui: "Barlow", "Segoe UI", system-ui, sans-serif;

  /* ink — every step reads on the stadium */
  --ink-900: #10151f;
  --ink-700: #1f2836;
  --ink-500: #34404f;
  --ink-300: #4d5868;

  /* paper / surfaces */
  --paper: #ffffff;
  --paper-2: #f2f4f7;
  --surface: rgba(255, 255, 255, 0.84);
  --surface-2: rgba(255, 255, 255, 0.62);
  --surface-strong: rgba(255, 255, 255, 0.95);
  --surface-ink: rgba(16, 21, 31, 0.07);
  --line: rgba(16, 21, 31, 0.12);
  --line-strong: rgba(16, 21, 31, 0.22);
  --dark: #10151f;

  /* accents — each carries one meaning */
  --accent: #2d6fd6;          /* selection / focus */
  --accent-ink: #1b4ea6;
  --accent-soft: rgba(45, 111, 214, 0.14);
  --accent-glow: rgba(45, 111, 214, 0.32);
  --ok: #2f9e63;              /* natural position */
  --warn: #d9891f;            /* unfamiliar position */

  --grass-edge: rgba(255, 255, 255, 0.82);

  /* A4 (ADR-062): the European Super League -- only on the league's own surfaces (its table, its broadcast) */
  --esl-night: #081650;
  --esl-navy: #0c2272;
  --esl-royal: #1641b8;
  --esl-gold: #c9a45c;
  --esl-gold-light: #ead39b;
  --esl-gold-deep: #9a7536;
  --esl-ice: #e7edfa;

  /* A7: the European Super Cup -- its own deep teal and silver, nothing of the league's; only on the cup's surfaces
     (its bracket, its ties, its letters, its broadcast). --cup-aqua is for the cup's dark surfaces only, never paper. */
  --cup-deep: #083c42;
  --cup-teal: #0f5c63;
  --cup-teal-bright: #18737a;  /* the light end of the cup's head band */
  --cup-aqua: #5fd1c4;
  --cup-silver: #c9d1d6;
  --cup-silver-light: #eef2f4;
  --cup-silver-deep: #8c9aa3;
  --cup-mist: #e3f1f0;

  /* depth */
  --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.10), 0 10px 26px rgba(16, 24, 40, 0.16);
  --shadow-2: 0 6px 16px rgba(16, 24, 40, 0.18), 0 24px 56px rgba(16, 24, 40, 0.24);
  --shadow-pitch: 0 34px 80px rgba(6, 26, 14, 0.45), 0 8px 20px rgba(6, 26, 14, 0.28);
  --blur: 18px;

  /* motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-std: cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-micro: 130ms;
  --t-fast: 190ms;
  --t-base: 260ms;
  --t-page: 340ms;
  --t-move: 460ms;

  /* layout */
  --pad: clamp(16px, 1.5vw, 32px);
  --nav-top: calc(var(--shell-h, 0px) + 10px); /* B12: the career shell's bar sits above the Game Plan */
  --nav-h: clamp(48px, 5.4vh, 60px);
  --goal-gap: 0px;
  --board-stretch: 1.5;        /* the board is wider than a real pitch, like a tactics board */
  --stage-bottom: 22px;
  --foot-h: 40px;
  --pitch-gap: clamp(28px, 2.6vw, 56px);
  --pitch-w: 600px;            /* written by the view from the measured pitch */
  --sphere: calc(var(--pitch-w) * 0.085); /* +25% over the original 0.068, per review */
  --stage-top: calc(var(--nav-top) + var(--nav-h) + var(--goal-gap));
  --side-left: calc(var(--pad) + var(--pitch-w) + var(--pitch-gap));
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-micro: 1ms; --t-fast: 1ms; --t-base: 1ms; --t-page: 1ms; --t-move: 1ms; }
  * { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body { font-family: var(--font-ui); font-size: 15px; line-height: 1.4; color: var(--ink-900); background: #9fb0c4; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; border-radius: 0; }
.tnum { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- the stadium ---------------------------------------------------------------------------------- */
#stadium { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
#stadium .stadium-photo {
  position: absolute; inset: -2%;
  background-image: url("../stadium/night-stadium.jpeg"); background-size: cover; background-position: center 62%;
  filter: blur(1.6px) saturate(0.92) brightness(1.02);
  transform: translate3d(var(--parallax-x, 0), var(--parallax-y, 0), 0);
  transition: transform 220ms var(--ease-std);
}
#stadium .stadium-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.06) 22%, rgba(255, 255, 255, 0) 45%),
    linear-gradient(to top, rgba(28, 60, 40, 0.28) 0%, rgba(28, 60, 40, 0) 26%),
    radial-gradient(120% 90% at 50% 0%, rgba(215, 228, 245, 0.10), rgba(0, 0, 0, 0) 60%);
}

/* --- navigation: docked to the board ------------------------------------------------------------ */
.nav {
  position: fixed; z-index: 30; left: var(--pad); top: var(--nav-top); width: var(--pitch-w); height: var(--nav-h);
  display: flex; background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(var(--blur)) saturate(1.2); -webkit-backdrop-filter: blur(var(--blur)) saturate(1.2);
  box-shadow: 0 0 0 2px var(--grass-edge);
}
.nav-tab {
  position: relative; z-index: 1; flex: 1 1 0; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 1.4vw, 26px); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-500); background: transparent; border: 0; cursor: pointer; padding: 0;
  transition: color var(--t-fast) var(--ease-std);
}
.nav-tab:hover { color: var(--ink-900); }
.nav-tab.is-active { color: var(--ink-900); }
.nav-indicator {
  position: absolute; z-index: 0; top: 0; bottom: 0; left: 0; width: 25%;
  background: var(--paper); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1), 0 8px 20px rgba(16, 24, 40, 0.18);
  transition: left var(--t-page) var(--ease-out), width var(--t-page) var(--ease-out);
}
.nav-indicator::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--accent); }

.team {
  position: fixed; z-index: 30; right: var(--pad); top: var(--nav-top); height: var(--nav-h);
  display: flex; align-items: center; gap: 12px; color: var(--ink-900);
}
.team .crest { width: 40px; height: 46px; filter: drop-shadow(0 2px 4px rgba(16, 24, 40, 0.3)); }
.team .team-name { font-family: var(--font-display); font-weight: 700; font-size: 23px; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1; }
.team .team-line { font-size: 13.5px; font-weight: 500; color: var(--ink-500); margin-top: 3px; }
.team .team-line b { font-weight: 600; color: var(--ink-900); }

/* --- stage -------------------------------------------------------------------------------------- */
.stage { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.stage > * { pointer-events: auto; }

.pitch-col {
  position: absolute; left: var(--pad); top: var(--stage-top); bottom: var(--stage-bottom);
  transition: opacity var(--t-page) var(--ease-std), transform var(--t-page) var(--ease-out);
  transform-origin: 0 40%;
}
.pitch-col.is-parked { opacity: 0; transform: translateX(-40px) scale(0.96); pointer-events: none; }

.side {
  position: absolute; top: var(--stage-top); bottom: calc(var(--stage-bottom) + var(--foot-h)); right: var(--pad);
  left: var(--side-left);
}
.side.is-wide { left: var(--pad); top: var(--nav-top); }
.side > .page { position: absolute; inset: 0; display: none; }
.side > .page.is-active { display: block; animation: page-in var(--t-page) var(--ease-out) both; }
@keyframes page-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* --- the pitch: hero object ----------------------------------------------------------------------- */
.pitch {
  position: relative; height: 100%; aspect-ratio: calc(68 / 105 * var(--board-stretch));
  box-shadow: 0 0 0 2px var(--grass-edge), var(--shadow-pitch);
  background: #41954d; user-select: none;
}
.pitch canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.pitch .hint-layer { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.pitch .hint-layer path, .pitch .hint-layer circle { stroke: rgba(255, 255, 255, 0.92); fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)); }
.pitch .hint-layer .arrowhead { fill: rgba(255, 255, 255, 0.92); stroke: none; }
.token-layer { position: absolute; inset: 0; }
.pitch.is-focus-mode .sphere:not(.is-selected) { opacity: 0.62; }
.pitch.is-focus-mode .sphere:not(.is-selected):hover { opacity: 1; }

/* --- spheres: the signature piece ----------------------------------------------------------------- */
.sphere {
  position: absolute; width: var(--sphere); height: var(--sphere);
  margin: calc(var(--sphere) * -0.5) 0 0 calc(var(--sphere) * -0.5);
  cursor: grab; touch-action: none; outline: none;
  transition: left var(--t-move) var(--ease-out), top var(--t-move) var(--ease-out), opacity var(--t-base);
  --kit-1: #1d4ed8; --kit-2: #ffffff; --kit-num: #ffffff;
  --kit-1-light: color-mix(in srgb, var(--kit-1) 65%, white);
  --kit-1-dark: color-mix(in srgb, var(--kit-1) 48%, black);
  --lift: 0px; --scale: 1;
}
.sphere.is-static { cursor: pointer; }
.sphere.is-dragging { transition: none; z-index: 40; cursor: grabbing; pointer-events: none; }
.sphere.is-selected { z-index: 30; }
.sphere.is-flying { opacity: 0 !important; }
.sphere:focus-visible { outline: none; }
.sphere:focus-visible .sphere-ring { opacity: 1; transform: scale(1); }

.sphere-halo {
  /* A close, soft ambient bloom on selection -- reads as the sphere's own light spilling out,
     never a floating ring. Very light blue-white, like a studio key light, never the saturated
     selection blue -- that lives in .sphere-ring instead. */
  position: absolute; inset: -9%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(225, 238, 255, 0.55) 0%, rgba(225, 238, 255, 0) 74%);
  opacity: 0; transition: opacity var(--t-page);
}
.sphere.is-selected .sphere-halo { opacity: 0.6; }
.sphere-shadow {
  position: absolute; left: 6%; right: 6%; bottom: -14%; height: 32%; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(6, 22, 12, 0.55) 0%, rgba(6, 22, 12, 0.28) 40%, rgba(6, 22, 12, 0) 72%);
  /* Idle, hover and selected all share this one opacity -- only --lift/--scale move and resize
     it, so a raised piece never looks like it grew a second, different shadow design. */
  opacity: 0.68;
  transform: scale(var(--scale)) translateY(calc(var(--lift) * 0.35));
  transition: transform var(--t-fast) var(--ease-out), opacity var(--t-fast);
}
.sphere.is-dragging .sphere-shadow { opacity: 0.7; }
.sphere-bounce {
  /* A soft pitch-green bounce light at the base on hover/selection -- the grass reflecting up
     onto the piece, not just a shadow. */
  position: absolute; left: 16%; right: 16%; bottom: -11%; height: 20%; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(140, 230, 150, 0.4), rgba(140, 230, 150, 0) 70%);
  opacity: 0; transition: opacity var(--t-fast);
}
.sphere:hover .sphere-bounce, .sphere.is-selected .sphere-bounce { opacity: 1; }
.sphere-piece { position: absolute; inset: 0; transform: translateY(calc(var(--lift) * -1)) scale(var(--scale)); transition: transform var(--t-fast) var(--ease-out); }
.sphere-body {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  /* Lighting comes only from kit-1 (light -> mid -> dark around one key light at 38%/34%), so every kit shows the
     same light/shadow shape and only the hue changes. B13-c (the user: "slightly more 3D, don't overdo it"): a crisper
     highlight, a deeper core shadow on the far side, a faint light bounced up from the grass along the lower rim, and
     inset shading that scales with the piece so a small piece is as round as a big one. */
  background:
    radial-gradient(ellipse 26% 17% at 31% 21%, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.5) 38%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(ellipse 60% 26% at 50% 96%, rgba(190, 240, 200, 0.26) 0%, rgba(190, 240, 200, 0) 100%),
    radial-gradient(circle at 38% 34%, var(--kit-1-light) 0%, var(--kit-1) 42%, var(--kit-1-dark) 86%, color-mix(in srgb, var(--kit-1-dark) 70%, black) 100%);
  box-shadow:
    inset calc(var(--sphere) * -0.14) calc(var(--sphere) * -0.18) calc(var(--sphere) * 0.3) rgba(0, 0, 0, 0.42),
    inset calc(var(--sphere) * 0.06) calc(var(--sphere) * 0.08) calc(var(--sphere) * 0.16) rgba(255, 255, 255, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    0 calc(var(--sphere) * 0.05) calc(var(--sphere) * 0.12) rgba(0, 0, 0, 0.3);
}
/* A4 (ADR-062): the kit's pattern -- the second colour (and an accent) lit exactly like the body, cut to the pattern by a
   mask: upright stripes, the central band and its pinstripes, the sash from the right shoulder, the sleeves, the halves. */
/* the colours' light and shade wherever a pattern is drawn: the pieces, and the other balls (profile, transfers) */
.sphere, [data-pattern] {
  --kit-2-light: color-mix(in srgb, var(--kit-2) 65%, white); --kit-2-dark: color-mix(in srgb, var(--kit-2) 48%, black);
  --kit-3: var(--kit-2); --kit-3-light: color-mix(in srgb, var(--kit-3) 65%, white); --kit-3-dark: color-mix(in srgb, var(--kit-3) 48%, black);
}
.sphere-pattern, .sphere-accent { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }
/* the layers show only where a kit has a pattern (the accent only for a band or a sash) */
.sphere-pattern, .sphere-accent { display: none; }
[data-pattern] .sphere-pattern, [data-pattern="central-stripe"] .sphere-accent, [data-pattern="sash"] .sphere-accent { display: block; }
/* the same piece, still, inside a page (the profile's ball, the transfer lists', the club screen's kits, the line-up's kit
   tag): in the flow, never interactive, sized by the caller's --sphere; a label on it in the kit's number colour */
.sphere.is-still { position: relative; display: inline-block; vertical-align: middle; flex: none; margin: 0; cursor: default; pointer-events: none; transition: none; }
.sphere-label {
  position: absolute; inset: 0; display: grid; place-items: center; padding-bottom: 3%;
  font-family: var(--font-display); font-weight: 700; font-size: calc(var(--sphere) * 0.42); line-height: 1; color: var(--kit-num);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5), 0 0 6px rgba(0, 0, 0, 0.25);
}
.sphere-pattern {
  background:
    radial-gradient(ellipse 26% 17% at 31% 21%, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.5) 38%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(circle at 38% 34%, var(--kit-2-light) 0%, var(--kit-2) 42%, var(--kit-2-dark) 86%, color-mix(in srgb, var(--kit-2-dark) 70%, black) 100%);
  -webkit-mask-image: var(--pattern-mask); mask-image: var(--pattern-mask);
}
.sphere-accent {
  background:
    radial-gradient(ellipse 26% 17% at 31% 21%, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.5) 38%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(circle at 38% 34%, var(--kit-3-light) 0%, var(--kit-3) 42%, var(--kit-3-dark) 86%, color-mix(in srgb, var(--kit-3-dark) 70%, black) 100%);
  -webkit-mask-image: var(--accent-mask); mask-image: var(--accent-mask);
}
[data-pattern="stripes"] { --pattern-mask: linear-gradient(90deg, #000 0 14.29%, transparent 0 28.57%, #000 0 42.86%, transparent 0 57.14%, #000 0 71.43%, transparent 0 85.71%, #000 0); }
[data-pattern="central-stripe"] {
  --pattern-mask: linear-gradient(90deg, transparent 0 40%, #000 0 60%, transparent 0);
  --accent-mask: linear-gradient(90deg, transparent 0 37.25%, #000 0 40%, transparent 0 60%, #000 0 62.75%, transparent 0);
}
[data-pattern="sash"] {
  --pattern-mask: linear-gradient(45deg, transparent 0 42.6%, #000 0 57.4%, transparent 0);
  --accent-mask: linear-gradient(45deg, transparent 0 41%, #000 0 42.6%, transparent 0 57.4%, #000 0 59%, transparent 0);
}
[data-pattern="sleeves"] { --pattern-mask: linear-gradient(90deg, #000 0 13%, transparent 0 87%, #000 0); }
[data-pattern="halves"] { --pattern-mask: linear-gradient(90deg, transparent 0 50%, #000 0); }
.sphere-num {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: calc(var(--sphere) * 0.4); line-height: 1;
  color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5), 0 -1px 0 rgba(255, 255, 255, 0.28), 1px 0 0 rgba(0, 0, 0, 0.35), -1px 0 0 rgba(0, 0, 0, 0.35), 0 0 10px rgba(0, 0, 0, 0.25);
  padding-bottom: calc(var(--sphere) * 0.03);
}
/* a light kit (Real Montevera's white) carries its number in ink, as the match draws it */
.sphere.is-light-kit .sphere-num { color: #10151f; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45), 0 0 6px rgba(255, 255, 255, 0.35); }
.sphere-ring {
  /* The selection glow sits ON the sphere's own edge -- a thin bright rim right at its surface,
     not a ring floating a gap away -- so the piece reads as radiating, not as wearing a hoop.
     Inset -3% makes the ring's own radius 1.06x the body's, so the body's true edge falls at
     1/1.06 = 94.3% of the ring's radius; every stop below sits just past that so the bright band
     paints outside the sphere's fill and never blends with it (that blend used to read as a
     pink/red tint on a red kit). Pure white core, the faintest whisper of blue at the very outer
     edge -- --ring-bright/--ring-edge/--ring-blur let is-target retint it without a new gradient. */
  position: absolute; inset: -3%; border-radius: 50%; pointer-events: none;
  --ring-bright: rgba(255, 255, 255, 0.98);
  --ring-edge: rgba(230, 242, 255, 0.55);
  --ring-blur: rgba(225, 238, 255, 0.65);
  background: radial-gradient(closest-side,
    rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 93%,
    var(--ring-bright) 97%,
    var(--ring-edge) 100%);
  box-shadow: 0 0 10px 1px var(--ring-blur);
  opacity: 0; transform: scale(0.96);
  transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.sphere-plate {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: calc(var(--sphere) * 0.12);
  display: flex; flex-direction: column; align-items: center; gap: 0; white-space: nowrap; pointer-events: none;
}
.sphere-name {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(17px, calc(var(--sphere) * 0.4375), 27px); letter-spacing: 0.06em; text-transform: capitalize; line-height: 1.1;
  display: inline-block; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 8px rgba(0, 0, 0, 0.55);
}
.sphere.is-selected .sphere-name, .sphere.is-dragging .sphere-name {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 8px rgba(0, 0, 0, 0.55), 0 0 13px rgba(255, 255, 255, 1), 0 0 28px rgba(255, 255, 255, 0.6);
  transition: text-shadow var(--t-fast);
}
.sphere-pos { display: none; }
.sphere-pos::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.sphere-pos.is-unfamiliar::before { background: var(--warn); }
.sphere-role {
  display: none; font-family: var(--font-display); font-weight: 800; font-size: clamp(15px, calc(var(--sphere) * 0.38), 24px);
  letter-spacing: 0.05em; text-transform: uppercase; color: #fff; margin-top: 3px; padding-top: 4px;
  border-top: 2px solid rgba(255, 255, 255, 0.85); max-width: calc(var(--sphere) * 4.5); white-space: normal; line-height: 1.05; text-align: center;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9), 0 0 10px rgba(0, 0, 0, 0.6);
}
.pitch.is-roles .sphere-role { display: inline-block; }
.sphere.is-low .sphere-plate { top: auto; bottom: 100%; margin: 0 0 calc(var(--sphere) * 0.12); flex-direction: column-reverse; }

.sphere:hover { --lift: 5px; --scale: 1.055; }
.sphere.is-selected { --lift: 6px; --scale: 1.09; }
.sphere.is-selected .sphere-ring { opacity: 1; transform: scale(1); }
.sphere.is-dragging { --lift: 14px; --scale: 1.16; }
.sphere.is-dragging .sphere-ring { opacity: 0.5; transform: scale(1.06); }
.sphere.is-target { --lift: 2px; --scale: 1.12; z-index: 35; }
.sphere.is-target .sphere-ring {
  opacity: 1; transform: scale(1.1);
  --ring-bright: rgba(214, 230, 255, 0.98); --ring-edge: var(--accent-glow); --ring-blur: rgba(45, 111, 214, 0.6);
}
.sphere.is-swapped .sphere-piece { animation: sphere-swap var(--t-move) var(--ease-out); }
@keyframes sphere-swap { 0% { transform: scale(0.6); } 60% { transform: scale(1.1); } 100% { transform: scale(var(--scale)); } }

/* a piece in flight between two places (swap animations) */
.flyer { position: fixed; z-index: 90; pointer-events: none; margin: 0; }
.flyer .sphere-plate { display: none; }

/* position chooser (a POSITION choice, never a role) */
.chooser {
  position: absolute; z-index: 60; transform: translate(-50%, 0); margin-top: calc(var(--sphere) * 1.2); min-width: 240px;
  background: var(--surface-strong); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); box-shadow: var(--shadow-2);
  animation: chooser-in var(--t-fast) var(--ease-out) both; outline: none;
}
@keyframes chooser-in { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }
.chooser.is-above { animation: none; margin-top: 0; transform: translate(-50%, calc(-100% - var(--sphere) * 1.2)); }
.chooser .chooser-label { display: block; padding: 8px 14px 6px; font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-300); border-bottom: 1px solid var(--line); }
.chooser button {
  display: grid; grid-template-columns: 52px 1fr; align-items: center; width: 100%; text-align: left;
  padding: 10px 14px; border: 0; border-left: 3px solid transparent; background: transparent; color: var(--ink-900); cursor: pointer;
  transition: background var(--t-micro), border-color var(--t-micro);
}
.chooser button + button { border-top: 1px solid var(--line); }
.chooser button b { font-family: var(--font-display); font-weight: 700; font-size: 21px; letter-spacing: 0.04em; }
.chooser button span { font-size: 13.5px; color: var(--ink-500); }
.chooser button:hover { background: var(--accent-soft); border-left-color: var(--accent); }

/* --- surfaces and controls ------------------------------------------------------------------------ */
.plate { background: var(--surface); backdrop-filter: blur(var(--blur)) saturate(1.15); -webkit-backdrop-filter: blur(var(--blur)) saturate(1.15); box-shadow: var(--shadow-1); }
@supports not (backdrop-filter: blur(1px)) { .plate, .nav, .chooser, .dugout { background: var(--surface-strong); } }

.btn {
  display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 20px;
  font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff; background: var(--dark); border: 0; cursor: pointer; box-shadow: var(--shadow-1);
  transition: background var(--t-fast), transform var(--t-micro) var(--ease-out), box-shadow var(--t-fast);
}
.btn:hover { background: #1c2536; transform: translateY(-1px); }
.btn.is-on { background: var(--accent); }
.btn .count { font-family: var(--font-ui); font-weight: 600; font-size: 12px; letter-spacing: 0; padding: 2px 7px; background: rgba(255, 255, 255, 0.18); }
.btn svg { width: 18px; height: 18px; }

.icon-btn {
  width: 34px; height: 34px; display: inline-grid; place-items: center; border: 0; cursor: pointer; color: var(--ink-700); background: var(--surface);
  transition: background var(--t-micro), color var(--t-micro), transform var(--t-micro);
}
.icon-btn:hover:not(:disabled) { background: var(--paper); color: var(--ink-900); transform: translateY(-1px); }
.icon-btn:disabled { opacity: 0.35; cursor: default; }
.icon-btn svg { width: 17px; height: 17px; }
.icon-btn.is-confirm { background: var(--warn); color: #fff; width: auto; padding: 0 12px; font-family: var(--font-display); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: 13px; }

.seg { position: relative; display: inline-flex; background: rgba(255, 255, 255, 0.4); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5); }
.seg button { font-family: var(--font-display); font-weight: 600; font-size: 16px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-500); background: transparent; border: 0; padding: 8px 18px; cursor: pointer; position: relative; z-index: 1; transition: color var(--t-fast); }
.seg button:hover { color: var(--ink-900); }
.seg button.is-on { color: var(--ink-900); }
.seg-cursor { position: absolute; z-index: 0; background: var(--paper); box-shadow: 0 4px 12px rgba(16, 24, 40, 0.14); pointer-events: none; }
.seg-cursor::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--accent); }

/* --- footer: key hints + history --------------------------------------------------------------- */
.foot {
  position: fixed; z-index: 30; left: var(--side-left); right: var(--pad); bottom: var(--stage-bottom); height: var(--foot-h);
  display: flex; align-items: center; gap: 22px; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 2px rgba(0, 20, 8, 0.55);
}
.foot.is-wide { left: var(--pad); }
.foot .key-hint { display: inline-flex; align-items: center; gap: 7px; }
.keycap { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; background: var(--surface-strong); color: var(--ink-900); font-family: var(--font-ui); font-weight: 600; font-size: 11px; box-shadow: 0 1px 0 rgba(16, 24, 40, 0.3), 0 1px 4px rgba(16, 24, 40, 0.15); }
.foot .history { margin-left: auto; display: flex; align-items: center; gap: 4px; }

/* ==========================================================================================
   SQUAD
   ========================================================================================== */
.squad-context { position: absolute; left: 0; top: 4%; right: 0; }
.squad-empty { color: var(--ink-700); font-size: 17px; display: flex; align-items: center; gap: 12px; padding: 14px 20px 14px 16px; width: max-content; max-width: 100%; }
.squad-empty .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.squad-watermark { position: absolute; right: 4%; top: 50%; width: clamp(200px, 22vw, 360px); transform: translateY(-50%); opacity: 0.32; pointer-events: none; }
.squad-watermark svg { width: 100%; height: auto; }

.player-hero { display: flex; align-items: flex-end; gap: 18px; padding: 0 4px; }
.player-hero .ovr { font-family: var(--font-display); font-weight: 700; font-size: clamp(64px, 7.2vw, 118px); line-height: 0.86; letter-spacing: -0.01em; color: var(--ink-900); text-shadow: 0 2px 0 rgba(255, 255, 255, 0.55); }
.player-hero .ovr small { display: block; font-size: 13px; letter-spacing: 0.14em; font-weight: 600; color: var(--ink-500); text-shadow: none; margin: 0 0 6px 3px; }
.player-hero .who { padding-bottom: 6px; min-width: 0; }
.player-hero .surname { font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 3.9vw, 66px); line-height: 0.92; letter-spacing: 0.01em; text-transform: uppercase; color: var(--ink-900); text-shadow: 0 2px 0 rgba(255, 255, 255, 0.5); word-break: break-word; }
.player-hero .given { font-family: var(--font-ui); font-weight: 500; font-size: clamp(15px, 1.15vw, 19px); color: var(--ink-500); margin-bottom: 2px; }
.player-hero .position-line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-top: 10px; font-size: 15px; font-weight: 500; color: var(--ink-500); }
.pos-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 9px; background: var(--surface-strong); color: var(--ink-900); font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: 0.05em; box-shadow: 0 1px 3px rgba(16, 24, 40, 0.2); }
.pos-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.pos-chip.is-unfamiliar::before { background: var(--warn); }
.pos-chip .long { font-family: var(--font-ui); font-weight: 500; font-size: 13.5px; letter-spacing: 0; color: var(--ink-500); }
.position-line .natural { color: var(--warn); font-weight: 600; }

.player-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 16px; padding: 12px 18px; width: max-content; max-width: 100%; font-size: 14.5px; color: var(--ink-500); }
.player-facts .fact b { font-weight: 600; color: var(--ink-900); }
.player-facts .sep { width: 1px; height: 16px; background: var(--line-strong); }
.player-facts .link { color: var(--accent-ink); font-weight: 600; background: none; border: 0; padding: 0; cursor: pointer; }
.player-facts .link:hover { text-decoration: underline; }

.details-toggle { margin-top: 12px; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500); background: none; border: 0; padding: 6px 4px; cursor: pointer; }
.details-toggle:hover { color: var(--ink-900); }
.details-toggle svg { width: 14px; height: 14px; transition: transform var(--t-fast) var(--ease-out); }
.details-toggle.is-open svg { transform: rotate(180deg); }

.attr-grid { display: grid; grid-template-columns: repeat(2, minmax(200px, 260px)); gap: 8px 28px; padding: 16px 20px 18px; margin-top: 8px; width: max-content; max-width: 100%; animation: page-in var(--t-base) var(--ease-out) both; }
.attr-row { display: grid; grid-template-columns: 34px 1fr 30px; align-items: center; gap: 10px; font-size: 13px; }
.attr-row .k { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.06em; color: var(--ink-500); }
.attr-row .v { font-family: var(--font-display); font-weight: 700; font-size: 16px; text-align: right; }
.attr-bar { height: 6px; background: var(--surface-ink); overflow: hidden; }
.attr-bar > i { display: block; height: 100%; }

/* dugout */
.squad-actions { position: absolute; left: 0; bottom: 0; display: flex; align-items: center; gap: 14px; }
.squad-actions .swap-hint { font-size: 14px; font-weight: 500; color: var(--ink-500); }
.dugout {
  position: absolute; left: 0; right: 0; bottom: 60px; z-index: 25; padding: 16px 24px 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.78));
  backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); box-shadow: var(--shadow-2);
  transform: translateY(24px); opacity: 0; pointer-events: none;
  transition: transform var(--t-page) var(--ease-out), opacity var(--t-base);
}
.dugout.is-open { transform: none; opacity: 1; pointer-events: auto; }
/* QA 4 Oct: never taller than the column (two rows of reserves, with the injured and banned lines, climbed over the
   Squad button above it): the panel stops at the column's top and scrolls */
.dugout { max-height: calc(100% - 68px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.dugout-head { display: flex; align-items: baseline; gap: 14px; }
.dugout-head .title { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: 0.05em; text-transform: uppercase; }
.dugout-head .hint { font-size: 13.5px; font-weight: 500; color: var(--ink-500); }
.dugout-head .hint b { color: var(--ink-900); }
.dugout-head .close { margin-left: auto; align-self: center; }
.seats { display: flex; justify-content: space-between; gap: 6px; padding: 18px 2% 0; --sphere: clamp(40px, 3.1vw, 58px); }
.seat {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 0; padding: 4px 4px 12px;
  border: 0; background: transparent; cursor: grab; position: relative; min-width: 0;
  transition: transform var(--t-micro) var(--ease-out);
}
.seat .sphere { position: relative; margin: 0 0 8px; cursor: inherit; }
.seat .sphere-plate { display: none; }
.seat:hover:not(:disabled) { transform: translateY(-3px); }
.seat:disabled { opacity: 0.35; cursor: not-allowed; }
:is(.seat.is-eligible, .seat.is-target) .sphere-ring { opacity: 0.9; transform: scale(1); border-color: var(--accent); box-shadow: 0 0 0 4px rgba(45, 111, 214, 0.25); }
.seat.is-lifted { opacity: 0.35; }
.seat .name { font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-900); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat .meta { font-size: 12.5px; font-weight: 500; color: var(--ink-500); display: flex; gap: 6px; }
.seat .meta b { color: var(--ink-900); font-weight: 700; font-family: var(--font-display); font-size: 14px; }
.bench-bar { height: 8px; background: linear-gradient(to bottom, #2a3444, #10151f); box-shadow: 0 -2px 6px rgba(16, 24, 40, 0.2); margin: 0 -24px; }
.bench-legs { display: flex; justify-content: space-between; padding: 0 12%; height: 10px; margin: 0 -24px; }
.bench-legs i { width: 10px; background: #1a2230; }

/* ==========================================================================================
   FORMATIONS
   ========================================================================================== */
.formations { display: flex; flex-direction: column; height: 100%; }
.formation-hero { margin-top: clamp(14px, 3vh, 36px); padding: 0 6px; }
.formation-hero .name { font-family: var(--font-display); font-weight: 700; font-size: clamp(56px, 5.8vw, 96px); line-height: 0.9; letter-spacing: -0.005em; color: var(--ink-900); text-shadow: 0 2px 0 rgba(255, 255, 255, 0.5); }
.formation-hero .name .variant { font-weight: 500; font-size: 0.5em; color: var(--ink-500); margin-left: 12px; letter-spacing: 0.02em; }
.formation-hero .character { font-size: clamp(15px, 1.2vw, 19px); font-weight: 500; color: var(--ink-500); margin-top: 8px; }
.variant-row { position: relative; display: flex; flex-wrap: wrap; gap: 4px; margin-top: 16px; }
.variant-chip { font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-500); background: rgba(255, 255, 255, 0.55); border: 0; padding: 8px 16px; cursor: pointer; position: relative; z-index: 1; transition: background var(--t-fast), color var(--t-fast); }
.variant-chip:hover { background: var(--paper); color: var(--ink-900); }
.variant-chip.is-on { background: transparent; color: #fff; }
.variant-cursor { position: absolute; z-index: 0; background: var(--dark); pointer-events: none; }

.shape-board { margin-top: clamp(18px, 3.5vh, 40px); display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.shape-board .board-head { display: flex; align-items: center; gap: 12px; margin: 0 0 10px 6px; font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500); }
.shape-scroll { position: relative; overflow-y: auto; min-height: 0; padding: 6px 14px 6px 6px; scrollbar-width: thin; scrollbar-color: rgba(16, 21, 31, 0.45) rgba(255, 255, 255, 0.35); }
.shape-scroll::-webkit-scrollbar { width: 8px; }
.shape-scroll::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.35); }
.shape-scroll::-webkit-scrollbar-thumb { background: rgba(16, 21, 31, 0.45); }
.shape-grid { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(96px, 7.4vw, 132px), 1fr)); gap: 6px; }
.shape-tile {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px 10px;
  border: 0; background: rgba(255, 255, 255, 0.5); cursor: pointer; transition: background var(--t-fast), transform var(--t-fast) var(--ease-out);
}
.shape-tile:hover { background: var(--paper); transform: translateY(-2px); }
.shape-tile.is-on { background: var(--paper); }
.shape-tile svg { width: 72%; height: auto; display: block; }
.shape-tile .tile-name { font-family: var(--font-display); font-weight: 600; font-size: 16px; letter-spacing: 0.03em; color: var(--ink-500); }
.shape-tile.is-on .tile-name { color: var(--ink-900); font-weight: 700; }
.shape-glyph .dot { fill: var(--ink-500); }
.shape-glyph .dot.gk { fill: var(--ink-300); opacity: 0.7; }
.shape-tile.is-on .shape-glyph .dot { fill: var(--accent); }
.shape-tile.is-on .shape-glyph .dot.gk { fill: var(--accent-ink); }
.shape-glyph .field { fill: rgba(16, 21, 31, 0.05); stroke: rgba(16, 21, 31, 0.14); }
.shape-glyph .mid { stroke: rgba(16, 21, 31, 0.16); }
.shape-cursor { position: absolute; z-index: 2; pointer-events: none; box-shadow: inset 0 0 0 2px var(--accent), 0 10px 26px rgba(45, 111, 214, 0.28); }
.shape-cursor::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--accent); }

/* ==========================================================================================
   ROLES
   ========================================================================================== */
.roles { display: flex; flex-direction: column; height: 100%; padding-top: 2%; }
.roles-head { padding: 0 6px; display: flex; align-items: flex-end; gap: 18px; }
.roles-head .surname { font-family: var(--font-display); font-weight: 700; font-size: clamp(38px, 3.6vw, 60px); line-height: 0.95; letter-spacing: 0.01em; text-transform: uppercase; color: var(--ink-900); text-shadow: 0 2px 0 rgba(255, 255, 255, 0.5); }
.roles-head .pos-chip { margin-bottom: 6px; }
.role-list { position: relative; display: flex; flex-direction: column; gap: 6px; margin-top: clamp(14px, 2.4vh, 28px); max-width: 1170px; }
.role-card {
  position: relative; display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 22px;
  text-align: left; padding: 12px 22px 12px 12px; border: 0; background: var(--surface-2); cursor: pointer; overflow: hidden;
  backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
  transition: background var(--t-fast), transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast);
}
.role-card:hover { background: var(--surface); transform: translateX(4px); }
.role-card.is-on { background: var(--paper); box-shadow: var(--shadow-1); }
.role-card .role-diagram { width: 64px; height: 84px; display: block; box-shadow: 0 2px 6px rgba(6, 26, 14, 0.35); transition: transform var(--t-fast) var(--ease-out); }
.role-card .role-diagram path, .role-card .role-diagram .motif circle { stroke: rgba(255, 255, 255, 0.95); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.role-card .role-diagram .arrowhead { fill: rgba(255, 255, 255, 0.95); stroke: none; }
.role-card:hover .role-diagram { transform: scale(1.04); }
.role-card .role-name { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 1.7vw, 28px); letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-900); line-height: 1; }
.role-card .role-desc { font-size: 14.5px; font-weight: 500; color: var(--ink-500); margin-top: 6px; max-width: 48ch; }
.role-card .role-tags { display: flex; flex-wrap: wrap; gap: 0 14px; margin-top: 8px; font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-300); }
.role-card.is-on .role-tags { color: var(--accent-ink); }
.role-card .role-state { font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-ink); opacity: 0; transition: opacity var(--t-fast); }
.role-card.is-on .role-state { opacity: 1; }
/* A1: the offside-trap switch, the tactical-fit readout and the opponent card (Tactics page) */
.trap-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 12px; padding: 12px 16px; }
.trap-row .seg button.is-on { background: var(--paper); box-shadow: inset 0 -3px 0 var(--accent), 0 4px 12px rgba(16, 24, 40, 0.14); }
.trap-head { display: flex; flex-direction: column; gap: 3px; }
.trap-head b { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-900); }
.trap-head span { font-size: 14px; font-weight: 500; color: var(--ink-500); }
.fit-list { display: flex; flex-direction: column; gap: 10px; }
.fit-group { padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; border-left: 4px solid var(--ink-900); }
.fit-group.is-clash { border-left-color: var(--ink-300); }
.fit-label { font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-500); }
.fit-row { display: flex; flex-direction: column; gap: 2px; }
.fit-row b { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: 0.03em; color: var(--ink-900); }
.fit-row span { font-size: 14.5px; font-weight: 500; color: var(--ink-500); }
.opponent-card { padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.opp-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.opp-head b { font-family: var(--font-display); font-weight: 700; font-size: 26px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-900); }
.opp-head span { font-size: 14px; font-weight: 500; color: var(--ink-500); }
.opp-style { font-size: 15px; font-weight: 500; color: var(--ink-700); }
.opp-grid { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; }
.opp-grid span { font-size: 14px; font-weight: 500; color: var(--ink-500); }
.opp-grid b { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-900); }
.role-cursor { position: absolute; left: 0; width: 4px; z-index: 3; background: var(--accent); pointer-events: none; transition: top var(--t-page) var(--ease-out), height var(--t-page) var(--ease-out); }
.roles-empty { margin-top: 10%; }

/* ==========================================================================================
   TACTICS (section rail)
   ========================================================================================== */
.tactics { position: absolute; inset: 0; display: grid; grid-template-columns: clamp(240px, 19vw, 320px) minmax(0, 1fr); gap: clamp(24px, 3vw, 56px); align-items: start; padding-top: calc(var(--nav-h) + 22px); }
.rail { display: flex; flex-direction: column; gap: 4px; position: relative; }
.rail-item {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: 14px 18px; border: 0; border-left: 4px solid transparent;
  background: var(--surface-2); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast) var(--ease-out);
}
.rail-item:hover { background: var(--surface); transform: translateX(3px); }
.rail-item.is-on { background: transparent; }
.rail-item b { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-900); }
.rail-item small { font-size: 14px; font-weight: 500; color: var(--ink-500); margin-top: 3px; transition: color var(--t-fast); }
.rail-item.is-on small { color: var(--accent-ink); }
.rail-cursor { position: absolute; z-index: 0; border-left: 4px solid var(--accent); background: var(--paper); box-shadow: var(--shadow-1); pointer-events: none; }

.section { max-width: 1040px; }
.section-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 2.6vw, 44px); line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-900); text-shadow: 0 2px 0 rgba(255, 255, 255, 0.5); margin: 0 0 18px 4px; }
.approach-grid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.approach-tile {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 18px; text-align: left; min-height: 108px; padding: 16px 24px; border: 0; border-left: 4px solid transparent;
  background: var(--surface-2); color: var(--ink-700); cursor: pointer; backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast) var(--ease-out);
}
.approach-tile:hover { background: var(--surface); transform: translateY(-2px); color: var(--ink-900); }
.approach-tile.is-on { background: transparent; color: var(--ink-900); }
.approach-cursor { position: absolute; z-index: 0; border-left: 4px solid var(--accent); background: var(--paper); box-shadow: var(--shadow-1); pointer-events: none; }
.approach-tile svg { width: 30px; height: 30px; flex: 0 0 auto; overflow: visible; }
.approach-tile svg path, .approach-tile svg circle, .approach-tile svg line { stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.approach-tile svg .fill { fill: currentColor; stroke: none; }
.approach-tile.is-on svg path, .approach-tile.is-on svg circle, .approach-tile.is-on svg line { stroke: var(--accent-ink); }
.approach-tile.is-on svg .fill { fill: var(--accent-ink); }
.approach-tile .a-name { font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 1.35vw, 23px); letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.05; }
.section-desc { margin: 16px 4px 0; padding: 14px 18px; font-size: 16px; font-weight: 500; color: var(--ink-700); }
.section-desc b { color: var(--ink-900); font-weight: 600; }

/* sliders (the design stays) */
.sliders { display: flex; flex-direction: column; gap: clamp(8px, 1.4vh, 18px); padding: 22px 30px 20px; }
.slider { --v: 50; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "head value" "rail rail" "ends ends"; column-gap: 16px; align-items: end; padding: 2px 0; }
.slider .s-head { grid-area: head; display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.slider .s-name { font-family: var(--font-display); font-weight: 700; font-size: clamp(17px, 1.2vw, 21px); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-900); }
.slider .s-desc { font-size: 13px; font-weight: 500; color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slider .s-value { grid-area: value; display: flex; align-items: baseline; gap: 8px; }
.slider .s-num { font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1; color: var(--ink-900); min-width: 2ch; text-align: right; }
.slider .s-band { font-size: 13.5px; font-weight: 600; color: var(--accent-ink); min-width: 12ch; text-align: right; transition: opacity var(--t-micro); }
.slider .s-band.is-swapping { opacity: 0; }
.slider .s-rail { grid-area: rail; position: relative; height: 26px; margin-top: 6px; cursor: pointer; touch-action: none; }
.slider .s-track { position: absolute; left: 0; right: 0; top: 50%; height: 6px; margin-top: -3px; background: var(--surface-ink); overflow: hidden; }
.slider .s-fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--v) * 1%); background: linear-gradient(90deg, rgba(45, 111, 214, 0.55), var(--accent)); }
.slider .s-ticks { position: absolute; left: 0; right: 0; top: 50%; height: 6px; margin-top: -3px; pointer-events: none; }
.slider .s-ticks i { position: absolute; top: -3px; width: 2px; height: 12px; margin-left: -1px; background: rgba(255, 255, 255, 0.9); box-shadow: 0 0 0 1px rgba(16, 21, 31, 0.12); }
.slider .s-thumb {
  position: absolute; top: 50%; left: calc(var(--v) * 1%); width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0%, #f2f5f9 55%, #d6dde6 100%); box-shadow: 0 0 0 2px var(--accent), 0 3px 8px rgba(16, 24, 40, 0.3);
  transition: transform var(--t-micro) var(--ease-out), box-shadow var(--t-micro);
}
.slider .s-rail:hover .s-thumb { transform: scale(1.12); }
.slider.is-dragging .s-thumb { transform: scale(1.2); box-shadow: 0 0 0 3px var(--accent), 0 0 0 9px var(--accent-soft), 0 6px 14px rgba(16, 24, 40, 0.3); }
.slider .s-ends { grid-area: ends; display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; letter-spacing: 0.03em; color: var(--ink-300); margin-top: 2px; }
.slider .s-ends span { transition: color var(--t-fast); }
.slider .s-ends span.is-near { color: var(--ink-900); }

/* --- responsive tightening ---------------------------------------------------------------------- */
@media (max-height: 820px) {
  :root { --foot-h: 36px; --stage-bottom: 18px; }
  .player-hero .ovr { font-size: clamp(56px, 6vw, 84px); }
  .player-hero .surname { font-size: clamp(34px, 3.4vw, 52px); }
  .attr-grid { padding: 12px 16px; gap: 6px 20px; }
  .role-card { padding: 10px 18px 10px 10px; gap: 16px; grid-template-columns: 54px 1fr auto; }
  .role-card .role-diagram { width: 54px; height: 71px; }
  .role-card .role-desc { font-size: 13.5px; margin-top: 4px; }
  .sliders { padding: 12px 22px 10px; gap: 6px; }
  .slider .s-rail { height: 22px; margin-top: 2px; }
  .slider .s-num { font-size: 22px; }
  .approach-tile { min-height: 64px; padding: 10px 16px; }
  .formation-hero { margin-top: 8px; }
  .formation-hero .name { font-size: clamp(48px, 5vw, 72px); }
  .seats { --sphere: 42px; padding-top: 12px; }
  .dugout { padding-top: 12px; }
  .tactics { padding-top: calc(var(--nav-h) + 14px); }
}
@media (max-width: 1500px) {
  .slider .s-desc { display: none; }
  .approach-grid { grid-template-columns: repeat(2, 1fr); }
  .foot { gap: 14px; white-space: nowrap; overflow: hidden; }
  .foot .key-hint.is-optional { display: none; }
  .seat .name { font-size: 13px; letter-spacing: 0.03em; }
  .seat .meta { font-size: 11.5px; }
}

/* --- large monitors ------------------------------------------------------------------------------ */
@media (min-width: 2200px) {
  body { font-size: 17px; }
  :root { --foot-h: 48px; }
  .team .team-name { font-size: 27px; }
  .team .team-line { font-size: 15.5px; }
  .team .crest { width: 46px; height: 53px; }
  .player-hero .given { font-size: 21px; }
  .player-hero .position-line { font-size: 17px; }
  .pos-chip { font-size: 20px; }
  .pos-chip .long { font-size: 15px; }
  .player-facts { font-size: 16.5px; padding: 14px 22px; }
  .details-toggle { font-size: 17px; }
  .attr-grid { grid-template-columns: repeat(2, 300px); }
  .attr-row { font-size: 15px; }
  .squad-empty { font-size: 19px; }
  .foot { font-size: 14.5px; }
  .keycap { height: 23px; font-size: 12.5px; }
  .btn { height: 50px; font-size: 19px; padding: 0 24px; }
  .seg button { font-size: 18px; padding: 9px 20px; }
  .formation-hero .character { font-size: 22px; }
  .variant-chip { font-size: 17px; padding: 9px 18px; }
  .shape-tile .tile-name { font-size: 18px; }
  .role-card { grid-template-columns: 76px 1fr auto; padding: 16px 26px 16px 16px; }
  .role-card .role-diagram { width: 76px; height: 100px; }
  .role-card .role-desc { font-size: 16.5px; }
  .role-card .role-tags { font-size: 14px; }
  .rail-item b { font-size: 22px; }
  .rail-item small { font-size: 16px; }
  .section-desc { font-size: 18px; }
  .sliders { padding: 28px 36px 26px; gap: 18px; }
  .slider .s-name { font-size: 24px; }
  .slider .s-desc { font-size: 14.5px; }
  .slider .s-num { font-size: 30px; }
  .slider .s-band { font-size: 15px; }
  .slider .s-ends { font-size: 13px; }
  .slider .s-rail { height: 30px; }
  .slider .s-thumb { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
  .seat .name { font-size: 17px; }
  .seat .meta { font-size: 13.5px; }
  .dugout-head .title { font-size: 26px; }
  .dugout-head .hint { font-size: 15px; }
}

/* M40 specialists: duty selection shares the board; blue remains selection only. */
.nav-tab { min-width: 0; font-size: clamp(16px, 1.22vw, 24px); letter-spacing: .04em; }
.captain-badge { display: none; position: absolute; z-index: 8; right: -16%; top: 4%; width: 58%; pointer-events: none; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.45)) drop-shadow(0 3px 5px rgba(0, 0, 0, 0.22)); }
.captain-badge .armband, .captain-inline .armband { display: block; width: 100%; height: auto; overflow: visible; }
.is-captain .captain-badge { display: block; }
/* QA 4 Oct (the user): cannot play the next match -- a small ambulance (injured) or a red card (suspended) on the sphere */
.sphere-status { display: none; position: absolute; z-index: 8; left: -18%; top: -8%; width: 60%; height: 46%; place-items: center; pointer-events: none; filter: drop-shadow(0 1px 1.5px rgba(16, 24, 40, 0.45)); }
.sphere-status svg { width: 100%; height: 100%; display: block; }
.sphere.is-out .sphere-status { display: grid; }
.seat.is-out .sphere .sphere-body, .seat.is-out .sphere .sphere-pattern, .seat.is-out .sphere .sphere-accent, .seat.is-out .sphere .sphere-num { filter: saturate(0.3) brightness(0.9); }
.seat.is-out .name { color: var(--ink-500); }
.seat-out { margin-top: 1px; font-size: 11px; font-weight: 600; line-height: 1.15; color: #b4281f; text-align: center; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
@media (pointer: coarse) and (max-height: 520px) { .seat-out { font-size: 10px; } }
.dugout-head .hint.is-out { color: #b4281f; font-weight: 600; }
.squad-empty.is-out .dot { background: #c8352b; box-shadow: 0 0 0 4px rgba(200, 53, 43, 0.16); }
.captain-inline { display: inline-block; width: 1.05em; vertical-align: 0.12em; margin-left: 0.12em; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)); }
.pitch.is-specialists .sphere-role { display: block; }
.specialist-heading { margin: 10px 0 30px; }
.specialist-heading h1 { margin: 0; font: 700 clamp(38px, 3.3vw, 64px)/1 var(--font-display); text-transform: uppercase; letter-spacing: .035em; text-shadow: 0 2px rgba(255,255,255,.5); }
.specialist-heading p { display: inline-block; margin: 12px 0 0; padding: 7px 11px; background: var(--surface); font-size: 15px; color: var(--ink-500); }
.specialist-layout { display: grid; grid-template-columns: minmax(160px, .8fr) minmax(225px, 1.25fr); gap: 24px; align-items: start; }
.specialist-rail { display: grid; gap: 5px; }
.specialist-duty { text-align: left; min-height: 66px; padding: 12px 15px; border-left: 4px solid transparent; background: var(--surface-2); }
.specialist-duty.is-on { background: var(--paper); border-left-color: var(--accent); box-shadow: var(--shadow-1); }
.specialist-duty b { font-size: 19px; letter-spacing: .035em; }
.specialist-duty small { display: block; }
.specialist-player { padding: 28px; overflow: hidden; }
.specialist-portrait { --sphere: 88px; position: relative; left: auto; top: auto; margin: 18px auto 36px; transform: none; cursor: default; }
.specialist-identity { display: flex; flex-direction: column; gap: 5px; color: var(--ink-500); font-size: 14px; }
.specialist-eyebrow { font: 600 17px/1 var(--font-display); text-transform: uppercase; letter-spacing: .08em; color: var(--accent-ink); margin-bottom: 14px; }
.specialist-identity h2 { margin: 0; font: 700 clamp(30px, 2.5vw, 48px)/.98 var(--font-display); text-transform: uppercase; color: var(--ink-900); overflow-wrap: anywhere; }
.specialist-attributes { margin-top: 26px; padding-top: 12px; border-top: 1px solid rgba(16,21,31,.15); font-size: 14px; color: var(--ink-500); }
.specialist-attributes > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; }
.specialist-attributes b { font: 600 27px/1 var(--font-display); color: var(--ink-900); }
.specialist-note { margin: 18px 0 0; padding: 8px 11px; font-size: 13px; color: var(--ink-500); background: var(--surface-2); }
.specialist-notice { padding: 12px; font-size: 14px; line-height: 1.35; }
@media (max-height: 820px) {
  .specialist-heading { margin: 0 0 18px; }
  .specialist-heading h1 { font-size: 38px; }
  .specialist-layout { gap: 16px; grid-template-columns: minmax(145px, .85fr) minmax(195px, 1.15fr); }
  .specialist-duty { min-height: 56px; padding: 8px 11px; }
  .specialist-duty b { font-size: 17px; }
  .specialist-player { padding: 20px; }
  .specialist-portrait { --sphere: 64px; margin: 12px auto 25px; }
  .specialist-eyebrow { margin-bottom: 8px; }
  .specialist-attributes { margin-top: 18px; }
  .specialist-attributes > div { min-height: 34px; }
}
.pitch.is-specialists .sphere-role { white-space: nowrap; width: max-content; max-width: none; }
.specialist-ability { display: none; }
@media (max-height: 820px) {
  .pitch.is-specialists .sphere-role { display: none; }
  .pitch.is-specialists .specialist-ability:not(:empty) { display: block; position: absolute; z-index: 9; right: -12px; bottom: -1px; padding: 3px 5px; background: var(--paper); color: var(--ink-900); font: 700 12px/1 var(--font-display); white-space: nowrap; box-shadow: 0 1px 4px rgba(0,0,0,.22); pointer-events: none; }
}

/* ==========================================================================================
   B13-c: the board in 3D (Board3D.ts, three.js). The pitch and the pieces are a WebGL scene; the names
   are page text laid over it, following their pieces. The flat board's white edge and green fill are the
   scene's now, so the box itself is transparent and the stadium shows round the tilted pitch.
   ========================================================================================== */
.pitch.board3d { box-shadow: none; background: transparent; aspect-ratio: var(--board3d-aspect, 1.16); touch-action: none; }
.board3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* B13-c round 2 (the user): the players are the Game Plan's own spheres again, laid over the 3D pitch. The board sets
   each one's place (transform) and size (--sphere, from the perspective) every frame; their motion is light. */
.board3d-pieces { position: absolute; inset: 0; overflow: visible; }
.board3d .sphere { left: 0; top: 0; transition: opacity var(--t-base); will-change: transform; }
.board3d .sphere-name { font-size: clamp(12px, calc(var(--sphere) * 0.42), 24px); }
/* a landing: a small give, once */
@keyframes sphere-settle {
  0% { transform: translateY(calc(var(--lift) * -1)) scale(calc(var(--scale) * 1.05), calc(var(--scale) * 0.93)); }
  45% { transform: translateY(calc(var(--lift) * -1)) scale(calc(var(--scale) * 0.98), calc(var(--scale) * 1.03)); }
  100% { transform: translateY(calc(var(--lift) * -1)) scale(var(--scale)); }
}
.sphere.is-settling .sphere-piece { animation: sphere-settle 380ms var(--ease-out); }
/* a press: the piece gives under the finger or the click before it lifts */
:is(.board3d .sphere, .seat):active:not(.is-dragging) .sphere-piece { transform: translateY(calc(var(--lift) * -1)) scale(calc(var(--scale) * 0.94)); transition-duration: 80ms; }
/* the opening, light: each piece fades up in turn */
@keyframes sphere-enter { from { opacity: 0; transform: translateY(-8px) scale(0.92); } to { opacity: 1; transform: translateY(calc(var(--lift) * -1)) scale(var(--scale)); } }
@keyframes plate-enter { from { opacity: 0; } to { opacity: 1; } }
.board3d.is-opening .sphere .sphere-piece { animation: sphere-enter 460ms var(--ease-out) var(--enter-delay, 0ms) backwards; }
.board3d.is-opening .sphere .sphere-plate, .board3d.is-opening .sphere .sphere-shadow { animation: plate-enter 420ms var(--ease-std) var(--enter-delay, 0ms) backwards; }
/* no pointer to hover with: a tap never leaves a piece lifted */
@media (hover: none) {
  .board3d .sphere:hover:not(.is-selected):not(.is-dragging):not(.is-target) { --lift: 0px; --scale: 1; }
}
@media (prefers-reduced-motion: reduce) { .board3d .sphere .sphere-piece, .board3d .sphere .sphere-plate { animation: none !important; } }

/* the position chooser, anchored at the foot of the piece */
.board3d .chooser { margin-top: 10px; }
.board3d .chooser.is-above { margin-top: 0; transform: translate(-50%, calc(-100% - var(--piece-h, 60px) * 1.15)); }

/* --- B13-c: the Game Plan on a landscape phone (its own layout, the user: "similar but not identical") -------
   The board takes the full height on the left, the biggest it can be; the pages' tabs sit at the top of the right
   column with the page beneath them; the club block goes (the career shows it elsewhere); keyboard hints go on touch. */
@media (max-height: 520px) {
  :root { --stage-top: 6px; --stage-bottom: 6px; --nav-h: 38px; --pitch-gap: 12px; }
  .nav { left: var(--side-left); right: var(--pad); width: auto; top: 6px; }
  .nav.is-wide { left: var(--pad); }
  .nav-tab { font-size: 13.5px; letter-spacing: 0.02em; }
  .team { display: none; }
  .side, .side.is-wide { top: calc(6px + var(--nav-h) + 8px); }
  .pitch.board3d { aspect-ratio: 1.14; }
}
@media (pointer: coarse) {
  .foot .key-hint { display: none; }
}
@media (max-height: 520px) {
  :root { --foot-h: 34px; }
  /* the right column scrolls on a phone (no bar shown) rather than cutting the page off at the foot */
  .side { bottom: calc(var(--stage-bottom) + var(--foot-h) + 4px); }
  .side > .page.is-active { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(16, 21, 31, 0.3) transparent; }
  /* the bench: a frosted panel over the whole column, the substitutes in two rows of five */
  .dugout { top: 0; bottom: 0; max-height: none; overflow-y: visible; padding: 10px 12px 8px; display: flex; flex-direction: column; }
  .dugout-head .title { font-size: 17px; }
  .dugout-head .hint { display: none; }
  .seats { flex: 1 1 auto; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-content: start; gap: 6px 2px; padding: 10px 0 0; --sphere: 36px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(16, 21, 31, 0.3) transparent; }
  .seat { padding: 4px 2px 6px; min-height: 44px; }
  .seat .sphere { margin-bottom: 4px; }
  .seat .name { font-size: 11.5px; letter-spacing: 0.02em; }
  .seat .meta { font-size: 10.5px; gap: 4px; }
  .seat .meta b { font-size: 12px; }
  .bench-bar, .bench-legs { display: none; }
  .foot .history .icon-btn { width: 40px; height: 34px; }
}

/* --- B13-c: tactile everywhere (the user: "very tactile ... the animations of everything better") ----------------
   Every control sinks under the finger or the click, a touch tap buzzes (GamePlanApp), and a page's items rise in
   one after another when the page opens -- only then, never on the re-renders a click causes. */
:is(.btn, .nav-tab, .shape-tile, .role-card, .approach-tile, .rail-item, .specialist-duty, .variant-chip, .seg button, .seat, .icon-btn, .chooser button, .details-toggle):active {
  transform: translateY(1px) scale(0.97); transition-duration: 70ms;
}
@keyframes gp-rise { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }
.side > .page.is-entering :is(.shape-grid, .role-list, .approach-grid, .rail, .specialist-rail, .sliders, .variant-row) > * { animation: gp-rise 460ms var(--ease-out) backwards; }
.side > .page.is-entering :is(.shape-grid, .role-list, .approach-grid, .rail, .specialist-rail, .sliders, .variant-row) > :nth-child(1) { animation-delay: 92ms; }
.side > .page.is-entering :is(.shape-grid, .role-list, .approach-grid, .rail, .specialist-rail, .sliders, .variant-row) > :nth-child(2) { animation-delay: 124ms; }
.side > .page.is-entering :is(.shape-grid, .role-list, .approach-grid, .rail, .specialist-rail, .sliders, .variant-row) > :nth-child(3) { animation-delay: 156ms; }
.side > .page.is-entering :is(.shape-grid, .role-list, .approach-grid, .rail, .specialist-rail, .sliders, .variant-row) > :nth-child(4) { animation-delay: 188ms; }
.side > .page.is-entering :is(.shape-grid, .role-list, .approach-grid, .rail, .specialist-rail, .sliders, .variant-row) > :nth-child(5) { animation-delay: 220ms; }
.side > .page.is-entering :is(.shape-grid, .role-list, .approach-grid, .rail, .specialist-rail, .sliders, .variant-row) > :nth-child(6) { animation-delay: 252ms; }
.side > .page.is-entering :is(.shape-grid, .role-list, .approach-grid, .rail, .specialist-rail, .sliders, .variant-row) > :nth-child(7) { animation-delay: 284ms; }
.side > .page.is-entering :is(.shape-grid, .role-list, .approach-grid, .rail, .specialist-rail, .sliders, .variant-row) > :nth-child(8) { animation-delay: 316ms; }
.side > .page.is-entering :is(.shape-grid, .role-list, .approach-grid, .rail, .specialist-rail, .sliders, .variant-row) > :nth-child(9) { animation-delay: 348ms; }
.side > .page.is-entering :is(.shape-grid, .role-list, .approach-grid, .rail, .specialist-rail, .sliders, .variant-row) > :nth-child(10) { animation-delay: 380ms; }
.side > .page.is-entering :is(.shape-grid, .role-list, .approach-grid, .rail, .specialist-rail, .sliders, .variant-row) > :nth-child(11) { animation-delay: 412ms; }
.side > .page.is-entering :is(.shape-grid, .role-list, .approach-grid, .rail, .specialist-rail, .sliders, .variant-row) > :nth-child(12) { animation-delay: 444ms; }
.side > .page.is-entering :is(.player-hero, .formation-hero, .roles-head, .specialist-heading, .squad-empty) { animation: gp-rise 420ms var(--ease-out) backwards; }
@media (prefers-reduced-motion: reduce) { .side > .page.is-entering * { animation: none !important; } }

/* --- B13-c round 3: the formations in one row, as elegant cards (the user) ------------------------------------------
   Every shape side by side, snapping into place as you swipe (or wheel, or step with the arrows); the chosen card
   stands lifted in white with its pieces in the selection blue and the travelling blue frame round it. */
.shape-board { margin-top: clamp(14px, 3vh, 34px); flex: 0 0 auto; }
.shape-strip { position: relative; display: flex; align-items: center; gap: 6px; }
.shape-row {
  position: relative; flex: 1 1 auto; min-width: 0; display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-padding-inline: 6px; overscroll-behavior-x: contain; padding: 12px 6px 16px;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}
.shape-row::-webkit-scrollbar { display: none; }
.shape-row .shape-tile {
  flex: 0 0 clamp(112px, 8.6vw, 160px); scroll-snap-align: center; gap: 2px; padding: 9px 9px 11px;
  background: rgba(255, 255, 255, 0.58); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08), 0 6px 16px rgba(16, 24, 40, 0.1);
  transition: background var(--t-fast), transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.shape-row .shape-tile:hover { background: var(--paper); transform: translateY(-3px); box-shadow: 0 2px 4px rgba(16, 24, 40, 0.1), 0 14px 28px rgba(16, 24, 40, 0.16); }
.shape-row .shape-tile.is-on { background: var(--paper); transform: translateY(-5px); box-shadow: 0 2px 4px rgba(16, 24, 40, 0.1), 0 18px 34px rgba(16, 24, 40, 0.2); }
.shape-row .shape-tile svg { width: 100%; height: auto; display: block; margin-bottom: 7px; }
.shape-row .tile-name { font-size: clamp(17px, 1.3vw, 22px); font-weight: 700; color: var(--ink-900); line-height: 1; }
.formation-card .fc-turf { fill: #4aa75a; }
.formation-card .fc-stripe { fill: rgba(255, 255, 255, 0.06); }
.formation-card .fc-lines * { fill: none; stroke: rgba(255, 255, 255, 0.72); stroke-width: 0.8; }
.formation-card .fc-dot { fill: #fff; stroke: rgba(16, 21, 31, 0.28); stroke-width: 0.6; transition: fill var(--t-fast); }
.formation-card .fc-dot.gk { fill: #e8edf2; }
.formation-card .fc-shadow { fill: rgba(0, 20, 6, 0.35); }
.shape-tile.is-on .formation-card .fc-dot { fill: var(--accent); stroke: #fff; stroke-width: 0.9; }
.shape-tile.is-on .formation-card .fc-dot.gk { fill: var(--accent-ink); }
.shape-row .shape-cursor { transform: translateY(-5px); }
.shape-arrow {
  flex: none; width: 34px; height: 64px; display: grid; place-items: center; border: 0; cursor: pointer;
  background: var(--surface); color: var(--ink-900); box-shadow: var(--shadow-1);
  transition: opacity var(--t-fast), background var(--t-micro), transform var(--t-micro) var(--ease-out);
}
.shape-arrow:hover { background: var(--paper); }
.shape-arrow svg { width: 18px; height: 18px; }
.shape-strip.at-start .shape-arrow.is-prev, .shape-strip.at-end .shape-arrow.is-next { opacity: 0.3; pointer-events: none; }
.shape-arrow:active { transform: scale(0.94); }
@media (pointer: coarse) { .shape-arrow { display: none; } }

/* --- B13-c round 3: the bench's pieces move exactly as the starters do (the user) ----------------------------------
   The seat no longer jumps as a block: the piece itself lifts on hover, gives under a press, lights up when chosen,
   and settles when a player lands on the bench; a piece carried off the bench glides after the pointer. */
.seat:hover:not(:disabled) { transform: none; }
.seat:hover:not(:disabled) .sphere:not(.is-selected) { --lift: 5px; --scale: 1.055; }
.seat .sphere .sphere-bounce { transition: opacity var(--t-fast); }
.seat:hover .sphere .sphere-bounce { opacity: 1; }
.seat .name, .seat .meta { transition: color var(--t-fast); }
.seat:hover .name { color: var(--accent-ink); }
@media (hover: none) { .seat:hover:not(:disabled) .sphere:not(.is-selected) { --lift: 0px; --scale: 1; } }

/* --- B13-c round 3: every phone page fits its column, readable, no scrolling (the user) ------------------------------
   The right column of a landscape phone is about 370 x 290 px: each page is laid out for that, in type big enough to
   read at arm's length, with the long copy and the second-order detail left to the laptop. */
@media (max-height: 520px) {
  /* the lineup: the player in two lines, his attributes in a compact grid, the bench button after them -- nothing
     overlaps (the attributes used to open behind the bench button) */
  .side > .page[data-page="squad"].is-active { display: flex; flex-direction: column; gap: 8px; }
  .squad-context, .squad-actions { position: static; }
  .squad-actions { margin-top: auto; }
  .squad-empty { font-size: 14px; padding: 10px 12px; gap: 10px; }
  .squad-watermark { width: 150px; right: 4%; top: 58%; }
  .player-hero { gap: 10px; }
  .player-hero .ovr { font-size: 46px; }
  .player-hero .ovr small { font-size: 9.5px; margin: 0 0 3px 2px; }
  .player-hero .who { padding-bottom: 2px; }
  .player-hero .given { font-size: 12.5px; }
  .player-hero .surname { font-size: 30px; }
  .player-hero .position-line { margin-top: 5px; gap: 4px 8px; font-size: 12.5px; }
  .pos-chip { font-size: 14px; padding: 2px 9px 2px 7px; gap: 6px; }
  .pos-chip .long { font-size: 11.5px; }
  .player-facts { margin-top: 8px; padding: 7px 10px; gap: 4px 10px; font-size: 12.5px; }
  .player-facts .sep { height: 12px; }
  .details-toggle { margin-top: 4px; padding: 4px 2px; font-size: 13px; min-height: 30px; }
  .attr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 14px; padding: 8px 10px; margin-top: 2px; width: 100%; }
  .attr-row { font-size: 11.5px; gap: 6px; grid-template-columns: 30px 1fr 24px; }
  .attr-row .v { font-size: 14px; }
  .squad-actions .btn { height: 40px; font-size: 15px; padding: 0 14px; }

  /* the formations: the family jump, the chosen shape in one line, and the row of cards */
  .formations { height: auto; }
  .seg button { font-size: 13px; padding: 6px 12px; }
  .formation-hero { margin-top: 8px; padding: 0 2px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
  .formation-hero .name { font-size: 34px; }
  .formation-hero .character { font-size: 12.5px; margin-top: 0; flex: 1 1 140px; }
  .variant-row { margin-top: 4px; flex-basis: 100%; }
  .variant-chip { font-size: 12.5px; padding: 6px 11px; }
  .shape-board { margin-top: 4px; }
  .shape-row { gap: 8px; padding: 8px 4px 10px; }
  .shape-row .shape-tile { flex-basis: 78px; padding: 6px 6px 7px; }
  .shape-row .shape-tile svg { margin-bottom: 4px; }
  .shape-row .tile-name { font-size: 15px; }

  /* the roles: one line per role, the chosen one opened with its description; on the pitch only the roles show */
  .roles-head { gap: 10px; padding: 0 2px; }
  .roles-head .surname { font-size: 28px; }
  .roles-head .pos-chip { margin-bottom: 2px; }
  .role-list { margin-top: 8px; gap: 4px; }
  .role-card { grid-template-columns: 1fr auto; gap: 8px; padding: 8px 12px; min-height: 44px; }
  .role-card .role-diagram, .role-card .role-tags { display: none; }
  .role-card .role-name { font-size: 17px; }
  .role-card .role-desc { display: none; font-size: 12.5px; margin-top: 3px; }
  .role-card.is-on .role-desc { display: block; }
  /* A1: the trap switch, the fit readout and the opponent card, compact on a landscape phone */
  .trap-row { padding: 8px 12px; margin-top: 8px; gap: 10px; }
  .trap-head b { font-size: 15px; }
  .trap-head span { font-size: 12px; }
  .fit-list { gap: 6px; }
  .fit-group { padding: 8px 12px; gap: 5px; }
  .fit-row b { font-size: 15px; }
  .fit-row span { font-size: 12.5px; }
  .opponent-card { padding: 8px 12px; gap: 5px; max-width: 100%; box-sizing: border-box; }
  .opp-head b { font-size: 19px; }
  .opp-head span, .opp-style { font-size: 12px; }
  .opp-grid { grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr); gap: 3px 10px; }
  .opp-grid span { font-size: 11.5px; }
  .opp-grid b { font-size: 12.5px; }
  .role-card .role-state { font-size: 11.5px; }
  .board3d.is-roles .sphere-name { display: none; }
  .board3d.is-roles .sphere-role { font-size: 11px; margin-top: 0; padding-top: 2px; }

  /* the tactics (full width): the sections as a slim rail, the choices in two tight rows, the sliders in two columns */
  .tactics { padding-top: 4px; grid-template-columns: 170px minmax(0, 1fr); gap: 14px; }
  .rail { gap: 3px; }
  .rail-item { padding: 7px 12px; min-height: 46px; }
  .rail-item b { font-size: 15px; }
  .rail-item small { font-size: 12px; margin-top: 1px; }
  .section-title { font-size: 22px; margin: 0 0 8px 2px; }
  .approach-grid { gap: 5px; }
  .approach-tile { min-height: 48px; padding: 8px 12px; gap: 10px; }
  .approach-tile svg { width: 22px; height: 22px; }
  .approach-tile .a-name { font-size: 15px; }
  .section-desc { margin: 8px 2px 0; padding: 8px 12px; font-size: 13px; }
  .sliders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; padding: 10px 14px; }
  .slider .s-name { font-size: 14px; }
  .slider .s-num { font-size: 16px; }
  .slider .s-band { font-size: 11.5px; }
  .slider .s-ends { font-size: 10.5px; }
  .slider .s-rail { height: 28px; margin-top: 0; }

  /* the specialists: the duties as a compact list beside the chosen player's card; on the pitch only the chips */
  .specialist-heading { display: none; }
  .specialist-layout { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 8px; }
  .specialist-rail { gap: 3px; }
  .specialist-duty { min-height: 40px; padding: 5px 10px; }
  .specialist-duty b { font-size: 14px; }
  .specialist-duty small { font-size: 11.5px; }
  .specialist-player { padding: 10px 12px; display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: center; }
  .specialist-portrait { --sphere: 44px; margin: 0; grid-row: span 2; }
  .specialist-eyebrow { font-size: 12px; margin-bottom: 2px; }
  .specialist-identity { gap: 1px; font-size: 11.5px; }
  .specialist-identity .given { display: none; }
  .specialist-identity h2 { font-size: 22px; }
  .specialist-attributes { grid-column: 1 / -1; margin-top: 6px; padding-top: 4px; font-size: 12px; }
  .specialist-attributes > div { min-height: 26px; }
  .specialist-attributes b { font-size: 18px; }
  .specialist-note, .specialist-notice { display: none; }
  .board3d.is-specialists .sphere-name { display: none; }
}
@media (max-height: 520px) {
  .side > .page[data-page="squad"].is-active { gap: 5px; }
  .player-hero .ovr { font-size: 40px; }
  .player-hero .surname { font-size: 27px; }
  .player-facts { margin-top: 5px; padding: 5px 10px; }
  .attr-grid { gap: 1px 14px; padding: 5px 10px; }
  .details-toggle { min-height: 26px; margin-top: 0; }
  .squad-actions .btn { height: 38px; }
}
@media (max-height: 520px) {
  /* the sliders' end labels are a laptop's luxury: seven sliders then fit the phone's column */
  .slider .s-ends { display: none; }
  .sliders { gap: 2px 18px; padding: 8px 14px; }
}
/* a swipe to the next or previous tab: the page slides in from the side it came from */
@keyframes page-from-right { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes page-from-left { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
.side > .page.is-active.from-right { animation: page-from-right var(--t-page) var(--ease-out) both; }
.side > .page.is-active.from-left { animation: page-from-left var(--t-page) var(--ease-out) both; }
/* a sideways swipe on the page is the Game Plan's (the next tab), never the browser's "back" */
html, body { overscroll-behavior: none; }
@media (pointer: coarse) { .side { touch-action: pan-y; } }
/* the family control's highlight slides as the formations row scrolls into another family */
.seg-cursor { transition: left var(--t-page) var(--ease-out), width var(--t-page) var(--ease-out); }

/* --- B13-c round 5: seven on the bench, named in full; the reserves folded away beneath it (the user) --------------- */
.seats { justify-content: space-around; gap: 4px; }
.seat .name { font-size: clamp(12.5px, 0.95vw, 16px); letter-spacing: 0.02em; text-overflow: clip; overflow: visible; }
.reserves-toggle {
  display: flex; align-items: center; gap: 10px; width: calc(100% + 48px); margin: 0 -24px; padding: 10px 24px; min-height: 44px;
  border: 0; border-top: 1px solid var(--line); background: rgba(255, 255, 255, 0.5); cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-700);
  transition: background var(--t-fast), color var(--t-fast);
}
.reserves-toggle:hover { background: var(--paper); color: var(--ink-900); }
.reserves-toggle .count { font-family: var(--font-ui); font-weight: 600; font-size: 12px; letter-spacing: 0; padding: 2px 7px; background: var(--surface-ink); color: var(--ink-700); }
.reserves-toggle svg { width: 14px; height: 14px; margin-left: auto; transition: transform var(--t-base) var(--ease-out); }
.reserves-toggle.is-open svg { transform: rotate(180deg); }
.seats.reserves {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 4px; padding: 10px 0 12px;
  --sphere: clamp(34px, 2.7vw, 48px); animation: page-in var(--t-page) var(--ease-out) both;
}
@media (max-height: 520px) {
  /* a phone: the seven in two rows (four and three), names in full; the reserves open beneath in the same panel */
  .seats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 4px; flex: 0 0 auto; }
  .seat .name { font-size: 12px; }
  .reserves-toggle { width: calc(100% + 24px); margin: 6px -12px 0; padding: 8px 12px; font-size: 13px; min-height: 40px; }
  .seats.reserves { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 6px 0 4px; --sphere: 30px; overflow-y: auto; flex: 1 1 auto; }
}
@media (max-width: 1500px) and (min-height: 521px) { .seat .name { font-size: 12px; letter-spacing: 0; } }

/* --- B13-c round 5: the Game Plan's opening, light and choreographed (the user: it "feels heavy") ------------------ */
@keyframes gp-drop { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes gp-pitch-in { from { opacity: 0; transform: translateY(22px) scale(0.975); } to { opacity: 1; transform: none; } }
@keyframes gp-side-in { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
@keyframes gp-fade { from { opacity: 0; } to { opacity: 1; } }
.gp-opening .nav { animation: gp-drop 420ms var(--ease-out) both; }
.gp-opening .pitch-col:not(.is-parked) { animation: gp-pitch-in 620ms var(--ease-out) 40ms both; }
.gp-opening .side { animation: gp-side-in 520ms var(--ease-out) 160ms both; }
.gp-opening .foot, .gp-opening .team, .gp-opening .gp-back { animation: gp-fade 420ms var(--ease-std) 260ms both; }
/* the pitch fades up once its turf is painted (no flat green, then a pop) */
.board3d .board3d-canvas { opacity: 0; transition: opacity 380ms var(--ease-std); }
.board3d.is-ready .board3d-canvas { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .board3d .board3d-canvas { opacity: 1; transition: none; } }

/* "Play as" sits over the pieces (their stacking follows the pitch's depth, well above a plain z-index) */
.board3d .chooser { z-index: 5000; }
@media (max-height: 520px) {
  .dugout { padding: 8px 12px 6px; }
  .dugout-head .close { width: 36px; height: 36px; }
  .seats { --sphere: 31px; gap: 2px 4px; padding-top: 4px; }
  .seat { padding: 2px 2px 3px; min-height: 0; }
  .seat .sphere { margin-bottom: 2px; }
  .seat .name { font-size: 11.5px; line-height: 1.1; }
  .seat .meta { font-size: 10px; }
  .reserves-toggle { margin-top: 4px; min-height: 36px; padding: 6px 12px; }
  .seats.reserves { --sphere: 29px; padding: 4px 0 2px; }
}
@media (max-height: 520px) { .seats.reserves { padding-top: 9px; } .seats { padding-top: 8px; } }
/* a seat may be short of room; its piece never gives up its shape (it squashed to an oval in the phone's reserves) */
.seat .sphere { flex-shrink: 0; }
@media (max-height: 520px) {
  .dugout-head { align-items: center; }
  .dugout-head .close { width: 32px; height: 32px; }
  .dugout-head .title { font-size: 16px; }
}
@media (max-height: 520px) {
  .seats { gap: 0 4px; padding-top: 6px; }
  .seat { padding: 1px 2px 2px; }
  .reserves-toggle { min-height: 32px; padding: 4px 12px; margin-top: 2px; }
  .seats.reserves { padding-top: 7px; }
}

/* --- B13-c round 6: a bench that fits a laptop (the user: names ran into each other; at 1024 px the seven stacked) ----
   Not phones (their four-and-three layout stays). In a squat window (1024 x 768) the height-driven pitch took all but
   160 px of the width; it now gives way so the side column keeps at least 440 px (the pitch never slides under the
   panels). Below 700 px the seven sit in two rows, bigger than the single squeezed row they replace. A name still wider
   than its seat is shrunk to fit by the view (`fitSeatNames`). */
@media (min-height: 521px) {
  .pitch { height: min(100%, calc((100vw - 2 * var(--pad) - var(--pitch-gap) - 440px) / (68 / 105 * var(--board-stretch)))); }
  .dugout { container: dugout / inline-size; }
  @container dugout (max-width: 699px) {
    .dugout-head { flex-wrap: wrap; row-gap: 4px; }
    .dugout-head .hint { order: 3; flex-basis: 100%; }
    .seats:not(.reserves) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 6px; padding: 14px 0 0; --sphere: clamp(48px, 3.9vw, 58px); }
    .seat .name { font-size: 15px; letter-spacing: 0.03em; }
    .seat .meta { font-size: 12.5px; }
    .seats.reserves { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); --sphere: clamp(40px, 3.2vw, 50px); }
  }
}
.seat .name { max-width: 100%; }
/* with the bench open and nobody picked, the panel's own hint says it all: the squad page's line would sit half under it */
.side:has(.dugout.is-open) .squad-empty { visibility: hidden; }

/* ==========================================================================================
   Game Plan review (8 Oct 2026, the user): the footer always fits, the header names its settings, the board's position
   dot and one-line role labels, the player card, the formation cards without the blue frame, the Tactics motion.
   ========================================================================================== */

/* the footer: hints give way (clipped), undo / redo / reset never leave the screen; a keycap never wraps */
.foot { min-width: 0; }
.foot .hints { flex: 1 1 auto; min-width: 0; max-height: 26px; display: flex; flex-wrap: wrap; align-items: center; column-gap: inherit; row-gap: 40px; overflow: hidden; }
.foot .key-hint { flex: none; white-space: nowrap; }
.foot .history { flex: none; }
.keycap { white-space: nowrap; }

/* the header: each setting carries its name */
.team .team-line .k { color: var(--ink-300); font-weight: 500; }

/* the board: a dot left of each name, green in his natural position and amber out of it */
.board3d .sphere-name { position: relative; }
.board3d .sphere-name::before {
  content: ""; position: absolute; right: 100%; top: 50%; width: 0.44em; height: 0.44em; margin: -0.2em 0.36em 0 0; border-radius: 50%;
  background: var(--ok); box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(0, 0, 0, 0.5); transition: background var(--t-fast);
}
.board3d .sphere.is-unfamiliar .sphere-name::before { background: var(--warn); }
/* a showcase board (team of the season, the season review) has no plan to fit: no dot */
.board3d:is(.is-specialists, .is-showcase) .sphere-name::before { display: none; }

/* the Roles page: one short line in sentence case under the name, never two lines of capitals */
.board3d.is-roles .sphere-role {
  text-transform: none; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; max-width: none;
  font-size: clamp(13px, calc(var(--sphere) * 0.34), 21px); padding-top: 3px; margin-top: 2px; border-top-width: 1.5px;
}

/* the Specialists page: the keeper's plate stands beside him (name, then the value), clear of the box */
.board3d.is-specialists .sphere.is-low .sphere-plate {
  top: 50%; bottom: auto; left: 100%; transform: translateY(-50%); margin: 0 0 0 calc(var(--sphere) * 0.2);
  flex-direction: column; align-items: flex-start;
}

/* --- the player card ----------------------------------------------------------------------------------------- */
.pcard { width: min(100%, clamp(460px, 31vw, 640px)); padding: 22px 26px 24px; }
.pcard-head { display: flex; align-items: flex-end; gap: 20px; }
.pcard-ovr { flex: none; display: flex; flex-direction: column; align-items: flex-start; }
.pcard-ovr b { font-family: var(--font-display); font-weight: 700; font-size: clamp(64px, 5.6vw, 104px); line-height: 0.84; letter-spacing: -0.01em; color: var(--ink-900); }
.pcard-ovr small { margin: 8px 0 0 3px; font: 600 12.5px/1 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-500); }
.pcard-who { flex: 1 1 auto; min-width: 0; padding-bottom: 2px; }
/* the shirt number: its own column on the right, the overall's mirror */
.pcard-shirt { flex: none; display: flex; flex-direction: column; align-items: flex-end; align-self: flex-start; padding-top: 4px; }
.pcard-shirt b { font: 700 clamp(44px, 3.6vw, 66px)/0.84 var(--font-display); color: var(--ink-700); }
.pcard-shirt small { margin-top: 8px; font: 600 12.5px/1 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-500); }
.pcard-who .given { font-size: clamp(14px, 1vw, 18px); font-weight: 500; color: var(--ink-500); }
.pcard-who .surname { font-family: var(--font-display); font-weight: 700; font-size: clamp(38px, 3.2vw, 60px); line-height: 0.92; letter-spacing: 0.01em; text-transform: uppercase; color: var(--ink-900); overflow-wrap: anywhere; }
.pcard-who .position-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-top: 10px; font-size: 14.5px; font-weight: 500; color: var(--ink-500); }

.pcard-facts { display: grid; grid-template-columns: 0.8fr 1fr 1.25fr; margin-top: 20px; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.pf { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 12px 14px; }
.pf + .pf { border-left: 1px solid var(--line-strong); }
.pf:first-child, .pf.is-role + .pf { padding-left: 0; border-left: 0; }
/* the role has the whole first row: its name never shortens */
.pf.is-role { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 14px; border-bottom: 1px solid var(--line-strong); }
.pf.is-role .pf-k { width: 3.6em; }
.pf.is-role .pf-v { font-size: 16px; }
.pf-k { font: 600 12px/1 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-300); white-space: nowrap; }
.pf-v { font-size: 15px; font-weight: 600; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pf-change {
  flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border: 0; cursor: pointer;
  background: var(--surface-ink); color: var(--ink-700); font: 600 12.5px/1 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase;
  transition: background var(--t-micro), color var(--t-micro);
}
.pf-change svg { width: 12px; height: 12px; }
.pf-change:hover { background: var(--ink-900); color: #fff; }
.pf-stars { letter-spacing: 1px; }
.pf-stars i { font-style: normal; color: var(--ink-900); }
.pf-stars i.off { color: rgba(16, 21, 31, 0.2); }

.pcard-attrs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 30px; margin-top: 18px; }
.pattr { display: grid; grid-template-columns: 1fr auto; align-items: baseline; row-gap: 6px; }
.pattr .k { font-size: 14.5px; font-weight: 500; color: var(--ink-500); }
.pattr .v { font: 700 21px/1 var(--font-display); color: var(--c, var(--ink-900)); }
.pattr .bar { grid-column: 1 / -1; height: 5px; background: var(--surface-ink); overflow: hidden; }
.pattr .bar i { display: block; height: 100%; background: var(--c, var(--ink-700)); transform-origin: 0 50%; }
.pattr.is-top .k { color: var(--ink-900); font-weight: 600; }

@keyframes pcard-in { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
@keyframes pcard-swap { from { opacity: 0.35; } to { opacity: 1; } }
@keyframes bar-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.pcard.is-entering { animation: pcard-in 340ms var(--ease-out) both; }
.pcard.is-switching { animation: pcard-swap 200ms var(--ease-std) both; }
.pcard:is(.is-entering, .is-switching) .pattr .bar i { animation: bar-fill 520ms var(--ease-out) backwards; animation-delay: calc(110ms + var(--i) * 45ms); }

@media (max-height: 820px) {
  .pcard { padding: 16px 20px 18px; }
  .pcard-ovr b { font-size: clamp(54px, 5vw, 78px); }
  .pcard-who .surname { font-size: clamp(32px, 2.9vw, 46px); }
  .pcard-shirt b { font-size: clamp(38px, 3.2vw, 52px); }
  .pcard-facts { margin-top: 14px; }
  .pf { padding: 9px 11px; }
  .pf-v { font-size: 14px; }
  .pcard-attrs { gap: 10px 24px; margin-top: 12px; }
  .pattr .v { font-size: 18px; }
  /* the substitutes panel rises over the lower half: the card keeps only its head, never a row cut in two */
  .side:has(.dugout.is-open) :is(.pcard-attrs, .pcard-facts) { display: none; }
}
@media (min-width: 2200px) {
  .pf-k { font-size: 13.5px; }
  .pf-v { font-size: 17px; }
  .pattr .k { font-size: 16.5px; }
  .pattr .v { font-size: 24px; }
}
@media (max-height: 520px) {
  .pcard { width: 100%; padding: 10px 12px 12px; }
  .pcard-head { gap: 10px; }
  .pcard-ovr b { font-size: 40px; }
  .pcard-ovr small { font-size: 9.5px; margin-top: 4px; }
  .pcard-who .given { font-size: 12px; }
  .pcard-who .surname { font-size: 26px; }
  .pcard-shirt { padding-top: 2px; }
  .pcard-shirt b { font-size: 30px; }
  .pcard-shirt small { font-size: 9.5px; margin-top: 4px; }
  .pcard-who .position-line { margin-top: 5px; gap: 4px 8px; font-size: 12px; }
  .pcard-facts { margin-top: 8px; }
  .pf { padding: 6px 8px; gap: 3px; }
  .pf-k { font-size: 10px; }
  .pf-v { font-size: 12.5px; }
  .pf-change span { display: none; }
  .pcard-attrs { grid-template-columns: repeat(3, 1fr); gap: 6px 14px; margin-top: 8px; }
  .pattr { row-gap: 3px; }
  .pattr .k { font-size: 12px; }
  .pattr .v { font-size: 15px; }
  .pattr .bar { height: 3px; }
  .side:has(.dugout.is-open) :is(.pcard-attrs, .pcard-facts) { display: none; }
}

/* --- the formation cards: the chosen card lifts and grows, the others sit back; no travelling frame ------------ */
.shape-row {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
  padding-top: 16px; padding-bottom: 22px;
}
.shape-row .shape-tile {
  position: relative; transform: scale(0.94); opacity: 0.86;
  transition: background var(--t-base) var(--ease-std), opacity var(--t-base) var(--ease-std), transform 380ms var(--ease-out), box-shadow 380ms var(--ease-out);
}
.shape-row .shape-tile:hover { opacity: 1; transform: translateY(-2px) scale(0.96); }
.shape-row .shape-tile.is-on {
  opacity: 1; transform: translateY(-6px) scale(1);
  box-shadow: 0 2px 4px rgba(16, 24, 40, 0.1), 0 20px 38px rgba(16, 24, 40, 0.24);
}
.shape-row .shape-tile::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--accent);
  transform: scaleX(0); transition: transform 380ms var(--ease-out);
}
.shape-row .shape-tile.is-on::after { transform: scaleX(1); }
.shape-row .shape-tile:active { transform: translateY(-1px) scale(0.93); }
.shape-row .shape-tile.is-on:active { transform: translateY(-4px) scale(0.98); }
.shape-row .shape-tile .tile-name { transition: color var(--t-base); }
.shape-row .shape-tile:not(.is-on) .tile-name { color: var(--ink-500); }
.formation-card .fc-dot { transition: fill var(--t-base) var(--ease-std), stroke var(--t-base) var(--ease-std); }
@media (prefers-reduced-motion: reduce) { .shape-row .shape-tile, .shape-row .shape-tile::after { transition: none; } }

/* --- Tactics: a new section slides in with its tiles in turn; a new choice draws its icon, the line fades ------ */
@keyframes section-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes desc-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes icon-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes icon-pop { 0% { transform: scale(0.8); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
.tactics .section.is-switching > .section-title { animation: section-in 320ms var(--ease-out) both; }
.tactics .section.is-switching > :not(.section-title):not(.approach-grid) { animation: section-in 360ms var(--ease-out) 120ms both; }
.tactics .section.is-switching .approach-grid > .approach-tile { animation: gp-rise 380ms var(--ease-out) backwards; }
.tactics .section.is-switching .approach-grid > .approach-tile:nth-child(2) { animation-delay: 35ms; }
.tactics .section.is-switching .approach-grid > .approach-tile:nth-child(3) { animation-delay: 70ms; }
.tactics .section.is-switching .approach-grid > .approach-tile:nth-child(4) { animation-delay: 105ms; }
.tactics .section.is-switching .approach-grid > .approach-tile:nth-child(5) { animation-delay: 140ms; }
.tactics .section.is-switching .approach-grid > .approach-tile:nth-child(6) { animation-delay: 175ms; }
.tactics .section.is-switching .approach-grid > .approach-cursor { animation: gp-fade 300ms var(--ease-std) 120ms backwards; }
.approach-tile.is-picked svg { animation: icon-pop 420ms var(--ease-out); }
.approach-tile.is-picked svg :is(path, line, circle):not(.fill) { stroke-dasharray: 100; animation: icon-draw 560ms var(--ease-out) both; }
.section-desc.is-new { animation: desc-in 260ms var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) {
  .tactics .section *, .approach-tile.is-picked svg, .approach-tile.is-picked svg *, .section-desc.is-new, .pcard, .pcard * { animation: none !important; }
}

/* a starter carried onto the Reserves bar: it lights while the reserves are about to open */
.reserves-toggle.is-target { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }

/* one size for every ball (the user, 8 Oct): the bench and the reserves wear the pitch's piece size, set by the board */
.dugout .seats.seats { --sphere: var(--piece, 48px); }
/* with the bench open the card keeps its head only (the panel names who is being replaced); on short screens it gives way */
.side:has(.dugout.is-open) :is(.pcard-attrs, .pcard-facts) { display: none; }
@media (max-height: 820px) { .side:has(.dugout.is-open) .pcard { visibility: hidden; } }

/* a held finger never selects the page's text or opens the long-press callout (the user, 8 Oct, phone): it is a game,
   not a document; fields you type into keep their own selection */
html, body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
input, textarea, [contenteditable="true"] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }