/* ==========================================================================================
   B11 (ADR-051): the game's front door (start, play, slots, club selection).
   Linked AFTER assets/gameplan/gameplan.css: every token, the stadium, .btn, .icon-btn, .seg, .keycap and the
   sphere piece come from there. This file only composes them into the new screens, at desktop and
   phone portrait. Sharp edges; blue only for selection; ink and white for the emblem.
   ========================================================================================== */

@media (prefers-reduced-motion: reduce) { * { animation-delay: 0ms !important; } }

.game { position: fixed; inset: 0; z-index: 10; }
/* --- screen transitions (round 6, the user: "a smooth transition between these pages") -------------
   The old screen slides out as the new one slides in, forward when going deeper and back when returning;
   the cards arrive one after another; the stadium stays still. One-shot only, never blocking input, and
   collapsed by the device's reduce-motion setting. */
:root { --t-screen: 560ms; }
.screen { position: absolute; inset: 0; visibility: hidden; pointer-events: none; }
/* the old screen leaves quickly and the new one follows a beat later, so the two barely overlap */
.screen.is-active { visibility: visible; pointer-events: auto; animation: screen-in var(--t-screen) var(--ease-out) 210ms both; }
.screen.is-leaving { visibility: visible; pointer-events: none; animation: screen-out 220ms cubic-bezier(0.4, 0, 1, 1) both; }
.game[data-dir="back"] .screen.is-active { animation-name: screen-in-back; }
.game[data-dir="back"] .screen.is-leaving { animation-name: screen-out-back; }
@keyframes screen-in { from { opacity: 0; transform: translateX(56px); } to { opacity: 1; transform: none; } }
@keyframes screen-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-56px); } }
@keyframes screen-in-back { from { opacity: 0; transform: translateX(-56px); } to { opacity: 1; transform: none; } }
@keyframes screen-out-back { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(56px); } }
/* leaving the start screen: the logo swells and fades, as if walking through it */
.screen[data-screen="start"].is-leaving { animation-name: start-out; }
@keyframes start-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(1.08); } }
/* the cards arrive one after another (fill: backwards, so their own lift is untouched afterwards) */
.screen.is-active .mode-card, .screen.is-active .slot-card { animation: card-in 620ms var(--ease-out) calc(260ms + var(--i, 0) * 90ms) backwards; }
.screen.is-active .club-card { animation: card-in 560ms var(--ease-out) calc(240ms + min(var(--i, 0), 6) * 45ms) backwards; }
.screen.is-active .club-info { animation: card-in 620ms var(--ease-out) 380ms backwards; }
@keyframes card-in { from { opacity: 0; transform: translateY(28px) scale(0.97); } to { opacity: 1; transform: none; } }

.display-title { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; line-height: 0.9; color: var(--ink-900); text-shadow: 0 2px 0 rgba(255, 255, 255, 0.5); margin: 0; }
.eyebrow { font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-500); }

/* header: back + title on the left, tools on the right */
.screen-head { position: absolute; left: var(--pad); right: var(--pad); top: calc(var(--pad) + 4px); display: flex; align-items: center; gap: 20px; z-index: 5; }
.screen-head .display-title { font-size: clamp(34px, 3vw, 56px); }
.screen-head .head-tools { margin-left: auto; display: flex; gap: 8px; }
.screen-head .icon-btn { width: 44px; height: 44px; box-shadow: var(--shadow-1); }
.screen-head .icon-btn svg { width: 20px; height: 20px; }
.back-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 12px; border: 0; cursor: pointer;
  background: var(--surface); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); box-shadow: var(--shadow-1);
  font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-900);
  transition: background var(--t-micro), transform var(--t-micro) var(--ease-out);
}
.back-btn:hover { background: var(--paper); transform: translateX(-2px); }
.back-btn svg { width: 18px; height: 18px; }

.game-foot {
  position: absolute; left: var(--pad); right: var(--pad); bottom: 16px; height: 32px; display: flex; align-items: center; gap: 22px;
  font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.94); text-shadow: 0 1px 2px rgba(0, 20, 8, 0.55);
}
.game-foot .key-hint { display: inline-flex; align-items: center; gap: 7px; }
.game-foot .version { margin-left: auto; }

/* ==========================================================================================
   START: the stadium and the emblem, nothing else
   ========================================================================================== */
.screen[data-screen="start"] { cursor: pointer; }
.start-emblem { position: absolute; left: 50%; top: 44%; width: min(560px, 42vw, 58vh); transform: translate(-50%, -50%); text-align: center; }
.brand-mark { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.45)); }
.start-tagline { margin: 18px 0 0; padding-left: 0.3em; font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 1.7vw, 34px); letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-900); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); }
.start-hint { position: absolute; left: 0; right: 0; bottom: 9vh; display: flex; justify-content: center; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 1.5vw, 30px); letter-spacing: 0.2em; text-transform: uppercase; color: var(--paper); text-shadow: 0 1px 3px rgba(0, 20, 8, 0.65); }
.start-hint .touch { display: none; }
.start-hint .keycap { font-family: var(--font-display); letter-spacing: 0.08em; height: 24px; font-size: 13px; }

/* the logo arrives once: the numeral settles, the hairline draws out, the name follows */
.screen[data-screen="start"].is-active .mk-num { animation: mk-rise 900ms var(--ease-out) both; }
.screen[data-screen="start"].is-active .mk-line { transform-box: fill-box; transform-origin: center; animation: mk-line 900ms var(--ease-out) 250ms both; }
.screen[data-screen="start"].is-active .mk-word { animation: mk-word 1000ms var(--ease-out) 450ms both; }
.screen[data-screen="start"].is-active .start-tagline { animation: fade-in 700ms var(--ease-std) 800ms both; }
.screen[data-screen="start"].is-active .start-hint { animation: fade-in 600ms var(--ease-std) 1100ms both; }
@keyframes mk-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes mk-rise { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mk-word { from { letter-spacing: 18px; opacity: 0; } to { letter-spacing: 9px; opacity: 1; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheet-in { from { opacity: 0; transform: translate(-50%, calc(-50% + 16px)); } to { opacity: 1; transform: translate(-50%, -50%); } }

/* ==========================================================================================
   PLAY: two portrait cards, Offline and Online
   ========================================================================================== */
.mode-row { position: absolute; left: 50%; top: calc(50% + 24px); transform: translate(-50%, -50%); display: flex; gap: clamp(18px, 2vw, 40px); }
.mode-card, .slot-card {
  position: relative; display: flex; flex-direction: column; text-align: left; padding: 0; border: 0; cursor: pointer; overflow: hidden;
  background: var(--surface-2); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); box-shadow: var(--shadow-1);
  transition: transform var(--t-base) var(--ease-out), background var(--t-fast), box-shadow var(--t-base);
}
.mode-card { width: clamp(260px, 24vw, 640px); height: min(68vh, 1000px); }
.mode-card::after, .slot-card::after, .club-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--accent); transform: scaleX(0); transition: transform var(--t-page) var(--ease-out); }
.mode-card.is-on, .slot-card.is-on { background: var(--paper); transform: translateY(-8px); box-shadow: var(--shadow-2); }
.mode-card.is-on::after, .slot-card.is-on::after, .club-card.is-on::after { transform: scaleX(1); }
.mode-card:focus-visible, .slot-card:focus-visible, .club-card:focus-visible { outline: none; }

.mode-art { position: relative; flex: 1 1 auto; overflow: hidden; }
.mode-body { flex: none; padding: clamp(16px, 1.6vw, 26px) clamp(18px, 1.8vw, 30px) clamp(18px, 1.8vw, 28px); display: grid; gap: 6px; }
.mode-body b { font-family: var(--font-display); font-weight: 700; font-size: clamp(34px, 2.8vw, 54px); letter-spacing: 0.06em; text-transform: uppercase; line-height: 0.95; color: var(--ink-900); }
.mode-body .mode-line { font-size: clamp(15px, 1vw, 18px); font-weight: 600; color: var(--ink-700); }
.mode-body ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 3px; }
.mode-body li { font-size: 14px; font-weight: 500; color: var(--ink-500); display: flex; gap: 10px; align-items: center; }
.mode-body li::before { content: ""; width: 12px; height: 2px; background: var(--ink-300); flex: none; }
.mode-body .mode-slots { margin-top: 8px; font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500); }
.mode-card.is-on .mode-slots { color: var(--accent-ink); }

/* offline art: The Ten, the league's own trophy (EslTrophy.ts), photographed on the pitch -- a still rendered once, so the
   start screen carries no 3D; shot 3:2 with the cup in the middle third, so it crops cleanly for the tall card and the phone's wide one */
.art-offline { background: url("offline-trophy.jpg") 50% 50% / cover var(--surface-2); }

/* online art: ten clubs around one league */
.art-online { background: url("../stadium/night-stadium.jpeg") 50% 22% / cover; }
.art-online::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(233, 240, 248, 0.5), rgba(210, 222, 238, 0.35)); }
.art-online svg.network { position: absolute; left: 50%; top: 50%; width: 94%; max-height: 94%; transform: translate(-50%, -50%); overflow: visible; }
.art-online .link { stroke: rgba(255, 255, 255, 0.95); stroke-width: 1.4; }
.art-online .node { fill: var(--paper); }
.art-online .globe { fill: rgba(255, 255, 255, 0.55); stroke: var(--paper); stroke-width: 2.5; }
.art-online .globe-lines { fill: none; stroke: rgba(16, 21, 31, 0.35); stroke-width: 1; }
.art-online .crest { filter: drop-shadow(0 2px 3px rgba(16, 24, 40, 0.35)); }

/* ==========================================================================================
   SLOTS
   ========================================================================================== */
.slot-row { position: absolute; left: 50%; top: calc(50% + 24px); transform: translate(-50%, -50%); display: flex; gap: clamp(18px, 2vw, 40px); }
.slot-card { width: clamp(250px, 21vw, 560px); height: min(62vh, 900px); }
.slot-card.is-empty { background: var(--surface-2); }
.slot-card.is-empty.is-on { background: var(--paper); }
.slot-card:disabled { cursor: default; background: var(--surface); }
.slot-card .slot-label { position: absolute; left: 18px; top: 16px; z-index: 2; }
.slot-card .slot-plus { flex: 1; display: grid; place-items: center; }
.slot-card .slot-plus svg { width: clamp(64px, 5.4vw, 96px); height: auto; color: var(--ink-700); }
.slot-card:disabled .slot-plus svg { color: var(--ink-500); }
.slot-card .slot-kit { flex: 1; }
.slot-body { flex: none; padding: 18px 22px 22px; display: grid; gap: 4px; }
.slot-body b { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 2.2vw, 42px); letter-spacing: 0.05em; text-transform: uppercase; line-height: 0.95; }
.slot-body .slot-line { font-size: 15px; font-weight: 600; color: var(--ink-700); }
.slot-body .slot-detail { font-size: 14px; font-weight: 500; color: var(--ink-500); }
.slot-body .slot-action { margin-top: 12px; justify-self: start; pointer-events: none; }
.slot-card:disabled .slot-action { background: var(--ink-500); box-shadow: none; }
.slot-card:disabled .slot-line { color: var(--ink-900); font-weight: 600; }
.slot-card:disabled b { color: var(--ink-700); }
.slot-delete { position: absolute; right: 12px; top: 12px; z-index: 3; width: 44px; height: 44px; }
.slot-delete.is-confirm { width: auto; }

/* the club's kit as a colour field, the crest on it: the kit's own pattern (below), plain without one */
.kit-field {
  position: relative; display: grid; place-items: center; overflow: hidden;
  --k1d: color-mix(in srgb, var(--k1) 72%, var(--ink-900));
  background: var(--k1d);
}
.kit-field::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 80% at 30% 10%, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 55%), linear-gradient(to top, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0) 45%); }
.kit-field .crest { position: relative; width: 46%; max-width: 150px; height: auto; filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.9)) drop-shadow(0 8px 14px rgba(0, 0, 0, 0.45)); }

/* ==========================================================================================
   CLUBS: a horizontal carousel of big cards, the chosen club's details beneath
   ========================================================================================== */
.club-stage { position: absolute; left: 0; right: 0; top: calc(var(--pad) + 5.2vh); bottom: 5.3vh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: clamp(14px, 2.2vh, 30px); }
.carousel { position: relative; --card-w: clamp(172px, 13.4vw, 350px); --card-h: clamp(196px, calc(49vh - 150px), 560px); }
.club-track {
  display: flex; gap: clamp(12px, 1vw, 20px); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 18px calc(50% - var(--card-w) / 2) 22px; scrollbar-width: none; overscroll-behavior-x: contain;
}
.club-track::-webkit-scrollbar { display: none; }
.club-card {
  position: relative; flex: none; width: var(--card-w); height: var(--card-h); scroll-snap-align: center; display: flex; flex-direction: column;
  padding: 0; border: 0; cursor: pointer; text-align: left; background: var(--surface-2); box-shadow: var(--shadow-1); opacity: 0.86;
  transition: transform var(--t-base) var(--ease-out), opacity var(--t-fast), background var(--t-fast), box-shadow var(--t-base);
}
.club-card:hover { opacity: 1; }
.club-card.is-on { opacity: 1; background: var(--paper); transform: translateY(-6px) scale(1.05); box-shadow: var(--shadow-2); z-index: 2; }
.club-card .kit-field { flex: 1 1 auto; }
.club-card .card-foot { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; padding: 10px 12px 12px; }
.club-card .card-name { font-family: var(--font-display); font-weight: 700; font-size: clamp(17px, 1.3vw, 24px); letter-spacing: 0.05em; text-transform: uppercase; line-height: 1; color: var(--ink-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.club-card .card-nick { font-size: 13px; font-weight: 500; color: var(--ink-500); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.club-card .card-ovr { text-align: right; }
.club-card .card-ovr b { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 2vw, 38px); line-height: 0.85; }
.club-card .card-ovr small { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-500); }
.track-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 48px; height: 48px; box-shadow: var(--shadow-1); }
.track-arrow svg { width: 22px; height: 22px; }
.track-arrow.is-prev { left: var(--pad); }
.track-arrow.is-next { right: var(--pad); }

.club-info {
  margin: 0 var(--pad); min-height: 0; max-height: 100%; overflow-y: auto; scrollbar-width: none; align-self: start; padding: clamp(12px, 1.8vh, 32px) clamp(22px, 2.4vw, 44px);
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(7px, 1.2vh, 24px) clamp(24px, 3vw, 56px); align-items: start;
}
.club-info::-webkit-scrollbar { display: none; }
.club-info .info-name { font-size: clamp(32px, 5vh, 62px); text-shadow: none; }
.club-info .info-line { font-size: clamp(13px, 1.97vh, 18px); font-weight: 600; color: var(--ink-500); margin-top: 6px; }
.club-info .info-story { font-size: clamp(15px, 2.25vh, 24px); font-weight: 500; color: var(--ink-900); margin: 12px 0 0; line-height: 1.45; }
.info-col { display: grid; gap: clamp(7px, 1.25vh, 14px); align-content: start; }
.fact { display: grid; gap: 3px; }
.fact .k { font-family: var(--font-display); font-weight: 700; font-size: clamp(12px, 1.88vh, 16px); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500); }
.fact .v { font-size: clamp(15px, 2.25vh, 22px); font-weight: 600; color: var(--ink-900); line-height: 1.35; }
.fact .v.rival { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 3.1vh, 30px); letter-spacing: 0.04em; text-transform: uppercase; line-height: 1; }
.fact .v .big { font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 4vh, 40px); line-height: 0.95; letter-spacing: 0.02em; white-space: nowrap; }
.fact .v small { display: block; font-size: clamp(12px, 1.82vh, 16px); font-weight: 500; color: var(--ink-500); margin-top: 2px; white-space: nowrap; }
.fact-row { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); justify-content: start; gap: 30px; }
.stars { display: grid; gap: 3px; }
.star { display: grid; grid-template-columns: 1fr auto 34px; gap: 12px; align-items: baseline; font-size: clamp(15px, 2.25vh, 22px); font-weight: 600; }
.star .pos { font-family: var(--font-display); font-weight: 600; font-size: clamp(12px, 1.82vh, 16px); letter-spacing: 0.06em; color: var(--ink-500); }
.star .ovr { font-family: var(--font-display); font-weight: 700; font-size: clamp(19px, 3vh, 27px); text-align: right; }
/* phone-only pieces (round 5): hidden on desktop, which shows the details beneath the row */
.club-hint, .detail-scrim, .info-close { display: none; }
.info-head .crest { display: none; }
.info-head { display: block; }
/* the action sits inside the box, centred beneath the details (round 4, the user) */
.info-action { grid-column: 1 / -1; justify-self: center; display: grid; padding-top: clamp(3px, 0.7vh, 10px); }
.info-action .btn { height: clamp(44px, 6.1vh, 70px); min-width: min(420px, 100%); justify-content: center; padding: 0 56px; font-size: clamp(19px, 3vh, 28px); letter-spacing: 0.1em; }

/* ==========================================================================================
   RESPONSIVE: laptop height, large monitors, phone portrait
   ========================================================================================== */
@media (max-height: 820px) {
  .screen-head { top: calc(var(--pad) - 2px); }
  .mode-card { height: min(70vh, 540px); }
  .slot-card { height: min(64vh, 480px); }
  .club-stage { gap: 12px; }
  .carousel { --card-w: clamp(170px, 13.4vw, 220px); }
  .club-card .card-name { font-size: 16px; }
  .club-track { padding-top: 12px; padding-bottom: 14px; }
  .club-info .info-story { margin-top: 8px; }
}
@media (min-width: 2200px) {
  .eyebrow, .fact .k { font-size: 16px; }
  .mode-body li, .fact .v small, .club-card .card-nick { font-size: 16px; }
  .slot-body .slot-detail { font-size: 18px; }
  .slot-body .slot-line { font-size: 20px; }
  .game-foot { font-size: 15px; }
  .screen-head .display-title { font-size: 72px; }
  .back-btn { height: 56px; font-size: 20px; padding: 0 20px 0 16px; }
  .screen-head .icon-btn { width: 56px; height: 56px; }
  .screen-head .icon-btn svg { width: 26px; height: 26px; }
  .mode-body li { font-size: 18px; }
  .mode-body .mode-line { font-size: 22px; }
  .mode-body .mode-slots { font-size: 17px; }
  .info-action .btn { height: 68px; font-size: 26px; }
  .club-card .card-nick { font-size: 16px; }
}

/* --- tactile: every press sinks (the user, round 2) ------------------------------------------------ */
.press, .btn, .mode-card, .slot-card, .club-card { touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.press:active:not(:disabled), .btn:active { transition-duration: 70ms; }
.mode-card:active:not(:disabled), .slot-card:active:not(:disabled) { transform: translateY(-3px) scale(0.975); box-shadow: var(--shadow-1); }
.club-card:active { transform: translateY(-2px) scale(0.985); }
.club-card.is-on:active { transform: translateY(-4px) scale(1.02); }
.btn:active, .back-btn:active, .icon-btn:active:not(:disabled) { transform: translateY(1px) scale(0.96); }
.slot-wrap { position: relative; display: flex; }
.screen[data-screen="start"]:active .start-emblem { transform: translate(-50%, -50%) scale(0.985); transition: transform 90ms var(--ease-out); }

/* --- phones: always landscape (the user, round 2). A short, wide viewport tightens every screen -------- */
@media (max-height: 520px) {
  .screen-head { top: 10px; left: 14px; right: 14px; gap: 12px; }
  .screen-head .display-title { font-size: 26px; }
  .screen-head .icon-btn, .back-btn { height: 44px; }
  .game-foot { display: none; }

  .start-emblem { width: min(62vh, 44vw); top: 43%; }
  .start-tagline { font-size: 20px; letter-spacing: 0.3em; margin-top: 8px; }
  .start-hint { bottom: 6vh; font-size: 18px; }

  .mode-row, .slot-row { top: calc(50% + 26px); gap: 14px; }
  .mode-card, .slot-card { height: calc(100vh - 86px); }
  .mode-card { width: min(34vw, 300px); }
  .slot-card { width: min(30vw, 260px); }
  .mode-card.is-on, .slot-card.is-on { transform: translateY(-4px); }
  .mode-body { padding: 10px 14px 12px; gap: 3px; }
  .mode-body b { font-size: 28px; }
  .mode-body .mode-line { font-size: 13px; }
  .mode-body ul { display: none; }
  .mode-body .mode-slots { margin-top: 2px; font-size: 12px; }
  .slot-card .slot-label { left: 12px; top: 10px; }
  .slot-card .slot-plus svg { width: 54px; }
  .slot-body { padding: 10px 14px 12px; gap: 2px; }
  .slot-body b { font-size: 24px; }
  .slot-body .slot-line, .slot-body .slot-detail { font-size: 12.5px; }
  .slot-body .slot-action { margin-top: 6px; height: 44px; font-size: 15px; padding: 0 16px; }
  .kit-field .crest { width: 38%; }

  /* phone club select (round 5, the user): big cards fill the screen; a tap opens the club's panel */
  .club-stage { top: 62px; bottom: 6px; gap: 0; grid-template-rows: minmax(0, 1fr) auto; }
  .carousel { --card-h: calc(100vh - 128px); --card-w: min(calc((100vh - 128px) * 0.74), 34vw); align-self: center; }
  .club-track { padding: 10px calc(50% - var(--card-w) / 2) 12px; gap: 14px; }
  .club-card .card-foot { padding: 8px 10px 10px; }
  .club-card .card-name { font-size: 17px; }
  .club-card .card-nick { display: block; font-size: 12px; }
  .club-card .card-ovr b { font-size: 26px; }
  .club-card .card-ovr small { font-size: 10px; }
  .track-arrow { display: none; }
  .club-hint { display: block; margin: 0; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--paper); text-shadow: 0 1px 3px rgba(0, 20, 8, 0.6); }

  /* the panel: frosted, not opaque, the club's colour along its top edge */
  .club-info { display: none; }
  .club-info.is-open {
    display: grid; position: fixed; z-index: 70; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(800px, calc(100vw - 40px)); max-height: calc(100vh - 24px); margin: 0; overflow-y: auto; overscroll-behavior: contain;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px 22px; align-items: start; padding: 16px 22px 16px;
    background: rgba(255, 255, 255, 0.78); backdrop-filter: blur(28px) saturate(1.3); -webkit-backdrop-filter: blur(26px) saturate(1.35);
    box-shadow: var(--shadow-2), inset 0 4px 0 var(--k1); animation: sheet-in var(--t-page) var(--ease-out) both;
  }
  .detail-scrim.is-open { display: block; position: fixed; inset: 0; z-index: 69; background: rgba(16, 21, 31, 0.3); animation: fade-in var(--t-fast) var(--ease-std) both; }
  .info-close { display: inline-grid; position: absolute; right: 8px; top: 10px; width: 44px; height: 44px; background: transparent; }
  .info-head { display: flex; align-items: center; gap: 10px; padding-right: 8px; }
  .info-head .crest { display: block; width: 40px; height: auto; flex: none; filter: drop-shadow(0 2px 4px rgba(16, 24, 40, 0.3)); }
  .club-info .info-name { font-size: 26px; }
  .club-info .info-line { font-size: 12px; }
  .club-info .info-story { font-size: 14px; margin-top: 8px; line-height: 1.4; }
  .info-col { gap: 7px; }
  .fact .k { font-size: 11px; }
  .fact .v, .star { font-size: 13.5px; }
  .fact .v .big { font-size: 22px; }
  .fact .v small { font-size: 11.5px; }
  .fact-row { gap: 14px; }
  .star .ovr { font-size: 16px; }
  .fact .v.rival { font-size: 18px; }
  .club-info.is-open .info-col:nth-of-type(3) { padding-right: 40px; }
  .screen.is-active .club-info.is-open { animation: sheet-in var(--t-page) var(--ease-out) both; }
  /* phone: the button sits under the first column, which shares its row span with the other two, so the panel is no taller */
  .club-info.is-open > .info-col:nth-of-type(1) { grid-column: 1; grid-row: 1; }
  .club-info.is-open > .info-col:nth-of-type(2) { grid-column: 2; grid-row: 1 / span 2; }
  .club-info.is-open > .info-col:nth-of-type(3) { grid-column: 3; grid-row: 1 / span 2; }
  .info-action { grid-column: 1; grid-row: 2; justify-self: stretch; padding-top: 4px; }
  .info-action .btn { height: 46px; min-width: 0; width: 100%; font-size: 19px; padding: 0 20px; }
}

@media (pointer: coarse) {
  .start-hint .keys { display: none; }
  .start-hint .touch { display: inline; }
}

/* held upright, a phone asks to be turned */
.rotate-hint { display: none; }
@media (orientation: portrait) and (max-width: 600px) {
  .rotate-hint {
    position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 24px;
    background: rgba(242, 244, 247, 0.9); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); color: var(--ink-900);
  }
  .rotate-hint svg { width: 72px; height: 72px; }
  .rotate-hint b { font-family: var(--font-display); font-weight: 700; font-size: 28px; letter-spacing: 0.08em; text-transform: uppercase; }
  .rotate-hint span { font-size: 15px; font-weight: 500; color: var(--ink-500); }
  .game .screen, .game-foot { visibility: hidden; }
}

/* ==========================================================================================
   B12 (ADR-052): the career shell. Round 2 (the user, from FIFA 18's career hub): a compact bar -- the
   club's crest and name on a plate, the four pages in a strip right beside it, the 27 (back to the save
   slots) at the far end -- and the pages as cards standing on the pitch beneath it. The Game Plan is
   hosted as the Squad page: its fused nav and board move down by --shell-h. Nothing here may transform
   or filter an ancestor of the Game Plan's fixed layers.
   ========================================================================================== */
:root {
  --tab-h: clamp(44px, 4.8vh, 52px);
  --bar-top: clamp(10px, 1.6vh, 22px);
  --bar-h: calc(var(--bar-top) + var(--tab-h));
}
:root.in-career { --shell-h: var(--bar-h); }
.game.is-away { visibility: hidden; pointer-events: none; z-index: 50; }
.game.is-away .rotate-hint { visibility: visible; }

.career { position: fixed; inset: 0; z-index: 12; animation: career-in 480ms var(--ease-std) 60ms both; }
@keyframes career-in { from { opacity: 0; } to { opacity: 1; } }

