/* Element Five Guesses: an amber terminal on a coarse pixel grid. Square corners, no blur, steps. */

:root {
  --u: 4px;
  --grid: 16px;
  --dim: var(--ak-choice-border);
  --mid: var(--ak-btn-fill);
  --hot: var(--ak-accent);
  --dark: color-mix(in srgb, var(--ak-choice-border) 34%, var(--ak-bg));
  --stripe: color-mix(in srgb, var(--ak-choice-border) 70%, var(--ak-bg));
  --line: color-mix(in srgb, var(--ak-accent) 9%, transparent);
  --st: env(safe-area-inset-top, 0px);
  --sr: env(safe-area-inset-right, 0px);
  --sb: env(safe-area-inset-bottom, 0px);
  --sl: env(safe-area-inset-left, 0px);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  min-height: 100dvh;
  color: var(--ak-ink);
  font-family: var(--ak-font-body);
  background-color: var(--ak-bg);
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px),
    var(--ak-bg-art),
    var(--ak-backdrop-layer, linear-gradient(var(--ak-bg), var(--ak-bg)), none);
  background-size: var(--grid) var(--grid), var(--grid) var(--grid), var(--ak-bg-size), cover, cover;
  background-position: 0 0, 0 0, 0 0, center, center;
  overflow-x: hidden;
}

button {
  font: inherit;
  color: inherit;
  border-radius: 0;
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible {
  outline: 3px solid var(--ak-focus);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- first screen (drawn by start.js): a solid plate for the title, a loud start key ---------- */

html body #activity-start .ak-head {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 14px 18px 12px;
  background: var(--ak-bg);
  border: 4px solid var(--ak-accent);
  box-shadow: 6px 6px 0 0 var(--ak-choice-border);
}

/* Hard pixel edges, no soft glow. */
html body #activity-start .ak-logo {
  filter: none !important;
}

html body #activity-start .ak-tagline {
  font-family: var(--ak-font-display);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--ak-ink);
}

html body #activity-start .ak-go {
  min-height: 64px;
  border: 4px solid var(--ak-ink);
  background: var(--ak-accent);
  color: var(--ak-btn-ink);
  font-family: var(--ak-font-display);
  font-size: 36px;
  font-weight: 400;
  letter-spacing: 0.12em;
  /* The solid ring keeps any text it floats over from showing through. */
  box-shadow: 6px 6px 0 0 var(--ak-choice-border), 0 0 0 12px var(--ak-bg);
}

html body #activity-start .ak-go::after {
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 0.75em;
  margin-left: 0.3em;
  vertical-align: -0.05em;
  background: var(--ak-btn-ink);
}

html body #activity-start .ak-go:active {
  background: var(--ak-btn-active);
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 12px var(--ak-bg);
}

@media (hover: hover) {
  html body #activity-start .ak-go:hover {
    background: var(--ak-ink);
  }
}

@media (prefers-reduced-motion: no-preference) {
  html body #activity-start .ak-go::after {
    animation: blink 1s steps(1, end) infinite;
  }
}

/* ---------- frame and layout (portrait first) ---------- */

.play {
  --gap: var(--u);
  --pad: calc(var(--u) * 2);
  --key-h: 48px;
  --len: 5;
  --clue-h: 84px;
  --cell-max: 64px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  /* The board sits right on the keys, so the square being changed and the letter that changes it
     are seen together; messages and the legend read above it. */
  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
  grid-template-areas:
    "hud hud"
    "clue clerk"
    "say say"
    "legend legend"
    "board board"
    "keys keys";
  gap: var(--gap);
  width: 100%;
  max-width: 560px;
  height: 100dvh;
  margin: 0 auto;
  padding: calc(var(--pad) + var(--st)) calc(var(--pad) + var(--sr)) calc(var(--pad) + var(--sb)) calc(var(--pad) + var(--sl));
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

.play[hidden] {
  display: none;
}

.stage,
.ctrl {
  display: contents;
}

/* ASCII frame: dashed edge with plus corners, drawn on the grid. */
.play::before {
  content: "";
  position: absolute;
  inset: calc(var(--st) + 2px) calc(var(--sr) + 2px) calc(var(--sb) + 2px) calc(var(--sl) + 2px);
  border: 2px dashed var(--dim);
  pointer-events: none;
}

.hud {
  grid-area: hud;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 2);
  min-height: 48px;
  padding-right: 60px;
}

.mute {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 2px solid var(--dim);
  background: var(--ak-bg);
  color: var(--hot);
  cursor: pointer;
}

.mute .cross,
.mute[aria-pressed="true"] .wave {
  display: none;
}

.mute[aria-pressed="true"] .cross {
  display: inline;
}

.logo {
  flex: none;
  display: block;
  height: 40px;
  width: auto;
  image-rendering: auto;
}

