:root {
  --bg: #f4f6f3;
  --surface: #ffffff;
  --surface-2: #eef1ec;
  --text: #17201a;
  --muted: #5d6b61;
  --line: #d9dfd8;
  --felt: #14532d;
  --felt-ink: #ffffff;
  --accent: #15803d;
  --t0: #1d4ed8;
  --t0-soft: #dbe6ff;
  --t1: #c2410c;
  --t1-soft: #ffe4d4;
  --good: #15803d;
  --bad: #b91c1c;
  --red-suit: #c81e1e;
  --black-suit: #111827;
  --gold: #b45309;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 14px rgba(0, 0, 0, 0.05);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1411;
    --surface: #17201b;
    --surface-2: #1f2a24;
    --text: #e8eee9;
    --muted: #9aa9a0;
    --line: #2c3a32;
    --felt: #166534;
    --accent: #22c55e;
    --t0: #7aa2ff;
    --t0-soft: #1b2a4d;
    --t1: #fb923c;
    --t1-soft: #4a2412;
    --good: #4ade80;
    --bad: #f87171;
    --red-suit: #f87171;
    --black-suit: #e5e7eb;
    --gold: #fbbf24;
    --shadow: none;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

main {
  max-width: 720px;
  margin: 0 auto;
  padding: env(safe-area-inset-top) 16px calc(32px + env(safe-area-inset-bottom));
}

h1, h2, h3 { margin: 0; line-height: 1.2; }
h2 { font-size: 1.05rem; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.hidden { display: none !important; }

button, input, select {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-weight: 600;
  text-decoration: none;
}
.btn.primary { background: var(--felt); border-color: var(--felt); color: var(--felt-ink); }
.btn.block { width: 100%; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.link { border: none; background: none; color: var(--accent); padding: 8px 4px; min-height: 0; }

.topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 0 10px;
}
.topbar h1 { font-size: 1.15rem; flex: 1; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { width: 30px; height: 30px; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  margin-bottom: 14px;
}

.hero {
  background: var(--felt);
  color: var(--felt-ink);
  border-radius: var(--radius);
  padding: 22px 18px;
  margin-bottom: 14px;
}
.hero p { margin: 6px 0 16px; opacity: 0.85; }
.hero .btn { background: #fff; color: var(--felt); border-color: #fff; }

.row { display: flex; gap: 10px; align-items: center; }
.row > .grow { flex: 1; min-width: 0; }
.stack > * + * { margin-top: 10px; }

label.field { display: block; }
label.field span { display: block; font-size: 0.85rem; color: var(--muted); margin-bottom: 4px; }
input[type="text"], select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface-2);
}
input.code { text-transform: uppercase; letter-spacing: 0.2em; font-weight: 700; }

.team-setup { border-left: 4px solid var(--t0); padding-left: 12px; }
.team-setup.t1 { border-left-color: var(--t1); }

/* History list */
.game-list { list-style: none; margin: 0; padding: 0; }
.game-list li + li { border-top: 1px solid var(--line); }
.game-item { display: flex; align-items: center; gap: 10px; padding: 12px 0; }
.game-item a { flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.game-item .teams { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.game-item .score { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.pill {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--surface-2);
  color: var(--muted);
}
.pill.live { background: var(--t0-soft); color: var(--t0); }
.icon-btn {
  border: none;
  background: none;
  color: var(--muted);
  min-width: 40px;
  min-height: 40px;
  border-radius: 10px;
}

/* Scoreboard */
.scoreboard { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.team-score {
  border-radius: var(--radius);
  padding: 12px 14px;
  background: var(--t0-soft);
  border: 2px solid transparent;
}
.team-score.t1 { background: var(--t1-soft); }
.team-score.leading { border-color: var(--t0); }
.team-score.t1.leading { border-color: var(--t1); }
.team-score .name { font-weight: 700; color: var(--t0); }
.team-score.t1 .name { color: var(--t1); }
.team-score .players { font-size: 0.8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team-score .total { font-size: 2.2rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; margin-top: 4px; }

.code-chip {
  font-weight: 800;
  letter-spacing: 0.12em;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
}
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); display: inline-block; }
.live-dot.on { background: var(--good); box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 25%, transparent); }

/* Hand panel */
.hand-head { display: flex; align-items: center; gap: 8px; }
.hand-head .title { flex: 1; text-align: center; }
.hand-head .title .cards { font-size: 1.6rem; font-weight: 800; }
.nav-btn {
  width: 44px; height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 1.3rem;
}
.nav-btn:disabled { opacity: 0.3; }
.dealer-line { text-align: center; margin: 6px 0 12px; color: var(--muted); font-size: 0.9rem; }
.dealer-line b { color: var(--text); }

.section-label { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 14px 0 8px; }

.suits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.suit {
  min-height: 48px;
  border-radius: 12px;
  border: 2px solid var(--line);
  background: var(--surface-2);
  font-size: 1.5rem;
  color: var(--black-suit);
}
.suit.red { color: var(--red-suit); }
.suit.on { border-color: var(--accent); background: var(--surface); box-shadow: inset 0 0 0 1px var(--accent); }

.player-row { padding: 10px 0; border-top: 1px solid var(--line); }
.player-row:first-of-type { border-top: none; }
.player-name { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 8px; }
.player-name .tag { margin-left: auto; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--t0); flex: none; }
.dot.t1 { background: var(--t1); }
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chip {
  flex: none;
  min-width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.chip.on { background: var(--felt); border-color: var(--felt); color: var(--felt-ink); }
.chip.max {
  padding: 0 12px;
  color: var(--gold);
  border-color: color-mix(in srgb, var(--gold) 50%, var(--line));
}
.chip.max.on { background: var(--gold); border-color: var(--gold); color: #fff; }

.max-banner {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--gold) 14%, var(--surface));
  color: var(--gold);
  font-weight: 700;
}
.max-banner .grow { flex: 1; }

.team-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.team-summary > div { padding: 10px 12px; border-radius: 10px; background: var(--t0-soft); }
.team-summary > div.t1 { background: var(--t1-soft); }
.team-summary .label { font-size: 0.8rem; color: var(--muted); }
.team-summary .value { font-weight: 800; font-size: 1.15rem; }

.status-line { text-align: center; font-weight: 600; margin: 12px 0; }
.status-line.ok { color: var(--good); }
.status-line.warn { color: var(--bad); }

.result { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.result > div { padding: 12px; border-radius: 12px; background: var(--t0-soft); }
.result > div.t1 { background: var(--t1-soft); }
.result .pts { font-size: 1.8rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.pos { color: var(--good); }
.neg { color: var(--bad); }

.actions { display: flex; gap: 10px; margin-top: 14px; }
.actions .btn { flex: 1; }

.winner {
  text-align: center;
  background: var(--felt);
  color: var(--felt-ink);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 14px;
}
.winner h2 { font-size: 1.4rem; }

/* Scorecard table */
.table-wrap { overflow-x: auto; margin: 0 -16px; padding: 0 16px; }
table.sheet { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 0.8rem; }
.sheet th, .sheet td { padding: 7px 2px; text-align: center; border-bottom: 1px solid var(--line); white-space: nowrap; }
.sheet th { font-size: 0.7rem; color: var(--muted); font-weight: 700; }
.sheet th.t0, .sheet th.t1 { max-width: 90px; overflow: hidden; text-overflow: ellipsis; }
.sheet th.t0 { color: var(--t0); }
.sheet th.t1 { color: var(--t1); }
.sheet tbody tr { cursor: pointer; }
.sheet tr.current td { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.sheet td.tot { font-weight: 800; }
.sheet .trump { font-size: 1rem; }
.sheet .trump.red { color: var(--red-suit); }
.sheet .split { border-left: 1px solid var(--line); }
.sheet .maxcell { color: var(--gold); font-weight: 700; }

#toast {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  background: var(--text);
  color: var(--bg);
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 600;
  z-index: 10;
  max-width: calc(100% - 32px);
}

.rules { font-size: 0.9rem; }
.rules ul { margin: 6px 0 0; padding-left: 18px; }
.rules li { margin: 4px 0; }
details summary { cursor: pointer; font-weight: 700; }

.stats-table td { padding: 9px 4px; }
.stats-table tbody tr { cursor: default; }
.stats-table th.t0, .stats-table th.t1 { max-width: 120px; }

.saved-teams:empty { display: none; }
.saved-teams .chips { margin-top: 6px; }
.chip.team-chip { padding: 0 12px; font-weight: 600; }
.winner .btn { background: #fff; color: var(--felt); border-color: #fff; }