/* --- the bar ---------------------------------------------------------------------------------------- */
.career-bar {
  position: fixed; z-index: 40; top: var(--bar-top); left: var(--pad); right: var(--pad); height: var(--tab-h);
  display: flex; align-items: stretch; gap: clamp(8px, 0.8vw, 14px);
}
.bar-club {
  display: flex; align-items: center; gap: 10px; padding: 0 clamp(12px, 1.1vw, 20px) 0 clamp(8px, 0.7vw, 12px); min-width: 0;
  /* the same frosted glass as the tabs beside it (the user, round 2) */
  background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(var(--blur)) saturate(1.2); -webkit-backdrop-filter: blur(var(--blur)) saturate(1.2);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08), 0 8px 22px rgba(16, 24, 40, 0.12);
}
.bar-club { overflow: hidden; }
.bar-club .crest { height: calc(var(--tab-h) * 0.78); width: auto; aspect-ratio: 40 / 46; flex: none; filter: drop-shadow(0 2px 3px rgba(16, 24, 40, 0.28)); }
.bar-club-text { display: flex; flex-direction: column; min-width: 0; }
.bar-club-text b { font-family: var(--font-display); font-weight: 700; font-size: clamp(17px, 1.3vw, 25px); letter-spacing: 0.04em; text-transform: uppercase; line-height: 1; white-space: nowrap; }
.bar-club-text span { font-size: clamp(11.5px, 0.78vw, 14px); font-weight: 500; color: var(--ink-500); margin-top: 3px; white-space: nowrap; }
.bar-club-text em { font-style: normal; font-weight: 600; color: var(--ink-900); }

/* A7 (the user: "the club atmosphere clearly as a number, very clear with emojis"): the room chip beside the club --
   the band's emoji, the number in condensed tabular figures, "Atmosphere" over the band's word. A press opens the
   Squad Hub, where the room's card says what it does and why. */
.bar-room {
  all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: clamp(7px, 0.55vw, 11px);
  padding: 0 clamp(12px, 1vw, 18px) 0 clamp(9px, 0.7vw, 13px); flex: none;
  background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(var(--blur)) saturate(1.2); -webkit-backdrop-filter: blur(var(--blur)) saturate(1.2);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08), 0 8px 22px rgba(16, 24, 40, 0.12);
  transition: background var(--t-fast) var(--ease-std), transform var(--t-micro);
}
.bar-room[hidden] { display: none; }
.bar-room:hover { background: var(--paper); }
.bar-room:active { transform: scale(0.97); }
.bar-room:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.room-emoji { font-size: calc(var(--tab-h) * 0.5); line-height: 1; filter: drop-shadow(0 1px 1px rgba(16, 24, 40, 0.18)); }
.room-num { font-family: var(--font-display); font-weight: 700; font-size: calc(var(--tab-h) * 0.56); line-height: 0.86; color: var(--ink-900); font-variant-numeric: tabular-nums; min-width: 1.05em; text-align: center; }
.room-text { display: flex; flex-direction: column; line-height: 1; }
.room-text small { font-family: var(--font-display); font-weight: 600; font-size: clamp(10.5px, 0.66vw, 12.5px); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500); }
.room-band { font-family: var(--font-display); font-weight: 700; font-size: clamp(15px, 1.05vw, 20px); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-900); margin-top: 3px; white-space: nowrap; }
/* laptops: the bar is tight, so the chip stacks its band under the number and the tabs give back a little room */
@media (max-width: 1600px) and (min-height: 521px) {
  .career-bar .bar-tab { padding: 0 clamp(14px, 1.1vw, 32px); }
  .bar-room { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 8px; align-content: center; }
  .bar-room .room-emoji { grid-row: 1 / 3; }
  .bar-room .room-num { font-size: calc(var(--tab-h) * 0.44); text-align: left; }
  .bar-room .room-text small { display: none; }
  .bar-room .room-band { font-size: 12.5px; margin-top: 2px; letter-spacing: 0.08em; }
}

.bar-nav {
  position: relative; display: flex; align-items: stretch;
  background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(var(--blur)) saturate(1.2); -webkit-backdrop-filter: blur(var(--blur)) saturate(1.2);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08), 0 8px 22px rgba(16, 24, 40, 0.12);
}
.bar-tab {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; cursor: pointer;
  padding: 0 clamp(14px, 1.45vw, 32px); min-width: 44px;      /* A7: a little narrower, so the room chip fits beside the club */
  font-family: var(--font-display); font-weight: 700; font-size: clamp(17px, 1.35vw, 25px); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-500); transition: color var(--t-fast) var(--ease-std);
}
.bar-tab:hover, .bar-tab.is-active { color: var(--ink-900); }
.bar-indicator {
  position: absolute; z-index: 0; top: 0; bottom: 0; left: 0; width: 0; background: var(--paper);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1), 0 6px 16px rgba(16, 24, 40, 0.14);
  transition: left var(--t-page) var(--ease-out), width var(--t-page) var(--ease-out);
}
.bar-indicator::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--accent); }

/* --- the pages beneath the bar ------------------------------------------------------------------------ */
.career-page { position: fixed; z-index: 10; top: var(--bar-h); left: 0; right: 0; bottom: 0; display: none; }
.career-page.is-active { display: block; animation: career-in var(--t-page) var(--ease-std) both; }
/* the club block is on the bar; the Game Plan's own copy would repeat it */
.in-career .team { display: none; }
.career-note { position: absolute; left: var(--pad); bottom: var(--pad); margin: 0; padding: 10px 14px; font-size: 14px; color: var(--ink-500); }

/* (targets inside a card are 46 px: its lean-back projects them a little shorter, and they must read >= 44 on screen)
   --- cards on the pitch ---------------------------------------------------------------------------------
   A card stands on the grass rather than floating on the glass: it leans back a touch from its foot, casts a
   soft shadow onto the pitch beneath it, keeps its crests and names a few millimetres in front of its face,
   and, under a mouse, tilts toward the pointer while its shadow slides the other way (no shine: the user, round 2).
   It rises out of the pitch when the page opens (once, never looping). */
.card { position: relative; transform-origin: 50% 100%; }
@keyframes card-rise { from { opacity: 0; transform: translateY(70px) rotateX(26deg) scale(0.96); } to { opacity: 1; transform: none; } }
.card-ground {
  position: absolute; left: 7%; right: 7%; bottom: -30px; height: 64px; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(6, 26, 14, 0.5), rgba(6, 26, 14, 0));
  filter: blur(10px); transform: translateX(var(--sx, 0px)); transition: transform 520ms var(--ease-out);
}
.card-face {
  position: relative; overflow: hidden; backface-visibility: hidden; transform-style: preserve-3d; transform-origin: 50% 100%;
  transform: rotateX(calc(1.6deg + var(--rx, 0deg))) rotateY(var(--ry, 0deg));
  transition: transform 520ms var(--ease-out), box-shadow 520ms var(--ease-out);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(240, 243, 247, 0.95));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(16, 21, 31, 0.08),
    0 2px 4px rgba(6, 26, 14, 0.16), 0 18px 34px -12px rgba(6, 26, 14, 0.42), 0 46px 90px -34px rgba(6, 26, 14, 0.5);
}
.card.is-tilting .card-face { transition: transform 110ms linear, box-shadow 110ms linear; }
.card.is-tilting .card-ground { transition: transform 110ms linear; }

.match-card .card-face {
  display: grid; grid-template-rows: auto 1fr auto; min-height: clamp(230px, 33vh, 380px);
  padding: clamp(16px, 1.6vw, 30px) clamp(18px, 1.8vw, 34px);
}
.mc-wash {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(98deg,
    color-mix(in srgb, var(--home) 24%, transparent) 0 49.6%, rgba(255, 255, 255, 0.9) 49.6% 50.4%,
    color-mix(in srgb, var(--away) 24%, transparent) 50.4% 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 25%, transparent 90%); mask-image: linear-gradient(to bottom, black 25%, transparent 90%);
}
.mc-head { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; transform: translateZ(6px); }
.mc-eyebrow { font-family: var(--font-display); font-weight: 700; font-size: clamp(15px, 1.05vw, 20px); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-900); }
.mc-round { font-family: var(--font-display); font-weight: 600; font-size: clamp(13px, 0.9vw, 17px); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-500); }
.mc-teams { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(10px, 1.2vw, 24px); transform: translateZ(14px); padding: clamp(8px, 1.6vh, 20px) 0; }
.mc-side { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.mc-crest .crest { width: clamp(50px, 4.3vw, 86px); height: auto; aspect-ratio: 40 / 46; filter: drop-shadow(0 10px 14px rgba(16, 24, 40, 0.32)) drop-shadow(0 2px 3px rgba(16, 24, 40, 0.25)); }
.mc-name { margin-top: clamp(6px, 1vh, 12px); font-family: var(--font-display); font-weight: 700; font-size: clamp(17px, 1.5vw, 29px); line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-900); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-place { margin-top: 5px; font-size: clamp(12.5px, 0.85vw, 16px); font-weight: 600; color: var(--ink-500); }
.mc-v { display: grid; place-items: center; width: clamp(34px, 2.6vw, 48px); aspect-ratio: 1; background: var(--paper); box-shadow: var(--shadow-1); font-family: var(--font-display); font-weight: 700; font-size: clamp(17px, 1.3vw, 24px); line-height: 1; color: var(--ink-700); }
.mc-foot { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; transform: translateZ(10px); }
.mc-when { display: flex; flex-direction: column; min-width: 0; }
.mc-when b { font-family: var(--font-display); font-weight: 700; font-size: clamp(17px, 1.25vw, 24px); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-900); line-height: 1; }
.mc-when span { margin-top: 4px; font-size: clamp(12.5px, 0.85vw, 16px); font-weight: 500; color: var(--ink-500); }
.mc-advance { height: clamp(48px, 5.6vh, 60px); padding: 0 clamp(24px, 2.2vw, 40px); font-size: clamp(18px, 1.3vw, 24px); letter-spacing: 0.1em; flex: none; }
.mc-advance:disabled { cursor: progress; background: var(--ink-700); }
.match-card.is-quiet .mc-quiet { position: relative; align-self: center; margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 2.2vw, 40px); text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-900); transform: translateZ(20px); }

/* ==========================================================================================
   B13: the Dashboard (round 2, the user) -- cards standing on the pitch, each opening its own page:
     match (32 %, B12's height)  | news: 4 headlines  | table: ten rows
     sentiment (small, emojis)   |                    |
     calendar: next fixtures     | inbox: the 3 latest email subjects
   One page on a laptop and on a landscape phone alike. No visible scrollbars anywhere in the career.
   ========================================================================================== */
/* Scrollbars (the user, 8 Oct: "a lot of screens have no scrollbar when it is necessary ... the style of the squad hub"):
   every scrolling area in the career wears the Squad Hub's -- thin, square, a quiet ink thumb that darkens under the
   pointer, no track. Only the sideways carousels that scroll by swipe keep theirs hidden (their own rules). */
/* (`auto`: Chrome only draws the styled bar below when the standard property is left alone, and transfers.css sets `thin`) */
.career * { scrollbar-width: auto; }
.career *::-webkit-scrollbar { display: block; width: 10px; height: 10px; }
.career *::-webkit-scrollbar-track { background: transparent; }
.career *::-webkit-scrollbar-thumb { background: rgba(16, 21, 31, 0.26); border: 3px solid transparent; background-clip: padding-box; min-height: 40px; min-width: 40px; }
.career *::-webkit-scrollbar-thumb:hover { background-color: rgba(16, 21, 31, 0.5); }
.career *::-webkit-scrollbar-thumb:active { background-color: var(--accent); }
.career *::-webkit-scrollbar-corner { background: transparent; }
@supports (-moz-appearance: none) {
  .career * { scrollbar-width: thin; scrollbar-color: rgba(16, 21, 31, 0.3) transparent; }
  .career *:hover { scrollbar-color: rgba(16, 21, 31, 0.5) transparent; }
}

.career-page[data-page="dashboard"] { padding: clamp(14px, 2.4vh, 34px) var(--pad) clamp(16px, 3.4vh, 44px); }
.dash-grid {
  --match-h: clamp(230px, 33vh, 380px);
  --gap: clamp(10px, 1.1vw, 20px);
  height: 100%; display: grid; gap: var(--gap);
  grid-template-columns: minmax(0, 32fr) minmax(0, 40fr) minmax(0, 28fr);
  grid-template-rows: var(--match-h) auto minmax(0, 1fr) auto;
  grid-template-areas: "match news table" "sent news table" "cal news table" "cal inbox inbox";
  perspective: 1800px; perspective-origin: 30% 10%;
}
.dash-match { grid-area: match; }
.dash-news { grid-area: news; }
.dash-table { grid-area: table; }
.dash-sentiment { grid-area: sent; }
.dash-calendar { grid-area: cal; }
.dash-inbox { grid-area: inbox; }
.dash-cell { min-width: 0; min-height: 0; }
.dash-cell > .card, .dash-cell .card-face { height: 100%; }
.dash-grid.is-entering .card, .dash-detail.is-entering .card { animation: card-rise 900ms var(--ease-out) calc(140ms + var(--d, 0) * 100ms) backwards; }
.dash-match .match-card .card-face { min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto; }
.dash-match .mc-teams { min-height: 0; overflow: hidden; }
@media (max-height: 820px) {
  .dash-match .mc-crest .crest { width: clamp(44px, 3.8vw, 66px); }
  .dash-match .mc-teams { padding: 4px 0; }
  .dash-match .mc-name { margin-top: 5px; }
}

/* --- Advance in the middle of the match card, when the pointer is on it (the user) ---------------------- */
.mc-cta {
  position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%) translateZ(24px);
  opacity: 0; pointer-events: none; transition: opacity var(--t-fast) var(--ease-std), transform var(--t-base) var(--ease-out);
}
.mc-cta .mc-advance { box-shadow: 0 10px 30px rgba(16, 24, 40, 0.35), 0 2px 6px rgba(16, 24, 40, 0.25); }
.match-card:hover .mc-cta, .match-card:focus-within .mc-cta, .match-card.is-armed .mc-cta, .mc-cta.is-busy { opacity: 1; pointer-events: auto; }
.mc-v { transition: opacity var(--t-fast) var(--ease-std); }
.match-card:hover .mc-v, .match-card:focus-within .mc-v, .match-card.is-armed .mc-v, .match-card:has(.mc-cta.is-busy) .mc-v { opacity: 0; }
/* QA 4 Oct: the quiet card's big line ("The board's verdict, the awards and the summer") sat under the button; it steps
   back the way the match card's "v" does */
.match-card.is-quiet .mc-quiet { transition: opacity var(--t-fast) var(--ease-std); }
.match-card.is-quiet:hover .mc-quiet, .match-card.is-quiet:focus-within .mc-quiet, .match-card.is-quiet.is-armed .mc-quiet { opacity: 0.12; }
/* no pointer to hover with (a phone): the first tap on the card arms it (the user); a hover never sticks */
@media (hover: none) {
  .match-card:hover:not(.is-armed) .mc-cta, .match-card:focus-within:not(.is-armed) .mc-cta { opacity: 0; pointer-events: none; }
  .match-card:hover:not(.is-armed) .mc-v, .match-card:focus-within:not(.is-armed) .mc-v { opacity: 1; }
  .match-card.is-quiet:hover:not(.is-armed) .mc-quiet, .match-card.is-quiet:focus-within:not(.is-armed) .mc-quiet { opacity: 1; }
  .match-card:has(.mc-cta.is-busy) .mc-cta { opacity: 1; }
}

/* --- the cards that open a page ------------------------------------------------------------------------ */
.dcard { cursor: pointer; }
.dcard .card-face {
  display: flex; flex-direction: column; min-height: 0;
  padding: clamp(12px, 1.2vw, 22px) clamp(14px, 1.3vw, 24px);
  transform: translateY(var(--lift, 0px)) rotateX(1.6deg);
  transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out);
}
.dcard:hover { --lift: -5px; }
.dcard:hover .card-face { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 2px 4px rgba(6, 26, 14, 0.16), 0 26px 44px -14px rgba(6, 26, 14, 0.46), 0 56px 100px -36px rgba(6, 26, 14, 0.52); }
.dcard:hover .card-ground { transform: scale(1.08, 1.15); opacity: 0.8; }
.dcard:active { --lift: -1px; }
.dcard:focus-visible { outline: none; }
.dcard:focus-visible .card-face { box-shadow: 0 0 0 2px var(--accent), 0 18px 34px -12px rgba(6, 26, 14, 0.42); }
.card-ground { transition: transform 420ms var(--ease-out), opacity 420ms var(--ease-std); }

.dcard-head { display: flex; align-items: center; gap: 10px; min-height: 32px; padding-bottom: clamp(6px, 0.9vh, 12px); border-bottom: 1px solid rgba(16, 21, 31, 0.1); flex: none; }
.dcard-icon { display: grid; place-items: center; width: clamp(20px, 1.35vw, 26px); height: clamp(20px, 1.35vw, 26px); color: var(--ink-700); flex: none; }
.dcard-icon svg { width: 100%; height: 100%; }
.card-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(14px, 1vw, 19px); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-900); }
.card-sub { font-family: var(--font-display); font-weight: 600; font-size: clamp(12px, 0.85vw, 16px); letter-spacing: 0.08em; color: var(--ink-500); }
.dcard-open { margin-left: auto; display: grid; place-items: center; width: 26px; height: 26px; color: var(--ink-300); transition: color var(--t-fast), transform var(--t-fast) var(--ease-out); }
.dcard-open svg { width: 16px; height: 16px; }
.dcard:hover .dcard-open { color: var(--ink-900); transform: translateX(3px); }
.dcard-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.card-quiet { margin: 10px 0 0; font-size: clamp(13px, 0.95vw, 17px); font-weight: 500; color: var(--ink-500); }
.inbox-badge { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; background: var(--dark); color: var(--paper); font-family: var(--font-display); font-weight: 700; font-size: 13px; }

/* the news card: four headlines */
.dnews { list-style: none; margin: 0; padding: 0; flex: 1; min-height: 0; display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); }
.dnews-item { display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 0 0 0 12px; border-left: 3px solid transparent; min-height: 0; overflow: hidden; }
.dnews-item + .dnews-item { border-top: 1px solid rgba(16, 21, 31, 0.07); }
.dnews-item.is-yours { border-left-color: var(--ink-900); }
.dnews-byline { font-family: var(--font-display); font-weight: 600; font-size: clamp(11px, 0.78vw, 14px); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-500); }
.dnews-headline {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(16px, 1.35vw, 26px); line-height: 1.08; color: var(--ink-900);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}

/* the table card: ten rows, always all of them */
.dt-head, .dt-row { display: grid; grid-template-columns: 1.8em 1.4em minmax(0, 1fr) 2em 2.6em 2.4em; align-items: center; gap: 6px; }
.dt-head { padding: 6px 8px 4px; font-family: var(--font-display); font-weight: 600; font-size: clamp(11px, 0.75vw, 13px); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500); }
.dt-head span:nth-child(n + 4), .dt-num, .dt-pts { text-align: right; }
.dt-body { list-style: none; margin: 0; padding: 0; flex: 1; min-height: 0; display: grid; grid-template-rows: repeat(10, minmax(0, 1fr)); }
.dt-row { padding: 0 8px; border-left: 3px solid transparent; font-size: clamp(11.5px, min(0.9vw, 1.7vh), 16px); color: var(--ink-700); min-height: 0; }
.dt-row + .dt-row { border-top: 1px solid rgba(16, 21, 31, 0.06); }
.dt-row.is-yours { background: var(--paper); border-left-color: var(--accent); color: var(--ink-900); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08); }
.dt-pos { font-family: var(--font-display); font-weight: 700; color: var(--ink-900); }
.dt-crest .crest { height: min(1.45em, 22px); width: auto; aspect-ratio: 40 / 46; display: block; }
.dt-name { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dt-pts { font-family: var(--font-display); font-weight: 700; color: var(--ink-900); }

/* the inbox card: the three latest subjects */
.dmail { list-style: none; margin: 0; padding: 0; flex: 1; display: grid; grid-auto-rows: minmax(0, 1fr); }
.dmail-item { position: relative; display: grid; grid-template-columns: 7.5em minmax(0, 1fr); align-items: center; gap: 12px; padding: 4px 8px 4px 22px; min-height: 30px; }
.dmail-item + .dmail-item { border-top: 1px solid rgba(16, 21, 31, 0.07); }
.dmail-dot { position: absolute; left: 7px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; background: transparent; }
.is-unread > .dmail-dot, .is-unread .dmail-dot { background: var(--ink-900); }
.dmail-from, .mail-from { font-family: var(--font-display); font-weight: 600; font-size: clamp(11px, 0.78vw, 14px); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dmail-subject { font-size: clamp(13px, 0.95vw, 17px); font-weight: 500; color: var(--ink-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dmail-item.is-unread .dmail-subject { font-weight: 700; color: var(--ink-900); }

/* the calendar card: the next fixtures */
.dcal { list-style: none; margin: 0; padding: 0; flex: 1; min-height: 0; display: grid; grid-auto-rows: minmax(0, 1fr); align-content: start; }
.dcal-item { display: grid; grid-template-columns: 5.6em 1.6em 1.6em minmax(0, 1fr); align-items: center; gap: 8px; padding: 6px 8px; border-left: 3px solid transparent; min-height: 30px; }
.dcal-item + .dcal-item { border-top: 1px solid rgba(16, 21, 31, 0.07); }
.dcal-item.is-next { background: var(--paper); border-left-color: var(--accent); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08); }
.dcal-date, .cal-date { font-family: var(--font-display); font-weight: 600; font-size: clamp(12px, 0.85vw, 15px); letter-spacing: 0.04em; color: var(--ink-700); white-space: nowrap; }
.dcal-ha { display: grid; place-items: center; width: 1.6em; height: 1.6em; background: var(--surface-ink); font-family: var(--font-display); font-weight: 700; font-size: clamp(11px, 0.75vw, 13px); color: var(--ink-900); }
.dcal-crest .crest { height: 1.5em; width: auto; aspect-ratio: 40 / 46; display: block; font-size: clamp(12px, 0.9vw, 16px); }
.dcal-name, .cal-name { font-family: var(--font-display); font-weight: 700; font-size: clamp(13px, 0.95vw, 17px); letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dcal-window, .cal-window { margin: 6px 0 0; font-size: clamp(12px, 0.82vw, 14.5px); font-weight: 600; color: var(--ink-500); }

/* --- sentiment: small, with emojis -------------------------------------------------------------------- */
.sentiment-card .card-face { display: flex; flex-wrap: wrap; align-items: center; gap: 6px clamp(16px, 1.6vw, 30px); padding: clamp(8px, 0.9vw, 14px) clamp(14px, 1.3vw, 24px); }
.s-line { display: flex; align-items: center; gap: 8px; }
.s-emoji { font-size: clamp(20px, 1.6vw, 30px); line-height: 1; }
.s-who { font-family: var(--font-display); font-weight: 700; font-size: clamp(11px, 0.78vw, 14px); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-500); }
.s-words { font-family: var(--font-display); font-weight: 700; font-size: clamp(15px, 1.1vw, 20px); letter-spacing: 0.02em; color: var(--ink-900); }
.s-warning { flex-basis: 100%; margin: 2px 0 0; font-size: clamp(12.5px, 0.85vw, 15px); font-weight: 600; color: var(--ink-900); }

/* --- a card's page ------------------------------------------------------------------------------------- */
.dash-detail { height: 100%; perspective: 1800px; }
.detail-card { height: 100%; }
.detail-card .card-face { height: 100%; display: flex; flex-direction: column; min-height: 0; padding: clamp(14px, 1.5vw, 28px) clamp(16px, 1.7vw, 32px); transform: rotateX(0.8deg); }
.detail-head { display: flex; align-items: center; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid rgba(16, 21, 31, 0.1); flex: none; }
.detail-head .back-btn { box-shadow: none; background: var(--surface-2); }
.detail-title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 2.2vw, 40px); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-900); line-height: 1; }
.detail-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-top: clamp(8px, 1.2vh, 16px); }

/* the full table */
.ft { display: grid; }
.ft-row { display: grid; grid-template-columns: 2.4em 1.8em minmax(0, 1fr) repeat(7, 3em) 3.4em 8.4em; align-items: center; gap: 6px; min-height: clamp(34px, 5.6vh, 56px); padding: 0 10px; border-left: 3px solid transparent; font-size: clamp(13px, 0.95vw, 17px); color: var(--ink-700); }
.ft-row > span:nth-child(n + 4):not(.ft-form) { text-align: right; }
.ft-row + .ft-row { border-top: 1px solid rgba(16, 21, 31, 0.06); }
.ft-head { min-height: 34px; font-family: var(--font-display); font-weight: 600; font-size: clamp(12px, 0.8vw, 14px); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500); }
.ft-row.is-yours { background: var(--paper); border-left-color: var(--accent); color: var(--ink-900); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08); }
.ft-pos, .ft-pts { font-family: var(--font-display); font-weight: 700; color: var(--ink-900); }
.ft-crest .crest { height: 1.6em; width: auto; aspect-ratio: 40 / 46; display: block; }
.ft-name { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-form { display: flex; gap: 3px; justify-content: flex-end; }
.form-chip { display: grid; place-items: center; width: 1.45em; height: 1.45em; font-family: var(--font-display); font-weight: 700; font-size: 0.85em; }
/* the form colours the user chose (B13 round 6): a green win, a red loss, a grey draw (written in rgb: game.css
   keeps hex for the turf alone) */
:root { --form-win: rgb(31, 157, 99); --form-loss: rgb(216, 74, 74); --form-draw: rgb(163, 171, 181); }
.form-chip { color: var(--paper); }
.form-chip.is-w { background: var(--form-win); }
.form-chip.is-d { background: var(--form-draw); }
.form-chip.is-l { background: var(--form-loss); }

/* the inbox and the news: a list beside the open one */
.split { height: 100%; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.45fr); gap: clamp(14px, 1.6vw, 30px); min-height: 0; }
.split-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; min-height: 0; }
.mail-row, .news-row {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%; min-height: 48px; padding: 9px 12px 9px 24px;
  border: 0; border-left: 3px solid transparent; background: transparent; text-align: left; cursor: pointer; transition: background var(--t-micro);
}
.split-list li + li .mail-row, .split-list li + li .news-row { border-top: 1px solid rgba(16, 21, 31, 0.06); }
.mail-row:hover, .news-row:hover { background: var(--surface-2); }
.mail-row.is-on, .news-row.is-on { background: var(--paper); border-left-color: var(--accent); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08); }
.mail-row .dmail-dot { left: 9px; }
.mail-subject { font-size: clamp(13.5px, 0.95vw, 17px); font-weight: 500; color: var(--ink-700); }
.mail-row.is-unread .mail-subject { font-weight: 700; color: var(--ink-900); }
.news-row .mail-subject { font-family: var(--font-display); font-weight: 700; font-size: clamp(15px, 1.1vw, 20px); line-height: 1.1; color: var(--ink-900); }
.news-row.is-yours::before { content: ""; position: absolute; left: 10px; top: 14px; width: 6px; height: 6px; background: var(--ink-900); }
.split-read { min-height: 0; overflow-y: auto; padding: clamp(6px, 1vh, 14px) clamp(4px, 0.6vw, 12px); }
.read-kicker { display: block; font-family: var(--font-display); font-weight: 600; font-size: clamp(12px, 0.85vw, 15px); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-500); }
.read-title { margin: 10px 0 16px; font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 2.1vw, 38px); line-height: 1.02; color: var(--ink-900); text-wrap: balance; }
.article-headline { font-size: clamp(30px, 2.8vw, 54px); }
.read-body { margin: 0 0 14px; max-width: 64ch; font-size: clamp(15px, 1.05vw, 19px); line-height: 1.55; font-weight: 500; color: var(--ink-700); }
.read-body.is-lead { font-size: clamp(17px, 1.25vw, 22px); color: var(--ink-900); }
.article-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; max-width: 64ch; }
.article-foot .btn svg { width: 16px; height: 16px; }
.article-foot .btn:disabled { opacity: 0.35; cursor: default; }
.news-count { font-family: var(--font-display); font-weight: 600; font-size: clamp(13px, 0.9vw, 16px); letter-spacing: 0.06em; color: var(--ink-500); }

