/* ============================================================
PLAYGENT · THEME TOKENS
5 committed aesthetics. Each theme overrides the same token
contract so games can be mechanically themed. Load this file
BEFORE the game's own stylesheet.
============================================================ */
/* ---------- Loading state ----------
Applies whenever has no data-theme attribute yet (e.g. first
paint, before initTheme() runs, or during an async themeId/player
fetch). Higher specificity than :root, so it overrides the pop-minimal
defaults below — without this, every non-pop theme flashes red while
the module-loaded JS catches up. The matching theme rule kicks in the
instant data-theme is stamped. */
html:not([data-theme]) {
--bg: #fafafa;
--surface: #ffffff;
--surface-2: #f4f4f5;
--surface-tint: rgba(10,10,10,0.04);
--ink: #0a0a0a;
--ink-soft: rgba(10,10,10,0.7);
--ink-dim: rgba(10,10,10,0.45);
--on-accent: #ffffff;
--line: rgba(10,10,10,0.12);
--line-strong: rgba(10,10,10,0.22);
--line-width: 1px;
--accent: #0a0a0a;
--accent-soft: rgba(10,10,10,0.06);
--accent-2: #2563EB;
--correct: #16A34A;
--wrong: #DC2626;
--br: 8px;
--br-sm: 6px;
}
/* ---------- Canonical token contract (pop-minimal defaults) ---------- */
:root,
html[data-theme="pop-minimal"]{
/* surfaces */
--bg: #FF5A5A; /* canvas (accent-as-canvas) */
--surface: #FFFFFF; /* cards / modals */
--surface-2: #FFFFFF;
--surface-tint: rgba(0,0,0,0.04);
/* text */
--ink: #000000;
--ink-soft: rgba(0,0,0,0.68);
--ink-dim: rgba(0,0,0,0.38);
--on-accent: #FFFFFF; /* text color when placed ON accent */
/* lines */
--line: rgba(0,0,0,0.14);
--line-strong: #000000;
--line-width: 2px;
/* accent + state */
--accent: var(--bg); /* coupled to canvas in pop-minimal */
--accent-soft: rgba(0,0,0,0.08);
--accent-2: #000000;
--correct: #00C170;
--wrong: #000000;
/* primary CTA colors (Play button, key pill) */
--cta-bg: #000000;
--cta-fg: #FFFFFF;
/* secondary chip (archive day, restart) */
--chip-bg: rgba(0,0,0,0.08);
--chip-fg: #000000;
/* shape */
--br-default: 10px;
--br-sm-default: 6px;
--br: var(--br-default);
--br-sm: var(--br-sm-default);
/* shadows + press transforms per component role */
--shadow-btn: 2px 2px 0 #000; /* small/medium buttons */
--shadow-btn-lg: 4px 4px 0 #000; /* large buttons (play pill) */
--shadow-modal: 4px 4px 0 #000; /* modals + sheets */
--press-xform: translate(2px, 2px);
--press-xform-lg: translate(4px, 4px);
/* type */
--font-display: "Work Sans", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
--font-body: "Work Sans", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
--font-mono: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;
--display-weight: 900;
--display-style: normal;
--display-tracking: -0.02em;
--display-case: uppercase;
--body-weight: 600;
--body-tracking: 0;
/* texture */
--texture-image: none;
--texture-opacity: 0;
--texture-blend: normal;
--texture-size: 200px;
/* motion */
--reveal-ease: cubic-bezier(0.2, 0.9, 0.2, 1);
--reveal-dur: 340ms;
/* puzzle grid */
--board-shadow: none;
--board-border-width: 3px;
--given-bg: color-mix(in srgb, var(--ink) 12%, var(--surface));
--ruler-bg: color-mix(in srgb, var(--ink) 4%, var(--surface));
--match-bg: color-mix(in srgb, var(--ink) 16%, var(--surface));
--error-bg: color-mix(in srgb, var(--wrong) 30%, var(--surface));
--block-divider: 2.5px solid var(--ink);
/* states */
--hover-bg: color-mix(in srgb, var(--ink) 4%, var(--surface));
--correct-bg: color-mix(in srgb, var(--correct) 28%, var(--surface));
--wrong-bg: color-mix(in srgb, var(--wrong) 26%, var(--surface));
--btn-active-bg: var(--ink);
--btn-active-fg: var(--surface);
--btn-active-border: var(--ink);
--toast-bg: var(--surface);
--toast-fg: var(--ink);
/* accent extras */
--highlight: var(--ink);
--focus-ring: var(--ink);
--focus-ring-shadow: var(--shadow-btn), 0 0 0 3px color-mix(in srgb, var(--ink) 12%, transparent);
--drag-fill: #7DD3FC;
--drag-fg: var(--ink);
color-scheme: light;
}
/* ---------- Blank · light · neutral starting point ---------- */
html[data-theme="blank"] {
--bg: #FFFFFF;
--surface: #FFFFFF;
--surface-2: #F5F5F5;
--surface-tint: rgba(0,0,0,0.04);
--nav-ink: #FFFFFF;
--nav-muted: rgba(255,255,255,0.68);
--nav-panel: #000000;
--nav-panel-strong: #000000;
--nav-line: rgba(255,255,255,0.18);
--nav-active: rgba(255,255,255,0.16);
--nav-active-ink: #FFFFFF;
--ink: #111111;
--ink-soft: rgba(17,17,17,0.65);
--ink-dim: rgba(17,17,17,0.4);
--on-accent: #FFFFFF;
--line: rgba(0,0,0,0.1);
--line-strong: rgba(0,0,0,0.2);
--line-width: 1px;
--accent: #111111;
--accent-soft: rgba(0,0,0,0.06);
--accent-2: #555555;
--correct: #16A34A;
--wrong: #DC2626;
--cta-bg: #111111;
--cta-fg: #FFFFFF;
--chip-bg: #F0F0F0;
--chip-fg: #111111;
--br-default: 6px;
--br-sm-default: 4px;
--br: 6px;
--br-sm: 4px;
--shadow-btn: 0 1px 2px 0 rgba(0,0,0,0.05);
--shadow-btn-lg: 0 4px 8px -2px rgba(0,0,0,0.08);
--shadow-modal: 0 12px 32px -8px rgba(0,0,0,0.15);
--press-xform: translate(0, 1px);
--press-xform-lg: translate(0, 1px);
--font-display: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-mono: ui-monospace, "SF Mono", Menlo, monospace;
--display-weight: 600;
--display-style: normal;
--display-tracking: -0.005em;
--display-case: none;
--body-weight: 400;
--body-tracking: 0;
--texture-image: none;
--texture-opacity: 0;
--texture-blend: normal;
--texture-size: 200px;
--reveal-ease: cubic-bezier(0.16, 1, 0.3, 1);
--reveal-dur: 260ms;
--board-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
--board-border-width: 1px;
--given-bg: color-mix(in srgb, var(--ink) 10%, var(--surface));
--ruler-bg: color-mix(in srgb, var(--ink) 4%, var(--surface));
--match-bg: color-mix(in srgb, var(--ink) 12%, var(--surface));
--error-bg: color-mix(in srgb, var(--wrong) 14%, var(--surface));
--block-divider: 1px solid var(--line-strong);
--hover-bg: color-mix(in srgb, var(--ink) 4%, var(--surface));
--correct-bg: color-mix(in srgb, var(--correct) 10%, var(--surface));
--wrong-bg: color-mix(in srgb, var(--wrong) 10%, var(--surface));
--btn-active-bg: var(--ink);
--btn-active-fg: var(--surface);
--btn-active-border: var(--ink);
--toast-bg: var(--surface);
--toast-fg: var(--ink);
--highlight: var(--ink);
--focus-ring: var(--ink);
--focus-ring-shadow: 0 0 0 2px rgba(0,0,0,0.15);
--drag-fill: var(--ink);
--drag-fg: var(--surface);
color-scheme: light;
}
/* ---------- Editorial Noir · dark · refined ---------- */
html[data-theme="editorial-noir"]{
--bg: #0E0B12;
--surface: #181020;
--surface-2: #241628;
--surface-tint: rgba(244,236,216,0.04);
--ink: #F4ECD8;
--ink-soft: rgba(244,236,216,0.72);
--ink-dim: rgba(244,236,216,0.42);
--on-accent: #0E0B12;
--line: rgba(244,236,216,0.12);
--line-strong: rgba(244,236,216,0.35);
--line-width: 1px;
--accent: #D4FF4E;
--accent-soft: rgba(212,255,78,0.22);
--accent-2: #F4ECD8;
--correct: #3EE88E;
--wrong: #FF5A6E;
--cta-bg: #F4ECD8;
--cta-fg: #0E0B12;
--chip-bg: rgba(244,236,216,0.08);
--chip-fg: #F4ECD8;
--br-default: 0px;
--br-sm-default: 0px;
--br: 0px;
--br-sm: 0px;
--shadow-btn: none;
--shadow-btn-lg: none;
--shadow-modal: 0 18px 48px rgba(0,0,0,0.45), 0 1px 0 rgba(244,236,216,0.05) inset;
--press-xform: none;
--press-xform-lg: none;
--font-display: "Fraunces", "Fraunces VF", Georgia, "Times New Roman", serif;
--font-body: "Geist", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
--display-weight: 400;
--display-style: italic;
--display-tracking: -0.01em;
--display-case: none;
--body-weight: 500;
--body-tracking: 0.005em;
--texture-image: url("data:image/svg+xml;utf8,");
--texture-opacity: 0.085;
--texture-blend: overlay;
--texture-size: 200px;
--reveal-ease: cubic-bezier(0.2, 0.9, 0.2, 1);
--reveal-dur: 520ms;
--board-shadow: 0 18px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(244,236,216,0.06);
--board-border-width: 1px;
--given-bg: color-mix(in srgb, var(--ink) 10%, var(--surface));
--ruler-bg: color-mix(in srgb, var(--ink) 10%, var(--surface));
--match-bg: color-mix(in srgb, var(--ink) 10%, var(--surface));
--error-bg: color-mix(in srgb, var(--wrong) 18%, var(--surface));
--block-divider: 1px solid var(--line-strong);
--hover-bg: color-mix(in srgb, var(--accent) 8%, var(--surface));
--correct-bg: color-mix(in srgb, var(--correct) 22%, var(--surface));
--wrong-bg: color-mix(in srgb, var(--wrong) 22%, var(--surface));
--btn-active-bg: var(--accent);
--btn-active-fg: var(--on-accent);
--btn-active-border: var(--accent);
--toast-bg: var(--bg);
--toast-fg: var(--accent);
--highlight: var(--accent);
--focus-ring: var(--accent);
--focus-ring-shadow: 0 0 0 1px var(--accent);
--drag-fill: var(--accent);
--drag-fg: var(--on-accent);
color-scheme: dark;
}
/* ---------- Broadsheet · light · refined ---------- */
html[data-theme="broadsheet"]{
--bg: #F5EEDC;
--surface: #FFFDF6;
--surface-2: #EFE6D0;
--surface-tint: rgba(17,17,17,0.04);
--ink: #111111;
--ink-soft: rgba(17,17,17,0.7);
--ink-dim: rgba(17,17,17,0.42);
--on-accent: #FFFFFF;
--line: rgba(17,17,17,0.14);
--line-strong: #111111;
--line-width: 1px;
--accent: #E23B2E;
--accent-soft: rgba(226,59,46,0.12);
--accent-2: #111111;
--correct: #1E7F3A;
--wrong: #C22B1E;
--cta-bg: #E23B2E;
--cta-fg: #FFFDF6;
--chip-bg: rgba(17,17,17,0.07);
--chip-fg: #111111;
--br-default: 0px;
--br-sm-default: 0px;
--br: 0px;
--br-sm: 0px;
--shadow-btn: none;
--shadow-btn-lg: none;
--shadow-modal: 0 8px 24px rgba(17,17,17,0.1);
--press-xform: none;
--press-xform-lg: none;
--font-display: "Playfair Display", "Newsreader", "Fraunces", Georgia, serif;
--font-body: "Newsreader", "Fraunces", Georgia, serif;
--font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
--display-weight: 800;
--display-style: italic;
--display-tracking: -0.015em;
--display-case: none;
--body-weight: 500;
--body-tracking: 0;
--texture-image: url("data:image/svg+xml;utf8,");
--texture-opacity: 0.04;
--texture-blend: multiply;
--texture-size: 6px;
--reveal-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
--reveal-dur: 420ms;
--board-shadow: none;
--board-border-width: 1px;
--given-bg: color-mix(in srgb, var(--ink) 10%, var(--surface));
--ruler-bg: color-mix(in srgb, var(--ink) 6%, var(--surface));
--match-bg: color-mix(in srgb, var(--ink) 10%, var(--surface));
--error-bg: color-mix(in srgb, var(--wrong) 16%, var(--surface));
--block-divider: 1px solid var(--line-strong);
--hover-bg: color-mix(in srgb, var(--accent) 6%, var(--surface));
--correct-bg: color-mix(in srgb, var(--correct) 24%, var(--surface));
--wrong-bg: color-mix(in srgb, var(--wrong) 22%, var(--surface));
--btn-active-bg: var(--accent);
--btn-active-fg: var(--on-accent);
--btn-active-border: var(--accent);
--toast-bg: var(--surface);
--toast-fg: var(--ink);
--highlight: var(--accent);
--focus-ring: var(--accent);
--focus-ring-shadow: 0 0 0 1px var(--accent);
--drag-fill: var(--accent);
--drag-fg: var(--on-accent);
color-scheme: light;
}
/* ---------- Neon Arcade · dark · playful ---------- */
html[data-theme="neon-arcade"]{
--bg: #050510;
--surface: #0B0B1E;
--surface-2: #14142B;
--surface-tint: rgba(0,229,255,0.06);
--ink: #E9EAFF;
--ink-soft: rgba(233,234,255,0.72);
--ink-dim: rgba(233,234,255,0.4);
--on-accent: #050510;
--line: rgba(0,229,255,0.22);
--line-strong: #00E5FF;
--line-width: 1px;
--accent: #00E5FF;
--accent-soft: rgba(0,229,255,0.14);
--accent-2: #FF3CC4;
--correct: #6FFF8A;
--wrong: #FF3C6A;
--cta-bg: #00E5FF;
--cta-fg: #050510;
--chip-bg: rgba(0,229,255,0.1);
--chip-fg: #E9EAFF;
--br-default: 0px;
--br-sm-default: 0px;
--br: 0px;
--br-sm: 0px;
--shadow-btn: 0 0 0 1px var(--accent), 0 0 12px rgba(0,229,255,0.45);
--shadow-btn-lg: 0 0 0 1px var(--accent), 0 0 24px rgba(0,229,255,0.55), 0 0 8px rgba(255,60,196,0.35) inset;
--shadow-modal: 0 0 0 1px var(--accent), 0 0 32px rgba(255,60,196,0.25);
--press-xform: none;
--press-xform-lg: none;
--font-display: "Rubik Mono One", "VT323", ui-monospace, monospace;
--font-body: "VT323", ui-monospace, "SF Mono", monospace;
--font-mono: "VT323", ui-monospace, "SF Mono", monospace;
--display-weight: 400;
--display-style: normal;
--display-tracking: 0.02em;
--display-case: uppercase;
--body-weight: 400;
--body-tracking: 0.02em;
--texture-image: repeating-linear-gradient(
to bottom,
rgba(0,229,255,0) 0px,
rgba(0,229,255,0) 2px,
rgba(0,229,255,0.08) 2px,
rgba(0,229,255,0.08) 3px
);
--texture-opacity: 1;
--texture-blend: normal;
--texture-size: auto;
--reveal-ease: cubic-bezier(0.36, 0, 0.66, -0.56);
--reveal-dur: 260ms;
--board-shadow: var(--shadow-btn-lg);
--board-border-width: 1px;
--given-bg: color-mix(in srgb, var(--ink) 12%, var(--surface));
--ruler-bg: color-mix(in srgb, var(--ink) 6%, var(--surface));
--match-bg: color-mix(in srgb, var(--ink) 14%, var(--surface));
--error-bg: color-mix(in srgb, var(--wrong) 22%, var(--surface));
--block-divider: 2.5px solid var(--accent);
--hover-bg: color-mix(in srgb, var(--accent) 6%, var(--surface));
--correct-bg: color-mix(in srgb, var(--correct) 22%, var(--surface));
--wrong-bg: color-mix(in srgb, var(--wrong) 22%, var(--surface));
--btn-active-bg: var(--accent);
--btn-active-fg: var(--on-accent);
--btn-active-border: var(--accent);
--toast-bg: var(--surface);
--toast-fg: var(--accent);
--highlight: var(--accent);
--focus-ring: var(--accent);
--focus-ring-shadow: 0 0 0 2px var(--accent), 0 0 8px var(--accent);
--drag-fill: var(--accent);
--drag-fg: var(--on-accent);
color-scheme: dark;
}
/* ---------- Riso Studio · light · playful ---------- */
html[data-theme="riso-studio"]{
--bg: #F2EAD9;
--surface: #FFFBF0;
--surface-2: #EADAC0;
--surface-tint: rgba(31,110,119,0.06);
--ink: #1F2E2A;
--ink-soft: rgba(31,46,42,0.68);
--ink-dim: rgba(31,46,42,0.42);
--on-accent: #FFFBF0;
--line: rgba(31,110,119,0.22);
--line-strong: #1F6E77;
--line-width: 2px;
--accent: #1F6E77;
--accent-soft: rgba(31,110,119,0.15);
--accent-2: #FF5A8A;
--correct: #3F8F5B;
--wrong: #FF5A8A;
--cta-bg: #1F6E77;
--cta-fg: #FFFBF0;
--chip-bg: rgba(31,110,119,0.12);
--chip-fg: #1F2E2A;
--br-default: 14px;
--br-sm-default: 8px;
--br: 14px;
--br-sm: 8px;
--shadow-btn: 2px 2px 0 #FF5A8A;
--shadow-btn-lg: 4px 4px 0 #FF5A8A;
--shadow-modal: 4px 4px 0 #FF5A8A;
--press-xform: translate(2px, 2px);
--press-xform-lg: translate(4px, 4px);
--font-display: "DM Serif Display", "Fraunces", Georgia, serif;
--font-body: "Fraunces", Georgia, serif;
--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
--display-weight: 400;
--display-style: italic;
--display-tracking: -0.01em;
--display-case: none;
--body-weight: 500;
--body-tracking: 0;
--texture-image: url("data:image/svg+xml;utf8,");
--texture-opacity: 0.14;
--texture-blend: multiply;
--texture-size: 140px;
--reveal-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
--reveal-dur: 480ms;
--board-shadow: 4px 4px 0 var(--accent-2);
--board-border-width: 2px;
--given-bg: color-mix(in srgb, var(--accent) 10%, var(--surface));
--ruler-bg: color-mix(in srgb, var(--accent-2) 12%, var(--surface));
--match-bg: color-mix(in srgb, var(--accent-2) 18%, var(--surface));
--error-bg: color-mix(in srgb, var(--wrong) 22%, var(--surface));
--block-divider: 1px solid var(--line-strong);
--hover-bg: color-mix(in srgb, var(--accent-2) 14%, var(--surface));
--correct-bg: color-mix(in srgb, var(--correct) 28%, var(--surface));
--wrong-bg: color-mix(in srgb, var(--wrong) 26%, var(--surface));
--btn-active-bg: var(--accent-2);
--btn-active-fg: var(--on-accent);
--btn-active-border: var(--accent-2);
--toast-bg: var(--surface);
--toast-fg: var(--ink);
--highlight: var(--accent);
--focus-ring: var(--accent-2);
--focus-ring-shadow: 2px 2px 0 var(--accent-2);
--drag-fill: var(--accent);
--drag-fg: var(--on-accent);
color-scheme: light;
}
/* ---------- Workspace · light · refined — shadcn-style ---------- */
html[data-theme="workspace"]{
--bg: #FAFAFA; /* zinc-50 */
--surface: #FFFFFF;
--surface-2: #F4F4F5; /* zinc-100 */
--surface-tint: rgba(9,9,11,0.035);
--ink: #09090B; /* zinc-950 */
--ink-soft: #52525B; /* zinc-600 */
--ink-dim: #A1A1AA; /* zinc-400 */
--on-accent: #FAFAFA;
--line: #E4E4E7; /* zinc-200 — subtle 1px border */
--line-strong: #D4D4D8; /* zinc-300 — slightly stronger but still soft */
--line-width: 1px;
--accent: #09090B; /* near-black, shadcn primary */
--accent-soft: rgba(9,9,11,0.06);
--accent-2: #2563EB; /* blue-600 — secondary accent (focus ring, links) */
--correct: #16A34A; /* green-600 */
--wrong: #DC2626; /* red-600 */
--cta-bg: #09090B;
--cta-fg: #FAFAFA;
--chip-bg: #F4F4F5;
--chip-fg: #18181B;
--br-default: 8px;
--br-sm-default: 6px;
--br: 8px;
--br-sm: 6px;
--shadow-btn: 0 1px 2px 0 rgba(9,9,11,0.05);
--shadow-btn-lg: 0 4px 6px -1px rgba(9,9,11,0.08), 0 2px 4px -2px rgba(9,9,11,0.06);
--shadow-modal: 0 25px 50px -12px rgba(9,9,11,0.25);
--press-xform: translate(0, 0.5px);
--press-xform-lg: translate(0, 0.5px);
--font-display: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-body: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
--display-weight: 600;
--display-style: normal;
--display-tracking: -0.015em;
--display-case: none;
--body-weight: 450;
--body-tracking: -0.003em;
--texture-image: none;
--texture-opacity: 0;
--texture-blend: normal;
--texture-size: 200px;
--reveal-ease: cubic-bezier(0.16, 1, 0.3, 1);
--reveal-dur: 260ms;
--board-shadow: var(--shadow-btn-lg);
--board-border-width: 1px;
--given-bg: color-mix(in srgb, var(--ink) 12%, var(--surface));
--ruler-bg: color-mix(in srgb, var(--ink) 4%, var(--surface));
--match-bg: color-mix(in srgb, var(--ink) 14%, var(--surface));
--error-bg: color-mix(in srgb, var(--wrong) 16%, var(--surface));
--block-divider: 2.5px solid var(--ink-soft);
--hover-bg: color-mix(in srgb, var(--accent-2) 5%, var(--surface));
--correct-bg: color-mix(in srgb, var(--correct) 8%, var(--surface));
--wrong-bg: color-mix(in srgb, var(--wrong) 8%, var(--surface));
--btn-active-bg: color-mix(in srgb, var(--accent-2) 10%, var(--surface));
--btn-active-fg: var(--accent-2);
--btn-active-border: var(--accent-2);
--toast-bg: var(--surface);
--toast-fg: var(--ink);
--highlight: var(--accent-2);
--focus-ring: var(--accent-2);
--focus-ring-shadow: var(--shadow-btn), 0 0 0 3px color-mix(in srgb, var(--accent-2) 18%, transparent);
--drag-fill: var(--accent-2);
--drag-fg: var(--surface);
color-scheme: light;
}
/* ---------- Dark · modern dark mode · lime accent ---------- */
html[data-theme="dark"]{
--bg: #0E0F12; /* near-black canvas */
--surface: #181A1F; /* card */
--surface-2: #22252B; /* chip / raised */
--surface-tint: rgba(255,255,255,0.04);
--ink: #F5F5F7; /* off-white text */
--ink-soft: rgba(245,245,247,0.7);
--ink-dim: rgba(245,245,247,0.45);
--on-accent: #0E0F12; /* dark text on lime CTA */
--line: rgba(255,255,255,0.08);
--line-strong: rgba(255,255,255,0.18);
--line-width: 1px;
--accent: #C7EA46; /* lime green — primary accent */
--accent-soft: rgba(199,234,70,0.14);
--accent-2: #7EE7C8; /* mint teal — secondary */
--correct: #56D886;
--wrong: #FF5C5C;
--cta-bg: #C7EA46;
--cta-fg: #0E0F12;
--chip-bg: rgba(199,234,70,0.12);
--chip-fg: #C7EA46;
--br-default: 12px;
--br-sm-default: 8px;
--br: 12px;
--br-sm: 8px;
--shadow-btn: 0 1px 2px 0 rgba(0,0,0,0.3);
--shadow-btn-lg: 0 8px 20px -4px rgba(0,0,0,0.45);
--shadow-modal: 0 24px 48px -12px rgba(0,0,0,0.6);
--press-xform: translate(0, 0.5px);
--press-xform-lg: translate(0, 0.5px);
--font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
--display-weight: 600;
--display-style: normal;
--display-tracking: -0.015em;
--display-case: none;
--body-weight: 450;
--body-tracking: -0.003em;
--texture-image: none;
--texture-opacity: 0;
--texture-blend: normal;
--texture-size: 200px;
--reveal-ease: cubic-bezier(0.16, 1, 0.3, 1);
--reveal-dur: 260ms;
--board-shadow: var(--shadow-btn-lg);
--board-border-width: 1px;
--given-bg: color-mix(in srgb, var(--ink) 12%, var(--surface));
--ruler-bg: color-mix(in srgb, var(--ink) 5%, var(--surface));
--match-bg: color-mix(in srgb, var(--ink) 14%, var(--surface));
--error-bg: color-mix(in srgb, var(--wrong) 22%, var(--surface));
--block-divider: 2.5px solid rgba(255,255,255,0.32);
--hover-bg: color-mix(in srgb, var(--accent) 6%, var(--surface));
--correct-bg: color-mix(in srgb, var(--correct) 12%, var(--surface));
--wrong-bg: color-mix(in srgb, var(--wrong) 12%, var(--surface));
--btn-active-bg: var(--accent);
--btn-active-fg: var(--on-accent);
--btn-active-border: var(--accent);
--toast-bg: var(--surface);
--toast-fg: var(--accent);
--highlight: var(--accent);
--focus-ring: var(--accent);
--focus-ring-shadow: 0 0 0 1px var(--accent), 0 0 18px color-mix(in srgb, var(--accent) 28%, transparent);
--drag-fill: var(--accent);
--drag-fg: var(--on-accent);
color-scheme: dark;
}
/* ============================================================
Shared: texture overlay + utility
A single element (.theme-texture) renders the theme's texture
layer. Games add once.
============================================================ */
.theme-texture{
position: fixed;
inset: 0;
pointer-events: none;
z-index: 100;
opacity: var(--texture-opacity, 0);
mix-blend-mode: var(--texture-blend, normal);
background-image: var(--texture-image, none);
background-size: var(--texture-size, 200px);
background-repeat: repeat;
transition: opacity 240ms ease;
}
/* ============================================================
Shared reveal animations · per-theme personality.
The game's CSS references these with animation-name.
============================================================ */
@keyframes reveal-question-noir{
from{ opacity: 0; transform: translateY(10px); filter: blur(4px); }
to { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes reveal-row-noir{
from{ opacity: 0; transform: translateX(-10px); }
to { opacity: 1; transform: none; }
}
@keyframes reveal-question-broadsheet{
from{ opacity: 0; letter-spacing: 0.06em; }
to { opacity: 1; letter-spacing: -0.015em; }
}
@keyframes reveal-row-broadsheet{
from{ opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
@keyframes reveal-question-arcade{
0% { opacity: 0; transform: translate3d(-8px,0,0) skewX(-6deg); filter: hue-rotate(20deg); }
40% { opacity: 1; transform: translate3d(4px,0,0) skewX(3deg); filter: hue-rotate(-10deg); }
100%{ opacity: 1; transform: none; filter: none; }
}
@keyframes reveal-row-arcade{
from{ opacity: 0; transform: translateX(-14px) skewX(-3deg); }
to { opacity: 1; transform: none; }
}
@keyframes reveal-question-riso{
0% { opacity: 0; transform: translateY(14px) rotate(-0.6deg); }
60% { opacity: 1; transform: translateY(-3px) rotate(0.2deg); }
100%{ opacity: 1; transform: none; }
}
@keyframes reveal-row-riso{
from{ opacity: 0; transform: translateY(8px) rotate(-0.3deg); }
to { opacity: 1; transform: none; }
}
@keyframes reveal-question-pop{
from{ opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: none; }
}
@keyframes reveal-row-pop{
from{ opacity: 0; transform: translateX(-32px); }
to { opacity: 1; transform: none; }
}
@keyframes reveal-question-workspace{
from{ opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: none; }
}
@keyframes reveal-row-workspace{
from{ opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: none; }
}
/* Each theme tells components which keyframes to use. */
html[data-theme="editorial-noir"]{ --anim-question: reveal-question-noir; --anim-row: reveal-row-noir; }
html[data-theme="broadsheet"] { --anim-question: reveal-question-broadsheet; --anim-row: reveal-row-broadsheet; }
html[data-theme="neon-arcade"] { --anim-question: reveal-question-arcade; --anim-row: reveal-row-arcade; }
html[data-theme="riso-studio"] { --anim-question: reveal-question-riso; --anim-row: reveal-row-riso; }
html[data-theme="workspace"] { --anim-question: reveal-question-workspace; --anim-row: reveal-row-workspace; }
html[data-theme="dark"] { --anim-question: reveal-question-workspace; --anim-row: reveal-row-workspace; }
html[data-theme="pop-minimal"],
:root { --anim-question: reveal-question-pop; --anim-row: reveal-row-pop; }