:root {
  --bg: #0b1216;
  --card: #121c22;
  --line: #26333c;
  --line-strong: #3a4a55;
  --ink: #e8f0f4;
  --dim: #93a6b1;
  --accent: #3aaed6;
  --ok: #2ec56e;
  --bad: #e0553f;
  /* The board and the keyboard share the window — six cell rows plus three key
     rows, and the keys track the cells, so the whole thing shrinks together.
     The notes below the keyboard are meant to fall past the fold; the keyboard
     is not. app.js refines this from real measurements; this line is the bound
     that holds even before the script runs. */
  --cell: clamp(26px, min(15.5vw, (100dvh - 234px) / 8.22), 62px);
  --key-h: clamp(24px, calc(var(--cell) * 0.74), 46px);
  /* The sizes above are what a phone needs. A computer screen has room to spare,
     so app.js raises this one factor and everything on the screen — the boxes, the
     keys, the gaps, the keyboard's width, the top bar and its type — grows by it
     together rather than the game sitting in a corner. It stays 1 on a phone. */
  --scale: 1;
  --gap: calc(6px * var(--scale));
  --flip-ms: 480ms;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  padding: 0 12px 22px;
  background: var(--bg);
  color: var(--ink);
  font-family: Lexend, "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-text-size-adjust: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden;
}

/* Row 1: name · streak · Stats/How to play. Row 2: Daily/Free in the middle,
   Easy Mode switch all the way to the right. position/z-index so the switch
   cannot sit under the board or a toast and refuse clicks. */
.bar {
  width: 100%;
  max-width: calc(520px * var(--scale));
  padding: 14px 2px 10px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 3;
}
.brand { justify-self: start; grid-column: 1; grid-row: 1; font-weight: 800; font-size: calc(1.18rem * var(--scale)); letter-spacing: 0.2px; }
.streak {
  justify-self: center;
  grid-column: 2;
  grid-row: 1;
  color: var(--dim);
  font-size: calc(0.82rem * var(--scale));
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.streak span { color: var(--ink); font-weight: 600; }
.bar-actions {
  justify-self: end;
  grid-column: 3;
  grid-row: 1;
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.mode {
  grid-column: 2;
  grid-row: 2;
  justify-self: center;
  display: flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 2px;
}
.easy-mode {
  grid-column: 3;
  grid-row: 2;
  justify-self: end;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 2px;
  cursor: pointer;
  z-index: 4;
  pointer-events: auto;
  max-width: 100%;
}
.easy-mode-label {
  color: var(--dim);
  font-size: calc(0.68rem * var(--scale));
  font-weight: 600;
  line-height: 1.2;
  text-align: right;
}
.switch {
  flex: none;
  width: 44px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #2b3841;
  position: relative;
  cursor: pointer;
  transition: background 0.18s ease;
}
.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e8f0f4;
  transition: transform 0.18s ease;
}
.switch[aria-checked="true"] { background: var(--ok); }
.switch[aria-checked="true"]::after { transform: translateX(18px); }
.mode-btn {
  font-family: inherit;
  font-size: calc(0.74rem * var(--scale));
  font-weight: 600;
  color: var(--dim);
  background: transparent;
  border: 0;
  padding: calc(6px * var(--scale)) calc(14px * var(--scale));
  cursor: pointer;
  white-space: nowrap;
}
.mode-btn[aria-pressed="true"] {
  color: var(--ink);
  background: #1a262c;
}

/* The way into the instructions, kept at the top where it is reachable before
   the first guess. */
.help-btn {
  font-family: inherit;
  font-size: calc(0.74rem * var(--scale));
  font-weight: 600;
  color: var(--dim);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: calc(6px * var(--scale)) calc(12px * var(--scale));
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.help-btn:hover { color: var(--ink); border-color: var(--dim); }

.wrap {
  width: 100%;
  max-width: calc(520px * var(--scale));
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---------- the grid ---------- */

.board {
  display: grid;
  grid-template-rows: repeat(6, auto);
  gap: var(--gap);
  margin: calc(18px * var(--scale)) 0 calc(10px * var(--scale));
}

.row {
  display: grid;
  grid-template-columns: repeat(5, var(--cell));
  gap: var(--gap);
}

.cell {
  width: var(--cell);
  height: var(--cell);
  perspective: calc(420px * var(--scale));
}

.cell-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform var(--flip-ms) ease;
}

.cell.flipped .cell-inner { transform: rotateX(180deg); }

.face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: calc(7px * var(--scale));
  border: calc(2px * var(--scale)) solid var(--line);
  background: transparent;
  overflow: hidden;
}

.face.front canvas,
.face.back canvas {
  width: 100%;
  height: 100%;
  display: block;
  background: transparent;
}

.face.back {
  transform: rotateX(180deg);
  background: var(--bg);
}

.cell.filled .face.front { border-color: var(--line-strong); }
.cell.found .face.back { border-color: var(--ok); box-shadow: inset 0 0 0 calc(1px * var(--scale)) var(--ok); }

.row.shake { animation: shake 0.5s cubic-bezier(.36,.07,.19,.97); }

@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}