/* the season's calendar */
.cal { display: grid; }
.cal-row { display: grid; grid-template-columns: 2.4em 6em 1.6em 1.8em minmax(0, 1fr) 6em; align-items: center; gap: 10px; min-height: clamp(34px, 5vh, 50px); padding: 0 10px; border-left: 3px solid transparent; font-size: clamp(13px, 0.95vw, 17px); }
.cal-row + .cal-row { border-top: 1px solid rgba(16, 21, 31, 0.06); }
.cal-row.is-next { background: var(--paper); border-left-color: var(--accent); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08); }
.cal-row.is-played .cal-name, .cal-row.is-played .cal-date { color: var(--ink-500); }
.cal-md { font-family: var(--font-display); font-weight: 700; color: var(--ink-900); }
.cal-row .dcal-crest .crest { font-size: inherit; }
.cal-result { justify-self: end; font-family: var(--font-display); font-weight: 700; letter-spacing: 0.04em; color: var(--ink-900); text-transform: uppercase; }
.cal-window { margin: 0 0 10px; }

.dash-refusal { position: absolute; left: var(--pad); bottom: var(--pad); margin: 0; padding: 10px 14px; max-width: min(60ch, 30vw); font-size: 14px; color: var(--ink-900); z-index: 5; }

/* (targets inside a card are 46 px where they are buttons: its lean projects them a little shorter) */
.mc-advance, .detail-head .back-btn, .article-foot .btn { min-height: 46px; }

/* --- landscape phones: the same one page, tighter (the user) --------------------------------------------- */
@media (max-height: 520px) {
  .career-page[data-page="dashboard"] { padding: 8px var(--pad) 10px; }
  .dash-grid { --gap: 7px; grid-template-rows: minmax(0, 2.1fr) auto minmax(0, 1fr) auto; }
  .dcal-item:nth-child(n + 3) { display: none; }
  .sentiment-card .card-face { flex-wrap: nowrap; }
  .dcard .card-face { padding: 7px 10px; }
  .dcard-head { min-height: 24px; padding-bottom: 4px; gap: 6px; }
  .dcard-icon { width: 16px; height: 16px; }
  .card-title { font-size: 11px; letter-spacing: 0.1em; }
  .card-sub { font-size: 10px; }
  .dcard-open { width: 18px; height: 18px; }
  .inbox-badge { min-width: 17px; height: 17px; font-size: 11px; }
  .dnews-byline { font-size: 9px; }
  .dnews-headline { font-size: 12.5px; -webkit-line-clamp: 1; line-clamp: 1; }
  .dnews-item { padding-left: 7px; gap: 1px; }
  .dt-head { padding: 3px 6px 2px; font-size: 9px; }
  .dt-row { padding: 0 6px; font-size: 10.5px; gap: 4px; }
  .dmail-item { min-height: 18px; padding: 1px 6px 1px 16px; gap: 8px; grid-template-columns: 5.5em minmax(0, 1fr); }
  .dmail-dot { left: 5px; width: 5px; height: 5px; margin-top: -2.5px; }
  .dmail-from { font-size: 9px; }
  .dmail-subject { font-size: 11px; }
  .dcal-item { min-height: 18px; padding: 1px 6px; gap: 5px; grid-template-columns: 4.6em 1.4em 1.4em minmax(0, 1fr); }
  .dcal-date, .dcal-name { font-size: 10.5px; }
  .dcal-ha { font-size: 9px; }
  .dcal-window { font-size: 9.5px; margin-top: 2px; }
  .sentiment-card .card-face { padding: 4px 10px; gap: 2px 12px; }
  .s-emoji { font-size: 15px; }
  .s-who { font-size: 8.5px; }
  .s-words { font-size: 12px; white-space: nowrap; }
  .s-warning { font-size: 10px; }
  .match-card .card-face { padding: 8px 12px; }
  .mc-teams { padding: 0; }
  .dash-match .mc-side { flex-direction: row; gap: 6px; }
  .dash-match .mc-crest .crest { width: 26px; }
  .dash-match .mc-name { font-size: 13px; margin-top: 0; }
  .dash-match .mc-place { display: none; }
  .dash-match .mc-place, .mc-when span { font-size: 9.5px; }
  .mc-eyebrow { font-size: 10.5px; }
  .mc-round { font-size: 9.5px; }
  .mc-when b { font-size: 11.5px; }
  .mc-v { width: 24px; font-size: 12px; }
  .mc-advance { height: 44px; min-height: 44px; font-size: 14px; padding: 0 14px; }
  .detail-card .card-face { padding: 8px 12px; }
  .detail-head { gap: 8px; padding-bottom: 6px; }
  .detail-title { font-size: 20px; }
  .ft-row { min-height: 26px; font-size: 11.5px; grid-template-columns: 2em 1.6em minmax(0, 1fr) repeat(7, 2.3em) 2.6em 6.6em; gap: 3px; }
  .read-title { font-size: 20px; margin: 6px 0 8px; }
  .article-headline { font-size: 24px; }
  .read-body { font-size: 13px; margin-bottom: 8px; }
  .read-body.is-lead { font-size: 14px; }
  .mail-row, .news-row { min-height: 44px; padding: 6px 8px 6px 18px; }
  .news-row .mail-subject { font-size: 13px; }
  .mail-subject { font-size: 12px; }
  .cal-row { min-height: 26px; font-size: 11.5px; grid-template-columns: 2em 5em 1.4em 1.5em minmax(0, 1fr) 4.4em; gap: 6px; }
  .dash-refusal { max-width: 60vw; }
}

/* --- B13 round 3: the News carousel, emails you can press, movement, date tiles, the full-time reveal ----------- */

/* the News card: one headline at a time; swipe, the arrows, the dots or ← / → for the next; press to read it */
.nc-count { margin-left: auto; font-family: var(--font-display); font-weight: 600; font-size: clamp(12px, 0.85vw, 15px); letter-spacing: 0.08em; color: var(--ink-500); }
.nc-nav { display: flex; gap: 4px; }
.nc-arrow { display: grid; place-items: center; width: 46px; height: 46px; border: 0; background: var(--surface-2); color: var(--ink-900); cursor: pointer; transition: background var(--t-micro), transform var(--t-micro) var(--ease-out); }
.nc-arrow svg { width: 16px; height: 16px; }
.nc-arrow:hover:not(:disabled) { background: var(--paper); }
.nc-arrow:active:not(:disabled) { transform: scale(0.94); }
.nc-arrow:disabled { opacity: 0.3; cursor: default; }
.nc-viewport { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; touch-action: pan-y; }
.nc-track { --drag: 0px; height: 100%; display: flex; transform: translateX(calc(var(--i, 0) * -100% + var(--drag))); transition: transform 460ms var(--ease-out); }
.nc-track.is-dragging { transition: none; }
.nc-slide {
  flex: 0 0 100%; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: clamp(8px, 1.3vh, 16px);
  padding: clamp(10px, 1.6vh, 22px) clamp(4px, 0.5vw, 10px); user-select: none;
  transition: opacity 360ms var(--ease-std);
}
.nc-slide[aria-hidden="true"] { opacity: 0.25; }
.nc-masthead { display: flex; align-items: baseline; gap: 10px; padding-bottom: 8px; border-bottom: 2px solid var(--ink-900); }
.nc-source { font-family: var(--font-display); font-weight: 700; font-size: clamp(14px, 1.05vw, 19px); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-900); }
.nc-slide.is-yours .nc-source::after { content: " · Your club"; font-weight: 600; letter-spacing: 0.1em; color: var(--ink-500); }
.nc-when { margin-left: auto; font-family: var(--font-display); font-weight: 600; font-size: clamp(12px, 0.85vw, 15px); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500); }
.nc-headline {
  margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 2.35vw, 46px); line-height: 1.02; letter-spacing: 0.005em; color: var(--ink-900); text-wrap: balance;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.nc-standfirst {
  margin: 0; max-width: 58ch; font-size: clamp(14.5px, 1.02vw, 18.5px); line-height: 1.5; font-weight: 500; color: var(--ink-700);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.nc-read { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 700; font-size: clamp(13px, 0.92vw, 16px); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-900); }
.nc-read svg { width: 14px; height: 14px; transition: transform var(--t-fast) var(--ease-out); }
.dcard-news:hover .nc-read svg { transform: translateX(4px); }
.nc-dots { display: flex; justify-content: center; gap: 6px; padding-top: 6px; flex: none; }
.nc-dot { width: 28px; height: 44px; border: 0; padding: 0; background: none; cursor: pointer; position: relative; }
.nc-dot::after { content: ""; position: absolute; left: 4px; right: 4px; top: 50%; height: 3px; margin-top: -1.5px; background: var(--surface-ink); transition: background var(--t-fast); }
.nc-dot.is-on::after { background: var(--ink-900); }

/* the inbox card: each email is its own button */
.dmail li { display: flex; min-height: 0; }
.dmail li + li .dmail-item { border-top: 1px solid rgba(16, 21, 31, 0.07); }
.dmail .dmail-item { width: 100%; border: 0; background: transparent; text-align: left; cursor: pointer; grid-template-columns: 7.5em minmax(0, 1fr) 18px; min-height: 46px; transition: background var(--t-micro); }
.dmail .dmail-item + .dmail-item { border-top: 0; }
.dmail .dmail-item:hover { background: var(--paper); }
.dmail-go { display: grid; place-items: center; color: var(--ink-300); transition: color var(--t-fast), transform var(--t-fast) var(--ease-out); }
.dmail-go svg { width: 13px; height: 13px; }
.dmail-item:hover .dmail-go { color: var(--ink-900); transform: translateX(3px); }

/* the table: movement since the matchday before */
.dt-head, .dt-row { grid-template-columns: 1.6em 0.9em 1.4em minmax(0, 1fr) 2em 2.6em 2.4em; }
.dt-head span:nth-child(n + 5), .dt-num, .dt-pts { text-align: right; }
.dt-head span:nth-child(4) { text-align: left; }
.dt-move { font-size: 0.62em; line-height: 1; text-align: center; color: transparent; }
.dt-move.is-up { color: var(--ink-900); }
.dt-move.is-down { color: var(--ink-300); }
.dt-row { transition: background var(--t-fast); }
.dcard-table:hover .dt-row:not(.is-yours):nth-child(odd) { background: rgba(255, 255, 255, 0.45); }

/* the calendar: date tiles */
.dcal-item { grid-template-columns: 3.2em 1.6em 1.6em minmax(0, 1fr); }
.date-tile { display: grid; justify-items: center; line-height: 1; padding: 3px 0; background: var(--paper); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12); }
.date-tile .dt-wd, .date-tile .dt-mo { font-family: var(--font-display); font-weight: 700; font-size: clamp(9px, 0.62vw, 11px); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-500); }
.date-tile .dt-day { font-family: var(--font-display); font-weight: 700; font-size: clamp(17px, 1.3vw, 24px); color: var(--ink-900); margin: 1px 0; }
.dcal-item.is-next .date-tile { background: var(--dark); box-shadow: none; }
.dcal-item.is-next .date-tile .dt-day { color: var(--paper); }
.dcal-item.is-next .date-tile .dt-wd, .dcal-item.is-next .date-tile .dt-mo { color: rgba(255, 255, 255, 0.72); }

/* "Full time": the result just played, over the match card for a moment */
.mc-flash {
  position: absolute; inset: 0; z-index: 6; display: grid; place-content: center; justify-items: center; gap: clamp(6px, 1vh, 12px);
  background: var(--dark); color: var(--paper); transform: translateZ(30px);
  animation: mc-flash 3.2s var(--ease-std) both; pointer-events: none;
}
@keyframes mc-flash {
  0% { opacity: 0; } 8% { opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; visibility: hidden; }
}
.mc-flash-kicker { font-family: var(--font-display); font-weight: 700; font-size: clamp(12px, 0.9vw, 16px); letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); }
.mc-flash-score { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(12px, 1.4vw, 24px); width: 100%; padding: 0 clamp(12px, 1.4vw, 24px); animation: mc-flash-score 520ms var(--ease-out) 120ms both; }
@keyframes mc-flash-score { from { opacity: 0; transform: scale(0.86); } to { opacity: 1; transform: none; } }
.mc-flash-club { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; min-width: 0; }
.mc-flash-club .crest { width: clamp(30px, 2.4vw, 46px); height: auto; aspect-ratio: 40 / 46; }
.mc-flash-club b { font-family: var(--font-display); font-weight: 700; font-size: clamp(15px, 1.2vw, 23px); letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.05; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-flash-goals { font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 3.6vw, 70px); line-height: 1; letter-spacing: 0.02em; }
.mc-flash-goals i { font-style: normal; margin: 0 0.12em; color: rgba(255, 255, 255, 0.55); }
.mc-flash-verdict { font-family: var(--font-display); font-weight: 700; font-size: clamp(13px, 1vw, 18px); letter-spacing: 0.2em; text-transform: uppercase; padding: 4px 10px; background: var(--paper); color: var(--ink-900); }

/* polish: the cards' faces, the press, the header rule */
.dcard .card-face, .sentiment-card .card-face, .match-card .card-face {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 249, 251, 0.96) 55%, rgba(238, 242, 246, 0.95) 100%);
}
.dcard:active .card-face { transition-duration: 90ms; }

@media (max-height: 520px) {
  .nc-arrow { width: 44px; height: 44px; }
  .nc-count { font-size: 10px; }
  .nc-slide { padding: 4px 2px; gap: 4px; }
  .nc-masthead { padding-bottom: 3px; border-bottom-width: 1.5px; }
  .nc-source { font-size: 10px; letter-spacing: 0.14em; }
  .nc-when { font-size: 9px; }
  .nc-headline { font-size: 17px; -webkit-line-clamp: 2; line-clamp: 2; }
  .nc-standfirst { font-size: 11px; -webkit-line-clamp: 2; line-clamp: 2; }
  .nc-read { font-size: 10px; }
  .nc-dots { padding-top: 0; }
  .nc-dot { height: 24px; width: 22px; }
  .dmail .dmail-item { min-height: 22px; grid-template-columns: 5.5em minmax(0, 1fr) 12px; }
  .date-tile { padding: 1px 0; }
  .date-tile .dt-day { font-size: 12px; }
  .date-tile .dt-wd, .date-tile .dt-mo { font-size: 7px; }
  .dcal-item { grid-template-columns: 2.4em 1.4em 1.4em minmax(0, 1fr); }
  .dt-head, .dt-row { grid-template-columns: 1.4em 0.8em 1.3em minmax(0, 1fr) 1.6em 2.2em 2em; }
  .mc-flash-club b { font-size: 11px; }
  .mc-flash-club .crest { width: 22px; }
  .mc-flash-goals { font-size: 30px; }
}

/* --- B13 round 3: the news as newspapers online, the inbox as a mail reader (the user: "actual articles", "actual
   emails", "a few newspapers and journalists", "like an online newspaper", "I shouldn't need to scroll") -------------
   A story opens as its paper publishes it on the web: the paper's own site header (each paper its own logo: the
   broadsheets in a serif, the continental dailies on salmon, the red-tops and black-tops loud, the wires plain, a
   club's statement under its crest in its colours), then the picture, headline, standfirst and byline on the left and
   the story in one readable column on the right. Nothing scrolls: the page is laid out to the screen and the view steps
   the type down (`--fit`, to 70 % at the least) when a long story needs it. The press palette below is the one place
   outside the turf where the Dashboard carries colour of its own; blue still means selection only. */
:root {
  --font-paper: Georgia, "Iowan Old Style", "Noto Serif", "Source Serif Pro", "Times New Roman", serif;
  --newsprint: rgb(248, 246, 239);
  --newsprint-salmon: rgb(251, 234, 223);
  --press-red: rgb(206, 17, 38);
  --press-rule: rgba(16, 21, 31, 0.14);
}

/* the News card: each slide wears its paper's masthead */
.nc-byline { font-family: var(--font-display); font-weight: 600; font-size: clamp(11.5px, 0.8vw, 14px); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-500); }
.nc-standfirst { font-family: var(--font-paper); font-weight: 400; font-style: italic; }
.dcard-news .nc-source { font-family: var(--font-paper); font-weight: 700; font-size: clamp(15px, 1.12vw, 21px); letter-spacing: 0.01em; text-transform: none; }
.nc-slide.look-red-top .nc-source, .nc-slide.look-black-top .nc-source { padding: 2px 8px 1px; font-family: var(--font-display); font-style: italic; text-transform: uppercase; letter-spacing: 0.03em; color: var(--paper); }
.nc-slide.look-red-top .nc-source { background: var(--press-red); }
.nc-slide.look-black-top .nc-source { background: var(--ink-900); }
.nc-slide.look-wire .nc-source, .nc-slide.look-club .nc-source { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.1em; }

/* the news page: one story, the whole card, no scrolling */
.detail-news .detail-body, .detail-inbox .detail-body { overflow: hidden; display: flex; flex-direction: column; }
.np {
  --fit: 1; --stock: var(--paper);
  flex: 1 1 auto; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); background: var(--stock);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1), 0 10px 26px -14px rgba(16, 24, 40, 0.3);
  animation: read-in 320ms var(--ease-out) both;
}
.np.look-classic { --stock: var(--newsprint); }
.np.look-salmon { --stock: var(--newsprint-salmon); }

/* the paper's site header */
.np-site { display: flex; align-items: center; gap: clamp(12px, 1.4vw, 26px); padding: clamp(8px, 1vh, 12px) clamp(14px, 1.6vw, 28px); border-bottom: 1px solid var(--press-rule); }
.np-logo { display: flex; align-items: center; gap: 10px; flex: none; }
.np-logo-name { font-family: var(--font-paper); font-weight: 700; font-size: clamp(22px, 1.9vw, 36px); line-height: 1; letter-spacing: -0.015em; color: var(--ink-900); }
.look-salmon .np-logo-name { font-style: italic; }
.look-red-top .np-site, .look-black-top .np-site { background: var(--press-red); border-bottom: 0; }
.look-black-top .np-site { background: var(--ink-900); }
.look-red-top .np-logo-name, .look-black-top .np-logo-name { font-family: var(--font-display); font-style: italic; text-transform: uppercase; letter-spacing: 0.02em; font-size: clamp(26px, 2.3vw, 44px); color: var(--paper); }
.look-wire .np-site { border-bottom: 3px solid var(--ink-900); }
.look-wire .np-logo-name { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.1em; font-size: clamp(20px, 1.6vw, 30px); }
.look-wire .np-logo-name::before { content: ""; display: inline-block; width: 0.5em; height: 0.5em; margin-right: 0.35em; vertical-align: 0.1em; background: var(--ink-900); }
.look-club .np-site { background: var(--c1); border-bottom: 0; }
.look-club .np-logo-name { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; font-size: clamp(20px, 1.7vw, 32px); color: var(--paper); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
.np-logo-crest .crest { display: block; width: clamp(28px, 2.3vw, 42px); height: auto; aspect-ratio: 40 / 46; }
.np-crumbs { display: flex; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: clamp(12px, 0.85vw, 15px); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-500); }
.np-crumbs b { color: var(--ink-900); }
.np-date { margin-left: auto; font-family: var(--font-display); font-weight: 600; font-size: clamp(12px, 0.85vw, 15px); letter-spacing: 0.06em; color: var(--ink-500); white-space: nowrap; }
.look-red-top .np-crumbs, .look-red-top .np-date, .look-black-top .np-crumbs, .look-black-top .np-date,
.look-club .np-crumbs, .look-club .np-date { color: rgba(255, 255, 255, 0.78); }
.look-red-top .np-crumbs b, .look-black-top .np-crumbs b, .look-club .np-crumbs b { color: var(--paper); }

.news-split { grid-template-columns: minmax(0, 30fr) minmax(0, 70fr); }
.np-stage { min-height: 0; display: flex; flex-direction: column; gap: clamp(6px, 1vh, 10px); }
.np-main { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: calc(clamp(8px, 1.2vh, 14px) * var(--fit)); padding: clamp(12px, 1.8vh, 24px) clamp(16px, 2vw, 36px) clamp(10px, 1.4vh, 18px); }
/* the next story comes up from below, the one before down from above (the Dashboard's card slides sideways) */
.np.is-from-below { animation: np-from-below 380ms var(--ease-out) both; }
.np.is-from-above { animation: np-from-above 380ms var(--ease-out) both; }
@keyframes np-from-below { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: none; } }
@keyframes np-from-above { from { opacity: 0; transform: translateY(-48px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .np.is-from-below, .np.is-from-above { animation: none; } }


.np-headline { margin: 0; font-family: var(--font-paper); font-weight: 700; font-size: calc(clamp(24px, 2.25vw, 44px) * var(--fit)); line-height: 1.06; letter-spacing: -0.015em; color: var(--ink-900); text-wrap: balance; }
.look-red-top .np-headline, .look-black-top .np-headline { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0; line-height: 0.96; font-size: calc(clamp(28px, 2.7vw, 52px) * var(--fit)); }
.look-wire .np-headline, .look-club .np-headline { font-family: var(--font-display); letter-spacing: 0.005em; line-height: 1.02; }
.np-standfirst { margin: 0; font-family: var(--font-paper); font-style: italic; font-size: calc(clamp(15px, 1.1vw, 20px) * var(--fit)); line-height: 1.4; color: var(--ink-700); }
.look-red-top .np-standfirst, .look-black-top .np-standfirst, .look-wire .np-standfirst, .look-club .np-standfirst { font-family: inherit; font-style: normal; font-weight: 600; }
.np-byline { display: flex; align-items: center; gap: 10px; margin: 0; padding-top: calc(10px * var(--fit)); border-top: 1px solid var(--press-rule); }
.np-by-avatar { display: grid; place-items: center; flex: none; width: 34px; height: 34px; background: var(--ink-900); color: var(--paper); font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.04em; }
.look-red-top .np-by-avatar { background: var(--press-red); }
.look-club .np-by-avatar { background: var(--c1); }
.np-byline > span:last-child { display: grid; line-height: 1.2; }
.np-byline b { font-family: var(--font-display); font-weight: 700; font-size: clamp(13px, 0.92vw, 16px); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-900); }
.np-byline b + span { font-size: clamp(11.5px, 0.8vw, 14px); color: var(--ink-500); }

/* the story: one column, left-aligned, web type */
/* the story in a readable measure; the pull quote beside it, where an online paper puts it, not in the column */
.np-body { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: clamp(18px, 2vw, 40px); align-items: start; }
.np-body.has-aside { grid-template-columns: minmax(0, 68ch) minmax(0, 1fr); }
.np-text { max-width: 72ch; }
.np-aside { padding-top: 0.2em; }
.np-aside .np-quote { margin: 0; }
.np-body p { margin: 0 0 0.85em; font-size: calc(clamp(15px, 1.08vw, 19px) * var(--fit)); line-height: 1.55; font-weight: 400; color: var(--ink-900); }
.look-classic .np-body p, .look-salmon .np-body p { font-family: var(--font-paper); }
.np-body p:first-child { font-weight: 500; }
.look-classic .np-body p:first-child, .look-salmon .np-body p:first-child { font-weight: 700; }
.np-quote { margin: 0.2em 0 1em; padding: 2px 0 2px 16px; border-left: 4px solid var(--ink-900); }
.look-red-top .np-quote { border-left-color: var(--press-red); }
.look-club .np-quote { border-left-color: var(--c1); }
.np-quote p { margin: 0 0 4px; font-family: var(--font-paper); font-style: italic; font-weight: 700; font-size: calc(clamp(17px, 1.3vw, 24px) * var(--fit)); line-height: 1.3; }
.np-quote p::before { content: "\201C"; }
.np-quote p::after { content: "\201D"; }
.np-quote cite { font-style: normal; font-family: var(--font-display); font-weight: 700; font-size: clamp(11.5px, 0.8vw, 14px); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-500); }

