/* ═══════════════════════════════════════════════════════════════════════════
   Colourdle — the usual Spotify black and green, built around two circles.

   The one layout rule that matters: both circles must sit on an IDENTICAL
   neutral surround and remain adjacent. Colour perception is heavily influenced
   by what a patch is next to, so if the target sat on a different background to
   the mix the player would be judging two colours by different standards and
   could match them perfectly while being told they were wrong. That is why both
   .disc-panel elements share one background, border and padding, and why the
   board keeps them side by side even on a phone rather than stacking them.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --bg: #000000;
  --panel: #121212;
  --panel-2: #181818;
  --elevated: #1f1f1f;
  --border: #282828;
  --border-strong: #404040;
  --text: #ffffff;
  --muted: #a7a7a7;
  --green: #1db954;
  --on-green: #041005;
  --danger: #f15e6c;
  --warn: #f0c000;
  --disc-surround: #1a1a1a;
  --radius: 12px;
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}

[data-theme="light"] {
  --bg: #f6f6f4;
  --panel: #ffffff;
  --panel-2: #f1f1ef;
  --elevated: #ffffff;
  --border: #dcdcd8;
  --border-strong: #bfbfba;
  --text: #0b0b0b;
  --muted: #5f5f5c;
  --green: #128c3f;
  --on-green: #ffffff;
  --danger: #bf2b3a;
  --disc-surround: #e4e4e0;
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

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

body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }

/* A live region with no visual presence. The whole page is colour, so the
   numbers have to be announced somewhere. */
.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;
}

/* ── Top bar ─────────────────────────────────────────────────────────────── */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px clamp(12px, 3vw, 28px);
}

.topbar-right { display: flex; align-items: center; gap: 10px; }

.home-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px 8px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: color .18s ease, border-color .18s ease;
}
.home-btn:hover { color: var(--green); border-color: var(--green); }
.home-btn svg { width: 16px; height: 16px; }

.user-badge { font-size: 12px; font-weight: 800; color: var(--green); }

.settings-btn {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--panel-2);
  color: var(--muted);
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, transform .18s ease;
}
.settings-btn:hover { color: var(--green); border-color: var(--green); transform: rotate(25deg); }
.settings-btn svg { width: 18px; height: 18px; }

/* ── Page shell ──────────────────────────────────────────────────────────── */

.app {
  width: min(940px, 100%);
  margin: 0 auto;
  padding: 0 clamp(12px, 3vw, 28px) 48px;
  display: grid;
  gap: 16px;
}

.header { text-align: center; padding: 6px 0 2px; }

.title {
  font-size: clamp(30px, 7vw, 46px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.title .accent { color: var(--green); }

.subtitle { color: var(--muted); font-size: 14px; margin-top: 4px; }

/* ── Stats, shown only once signed in ────────────────────────────────────── */

.stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
}
.stat { display: grid; justify-items: center; gap: 2px; }
.stat-value { font-size: 20px; font-weight: 900; color: var(--green); }
.stat-label { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

/* ── Daily / practice tabs ───────────────────────────────────────────────── */

.round-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.round-bar .segmented-control { width: min(280px, 100%); }

.tab-btn {
  min-height: 42px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { background: var(--green); color: var(--on-green); }

.round-note { font-size: 12px; color: var(--muted); }

/* ── The board ───────────────────────────────────────────────────────────── */

.board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(10px, 2.5vw, 22px);
}

/* Both panels are identical in background, border and padding on purpose: the
   two colours must be judged against the same surround. */
.disc-panel {
  display: grid;
  gap: 6px;
  justify-items: center;
  padding: clamp(10px, 2vw, 16px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--disc-surround);
}

.disc-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.disc-wrap {
  position: relative;
  width: 100%;
  max-width: 300px;
  /* A square box, so the SVG viewBox maps onto the element exactly. That is
     what lets the value editor be positioned with a simple fraction of the
     wrapper instead of measuring the rendered SVG, and what makes a pointer's
     angle around the circle exact. */
  aspect-ratio: 1 / 1;
}

.disc-wrap svg { display: block; width: 100%; height: 100%; }

.disc-note { font-size: 11px; color: var(--muted); text-align: center; }

/* ── The peek cover (hard mode) ──────────────────────────────────────────── */

.peek-cover {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 2px;
  border-radius: 50%;
  background: var(--panel-2);
  border: 2px dashed var(--border-strong);
  color: var(--muted);
  text-align: center;
  padding: 12px;
}
.peek-icon { font-size: 26px; line-height: 1; }
.peek-text { font-size: 15px; font-weight: 900; color: var(--text); }
.peek-sub { font-size: 10px; }
/* Counting down: the ring pulses so the remaining time is felt, not just read. */
.peek-cover.counting { border-color: var(--warn); animation: peek-pulse 1s ease-in-out infinite; }
@keyframes peek-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.62; } }

