/* Hallmark · macrostructure: Optical comparison bench · tone: precise playful
 * anchor hue: existing rose · fonts: inherited · exact Unicode and inline tints retained
 * pre-emit critique: P5 H5 E4 S5 R5 V5 · four-viewport browser acceptance: parent
 */
@import url('./assets/depth-tokens.css');

html, body { overflow-x: clip; }
.speed-page :where(.speed-hud, .speed-arena, .speed-start-card, .speed-result, .speed-lab, .speed-controls, .speed-replay, .speed-memory) { min-width: 0; }
.speed-page :where(h1, h2, h3) { overflow-wrap: anywhere; min-width: 0; font-style: normal; }
.speed-page :where(button, input) { touch-action: manipulation; }
.speed-page :where(button) { min-height: 44px; white-space: nowrap; }

/* Keep numeric evidence distinct from the visual pair and stable as it updates. */
.speed-page .speed-hud {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-depth-speed-2);
  padding: var(--space-depth-speed-2) 0;
  color: var(--color-depth-speed-ink);
  font-family: var(--font-depth-speed-label);
  font-size: .8125rem;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.speed-hud > span { white-space: nowrap; min-width: 0; }
.speed-hud #speed-timer { text-align: right; font-weight: 800; }
.speed-hud #speed-best { color: var(--color-depth-speed-muted); }
body.speed-page[data-pip-frame] .speed-hud .btn {
  justify-self: end;
  min-height: 44px;
  padding-inline: var(--space-depth-speed-3);
  background: var(--color-depth-speed-surface);
  color: var(--color-depth-speed-ink);
  border: 1px solid var(--color-depth-speed-soft-rule);
  box-shadow: none;
  border-radius: var(--radius-depth-speed-control);
}
.speed-timer-bar-wrap { height: 8px; border-radius: 0; background: var(--color-depth-speed-soft-rule); margin: var(--space-depth-speed-2) 0 var(--space-depth-speed-3); }
.speed-timer-bar { background: var(--color-depth-speed-timer); transition: none; }
.speed-timer-bar.urgent { background: var(--color-depth-speed-urgent); animation: none; }

/* The drawing is static, decorative and outside every comparison aperture. */
.speed-depth-bench { display: block; width: min(100%, 264px); height: auto; margin: 0 auto var(--space-depth-speed-4); pointer-events: none; }
.speed-depth-rule { display: block; width: 100%; height: 18px; object-fit: fill; margin: 0 0 var(--space-depth-speed-3); pointer-events: none; }
.speed-page .speed-start-card, .speed-page .speed-result {
  padding: var(--space-depth-speed-5) var(--space-depth-speed-3);
  border: 1px solid var(--color-depth-speed-soft-rule);
  border-radius: var(--radius-depth-speed-control);
  background: var(--color-depth-speed-evidence);
  box-shadow: none;
}
.speed-start-card p { color: var(--color-depth-speed-muted); }
.speed-start-card h2, .speed-result h2 { color: var(--color-depth-speed-ink); }
.speed-page .speed-arena {
  border: 2px solid var(--color-depth-speed-ink);
  border-radius: var(--radius-depth-speed-control);
  padding: var(--space-depth-speed-4) var(--space-depth-speed-3) 48px;
  background: var(--color-depth-speed-evidence);
  box-shadow: none;
  transition: none;
}
.speed-arena.flash-good { border-color: var(--color-depth-speed-same); box-shadow: none; }
.speed-arena.flash-bad { border-color: var(--color-depth-speed-different); box-shadow: none; animation: none; }
.speed-arena.level-up { animation: none; }
.speed-symbols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-items: center;
  align-items: center;
  gap: var(--space-depth-speed-3);
  min-height: 96px;
}
.speed-page .speed-symbol {
  width: min(100%, 112px);
  height: 96px;
  font-size: 3.75rem;
  line-height: 1;
  border: 1px solid var(--color-depth-speed-rule);
  border-radius: var(--radius-depth-speed-small);
  background: var(--color-depth-speed-evidence);
  box-shadow: none;
  filter: none;
  opacity: 1;
  transform: none;
  animation: none;
  transition: none;
}
.speed-page .speed-symbol.enter { animation: none; }
.speed-prompt { color: var(--color-depth-speed-muted); font-size: .875rem; }
.speed-meter { margin: 0 0 var(--space-depth-speed-3); gap: var(--space-depth-speed-2); flex-wrap: wrap; }
.speed-mult { background: var(--color-depth-speed-surface); color: var(--color-depth-speed-ink); transition: none; }
.speed-mult[data-mult='4'] { background: var(--color-depth-speed-action); color: var(--color-depth-speed-action-ink); box-shadow: none; }
.speed-level { color: var(--color-depth-speed-muted); }
.speed-mult-fill { background: var(--color-depth-speed-action); transition: none; }
.speed-streak { background: var(--color-depth-speed-soft-rose); color: var(--color-depth-speed-action); }

/* Constrain answer pops to their own strip, so an answer never covers the next glyphs. */
.speed-pops { inset: auto var(--space-depth-speed-3) var(--space-depth-speed-2); height: 28px; overflow: clip; }
.speed-page .speed-pop { top: 0; font-size: .875rem; animation: none; text-shadow: none; }
.speed-pop.good { color: var(--color-depth-speed-same); }
.speed-pop.fast { color: var(--color-depth-speed-muted); }
.speed-pop.bad { color: var(--color-depth-speed-different); }
.speed-page .speed-count { background: var(--color-depth-speed-evidence); color: var(--color-depth-speed-action); }
.speed-page .speed-count.tick { animation: none; }