/* the next story, at the foot: press it, or just scroll down */
.np-next { flex: none; display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 6px 14px; border: 0; background: var(--surface-2); text-align: left; cursor: pointer; transition: background var(--t-micro), transform var(--t-micro) var(--ease-out); }
.np-next:hover { background: var(--paper); }
.np-next:active { transform: scale(0.99); }
.np-next span { flex: none; font-family: var(--font-display); font-weight: 600; font-size: clamp(11px, 0.78vw, 13.5px); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-500); }
.np-next b { flex: 1 1 auto; min-width: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(13px, 0.95vw, 17px); color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-next svg { width: 16px; height: 16px; flex: none; animation: np-nudge 1.8s var(--ease-std) infinite; }
@keyframes np-nudge { 0%, 70%, 100% { transform: none; } 80% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .np-next svg { animation: none; } }
.np-next.is-end { cursor: default; background: none; margin: 0; font-size: clamp(12px, 0.85vw, 15px); color: var(--ink-500); }

/* the mail reader */
.mail-row { gap: 2px; }
.mail-from { display: flex; align-items: baseline; gap: 8px; width: 100%; }
.mail-from i { font-style: normal; font-weight: 600; letter-spacing: 0.06em; color: var(--ink-500); }
.mail-from time { margin-left: auto; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-500); white-space: nowrap; }
.mail-preview { width: 100%; font-size: clamp(12.5px, 0.85vw, 15px); color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.detail-inbox .split { flex: 1 1 auto; min-height: 0; }
.mail { --fit: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding-right: clamp(6px, 0.8vw, 16px); animation: read-in 320ms var(--ease-out) both; }
.mail-head { display: grid; gap: 8px; padding-bottom: 12px; flex: none; }
.mail-label { justify-self: start; padding: 3px 8px 2px; background: var(--surface-ink); font-family: var(--font-display); font-weight: 700; font-size: clamp(11px, 0.76vw, 13.5px); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-900); }
.mail-subject-line { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 2vw, 38px); line-height: 1.05; color: var(--ink-900); text-wrap: balance; }
.mail-meta { flex: none; display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--press-rule); border-bottom: 1px solid var(--press-rule); }
.mail-avatar {
  display: grid; place-items: center; flex: none; width: clamp(40px, 3vw, 52px); aspect-ratio: 1; background: var(--c1); color: var(--c2);
  font-family: var(--font-display); font-weight: 700; font-size: clamp(16px, 1.15vw, 21px); letter-spacing: 0.04em;
}
.mail-meta-text { display: grid; gap: 2px; min-width: 0; }
.mail-sender { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.mail-sender b { font-size: clamp(14.5px, 1vw, 18px); font-weight: 600; color: var(--ink-900); }
.mail-address { font-size: clamp(12.5px, 0.85vw, 15px); color: var(--ink-500); overflow-wrap: anywhere; }
.mail-to { font-size: clamp(12.5px, 0.85vw, 15px); color: var(--ink-500); }
.mail-time { margin-left: auto; align-self: flex-start; font-size: clamp(12.5px, 0.85vw, 15px); font-weight: 600; color: var(--ink-500); white-space: nowrap; }
.mail-sheet { flex: 0 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; margin-top: clamp(12px, 1.8vh, 20px); padding: clamp(14px, 1.6vw, 28px) clamp(16px, 1.8vw, 34px); background: var(--paper); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08), 0 8px 22px -14px rgba(16, 24, 40, 0.3); max-width: 780px; }
/* the letter larger and bold (the user, round 5): read at a glance, like a short note */
.mail-sheet p { margin: 0 0 0.85em; max-width: 64ch; font-size: calc(clamp(17px, 1.2vw, 22px) * var(--fit)); line-height: 1.5; font-weight: 600; color: var(--ink-900); }
.mail-sheet .mail-signoff { margin-top: 1.2em; }
.mail-sig { display: flex; align-items: center; gap: 12px; margin-top: 4px; padding-top: 10px; border-top: 3px solid var(--c1); }
.mail-sig-crest .crest { display: block; width: 34px; height: auto; aspect-ratio: 40 / 46; }
.mail-sig-text { display: grid; gap: 1px; font-size: calc(clamp(13px, 0.9vw, 16px) * var(--fit)); color: var(--ink-500); }
.mail-sig-text b { font-weight: 600; color: var(--ink-900); }
@keyframes read-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .np, .mail { animation: none; } }

@media (max-height: 520px) {
  .nc-byline { display: none; }
  .dcard-news .nc-source { font-size: 11px; }
  .np-site { padding: 4px 10px; gap: 8px; }
  .np-logo-name, .look-red-top .np-logo-name, .look-black-top .np-logo-name { font-size: 18px; }
  .look-wire .np-logo-name, .look-club .np-logo-name { font-size: 15px; }
  .np-logo-crest .crest { width: 20px; }
  .np-crumbs { display: none; }
  .np-date { font-size: 10px; }
  .np-main { gap: 5px; padding: 8px 10px 6px; }
  .news-split { grid-template-columns: minmax(0, 32fr) minmax(0, 68fr); }
  /* on a phone the list and a swipe up are the way to the next story: the bar's room goes to the story */
  .np-next { display: none; }
  /* the phone gives the story the room: the quote is read where it stands in the text */
  /* the standfirst is on the Dashboard's card already; on a phone its lines go to the story */
  .np-quote, .np-aside, .np-standfirst { display: none; }
  .np-body.has-aside { grid-template-columns: minmax(0, 1fr); }
  .np-headline, .look-red-top .np-headline, .look-black-top .np-headline { font-size: calc(17px * var(--fit)); }
  .np-standfirst { font-size: calc(11.5px * var(--fit)); }
  .np-byline { gap: 6px; padding-top: 5px; }
  .np-by-avatar { width: 22px; height: 22px; font-size: 10px; }
  .np-byline b { font-size: 10.5px; }
  .np-byline b + span { font-size: 9.5px; }
  .np-body p { font-size: calc(12px * var(--fit)); line-height: 1.45; margin-bottom: 0.6em; }
  .np-quote { padding-left: 10px; border-left-width: 3px; margin-bottom: 0.6em; }
  .np-quote p { font-size: calc(13px * var(--fit)); }
  .np-quote cite { font-size: 9px; }
  .mail-preview, .mail-from i { display: none; }
  .mail-head { gap: 3px; padding-bottom: 5px; }
  .mail-label { font-size: 9px; }
  .mail-subject-line { font-size: 16px; }
  .mail-meta { gap: 8px; padding: 5px 0; }
  .mail-avatar { width: 28px; font-size: 11px; }
  .mail-sender b { font-size: 12px; }
  .mail-address, .mail-to, .mail-time { font-size: 10px; }
  .mail-sheet { margin-top: 6px; padding: 8px 12px; }
  .mail-sheet p { font-size: calc(13.5px * var(--fit)); line-height: 1.4; margin-bottom: 0.55em; }
  .mail-sig { padding-top: 5px; gap: 8px; }
  .mail-sig-crest .crest { width: 22px; }
  .mail-sig-text { font-size: calc(10px * var(--fit)); }
  .mail-sig .mail-address { display: none; }
  /* a phone's room goes to the letter: the label, the "to" line and the signature's club line are said elsewhere */
  .mail-label, .mail-to, .mail-sig-text span:nth-of-type(2) { display: none; }
  .np-byline b + span { display: none; }
  .np-byline { padding-top: 3px; }
  .mail-sheet .mail-signoff { margin-top: 0.6em; }

  /* nothing cut off on a phone (the user): names wrap to two lines rather than lose their ends */
  .dash-match .mc-name { white-space: normal; overflow: visible; text-overflow: clip; font-size: 12px; line-height: 1.05; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
  .sentiment-card .card-face { flex-wrap: wrap; row-gap: 0; }
  .s-words { white-space: normal; font-size: 11px; }
  .s-line { gap: 5px; }
  .dt-name { letter-spacing: 0; font-size: 10px; text-overflow: clip; }
}

/* --- B13 round 5 (the user): let the pitch breathe, and give each page its own size ------------------------------
   The Dashboard is 80 % of the room below the bar in both directions, centred, so the stadium shows on every side.
   A card's page takes that same frame at most, and only what it needs inside it: the table and the calendar are
   as tall as their rows and as wide as their columns; the news and the inbox, which read, keep the full frame.
   Landscape phones get 90 %: at 80 % a 390-pixel-tall screen would leave the Dashboard too small to read. */
/* The frame: the bar and the cards are one block, 80 % of the screen, centred on the pitch; the bar sits directly
   on the cards (the user), its left edge on theirs, the 27 on their right edge. The bar holds that place on every
   page, so it never moves under the manager's eye (the user: "I shouldn't see the navbar adjust"). */
:root.in-career {
  --frame-x: 10vw;
  --frame-y: 8vh;
  --bar-top: var(--frame-y);
}
:root.in-career .career-bar { left: var(--frame-x); right: var(--frame-x); }
/* a card's page has no bar (the user): the bar fades away and the page rises into its place */
.career-bar { transition: opacity var(--t-fast) var(--ease-std), visibility 0s linear 0s; }
:root[data-career-detail] .career-bar { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--t-fast) var(--ease-std), visibility 0s linear var(--t-fast); }
:root[data-career-detail] .career-page[data-page="dashboard"] { top: 0; padding-top: var(--frame-y); }
/* the Game Plan (the Squad page) keeps to the same frame: its board and panels start where the bar does */
:root.in-career { --pad: var(--frame-x); }
.career-page[data-page="dashboard"] { padding: clamp(8px, 1.2vh, 14px) var(--frame-x) var(--frame-y); }
/* the two pages that are read, the news and the inbox, reach nearer the foot of the screen: a story needs the lines */
.career-page[data-page="dashboard"]:has(.detail-news, .detail-inbox) { padding-bottom: clamp(12px, 3vh, 32px); }
.news-split { grid-template-columns: minmax(0, 26fr) minmax(0, 74fr); }
/* the match card is as tall as its content (the fixed share hid the names under the date on shorter screens) */
.dash-grid { grid-template-rows: auto auto minmax(0, 1fr) auto; }

/* the News card sets its type by its own size, so a headline is never sliced mid-line */
.dcard-news .nc-viewport { container-type: size; container-name: news; }
.nc-slide { justify-content: safe center; }
.dcard-news .nc-headline { font-size: clamp(16px, min(10cqh, 4.6cqw), 46px); }
.dcard-news .nc-standfirst { font-size: clamp(11px, min(4.6cqh, 2.2cqw), 18.5px); }
.dcard-news .nc-slide { gap: clamp(4px, 3cqh, 16px); padding-block: clamp(4px, 3cqh, 22px); }
@container news (max-height: 190px) { .nc-byline { display: none; } .nc-standfirst { -webkit-line-clamp: 1; line-clamp: 1; } }

/* the calendar card shows only whole fixtures: as many as its height holds */
.dash-calendar .card-face { container-type: size; container-name: calendar; }
.dcal { grid-auto-rows: auto; overflow: hidden; }
@container calendar (max-height: 260px) { .dcal-item:nth-child(n + 3) { display: none; } }
@container calendar (max-height: 200px) { .dcal-item:nth-child(n + 2) { display: none; } }

.dash-detail { display: flex; justify-content: center; align-items: flex-start; }
/* a column flex box: its max-height is honoured by its face, which a percentage max-height on an auto-height parent is not */
.detail-card { height: auto; max-height: 100%; width: 100%; display: flex; flex-direction: column; }
.detail-card .card-face { flex: 0 1 auto; height: auto; min-height: 0; width: 100%; }
.detail-news, .detail-inbox { height: 100%; }
.detail-news .card-face, .detail-inbox .card-face { height: 100%; }
/* the table is as wide as its columns: no empty run between a club's name and its numbers */
.detail-table { width: auto; max-width: 100%; }
.detail-calendar { width: min(100%, 858px); }

/* the table: compact, clearer, the clubs and their crests larger */
.detail-table .card-face { padding: clamp(10px, 1.1vw, 18px) clamp(12px, 1.2vw, 20px); }
.detail-table .detail-head, .detail-calendar .detail-head { padding-bottom: 8px; }
.detail-table .detail-body, .detail-calendar .detail-body { padding-top: 6px; }
/* 25 % larger than the first compact cut, both ways (the user): the columns are in em, so the type carries the width */
.ft-row { grid-template-columns: 1.8em 2em 12.5em repeat(6, 2.3em) 2.8em 2.8em 7.2em; gap: 5px; min-height: clamp(37px, 5.4vh, 52px); padding: 0 10px; font-size: clamp(16.9px, 1.22vw, 21px); }
/* the header keeps the rows' font size, so its em-wide columns line up with theirs; only its labels are small */
.ft-head { min-height: 32px; font-size: clamp(16.9px, 1.22vw, 21px); }
.ft-head > span { font-size: clamp(13.5px, 0.92vw, 16px); }
.ft-crest .crest { height: 1.75em; }
.ft-name { font-size: 1.14em; letter-spacing: 0.02em; }
.ft-pts { font-size: 1.14em; }
.form-chip { width: 1.35em; height: 1.35em; }

/* the calendar: the season in two columns of nine, read down then across (the phone's layout, which the user
   preferred on every screen) */
.cal { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(9, auto); grid-auto-flow: column; column-gap: clamp(14px, 1.6vw, 28px); }
.cal-row + .cal-row { border-top: 0; }
.cal-row { min-height: clamp(34px, 4.8vh, 50px); gap: 8px; padding: 0 8px; border-bottom: 1px solid rgba(16, 21, 31, 0.06); }

@media (max-height: 520px) {
  :root.in-career { --frame-x: 5vw; --frame-y: 6px; }
  .career-page[data-page="dashboard"] { padding: 6px var(--frame-x) 8px; }
  .detail-table { width: auto; }
  .detail-calendar { width: min(100%, 560px); }
  .detail-table .card-face, .detail-calendar .card-face { padding: 6px 10px; }
  .ft-row { min-height: 21px; font-size: 11.5px; grid-template-columns: 1.6em 1.7em 11.5em repeat(6, 2em) 2.4em 2.4em 6em; gap: 3px; padding: 0 6px; }
  .ft-head { min-height: 20px; font-size: 11.5px; }
  .ft-head > span { font-size: 9px; }
  .cal-row { min-height: 22px; font-size: 11px; gap: 6px; }
  .detail-calendar { width: 100%; }
}

/* --- B13 round 6 (the user): the table and the calendar as big as the Dashboard ----------------------------------
   Both pages fill the frame. Their rows share its height and their type is sized by the page itself (container
   units), as large as the width allows: the table's columns are in em, so the type sets the table's width; the
   calendar's two columns of nine the same. On a phone the same rule gives the phone's size. */
.detail-table, .detail-calendar { width: 100%; height: 100%; }
.detail-table .card-face, .detail-calendar .card-face { height: 100%; }
.detail-table .detail-body, .detail-calendar .detail-body { container-type: size; display: flex; flex-direction: column; overflow: hidden; }
.ft { flex: 1 1 auto; min-height: 0; grid-template-rows: auto repeat(10, minmax(0, 1fr)); justify-content: center; }
.ft-row, .ft-head { min-height: 0; font-size: clamp(11px, min(4.4cqh, 2.05cqw), 28px); }
.ft-head { padding-bottom: 0.3em; }
.ft-head > span { font-size: 0.72em; }
.cal { flex: 1 1 auto; min-height: 0; grid-template-rows: repeat(9, minmax(0, 1fr)); }
.cal-row { min-height: 0; font-size: clamp(11px, min(4.6cqh, 1.8cqw), 26px); grid-template-columns: 1.5em 4.9em 1.3em 1.6em minmax(0, 1fr) 3.3em; gap: 0.5em; }
.cal-result { white-space: nowrap; }
.cal-row .cal-date, .cal-row .cal-name, .cal-row .cal-result, .cal-row .dcal-ha { font-size: 1em; }
.cal-row .dcal-ha { font-size: 0.78em; }
.cal-row .dcal-crest .crest { height: 1.5em; }
.cal-window { flex: none; }

/* --- the frames B16 and B18 fill ------------------------------------------------------------------ */
.frame-page { position: absolute; left: var(--pad); right: var(--pad); top: clamp(24px, 5vh, 64px); }
.frame-page .display-title { font-size: clamp(40px, 4vw, 76px); }
.frame-line { display: inline-block; margin: 16px 0 0; padding: 10px 14px; font-size: 15px; color: var(--ink-500); }

.slot-error { display: block; margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--ink-900); }

/* --- landscape phones (short viewports) ----------------------------------------------------------- */
@media (max-height: 520px) {
  :root { --tab-h: 44px; --bar-top: 6px; }
  .career-bar { gap: 6px; }
  .bar-club { padding: 0 10px 0 6px; gap: 6px; }
  .bar-club-text b { font-size: 15px; }
  .bar-club-text span { display: none; }
  .bar-room { padding: 0 10px 0 8px; gap: 6px; }
  /* a phone's bar has no room for the club's name beside the room chip: the crest names the club */
  .career-bar:has(.bar-room:not([hidden])) .bar-club-text { display: none; }
  .room-text small { display: none; }
  .room-band { font-size: 14px; margin-top: 0; }
  .bar-tab { font-size: 16px; padding: 0 clamp(9px, 1.6vw, 16px); letter-spacing: 0.04em; }
  .match-card .card-face { padding: 12px 16px; }
  .mc-teams { padding: 4px 0; }
  .mc-crest .crest { width: 50px; }
  .mc-name { font-size: 18px; margin-top: 6px; }
  .mc-place, .mc-when span { font-size: 11.5px; }
  .mc-eyebrow { font-size: 13px; }
  .mc-round { font-size: 12px; }
  .mc-when b { font-size: 15px; }
  .mc-advance { height: 46px; font-size: 16px; padding: 0 18px; }
  .frame-page { top: 14px; }
  .frame-page .display-title { font-size: 34px; }
  .frame-line { font-size: 13px; }
}
@media (max-height: 520px) and (max-width: 760px) { .bar-club-text { display: none; } }

/* --- the Game Plan as the Squad page on a landscape phone ------------------------------------------
   Under the bar the board is ~20 % shorter than the standalone Game Plan's, so on short viewports the hosted Game
   Plan tightens its own chrome (a slimmer fused nav, smaller type) to give the board back what it can. Scoped to
   the career: the standalone tools/gameplan.html is untouched. */
@media (max-height: 520px) {
  :root.in-career { --nav-top: calc(var(--shell-h) + 6px); --nav-h: 34px; --stage-bottom: 8px; --foot-h: 30px; --pad: var(--frame-x); }
  .in-career .nav-tab { font-size: 12px; letter-spacing: 0; }
  .in-career .sphere-name { font-size: clamp(11px, calc(var(--sphere) * 0.46), 14px); letter-spacing: 0.03em; }
  .in-career .squad-empty { font-size: 13px; padding: 8px 12px; gap: 8px; }
  .in-career .squad-actions .btn { height: 44px; font-size: 15px; padding: 0 14px; }
  .in-career .foot { font-size: 11.5px; gap: 10px; }
}

/* ==========================================================================================
   B13-b: the Squad hub (the user, from FIFA 18's SQUAD tab) -- the Dashboard's cards and frame:
     Game Plan: the eleven on a tilted board | Youth Academy
                                             | Squad Hub
   Each card opens its page with no bar; the Game Plan card opens the Game Plan itself.
   ========================================================================================== */
.career-page[data-page="squad"] { padding: clamp(8px, 1.2vh, 14px) var(--frame-x) var(--frame-y); }
:root[data-career-detail] .career-page[data-page="squad"] { top: 0; padding-top: var(--frame-y); }
.squad-grid {
  --gap: clamp(10px, 1.1vw, 20px);
  height: 100%; display: grid; gap: var(--gap);
  grid-template-columns: minmax(0, 54fr) minmax(0, 46fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "plan academy" "plan hub";
  perspective: 1800px; perspective-origin: 40% 10%;
}
.squad-plan { grid-area: plan; }
.squad-academy { grid-area: academy; }
.squad-hub { grid-area: hub; }
.squad-grid.is-entering .card { animation: card-rise 900ms var(--ease-out) calc(140ms + var(--d, 0) * 100ms) backwards; }

/* --- the Game Plan card: the eleven standing on a tilted board ------------------------------------------ */
.gp-meta { flex: none; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: clamp(4px, 0.8vh, 10px); }
.gp-shape { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 2.2vw, 42px); letter-spacing: 0.03em; text-transform: uppercase; line-height: 1; color: var(--ink-900); }
.gp-rating { display: flex; align-items: baseline; gap: 8px; }
.gp-rating small { font-family: var(--font-display); font-weight: 700; font-size: clamp(11px, 0.8vw, 15px); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-500); }
.gp-rating b { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 2.2vw, 42px); line-height: 1; color: var(--ink-900); }
.gp-board { position: relative; flex: 1 1 auto; min-height: 0; margin-top: clamp(4px, 1vh, 12px); perspective: 1100px; perspective-origin: 50% 0%; container-type: size; }
/* B13-c: the Game Plan's own 3D board (Board3D), filling the card's board area */
.gp-board .pitch.gp-mini3d { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
.gp-c { display: inline-grid; place-items: center; min-width: 1.25em; height: 1.25em; padding: 0 0.2em; background: var(--dark); color: var(--paper); font-family: var(--font-display); font-style: normal; font-weight: 700; font-size: 0.72em; letter-spacing: 0; }
.gp-c.is-vice { background: var(--ink-300); }

/* --- the Youth Academy and Squad Hub cards --------------------------------------------------------------- */
.squad-academy .dcard-body, .squad-hub .dcard-body { container-type: size; }
.sq-list { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; min-height: 0; display: grid; grid-auto-rows: minmax(0, 1fr); }
.sq-item {
  display: grid; grid-template-columns: 3.1em minmax(0, 1fr) auto 2.2em; align-items: center; gap: 0.7em; padding: 0 0.4em;
  font-size: clamp(12px, min(7cqh, 3.6cqw), 20px); color: var(--ink-700); min-height: 0; overflow: hidden;
}
.sq-item + .sq-item { border-top: 1px solid rgba(16, 21, 31, 0.07); }
.sq-pos {
  display: inline-grid; place-items: center; height: 1.6em; padding: 0 0.3em; background: var(--surface-ink);
  font-family: var(--font-display); font-weight: 700; font-size: 0.8em; letter-spacing: 0.06em; color: var(--ink-900);
}
.sq-name { font-weight: 600; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sq-age { font-weight: 500; color: var(--ink-500); }
.sq-mood { font-size: 1.05em; line-height: 1; }
.sq-ovr { font-family: var(--font-display); font-weight: 700; font-size: 1.25em; text-align: right; color: var(--ink-900); }
.sq-foot { flex: none; margin: 4px 0 0; font-size: clamp(11.5px, 0.8vw, 15px); font-weight: 600; color: var(--ink-500); }
.sq-stats {
  flex: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6em; padding: clamp(4px, 0.9vh, 10px) 0.4em clamp(4px, 0.9vh, 10px);
  border-bottom: 1px solid rgba(16, 21, 31, 0.08); font-size: clamp(12px, min(7cqh, 3.4cqw), 20px);
}
.sq-stats span { display: flex; flex-direction: column; min-width: 0; }
.sq-stats small { font-family: var(--font-display); font-weight: 700; font-size: 0.62em; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500); }
.sq-stats b { font-family: var(--font-display); font-weight: 700; font-size: 1.3em; line-height: 1.05; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-facts { grid-template-columns: auto auto minmax(0, 1fr); gap: 0.6em 1.4em; margin-bottom: 0.2em; }
.ac-path b { font-family: var(--font-ui); font-weight: 600; font-size: 0.82em; line-height: 1.25; white-space: normal; }
.ac-stars { display: flex; gap: 3px; align-items: center; height: 1.05em; }
.ac-stars i { width: 0.62em; height: 0.62em; background: rgba(16, 21, 31, 0.14); transform: rotate(45deg); }
.ac-stars i.is-on { background: var(--ink-900); }
@container (max-height: 150px) { .sq-list .sq-item:nth-child(n + 3) { display: none; } }
@container (max-height: 100px) { .sq-list .sq-item:nth-child(n + 2) { display: none; } .sq-foot { display: none; } }

/* --- A7: the dressing room's card (the Squad Hub card's head; the Squad Hub page's first block) ------------ */
.room-card {
  flex: none; display: grid; align-items: center; column-gap: 0.7em;
  grid-template-columns: auto auto auto minmax(0, 1fr);
  padding: clamp(4px, 0.9vh, 10px) 0.4em; border-bottom: 1px solid rgba(16, 21, 31, 0.08);
  font-size: clamp(12px, min(7cqh, 3.4cqw), 20px); color: var(--ink-700);
}
.room-big-emoji { font-size: 2.3em; line-height: 1; filter: drop-shadow(0 2px 2px rgba(16, 24, 40, 0.16)); }
.room-score { display: flex; align-items: baseline; gap: 0.12em; }
.room-score b { font-family: var(--font-display); font-weight: 700; font-size: 2.6em; line-height: 0.86; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.room-score small { font-family: var(--font-display); font-weight: 600; font-size: 0.9em; color: var(--ink-500); }
.room-words { display: flex; flex-direction: column; line-height: 1; padding-right: 0.3em; }
.room-words small { font-family: var(--font-display); font-weight: 700; font-size: 0.62em; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500); }
.room-words b { font-family: var(--font-display); font-weight: 700; font-size: 1.35em; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-900); margin-top: 0.15em; }
.room-lines { display: flex; flex-direction: column; min-width: 0; padding-left: 0.8em; border-left: 1px solid rgba(16, 21, 31, 0.1); }
.room-drivers { font-weight: 500; font-size: 0.82em; color: var(--ink-500); margin-top: 0.2em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.room-facts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.4em 1.8em; margin-top: 0.7em; padding-top: 0.6em; border-top: 1px solid rgba(16, 21, 31, 0.06); }
.room-fact { display: flex; align-items: baseline; gap: 0.45em; min-width: 0; }
.room-fact small { font-family: var(--font-display); font-weight: 700; font-size: 0.72em; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500); }
.room-fact b { font-family: var(--font-display); font-weight: 700; font-size: 1.15em; color: var(--ink-900); }
.room-fact i { font-style: normal; font-family: var(--font-display); font-weight: 700; color: var(--form-loss); }
.room-card.is-full { font-size: clamp(13px, 1.05vw, 21px); padding: 0.6em 0.6em 0.8em; margin-bottom: 0.4em; background: rgba(255, 255, 255, 0.55); }
@container (max-height: 190px) { .squad-hub .room-drivers { display: none; } }

/* --- the two pages: the academy and the squad, filling the frame ----------------------------------------- */
.detail-academy, .detail-hub { width: 100%; height: 100%; }
.detail-academy .card-face, .detail-hub .card-face { height: 100%; }
.detail-academy .detail-head, .detail-hub .detail-head { flex-wrap: wrap; row-gap: 6px; }
.sq-summary { margin-left: auto; display: flex; flex-wrap: wrap; gap: 4px clamp(12px, 1.3vw, 24px); font-size: clamp(12.5px, 0.9vw, 17px); font-weight: 500; color: var(--ink-500); }
.sq-summary b { font-family: var(--font-display); font-weight: 700; font-size: 1.2em; color: var(--ink-900); }

