:root {
  color-scheme: light;
  --ink: #14231f;
  --muted: #5f6f69;
  --paper: #f5f8f6;
  --surface: #ffffff;
  --primary: #173f36;
  --primary-bright: #236b59;
  --gold: #e6ad45;
  --gold-soft: #fff2d3;
  --rose: #fde2e1;
  --rose-ink: #843734;
  --winner: #d9f2df;
  --winner-ink: #175b32;
  --line: #d8e1dd;
  --danger: #a12e2a;
  --shadow: 0 16px 40px rgba(20, 35, 31, 0.09);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #edf5f0;
  --muted: #afc2b8;
  --paper: #101b18;
  --surface: #1b2a24;
  --primary-bright: #8ed4b7;
  --gold-soft: #463719;
  --rose: #482b2b;
  --rose-ink: #ffb9b4;
  --winner: #21432f;
  --winner-ink: #a3e5b7;
  --line: #3c5147;
  --danger: #ffaaa3;
  --shadow: 0 16px 40px rgba(0, 0, 0, .25);
}

[data-theme="dark"] .choice-button.secondary,
[data-theme="dark"] .large-input,
[data-theme="dark"] .dealer-option,
[data-theme="dark"] .winner-option,
[data-theme="dark"] .big-button.light,
[data-theme="dark"] .cancel-game-button,
[data-theme="dark"] .refresh-button,
[data-theme="dark"] .matchup-card,
[data-theme="dark"] .history-item,
[data-theme="dark"] .signed-input { background: var(--surface); }
[data-theme="dark"] .total-card:not(.current-winner):not(.current-loser),
[data-theme="dark"] .neutral-field { background: #26382f; }
[data-theme="dark"] .neutral-field .signed-input { background: var(--paper); }
[data-theme="dark"] .dealer-option.selected,
[data-theme="dark"] .winner-option.selected { background: var(--primary); border-color: var(--primary-bright); }
[data-theme="dark"] .icon-button,
[data-theme="dark"] .big-button.light,
[data-theme="dark"] .refresh-button { color: var(--primary-bright); }
[data-theme="dark"] .dealer-badge span,
[data-theme="dark"] .winner-pill,
[data-theme="dark"] .choice-button.secondary .choice-icon { color: #f4d28e; }
[data-theme="dark"] .choice-button.continue { color: #14231f; }
[data-theme="dark"] .signed-input { border-color: var(--line); }
[data-theme="dark"] .pie-chart { border-color: var(--surface); }
[data-theme="dark"] .toast { background: #dbece2; color: #14231f; }
.theme-toggle { font-size: 1.65rem; }

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--paper); }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 100% 0%, rgba(230, 173, 69, 0.17), transparent 28rem),
    var(--paper);
}

button, input, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.app-shell {
  overflow-anchor: none;
  width: min(100%, 760px);
  min-height: 100vh;
  margin: 0 auto;
  padding: calc(24px + env(safe-area-inset-top, 0px)) 20px max(32px, env(safe-area-inset-bottom));
}

.topbar {
  position: relative;
  z-index: 1;
  isolation: isolate;
  transform: translateZ(0);
  display: grid;
  grid-template-columns: 56px 1fr 56px;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
  text-align: center;
}

.topbar h1 { margin: 0; font-family: Georgia, serif; font-size: 2rem; line-height: 1; }
.topbar > #home-button { grid-column: 1; grid-row: 1; }
.topbar > div { grid-column: 2; grid-row: 1; min-width: 0; }
.topbar > .theme-toggle { grid-column: 3; grid-row: 1; }
.eyebrow, .step-label { margin: 0 0 5px; color: var(--primary-bright); font-size: 0.9rem; font-weight: 800; letter-spacing: 0.08em; text-transform: none; }
.topbar .eyebrow { font-size: 0.74rem; }
.topbar-spacer { width: 56px; }

.icon-button {
  display: grid;
  place-items: center;
  padding: 0;
  width: 56px;
  height: 56px;
  border: 2px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  color: var(--primary);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}
.icon-button svg { display: block; }
.home-unavailable { visibility: hidden; pointer-events: none; }

.screen { display: none; animation: rise 220ms ease-out; }
.screen.active { display: block; }
.hidden { display: none !important; }

@keyframes rise { from { opacity: 0; } to { opacity: 1; } }