/* ── The one compact control row ─────────────────────────────────────────── */

/* One row, directly under the circles. Each channel is a colour chip with a
   minus and a plus either side, so the channel's own colour IS the label and no
   name column is needed. It wraps rather than overflowing on a narrow phone —
   four CMYK chips do not fit across 390px otherwise. */
.channel-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
}

.channel-row {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.channel-value {
  min-width: 62px;
  min-height: 34px;
  padding: 0 8px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  /* The background is set inline to the channel's own colour, so the chip reads
     as "this is the red one" without a separate swatch taking up width. */
  color: #ffffff;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform .15s ease;
}
.channel-value:hover { transform: translateY(-1px); }
.channel-value .hint-up { margin-left: 4px; }
.channel-value .hint-down { margin-left: 4px; }

.step-btn {
  min-width: 30px;
  min-height: 34px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.step-btn:hover:not(:disabled) { border-color: var(--green); color: var(--green); }
.step-btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* ── Feedback ────────────────────────────────────────────────────────────── */

.feedback {
  text-align: center;
  font-size: clamp(15px, 3.4vw, 19px);
  font-weight: 800;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
}
.feedback.good { border-color: var(--green); color: var(--green); }
.feedback.bad { border-color: var(--danger); color: var(--danger); }
.feedback.win { border-color: var(--green); background: var(--green); color: var(--on-green); }

.feedback-note {
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  min-height: 16px;
}

/* ── Guess bar ───────────────────────────────────────────────────────────── */

.guess-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.guess-btn {
  min-height: 50px;
  padding: 0 34px;
  border: 0;
  border-radius: 999px;
  background: var(--green);
  color: var(--on-green);
  font: inherit;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform .15s ease, background .18s ease, opacity .18s ease;
}
.guess-btn:hover:not(:disabled) { background: #23d15f; transform: translateY(-1px); }
.guess-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

.guess-count { font-size: 12px; font-weight: 800; color: var(--muted); }

/* ── History ─────────────────────────────────────────────────────────────── */

.history { display: grid; gap: 6px; }

/* The swatch is deliberately large: with the result hidden while mixing, this
   row is the first and often only chance to see what your guess actually
   looked like, so it has to be big enough to judge against the target. */
.history-row {
  display: grid;
  grid-template-columns: 18px 68px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
}
.history-row.empty { opacity: 0.32; }
.history-row.empty .history-swatch { background: var(--panel-2); border-style: dashed; }

.history-index { font-size: 11px; font-weight: 800; color: var(--muted); }

.history-swatch {
  width: 68px;
  height: 44px;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
}

.history-values {
  min-width: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-score { font-size: 15px; font-weight: 900; text-align: right; }
.history-score.perfect { color: var(--green); }

/* ── Overlay ─────────────────────────────────────────────────────────────── */

.overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.74);
  backdrop-filter: blur(6px);
  z-index: 40;
}

.overlay-card {
  width: min(420px, 100%);
  display: grid;
  gap: 12px;
  justify-items: center;
  text-align: center;
  padding: 24px;
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  background: var(--panel);
  box-shadow: var(--shadow);
}
.overlay-icon { font-size: 40px; line-height: 1; }
.overlay-card h2 { font-size: 24px; font-weight: 900; }
.overlay-card p { font-size: 13px; color: var(--muted); }

.overlay-swatches { display: flex; gap: 12px; align-items: center; }
.overlay-swatch {
  width: 84px; height: 84px;
  border-radius: 12px;
  border: 1px solid var(--border-strong);
}
.overlay-swatch-label { font-size: 10px; font-weight: 800; text-transform: uppercase; color: var(--muted); }
.overlay-swatch-wrap { display: grid; gap: 4px; justify-items: center; }

.overlay-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* ── Buttons shared by the overlay and the settings dialog ───────────────── */

.primary-button,
.secondary-button {
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .15s ease, background .18s ease, border-color .18s ease;
}
.primary-button { border: 0; background: var(--green); color: var(--on-green); }
.primary-button:hover { background: #23d15f; transform: translateY(-1px); }
.secondary-button { border: 1px solid var(--border-strong); background: transparent; color: var(--text); }
.secondary-button:hover { border-color: var(--green); color: var(--green); }

/* ── The value editor popover ────────────────────────────────────────────── */

.value-editor {
  position: fixed;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--green);
  border-radius: 10px;
  background: var(--elevated);
  box-shadow: var(--shadow);
  transform: translate(-50%, -50%);
}
.value-editor input {
  width: 62px;
  min-height: 34px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  font-weight: 900;
  text-align: center;
}
.value-editor input:focus { outline: 2px solid var(--green); outline-offset: 1px; }
.value-unit { font-size: 13px; font-weight: 800; color: var(--muted); }

.mini-btn {
  width: 32px; height: 32px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--panel-2);
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}
.mini-btn.ok { border-color: var(--green); color: var(--green); }
.mini-btn.cancel:hover { border-color: var(--danger); color: var(--danger); }

/* ── Settings extras ─────────────────────────────────────────────────────── */

/* Five spaces in a three-column grid: three, then two. */
.spaces-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 14px; }
.spaces-grid span { font-size: 12px; }

