/*
 * Template "Sepak Bola Juara" (Ulang Tahun): a football match day. The pitch seen from above, white lines, a
 * stadium scoreboard, a jersey with the nickname and the age as the shirt number, a trophy. Teko (condensed,
 * sporty) for the display type, Nunito for the text. Mobile-first, one centered column (~460px) on a mowed
 * pitch on wide screens.
 *
 * Colors come from the chosen color variant (template.json → <x-inv.head>):
 *   --inv-primary (the team kit: navy / red / purple / orange), --inv-accent (the kit trim: yellow / white / lime /
 *   cream, only used on dark or kit-colored surfaces), --inv-pitch (grass), --inv-background, --inv-text.
 * The trophy gold and the referee's yellow card are fixed colors (they are the same in every team).
 *
 * Motion only runs with html.inv-anim (set by <x-inv.head> unless the guest prefers reduced motion);
 * without it every drawing is shown finished.
 *
 * Contents: 1 base · 2 cover · 3 shared pieces (heading, ball, jersey, trophy, icons, chips) · 4 sections in page
 *           order · 5 forms (RSVP tactics board, wishes) · 6 shared components · 7 screen sizes · 8 motion
 */

/* ---------- 1. base ---------- */
:root {
    --sb-display: 'Teko', 'Oswald', 'Arial Narrow', Impact, sans-serif;
    --sb-sans: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --sb-pitch: var(--inv-pitch, #2d8f3c);
    /* mowed stripes: both dark enough for white text (≥ 4.5:1) */
    --sb-grass-a: color-mix(in srgb, var(--sb-pitch) 90%, #000);
    --sb-grass-b: color-mix(in srgb, var(--sb-pitch) 77%, #000);
    --sb-grass-text: color-mix(in srgb, var(--sb-pitch) 72%, #000);
    --sb-chalk: rgb(255 255 255 / .62);
    --sb-kit: var(--inv-primary);
    --sb-kit-deep: color-mix(in srgb, var(--inv-primary) 72%, #000);
    --sb-kit-soft: color-mix(in srgb, var(--inv-primary) 9%, #fff);
    --sb-trim: var(--inv-accent);
    /* the dark of the scoreboard and the night stadium, tinted by the kit */
    --sb-night: color-mix(in srgb, var(--inv-primary) 18%, #0a0e16);
    --sb-led: var(--inv-accent);
    --sb-paper: #fff;
    --sb-muted: color-mix(in srgb, var(--inv-text) 76%, var(--inv-background));
    --sb-line: color-mix(in srgb, var(--inv-text) 12%, transparent);
    --sb-gold: #f2b705;
    --sb-gold-text: #8a5d00;
    --sb-shadow: 0 22px 40px -26px color-mix(in srgb, var(--inv-text) 70%, transparent);
    --sb-shadow-sm: 0 10px 20px -14px color-mix(in srgb, var(--inv-text) 70%, transparent);
    /* colors of the shared components */
    --inv-ambient-1: var(--inv-primary);
    --inv-ambient-2: color-mix(in srgb, var(--inv-accent) 70%, var(--sb-gold));
    --inv-radius: 14px;
    --inv-font-display: var(--sb-display);
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--inv-background);
    color: var(--inv-text);
    font-family: var(--sb-sans);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }
a { color: var(--sb-kit); }
.sepak-bola-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.sepak-bola-preview {
    position: sticky; top: 0; z-index: 60; padding: .5rem 1rem; text-align: center;
    background: #fff4d6; color: #6b4e00; font-size: .8125rem;
}

/* the one column of the page: faint mowing stripes on the background */
.sepak-bola-main {
    max-width: 460px; margin: 0 auto; padding: 0 1.25rem; overflow-x: clip;
    background:
        repeating-linear-gradient(to bottom, transparent 0 140px, color-mix(in srgb, var(--sb-pitch) 5%, transparent) 140px 280px),
        var(--inv-background);
}
.sepak-bola-branding { max-width: 460px; margin: 0 auto; background: var(--inv-background); }
/* the page end: the last line sits ~125px above the end, clear of the bottom menu, the music button and the
   "Gulir" pill. The music player adds its own spacer (.inv-music__space) when music or auto scroll is on. */
body.sepak-bola-body:not(:has(.inv-music__space)) .sepak-bola-branding.inv-branding { padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }
body.sepak-bola-body:not(:has(.inv-music__space)) .sepak-bola-main { padding-bottom: 5rem; }

.sepak-bola-section { padding: 3.3rem 0; text-align: center; }
.sepak-bola-section > p { margin: 0 auto 1rem; max-width: 34ch; }

.sepak-bola-amp { display: block; margin: .1rem 0; font-family: var(--sb-display); font-size: 1.5rem; line-height: 1; color: var(--sb-kit); }

/* a small rounded link with an icon (Instagram, TikTok) */
.sepak-bola-socials { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 1.1rem 0 0; }
.sepak-bola-chip {
    display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: .35rem 1.05rem;
    border-radius: 999px; font-size: .84rem; font-weight: 800; text-decoration: none; color: var(--sb-kit);
    background: var(--sb-kit-soft); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--sb-kit) 30%, transparent);
}
.sepak-bola-chip .sepak-bola-icon { width: 1.05rem; height: 1.05rem; }

/* ---------- 2. cover ---------- */
.sepak-bola-cover {
    --sb-circle: 28svh;
    --sb-band: 12.5svh;
    position: fixed; inset: 0; z-index: 30; overflow-x: hidden; overflow-y: auto;
    display: flex; flex-direction: column; align-items: center; justify-content: safe center;
    min-height: 100svh; padding: 4svh 1.4rem 2.6rem;
    isolation: isolate; text-align: center; color: #fff;
    transition: opacity .3s ease .95s;
}

/* the pitch: two halves of mowed stripes with the touchlines, corner arcs and penalty boxes */
.sepak-bola-pitch {
    position: absolute; left: 0; right: 0; z-index: -2; height: 50%; pointer-events: none;
    background: repeating-linear-gradient(to bottom, var(--sb-grass-a) 0 var(--sb-band), var(--sb-grass-b) var(--sb-band) calc(var(--sb-band) * 2));
    transition: translate .85s cubic-bezier(.65, 0, .35, 1) .22s;
}
.sepak-bola-pitch--top { top: 0; }
.sepak-bola-pitch--bottom { bottom: 0; }
.sepak-bola-pitch::before {
    content: ''; position: absolute; left: 12px; right: 12px; border: 2.5px solid var(--sb-chalk);
}
.sepak-bola-pitch--top::before { top: 12px; bottom: -3px; border-bottom: 0; }
.sepak-bola-pitch--bottom::before { bottom: 12px; top: -3px; border-top: 0; }
/* the corner arcs */
.sepak-bola-pitch::after {
    content: ''; position: absolute; left: 12px; right: 12px; height: 26px;
    --sb-arc: transparent 17px, var(--sb-chalk) 17.5px 20px, transparent 20.5px;
}
.sepak-bola-pitch--top::after {
    top: 12px;
    background: radial-gradient(circle at 0 0, var(--sb-arc)) left / 26px 26px no-repeat, radial-gradient(circle at 100% 0, var(--sb-arc)) right / 26px 26px no-repeat;
}
.sepak-bola-pitch--bottom::after {
    bottom: 12px;
    background: radial-gradient(circle at 0 100%, var(--sb-arc)) left / 26px 26px no-repeat, radial-gradient(circle at 100% 100%, var(--sb-arc)) right / 26px 26px no-repeat;
}
/* the penalty box, the goal area inside it and the arc */
.sepak-bola-pitch__box { position: absolute; left: 50%; width: min(58%, 270px); height: 11svh; translate: -50% 0; border: 2.5px solid var(--sb-chalk); }
.sepak-bola-pitch__box::before { content: ''; position: absolute; left: 50%; width: 44%; height: 40%; translate: -50% 0; border: 2.5px solid var(--sb-chalk); }
.sepak-bola-pitch__box::after { content: ''; position: absolute; left: 50%; width: 34%; height: 3.4svh; translate: -50% 0; border: 2.5px solid var(--sb-chalk); }
.sepak-bola-pitch--top .sepak-bola-pitch__box { top: 12px; border-top: 0; }
.sepak-bola-pitch--top .sepak-bola-pitch__box::before { top: 0; border-top: 0; }
.sepak-bola-pitch--top .sepak-bola-pitch__box::after { top: 100%; border-top: 0; border-radius: 0 0 50% 50% / 0 0 100% 100%; }
.sepak-bola-pitch--bottom .sepak-bola-pitch__box { bottom: 12px; border-bottom: 0; }
.sepak-bola-pitch--bottom .sepak-bola-pitch__box::before { bottom: 0; border-bottom: 0; }
.sepak-bola-pitch--bottom .sepak-bola-pitch__box::after { bottom: 100%; border-bottom: 0; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }

.sepak-bola-cover__inner {
    display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 400px;
    transition: opacity .4s ease .3s;
}

/* the scoreboard tab with the cover title */
.sepak-bola-cover__tab {
    display: inline-flex; flex-direction: column; align-items: center; max-width: 100%; margin: 0; padding: .45rem 1.15rem .4rem;
    border-radius: 10px; background: rgb(6 10 18 / .82); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16), 0 10px 20px -12px rgb(0 0 0 / .6);
    transition: translate .45s ease;
}
.sepak-bola-cover__tab-label { font-size: .6rem; font-weight: 900; letter-spacing: .26em; text-transform: uppercase; color: var(--sb-led); }
.sepak-bola-cover__title { font-family: var(--sb-display); font-size: 1.4rem; font-weight: 500; line-height: 1; padding-top: .12em; letter-spacing: .03em; overflow-wrap: anywhere; }

/* the centre circle: the photo inside, the ring around it, the halfway line through it, the ball at its edge */
.sepak-bola-cover__circle { position: relative; width: var(--sb-circle); aspect-ratio: 1; margin: 4.4svh 0 3.2svh; }
.sepak-bola-cover__halfway {
    position: absolute; left: 50%; top: 50%; z-index: -1; width: 100vw; height: 2.5px; translate: -50% -50%;
    background: var(--sb-chalk); transition: opacity .3s ease;
}
.sepak-bola-cover__ring {
    position: absolute; inset: -2.4svh; z-index: -1; border-radius: 50%; border: 2.5px solid var(--sb-chalk);
    transition: scale .75s cubic-bezier(.2, .7, .2, 1), opacity .75s ease, border-color .3s ease;
}
.sepak-bola-cover__photo-wrap {
    position: absolute; inset: 0; overflow: hidden; border-radius: 50%; background: var(--sb-kit);
    box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--sb-trim), 0 18px 34px -14px rgb(0 0 0 / .6);
    transition: scale .55s cubic-bezier(.5, 0, .3, 1);
}
.sepak-bola-cover__photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.sepak-bola-cover--plain .sepak-bola-cover__photo-wrap {
    display: grid; place-items: center;
    background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--sb-kit) 70%, #fff), var(--sb-kit-deep) 75%);
}
.sepak-bola-cover--plain .sepak-bola-jersey { width: 78%; margin-top: 6%; }
.sepak-bola-cover__ball {
    position: absolute; right: -6%; bottom: -5%; width: 27%; overflow: visible;
    filter: drop-shadow(0 5px 4px rgb(0 0 0 / .35));
    transition: translate .8s cubic-bezier(.3, .1, .3, 1), rotate .8s cubic-bezier(.3, .1, .3, 1);
}

/* the nickname with the age as a shirt number */
.sepak-bola-cover__name {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .1rem .55rem; margin: 0; max-width: 100%;
    font-weight: 400; transition: translate .45s ease;
}
.sepak-bola-cover__nick {
    min-width: 0; font-family: var(--sb-display); font-size: 4.6rem; font-weight: 600; line-height: .82; padding-top: .14em;
    letter-spacing: .03em; text-transform: uppercase; overflow-wrap: anywhere; text-shadow: 0 3px 0 rgb(0 0 0 / .22), 0 10px 24px rgb(0 0 0 / .3);
}
.sepak-bola-cover__number {
    display: grid; place-items: center; min-width: 3.3rem; height: 3.5rem; padding: .3rem .45rem 0; border-radius: 10px;
    font-family: var(--sb-display); font-size: 3.2rem; font-weight: 700; line-height: 1; color: var(--sb-kit);
    background: var(--sb-trim); box-shadow: 0 4px 0 var(--sb-kit-deep), 0 10px 20px -8px rgb(0 0 0 / .5);
    rotate: -4deg;
}
.sepak-bola-cover__date {
    margin: .85rem 0 0; font-size: .92rem; font-weight: 800; line-height: 1.4; text-shadow: 0 1px 6px rgb(0 0 0 / .35);
    transition: translate .45s ease;
}
.sepak-bola-cover__kickoff {
    display: inline-block; margin-right: .3rem; padding: .05rem .45rem; border-radius: 5px; font-size: .62rem; font-weight: 900;
    letter-spacing: .16em; text-transform: uppercase; vertical-align: .12em; color: var(--sb-kit); background: var(--sb-trim);
}
.sepak-bola-cover__quote {
    max-width: 32ch; margin: .5rem auto 0; font-size: .86rem; font-weight: 600; line-height: 1.45; color: rgb(255 255 255 / .94);
    text-shadow: 0 1px 6px rgb(0 0 0 / .4); text-wrap: pretty; transition: translate .45s ease;
}

/* the guest's player pass */
.sepak-bola-cover__pass {
    position: relative; display: flex; align-items: center; gap: .75rem; width: min(100%, 17.5rem); margin: 1.05rem 0 0;
    padding: .55rem .9rem .55rem .65rem; border-radius: 14px; text-align: left; color: var(--inv-text); background: #fff;
    box-shadow: inset 5px 0 0 var(--sb-kit), 0 12px 24px -12px rgb(0 0 0 / .6);
    transition: translate .45s ease;
}
.sepak-bola-cover__pass-icon {
    display: grid; place-items: center; width: 2.4rem; height: 2.4rem; flex: none; margin-left: .3rem; border-radius: 50%;
    color: var(--sb-trim); background: var(--sb-kit);
}
.sepak-bola-cover__pass-icon .sepak-bola-icon { width: 1.25rem; height: 1.25rem; }
.sepak-bola-cover__pass-text { display: flex; flex-direction: column; min-width: 0; }
.sepak-bola-cover__pass-label { font-size: .6rem; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; color: var(--sb-kit); }
.sepak-bola-cover__guest { font-family: var(--sb-display); font-size: 1.5rem; font-weight: 500; line-height: 1; padding-top: .12em; overflow-wrap: anywhere; }

.sepak-bola-cover__open {
    margin-top: 1.1rem; min-height: 3.1rem; padding: .6rem 1.5rem .6rem .75rem; gap: .6rem; border-radius: 999px;
    font-size: .84rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase;
    color: var(--sb-kit); background: var(--sb-trim);
    box-shadow: 0 4px 0 var(--sb-kit-deep), 0 0 0 3px rgb(255 255 255 / .25), 0 16px 26px -12px rgb(0 0 0 / .55);
    transition: translate .45s ease;
}
.sepak-bola-cover__open:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
.sepak-bola-cover__open-ball { width: 1.9rem; height: 1.9rem; flex: none; }

/* kick-off: the ball rolls away, the centre circle opens wide, the text steps aside, the halves slide apart */
.sepak-bola-cover--leave { pointer-events: none; }
.sepak-bola-cover--gone { opacity: 0; }
.sepak-bola-cover--gone .sepak-bola-cover__inner { opacity: 0; }
.sepak-bola-cover--gone .sepak-bola-cover__ball { translate: 75vw -8svh; rotate: 640deg; }
.sepak-bola-cover--gone .sepak-bola-cover__ring { scale: 4; opacity: 0; }
.sepak-bola-cover--gone .sepak-bola-cover__photo-wrap { scale: .82; }
.sepak-bola-cover--gone .sepak-bola-cover__halfway { opacity: 0; }
.sepak-bola-cover--gone .sepak-bola-cover__tab { translate: 0 -40px; }
.sepak-bola-cover--gone .sepak-bola-cover__name,
.sepak-bola-cover--gone .sepak-bola-cover__date,
.sepak-bola-cover--gone .sepak-bola-cover__quote,
.sepak-bola-cover--gone .sepak-bola-cover__pass,
.sepak-bola-cover--gone .sepak-bola-cover__open { translate: 0 40px; }
.sepak-bola-cover--gone .sepak-bola-pitch--top { translate: 0 -102%; }
.sepak-bola-cover--gone .sepak-bola-pitch--bottom { translate: 0 102%; }

/* ---------- 3. shared pieces ---------- */

/* section heading: a dark scoreboard tab, the title in Teko, a green line with a ball on the centre spot */
.sepak-bola-heading { margin: 0 0 1.9rem; }
.sepak-bola-heading__eyebrow {
    display: inline-block; margin: 0 0 .55rem; padding: .3rem .75rem .28rem; border-radius: 6px;
    font-size: .6rem; font-weight: 900; letter-spacing: .24em; text-transform: uppercase; color: var(--sb-led); background: var(--sb-night);
}
.sepak-bola-heading__title {
    margin: 0; padding-top: .12em; font-family: var(--sb-display); font-size: 2.65rem; font-weight: 600; line-height: .9;
    letter-spacing: .02em; text-transform: uppercase; color: var(--sb-kit); text-wrap: balance;
}
.sepak-bola-heading__line { position: relative; display: block; width: 10rem; height: 1.5rem; margin: .45rem auto 0; }
.sepak-bola-heading__line::before, .sepak-bola-heading__line::after {
    content: ''; position: absolute; top: 50%; width: calc(50% - 1rem); height: 3px; margin-top: -1.5px; border-radius: 3px;
    background: var(--sb-pitch); transition: scale .8s cubic-bezier(.65, 0, .35, 1) .35s;
}
.sepak-bola-heading__line::before { left: 0; transform-origin: right; }
.sepak-bola-heading__line::after { right: 0; transform-origin: left; }
.sepak-bola-heading__ball {
    position: absolute; left: 50%; top: 0; width: 1.5rem; height: 1.5rem; margin-left: -.75rem; overflow: visible;
    filter: drop-shadow(0 2px 2px rgb(0 0 0 / .2));
    transition: translate .9s cubic-bezier(.2, .8, .3, 1) .1s, rotate .9s cubic-bezier(.2, .8, .3, 1) .1s, opacity .3s ease .1s;
}
html.inv-anim .sepak-bola-heading:not(.is-revealed) .sepak-bola-heading__line::before,
html.inv-anim .sepak-bola-heading:not(.is-revealed) .sepak-bola-heading__line::after { scale: 0 1; }
html.inv-anim .sepak-bola-heading:not(.is-revealed) .sepak-bola-heading__ball { translate: -6rem 0; rotate: -540deg; opacity: 0; }

/* the ball (sprite) */
.sepak-bola-ball__skin { fill: #fff; }
.sepak-bola-ball__patch { fill: #1d222b; }
.sepak-bola-ball__seam { fill: none; stroke: #1d222b; stroke-width: 2.6; stroke-linecap: round; }
.sepak-bola-ball__shine { fill: none; stroke: rgb(255 255 255 / .7); stroke-width: 4; stroke-linecap: round; }
.sepak-bola-ball__rim { fill: none; stroke: #1d222b; stroke-width: 3; }

/* the jersey (sprite + HTML text): body in --sb-shirt, trim in --sb-shirt-trim; sized by its own width (cqw) */
.sepak-bola-jersey { position: relative; width: 100%; aspect-ratio: 1; container-type: inline-size; }
.sepak-bola-jersey__shirt { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 10px 14px rgb(0 0 0 / .25)); }
.sepak-bola-shirt__body { fill: var(--sb-shirt, var(--inv-primary)); stroke: rgb(0 0 0 / .14); stroke-width: 1.5; }
.sepak-bola-shirt__trim, .sepak-bola-shirt__collar { fill: var(--sb-shirt-trim, var(--inv-accent)); }
.sepak-bola-shirt__fold { fill: none; stroke: rgb(0 0 0 / .1); stroke-width: 14; stroke-linecap: round; }
.sepak-bola-jersey__name {
    position: absolute; left: 24%; right: 24%; top: 20%; text-align: center;
    font-family: var(--sb-display); font-size: 11.5cqw; font-weight: 600; line-height: .95; letter-spacing: .06em;
    color: var(--sb-shirt-trim, var(--inv-accent)); overflow-wrap: anywhere;
}
.sepak-bola-jersey__name--mid { font-size: 8.5cqw; top: 21%; }
.sepak-bola-jersey__name--long { font-size: 6.2cqw; top: 19%; line-height: 1; }
.sepak-bola-jersey__number {
    position: absolute; left: 0; right: 0; top: 30%; text-align: center;
    font-family: var(--sb-display); font-size: 50cqw; font-weight: 700; line-height: 1;
    color: var(--sb-shirt-trim, var(--inv-accent)); text-shadow: 0 .8cqw 0 rgb(0 0 0 / .18);
}
.sepak-bola-jersey__number--long { font-size: 36cqw; top: 36%; }

/* the trophy (sprite): gold, a dark wooden base with a light plate */
.sepak-bola-trophy__cup { fill: var(--sb-gold); }
.sepak-bola-trophy__shade { fill: rgb(150 90 0 / .22); }
.sepak-bola-trophy__lip { fill: #ffd84d; }
.sepak-bola-trophy__handle { fill: none; stroke: #e0a400; stroke-width: 6; stroke-linecap: round; }
.sepak-bola-trophy__stem { fill: #dd9f00; }
.sepak-bola-trophy__collar { fill: #c48a00; }
.sepak-bola-trophy__base { fill: #3a2a1c; }
.sepak-bola-trophy__foot { fill: #271b11; }
.sepak-bola-trophy__plate { fill: #f6dc8a; }
.sepak-bola-trophy__star { fill: #fff7cf; }

/* the whistle (sprite) */
.sepak-bola-whistle__body { fill: currentColor; }
.sepak-bola-whistle__hole { fill: rgb(0 0 0 / .35); }
.sepak-bola-whistle__ring { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }

/* icons */
.sepak-bola-icon { width: 1.15rem; height: 1.15rem; flex: none; }

/* ---------- 4. sections ---------- */

/* opening: the stadium announcer and the LED perimeter board */
.sepak-bola-opening { padding-top: 3.8rem; padding-bottom: 2.6rem; }
.sepak-bola-opening__kicker {
    display: flex; align-items: center; justify-content: center; gap: .45rem; margin-bottom: .55rem !important;
    font-size: .64rem; font-weight: 900; letter-spacing: .24em; text-transform: uppercase; color: var(--sb-kit);
}
.sepak-bola-opening__greeting {
    padding-top: .12em; font-family: var(--sb-display); font-size: 2.8rem; font-weight: 600; line-height: .9; text-transform: uppercase;
    color: var(--sb-kit); text-wrap: balance;
}
.sepak-bola-opening__message { color: var(--sb-muted); }
.sepak-bola-board {
    margin: 1.7rem -1.25rem 0; padding: .5rem 0 .4rem; overflow: hidden; background: var(--sb-night);
    border-top: 4px solid var(--sb-kit); border-bottom: 4px solid var(--sb-kit);
    background-image: radial-gradient(rgb(255 255 255 / .07) 1px, transparent 1.3px); background-size: 4px 4px;
}
.sepak-bola-board__track { display: flex; width: max-content; }
.sepak-bola-board__run { display: inline-flex; align-items: center; gap: 1rem; padding-right: 1rem; white-space: nowrap; }
.sepak-bola-board__run > span {
    padding-top: .1em; font-family: var(--sb-display); font-size: 1.45rem; font-weight: 500; line-height: 1; letter-spacing: .06em;
    text-transform: uppercase; color: var(--sb-led); text-shadow: 0 0 10px color-mix(in srgb, var(--sb-led) 55%, transparent);
}
.sepak-bola-board__run svg { width: 1.15rem; height: 1.15rem; flex: none; fill: var(--sb-led); }

/* celebrant: the jersey on its hook in the dressing room, then the player card */
.sepak-bola-locker { position: relative; width: min(15.5rem, 70vw); margin: 0 auto .6rem; padding-top: 1.7rem; }
/* the hook and the wooden hanger */
.sepak-bola-locker__hook {
    position: absolute; left: 50%; top: 0; width: 1.3rem; height: 1.5rem; translate: -50% 0;
    border: 3px solid #8b95a3; border-bottom: 0; border-radius: 999px 999px 0 0;
}
.sepak-bola-locker__hook::after {
    content: ''; position: absolute; left: 50%; top: calc(100% - 2px); width: 3px; height: 1.3rem; margin-left: -1.5px; background: #8b95a3;
}
.sepak-bola-locker__hang { position: relative; transform-origin: 50% -1.2rem; }
.sepak-bola-locker__hang::before {
    content: ''; position: absolute; left: 22%; right: 22%; top: 6.5%; z-index: 1; height: .55rem; border-radius: 999px;
    background: linear-gradient(to bottom, #c08a52, #8d5f33); box-shadow: 0 2px 3px rgb(0 0 0 / .25);
}

.sepak-bola-card {
    position: relative; max-width: 19rem; margin: 0 auto; padding: 7px; border-radius: 20px; text-align: left;
    background: linear-gradient(150deg, var(--sb-kit), var(--sb-kit-deep));
    box-shadow: var(--sb-shadow), inset 0 0 0 2px color-mix(in srgb, var(--sb-trim) 60%, transparent);
}
.sepak-bola-card__photo {
    position: relative; aspect-ratio: 4 / 3.7; overflow: hidden; border-radius: 14px 14px 4px 4px;
    background: repeating-linear-gradient(135deg, var(--sb-kit) 0 14px, var(--sb-kit-deep) 14px 28px);
}
.sepak-bola-card__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* a dark fade at the foot of the photo for the position badge */
.sepak-bola-card__photo::after { content: ''; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgb(0 0 0 / .55)); pointer-events: none; }
.sepak-bola-card__initial {
    position: absolute; inset: 0; display: grid; place-items: center; padding-top: .1em;
    font-family: var(--sb-display); font-size: 8rem; font-weight: 600; line-height: 1; color: var(--sb-trim);
}
.sepak-bola-card__number {
    position: absolute; left: .55rem; top: .45rem; z-index: 1; min-width: 2.6rem; padding: .3rem .4rem 0; border-radius: 8px; text-align: center;
    font-family: var(--sb-display); font-size: 2.1rem; font-weight: 700; line-height: 1; color: var(--sb-kit); background: var(--sb-trim);
    box-shadow: 0 3px 0 var(--sb-kit-deep);
}
.sepak-bola-card__position {
    position: absolute; left: .6rem; bottom: .6rem; z-index: 1; max-width: calc(100% - 1.2rem); padding: .28rem .7rem .26rem; border-radius: 6px;
    font-size: .68rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: #fff; background: var(--sb-kit);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--sb-trim) 70%, transparent); overflow-wrap: anywhere;
}
.sepak-bola-card__body { padding: 1rem 1rem 1.05rem; border-radius: 4px 4px 14px 14px; background: #fff; }
.sepak-bola-card__name {
    margin: 0; padding-top: .1em; font-family: var(--sb-display); font-size: 2rem; font-weight: 600; line-height: .95; text-transform: uppercase;
    color: var(--inv-text); overflow-wrap: anywhere; text-wrap: balance;
}
.sepak-bola-card__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: .5rem; margin: .8rem 0 0; }
.sepak-bola-card__stats > div { padding: .45rem .6rem .4rem; border-radius: 10px; background: var(--sb-kit-soft); }
.sepak-bola-card__stats dt { font-size: .58rem; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; color: var(--sb-kit); }
.sepak-bola-card__stats dd { margin: 0; font-family: var(--sb-display); font-size: 1.55rem; font-weight: 500; line-height: 1.05; padding-top: .08em; }
.sepak-bola-card__stats dd small { font-family: var(--sb-sans); font-size: .72rem; font-weight: 800; }
.sepak-bola-card__stats .sepak-bola-card__born { font-size: 1.2rem; }
.sepak-bola-card__parents { margin-top: .9rem; padding-top: .8rem; border-top: 2px dashed var(--sb-line); text-align: center; }
.sepak-bola-card__parents-label { margin: .6rem 0 .25rem; font-size: .62rem; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; color: var(--sb-kit); text-align: center; }
.sepak-bola-card__parents .sepak-bola-card__parents-label { margin-top: 0; }
.sepak-bola-card__parents-names { margin: 0; font-size: 1rem; font-weight: 800; line-height: 1.35; }
.sepak-bola-card__parents-names > span:not(.sepak-bola-amp) { display: block; }

/* message: the post-match interview with the captain's armband */
.sepak-bola-interview {
    position: relative; margin: 0; padding: 1.7rem 1.35rem 1.3rem; overflow: hidden; border-radius: 18px; text-align: left;
    background: #fff; box-shadow: var(--sb-shadow), inset 0 0 0 1px var(--sb-line);
}
.sepak-bola-interview__armband {
    position: absolute; right: -2.4rem; top: .9rem; width: 8.6rem; padding: .25rem 0 .15rem; rotate: 38deg; text-align: center;
    background: var(--sb-trim); box-shadow: inset 0 3px 0 rgb(0 0 0 / .1), inset 0 -3px 0 rgb(0 0 0 / .1), 0 0 0 1.5px var(--sb-kit);
}
.sepak-bola-interview__armband span { font-family: var(--sb-display); font-size: 1.5rem; font-weight: 700; line-height: 1; color: var(--sb-kit); }
.sepak-bola-interview__text { position: relative; margin: 0; padding-right: 2.2rem; }
.sepak-bola-interview__text::before {
    content: '\201C'; display: block; height: 2.3rem; font-family: Georgia, 'Times New Roman', serif; font-size: 4.2rem; line-height: 1; color: var(--sb-kit);
}
.sepak-bola-interview__text p { margin: 0; font-size: 1.05rem; font-weight: 600; line-height: 1.65; }
.sepak-bola-interview__from { display: flex; align-items: center; gap: .6rem; margin-top: 1rem; padding-top: .85rem; border-top: 2px dashed var(--sb-line); }
.sepak-bola-interview__mic { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; flex: none; border-radius: 50%; color: var(--sb-trim); background: var(--sb-kit); }
.sepak-bola-interview__from cite { font-style: normal; font-size: .76rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--sb-kit); }

/* events: fixture cards with a slice of pitch on top */
.sepak-bola-fixtures { display: grid; gap: 1.6rem; }
.sepak-bola-fixture { overflow: hidden; border-radius: 20px; text-align: left; background: #fff; box-shadow: var(--sb-shadow), inset 0 0 0 1px var(--sb-line); }
.sepak-bola-fixture__head {
    position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; min-height: 9rem;
    padding: 1.1rem 1.2rem 1.15rem; color: #fff; isolation: isolate;
    background: repeating-linear-gradient(90deg, var(--sb-grass-a) 0 2.6rem, var(--sb-grass-b) 2.6rem 5.2rem);
}
.sepak-bola-fixture--photo .sepak-bola-fixture__head {
    min-height: 11rem;
    background: linear-gradient(to top, rgb(5 12 8 / .9), rgb(5 12 8 / .55) 55%, rgb(5 12 8 / .25)), var(--sb-photo) center / cover no-repeat;
}
/* the penalty box at the right edge, the goal area inside, the arc in front */
.sepak-bola-fixture__lines {
    position: absolute; right: -3px; top: 16%; bottom: 16%; z-index: -1; width: 26%; border: 2.5px solid var(--sb-chalk); border-right: 0;
}
.sepak-bola-fixture__lines::before { content: ''; position: absolute; right: 0; top: 30%; bottom: 30%; width: 42%; border: 2.5px solid var(--sb-chalk); border-right: 0; }
.sepak-bola-fixture__lines::after {
    content: ''; position: absolute; right: 100%; top: 50%; width: 1.3rem; height: 3.2rem; translate: 0 -50%;
    border: 2.5px solid var(--sb-chalk); border-right: 0; border-radius: 100% 0 0 100% / 50% 0 0 50%;
}
.sepak-bola-fixture__half {
    margin: 0; padding: .28rem .65rem .26rem; border-radius: 6px; font-size: .62rem; font-weight: 900; letter-spacing: .2em; text-transform: uppercase;
    color: var(--sb-led); background: rgb(6 10 18 / .82);
}
.sepak-bola-fixture__name {
    max-width: calc(100% - 3rem); margin: .5rem 0 0; padding-top: .1em; font-family: var(--sb-display); font-size: 2.2rem; font-weight: 600; line-height: .9;
    text-transform: uppercase; text-shadow: 0 2px 10px rgb(0 0 0 / .35); overflow-wrap: anywhere; text-wrap: balance;
}
.sepak-bola-fixture__ball { position: absolute; right: .9rem; bottom: .9rem; width: 2.2rem; height: 2.2rem; filter: drop-shadow(0 3px 3px rgb(0 0 0 / .3)); }
.sepak-bola-fixture__rows { display: grid; gap: .95rem; margin: 0; padding: 1.15rem 1.2rem .2rem; font-size: .92rem; }
.sepak-bola-fixture__rows > div { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: .8rem; align-items: start; }
.sepak-bola-fixture__rows dt { display: contents; }
.sepak-bola-fixture__rows dt .sepak-bola-icon {
    grid-row: 1 / 3; width: 2.5rem; height: 2.5rem; padding: .55rem; border-radius: 10px; color: var(--sb-kit); background: var(--sb-kit-soft);
}
.sepak-bola-fixture__rows dt span { grid-column: 2; font-size: .6rem; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; color: var(--sb-grass-text); }
.sepak-bola-fixture__rows dd { grid-column: 2; margin: 0; min-width: 0; font-weight: 700; line-height: 1.45; }
.sepak-bola-fixture__venue { display: block; font-weight: 900; }
.sepak-bola-fixture__address { display: flex; align-items: flex-start; gap: .3rem; margin-top: .15rem; font-size: .84rem; font-weight: 600; color: var(--sb-muted); }
.sepak-bola-fixture__address .sepak-bola-icon { width: .95rem; height: .95rem; margin-top: .15rem; }
.sepak-bola-fixture .inv-maps { margin: 0; padding: 1.15rem 1.2rem 1.2rem; text-align: center; }
.sepak-bola-fixture .inv-maps .inv-button { width: 100%; min-height: 2.9rem; }
.sepak-bola-fixture .inv-maps__frame { height: 180px; margin-top: .8rem; border-radius: 12px; }

/* countdown: the night stadium, the scoreboard between floodlights */
.sepak-bola-countdown {
    margin: 0 -1.25rem; padding: 3.4rem 1.25rem 3.3rem; color: #fff;
    background:
        radial-gradient(60% 40% at 8% 18%, color-mix(in srgb, #fff 16%, transparent), transparent 70%),
        radial-gradient(60% 40% at 92% 18%, color-mix(in srgb, #fff 16%, transparent), transparent 70%),
        linear-gradient(to bottom, var(--sb-night), color-mix(in srgb, var(--sb-night) 70%, var(--sb-grass-b)) 82%, var(--sb-grass-b));
}
.sepak-bola-countdown .sepak-bola-heading__eyebrow { color: var(--sb-kit); background: var(--sb-trim); }
.sepak-bola-countdown .sepak-bola-heading__title { color: #fff; }
.sepak-bola-countdown .sepak-bola-heading__line::before, .sepak-bola-countdown .sepak-bola-heading__line::after { background: rgb(255 255 255 / .7); }
.sepak-bola-scoreboard { position: relative; padding: 0 1.7rem; }
/* the floodlight towers: a lamp head (a grid of lights) on a pole */
.sepak-bola-scoreboard__light { position: absolute; top: -1.4rem; width: 1.35rem; height: 9.5rem; }
.sepak-bola-scoreboard__light--left { left: 0; }
.sepak-bola-scoreboard__light--right { right: 0; }
.sepak-bola-scoreboard__light::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1.05rem; border-radius: 3px;
    background: radial-gradient(circle, #fffbe6 1.6px, transparent 2.2px) 0 0 / 6.75px 5.25px, #39424f;
    box-shadow: 0 0 18px 4px rgb(255 248 214 / .45);
}
.sepak-bola-scoreboard__light::after {
    content: ''; position: absolute; left: 50%; top: 1.05rem; bottom: 0; width: 4px; margin-left: -2px;
    background: repeating-linear-gradient(to bottom, #6b7480 0 6px, #4b5361 6px 8px);
}
.sepak-bola-scoreboard__panel { position: relative; }
.sepak-bola-scoreboard__teams {
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .5rem; margin: 0; padding: .45rem .8rem .3rem;
    border-radius: 12px 12px 0 0; background: var(--sb-kit); box-shadow: inset 0 -3px 0 var(--sb-kit-deep);
}
.sepak-bola-scoreboard__team {
    min-width: 0; padding-top: .1em; font-family: var(--sb-display); font-size: 1.45rem; font-weight: 600; line-height: 1; text-transform: uppercase;
    letter-spacing: .04em; color: #fff; overflow-wrap: anywhere;
}
.sepak-bola-scoreboard__team:first-child { text-align: right; }
.sepak-bola-scoreboard__team:last-child { text-align: left; }
.sepak-bola-scoreboard__vs {
    padding: .1rem .45rem; border-radius: 5px; font-size: .62rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
    color: var(--sb-kit); background: var(--sb-trim);
}
.sepak-bola-countdown .inv-countdown {
    gap: .4rem; padding: .75rem .55rem .85rem; border-radius: 0 0 12px 12px;
    background: #05080d; box-shadow: inset 0 0 0 2px rgb(255 255 255 / .08), 0 18px 30px -16px rgb(0 0 0 / .7);
}
.sepak-bola-countdown .inv-countdown__item {
    position: relative; display: grid; place-content: center; flex: 1 1 0; min-width: 0; padding: .45rem 0 .4rem; border-radius: 8px;
    background: radial-gradient(rgb(255 255 255 / .06) 1px, transparent 1.3px) 0 0 / 4px 4px, #0d131d;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08);
}
.sepak-bola-countdown .inv-countdown__value {
    padding-top: .1em; font-family: var(--sb-display); font-size: 2.7rem; font-weight: 500; line-height: .95; color: var(--sb-led);
    font-variant-numeric: tabular-nums; text-shadow: 0 0 12px color-mix(in srgb, var(--sb-led) 60%, transparent);
}
.sepak-bola-countdown .inv-countdown__label { margin-top: .1rem; font-size: .56rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: rgb(255 255 255 / .78); }
.sepak-bola-countdown .inv-countdown__done { margin: 0; padding: 1rem; border-radius: 0 0 12px 12px; background: #05080d; font-weight: 700; color: var(--sb-led); }
.sepak-bola-countdown .inv-countdown__actions { flex-direction: column; align-items: center; gap: .6rem; margin-top: 1.7rem; }
.sepak-bola-countdown .inv-countdown__actions .inv-button {
    width: min(100%, 17rem); min-height: 2.8rem; padding: .6rem 1rem; font-size: .84rem; font-weight: 800;
    color: #fff; background: rgb(255 255 255 / .08); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .7);
}
.sepak-bola-countdown .inv-cal {
    --inv-cal-bg: #fff; --inv-cal-mark: var(--sb-kit); --inv-cal-text: var(--inv-text);
    max-width: 19rem; margin: 2.6rem auto 0; border-radius: 16px; box-shadow: 0 18px 34px -18px rgb(0 0 0 / .7);
}
.sepak-bola-countdown .inv-cal__month { font-family: var(--sb-display); font-size: 1.6rem; font-weight: 600; text-transform: uppercase; color: var(--sb-kit); }

/* party: the pennant, the kit card, the referee's yellow card, the supporters' scarf */
.sepak-bola-pennant { display: inline-flex; align-items: stretch; max-width: 100%; }
.sepak-bola-pennant__pole { width: 7px; flex: none; margin: -.6rem 0 -1.4rem; border-radius: 4px; background: linear-gradient(90deg, #6b7480, #d6dbe1 45%, #6b7480); }
.sepak-bola-pennant__flag {
    min-width: 0; padding: .85rem 2.6rem .9rem 1.15rem; text-align: left; color: #fff; transform-origin: left center;
    background: linear-gradient(to bottom, var(--sb-kit), var(--sb-kit-deep));
    clip-path: polygon(0 0, 100% 0, calc(100% - 1.4rem) 50%, 100% 100%, 0 100%);
}
.sepak-bola-pennant__label { display: block; font-size: .6rem; font-weight: 900; letter-spacing: .24em; text-transform: uppercase; color: var(--sb-trim); }
.sepak-bola-pennant__name {
    margin: .15rem 0 0; padding-top: .1em; font-family: var(--sb-display); font-size: 2.1rem; font-weight: 600; line-height: .9; text-transform: uppercase;
    overflow-wrap: anywhere;
}

.sepak-bola-kit {
    --sb-shirt: var(--sb-pick, var(--inv-primary));
    --sb-shirt-trim: color-mix(in srgb, var(--sb-pick, var(--inv-primary)) 62%, #000);
    display: grid; grid-template-columns: 6.8rem minmax(0, 1fr); align-items: center; gap: .3rem 1rem; margin-top: 1.6rem;
    padding: 1.1rem 1.15rem 1.15rem; border-radius: 20px; text-align: left; background: #fff;
    box-shadow: var(--sb-shadow), inset 0 0 0 1px var(--sb-line);
}
.sepak-bola-kit__shirt { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 8px 10px rgb(0 0 0 / .18)); }
.sepak-bola-kit .sepak-bola-shirt__body { transition: fill .35s ease; }
.sepak-bola-kit__neck { fill: none; stroke: var(--sb-shirt-trim); stroke-width: 5; stroke-linejoin: round; transition: stroke .35s ease; }
.sepak-bola-kit__badge { fill: var(--sb-shirt-trim); }
.sepak-bola-kit__label { display: block; font-size: .6rem; font-weight: 900; letter-spacing: .24em; text-transform: uppercase; color: var(--sb-kit); }
.sepak-bola-kit__name { margin: .15rem 0 0; padding-top: .1em; font-family: var(--sb-display); font-size: 1.75rem; font-weight: 500; line-height: 1; overflow-wrap: anywhere; }
.sepak-bola-swatches { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem; margin-top: .8rem; }
.sepak-bola-swatch {
    width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: var(--sb-swatch);
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px color-mix(in srgb, var(--inv-text) 22%, transparent), var(--sb-shadow-sm);
    transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease;
}
.sepak-bola-swatch[aria-pressed=true] { transform: scale(1.14); box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px var(--sb-kit), var(--sb-shadow-sm); }
.sepak-bola-swatch:focus-visible { outline: 2px solid var(--sb-kit); outline-offset: 7px; }
.sepak-bola-kit__hint { grid-column: 1 / -1; margin: .7rem 0 0; text-align: center; font-size: .78rem; color: var(--sb-muted); }

.sepak-bola-yellow {
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 1rem; margin-top: 1.4rem; padding: 1rem 1.1rem;
    border-radius: 16px; text-align: left; background: #fff; box-shadow: var(--sb-shadow-sm), inset 0 0 0 1px var(--sb-line);
}
.sepak-bola-yellow__card {
    display: grid; place-items: center; width: 2.6rem; height: 3.5rem; margin: .1rem 0 0 .2rem; border-radius: 5px; rotate: -9deg;
    color: #3d2c00; background: #facc15; box-shadow: 0 6px 12px -6px rgb(0 0 0 / .45);
}
.sepak-bola-yellow__card .sepak-bola-icon { width: 1.2rem; height: 1.2rem; }
.sepak-bola-yellow__label { margin: 0; font-size: .6rem; font-weight: 900; letter-spacing: .22em; text-transform: uppercase; color: var(--sb-gold-text); }
.sepak-bola-yellow__text { margin: .2rem 0 0; font-size: .92rem; font-weight: 600; }

.sepak-bola-scarf {
    position: relative; display: inline-flex; align-items: center; gap: .65rem; max-width: calc(100% - 1rem); margin-top: 1.6rem;
    padding: .38rem 2.2rem .38rem 2.2rem; color: #fff;
    background:
        repeating-linear-gradient(90deg, var(--sb-trim) 0 .42rem, var(--sb-kit) .42rem .84rem) left / 1.68rem 100% no-repeat,
        repeating-linear-gradient(90deg, var(--sb-kit) 0 .42rem, var(--sb-trim) .42rem .84rem) right / 1.68rem 100% no-repeat,
        var(--sb-kit);
    box-shadow: var(--sb-shadow-sm), inset 0 0 0 1px rgb(0 0 0 / .1);
}
.sepak-bola-scarf__fringe {
    position: absolute; left: -.5rem; top: 12%; bottom: 12%; width: .5rem;
    background: repeating-linear-gradient(to bottom, var(--sb-kit) 0 2.5px, transparent 2.5px 5px);
}
.sepak-bola-scarf__fringe--end { left: auto; right: -.5rem; }
.sepak-bola-scarf__text { padding-top: .08em; font-family: var(--sb-display); font-size: 1.6rem; font-weight: 600; line-height: 1; letter-spacing: .04em; overflow-wrap: anywhere; text-align: left; }
.sepak-bola-scarf__copy {
    min-height: 2.6rem; padding: .3rem .95rem; border: 0; border-radius: 999px; cursor: pointer; flex: none;
    font: 900 .72rem/1 var(--sb-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--sb-kit); background: #fff;
}
.sepak-bola-scarf__copy:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sepak-bola-party__hint { margin: .8rem auto 0 !important; font-size: .78rem; color: var(--sb-muted); }

/* rundown: the match timeline */
.sepak-bola-timeline {
    padding: 1.15rem 1.1rem 1.1rem; border-radius: 20px; text-align: left; background: #fff; overflow: hidden;
    box-shadow: var(--sb-shadow), inset 0 0 0 1px var(--sb-line);
}
.sepak-bola-timeline__whistle {
    display: flex; align-items: center; gap: .5rem; margin: 0; padding-top: .1em;
    font-family: var(--sb-display); font-size: 1.35rem; font-weight: 600; line-height: 1; text-transform: uppercase; letter-spacing: .04em; color: var(--sb-kit);
}
.sepak-bola-timeline__whistle .sepak-bola-icon { width: 1.35rem; height: 1.35rem; margin-top: -.15em; }
.sepak-bola-timeline__whistle--end { margin-top: .9rem; }
.sepak-bola-timeline__half {
    display: flex; align-items: center; gap: .6rem; margin: 1rem 0 .3rem; font-size: .62rem; font-weight: 900; letter-spacing: .22em;
    text-transform: uppercase; color: var(--sb-grass-text);
}
.sepak-bola-timeline__half::after { content: ''; flex: 1; height: 2px; background: color-mix(in srgb, var(--sb-pitch) 30%, transparent); }
.sepak-bola-timeline__list { position: relative; margin: 0; padding: 0; list-style: none; }
/* the touchline down the timeline */
.sepak-bola-timeline__list::before {
    content: ''; position: absolute; left: calc(3.8rem + .5rem); top: .4rem; bottom: .4rem; width: 3px; margin-left: -1.5px; border-radius: 3px;
    background: var(--sb-pitch); transform-origin: top;
}
.sepak-bola-timeline__item { position: relative; display: grid; grid-template-columns: 3.8rem minmax(0, 1fr); gap: 1rem; padding: .55rem 0; }
.sepak-bola-timeline__item::before {
    content: ''; position: absolute; left: calc(3.8rem + .5rem); top: 1rem; width: .8rem; height: .8rem; margin-left: -.4rem; border-radius: 50%;
    background: #fff; box-shadow: inset 0 0 0 3px var(--sb-pitch);
}
.sepak-bola-timeline__time {
    align-self: start; padding: .2rem 0 .05rem; border-radius: 6px; text-align: center;
    font-family: var(--sb-display); font-size: 1.35rem; font-weight: 500; line-height: 1.05; font-variant-numeric: tabular-nums;
    color: var(--sb-led); background: var(--sb-night);
}
.sepak-bola-timeline__text { padding-left: .55rem; min-width: 0; }
.sepak-bola-timeline__title { margin: 0; font-size: 1rem; font-weight: 900; line-height: 1.35; }
.sepak-bola-timeline__desc { margin: .1rem 0 0; font-size: .86rem; color: var(--sb-muted); }
/* half time: a band of grass across the card */
.sepak-bola-timeline__break {
    display: flex; align-items: center; justify-content: center; gap: .7rem; margin: .9rem -1.1rem .2rem; padding: .55rem 1rem .45rem;
    font-family: var(--sb-display); font-size: 1.4rem; font-weight: 600; line-height: 1; letter-spacing: .08em; text-transform: uppercase; color: #fff;
    background: repeating-linear-gradient(90deg, var(--sb-grass-a) 0 1.4rem, var(--sb-grass-b) 1.4rem 2.8rem);
}
.sepak-bola-timeline__break span { padding-top: .1em; }
.sepak-bola-timeline__break::before, .sepak-bola-timeline__break::after { content: ''; width: 2.2rem; height: 2.5px; background: rgb(255 255 255 / .75); }

/* story: the sticker album */
.sepak-bola-album { display: grid; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.sepak-bola-sticker {
    position: relative; display: grid; grid-template-columns: 7.2rem minmax(0, 1fr); align-items: center; gap: .95rem; padding: .65rem .9rem .65rem .65rem;
    border-radius: 14px; text-align: left; background: #fff; rotate: -1.4deg;
    box-shadow: var(--sb-shadow), inset 0 0 0 1px var(--sb-line);
}
.sepak-bola-sticker:nth-child(even) { rotate: 1.3deg; }
/* the peeling corner */
.sepak-bola-sticker::after {
    content: ''; position: absolute; right: 0; bottom: 0; width: 1.7rem; height: 1.7rem; border-radius: 0 0 14px 0;
    background: linear-gradient(315deg, var(--inv-background) 48%, #e3e6ea 50%, #fff 75%);
    box-shadow: -2px -2px 5px -2px rgb(0 0 0 / .2);
}
.sepak-bola-sticker__frame {
    position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 10px;
    background: repeating-linear-gradient(135deg, var(--sb-kit) 0 10px, var(--sb-kit-deep) 10px 20px);
    box-shadow: inset 0 0 0 3px var(--sb-trim);
}
.sepak-bola-sticker__photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.sepak-bola-sticker__panel { position: absolute; inset: 0 0 1.8rem; display: grid; place-items: center; }
.sepak-bola-sticker__panel svg { width: 52%; height: auto; filter: drop-shadow(0 4px 4px rgb(0 0 0 / .3)); }
.sepak-bola-sticker__no {
    position: absolute; left: .35rem; top: .35rem; z-index: 1; padding: .1rem .35rem; border-radius: 4px;
    font-size: .56rem; font-weight: 900; letter-spacing: .08em; color: var(--inv-text); background: rgb(255 255 255 / .92);
}
.sepak-bola-sticker__year {
    position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: .28rem .3rem .1rem; text-align: center;
    font-family: var(--sb-display); font-size: 1.45rem; font-weight: 600; line-height: 1; color: var(--sb-kit); background: var(--sb-trim);
}
.sepak-bola-sticker__body { min-width: 0; padding-right: .4rem; }
.sepak-bola-sticker__title {
    margin: 0; padding-top: .1em; font-family: var(--sb-display); font-size: 1.65rem; font-weight: 600; line-height: .95; text-transform: uppercase;
    color: var(--sb-kit); overflow-wrap: anywhere;
}
.sepak-bola-sticker__text { margin: .35rem 0 0; font-size: .86rem; line-height: 1.5; color: var(--sb-muted); }

/* gallery: the goal (posts, crossbar, net) */
.sepak-bola-goal {
    position: relative; margin: 0 .2rem 1rem; padding: .9rem .8rem 1rem; border: 7px solid #fff; border-bottom: 0; border-radius: 6px 6px 0 0;
    background:
        repeating-linear-gradient(45deg, color-mix(in srgb, var(--inv-text) 13%, transparent) 0 1px, transparent 1px 13px),
        repeating-linear-gradient(-45deg, color-mix(in srgb, var(--inv-text) 13%, transparent) 0 1px, transparent 1px 13px),
        color-mix(in srgb, var(--sb-pitch) 8%, #fff);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--inv-text) 30%, transparent), inset 0 0 0 2px color-mix(in srgb, var(--inv-text) 22%, transparent),
        inset 0 10px 14px -10px rgb(0 0 0 / .25), var(--sb-shadow);
}
/* the goal line on the grass under the posts */
.sepak-bola-goal::after {
    content: ''; position: absolute; left: -1.6rem; right: -1.6rem; bottom: -.9rem; height: .9rem; border-top: 3px solid #fff;
    background: repeating-linear-gradient(90deg, var(--sb-grass-a) 0 1.2rem, var(--sb-grass-b) 1.2rem 2.4rem); border-radius: 0 0 8px 8px;
}
.sepak-bola-gallery .inv-gallery { gap: .6rem; }
.sepak-bola-gallery .inv-gallery__item { border-radius: 6px; box-shadow: 0 0 0 3px #fff, 0 6px 14px -8px rgb(0 0 0 / .4); }
.sepak-bola-gallery .inv-gallery__item:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }

/* live streaming: the TV broadcast */
.sepak-bola-tv {
    position: relative; padding: 2rem 1.3rem 1.5rem; border-radius: 20px; overflow: hidden; color: #fff;
    background:
        radial-gradient(circle at 50% 120%, transparent 4.5rem, rgb(255 255 255 / .16) 4.6rem 4.75rem, transparent 4.85rem),
        linear-gradient(to bottom, transparent calc(100% - 1px), rgb(255 255 255 / .14) 0) bottom / 100% 100% no-repeat,
        repeating-linear-gradient(90deg, var(--sb-grass-a) 0 2.4rem, var(--sb-grass-b) 2.4rem 4.8rem);
    box-shadow: var(--sb-shadow), inset 0 0 0 5px var(--sb-night);
}
.sepak-bola-tv__bug {
    position: absolute; left: 1rem; top: 1rem; display: inline-flex; align-items: center; gap: .4rem; margin: 0; padding: .2rem .6rem;
    border-radius: 5px; font-size: .64rem; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; color: #fff; background: #c1121f;
}
.sepak-bola-tv__dot { width: .5rem; height: .5rem; border-radius: 50%; background: #fff; }
.sepak-bola-tv__title { margin: .6rem 0 .3rem; padding-top: .1em; font-family: var(--sb-display); font-size: 2.3rem; font-weight: 600; line-height: .9; text-transform: uppercase; }
.sepak-bola-tv p { margin: 0 auto .4rem; max-width: 30ch; font-size: .9rem; font-weight: 600; }
.sepak-bola-tv__note { opacity: .95; font-size: .84rem !important; }
.sepak-bola-tv__button { margin-top: .7rem; min-height: 2.9rem; background: #fff !important; color: var(--sb-kit) !important; font-weight: 900; }

/* RSVP: the tactics board (form styles in part 5) */
.sepak-bola-tactics {
    overflow: hidden; border-radius: 22px; text-align: left; background: #fff;
    box-shadow: var(--sb-shadow), inset 0 0 0 1px var(--sb-line);
}
.sepak-bola-tactics__board {
    position: relative; padding: .7rem .7rem 0;
    background: repeating-linear-gradient(to bottom, var(--sb-grass-a) 0 22px, var(--sb-grass-b) 22px 44px);
}
.sepak-bola-tactics__pitch { display: block; width: 100%; height: auto; overflow: visible; }
.sepak-bola-tactics__lines path { fill: none; stroke: rgb(255 255 255 / .75); stroke-width: 2; }
.sepak-bola-tactics__lines .sepak-bola-tactics__net {
    fill: rgb(255 255 255 / .2); stroke: #fff; stroke-width: 2.4; transform-box: fill-box; transform-origin: 50% 100%;
}
.sepak-bola-tactics__spot { fill: #fff; }
.sepak-bola-tactics__arrow { fill: none; stroke: var(--sb-trim); stroke-width: 2; stroke-dasharray: 5 5; stroke-linecap: round; }
.sepak-bola-tactics__player circle { fill: var(--sb-kit); stroke: #fff; stroke-width: 2; }
.sepak-bola-tactics__player text { fill: var(--sb-trim); font-family: var(--sb-display); font-size: 14px; font-weight: 600; text-anchor: middle; }
.sepak-bola-tactics__slot circle { fill: rgb(255 255 255 / .14); stroke: #fff; stroke-width: 2; stroke-dasharray: 4 3; }
.sepak-bola-tactics__slot text { fill: #fff; font-family: var(--sb-display); font-size: 17px; font-weight: 600; text-anchor: middle; }
.sepak-bola-tactics__slot, .sepak-bola-tactics__you { transform-box: fill-box; transform-origin: center; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), opacity .3s ease; }
.sepak-bola-tactics__you { opacity: 0; transform: scale(0); }
.sepak-bola-tactics__you circle { fill: var(--sb-trim); stroke: #fff; stroke-width: 2.5; }
.sepak-bola-tactics__you text { fill: var(--sb-kit); font-family: var(--sb-sans); font-size: 7.5px; font-weight: 900; letter-spacing: .4px; text-anchor: middle; }
.sepak-bola-tactics__ball { transform-box: view-box; transform-origin: 150px 80px; transition: transform .7s cubic-bezier(.3, .1, .3, 1) .2s; }
/* answered: the guest's marker takes the slot (yes) or the bench spot (maybe); on yes the ball flies into the net */
.sepak-bola-tactics.is-yes .sepak-bola-tactics__slot, .sepak-bola-tactics.is-maybe .sepak-bola-tactics__slot { opacity: 0; transform: scale(.4); }
.sepak-bola-tactics.is-yes .sepak-bola-tactics__you { opacity: 1; transform: none; }
.sepak-bola-tactics.is-maybe .sepak-bola-tactics__you { opacity: .9; transform: translateY(62px) scale(.85); }
.sepak-bola-tactics.is-yes .sepak-bola-tactics__ball { transform: translate(0, -76px) rotate(560deg) scale(.85); }
.sepak-bola-tactics__goal {
    position: absolute; inset: 0; display: grid; place-items: center; margin: 0; pointer-events: none; opacity: 0;
    font-family: var(--sb-display); font-size: 4.6rem; font-weight: 700; line-height: 1; letter-spacing: .04em; text-transform: uppercase;
    color: var(--sb-trim); text-shadow: 0 4px 0 var(--sb-kit-deep), 0 0 30px rgb(0 0 0 / .45);
}
.sepak-bola-tactics__body { padding: 1.25rem 1.15rem 1.35rem; }
.sepak-bola-tactics__intro { margin: 0 auto 1.1rem; max-width: 32ch; text-align: center; font-size: .9rem; color: var(--sb-muted); }
.sepak-bola-tactics__sent { margin-bottom: 1rem; text-align: center; }
.sepak-bola-tactics__thanks { margin: 0; padding-top: .1em; font-family: var(--sb-display); font-size: 2rem; font-weight: 600; line-height: 1; text-transform: uppercase; color: var(--sb-kit); }
.sepak-bola-tactics__line { margin: .3rem auto 0; max-width: 32ch; font-size: .9rem; color: var(--sb-muted); }
.sepak-bola-rsvp .inv-rsvp__deadline { margin: 0 0 1rem; text-align: center; font-size: .82rem; font-weight: 800; color: var(--sb-kit); }

/* wishes */
.sepak-bola-wishes__intro { font-size: .9rem; color: var(--sb-muted); }

/* gift: VIP passes on lanyards, two per row; the address pass full width below */
.sepak-bola-gift__intro { color: var(--sb-muted); }
.sepak-bola-gift .inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.1rem .8rem; margin-top: 2.6rem; }
.sepak-bola-gift .inv-gift__account:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: min(100%, 15rem); }
.sepak-bola-gift .inv-gift__account {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem; min-width: 0; margin: 0;
    padding: 2.4rem .7rem 1rem; border-radius: 14px; text-align: center;
    background: linear-gradient(var(--sb-kit), var(--sb-kit)) top / 100% 1.75rem no-repeat, #fff;
    box-shadow: var(--sb-shadow), inset 0 0 0 1px var(--sb-line);
}
/* the lanyard strap with its clip, and the punched hole */
.sepak-bola-gift .inv-gift__account::before {
    content: ''; position: absolute; left: 50%; top: -1.9rem; width: 1rem; height: 2.6rem; margin-left: -.5rem; border-radius: 3px;
    background: repeating-linear-gradient(to bottom, var(--sb-kit-deep) 0 5px, var(--sb-trim) 5px 7px);
    box-shadow: 0 0 0 1px rgb(0 0 0 / .08);
}
.sepak-bola-gift .inv-gift__account::after {
    content: ''; position: absolute; left: 50%; top: .55rem; width: 2.3rem; height: .55rem; margin-left: -1.15rem; border-radius: 999px;
    background: var(--inv-background); box-shadow: inset 0 1px 2px rgb(0 0 0 / .35);
}
.sepak-bola-gift .inv-gift__account p { margin: 0; }
.sepak-bola-gift .inv-gift__bank { font-weight: 900; font-size: .85rem; color: var(--sb-kit); }
.sepak-bola-gift .inv-gift__logo { height: 1.6rem; padding: .2rem .5rem; border-radius: .4rem; background: #fff; box-shadow: inset 0 0 0 1px var(--sb-line); }
.sepak-bola-gift .inv-gift__logo img { max-width: 5rem; }
.sepak-bola-gift .inv-gift__number { font-family: var(--sb-display); font-size: 1.5rem; font-weight: 500; letter-spacing: .04em; line-height: 1; padding-top: .1em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; color: var(--inv-text); }
.sepak-bola-gift .inv-gift__holder { font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--sb-muted); overflow-wrap: anywhere; }
.sepak-bola-gift .inv-gift__account .inv-button { margin-top: .4rem; min-height: 2.6rem; padding: .35rem .9rem; font-size: .74rem; font-weight: 900; }
.sepak-bola-gift .inv-gift__address { margin-top: 2.6rem; font-size: .875rem; }
.sepak-bola-gift .inv-gift__address .inv-gift__holder { font-size: .74rem; }

/* wishlist: the trophy cabinet; the body unfolds with a grid-rows transition */
.sepak-bola-wishlist__intro { font-size: .88rem; color: var(--sb-muted); }
.sepak-bola-cabinet {
    display: grid; gap: .9rem; margin: 1.2rem 0 0; padding: .9rem .75rem 1rem; list-style: none; text-align: left; border-radius: 18px;
    border: 6px solid #9a6a3a; background: linear-gradient(160deg, color-mix(in srgb, var(--sb-kit) 32%, #0b1220), #0b1220);
    box-shadow: var(--sb-shadow), inset 0 0 0 1px rgb(255 255 255 / .12), inset 0 20px 40px -20px rgb(255 255 255 / .18);
}
.sepak-bola-cabinet__item {
    position: relative; border-radius: 12px; background: #fff;
    box-shadow: 0 7px 0 -3px rgb(255 255 255 / .28), 0 10px 18px -12px rgb(0 0 0 / .6);
}
.sepak-bola-cabinet__head {
    display: flex; align-items: center; gap: .85rem; width: 100%; min-height: 4.6rem; padding: .6rem 1rem .6rem .8rem;
    border: 0; border-radius: inherit; cursor: pointer; text-align: left; font: inherit; color: inherit; background: none;
}
.sepak-bola-cabinet__head:focus-visible { outline: 3px solid var(--sb-gold); outline-offset: 2px; }
.sepak-bola-medal { position: relative; width: 2.6rem; height: 3.4rem; flex: none; transform-origin: 50% 0; transition: rotate .5s cubic-bezier(.34, 1.56, .64, 1); }
.sepak-bola-medal__ribbon {
    position: absolute; left: 50%; top: 0; width: 1.6rem; height: 1.5rem; margin-left: -.8rem;
    background: linear-gradient(90deg, var(--sb-kit) 0 33%, var(--sb-trim) 33% 67%, var(--sb-kit) 67%);
    clip-path: polygon(0 0, 100% 0, 78% 100%, 22% 100%); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .15);
}
.sepak-bola-medal__disc {
    position: absolute; left: 50%; bottom: 0; display: grid; place-items: center; width: 2.35rem; height: 2.35rem; margin-left: -1.175rem; padding-top: .14em;
    border-radius: 50%; font-family: var(--sb-display); font-size: 1.35rem; font-weight: 700; line-height: 1; color: #5a3d00;
    background: radial-gradient(circle at 35% 30%, #ffe680, var(--sb-gold) 55%, #c98f00);
    box-shadow: inset 0 0 0 2.5px rgb(255 255 255 / .45), 0 0 0 1.5px #a67600;
}
.sepak-bola-cabinet__item.is-open .sepak-bola-medal { rotate: -12deg; }
.sepak-bola-cabinet__label { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sepak-bola-cabinet__number { font-size: .6rem; font-weight: 900; letter-spacing: .22em; text-transform: uppercase; color: var(--sb-gold-text); }
.sepak-bola-cabinet__name { font-size: 1rem; font-weight: 900; line-height: 1.3; overflow-wrap: anywhere; }
.sepak-bola-cabinet__toggle {
    display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; flex: none; color: var(--sb-kit);
    background: var(--sb-kit-soft); transition: transform .35s ease;
}
.sepak-bola-cabinet__item.is-open .sepak-bola-cabinet__toggle { transform: rotate(180deg); }
.sepak-bola-cabinet__body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .4s cubic-bezier(.4, 0, .2, 1), visibility .4s; }
.sepak-bola-cabinet__item.is-closed .sepak-bola-cabinet__body { grid-template-rows: 0fr; visibility: hidden; }
.sepak-bola-cabinet__inner { min-height: 0; overflow: hidden; padding: 0 1rem; }
.sepak-bola-cabinet__inner > :first-child { margin-top: .1rem; }
.sepak-bola-cabinet__inner > :last-child { margin-bottom: 1rem; }
.sepak-bola-cabinet__photo { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: .75rem; border-radius: 10px; }
.sepak-bola-cabinet__note { margin: 0 0 .75rem; padding-left: .8rem; font-size: .9rem; color: var(--sb-muted); border-left: 3px solid var(--sb-gold); }
.sepak-bola-cabinet__shop { width: 100%; min-height: 2.75rem; font-size: .86rem; }
.sepak-bola-cabinet__shop .sepak-bola-icon { width: 1.05rem; height: 1.05rem; }

/* co-hosts: the team sheet */
.sepak-bola-sheet {
    max-width: 22rem; margin: 0 auto; overflow: hidden; border-radius: 16px; text-align: left; background: #fff;
    box-shadow: var(--sb-shadow), inset 0 0 0 1px var(--sb-line);
}
.sepak-bola-sheet__head {
    display: flex; justify-content: space-between; margin: 0; padding: .6rem 1.05rem; font-size: .62rem; font-weight: 900; letter-spacing: .22em;
    text-transform: uppercase; color: var(--sb-trim); background: var(--sb-kit);
}
.sepak-bola-sheet__list { margin: 0; padding: .3rem 0; list-style: none; }
.sepak-bola-sheet__list li { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .55rem 1.05rem; }
.sepak-bola-sheet__list li + li { border-top: 1px dashed var(--sb-line); }
.sepak-bola-sheet__name { min-width: 0; font-weight: 800; line-height: 1.35; overflow-wrap: anywhere; }
.sepak-bola-sheet__no {
    display: grid; place-items: center; width: 2.2rem; height: 2.2rem; flex: none; padding-top: .12em; border-radius: 50%;
    font-family: var(--sb-display); font-size: 1.3rem; font-weight: 600; line-height: 1; color: var(--sb-kit); background: var(--sb-kit-soft);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--sb-kit) 35%, transparent);
}

/* contacts: officials' accreditation cards */
.sepak-bola-officials { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.sepak-bola-officials > :last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: min(100%, 15rem); }
.sepak-bola-official {
    display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 0 .8rem 1.1rem; overflow: hidden; border-radius: 16px;
    background: #fff; box-shadow: var(--sb-shadow), inset 0 0 0 1px var(--sb-line);
}
.sepak-bola-official__band {
    display: flex; align-items: center; justify-content: center; gap: .45rem; align-self: stretch; margin: 0 -.8rem; padding: .45rem;
    font-size: .6rem; font-weight: 900; letter-spacing: .22em; text-transform: uppercase; color: var(--sb-trim); background: var(--sb-kit);
}
.sepak-bola-official__band svg { width: 1.5rem; height: 1rem; color: var(--sb-trim); }
.sepak-bola-official__avatar {
    display: grid; place-items: center; width: 3.1rem; height: 3.1rem; margin: 1rem 0 .55rem; padding-top: .12em; border-radius: 50%;
    font-family: var(--sb-display); font-size: 1.8rem; font-weight: 600; line-height: 1; color: var(--sb-led); background: var(--sb-night);
}
.sepak-bola-official p { margin: 0; }
.sepak-bola-official .sepak-bola-official__band { margin: 0 -.8rem; }
.sepak-bola-official__name { font-weight: 900; font-size: .95rem; overflow-wrap: anywhere; }
.sepak-bola-official__role { font-size: .8rem; color: var(--sb-muted); }
.sepak-bola-official__button { margin-top: .8rem; min-height: 2.75rem; padding: .45rem 1.1rem; font-size: .82rem; }
.sepak-bola-official__button .sepak-bola-icon { width: 1.1rem; height: 1.1rem; }
.sepak-bola-official__phone { margin-top: .5rem !important; font-size: .85rem; }

/* health protocol: the rule book */
.sepak-bola-rules {
    padding: 1.1rem 1.2rem; border-radius: 14px; text-align: left; background: #fff;
    box-shadow: inset 6px 0 0 var(--sb-kit), var(--sb-shadow-sm), inset 0 0 0 1px var(--sb-line);
}
.sepak-bola-rules__list { display: grid; gap: .6rem; margin: 0; padding: 0 0 0 .4rem; list-style: none; font-size: .92rem; font-weight: 700; }
.sepak-bola-rules__list li { display: flex; align-items: center; gap: .6rem; }
.sepak-bola-rules__list .sepak-bola-icon { color: var(--sb-kit); }
.sepak-bola-rules__note { margin: .8rem 0 0; padding-left: .4rem; font-size: .86rem; color: var(--sb-muted); }

/* vendors: the sponsor boards */
.sepak-bola-sponsors { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; text-align: left; }
.sepak-bola-sponsor {
    position: relative; display: flex; flex-direction: column; align-items: flex-start; overflow: hidden; padding: .75rem 1rem .6rem; border-radius: 10px;
    color: #fff; background: radial-gradient(rgb(255 255 255 / .07) 1px, transparent 1.3px) 0 0 / 4px 4px, var(--sb-night);
    box-shadow: inset 0 -4px 0 var(--sb-kit), var(--sb-shadow-sm);
}
/* the LED shine that sweeps across the board */
.sepak-bola-sponsor::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; translate: -110% 0;
    background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / .1) 50%, transparent 70%);
}
.sepak-bola-sponsor__role {
    padding: .14rem .5rem .12rem; border-radius: 4px; font-size: .58rem; font-weight: 900; letter-spacing: .2em; text-transform: uppercase;
    color: #fff; background: var(--sb-kit); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .25);
}
.sepak-bola-sponsor__name {
    margin-top: .35rem; padding-top: .1em; font-family: var(--sb-display); font-size: 1.95rem; font-weight: 500; line-height: .95; letter-spacing: .03em;
    text-transform: uppercase; color: var(--sb-led); text-shadow: 0 0 10px color-mix(in srgb, var(--sb-led) 45%, transparent); overflow-wrap: anywhere;
}
.sepak-bola-sponsor__link {
    display: inline-flex; align-items: center; gap: .35rem; min-height: 2.75rem; font-size: .8rem; font-weight: 800; text-decoration: none;
    color: rgb(255 255 255 / .9); overflow-wrap: anywhere;
}
.sepak-bola-sponsor__link .sepak-bola-icon { width: 1rem; height: 1rem; }

/* closing: the long whistle and the trophy */
.sepak-bola-closing { padding-bottom: 3.4rem; }
.sepak-bola-closing__tab {
    display: inline-flex !important; align-items: center; gap: .45rem; margin-bottom: 0 !important; padding: .35rem .8rem; border-radius: 6px;
    font-size: .62rem; font-weight: 900; letter-spacing: .24em; text-transform: uppercase; color: var(--sb-led); background: var(--sb-night);
}
.sepak-bola-podium { position: relative; width: min(14rem, 64vw); margin: 1.8rem auto 2.2rem; }
.sepak-bola-podium__circle {
    position: relative; display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--sb-kit) 70%, #fff), var(--sb-kit-deep) 75%);
    box-shadow: 0 0 0 5px #fff, 0 0 0 9px var(--sb-pitch), var(--sb-shadow);
}
.sepak-bola-podium__photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.sepak-bola-podium__circle .sepak-bola-jersey { width: 76%; margin-top: 8%; }
.sepak-bola-podium__trophy {
    position: absolute; right: -2.2rem; bottom: -1.6rem; width: 7.2rem; container-type: inline-size;
    filter: drop-shadow(0 12px 12px rgb(0 0 0 / .3));
}
.sepak-bola-podium__trophy svg { display: block; width: 100%; height: auto; }
.sepak-bola-podium__plate {
    position: absolute; left: 34%; width: 32%; top: 75.5%; height: 11.5%; display: grid; place-items: center; overflow: hidden;
    padding-top: .1em; font-family: var(--sb-display); font-size: 8cqw; font-weight: 600; line-height: 1; letter-spacing: .04em;
    text-transform: uppercase; color: #4a3300; text-align: center; overflow-wrap: anywhere;
}
.sepak-bola-podium__plate--long { font-size: 5.6cqw; overflow-wrap: normal; word-break: normal; }
.sepak-bola-closing__message { margin: 0 auto; max-width: 32ch; font-weight: 600; color: var(--sb-muted); }
.sepak-bola-closing__signature-label { margin: 1.5rem auto 0 !important; font-size: .66rem; font-weight: 900; letter-spacing: .24em; text-transform: uppercase; color: var(--sb-kit); }
.sepak-bola-closing__signature {
    margin: .2rem auto 0 !important; max-width: none !important; padding-top: .1em; font-family: var(--sb-display); font-size: 2.3rem; font-weight: 600;
    line-height: .95; text-transform: uppercase; color: var(--sb-kit); overflow-wrap: anywhere; text-wrap: balance;
}

/* ---------- 5. forms (shared RSVP + wishes, restyled) ---------- */
.sepak-bola-main .inv-form { gap: 1rem; }
.sepak-bola-main .inv-form label, .sepak-bola-main .inv-form__choices legend { font-size: .8rem; font-weight: 900; letter-spacing: .03em; color: var(--inv-text); }
.sepak-bola-main .inv-form input:not([type=radio]):not([type=checkbox]),
.sepak-bola-main .inv-form select,
.sepak-bola-main .inv-form textarea {
    width: 100%; min-height: 2.9rem; margin-top: .3rem; padding: .7rem .95rem; border: 0; border-radius: 12px;
    font: 700 .95rem/1.4 var(--sb-sans); color: var(--inv-text); background: #fff;
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-text) 22%, transparent);
    transition: box-shadow .2s ease;
}
.sepak-bola-main .inv-form select {
    appearance: none; padding-right: 2.4rem;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right .8rem center / 1.1rem no-repeat;
}
.sepak-bola-main .inv-form input:not([type=radio]):focus-visible,
.sepak-bola-main .inv-form select:focus-visible,
.sepak-bola-main .inv-form textarea:focus-visible {
    outline: none; box-shadow: inset 0 0 0 2.5px var(--sb-kit), 0 0 0 4px color-mix(in srgb, var(--sb-kit) 22%, transparent);
}
.sepak-bola-main .inv-form button[type=submit] {
    width: 100%; min-height: 3.1rem; border-radius: 999px; font-size: .84rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase;
    color: var(--sb-kit); background: var(--sb-trim); box-shadow: 0 4px 0 var(--sb-kit-deep), inset 0 0 0 2px var(--sb-kit);
}
.sepak-bola-main .inv-form button[type=submit]:focus-visible { outline: 3px solid var(--sb-kit); outline-offset: 4px; }
.sepak-bola-main .inv-form .inv-button--outline { width: 100%; min-height: 2.8rem; }
.sepak-bola-main .inv-form__notice { text-align: center; }

/* the three answers as big choice cards (the radio dot is hidden but still focusable) */
.sepak-bola-rsvp .inv-form__choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; margin: 0; padding: 0; border: 0; }
.sepak-bola-rsvp .inv-form__choices legend { margin-bottom: .5rem; padding: 0; }
.sepak-bola-rsvp .inv-form__choices label {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .55rem;
    min-height: 5.8rem; padding: .85rem .3rem .75rem; border-radius: 14px; cursor: pointer; text-align: center;
    font-size: .8rem; font-weight: 900; line-height: 1.2; color: var(--inv-text); background: #fff;
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-text) 20%, transparent);
    transition: background-color .25s ease, color .25s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease;
}
.sepak-bola-rsvp .inv-form__choices input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
/* icon: a round badge (::before) with a ball, a cross or a question mark on it (::after, a mask in currentColor) */
.sepak-bola-rsvp .inv-form__choices label::before {
    content: ''; width: 2.3rem; height: 2.3rem; border-radius: 50%; flex: none; background: var(--sb-kit-soft);
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), background-color .25s ease;
}
.sepak-bola-rsvp .inv-form__choices label::after {
    content: ''; position: absolute; left: 50%; top: 1.4rem; width: 1.25rem; height: 1.25rem; margin-left: -.625rem;
    background: var(--sb-kit); pointer-events: none;
    -webkit-mask: var(--sb-choice-icon) center / contain no-repeat; mask: var(--sb-choice-icon) center / contain no-repeat;
}
.sepak-bola-rsvp .inv-form__choices label:nth-of-type(1) {
    --sb-choice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m12 8 3.4 2.5-1.3 4h-4.2l-1.3-4Z' fill='%23000'/%3E%3Cpath d='M12 8V3.2M15.4 10.5l4.5-1.6M14.1 14.5l2.8 3.8M9.9 14.5l-2.8 3.8M8.6 10.5 4.1 8.9'/%3E%3C/svg%3E");
}
.sepak-bola-rsvp .inv-form__choices label:nth-of-type(2) {
    --sb-choice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E");
}
.sepak-bola-rsvp .inv-form__choices label:nth-of-type(3) {
    --sb-choice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M8.5 8.8a3.5 3.5 0 1 1 4.9 3.2c-.9.4-1.4 1.1-1.4 2v.5M12 19h.01'/%3E%3C/svg%3E");
}
.sepak-bola-rsvp .inv-form__choices label:has(input:checked) {
    color: #fff; background: linear-gradient(160deg, var(--sb-kit), var(--sb-kit-deep)); transform: translateY(-3px);
    box-shadow: 0 12px 22px -12px color-mix(in srgb, var(--inv-text) 80%, transparent), 0 0 0 2.5px var(--sb-trim), 0 0 0 4px var(--sb-kit);
}
.sepak-bola-rsvp .inv-form__choices label:has(input:checked)::before { background-color: var(--sb-trim); transform: scale(1.1); }
.sepak-bola-rsvp .inv-form__choices label:has(input:focus-visible) { outline: 3px solid var(--sb-kit); outline-offset: 3px; }

/* wishes: the form on a card with a scarf edge, the wishes as supporters' banners in a scroll box */
.sepak-bola-wishes .inv-wishes { --inv-wishes-height: 20rem; }
.sepak-bola-wishes .inv-form {
    position: relative; overflow: hidden; padding: 1.7rem 1.1rem 1.3rem; border-radius: 18px; text-align: left; background: #fff;
    box-shadow: var(--sb-shadow), inset 0 0 0 1px var(--sb-line);
}
.sepak-bola-wishes .inv-form::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: .55rem;
    background: repeating-linear-gradient(90deg, var(--sb-kit) 0 1.2rem, var(--sb-trim) 1.2rem 2.4rem); box-shadow: inset 0 -1px 0 rgb(0 0 0 / .1);
}
.sepak-bola-wishes .inv-wishes__list { margin-top: 1.1rem; }
.sepak-bola-wishes .inv-wishes:not(.inv-wishes--paged) .inv-wishes__list {
    padding: .6rem; border-radius: 16px; background: color-mix(in srgb, var(--sb-pitch) 10%, var(--inv-background)); box-shadow: inset 0 0 0 1px var(--sb-line);
}
.sepak-bola-wishes .inv-wish {
    padding: .7rem 1.6rem .65rem 1.15rem; border-radius: 4px; text-align: left; background: #fff;
    clip-path: polygon(0 0, 100% 0, calc(100% - .7rem) 50%, 100% 100%, 0 100%);
    box-shadow: inset 5px 0 0 var(--sb-kit), inset 0 0 0 1px var(--sb-line);
}
.sepak-bola-wishes .inv-wish:nth-child(even) { box-shadow: inset 5px 0 0 var(--sb-pitch), inset 0 0 0 1px var(--sb-line); }
.sepak-bola-wishes .inv-wish__name { padding-top: .1em; font-family: var(--sb-display); font-size: 1.4rem; font-weight: 600; line-height: 1; text-transform: uppercase; color: var(--sb-kit); }
.sepak-bola-wishes .inv-wish__message { font-size: .9rem; line-height: 1.5; }
.sepak-bola-wishes .inv-wish__time { font-size: .72rem; color: var(--sb-muted); }
.sepak-bola-wishes .inv-wishes__empty { color: var(--sb-muted); }

/* ---------- 6. shared components ---------- */
.sepak-bola-main .inv-button { font-weight: 900; color: #fff; background: var(--sb-kit); }
.sepak-bola-main .inv-button--outline { background: transparent; color: var(--sb-kit); box-shadow: inset 0 0 0 1.5px var(--sb-kit); }
body .inv-nav {
    --inv-nav-bg: color-mix(in srgb, var(--sb-night) 92%, transparent);
    --inv-nav-text: rgb(255 255 255 / .8);
    --inv-nav-active: var(--sb-trim);
    font-family: var(--sb-sans); border-color: rgb(255 255 255 / .12);
}
body .inv-nav .inv-nav__item.is-active { color: var(--sb-kit); }

/* ---------- 7. screen sizes ---------- */

/* short phones: the circle and the type step down so everything fits without scrolling */
@media (max-height: 760px) {
    .sepak-bola-cover { --sb-circle: 25svh; padding-top: 3.4svh; padding-bottom: 2.4rem; }
    .sepak-bola-cover__circle { margin: 4svh 0 2.8svh; }
    .sepak-bola-cover__nick { font-size: 4.1rem; }
    .sepak-bola-cover__number { height: 3.2rem; min-width: 3rem; font-size: 2.9rem; }
    .sepak-bola-cover__date { margin-top: .7rem; }
    .sepak-bola-cover__quote { font-size: .82rem; }
    .sepak-bola-cover__pass { margin-top: .9rem; }
    .sepak-bola-cover__open { margin-top: .95rem; }
}
@media (max-height: 660px) {
    .sepak-bola-cover { --sb-circle: 22.5svh; padding-top: 3svh; padding-bottom: 2.2rem; }
    .sepak-bola-cover__tab { padding: .35rem 1rem .3rem; }
    .sepak-bola-cover__title { font-size: 1.25rem; }
    .sepak-bola-cover__circle { margin: 3.8svh 0 2.6svh; }
    .sepak-bola-cover__nick { font-size: 3.6rem; }
    .sepak-bola-cover__number { height: 2.9rem; min-width: 2.7rem; font-size: 2.6rem; }
    .sepak-bola-cover__date { margin-top: .55rem; font-size: .86rem; }
    .sepak-bola-cover__quote { margin-top: .4rem; font-size: .78rem; line-height: 1.4; }
    .sepak-bola-cover__pass { margin-top: .75rem; padding-top: .45rem; padding-bottom: .45rem; }
    .sepak-bola-cover__guest { font-size: 1.35rem; }
    .sepak-bola-cover__open { margin-top: .85rem; min-height: 2.9rem; }
}
/* very long nicknames on narrow phones */
@media (max-width: 380px) {
    .sepak-bola-cover__nick { font-size: min(3.6rem, 16vw); }
}

/* wide screens: the phone-width column on a mowed pitch */
@media (min-width: 560px) {
    body.sepak-bola-body {
        background:
            linear-gradient(to right, rgb(0 0 0 / .2), transparent 20%, transparent 80%, rgb(0 0 0 / .2)),
            repeating-linear-gradient(90deg, var(--sb-grass-a) 0 70px, var(--sb-grass-b) 70px 140px);
        background-attachment: fixed;
    }
    .sepak-bola-main { box-shadow: 0 0 0 6px rgb(255 255 255 / .55), 0 30px 70px -20px rgb(0 0 0 / .5); }
    .sepak-bola-branding { box-shadow: 0 0 0 6px rgb(255 255 255 / .55); }
}

/* ---------- 8. motion ---------- */
@keyframes sb-spin { to { rotate: 360deg; } }
@keyframes sb-roll-in { 0% { translate: -40vw 0; rotate: -540deg; } 100% { translate: 0 0; rotate: 0deg; } }
@keyframes sb-swing { 0% { rotate: 9deg; } 30% { rotate: -6deg; } 55% { rotate: 3.5deg; } 78% { rotate: -1.5deg; } 100% { rotate: 0deg; } }
@keyframes sb-marquee { to { transform: translateX(-50%); } }
@keyframes sb-wave { 0%, 100% { transform: skewY(0deg) scaleX(1); } 50% { transform: skewY(-2.5deg) scaleX(.97); } }
@keyframes sb-march { to { stroke-dashoffset: -20; } }
@keyframes sb-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes sb-net { 0% { transform: scaleY(1); } 30% { transform: scaleY(1.5); } 60% { transform: scaleY(.85); } 100% { transform: scaleY(1); } }
@keyframes sb-goal { 0% { opacity: 0; transform: scale(.3) rotate(-10deg); } 18% { opacity: 1; transform: scale(1.15) rotate(3deg); } 28% { transform: scale(1) rotate(0); } 80% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.2); } }
@keyframes sb-shine { 0%, 60% { translate: -110% 0; } 100% { translate: 110% 0; } }
@keyframes sb-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes sb-rise { from { transform: translateY(30px) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sb-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes sb-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }

/* cover: the ball rolls in to its place, the button ball spins, the ring breathes */
html.inv-anim .sepak-bola-cover__ball { animation: sb-roll-in 1.1s cubic-bezier(.2, .8, .3, 1) .45s backwards; }
html.inv-anim .sepak-bola-cover__open-ball { animation: sb-spin 3.2s linear infinite; }
html.inv-anim .sepak-bola-cover__number { animation: sb-bob 3s ease-in-out 1.5s infinite; }

/* the LED board runs, the pennant waves, the arrows march, the empty slot pulses, the sponsor boards shine */
html.inv-anim .sepak-bola-board__track { animation: sb-marquee 26s linear infinite; }
html.inv-anim .sepak-bola-pennant__flag { animation: sb-wave 3.6s ease-in-out infinite; }
html.inv-anim .sepak-bola-tactics__arrow { animation: sb-march 1.2s linear infinite; }
html.inv-anim .sepak-bola-tactics__slot { animation: sb-pulse 1.6s ease-in-out infinite; }
html.inv-anim .sepak-bola-tactics.is-answered .sepak-bola-tactics__slot { animation: none; }
html.inv-anim .sepak-bola-sponsor::after { animation: sb-shine 5s ease-in-out infinite; }
html.inv-anim .sepak-bola-sponsor:nth-child(2n)::after { animation-delay: -1.7s; }
html.inv-anim .sepak-bola-sponsor:nth-child(3n)::after { animation-delay: -3.3s; }
html.inv-anim .sepak-bola-tv__dot { animation: sb-blink 1.2s ease-in-out infinite; }

/* the jersey swings on its hook when revealed; the trophy rises */
html.inv-anim .sepak-bola-locker.is-revealed .sepak-bola-locker__hang { animation: sb-swing 1.8s cubic-bezier(.3, .6, .4, 1) .2s both; }
html.inv-anim .sepak-bola-podium.is-revealed .sepak-bola-podium__trophy { animation: sb-rise .8s cubic-bezier(.34, 1.56, .64, 1) .35s both; }

/* RSVP: the goal (the net bulges, "GOOOL!" pops up and fades) */
html.inv-anim .sepak-bola-tactics.is-yes .sepak-bola-tactics__net { animation: sb-net .7s ease-out .75s both; }
html.inv-anim .sepak-bola-tactics__goal { animation: sb-goal 2.8s cubic-bezier(.3, 1.3, .5, 1) .75s both; }

/* scroll-drawn details (the default, without support, is the finished drawing) */
@supports (animation-timeline: view()) {
    html.inv-anim .sepak-bola-timeline__list::before { animation: sb-grow linear both; animation-timeline: view(); animation-range: entry 10% cover 55%; }
    html.inv-anim .sepak-bola-fixture__ball { animation: sb-roll-in linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
}

@media (prefers-reduced-motion: reduce) {
    .sepak-bola-cover, .sepak-bola-cover__inner, .sepak-bola-pitch, .sepak-bola-cover__ball, .sepak-bola-cover__ring, .sepak-bola-cover__photo-wrap,
    .sepak-bola-cover__halfway, .sepak-bola-cover__tab, .sepak-bola-cover__name, .sepak-bola-cover__date, .sepak-bola-cover__quote,
    .sepak-bola-cover__pass, .sepak-bola-cover__open, .sepak-bola-heading__line::before, .sepak-bola-heading__line::after, .sepak-bola-heading__ball,
    .sepak-bola-tactics__slot, .sepak-bola-tactics__you, .sepak-bola-tactics__ball, .sepak-bola-cabinet__body, .sepak-bola-medal,
    .sepak-bola-cabinet__toggle, .sepak-bola-swatch, .sepak-bola-kit .sepak-bola-shirt__body { transition: none; }
    .sepak-bola-board__track, .sepak-bola-pennant__flag, .sepak-bola-tactics__arrow, .sepak-bola-tactics__slot, .sepak-bola-sponsor::after,
    .sepak-bola-tv__dot, .sepak-bola-cover__ball, .sepak-bola-cover__open-ball, .sepak-bola-cover__number { animation: none; }
}

/* ---------- intro scene "Malam Final di Stadion" (scene.json + sections/_scene; the intro lives in <body>, outside
   the page column): the camera flies down into the night stadium, the floodlights switch on, the jersey drops in on
   its hanger, the ball is kicked in and lands on the centre spot (confetti), the trophy pops up and the scoreboard
   (the card) shows the name. */
.sepak-bola-scene-stadium {
    position: absolute; inset: 0; overflow: hidden;
    background:
        radial-gradient(70% 30% at 50% 47%, color-mix(in srgb, var(--inv-primary) 45%, transparent), transparent 75%),
        linear-gradient(to bottom, color-mix(in srgb, var(--sb-night) 80%, #000), var(--sb-night) 30%, color-mix(in srgb, var(--sb-night) 82%, var(--inv-primary)) 48%);
}
/* the light of the two floodlights (switches on at ~.5s) */
.sepak-bola-scene-stadium__beams {
    position: absolute; inset: 0;
    background:
        radial-gradient(42% 30% at 12% 10%, rgb(255 250 225 / .42), transparent 70%),
        radial-gradient(42% 30% at 88% 10%, rgb(255 250 225 / .42), transparent 70%),
        linear-gradient(160deg, transparent 18%, rgb(255 250 225 / .1) 30%, transparent 55%),
        linear-gradient(200deg, transparent 18%, rgb(255 250 225 / .1) 30%, transparent 55%);
}
/* the stands: rows of the crowd in the kit colours, the dark roof edge above */
.sepak-bola-scene-stadium__crowd {
    position: absolute; left: 0; right: 0; top: 41%; height: 17%;
    background:
        radial-gradient(circle, color-mix(in srgb, var(--inv-accent) 85%, transparent) 1.6px, transparent 2.2px) 0 0 / 11px 9px,
        radial-gradient(circle, color-mix(in srgb, var(--inv-primary) 60%, #fff) 1.8px, transparent 2.4px) 5px 4px / 11px 9px,
        repeating-linear-gradient(to bottom, color-mix(in srgb, var(--sb-night) 70%, #000) 0 8px, color-mix(in srgb, var(--sb-night) 88%, #fff) 8px 9px);
    box-shadow: 0 -4px 0 color-mix(in srgb, var(--inv-primary) 70%, #000), 0 -6px 18px rgb(0 0 0 / .5);
    -webkit-mask: linear-gradient(to bottom, rgb(0 0 0 / .55), #000); mask: linear-gradient(to bottom, rgb(0 0 0 / .55), #000);
}
/* the pitch in perspective (an SVG stretched under the stands): mowed stripes, touchlines, the goal box, the
   halfway line and the centre circle where the ball lands */
.sepak-bola-scene-stadium__pitch { position: absolute; left: 0; top: 57%; width: 100%; height: 43%; overflow: visible; filter: drop-shadow(0 -10px 26px rgb(255 250 225 / .16)); }
.sepak-bola-scene-stadium__grass { fill: var(--sb-grass-b); }
.sepak-bola-scene-stadium__mow { fill: var(--sb-grass-a); }
.sepak-bola-scene-stadium__lines { fill: none; stroke: var(--sb-chalk); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
/* a floodlight tower: a lamp head (a grid of lights) on a lattice pole */
.sepak-bola-scene-tower { position: relative; width: 100%; height: 100%; }
.sepak-bola-scene-tower__head {
    position: absolute; left: 8%; right: 8%; top: 0; height: 15%; border-radius: 4px;
    background: radial-gradient(circle, #fffbe6 2.6px, transparent 3.4px) 0 0 / 12px 10px, #39424f;
    box-shadow: inset 0 0 0 3px #4b5361;
}
.sepak-bola-scene-tower__pole {
    position: absolute; left: 50%; top: 15%; bottom: 0; width: 12%; translate: -50% 0;
    background: repeating-linear-gradient(to bottom, #6b7480 0 8px, #4b5361 8px 11px);
    clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%);
}
/* the jersey on its hanger */
.sepak-bola-scene-jersey { position: relative; padding-top: 18%; filter: drop-shadow(0 14px 18px rgb(0 0 0 / .55)); }
.sepak-bola-scene-jersey__hanger { position: absolute; left: 50%; top: 0; width: 2px; height: 30%; translate: -50% 0; background: rgb(255 255 255 / .7); }
.sepak-bola-scene-jersey__hanger::after {
    content: ''; position: absolute; left: 50%; top: 52%; width: 2.6rem; height: 1.2rem; translate: -50% 0;
    border: 3px solid #c7ccd3; border-bottom: 0; border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.inv-scene__art > .sepak-bola-scene-ball, .inv-scene__art > .sepak-bola-scene-trophy { height: auto; overflow: visible; filter: drop-shadow(0 10px 12px rgb(0 0 0 / .5)); }
/* lights switch on: a short flicker, then full */
html.inv-anim .inv-intro.is-playing .sepak-bola-scene-stadium__beams { animation: sepak-bola-scene-lights 1.1s linear .45s both; }
html.inv-anim .inv-intro.is-playing .sepak-bola-scene-tower__head { animation: sepak-bola-scene-lamp 1.1s linear .45s both; }
@keyframes sepak-bola-scene-lights { 0% { opacity: 0; } 15% { opacity: .8; } 25% { opacity: .1; } 40% { opacity: .9; } 50% { opacity: .3; } 100% { opacity: 1; } }
@keyframes sepak-bola-scene-lamp {
    0% { filter: brightness(.45); box-shadow: inset 0 0 0 3px #4b5361; }
    15%, 40% { filter: brightness(1.1); } 25%, 50% { filter: brightness(.5); }
    100% { filter: brightness(1.15); box-shadow: inset 0 0 0 3px #4b5361, 0 0 26px 8px rgb(255 248 214 / .55); }
}
/* confetti burst when the ball lands (14 pieces, transform only) */
.sepak-bola-scene-confetti { position: absolute; inset: 0; overflow: hidden; }
.sepak-bola-scene-confetti i {
    position: absolute; top: -4%; left: calc(var(--x) * 1%); width: 8px; height: 13px; border-radius: 2px;
    background: var(--c, var(--inv-accent)); opacity: 0; --x: 50; --d: 0s;
}
.sepak-bola-scene-confetti i:nth-child(1) { --x: 6; --d: 0s; }
.sepak-bola-scene-confetti i:nth-child(2) { --x: 14; --d: .5s; --c: #fff; }
.sepak-bola-scene-confetti i:nth-child(3) { --x: 22; --d: .2s; --c: color-mix(in srgb, var(--inv-primary) 60%, #fff); }
.sepak-bola-scene-confetti i:nth-child(4) { --x: 30; --d: .9s; --c: var(--sb-gold); }
.sepak-bola-scene-confetti i:nth-child(5) { --x: 38; --d: .35s; }
.sepak-bola-scene-confetti i:nth-child(6) { --x: 46; --d: 1.1s; --c: #fff; }
.sepak-bola-scene-confetti i:nth-child(7) { --x: 54; --d: .1s; --c: color-mix(in srgb, var(--inv-primary) 60%, #fff); }
.sepak-bola-scene-confetti i:nth-child(8) { --x: 62; --d: .7s; --c: var(--sb-gold); }
.sepak-bola-scene-confetti i:nth-child(9) { --x: 70; --d: .25s; }
.sepak-bola-scene-confetti i:nth-child(10) { --x: 78; --d: 1s; --c: #fff; }
.sepak-bola-scene-confetti i:nth-child(11) { --x: 86; --d: .45s; --c: color-mix(in srgb, var(--inv-primary) 60%, #fff); }
.sepak-bola-scene-confetti i:nth-child(12) { --x: 93; --d: .8s; --c: var(--sb-gold); }
.sepak-bola-scene-confetti i:nth-child(13) { --x: 10; --d: 1.4s; --c: var(--sb-gold); }
.sepak-bola-scene-confetti i:nth-child(14) { --x: 89; --d: 1.6s; }
html.inv-anim .inv-intro.is-playing .sepak-bola-scene-confetti i { animation: sepak-bola-scene-fall 3.4s linear calc(3.2s + var(--d)) infinite; }
@keyframes sepak-bola-scene-fall {
    0% { opacity: 1; transform: translate(0, 0) rotate(0); }
    50% { transform: translate(14px, 55vh) rotate(260deg) scaleX(.4); }
    90% { opacity: 1; }
    100% { opacity: 0; transform: translate(-10px, 110vh) rotate(540deg); }
}
/* the card: the stadium scoreboard (kit-coloured top bar, LED panel) */
body.sepak-bola-body .inv-intro--scene .inv-scene__card {
    top: 52%; aspect-ratio: auto; padding: 0 0 1.1rem; overflow: hidden; border-radius: 14px;
    -webkit-mask: none; mask: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    background: radial-gradient(rgb(255 255 255 / .06) 1px, transparent 1.3px) 0 0 / 4px 4px, #05080d; color: #fff;
    box-shadow: 0 0 0 3px #39424f, 0 0 0 6px var(--inv-primary), 0 30px 50px -18px rgb(0 0 0 / .9);
}
body.sepak-bola-body .inv-scene__card .inv-intro__label {
    margin: 0 0 .7rem; padding: .55rem 1rem .45rem; color: var(--sb-trim); background: var(--inv-primary);
    box-shadow: inset 0 -3px 0 var(--sb-kit-deep);
    font: 900 .7rem/1.2 var(--sb-sans); letter-spacing: .24em; text-transform: uppercase;
}
body.sepak-bola-body .inv-scene__card .inv-intro__names {
    margin: 0 1rem; padding-top: .12em; color: var(--sb-led); font: 600 clamp(3rem, 15vw, 4.2rem)/.9 var(--sb-display);
    font-family: var(--sb-display) !important; letter-spacing: .03em; text-transform: uppercase; overflow-wrap: anywhere;
    text-shadow: 0 0 14px color-mix(in srgb, var(--sb-led) 60%, transparent);
}
body.sepak-bola-body .inv-scene__card .inv-intro__rule { width: 6rem; height: 3px; margin: .6rem auto .55rem; background: rgb(255 255 255 / .35); }
body.sepak-bola-body .inv-scene__card .inv-intro__date { margin: 0 1rem; color: rgb(255 255 255 / .85); font: 800 .82rem/1.3 var(--sb-sans); letter-spacing: .14em; text-transform: uppercase; }