:root {
  color-scheme: dark;
  --bg: #090909;
  --surface: #131313;
  --surface-raised: #1a1a1a;
  --surface-soft: rgba(255, 255, 255, 0.055);
  --text: #f4f1e9;
  --text-muted: #aaa79f;
  --text-faint: #77746e;
  --border: rgba(255, 255, 255, 0.16);
  --border-strong: rgba(255, 255, 255, 0.32);
  --focus: #b5a7ff;
  --accent: #d8ff60;
  --danger: #ff7b75;
  --success: #97e6a5;
  --radius-small: 12px;
  --radius-medium: 20px;
  --radius-large: 32px;
  --radius-pill: 999px;
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.7, 0, 0.84, 0);
  --page-pad: clamp(1rem, 3vw, 3.5rem);
  --header-height: 5.5rem;
  --content-width: 1440px;
  --mono: "SFMono-Regular", "Cascadia Mono", Consolas, monospace;
  --sans: Inter, "Helvetica Neue", Arial, sans-serif;
}

/* The app remains fully self-contained. These system stacks were selected for
   the same broad grotesk / precise numerical contrast as the intended fonts. */

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

html {
  min-width: 320px;
  min-height: 100%;
  background: var(--bg);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  min-width: 320px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 72% 4%, rgba(92, 85, 140, 0.1), transparent 29rem),
    var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.45;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body:has(.game-screen) {
  overflow: hidden;
  overscroll-behavior: none;
}

button,
input,
select,
textarea {
  color: inherit;
  font: inherit;
}

button,
[role="button"],
input[type="range"] {
  -webkit-tap-highlight-color: transparent;
}

button {
  border: 0;
}

button:not(:disabled),
[role="button"]:not([aria-disabled="true"]) {
  cursor: pointer;
}

button:disabled,
[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.42;
}

a {
  color: inherit;
  text-decoration: none;
}

p,
h1,
h2,
h3,
h4 {
  margin-block: 0;
}

img,
svg,
canvas {
  display: block;
  max-width: 100%;
}

::selection {
  background: var(--focus);
  color: #090909;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.ambient {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  transition: opacity 300ms var(--ease-standard);
}

body:has(.game-screen) .ambient {
  opacity: 0;
}

.ambient__orb {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 50%;
  filter: blur(0.2px);
  animation: ambient-orbit 18s linear infinite;
}

.ambient__orb--one {
  width: min(64vw, 58rem);
  aspect-ratio: 1;
  top: -32rem;
  right: -12rem;
  box-shadow: 0 0 10rem rgba(119, 101, 216, 0.05) inset;
}

.ambient__orb--two {
  width: min(42vw, 34rem);
  aspect-ratio: 1;
  left: -22rem;
  bottom: -12rem;
  animation-direction: reverse;
  animation-duration: 24s;
}

.ambient__line {
  position: absolute;
  width: 42rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14), transparent);
  transform-origin: center;
  opacity: 0.45;
}

.ambient__line--one {
  top: 27%;
  right: -18rem;
  transform: rotate(-36deg);
  animation: ambient-breathe 10s var(--ease-standard) infinite alternate;
}

.ambient__line--two {
  left: -26rem;
  bottom: 18%;
  transform: rotate(31deg);
  animation: ambient-breathe 13s var(--ease-standard) infinite alternate-reverse;
}

.ambient__grain {
  position: absolute;
  inset: 0;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

@keyframes ambient-orbit {
  to { transform: rotate(360deg); }
}

@keyframes ambient-breathe {
  to { opacity: 0.12; transform: rotate(-30deg) translate3d(-4rem, 2rem, 0); }
}

#app {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  isolation: isolate;
}

.boot {
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
  place-items: center;
}

.boot__mark,
.brand-mark,
.logo-mark {
  position: relative;
  display: inline-block;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.boot__mark::before,
.brand-mark::before,
.logo-mark::before {
  position: absolute;
  width: 30%;
  height: 30%;
  top: 35%;
  left: 35%;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.boot__mark {
  color: var(--text-muted);
  animation: boot-pulse 1.4s var(--ease-standard) infinite;
}

@keyframes boot-pulse {
  50% { transform: scale(0.82); opacity: 0.42; }
}

.noscript {
  position: fixed;
  z-index: 20;
  inset: 0;
  display: grid;
  align-content: center;
  gap: 1rem;
  padding: var(--page-pad);
  background: var(--bg);
}

.noscript h1 {
  max-width: 12ch;
  font-size: clamp(2.8rem, 8vw, 7rem);
  font-weight: 500;
  letter-spacing: -0.06em;
  line-height: 0.95;
}

.noscript p:last-child {
  max-width: 34rem;
  color: var(--text-muted);
  font-size: 1.15rem;
}

/* Application chrome */
.app-shell,
.landing,
.landing-page {
  min-height: 100vh;
  min-height: 100dvh;
}

.app-header,
.site-header,
.header {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) auto minmax(10rem, 1fr);
  align-items: center;
  width: 100%;
  min-height: var(--header-height);
  padding: max(1rem, env(safe-area-inset-top)) var(--page-pad) 1rem;
  border-bottom: 1px solid var(--border);
}

.brand,
.logo,
.brand-link {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 0.75rem;
  font-weight: 600;
  letter-spacing: -0.035em;
}

.brand-name,
.wordmark {
  font-size: 1.05rem;
}

.game-nav,
.main-nav,
.nav-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  margin: 0;
  padding: 0.25rem;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: rgba(9, 9, 9, 0.5);
  backdrop-filter: blur(16px);
}

.nav-link,
.game-nav a,
.game-nav button,
.nav-item {
  display: inline-flex;
  min-height: 2.5rem;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1rem;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: color 120ms, background 120ms;
}

