@import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600;650;700;800;900&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--bg:#1b0b2b;--panel:#2a123e;--purple:#bc94ff;--lime:#dcff00;--white:#f4edf9;--muted:#aa94bd;--line:#4a2c61;--red:#ff755f;--font:'Golos Text',Arial,sans-serif;font-family:var(--font);color:var(--white);background:#10091a;color-scheme:dark}*{box-sizing:border-box}body{margin:0;min-width:300px;background:radial-gradient(ellipse at 50% 15%,#39204c 0%,#10091a 65%);min-height:100dvh}button,input{font:inherit}button{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;color:inherit;border:0}button:disabled{cursor:default}a{color:var(--purple);text-underline-offset:3px}button:focus-visible,a:focus-visible,input:focus-visible+span{outline:3px solid var(--lime);outline-offset:5px}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}img{max-width:100%}h1,h2,p{margin:0}[hidden]{display:none!important}.svg-library{position:absolute;width:0;height:0;overflow:hidden}.app-shell{position:relative;max-width:480px;min-height:100dvh;margin:auto;background:var(--bg);overflow:hidden}.screen{padding:0 24px;min-height:100dvh;position:relative}.icon-button{height:40px;width:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#ffffff09;color:var(--purple);flex-shrink:0}.icon-button:hover{background:#ffffff15;color:var(--lime)}.text-button{background:none;color:var(--muted);padding:9px 0;font-size:11px}.text-button:hover{color:var(--white)}.primary-button{width:100%;min-height:67px;display:flex;justify-content:space-between;align-items:center;gap:15px;background:var(--lime);color:#1b1025;border-radius:12px;padding:18px 25px;font-size:22px;font-weight:900;letter-spacing:-.5px;box-shadow:0 6px 0 #8da618;transition:transform .15s,filter .15s}.primary-button:hover{filter:brightness(1.06);transform:translateY(-2px)}.primary-button:active{transform:translateY(3px);box-shadow:0 3px 0 #8da618}.primary-button svg{width:28px;height:28px;stroke-width:2.5}.primary-button.small{font-size:15px;min-height:51px;padding:14px 20px;border-radius:9px;box-shadow:0 4px 0 #8da618}.secondary-button{background:#ffffff0a;border:1px solid var(--line);padding:12px 18px;min-height:44px;border-radius:8px;font-size:13px}.secondary-button:hover{border-color:var(--purple)}
/* Start */
.home-screen{display:flex;flex-direction:column;padding-bottom:max(24px,env(safe-area-inset-bottom));isolation:isolate}.home-screen:before{content:'';position:absolute;z-index:-1;width:470px;height:470px;top:180px;left:-100px;background:radial-gradient(circle,#6a30a22b 0,transparent 68%);pointer-events:none}.home-header{padding-top:max(24px,env(safe-area-inset-top));display:flex;align-items:center;justify-content:space-between;min-height:75px}.micro-brand{font-family:'Manrope',var(--font);font-size:12px;font-weight:800;letter-spacing:2px;color:var(--purple)}.micro-brand b{color:var(--lime);margin:0 5px}.settings-open{width:auto;gap:9px;padding:0 12px;border-radius:10px}.settings-open>span{font-size:11px;font-weight:700}.settings-open svg{width:19px;height:19px}.home-main{flex:1;display:flex;flex-direction:column;align-items:center}.season-tag{display:flex;align-items:center;gap:6px;font-size:8px;letter-spacing:1.4px;font-weight:600;color:var(--muted);margin:22px 0 15px;text-align:center}.season-tag>span:first-child{width:5px;height:5px;background:var(--lime);border-radius:50%}.home-title{font-family:'Manrope',var(--font);font-size:clamp(75px,19vw,100px);font-weight:800;line-height:.86;letter-spacing:-7px;text-align:left;width:100%;max-width:320px;position:relative;z-index:2}.home-title>span{color:var(--lime)}.question-dot{color:var(--purple)}.hero-photos{position:relative;width:100%;height:240px;margin-top:-2px}.hero-card{position:absolute;top:12px;left:50%;height:219px;width:154px;padding:5px;background:var(--purple);border:1px solid #dcc3ff;border-radius:13px;box-shadow:0 8px 25px #09031066;overflow:hidden}.hero-card img{display:block;width:100%;height:100%;object-fit:cover;border-radius:8px}.hero-card>span{position:absolute;left:13px;top:13px;background:var(--lime);color:#21132e;width:28px;height:28px;border-radius:6px;display:grid;place-items:center;font-size:18px;font-weight:900}.hero-front{transform:translateX(-95%) rotate(-11deg);z-index:1}.hero-back{transform:translateX(-3%) rotate(12deg);top:24px}.hero-spark{position:absolute;top:44px;right:1px;color:var(--lime);font-size:56px;line-height:1;transform:rotate(8deg)}.versus-sticker{position:absolute;left:50%;top:138px;transform:translateX(-50%) rotate(-8deg);background:var(--lime);color:var(--bg);font-size:20px;font-weight:900;border:3px solid var(--bg);padding:8px 10px;border-radius:10px;z-index:2}.home-description{text-align:center;font-size:13px;line-height:1.65;margin:13px 0 18px;color:#d1bddf}.rules-row{display:flex;justify-content:space-between;align-items:center;width:100%;padding:0 8px;margin:0 0 24px}.rules-row>span:not(.rule-divider){display:flex;flex-direction:column;align-items:center;gap:5px;min-width:70px}.rules-row b{font-family:'Manrope',var(--font);font-size:25px;font-weight:800;letter-spacing:-1px;line-height:1}.rules-row .unit{font-size:14px;color:var(--purple);letter-spacing:0}.rules-row>span>span:last-child{font-size:7px;letter-spacing:1.05px;color:var(--muted);font-weight:600}.rule-divider{width:1px;height:29px;background:var(--line)}.home-footer{margin-top:24px;display:flex;justify-content:space-between;align-items:center;gap:9px;color:#705484}.home-footer>span{font-size:7px;letter-spacing:.8px}.home-footer .text-button{font-size:9px;color:#a78cbb}
/* Match */
.game-screen{padding-bottom:max(24px,env(safe-area-inset-bottom))}.game-header{display:flex;justify-content:space-between;align-items:center;padding-top:max(17px,env(safe-area-inset-top));height:63px}.game-header .icon-button{width:32px;height:32px;border:1px solid var(--line);background:transparent}.game-header .icon-button svg{width:17px;height:17px}.mini-wordmark{font-family:'Manrope',var(--font);font-size:13px;font-weight:800;letter-spacing:-.5px}.mini-wordmark b{color:var(--lime)}.question-number{font-family:'Manrope',var(--font);font-size:10px;font-weight:700;color:var(--muted);letter-spacing:1px}.scoreboard{display:grid;grid-template-columns:1fr 75px 1fr;align-items:center;text-align:center;padding:17px 10px 15px;position:relative}.score-side{display:flex;flex-direction:column}.score-label{font-size:12px;font-weight:800;letter-spacing:3px;margin-bottom:3px}.score-side strong{font-family:'Manrope',var(--font);font-size:76px;font-weight:800;line-height:1;letter-spacing:-4px}.score-side.you{color:var(--lime)}.score-side.ai{color:var(--purple)}.score-center{display:flex;flex-direction:column;align-items:center;gap:17px;padding-top:18px}.versus-small{font-size:13px;font-style:italic;font-weight:900;color:#74518e}.question-dots{display:flex;gap:4px}.question-dots span{width:7px;height:7px;background:#4a2b60;border-radius:50%;border:1px solid #4a2b60}.question-dots .current{background:var(--white);border-color:var(--white)}.question-dots .correct{background:var(--lime);border-color:var(--lime)}.question-dots .wrong{background:var(--red);border-color:var(--red)}.score-bump{animation:scoreBump .3s ease}.timer-row{display:flex;align-items:center;gap:11px;margin:0 0 22px}.timer-clock{display:flex;align-items:center;gap:5px;font-family:'Manrope',var(--font);font-size:13px;font-weight:800;color:var(--white);min-width:61px}.timer-clock svg{width:17px;height:17px;color:var(--purple)}.timer-track{height:3px;background:#482763;border-radius:4px;flex:1;overflow:hidden}#timer-fill{background:var(--purple);height:100%;width:100%;transform-origin:left center;transition:transform .12s linear}#timer-caption{color:var(--muted);font-size:7px;letter-spacing:.8px;white-space:nowrap}.timer-row.urgent .timer-clock{color:var(--red)}.timer-row.urgent #timer-fill{background:var(--red)}.timer-row.urgent .timer-clock svg{color:var(--red)}.question-heading{margin-bottom:18px}.question-heading h2{font-size:clamp(19px,5.5vw,26px);line-height:1.2;letter-spacing:.025em;font-weight:700;font-style:italic;padding-right:3px}.question-heading p{font-size:10px;color:var(--muted);margin-top:10px}.answer-grid{display:grid;gap:12px}.answer-grid.portrait{grid-template-columns:1fr 1fr}.answer-card{min-width:0;position:relative;border-radius:13px;transition:transform .15s}.photo-button{position:relative;display:block;width:100%;padding:0;background:#301c40;border:2px solid #9e76d0;border-radius:12px;overflow:hidden;isolation:isolate}.portrait .photo-button{aspect-ratio:0.56;max-height:420px}.photo-button>img{display:block;width:100%;height:100%;object-fit:cover;position:absolute;inset:0;opacity:0;transition:opacity .2s}.answer-card.loaded .photo-button>img{opacity:1}.photo-letter{position:absolute;left:9px;top:9px;border-radius:5px;background:var(--lime);color:#24132d;width:32px;height:35px;display:grid;place-items:center;font-size:24px;font-weight:900;z-index:1;line-height:1}.zoom-icon{position:absolute;bottom:10px;right:10px;background:#160923cf;color:#fff;border:1px solid #ccb4eb77;width:33px;height:33px;border-radius:50%;display:grid;place-items:center;z-index:2;backdrop-filter:blur(8px)}.zoom-icon svg{width:18px;height:18px;stroke-width:2}.photo-button:hover:not(:disabled) .zoom-icon{background:var(--lime);color:var(--bg);border-color:var(--lime)}.photo-loading{position:absolute;inset:0;display:grid;place-items:center;font-size:10px;color:var(--muted);background:#321c46}.answer-card.loaded .photo-loading{display:none}.answer-button{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:var(--lime);color:#24132d;border-radius:9px;min-height:50px;padding:12px 8px;margin-top:10px;font-size:12px;font-weight:900;letter-spacing:-.3px;box-shadow:0 4px 0 #92aa1d}.answer-button:disabled{opacity:.5;box-shadow:none}.answer-button:hover:not(:disabled){background:#eaff69}.choose-mark{font-size:19px;font-weight:500}.answer-instruction{display:flex;align-items:center;gap:6px;padding-top:23px;font-size:10px;color:#cab5df}.instruction-star{color:var(--lime);font-size:19px}.game-bottom-mark{margin-top:28px;border-top:1px solid #412451;padding-top:17px;display:flex;justify-content:space-between;font-size:8px;color:#715384}.game-bottom-mark span{font-size:6px;letter-spacing:1px}.answer-card.is-ai .photo-button{border-color:var(--lime)}.answer-card.is-mistake .photo-button{border-color:var(--red)}.answer-card.answered .answer-button{opacity:1;box-shadow:none;font-size:10px}.answer-card.answered.is-ai .answer-button{background:#dcff0020;color:var(--lime);border:1px solid #dcff0045}.answer-card.answered:not(.is-ai) .answer-button{background:#ffffff08;color:var(--muted);border:1px solid #6a477c55}.answer-card.answered.is-mistake .answer-button{background:#ff755f18;color:var(--red);border-color:#ff755f55}.photo-reveal{position:absolute;bottom:12px;left:9px;background:#1b0c2aee;color:white;padding:6px 8px;border-radius:5px;font-size:9px;max-width:calc(100% - 54px);z-index:2;text-align:left;font-weight:700}.is-ai .photo-reveal{color:var(--lime)}.answer-feedback{padding-top:18px;animation:rise .25s ease}.answer-feedback .primary-button{margin-top:17px}.answer-feedback .text-button{font-size:9px;margin-top:10px;text-align:left}.image-error{border:1px solid #b44e7a;padding:15px;border-radius:10px;margin-top:16px;text-align:center;font-size:12px;color:var(--red)}.image-error p{line-height:1.5;margin-bottom:10px}
/* Result */
.result-screen{padding-bottom:max(24px,env(safe-area-inset-bottom));background:radial-gradient(ellipse at 50% 38%,#442465 0,transparent 52%)}.result-header{display:flex;align-items:center;justify-content:space-between;padding-top:max(27px,env(safe-area-inset-top))}.result-round{font-size:7px;letter-spacing:1px;color:var(--muted)}.result-main{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:37px}.result-kicker{font-size:9px;letter-spacing:2px;font-weight:600;color:var(--lime);margin-bottom:12px}.result-main h1{font-size:clamp(37px,10vw,50px);font-weight:900;letter-spacing:-2px;line-height:1.02;position:relative;z-index:2}.result-art{height:282px;position:relative;width:100%;margin-top:6px}.result-art>img{position:relative;height:100%;width:100%;max-width:100%;object-fit:contain;z-index:1;margin:0;filter:drop-shadow(0 9px 20px #10061a88)}.result-orbit{position:absolute;width:225px;height:225px;border-radius:50%;border:1px solid #bc94ff4a;left:50%;top:24px;transform:translateX(-50%);background:radial-gradient(circle,#9e71d54a 0,transparent 72%)}.result-orbit:after{content:'';position:absolute;inset:-13px;border:1px solid #bc94ff16;border-radius:50%}.result-spark{position:absolute;color:var(--lime);font-size:31px;z-index:2}.spark-one{top:75px;left:13px;transform:rotate(8deg)}.spark-two{bottom:38px;right:14px;transform:rotate(-10deg);font-size:21px}.final-scoreboard{display:flex;gap:28px;justify-content:center;align-items:center;margin-top:0}.final-scoreboard>div{display:flex;flex-direction:column;gap:4px}.final-scoreboard>div>span{color:var(--muted);font-size:10px;letter-spacing:2px;font-weight:800}.final-scoreboard strong{font-family:'Manrope',var(--font);font-size:61px;line-height:1;font-weight:800;letter-spacing:-3px}.final-scoreboard>div:first-child strong{color:var(--lime)}.final-scoreboard>div:last-child strong{color:var(--purple)}.final-colon{font-size:33px;color:#72508e;padding-top:16px}.result-main>p{font-size:12px;line-height:1.6;color:#b49ac8;max-width:290px;margin:16px 0}.result-answers{display:flex;gap:8px;margin:3px 0 25px}.result-answers span{width:30px;height:30px;border:1px solid #c8ed0055;background:#dcff0014;color:var(--lime);display:grid;place-items:center;border-radius:7px;font-size:14px;font-weight:700}.result-answers .wrong{color:var(--red);border-color:#ff755f44;background:#ff755f14}.rematch-arrow{font-size:31px;line-height:1}.result-home{margin-top:21px;font-size:10px;font-weight:700;letter-spacing:1px}.result-screen.lost{background:radial-gradient(ellipse at 50% 38%,#6026424a 0,transparent 55%)}.lost .result-kicker{color:var(--red)}.lost .result-spark{color:var(--red)}.lost .result-orbit{border-color:#ff755f33;background:radial-gradient(circle,#c84d4028 0,transparent 75%)}.laugh{position:absolute;top:55px;right:-4px;color:var(--red);font-size:16px;font-weight:900;transform:rotate(9deg);z-index:3;max-width:65px;line-height:1.1;text-align:left}
/* Modal panels */
dialog{color:var(--white);font-family:var(--font);border:1px solid #684887;background:#251036;box-shadow:0 24px 100px #0008}dialog::backdrop{background:#0d0613df;backdrop-filter:blur(8px)}.panel-dialog{width:calc(100% - 32px);max-width:430px;max-height:90dvh;border-radius:20px;padding:25px}.dialog-heading{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:27px}.dialog-heading h2{font-size:23px;letter-spacing:-.8px;font-weight:800}.dialog-heading .icon-button{width:33px;height:33px}.panel-dialog fieldset{margin:0 0 24px;padding:0;border:0}.panel-dialog legend{font-size:11px;color:var(--muted);font-weight:600;margin-bottom:12px}.segmented{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;background:#16091f;border:1px solid var(--line);border-radius:10px}.segmented label{cursor:pointer}.segmented input{position:absolute;width:1px;height:1px;opacity:0}.segmented span{display:block;text-align:center;border-radius:7px;padding:12px 8px;font-size:13px;font-weight:600}.segmented input:checked+span{background:var(--purple);color:var(--bg)}.panel-dialog>.primary-button{justify-content:center}.compact-dialog h2{font-size:23px;margin-bottom:14px;letter-spacing:-.7px}.compact-dialog p{font-size:13px;line-height:1.7;color:var(--muted);margin-bottom:20px}.compact-dialog>.secondary-button{width:100%;margin-top:18px}.credits-dialog>p{font-size:11px;color:var(--muted);line-height:1.6;margin:-9px 0 20px}.credit-item{border-top:1px solid var(--line);padding:14px 0}.credit-item h3{font-size:12px;line-height:1.5;margin:0 0 4px}.credit-item p,.credit-item a{font-size:10px;line-height:1.6}.credit-item p{color:var(--muted);margin-bottom:7px}.credit-item a{margin-right:10px}.zoom-dialog{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:#100819;overflow:hidden}.zoom-dialog[open]{display:flex;flex-direction:column}.zoom-header{display:flex;align-items:center;gap:18px;padding:max(18px,env(safe-area-inset-top)) 18px 16px;font-size:13px}.zoom-header .icon-button{margin-left:auto}.zoom-timer{font-family:'Manrope',var(--font);font-weight:800;color:var(--lime);background:#ffffff0c;border:1px solid var(--line);padding:7px 10px;border-radius:7px;font-size:14px}.zoom-image-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 8px}.zoom-image-stage>img{display:block;width:100%;height:100%;object-fit:contain}.zoom-footer{padding:17px 20px max(20px,env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:center;gap:20px}.zoom-footer>span{font-size:10px;color:var(--muted)}.zoom-footer .secondary-button{font-size:11px}body:has(dialog[open]){overflow:hidden}
@keyframes scoreBump{0%,100%{transform:scale(1)}45%{transform:scale(1.13)}}@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:700px){.app-shell{margin:28px auto;min-height:820px;border:1px solid #4e3065;border-radius:28px;box-shadow:0 30px 90px #03010788}.screen{min-height:820px;padding-inline:30px}.home-header{padding-top:25px}.home-main{padding-top:6px}.home-footer{margin-top:31px}.home-title{font-size:99px}.hero-photos{height:245px}.portrait .photo-button{aspect-ratio:.58}.result-screen{min-height:845px}.result-main{padding-top:40px}.result-art{height:300px}.result-main>p{margin-top:20px}.game-bottom-mark{margin-bottom:4px}}
@media(max-width:380px){.screen{padding-inline:17px}.home-title{font-size:80px;max-width:279px;letter-spacing:-5px}.season-tag{font-size:7px;letter-spacing:1px}.hero-photos{height:217px}.hero-card{width:139px;height:195px}.hero-spark{font-size:40px;right:3px}.versus-sticker{top:123px;font-size:18px}.home-description{font-size:12px}.rules-row{margin-bottom:19px}.home-footer{margin-top:20px}.score-side strong{font-size:68px}.scoreboard{padding-top:12px;padding-bottom:14px}.question-heading p{font-size:9px}.timer-row{margin-bottom:19px}.photo-letter{width:28px;height:31px;font-size:22px;left:7px;top:7px}.answer-button{font-size:11px}.zoom-icon{right:7px;bottom:7px;width:30px;height:30px}.photo-reveal{font-size:8px;left:6px;max-width:calc(100% - 44px)}.result-main{padding-top:29px}.result-art{height:258px}.laugh{right:0;font-size:14px}.final-scoreboard strong{font-size:55px}.result-main h1{font-size:36px}.result-main>p{font-size:11px}.result-answers{margin-bottom:22px}}
@media(max-height:750px) and (max-width:699px){.home-header{min-height:60px;padding-top:14px}.season-tag{margin:10px 0 11px}.home-title{font-size:76px;max-width:269px;letter-spacing:-5px}.hero-photos{height:203px}.hero-card{height:183px;width:130px}.versus-sticker{top:115px;font-size:16px}.hero-spark{right:10px;font-size:43px}.home-description{font-size:11px;margin:9px 0 13px}.rules-row{margin-bottom:17px}.rules-row b{font-size:23px}.primary-button{min-height:59px;padding-block:15px}.home-footer{margin-top:17px}.scoreboard{padding-top:7px;padding-bottom:12px}.score-side strong{font-size:59px}.score-label{font-size:11px}.score-center{gap:13px}.game-header{height:54px;padding-top:12px}.timer-row{margin-bottom:16px}.question-heading{margin-bottom:13px}.question-heading p{margin-top:7px;font-size:9px}.portrait .photo-button{aspect-ratio:.67}.answer-button{min-height:43px;font-size:10px}.answer-instruction{padding-top:17px}.game-bottom-mark{margin-top:22px}.result-main{padding-top:25px}.result-art{height:230px}.result-orbit{width:200px;height:200px;top:8px}.result-main h1{font-size:35px}.result-kicker{font-size:8px;margin-bottom:10px}.final-scoreboard strong{font-size:50px}.result-main>p{margin:12px 0;font-size:11px}.result-answers{margin-bottom:17px}.result-home{margin-top:15px}}
.hero-card img{object-fit:contain;background:#35164e}.hero-back{background:#60457a}.hero-back img{background:#190e24}.hero-card>span{width:auto;min-width:28px;padding:0 6px;font-size:12px}.history-note{font-size:9px;line-height:1.5;text-align:center;color:#9b80b2;margin-top:16px;max-width:310px}.history-note.history-warning{color:#e9b49f}.primary-button:disabled{background:#79678b;color:#c1b2ca;box-shadow:0 4px 0 #4b3b5a;cursor:not-allowed;transform:none;filter:none}.answer-grid:not(:has(.loaded)) .photo-letter,.answer-grid:not(:has(.loaded)) .zoom-icon{opacity:.4}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Sound controls and the rival's short subtitles. */
.sound-toggle{width:32px;height:32px;border:1px solid var(--line);background:#ffffff06;color:var(--purple)}
.sound-toggle[aria-pressed=true]{color:var(--muted);opacity:.65}
.sound-toggle svg{width:17px;height:17px}
.result-header{gap:12px}.result-header .result-round{margin-left:auto}
.audio-settings{border-top:1px solid var(--line)!important;padding-top:12px!important}
.audio-option{display:flex;align-items:center;justify-content:space-between;gap:15px;min-height:52px;font-size:14px;font-weight:600;cursor:pointer}

.audio-option input{appearance:none;flex-shrink:0;width:38px;height:23px;margin:0;border-radius:20px;background:#523668;border:1px solid #725386;position:relative;cursor:pointer;transition:background .15s}
.audio-option input:after{content:'';position:absolute;top:3px;left:3px;width:15px;height:15px;border-radius:50%;background:#bda4ce;transition:transform .15s}
.audio-option input:checked{background:var(--lime);border-color:var(--lime)}.audio-option input:checked:after{transform:translateX(15px);background:#291638}
.audio-option input:focus-visible,.volume-range:focus-visible{outline:2px solid var(--lime);outline-offset:4px}
.volume-heading{display:block;font-size:12px;margin:20px 0 2px;color:var(--muted)}
.volume-range{display:block;width:100%;height:44px;margin:0;accent-color:var(--lime);cursor:pointer}


/* Larger rival speech card with four intertwined sine waves. */
.ai-line,.result-main>.ai-line{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:10px 12px;text-align:left;background:radial-gradient(ellipse at 50% 100%,#7044a42b,transparent 75%),#28143d;border:1px solid #a175d64d;border-radius:18px;padding:18px 18px 12px;margin:0;color:var(--white);width:100%;max-width:none;transition:border-color .25s,box-shadow .25s}
.ai-line-tag{display:grid;place-items:center;width:30px;height:30px;font-size:10px;letter-spacing:.7px;font-weight:800;color:var(--lime);background:#bc94ff16;border:1px solid #bc94ff38;border-radius:10px}
.ai-line-text{align-self:center;font-size:16px;font-weight:600;line-height:1.5}
.result-main>.ai-line{margin:0 0 15px}
.voice-wave{grid-column:1/-1;display:block;height:64px;width:100%;margin:1px 0 -4px;opacity:.55;transition:opacity .25s;isolation:isolate}
.voice-wave svg{display:block;width:100%;height:100%;overflow:visible}
.voice-wave path{fill:none;stroke-width:2.1;stroke-linecap:round;vector-effect:non-scaling-stroke;mix-blend-mode:screen}
.voice-wave path:nth-child(1){stroke:#c39bff;filter:drop-shadow(0 0 4px #b58cff75)}
.voice-wave path:nth-child(2){stroke:#55e9ef;filter:drop-shadow(0 0 3px #55e9ef65)}
.voice-wave path:nth-child(3){stroke:#f877c8;filter:drop-shadow(0 0 4px #f877c860)}
.voice-wave path:nth-child(4){stroke:#dcff00;stroke-width:1.8;filter:drop-shadow(0 0 3px #dcff0050)}
.ai-speaking .voice-wave{opacity:1}
.ai-speaking .ai-line{border-color:#bc94ff85;box-shadow:0 5px 28px #8c48d01c,inset 0 0 24px #bc94ff07}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:360px){.ai-line,.result-main>.ai-line{padding:16px 14px 10px;column-gap:10px}.ai-line-text{font-size:15px}.voice-wave{height:56px}}

.machine-confetti{display:none;position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:3}.lost .machine-confetti{display:block}.machine-confetti i{position:absolute;left:calc(6% + var(--n) * 10%);top:-14px;width:5px;height:10px;background:var(--lime);transform:rotate(25deg);animation:machineConfetti 2.6s calc(var(--n) * -.19s) 2 ease-in both}.machine-confetti i:nth-child(2n){background:var(--red);width:4px;height:7px}.lost .result-art>img{animation:machineTriumph .6s 3 ease-in-out}.lost .laugh{font-size:20px;color:var(--lime);max-width:70px;animation:machineLaugh .45s 4 alternate}.lost .result-kicker{color:var(--lime)}
@keyframes machineConfetti{0%{transform:translateY(-10px) rotate(0);opacity:0}15%{opacity:1}90%{opacity:1}100%{transform:translateY(290px) rotate(320deg);opacity:0}}@keyframes machineTriumph{0%,100%{transform:rotate(0)}30%{transform:translateY(-6px) rotate(-2deg)}70%{transform:translateY(-3px) rotate(2deg)}}@keyframes machineLaugh{from{transform:rotate(6deg) scale(.95)}to{transform:rotate(12deg) scale(1.15)}}

/* One fixed sound switch, in the same upper-right position on every screen. */
.global-sound-toggle{position:fixed;top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right),calc((100vw - 480px)/2 + 24px));z-index:100;width:44px!important;height:44px!important;background:#2a123ef5!important;border:1px solid #8e68b0!important;color:var(--purple);box-shadow:0 3px 14px #10071855;backdrop-filter:blur(12px)}
.global-sound-toggle svg{width:21px;height:21px}.global-sound-toggle[aria-pressed=true]{opacity:1;color:#a58ab9;background:#23102ff5!important}.global-sound-toggle:hover{border-color:var(--lime)!important}
.home-header,.game-header,.result-header{padding-right:58px;gap:12px}.home-header .settings-open{margin-left:auto}.game-header .question-number{margin-left:auto}.game-header .mini-wordmark{white-space:nowrap}
.zoom-header{padding-right:max(74px,calc(env(safe-area-inset-right) + 64px))}
body:has(#zoom-dialog[open]) .global-sound-toggle{top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right))}
@media(min-width:700px){.global-sound-toggle{top:48px}}

.game-header .mini-wordmark{margin-inline:auto}

#start-button{justify-content:center;text-align:center}

.answer-card.answered.is-mistake{animation:wrongAnswerShake .45s ease-in-out}
@keyframes wrongAnswerShake{
  0%,100%{transform:translateX(0)}
  15%{transform:translateX(-7px)}
  30%{transform:translateX(7px)}
  45%{transform:translateX(-5px)}
  60%{transform:translateX(5px)}
  75%{transform:translateX(-3px)}
  90%{transform:translateX(3px)}
}

/* Reveal once, with the photographer on the original image after the answer. */
.photo-frame{position:relative}
.answer-card.answered .answer-button{display:none}
.answer-card .photo-reveal{top:10px;right:10px;bottom:auto;left:auto;max-width:calc(100% - 56px);font-size:9px;text-align:right;animation:badgeReveal .28s ease-out both}
.photo-credit{position:absolute;left:9px;bottom:10px;z-index:3;max-width:calc(100% - 60px);min-height:36px;display:flex;align-items:center;padding:7px 8px;border:1px solid #ffffff28;border-radius:7px;background:#160923e8;color:#eee4f7;font-size:9px;line-height:1.4;text-align:left;overflow-wrap:anywhere;backdrop-filter:blur(8px);animation:rise .3s .12s ease-out both}
.photo-credit:hover{color:var(--lime);border-color:#dcff0070}
.is-mistake .photo-letter::after{position:absolute;right:-7px;bottom:-7px;width:20px;height:20px;border:2px solid var(--bg);border-radius:50%;display:grid;place-items:center;font-size:13px;line-height:1;color:var(--bg);animation:badgeReveal .3s ease-out both}
.is-mistake .photo-letter::after{content:'×';background:var(--red)}

/* Short, event-driven motion; the reduced-motion override applies to all of it. */
.answer-card.loaded:not(.answered){animation:cardEnter .42s cubic-bezier(.2,.75,.25,1) both}
.answer-card.loaded:not(.answered):nth-child(2){animation-delay:.07s}
.answer-card.answered.is-correct{animation:correctAnswerPulse .48s ease-out}
.answer-card.is-correct .photo-button{animation:correctGlow .65s ease-out}
.answer-feedback{animation:feedbackEnter .32s ease-out both}
.zoom-dialog[open] .zoom-image-stage{animation:imageEnlarge .25s ease-out}
.panel-dialog[open]{animation:feedbackEnter .22s ease-out}
.result-screen:not(.lost) .result-art>img{animation:trophyEnter .65s cubic-bezier(.2,.8,.25,1) both}
@keyframes cardEnter{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes correctAnswerPulse{0%,100%{transform:scale(1)}45%{transform:scale(1.025)}}
@keyframes correctGlow{0%,100%{box-shadow:0 0 0 0 #dcff0000}40%{box-shadow:0 0 0 4px #dcff0040,0 0 24px #dcff0040}}
@keyframes badgeReveal{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:scale(1)}}
@keyframes feedbackEnter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes imageEnlarge{from{opacity:.4;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@keyframes trophyEnter{from{opacity:0;transform:translateY(25px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}

#play-again{font-size:clamp(14px,4vw,19px);justify-content:center;gap:12px;padding-inline:16px}
.share-result{display:flex;justify-content:center;align-items:center;gap:9px;width:100%;min-height:48px;margin-top:17px;border-color:#bc94ff70;background:#bc94ff10;color:var(--purple);font-size:11px;font-weight:700;letter-spacing:.2px}
.share-result svg{width:19px;height:19px;flex-shrink:0}
.share-result:hover{background:#bc94ff20}
.share-result:active{transform:scale(.98)}
.share-result:disabled,#copy-result:disabled{opacity:.6;cursor:wait}
.share-dialog textarea{display:block;width:100%;resize:none;border:1px solid var(--line);border-radius:10px;padding:15px;background:#180b25;color:var(--white);font:13px/1.7 var(--font);margin-bottom:18px}
.share-dialog textarea:focus-visible{outline:2px solid var(--purple);outline-offset:3px}
.share-status{min-height:1.5em;margin:14px 0 0;font-size:11px;line-height:1.5;color:var(--lime);text-align:center}

/* A crisp SVG check replaces the font glyph on the card and in feedback. */
.card-check{display:none;position:absolute;left:29px;top:31px;z-index:3;width:26px;height:26px;border:2px solid #261335;border-radius:50%;background:linear-gradient(145deg,#f1ff91,var(--lime) 65%);color:#263000;box-shadow:0 2px 9px #10081960,0 0 10px #dcff0030;place-items:center;animation:checkAppear .35s cubic-bezier(.2,.9,.25,1.3) both}
.is-correct .card-check{display:grid}
.card-check svg{width:18px;height:18px;stroke-width:3}
@keyframes checkAppear{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
@keyframes drawCheck{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

/* Compact settings: labels only; preferences save immediately. */
#settings-dialog{max-width:390px;padding:22px 24px 18px}
#settings-dialog .dialog-heading{margin-bottom:18px}
#settings-dialog .dialog-heading .icon-button{width:44px;height:44px;margin-right:-8px}
#settings-dialog fieldset{margin-bottom:20px}
#settings-dialog .audio-settings{margin-bottom:0;padding-top:12px!important}
#settings-dialog .segmented input:focus-visible+span{outline:2px solid var(--lime);outline-offset:2px}

/* The welcome screen fills the viewport; Start stays above the bottom footer. */
.app-shell:has(> #home-screen:not([hidden])){max-width:none;min-height:100dvh;margin:0;border:0;border-radius:0;box-shadow:none;background:radial-gradient(ellipse at 50% 40%,#39204b 0%,#1b0b2b 62%,#160a23 100%)}
#home-screen{width:100%;max-width:480px;min-height:100dvh;margin:0 auto;padding-bottom:max(16px,env(safe-area-inset-bottom))}
#home-screen .home-header{min-height:68px;padding-top:max(16px,env(safe-area-inset-top));flex-shrink:0}
#home-screen .home-main{flex:1;padding-top:0;width:100%}
.home-hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;padding:16px 0 22px}
#home-screen .home-title{font-size:clamp(72px,11dvh,108px);max-width:330px;letter-spacing:-5px;flex-shrink:0}
#home-screen .hero-photos{height:clamp(180px,29dvh,285px);flex-shrink:0}
#home-screen .hero-card{height:calc(100% - 28px);width:auto;aspect-ratio:.7}
#home-screen .home-description{font-size:13px;line-height:1.65;margin:14px 0 0;flex-shrink:0}
#home-screen .home-footer{margin-top:16px;flex-shrink:0}
#start-button{position:relative;isolation:isolate;min-height:88px;flex-shrink:0;padding:22px 30px;border-radius:0;background:transparent;box-shadow:none;font-size:23px;letter-spacing:.04em;filter:drop-shadow(0 6px 0 #8da618);justify-content:center;text-align:center}
#start-button::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--lime);-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20360%2096%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M12.00%2C15.85%20Q12%2C13%2015.80%2C11.10%20L28.20%2C4.90%20Q32%2C3%2035.80%2C4.71%20L48.20%2C10.29%20Q52%2C12%2055.80%2C10.29%20L68.20%2C4.71%20Q72%2C3%2075.80%2C4.71%20L88.20%2C10.29%20Q92%2C12%2095.80%2C10.29%20L108.20%2C4.71%20Q112%2C3%20115.80%2C4.71%20L128.20%2C10.29%20Q132%2C12%20135.80%2C10.29%20L148.20%2C4.71%20Q152%2C3%20155.80%2C4.71%20L168.20%2C10.29%20Q172%2C12%20175.80%2C10.29%20L188.20%2C4.71%20Q192%2C3%20195.80%2C4.71%20L208.20%2C10.29%20Q212%2C12%20215.80%2C10.29%20L228.20%2C4.71%20Q232%2C3%20235.80%2C4.71%20L248.20%2C10.29%20Q252%2C12%20255.80%2C10.29%20L268.20%2C4.71%20Q272%2C3%20275.80%2C4.71%20L288.20%2C10.29%20Q292%2C12%20295.80%2C10.29%20L308.20%2C4.71%20Q312%2C3%20315.80%2C4.71%20L328.20%2C10.29%20Q332%2C12%20335.04%2C12.19%20L344.96%2C12.81%20Q348%2C13%20349.71%2C15.85%20L355.29%2C25.15%20Q357%2C28%20355.29%2C30.85%20L349.71%2C40.15%20Q348%2C43%20349.90%2C45.85%20L356.10%2C55.15%20Q358%2C58%20356.10%2C61.04%20L349.90%2C70.96%20Q348%2C74%20348.57%2C76.28%20L350.43%2C83.72%20Q351%2C86%20347.39%2C87.52%20L335.61%2C92.48%20Q332%2C94%20328.20%2C92.29%20L315.80%2C86.71%20Q312%2C85%20308.20%2C86.71%20L295.80%2C92.29%20Q292%2C94%20288.20%2C92.29%20L275.80%2C86.71%20Q272%2C85%20268.20%2C86.71%20L255.80%2C92.29%20Q252%2C94%20248.20%2C92.29%20L235.80%2C86.71%20Q232%2C85%20228.20%2C86.71%20L215.80%2C92.29%20Q212%2C94%20208.20%2C92.29%20L195.80%2C86.71%20Q192%2C85%20188.20%2C86.71%20L175.80%2C92.29%20Q172%2C94%20168.20%2C92.29%20L155.80%2C86.71%20Q152%2C85%20148.20%2C86.71%20L135.80%2C92.29%20Q132%2C94%20128.20%2C92.29%20L115.80%2C86.71%20Q112%2C85%20108.20%2C86.71%20L95.80%2C92.29%20Q92%2C94%2088.20%2C92.29%20L75.80%2C86.71%20Q72%2C85%2068.20%2C86.71%20L55.80%2C92.29%20Q52%2C94%2048.20%2C92.29%20L35.80%2C86.71%20Q32%2C85%2028.20%2C85.19%20L15.80%2C85.81%20Q12%2C86%2010.29%2C83.53%20L4.71%2C75.47%20Q3%2C73%204.71%2C70.15%20L10.29%2C60.85%20Q12%2C58%2010.10%2C55.15%20L3.90%2C45.85%20Q2%2C43%203.90%2C40.15%20L10.10%2C30.85%20Q12%2C28%2012.00%2C25.15%20Z%22%2F%3E%3C%2Fsvg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20360%2096%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M12.00%2C15.85%20Q12%2C13%2015.80%2C11.10%20L28.20%2C4.90%20Q32%2C3%2035.80%2C4.71%20L48.20%2C10.29%20Q52%2C12%2055.80%2C10.29%20L68.20%2C4.71%20Q72%2C3%2075.80%2C4.71%20L88.20%2C10.29%20Q92%2C12%2095.80%2C10.29%20L108.20%2C4.71%20Q112%2C3%20115.80%2C4.71%20L128.20%2C10.29%20Q132%2C12%20135.80%2C10.29%20L148.20%2C4.71%20Q152%2C3%20155.80%2C4.71%20L168.20%2C10.29%20Q172%2C12%20175.80%2C10.29%20L188.20%2C4.71%20Q192%2C3%20195.80%2C4.71%20L208.20%2C10.29%20Q212%2C12%20215.80%2C10.29%20L228.20%2C4.71%20Q232%2C3%20235.80%2C4.71%20L248.20%2C10.29%20Q252%2C12%20255.80%2C10.29%20L268.20%2C4.71%20Q272%2C3%20275.80%2C4.71%20L288.20%2C10.29%20Q292%2C12%20295.80%2C10.29%20L308.20%2C4.71%20Q312%2C3%20315.80%2C4.71%20L328.20%2C10.29%20Q332%2C12%20335.04%2C12.19%20L344.96%2C12.81%20Q348%2C13%20349.71%2C15.85%20L355.29%2C25.15%20Q357%2C28%20355.29%2C30.85%20L349.71%2C40.15%20Q348%2C43%20349.90%2C45.85%20L356.10%2C55.15%20Q358%2C58%20356.10%2C61.04%20L349.90%2C70.96%20Q348%2C74%20348.57%2C76.28%20L350.43%2C83.72%20Q351%2C86%20347.39%2C87.52%20L335.61%2C92.48%20Q332%2C94%20328.20%2C92.29%20L315.80%2C86.71%20Q312%2C85%20308.20%2C86.71%20L295.80%2C92.29%20Q292%2C94%20288.20%2C92.29%20L275.80%2C86.71%20Q272%2C85%20268.20%2C86.71%20L255.80%2C92.29%20Q252%2C94%20248.20%2C92.29%20L235.80%2C86.71%20Q232%2C85%20228.20%2C86.71%20L215.80%2C92.29%20Q212%2C94%20208.20%2C92.29%20L195.80%2C86.71%20Q192%2C85%20188.20%2C86.71%20L175.80%2C92.29%20Q172%2C94%20168.20%2C92.29%20L155.80%2C86.71%20Q152%2C85%20148.20%2C86.71%20L135.80%2C92.29%20Q132%2C94%20128.20%2C92.29%20L115.80%2C86.71%20Q112%2C85%20108.20%2C86.71%20L95.80%2C92.29%20Q92%2C94%2088.20%2C92.29%20L75.80%2C86.71%20Q72%2C85%2068.20%2C86.71%20L55.80%2C92.29%20Q52%2C94%2048.20%2C92.29%20L35.80%2C86.71%20Q32%2C85%2028.20%2C85.19%20L15.80%2C85.81%20Q12%2C86%2010.29%2C83.53%20L4.71%2C75.47%20Q3%2C73%204.71%2C70.15%20L10.29%2C60.85%20Q12%2C58%2010.10%2C55.15%20L3.90%2C45.85%20Q2%2C43%203.90%2C40.15%20L10.10%2C30.85%20Q12%2C28%2012.00%2C25.15%20Z%22%2F%3E%3C%2Fsvg%3E") center/100% 100% no-repeat}
#start-button:hover:not(:disabled){filter:drop-shadow(0 8px 0 #8da618) brightness(1.04);transform:translateY(-2px)}
#start-button:active:not(:disabled){filter:drop-shadow(0 3px 0 #8da618);transform:translateY(3px);box-shadow:none}
#start-button:disabled{background:transparent;filter:drop-shadow(0 4px 0 #4b3b5a);transform:none;box-shadow:none}
#start-button:disabled::before{background:#79678b}
#start-button:focus-visible{outline:3px solid var(--purple);outline-offset:5px}
body:has(#home-screen:not([hidden])) .global-sound-toggle{top:max(16px,env(safe-area-inset-top))}
@media(max-height:650px){#home-screen .home-header{min-height:54px;padding-top:max(12px,env(safe-area-inset-top))}.home-hero{padding:8px 0 14px}#home-screen .home-title{font-size:clamp(54px,10dvh,65px);max-width:260px;letter-spacing:-3px}#home-screen .hero-photos{height:clamp(125px,26dvh,165px)}#home-screen .hero-card{height:calc(100% - 20px);top:8px}#home-screen .hero-back{top:18px}#home-screen .hero-spark{font-size:35px;top:30px}#home-screen .versus-sticker{top:60%;padding:5px 8px;font-size:15px}#home-screen .home-description{font-size:11px;line-height:1.6;margin-top:10px}#start-button{min-height:74px;font-size:21px;padding-block:18px}#home-screen .home-footer{margin-top:12px}}
/* Two different foil finishes for the human and AI on the welcome screen. */
#home-screen .hero-card{isolation:isolate;background-size:240% 240%;animation:heroFoilBorder 8s ease-in-out infinite alternate}
#home-screen .hero-card img{position:relative;z-index:1}
#home-screen .hero-card>span{z-index:3}
#home-screen .hero-card::before,#home-screen .hero-card::after{content:'';position:absolute;inset:5px;border-radius:8px;z-index:2;pointer-events:none;mix-blend-mode:screen}
#home-screen .hero-front{background-image:linear-gradient(135deg,#b99aff 5%,#ffe38e 35%,#fff4cb 47%,#d6ff87 60%,#b99aff 85%);border-color:#ffe2a9}
#home-screen .hero-front::before{background:linear-gradient(115deg,transparent 34%,#ffca5c12 41%,#ffe6a96b 46%,#fffbeea3 49%,#e6ff9b38 53%,transparent 61%) 130% 0/280% 100%;animation:humanFoilSweep 5.8s ease-in-out infinite;animation-delay:-1.6s}
#home-screen .hero-front::after{background:radial-gradient(ellipse at 15% 80%,#ffb13d33,transparent 58%),radial-gradient(ellipse at 90% 15%,#f0ff7c29,transparent 55%);animation:humanFoilGlow 4.6s ease-in-out infinite alternate}
#home-screen .hero-back{background-image:linear-gradient(145deg,#7049ad 8%,#80f3ed 30%,#b493ff 48%,#f1a7ff 64%,#60457a 90%);border-color:#c9baff;animation-duration:6.4s;animation-delay:-2.4s}
#home-screen .hero-back::before{background:linear-gradient(65deg,transparent 32%,#7df9ff0d 38%,#7df9ff7a 42%,transparent 45%,#bd8aff66 48%,#ff9fe961 51%,transparent 55%,#7df9ff33 58%,transparent 64%) -100% 0/260% 100%;animation:aiFoilSweep 4.9s ease-in-out infinite;animation-delay:-2.8s}
#home-screen .hero-back::after{background:radial-gradient(ellipse at 80% 25%,#a75aff4d,transparent 58%),radial-gradient(ellipse at 15% 85%,#52e9ee33,transparent 60%);background-size:140% 140%;animation:aiFoilGlow 5.2s ease-in-out infinite alternate}
@keyframes heroFoilBorder{from{background-position:0% 15%}to{background-position:100% 85%}}
@keyframes humanFoilSweep{0%,12%{background-position:130% 0;opacity:0}24%{opacity:.65}58%{opacity:.65}76%,100%{background-position:-70% 0;opacity:0}}
@keyframes humanFoilGlow{from{opacity:.3}to{opacity:.85}}
@keyframes aiFoilSweep{0%,8%{background-position:-100% 0;opacity:0}22%{opacity:.7}64%{opacity:.7}84%,100%{background-position:150% 0;opacity:0}}
@keyframes aiFoilGlow{from{background-position:0% 100%;opacity:.4}to{background-position:100% 0%;opacity:.9}}
@media(prefers-reduced-motion:reduce){#home-screen .hero-card{background-position:50% 50%}#home-screen .hero-card::before{background-position:50% 0;opacity:.16}#home-screen .hero-card::after{opacity:.35}}