:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #101514; color: #f5eee0; font-family: Arial, Helvetica, sans-serif; }
body { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }
.stage { flex: 1; min-height: 0; overflow: hidden; }
#board { display: block; width: 100%; height: 100%; background: #101514; }
.controls { flex: 0 0 auto; display: flex; justify-content: center; gap: 12px; padding: 9px 16px 14px; }
button { border: 1px solid #927b55; border-radius: 6px; background: #1a2421; color: #f5eee0; padding: 9px 17px; font: inherit; cursor: pointer; }
button:hover { background: #293831; }
button:focus-visible { outline: 2px solid #d9bb82; outline-offset: 3px; }
button:disabled { opacity: .45; cursor: default; }
@media (max-width: 650px) { .stage { overflow: auto; } #board { width: 960px; height: 540px; } }
:fullscreen .controls { display: none; }
:fullscreen .stage { background: #101514; }