* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #0f1411; font-family: 'Segoe UI', 'Roboto', sans-serif; color: #f0ebdb; min-height: 100vh; padding: 16px; display: flex; justify-content: center; }
.app { max-width: 600px; width: 100%; }
.card { background: #1a2420; border-radius: 24px; padding: 20px; margin-bottom: 16px; box-shadow: 0 8px 0 #0d1511; border-bottom: 3px solid #8ECAE6; }
h2, h3 { color: #e0dcc8; margin-bottom: 12px; }
.btn { background: #3d5c4a; border: none; border-bottom: 4px solid #1b2f24; color: #fdf7e9; padding: 12px 20px; font-weight: bold; border-radius: 48px; cursor: pointer; box-shadow: 0 3px 0 #141f19; transition: 0.08s; font-size: 1rem; margin: 5px; display: inline-block; text-align: center; }
.btn.small { padding: 8px 16px; font-size: 0.9rem; }
.btn.primary { background: #5f7e6b; border-bottom-color: #2c4738; }
.btn.danger { background: #8f4a4a; border-bottom-color: #572e2e; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #141f19; }
.btn:disabled { opacity: 0.5; pointer-events: none; }
input, select { width: 100%; padding: 14px 18px; background: #0e1914; border: 1px solid #5a7d6b; border-radius: 48px; color: white; font-size: 1rem; margin: 8px 0; }
.player-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.player-badge { background: #1e2e26; border-radius: 16px; padding: 12px 8px; text-align: center; border-bottom: 2px solid #5a7d6b; position: relative; }
.dead { opacity: 0.5; text-decoration: line-through; }
.disconnected { border-bottom-color: #8f6f4a; }
.kick-btn { position: absolute; top: 4px; right: 4px; background: #8f4a4a; border: none; color: white; border-radius: 20px; padding: 2px 8px; font-size: 0.7rem; cursor: pointer; }
.log-area { background: #0e1914; border-radius: 20px; padding: 12px; height: 150px; overflow-y: auto; font-size: 0.9rem; border: 1px solid #40634e; margin-top: 12px; }
.flex-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.room-code { font-family: monospace; font-size: 2rem; letter-spacing: 6px; background: #0e1914; padding: 10px 20px; border-radius: 48px; text-align: center; border: 1px solid #8ECAE6; }
@media (max-width: 480px) { .player-grid { grid-template-columns: repeat(2, 1fr); } }