/* OnlyDance arcade: a night stage with neon lights. Loaded last, over the base layout. */
:root{color-scheme:dark;--night:#0a0418;--night2:#170a36;--panel:#170b35e8;--edge:#ffffff1f;--text:#fff;--muted:#b9b0d8;
  --pink:#ff2bd6;--cyan:#29e7ff;--yellow:#ffe24a;--lime:#b8ff3c;--orange:#ff8a2b;--red:#ff3d6e;--violet:#8b5cff;
  --display:Barlow,'Arial Narrow',Impact,sans-serif}
html,body{background:var(--night)}
body{color:var(--text)}
.studio,.studio[data-immersive=true]{background:var(--night)}
.reference-stage:not(.has-video){background:var(--night)}
button img{filter:invert(1)}

/* Floating controls: dark glass with a neon edge */
.top-actions .icon-button,.studio[data-immersive=true] #settingsButton,.stage-icon,.stages[data-mode=preview] .stage-icon,#cameraToggle,.coach-mode,.preview-play,.stage.has-video .stage-icon{
  background:#120830c4;border:1.5px solid #ffffff2e;box-shadow:0 0 0 1px #0006,0 4px 16px #0008;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.stage-icon[aria-pressed=true],.coach-mode[aria-pressed=true]{border-color:var(--cyan);box-shadow:0 0 14px #29e7ff88}
