*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #f7f4ff;--ink: #1a0a2e;--surface: #fff;--border: #e0d8f5;--purple: #7c3aed;--pink: #ec4899;--muted: #8b7fb3;--text: #2d1b52}html{height:100%}body{display:flex;flex-direction:column;min-height:100vh;background:var(--bg);color:var(--ink);font-family:Nunito,sans-serif;overflow-x:hidden}.screen{display:none;flex-direction:column;align-items:center;justify-content:flex-start;min-height:100vh;padding:28px 20px;text-align:center;gap:16px}.screen.active{display:flex}.back{position:fixed;top:16px;left:16px;background:var(--surface);border:1.5px solid var(--border);border-radius:10px;padding:8px 14px;color:var(--muted);font-size:.85rem;font-weight:700;cursor:pointer;text-decoration:none;z-index:10;color:var(--ink)}.disconnect-banner{position:fixed;top:16px;left:50%;transform:translate(-50%);background:#f43f5e;color:#fff;padding:12px 24px;border-radius:99px;font-weight:700;font-size:.9rem;z-index:9999;box-shadow:0 4px 12px #f43f5e4d;display:none;align-items:center;gap:8px}.title-main{font-family:Syne,sans-serif;font-size:clamp(2.5rem,11vw,4.5rem);line-height:.95;color:var(--ink)}.title-main .pop{color:var(--purple)}.title-sub{font-size:.9rem;color:var(--muted);max-width:300px;line-height:1.6}@keyframes spin{to{transform:rotate(360deg)}}.btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:15px 28px;border-radius:12px;border:none;font-family:Outfit,sans-serif;font-size:1rem;font-weight:700;cursor:pointer;transition:all .15s;width:100%;max-width:320px;-webkit-tap-highlight-color:transparent}.btn:active{transform:scale(.96)}.btn-purple{background:var(--purple);color:#fff;box-shadow:0 4px 20px #7c3aed4d}.btn-ghost{background:transparent;color:var(--muted);border:1.5px solid var(--border)}.input-field{width:100%;max-width:320px;padding:15px 18px;border-radius:12px;border:2px solid var(--border);background:var(--surface);color:var(--ink);font-family:Syne,sans-serif;font-size:1.6rem;text-align:center;outline:none;letter-spacing:4px;-webkit-appearance:none}.input-field:focus{border-color:var(--purple)}.code-big{font-family:Syne,sans-serif;font-size:3.5rem;color:var(--purple);letter-spacing:8px}.chaos-meter{display:flex;align-items:center;gap:10px;width:100%;max-width:420px}.chaos-bar-bg{flex:1;height:8px;background:var(--border);border-radius:99px;overflow:hidden}.chaos-bar-fill{height:100%;border-radius:99px;transition:width .6s ease,background .6s ease}.q-level{font-size:.72rem;font-weight:700;letter-spacing:2px;text-transform:uppercase}.question-card{background:var(--surface);border:2px solid var(--border);border-radius:20px;padding:28px 22px;width:100%;max-width:420px}.q-text{font-family:Syne,sans-serif;font-size:clamp(1.2rem,5vw,1.7rem);line-height:1.25;color:var(--ink);margin:10px 0}.q-num{font-size:.75rem;color:var(--muted)}.opts{display:flex;gap:12px;width:100%;max-width:420px}.opt-btn{flex:1;padding:18px 12px;border-radius:14px;border:2px solid var(--border);background:var(--surface);color:var(--ink);font-family:Outfit,sans-serif;font-size:.92rem;font-weight:700;cursor:pointer;transition:all .15s;min-height:80px;display:flex;align-items:center;justify-content:center;text-align:center;-webkit-tap-highlight-color:transparent}.opt-btn.sel-a{background:var(--purple);border-color:var(--purple);color:#fff;transform:scale(1.04)}.opt-btn.sel-b{background:var(--pink);border-color:var(--pink);color:#fff;transform:scale(1.04)}.opt-btn:disabled{opacity:.5}.wait-msg{font-size:.85rem;color:var(--purple);min-height:20px;font-weight:600}.reveal-box{background:var(--surface);border:2px solid var(--border);border-radius:14px;padding:18px;width:100%;max-width:420px;text-align:left}.reveal-lbl{font-size:.65rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:4px}.reveal-ans{font-family:Syne,sans-serif;font-size:1.4rem;color:var(--ink)}.score-row{display:flex;gap:14px;width:100%;max-width:420px}.score-box{flex:1;background:var(--surface);border:2px solid var(--border);border-radius:18px;padding:20px 10px;text-align:center;position:relative;overflow:hidden}.score-box:after{content:"";position:absolute;bottom:0;left:0;right:0;height:4px;background:var(--purple);opacity:.2}.score-name{font-size:.6rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:6px}.score-num{font-family:Syne,sans-serif;font-size:2.4rem;color:var(--ink);line-height:1}.score-num.pop{color:var(--purple)}.winner-big{font-family:Syne,sans-serif;font-size:3rem;color:var(--purple)}@media (max-width: 400px){.score-row{gap:6px}.score-box{padding:12px 4px;border-radius:12px}.score-name{font-size:.5rem;letter-spacing:.5px}.score-num{font-size:1.6rem}}[data-joining=true] .screen{display:none!important}[data-joining=true] #screen-loading{display:flex!important;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:100vh}.joining-spinner{border:3.5px solid rgba(244,99,30,.15);border-top:3.5px solid var(--orange, #f4631e);border-radius:50%;width:44px;height:44px;animation:joining-spin .8s linear infinite;margin-bottom:20px}@keyframes joining-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}