@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--green:#a2ff39;--pink:#f641ef;--ink:#060629}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--ink);color:#f5f5ff;font-family:'Space Grotesk',Arial,sans-serif;touch-action:none}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}button:focus-visible,a:focus-visible{outline:2px solid var(--green);outline-offset:5px}button:disabled{opacity:.5}button[hidden],[hidden]{display:none!important}canvas{position:fixed;inset:0;width:100%;height:100%}.edge{position:fixed;top:22%;height:53%;width:1px;background:linear-gradient(transparent,#e62fff,transparent);box-shadow:0 0 24px #d42cff;pointer-events:none}.left{left:22px}.right{right:22px}header{position:fixed;top:0;left:0;right:0;padding:max(25px,env(safe-area-inset-top)) 36px 0;display:flex;gap:10px;align-items:center;z-index:5}.brand{font-weight:700;letter-spacing:4px;font-size:21px;color:#fff;text-decoration:none;margin-right:auto}.brand span{display:block;font-size:10px;letter-spacing:2px;color:#8d8da8;margin-top:6px}.icon{width:43px;height:43px;border:1px solid #ffffff22;background:#10103799;border-radius:50%;font-size:22px}main{position:absolute;inset:0;pointer-events:none}main button,main a,main section{pointer-events:auto}#menu{text-align:center;position:absolute;inset:0;padding-top:max(112px,16vh)}.eyebrow{font-size:12px;font-weight:600;letter-spacing:3px}.green{color:var(--green)}h1{font-family:'Barlow Condensed',Impact,sans-serif;font-size:clamp(72px,13vh,126px);line-height:.96;letter-spacing:4px;margin:14px 0 8px;font-style:italic;font-weight:800}h1 span{color:var(--green)}.intro{color:#aaa7ca;margin:0;font-size:16px}.menu-bottom{position:absolute;bottom:max(24px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(350px,calc(100% - 60px))}.instructions{font-size:14px;line-height:1.7;color:#bab8d0;margin-bottom:20px}.primary,.secondary{width:100%;min-height:52px;border-radius:5px;letter-spacing:1px;font-size:13px;font-weight:700;padding:15px}.primary{background:var(--green);border:0;color:#102009;box-shadow:0 0 28px #a2ff391a}.primary span{float:right;font-size:18px}.secondary{background:#161337b3;border:1px solid #ffffff25;margin-top:10px}.quiet{background:none;border:0;font-size:12px;color:#aaa6c8;padding:10px}#notice{font-size:12px;color:#9c98b7;min-height:16px;margin:12px 0}.meta{border-top:1px solid #ffffff16;padding-top:16px;display:flex;justify-content:space-between;color:#827d9f;font-size:10px;letter-spacing:1.5px}#qrButton{margin-top:5px}#hud{position:absolute;top:15%;width:100%;text-align:center}#hud .eyebrow{color:#9b94b8}#score{font-family:'Barlow Condensed',Impact,sans-serif;font-size:68px;color:var(--green);letter-spacing:4px;line-height:1.2;font-variant-numeric:tabular-nums}.stats{display:flex;justify-content:center;gap:28px;font-size:12px;letter-spacing:1px}#lives{color:var(--pink)}#combo{color:#b6b1d2}#overlay,#qr{position:absolute;inset:0;background:#060629d9;backdrop-filter:blur(14px);display:grid;place-items:center;z-index:10}.panel{width:min(350px,calc(100% - 60px));text-align:center}h2{font-family:'Barlow Condensed',Impact,sans-serif;font-size:54px;margin:15px 0}.panel p{font-size:15px;line-height:1.8;color:#b7b3ce}.panel img{border:12px solid white;border-radius:8px;max-width:100%;height:auto}footer{position:fixed;bottom:max(25px,env(safe-area-inset-bottom));width:min(430px,calc(100% - 70px));left:50%;transform:translateX(-50%);text-align:center}#feedback{font-size:14px;letter-spacing:3px;color:var(--green);height:30px}.progress{height:2px;background:#ffffff1c;margin:18px 0 10px}.progress i{display:block;width:0;height:100%;background:var(--pink);box-shadow:0 0 10px var(--pink)}.footer-row{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:1px;color:#a6a0be}.footer-row .quiet{padding:6px;font-size:11px}@media(min-width:700px){header{padding:32px 50px}.edge.left{left:15%}.edge.right{right:15%}.menu-bottom{bottom:30px}#menu{padding-top:12vh}}@media(max-height:700px){#menu{padding-top:90px}h1{font-size:66px}.instructions{margin:5px 0 10px;font-size:12px}.primary,.secondary{min-height:43px;padding:12px}.menu-bottom{bottom:12px}.meta{padding-top:10px}#notice{margin:7px 0}#hud{top:12%}#score{font-size:52px}}@media(prefers-reduced-motion:reduce){.edge{box-shadow:none}}