.nav-link:hover,
.game-nav a:hover,
.game-nav button:hover,
.nav-item:hover {
  color: var(--text);
}

.nav-link.active,
.nav-link[aria-current="page"],
.game-nav .active,
.nav-item.active {
  background: var(--text);
  color: var(--bg);
}

.header-actions,
.header-meta {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.icon-button,
.menu-button,
.sound-toggle {
  display: inline-grid;
  width: 2.75rem;
  min-width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: transparent;
  transition: border-color 120ms, background 120ms, transform 120ms;
}

.icon-button:hover,
.menu-button:hover,
.sound-toggle:hover {
  border-color: var(--border-strong);
  background: var(--surface-soft);
}

/* Landing */
.landing-main,
.page-main {
  width: min(100%, var(--content-width));
  margin-inline: auto;
  padding-inline: var(--page-pad);
}

.hero,
.landing-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr);
  min-height: clamp(36rem, calc(100vh - var(--header-height)), 52rem);
  min-height: clamp(36rem, calc(100dvh - var(--header-height)), 52rem);
  gap: clamp(2rem, 5vw, 7rem);
  align-items: center;
  padding-block: clamp(3rem, 7vw, 7rem);
}

.hero-copy,
.hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.eyebrow,
.kicker,
.section-label,
.card-label,
.meta-label {
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
}

.hero-title,
.game-title {
  max-width: 8ch;
  margin-top: 1rem;
  font-size: clamp(4.5rem, 11vw, 10rem);
  font-weight: 500;
  letter-spacing: -0.085em;
  line-height: 0.78;
}

.hero-description,
.hero-subtitle,
.premise {
  max-width: 34rem;
  margin-top: clamp(1.75rem, 3.5vw, 3rem);
  color: var(--text-muted);
  font-size: clamp(1.1rem, 1.55vw, 1.35rem);
  line-height: 1.55;
}

.hero-controls,
.play-config {
  width: 100%;
  margin-top: clamp(2.25rem, 5vw, 4rem);
}

.control-label {
  display: block;
  margin-bottom: 0.7rem;
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 0.67rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.segmented-control,
.difficulty-selector,
.mode-selector,
.difficulty-control,
.game-tabs {
  display: inline-flex;
  max-width: 100%;
  gap: 0.25rem;
  padding: 0.3rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.025);
}

.segment,
.difficulty-option,
.mode-option,
.game-tab {
  display: inline-flex;
  min-width: 5.25rem;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1.05rem;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  transition: color 120ms, background 120ms, transform 120ms;
}

.segment:hover,
.difficulty-option:hover,
.mode-option:hover,
.game-tab:hover {
  color: var(--text);
}

.segment.active,
.segment[aria-pressed="true"],
.difficulty-option.active,
.difficulty-option[aria-pressed="true"],
.mode-option.active,
.mode-option[aria-pressed="true"],
.game-tab.active,
.game-tab[aria-selected="true"] {
  background: var(--text);
  color: var(--bg);
}

.hero-actions,
.config-row {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
}

.config-group {
  display: flex;
  flex-direction: column;
}

.primary-button,
.start-button,
.play-button,
.lock-button,
.share-button,
.replay-button,
.next-button {
  display: inline-flex;
  min-height: 3.4rem;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.9rem 1.6rem;
  border: 1px solid var(--text);
  border-radius: var(--radius-pill);
  background: var(--text);
  color: var(--bg);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: transform 130ms var(--ease-standard), background 130ms, color 130ms, border-color 130ms;
}

.primary-button:hover,
.start-button:hover,
.play-button:hover,
.lock-button:hover,
.share-button:hover,
.replay-button:hover,
.next-button:hover {
  transform: translateY(-2px);
  background: var(--accent);
  border-color: var(--accent);
}

.start-button,
.play-button {
  min-width: clamp(8rem, 12vw, 11rem);
  min-height: 3.75rem;
}

.secondary-button,
.ghost-button,
.leaderboard-button,
.challenge-button {
  display: inline-flex;
  min-height: 3.25rem;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.8rem 1.4rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
  transition: border-color 120ms, background 120ms, transform 120ms;
}

.secondary-button:hover,
.ghost-button:hover,
.leaderboard-button:hover,
.challenge-button:hover {
  border-color: var(--text);
  background: var(--surface-soft);
  transform: translateY(-1px);
}

.hero-visual,
.sense-visual {
  position: relative;
  display: grid;
  width: min(100%, 30rem);
  aspect-ratio: 1;
  place-items: center;
  justify-self: end;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(181, 167, 255, 0.11), rgba(255, 255, 255, 0.018) 45%, transparent 68%);
  animation: visual-float 8s var(--ease-standard) infinite alternate;
}

.hero-visual::before,
.hero-visual::after,
.sense-visual::before,
.sense-visual::after {
  position: absolute;
  border: 1px solid var(--border);
  border-radius: inherit;
  content: "";
}

.hero-visual::before,
.sense-visual::before { inset: 12%; }
.hero-visual::after,
.sense-visual::after { inset: 28%; }

@keyframes visual-float {
  to { transform: rotate(8deg) scale(1.025); }
}

.teaser-section,
.landing-extras {
  padding-bottom: clamp(3rem, 6vw, 6rem);
}

.teaser-grid,
.feature-grid,
.landing-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}

.teaser-card,
.feature-card,
.daily-card,
.duel-card,
.multiplayer-card {
  position: relative;
  display: flex;
  min-height: 14rem;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(1.5rem, 3.5vw, 3rem);
  overflow: hidden;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.012);
  transition: background 180ms var(--ease-standard);
}

