/* =====================================================================================================
   A6 (ADR-065): the season's review -- full screen over the stadium, one step at a time. The game's own
   tokens (gameplan.css): light plates, sharp edges, blue only for what is current.
   ===================================================================================================== */
.season-review {
  position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: var(--pad);
  /* the career's pages go quiet behind it: the stadium stays, the cards blur away */
  background: linear-gradient(180deg, rgba(242, 244, 247, 0.8), rgba(242, 244, 247, 0.62) 55%, rgba(220, 230, 222, 0.6));
  backdrop-filter: blur(16px) saturate(1.05); -webkit-backdrop-filter: blur(16px) saturate(1.05);
}
.sr-stage {
  /* the user: "make it bigger so it takes much more of the screen" */
  width: min(1720px, 100%); height: calc(100dvh - 2 * var(--pad)); min-height: 0;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: clamp(10px, 1.6vh, 20px);
}
.sr-head { display: grid; gap: 4px; }
.sr-eyebrow { font-family: var(--font-display); font-weight: 700; font-size: clamp(13px, 0.9vw, 16px); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-500); }
.sr-title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(44px, 4.4vw, 96px); line-height: 0.92; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-900); text-shadow: 0 2px 0 rgba(255, 255, 255, 0.5); }
.sr-dots { list-style: none; margin: 6px 0 0; padding: 0; display: flex; gap: 6px; }
.sr-dots li { width: 28px; height: 4px; background: rgba(16, 21, 31, 0.15); }
.sr-dots li.is-done { background: var(--ink-700); }
.sr-dots li.is-on { background: var(--accent); }
.sr-cinematic { display: none; }
.sr-body { min-height: 0; overflow-y: auto; padding: clamp(14px, 2vh, 26px) clamp(16px, 1.8vw, 30px); background: var(--surface); box-shadow: var(--shadow-2); }
.sr-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sr-foot-right { display: flex; align-items: center; gap: 12px; }
.sr-primary.btn { min-height: 50px; min-width: 200px; justify-content: center; font-size: 18px; }
.sr-skip { all: unset; cursor: pointer; padding: 10px 6px; font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-700); }
.sr-skip:hover { color: var(--ink-900); text-decoration: underline; text-underline-offset: 4px; }
.sr-skip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* the table and the champion */
.sr-champion { display: flex; align-items: center; gap: 18px; padding: 14px 18px; margin-bottom: 14px; background: var(--paper); border-left: 6px solid var(--k1, var(--ink-900)); box-shadow: var(--shadow-1); }
.sr-champion-crest .crest { width: clamp(60px, 5.6vw, 116px); height: auto; display: block; filter: drop-shadow(0 3px 5px rgba(16, 24, 40, 0.3)); }
.sr-champion b { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 2.6vw, 52px); letter-spacing: 0.03em; text-transform: uppercase; line-height: 1; color: var(--ink-900); }
.sr-champion span { display: block; margin-top: 4px; font-size: clamp(15px, 1.25vw, 24px); font-weight: 600; color: var(--ink-700); }
.sr-body[data-step="table"] { display: flex; flex-direction: column; overflow: hidden; }
.sr-table { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
/* (the user, 8 Oct: "why are the season end cards this small") on a wide window the champions stand beside the table, not on top of it:
   the table takes the whole height and all ten rows show, where the stacked banner left room for three */
@media (min-aspect-ratio: 3 / 2) {
  .sr-body[data-step="table"] { display: grid; grid-template-columns: minmax(240px, 0.8fr) minmax(0, 2.2fr); gap: clamp(14px, 1.8vw, 32px); }
  .sr-body[data-step="table"] .sr-champion { margin: 0; flex-direction: column; justify-content: center; align-items: flex-start; align-self: stretch; gap: clamp(12px, 2.4vh, 28px); padding: clamp(14px, 2.6vh, 32px) clamp(16px, 1.6vw, 30px); }
  .sr-body[data-step="table"] .sr-champion-crest .crest { width: clamp(70px, min(9vw, 17vh), 170px); }
  .sr-body[data-step="table"] .sr-champion b { font-size: clamp(24px, min(2.6vw, 4.6vh), 50px); line-height: 1.02; }
  .sr-body[data-step="table"] .sr-row:not(.sr-row-head) { font-size: clamp(16px, min(1.6vw, 3.1vh), 34px); }
  .sr-body[data-step="table"] .sr-row-head { font-size: clamp(12px, 1.7vh, 16px); }
  .sr-body[data-step="table"] .sr-champion span { font-size: clamp(14px, min(1.25vw, 2.4vh), 24px); }
}
/* QA 4 Oct: a row never shrinks below its own height (at 1366x768 the rows were squeezed into one another); if the ten
   do not fit, the table scrolls rather than overlaps */
.sr-table ol { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; min-height: 0; display: grid; grid-template-rows: repeat(10, minmax(min-content, 1fr)); overflow-y: auto; }
.sr-row { display: grid; grid-template-columns: 2em 1.8em minmax(0, 1fr) 2.4em 3em 2.8em; align-items: center; gap: 12px; padding: 0 14px; font-size: clamp(16px, min(1.45vw, 2.6vh), 30px); color: var(--ink-700); border-left: 3px solid transparent; }
.sr-table ol .sr-row { border-top: 1px solid rgba(16, 21, 31, 0.06); }
.sr-row-head { font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-500); }
.sr-row > :nth-child(n + 4) { text-align: right; }
.sr-row-crest .crest { height: 1.5em; width: auto; display: block; }
.sr-row-name { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-900); overflow-wrap: anywhere; }
.sr-row b { font-family: var(--font-display); color: var(--ink-900); }
.sr-row.is-yours { background: var(--paper); border-left-color: var(--accent); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08); }

