/* ── Reset & Variables ─────────────────────────────────── */
:root {
  --bg-deep: #07060b;
  --bg-page: #0a0910;
  --text-primary: #c4bfc8;
  --text-dim: #958fa2;
  --text-faint: #7f798c;
  --text-bright: #e0dce8;
  --fog-color: rgba(120, 110, 130, 0.08);
  --fog-thick: rgba(100, 95, 110, 0.25);
  --button-bg: rgba(100, 90, 120, 0.15);
  --button-hover: rgba(140, 130, 160, 0.2);
  --button-border: rgba(160, 140, 180, 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 (that's what makes the fade a fade). When
   .clarity-page was a centered row-flex, that meant two flex items sat
   side by side for that whole window — the incoming screen rendered
   off to the right of the outgoing one, then snapped to center the
   instant the outgoing one's [hidden] finally landed. Taking every
   screen out of flow and stacking them exactly on top of each other
   turns that jump into the plain, uninterrupted dissolve the opacity
   transition below was always meant to produce. */
.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;
}

/* The [hidden] attribute alone is silenced by the display:flex above
   (author CSS beats the UA [hidden] rule at equal specificity), which
   left every screen laid out at once in the row-flex page container —
   invisible on wide viewports by luck, but visibly broken (squeezed,
   shifted off-screen) on narrow ones. Restore it explicitly. */
.clarity-screen[hidden] {
  display: none;
}

/* ── Typography ────────────────────────────────────────── */
.clarity-title {
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  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-attribution {
  display: block;
  margin-top: 0.7em;
  font-style: normal;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.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 — the
   quiet promise of the game to come, not a decoration competing with
   it. It sits behind the title (.clarity-screen is its own stacking
   context, so z-index: -1 stays put rather than racing the fog), drifts
   through the full hue circle over a couple of minutes, and stays too
   blurred and too faint to ever compete with the text on top of it. */
.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(180, 110, 210, 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); }
}

.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(160, 140, 180, 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;
}


/* ── Color Stage (Study Phase) ─────────────────────────── */
.color-stage {
  position: relative;
  width: min(70vw, 42vh, 280px);
  height: min(70vw, 42vh, 280px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.target-field {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  transition: opacity 1.2s ease;
  opacity: 0;
}

.target-field.visible {
  opacity: 1;
}

.target-field.concealed {
  opacity: 0;
}

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

/* ── Matching Interface ────────────────────────────────── */
.match-interface {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
}

.wheel-container {
  position: relative;
  width: min(70vw, 42vh, 280px);
  height: min(70vw, 42vh, 280px);
}

#wheel-canvas,
#colorWheel {
  width: 100%;
  height: 100%;
  cursor: crosshair;
  border-radius: 50%;
  touch-action: none;
}

.match-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  width: 100%;
  max-width: 320px;
}

.lightness-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.lightness-track {
  position: relative;
  width: 100%;
  height: 32px;
  display: flex;
  align-items: center;
}

#lightnessSlider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: #1a1920;
  outline: none;
  cursor: pointer;
}

#lightnessSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--text-bright);
  border: 2px solid var(--bg-deep);
  cursor: pointer;
}

#lightnessSlider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--text-bright);
  border: 2px solid var(--bg-deep);
  cursor: pointer;
}

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

.current-color-square {
  width: min(50vw, 160px);
  height: min(50vw, 160px);
  border-radius: 4px;
  border: 1px solid rgba(160, 140, 180, 0.1);
  transition: background-color 50ms ease;
}

/* ── Accessibility Sliders ─────────────────────────────── */
.accessibility-controls {
  border: none;
  padding: 0;
  margin: 0.5rem 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  max-width: 320px;
}

.slider-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
}

.slider-row label {
  font-size: 0.75rem;
  color: var(--text-faint);
  min-width: 70px;
  text-align: right;
  letter-spacing: 0.08em;
}

.slider-row input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: rgba(100, 90, 120, 0.2);
  outline: none;
}

.slider-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--text-dim);
  cursor: pointer;
}

.slider-row input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--text-dim);
  cursor: pointer;
}

.slider-row input[type="range"]:focus-visible {
  outline: 2px solid var(--text-bright);
  outline-offset: 3px;
}


/* ── Reveal Phase ──────────────────────────────────────── */
.reveal-comparison {
  display: flex;
  gap: 2rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.reveal-color {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
}

.reveal-swatch {
  width: min(35vw, 140px);
  height: min(35vw, 140px);
  border-radius: 4px;
  border: 1px solid rgba(160, 140, 180, 0.1);
  opacity: 0;
  transition: opacity 1s ease;
}

.reveal-swatch.visible {
  opacity: 1;
}

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

.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(160, 140, 180, 0.18);
}

/* ── Final Results ─────────────────────────────────────── */
.final-pairs-header {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  justify-content: center;
  width: 100%;
  max-width: 480px;
}

.final-col-label {
  width: 48px;
  text-align: center;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.final-header-spacer {
  width: 28px;
}

.final-pairs {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
  width: 100%;
  max-width: 480px;
}

/* A faint breathing glow behind the recollected colors — a hint that
   what is held here is more than the swatches alone. */
.final-pairs::before {
  content: '';
  position: absolute;
  inset: -2rem;
  background: radial-gradient(ellipse at center, rgba(160, 140, 180, 0.06), transparent 70%);
  animation: finalGlowBreathe 6s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}

@keyframes finalGlowBreathe {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.final-pair {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  width: 100%;
  justify-content: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 900ms ease, transform 900ms ease;
}

.final-pair.visible {
  opacity: 1;
  transform: none;
}

.final-pair-swatch {
  width: 48px;
  height: 48px;
  border-radius: 3px;
  border: 1px solid rgba(160, 140, 180, 0.1);
}

.final-pair-score {
  font-size: 0.8rem;
  color: var(--text-dim);
  min-width: 30px;
  text-align: center;
}

/* A thread rather than an arrow: it draws itself once both colors have
   settled, standing in for whatever carried one into the other. */
.final-pair-thread {
  position: relative;
  width: 28px;
  height: 1px;
  background: var(--text-faint);
  opacity: 0;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 900ms ease, opacity 900ms ease;
}

.final-pair-thread.drawn {
  opacity: 0.8;
  transform: scaleX(1);
  box-shadow: 0 0 6px rgba(160, 140, 180, 0.4);
}

.final-pair-thread::after {
  content: '';
  position: absolute;
  right: -2px;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--text-bright);
  opacity: 0;
  transform: translateY(-50%) scale(0);
  transition: transform 500ms ease 700ms, opacity 500ms ease 700ms;
}

.final-pair-thread.drawn::after {
  opacity: 0.8;
  transform: translateY(-50%) scale(1);
}

.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;
  }

  .reveal-comparison {
    gap: 1.2rem;
  }

  .final-pair {
    gap: 0.8rem;
  }

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

/* Short viewports (phones in landscape) can't fit the full column of
   quotes, wheel, and controls without scrolling. The page still scrolls
   fine, but trimming the decorative asides gets the actual game — the
   wheel and its controls — 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; }
  .target-field { transition: opacity 0.3s ease; }
  .reveal-swatch { transition: opacity 0.3s ease; }
  .poetic-line { transition: none; }
  .match-reassurance { transition: none; }
  .final-pair { transition: opacity 0.3s ease; transform: none; }
  .final-pair-thread { transition: none; }
  .final-pair-thread::after { transition: none; }
  .final-pairs::before { animation: none; opacity: 0.7; }
  .intro-glow { animation: none; }
  #fogCanvas { display: none; }
}

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