/* ===================== Animated scoreboard v2 ===================== */
.sb { display: grid; gap: 14px; }
.sb__controls { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sb__sep { flex: 1; }
.sb__note { margin: 0; color: var(--t-muted); font-size: .88rem; }
.sb-btn { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--t-border); background: var(--t-surface); color: var(--t-text); font: 700 .9rem/1 var(--t-font-body); cursor: pointer; backdrop-filter: blur(8px); }
.sb-btn:hover { border-color: var(--t-primary); }
.sb-btn[disabled] { opacity: .5; }
.sb-btn--primary { background: var(--t-primary); border-color: var(--t-primary); color: var(--t-on-primary); min-width: 96px; }

/* stage */
.sb__stage {
  --sb-ink: color-mix(in srgb, var(--t-bg1) 28%, #0b0720);
  --sb-ink-2: color-mix(in srgb, var(--t-bg2) 38%, #0b0720);
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: 1fr; gap: 18px;
  padding: clamp(16px, 2.6vw, 30px); border-radius: calc(var(--t-radius) + 6px);
  background:
    radial-gradient(90% 60% at 50% -10%, color-mix(in srgb, var(--t-primary) 38%, transparent), transparent 60%),
    radial-gradient(60% 50% at 100% 100%, color-mix(in srgb, var(--t-secondary) 22%, transparent), transparent 70%),
    linear-gradient(170deg, var(--sb-ink), var(--sb-ink-2));
  border: 1px solid color-mix(in srgb, var(--t-text) 14%, transparent);
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.08);
  color: #fff; min-height: 560px; align-content: start;
}
.sb__stage::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 64px); }