.hud-line {
  display: grid;
  grid-template-columns: auto auto;
  gap: 2px calc(var(--u) * 3);
  margin: 0;
  padding: 2px 6px;
  font-family: var(--ak-font-display);
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--ak-ink-muted);
  background: var(--ak-bg);
}

.hud-line span {
  white-space: nowrap;
}

.hud-line b {
  font-weight: 400;
  color: var(--hot);
}

/* ---------- clue strip ---------- */

.clue {
  grid-area: clue;
  display: flex;
  align-items: stretch;
  gap: calc(var(--u) * 2);
  min-height: var(--clue-h);
}

.clue-card {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: var(--clue-h);
  height: var(--clue-h);
  border: 4px solid var(--mid);
  background: var(--ak-bg);
  box-shadow: inset 0 -12px 0 0 var(--ak-surface), inset 0 -14px 0 0 var(--mid);
}

.clue-num {
  position: absolute;
  top: 2px;
  left: 4px;
  font-family: var(--ak-font-display);
  font-size: 16px;
  line-height: 1;
  color: var(--ak-ink-muted);
}

.clue-sym {
  margin-bottom: 10px;
  font-family: var(--ak-font-display);
  font-size: calc(var(--clue-h) * 0.5);
  line-height: 1;
  color: var(--hot);
}

.clue-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 4px 8px;
  background: var(--ak-bg);
  border-left: 4px solid var(--dim);
}

.clue-head,
.clue-line {
  margin: 0;
}

.clue-head {
  font-family: var(--ak-font-display);
  font-size: 20px;
  line-height: 1;
  color: var(--hot);
  letter-spacing: 0.04em;
}

.clue-line {
  font-size: 13px;
  line-height: 1.3;
  color: var(--ak-ink);
}

.clue-log {
  margin: 0;
  font-size: 12px;
  line-height: 1.25;
  color: var(--ak-ink-muted);
}

.clerk {
  --level: 0;
  grid-area: clerk;
  align-self: center;
  position: relative;
  height: var(--clue-h);
  aspect-ratio: 211 / 384;
}

.clerk img {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Liquid rises one block per guess above the painted bottom third. */
.clerk .liquid {
  position: absolute;
  left: 26.5%;
  width: 36%;
  bottom: 45.8%;
  height: calc(var(--level) * 2.6%);
  background: var(--mid);
}

.clerk .fizz {
  position: absolute;
  left: 26.5%;
  width: 36%;
  bottom: 30%;
  height: 34%;
  overflow: hidden;
  visibility: hidden;
}

.clerk .fizz i {
  position: absolute;
  bottom: 0;
  width: 18%;
  aspect-ratio: 1;
  background: var(--ak-ink);
}

.clerk .fizz i:nth-child(1) { left: 10%; }
.clerk .fizz i:nth-child(2) { left: 45%; }
.clerk .fizz i:nth-child(3) { left: 75%; }

.clerk.is-fizzing .fizz {
  visibility: visible;
}

.clerk .stamp {
  position: absolute;
  right: -2px;
  top: 52%;
  width: 30%;
  aspect-ratio: 1;
  background: var(--hot);
  border: 2px solid var(--ak-bg);
  visibility: hidden;
}

/* ---------- board ---------- */

/* The board sizes from the box it is given, capped by the screen, so nothing below it is ever covered. */
.board-wrap {
  --track-h: 24px;
  grid-area: board;
  display: grid;
  grid-template-rows: var(--track-h) auto;
  gap: var(--gap);
  place-items: center;
  /* Upright, spare height goes above the board, never between it and the keys. */
  align-content: end;
  min-height: 0;
  container-type: size;
}

/* The run ahead: one block per round with what it pays. Framed is now, solid solved, dark missed. */
.track {
  display: flex;
  gap: 4px;
  height: var(--track-h);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--ak-font-display);
  font-size: 18px;
  line-height: 1;
}

.track li {
  display: grid;
  place-items: center;
  min-width: 36px;
  padding: 0 4px;
  background: var(--ak-bg);
  box-shadow: inset 0 0 0 2px var(--dim);
  color: var(--ak-ink-muted);
}

.track li.is-double {
  color: var(--hot);
}

.track li[data-state="now"] {
  box-shadow: inset 0 0 0 3px var(--hot);
  color: var(--hot);
}

.track li[data-state="right"] {
  background: var(--ak-choice-selected-bg);
  box-shadow: none;
  color: var(--ak-choice-selected-ink);
}

.track li[data-state="none"] {
  background: var(--dark);
  box-shadow: none;
}

.track .track-note {
  min-width: 0;
  box-shadow: none;
  color: var(--hot);
}

.board {
  --board-pad: var(--u);
  --cell: max(16px, min(
    calc((100cqw - 2 * var(--board-pad) - 2px - (var(--len) - 1) * var(--gap)) / var(--len)),
    calc((100cqh - 12px - var(--track-h) - var(--gap)) / 5 - var(--gap)),
    calc((100dvw - 24px) / var(--len)),
    14dvh,
    var(--cell-max)
  ));
  display: grid;
  grid-template-rows: repeat(5, var(--cell));
  gap: var(--gap);
  padding: var(--board-pad);
  background: color-mix(in srgb, var(--ak-bg) 88%, transparent);
}

