/* ---------- Fonts (self-hosted, latin + latin-ext; variable files) ---------- */
/* Figtree latin-ext */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/figtree-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Figtree latin */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/figtree-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Figtree latin-ext */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/figtree-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Figtree latin */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/figtree-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Figtree latin-ext */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/figtree-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Figtree latin */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/figtree-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Figtree latin-ext */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/figtree-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Figtree latin */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/figtree-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Fraunces latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/fraunces-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Fraunces latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/fraunces-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Fraunces latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/fraunces-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Fraunces latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/fraunces-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Fraunces latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/fraunces-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Fraunces latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/fraunces-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Fraunces latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/fraunces-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Fraunces latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/fraunces-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Fraunces latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/fraunces-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Fraunces latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/fraunces-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
:root {
  --bg: #ffffff;
  --warm: #f5f3f1;
  --warm-2: #faf9f8;
  --sage: #e4ecde;
  --ink: #0b0b0b;
  --ink-2: #3a3936;
  --muted: #6f6c68;
  --line: #e7e4e0;
  --line-2: #d6d2cc;
  --green: #29cc57;
  --green-d: #1fa847;
  --green-ink: #0d6b2c;
  --green-soft: #e3f7e8;
  --red: #f0564a;
  --red-soft: #fdecea;
  --amber: #ffb627;
  --blue: #3d7bff;

  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --r-xl: 32px;
  --r-lg: 24px;
  --r-md: 16px;
  --r-sm: 10px;
  --shadow-1: 0 1px 2px rgba(20, 16, 10, .05), 0 6px 20px rgba(20, 16, 10, .06);
  --shadow-2: 0 2px 6px rgba(20, 16, 10, .06), 0 24px 60px rgba(20, 16, 10, .14);
  --ease: cubic-bezier(.2, .8, .2, 1);
  /* Motion tokens. Default: critically damped, no overshoot (Apple damping 1.0).
     --ease-land keeps a small overshoot, reserved for things that drop and land. */
  --ease-spring: cubic-bezier(.22, 1, .36, 1);
  --ease-land: cubic-bezier(.3, 1.18, .5, 1);
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1160px;
  /* Spacing scale (see "Spacing system" at the end): one rhythm for every chapter */
  --gap-group: 12px;                      /* rows that belong together: filters, tiles + their grid */
  --gap-block: clamp(24px, 3vw, 32px);    /* between separate blocks */
  --gap-head: clamp(32px, 4vw, 48px);     /* chapter heading to its content */
  --gap-section: clamp(48px, 6vw, 64px);  /* a sub-section inside a chapter */
  --pad-card: clamp(20px, 3vw, 32px);     /* large cards */
  --gap-cards: clamp(12px, 1.4vw, 16px);  /* between cards in a grid */
  --gap-tiles: 12px;                      /* between small stat tiles */
  --gap-rows: 8px;                        /* between rows of a list */

  --surface: #ffffff;
  --fill: rgba(0, 0, 0, .055);
  --fill-2: rgba(0, 0, 0, .09);
  --glass: rgba(255, 255, 255, .72);
  --glass-strong: rgba(255, 255, 255, .94);
  --on-ink: #ffffff;
  --net-1: #ffffff; --net-2: #f3f7ef; --net-3: #e9f0e3;
  --net-label: #0b0b0b; --net-halo: rgba(247, 250, 244, .95); --net-orbit: rgba(0, 0, 0, .08);
  --tint-violet: #ece8f6; --tint-peach: #fbefe2; --tint-indigo: #f1f0fb; --tint-blue: #f2f6ff;
  --tint-amber: #fff4e5; --tint-gold: #fbf3d9; --tint-gray: #f1efec;
  color-scheme: light;
}

