:root {
    --light-sq: #c8a97e;
    --dark-sq: #4a7c59;
    --highlight: rgba(255,255,0,0.45);
    --move-dot: rgba(0,0,0,0.25);
    --capture-ring: rgba(200,0,0,0.4);
    --check-red: rgba(255,0,0,0.55);
    --bg: #1a1208;
    --panel: #221a0d;
    --gold: #c9a84c;
    --gold2: #f0d080;
    --text: #f0e8d0;
    --text-dim: #8a7a60;
    --white-score: #f5f0e8;
    --black-score: #2a2a2a;
    --board-border: #8a6a30;
    --btn-green: #3a6b3a;
    --btn-red: #7a2a2a;
  }

  * { margin:0; padding:0; box-sizing:border-box; }

  body {
    font-family: 'Lato', sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow-x: hidden;
  }

  body::before {
    content:'';
    position:fixed; inset:0;
    background: radial-gradient(ellipse at 50% 0%, #3a2a0a 0%, #1a1208 60%);
    z-index:-1;
  }

  
  #menu {
    display:flex; flex-direction:column; align-items:center;
    gap:32px; padding:60px 40px;
    animation: fadeIn .6s ease;
  }

  .logo {
    font-family:'Cinzel',serif;
    font-size:clamp(2.5rem,6vw,4.5rem);
    font-weight:900;
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold2) 50%, var(--gold) 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    letter-spacing:.08em;
    text-shadow: none;
    filter: drop-shadow(0 0 18px #c9a84c66);
  }

  .logo-sub {
    font-family:'Cinzel',serif;
    font-size:1rem; letter-spacing:.35em;
    color:var(--text-dim); text-transform:uppercase;
    margin-top:-20px;
  }

  .crown { font-size:3rem; filter: drop-shadow(0 0 12px #c9a84c99); }

  .menu-btns { display:flex; flex-direction:column; gap:16px; width:280px; }

  .menu-btn {
    padding:18px 32px;
    border:2px solid var(--gold);
    background: linear-gradient(135deg, #2a1e08 0%, #1a1208 100%);
    color: var(--gold2);
    font-family:'Cinzel',serif;
    font-size:1.1rem; font-weight:600;
    letter-spacing:.1em;
    border-radius:4px;
    cursor:pointer;
    transition: all .25s ease;
    position:relative; overflow:hidden;
  }

  .menu-btn::before {
    content:''; position:absolute; inset:0;
    background: linear-gradient(135deg, var(--gold) 0%, transparent 100%);
    opacity:0; transition: opacity .25s;
  }

  .menu-btn:hover::before { opacity:.15; }
  .menu-btn:hover { transform:translateY(-2px); box-shadow:0 8px 24px #c9a84c44; }
  .menu-btn:active { transform:translateY(0); }

  
  #game {
    display:none;
    flex-direction:row;
    align-items:flex-start;
    gap:24px;
    padding:20px;
    animation: fadeIn .4s ease;
  }

  
  .side-panel {
    width:200px;
    display:flex; flex-direction:column; gap:14px;
  }

  .player-card {
    background: var(--panel);
    border:1px solid #3a2e1a;
    border-radius:8px;
    padding:14px 16px;
    position:relative;
  }

  .player-card.active-turn {
    border-color: var(--gold);
    box-shadow: 0 0 16px #c9a84c44;
  }

  .player-card.active-turn::before {
    content:'▶';
    position:absolute; right:12px; top:50%;
    transform:translateY(-50%);
    color:var(--gold); font-size:.8rem;
  }

  .player-name {
    font-family:'Cinzel',serif;
    font-size:.85rem; letter-spacing:.08em;
    color:var(--text-dim); margin-bottom:6px;
  }

  .player-score {
    font-family:'Cinzel',serif;
    font-size:2rem; font-weight:900;
    color:var(--gold2);
  }

  .player-pieces {
    font-size:.75rem; color:var(--text-dim);
    margin-top:4px; min-height:18px;
    word-break: break-all;
  }

  .captured-icon { font-size:.85rem; }

  .status-box {
    background:var(--panel);
    border:1px solid #3a2e1a;
    border-radius:8px;
    padding:12px 16px;
    text-align:center;
  }

  .status-label {
    font-family:'Cinzel',serif;
    font-size:.75rem; letter-spacing:.1em;
    color:var(--text-dim); margin-bottom:4px;
  }

  .status-value {
    font-family:'Cinzel',serif;
    font-size:1rem; color:var(--text);
  }

  .check-warning {
    color:#ff6060 !important;
    animation: pulse 1s infinite;
  }

  .side-btns { display:flex; flex-direction:column; gap:8px; }

  .side-btn {
    padding:10px 14px;
    border-radius:4px; border:1px solid;
    font-family:'Cinzel',serif; font-size:.78rem;
    letter-spacing:.06em; cursor:pointer;
    transition: all .2s;
  }

  .btn-reset {
    border-color: var(--btn-green);
    background:#1a2e1a; color:#80cc80;
  }
  .btn-reset:hover { background:#2a4a2a; }

  .btn-exit {
    border-color: var(--btn-red);
    background:#2e1a1a; color:#cc8080;
  }
  .btn-exit:hover { background:#4a2a2a; }

  
  .board-area {
    display:flex; flex-direction:column; align-items:center; gap:10px;
  }

  .board-wrapper {
    border:6px solid var(--board-border);
    border-radius:4px;
    box-shadow: 0 0 0 2px #c9a84c33,
                0 24px 60px rgba(0,0,0,.8),
                inset 0 0 30px rgba(0,0,0,.3);
    position:relative;
  }

  .board-outer {
    display:flex; flex-direction:column;
  }

  .board-row { display:flex; }

  .rank-label, .file-label {
    font-family:'Cinzel',serif;
    font-size:.65rem; font-weight:600;
    color:var(--board-border);
    display:flex; align-items:center; justify-content:center;
    user-select:none;
  }

  .rank-label { width:20px; }
  .file-label { height:20px; flex:1; }

  .file-labels-row { display:flex; padding-left:20px; }

  #board {
    display:grid;
    grid-template-columns: repeat(8, 68px);
    grid-template-rows: repeat(8, 68px);
  }

  .sq {
    width:68px; height:68px;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    position:relative;
    transition: background .1s;
  }

  .sq.light { background: var(--light-sq); }
  .sq.dark  { background: var(--dark-sq); }
  .sq.selected { background: var(--highlight); }
  .sq.in-check  { background: var(--check-red); }

  .sq .move-dot {
    width:22px; height:22px; border-radius:50%;
    background:var(--move-dot);
    pointer-events:none;
  }

  .sq .capture-ring {
    position:absolute; inset:3px;
    border-radius:50%;
    border:4px solid var(--capture-ring);
    pointer-events:none;
  }

  .piece {
    width:54px; height:54px;
    user-select:none;
    transition: transform .15s cubic-bezier(.34,1.56,.64,1), filter .15s;
    position:relative; z-index:1;
    display:flex; align-items:center; justify-content:center;
  }

  .piece svg {
    width:100%; height:100%;
    overflow:visible;
  }

  
  .piece.white svg {
    filter: drop-shadow(0 0 6px rgba(255,240,180,0.9))
            drop-shadow(0 2px 8px rgba(0,0,0,0.7));
  }

  
  .piece.black svg {
    filter: drop-shadow(0 0 6px rgba(80,160,255,0.85))
            drop-shadow(0 2px 8px rgba(0,0,0,0.8));
  }

  .sq:hover .piece { transform:scale(1.13); }
  .sq:hover .piece.white svg { filter: drop-shadow(0 0 12px rgba(255,230,100,1)) drop-shadow(0 3px 10px rgba(0,0,0,0.8)); }
  .sq:hover .piece.black svg { filter: drop-shadow(0 0 12px rgba(80,180,255,1))  drop-shadow(0 3px 10px rgba(0,0,0,0.8)); }

  
  .right-panel {
    width:200px;
    display:flex; flex-direction:column; gap:14px;
  }

  .move-log-box {
    background:var(--panel);
    border:1px solid #3a2e1a;
    border-radius:8px;
    padding:12px;
    flex:1;
    max-height:480px;
  }

  .move-log-title {
    font-family:'Cinzel',serif;
    font-size:.75rem; letter-spacing:.1em;
    color:var(--text-dim); margin-bottom:8px;
    text-align:center;
  }

  .move-log {
    height:400px; overflow-y:auto;
    font-size:.75rem; color:var(--text-dim);
    line-height:1.8;
  }

  .move-log::-webkit-scrollbar { width:4px; }
  .move-log::-webkit-scrollbar-track { background:transparent; }
  .move-log::-webkit-scrollbar-thumb { background:#3a2e1a; border-radius:2px; }

  .move-entry { color:var(--text); }
  .move-entry span { color:var(--text-dim); margin-right:4px; }

  .special-badge {
    font-size:.65rem; padding:1px 5px;
    background:#2a4a1a; color:#80cc80;
    border-radius:3px; margin-left:4px;
  }

  
  #promotion-modal {
    display:none;
    position:fixed; inset:0;
    background:rgba(0,0,0,.75);
    z-index:100;
    align-items:center; justify-content:center;
  }

  #promotion-modal.show { display:flex; }

  .promo-box {
    background:var(--panel);
    border:2px solid var(--gold);
    border-radius:10px;
    padding:28px 36px;
    text-align:center;
  }

  .promo-title {
    font-family:'Cinzel',serif;
    font-size:1.1rem; color:var(--gold2);
    margin-bottom:20px; letter-spacing:.1em;
  }

  .promo-pieces { display:flex; gap:12px; justify-content:center; }

  .promo-piece {
    font-size:52px; cursor:pointer;
    padding:8px; border-radius:6px;
    border:2px solid transparent;
    transition: all .2s;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.5));
  }

  .promo-piece:hover {
    border-color:var(--gold);
    background:#3a2e1a;
    transform:scale(1.1);
  }

  
  #win-overlay {
    display:none;
    position:fixed; inset:0;
    background:rgba(0,0,0,.85);
    z-index:200;
    align-items:center; justify-content:center;
    flex-direction:column;
  }

  #win-overlay.show { display:flex; }

  .win-banner {
    background: linear-gradient(135deg, #1a1208 0%, #2a1e08 100%);
    border:3px solid var(--gold);
    border-radius:16px;
    padding:48px 64px;
    text-align:center;
    position:relative;
    overflow:hidden;
    animation: bannerPop .5s cubic-bezier(.34,1.56,.64,1);
    box-shadow: 0 0 60px #c9a84c66, 0 32px 80px rgba(0,0,0,.8);
  }

  .win-banner::before {
    content:'';
    position:absolute; inset:0;
    background: radial-gradient(ellipse at 50% 0%, #c9a84c22 0%, transparent 70%);
  }

  .win-crown { font-size:4rem; animation: float 2s ease-in-out infinite; }

  .win-title {
    font-family:'Cinzel',serif;
    font-size:2.5rem; font-weight:900;
    background:linear-gradient(135deg,var(--gold),var(--gold2),var(--gold));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    margin:12px 0;
    filter: drop-shadow(0 0 20px #c9a84c);
  }

  .win-subtitle {
    font-family:'Cinzel',serif;
    font-size:1rem; letter-spacing:.2em;
    color:var(--text-dim);
  }

  .win-scores {
    display:flex; gap:40px; margin:28px 0;
    justify-content:center;
  }

  .win-score-card {
    text-align:center;
    padding:16px 24px;
    background:rgba(255,255,255,.04);
    border-radius:8px;
    border:1px solid #3a2e1a;
  }

  .win-score-label {
    font-family:'Cinzel',serif;
    font-size:.75rem; color:var(--text-dim);
    letter-spacing:.1em;
  }

  .win-score-val {
    font-family:'Cinzel',serif;
    font-size:2rem; font-weight:900; color:var(--gold2);
  }

  .win-actions { display:flex; gap:16px; justify-content:center; margin-top:8px; }

  .win-btn {
    padding:14px 28px;
    border-radius:6px; border:2px solid;
    font-family:'Cinzel',serif; font-size:.9rem;
    letter-spacing:.1em; cursor:pointer;
    transition:all .2s;
  }

  .win-btn-reset {
    border-color:var(--btn-green); background:#1a2e1a; color:#80cc80;
  }
  .win-btn-reset:hover { background:#2a4a2a; transform:translateY(-2px); }

  .win-btn-exit {
    border-color:var(--btn-red); background:#2e1a1a; color:#cc8080;
  }
  .win-btn-exit:hover { background:#4a2a2a; transform:translateY(-2px); }

  .countdown {
    font-family:'Cinzel',serif;
    font-size:.8rem; color:var(--text-dim);
    margin-top:14px;
  }

  /* confetti */
  .confetti-container {
    position:fixed; inset:0; pointer-events:none; z-index:201;
    overflow:hidden;
  }

  .confetti-piece {
    position:absolute;
    width:10px; height:10px;
    border-radius:2px;
    animation: confettiFall linear forwards;
  }

  
  .thinking-indicator {
    font-family:'Cinzel',serif;
    font-size:.78rem; color:var(--gold);
    letter-spacing:.1em; text-align:center;
    animation: pulse 1.2s infinite;
  }

 
  .turn-bar {
    font-family:'Cinzel',serif;
    font-size:.85rem; letter-spacing:.15em;
    color:var(--text-dim);
    text-align:center;
  }

  
  @keyframes fadeIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
  @keyframes pulse  { 0%,100% { opacity:1; } 50% { opacity:.5; } }
  @keyframes float  { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-12px); } }
  @keyframes bannerPop { from { transform:scale(.5); opacity:0; } to { transform:scale(1); opacity:1; } }

  @keyframes confettiFall {
    0%   { transform:translateY(-20px) rotate(0deg); opacity:1; }
    100% { transform:translateY(110vh) rotate(720deg); opacity:0; }
  }

  
  .mode-badge {
    font-family:'Cinzel',serif;
    font-size:.7rem; letter-spacing:.12em;
    color:var(--text-dim);
    background:var(--panel);
    border:1px solid #3a2e1a;
    border-radius:4px;
    padding:4px 10px;
  }

 
  @media (max-width: 720px) {
    #game { flex-direction:column; align-items:center; }
    .side-panel, .right-panel { width:100%; max-width:400px; flex-direction:row; flex-wrap:wrap; }
    #board { grid-template-columns:repeat(8,42px); grid-template-rows:repeat(8,42px); }
    .sq { width:42px; height:42px; }
    .piece { font-size:26px; }
  }