/* ==========================================================================
   Noir Chroma — Games
   OVERRIDE LAYER ONLY. assets/css/games-page.css owns the layout; this file
   restyles it for the dark skin. Every selector is scoped to
   body[data-skin="noir"] so it can never leak into the admin panel, which
   falls back to the default skin via manifest "public_only": true.

   Tokens: --n-* from skins/noir/css/tokens.css only.
   ========================================================================== */

/* Reduced motion is declared FIRST so the very first paint is already calm. */
@media (prefers-reduced-motion: reduce) {
  body[data-skin="noir"] .rg-card,
  body[data-skin="noir"] .rg-level,
  body[data-skin="noir"] .rg-btn,
  body[data-skin="noir"] .rg-choice,
  body[data-skin="noir"] .rg-option,
  body[data-skin="noir"] .rg-piece {
    transition: none;
  }
  body[data-skin="noir"] .rg-card::before { animation: none; }
}

/* --- Hero ----------------------------------------------------------------- */
body[data-skin="noir"] .rg-kicker {
  color: var(--n-text-muted);
  letter-spacing: var(--n-tracking-wide);
}

body[data-skin="noir"] .rg-hero-title {
  font-family: var(--n-font-display);
  font-size: var(--n-fz-4xl);
  font-weight: var(--n-fw-black);
  line-height: var(--n-lh-tight);
  color: var(--n-text);
}

/* Gradient wordmark, guarded so unsupported engines keep a solid colour. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  body[data-skin="noir"] .rg-hero-title {
    background: var(--n-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

body[data-skin="noir"] .rg-hero-sub,
body[data-skin="noir"] .rg-game-sub,
body[data-skin="noir"] .rg-hint,
body[data-skin="noir"] .rg-setup-note,
body[data-skin="noir"] .rg-result-meta {
  color: var(--n-text-muted);
  line-height: var(--n-lh-body);
}

body[data-skin="noir"] .rg-game-title {
  font-family: var(--n-font-display);
  font-weight: var(--n-fw-black);
  color: var(--n-text);
}

body[data-skin="noir"] .rg-back { color: var(--n-text-muted); }
body[data-skin="noir"] .rg-back:hover { color: var(--n-accent); }

/* --- Hub cards ------------------------------------------------------------ */
body[data-skin="noir"] .rg-card {
  background: var(--n-surface);
  border: 1px solid var(--n-border);
  border-radius: var(--n-r-xl);
  color: var(--n-text);
  transition: transform var(--n-dur) var(--n-ease),
              box-shadow var(--n-dur) var(--n-ease),
              border-color var(--n-dur) var(--n-ease);
}

/* Chromatic wash that only surfaces on hover. */
body[data-skin="noir"] .rg-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--n-grad-soft);
  opacity: 0;
  transition: opacity var(--n-dur) var(--n-ease);
  pointer-events: none;
}
body[data-skin="noir"] a.rg-card:hover::before { opacity: 1; }

body[data-skin="noir"] a.rg-card:hover {
  transform: translateY(-2px);
  border-color: var(--n-border-strong);
  box-shadow: var(--n-glow);
}
body[data-skin="noir"] a.rg-card:active { transform: translateY(0); }
body[data-skin="noir"] a.rg-card:focus-visible {
  outline: 2px solid var(--n-accent);
  outline-offset: 3px;
}

body[data-skin="noir"] .rg-card-title {
  font-family: var(--n-font-display);
  font-weight: var(--n-fw-bold);
  color: var(--n-text);
  position: relative;
}
body[data-skin="noir"] .rg-card-sub,
body[data-skin="noir"] .rg-card-note { color: var(--n-text-muted); position: relative; }
body[data-skin="noir"] .rg-card-count { color: var(--n-text-dim); }

body[data-skin="noir"] .rg-card-cta {
  position: relative;
  background: var(--n-grad);
  color: var(--n-on-accent);
  border-radius: var(--n-r-pill);
  font-weight: var(--n-fw-bold);
}

/* Card artwork picks up the brand gradient. */
body[data-skin="noir"] .rg-card-art i { background: var(--n-grad); }
body[data-skin="noir"] .rg-art-mis i {
  background: repeating-linear-gradient(45deg,
    var(--n-pink) 0 6px, transparent 6px 12px);
}

/* --- Level chooser -------------------------------------------------------- */
body[data-skin="noir"] .rg-level {
  background: var(--n-surface);
  border: 1px solid var(--n-border);
  border-radius: var(--n-r-lg);
  color: var(--n-text);
  transition: transform var(--n-dur) var(--n-ease),
              border-color var(--n-dur) var(--n-ease),
              box-shadow var(--n-dur) var(--n-ease);
}
body[data-skin="noir"] .rg-level:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.08);
  border-color: var(--n-border-strong);
  box-shadow: var(--n-glow);
}
body[data-skin="noir"] .rg-level:active:not(:disabled) { transform: translateY(0); }
body[data-skin="noir"] .rg-level:focus-visible { outline: 2px solid var(--n-accent); outline-offset: 2px; }
body[data-skin="noir"] .rg-level-meta { color: var(--n-text-muted); }
body[data-skin="noir"] .rg-setup-title { color: var(--n-text); font-family: var(--n-font-display); }

