:root {
  color-scheme: light;
  --ink: #174e78; --navy: #173b52; --paper: #f2e4c5; --paper-light: #fbf3df;
  --line: #c9b58d; --text: #2f291f; --muted: #756b58;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #e6d5b1; color: var(--text); font-family: Georgia, "Times New Roman", serif; }
body { padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
button, select { font: inherit; }
button { min-height: 44px; padding: .7rem 1rem; border: 1px solid #8e7b5a; border-radius: 10px; color: var(--text); background: #f8efd9; cursor: pointer; touch-action: manipulation; }
button:active { transform: translateY(1px); }
button.primary { background: var(--navy); color: #fff6df; border-color: var(--navy); font-weight: 700; }
button.quiet { background: transparent; }
button:disabled { opacity: .45; cursor: not-allowed; }
.app { width: min(100%, 1100px); margin: 0 auto; padding: 14px; }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom: 12px; }
h1 { margin:0; color:var(--navy); font-size:clamp(1.6rem, 5vw, 2.5rem); }
h2 { margin:.1rem 0 .6rem; color:var(--navy); }
.eyebrow { margin:0 0 3px; font:700 .7rem/1.2 system-ui,sans-serif; letter-spacing:.18em; color:var(--muted); }
.panel { background:rgba(251,243,223,.92); border:1px solid var(--line); border-radius:16px; padding:18px; box-shadow:0 5px 18px #6a51201a; }
.panel label { display:block; margin:14px 0 5px; font-weight:700; }
select { width:100%; min-height:44px; border:1px solid var(--line); border-radius:9px; background:#fff8e8; padding:8px; }
.panel .primary { width:100%; margin-top:16px; }
.hint { color:var(--muted); line-height:1.45; margin:.5rem 0 1rem; }
.hidden { display:none !important; }
.game-panel { background:rgba(251,243,223,.7); border:1px solid var(--line); border-radius:16px; padding:10px; }
.statusbar { display:flex; gap:8px; justify-content:space-between; padding:8px 4px 12px; }
.statusbar > div { display:flex; flex-direction:column; gap:3px; }
.status-label { font: .72rem system-ui,sans-serif; color:var(--muted); }
.statusbar strong { color:var(--navy); font-size:.95rem; }
.board-wrap { width:100%; height:min(60vh, 620px); min-height:300px; border:1px solid #b49b6c; border-radius:10px; overflow:hidden; background:var(--paper); }
canvas { display:block; width:100%; height:100%; touch-action:none; }
.controls { padding:8px 4px 2px; }
.button-row { display:flex; flex-wrap:wrap; gap:8px; }
footer { text-align:center; color:var(--muted); font: .75rem system-ui,sans-serif; padding:16px 0 8px; }
@media (orientation: landscape) and (min-width: 700px) {
 .app { padding:10px 18px; }
 .game-panel { display:grid; grid-template-columns:minmax(0, 1fr) 250px; gap:12px; }
 .statusbar { grid-column:1 / -1; }
 .board-wrap { height:calc(100vh - 180px); min-height:260px; }
 .controls { align-self:start; }
}

.header-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.settings-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.setting-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.setting-row .hint{margin:.25rem 0 0}.setting-row button{flex-shrink:0}
.version-tag{border:1px solid var(--line);border-radius:999px;padding:5px 10px;color:var(--navy);font:700 .75rem system-ui,sans-serif}
@media(max-width:520px){.setting-row{align-items:flex-start;flex-direction:column}.setting-row button{width:100%}}