/* Eight or nine across: thinner gaps and padding so the squares keep as much size as they can. */
.board.is-long {
  --gap: 2px;
  --board-pad: 2px;
}

.board.is-long .cell[data-state="near"] {
  border-width: 3px;
}

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

.row.is-active {
  outline: 2px dashed var(--hot);
  outline-offset: 2px;
}

.row.is-refused {
  outline: 3px solid var(--ak-ink);
  outline-offset: 2px;
}

.cell,
.swatch {
  position: relative;
  display: grid;
  place-items: center;
  font-family: var(--ak-font-display);
  text-transform: uppercase;
  line-height: 1;
}

.cell {
  width: var(--cell);
  height: var(--cell);
  font-size: calc(var(--cell) * 0.8);
}

.cell[data-state="empty"] {
  background-color: var(--ak-bg);
  background-image: url("./art/letter-cells.png");
  background-size: calc(100% * 384 / 74) calc(100% * 163 / 81);
  background-position: 9.03% 53.66%;
  background-repeat: no-repeat;
}

.cell[data-state="typed"] {
  background: var(--ak-bg);
  border: 3px solid var(--ak-ink);
  color: var(--ak-ink);
}

.cell[data-state="right"],
.swatch[data-state="right"] {
  background: var(--ak-choice-selected-bg);
  border: 3px solid var(--hot);
  color: var(--ak-choice-selected-ink);
}

.cell[data-state="near"],
.swatch[data-state="near"] {
  background: repeating-linear-gradient(-45deg, var(--stripe) 0 6px, var(--ak-bg) 6px 12px);
  border: 4px solid var(--hot);
  color: var(--ak-ink);
  text-shadow: 2px 0 0 var(--ak-bg), -2px 0 0 var(--ak-bg), 0 2px 0 var(--ak-bg), 0 -2px 0 var(--ak-bg);
}

.cell[data-state="none"],
.swatch[data-state="none"] {
  background: var(--dark);
  border: 3px solid var(--dark);
  color: var(--ak-ink-muted);
}

.cell.is-short {
  outline: 3px solid var(--ak-ink);
  outline-offset: -7px;
}

.cell.is-cursor::after {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 14%;
  height: 14%;
  background: var(--hot);
}

/* ---------- legend ---------- */

.legend {
  grid-area: legend;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0;
  padding: 2px 8px;
  list-style: none;
  font-size: 13px;
  line-height: 20px;
  color: var(--ak-ink);
  background: var(--ak-bg);
  justify-self: center;
}

.legend li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.swatch {
  flex: none;
  width: 20px;
  height: 20px;
  border-width: 2px !important;
}

/* ---------- teaching ---------- */

/* Upright, the lesson takes the legend, board and keys: the keys cannot be used until it is read. */
.teach {
  grid-row: legend-start / keys-end;
  grid-column: 1 / -1;
  z-index: 3;
  align-self: center;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 2);
  width: min(100%, 420px);
  max-height: 100%;
  overflow: auto;
  padding: calc(var(--u) * 3);
  background: var(--ak-bg);
  border: 4px solid var(--hot);
  color: var(--ak-ink);
  font-size: 18px;
  line-height: 1.3;
}

.teach[hidden] {
  display: none;
}

/* How a guess goes in, before what its patterns mean. */
.teach-steps {
  display: grid;
  gap: 4px;
  width: 100%;
  margin: 0;
  padding: 0 0 calc(var(--u) * 1.5) 1.6em;
  border-bottom: 2px dashed var(--dim);
  font-size: 16px;
  line-height: 1.3;
}

.teach-steps li::marker {
  color: var(--hot);
  font-family: var(--ak-font-display);
}

.teach-steps b {
  font-weight: 600;
  color: var(--hot);
}

.teach-head {
  margin: 0;
  font-family: var(--ak-font-display);
  font-size: 24px;
  text-align: center;
  color: var(--ak-ink-muted);
}

.teach-head b {
  font-weight: 400;
  color: var(--hot);
}

.teach-row {
  display: flex;
  gap: var(--u);
}

.teach-row .cell {
  width: 48px;
  height: 48px;
  font-size: 38px;
}

.teach-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.teach-list li {
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: center;
  gap: 10px;
}

.teach-list .swatch {
  width: 24px;
  height: 24px;
}

.teach-list b {
  font-family: var(--ak-font-display);
  font-size: 24px;
  font-weight: 400;
  color: var(--hot);
}

.got-it {
  min-width: 200px;
  min-height: 56px;
  padding: 0 24px;
  border: 0;
  background: var(--ak-btn-fill);
  color: var(--ak-btn-ink);
  font-family: var(--ak-font-display);
  font-size: 30px;
  box-shadow: 4px 4px 0 0 var(--dim);
  cursor: pointer;
}

