/* ── Reset & Variables ─────────────────────────────────── */
:root {
  --bg-deep: #0a0708;
  --bg-page: #0d0908;
  --text-primary: #c8c0bf;
  --text-dim: #958f8a;
  --text-faint: #8c8079;
  --text-bright: #e4dcd6;
  --fog-color: rgba(130, 110, 95, 0.08);
  --fog-thick: rgba(110, 95, 85, 0.25);
  --button-bg: rgba(110, 90, 75, 0.15);
  --button-hover: rgba(150, 125, 105, 0.2);
  --button-border: rgba(180, 150, 120, 0.2);
}

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

html {
  min-height: 100%;
  background: var(--bg-deep);
}

body {
  font-family: Georgia, 'Times New Roman', 'Palatino Linotype', serif;
  background: var(--bg-deep);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── Screen Reader Only ────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Grain Overlay ─────────────────────────────────────── */
.grain-overlay {
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  z-index: 1000;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  animation: grainShift 0.5s steps(1) infinite;
}

@keyframes grainShift {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-2%, -1%); }
  50% { transform: translate(1%, 2%); }
  75% { transform: translate(-1%, -2%); }
}

/* ── Fog Canvas ────────────────────────────────────────── */
.fog-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

#fogCanvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── Page Layout ───────────────────────────────────────── */
.clarity-page {
  position: relative;
  z-index: 1;
  min-height: 100vh;
}

/* Screens cross-fade: for ~800ms both the outgoing and incoming screen
   are un-hidden at once. Taking every screen out of flow and stacking
   them exactly on top of each other keeps that window a plain dissolve
   instead of a moment of them sitting side by side. */
.clarity-screen {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 3rem 2rem;
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  opacity: 0;
  z-index: 0;
  transition: opacity 0.8s ease;
}

.clarity-screen.active {
  opacity: 1;
}

.clarity-screen[hidden] {
  display: none;
}

/* ── Typography ────────────────────────────────────────── */
.clarity-title {
  font-size: clamp(1.5rem, 4vw, 2.4rem);
  font-weight: 400;
  color: var(--text-bright);
  letter-spacing: 0.06em;
  line-height: 1.4;
}

.clarity-final-title {
  font-size: clamp(1.3rem, 3.5vw, 2rem);
  font-weight: 400;
  color: var(--text-bright);
  letter-spacing: 0.04em;
  line-height: 1.6;
}

.clarity-instruction {
  font-size: clamp(0.95rem, 2vw, 1.15rem);
  color: var(--text-dim);
  line-height: 2;
  letter-spacing: 0.03em;
}

.clarity-round {
  font-size: 0.8rem;
  color: var(--text-faint);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.clarity-label {
  font-size: 0.8rem;
  color: var(--text-dim);
  letter-spacing: 0.1em;
}

.clarity-epigraph {
  font-size: 0.85rem;
  font-style: italic;
  color: var(--text-faint);
  line-height: 1.9;
  max-width: 420px;
  letter-spacing: 0.02em;
}

.clarity-divider {
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--text-faint), transparent);
  margin: 0.25em auto;
  opacity: 0.5;
}

/* A single soft note of color on an otherwise colorless page — an amber
   headlight-glow standing in here for the violet one on the color
   game's front page. Same mechanism (blurred, slowly cycling through
   the full hue circle, kept behind the title by .clarity-screen's own
   stacking context), different starting color, so the two games read
   as kin rather than clones. */
.intro-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(85vw, 560px);
  height: min(85vw, 560px);
  transform: translate(-50%, -50%);
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(215, 150, 95, 0.6), transparent 68%);
  filter: blur(16px) hue-rotate(0deg);
  opacity: 0.75;
  pointer-events: none;
  animation: introGlowDrift 90s linear infinite;
}

@keyframes introGlowDrift {
  from { filter: blur(16px) hue-rotate(0deg); }
  to   { filter: blur(16px) hue-rotate(360deg); }
}

/* ── Sound Stage & Controls ────────────────────────────── */
.audio-notice {
  max-width: 360px;
  color: var(--text-dim);
  font-size: 0.8rem;
  line-height: 1.6;
}

.audio-notice strong {
  color: var(--text-bright);
  font-weight: 400;
}

.inline-audio-notice {
  margin-top: 0.3rem;
}

.sound-stage,
.sound-match-interface,
.sound-reveal,
.sound-final-pairs {
  width: min(90vw, 420px);
}

.sound-orb {
  width: min(40vw, 170px);
  height: min(40vw, 170px);
  margin: 0 auto 1rem;
  border: 1px solid rgba(220, 195, 165, 0.35);
  border-radius: 50%;
  box-shadow: 0 0 0 rgba(220, 195, 165, 0);
}

.sound-orb.playing {
  animation: soundPulse 2.4s ease-in-out;
}

@keyframes soundPulse {
  0%, 100% { transform: scale(0.84); opacity: 0.45; box-shadow: 0 0 0 rgba(220, 195, 165, 0); }
  35% { transform: scale(1); opacity: 1; box-shadow: 0 0 42px rgba(220, 195, 165, 0.18); }
}

