/* Reading-text baseline: the browser's default font size. Layout sizing
   (e.g. --board-size above) responds to the viewport separately. */
html { font-size: 100%; }

/* Body fills the viewport height at minimum and scrolls if its content
   ever needs more room than that. */
html, body { height: 100%; }
body {
    min-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    font-family: var(--font-ui);
    font-size: var(--text-lg);
    line-height: 1.5;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}

button { cursor: pointer; font: inherit; touch-action: manipulation; }
a      { color: var(--text-dim); text-decoration: none; }
a:hover { color: var(--text); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Suppress the tap flash Android/iOS draw on touch, and the ~300ms
   delay before a tap registers as a click, on every interactive
   control. touch-action: manipulation still allows scrolling - only
   double-tap-to-zoom is disabled. */
button, .btn, a { -webkit-tap-highlight-color: transparent; }

/* ── Screen-reader utility ──────────────────────────────────────────── */
.sr-only {
    position: absolute; width: 0.0625rem; height: 0.0625rem;
    padding: 0; margin: -0.0625rem; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── Scrollbars ─────────────────────────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; }
::-webkit-scrollbar       { width: 0.375rem; height: 0.375rem; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 0.1875rem; }

.icon { width: 1rem; height: 1rem; flex-shrink: 0; }