:root{--bg-deep: #12102b;--bg-panel: #1e1b3f;--bg-panel-2: #272350;--accent-pink: #ff4f8b;--accent-teal: #2fe6c9;--accent-yellow: #ffd23f;--accent-purple: #7c5cff;--ink-light: #f5f3ff;--ink-dim: #b8b3d9;--ink-faint: #7a769c;--answer-red: #e8402e;--answer-blue: #2e7de8;--answer-green: #2fb84f;--answer-yellow: #f5b301;--radius-lg: 24px;--radius-md: 16px;--radius-sm: 10px;--shadow-soft: 0 12px 40px -12px rgba(124, 92, 255, .45);--shadow-card: 0 8px 24px -8px rgba(18, 16, 43, .7);--font-display: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;--font-body: "Inter", system-ui, -apple-system, sans-serif;--ease-spring: cubic-bezier(.34, 1.56, .64, 1)}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:var(--font-body);color:var(--ink-light);background:var(--bg-deep);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}.app-canvas{min-height:100%;position:relative;isolation:isolate;background:radial-gradient(1200px 700px at 50% -10%,rgba(124,92,255,.22),transparent 60%),radial-gradient(900px 600px at 90% 10%,rgba(255,79,139,.12),transparent 55%),var(--bg-deep)}.app-canvas:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;pointer-events:none;opacity:.5;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E")}h1,h2,h3{font-family:var(--font-display);font-weight:800;margin:0;letter-spacing:.2px}button{font-family:var(--font-body);cursor:pointer;border:none;color:inherit}input{font-family:var(--font-body)}.btn{font-family:var(--font-display);font-weight:700;font-size:1.15rem;border-radius:var(--radius-md);padding:16px 28px;background:var(--bg-panel-2);color:var(--ink-light);transition:transform .12s var(--ease-spring),filter .15s ease,opacity .15s ease;box-shadow:var(--shadow-card)}.btn:active:not(:disabled){transform:scale(.96)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-primary{background:linear-gradient(135deg,var(--accent-pink),#ff7aa8);color:#2a0f1c;box-shadow:0 10px 30px -10px #ff4f8bb3}.btn-primary:hover:not(:disabled){filter:brightness(1.06)}.btn-ghost{background:transparent;box-shadow:none;border:2px solid rgba(245,243,255,.18)}.btn-block{width:100%}.card{background:var(--bg-panel);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);border:1px solid rgba(124,92,255,.14)}.room-code{font-family:var(--font-display);font-weight:800;letter-spacing:.18em;color:var(--accent-yellow);text-shadow:0 4px 24px rgba(255,210,63,.4)}@keyframes pop-in{0%{transform:scale(.2);opacity:0}70%{transform:scale(1.12);opacity:1}to{transform:scale(1)}}.pop-in{animation:pop-in .45s var(--ease-spring) both}@keyframes rise-in{0%{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}.rise-in{animation:rise-in .5s var(--ease-spring) both}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.fade-in{animation:fade-in .3s ease both}@keyframes pulse-glow{0%,to{box-shadow:0 0 #ffd23f80}50%{box-shadow:0 0 0 14px #ffd23f00}}.pulse-glow{animation:pulse-glow 1.4s ease-in-out infinite}@keyframes spin{to{transform:rotate(360deg)}}.spinner{width:22px;height:22px;border:3px solid rgba(245,243,255,.25);border-top-color:var(--ink-light);border-radius:50%;animation:spin .7s linear infinite;display:inline-block}.center-screen{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;gap:20px}.stack{display:flex;flex-direction:column;gap:16px}.row{display:flex;gap:12px;align-items:center}.muted{color:var(--ink-dim)}.faint{color:var(--ink-faint)}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}