:root {
    --bg: #1a1f2b;
    --panel: #242b3a;
    --board: #1f7a4d;
    --board-dark: #196540;
    --line: #145234;
    --text: #e8ecf3;
    --muted: #9aa5b8;
    --accent: #4f9cff;
    --gold: #ffd166;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px;
  }
  h1 { font-size: 1.6rem; letter-spacing: 2px; margin: 8px 0 14px; font-weight: 600; }
  h1 span { color: var(--accent); }

  .layout { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; align-items: flex-start; }

  /* ---------- Panel ---------- */
  .panel {
    background: var(--panel);
    border-radius: 14px;
    padding: 18px;
    width: 260px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 6px 24px rgba(0,0,0,.35);
  }
  .panel label { font-size: .75rem; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); display: block; margin-bottom: 6px; }
  select, button {
    width: 100%;
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px solid #37415a;
    background: #2e3750;
    color: var(--text);
    font-size: .92rem;
    cursor: pointer;
  }
  select:focus, button:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
  button.primary { background: var(--accent); border-color: var(--accent); color: #0b1524; font-weight: 700; }
  button.primary:hover { filter: brightness(1.1); }
  button:hover { filter: brightness(1.15); }
  button:disabled { opacity: .45; cursor: not-allowed; filter: none; }
  .row2 { display: flex; gap: 8px; }
  .hidden { display: none !important; }

  /* ---------- Scoreboard ---------- */
  .scores { display: flex; gap: 10px; }
  .score-card {
    flex: 1;
    background: #2e3750;
    border-radius: 10px;
    padding: 10px 8px;
    text-align: center;
    border: 2px solid transparent;
    transition: border-color .25s, box-shadow .25s;
  }
  .score-card.active { border-color: var(--gold); box-shadow: 0 0 12px rgba(255,209,102,.25); }
  .score-card .disc { width: 26px; height: 26px; border-radius: 50%; margin: 0 auto 6px; }
  .disc.black { background: radial-gradient(circle at 35% 30%, #555, #0a0a0a 70%); }
  .disc.white { background: radial-gradient(circle at 35% 30%, #fff, #c9ced6 70%); }
  .score-card .num { font-size: 1.5rem; font-weight: 700; }
  .score-card .who { font-size: .68rem; color: var(--muted); margin-top: 2px; min-height: 1em; }

  .status {
    text-align: center;
    font-size: .95rem;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2e3750;
    border-radius: 10px;
    padding: 8px;
  }
  .status.flash { color: var(--gold); font-weight: 600; }

  /* ---------- Board ---------- */
  .board-wrap {
    background: #0f3d27;
    padding: 12px;
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(0,0,0,.45);
  }
  #board {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
    width: min(88vw, 560px);
    height: min(88vw, 560px);
    border: 2px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
  }
  .cell {
    background: var(--board);
    border: 1px solid var(--line);
    position: relative;
    cursor: default;
  }
  .cell:nth-child(16n+2), .cell:nth-child(16n+4), .cell:nth-child(16n+6), .cell:nth-child(16n+8),
  .cell:nth-child(16n+9), .cell:nth-child(16n+11), .cell:nth-child(16n+13), .cell:nth-child(16n+15) {
    background: var(--board-dark);
  }
  .cell.legal { cursor: pointer; }
  .cell.legal::after {
    content: '';
    position: absolute;
    inset: 38%;
    border-radius: 50%;
    background: rgba(255,255,255,.22);
    transition: inset .12s, background .12s;
  }
  .cell.legal:hover::after { inset: 30%; background: rgba(255,255,255,.38); }
  .piece {
    position: absolute;
    inset: 9%;
    border-radius: 50%;
    box-shadow: 0 3px 6px rgba(0,0,0,.5);
    transition: transform .25s;
  }
  .piece.black { background: radial-gradient(circle at 35% 30%, #5a5a5a, #090909 72%); }
  .piece.white { background: radial-gradient(circle at 35% 30%, #ffffff, #c4cad4 72%); }
  .piece.flip { animation: flip .38s ease; }
  @keyframes flip {
    0% { transform: rotateY(0) scale(1); }
    50% { transform: rotateY(90deg) scale(1.08); }
    100% { transform: rotateY(0) scale(1); }
  }
  .piece.drop { animation: drop .28s ease; }
  @keyframes drop {
    0% { transform: scale(.3); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
  }
  .cell.last-move::before {
    content: '';
    position: absolute;
    inset: 42%;
    border-radius: 50%;
    background: #ff5d5d;
    z-index: 2;
  }

  /* ---------- Overlay ---------- */
  #overlay {
    position: fixed;
    inset: 0;
    background: rgba(10,14,22,.72);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
  }
  #overlay .modal {
    background: var(--panel);
    border-radius: 16px;
    padding: 32px 40px;
    text-align: center;
    box-shadow: 0 12px 48px rgba(0,0,0,.6);
    animation: pop .3s ease;
  }
  @keyframes pop { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
  #overlay h2 { margin-bottom: 8px; color: var(--gold); }
  #overlay p { color: var(--muted); margin-bottom: 18px; }
  #overlay button { width: auto; padding: 10px 28px; }

  .speed-row { display: flex; align-items: center; gap: 10px; }
  .speed-row input { flex: 1; accent-color: var(--accent); }
  .footer-note { font-size: .7rem; color: var(--muted); text-align: center; }