:root {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #182329;
  background: #f2f5f3;
  line-height: 1.6;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; }
[hidden] { display: none !important; }
.game { width: min(100%, 560px); margin: 0 auto; padding: 24px 16px; }
h1 { margin: 0 0 20px; font-size: 1.75rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1rem; }
.scoreboard { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.scoreboard p { margin: 0; padding: 12px; background: white; border: 1px solid #c8d3cd; border-radius: 12px; }
.scoreboard strong { display: block; font-size: 2rem; }
#progress, .legend { color: #4e5f57; }
.status { min-height: 3.2em; font-size: .95rem; }
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
button { font: inherit; cursor: pointer; touch-action: manipulation; min-height: 48px; }
button:focus-visible { outline: 3px solid #245edb; outline-offset: 4px; }
button:disabled { cursor: default; }
.card { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px 8px; background: white; border: 2px solid #a4b7aa; border-radius: 14px; color: inherit; }
.card:not(:disabled):hover { border-color: #246544; background: #f8fcf9; }
.card:disabled { background: #edf1ee; }
.card-label { font-weight: 700; }
.card-value { display: block; font-size: 1.1rem; }
.card-value strong { font-size: 1.8rem; }
.green { color: #216539; }
.red { color: #b32932; }
.primary, .secondary { width: 100%; border-radius: 10px; padding: 12px; font-weight: 700; }
.primary { background: #246544; color: white; border: 2px solid #246544; }
.secondary { background: white; border: 1px solid #9cadA2; color: #253b2f; }
footer { margin-top: 28px; }
.result-group { background: white; border: 1px solid #c8d3cd; border-radius: 12px; padding: 14px; margin-top: 12px; }
.result-group h3 { margin: 0 0 12px; }
.coin-results { display: flex; flex-wrap: wrap; gap: 8px; }
.coin { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; font-weight: 700; border: 1px solid; }
.coin.success { background: #d9efe0; color: #19512d; border-color: #83ad91; }
.coin.failure { background: #edf0f2; color: #505d66; border-color: #b7c0c6; }

.game-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-bottom: 16px; font-weight: 700; color: #365743; }

.actions { display: grid; gap: 12px; }
.stats-summary { display: grid; gap: 10px; margin: 20px 0; }
.stats-summary > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: white; border: 1px solid #c8d3cd; border-radius: 12px; padding: 12px 16px; }
.stats-summary dd { margin: 0; font-size: 1.5rem; font-weight: 700; }
.danger { color: #a1232c; border-color: #b67b80; }
.notice { padding: 12px; background: #fff4d4; color: #654a12; border: 1px solid #d8bc70; border-radius: 10px; }