.ac-row, .sh-row { display: grid; align-items: center; gap: 0.7em; padding: 0 0.6em; min-height: 2.5em; font-size: clamp(12.5px, 1vw, 19px); color: var(--ink-700); border-bottom: 1px solid rgba(16, 21, 31, 0.06); }
.ac-head, .sh-head {
  position: sticky; top: 0; z-index: 1; min-height: 2.2em; background: rgba(244, 246, 249, 0.97);
  font-family: var(--font-display); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-500);
}
.ac-head > span, .sh-head > span, .sh-sort { font-size: 0.78em; }
.ac-row { grid-template-columns: 3.4em minmax(9em, 1.3fr) 2.6em 7.5em 2.8em minmax(0, 2.2fr) 5em; }
.ac-name, .sh-name { display: flex; align-items: center; gap: 0.4em; font-weight: 600; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ac-nat { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-ovr, .sh-ovr { font-family: var(--font-display); font-weight: 700; font-size: 1.2em; color: var(--ink-900); }
.ac-scout { font-style: italic; color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-status, .sh-status { font-size: 0.85em; font-weight: 600; color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sh-row { grid-template-columns: 2em 3.4em minmax(9em, 1.6fr) 2.4em 2.6em 2.4em 2.6em 2.6em 2.6em 5.6em 4.8em 5.6em 4.8em minmax(0, 1fr); }
.sh-row.is-out { color: var(--ink-300); }
.sh-row.is-out .sh-status { color: var(--form-loss); }
.sh-num { color: var(--ink-500); }
.sh-mood { line-height: 1; }
.sh-role { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-money { white-space: nowrap; }
.is-expiring { color: var(--form-loss); font-weight: 700; }
.sh-tag { font-style: normal; font-family: var(--font-display); font-weight: 700; font-size: 0.72em; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.1em 0.35em; background: var(--accent-soft); color: var(--accent-ink); }
.sh-sort { border: 0; background: transparent; padding: 0; min-height: 44px; text-align: left; cursor: pointer; font: inherit; font-size: 0.78em; letter-spacing: inherit; text-transform: inherit; color: var(--ink-500); }
.sh-sort:hover, .sh-sort.is-on { color: var(--ink-900); }
.sh-sort.is-on { box-shadow: inset 0 -3px 0 var(--accent); }
.sh-group {
  padding: 0.9em 0.6em 0.3em; font-family: var(--font-display); font-weight: 700; font-size: clamp(12px, 0.85vw, 16px);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-900); border-bottom: 2px solid var(--ink-900);
}

/* --- the Game Plan as the Squad card's page: no bar, the Game Plan takes its room; "Squad" at the top right --- */
:root[data-career-detail="gameplan"] { --shell-h: max(0px, calc(var(--frame-y) - 10px)); }
.gp-back { position: fixed; z-index: 31; right: var(--pad); top: var(--nav-top); height: var(--nav-h); min-height: 44px; }

@media (max-height: 520px) {
  .career-page[data-page="squad"] { padding: 6px var(--frame-x) 8px; }
  .squad-grid { --gap: 7px; }
  .gp-meta { padding-top: 2px; }
  .gp-shape, .gp-rating b { font-size: 18px; }
  .gp-rating small { font-size: 10px; }
  .gp-board { margin-top: 2px; }

  .sq-item { font-size: 11.5px; gap: 0.5em; }
  .sq-stats { font-size: 11px; padding: 3px 0.3em; }
  .room-card { font-size: 11px; padding: 3px 0.3em; }
  .room-card .room-big-emoji { font-size: 2em; }
  .room-card .room-score b { font-size: 2.2em; }
  .room-card.is-full { font-size: 11.5px; padding: 6px 8px; }
  .room-card .room-words small { display: none; }
  .ac-row, .sh-row { font-size: 11.5px; min-height: 30px; gap: 0.5em; }
  .sh-wide { display: none; }
  .sh-row { grid-template-columns: 1.8em 3.2em minmax(8em, 1.6fr) 2.2em 2.4em 2.2em 5em 4.4em 4.8em minmax(0, 1fr); }
  .ac-row { grid-template-columns: 3.2em minmax(8em, 1.3fr) 2.2em 6em 2.4em minmax(0, 2fr) 4em; }
  .sq-summary { font-size: 11.5px; }
}
/* B13-c: on a phone the Game Plan's tabs sit in the right column's top row; "Squad" becomes a compact back arrow
   at its end, so it never covers a tab */
@media (max-height: 520px) {
  :root[data-career-detail="gameplan"] .nav { right: calc(var(--pad) + 50px); }
  .gp-back { top: 6px; height: var(--nav-h); min-height: 38px; width: 44px; padding: 0; gap: 0; justify-content: center; font-size: 0; }
  .gp-back svg { width: 20px; height: 20px; }
}

/* B13-c round 4 (the user): the Squad Hub's list scrolls with an elegant, modern scrollbar -- thin, square, a quiet ink
   thumb that darkens under the pointer, no track (the rest of the career keeps its scrollbars hidden) */
/* Chrome and Safari draw the styled scrollbar below; the standard properties (which override it there) are Firefox's */
.career :is(.detail-hub, .detail-academy) .detail-body { scrollbar-width: auto; padding-right: 6px; }
@supports (-moz-appearance: none) {
  .career :is(.detail-hub, .detail-academy) .detail-body { scrollbar-width: thin; scrollbar-color: rgba(16, 21, 31, 0.3) transparent; }
  .career :is(.detail-hub, .detail-academy) .detail-body:hover { scrollbar-color: rgba(16, 21, 31, 0.5) transparent; }
}
/* the column header stays solid over the rows scrolling beneath it */
.career .sh-head, .career .ac-head { background: var(--paper-2); z-index: 2; box-shadow: 0 1px 0 rgba(16, 21, 31, 0.08); }
.career :is(.detail-hub, .detail-academy) .detail-body::-webkit-scrollbar { display: block; width: 10px; }
.career :is(.detail-hub, .detail-academy) .detail-body::-webkit-scrollbar-track { background: transparent; }
.career :is(.detail-hub, .detail-academy) .detail-body::-webkit-scrollbar-thumb {
  background: rgba(16, 21, 31, 0.26); border: 3px solid transparent; background-clip: padding-box; min-height: 40px;
}
.career :is(.detail-hub, .detail-academy) .detail-body::-webkit-scrollbar-thumb:hover { background-color: rgba(16, 21, 31, 0.5); }
.career :is(.detail-hub, .detail-academy) .detail-body::-webkit-scrollbar-thumb:active { background-color: var(--accent); }

/* =====================================================================================================
   B14: THE CONVERSATION -- the man-management surface (the user chose composition A and asked for it
   modern: the scene takes the whole frame, a broadcast slab in his kit, his name set large behind him,
   the question word by word, hold to decide, the reply and consequence landing in place). Sized in one
   unit, --u: a hundredth of the width on a 16:9 screen, held by the height on a wider one.
   ===================================================================================================== */
.bar-notes {
  all: unset; box-sizing: border-box; cursor: pointer; margin-left: auto; display: flex; align-items: center; gap: 10px;
  padding: 0 clamp(12px, 1.1vw, 20px); background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(var(--blur));
  font-family: var(--font-display); font-weight: 700; font-size: clamp(14px, 1vw, 19px); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-700);
  transition: background var(--t-fast) var(--ease-std), transform var(--t-micro);
}
.bar-notes b { min-width: 1.6em; height: 1.6em; display: grid; place-items: center; background: var(--surface-ink); color: var(--ink-500); font-size: 0.9em; letter-spacing: 0; }
.bar-notes.has-count { background: var(--dark); color: var(--paper); }
.bar-notes.has-count b { background: var(--paper); color: var(--ink-900); }
.bar-notes:hover { background: var(--paper); color: var(--ink-900); }
.bar-notes.has-count:hover { background: var(--ink-700); color: var(--paper); }
.bar-notes:active { transform: scale(0.97); }
.bar-notes:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-height: 520px) { .bar-notes-label { display: none; } .bar-notes { padding: 0 10px; } }

.dash-ask {
  position: fixed; z-index: 45; left: 50%; bottom: calc(var(--frame-y) + 12px); transform: translateX(-50%);
  display: flex; align-items: center; gap: clamp(14px, 1.4vw, 28px); padding: clamp(12px, 1.2vw, 20px) clamp(16px, 1.6vw, 28px);
  background: var(--surface-strong); box-shadow: var(--shadow-2); animation: mm-rise var(--t-page) var(--ease-out) both;
}
.dash-ask p { margin: 0; font-size: clamp(14px, 1vw, 18px); color: var(--ink-500); }
.dash-ask p b { color: var(--ink-900); font-weight: 600; }
.dash-ask-row { display: flex; gap: 8px; }
.dash-ask-go { all: unset; cursor: pointer; font-family: var(--font-display); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-700); padding: 0 16px; min-height: 44px; display: grid; place-items: center; }
.dash-ask-go:hover { color: var(--ink-900); background: var(--surface-ink); }
@keyframes mm-rise { from { opacity: 0; transform: translate(-50%, 14px); } }

.mm {
  position: fixed; inset: 0; z-index: 60; overflow: hidden; isolation: isolate; container-type: size; user-select: none;
  background: var(--paper-2);
}
.mm > * { --u: min(1cqw, 1.7778cqh); }
.mm-bg { position: absolute; inset: -3%; /* a small pre-softened copy: the full 2752 px photo, blurred live, cost a phone ~17 MB and a full-screen filter pass */
  background: url("../stadium/night-stadium-soft.jpeg") center 62% / cover no-repeat; }
.mm-veil { position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(245, 247, 250, 0.30) 0%, rgba(245, 247, 250, 0.18) 34%, rgba(245, 247, 250, 0.80) 50%, rgba(245, 247, 250, 0.94) 64%, rgba(245, 247, 250, 0.97) 100%),
  linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 40%),
  linear-gradient(0deg, rgba(24, 56, 36, 0.34) 0%, rgba(24, 56, 36, 0) 30%); }
.mm-slab { position: absolute; left: -6%; top: 0; bottom: 0; width: 52%;
  background: linear-gradient(160deg, var(--k1) 0%, color-mix(in srgb, var(--k1) 70%, black) 100%);
  clip-path: polygon(0 0, 78% 0, 58% 100%, 0 100%); opacity: 0.92; }
.mm-slab::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 50% at 30% 30%, rgba(255, 255, 255, 0.28), transparent 70%); }
.mm-slash { position: absolute; inset: 0; background: var(--k2); clip-path: polygon(35.6% 0, 36.5% 0, 26.2% 100%, 25.3% 100%); opacity: 0.9; }
.mm-edge { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.75); clip-path: polygon(37.4% 0, 37.7% 0, 27.4% 100%, 27.1% 100%); }
.mm-crest { position: absolute; left: 4%; top: 12%; width: calc(30 * var(--u)); height: calc(36 * var(--u)); opacity: 0.16; background: var(--paper); clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%); }

.mm-hud { position: absolute; left: 3.2%; right: 3.2%; top: 4.4%; display: flex; align-items: center; gap: calc(2 * var(--u)); z-index: 5; }
.mm-back { all: unset; cursor: pointer; display: flex; align-items: center; gap: calc(0.5 * var(--u)); min-height: 44px; box-sizing: border-box;
  font: 700 max(13px, calc(1.05 * var(--u))) var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper);
  background: rgba(16, 21, 31, 0.55); backdrop-filter: blur(10px); padding: 0 calc(1.1 * var(--u)) 0 calc(0.8 * var(--u)); transition: background var(--t-fast); }
.mm-back:hover { background: rgba(16, 21, 31, 0.8); }
.mm-back svg { width: max(12px, var(--u)); height: max(12px, var(--u)); }
.mm-back:focus-visible, .mm-later:focus-visible, .mm-next:focus-visible, .mm-hold:focus-visible, .mm-about:focus-visible, .mm-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mm-queue { display: flex; align-items: center; gap: calc(0.8 * var(--u)); color: var(--paper); font: 700 max(12px, calc(1.05 * var(--u))) var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35); }
.mm-pips { display: flex; gap: calc(0.3 * var(--u)); }
.mm-pips i { width: calc(2.2 * var(--u)); height: max(3px, calc(0.3 * var(--u))); background: rgba(255, 255, 255, 0.45); }
.mm-pips i.on { background: var(--paper); }
.mm-when { margin-left: auto; text-align: right; font: 500 max(12px, var(--u)) / 1.35 var(--font-ui); color: var(--ink-500); }
.mm-when b { display: block; font: 700 max(12px, calc(1.05 * var(--u))) var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-900); }

.mm-person { position: absolute; left: 5.5%; top: 15%; width: 34%; z-index: 3; }
.mm-pieces { position: relative; height: calc(17.5 * var(--u)); display: flex; align-items: flex-start; }
.mm-slot { position: relative; --sphere: calc(15 * var(--u)); width: var(--sphere); height: calc(var(--sphere) * 1.18); margin-left: calc(5 * var(--u)); flex: none; }
.mm-slot.is-pair { --sphere: calc(9.5 * var(--u)); margin-left: 0; }
/* two people take less height, so both their rows in "What you know" fit beneath them */
.mm-pieces:has(.is-pair) { height: calc(12.5 * var(--u)); }
.mm-id.is-pair { margin-top: calc(0.6 * var(--u)); }
.mm-sphere { left: 50%; top: 42%; cursor: default; transition: none; }
.mm-sphere:hover { --lift: 0px; --scale: 1; }
.mm-sphere .sphere-num { font-size: calc(var(--sphere) * 0.46); }
.mm-slot.is-suit .sphere-num { font-size: calc(var(--sphere) * 0.18); letter-spacing: 0.1em; }
.mm-floor-ring { position: absolute; left: -25%; width: 150%; bottom: -4%; height: 24%; overflow: visible; }
.mm-floor-ring ellipse { fill: none; stroke: rgba(255, 255, 255, 0.55); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.mm-tension { flex: none; width: calc(5.5 * var(--u)); height: calc(4 * var(--u)); margin-top: calc(2.4 * var(--u)); overflow: visible; }
.mm-tension path { fill: none; stroke: var(--paper); stroke-width: 2.4; stroke-linejoin: miter; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px var(--form-loss)); }
.mm-id { margin-top: calc(1.4 * var(--u)); color: var(--paper); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.25); }
.mm-first { font: 600 calc(1.5 * var(--u)) var(--font-display); letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.92; min-height: 1em; }
.mm-sur { font: 700 calc(5.2 * var(--u)) / 0.86 var(--font-display); letter-spacing: 0.02em; text-transform: uppercase; }
.mm-meta { font: 500 max(12px, calc(1.1 * var(--u))) var(--font-ui); margin-top: calc(0.5 * var(--u)); opacity: 0.95; }
.mm-id.is-pair .mm-sur { font-size: calc(3 * var(--u)); }
.mm-and { font: 700 calc(1.2 * var(--u)) var(--font-display); letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.8; margin: calc(0.3 * var(--u)) 0; }

/* A5 (ADR-069): the person's card -- his character, what stands out, his mood and his trust as five-step meters */
.mm-cards { margin-top: calc(1.4 * var(--u)); width: 92%; display: grid; gap: calc(0.5 * var(--u)); }
.mm-cards.is-pair { grid-template-columns: 1fr 1fr; }
.mm-card { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(16px); box-shadow: var(--shadow-1); padding: calc(1 * var(--u)) calc(1.2 * var(--u)); display: grid; gap: calc(0.55 * var(--u)); align-content: start; }
.mm-card.is-compact { padding: calc(0.8 * var(--u)) calc(0.9 * var(--u)); gap: calc(0.45 * var(--u)); }
.mm-card-name { font: 700 calc(1.25 * var(--u)) var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-900); }
.mm-char b { display: inline-block; font: 700 max(11px, calc(0.95 * var(--u))) var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper); background: var(--dark); padding: calc(0.2 * var(--u)) calc(0.55 * var(--u)); }
.mm-char span { display: block; margin-top: calc(0.35 * var(--u)); font: 500 max(12px, calc(1.08 * var(--u))) / 1.35 var(--font-ui); color: var(--ink-700); }
.mm-card.is-compact .mm-char b { font-size: max(10px, calc(0.82 * var(--u))); }
.mm-traits { display: flex; flex-wrap: wrap; gap: calc(0.3 * var(--u)); }
.mm-trait { font: 600 max(11px, calc(0.95 * var(--u))) var(--font-ui); color: var(--ink-900); background: var(--paper-2); padding: calc(0.18 * var(--u)) calc(0.55 * var(--u)); transition: background 0.4s, box-shadow 0.4s; }
.mm-trait.is-hinted { background: transparent; color: var(--ink-500); box-shadow: inset 0 0 0 1px var(--line); }
.mm-trait.is-unknown { color: var(--ink-300); background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }
.mm-trait.is-fresh { background: var(--paper); box-shadow: 0 0 0 2px var(--accent); }
.mm-quirks { font: 500 max(11px, calc(0.92 * var(--u))) var(--font-ui); color: var(--ink-500); margin-top: calc(-0.2 * var(--u)); }
.mm-meter { display: grid; grid-template-columns: calc(5.2 * var(--u)) auto 1fr; align-items: center; gap: calc(0.7 * var(--u)); }
.mm-meter-k { font: 700 max(10px, calc(0.86 * var(--u))) var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-300); }
.mm-bars { display: flex; gap: max(2px, calc(0.22 * var(--u))); }
.mm-bars i { width: max(6px, calc(0.95 * var(--u))); height: max(10px, calc(1.25 * var(--u))); background: var(--line); transform-origin: bottom; }
.mm-meter.is-1 .mm-bars i.on, .mm-meter.is-2 .mm-bars i.on { background: var(--form-loss); }
.mm-meter.is-3 .mm-bars i.on { background: var(--ink-500); }
.mm-meter.is-4 .mm-bars i.on, .mm-meter.is-5 .mm-bars i.on { background: var(--form-win); }
.mm-meter-v { font: 600 max(12px, calc(1.05 * var(--u))) var(--font-ui); color: var(--ink-900); display: flex; align-items: center; gap: calc(0.35 * var(--u)); min-width: 0; }
.mm-meter-v small { font-weight: 500; color: var(--ink-500); font-size: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-card.is-compact .mm-meter { grid-template-columns: calc(4.2 * var(--u)) 1fr; gap: calc(0.25 * var(--u)) calc(0.5 * var(--u)); }
.mm-card.is-compact .mm-meter-v { grid-column: 2; font-size: max(11px, calc(0.95 * var(--u))); }
.mm-role { font: 500 max(11px, calc(0.98 * var(--u))) var(--font-ui); color: var(--ink-500); border-top: 1px solid var(--surface-ink); padding-top: calc(0.5 * var(--u)); }
.mm-between { grid-column: 1 / -1; background: rgba(255, 255, 255, 0.9); box-shadow: var(--shadow-1); padding: calc(0.6 * var(--u)) calc(1 * var(--u)); font: 600 max(12px, calc(1.05 * var(--u))) var(--font-ui); color: var(--ink-900); display: flex; gap: var(--u); align-items: center; }
.mm-between span { font: 700 max(10px, calc(0.86 * var(--u))) var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-300); }
.mm-emo { font-size: calc(1.2 * var(--u)); line-height: 1; }
.mm-about { display: none; }

.mm-talk { position: absolute; left: 50%; right: 4.5%; top: 15%; bottom: 6%; z-index: 3; display: flex; flex-direction: column; }
.mm-kicker { display: flex; align-items: center; gap: calc(0.8 * var(--u)); font: 700 max(11px, var(--u)) var(--font-display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-500); }
.mm-tag { color: var(--paper); background: var(--dark); padding: calc(0.28 * var(--u)) calc(0.6 * var(--u)); }
.mm-moment { color: var(--ink-700); }
.mm-known { margin-left: auto; font-size: max(10px, calc(0.86 * var(--u))); padding: calc(0.22 * var(--u)) calc(0.55 * var(--u)); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink-500); }
.mm-known.is-public { color: var(--paper); background: var(--form-loss); box-shadow: none; }
.mm-known.is-leak { color: var(--ink-900); box-shadow: inset 0 0 0 1px var(--ink-500); }
.mm-q { margin: calc(1.1 * var(--u)) 0 0; font: 600 calc(2.35 * var(--u)) / 1.2 var(--font-ui); letter-spacing: -0.005em; color: var(--ink-900); text-wrap: balance; text-transform: none; }
.mm-rest { display: block; margin-top: calc(0.6 * var(--u)); font: 500 calc(1.45 * var(--u)) / 1.4 var(--font-ui); color: var(--ink-500); }
.mm-w { display: inline-block; white-space: pre; }
.mm-ask { display: contents; }
.mm.is-resolved .mm-ask { display: none; }
.mm-choices { margin-top: calc(1.5 * var(--u)); display: grid; gap: calc(0.55 * var(--u)); }
.mm-choice { all: unset; box-sizing: border-box; position: relative; display: grid; grid-template-columns: calc(2.6 * var(--u)) 1fr; gap: var(--u); align-items: start; min-height: 44px;
  padding: calc(0.95 * var(--u)) calc(1.2 * var(--u)) calc(0.95 * var(--u)) calc(0.9 * var(--u)); background: var(--surface-2); border-left: calc(0.3 * var(--u)) solid transparent; cursor: pointer;
  transition: background var(--t-fast) var(--ease-std), transform var(--t-fast) var(--ease-out), box-shadow var(--t-base), opacity var(--t-base), border-color var(--t-fast); }
.mm-choice:hover { background: rgba(255, 255, 255, 0.9); transform: translateX(calc(0.35 * var(--u))); }
.mm-choice:active { transform: translateX(calc(0.35 * var(--u))) scale(0.992); transition-duration: 70ms; }
.mm-choice:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mm-key { font: 700 calc(1.15 * var(--u)) / 1 var(--font-display); color: var(--ink-500); background: var(--paper); box-shadow: inset 0 calc(-0.14 * var(--u)) 0 var(--line); width: calc(2.6 * var(--u)); height: calc(2.6 * var(--u)); display: grid; place-items: center; }
.mm-choice-text { display: block; min-width: 0; }
.mm-stance { display: block; font: 700 max(10px, calc(0.86 * var(--u))) var(--font-display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-300); }
.mm-label { display: block; font: 600 calc(1.45 * var(--u)) / 1.25 var(--font-ui); color: var(--ink-900); margin-top: calc(0.1 * var(--u)); }
.mm-does { display: flex; flex-wrap: wrap; gap: calc(0.3 * var(--u)) calc(0.5 * var(--u)); margin-top: calc(0.45 * var(--u)); }
.mm-does span { font: 600 max(11px, calc(0.95 * var(--u))) / 1.3 var(--font-ui); color: var(--accent); padding-left: calc(1.1 * var(--u)); position: relative; }
.mm-does span::before { content: ""; position: absolute; left: 0; top: 0.42em; width: calc(0.55 * var(--u)); height: calc(0.55 * var(--u)); min-width: 5px; min-height: 5px; background: var(--accent); }
.mm-reads { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-page) var(--ease-out); }
.mm-reads > span { overflow: hidden; }
.mm-read { display: block; margin: calc(0.55 * var(--u)) 0 0; font: 500 max(12px, calc(1.1 * var(--u))) / 1.4 var(--font-ui); color: var(--ink-500); padding-left: calc(0.8 * var(--u)); border-left: 2px solid var(--line); }
.mm-choice.is-on { background: var(--paper); border-left-color: var(--accent); box-shadow: var(--shadow-1); transform: translateX(calc(0.6 * var(--u))); }
.mm-choice.is-on .mm-key { background: var(--accent); color: var(--paper); box-shadow: none; }
.mm-choice.is-on .mm-reads { grid-template-rows: 1fr; }
.mm-choices.has-on .mm-choice:not(.is-on) { opacity: 0.72; }
.mm-choices.has-on .mm-choice:not(.is-on):hover { opacity: 1; }
.mm-hold-line { position: absolute; left: 0; bottom: 0; height: max(2px, calc(0.25 * var(--u))); width: 0; background: var(--accent); }
.mm-pread { display: none; }
.mm-act { margin-top: auto; display: flex; gap: var(--u); align-items: center; padding-top: calc(1.2 * var(--u)); }
.mm-hold { all: unset; box-sizing: border-box; position: relative; overflow: hidden; cursor: pointer; background: var(--dark); color: var(--paper); min-height: 48px;
  font: 700 max(15px, calc(1.3 * var(--u))) var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; padding: calc(0.8 * var(--u)) calc(2.2 * var(--u));
  min-width: calc(15 * var(--u)); text-align: center; transition: transform var(--t-micro), opacity var(--t-base); touch-action: none;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.mm-hold:active:not(:disabled) { transform: scale(0.97); }
.mm-hold:disabled { opacity: 0.35; cursor: default; }
.mm-fill { position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.mm-hold-text { position: relative; display: block; }
.mm-hold small { display: block; font: 500 max(11px, calc(0.85 * var(--u))) var(--font-ui); letter-spacing: 0; text-transform: none; opacity: 0.7; }
.mm-later { all: unset; cursor: pointer; min-height: 44px; display: grid; place-items: center; font: 700 max(13px, calc(1.1 * var(--u))) var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500); padding: 0 calc(1.2 * var(--u)); }
.mm-later:hover { color: var(--ink-900); }
.mm-refusal { margin: var(--u) 0 0; font-size: max(12px, var(--u)); color: var(--form-loss); }

.mm-after { display: none; flex-direction: column; margin-top: calc(1.4 * var(--u)); }
.mm.is-resolved .mm-after { display: flex; flex: 1; min-height: 0; }
.mm-said { display: flex; gap: calc(0.6 * var(--u)); align-items: center; font: 500 max(12px, calc(1.1 * var(--u))) var(--font-ui); color: var(--ink-500); }
.mm-said b { font: 700 max(10px, calc(0.9 * var(--u))) var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper); background: var(--accent); padding: calc(0.2 * var(--u)) calc(0.5 * var(--u)); }
.mm-reply { position: relative; margin: calc(1.2 * var(--u)) 0 0; font: 500 calc(2.5 * var(--u)) / 1.25 var(--font-ui); color: var(--ink-900); padding-left: calc(2 * var(--u)); text-wrap: balance; }
/* what happened is narration, not his words: an accent rule, not a quotation mark */
.mm-reply::before { content: ""; position: absolute; left: 0; top: 0.12em; bottom: 0.12em; width: calc(0.45 * var(--u)); min-width: 3px; background: var(--accent); }
.mm-why { margin-top: calc(1.1 * var(--u)); display: inline-flex; align-self: flex-start; align-items: center; gap: calc(0.6 * var(--u)); font: 600 max(12px, calc(1.1 * var(--u))) var(--font-ui); color: var(--ink-900); background: var(--paper); box-shadow: var(--shadow-1); padding: calc(0.4 * var(--u)) calc(0.9 * var(--u)) calc(0.4 * var(--u)) calc(0.4 * var(--u)); }
.mm-why span { font: 700 max(10px, calc(0.86 * var(--u))) var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper); background: var(--ink-700); padding: calc(0.2 * var(--u)) calc(0.5 * var(--u)); }
.mm-paper { margin: calc(1.2 * var(--u)) 0 0; font: 600 max(12px, calc(1.15 * var(--u))) / 1.35 var(--font-ui); color: var(--ink-900); border-left: 3px solid var(--ink-900); padding-left: var(--u); }
.mm-paper span { display: block; font: 700 max(10px, calc(0.86 * var(--u))) var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-300); }
.mm-conseq { display: flex; flex-wrap: wrap; gap: calc(0.6 * var(--u)); margin-top: calc(1.6 * var(--u)); }
.mm-cq { display: flex; align-items: center; gap: calc(0.6 * var(--u)); font: 600 max(12px, calc(1.1 * var(--u))) var(--font-ui); background: var(--paper); padding: calc(0.65 * var(--u)) var(--u); box-shadow: var(--shadow-1); }
.mm-cq i { font: 700 max(11px, calc(1.1 * var(--u))) / 1 var(--font-display); font-style: normal; width: calc(1.8 * var(--u)); height: calc(1.8 * var(--u)); min-width: 18px; min-height: 18px; display: grid; place-items: center; color: var(--paper); }
.mm-cq.is-up i { background: var(--form-win); }
.mm-cq.is-down i { background: var(--form-loss); }
.mm-cq.is-note i { background: var(--ink-700); }
.mm-learned { margin: calc(1.3 * var(--u)) 0 0; font: 500 max(12px, calc(1.05 * var(--u))) var(--font-ui); color: var(--ink-500); }
.mm-learned b { color: var(--ink-900); font-weight: 600; }
.mm-next-row { margin-top: auto; display: flex; gap: var(--u); padding-top: calc(1.4 * var(--u)); }
.mm-next { all: unset; cursor: pointer; box-sizing: border-box; min-height: 48px; display: grid; place-items: center; background: var(--dark); color: var(--paper);
  font: 700 max(15px, calc(1.3 * var(--u))) var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; padding: 0 calc(2 * var(--u)); transition: background var(--t-fast), transform var(--t-micro); }
