*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#f5ede0;--surface:#fffdf8;--surface2:#ede5d8;--border:#ddd0bc;--text:#1e1510;--muted:#9a8878;--primary:#7c3aed;--primary2:#6d28d9;--success:#059669;--danger:#dc2626;--warn:#d97706;--cat-numbers:#2563eb;--cat-movies:#d97706;--cat-technology:#059669;--cat-music:#db2777;--cat-sports:#ea580c;--cat-general:#4f46e5;--cat-mix:#7c3aed;--cat-custom:#0d9488;--radius:16px;--radius-sm:10px;--shadow:0 8px 32px rgba(0,0,0,0.12)}html,body{height:100%;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,segoe ui,system-ui,sans-serif;font-size:16px;line-height:1.5;overflow-x:hidden}h1{font-size:clamp(1.8rem,5vw,2.8rem);font-weight:800;letter-spacing:-1px}h2{font-size:clamp(1.3rem,4vw,1.8rem);font-weight:700}h3{font-size:1.1rem;font-weight:600}p{color:var(--muted)}#app{min-height:100vh;display:flex;flex-direction:column}.screen{display:none;flex:1;flex-direction:column;min-height:100vh;min-height:100dvh;padding:1rem;max-width:640px;margin:0 auto;width:100%}.screen.active{display:flex}.container{max-width:640px;margin:0 auto;width:100%;padding:0 1rem}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.85rem 1.5rem;border-radius:var(--radius-sm);font-size:1rem;font-weight:600;cursor:pointer;border:none;transition:transform .15s,opacity .15s,box-shadow .15s;text-decoration:none;-webkit-tap-highlight-color:transparent;user-select:none}.btn:active{transform:scale(.96)}.btn-full{width:100%}.btn-primary{background:var(--primary);color:#fff;box-shadow:0 4px 16px rgba(124,58,237,.3)}.btn-primary:hover{background:var(--primary2);box-shadow:0 6px 20px rgba(124,58,237,.4)}.btn-outline{background:0 0;color:var(--text);border:2px solid var(--border)}.btn-outline:hover{border-color:var(--primary);color:var(--primary2)}.btn-success{background:var(--success);color:#fff;box-shadow:0 4px 16px rgba(16,185,129,.35)}.btn-danger{background:var(--danger);color:#fff}.btn-sm{padding:.5rem 1rem;font-size:.875rem;border-radius:8px}.btn-icon{padding:.6rem;border-radius:50%;background:var(--surface2);color:var(--text);border:1px solid var(--border);cursor:pointer;transition:background .15s;font-size:1.1rem;line-height:1}.btn-icon:hover{background:var(--border)}.input{width:100%;padding:.85rem 1rem;background:var(--surface2);border:2px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:1rem;outline:none;transition:border-color .2s}.input:focus{border-color:var(--primary)}.input::placeholder{color:var(--muted)}label{display:block;font-size:.85rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.4rem}.form-group{margin-bottom:1.2rem}select.input{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238888aa' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.5rem}#screen-home{justify-content:flex-start;gap:1rem;padding:.75rem 1.25rem 1rem}.home-topbar{display:flex;align-items:center;justify-content:space-between}.home-brand{font-size:1.15rem;font-weight:700;color:var(--text);letter-spacing:-.5px;display:flex;align-items:center;gap:.2rem}.logo-emoji{display:inline-block;font-size:1.5rem;line-height:1;animation:brainPulse 3s ease-in-out infinite;will-change:transform,filter}@keyframes brainPulse{0%{transform:scale(1)rotate(0);filter:drop-shadow(0 0 0 rgba(124,58,237,0))}12%{transform:scale(1.3)rotate(-12deg);filter:drop-shadow(0 0 10px rgba(124,58,237,.8))}24%{transform:scale(1)rotate(5deg);filter:drop-shadow(0 0 4px rgba(168,85,247,.4))}36%{transform:scale(1.12)rotate(-3deg);filter:drop-shadow(0 0 7px rgba(124,58,237,.6))}50%{transform:scale(1)rotate(0);filter:drop-shadow(0 0 0 rgba(124,58,237,0))}100%{transform:scale(1)rotate(0);filter:drop-shadow(0 0 0 rgba(124,58,237,0))}}.logo-text{background:linear-gradient(90deg,#7c3aed 0%,#a855f7 20%,#ec4899 45%,#f59e0b 65%,#a855f7 80%,#7c3aed 100%);background-size:250%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:logoShimmer 3s linear infinite}@keyframes logoShimmer{0%{background-position:0}100%{background-position:250%}}.logo-sparkle{display:inline-block;font-size:.9rem;animation:sparkleRotate 2s ease-in-out infinite;will-change:transform,opacity}@keyframes sparkleRotate{0%,100%{transform:scale(.7)rotate(0);opacity:.4}25%{transform:scale(1.3)rotate(30deg);opacity:1}50%{transform:scale(.9)rotate(15deg);opacity:.7}75%{transform:scale(1.1)rotate(-10deg);opacity:.9}}.home-mute-btn{background:var(--surface);border:1px solid var(--border);border-radius:50px;padding:.35rem .7rem;font-size:.9rem;cursor:pointer;color:var(--muted);transition:background .2s}.home-mute-btn:hover{background:var(--surface2)}.home-hero{text-align:center;padding:.5rem 0 0}.home-title{font-size:clamp(1.8rem,7vw,2.4rem);font-weight:900;letter-spacing:-1.5px;color:var(--text);margin-bottom:.4rem;line-height:1.15}.home-sub{font-size:.85rem;color:var(--muted)}.home-actions{display:flex;flex-direction:column;gap:.6rem}.btn-create-hero,.btn-join-hero{width:100%;display:flex;align-items:center;gap:.85rem;padding:1rem 1.1rem;border-radius:var(--radius);border:none;cursor:pointer;text-align:left;transition:transform .15s,box-shadow .15s;-webkit-tap-highlight-color:transparent}.btn-create-hero:active,.btn-join-hero:active{transform:scale(.97)}.btn-create-hero{background:linear-gradient(135deg,#7c3aed 0%,#5b21b6 100%);box-shadow:0 6px 20px rgba(124,58,237,.3);color:#fff}.btn-join-hero{background:var(--surface);border:1.5px solid var(--border);color:var(--text);box-shadow:0 2px 8px rgba(0,0,0,6%)}.btn-join-hero:hover{border-color:var(--primary)}.btn-hero-icon{font-size:1.4rem;flex-shrink:0;width:42px;height:42px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.15);border-radius:12px}.btn-join-hero .btn-hero-icon{background:var(--surface2)}.btn-hero-text{flex:1;display:flex;flex-direction:column;gap:.1rem}.btn-hero-title{font-size:1rem;font-weight:700;line-height:1.2}.btn-hero-sub{font-size:.78rem;opacity:.6}.btn-hero-arrow{font-size:1.2rem;opacity:.5;flex-shrink:0}.home-cats-section{}.home-cats-label{font-size:.68rem;font-weight:700;color:var(--muted);letter-spacing:.1em;margin-bottom:.5rem}.category-preview{display:flex;gap:.5rem;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}.category-preview::-webkit-scrollbar{display:none}.cat-chip{background:var(--surface);border:1.5px solid var(--border);border-radius:12px;padding:.6rem .85rem;font-size:.78rem;font-weight:600;color:var(--text);display:flex;flex-direction:column;align-items:center;gap:.2rem;flex-shrink:0;transition:border-color .2s;cursor:default}.cat-chip:hover{border-color:var(--cat-color,var(--primary))}.cat-chip-emoji{font-size:1.3rem}.cat-chip-name{font-size:.68rem;color:var(--muted);white-space:nowrap}.home-footer{display:flex;align-items:center;justify-content:center;gap:.75rem;margin-top:auto;padding-top:.5rem;font-size:.78rem;color:var(--muted)}.home-quizzes-btn{background:0 0;border:none;cursor:pointer;color:var(--muted);font-size:.78rem;font-weight:500;padding:0;transition:color .2s}.home-quizzes-btn:hover{color:var(--text)}.home-footer-sep{opacity:.4}.home-footer-link{color:var(--muted);text-decoration:none}.home-footer-link:hover{color:var(--text)}.conn-status{font-size:.72rem;font-weight:600;padding:.25rem .6rem;border-radius:50px;background:var(--surface2);border:1px solid var(--border);color:var(--muted);white-space:nowrap;margin-left:auto}.conn-status[data-status=connected]{color:var(--success);border-color:var(--success);background:color-mix(in srgb,var(--success) 10%,var(--surface))}.conn-status[data-status=disconnected]{color:var(--danger);border-color:var(--danger);background:color-mix(in srgb,var(--danger) 10%,var(--surface))}.conn-status[data-status=error]{color:var(--danger);border-color:var(--danger);background:color-mix(in srgb,var(--danger) 10%,var(--surface))}.scores-next-sticky,.sticky-cta{position:sticky;bottom:1rem;margin-top:.5rem;z-index:10;box-shadow:0 4px 20px rgba(0,0,0,.15)}#screen-create{gap:.75rem;padding-top:1rem}.screen-header{display:flex;align-items:center;gap:1rem;margin-bottom:.5rem}.category-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}.cat-btn{background:var(--surface);border:2px solid var(--border);border-radius:var(--radius-sm);padding:.6rem .4rem;cursor:pointer;text-align:center;transition:all .2s;color:var(--text);-webkit-tap-highlight-color:transparent}.cat-btn:hover{border-color:var(--primary);background:var(--surface2)}.cat-btn.selected{border-color:var(--cat-color);background:color-mix(in srgb,var(--cat-color) 15%,var(--surface))}.cat-btn .cat-emoji{font-size:1.3rem;display:block;margin-bottom:.2rem}.cat-btn .cat-name{font-size:.72rem;font-weight:600;line-height:1.2}.options-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}#screen-join{justify-content:center;gap:1.5rem;padding-top:3rem}.code-input{font-size:2rem;font-weight:800;text-align:center;letter-spacing:.4em;text-transform:uppercase;padding:1rem}.join-hint{text-align:center;font-size:.9rem;color:var(--muted)}#screen-lobby{gap:1rem;padding-top:1.5rem}.room-code-display{background:var(--surface);border:2px solid var(--border);border-radius:var(--radius);padding:1.5rem;text-align:center}.room-code-label{font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.5rem}.room-code-value{font-size:2.5rem;font-weight:900;letter-spacing:.3em;color:var(--primary2);font-variant-numeric:tabular-nums}.room-code-hint{font-size:.8rem;color:var(--muted);margin-top:.5rem}.share-btn{display:flex;gap:.5rem;justify-content:center;margin-top:.75rem}.players-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}.player-count-badge{background:var(--primary);color:#fff;border-radius:50px;padding:.2rem .6rem;font-size:.8rem;font-weight:700}.players-list{display:flex;flex-direction:column;gap:.5rem;min-height:80px}.player-item{display:flex;align-items:center;gap:.75rem;background:var(--surface2);border-radius:var(--radius-sm);padding:.75rem 1rem;animation:slideIn .3s ease}.player-avatar{font-size:1.5rem;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--surface);border-radius:50%;flex-shrink:0}.player-name{font-weight:600;flex:1}.player-host-badge{font-size:.7rem;background:var(--primary);color:#fff;border-radius:50px;padding:.15rem .5rem;font-weight:700}.lobby-waiting{text-align:center;color:var(--muted);font-size:.9rem;padding:1rem}#screen-name{justify-content:flex-start;gap:1rem;padding-top:1rem}.emoji-picker{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center}.emoji-picker button{font-size:1.4rem;width:2.6rem;height:2.6rem}.emoji-opt{font-size:1.8rem;padding:.4rem;cursor:pointer;border-radius:8px;border:2px solid transparent;transition:all .15s;-webkit-tap-highlight-color:transparent;background:0 0}.emoji-opt.selected{border-color:var(--primary);background:var(--surface2)}.emoji-opt:hover{border-color:var(--border)}#screen-game{gap:0;padding:0;max-width:100%;background:var(--bg)}.game-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem .75rem;background:var(--surface);border-bottom:1px solid var(--border)}.game-progress{font-size:.85rem;color:var(--muted);font-weight:600}.game-score{font-size:.85rem;font-weight:700;color:var(--warn)}.timer-wrap{position:relative;width:52px;height:52px}.timer-svg{transform:rotate(-90deg);width:52px;height:52px}.timer-track{fill:none;stroke:var(--border);stroke-width:4}.timer-bar{fill:none;stroke:var(--primary2);stroke-width:4;stroke-linecap:round;stroke-dasharray:138;stroke-dashoffset:0;transition:stroke-dashoffset 1s linear,stroke .5s}.timer-bar.urgent{stroke:var(--danger)}.timer-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:800;color:var(--text)}.progress-bar-wrap{height:4px;background:var(--border)}.progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--primary2));transition:width .4s}.question-area{padding:1rem 1.25rem .5rem}.question-category{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:.75rem;display:inline-flex;align-items:center;gap:.3rem;padding:.25rem .6rem;background:var(--surface);border-radius:50px;border:1px solid var(--border)}.question-text{font-size:clamp(1rem,3.5vw,1.3rem);font-weight:700;line-height:1.4;color:var(--text);margin-bottom:0}.answers-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;padding:.75rem 1.25rem 1.5rem;max-width:640px;margin:0 auto;width:100%}.answer-btn{padding:1rem .75rem;background:var(--surface);border:2px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:.95rem;font-weight:600;cursor:pointer;text-align:center;transition:all .15s;width:100%;min-height:80px;display:flex;align-items:center;justify-content:center;line-height:1.3;-webkit-tap-highlight-color:transparent;position:relative;overflow:hidden}.answer-btn::before{content:'';position:absolute;inset:0;background:currentColor;opacity:0;transition:opacity .15s}.answer-btn:active::before{opacity:.08}.answer-btn:not(:disabled):hover{border-color:var(--primary);background:var(--surface2)}.answer-btn:disabled{cursor:default}.answer-btn.selected{border-color:var(--primary2);background:color-mix(in srgb,var(--primary) 20%,var(--surface));color:var(--primary2)}.answer-btn.correct{border-color:var(--success);background:color-mix(in srgb,var(--success) 20%,var(--surface));color:var(--success)}.answer-btn.wrong{border-color:var(--danger);background:color-mix(in srgb,var(--danger) 20%,var(--surface));color:var(--danger);opacity:.8}.answer-btn.reveal-correct{border-color:var(--success)!important;background:color-mix(in srgb,var(--success) 30%,var(--surface))!important;color:var(--success)!important;animation:pulseCorrect .5s ease}@keyframes pulseCorrect{0%{transform:scale(1)}50%{transform:scale(1.04)}100%{transform:scale(1)}}.answer-letter{display:inline-block;width:22px;height:22px;border-radius:50%;background:var(--border);font-size:.75rem;font-weight:800;line-height:22px;text-align:center;margin-right:.4rem;flex-shrink:0}.player-answers-bar{padding:.5rem 1.25rem;background:var(--surface);border-top:1px solid var(--border);display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}.pab-label{font-size:.8rem;color:var(--muted);margin-right:.25rem}.pab-dot{width:10px;height:10px;border-radius:50%;background:var(--border);transition:background .3s}.pab-dot.answered{background:var(--success)}.waiting-overlay{position:fixed;inset:0;background:rgba(245,237,224,.92);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;z-index:50;backdrop-filter:blur(6px)}.waiting-overlay.hidden{display:none}.waiting-spinner{width:48px;height:48px;border:4px solid var(--border);border-top-color:var(--primary2);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}#screen-scores{gap:.75rem;padding-top:1.25rem;align-items:stretch;overflow-y:auto}.scores-header{text-align:center}.score-change{font-size:.85rem;font-weight:700;padding:.75rem 1.25rem;border-radius:var(--radius-sm);margin-bottom:.5rem;text-align:center}.score-change.got-it{background:color-mix(in srgb,var(--success) 20%,var(--surface));color:var(--success)}.score-change.missed{background:color-mix(in srgb,var(--danger) 20%,var(--surface));color:var(--danger)}.leaderboard{display:flex;flex-direction:column;gap:.5rem}.lb-item{display:flex;align-items:center;gap:.75rem;background:var(--surface);border-radius:var(--radius-sm);padding:.75rem 1rem;border:1px solid var(--border);transition:all .3s}.lb-item.lb-me{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 12%,var(--surface))}.lb-rank{font-size:1.1rem;font-weight:800;width:28px;text-align:center;flex-shrink:0}.lb-avatar{font-size:1.4rem}.lb-name{flex:1;font-weight:600}.lb-score{font-size:1.1rem;font-weight:800;color:var(--warn)}.lb-delta{font-size:.8rem;font-weight:700;color:var(--success);min-width:32px;text-align:right}#screen-end{align-items:center;gap:1rem;text-align:center;padding-top:2rem}.winner-trophy{font-size:5rem;animation:bounce 1s ease infinite}@keyframes bounce{0%,100%{transform:translateY(0)scale(1)}50%{transform:translateY(-12px)scale(1.05)}}.winner-name{font-size:1.6rem;font-weight:800;color:var(--warn)}.winner-sub{color:var(--muted)}.final-lb{width:100%}#screen-builder{gap:1rem;padding-top:1.5rem}.my-quizzes{display:flex;flex-direction:column;gap:.5rem}.quiz-item{display:flex;align-items:center;gap:.75rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.75rem 1rem}.quiz-item-name{flex:1;font-weight:600}.quiz-item-count{font-size:.8rem;color:var(--muted)}#screen-edit-quiz{gap:1rem;padding-top:1.5rem}.question-editor{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;margin-bottom:.75rem}.question-editor-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}.option-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}.option-letter{width:28px;height:28px;border-radius:50%;background:var(--surface2);display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;flex-shrink:0;color:var(--muted)}.option-correct-btn{width:28px;height:28px;border-radius:50%;border:2px solid var(--border);background:0 0;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.75rem;flex-shrink:0;transition:all .15s;color:var(--muted)}.option-correct-btn.active{border-color:var(--success);background:var(--success);color:#fff}@keyframes slideIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.slide-up{animation:slideUp .35s ease}.hidden{display:none!important}.text-center{text-align:center}.text-muted{color:var(--muted)}.gap-sm{gap:.5rem}.gap-md{gap:1rem}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.mt-sm{margin-top:.5rem}.mt-md{margin-top:1rem}.mb-sm{margin-bottom:.5rem}.mb-md{margin-bottom:1rem}.countdown-overlay{position:fixed;inset:0;background:rgba(245,237,224,.95);backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:100}.countdown-overlay.hidden{display:none}.countdown-number{font-size:8rem;font-weight:900;color:var(--primary2);animation:countPulse .8s ease;line-height:1}.countdown-label{color:var(--muted);font-size:1.1rem;margin-top:.5rem}@keyframes countPulse{0%{transform:scale(1.4);opacity:0}40%{transform:scale(1);opacity:1}80%{transform:scale(1);opacity:1}100%{transform:scale(.8);opacity:0}}#confetti-canvas{position:fixed;inset:0;pointer-events:none;z-index:200}.toast{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%)translateY(80px);background:var(--surface2);border:1px solid var(--border);border-radius:50px;padding:.6rem 1.2rem;font-size:.9rem;font-weight:600;white-space:nowrap;z-index:300;transition:transform .3s cubic-bezier(.34,1.56,.64,1);pointer-events:none}.toast.show{transform:translateX(-50%)translateY(0)}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}