/* ============================================================
   HUE — daily color match
   ============================================================ */

.hue-page { padding-bottom: 60px; }
[hidden] { display: none !important; }

/* === Play stage: target shimmer + sliders + attempts list === */
.play-stage { animation: fadeIn 0.6s; }

.prompt-row {
  display: flex; flex-direction: column; align-items: center;
  gap: 14px;
  margin: 12px 0 28px;
}
.prompt-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.3em;
  color: var(--ink-soft); text-transform: uppercase;
}
.target-mystery {
  width: 100%;
  max-width: 480px;
  aspect-ratio: 5 / 1;
  border-radius: 14px;
  overflow: hidden;
  background: var(--paper-2);
  border: 1px solid var(--line-strong);
}
.target-shimmer {
  width: 100%; height: 100%;
  filter: blur(28px) saturate(0.85);
  transform: scale(1.05);
  background-size: 200% 200%;
  animation: shimmerSlide 18s ease-in-out infinite alternate;
}
@keyframes shimmerSlide {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* === Picker === */
.picker {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px;
  margin-bottom: 24px;
}
.picker-preview {
  width: 100%;
  height: 180px;
  border-radius: 14px;
  border: 2px solid var(--ink);
  margin-bottom: 8px;
  transition: background 0.15s;
}
.picker-name {
  text-align: center;
  font-size: 12px;
  color: var(--ink-soft);
  margin-bottom: 20px;
  letter-spacing: 0.05em;
}

.slider-row {
  display: grid;
  grid-template-columns: 60px 1fr 50px;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.slider-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.18em;
  color: var(--ink-soft); text-transform: uppercase;
}
.slider {
  width: 100%; height: 22px;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
  border-radius: 999px;
}
.slider:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.slider::-webkit-slider-runnable-track {
  height: 14px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
}
.slider::-moz-range-track {
  height: 14px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
}
/* Hue slider — full rainbow */
.slider--hue::-webkit-slider-runnable-track {
  background: linear-gradient(to right, hsl(0,80%,55%), hsl(60,80%,55%), hsl(120,80%,45%), hsl(180,80%,45%), hsl(240,80%,55%), hsl(300,80%,55%), hsl(360,80%,55%));
}
.slider--hue::-moz-range-track {
  background: linear-gradient(to right, hsl(0,80%,55%), hsl(60,80%,55%), hsl(120,80%,45%), hsl(180,80%,45%), hsl(240,80%,55%), hsl(300,80%,55%), hsl(360,80%,55%));
}
/* Sat slider — grey to vivid */
.slider--sat::-webkit-slider-runnable-track {
  background: linear-gradient(to right, #999, #4A90E2);
}
.slider--sat::-moz-range-track {
  background: linear-gradient(to right, #999, #4A90E2);
}
/* Light slider — black to white */
.slider--light::-webkit-slider-runnable-track {
  background: linear-gradient(to right, #000, #fff);
}
.slider--light::-moz-range-track {
  background: linear-gradient(to right, #000, #fff);
}

.slider::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--ink);
  cursor: grab;
  margin-top: -5px; /* center on track */
  box-shadow: 0 2px 6px rgba(26,20,16,0.20);
  transition: transform 0.1s, box-shadow 0.15s;
}
.slider::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--ink);
  cursor: grab;
  box-shadow: 0 2px 6px rgba(26,20,16,0.20);
}
.slider::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.1); }

.slider--match::-webkit-slider-thumb { background: var(--c-yes); border-color: var(--gold); }
.slider--match::-moz-range-thumb     { background: var(--c-yes); border-color: var(--gold); }
.slider--miss::-webkit-slider-thumb  { background: var(--paper); border-color: var(--accent); }
.slider--miss::-moz-range-thumb      { background: var(--paper); border-color: var(--accent); }