/* spotlight (top bar normally, left column in full screen) */
.sb-spot { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "main main" "given given" "note note" "prog prog"; gap: 12px 18px; align-items: center; }
.sb-spot__brand { display: none; }
.sb-spot__main { grid-area: main; display: flex; align-items: center; gap: 18px; min-height: 72px; }
.sb-spot__flag { flex: none; }
.sb-spot__flag.pop { animation: sb-pop .5s cubic-bezier(.3,1.5,.6,1); }
.sb-spot__img { display: block; width: 84px; height: 56px; border-radius: 12px; object-fit: cover; box-shadow: 0 14px 30px -12px rgba(0,0,0,.8), 0 0 0 2px rgba(255,255,255,.18); }
.sb-spot__img.is-ph { background: linear-gradient(135deg, var(--t-primary), var(--t-secondary)); }
.sb-spot__label { display: block; font-weight: 700; font-size: .85rem; color: color-mix(in srgb, #fff 70%, transparent); letter-spacing: .01em; }
.sb-spot__text { min-width: 0; }
.sb-spot__name { display: block; font: 800 clamp(1.05rem, 2vw, 1.45rem)/1.15 var(--t-font-heading); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-spot__given { grid-area: given; display: flex; flex-wrap: wrap; gap: 6px; min-height: 0; }
.sb-spot__given:empty { display: none; }
.sb-spot__note { grid-area: note; margin: 0; font-weight: 700; color: var(--t-sb-highlight); min-height: 0; }
.sb-spot__note:empty { display: none; }
.sb-spot__progress { grid-area: prog; height: 4px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; }
.sb-spot__progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--t-jury), var(--t-tele)); transition: width .6s ease; }
.sb-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px; background: rgba(255,255,255,.08); font-size: .8rem; font-weight: 700; animation: sb-in .3s ease; }
.sb-chip b { min-width: 26px; height: 22px; display: grid; place-items: center; border-radius: 999px; background: var(--t-jury); color: var(--t-on-jury); font: 800 .75rem/1 var(--t-font-heading); }
.sb-chip--top b { background: var(--t-sb-highlight); color: #1b1300; }
.sb-chip__flag { width: 20px; height: 14px; border-radius: 3px; object-fit: cover; }

/* board */
.sb__boardwrap { position: relative; min-width: 0; }
.sb__board { position: relative; }
.sb-row {
  position: absolute; left: 0; top: 0; height: var(--row-h, 44px);
  display: grid; grid-template-columns: 30px auto 1fr auto auto; align-items: center; gap: 10px; padding: 0 6px 0 6px;
  border-radius: 12px; color: var(--t-sb-text);
  background: linear-gradient(90deg, color-mix(in srgb, var(--t-sb-row) 94%, #fff 6%), color-mix(in srgb, var(--t-sb-row) 82%, transparent));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 6px 18px -12px rgba(0,0,0,.7);
  transition: transform 1s cubic-bezier(.65,.05,.25,1), box-shadow .3s, opacity .3s, filter .3s; will-change: transform;
}
.sb-row__rank { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--t-sb-text) 14%, transparent); font: 800 .78rem/1 var(--t-font-heading); color: var(--t-sb-text); }
.sb-row__flag { width: calc(var(--row-h, 44px) * .9); height: calc(var(--row-h, 44px) * .6); max-width: 56px; max-height: 38px; border-radius: 6px; object-fit: cover; box-shadow: 0 0 0 1px rgba(255,255,255,.15); }
.sb-row__flag.is-ph { background: var(--t-primary); }
.sb-row__name { font-weight: 800; font-size: clamp(.86rem, calc(var(--row-h, 44px) * .36), 1.35rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-row__got { min-width: 0; height: calc(var(--row-h, 44px) * .68); padding: 0; border-radius: 8px; display: grid; place-items: center; font: 800 .92rem/1 var(--t-font-heading); transform: scale(0); transition: transform .3s cubic-bezier(.3,1.6,.6,1); }
.sb-row__got.is-on { min-width: 40px; padding: 0 8px; transform: scale(1); }
.sb-row__got--jury { background: var(--t-jury); color: var(--t-on-jury); }
.sb-row__got--tele { background: var(--t-tele); color: var(--t-on-tele); min-width: 56px; }
.sb-row__got.is-top { background: var(--t-sb-highlight); color: #1b1300; box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-sb-highlight) 35%, transparent), 0 0 24px var(--t-sb-highlight); }
.sb-row__total { min-width: 54px; height: calc(var(--row-h, 44px) * .74); padding: 0 10px; display: grid; place-items: center; border-radius: 9px; background: #120b2e; color: #fff; font: 800 clamp(.95rem, calc(var(--row-h, 44px) * .38), 1.5rem)/1 var(--t-font-heading); font-variant-numeric: tabular-nums; }
.sb-row.is-leader .sb-row__total { background: var(--t-sb-highlight); color: #1b1300; }
.sb-row.is-leader { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t-sb-highlight) 60%, transparent), 0 10px 30px -14px var(--t-sb-highlight); }
.sb-row.is-voter { opacity: .35; filter: grayscale(.6); }
.sb-row.is-twelve { animation: sb-glow 1.4s ease 2; }
.sb-row.awaiting-tele { opacity: .72; }
.sb-row.is-tele-done { opacity: 1; }
.sb-row.is-waiting { opacity: 1; z-index: 2; box-shadow: 0 0 0 3px var(--t-sb-waiting), 0 0 34px -2px var(--t-sb-waiting); animation: sb-wait 1.2s ease-in-out infinite; }
.sb-row.is-current { z-index: 2; box-shadow: 0 0 0 3px var(--t-tele), 0 0 30px -4px var(--t-tele); }
.sb-row.is-winner { box-shadow: 0 0 0 3px var(--t-sb-highlight), 0 0 50px -2px var(--t-sb-highlight); }
@keyframes sb-wait { 50% { box-shadow: 0 0 0 5px var(--t-sb-waiting), 0 0 46px 2px var(--t-sb-waiting); } }
@keyframes sb-glow { 50% { box-shadow: 0 0 0 3px var(--t-sb-highlight), 0 0 40px var(--t-sb-highlight); } }
@keyframes sb-in { from { opacity: 0; transform: scale(.85); } }
@keyframes sb-pop { from { transform: scale(.6) rotate(-6deg); opacity: 0; } }

/* the "12 points" moment */
.sb-twelve { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--t-sb-highlight) 30%, var(--sb-ink)) 0%, color-mix(in srgb, var(--sb-ink) 96%, transparent) 60%); backdrop-filter: blur(6px); animation: sb-fade .3s ease; }
.sb-twelve.out { animation: sb-out .45s ease forwards; }
.sb-twelve__rays { position: absolute; width: 220vmax; height: 220vmax; left: 50%; top: 50%; translate: -50% -50%; opacity: .22;
  background: repeating-conic-gradient(from 0deg, var(--t-sb-highlight) 0deg 6deg, transparent 6deg 18deg);
  mask: radial-gradient(circle, #000 0, transparent 40%); -webkit-mask: radial-gradient(circle, #000 0, transparent 40%); animation: sb-spin 8s linear infinite; }
.sb-twelve__card { position: relative; display: grid; justify-items: center; text-align: center; gap: 2px; }
.sb-twelve__from { font-weight: 800; font-size: clamp(.9rem, 2vw, 1.2rem); color: rgba(255,255,255,.85); animation: sb-up .5s .1s both; }
.sb-twelve__num { display: grid; place-items: center; width: clamp(130px, 22vw, 230px); aspect-ratio: 1; margin: 10px 0 6px; border-radius: 28%;
  background: linear-gradient(140deg, #fff3c4, var(--t-sb-highlight) 45%, color-mix(in srgb, var(--t-sb-highlight) 60%, #ff6a00));
  color: #2a1300; font: 900 clamp(4rem, 11vw, 7.5rem)/1 var(--t-font-heading); letter-spacing: -.04em;
  box-shadow: 0 30px 80px -20px var(--t-sb-highlight), inset 0 -10px 30px rgba(0,0,0,.15);
  animation: sb-slam .75s cubic-bezier(.2,1.6,.5,1) both, sb-shine 2.2s .8s ease infinite; }
.sb-twelve__pts { font-weight: 800; color: rgba(255,255,255,.75); animation: sb-up .5s .5s both; }
.sb-twelve__to { display: flex; align-items: center; gap: 14px; margin-top: 10px; font: 800 clamp(1.6rem, 4vw, 2.8rem)/1 var(--t-font-heading); animation: sb-up .55s .7s both; }
.sb-twelve__flag { width: clamp(64px, 8vw, 96px); height: clamp(43px, 5.3vw, 64px); border-radius: 10px; object-fit: cover; box-shadow: 0 0 0 3px #fff; }
@keyframes sb-spin { to { rotate: 360deg; } }
@keyframes sb-slam { 0% { transform: scale(3) rotate(-14deg); opacity: 0; } 60% { transform: scale(.92) rotate(3deg); opacity: 1; } 100% { transform: scale(1) rotate(-4deg); } }
@keyframes sb-shine { 50% { filter: brightness(1.18); } }
@keyframes sb-up { from { opacity: 0; transform: translateY(18px); } }
@keyframes sb-fade { from { opacity: 0; } }
@keyframes sb-out { to { opacity: 0; transform: scale(1.08); } }

/* final duel */
.sb-duel { position: absolute; inset: 0; z-index: 7; display: grid; align-content: center; justify-items: center; gap: 18px; padding: 4%;
  background: linear-gradient(90deg, color-mix(in srgb, var(--t-sb-highlight) 18%, var(--sb-ink)) 0 50%, color-mix(in srgb, var(--t-sb-waiting) 22%, var(--sb-ink)) 50% 100%); animation: sb-fade .4s ease; text-align: center; }
.sb-duel__head { font: 800 clamp(1rem, 2.2vw, 1.4rem)/1.2 var(--t-font-heading); color: rgba(255,255,255,.8); }
.sb-duel__sides { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 4%; }
.sb-duel__side { display: grid; justify-items: center; gap: 6px; animation: sb-up .6s both; }
.sb-duel__side--chal { animation-delay: .25s; }
.sb-duel__flag { width: clamp(90px, 14vw, 170px); aspect-ratio: 3 / 2; height: auto; border-radius: 14px; object-fit: cover; box-shadow: 0 20px 50px -20px rgba(0,0,0,.9), 0 0 0 3px rgba(255,255,255,.2); }
.sb-duel__side--leader .sb-duel__flag { box-shadow: 0 0 0 4px var(--t-sb-highlight), 0 20px 50px -18px var(--t-sb-highlight); }
.sb-duel__side--chal .sb-duel__flag { box-shadow: 0 0 0 4px var(--t-sb-waiting), 0 20px 50px -18px var(--t-sb-waiting); animation: sb-wait 1.2s ease-in-out infinite; }
.sb-duel__tag { font-size: .8rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.12); }
.sb-duel__side strong { font: 800 clamp(1.4rem, 3.6vw, 2.6rem)/1.05 var(--t-font-heading); }
.sb-duel__pts { font: 800 clamp(1.2rem, 2.6vw, 1.9rem)/1 var(--t-font-heading); color: var(--t-sb-highlight); }
.sb-duel__vs { font: 900 clamp(1.4rem, 3vw, 2.4rem)/1 var(--t-font-heading); color: rgba(255,255,255,.5); }
.sb-duel__need { margin: 0; font-size: clamp(1rem, 2.2vw, 1.35rem); font-weight: 700; }
.sb-duel__need b { color: var(--t-sb-waiting); font-family: var(--t-font-heading); font-size: 1.3em; }
.sb-duel__bar { position: relative; width: min(820px, 92%); height: 26px; border-radius: 999px; background: rgba(255,255,255,.12); box-shadow: inset 0 2px 6px rgba(0,0,0,.4); }
.sb-duel__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--t-tele), color-mix(in srgb, var(--t-tele) 50%, #fff)); box-shadow: 0 0 24px var(--t-tele); }
.sb-duel__marker { position: absolute; top: -12px; bottom: -12px; width: 4px; margin-left: -2px; border-radius: 4px; background: var(--t-sb-highlight); box-shadow: 0 0 16px var(--t-sb-highlight); }
.sb-duel__marker em { position: absolute; top: -26px; left: 50%; translate: -50% 0; white-space: nowrap; font-style: normal; font-weight: 800; font-size: .8rem; color: var(--t-sb-highlight); }
.sb-duel.crossed .sb-duel__fill { background: linear-gradient(90deg, var(--t-tele), var(--t-sb-highlight)); }
.sb-duel__count { font: 900 clamp(2.4rem, 6vw, 4rem)/1 var(--t-font-heading); font-variant-numeric: tabular-nums; }
.sb-duel__verdict { margin: 0; min-height: 1.4em; font: 900 clamp(1.6rem, 4vw, 2.8rem)/1 var(--t-font-heading); color: var(--t-sb-highlight); }
.sb-duel.done .sb-duel__verdict { animation: sb-slam .7s cubic-bezier(.2,1.6,.5,1); }
.sb-duel.leader-wins .sb-duel__side--chal, .sb-duel.chal-wins .sb-duel__side--leader { opacity: .35; filter: grayscale(.7); transition: .6s; }

/* winner */
.sb-winner { position: absolute; inset: 0; z-index: 9; display: grid; place-items: center; background: color-mix(in srgb, var(--sb-ink) 72%, transparent); backdrop-filter: blur(6px); }
.sb-winner__card { text-align: center; animation: sb-slam .8s cubic-bezier(.2,1.5,.5,1); }
.sb-winner__flag { width: clamp(140px, 18vw, 220px); aspect-ratio: 3 / 2; height: auto; object-fit: cover; border-radius: 18px; box-shadow: 0 0 0 4px var(--t-sb-highlight), 0 30px 80px -20px var(--t-sb-highlight); }
.sb-winner small { display: block; margin-top: 20px; color: rgba(255,255,255,.7); font-weight: 700; }
.sb-winner h2 { font-size: clamp(2.6rem, 8vw, 5.4rem); margin: 4px 0; color: #fff; }
.sb-winner p { font: 800 1.7rem/1 var(--t-font-heading); color: var(--t-sb-highlight); margin-bottom: 22px; }
.sb__confetti { position: absolute; inset: 0; pointer-events: none; z-index: 10; }

/* custom selection */
.sb-pick { padding: 18px; border-radius: var(--t-radius); background: var(--t-surface-strong); border: 1px solid var(--t-border); }
.sb-pick__intro { margin-top: 0; }
.sb-pick__grid { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); max-height: 300px; overflow: auto; margin-bottom: 14px; }
.sb-pick__item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; background: var(--t-surface); cursor: pointer; font-weight: 600; }
.sb-pick__flag { width: 26px; height: 18px; border-radius: 3px; object-fit: cover; }

/* ---------- full screen: two-column broadcast layout ---------- */
.sb__stage.is-fs { border-radius: 0; height: 100vh; padding: 3vh 2.6vw; grid-template-columns: clamp(300px, 27vw, 520px) 1fr; gap: 2.4vw; align-items: stretch; }
.sb__stage.is-fs .sb-spot { grid-template-columns: 1fr; grid-template-areas: "brand" "main" "given" "note" "prog"; align-content: start; align-items: start; gap: 2.4vh;
  padding: 3vh 2vw; border-radius: 24px; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.1); }
.sb__stage.is-fs .sb-spot__brand { grid-area: brand; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sb-spot__title { font: 800 clamp(.9rem, 1.2vw, 1.2rem)/1.2 var(--t-font-heading); color: rgba(255,255,255,.85); }
.sb-spot__mark { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: var(--t-sb-highlight); color: #1b1300; font: 900 1.1rem/1 var(--t-font-heading); rotate: -6deg; }
.sb__stage.is-fs .sb-spot__main { flex-direction: row; align-items: center; gap: 14px; }
.sb__stage.is-fs .sb-spot__img { width: clamp(70px, 6vw, 120px); height: auto; aspect-ratio: 3 / 2; border-radius: 12px; }
.sb__stage.is-fs .sb-spot__name { font-size: clamp(1.1rem, 1.6vw, 1.7rem); white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sb__stage.is-fs .sb-spot__label { font-size: clamp(.9rem, 1.1vw, 1.15rem); }
.sb__stage.is-fs .sb-spot { overflow: hidden; }
.sb__stage.is-fs .sb-spot__given { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sb__stage.is-fs .sb-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sb__stage.is-fs .sb-chip--top { grid-column: 1 / -1; }
.sb__stage.is-fs .sb-chip { font-size: clamp(.85rem, 1vw, 1.05rem); padding: 4px 12px 4px 4px; }
.sb__stage.is-fs .sb-chip b { min-width: 34px; height: 28px; font-size: .9rem; }
.sb__stage.is-fs .sb-chip__flag { width: 28px; height: 19px; }
.sb__stage.is-fs .sb-spot__note { font-size: clamp(1rem, 1.3vw, 1.4rem); }
.sb__stage.is-fs .sb-spot__progress { margin-top: auto; }
.sb__stage.is-fs .sb__boardwrap { height: calc(100vh - 6vh); }
.sb__stage.is-fs .sb-row { border-radius: 14px; gap: 14px; padding: 0 10px; grid-template-columns: 36px auto 1fr auto auto; }
.sb__stage.is-fs .sb-row__rank { width: 32px; height: 32px; font-size: .9rem; }

@media (max-width: 680px) {
  .sb-row { grid-template-columns: 24px auto 1fr auto auto; gap: 6px; }
  .sb-spot__img { width: 64px; height: 43px; }
  .sb-duel__sides { grid-template-columns: 1fr; }
  .sb-duel__vs { display: none; }
}
@media (prefers-reduced-motion: reduce) { .sb-row { transition-duration: .01ms; } .sb-twelve__rays { animation: none; } }

.sb__controls--float { position: absolute; left: 50%; bottom: 2vh; translate: -50% 0; z-index: 20; padding: 8px; border-radius: 999px; background: rgba(0,0,0,.55); backdrop-filter: blur(10px); opacity: 0; transition: opacity .3s; }
.sb__stage.show-controls .sb__controls--float, .sb__controls--float:hover, .sb__controls--float:focus-within { opacity: 1; }
.sb__controls--float .sb__sep { flex: 0 0 8px; }

/* ---- duels (split bar) ---- */
.sb-duel__bar--split { display: flex; justify-content: space-between; }
.sb-duel__bar--split .sb-duel__fill { position: relative; flex: none; }
.sb-duel__bar--split .sb-duel__fill--b { background: linear-gradient(270deg, var(--t-jury), color-mix(in srgb, var(--t-jury) 50%, #fff)); box-shadow: 0 0 24px var(--t-jury); }
.sb-duel.done.leader-wins .sb-duel__side--chal, .sb-duel.done.chal-wins .sb-duel__side--leader { opacity: .45; filter: grayscale(.7); transition: opacity .6s, filter .6s; }

/* ---- qualifiers ---- */
.sb-row.is-qualified { box-shadow: inset 0 0 0 2px var(--t-sb-highlight); }
.sb-row.is-qualified::after { content: attr(data-q); position: absolute; right: -6px; top: -7px; font-size: 10px; font-weight: 800; letter-spacing: .04em; padding: 2px 6px; border-radius: 999px; background: var(--t-sb-highlight); color: #111; }
.sb-winner__card--q { max-width: min(720px, 92%); }
.sb-qlist { list-style: none; margin: 14px 0 18px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; text-align: left; }
.sb-qlist li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,.08); opacity: 0; animation: sb-qin .5s forwards; }
.sb-qlist em { margin-left: auto; font-size: 11px; font-style: normal; color: var(--t-sb-highlight); }
.sb-qlist__flag { width: 34px; height: 24px; object-fit: cover; border-radius: 4px; }
@keyframes sb-qin { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes sb-qin { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }

/* ---- extra controls ---- */
.sb-volwrap { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; min-height: 40px; border-radius: 999px; border: 1px solid var(--t-border); background: var(--t-surface); }
.sb-vol { width: 90px; accent-color: var(--t-primary); }
.sb-btn.is-on { background: var(--t-text); color: var(--t-bg1); }
.sb-modes { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-bottom: 14px; }

/* ---- spokesperson ---- */
.sb-speech { grid-area: given; display: flex; align-items: center; gap: 14px; padding: 10px 16px 10px 10px; border-radius: 18px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); }
.sb-speech.in { animation: sb-speech .5s cubic-bezier(.3,1.5,.6,1); }
.sb-speech__img { flex: none; width: 74px; height: 74px; border-radius: 16px; object-fit: cover; box-shadow: 0 10px 24px -10px rgba(0,0,0,.8); }
.sb-speech__text { margin: 0; font: 600 clamp(.95rem, 1.4vw, 1.15rem)/1.35 var(--t-font-body); font-style: italic; }
@keyframes sb-speech { from { opacity: 0; transform: translateY(8px) scale(.97); } }
.sb__stage.is-fs .sb-speech { flex-direction: column; align-items: flex-start; }
.sb__stage.is-fs .sb-speech__img { width: clamp(120px, 12vw, 220px); height: auto; aspect-ratio: 1; border-radius: 22px; }
.sb-twelve__spoke { width: 86px; height: 86px; border-radius: 20px; object-fit: cover; margin: 0 auto 6px; display: block; box-shadow: 0 0 0 3px var(--t-sb-highlight); }

/* ---- directly qualified (final) ---- */
.sb-row.is-preq .sb-row__name::after { content: " · Q"; color: var(--t-sb-highlight); font-size: .8em; }

/* ---- high contrast ---- */
.sb--hc .sb__stage { background: #000; }
.sb--hc .sb-row { background: #fff; color: #000; box-shadow: none; }
.sb--hc .sb-row__rank { background: #000; color: #fff; }
.sb--hc .sb-row__total { background: #000; color: #fff; }
.sb--hc .sb-row__got--jury { background: #ffd400; color: #000; }
.sb--hc .sb-row__got--tele { background: #00a2ff; color: #000; }
.sb--hc .sb-row.is-leader .sb-row__total { background: #ffd400; color: #000; }
.sb--hc .sb-row.is-waiting { box-shadow: 0 0 0 4px #ff00a8; }
.sb--hc .sb-row.is-voter { opacity: .5; }

/* ---- Shorts: vertical 9:16, one column ---- */
.sb--shorts .sb__stage { aspect-ratio: 9 / 16; width: min(100%, calc(86vh * 9 / 16)); min-height: 0; margin: 0 auto; grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; gap: 10px; padding: 14px 12px; }
.sb--shorts .sb__stage.is-fs { width: auto; height: 100vh; aspect-ratio: 9 / 16; margin: 0 auto; grid-template-columns: 1fr; padding: 2.4vh 1.6vh; }
.sb-shorts-head { display: flex; align-items: center; gap: 10px; }
.sb-shorts-head strong { font: 800 clamp(.9rem, 2.2vh, 1.3rem)/1.15 var(--t-font-heading); }
.sb-shorts-head .sb-spot__mark { width: 34px; height: 34px; border-radius: 10px; font-size: .9rem; }
.sb--shorts .sb-spot, .sb--shorts .sb__stage.is-fs .sb-spot { grid-template-columns: 1fr; grid-template-areas: "main" "given" "note" "prog"; gap: 6px; padding: 10px; border-radius: 16px; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.1); }
.sb--shorts .sb-spot__brand { display: none !important; }
.sb--shorts .sb-spot__main { min-height: 0; gap: 10px; }
.sb--shorts .sb-spot__img, .sb--shorts .sb__stage.is-fs .sb-spot__img { width: clamp(44px, 6vh, 70px); height: auto; aspect-ratio: 3 / 2; border-radius: 8px; }
.sb--shorts .sb-spot__name { font-size: clamp(.95rem, 2.1vh, 1.3rem); white-space: nowrap; display: block; }
.sb--shorts .sb-spot__label { font-size: clamp(.7rem, 1.4vh, .9rem); }
.sb--shorts .sb-spot__given, .sb--shorts .sb__stage.is-fs .sb-spot__given { display: flex; flex-wrap: wrap; gap: 4px; }
.sb--shorts .sb-chip, .sb--shorts .sb__stage.is-fs .sb-chip { font-size: clamp(.62rem, 1.2vh, .8rem); padding: 2px 8px 2px 2px; }
.sb--shorts .sb-chip b, .sb--shorts .sb__stage.is-fs .sb-chip b { min-width: 20px; height: 18px; font-size: .68rem; }
.sb--shorts .sb-speech { padding: 6px; gap: 8px; flex-direction: row !important; }
.sb--shorts .sb-speech__img, .sb--shorts .sb__stage.is-fs .sb-speech__img { width: clamp(40px, 6vh, 64px); height: auto; border-radius: 10px; }
.sb--shorts .sb-speech__text { font-size: clamp(.7rem, 1.5vh, .95rem); }
.sb--shorts .sb__boardwrap, .sb--shorts .sb__stage.is-fs .sb__boardwrap { height: auto; min-height: 0; }
.sb--shorts .sb-row { grid-template-columns: 22px auto 1fr auto auto; gap: 6px; border-radius: 8px; }
.sb--shorts .sb-row__rank { width: 20px; height: 20px; font-size: .62rem; }
.sb--shorts .sb-row__name { font-size: clamp(.62rem, calc(var(--row-h, 30px) * .42), 1rem); }
.sb--shorts .sb-row__total { min-width: 40px; font-size: clamp(.68rem, calc(var(--row-h, 30px) * .44), 1.1rem); padding: 0 6px; border-radius: 6px; }
.sb--shorts .sb-row__got.is-on { min-width: 28px; padding: 0 4px; font-size: .72rem; }
.sb--shorts .sb-twelve__num { font-size: clamp(5rem, 22vh, 12rem); }
.sb--shorts .sb-duel__sides { grid-template-columns: 1fr; }
.sb--shorts .sb-duel__vs { display: none; }
.sb--shorts .sb-winner h2 { font-size: clamp(2rem, 6vh, 3.4rem); }

/* ---- silent semi-final board (one of three) ---- */
.sbs-stage { display: grid; grid-template-rows: auto 1fr; }
.sbs-head { display: flex; align-items: center; gap: 14px; }
.sbs-head small { display: block; color: rgba(255,255,255,.7); font-weight: 700; }
.sbs-head strong { font: 800 clamp(1.2rem, 2.4vw, 2rem)/1.1 var(--t-font-heading); }
.sbs-count { margin-left: auto; font: 800 1.2rem/1 var(--t-font-heading); padding: 10px 16px; border-radius: 14px; background: rgba(255,255,255,.1); }
.sbs-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); align-content: start; }
.sbs-card { position: relative; display: grid; justify-items: center; gap: 6px; padding: 12px 8px; border-radius: 16px; background: color-mix(in srgb, var(--t-sb-row) 80%, transparent); color: var(--t-sb-text); text-align: center; transition: transform .4s, opacity .4s, box-shadow .4s, filter .4s; }
.sbs-card__flag { width: 64px; height: 43px; object-fit: cover; border-radius: 8px; }
.sbs-card__name { font-weight: 800; font-size: .92rem; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sbs-card__tag { position: absolute; top: -8px; right: -6px; font: 800 .7rem/1 var(--t-font-heading); padding: 4px 8px; border-radius: 999px; background: var(--t-sb-highlight); color: #111; }
.sbs-card__tag:empty { display: none; }
.sbs-card.is-picked { transform: scale(1.06); box-shadow: 0 0 0 3px var(--t-sb-waiting); }
.sbs-card.is-q { box-shadow: 0 0 0 3px var(--t-sb-highlight), 0 0 30px -6px var(--t-sb-highlight); }
.sbs-card.is-out { opacity: .3; filter: grayscale(1); }
.sbs-trio { position: absolute; inset: 0; z-index: 8; display: grid; place-content: center; grid-auto-flow: column; gap: clamp(12px, 3vw, 40px); padding: 20px; background: radial-gradient(60% 60% at 50% 50%, rgba(0,0,0,.55), rgba(0,0,0,.85)); animation: sb-in .4s ease; }
.sbs-trio.out { animation: sb-out .35s ease forwards; }
.sbs-trio__q { position: absolute; top: 8%; left: 0; right: 0; text-align: center; margin: 0; font: 800 clamp(1.1rem, 2.6vw, 2.2rem)/1.2 var(--t-font-heading); color: #fff; }
.sbs-big { position: relative; display: grid; justify-items: center; gap: 12px; width: clamp(130px, 20vw, 280px); padding: clamp(14px, 2vw, 26px); border-radius: 26px; background: color-mix(in srgb, var(--t-sb-row) 85%, #000); color: var(--t-sb-text); box-shadow: 0 0 0 2px rgba(255,255,255,.15), 0 30px 60px -30px #000; animation: sbs-pulse 1s ease-in-out infinite; transition: transform .6s, opacity .6s, filter .6s; }
.sbs-big__flag { width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; border-radius: 14px; }
.sbs-big strong { font: 800 clamp(.95rem, 1.6vw, 1.4rem)/1.15 var(--t-font-heading); text-align: center; }
.sbs-big.is-out { opacity: .2; filter: grayscale(1); transform: scale(.88); animation: none; }
.sbs-big.is-in { transform: scale(1.12); animation: none; box-shadow: 0 0 0 4px var(--t-sb-highlight), 0 0 70px -6px var(--t-sb-highlight); }
.sbs-big__tag { position: absolute; bottom: -14px; padding: 8px 16px; border-radius: 999px; background: var(--t-sb-highlight); color: #111; font: 900 .95rem/1 var(--t-font-heading); animation: sb-slam .6s cubic-bezier(.2,1.5,.5,1); }
@keyframes sbs-pulse { 50% { transform: translateY(-4px); } }
@keyframes sb-out { to { opacity: 0; } }
.sb--shorts .sbs-trio { grid-auto-flow: row; }
.sb--shorts .sbs-big { width: clamp(110px, 26vh, 200px); grid-template-columns: auto 1fr; justify-items: start; align-items: center; }
.sb--shorts .sbs-big__flag { width: 64px; }
.sb--shorts .sbs-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sb--shorts .sbs-card__flag { width: 44px; height: 30px; }
.sb--shorts .sbs-card__name { font-size: .7rem; }

/* ---- bar chart race ---- */
.race { display: grid; gap: 12px; }
.race__frame { border-radius: calc(var(--t-radius) + 6px); overflow: hidden; background: #000; box-shadow: 0 30px 70px -40px #000; }
.race__canvas { display: block; width: 100%; height: auto; }
.race--vertical .race__frame { width: min(100%, calc(80vh * 9 / 16)); margin: 0 auto; }

/* ---- final duel tension ---- */
.sb-duel.is-rolling .sb-duel__bar { animation: sb-shake .18s linear infinite; }
.sb-duel.is-close .sb-duel__marker { animation: sb-pulse-mark .5s ease-in-out infinite; }
.sb-duel.is-close .sb-duel__count { color: var(--t-sb-waiting); transform: scale(1.12); transition: transform .3s; }
@keyframes sb-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-1.5px); } 75% { transform: translateX(1.5px); } }
@keyframes sb-pulse-mark { 50% { box-shadow: 0 0 26px 4px var(--t-sb-waiting); transform: scaleX(1.8); } }
.sb-select { width: auto; min-height: 40px; padding: 0 34px 0 14px; border-radius: 999px; border: 1px solid var(--t-border); background-color: var(--t-surface); color: var(--t-text); font: 700 .88rem/1 var(--t-font-body); }
.sb__controls--float .sb-select { background-color: rgba(0,0,0,.5); color: #fff; }
.sb-duel__need { margin-bottom: 26px; }