/* 60/30/10 party palettes. The homepage uses E (data-palette on <html>).
   60% --main (page, header, sections), 30% --second (full-width bands),
   10% --loud (CTAs, selected state, highlights only).
   Switch with <html data-palette="b">, "c", "d" or "e"; no attribute = A. */
/* Main and second are near neighbours; only the loud color breaks away. */
:root {
  /* A — Plum night: deep plum / dusk plum / sunshine yellow */
  --main: #1b1430;
  --second: #2c2248;
  --loud: #ffd23f;
  --ink: #f6f2ff;
  --second-ink: #f6f2ff;
  --loud-ink: #1b1430;
  --shade: #1b1430;
}
:root[data-palette="b"] {
  /* B — Paper white: white / warm off-white / hot pink */
  color-scheme: light;
  --main: #ffffff;
  --second: #f3efe8;
  --loud: #e6005c;
  --ink: #1f1b24;
  --second-ink: #1f1b24;
  --loud-ink: #ffffff;
  --shade: #1f1b24;
}
:root[data-palette="c"] {
  /* C — Deep sea: dark teal / sea teal / tangerine */
  --main: #0d2729;
  --second: #163a3c;
  --loud: #ff7a1a;
  --ink: #eefaf8;
  --second-ink: #eefaf8;
  --loud-ink: #0d2729;
  --shade: #0d2729;
}
:root[data-palette="d"] {
  /* D — Sand: cream / sand / electric blue */
  color-scheme: light;
  --main: #fbf6ee;
  --second: #eee2cf;
  --loud: #2846ff;
  --ink: #2b2118;
  --second-ink: #2b2118;
  --loud-ink: #ffffff;
  --shade: #2b2118;
}

:root[data-palette="e"] {
  /* E — Original black: black / charcoal / electric cyan */
  --main: #09090d;
  --second: #17171e;
  --loud: #22e4ff;
  --ink: #f7f7f8;
  --second-ink: #f7f7f8;
  --loud-ink: #09090d;
  --shade: #09090d;
}

/* Tokens the site already uses, derived from the three colors.
   Re-declared on .catalog-card so cards on a 30% band flip back to main. */
:root, .catalog-card {
  --bg: var(--main);
  --surface: color-mix(in srgb, var(--main) 82%, var(--second));
  --surface-raised: color-mix(in srgb, var(--main) 65%, var(--second));
  --surface-hover: color-mix(in srgb, var(--main) 55%, var(--second));
  --text: var(--ink);
  --text-soft: color-mix(in srgb, var(--ink) 82%, var(--main));
  --muted: color-mix(in srgb, var(--ink) 64%, var(--main));
  --line: color-mix(in srgb, var(--ink) 16%, transparent);
  --line-strong: color-mix(in srgb, var(--ink) 30%, transparent);
  --accent: var(--loud);
  --accent-ink: var(--loud-ink);
  --lime: var(--loud);
  --focus: var(--loud);
}

/* One loud color everywhere; per-game accents would break the 10%.
   !important beats the inline per-game values app.js sets. */
.game-stage, .game-card, .directory-game, [class*="directory-game--"] {
  --accent: var(--loud) !important;
  --accent-ink: var(--loud-ink) !important;
  --card-accent: var(--loud) !important;
  --game-accent: var(--loud) !important;
}

.fafaa-header { color: var(--text); border-color: var(--line); }
:root:is([data-palette="b"], [data-palette="d"]) .fafaa-logo img:last-child { filter: brightness(0) saturate(100%); }

.game-card { background: var(--surface); }
.game-card.is-selected { background: var(--surface-raised); }
.game-thumb { background: var(--main); }
.discovery-content { background: var(--main); }

/* Hero art always sits under a dark shade with light lettering. */
.stage-media {
  background: var(--shade);
  --text: #fff7e8;
  --text-soft: #eee6f5;
  --muted: #cfc4dc;
}
.stage-position { background: color-mix(in srgb, var(--shade) 75%, transparent); }
.stage-shade {
  background:
    linear-gradient(to top, color-mix(in srgb, var(--shade) 96%, transparent) 0%, color-mix(in srgb, var(--shade) 50%, transparent) 42%, color-mix(in srgb, var(--shade) 4%, transparent) 72%),
    linear-gradient(to left, color-mix(in srgb, var(--shade) 74%, transparent) 0%, color-mix(in srgb, var(--shade) 8%, transparent) 58%, transparent 82%);
}

/* The 30%: full-width bands in the second color. */
.catalog, .answer-strip {
  background: var(--second);
  box-shadow: 0 0 0 100vmax var(--second);
  clip-path: inset(0 -100vmax);
  --text: var(--second-ink);
  --text-soft: color-mix(in srgb, var(--second-ink) 86%, var(--second));
  --muted: color-mix(in srgb, var(--second-ink) 72%, var(--second));
  --line: color-mix(in srgb, var(--second-ink) 22%, transparent);
  --line-strong: color-mix(in srgb, var(--second-ink) 36%, transparent);
  --lime: var(--second-ink);
  color: var(--text);
}
.catalog > * > p a, .answer-strip p a { color: var(--text); }
.catalog-card { background: var(--main); border-color: transparent; }

.fafaa-header .fafaa-games-links,
.fafaa-mobile-menu nav { background: var(--surface-raised); }

.fafaa-consent { background: var(--surface-raised); color: var(--text); border-color: var(--line); }
.fafaa-consent a { color: var(--text); }
.fafaa-consent-actions button { color: var(--text); border-color: var(--line-strong); }
.fafaa-consent-actions button[data-choice="accept"] { background: var(--loud); border-color: var(--loud); color: var(--loud-ink); }