/* TV scoreboard. The stage is always 1920×1080 and scaled to the screen (see app.js),
   so the layout matches docs/mockups/tv-*.png on any TV. */
:root {
  --bg: #f3f6fb; --card: #ffffff; --ink: #13213a; --muted: #6b7894; --line: #dde4ef;
  --blue: #2f6fcf; --blue-soft: #e4eefb; --red: #d21034; --green: #1e9e5a;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #fff; }
body { font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: var(--ink); cursor: none; }
#stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; background: var(--bg);
  display: grid; grid-template-columns: 1fr 540px; overflow: hidden; }
#stage.full { grid-template-columns: 1fr; }
#stage.loading > main, #stage.loading > aside { visibility: hidden; } /* no empty frame before the first state, app.js */
#stage.full aside.queue { display: none; }
main { display: flex; flex-direction: column; min-width: 0; position: relative; overflow: hidden; } /* clips the slide transition, it never covers the queue */
/* soft shade of the queue panel along the whole height (header too): the panel lies on top of everything; above the moving slides */
main::after { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 44px; background: linear-gradient(to left, rgba(19,33,58,.18), rgba(19,33,58,0)); pointer-events: none; z-index: 3; }

/* header */
header.top { height: 120px; flex: none; display: flex; align-items: center; gap: 22px; padding: 0 28px; background: var(--card); border-bottom: 1px solid var(--line); position: relative; }
/* divider between the header and the slide: a calm solid line with a soft shade below, no dashes */
header.top::after { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: #c3d1e8; box-shadow: 0 4px 10px rgba(19,33,58,.07); }
.bar-logo { height: 112px; width: auto; display: block; position: relative; z-index: 2; transform: translateY(13px); } /* centred on the «CUBA LIBRE» letters (38% of its height), the legs hang over the header line */
.brand-sub { font-size: 20px; font-weight: 700; color: var(--muted); letter-spacing: 2px; text-transform: uppercase; line-height: 1.2; padding-left: 18px; border-left: 2px solid var(--line); }
.slide-title { margin-left: auto; font-size: 30px; line-height: 36px; font-weight: 800; color: var(--blue); text-transform: uppercase; letter-spacing: 3px; white-space: nowrap; }
.content { flex: 1; padding: 40px 28px 32px; min-height: 0; overflow: hidden; position: relative; z-index: 4; } /* the cards lie above the queue's shadow (z 3); the empty background lets it through */

/* cards and tables */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 20px 18px; box-shadow: 0 2px 10px rgba(19,33,58,.05); min-height: 0; overflow: hidden; }
.card.live { box-shadow: 0 12px 30px rgba(19,33,58,.16), 0 3px 8px rgba(19,33,58,.08); } /* the group playing now, lifted a little */
.card h3 { font-size: 30px; line-height: 36px; font-weight: 800; margin-bottom: 10px; display: flex; align-items: center; gap: 12px; }
.card h3::before { content: ''; width: 10px; height: 28px; border-radius: 3px; background: var(--red); flex: none; }
table.std { width: 100%; table-layout: fixed; border-collapse: collapse; font-variant-numeric: tabular-nums; }
table.std th { font-size: .63em; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; padding: 8px 6px; text-align: center; border-bottom: 2px solid var(--line); }
table.std td { padding: .4em 6px; text-align: center; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.std tr:last-child td { border-bottom: none; }
table.std tbody tr:nth-child(even) td { background: #f3f5f9; }
/* names (and the PLAYER heading) start where the card title's text starts: the red bar 10 px + gap 12 px */
table.std .name, .group-one table.std .name { padding-left: 22px; } /* zebra: every second row a little greyer, easier to follow across */
table.std .name { text-align: left; width: 49%; /* Frames, Win, Balls get 17% each (room for the indent) */ overflow: hidden; text-overflow: ellipsis; }
table.std tr.leader td { font-weight: 800; }
table.std td.balls { color: #8a94a8; } /* balls: less important, grey (the leader's row stays bold) */
table.std tr.out td { color: #a8b2c4; }
table.std tr.out td.name { text-decoration: line-through; }
.card { display: flex; flex-direction: column; }
.fit { font-size: 36px; flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }

.groups { display: grid; gap: 20px; height: 100%; grid-auto-rows: 1fr; }
/* minmax(0, …): column widths never depend on the names inside */
.groups.n1 { grid-template-columns: minmax(0, 1fr); }
.groups.n2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.groups.n3, .groups.n4 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

.group-one { display: grid; grid-template-columns: minmax(0, 49fr) minmax(0, 51fr); gap: 18px; height: 100%; }
.group-one .fit > table { flex: 1; }
.group-one .fit { font-size: 50px; }
.group-one table.std th { font-size: .48em; height: 3em; padding: 0 4px; letter-spacing: 0; } /* narrow card: no letter spacing in the headers */
.group-one table.std td { padding: 0 8px; }
table.cross { border-collapse: collapse; width: 100%; table-layout: fixed; font-variant-numeric: tabular-nums; }
table.cross td, table.cross th { text-align: center; padding: 0 8px; border: 1px solid var(--line); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.cross th { font-size: .58em; height: 2.7em; color: var(--muted); font-weight: 600; background: #fafbfd; }
table.cross td.diag { background: #d9dee7; }
table.cross td.none { color: #c3cbd8; font-weight: 400; } /* not played yet */
.hg { width: .7em; height: .7em; vertical-align: -.08em; color: #8a94a8; opacity: .45; }
table.cross td.win { color: var(--green); font-weight: 800; }
table.cross td.loss { color: var(--red); font-weight: 800; } /* L */
table.cross td.skip { color: #a8b2c4; font-size: .5em; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; } /* small grey, the row height stays */
.legend { margin-top: 16px; font-size: 19px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px 28px; }
.legend span { white-space: nowrap; }
/* LIVE: the players at the table right now (group tables only); the dot blinks like a camera recording */
.live-tag { display: inline-flex; align-items: center; gap: .32em; vertical-align: .14em; margin-right: .4em; font-style: normal; }
.live-tag b { width: .34em; height: .34em; border-radius: 50%; background: var(--red); box-shadow: 0 0 .25em rgba(210,16,52,.6);
  animation: rec 1.2s steps(1, end) infinite; }
.live-tag span { background: var(--red); color: #fff; border-radius: .22em; padding: .2em .42em .18em; font: 800 .42em/1 Inter, system-ui, sans-serif;
  letter-spacing: .1em; text-transform: uppercase; }
.group-one td.name .live-tag { display: flex; width: fit-content; margin: 0 0 .12em; } /* narrow card, tall rows: LIVE above the name */
@keyframes rec { 50% { opacity: 0; } }
.legend b.g { color: var(--green); }
.legend b.k { color: var(--red); }
.legend b.s { color: #a8b2c4; font-size: .8em; letter-spacing: 1px; }


/* play-off bracket */
.bracket { position: relative; height: 100%; display: flex; gap: 220px; }
.bracket svg.lines { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
/* left column over the whole height: semi-final 1, semi-final 2, 3rd place, equal gaps */
.bracket .bcol { width: 500px; flex: none; display: flex; flex-direction: column; justify-content: space-between; }
.bracket .bfin { flex: 1; min-width: 0; display: flex; } /* the final takes the width left: the gap on its right is the slide's own margin */
.bracket .bfin > .bm { flex: 1; display: flex; flex-direction: column; } /* the final as tall as the left column */
.bracket .bfin > .bm .p { flex: 1; justify-content: center; } /* names and placeholders in the middle */
.bracket.big .bfin { flex: 1; width: auto; min-width: 0; display: flex; } /* never wider than the room left: a long name shrinks instead */
.bracket.big .bfin > .bm { flex: 1; min-width: 0; }
/* play-offs before the final: the left column takes more room, bigger names; the final shrinks to what is left */
.bracket.wide .bcol { width: 840px; }
.bracket.wide .bcol .bm .t { font-size: 46px; line-height: 1.1; padding: 10px 30px 4px; }
.bracket.wide .bcol .bm .t .live-tag { font-size: 60px; right: 26px; }
.bracket.wide .bcol .bm .p { font-size: 60px; padding: 8px 30px; }
.bracket.wide .bcol .bm .p .win-tag { font-size: 36px; padding: 6px 13px 5px; border-radius: 6px; }
.bm { position: relative; background: var(--card); border: 2px solid var(--line); border-radius: 16px; overflow: hidden; }
.bm .t { font-size: 34px; text-transform: uppercase; letter-spacing: 2px; color: var(--muted); font-weight: 800; padding: 12px 22px 6px; display: flex; justify-content: space-between; }
.bm .p { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 42px; font-weight: 700; padding: 12px 22px; border-top: 1px solid var(--line); white-space: nowrap; overflow: hidden; }
.bm .p span { overflow: hidden; text-overflow: ellipsis; }
.bm .p.tbd { color: #a8b2c4; font-style: italic; }
.bm .p.tbd span { padding-right: .15em; } /* the italic last letter leans out of its box: room for it, not cut */
.bm .p.win { color: var(--ink); } /* the winner stays black, only the loser turns grey */
.bm .p .win-tag { flex: none; background: var(--green); color: #fff; border-radius: 4px; padding: 5px 10px 4px; font: normal 800 28px/1 Inter, system-ui, sans-serif;
  letter-spacing: 2px; text-transform: uppercase; }
.bm .p.lose { color: #a8b2c4; }
.bm .p .s { font-style: normal; font-size: 27px; font-weight: 700; color: var(--blue); background: var(--blue-soft); border-radius: 8px; padding: 3px 10px; flex: none; }
/* the final looks like the semi-finals (customer's decision 2026-10-11) */
.bm.third { border-style: dashed; }
.bm.third .t { color: var(--blue); }
.bm .t .tnote { display: block; font-size: .6em; letter-spacing: 1px; margin-top: 2px; white-space: nowrap; } /* not broken mid-phrase across the title */
.bm.live { box-shadow: 0 12px 30px rgba(19,33,58,.16), 0 3px 8px rgba(19,33,58,.08); } /* the match being played: lifted a little over the others */
.bm .t { position: relative; }
.bm .t .live-tag { position: absolute; right: 18px; top: 50%; transform: translateY(-46%); margin: 0; font-size: 46px; letter-spacing: 0; } /* no taller header */
/* projected semi-finals before the groups are over */
.bm.cand { border-style: dashed; border-color: #b9c3d4; }
.bm .p.cand { color: #8a94a8; } /* a row like a played match: the name left, the CONTENDER label right, like WINNER */
.bm .p.cand .cn { flex: 1 1 auto; display: flex; align-items: baseline; gap: 12px; max-width: 100%; min-width: 0; }
.bm .p.cand .cn > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.bm .ctag { flex: none; font-style: normal; background: #a8b2c4; color: #fff; border-radius: 4px; padding: 5px 10px 4px;
  font: normal 800 22px/1 Inter, system-ui, sans-serif; letter-spacing: 2px; text-transform: uppercase; } /* smaller than WINNER: two tied names fit; «would be in the play-off if the groups ended now»: sized and placed like WINNER, grey */
.bm .p.cand .cn > span.two { font-size: .8em; } /* two tied names: smaller, so both fit next to the label */
.bm .p.cand.q { color: var(--ink); } /* certain to go through: a black name and a green QUALIFIED, like WINNER */
.bm .p.cand.q .ctag { background: var(--green); }

/* queue panel (always on the right) */
aside.queue { position: relative; background: var(--card); display: flex; flex-direction: column; padding: 41.5px 30px 24px; gap: 18px; height: 1080px; min-width: 0; }
/* 41.5 px: the 36 px «Queue» line is centred at 59.5 px, like the slide title (the 120 px header has a 1 px bottom border) */
.qhead { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; font-size: 30px; line-height: 36px; font-weight: 800; text-transform: uppercase; letter-spacing: 3px; color: var(--blue); }
/* «PLAY NEXT»: black capitals, the biggest type on the page (the largest elsewhere is 50 px).
   The line box stays 36 px, centred on the slide title line of the header. */
.qhead .qtitle { font-size: 60px; line-height: 36px; font-weight: 900; color: #111; text-transform: uppercase; letter-spacing: 1px; }
/* divider between the slide and the queue: the same line as under the header, its shade falls on the slide */
aside.queue::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: #c3d1e8; z-index: 2; }
/* separator under «PLAY NEXT»: the header divider's line (120-123 px), only as wide as the cards */
aside.queue::after { content: ''; position: absolute; top: 120px; left: 30px; right: 30px; height: 3px; background: #c3d1e8; }
#qtop { display: flex; flex-direction: column; gap: 14px; margin-top: 64.5px; } /* the Next card top at 41.5+36+18+64.5 = 160 px, level with the slide cards on the left */ /* the three cards stand apart */
.qbig { border-radius: 18px; padding: 20px 24px; }
.qbig .qp { font-weight: 900; } /* Next and After next: the boldest names */
/* Next stands out, After next is grey. The match being played is not shown. */
.qbig.next { background: #5b8fdb; color: #fff; } /* softer than --blue */
.qbig.next .qp { text-transform: uppercase; letter-spacing: 2px; } /* names in capitals only on the Next card */
.qbig.after { background: #eef1f6; color: #5d6779; }
.qbig.after .qp { font-size: 34px; text-transform: uppercase; letter-spacing: 2px; } /* capitals like the Next card */
.qlabel { font-size: 18px; line-height: 22px; text-transform: uppercase; letter-spacing: 2px; font-weight: 700; opacity: .85; margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph { font-style: italic; opacity: .6; text-transform: none; } /* a play-off place not decided yet (Winner Group A, Loser SF1) */
.qp { font-size: 42px; font-weight: 800; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qvs { font-size: 20px; font-weight: 700; margin: 2px 0; }
.qbig.next .qvs { color: #ffd2da; }
.qbig.after .qvs { color: #8a94a8; }
.qbig.next { padding: 30px 30px; } /* the Next card about 1.8 times bigger (2026-10-16): read from across the bar */
.qbig.next .qlabel { font-size: 44px; line-height: 50px; margin-bottom: 10px; opacity: 1; }
.qbig.next .qp { font-size: 76px; }
.qbig.next .qvs { font-size: 52px; line-height: 1.1; margin: 2px 0; }
.qbig.after .qlabel { font-size: 38px; line-height: 44px; margin-bottom: 8px; opacity: 1; }
.qbig.after .qp { font-size: 46px; }
.qbig.after .qvs { font-size: 44px; line-height: 1.1; margin: 4px 0; }
.qbig .qvs { position: relative; top: -.09em; } /* lowercase «vs» sits low in its line: lifted to the middle between the names in capitals */
.qrest { flex: 1; position: relative; overflow: hidden; min-height: 0;
  margin-bottom: -24px; } /* no fade at the edges (2026-10-16); rows come in from the very bottom of the screen */
.qrest-inner { will-change: transform; } /* scrolled by app.js, keeps its place across updates */
.qrow { display: grid; grid-template-columns: 50px 1fr auto; align-items: center; gap: 10px; padding: 12px 4px; border-bottom: 1px solid var(--line); font-size: 38px; }
.qn { color: var(--muted); font-variant-numeric: tabular-nums; }
.qm { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; min-width: 0; line-height: 1.2; }
/* name1 left, vs in the middle, name2 right; a long name wraps to 2 lines at most, then an ellipsis */
.qm > span { min-width: 0; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.qm > .b { text-align: right; }
.qm i { font-style: normal; color: var(--red); font-weight: 700; font-size: .75em; }
.qg { font-size: 23px; font-weight: 700; color: var(--blue); background: var(--blue-soft); border-radius: 10px; padding: 4px 12px; white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis;
  min-width: 40px; text-align: center; line-height: 28px; }
/* longer tags (TB, SF1, 3rd, the final's 🏆) in smaller type, as wide as a group letter's plate (40 px): the tag column
   is about the same width on every row and «vs» does not move between A and SF1 rows */
.qg.long { font-size: 18px; padding: 4px 5px; letter-spacing: -.5px; }
.qg .emo { font-size: 24px; vertical-align: middle; } /* the final's 🏆: as big as still fits a letter's plate */
.qempty { font-size: 24px; color: var(--muted); }

/* EXPERIMENT (2026-10-10): blue queue panel, light text, orange Next card. Delete this block to go back. */
aside.queue { background: var(--blue); }
.qhead { color: rgba(255,255,255,.85); }
.qhead .qtitle { color: #fff; }
aside.queue::after { background: #173a73; } /* dark blue separator under «PLAY NEXT» */
.qbig.next { background: #ffc21a; color: #111; box-shadow: 0 6px 18px rgba(10,30,70,.28); } /* bright amber-yellow, black text reads best on it, lifted off the blue */
.qbig.next .qvs { color: rgba(17,17,17,.6); }
.qbig.after { background: rgba(255,255,255,.14); color: #fff; }
.qbig.after .qvs { color: rgba(255,255,255,.7); }
.qrow { border-bottom-color: rgba(255,255,255,.2); color: #fff; }
.qn { color: rgba(255,255,255,.65); }
.qm i { color: #ffd2da; }
.qg { color: #fff; background: rgba(255,255,255,.2); }
.qempty { color: rgba(255,255,255,.8); }

/* splash before the start: logo and rolling balls (splash.js) */
.splash { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; z-index: 5; background: #fff; overflow: hidden; }
/* call screen: who goes to the table now, on top of everything for 20 s; the look is in public/board/call.js */
/* podium after the final: the «poster» (podium.js) */
.poster { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; z-index: 5; overflow: hidden; color: #fff; }
.poster[hidden] { display: none; }
.pz-bg { position: absolute; inset: 0;
  /* neon: electric blue → violet → hot pink → neon orange, cyan and magenta glows in the corners, gold glow behind the cup */
  background: radial-gradient(ellipse 55% 50% at 50% 28%, rgba(255,230,120,.55), rgba(255,230,120,0) 70%),
    radial-gradient(circle at 8% 95%, rgba(0,229,255,.55), rgba(0,229,255,0) 45%),
    radial-gradient(circle at 95% 10%, rgba(255,0,200,.45), rgba(255,0,200,0) 45%),
    linear-gradient(155deg, #14006b 0%, #2d1bff 32%, #a100ff 58%, #ff1f8f 80%, #ff7a00 100%); }
.pz-rays { position: absolute; left: 110px; top: -550px; width: 1700px; height: 1700px; will-change: transform; animation: pz-turn 120s linear infinite; }
.pz-rays svg { width: 100%; height: 100%; display: block; }
@keyframes pz-turn { to { transform: rotate(360deg); } }
.pz-glow { position: absolute; left: 560px; top: -60px; width: 800px; height: 800px; border-radius: 50%; will-change: opacity;
  background: radial-gradient(circle, rgba(255,236,150,.6), rgba(255,236,150,0) 65%); animation: pz-breathe 3.5s ease-in-out infinite alternate; }
@keyframes pz-breathe { from { opacity: .55; } to { opacity: 1; } }
.pz-trophy { position: absolute; left: 715px; top: 60px; width: 490px; height: 520px; }
.pz-cup { width: 100%; height: 100%; display: block; }
.pz-label { position: absolute; left: 0; right: 0; top: 605px; text-align: center; font-size: 52px; line-height: 1; font-weight: 800;
  letter-spacing: 16px; text-transform: uppercase; color: #fff3c4; text-shadow: 0 3px 0 rgba(0,0,0,.25); }
.pz-name { position: absolute; left: 0; right: 0; top: 680px; text-align: center; }
/* 3D gold letters: a light gold face, the side built from stacked shadows getting darker, a soft drop shadow */
.pz-name span { display: inline-block; white-space: nowrap; font-weight: 900; line-height: 1.05; text-transform: uppercase; letter-spacing: 2px; color: #ffe066;
  text-shadow: 0 3px 0 #f2b705, 0 6px 0 #e0a100, 0 9px 0 #c98a00, 0 12px 0 #b07600, 0 15px 0 #946200, 0 18px 0 #7a4f00, 0 30px 40px rgba(0,0,0,.45); }
/* 2nd and 3rd place, left and right of the trophy: a small silver or bronze cup, the place, the name in silver or bronze 3D letters */
.pz-side { position: absolute; top: 215px; width: 680px; text-align: center; }
.pz-side.pz-p2 { left: 30px; } .pz-side.pz-p3 { right: 30px; } /* up to the trophy (715-1205 px) */
.pz-medal { width: 230px; height: 244px; display: block; margin: 0 auto 6px; filter: drop-shadow(0 10px 14px rgba(0,0,0,.35)); }
.pz-slabel { font-size: 36px; line-height: 1; font-weight: 800; letter-spacing: 10px; text-transform: uppercase; color: rgba(255,255,255,.9);
  text-shadow: 0 2px 0 rgba(0,0,0,.25); margin-bottom: 14px; }
.pz-sname span { display: inline-block; white-space: nowrap; font-weight: 900; line-height: 1.05; text-transform: uppercase; letter-spacing: 1px; }
.pz-side.silver .pz-sname span { color: #f4f7fb; text-shadow: 0 2px 0 #c9d1dc, 0 4px 0 #aab4c2, 0 6px 0 #8e99a8, 0 8px 0 #707b8a, 0 16px 24px rgba(0,0,0,.4); }
.pz-side.bronze .pz-sname span { color: #ffd2a8; text-shadow: 0 2px 0 #e09a5e, 0 4px 0 #c47a3e, 0 6px 0 #a35f2a, 0 8px 0 #7d461c, 0 16px 24px rgba(0,0,0,.4); }
/* the players' mascots of the tournament by their cups: the champion's leans on the big trophy, 2nd outside its cup on
   the left, 3rd on the right (like on the call screen: emoji body, hat and prop) */
/* a mascot wanders about its cup (podium.js): .mv moves it sideways, .face turns it round at once (no in-between scale:
   that flashed), .dn dances on the spot, .hop jumps and squashes. No filter on anything that moves: a drop-shadow made the TV redraw and flicker. */
/* an emoji drawn from our Noto SVG (emojify() in call.js), placed and sized like the Noto Color Emoji font draws it
   (1.17 em square, 1.25 em advance, 0.25 em below the baseline), taking no more line height than text */
.emo { display: inline-block; width: 1.174em; height: 1.174em; margin: -.085em .037em -.089em; vertical-align: -.158em; }
.pz-m { position: absolute; z-index: 3; line-height: 1; font-style: normal; }
.pz-m .mv, .pz-m .face, .pz-m .dn, .pz-m .hop { display: block; position: relative; transform-origin: 50% 100%; will-change: transform; }
.pz-prop { position: absolute; z-index: 3; line-height: 1; } /* a mascot's prop put down or thrown (podium.js); level with the mascots, drawn later: never hidden behind one */
.pz-daze { position: absolute; left: 50%; top: -.45em; font-size: .45em; transform-origin: 50% 60%; } /* dazed after a beating */
/* Bangers (Vernon Adams, SIL OFL), the comic sound-effect face: the POW! and BAM! of the mascots' fights */
@font-face { font-family: Bangers; src: url(/assets/fonts/bangers.woff2) format('woff2'); font-display: swap; }
.pz-pow { position: absolute; z-index: 4; width: 200px; height: 130px; display: flex; align-items: center; justify-content: center;
  font: 400 40px/1 Bangers, Impact, 'Arial Black', sans-serif; color: #ffd400; letter-spacing: 2px; -webkit-text-stroke: 2px #4a1a00; pointer-events: none; } /* comic hit burst: the word on a white spiky cloud; sized to the mascots by podium.js */
.pz-pow .cloud { position: absolute; inset: 0; width: 100%; height: 100%; }
.pz-pow .w { position: relative; transform: rotate(var(--tilt, -6deg)); }
.pz-pow .lines { position: absolute; left: -55%; top: -55%; width: 210%; height: 210%; pointer-events: none; }
.pz-dust { position: absolute; z-index: 3; width: 0; height: 0; pointer-events: none; } /* a cartoon dust cloud; (left, top) is its middle */
.pz-dust i { position: absolute; border-radius: 50%; background: #f3e6c8; box-shadow: 0 0 0 4px rgba(74,42,0,.3); }
.pz-m .hat { position: absolute; left: 50%; top: -.36em; font-size: .52em; transform: translateX(-50%) rotate(-10deg); }
.pz-m .item { position: absolute; right: -.18em; bottom: -.02em; font-size: .46em; transform: rotate(14deg); }
.pz-m .item.l { right: auto; left: -.18em; transform: rotate(-14deg); } /* a body drawn looking left: its prop in front of it */
.pz-m.m1 { left: 580px; top: 367px; font-size: calc(188px * var(--k, 1)); --d: 600px; } /* across the big trophy's foot, clear of the names */
.pz-m.m2 { left: 80px; top: 314px; font-size: calc(130px * var(--k, 1)); --d: 460px; }
.pz-m.m3 { left: 1250px; top: 314px; font-size: calc(130px * var(--k, 1)); --d: 460px; }
.pz-caption { position: absolute; left: 0; right: 0; bottom: 46px; text-align: center; font-size: 28px; font-weight: 700; letter-spacing: 8px;
  text-transform: uppercase; color: rgba(255,255,255,.92); }
.pz-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.pz-sparks { position: absolute; inset: 0; pointer-events: none; }
.pz-burst { position: absolute; width: 0; height: 0; }
.pz-burst i { position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; border-radius: 50%; will-change: transform, opacity; }
.pz-burst b { position: absolute; left: -60px; top: -60px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, #fff, rgba(255,240,180,.6) 40%, rgba(255,240,180,0) 70%); }

.call { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; z-index: 6; overflow: hidden; background: #0b0d14; }
.call[hidden] { display: none; }
.splash-bg { position: absolute; inset: 0; background: #fff; will-change: opacity; } /* colour layers, faded by splash.js */
.glass { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; z-index: 7; pointer-events: none; overflow: hidden; } /* geckos and butterflies over everything, app.js */
.lizard { position: absolute; left: 0; top: 0; width: 600px; height: 600px; z-index: 3; will-change: transform; } /* gecko, lizard.js: above the balls, «on the glass» like the butterflies */
.butterfly { position: absolute; left: 0; top: 0; width: 240px; height: 240px; z-index: 3; will-change: transform; } /* above the balls, butterfly.js */
.splash-logo { position: absolute; left: 330px; top: 295px; width: 1260px; height: 531px; will-change: transform; } /* moved/turned/squashed */
/* the two pictures (as drawn, white lettering): own layers, switched by opacity; shadow from the top left like the balls' */
.splash-logo img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; will-change: opacity;
  filter: drop-shadow(24px 32px 14px rgba(10,18,36,.3)); transition: opacity .6s ease-in-out; }
.ball { position: absolute; left: 0; top: 0; width: var(--ball, 118px); height: var(--ball, 118px); will-change: transform; } /* a canvas shaded by splash.js */
/* ball shadow, placed by splash.js just off the ball away from the lamp: one blurred disc */
.ball-shadow { position: absolute; left: 0; top: 0; width: calc(var(--ball, 118px) + 44px); height: calc(var(--ball, 118px) + 44px);
  background: var(--ball-shadow) center / 100% 100% no-repeat; will-change: transform; pointer-events: none; } /* a picture drawn once, no filter */

/* play-offs (#stage.po): the queue is not needed, only a small blue plate with the clock is left in the header's
   top right corner; the slide gets the whole width, the bracket stands in the middle */
#stage.po main { grid-column: 1 / -1; grid-row: 1; }
#stage.po main::after { display: none; }
#stage.po header.top { padding-right: 280px; } /* room for the big clock's plate */
#stage.po .content { padding: 48px 35px 45px 45px; } /* from the logo's left edge (45 px) to the clock's right edge (1885 px); 45 px under the header line (120-123 px) and above the bottom */
#stage.po aside.queue { grid-column: 2; grid-row: 1; justify-self: end; align-self: start; width: auto; height: 120px;
  padding: 41.5px 30px 0; z-index: 4; box-shadow: -8px 0 24px rgba(19,33,58,.11); } /* the clock where it is on the other slides */
#stage.po aside.queue::after, #stage.po .qtitle, #stage.po #qtop, #stage.po .qrest { display: none; }
#stage.po aside.queue { justify-content: center; padding-top: 0; } /* the clock in the middle of its plate whatever the font */
#stage.po .qhead { font-size: 48px; line-height: 1; letter-spacing: 3px; } /* the clock big in its plate (2026-10-16) */
#stage.po #clock { position: relative; top: -2px; } /* by eye on the TV: level with PLAY-OFF, which sits above the header's bottom line */
/* the big final of the play-offs: fills the right side, two tall rows with huge names */
.bm.big { display: flex; flex-direction: column; }
.bm.big .t { font-size: 52px; padding: 20px 32px 14px; }
.bm.big .t .live-tag { font-size: 62px; right: 28px; }
.bm.big .p { flex: 1; font-size: 180px; padding: 0 40px; gap: 28px; justify-content: center; } /* names in the middle */
.bm.big .vs { height: 0; position: relative; z-index: 1; display: flex; justify-content: center; align-items: flex-start; }
.bm.big .vs span { transform: translateY(-50%); background: var(--card); color: #a8b2c4; border: 3px solid var(--line); border-radius: 999px;
  padding: 9px 27px 8px; font: 800 36px/1 Inter, system-ui, sans-serif; letter-spacing: 4px; }
.bm.big .p .win-tag { font-size: 40px; padding: 8px 16px 6px; border-radius: 7px; }