/* No label wrapping or input delay: both thumbs get equal, steady targets. */
.speed-page .speed-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: var(--space-depth-speed-3); margin: var(--space-depth-speed-3) 0; }
.speed-page .btn-choice {
  min-height: 60px;
  width: 100%;
  padding: 0 var(--space-depth-speed-2);
  border: 1px solid var(--color-depth-speed-ink);
  border-radius: var(--radius-depth-speed-control);
  font: 800 1.0625rem/1 var(--font-depth-speed-body);
  color: var(--color-depth-speed-choice-ink);
  box-shadow: 0 3px 0 var(--color-depth-speed-ink);
  transition: background-color var(--dur-depth-speed-press) var(--ease-depth-speed-press);
}
.speed-page .btn-same { background: var(--color-depth-speed-same); }
.speed-page .btn-diff { background: var(--color-depth-speed-different); }
.speed-page .btn-choice:active { transform: translateY(1px); filter: none; }
.speed-page .btn-same:active { background: var(--color-depth-speed-same-hover); }
.speed-page .btn-diff:active { background: var(--color-depth-speed-different-hover); }
.speed-page .btn-choice:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
.speed-page .btn-choice[aria-busy='true'] { border-style: dashed; }
.speed-page .btn-choice[aria-invalid='true'] { outline: 2px solid var(--color-depth-speed-different); outline-offset: 2px; }
.speed-page .btn-choice[data-state='success'] { outline: 2px solid var(--color-depth-speed-same); outline-offset: 2px; }
.speed-key-hint { color: var(--color-depth-speed-muted); line-height: 1.5; font-size: .6875rem; }
body.speed-page[data-pip-frame] .game-wrap .btn-start { background: var(--color-depth-speed-action); color: var(--color-depth-speed-action-ink); min-height: 48px; border-radius: var(--radius-depth-speed-control); box-shadow: 0 3px 0 var(--color-depth-speed-action-hover); }
.speed-page :where(.btn, .btn-choice, .speed-lab button, .speed-memory button, .speed-replay button, .speed-replay summary):focus-visible { outline: 3px solid var(--color-depth-speed-ink); outline-offset: 3px; }
.speed-lab button { border-color: var(--color-depth-speed-soft-rule); background: var(--color-depth-speed-evidence); color: var(--color-depth-speed-ink); }
.speed-lab button:active { background: var(--color-depth-speed-surface); }
.speed-lab button:disabled { cursor: not-allowed; }
.speed-lab__panel { padding: var(--space-depth-speed-3); border-radius: var(--radius-depth-speed-control); background: var(--color-depth-speed-surface); }
.speed-lab__choices { grid-template-columns: minmax(0, 1fr); gap: var(--space-depth-speed-2); }
.speed-lab__choices button { overflow-wrap: normal; }
.speed-lab__actions { align-items: center; }
.speed-lab__actions button { flex-basis: 100%; }
.speed-lab__symbols { gap: var(--space-depth-speed-3); }
.speed-lab__symbols > span { background: var(--color-depth-speed-evidence); border-color: var(--color-depth-speed-rule); border-radius: var(--radius-depth-speed-small); filter: none; opacity: 1; transform: none; transition: none; animation: none; }
.speed-memory__symbols > div { background: var(--color-depth-speed-evidence); border-color: var(--color-depth-speed-rule); border-radius: var(--radius-depth-speed-small); }
.speed-memory__left, .speed-memory__right { filter: none; transition: none; animation: none; }
.speed-memory__same, .speed-memory__different { white-space: nowrap; }
.speed-page .speed-replay { background: var(--color-depth-speed-evidence); border-color: var(--color-depth-speed-soft-rule); }
.speed-page .speed-replay__choices { grid-template-columns: minmax(0, 1fr); gap: var(--space-depth-speed-2); }
.speed-page .speed-stat-box .val { font-size: clamp(.875rem, 4vw, 1.35rem); }
.speed-page .speed-stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: var(--space-depth-speed-2); }
.speed-page .speed-stat-box .lbl { color: var(--color-depth-speed-muted); }

@media (min-width: 23rem) {
  .speed-lab__choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .speed-page .speed-replay__choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 40rem) {
  .speed-page .speed-hud { grid-template-columns: minmax(0, 1fr) auto; }
  .speed-hud #speed-best { grid-row: 2; }
}
@media (hover: hover) and (pointer: fine) {
  .speed-page .btn-same:hover { filter: none; background: var(--color-depth-speed-same-hover); }
  .speed-page .btn-diff:hover { filter: none; background: var(--color-depth-speed-different-hover); }
  body.speed-page[data-pip-frame] .game-wrap .btn-start:hover { background: var(--color-depth-speed-action-hover); }
  .speed-lab button:hover:not(:disabled) { background: var(--color-depth-speed-surface); }
}
@media (prefers-reduced-motion: reduce) {
  .speed-page .btn-choice { transition: none; }
  .speed-page .btn-choice:active { transform: none; }
}