:root {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #17202a;
  background: #f3f4f6;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
.app { width: min(1180px, 96vw); margin: 0 auto; padding: 28px 0; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
h1 { margin: 0 0 5px; font-size: clamp(30px, 5vw, 48px); letter-spacing: -1.5px; }
.topbar p { margin: 0; color: #5d6875; }
button { border: 0; border-radius: 10px; padding: 11px 16px; font: inherit; font-weight: 700; cursor: pointer; }
.secondary { background: #17202a; color: white; }
.secondary:hover { opacity: .9; }
.game-layout { display: grid; grid-template-columns: minmax(320px, 760px) minmax(270px, 320px); gap: 24px; align-items: start; justify-content: center; }
.board-column { min-width: 0; }
.board-wrap { width: 100%; }
.board { width: min(100%, 760px); aspect-ratio: 1; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); border: 7px solid #17202a; border-radius: 7px; overflow: hidden; box-shadow: 0 12px 35px rgba(0,0,0,.12); margin: 0 auto; }
.square { position: relative; display: flex; align-items: center; justify-content: center; user-select: none; cursor: pointer; }
.square.light { background: #f0d9b5; }
.square.dark { background: #b58863; }
.square.selected { outline: 5px solid rgba(255, 230, 80, .9); outline-offset: -5px; z-index: 2; }
.square.last { box-shadow: inset 0 0 0 5px rgba(255,255,255,.28); }
.square.legal::after { content: ""; width: 18%; height: 18%; border-radius: 50%; background: rgba(20, 30, 40, .38); position: absolute; }
.square.capture::after { content: ""; width: 76%; height: 76%; border-radius: 50%; border: 5px solid rgba(170, 35, 35, .72); position: absolute; }
/* Cburnett/Lichess-style artwork: smaller than the source PNG canvas so pieces don't dominate the board. */
.piece { width: 76%; height: 76%; object-fit: contain; position: relative; z-index: 1; cursor: grab; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.coordinates.bottom { display: grid; grid-template-columns: repeat(8, 1fr); padding: 3px 7px 0; font-size: 12px; color: #6b7280; text-align: center; }
.panel { background: white; border-radius: 14px; padding: 20px; box-shadow: 0 8px 25px rgba(0,0,0,.08); min-width: 0; }
.turn-card { border-radius: 10px; }
.status { font-size: 23px; font-weight: 800; }
.mode { color: #697586; margin: 3px 0 0; font-size: 14px; }
.mobile-turn { display: none; background: white; padding: 14px 16px; margin-bottom: 12px; box-shadow: 0 8px 25px rgba(0,0,0,.06); }
.legend, .selected-info, .captured-section, .moves { border-top: 1px solid #e6e8eb; padding-top: 16px; margin-top: 16px; }
h2 { font-size: 15px; margin: 0 0 10px; }
.legend div { margin: 7px 0; }
.legend p { color: #697586; font-size: 13px; line-height: 1.45; margin-bottom: 0; }
.selected-info { color: #4b5563; font-size: 14px; line-height: 1.5; min-height: 58px; }
.captured-row { display: flex; align-items: center; gap: 8px; min-height: 34px; }
.captured-label { width: 34px; color: #697586; font-size: 12px; font-weight: 700; }
.captured-pieces { display: flex; align-items: center; flex-wrap: wrap; min-height: 30px; }
.captured-pieces img { width: 25px; height: 25px; object-fit: contain; margin-right: -2px; }
.move-header { display: grid; grid-template-columns: 1fr 1fr; color: #697586; font-size: 11px; font-weight: 700; padding-left: 28px; margin-bottom: 3px; }
#moveList { margin: 0; padding-left: 28px; max-height: 300px; overflow: auto; }
#moveList li { padding: 4px 0; padding-left: 3px; }
#moveList li::marker { color: #697586; font-size: 12px; }
footer { margin-top: 20px; color: #7a8490; font-size: 12px; }
@media (max-width: 900px) {
  .app { width: min(760px, 96vw); }
  .game-layout { grid-template-columns: 1fr; gap: 14px; }
  .desktop-turn { display: none; }
  .mobile-turn { display: block; }
  .panel { width: 100%; }
  .board { width: 100%; }
}
@media (max-width: 520px) {
  .app { width: 100%; padding: 12px 8px 20px; }
  .topbar { align-items: flex-start; margin-bottom: 12px; }
  .topbar p { font-size: 13px; line-height: 1.35; }
  .topbar .secondary { padding: 9px 11px; font-size: 13px; white-space: nowrap; }
  .board { border-width: 3px; border-radius: 4px; }
  .square.selected { outline-width: 3px; outline-offset: -3px; }
  .square.last { box-shadow: inset 0 0 0 3px rgba(255,255,255,.28); }
  .square.capture::after { border-width: 3px; }
  .piece { width: 78%; height: 78%; }
  .panel { border-radius: 10px; padding: 14px; }
  #moveList { max-height: 220px; }
}

/* Variant selector */
.top-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.variant-picker { display:flex; align-items:center; gap:7px; color:#697586; font-size:13px; font-weight:700; }
.variant-picker select { border:1px solid #d6dae0; border-radius:9px; padding:10px 30px 10px 10px; background:#fff; color:#17202a; font:inherit; font-weight:600; }
.chocolate-info { margin-top:12px; padding:10px 12px; border-radius:9px; background:#f6eee7; color:#5b4636; font-size:13px; line-height:1.4; }
.hidden { display:none; }
.square.chocolated::before { content:""; position:absolute; inset:8%; border-radius:50%; background:rgba(92,56,31,.22); z-index:0; pointer-events:none; }
@media (max-width: 520px) {
  .top-actions { width:100%; justify-content:space-between; }
  .variant-picker { flex:1; }
  .variant-picker select { min-width:0; width:100%; }
}

/* Online play */
.online-panel { background:white; border-radius:14px; padding:18px 20px; margin-bottom:22px; box-shadow:0 8px 25px rgba(0,0,0,.08); }
.online-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.online-heading h2 { font-size:18px; margin:0 0 3px; }
.online-heading p { margin:0; color:#697586; font-size:13px; }
.connection-badge { display:inline-flex; align-items:center; padding:6px 9px; border-radius:999px; background:#eef0f2; color:#59636f; font-size:12px; font-weight:800; }
.connection-badge.online { background:#e8f6ed; color:#287a47; }
.connection-badge.connecting { background:#fff4d6; color:#8a6500; }
.connection-badge.offline { background:#fdeaea; color:#a33131; }
.challenge-controls { display:flex; flex-wrap:wrap; align-items:end; gap:10px; margin-top:14px; }
.challenge-controls label { display:flex; flex-direction:column; gap:5px; color:#697586; font-size:12px; font-weight:700; }
.challenge-controls select, .challenge-controls input { border:1px solid #d6dae0; border-radius:9px; padding:9px 10px; background:#fff; color:#17202a; font:inherit; font-weight:600; min-width:130px; }
.challenge-controls input { min-width:95px; width:95px; }
.custom-time { display:flex; gap:8px; }
.primary { background:#287a47; color:#fff; }
.primary:hover { opacity:.9; }
.challenge-result { display:flex; gap:9px; align-items:center; margin-top:12px; padding:10px; border-radius:9px; background:#f4f6f8; }
.challenge-result span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; flex:1; }
.clock-row { display:flex; gap:8px; margin-top:9px; }
.clock { min-width:90px; text-align:center; background:#eef0f2; border-radius:8px; padding:7px 10px; font-variant-numeric:tabular-nums; font-size:20px; font-weight:800; }
.clock.active-clock { background:#17202a; color:#fff; }
@media (max-width:520px) { .online-panel{padding:14px}.challenge-controls{align-items:stretch}.challenge-controls label,.custom-time{flex:1}.challenge-controls select{width:100%}.challenge-result{align-items:stretch; flex-direction:column}.clock{flex:1}.online-heading{align-items:center} }