.sound-frequency,
.frequency-readout {
  color: var(--text-dim);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
}

.replay-button,
.preview-button {
  font-size: 0.85rem;
  padding: 0.55em 1.6em;
}

.sound-match-interface {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

#frequencySlider {
  width: 100%;
  accent-color: var(--text-bright);
  cursor: pointer;
}

#frequencySlider:focus-visible {
  outline: 2px solid var(--text-bright);
  outline-offset: 4px;
}

.sound-reveal {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  color: var(--text-dim);
  font-size: 0.9rem;
  letter-spacing: 0.05em;
}

.sound-result-line {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgba(180, 150, 120, 0.12);
  padding-bottom: 0.5rem;
}

.sound-result-line strong {
  color: var(--text-bright);
  font-weight: 400;
}

.sound-final-pair {
  display: grid;
  grid-template-columns: 1fr 2fr auto;
  gap: 1rem;
  border-bottom: 1px solid rgba(180, 150, 120, 0.12);
  padding: 0.75rem 0;
  color: var(--text-dim);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}

.sound-final-pair strong {
  color: var(--text-bright);
  font-weight: 400;
}

.match-instruction {
  max-width: 380px;
  line-height: 1.7;
}

.clarity-source {
  font-size: 0.7rem;
  color: var(--text-faint);
  letter-spacing: 0.06em;
  margin-top: 1rem;
}

.clarity-whisper {
  font-size: 0.8rem;
  font-style: italic;
  color: var(--text-faint);
  letter-spacing: 0.04em;
}

.match-reassurance {
  min-height: 1.4em;
  opacity: 0;
  transition: opacity 1.8s ease;
}

.match-reassurance.visible {
  opacity: 1;
}

/* ── Buttons ───────────────────────────────────────────── */
.clarity-button {
  font: inherit;
  font-size: 0.95rem;
  color: var(--text-primary);
  background: var(--button-bg);
  border: 1px solid var(--button-border);
  border-radius: 2px;
  padding: 0.7em 2em;
  cursor: pointer;
  letter-spacing: 0.05em;
  transition: background 300ms ease, border-color 300ms ease, color 300ms ease;
}

.clarity-button:hover {
  background: var(--button-hover);
  border-color: rgba(180, 150, 120, 0.35);
  color: var(--text-bright);
}

.clarity-button:focus-visible {
  outline: 2px solid var(--text-bright);
  outline-offset: 4px;
}

.clarity-button:disabled {
  opacity: 0.3;
  cursor: default;
}

/* ── Reveal & Score ────────────────────────────────────── */
.score-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.score-number {
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  color: var(--text-bright);
  font-weight: 400;
  letter-spacing: 0.04em;
}

.score-breakdown {
  font-size: 0.8rem;
  color: var(--text-dim);
  line-height: 1.8;
  letter-spacing: 0.04em;
}

.poetic-line {
  font-size: clamp(0.9rem, 2vw, 1.1rem);
  font-style: italic;
  color: var(--text-dim);
  line-height: 1.8;
  max-width: 400px;
  letter-spacing: 0.02em;
  transition: color 0.5s ease;
}

.poetic-line.deep {
  color: var(--text-bright);
  text-shadow: 0 0 24px rgba(180, 150, 120, 0.18);
}

/* ── Final Results ─────────────────────────────────────── */
.final-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

.final-score-number {
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  color: var(--text-bright);
  font-weight: 400;
  letter-spacing: 0.04em;
}

.final-score-label {
  font-size: 0.75rem;
  color: var(--text-faint);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.final-poetic {
  margin: 0.5rem 0;
}

.final-actions {
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem;
}

/* ── Noscript ──────────────────────────────────────────── */
.noscript {
  text-align: center;
  padding: 2rem;
  color: var(--text-dim);
  font-size: 0.9rem;
}

.noscript a {
  color: var(--text-primary);
  text-decoration: underline;
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 500px) {
  .clarity-screen {
    padding: 2rem 1.2rem;
    gap: 1.2rem;
  }

  .final-actions {
    flex-direction: column;
    align-items: center;
  }
}

/* Short viewports (phones in landscape) can't fit the full column of
   quotes and controls without scrolling. The page still scrolls fine,
   but trimming the decorative asides gets the actual game closer to
   reachable without one. */
@media (max-height: 480px) {
  .clarity-screen {
    padding: 1rem 1.2rem;
    gap: 0.7rem;
  }

  .clarity-epigraph,
  .match-reassurance,
  .clarity-divider {
    display: none;
  }
}

/* ── Reduced Motion ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .grain-overlay { animation: none; }
  .clarity-screen { transition: opacity 0.2s ease; }
  .poetic-line { transition: none; }
  .match-reassurance { transition: none; }
  .intro-glow { animation: none; }
  #fogCanvas { display: none; }
}

/* ── Selection ─────────────────────────────────────────── */
::selection {
  background: rgba(160, 130, 100, 0.2);
  color: var(--text-bright);
}