.got-it:active {
  background: var(--ak-btn-active);
  transform: translate(4px, 4px);
  box-shadow: none;
}

.play[data-phase="teach"] .board-wrap,
.play[data-phase="teach"] .legend,
.play[data-phase="teach"] .keys,
.play[data-phase="teach"] .check {
  visibility: hidden;
}

/* ---------- message line ---------- */

/* Fixed height: a message growing or shrinking must never move the keys under a finger. */
.say {
  grid-area: say;
  height: var(--say-h, 88px);
  overflow: hidden;
  margin: 0;
  padding: 4px 8px;
  background: var(--ak-bg);
  border-left: 4px solid var(--hot);
}

.turn,
.msg {
  margin: 0;
}

.turn {
  font-family: var(--ak-font-display);
  font-size: 20px;
  line-height: 1;
  color: var(--hot);
  letter-spacing: 0.04em;
  white-space: nowrap;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

/* The number this run is chasing, pinned to the right of the try line. */
.goal {
  flex: none;
  padding: 0 4px;
  color: var(--ak-ink-muted);
}

.goal.is-hot {
  background: var(--hot);
  color: var(--ak-bg);
}

.msg {
  font-size: 15px;
  line-height: 1.3;
  color: var(--ak-ink);
}

.msg.is-wrong {
  color: var(--ak-ink);
}

.msg.is-wrong::before {
  content: "! ";
  font-weight: 600;
  color: var(--hot);
}

/* ---------- keys ---------- */

.keys {
  grid-area: keys;
  display: grid;
  grid-template-columns: repeat(7, minmax(48px, 1fr));
  grid-auto-rows: var(--key-h);
  gap: var(--gap);
  align-content: end;
}

.key {
  position: relative;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  border: 0;
  background-color: var(--ak-bg);
  background-image: url("./art/key-block.png");
  background-size: calc(100% * 384 / 75) calc(100% * 316 / 72);
  background-position: 12.3% 23.36%;
  background-repeat: no-repeat;
  color: var(--ak-ink);
  font-family: var(--ak-font-display);
  font-size: 30px;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
}

.key[data-mark="near"] {
  background-position: 50.16% 23.36%;
  text-shadow: 2px 0 0 var(--ak-bg), -2px 0 0 var(--ak-bg), 0 2px 0 var(--ak-bg), 0 -2px 0 var(--ak-bg);
}

.key[data-mark="none"] {
  background-position: 88.03% 23.36%;
  color: var(--ak-ink-muted);
  filter: brightness(0.62);
}

.key[data-mark="right"] {
  background: var(--ak-choice-selected-bg);
  box-shadow: inset 0 0 0 3px var(--hot);
  color: var(--ak-choice-selected-ink);
}

.key.is-back {
  grid-column: span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--ak-surface);
  box-shadow: inset 0 0 0 3px var(--dim);
  color: var(--hot);
  font-size: 24px;
}

/* Check sits inside the key block: its own full row upright, a wide key on the last row sideways. */
.check {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 16px;
  border: 0;
  background: var(--ak-btn-fill);
  color: var(--ak-btn-ink);
  font-family: var(--ak-font-display);
  font-size: 28px;
  line-height: 1;
  box-shadow: 4px 4px 0 0 var(--dim);
  cursor: pointer;
}

.check.is-ready {
  background: var(--hot);
}

.key:active,
.key.is-hit {
  transform: translateY(4px);
}

.check:active,
.check.is-hit {
  background: var(--ak-btn-active);
  transform: translate(4px, 4px);
  box-shadow: none;
}

@media (hover: hover) {
  .key:hover {
    box-shadow: inset 0 0 0 2px var(--ak-ink);
  }

  .key[data-mark="right"]:hover {
    box-shadow: inset 0 0 0 3px var(--ak-ink);
  }

  .check:hover,
  .got-it:hover,
  .result-btn.is-main:hover {
    background: var(--ak-btn-hover);
  }

  .mute:hover,
  .result-btn:hover {
    border-color: var(--hot);
  }
}

.play[data-phase="teach"] .keys,
.play[data-phase="teach"] .check,
.play[data-phase="reveal"] .keys,
.play[data-phase="reveal"] .check,
.play[data-phase="ending"] .keys,
.play[data-phase="ending"] .check {
  pointer-events: none;
  cursor: default;
}

/* Taken and being checked: no longer a lit button asking to be pressed. */
.play[data-phase="reveal"] .check,
.play[data-phase="ending"] .check {
  background: var(--ak-surface);
  box-shadow: inset 0 0 0 3px var(--dim);
  color: var(--hot);
}

.play[data-phase="reveal"] .check svg,
.play[data-phase="ending"] .check svg {
  display: none;
}

.play[data-phase="result"] .keys,
.play[data-phase="result"] .check {
  visibility: hidden;
}

/* ---------- result: big blocky type, blinking prompt ---------- */