#party{position:fixed;inset:0;z-index:20;background:radial-gradient(ellipse at 70% 10%,#261060,#080627 65%);overflow-y:auto;touch-action:pan-y;padding:max(20px,env(safe-area-inset-top)) 24px max(28px,env(safe-area-inset-bottom))}#party *{touch-action:pan-y}.party-shell{max-width:460px;margin:auto}.party-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}.party-top .eyebrow{font-size:11px}.party-shell h2{font-size:54px;line-height:1;margin:10px 0 18px}.sub{font-size:14px;line-height:1.65;color:#b5acd1}.party-shell label{display:block;font-size:14px;color:#c8c3d9;margin:18px 0 12px}.party-shell input{display:block;width:100%;margin-top:8px;background:#ffffff09;border:1px solid #ffffff28;border-radius:5px;padding:14px 12px;font:inherit;font-size:16px;color:white;outline-color:var(--green)}.input-row{display:grid;grid-template-columns:2fr 1fr;gap:12px}.rules-note{font-size:13px;line-height:1.7;color:#a69cbd;margin:18px 0}.divider{display:flex;align-items:center;gap:12px;color:#827699;font-size:11px;letter-spacing:1px;margin:25px 0}.divider:before,.divider:after{content:'';height:1px;flex:1;background:#ffffff22}.room-heading{display:flex;justify-content:space-between;align-items:center}.room-heading h2{letter-spacing:5px;font-size:48px}.room-heading img{border:5px solid white;border-radius:4px}.tab-summary{font-size:23px;font-weight:600;margin:15px 0;color:var(--green)}.tab-summary small{display:block;font-size:12px;color:#a69cbd;margin-top:6px;font-weight:400}.player-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 0;border-bottom:1px solid #ffffff14;font-size:15px}.player-row small{display:block;color:#9c90b6;font-size:12px;margin-top:4px}.player-row .ready{color:var(--green);font-size:12px}.player-row .waiting{color:#a69cbd;font-size:12px}.player-row .amount{color:var(--green);font-size:22px;font-weight:600}.stakes{background:#ffffff06;padding:14px;font-size:13px;line-height:1.8;color:#c1b8d0;margin-top:16px;border:1px solid #ffffff12;border-radius:5px}.error{color:#ff8aac;line-height:1.6;font-size:14px;min-height:22px}#countdown{position:fixed;inset:0;z-index:25;display:grid;place-items:center;text-align:center;background:#080627f5}#countNumber{font-size:140px;color:var(--green);margin:24px 0;text-shadow:0 0 35px #a2ff3940}#countdown p{color:#b5acd1}.menu-bottom .instructions{margin-bottom:12px}.menu-bottom #touch{padding:9px}.menu-bottom #notice{margin:5px 0 10px}.menu-bottom .meta{padding-top:10px}

/* Keep the counter-rotating score inside the ring at every phone angle. */
#hud{left:50%;width:124px;transform:translate(-50%,-50%);transform-origin:center center;pointer-events:none}#hud .eyebrow{font-size:10px;letter-spacing:2px}#hud #score{font-size:clamp(28px,8vw,40px);line-height:1.1;letter-spacing:1px;margin:3px 0}#hud .stats{display:flex;flex-direction:column;gap:5px;font-size:10px;letter-spacing:.5px}#hud #lives{font-size:14px;letter-spacing:3px}.solo-hint{font-size:12px;color:#a9a2c1;margin:8px 0 2px}#soloFromRoom{display:block;margin:14px auto 0;text-decoration:underline}

