:root{--matrix-green: #00ff41;--neon-green: #00ff41;--dark-green: #004411;--bg-black: #000000;--bg-dark: #050505;--bg-darker: #111111;--text-primary: #ffffff;--text-dim: #888888;--danger-red: #ff003c;--warning-yellow: #ffff00}.chat-container{background:#050505;border:2px solid #00ff41;box-shadow:0 0 20px #00ff4133;border-radius:10px;font-family:Courier New,Courier,monospace;overflow:hidden;max-width:500px;margin:20px auto;display:flex;flex-direction:column}.chat-header{background:#111;padding:15px;text-align:center;border-bottom:1px solid #333;text-transform:uppercase;letter-spacing:3px;color:#00ff41;text-shadow:0 0 10px #00ff41}.chat-messages{flex:1;min-height:0;padding:20px;overflow-y:auto;display:flex;flex-direction:column;gap:15px;background:repeating-linear-gradient(0deg,rgba(0,0,0,.1) 0px,rgba(0,0,0,.1) 1px,transparent 1px,transparent 2px),#000}.message{max-width:80%;padding:12px 18px;border-radius:5px;font-size:14px;line-height:1.4;position:relative}.message.user{align-self:flex-end;background:#004411;color:#fff;border-left:3px solid #00ff41}.message.other,.message.opponent{align-self:flex-start;background:#222;color:#00ff41;border-right:3px solid #ff003c}.message.system{align-self:center;background:transparent;border:1px solid #333;color:#666;font-size:12px;text-transform:uppercase;text-align:center}.typing-indicator{color:#555;font-size:12px;font-style:italic;margin-bottom:10px;animation:blink 1.5s infinite}@keyframes blink{0%{opacity:.3}50%{opacity:1}to{opacity:.3}}.chat-input-area{display:flex;padding:15px;background:#111;border-top:1px solid #333}.chat-input{flex:1;background:#000;border:1px solid #333;color:#00ff41;padding:10px;outline:none}.chat-input:focus{border-color:#00ff41}.send-btn{background:#00ff41;color:#000;border:none;padding:10px 20px;cursor:pointer;font-weight:700;transition:.3s}.send-btn:hover{background:#00cc33;box-shadow:0 0 15px #00ff41}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Source Code Pro,monospace;background:var(--bg-black);color:var(--neon-green);overflow-x:hidden;line-height:1.4}h1,h2,h3{font-weight:600;text-transform:uppercase;letter-spacing:2px}@keyframes glitch{0%{transform:translate(0)}20%{transform:translate(-2px,2px)}40%{transform:translate(-2px,-2px)}60%{transform:translate(2px,2px)}80%{transform:translate(2px,-2px)}to{transform:translate(0)}}@keyframes neon-pulse{0%,to{text-shadow:0 0 5px var(--neon-green),0 0 10px var(--neon-green)}50%{text-shadow:0 0 20px var(--neon-green),0 0 30px var(--neon-green)}}@keyframes matrix-rain{0%{transform:translateY(-100vh);opacity:1}to{transform:translateY(100vh);opacity:0}}@keyframes typing-dots{0%,20%{opacity:.2}50%{opacity:1}to{opacity:.2}}@keyframes nav-glow{0%,to{box-shadow:0 8px 32px #00ff4126,inset 0 1px #ffffff1a}50%{box-shadow:0 8px 32px #00ff4140,inset 0 1px #ffffff26}}.neon-text{color:var(--neon-green);text-shadow:0 0 5px var(--neon-green),0 0 10px var(--neon-green)}.neon-pulse{animation:neon-pulse 2s ease-in-out infinite}.glitch-effect{animation:glitch .5s ease-in-out infinite}.matrix-bg{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:-1}.cyber-button{background:transparent;border:2px solid var(--neon-green);color:var(--neon-green);padding:12px 24px;font-family:Source Code Pro,monospace;font-weight:600;text-transform:uppercase;letter-spacing:1px;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden}.cyber-button:hover{background:var(--neon-green);color:var(--bg-black);box-shadow:0 0 20px var(--neon-green)}.cyber-button:active{transform:scale(.98)}.cyber-input{background:var(--bg-darker);border:1px solid var(--text-dim);color:var(--neon-green);padding:12px 16px;font-family:Source Code Pro,monospace;font-size:14px;transition:all .3s ease}.cyber-input:focus{outline:none;border-color:var(--neon-green);box-shadow:0 0 10px var(--neon-green)}.message{margin:10px 0;padding:10px 15px;border-radius:4px;max-width:80%}.message.user{background:var(--bg-darker);border-left:3px solid var(--neon-green);margin-left:auto;text-align:right}.message.other{background:var(--bg-dark);border-left:3px solid var(--text-dim)}.message.system{background:var(--bg-darker);border:1px solid var(--warning-yellow);color:var(--warning-yellow);text-align:center;font-style:italic;margin:20px auto;max-width:90%}.timer{font-size:24px;font-weight:700;color:var(--neon-green);text-align:center;padding:20px}.timer.danger{color:var(--danger-red);animation:neon-pulse 1s ease-in-out infinite}.leaderboard{background:var(--bg-darker);border:1px solid var(--neon-green);padding:20px;margin:20px 0}.leaderboard h3{color:var(--neon-green);margin-bottom:15px;text-align:center}.leaderboard-entry{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--text-dim)}.status-online{width:8px;height:8px;background:var(--neon-green);border-radius:50%;display:inline-block;margin-right:8px;animation:neon-pulse 1s ease-in-out infinite}.status-offline{width:8px;height:8px;background:var(--text-dim);border-radius:50%;display:inline-block;margin-right:8px}.loading-spinner{width:40px;height:40px;border:3px solid var(--bg-darker);border-top:3px solid var(--neon-green);border-radius:50%;animation:spin 1s linear infinite;margin:20px auto}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width: 768px){.cyber-button{padding:10px 20px;font-size:14px}.message{max-width:95%}}.cyber-button.secondary{background:var(--bg-darker);border:1px solid var(--text-dim);color:var(--text-dim)}.cyber-button.secondary:hover{background:var(--text-dim);color:var(--bg-black);box-shadow:none}.pulse-button{animation:lobby-pulse 2s infinite}@keyframes lobby-pulse{0%{box-shadow:0 0 #00ff4166}70%{box-shadow:0 0 0 10px #00ff4100}to{box-shadow:0 0 #00ff4100}}.skeleton-box{background:linear-gradient(90deg,#1a1a1a 25%,#2a2a2a 50%,#1a1a1a 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:4px}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.tooltip-container{position:relative;display:inline-block}.tooltip-trigger{margin-left:5px;border-radius:50%;background:#333;padding:0 5px;cursor:help;font-size:.75rem;color:var(--text-dim)}.tooltip-text{visibility:hidden;width:220px;background-color:#222;color:#fff;text-align:center;border-radius:6px;padding:8px;border:1px solid var(--text-dim);position:absolute;z-index:100;bottom:130%;left:50%;transform:translate(-50%);opacity:0;transition:opacity .25s;font-size:.75rem;pointer-events:none}.tooltip-container:hover .tooltip-text{visibility:visible;opacity:1}@media (max-width: 520px){.lobby-mode-grid{grid-template-columns:1fr!important}}@media (max-width: 480px){body{font-size:14px}.cyber-button{padding:10px 16px;font-size:clamp(12px,3vw,14px);letter-spacing:.5px}.cyber-input{padding:10px 12px;font-size:clamp(12px,3vw,14px)}*{max-width:100%}.container,div[style*=width]{max-width:100%!important}}@media (max-width: 768px){h1{font-size:clamp(1.8rem,6vw,3rem)!important}.cyber-button{width:100%;max-width:none}}