:root{--bg:#0a0a0f;--text:#fff;--border:#2a2a3e}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);justify-content:center;align-items:center;min-height:100vh;font-family:Segoe UI,system-ui,-apple-system,sans-serif;display:flex}#app{flex-direction:column;align-items:center;gap:20px;padding:20px;display:flex}h1{letter-spacing:2px;background:linear-gradient(135deg,#00d26a 0%,#07f 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:2rem;font-weight:600}.game-container{flex-direction:column;align-items:center;gap:15px;display:flex;position:relative}.chat-overlay{z-index:10;background:#0a0e1ed1;border:1px solid #78a0ff59;border-radius:8px;flex-direction:column;gap:6px;width:250px;max-width:45%;padding:8px;font-size:.8rem;display:flex;position:absolute;top:10px;right:10px}.vs-header{color:#fc0;text-align:center;white-space:nowrap;text-overflow:ellipsis;font-weight:700;overflow:hidden}.chat-log{word-break:break-word;background:#00000059;border-radius:4px;flex-direction:column;gap:2px;height:180px;padding:4px;display:flex;overflow-y:auto}.chat-line{color:#e6e6e6;line-height:1.3}.chat-name{color:#6cf;font-weight:700}.chat-input{box-sizing:border-box;color:#fff;background:#0006;border:1px solid #78a0ff66;border-radius:4px;width:100%;padding:6px 8px;font-size:.8rem}.chat-input:focus{border-color:#6cf;outline:none}.chat-overlay.compact{opacity:.78;width:180px}.chat-overlay.compact .chat-log{height:70px}#game-canvas{border:2px solid var(--border);border-radius:8px;box-shadow:0 0 30px #0064ff1a}.controls{opacity:.7;gap:40px;font-size:.9rem;display:flex}.control-group{flex-direction:column;align-items:center;gap:5px;display:flex}.control-group h3{text-transform:uppercase;letter-spacing:1px;font-size:.8rem;font-weight:500}.player-1{color:#00d26a}.player-2{color:#07f}.keys{font-family:monospace;font-size:.85rem}.mode-select{flex-direction:column;align-items:center;gap:20px;margin-top:20px;display:flex}.mode-select h2{color:#888;font-size:1.2rem;font-weight:500}.mode-buttons{gap:20px;display:flex}.mode-btn{border:2px solid var(--border);color:var(--text);cursor:pointer;background:#ffffff0d;border-radius:12px;flex-direction:column;align-items:center;gap:8px;padding:20px 30px;transition:all .2s;display:flex}.mode-btn:hover{transform:translateY(-3px);box-shadow:0 5px 20px #0064ff33}.btn-1p:hover{background:#00d26a1a;border-color:#00d26a}.btn-2p:hover{background:#0077ff1a;border-color:#07f}.mode-icon{font-size:2rem}.mode-label{font-size:1.1rem;font-weight:600}.mode-key{color:#666;font-family:monospace;font-size:.8rem}