:root {
    --bg: #1d2417;
    --bg2: #283019;
    --gold: #E8BB77;
    --cream: #F6F0E4;
    --line: #4a5638;
    --raccoon: #b9c4cf;
    --bobcat: #d89a52;
  }
  * { box-sizing: border-box; }
  body {
    margin: 0;
    min-height: 100vh;
    background: radial-gradient(circle at 50% 0%, var(--bg2), var(--bg));
    color: var(--cream);
    font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 24px 16px 48px;
  }
  h1 {
    font-size: clamp(1.6rem, 5vw, 2.6rem);
    margin: 8px 0 2px;
    text-align: center;
    color: var(--gold);
    letter-spacing: 1px;
    text-shadow: 0 2px 0 rgba(0,0,0,.4);
  }
  .subtitle { margin: 0 0 18px; opacity: .8; font-size: .95rem; }

  .status {
    font-size: 1.3rem;
    min-height: 1.6em;
    margin-bottom: 16px;
    font-weight: bold;
    text-align: center;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .status .chip { width: 34px; height: 34px; }

  .board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    background: var(--line);
    padding: 10px;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,.45);
    width: min(92vw, 380px);
    aspect-ratio: 1 / 1;
  }
  .cell {
    background: var(--bg2);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12%;
    transition: background .15s, transform .1s;
  }
  .cell:hover:not(.filled) { background: #344020; }
  .cell:active:not(.filled) { transform: scale(.96); }
  .cell.filled { cursor: default; }
  .cell svg { width: 100%; height: 100%; animation: pop .25s ease-out; }
  .cell.win { background: var(--gold); }
  @keyframes pop { from { transform: scale(.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }

  .scoreboard {
    display: flex;
    gap: 28px;
    margin: 22px 0 4px;
  }
  .score {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
  .score .chip { width: 46px; height: 46px; }
  .score .num { font-size: 1.5rem; font-weight: bold; color: var(--gold); }
  .score .name { font-size: .8rem; opacity: .8; }

  button.reset {
    margin-top: 22px;
    background: var(--gold);
    color: var(--bg);
    border: none;
    border-radius: 999px;
    padding: 12px 28px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 0 #b8884a;
    transition: transform .08s;
  }
  button.reset:active { transform: translateY(2px); box-shadow: 0 2px 0 #b8884a; }