.mm-next:hover { background: var(--ink-700); }
.mm-next:active { transform: scale(0.97); }
.mm-quiet { justify-content: center; }
.mm-quiet .mm-act { margin-top: calc(2 * var(--u)); }

.mm-sheet { position: absolute; inset: 0; z-index: 9; background: rgba(255, 255, 255, 0.78); backdrop-filter: blur(22px); display: none; padding: 6% 8%; }
.mm-sheet.is-open { display: block; animation: mm-fade var(--t-page) var(--ease-out); }
.mm-sheet h2 { font: 700 calc(3 * var(--u)) var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 var(--u); color: var(--ink-900); }
.mm-sheet .mm-cards { width: 62%; margin: 0; }
.mm-close { all: unset; cursor: pointer; position: absolute; right: 4%; top: 6%; min-height: 44px; display: grid; place-items: center; font: 700 15px var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; background: var(--dark); color: var(--paper); padding: 0 18px; }
@keyframes mm-fade { from { opacity: 0; } }

/* the dignified register: grief, illness, burnout, drink -- no colour, no slab, no keys, no stance labels */
.mm-dignified .mm-bg { filter: blur(7px) saturate(0.25) brightness(1.1); }
.mm-dignified .mm-veil { background: linear-gradient(90deg, rgba(245, 247, 250, 0.62) 0%, rgba(245, 247, 250, 0.78) 40%, rgba(245, 247, 250, 0.95) 60%, rgba(245, 247, 250, 0.98) 100%); }
.mm-dignified :is(.mm-slab, .mm-slash, .mm-edge, .mm-floor-ring, .mm-key, .mm-stance, .mm-known) { display: none; }
.mm-dignified .mm-char b { background: var(--ink-500); }
.mm-dignified .mm-does span { color: var(--ink-700); }
.mm-dignified .mm-does span::before { background: var(--ink-500); }
.mm-dignified .mm-sphere { filter: saturate(0.12) brightness(1.08); }
.mm-dignified .mm-id { color: var(--ink-900); text-shadow: none; }
.mm-dignified .mm-queue { color: var(--ink-700); text-shadow: none; }
.mm-dignified .mm-pips i { background: var(--line-strong); }
.mm-dignified .mm-pips i.on { background: var(--ink-700); }
.mm-dignified .mm-tag { background: var(--ink-500); }
.mm-dignified .mm-q { font-weight: 500; }
.mm-dignified .mm-choice { grid-template-columns: 1fr; }
.mm-dignified .mm-hold { background: var(--ink-700); }
.mm-dignified .mm-fill { background: var(--ink-500); }
.mm-dignified .mm-reply::before { background: var(--ink-300); }
.mm-dignified .mm-choice.is-on { border-left-color: var(--ink-500); }

/* a white or pale kit: ink on the slab instead of white */
.mm.is-light-kit .mm-id { color: var(--ink-900); text-shadow: 0 1px 10px rgba(255, 255, 255, 0.6); }
.mm.is-light-kit .mm-queue { color: var(--ink-900); text-shadow: none; }
.mm.is-light-kit .mm-pips i { background: var(--line-strong); }
.mm.is-light-kit .mm-pips i.on { background: var(--ink-900); }
.mm.is-light-kit .mm-crest { background: var(--ink-900); opacity: 0.06; }
.mm.is-light-kit .mm-floor-ring ellipse { stroke: rgba(16, 21, 31, 0.22); }

/* the landscape phone: him on the left, the conversation on the right, the answers in a 2 x 2 grid */
@media (max-height: 520px) {
  .mm > * { --u: min(1cqw, 2.16cqh); }
  .mm-person { left: 3%; top: 17%; width: 40%; }
  .mm-pieces { height: calc(14 * var(--u)); }
  .mm-slot { --sphere: calc(12 * var(--u)); margin-left: calc(3 * var(--u)); }
  .mm-slot.is-pair { --sphere: calc(9 * var(--u)); }
  .mm-sur { font-size: calc(4.6 * var(--u)); }
  .mm-first { font-size: calc(1.9 * var(--u)); }
  .mm-meta { font-size: 12px; }
  .mm-person > .mm-cards { display: none; }
  .mm-about { all: unset; cursor: pointer; display: inline-grid; place-items: center; min-height: 44px; margin-top: calc(1.4 * var(--u)); padding: 0 16px;
    font: 700 14px var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-900); background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(10px); }
  /* A5 part 2: a pair's question and three answers are tall on a landscape phone -- the talk starts higher, scrolls if it
     must, and the button stays in view at its foot */
  .mm-talk { left: 44%; right: 2.6%; top: 13%; bottom: 3%; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(16, 21, 31, 0.35) transparent; }
  .mm-act { position: sticky; bottom: 0; }
  .mm-q { font-size: calc(2.2 * var(--u)); margin-top: calc(0.6 * var(--u)); }
  .mm-rest { font-size: calc(1.8 * var(--u)); margin-top: calc(0.3 * var(--u)); }
  .mm-choices { margin-top: calc(1.2 * var(--u)); gap: calc(0.8 * var(--u)); grid-template-columns: 1fr 1fr; }
  .mm-does span { font-size: 11px; }
  .mm-known, .mm-moment { display: none; }
  .mm-choice { padding: calc(0.6 * var(--u)) var(--u); grid-template-columns: 30px 1fr; min-height: 44px; align-items: center; gap: var(--u); }
  .mm-choice.is-on, .mm-choice:hover, .mm-choice:active { transform: none; }
  .mm-choice .mm-reads, .mm-stance { display: none; }
  .mm-key { width: 30px; height: 30px; font-size: 15px; }
  .mm-label { font-size: max(13px, calc(1.9 * var(--u))); }
  /* an odd last answer takes the whole row */
  .mm-choice:last-child:nth-child(odd) { grid-column: 1 / -1; }
  /* once answered, the question steps back so the reply and what it moved fit above the button */
  .mm.is-resolved .mm-q { display: none; }
  .mm-conseq { gap: 5px; }
  .mm-after { margin-top: var(--u); }
  .mm-said { font-size: 12px; }
  .mm-reply { margin-top: calc(0.8 * var(--u)); }
  .mm-cq { font-size: 12px; padding: 5px 9px; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12); }
  .mm-learned { margin-top: calc(0.8 * var(--u)); font-size: 12px; }
  .mm-next-row { padding-top: calc(0.8 * var(--u)); }
  .mm-pread { display: block; margin: var(--u) 0 0; font: 500 max(12px, calc(1.7 * var(--u))) / 1.35 var(--font-ui); color: var(--ink-500); min-height: 1.35em; }
  .mm-act { padding-top: calc(0.8 * var(--u)); }
  .mm-hold { min-width: 0; padding: 6px 22px; font-size: 16px; }
  .mm-reply { font-size: calc(2.2 * var(--u)); padding-left: calc(1.8 * var(--u)); }
  .mm-conseq { margin-top: calc(1.4 * var(--u)); }
  .mm-queue .mm-pips { display: none; }
  .mm-sheet .mm-cards { width: 70%; }
  .mm-sheet h2 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) { .mm *, .dash-ask { transition-duration: 1ms !important; animation-duration: 1ms !important; } }

/* ==========================================================================================
   B16: the Club hub (the user, 2026-09-28) -- the Dashboard's cards and frame:
     Training: the five slots        | Trophy Cabinet
     Board (bottom left)             | Facilities (bottom right)
   Each card opens its page with no bar. Training and Facilities act; the other two read.
   ========================================================================================== */
.career-page[data-page="club"] { padding: clamp(8px, 1.2vh, 14px) var(--frame-x) var(--frame-y); }
:root[data-career-detail] .career-page[data-page="club"] { top: 0; padding-top: var(--frame-y); }
.club-grid {
  --gap: clamp(10px, 1.1vw, 20px);
  height: 100%; display: grid; gap: var(--gap);
  grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
  grid-template-rows: minmax(0, 54fr) minmax(0, 46fr);
  grid-template-areas: "training trophies" "board facilities";
  perspective: 1800px; perspective-origin: 40% 10%;
}
.club-training { grid-area: training; }
.club-trophies { grid-area: trophies; }
.club-board { grid-area: board; }
.club-facilities { grid-area: facilities; }
.club-grid.is-entering .card { animation: card-rise 900ms var(--ease-out) calc(140ms + var(--d, 0) * 100ms) backwards; }
.club-grid .dcard-body { container-type: size; }

/* the trainee: the Game Plan's sphere, standing still */
.club-sphere { position: absolute; left: 50%; top: 50%; cursor: default; transition: none; }
.club-sphere, .club-sphere:hover { --lift: 0px; --scale: 1; }
.club-sphere .sphere-num { font-size: calc(var(--d-sphere) * 0.42); }

/* condition: a thin bar (fresh = full) and its word */
.cond { display: inline-flex; align-items: center; gap: 0.5em; min-width: 0; }
.cond-bar { position: relative; flex: 1 1 auto; min-width: 2.6em; height: 5px; background: var(--surface-ink); overflow: hidden; }
.cond-bar i { position: absolute; inset: 0 auto 0 0; background: var(--ink-700); transition: width var(--t-page) var(--ease-out); }
.cond.is-warn .cond-bar i { background: var(--warn); }
.cond.is-bad .cond-bar i { background: var(--form-loss); }
.cond-word { font-size: 0.82em; font-weight: 600; color: var(--ink-500); white-space: nowrap; }
.cond.is-bad .cond-word { color: var(--form-loss); }
.pips { display: inline-flex; gap: 3px; }
.pips i { width: 12px; height: 5px; background: var(--ink-900); }
.pips i.is-used { background: rgba(16, 21, 31, 0.16); }
.lvl { display: inline-flex; gap: 3px; align-items: center; }
.lvl i { width: 0.95em; height: 0.5em; background: rgba(16, 21, 31, 0.13); }
.lvl i.is-on { background: var(--ink-900); }
.lvl i.is-building { background: repeating-linear-gradient(135deg, var(--ink-500) 0 3px, transparent 3px 6px); }
.tg-delta { font-family: var(--font-display); font-weight: 700; color: var(--ink-500); }
.tg-delta.is-up { color: var(--form-win); }
.tg-delta.is-down { color: var(--form-loss); }

/* --- the hub's cards ---------------------------------------------------------------------------------- */
.tc-slots { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(6px, 0.8vw, 14px); padding: clamp(6px, 1.4vh, 16px) 0 clamp(4px, 1vh, 10px); }
.tc-slot { --d-sphere: min(62cqh, 12cqw); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 0; padding-bottom: 4px; }
.tc-piece { position: relative; width: var(--d-sphere); height: var(--d-sphere); flex: none; margin-bottom: 4px; }
.tc-piece .club-sphere { --sphere: var(--d-sphere); }
.tc-name { font-family: var(--font-display); font-weight: 700; font-size: clamp(13px, min(9cqh, 3.2cqw), 20px); letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-900); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-slot .cond { width: 80%; }
.tc-slot.is-empty { justify-content: center; color: var(--ink-300); }
.tc-slot.is-empty .tc-name { color: var(--ink-300); }
.tc-add { position: relative; display: grid; place-items: center; width: var(--d-sphere); aspect-ratio: 1; }
.tc-add svg { width: 34%; height: 34%; }
.tc-add svg.ring, .tg-add svg.ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.ring circle { fill: none; stroke: rgba(16, 21, 31, 0.2); stroke-width: 2; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.tc-foot { flex: none; margin: 0; padding-top: 8px; border-top: 1px solid rgba(16, 21, 31, 0.08); font-size: clamp(12px, 0.85vw, 16px); font-weight: 500; color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-foot b { color: var(--ink-900); font-weight: 600; }

.tr-head { flex: none; display: flex; align-items: center; gap: 14px; padding: clamp(6px, 1.2vh, 14px) 0 clamp(4px, 1vh, 10px); }
.tr-count { font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, min(34cqh, 12cqw), 88px); line-height: 0.86; color: var(--ink-900); }
.tr-label { display: flex; flex-direction: column; font-family: var(--font-display); font-weight: 700; font-size: clamp(15px, 1.2vw, 22px); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-900); }
.tr-label small { font-family: var(--font-ui); font-weight: 500; font-size: 0.72em; letter-spacing: 0; text-transform: none; color: var(--ink-500); }
.tr-shelf { flex: 1 1 auto; min-height: 0; display: flex; align-items: flex-end; gap: clamp(8px, 1vw, 18px); padding: 6px 4px 10px; border-bottom: 6px solid rgba(16, 21, 31, 0.1); overflow: hidden; }
.tr-item { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; height: 100%; justify-content: flex-end; }
.tr-item .cup { height: min(100%, 8vh); width: auto; max-height: calc(100% - 20px); }
.tr-item small { font-size: clamp(10.5px, 0.72vw, 14px); font-weight: 600; color: var(--ink-500); }
.tr-item.is-yours small { color: var(--ink-900); }
:root { --cup-silver: rgb(199, 206, 216); --cup-silver-edge: rgb(139, 149, 163); --cup-handle: rgb(154, 164, 177); --cup-base: rgb(110, 120, 134); --cup-base-edge: rgb(80, 90, 104); --cup-gold: rgb(225, 197, 107); --cup-gold-edge: rgb(168, 137, 47); --cup-gold-handle: rgb(185, 154, 61); }
.cup { overflow: visible; filter: drop-shadow(0 6px 8px rgba(16, 24, 40, 0.28)); }
.cup .cup-body, .cup .cup-base { fill: var(--cup-silver); stroke: var(--cup-silver-edge); stroke-width: 1; }
.cup .cup-base { fill: var(--cup-base); stroke: var(--cup-base-edge); }
.cup .cup-handle { fill: none; stroke: var(--cup-handle); stroke-width: 2.6; }
.cup .cup-shine { fill: none; stroke: rgba(255, 255, 255, 0.9); stroke-width: 2; stroke-linecap: round; }
.cup.is-yours .cup-body { fill: var(--cup-gold); stroke: var(--cup-gold-edge); }
.cup.is-yours .cup-handle { stroke: var(--cup-gold-handle); }
.cup .cup-ribbon { fill: var(--ink-900); stroke: none; }

.bd-mood { flex: none; display: flex; flex-wrap: wrap; gap: 6px clamp(16px, 2vw, 34px); padding: clamp(6px, 1vh, 12px) 0; }
.bd-mood span { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; }
.bd-mood i { grid-row: 1 / 3; font-style: normal; font-size: clamp(20px, 1.6vw, 30px); line-height: 1; }
.bd-mood small { font-family: var(--font-display); font-weight: 700; font-size: clamp(10px, 0.7vw, 13px); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-500); }
.bd-mood b { font-family: var(--font-display); font-weight: 700; font-size: clamp(15px, 1.1vw, 21px); color: var(--ink-900); line-height: 1.05; }
.bd-warn { flex: none; margin: 0 0 6px; padding: 6px 10px; background: rgba(216, 74, 74, 0.1); border-left: 3px solid var(--form-loss); font-size: clamp(12px, 0.85vw, 16px); font-weight: 600; color: var(--ink-900); }
.bd-list { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; min-height: 0; display: grid; grid-auto-rows: minmax(0, 1fr); }
.bd-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 0; border-top: 1px solid rgba(16, 21, 31, 0.07); font-size: clamp(12.5px, 0.95vw, 18px); }
.bd-title { font-weight: 600; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-chip { flex: none; padding: 0.25em 0.6em; font-family: var(--font-display); font-weight: 700; font-size: 0.78em; letter-spacing: 0.1em; text-transform: uppercase; background: var(--surface-ink); color: var(--ink-700); }
.bd-chip.is-ahead { background: var(--form-win); color: var(--paper); }
.bd-chip.is-behind { background: var(--form-loss); color: var(--paper); }
.bd-chip.is-on-course { background: var(--ink-900); color: var(--paper); }

.fc-list { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; min-height: 0; display: grid; grid-auto-rows: minmax(0, 1fr); }
.fc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 9.5em; align-items: center; gap: 12px; min-height: 0; font-size: clamp(12.5px, 0.95vw, 18px); }
.fc-row + .fc-row { border-top: 1px solid rgba(16, 21, 31, 0.07); }
.fc-name { font-weight: 600; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-state { font-size: 0.85em; font-weight: 600; color: var(--ink-500); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-state.is-building { color: var(--ink-900); }

/* --- the pages ------------------------------------------------------------------------------------------ */
.detail-club { width: 100%; height: 100%; }
.detail-club .card-face { height: 100%; position: relative; }
.detail-club .detail-head { flex-wrap: wrap; row-gap: 6px; }
.club-notice { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); margin: 0; padding: 10px 18px; background: var(--dark); color: var(--paper); font-size: 14px; font-weight: 600; box-shadow: var(--shadow-2); animation: fade-in var(--t-fast) var(--ease-std) both; }
.tg-h { margin: 0; padding: 0 0 6px; font-family: var(--font-display); font-weight: 700; font-size: clamp(12px, 0.85vw, 16px); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-900); }

/* Training: five slots over the season's log, the selected slot's editor on the right */
.detail-training .detail-body { overflow: hidden; }
.tg { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) clamp(260px, 27vw, 480px); gap: clamp(12px, 1.4vw, 26px); min-height: 0; }
.tg-main { display: flex; flex-direction: column; gap: clamp(8px, 1.4vh, 16px); min-height: 0; }
.tg-closed { margin: 0; padding: 8px 12px; background: var(--surface-ink); font-weight: 600; color: var(--ink-700); }
.tg-slots { flex: 0 0 auto; height: min(58%, 380px); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(6px, 0.7vw, 12px); container-type: size; }
.tg-slot {
  --d-sphere: min(30cqh, 11cqw);
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; min-height: 0; padding: 10px 8px 8px;
  border: 0; border-top: 4px solid transparent; background: var(--surface-2); color: var(--ink-700); font: inherit; cursor: pointer; text-align: center;
  transition: background var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast) var(--ease-out);
}
.tg-slot:hover { background: var(--surface); }
.tg-slot.is-on { background: var(--paper); border-top-color: var(--accent); box-shadow: var(--shadow-1); }
.tg-slot:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tg-num { position: absolute; left: 8px; top: 6px; font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--ink-300); }
.tg-piece { position: relative; width: var(--d-sphere); height: var(--d-sphere); flex: none; margin: 4px 0 2px; }
.tg-piece .club-sphere { --sphere: var(--d-sphere); }
.tg-name { font-family: var(--font-display); font-weight: 700; font-size: clamp(14px, min(7cqh, 2.3cqw), 22px); letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-900); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1; }
.tg-meta { display: flex; align-items: center; gap: 6px; font-size: clamp(11.5px, 0.8vw, 14px); max-width: 100%; }
.tg-drill { font-weight: 600; color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-slot .cond { width: 100%; font-size: clamp(11.5px, 0.8vw, 14px); }
.tg-result { display: flex; align-items: baseline; justify-content: center; gap: 6px; min-height: 1.4em; font-size: clamp(12px, 0.85vw, 15px); font-weight: 600; color: var(--ink-500); }
.tg-result b { font-family: var(--font-display); font-weight: 700; font-size: 1.5em; line-height: 1; color: var(--ink-700); }
.tg-result.is-up b { color: var(--form-win); }
.tg-result.is-down b { color: var(--form-loss); }
.tg-result.is-none { font-weight: 500; color: var(--ink-300); }
.tg-result.is-flash { animation: tg-pop 700ms var(--ease-out) both; }
@keyframes tg-pop { 0% { transform: translateY(10px) scale(0.7); opacity: 0; } 55% { transform: translateY(-3px) scale(1.12); opacity: 1; } 100% { transform: none; } }
.tg-foot { margin-top: auto; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tg-train { height: 44px; min-height: 44px; padding: 0 clamp(10px, 1vw, 20px); font-size: clamp(14px, 1vw, 18px); }
.tg-train:disabled { background: rgba(16, 21, 31, 0.16); color: var(--ink-500); cursor: default; box-shadow: none; }
.tg-slot.is-empty { justify-content: center; color: var(--ink-300); }
.tg-add { position: relative; display: grid; place-items: center; width: var(--d-sphere); aspect-ratio: 1; }
.tg-add svg { width: 34%; height: 34%; }
.tg-slot.is-on .tg-add { color: var(--accent-ink); }
.tg-slot.is-on .tg-add .ring circle { stroke: var(--accent); }
.tg-empty { font-weight: 600; font-size: clamp(12px, 0.85vw, 15px); }

.tg-log { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.tg-log-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.tg-session { display: grid; grid-template-columns: 9em minmax(6em, 0.8fr) 7em 2.6em minmax(0, 2.4fr) 4.4em; align-items: center; gap: 0.7em; min-height: 2.3em; padding: 0 0.4em; border-bottom: 1px solid rgba(16, 21, 31, 0.06); font-size: clamp(12px, 0.9vw, 17px); color: var(--ink-700); }
.tg-s-when { color: var(--ink-500); white-space: nowrap; }
.tg-s-who { color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-s-drill { white-space: nowrap; }
.tg-s-tired { font-style: normal; font-size: 0.8em; font-weight: 700; color: var(--form-loss); }
.tg-s-changes { color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-s-ovr { text-align: right; font-weight: 600; color: var(--ink-900); }
.tr-quiet { margin: 6px 0; font-weight: 500; color: var(--ink-500); }

.tg-side { display: flex; flex-direction: column; min-height: 0; padding-left: clamp(12px, 1.4vw, 26px); border-left: 1px solid rgba(16, 21, 31, 0.08); }
.tg-ed-head { position: relative; flex: none; display: flex; flex-direction: column; gap: 2px; padding: 2px 44px 10px 0; }
.tg-ed-kicker { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-ink); }
.tg-ed-name { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 1.6vw, 30px); letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-900); line-height: 1.05; }
.tg-ed-line { font-size: clamp(12.5px, 0.9vw, 16px); font-weight: 500; font-style: italic; color: var(--ink-500); }
.tg-clear { position: absolute; right: 0; top: 0; width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: var(--surface-2); color: var(--ink-700); cursor: pointer; }
.tg-clear:hover { background: var(--paper); color: var(--ink-900); }
.tg-clear svg { width: 16px; height: 16px; }
.tg-drills { flex: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5em, 1fr)); gap: 6px; margin-bottom: 12px; }
.tg-drill-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 44px; padding: 7px 10px; border: 0; border-left: 4px solid transparent;
  background: var(--surface-2); color: var(--ink-700); font: inherit; text-align: left; cursor: pointer; transition: background var(--t-fast), transform var(--t-fast) var(--ease-out);
}
.tg-drill-tile:hover { background: var(--surface); transform: translateY(-1px); }
.tg-drill-tile.is-selected { background: var(--paper); border-left-color: var(--accent); box-shadow: var(--shadow-1); color: var(--ink-900); }
.tg-drill-tile b { font-family: var(--font-display); font-weight: 700; font-size: clamp(14px, 1vw, 18px); letter-spacing: 0.04em; text-transform: uppercase; }
.tg-drill-tile span { font-size: clamp(11px, 0.72vw, 13px); font-weight: 500; color: var(--ink-500); line-height: 1.2; }
.tg-picks { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.tg-pick {
  width: 100%; display: grid; grid-template-columns: 3.2em minmax(0, 1fr) auto 4.5em 2.2em; align-items: center; gap: 0.6em; min-height: 44px; padding: 0 0.5em;
  border: 0; border-bottom: 1px solid rgba(16, 21, 31, 0.06); border-left: 3px solid transparent; background: transparent; font: inherit; font-size: clamp(12.5px, 0.9vw, 16px); color: var(--ink-700); text-align: left; cursor: pointer;
  transition: background var(--t-micro), border-color var(--t-micro);
}
.tg-pick:hover:not(:disabled) { background: var(--accent-soft); border-left-color: var(--accent); }
.tg-pick.is-on { background: var(--paper); border-left-color: var(--accent); }
.tg-pick:disabled { cursor: default; color: var(--ink-300); }
.tg-pick-name { font-weight: 600; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-pick:disabled .tg-pick-name { color: var(--ink-300); }
.tg-pick-slot { font-size: 0.8em; font-weight: 700; color: var(--accent-ink); white-space: nowrap; }
.tg-pick-out { font-size: 0.8em; font-weight: 600; color: var(--form-loss); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-pick-ovr { font-family: var(--font-display); font-weight: 700; font-size: 1.2em; text-align: right; color: var(--ink-900); }

/* Trophy Cabinet */
.detail-trophies .detail-body { overflow-y: auto; }
.tr-top { display: flex; align-items: flex-end; gap: clamp(18px, 2.4vw, 44px); padding: 8px 0 18px; }
.tr-big { display: flex; flex-direction: column; flex: none; }
.tr-big .tr-count { font-size: clamp(64px, 7vw, 132px); }
.tr-cabinet { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px clamp(12px, 1.4vw, 26px); padding: 14px 16px 12px; background: linear-gradient(to bottom, rgba(16, 21, 31, 0.03), rgba(16, 21, 31, 0.07)); border-bottom: 8px solid rgba(16, 21, 31, 0.14); }
.tr-trophy { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tr-trophy .cup { height: clamp(64px, 10vh, 120px); width: auto; }
.tr-trophy figcaption { display: flex; flex-direction: column; align-items: center; font-size: clamp(12px, 0.85vw, 15px); color: var(--ink-700); }
.tr-trophy small { font-size: 0.82em; font-weight: 700; color: var(--ink-900); }
.tr-cols { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(16px, 2vw, 40px); }
.tr-sec { margin-bottom: 18px; }
.tr-story, .tr-legacy, .tr-named { margin: 0 0 10px; font-size: clamp(13px, 0.95vw, 17px); line-height: 1.5; color: var(--ink-700); }
.tr-legacy { font-style: italic; color: var(--ink-500); }
.tr-named b { color: var(--ink-900); }
.tr-facts { margin: 8px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(11em, 1fr)); gap: 8px 18px; }
.tr-facts div { display: flex; flex-direction: column; }
.tr-facts dt { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-500); }
.tr-facts dd { margin: 0; font-weight: 600; color: var(--ink-900); }
.tr-fin { list-style: none; margin: 0; padding: 0; }
.tr-fin li { display: grid; grid-template-columns: 6em 4em 5em auto; align-items: center; gap: 10px; min-height: 2.3em; border-bottom: 1px solid rgba(16, 21, 31, 0.06); font-size: clamp(13px, 0.95vw, 17px); }
.tr-fin b { font-family: var(--font-display); font-size: 1.2em; color: var(--ink-900); }
.tr-fin i { font-style: normal; font-family: var(--font-display); font-weight: 700; font-size: 0.8em; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.2em 0.5em; background: var(--cup-gold); color: var(--ink-900); justify-self: start; }

/* Board */
.detail-board .detail-body { overflow-y: auto; }
.bd-mood.is-big { padding: 8px 0 16px; }
.bd-mood.is-big i { font-size: clamp(28px, 2.4vw, 44px); }
.bd-mood.is-big b { font-size: clamp(18px, 1.5vw, 28px); }
.bd-warn.is-big { font-size: clamp(14px, 1vw, 18px); padding: 10px 14px; margin-bottom: 14px; }
.bd-objs { display: grid; grid-template-columns: repeat(auto-fit, minmax(15em, 1fr)); gap: clamp(8px, 1vw, 16px); }
.bd-obj { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; background: var(--surface-2); border-top: 4px solid var(--ink-900); }
.bd-obj header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.bd-obj header small { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-500); }
.bd-weight { font-size: 12px; font-weight: 600; color: var(--ink-500); }
.bd-ask { font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 1.35vw, 26px); line-height: 1.1; color: var(--ink-900); }
.bd-now { margin: 0 0 6px; font-size: clamp(13px, 0.9vw, 16px); color: var(--ink-700); }
.bd-obj .bd-chip { align-self: flex-start; margin-top: auto; font-size: 13px; }
.bd-foot { margin: 16px 0 0; font-size: clamp(12.5px, 0.85vw, 15px); color: var(--ink-500); }

