@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');

:root { --ink:#20231d; --paper:#f4f0e6; --light:#eeefd5; --dark:#779556; --accent:#cf714a; --gold:#e5b94c; }
body[data-board-theme="blue"] { --light:#eeeeee; --dark:#758ab9; }
body[data-board-theme="brown"] { --light:#f0d9b5; --dark:#b58863; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:radial-gradient(circle at 15% 0%,#fffdf7 0,transparent 31rem),var(--paper); font-family:"DM Mono",monospace; }
.app { width:min(1080px,94vw); margin:0 auto; padding:clamp(2.3rem,7vw,5.5rem) 0 2.5rem; }
.hero { margin-bottom:2rem; }.brand-logo { display:block; width:min(540px,100%); height:auto; }.eyebrow,.label { margin:0; font-size:.67rem; letter-spacing:.14em; color:#697061; }.hero h1 { margin:.2rem 0; font:700 clamp(2.8rem,8vw,5.5rem)/1 "Playfair Display",serif; letter-spacing:-.06em; }.subtitle { margin:0; color:#596054; }
.game-shell { display:grid; grid-template-columns:220px minmax(300px,650px); gap:clamp(1.2rem,4vw,3rem); align-items:start; }.panel { padding-top:.5rem; }.turn-card { display:flex; align-items:center; gap:.8rem; padding-bottom:1.3rem; border-bottom:1px solid #cbc4b3; }.turn-card strong { display:block; margin-top:.2rem; font:600 1.3rem "Playfair Display",serif; }.turn-dot { width:17px; height:17px; border-radius:50%; border:1px solid #62665d; }.turn-dot.white { background:#fffdf7; }.turn-dot.black { background:#272b25; }.status { min-height:4.5rem; font-size:.83rem; line-height:1.55; color:#53594e; }button { font:500 .78rem "DM Mono",monospace; cursor:pointer; color:#fffdf7; background:var(--ink); padding:.75rem 1rem; border:0; border-radius:2px; transition:transform .15s,background .15s; }button:hover { background:var(--accent); transform:translateY(-2px); }.moves-wrap { margin-top:2rem; }.moves { max-height:240px; overflow:auto; margin:.7rem 0 0; padding-left:2.1rem; font-size:.74rem; line-height:1.9; }.moves li::marker { color:#888e80; }
.mode-control { display:block; margin:0 0 1rem; }.mode-control .label { display:block; margin-bottom:.35rem; }select { width:100%; padding:.52rem; color:var(--ink); background:#fffdf7; border:1px solid #c6bdab; font:400 .72rem "DM Mono",monospace; }.board-wrap { position:relative; width:min(650px,94vw); height:min(650px,94vw); box-shadow:0 18px 38px #4e514229; }.board { width:100%; height:100%; display:grid; grid-template-columns:repeat(8,1fr); grid-template-rows:repeat(8,1fr); border:8px solid #292e26; }.square { position:relative; display:grid; place-items:center; overflow:hidden; border:0; border-radius:0; padding:0; background:none; line-height:1; }.square.light { background:var(--light); }.square.dark { background:var(--dark); }.square.selected::after { content:""; position:absolute; z-index:2; inset:9%; border:3px solid var(--accent); }.square.legal::before { content:""; position:absolute; z-index:2; width:19%; aspect-ratio:1; border-radius:50%; background:#2631268c; }.square.capture::before { content:""; position:absolute; z-index:2; inset:7%; border:4px solid #8d3e2f; border-radius:50%; }.square.in-check { background:linear-gradient(135deg,#d45f46,#e5955b); }.square .rank,.square .file { position:absolute; z-index:3; font:500 clamp(.48rem,1.2vw,.7rem) "DM Mono",monospace; opacity:.74; }.rank { top:4px; left:5px; }.file { bottom:4px; right:5px; }.dark .rank,.dark .file { color:#f5ecd5; }.light .rank,.light .file { color:#486147; }.piece { z-index:1; width:86%; height:86%; object-fit:contain; filter:drop-shadow(0 1px 1px #0003); }.promotion { position:absolute; z-index:3; top:50%; left:50%; transform:translate(-50%,-50%); min-width:245px; text-align:center; padding:1rem; background:#fffdf7; box-shadow:0 12px 35px #20231d66; }.promotion p { margin:.2rem 0 .7rem; font-size:.76rem; }.promotion button { width:48px; margin:0 2px; padding:.25rem; color:var(--ink); background:var(--light); font-size:2.1rem; }.promotion button:hover { background:var(--gold); }.hidden { display:none; }.hint { margin-top:1.8rem; font-size:.72rem; color:#62695d; }kbd { padding:.1rem .25rem; border:1px solid #bbb4a3; border-radius:2px; background:#fdf9ef; }
.arrow-layer { position:absolute; inset:0; z-index:4; width:100%; height:100%; pointer-events:none; overflow:visible; }
.clocks { display:grid; grid-template-columns:1fr 1fr; gap:.55rem; margin:-.2rem 0 1rem; }.clocks div { padding:.5rem; border:1px solid #c6bdab; background:#fffdf7; }.clocks .label { display:block; margin-bottom:.12rem; }.clocks strong { font:600 1rem "Playfair Display",serif; }.clocks .active { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.piece { width:90%; height:90%; cursor:grab; }.piece:active { cursor:grabbing; }
.square.last-move {
  /* Keep the board colour visible, like chess.com, rather than replacing it. */
  background-image:linear-gradient(rgb(255 235 59 / 52%),rgb(255 235 59 / 52%));
}
.square.premove,
.square.annotation {
  background-image:linear-gradient(rgb(210 82 72 / 42%),rgb(210 82 72 / 42%));
}
.piece.premove-piece { opacity:.72; }
.premove-moving { animation:premove-slide .16s cubic-bezier(.2,.8,.25,1) both; will-change:transform; }
.square:hover { transform:none; }

.piece-moving { animation:piece-slide .18s cubic-bezier(.2,.8,.25,1) both; will-change:transform; }
@keyframes piece-slide { from { transform:translate(var(--move-from-x),var(--move-from-y)); } to { transform:translate(0,0); } }
@keyframes premove-slide { from { transform:translate(var(--premove-from-x),var(--premove-from-y)); } to { transform:translate(0,0); } }
@media (prefers-reduced-motion:reduce) { .piece-moving,.premove-moving { animation:none; } }
body, button, select, .square .rank, .square .file { font-family:"Manrope",sans-serif; }
.board { border-width:22px; }
.square { overflow:visible; }
.rank { top:5px; left:-17px; color:#f4f0e6 !important; }
.file { right:5px; bottom:-18px; color:#f4f0e6 !important; }
@media(max-width:700px) { .board { border-width:18px; }.rank { left:-14px; }.file { bottom:-15px; } }

::selection { color:#fffdf7; background:var(--accent); }
button, select { -webkit-tap-highlight-color:transparent; }
button:focus-visible, select:focus-visible, .square:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }
select { min-height:2.45rem; border-radius:3px; transition:border-color .15s ease,box-shadow .15s ease,background .15s ease; }
select:hover { border-color:#8f957f; background:#fffef9; }
select:focus { border-color:var(--accent); box-shadow:0 0 0 3px #cf714a2b; }
button { min-height:2.45rem; box-shadow:0 2px 0 #11150f; }
button:active { transform:translateY(1px); box-shadow:0 1px 0 #11150f; }
.brand-logo { width:min(540px,100%); max-height:190px; object-fit:contain; object-position:left center; }
.panel, .clock-panel { scrollbar-color:#8f957f transparent; }
.side-moves-wrap .moves { scrollbar-width:thin; scrollbar-color:#8f957f transparent; }
.side-moves-wrap .moves::-webkit-scrollbar { width:7px; }
.side-moves-wrap .moves::-webkit-scrollbar-thumb { border:2px solid var(--paper); border-radius:999px; background:#8f957f; }
.clock-card { box-shadow:0 7px 16px #20231d12; transition:border-color .15s ease,box-shadow .15s ease; }
.clock-card.active { box-shadow:0 0 0 1px var(--accent),0 8px 20px #cf714a26; }
.status { border-left:2px solid #c9c2b2; padding-left:.7rem; }
.status:empty { display:none; }
@media(max-width:850px) { .hero { margin-bottom:1.35rem; }.brand-logo { width:min(460px,100%); max-height:155px; }.panel { padding-top:0; }.status { grid-column:1/-1; }.mode-control { margin-bottom:.45rem; }.clock-panel { margin-top:.25rem; } }
@media(max-width:480px) { .app { width:min(100% - 1rem,1260px); padding-top:1rem; }.brand-logo { max-height:128px; }.panel { gap:.7rem 1rem; }.mode-control .label { margin-bottom:.2rem; }.clock-card { padding:.65rem; }.hint { margin:1.1rem 0 0; line-height:1.55; } }
.restart-dialog { position:fixed; z-index:10; inset:0; display:grid; place-items:center; padding:1.25rem; background:#20231d80; }.restart-card { width:min(390px,100%); padding:1.5rem; border:1px solid #c6bdab; border-radius:10px; background:#f4f0e6; box-shadow:0 20px 50px #20231d80; }.restart-card h2 { margin:.25rem 0 .65rem; font:700 1.9rem/1.1 "Playfair Display",serif; }.restart-card > p:not(.label) { margin:0; color:#596054; font-size:.84rem; line-height:1.55; }.restart-actions { display:flex; justify-content:flex-end; gap:.6rem; margin-top:1.4rem; }.secondary-button { color:var(--ink); background:#e7e1d3; }.secondary-button:hover { color:#fffdf7; }.restart-dialog.hidden { display:none; }
.game-actions { display:flex; flex-wrap:wrap; gap:.55rem; }
.app { width:min(1260px,94vw); }.game-shell { grid-template-columns:220px minmax(300px,650px) 160px; gap:clamp(1.2rem,3vw,2.5rem); align-items:start; }.clock-panel { display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:1rem; height:min(650px,94vw); min-height:0; padding:.1rem 0; }.clock-card { min-height:102px; padding:.75rem; border:2px solid #292e26; border-radius:3px; color:#20231d; background:#fffdf7; }.clock-card .label { display:block; margin-bottom:.12rem; color:#596054; }.clock-card strong { display:block; font:600 1.55rem "Playfair Display",serif; }.clock-card.active { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }.captured-pieces { display:flex; flex-wrap:wrap; min-height:30px; margin-top:.45rem; border-top:1px solid #c6bdab; padding-top:.3rem; }.captured-piece { width:24px; height:24px; object-fit:contain; margin:-1px; }.side-moves-wrap { display:grid; grid-template-rows:auto minmax(0,1fr); min-height:0; margin:0; overflow:hidden; }.side-moves-wrap .moves { min-height:0; height:auto; max-height:none; margin:.5rem 0 0; padding-left:1.55rem; overflow-y:auto; overflow-x:hidden; }
@media(max-width:850px) { .game-shell { grid-template-columns:1fr; }.clock-panel { grid-template-columns:1fr 1fr; grid-template-rows:auto auto; height:auto; gap:.7rem; }.clock-card { min-height:0; }.side-moves-wrap { grid-column:1/-1; height:150px; } }
body, body * { font-family:Tahoma, Arial, sans-serif !important; }
@media(max-width:700px) { .game-shell { grid-template-columns:1fr; }.panel { display:grid; grid-template-columns:1fr auto; gap:.5rem 1.2rem; }.turn-card { grid-column:1/-1; }.status { min-height:auto; margin:.3rem 0; }.moves-wrap { grid-column:1/-1; margin-top:1rem; }.moves { max-height:130px; }.board { border-width:5px; } }
@media(max-width:700px) { .board { border-width:18px; }.rank { left:-14px; }.file { bottom:-15px; } }