.teaser-card::after,
.feature-card::after,
.daily-card::after,
.duel-card::after,
.multiplayer-card::after {
  position: absolute;
  width: 9rem;
  aspect-ratio: 1;
  right: -4.5rem;
  bottom: -4.5rem;
  border: 1px solid var(--border);
  border-radius: 50%;
  content: "";
  transition: transform 500ms var(--ease-enter), border-color 180ms;
}

.teaser-card:hover,
.feature-card:hover,
.daily-card:hover,
.duel-card:hover,
.multiplayer-card:hover {
  background: var(--surface-soft);
}

.teaser-card:hover::after,
.feature-card:hover::after,
.daily-card:hover::after,
.duel-card:hover::after,
.multiplayer-card:hover::after {
  transform: scale(1.5);
  border-color: var(--border-strong);
}

.card-title {
  max-width: 18ch;
  font-size: clamp(1.55rem, 2.5vw, 2.35rem);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1.05;
}

.card-copy,
.card-description {
  max-width: 34rem;
  margin-top: 0.8rem;
  color: var(--text-muted);
}

.card-link,
.text-button {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  gap: 0.6rem;
  padding: 0;
  background: transparent;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
}

.card-link::after,
.text-button::after {
  content: "\2197";
  font-size: 1rem;
  transition: transform 120ms;
}

.card-link:hover::after,
.text-button:hover::after { transform: translate(2px, -2px); }

.local-best,
.best-score,
.score-preview {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 1rem;
  padding: clamp(1.4rem, 3vw, 2.5rem) 0;
  border-bottom: 1px solid var(--border);
}

.best-value,
.score-preview strong {
  font-family: var(--mono);
  font-size: clamp(2rem, 5vw, 4.5rem);
  font-weight: 400;
  letter-spacing: -0.08em;
  line-height: 0.9;
}

.app-footer,
.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem var(--page-pad) max(1.5rem, env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  color: var(--text-faint);
  font-size: 0.75rem;
}

/* Full-screen game framework */
.game-screen {
  position: fixed;
  z-index: 30;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%;
  min-width: 320px;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  overscroll-behavior: none;
  touch-action: none;
  user-select: none;
}

.game-screen.is-color,
.game-screen.color-game {
  transition: background-color 80ms linear, color 120ms linear;
}

.game-topbar,
.game-header {
  position: relative;
  z-index: 8;
  display: flex;
  min-height: 4.5rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: max(1rem, env(safe-area-inset-top)) var(--page-pad) 0;
}

.round-counter,
.round-progress {
  display: inline-flex;
  min-height: 2.25rem;
  align-items: center;
  gap: 0.45rem;
  padding: 0.48rem 0.72rem;
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  background: rgba(9, 9, 9, 0.18);
  font-family: var(--mono);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  backdrop-filter: blur(12px);
}

.exit-button,
.game-close {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: rgba(9, 9, 9, 0.12);
}

.game-stage,
.stage,
.stimulus {
  position: relative;
  display: grid;
  min-height: 0;
  place-items: center;
}

.stimulus {
  width: 100%;
  height: 100%;
  animation: stimulus-enter 350ms var(--ease-enter) both;
}

@keyframes stimulus-enter {
  from { opacity: 0; transform: scale(0.975); }
}

.instruction-wrap,
.game-prompt {
  display: grid;
  position: relative;
  z-index: 4;
  place-items: center;
  gap: 0.75rem;
  padding: 1rem var(--page-pad);
  text-align: center;
}

.instruction {
  max-width: 28ch;
  color: var(--text);
  font-size: clamp(1.45rem, 3.2vw, 2.75rem);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1.1;
}

.sub-instruction,
.instruction-detail {
  max-width: 38rem;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.controls,
.game-controls,
.control-panel {
  position: relative;
  z-index: 7;
  width: 100%;
  padding: 0 var(--page-pad) max(1.25rem, env(safe-area-inset-bottom));
}

.controls-inner {
  width: min(100%, 64rem);
  margin-inline: auto;
}

.game-screen .primary-button,
.game-screen .lock-button,
.game-screen .next-button {
  min-height: 3.75rem;
  padding-inline: 2rem;
}

/* Color */
.color-stimulus,
.color-field {
  position: absolute;
  inset: 0;
  background: var(--stimulus-color, #4c68aa);
}

.color-controls,
.slider-stack {
  display: grid;
  width: min(100%, 62rem);
  gap: clamp(1rem, 2.4vh, 1.6rem);
  margin-inline: auto;
  padding: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-medium);
  background: rgba(8, 8, 8, 0.46);
  color: #fff;
  backdrop-filter: blur(20px);
}

.control-row,
.slider-row {
  display: grid;
  grid-template-columns: minmax(6.5rem, 0.2fr) minmax(10rem, 1fr) 4rem;
  align-items: center;
  gap: 1rem;
}

.control-row label,
.slider-label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.control-value,
.slider-value {
  font-family: var(--mono);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

input[type="range"] {
  width: 100%;
  height: 2.25rem;
  margin: 0;
  padding: 0;
  appearance: none;
  background: transparent;
  cursor: ew-resize;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.24);
}

input[type="range"]::-moz-range-track {
  height: 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.24);
}

input[type="range"]::-webkit-slider-thumb {
  width: 1.45rem;
  height: 1.45rem;
  margin-top: -0.56rem;
  appearance: none;
  border: 2px solid #090909;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.82);
}

input[type="range"]::-moz-range-thumb {
  width: 1.45rem;
  height: 1.45rem;
  border: 2px solid #090909;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.82);
}

