@font-face { font-family: "Archivo"; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url("fonts/Archivo-100_900.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 100 700; font-display: swap; src: url("fonts/IBMPlexSans-var.woff2") format("woff2"); }

:root {
  --bg: #ffffff;
  --ink: #121418;
  --ink-soft: #4f5663;
  --grey: #8a919c;
  --rule: #d9dce1;
  --accent: #f26b1d;
  --edge: 20px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body { background: var(--bg); color: var(--ink); font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased; }

#board { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }

/* Text floats over the board. Only links and the button take the pointer, so a stroke can start under the text. */
.overlay { position: fixed; left: 0; right: 0; display: flex; justify-content: space-between; gap: 16px; pointer-events: none;
  padding-left: max(var(--edge), env(safe-area-inset-left)); padding-right: max(var(--edge), env(safe-area-inset-right)); }
.overlay a, .overlay button { pointer-events: auto; }
.overlay .text, #status { user-select: none; -webkit-user-select: none; }

.top { top: 0; align-items: flex-start; padding-top: max(var(--edge), env(safe-area-inset-top)); }
.text { display: grid; gap: 6px; max-width: 34rem; }
h1 { font-family: "Archivo", system-ui, sans-serif; font-weight: 800; font-size: clamp(20px, 3.2vw, 26px); line-height: 1.1; letter-spacing: -0.01em; }
.credit { font-size: 13px; color: var(--grey); margin-top: -2px; }
.credit a { color: var(--ink-soft); text-underline-offset: 3px; }
.credit a:hover { color: var(--ink); }
#hint { font-size: clamp(14px, 2.2vw, 16px); line-height: 1.45; color: var(--ink-soft); text-wrap: pretty; transition: opacity .4s; }
#hint.score { color: var(--ink); font-weight: 500; }
#hint b { font-weight: 700; }

#mode { font: inherit; font-size: 14px; line-height: 20px; color: var(--ink-soft); background: var(--bg); border: 1px solid var(--rule);
  border-radius: 999px; padding: 6px 14px; cursor: pointer; white-space: nowrap; touch-action: manipulation; }
#mode:hover { color: var(--ink); border-color: var(--ink-soft); }
#mode[aria-pressed="true"] { color: var(--bg); background: var(--ink); border-color: var(--ink); }

.bottom { bottom: 0; align-items: baseline; padding-bottom: max(16px, env(safe-area-inset-bottom));
  font-size: 13px; color: var(--grey); font-variant-numeric: tabular-nums; }
.links { display: flex; gap: 16px; }
.bottom a { color: var(--grey); text-underline-offset: 3px; }
.bottom a:hover { color: var(--ink); }

#mode:focus-visible, .overlay a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 480px) { :root { --edge: 16px; } .links { gap: 12px; } }
@media (prefers-reduced-motion: reduce) { #hint { transition: none; } }