/* Schack (chess) UI styles for Game-Game. Mobile-first, no horizontal scroll. */
.sk{--sk-lt:#e9edf3;--sk-dk:#6d86a8;--sk-line:#1e2a42;--sk-card:#141d30;--sk-acc:#FECC00;--sk-mut:#aebbd2}
.sk *{box-sizing:border-box}
.sk{max-width:100%;margin:0 0 10px}

/* controls */
.sk-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.sk-btn{border:none;cursor:pointer;font:800 13px 'Nunito',sans-serif;padding:10px 15px;border-radius:12px;color:#fff}
.sk-btn.prim{background:linear-gradient(135deg,#0085D1,#006AA7);box-shadow:0 3px 0 #00375c}
.sk-btn.prim:active{transform:translateY(2px);box-shadow:0 1px 0 #00375c}
.sk-btn.ghost{background:var(--sk-card);border:1px solid var(--sk-line);color:var(--sk-mut)}
.sk-btn.ghost:hover{color:var(--sk-acc)}
.sk-opts{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.sk-sel{display:flex;flex-direction:column;gap:4px;font:800 11px 'Nunito',sans-serif;color:var(--sk-mut);text-transform:uppercase;letter-spacing:.4px}
.sk-sel select{font:700 13px 'Nunito',sans-serif;padding:8px 10px;border-radius:10px;background:var(--sk-card);color:#fff;border:1px solid var(--sk-line);cursor:pointer}
.sk-status{font:800 15px 'Nunito',sans-serif;color:#fff;background:var(--sk-card);border:1px solid var(--sk-line);border-left:4px solid var(--sk-acc);border-radius:10px;padding:11px 14px;margin-bottom:12px}

/* layout */
.sk-main{display:flex;flex-direction:column;gap:14px}
.sk-board-wrap{display:flex;justify-content:center}

/* board */
.sk-board{width:min(94vw,460px);aspect-ratio:1;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);border-radius:12px;overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,.45);border:1px solid var(--sk-line);container-type:inline-size;touch-action:none;user-select:none;-webkit-user-select:none}
.sk-sq{position:relative;display:flex;align-items:center;justify-content:center}
.sk-sq.lt{background:var(--sk-lt)}
.sk-sq.dk{background:var(--sk-dk)}
.sk-piece{font-size:11.5cqw;line-height:1;cursor:grab;pointer-events:none;transition:transform .05s}
.sk-piece.w{color:#fbfcfe;text-shadow:0 0 1px #1a2333,0 1px 1px #1a2333,-1px 0 1px #1a2333,1px 0 1px #1a2333,0 -1px 1px #1a2333}
.sk-piece.b{color:#232a38;text-shadow:0 0 1px #cdd6e4,0 1px 1px #b7c1d2}
.sk-rl{position:absolute;top:2px;left:3px;font:800 9px 'Nunito',sans-serif;opacity:.62;pointer-events:none}
.sk-fl{position:absolute;bottom:1px;right:3px;font:800 9px 'Nunito',sans-serif;opacity:.62;pointer-events:none}
.sk-sq.lt .sk-rl,.sk-sq.lt .sk-fl{color:#6d86a8}
.sk-sq.dk .sk-rl,.sk-sq.dk .sk-fl{color:#e9edf3}

/* markers */
.sk-sq.last::after{content:'';position:absolute;inset:0;background:rgba(254,204,0,.34);pointer-events:none}
.sk-sq.sel{box-shadow:inset 0 0 0 3px var(--sk-acc)}
.sk-sq.dot::before{content:'';position:absolute;width:30%;height:30%;border-radius:50%;background:rgba(20,29,48,.42);pointer-events:none}
.sk-sq.lt.dot::before{background:rgba(60,80,110,.4)}
.sk-sq.cap::before{content:'';position:absolute;inset:6%;border-radius:50%;border:4px solid rgba(20,29,48,.4);pointer-events:none}
.sk-sq.chk{background:radial-gradient(circle,#ff5b6a 0%,#e23b4d 70%)!important}
.sk-ghost{position:fixed;z-index:2000;pointer-events:none;display:flex;align-items:center;justify-content:center;font-size:44px;line-height:1;transform:translateZ(0)}

/* side panel: move list */
.sk-side{background:var(--sk-card);border:1px solid var(--sk-line);border-radius:12px;overflow:hidden}
.sk-moves-h{font:800 13px 'Nunito',sans-serif;color:#fff;padding:11px 14px;border-bottom:1px solid var(--sk-line);background:rgba(255,255,255,.02)}
.sk-moves{list-style:none;margin:0;padding:6px 10px;max-height:180px;overflow-y:auto;counter-reset:mv}
.sk-moves li{display:grid;grid-template-columns:26px 1fr 1fr;gap:6px;align-items:center;padding:3px 0;font:700 13px 'Nunito',sans-serif;color:var(--sk-mut)}
.sk-moves li::before{counter-increment:mv;content:counter(mv) '.';color:#6b7a94;font-weight:800}
.sk-mv{color:#fff}

/* promotion + game over overlays */
.sk-promo,.sk-over{position:fixed;inset:0;z-index:2500;display:flex;align-items:center;justify-content:center;background:rgba(6,10,20,.72);padding:20px}
.sk-hidden{display:none!important}
.sk-promo-box,.sk-over-box{background:var(--sk-card);border:1px solid var(--sk-line);border-radius:16px;padding:22px;text-align:center;max-width:340px;box-shadow:0 20px 50px rgba(0,0,0,.6)}
.sk-promo-t,.sk-over-t{font:900 18px 'Nunito',sans-serif;color:#fff;margin-bottom:16px}
.sk-promo-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.sk-promo-btn{display:flex;flex-direction:column;align-items:center;gap:4px;background:#0f1626;border:1px solid var(--sk-line);border-radius:12px;padding:10px 12px;cursor:pointer;min-width:64px}
.sk-promo-btn:hover{border-color:var(--sk-acc)}
.sk-promo-btn .sk-piece{font-size:32px;pointer-events:none}
.sk-promo-lbl{font:800 11px 'Nunito',sans-serif;color:var(--sk-mut)}
.sk-over-box .sk-btn{margin-top:6px}

/* wider screens: board + move list side by side */
@media(min-width:760px){
  .sk-main{flex-direction:row;align-items:flex-start}
  .sk-board-wrap{flex:0 0 auto}
  .sk-side{flex:1;min-width:200px}
  .sk-moves{max-height:420px}
}

/* light theme */
html[data-theme=light] .sk{--sk-line:#e2e7f0;--sk-card:#fff;--sk-mut:#4a546b;--sk-lt:#eef1f6;--sk-dk:#7d97ba}
html[data-theme=light] .sk-status,html[data-theme=light] .sk-mv,html[data-theme=light] .sk-moves-h,html[data-theme=light] .sk-promo-t,html[data-theme=light] .sk-over-t{color:#0c1322}
html[data-theme=light] .sk-sel select{background:#fff;color:#0c1322}
html[data-theme=light] .sk-promo-btn{background:#f4f6fb}
html[data-theme=light] .sk-piece.b{color:#1c2230;text-shadow:0 1px 1px #aab4c6}