.hue-slider::-webkit-slider-runnable-track,
input[name="hue"]::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, #f44, #ff0, #2f5, #0ff, #36f, #d3f, #f44);
}

.hue-slider::-moz-range-track,
input[name="hue"]::-moz-range-track {
  background: linear-gradient(90deg, #f44, #ff0, #2f5, #0ff, #36f, #d3f, #f44);
}

.color-actions,
.control-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.25rem;
}

.color-result,
.result-split {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.result-panel,
.color-result__panel,
.answer-panel,
.target-panel {
  position: relative;
  display: grid;
  align-content: center;
  gap: 0.65rem;
  padding: clamp(2rem, 5vw, 5rem) var(--page-pad);
}

.target-panel,
.result-panel--target {
  animation: panel-rise 450ms var(--ease-enter) both;
}

@keyframes panel-rise {
  from { transform: translateY(100%); }
}

.panel-tag,
.result-panel .label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.hsb-values,
.comparison-values {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-family: var(--mono);
  font-size: clamp(0.8rem, 1.4vw, 1rem);
  font-variant-numeric: tabular-nums;
}

/* Sound */
.sound-stage,
.sound-stimulus {
  position: relative;
  overflow: hidden;
}

.waveform,
.wave-field,
.frequency-trace {
  position: relative;
  width: min(80vw, 72rem);
  height: min(48vh, 30rem);
  overflow: hidden;
  opacity: 0.9;
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}

.waveform::before,
.wave-field::before,
.frequency-trace::before {
  position: absolute;
  inset: 0;
  background:
    repeating-radial-gradient(ellipse at center, transparent 0 0.55rem, rgba(216, 255, 96, 0.5) 0.6rem 0.68rem, transparent 0.74rem 1.2rem);
  filter: blur(0.2px);
  content: "";
  transform: scaleY(0.25);
  animation: wave-pulse 1.5s ease-in-out infinite alternate;
}

@keyframes wave-pulse {
  to { transform: scaleY(0.75) scaleX(1.06); opacity: 0.48; }
}

.waveform svg,
.waveform canvas,
.wave-field svg,
.wave-field canvas {
  width: 100%;
  height: 100%;
}

.hold-field,
.tuning-field,
.sound-control-field {
  position: relative;
  display: grid;
  width: min(90vw, 52rem);
  height: min(48vh, 30rem);
  min-height: 16rem;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-large);
  background:
    linear-gradient(var(--border), var(--border)) 50% 0 / 1px 100% no-repeat,
    radial-gradient(circle, rgba(216, 255, 96, 0.08), transparent 58%),
    rgba(255, 255, 255, 0.018);
  cursor: ns-resize;
  touch-action: none;
}

.tuning-field::before,
.sound-control-field::before {
  position: absolute;
  left: 1rem;
  top: 1rem;
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  content: "Higher";
}

.tuning-field::after,
.sound-control-field::after {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  content: "Lower";
}

.frequency-readout,
.sound-value {
  font-family: var(--mono);
  font-size: clamp(2.5rem, 8vw, 6rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.08em;
}

.comparison-waves {
  display: grid;
  width: min(90vw, 70rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.comparison-wave {
  min-height: 8rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-medium);
}

/* Time */
.time-stage,
.time-stimulus {
  position: relative;
}

.time-rings,
.rings,
.duration-ring {
  position: relative;
  width: min(58vw, 30rem);
  aspect-ratio: 1;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  box-shadow: 0 0 0 clamp(1rem, 4vw, 3rem) rgba(255, 255, 255, 0.02);
}

.time-rings::before,
.time-rings::after,
.rings::before,
.rings::after,
.duration-ring::before,
.duration-ring::after {
  position: absolute;
  border: 1px solid var(--border);
  border-radius: 50%;
  content: "";
}

.time-rings::before,
.rings::before,
.duration-ring::before { inset: 17%; }
.time-rings::after,
.rings::after,
.duration-ring::after { inset: 38%; background: rgba(181, 167, 255, 0.12); }

.time-rings.is-running,
.rings.is-running,
.duration-ring.is-running {
  animation: ring-breathe 1.6s linear infinite;
}

@keyframes ring-breathe {
  50% { transform: scale(0.78); opacity: 0.52; }
}

.hold-button,
.time-hold-button {
  position: relative;
  display: grid;
  width: clamp(9rem, 24vw, 14rem);
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--text);
  color: var(--bg);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: transform 120ms var(--ease-standard), background 120ms;
  touch-action: none;
}

.hold-button:hover,
.time-hold-button:hover { background: var(--accent); }
.hold-button:active,
.time-hold-button:active,
.hold-button.is-holding,
.time-hold-button.is-holding { transform: scale(0.94); }

.ring-comparison {
  position: relative;
  width: min(52vw, 25rem);
  aspect-ratio: 1;
}

.target-ring,
.answer-ring {
  position: absolute;
  inset: 0;
  border: 2px solid var(--text);
  border-radius: 50%;
}

.answer-ring {
  border-style: dashed;
  border-color: var(--focus);
  transform: scale(var(--answer-scale, 0.84));
}

/* Shape */
.shape-stage,
.shape-canvas-wrap {
  display: grid;
  min-height: 0;
  place-items: center;
}

.shape-canvas {
  position: relative;
  width: min(72vw, 72vh, 46rem);
  width: min(72vw, 72dvh, 46rem);
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-medium);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 10% 10%;
  touch-action: none;
}

.shape-canvas::before,
.shape-canvas::after {
  position: absolute;
  z-index: 0;
  background: var(--border);
  content: "";
  pointer-events: none;
}

.shape-canvas::before { width: 1px; inset-block: 0; left: 50%; }
.shape-canvas::after { height: 1px; inset-inline: 0; top: 50%; }