.stage-icon img,.coach-mode img,.preview-play img{filter:invert(1)}
.preview-play{width:76px;height:76px;border:2px solid #ffffff55;box-shadow:0 0 30px #ff2bd666,0 4px 18px #000a}
.timeline,.studio[data-immersive=true] .timeline,.left-controls,.scoreboard{background:#120830c9;border:1.5px solid #ffffff24;color:#fff;box-shadow:0 4px 18px #0009;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.timeline,.studio[data-immersive=true] .timeline{font-family:var(--display);font-size:13px;letter-spacing:.5px}
.speed-button{font-family:var(--display);font-size:16px;color:#fff}
.left-controls button,.studio[data-immersive=true] .left-controls button{color:#fff}
input[type=range]{background:#ffffff26;height:5px;accent-color:var(--pink)}
input[type=range]::-webkit-slider-thumb{width:16px;height:16px;background:var(--pink);box-shadow:0 0 10px var(--pink)}
input[type=range]::-moz-range-thumb{width:16px;height:16px;background:var(--pink)}
input[type=checkbox]{accent-color:var(--pink)}
.scoreboard>div>span,.match-score>span,.studio[data-immersive=true] .match-score>span{font-family:var(--display);font-size:11px;letter-spacing:2px;color:var(--muted)}
.match-score strong,.studio[data-immersive=true] .match-score strong{font-family:var(--display);font-style:italic;font-size:28px;color:var(--lime);text-shadow:0 0 12px #b8ff3c88}
.tracking-status,.stage.has-video .tracking-status.active{font-family:var(--display);font-size:12px;letter-spacing:1.5px;color:#fff}
.tracking-status.active .status-dot{background:var(--lime);box-shadow:0 0 8px var(--lime)}
.stage-name{font-family:var(--display);font-size:13px;letter-spacing:2.5px;color:#fff}
.stages[data-mode=preview] .stage-name{visibility:hidden}

/* The big arcade START button */
.play-button{width:150px;height:58px;border-radius:14px;transform:translate(-50%,-50%) skewX(-10deg);background:linear-gradient(180deg,#fff27a,var(--yellow) 45%,#ffb800);color:#2a0b3d;
  font-family:var(--display);font-style:italic;font-size:26px;letter-spacing:2px;box-shadow:0 6px 0 #b35a00,0 10px 24px #000a,0 0 32px #ffe24a77;transition:transform .08s,box-shadow .08s}
.play-button>*{transform:skewX(10deg)}
.play-button img{filter:none;width:20px;height:20px}
.play-button:active:not(:disabled){transform:translate(-50%,calc(-50% + 5px)) skewX(-10deg);box-shadow:0 1px 0 #b35a00,0 4px 12px #000a,0 0 24px #ffe24a77}
.studio[data-phase=preview] .play-button:not(:disabled){animation:start-pulse 1.4s ease-in-out infinite}
.studio[data-phase=live] .play-button,.studio[data-immersive=true] .play-button{width:58px;height:58px;border-radius:50%;transform:translate(-50%,-50%);background:linear-gradient(180deg,#ff6be4,var(--pink));box-shadow:0 5px 0 #8a0f74,0 0 24px #ff2bd677}
.studio[data-immersive=true] .play-button>*{transform:none}
.studio[data-immersive=true] .play-button img{filter:invert(1)}
.play-button:disabled{opacity:.35;animation:none}
@keyframes start-pulse{50%{box-shadow:0 6px 0 #b35a00,0 10px 24px #000a,0 0 54px #ffe24acc}}

/* Logo, shown on the preview */
.brand{display:none}
.studio[data-phase=preview] .stage-top::before{content:'ONLY DANCE';position:absolute;left:0;top:6px;font:italic 700 26px/1 var(--display);letter-spacing:1px;
  background:linear-gradient(90deg,var(--cyan),var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 8px #ff2bd688)}

/* Title screen before a dance is chosen */
.studio:has(#referenceEmpty:not([hidden])) .dock,.studio:has(#referenceEmpty:not([hidden])) .stage-top,.studio:has(#referenceEmpty:not([hidden])) .stage-bottom{display:none}
.studio:has(#referenceEmpty:not([hidden])) .topbar{z-index:12;right:max(12px,env(safe-area-inset-right))}
.title-screen{inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px;overflow:hidden;text-align:center;
  background:radial-gradient(120% 70% at 50% 0%,#3a1182 0%,transparent 60%),radial-gradient(90% 60% at 50% 100%,#5b0f6b 0%,transparent 70%),var(--night)}
.title-glow{position:absolute;inset:-20% -40%;background:conic-gradient(from 200deg at 50% 0%,transparent 0 30deg,#29e7ff26 40deg,transparent 52deg 120deg,#ff2bd626 132deg,transparent 145deg);animation:beams 7s ease-in-out infinite alternate;pointer-events:none}
.title-floor{position:absolute;left:-50%;right:-50%;bottom:-4%;height:50%;transform:perspective(300px) rotateX(58deg);transform-origin:50% 100%;pointer-events:none;
  background:linear-gradient(#ff2bd6aa 2px,transparent 2px) 0 0/100% 44px,linear-gradient(90deg,#29e7ff88 2px,transparent 2px) 0 0/44px 100%;
  -webkit-mask-image:linear-gradient(transparent,#000 45%);mask-image:linear-gradient(transparent,#000 45%);animation:floor 1.2s linear infinite}
.title-logo{position:relative;margin:0;display:flex;justify-content:center;line-height:0}
/* The OnlyDance logo in neon: a dark drop to lift it, then a pink and cyan glow that breathes. */
.title-logo img{width:min(86vw,440px);height:auto;filter:drop-shadow(0 5px 0 #0009) drop-shadow(0 0 14px #ff2bd6aa) drop-shadow(0 0 30px #29e7ff55);animation:logo-glow 2.4s ease-in-out infinite alternate}
@keyframes logo-glow{to{filter:drop-shadow(0 5px 0 #0009) drop-shadow(0 0 20px #ff2bd6dd) drop-shadow(0 0 44px #29e7ff88)}}
@media(prefers-reduced-motion:reduce){.title-logo img{animation:none}}
.brand .brand-logo,.brand>img.brand-logo{width:auto;height:30px;filter:drop-shadow(0 0 8px #ff2bd688)}
.title-tagline{position:relative;margin:0;font-size:15px;font-weight:700;letter-spacing:1px;color:#fff;text-shadow:0 2px 8px #000}
.title-note{position:relative;margin:0;font-size:11px;letter-spacing:1px;color:#ffffff80}
.title-screen .import-target{position:relative;margin-top:14px;flex-direction:row;gap:12px;padding:18px 34px;border-radius:16px;transform:skewX(-10deg);
  background:linear-gradient(180deg,#fff27a,var(--yellow) 45%,#ffb800);color:#2a0b3d;font:italic 700 30px/1 var(--display);letter-spacing:2px;
  box-shadow:0 7px 0 #b35a00,0 12px 30px #000c,0 0 40px #ffe24a88;animation:start-pulse 1.4s ease-in-out infinite}
.title-screen .import-target>*{transform:skewX(10deg)}
.title-screen .import-target img{width:24px;height:24px;filter:none}
.title-screen .import-target:active{transform:skewX(-10deg) translateY(5px);box-shadow:0 2px 0 #b35a00,0 0 30px #ffe24a88}
@keyframes beams{to{transform:rotate(14deg)}}
@keyframes floor{to{background-position:0 44px,0 0}}

/* Clip analysis: loading the stage */
.analysis-screen{background:radial-gradient(100% 60% at 50% 30%,#3a1182,transparent 70%),var(--night)}
.analysis-screen strong{font:italic 700 34px/1 var(--display);letter-spacing:2px;color:#fff;text-shadow:0 0 18px var(--pink)}
.analysis-screen .spinner{border-color:#ffffff22;border-top-color:var(--cyan);width:34px;height:34px}
.analysis-bar{height:14px;border-radius:7px;border:1.5px solid #ffffff40;background:#0006;width:min(280px,74vw)}
.analysis-bar span{border-radius:6px;background:repeating-linear-gradient(-45deg,var(--pink) 0 10px,#ff6be4 10px 20px);box-shadow:0 0 14px var(--pink);animation:stripes .6s linear infinite}
#analysisText{font-family:var(--display);font-size:20px;letter-spacing:1px}
@keyframes stripes{to{background-position:28px 0}}

/* Countdown */
.countdown{background:#0a041899;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.countdown span{font:italic 700 clamp(190px,56vw,300px)/1 var(--display);color:var(--yellow);-webkit-text-stroke:4px #2a0b3d;
  text-shadow:0 8px 0 #b35a00,0 0 60px var(--pink),0 0 120px var(--pink);animation:count-slam .4s cubic-bezier(.2,1.6,.4,1)}
@keyframes count-slam{from{transform:scale(2.2) rotate(-8deg);opacity:0}to{transform:none;opacity:1}}

/* Live: thick neon match gauge, original clip inset with a glowing edge */
.live-meter{height:14px;border-radius:7px;background:#0a0418b0;border:1.5px solid #ffffff40;box-shadow:0 3px 12px #0008}
.live-meter span{border-radius:6px;background:linear-gradient(90deg,var(--lime),#e9ff9a);box-shadow:0 0 14px var(--lime)}
.live-meter[data-level=good] span{background:linear-gradient(90deg,var(--cyan),#a3f6ff);box-shadow:0 0 14px var(--cyan)}
.live-meter[data-level=normal] span{background:linear-gradient(90deg,var(--orange),#ffc27a);box-shadow:0 0 14px var(--orange)}
.live-meter[data-level=bad] span{background:linear-gradient(90deg,var(--red),#ff8aa8);box-shadow:0 0 14px var(--red)}
.stages[data-mode=live] .reference-stage{border:2px solid var(--cyan);box-shadow:0 0 16px #29e7ff99,0 4px 16px #000a}
.live-label{color:var(--red);font-family:var(--display);font-size:13px}.live-label .dot{background:var(--red);box-shadow:0 0 8px var(--red);animation:blink 1s steps(2) infinite}
.stage.has-video .live-label{color:#fff}
@keyframes blink{50%{opacity:.2}}
.hud-points span{font-family:var(--display);font-size:15px;letter-spacing:4px}
.judgment>span,.studio[data-immersive=true] .judgment>span{color:var(--lime);-webkit-text-stroke:1.5px #0008}
.judgment[data-grade=good]>span{color:var(--cyan)!important}.judgment[data-grade=normal]>span{color:var(--orange)!important}.judgment[data-grade=bad]>span{color:var(--red)!important}

/* Dialogs: neon panels */
.settings-dialog,.results-dialog{background:linear-gradient(180deg,#24104d,#120830);color:#fff;border:2px solid #ff2bd6aa;border-radius:22px;box-shadow:0 0 40px #ff2bd655,0 20px 60px #000c}
.settings-dialog::backdrop,.results-dialog::backdrop{background:#0a0418c4;backdrop-filter:blur(6px)}
.dialog-header{font:italic 700 22px/1 var(--display);letter-spacing:3px;color:var(--yellow);text-shadow:0 0 12px #ffe24a88}
.setting-row{color:#fff;border-color:#ffffff1c;font-weight:700}
.toast{background:#170b35;color:#fff;border:1.5px solid var(--pink);box-shadow:0 0 24px #ff2bd677;font-weight:700}

/* Results: rank stamp, title, 舞力 and its parts */
.results-dialog{width:min(380px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;padding:18px 20px 20px}
.results-dialog .dialog-header{justify-content:center;position:relative;margin-bottom:6px;font-size:26px}
.results-dialog .dialog-header .icon-button{position:absolute;right:-6px;top:-6px}
.result-hero{display:flex;flex-direction:column;align-items:center;gap:6px}
.result-rank{--c:var(--cyan);width:132px;height:132px;display:grid;place-items:center;border-radius:50%;border:4px solid var(--c);background:radial-gradient(circle,#ffffff14,transparent 70%);box-shadow:0 0 30px var(--c),inset 0 0 24px var(--c)}
.result-rank b{font:italic 700 86px/1 var(--display);color:#fff;text-shadow:0 0 18px var(--c),0 0 40px var(--c);margin-right:6px}
.result-rank[data-rank=Splus]{--c:var(--yellow)}.result-rank[data-rank=S]{--c:var(--pink)}.result-rank[data-rank=A]{--c:var(--lime)}
.result-rank[data-rank=B]{--c:var(--cyan)}.result-rank[data-rank=C]{--c:var(--orange)}.result-rank[data-rank=D]{--c:#9a8fc0}
.result-rank[data-rank=Splus] b{font-size:70px}
.result-rank.stamp{animation:stamp .55s cubic-bezier(.2,1.5,.4,1) both}
@keyframes stamp{0%{transform:scale(3) rotate(-20deg);opacity:0}60%{opacity:1}100%{transform:rotate(-6deg)}}
.result-title{display:flex;flex-direction:column;align-items:center}
.result-title strong{font-size:26px;font-weight:900;letter-spacing:2px}
.result-title span{font:italic 700 15px/1.2 var(--display);letter-spacing:3px;color:var(--muted)}
.result-power{margin:12px 0 8px;display:flex;align-items:baseline;justify-content:center;gap:10px}
.result-power>span{font-size:16px;font-weight:900;letter-spacing:2px;color:var(--yellow)}
.result-power strong{font:italic 700 64px/1 var(--display);color:var(--yellow);text-shadow:0 4px 0 #b35a00,0 0 24px #ffe24a88;font-variant-numeric:tabular-nums}
.result-power em{font:italic 700 16px/1 var(--display);letter-spacing:1.5px;color:#2a0b3d;background:var(--pink);padding:5px 8px;border-radius:6px;transform:rotate(-6deg);box-shadow:0 0 16px var(--pink);animation:fire-bob .4s ease-in-out infinite alternate}
.power-radar{width:min(100%,250px);margin:-2px auto 10px}
.power-radar svg{display:block;width:100%;height:auto;overflow:visible}
.radar-ring{fill:none;stroke:#ffffff24;stroke-width:1}.radar-ring.outer{fill:#ffffff0a}
.radar-spoke{stroke:#ffffff24;stroke-width:1}
.radar-shape{transform-origin:100px 100px;transform:scale(0);transition:transform .9s cubic-bezier(.2,.8,.2,1) .3s}
.radar-shape.grow{transform:scale(1)}
.radar-shape path{fill:#ff2bd655;stroke:var(--pink);stroke-width:2;stroke-linejoin:round;filter:drop-shadow(0 0 6px #ff2bd6aa)}
.radar-label{fill:#fff;font-size:11px;font-weight:800}
.radar-value{font:italic 700 13px var(--display)}
@media(prefers-reduced-motion:reduce){.radar-shape{transition:none}}
.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.result-stats>div{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 4px;border-radius:12px;background:#ffffff0f;border:1px solid #ffffff1a}
.result-stats strong{font:italic 700 26px/1 var(--display);color:#fff;font-variant-numeric:tabular-nums}
.result-stats small{font-size:14px;margin-left:1px}
.result-stats>div>span{font-size:10px;font-weight:800;letter-spacing:1px;color:var(--muted)}
.result-grades{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:10px 0 14px}
.result-grades>div{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;border:0;border-radius:10px;background:#ffffff0a;--c:var(--lime)}
.result-grades>div[data-grade=good]{--c:var(--cyan)}.result-grades>div[data-grade=normal]{--c:var(--orange)}.result-grades>div[data-grade=bad]{--c:var(--red)}
.result-grades span{font:italic 700 11px/1 var(--display);letter-spacing:.5px;color:var(--c)}
.result-grades b{font:italic 700 22px/1 var(--display);color:#fff}
.replay-button{height:54px;border-radius:14px;background:linear-gradient(180deg,#fff27a,var(--yellow) 45%,#ffb800);color:#2a0b3d;font:italic 700 24px/1 var(--display);letter-spacing:2px;box-shadow:0 5px 0 #b35a00,0 0 24px #ffe24a66}
.replay-button img{filter:none}
.replay-button:active{transform:translateY(4px);box-shadow:0 1px 0 #b35a00}
.export-panel{border-color:#ffffff1c}
.export-title{color:var(--cyan);font:italic 700 16px/1 var(--display);letter-spacing:2px}
.export-options label{display:flex;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:8px 4px;border-radius:10px;background:#ffffff0d;border:1.5px solid #ffffff26;color:#fff;font-size:12px;font-weight:800;cursor:pointer}
.export-options label:has(input:checked){background:#29e7ff22;border-color:var(--cyan);box-shadow:0 0 12px #29e7ff66}
.export-options input{flex:none;margin:0;width:17px;height:17px;accent-color:var(--cyan)}
.export-options label:has(input:disabled){opacity:.6;cursor:wait}
.export-plain{min-height:36px;border:1px solid #ffffff30;border-radius:10px;background:#ffffff08;color:#fff;font-size:12px;font-weight:700}
.export-plain[aria-pressed=true]{border-color:var(--cyan);background:#29e7ff22}
.export-plain:disabled{opacity:.5}
.export-button{background:linear-gradient(180deg,#ff6be4,var(--pink));color:#fff;font:italic 700 20px/1 var(--display);letter-spacing:2px;box-shadow:0 4px 0 #8a0f74}
.export-button.save{background:linear-gradient(180deg,#a3f6ff,var(--cyan));color:#0a0418;box-shadow:0 4px 0 #0b7f93}
.export-button.reselect{background:transparent;border:1.5px solid #ffffff50;color:#fff;box-shadow:none;font-size:17px}
.ready-button{position:absolute;z-index:20;bottom:max(100px,calc(env(safe-area-inset-bottom) + 76px));left:50%;transform:translateX(-50%);min-width:170px;min-height:62px;border-radius:16px;background:linear-gradient(180deg,#fff27a,var(--yellow) 45%,#ffb800);color:#2a0b3d;font:italic 700 32px/1 var(--display);letter-spacing:3px;box-shadow:0 6px 0 #b35a00,0 0 32px #ffe24a77}
.ready-button:active{transform:translate(-50%,4px);box-shadow:0 2px 0 #b35a00}
.studio[data-phase=ready] .dock{visibility:hidden;pointer-events:none}
.export-progress{height:10px;border-radius:5px;background:#ffffff17}
.export-progress span{background:repeating-linear-gradient(-45deg,var(--pink) 0 10px,#ff6be4 10px 20px);box-shadow:0 0 10px var(--pink);animation:stripes .6s linear infinite}
.loading-mask{background:#0a0418e8;color:#fff}
.spinner{border-color:#ffffff22;border-top-color:var(--pink)}
.guide-picker button{background:#120830d0;color:#fff;border:1.5px solid #ffffff2e}
.guide-picker button[aria-pressed=true]{background:var(--pink);border-color:var(--pink);box-shadow:0 0 12px var(--pink)}
.reference-stage.avatar-only,.reference-stage.avatar-only.has-video{background:var(--night)}
@media(prefers-reduced-motion:reduce){.title-glow,.title-floor,.title-screen .import-target,.studio[data-phase=preview] .play-button,.result-rank.stamp,.countdown span,.analysis-bar span{animation:none!important}}
/* Camera stage before the camera opens */
.camera-stage{background:radial-gradient(100% 60% at 50% 30%,#2a0d5e,transparent 70%),var(--night)}
#cameraEmpty .import-target{color:#fff;font:italic 700 20px/1 var(--display);letter-spacing:2px}
#cameraEmpty .empty-icon{width:88px;height:88px;border-radius:50%;border:2px solid var(--cyan);background:#29e7ff14;box-shadow:0 0 24px #29e7ff77,inset 0 0 18px #29e7ff44}
#cameraEmpty .empty-icon img{filter:invert(1);opacity:1;width:34px;height:34px}

/* A short, readable failure message; technical details are opt-in. */
.export-status{margin:0;padding:12px 14px;border-radius:12px;background:#ffffff0c;color:#e7dff5;font-size:14px;font-weight:500;line-height:1.6;text-align:center}
.export-debug{margin:0;padding:8px;border-radius:8px;background:#000;color:#9f9;font:10px/1.4 ui-monospace,Menlo,monospace;white-space:pre-wrap;word-break:break-all;user-select:text;-webkit-user-select:text}
.export-debug{max-height:160px;overflow:auto}
.diagnostics-button{padding:11px 16px;border:1px solid #ffffff50;border-radius:12px;background:#ffffff12;color:inherit;font-size:13px;min-height:44px}
.diagnostics-dialog{width:min(520px,calc(100vw - 24px));max-height:85dvh;box-sizing:border-box;padding:18px;background:#160a2b;color:#fff;border:1px solid #ac6eff;border-radius:18px}
.diagnostics-dialog::backdrop{background:#0009}
.diagnostics-dialog .dialog-header{font-size:18px;letter-spacing:0}
.diagnostics-dialog pre{max-height:55dvh;overflow:auto;background:#090412;padding:10px;white-space:pre-wrap;overflow-wrap:anywhere;font:11px/1.5 ui-monospace,Menlo,monospace;user-select:text;-webkit-user-select:text}

/* Pops (grades and 卡點): app.mjs moves them with pop-motion.mjs, the same
   motion as the export — big at the centre, then up out of the way. */
.stage-frame>.judgment,.stage-frame>.beat-hit,.studio[data-immersive=true] .stage-frame>.judgment{position:absolute;z-index:9;left:50%;right:auto;top:42%;width:max-content;opacity:0;transform:translate(-50%,-50%);animation:none!important;transition:none;will-change:transform,opacity;pointer-events:none}
.stage-frame>.judgment>span,.studio[data-immersive=true] .stage-frame>.judgment>span{font-size:min(19vw,92px);letter-spacing:1px;-webkit-text-stroke:2px #0008}
.stage-frame>.judgment small,.studio[data-immersive=true] .stage-frame>.judgment small{font-size:min(9vw,44px)}
.stage-frame>.judgment b{font-size:min(5vw,24px)}
.stage-frame>.judgment .judgment-combo{font-size:min(6vw,28px)}
.beat-hit{display:flex;justify-content:center;align-items:baseline;gap:8px}
.beat-hit b{font:italic 800 min(15vw,72px)/1 var(--display);color:var(--yellow);letter-spacing:1px;-webkit-text-stroke:2px #0008;text-shadow:0 4px 0 #b35a00,0 0 26px #ffe24acc}
.beat-hit span{font:italic 700 min(8vw,38px)/1 var(--display);color:#fff;text-shadow:0 3px 0 #0009,0 0 14px var(--pink)}

/* The points sit in the top-left corner, clear of the dancer. */
.stage-frame>.hud-points{left:max(16px,env(safe-area-inset-left));right:auto;top:calc(max(12px,env(safe-area-inset-top)) + 66px);align-items:flex-start}
.stage-frame>.hud-points strong{font-size:clamp(40px,12vw,58px);transform-origin:left center}
.stage-frame>.hud-points span{font-size:11px;letter-spacing:3px;margin-top:0}

/* Dancers in the clip: two neon cards, the chosen one lit */
.person-count-dialog{width:min(360px,calc(100vw - 24px));padding:20px;background:linear-gradient(180deg,#24104d,#120830);color:#fff;color-scheme:dark;border:2px solid #ff2bd6aa;border-radius:22px;box-shadow:0 0 40px #ff2bd655,0 20px 60px #000c}
.person-count-dialog::backdrop{background:#0a0418c4;backdrop-filter:blur(6px)}
.person-count-dialog .dialog-header{margin-bottom:18px;font:italic 700 22px/1.2 var(--display);letter-spacing:1px;color:var(--yellow);text-shadow:0 0 12px #ffe24a88}
.person-count-dialog .icon-button img{filter:invert(1)}
.person-count-options{gap:12px}
.person-count-options label{--glow:var(--cyan);flex-direction:column;align-items:center;gap:2px;padding:18px 10px 14px;border:2px solid #ffffff24;border-radius:16px;background:#ffffff0a;transition:border-color .15s,box-shadow .15s,transform .15s}
.person-count-options label[data-count="2"]{--glow:var(--pink)}
.person-count-options input{position:absolute;opacity:0;pointer-events:none}
.person-count-options strong{font:italic 700 58px/1 var(--display);color:#ffffff66;transition:color .15s,text-shadow .15s}
.person-count-options span{font-size:14px;font-weight:800;color:var(--muted)}
.person-count-options em{margin-top:6px;font:italic 700 15px/1 var(--display);letter-spacing:3px;color:#ffffff59}
.person-count-options label:has(input:checked){border-color:var(--glow);background:color-mix(in srgb,var(--glow) 14%,transparent);box-shadow:0 0 22px color-mix(in srgb,var(--glow) 55%,transparent),inset 0 0 18px color-mix(in srgb,var(--glow) 22%,transparent);transform:translateY(-2px)}
.person-count-options label:has(input:checked) :is(strong,em){color:var(--glow);text-shadow:0 0 16px var(--glow)}
.person-count-options label:has(input:checked) span{color:#fff}
.person-count-options label:has(input:focus-visible){outline:3px solid var(--yellow);outline-offset:3px}
.analyse-video-button{margin-top:20px;height:54px;border-radius:14px;background:linear-gradient(180deg,#fff27a,var(--yellow) 45%,#ffb800);color:#2a0b3d;font:italic 700 22px/1 var(--display);letter-spacing:2px;box-shadow:0 5px 0 #b35a00,0 0 24px #ffe24a66}
.analyse-video-button:active{transform:translateY(3px);box-shadow:0 2px 0 #b35a00,0 0 18px #ffe24a66}