/* Facilities */
.detail-facilities .detail-body { overflow-y: auto; }
.fa { display: grid; gap: clamp(8px, 1vh, 14px); padding-top: 6px; }
.fa-row { display: grid; grid-template-columns: minmax(12em, 1.1fr) 11em minmax(0, 1.6fr) 13em; align-items: center; gap: clamp(12px, 1.4vw, 28px); padding: clamp(12px, 1.6vh, 20px) clamp(14px, 1.2vw, 22px); background: var(--surface-2); }
.fa-row.is-building { background: repeating-linear-gradient(135deg, rgba(16, 21, 31, 0.035) 0 10px, transparent 10px 20px), var(--surface-2); }
.fa-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fa-name { font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 1.4vw, 26px); letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-900); }
.fa-line { font-size: clamp(12.5px, 0.85vw, 15px); font-weight: 500; color: var(--ink-500); }
.fa-level { display: flex; flex-direction: column; gap: 6px; font-size: clamp(16px, 1.2vw, 22px); }
.fa-lv { font-size: 0.66em; font-weight: 700; color: var(--ink-700); }
.fa-effect { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-size: clamp(12.5px, 0.9vw, 16px); color: var(--ink-900); font-weight: 600; }
.fa-effect span { display: flex; flex-direction: column; gap: 2px; }
.fa-effect small { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-500); }
.fa-next { color: var(--ink-500); font-weight: 500; }
.fa-act { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.fa-go { height: 46px; min-height: 46px; padding: 0 18px; font-size: clamp(14px, 1vw, 18px); white-space: nowrap; }
.fa-go:disabled { background: rgba(16, 21, 31, 0.16); color: var(--ink-500); cursor: default; box-shadow: none; }
.fa-why { font-size: 12px; font-weight: 600; color: var(--ink-500); text-align: right; }
.fa-building, .fa-max { font-family: var(--font-display); font-weight: 700; font-size: clamp(13px, 0.95vw, 17px); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-700); text-align: right; }

@media (max-height: 820px) {
  .tr-item .cup { height: min(100%, 6vh); }
}
@media (max-height: 520px) {
  .career-page[data-page="club"] { padding: 6px var(--frame-x) 8px; }
  .club-grid { --gap: 7px; }
  .tc-slots { padding: 4px 0 2px; gap: 4px; }
  .tc-slot { gap: 3px; }
  .tc-name { font-size: 11px; }
  .tc-foot { font-size: 11px; padding-top: 4px; }
  .tr-head { padding: 2px 0; gap: 8px; }
  .tr-count { font-size: 34px; }
  .tr-label { font-size: 13px; }
  .tr-item small { font-size: 9.5px; }
  .tr-item .cup { height: min(100%, 44px); }
  .bd-mood { padding: 2px 0; gap: 4px 14px; }
  .bd-mood i { font-size: 18px; }
  .bd-mood b { font-size: 13px; }
  .bd-mood small { font-size: 9px; }
  .bd-row, .fc-row { font-size: 11.5px; }
  .bd-warn { font-size: 11px; padding: 3px 8px; }
  .fc-row { grid-template-columns: minmax(0, 1fr) auto 7.5em; gap: 8px; }

  .tg { grid-template-columns: minmax(0, 1fr) 250px; gap: 10px; }
  .tg-main { gap: 6px; }
  .tg-slots { height: 100%; flex: 1 1 auto; }
  .tg-log { display: none; }
  .tg-slot { --d-sphere: min(26cqh, 11cqw); gap: 3px; padding: 6px 4px 4px; }
  .tg-num { font-size: 11px; left: 5px; top: 3px; }
  .tg-name { font-size: 13px; }
  .tg-meta { font-size: 10.5px; gap: 4px; }
  .tg-meta .sq-pos { display: none; }
  .tg-slot .cond { font-size: 10.5px; }
  .tg-slot .cond-word { display: none; }
  .tg-result { font-size: 10.5px; min-height: 1.2em; }
  .tg-foot { flex-direction: column; gap: 4px; }
  .tg-train { width: 100%; height: 40px; min-height: 40px; font-size: 14px; }
  .tg-side { padding-left: 10px; }
  .tg-ed-head { padding-bottom: 4px; }
  .tg-ed-name { font-size: 17px; }
  .tg-ed-line { font-size: 11px; }
  .tg-drills { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin-bottom: 6px; }
  .tg-drill-tile { min-height: 36px; padding: 4px 8px; }
  .tg-drill-tile b { font-size: 13px; }
  .tg-drill-tile span { display: none; }
  .tg-pick { min-height: 38px; font-size: 11.5px; grid-template-columns: 2.8em minmax(0, 1fr) auto 3em 2em; }
  .tg-h { font-size: 11px; padding-bottom: 3px; }

  .tr-top { padding: 2px 0 10px; }
  .tr-big .tr-count { font-size: 56px; }
  .tr-trophy .cup { height: 52px; }
  .tr-cols { grid-template-columns: 1fr 1fr; gap: 14px; }
  .tr-story, .tr-legacy, .tr-named { font-size: 12px; }

  .bd-objs { grid-template-columns: repeat(auto-fit, minmax(12em, 1fr)); gap: 6px; }
  .bd-obj { padding: 8px 10px 10px; gap: 3px; }
  .bd-ask { font-size: 15px; }
  .bd-now { font-size: 11.5px; }

  .fa-row { grid-template-columns: minmax(8em, 1fr) 6.5em minmax(0, 1.4fr) 9.5em; gap: 10px; padding: 8px 10px; }
  .fa-name { font-size: 15px; }
  .fa-line { font-size: 10.5px; }
  .fa-level { font-size: 13px; }
  .fa-effect { font-size: 11px; grid-template-columns: 1fr; gap: 4px; }
  .fa-effect small { font-size: 9px; }
  .fa-go { height: 40px; min-height: 40px; font-size: 13px; padding: 0 10px; }
  .fa-why { font-size: 10px; }
  .club-notice { font-size: 12px; bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) { .tg-result.is-flash { animation: none; } }
.bd-letters { margin-top: clamp(12px, 2vh, 22px); }
.bd-letter { padding: 10px 0; border-bottom: 1px solid rgba(16, 21, 31, 0.07); }
.bd-letter header { display: flex; justify-content: space-between; gap: 12px; font-size: clamp(13px, 0.95vw, 17px); }
.bd-letter header b { color: var(--ink-900); }
.bd-letter header span { color: var(--ink-500); font-size: 0.85em; }
.bd-letter p { margin: 4px 0 0; font-size: clamp(12.5px, 0.9vw, 16px); color: var(--ink-700); line-height: 1.45; }
/* the reading pages size to what they hold; Training and the cabinet fill the frame */
.detail-club.detail-board, .detail-club.detail-facilities { height: auto; }
.detail-club.detail-board .card-face, .detail-club.detail-facilities .card-face { height: auto; }
.club-grid .tr-item .cup { height: clamp(34px, 40cqh, 120px); max-height: none; }
@media (max-height: 520px) {
  .bd-letter { padding: 5px 0; }
  .bd-letter header, .bd-letter p { font-size: 11.5px; }
}
/* on a phone the drills are one strip of chips, so the squad keeps its room */
@media (max-height: 520px) {
  .tg-drills { display: flex; grid-template-columns: none; gap: 4px; overflow-x: auto; flex-wrap: nowrap; margin-bottom: 6px; }
  .tg-drill-tile { flex: none; min-height: 44px; justify-content: center; border-left: 0; border-bottom: 3px solid transparent; }
  .tg-drill-tile.is-selected { border-bottom-color: var(--accent); }
}

/* --- A2: the academy's new boys ---------------------------------------------------------------------------------- */
.ac-new { flex: none; font-style: normal; font-family: var(--font-display); font-weight: 700; font-size: 0.66em; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.12em 0.4em; background: var(--accent-soft); color: var(--accent-ink); }
.ac-name small { font-weight: 500; font-size: 0.78em; color: var(--ink-500); }
.sq-name .ac-new { margin-left: 0.4em; }

/* ==============================================================================================
   A6: every club's full name in the dashboard's table card (house rule: full club names, never cut).
   Tighter number columns and letter-spacing on every screen; on a landscape phone the goal difference
   gives its room to the names (the full table page still shows it).
   ===================================================================================================== */
.dt-head, .dt-row { grid-template-columns: 1.4em 0.8em 1.3em minmax(0, 1fr) 1.5em 2.1em 1.9em; gap: 5px; }
.dt-name { letter-spacing: 0.01em; }
@media (max-height: 520px) {
  .dt-head, .dt-row { grid-template-columns: 1.3em 0.7em 1.2em minmax(0, 1fr) 1.4em 1.8em; gap: 3px; }
  .dt-gd { display: none; }
  .dt-name { letter-spacing: 0; }
}

/* A6 (tracker #14): the empty training ground's one line */
.tc-hint { margin: 0; padding: 0 0 clamp(4px, 1vh, 10px); text-align: center; font-size: clamp(12px, 0.85vw, 15px); font-weight: 500; color: var(--ink-500); }
@media (max-height: 520px) { .tc-hint { font-size: 11px; padding-bottom: 2px; } }

/* A6 (tracker #12): "Also in the news" under the lead story -- a front page's second headlines. Phones keep the lead alone. */
.nc-also { flex: none; padding: clamp(8px, 1.2vh, 14px) clamp(4px, 0.5vw, 10px) 2px; border-top: 1px solid var(--line); }
.nc-also-title { display: block; margin-bottom: 4px; font-family: var(--font-display); font-weight: 700; font-size: clamp(11px, 0.75vw, 13px); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-500); }
.nc-also ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.nc-also li + li button { border-top: 1px solid rgba(16, 21, 31, 0.06); }
.nc-also button {
  all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 1px; width: 100%; padding: 6px 0;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(14px, 1vw, 18px); line-height: 1.1; color: var(--ink-900);
}
.nc-also button span { font-weight: 600; font-size: 0.72em; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500); }
.nc-also button:hover { color: var(--accent-ink); }
.nc-also button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-height: 520px) { .nc-also { display: none; } }

/* A6 (tracker #12): the masthead keeps its date on one line beside the paper's name */
.nc-when { white-space: nowrap; flex: none; }
.nc-source { min-width: 0; }
/* A4 (ADR-062): the Stack logo on the stadium: no box, a soft white lift for contrast, its outlined parts rising in turn */
.start-emblem .brand-mark { filter: drop-shadow(0 2px 0 rgba(255, 255, 255, 0.55)) drop-shadow(0 6px 18px rgba(255, 255, 255, 0.35)); }
.start-tagline:empty { display: none; }
.screen[data-screen="start"].is-active .brand-mark .mk-word { animation: mk-rise 900ms var(--ease-out) both; }
.screen[data-screen="start"].is-active .brand-mark .mk-num { animation: mk-rise 900ms var(--ease-out) 220ms both; }
.screen[data-screen="start"].is-active .brand-mark .mk-tag { animation: fade-in 700ms var(--ease-std) 600ms both; }

/* (A4's league-table head and A5's cup page moved into the A7 standings block below.) */

/* --- A4 (ADR-062): the club's two kits under its story on the club screen, drawn flat with the crest on the chest -- */
/* beside the story, not under it: the column keeps its height, so the action never leaves the panel */
.info-col:has(.info-kits) { grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(14px, 1.6vw, 30px); }
.info-col:has(.info-kits) > .info-head { grid-column: 1 / -1; }
.info-kits { grid-column: 2; grid-row: 2; align-self: start; display: flex; gap: clamp(8px, 0.9vw, 16px); margin-top: 12px; }
.info-kit { margin: 0; display: grid; justify-items: center; gap: 4px; }
.info-kit .sphere { --sphere: clamp(44px, 7vh, 84px); margin: 6px 14px 12px; }
.info-kit figcaption { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-500); }
@media (max-height: 520px) {
  .info-col:has(.info-kits) { grid-template-columns: minmax(0, 1fr); }
  .info-kits { grid-column: 1; grid-row: auto; gap: 10px; margin-top: 6px; }
  .info-kit .sphere { --sphere: 40px; margin: 4px 8px 8px; }
  .info-kit figcaption { font-size: 10px; letter-spacing: 0.1em; }
}

/* --- A4 (ADR-062): the club card's colour field wears the home kit's pattern, as the pieces do (the old diagonal band
   was the old piece's sash); plain kits are one clean field. Colours come in as --k1/--k2/--k3 from the kit. -------- */
.kit-field[data-pattern] { --k2d: color-mix(in srgb, var(--k2) 76%, var(--ink-900)); --k3d: color-mix(in srgb, var(--k3) 76%, var(--ink-900)); background: var(--k1d); }
.kit-field[data-pattern="stripes"] { background: repeating-linear-gradient(90deg, var(--k2d) 0 14.29%, var(--k1d) 14.29% 28.57%); }
.kit-field[data-pattern="central-stripe"] { background: linear-gradient(90deg, var(--k1d) 0 39%, var(--k3d) 39% 41%, var(--k2d) 41% 59%, var(--k3d) 59% 61%, var(--k1d) 61%); }
.kit-field[data-pattern="sash"] { background: linear-gradient(112deg, var(--k1d) 0 56%, var(--k2d) 56% 66%, var(--k1d) 66% 100%); }
.kit-field[data-pattern="sleeves"] { background: linear-gradient(90deg, var(--k2d) 0 10%, var(--k1d) 10% 90%, var(--k2d) 90%); }
.kit-field[data-pattern="halves"] { background: linear-gradient(90deg, var(--k1d) 0 50%, var(--k2d) 50%); }


/* --- A5 (ADR-068): the calendar's list carries the friendlies, the cup ties (tagged) and the skipped breaks. ---- */
/* the calendar: the list's rows share the page's height (two columns), the cup and friendly tags, the breaks */
.cal { grid-template-rows: repeat(var(--cal-rows, 9), minmax(0, 1fr)); }
.cal-row { font-size: clamp(10px, min(calc(4.6cqh * 9 / var(--cal-rows, 9)), 1.8cqw), 26px); }
.cal-row .cal-md { font-size: 0.9em; }
.cal-row.is-cup .cal-md, .cal-row.is-friendly .cal-md { justify-self: start; padding: 0.1em 0.3em; font-size: 0.7em; letter-spacing: 0.06em; text-transform: uppercase; }
.cal-row.is-cup .cal-md { background: var(--cup-teal); color: var(--cup-silver-light); }
.cal-row.is-friendly .cal-md { background: var(--surface-ink); color: var(--ink-700); }
.cal-name { display: flex; flex-direction: column; justify-content: center; min-width: 0; line-height: 1.05; }
.cal-what { font-family: var(--font-ui, inherit); font-weight: 600; font-size: 0.66em; letter-spacing: 0; text-transform: none; color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-tbd { font-style: normal; color: var(--ink-500); }
.cal-break { display: flex; align-items: center; gap: 0.6em; border-left-color: transparent; color: var(--ink-500); }
.cal-break-line { flex: 0 0 1.5em; height: 1px; background: rgba(16, 21, 31, 0.25); }
.cal-break-text { font-weight: 600; font-size: 0.78em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- The news revamp (6 October 2026): press photos, the full-bleed News card, the list and the one-screen article ---- */

/* a news photo's frame: the club's colours until the photo desk has printed it, then the photo */
.nphoto {
  position: relative; overflow: hidden; background-color: var(--c1, var(--ink-700)); background-size: cover; background-position: center;
  background-image: linear-gradient(135deg, var(--c1, var(--ink-700)) 0%, color-mix(in srgb, var(--c1, var(--ink-700)) 45%, var(--ink-900)) 100%);
}
.nphoto:not(.is-ready)::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.16) 50%, transparent 70%) 0 0 / 250% 100%;
  animation: nphoto-wait 1.6s linear infinite;
}
.nphoto.is-ready { animation: nphoto-in 420ms var(--ease-std) both; }
@keyframes nphoto-wait { from { background-position: 125% 0; } to { background-position: -125% 0; } }
@keyframes nphoto-in { from { filter: brightness(1.25) saturate(0.6); opacity: 0.6; } to { filter: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .nphoto:not(.is-ready)::after, .nphoto.is-ready { animation: none; } }

/* the News card: the photo fills it, the paper, the headline and its line over the photo's foot */
.dcard-news .nc-slide { position: relative; justify-content: flex-end; gap: 0; padding: 0; overflow: hidden; }
.dcard-news .nc-slide[aria-hidden="true"] { opacity: 1; }
.nc-photo { position: absolute; inset: 0; }
.nc-over {
  position: relative; display: flex; flex-direction: column; gap: clamp(4px, 1.4cqh, 10px);
  padding: clamp(46px, 22cqh, 120px) clamp(12px, 4cqw, 22px) clamp(10px, 3.4cqh, 20px);
  background: linear-gradient(180deg, rgba(8, 12, 20, 0) 0%, rgba(8, 12, 20, 0.62) 38%, rgba(8, 12, 20, 0.9) 100%);
}
.dcard-news .nc-masthead { border-bottom: 1px solid rgba(255, 255, 255, 0.35); padding-bottom: 6px; }
.dcard-news .nc-source { font-family: var(--font-display); font-weight: 700; font-size: clamp(11px, min(3.4cqh, 4.6cqw), 16px); letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper); }
.dcard-news .nc-slide.is-yours .nc-source::after { color: rgba(255, 255, 255, 0.7); }
.dcard-news .nc-when { color: rgba(255, 255, 255, 0.78); font-size: clamp(10px, min(3cqh, 4cqw), 14px); }
.dcard-news .nc-headline { color: var(--paper); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); font-size: clamp(17px, min(8.4cqh, 9.4cqw), 40px); }
.dcard-news .nc-standfirst { font-family: var(--font-ui); font-style: normal; font-weight: 500; color: rgba(255, 255, 255, 0.86); font-size: clamp(11px, min(3.8cqh, 4.6cqw), 16px); }
.dcard-news .nc-dots { padding-top: 8px; }

/* the News page: each headline with its photo */
.news-split .news-row { flex-direction: row; align-items: center; gap: clamp(8px, 0.8vw, 14px); padding-left: 14px; }
.news-row.is-yours::before { left: 4px; top: 50%; margin-top: -3px; }
.nr-thumb { flex: none; width: clamp(64px, 6.4vw, 112px); aspect-ratio: 3 / 2; }
.nr-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

/* the article: the photo beside the words, all on one screen */
.np.np-photo-led { --stock: var(--paper); grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); background: var(--paper); }
.np-photo { min-height: 0; }
.np-photo-led .np-main { justify-content: center; gap: calc(clamp(8px, 1.3vh, 14px) * var(--fit)); padding: clamp(14px, 2.2vh, 30px) clamp(16px, 1.8vw, 34px); }
.np-kicker { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-family: var(--font-display); font-weight: 600; font-size: calc(clamp(11.5px, 0.8vw, 14px) * var(--fit)); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500); }
.np-kicker b { color: var(--ink-900); font-weight: 700; padding-left: 8px; border-left: 4px solid var(--c1); }
.np-photo-led .np-headline { font-family: var(--font-display); letter-spacing: 0.005em; line-height: 1.02; font-size: calc(clamp(24px, 2.15vw, 42px) * var(--fit)); }
.np-photo-led .np-standfirst { font-family: var(--font-ui); font-style: normal; font-weight: 500; font-size: calc(clamp(14.5px, 1.02vw, 18px) * var(--fit)); color: var(--ink-700); }
.np-facts { margin: 0; display: flex; flex-wrap: wrap; border-top: 2px solid var(--ink-900); border-bottom: 1px solid var(--press-rule); }
.np-facts div { display: grid; gap: 1px; padding: calc(7px * var(--fit)) clamp(10px, 1vw, 18px) calc(7px * var(--fit)) 0; margin-right: clamp(10px, 1vw, 18px); border-right: 1px solid var(--press-rule); }
.np-facts div:last-child { border-right: 0; margin-right: 0; }
.np-facts dt { font-family: var(--font-display); font-weight: 600; font-size: calc(clamp(10.5px, 0.72vw, 13px) * var(--fit)); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500); }
.np-facts dd { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: calc(clamp(18px, 1.45vw, 28px) * var(--fit)); line-height: 1.05; color: var(--ink-900); text-transform: capitalize; }
.np-photo-led .np-text p { margin: 0 0 0.7em; max-width: 60ch; font-size: calc(clamp(14.5px, 1.02vw, 18px) * var(--fit)); line-height: 1.5; color: var(--ink-900); }
.np-photo-led .np-text p:last-child { margin-bottom: 0; }
.np-credit { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: calc(clamp(11px, 0.76vw, 13.5px) * var(--fit)); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-500); }

@media (max-height: 520px) {
  .dcard-news .nc-over { padding: 34px 8px 6px; gap: 3px; }
  .dcard-news .nc-standfirst { display: none; }
  .nr-thumb { width: 54px; }
  .news-split .news-row { padding-left: 8px; gap: 6px; }
  .np.np-photo-led { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); }
  .np-photo-led .np-main { padding: 8px 10px; gap: calc(5px * var(--fit)); }
  .np-kicker { font-size: calc(9.5px * var(--fit)); gap: 2px 8px; }
  .np-kicker b { padding-left: 5px; border-left-width: 3px; }
  .np-photo-led .np-headline { font-size: calc(17px * var(--fit)); }
  .np-photo-led .np-standfirst { display: block; font-size: calc(11.5px * var(--fit)); }
  .np-facts dt { font-size: calc(8.5px * var(--fit)); }
  .np-facts dd { font-size: calc(14px * var(--fit)); }
  .np-facts div { padding: 3px 8px 3px 0; margin-right: 8px; }
  .np-photo-led .np-text p { font-size: calc(11.5px * var(--fit)); line-height: 1.4; }
  .np-credit { font-size: calc(9px * var(--fit)); }
}
.dcard-news .nc-over { margin-top: auto; }
.news-split .news-row .mail-from { display: block; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nobr { white-space: nowrap; }

/* --- A7: the standings -- two pages swiped between (the user: "swipe between it and the standings so that you can
   see your position in the league and in the cup at once"). The league's page keeps A4's navy, gold and seal; the
   European Super Cup's page is its own: deep teal, silver, the Chalice. Nothing is shared but the track that carries
   them. Touch swipe, mouse drag, the switch and the arrow keys; the track snaps and settles (§2.9a). ------------- */
.st-viewport { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; touch-action: pan-y; }
.st-track { --drag: 0px; height: 100%; display: flex; transform: translateX(calc(var(--i, 0) * -100% + var(--drag))); transition: transform 460ms var(--ease-out); }
.st-track.is-dragging { transition: none; }
.st-page {
  --py: clamp(10px, 1.1vw, 18px); --px: clamp(12px, 1.2vw, 20px);
  flex: 0 0 100%; min-width: 0; height: 100%; display: flex; flex-direction: column; padding: 0 var(--px) var(--py);
  user-select: none; -webkit-user-select: none; transition: opacity 460ms var(--ease-std);
}
.st-page[aria-hidden="true"] { opacity: 0.5; }
.st-league { background: linear-gradient(180deg, var(--esl-navy) 0%, var(--esl-night) 100%); color: var(--esl-ice); }
.st-cup { background: linear-gradient(180deg, var(--cup-teal) 0%, var(--cup-deep) 100%); color: var(--cup-mist); }

/* each page's head band, bled to the page's edges */
.st-band {
  position: relative; flex: none; display: flex; align-items: center; gap: clamp(8px, 0.8vw, 14px); min-width: 0; color: var(--paper);
  margin: 0 calc(-1 * var(--px)) clamp(4px, 0.6vh, 8px); padding: clamp(8px, 1.1vh, 14px) var(--px) clamp(9px, 1.2vh, 15px);
}
.st-league .st-band { background: linear-gradient(100deg, var(--esl-royal) 0%, var(--esl-navy) 46%, var(--esl-night) 100%); box-shadow: inset 0 -2px 0 var(--esl-gold), inset 0 1px 0 rgba(255, 255, 255, 0.16); }
.st-cup .st-band { background: linear-gradient(100deg, var(--cup-teal-bright) 0%, var(--cup-teal) 46%, var(--cup-deep) 100%); box-shadow: inset 0 -2px 0 var(--cup-silver), inset 0 1px 0 rgba(255, 255, 255, 0.18); }
.st-band .card-title { color: var(--paper); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.st-band .card-sub { margin-left: auto; flex: none; }
.st-league .card-sub { color: var(--esl-gold-light); }
.st-cup .card-sub { color: var(--cup-silver); }
.st-mark { display: grid; place-items: center; flex: none; width: clamp(24px, 1.75vw, 34px); height: clamp(24px, 1.75vw, 34px); }
.st-mark-cup { width: auto; }
.dcard-seal, .detail-esl-lockup, .st-cup-lockup, .st-cup-emblem { display: block; width: auto; height: 100%; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)); }
.dcard-seal { width: 100%; }
.st-lockup { display: block; flex: none; height: clamp(34px, 3.1vw, 60px); }
.st-rule { align-self: stretch; flex: none; width: 2px; margin: 4px 2px; }
.st-league .st-rule { background: var(--esl-gold); }
.st-cup .st-rule { background: var(--cup-silver); }
.st-band-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 1.7vw, 32px); letter-spacing: 0.06em; text-transform: uppercase; color: var(--paper); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); white-space: nowrap; }