.shape-svg,
.shape-object,
.target-shape,
.player-shape {
  position: absolute;
  z-index: 2;
  overflow: visible;
  color: var(--text);
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 2;
  transform: translate(-50%, -50%) rotate(var(--shape-rotation, 0deg)) scale(var(--shape-scale, 1));
  transform-origin: center;
  touch-action: none;
}

.shape-svg { position: relative; transform: none; }

.player-shape,
.shape-object.is-player {
  fill: transparent;
  stroke: var(--focus);
  stroke-dasharray: 7 6;
}

.target-shape,
.shape-object.is-target { opacity: 0.82; }

.shape-controls {
  display: grid;
  width: min(100%, 44rem);
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  align-items: end;
  gap: 1rem;
  margin-inline: auto;
}

.shape-control {
  min-width: 0;
}

/* Shared round reveal */
.round-reveal,
.round-result,
.reveal-screen {
  position: fixed;
  z-index: 40;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr);
  min-width: 320px;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: auto;
  background: var(--bg);
  color: var(--text);
  animation: reveal-in 400ms var(--ease-enter) both;
}

@keyframes reveal-in {
  from { opacity: 0; }
}

.reveal-visual,
.result-visual {
  position: relative;
  display: grid;
  min-height: 28rem;
  place-items: center;
  overflow: hidden;
  border-right: 1px solid var(--border);
  background: var(--surface);
}

.reveal-content,
.result-content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 6vw, 6rem) var(--page-pad);
}

.round-score,
.reveal-score,
.score-large {
  margin-top: 1rem;
  font-family: var(--mono);
  font-size: clamp(6rem, 14vw, 12rem);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.1em;
  line-height: 0.78;
  animation: score-in 650ms var(--ease-enter) both;
}

@keyframes score-in {
  0% { opacity: 0; transform: translateY(1rem) scale(0.96); }
  85% { transform: translateY(0) scale(1.03); }
}

.score-denominator {
  color: var(--text-faint);
  font-size: 0.2em;
  letter-spacing: -0.04em;
}

.commentary,
.score-comment {
  max-width: 25ch;
  margin-top: 1.6rem;
  color: var(--text-muted);
  font-size: clamp(1.1rem, 2vw, 1.55rem);
  letter-spacing: -0.025em;
}

.comparison-grid,
.result-details,
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-top: clamp(2rem, 5vh, 4rem);
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}

.comparison-item,
.metric {
  min-width: 0;
  padding: 1rem;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.comparison-item dt,
.metric-label {
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.comparison-item dd,
.metric-value {
  margin: 0.45rem 0 0;
  font-family: var(--mono);
  font-size: clamp(1rem, 2vw, 1.35rem);
  font-variant-numeric: tabular-nums;
}

.reveal-actions,
.result-actions,
.final-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: clamp(2rem, 5vh, 4rem);
}

/* Final results */
.final-results,
.run-results,
.results-screen {
  min-height: 100vh;
  min-height: 100dvh;
  padding: max(1.5rem, env(safe-area-inset-top)) var(--page-pad) max(2rem, env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 70% 30%, rgba(181, 167, 255, 0.1), transparent 30rem),
    var(--bg);
}

.results-inner,
.final-inner {
  display: grid;
  width: min(100%, 80rem);
  min-height: calc(100vh - 4rem);
  min-height: calc(100dvh - 4rem);
  margin-inline: auto;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.6fr);
  align-items: center;
  gap: clamp(3rem, 8vw, 8rem);
}

.final-heading,
.results-heading {
  margin-top: 1rem;
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 500;
  letter-spacing: -0.06em;
  line-height: 1;
}

.total-score,
.final-score {
  margin-top: clamp(2rem, 5vh, 4rem);
  font-family: var(--mono);
  font-size: clamp(6rem, 16vw, 13rem);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.105em;
  line-height: 0.72;
}

.out-of {
  display: inline-block;
  color: var(--text-faint);
  font-size: 0.17em;
  letter-spacing: -0.02em;
  transform: translateY(-0.25em);
}

.round-scores,
.score-cells {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: clamp(2.5rem, 6vh, 5rem);
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}

.round-score-cell,
.score-cell {
  position: relative;
  min-width: 0;
  min-height: 7.5rem;
  padding: 0.9rem;
  overflow: hidden;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--round-color, transparent);
}

.round-number {
  display: block;
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.08em;
}

.round-points {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  font-family: var(--mono);
  font-size: clamp(1rem, 2vw, 1.35rem);
  font-variant-numeric: tabular-nums;
}

.summary-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 1rem;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}

.summary-stat {
  padding: 1rem;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.results-sidebar,
.share-panel {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-large);
  background: rgba(255, 255, 255, 0.025);
}

.results-sidebar h2,
.share-panel h2 {
  margin-bottom: 0.75rem;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.04em;
}

.results-sidebar p,
.share-panel p {
  color: var(--text-muted);
}

.initials-form {
  margin-top: 1.5rem;
}

.initials-input,
input[name="initials"] {
  width: 100%;
  min-height: 4rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-small);
  outline: none;
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  font-size: 1.4rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.initials-input:focus,
input[name="initials"]:focus {
  border-color: var(--focus);
  box-shadow: 0 0 0 3px rgba(181, 167, 255, 0.2);
}

.share-actions {
  display: grid;
  gap: 0.65rem;
  margin-top: 1rem;
}

.share-actions > * { width: 100%; }

