/* Color Match styles. Reuses the photobooth design tokens + base components from
   client/ui/app.css, plus the fashion sheet (pack cards, totals) and the riddle sheet
   (the dial rows, the round timer) — both linked in index.html. What's here is only
   what's specific to a game made of colour.

   The one design rule that runs through all of it: NOTHING in this game's chrome may be
   coloured. Every swatch on screen is a value the couple is judging, so a tinted card,
   a coloured border or a gradient panel next to one is a lie about what they're seeing.
   Grounds are paper, ink is ink, and the only colour is the game's. */

.presence-text { color: var(--ink-soft); font-size: 14px; }

/* ============ START: the LDR Date badge under the preview ============ */
.hu-start-art { display: grid; gap: 14px; justify-items: center; }
.hu-badge {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px 10px 12px;
  background: #F3FAF8;                      /* LDR Date's teal register, one shade of it */
  border: 2px solid #0E9F8E;
  border-radius: var(--r-card);
  text-decoration: none;
  transition: transform 140ms ease;
}
.hu-badge:hover { transform: translateY(-2px); }
.hu-badge-mark { display: block; width: 44px; height: 44px; }
.hu-badge-copy { display: grid; line-height: 1.25; }
.hu-badge-copy b { font-family: var(--font-display); font-size: 14px; color: #0B3B45; }
.hu-badge-copy span { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #0E9F8E; }

/* ============ PACK ============ */
.hu-pack .pack-grid { max-width: 620px; }
.hu-modes { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.hu-mode .pack-blurb { -webkit-line-clamp: 4; line-clamp: 4; }
.hu-level-note { max-width: 460px; min-height: 2.6em; }

/* ============ ROUND ============ */
.scene.hu-round { gap: var(--s2); }
.hu-mode-chip {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 9px; border: 2px solid var(--line); border-radius: 999px;
  color: var(--ink-soft);
}
.hu-instruct {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(20px, 4.6vw, 27px);
  margin: 0;
}
.hu-sub { color: var(--ink-soft); font-size: 13px; max-width: 420px; margin: 0; }

/* The swatch. Deliberately huge — colour judgement falls apart on a small sample, and
   a game that asks "is this the same colour" has to give the eye enough of it. */
.hu-swatch {
  width: min(78vw, 340px);
  aspect-ratio: 4 / 3;
  border-radius: var(--r-card);
  border: 2px solid var(--line);
  box-shadow: var(--shadow-soft);
  background: var(--paper-raised);
}
.hu-swatch--study { animation: hu-flash 220ms ease-out both; }
.hu-swatch--mine { aspect-ratio: 16 / 9; }
@keyframes hu-flash { from { transform: scale(.94); opacity: 0; } }

/* Waiting on the guide's private R.HUE_TARGET packet: candy-stripe rather than a colour,
   so nobody starts describing a placeholder. */
.hu-swatch.is-waiting {
  background: repeating-linear-gradient(45deg, #EFEFF2 0 12px, #E4E4E9 12px 24px);
}

.hu-hex {
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  letter-spacing: .08em; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.hu-hex--hidden { color: var(--line); letter-spacing: .3em; }

/* The three sliders. Each track is painted in its own channel so the hand knows where
   it is without reading the letter. */
.hu-channels { display: grid; gap: 12px; width: min(88vw, 420px); }
.hu-ch { display: grid; grid-template-columns: 20px 1fr 34px; align-items: center; gap: 10px; }
.hu-ch-label { font-family: var(--font-mono); font-weight: 700; font-size: 13px; }
.hu-ch-val {
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft);
  font-variant-numeric: tabular-nums; text-align: right;
}
.hu-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 26px; background: transparent; margin: 0;
  touch-action: pan-y;                     /* dragging a slider must not scroll the page */
}
.hu-slider::-webkit-slider-runnable-track {
  height: 10px; border-radius: 999px;
  background: linear-gradient(90deg, #17181C 0%, var(--ch, #888) 100%);
  border: 1px solid rgba(23,24,28,.14);
}
.hu-slider::-moz-range-track {
  height: 10px; border-radius: 999px;
  background: linear-gradient(90deg, #17181C 0%, var(--ch, #888) 100%);
  border: 1px solid rgba(23,24,28,.14);
}
.hu-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; margin-top: -9px;
  border-radius: 50%; background: #fff;
  border: 2px solid var(--ink);
  box-shadow: 0 2px 8px rgba(23,24,28,.24);
  cursor: grab;
}
.hu-slider::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff; border: 2px solid var(--ink);
  box-shadow: 0 2px 8px rgba(23,24,28,.24);
}
.hu-slider:disabled { opacity: .5; }

/* Duet: the guide's two panels — the truth, and what their partner is doing to it. */
.hu-duet { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.hu-duet-side { display: grid; gap: 6px; justify-items: center; }
.hu-duet .hu-swatch { width: min(42vw, 200px); aspect-ratio: 1; }
.hu-duet-tag {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft);
}

/* ============ REVEAL ============ */
.scene.hu-reveal { gap: var(--s2); }
.hu-truth { display: grid; gap: 8px; justify-items: center; }
.hu-truth .hu-swatch--truth { width: min(66vw, 260px); aspect-ratio: 5 / 2; }

.hu-cards { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; width: 100%; }
.hu-card {
  position: relative;
  display: grid; gap: 0;
  width: min(84vw, 250px);
  background: var(--paper-raised);
  border: 2px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.hu-card[data-color="pink"] { border-color: var(--pink); }
.hu-card[data-color="blue"] { border-color: var(--blue); }

/* Target and attempt share one edge with no gap and no border between them. A 1px line
   between two swatches makes near-identical colours look different; butting them up is
   the only honest way to show a miss. */
.hu-compare { display: grid; grid-template-columns: 1fr 1fr; height: 92px; }
.hu-half { height: 100%; }

.hu-card-body { display: grid; gap: 2px; justify-items: center; padding: 12px 12px 14px; }
.hu-card-name { font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.hu-score {
  font-family: var(--font-display); font-weight: 800;
  font-size: 40px; line-height: 1; font-variant-numeric: tabular-nums;
}
.hu-band { font-size: 13px; }
.hu-note { font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft); text-align: center; }
.hu-de { font-family: var(--font-mono); font-size: 10px; color: var(--line); letter-spacing: .1em; }
.hu-crown { position: absolute; top: 8px; right: 10px; font-size: 20px; }
.hu-scoring-note {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em;
  color: var(--ink-soft); max-width: 420px; margin: 0;
}

/* ============ RESULT: the night's colours in a row ============ */
.hu-result-strip {
  display: flex; gap: 6px; justify-content: center; flex-wrap: nowrap;
  width: 100%; max-width: 560px;
  overflow-x: auto;                        /* seven rounds on a narrow phone */
  padding-bottom: 4px;
}
.hu-strip-col { display: grid; gap: 3px; justify-items: stretch; min-width: 54px; flex: 1 1 0; }
.hu-strip-cell {
  height: 46px; border-radius: 6px;
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px rgba(23,24,28,.08);
}
.hu-strip-cell--target { box-shadow: inset 0 0 0 2px var(--ink); }
.hu-strip-score {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.55);
}
.hu-strip-n {
  font-family: var(--font-mono); font-size: 10px; color: var(--ink-soft); text-align: center;
}
.hu-credit { font-size: 12px; color: var(--ink-soft); margin: 0; }
.hu-credit a { color: #0E9F8E; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .hu-swatch--study { animation: none; }
}