/* A quiet black stage with a small, playable light game. */
body{--cam-energy:0;--cam-bass:0}
.cam-stage-dock{position:fixed;inset-inline-end:16px;inset-block-end:var(--cam-dock-bottom,16px);z-index:75;max-width:calc(100vw - 28px);border:1px solid #ffffff30;border-radius:18px;background:#111e;box-shadow:0 12px 40px #0008;backdrop-filter:blur(16px)}.cam-stage-dock[hidden]{display:none}.cam-stage-launch{display:flex;align-items:center;gap:10px;padding:4px 16px 4px 4px;min-height:70px;border-radius:18px;text-align:left;color:#eee}.cam-mini-art{width:65px;height:65px;flex-shrink:0}.cam-mini-art img{width:100%;height:100%;object-fit:contain;filter:grayscale(.6)}.cam-mini-copy{display:grid;gap:3px;font:14px/1.4 var(--sans,Arial,sans-serif)}.cam-mini-copy strong{font-size:16px}.cam-mini-wave{display:flex;gap:3px;height:10px;align-items:end;width:85px}.cam-mini-wave i,.cam-spectrum i{height:100%;flex:1;background:var(--band-color);border-radius:3px;transform:scaleY(var(--level,.04));transform-origin:bottom;transition:transform .08s linear}
body dialog.cam-stage-dialog{width:min(1040px,calc(100% - 32px));max-width:1040px;max-height:calc(100dvh - 32px);margin:auto;padding:0;border:1px solid #ffffff35;border-radius:24px;background:#0b0b0d;color:#f4f4f7;box-shadow:0 30px 100px #000b;overflow:auto;font-family:var(--sans,Arial,sans-serif);--room-accent:#c4b2ff;--room-filter:none}
.cam-stage-dialog::backdrop{background:#000b;backdrop-filter:blur(12px)}.cam-stage-dialog :focus-visible{outline:2px solid white;outline-offset:3px}.cam-stage-dialog button{font:600 14px/1.4 var(--sans,Arial,sans-serif);min-height:44px;border:1px solid #3c3c43;border-radius:12px;background:#19191d;color:#e8e8ed;padding:10px 15px;cursor:pointer}.cam-stage-dialog button:hover{background:#292930;border-color:#777}.cam-stage-dialog button:disabled{opacity:.55;cursor:default}.cam-room-header{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:20px 28px;background:#0c0c0eef;border-bottom:1px solid #ffffff16;backdrop-filter:blur(16px)}.cam-room-header p{font-size:12px;letter-spacing:.15em;color:#9b9ba5;margin:0 0 6px}.cam-room-header h2{font:550 clamp(22px,3vw,30px)/1.2 var(--sans,Arial,sans-serif);letter-spacing:-.035em;margin:0}.cam-stage-dialog .cam-stage-close{padding:9px;min-width:44px;flex-shrink:0;border-radius:50%}.cam-stage-close svg{width:20px;height:20px;display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.cam-room-body{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}.cam-room-performance{padding:20px 28px 26px;min-width:0}.cam-scene-options{display:flex;justify-content:center;gap:5px}.cam-stage-dialog .cam-scene-options button{display:flex;align-items:center;gap:7px;border-radius:999px;background:transparent;border-color:transparent;padding:8px 12px;font-size:12px;min-height:38px}.cam-stage-dialog .cam-scene-options button[aria-pressed=true]{background:#25252b;border-color:#4b4b55}.cam-scene-options i{width:10px;height:10px;border-radius:50%;background:conic-gradient(#ffb69c,#c8e694,#88ccff,#c4a4ff,#ffb69c)}.cam-scene-options [data-scene=ice] i{background:#b1e6ff}.cam-scene-options [data-scene=mono] i{background:#e8e8ed}
.cam-projection{position:relative;isolation:isolate;aspect-ratio:1.2;min-width:0;overflow:hidden;margin:4px 0 12px;border-radius:18px;background:radial-gradient(ellipse at 50% 55%,#24243250,transparent 65%);--hit-strength:0}.cam-room-grid{position:absolute;inset:68% -20% -50%;transform:perspective(400px) rotateX(65deg);background:repeating-linear-gradient(0deg,transparent 0 29px,#ffffff09 30px),repeating-linear-gradient(90deg,transparent 0 29px,#ffffff09 30px);mask:radial-gradient(ellipse,#000,transparent 70%)}.cam-stage-glow{position:absolute;inset:18% 10% 4%;border-radius:50%;background:radial-gradient(ellipse,color-mix(in srgb,var(--room-accent) 15%,transparent),transparent 65%);opacity:calc(.4 + var(--cam-energy)*.6)}.cam-stage-orbit{position:absolute;inset:73% 5% 9%;border:1px solid color-mix(in srgb,var(--room-accent) 55%,transparent);border-radius:50%;box-shadow:0 0 calc(12px + var(--cam-bass)*30px) #b5a5ff14,inset 0 0 20px #b5a5ff10;transform:scale(calc(1 + var(--cam-bass)*.035))}.cam-stage-orbit::after{content:'';position:absolute;inset:16% 10%;border:1px solid #ffffff25;border-radius:50%}
.cam-performer-wrap{position:absolute;top:0;left:50%;height:90%;aspect-ratio:1;transform:translateX(-50%);filter:var(--room-filter)}.cam-performer,.cam-room-canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.cam-performer{filter:grayscale(.8)}.cam-room-canvas{opacity:0}.cam-room-canvas.ready{opacity:1}.cam-performer-wrap:has(.ready) .cam-performer{opacity:0}.cam-hit-glow{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(ellipse at var(--hit-x,50%) 80%,var(--hit-color,#c9b5ff),transparent 48%);opacity:calc(var(--hit-strength,0)*.18)}.cam-spectrum{position:absolute;inset:auto 12% 15%;height:24px;display:flex;align-items:end;gap:4px;opacity:.6;filter:var(--room-filter)}.cam-projection-caption{position:absolute;inset:auto 0 0;text-align:center;font-size:12px;letter-spacing:.07em;color:#8d8d97}
.cam-stage-song{text-align:center}.cam-stage-song>span{font-size:12px;letter-spacing:.12em;color:#8c8c96}.cam-stage-song h3{font:550 23px/1.3 var(--sans,Arial,sans-serif);letter-spacing:-.03em;margin:6px 0;overflow-wrap:anywhere}.cam-stage-song p{font-size:14px;line-height:1.5;color:#a0a0ab;margin:8px 0 18px;min-height:21px}.cam-stage-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.cam-stage-dialog #cam-stage-play{background:#f1f1f4;color:#101014;border-color:#f1f1f4}.cam-stage-dialog #cam-stage-play:hover{background:white}
.cam-game{padding:24px 26px;border-left:1px solid #ffffff16;background:#101013}.cam-game-heading{display:flex;justify-content:space-between;gap:12px;font-size:12px;letter-spacing:.08em;color:#ababbb}.cam-game-count{color:#82828f}.cam-game h3{font:550 26px/1.2 var(--sans,Arial,sans-serif);letter-spacing:-.04em;margin:14px 0 10px}.cam-game-help{font-size:14px;line-height:1.6;color:#a6a6b2;margin:0 0 18px}.cam-game-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin:0 0 18px}.cam-game-stats div{display:grid;gap:5px}.cam-game-stats span{font-size:12px;color:#90909d}.cam-game-stats strong{font:550 24px/1 var(--sans,Arial,sans-serif);font-variant-numeric:tabular-nums}
.cam-game-board{position:relative;height:240px;border:1px solid #3a3a43;background:linear-gradient(#141419,#1a1a21);border-radius:14px;overflow:hidden}.cam-lanes{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr)}.cam-lanes i{border-inline-end:1px solid #ffffff0c}.cam-lanes i:last-child{border:0}.cam-note-track{position:absolute;inset:12px 0 60px}.cam-game-note{position:absolute;left:calc((var(--lane) + .5)*25%);top:calc(var(--travel)*100%);width:42%;max-width:34px;height:12px;border-radius:6px;background:var(--lane-color);box-shadow:0 0 15px color-mix(in srgb,var(--lane-color) 32%,transparent);transform:translate(-50%,-50%)}.cam-game-note[hidden]{display:none}.cam-hit-line{position:absolute;bottom:60px;left:0;right:0;height:1px;background:#ffffff70;box-shadow:0 0 12px #fff2}.cam-hit-line::before{content:'';position:absolute;inset:-10px 0;background:#ffffff04}
.cam-board-message{position:absolute;inset:40px 16px 84px;display:grid;place-content:center;text-align:center;font-size:20px;line-height:1.5;letter-spacing:-.035em;color:#8d8d9f;pointer-events:none}.cam-board-message[hidden]{display:none}.cam-piano-pads{position:absolute;inset:auto 7px 7px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.cam-stage-dialog .cam-piano-pads button{border-radius:7px;min-height:42px;padding:8px;display:flex;justify-content:center;align-items:center;gap:7px;background:#e8e8ed;color:#151519;border-color:#e8e8ed;touch-action:manipulation;user-select:none;box-shadow:0 3px 0 #9292a2}.cam-piano-pads button small{font-size:12px;color:#646470}.cam-stage-dialog .cam-piano-pads button:nth-child(1){--pad-color:#ffc489}.cam-stage-dialog .cam-piano-pads button:nth-child(2){--pad-color:#a6e7ba}.cam-stage-dialog .cam-piano-pads button:nth-child(3){--pad-color:#89cfff}.cam-stage-dialog .cam-piano-pads button:nth-child(4){--pad-color:#d3a5ff}.cam-stage-dialog .cam-piano-pads button.is-pressed,.cam-stage-dialog .cam-piano-pads button.is-cue{background:var(--pad-color);border-color:var(--pad-color);box-shadow:0 0 20px color-mix(in srgb,var(--pad-color) 40%,transparent);transform:translateY(2px)}
.cam-game-feedback{font-size:14px;line-height:1.5;color:#b6b6c2;min-height:42px;margin:14px 0 10px}.cam-stage-dialog #cam-game-start{width:100%;background:#25232f;color:#efe9ff;border-color:#595066}.cam-stage-dialog #cam-game-start:hover{background:#353040}.cam-game-progress{height:3px;border-radius:2px;background:#292930;margin-top:14px;overflow:hidden}.cam-game-progress span{display:block;height:100%;background:linear-gradient(90deg,#ffc489,#a6e7ba,#89cfff,#d3a5ff);transform:scaleX(var(--progress,0));transform-origin:left}.cam-game-paused .cam-note-track{opacity:.35}
.cam-stage-preferences{display:flex;align-items:center;gap:8px;padding:14px 26px;border-top:1px solid #ffffff16}.cam-stage-preferences p{font-size:12px;color:#9696a0;margin:0 auto 0 0}.cam-stage-dialog .cam-stage-preferences button{border-color:transparent;background:transparent;font-size:12px;color:#aaaab5;padding:8px 10px}.cam-stage-dialog[data-scene=ice]{--room-accent:#b1e6ff;--room-filter:sepia(.2) saturate(.65) hue-rotate(5deg)}.cam-stage-dialog[data-scene=mono]{--room-accent:#eee;--room-filter:grayscale(1)}
.cam-game-still .cam-note-track{display:none}.cam-game-still .cam-stage-orbit{transform:none;box-shadow:none}.cam-game-still .cam-stage-glow{opacity:.5}.cam-game-still .cam-spectrum i{transform:scaleY(.04);transition:none}.cam-game-still .cam-hit-glow{display:none}.cam-game-still .cam-piano-pads button.is-cue{outline:3px solid var(--pad-color);outline-offset:-4px}.cam-stage-still .cam-mini-wave i{transform:scaleY(.04);transition:none}
@media(max-width:760px){body dialog.cam-stage-dialog{width:calc(100% - 16px);max-height:calc(100dvh - 16px);border-radius:18px}.cam-room-header{padding:16px 18px}.cam-room-header h2{font-size:23px}.cam-room-body{grid-template-columns:minmax(0,1fr)}.cam-room-performance{padding:16px 20px 20px}.cam-projection{width:min(100%,320px);margin:0 auto 10px;aspect-ratio:1.5}.cam-game{border-left:0;border-top:1px solid #ffffff16;padding:20px}.cam-game h3{font-size:24px}.cam-game-board{height:220px}.cam-game-stats{margin-bottom:14px}.cam-stage-song h3{font-size:21px}.cam-stage-song p{margin-bottom:12px}.cam-stage-preferences{flex-wrap:wrap;padding:12px 16px}.cam-stage-preferences p{width:100%;margin-bottom:2px}.cam-mini-art{width:52px;height:55px}.cam-stage-launch{min-height:60px}.cam-stage-dock{inset-inline-end:10px}.cam-projection-caption{font-size:12px;letter-spacing:0}.cam-game-running .cam-projection{max-width:230px}.cam-game-running .cam-stage-song>span,.cam-game-running .cam-projection-caption{display:none}.cam-game-running .cam-room-performance{padding-top:10px;padding-bottom:16px}.cam-game-running .cam-stage-song p{margin-bottom:10px}}
@media(prefers-reduced-motion:reduce){.cam-stage-dialog *{transition:none!important;animation:none!important}.cam-stage-orbit{transform:none!important}.cam-mini-wave i{transition:none}}
@media(forced-colors:active){.cam-stage-dialog,.cam-game,.cam-game-board{background:Canvas!important;color:CanvasText!important}.cam-stage-dialog button{border:1px solid ButtonText}.cam-game-note{background:Highlight;box-shadow:none}.cam-hit-line{background:CanvasText}.cam-stage-glow,.cam-hit-glow{display:none}}

.cam-mobile-modes{display:none}
@media(max-width:760px){.cam-mobile-modes{display:flex;gap:5px;padding:12px 18px 0}.cam-stage-dialog .cam-mobile-modes button{flex:1;border-color:transparent;background:transparent;color:#9999a5}.cam-stage-dialog .cam-mobile-modes button[aria-pressed=true]{background:#26262e;color:#fff;border-color:#484851}.cam-stage-dialog[data-view=stage] .cam-game{display:none}.cam-stage-dialog[data-view=game] .cam-room-performance{display:none}.cam-stage-dialog[data-view=game] .cam-game{border-top:0;padding-top:18px}.cam-stage-dialog[data-view=game] .cam-stage-preferences{padding-top:10px}.cam-stage-dialog[data-view=game] .cam-game-board{height:240px}.cam-stage-dialog[data-view=game] .cam-room-header{padding-block:14px}}

/* Directional light lanes and a compact round scorecard. */
.cam-game-count{font-size:12px;white-space:nowrap}.cam-round-detail{display:flex;justify-content:space-between;gap:8px;color:#babac5;font-size:12px;font-variant-numeric:tabular-nums;margin:0 0 10px}.cam-round-detail span{white-space:nowrap}.cam-game-board{height:260px;background:linear-gradient(180deg,#0a0a0f,#191921)}.cam-game-note{height:30px;width:34px;border:1px solid #ffffff85;border-radius:8px;display:grid;place-content:center;color:#13131b;font:700 23px/1 Arial,sans-serif;font-style:normal}.cam-game-note.is-ready{box-shadow:0 0 24px var(--lane-color);border-color:#fff}.cam-piano-pads button span{font-size:24px;line-height:1}.cam-stage-dialog .cam-piano-pads button{min-height:44px}.cam-light-results{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:3px;margin:10px 0 0}.cam-light-results i{height:5px;border-radius:2px;background:#393941}.cam-light-results i[data-result=hit]{background:#d1c8ff}.cam-light-results i[data-result=miss]{background:#686877}.cam-game-board[data-judgment=perfect]{border-color:#bca3ec}.cam-game-board[data-judgment=good]{border-color:#9ecfc2}.cam-board-message{font-weight:550;color:#d7d7df}.cam-stage-dialog #cam-game-start{background:#f3f3f5;color:#111;border-color:#f3f3f5}.cam-stage-dialog #cam-game-start:hover{background:white;box-shadow:0 0 18px #c4a4ff22}.cam-game-stats strong{font-size:28px}.cam-game-stats{padding:14px 0;border-block:1px solid #ffffff14}.cam-game-help{min-height:42px;margin-bottom:10px}@media(max-width:680px){.cam-round-detail{font-size:12px}.cam-game{padding:20px}.cam-game-board{height:250px}.cam-game-stats strong{font-size:26px}}
body:has(.music-settings[open]) .cam-stage-dock{visibility:hidden;pointer-events:none}

/* Keep full-song light history compact on phones. */
.cam-light-results i[data-result=mixed]{background:linear-gradient(90deg,#d1c8ff 50%,#686877 50%)}
