/* =====================================================================================================
   A6 (ADR-065): the season finale -- the season-end cinematics. Full screen; letterbox bars as the match's
   arrival has them; broadcast graphics on the league's sharp plates (a white kicker, the name on ink, the
   club's colour as a stripe), entering with a slide. Sized in one unit, --u, a hundredth of the width on a
   16:9 screen (held by the height on a wider one), as the match's graphics are.
   ===================================================================================================== */
.finale {
  --u: min(1vw, 1.7778vh);
  position: fixed; inset: 0; z-index: 80; background: #05070b; overflow: hidden;
  animation: fn-in 520ms var(--ease-std) both;
}
@keyframes fn-in { from { opacity: 0; } to { opacity: 1; } }
/* the career and its stadium photo are hidden underneath, as the match hides them (`.in-match .career`) */
.in-finale .career, .in-finale #stadium, .in-finale .game { visibility: hidden; }
.finale-gl, .finale-gl canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.finale::before, .finale::after { content: ""; position: absolute; left: 0; right: 0; height: 7.5%; background: #000; z-index: 2; pointer-events: none; }
.finale::before { top: 0; } .finale::after { bottom: 0; }
.finale-overlay { position: absolute; inset: 0; z-index: 3; pointer-events: none; }

/* the eyebrow: the season and the moment, top left inside the letterbox */
.fn-eyebrow {
  position: absolute; left: calc(var(--u) * 2.4); top: calc(7.5% + var(--u) * 1.6); background: #fff; color: var(--ink-700);
  padding: calc(var(--u) * .4) calc(var(--u) * 1.1); font: 700 max(11px, calc(var(--u) * .95)) var(--font-display); letter-spacing: .16em; text-transform: uppercase;
  box-shadow: var(--shadow-2); animation: fn-slide 520ms var(--ease-out) both;
}

/* the lower third: the club's name on ink, its colours as a stripe */
.fn-lower {
  position: absolute; left: calc(var(--u) * 2.4); bottom: calc(7.5% + var(--u) * 2.4); display: flex; flex-direction: column; align-items: flex-start;
  animation: fn-slide 620ms var(--ease-out) both;
}
.fn-lower-kicker { background: #fff; color: var(--ink-500); padding: calc(var(--u) * .35) calc(var(--u) * 1); font: 700 max(11px, calc(var(--u) * 1)) var(--font-display); letter-spacing: .16em; text-transform: uppercase; }
.fn-lower-title {
  position: relative; background: var(--ink-900); color: #fff; padding: calc(var(--u) * .5) calc(var(--u) * 1.6) calc(var(--u) * .45) calc(var(--u) * 2);
  font: 700 max(30px, calc(var(--u) * 4.6)) var(--font-display); letter-spacing: .04em; text-transform: uppercase; line-height: 1; box-shadow: var(--shadow-2);
}
.fn-lower-title::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--u) * .6); background: linear-gradient(180deg, var(--k1) 0 62%, var(--k2) 62% 100%); }
.fn-lower.is-small .fn-lower-title { font-size: max(20px, calc(var(--u) * 2.6)); }

/* a line of numbers under the lower third's name */
.fn-lower-line { margin-top: calc(var(--u) * .3); background: rgba(8, 10, 16, .82); color: rgba(255, 255, 255, .9); padding: calc(var(--u) * .35) calc(var(--u) * 1.1);
  font: 600 max(12px, calc(var(--u) * 1.05)) var(--font-ui); letter-spacing: .02em; }

/* the lift: "CHAMPIONS" in gold across the lower third of the picture, in at the trophy's height (--delay), a light
   sweeping through the letters once; the club and the season beneath on a hairline */
