/* Color Match Cube — mini-game styles (arcade v1)
   ---------------------------------------------------------------
   Self-contained on purpose: the mini-game pages do NOT load
   cube.css, so nothing here can disturb the Cube's 3D transforms,
   tile styling or controls. Token values mirror cube.css so the
   site still looks like one place.
   --------------------------------------------------------------- */

:root {
  --cmc-brand-50:  #eef2ff;
  --cmc-brand-100: #e0e7ff;
  --cmc-brand-300: #a5b4fc;
  --cmc-brand-500: #6366f1;
  --cmc-brand-600: #4f46e5;
  --cmc-brand-700: #4338ca;
  --cmc-accent:    #ec4899;

  --cmc-ink:          #1e293b;
  --cmc-ink-soft:     #64748b;
  --cmc-surface:      #ffffff;
  --cmc-surface-2:    #f8fafc;
  --cmc-page:         #f2f5fb;
  --cmc-line:         rgba(148,163,184,.34);
  --cmc-line-strong:  rgba(100,116,139,.48);
  --cmc-good:         #15803d;
  --cmc-bad:          #b91c1c;

  /* Neutral surround for every colour swatch, so the same colour
     reads the same way whatever interface theme is active. */
  --cmc-swatch-surround: #ffffff;
  --cmc-swatch-edge: rgba(15,23,42,.18);

  --cmc-shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.05);
  --cmc-shadow-md: 0 4px 12px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04);
  --cmc-ring: 0 0 0 3px rgba(99,102,241,.42);

  --cmc-r-sm: 8px; --cmc-r-md: 12px; --cmc-r-lg: 18px; --cmc-r-pill: 999px;
  --cmc-s1: 4px; --cmc-s2: 8px; --cmc-s3: 12px; --cmc-s4: 16px; --cmc-s5: 24px;
  --cmc-tap: 44px;
  --cmc-fast: 120ms cubic-bezier(.4,0,.2,1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --cmc-ink: #e2e8f0;
    --cmc-ink-soft: #94a3b8;
    --cmc-surface: #0f172a;
    --cmc-surface-2: #16203a;
    --cmc-page: #0b1120;
    --cmc-line: rgba(148,163,184,.24);
    --cmc-line-strong: rgba(148,163,184,.42);
    --cmc-good: #4ade80;
    --cmc-bad: #fca5a5;
    --cmc-swatch-surround: #1e293b;
    --cmc-swatch-edge: rgba(226,232,240,.22);
    --cmc-shadow-sm: 0 1px 2px rgba(0,0,0,.30);
    --cmc-shadow-md: 0 4px 14px rgba(0,0,0,.38);
  }
}

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

body.cmc-arcade {
  margin: 0;
  background: var(--cmc-page);
  color: var(--cmc-ink);
  font: 400 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;            /* belt and braces: never scroll sideways */
}

.cmc-wrap { width: 100%; max-width: 780px; margin: 0 auto; padding: 0 var(--cmc-s4); }

/* ── Header / navigation ───────────────────────────────────────── */
.cmc-top {
  background: var(--cmc-surface);
  border-bottom: 1px solid var(--cmc-line);
}
.cmc-top-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--cmc-s3); flex-wrap: wrap; padding-block: var(--cmc-s3);
}
.cmc-brand {
  font-weight: 800; letter-spacing: -.015em; color: var(--cmc-ink);
  text-decoration: none; font-size: 1.05rem;
}
.cmc-brand:hover { color: var(--cmc-brand-600); }

.cmc-nav { display: flex; flex-wrap: wrap; gap: var(--cmc-s1); }
.cmc-nav a {
  display: inline-flex; align-items: center; min-height: 40px;
  padding: 0 var(--cmc-s3); border-radius: var(--cmc-r-pill);
  color: var(--cmc-ink-soft); text-decoration: none; font-weight: 600; font-size: .92rem;
  border: 1px solid transparent;
}
.cmc-nav a:hover { color: var(--cmc-brand-600); background: var(--cmc-brand-50); }
.cmc-nav a[aria-current="page"] {
  color: var(--cmc-brand-700); background: var(--cmc-brand-50);
  border-color: var(--cmc-line-strong);
}
@media (prefers-color-scheme: dark) {
  .cmc-nav a:hover, .cmc-nav a[aria-current="page"] { background: rgba(99,102,241,.18); color: var(--cmc-brand-300); }
}