/* the league's rows on its navy (A4 Round 4: "it should all be blue"), the leader on a gold tile */
.st-league .dt-head, .st-league .ft-head { color: color-mix(in srgb, var(--esl-ice) 60%, transparent); }
.st-league .dt-row, .st-league .ft-row { color: var(--esl-ice); }
.st-league .dt-row + .dt-row, .st-league .ft-row + .ft-row { border-top-color: color-mix(in srgb, var(--esl-ice) 9%, transparent); }
.st-league :is(.dt-pos, .dt-name, .dt-pts, .ft-pos, .ft-name, .ft-pts) { color: var(--paper); }
.st-league :is(.dt-row, .ft-row).is-yours { background: color-mix(in srgb, var(--esl-royal) 72%, transparent); color: var(--paper); box-shadow: none; }
.st-league .dt-move.is-up { color: var(--paper); }
.st-league .dt-move.is-down { color: color-mix(in srgb, var(--esl-ice) 40%, transparent); }
.dcard-standings:hover .st-league .dt-row:not(.is-yours):nth-child(odd) { background: color-mix(in srgb, var(--esl-ice) 6%, transparent); }
.st-league :is(.dt-crest, .ft-crest) .crest { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)); }
.st-league .dt-body .dt-row:first-child .dt-pos, .st-league .ft-row:nth-child(2) .ft-pos {
  justify-self: start; display: grid; place-items: center; min-width: 1.45em; height: 1.45em; padding-top: 0.06em;
  background: linear-gradient(180deg, var(--esl-gold-light), var(--esl-gold) 70%); color: var(--esl-navy);
  box-shadow: inset 0 -1px 0 var(--esl-gold-deep);
}

/* the Dashboard's card: the two pages, and under both the line with the two positions and the pager */
.dcard-standings .card-face { padding: 0; background: var(--paper); }
.st-foot {
  flex: none; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 clamp(8px, 0.9vw, 16px) 0 clamp(12px, 1.2vw, 20px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(240, 243, 247, 0.96)); box-shadow: inset 0 1px 0 rgba(16, 21, 31, 0.08);
}
.st-line { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: clamp(12px, 0.86vw, 15px); color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-pager { flex: none; display: inline-flex; background: var(--surface-ink); }
.st-pip {
  border: 0; background: transparent; cursor: pointer; min-height: 32px; padding: 0 clamp(8px, 0.7vw, 12px);
  font-family: var(--font-display); font-weight: 700; font-size: clamp(11px, 0.72vw, 13px); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500);
  transition: color var(--t-fast), background var(--t-fast);
}
.st-pip:hover { color: var(--ink-900); }
.st-pip.is-on { color: var(--ink-900); background: var(--paper); box-shadow: inset 0 -3px 0 var(--accent); }
.st-foot .dcard-open { margin-left: 0; }

/* the Super Cup page of the card: the one line, then the club's path stage by stage */
.cs-status { flex: none; margin: 0 0 0.5em; font-weight: 600; font-size: clamp(12px, 0.88vw, 16px); line-height: 1.25; color: var(--paper); }
.cs-path { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; min-height: 0; display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); }
.cs-step {
  display: grid; grid-template-columns: 6.8em 1.5em minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 0.6em; align-content: center;
  min-height: 0; padding: 0 0.6em; border-left: 3px solid transparent; font-size: clamp(11.5px, min(0.88vw, 1.7vh), 16px);
}
.cs-step + .cs-step { border-top: 1px solid color-mix(in srgb, var(--cup-mist) 10%, transparent); }
.cs-stage { grid-row: 1 / 3; align-self: center; font-family: var(--font-display); font-weight: 700; font-size: 0.86em; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cup-silver); }
.cs-crest { grid-row: 1 / 3; align-self: center; }
.cs-crest .crest { display: block; height: 1.45em; width: auto; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)); }
.cs-opp { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--paper); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-line { grid-column: 3; font-weight: 600; font-size: 0.84em; color: color-mix(in srgb, var(--cup-mist) 72%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-opp:empty { display: none; }
.cs-opp:empty + .cs-line { grid-column: 2 / 4; grid-row: 1 / 3; align-self: center; }
.cs-step.is-next { background: color-mix(in srgb, var(--cup-aqua) 15%, transparent); border-left-color: var(--cup-aqua); }
.cs-step.is-next .cs-line, .cs-step.is-won .cs-line { color: var(--cup-aqua); }
.cs-step.is-lost .cs-opp { color: var(--cup-mist); }
.cs-step:is(.is-later, .is-none) { opacity: 0.4; }

/* the standings page: a plain head (Back, Standings, the switch, the season), the two branded pages beneath */
.detail-standings { width: 100%; height: 100%; }
.detail-standings .card-face { height: 100%; display: flex; flex-direction: column; padding: clamp(10px, 1.1vw, 18px) clamp(12px, 1.2vw, 20px); }
.detail-standings .detail-head { padding-bottom: 8px; }
.detail-standings .detail-body { display: flex; flex-direction: column; overflow: hidden; padding-top: 8px; }
.detail-standings .st-page { container-type: size; }
.detail-standings .st-page > .ft, .detail-standings .st-page > .cb { flex: 1 1 auto; min-height: 0; }
.detail-season { margin-left: auto; font-family: var(--font-display); font-weight: 700; font-size: clamp(16px, 1.4vw, 26px); letter-spacing: 0.08em; color: var(--ink-500); }
.st-seg { margin-left: clamp(8px, 1vw, 18px); background: var(--surface-ink); box-shadow: none; backdrop-filter: none; }
.st-seg button { display: inline-flex; align-items: center; gap: 0.5em; min-height: 40px; padding: 0 clamp(12px, 1vw, 18px); font-size: clamp(13px, 0.95vw, 17px); }
.st-seg button.is-on { background: var(--paper); box-shadow: inset 0 -3px 0 var(--accent), 0 4px 12px rgba(16, 24, 40, 0.12); }
.st-seg-mark { display: block; width: 1.25em; height: 1.25em; flex: none; }
.st-seg-mark svg { display: block; width: 100%; height: 100%; }
.st-cup .st-band .cs-status { margin: 0; flex: 1 1 auto; min-width: 0; font-size: clamp(14px, 1.15vw, 21px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.detail-standings .st-page { cursor: grab; }
.detail-standings .st-track.is-dragging .st-page { cursor: grabbing; }

/* the Super Cup's bracket on its teal (A5's bracket, re-dressed in the cup's own colours); the manager's path lit */
.cb { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 24px); padding-top: clamp(8px, 1.4vh, 18px); font-size: clamp(11px, min(2.6cqh, 1.15cqw), 19px); }
.cb-stage { display: flex; flex-direction: column; min-height: 0; }
.cb-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-bottom: 0.5em; border-bottom: 1px solid color-mix(in srgb, var(--cup-silver) 30%, transparent); }
.cb-label { font-family: var(--font-display); font-weight: 700; font-size: 1.15em; letter-spacing: 0.08em; text-transform: uppercase; color: var(--paper); }
.cb-when { font-weight: 600; font-size: 0.82em; color: var(--cup-silver); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-ties { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-around; gap: 0.6em; padding: 0.6em 0; }
.cb-tbd { margin: auto 0; font-weight: 600; font-size: 0.9em; color: color-mix(in srgb, var(--cup-mist) 60%, transparent); }
.cb-tie { display: grid; gap: 0.15em; padding: 0.45em 0.6em; background: color-mix(in srgb, var(--cup-mist) 7%, transparent); border-left: 3px solid transparent; }
.cb-tie.is-yours { background: color-mix(in srgb, var(--cup-aqua) 18%, transparent); border-left-color: var(--cup-aqua); box-shadow: 0 0 0 1px color-mix(in srgb, var(--cup-aqua) 35%, transparent); }
.cb-club { display: grid; grid-template-columns: 1.4em minmax(0, 1fr) auto; align-items: center; gap: 0.5em; color: color-mix(in srgb, var(--cup-mist) 80%, transparent); }
.cb-tie.is-decided .cb-club:not(.is-through) { opacity: 0.55; }
.cb-club.is-through { color: var(--paper); }
.cb-club.is-yours .cb-name { color: var(--paper); text-decoration: underline 2px var(--cup-aqua); text-underline-offset: 0.22em; }
.cb-crest .crest { height: 1.3em; width: auto; display: block; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)); }
.cb-name { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-agg { font-family: var(--font-display); font-weight: 700; font-size: 1.15em; color: var(--paper); min-width: 1.2em; text-align: right; }
.cb-legs { display: flex; flex-wrap: wrap; gap: 0 0.8em; font-size: 0.78em; font-weight: 600; color: color-mix(in srgb, var(--cup-mist) 66%, transparent); }
.cb-legs:empty { display: none; }
.cb-legs em { font-style: normal; color: var(--cup-aqua); }
.cb-stage.is-final .cb-ties { justify-content: center; }
.cb-stage.is-final .cb-tie { padding: 0.8em; font-size: 1.12em; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cup-silver) 55%, transparent); }
.cb-winner { flex: none; display: flex; align-items: center; gap: 0.7em; margin: 0; padding: 0.6em 0 0; border-top: 1px solid color-mix(in srgb, var(--cup-silver) 40%, transparent); font-size: clamp(12px, 1vw, 18px); color: var(--paper); }
.cb-winner .crest { height: 2.2em; width: auto; }
.cb-winner small { display: block; font-weight: 600; color: var(--cup-silver); }
.cb-winner b { font-family: var(--font-display); font-size: 1.4em; letter-spacing: 0.04em; text-transform: uppercase; }

/* the small mark wherever the cup is named at 16-24 px (a fixture, a calendar row, a letter) */
.cup-tile, .dcard-cup-tile, .st-seg-tile { display: inline-block; width: 1em; height: 1em; vertical-align: -0.14em; flex: none; }
.dcard-cup-tile { width: 100%; height: 100%; }

@media (max-height: 520px) {
  .st-page { --py: 6px; --px: 10px; }
  .st-band { padding: 4px var(--px) 5px; margin-bottom: 3px; }
  .st-mark { width: 18px; height: 18px; }
  .st-lockup { height: 24px; }
  .st-band-title { font-size: 15px; }
  .st-foot { min-height: 30px; gap: 6px; }
  .st-line { font-size: 11px; }
  .st-pip { min-height: 26px; padding: 0 7px; font-size: 10px; }
  .cs-status { font-size: 11px; margin-bottom: 3px; }
  .cs-step { font-size: 10.5px; grid-template-columns: 6.2em 1.4em minmax(0, 1fr); }
  .detail-standings .card-face { padding: 6px 10px; }
  .detail-standings .detail-head { padding-bottom: 5px; }
  .detail-standings .detail-body { padding-top: 5px; }
  .detail-season { font-size: 13px; }
  .st-seg button { min-height: 30px; padding: 0 8px; font-size: 11px; }
  .st-cup .st-band .cs-status { font-size: 12px; }
  .cb { gap: 6px; padding-top: 6px; }
}

/* A7: a Super Cup tie in the season's calendar -- the cup's small mark in place of a round number, its teal rule */
.cal-row.is-cup { border-left-color: var(--cup-teal); }
.cal-row.is-cup.is-next { border-left-color: var(--accent); }
.cal-row.is-cup .cal-md { padding: 0; background: none; font-size: 1em; }
.cal-cup { display: block; width: 1.3em; height: 1.3em; }
.cal-cup .cup-tile { width: 100%; height: 100%; display: block; }
.cal-row.is-cup .cal-what { color: var(--cup-teal); }

/* A7: the Super Cup's letters -- sent as the competition, its small mark and a teal rule; the reader's label the same */
.dmail-item.is-cup .dmail-from, .mail-row.is-cup .mail-from { color: var(--cup-teal); }
.dmail-item.is-cup .cup-tile, .mail-row.is-cup .cup-tile { width: 1.15em; height: 1.15em; vertical-align: -0.2em; margin-right: 0.2em; }
.mail-row.is-cup:not(.is-on) { border-left-color: var(--cup-teal); }
.mail.is-cup .mail-label { display: inline-flex; align-items: center; gap: 0.4em; background: var(--cup-teal); color: var(--cup-silver-light); }
.mail.is-cup .mail-label .cup-tile { width: 1.2em; height: 1.2em; }
.mail.is-cup .mail-head { box-shadow: inset 0 -2px 0 var(--cup-teal); }

/* A7: the next match is a Super Cup tie -- the cup's mark on its name and a teal-and-silver rule over the card */
.match-card.is-cup .mc-round { display: inline-flex; align-items: center; gap: 0.45em; color: var(--cup-teal); }
.match-card.is-cup .mc-round .cup-tile { width: 1.35em; height: 1.35em; }
.match-card.is-cup .card-face { box-shadow: inset 0 4px 0 var(--cup-teal), inset 0 6px 0 var(--cup-silver), 0 2px 4px rgba(6, 26, 14, 0.16), 0 18px 34px -12px rgba(6, 26, 14, 0.42), 0 46px 90px -34px rgba(6, 26, 14, 0.5); }
.sd-next.is-cup small { color: var(--cup-teal); }
.sd-next.is-cup .cup-tile { width: 1.15em; height: 1.15em; vertical-align: -0.2em; margin-right: 0.3em; }
.np-cup { display: inline-flex; align-items: center; gap: 0.35em; color: var(--cup-teal); font-weight: 700; }
.np-cup .cup-tile { width: 1.15em; height: 1.15em; }
/* A7: the standing line takes the foot's whole width; the pager and the arrow sit beneath it */
.st-foot { flex-wrap: wrap; row-gap: 2px; padding-top: 6px; padding-bottom: 4px; }
.st-line { flex: 1 0 100%; }
.st-foot .dcard-open { margin-left: auto; }

/* --- Standings, round 2 (the user, 8 Oct): swiped exactly like the News -- the small bar, no "League" / "Super Cup"
   labels -- and the league's navy or the cup's teal takes the whole card, inside and out: no paper left over. ------- */
.dcard-standings .card-face, .detail-standings .card-face { padding: 0; background: var(--esl-night); transition: background 460ms var(--ease-std); overflow: hidden; }
.dcard-standings.is-page-1 .card-face, .detail-standings.is-page-1 .card-face { background: var(--cup-deep); }
.detail-standings .card-face { height: 100%; }
.st-dots { padding-top: 0; justify-content: center; }
.st-dots .nc-dot { height: 30px; }
.st-dots .nc-dot::after { background: rgba(255, 255, 255, 0.32); }
.st-dots .nc-dot.is-on::after { background: var(--paper); }
.dcard-standings .st-page { --py: clamp(4px, 0.6vw, 10px); }
.detail-standings .st-page { --py: clamp(4px, 0.6vw, 10px); }
.st-back { flex: none; min-height: 36px; height: auto; padding: 0 12px 0 8px; font-size: clamp(12px, 0.9vw, 16px); background: rgba(255, 255, 255, 0.14); color: var(--paper); box-shadow: none; }
.st-back:hover { background: rgba(255, 255, 255, 0.26); }
.st-band .tnum.card-sub { font-family: var(--font-display); font-weight: 700; font-size: clamp(14px, 1.2vw, 22px); letter-spacing: 0.08em; }
@media (max-height: 520px) {
  .st-dots .nc-dot { height: 20px; }
  .st-back { min-height: 28px; padding: 0 8px 0 4px; font-size: 11px; }
  .detail-standings .card-face { padding: 0; }
}

/* --- Another club (the user, 8 Oct): its colours on a band, its squad by line; rows in the table press through to it --- */
[data-rival] { cursor: pointer; }
.detail-standings .ft-row[data-rival]:hover, .cb-club[data-rival]:hover { background: rgba(255, 255, 255, 0.1); }
.detail-rival { width: 100%; height: 100%; }
.detail-rival .card-face { height: 100%; display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.rv-band {
  flex: none; display: flex; align-items: center; gap: clamp(10px, 1.1vw, 20px); padding: clamp(8px, 1.2vh, 16px) clamp(12px, 1.4vw, 24px);
  background: linear-gradient(100deg, var(--rv1), color-mix(in srgb, var(--rv1) 62%, var(--ink-900))); color: var(--paper); box-shadow: inset 0 -3px 0 var(--rv2);
}
.is-light-kit .rv-band { background: linear-gradient(100deg, var(--rv1), color-mix(in srgb, var(--rv1) 80%, var(--ink-500))); color: var(--ink-900); }
.rv-band .st-back { background: rgba(255, 255, 255, 0.2); color: inherit; }
.is-light-kit .rv-band .st-back { background: rgba(16, 21, 31, 0.1); }
.rv-crest { flex: none; width: clamp(34px, 3.4vw, 60px); height: clamp(34px, 3.4vw, 60px); display: block; }
.rv-crest svg { width: 100%; height: 100%; display: block; }
.rv-title, .rv-stand { display: grid; line-height: 1.15; min-width: 0; }
.rv-title { flex: 1 1 auto; }
.rv-stand { text-align: right; flex: none; }
.rv-title b { font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 1.8vw, 34px); letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-stand b { font-family: var(--font-display); font-weight: 700; font-size: clamp(14px, 1.2vw, 22px); letter-spacing: 0.05em; }
.rv-band small { opacity: 0.8; font-size: clamp(10px, 0.8vw, 14px); font-weight: 600; }
.rv-grid { display: grid; grid-template-columns: 2em 3.4em minmax(9em, 1.6fr) 2.6em 2.6em 5.6em 5.6em; align-items: center; gap: 0.7em; padding: 0 clamp(12px, 1.4vw, 24px); min-height: 2.5em; }
.rv-row { width: 100%; border: 0; border-bottom: 1px solid rgba(16, 21, 31, 0.06); background: transparent; text-align: left; cursor: pointer; color: var(--ink-700); font: inherit; }
.rv-row:hover { background: color-mix(in srgb, var(--rv1) 10%, transparent); }
.rv-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; font-size: clamp(12.5px, 1vw, 19px); }
.rv-body .sh-head { background: var(--paper-2); }
.rv-loan { font-style: normal; font-size: 0.8em; font-weight: 600; color: var(--ink-500); }
.rv-hint { flex: none; margin: 0; padding: 5px clamp(12px, 1.4vw, 24px); font-size: clamp(10px, 0.8vw, 13px); font-weight: 600; color: var(--ink-500); background: var(--surface-ink); }
@media (max-height: 520px) {
  .rv-band { padding: 4px 10px; gap: 8px; }
  .rv-crest { width: 28px; height: 28px; }
  .rv-title b { font-size: 15px; }
  .rv-stand b { font-size: 12px; }
  .rv-grid { min-height: 28px; }
  .rv-hint { display: none; }
}
/* a short screen (a landscape phone): the league's table and the cup's bracket no longer squeeze into the page -- the
   page scrolls under its band, with the squad hub's bar, instead of cutting the lower rows off */
@media (max-height: 520px) {
  .detail-standings .st-page { overflow-y: auto; }
  .detail-standings .st-page > .ft, .detail-standings .st-page > .cb { flex: none; }
  .detail-standings .st-page > .ft { grid-template-rows: none; }
  .detail-standings .ft-row { min-height: 28px; }
  .detail-standings .st-band { position: sticky; top: 0; z-index: 2; }
  .dcard-standings .st-page { overflow-y: auto; }
  .dcard-standings .dt-body { flex: none; grid-template-rows: none; }
  .dcard-standings .dt-row { min-height: 24px; }
}
/* on the league's navy and the cup's teal the thumb is light, so it can be seen */
.career .st-page::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.4); border: 3px solid transparent; background-clip: padding-box; }
.career .st-page::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.7); }
@supports (-moz-appearance: none) { .career .st-page, .career .st-page:hover { scrollbar-color: rgba(255, 255, 255, 0.45) transparent; } }

/* the way back: bigger, so a thumb finds it (the user, 8 Oct) */
.st-back { min-height: 46px; padding: 0 18px 0 12px; font-size: clamp(14px, 1.05vw, 19px); }
.st-back svg { width: 22px; height: 22px; }
@media (max-height: 520px) { .st-back { min-height: 40px; padding: 0 14px 0 8px; font-size: 13px; } .st-back svg { width: 20px; height: 20px; } }

/* (the user, 8 Oct) an email that matters carries a red "!" before its subject, like Outlook's high-importance mark */
.mail-flag { display: inline-block; flex: none; margin-right: 0.45em; width: 1em; text-align: center; font-style: normal; font-family: var(--font-display); font-weight: 800; font-size: 1.3em; line-height: 0.8; color: var(--form-loss); vertical-align: -0.06em; -webkit-text-stroke: 0.6px var(--form-loss); }
.mail-subject-line .mail-flag { margin-right: 0.3em; }

/* --- Squad Hub: the shirt-number picker (8 Oct 2026) ---------------------------------------------------------------
   The number in a row is a button; it opens one sheet of 1 to 99. Blue is his own number (selection), a worn number
   carries its wearer's name and swaps, the rest are free. Sharp, light, the design system's plate. */
.sh-num.press { font: inherit; color: var(--ink-700); background: var(--surface-ink); border: 0; padding: 0.2em 0; min-width: 2em; cursor: pointer; transition: background var(--t-micro), color var(--t-micro); }
.sh-num.press:hover, .sh-num.press:focus-visible { background: var(--ink-900); color: var(--paper); }
.np-veil { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; padding: 16px; background: rgba(10, 16, 26, 0.38); animation: gp-fade 200ms var(--ease-std) both; }
.np-sheet { width: min(760px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 22px 24px 24px; background: rgba(255, 255, 255, 0.96); box-shadow: var(--shadow-2); animation: gp-rise 300ms var(--ease-out) both; }
.np-head { display: flex; align-items: center; gap: 16px; }
.np-head > div { flex: 1 1 auto; min-width: 0; }
.np-eyebrow { display: block; font: 600 13px/1 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500); }
.np-head h2 { margin: 6px 0 0; font: 700 clamp(26px, 2.4vw, 38px)/1 var(--font-display); text-transform: uppercase; color: var(--ink-900); overflow-wrap: anywhere; }
.np-now { font: 700 clamp(40px, 3.6vw, 60px)/0.85 var(--font-display); color: var(--accent-ink); }
.np-close { width: 40px; height: 40px; display: grid; place-items: center; border: 0; background: var(--surface-ink); color: var(--ink-900); cursor: pointer; }
.np-close svg { width: 18px; height: 18px; }
.np-hint { margin: 12px 0 14px; font-size: 14.5px; font-weight: 500; color: var(--ink-500); }
.np-grid { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 4px; }
.np-cell { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 52px; padding: 4px 2px; border: 0; cursor: pointer;
  background: var(--paper-2); color: var(--ink-900); transition: background var(--t-micro), color var(--t-micro), transform var(--t-micro) var(--ease-out); }
.np-cell b { font: 700 20px/1 var(--font-display); }
.np-cell small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 600; color: var(--ink-500); }
.np-cell.is-worn { background: rgba(16, 21, 31, 0.1); }
.np-cell.is-worn b { color: var(--ink-500); }
.np-cell.is-mine { background: var(--accent); color: var(--paper); box-shadow: inset 0 -3px 0 var(--accent-ink); }
.np-cell:not(.is-mine):hover, .np-cell:not(.is-mine):focus-visible { background: var(--ink-900); color: var(--paper); }
.np-cell:not(.is-mine):hover :is(b, small), .np-cell:not(.is-mine):focus-visible :is(b, small) { color: var(--paper); }
.np-cell:active { transform: scale(0.95); }
.np-veil.is-busy .np-grid { opacity: 0.6; pointer-events: none; }
@media (max-height: 520px) {
  .np-sheet { padding: 12px 14px 14px; }
  .np-head h2 { font-size: 22px; }
  .np-now { font-size: 34px; }
  .np-hint { margin: 6px 0 8px; font-size: 12.5px; }
  .np-grid { grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 3px; }
  .np-cell { min-height: 40px; }
  .np-cell b { font-size: 16px; }
  .np-cell small { font-size: 8.5px; }
}
@media (prefers-reduced-motion: reduce) { .np-veil, .np-sheet { animation: none; } }

/* the number picker, bigger (the user, 9 Oct: "too small, make it bigger so I can see and choose more clearly") */
.np-veil { padding: 12px; }
.np-sheet { width: min(1180px, 100%); max-height: calc(100vh - 24px); padding: 26px 30px 30px; }
.np-head h2 { font-size: clamp(30px, 2.8vw, 46px); }
.np-now { font-size: clamp(48px, 4.4vw, 76px); }
.np-close { width: 48px; height: 48px; }
.np-close svg { width: 22px; height: 22px; }
.np-hint { font-size: 16px; margin: 14px 0 18px; }
.np-grid { gap: 6px; }
.np-cell { min-height: clamp(62px, 7.4vh, 84px); gap: 3px; }
.np-cell b { font-size: clamp(22px, 1.9vw, 32px); }
.np-cell small { font-size: clamp(11px, 0.85vw, 14px); }
@media (max-height: 520px) {
  .np-veil { padding: 6px; }
  .np-sheet { width: 100%; max-height: calc(100vh - 12px); padding: 12px 14px 14px; }
  .np-head h2 { font-size: 24px; }
  .np-now { font-size: 38px; }
  .np-close { width: 44px; height: 44px; }
  .np-hint { font-size: 13px; margin: 6px 0 10px; }
  /* fewer, bigger cells; the sheet scrolls for the high numbers */
  .np-grid { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px; }
  .np-cell { min-height: 52px; }
  .np-cell b { font-size: 20px; }
  .np-cell small { font-size: 10px; }
}