:root { --gap: 1rem; --bg: #0f1115; --fg: #f3f3f3; --muted:#9aa0a6; --accent:#7c3aed; --danger:#c24141;}
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji'; background: var(--bg); color: var(--fg); }
a { color: var(--fg); }
.app-header, .app-footer { padding: var(--gap); background: #151821; border-bottom: 1px solid #222; }
.app-footer { border-top: 1px solid #222; border-bottom: none; margin-top: 2rem; }
.container { max-width: 1100px; margin: 0 auto; padding: var(--gap); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.card { background: #11141b; padding: var(--gap); border-radius: 14px; box-shadow: 0 10px 20px rgba(0,0,0,.25); }
.stack > * + * { margin-top: .75rem; }
label { display:block; font-size:.95rem; color: var(--muted); }
input, select { width:100%; padding:.6rem .8rem; border:1px solid #333; background:#0d0f14; color: var(--fg); border-radius:10px; }
button.btn { padding:.6rem 1rem; border:none; border-radius:999px; background:#22283a; color:var(--fg); cursor:pointer; }
.btn.primary { background: var(--accent); }
.btn.danger { background: var(--danger); }
.btn.small { padding:.35rem .6rem; }
.btn-row { display:flex; flex-wrap:wrap; gap:.5rem; }
.toolbar { display:flex; align-items:flex-end; gap: 1rem; margin-bottom: 1rem; }
.controls { display:grid; grid-template-columns: repeat(5, 1fr); gap: var(--gap); margin-bottom: 1rem; }
.panel { background:#11141b; padding:var(--gap); border-radius:12px; }
.grid-players { display:grid; grid-template-columns: repeat(5, 1fr); gap: var(--gap); }
.player-card { background:#0f1320; border:1px solid #25293b; padding: .75rem; border-radius:14px; }
.player-card.you { outline: 2px solid var(--accent); }
.pc-header { display:flex; justify-content:space-between; }
.pc-body { display:grid; grid-template-columns: 1fr auto; gap:.6rem; align-items:center; }
.pc-life b { font-size:1.3rem; }
.flash.error { background:#551919; border:1px solid #7a2a2a; padding:.75rem; border-radius:10px; margin-bottom: 1rem; }
dialog { background:#0f1320; color: var(--fg); border: 1px solid #25293b; border-radius:10px; padding:1rem; }
.table-like { display:grid; gap:.5rem; }
.table-like .tr { display:grid; grid-template-columns: 1fr 100px 220px; gap:.5rem; padding:.5rem; border-bottom:1px solid #222; }
.table-like .th { font-weight:700; color:var(--muted); border-bottom-color:#333; }
@media (max-width: 900px) {
  .grid-players { grid-template-columns: repeat(2, 1fr); }
  .controls { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: 1fr; }
  .table-like .tr { grid-template-columns: 1fr 90px 160px; }
}