:root {
  --bg: #0b1020;
  --panel: #151a2c;
  --accent: #36d399;
  --text: #e6e9ef;
  --muted: #98a2b3;
  --cell: #0e1430;
  --win: #193b1e;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, sans-serif;
}
header, footer { padding: 16px 24px; background: #0e142b; }
h1 { margin: 0 0 6px; font-size: 20px; }
main { display: grid; grid-template-columns: 360px 1fr; gap: 16px; padding: 16px; }
.card {
  background: var(--panel); border: 1px solid #253047; border-radius: 10px;
  padding: 14px; margin-bottom: 12px;
}
.auth .card label, .game .card label { display: block; margin: 8px 0; }
input { background: #0f1633; color: var(--text); border: 1px solid #2a3550; border-radius: 6px; padding: 8px; width: 100%; }
button {
  background: var(--accent); border: 0; color: #04110b; padding: 8px 12px;
  border-radius: 6px; cursor: pointer; font-weight: 700;
}
button:hover { filter: brightness(0.95); }
.row { display: flex; gap: 8px; margin-top: 8px; }
.msg { color: var(--muted); min-height: 1.2em; margin-top: 6px; }

.grid {
  display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(3, 80px);
  gap: 8px; margin: 14px 0;
}
.cell {
  background: var(--cell); border: 1px solid #2a3550; border-radius: 10px;
  display: grid; place-items: center; font-size: 32px; font-weight: 900;
}
.cell.win { background: var(--win); border-color: #3d6d3a; }

.wins pre, #paytable {
  background: #0e142d; color: #c9d2f0; padding: 8px; border-radius: 6px; overflow: auto;
}
.auth { grid-column: 1 / 2; }
.game { grid-column: 2 / 3; }
@media (max-width: 960px) {
  main { grid-template-columns: 1fr; }
  .auth, .game { grid-column: 1 / -1; }
}