@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/assets/atkinson-next.1e4cea71d7.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

/* ---------- Themes. Every pair is at least 15:1 contrast; nothing relies on colour alone. ---------- */
:root, [data-theme="light"] {
  --bg: #ffffff; --fg: #000000;
  --tile-bg: #ffffff; --tile-fg: #000000; --tile-border: #000000;
  --centre-bg: #000000; --centre-fg: #ffffff;
  --primary-bg: #000000; --primary-fg: #ffffff;
  --focus: #0047d4;
  color-scheme: light;
}
[data-theme="dark"] {
  --bg: #000000; --fg: #ffffff;
  --tile-bg: #000000; --tile-fg: #ffffff; --tile-border: #ffffff;
  --centre-bg: #ffffff; --centre-fg: #000000;
  --primary-bg: #ffffff; --primary-fg: #000000;
  --focus: #ffd400;
  color-scheme: dark;
}
[data-theme="yellow"] {
  --bg: #000000; --fg: #ffe600;
  --tile-bg: #000000; --tile-fg: #ffe600; --tile-border: #ffe600;
  --centre-bg: #ffe600; --centre-fg: #000000;
  --primary-bg: #ffe600; --primary-fg: #000000;
  --focus: #ffffff;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --bg: #000000; --fg: #ffffff;
    --tile-bg: #000000; --tile-fg: #ffffff; --tile-border: #ffffff;
    --centre-bg: #ffffff; --centre-fg: #000000;
    --primary-bg: #ffffff; --primary-fg: #000000;
    --focus: #ffd400;
    color-scheme: dark;
  }
}

/* ---------- Text size: follows the phone's own text size on iPhone/iPad, times the in-app setting ---------- */
html { font-size: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* -apple-system-body tracks iOS Dynamic Type (Settings > Display > Text Size). The touch-callout test
   limits this to iOS/iPadOS: on macOS Safari the same keyword is a tiny 13px. */
@supports (font: -apple-system-body) and (-webkit-touch-callout: none) {
  html { font: -apple-system-body; }
}
html { --scale: 1; }
html[data-size="1.25"] { --scale: 1.25; }
html[data-size="1.5"] { --scale: 1.5; }
html[data-size="1.75"] { --scale: 1.75; }

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font-family: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, sans-serif;
  font-size: calc(1.375rem * var(--scale));
  line-height: 1.45;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

main {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 max(0.75rem, env(safe-area-inset-right)) 0 max(0.75rem, env(safe-area-inset-left));
}

h1, h2 { line-height: 1.2; margin: 0.6em 0 0.4em; }
h1 { font-size: 1.5em; }
h2 { font-size: 1.25em; }
p { margin: 0.5em 0; }
a { color: inherit; text-decoration-thickness: 0.12em; }
strong { font-weight: 800; }
.small { font-size: 0.8em; }
.big { font-size: 1.3em; font-weight: 700; }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
[hidden] { display: none !important; }

/* ---------- Buttons: big, labelled, thick borders ---------- */
button {
  font: inherit;
  font-weight: 700;
  color: var(--fg);
  background: var(--bg);
  border: 0.2rem solid var(--fg);
  border-radius: 0.6rem;
  min-height: 3.5rem;
  padding: 0.3em 0.6em;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
button.primary { background: var(--primary-bg); color: var(--primary-fg); border-color: var(--primary-bg); }
button:disabled { border-style: dashed; cursor: not-allowed; }
button.wide { width: 100%; }
@media (hover: hover) {
  button:hover { text-decoration: underline; text-decoration-thickness: 0.1em; }
}
:focus-visible { outline: 0.3rem solid var(--focus); outline-offset: 0.2rem; }

/* ---------- Banners ---------- */
.banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem;
  padding: 0.6rem max(0.75rem, env(safe-area-inset-right)) 0.6rem max(0.75rem, env(safe-area-inset-left));
  padding-top: max(0.6rem, env(safe-area-inset-top));
  border-bottom: 0.25rem solid var(--fg);
  font-weight: 700;
}
.banner p { margin: 0; flex: 1 1 12ch; }

/* ---------- Play view ---------- */
#view-play {
  height: 100%;
  min-height: min-content;
  display: grid;
  grid-template-areas: "status" "board" "entry" "controls";
  grid-template-rows: auto minmax(11rem, 1fr) auto auto;
  gap: 0.25rem;
  padding-bottom: 0.75rem;
}
/* On the play screen the letters matter most: surrounding text is capped by screen width so a big
   text setting can't squeeze the grid. Text pages (Words, Puzzles, Settings) use the full size. */
.status { grid-area: status; padding-top: env(safe-area-inset-top); font-size: min(1em, 6.4vw); }
.status h1 { font-size: 1.15em; margin: 0.4em 0 0; }
.status p { margin: 0; }

.board-wrap {
  grid-area: board;
  container-type: size;
  display: grid;
  place-items: center;
  min-height: 0;
}
.board {
  --side: min(100cqw, 100cqh);
  width: var(--side);
  height: var(--side);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: calc(var(--side) * 0.035);
}
.tile {
  min-height: 0;
  padding: 0;
  border: calc(var(--side) * 0.014) solid var(--tile-border);
  border-radius: calc(var(--side) * 0.04);
  background: var(--tile-bg);
  color: var(--tile-fg);
  font-size: calc(var(--side) * 0.2);
  font-weight: 800;
  line-height: 1;
}
.tile.centre {
  background: var(--centre-bg);
  color: var(--centre-fg);
  border-color: var(--centre-bg);
  box-shadow: inset 0 0 0 calc(var(--side) * 0.012) var(--centre-fg);
}
/* A used tile: dashed border, faded letter and a corner tick. Still readable, clearly "taken". */
.tile.used {
  border-style: dashed;
  color: color-mix(in srgb, var(--tile-fg) 40%, var(--tile-bg));
}
.tile.centre.used {
  color: color-mix(in srgb, var(--centre-fg) 45%, var(--centre-bg));
  box-shadow: none;
  outline: calc(var(--side) * 0.012) dashed var(--centre-fg);
  outline-offset: calc(var(--side) * -0.035);
}
.tile:hover { text-decoration: none; }