/* ---------- Dark theme (set on <html> by the toggle or the system setting) ---------- */
:root[data-theme="dark"] {
  --bg: #0f0f0e;
  --warm: #1a1917;
  --warm-2: #161514;
  --sage: #121912;
  --ink: #f3f1ed;
  --ink-2: #c9c4bd;
  --muted: #8e8881;
  --line: #2b2926;
  --line-2: #3d3a36;
  --green-soft: #12301c;
  --green-ink: #6fe397;
  --red-soft: #3d1b18;
  --surface: #1e1d1b;
  --fill: rgba(255, 255, 255, .07);
  --fill-2: rgba(255, 255, 255, .12);
  --glass: rgba(26, 25, 23, .74);
  --glass-strong: rgba(30, 29, 27, .95);
  --on-ink: #0f0f0e;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .35);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, .5), 0 24px 60px rgba(0, 0, 0, .55);
  --net-1: #1f261c; --net-2: #161c14; --net-3: #111610;
  --net-label: #f3f1ed; --net-halo: rgba(17, 22, 16, .92); --net-orbit: rgba(255, 255, 255, .09);
  --tint-violet: #241f38; --tint-peach: #2f2318; --tint-indigo: #221f36; --tint-blue: #172238;
  --tint-amber: #2e2414; --tint-gold: #2c2612; --tint-gray: #26241f;
  color-scheme: dark;
}
:root[data-theme="dark"] .hl-card:nth-child(1) { background: var(--warm); }
:root[data-theme="dark"] .fee { background: var(--fill); }
:root[data-theme="dark"] .side.gegen, :root[data-theme="dark"] .name-chip.vs { color: #b9b0ff; }
:root[data-theme="dark"] .side.nat { color: #e8c547; }
:root[data-theme="dark"] .fee.loan { color: #8fb0ff; }
:root[data-theme="dark"] .m-res.N { color: #ff8a80; }
:root[data-theme="dark"] .q-feedback.bad b { color: #ffb066; }
:root[data-theme="dark"] .crest, :root[data-theme="dark"] #mvChart .tf image { filter: drop-shadow(0 0 1px rgba(255, 255, 255, .35)); }
:root[data-theme="dark"] .q-level { background: color-mix(in srgb, var(--lc) 14%, var(--surface)); }
:root[data-theme="dark"] .q-mini-ring .bg { stroke: color-mix(in srgb, var(--lc) 22%, var(--surface)); }
:root[data-theme="dark"] .q-set-go { color: color-mix(in srgb, var(--lc) 80%, #fff); }
:root[data-theme="dark"] .scrub-handle { box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 6px 18px rgba(0, 0, 0, .5); }
.theme-btn { flex: none; width: 38px; height: 38px; }
.theme-btn svg { position: absolute; transition: transform 360ms var(--ease-spring), opacity 240ms; }
.theme-btn { position: relative; }
.theme-btn .i-sun { opacity: 0; transform: rotate(-90deg) scale(.5); }
:root[data-theme="dark"] .theme-btn .i-sun { opacity: 1; transform: none; }
:root[data-theme="dark"] .theme-btn .i-moon { opacity: 0; transform: rotate(90deg) scale(.5); }
@media (max-width: 1100px) { .nav .btn { margin-left: 0; } }
/* Theme switch: the new theme is revealed by a circle (see theme() in app.js); no default crossfade */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { z-index: 2; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
/* While an animation holds the page (scrollStop() in app.js) */
html.scroll-held { overflow: hidden; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1rem/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Film grain over the whole page: keeps the flat surfaces from looking like a template */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .045;
}
:root[data-theme="dark"] body::after { opacity: .06; }
img, svg { display: block; }
button { font: inherit; color: inherit; }
a { color: inherit; }
em { font-style: italic; }
::selection { background: var(--green-soft); }

/* ---------- Type ---------- */
.display, h2, .display-2, .season-club, .brand, .sheet h3.title {
  font-family: var(--serif);
  font-weight: 500;
  font-optical-sizing: auto;
}
.display {
  font-size: clamp(2.5rem, 6.2vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 0;
}
.display em, h2 em, .display-2 em, .brand em { font-style: italic; font-weight: 400; }
h2 {
  font-size: clamp(2rem, 4.2vw, 2.85rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
}
h3 { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; margin: 0; }

/* ---------- Buttons ---------- */
.btn {
  --h: 52px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--h); padding: 0 28px;
  border-radius: 999px; border: 0;
  font-weight: 600; font-size: 1rem; letter-spacing: -0.005em;
  text-decoration: none; cursor: pointer;
  transition: transform 120ms var(--ease), background-color 160ms, box-shadow 160ms;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(1px) scale(.975); transition-duration: 60ms; }
.btn-green { background: var(--green); color: #fff; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .14); }
.btn-green:hover { background: var(--green-d); }
.btn-ghost { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2), inset 0 -3px 0 var(--line); }
.btn-ghost:hover { background: var(--warm-2); }
.btn-dark { background: var(--ink); color: var(--on-ink); box-shadow: inset 0 -3px 0 rgba(255, 255, 255, .12); }
.btn-sm { --h: 38px; padding: 0 18px; font-size: .9rem; }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; z-index: 50; top: 14px; left: 50%;
  width: min(var(--max), calc(100% - 32px));
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 24px;
  padding: 7px 7px 7px 24px;
  border-radius: 999px;
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07), 0 6px 24px rgba(0, 0, 0, .05);
}
.brand { font-size: 1.2rem; text-decoration: none; letter-spacing: -0.01em; white-space: nowrap; }
/* Section links; one ink pill (.nav-ind) slides to the section in view */
.nav-links { position: relative; display: flex; gap: 2px; margin-left: auto; }
.nav-links a {
  position: relative; z-index: 1; text-decoration: none; font-size: .9rem; color: var(--ink-2); white-space: nowrap;
  padding: 8px 12px; border-radius: 999px;
  transition: background-color 160ms, color 200ms;
}
.nav-links a:hover { background: var(--fill); }
.nav-links a.active { color: var(--on-ink); }
.nav-links a.active:hover { background: none; }
.nav-ind {
  position: absolute; z-index: 0; top: 0; bottom: 0; left: 0; width: 0; border-radius: 999px; background: var(--ink); opacity: 0;
  transition: opacity 200ms; /* position and width are springs in app.js */
}
/* Narrow screens: the links fold into a menu behind a button that names the current section */
.nav-sec {
  display: none; align-items: center; gap: 6px; height: 38px; padding: 0 12px 0 14px; border: 0; border-radius: 999px;
  background: var(--fill); color: var(--ink); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.nav-sec svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; transition: transform 240ms; }
.nav-sec[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-menu {
  position: absolute; top: calc(100% + 8px); left: 0; width: min(280px, 100%); padding: 6px;
  display: flex; flex-direction: column; gap: 2px; border-radius: 20px;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), 0 16px 40px rgba(0, 0, 0, .18);
  animation: navMenuIn 200ms var(--ease) both; transform-origin: top left;
}
.nav-menu[hidden] { display: none; }
.nav-menu a { padding: 11px 14px; border-radius: 14px; text-decoration: none; color: var(--ink); font-size: .95rem; }
.nav-menu a:hover { background: var(--fill); }
.nav-menu a.active { background: var(--ink); color: var(--on-ink); }
@keyframes navMenuIn { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
@media (max-width: 1100px) {
  .nav-links { display: none; }
  .nav-sec { display: inline-flex; margin-right: auto; }
  .nav .theme-btn { margin-left: 0; }
}
@media (max-width: 520px) {
  .nav { gap: 8px; padding-left: 8px; }
  .nav .brand { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  padding: clamp(120px, 16vh, 168px) var(--gutter) 40px;
  text-align: center;
  max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto;
}
.hero-kicker { margin: 0 0 22px; color: var(--muted); font-size: .95rem; letter-spacing: .01em; }
.hero-sub {
  max-width: 560px; margin: 22px auto 0;
  color: var(--ink-2); font-size: 1.08rem; line-height: 1.55;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 32px; }

.stage {
  position: relative;
  margin: 64px auto 0;
  min-height: 540px;
  border-radius: var(--r-xl);
  background:
    radial-gradient(ellipse 60% 70% at 50% 45%, var(--surface) 0%, transparent 70%),
    var(--warm);
  display: grid; place-items: center;
  overflow: hidden;
  perspective: 1200px;
}
.stage::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(0, 0, 0, .07) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 75%);
  pointer-events: none;
}
.card-wrap { position: relative; z-index: 2; perspective: 1100px; }
.player-card {
  position: relative; width: 300px; height: 444px;
  border: 0; padding: 0; background: none; cursor: pointer;
  transform-style: preserve-3d;
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}
.card-face {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding: 24px;
  border-radius: 26px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  text-align: left;
  overflow: hidden;
}
.card-front {
  background:
    radial-gradient(circle at var(--gx, 30%) var(--gy, 20%), rgba(255, 255, 255, .28), transparent 45%),
    linear-gradient(155deg, #111 0%, #1d1d1b 55%, #0d3d1d 100%);
  color: #fff;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.card-back {
  background: var(--surface); color: var(--ink);
  transform: rotateY(180deg);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .3), inset 0 0 0 1px var(--line);
  gap: 2px;
}
.card-top { display: flex; justify-content: space-between; align-items: flex-start; }
.card-num { font-family: var(--serif); font-size: 3.2rem; line-height: .9; font-weight: 500; }
.card-club { font-size: .75rem; text-align: right; opacity: .7; line-height: 1.3; text-transform: uppercase; letter-spacing: .08em; }
.card-mono {
  margin: auto 0 0;
  font-family: var(--serif); font-style: italic; font-size: 7.5rem; line-height: .8;
  color: transparent; -webkit-text-stroke: 1.2px rgba(255, 255, 255, .5);
  letter-spacing: -0.04em;
}
.card-name { font-family: var(--serif); font-size: 1.9rem; margin-top: 18px; letter-spacing: -0.02em; }
.card-name em { color: var(--green); }
.card-pos { font-size: .85rem; opacity: .65; }
.card-stats { display: flex; gap: 18px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .14); }
.card-stats span { display: flex; flex-direction: column; font-size: .7rem; opacity: .75; text-transform: uppercase; letter-spacing: .06em; }
.card-stats b { font-family: var(--serif); font-size: 1.6rem; font-weight: 500; opacity: 1; letter-spacing: -0.02em; text-transform: none; }
.scope-note { margin: 10px 0 0; font-size: .86rem; color: var(--muted); text-align: center; text-wrap: balance; }
.card-hint { margin-top: 14px; font-size: .72rem; opacity: .45; }
.card-back .card-hint { margin-top: auto; }
/* Card back: name, three key facts as tiles, then label/value rows; second lines of a value sit small below it */
.back-kicker { font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--green-ink); }
.back-title { font-family: var(--serif); font-size: 1.22rem; line-height: 1.15; letter-spacing: -0.01em; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.back-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 12px 0 4px; }
.back-facts > span { display: flex; flex-direction: column; align-items: flex-start; padding: 7px 10px; border-radius: 12px; background: var(--fill); font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.back-facts b { font-family: var(--serif); font-size: 1.2rem; font-weight: 500; color: var(--ink); text-transform: none; letter-spacing: -0.01em; line-height: 1.15; }
.back-row { display: grid; grid-template-columns: 92px 1fr; gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: .86rem; }
.back-row:nth-last-child(2) { border-bottom: 0; }
.back-row i { font-style: normal; color: var(--muted); white-space: nowrap; }
.back-row > span { text-align: right; font-weight: 500; line-height: 1.3; }
.back-row small { display: block; font-size: .74rem; font-weight: 400; color: var(--muted); line-height: 1.25; }

.stage-tile {
  position: absolute; z-index: 3;
  width: 220px; padding: 18px 18px 16px;
  background: var(--surface); border-radius: 20px;
  box-shadow: var(--shadow-1), inset 0 0 0 1px rgba(0, 0, 0, .04);
  text-align: left;
  will-change: transform;
}
.tile-left { left: 6%; top: 18%; }
.tile-right { right: 6%; bottom: 16%; }
.tile-label { display: block; font-size: .78rem; color: var(--muted); margin-bottom: 10px; }
.tile-big { display: block; font-family: var(--serif); font-size: 2.4rem; line-height: 1; letter-spacing: -0.02em; }
.tile-note { display: block; font-size: .82rem; color: var(--ink-2); margin-top: 4px; }
.mini-bars { display: flex; align-items: flex-end; gap: 5px; height: 72px; }
.mini-bars i {
  flex: 1; border-radius: 4px 4px 2px 2px; background: var(--green);
  transform-origin: bottom; transform: scaleY(0);
  transition: transform 700ms var(--ease);
  transition-delay: calc(var(--i) * 45ms);
}
.in .mini-bars i, .mini-bars.in i { transform: scaleY(1); }
.mini-axis { display: flex; justify-content: space-between; font-size: .68rem; color: var(--muted); margin-top: 6px; }
.avatar-stack { display: flex; margin-top: 14px; }
.avatar-stack .av { width: 30px; height: 30px; font-size: .68rem; margin-left: -8px; box-shadow: 0 0 0 2px var(--surface); }
.avatar-stack .av:first-child { margin-left: 0; }
@media (max-width: 860px) {
  .stage { min-height: 500px; }
  .stage-tile { display: none; }
}

/* ---------- Band ---------- */
.band {
  max-width: calc(var(--max) + 2 * var(--gutter)); margin: 24px auto 0; padding: 28px var(--gutter);
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px 20px;
}
.band-item {
  display: flex; flex-direction: column; gap: 4px; padding: 2px 0 2px 16px; border-left: 2px solid var(--line);
  color: inherit; text-decoration: none; transition: border-color 200ms;
}
.band-item:hover { border-color: var(--green); }
.band-item b { font-family: var(--serif); font-weight: 500; font-size: 2rem; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.band-item span { color: var(--muted); font-size: .86rem; line-height: 1.35; }
@media (max-width: 1100px) { .band { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .band { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Lesson sections ---------- */
.lesson { position: relative; isolation: isolate; overflow-x: clip; padding: clamp(80px, 11vw, 128px) var(--gutter); }
.lesson > * { max-width: var(--max); margin-left: auto; margin-right: auto; }
/* Tinted chapters fade in and out of the page colour instead of starting on a hard edge */
.lesson.warm, .lesson.sage { --tint: var(--warm); background: linear-gradient(180deg, var(--bg), var(--tint) clamp(90px, 14vw, 180px), var(--tint) calc(100% - clamp(90px, 14vw, 180px)), var(--bg)); }
.lesson.sage { --tint: var(--sage); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Chapter numbers: big outline figures, always shown whole. On wide screens they stand beside the chapter
   heading (alternating sides) and tuck about 4rem behind the start of the text; the heading block grows to
   their height so they never reach the content below. On narrow screens they sit centred above the heading,
   which covers their lower quarter. --ns is the size that still fits beside a 720px text block. */
.lesson-head { position: relative; --ns: clamp(8rem, calc((100vw - 720px) / 2.2 + 40px), 22rem); }
.chap-num {
  display: block; pointer-events: none; user-select: none;
  font: italic 500 clamp(7rem, 34vw, 10rem)/.8 var(--serif); letter-spacing: -0.05em; font-variant-numeric: lining-nums;
  color: transparent; -webkit-text-stroke: 2px color-mix(in srgb, var(--green) 62%, transparent);
  margin: 0 auto -0.26em; text-align: center; position: relative; z-index: -1;
  opacity: 0; transition: opacity 1200ms var(--ease);
}
.chap-num.in { opacity: 1; }
:root[data-theme="dark"] .chap-num { -webkit-text-stroke-color: color-mix(in srgb, var(--green) 55%, transparent); }
@media (min-width: 900px) {
  .lesson-head { min-height: calc(var(--ns) * .86); display: flex; flex-direction: column; justify-content: center; }
  .chap-num { position: absolute; top: 50%; margin: 0; font-size: var(--ns); transform: translateY(-50%); }
  .lesson:nth-of-type(odd) .chap-num { right: calc(100% - 4rem); text-align: right; }
  .lesson:nth-of-type(even) .chap-num { left: calc(100% - 4rem); text-align: left; }
}

.lesson-head { text-align: center; max-width: 720px; margin-bottom: 48px; }
.lesson-head p { color: var(--ink-2); font-size: 1.08rem; margin: 18px auto 0; max-width: 560px; }
.eyebrow {
  display: inline-block; margin-bottom: 16px;
  font-size: .85rem; font-weight: 600; color: var(--green-ink);
  letter-spacing: .01em;
}

/* ---------- Reveal ---------- */
[data-reveal] {
  opacity: 0; transform: translateY(12px);
  transition: opacity 500ms var(--ease-spring), transform 600ms var(--ease-spring);
  transition-delay: calc(var(--d, 0) * 60ms);
}
[data-reveal].in { opacity: 1; transform: none; }
/* The first screen is there at once: a short settle, no waiting */
.hero [data-reveal] { transform: translateY(6px); transition-duration: 320ms, 420ms; transition-delay: calc(var(--d, 0) * 40ms); }

/* ---------- Segmented control ---------- */
.seg {
  position: relative; display: flex; width: fit-content; margin: 0 auto 28px;
  padding: 4px; border-radius: 999px; background: var(--fill);
  flex-wrap: nowrap; overflow-x: auto; max-width: 100%;
  scrollbar-width: none;
}
.seg::-webkit-scrollbar { display: none; }
.seg button {
  position: relative; z-index: 1;
  border: 0; background: none; cursor: pointer;
  padding: 10px 18px; border-radius: 999px;
  font-size: .93rem; font-weight: 500; color: var(--ink-2);
  white-space: nowrap;
  transition: color 200ms;
}
.seg button.on { color: var(--ink); }
.seg .seg-pill {
  position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0;
  border-radius: 999px; background: var(--surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 0 .5px rgba(0, 0, 0, .04);
  will-change: transform, width;
}
.seg-sm { margin: 0; }
.seg-sm button { padding: 8px 14px; font-size: .88rem; }

/* ---------- Scrubber ---------- */
.scrubber { padding: 8px 0 28px; }
.scrub-track {
  position: relative; height: 92px; margin: 0 22px;
  touch-action: pan-y; user-select: none; cursor: pointer;
}
.scrub-ribbon {
  position: absolute; left: 0; right: 0; top: 34px; height: 14px;
  display: flex; border-radius: 999px; overflow: hidden;
  background: var(--line);
}
.scrub-ribbon .seg-cell { flex: 1; display: flex; }
.scrub-ribbon .seg-cell + .seg-cell { border-left: 2px solid var(--surface); }
.scrub-ribbon .seg-cell i { display: block; }
.scrub-ticks { position: absolute; inset: 0; }
.scrub-tick {
  position: absolute; top: 60px; transform: translateX(-50%);
  font-size: .8rem; color: var(--muted); white-space: nowrap;
  border: 0; background: none; cursor: pointer; padding: 4px 6px; border-radius: 6px;
  transition: color 160ms;
}
.scrub-tick.on { color: var(--ink); font-weight: 600; }
.scrub-tick::before {
  content: ''; position: absolute; left: 50%; top: -14px; width: 1px; height: 8px; background: var(--line-2);
}
.scrub-handle {
  position: absolute; top: 19px; left: 0;
  width: 44px; height: 44px; margin-left: -22px;
  border-radius: 50%; background: var(--surface);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 6px 18px rgba(0, 0, 0, .18), inset 0 -3px 0 rgba(0, 0, 0, .06);
  cursor: grab; will-change: transform;
  display: grid; place-items: center;
}
.scrub-handle::after { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--green); transition: transform 160ms var(--ease); }
.scrub-handle.grab { cursor: grabbing; }
.scrub-handle.grab::after { transform: scale(1.35); }
.scrub-handle:focus-visible { outline: 3px solid var(--green-soft); outline-offset: 3px; }
@media (max-width: 760px) {
  .scrub-tick { font-size: .68rem; padding: 4px 2px; }
  .scrub-tick:nth-child(even) { display: none; }
}

.season {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px;
  padding: 40px; border-radius: var(--r-xl);
  background: var(--warm-2);
  box-shadow: inset 0 0 0 1px var(--line);
}
.season-label { font-size: .9rem; color: var(--muted); }
.season-club { font-size: clamp(1.9rem, 3.4vw, 2.5rem); line-height: 1.1; letter-spacing: -0.02em; margin: 6px 0 14px; }
.season-club .dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; margin-right: 12px; vertical-align: .12em; }
.season-story { color: var(--ink-2); margin: 0 0 22px; min-height: 3em; }
.season-comps { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.season-comps li {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 14px; background: var(--surface); border-radius: 12px;
  box-shadow: inset 0 0 0 1px var(--line); font-size: .93rem;
}
.season-comps li span:last-child { color: var(--muted); white-space: nowrap; }
.data-note {
  display: block; margin-top: 12px; padding: 10px 12px; border-radius: 12px;
  font-size: .85rem; color: var(--ink-2); background: var(--tint-amber);
}
.milestone { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: .92rem; }
.milestone::before { content: ''; flex: none; width: 8px; height: 8px; margin-top: .5em; border-radius: 50%; background: var(--green); }
.season-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 26px; }
.stat { padding: 16px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.stat b { display: block; font-family: var(--serif); font-weight: 500; font-size: 2rem; line-height: 1.05; letter-spacing: -0.02em; }
.stat span { font-size: .8rem; color: var(--muted); }
.season-strip-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: .82rem; color: var(--muted); margin-bottom: 10px; }
.legend { display: inline-flex; align-items: center; gap: 6px; }
.lg { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-left: 6px; }
.lg-played { background: var(--green); }
.lg-bench { background: #c9c5bf; }
.lg-out { box-shadow: inset 0 0 0 1.5px var(--line-2); }
.season-strip { display: flex; flex-wrap: wrap; gap: 6px; }
.mdot {
  width: 26px; height: 26px; border-radius: 7px; border: 0; padding: 0; cursor: pointer;
  background: var(--green); position: relative;
  transition: transform 140ms var(--ease);
  animation: pop 420ms var(--ease) both; animation-delay: calc(var(--i) * 14ms);
}
.mdot:hover { transform: translateY(-2px) scale(1.08); }
.mdot.bench { background: #c9c5bf; }
.mdot.out { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.mdot.goal::after {
  content: ''; position: absolute; right: -3px; top: -3px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--ink); box-shadow: 0 0 0 2px var(--warm-2);
}
@keyframes pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
.empty-note { color: var(--muted); font-size: .95rem; padding: 18px 0; }
@media (max-width: 900px) {
  .season { grid-template-columns: 1fr; padding: 24px; gap: 28px; }
  .season-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Delay: league climb ---------- */
.climb { margin-top: 56px; }
.climb-head { max-width: 640px; margin-bottom: 28px; }
.climb-head .eyebrow { margin-bottom: 8px; }
.climb-title { font-family: var(--serif); font-weight: 500; font-size: clamp(1.7rem, 3.2vw, 2.3rem); letter-spacing: -0.02em; line-height: 1.1; }
.climb-title em { font-style: italic; font-weight: 400; }
.climb-head p { color: var(--ink-2); margin: 10px 0 0; }

/* staircase selector */
.climb-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; align-items: end; padding-top: 8px; }
.climb-step {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 10px;
  border: 0; padding: 0; background: none; cursor: pointer; color: inherit; font: inherit;
  -webkit-tap-highlight-color: transparent;
}
.climb-coin {
  position: relative; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1);
  transition: transform 260ms var(--ease), box-shadow 200ms;
}
.climb-coin .crest { width: 34px; height: 34px; margin: 0; }
.climb-coin b {
  position: absolute; right: -6px; top: -4px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 99px;
  display: grid; place-items: center; font-size: .72rem; background: var(--green); color: #fff; box-shadow: 0 0 0 2px var(--bg);
}
.climb-bar {
  position: relative; width: 100%; height: calc(var(--h) * 1.7px); min-height: 56px; border-radius: 14px 14px 6px 6px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 1px; padding: 10px 12px; text-align: left;
  background: linear-gradient(180deg, color-mix(in srgb, var(--green) 26%, var(--surface)), color-mix(in srgb, var(--green) 8%, var(--surface)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 22%, transparent);
  transform-origin: bottom;
  transition: background 220ms, box-shadow 220ms, transform 600ms var(--ease-spring);
}
/* Build-up (app.js adds .up per step while the pinned staircase is scrolled): the bar rises, then its crest drops on */
.climb-steps.building .climb-step:not(.up) .climb-bar { transform: scaleY(0); }
.climb-steps.building .climb-step:not(.up) .climb-coin { opacity: 0; transform: translateY(-34px) scale(.6); }
.climb-steps.building .climb-step.up .climb-coin { animation: coinIn 560ms var(--ease-land) 380ms backwards; }
.climb-steps.building .climb-step.up:last-child .climb-coin { animation: coinIn 560ms var(--ease-land) 380ms backwards, coinGlow 1600ms ease-out 900ms backwards; }
@keyframes coinIn { from { opacity: 0; transform: translateY(-34px) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes coinGlow {
  0% { box-shadow: inset 0 0 0 1px var(--line), 0 0 0 0 color-mix(in srgb, var(--green) 70%, transparent); }
  35% { box-shadow: inset 0 0 0 2px var(--green), 0 0 0 14px color-mix(in srgb, var(--green) 0%, transparent), 0 0 38px 6px color-mix(in srgb, var(--green) 45%, transparent); }
  100% { box-shadow: inset 0 0 0 1px var(--line), 0 0 0 0 transparent; }
}
.climb-abbr { font-weight: 700; font-size: .95rem; color: var(--green-ink); letter-spacing: -0.01em; }
.climb-yr { font-size: .74rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.climb-step:hover .climb-coin { transform: translateY(-3px); }
.climb-step:active .climb-coin { transform: scale(.94); transition-duration: 80ms; }
.climb-step.on .climb-bar { background: linear-gradient(180deg, var(--green), color-mix(in srgb, var(--green) 72%, #000)); box-shadow: none; }
.climb-step.on .climb-abbr, .climb-step.on .climb-yr { color: #fff; }
.climb-step.on .climb-coin { transform: translateY(-4px); box-shadow: inset 0 0 0 2px var(--green), var(--shadow-1); }
.climb-step.live .climb-bar { background-image: repeating-linear-gradient(-45deg, transparent 0 8px, color-mix(in srgb, var(--green) 14%, transparent) 8px 16px), linear-gradient(180deg, color-mix(in srgb, var(--green) 26%, var(--surface)), color-mix(in srgb, var(--green) 8%, var(--surface))); }
.climb-step.live.on .climb-bar { background-image: repeating-linear-gradient(-45deg, transparent 0 8px, rgba(255, 255, 255, .12) 8px 16px), linear-gradient(180deg, var(--green), color-mix(in srgb, var(--green) 72%, #000)); }

/* season detail */
.climb-detail { margin-top: 14px; }
.cd-card {
  padding: 24px; border-radius: 22px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1);
  animation: cdIn 380ms var(--ease) both;
}
@keyframes cdIn { from { opacity: 0; transform: translateY(6px); } }
.cd-head { display: flex; align-items: center; gap: 16px; }
.cd-head .cd-crest { width: 60px; height: 60px; margin: 0; flex: none; }
.cd-title { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cd-title h4 { margin: 2px 0 0; font-family: var(--serif); font-weight: 500; font-size: clamp(1.4rem, 2.6vw, 1.8rem); letter-spacing: -0.015em; line-height: 1.1; }
.cd-season { font-size: .75rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.cd-full { font-size: .85rem; color: var(--muted); margin-top: 2px; }
.cd-status { flex: none; font-size: .78rem; font-weight: 700; padding: 6px 12px; border-radius: 99px; background: var(--green-soft); color: var(--green-ink); }
.cd-status.live { background: color-mix(in srgb, #F29D38 18%, var(--surface)); color: #B26A12; }
.cd-body { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; margin-top: 22px; }
.cd-rank { display: flex; flex-direction: column; padding-right: 28px; border-right: 1px solid var(--line); }
.cd-rank b { font-family: var(--serif); font-weight: 500; font-size: 4.2rem; line-height: .9; letter-spacing: -0.04em; color: var(--green-ink); }
.cd-rank span { font-size: .85rem; color: var(--muted); margin-top: 6px; }
.cd-rank em { font-style: normal; font-size: .72rem; font-weight: 700; margin-top: 8px; padding: 3px 8px; border-radius: 99px; background: var(--green-soft); color: var(--green-ink); align-self: flex-start; }
.cd-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.cd-stats div { display: flex; flex-direction: column; padding: 12px 14px; border-radius: 14px; background: var(--fill); }
.cd-stats b { font-size: 1.35rem; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cd-stats span { font-size: .75rem; color: var(--muted); }
.cd-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.cd-chase, .cd-me { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); }
.cd-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.cd-chaser { display: flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 600; }
.cd-chaser .crest.tiny { margin: 0; }
.cd-chaser i { font-style: normal; margin-left: auto; font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.cd-chaser i::after { content: ' Pkt.'; }
.cd-me b { font-size: .98rem; font-weight: 600; }
.cd-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.cd-btn { padding: 10px 18px; font-size: .9rem; }

/* full league table, collapsible */
.cd-table { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 420ms var(--ease); }
.cd-table > div { overflow: hidden; min-height: 0; }
.cd-table.open { grid-template-rows: 1fr; }
.lt-wrap { margin-top: 18px; overflow-x: auto; }
.lt { width: 100%; border-collapse: collapse; font-size: .88rem; font-variant-numeric: tabular-nums; }
.lt th { font-size: .72rem; font-weight: 700; color: var(--muted); text-align: right; padding: 0 8px 8px; text-transform: uppercase; letter-spacing: .04em; }
.lt td { text-align: right; padding: 7px 8px; border-top: 1px solid var(--line); }
.lt th:first-child, .lt td:first-child { text-align: center; width: 34px; }
.lt .lt-team { text-align: left; }
.lt td.lt-team { font-weight: 600; white-space: nowrap; }
.lt-tm { display: flex; align-items: center; gap: 10px; }
.lt-tm .crest.tiny { margin: 0; flex: none; }
.lt td.lt-rk { font-weight: 700; box-shadow: inset 3px 0 0 transparent; }
.lt tr.mk-up1 td.lt-rk { box-shadow: inset 3px 0 0 var(--green); }
.lt tr.mk-up2 td.lt-rk { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--green) 45%, var(--surface)); }
.lt tr.mk-down1 td.lt-rk { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--red) 45%, var(--surface)); }
.lt tr.mk-down2 td.lt-rk { box-shadow: inset 3px 0 0 var(--red); }
.lt td.lt-pts { font-weight: 700; }
.lt tr.me td { background: var(--green-soft); }
.lt tr.me td:first-child { border-radius: 10px 0 0 10px; }
.lt tr.me td:last-child { border-radius: 0 10px 10px 0; }
.lt tr.link { cursor: pointer; }
.lt tr.link:hover td { background: var(--fill); }
.lt tr.link:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.lt-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; font-size: .78rem; color: var(--muted); }
.lt-legend span::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.lt-legend .up1::before { background: var(--green); }
.lt-legend .up2::before { background: linear-gradient(135deg, color-mix(in srgb, var(--green) 45%, var(--surface)) 50%, color-mix(in srgb, var(--red) 45%, var(--surface)) 50%); }
.lt-legend .down2::before { background: var(--red); }
.lt-legend .me::before { background: var(--green-soft); box-shadow: inset 0 0 0 1px var(--green); }
.lt-legend .lt-hint { margin-left: auto; }
.lt-legend .lt-hint::before { display: none; }

.climb-src { font-size: .8rem; color: var(--muted); margin-top: 14px; }
.climb-src a { color: inherit; }
@media (max-width: 760px) {
  .climb-steps { gap: 6px; }
  .climb-coin { width: 40px; height: 40px; }
  .climb-coin .crest { width: 26px; height: 26px; }
  .climb-coin b { min-width: 18px; height: 18px; font-size: .64rem; right: -7px; }
  .climb-bar { padding: 8px 6px; height: calc(var(--h) * 1.2px); min-height: 48px; border-radius: 10px 10px 4px 4px; text-align: center; align-items: center; }
  .climb-abbr { font-size: .8rem; }
  .climb-yr { font-size: .66rem; }
  .cd-card { padding: 18px; }
  .cd-head { flex-wrap: wrap; }
  .cd-head .cd-crest { width: 46px; height: 46px; }
  .cd-title { flex: 1 1 calc(100% - 62px); }
  .cd-status { order: 3; margin-left: 62px; }
  .climb-live { display: none; }
  .cd-body { grid-template-columns: 1fr; gap: 16px; }
  .cd-rank { flex-direction: row; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 0 0 14px; border-right: 0; border-bottom: 1px solid var(--line); }
  .cd-rank b { font-size: 3rem; }
  .cd-rank em { margin-top: 0; align-self: center; }
  .cd-stats { grid-template-columns: repeat(2, 1fr); }
  .cd-foot { grid-template-columns: 1fr; }
  .lt .lt-x { display: none; }
  .lt td, .lt th { padding-left: 5px; padding-right: 5px; }
  .lt-legend .lt-hint { margin-left: 0; flex-basis: 100%; }
}

/* ---------- Zahlen ---------- */
.tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 20px; }
.tiles .stat { background: var(--surface); box-shadow: none; }
@media (max-width: 900px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
.chart-card, .panel { background: var(--surface); border-radius: var(--r-lg); padding: 28px; }
.chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.chart-note { font-size: .85rem; color: var(--muted); }
.bars {
  position: relative; height: 220px;
  display: flex; align-items: flex-end; gap: 2px;
  border-bottom: 1px solid var(--line);
  background-image: linear-gradient(to top, var(--line) 1px, transparent 1px);
  background-size: 100% 25%;
}
.bar {
  position: relative; flex: 1 1 0; min-width: 2px; height: var(--h);
  border-radius: 3px 3px 1px 1px; cursor: pointer;
  background: var(--c, var(--green));
  transform-origin: bottom;
  animation: grow 600ms var(--ease) both; animation-delay: calc(var(--i) * 4ms);
  transition: opacity 200ms, filter 160ms;
}
.bar:hover { filter: brightness(1.15); }
.bar.zero { opacity: .25; }
@media (max-width: 760px) {
  .bars { gap: 0; }
  .bar { min-width: 0; border-radius: 1px; }
  .bar-n { display: none; }
}
.bar-n {
  position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%);
  font-size: .62rem; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.chart-segs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 auto 0 16px; }
@media (max-width: 640px) { .chart-segs { margin: 8px 0 0; } }
.bars.dim .bar:not(.hl) { opacity: .18; }
.bar .g, .bar .a {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 8px; height: 8px; border-radius: 50%;
}
.bar .g { background: var(--ink); top: -12px; }
.bar .a { box-shadow: inset 0 0 0 2px var(--ink); top: -12px; }
.bar .g + .a { top: -22px; }
@keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.bars-axis { display: flex; justify-content: space-between; font-size: .75rem; color: var(--muted); margin-top: 8px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.panel-sub { color: var(--muted); font-size: .9rem; margin: 6px 0 18px; }
.mt { margin-top: 28px; }
.pos-row {
  display: grid; grid-template-columns: minmax(150px, 1.2fr) 2fr auto; gap: 14px; align-items: center;
  width: 100%; border: 0; background: none; cursor: pointer; text-align: left;
  padding: 10px 12px; margin: 0 -12px; border-radius: 12px; width: calc(100% + 24px);
  transition: background-color 160ms;
}
.pos-row:hover { background: var(--warm-2); }
.pos-row.on { background: var(--green-soft); }
.pos-name { font-size: .93rem; }
.pos-track { display: block; height: 10px; border-radius: 99px; background: var(--warm); overflow: hidden; }
.pos-row.on .pos-track { background: var(--surface); }
.filter-note {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: -12px auto 20px; font-size: .9rem; color: var(--ink-2);
}
.filter-note[hidden] { display: none; }
.filter-note button {
  border: 0; cursor: pointer; padding: 6px 12px; border-radius: 999px; font-size: .85rem; font-weight: 600;
  background: #141413; color: #fff;
}
.pos-fill { display: block; height: 100%; border-radius: 99px; background: var(--green); width: var(--w); transition: width 700ms var(--ease); }
.pos-num { font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 6.5em; text-align: right; }
.result-bar { display: flex; height: 44px; border-radius: 14px; overflow: hidden; gap: 3px; }
.result-bar div {
  display: grid; place-items: center; color: #fff; font-weight: 600; font-size: .9rem;
  transition: flex-grow 700ms var(--ease);
}
.result-legend { display: flex; gap: 18px; margin-top: 12px; font-size: .88rem; color: var(--ink-2); flex-wrap: wrap; }
.result-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }
.ha { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.ha .stat {
  box-shadow: inset 0 0 0 1px var(--line);
  border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; width: 100%;
  transition: background-color 160ms, transform 120ms var(--ease);
}
.ha .stat:hover:not(:disabled) { background: var(--warm-2); }
.ha .stat:active:not(:disabled) { transform: scale(.98); }
.ha .stat:disabled { cursor: default; }
.ha .stat span { display: block; }
.ha small { display: block; color: var(--muted); font-size: .8rem; margin-top: 4px; }
.ha em { display: block; margin-top: 10px; font-style: normal; font-size: .8rem; font-weight: 600; color: var(--green-ink); }
/* a win–draw–loss record stays on one line, also with three-digit totals */
.sh-stats .stat.sun b { white-space: nowrap; font-size: clamp(1.25rem, 4.6vw, 1.6rem); }
.ha-icon { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--green-soft); color: var(--green-ink); font: 600 1.4rem/1 var(--serif); }

/* ---------- Gegner-Bilanz ---------- */
.opp-panel { margin-top: 20px; }
.opp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.opp-high { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0 18px; }
.opp-high[hidden] { display: none; }
.opp-cr { display: grid; place-items: center; width: 22px; height: 22px; }
@media (max-width: 860px) { .opp-high { grid-template-columns: 1fr; } }
.opp-card { display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: 16px; background: var(--warm-2); box-shadow: inset 0 0 0 1px var(--line); }
.opp-card > div { display: flex; flex-direction: column; min-width: 0; }
.opp-card b { font-size: 1.05rem; line-height: 1.25; }
.opp-card span { font-size: .8rem; color: var(--muted); }
.opp-card .opp-card-label { font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }
.opp-card.good .opp-card-label { color: var(--green-ink); }
.opp-card.bad .opp-card-label { color: #c4322b; }
.opp-card.goal .opp-card-label { color: #b7791f; }
.opp-card .crest.big { width: 44px; height: 44px; }
.opp-list { display: grid; }
.opp-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.opp-tools .search { width: 220px; }
.opp-none { padding: 14px 4px; }
.opp-high[hidden] + .opp-list { margin-top: 12px; }
.opp-row {
  display: grid; grid-template-columns: 22px minmax(140px, 1.4fr) minmax(120px, 1fr) 80px 80px 96px; gap: 14px; align-items: center;
  padding: 11px 4px; border-bottom: 1px solid var(--line); font-size: .9rem;
}
.opp-row:last-child { border-bottom: 0; }
.opp-row, .opp-card { font: inherit; color: inherit; text-align: left; cursor: pointer; border-left: 0; border-right: 0; border-top: 0; background: none; width: 100%; -webkit-tap-highlight-color: transparent; transition: background-color 160ms, transform 120ms var(--ease); }
.opp-row { border-radius: 10px; }
.opp-row:hover { background: var(--fill); }
.opp-row:active, .opp-card:active { transform: scale(.99); }
.opp-card { border: 0; background: var(--warm-2); }
.opp-card:hover { background: var(--fill-2); }
.sh-oppbar { margin: -6px 0 18px; height: 26px; }
.opp-row .crest.tiny { margin: 0; }
.opp-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.opp-bar { display: flex; height: 22px; border-radius: 7px; overflow: hidden; gap: 2px; }
.opp-bar i { display: grid; place-items: center; font-style: normal; font-size: .72rem; font-weight: 700; color: #fff; min-width: 18px; }
.opp-bar .w { background: var(--green); } .opp-bar .d { background: #b9b4ad; } .opp-bar .l { background: var(--red); }
.opp-num { font-size: .8rem; color: var(--muted); white-space: nowrap; }
.opp-num b { color: var(--ink); font-weight: 600; font-size: .9rem; }
@media (max-width: 700px) {
  .opp-row { grid-template-columns: 22px 1fr 96px 64px; }
  .opp-row .opp-gt, .opp-row .opp-sg { display: none; }
}

/* ---------- Spieler ---------- */
.highlights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 40px; }
@media (max-width: 860px) { .highlights { grid-template-columns: 1fr; } }
.hl-card {
  display: flex; flex-direction: column; gap: 14px; align-items: flex-start; text-align: left;
  padding: 24px; border-radius: var(--r-lg); border: 0; cursor: pointer;
  background: var(--warm); transition: transform 200ms var(--ease), box-shadow 200ms;
}
.hl-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-1); }
.hl-card:active { transform: scale(.985); }
.hl-card .hl-label { font-size: .85rem; color: var(--muted); }
.hl-card .hl-name { font-family: var(--serif); font-size: 1.6rem; line-height: 1.1; letter-spacing: -0.02em; }
.hl-card .hl-val { font-size: .92rem; color: var(--ink-2); }
.hl-card:nth-child(2) { background: var(--sage); }
.hl-card:nth-child(3) { background: var(--tint-violet); }

.toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 16px; }
.search {
  flex: 1 1 220px; display: flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 16px; border-radius: 999px;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2);
  transition: box-shadow 160ms;
}
.search:focus-within { box-shadow: inset 0 0 0 2px var(--ink); }
.search svg { width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; background: none; }
.select {
  display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 6px 0 16px;
  border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2);
  font-size: .85rem; color: var(--muted);
}
.select select {
  border: 0; outline: 0; background: none; font: inherit; font-size: .93rem; color: var(--ink);
  font-weight: 500; cursor: pointer; padding: 8px 6px; max-width: 220px;
  color-scheme: inherit;
}
/* Native dropdown lists: give the options the theme's colors so they stay readable in dark mode */
.select select option { background-color: var(--surface); color: var(--ink); }
.select select option:checked { background-color: var(--green); color: #fff; }
.view-toggle { display: flex; padding: 4px; border-radius: 999px; background: var(--fill); }
.view-toggle button { width: 38px; height: 36px; border: 0; border-radius: 999px; background: none; cursor: pointer; display: grid; place-items: center; transition: background-color 160ms; }
.view-toggle button.on { background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.view-toggle svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2);
  font-size: .88rem; color: var(--ink-2);
  transition: background-color 160ms, box-shadow 160ms, color 160ms, transform 120ms;
}
.chip:active { transform: scale(.96); }
.chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.chip.on { background: var(--ink); color: var(--on-ink); box-shadow: none; }

.switch { display: flex; align-items: center; gap: 12px; font-size: .9rem; color: var(--ink-2); cursor: pointer; width: fit-content; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch-ui { position: relative; width: 44px; height: 26px; flex: none; border-radius: 999px; background: var(--line-2); transition: background-color 200ms; }
.switch-ui::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform 240ms var(--ease-spring);
}
.switch input:checked + .switch-ui { background: var(--green); }
.switch input:checked + .switch-ui::after { transform: translateX(18px); }
.switch input:focus-visible + .switch-ui { outline: 3px solid var(--green-soft); outline-offset: 2px; }
.switch.inline { margin-left: auto; }
/* The two bench switches: one left-aligned row under the phase chips, wrapping on narrow screens */
.lesson > .switches { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 12px 32px; }
.switches .switch { font-size: .85rem; }

.result-count { color: var(--muted); font-size: .9rem; margin: 24px auto 14px; }
.people.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.pcard {
  display: flex; flex-direction: column; gap: 14px; text-align: left;
  padding: 18px; border-radius: 18px; border: 0; cursor: pointer; background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: transform 180ms var(--ease), box-shadow 180ms;
  animation: rise 420ms var(--ease) both; animation-delay: calc(var(--i) * 18ms);
}
.pcard:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-1); }
.pcard:active { transform: scale(.98); }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.pc-top { display: flex; gap: 12px; align-items: center; min-width: 0; }
.pc-name { font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
.pc-team { font-size: .8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-txt { min-width: 0; }
.pc-counts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pc-count {
  display: flex; flex-direction: column; padding: 10px 12px; border-radius: 12px;
  font-size: .74rem; line-height: 1.25; color: var(--ink-2);
}
.pc-count b { font-family: var(--serif); font-weight: 500; font-size: 1.6rem; line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); }
.pc-count.mit { background: var(--green-soft); }
.pc-count.gegen { background: var(--tint-indigo); }
.pc-count.none { background: var(--fill); color: var(--muted); }
.pc-count.none b { color: var(--muted); }
.pc-bar { display: grid; grid-template-columns: 52px 1fr 26px; align-items: center; gap: 8px; font-size: .78rem; color: var(--muted); }
.pc-bar b { font-weight: 600; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.pc-track { display: block; height: 6px; border-radius: 99px; background: var(--warm); overflow: hidden; }
.pc-fill { display: block; height: 100%; border-radius: 99px; width: var(--w); }
.pc-years { font-size: .78rem; color: var(--muted); }

.av {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .82rem; font-weight: 700; letter-spacing: .02em;
  color: #fff; background: var(--c, var(--ink));
}

.ptable { width: 100%; border-collapse: collapse; font-size: .92rem; }
.ptable th {
  text-align: left; font-weight: 500; font-size: .8rem; color: var(--muted);
  padding: 10px 12px; border-bottom: 1px solid var(--line); cursor: pointer; white-space: nowrap; user-select: none;
}
.ptable th.num, .ptable td.num { text-align: right; font-variant-numeric: tabular-nums; }
.ptable th.on { color: var(--ink); }
.ptable th.on::after { content: ' ↓'; }
.ptable td { padding: 12px; border-bottom: 1px solid var(--line); }
.ptable tbody tr { cursor: pointer; transition: background-color 120ms; }
.ptable tbody tr:hover { background: var(--warm-2); }
.ptable .tname { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.ptable .tname .av { width: 30px; height: 30px; font-size: .66rem; }
.table-scroll { overflow-x: auto; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--line); }
@media (max-width: 640px) { .ptable .hide-sm { display: none; } }
.more-wrap { display: flex; justify-content: center; margin-top: 28px; }
.more-wrap .btn[hidden] { display: none; }

/* ---------- Netzwerk ---------- */
.net-controls { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.net-legend { display: flex; flex-wrap: wrap; gap: 8px; }
.net-wrap {
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  background: radial-gradient(circle at 50% 50%, var(--net-1) 0%, var(--net-2) 60%, var(--net-3) 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05);
}
#net { display: block; width: 100%; height: clamp(600px, 82vh, 780px); touch-action: pan-y; cursor: grab; }
.net-info {
  position: absolute; top: 20px; left: 20px; width: 220px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 18px; border-radius: 20px;
  background: var(--glass);
  backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: var(--shadow-1), inset 0 0 0 1px rgba(255, 255, 255, .7);
}
.net-info .net-av { width: 64px; height: 64px; margin-bottom: 8px; }
.net-name { font-family: var(--serif); font-size: 1.3rem; line-height: 1.15; letter-spacing: -0.015em; }
.net-team { font-size: .82rem; color: var(--muted); }
.net-nums { display: flex; gap: 18px; margin: 10px 0 4px; }
.net-nums span { display: flex; flex-direction: column; font-size: .74rem; color: var(--muted); }
.net-nums b { font-family: var(--serif); font-size: 1.5rem; font-weight: 500; color: var(--ink); line-height: 1.1; }
.net-mv { font-size: .8rem; color: var(--muted); margin-bottom: 10px; }
.net-mv b { color: var(--ink); }
.net-key { position: absolute; right: 20px; bottom: 16px; margin: 0; display: flex; gap: 16px; font-size: .8rem; color: var(--ink-2); }
.net-key span { display: inline-flex; align-items: center; gap: 6px; }
.net-key i { width: 14px; height: 14px; border-radius: 50%; border: 2.5px solid var(--ink-2); }
.net-key .k-dash { border-style: dashed; }
@media (max-width: 1100px) {
  .net-info {
    position: static; width: auto; margin: 0 12px 12px;
    display: grid; grid-template-columns: auto 1fr auto; column-gap: 16px; align-items: center;
  }
  .net-info .net-av { grid-row: span 4; margin: 0; }
  .net-info .btn { grid-column: 3; grid-row: 1 / span 4; }
  .net-nums { margin: 4px 0 0; }
  .net-mv { margin: 0; }
  .net-key { position: static; padding: 0 16px 16px; }
}
@media (max-width: 760px) {
  #net { height: 480px; }
  .net-info { grid-template-columns: auto 1fr; }
  .net-info .btn { grid-column: 1 / -1; grid-row: auto; margin-top: 10px; }
}
#net.grab { cursor: grabbing; }
#net.hover { cursor: pointer; }

/* ---------- Spiele ---------- */
.matches { display: grid; gap: 8px; }
.match { border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; animation: rise 380ms var(--ease) both; animation-delay: calc(var(--i) * 15ms); }
.match-row {
  display: grid; grid-template-columns: 88px 1fr auto auto 64px 28px; gap: 16px; align-items: center;
  width: 100%; padding: 14px 18px; border: 0; background: none; cursor: pointer; text-align: left;
  transition: background-color 140ms;
}
.match-row:hover { background: var(--warm-2); }
/* Result stripe on the left edge: the list reads as wins and losses at a glance */
.match, .de-item, .de-match { position: relative; }
.de-match { overflow: hidden; }
.match::before, .de-item::before, .de-match::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--rs, transparent); z-index: 1; pointer-events: none; }
:is(.match, .de-item, .de-match).r-S { --rs: var(--green); }
:is(.match, .de-item, .de-match).r-U { --rs: color-mix(in srgb, var(--muted) 55%, transparent); }
:is(.match, .de-item, .de-match).r-N { --rs: var(--red); }
.de-item.r-S .de-game:hover { background: color-mix(in srgb, var(--green) 6%, var(--warm-2)); }
.de-item.r-N .de-game:hover { background: color-mix(in srgb, var(--red) 6%, var(--warm-2)); }
.match.r-S .match-row:hover { background: color-mix(in srgb, var(--green) 6%, var(--warm-2)); }
.match.r-N .match-row:hover { background: color-mix(in srgb, var(--red) 6%, var(--warm-2)); }
.m-date { font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.m-main { min-width: 0; }
.m-opp { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-opp small { font-weight: 400; color: var(--muted); margin-right: 6px; }
.m-comp { font-size: .8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-res {
  min-width: 52px; text-align: center; padding: 5px 10px; border-radius: 9px;
  font-weight: 700; font-size: .9rem; font-variant-numeric: tabular-nums;
}
.m-res small { display: block; font-size: .62rem; font-weight: 600; opacity: .75; margin-top: 1px; }
.sh-teams .sc small { display: block; font-family: var(--sans, inherit); font-size: .72rem; letter-spacing: 0; color: var(--muted); margin-top: 6px; }
.m-res.S { background: var(--green-soft); color: var(--green-ink); }
.m-res.U { background: var(--tint-gray); color: var(--ink-2); }
.m-res.N { background: var(--red-soft); color: #b42318; }
.m-ev { display: flex; gap: 4px; font-size: .8rem; color: var(--ink-2); white-space: nowrap; }
.m-ev .ev { display: inline-flex; align-items: center; gap: 3px; }
.m-ev .evg::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.m-ev .eva::before { content: ''; width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--ink); }
.m-ev .evy::before { content: ''; width: 7px; height: 10px; border-radius: 2px; background: var(--amber); }
.m-min { font-size: .85rem; color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; }
.m-chev { width: 20px; height: 20px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; transition: transform 300ms var(--ease); }
.match.open .m-chev { transform: rotate(180deg); }
.m-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 420ms var(--ease); }
.match.open .m-body { grid-template-rows: 1fr; }
.m-inner { overflow: hidden; }
.m-detail { padding: 4px 18px 6px; max-width: 780px; margin: 0 auto; }
.m-detail .sh-score { border-top: 1px solid var(--line); padding-top: 22px; }
.m-team { white-space: nowrap; }
.m-opp .m-team + small { margin-left: 8px; }
/* Line-ups side by side, each under its own team; the away side mirrors the home side */
.lu { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin-bottom: 4px; }
.lu-col { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lu-head { font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 10px 4px 4px; }
.lu-col .lu-head:first-child { margin-top: 0; }
.lu-col.mirror .lu-head { text-align: right; }
.lu-row {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 46px; padding: 0 12px 0 8px; overflow: hidden;
  border: 0; border-radius: 12px; background: var(--fill); color: var(--ink); font: inherit; text-align: left;
  cursor: pointer; transition: background-color 140ms, transform 140ms;
}
button.lu-row:hover { background: var(--line); }
button.lu-row:active { transform: scale(.98); }
.lu-col.mirror .lu-row { flex-direction: row-reverse; text-align: right; padding: 0 8px 0 12px; }
.lu-row.me { cursor: default; background: var(--green-soft); color: var(--green-ink); box-shadow: inset 0 0 0 1.5px var(--green); font-weight: 600; }
.lu-name { flex: 1; min-width: 0; font-size: .88rem; line-height: 1.25; display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; overflow: hidden; }
.lu-nm { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lu-name .ev { flex: none; }
.lu-mk { display: flex; align-items: center; gap: 6px; flex: none; }
.mk-l { display: contents; }
.mk-s { display: none; }
.lu-col.mirror .lu-name { justify-content: flex-end; }
.lu-name .cb-card { width: 9px; height: 12px; border-radius: 2px; box-shadow: none; }
@media (max-width: 520px) {
  .lu { gap: 4px 8px; }
  .lu-row { gap: 7px; height: 42px; padding: 0 8px 0 6px; }
  .lu-col.mirror .lu-row { padding: 0 6px 0 8px; }
  .lu-name { font-size: .8rem; }
  /* Phones: events under the name, so neither crowds the other out */
  .lu-row { height: 46px; }
  .lu-name { flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; }
  .lu-col.mirror .lu-name { align-items: flex-end; }
  .lu-nm { max-width: 100%; }
  .lu-mk { gap: 5px; }
  .lu-mk .mk-l { display: none; }
  .lu-mk .mk-s { display: contents; }
}
/* Line-up on a pitch: player cards per team, home left and away mirrored on the right. Two columns per team
   where there is room, one column per team where it is narrow (phones, the side sheet). Every card has the
   same fixed size; long names and event lines are cut off with an ellipsis. */
.lu-wrap { container-type: inline-size; }
.lu-none { margin: 4px 0 0; }
.lu-cap { display: flex; justify-content: space-between; font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 4px 8px; }
.pitch {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 6px; border-radius: 18px; overflow: hidden;
  background:
    repeating-linear-gradient(90deg, rgba(41, 204, 87, .07) 0 calc(100% / 12), rgba(41, 204, 87, .03) calc(100% / 12) calc(100% / 6)),
    var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}
.pitch::before, .pitch::after {
  content: ''; position: absolute; top: 50%; width: 7%; height: 40%; transform: translateY(-50%);
  border: 1.5px solid var(--line); pointer-events: none; z-index: 0;
}
.pitch::before { left: -1.5px; border-radius: 0 10px 10px 0; }
.pitch::after { right: -1.5px; border-radius: 10px 0 0 10px; }
.pitch-mid { position: absolute; inset: 0 auto 0 50%; border-left: 1.5px solid var(--line); pointer-events: none; z-index: 0; }
.pitch-mid::after { content: ''; position: absolute; top: 50%; left: 0; width: 84px; aspect-ratio: 1; border: 1.5px solid var(--line); border-radius: 50%; transform: translate(-50%, -50%); }
.pitch-half { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 16px 14px; }
.pitch-half.away { direction: rtl; }
.pitch-half.away > * { direction: ltr; }
.pitch-tag { display: none; }
.pitch-col { display: flex; flex-direction: column; justify-content: center; gap: 6px; min-width: 0; }
.pp {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 60px; flex: none; padding: 0 10px 0 0; overflow: hidden;
  border: 0; border-radius: 10px; background: rgba(20, 19, 18, .82); color: #f4f1ec; font: inherit; text-align: left; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); backdrop-filter: blur(6px);
  transition: background-color 140ms, transform 140ms;
}
button.pp:hover { background: rgba(20, 19, 18, .75); }
button.pp:active { transform: scale(.98); }
.pitch-half.away .pp { flex-direction: row-reverse; text-align: right; padding: 0 0 0 10px; }
.pp .pp-av, .pp .pp-av:has(img) { flex: none; width: 46px; height: 100%; aspect-ratio: auto; border-radius: 0; font-size: .7rem; }
.pp-n { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; flex: 1; }
.pp-n small { font-size: .72rem; color: rgba(244, 241, 236, .65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-n b { font-size: .84rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-mk { display: flex; flex-wrap: nowrap; gap: 8px; align-items: center; margin-top: 3px; overflow: hidden; }
/* Match events on line-up cards: goal ball, own goal, card, on/off arrows, each with its minute */
.ev { display: inline-flex; align-items: center; gap: 3px; font-style: normal; font-size: .68rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ev-g::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .35); }
.ev-a::before { content: ''; width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; }
.ev-og { color: #f2a1a1; }
.ev-og::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #e5484d; }
.ev-in { color: #6fe397; }
.ev-in::before { content: '▲'; font-size: .55rem; }
.ev-out { color: #ff8a8a; }
.ev-out::before { content: '▼'; font-size: .55rem; }
.lu-row .ev-in { color: var(--green-ink); }
.lu-row .ev-out { color: #e5484d; }
.pitch-half.away .pp-mk { justify-content: flex-end; }
.pp-mk .cb-card { width: 8px; height: 11px; border-radius: 2px; box-shadow: none; transform: none; }
.pp.me { background: rgba(14, 52, 28, .88); box-shadow: inset 0 0 0 1.5px var(--green); cursor: default; }
.pp.me .pp-n b, .pp.me .pp-n small { color: #8ef0ad; }
/* Bench and squad lists use the same upright portraits */
.lu-row .lu-av, .lu-row .lu-av:has(img) { width: 28px; height: auto; aspect-ratio: 10 / 13; border-radius: 6px; }
@container (max-width: 660px) {
  /* Narrow (side sheet, phones): no pitch drawing behind the cards, just the two team columns */
  .pitch { background: none; box-shadow: none; border-radius: 0; gap: 10px; }
  .pitch::before, .pitch::after, .pitch-mid { display: none; }
  .pitch-half { grid-template-columns: 1fr; padding: 0; gap: 5px; }
  .pitch-col { gap: 5px; justify-content: flex-start; }
  .pitch::before, .pitch::after { width: 9%; height: 30%; }
  .pitch-mid::after { width: 56px; }
  .pp { height: 52px; gap: 8px; padding-right: 6px; }
  .pitch-half.away .pp { padding: 0 0 0 6px; }
  .pp .pp-av, .pp .pp-av:has(img) { width: 40px; }
  .pp-n b { font-size: .78rem; }
  .pp-n small { font-size: .66rem; }
  .pp-mk { gap: 6px; margin-top: 2px; }
  .pp-mk .mk-l { display: none; }
  .pp-mk .mk-s { display: contents; }
}
/* Team names on a scoreboard open the club or the head-to-head record */
.tn-link { border: 0; background: none; padding: 8px 6px; border-radius: 14px; cursor: pointer; color: inherit; font: inherit; transition: background-color 140ms; }
.tn-link:hover { background: var(--warm-2); }
.tn-link:hover span { text-decoration: underline; text-underline-offset: 3px; }
.m-names { display: flex; flex-wrap: wrap; gap: 6px; }
.name-chip {
  border: 0; cursor: pointer; padding: 6px 11px; border-radius: 999px; font-size: .84rem;
  background: var(--warm); color: var(--ink); transition: background-color 140ms;
}
.name-chip:hover { background: var(--line); }
.name-chip.vs { background: var(--tint-indigo); }
.name-chip.vs:hover { background: var(--tint-violet); }
.m-foot { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: .84rem; color: var(--muted); }
.m-foot a { color: var(--ink); }
@media (max-width: 680px) {
  .match-row { grid-template-columns: 1fr auto 24px; gap: 10px; }
  .m-date, .m-ev, .m-min { display: none; }
  .m-detail { grid-template-columns: 1fr; }
}

/* ---------- Quiz ---------- */
.quiz {
  max-width: 720px; margin: 0 auto; background: var(--surface); border-radius: var(--r-xl);
  padding: clamp(24px, 4vw, 44px); box-shadow: var(--shadow-1);
  position: relative; overflow: hidden;
}
.q-progress { display: flex; align-items: center; gap: 14px; margin-bottom: 32px; }
.q-track { flex: 1; height: 10px; border-radius: 99px; background: var(--warm); overflow: hidden; }
.q-fill { display: block; height: 100%; border-radius: 99px; background: var(--green); width: var(--w); transition: width 500ms var(--ease); }
.q-step { font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.q-streak { font-size: .85rem; font-weight: 600; color: var(--green-ink); min-width: 4.5em; text-align: right; }
.q-text { font-family: var(--serif); font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 28px; }
.q-opts { display: grid; gap: 12px; }
.q-opt {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; border-radius: 16px; border: 0; cursor: pointer; text-align: left;
  background: var(--surface); font-size: 1rem; font-weight: 500;
  box-shadow: inset 0 0 0 2px var(--line), inset 0 -4px 0 var(--line);
  transition: box-shadow 140ms, transform 100ms, background-color 140ms;
}
.q-opt:hover { box-shadow: inset 0 0 0 2px var(--line-2), inset 0 -4px 0 var(--line-2); }
.q-opt:active { transform: translateY(2px); }
.q-opt .key {
  flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center;
  font-size: .8rem; color: var(--muted); box-shadow: inset 0 0 0 1.5px var(--line-2);
}
.q-opt.sel { box-shadow: inset 0 0 0 2px var(--blue), inset 0 -4px 0 var(--blue); background: var(--tint-blue); }
.q-opt.right { box-shadow: inset 0 0 0 2px var(--green), inset 0 -4px 0 var(--green-d); background: var(--green-soft); }
.q-opt.wrong { box-shadow: inset 0 0 0 2px var(--red), inset 0 -4px 0 #c9372c; background: var(--red-soft); animation: shake 380ms; }
.q-opts.locked .q-opt { pointer-events: none; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.q-slider { padding: 10px 0 6px; }
.q-guess { font-family: var(--serif); font-size: 3rem; line-height: 1; letter-spacing: -0.02em; text-align: center; margin-bottom: 22px; font-variant-numeric: tabular-nums; }
.q-range { width: 100%; accent-color: var(--green); height: 28px; }
.q-scale { display: flex; justify-content: space-between; color: var(--muted); font-size: .8rem; }
.q-truth { position: relative; height: 14px; margin: 2px 9px 6px; }
.q-truth i { position: absolute; top: 0; height: 100%; }
.q-truth .qt-band { border-radius: 99px; background: var(--green-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 40%, transparent); animation: fadeIn 400ms var(--ease) both; }
.q-truth .qt-mark { width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--green); height: 22px; top: -4px; animation: fadeIn 400ms 150ms var(--ease) both; }
.q-truth .qt-you { width: 10px; height: 10px; top: 2px; margin-left: -5px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px var(--surface); }
.q-truth .qt-you.ok { background: var(--green-d); }
.q-actions { display: flex; justify-content: flex-end; margin-top: 28px; }

/* ---------- interactive quiz tasks ---------- */
.q-ix-tag {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; padding: 4px 10px; border-radius: 99px;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: var(--tint-blue); color: var(--blue);
}
.q-ix-tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ix-hint { margin: -14px 0 18px; color: var(--muted); font-size: .92rem; }
.ix-pick { margin: 12px 0 0; text-align: center; font-size: .9rem; font-weight: 600; color: var(--ink-2); min-height: 1.4em; }
@keyframes fadeIn { from { opacity: 0; } }

/* order: draggable rows */
.ix-order { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; touch-action: none; }
.ix-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--line), inset 0 -4px 0 var(--line); cursor: grab; user-select: none;
  transition: transform 260ms var(--ease), box-shadow 160ms, background-color 160ms; position: relative;
}
.ix-row:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.ix-row.drag { cursor: grabbing; z-index: 2; transition: box-shadow 160ms; box-shadow: inset 0 0 0 2px var(--blue), 0 14px 30px rgba(0, 0, 0, .16); background: var(--tint-blue); }
.ix-grip { display: grid; gap: 3px; flex: none; }
.ix-grip i { display: block; width: 14px; height: 2px; border-radius: 2px; background: var(--line-2); }
.ix-row .crest.tiny { margin: 0; flex: none; }
.ix-label { font-weight: 600; flex: 1; min-width: 0; }
.ix-sub { font-size: .8rem; color: var(--muted); white-space: nowrap; }
.ix-order.locked .ix-row { cursor: default; }
.ix-order.locked .ix-grip { display: none; }
.ix-row.right { box-shadow: inset 0 0 0 2px var(--green), inset 0 -4px 0 var(--green-d); background: var(--green-soft); }
.ix-row.wrong { box-shadow: inset 0 0 0 2px var(--red), inset 0 -4px 0 #c9372c; background: var(--red-soft); }

/* pitch */
.ix-pitch {
  position: relative; width: min(100%, 540px); aspect-ratio: 105 / 68; margin: 0 auto; border-radius: 14px; overflow: hidden;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--green) 20%, var(--surface)) 0 10%, color-mix(in srgb, var(--green) 26%, var(--surface)) 10% 20%);
}
.ix-pitch svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: rgba(255, 255, 255, .85); stroke-width: .5; }
.ix-attack { position: absolute; right: 8px; top: 6px; font-size: .68rem; font-weight: 700; color: var(--green-ink); opacity: .8; }
.ix-spot {
  --s: 1; position: absolute; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; font: inherit; font-size: .72rem; font-weight: 700; color: var(--ink);
  background: var(--surface); box-shadow: 0 2px 8px rgba(0, 0, 0, .18), inset 0 0 0 2px var(--line-2);
  transform: scale(var(--s)); transition: transform 420ms var(--ease-spring), background-color 200ms, box-shadow 200ms;
}
.ix-spot span { transform: scale(calc(1 / var(--s))); transition: transform 420ms var(--ease-spring); }
.ix-spot:hover { --s: 1.08; }
.ix-spot:active { --s: .94; }
.ix-spot.sel { background: var(--blue); color: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 30%, transparent); }
.locked .ix-spot { pointer-events: none; }
.ix-spot.shown.right { z-index: 2; background: var(--green); color: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 30%, transparent); }
.ix-spot.shown.wrong { background: var(--red); color: #fff; }
.ix-spot.shown.rest { background: color-mix(in srgb, var(--surface) 80%, transparent); }

/* pairs */
.ix-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
.ix-col { display: grid; gap: 10px; align-content: start; }
.ix-chip {
  --pc: transparent; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-radius: 14px; border: 0;
  font: inherit; font-weight: 600; font-size: .92rem; text-align: left; color: var(--ink); cursor: pointer; background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--line), inset 0 -4px 0 var(--line), inset 6px 0 0 var(--pc);
  transition: box-shadow 160ms, transform 100ms, background-color 160ms; min-height: 52px;
}
.ix-chip > span:not(.av) { flex: 1; min-width: 0; }
.ix-chip:active { transform: translateY(2px); }
.ix-chip .crest.tiny { margin: 0; }
.ix-chip.cur { box-shadow: inset 0 0 0 2px var(--pc), inset 0 -4px 0 var(--pc); background: color-mix(in srgb, var(--pc) 10%, var(--surface)); }
.ix-chip.linked { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--pc) 70%, transparent), inset 0 -4px 0 color-mix(in srgb, var(--pc) 70%, transparent), inset 6px 0 0 var(--pc); }
.ix-chip small { flex-basis: 100%; font-size: .76rem; font-weight: 600; color: var(--green-ink); }
.locked .ix-chip { pointer-events: none; }
.ix-chip.right { background: var(--green-soft); }
.ix-chip.wrong { background: var(--red-soft); }
.ix-chip .av.ix-av { width: 32px; height: 32px; font-size: .7rem; flex: none; }

/* timeline chart */
.ix-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.ix-axis { stroke: var(--line-2); stroke-width: 2; }
.ix-tick { stroke: var(--line-2); }
.ix-year { fill: var(--muted); font-size: 12px; text-anchor: middle; }
.ix-line { fill: none; stroke: var(--green); stroke-width: 3; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.ix-chart.shown .ix-line, .shown .ix-line { stroke-dashoffset: 0; transition: stroke-dashoffset 900ms 350ms var(--ease); }
.ix-pt { transform: translate(var(--x), var(--y)); transition: transform 560ms var(--ease-spring); cursor: pointer; }
.ix-pt .hit { fill: transparent; }
.ix-pt .dot { fill: var(--surface); stroke: var(--ink-2); stroke-width: 2.5; transition: fill 160ms, stroke 160ms, r 160ms; }
.ix-pt:hover .dot { stroke: var(--blue); }
.ix-pt.sel .dot { fill: var(--blue); stroke: var(--blue); r: 9; }
.ix-val { font-size: 12px; font-weight: 700; text-anchor: middle; fill: var(--ink); opacity: 0; transition: opacity 300ms 600ms; }
.shown .ix-pt { transform: translate(var(--x), var(--ty)); pointer-events: none; }
.shown .ix-pt.right .dot { fill: var(--green); stroke: var(--green); r: 9; }
.shown .ix-pt.wrong .dot { fill: var(--red); stroke: var(--red); }
.shown .ix-pt.rest .dot { stroke: var(--line-2); }
.shown .ix-pt.lbl .ix-val { opacity: 1; }

/* bars */
.ix-bars { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 6px; align-items: end; height: 220px; }
.ix-bar { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end; gap: 6px; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: inherit; min-width: 0; }
.ix-col-bar {
  position: relative; display: block; height: calc(var(--h) * var(--bar-max, 170px)); min-height: 8px; border-radius: 8px 8px 3px 3px;
  background: var(--fill-2); box-shadow: inset 0 0 0 1.5px var(--line-2);
  transition: height 620ms var(--ease-spring), background-color 200ms;
}
.ix-col-bar i { position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%); font-style: normal; font-size: .72rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.ix-bar:hover .ix-col-bar { background: var(--tint-blue); }
.ix-bar.sel .ix-col-bar { background: var(--blue); box-shadow: none; }
.ix-bar-l { font-size: .68rem; color: var(--muted); text-align: center; white-space: nowrap; overflow: hidden; }
.ix-bar-l .short { display: none; }
.locked .ix-bar { pointer-events: none; }
.shown .ix-col-bar { height: calc(var(--real) * var(--bar-max, 170px)); }
.shown .ix-bar:nth-child(2n) .ix-col-bar { transition-delay: 60ms; }
.shown .ix-bar.rest .ix-col-bar { background: var(--fill-2); }
.shown .ix-bar.right .ix-col-bar { background: var(--green); box-shadow: none; }
.shown .ix-bar.right i { color: var(--green-ink); }
.shown .ix-bar.wrong .ix-col-bar { background: var(--red); box-shadow: none; }
@media (max-width: 560px) {
  .ix-pair { gap: 8px 10px; }
  .ix-chip { padding: 10px; font-size: .84rem; gap: 6px; }
  .ix-chip .crest.tiny, .ix-av { display: none; }
  .ix-bars { gap: 3px; }
  .ix-bar-l { font-size: .62rem; }
  .ix-bars[style*="--n:1"] .ix-bar-l .full { display: none; }
  .ix-bars[style*="--n:1"] .ix-bar-l .short { display: inline; }
  .shown .ix-bar.rest .ix-col-bar i { opacity: 0; }
  .ix-col-bar i { font-size: .6rem; }
  .ix-sub { display: none; }
  .ix-order.locked .ix-sub { display: block; position: absolute; right: 12px; bottom: 2px; font-size: .68rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ix-pt, .ix-col-bar, .ix-spot, .ix-spot span, .ix-row { transition: none; }
}
.q-feedback {
  margin: 24px calc(-1 * clamp(24px, 4vw, 44px)) calc(-1 * clamp(24px, 4vw, 44px));
  padding: 22px clamp(24px, 4vw, 44px);
  display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center;
  animation: slideUp 420ms var(--ease) both;
}
.q-feedback.good { background: var(--green-soft); }
.q-feedback.bad { background: var(--tint-amber); }
.q-feedback b { display: block; font-size: 1.1rem; margin-bottom: 2px; }
.q-feedback.good b { color: var(--green-ink); }
.q-feedback.bad b { color: #a3540a; }
.q-feedback p { margin: 0; font-size: .93rem; color: var(--ink-2); }
@keyframes slideUp { from { transform: translateY(100%); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 560px) { .q-feedback { grid-template-columns: 1fr; } }
/* Quiz overview */
.quiz:has(.q-hub) { max-width: 980px; }
.q-hub { display: grid; gap: 18px; }
.q-hub-head { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; padding: 4px 4px 12px; }
.q-hub-score { display: block; font-family: var(--serif); font-size: 3rem; line-height: 1; letter-spacing: -0.03em; }
.q-hub-score small { font-size: 1.3rem; color: var(--muted); letter-spacing: 0; }
.q-hub-label { display: block; font-size: .85rem; color: var(--muted); margin-top: 6px; }
.q-hub-bar { height: 12px; border-radius: 99px; background: var(--warm); overflow: hidden; }
.q-hub-bar i { display: block; height: 100%; border-radius: 99px; background: var(--green); }
.q-level {
  display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: center;
  padding: 20px; border-radius: 24px; background: var(--ls);
}
.q-level-head { display: flex; gap: 14px; align-items: flex-start; }
.q-level-head h3 { font-family: var(--serif); font-weight: 500; font-size: 1.6rem; letter-spacing: -0.02em; line-height: 1.1; }
.q-level-head p { margin: 4px 0 0; font-size: .86rem; color: var(--ink-2); }
.q-diff { display: inline-flex; align-items: flex-end; gap: 3px; height: 22px; margin-top: 4px; }
.q-diff i { width: 6px; border-radius: 2px; background: rgba(0, 0, 0, .12); }
.q-diff i:nth-child(1) { height: 9px; } .q-diff i:nth-child(2) { height: 15px; } .q-diff i:nth-child(3) { height: 22px; }
.q-diff i.on { background: var(--lc); }
.q-level-sets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.q-set {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center;
  padding: 14px; border: 0; border-radius: 18px; cursor: pointer; background: var(--surface); text-align: left;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05), inset 0 -3px 0 rgba(0, 0, 0, .06);
  transition: transform 180ms var(--ease), box-shadow 180ms;
}
.q-set:hover { transform: translateY(-2px); box-shadow: var(--shadow-1), inset 0 -3px 0 rgba(0, 0, 0, .06); }
.q-set:active { transform: scale(.98); }
.q-set-ring { position: relative; grid-row: span 2; width: 48px; height: 48px; display: grid; place-items: center; }
.q-set-ring b { position: relative; font-family: var(--serif); font-weight: 500; font-size: 1.15rem; line-height: 1; }
.q-set-ring b small { font-size: .7rem; color: var(--muted); }
.q-mini-ring { position: absolute; inset: 0; width: 48px; height: 48px; }
.q-mini-ring circle { fill: none; stroke-width: 5; }
.q-mini-ring .bg { stroke: var(--ls); }
.q-mini-ring .fg { stroke: var(--lc); stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; }
.q-set-txt { display: flex; flex-direction: column; min-width: 0; }
.q-set-num { font-weight: 600; letter-spacing: -0.01em; }
.q-set-meta { font-size: .8rem; color: var(--muted); }
.q-set-go { grid-column: 2; font-size: .8rem; font-weight: 700; color: color-mix(in srgb, var(--lc) 70%, #000); margin-top: 2px; }
.q-set-go::after { content: ' →'; }
@media (max-width: 860px) {
  .q-level { grid-template-columns: 1fr; }
  .q-hub-head { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 560px) { .q-level-sets { grid-template-columns: 1fr; } }
.q-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.q-back { border: 0; background: none; cursor: pointer; font-size: .9rem; color: var(--muted); padding: 4px 0; }
.q-back:hover { color: var(--ink); }
.q-badge { font-size: .8rem; font-weight: 600; padding: 5px 10px; border-radius: 99px; background: var(--warm); }
.q-end .hero-ctas { margin-top: 0; }
.q-end { text-align: center; padding: 12px 0; }
.q-score { font-family: var(--serif); font-size: 4.5rem; line-height: 1; letter-spacing: -0.03em; margin: 8px 0 12px; }
.q-end p { color: var(--ink-2); margin: 0 auto 28px; max-width: 420px; }
.ring { width: 140px; height: 140px; margin: 0 auto; }
/* Quiz window (geometry is driven by a spring in app.js) */
html.qm-open { overflow: hidden; scrollbar-gutter: stable; }
.qm[hidden] { display: none; }
.qm { position: fixed; inset: 0; z-index: 95; }
/* The page dissolves behind the quiz. The dimming follows the window's spring; the blur is a separate
   layer that fades in only once the window has arrived (and leaves before it moves), because
   re-blurring the whole page every frame is what made the motion stutter. */
.qm-scrim { position: absolute; inset: 0; opacity: 0; background: rgba(8, 8, 7, .62); }
:root:not([data-theme="dark"]) .qm-scrim { background: rgba(28, 26, 22, .42); }
.qm-blur {
  position: absolute; inset: 0; opacity: 0; transition: opacity 260ms ease-out; pointer-events: none;
  backdrop-filter: blur(16px) saturate(120%); -webkit-backdrop-filter: blur(16px) saturate(120%);
}
.qm.settled .qm-blur { opacity: 1; }
/* The panel keeps its final size; only transform and opacity animate (no layout per frame) */
.qm-panel {
  position: absolute; overflow: hidden; background: var(--surface); outline: none;
  box-shadow: var(--shadow-2), inset 0 0 0 1px var(--line);
  transform-origin: 0 0; will-change: transform, opacity;
}
.qm-inner { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; transform-origin: 0 0; will-change: transform, opacity; }
/* Everything inside the window is measured in em of one scale (--qs, set by app.js): the content keeps
   its proportions and inner spacing and simply grows or shrinks until it fills the window exactly.
   IDs on purpose, so these sizes win over the page's own quiz rules for each screen width. */
#qmInner { font-size: calc(1rem * var(--qs, 1)); --qpx: 2.4em; --qpy: 2em; }
/* Badge, progress and close share the top bar, so the question gets the full height below */
.qm-bar {
  display: flex; align-items: center; justify-content: space-between; gap: .75em; flex: none;
  padding: .85em .85em .6em var(--qpx);
}
#qmInner .q-badge { flex: none; white-space: nowrap; font-size: .8em; padding: .4em .8em; background: color-mix(in srgb, var(--lc, var(--green)) 16%, var(--surface)); color: color-mix(in srgb, var(--lc, var(--green)) 62%, var(--ink)); }
.qm-prog { flex: 1; min-width: 0; }
#qmInner .q-progress { margin: 0; gap: .75em; }
#qmInner .q-track { height: .5em; }
#qmInner .q-step, #qmInner .q-streak { font-size: .85em; min-width: 0; }
.qm-prog .q-streak:empty { display: none; }
#qmInner .qm-bar .icon-btn { width: 2.5em; height: 2.5em; flex: none; }
#qmInner .qm-bar .icon-btn svg { width: 1.1em; height: 1.1em; }
.qm-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; } /* chart labels may reach past the edge */
.qm-stage.quiz {
  max-width: none; margin: 0; background: none; box-shadow: none; border-radius: 0;
  padding: .4em var(--qpx) var(--qpy); min-height: 100%; display: flex; flex-direction: column;
}
.qm-stage > .q-ix-tag { align-self: flex-start; }
.qm-stage > .q-end { margin: auto 0; }
/* The estimate slider is small: it rests in the middle of the free space instead of hugging the question */
.qm-stage > .q-slider { margin: auto 0; }
/* Dock at the bottom: the check button and the answer panel share one slot. The panel is laid out
   from the start (invisible), so revealing the answer only slides it up and nothing else moves. */
.qm-stage > .q-dock {
  display: grid; margin: auto calc(-1 * var(--qpx)) calc(-1 * var(--qpy)); padding-top: 1em; overflow: hidden;
}
.q-dock > * { grid-area: 1 / 1; }
.q-dock .q-actions { margin: 0; align-self: end; padding: 0 var(--qpx) var(--qpy); }
.q-dock .q-actions.off { visibility: hidden; }
.q-dock .q-feedback { margin: 0; align-self: end; padding: 1.25em var(--qpx) var(--qpy); gap: 1em; visibility: hidden; animation: none; }
.q-dock .q-feedback.on { visibility: visible; animation: slideUp 420ms var(--ease-spring) both; }
/* Timeline as rows (narrow windows): the value sits next to the date and is there, hidden, from the start */
.qm-stage .ix-tl-row { grid-template-columns: 1fr auto; grid-template-areas: "d v" "t t"; }
.qm-stage .ix-tl:not(.shown *) .ix-tl-v { display: block; visibility: hidden; }
.qm-confirm {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 24px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  animation: fadeIn 160ms ease-out;
}
.qm-confirm[hidden] { display: none; }
.qm-confirm-card {
  width: min(360px, 100%); padding: 24px; border-radius: 22px; text-align: center;
  background: var(--surface); box-shadow: var(--shadow-2), inset 0 0 0 1px var(--line);
}
.qm-confirm-card b { display: block; font-family: var(--serif); font-weight: 500; font-size: 1.45rem; letter-spacing: -0.015em; }
.qm-confirm-card p { margin: 6px 0 20px; color: var(--ink-2); font-size: .95rem; }
.qm-confirm-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.q-mini-ring .fg { transition: stroke-dashoffset 900ms var(--ease-spring); }
@media (max-width: 640px) {
  #qmInner { --qpx: 1.15em; --qpy: max(1.25em, env(safe-area-inset-bottom)); }
  .qm-bar { padding: max(.75em, env(safe-area-inset-top)) .75em .4em var(--qpx); }
  #quizStage .q-text { font-size: 1.4em; }
  #quizStage .ix-bars { height: auto; }
  /* order quiz: the line for "gehört auf Platz …" is there from the start */
  .qm-stage .ix-sub:empty { display: block; }
  .qm-stage .ix-sub:empty::before { content: '\00a0'; }
}
@media (prefers-reduced-motion: reduce) {
  .qm { opacity: 0; transition: opacity 200ms ease !important; }
  .qm.on { opacity: 1; }
}
/* Pair task: one grid for both columns, so a value tile is always as tall as its player tile.
   Player photos as upright portraits (like everywhere else on the site) */
.qm-stage .ix-pair { grid-auto-flow: column; grid-template-rows: repeat(var(--n, 4), auto); }
.qm-stage .ix-pair .ix-col { display: contents; }
.qm-stage .ix-chip .av.ix-av, .qm-stage .ix-pr-l .av.ix-av { height: auto; aspect-ratio: 10 / 13; display: grid; }
.qm-stage .ix-pr-l .crest.tiny { display: inline-block; }
/* Phones: the pitch stands upright, which uses the tall screen */
.ix-pitch.tall { aspect-ratio: 68 / 105; background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--green) 20%, var(--surface)) 0 10%, color-mix(in srgb, var(--green) 26%, var(--surface)) 10% 20%); }

/* Sizes in the quiz window, all in em of the scale */
#qmInner .btn { --h: 3.25em; font-size: 1em; padding: 0 1.75em; }
#quizStage .q-ix-tag { font-size: .72em; padding: .35em .85em; margin-bottom: .85em; }
#quizStage .q-text { font-size: 2em; margin: 0 0 .7em; }
#quizStage .ix-hint { font-size: .92em; margin: -.9em 0 1.3em; }
#quizStage .ix-pick { font-size: .9em; margin-top: .8em; }
#quizStage .q-opts { gap: .75em; }
#quizStage .q-opt { padding: 1em 1.15em; gap: .9em; font-size: 1em; border-radius: 1em; }
#quizStage .q-opt .key { font-size: .8em; width: 2.2em; height: 2.2em; border-radius: .6em; }
#quizStage .ix-order { gap: .55em; }
#quizStage .ix-row { padding: .8em 1em; gap: .75em; font-size: 1em; border-radius: .9em; }
#quizStage .ix-row .crest.tiny { width: 1.5em; height: 1.5em; }
#quizStage .ix-grip i { width: .9em; }
#quizStage .ix-sub { font-size: .8em; }
#quizStage .ix-pair { gap: .65em 1.25em; }
#quizStage .ix-chip { min-height: 4em; padding: .7em 1em; gap: .75em; font-size: .95em; border-radius: .9em; }
#quizStage .ix-chip .av.ix-av { width: 2.7em; border-radius: .5em; }
#quizStage .ix-chip .crest.tiny { width: 1.6em; height: 1.6em; }
#quizStage .ix-prs { gap: .5em; }
#quizStage .ix-pr { padding: .55em .55em .55em .8em; gap: .5em; border-radius: .9em; }
#quizStage .ix-pr-l { font-size: .9em; gap: .6em; }
#quizStage .ix-pr-l .av.ix-av { width: 2em; border-radius: .45em; }
#quizStage .ix-pr-sel { height: 2.6em; font-size: .9em; }
#quizStage .ix-pitch { width: min(100%, 38em); }
#quizStage .ix-pitch.tall { width: min(100%, 17em); }
#quizStage .ix-spot { font-size: .78em; width: 3.3em; height: 3.3em; margin: -1.65em 0 0 -1.65em; }
#quizStage .ix-attack { font-size: .68em; }
#quizStage .ix-bars { height: 14em; gap: .4em; --bar-max: 11em; }
#quizStage .ix-bar-l { font-size: .68em; }
#quizStage .ix-col-bar i { font-size: .72em; }
#quizStage .ix-chart { max-width: 42em; margin: 0 auto; }
#quizStage .ix-tl { gap: .4em; }
#quizStage .ix-tl-row { padding: .45em .6em; gap: .3em; border-radius: .75em; }
#quizStage .ix-tl-d { font-size: .86em; }
#quizStage .ix-tl-v { font-size: .74em; text-align: right; }
#quizStage .q-guess { font-size: 3em; margin-bottom: .1em; }
#quizStage .q-guess-sub { height: 1.4em; line-height: 1.4em; overflow: hidden; margin-bottom: .8em; text-align: center; color: var(--muted); font-size: .95em; font-variant-numeric: tabular-nums; }
#quizStage .q-range { height: 1.8em; }
#quizStage .q-scale { font-size: .8em; }
#quizStage .q-truth { height: .9em; }
#quizStage .q-feedback b { font-size: 1.1em; }
#quizStage .q-feedback p { font-size: .93em; }
#quizStage .q-end .ring { width: 8.75em; height: 8.75em; }
#quizStage .q-score { font-size: 4.5em; }
#quizStage .q-end p { font-size: 1em; }
@media (prefers-reduced-transparency: reduce) { .qm-scrim { background: rgba(8, 8, 7, .85); backdrop-filter: none; -webkit-backdrop-filter: none; } }
@media (prefers-reduced-transparency: reduce) { .qm-confirm { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; } }
.confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 9998; pointer-events: none; }
.ring circle { fill: none; stroke-width: 12; }
.ring .bg { stroke: var(--warm); }
.ring .fg { stroke: var(--green); stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; transition: stroke-dashoffset 1100ms var(--ease); }

/* ---------- Erfolge ---------- */
.nat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 860px) { .nat { grid-template-columns: 1fr; } }
.nat-card { padding: 28px; border-radius: var(--r-lg); background: var(--warm); display: flex; flex-direction: column; gap: 6px; }
.nat-card .nat-team { font-family: var(--serif); font-size: 1.7rem; letter-spacing: -0.02em; }
.nat-card .nat-meta { color: var(--muted); font-size: .9rem; }
.nat-card .nat-nums { display: flex; gap: 28px; margin-top: 18px; }
.nat-card .nat-nums b { display: block; font-family: var(--serif); font-weight: 500; font-size: 2.3rem; line-height: 1; letter-spacing: -0.02em; }
.nat-card .nat-nums span { font-size: .8rem; color: var(--muted); }
.trophy {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  padding: 28px; border-radius: var(--r-lg); background: #141413; color: #fff;
}
.trophy-icon { width: 64px; height: 64px; border-radius: 18px; background: rgba(255, 255, 255, .08); display: grid; place-items: center; }
.trophy-icon svg { width: 34px; height: 34px; fill: none; stroke: var(--green); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.trophy h3 { font-family: var(--serif); font-weight: 500; font-size: 1.6rem; }
.trophy p { margin: 2px 0 0; opacity: .65; font-size: .92rem; }
.trophy .t2 { margin-left: auto; text-align: right; }
@media (max-width: 640px) { .trophy .t2 { margin-left: 0; text-align: left; } }

/* ---------- Closing & footer ---------- */
.closing::before { content: ''; position: absolute; inset: 0 0 auto; height: clamp(90px, 14vw, 180px); z-index: 1; pointer-events: none; background: linear-gradient(var(--bg), transparent); }
.closing {
  --p: 0; --cs-line: rgba(0, 0, 0, .12); --cs-beam: rgba(41, 204, 87, .10); --cs-num: rgba(0, 0, 0, .07);
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; place-content: center; min-height: min(92vh, 860px);
  text-align: center; padding: clamp(96px, 14vw, 160px) var(--gutter);
  background: radial-gradient(120% 70% at 50% 110%, color-mix(in srgb, var(--green) 22%, var(--warm)), var(--warm) 60%);
}
:root[data-theme="dark"] .closing {
  --cs-line: rgba(255, 255, 255, .13); --cs-beam: rgba(220, 255, 230, .085); --cs-num: rgba(255, 255, 255, .07);
  background: radial-gradient(120% 70% at 50% 112%, #123a1f, #0c120d 58%, #080908);
}
.closing > :not(.closing-scene) { position: relative; z-index: 2; }
.closing-scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cs-layer { position: absolute; inset: 0; will-change: transform; }
/* Each layer drifts at its own speed while the section passes (app.js sets --p from -1 to 1) */
.cs-photo { inset: -12% 0; background: center 30% / cover no-repeat; opacity: 0; transform: translateY(calc(var(--p) * -70px)) scale(1.05); transition: opacity 900ms var(--ease); }
.closing.has-photo .cs-photo { opacity: 1; }
.closing.has-photo .cs-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 9, 8, .55), rgba(8, 9, 8, .78) 60%, rgba(8, 9, 8, .95)); }
.closing.has-photo { --cs-num: rgba(255, 255, 255, .06); color: #f3f1ed; }
.closing.has-photo .btn-ghost { color: #f3f1ed; }
.cs-beams {
  inset: -20% -10% 0;
  background:
    conic-gradient(from 148deg at 6% 0%, transparent 0deg, var(--cs-beam) 10deg, transparent 26deg),
    conic-gradient(from 186deg at 94% 0%, transparent 0deg, var(--cs-beam) 16deg, transparent 32deg),
    radial-gradient(40% 30% at 50% 8%, var(--cs-beam), transparent 70%);
  transform: translateY(calc(var(--p) * -30px));
  animation: beamFlicker 7s ease-in-out infinite;
}
@keyframes beamFlicker { 0%, 100% { opacity: 1; } 48% { opacity: .82; } 52% { opacity: .95; } }
.cs-num {
  display: grid; place-items: center;
  font: italic 500 clamp(18rem, 52vw, 44rem)/.8 var(--serif); letter-spacing: -0.06em;
  color: transparent; -webkit-text-stroke: 1.5px var(--cs-num);
  transform: translateY(calc(var(--p) * 120px));
}
.cs-pitch-wrap { top: 58%; bottom: -30%; perspective: 700px; transform: translateY(calc(var(--p) * 60px)); }
.cs-pitch {
  width: 130%; height: 100%; margin-left: -15%;
  transform: rotateX(62deg); transform-origin: 50% 0;
  fill: none; stroke: var(--cs-line); stroke-width: 2.2;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}
.cs-pitch .dot { fill: var(--cs-line); stroke: none; }
.display-2 { font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.06; letter-spacing: -0.025em; margin: 0; }
.footer {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  max-width: var(--max); margin: 0 auto; padding: 28px var(--gutter) 40px;
  color: var(--muted); font-size: .85rem;
}

/* ---------- Sheet ---------- */
.scrim {
  position: fixed; inset: 0; z-index: 80; background: rgba(12, 10, 8, .32);
  opacity: 0; pointer-events: none;
}
.scrim.on { pointer-events: auto; }
.sheet {
  position: fixed; z-index: 90; top: 12px; right: 12px; bottom: 12px;
  width: min(480px, calc(100% - 24px));
  background: var(--glass-strong);
  backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-radius: 28px;
  box-shadow: var(--shadow-2), inset 0 0 0 1px rgba(255, 255, 255, .6);
  display: flex; flex-direction: column;
  transform: translateX(110%);
  will-change: transform;
  visibility: hidden;
}
.sheet.vis { visibility: visible; }
.sheet-grab { display: none; }
.sheet-bar { display: flex; align-items: center; padding: 14px 14px 0; }
.sheet-spacer { flex: 1; }
.icon-btn {
  width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; background: var(--fill);
  transition: background-color 140ms, transform 100ms;
}
.icon-btn:hover { background: var(--fill-2); }
.icon-btn:active { transform: scale(.92); }
.icon-btn svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn[hidden] { display: none; }
.sheet-body { flex: 1; overflow-y: auto; padding: 8px 28px 32px; overscroll-behavior: contain; }
/* Scroll edge: content fades out under the header bar instead of a hard line, only once it scrolls */
.sheet-body.edge { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18px); mask-image: linear-gradient(to bottom, transparent 0, #000 18px); }
.sh-head { display: flex; gap: 16px; align-items: center; margin-bottom: 20px; }
.sh-head-link { width: 100%; padding: 10px; margin: -10px -10px 10px; width: calc(100% + 20px); border: 0; border-radius: 18px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background-color 140ms, transform 140ms; }
.sh-head-link:hover { background: var(--fill); }
.sh-head-link:active { transform: scale(.99); }
.sh-scope {
  display: flex; align-items: center; gap: 12px; width: 100%; margin: -6px 0 18px; padding: 12px 14px;
  border: 0; border-radius: 16px; background: var(--fill); box-shadow: inset 0 0 0 1px var(--line);
  color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background-color 140ms, transform 140ms;
}
.sh-scope:hover { background: var(--fill-2); }
.sh-scope:active { transform: scale(.99); }
.sh-scope-ic { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--green-soft); color: var(--green-ink); }
.sh-scope-ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.sh-scope-txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.sh-scope-txt b { font-size: .92rem; font-weight: 600; }
.sh-scope-txt small { font-size: .78rem; color: var(--muted); line-height: 1.35; }
.sh-scope-go { display: inline-flex; align-items: center; gap: 2px; flex: none; padding: 7px 10px 7px 12px; border-radius: 99px; background: var(--ink); color: var(--bg); font-size: .8rem; font-weight: 600; white-space: nowrap; }
.sh-scope-go svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sh-head .av { width: 60px; height: 60px; font-size: 1.05rem; }
.sh-title { font-family: var(--serif); font-size: 1.85rem; line-height: 1.1; letter-spacing: -0.02em; margin: 0; }
.sh-sub { color: var(--muted); font-size: .9rem; margin-top: 4px; }
.sh-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 22px; }
.sh-stats .stat { box-shadow: inset 0 0 0 1px var(--line); background: var(--surface); padding: 14px; }
.sh-stats .stat b { font-size: 1.7rem; }
.sh-link { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; font-weight: 600; text-decoration: none; margin-bottom: 22px; color: var(--green-ink); }
.sh-link:hover { text-decoration: underline; }
.sh-section { font-size: .82rem; font-weight: 600; color: var(--muted); margin: 18px 0 10px; }
.sh-list { display: grid; gap: 6px; }
.sh-item {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
  padding: 12px 14px; border-radius: 14px; border: 0; cursor: pointer; text-align: left;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
  transition: background-color 140ms;
}
.sh-item:hover { background: var(--warm-2); }
.side { font-size: .72rem; font-weight: 700; padding: 4px 8px; border-radius: 7px; letter-spacing: .02em; }
.side.mit { background: var(--green-soft); color: var(--green-ink); }
.side.gegen { background: var(--tint-indigo); color: #4b3fb0; }
.sh-item .t1 { font-weight: 600; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-item .t2 { font-size: .8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-item > div { min-width: 0; }
.sh-score { text-align: center; padding: 12px 0 18px; }
.sh-teams { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; }
.sh-teams .tn { font-weight: 600; font-size: .95rem; line-height: 1.25; }
.sh-teams .sc { font-family: var(--serif); font-size: 2.6rem; line-height: 1; letter-spacing: -0.02em; }
.sh-meta { color: var(--muted); font-size: .85rem; margin-top: 10px; }

@media (max-width: 640px) {
  .sheet {
    top: auto; left: 0; right: 0; bottom: 0; width: 100%; height: 86vh;
    border-radius: 26px 26px 0 0; transform: translateY(110%);
  }
  .sheet-grab { display: flex; justify-content: center; padding: 10px 0 0; touch-action: none; cursor: grab; }
  .sheet-grab span { width: 40px; height: 5px; border-radius: 99px; background: rgba(0, 0, 0, .18); }
  .sheet-body { padding: 4px 18px 28px; }
}

/* ---------- Plain white lessons: cards need an outline ---------- */
.lesson:not(.warm):not(.sage) .tiles .stat,
.lesson:not(.warm):not(.sage) .chart-card,
.lesson:not(.warm):not(.sage) .panel { box-shadow: inset 0 0 0 1px var(--line); }
.lesson:not(.warm):not(.sage) .tiles .stat { background: var(--warm-2); }
.tiles-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 760px) { .tiles-4 { grid-template-columns: repeat(2, 1fr); } }
.pc-years { display: flex; justify-content: space-between; gap: 8px; }
.sh-mv { margin-bottom: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.sh-mv b { font-size: 1.5rem; margin: 2px 0; }
.highlights { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1020px) { .highlights { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .highlights { grid-template-columns: 1fr; } }
.hl-card:nth-child(4) { background: var(--tint-peach); }

/* ---------- Marktwert & Wechsel ---------- */
.mv-card { background: var(--surface); border-radius: var(--r-xl); padding: 32px 32px 20px; box-shadow: var(--shadow-1); }
.mv-readout { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; min-height: 92px; }
.mv-label { font-size: .88rem; color: var(--muted); }
.mv-value { font-family: var(--serif); font-weight: 500; font-size: clamp(2.2rem, 5vw, 3.2rem); line-height: 1.05; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.mv-meta { font-size: .92rem; color: var(--ink-2); }
.mv-chart-wrap { position: relative; touch-action: pan-y; }
#mvChart { display: block; width: 100%; overflow: visible; cursor: crosshair; }
#mvChart .grid line { stroke: var(--line); }
#mvChart .grid text, #mvChart .xaxis text { fill: var(--muted); font: 500 11px var(--sans); }
#mvChart .area { fill: url(#mvGrad); }
#mvChart .line { fill: none; stroke: var(--green); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(41, 204, 87, .75)) drop-shadow(0 0 10px rgba(41, 204, 87, .35)); }
#mvChart .pt { fill: var(--surface); stroke: var(--green); stroke-width: 2.5; }
#mvChart .tf line { stroke: var(--ink); stroke-opacity: .25; stroke-dasharray: 3 4; }
#mvChart .tf circle { fill: var(--ink); cursor: pointer; transition: r 160ms; }
#mvChart .tf.on line { stroke: var(--ink); stroke-opacity: .9; stroke-dasharray: none; }
#mvChart .tf.on circle { fill: var(--green); }
#mvChart .tf text { fill: var(--ink-2); font: 600 10.5px var(--sans); }
#mvChart .tf .tf-badge { fill: var(--surface); stroke: var(--line-2); stroke-width: 1; cursor: pointer; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .08)); }
#mvChart .tf.on .tf-badge { fill: var(--surface); stroke: var(--ink); stroke-width: 2; }
#mvChart .tf image { cursor: pointer; pointer-events: none; }
#mvChart .tf { cursor: pointer; }
#mvChart .baseline { stroke: var(--line-2); }
#mvChart .grid .tick { stroke: var(--line-2); stroke-width: 1; }
.mv-legend { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 10px; font-size: .78rem; color: var(--muted); }
.mv-legend span { display: inline-flex; align-items: center; gap: 7px; }
.mv-legend i { flex: none; display: inline-block; }
.mv-legend .lg-pt { width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--green); }
.mv-legend .lg-tf { width: 14px; height: 14px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); background-image: radial-gradient(circle, var(--muted) 0 3px, transparent 3.5px); }
.mv-legend .lg-yr { width: 1px; height: 12px; background: var(--muted); opacity: .6; }
#mvChart.panning { cursor: grabbing; }
/* Intro (see value() in app.js): the line is wiped in by scroll; points pop as it passes, crests land from the big centre badge */
.mv-card.mv-busy :is(#mvChart, .mv-tools) { pointer-events: none; }
.mv-card.mv-busy #mvChart { cursor: default; }
.mv-card.mv-waiting .mv-readout { opacity: 0; transform: translateY(8px); }
.mv-readout { transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
#mvChart .pt.first { animation: ptFirst 600ms var(--ease-land) both; }
@keyframes ptFirst { 0% { opacity: 0; transform: scale(0); } 60% { opacity: 1; transform: scale(2.2); } 100% { transform: none; } }
.mv-card.mv-busy #mvChart .cross { visibility: hidden; }
#mvChart .ghost { fill: none; stroke: var(--green); stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; opacity: .45; }
#mvChart .pt { transform-box: fill-box; transform-origin: center; transition: transform 320ms var(--ease-spring), opacity 200ms; }
#mvChart .pt.hid { opacity: 0; transform: scale(.2); }
#mvChart .tf.hid { opacity: 0; pointer-events: none; }
#mvChart .tf.land .tf-badge { transform-box: fill-box; transform-origin: center; animation: tfLand 600ms var(--ease-land); }
@keyframes tfLand {
  0% { transform: scale(1.35); filter: drop-shadow(0 0 0 rgba(41, 204, 87, 0)); }
  35% { filter: drop-shadow(0 0 10px rgba(41, 204, 87, .9)); }
  100% { transform: none; }
}
.mv-epic {
  position: absolute; inset: -20px 0 0; z-index: 3; pointer-events: none;
  background: radial-gradient(circle 240px at var(--cx, 50%) var(--cy, 50%), color-mix(in srgb, var(--surface) 92%, transparent), color-mix(in srgb, var(--surface) 55%, transparent) 70%, transparent);
  transition: background-color 400ms;
}
.mv-epic.out { background: transparent; transition: background 500ms; }
.mv-epic.above .mv-epic-in { transform: translate(-50%, calc(-100% + var(--half))); }
.mv-epic.above .mv-epic-txt { order: -1; }
.mv-epic.above .mv-epic-ring { top: auto; bottom: 0; }
.mv-epic-in {
  --half: 66px; /* half the badge: its centre sits on the tip */
  position: absolute; left: var(--cx, 50%); top: var(--cy, 50%); transform: translate(-50%, calc(-1 * var(--half)));
  display: grid; justify-items: center; gap: 14px; width: max-content;
}
.mv-epic-ring {
  position: absolute; top: 0; left: 50%; width: 132px; height: 132px; margin-left: -66px; border-radius: 50%;
  box-shadow: 0 0 0 3px var(--green), 0 0 40px 8px color-mix(in srgb, var(--green) 55%, transparent);
}
.mv-epic-badge {
  position: relative; display: grid; place-items: center; width: 132px; height: 132px; border-radius: 50%;
  background: var(--surface); box-shadow: inset 0 0 0 2px var(--green), 0 18px 50px rgba(0, 0, 0, .35), 0 0 60px color-mix(in srgb, var(--green) 35%, transparent);
}
.mv-epic-badge img { width: 84px; height: 84px; object-fit: contain; }
.mv-epic-badge b { font-family: var(--serif); font-weight: 500; font-size: 1.6rem; }
.mv-epic-txt { position: relative; display: grid; justify-items: center; gap: 2px; text-align: center; }
.mv-epic-txt b { font-family: var(--serif); font-weight: 500; font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: -0.02em; line-height: 1.1; }
.mv-epic-txt small { font-size: .85rem; color: var(--muted); }
:root[data-theme="dark"] .mv-epic-badge img { filter: drop-shadow(0 0 1px rgba(255, 255, 255, .35)); }
@media (max-width: 640px) {
  .mv-epic-badge, .mv-epic-ring { width: 96px; height: 96px; }
  .mv-epic-ring { margin-left: -48px; }
  .mv-epic-in { --half: 48px; }
  .mv-epic-badge img { width: 60px; height: 60px; }
  .mv-epic { background: radial-gradient(circle 170px at var(--cx, 50%) var(--cy, 50%), color-mix(in srgb, var(--surface) 92%, transparent), color-mix(in srgb, var(--surface) 55%, transparent) 70%, transparent); }
  .mv-epic-in { gap: 10px; }
  .mv-epic-txt { max-width: calc(100vw - 48px); }
  .mv-epic-txt b { font-size: 1.3rem; }
  .mv-epic-txt small { font-size: .78rem; }
}

.mv-tools { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin: -8px 0 6px; }
.mv-hint { font-size: .8rem; color: var(--muted); margin-right: auto; }
.mv-tools .icon-btn { width: 36px; height: 36px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); }
.mv-tools .btn[disabled] { opacity: .4; }
@media (max-width: 640px) { .mv-hint { display: none; } }
#mvChart .cross line { stroke: var(--ink); stroke-width: 1; }
#mvChart .cross circle { fill: var(--ink); stroke: var(--surface); stroke-width: 3; }
.journey-head { display: flex; justify-content: space-between; align-items: center; margin: 48px auto 16px; }
.journey-nav { display: flex; gap: 8px; }
.journey-nav .icon-btn { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); }
.journey {
  display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter);
  padding: 6px 2px 18px; scrollbar-width: none; overscroll-behavior-x: contain;
}
.journey::-webkit-scrollbar { display: none; }
.step {
  flex: 0 0 260px; scroll-snap-align: start; position: relative;
  display: flex; flex-direction: column; gap: 10px; text-align: left;
  padding: 20px; border-radius: 20px; border: 0; cursor: pointer; background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: transform 200ms var(--ease), box-shadow 200ms;
}
.step:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-1); }
.step.on { box-shadow: inset 0 0 0 2px var(--ink), var(--shadow-1); }
.step-date { font-size: .82rem; color: var(--muted); }
.step-clubs { display: flex; flex-direction: column; gap: 4px; }
.step-from { font-size: .85rem; color: var(--muted); }
.step-to { font-family: var(--serif); font-size: 1.35rem; line-height: 1.15; letter-spacing: -0.015em; }
.step-to::before { content: '→ '; color: var(--green); font-family: var(--sans); }
.step-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; font-size: .82rem; color: var(--ink-2); }
.fee { padding: 4px 10px; border-radius: 99px; background: var(--warm); font-weight: 600; font-size: .78rem; }
.fee.loan { background: var(--tint-blue); color: #2b56c4; }
.fee.free { background: var(--green-soft); color: var(--green-ink); }

/* ---------- Rückschläge ---------- */
.inj-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 960px) { .inj-grid { grid-template-columns: 1fr; } }
.inj-cal-card, .inj-list { background: var(--surface); border-radius: var(--r-xl); padding: 26px; }
.inj-cal-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.inj-scale { display: inline-flex; align-items: center; gap: 8px; font-size: .75rem; color: var(--muted); }
.inj-scale i { width: 64px; height: 10px; border-radius: 99px; background: linear-gradient(90deg, rgba(229, 72, 77, .3), rgba(229, 72, 77, 1)); }
.inj-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: -6px 0 18px; font-size: .78rem; color: var(--ink-2); }
.inj-legend span { display: inline-flex; align-items: center; gap: 6px; }
.inj-legend i { width: 12px; height: 12px; border-radius: 4px; }
.inj-legend .sev-high { background: #E5484D; }
.inj-legend .sev-mid { background: #F29D38; }
.inj-legend .sev-low { background: #F5C518; }
.inj-legend .sev-quar { background: #6F8FD8; }
.inj-legend .sev-open { background: repeating-linear-gradient(-45deg, #E5484D 0 3px, #f6a0a3 3px 6px); }
.inj-legend-note { width: 100%; color: var(--muted); }
.inj-hint { margin-top: 10px; font-size: .8rem; color: var(--muted); }
.inj-cal { display: grid; gap: 6px; }
.cal-row { display: grid; grid-template-columns: 40px 26px repeat(12, 1fr); gap: 5px; align-items: center; }
.cal-headrow { margin-bottom: 2px; }
.cal-m { text-align: center; font-size: .7rem; color: var(--muted); font-weight: 600; }
.cal-y { font-size: .8rem; color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.cal-crest .crest { width: 22px; height: 22px; }
.cal-c {
  aspect-ratio: 1; border-radius: 7px; border: 0; padding: 0;
  background: var(--fill); transition: transform 160ms var(--ease), opacity 200ms, box-shadow 160ms;
}
.cal-c.future { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); }
.cal-c.hit { cursor: pointer; background: rgba(229, 72, 77, var(--a)); }
.cal-c.hit.sev-mid { background: rgba(242, 157, 56, var(--a)); }
.cal-c.hit.sev-low { background: rgba(245, 197, 24, var(--a)); }
.cal-c.hit.sev-quar { background: rgba(111, 143, 216, var(--a)); }
.cal-c.hit.open { background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .28) 0 4px, transparent 4px 8px); }
.cal-c.hit:hover { transform: scale(1.12); }
.inj-cal.has-sel .cal-c.hit:not(.sel) { opacity: .28; }
.cal-c.hit.sel { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }

.inj-list { display: grid; gap: 6px; padding: 14px; max-height: 620px; overflow-y: auto; overscroll-behavior: contain; }
.inj-item { border-radius: 16px; transition: background-color 160ms; }
.inj-item.on { background: var(--warm-2); box-shadow: inset 0 0 0 1px var(--line); }
.inj-row {
  display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center;
  width: 100%; padding: 12px; border: 0; background: none; cursor: pointer; text-align: left; color: inherit;
  border-radius: 16px; transition: background-color 140ms;
}
.inj-row:hover { background: var(--warm-2); }
.inj-crest .crest { width: 30px; height: 30px; }
.inj-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.inj-name { font-weight: 600; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; }
.inj-now { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 2px 7px; border-radius: 99px; background: var(--red-soft); color: #c4322b; }
.inj-dates { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.inj-bar-track { display: block; height: 6px; border-radius: 99px; background: var(--warm); overflow: hidden; margin-top: 4px; }
.inj-bar-fill { display: block; height: 100%; border-radius: 99px; background: #E5484D; transition: width 700ms var(--ease); }
.inj-bar-fill.sev-mid { background: #F29D38; }
.inj-bar-fill.sev-low { background: #F5C518; }
.inj-bar-fill.sev-quar { background: #6F8FD8; }
.inj-days { text-align: right; font-size: .72rem; color: var(--muted); display: flex; flex-direction: column; }
.inj-days b { font-family: var(--serif); font-weight: 500; font-size: 1.4rem; line-height: 1; color: var(--ink); }
.inj-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 380ms var(--ease); }
.inj-item.on .inj-more { grid-template-rows: 1fr; }
.inj-more-inner { overflow: hidden; padding: 0 12px; }
.inj-item.on .inj-more-inner { padding-bottom: 12px; }
.inj-missed { display: inline-block; font-size: .78rem; font-weight: 600; padding: 4px 10px; border-radius: 99px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); margin-bottom: 10px; }
.inj-come {
  display: flex; gap: 14px; align-items: center; width: 100%; text-align: left; color: inherit;
  padding: 14px; border: 0; border-radius: 14px; cursor: pointer; background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow 160ms, transform 120ms;
}
.inj-come:hover { box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-1); }
.inj-come:active { transform: scale(.985); }
.inj-come .crest.big { width: 40px; height: 40px; }
.inj-come > span { display: flex; flex-direction: column; min-width: 0; }
.inj-come-label { font-size: .75rem; font-weight: 700; color: var(--green-ink); }
.inj-come-opp { font-weight: 600; }
.inj-come-meta { font-size: .8rem; color: var(--muted); }
.inj-come-text { margin: 0; font-size: .9rem; color: var(--ink-2); }

/* ---------- Kapitel 9: Deutschland ---------- */
.de-hero {
  position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;
  padding: 34px 32px 30px; border-radius: var(--r-xl); background: #121211; color: #fff;
}
.de-flag { position: absolute; left: 0; right: 0; top: 0; height: 6px; display: flex; }
.de-flag i { flex: 1; }
.de-flag i:nth-child(1) { background: #000; } .de-flag i:nth-child(2) { background: #dd0000; } .de-flag i:nth-child(3) { background: #ffce00; }
.de-hero-main { display: flex; align-items: center; gap: 18px; }
.crest.de-crest { width: 104px; height: 104px; padding: 12px; border-radius: 26px; background: #fff; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .6); }
.de-teams {
  grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin-top: 8px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .1);
}
.de-team {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  padding: 20px 20px 18px; border-radius: 20px; background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); overflow: hidden;
}
.de-team::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; }
.de-team:nth-child(1)::before { background: #000; }
.de-team:nth-child(2)::before { background: #dd0000; }
.de-team:nth-child(3)::before { background: #ffce00; }
.crest.de-team-crest { position: absolute; top: 18px; right: 18px; width: 56px; height: 56px; }
.de-group { display: grid; gap: 8px; }
.de-group + .de-group { margin-top: 22px; }
.de-group-head { display: flex; align-items: center; gap: 10px; padding: 0 4px 2px; }
.de-group-head b { font-family: var(--serif); font-weight: 500; font-size: 1.35rem; letter-spacing: -0.01em; }
.de-group-head span { font-size: .85rem; color: var(--muted); }
.crest.de-group-crest { width: 26px; height: 26px; }
#natGames { display: block; }
.de-games-head .seg { margin: 0; }
.de-team-years { font-size: .78rem; font-weight: 600; color: rgba(255, 255, 255, .55); }
.de-team-name { font-family: var(--serif); font-size: 2.2rem; line-height: 1; letter-spacing: -0.02em; }
.de-team-nums { display: flex; gap: 22px; margin-top: 6px; }
.de-team-nums span { display: flex; flex-direction: column; font-size: .75rem; color: rgba(255, 255, 255, .6); }
.de-team-nums b { font-family: var(--serif); font-weight: 500; font-size: 1.7rem; line-height: 1.05; color: #fff; }
.de-team-meta { font-size: .78rem; color: rgba(255, 255, 255, .55); margin-top: 4px; }
@media (max-width: 760px) {
  .crest.de-crest { width: 72px; height: 72px; }
  .de-hero { padding: 26px 18px 18px; }
  /* Three compact cards side by side instead of a tall stack */
  .de-teams { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .de-team { padding: 14px 10px 12px; align-items: center; text-align: center; }
  .crest.de-team-crest { position: static; width: 34px; height: 34px; order: -1; }
  .de-team-name { font-size: 1.5rem; }
  .de-team-nums { gap: 12px; justify-content: center; }
  .de-team-nums b { font-size: 1.25rem; }
  .de-team-meta { display: none; }
  .de-stats b { font-size: 1.7rem; }
}
.de-kicker { display: block; font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; opacity: .6; margin-bottom: 4px; }
.de-hero h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -0.02em; }
.de-stats { display: flex; gap: 28px; }
.de-stats b { display: block; font-family: var(--serif); font-weight: 500; font-size: 2.2rem; line-height: 1; letter-spacing: -0.02em; }
.de-stats span { font-size: .78rem; opacity: .6; }
@media (max-width: 860px) { .de-hero { grid-template-columns: 1fr; } .de-stats { flex-wrap: wrap; gap: 18px 24px; } }

.de-path { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 20px 0; }
.de-path::before {
  content: ''; position: absolute; left: 16%; right: 16%; top: 31px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, #000 0 33%, #dd0000 33% 66%, #ffce00 66%); opacity: .8;
}
.de-step {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  padding: 22px 16px 20px; border: 0; border-radius: var(--r-lg); cursor: pointer; color: inherit;
  background: transparent; transition: background-color 180ms, transform 180ms var(--ease);
}
.de-step:hover { background: var(--warm-2); }
.de-step.on { background: var(--warm); box-shadow: inset 0 0 0 2px var(--ink); }
.de-step-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--bg); box-shadow: 0 0 0 4px var(--ink); margin-bottom: 4px; z-index: 1; }
.de-step-years { font-size: .8rem; font-weight: 600; color: var(--muted); }
.de-step-crest { width: 46px; height: 46px; }
.de-step-team { font-family: var(--serif); font-size: 1.8rem; letter-spacing: -0.02em; line-height: 1.1; }
.de-step-nums { font-size: .9rem; color: var(--ink-2); }
.de-step-nums b { font-weight: 700; color: var(--ink); }
.de-step-meta { font-size: .78rem; color: var(--muted); line-height: 1.5; }
@media (max-width: 700px) { .de-path { grid-template-columns: 1fr; } .de-path::before { display: none; } }

.de-highlights { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin-block: 32px 8px; }
@media (max-width: 860px) { .de-highlights { grid-template-columns: 1fr; } }
.de-card { padding: 26px; border-radius: var(--r-lg); background: var(--warm); }
.de-card .de-kicker { opacity: 1; color: var(--muted); }
.de-card h3 { font-family: var(--serif); font-weight: 500; font-size: 1.6rem; letter-spacing: -0.02em; }
.de-card p { margin: 6px 0 16px; color: var(--ink-2); font-size: .92rem; }
.de-matches { display: grid; gap: 8px; }
.de-match {
  display: grid; grid-template-columns: auto 1fr auto auto; gap: 12px; align-items: center;
  padding: 12px 14px; border: 0; border-radius: 14px; cursor: pointer; text-align: left; color: inherit;
  background: var(--surface); transition: transform 140ms, box-shadow 140ms;
}
.de-match:hover { box-shadow: var(--shadow-1); transform: translateY(-1px); }
.de-match .crest.tiny { margin: 0; width: 22px; height: 22px; }
.de-match-opp { font-weight: 600; }
.de-match-me { font-size: .82rem; color: var(--muted); }
.de-trophy .trophy-icon { margin-bottom: 14px; background: var(--surface); }

.de-games-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-block: 40px 14px; }
.de-games-head .nat-games-title { margin: 0; }
.de-games-head .chips { margin: 0; }
.de-item { border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; animation: rise 360ms var(--ease) both; }
.de-game {
  display: grid; grid-template-columns: 92px 30px 1fr auto auto 20px; gap: 12px; align-items: center; width: 100%;
  padding: 12px 16px; border: 0; cursor: pointer; text-align: left; color: inherit; font: inherit;
  background: none; transition: background-color 140ms;
}
.de-game:hover { background: var(--warm-2); }
.de-item.open .m-chev { transform: rotate(180deg); }
.de-item.open .m-body { grid-template-rows: 1fr; }
.de-game-date { font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.de-game-crest { width: 26px; height: 26px; }
.de-game-main { display: flex; flex-direction: column; min-width: 0; }
.de-game-opp { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.de-game-comp { font-size: .78rem; color: var(--muted); }
.de-game-me { font-size: .85rem; color: var(--ink-2); display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.de-goal { font-size: .72rem; font-weight: 700; padding: 3px 8px; border-radius: 99px; background: var(--green-soft); color: var(--green-ink); }
/* Phones: like the match list – opponent and result on top, date and minutes in a quiet line below */
@media (max-width: 560px) {
  .de-game { grid-template-columns: 26px minmax(0, 1fr) auto 20px; grid-template-areas: "crest main res chev" "crest date me me"; gap: 4px 10px; padding: 12px 14px; }
  .de-game-crest { grid-area: crest; align-self: start; margin-top: 2px; }
  .de-game-main { grid-area: main; }
  .de-game .m-res { grid-area: res; align-self: start; }
  .de-game .m-chev { grid-area: chev; align-self: start; margin-top: 4px; }
  .de-game-date { grid-area: date; font-size: .76rem; }
  .de-game-me { grid-area: me; justify-self: end; font-size: .76rem; color: var(--muted); gap: 6px; }
  .de-game-opp { white-space: normal; line-height: 1.3; }
  .de-goal { font-size: .68rem; padding: 2px 7px; }
  .de-card { padding: 20px 16px; }
}

/* ---------- National games ---------- */
.nat-games-title { margin: 48px auto 14px; font-size: 1.15rem; }
.nat-games { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (max-width: 760px) { .nat-games { grid-template-columns: 1fr; } }
.side.nat { background: var(--tint-gold); color: #7a5d06; }
.side-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
@media (max-width: 760px) { .side-grid { grid-template-columns: 1fr; } }
.side-card { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; padding: 24px; border-radius: var(--r-lg); background: var(--warm); }
.side-card h3 { font-family: var(--serif); font-weight: 500; font-size: 1.5rem; letter-spacing: -0.02em; }
.side-card p { margin: 2px 0 0; color: var(--muted); font-size: .9rem; }
.side-card .nat-nums { display: flex; gap: 28px; margin-top: 0; width: 100%; }
.side-card .nat-nums > div { display: flex; flex-direction: column; }
.side-card .nat-nums b { font-family: var(--serif); font-weight: 500; font-size: 2.1rem; line-height: 1; letter-spacing: -0.02em; }
.side-card .nat-nums span { font-size: .8rem; color: var(--muted); margin-top: 4px; }
/* Icon League rating: the big overall number, the four parts as short bars */
.icon-rating { display: flex; align-items: center; gap: 22px; width: 100%; padding: 16px 18px; border-radius: 18px; background: var(--fill); color: inherit; text-decoration: none; transition: background-color 140ms; }
.icon-rating:hover { background: var(--fill-2); }
.ir-ovr { display: flex; flex-direction: column; align-items: center; flex: none; min-width: 74px; }
.ir-ovr b { font-family: var(--serif); font-weight: 500; font-size: 2.8rem; line-height: 1; color: var(--green-ink); letter-spacing: -0.02em; }
.ir-ovr small { font-size: .72rem; color: var(--muted); margin-top: 4px; white-space: nowrap; }
.ir-parts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; flex: 1; min-width: 0; }
.ir-part { display: grid; grid-template-columns: 74px 1fr 26px; align-items: center; gap: 10px; font-size: .82rem; }
.ir-l { color: var(--muted); }
.ir-part b { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.ir-track { height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.ir-track i { display: block; width: var(--w); height: 100%; border-radius: inherit; background: var(--green); }
@media (max-width: 640px) {
  .icon-rating { flex-direction: column; align-items: stretch; gap: 14px; }
  .ir-ovr { flex-direction: row; align-items: baseline; gap: 10px; }
  .ir-parts { grid-template-columns: 1fr; }
}
.side-crest { width: 48px; height: 48px; object-fit: contain; flex: none; }
.side-src { grid-column: 1 / -1; margin: 0; }

/* ---------- Images (crests, optional photo) ---------- */
.crest { flex: none; width: 28px; height: 28px; object-fit: contain; }
.crest.tiny { display: inline-block; width: 18px; height: 18px; vertical-align: -4px; margin-right: 6px; }
.crest.big { width: 52px; height: 52px; }
.club-line { display: flex; align-items: center; gap: 12px; }
.club-line .crest { width: 38px; height: 38px; }
.club-line .dot { margin-right: 0; }
.step-crest { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; }
.sh-teams .tn { display: flex; flex-direction: column; align-items: center; gap: 10px; }
/* Small framed portrait on the hero card */
.card-club { display: flex; align-items: center; gap: 8px; }
.card-club-crest { width: 34px; height: 34px; object-fit: contain; flex: none; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .4)); }
.card-mid { display: flex; align-items: flex-start; gap: 16px; margin-top: 18px; }
.card-mid .card-mono { margin: 0; font-size: 6.2rem; flex: none; }
.card-stations { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding-top: 4px; }
.card-stations-label { font-size: .64rem; text-transform: uppercase; letter-spacing: .1em; opacity: .55; }
.card-crests { display: grid; grid-template-columns: repeat(3, 34px); gap: 8px; }
.card-crests img {
  width: 34px; height: 34px; object-fit: contain; padding: 4px; border-radius: 10px;
  background: rgba(255, 255, 255, .92); box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}
.card-frame {
  position: relative; display: block; flex: none; width: 104px; height: 136px; margin: 0;
  border-radius: 18px; overflow: hidden; background: #2a2a28;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .14), 0 14px 30px -10px rgba(0, 0, 0, .6);
  transform: translateZ(24px);
}
.card-frame[hidden], .card-mono[hidden] { display: none; }
.card-photo { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.card-credit {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 8px 5px; text-align: center;
  font-size: .56rem; letter-spacing: .02em; color: rgba(255, 255, 255, .8);
  background: linear-gradient(transparent, rgba(0, 0, 0, .55));
}
.card-credit[hidden] { display: none; }
.card-mid + .card-name { margin-top: auto; }

/* Avatars: initials in a circle; a portrait turns it into an upright rounded frame so the whole head shows */
.av { position: relative; overflow: hidden; }
.av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; background: #eceae6; }
.av:has(img) { border-radius: 12px; height: auto; aspect-ratio: 10 / 13; }
.pcard .av { width: 50px; height: 50px; }
.pcard .av:has(img) { height: auto; }
.sh-head .av { width: 72px; height: 72px; }
.sh-head .av:has(img) { height: auto; border-radius: 16px; }
.ptable .tname .av:has(img) { height: auto; border-radius: 8px; }
.net-info .net-av:has(img) { height: auto; border-radius: 14px; }
.avatar-stack .av:has(img) { border-radius: 50%; aspect-ratio: 1; height: 30px; }
.avatar-stack .av img { object-position: center 12%; }

/* ---------- Tooltip ---------- */
.tip {
  position: fixed; z-index: 100; left: 0; top: 0; pointer-events: none;
  max-width: 260px; padding: 10px 12px; border-radius: 12px;
  background: rgba(14, 13, 12, .92); color: #fff; font-size: .82rem; line-height: 1.4;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; transform: translateY(4px); transition: opacity 120ms, transform 120ms;
}
.tip.on { opacity: 1; transform: none; }
.tip b { display: block; font-size: .88rem; margin-bottom: 2px; }
.tip span { opacity: .7; }

/* ---------- Accessibility ---------- */
:focus-visible { outline: 3px solid rgba(41, 204, 87, .45); outline-offset: 2px; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
  /* No travel, but still a gentle cross-fade so changes stay readable */
  [data-reveal], .hero [data-reveal] { transform: none; transition: opacity 240ms ease !important; }
  .sheet, .scrim, .tip { transition: opacity 200ms ease !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .nav, .sheet, .net-info { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .pp { background: rgb(20, 19, 18); backdrop-filter: none; }
  .tip { background: rgb(14, 13, 12); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  :root, :root[data-theme="dark"] { --glass: var(--surface); --glass-strong: var(--surface); }
  :root { --muted: #4f4c48; --line: #8f8a84; --line-2: #6f6a64; }
  :root[data-theme="dark"] { --muted: #bdb7af; --line: #6f6a64; --line-2: #8f8a84; }
  .nav, .sheet, .net-info { backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: inset 0 0 0 1.5px var(--line-2); }
}

/* ================= Phones: one consolidated pass ================= */
/* Tighter rhythm, flatter boxes and list-style rows instead of desktop cards. */
@media (max-width: 640px) {
  /* nav: keep the quiz button on one line */
  .nav .btn { white-space: nowrap; padding: 10px 16px; font-size: .9rem; }
  .brand { white-space: nowrap; }

  /* rhythm */
  .hero { padding-top: 104px; padding-bottom: 24px; }
  .hero-sub { font-size: 1rem; margin-top: 16px; }
  .hero-ctas { margin-top: 24px; }
  .stage { margin-top: 36px; min-height: 0; }
  .band { padding: 20px var(--gutter); gap: 18px 14px; margin-top: 8px; }
  .band-item { padding-left: 12px; }
  .band-item b { font-size: 1.6rem; }
  .lesson { padding: 64px 16px; }
  .lesson-head { margin-bottom: 28px; }
  .lesson-head p { font-size: 1rem; margin-top: 12px; }
  .eyebrow { margin-bottom: 10px; }
  h2 { font-size: 1.95rem; }

  /* flatter cards: less inner padding so charts and lists get the width */
  .chart-card, .panel { padding: 18px 16px; border-radius: 20px; }
  .mv-card { padding: 18px 12px 10px; border-radius: 22px; }
  .season { padding: 18px 16px; gap: 20px; border-radius: 22px; }
  .inj-cal-card { padding: 16px 14px; border-radius: 22px; }
  .inj-list { padding: 8px; max-height: none; overflow: visible; border-radius: 22px; }
  .split { gap: 12px; margin-top: 12px; }

  /* stat tiles: small and dense */
  .stat { padding: 12px; border-radius: 14px; }
  .stat b { font-size: 1.45rem; }
  .stat span { font-size: .74rem; }
  .season-stats { grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 18px; }
  .season-stats .stat { padding: 10px 8px; }
  .season-stats .stat b { font-size: 1.2rem; }
  .season-stats .stat span { font-size: .68rem; }
  .tiles { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .tiles-4 { grid-template-columns: repeat(2, 1fr); }
  .tiles .stat b { font-size: 1.3rem; }

  /* segmented controls scroll sideways; a soft fade shows there is more */
  .seg { margin-left: 0; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .seg button { padding: 9px 14px; font-size: .88rem; }
  .seg-sm { -webkit-mask-image: none; mask-image: none; }

  /* positions: name and number on top, full-width bar below */
  .pos-row { grid-template-columns: 1fr auto; grid-template-areas: "n c" "t t"; gap: 6px 10px; padding: 9px 10px; margin: 0 -10px; width: calc(100% + 20px); }
  .pos-name { grid-area: n; font-size: .88rem; }
  .pos-num { grid-area: c; min-width: 0; font-size: .78rem; }
  .pos-track { grid-area: t; height: 8px; }
  .result-legend { gap: 6px 14px; font-size: .8rem; }

  /* opponents: full names, bar on its own line */
  .opp-head .select { width: 100%; }
  .opp-tools { width: 100%; }
  .opp-tools .search { width: 100%; height: 42px; }
  .opp-card { padding: 12px 14px; gap: 12px; }
  .opp-card .crest.big { width: 36px; height: 36px; }
  .opp-row { grid-template-columns: 22px 1fr auto; grid-template-areas: "c name n" "c bar bar"; gap: 6px 10px; padding: 10px 4px; }
  .opp-row .opp-cr { grid-area: c; align-self: start; margin-top: 1px; }
  .opp-name { grid-area: name; white-space: normal; font-size: .9rem; line-height: 1.25; }
  .opp-row .opp-n { grid-area: n; }
  .opp-bar { grid-area: bar; height: 18px; }

  /* injury calendar fits the width */
  .cal-row { grid-template-columns: 30px 18px repeat(12, 1fr); gap: 3px; }
  .cal-c { border-radius: 4px; }
  .cal-y { font-size: .7rem; }
  .cal-m { font-size: .62rem; }
  .cal-crest .crest { width: 16px; height: 16px; }
  .cal-c.hit.sel { box-shadow: 0 0 0 1.5px var(--surface), 0 0 0 3px var(--ink); }
  .inj-legend { gap: 6px 12px; font-size: .78rem; }

  /* players: 2×2 highlights, compact toolbar, list rows instead of big cards */
  .highlights { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 24px; }
  .hl-card { padding: 14px; gap: 6px; border-radius: 18px; }
  .hl-card .av { width: 36px; height: 36px; }
  .hl-card .hl-label { font-size: .72rem; }
  .hl-card .hl-name { font-size: 1.1rem; }
  .hl-card .hl-val { font-size: .76rem; }
  .toolbar { gap: 8px; margin-bottom: 12px; }
  .toolbar .view-toggle { margin-left: auto; }
  .toolbar .search { order: 3; flex: 1 1 100%; height: 42px; }
  .toolbar .select { order: 4; flex: 1 1 0; min-width: 0; height: 42px; padding-left: 14px; }
  .toolbar .select select { max-width: none; flex: 1; min-width: 0; }
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 12px; padding: 0 16px; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; padding: 7px 12px; font-size: .84rem; }
  .switch { font-size: .84rem; }
  .result-count { margin: 16px 0 10px; }
  .people.cards { grid-template-columns: 1fr; gap: 6px; }
  .pcard { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 10px 12px; border-radius: 14px; }
  .pcard .pc-top { grid-column: 1; gap: 10px; }
  .pcard .av { width: 40px; height: 40px; }
  .pc-name { font-size: .92rem; }
  .pc-team { font-size: .74rem; }
  .pcard .pc-counts { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 6px; }
  .pc-count { font-size: 0; padding: 5px 0; width: 50px; align-items: center; border-radius: 10px; }
  .pc-count b { font-size: 1.15rem; }
  .pc-count.mit::after, .pc-count.gegen::after { font-size: .62rem; color: var(--ink-2); }
  .pc-count.mit::after { content: 'mit'; }
  .pc-count.gegen::after { content: 'gegen'; }
  .pc-years { grid-column: 1; display: flex; gap: 10px; padding-left: 50px; font-size: .7rem; }
  .inj-row { padding: 10px; gap: 10px; }

  /* Germany: the four key numbers on one line */
  .de-hero { gap: 18px; }
  .de-hero-main { gap: 14px; }
  .crest.de-crest { width: 60px; height: 60px; padding: 8px; border-radius: 18px; }
  .de-hero h3 { font-size: 1.4rem; }
  .de-kicker { font-size: .68rem; }
  .de-stats { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 10px; flex-wrap: nowrap; }
  .de-stats b { font-size: 1.4rem; }
  .de-stats span { font-size: .66rem; }
  .de-highlights { gap: 10px; margin-top: 20px; }
  .nat-games-title { margin: 32px auto 12px; }

  /* universe: square canvas */
  .net-wrap { margin-left: -16px; margin-right: -16px; border-radius: 0; }
  #net { height: auto; aspect-ratio: 1; }

  /* quiz overview: no box in a box, three quizzes side by side */
  .quiz:has(.q-hub) { padding: 16px 12px; }
  .q-hub-head { padding: 4px 6px 6px; }
  .q-hub { gap: 12px; }
  .q-hub-head { gap: 16px; }
  .q-hub-score { font-size: 2.4rem; }
  .q-level { grid-template-columns: 1fr; gap: 12px; padding: 14px; border-radius: 20px; }
  .q-level-head h3 { font-size: 1.3rem; }
  .q-level-sets { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .q-set { grid-template-columns: 1fr; grid-template-rows: auto; justify-items: center; text-align: center; row-gap: 6px; padding: 12px 6px; border-radius: 16px; }
  .q-set-ring { grid-row: auto; width: 44px; height: 44px; }
  .q-set-txt { align-items: center; }
  .q-set-meta { font-size: .7rem; }
  .q-set-go { grid-column: auto; font-size: .74rem; margin-top: 0; }
}

/* ================= Phone-only controls (hidden on desktop) ================= */
.nav-long { display: inline; }
.scrub-phone, .seg-select, .mv-hint-phone { display: none; }
.scrub-phone { align-items: center; gap: 10px; margin: 6px 0 24px; }
.scrub-phone .icon-btn { flex: none; width: 44px; height: 44px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); }
.scrub-phone .icon-btn:disabled { opacity: .35; cursor: default; }
.scrub-select { flex: 1; min-width: 0; height: 44px; padding: 0 8px 0 14px; }
.scrub-select select { flex: 1; min-width: 0; max-width: none; text-overflow: ellipsis; font-weight: 600; }
.seg-select select { flex: 1; min-width: 0; max-width: none; }

/* Season bars (phones): one bar per season, tap for the numbers */
.bars.seasons { display: flex; align-items: flex-end; gap: 4px; height: auto; margin-top: 8px; border-bottom: 0; background: none; }
.sbar {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px;
  height: 196px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.sbar-col {
  display: block; width: 100%; height: calc(var(--h) * .72); min-height: 3px; border-radius: 6px 6px 2px 2px;
  background: var(--c); transform-origin: bottom; animation: grow 600ms var(--ease) both;
  transition: opacity 200ms, box-shadow 160ms;
}
.sbar-n { font-size: .66rem; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sbar-l { font-size: .66rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.sbar.off .sbar-col { opacity: .22; }
.sbar.pick .sbar-col { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }
.sbar.pick .sbar-l { color: var(--ink); font-weight: 700; }
@media (min-width: 641px) {
  .bars.seasons { gap: 10px; justify-content: center; }
  .sbar { height: 300px; max-width: 96px; }
  .sbar-n, .sbar-l { font-size: .78rem; }
}

/* ================= Phones: room to breathe ================= */
/* Overrides the denser pass above: fewer things per row, more air, controls that suit a thumb. */
@media (max-width: 640px) {
  .nav-long { display: none; }
  .nav .btn { padding: 10px 18px; }

  .lesson { padding: 80px 20px; }
  .lesson-head { margin-bottom: 36px; }
  .chart-card, .panel { padding: 22px 18px; }
  .split { gap: 16px; margin-top: 16px; }
  .season { padding: 22px 18px; }

  /* numbers get two columns so big values and labels fit */
  .tiles { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .tiles .stat, .season-stats .stat { padding: 14px 16px; }
  .tiles .stat b, .season-stats .stat b { font-size: 1.6rem; }
  .stat span, .season-stats .stat span { font-size: .78rem; line-height: 1.3; }
  .season-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 24px; }

  /* chapter 1: dropdown with arrows instead of crowded labels */
  .scrubber { padding-bottom: 14px; }
  .scrub-ticks { display: none; }
  .scrub-phone { display: flex; }

  /* bars of buttons become dropdowns where marked */
  .seg[data-select] { display: none; }
  .seg-select { display: flex; width: 100%; margin: 0 0 20px; }

  /* chapter 3 chart: title, switch and note stacked */
  .chart-head { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
  .chart-segs { margin: 0; }
  .chart-note { min-height: 2.6em; line-height: 1.35; }

  /* player highlights: one per row, photo on the left */
  .highlights { grid-template-columns: 1fr; gap: 10px; }
  .hl-card { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "av label" "av name" "av val"; column-gap: 14px; row-gap: 2px; align-items: center; padding: 14px 16px; }
  .hl-card .av { grid-area: av; width: 48px; height: 48px; }
  .hl-card .hl-label { grid-area: label; }
  .hl-card .hl-name { grid-area: name; font-size: 1.2rem; }
  .hl-card .hl-val { grid-area: val; font-size: .8rem; }
  .people.cards { gap: 8px; }
  .pcard { padding: 12px 14px; }

  /* market value */
  .mv-card { padding: 22px 14px 12px; }
  .mv-hint-phone { display: block; margin-right: auto; font-size: .78rem; color: var(--muted); }

  /* quiz: matching runs top to bottom, everything a little larger to tap */
  .q-text { font-size: 1.45rem; margin-bottom: 22px; }
  .q-opt { padding: 15px 16px; }
  .ix-pair { grid-template-columns: 1fr; gap: 0; }
  .ix-col { gap: 10px; }
  .ix-col + .ix-col { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--line-2); }
  .ix-chip { padding: 13px 14px; font-size: .95rem; gap: 10px; }
  .ix-chip .crest.tiny { display: inline-block; }
  .ix-chip .av.ix-av { display: grid; }
  .ix-row { padding: 13px 14px; }
  .ix-row { flex-wrap: wrap; row-gap: 4px; }
  .ix-sub { display: block; flex-basis: 100%; padding-left: 26px; white-space: normal; }
  .ix-sub:empty { display: none; }
  .ix-order.locked .ix-sub { position: static; font-size: .76rem; }
}

/* Nothing may widen the page on phones (a wide dropdown made browsers zoom the whole site out). */
html, body { overflow-x: clip; }
.select { max-width: 100%; min-width: 0; }
.select select { min-width: 0; text-overflow: ellipsis; }
@media (max-width: 640px) {
  .toolbar .select { flex: 1 1 100%; }
  .toolbar .select select { width: 100%; }
  .de-highlights > * { min-width: 0; }
  .de-card { padding: 22px 18px; overflow-wrap: anywhere; }
  .de-card h3 { font-size: 1.35rem; overflow-wrap: break-word; hyphens: auto; }
}

/* ================= Phones: round 3 ================= */
/* Timeline quiz as rows (all sizes; only built on narrow screens) */
.ix-tl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ix-tl-row {
  display: grid; grid-template-columns: 1fr; grid-template-areas: "d" "t" "v"; gap: 5px; align-items: center; width: 100%; min-width: 0;
  padding: 8px 10px; border: 0; border-radius: 12px; cursor: pointer; text-align: left; font: inherit; color: inherit;
  background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line); transition: box-shadow 140ms, background-color 140ms;
}
.ix-tl-d { grid-area: d; min-width: 0; display: flex; flex-direction: column; font-size: .86rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; }
.ix-tl-d small { font-size: .7rem; font-weight: 500; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ix-tl-track { grid-area: t; height: 8px; border-radius: 99px; background: var(--fill); overflow: hidden; }
.ix-tl-track i { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--line-2); transition: width 620ms var(--ease-spring); }
.ix-tl-v { grid-area: v; text-align: left; white-space: nowrap; font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.ix-tl-row.sel { box-shadow: inset 0 0 0 2px var(--blue); background: var(--tint-blue); }
.locked .ix-tl-row { pointer-events: none; }
.shown .ix-tl-track i { width: var(--w); }
.shown .ix-tl-row.right { box-shadow: inset 0 0 0 2px var(--green); background: var(--green-soft); }
.shown .ix-tl-row.right .ix-tl-track i { background: var(--green); }
.shown .ix-tl-row.right .ix-tl-v { color: var(--green-ink); font-weight: 700; }
.shown .ix-tl-row.wrong { box-shadow: inset 0 0 0 2px var(--red); background: var(--red-soft); }
.shown .ix-tl-row.wrong .ix-tl-track i { background: var(--red); }

@media (max-width: 640px) {
  /* 1. market value tools: no hint, buttons with room */
  .mv-hint-phone { display: none; }
  .mv-tools { justify-content: flex-end; gap: 10px; }
  .mv-tools .btn { white-space: nowrap; }

  /* 2. portraits stay upright like in the list */
  .hl-card .av { width: 48px; height: auto; }
  .hl-card .av:not(:has(img)) { height: 48px; }

  /* 3 + 7. dropdowns instead of button rows and chips */
  #phaseChips, #netLegend { display: none; }
  .phase-select { margin: 0 0 16px; }
  .toolbar .seg-select { order: 1; flex: 1 1 0; margin: 0; }
  .toolbar .view-toggle { order: 2; margin-left: 0; }
  .net-controls { display: grid; gap: 10px; }
  .net-controls .seg-select, .net-controls .phase-select { margin: 0; }

  /* 4. quiz: compact enough to see question, answers and button at once */
  .quiz { padding: 20px 18px; scroll-margin-top: 84px; }
  .q-feedback { margin: 20px -18px -20px; padding: 18px; }
  .q-top { margin-bottom: 10px; }
  .q-progress { margin-bottom: 18px; }
  .q-ix-tag { margin-bottom: 8px; }
  .q-text { font-size: 1.3rem; margin-bottom: 16px; }
  .q-opts { gap: 8px; }
  .q-opt { padding: 12px 14px; }
  .q-actions { margin-top: 18px; }
  .ix-hint { margin: -6px 0 14px; font-size: .86rem; }

  /* 5. season-bar quiz: horizontal rows instead of 13 thin columns */
  .ix-bars { display: grid; grid-template-columns: 1fr; height: auto; gap: 6px; }
  .ix-bar { display: grid; grid-template-columns: 3.4em 1fr; align-items: center; gap: 10px; height: auto; }
  .ix-bar-l { order: -1; text-align: left; font-size: .8rem; }
  .ix-bars .ix-bar-l .full { display: inline !important; }
  .ix-bars .ix-bar-l .short { display: none !important; }
  .ix-col-bar { height: 24px !important; width: calc(var(--h) * 82%); min-height: 0; border-radius: 4px 8px 8px 4px; transition: width 620ms var(--ease-spring), background-color 200ms; }
  .shown .ix-col-bar { width: calc(var(--real) * 82%); }
  .ix-col-bar i { left: calc(100% + 8px); bottom: auto; top: 50%; transform: translateY(-50%); font-size: .76rem; }
  .shown .ix-bar.rest .ix-col-bar i { opacity: 1 !important; }
}

/* Pair quiz as rows with a dropdown each (built on narrow screens) */
.ix-prs { display: grid; gap: 8px; }
.ix-pr { display: grid; gap: 6px; padding: 10px 12px; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line); }
.ix-pr-l { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: .92rem; min-width: 0; }
.ix-pr-l .crest.tiny { margin: 0; }
.ix-pr-l .av.ix-av { width: 28px; height: 28px; font-size: .62rem; flex: none; display: grid; }
.ix-pr-sel { height: 40px; padding: 0 6px 0 12px; }
.ix-pr-sel select { flex: 1; min-width: 0; max-width: none; font-weight: 600; }
.ix-pr.right { box-shadow: inset 0 0 0 2px var(--green); background: var(--green-soft); }
.ix-pr.wrong { box-shadow: inset 0 0 0 2px var(--red); background: var(--red-soft); }
.ix-pr small { font-size: .76rem; font-weight: 600; color: var(--green-ink); }

@media (max-width: 640px) {
  /* quiz header in less height */
  .q-top { margin-bottom: 6px; }
  .q-progress { margin-bottom: 12px; gap: 10px; }
  .q-ix-tag { margin-bottom: 6px; padding: 3px 9px; font-size: .66rem; }
  .q-text { font-size: 1.22rem; line-height: 1.22; margin-bottom: 12px; }
  .ix-hint { margin: -4px 0 10px; font-size: .82rem; line-height: 1.35; }
  .q-actions { margin-top: 14px; }
  .q-actions .btn { padding: 12px 26px; }
  /* tasks */
  .ix-pitch { width: 100%; }
  .ix-spot { width: 34px; height: 34px; margin: -17px 0 0 -17px; font-size: .64rem; }
  .ix-pick { margin-top: 8px; font-size: .84rem; }
  .ix-order { gap: 6px; }
  .ix-row { padding: 9px 12px; border-radius: 12px; }
  .ix-bars { gap: 4px; }
  .ix-col-bar { height: 18px !important; }
  .ix-bar-l { font-size: .74rem; }
  .ix-tl-row { padding: 7px 9px; }
}
@media (max-width: 640px) {
  .q-ix-tag { display: none; }
  .q-ix .ix-hint { display: none; }
  .q-ix:has(.ix-order) .ix-hint { display: block; }
  .ix-pr { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 8px; padding: 8px 8px 8px 12px; }
  .ix-pr small { grid-column: 1 / -1; }
  .ix-pr-l { font-size: .86rem; line-height: 1.2; gap: 8px; }
  .ix-pr-l .crest.tiny, .ix-pr-l .av.ix-av { display: none; }
  .ix-pitch { width: 100%; }
}
@media (max-width: 640px) {
  .ix-tl { gap: 5px; }
  .ix-tl-row { padding: 6px 8px; gap: 4px; }
  .ix-bars { gap: 3px; }
  .ix-col-bar { height: 16px !important; }
  .ix-bar-l { font-size: .7rem; }
  .ix-row { padding: 8px 12px; }
  .ix-order { gap: 5px; }
}
.ix-tl:not(.shown *) .ix-tl-v { display: none; }
.shown .ix-tl-v { display: block; }
@media (max-width: 640px) {
  .ix-bars { gap: 2px; }
  .ix-col-bar { height: 15px !important; }
}

/* ================= Phase picker with colour dots ================= */
.pick { position: relative; }
.pick-btn {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 44px; padding: 0 14px 0 16px;
  border: 0; border-radius: 999px; cursor: pointer; font: inherit; color: var(--ink); text-align: left;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2);
}
.pick.open .pick-btn { box-shadow: inset 0 0 0 2px var(--ink); }
.pick-lbl { font-size: .85rem; color: var(--muted); }
.pick-cur { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: .93rem; font-weight: 500; }
.pick-cur span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick-chev { width: 18px; height: 18px; margin-left: auto; flex: none; fill: none; stroke: var(--ink-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 200ms var(--ease); }
.pick.open .pick-chev { transform: rotate(180deg); }
.pick-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px color-mix(in srgb, var(--c) 40%, transparent); }
.pick-dot.all { background: conic-gradient(#8DB9F2 0 20%, #2A4FB8 0 40%, #E5484D 0 60%, #29cc57 0 80%, #d4a72c 0); box-shadow: none; }
.pick-menu {
  position: absolute; z-index: 40; top: calc(100% + 8px); left: 0; right: 0; padding: 6px;
  display: grid; gap: 2px; border-radius: 20px; background: var(--surface);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .28), inset 0 0 0 1px var(--line);
  animation: pickIn 220ms var(--ease) both; transform-origin: top center;
}
.pick-menu[hidden] { display: none; }
@keyframes pickIn { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.pick-menu [role=option] {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 14px; border: 0; border-radius: 14px;
  background: none; cursor: pointer; font: inherit; font-size: .98rem; color: var(--ink); text-align: left;
}
.pick-menu [role=option]:active { background: var(--fill); }
.pick-menu [role=option][aria-selected=true] { background: var(--fill); font-weight: 600; }
.pick-check { width: 18px; height: 18px; margin-left: auto; fill: none; stroke: var(--green); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.pick-menu [aria-selected=true] .pick-check { opacity: 1; }

/* ================= Matches list on phones ================= */
@media (max-width: 680px) {
  .match-row { grid-template-columns: minmax(0, 1fr) auto 20px; grid-template-areas: "main res chev" "date min min"; gap: 6px 10px; padding: 12px 14px; }
  .m-main { grid-area: main; }
  .m-res { grid-area: res; align-self: start; }
  .m-chev { grid-area: chev; align-self: start; margin-top: 4px; }
  .m-date { grid-area: date; display: block; font-size: .76rem; }
  .m-min { grid-area: min; display: block; font-size: .76rem; color: var(--muted); }
  .m-main br { display: none; }
  .m-opp { display: block; white-space: normal; line-height: 1.35; }
  .m-comp { display: block; white-space: normal; line-height: 1.3; margin-top: 2px; }
}
@media (max-width: 640px) {
  .net-controls { grid-template-columns: 1fr; }
  .net-controls > .seg-select, .pick { width: 100%; }
}
@media (max-width: 640px) {
  #spiele .toolbar .seg-select { order: 4; flex: 1 1 100%; }
  #spiele .toolbar .switch { order: 5; margin-left: 0; }
}

/* ================= Chapter 3 follows the chosen phase ================= */
#statSeg button { display: inline-flex; align-items: center; gap: 8px; }
#statSeg .pick-dot { width: 10px; height: 10px; box-shadow: none; }
#zahlen .tiles .stat, #zahlen .chart-card, #zahlen .panel { transition: background-color 450ms var(--ease), box-shadow 450ms var(--ease); }
#zahlen.tinted .tiles .stat,
#zahlen.tinted .chart-card,
#zahlen.tinted .panel {
  background: color-mix(in srgb, var(--pc) 13%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pc) 38%, transparent);
}
#zahlen.tinted .tiles .stat b { color: color-mix(in srgb, var(--pc) 55%, var(--ink)); }
@media (max-width: 640px) {
  #statSeg { display: none; }
  #statSeg + .pick { margin-top: var(--gap-head); margin-bottom: 0; } /* first block under the heading on phones */
}
:root[data-theme="dark"] #zahlen.tinted .tiles .stat,
:root[data-theme="dark"] #zahlen.tinted .chart-card,
:root[data-theme="dark"] #zahlen.tinted .panel { background: color-mix(in srgb, var(--pc) 22%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pc) 55%, transparent); }
:root[data-theme="dark"] #zahlen.tinted .tiles .stat b { color: color-mix(in srgb, var(--pc) 45%, #fff); }

/* Fixed-width number columns so every bar track has the same length */
.pos-row { grid-template-columns: minmax(150px, 1.2fr) 2fr 10.5em; }
.pos-num { min-width: 0; white-space: nowrap; }
.inj-row { grid-template-columns: 34px 1fr 3.6em; }
@media (max-width: 640px) {
  .pos-row { grid-template-columns: 1fr auto; }
}

/* Positions: one shared grid; the number column is as wide as its longest entry, the bars take the rest */
.pos-list { display: grid; grid-template-columns: fit-content(10em) 1fr max-content; }
.pos-row { grid-column: 1 / -1; grid-template-columns: subgrid; column-gap: 18px; }
.pos-list { column-gap: 18px; }
@media (max-width: 640px) {
  .pos-list { display: block; }
  .pos-row { grid-template-columns: 1fr auto; }
}

/* Positions: games and goals in their own aligned columns */
.pos-list { grid-template-columns: fit-content(10em) 1fr max-content max-content; }
.pos-num { display: contents; }
.pn-g { text-align: left; }
.pn-t { text-align: right; }
.pn-t.zero { opacity: .55; }
@media (max-width: 640px) {
  .pos-num { display: flex; gap: 10px; justify-content: flex-end; }
  .pn-t { min-width: 4.2em; }
}

/* Journey: open all games with a club */
.step-games {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-top: 4px;
  padding: 8px 14px; border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-size: .84rem; font-weight: 600;
  color: var(--ink); background: var(--fill); transition: background-color 140ms, transform 100ms;
}
.step-games:hover { background: var(--fill-2); }
.step-games:active { transform: scale(.97); }
.step-games span { transition: transform 160ms var(--ease); }
.step-games:hover span { transform: translateX(3px); }

#sheet:focus { outline: none; }

/* Sheet: no focus ring when it opens, and a soft edge instead of a bright line in dark mode */
#sheet:focus, #sheet:focus-visible { outline: none; }
:root[data-theme="dark"] .sheet { box-shadow: var(--shadow-2), inset 0 0 0 1px rgba(255, 255, 255, .07); }
@media (max-width: 640px) {
  .sheet { border-radius: 28px 28px 0 0; overflow: hidden; }
  .sh-title { font-size: 1.6rem; }
  .sh-head .crest.big { width: 56px; height: 56px; }
  .sh-item { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; padding: 11px 12px; }
  .sh-item .side { font-size: .62rem; padding: 3px 6px; }
  .sh-item .t1 { white-space: normal; line-height: 1.25; font-size: .9rem; }
  .sh-item .t2 { white-space: normal; line-height: 1.3; font-size: .76rem; margin-top: 2px; }
  .sh-item .m-res { min-width: 0; padding: 5px 8px; font-size: .85rem; }
}

@media (max-width: 680px) { .sh-item .m-res { grid-area: auto; align-self: center; } }

/* Player rows on phones: the text column may shrink, long club names end with an ellipsis */
@media (max-width: 640px) {
  .pcard { grid-template-columns: minmax(0, 1fr) auto; }
  .pcard .pc-top { min-width: 0; }
  .pc-txt { min-width: 0; overflow: hidden; }
  .pc-name, .pc-team { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pc-txt br { display: none; }
  .pc-years { flex-wrap: wrap; gap: 0 10px; min-width: 0; }
  .pc-years span { white-space: nowrap; }
}
@media (max-width: 640px) { .pc-name { white-space: normal; overflow-wrap: anywhere; } }

/* Chapter 3 bars: flat bottoms on one baseline, a hairline gap everywhere */
.bar {
  border-radius: 3px 3px 0 0; margin: 0; align-self: flex-end;
  animation-fill-mode: backwards; /* no leftover transform after growing, so every bottom sits on the same pixel */
}
.sbar-col { border-radius: 6px 6px 0 0; animation-fill-mode: backwards; }
/* Until the chart is in view (app.js adds .go) the bars hold at zero */
.bars:not(.go) :is(.bar, .sbar-col) { animation-play-state: paused; }
@media (max-width: 760px) {
  .bars { gap: 1px; }
  .bar { min-width: 1px; border-radius: 1.5px 1.5px 0 0; }
}

/* Bars take the width computed in JS (whole device pixels), centred in the chart */
.bars:not(.seasons) { justify-content: center; }
.bars:not(.seasons) .bar { flex: 0 0 var(--bw, auto); min-width: 0; }

/* ================= Cards (bookings) in chapter 3 ================= */
.cardbox {
  display: grid; gap: 14px; width: 100%; margin-top: 14px; padding: 18px 20px; border: 0; border-radius: 16px;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
  transition: background-color 160ms, transform 120ms var(--ease), box-shadow 160ms;
}
.cardbox:hover:not(:disabled) { background: var(--warm-2); }
.cardbox:active:not(:disabled) { transform: scale(.99); }
.cardbox:disabled { cursor: default; }
.cb-nums { display: flex; gap: 28px; flex-wrap: wrap; }
.cb-item { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; }
.cb-item .cb-card { grid-row: span 2; }
.cb-item b { font-family: var(--serif); font-weight: 500; font-size: 2rem; line-height: 1; letter-spacing: -0.02em; }
.cb-item > span { font-size: .8rem; color: var(--muted); }
.cb-card { display: inline-block; flex: none; width: 18px; height: 25px; border-radius: 3px; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); transform: rotate(-8deg); }
.cb-card.y { background: #F5C518; }
.cb-card.r { background: #E5484D; }
.cb-card.yr { background: linear-gradient(135deg, #F5C518 50%, #E5484D 50%); }
.cb-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--line); font-size: .85rem; color: var(--ink-2); }
.cb-meta em { font-style: normal; font-weight: 600; color: var(--green-ink); white-space: nowrap; }
.cb-head { position: relative; width: 56px; height: 56px; flex: none; }
.cb-head .cb-card { position: absolute; width: 26px; height: 36px; top: 10px; }
.cb-head .cb-card.y { left: 8px; transform: rotate(-12deg); }
.cb-head .cb-card.r { left: 22px; transform: rotate(10deg); }
.sh-item > .cb-card { margin: 0 8px 0 4px; }
.m-ev .evr::before { content: ''; width: 7px; height: 10px; border-radius: 2px; background: #E5484D; }
.m-ev .evyr::before { content: ''; width: 7px; height: 10px; border-radius: 2px; background: linear-gradient(135deg, #F5C518 50%, #E5484D 50%); }
#zahlen.tinted .cardbox { background: color-mix(in srgb, var(--pc) 13%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pc) 38%, transparent); }
@media (max-width: 640px) {
  .cardbox { padding: 16px; }
  .cb-nums { gap: 20px; }
  .cb-item b { font-size: 1.7rem; }
}

/* Injuries (desktop): the list scrolls inside a box exactly as tall as the calendar next to it;
   at its ends the wheel carries on scrolling the page. */
@media (min-width: 961px) {
  .inj-grid { align-items: stretch; }
  .inj-list { contain: size; max-height: none; overflow-y: auto; overscroll-behavior: auto; }
}
@media (max-width: 960px) {
  .inj-list { max-height: none; overflow: visible; }
}
.chip .pick-dot { width: 9px; height: 9px; box-shadow: none; }

/* ---------- Spacing system ----------
   Every chapter stacks its blocks with the same few steps (tokens in :root): --gap-head after the heading,
   --gap-block between blocks, --gap-section before a sub-section, --gap-group inside a group. Blocks carry
   no vertical margins of their own; the gap always belongs to the block below. */
.lesson > * { margin-top: 0; margin-bottom: 0; }
.lesson > * + * { margin-top: var(--gap-block); }
.lesson > .lesson-head + * { margin-top: var(--gap-head); }

/* sub-sections */
#karriere > .climb, #wert > .journey-head, #erfolge > .de-games-head, #erfolge > #sideTitle { margin-top: var(--gap-section); }

/* groups: a title or control row and what it belongs to */
#karriere > .season { margin-top: 0; } /* sits right under the season scrubber (or its phone dropdown) */
#wert > .journey-head + .journey,
#erfolge > .de-games-head + *, #erfolge > #sideTitle + *,
#zahlen > #statSeg + .tiles, #zahlen > .tiles + .scope-note,
#verletzungen > .tiles + *,
#netzwerk > .net-controls + *,
#spieler > .toolbar + .chips, #spieler > .switches,
.lesson > .result-count + * { margin-top: var(--gap-group); }
#spieler > .switches + .result-count, #spiele > .toolbar + .result-count { margin-top: var(--gap-block); }
/* phones: the phase dropdown replaces the chip row and joins the filter group */
.lesson > .pick { margin-top: var(--gap-group); }
.lesson > .lesson-head + .pick { margin-top: var(--gap-head); }

/* large cards share one inner padding */
.season, .chart-card, .panel, .de-hero { padding: var(--pad-card); }

/* gaps inside grids: cards, small tiles, list rows */
#highlights, #people, .inj-grid, #zahlen .split, #deHigh, #sideGames, .journey { gap: var(--gap-cards); }
#statTiles, #injStats, .season-stats { gap: var(--gap-tiles); }
#matches, .de-group { gap: var(--gap-rows); }

/* Skip hint: flashes up when someone tries to scroll a held page; placed next to the stage by placeHint() */
.skip-hint {
  position: fixed; top: 0; left: 50%; z-index: 60; display: inline-flex; align-items: center; gap: 8px; height: 40px;
  padding: 0 14px 0 8px; border: 0; border-radius: 99px; background: var(--glass-strong); color: var(--ink-2);
  box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line); font: 500 .82rem var(--sans); cursor: pointer;
  opacity: 0; pointer-events: none; transform: translate(var(--hx, -50%), 6px); transition: opacity 240ms var(--ease), transform 240ms var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.skip-hint kbd { padding: 3px 7px; border-radius: 7px; background: var(--fill-2); color: var(--ink); font: 600 .72rem var(--sans); }
.skip-hint svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.skip-hint:active { transform: translate(var(--hx, -50%), 0) scale(.96); }
@media (hover: none), (pointer: coarse) { .skip-hint { padding: 0 12px 0 16px; color: var(--ink); } }
.skip-hint.show { opacity: 1; pointer-events: auto; transform: translate(var(--hx, -50%), 0); }