/* the awards and the Team of the Season */
.sr-body[data-step="awards"] { overflow: hidden; display: flex; flex-direction: column; }
.sr-awards { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(14px, 1.8vw, 36px); align-items: stretch; }
.sr-award-grid { grid-template-rows: repeat(3, minmax(0, 1fr)); align-content: stretch; }
.sr-award-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sr-award { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: clamp(10px, 1.4vh, 22px) clamp(12px, 1.2vw, 24px); background: var(--paper); box-shadow: var(--shadow-1); min-width: 0; min-height: 0; }
.sr-award-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(12px, 0.85vw, 17px); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500); }
.sr-award b { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, min(1.9vw, 3.4vh), 40px); letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.02; color: var(--ink-900); overflow-wrap: anywhere; }
.sr-award-club { display: flex; align-items: center; gap: 6px; font-size: clamp(13px, 0.95vw, 19px); font-weight: 600; color: var(--ink-700); }
.sr-award-club .crest { height: 1.3em; width: auto; }
.sr-award-value { font-size: clamp(13px, 0.95vw, 19px); font-weight: 500; color: var(--ink-500); }
.sr-team { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 6px; min-height: 0; }
.sr-team-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(13px, 0.9vw, 18px); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500); }
/* the Game Plan's own 3D board (the user: "use the graphics of the gameplan"), filling its column */
.sr-team-board { position: relative; min-height: 0; height: 100%; perspective: 1100px; perspective-origin: 50% 0%; container-type: size; }
.sr-team-board .pitch.gp-mini3d { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }

/* (the user, 8 Oct) the pages that had no logo now carry the club's: a crest and name at the head, and type big enough to fill the card */
.sr-body[data-step="board"], .sr-body[data-step="money"], .sr-body[data-step="summer"], .sr-body[data-step="career"] { display: flex; flex-direction: column; }
.sr-club-line { flex: none; display: flex; align-items: center; gap: clamp(12px, 1.4vw, 24px); margin-bottom: clamp(10px, 2.2vh, 26px); padding-bottom: clamp(8px, 1.6vh, 18px); border-bottom: 3px solid var(--k1, var(--ink-900)); }
.sr-club-crest .crest { height: clamp(52px, 10.5vh, 130px); width: auto; display: block; filter: drop-shadow(0 3px 5px rgba(16, 24, 40, 0.3)); }
.sr-club-line b { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, min(2.6vw, 4.8vh), 54px); letter-spacing: 0.03em; text-transform: uppercase; line-height: 1; color: var(--ink-900); }

