#rhythmGame[hidden]{display:none}#rhythmGame{position:fixed;inset:0;z-index:90;display:flex;justify-content:center;align-items:center;background:#080e15;color:#f3f5ef;font-family:Arial,sans-serif;overflow:auto;overscroll-behavior:contain;padding:18px;box-sizing:border-box}#rhythmGame *{box-sizing:border-box}#rhythmGame button,#rhythmGame select,#rhythmGame input{font:inherit}#rhythmGame button{cursor:pointer}#rhythmGame button:disabled{cursor:default;opacity:.5}.rhythm-shell{width:min(620px,100%);margin:auto;min-width:0}.rhythm-stats{display:flex;align-items:center;gap:32px;min-height:84px;padding:12px 8px 18px}.rhythm-stats small{display:block;font:10px Arial;letter-spacing:.15em;color:#9cabb7;margin-bottom:7px}.rhythm-stats b{font:700 32px/1 Arial;letter-spacing:-.03em;font-variant-numeric:tabular-nums}#rhythmTime{margin-left:auto;color:#94a9ad;font:12px monospace}#rhythmClose{border:1px solid #ffffff24;border-radius:50%;color:#e5eee8;background:none;padding:0;width:36px;height:36px;font:24px Arial;flex:none}
/* Translucent canvas. A local video is awaited; YouTube must not be overlaid. */
.rhythm-stage{position:relative;height:clamp(260px,52dvh,550px);border:1px solid #ffffff18;border-radius:8px;overflow:hidden;background:radial-gradient(ellipse at 72% 30%,#32505b80,transparent 55%),radial-gradient(ellipse at 15% 85%,#35275080,transparent 60%),#14202a}#rhythmCanvas{position:relative;width:100%;height:100%;display:block}#rhythmMessage{position:absolute;left:8%;right:8%;top:43%;padding:18px;background:#09131be8;border:1px solid #bce58a55;text-align:center;font-size:22px;font-weight:700;white-space:pre-line}#rhythmMessage[hidden]{display:none}#rhythmJudgement{position:absolute;left:0;right:0;top:24%;text-align:center;font:bold 23px Arial;color:#c2ed8d;text-shadow:0 2px 8px #000}#rhythmJudgement[data-kind=miss]{color:#e9a0d9}
.rhythm-pads{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:10px 0 18px;touch-action:none;user-select:none}.rhythm-pads button{height:62px;background:#13232e;border:1px solid color-mix(in srgb,var(--lane),transparent 65%);border-bottom:3px solid var(--lane);border-radius:5px;color:var(--lane);font-size:32px!important;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.rhythm-pads button.pressed{background:var(--lane);color:#10191b;transform:translateY(2px);border-bottom-width:1px}.rhythm-settings{display:grid;grid-template-columns:130px 1fr;gap:26px;margin:12px 0}.rhythm-settings label{display:flex;flex-wrap:wrap;justify-content:space-between;font:10px Arial;color:#a6b4bd;letter-spacing:.05em}.rhythm-settings select{width:100%;margin-top:6px;background:#162630;border:1px solid #ffffff30;color:#e6eee3;padding:8px}.rhythm-settings input{width:100%;accent-color:#c1ec8c;margin:10px 0 0}#rhythmSourceStatus,.rhythm-hint{font:11px/1.6 Arial;color:#a1aebb;margin:9px 0}.rhythm-hint{color:#81909a}.rhythm-primary{width:100%;border:0;border-radius:5px;background:#c1ec8c;color:#13231a;font-weight:700!important;padding:15px;margin-top:8px}
#rhythmGame:is([data-state=starting],[data-state=countdown],[data-state=playing]) :is(.rhythm-setup,#rhythmStart){display:none}.rhythm-2d #world,.rhythm-2d header,.rhythm-2d .actions,.rhythm-2d .touch-controls,.rhythm-2d footer,.rhythm-2d #discoveries,.rhythm-2d #streetSound{visibility:hidden}
#rhythmSaveScore[hidden]{display:none}.rhythm-save{background:#e4d59c}.rhythm-save:disabled{opacity:.5}#rhythmSaveNotice{font:12px/1.5 Arial;color:#f1cf83;margin:5px 0}#rhythmSaveNotice:empty{display:none}#rhythmScorePreview{width:min(580px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;padding:18px;border:1px solid #7d9598;background:#0c171c;color:#f2f4ee}#rhythmScorePreview::backdrop{background:#03090eee}.score-preview-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.score-preview-top button{background:#21353d;border:1px solid #637778;color:#fff;padding:10px;font-size:12px!important}#rhythmScorePreview p{font-size:12px;line-height:1.6}.score-download{display:block;background:#c3e98d;color:#142316;text-align:center;padding:13px;text-decoration:none;margin:12px 0;font-size:13px;font-weight:700}#rhythmScoreImage{display:block;width:100%;height:auto;user-select:auto;-webkit-touch-callout:default}
@media(max-width:650px){#rhythmGame{padding:10px}.rhythm-stats{gap:24px;min-height:74px}.rhythm-stats b{font-size:29px}.rhythm-stage{height:clamp(250px,49dvh,500px)}.rhythm-pads{gap:6px;margin-bottom:12px}.rhythm-pads button{height:60px}.rhythm-settings{grid-template-columns:115px 1fr;gap:18px}.rhythm-primary{padding:14px 8px}#rhythmScorePreview{padding:12px}}
@media(max-height:650px){#rhythmGame{align-items:flex-start}.rhythm-stage{height:260px}.rhythm-stats{min-height:65px}.rhythm-pads button{height:48px}}
/* Original retro arcade treatment: hard edges, beveled arrows and outlined numerals. */
#rhythmGame{background:radial-gradient(ellipse at 50% 15%,#241343,#080816 75%)}.rhythm-stage{border-radius:0;border:2px solid #8784ad;background:#17172c}#rhythmDanceVideo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:.48;filter:saturate(.78);pointer-events:none}.rhythm-stage[data-video-status=fallback] #rhythmDanceVideo{opacity:.3}.rhythm-stats{gap:28px;padding:9px 4px 16px}.rhythm-stats small{font:italic 900 12px Arial Black,Arial;letter-spacing:0;color:#9cfaff;margin-bottom:5px;text-shadow:1px 2px #23124a}.rhythm-stats b{display:block;font:italic 900 39px/1 Arial Black,Arial,sans-serif;letter-spacing:-.06em;color:#fff173;-webkit-text-stroke:1px #221238;paint-order:stroke fill;text-shadow:2px 3px #a56430,3px 4px #000}.rhythm-stats>div:nth-child(2) b{color:#73f2ff;font-size:32px}#rhythmTime{font:bold 12px monospace;color:#aca1c7}#rhythmClose{border-radius:0;border:2px solid #aaa2bd;background:#1c1730;box-shadow:2px 2px #080511}#rhythmJudgement{font:italic 900 30px Arial Black,Arial,sans-serif;top:26%;color:#fff17b;-webkit-text-stroke:2px #35223f;paint-order:stroke fill;text-shadow:2px 3px #ffffff,4px 5px #180b27}#rhythmJudgement[data-kind=great]{color:#9cff6a}#rhythmJudgement[data-kind=good]{color:#79eaff}#rhythmJudgement[data-kind=miss]{color:#c490be;text-shadow:2px 2px #170c2d}#rhythmTiming{position:absolute;top:calc(26% + 39px);left:0;right:0;text-align:center;color:#eae6ff;font:italic 900 10px Arial;text-shadow:1px 1px #000}.rhythm-pads{gap:6px;margin:8px 0 14px}.rhythm-pads button{border-radius:0;border:2px solid #585377;border-bottom:4px solid var(--lane);background:linear-gradient(#383451,#171329);padding:0}.rhythm-pads canvas{display:block;width:68px;height:58px;margin:auto;pointer-events:none}.rhythm-primary{border-radius:0;background:linear-gradient(#fff382,#e7b446);border:2px solid #fff3be;box-shadow:0 3px #724c32;font:italic 900 14px Arial!important}.rhythm-save{background:linear-gradient(#a8f8ff,#5dceec);border-color:#dcffff;box-shadow:0 3px #2c657e}
#rhythmResultImage{display:block;width:100%;height:auto;max-height:calc(100dvh - 190px);object-fit:contain}#rhythmResultImage[hidden]{display:none}#rhythmGame[data-state=result] .rhythm-shell{width:min(510px,100%)}#rhythmGame[data-state=result] :is(.rhythm-stage,.rhythm-pads,.rhythm-setup,.rhythm-stats>div,#rhythmTime){display:none}#rhythmGame[data-state=result] .rhythm-stats{min-height:38px;justify-content:flex-end;padding:0 0 6px}#rhythmGame[data-state=result] #rhythmClose{width:28px;height:28px;font-size:20px}#rhythmGame[data-state=result] .rhythm-primary{padding:11px;margin-top:7px}
@media(max-width:650px){.rhythm-stats{gap:21px}.rhythm-stats b{font-size:32px}.rhythm-stats>div:nth-child(2) b{font-size:28px}#rhythmJudgement{font-size:26px}.rhythm-pads canvas{width:64px;height:55px}.rhythm-stage{height:clamp(250px,53dvh,500px)}}
/* Final play HUD: combo belongs beside judgment, with no extra title or prose. */
#rhythmComboDisplay{position:absolute;left:38%;right:38%;top:calc(26% + 54px);text-align:center;pointer-events:none;color:#83f4ff;text-shadow:2px 3px #311441;-webkit-text-stroke:1px #171027;paint-order:stroke fill;line-height:1}#rhythmComboDisplay[hidden]{display:none}#rhythmComboDisplay b{font:italic 900 30px/1 Arial Black,Arial}#rhythmComboDisplay small{display:block;font:italic 900 9px/1.1 Arial;margin-top:3px;color:#fff1a9;-webkit-text-stroke:0}#rhythmReturn{width:100%;border:1px solid #8b7f9b;background:#221830;color:#e2d8f4;padding:10px;margin-top:7px;font-size:13px!important}#rhythmReturn[hidden]{display:none}#rhythmGame[data-state=result] #rhythmClose{display:none}#rhythmGame[data-state=result] .rhythm-stats{display:none}#rhythmResultImage{max-height:calc(100dvh - 200px)}#rhythmGame[data-state=result] .rhythm-primary{box-shadow:none}
@media(max-width:650px){#rhythmComboDisplay b{font-size:25px}#rhythmComboDisplay{top:calc(26% + 49px)}}
@media(prefers-reduced-motion:reduce){#rhythmDanceVideo{opacity:.32}}

/* The entry screen starts at START. Game HUD and notes appear only after it. */
#rhythmGame:is([data-state=loading],[data-state=ready],[data-state=paused],[data-state=error]) :is(.rhythm-stats,.rhythm-stage,.rhythm-pads){display:none}
#rhythmGame:is([data-state=loading],[data-state=ready],[data-state=paused],[data-state=error]) .rhythm-shell{width:min(520px,100%);padding:20px 12px}
#rhythmGame:is([data-state=loading],[data-state=ready],[data-state=paused],[data-state=error]) #rhythmStart{position:relative;isolation:isolate;border:5px solid #09030d;border-radius:0;background:#ffe735;color:#fff;padding:24px 12px 30px;margin:0 0 15px;min-height:115px;box-shadow:inset 0 7px #fff8ae,inset 7px 0 #fff8ae,inset -8px -10px #ee7900,0 9px 0 1px #ed0089,0 14px 0 4px #08010d;font:italic 900 clamp(42px,10vw,64px)/1 Arial Black,Impact,Arial,sans-serif!important;letter-spacing:-.04em;-webkit-text-stroke:3px #15051e;paint-order:stroke fill;text-shadow:4px 5px #ef008c,6px 7px #14051f}
#rhythmGame:is([data-state=loading],[data-state=ready],[data-state=paused],[data-state=error]) #rhythmStart::before,#rhythmGame:is([data-state=loading],[data-state=ready],[data-state=paused],[data-state=error]) #rhythmStart::after{content:'★';position:absolute;top:38%;font:900 23px/1 Arial;color:#ff19b5;-webkit-text-stroke:2px #160820;text-shadow:2px 3px #fff;pointer-events:none}
#rhythmGame #rhythmStart::before{left:7%}#rhythmGame #rhythmStart::after{right:7%}
#rhythmGame:is([data-state=ready],[data-state=paused],[data-state=error]) #rhythmStart:active{transform:translateY(7px);box-shadow:inset 0 4px #fff8ae,inset 5px 0 #fff8ae,inset -6px -7px #ee7900,0 3px 0 1px #ed0089,0 7px 0 4px #08010d}
#rhythmGame #rhythmStart:focus-visible{outline:3px solid #6af5ff;outline-offset:9px}
.rhythm-setup{margin-top:24px}.rhythm-setup summary{font:900 11px Arial;color:#b5a7c3;cursor:pointer;letter-spacing:.08em;padding:8px 0}
#rhythmStartStatus{font:13px/1.5 Arial;color:#e4d7ee;margin:24px 0 8px;text-align:center}#rhythmStartStatus:empty{display:none}
#rhythmGame:is([data-state=starting],[data-state=countdown],[data-state=playing],[data-state=result]) #rhythmStartStatus{display:none}
#rhythmGame:is([data-state=paused],[data-state=error]) #rhythmStart{font-size:26px!important;-webkit-text-stroke:1px #15051e}

/* Image-generated START art; the button remains a native control. */
#rhythmGame[data-state=ready] #rhythmStart[data-illustrated=true]{border:0;background:none;box-shadow:none;padding:0;min-height:0;margin:0 0 10px;line-height:0;transform:none;text-shadow:none;-webkit-text-stroke:0}
#rhythmGame[data-state=ready] #rhythmStart[data-illustrated=true]::before,#rhythmGame[data-state=ready] #rhythmStart[data-illustrated=true]::after{display:none}
#rhythmStart[data-illustrated=true] img{display:block;width:100%;height:auto;pointer-events:none;user-select:none;-webkit-user-drag:none}
#rhythmGame[data-state=ready] #rhythmStart[data-illustrated=true]:active{transform:translateY(4px) scale(.985);filter:brightness(.94);box-shadow:none}

#rhythmStart[hidden]{display:none}

/* Mobile saves use the original PNG in a minimal, long-pressable image view. */
#rhythmScorePreview[data-mode=mobile]{width:min(1080px,100vw);max-width:100vw;max-height:100dvh;padding:0;border:0;border-radius:0;background:#080816;overscroll-behavior:contain}
#rhythmScorePreview[data-mode=mobile] :is(.score-preview-top strong,p,#rhythmDownload){display:none}
#rhythmScorePreview[data-mode=mobile] .score-preview-top{position:sticky;top:0;z-index:1;justify-content:flex-end;background:#080816;padding:8px max(10px,env(safe-area-inset-right)) 8px max(10px,env(safe-area-inset-left))}
#rhythmScorePreview[data-mode=mobile] #rhythmScoreClose{min-height:44px;border-radius:0;padding:10px 18px}
#rhythmScorePreview[data-mode=mobile] #rhythmScoreImage{width:100%;height:auto;max-height:none;touch-action:auto;user-select:auto;-webkit-user-select:auto;-webkit-touch-callout:default}