:root {
    --bg: #1a1f2b;
    --panel: #242b3a;
    --light-sq: #ecd6b0;
    --dark-sq: #9c6b48;
    --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 {
    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; }

  .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%, #4a4a52, #101014 70%); }
  .disc.red { background: radial-gradient(circle at 35% 30%, #ff7a6e, #a31f12 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-wrap {
    background: #3d2417;
    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-radius: 6px;
    overflow: hidden;
  }
  .cell { background: var(--light-sq); position: relative; }
  .cell.dark { background: var(--dark-sq); }
  .cell.selectable { cursor: pointer; }
  .cell.movable-piece { box-shadow: inset 0 0 0 3px rgba(255,255,255,.45); }
  .cell.selected { box-shadow: inset 0 0 0 4px var(--gold); }
  .cell.target { cursor: pointer; }
  .cell.target::after {
    content: '';
    position: absolute;
    inset: 36%;
    border-radius: 50%;
    background: rgba(255,255,255,.45);
    transition: inset .12s;
    z-index: 3;
  }
  .cell.target:hover::after { inset: 28%; }
  .cell.last-from::before, .cell.last-to::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(79,156,255,.28);
  }
  .piece {
    position: absolute;
    inset: 11%;
    border-radius: 50%;
    box-shadow: 0 3px 7px rgba(0,0,0,.55), inset 0 -4px 6px rgba(0,0,0,.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
  }
  .piece.black { background: radial-gradient(circle at 35% 30%, #55555e, #0e0e12 72%); }
  .piece.red { background: radial-gradient(circle at 35% 30%, #ff8478, #9c1d10 72%); }
  .piece .crown { font-size: clamp(14px, 4.2vw, 30px); color: var(--gold); text-shadow: 0 1px 2px rgba(0,0,0,.7); }
  .piece.drop { animation: drop .28s ease; }
  @keyframes drop { 0% { transform: scale(.4); opacity: .2; } 100% { transform: scale(1); opacity: 1; } }

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