:root {
  --bg: #0f172a;
  --panel: #111827;
  --ink: #f8fafc;
  --team0: #e63946;
  --team1: #457b9d;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, system-ui, sans-serif;
  background: radial-gradient(circle at top, #1f2937, var(--bg));
  color: var(--ink);
}
.tv-layout {
  height: 100vh;
  display: grid;
  grid-template-areas: ". north ." "west center east" ". south .";
  grid-template-columns: 220px 1fr 220px;
  grid-template-rows: 170px 1fr 170px;
  gap: 12px;
  padding: 24px;
}
.seat, .center {
  background: rgba(17, 24, 39, 0.85);
  border: 1px solid #334155;
  border-radius: 14px;
  padding: 12px;
}
#north { grid-area: north; }
#east { grid-area: east; }
#south { grid-area: south; }
#west { grid-area: west; }
#center { grid-area: center; text-align: center; }
.seat.active { outline: 3px solid #f59e0b; }
.seat .team-0 { color: var(--team0); }
.seat .team-1 { color: var(--team1); }
.card-token {
  display: inline-block;
  margin: 4px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #1e293b;
}