#howTo{position:fixed;inset:0;z-index:40;display:grid;place-items:center;background:#080627f5;backdrop-filter:blur(16px);padding:24px;overflow-y:auto;touch-action:pan-y}#howTo .panel{width:min(360px,100%)}#howTo h2{font-size:42px}#howToText{font-size:18px!important;color:#eee8ff!important}

/* Temporary vocal tuning panel. */
#vocalOpen{width:auto;padding:0 8px;font-size:14px;letter-spacing:0}
#vocalPanel{position:fixed;inset:0;width:min(440px,calc(100% - 28px));max-height:calc(100dvh - 32px);margin:auto;overflow-y:auto;touch-action:pan-y;padding:24px;border:1px solid #8275b7;border-radius:16px;background:#0d0b2b;color:#f5f5ff;box-shadow:0 20px 90px #0009}
#vocalPanel::backdrop{background:#030318dc;backdrop-filter:blur(8px)}
.vocal-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.vocal-heading h2{font-size:34px;margin:8px 0 16px;line-height:1.1}.vocal-heading .eyebrow{font-size:12px;letter-spacing:1px}.vocal-heading .quiet{margin:0;padding:8px}
#vocalPanel label{display:block;font-size:16px;font-weight:600;margin:16px 0 8px}#vocalPanel select{display:block;width:100%;min-height:46px;padding:10px 12px;background:#1e1940;border:1px solid #726888;border-radius:7px;color:#fff;font:inherit;font-size:16px}
.vocal-volume-label{display:flex;align-items:baseline;justify-content:space-between}#vocalVolumeValue{color:var(--green);font-size:16px}#vocalVolume{display:block;width:100%;height:36px;accent-color:var(--green);touch-action:pan-x;padding:0;border:0;background:transparent}
#vocalPanel .vocal-help{font-size:14px;line-height:1.5;color:#bfb7d2;margin:10px 0 18px}.vocal-previews{display:flex;gap:8px}.vocal-previews .secondary{flex:1;font-size:14px;margin:0;padding:12px 8px}#vocalSave{margin-top:18px}#vocalPanel .quiet{font-size:14px}#vocalStatus{font-size:14px;line-height:1.5;color:var(--green);min-height:42px;margin:8px 0}#vocalPanel select:focus-visible,#vocalVolume:focus-visible{outline:2px solid var(--green);outline-offset:3px}
@media(max-width:440px){header{padding-left:20px;padding-right:20px;gap:6px}header .brand{letter-spacing:2px;font-size:17px}header .brand span{letter-spacing:1px;font-size:9px}header .icon{width:34px;height:38px}#vocalPanel{padding:20px}}
#vocalPanel{width:min(560px,calc(100% - 24px));padding:22px}#vocalPanel .audio-tabs{display:flex;gap:6px;margin:4px 0 18px;position:sticky;top:-22px;background:#0d0b2b;padding:10px 0;z-index:2}.audio-tabs button{flex:1;border:1px solid #615680;background:#171334;border-radius:8px;padding:12px 5px;font-size:14px}.audio-tabs button[aria-selected=true]{background:#a2ff39;color:#0c1120;border-color:#a2ff39;font-weight:700}
#vocalPanel .audio-control input[type=range],#previewProgress{width:100%;height:36px;padding:0;margin:0;border:0;accent-color:var(--green);touch-action:pan-x;background:transparent}#vocalPanel .audio-control label{margin-top:12px}#vocalPanel .audio-control output{font-size:14px;color:var(--green);white-space:nowrap}#vocalPanel .control-hint{font-size:14px;line-height:1.4;color:#aaa2c4;margin:3px 0 14px}.audio-pane{min-height:200px}.audio-listening{padding-top:12px;margin-top:20px;border-top:1px solid #615680}.audio-save{padding-top:6px}.lead-track{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid #43385f}#vocalPanel .lead-favorite{display:flex;align-items:flex-start;gap:12px;margin:0;flex:1;cursor:pointer}#vocalPanel .lead-favorite input{appearance:auto;width:20px;height:20px;margin:3px 0 0;padding:0;accent-color:var(--green);flex-shrink:0}.lead-favorite strong{font-size:16px;display:block;font-weight:600}.lead-favorite small{display:block;font-size:14px;line-height:1.4;color:#bfb6d3;margin-top:4px}#vocalPanel .lead-listen{border:1px solid #655583;border-radius:6px;padding:10px;min-width:66px}.audio-listening .vocal-previews{gap:6px}.audio-listening .vocal-previews button{font-size:14px}#previewProgressValue{font-size:14px;color:var(--green);white-space:nowrap}

#audioSignin{display:block;text-align:center;font-size:14px;color:#bfb7d2;padding:8px 0}
/* The existing score container keeps the countdown upright as the phone rotates. */
#hud.getting-ready #score,#hud.getting-ready .stats{display:none}#readyHud span{display:block;font-size:12px;letter-spacing:1px;color:#b9eaff;margin-top:6px}#readyNumber{display:block;font-size:44px;line-height:1.15;color:#e4f7ff;font-weight:700;margin:4px 0}

.social-dialog{color:#fff;background:#100e35;border:1px solid #62548f;border-radius:20px;width:min(440px,calc(100vw - 32px));max-height:85dvh;padding:24px;overflow:auto}.social-dialog::backdrop{background:#03031ae8}.social-dialog h2{font-size:28px;margin:14px 0 22px}.social-dialog label,.solo-name{display:block;font-size:14px;color:#c6bde0;margin:12px 0}.social-dialog input,.social-dialog select,.social-dialog textarea,.solo-name input{display:block;width:100%;box-sizing:border-box;padding:12px;border:1px solid #655681;border-radius:8px;background:#080725;color:#fff;font:inherit;font-size:16px;margin-top:7px}.social-dialog p{font-size:16px;line-height:1.5;overflow-wrap:anywhere}.solo-name{max-width:320px;margin:8px auto}.solo-name input{padding:8px 12px}#eliminationNotice{position:fixed;left:50%;top:50%;z-index:100;pointer-events:none;background:#171031ee;border:1px solid #f260ff;color:white;border-radius:14px;padding:18px 22px;text-align:center;font-size:20px;font-weight:600;max-width:75vmin;box-shadow:0 0 30px #f260ff33}#soloSaveStatus{font-size:14px}#menu{overflow-y:auto;max-height:calc(100dvh - 80px)}

#menu{padding:100px 24px 32px;max-height:100dvh;touch-action:pan-y}#menu .menu-bottom{position:relative;bottom:auto;left:auto;transform:none;margin:30px auto 0;width:min(350px,100%)}#menu h1{font-size:clamp(64px,10vh,100px);margin:12px 0 0}#menu .intro{margin:6px 0}#menu input,.social-dialog,.social-dialog *{touch-action:pan-y}#overlay{overflow:auto;padding:40px 0}#overlay .panel{margin:auto}#scoreBoard .player-row span{overflow-wrap:anywhere}.social-dialog .quiet{font-size:14px}

#personalScores{margin:18px 0;text-align:left;border-top:1px solid #ffffff20;padding-top:14px}#personalScores h3{font-size:18px;margin:0 0 10px;color:#e4ffbc}#personalScoreRows{padding-left:25px;margin:0}#personalScoreRows li{padding:5px 0 5px 4px;font-size:14px;color:#c4bfd9}#personalScoreRows li strong{float:right;color:#fff;font-size:16px;font-variant-numeric:tabular-nums}#personalScoreRows li.current-run,#personalScoreRows li.current-run strong{color:var(--green)}#personalScoresStatus{font-size:14px;line-height:1.4;margin:8px 0}#personalScoresStatus:empty{display:none}

.ready-confirmation{margin:18px 0 0;padding:18px;border:1px solid #a2ff3955;border-radius:8px;background:#a2ff3910;color:var(--green);font-size:20px;text-align:center}.ready-confirmation span{display:block;color:#c4bfd9;font-size:14px;line-height:1.5;margin-top:6px}#unreadyRoom{display:block;margin:0 auto 14px;font-size:14px}#joinOpen{border-color:#a2ff3966}#joinCodePane{padding-top:16px}