.row.won .face.back { border-color: var(--ok); }

/* Hard hides which letters are correct. Scope the per-box gate to
   .row:not(.won) so a fully-correct guess still outlines. Keys stay
   plain until the word is solved (html.round-won). Easy is the absence
   of hard-hints. */
html.hard-hints .row:not(.won) .cell.found .face.back { border-color: var(--line); box-shadow: none; }
html.hard-hints .fig-cell.found { border-color: var(--line); box-shadow: none; }
html.hard-hints .fig-cell.found.ring,
.fig-cell.found.ring { border-color: var(--ok); box-shadow: inset 0 0 0 1px var(--ok); }
html.hard-hints:not(.round-won) .key.found { background: #2b3841; color: var(--ink); }

/* ---------- toast + status ---------- */

.toast {
  position: absolute;
  top: calc(76px * var(--scale));
  left: 50%;
  transform: translate(-50%, -8px);
  background: var(--ink);
  color: #0b1216;
  font-size: calc(0.82rem * var(--scale));
  font-weight: 600;
  padding: calc(9px * var(--scale)) calc(14px * var(--scale));
  border-radius: calc(9px * var(--scale));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 5;
  white-space: nowrap;
}

.toast.show { opacity: 1; transform: translate(-50%, 0); }

.status {
  margin: 4px 0 0;
  min-height: 1.3em;
  font-size: calc(0.84rem * var(--scale));
  color: var(--dim);
  text-align: center;
}
.status.ok { color: var(--ok); }

/* The row keeps its height even when empty, so the keyboard never shifts down
   and the fit sum below stays honest. */
.controls {
  min-height: calc(44px * var(--scale));
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.controls .btn { margin-top: calc(8px * var(--scale)); }

.btn {
  font-family: inherit;
  font-size: calc(0.86rem * var(--scale));
  font-weight: 600;
  border-radius: calc(10px * var(--scale));
  border: 1px solid var(--line);
  background: transparent;
  color: var(--dim);
  padding: calc(9px * var(--scale)) calc(16px * var(--scale));
  cursor: pointer;
}
.btn:hover { color: var(--ink); border-color: var(--dim); }

/* ---------- keyboard ---------- */

.keys {
  width: 100%;
  max-width: calc(500px * var(--scale));
  margin: calc(16px * var(--scale)) 0 calc(4px * var(--scale));
  display: flex;
  flex-direction: column;
  gap: calc(6px * var(--scale));
}

.keys .krow { display: flex; gap: calc(5px * var(--scale)); justify-content: center; }

.key {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--key-h, 46px);
  border: 0;
  border-radius: calc(6px * var(--scale));
  background: #2b3841;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
  user-select: none;
}

/* The key's letter is the same pixel art as the boxes, drawn as an SVG so it
   takes the key's colour: light on a plain key, dark on a found one. */
.key svg {
  display: block;
  fill: currentColor;
  height: calc(var(--key-h, 46px) * 0.47);
  width: auto;
}

.key:active { background: #3a4a55; }
.key.wide { flex: 1.6 1 auto; }
.key.wide svg { height: calc(var(--key-h, 46px) * 0.22); }
.key.found { background: var(--ok); color: #06181f; }

/* ---------- the notes below ---------- */

.card {
  width: 100%;
  max-width: 520px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 15px 16px;
  margin-top: 16px;
}

h2 { margin: 0 0 10px; font-size: 0.88rem; font-weight: 600; }

.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.legend li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  color: var(--dim);
  font-size: 0.79rem;
  line-height: 1.45;
}

.swatch {
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  margin-top: 2px;
  border: 1px solid var(--line);
}
.swatch.ok { background: var(--ok); border-color: var(--ok); }
.swatch.none { background: var(--bg); }

details { margin-top: 12px; color: var(--dim); font-size: 0.79rem; line-height: 1.5; }
summary { cursor: pointer; color: var(--ink); font-weight: 600; }
details p { margin: 9px 0 0; }

/* ---------- the instructions ---------- */

dialog.help {
  width: min(620px, calc(100vw - 24px));
  container-type: inline-size;
  /* 94dvh: the whole instruction box — lede, all three equations and the outcomes
     row — has to sit inside the screen it is opened on, phones included. 88dvh
     left the last row 6px below the box on a 480px-tall screen. */
  max-height: min(94dvh, 720px);
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  color: var(--ink);
  padding: 16px 16px 20px;
  font-family: inherit;
}
dialog.help::backdrop { background: rgba(3, 7, 10, 0.74); }
#stats { animation: statsIn 0.35s ease; }
#stats::backdrop { animation: statsIn 0.35s ease; }
@keyframes statsIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.help-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.help-top h2 { margin: 0; font-size: 0.95rem; }
.help-lede { color: var(--dim); font-size: 0.8rem; line-height: 1.5; margin: 10px 0 12px; }

.stats-wordle {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 4px 0 14px;
}
.stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 4px 0 14px;
}
.stat { text-align: center; padding: 4px 2px 2px; }
.stat-n {
  font-size: 1.8rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  line-height: 1.1;
}
.stat-l {
  margin-top: 6px;
  color: var(--dim);
  font-size: 0.72rem;
  line-height: 1.25;
}

/* Wordle-style guess graph: one bar per try count, today's win in the shared green. */
.dist { display: grid; gap: 6px; margin: 4px 0 2px; }
.dist-row {
  display: grid;
  grid-template-columns: 1.1em 1fr;
  gap: 8px;
  align-items: center;
}
.dist-n {
  color: var(--dim);
  font-size: 0.78rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.dist-track { min-height: 20px; }
.dist-bar {
  min-width: 1.7rem;
  height: 20px;
  background: #3a4a55;
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 7px;
  border-radius: 3px;
  font-variant-numeric: tabular-nums;
  box-sizing: border-box;
}
.dist-bar.today { background: var(--ok); color: #06181f; }

/* The pictures are drawn by the game's own glyph engine, so they cannot drift
   away from what the boxes do. Their sizes are read from the panel they sit in
   (cqw — one percent of the panel's own width), not from the window: three boxes,
   two arrows, the answer and its remark have to fit wherever the panel is drawn,
   and they scale together to do it. */
.fig {
  --figbox: clamp(28px, 8cqw, 48px);
  --figcol: clamp(44px, 15cqw, 96px);
  --figcol-a: clamp(78px, 21cqw, 124px);
  --figgap: clamp(4px, 1.2cqw, 8px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--figgap);
  flex-wrap: wrap;
  margin: 14px 0 6px;
}
.fig-item { display: flex; flex-direction: column; align-items: center; width: var(--figcol, 96px); }
/* The column holding the answer box: wider than a box, so the remark under it
   breaks into two short lines rather than five. */
.fig-item-answer { width: var(--figcol-a, 124px); }
.fig-cell {
  width: var(--figbox, 52px);
  height: var(--figbox, 52px);
  border: 2px solid var(--line);
  border-radius: 7px;
  background: var(--bg);
  overflow: hidden;
}
.fig-cell canvas { width: 100%; height: 100%; display: block; }
/* The hidden letter is the one thing the game never shows: dashed here, and
   only here. */
.fig-cell.locked { border-style: dashed; border-color: var(--line-strong); }
.fig-cell.found { border-color: var(--ok); box-shadow: inset 0 0 0 1px var(--ok); }
.fig-arrow { color: var(--dim); font-size: 0.86rem; padding-top: 18px; }
/* The remark under a box: smaller than the caption, because it is talking about
   the picture rather than naming it. */
.fig-item .fig-note-cell { font-size: 0.6rem; line-height: 1.35; text-align: center; margin: 6px 0 0; }
.fig-cap { margin-top: 6px; font-size: 0.66rem; line-height: 1.3; color: var(--dim); text-align: center; }
.fig-note { color: var(--dim); font-size: 0.78rem; line-height: 1.5; margin: 10px 0 0; }
.fig-label { color: var(--ink); font-size: 0.8rem; font-weight: 600; margin: 20px 0 0; }
.fig-note b { color: var(--ink); }

/* A narrow panel: the spacing tightens so the extra equation still fits the box
   without anything dropping below the fold. The figures size themselves from the
   panel width, so only the spacing is handled here. */
@media (max-width: 560px) {
  .fig { margin: 8px 0 2px; }
  dialog.help { padding: 12px 12px 14px; }
  .help-lede { margin: 6px 0 8px; font-size: 0.74rem; }
  .fig-arrow { font-size: 0.72rem; padding-top: 12px; }
  .fig-cap, .fig-item .fig-note-cell { font-size: 0.54rem; }
  .fig-item .fig-note-cell { margin: 4px 0 0; }
  .fig-label { margin: 8px 0 0; }
}

@media (max-width: 420px) {
.key { font-size: 0.8rem; }
.keys { gap: 5px; }
.bar { padding-top: 10px; }
.easy-mode { flex-direction: column; align-items: flex-end; gap: 4px; }
.easy-mode-label { font-size: 0.58rem; }
}