/* ═══════════════════════════════════════════════
POPCULTURE LINKS — styles.css
Shared by every page. Three independent color systems:
1) --accent/--accent-light/--accent-dark — the per-category theme, set
by a [data-category="..."] block below, applied to (same
element as [data-theme], so the two can reference each other — see
--accent-on-chrome).
2) Tile/keyboard status colors (green/gold/gray/magenta) — fixed
globally, same on every category page and either light/dark theme.
3) [data-theme="light"|"dark"] — page-chrome light/dark mode, toggled
by the header button (see shared/game.js). Light is the default.
Only the page CHROME (header, keyboard bar, mode toggle, etc. — the
things that sit directly on --bg) actually changes between themes.
Cards (word-row, result-card, modal) stay their fixed light "paper"
color in BOTH themes — --surface/--ink never change with theme.
═══════════════════════════════════════════════ */
:root {
/* Wordle-standard tile/keyboard status colors — identical on every
category page, regardless of --accent or light/dark theme. */
--correct: #2e9e4c;
--correct-dark: #1c6b32;
--partial: #d8a316;
--partial-dark: #96700c;
--wrong: #6b6f76;
--wrong-dark: #4a4d52;
/* "elsewhere" (Canon Mode only): wrong here, but present in one of the
other two answers. Magenta specifically to stay visually distinct
from every one of the 6 category accent colors below. */
--elsewhere: #d6247e;
--elsewhere-dark: #931658;
/* Card background (word-row, result-card, modal) — a fixed light
"paper" tone in BOTH themes. Only --bg (page chrome) changes below. */
--surface: #f6f6f8;
--surface-dark: #e7e8ec;
--ink: #1b1e24;
--ink-faded: #52565f;
--kb-height: 200px;
/* Neutral fallback accent — only actually used on the home page, which
has no [data-category]. Same specificity as the [data-category="..."]
rules below (both single attribute-ish selectors on ), so
source order decides: this loses to any category rule that also
matches, and only applies when none does. */
--accent: #8a8f99; --accent-light: #c4c8d0; --accent-dark: #5b5f68;
}
/* ═══ PER-CATEGORY ACCENT THEME ═══
Set on by each subpage (see game.js reading
document.documentElement.dataset.category). Brighter/more saturated
pass over the original palette — every dark variant is >= 4.6:1
contrast against --surface (#f6f6f8, what it's used as text color on),
and every light variant is >= 4.6:1 against dark-theme's --bg
(#14161b, what IT'S used as text color on there) — verified with a
WCAG relative-luminance contrast script, not eyeballed. Movies
(silver) is the one exception that stays low-saturation on purpose:
silver is desaturated by definition, so "brighter" there means
cooler/lighter steel, not turning it into pale blue. */
/* --title-font: a distinct display face per category for .app-title/
.result-title only (see those rules below) — every other label/button/
body text stays on the Poppins/Inter pairing for readability. Each
page's own DotLottie renders into (see shared/lottie-bg.js) —
not a wrapping container around one, since DotLottie draws straight to
a canvas element rather than injecting SVG/DOM content. */
.category-lottie-bg {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
display: block;
/* Most of these animations lean on very low per-shape opacity (a handful
of percent, for a "barely-there" ambient look) which reads as
invisible once it's sitting behind the app's own themed gradient —
a soft dark halo behind every shape gives pale/thin content (motes,
scanlines, petals, streaks) a contrast edge against ANY background
color, independent of how close that background's hue is to the
shape's own (a real problem here: e.g. anime's pale pink petals over
this page's own pink-tinted background). */
filter: drop-shadow(0 1px 3px rgba(0,0,0,0.35)) drop-shadow(0 0 7px rgba(0,0,0,0.25));
}
/* Comics' burst shapes/text read as too bold at full opacity behind the
row cards. */
[data-category="comics"] .category-lottie-bg {
opacity: 0.7;
}
[data-category="video-games"] .category-lottie-bg {
opacity: 0.6;
}
[data-category="anime-manga"] .category-lottie-bg,
[data-category="books"] .category-lottie-bg {
opacity: 0.6;
}
/* ═══ THEME TOGGLE BUTTON ═══ */
.theme-toggle-btn {
width: 30px; height: 30px;
border-radius: 50%;
border: 1.5px solid color-mix(in srgb, var(--accent) 35%, var(--chrome-text) 65%);
background: color-mix(in srgb, var(--accent) 12%, transparent);
color: var(--accent-on-chrome);
font-size: 0.95rem;
cursor: pointer;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
/* Icon glyphs for the settings gear + the two toggles it reveals (see
shared/icons/). Plain colorless SVGs used as a CSS mask rather than