:root{--bg: #0f0720;--bg-dim: #07031a;--surface: #1a0b2e;--surface2: #2a1452;--accent: #ec4899;--accent2: #fb923c;--accent3: #a855f7;--magenta: #a855f7;--green: #10b981;--red: #ef4444;--yellow: #fbbf24;--orange: #f97316;--pink: #ec4899;--cyan: #22d3ee;--text: #f8e5ff;--text-dim: #d8c4d4;--text-muted: #8a708e;--font-display: "Space Grotesk", -apple-system, "SF Pro Display", "Segoe UI", system-ui, sans-serif}*{margin:0;padding:0;box-sizing:border-box}html,body,#app{height:100%;font-family:var(--font-display);background:radial-gradient(ellipse 90% 55% at 50% 0%,rgba(236,72,153,.22),transparent 72%),radial-gradient(ellipse 70% 45% at 50% 100%,rgba(168,85,247,.1),transparent 70%),radial-gradient(ellipse 60% 30% at 30% 30%,rgba(244,114,182,.06),transparent 70%),var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-feature-settings:"ss01","ss02";overflow-x:hidden}body{min-height:100vh;min-height:100dvh;display:flex;justify-content:center}#app{width:100%}.container{width:100%;max-width:480px;padding:20px;margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;gap:18px;animation:page-in .28s cubic-bezier(.22,1,.36,1)}@keyframes page-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.container.wide{max-width:1100px}.spacer{flex:1}.row{display:flex;gap:10px;align-items:center}.col{display:flex;flex-direction:column;gap:10px}h1{font-size:2.2rem;font-weight:700;letter-spacing:-.03em;text-align:center;background:linear-gradient(135deg,#f472b6,#fb923c,#a855f7);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:4px}h2{font-size:1.15rem;color:var(--text-dim);text-align:center;font-weight:400;letter-spacing:-.01em;margin-bottom:10px}h3{font-size:.95rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--text-dim);margin-bottom:8px}.muted{color:var(--text-dim)}.text-sm{font-size:.85rem}.text-center{text-align:center}.input{width:100%;padding:14px 18px;border:2px solid var(--surface2);border-radius:14px;background:var(--surface);color:var(--text);font-size:1rem;outline:none;transition:border-color .2s,box-shadow .2s}.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #ec48992e,0 0 18px #fb923c26}.input::placeholder{color:var(--text-muted)}.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 24px;border:none;border-radius:14px;font-size:1rem;font-weight:600;cursor:pointer;transition:transform .12s,opacity .2s;width:100%;-webkit-tap-highlight-color:transparent}.btn:active:not(:disabled){transform:scale(.97)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:linear-gradient(135deg,#ec4899,#fb923c);color:#fff;box-shadow:0 4px 18px #ec489980,0 0 24px #fb923c40,0 1px #ffffff26 inset}.btn-primary:active:not(:disabled){box-shadow:0 2px 10px #ec489973}.btn-green{background:var(--green);color:#fff}.btn-red{background:var(--red);color:#fff}.btn-orange{background:var(--orange);color:#fff}.btn-outline{background:transparent;border:2px solid var(--accent);color:#fbcfe8}.btn-ghost{background:var(--surface);color:var(--text)}.btn-sm{padding:10px 16px;font-size:.9rem;border-radius:10px}.card{background:linear-gradient(180deg,var(--surface) 0%,rgba(26,11,46,.85) 100%);border:1px solid var(--surface2);border-radius:18px;padding:20px;box-shadow:0 1px #ec489914 inset,0 8px 24px #00000040,0 0 0 1px #ec48990a}.advanced-disclosure{margin-top:6px;border-top:1px solid var(--surface2);padding-top:12px}.advanced-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;background:transparent;border:0;color:var(--accent2);font-size:.95rem;font-weight:600;letter-spacing:.5px;padding:8px 4px;cursor:pointer}.advanced-toggle:hover{color:#fff}.advanced-chevron{display:inline-block;font-size:1.2rem;transition:transform .18s ease;opacity:.8}.advanced-body{display:flex;flex-direction:column;gap:16px;padding:8px 0 4px;animation:advanced-fade .22s ease}@keyframes advanced-fade{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.toggle-row{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;background:#a855f714;border:1px solid rgba(168,85,247,.25);border-radius:12px;cursor:pointer}.toggle-row:hover{background:#a855f71f}.toggle-row input[type=checkbox]{margin-top:3px;flex-shrink:0;width:18px;height:18px;accent-color:var(--accent2)}.toggle-label{flex:1;font-size:.95rem;line-height:1.4}.lib-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border-radius:12px;background:var(--surface);border:2px solid transparent;cursor:pointer;transition:border-color .15s,background .15s}.lib-row:hover{border-color:var(--accent)}.lib-row.selected{border-color:var(--green);background:#10b98114}.lib-name{font-weight:600}.lib-count{font-size:.8rem;color:var(--text-dim)}.lib-check{width:24px;height:24px;border-radius:50%;border:2px solid var(--text-muted);display:flex;align-items:center;justify-content:center;font-size:14px;color:transparent;flex-shrink:0}.lib-row.selected .lib-check{background:var(--green);border-color:var(--green);color:#fff}.buzzer-wrap{display:flex;align-items:center;justify-content:center;flex:1;padding:14px 0 20px}.buzzer{position:relative;width:min(90vw,440px);aspect-ratio:1;border:none;border-radius:50%;padding:0;background:url(/buzz-button.png) center / contain no-repeat;background-image:image-set(url(/buzz-button.webp) type("image/webp"),url(/buzz-button.png) type("image/png"));background-position:center;background-size:contain;background-repeat:no-repeat;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;filter:drop-shadow(0 0 24px rgba(236,72,153,.45)) drop-shadow(0 8px 24px rgba(0,0,0,.35));transition:transform .1s ease,filter .18s ease,opacity .2s;color:transparent;font-size:0}.buzzer:active:not(:disabled):not(.locked){transform:scale(.94);filter:drop-shadow(0 0 12px rgba(236,72,153,.55)) drop-shadow(0 4px 10px rgba(0,0,0,.4))}.buzzer-label{position:absolute;top:14%;right:14%;bottom:14%;left:14%;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#080412b8;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);color:#fff;font-size:clamp(1.1rem,5vw,1.9rem);font-weight:900;letter-spacing:2px;text-align:center;text-shadow:0 2px 10px rgba(0,0,0,.7);pointer-events:none}.buzzer:disabled,.buzzer.locked{filter:grayscale(.85) brightness(.55) drop-shadow(0 4px 12px rgba(0,0,0,.4));opacity:.7;cursor:not-allowed}.buzzer.buzzed{filter:hue-rotate(95deg) saturate(1.1) drop-shadow(0 0 28px rgba(16,185,129,.55)) drop-shadow(0 8px 24px rgba(0,0,0,.35))}.buzzer.steal{filter:hue-rotate(-22deg) saturate(1.25) drop-shadow(0 0 28px rgba(249,115,22,.6)) drop-shadow(0 8px 24px rgba(0,0,0,.35));animation:pulse 1s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.buzzer.buzzer-compact{width:min(80vw,360px)}.buzzer.buzzer-compact .buzzer-label{font-size:clamp(1.1rem,5vw,1.85rem);letter-spacing:2px}.score-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:10px;background:var(--surface);margin-bottom:4px}.score-row:nth-child(1){background:#eab3081f}.score-row:nth-child(2){background:#94a3b814}.score-row:nth-child(3){background:#b4530914}.score-rank{width:24px;font-weight:700;color:var(--text-muted)}.score-name{flex:1;font-weight:500}.score-pts{font-weight:700;font-size:1.15rem;color:var(--accent2)}.reveal{position:relative;overflow:hidden;background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(236,72,153,.25),transparent 70%),linear-gradient(180deg,var(--surface) 0%,var(--surface2) 100%);border:1px solid rgba(236,72,153,.45);border-radius:20px;padding:24px 20px;text-align:center;box-shadow:0 10px 40px #00000040,0 1px #ffffff0d inset;animation:reveal-in .65s cubic-bezier(.22,1.1,.36,1) .5s both}@keyframes reveal-in{0%{opacity:0;transform:scale(.82) translateY(24px)}55%{opacity:1;transform:scale(1.04) translateY(-3px)}80%{transform:scale(.99) translateY(0)}to{opacity:1;transform:scale(1) translateY(0)}}.reveal-verdict{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;border-radius:999px;font-size:1.05rem;font-weight:800;margin-bottom:14px;letter-spacing:.2px;text-shadow:0 1px 2px rgba(0,0,0,.35);animation:verdict-pop .55s cubic-bezier(.34,1.56,.64,1) .55s both}.reveal-verdict.win{background:linear-gradient(135deg,#10b981,#059669);color:#fff;box-shadow:0 0 22px #10b9818c,0 4px 14px #0000004d}.reveal-verdict.lose{background:linear-gradient(135deg,#ef4444,#b91c1c);color:#fff;box-shadow:0 0 22px #ef44448c,0 4px 14px #0000004d}.reveal-verdict-icon{font-size:1.25rem;font-weight:900}.reveal-verdict-points{font-weight:900;letter-spacing:.5px}@keyframes verdict-pop{0%{opacity:0;transform:scale(.5)}60%{transform:scale(1.12)}to{opacity:1;transform:scale(1)}}.reveal-art{width:clamp(160px,38vw,200px);height:clamp(160px,38vw,200px);border-radius:14px;object-fit:cover;margin:0 auto 14px;display:block;background:var(--surface2);box-shadow:0 10px 30px #00000080,0 0 0 1px #ffffff0f;animation:reveal-art-in .6s cubic-bezier(.22,1,.36,1) .65s both}@keyframes reveal-art-in{0%{opacity:0;transform:scale(.6) rotate(-6deg)}60%{transform:scale(1.05) rotate(2deg)}to{opacity:1;transform:scale(1) rotate(0)}}.reveal-song{font-size:1.65rem;font-weight:700;letter-spacing:-.02em;margin-bottom:4px;animation:reveal-line-in .4s ease .85s both}.reveal-artist{font-size:1.1rem;color:var(--accent2);font-weight:500;margin-bottom:4px;animation:reveal-line-in .4s ease .95s both}.reveal-year{font-size:.85rem;color:var(--text-dim);letter-spacing:3px;font-weight:500;animation:reveal-line-in .4s ease 1.05s both}@keyframes reveal-line-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.reveal:before,.reveal:after{content:"";position:absolute;width:6px;height:6px;border-radius:50%;pointer-events:none;opacity:0;animation:sparkle-pop .9s ease-out .9s}.reveal:before{left:20%;top:18%;background:var(--yellow);box-shadow:120px -10px 0 var(--pink),30px 50px 0 var(--cyan),180px 40px 0 var(--green),60px -30px 0 var(--orange),200px 90px 0 var(--pink)}.reveal:after{right:18%;top:26%;background:var(--accent2);box-shadow:-90px -10px 0 var(--orange),-30px 40px 0 var(--pink),-150px 30px 0 var(--cyan),-200px 80px 0 var(--yellow)}@keyframes sparkle-pop{0%{opacity:0;transform:scale(0) translateY(0)}40%{opacity:1;transform:scale(1.4) translateY(-4px)}to{opacity:0;transform:scale(.6) translateY(30px)}}.room-code{font-size:2.4rem;font-weight:900;letter-spacing:10px;text-align:center;background:linear-gradient(135deg,#fbbf24,#fb923c,#ec4899);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 25px rgba(251,146,60,.25)}.toast{position:fixed;top:16px;left:50%;transform:translate(-50%);padding:10px 22px;border-radius:12px;background:var(--surface2);border:1px solid var(--accent);color:var(--text);font-weight:500;font-size:.9rem;z-index:100;box-shadow:0 4px 24px #0006;animation:toast-in .25s ease}@keyframes toast-in{0%{opacity:0;transform:translate(-50%) translateY(-10px)}}.color-picker{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.color-swatch{width:38px;height:38px;border-radius:50%;cursor:pointer;border:3px solid transparent;transition:transform .15s}.color-swatch:active{transform:scale(.92)}.color-swatch.selected{border-color:#fff;box-shadow:0 0 0 2px var(--accent)}.chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:18px;background:var(--surface2);font-size:.82rem;line-height:1.3}.chip-dot{width:8px;height:8px;border-radius:50%}.vote-bar{display:flex;height:8px;border-radius:4px;background:var(--surface2);overflow:hidden}.vote-bar>div{height:100%;transition:width .2s ease}.vote-yes{background:var(--green)}.vote-no{background:var(--red)}.conn{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;color:var(--text-dim)}.conn-dot{width:8px;height:8px;border-radius:50%;background:var(--text-muted)}.conn.ok .conn-dot{background:var(--green)}.conn.off .conn-dot{background:var(--red)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000a6;z-index:200;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fade-in .18s ease;padding:20px}@keyframes fade-in{0%{opacity:0}}.modal-card{background:var(--surface);border:1px solid var(--surface2);border-radius:18px;padding:24px;max-width:360px;width:100%;text-align:center;animation:scale-in .2s cubic-bezier(.175,.885,.32,1.275)}@keyframes scale-in{0%{opacity:0;transform:scale(.92)}}.score-row{transition:transform .32s cubic-bezier(.22,1,.36,1)}.score-row.bumped{animation:score-bump .9s ease}@keyframes score-bump{0%{transform:translate(0);background:#ec489938}30%{transform:translate(-4px)}to{transform:translate(0);background:var(--surface)}}.score-pts.bumped{animation:pts-pop .55s ease;color:var(--green)}@keyframes pts-pop{0%{transform:scale(1)}50%{transform:scale(1.35)}to{transform:scale(1)}}.score-floater{position:absolute;top:-4px;right:-2px;font-size:.9rem;font-weight:800;pointer-events:none;animation:score-float 1.1s ease-out forwards}.score-floater.pos{color:var(--green);text-shadow:0 0 10px rgba(16,185,129,.55)}.score-floater.neg{color:var(--red);text-shadow:0 0 10px rgba(239,68,68,.55)}@keyframes score-float{0%{opacity:0;transform:translateY(0) scale(.6)}25%{opacity:1;transform:translateY(-10px) scale(1.25)}to{opacity:0;transform:translateY(-42px) scale(1)}}.rank-arrow{font-size:.65rem;margin-left:3px;display:inline-block;animation:rank-arrow 1s ease-out}.rank-arrow.up{color:var(--green)}.rank-arrow.down{color:var(--red)}@keyframes rank-arrow{0%{opacity:0;transform:translateY(4px)}20%{opacity:1;transform:translateY(0)}80%{opacity:1}to{opacity:0}}.score-row.is-leader{box-shadow:0 0 0 1px #facc1566,0 0 18px #facc151f;background:linear-gradient(90deg,rgba(250,204,21,.08),transparent 70%),var(--surface)}.score-row.is-leader .score-rank{color:#fcd34d}.score-row.disconnected,.chip.disconnected{opacity:.5}.disconnect-countdown{font-size:.72rem;color:var(--text-dim);margin-left:auto;margin-right:6px;font-variant-numeric:tabular-nums}.chip.has-floor,.score-row.has-floor{box-shadow:0 0 0 2px #fbbf24,0 0 18px #fbbf2480;background:#fbbf241a}.eq{display:inline-flex;align-items:flex-end;justify-content:center;gap:3px;height:28px;vertical-align:middle}.eq span{display:block;width:4px;background:linear-gradient(180deg,#fbbf24,#ec4899 60%,#a855f7);border-radius:2px;animation:eq-bounce .9s ease-in-out infinite;transform-origin:bottom;box-shadow:0 0 8px #fb923c73}.eq span:nth-child(1){animation-delay:0s;height:45%}.eq span:nth-child(2){animation-delay:.12s;height:80%}.eq span:nth-child(3){animation-delay:.24s;height:100%}.eq span:nth-child(4){animation-delay:.09s;height:60%}.eq span:nth-child(5){animation-delay:.33s;height:90%}.eq span:nth-child(6){animation-delay:.05s;height:70%}.eq span:nth-child(7){animation-delay:.18s;height:50%}.eq span:nth-child(8){animation-delay:.27s;height:85%}@keyframes eq-bounce{0%,to{transform:scaleY(.25)}50%{transform:scaleY(1)}}.eq-big{height:60px;gap:5px;padding:4px 0}.eq-big span{width:6px}.volume{width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:6px;background:var(--surface2);border-radius:3px;outline:none}.volume::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--accent2);cursor:pointer;border:none}.volume::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--accent2);cursor:pointer;border:none}.spinner{display:inline-block;width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle;margin-right:6px}@keyframes spin{to{transform:rotate(360deg)}}.room-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;background:var(--surface);border:1px solid var(--surface2);border-radius:999px;font-weight:700;letter-spacing:3px;color:var(--accent2)}.award-row{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--surface);border:1px solid var(--surface2);border-radius:12px}.award-emoji{font-size:2rem;width:48px;text-align:center;flex-shrink:0}.award-label{font-weight:800;color:var(--accent2);font-size:.95rem}.award-desc{font-size:.85rem;color:var(--text-dim)}.wizard-top{display:flex;align-items:center;justify-content:space-between;padding:2px 0 6px;border-bottom:1px solid var(--surface2);margin-bottom:4px}.wizard-steps{display:flex;gap:5px;align-items:center}.wizard-dot{width:22px;height:22px;border-radius:50%;background:var(--surface);border:1.5px solid var(--surface2);color:var(--text-muted);display:inline-flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;transition:all .2s ease}.wizard-dot.active{background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:var(--accent);color:#fff;box-shadow:0 0 0 3px #ec489933}.wizard-dot.done{background:#ec489926;border-color:var(--accent);color:var(--accent2)}.wizard-room{font-size:.82rem;color:var(--text-dim);font-weight:500}.wizard-room-code{color:var(--accent2);font-weight:800;letter-spacing:2px;cursor:pointer}.wizard-room-sep{margin:0 6px;opacity:.4}.identity-block{display:flex;gap:14px;align-items:center;padding:4px 2px}.identity-body{flex:1;min-width:0}.identity-name{width:100%;background:transparent;border:none;border-bottom:1px solid rgba(168,85,247,.25);color:#fbcfe8;font-weight:700;font-size:1.15rem;padding:4px 0;outline:none;font-family:inherit;letter-spacing:.2px;transition:border-color .18s ease}.identity-name:focus{border-bottom-color:var(--accent2)}.identity-name::placeholder{color:#fbcfe866;font-weight:500}.container>div>h3{margin-bottom:5px}.picker{display:flex;gap:8px}.picker-compact{flex-direction:row}.picker-stack{flex-direction:column}.picker-opt{position:relative;flex:1;padding:12px 10px;background:var(--surface);border:1px solid var(--surface2);border-radius:14px;color:var(--text);cursor:pointer;text-align:center;transition:all .15s ease;-webkit-tap-highlight-color:transparent}.picker-stack .picker-opt{text-align:left;padding:14px 16px}.picker-opt:hover{border-color:#ec489966}.picker-opt.active{background:linear-gradient(135deg,#ec48992e,#ec48991f);border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 4px 12px #ec489933}.picker-label{font-weight:700;font-size:.95rem;letter-spacing:-.01em}.picker-compact .picker-label{font-size:1.05rem}.picker-sub{font-size:.72rem;color:var(--text-dim);margin-top:3px;line-height:1.35}.picker-stack .picker-sub{font-size:.82rem;margin-top:4px}.picker-check{position:absolute;top:8px;right:10px;color:var(--accent2);font-weight:700;font-size:.85rem}.pause-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0a0a1ad1;z-index:180;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:auto;animation:fade-in .2s ease}.pause-card{text-align:center;padding:28px 32px;border:2px solid var(--accent2);border-radius:20px;background:var(--surface);box-shadow:0 6px 40px #ec489966}.pause-icon{font-size:3.2rem;line-height:1}.pause-label{font-size:1.3rem;font-weight:800;color:var(--accent2);margin-top:6px}.face-capture-card{max-width:380px;text-align:center}.face-cap-stage{position:relative;width:100%;aspect-ratio:1;background:#07031a;border-radius:18px;overflow:hidden;border:2px solid rgba(244,114,182,.45);box-shadow:0 0 22px #ec489938}.face-cap-video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1);background:#000}.face-cap-error{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px 20px;color:var(--text-dim);font-size:.85rem;background:#080412eb;gap:4px}.face-cap-preview{width:100%;max-width:280px;margin:0 auto;aspect-ratio:1;border-radius:50%;background:var(--surface);box-shadow:0 0 0 3px #f472b68c,0 8px 28px #00000073;display:block}.face-cap-preview-overlay{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;border-radius:18px;background:#000;animation:face-cap-pop .25s cubic-bezier(.34,1.56,.64,1)}@keyframes face-cap-pop{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.face-cap-filter-row{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:14px}.face-cap-filter{padding:8px 12px;background:var(--surface);border:1px solid var(--surface2);border-radius:999px;color:var(--text-dim);font-weight:700;font-size:.7rem;letter-spacing:1.5px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:all .15s;font-family:inherit}.face-cap-filter.active{background:#fb923c26;border-color:var(--accent2);color:var(--accent2);box-shadow:0 0 14px #fb923c4d}.avatar-wrap{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;overflow:hidden;flex-shrink:0;color:#fff;text-align:center;vertical-align:middle;-webkit-user-select:none;user-select:none}.avatar-img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}.buzz-flash{position:fixed;top:0;right:0;bottom:0;left:0;z-index:220;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;color:#fff;pointer-events:none;text-align:center;animation:buzz-flash-in .35s cubic-bezier(.22,1,.36,1) forwards}@keyframes buzz-flash-in{0%{opacity:0;transform:scale(1.06)}60%{opacity:1;transform:scale(1)}to{opacity:1;transform:scale(1)}}.buzz-flash-photo{width:clamp(140px,38vw,220px);height:clamp(140px,38vw,220px);border-radius:50%;overflow:hidden;margin-bottom:8px;border:4px solid rgba(255,255,255,.9);box-shadow:0 0 0 6px #00000040,0 12px 36px #0006;animation:buzz-pop .55s cubic-bezier(.34,1.56,.64,1) both}.buzz-flash-photo img{width:100%;height:100%;object-fit:cover}.buzz-flash-emoji{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:clamp(4.5rem,18vw,7.5rem);background:#0000004d;line-height:1}.buzz-flash-tag{font-size:1rem;font-weight:800;letter-spacing:5px;text-transform:uppercase;text-align:center;opacity:.92;text-shadow:0 2px 14px rgba(0,0,0,.4);animation:buzz-pop .55s cubic-bezier(.34,1.56,.64,1) .15s both}.buzz-flash-name{font-size:clamp(2.4rem,12vw,4.6rem);font-weight:900;letter-spacing:-.02em;line-height:1.05;text-align:center;text-transform:uppercase;text-shadow:0 6px 30px rgba(0,0,0,.45);max-width:100%;word-break:break-word;-webkit-hyphens:auto;hyphens:auto;animation:buzz-pop .55s cubic-bezier(.34,1.56,.64,1) .05s both}.buzz-flash-you{margin-top:8px;font-size:1.05rem;font-weight:700;letter-spacing:4px;text-align:center;background:#00000052;padding:6px 18px;border-radius:999px;animation:buzz-pop .55s cubic-bezier(.34,1.56,.64,1) .25s both}@keyframes buzz-pop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.08);opacity:1}to{transform:scale(1);opacity:1}}.buzz-banner{position:fixed;top:max(18px,env(safe-area-inset-top,0px));left:50%;transform:translate(-50%);z-index:210;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:8px 18px 8px 8px;border-radius:999px;background:#080412d9;border:2px solid #ec4899;box-shadow:0 0 22px #ec48998c,0 6px 26px #00000080;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;pointer-events:none;max-width:calc(100vw - 24px);animation:buzz-banner-in .45s cubic-bezier(.22,1,.36,1) forwards}@keyframes buzz-banner-in{0%{opacity:0;transform:translate(-50%) translateY(-120%)}to{opacity:1;transform:translate(-50%) translateY(0)}}.buzz-banner-avatar{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.95rem;font-weight:800;color:#fff;flex-shrink:0;box-shadow:0 0 0 2px #ffffff2e}.buzz-banner-text{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}.buzz-banner-name{font-size:.92rem;font-weight:700;line-height:1.1;text-align:center;max-width:calc(100vw - 90px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.buzz-banner-status{display:block;font-size:.62rem;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;text-align:center;margin-top:3px}.drama-layer{position:fixed;top:60px;left:0;right:0;z-index:140;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}.drama-banner{display:inline-flex;align-items:center;gap:10px;padding:12px 22px;background:linear-gradient(135deg,#ec4899eb,#fb923ceb);border-radius:999px;color:#fff;font-weight:700;box-shadow:0 6px 24px #0006,0 0 30px #ec48994d;animation:drama-in 2.5s cubic-bezier(.22,1,.36,1) forwards}.drama-banner.drama-speed{background:linear-gradient(135deg,#fbbf24,#f97316,#ec4899);padding:16px 28px;font-size:1.1rem;box-shadow:0 0 40px #fbbf2480,0 0 80px #f9731666,0 6px 30px #00000073;animation:drama-speed-in 3.2s cubic-bezier(.22,1,.36,1) forwards}.drama-emoji{font-size:1.3rem}.drama-text{font-size:.95rem}.drama-banner.drama-speed .drama-emoji{font-size:1.9rem}.drama-banner.drama-speed .drama-text{font-size:1.15rem;letter-spacing:.5px;text-shadow:0 1px 3px rgba(0,0,0,.4)}@keyframes drama-speed-in{0%{opacity:0;transform:translateY(-20px) scale(.6) rotate(-3deg)}10%{opacity:1;transform:translateY(0) scale(1.15) rotate(2deg)}18%{transform:translateY(0) scale(1) rotate(0)}85%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-8px) scale(.92)}}@keyframes drama-in{0%{opacity:0;transform:translateY(-12px) scale(.85)}12%{opacity:1;transform:translateY(0) scale(1.05)}20%{transform:translateY(0) scale(1)}80%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-6px) scale(.95)}}.reaction-layer{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:150;overflow:hidden}.reaction-float{position:absolute;bottom:120px;display:flex;flex-direction:column;align-items:center;animation:react-float-up 2.6s cubic-bezier(.25,.46,.45,.94) forwards;opacity:0;will-change:transform,opacity;pointer-events:none}.reaction-emoji{font-size:2.6rem;line-height:1;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4));animation:react-emoji-pop .55s cubic-bezier(.34,1.56,.64,1);transform-origin:center}.reaction-name{font-size:.65rem;font-weight:700;margin-top:2px;background:#0a0a1acc;padding:1px 6px;border-radius:10px;max-width:88px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@keyframes react-float-up{0%{opacity:0;transform:translateY(24px) rotate(0)}10%{opacity:1;transform:translate(calc(var(--drift, 0px) * .1)) rotate(calc(var(--rot, 0deg) * .2))}85%{opacity:1;transform:translate(calc(var(--drift, 0px) * .9),-240px) rotate(calc(var(--rot, 0deg) * .8))}to{opacity:0;transform:translate(var(--drift, 0px),-310px) rotate(var(--rot, 0deg))}}@keyframes react-emoji-pop{0%{transform:scale(.4)}55%{transform:scale(1.18)}to{transform:scale(1)}}.reaction-bar-wrap{display:flex;flex-direction:column;align-items:center;gap:6px}.reaction-bar-label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:2px;color:var(--text-muted)}.reaction-bar{display:flex;gap:6px;justify-content:center;padding:8px 10px;background:#151530b3;border:1px solid var(--surface2);border-radius:999px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.reaction-btn{background:transparent;border:none;cursor:pointer;font-size:1.9rem;line-height:1;padding:8px 12px;border-radius:999px;transition:transform .12s,background .15s;-webkit-tap-highlight-color:transparent}.reaction-btn:hover{background:#ec48991f}.reaction-btn:active{transform:scale(.82);background:#ec489940}.theme-grid{display:grid;grid-template-columns:1fr;gap:16px}@media (min-width: 720px){.theme-grid{grid-template-columns:repeat(2,1fr)}}@media (min-width: 1000px){.theme-grid{grid-template-columns:repeat(3,1fr)}}.theme-card{border-radius:18px;border:1px solid var(--surface2);overflow:hidden;display:flex;flex-direction:column}.theme-hero{padding:30px 18px 22px;text-align:center}.theme-title{font-size:2rem;font-weight:700;letter-spacing:-.03em;line-height:1;margin-bottom:6px}.theme-subtitle{font-size:.82rem;color:#ffffffb3;font-weight:500}.theme-body{padding:14px 16px 18px;background:var(--surface)}.theme-name{font-weight:800;font-size:1rem;margin-bottom:2px}.theme-tagline{font-size:.8rem;color:var(--text-dim);margin-bottom:12px}.theme-button{display:block;padding:10px 14px;border-radius:12px;color:#fff;font-weight:700;font-size:.9rem;text-align:center}.theme-swatches{display:flex;gap:6px;margin-top:10px}.theme-swatch{width:22px;height:22px;border-radius:50%;border:1px solid rgba(255,255,255,.1)}.avatar-tabs{display:flex;gap:4px;overflow-x:auto;padding-bottom:6px;margin-bottom:10px;-webkit-overflow-scrolling:touch}.avatar-tabs::-webkit-scrollbar{display:none}.avatar-tab{background:var(--surface2);border:none;color:var(--text-dim);padding:6px 12px;border-radius:999px;font-size:.78rem;font-weight:600;cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent}.avatar-tab.active{background:var(--accent);color:#fff}.avatar-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;max-height:260px;overflow-y:auto}.avatar-cell{aspect-ratio:1;font-size:1.8rem;border:2px solid transparent;border-radius:12px;background:var(--surface2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .1s,border-color .15s;-webkit-tap-highlight-color:transparent}.avatar-cell:active{transform:scale(.92)}.avatar-cell.active{border-color:var(--accent);background:#ec489933}.profile-avatar{width:110px;height:110px;border-radius:50%;background:var(--surface);border:3px solid var(--accent2);display:flex;align-items:center;justify-content:center;font-size:3.6rem;margin:10px auto;cursor:pointer;transition:transform .15s,border-color .2s}.profile-avatar:hover{transform:scale(1.04)}.profile-avatar-edit{font-size:.7rem;color:var(--text-dim);text-align:center;margin-top:-4px}.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:10px}.stat-cell{background:var(--surface);padding:12px 14px;border-radius:12px;border:1px solid var(--surface2)}.stat-value{font-size:1.4rem;font-weight:800;color:var(--accent2)}.stat-label{font-size:.75rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:1px;margin-top:2px}.history-row{display:flex;justify-content:space-between;padding:8px 12px;border-radius:8px;background:var(--surface);margin-bottom:3px;font-size:.85rem}.history-date{color:var(--text-dim)}.history-score{font-weight:700}.avatar-chip{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--surface);border:1px solid var(--surface2);font-size:1.2rem}.home-hero{position:relative;text-align:center;padding:8px 0 4px;margin-top:6px}.home-hero-cassette{position:relative;width:100%;max-width:460px;margin:0 auto;display:block;aspect-ratio:1 / 1;background-image:url(/cassette-hero.png);background-image:image-set(url(/cassette-hero.webp) type("image/webp"),url(/cassette-hero.png) type("image/png"));background-size:contain;background-position:center;background-repeat:no-repeat;filter:drop-shadow(0 0 24px rgba(236,72,153,.45)) drop-shadow(0 0 60px rgba(249,115,22,.2));animation:cassette-float 5.5s ease-in-out infinite}@keyframes cassette-float{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(-.4deg)}}.home-hero-fallback{font-size:clamp(2.4rem,11vw,3.4rem);font-weight:700;letter-spacing:-.04em;line-height:1;background:linear-gradient(135deg,#f472b6,#f97316,#a855f7);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 30px rgba(236,72,153,.3);padding:30px 0}.home-tagline{margin-top:-4px;margin-bottom:6px;font-size:.95rem;font-weight:500;letter-spacing:.4px;color:var(--text-dim);text-align:center;font-style:italic;opacity:.85}.home-tag{color:var(--text-dim);font-size:1rem;font-weight:500;margin-top:-4px;margin-bottom:8px}.home-stat{color:var(--text-muted);font-size:.72rem;text-transform:uppercase;letter-spacing:2px;font-weight:500}.profile-pill{display:inline-flex;align-items:center;gap:8px;padding:4px 14px 4px 4px;background:var(--surface);border:1px solid var(--surface2);border-radius:999px;cursor:pointer;color:var(--text);font-size:.85rem;font-weight:600;-webkit-tap-highlight-color:transparent;transition:transform .12s,border-color .15s}.profile-pill:active{transform:scale(.95)}.profile-pill:hover{border-color:var(--accent)}.profile-pill-avatar{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--surface2);font-size:1.15rem}.skeleton{display:inline-block;background:linear-gradient(90deg,var(--surface2) 0%,rgba(236,72,153,.12) 50%,var(--surface2) 100%);background-size:200% 100%;animation:skeleton-shimmer 1.4s linear infinite;border-radius:6px;vertical-align:middle}@keyframes skeleton-shimmer{to{background-position:-200% 0}}.home-divider{display:flex;align-items:center;gap:10px;margin:14px 0 4px;color:var(--text-muted);font-size:.72rem;text-transform:uppercase;letter-spacing:2.5px;font-weight:600}.home-divider:before,.home-divider:after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--divider-color, var(--surface2)) 40%,var(--divider-color, var(--surface2)) 60%,transparent)}.home-divider.divider-pink{--divider-color: rgba(244, 114, 182, .45);color:#f9a8d4}.home-divider.divider-orange{--divider-color: rgba(251, 146, 60, .45);color:#fdba74}.home-tile-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:4px}.btn-tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:22px 14px 18px;border-radius:18px;background:#1408208c;border:1.5px solid var(--tile-color, rgba(244, 114, 182, .55));color:var(--tile-text, #fbcfe8);font-weight:700;font-size:1rem;letter-spacing:.02em;cursor:pointer;transition:transform .12s,box-shadow .18s,background .18s;-webkit-tap-highlight-color:transparent;text-align:center;box-shadow:0 0 18px var(--tile-glow, rgba(236, 72, 153, .18)),0 0 0 1px var(--tile-color, rgba(244, 114, 182, .3)) inset;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.btn-tile:active{transform:scale(.96)}.btn-tile:hover{background:#1c0c2ab3;box-shadow:0 0 28px var(--tile-glow, rgba(236, 72, 153, .35)),0 0 0 1px var(--tile-color, rgba(244, 114, 182, .5)) inset}.btn-tile-icon{width:38px;height:38px;display:flex;align-items:center;justify-content:center;color:var(--tile-text, #fbcfe8);filter:drop-shadow(0 0 8px var(--tile-glow, rgba(236, 72, 153, .5)))}.btn-tile-icon svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.btn-tile-label{font-size:.95rem;font-weight:700;letter-spacing:.04em}.btn-tile.tile-pink{--tile-color: rgba(244, 114, 182, .65);--tile-text: #fbcfe8;--tile-glow: rgba(236, 72, 153, .35)}.btn-tile.tile-purple{--tile-color: rgba(168, 85, 247, .55);--tile-text: #ddd6fe;--tile-glow: rgba(168, 85, 247, .32)}.btn-tile.tile-orange{--tile-color: rgba(251, 146, 60, .65);--tile-text: #fed7aa;--tile-glow: rgba(251, 146, 60, .35)}.btn-tile.tile-rejoin{grid-column:1 / -1;flex-direction:row;padding:14px 18px;gap:12px;--tile-color: rgba(34, 211, 238, .55);--tile-text: #a5f3fc;--tile-glow: rgba(34, 211, 238, .3)}.btn-tile.tile-rejoin .btn-tile-icon{width:24px;height:24px}.profile-pill.profile-pill-warm{background:#1a0b1e99;border:1px solid rgba(244,114,182,.45);box-shadow:0 0 14px #f472b62e;color:#fbcfe8}.profile-pill.profile-pill-warm:hover{border-color:#f472b6bf;box-shadow:0 0 18px #f472b64d}.profile-pill.profile-pill-warm .profile-pill-avatar{background:#f472b62e;color:#fbcfe8}.profile-pill-avatar svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.podium{display:flex;align-items:flex-end;justify-content:center;gap:10px;margin:30px 0}.podium-step{flex:1;max-width:110px;background:var(--surface);border-radius:12px 12px 0 0;padding:10px 8px;text-align:center;border-top:3px solid var(--accent2)}.podium-step.first{height:160px;border-top-color:var(--yellow)}.podium-step.second{height:130px;border-top-color:#94a3b8}.podium-step.third{height:110px;border-top-color:#b45309}.podium-rank{font-size:1.6rem;font-weight:900}.podium-name{font-weight:600;margin-top:6px;font-size:.95rem;word-break:break-word}.podium-pts{margin-top:4px;color:var(--accent2);font-weight:700}