.result {
  grid-area: keys;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(var(--u) * 2);
  min-height: 0;
  padding: calc(var(--u) * 3);
  background: var(--ak-bg);
  border: 4px solid var(--hot);
  overflow: hidden;
}

.result[hidden] {
  display: none;
}

.result-name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 2);
}

.result-word {
  display: flex;
  gap: 3px;
}

.result-word span {
  display: grid;
  place-items: center;
  width: var(--big-cell, 40px);
  height: var(--big-cell, 40px);
  font-family: var(--ak-font-display);
  font-size: calc(var(--big-cell, 40px) * 0.9);
  line-height: 1;
  text-transform: uppercase;
}

.result-word span {
  background: var(--ak-choice-selected-bg);
  color: var(--ak-choice-selected-ink);
}

.result.is-missed .result-word span {
  background: var(--ak-bg);
  border: 3px solid var(--hot);
  color: var(--hot);
}



.result-says,
.result-run,
.result-prompt {
  margin: 0;
  text-align: center;
}

.result-says {
  font-size: 17px;
  line-height: 1.3;
  color: var(--ak-ink);
}



/* The final round: the clue card and active row go hot so the step up shows. */
.play.is-final .clue-card {
  border-color: var(--hot);
}

.play.is-final .row.is-active {
  outline-style: solid;
  outline-width: 3px;
}





/* The surprise double round: the clue card wears stripes, the row frame goes solid. */
.play.is-double .clue-card {
  border-color: var(--hot);
  border-style: double;
  border-width: 6px;
}

.play.is-double .row.is-active {
  outline-style: solid;
  outline-width: 3px;
}

.result-run {
  font-size: 16px;
  line-height: 1.3;
  color: var(--hot);
}





.result-prompt {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  font-family: var(--ak-font-display);
  font-size: 26px;
  line-height: 1;
  color: var(--hot);
}

.cursor {
  display: inline-block;
  width: 14px;
  height: 22px;
  background: var(--hot);
}

.result-next {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.result-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: calc(var(--u) * 2);
}

.result-btn {
  min-width: 112px;
  min-height: 48px;
  padding: 0 12px;
  white-space: nowrap;
  border: 3px solid var(--dim);
  background: var(--ak-bg);
  color: var(--ak-ink);
  font-family: var(--ak-font-display);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.result-btn.is-main {
  border-color: var(--ak-btn-fill);
  background: var(--ak-btn-fill);
  color: var(--ak-btn-ink);
  box-shadow: 4px 4px 0 0 var(--dim);
}

.result-btn:active {
  transform: translate(4px, 4px);
  box-shadow: none;
}

/* The report: a hot header bar like a readout strip, a periodic tile beside the name, a dotted ledger. */
.result-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin: calc(var(--u) * -3) calc(var(--u) * -3) 0;
  padding: 3px 10px 2px;
  background: var(--hot);
  color: var(--ak-btn-ink);
  font-family: var(--ak-font-display);
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0.06em;
}

.result-verdict {
  padding: 0 6px;
  border: 2px solid var(--ak-btn-ink);
}

.result.is-missed .result-head {
  background: var(--ak-choice-border);
}

.result-tile {
  --tile: calc(var(--big-cell, 40px) * 1.45);
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: var(--tile);
  height: var(--tile);
  border: 3px solid var(--hot);
  background: var(--ak-bg);
  box-shadow: inset 0 calc(var(--tile) * -0.18) 0 0 var(--ak-surface), inset 0 calc(var(--tile) * -0.18 - 2px) 0 0 var(--mid), 4px 4px 0 0 var(--dim);
}

.result-num {
  position: absolute;
  top: 2px;
  left: 4px;
  font-family: var(--ak-font-display);
  font-size: 12px;
  line-height: 1;
  color: var(--ak-ink-muted);
}

.result-symbol {
  margin: 8px 0 calc(var(--tile) * 0.18);
  font-family: var(--ak-font-display);
  font-size: calc(var(--tile) * 0.46);
  line-height: 1;
  color: var(--hot);
}

.result-ledger {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 2px 14px;
  margin: 0;
  padding: 6px 0 2px;
  border-top: 2px dashed var(--dim);
  font-family: var(--ak-font-display);
  font-size: 19px;
  line-height: 1;
  color: var(--ak-ink);
}

.ledger-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
}

.ledger-row.is-wide {
  grid-column: 1 / -1;
}

.ledger-row.is-tally {
  grid-column: span 2;
}

.tally {
  flex-wrap: nowrap;
}

.ledger-row dt {
  flex: none;
  color: var(--ak-ink-muted);
  letter-spacing: 0.06em;
}

/* Square dot leaders, like a printout. */
.ledger-row dd {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  justify-content: flex-end;
  gap: 4px;
  min-width: 0;
  margin: 0;
  padding-left: 6px;
  background: radial-gradient(var(--dim) 1px, transparent 1.5px) left 60% / 6px 6px repeat-x;
  text-align: right;
}

