/* Our own emoji (Noto Color Emoji, OFL-1.1; built by tools/build_emoji_font.py), so puzzles look
   the same on every computer: Windows 10 has no glyphs for newer emoji. */
@font-face { font-family: "Viewercade Emoji"; src: url("/static/fonts/emoji.woff2") format("woff2"); font-display: block; }
/* Game screen: a 1080×1920 stage scaled to the window; in OBS it renders 1:1.
   Flat navy, blue = letter in place, yellow = letter in the word. */
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
body.theme-day { background: #eef2f9; }   /* the day theme has no black edges either */
body.overlay { font-family: var(--font); -webkit-font-smoothing: antialiased; }
#viewport { position: fixed; inset: 0; overflow: hidden; }
.stage {
  /* Room for TikTok's own interface, measured on a 1080×1920 stream: its bar with
     the streamer ends near 130 px, its comment field starts near 1730 px, and the
     comments take the bottom left from about 1520 px. */
  --safe-top: 176px;      /* the game starts under TikTok's top bar */
  --safe: 420px;          /* tables end at 1500 px: below that are TikTok's comments (left) and the gift list (right) */
  --legend-bottom: 192px; /* the gift list in the bottom right corner ends above TikTok's comment field */
  --side: 32px;
  --accent: var(--g-blue);
  --bg: var(--g-bg); --surface: var(--g-surface); --surface-2: var(--g-surface-2); --line: var(--g-line);
  --text: var(--g-text); --muted: var(--g-muted); --faint: var(--g-faint);
  --miss-bg: #1b1f29; --miss-text: #5c6273;
  position: absolute; left: 50%; top: 50%; width: 1080px; height: 1920px; margin: -960px 0 0 -540px;
  box-sizing: border-box; padding: var(--safe-top) var(--side) 0; display: flex; flex-direction: column; gap: 28px;
  overflow: hidden; transform-origin: 50% 50%; color: var(--text);
  background: linear-gradient(180deg, #151820 0%, var(--bg) 40%);
}
.stage.no-safe { --safe: 60px; --safe-top: 80px; --legend-bottom: 60px; }
.theme-day .stage {
  --bg: #eef2f9; --surface: #ffffff; --surface-2: #e6ebf5; --line: #d6deeb;
  --text: #0e1322; --muted: #5a6478; --faint: #9aa3b8;
  --miss-bg: #dfe5f0; --miss-text: #8d96aa;
  background: linear-gradient(180deg, #ffffff 0%, var(--bg) 42%);
}

/* header */
.head { display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; }
.head-text { min-width: 0; flex: 1; }
.eyebrow { display: flex; align-items: center; gap: 14px; font: 700 26px/1 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.eyebrow .dot { width: 14px; height: 14px; border-radius: 50%; background: var(--g-red); animation: live 1.6s ease-in-out infinite; }
.head h1 { margin: 16px 0 0; font: 900 104px/1 var(--font); letter-spacing: -.025em; white-space: nowrap; }
.head h1::after { content: ""; display: block; width: 120px; height: 10px; margin-top: 18px; border-radius: 10px; background: var(--accent); }
.head p { margin: 18px 0 0; font: 600 36px/1.2 var(--font); color: var(--muted); transition: opacity .2s; }
.head.busy p { opacity: 0; }
.clock { flex: none; min-width: 168px; height: 168px; padding: 0 18px; box-sizing: border-box; border-radius: 40px; display: grid; place-content: center; text-align: center;
  background: var(--surface); box-shadow: inset 0 0 0 2px var(--line); }
.clock b { font: 800 84px/1 var(--font); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.clock small { font: 700 22px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
.clock.urgent { background: var(--g-red); box-shadow: none; color: #fff; animation: throb .8s ease-in-out infinite; }
.clock.urgent small { color: rgba(255,255,255,.85); }
.fuse { height: 10px; border-radius: 10px; background: var(--surface-2); overflow: hidden; }
.fuse i { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--g-blue); transition: width .25s linear; }
.fuse.low i { background: var(--g-red); }
.fuse.idle { visibility: hidden; }

.main { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* footer */
.foot { display: flex; flex-direction: column; gap: 18px; margin-bottom: var(--safe); }
.label { font: 700 22px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.podium { position: relative; border-radius: 32px; padding: 22px 26px 24px; background: var(--surface); box-shadow: inset 0 0 0 2px var(--line); }
/* The table keeps room for all its rows (--podium-rows, set from «Рядків у таблиці») even before anyone scores. */
.podium ol { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 18px;
  min-height: calc(var(--podium-rows, 2) * 67px + (var(--podium-rows, 2) - 1) * 16px); align-content: start; }
.podium li { display: grid; grid-template-columns: auto auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px; align-items: center; }
.podium .rank { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 800 22px/1 var(--font);
  background: var(--surface-2); color: var(--muted); }
.podium li:nth-child(1) .rank { background: var(--g-yellow); color: #1d1600; }
.podium .ava { grid-row: 1 / 3; }
.podium .name { font: 700 28px/1.1 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; align-self: end; }
.podium .pts { font: 800 34px/1 var(--font); align-self: start; }
.podium li.bump .pts { animation: bump .6s ease; }
.podium .empty { position: absolute; left: 26px; right: 26px; top: 64px; margin: 0; font: 600 28px/1.3 var(--font); color: var(--faint); }
/* What gifts do, like the Slovozviaz overlay: a real gift and its rule in the bottom
   right corner, no frame, slightly see-through. TikTok's comments take the left side. */
.gifts { position: absolute; right: var(--side); bottom: var(--legend-bottom); z-index: 4; display: flex; flex-direction: column; align-items: flex-start;
  gap: 12px; opacity: .88; pointer-events: none; }
.gifts .label { display: none; }
.gifts ul { display: contents; }
.gifts li { list-style: none; display: flex; align-items: center; gap: 18px; text-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
.theme-day .gifts li { text-shadow: 0 1px 4px rgba(255, 255, 255, .8); }
.gift-img { flex: none; width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35)); }
.gift-text { display: flex; flex-direction: column; min-width: 0; }
.gift-text b { font: 700 30px/1.15 var(--font); }
.gift-text small { font: 500 24px/1.2 var(--font); color: var(--text); opacity: .75; white-space: nowrap; }
.coin { flex: none; min-width: 46px; height: 46px; padding: 0 8px; box-sizing: border-box; border-radius: 999px; display: grid; place-items: center;
  background: var(--g-yellow); color: #1d1600; font: 800 24px/1 var(--font); }

/* avatars */
.ava { position: relative; display: inline-grid; place-items: center; flex: none; border-radius: 50%; overflow: hidden; box-sizing: border-box;
  color: #0e1322; font-family: var(--font); font-weight: 800; }
.ava img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* tiles */
.tile { --s: 120px; width: var(--s); height: var(--s); flex: none; box-sizing: border-box; border-radius: calc(var(--s) * .2);
  display: grid; place-items: center; font: 800 calc(var(--s) * .5)/1 var(--font); text-transform: uppercase; color: var(--text);
  background: var(--surface-2); }
.tile.hit, .tile.solved { background: var(--g-blue); color: #fff; }
.tile.near { background: var(--g-yellow); color: #1d1600; }
.tile.miss { background: var(--miss-bg); color: var(--miss-text); }
.tile.empty { background: transparent; box-shadow: inset 0 0 0 4px var(--line); }
.tile.open { background: #ffffff; color: #0e1322; }
.theme-day .tile.open { background: #0e1322; color: #fff; }
.tile.pop { animation: pop .45s cubic-bezier(.25,1.5,.45,1) both; }
.tile.flip { animation: flip .5s ease both; }

/* feeds */
.feed { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.row { flex: none; display: flex; align-items: center; gap: 16px; min-height: 84px; box-sizing: border-box; padding: 10px 18px; border-radius: 24px; background: var(--surface); }
.row .who { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.row .nick { font: 600 30px/1.1 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.row .plus { flex: none; font: 800 30px/1 var(--font); padding: 9px 14px; border-radius: 14px; background: var(--g-yellow); color: #1d1600; }
.row.quiet { opacity: .6; }
.row.enter { animation: row-in .4s ease-out both; }
.meta { display: flex; justify-content: center; gap: 26px; font: 600 30px/1.2 var(--font); color: var(--muted); }
.meta b { color: var(--text); font-weight: 800; }

/* ── Словозв'яз ── */
.sv { position: relative; display: flex; flex-direction: column; gap: 20px; height: 100%; }
.sv-last { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 8px 24px; align-items: center;
  padding: 28px 32px; border-radius: 34px; background: var(--surface); box-shadow: inset 0 0 0 3px var(--line); }
.sv-last.hot { box-shadow: inset 0 0 0 4px var(--g-blue); }
.sv-last.warm { box-shadow: inset 0 0 0 4px var(--g-yellow); }
.sv-last.won { background: var(--g-blue); color: #fff; box-shadow: none; }
.sv-last.bump { animation: sv-bump .45s cubic-bezier(.25,1.5,.45,1); }
.sv-last-word { font: 800 76px/1 var(--font); letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-last-word.muted { grid-column: 1 / -1; font-size: 52px; color: var(--muted); text-align: center; padding: 22px 0; }
.sv-last-rank { grid-row: 1 / 3; grid-column: 2; text-align: right; }
.sv-last-rank small { display: block; font: 700 22px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.sv-last-rank b { display: block; font: 900 96px/1 var(--font); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.sv-last.hot .sv-last-rank b { color: var(--g-blue); }
.sv-last.warm .sv-last-rank b { color: var(--g-yellow); }
.sv-last.won .sv-last-rank b, .sv-last.won .sv-last-rank small { color: #fff; }
.sv-last-who { display: flex; align-items: center; gap: 12px; font: 600 28px/1 var(--font); color: var(--muted); min-width: 0; }
.sv-list { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.sv-row { position: relative; flex: none; display: flex; align-items: center; gap: 20px; height: 82px; padding: 0 22px; border-radius: 22px; overflow: hidden;
  background: var(--surface); animation: row-in .4s ease-out both; }
.sv-bar { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(141,150,173,.16); border-radius: inherit; transition: width .5s ease; }
.sv-row.hot .sv-bar { background: rgba(47,107,255,.35); }
.sv-row.warm .sv-bar { background: rgba(255,200,61,.28); }
.sv-row > :not(.sv-bar) { position: relative; }
.sv-rank { min-width: 104px; font: 800 44px/1 var(--font); font-variant-numeric: tabular-nums; color: var(--muted); }
.sv-row.hot .sv-rank { color: #9db8ff; } .sv-row.warm .sv-rank { color: var(--g-yellow); }
.theme-day .sv-row.hot .sv-rank { color: var(--g-blue); } .theme-day .sv-row.warm .sv-rank { color: #b07a00; }
.sv-word { flex: 1; min-width: 0; font: 700 40px/1 var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-who { display: flex; align-items: center; gap: 10px; font: 600 24px/1 var(--font); color: var(--muted); max-width: 300px; }
.sv-who span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-tag { font: 700 22px/1 var(--font); padding: 8px 12px; border-radius: 10px; background: var(--g-yellow); color: #1d1600; }
.sv-status { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; font: 700 40px/1.3 var(--font); color: var(--muted); background: var(--bg); padding: 40px; }
@keyframes sv-bump { 40% { transform: scale(1.03); } }

/* ── П'ять літер ── */
.fl { display: flex; flex-direction: column; gap: 20px; height: 100%; }
.fl-board { display: flex; justify-content: center; gap: 18px; }
.fl-board .tile { --s: 142px; }
.legend { display: flex; justify-content: center; align-items: center; gap: 28px; font: 600 26px/1 var(--font); color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 10px; }
.legend i { width: 24px; height: 24px; border-radius: 7px; }
.legend .l-hit { background: var(--g-blue); } .legend .l-near { background: var(--g-yellow); }
.legend b { color: var(--text); }
.fl .feed .tiles { display: flex; gap: 7px; }
.fl .feed .tile { --s: 62px; }
.kb { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.kb div { display: flex; gap: 8px; }
.key { width: 70px; height: 66px; border-radius: 16px; display: grid; place-items: center; font: 700 32px/1 var(--font); text-transform: uppercase; background: var(--surface-2); color: var(--text); }
.key.hit { background: var(--g-blue); color: #fff; }
.key.near { background: var(--g-yellow); color: #1d1600; }
.key.miss { background: transparent; color: var(--faint); opacity: .5; }

/* ── Літера за літерою ── */
.ws { display: flex; flex-direction: column; gap: 24px; height: 100%; }
.ws-board { display: flex; justify-content: center; gap: 12px; padding-top: 4px; }
.ws-board .tile.closed { position: relative; color: transparent; background: var(--surface); box-shadow: inset 0 0 0 3px var(--line); }
.ws-board .tile.closed::after { content: "?"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--faint); font-size: calc(var(--s) * .42); }
.ws-board .tile.lock::after { content: ""; inset: auto; left: 33%; top: 47%; width: 34%; height: 26%; border-radius: 6px; background: var(--faint); }
.ws-board .tile.lock::before { content: ""; position: absolute; left: 38%; top: 27%; width: 24%; height: 26%; border: 5px solid var(--faint); border-bottom: 0;
  border-radius: 40px 40px 0 0; box-sizing: border-box; }
.word { display: flex; flex-wrap: nowrap; font: 800 40px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.word .hit { color: var(--g-yellow); }
.word.won .hit { color: var(--g-blue); }
.theme-day .word .hit { color: #c48a00; }
.score-of { flex: none; font: 700 24px/1 var(--font); color: var(--muted); padding: 8px 12px; border-radius: 12px; background: var(--surface-2); }

/* ── Прапори світу ── */
.fg { display: flex; flex-direction: column; align-items: center; gap: 28px; height: 100%; }
.fg-flag { position: relative; flex: 0 1 600px; min-height: 260px; aspect-ratio: 4 / 3; max-width: 100%; }
.fg-flag .frame { position: absolute; inset: 0; border-radius: 30px; overflow: hidden; background: #222; box-shadow: 0 30px 60px -30px rgba(0,0,0,.7), 0 0 0 2px rgba(255,255,255,.08); }
.fg-flag img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fg-flag.enter .frame { animation: flag-in .5s cubic-bezier(.2,1.3,.5,1) both; }
/* Fixed places under the flag (two rows for the name, two for who guessed), so the
   flag keeps its size and place whatever the name and however many guess it. */
.fg-name { flex: none; height: 182px; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 14px 34px; max-width: 960px; }
.fg-name .w { display: flex; gap: 8px; }
.fg-name .tile:not(.open):not(.solved) { background: var(--surface); box-shadow: inset 0 0 0 3px var(--line); }
.fg-name .mark { align-self: center; font: 800 52px/1 var(--font); color: var(--muted); }
.chips { flex: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.chip { padding: 12px 22px; border-radius: 999px; font: 600 28px/1 var(--font); color: var(--muted); background: var(--surface); }
.chip b { color: var(--text); }
.chip.lit { background: var(--g-blue); color: #fff; }
.fg-correct { flex: none; height: 140px; display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; gap: 12px; overflow: hidden; }
.fg-correct .who { display: flex; align-items: center; gap: 10px; padding: 6px 18px 6px 6px; border-radius: 999px; background: var(--surface);
  font: 700 28px/1 var(--font); animation: row-in .4s ease-out both; }
.fg-correct .who em { font: 800 28px/1 var(--font); font-style: normal; color: var(--g-yellow); }
.theme-day .fg-correct .who em { color: #c48a00; }

/* ── Емодзі-ребуси ── */
/* The card takes its theme's colour (--theme-rgb from games/emoji.js); the rest
   reuses the fixed places of «Прапори світу» (.fg-name, .chips, .fg-correct). */
/* A sticker sheet: a flat card in the theme's colour with a small polka-dot
   print, each emoji on its own white sticker, stuck on slightly crooked. */
.em-card { position: relative; flex: 0 1 520px; min-height: 280px; width: 100%; box-sizing: border-box; border-radius: 40px; display: grid; place-items: center; overflow: hidden;
  background-color: rgb(var(--theme-rgb));
  background-image: radial-gradient(rgba(255, 255, 255, .16) 3px, transparent 3.5px), radial-gradient(rgba(0, 0, 0, .08) 3px, transparent 3.5px);
  background-size: 34px 34px; background-position: 0 0, 17px 17px;
  box-shadow: inset 0 -10px 0 rgba(0, 0, 0, .12); }
.em-card.enter { animation: flag-in .5s cubic-bezier(.2,1.3,.5,1) both; }
.em-theme { position: absolute; top: 22px; left: 24px; display: flex; align-items: center; gap: 10px; padding: 10px 22px 10px 14px; border-radius: 999px;
  background: #fff; color: rgb(var(--theme-rgb)); font: 800 30px/1 var(--font); box-shadow: 0 6px 0 rgba(0, 0, 0, .12); }
.em-theme-icon, .em-glyphs { font-family: "Viewercade Emoji", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.em-glyphs { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 52px; font-size: var(--g, 150px); line-height: 1; }
.em-glyphs span { --tilt: -4deg; display: grid; place-items: center; width: calc(var(--g, 150px) * 1.32); height: calc(var(--g, 150px) * 1.32);
  border-radius: calc(var(--g, 150px) * .3); background: #fff; box-shadow: 0 8px 0 rgba(0, 0, 0, .14), 0 22px 34px -16px rgba(0, 0, 0, .55);
  animation: emoji-in .5s cubic-bezier(.2,1.4,.5,1) both; }
.em-glyphs span:nth-child(even) { --tilt: 3deg; }
.em-glyphs span:nth-child(3n) { --tilt: -1.5deg; }
@keyframes emoji-in { from { transform: scale(.3) rotate(-14deg); opacity: 0; } to { transform: rotate(var(--tilt)); opacity: 1; } }
/* «4 варіанти»: numbered options instead of the answer's letters. */
.em-options { display: none; flex: none; width: 100%; gap: 12px; }
.fg.em.choices .em-options { display: grid; }
.fg.em.choices .fg-name { display: none; }
.fg.em.choices .fg-correct { height: 64px; }
.em-opt { display: flex; align-items: center; gap: 20px; height: 76px; box-sizing: border-box; padding: 0 24px 0 11px; border-radius: 22px;
  background: var(--surface); box-shadow: inset 0 0 0 2px var(--line); font: 700 38px/1.1 var(--font); transition: opacity .3s, background .3s; }
.em-opt b { flex: none; width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center; background: rgba(var(--theme-rgb), .92);
  color: #fff; font: 800 32px/1 var(--font); }
.em-opt .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.em-opt .c { flex: none; font: 800 32px/1 var(--font); color: var(--muted); }
.em-opt.removed { opacity: .28; }
.em-opt.removed .t { text-decoration: line-through; }
.em-opt.right { background: rgba(var(--theme-rgb), .95); box-shadow: 0 0 0 4px rgba(255, 255, 255, .85); color: #fff; }
.em-opt.right b { background: #fff; color: rgb(var(--theme-rgb)); }
.em-opt.right .c { color: #fff; }
.em-opt.wrong { opacity: .45; }
.em-voters { display: flex; }
.em-voters .ava { margin-left: -10px; box-shadow: 0 0 0 3px var(--bg); }
.em-voters .ava:first-child { margin-left: 0; }

/* ── Що обереш? ── */
/* Two tall columns, one per option: the text, the share and the votes on top,
   and the voters' balls (a canvas over both) pile up inside the column below. */
.ch { position: relative; height: 100%; }
/* The balls pile at the bottom of the columns, so they end above TikTok's comments. */
.stage[data-game="choice"] { --safe: 540px; }
.ch canvas { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.ch-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; height: 100%; }
.col { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; box-sizing: border-box; padding: 24px 24px 0;
  border-radius: 36px; overflow: hidden; text-align: center; transition: opacity .4s, filter .4s, box-shadow .4s; }
.col.one { background: linear-gradient(180deg, #3f80f2 0%, #2a5fc4 55%, #1f4a9e 100%); color: #fff; }
.col.two { background: linear-gradient(180deg, #f5c34a 0%, #e3a527 55%, #c98a12 100%); color: #1d1600; }
.col .num { align-self: flex-start; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; font: 800 36px/1 var(--font);
  background: rgba(255,255,255,.24); }
.col.two .num { background: rgba(0,0,0,.12); }
.col .text { width: 100%; height: 176px; margin-top: 4px; display: flex; align-items: center; justify-content: center; overflow: hidden;
  font: 800 50px/1.08 var(--font); letter-spacing: -.01em; }
.col .pct { margin-top: 10px; font: 900 116px/1 var(--font); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.col .pct small { margin-left: 4px; font-size: .42em; letter-spacing: 0; }
.col .votes { margin-top: 8px; font: 600 30px/1 var(--font); opacity: .82; }
.col .badge { position: absolute; top: 22px; right: 22px; z-index: 3; padding: 12px 20px; border-radius: 999px; background: #fff; color: #0e1322;
  font: 800 28px/1 var(--font); box-shadow: 0 14px 30px -12px rgba(0,0,0,.5); animation: badge-in .45s cubic-bezier(.2,1.4,.5,1) both; }
.col .badge[hidden] { display: none; }
.col.win { box-shadow: 0 0 0 6px rgba(255,255,255,.9), 0 0 80px rgba(255,255,255,.28); }
.col.lose { opacity: .38; filter: saturate(.35); }
.ch.duel .ch-cols { gap: 10px; }
.ch.duel .col .pct { font-size: 96px; }
.verdict { position: absolute; left: 50%; top: 52%; z-index: 4; transform: translate(-50%, -50%); white-space: nowrap; padding: 26px 46px; border-radius: 30px;
  font: 800 64px/1 var(--font); color: #0e1322; background: #fff; box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); animation: verdict-in .45s cubic-bezier(.2,1.4,.5,1) both; }
@keyframes badge-in { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }

/* toasts, banner, confetti */
.toasts { position: absolute !important; top: calc(var(--safe-top) + 84px); left: var(--side); right: var(--side); z-index: 6; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 12px; max-width: 100%; height: 60px; box-sizing: border-box; padding: 8px 26px 8px 8px; border-radius: 999px;
  font: 600 30px/1 var(--font); background: #fff; color: #0e1322; box-shadow: 0 14px 30px -18px rgba(0,0,0,.6); animation: toast-in .35s ease-out both; }
.toast > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toast b { font-weight: 800; }
.toast.gift { background: var(--g-yellow); color: #1d1600; }
.toast.hint { padding-left: 26px; background: var(--g-blue); color: #fff; }
.toast.out { animation: toast-out .3s ease forwards; }
/* Win / answer card: the game's own surface and colours (dark on the night
   theme, light on the day theme), framed by the game's accent. */
.banner { position: absolute !important; left: 60px; right: 60px; top: 520px; z-index: 7; text-align: center; padding: 50px 40px 54px; border-radius: 44px;
  background: var(--surface); color: var(--text);
  box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--accent) 55%, var(--line)), 0 0 80px -10px color-mix(in srgb, var(--accent) 45%, transparent), 0 40px 100px -30px rgba(0,0,0,.75);
  animation: banner-in .45s cubic-bezier(.2,1.4,.5,1) both; }
.banner .kicker { font: 900 104px/1 var(--font); letter-spacing: -.02em; color: var(--accent); }
.banner.plain { box-shadow: inset 0 0 0 4px var(--line), 0 40px 100px -30px rgba(0,0,0,.75); }
.banner.plain .kicker { font-size: 60px; color: var(--muted); }
.banner .who { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 28px; font: 700 56px/1.1 var(--font); }
.banner .who span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 620px; }
.banner .answer { display: flex; justify-content: center; gap: 10px; margin-top: 32px; }
.banner .answer-text { margin-top: 28px; font: 900 88px/1 var(--font); text-transform: uppercase; }
.banner.out { animation: banner-out .35s ease forwards; }
.confetti { position: absolute !important; inset: 0; pointer-events: none; z-index: 8; overflow: hidden; }
.confetti i { position: absolute; top: -40px; width: 16px; height: 30px; border-radius: 4px; animation: fall linear forwards; }

.brand { position: absolute !important; bottom: 26px; left: 0; right: 0; text-align: center; font: 800 28px/1 var(--font); letter-spacing: .1em; color: var(--faint); }
.offline { position: absolute !important; top: 22px; left: 50%; transform: translateX(-50%); z-index: 9; padding: 10px 24px; border-radius: 999px; background: var(--g-red); color: #fff; font: 700 24px/1 var(--font); }
.veil { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: rgba(12,17,32,.6); border-radius: 34px; }
.veil span { font: 900 110px/1 var(--font); color: #fff; letter-spacing: -.02em; }

@keyframes live { 50% { opacity: .35; } }
@keyframes throb { 50% { transform: scale(1.05); } }
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes flip { from { transform: rotateX(90deg); } to { transform: none; } }
@keyframes bump { 40% { transform: scale(1.3); } }
@keyframes row-in { from { transform: translateY(-18px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes toast-in { from { transform: translateY(-16px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes banner-in { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes banner-out { to { transform: scale(.94); opacity: 0; } }
@keyframes verdict-in { from { transform: translate(-50%, -50%) scale(.7); opacity: 0; } to { transform: translate(-50%, -50%); opacity: 1; } }
@keyframes flag-in { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fall { to { transform: translateY(2050px) rotate(720deg); } }
@keyframes winner { from { transform: scale(1); } to { transform: scale(1.03); } }


/* ── header in the Slovozviaz overlay style: compact title + stat tile ── */
.eyebrow { display: none; }
.head { align-items: center; }
.head h1 { margin: 0; font: 800 64px/1.05 var(--font); letter-spacing: -.02em; }
.head h1::after { display: none; }
.head p { margin-top: 10px; font: 500 32px/1.25 var(--font); }
.clock { min-width: 190px; height: 132px; border-radius: 26px; background: var(--surface); box-shadow: inset 0 0 0 2px var(--line);
  display: flex; flex-direction: column-reverse; align-items: center; justify-content: center; gap: 6px; }
.clock small { margin: 0; font: 500 24px/1 var(--font); letter-spacing: 0; text-transform: none; color: var(--muted); }
.clock b { font: 700 60px/1 var(--font); }
.podium, .gifts li, .row, .sv-row, .chip, .fg-correct .who { border-radius: 20px; }
.podium { box-shadow: inset 0 0 0 2px var(--line); }
.brand { font: 600 26px/1 var(--font); letter-spacing: .02em; text-transform: none; }

/* «Літера за літерою»: the answers, then «Цей раунд» and «Найкращі за ефір» side by
   side right under them (above TikTok's chat at the bottom), and the gift list
   as a legend at the bottom right, above TikTok's buttons. */
.boards { display: grid; gap: 16px; }
.stage[data-game="word-start"] .main { flex: 0 1 auto; }
/* Fixed places: the letter row and room for 6 answers keep their size, so the
   tables below never move when a new word starts or the word is shorter. */
.stage[data-game="word-start"] .ws { gap: 18px; }
.stage[data-game="word-start"] .ws-board { height: 124px; align-items: center; padding-top: 0; }
.ws-answers { position: relative; display: flex; flex-direction: column; gap: 12px; }
.stage[data-game="word-start"] .ws .feed { flex: none; height: 482px; }   /* 6 answers: 6 × 72px + 5 gaps */
.stage[data-game="word-start"] .ws .feed .row { min-height: 72px; padding: 8px 18px; }
/* sits over the empty answer area, so it takes no extra height */
.feed-empty { position: absolute; left: 0; top: 34px; margin: 0; font: 600 24px/1.3 var(--font); color: var(--faint); }
.feed-empty[hidden] { display: none; }
.stage[data-game="word-start"] .boards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stage[data-game="word-start"] .podium { padding: 20px 24px 22px; }
.stage[data-game="word-start"] .podium ol { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 16px;
  min-height: calc(var(--list-rows, 5) * 52px + (var(--list-rows, 5) - 1) * 12px); }
.stage[data-game="word-start"] .podium li { grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-rows: auto; }
.stage[data-game="word-start"] .podium .rank, .stage[data-game="word-start"] .podium .ava { grid-row: auto; }
.stage[data-game="word-start"] .podium .rank { width: 36px; height: 36px; font-size: 20px; }
.stage[data-game="word-start"] .podium .ava { width: 52px !important; height: 52px !important; font-size: 23px !important; }
.stage[data-game="word-start"] .podium .name { align-self: center; font-size: 30px; }
.stage[data-game="word-start"] .podium .pts { align-self: center; font-size: 32px; }
.stage[data-game="word-start"] .podium .empty { left: 24px; right: 24px; top: 62px; font-size: 25px; }