.entry {
  grid-area: entry;
  container-type: inline-size;
  text-align: center;
}
/* The word line keeps one fixed height; long words shrink to fit the width instead of wrapping. */
.word {
  --len: 9;
  margin: 0.15em 0 0;
  height: calc(min(calc(2.75rem * var(--scale)), 13vw) * 1.3);
  display: flex; align-items: center; justify-content: center;
  font-size: min(calc(2.75rem * var(--scale)), 13vw, calc(100cqi / (var(--len) * 0.8)));
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  white-space: nowrap;
  border-bottom: 0.25rem solid var(--fg);
}
.word.empty {
  font-size: min(1em, 6cqi);
  font-weight: 400;
  letter-spacing: 0;
}
.message {
  font-size: min(1em, 6vw);
  min-height: 2.6em;
  margin: 0.3em 0;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

.controls {
  grid-area: controls;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  font-size: min(1em, 7vw);
}
.controls button { min-height: 3.75rem; }
.controls.no-shuffle #btn-clear { grid-column: 1 / -1; }

/* Landscape tablets and wide windows: letters on the left, word and buttons on the right. */
@media (orientation: landscape) and (min-width: 40rem) {
  #view-play {
    grid-template-areas: "board status" "board entry" "board controls";
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    column-gap: 1.5rem;
    padding-top: 0.75rem;
  }
  .status { font-size: 1.15em; }
  .entry { align-self: center; }
  .word { font-size: min(calc(3.5rem * var(--scale)), calc(100cqi / (var(--len) * 0.8))); height: calc(3.5rem * var(--scale) * 1.3); }
}

/* ---------- Text pages (words, puzzles, settings) ---------- */
.page { max-width: 46rem; margin: 0 auto; padding-top: env(safe-area-inset-top); padding-bottom: 2rem; }
.stack { display: grid; gap: 0.75rem; margin: 1rem 0; }

.wordgroup h2, .wordgroup h3 { font-size: 1.1em; margin: 1em 0 0.3em; }
.words {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10ch, 1fr));
  gap: 0.2em 1em;
  font-size: 1.15em;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.words.missed { font-weight: 400; }
.words .nine::after { content: " ★"; }

.goto { margin: 1.5rem 0; }
.goto label { display: block; font-weight: 700; margin-bottom: 0.3rem; }
.goto-row { display: flex; gap: 0.6rem; }
.goto input {
  font: inherit;
  font-size: max(16px, 1em); /* under 16px iOS zooms the page on focus */
  min-width: 0; flex: 1 1 6ch; max-width: 10ch;
  padding: 0.3em 0.5em;
  color: var(--fg); background: var(--bg);
  border: 0.2rem solid var(--fg); border-radius: 0.6rem;
}

.recent { list-style: none; padding: 0; display: grid; gap: 0.6rem; }
.recent button { width: 100%; text-align: left; font-weight: 400; }
.recent button strong { display: block; }

fieldset { border: 0.2rem solid var(--fg); border-radius: 0.6rem; margin: 1rem 0; padding: 0.4rem 0.8rem 0.6rem; }
legend { font-weight: 800; padding: 0 0.3em; }
.choice {
  display: flex; align-items: center; gap: 0.6em;
  min-height: 3.25rem; padding: 0.2em 0;
  cursor: pointer;
}
.choice input { width: 1.4em; height: 1.4em; margin: 0; flex: none; accent-color: var(--fg); }
.rules { padding-left: 1.3em; }
.rules li { margin: 0.35em 0; }

/* ---------- Tabs ---------- */
.tabs {
  flex: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4rem;
  padding: 0.4rem max(0.4rem, env(safe-area-inset-right)) max(0.4rem, env(safe-area-inset-bottom)) max(0.4rem, env(safe-area-inset-left));
  border-top: 0.25rem solid var(--fg);
  background: var(--bg);
  font-size: min(calc(1.2rem * var(--scale)), 5vw);
}
.tabs button { min-height: 3.5rem; padding: 0.2em; border-color: transparent; }
.tabs button[aria-current="page"] {
  background: var(--primary-bg); color: var(--primary-fg); border-color: var(--primary-bg);
  text-decoration: underline; text-decoration-thickness: 0.12em; text-underline-offset: 0.2em;
}

/* ---------- Dialogs ---------- */
dialog {
  background: var(--bg); color: var(--fg);
  border: 0.3rem solid var(--fg); border-radius: 0.8rem;
  width: min(36rem, calc(100vw - 1.5rem));
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  padding: 1rem 1.25rem;
}
dialog::backdrop { background: rgb(0 0 0 / 0.75); }
dialog h2 { margin-top: 0.2em; }

@media (prefers-reduced-motion: no-preference) {
  .tile { transition: transform 80ms ease-out; }
  .tile:active { transform: scale(0.96); }
}