/* the board's verdict: the crest on the left, the verdict large beside it */
.sr-body[data-step="board"] { display: grid; grid-template-columns: minmax(150px, 0.55fr) minmax(0, 2fr); gap: clamp(14px, 2vw, 40px); align-items: stretch; }
.sr-board-mark { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(10px, 2vh, 24px); padding: clamp(14px, 2.6vh, 34px) clamp(12px, 1.4vw, 28px); background: var(--paper); border-left: 6px solid var(--k1, var(--ink-900)); box-shadow: var(--shadow-1); text-align: center; }
.sr-board-crest .crest { width: clamp(80px, min(10vw, 24vh), 220px); height: auto; display: block; filter: drop-shadow(0 4px 8px rgba(16, 24, 40, 0.3)); }
.sr-board-mark b { font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, min(1.7vw, 3.4vh), 34px); letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.05; color: var(--ink-900); }
.sr-verdict { margin: 0; align-self: center; padding: clamp(10px, 2vh, 30px) clamp(6px, 1vw, 20px); border-left: 6px solid var(--ink-900); }
.sr-verdict p { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, min(3.6vw, 7vh), 78px); line-height: 1.08; color: var(--ink-900); text-wrap: balance; }
.sr-verdict footer { margin-top: 14px; font-family: var(--font-display); font-weight: 600; font-size: clamp(14px, 1.2vw, 22px); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500); }
.sr-verdict.is-sacked { border-left-color: var(--form-loss, #c8352b); }

/* the money and the career */
.sr-money, .sr-career { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: clamp(10px, 1.2vw, 22px); }
.sr-money div, .sr-career div { display: grid; align-content: center; gap: clamp(6px, 1.4vh, 16px); padding: clamp(14px, 2.4vh, 34px) clamp(14px, 1.5vw, 30px); background: var(--paper); box-shadow: var(--shadow-1); border-top: 4px solid var(--k1, var(--ink-900)); }
.sr-money span, .sr-career span { font-family: var(--font-display); font-weight: 700; font-size: clamp(13px, min(1.05vw, 2.2vh), 20px); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500); }
.sr-money b, .sr-career b { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, min(4.2vw, 9vh), 88px); line-height: 1; color: var(--ink-900); overflow-wrap: anywhere; }

/* the summer */
.sr-summer { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sr-summer li { display: grid; grid-template-columns: 10em minmax(0, 1fr); gap: clamp(10px, 1.2vw, 24px); align-items: baseline; padding: clamp(8px, 1.5vh, 18px) clamp(12px, 1.2vw, 24px); background: var(--paper); font-size: clamp(15px, min(1.4vw, 2.8vh), 28px); font-weight: 500; color: var(--ink-900); }
.sr-summer li span { font-family: var(--font-display); font-weight: 700; font-size: clamp(12px, min(0.95vw, 2vh), 18px); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-500); }

