@font-face{font-family:Montserrat;src:url('assets/montserrat.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{--deep:#003c2c;--green:#00a65e;--lime:#d8ed00;--cream:#f9fbef;--muted:#a9c3b5;--font:Montserrat,Arial,sans-serif;--ring:464.956}
*{box-sizing:border-box}html{background:var(--deep);height:100%;color-scheme:dark}body{margin:0;min-height:100svh;display:flex;flex-direction:column;color:var(--cream);font-family:var(--font);-webkit-font-smoothing:antialiased;background:radial-gradient(ellipse at 87% 35%,#12664055 0,transparent 48%),var(--deep);overflow-x:hidden}button,input{font:inherit}button{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:disabled{cursor:default}button,a,input{outline-offset:5px}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--lime)}button{border:0}a{color:inherit}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.filled{fill:currentColor;stroke:none}[hidden]{display:none!important}.icon-defs{position:absolute;width:0;height:0;overflow:hidden}.skip-link{position:fixed;left:15px;top:-100px;z-index:100;background:var(--lime);color:var(--deep);padding:15px}.skip-link:focus{top:15px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;clip:rect(0,0,0,0);overflow:hidden;white-space:nowrap}.lime,em{color:var(--lime)}em{font-style:normal}.green{color:#008e50}.topbar{width:100%;max-width:1440px;margin:0 auto;display:flex;align-items:center;gap:25px;padding:24px clamp(24px,4.5vw,68px) 14px}.brand{display:block;flex:none;width:194px;line-height:0}.brand img{display:block;width:100%;height:auto}.event-label{margin-left:auto;display:flex;flex-direction:column;gap:9px;align-items:flex-end}.event-label>span{font-size:13px;letter-spacing:.12em;font-weight:750;display:flex;align-items:center;gap:9px}.event-label i,.tag-dot{display:inline-block;border-radius:50%;width:6px;height:6px;background:var(--lime);flex:none}.event-label small{font-size:8px;letter-spacing:.14em;color:var(--muted);font-weight:550}.icon-button{color:inherit;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:transparent;border:1px solid #ffffff24;flex:none}.icon-button:hover{background:#ffffff10}.fullscreen-button{margin-left:12px}.fullscreen-button svg{width:18px;height:18px}main{width:100%;max-width:1336px;padding:20px clamp(24px,4.5vw,68px) 30px;flex:1;display:flex;flex-direction:column;align-self:center}.screen{width:100%;margin:auto 0}.home{display:grid;grid-template-columns:1.1fr 1fr;gap:0 26px;align-items:center}.eyebrow{font-size:10px;font-weight:750;letter-spacing:.16em;line-height:1.4}.hero-copy .eyebrow{display:flex;align-items:center;gap:10px;color:#d9ebd4}.tiny-line{height:1px;width:27px;background:var(--lime)}h1{font-size:clamp(54px,5.7vw,83px);font-weight:850;line-height:.98;letter-spacing:-.065em;margin:24px 0 22px;outline:none}h1 em{white-space:nowrap}.hero-intro{font-size:clamp(16px,1.4vw,19px);line-height:1.55;color:#e1eadd;margin:0 0 28px;letter-spacing:-.02em}.hero-intro strong{font-weight:700;color:var(--cream)}.button{min-height:62px;padding:17px 25px;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:24px;font-size:15px;font-weight:750;line-height:1.3;transition:background .18s,transform .18s,box-shadow .18s}.button svg{width:21px;height:21px}.primary{background:var(--lime);color:var(--deep)}.primary:not(:disabled):hover{background:#e4f625;box-shadow:0 6px 26px #d8ed0014}.button:not(:disabled):active{transform:scale(.985)}.primary:disabled{background:#476f53;color:#cedac6;opacity:.66}.start-button{min-width:290px;justify-content:space-between;width:max-content;max-width:100%}.text-button{background:transparent;color:inherit;padding:10px 0;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:12px;font-size:12px;font-weight:600;line-height:1.4}.text-button:hover{color:var(--lime)}.text-button svg{width:16px;height:16px}.how-link{margin-top:9px;color:#c3d5c8;font-size:11px}.how-link span{color:var(--lime);font-size:17px}.hero-art{width:100%;aspect-ratio:1;position:relative;isolation:isolate;margin-top:-8px;max-width:510px;justify-self:center}.orbit{position:absolute;border:1px solid #99c65525;border-radius:50%;inset:14%;transform:none}.orbit-one{inset:4%}.orbit-two{inset:14%;border-style:dashed;border-color:#b8d47820}.orbit-three{inset:24%;border-color:#b8d47814}.orbit-point{position:absolute;width:7px;height:7px;background:var(--lime);border-radius:50%;box-shadow:0 0 18px #d8ed0055}.point-one{right:16%;top:14%}.point-two{left:10%;bottom:24%;width:5px;height:5px}.headphone-art{position:absolute;width:94%;height:94%;object-fit:contain;top:3%;left:2%;filter:drop-shadow(0 24px 25px #001f1a88);animation:float 7s ease-in-out infinite}.art-caption{position:absolute;top:2%;left:24%;font-size:8px;letter-spacing:.18em;color:#a2bf8e;font-weight:650;transform:rotate(-9deg)}.seconds-sticker{position:absolute;right:-1%;top:9%;width:105px;height:105px;border-radius:50%;background:var(--lime);color:var(--deep);display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(9deg);box-shadow:0 7px 25px #001f1a44}.seconds-sticker strong{font-size:43px;font-weight:850;letter-spacing:-.08em;line-height:1}.seconds-sticker span{font-size:7px;font-weight:800;line-height:1.45;letter-spacing:.03em;text-align:center;margin-top:5px}.art-spark{position:absolute;color:var(--lime);line-height:1}.spark-one{left:3%;top:17%;font-size:39px;transform:rotate(13deg)}.spark-two{right:4%;bottom:18%;font-size:24px}.art-tag{position:absolute;bottom:7%;left:50%;transform:translateX(-50%) rotate(-5deg);background:#f9fbef;color:var(--deep);font-size:8px;letter-spacing:.08em;white-space:nowrap;padding:12px 17px;border-radius:4px;display:flex;align-items:center;gap:8px;font-weight:750;box-shadow:0 6px 20px #001f1a44}.art-tag .tag-dot{background:#00a65e;width:5px;height:5px}.how-strip{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #c0d8ab2d;margin-top:34px;padding-top:24px;gap:24px}.how-strip>div{display:flex;align-items:center;gap:15px}.how-strip>div+div{border-left:1px solid #c0d8ab2d;padding-left:26px}.step-num{font-size:11px;font-weight:600;color:var(--lime);letter-spacing:-.03em;border:1px solid #d8ed004d;display:grid;place-items:center;width:35px;height:35px;border-radius:50%;flex:none}.how-strip p{display:flex;flex-direction:column;margin:0;gap:7px}.how-strip strong{font-size:13px;letter-spacing:-.02em;font-weight:750}.how-strip small{font-size:9px;color:var(--muted);line-height:1.5}.footer{display:flex;align-items:center;justify-content:space-between;gap:15px;width:100%;max-width:1440px;margin:0 auto;padding:10px clamp(24px,4.5vw,68px) max(20px,env(safe-area-inset-bottom));color:#b1c6b7;min-height:53px}.footer-location{display:flex;align-items:center;gap:7px;font-size:8px;letter-spacing:.08em;white-space:nowrap;margin:0}.footer .tag-dot{width:4px;height:4px}.legal{font-size:8px;font-style:italic;white-space:nowrap;margin:0;color:#9fb9a8}.settings-link{display:flex;align-items:center;gap:7px;color:#b1c6b7;background:transparent;padding:10px 0 10px 10px;font-size:9px;min-height:40px}.settings-link:hover{color:var(--cream)}.settings-link svg{width:14px;height:14px}.load-error{padding:20px;border:1px solid #d8ed004d;border-radius:12px;text-align:center}.load-error .text-button{margin-left:10px}
/* A single music round. */
.screen-top{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:8px}.screen-top>.eyebrow{color:#adc5b1}.exit-game{font-size:11px;color:#c4d5c8}.screen-title{font-size:clamp(36px,4.2vw,60px);letter-spacing:-.06em;line-height:1.06;margin:0 0 14px;font-weight:800;outline:none}.screen-subtitle{font-size:14px;color:#bcd0c0;line-height:1.5;margin:0 0 30px}.game-grid{display:grid;grid-template-columns:.8fr 1.35fr;gap:30px;align-items:stretch}.player-panel{position:relative;display:flex;flex-direction:column;align-items:center;border:1px solid #bad3993d;border-radius:20px;background:#164f3899;padding:22px 24px 15px;min-width:0}.player-top{display:flex;align-items:center;gap:9px;width:100%;font-size:8px;letter-spacing:.1em;font-weight:650;color:#c3d6be}.player-top svg{width:15px;height:15px}.audio-dot{width:5px;height:5px;background:#7ea28b;border-radius:50%;margin-left:auto}.is-playing .audio-dot{background:var(--lime);box-shadow:0 0 8px #d8ed0099;animation:breathe 1s infinite}.record-control{position:relative;width:164px;height:164px;display:grid;place-items:center;margin-top:20px}.progress-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);stroke-width:2}.ring-track{stroke:#8ba7784d}#ring-progress{stroke:var(--lime);stroke-dasharray:var(--ring);stroke-dashoffset:var(--ring);transition:stroke-dashoffset .12s linear}.play-button{width:125px;height:125px;display:grid;place-items:center;border-radius:50%;color:var(--deep);background:var(--lime);box-shadow:0 0 0 8px #d8ed0008;transition:transform .18s,background .18s}.play-button:active{transform:scale(.96)}.play-button:hover{background:#e4f625}.play-button svg{width:40px;height:40px}.play-button:disabled{background:#789951;color:#244c33}.remaining{position:absolute;right:-3px;bottom:9px;background:var(--cream);color:var(--deep);border-radius:30px;padding:8px 9px;min-width:38px;font-size:13px;line-height:1;font-weight:800;text-align:center;letter-spacing:-.04em}.waveform{display:flex;align-items:center;justify-content:center;gap:2px;height:40px;width:100%;margin-top:20px;overflow:hidden}.waveform span{flex:1;max-width:4px;min-width:1px;background:#7699685e;border-radius:2px;transition:background .1s}.waveform span.played{background:var(--lime)}.player-time{display:flex;justify-content:space-between;width:100%;color:#adc6ae;font-size:9px;letter-spacing:.07em;margin-top:7px;font-variant-numeric:tabular-nums}.listen-hint{font-size:10px;color:#d7e3ce;text-align:center;margin:15px 0 4px;min-height:16px;line-height:1.5}.answer-panel{display:flex;flex-direction:column;justify-content:center;min-width:0}.answer-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}.answer-heading>.eyebrow{font-size:9px}.answer-heading>span+span{font-size:7px;color:#adc5b1;letter-spacing:.07em}.answers{display:grid;grid-template-columns:1fr 1fr;gap:12px}.answer{position:relative;background:var(--cream);color:var(--deep);border:2px solid transparent;border-radius:13px;display:flex;align-items:center;gap:13px;min-height:108px;padding:18px;text-align:left;transition:border-color .15s,background .15s,transform .15s}.answer:not(:disabled):hover{background:#eef5da;border-color:#a9cd69}.answer:not(:disabled):active{transform:scale(.98)}.answer:disabled{opacity:.65}.answer[aria-pressed=true]{background:#e4f576;border-color:var(--lime);box-shadow:0 0 0 2px #d8ed0028}.answer-letter{font-size:11px;font-weight:750;display:grid;place-items:center;width:30px;height:30px;border:1px solid #7a9b6a55;border-radius:50%;flex:none}.answer[aria-pressed=true] .answer-letter{background:var(--deep);border-color:var(--deep);color:var(--lime)}.answer-letter svg{width:16px;height:16px}.answer-copy{display:flex;flex-direction:column;gap:7px;min-width:0}.answer-copy strong{font-size:13px;line-height:1.3;letter-spacing:-.03em;font-weight:800}.answer-copy small{font-size:10px;line-height:1.3;color:#52744b}.confirm-button{width:100%;margin-top:18px;justify-content:space-between}.answer-hint{text-align:center;font-size:9px;color:#adc5b1;line-height:1.6;margin:12px 0 0;min-height:14px}.game{padding-bottom:15px}
/* Results remain clear on a shared tablet. */
.result{max-width:610px;align-self:center;text-align:center;padding:4px 0 0}.result-mark{width:114px;height:114px;margin:0 auto 22px;display:grid;place-items:center;position:relative;isolation:isolate}.result-mark>span{position:absolute;inset:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 10px #d8ed0015,0 0 0 22px #d8ed0008}.result-mark>svg{position:relative;color:var(--deep);width:49px;height:49px;stroke-width:2.5}.result-spark{position:absolute;font-style:normal;color:var(--lime);font-size:22px;animation:pop .5s both}.result-spark.one{left:-29px;top:22px}.result-spark.two{right:-24px;top:3px;font-size:27px}.result-spark.three{right:-35px;bottom:8px;font-size:14px}.result .eyebrow{font-size:9px;letter-spacing:.17em;color:#d5e6c9;margin:0 0 14px}.result-title{font-size:clamp(44px,5vw,70px);line-height:1;letter-spacing:-.065em;margin:0 0 16px;font-weight:850;outline:none}.result-copy{font-size:14px;color:#c5d6c6;line-height:1.6;margin:0 0 26px}.song-reveal{display:flex;align-items:center;text-align:left;gap:18px;background:var(--cream);border-radius:15px;padding:19px 24px;color:var(--deep);max-width:470px;margin:0 auto}.song-icon{display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:50%;background:#e6eecc}.song-icon svg{width:25px;height:25px}.song-reveal p{display:flex;flex-direction:column;gap:6px;margin:0;min-width:0}.song-reveal small{font-size:7px;letter-spacing:.12em;font-weight:650;color:#597553}.song-reveal strong{font-size:18px;font-weight:800;letter-spacing:-.03em;line-height:1.2}.song-reveal p>span{font-size:11px;color:#52744b}.correct-icon{margin-left:auto;width:20px;height:20px;color:#008c49}.result-actions{display:flex;align-items:center;flex-direction:column;gap:9px;margin-top:25px}.result-actions>.button{width:100%;max-width:470px;justify-content:space-between}.result-actions>.text-button{color:#d3e0ce;font-size:11px}.result-actions>.text-button:hover{color:var(--lime)}.wrong-answer{font-size:11px;color:#c5d6c6;margin:14px 0 0}.reset-hint{height:16px;font-size:8px;color:#9ab7a0;margin:10px 0 0}.result.is-wrong .result-mark>span{background:#d1e2c2;box-shadow:0 0 0 10px #d1e2c210,0 0 0 22px #d1e2c208}.result.is-wrong .result-spark{display:none}
/* Staff settings and instructions. */
dialog{color-scheme:light}.modal{color:var(--deep);background:var(--cream);border:0;border-radius:23px;padding:28px 30px;width:min(550px,calc(100% - 32px));max-height:calc(100svh - 44px);box-shadow:0 30px 100px #001e1acc;overflow:auto;overscroll-behavior:contain}.modal::backdrop{background:#001d16c9;backdrop-filter:blur(8px)}.modal :focus-visible{outline-color:#00894e}.modal-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:12px}.modal-heading>.eyebrow{font-size:8px;color:#52744b}.modal .icon-button{border-color:#003c2c22;width:36px;height:36px}.modal .icon-button svg{width:17px;height:17px}.modal .icon-button:hover{background:#003c2c0a}.modal h2{font-size:30px;line-height:1.12;letter-spacing:-.05em;font-weight:800;margin:0 0 20px}.modal h2 em{color:#008e50}.modal .button{width:100%;margin-top:20px;font-size:12px;min-height:54px;justify-content:space-between}.how-instructions{list-style:none;display:flex;flex-direction:column;gap:21px;padding:0;margin:28px 0}.how-instructions li{display:flex;gap:16px;align-items:flex-start}.how-instructions li>span{width:31px;height:31px;display:grid;place-items:center;background:#e5edc6;border-radius:50%;font-size:10px;font-weight:700;flex:none}.how-instructions strong{font-size:13px}.how-instructions p{font-size:12px;color:#52744b;line-height:1.6;margin:5px 0 0}.modal-intro{font-size:11px;line-height:1.65;color:#52744b;margin:-8px 0 22px}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 0;border-top:1px solid #d9e2d1}.setting-row>div:first-child,.setting-row>label{display:flex;flex-direction:column;gap:6px}.setting-row strong{font-size:12px;font-weight:750}.setting-row small{font-size:10px;color:#5c7855;line-height:1.6;max-width:330px}.segmented{display:flex;flex:none;gap:3px;background:#e3ebd7;padding:4px;border-radius:9px}.segmented button{min-height:36px;min-width:54px;padding:7px 10px;background:transparent;color:var(--deep);font-size:11px;border-radius:6px}.segmented button[aria-pressed=true]{background:var(--deep);color:var(--cream);font-weight:700}.volume-row{flex-wrap:wrap}.volume-control{display:flex;align-items:center;gap:10px;width:47%;min-width:160px}.volume-control input{width:100%;accent-color:#00894e;min-height:35px}.volume-control output{font-size:10px;min-width:30px;font-variant-numeric:tabular-nums}.switch{appearance:none;-webkit-appearance:none;width:43px;height:25px;border-radius:25px;background:#bdcdb3;flex:none;position:relative;cursor:pointer;margin:0;transition:background .2s}.switch:after{content:'';position:absolute;left:3px;top:3px;width:19px;height:19px;border-radius:50%;background:white;transition:transform .2s}.switch:checked{background:#00894e}.switch:checked:after{transform:translateX(18px)}.playlist-heading{display:flex;align-items:center;justify-content:space-between;margin:24px 0 8px;font-size:13px}.playlist-heading>span{font-size:10px;font-weight:550;color:#52744b}.playlist-help{font-size:9px;color:#52744b;margin:0 0 13px}.playlist{border-top:1px solid #d9e2d1}.playlist-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #d9e2d1;min-height:53px;cursor:pointer}.playlist-row input{width:19px;height:19px;accent-color:#00894e;cursor:pointer;flex:none}.playlist-row>span{display:flex;flex-direction:column;gap:4px}.playlist-row strong{font-size:11px;font-weight:700}.playlist-row small{font-size:9px;color:#52744b}.station-stats{display:flex;gap:20px;margin:24px 0 12px;align-items:center}.station-stats>div:not(.offline-info){display:flex;flex-direction:column;gap:5px;flex:none}.station-stats strong{font-size:25px;font-weight:800;letter-spacing:-.04em}.station-stats span{font-size:8px;color:#52744b}.offline-info{display:flex;gap:7px;align-items:center;margin-left:auto;max-width:140px}.offline-dot{width:6px;height:6px;border-radius:50%;background:#bd9a40;flex:none}.offline-dot.ready{background:#00894e}.offline-info p{font-size:9px;color:#52744b;line-height:1.5;margin:0}.stats-note{font-size:8px;color:#6b8263;line-height:1.6;margin:0}.dark-button{background:var(--deep);color:var(--cream)}.dark-button:hover{background:#006045}.toast{position:fixed;z-index:1000;left:50%;transform:translateX(-50%);bottom:max(24px,env(safe-area-inset-bottom));padding:15px 21px;max-width:min(90vw,530px);width:max-content;border-radius:12px;background:var(--cream);color:var(--deep);font-size:12px;font-weight:550;line-height:1.6;text-align:center;box-shadow:0 12px 50px #001d1688;pointer-events:none}
@keyframes float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(1deg)}}@keyframes breathe{50%{opacity:.5}}@keyframes pop{0%{transform:scale(.5);opacity:0}100%{transform:scale(1);opacity:1}}
@media(min-width:1400px) and (min-height:850px){.topbar{padding-top:34px}.brand{width:214px}.hero-art{max-width:550px}.home{gap:20px 40px}.how-strip{margin-top:48px;padding-top:28px}.how-strip strong{font-size:14px}.how-strip small{font-size:10px}.game-grid{gap:40px}.player-panel{padding:27px 30px 23px}.record-control{margin-top:27px}.answer{min-height:117px}.answer-copy strong{font-size:15px}}
@media(max-width:1000px){.topbar{padding-top:18px}.brand{width:177px}main{padding-top:15px}.hero-art{max-width:390px}.home{grid-template-columns:1.1fr 1fr;gap:0 12px}h1{font-size:clamp(46px,6vw,60px)}.hero-intro{font-size:16px}.seconds-sticker{width:85px;height:85px;right:-1%}.seconds-sticker strong{font-size:34px}.seconds-sticker span{font-size:6px}.how-strip{gap:15px;margin-top:29px;padding-top:22px}.how-strip>div{gap:10px}.how-strip>div+div{padding-left:17px}.how-strip small{font-size:8px}.how-strip strong{font-size:11px}.game-grid{gap:20px;grid-template-columns:.8fr 1.3fr}.player-panel{padding:20px 19px 16px}.answer{gap:9px;padding:14px;min-height:105px}.answer-copy strong{font-size:12px}.answer-copy small{font-size:9px}.answer-letter{width:26px;height:26px;font-size:10px}.screen-subtitle{margin-bottom:25px}}
@media(min-width:721px) and (max-height:800px){.topbar{padding-top:15px;padding-bottom:5px}.brand{width:150px}main{padding-top:10px;padding-bottom:18px}h1{font-size:clamp(46px,5.2vw,67px);margin-top:17px;margin-bottom:18px}.hero-intro{margin-bottom:19px;font-size:16px}.hero-art{max-width:370px}.how-strip{margin-top:17px;padding-top:18px}.button{min-height:55px}.footer{padding-bottom:12px}.screen-title{font-size:43px;margin-bottom:11px}.screen-subtitle{margin-bottom:20px;font-size:12px}.screen-top{margin-bottom:1px}.record-control{width:139px;height:139px;margin-top:12px}.play-button{width:105px;height:105px}.play-button svg{width:35px;height:35px}.player-panel{padding-top:16px}.waveform{margin-top:15px;height:32px}.listen-hint{margin-top:10px}.answer{min-height:93px}.game{padding-bottom:0}.result-mark{width:88px;height:88px;margin-bottom:20px}.result-title{font-size:52px}.result-copy{margin-bottom:20px}.result-actions{margin-top:20px}.result-actions .text-button{min-height:34px;padding:6px 0}.reset-hint{margin-top:4px}.song-reveal{padding:16px 23px}}
@media(max-width:720px){.topbar{padding:18px 24px 6px;gap:12px}.brand{width:148px}.event-label{gap:6px}.event-label>span{font-size:8px;letter-spacing:.05em;gap:5px}.event-label i{width:4px;height:4px}.event-label small{font-size:6px;letter-spacing:.045em}.fullscreen-button{display:none}main{padding:18px 24px 20px}.home{display:grid;grid-template-columns:1fr;gap:0;text-align:center}.hero-copy{position:relative;z-index:1}.hero-copy .eyebrow{justify-content:center;font-size:8px;letter-spacing:.14em}.tiny-line{width:18px}h1{font-size:clamp(43px,10.8vw,66px);line-height:.97;margin:17px 0 17px;letter-spacing:-.06em}.hero-intro{font-size:14px;line-height:1.55;margin:0 0 20px}.hero-intro br{display:none}.hero-intro strong:after{content:' '}.start-button{min-width:0;width:100%;max-width:370px;min-height:58px;margin:0 auto;padding:17px 22px;font-size:14px}.how-link{font-size:10px;margin-top:3px;min-height:36px}.hero-art{width:185px;max-width:185px;aspect-ratio:1;margin:6px auto 4px;grid-row:2}.headphone-art{width:101%;height:101%;top:-2%;left:-2%}.orbit-one{inset:2%}.orbit-two{inset:12%}.orbit-three{inset:22%}.art-caption{display:none}.seconds-sticker{height:54px;width:54px;top:1%;right:-7%}.seconds-sticker strong{font-size:23px;line-height:1.2}.seconds-sticker span{font-size:4px;margin-top:0}.spark-one{font-size:19px;top:10%;left:-4%}.spark-two{font-size:17px;bottom:10%;right:0}.point-one{width:4px;height:4px}.point-two{width:3px;height:3px}.art-tag{bottom:-1%;font-size:5px;padding:7px 11px;gap:5px}.art-tag .tag-dot{width:3px;height:3px}.how-strip{grid-template-columns:repeat(3,1fr);gap:8px;margin-top:22px;padding-top:17px;text-align:center}.how-strip>div{flex-direction:column;gap:8px;align-items:center}.how-strip>div+div{padding-left:6px}.step-num{font-size:8px;width:auto;height:auto;border:0;line-height:1}.how-strip p{gap:3px}.how-strip strong{font-size:9px;line-height:1.35}.how-strip small{display:none}.footer{padding:8px 24px max(15px,env(safe-area-inset-bottom));gap:7px;display:grid;grid-template-columns:1fr auto}.footer-location{font-size:6px;letter-spacing:.05em;gap:5px}.settings-link{grid-column:2;grid-row:1;min-height:30px;font-size:8px}.settings-link svg{width:12px;height:12px}.legal{grid-column:1/-1;grid-row:2;font-size:6.5px;white-space:nowrap;text-align:center;color:#8fab98;margin-top:3px}.game{padding:0}.screen-top{margin-bottom:8px}.screen-top>.eyebrow{font-size:7px}.exit-game{font-size:10px;min-height:36px}.screen-title{font-size:clamp(29px,8.1vw,47px);line-height:1.07;margin-bottom:10px}.screen-subtitle{font-size:11px;margin-bottom:19px}.game-grid{display:flex;flex-direction:column;gap:22px}.player-panel{display:grid;grid-template-columns:93px 1fr;padding:14px 18px 14px 13px;border-radius:16px;column-gap:14px;align-items:center;min-height:141px}.player-top{grid-column:2;grid-row:1;font-size:7px;gap:6px}.player-top svg{width:12px;height:12px}.record-control{grid-column:1;grid-row:1/5;width:93px;height:93px;margin:0}.play-button{width:70px;height:70px;box-shadow:none}.play-button svg{width:27px;height:27px}.progress-ring{stroke-width:2.5}.remaining{font-size:10px;min-width:28px;padding:6px;bottom:0;right:-1px}.waveform{grid-column:2;grid-row:2;margin:8px 0 0;height:34px;gap:1px}.waveform span{border-radius:1px;max-width:3px}.player-time{grid-column:2;grid-row:3;font-size:7px;margin:5px 0 0}.listen-hint{grid-column:2;grid-row:4;font-size:8px;text-align:left;margin:7px 0 0;min-height:12px}.player-panel>#another-track{grid-column:1/-1;font-size:10px;padding:8px 0;margin-top:5px}.answer-heading{margin-bottom:12px}.answer-heading>.eyebrow{font-size:8px}.answer-heading>span+span{font-size:6px}.answers{gap:10px;grid-template-columns:1fr 1fr}.answer{padding:13px 11px;min-height:91px;align-items:flex-start;gap:8px;flex-direction:column;border-radius:12px}.answer-letter{width:21px;height:21px;font-size:8px}.answer-letter svg{width:12px;height:12px}.answer-copy{gap:4px}.answer-copy strong{font-size:11px;line-height:1.25;letter-spacing:-.025em}.answer-copy small{font-size:8px;line-height:1.3}.confirm-button{margin-top:15px;min-height:55px;padding:16px 20px;font-size:13px}.answer-hint{font-size:8px;margin-top:10px;line-height:1.5}.result{padding:15px 0 0}.result-mark{width:97px;height:97px;margin-bottom:25px}.result-mark>svg{width:44px;height:44px}.result-title{font-size:49px;margin-bottom:15px}.result .eyebrow{font-size:8px}.result-copy{font-size:12px;margin-bottom:24px}.song-reveal{gap:12px;padding:17px 18px;border-radius:13px}.song-icon{width:41px;height:41px}.song-icon svg{width:22px;height:22px}.song-reveal strong{font-size:16px}.song-reveal p>span{font-size:10px}.correct-icon{width:18px;height:18px}.result-actions{margin-top:23px}.result-actions .button{min-height:57px;font-size:13px;padding:17px 20px}.result-actions>.text-button{font-size:10px}.reset-hint{font-size:7px}.wrong-answer{font-size:10px;line-height:1.5}.modal{padding:22px;width:calc(100% - 28px);border-radius:18px;max-height:calc(100svh - 30px)}.modal h2{font-size:27px}.setting-row{gap:12px}.setting-row strong{font-size:11px}.setting-row small{font-size:9px}.volume-control{width:100%;padding-top:2px}.station-stats{gap:18px}.offline-info{max-width:120px}.offline-info p{font-size:8px}.modal .button{font-size:11px;gap:15px}}
@media(max-width:720px) and (min-height:900px){.hero-art{width:235px;max-width:235px;margin-top:15px;margin-bottom:12px}.home{gap:0}h1{font-size:clamp(49px,12vw,72px)}.hero-intro{font-size:15px}.seconds-sticker{width:64px;height:64px}.seconds-sticker strong{font-size:28px}.seconds-sticker span{font-size:4.5px}.how-strip{margin-top:25px}.result{padding-bottom:30px}}
@media(max-width:390px){.topbar{padding-left:20px;padding-right:20px}.brand{width:135px}.event-label>span{font-size:7px}.event-label small{font-size:5.5px}main{padding-left:20px;padding-right:20px}.hero-art{width:165px;max-width:165px;margin-top:2px}.hero-intro{font-size:12px}.hero-intro br{display:block}h1{font-size:43px;margin:15px 0}.how-strip{margin-top:18px;padding-top:14px}.how-strip strong{font-size:8px}.footer{padding-left:20px;padding-right:20px}.answer-copy strong{font-size:10px}.answer-copy small{font-size:7.5px}.screen-subtitle{font-size:10px}.game-grid{gap:19px}.answers{gap:8px}.screen-title{font-size:29px}.player-panel{column-gap:10px;padding-right:14px}.answer{min-height:91px}.station-stats{gap:13px}.modal .offline-info{max-width:100px}}
@media(max-height:480px) and (orientation:landscape){.topbar{padding-top:10px}.brand{width:105px}.event-label>span{font-size:9px}.event-label small{font-size:6px}main{padding-top:8px}.home{grid-template-columns:1.2fr 1fr}.hero-art{width:210px;max-width:210px;grid-column:2;grid-row:1;aspect-ratio:1}.hero-copy{text-align:left}.hero-copy .eyebrow{justify-content:flex-start}h1{font-size:36px;line-height:.96;margin:12px 0}.hero-intro{font-size:11px;margin-bottom:12px}.start-button{min-height:44px;font-size:12px}.how-link{display:none}.how-strip{display:none}.game-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:18px}.player-panel{display:flex;padding:12px;min-height:0}.player-top{font-size:6px}.record-control{width:90px;height:90px;margin-top:12px}.play-button{width:65px;height:65px}.waveform{height:25px;margin-top:8px}.player-time{font-size:7px}.listen-hint{font-size:8px;margin-top:6px;text-align:center}.screen-top{margin-bottom:0}.screen-title{font-size:29px;margin-bottom:6px}.screen-subtitle{font-size:9px;margin-bottom:12px}.answer{min-height:65px;padding:10px;flex-direction:row;gap:7px}.answer-copy strong{font-size:10px}.answer-copy small{font-size:8px}.answer-heading{margin-bottom:9px}.answer-heading>.eyebrow{font-size:7px}.confirm-button{min-height:44px;margin-top:10px;font-size:11px}.answer-hint{font-size:7px}.result{display:grid;grid-template-columns:100px 1fr;max-width:600px;gap:0 25px;text-align:left}.result-mark{grid-column:1;grid-row:1/4;width:90px;height:90px;margin:0}.result>.eyebrow,.result-title,.result-copy{grid-column:2}.result-title{font-size:40px;margin-bottom:10px}.result .eyebrow{font-size:7px;margin-bottom:10px}.result-copy{font-size:11px;margin-bottom:15px}.song-reveal{grid-column:2;width:100%;padding:12px 16px}.song-reveal strong{font-size:13px}.song-icon{width:30px;height:30px}.result-actions{grid-column:2;margin-top:13px;flex-direction:row;gap:20px}.result-actions>.button{min-height:44px;font-size:10px;padding:10px 15px}.result-actions>.text-button{font-size:9px;white-space:nowrap}.reset-hint,.wrong-answer{grid-column:2}.footer{min-height:30px;padding-top:0;padding-bottom:7px}.footer-location,.legal{font-size:6px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.registration{display:grid;grid-template-columns:1fr 1.05fr;gap:60px;align-items:center;padding:20px 0}.registration-copy>.eyebrow{font-size:8px;letter-spacing:.12em;color:#b5ccaf;margin:0 0 22px}.registration .screen-title{font-size:clamp(38px,4.9vw,65px);line-height:1.01;letter-spacing:-.06em;margin-bottom:24px}.registration-intro{font-size:14px;color:#c7d8c3;line-height:1.75;margin:0 0 28px}.selected-recap{display:flex;gap:14px;align-items:center;border-top:1px solid #c0d8ab2d;padding-top:21px;max-width:370px}.selected-recap>svg:first-child{width:25px;height:25px;color:var(--lime)}.selected-recap p{display:flex;flex-direction:column;gap:7px;margin:0}.selected-recap small{font-size:7px;letter-spacing:.1em;color:#a9c3a5}.selected-recap strong{font-size:13px;letter-spacing:-.03em}.selected-recap>svg:last-child{margin-left:auto;width:17px;height:17px;color:#a2c38b}.registration-form{background:var(--cream);color:var(--deep);padding:28px;border-radius:20px;color-scheme:light}.form-top{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:23px}.form-top>.eyebrow{font-size:8px;color:#52744b}.required-note{font-size:7px;color:#658059}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:19px 14px}.form-grid label{font-size:11px;font-weight:750;letter-spacing:-.015em}.form-grid label>span{color:#008e50}.form-grid input{display:block;width:100%;margin-top:9px;min-height:50px;border:1px solid #c9d7be;background:white;border-radius:8px;color:var(--deep);padding:12px 13px;font-size:14px;outline-offset:2px}.form-grid input:focus{outline:2px solid #008e50;border-color:#008e50}.form-grid input::placeholder{color:#8b9d80;font-size:12px;font-weight:400}.email-field{grid-column:1/-1}.field-help{font-size:8px;color:#617d54;line-height:1.6;margin:8px 0 18px}.registration-note{font-size:9px;line-height:1.7;background:#eaf0d5;padding:13px;border-radius:8px;color:#456737;margin:0 0 18px}.acknowledgement{display:flex;align-items:flex-start;gap:10px;font-size:10px;line-height:1.65;color:#47673b;cursor:pointer}.acknowledgement input{accent-color:#008e50;width:19px;height:19px;flex:none;margin:1px 0 0;cursor:pointer}.acknowledgement a{color:#006b48;font-weight:700;text-decoration-thickness:1px;text-underline-offset:2px}.registration-form>.button{width:100%;margin-top:23px;min-height:55px;justify-content:space-between;font-size:13px}.form-bottom{font-size:8px;text-align:center;color:#7a8e6d;margin:12px 0 0;line-height:1.5}.form-error{font-size:10px;color:#9a312d;line-height:1.6;margin:15px 0 0}.install-link{display:flex;align-items:center;gap:7px;font-size:9px;font-weight:600;color:#c5d6b9;background:transparent;min-height:40px;padding:8px 12px;border:1px solid #c0d8ab2d;border-radius:8px}.install-link svg{width:13px;height:13px}.install-link:hover{background:#ffffff08}.app-icon{width:60px;height:60px;border-radius:13px;display:block;object-fit:contain;background:white;margin:6px 0 21px}.install-intro{font-size:12px;color:#52744b;line-height:1.7;margin:0 0 22px}.install-modal>div[id]{padding:16px 0;border-top:1px solid #d9e2d1}.install-modal>div[id]>strong{font-size:12px}.install-modal>div[id]>p{font-size:11px;line-height:1.8;color:#52744b;margin:7px 0 0}.install-footnote{font-size:9px;line-height:1.7;color:#718368;margin:18px 0 0}.source-notes{margin-top:22px;border-top:1px solid #d9e2d1;padding-top:15px}.source-notes summary{cursor:pointer;font-size:10px;font-weight:700;min-height:30px}.source-notes p{font-size:9px;line-height:1.8;color:#52744b;margin:8px 0}.button.is-busy{opacity:.65;pointer-events:none}.registration-copy{min-width:0}
@media(max-width:1000px){.registration{gap:30px}.registration-form{padding:24px}.registration-intro{font-size:12px}.registration .screen-title{font-size:46px}.form-grid{gap:17px 12px}.footer .legal{font-size:7px}.footer-location{font-size:7px}}
@media(max-width:720px){.registration{display:flex;flex-direction:column;gap:22px;padding:10px 0}.registration-copy{width:100%}.registration-copy>.eyebrow{font-size:7px;margin-bottom:14px}.registration .screen-title{font-size:34px;margin-bottom:15px;line-height:1.02}.registration .screen-title br:nth-of-type(2){display:none}.registration-intro{font-size:11px;line-height:1.7;margin-bottom:0}.registration-intro br{display:none}.selected-recap{display:none}.registration-form{width:100%;padding:22px;border-radius:16px}.form-top{margin-bottom:20px}.form-top>.eyebrow{font-size:7px}.required-note{font-size:6px}.form-grid{gap:17px 11px}.form-grid label{font-size:10px}.form-grid input{font-size:16px;min-height:49px;padding:12px 10px}.form-grid input::placeholder{font-size:11px}.field-help{font-size:7px}.registration-note{font-size:8px;padding:11px;line-height:1.7}.acknowledgement{font-size:9px;gap:8px}.registration-form>.button{font-size:12px;min-height:53px;margin-top:20px;padding:15px 17px}.form-bottom{font-size:7px}.form-error{font-size:9px}.footer{grid-template-columns:1fr auto}.footer-location{font-size:6px;grid-column:1;grid-row:1}.install-link{grid-column:2;grid-row:1;padding:5px 8px;min-height:30px;font-size:7px;gap:5px}.install-link svg{width:10px;height:10px}.settings-link{grid-column:2;grid-row:2;font-size:7px;min-height:26px}.footer .legal{grid-column:1;grid-row:2;text-align:left;font-size:5.3px;margin:0}.install-modal h2{font-size:28px}.app-icon{width:50px;height:50px}}
@media(max-width:360px){.registration-form{padding:18px}.form-grid{grid-template-columns:1fr;gap:15px}.registration .screen-title{font-size:30px}.footer .legal{font-size:5px}.footer-location{font-size:5px}}

@media(max-width:720px) and (min-height:481px){.answer{min-height:103px}.answer-copy strong{font-size:13px;line-height:1.3}.answer-copy small{font-size:10px}.answer-hint{font-size:9px}.confirm-button{font-size:14px}.screen-subtitle{font-size:12px}.form-grid label{font-size:12px}.registration-intro{font-size:12px}.registration-note{font-size:10px}.acknowledgement{font-size:11px}.registration-form>.button{font-size:13px}.field-help{font-size:9px}.form-bottom{font-size:9px}}
@media(max-width:720px) and (max-height:800px) and (orientation:portrait){main{padding-top:12px;padding-bottom:14px}.home .hero-art{width:140px;max-width:140px}.home .how-strip{margin-top:14px;padding-top:13px}.home .hero-intro{margin-bottom:16px}.home .how-link{min-height:32px}}

/* BEGIN: immediate outcomes and post-game completion */
#result-view {
  position: relative;
  isolation: isolate;
  max-width: 650px;
  overflow: clip;
  padding: 20px 22px 4px;
}
#result-view > :not(#celebration) { position: relative; z-index: 1; }
#result-view.is-winner .result-mark > span {
  background: var(--lime);
  box-shadow: 0 0 0 12px #d8ed0019, 0 0 0 28px #d8ed0009, 0 0 65px #d8ed0018;
  animation: energy-arrives .65s cubic-bezier(.2,.8,.25,1) both;
}
#result-view.is-winner .result-title { animation: result-arrives .45s .08s ease-out both; }
#result-view.is-winner .result-copy { color: #e0edce; }
#result-view.is-wrong .result-mark > span {
  background: #d7e5c9;
  box-shadow: 0 0 0 10px #d7e5c211, 0 0 0 23px #d7e5c207;
}
#result-view.is-wrong .result-title { font-size: clamp(43px,4.8vw,65px); }
#result-view .result-copy { max-width: 490px; margin-left: auto; margin-right: auto; }
#result-view .wrong-answer { line-height: 1.6; }
#result-view .result-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
  align-items: stretch;
  max-width: 470px;
  margin: 24px auto 0;
}
#result-view .result-actions > button {
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
  border-radius: 11px;
  white-space: normal;
  line-height: 1.4;
}
#result-view.is-winner #result-register,
#result-view.without-registration #play-again,
#result-view.is-wrong #play-again {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  min-height: 58px;
  padding: 16px 22px;
  background: var(--lime);
  color: var(--deep);
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 750;
}
#result-view.is-winner:not(.without-registration) #play-again,
#result-view.is-wrong #result-register {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid #bfd7ad40;
  background: #ffffff04;
  color: #e2edda;
  font-size: 11px;
  font-weight: 650;
}
#result-view #new-player {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 10px;
  background: transparent;
  color: #bfd3bc;
  font-size: 11px;
  font-weight: 550;
}
#result-view .result-actions > button:not(:disabled):hover { background: #ffffff0c; color: var(--cream); }
#result-view.is-winner #result-register:not(:disabled):hover,
#result-view.without-registration #play-again:not(:disabled):hover,
#result-view.is-wrong #play-again:not(:disabled):hover { background: #e4f625; color: var(--deep); }
#result-view .result-actions > button:disabled { opacity: .55; cursor: default; }
#result-view .result-actions svg { width: 19px; height: 19px; }
#result-view #new-player svg,
#result-view.is-winner:not(.without-registration) #play-again svg,
#result-view.is-wrong #result-register svg { width: 15px; height: 15px; }
#celebration {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  border-radius: 25px;
  contain: paint;
}
#celebration span {
  position: absolute;
  left: calc(4% + var(--i) * 3.5%);
  top: 0;
  display: block;
  width: 6px;
  height: 12px;
  border-radius: 2px;
  background: var(--lime);
  opacity: 0;
  pointer-events: none;
}
#celebration span:nth-child(3n) { width: 7px; height: 7px; border-radius: 50%; background: #f9fbef; }
#celebration span:nth-child(3n + 1) { background: #00be78; }
#celebration span:nth-child(5n) { width: 10px; height: 10px; clip-path: polygon(50% 0,62% 36%,100% 50%,62% 64%,50% 100%,38% 64%,0 50%,38% 36%); border-radius: 0; }
#result-view.is-winner #celebration span {
  animation: energy-confetti 2.6s cubic-bezier(.12,.35,.45,1) both;
  animation-delay: calc(var(--i) * 24ms);
}
#result-view.is-winner #celebration span:nth-child(even) { animation-name: energy-confetti-left; }
#result-view.is-wrong #celebration { display: none; }
@keyframes energy-arrives {
  0% { transform: scale(.6); opacity: 0; }
  65% { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes result-arrives {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes energy-confetti {
  0% { opacity: 0; transform: translate3d(-12px,-20px,0) rotate(-35deg); }
  12% { opacity: .8; }
  70% { opacity: .48; }
  100% { opacity: 0; transform: translate3d(28px,480px,0) rotate(260deg); }
}
@keyframes energy-confetti-left {
  0% { opacity: 0; transform: translate3d(12px,-20px,0) rotate(35deg); }
  12% { opacity: .8; }
  70% { opacity: .48; }
  100% { opacity: 0; transform: translate3d(-28px,480px,0) rotate(-260deg); }
}
#completion-view {
  align-self: center;
  max-width: 570px;
  text-align: center;
  padding: 20px 12px;
}
.completion-mark {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--lime);
  color: var(--deep);
  margin: 0 auto 26px;
  box-shadow: 0 0 0 10px #d8ed0012, 0 0 0 23px #d8ed0007;
}
.completion-mark svg { width: 39px; height: 39px; stroke-width: 2.3; }
.completion-title {
  font-size: clamp(35px,4vw,55px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.055em;
  margin: 15px 0 20px;
  outline: none;
}
#completion-view > .eyebrow { color: #c7dfbb; font-size: 9px; }
#completion-view .completion-copy,
#completion-view > p:not(.eyebrow) { color: #c3d6bf; font-size: 14px; line-height: 1.75; margin: 0 auto 26px; max-width: 450px; }
#completion-view .button { width: 100%; max-width: 430px; margin: 25px auto 0; justify-content: space-between; }
@media (min-width:721px) and (max-height:800px) {
  #result-view { padding-top: 14px; }
  #result-view .result-mark { width: 74px; height: 74px; margin-bottom: 18px; }
  #result-view .result-mark > svg { width: 36px; height: 36px; }
  #result-view .result-title,
  #result-view.is-wrong .result-title { font-size: 50px; margin-bottom: 12px; }
  #result-view .eyebrow { margin-bottom: 11px; }
  #result-view .result-copy { font-size: 12px; margin-bottom: 18px; }
  #result-view .song-reveal { padding: 14px 20px; }
  #result-view .song-icon { width: 41px; height: 41px; }
  #result-view .result-actions { margin-top: 18px; gap: 8px 10px; }
  #result-view.is-winner #result-register,
  #result-view.without-registration #play-again,
  #result-view.is-wrong #play-again { min-height: 53px; }
  #result-view #new-player,
  #result-view.is-winner:not(.without-registration) #play-again,
  #result-view.is-wrong #result-register { min-height: 42px; }
  #completion-view { padding-top: 10px; padding-bottom: 10px; }
}
@media (max-width:720px) {
  #result-view { padding: 14px 0 0; }
  #result-view .result-mark { width: 87px; height: 87px; margin-bottom: 24px; }
  #result-view .result-mark > svg { width: 40px; height: 40px; }
  #result-view .result-title,
  #result-view.is-wrong .result-title { font-size: clamp(42px,11.8vw,55px); margin-bottom: 15px; }
  #result-view .result-copy { font-size: 12px; line-height: 1.65; margin-bottom: 23px; }
  #result-view .result-actions { margin-top: 22px; gap: 9px; }
  #result-view.is-winner #result-register,
  #result-view.without-registration #play-again,
  #result-view.is-wrong #play-again { min-height: 56px; padding: 15px 18px; font-size: 13px; }
  #result-view #new-player,
  #result-view.is-winner:not(.without-registration) #play-again,
  #result-view.is-wrong #result-register { font-size: 10px; min-height: 44px; padding: 10px 8px; }
  #result-view .reset-hint { font-size: 8px; margin-top: 13px; }
  #celebration { border-radius: 0; }
  #completion-view { padding: 18px 0; }
  .completion-mark { width: 78px; height: 78px; margin-bottom: 26px; }
  .completion-title { font-size: clamp(33px,9.4vw,43px); }
  #completion-view .completion-copy,
  #completion-view > p:not(.eyebrow) { font-size: 12px; }
  #completion-view .button { min-height: 56px; font-size: 13px; }
}
@media (max-width:720px) and (max-height:800px) and (orientation:portrait) {
  #result-view { padding-top: 7px; }
  #result-view .result-mark { width: 74px; height: 74px; margin-bottom: 19px; }
  #result-view .result-mark > svg { width: 35px; height: 35px; }
  #result-view .result-title,
  #result-view.is-wrong .result-title { font-size: 43px; margin-bottom: 12px; }
  #result-view .result-copy { font-size: 11px; margin-bottom: 18px; }
  #result-view .result-actions { margin-top: 17px; }
}
@media (max-height:480px) and (orientation:landscape) {
  #result-view { display: grid; grid-template-columns: 85px 1fr; gap: 0 25px; max-width: 610px; text-align: left; padding: 6px 12px; }
  #result-view .result-mark { grid-column: 1; grid-row: 1 / 5; width: 75px; height: 75px; margin: 8px 0 0; }
  #result-view > .eyebrow,
  #result-view .result-title,
  #result-view .result-copy,
  #result-view .song-reveal,
  #result-view .wrong-answer,
  #result-view .result-actions,
  #result-view .reset-hint { grid-column: 2; }
  #result-view .result-title,
  #result-view.is-wrong .result-title { font-size: 35px; margin-bottom: 9px; }
  #result-view .result-copy { font-size: 10px; margin-bottom: 12px; }
  #result-view .result-actions { width: 100%; margin-top: 12px; gap: 6px 8px; }
  #result-view.is-winner #result-register,
  #result-view.without-registration #play-again,
  #result-view.is-wrong #play-again { min-height: 43px; padding: 10px 14px; font-size: 11px; }
  #result-view #new-player,
  #result-view.is-winner:not(.without-registration) #play-again,
  #result-view.is-wrong #result-register { min-height: 35px; padding: 7px 8px; font-size: 9px; }
  #result-view .reset-hint { margin-top: 6px; }
  #completion-view { padding: 5px 10px; }
  .completion-mark { width: 55px; height: 55px; margin-bottom: 18px; }
  .completion-mark svg { width: 29px; height: 29px; }
  .completion-title { font-size: 32px; margin: 10px 0 12px; }
  #completion-view .completion-copy,
  #completion-view > p:not(.eyebrow) { margin-bottom: 12px; font-size: 11px; }
  #completion-view .button { min-height: 44px; margin-top: 15px; font-size: 12px; }
}
@media (prefers-reduced-motion:reduce) {
  #result-view.is-winner .result-mark > span,
  #result-view.is-winner .result-title,
  #result-view.is-winner #celebration span { animation: none !important; }
  #celebration { display: none; }
}
/* END: immediate outcomes and post-game completion */

/* BEGIN: official poster visual reference
   Source: Layout_276x768_DM_Xfactor_10_26_2_bassa.pdf, both pages.
   Midnight/charcoal and plum backdrop; Plenitude green/white display type;
   warm yellow accents, with the original co-branded lockup left untouched. */
:root {
  --green: #009e62;
  --lime: #ffcd00;
  --cream: #fbfcf7;
  --muted: #b9c7bb;
  --deep: #103a2a;
}
html { background: #211d20; }
body {
  background:
    radial-gradient(ellipse at 0% 3%, #c59c0038 0%, transparent 25%),
    radial-gradient(ellipse at 86% 52%, #006e3b4a 0%, transparent 53%),
    radial-gradient(ellipse at 7% 61%, #3a102b8c 0%, transparent 55%),
    linear-gradient(155deg, #090a22 0%, #211d20 54%, #20201c 100%);
}
h1, .screen-title, .result-title, .completion-title { letter-spacing: -.045em; }
h1 em, .screen-title em, .result-title em, .completion-title em { color: var(--green); }
h1 > .lime { color: var(--green); }
.hero-copy .eyebrow, .screen-top > .eyebrow { color: #d0dacc; }
.tiny-line, .event-label i, .footer .tag-dot { background: var(--green); }
.hero-intro { color: #d9ded6; }
.hero-intro strong { color: #fff; }
.event-label small, .screen-subtitle { color: #bac6b9; }
.primary { background: var(--green); color: #052316; }
.primary:not(:disabled):hover { background: #20bd7d; color: #052316; box-shadow: 0 6px 26px #00a56620; }
.primary:disabled { background: #335e48; color: #c2d3c7; }
.text-button:hover { color: #29cb8b; }
.orbit { border-color: #89a48626; }
.orbit-two { border-color: #a8c48920; }
.orbit-three { border-color: #a8c48915; }
.orbit-point { background: var(--green); box-shadow: 0 0 18px #00a56655; }
.point-one { background: var(--lime); box-shadow: 0 0 18px #ffd00044; }
.art-caption { color: #9db38e; }
.seconds-sticker { background: var(--lime); color: #1c2516; box-shadow: 0 7px 25px #07091266; }
.art-spark { color: var(--lime); }
.art-tag { background: #fbfcf7; color: #172f22; box-shadow: 0 6px 20px #07091266; }
.art-tag .tag-dot { background: var(--green); }
.headphone-art { filter: drop-shadow(0 24px 25px #05070c88); }
.how-strip { border-top-color: #d0dbbd2d; }
.how-strip > div + div { border-left-color: #d0dbbd2d; }
.step-num { color: #13bf7d; border-color: #00a56670; }
.how-strip small, .footer, .footer-location, .settings-link { color: #aabbaa; }
.legal { color: #8fa190; }
.player-panel { background: #29242bba; border-color: #d9e4cd30; }
.player-top { color: #c9d4c4; }
.is-playing .audio-dot { background: #00bd77; box-shadow: 0 0 8px #00bd7799; }
.ring-track { stroke: #a3b19943; }
#ring-progress { stroke: var(--lime); }
.play-button { background: var(--green); color: #052316; box-shadow: 0 0 0 8px #00a5660c; }
.play-button:hover { background: #20bd7d; }
.play-button:disabled { background: #52725a; color: #1f3827; }
.remaining { background: var(--lime); color: #1c2516; }
.waveform span { background: #7e937158; }
.waveform span.played { background: #13bf7d; }
.player-time, .answer-hint { color: #a8bda5; }
.listen-hint { color: #d8e4d0; }
.answer {
  background: #2c292cbf;
  border-color: #d5dfca33;
  color: #fbfcf7;
}
.answer:not(:disabled):hover { background: #263b2e; border-color: #42a778; }
.answer-letter { color: #d8e4d0; border-color: #adbea161; }
.answer-copy strong { color: inherit; font-size: 16px; line-height: 1.3; letter-spacing: -.02em; }
.answer[aria-pressed=true] { background: var(--green); color: #052316; border-color: #19bd7b; box-shadow: 0 0 0 2px #00a56625; }
.answer[aria-pressed=true] .answer-letter { background: #073b28; color: #e1f1d4; border-color: #073b28; }
.answer-heading > span + span { color: #b0c0ab; }
#result-view.is-winner .result-mark > span {
  background: var(--green);
  box-shadow: 0 0 0 12px #00a56619, 0 0 0 28px #00a56609, 0 0 65px #00a56622;
}
#result-view.is-winner .result-mark > svg { color: #052316; }
#result-view.is-winner .result-copy { color: #e0e9da; }
#result-view .eyebrow { color: #b7d9bc; }
#result-view.is-wrong .result-title em { color: #fbfcf7; }
#result-view.is-wrong .result-mark > span { background: #d7e5c9; }
#result-view.is-wrong .result-mark > svg { color: #1b4a32; }
#result-view .song-reveal { background: #fbfcf7; color: #163c28; }
#result-view .song-icon { background: #e3efda; color: #007b49; }
#result-view.is-winner #result-register,
#result-view.without-registration #play-again,
#result-view.is-wrong #play-again { background: var(--green); color: #052316; }
#result-view.is-winner #result-register:not(:disabled):hover,
#result-view.without-registration #play-again:not(:disabled):hover,
#result-view.is-wrong #play-again:not(:disabled):hover { background: #20bd7d; color: #052316; }
#result-view.is-winner:not(.without-registration) #play-again,
#result-view.is-wrong #result-register { background: #ffffff04; color: #e1e8d9; border-color: #c2d1b543; }
#celebration span { background: var(--lime); }
#celebration span:nth-child(3n + 1) { background: #00bd77; }
.completion-mark { background: var(--green); color: #052316; box-shadow: 0 0 0 10px #00a56612, 0 0 0 23px #00a56607; }
.dark-button { background: #242328; color: #fbfcf7; }
.dark-button:hover { background: #364537; }
.install-link { color: #c5d2bd; border-color: #bbcca130; }
.toast { color: #163c28; }
@media (max-width:1000px) {
  .answer-copy strong { font-size: 15px; }
}
@media (max-width:720px) {
  .answer { min-height: 101px; }
  .answer-copy strong { font-size: 14px; line-height: 1.3; }
  .answer-letter { width: 23px; height: 23px; font-size: 9px; }
  .footer .legal { color: #8fa190; }
}
@media (max-width:390px) {
  .answer-copy strong { font-size: 13px; }
}
@media (max-height:480px) and (orientation:landscape) {
  .answer { min-height: 65px; }
  .answer-copy strong { font-size: 12px; }
  .play-button { box-shadow: none; }
}
/* END: official poster visual reference */

/* BEGIN: original PDF frame and progressive listening
   Frame extracted from page 2 of Layout_276x768_DM_Xfactor_10_26_2_bassa.pdf.
   Original paths, stippling and shadow images; campaign text and people excluded.
   Nine-slice scaling preserves the corners and reserves an inset for all content. */
:root {
  --frame-side: clamp(16px, 2.1vw, 34px);
  --frame-top: clamp(30px, 3.7vw, 54px);
  --frame-bottom: clamp(20px, 2.6vw, 36px);
}
body {
  position: relative;
  padding: max(24px, env(safe-area-inset-top)) clamp(10px, 1.8vw, 28px) max(20px, env(safe-area-inset-bottom));
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  user-select: none;
  border-style: solid;
  border-color: transparent;
  border-width: var(--frame-top) var(--frame-side) var(--frame-bottom);
  border-image-source: url('assets/frame-official.svg');
  border-image-slice: 60 24 30 24;
  border-image-width: 1;
  border-image-repeat: stretch;
}
.topbar, main, .footer { min-width: 0; }
.listen-extension {
  width: 100%;
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px solid #c8d5bd25;
}
.extend-button {
  min-height: 46px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 10px 13px;
  border-radius: 10px;
  border: 1px solid #3db580;
  background: #009e6218;
  color: #eaf4e3;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
}
.extend-button svg { width: 18px; height: 18px; color: #ffcd00; }
.extend-button:not(:disabled):hover { background: #009e6238; border-color: #5ed79f; }
.extend-button:disabled { color: #b4c4b0; background: #ffffff03; border-color: #a2b29a42; opacity: .72; }
.extend-button:disabled svg { color: #b4c4b0; }
.extension-status { margin: 0; font-size: 9px; line-height: 1.5; color: #ffdc4b; text-align: center; }
.answer-copy { overflow-wrap: anywhere; }
.answer-copy small { display: block; font-size: 11px; line-height: 1.45; font-weight: 500; color: #c4d1bd; }
.answer[aria-pressed=true] .answer-copy small { color: #123e2b; }
@media (max-width:1000px) {
  .answer { padding: 15px; gap: 10px; }
  .answer-copy small { font-size: 10px; }
}
@media (max-width:720px) {
  body { padding-left: 10px; padding-right: 10px; padding-top: max(22px, env(safe-area-inset-top)); }
  .topbar { gap: 14px; }
  .listen-extension { grid-column: 1 / -1; margin-top: 11px; padding-top: 11px; }
  .extend-button { min-height: 46px; font-size: 11px; padding: 10px; }
  .extension-status { font-size: 9px; }
  .answer { min-height: 118px; padding: 13px 11px; }
  .answer-copy { gap: 6px; }
  .answer-copy strong { font-size: 14px; }
  .answer-copy small { font-size: 11px; line-height: 1.4; }
  .hero-copy h1 { font-size: clamp(38px, 11vw, 59px); }
}
@media (max-width:390px) {
  .brand { width: 125px; }
  .event-label small { letter-spacing: .08em; }
  .answer-copy strong { font-size: 13px; }
  .answer-copy small { font-size: 11px; }
  .answer { padding: 12px 10px; }
}
@media (max-height:480px) and (orientation:landscape) {
  :root { --frame-top: 23px; --frame-side: 16px; --frame-bottom: 16px; }
  body { padding-top: max(18px, env(safe-area-inset-top)); padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  .listen-extension { margin-top: 9px; padding-top: 9px; gap: 5px; }
  .extend-button { min-height: 44px; font-size: 10px; padding: 8px; }
  .extension-status { font-size: 8px; }
  .answer { min-height: 82px; padding: 10px; }
  .answer-copy strong { font-size: 11px; }
  .answer-copy small { font-size: 9px; }
}
/* END: original PDF frame and progressive listening */

/* Keep the player and all answers together on ordinary laptop displays. */
@media (min-width:721px) and (min-height:801px) and (max-height:1000px) {
  body[data-view=game] .topbar { padding-top: 16px; padding-bottom: 8px; }
  body[data-view=game] .brand { width: 170px; }
  body[data-view=game] main { padding-top: 12px; padding-bottom: 20px; }
  .game .screen-subtitle { margin-bottom: 20px; }
  .game .record-control { width: 144px; height: 144px; margin-top: 15px; }
  .game .play-button { width: 110px; height: 110px; }
  .game .waveform { height: 32px; margin-top: 15px; }
  .game .listen-extension { margin-top: 10px; padding-top: 10px; }
}

/* BEGIN: victory show — finite energy burst, kinetic type and stage lights.
   Only victory-live animates; the result and its actions stay usable throughout. */
#result-view.is-winner {
  overflow: visible;
  max-width: 700px;
  isolation: isolate;
}
#result-view.is-winner .result-title,
#result-view.is-winner .result-mark > span,
#result-view.is-winner .result-spark { animation: none; }
#result-view.is-winner .result-title {
  position: relative;
  font-size: clamp(70px, 7.2vw, 96px);
  line-height: .9;
  letter-spacing: -.075em;
  margin-bottom: 20px;
  perspective: 700px;
  text-shadow: 0 5px 32px #00bd7020;
}
#result-view .win-lead {
  display: block;
  margin-bottom: 10px;
  font-size: .32em;
  line-height: 1;
  letter-spacing: .24em;
  text-indent: .24em;
  font-weight: 750;
  color: #fbfcf7;
}
#result-view .win-word { display: block; white-space: nowrap; color: #12c580; }
#result-view .win-letter {
  display: inline-block;
  position: relative;
  transform-origin: 50% 90%;
  backface-visibility: hidden;
}
#result-view.is-winner .result-mark {
  width: 90px;
  height: 90px;
  margin-bottom: 21px;
}
#result-view.is-winner .result-mark > span {
  background: linear-gradient(145deg, #45dd8c, #009e62 65%);
  box-shadow: 0 0 0 1px #84edb852, 0 0 0 11px #00bd7014, 0 0 0 24px #00bd7008, 0 8px 44px #00bd703d;
}
#result-view.is-winner .result-mark > svg { width: 42px; height: 42px; color: #073e28; }
#result-view.is-winner .result-spark { color: #ffcd00; }
#result-view.is-winner .song-reveal { box-shadow: 0 12px 45px #001e1833; }
#result-view.is-winner .song-reveal p > span { line-height: 1.45; }
#result-view.is-winner .result-copy { margin-bottom: 22px; }
#result-view.is-winner > .eyebrow { color: #d1edcc; letter-spacing: .22em; }
#result-view.is-winner #celebration {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 0;
  contain: paint;
  pointer-events: none;
  user-select: none;
}
#victory-particles {
  position: fixed;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.victory-glow {
  position: absolute;
  left: var(--victory-x, 50%);
  top: var(--victory-y, 35%);
  width: min(1050px, 130vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(ellipse, #04ce7a35 0, #00ad6c16 33%, #ffcd0008 48%, transparent 66%);
  transform: translate(-50%, -50%);
  opacity: .6;
  pointer-events: none;
}
.victory-ring {
  position: absolute;
  left: var(--victory-x, 50%);
  top: var(--victory-y, 35%);
  width: 190px;
  height: 190px;
  margin: -95px 0 0 -95px;
  border: 2px solid #40d995;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
.victory-ring.ring-b { border-color: #ffcd00; border-width: 1px; }
.victory-rays {
  position: absolute;
  left: var(--victory-x, 50%);
  top: var(--victory-y, 35%);
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}
.victory-rays i {
  position: absolute;
  left: -4px;
  bottom: 80px;
  width: 8px;
  height: clamp(100px, 20vh, 200px);
  background: linear-gradient(to top, #12d68a66, #ffcd0028 62%, transparent);
  border-radius: 100%;
  transform-origin: 4px calc(100% + 80px);
  transform: rotate(calc(var(--r) * 45deg));
}
.victory-rays i:nth-child(2n) { width: 3px; left: -1.5px; background: linear-gradient(to top, #ffcd0088, #ffcd0012 70%, transparent); }
#result-view.is-winner.victory-live .victory-glow { animation: victory-light 2.8s ease-out both; }
#result-view.is-winner.victory-live .victory-ring { animation: victory-wave 1.65s .12s cubic-bezier(.12,.55,.23,1) both; }
#result-view.is-winner.victory-live .victory-ring.ring-b { animation-delay: .38s; animation-duration: 1.8s; }
#result-view.is-winner.victory-live .victory-rays { animation: victory-rays-open 1.9s .16s ease-out both; }
#result-view.is-winner.victory-live .result-mark > span { animation: victory-badge .8s cubic-bezier(.18,.8,.24,1) both; }
#result-view.is-winner.victory-live .result-mark > svg { animation: victory-check .48s .2s cubic-bezier(.18,.8,.24,1) both; }
#result-view.is-winner.victory-live .result-spark { animation: victory-spark .85s .22s ease-out both; }
#result-view.is-winner.victory-live .win-lead { animation: victory-lead .55s .08s cubic-bezier(.16,.8,.2,1) both; }
#result-view.is-winner.victory-live .win-letter { animation: victory-letter .8s cubic-bezier(.16,.8,.22,1) both; animation-delay: calc(.17s + var(--letter) * 42ms); }
#result-view.is-winner.victory-live .song-reveal { animation: victory-song .6s .38s cubic-bezier(.2,.7,.2,1) both; }
@keyframes victory-light {
  0% { opacity: .05; transform: translate(-50%, -50%) scale(.45); }
  30% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: .6; transform: translate(-50%, -50%) scale(1.12); }
}
@keyframes victory-wave {
  0% { opacity: 0; transform: scale(.3); }
  18% { opacity: .62; }
  100% { opacity: 0; transform: scale(4.7); }
}
@keyframes victory-rays-open {
  0% { opacity: 0; transform: scale(.45) rotate(-12deg); }
  25% { opacity: .65; }
  100% { opacity: 0; transform: scale(1.75) rotate(7deg); }
}
@keyframes victory-badge {
  0% { opacity: 0; transform: scale(.38) rotate(-18deg); }
  55% { opacity: 1; transform: scale(1.13) rotate(3deg); }
  78% { transform: scale(.97) rotate(-1deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes victory-check {
  0% { opacity: 0; transform: scale(.55) rotate(-14deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes victory-spark {
  0% { opacity: 0; transform: scale(.2) rotate(-35deg); }
  60% { opacity: 1; transform: scale(1.3) rotate(8deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes victory-lead {
  0% { opacity: 0; transform: translateY(18px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes victory-letter {
  0% { opacity: 0; transform: translateY(40px) scale(.45) rotateX(-65deg) rotate(-7deg); }
  55% { opacity: 1; transform: translateY(-8px) scale(1.1) rotateX(0) rotate(2deg); }
  78% { transform: translateY(3px) scale(.98) rotate(-.5deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotateX(0) rotate(0); }
}
@keyframes victory-song {
  0% { opacity: 0; transform: translateY(14px) scale(.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@media (min-width:721px) and (max-height:800px) {
  #result-view.is-winner .result-title { font-size: 74px; margin-bottom: 16px; }
  #result-view.is-winner .win-lead { margin-bottom: 7px; }
  #result-view.is-winner .result-mark { width: 70px; height: 70px; margin-bottom: 16px; }
  #result-view.is-winner .result-mark > svg { width: 35px; height: 35px; }
  #result-view.is-winner .result-copy { margin-bottom: 17px; }
}
@media (max-width:720px) {
  #result-view.is-winner .result-title { font-size: clamp(60px,17.5vw,76px); margin-bottom: 18px; }
  #result-view.is-winner .result-mark { width: 76px; height: 76px; margin-bottom: 20px; }
  #result-view.is-winner .result-mark > svg { width: 36px; height: 36px; }
  #result-view.is-winner .win-lead { margin-bottom: 8px; }
  #result-view.is-winner > .eyebrow { font-size: 8px; }
  #result-view.is-winner .result-copy { margin-bottom: 19px; }
  .victory-glow { width: 150vw; }
  .victory-ring { width: 140px; height: 140px; margin: -70px 0 0 -70px; }
  .victory-rays i { height: 110px; bottom: 55px; transform-origin: 4px calc(100% + 55px); }
}
@media (max-width:720px) and (max-height:800px) and (orientation:portrait) {
  #result-view.is-winner .result-title { font-size: clamp(57px,17vw,67px); margin-bottom: 15px; }
  #result-view.is-winner .result-mark { width: 64px; height: 64px; margin-bottom: 16px; }
  #result-view.is-winner .result-mark > svg { width: 32px; height: 32px; }
  #result-view.is-winner > .eyebrow { margin-bottom: 11px; }
  #result-view.is-winner .result-copy { margin-bottom: 16px; }
  #result-view.is-winner .song-reveal { padding: 15px 17px; }
  #result-view.is-winner .song-icon { width: 39px; height: 39px; }
  #result-view.is-winner .song-reveal strong { font-size: 15px; }
  #result-view.is-winner .song-reveal p > span { font-size: 10px; }
}
@media (max-height:480px) and (orientation:landscape) {
  #result-view.is-winner .result-title { font-size: 45px; margin-bottom: 9px; }
  #result-view.is-winner .win-lead { display: inline-block; margin: 0 7px 0 0; font-size: .6em; letter-spacing: .05em; text-indent: 0; }
  #result-view.is-winner .win-word { display: inline-block; }
  #result-view.is-winner .result-mark { width: 69px; height: 69px; margin: 8px 0 0; }
  #result-view.is-winner .result-copy { margin-bottom: 12px; }
  #result-view.is-winner .song-reveal { padding: 11px 14px; }
}
@media (prefers-reduced-motion:reduce) {
  #result-view.is-winner #celebration { display: block; }
  #victory-particles, .victory-ring, .victory-rays { display: none !important; }
  #result-view.is-winner.victory-live .victory-glow,
  #result-view.is-winner.victory-live .result-mark > span,
  #result-view.is-winner.victory-live .result-mark > svg,
  #result-view.is-winner.victory-live .result-spark,
  #result-view.is-winner.victory-live .win-lead,
  #result-view.is-winner.victory-live .win-letter,
  #result-view.is-winner.victory-live .song-reveal { animation: none !important; opacity: 1; transform: none; }
  #result-view.is-winner.victory-live .victory-glow { opacity: .6; transform: translate(-50%, -50%); }
}
/* END: victory show */

/* Phone installation is a clear secondary action beside the game entry. */
.home-install { display: none; }
@media (max-width:720px) {
  .home-install {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 11px;
    min-height: 66px;
    width: 100%;
    max-width: 370px;
    margin: 12px auto 6px;
    padding: 12px 14px;
    border: 1px solid #9cd3af91;
    border-radius: 12px;
    background: #d7f7df0b;
    color: #f5fbf1;
    text-align: left;
    transition: background .18s, border-color .18s;
  }
  .home-install:not(:disabled):hover { background: #00a66524; border-color: #6edca1; }
  .home-install > svg { width: 24px; height: 24px; color: #68dda2; }
  .home-install > span { display: flex; flex-direction: column; min-width: 0; gap: 4px; }
  .home-install strong { display: block; font-size: 14px; font-weight: 750; line-height: 1.3; letter-spacing: -.025em; }
  .home-install small { display: block; font-size: 11px; line-height: 1.4; color: #c1d7bd; }
  .home-install .install-arrow { width: 18px; height: 18px; margin-left: auto; color: #d9ead2; }
  body .footer { grid-template-columns: 1fr auto; row-gap: 4px; }
  body .footer #install-open {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-content: center;
    min-height: 44px;
    padding: 10px 15px;
    border-color: #9cd3af70;
    color: #e1efda;
    font-size: 12px;
    font-weight: 650;
    gap: 9px;
  }
  body .footer #install-open svg { width: 18px; height: 18px; }
  body .footer .footer-location { grid-column: 1; grid-row: 2; }
  body .footer .settings-link { grid-column: 2; grid-row: 2; }
  body .footer .legal { grid-column: 1 / -1; grid-row: 3; }
  body[data-view=home]:not(.is-installed) .footer #install-open { display: none; }
  body[data-view=home] .footer .footer-location,
  body[data-view=home] .footer .settings-link { grid-row: 1; }
  body[data-view=home] .footer .legal { grid-row: 2; }
  body.is-installed .home-install { display: none; }
}

/* No data collection: one primary replay action, then a clear return home. */
#result-view.without-registration #new-player { grid-column: 1 / -1; grid-row: 2; }