:root{
  /* Board colors: chess.com style */
  --light:#f0d9b5; --dark:#b58863;

  /* UI */
  --bg:#0a0a0a; --panel:#111; --border:#222; --muted:#bbb; --text:#eee;
  --accent:#f6f669; --last:#f7ec8b; --check:#ff5252; --ring:rgba(0,0,0,.33); --dot:rgba(0,0,0,.23);

  --radius:12px;
}

*{box-sizing:border-box}

/* ===== Page skeleton (no body scroll) ===== */
html,body{height:100%; margin:0; background:var(--bg); color:var(--text); font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
body{
  height:100vh;
  overflow:hidden;            /* lock page scroll */
  display:grid;
  grid-template-rows:auto 1fr auto; /* header | main | footer */
}

/* ===== Header ===== */
.site-header{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-bottom:1px solid var(--border); background:#0e0e0e}
.brand{display:flex; gap:12px; align-items:baseline; flex-wrap:wrap}
.logo{font-weight:800; font-size:1.4rem; letter-spacing:.3px}
.logo span{color:var(--accent)}
.tagline{opacity:.75; font-size:.95rem}
.ad-header{min-height:90px; display:flex; align-items:center; justify-content:center; background:#101010; border:1px dashed #333; border-radius:10px; padding:8px}
.ad-placeholder{opacity:.6; font-size:.9rem}

/* ===== Main (board + sidebar) ===== */
.app{
  display:grid;
  grid-template-columns:minmax(0,1fr) 370px; /* board | sidebar */
  gap:0;
  min-height:0; /* allow children to shrink */
}
@media (max-width: 980px){
  .app{grid-template-columns:1fr}
  .ad-header{min-height:0}
}

.board-wrap{display:flex; align-items:center; justify-content:center; padding:10px; min-height:0; height:100%}

/* Board */
.board{position:relative; aspect-ratio:1; height:100%; max-width:100%; border:2px solid #333; border-radius:var(--radius); overflow:hidden; background:#000}
.grid{display:grid; grid-template-columns:repeat(8,1fr); grid-template-rows:repeat(8,1fr); width:100%; height:100%}
.sq{position:relative; display:flex; align-items:center; justify-content:center; user-select:none}
.light{background:var(--light)} .dark{background:var(--dark)}
.sq.last{box-shadow: inset 0 0 0 100vmax var(--last)}
.sq.select{box-shadow: inset 0 0 0 100vmax var(--accent)}
.sq.in-check{box-shadow: inset 0 0 0 100vmax var(--check)}
.dot{position:absolute; width:34%; height:34%; border-radius:50%; background:var(--dot); pointer-events:none}
.cap{position:absolute; inset:6%; border-radius:10px; box-shadow: inset 0 0 0 6px var(--ring); pointer-events:none}
.coord{position:absolute; font-size:.62rem; opacity:.6; color:#000}
.coord.file{ right:6px; bottom:4px } .coord.rank{ left:6px; top:4px }
.piece-img{width:86%; height:86%; object-fit:contain; pointer-events:none}
@media (max-width: 680px){ .piece-img{width:90%; height:90%} }

/* Controls overlay on the board */
.board-controls{position:absolute; inset:auto 10px 10px 10px; display:flex; justify-content:space-between; gap:8px; pointer-events:none}
.board-controls .left, .board-controls .right{display:flex; gap:8px; pointer-events:auto; flex-wrap:wrap}
.btn{background:#1e1e1e; color:#eee; border:1px solid #323232; border-radius:10px; padding:.55rem .8rem; cursor:pointer}
.btn:hover{filter:brightness(1.08)}
.btn.sm{padding:.4rem .55rem; font-size:.9rem}
.btn.ghost{background:transparent; border:1px dashed #3a3a3a}
.input{background:#0f0f0f; color:#eee; border:1px solid #2c2c2c; border-radius:10px; padding:.5rem .6rem}

/* ===== Sidebar ===== */
.side{background:var(--panel); border-left:1px solid var(--border); display:flex; flex-direction:column; min-height:0; overflow:hidden}
.pad{padding:14px 16px}
.top{display:flex; align-items:center; justify-content:space-between; gap:10px}
.turn{opacity:.85}
.label{opacity:.8}
.clockbox{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px}
.clock{background:#0c0c0c; border:1px solid #2b2b2b; border-radius:10px; padding:10px; text-align:center; font-variant-numeric:tabular-nums; font-size:1.6rem}
.dead{opacity:.35}
.status{min-height:1.4em; margin-top:8px; color:#ddd}

/* Ad & sections */
.section{border-top:1px solid var(--border); margin-top:10px}
h3{font-size:.95rem; font-weight:700; margin:.6rem 0}
.ad-rect{min-height:250px; display:flex; align-items:center; justify-content:center; background:#101010; border:1px dashed #333; border-radius:10px}
.capt{display:grid; grid-template-columns:1fr; gap:8px}
.caprow{display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:6px 0}
.pile{display:flex; gap:4px; align-items:center; flex-wrap:wrap}
.pile img{width:22px; height:22px}

/* Moves list — the ONLY scroller */
.moves-section{display:flex; flex-direction:column; flex:1 1 auto; min-height:0}
.moves{flex:1 1 auto; min-height:0; overflow:auto; margin-top:6px; background:#0b0b0b; border:1px solid #242424; border-radius:10px}
table{width:100%; border-collapse:collapse; font-variant-numeric: tabular-nums}
th,td{padding:6px 8px; border-bottom:1px solid #1e1e1e; font-size:.95rem}
th{position:sticky; top:0; background:#121212; z-index:1}
.tiny{opacity:.72; font-size:.82rem; margin-top:6px}
.card-lite{background:#0f0f0f; border:1px solid #262626; border-radius:10px; padding:10px; margin-top:10px}
.row{display:flex; align-items:center}
.gap{gap:8px}

.list{list-style:none; margin:0; padding:0}
.list li{margin:.35rem 0}
.list a{color:#cfd6ff; text-decoration:none}
.list a:hover{text-decoration:underline}

/* ===== Footer ===== */
.site-footer{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 16px; border-top:1px solid var(--border); background:#0e0e0e}
.site-footer .links{display:flex; gap:12px}
.site-footer a{color:#ddd; text-decoration:none}
.site-footer a:hover{text-decoration:underline}

/* ===== Modals (used by game.js) ===== */
.modal{position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.7); z-index:20}
.show{display:flex}
.card{background:#161616; color:#eee; border:1px solid #2b2b2b; border-radius:12px; padding:14px; width:min(92vw,420px)}
.card-title{margin:.2rem 0 .7rem}
.promo-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.promo-grid button{font-size:2rem; height:64px}

/* ===== Defensive caps so nothing forces page scroll ===== */
.ad, .card-lite, .capt{max-height:40vh; overflow:hidden}
.clockbox, .status, .top{flex:0 0 auto}

/* Minimalist header actions */
.site-header{
  display:flex; align-items:center; gap:16px;
  justify-content:space-between; padding:12px 16px;
}
.site-header .brand{display:flex; align-items:center; gap:10px}
.site-header .actions{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.site-header .input{width:160px}

/* Ensure nothing overlays the board */
.board-controls{ display:none !important; }