body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; margin:0; }
.topbar { background:#111; color:#fff; padding:10px 0; }
.container { max-width: 980px; margin: 0 auto; padding: 0 12px; }
.body { padding: 16px 0 40px; }

.card { border:1px solid #ddd; background:#fff; padding:12px; border-radius:10px; margin-bottom:12px; }
.grid { display:grid; gap:12px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } }

.kv { display:grid; grid-template-columns: 140px 1fr; gap:6px; }
.row { display:flex; align-items:center; gap:8px; }
.input { padding:8px; border:1px solid #ccc; border-radius:8px; min-width: 160px; }
.btn { padding:8px 12px; border:1px solid #444; background:#f6f6f6; border-radius:10px; cursor:pointer; }
.btn:disabled{ opacity:.6; cursor:not-allowed; }

.badge { display:inline-block; padding:6px 10px; border:1px solid #ddd; border-radius:999px; }
.small { color:#666; font-size:12px; }

.player.dead { opacity:.5; }
.chat { border:1px solid #eee; background:#fafafa; padding:8px; border-radius:6px; max-height:260px; overflow:auto; }
.timer { font-feature-settings: 'tnum' 1; font-variant-numeric: tabular-nums; }
.list { margin: 6px 0 0 16px; }

.modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center; z-index:1000;
}
.modal-card {
  background:#fff; border-radius:12px; padding:16px; max-width: 560px; width: calc(100% - 32px);
  box-shadow: 0 8px 30px rgba(0,0,0,.2);
}
.modal h3 { margin: 0 0 8px 0; }
.modal .footer { display:flex; justify-content:flex-end; gap:8px; margin-top:12px; }
.btn-sm { padding:6px 8px; font-size: 13px; border-radius: 8px; }