/* --- HUD ------------------------------------------------------------------ */
body[data-skin="noir"] .rg-hud-item {
  background: var(--n-surface-2);
  border: 1px solid var(--n-border);
  border-radius: var(--n-r-pill);
  color: var(--n-text);
}
body[data-skin="noir"] .rg-hud-label { color: var(--n-text-muted); }
body[data-skin="noir"] .rg-status { color: var(--n-text); }

/* --- Buttons -------------------------------------------------------------- */
body[data-skin="noir"] .rg-btn {
  background: var(--n-surface-2);
  border: 1px solid var(--n-border);
  border-radius: var(--n-r-pill);
  color: var(--n-text);
  transition: transform var(--n-dur-fast) var(--n-ease),
              border-color var(--n-dur) var(--n-ease),
              filter var(--n-dur) var(--n-ease);
}
body[data-skin="noir"] .rg-btn:hover { transform: translateY(-1px); filter: brightness(1.08); border-color: var(--n-border-strong); }
body[data-skin="noir"] .rg-btn:active { transform: translateY(0); }
body[data-skin="noir"] .rg-btn:focus-visible { outline: 2px solid var(--n-accent); outline-offset: 2px; }
body[data-skin="noir"] .rg-btn--primary {
  background: var(--n-grad);
  color: var(--n-on-accent);
  border-color: transparent;
  font-weight: var(--n-fw-bold);
}
body[data-skin="noir"] .rg-btn--ghost { background: transparent; }

/* --- Loading -------------------------------------------------------------- */
body[data-skin="noir"] .rg-loading { color: var(--n-text-muted); }
body[data-skin="noir"] .rg-spinner {
  border-color: var(--n-border);
  border-top-color: var(--n-accent);
}

body[data-skin="noir"] .rg-empty {
  border: 1px dashed var(--n-border);
  border-radius: var(--n-r-lg);
  color: var(--n-text-muted);
}

/* --- Memory --------------------------------------------------------------- */
body[data-skin="noir"] .rg-mcard-inner {
  border-radius: var(--n-r-md);
  transition: transform var(--n-dur-slow) var(--n-ease-emph);
}
body[data-skin="noir"] .rg-mcard-back,
body[data-skin="noir"] .rg-mcard-face {
  border-radius: var(--n-r-md);
  border: 1px solid var(--n-border);
}
body[data-skin="noir"] .rg-mcard-back {
  background: var(--n-grad-soft), var(--n-surface-2);
}
body[data-skin="noir"] .rg-mcard:focus-visible {
  outline: 2px solid var(--n-accent);
  outline-offset: 3px;
  border-radius: var(--n-r-md);
}
body[data-skin="noir"] .rg-mcard.is-matched { opacity: .5; }
body[data-skin="noir"] .rg-mcard.is-matched .rg-mcard-face { box-shadow: var(--n-glow); }

/* --- Jigsaw --------------------------------------------------------------- */
body[data-skin="noir"] .rg-board--puzzle {
  border-radius: var(--n-r-md);
  background: var(--n-ink-1);
  box-shadow: var(--n-sh-2);
}
body[data-skin="noir"] .rg-piece { border-radius: var(--n-r-xs); }
body[data-skin="noir"] .rg-piece:focus-visible,
body[data-skin="noir"] .rg-piece.is-selected { outline-color: var(--n-accent); }
body[data-skin="noir"] .rg-piece.is-over { outline-color: var(--n-success); }
body[data-skin="noir"] .rg-peek-overlay {
  border: 1px solid var(--n-border);
  border-radius: var(--n-r-md);
}

/* --- What's missing ------------------------------------------------------- */
body[data-skin="noir"] .rg-mis-figure {
  border: 1px solid var(--n-border);
  border-radius: var(--n-r-lg);
  box-shadow: var(--n-sh-2);
}
body[data-skin="noir"] .rg-mis-mask {
  background: rgba(11, 11, 13, .5);
  border: 2px solid var(--n-accent);
  border-radius: var(--n-r-xs);
  box-shadow: var(--n-glow);
  transition: opacity var(--n-dur-slow) var(--n-ease-emph);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body[data-skin="noir"] .rg-mis-mask { background: var(--n-ink-1); }
}
body[data-skin="noir"] .rg-mis-q { color: var(--n-text); font-family: var(--n-font-display); }

