/* Savage Hellions — wow scoreboard themes (public/js/wow.js). Only colours, shadows and transforms: no sizes,
   so the AA size control, video / camera layouts and stageNeed() measuring are unchanged. Motion needs body.wow-fx. */

/* ===== shared ===== */
.wow-on #screen-game .dm-board { position: relative; isolation: isolate; }
.wow-on #screen-game .dm-board .pcard, .wow-on #screen-game .dm-board .cboard th { position: relative; }
.wow-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 9001; }
.wow-fx .pcard .rem.wow-roll .wow-dg { display: inline-block; animation: wowRoll .55s cubic-bezier(.2,.9,.25,1.25) both; }
@keyframes wowRoll { 0% { transform: translateY(-70%) rotateX(80deg); opacity: 0; filter: blur(3px); } 100% { transform: none; opacity: 1; filter: none; } }
.wow-fx #game-board.wow-shake { animation: wowShake .5s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes wowShake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-8px); } 40%, 60% { transform: translateX(8px); } }
.wow-fx .dm-board td.wow-mark > span { display: inline-block; animation: wowMark .45s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes wowMark { 0% { transform: scale(2.4) rotate(-25deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
.wow-fx .dm-board td.wow-closed { animation: wowClosed .9s ease-out both; }
@keyframes wowClosed { 0% { box-shadow: inset 0 0 0 0 rgba(255,255,255,.9); } 40% { box-shadow: inset 0 0 0 3px #fff, 0 0 24px 6px var(--wow-glow, #ff2a3d); } 100% { box-shadow: inset 0 0 0 0 transparent; } }

/* big moments overlay */
.wow-moment { position: fixed; inset: 0; z-index: 9000; pointer-events: none; display: flex; align-items: center; justify-content: center; }
.wow-moment .wm-box { text-align: center; animation: wmIn .5s cubic-bezier(.2,1.4,.3,1) both; }
.wow-moment.out { opacity: 0; transition: opacity .35s; }
.wow-moment .wm-big { font-size: clamp(84px, 30vw, 170px); font-weight: 900; font-style: italic; line-height: .9; letter-spacing: -2px; color: #fff;
  text-shadow: 0 6px 0 #000, 0 0 30px var(--wm-c, #ff2a3d), 0 0 70px var(--wm-c, #ff2a3d); -webkit-text-stroke: 2px rgba(0,0,0,.35); }
.wow-moment .wm-small { margin-top: 10px; font-size: clamp(18px, 5.5vw, 28px); font-weight: 900; letter-spacing: .14em; color: #fff; text-shadow: 0 2px 8px #000;
  display: inline-block; padding: 6px 16px; background: var(--wm-c, #c8102e); transform: skewX(-10deg); }
.wow-moment .wm-ring { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; border: 6px solid var(--wm-c, #ff2a3d); opacity: 0; animation: wmRing .9s ease-out both; }
.wow-moment .wm-ring.r2 { animation-delay: .18s; border-color: #fff; }
.wow-moment.m-180 { --wm-c: #ffb703; background: radial-gradient(circle at 50% 50%, rgba(255,183,3,.28), transparent 60%); }
.wow-moment.m-ton { --wm-c: #4330ee; }
.wow-moment.m-bust { --wm-c: #e11d48; background: rgba(120,0,20,.25); }
.wow-moment.m-bust .wm-big { font-size: clamp(70px, 24vw, 130px); }
.wow-moment.m-gameshot { --wm-c: #e3b11c; background: radial-gradient(circle at 50% 50%, rgba(227,177,28,.22), transparent 65%); }
.wow-moment .wm-slow { display: inline-block; animation: wmSlow 1.9s cubic-bezier(.1,.6,.2,1) both; }
@keyframes wmIn { 0% { transform: scale(.3) rotateX(70deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes wmRing { 0% { transform: scale(.2); opacity: .95; } 100% { transform: scale(5); opacity: 0; } }
@keyframes wmSlow { 0% { transform: scale(.6); letter-spacing: -8px; } 100% { transform: scale(1.12); letter-spacing: 2px; } }

/* winner hero (match-over modal) */
.wow-win { margin: -6px -6px 14px; padding: 18px 12px 16px; border-radius: 18px; text-align: center; color: #fff; position: relative; overflow: hidden;
  background: linear-gradient(160deg, #120b4f, #12081f 60%, #3a0710); box-shadow: inset 0 0 0 2px rgba(255,255,255,.18), 0 10px 30px rgba(0,0,0,.5); }
.wow-win .ww-k { font-size: 12px; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; color: #ffd166; }
.wow-win .ww-name { font-size: clamp(30px, 10vw, 46px); font-weight: 900; font-style: italic; line-height: 1.05; margin-top: 4px; text-shadow: 0 0 22px rgba(255,42,61,.8); overflow-wrap: anywhere; }
.wow-win .ww-legs { font-size: 22px; font-weight: 800; opacity: .85; margin-top: 2px; }
.wow-win .ww-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 12px; }
.wow-win .ww-stats div { background: rgba(255,255,255,.07); border-radius: 10px; padding: 8px 2px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.wow-win .ww-stats b { display: block; font-size: 20px; font-variant-numeric: tabular-nums; }
.wow-win .ww-stats span { display: block; font-size: 10.5px; color: #cfcafb; text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }
.wow-on .modal-card:has(.wow-win) .trophy { display: none; }
.wow-on .wow-again { font-size: 20px; background: linear-gradient(90deg, #c8102e, #e11d48); box-shadow: 0 0 0 2px #fff, 0 0 24px rgba(200,16,46,.7); }
.wow-fx .wow-win::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.18) 50%, transparent 65%); animation: wowSweep 2.8s ease-in-out infinite; }
.wow-fx .wow-again { animation: wowPulse 1.6s ease-in-out infinite; }
@keyframes wowPulse { 50% { box-shadow: 0 0 0 2px #fff, 0 0 40px rgba(255,42,61,.95); } }
@keyframes wowSweep { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }

/* ===== A · ARENA: tilted glass panels, stadium spotlight, LED numbers ===== */
.wow-arena #screen-game { --dm-bg: #05050d; --dm-col: #100e26; --dm-row: #141230; --dm-row2: #1b173b; --dm-num: #0c0b20; --dm-red: #9b1022; --wow-glow: #ffd166;
  background: radial-gradient(120% 60% at 50% -10%, #211b55 0%, #080716 55%, #04040b 100%); }
.wow-arena #screen-game .dm-board { background: #070614; perspective: 900px; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 18px 40px rgba(0,0,0,.6); }
.wow-arena #screen-game .dm-board .players { background: #05040e; perspective: 900px; }
.wow-arena #screen-game .dm-board .pcard { background: linear-gradient(180deg, rgba(142,130,245,.16), rgba(255,255,255,.02) 45%, rgba(0,0,0,.25)), var(--dm-col);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 0 0 1px rgba(167,158,247,.18); transform: rotateX(11deg); transform-origin: 50% 100%; }
.wow-arena #screen-game .dm-board .pcard.active { background: linear-gradient(180deg, rgba(255,120,120,.35), rgba(255,255,255,.04) 45%, rgba(0,0,0,.3)), var(--dm-red);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 0 0 2px rgba(255,209,102,.75), 0 0 26px rgba(255,209,102,.35); transform: rotateX(0deg) translateZ(14px); }
.wow-arena #screen-game .dm-board .pcard .rem { color: #fff8e1; text-shadow: 0 0 2px #fff, 0 0 12px rgba(255,209,102,.85), 0 3px 0 rgba(0,0,0,.6); font-style: italic; }
.wow-arena #screen-game .dm-board .pcard .pname { color: #ffe08a; letter-spacing: .12em; }
.wow-arena #screen-game .dm-board .cboard th { background: linear-gradient(180deg, #1e1a47, #100e26); }
.wow-arena #screen-game .dm-board .cboard th.active { background: linear-gradient(180deg, #c8102e, #7a0c1a); box-shadow: inset 0 0 0 2px #ffd166; }
.wow-arena #screen-game .dm-board .cboard td { background: linear-gradient(180deg, #1a163b, #110f29); }
.wow-arena #screen-game .dm-board .cboard .mk3 { color: #ffd166; text-shadow: 0 0 10px rgba(255,209,102,.9); }
.wow-arena #screen-game .dm-board .cboard .mk2 { color: #fff; } .wow-arena #screen-game .dm-board .cboard .mk1 { color: #a197f7; }
.wow-fx.wow-arena #screen-game .dm-board::after { content: ''; position: absolute; inset: -20% -60%; pointer-events: none; z-index: 2;
  background: linear-gradient(100deg, transparent 42%, rgba(255,240,200,.16) 48%, rgba(255,255,255,.26) 50%, rgba(255,240,200,.16) 52%, transparent 58%);
  animation: wowSpot 7s ease-in-out infinite; will-change: transform; }
@keyframes wowSpot { 0% { transform: translateX(-45%) rotate(4deg); } 50% { transform: translateX(45%) rotate(-4deg); } 100% { transform: translateX(-45%) rotate(4deg); } }
.wow-fx.wow-arena #screen-game .dm-board .pcard.wow-enter { animation: wowLift .6s cubic-bezier(.2,1.3,.3,1) both; }
@keyframes wowLift { 0% { transform: rotateX(25deg) translateZ(-30px); } 100% { transform: rotateX(0) translateZ(14px); } }
.wow-arena .wow-moment.m-180 .wm-big { color: #fff8e1; }

/* ===== B · NEON HOLO: glass, neon red/white/blue edges, drifting particles, Savage Hellions Assist HUD ===== */
.wow-holo #screen-game { --dm-bg: #030616; --dm-col: #0f0c31; --dm-row: #120d40; --dm-row2: #17114d; --dm-num: #0c0a29; --dm-red: #3a0a24; --wow-glow: #5240f0;
  background: radial-gradient(90% 50% at 85% 0%, rgba(82,64,240,.18), transparent 60%), radial-gradient(90% 50% at 10% 100%, rgba(255,42,61,.16), transparent 60%), #030616; }
.wow-holo #screen-game .dm-board { background: rgba(11,9,37,.85); box-shadow: 0 0 0 1px rgba(82,64,240,.5), 0 0 24px rgba(82,64,240,.25); }
.wow-holo #screen-game .dm-board .players { background: transparent; gap: 6px; }
.wow-holo #screen-game .dm-board .pcard { background: linear-gradient(145deg, rgba(82,64,240,.14), rgba(167,139,250,.08) 40%, rgba(255,255,255,.03)), var(--dm-col);
  box-shadow: inset 0 0 0 1.5px rgba(163,153,247,.55), inset 0 0 18px rgba(82,64,240,.18); border-radius: 10px; }
.wow-holo #screen-game .dm-board .pcard.active { background: linear-gradient(145deg, rgba(255,42,61,.32), rgba(255,255,255,.05) 50%, rgba(82,64,240,.12)), var(--dm-red);
  box-shadow: inset 0 0 0 2px #ff2a3d, inset 0 0 22px rgba(255,42,61,.45), 0 0 18px rgba(255,42,61,.6), 0 0 0 1px #fff; }
.wow-holo #screen-game .dm-board .pcard .rem { background: linear-gradient(180deg, #ffffff 20%, #c9c4fa 60%, #8f84f5); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 8px rgba(82,64,240,.7)); }
.wow-holo #screen-game .dm-board .pcard.active .rem { background-image: linear-gradient(180deg, #fff 25%, #ffd1d6 65%, #ff6b7d); filter: drop-shadow(0 0 10px rgba(255,42,61,.9)); }
.wow-holo #screen-game .dm-board .pcard .pname { color: #e4e1fd; letter-spacing: .14em; }
.wow-holo #screen-game .dm-board .cboard th { background: rgba(15,12,49,.9); box-shadow: inset 0 -1px 0 rgba(82,64,240,.6); }
.wow-holo #screen-game .dm-board .cboard th.active { background: linear-gradient(180deg, rgba(255,42,61,.45), rgba(58,10,36,.9)); box-shadow: inset 0 0 0 2px #ff2a3d, 0 0 14px rgba(255,42,61,.6); }
.wow-holo #screen-game .dm-board .cboard td { background: rgba(18,13,64,.9); }
.wow-holo #screen-game .dm-board .cboard .mk3 { color: #5240f0; text-shadow: 0 0 10px #5240f0; } .wow-holo #screen-game .dm-board .cboard .mk2 { color: #fff; text-shadow: 0 0 6px #fff; } .wow-holo #screen-game .dm-board .cboard .mk1 { color: #ff6b7d; }
.wow-fx.wow-holo #screen-game .dm-board::before { content: ''; position: absolute; inset: -50% 0 0; pointer-events: none; z-index: 0; opacity: .55;
  background-image: radial-gradient(circle, rgba(163,153,247,.9) 0 1.2px, transparent 1.6px), radial-gradient(circle, rgba(255,107,125,.8) 0 1px, transparent 1.4px);
  background-size: 46px 46px, 71px 71px; background-position: 0 0, 23px 31px; animation: wowDrift 18s linear infinite; will-change: transform; }
.wow-holo #screen-game .dm-board > * { position: relative; z-index: 1; }
@keyframes wowDrift { to { transform: translateY(33.3%); } }
.wow-fx.wow-holo #screen-game .dm-board .pcard.active::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.22) 45%, rgba(82,64,240,.18) 55%, transparent 70%); animation: wowSheen 3.2s ease-in-out infinite; }
@keyframes wowSheen { 0% { transform: translateX(-80%); } 70%, 100% { transform: translateX(80%); } }
.wow-hud { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; overflow: hidden; border-radius: 12px; padding: 7px 10px; margin-bottom: 6px; font-weight: 800; font-size: 14px; color: #e4e1fd;
  background: linear-gradient(90deg, rgba(82,64,240,.16), rgba(15,12,49,.9) 40%, rgba(255,42,61,.14)); box-shadow: inset 0 0 0 1px rgba(82,64,240,.6), 0 0 14px rgba(82,64,240,.2); }
.wow-hud .hl { font-size: 10px; letter-spacing: .16em; color: #8f84f5; flex: none; }
.wow-hud .hr { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; font-size: 16px; text-shadow: 0 0 8px rgba(82,64,240,.8); }
.wow-hud .hs { flex: none; font-size: 13px; font-variant-numeric: tabular-nums; } .wow-hud .hs i { font-style: normal; font-size: 9.5px; color: #a399f7; margin-right: 3px; letter-spacing: .06em; }
#screen-game.big-vid .wow-hud { padding: 4px 8px; margin-bottom: 3px; font-size: 12px; } #screen-game.big-vid .wow-hud .hr { font-size: 13px; }
.wow-fx .wow-hud .hl { animation: wowBlink 2.4s steps(1) infinite; } @keyframes wowBlink { 50% { opacity: .45; } }

/* ===== C · BROADCAST: TV darts graphic, gold lower-thirds, sweeping turn change, 3D on-the-oche card ===== */
.wow-broadcast #screen-game { --dm-bg: #060512; --dm-col: #0e0c2f; --dm-row: #140f3e; --dm-row2: #18134a; --dm-num: #0c0a26; --dm-red: #0e0c2f; --wow-glow: #ffd700;
  background: linear-gradient(180deg, #0c0a28, #06050f); }
.wow-broadcast #screen-game .dm-board { background: #070619; perspective: 800px; box-shadow: 0 0 0 2px #ffd700, 0 12px 30px rgba(0,0,0,.6); }
.wow-broadcast #screen-game .dm-board .players { background: #070619; gap: 4px; perspective: 800px; }
.wow-broadcast #screen-game .dm-board .pcard { background: linear-gradient(180deg, #18134a, #0e0c2f 70%); box-shadow: inset 0 -5px 0 #311fd1; opacity: .82; }
.wow-broadcast #screen-game .dm-board .pcard.active { opacity: 1; background: linear-gradient(180deg, #261f63, #0e0c2f 70%);
  box-shadow: inset 0 -6px 0 #c8102e, inset 0 0 0 3px #ffd700, 0 0 28px rgba(255,215,0,.45); transform: translateZ(18px) rotateY(0); z-index: 2; }
.wow-broadcast #screen-game .dm-board .pcard.active::before { content: 'THROWING'; position: absolute; top: 4px; left: 6px; font-size: 9.5px; font-weight: 900; letter-spacing: .14em;
  color: #0e0c2f; background: #ffd700; padding: 1px 6px; transform: skewX(-12deg); }
#screen-game.big-vid .dm-board .pcard.active::before { display: none; }
.wow-broadcast #screen-game .dm-board .pcard .rem { color: #fff; font-style: italic; text-shadow: 3px 3px 0 #c8102e, 0 0 18px rgba(255,255,255,.25); }
.wow-broadcast #screen-game .dm-board .pcard .pname { color: #0e0c2f; background: #fff; box-shadow: 0 0 0 3px #fff, 6px 0 0 3px #c8102e; transform: skewX(-12deg); }
.wow-broadcast #screen-game .dm-board .pcard.active .pname { background: #ffd700; box-shadow: 0 0 0 3px #ffd700, 6px 0 0 3px #c8102e; }
.wow-broadcast #screen-game .dm-board .pcard .meta { color: #cfcafb; }
.wow-broadcast #screen-game .dm-board .cboard th { background: linear-gradient(180deg, #18134a, #0e0c2f); box-shadow: inset 0 -4px 0 #311fd1; }
.wow-broadcast #screen-game .dm-board .cboard th.active { background: linear-gradient(180deg, #261f63, #0e0c2f); box-shadow: inset 0 -4px 0 #c8102e, inset 0 0 0 2px #ffd700; }
.wow-broadcast #screen-game .dm-board .cboard td { background: #140f3e; }
.wow-broadcast #screen-game .dm-board .cboard td.num { background: #ffd700 !important; color: #0e0c2f; font-style: italic; }
.wow-broadcast #screen-game .dm-board .cboard .mk3 { color: #ffd700; } .wow-broadcast #screen-game .dm-board .cboard .mk2 { color: #fff; } .wow-broadcast #screen-game .dm-board .cboard .mk1 { color: #a197f7; }
.wow-broadcast #game-info .checkout { background: linear-gradient(90deg, #ffd700, #f5b700); color: #0e0c2f; border: 0; transform: skewX(-8deg); }
.wow-broadcast #game-info .checkout .route { color: #0e0c2f; }
.wow-fx.wow-broadcast #screen-game .dm-board .pcard.wow-enter, .wow-fx.wow-broadcast #screen-game .dm-board th.wow-enter, .wow-fx.wow-broadcast #screen-game .dm-board tr.wow-enter { animation: wowWipe .55s cubic-bezier(.7,0,.2,1) both; }
@keyframes wowWipe { 0% { clip-path: inset(0 100% 0 0); transform: translateZ(18px) rotateY(-25deg); } 100% { clip-path: inset(0 0 0 0); transform: translateZ(18px) rotateY(0); } }
.wow-fx.wow-broadcast #screen-game .dm-board .pcard.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; pointer-events: none;
  background: linear-gradient(90deg, transparent, #fff, transparent); animation: wowBar 2.2s linear infinite; }
@keyframes wowBar { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.wow-broadcast .wow-moment .wm-small { background: #ffd700; color: #0e0c2f; text-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  .wow-on *, .wow-moment * { animation: none !important; }
}

/* dart row + winner hero per theme */
.wow-arena #screen-game .dm-darts { background: linear-gradient(180deg, #302a63, #151233); color: #ffe08a; box-shadow: inset 0 -1px 0 rgba(255,209,102,.4); }
.wow-holo #screen-game .dm-darts { background: linear-gradient(90deg, rgba(255,42,61,.35), rgba(15,12,49,.95) 30%, rgba(15,12,49,.95) 70%, rgba(82,64,240,.35)); color: #e4e1fd; box-shadow: inset 0 -1px 0 rgba(82,64,240,.7); }
.wow-broadcast #screen-game .dm-darts { background: linear-gradient(90deg, #c8102e, #c8102e 18%, #fff 18%, #fff 82%, #311fd1 82%); color: #0e0c2f; }
.wow-on .modal-card:has(.wow-win) > h3 { display: none; }
.wow-arena .wow-win { background: linear-gradient(160deg, #211b55, #080716 60%, #4a3410); box-shadow: inset 0 0 0 2px #ffd166, 0 0 30px rgba(255,209,102,.35); }
.wow-arena .wow-win .ww-name { text-shadow: 0 0 22px rgba(255,209,102,.9); color: #fff8e1; }
.wow-holo .wow-win { background: linear-gradient(150deg, rgba(82,64,240,.25), #050a24 45%, rgba(255,42,61,.25)); box-shadow: inset 0 0 0 2px #5240f0, 0 0 30px rgba(82,64,240,.45); }
.wow-holo .wow-win .ww-k { color: #8f84f5; } .wow-holo .wow-win .ww-name { text-shadow: 0 0 18px #5240f0, 0 0 40px rgba(255,42,61,.6); }
.wow-broadcast .wow-win { background: linear-gradient(180deg, #18134a, #0e0c2f); box-shadow: inset 0 -8px 0 #c8102e, inset 0 0 0 3px #ffd700; }
.wow-broadcast .wow-win .ww-k { color: #0e0c2f; background: #ffd700; display: inline-block; padding: 2px 10px; transform: skewX(-12deg); }
.wow-broadcast .wow-win .ww-name { text-shadow: 3px 3px 0 #c8102e; }
.wow-moment .wm-small { white-space: nowrap; font-size: clamp(14px, 4.3vw, 24px); letter-spacing: .08em; }
.wow-fx.wow-holo #screen-game .dm-board::before { opacity: .85; }
.wow-holo #screen-game .dm-board .pcard .rem .wow-dg { background: inherit; -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ===== Leaderboard (Top 5) ===== */
.lb-tabs { margin-bottom: 14px; }
.lb-podium { display: grid; grid-template-columns: 1fr 1.12fr 1fr; gap: 8px; align-items: end; perspective: 700px; margin: 6px 0 14px; }
.lb-pod { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; text-align: center; transform-style: preserve-3d; }
.lb-pod.empty { cursor: default; }
.lb-pod .lb-av { width: 52px; height: 52px; font-size: 18px; }
.lb-pod.r1 .lb-av { width: 66px; height: 66px; font-size: 22px; box-shadow: 0 0 0 3px #f5c542, 0 0 18px rgba(245,197,66,.6); }
.lb-pod.r2 .lb-av { box-shadow: 0 0 0 3px #c9d1db; } .lb-pod.r3 .lb-av { box-shadow: 0 0 0 3px #5546fa; }
.lb-pod .lb-name { font-size: 13px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-pod .lb-val { font-size: 20px; font-weight: 900; font-variant-numeric: tabular-nums; }
.lb-step { width: 100%; display: flex; align-items: flex-start; justify-content: center; border-radius: 10px 10px 4px 4px; transform: rotateX(18deg); transform-origin: bottom;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.06)); box-shadow: 0 10px 18px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.35); }
.lb-step i { font-style: normal; font-weight: 900; font-size: 26px; padding-top: 6px; opacity: .9; }
.lb-pod.r1 .lb-step { height: 96px; background: linear-gradient(180deg, #f7d36a, #a87a12); color: #2b1d00; }
.lb-pod.r2 .lb-step { height: 70px; background: linear-gradient(180deg, #e3e8ee, #7d8794); color: #141230; }
.lb-pod.r3 .lb-step { height: 54px; background: linear-gradient(180deg, #8d83fc, #1605cf); color: #2a1406; }
.lb-av { border-radius: 50%; object-fit: cover; flex: none; background: #2a3442; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; }
.lb-list { display: flex; flex-direction: column; gap: 6px; }
.lb-row { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,.06); }
.lb-row .lb-av { width: 36px; height: 36px; font-size: 13px; }
.lb-row .lb-rank { width: 18px; font-weight: 900; opacity: .7; }
.lb-row .lb-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.lb-row .lb-name small { display: block; font-weight: 400; opacity: .6; font-size: 11px; }
.lb-row .lb-val { font-weight: 900; font-size: 18px; font-variant-numeric: tabular-nums; }
.lb-note { margin-top: 12px; }
body.wow-fx .lb-pod { animation: wow-lbrise .6s cubic-bezier(.2,1.3,.4,1) both; } body.wow-fx .lb-pod.r1 { animation-delay: .15s; } body.wow-fx .lb-pod.r3 { animation-delay: .3s; }
@keyframes wow-lbrise { from { opacity: 0; transform: translateY(30px) rotateX(-30deg); } to { opacity: 1; transform: none; } }
/* themes */
body.wow-arena #screen-leaderboard { background: radial-gradient(ellipse at 50% 0, #312c5c 0, #0c0b1c 60%); }
body.wow-arena .lb-pod .lb-val { color: #ffcf4a; text-shadow: 0 0 10px rgba(255,190,40,.7); }
body.wow-arena .lb-row { background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.12); transform: perspective(600px) rotateX(6deg); }
body.wow-holo #screen-leaderboard { background: radial-gradient(circle at 20% 10%, rgba(255,40,80,.25), transparent 45%), radial-gradient(circle at 85% 30%, rgba(74,56,239,.3), transparent 50%), #070614; }
body.wow-holo .lb-step { background: linear-gradient(180deg, rgba(142,130,245,.35), rgba(255,60,90,.15)) !important; border: 1px solid rgba(175,167,248,.6); color: #fff !important; box-shadow: 0 0 18px rgba(108,93,242,.5), inset 0 0 12px rgba(255,255,255,.2); }
body.wow-holo .lb-pod.r1 .lb-step { box-shadow: 0 0 24px rgba(255,60,90,.65), inset 0 0 12px rgba(255,255,255,.25); border-color: #ff5a7a; }
body.wow-holo .lb-pod .lb-val { background: linear-gradient(90deg, #ff5a7a, #fff, #7466f3); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.wow-holo .lb-row { background: rgba(142,130,245,.08); border: 1px solid rgba(142,130,245,.35); box-shadow: 0 0 10px rgba(108,93,242,.2); backdrop-filter: blur(6px); }
body.wow-broadcast #screen-leaderboard { background: linear-gradient(180deg, #14060a, #2a0b12 40%, #0c0c12); }
body.wow-broadcast .lb-pod .lb-name { background: #c8102e; padding: 2px 8px; transform: skewX(-10deg); color: #fff; }
body.wow-broadcast .lb-pod .lb-val { color: #f5c542; }
body.wow-broadcast .lb-row { background: linear-gradient(90deg, #c8102e 0 46px, rgba(255,255,255,.07) 46px); border-left: 0; border-radius: 4px; transform: skewX(-6deg); }
body.wow-broadcast .lb-row > * { transform: skewX(6deg); }
body.wow-broadcast .lb-row .lb-rank { color: #fff; opacity: 1; }
body.wow-broadcast .lb-row .lb-val { color: #f5c542; }
@media (prefers-reduced-motion: reduce) { .lb-pod { animation: none !important; } }
.lb-tabs button { white-space: nowrap; font-size: 14px; padding-left: 4px; padding-right: 4px; }
/* video matches: no 3D tilt (keeps measured sizes exact) and no looping ambient effects over the video */
body.wow-on #screen-game.big-vid .dm-board .pcard, body.wow-on #screen-game.big-vid .dm-board .pcard.active { transform: none !important; }
body.wow-on #screen-game.big-vid .dm-board::before, body.wow-on #screen-game.big-vid .dm-board::after,
body.wow-on #screen-game.big-vid .pcard::before, body.wow-on #screen-game.big-vid .pcard::after { animation: none !important; display: none; }
body.wow-on #screen-game.big-vid * { backdrop-filter: none !important; }

/* ===== Shot clock (online, public/js/shotclock-ui.js): fixed overlay, never changes the board layout ===== */
.sc { position: fixed; left: 0; right: 0; top: 0; z-index: 60; pointer-events: none; }
.sc[hidden] { display: none; }
.sc-bar { height: 4px; background: rgba(255,255,255,.08); }
.sc-bar i { display: block; height: 100%; background: linear-gradient(90deg, #e3b11c, #e6ba35); transform-origin: left; }
.sc-pill { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border-radius: 999px;
  background: rgba(10,9,23,.86); box-shadow: 0 2px 10px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.12); color: #fff; font-size: 12px; white-space: nowrap; }
.sc-pill svg { width: 26px; height: 26px; transform: rotate(-90deg); }
.sc-pill .sc-bg { fill: none; stroke: rgba(255,255,255,.15); stroke-width: 3.5; }
.sc-pill .sc-fg { fill: none; stroke: #e3b11c; stroke-width: 3.5; stroke-dasharray: 97.4; stroke-linecap: round; }
.sc-n { position: absolute; left: 4px; width: 26px; text-align: center; font-size: 11px; font-weight: 900; font-variant-numeric: tabular-nums; }
.sc-who { font-weight: 700; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.sc-to { color: #fbbf24; font-weight: 800; }
.sc.mine .sc-pill { box-shadow: 0 2px 10px rgba(0,0,0,.5), 0 0 0 2px #e3b11c; }
.sc.low .sc-bar i { background: #ef4444; } .sc.low .sc-fg { stroke: #ef4444; }
.sc.low .sc-pill { background: rgba(127,16,24,.92); box-shadow: 0 0 0 2px #ef4444, 0 0 18px rgba(239,68,68,.6); }
.sc.low .sc-n { font-size: 13px; }
.sc.crit .sc-pill { animation: sc-pulse .5s ease-in-out infinite alternate; }
@keyframes sc-pulse { to { transform: translateX(-50%) scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .sc.crit .sc-pill { animation: none; } }
.forfeit-note { margin: 4px 0 8px; padding: 6px 10px; border-radius: 10px; background: rgba(239,68,68,.16); color: #fecaca; font-weight: 700; text-align: center; }

/* ===== Integrity (lib/integrity.js) ===== */
.integ { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 999px; font-size: 11px; font-weight: 800; background: rgba(255,255,255,.1); color: #e5e7eb; white-space: nowrap; vertical-align: middle; }
.integ.hi { background: rgba(227,177,28,.2); color: #f5d880; } .integ.mid { background: rgba(250,204,21,.2); color: #fde68a; } .integ.lo { background: rgba(239,68,68,.2); color: #fca5a5; }
.pc-integ { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; padding: 8px 12px; border-radius: 12px; background: linear-gradient(90deg, rgba(227,177,28,.18), rgba(255,255,255,.04)); position: relative; }
.pc-integ.new { background: rgba(255,255,255,.06); }
.pc-integ .pi-ico { font-size: 22px; } .pc-integ b { font-size: 20px; display: block; line-height: 1.1; } .pc-integ small { opacity: .7; font-size: 11px; }
.pc-integ .pi-bar { position: absolute; left: 12px; right: 12px; bottom: 4px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.1); }
.pc-integ .pi-bar i { display: block; height: 100%; border-radius: 3px; background: #e3b11c; }
.rate-box:empty { display: none; }
.rate-box { margin: 10px 0 4px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.rate-h { font-weight: 800; margin-bottom: 6px; } .rate-h small { font-weight: 400; opacity: .6; margin-left: 4px; }
.rate-row + .rate-row { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.08); }
.rate-name { display: block; font-size: 13px; margin-bottom: 2px; }
.rate-stars { display: flex; gap: 4px; }
.rstar { all: unset; cursor: pointer; font-size: 30px; line-height: 1; color: rgba(255,255,255,.22); padding: 2px; }
.rstar.on { color: #fbbf24; text-shadow: 0 0 10px rgba(251,191,36,.6); }
.rate-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.rtag { all: unset; cursor: pointer; font-size: 12px; padding: 4px 9px; border-radius: 999px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
.rtag.on { background: rgba(83,65,240,.35); box-shadow: inset 0 0 0 1px #7567f3; }
.rate-btns { display: flex; gap: 8px; margin-top: 10px; } .rate-btns .cta { flex: 1; padding: 9px; min-height: 0; }
.rate-err { color: #fca5a5; font-size: 12px; margin: 4px 0 0; } .rate-thanks { margin: 0; color: #f5d880; font-weight: 700; text-align: center; }