:root{--bg-primary: #0b071a;--bg-surface: #140d2d;--bg-surface-elevated: #1e1342;--bg-surface-hover: #2a1b5c;--border-color: #3b2875;--border-glow: #6c47ff;--neon-pink: #ff007f;--neon-cyan: #00f3ff;--neon-yellow: #ffe600;--neon-green: #00ff66;--neon-purple: #9d4edd;--neon-orange: #ff6b00;--text-main: #f8fafc;--text-muted: #94a3b8;--text-dim: #64748b;--text-glow: 0 0 10px rgba(0, 243, 255, .6);--font-pixel: "Press Start 2P", monospace, cursive;--font-heading: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--pixel-shadow-sm: 2px 2px 0px #000;--pixel-shadow: 4px 4px 0px #000;--pixel-shadow-lg: 6px 6px 0px #000;--pixel-shadow-neon: 0 0 15px rgba(255, 0, 127, .4), 4px 4px 0px #000;--pixel-shadow-cyan: 0 0 15px rgba(0, 243, 255, .4), 4px 4px 0px #000;--pixel-shadow-green: 0 0 15px rgba(0, 255, 102, .4), 4px 4px 0px #000;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 14px}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}html{width:100%;max-width:100vw;overflow-x:hidden}input,textarea{-webkit-user-select:text;user-select:text}body{background-color:var(--bg-primary);color:var(--text-main);font-family:var(--font-body);min-height:100vh;min-height:100dvh;width:100%;max-width:100vw;overflow-x:hidden;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);background-image:radial-gradient(circle at 50% 10%,rgba(108,71,255,.15),transparent 45%),radial-gradient(circle at 85% 70%,rgba(255,0,127,.1),transparent 35%),radial-gradient(circle at 15% 80%,rgba(0,243,255,.08),transparent 35%),linear-gradient(rgba(20,13,45,.6) 1px,transparent 1px),linear-gradient(90deg,rgba(20,13,45,.6) 1px,transparent 1px);background-size:100% 100%,100% 100%,100% 100%,32px 32px,32px 32px;background-position:0 0,0 0,0 0,-1px -1px,-1px -1px}.scanlines{position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:9999;background:linear-gradient(#12101000 50%,#00000026 50%);background-size:100% 4px;opacity:.35}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--bg-surface)}::-webkit-scrollbar-thumb{background:var(--border-glow);border-radius:3px}.font-pixel{font-family:var(--font-pixel);letter-spacing:.5px}.font-heading{font-family:var(--font-heading)}.glow-pink{text-shadow:0 0 10px rgba(255,0,127,.7)}.glow-cyan{text-shadow:0 0 10px rgba(0,243,255,.7)}.glow-yellow{text-shadow:0 0 10px rgba(255,230,0,.7)}.glow-green{text-shadow:0 0 10px rgba(0,255,102,.7)}.pixel-card{background:var(--bg-surface);border:3px solid var(--border-color);box-shadow:var(--pixel-shadow);border-radius:var(--radius-sm);position:relative;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}.pixel-card-neon{border-color:var(--neon-pink);box-shadow:var(--pixel-shadow-neon)}.pixel-card-cyan{border-color:var(--neon-cyan);box-shadow:var(--pixel-shadow-cyan)}.pixel-card-green{border-color:var(--neon-green);box-shadow:var(--pixel-shadow-green)}.pixel-btn{font-family:var(--font-pixel);font-size:.75rem;line-height:1.4;padding:12px 18px;background:var(--bg-surface-elevated);color:var(--text-main);border:3px solid var(--border-color);box-shadow:var(--pixel-shadow);border-radius:var(--radius-sm);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-transform:uppercase;transition:all .1s ease;position:relative;outline:none;max-width:100%;box-sizing:border-box;word-break:break-word;overflow-wrap:anywhere;text-align:center}.pixel-btn:hover:not(:disabled){transform:translate(-2px,-2px);box-shadow:6px 6px #000;border-color:var(--neon-cyan)}.pixel-btn:active:not(:disabled){transform:translate(2px,2px);box-shadow:1px 1px #000}.pixel-btn:disabled{opacity:.5;cursor:not-allowed;filter:grayscale(.8)}.pixel-btn-primary{background:linear-gradient(135deg,#ff007f,#b30059);color:#fff;border-color:#ff66b3;box-shadow:0 0 10px #ff007f66,var(--pixel-shadow)}.pixel-btn-primary:hover:not(:disabled){background:linear-gradient(135deg,#f39,#d9006c);border-color:#fff;box-shadow:0 0 16px #ff007fb3,6px 6px #000}.pixel-btn-cyan{background:linear-gradient(135deg,#00c4cc,#008b94);color:#0b071a;font-weight:700;border-color:#80f9ff;box-shadow:0 0 10px #00f3ff66,var(--pixel-shadow)}.pixel-btn-cyan:hover:not(:disabled){background:linear-gradient(135deg,#00f3ff,#00c4cc);border-color:#fff;box-shadow:0 0 16px #00f3ffcc,6px 6px #000}.pixel-btn-green{background:linear-gradient(135deg,#00cc52,#008f39);color:#0b071a;font-weight:700;border-color:#6f9;box-shadow:0 0 10px #0f66,var(--pixel-shadow)}.pixel-btn-green:hover:not(:disabled){background:linear-gradient(135deg,#0f6,#00cc52);border-color:#fff;box-shadow:0 0 16px #0f6c,6px 6px #000}.pixel-btn-yellow{background:linear-gradient(135deg,#e6ce00,#b3a000);color:#0b071a;font-weight:700;border-color:#fff066;box-shadow:0 0 10px #ffe60066,var(--pixel-shadow)}.pixel-btn-pink{background:linear-gradient(135deg,#c06,#8f0048);color:#fff;font-weight:700;border-color:#ff66b3;box-shadow:0 0 10px #ff007f66,var(--pixel-shadow)}.pixel-btn-pink:hover:not(:disabled){background:linear-gradient(135deg,#ff007f,#c06);border-color:#fff;box-shadow:0 0 16px #ff007fcc,6px 6px #000}.pixel-btn-sm{padding:8px 12px;font-size:.65rem}.pixel-btn-lg{padding:16px 24px;font-size:.85rem}@media(max-width:600px){.pixel-btn{font-size:.68rem;padding:10px 12px}.pixel-btn-lg{font-size:.72rem;padding:12px 14px}.pixel-btn-sm{font-size:.6rem;padding:6px 8px}}@keyframes floatUp{0%{transform:translateY(0);opacity:1}80%{transform:translateY(-120px);opacity:.8}to{transform:translateY(-160px);opacity:0}}.pixel-input-wrapper{display:flex;flex-direction:column;gap:6px;width:100%}.pixel-label{font-family:var(--font-pixel);font-size:.65rem;color:var(--neon-cyan);text-transform:uppercase}.pixel-input{font-family:var(--font-heading);font-size:1rem;padding:12px 14px;background:#090514;color:var(--text-main);border:3px solid var(--border-color);box-shadow:inset 3px 3px #0009;border-radius:var(--radius-sm);outline:none;transition:border-color .2s ease,box-shadow .2s ease;width:100%;max-width:100%;box-sizing:border-box}.pixel-input:focus{border-color:var(--neon-cyan);box-shadow:inset 3px 3px #0009,0 0 12px #00f3ff66}.pixel-input-code{font-family:var(--font-pixel);letter-spacing:clamp(3px,1.5vw,6px);text-align:center;font-size:clamp(1.2rem,5vw,1.6rem);text-transform:uppercase;color:var(--neon-yellow)}.pixel-badge{font-family:var(--font-pixel);font-size:.55rem;padding:4px 8px;border-radius:2px;border:2px solid #000;display:inline-flex;align-items:center;gap:4px;box-shadow:1px 1px #000;white-space:nowrap;flex-shrink:0}.pixel-badge-host{background:var(--neon-yellow);color:#000}.pixel-badge-ready{background:var(--neon-green);color:#000}.pixel-badge-waiting{background:var(--text-dim);color:#fff}@keyframes neonPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.85;transform:scale(.98)}}@keyframes bounceSlow{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}.animate-pulse-slow{animation:neonPulse 2s infinite ease-in-out}.animate-bounce-slow{animation:bounceSlow 2s infinite ease-in-out}.pixel-modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#080412d9;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:clamp(8px,2.5vw,16px);box-sizing:border-box}.pixel-modal-content{background:var(--bg-surface);border:4px solid var(--neon-pink);box-shadow:0 0 25px #ff007f59,8px 8px #000;border-radius:var(--radius-sm);width:100%;max-width:min(94vw,540px);max-height:90dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:clamp(14px,4vw,24px);position:relative;box-sizing:border-box;animation:modalPop .2s cubic-bezier(.175,.885,.32,1.275)}@keyframes modalPop{0%{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}.app-container{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;position:relative;max-width:900px;width:100%;margin:0 auto;padding:12px 10px;box-sizing:border-box}@media(min-width:480px){.app-container{padding:16px}}@media(min-width:640px){.app-container{padding:24px}}.top-nav{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;margin-bottom:16px;background:var(--bg-surface);border:2px solid var(--border-color);box-shadow:var(--pixel-shadow-sm);border-radius:var(--radius-sm);flex-wrap:wrap;gap:8px}@media(min-width:480px){.top-nav{padding:12px 16px;margin-bottom:20px}}.logo-link{display:flex;align-items:center;gap:8px;text-decoration:none;cursor:pointer;min-width:0}.logo-text{font-family:var(--font-pixel);font-size:clamp(.75rem,3vw,.9rem);color:var(--neon-pink);text-shadow:0 0 8px rgba(255,0,127,.6);white-space:nowrap}.logo-party{color:var(--neon-yellow);text-shadow:0 0 8px rgba(255,230,0,.6)}.screen-container{flex:1;display:flex;flex-direction:column;width:100%;max-width:100%;min-width:0;box-sizing:border-box}.grid-2{display:grid;grid-template-columns:1fr;gap:12px;width:100%;box-sizing:border-box}@media(min-width:600px){.grid-2{grid-template-columns:1fr 1fr;gap:16px}}.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;width:100%;box-sizing:border-box}@media(min-width:600px){.grid-3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}}.flex-center{display:flex;align-items:center;justify-content:center}.flex-between{display:flex;align-items:center;justify-content:space-between}.gap-sm{gap:8px}.gap-md{gap:16px}.gap-lg{gap:24px}