:root {
  --gold: #ffd140;
  --maroon: #520a10;
  --deep: #120005;
  --red-frame: linear-gradient(135deg, #ff5440, #cc121a 50%, #730510);
  --lit-frame: linear-gradient(135deg, #fff, #fff7b3 50%, #ffd100);
  --team0: #eb2929;
  --team1: #2e6bf2;
  --team2: #22a95a;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(circle at 40% 50%, var(--maroon), var(--deep) 75%);
  color: #fff;
  font-family: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
}
button { font: inherit; cursor: pointer; }

/* ---------- layout ---------- */
.app { display: flex; height: 100vh; }
.stage { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; min-width: 0; }
.sidebar {
  width: 310px; flex: none; padding: 20px; background: rgba(0,0,0,.3);
  display: flex; flex-direction: column; gap: 12px; overflow: hidden;
}
.sidebar hr { width: 100%; border: 0; border-top: 1px solid rgba(255,209,64,.4); margin: 4px 0; }
.sidebar h3 { margin: 0; font-size: 18px; font-weight: 800; }
.lb-title { margin: 0; color: var(--gold); font-size: 24px; font-weight: 900; }
.leaderboard { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; max-height: 45vh; }
.lb-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,.06); }
.lb-row.new { background: rgba(255,255,0,.25); }
.lb-rank { width: 30px; text-align: center; font-weight: 800; opacity: .8; }
.lb-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-date { font-size: 11px; opacity: .5; }
.lb-pts { margin-left: auto; color: var(--gold); font-weight: 900; font-variant-numeric: tabular-nums; }
.log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 600; }
.log-row { display: flex; align-items: center; gap: 8px; }
.log-row .pts { margin-left: auto; color: var(--gold); font-variant-numeric: tabular-nums; }
.log-row.whammy { color: #ff4040; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.dot.red, .dot.t0 { background: var(--team0); } .dot.blue, .dot.t1 { background: var(--team1); } .dot.t2 { background: var(--team2); }
.muted { opacity: .55; font-size: 14px; }
.sound { font-size: 14px; display: flex; gap: 6px; align-items: center; }

@media (max-width: 900px) {
  body { overflow: auto; }
  .app { flex-direction: column; height: auto; }
  .stage { padding: 10px; }
  .sidebar { width: 100%; }
  .leaderboard { max-height: none; }
}

/* ---------- full-screen board (F) ---------- */
.full-btn {
  position: fixed; top: 10px; right: 10px; z-index: 15; width: 34px; height: 34px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.35); color: #fff; font-size: 18px; line-height: 1;
  opacity: .45; transition: opacity .2s;
}
.full-btn:hover { opacity: 1; }
.scorebar { display: none; }
body.present .sidebar { display: none; }
body.present { overflow: hidden; }
body.present .app { height: 100vh; flex-direction: column; }
body.present .stage { flex: 1; min-height: 0; }
body.present .stage { padding: 1vh 1vw calc(var(--bar) + 1vh); }
body.present { --bar: clamp(46px, 8.5vh, 90px); }
body.present .board { width: min(98vw, calc((100vh - var(--bar) - 2vh) * 1.6)); }
body.present .center .teams { display: none; }            /* scores live in the bar instead */
body.present .center .message { font-size: calc(20 * var(--c)); }
body.present .center .title-big { font-size: calc(40 * var(--c)); }
body.present .center .title-small { font-size: calc(14 * var(--c)); }
body.present .scorebar {
  display: flex; position: fixed; left: 0; right: 0; bottom: 0; height: var(--bar); z-index: 4;
  background: rgba(0,0,0,.55); border-top: 2px solid rgba(255,209,64,.5);
}
.sbar-team {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 2.2vh; padding: 0 2vw; min-width: 0;
  border-top: .5vh solid transparent;
}
.sbar-team.t0 { background: linear-gradient(90deg, rgba(235,41,41,.35), rgba(235,41,41,.08)); }
.sbar-team.t1 { background: linear-gradient(270deg, rgba(46,107,242,.35), rgba(46,107,242,.08)); }
.sbar-team.up { border-top-color: var(--gold); }
.sbar-team.t0.up { background: linear-gradient(90deg, rgba(235,41,41,.7), rgba(235,41,41,.2)); }
.sbar-team.t1.up { background: linear-gradient(270deg, rgba(46,107,242,.7), rgba(46,107,242,.2)); }
.sbar-team.t2 { background: rgba(34,169,90,.2); }
.sbar-team.t2.up { background: rgba(34,169,90,.6); }
.scorebar:has(.t2) .sbar-team.t1 { background: rgba(46,107,242,.2); }
.scorebar:has(.t2) .sbar-team.t1.up { background: rgba(46,107,242,.6); }
.scorebar:has(.t2) .sbar-team { gap: 1.4vh; }
.sbar-name { font-weight: 900; font-size: calc(var(--bar) * .32); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sbar-name .up-mark { color: var(--gold); }
.sbar-score { --s: calc(var(--bar) * .02); font-weight: 900; font-size: calc(var(--bar) * .52); line-height: 1; font-variant-numeric: tabular-nums; }
.sbar-spins { font-weight: 700; font-size: calc(var(--bar) * .24); opacity: .85; white-space: nowrap; }
.scorebar .whams .face { width: calc(var(--bar) * .36); height: calc(var(--bar) * .36); border-width: 2px; }
.sbar-out { color: red; font-weight: 900; font-size: calc(var(--bar) * .3); }
@media (max-width: 700px) { .sbar-spins, .scorebar .whams { display: none; } }

/* ---------- board ---------- */
.board {
  position: relative;
  width: min(100%, calc((100vh - 48px) * 1.6));
  aspect-ratio: 1.6;
  container-type: inline-size;
  --s: 0.097cqw;   /* tile scale  */
  --c: 0.093cqw;   /* centre scale */
  --o: 0.1cqw;     /* overlay scale */
}
@media (max-width: 900px) { .board { width: 100%; } }
.marquee {
  position: absolute; inset: 0; border-radius: 2.1cqw;
  background: linear-gradient(#ffe07a, #c7871a 33%, #ffcc4d 66%, #8c5709);
}
.marquee::after {
  content: ""; position: absolute; inset: 2.55cqw; border-radius: .75cqw; background: #140005;
}
.bulb {
  position: absolute; width: 1.5cqw; height: 1.5cqw; margin: -.75cqw 0 0 -.75cqw; border-radius: 50%;
  background: radial-gradient(#9a6b1f, #59380d); z-index: 1;
}
.bulb.on { background: radial-gradient(#fff 20%, #ffd94d); box-shadow: 0 0 1cqw #ffeb3b; }
.grid {
  position: absolute; inset: 3cqw; display: grid;
  grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(5, 1fr); gap: .5cqw; z-index: 2;
}

/* ---------- tiles ---------- */
.tile {
  position: relative; border-radius: calc(5 * var(--s)); background: var(--red-frame);
  padding: calc(8 * var(--s)); transition: transform .08s, filter .08s, box-shadow .08s; min-width: 0; min-height: 0;
}
.tile .inner {
  height: 100%; border-radius: calc(3 * var(--s)); border: calc(1.5 * var(--s)) solid rgba(0,0,0,.65);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  overflow: hidden; padding: calc(3 * var(--s));
}
.tile.lit { background: var(--lit-frame); transform: scale(1.06); box-shadow: 0 0 2cqw rgba(255,255,255,.9); filter: brightness(1.12); z-index: 3; }
.tile.dim { filter: brightness(.78); }
.tile.blink { animation: blink .5s steps(1) infinite; }
@keyframes blink { 50% { background: var(--red-frame); transform: none; box-shadow: none; filter: none; } }

.tier0 .inner { background: linear-gradient(#299a9e, #0a4754); }
.tier1 .inner { background: linear-gradient(#db7529, #80330f); }
.tier2 .inner { background: linear-gradient(#8542c2, #3b146b); }
.tier3 .inner { background: linear-gradient(#3d9e3d, #14541f); }
.tier4 .inner { background: linear-gradient(#3361db, #0f2470); }
.t-whammy .inner { background: linear-gradient(#ffeb66, #f2b305); }
.t-addone .inner { background: linear-gradient(#f2599e, #8c1452); }
.t-lose .inner { background: linear-gradient(#fafafa, #b3bdcc); }
.t-move .inner { background: linear-gradient(#1f1f24, #050508); }
.t-bigbucks .inner { background: linear-gradient(#2fb34a, #0b5220); }
.bb { font-weight: 900; font-size: calc(30 * var(--s)); line-height: .95; letter-spacing: calc(1 * var(--s)); }
.t-double .inner { background: linear-gradient(#e0367a, #6e0f3a); }
.dbl { font-weight: 900; font-size: calc(30 * var(--s)); line-height: 1; }
.dbl-sub { font-weight: 800; font-size: calc(14 * var(--s)); white-space: nowrap; }
.t-corner .inner { background: linear-gradient(#ff8a1f, #a33a00); position: relative; }
.ca { position: absolute; color: #fff; font-weight: 900; font-size: calc(18 * var(--s)); line-height: 1; }
.ca.tl { left: calc(5 * var(--s)); top: calc(3 * var(--s)); } .ca.tr { right: calc(5 * var(--s)); top: calc(3 * var(--s)); }
.ca.bl { left: calc(5 * var(--s)); bottom: calc(3 * var(--s)); } .ca.br { right: calc(5 * var(--s)); bottom: calc(3 * var(--s)); }
.tile.pick { cursor: pointer; z-index: 3; animation: pickme .6s ease-in-out infinite; }
@keyframes pickme { 0%,100% { background: var(--lit-frame); box-shadow: 0 0 2.4cqw #fff; transform: scale(1.05); } 50% { background: var(--red-frame); box-shadow: 0 0 .6cqw #ffd140; transform: scale(1); } }
.big.wait { font-variant-numeric: tabular-nums; }

.gold {
  background: linear-gradient(#fff8b8, #ffcc33 50%, #d18509);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(calc(1.6 * var(--s)) calc(1.8 * var(--s)) 0 #000);
}
.cond { font-stretch: condensed; font-family: "SF Compact Display", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif; }
.num { font-weight: 900; font-size: calc(40 * var(--s)); line-height: 1; white-space: nowrap; }
.pts-word { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 700; font-size: calc(17 * var(--s)); line-height: 1.1; }
.prize-emoji { font-size: calc(24 * var(--s)); line-height: 1.1; }
.prize-name { font-weight: 800; font-size: calc(13 * var(--s)); text-transform: uppercase; line-height: 1.05; text-shadow: calc(1*var(--s)) calc(1*var(--s)) 0 #000;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.prize-pts { font-weight: 900; font-size: calc(22 * var(--s)); line-height: 1.1; }
.one-spin { font-weight: 900; font-size: calc(14 * var(--s)); background: #d91419; border-radius: 99px; padding: 0 calc(6 * var(--s)); white-space: nowrap; margin-top: calc(2 * var(--s)); }
.face { border-radius: 50%; object-fit: cover; border: calc(3 * var(--s)) solid #d90d14; display: block; }
.tile .face { width: calc(80 * var(--s)); height: calc(80 * var(--s)); }
.addone-a { font-weight: 900; font-size: calc(15 * var(--s)); }
.addone-1 { font-weight: 900; font-size: calc(58 * var(--s)); line-height: .9; }
.lose { position: relative; width: calc(50 * var(--s)); height: calc(50 * var(--s)); }
.lose .face { width: 100%; height: 100%; }
.lose::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: calc(4 * var(--s)) solid red;
  background: linear-gradient(45deg, transparent 46%, red 46%, red 54%, transparent 54%); }
.lose-label { color: #bf0d14; font-weight: 900; font-size: calc(14 * var(--s)); white-space: nowrap; margin-top: calc(2 * var(--s)); }
.move { display: flex; align-items: center; gap: calc(6 * var(--s)); }
.arrow { color: var(--gold); font-size: calc(36 * var(--s)); font-weight: 900; line-height: 1; display: inline-block; }
.move-title { font-weight: 900; font-size: calc(22 * var(--s)); line-height: 1; white-space: nowrap; }
.move-sub { font-weight: 800; font-size: calc(13 * var(--s)); white-space: nowrap; }
.move-text { text-align: left; }

/* ---------- centre screen ---------- */
.center {
  grid-column: 2 / 6; grid-row: 2 / 5; position: relative;
  border-radius: calc(6 * var(--c)); background: var(--red-frame); padding: calc(11 * var(--c));
}
.center-inner {
  height: 100%; border-radius: calc(4 * var(--c)); border: calc(3 * var(--c)) solid var(--gold);
  background: linear-gradient(#1f0a3d, #080214);
  display: flex; flex-direction: column; align-items: center; gap: calc(6 * var(--c));
  padding: calc(8 * var(--c)) calc(12 * var(--c));
}
.title-small { color: var(--gold); font-weight: 800; letter-spacing: calc(4 * var(--c)); font-size: calc(11 * var(--c)); }
.title-big {
  font-weight: 900; font-size: calc(28 * var(--c)); line-height: 1; margin-top: calc(-2 * var(--c));
  background: linear-gradient(#ffeb3b, orange, red); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 calc(6 * var(--c)) rgba(255,165,0,.6)); cursor: default; user-select: none;
}
.vs { font-weight: 900; font-size: calc(30 * var(--c)); display: flex; gap: calc(18 * var(--c)); text-shadow: calc(1.5*var(--c)) calc(1.5*var(--c)) 0 #000; }
.vs .t0 { color: var(--team0); } .vs .t1 { color: var(--team1); } .vs .t2 { color: var(--team2); }
.vs { flex-wrap: wrap; justify-content: center; } .vs .v { opacity: .6; }
.sub-msg { font-size: calc(16 * var(--c)); font-weight: 600; opacity: .75; }
.teams { display: flex; gap: calc(12 * var(--c)); width: 100%; }
.team {
  flex: 1; position: relative; border-radius: calc(10 * var(--c)); padding: calc(6 * var(--c)) calc(8 * var(--c));
  display: flex; flex-direction: column; align-items: center; gap: calc(2 * var(--c));
  border: 1px solid rgba(255,255,255,.15); cursor: pointer; min-width: 0;
}
.team.t0 { background: rgba(235,41,41,.15); } .team.t1 { background: rgba(46,107,242,.15); }
.team.up { border: calc(3 * var(--c)) solid var(--gold); }
.team.t0.up { background: rgba(235,41,41,.45); } .team.t1.up { background: rgba(46,107,242,.45); }
.team.t2 { background: rgba(34,169,90,.15); } .team.t2.up { background: rgba(34,169,90,.45); }
.teams:has(.t2) .team-score { font-size: calc(26 * var(--c)); }
.teams:has(.t2) .team-name { font-size: calc(13 * var(--c)); }
.teams:has(.t2) .team-spins { font-size: calc(11 * var(--c)); }
.big.small { font-size: calc(14 * var(--c)); padding: calc(8 * var(--c)) calc(14 * var(--c)); max-width: calc(200 * var(--c)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-name { font-weight: 800; font-size: calc(15 * var(--c)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.team-name .up-mark { color: var(--gold); }
.team-score { font-weight: 900; font-size: calc(32 * var(--c)); line-height: 1; font-variant-numeric: tabular-nums; --s: var(--c); }
.team-spins { font-weight: 700; font-size: calc(13 * var(--c)); }
.whams { display: flex; gap: calc(3 * var(--c)); }
.whams .face { width: calc(20 * var(--c)); height: calc(20 * var(--c)); border: calc(1.5 * var(--c)) solid var(--gold); }
.whams .face.off { opacity: .15; filter: grayscale(1); }
/* the 🚫 Whammy */
svg.face.nosym { border: 0 !important; border-radius: 50%; background: transparent; filter: drop-shadow(0 calc(2 * var(--s)) 0 rgba(0,0,0,.35)); }
.whams svg.face.nosym { filter: none; }
.whams svg.face.nosym.off { filter: grayscale(1); }
.whammy-ov svg.nosym.big { width: 30cqw; height: 30cqw; animation: wobble .6s ease-in-out infinite; filter: drop-shadow(0 0 2cqw rgba(255,0,0,.8)); }
/* single player */
.name-row { display: flex; gap: calc(10 * var(--c)); align-items: center; }
.name-input {
  font: inherit; font-weight: 800; font-size: calc(20 * var(--c)); color: #fff; width: calc(300 * var(--c));
  background: rgba(0,0,0,.45); border: calc(2 * var(--c)) solid rgba(255,209,64,.6); border-radius: calc(10 * var(--c));
  padding: calc(9 * var(--c)) calc(14 * var(--c)); outline: none;
}
.name-input:focus { border-color: var(--gold); box-shadow: 0 0 calc(10 * var(--c)) rgba(255,209,64,.5); }
.name-input::placeholder { color: rgba(255,255,255,.4); }
.official { font-size: calc(12 * var(--c)); opacity: .7; }
.center-inner.solo .teams { justify-content: center; }
.center-inner.solo .team { flex: 0 1 60%; }
.center-inner.solo .team-score { font-size: calc(40 * var(--c)); }
.winner-rank { font-weight: 800; font-size: calc(34 * var(--w)); color: #fff; margin-top: calc(8 * var(--w)); }
.out-stamp { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: red; font-weight: 900; font-size: calc(34 * var(--c)); transform: rotate(-14deg); text-shadow: 0 0 4px #000; pointer-events: none; }
.message { font-weight: 600; font-size: calc(15 * var(--c)); text-align: center; white-space: pre-line; line-height: 1.25; }
.spacer { flex: 1; }
.buttons { display: flex; gap: calc(12 * var(--c)); }
.big {
  font-weight: 900; font-size: calc(20 * var(--c)); color: #fff; border: 1.5px solid rgba(255,255,255,.5);
  border-radius: 99px; padding: calc(9 * var(--c)) calc(26 * var(--c));
  background: linear-gradient(var(--b), color-mix(in srgb, var(--b) 60%, transparent));
  box-shadow: 0 0 calc(10 * var(--c)) color-mix(in srgb, var(--b) 60%, transparent);
}
.big:active { transform: scale(.95); }
.big:disabled { opacity: .4; cursor: default; }
.big.wide { padding-left: calc(70 * var(--c)); padding-right: calc(70 * var(--c)); }
.big.green { --b: #34c759; } .big.red { --b: #ff3b30; } .big.orange { --b: #ff9500; }
.hint { font-size: calc(11 * var(--c)); opacity: .5; display: flex; gap: calc(6 * var(--c)); }
.hint button { background: none; border: 0; color: inherit; text-decoration: underline; padding: 0; font-size: inherit; }

/* ---------- board overlays ---------- */
.board-overlay { position: absolute; inset: 3cqw; z-index: 5; pointer-events: none; }
.board-overlay > * { pointer-events: auto; }
.whammy-ov {
  position: absolute; inset: 0; border-radius: 2cqw; background: rgba(0,0,0,.7);
  display: flex; flex-direction: column; align-items: center; justify-content: center; animation: pop .35s cubic-bezier(.3,1.6,.5,1);
}
.whammy-ov img { max-height: 78%; max-width: 60%; border-radius: 2cqw; border: .5cqw solid var(--gold);
  box-shadow: 0 0 3cqw rgba(255,0,0,.8); animation: wobble .6s ease-in-out infinite; }
.whammy-ov img.face { width: 23cqw; height: 23cqw; max-width: none; max-height: none; border-radius: 50%; }
.whammy-word {
  font-weight: 900; font-size: 9.6cqw; margin-top: -4cqw; line-height: 1;
  background: linear-gradient(#ffeb3b, red); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 2cqw red); animation: shake .1s linear infinite;
}
.game-over-word { font-weight: 800; font-size: 4.4cqw; margin-top: 2cqw; }
@keyframes pop { from { transform: scale(.3); opacity: 0; } }
@keyframes wobble { 0%,100% { transform: rotate(-4deg) scale(1); } 50% { transform: rotate(4deg) scale(1.04); } }
@keyframes shake { 0%,100% { transform: translateX(-.4cqw); } 50% { transform: translateX(.4cqw); } }

.reveal {
  position: absolute; inset: 0; border-radius: 1cqw; overflow: hidden; cursor: pointer;
  border: 1.2cqw solid transparent; background: var(--red-frame) border-box;
  animation: pop .45s cubic-bezier(.3,1.4,.5,1);
}
.reveal-sky {
  position: absolute; inset: 0;
  background: radial-gradient(circle, #599eff, #0d33bf 55%, #051466);
}
.reveal-sky::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 200cqw; height: 200cqw; margin: -100cqw 0 0 -100cqw;
  background: repeating-conic-gradient(rgba(255,255,255,.07) 0 6.43deg, transparent 6.43deg 12.86deg);
  animation: spin 40s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.sparkle { position: absolute; color: #fff; font-size: 1.6cqw; animation: twinkle 1.6s ease-in-out infinite; }
@keyframes twinkle { 0%,100% { opacity: .1; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.1); } }
.reveal-body { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.4cqw; padding: 3cqw; }
.reveal-pic { max-width: 55%; max-height: 60%; border-radius: 1.4cqw; box-shadow: 0 0 2.4cqw rgba(255,255,255,.7); transition: max-height .3s; }
.reveal.points .reveal-pic { max-height: 48%; }
.reveal-emoji { font-size: 19cqw; line-height: 1; filter: drop-shadow(0 0 2.4cqw rgba(255,255,255,.6)); }
.reveal-name { font-weight: 800; font-size: 6.2cqw; text-transform: uppercase; text-align: center; line-height: 1; text-shadow: .3cqw .3cqw 0 rgba(0,0,0,.8); }
.reveal-pts { display: flex; align-items: baseline; gap: 1.2cqw; --s: 0.3cqw; animation: pop .4s cubic-bezier(.3,1.8,.5,1); }
.reveal-pts .num { font-size: 8.8cqw; }
.reveal-pts .pts-word { font-size: 4.4cqw; }

/* ---------- window overlays ---------- */
#windowOverlay > * { position: fixed; inset: 0; z-index: 20; }
.winner {
  --w: min(calc(100vw / 1400), calc(100vh / 860));
  background: rgba(0,0,0,.84); display: flex; align-items: center; justify-content: center; cursor: pointer;
  animation: pop .5s cubic-bezier(.3,1.4,.5,1);
}
.winner canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.winner-body { position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(10 * var(--w)); text-align: center; padding: 20px; }
.trophy { font-size: calc(150 * var(--w)); animation: wobble 1.4s ease-in-out infinite; }
.winner-team { font-weight: 900; font-size: calc(110 * var(--w)); text-transform: uppercase; line-height: 1; }
.winner-wins {
  font-weight: 900; font-size: calc(130 * var(--w)); line-height: 1;
  background: linear-gradient(#ffeb3b, orange, red); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 calc(20 * var(--w)) orange); animation: pulse .8s ease-in-out infinite;
}
@keyframes pulse { 50% { transform: scale(1.05); } }
.winner-pts { --s: calc(2.5 * var(--w)); font-weight: 900; font-size: calc(64 * var(--w)); }
.close-hint { font-size: calc(16 * var(--w)); opacity: .4; margin-top: calc(20 * var(--w)); }

.scoreboard {
  --w: min(calc(100vw / 1400), calc(100vh / 860));
  background: radial-gradient(circle, var(--maroon), var(--deep) 80%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(24 * var(--w)); padding: calc(40 * var(--w));
}
.sb-title { text-align: center; }
.sb-title .title-small { font-size: calc(26 * var(--w)); letter-spacing: calc(8 * var(--w)); }
.sb-title .title-big { font-size: calc(76 * var(--w)); }
.sb-cards { display: flex; gap: calc(32 * var(--w)); width: 100%; flex: 1; min-height: 0; }
.sb-card {
  flex: 1; border-radius: calc(30 * var(--w)); padding: calc(30 * var(--w)); min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(14 * var(--w));
  border: calc(2 * var(--w)) solid rgba(255,255,255,.2);
}
.sb-card.t0 { background: linear-gradient(rgba(235,41,41,.75), rgba(235,41,41,.3)); }
.sb-card.t1 { background: linear-gradient(rgba(46,107,242,.75), rgba(46,107,242,.3)); }
.sb-card.t2 { background: linear-gradient(rgba(34,169,90,.75), rgba(34,169,90,.3)); }
.sb-cards.three { gap: calc(22 * var(--w)); }
.sb-cards.three .sb-name { font-size: calc(46 * var(--w)); }
.sb-cards.three .sb-score { font-size: calc(130 * var(--w)); }
.sb-cards.three .sb-spins { font-size: calc(30 * var(--w)); }
.sb-cards.three .whams .face { width: calc(52 * var(--w)); height: calc(52 * var(--w)); }
.sb-card.up { border: calc(8 * var(--w)) solid var(--gold); box-shadow: 0 0 calc(30 * var(--w)) rgba(255,209,64,.6); }
.sb-name { font-weight: 900; font-size: calc(64 * var(--w)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sb-score { --s: calc(3 * var(--w)); font-weight: 900; font-size: calc(190 * var(--w)); line-height: 1; font-variant-numeric: tabular-nums; }
.sb-spins { font-weight: 700; font-size: calc(40 * var(--w)); opacity: .9; }
.sb-card .whams .face { width: calc(70 * var(--w)); height: calc(70 * var(--w)); border-width: calc(3 * var(--w)); }
.sb-status { font-weight: 900; font-size: calc(30 * var(--w)); min-height: calc(36 * var(--w)); color: var(--gold); }
.sb-status.out { color: red; }
.sb-msg { font-weight: 900; font-size: calc(44 * var(--w)); color: var(--gold); }
.sb-hint { font-size: calc(16 * var(--w)); opacity: .4; }

/* ---------- settings ---------- */
dialog { border: 0; border-radius: 16px; padding: 0; background: #1c1c1f; color: #fff; width: min(680px, 94vw); max-height: 90vh; }
dialog::backdrop { background: rgba(0,0,0,.6); }
.settings { padding: 24px; display: flex; flex-direction: column; gap: 14px; max-height: 90vh; }
.settings h2 { margin: 0; font-size: 26px; font-weight: 900; }
.settings h4 { margin: 8px 0 0; }
.tabs { display: flex; gap: 4px; background: #2c2c30; padding: 4px; border-radius: 10px; }
.tabs button { flex: 1; border: 0; border-radius: 7px; padding: 6px; background: none; color: #fff; }
.tabs button.on { background: #48484e; }
.tab { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; min-height: 340px; max-height: 52vh; }
.tab[hidden] { display: none; }
.row { display: flex; align-items: center; gap: 10px; }
.row.between { justify-content: space-between; }
.block { display: flex; flex-direction: column; gap: 6px; }
.settings input[type=text], .settings input[type=number] {
  background: #2c2c30; border: 1px solid #48484e; color: #fff; border-radius: 6px; padding: 6px 8px; font: inherit;
}
.settings .row input[type=text] { flex: 1; }
.settings input[type=number] { width: 70px; }
.settings button { background: #3a3a3f; color: #fff; border: 0; border-radius: 7px; padding: 6px 12px; }
.settings button.primary { background: #0a84ff; padding: 8px 22px; font-weight: 700; }
.settings button.danger { background: #5c1a1a; color: #ff8a80; }
.note { font-size: 12px; opacity: .65; margin: 0; }
.prize-head, .prize-row { display: grid; grid-template-columns: 52px 56px 1fr 90px 32px; gap: 8px; align-items: center; }
.prize-head { font-size: 12px; font-weight: 700; opacity: .6; }
.prize-list { display: flex; flex-direction: column; gap: 6px; }
.prize-row input { width: 100%; min-width: 0; }
.prize-row .emoji { text-align: center; }
.pic-btn { width: 52px; height: 36px; padding: 0 !important; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.pic-btn img { width: 100%; height: 100%; object-fit: cover; }
.trash { background: none !important; color: #ff6b6b !important; font-size: 16px; }
.foot { border-top: 1px solid #333; padding-top: 12px; }