@import "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap";
:root{--bg-primary:#0a0a0f;--bg-secondary:#0f0f1a;--bg-surface:#1a1a2e;--bg-surface-hover:#222240;--bg-elevated:#252545;--glass-bg:#ffffff08;--glass-border:#ffffff14;--glass-bg-hover:#ffffff0f;--neon-purple:#a855f7;--neon-purple-glow:#a855f74d;--neon-purple-subtle:#a855f71a;--neon-cyan:#06b6d4;--neon-cyan-glow:#06b6d44d;--neon-cyan-subtle:#06b6d41a;--neon-pink:#ec4899;--neon-pink-glow:#ec48994d;--neon-pink-subtle:#ec48991a;--neon-green:#10b981;--neon-green-glow:#10b9814d;--neon-orange:#f59e0b;--neon-orange-glow:#f59e0b4d;--neon-red:#ef4444;--neon-red-glow:#ef44444d;--text-primary:#e2e8f0;--text-secondary:#94a3b8;--text-muted:#64748b;--text-inverse:#0a0a0f;--gradient-purple-cyan:linear-gradient(135deg, var(--neon-purple), var(--neon-cyan));--gradient-purple-pink:linear-gradient(135deg, var(--neon-purple), var(--neon-pink));--gradient-surface:linear-gradient(180deg, var(--bg-surface), var(--bg-primary));--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--space-3xl:64px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--radius-full:9999px;--shadow-sm:0 2px 8px #0000004d;--shadow-md:0 4px 16px #0006;--shadow-lg:0 8px 32px #00000080;--shadow-neon-purple:0 0 20px var(--neon-purple-glow), 0 0 40px #a855f726;--shadow-neon-cyan:0 0 20px var(--neon-cyan-glow), 0 0 40px #06b6d426;--shadow-neon-green:0 0 20px var(--neon-green-glow);--font-heading:"Space Grotesk", system-ui, sans-serif;--font-body:"Inter", system-ui, sans-serif;--font-mono:"JetBrains Mono", monospace;--text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:2rem;--text-4xl:2.5rem;--text-5xl:3.5rem;--transition-fast:.15s cubic-bezier(.4, 0, .2, 1);--transition-base:.25s cubic-bezier(.4, 0, .2, 1);--transition-slow:.4s cubic-bezier(.4, 0, .2, 1);--transition-spring:.5s cubic-bezier(.34, 1.56, .64, 1);--z-base:1;--z-dropdown:10;--z-sticky:20;--z-overlay:30;--z-modal:40;--z-toast:50}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility}html,body{height:100%;overflow-x:hidden}body{font-family:var(--font-body);font-size:var(--text-base);color:var(--text-primary);background-color:var(--bg-primary);background-image:radial-gradient(ellipse 80% 50% at 50% -20%, var(--neon-purple-subtle), transparent), radial-gradient(ellipse 60% 40% at 80% 100%, var(--neon-cyan-subtle), transparent);background-attachment:fixed;min-height:100dvh;line-height:1.6}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);letter-spacing:-.02em;color:var(--text-primary);font-weight:700;line-height:1.2}h1{font-size:var(--text-5xl)}h2{font-size:var(--text-4xl)}h3{font-size:var(--text-3xl)}h4{font-size:var(--text-2xl)}h5{font-size:var(--text-xl)}.text-gradient{background:var(--gradient-purple-cyan);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.font-mono{font-family:var(--font-mono)}.glass-card{background:var(--glass-bg);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:var(--radius-lg);padding:var(--space-lg);transition:all var(--transition-base)}.glass-card:hover{background:var(--glass-bg-hover);box-shadow:var(--shadow-md);border-color:#ffffff1f;transform:translateY(-2px)}.btn{justify-content:center;align-items:center;gap:var(--space-sm);font-family:var(--font-heading);font-weight:600;font-size:var(--text-base);padding:var(--space-md) var(--space-xl);border-radius:var(--radius-full);cursor:pointer;transition:all var(--transition-base);white-space:nowrap;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;border:none;text-decoration:none;display:inline-flex}.btn:active{transform:scale(.97)}.btn-primary{background:var(--gradient-purple-cyan);color:#fff;box-shadow:var(--shadow-neon-purple)}.btn-primary:hover{box-shadow:0 0 30px var(--neon-purple-glow), 0 0 60px #a855f733;transform:translateY(-2px)}.btn-secondary{background:var(--glass-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--text-primary);border:1px solid var(--glass-border)}.btn-secondary:hover{background:var(--glass-bg-hover);border-color:var(--neon-purple);box-shadow:var(--shadow-neon-purple)}.btn-danger{background:var(--neon-red);color:#fff;box-shadow:0 0 20px var(--neon-red-glow)}.btn-ghost{color:var(--text-secondary);background:0 0}.btn-ghost:hover{color:var(--text-primary);background:var(--glass-bg)}.btn-lg{font-size:var(--text-lg);padding:var(--space-lg) var(--space-2xl)}.btn-sm{font-size:var(--text-sm);padding:var(--space-sm) var(--space-md)}.btn-icon{border-radius:var(--radius-full);width:48px;height:48px;padding:0}.input{width:100%;font-family:var(--font-body);font-size:var(--text-lg);padding:var(--space-md) var(--space-lg);background:var(--glass-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--glass-border);border-radius:var(--radius-md);color:var(--text-primary);transition:all var(--transition-base);outline:none}.input::placeholder{color:var(--text-muted)}.input:focus{border-color:var(--neon-purple);box-shadow:0 0 0 3px var(--neon-purple-subtle), var(--shadow-neon-purple)}.room-code{font-family:var(--font-mono);font-size:var(--text-4xl);letter-spacing:.3em;color:var(--neon-cyan);text-shadow:0 0 20px var(--neon-cyan-glow);text-align:center;font-weight:700}.score{font-family:var(--font-mono);color:var(--neon-green);text-shadow:0 0 10px var(--neon-green-glow);font-weight:700}.score-change{font-family:var(--font-mono);color:var(--neon-orange);font-weight:600}.badge{align-items:center;gap:var(--space-xs);font-family:var(--font-heading);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.05em;padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-full);background:var(--neon-purple-subtle);color:var(--neon-purple);border:1px solid #a855f733;font-weight:600;display:inline-flex}.badge-success{color:var(--neon-green);background:#10b9811a;border-color:#10b98133}.badge-drinking{background:var(--neon-pink-subtle);color:var(--neon-pink);border-color:#ec489933}.avatar{border-radius:var(--radius-full);background:var(--gradient-purple-cyan);width:48px;height:48px;font-size:var(--text-xl);color:#fff;flex-shrink:0;justify-content:center;align-items:center;font-weight:700;display:flex}.avatar-sm{width:36px;height:36px;font-size:var(--text-base)}.avatar-lg{width:64px;height:64px;font-size:var(--text-3xl)}.timer{font-family:var(--font-mono);font-size:var(--text-3xl);color:var(--text-primary);transition:color var(--transition-base);font-weight:700}.timer-warning{color:var(--neon-orange);animation:1s ease-in-out infinite pulse-glow}.timer-danger{color:var(--neon-red);animation:.5s ease-in-out infinite pulse-glow}.result-perfect{color:var(--neon-green);text-shadow:0 0 10px var(--neon-green-glow)}.result-near{color:var(--neon-orange);text-shadow:0 0 10px var(--neon-orange-glow)}.result-miss{color:var(--text-muted)}.container{width:100%;max-width:480px;padding:0 var(--space-md);margin:0 auto}.container-wide{max-width:720px}.flex-center{justify-content:center;align-items:center;display:flex}.flex-between{justify-content:space-between;align-items:center;display:flex}.flex-col{flex-direction:column;display:flex}.gap-xs{gap:var(--space-xs)}.gap-sm{gap:var(--space-sm)}.gap-md{gap:var(--space-md)}.gap-lg{gap:var(--space-lg)}.gap-xl{gap:var(--space-xl)}.text-center{text-align:center}@keyframes pulse-glow{0%,to{opacity:1}50%{opacity:.6}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes slide-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-in-right{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes scale-in{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-4px)}20%,40%,60%,80%{transform:translate(4px)}}@keyframes confetti-fall{0%{opacity:1;transform:translateY(0)rotate(0)}to{opacity:0;transform:translateY(100vh)rotate(720deg)}}@keyframes neon-flicker{0%,to{opacity:1}50%{opacity:.8}52%{opacity:1}54%{opacity:.7}56%{opacity:1}}.animate-slide-up{animation:slide-up .5s var(--transition-spring) forwards}.animate-scale-in{animation:scale-in .3s var(--transition-base) forwards}.animate-shake{animation:.5s ease-in-out shake}.animate-float{animation:3s ease-in-out infinite float}.drinking-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:var(--z-overlay);background:#ec489926;justify-content:center;align-items:center;animation:.3s ease-out scale-in;display:flex;position:fixed;inset:0}.drinking-card{background:var(--bg-surface);border:2px solid var(--neon-pink);border-radius:var(--radius-xl);padding:var(--space-2xl);text-align:center;box-shadow:0 0 40px var(--neon-pink-glow), 0 0 80px #ec48991a;max-width:400px;margin:var(--space-md)}.drinking-card .emoji{margin-bottom:var(--space-md);font-size:4rem;animation:2s ease-in-out infinite float;display:block}@media (max-width:480px){h1{font-size:var(--text-3xl)}h2{font-size:var(--text-2xl)}h3{font-size:var(--text-xl)}.container{padding:0 var(--space-sm)}.btn-lg{font-size:var(--text-base);padding:var(--space-md) var(--space-xl)}.room-code{font-size:var(--text-3xl)}}@supports (padding:env(safe-area-inset-top)){body{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}}