.slider-value {
  font-size: 12px;
  color: var(--ink);
  font-weight: 500;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.guess-btn {
  width: 100%;
  margin-top: 12px;
  background: var(--ink); color: var(--paper);
  border: none; border-radius: 14px;
  padding: 16px;
  font: inherit; font-weight: 700;
  font-size: 14px; letter-spacing: 0.18em;
  cursor: pointer;
  transition: transform 0.1s, opacity 0.15s;
}
.guess-btn:disabled { opacity: 0.5; cursor: wait; }
@media (hover: hover) { .guess-btn:hover:not(:disabled) { transform: translateY(-1px); } }
.guess-btn:active:not(:disabled) { transform: translateY(1px); }

.guess-error {
  margin-top: 10px;
  font-size: 11px; color: var(--accent);
  min-height: 14px;
  text-align: center;
}

/* === Attempts list === */
.attempts-list {
  display: flex; flex-direction: column;
  gap: 8px;
}
.attempt-row {
  display: grid;
  grid-template-columns: 56px 70px 1fr;
  align-items: center;
  gap: 12px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 14px;
  animation: attemptIn 0.4s ease-out;
}
@keyframes attemptIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.attempt-swatch {
  width: 56px; height: 36px;
  border-radius: 8px;
  border: 1.5px solid var(--ink);
}
.attempt-acc {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.attempt-meta {
  font-size: 11px; color: var(--ink-soft);
  letter-spacing: 0.05em;
}

/* === Result stage === */
.result-stage { animation: fadeIn 0.7s; }

.result-card {
  background: var(--ink);
  color: var(--paper);
  border-radius: 22px;
  padding: 32px 28px;
  text-align: center;
  margin-bottom: 24px;
  position: relative; overflow: hidden;
}
.result-lead {
  font-size: 11px; letter-spacing: 0.3em;
  color: rgba(245,239,227,0.7); text-transform: uppercase;
  margin-bottom: 18px;
}
.result-swatches {
  display: flex; justify-content: center; gap: 14px;
  margin-bottom: 18px;
}
.swatch-block { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.swatch-label {
  font-size: 10px; letter-spacing: 0.25em;
  color: rgba(245,239,227,0.6); text-transform: uppercase;
}
.swatch {
  width: 100px; height: 100px;
  border-radius: 14px;
  border: 2px solid rgba(245,239,227,0.3);
}
.swatch--target { border-color: var(--c-yes); }
.swatch--best { border-color: rgba(245,239,227,0.5); }

.result-stats {
  margin-bottom: 16px;
}
.result-acc {
  font-family: 'Newsreader', serif;
  font-weight: 500;
  font-size: clamp(56px, 12vw, 100px);
  line-height: 1; letter-spacing: -0.05em;
  color: var(--c-yes);
  font-variant-numeric: tabular-nums;
}
.result-acc .pct { font-size: 0.4em; font-weight: 600; opacity: 0.8; }
.result-meta {
  font-style: italic;
  font-size: 17px;
  color: rgba(245,239,227,0.85);
  margin-top: 4px;
}
.result-streak {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  background: rgba(245,239,227,0.08);
  padding: 8px 18px; border-radius: 999px;
  letter-spacing: 0.05em;
  margin-top: 8px;
}
.result-streak strong { color: var(--c-yes); font-weight: 600; }

/* === Journey strip === */
.journey-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  margin-bottom: 28px;
  height: 80px;
}
.journey-bar {
  background: var(--paper-2);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  height: 100%;
}
.journey-bar--filled {
  border-color: var(--ink);
}

/* === Share section (reuse YESNO patterns) === */
.share-section { margin-bottom: 24px; }
.share-primary {
  width: 100%;
  background: var(--accent); color: white;
  border: none; border-radius: 14px;
  padding: 16px 20px;
  font: inherit; font-size: 14px; font-weight: 700;
  cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px; text-align: left;
  transition: transform 0.1s, background 0.15s;
}
@media (hover: hover) { .share-primary:hover { transform: translateY(-1px); background: var(--accent-soft); } }
.share-primary .ico { font-size: 16px; margin-right: 6px; }
.share-meta-text { opacity: 0.85; font-size: 11px; letter-spacing: 0.1em; }
.share-secondary { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.share-secondary .btn {
  flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 14px 16px; border-radius: 14px;
  font-weight: 600; font-size: 14px;
}
.share-btn-label { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.65; }
.share-btn-text { font-weight: 700; }

.next-up {
  text-align: center;
  padding: 24px 0 8px;
  border-top: 1px solid var(--line);
  margin-top: 14px;
}
.next-up .when {
  font-size: 11px; color: var(--ink-soft);
  letter-spacing: 0.18em; text-transform: uppercase;
  margin-bottom: 6px;
}
.next-up .countdown {
  font-size: 28px; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 480px) {
  .swatch { width: 80px; height: 80px; }
  .share-secondary { grid-template-columns: 1fr; }
}