.ledger-row.is-wide dd {
  flex-wrap: wrap;
}

.ledger-row.is-next dd {
  justify-content: flex-start;
  background: none;
  text-align: left;
}

.ledger-row.is-hot dd {
  color: var(--hot);
}

.ledger-row dd > *,
.ledger-row dd {
  overflow-wrap: anywhere;
}

.trace,
.tally {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px 6px;
  padding-left: 4px;
  background: var(--ak-bg);
}

.trace-guess {
  display: inline-flex;
  gap: 1px;
}

.trace i,
.tally i {
  display: block;
  width: 6px;
  height: 10px;
  background: var(--ak-bg);
  box-shadow: inset 0 0 0 1px var(--dim);
}

.tally i {
  width: 12px;
  height: 12px;
}

.trace i[data-state="right"],
.tally i[data-state="right"] {
  background: var(--hot);
  box-shadow: none;
}

.trace i[data-state="near"] {
  background: repeating-linear-gradient(-45deg, var(--hot) 0 2px, var(--ak-bg) 2px 4px);
  box-shadow: none;
}

.trace i[data-state="none"],
.tally i[data-state="none"] {
  background: var(--dark);
}

/* ---------- celebration layer ---------- */

.bubbles {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  overflow: hidden;
}

.bubbles i {
  position: absolute;
  bottom: -24px;
  width: var(--s, 12px);
  height: var(--s, 12px);
  background: var(--hot);
  border: 2px solid var(--ak-bg);
}

.bubbles i.is-dim {
  background: var(--mid);
}

.play[data-phase="result"] .legend {
  display: none;
}

/* Upright, the clue strip steps aside for the card so the board keeps its size. */
@media (orientation: portrait) {
  .play[data-phase="result"] .clue,
  .play[data-phase="result"] .clerk {
    display: none;
  }
}

/* Short upright screens: a tighter clue strip and message box leave the board its rows. */
@media (orientation: portrait) and (max-height: 700px) {
  .play {
    --clue-h: 68px;
  }

  .clue-log {
    display: none;
  }

  .clue-head {
    font-size: 17px;
  }

  .clue-line {
    font-size: 12px;
    line-height: 1.2;
  }

  .say {
    --say-h: 80px;
  }

  .msg {
    font-size: 14px;
    line-height: 1.25;
  }

  .teach {
    gap: var(--u);
    padding: calc(var(--u) * 2);
    font-size: 16px;
  }

  .teach-steps {
    padding-bottom: var(--u);
    font-size: 14px;
  }

  .teach-head {
    font-size: 20px;
  }

  .teach-row .cell {
    width: 40px;
    height: 40px;
    font-size: 32px;
  }
}

/* ---------- narrowest phones: seven 48px keys still fit ---------- */

@media (max-width: 379px) {
  .play {
    --pad: 6px;
  }

  .keys {
    gap: 2px;
  }

  .turn {
    font-size: 18px;
  }

  .legend {
    gap: 2px 10px;
    font-size: 12px;
  }
}

/* ---------- sideways: board on one side, controls on the other ---------- */