.fn-champions {
  position: absolute; left: 0; right: 0; bottom: calc(7.5% + var(--u) * 3.2); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .5);
  opacity: 0; animation: fn-champ-in 900ms var(--ease-out) var(--delay, 1.7s) both;
}
.fn-champions-word {
  font: 700 calc(var(--u) * 7.4) var(--font-display); letter-spacing: .34em; padding-left: .34em; text-transform: uppercase; line-height: .9;
  background: linear-gradient(100deg, #b9893a 0%, #f1d27e 28%, #fff6d6 44%, #f1d27e 52%, #b9893a 78%, #e7c26c 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 calc(var(--u) * .25) calc(var(--u) * .9) rgba(0, 0, 0, .55));
  animation: fn-champ-sheen 2.4s ease-in-out calc(var(--delay, 1.7s) + 250ms) both;
}
.fn-champions-club {
  position: relative; padding: calc(var(--u) * .5) calc(var(--u) * 1.6) 0; color: #fff; font: 700 max(13px, calc(var(--u) * 1.35)) var(--font-display);
  letter-spacing: .22em; text-transform: uppercase; text-shadow: 0 1px 8px rgba(0, 0, 0, .6);
}
.fn-champions-club::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--k1) 22%, #e8c26a 50%, var(--k2) 78%, transparent); }
@keyframes fn-champ-in { from { opacity: 0; transform: translateY(calc(var(--u) * 1.2)) scale(.96); letter-spacing: .2em; } to { opacity: 1; transform: none; } }
@keyframes fn-champ-sheen { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* the final table as a broadcast graphic, sliding in from the right */
.fn-table {
  position: absolute; right: calc(var(--u) * 2.4); top: 50%; transform: translateY(-50%); width: calc(var(--u) * 30); min-width: 280px;
  background: var(--surface-strong); box-shadow: var(--shadow-2); animation: fn-slide-r 700ms var(--ease-out) 300ms both;
}
.fn-table header { display: grid; grid-template-columns: 1fr 3em 3em; padding: calc(var(--u) * .6) calc(var(--u) * 1.1); background: var(--ink-900); color: #fff;
  font: 700 max(11px, calc(var(--u) * .9)) var(--font-display); letter-spacing: .14em; text-transform: uppercase; }
.fn-table header span:not(:first-child) { text-align: right; }
.fn-table ol { list-style: none; margin: 0; padding: 0; }
.fn-table li { position: relative; display: grid; grid-template-columns: 2em 1fr 3em 3em; align-items: center; padding: calc(var(--u) * .42) calc(var(--u) * 1.1);
  font: 600 max(12px, calc(var(--u) * 1.15)) var(--font-ui); color: var(--ink-700); border-left: 3px solid transparent; }
.fn-table li + li { border-top: 1px solid rgba(16, 21, 31, .07); }
.fn-table li b { font: 700 max(13px, calc(var(--u) * 1.25)) var(--font-display); letter-spacing: .03em; text-transform: uppercase; color: var(--ink-900); }
.fn-table li > span:nth-child(n + 3) { text-align: right; }
.fn-table .fn-pts { font-family: var(--font-display); font-weight: 700; color: var(--ink-900); }
.fn-table li b::before { content: ""; display: inline-block; width: .5em; height: .9em; margin-right: .55em; vertical-align: -.08em;
  background: linear-gradient(180deg, var(--k1) 0 60%, var(--k2) 60% 100%); box-shadow: inset 0 0 0 1px rgba(16, 21, 31, .12); }
.fn-table li.is-first { background: #fff; }
.fn-table li.is-first b { color: #9a7428; }
.fn-table li.is-yours { border-left-color: var(--accent); background: #fff; }

/* skip: quiet, bottom right inside the letterbox */
.fn-controls { position: absolute; right: calc(var(--u) * 2.4); bottom: calc(var(--u) * 1.2); z-index: 4; display: flex; gap: 8px; }
.fn-skip { all: unset; cursor: pointer; padding: 8px 14px; background: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .86);
  font: 700 max(11px, calc(var(--u) * .85)) var(--font-display); letter-spacing: .14em; text-transform: uppercase; transition: background var(--t-micro); }
.fn-skip:hover { background: rgba(255, 255, 255, .26); color: #fff; }
.fn-skip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@keyframes fn-slide { from { opacity: 0; transform: translateX(-2.4rem); } to { opacity: 1; transform: none; } }
@keyframes fn-slide-r { from { opacity: 0; transform: translate(2.4rem, -50%); } to { opacity: 1; transform: translateY(-50%); } }
@media (prefers-reduced-motion: reduce) { .finale, .fn-eyebrow, .fn-lower, .fn-table, .fn-champions, .fn-champions-word { animation: none; opacity: 1; } }
@media (max-height: 520px) {
  .fn-table { width: 46vw; min-width: 0; }
  .fn-table li { padding: 2px 10px; font-size: 11px; }
  .fn-table li b { font-size: 12px; }
}

/* the gala's Team of the Season: the Game Plan's own board over the darkened hall, a gold title above it */
.fn-tots {
  position: absolute; inset: 7.5% 0; display: grid; grid-template-rows: auto minmax(0, 1fr); justify-items: center; gap: calc(var(--u) * 1.2);
  padding: calc(var(--u) * 2) calc(var(--u) * 6) calc(var(--u) * 1.4);
  /* a dark veil, not a blur: a backdrop blur over the moving picture cost the laptop's graphics a third of its frames */
  background: radial-gradient(ellipse at 50% 55%, rgba(4, 6, 12, 0.66) 0%, rgba(3, 4, 9, 0.86) 70%, rgba(2, 3, 6, 0.93) 100%);
  animation: fn-tots-in 700ms var(--ease-out) both;
}
.fn-tots-layer[hidden] { display: none; }
.fn-tots-title { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 0.3); }
.fn-tots-title span {
  font: 700 calc(var(--u) * 4.2) var(--font-display); letter-spacing: 0.28em; padding-left: 0.28em; text-transform: uppercase; line-height: 1;
  background: linear-gradient(100deg, #b9893a 0%, #f1d27e 30%, #fff6d6 46%, #f1d27e 56%, #b9893a 82%); background-size: 240% 100%;
  /* still gold, no sheen: a moving gradient clipped to the text is repainted every frame (it cost the laptop frames) */
  -webkit-background-clip: text; background-clip: text; color: transparent; background-position: 30% 0;
}
.fn-tots-title b { font: 700 max(12px, calc(var(--u) * 1.15)) var(--font-display); letter-spacing: 0.3em; color: rgba(240, 207, 125, 0.85); }
.fn-tots-board { position: relative; width: min(100%, calc(var(--u) * 92)); height: 100%; min-height: 0; perspective: 1100px; perspective-origin: 50% 0%; container-type: size; }
.fn-tots-board .pitch.gp-mini3d { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
@keyframes fn-tots-in { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fn-tots, .fn-tots-title span { animation: none; } }
/* a light kit reads its number in ink (B14's rule), here as on the match's pieces */
/* the gala's lower third: the winner's shirt number in a gold chip before his name */
.fn-lower-title .fn-num {
  display: inline-grid; place-items: center; min-width: 1.15em; height: 1.15em; margin-right: 0.38em; padding: 0 0.12em; vertical-align: 0.04em;
  font-size: 0.78em; color: #10151f; background: linear-gradient(180deg, #f6dc94, #c8973e); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.18);
}

/* the summer: its stories one by one, bottom left, on the league's white plates; each player as his Game Plan piece */
.fn-summer { position: absolute; left: calc(var(--u) * 2.4); bottom: calc(7.5% + var(--u) * 2.2); width: min(calc(var(--u) * 40), 62vw); display: flex; flex-direction: column; gap: calc(var(--u) * 0.6); }
.fn-story {
  display: grid; grid-template-columns: calc(var(--u) * 4.4) minmax(0, 1fr); align-items: center; gap: calc(var(--u) * 1.1);
  padding: calc(var(--u) * 0.7) calc(var(--u) * 1.3) calc(var(--u) * 0.7) calc(var(--u) * 0.9);
  background: rgba(255, 255, 255, 0.95); box-shadow: var(--shadow-2); border-left: calc(var(--u) * 0.32) solid var(--story, var(--accent));
  animation: fn-story-in 520ms var(--ease-out) both;
}
.fn-story.is-retired { --story: #8a6f3c; } .fn-story.is-came-through { --story: #2f8f4e; } .fn-story.is-grew { --story: #1d6fd8; }
.fn-story.is-fell-away { --story: #b4552f; } .fn-story.is-expired { --story: #6b7280; }
.fn-story-piece { position: relative; width: calc(var(--u) * 4.4); height: calc(var(--u) * 4.4); --sphere: calc(var(--u) * 3.9); }
.fn-story-piece .sphere { left: 50%; top: 50%; cursor: default; }
.fn-story-words { min-width: 0; }
.fn-story-kicker { display: block; font: 700 max(11px, calc(var(--u) * 0.95)) var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--story, var(--ink-500)); }
.fn-story-words p { margin: calc(var(--u) * 0.2) 0 0; font: 500 max(12px, calc(var(--u) * 1.12)) var(--font-ui); color: var(--ink-900); line-height: 1.3; }
@keyframes fn-story-in { from { opacity: 0; transform: translateX(calc(var(--u) * -2.4)); } to { opacity: 1; transform: none; } }

/* the summer's last shot: the next season, large and light against the morning sky */
.fn-next { position: absolute; left: 0; right: 0; bottom: calc(7.5% + var(--u) * 4); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 0.4);
  animation: fn-champ-in 900ms var(--ease-out) 600ms both; }
.fn-next span { font: 700 max(13px, calc(var(--u) * 1.4)) var(--font-display); letter-spacing: 0.3em; padding-left: 0.3em; text-transform: uppercase; color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 10px rgba(0, 30, 70, 0.4); }
.fn-next b { font: 700 calc(var(--u) * 7) var(--font-display); letter-spacing: 0.08em; color: #ffffff; text-shadow: 0 2px 24px rgba(0, 30, 70, 0.45); line-height: 0.9; }
@media (prefers-reduced-motion: reduce) { .fn-story, .fn-next { animation: none; } }
@media (max-height: 520px) { .fn-summer { width: 64vw; } .fn-story-words p { font-size: 11px; } }

/* the board meeting: the chairman's words as broadcast subtitles, low and centred, on a soft dark band */
.fn-subtitle {
  position: absolute; left: 50%; bottom: calc(7.5% + var(--u) * 2.6); transform: translateX(-50%); width: min(calc(var(--u) * 64), 88vw);
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 0.5); text-align: center;
  animation: fn-sub-in 700ms var(--ease-out) 250ms both;
}
.fn-subtitle-who { font: 700 max(11px, calc(var(--u) * 0.95)) var(--font-display); letter-spacing: 0.24em; padding-left: 0.24em; text-transform: uppercase; color: #e8c26a; }
.fn-subtitle p {
  margin: 0; padding: calc(var(--u) * 0.7) calc(var(--u) * 1.6); background: rgba(6, 7, 10, 0.62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  font: 500 max(14px, calc(var(--u) * 1.55)) var(--font-ui); line-height: 1.38; color: #ffffff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
@keyframes fn-sub-in { from { opacity: 0; transform: translate(-50%, calc(var(--u) * 0.8)); } to { opacity: 1; transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .fn-subtitle { animation: none; } }