:root{color-scheme:dark;--bg: #1b1a18;--surface: #26241f;--surface-alt: #2d2a25;--surface-hover: #37332c;--surface-active: #3a362d;--surface-raised: #312e28;--border: #3a362f;--border-strong: #4a4539;--text: #ece9e3;--text-muted: #a7a197;--text-faint: #7d776d;--accent: #7fa650;--accent-contrast: #15170f;--danger: #b4443a;--focus-ring: #9ec766;--square-light: #eeeed2;--square-dark: #769656;--square-selected: rgb(255 238 128 / .5);--square-last: rgb(255 238 128 / .32);--square-check: rgb(220 70 55 / .85);--square-hover: rgb(255 255 255 / .75);--hint-color: rgb(20 30 15 / .26);--piece-white: #f7f6f3;--piece-white-edge: #2b2a28;--piece-black: #2b2a28;--piece-black-edge: #0d0d0c;--promotion-bg: #f1efe9;--promotion-bg-hover: #ffffff;--clock-bg: #201e1a;--clock-bg-active: #15140f;--radius-sm: 5px;--radius-md: 9px;--radius-lg: 5px;--shadow-board: 0 10px 30px rgb(0 0 0 / .38)}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--bg);color:var(--text);font-family:Segoe UI,system-ui,-apple-system,Helvetica Neue,sans-serif;line-height:1.45;-webkit-font-smoothing:antialiased}h1,h2,h3{line-height:1.2}.btn{padding:9px 14px;border:1px solid transparent;border-radius:var(--radius-sm);background:var(--surface-hover);color:var(--text);font:inherit;font-size:.88rem;font-weight:600;cursor:pointer;transition:background-color .12s ease,border-color .12s ease,opacity .12s ease}.btn:hover:not(:disabled){background:var(--border)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.btn--primary{background:var(--accent);color:var(--accent-contrast)}.btn--primary:hover:not(:disabled){background:color-mix(in srgb,var(--accent) 86%,white)}.btn--ghost{border-color:var(--border);background:transparent;color:var(--text-muted)}.btn--ghost:hover:not(:disabled){background:var(--surface-hover);color:var(--text)}.btn--danger{background:transparent;border-color:color-mix(in srgb,var(--danger) 60%,transparent);color:color-mix(in srgb,var(--danger) 80%,white)}.btn--danger:hover:not(:disabled){background:color-mix(in srgb,var(--danger) 18%,transparent)}.btn--small{padding:5px 10px;font-size:.8rem}.btn--wide{width:100%;padding:11px 14px;font-size:.95rem}