@media (orientation: landscape) {
  .play {
    --ctrl-w: clamp(412px, 46dvw, 470px);
    --clue-h: 52px;
    --cell-max: 76px;
    grid-template-columns: minmax(0, 1fr) var(--ctrl-w);
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "stage ctrl";
    column-gap: calc(var(--pad) * 1.5);
    max-width: 1180px;
  }

  .stage {
    grid-area: stage;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas: "hud" "clue" "board";
    gap: var(--gap);
    min-height: 0;
  }

  .ctrl {
    grid-area: ctrl;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "clerk legend"
      "keys keys"
      "say say";
    gap: var(--gap);
    min-height: 0;
  }

  .hud {
    padding-right: 0;
  }

  .board-wrap {
    align-content: center;
  }

  .clue-card {
    border-width: 3px;
    box-shadow: inset 0 -8px 0 0 var(--ak-surface), inset 0 -10px 0 0 var(--mid);
  }

  .clue-num {
    font-size: 13px;
  }

  .clue-sym {
    margin-bottom: 6px;
  }

  .clue-head {
    font-size: 18px;
  }

  .clerk {
    --clue-h: 64px;
  }

  .legend {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: center;
    justify-self: stretch;
    gap: 2px;
    margin-right: 60px;
    padding: 2px 8px;
    font-size: 13px;
    line-height: 18px;
  }

  .legend .swatch {
    width: 18px;
    height: 18px;
  }

  .keys {
    grid-template-columns: repeat(8, minmax(48px, 1fr));
    align-content: center;
  }

  .turn {
    font-size: 18px;
  }

  .say {
    --say-h: 76px;
  }

  .play[data-phase="result"] .say {
    height: auto;
  }

  .msg {
    font-size: 14px;
  }

  .check {
    grid-column: span 4;
    gap: 8px;
    padding: 0 8px;
    font-size: 24px;
  }

  /* Teach: like the report, the lesson takes the whole width under the header,
     how to enter a guess on the left, the worked example on the right. */
  .play[data-phase="teach"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "hud"
      "teach";
  }

  .play[data-phase="teach"] .stage,
  .play[data-phase="teach"] .ctrl {
    display: contents;
  }

  .play[data-phase="teach"] .clue,
  .play[data-phase="teach"] .board-wrap,
  .play[data-phase="teach"] .clerk,
  .play[data-phase="teach"] .legend,
  .play[data-phase="teach"] .say,
  .play[data-phase="teach"] .keys,
  .play[data-phase="teach"] .check {
    display: none;
  }

  .teach {
    grid-area: teach;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "steps head"
      "steps row"
      "steps list"
      "go go";
    align-items: center;
    justify-items: center;
    gap: calc(var(--u) * 1.5) calc(var(--u) * 4);
    width: min(100%, 820px);
    padding: calc(var(--u) * 2) calc(var(--u) * 3);
  }

  .teach[hidden] {
    display: none;
  }

  .teach-steps {
    grid-area: steps;
    align-self: center;
    padding-bottom: 0;
    border-bottom: 0;
    font-size: 18px;
  }

  .teach-head {
    grid-area: head;
    font-size: 22px;
  }

  .teach-row {
    grid-area: row;
  }

  .teach-list {
    grid-area: list;
    align-self: start;
  }

  .got-it {
    grid-area: go;
  }

  .teach-row .cell {
    width: 44px;
    height: 44px;
    font-size: 34px;
  }

  /* Result: the finished board steps away and the report takes the whole width under the header,
     name and verdict on the left, ledger and the next step on the right, at reading size. */
  .play[data-phase="result"] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "hud hud"
      "result result";
  }

  .play[data-phase="result"] .stage,
  .play[data-phase="result"] .ctrl {
    display: contents;
  }

  .play[data-phase="result"] .clue,
  .play[data-phase="result"] .board-wrap,
  .play[data-phase="result"] .clerk,
  .play[data-phase="result"] .legend,
  .play[data-phase="result"] .keys,
  .play[data-phase="result"] .check,
  .play[data-phase="result"] .say {
    display: none;
  }

  .result {
    grid-area: result;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr auto;
    grid-template-areas:
      "head head"
      "name ledger"
      "says ledger"
      "run ledger"
      "next next";
    align-content: start;
    gap: var(--u) calc(var(--u) * 3);
    padding: calc(var(--u) * 2) calc(var(--u) * 3);
  }

  .result[hidden] {
    display: none;
  }

  .result-head {
    grid-area: head;
    margin: calc(var(--u) * -2) calc(var(--u) * -3) 0;
  }

  .result-name {
    grid-area: name;
  }

  .result-says {
    grid-area: says;
  }

  .result-run {
    grid-area: run;
  }

  .result-ledger {
    grid-area: ledger;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 6px 14px;
    font-size: 20px;
  }

  /* Five round blocks fit half a ledger line, so ROUNDS sits beside LOG and the report keeps its height. */
  .result-ledger .ledger-row.is-tally {
    grid-column: span 1;
  }

  /* The next step runs the full width along the bottom: prompt, then its keys, on one line. */
  .result-next {
    grid-area: next;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(var(--u) * 3);
  }

  .result-prompt {
    font-size: 26px;
  }

  .result-actions {
    flex-wrap: nowrap;
  }

  .result-says,
  .result-run {
    font-size: 17px;
    line-height: 1.3;
  }

  .result-btn {
    min-height: 56px;
    font-size: 24px;
  }
}

@media (orientation: landscape) and (max-height: 559px) {
  .result {
    gap: 4px calc(var(--u) * 3);
    padding: 6px calc(var(--u) * 2);
  }

  .result-head {
    margin: -6px calc(var(--u) * -2) 0;
  }

  .result.is-run-end .ledger-row.is-trace {
    display: none;
  }
}

@media (orientation: landscape) and (min-height: 560px) {
  .play {
    --key-h: 56px;
    --clue-h: 72px;
  }

  .clerk {
    --clue-h: 96px;
  }

  .clue-line {
    font-size: 15px;
  }
}

@media (orientation: portrait) and (min-height: 900px) and (min-width: 500px) {
  .play {
    --key-h: 56px;
  }
}

/* ---------- motion: whole steps only ---------- */