body[data-skin="noir"] .rg-choice {
  border: 2px solid var(--n-border);
  border-radius: var(--n-r-md);
  background-color: var(--n-surface-2);
  transition: transform var(--n-dur) var(--n-ease), border-color var(--n-dur) var(--n-ease);
}
body[data-skin="noir"] .rg-choice:hover:not(:disabled) {
  transform: translateY(-3px);
  border-color: var(--n-border-strong);
  box-shadow: var(--n-glow);
}
body[data-skin="noir"] .rg-choice:focus-visible { outline: 2px solid var(--n-accent); outline-offset: 3px; }
body[data-skin="noir"] .rg-choice.is-correct { border-color: var(--n-success); box-shadow: 0 0 0 3px var(--n-success); }
body[data-skin="noir"] .rg-choice.is-wrong   { border-color: var(--n-danger);  box-shadow: 0 0 0 3px var(--n-danger); }

body[data-skin="noir"] .rg-photo-link { color: var(--n-accent); }

/* --- Guess the tag -------------------------------------------------------- */
body[data-skin="noir"] .rg-progress { background: var(--n-surface-2); border-radius: var(--n-r-pill); }
body[data-skin="noir"] .rg-progress-bar {
  background: var(--n-grad);
  transition: width var(--n-dur) var(--n-ease);
}
body[data-skin="noir"] .rg-tag-figure {
  border: 1px solid var(--n-border);
  border-radius: var(--n-r-lg);
  box-shadow: var(--n-sh-2);
}
body[data-skin="noir"] .rg-option {
  background: var(--n-surface-2);
  border: 1px solid var(--n-border);
  border-radius: var(--n-r-lg);
  color: var(--n-text);
  transition: transform var(--n-dur) var(--n-ease), border-color var(--n-dur) var(--n-ease);
}
body[data-skin="noir"] .rg-option:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.08);
  border-color: var(--n-border-strong);
}
body[data-skin="noir"] .rg-option:focus-visible { outline: 2px solid var(--n-accent); outline-offset: 2px; }
body[data-skin="noir"] .rg-option.is-correct {
  background: var(--n-success);
  border-color: var(--n-success);
  color: var(--n-ink-0);
}
body[data-skin="noir"] .rg-option.is-wrong {
  background: var(--n-danger);
  border-color: var(--n-danger);
  color: var(--n-ink-0);
}

/* --- Result + leaderboard ------------------------------------------------- */
body[data-skin="noir"] .rg-result {
  background: var(--n-surface);
  border: 1px solid var(--n-border);
  border-radius: var(--n-r-xl);
  box-shadow: var(--n-sh-3);
}
body[data-skin="noir"] .rg-result-title {
  font-family: var(--n-font-display);
  font-weight: var(--n-fw-black);
  color: var(--n-text);
}
body[data-skin="noir"] .rg-result-score { color: var(--n-text-muted); }
body[data-skin="noir"] .rg-result-score b { color: var(--n-text); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  body[data-skin="noir"] .rg-result-score b {
    background: var(--n-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

body[data-skin="noir"] .rg-save-label { color: var(--n-text-muted); }
body[data-skin="noir"] .rg-save-input {
  background: var(--n-surface-2);
  border: 1px solid var(--n-border);
  border-radius: var(--n-r-pill);
  color: var(--n-text);
  caret-color: var(--n-accent);
}
body[data-skin="noir"] .rg-save-input:focus-visible { outline: 2px solid var(--n-accent); outline-offset: 1px; }
body[data-skin="noir"] .rg-saved { color: var(--n-success); }

body[data-skin="noir"] .rg-board-title { color: var(--n-text); font-family: var(--n-font-display); }
body[data-skin="noir"] .rg-leader-row { border-bottom: 1px solid var(--n-border); }
body[data-skin="noir"] .rg-leader-row::before { color: var(--n-text-dim); }
body[data-skin="noir"] .rg-leader-name { color: var(--n-text); }
body[data-skin="noir"] .rg-leader-time { color: var(--n-text-muted); }
body[data-skin="noir"] .rg-leader-score { color: var(--n-accent); }
body[data-skin="noir"] .rg-leader-empty { color: var(--n-text-muted); }

/* --- Mobile --------------------------------------------------------------- */
@media (max-width: 900px) {
  body[data-skin="noir"] .rg-hero-title { font-size: var(--n-fz-3xl); }
  body[data-skin="noir"] .rg-card { border-radius: var(--n-r-lg); }
  body[data-skin="noir"] .rg-result { border-radius: var(--n-r-lg); }
}

/* Hover affordances are meaningless on touch and can stick after a tap. */
@media (hover: none) {
  body[data-skin="noir"] a.rg-card:hover { transform: none; box-shadow: none; }
  body[data-skin="noir"] a.rg-card:hover::before { opacity: 0; }
  body[data-skin="noir"] .rg-level:hover:not(:disabled),
  body[data-skin="noir"] .rg-choice:hover:not(:disabled),
  body[data-skin="noir"] .rg-option:hover:not(:disabled) { transform: none; filter: none; }
}