/* A7: the Super Cup -- the final on the cup's own teal plate, your run below it, the cup's two awards beside it */
.sr-body[data-step="cup"] { display: flex; flex-direction: column; }
.sr-cup { display: grid; gap: clamp(10px, 1.6vh, 20px); }
.sr-cup-final { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: clamp(14px, 1.6vw, 28px); align-items: center; padding: clamp(12px, 2vh, 24px) clamp(14px, 1.6vw, 28px); background: linear-gradient(135deg, var(--cup-teal), var(--cup-deep)); color: var(--cup-mist); box-shadow: var(--shadow-2); }
.sr-cup-mark { grid-row: 1 / 3; }
.sr-cup-mark svg { width: clamp(52px, 4.6vw, 96px); height: auto; display: block; }
.sr-cup-score { display: flex; flex-wrap: wrap; align-items: center; gap: 8px clamp(12px, 1.4vw, 26px); }
.sr-cup-side { display: inline-flex; align-items: center; gap: 10px; }
.sr-cup-side .crest { height: clamp(30px, 2.6vw, 52px); width: auto; display: block; }
.sr-cup-side b { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 2.1vw, 42px); letter-spacing: 0.03em; text-transform: uppercase; line-height: 1; color: #fff; }
.sr-cup-side.is-runner b { color: var(--cup-mist); opacity: 0.85; }
.sr-cup-words { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 1.8vw, 36px); color: #fff; }
.sr-cup-ground { margin-top: 6px; font-family: var(--font-display); font-weight: 600; font-size: clamp(13px, 0.95vw, 18px); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cup-mist); }
.sr-cup-lower { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(12px, 1.6vw, 30px); align-items: start; }
.sr-cup-awards { display: grid; gap: 8px; }
.sr-cup-run { display: grid; gap: 6px; }
.sr-cup-line { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 1.5vw, 28px); line-height: 1.1; color: var(--ink-900); }
.sr-cup-run ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sr-cup-run li { display: grid; grid-template-columns: 9em minmax(0, 1fr) minmax(0, 1.2fr) 6.5em; gap: 12px; align-items: center; padding: 9px 12px; background: var(--paper); border-left: 3px solid transparent; font-size: clamp(14px, 1vw, 18px); color: var(--ink-700); }
.sr-cup-run li > span:first-child { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-500); }
.sr-cup-run li b { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-900); min-width: 0; }
.sr-cup-run li b .crest { height: 1.4em; width: auto; flex: none; }
.sr-cup-run li small { display: block; font-size: 0.82em; color: var(--ink-500); }
.sr-cup-run li em { font-style: normal; text-align: right; font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-700); }
.sr-cup-run li.is-winners, .sr-cup-run li.is-through { border-left-color: #0f5c63; }
.sr-cup-run li.is-out, .sr-cup-run li.is-runners-up { border-left-color: var(--form-loss, #c8352b); }
@media (max-width: 900px) {
  .sr-cup-lower { grid-template-columns: minmax(0, 1fr); }
  .sr-cup-run li { grid-template-columns: minmax(0, 1fr) auto; }
  .sr-cup-run li > span:first-child { grid-column: 1 / -1; }
}

/* the summer card's way back into the review */
.match-card.is-quiet .mc-review { all: unset; position: relative; align-self: center; justify-self: center; text-align: center; margin-top: 8px; cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-700); transform: translateZ(20px); }
.match-card.is-quiet .mc-review:hover { color: var(--ink-900); text-decoration: underline; text-underline-offset: 4px; }

/* 1366 x 768 and other short desktops: the awards step fits without a scroll */
@media (max-height: 820px) and (min-height: 521px) {
  .sr-award { padding: 8px 12px; gap: 2px; }
  .sr-award b { font-size: 18px; }
  .sr-award-club, .sr-award-value { font-size: 12.5px; }
  .sr-title { font-size: clamp(34px, 3vw, 54px); }
  .sr-row { padding: 1px 10px; font-size: 16px; }
  .sr-row-crest .crest { height: 1.25em; }
  .sr-champion { padding: 8px 16px; margin-bottom: 8px; }
  .sr-champion-crest .crest { width: 54px; }
}
@media (max-height: 520px) {
  .season-review { padding: 8px 16px; }
  .sr-stage { gap: 6px; height: calc(100dvh - 16px); }
  .sr-title { font-size: 28px; }
  .sr-eyebrow { font-size: 11px; }
  .sr-dots { margin-top: 2px; }
  .sr-body { padding: 10px 12px; }
  .sr-primary.btn { min-height: 44px; min-width: 160px; font-size: 16px; }
  .sr-champion { padding: 8px 12px; margin-bottom: 8px; gap: 12px; }
  .sr-champion-crest .crest { width: 40px; }
  .sr-champion b { font-size: 20px; }
  .sr-champion span { font-size: 12.5px; }
  .sr-row { padding: 3px 8px; font-size: 12.5px; gap: 6px; }
  .sr-body[data-step="table"] { grid-template-columns: minmax(150px, 0.7fr) minmax(0, 2.3fr); gap: 12px; }
  .sr-body[data-step="table"] .sr-row:not(.sr-row-head) { font-size: 12px; padding: 0 8px; line-height: 1.1; }
  .sr-body[data-step="table"] .sr-row-crest .crest { height: 1.25em; }
  .sr-body[data-step="table"] .sr-row-head { font-size: 10px; }
  .sr-body[data-step="table"] .sr-champion { padding: 10px 12px; gap: 8px; }
  .sr-body[data-step="table"] .sr-champion-crest .crest { width: 48px; }
  .sr-body[data-step="table"] .sr-champion b { font-size: 18px; }
  .sr-body[data-step="table"] .sr-champion span { font-size: 12px; }
  .sr-awards { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 10px; }
  .sr-award-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .sr-award { padding: 6px 8px; gap: 1px; }
  .sr-award-title { font-size: 9.5px; letter-spacing: 0.06em; }
  .sr-award b { font-size: 13.5px; }
  .sr-award-club { font-size: 10.5px; }
  .sr-award-club .crest { height: 13px; }
  .sr-award-value { font-size: 10.5px; }
  .sr-verdict p { font-size: 22px; }
  .sr-money div, .sr-career div { padding: 10px 12px; }
  .sr-money b, .sr-career b { font-size: 22px; }
  .sr-summer li { grid-template-columns: 7.5em minmax(0, 1fr); padding: 3px 10px; font-size: 12.5px; }
  .sr-club-line { gap: 10px; margin-bottom: 6px; padding-bottom: 4px; border-bottom-width: 2px; }
  .sr-club-crest .crest { height: 28px; }
  .sr-club-line b { font-size: 16px; }
  .sr-body[data-step="board"] { grid-template-columns: minmax(110px, 0.5fr) minmax(0, 2fr); gap: 12px; }
  .sr-board-mark { gap: 6px; padding: 8px; }
  .sr-board-crest .crest { width: 56px; }
  .sr-board-mark b { font-size: 13px; }
  .sr-money div, .sr-career div { padding: 8px 12px; gap: 3px; }
  .sr-money span, .sr-career span { font-size: 10px; }
  .sr-summer li span { font-size: 10px; }
}