:root {
  --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;
}

* { 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 { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

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

.topbar {
  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; }
.eyebrow, .step-label { margin: 0 0 5px; color: var(--primary-bright); font-size: 0.9rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.topbar .eyebrow { font-size: 0.74rem; }
.topbar-spacer { width: 56px; }

.icon-button {
  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;
}

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

@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.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; }

.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: uppercase; }
.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; }

.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; }
.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; }
}

select.large-input { width:100%; background:white; color:var(--ink); margin-bottom:18px; }
#player-fields .large-input { margin-bottom:18px; }
.winner-options { grid-template-columns:repeat(2,minmax(0,1fr)); }
.total-card.eliminated { opacity:.6; }
.total-card small { display:block; margin-top:8px; }
#game-notice { line-height:1.6; }
.round-row { flex-wrap:wrap; gap:8px; }
#first-loser-choice { margin-top:20px; }

.history-chart-row { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.history-chart-text { min-width:0; flex:1; }
.history-chart { flex:none; width:140px; text-align:center; }
.history-pie { width:112px; height:112px; margin:0 auto 10px; border-radius:50%; border:3px solid white; box-shadow:0 0 0 1px var(--line); }
.chart-caption { color:var(--muted); font-size:.8rem; font-weight:700; }
.history-color { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:7px; }
.score-chart-legend { display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:14px; font-size:.8rem; color:var(--muted); }
@media(max-width:480px) { .history-chart-row { gap:10px; } .history-chart { width:100px; } .history-pie { width:84px; height:84px; } .history-chart-text { font-size:.85rem; } }

.history-pie { position:relative; border:5px solid white; box-shadow:0 0 0 2px var(--line), 0 10px 22px rgba(20,35,31,.12); }
.history-pie .pie-total { font-size:1.9rem; }
@media(max-width:480px) { .history-pie .pie-total { font-size:1.45rem; } }

.zero-win-players { display:grid; gap:6px; margin-top:12px; text-align:left; font-size:.75rem; color:var(--muted); }
.zero-win-player { display:block; overflow-wrap:anywhere; }
.zero-win-player .history-color { width:8px; height:8px; margin-right:4px; }

.history-pie .pie-total { font-size:calc(1.9rem * var(--label-scale, 1)); }
@media(max-width:480px) { .history-pie .pie-total { font-size:calc(1.45rem * var(--label-scale, 1)); } }

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

: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; }


:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
.choice-icon { display: grid; place-items: center; }
.choice-icon svg, .icon-button svg { display: block; }
.icon-button { display: grid; place-items: center; }
#home-button.hidden { display: grid !important; visibility: hidden; }
.dealer-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; font-size: 20px; line-height: 1; vertical-align: middle; }
.dealer-turn { font-weight:800; color:var(--primary-bright); }
.withdraw-panel { margin-top:20px; }
.withdraw-option { color:var(--danger); }

[data-theme="dark"] .history-pie { border-color:var(--surface); }