@media (prefers-reduced-motion: no-preference) {
  .cell.is-pop {
    animation: pop 160ms steps(1, end);
  }

  .cell.is-flip {
    animation: flip 280ms steps(1, end);
  }

  .row.is-jolt {
    animation: jolt 420ms steps(1, end);
  }

  .row.is-new {
    animation: rowcue 480ms steps(1, end);
  }

  .row.is-win .cell {
    animation: winflash 960ms steps(1, end);
  }

  .cell.is-cursor::after,
  .cursor {
    animation: blink 1s steps(1, end) infinite;
  }

  .clerk {
    animation: bob 2.4s steps(1, end) infinite;
  }

  .clerk.is-stamp {
    animation: stamp 520ms steps(1, end);
  }

  .clerk.is-stamp .stamp {
    visibility: visible;
    animation: stampmark 520ms steps(1, end);
  }

  .clerk.is-stare {
    animation: stare 900ms steps(1, end);
  }

  .clerk.is-fizzing .fizz i {
    animation: fizz 900ms steps(5, end) infinite;
  }

  .clerk.is-fizzing .fizz i:nth-child(2) { animation-delay: 300ms; }
  .clerk.is-fizzing .fizz i:nth-child(3) { animation-delay: 600ms; }

  .bubbles i {
    animation: rise var(--t, 1.6s) steps(10, end) var(--d, 0s) forwards;
  }

  .result:not([hidden]) {
    animation: drop 300ms steps(3, end);
  }

  .got-it,
  .check.is-ready {
    animation: nudge 1.6s steps(1, end) infinite;
  }

  .key.is-hit {
    animation: keyhit 140ms steps(1, end);
  }

  .result:not([hidden]) .result-verdict {
    animation: stampin 420ms steps(3, end) 200ms both;
  }

  .result:not([hidden]) .ledger-row {
    animation: printline 1ms steps(1, end) backwards;
  }

  .result:not([hidden]) .ledger-row:nth-child(1) { animation-delay: 300ms; }
  .result:not([hidden]) .ledger-row:nth-child(2) { animation-delay: 420ms; }
  .result:not([hidden]) .ledger-row:nth-child(3) { animation-delay: 540ms; }
  .result:not([hidden]) .ledger-row:nth-child(4) { animation-delay: 660ms; }
  .result:not([hidden]) .ledger-row:nth-child(5) { animation-delay: 780ms; }
  .result:not([hidden]) .ledger-row:nth-child(6) { animation-delay: 900ms; }
  .result:not([hidden]) .ledger-row:nth-child(7) { animation-delay: 1020ms; }
  .result:not([hidden]) .ledger-row:nth-child(8) { animation-delay: 1140ms; }

  #round-no.is-flash,
  #streak.is-flash,
  .goal.is-flash {
    animation: hudflash 1s steps(1, end);
  }
}

@keyframes pop {
  0% { transform: scale(1.16, 0.84); }
  50% { transform: scale(0.92, 1.08); }
  100% { transform: none; }
}

@keyframes flip {
  0% { transform: scaleY(0.5); }
  25% { transform: scaleY(0.08); }
  50% { transform: scaleY(0.5); }
  75% { transform: scaleY(1.1); }
  100% { transform: none; }
}

@keyframes jolt {
  0% { transform: translateX(var(--grid)); }
  25% { transform: none; }
  50% { transform: translateX(var(--grid)); }
  75% { transform: none; }
}

@keyframes rowcue {
  0% { outline-color: transparent; }
  25% { outline-color: var(--hot); }
  50% { outline-color: transparent; }
  75% { outline-color: var(--hot); }
}

@keyframes winflash {
  0%, 33%, 66% { background: var(--ak-ink); border-color: var(--ak-ink); }
  16%, 50%, 83% { background: var(--hot); border-color: var(--hot); }
}

@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
}

@keyframes bob {
  0% { transform: none; }
  50% { transform: translateY(-4px); }
}

@keyframes stamp {
  0% { transform: translateY(4px) scale(1.06, 0.92); }
  33% { transform: none; }
  66% { transform: translateY(4px) scale(1.06, 0.92); }
  100% { transform: none; }
}

@keyframes stampmark {
  0% { transform: scale(0); }
  33% { transform: scale(1.3); }
  66% { transform: none; }
}

@keyframes stare {
  0% { transform: scale(1.08); }
  80% { transform: none; }
}

@keyframes fizz {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-500%); opacity: 0; }
}

@keyframes rise {
  0% { transform: translateY(0); }
  100% { transform: translateY(calc(-100dvh - 48px)); }
}

@keyframes drop {
  0% { transform: translateY(calc(var(--grid) * -2)); }
  33% { transform: translateY(calc(var(--grid) * -1)); }
  66% { transform: translateY(4px); }
  100% { transform: none; }
}

@keyframes nudge {
  0% { transform: none; }
  85% { transform: translateY(-4px); }
}

@keyframes hudflash {
  0%, 40% { background: var(--hot); color: var(--ak-bg); }
  20%, 60% { background: transparent; color: var(--hot); }
}

@keyframes stampin {
  0% { transform: scale(1.6); }
  50% { transform: scale(0.9); }
  100% { transform: none; }
}

@keyframes printline {
  0% { visibility: hidden; }
  100% { visibility: visible; }
}

@keyframes keyhit {
  0% { transform: translateY(4px) scale(1.06, 0.92); }
  100% { transform: none; }
}