.toast,
.status-message {
  position: fixed;
  z-index: 100;
  left: 50%;
  bottom: max(1.5rem, env(safe-area-inset-bottom));
  max-width: calc(100% - 2rem);
  padding: 0.8rem 1rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.4);
  color: var(--text);
  font-size: 0.8rem;
  transform: translateX(-50%);
}

/* Compact tablets */
@media (max-width: 1023px) {
  :root { --header-height: 5rem; }

  .app-header,
  .site-header,
  .header {
    grid-template-columns: 1fr auto;
  }

  .game-nav,
  .main-nav,
  .nav-list {
    order: 3;
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 0.75rem;
  }

  .app-header:has(.game-nav),
  .site-header:has(.game-nav),
  .header:has(.game-nav) {
    padding-bottom: 1rem;
  }

  .hero,
  .landing-hero {
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 0.55fr);
  }

  .round-reveal,
  .round-result,
  .reveal-screen {
    grid-template-columns: minmax(0, 0.9fr) minmax(20rem, 1.1fr);
  }

  .results-inner,
  .final-inner {
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.45fr);
    gap: 2.5rem;
  }
}

/* Mobile */
@media (max-width: 767px) {
  :root {
    --page-pad: clamp(1rem, 4vw, 1.5rem);
    --header-height: 4.4rem;
  }

  .ambient__orb--one { top: -12rem; right: -14rem; width: 28rem; }

  .app-header,
  .site-header,
  .header {
    min-height: var(--header-height);
    grid-template-columns: 1fr auto;
  }

  .game-nav,
  .main-nav,
  .nav-list {
    justify-content: stretch;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .game-nav::-webkit-scrollbar,
  .main-nav::-webkit-scrollbar,
  .nav-list::-webkit-scrollbar { display: none; }

  .nav-link,
  .game-nav a,
  .game-nav button,
  .nav-item {
    min-width: 4.5rem;
    flex: 1;
    padding-inline: 0.65rem;
  }

  .hero,
  .landing-hero {
    display: flex;
    min-height: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 2.25rem;
    padding-block: clamp(2.5rem, 8vh, 4rem);
  }

  .hero-title,
  .game-title {
    font-size: clamp(4rem, 23vw, 7rem);
    line-height: 0.82;
  }

  .hero-description,
  .hero-subtitle,
  .premise {
    margin-top: 1.5rem;
    font-size: 1.05rem;
  }

  .hero-controls,
  .play-config { margin-top: 2rem; }

  .hero-actions,
  .config-row {
    align-items: stretch;
    flex-direction: column;
  }

  .segmented-control,
  .difficulty-selector,
  .mode-selector,
  .difficulty-control,
  .game-tabs { width: 100%; }

  .segment,
  .difficulty-option,
  .mode-option,
  .game-tab {
    min-width: 0;
    flex: 1;
    padding-inline: 0.55rem;
  }

  .start-button,
  .play-button { width: 100%; }

  .hero-visual,
  .sense-visual {
    width: min(74vw, 22rem);
    margin-top: -1rem;
    justify-self: center;
    align-self: center;
  }

  .teaser-grid,
  .feature-grid,
  .landing-cards { grid-template-columns: 1fr; }

  .teaser-card,
  .feature-card,
  .daily-card,
  .duel-card,
  .multiplayer-card { min-height: 12rem; }

  .game-topbar,
  .game-header { min-height: 3.75rem; }

  .instruction { font-size: clamp(1.35rem, 7vw, 2rem); }

  .controls,
  .game-controls,
  .control-panel { padding-bottom: max(0.9rem, env(safe-area-inset-bottom)); }

  .color-controls,
  .slider-stack {
    gap: 0.7rem;
    padding: 0.85rem;
    border-radius: var(--radius-small);
  }

  .control-row,
  .slider-row {
    grid-template-columns: 5.25rem minmax(8rem, 1fr) 3.35rem;
    gap: 0.6rem;
  }

  .color-actions .lock-button,
  .control-actions .lock-button { width: 100%; }

  .waveform,
  .wave-field,
  .frequency-trace { width: 94vw; height: 38vh; }

  .hold-field,
  .tuning-field,
  .sound-control-field {
    width: calc(100vw - 2rem);
    height: min(46vh, 23rem);
    min-height: 13rem;
  }

  .time-rings,
  .rings,
  .duration-ring { width: min(72vw, 20rem); }

  .shape-canvas {
    width: min(92vw, 56vh);
    width: min(92vw, 56dvh);
  }

  .shape-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 0.75rem;
  }

  .shape-controls .lock-button {
    width: 100%;
    grid-column: 1 / -1;
  }

  .round-reveal,
  .round-result,
  .reveal-screen {
    display: block;
  }

  .reveal-visual,
  .result-visual {
    min-height: 42vh;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .reveal-content,
  .result-content { padding-block: 2rem max(2rem, env(safe-area-inset-bottom)); }

  .round-score,
  .reveal-score,
  .score-large { font-size: clamp(5rem, 27vw, 8.5rem); }

  .results-inner,
  .final-inner {
    display: block;
    min-height: auto;
  }

  .total-score,
  .final-score { font-size: clamp(5.6rem, 26vw, 9rem); }

  .round-scores,
  .score-cells { margin-top: 2.5rem; }

  .round-score-cell,
  .score-cell {
    min-height: 5.75rem;
    padding: 0.55rem;
  }

  .round-points {
    right: 0.45rem;
    bottom: 0.45rem;
    font-size: clamp(0.75rem, 3vw, 1rem);
    writing-mode: vertical-rl;
  }

  .results-sidebar,
  .share-panel { margin-top: 3rem; }

  .app-footer,
  .site-footer { flex-direction: column; }
}

/* Very small handsets */
@media (max-width: 380px) {
  .brand-mark,
  .logo-mark { width: 1.7rem; height: 1.7rem; }
  .brand-name,
  .wordmark { font-size: 0.95rem; }

  .nav-link,
  .game-nav a,
  .game-nav button,
  .nav-item {
    min-width: 4.15rem;
    font-size: 0.72rem;
  }

  .hero-title,
  .game-title { font-size: 4rem; }

  .control-row,
  .slider-row {
    grid-template-columns: 4.35rem minmax(6rem, 1fr) 2.8rem;
    gap: 0.35rem;
  }

  .control-row label,
  .slider-label { font-size: 0.58rem; }

  .comparison-grid,
  .result-details,
  .metrics-grid { grid-template-columns: 1fr; }

  .summary-stats { grid-template-columns: 1fr; }
}

/* Landscape phones */
@media (max-height: 520px) and (orientation: landscape) {
  .game-screen { grid-template-rows: auto minmax(0, 1fr); }

  .game-stage,
  .stage,
  .stimulus { grid-column: 1; }

  .controls,
  .game-controls,
  .control-panel {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 48%;
  }

  .instruction-wrap,
  .game-prompt {
    position: absolute;
    z-index: 8;
    top: 0.8rem;
    left: 5rem;
    align-items: start;
    padding: 0;
    text-align: left;
  }

  .instruction { font-size: 1.25rem; }

  .shape-canvas { width: min(62vh, 22rem); }
  .time-rings,
  .rings,
  .duration-ring { width: min(60vh, 18rem); }
  .hold-button,
  .time-hold-button { width: min(42vh, 10rem); }

  .round-reveal,
  .round-result,
  .reveal-screen {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .reveal-visual,
  .result-visual {
    min-height: 100vh;
    border-right: 1px solid var(--border);
    border-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .ambient__line,
  .ambient__orb { display: none; }
}

@media (forced-colors: active) {
  .ambient { display: none; }

  .primary-button,
  .start-button,
  .play-button,
  .lock-button,
  .share-button,
  .replay-button,
  .next-button { border: 2px solid ButtonText; }

  input[type="range"] { forced-color-adjust: auto; }
}

/* Runtime renderer alignment */
.site-header > .text-button { justify-self: end; }
.hero-copy { gap: 0; }
.hero-copy .eyebrow { margin-top: 1.5rem; }
.hero-index {
  color: var(--text-faint);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
}
.hero-copy .game-tabs { margin-top: clamp(2rem, 4vw, 3.5rem); }
.game-tab { gap: 0.45rem; }
.game-tab span { color: var(--text-faint); font-family: var(--mono); font-size: 0.65rem; }
.start-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-large);
  background: rgba(255, 255, 255, 0.025);
}
.start-panel .start-button { margin-top: 1rem; }
.session-note { color: var(--text-muted); font-size: 0.78rem; }
.landing-grid { padding-bottom: clamp(3rem, 6vw, 6rem); }
.feature-card--wide { grid-column: 1 / -1; }
.status-pill {
  display: inline-flex;
  min-height: 2rem;
  align-items: center;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.game-content { position: relative; display: grid; min-height: 0; place-items: center; }
.prepare-screen,
.retention-screen {
  display: grid;
  max-width: 52rem;
  place-items: center;
  gap: 1.25rem;
  padding: var(--page-pad);
  text-align: center;
}
.prepare-screen h1,
.retention-screen h1,
.recall-heading h1 {
  max-width: 16ch;
  font-size: clamp(2.25rem, 6vw, 5.5rem);
  font-weight: 500;
  letter-spacing: -0.065em;
  line-height: 0.95;
}
.count-pulse {
  width: 5rem;
  aspect-ratio: 1;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  animation: boot-pulse 1.1s var(--ease-standard) infinite;
}
.observation-line {
  position: absolute;
  right: var(--page-pad);
  bottom: max(1rem, env(safe-area-inset-bottom));
  left: var(--page-pad);
  height: 2px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.22);
}
.observation-line::after {
  display: block;
  width: 100%;
  height: 100%;
  background: currentColor;
  content: "";
  transform-origin: left;
  animation: observe var(--duration) linear both;
}
@keyframes observe { to { transform: scaleX(0); } }

.color-stimulus,
.color-recall { background: var(--field); }
.color-stimulus {
  display: grid;
  place-items: center;
  color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7);
}
.color-stimulus p {
  padding: 0.6rem 0.85rem;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: var(--radius-pill);
  background: rgba(0,0,0,.24);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
}
.color-recall {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
  gap: 1.5rem;
  padding: clamp(2rem, 5vw, 5rem) var(--page-pad) max(1rem, env(safe-area-inset-bottom));
  color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.75);
}
.recall-heading { display: grid; place-items: center; gap: 0.75rem; text-align: center; }
.range-control {
  display: grid;
  grid-template-columns: minmax(6.5rem, .2fr) minmax(10rem, 1fr) 4rem;
  grid-template-areas: "label slider value";
  align-items: center;
  gap: 1rem;
}
.range-control > span { grid-area: label; font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }
.range-control > input { grid-area: slider; }
.range-control > output { grid-area: value; font-family: var(--mono); font-size: .8rem; text-align: right; }
.hue-range input::-webkit-slider-runnable-track { background: linear-gradient(90deg,#f44,#ff0,#2f5,#0ff,#36f,#d3f,#f44); }
.hue-range input::-moz-range-track { background: linear-gradient(90deg,#f44,#ff0,#2f5,#0ff,#36f,#d3f,#f44); }
.color-controls .lock-button { justify-self: end; }

.sound-stimulus,
.sound-recall,
.time-stimulus,
.time-recall,
.shape-stimulus,
.shape-recall {
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 0;
  place-items: center;
  gap: 1rem;
  padding: 1rem var(--page-pad) max(1rem, env(safe-area-inset-bottom));
  text-align: center;
}
.sound-stimulus { grid-template-rows: 1fr auto; }
.wave {
  display: flex;
  width: min(82vw, 60rem);
  height: min(36vh, 20rem);
  align-items: center;
  justify-content: center;
  gap: clamp(2px, .35vw, 6px);
}
.wave i {
  width: clamp(2px, .35vw, 5px);
  height: calc(15% + var(--i) * 1.2%);
  min-height: 1rem;
  border-radius: var(--radius-pill);
  background: var(--accent);
  box-shadow: 0 0 1rem rgba(216,255,96,.24);
  transform: scaleY(calc(.45 + var(--pitch, .5)));
  animation: wave-bar 900ms ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -31ms);
}
@keyframes wave-bar { to { transform: scaleY(calc(.8 + var(--pitch, .5))); opacity: .45; } }
.sound-recall { grid-template-rows: auto 1fr auto; }
.sound-field { overflow: hidden; }
.sound-field .wave { width: 86%; height: 72%; }
.sound-axis { position: absolute; left: 1rem; color: var(--text-muted); font-family: var(--mono); font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; }
.sound-axis--top { top: 1rem; }
.sound-axis--bottom { bottom: 1rem; }
.frequency-readout--hidden { opacity: 0; }
.recall-actions { display: flex; gap: .75rem; }

.time-stimulus { grid-template-rows: 1fr auto; }
.time-ring {
  position: relative;
  width: min(58vw, 28rem);
  aspect-ratio: 1;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
}
.time-ring i { position: absolute; border: 1px solid var(--border); border-radius: 50%; }
.time-ring i:first-child { inset: 18%; }
.time-ring i:last-child { inset: 38%; background: rgba(181,167,255,.1); }
.time-ring--running { animation: ring-run var(--duration) linear both; }
@keyframes ring-run { from { transform: scale(.25); opacity: .4; } to { transform: scale(1); opacity: 1; } }
.time-recall { align-content: center; }
.hold-hint { color: var(--text-muted); font-size: .78rem; }
.hold-button i { position: absolute; inset: 14%; border: 1px solid currentColor; border-radius: 50%; opacity: .2; }

.shape-stimulus { grid-template-rows: 1fr auto; }
.shape-recall { grid-template-rows: auto minmax(0, 1fr) auto; }
.shape-canvas--interactive { width: min(62vw, 54vh, 36rem); cursor: move; }
.memory-shape {
  position: absolute;
  z-index: 2;
  left: calc(var(--x) * 100%);
  top: calc(var(--y) * 100%);
  width: 28%;
  height: 28%;
  overflow: visible;
  fill: var(--text);
  stroke: var(--text);
  stroke-width: 1.5;
  transform: translate(-50%, -50%) rotate(var(--rotation)) scale(var(--scale));
  transform-origin: center;
  touch-action: none;
}
.guess-shape { cursor: grab; }
.guess-shape:active { cursor: grabbing; }
.answer-shape { fill: transparent; stroke: var(--focus); stroke-width: 3; stroke-dasharray: 7 6; }
.shape-controls .range-control { grid-template-columns: 4.5rem minmax(6rem,1fr) 3.5rem; }

.color-compare { position: absolute; inset: 0; }
.color-compare > div { display: grid; align-content: end; padding: clamp(1.5rem,4vw,3rem); background: var(--field); color: #fff; text-shadow: 0 1px 10px #000; }
.sound-compare .comparison-wave { width: 100%; height: 10rem; }
.time-compare { position: relative; width: min(64vw,26rem); aspect-ratio: 1; }
.time-compare i { position: absolute; inset: 0; border: 2px solid var(--text); border-radius: 50%; transform: scale(var(--ratio)); }
.time-compare i.target { border-color: var(--focus); border-style: dashed; }
.shape-compare { width: min(70vw,70vh,40rem); }
.comparison-details { margin-bottom: 0; padding-left: 0; }

.final-result .final-hero > p:last-child { margin-top: 2rem; color: var(--text-muted); font-size: 1.15rem; }
.score-cell > i { position: absolute; right: 0; bottom: 0; left: 0; height: .22rem; background: var(--focus); transform: scaleX(var(--score)); transform-origin: left; }
.summary-stat { display: grid; gap: .5rem; }
.summary-stat span { color: var(--text-muted); font-family: var(--mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; }
.summary-stat strong { font-family: var(--mono); font-size: 1.1rem; }
.share-status { min-height: 1.4rem; margin-top: 1rem; color: var(--success); font-size: .78rem; }

@media (max-width: 767px) {
  .hero-copy .eyebrow { margin-top: 1rem; }
  .hero-copy .game-tabs { margin-top: 2rem; }
  .start-panel { border-radius: var(--radius-medium); }
  .feature-card--wide { grid-column: auto; }
  .range-control { grid-template-columns: 5.25rem minmax(7rem,1fr) 3.25rem; gap: .55rem; }
  .color-recall { padding-top: 1rem; }
  .color-controls { padding: .85rem; }
  .sound-recall,
  .time-recall,
  .shape-recall { padding-inline: 1rem; }
  .recall-actions { width: 100%; }
  .recall-actions > * { flex: 1; }
  .shape-canvas--interactive { width: min(92vw, 48vh); }
  .shape-controls { width: 100%; }
  .result-content { padding: 2rem var(--page-pad) max(2rem,env(safe-area-inset-bottom)); }
  .shape-compare { width: min(92vw,42vh); }
  .final-results { padding-top: 2.5rem; }
}