/* ── Layout blocks ─────────────────────────────────────────────── */
main.cmc-main { padding-block: var(--cmc-s5) var(--cmc-s5); }
.cmc-h1 { font-size: clamp(1.4rem, 4.6vw, 1.9rem); line-height: 1.2; margin: 0 0 var(--cmc-s2); letter-spacing: -.02em; }
.cmc-lede { color: var(--cmc-ink-soft); margin: 0 0 var(--cmc-s4); }
.cmc-panel {
  background: var(--cmc-surface); border: 1px solid var(--cmc-line);
  border-radius: var(--cmc-r-lg); padding: var(--cmc-s4);
  box-shadow: var(--cmc-shadow-sm); margin-bottom: var(--cmc-s4);
}
.cmc-panel h2 { font-size: 1.05rem; margin: 0 0 var(--cmc-s3); }
.cmc-panel h3 { font-size: .95rem; margin: var(--cmc-s4) 0 var(--cmc-s2); }
.cmc-note { color: var(--cmc-ink-soft); font-size: .88rem; }
.cmc-note strong { color: var(--cmc-ink); }

/* ── Buttons ───────────────────────────────────────────────────── */
.cmc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--cmc-tap); min-width: var(--cmc-tap);
  padding: var(--cmc-s2) var(--cmc-s4);
  border-radius: var(--cmc-r-md); border: 1px solid var(--cmc-line-strong);
  background: var(--cmc-surface-2); color: var(--cmc-ink);
  font: inherit; font-weight: 650; font-size: .92rem; cursor: pointer;
  transition: background var(--cmc-fast), border-color var(--cmc-fast), transform var(--cmc-fast);
}
.cmc-btn:hover:not(:disabled) { background: var(--cmc-surface); border-color: var(--cmc-brand-500); }
.cmc-btn:active:not(:disabled) { transform: scale(.98); }
.cmc-btn:disabled { opacity: .55; cursor: not-allowed; }
.cmc-btn--primary {
  background: linear-gradient(135deg, var(--cmc-brand-500), var(--cmc-brand-700));
  border-color: transparent; color: #fff;
}
.cmc-btn--primary:hover:not(:disabled) { background: linear-gradient(135deg, var(--cmc-brand-600), var(--cmc-brand-700)); }
.cmc-btn-row { display: flex; flex-wrap: wrap; gap: var(--cmc-s2); }

/* Visible focus everywhere, for keyboard players. */
.cmc-btn:focus-visible, .cmc-nav a:focus-visible, .cmc-tile:focus-visible,
.cmc-swap:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible,
.cmc-card:focus-visible {
  outline: none; box-shadow: var(--cmc-ring);
}

/* ── Segmented control (mode / difficulty) ─────────────────────── */
.cmc-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px;
  background: var(--cmc-surface-2); border: 1px solid var(--cmc-line); border-radius: var(--cmc-r-pill); }
.cmc-seg button {
  /* 44px so the segmented control meets the same touch-target floor as
     every other button on the page. */
  min-height: var(--cmc-tap); padding: 0 var(--cmc-s4); border: 0; border-radius: var(--cmc-r-pill);
  background: transparent; color: var(--cmc-ink-soft); font: inherit; font-weight: 650;
  font-size: .88rem; cursor: pointer;
}
.cmc-seg button[aria-pressed="true"] { background: var(--cmc-brand-600); color: #fff; }

/* ── Stats row ─────────────────────────────────────────────────── */
.cmc-stats { display: flex; flex-wrap: wrap; gap: var(--cmc-s3) var(--cmc-s5); margin: 0 0 var(--cmc-s3); padding: 0; list-style: none; }
.cmc-stats li { display: flex; flex-direction: column; }
.cmc-stats .k { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--cmc-ink-soft); font-weight: 600; }
.cmc-stats .v { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── Swatches (shared neutral surround) ────────────────────────── */
.cmc-swatch-frame {
  background: var(--cmc-swatch-surround);
  border: 1px solid var(--cmc-swatch-edge);
  border-radius: var(--cmc-r-md); padding: 6px;
}
.cmc-swatch { display: block; width: 100%; height: 100%; border-radius: var(--cmc-r-sm); }

/* ── Shade Guess ───────────────────────────────────────────────── */
.sg-compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cmc-s3); margin-bottom: var(--cmc-s4); }
.sg-compare figure { margin: 0; }
.sg-compare figcaption { font-size: .8rem; font-weight: 650; color: var(--cmc-ink-soft); margin-bottom: 6px; }
.sg-compare .cmc-swatch-frame { height: 116px; }
@media (max-width: 380px) { .sg-compare .cmc-swatch-frame { height: 92px; } }