.field-note {
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
}

/* ── Toast ───────────────────────────────────────────────────────────────── */

.toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translate(-50%, 20px);
  max-width: min(90vw, 420px);
  padding: 11px 18px;
  border: 1px solid var(--green);
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
  z-index: 70;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { border-color: var(--danger); }

/* ── Responsive ──────────────────────────────────────────────────────────── */

/* The circles deliberately STAY side by side on a phone. Stacking them would
   push the target off screen while you adjust the mix, and the whole game is
   comparing the two colours. */
@media (max-width: 700px) {
  .board { gap: 8px; }
  .disc-panel { padding: 8px; }
  .disc-title { font-size: 10px; }
  .disc-note { display: none; }
  .stats-bar { grid-template-columns: repeat(2, 1fr); }
  .channel-strip { gap: 4px; padding: 6px; }
  .channel-value { min-width: 54px; font-size: 12px; }
  .step-btn { min-width: 28px; }
  .history-row { grid-template-columns: 16px 56px minmax(0, 1fr) auto; gap: 8px; padding: 6px 8px; }
  .history-swatch { width: 56px; height: 38px; }
  .history-values { font-size: 11px; }
  .overlay-swatch { width: 70px; height: 70px; }
}

@media (max-width: 380px) {
  .channel-value { min-width: 48px; padding: 0 6px; }
  .step-btn { min-width: 26px; }
  .history-row { grid-template-columns: 14px 48px minmax(0, 1fr) auto; }
  .history-swatch { width: 48px; height: 34px; }
}

/* Respect a user who has asked for less motion. */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}