.welcome-card, .result-card {
  padding: 34px 24px;
  border: 1px solid rgba(23, 63, 54, 0.1);
  border-radius: 30px;
  background: var(--surface);
  box-shadow: var(--shadow);
  text-align: center;
}

.card-mark, .trophy {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin: 0 auto 20px;
  border-radius: 24px;
  background: var(--primary);
  color: white;
  font-family: Georgia, serif;
  font-size: 2.5rem;
  box-shadow: 0 10px 24px rgba(23, 63, 54, 0.2);
}

.welcome-card h2, .section-heading h2, .game-status h2, .result-card h2 {
  margin: 0;
  font-family: Georgia, serif;
  font-size: clamp(2rem, 8vw, 3rem);
  line-height: 1.06;
}

.welcome-card p { max-width: 27rem; margin: 16px auto 0; color: var(--muted); font-size: 1.2rem; line-height: 1.5; }
.home-actions { display: grid; gap: 16px; margin-top: 22px; }

.choice-button {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 92px;
  padding: 18px 22px;
  border: 0;
  border-radius: 24px;
  text-align: left;
  font-size: 1.32rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: var(--shadow);
}

.choice-button.primary { background: var(--primary); color: white; }
.choice-button.continue { background: var(--gold); color: var(--ink); }
.choice-button.secondary { border: 2px solid var(--line); background: white; color: var(--ink); }
.choice-icon { display: grid; flex: 0 0 52px; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: rgba(255,255,255,0.14); font-size: 2rem; }
.choice-button.secondary .choice-icon { background: var(--gold-soft); color: #7d5611; }
.choice-icon svg { display: block; }

.section-heading { display: block; margin-bottom: 22px; }
.game-status, .history-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.panel, .rounds-panel, .loading-card, .history-empty, .history-error { padding: 24px; border: 2px solid var(--line); border-radius: 26px; background: var(--surface); }
.setup-form { display: grid; gap: 13px; }
.field-label, fieldset legend { color: var(--ink); font-size: 1.12rem; font-weight: 800; }
.large-input { width: 100%; min-height: 64px; padding: 10px 16px; border: 2px solid #aebdb7; border-radius: 16px; background: white; color: var(--ink); font-size: 1.35rem; }
.large-input:focus, .signed-input:focus-within { border-color: var(--primary-bright); outline: 4px solid rgba(35, 107, 89, 0.13); }
.dealer-fieldset, .score-form fieldset { margin: 15px 0 0; padding: 0; border: 0; }
.dealer-fieldset legend, .score-form legend { margin-bottom: 12px; }
.dealer-options, .winner-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.dealer-option, .winner-option {
  min-height: 64px;
  padding: 10px;
  border: 2px solid var(--line);
  border-radius: 17px;
  background: white;
  color: var(--ink);
  font-size: 1.1rem;
  font-weight: 800;
  cursor: pointer;
}

.dealer-option.selected, .winner-option.selected { border-color: var(--primary); background: var(--primary); color: white; }
.big-button { width: 100%; min-height: 68px; margin-top: 8px; padding: 14px 18px; border: 0; border-radius: 19px; background: var(--primary); color: white; font-size: 1.25rem; font-weight: 850; cursor: pointer; box-shadow: 0 9px 22px rgba(23,63,54,0.2); }
.big-button.light { border: 2px solid var(--primary); background: white; color: var(--primary); box-shadow: none; }
.cancel-game-button { width: 100%; min-height: 58px; margin-top: 4px; padding: 12px 18px; border: 2px solid #d7a09e; border-radius: 17px; background: white; color: var(--danger); font-size: 1.08rem; font-weight: 850; cursor: pointer; }
.form-error { min-height: 1.4em; margin: 2px 0 -2px; color: var(--danger); font-size: 1rem; font-weight: 750; }

.dealer-badge { flex: 0 0 auto; min-width: 118px; padding: 10px 14px; border-radius: 16px; background: var(--gold-soft); text-align: center; }
.dealer-badge span { display: block; color: #6f531d; font-size: 0.78rem; font-weight: 800; text-transform: none; }
.dealer-badge strong { display: block; margin-top: 2px; font-size: 1.08rem; }
.game-status #hand-count {
  margin: 0;
  color: var(--ink);
  font-family: Georgia, serif;
  font-size: clamp(1.85rem, 7vw, 2.55rem);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.05;
  text-transform: none;
}
.game-status #hand-title {
  margin-top: 7px;
  color: var(--muted);
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 750;
  line-height: 1.3;
}
.totals-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.total-card { padding: 17px; border-radius: 20px; background: #eef2f0; color: var(--ink); }
.total-card span { display: block; overflow: hidden; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.total-card strong { display: block; margin-top: 4px; font-size: 2rem; }
.total-card.current-winner { background: var(--winner); color: var(--winner-ink); }
.total-card.current-loser { background: var(--rose); color: var(--rose-ink); }
.score-form { display: grid; gap: 18px; }
.score-fields { display: grid; gap: 12px; }
.score-field { display: block; padding: 17px; border-radius: 20px; }
.winner-field { background: var(--winner); color: var(--winner-ink); }
.loser-field { background: var(--rose); }
.neutral-field { background: #eef2f0; color: var(--muted); }
.score-role { display: block; margin-bottom: 10px; font-size: 1.02rem; }
.signed-input { display: flex; align-items: center; min-height: 64px; border: 2px solid rgba(20,35,31,0.35); border-radius: 15px; background: white; overflow: hidden; }
.signed-input b { padding-left: 14px; font-size: 1.85rem; }
.signed-input input { width: 100%; min-width: 0; padding: 9px 14px 9px 7px; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 1.7rem; font-weight: 800; }
.neutral-field .signed-input { border-color: var(--line); background: rgba(255, 255, 255, 0.65); }
.neutral-field input:disabled { color: var(--muted); cursor: not-allowed; }
.score-field small { display: block; margin-top: 6px; font-size: 0.9rem; font-weight: 700; }
.rounds-panel { margin-top: 16px; padding: 20px; }
.rounds-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rounds-heading h3 { margin: 0; font-family: Georgia, serif; font-size: 1.35rem; }
.text-button { padding: 9px 4px; border: 0; background: transparent; color: var(--primary-bright); font-size: 1rem; font-weight: 800; text-decoration: underline; cursor: pointer; }
.centered { display: block; margin: 5px auto 0; }
.round-row { display: grid; grid-template-columns: 64px 1fr 1fr; gap: 10px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 1rem; }
.round-row:last-child { border-bottom: 0; }
.round-number { color: var(--muted); font-weight: 800; }
.round-score { text-align: right; font-weight: 850; }
.dealer-icon { display: inline-block; font-size: .85em; vertical-align: baseline; }
.withdraw-options { margin: 0; }
.withdraw-options + .cancel-game-button { margin-top: -10px; }
.withdraw-option { color: var(--danger); }
.match-status { margin: 0 0 16px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--primary-bright); font-weight: 800; line-height: 1.5; }

.result-card { padding-top: 30px; }
.trophy { background: var(--gold); color: var(--primary); }
.result-reason { margin: 14px 0 22px; color: var(--muted); font-size: 1.08rem; line-height: 1.45; }
.final-scores { display: grid; gap: 10px; }
.final-score-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-radius: 17px; background: var(--paper); font-size: 1.1rem; font-weight: 800; }
.final-score-row.result-winner { background: var(--winner); color: var(--winner-ink); }
.final-score-row.result-loser { background: var(--rose); color: var(--rose-ink); }
.final-score-row strong { font-size: 1.45rem; }
.save-status { min-height: 1.5em; margin: 16px 0 0; color: var(--muted); text-align: center; font-size: 1rem; font-weight: 700; }
.stacked-actions { display: grid; gap: 7px; margin-top: 8px; }

.history-heading { align-items: center; }
.refresh-button { min-height: 50px; padding: 9px 15px; border: 2px solid var(--line); border-radius: 15px; background: white; color: var(--primary); font-weight: 800; cursor: pointer; }
.matchup-grid { display: grid; gap: 16px; margin-bottom: 18px; }
.matchup-card { width: 100%; padding: 20px; border: 2px solid var(--line); border-radius: 24px; background: white; color: var(--ink); text-align: center; cursor: pointer; box-shadow: 0 8px 22px rgba(20, 35, 31, 0.06); }
.matchup-card.selected { border-color: var(--primary-bright); box-shadow: 0 0 0 4px rgba(35, 107, 89, 0.14); }
.matchup-card h3 { margin: 0 0 16px; font-family: Georgia, serif; font-size: 1.4rem; }
.chart-format { display: block; margin: 0 0 16px; color: var(--muted); font-family: inherit; font-size: .95rem; font-weight: 750; }
.selected-matchup-heading .chart-format { margin: 6px 0 0; }
.matchup-card.first-wins { --first-chart-color: #75c98a; --second-chart-color: #ef7474; }
.matchup-card.second-wins { --first-chart-color: #ef7474; --second-chart-color: #75c98a; }
.matchup-card.tied-matchup { --first-chart-color: #71807a; --second-chart-color: #b5c0bc; }
.pie-chart { position: relative; width: 170px; height: 170px; margin: 0 auto 18px; border: 5px solid white; border-radius: 50%; background: conic-gradient(var(--first-chart-color) 0 var(--first-share), var(--second-chart-color) var(--first-share) 100%); box-shadow: 0 0 0 2px var(--line), 0 10px 22px rgba(20, 35, 31, 0.12); }
.pie-chart.no-wins { background: #dfe6e3; }
.pie-total { position: absolute; top: var(--label-y); left: var(--label-x); color: white; font-size: 2.5rem; font-weight: 900; line-height: 1; text-shadow: 0 2px 5px rgba(20, 35, 31, 0.25); transform: translate(-50%, -50%); }
.pie-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 18px; }
.pie-legend span { display: flex; gap: 7px; align-items: center; }
.pie-legend b { overflow: hidden; max-width: 10rem; text-overflow: ellipsis; white-space: nowrap; }
.pie-key { display: block; width: 14px; height: 14px; border: 1px solid rgba(20, 35, 31, 0.2); border-radius: 50%; }
.pie-key.first-player { background: var(--first-chart-color); }
.pie-key.second-player { background: var(--second-chart-color); }
.tie-count { display: inline-block; margin-top: 12px; padding: 5px 10px; border-radius: 999px; background: var(--paper); color: var(--muted); font-weight: 800; }
.tap-hint { display: block; margin-top: 14px; color: var(--primary-bright); font-size: 0.95rem; font-weight: 850; text-decoration: underline; }
.matchup-history { scroll-margin-top: 18px; }
.selected-matchup-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 24px 2px 12px; }
.selected-matchup-heading h3 { margin: 0; font-family: Georgia, serif; font-size: 1.5rem; }
.selected-matchup-heading p { margin: 0; color: var(--muted); font-weight: 800; }
.history-list { display: grid; gap: 12px; }
.history-item { border: 2px solid var(--line); border-radius: 21px; background: white; overflow: hidden; }
.history-item summary { padding: 18px; list-style: none; cursor: pointer; }
.history-item summary::-webkit-details-marker { display: none; }
.history-summary-top, .history-score-line { display: flex; justify-content: space-between; gap: 12px; }
.history-summary-top { align-items: flex-start; }
.history-summary-top strong { font-size: 1.18rem; }
.history-date { color: var(--muted); font-size: 0.92rem; }
.winner-pill { flex: 0 0 auto; padding: 5px 9px; border-radius: 999px; background: var(--gold-soft); color: #64460f; font-size: 0.8rem; font-weight: 850; }
.history-score-line { margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--line); font-size: 1rem; font-weight: 750; }
.history-detail { padding: 0 18px 18px; }
.history-detail .round-row { grid-template-columns: 58px 1fr 1fr; }
.loading-card, .history-empty, .history-error { color: var(--muted); font-size: 1.1rem; line-height: 1.45; text-align: center; }
.history-error { color: var(--danger); }
.toast { position: fixed; right: 18px; bottom: max(18px, env(safe-area-inset-bottom)); left: 18px; z-index: 10; max-width: 540px; margin: auto; padding: 16px 20px; border-radius: 16px; background: var(--ink); color: white; text-align: center; font-size: 1rem; font-weight: 750; box-shadow: var(--shadow); }

button:focus-visible, input:focus-visible { outline: 4px solid rgba(230, 173, 69, 0.65); outline-offset: 3px; }
button:active { transform: translateY(1px); }
button:disabled { cursor: not-allowed; opacity: 0.5; transform: none; }

@media (min-width: 620px) {
  .app-shell { padding-right: 32px; padding-left: 32px; }
  .home-actions { grid-template-columns: 1fr 1fr; }
  .choice-button.continue { grid-column: 1 / -1; }
  .choice-button { min-height: 110px; }
  .score-fields { grid-template-columns: 1fr 1fr; }
  .matchup-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; }
}

.hand-welcome { padding:0; overflow:hidden; }
.game-hero { display:block; width:100%; height:auto; aspect-ratio:1672 / 941; object-fit:cover; }
.welcome-copy { padding:24px; }