.sg-slider { margin-bottom: var(--cmc-s3); }
.sg-slider-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--cmc-s2); margin-bottom: 2px; }
.sg-slider label { font-weight: 650; font-size: .9rem; }
.sg-slider output { font-variant-numeric: tabular-nums; font-weight: 700; }
.sg-slider input[type="range"] { width: 100%; height: var(--cmc-tap); accent-color: var(--cmc-brand-600); }
.sg-slider--r input[type="range"] { accent-color: #dc2626; }
.sg-slider--g input[type="range"] { accent-color: #16a34a; }
.sg-slider--b input[type="range"] { accent-color: #2563eb; }

.sg-hexbox { margin: var(--cmc-s3) 0; }
.sg-hexbox summary { cursor: pointer; font-weight: 650; font-size: .9rem; min-height: var(--cmc-tap); display: flex; align-items: center; }
.sg-hexrow { display: flex; gap: var(--cmc-s2); flex-wrap: wrap; align-items: center; margin-top: var(--cmc-s2); }
.sg-hexrow input {
  flex: 1 1 150px; min-height: var(--cmc-tap); padding: 0 var(--cmc-s3);
  border: 1px solid var(--cmc-line-strong); border-radius: var(--cmc-r-md);
  background: var(--cmc-surface-2); color: var(--cmc-ink); font: inherit; font-family: ui-monospace, monospace;
}
.sg-error { color: var(--cmc-bad); font-size: .85rem; font-weight: 650; }

.sg-history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--cmc-s2); }
.sg-history li { display: flex; align-items: center; gap: var(--cmc-s3); padding: var(--cmc-s2);
  border: 1px solid var(--cmc-line); border-radius: var(--cmc-r-md); background: var(--cmc-surface-2); }
.sg-history .cmc-swatch-frame { flex: 0 0 auto; width: 46px; height: 46px; padding: 4px; }
.sg-hist-body { min-width: 0; }
.sg-hist-score { font-weight: 700; font-variant-numeric: tabular-nums; }
.sg-hist-hints { font-size: .85rem; color: var(--cmc-ink-soft); }
.sg-hist-hints .up::before { content: "▲ "; }
.sg-hist-hints .down::before { content: "▼ "; }
.sg-hist-hints .ok::before { content: "✔ "; }
.sg-hist-hints .ok { color: var(--cmc-good); font-weight: 650; }

/* ── Gradient Rush ─────────────────────────────────────────────── */
.gr-board { display: flex; gap: var(--cmc-s2); margin: var(--cmc-s3) 0; }
.gr-board.is-row { flex-direction: row; align-items: stretch; }
.gr-board.is-col { flex-direction: column; }
.cmc-tile {
  position: relative; flex: 1 1 0; min-width: 0;
  min-height: var(--cmc-tap); padding: 0;
  border: 2px solid transparent; border-radius: var(--cmc-r-md);
  background: var(--cmc-swatch-surround); cursor: pointer;
  display: flex; align-items: flex-end; justify-content: center;
}
.gr-board.is-row .cmc-tile { height: 132px; }
.gr-board.is-col .cmc-tile { height: 56px; }
.cmc-tile .fill { position: absolute; inset: 4px; border-radius: var(--cmc-r-sm); }
.cmc-tile .badge {
  position: relative; z-index: 1; margin-bottom: 5px;
  font-size: .68rem; font-weight: 700; padding: 2px 7px; border-radius: var(--cmc-r-pill);
  background: rgba(255,255,255,.94); color: #0f172a; border: 1px solid rgba(15,23,42,.2);
}
.cmc-tile[aria-disabled="true"] { cursor: default; }
.cmc-tile[data-selected="true"] { border-color: var(--cmc-brand-600); }
.cmc-tile[data-selected="true"]::after {
  content: "Selected"; position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
  font-size: .65rem; font-weight: 700; background: var(--cmc-brand-600); color: #fff;
  padding: 1px 6px; border-radius: var(--cmc-r-pill); z-index: 2;
}
.gr-order { font-size: .82rem; color: var(--cmc-ink-soft); font-weight: 650; }

/* ── Odd Shade ─────────────────────────────────────────────────── */
.os-grid { display: grid; gap: var(--cmc-s2); margin: var(--cmc-s3) auto;
  width: 100%; max-width: 420px; aspect-ratio: 1 / 1; }
.os-cell {
  border: 2px solid transparent; border-radius: var(--cmc-r-sm); padding: 0;
  cursor: pointer; min-width: 0; min-height: 0; position: relative;
}
.os-cell[data-wrong="true"] { border-color: var(--cmc-bad); cursor: default; }
.os-cell[data-wrong="true"]::after {
  content: "✕"; position: absolute; inset: 0; display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 1.1rem; text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.os-lives { display: inline-flex; gap: 4px; }
.os-lives span { font-size: 1rem; }

/* ── Result panel ──────────────────────────────────────────────── */
.cmc-result { border-color: var(--cmc-brand-500); }
.cmc-result h2 { font-size: 1.15rem; }
.cmc-result .outcome { font-weight: 800; font-size: 1.05rem; margin-bottom: var(--cmc-s2); }
.cmc-result .outcome.win { color: var(--cmc-good); }
.cmc-result .outcome.lose { color: var(--cmc-bad); }
[hidden] { display: none !important; }

/* ── Cross-links + cards ───────────────────────────────────────── */
.cmc-cards { display: grid; gap: var(--cmc-s3); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); padding: 0; margin: 0; list-style: none; }
.cmc-card {
  display: flex; flex-direction: column; gap: 6px; height: 100%;
  padding: var(--cmc-s4); border: 1px solid var(--cmc-line); border-radius: var(--cmc-r-lg);
  background: var(--cmc-surface); color: inherit; text-decoration: none;
  box-shadow: var(--cmc-shadow-sm); transition: transform var(--cmc-fast), box-shadow var(--cmc-fast);
}
.cmc-card:hover { transform: translateY(-2px); box-shadow: var(--cmc-shadow-md); border-color: var(--cmc-brand-500); }
.cmc-card .name { font-weight: 750; }
.cmc-card .desc { font-size: .87rem; color: var(--cmc-ink-soft); }
.cmc-card svg { display: block; width: 100%; height: 54px; border-radius: var(--cmc-r-sm); }

/* ── Advertising placeholder ────────────────────────────────────
   Reserved position only. Nothing is loaded and no publisher account
   is configured, so the slot renders as literally nothing (no empty
   grey box). See README-ARCADE.md before enabling. The margin keeps
   at least 150px between the play area and any future unit. */
.cmc-ad-slot { margin-top: 150px; }
.cmc-ad-slot:empty { display: none; margin: 0; }

/* ── Footer ────────────────────────────────────────────────────── */
.cmc-foot { border-top: 1px solid var(--cmc-line); background: var(--cmc-surface);
  padding-block: var(--cmc-s4); margin-top: var(--cmc-s5); font-size: .85rem; color: var(--cmc-ink-soft); }
.cmc-foot a { color: var(--cmc-ink-soft); }
.cmc-foot nav { display: flex; flex-wrap: wrap; gap: var(--cmc-s3); margin-bottom: var(--cmc-s2); }

.cmc-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ── Spectrum theme (Cube reward) ───────────────────────────────
   Decoration only: chrome borders and header accents. It must never
   touch a puzzle swatch, the neutral swatch surround, tile fills,
   opacity or filters — those tokens are deliberately absent here. */
.cmc-theme-spectrum .cmc-top {
  border-bottom-color: transparent;
  background-image: linear-gradient(90deg, #6366f1, #ec4899, #f59e0b, #10b981, #6366f1);
  background-size: 100% 3px; background-repeat: no-repeat; background-position: bottom;
}
.cmc-theme-spectrum .cmc-panel { border-color: rgba(99,102,241,.42); }
.cmc-theme-spectrum .cmc-h1 {
  background: linear-gradient(105deg, var(--cmc-brand-600), var(--cmc-accent));
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
@supports not (background-clip: text) {
  .cmc-theme-spectrum .cmc-h1 { color: var(--cmc-brand-600); -webkit-text-fill-color: currentColor; }
}
.cmc-badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700;
  padding: 3px 10px; border-radius: var(--cmc-r-pill);
  background: var(--cmc-brand-50); color: var(--cmc-brand-700); border: 1px solid var(--cmc-brand-300);
}
@media (prefers-color-scheme: dark) {
  .cmc-badge { background: rgba(99,102,241,.2); color: var(--cmc-brand-300); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .cmc-card:hover { transform: none; }
}