/* 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: 36px; background: linear-gradient(to left, rgba(19,33,58,.11), 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; }

/* 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 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 .name { text-align: left; width: 43%; /* Frames, Win, Balls get 19% each */ overflow: hidden; text-overflow: ellipsis; }
table.std tr.leader td { font-weight: 800; }
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: #111; font-weight: 600; }
.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: #111; }


/* play-off bracket */
.bracket { position: relative; height: 100%; }
.bracket svg.lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.bracket .col-t { position: absolute; top: 0; font-size: 20px; font-weight: 800; letter-spacing: 3px; color: var(--muted); text-transform: uppercase; }
.bm { position: absolute; background: var(--card); border: 2px solid var(--line); border-radius: 16px; overflow: hidden; }
.bm .t { font-size: 17px; 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.win { color: var(--green); }
.bm .p.lose { color: #a8b2c4; }
.bm .p .s { font-style: normal; font-size: 18px; font-weight: 700; color: var(--blue); background: var(--blue-soft); border-radius: 8px; padding: 3px 10px; flex: none; }
.bm.final { border-color: var(--blue); border-width: 3px; box-shadow: 0 6px 20px rgba(47,111,207,.15); }
.bm.final .t { color: #fff; background: var(--blue); padding-bottom: 12px; }
.bm.third { border-style: dashed; }
.bm.third .t { color: var(--blue); }
.bm.live { box-shadow: 0 0 0 4px rgba(47,111,207,.35); }
/* projected semi-finals before the groups are over */
.bm.cand { border-style: dashed; border-color: #b9c3d4; }
.bm .p.cand { color: #8a94a8; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding: 6px 22px 8px; }
.bm .p.cand .cn { 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 { font-style: normal; font-size: 14px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: #8a94a8;
  background: #eef1f6; border-radius: 6px; padding: 2px 8px; line-height: 1.3; } /* «not in the play-off yet, would be if the groups ended now» */
.bracket .cand-note { left: 0; top: 370px; width: 500px; text-align: center; }

/* 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; }
/* 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; }
.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; }
.qrest { flex: 1; position: relative; overflow: hidden; min-height: 0;
  /* the list itself fades out at both edges (a mask, not white overlays: rows can never show above the fade) */
  -webkit-mask-image: linear-gradient(transparent, #000 60px, #000 calc(100% - 90px), transparent);
  mask-image: linear-gradient(transparent, #000 60px, #000 calc(100% - 90px), transparent); }
.qrest-inner { will-change: transform; } /* scrolled by app.js, keeps its place across updates */
.qrow { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px; padding: 12px 4px; border-bottom: 1px solid var(--line); font-size: 30px; }
.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: 16px; font-weight: 700; color: var(--blue); background: var(--blue-soft); border-radius: 8px; padding: 3px 9px; white-space: nowrap; max-width: 90px; overflow: hidden; text-overflow: ellipsis; }
.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: #ff9500; color: #111; box-shadow: 0 6px 18px rgba(10,30,70,.28); } /* a vivid yellow-orange, black text, 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); }
.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: 180px; height: 180px; 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 */