:root{font-family:ui-rounded,'Avenir Next',Nunito,system-ui,sans-serif;color:#fff;background:#7138ef;font-synthesis:none;--yellow:#ffe447;--ink:#2b155c;--muted:#dfd0ff}*{box-sizing:border-box}body{margin:0;min-height:100svh;background:radial-gradient(ellipse at 100% 0%,#a354f4 0,transparent 48%),radial-gradient(ellipse at 0% 100%,#386bf6 0,transparent 55%),#7138ef}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default;opacity:.45}button:focus-visible,a:focus-visible{outline:3px solid var(--yellow);outline-offset:5px}header{padding:25px 4.5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff24;position:relative;z-index:1}.wordmark{color:var(--yellow);font-weight:1000;font-size:23px;letter-spacing:-1.5px;line-height:.85;text-decoration:none;transform:rotate(-5deg);text-shadow:0 3px #47238f;display:block}.wordmark>span{display:block;font-size:27px}.star{font-size:17px;margin-left:5px}.header-right{display:flex;align-items:center;gap:12px;font-size:10px;font-weight:800;letter-spacing:1.8px}.live-dot{width:7px;height:7px;background:#9afaaf;border-radius:50%;box-shadow:0 0 0 4px #9afaaf15}.icon-btn{border:1px solid #ffffff40;background:#ffffff12;color:white;border-radius:12px;width:37px;height:37px;font-size:22px;letter-spacing:0}main{position:relative;z-index:1;max-width:1400px;margin:auto;padding:45px 4.5% 60px;min-height:calc(100svh - 150px)}.eyebrow{color:var(--yellow);font-weight:900;letter-spacing:3px;text-transform:uppercase;font-size:11px}.hero{text-align:center;max-width:900px;margin:4px auto 38px}h1{font-size:clamp(38px,5.5vw,72px);font-weight:1000;letter-spacing:-3px;line-height:1.06;margin:20px 0}h1 em{font-style:normal;color:var(--yellow)}p{line-height:1.6;color:var(--muted)}.hero p{font-size:17px;max-width:570px;margin:0 auto}.pill{display:inline-flex;gap:8px;align-items:center;border-radius:30px;background:#ffffff14;border:1px solid #ffffff35;padding:9px 16px;font-size:11px;font-weight:800;letter-spacing:1px}.home-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:24px;max-width:980px;margin:auto}.panel{background:#ffffff12;border:1px solid #ffffff40;border-radius:26px;padding:28px;box-shadow:0 9px 0 #3716801c;backdrop-filter:blur(8px)}.panel.light{background:#fff;color:var(--ink);box-shadow:0 9px 0 #3c1e8b4d}.light p{color:#8b7ca8}.panel h2{font-size:25px;letter-spacing:-.8px;margin:15px 0 8px}.panel p{font-size:14px;margin:0 0 24px}.panel-icon{display:grid;place-items:center;border-radius:16px;background:#f0e9ff;width:54px;height:54px;font-size:28px}.button{border:0;border-radius:14px;padding:16px 24px;font-weight:900;font-size:15px;background:var(--yellow);color:var(--ink);box-shadow:0 5px 0 #d1ad24;transition:transform .16s,filter .16s;display:inline-flex;align-items:center;justify-content:center;gap:15px;text-decoration:none}.button:hover{filter:brightness(1.05);transform:translateY(-2px)}.button:active{transform:translateY(3px);box-shadow:none}.button.wide{width:100%}.button.purple{background:#7138ef;color:white;box-shadow:0 5px 0 #4f20b4}.button.ghost{background:#ffffff12;color:white;border:1px solid #ffffff40;box-shadow:none}.code-input{display:flex;gap:10px}.code-input input{min-width:0;width:100%;letter-spacing:8px;font-size:23px;text-align:center}.input{width:100%;border:1px solid #ffffff44;border-radius:14px;padding:15px;background:#fff;color:var(--ink);font-weight:800;outline:none}.input:focus{box-shadow:0 0 0 3px #ffe44788}.how{display:flex;justify-content:center;gap:42px;margin-top:42px;color:#e0d4ff;font-size:12px}.how b{display:inline-grid;place-items:center;width:23px;height:23px;background:#ffffff19;border-radius:50%;margin-right:8px;color:var(--yellow)}footer{padding:18px;text-align:center;font-size:9px;font-weight:800;letter-spacing:2px;color:#ffffff80}footer span{margin:0 15px;color:var(--yellow)}.decor{position:fixed;inset:0;overflow:hidden;pointer-events:none}.decor i{position:absolute;font-style:normal;font-size:160px;color:#ffffff07;transform:rotate(-20deg)}.decor i:nth-child(1){left:4%;top:15%;color:#ffe44720;font-size:90px}.decor i:nth-child(2){right:-50px;top:5%;font-size:500px}.decor i:nth-child(3){right:8%;bottom:6%;font-size:100px;color:#ffe44725}.decor i:nth-child(4){left:4%;bottom:3%;font-size:200px}.decor i:nth-child(5){left:36%;top:-120px;font-size:400px}.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px;gap:15px}.section-head h1{font-size:38px;margin:8px 0;letter-spacing:-1.5px}.subtle{font-size:12px;color:var(--muted)}.lobby-grid{display:grid;grid-template-columns:1fr 340px;gap:24px}.join-card{text-align:center}.qr{width:170px;height:170px;padding:10px;background:white;border-radius:16px;margin:12px 0}.game-code{color:var(--yellow);font-size:44px;font-weight:1000;letter-spacing:8px;line-height:1.3}.address{overflow-wrap:anywhere;font-size:11px;color:var(--muted)}.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0 25px}.mode{position:relative;text-align:left;color:white;border:2px solid #ffffff30;border-radius:18px;background:#ffffff09;padding:20px}.mode.active{border-color:var(--yellow);background:#ffe44713}.mode .symbol{font-size:28px;display:block;margin-bottom:12px}.mode strong{font-size:17px;display:block}.mode small{display:block;color:var(--muted);line-height:1.6;margin-top:6px}.check{position:absolute;right:12px;top:12px;border:1px solid #ffffff60;border-radius:50%;width:19px;height:19px;font-size:12px;text-align:center}.active .check{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}.label{font-size:11px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase}.themes{display:flex;gap:9px;flex-wrap:wrap;margin:14px 0 24px}.theme{border:1px solid #ffffff30;border-radius:10px;background:#ffffff08;color:#ffffff70;padding:10px 12px;font-size:11px;font-weight:700}.theme.active{color:white;background:#ffffff20;border-color:#ffffff60}.players{display:flex;gap:13px;flex-wrap:wrap;margin:20px 0}.player{text-align:center;min-width:76px}.avatar{width:70px;height:70px;object-fit:cover;border-radius:23px;border:3px solid #ffffff60;background:#884aee}.player strong{display:block;font-size:12px;margin-top:7px}.player small{font-size:10px;color:#c6ffcc}.empty-slot{width:70px;height:70px;border:2px dashed #ffffff30;border-radius:23px;display:grid;place-items:center;color:#ffffff50;font-size:25px}.join-wrap{max-width:490px;margin:15px auto;text-align:center}.join-wrap h1{font-size:43px;letter-spacing:-1.8px}.avatars{display:flex;justify-content:center;gap:10px;margin:18px 0 26px}.avatar-choice{padding:0;border:0;background:none;border-radius:22px}.avatar-choice .avatar{width:65px;height:65px}.avatar-choice.active .avatar{border-color:var(--yellow);box-shadow:0 0 0 3px #ffe44750;transform:translateY(-5px)}.form-label{display:block;text-align:left;font-size:12px;font-weight:800;margin:20px 0 10px}.waiting{text-align:center;margin:40px auto;max-width:650px}.waiting .avatar{width:110px;height:110px;border-radius:35px}.pulse{display:inline-block;animation:pulse 1.5s infinite}.game-top{display:flex;justify-content:space-between;align-items:center;gap:15px}.timer{border:3px solid #ffffff55;border-radius:50%;width:68px;height:68px;display:grid;place-items:center;font-size:27px;font-weight:1000;background:#ffffff15}.timer.urgent{border-color:#ffbd68;color:#ffe447;animation:pulse .65s infinite}.question-area{max-width:1000px;margin:20px auto;text-align:center}.question-area h1{font-size:clamp(27px,4vw,49px);letter-spacing:-1.5px;margin:26px auto 35px;line-height:1.2}.answers{display:grid;grid-template-columns:1fr 1fr;gap:15px;text-align:left}.answer{border:2px solid #ffffff40;border-radius:18px;background:white;color:var(--ink);padding:22px;display:flex;align-items:center;gap:16px;font-size:19px;font-weight:800;text-align:left;min-height:87px;box-shadow:0 5px 0 #32126744}.answer b{display:grid;place-items:center;background:#eee6ff;color:#7138ef;width:37px;height:37px;flex-shrink:0;border-radius:11px;font-size:15px}.answer.selected{background:var(--yellow);border-color:var(--yellow)}.answer.correct{background:#b9ffc9;border-color:#5be388}.answer.wrong{background:#ffc4d0;border-color:#ff819d}.answer:disabled{opacity:1}.answer.removed{visibility:hidden}.status{text-align:center;color:var(--yellow);font-weight:800;min-height:28px;margin:24px 0}.score-strip{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:30px}.score-item{display:flex;gap:10px;align-items:center;border-radius:16px;background:#ffffff14;padding:10px 15px;font-size:12px}.score-item img{width:36px;height:36px;border-radius:12px}.score-item strong{display:block}.score-item .points{color:var(--yellow);font-weight:900}.joker-row{display:flex;justify-content:center;gap:12px;margin:22px auto}.joker-row button{font-size:12px}.memory-head{text-align:center;margin:10px 0 22px}.memory-head h1{font-size:32px;letter-spacing:-1px}.board{display:grid;grid-template-columns:repeat(10,1fr);gap:10px;max-width:1150px;margin:auto}.card{aspect-ratio:.92;border:1px solid #ffffff55;border-radius:12px;background:#ffffff15;box-shadow:0 4px 0 #3b167555;position:relative;color:white;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:4px;transition:transform .2s}.card:hover:not(:disabled){transform:translateY(-4px)}.card .card-number{position:absolute;top:5px;left:7px;font-size:8px;color:#ffffffa0}.card .mini-logo{font-size:14px;line-height:.85;color:var(--yellow);font-weight:1000;transform:rotate(-8deg);text-shadow:0 2px #47238f}.card img{width:85%;border-radius:6px}.card .theme-icon{font-size:25px;color:var(--yellow)}.card small{font-size:8px;font-weight:800;line-height:1.2;margin-top:5px}.card.used{opacity:.18;box-shadow:none}.podium{text-align:center}.podium h1{font-size:50px}.podium-steps{display:flex;justify-content:center;align-items:flex-end;gap:18px;margin:45px auto;max-width:650px}.podium-place{width:180px;display:flex;flex-direction:column;align-items:center}.podium-place .avatar{width:90px;height:90px;border-color:var(--yellow);margin-bottom:12px}.podium-place strong{font-size:19px}.pedestal{border-radius:15px 15px 0 0;background:linear-gradient(#ffffff40,#ffffff0d);width:100%;height:110px;margin-top:15px;padding:15px;font-size:45px;font-weight:1000}.first .pedestal{height:170px;background:linear-gradient(#ffe96a,#edb729);color:var(--ink)}.podium-place small{font-weight:900;color:var(--yellow)}.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:5}.confetti i{position:absolute;width:9px;height:15px;top:-25px;animation:fall 4s linear infinite}.rank-row{display:flex;align-items:center;gap:15px;background:#ffffff12;border-radius:12px;padding:12px;margin:8px auto;max-width:600px}.rank-row span:last-child{margin-left:auto;color:var(--yellow);font-weight:900}#toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);max-width:90vw;background:#291549;color:white;padding:15px 22px;border-radius:14px;box-shadow:0 6px 30px #0005;z-index:10;display:none;font-size:14px}.reconnect{text-align:center;padding:40px}.mute{opacity:.5}.logo-hero{width:190px;height:110px;object-fit:cover;border-radius:18px;display:block;margin:0 auto 10px}@keyframes pulse{50%{opacity:.5;transform:scale(.97)}}@keyframes fall{to{transform:translateY(110vh) rotate(700deg)}}@media(min-width:1500px){main{padding-top:65px}.hero{margin-bottom:50px}}@media(max-width:850px){.lobby-grid{grid-template-columns:1fr 270px}.panel{padding:22px}.board{gap:7px}.card small{font-size:7px}.header-right{letter-spacing:1px;font-size:9px}}@media(max-width:620px){header{padding:18px 6%}.header-right>span:not(.live-dot){display:none}.wordmark{font-size:18px}.wordmark>span{font-size:22px}main{padding:30px 5% 35px}.hero{margin-bottom:28px}h1{letter-spacing:-1.5px}.hero p{font-size:14px}.home-grid,.lobby-grid{grid-template-columns:1fr}.home-grid{gap:20px}.panel{border-radius:22px}.how{gap:12px;font-size:9px;margin-top:32px}.how b{margin-right:3px;width:18px;height:18px}.section-head{align-items:flex-start}.section-head h1{font-size:29px}.mode{padding:15px}.mode strong{font-size:15px}.mode small{font-size:10px}.join-card .qr{width:150px;height:150px}.game-code{font-size:38px}.avatars{gap:7px}.avatar-choice .avatar{width:55px;height:55px;border-radius:18px}.join-wrap h1{font-size:36px}.question-area h1{margin:24px 0;font-size:28px}.answers{grid-template-columns:1fr;gap:11px}.answer{min-height:64px;padding:13px;font-size:15px;border-radius:14px}.answer b{width:32px;height:32px}.timer{width:55px;height:55px;font-size:22px}.score-strip{gap:7px}.score-item{padding:8px;font-size:10px}.score-item img{width:28px;height:28px}.board{grid-template-columns:repeat(5,1fr);gap:8px}.card{aspect-ratio:1.05}.card small{font-size:7px}.card .theme-icon{font-size:22px}.card .mini-logo{font-size:12px}.memory-head h1{font-size:25px}.podium h1{font-size:36px}.podium-steps{gap:10px}.podium-place{width:30%}.podium-place .avatar{width:65px;height:65px;border-radius:20px}.podium-place strong{font-size:14px}.podium-place small{font-size:11px}.pedestal{font-size:34px}.first .pedestal{height:145px}footer{font-size:7px;letter-spacing:1px}footer span{margin:0 5px}}
.question-area{animation:arrive .3s ease-out}.card:active:not(:disabled){transform:rotateY(18deg) scale(.96)}@keyframes arrive{from{opacity:.5;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* Home-screen Safari, camera capture, and display-only computer layouts. */
body{padding-top:env(safe-area-inset-top);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
footer{padding-bottom:max(14px,env(safe-area-inset-bottom))}
.panel-icon svg{width:38px;height:38px}
.scan-button{margin-top:14px;padding:12px;font-size:13px}
.resume-wrap{text-align:center;margin-top:22px}
.back-button{display:inline-flex;align-items:center;gap:8px;border:0;background:transparent;color:#eee4ff;font-size:12px;font-weight:800;padding:6px 0 12px;margin-bottom:5px}
.back-button:hover{color:var(--yellow)}
.screen-stage{display:flow-root;transform-origin:top center}
.scanner-dialog{border:1px solid #ffffff60;border-radius:24px;padding:24px;background:#6431d6;color:white;width:min(450px,calc(100% - 28px));max-height:calc(100dvh - 40px);overflow:auto;box-shadow:0 20px 80px #22134d70}
.scanner-dialog::backdrop{background:#1a1038bb;backdrop-filter:blur(5px)}
.scanner-heading{display:flex;justify-content:space-between;gap:12px;align-items:center}
.scanner-heading h2{font-size:23px;letter-spacing:-.6px;margin:0}
.scanner-heading button{flex-shrink:0}
.scanner-dialog p{font-size:13px;line-height:1.5}
.scanner-dialog .scanner-note{font-size:11px;margin:15px 0;color:#e2d2ff}
.scanner-dialog .button{font-size:13px}
.camera-frame{position:relative;aspect-ratio:1;border-radius:18px;overflow:hidden;background:#22123f;margin:16px 0}
.camera-frame[hidden]{display:none}
.camera-frame video{width:100%;height:100%;object-fit:cover}
.scan-frame{position:absolute;inset:17%;border:3px solid var(--yellow);border-radius:12px;box-shadow:0 0 0 80px #0003}
body[data-role="host"]:not([data-view="lobby"]){height:100svh;min-height:0;display:flex;flex-direction:column;overflow:hidden}
body[data-role="host"]:not([data-view="lobby"]) header{padding:12px 4%;flex-shrink:0}
body[data-role="host"]:not([data-view="lobby"]) main{flex:1;min-height:0;width:100%;padding:14px 4% 16px;overflow:hidden;margin:0 auto}
body[data-role="host"]:not([data-view="lobby"]) footer{display:none}
body[data-role="host"] .game-top .timer{height:50px;width:50px;font-size:23px}
body[data-role="host"] .question-area{margin:14px auto 0}
body[data-role="host"] .question-area h1{font-size:clamp(26px,3.5vw,46px);margin:14px auto 22px;line-height:1.16}
body[data-role="host"] .answer{min-height:65px;padding:15px 20px;font-size:19px}
body[data-role="host"] .status{margin:17px 0 10px;min-height:20px;font-size:14px}
body[data-role="host"] .score-strip{margin-top:18px}
body[data-role="host"] .score-item{padding:8px 13px}
body[data-role="host"] .memory-head{margin:5px 0 14px}
body[data-role="host"] .memory-head h1{font-size:30px;margin:9px 0}
body[data-role="host"] .memory-head p{font-size:13px;margin:8px 0}
body[data-role="host"] .board{max-width:1050px;gap:9px}
body[data-role="host"] .card{aspect-ratio:1.6;border-radius:9px}
body[data-role="host"] .card img{width:60%;max-height:52px;object-fit:contain}
body[data-role="host"] .card .theme-icon{font-size:21px;line-height:1}
body[data-role="host"] .card small{font-size:8px;max-width:90%}
body[data-role="host"] .podium h1{font-size:40px;margin:12px 0}
body[data-role="host"] .podium p{margin:8px 0}
body[data-role="host"] .podium-steps{margin:20px auto}
body[data-role="host"] .podium-place .avatar{width:64px;height:64px;border-radius:22px;margin-bottom:6px}
body[data-role="host"] .pedestal{height:65px;margin-top:10px;padding:8px;font-size:35px}
body[data-role="host"] .first .pedestal{height:105px}
body[data-role="host"] .rank-row{padding:7px 12px;margin:5px auto}
body[data-role="host"] .rank-row .avatar{width:32px;height:32px;border-radius:10px}
@media(min-width:800px){
 body[data-role="host"][data-view="lobby"]{height:100svh;min-height:0;display:flex;flex-direction:column;overflow:hidden}
 body[data-role="host"][data-view="lobby"] header{padding:12px 4%;flex-shrink:0}
 body[data-role="host"][data-view="lobby"] main{flex:1;min-height:0;width:100%;padding:14px 4% 12px;overflow:hidden}
 body[data-role="host"][data-view="lobby"] footer{display:none}
 body[data-view="lobby"] .section-head{margin-bottom:16px}
 body[data-view="lobby"] .section-head h1{font-size:32px;margin:5px 0}
 body[data-view="lobby"] .panel{padding:20px}
 body[data-view="lobby"] .mode-grid{margin:12px 0 18px}
 body[data-view="lobby"] .mode{padding:14px 17px}
 body[data-view="lobby"] .mode .symbol{font-size:23px;margin-bottom:8px}
 body[data-view="lobby"] .mode small{font-size:11px}
 body[data-view="lobby"] .themes{margin:12px 0 18px;gap:8px}
 body[data-view="lobby"] .theme{padding:8px 10px}
 body[data-view="lobby"] .players{margin:15px 0}
 body[data-view="lobby"] .avatar,body[data-view="lobby"] .empty-slot{width:56px;height:56px;border-radius:18px}
 body[data-view="lobby"] .join-card .qr{width:150px;height:150px;margin:4px 0}
 body[data-view="lobby"] .join-card p{margin-bottom:16px}
 body[data-view="lobby"] .join-card h2{margin-top:10px}
}
@media(min-width:800px) and (max-height:850px){
 body[data-view="home"] header{padding:14px 4.5%}
 body[data-view="home"] main{padding:21px 4.5% 18px;min-height:calc(100svh - 109px)}
 body[data-view="home"] .hero{margin:0 auto 24px}
 body[data-view="home"] .hero h1{font-size:clamp(38px,4vw,53px);margin:14px 0}
 body[data-view="home"] .hero p{font-size:14px}
 body[data-view="home"] .panel{padding:21px 25px}
 body[data-view="home"] .panel h2{font-size:23px;margin:11px 0 7px}
 body[data-view="home"] .panel p{margin-bottom:17px;font-size:12px}
 body[data-view="home"] .panel-icon{width:43px;height:43px;border-radius:13px}
 body[data-view="home"] .panel-icon svg{width:31px;height:31px}
 body[data-view="home"] .how{margin-top:23px}
 body[data-view="home"] .resume-wrap{margin-top:16px}
 body[data-view="home"] .resume-wrap .button{font-size:11px;padding:9px 16px}
 body[data-view="home"] footer{padding-top:9px;padding-bottom:9px;font-size:8px}
}
@media(max-width:620px){
 header{padding:14px 6%}
 #fullscreen{display:none}
 main{padding-top:20px;padding-bottom:20px}
 .input{font-size:16px} /* avoid Safari zooming into form fields */
 .join-wrap{margin:5px auto}
 .join-wrap h1{font-size:33px;margin:16px 0}
 .join-wrap>p{font-size:13px;margin:12px 0 20px}
 .avatars{gap:6px}
 .avatar-choice .avatar{width:clamp(43px,13.5vw,55px);height:clamp(43px,13.5vw,55px)}
 .panel{padding:21px}
 .question-area{margin:12px auto 0}
 .question-area h1{font-size:25px;line-height:1.16;margin:17px auto 20px}
 .answer{min-height:57px;padding:10px 13px;font-size:15px}
 .answers{gap:10px}
 .status{margin:17px 0 8px;font-size:13px;min-height:20px}
 .joker-row{gap:8px;margin:14px 0}
 .joker-row .button{padding:12px 13px;font-size:11px}
 .score-strip{margin-top:16px;gap:6px}
 .score-item{padding:7px 9px}
 body[data-role="player"]:not([data-view="lobby"]) footer{display:none}
 body[data-role="player"]:not([data-view="lobby"]) main{padding-bottom:max(20px,env(safe-area-inset-bottom))}
 .game-top .pill{padding:8px 10px;font-size:9px;letter-spacing:.6px}
 .game-top>.subtle{font-size:9px}
 .timer{width:47px;height:47px;font-size:21px;flex-shrink:0}
 .waiting{margin:20px auto}
 .waiting h1{font-size:34px;margin:18px 0}
 .waiting .avatar{width:85px;height:85px;border-radius:26px}
}
@media(max-width:620px) and (max-height:720px){
 header{padding-top:10px;padding-bottom:10px}
 body[data-role="player"] main{padding-top:12px}
 .question-area h1{font-size:22px;margin:12px auto 16px}
 .answer{min-height:50px;padding:8px 11px;font-size:14px}
 .answer b{width:29px;height:29px}
 .answers{gap:8px}
 .status{margin:13px 0 5px;font-size:12px}
 .joker-row{margin:10px 0}
 .joker-row .button{padding:10px 12px}
 .score-strip{margin-top:12px}
 .score-item{font-size:9px;padding:5px 7px}
 .score-item img{width:24px;height:24px}
}
@media(min-width:800px) and (max-height:720px){
 body[data-view="home"] header{padding-top:9px;padding-bottom:9px}
 body[data-view="home"] main{padding-top:16px;padding-bottom:12px;min-height:calc(100svh - 91px)}
 body[data-view="home"] .hero{margin-bottom:18px}
 body[data-view="home"] .hero .pill{padding:6px 12px;font-size:9px}
 body[data-view="home"] .hero h1{font-size:40px;line-height:1.03;margin:10px 0}
 body[data-view="home"] .hero p{font-size:12px;line-height:1.5;max-width:650px}
 body[data-view="home"] .hero p br{display:none}
 body[data-view="home"] .panel{padding:17px 23px}
 body[data-view="home"] .panel-icon{width:34px;height:34px;border-radius:10px}
 body[data-view="home"] .panel-icon svg{width:27px;height:27px}
 body[data-view="home"] .panel h2{font-size:22px;margin-top:8px}
 body[data-view="home"] .panel p{margin-bottom:13px}
 body[data-view="home"] .button{padding:12px 20px;font-size:13px}
 body[data-view="home"] .code-input input{font-size:20px;padding:12px}
 body[data-view="home"] .scan-button{padding:10px;font-size:12px;margin-top:12px}
 body[data-view="home"] .how{margin-top:15px;font-size:11px}
 body[data-view="home"] .resume-wrap{margin-top:10px}
 body[data-view="home"] .resume-wrap .button{font-size:10px;padding:7px 14px}
}
.card:disabled{opacity:1}
.card.used:disabled{opacity:.18}
body[data-role="host"] .card small{font-size:10px;line-height:1.1}
@media(max-width:620px){
 body[data-view="home"] .hero h1{font-size:31px;letter-spacing:-1px;margin:13px 0}
 body[data-view="home"] .hero p{display:none}
 body[data-view="home"] .hero{margin-bottom:22px}
 body[data-view="home"] .home-grid{gap:16px}
 body[data-view="home"] .home-grid>section{display:grid;grid-template-columns:36px 1fr;column-gap:10px;padding:19px}
 body[data-view="home"] .home-grid>section:nth-child(2){order:-1}
 body[data-view="home"] .panel-icon{width:36px;height:36px;border-radius:11px}
 body[data-view="home"] .panel-icon svg{width:27px;height:27px}
 body[data-view="home"] .panel h2{font-size:20px;align-self:center;margin:0;letter-spacing:-.6px}
 body[data-view="home"] .panel p{grid-column:1/-1;font-size:12px;margin:12px 0 16px}
 body[data-view="home"] .panel p br{display:none}
 body[data-view="home"] .panel form,body[data-view="home"] .panel>.button{grid-column:1/-1}
 body[data-view="home"] .panel .button{padding:13px 18px;font-size:13px}
 body[data-view="home"] .code-input input{font-size:21px;padding:12px}
 body[data-view="home"] .scan-button{margin-top:13px}
 body[data-view="home"] .how,body[data-view="home"] footer{display:none}
 body[data-view="home"] .resume-wrap{margin-top:18px}
 body[data-view="home"] .resume-wrap .button{padding:11px 16px;font-size:11px}
}
/* Original 3D artwork for joining, hosting and power-ups. */
body[data-view="home"] .panel-icon{background:transparent!important;width:72px;height:72px;border-radius:0}
.home-illustration{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 3px #39157518)}
.joker-row .button{gap:8px;padding:8px 15px}
.joker-art{width:46px;height:46px;object-fit:contain;flex-shrink:0}
.joker-row .button span{line-height:1.25;text-align:left}
.joker-row .button small{display:block;font-size:9px;font-weight:700;margin-top:3px;opacity:.8}
@media(min-width:800px) and (max-height:850px){
 body[data-view="home"] .panel-icon{width:60px;height:60px}
}
@media(max-width:620px){
 body[data-view="home"] .home-grid>section{grid-template-columns:58px 1fr;column-gap:12px}
 body[data-view="home"] .panel-icon{width:58px;height:58px}
 body[data-view="home"] .panel h2{font-size:19px}
 .joker-row .button{padding:7px 10px;font-size:11px}
 .joker-art{width:40px;height:40px}
}
@media(max-width:620px) and (max-height:720px){
 .joker-row .button{padding:6px 10px}
 .joker-art{width:34px;height:34px}
}
@media(min-width:800px) and (max-height:720px){
 body[data-view="home"] .hero{margin-bottom:10px}
}
/* Themes and live player choices on the shared display. */
.theme-art{display:inline-block;width:26px;height:26px;object-fit:contain;flex-shrink:0;vertical-align:middle}
.theme{display:inline-flex;align-items:center;gap:6px}
.question-theme{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:32px}
.question-theme .theme-art{width:32px;height:32px}
.card .theme-icon{display:grid;place-items:center;height:28px;line-height:1}
.card .theme-icon .theme-art{width:28px;height:28px;max-height:none;border-radius:0}
body[data-role="host"] .card .theme-icon{height:28px}
body[data-role="host"] .card .theme-icon .theme-art{width:28px;height:28px;max-height:none}
.answer-label{flex:1;min-width:0}
.answer-voters{display:flex;justify-content:flex-end;flex-wrap:wrap;align-items:flex-start;gap:5px;max-width:46%;flex-shrink:0}
.answer-voter{display:flex;flex-direction:column;align-items:center;gap:3px;width:43px;animation:voter-arrive .22s ease-out;color:var(--ink)}
.voter-avatar{width:33px;height:33px;object-fit:cover;border:2px solid #8c5be5;border-radius:12px;background:#7138ef;box-shadow:0 2px 3px #29154a1a}
.answer-voter>span{font-size:8px;font-weight:800;line-height:1.2;max-width:43px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@keyframes voter-arrive{from{opacity:0;transform:translateY(-6px) scale(.8)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:620px){.theme-art{width:24px;height:24px}.question-theme .theme-art{width:27px;height:27px}.card .theme-icon .theme-art{width:25px;height:25px}}
@media(prefers-reduced-motion:reduce){.answer-voter{animation:none}}
.memorize-phone{text-align:center;max-width:510px;margin:25px auto 30px}
.memorize-phone>img{display:block;width:110px;height:110px;object-fit:contain;margin:0 auto 24px}
.memorize-phone .eyebrow{font-size:10px;letter-spacing:1.6px}
.memorize-phone h1{font-size:34px;letter-spacing:-1.4px;line-height:1.15;margin:20px 0}
.memorize-phone p{font-size:14px;max-width:350px;margin:0 auto 24px}
.memorize-phone .pill{font-size:10px;letter-spacing:0;line-height:1.5}
@media(max-width:620px) and (max-height:720px){.memorize-phone{margin:18px auto}.memorize-phone>img{width:78px;height:78px;margin-bottom:17px}.memorize-phone h1{font-size:29px;margin:14px 0}.memorize-phone p{font-size:12px;margin-bottom:18px}}
/* The shared card reveal is outside the scaled screen stage. */
.card.reveal-source{visibility:hidden}
.card-reveal-overlay{position:fixed;inset:0;z-index:25;overflow:hidden;perspective:1100px;pointer-events:auto;isolation:isolate}
.card-reveal-shade{position:absolute;inset:0;background:radial-gradient(ellipse at center,#5725bbdc,#1e0c46ed);opacity:0}
.card-reveal-flight{position:absolute;left:0;top:0;perspective:1000px;will-change:transform,opacity}
.card-reveal-flipper{position:relative;width:100%;height:100%;transform-style:preserve-3d;will-change:transform}
.card-reveal-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:2px solid #ffffff80;border-radius:25px;box-shadow:0 16px 70px #16052e66;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center}
.card-reveal-back{background:#7138ef}
.card-reveal-back>img{width:90%;height:90%;object-fit:contain}
.card-reveal-front{transform:rotateY(180deg);background:linear-gradient(145deg,#9756f6,#6234df);padding:25px;text-align:center}
.reveal-kicker{font-size:12px;font-weight:900;letter-spacing:3px;color:#f1e7ff}
.reveal-theme-art{width:42%;height:36%;object-fit:contain;margin:22px 0 15px;filter:drop-shadow(0 8px 10px #30126e30)}
.card-reveal-front>strong{font-size:clamp(22px,3vw,32px);line-height:1.15;font-weight:1000;color:var(--yellow);letter-spacing:-.7px}
.reveal-caption{font-size:12px;margin-top:18px;color:#e8ddff;font-weight:700}
body:has(.card-reveal-overlay){overflow:hidden}
@media(max-width:620px){.card-reveal-face{border-radius:22px}.card-reveal-front{padding:18px}.reveal-kicker{font-size:10px}.reveal-theme-art{margin:15px 0 12px}.reveal-caption{font-size:11px;margin-top:13px}}
/* Completed cards retain every attempt, including a recovery. */
.card.completed:disabled{opacity:1;box-shadow:none;justify-content:flex-start;padding-top:7px;gap:0;cursor:default}
.card.completed.correct{background:#184d493d;border-color:#7de3aa}
.card.completed.incorrect{background:#7c24433b;border-color:#ff879c}
.card.completed .theme-icon{height:19px!important}
.card.completed .theme-icon .theme-art,body[data-role="host"] .card.completed .theme-icon .theme-art{width:19px;height:19px}
.card.completed>small{display:none}
.card-history{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:3px;min-height:24px}
.card-attempt{position:relative;display:inline-flex;border:2px solid;border-radius:9px;background:#7138ef}
.card-attempt.correct{border-color:#7bf0a8}
.card-attempt.incorrect{border-color:#ff6b8b}
.card .card-attempt .card-player-avatar,body[data-role="host"] .card .card-attempt .card-player-avatar{display:block;width:22px;height:22px;max-height:none;object-fit:cover;border-radius:6px}
.card-result-symbol{position:absolute;right:-5px;bottom:-4px;display:grid;place-items:center;width:12px;height:12px;border-radius:50%;font-size:10px;font-weight:1000;color:#183a2c;background:#7bf0a8;line-height:1}
.incorrect>.card-result-symbol{background:#ff6b8b;color:#51102b}
@media(max-width:620px){.card.completed:disabled{padding-top:5px}.card-history{gap:3px;margin-top:2px}.card .card-attempt .card-player-avatar{width:20px;height:20px}.card.completed .theme-icon{height:17px!important}.card.completed .theme-icon .theme-art{width:17px;height:17px}}
.card.completed:disabled{padding-top:5px}
.card.completed .theme-icon{height:17px!important}
.card.completed .theme-icon .theme-art,body[data-role="host"] .card.completed .theme-icon .theme-art{width:17px;height:17px}
.card-history{margin-top:2px}
.card-history-player{display:flex;flex-direction:column;align-items:center;gap:1px;width:30px;min-width:0}
.card-attempt-name{display:block;max-width:30px;font-size:7px;font-weight:800;line-height:1.1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:white}
@media(max-width:620px){.card.completed .theme-icon{height:15px!important}.card.completed .theme-icon .theme-art{width:15px;height:15px}.card-history-player{width:26px}.card-attempt-name{max-width:26px}.card .card-attempt .card-player-avatar{width:20px;height:20px}}