/*
 * ITSRYNNO SITE THEME ENGINE
 *
 * Phase 2 defines the shared theme layer without changing
 * the existing default appearance.
 *
 * Individual themes will add their visual rules in later phases.
 */

html[data-theme="default"] {
    --site-theme-name: "default";
    --site-theme-accent: #b57fff;
    --site-theme-background: #050505;
    --site-theme-surface: #0d0d0d;
    --site-theme-text: #ffffff;
}

html[data-theme="halloween"] {
    --site-theme-name: "halloween";
    --site-theme-accent: #ff405d;
    --site-theme-background: #080304;
    --site-theme-surface: #120708;
    --site-theme-text: #ffffff;
}

html[data-theme="christmas"] {
    --site-theme-name: "christmas";
    --site-theme-accent: #bfe8ff;
    --site-theme-background: #05080d;
    --site-theme-surface: #0b1118;
    --site-theme-text: #ffffff;
}

html[data-theme="midnight"] {
    --site-theme-name: "midnight";
    --site-theme-accent: #9d7bff;
    --site-theme-background: #03050b;
    --site-theme-surface: #080c16;
    --site-theme-text: #ffffff;
}

html[data-theme="neon"] {
    --site-theme-name: "neon";
    --site-theme-accent: #7fffd4;
    --site-theme-background: #030807;
    --site-theme-surface: #071411;
    --site-theme-text: #ffffff;
}

html[data-theme="terminal"] {
    --site-theme-name: "terminal";
    --site-theme-accent: #65ff8a;
    --site-theme-background: #020602;
    --site-theme-surface: #061006;
    --site-theme-text: #f2fff4;
}

/*
 * IMPORTANT:
 * There are deliberately no visual overrides here yet.
 * The current default site must remain pixel-for-pixel compatible
 * with its existing CSS until the individual themes are introduced.
 */


/* =========================================================
   HALLOWEEN // AFTER DARK
========================================================= */

html[data-theme="halloween"] {
    --black: #070203;
    --white: #fff4f4;
    --grey: #9b7e82;
    --purple: #ff5367;
    --border: rgba(255, 59, 82, 0.16);

    --site-theme-accent: #ff3b52;
    --site-theme-accent-soft: rgba(255, 59, 82, 0.16);
    --site-theme-accent-mid: rgba(255, 59, 82, 0.32);
    --site-theme-background: #070203;
    --site-theme-surface: #100506;
    --site-theme-surface-2: #160708;
    --site-theme-text: #fff4f4;
    --site-theme-muted: #9b7e82;
    --site-theme-border: rgba(255, 74, 91, 0.16);
}

/* Global atmosphere */

html[data-theme="halloween"] body {
    background:
        radial-gradient(circle at 78% 8%, rgba(255, 45, 65, 0.07), transparent 22%),
        radial-gradient(circle at 14% 72%, rgba(255, 45, 65, 0.045), transparent 26%),
        #070203;
    color: var(--site-theme-text);
}

html[data-theme="halloween"] body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 999;
    pointer-events: none;
    opacity: 0.10;
    background:
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.018) 0,
            rgba(255, 255, 255, 0.018) 1px,
            transparent 1px,
            transparent 4px
        );
    mix-blend-mode: overlay;
}

/* Navigation */

html[data-theme="halloween"] .nav {
    background: rgba(7, 2, 3, 0.86);
    border-bottom-color: rgba(255, 59, 82, 0.14);
    box-shadow:
        0 10px 35px rgba(0, 0, 0, 0.24),
        0 1px 0 rgba(255, 59, 82, 0.04);
}

html[data-theme="halloween"] .nav.scrolled {
    background: rgba(7, 2, 3, 0.94);
}

html[data-theme="halloween"] .nav-links a:hover {
    color: #ff6678;
    text-shadow: 0 0 18px rgba(255, 59, 82, 0.42);
}

/* Hero */

html[data-theme="halloween"] .hero {
    background:
        radial-gradient(circle at 72% 48%, rgba(255, 59, 82, 0.08), transparent 32%),
        linear-gradient(180deg, rgba(255, 59, 82, 0.018), transparent 38%);
}

html[data-theme="halloween"] .hero-label,
html[data-theme="halloween"] .hero-subtitle {
    color: var(--site-theme-muted);
}

html[data-theme="halloween"] .hero-title .outline {
    -webkit-text-stroke-color: #ff6678;
    text-shadow:
        0 0 25px rgba(255, 59, 82, 0.16),
        0 0 70px rgba(255, 59, 82, 0.08);
}

html[data-theme="halloween"] .hero-glow {
    background:
        radial-gradient(
            circle,
            rgba(255, 59, 82, 0.20) 0%,
            rgba(255, 59, 82, 0.09) 32%,
            rgba(255, 59, 82, 0.018) 56%,
            transparent 73%
        );
    filter: blur(42px);
}

html[data-theme="halloween"] .scroll-indicator {
    color: #8c676d;
}

/* Shared dark sections */

html[data-theme="halloween"] .section-dark,
html[data-theme="halloween"] .curious-scroll,
html[data-theme="halloween"] .contact {
    background:
        radial-gradient(circle at 50% 0, rgba(255, 59, 82, 0.035), transparent 34%),
        #070203;
}

/* Accent conversion */

html[data-theme="halloween"] .section-label,
html[data-theme="halloween"] .curious-small,
html[data-theme="halloween"] .step-number,
html[data-theme="halloween"] .project-number,
html[data-theme="halloween"] .tool-detail-label,
html[data-theme="halloween"] .tool-detail-pill.version,
html[data-theme="halloween"] .arcade-game-meta,
html[data-theme="halloween"] .reaction-eyebrow,
html[data-theme="halloween"] .reaction-rating {
    color: #ff5367;
}

html[data-theme="halloween"] .hero-title,
html[data-theme="halloween"] .section-title,
html[data-theme="halloween"] .curious-stage h3,
html[data-theme="halloween"] .contact-title,
html[data-theme="halloween"] .tool-detail-title,
html[data-theme="halloween"] .toolkit-title,
html[data-theme="halloween"] .arcade-title,
html[data-theme="halloween"] .reaction-heading {
    text-shadow: 0 0 45px rgba(255, 59, 82, 0.045);
}

/* Project cards */

html[data-theme="halloween"] .project-card {
    background: #0d0405;
    border-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="halloween"] .project-card:hover {
    border-color: rgba(255, 59, 82, 0.42);
    box-shadow:
        0 20px 70px rgba(0, 0, 0, 0.3),
        0 0 35px rgba(255, 59, 82, 0.07);
}

html[data-theme="halloween"] .project-image {
    background: #080203;
}

html[data-theme="halloween"] .project-image::before {
    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(255, 59, 82, 0.11),
            transparent 58%
        );
}

html[data-theme="halloween"] .project-card-coming {
    background:
        radial-gradient(circle, rgba(255, 59, 82, 0.10), transparent 62%),
        #090203;
}

html[data-theme="halloween"] .project-card-coming:hover .project-coming-symbol {
    color: #ff5367;
}

/* Cards */

html[data-theme="halloween"] .section-light {
    background:
        linear-gradient(180deg, #18080a 0%, #0f0406 100%);
    color: #fff2f3;
}

html[data-theme="halloween"] .section-light .card {
    background: #130607;
    color: #fff2f3;
    border-color: rgba(255, 59, 82, 0.13);
}

html[data-theme="halloween"] .section-light .card:hover {
    background: #ff5367;
    color: #160306;
    border-color: #ff5367;
    box-shadow: 0 18px 50px rgba(255, 59, 82, 0.14);
}

html[data-theme="halloween"] .section-light .card p {
    color: #a88489;
}

html[data-theme="halloween"] .section-light .card:hover p {
    color: #300a0d;
}

html[data-theme="halloween"] .section-light .card-icon {
    border-color: rgba(255, 59, 82, 0.20);
}

html[data-theme="halloween"] .section-light .card:hover .card-icon {
    background: #160306;
    color: #ff5367;
    border-color: #160306;
}

/* Contact */

html[data-theme="halloween"] .contact::before {
    background:
        radial-gradient(circle, rgba(255, 59, 82, 0.12), transparent 70%);
}

html[data-theme="halloween"] .contact-button {
    border-color: rgba(255, 59, 82, 0.32);
    box-shadow: 0 0 28px rgba(255, 59, 82, 0.04);
}

html[data-theme="halloween"] .contact-button:hover {
    background: #ff5367;
    color: #160306;
    border-color: #ff5367;
    box-shadow:
        0 0 30px rgba(255, 59, 82, 0.22),
        0 10px 35px rgba(0, 0, 0, 0.22);
}

/* Curious section */

html[data-theme="halloween"] .curious-number {
    border-color: rgba(255, 59, 82, 0.16);
}

html[data-theme="halloween"] .curious-stage.active .curious-number {
    background: #ff5367;
    color: #140306;
    border-color: #ff5367;
    box-shadow: 0 0 28px rgba(255, 59, 82, 0.20);
}

/* Toolkit */

html[data-theme="halloween"] .toolkit-page,
html[data-theme="halloween"] .tool-detail-main {
    background:
        radial-gradient(circle at 76% 8%, rgba(255, 59, 82, 0.055), transparent 25%),
        #070203;
}

html[data-theme="halloween"] .tool-card,
html[data-theme="halloween"] .tool-detail-card,
html[data-theme="halloween"] .tool-detail-mark {
    background:
        linear-gradient(145deg, rgba(255, 59, 82, 0.075), rgba(255, 255, 255, 0.012)),
        #0d0405;
    border-color: rgba(255, 59, 82, 0.13);
}

html[data-theme="halloween"] .tool-card:hover {
    border-color: rgba(255, 59, 82, 0.42);
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.28);
}

html[data-theme="halloween"] .tool-detail-mark {
    color: #ff6173;
    box-shadow:
        0 18px 55px rgba(255, 59, 82, 0.10),
        0 0 25px rgba(255, 59, 82, 0.04);
}

html[data-theme="halloween"] .tool-detail-action.primary {
    border-color: #ff5367;
    background: #ff5367;
    color: #160306;
    box-shadow: 0 0 26px rgba(255, 59, 82, 0.13);
}

html[data-theme="halloween"] .tool-detail-action:hover {
    border-color: rgba(255, 59, 82, 0.60);
}

html[data-theme="halloween"] .toolkit-tracking {
    border-color: rgba(255, 59, 82, 0.15);
    background:
        linear-gradient(
            135deg,
            rgba(255, 59, 82, 0.08),
            transparent 65%
        );
}

html[data-theme="halloween"] .toolkit-tracking-label {
    color: #ff5367;
}

/* Arcade */

html[data-theme="halloween"] .arcade-page,
html[data-theme="halloween"] .arcade-main,
html[data-theme="halloween"] .reaction-page {
    background:
        radial-gradient(circle at 78% 7%, rgba(255, 59, 82, 0.07), transparent 25%),
        #070203;
}

html[data-theme="halloween"] .arcade-game-card {
    background:
        linear-gradient(135deg, rgba(255, 59, 82, 0.08), rgba(255, 255, 255, 0.01)),
        #0d0405;
    border-color: rgba(255, 59, 82, 0.12);
}

html[data-theme="halloween"] .arcade-game-card:hover {
    border-color: rgba(255, 59, 82, 0.46);
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.28);
}

html[data-theme="halloween"] .arcade-game-action {
    border-color: rgba(255, 59, 82, 0.30);
    background: rgba(255, 59, 82, 0.06);
}

html[data-theme="halloween"] .arcade-game-action:hover {
    border-color: rgba(255, 59, 82, 0.60);
    color: #ff6678;
}

/* Reaction Test */

html[data-theme="halloween"] .reaction-shell {
    background:
        radial-gradient(circle at 78% 12%, rgba(255, 59, 82, 0.12), transparent 26%),
        radial-gradient(circle at 20% 90%, rgba(255, 59, 82, 0.05), transparent 24%),
        #0b0305;
    border-color: rgba(255, 59, 82, 0.14);
    box-shadow:
        0 35px 100px rgba(0, 0, 0, 0.52),
        0 0 60px rgba(255, 59, 82, 0.035);
}

html[data-theme="halloween"] .reaction-button {
    border-color: rgba(255, 59, 82, 0.34);
    background: rgba(255, 59, 82, 0.07);
}

html[data-theme="halloween"] .reaction-button:hover {
    border-color: rgba(255, 59, 82, 0.62);
    background: rgba(255, 59, 82, 0.12);
    box-shadow: 0 0 30px rgba(255, 59, 82, 0.09);
}

/* Status dots */

html[data-theme="halloween"] .status-dot,
html[data-theme="halloween"] .contact-status-dot,
html[data-theme="halloween"] .arcade-kicker-dot {
    background: #ff5367;
    box-shadow: 0 0 16px rgba(255, 59, 82, 0.68);
}


/* =========================================================
   HALLOWEEN // INVERTED LIGHT SECTIONS + PROPER DECOR
========================================================= */

/*
   OpenMoji artwork, version 17.0.0.
   License: CC BY-SA 4.0
   Attribution: All emojis designed by OpenMoji.
*/

/* Invert every homepage light section so the Halloween theme
   stays consistently dark with readable light text. */
html[data-theme="halloween"] .section-light,
html[data-theme="halloween"] .right-now,
html[data-theme="halloween"] .status-live-section,
html[data-theme="halloween"] .curious-scroll {
    background:
        radial-gradient(circle at 78% 8%, rgba(255, 59, 82, 0.06), transparent 24%),
        linear-gradient(180deg, #18080a 0%, #0b0204 100%);
    color: #fff2f3;
}

/* Things I Do */
html[data-theme="halloween"] .section-light .card {
    background:
        linear-gradient(145deg, rgba(255, 59, 82, 0.075), rgba(255, 255, 255, 0.012)),
        #0d0405;
    color: #fff2f3;
    border-color: rgba(255, 59, 82, 0.15);
}

html[data-theme="halloween"] .section-light .card p,
html[data-theme="halloween"] .section-light .journey-text,
html[data-theme="halloween"] .section-light .step p {
    color: #d4b5ba;
}

html[data-theme="halloween"] .section-light .card-number {
    color: #fff2f3;
}

html[data-theme="halloween"] .section-light .card-icon {
    color: #fff2f3;
    border-color: rgba(255, 59, 82, 0.22);
}

html[data-theme="halloween"] .section-light .card-line {
    background: rgba(255, 59, 82, 0.20);
}

html[data-theme="halloween"] .section-light .step {
    color: #fff2f3;
    border-top-color: rgba(255, 59, 82, 0.18);
}

/* Right Now */
html[data-theme="halloween"] .right-now .now-card {
    background:
        linear-gradient(145deg, rgba(255, 59, 82, 0.075), rgba(255, 255, 255, 0.012)),
        #0d0405;
    border-color: rgba(255, 59, 82, 0.14);
}

html[data-theme="halloween"] .right-now .now-card-project,
html[data-theme="halloween"] .right-now .now-card-status {
    background:
        radial-gradient(circle at 85% 20%, rgba(255, 59, 82, 0.09), transparent 35%),
        #0d0405;
}

html[data-theme="halloween"] .right-now .now-card h3,
html[data-theme="halloween"] .right-now .now-status-line strong {
    color: #fff2f3;
}

html[data-theme="halloween"] .right-now .now-card p {
    color: #d4b5ba;
}

html[data-theme="halloween"] .right-now .now-card-label,
html[data-theme="halloween"] .right-now .now-card-meta,
html[data-theme="halloween"] .right-now .now-status-text {
    color: #9f7f85;
}

html[data-theme="halloween"] .right-now .now-card-project .now-card-meta {
    color: #ff5367;
}

html[data-theme="halloween"] .right-now .now-card-dot {
    background: #ff5367;
    box-shadow: 0 0 14px rgba(255, 59, 82, 0.65);
}

/* Live Activity */
html[data-theme="halloween"] .status-live-section .live-pulse,
html[data-theme="halloween"] .status-live-section .live-card {
    background:
        linear-gradient(145deg, rgba(255, 59, 82, 0.075), rgba(255, 255, 255, 0.012)),
        #0d0405;
    border-color: rgba(255, 59, 82, 0.14);
}

html[data-theme="halloween"] .status-live-section .live-card-main {
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 59, 82, 0.12), transparent 42%),
        #0d0405;
}

html[data-theme="halloween"] .status-live-section .live-pulse strong,
html[data-theme="halloween"] .status-live-section .live-ticker strong,
html[data-theme="halloween"] .status-live-section .live-card h3,
html[data-theme="halloween"] .status-live-section .live-card-link {
    color: #fff2f3;
}

html[data-theme="halloween"] .status-live-section .live-pulse span:not(.now-card-dot),
html[data-theme="halloween"] .status-live-section .live-ticker,
html[data-theme="halloween"] .status-live-section .live-card p {
    color: #b89da2;
}

html[data-theme="halloween"] .status-live-section .live-pulse {
    background:
        linear-gradient(145deg, rgba(255, 59, 82, 0.07), rgba(255, 255, 255, 0.012)),
        #100506;
}

html[data-theme="halloween"] .status-live-section .live-ticker {
    border-top-color: rgba(255, 59, 82, 0.15);
    border-bottom-color: rgba(255, 59, 82, 0.15);
}

html[data-theme="halloween"] .status-live-section .live-ticker-line {
    background: rgba(255, 59, 82, 0.22);
}

html[data-theme="halloween"] .status-live-section .live-card {
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.20);
}

/* Curious */
html[data-theme="halloween"] .curious-scroll .curious-intro,
html[data-theme="halloween"] .curious-scroll .curious-stage p {
    color: #d4b5ba;
}

html[data-theme="halloween"] .curious-scroll .curious-stage h3 {
    color: #fff2f3;
}

html[data-theme="halloween"] .curious-scroll .curious-number {
    border-color: rgba(255, 59, 82, 0.20);
    color: #fff2f3;
}

html[data-theme="halloween"] .curious-scroll .curious-stage.active .curious-number {
    background: #ff5367;
    color: #160306;
    border-color: #ff5367;
    box-shadow: 0 0 28px rgba(255, 59, 82, 0.20);
}

html[data-theme="halloween"] .curious-scroll .section-label,
html[data-theme="halloween"] .curious-scroll .curious-small {
    color: #ff5367;
}

/* The entire theme gets proper local cartoon artwork.
   This replaces the hand-drawn CSS shapes from the earlier draft. */
html[data-theme="halloween"] body {
    position: relative;
    isolation: isolate;
}

html[data-theme="halloween"] body::before,
html[data-theme="halloween"] body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background-repeat: no-repeat;
}

html[data-theme="halloween"] body::before {
    opacity: 0.22;
    background-image:
        url("/assets/halloween/pumpkin.svg"),
        url("/assets/halloween/pumpkin.svg"),
        url("/assets/halloween/pumpkin.svg"),
        url("/assets/halloween/ghost.svg");
    background-size:
        82px 82px,
        64px 64px,
        46px 46px,
        78px 78px;
    background-position:
        8% 87%,
        88% 89%,
        19% 18%,
        82% 27%;
    filter: drop-shadow(0 0 18px rgba(255, 90, 30, 0.20));
}

html[data-theme="halloween"] body::after {
    opacity: 0.18;
    background-image:
        url("/assets/halloween/skull.svg"),
        url("/assets/halloween/bone.svg"),
        url("/assets/halloween/bone.svg"),
        url("/assets/halloween/bat.svg"),
        url("/assets/halloween/spider.svg");
    background-size:
        86px 86px,
        58px 58px,
        45px 45px,
        92px 92px,
        62px 62px;
    background-position:
        91% 48%,
        11% 43%,
        46% 91%,
        47% 11%,
        93% 74%;
    filter: drop-shadow(0 0 18px rgba(255, 59, 82, 0.16));
}

@media (max-width: 700px) {
    html[data-theme="halloween"] body::before {
        background-size:
            60px 60px,
            48px 48px,
            34px 34px,
            58px 58px;
        background-position:
            8% 91%,
            86% 93%,
            18% 16%,
            82% 24%;
    }

    html[data-theme="halloween"] body::after {
        background-size:
            62px 62px,
            44px 44px,
            34px 34px,
            64px 64px,
            46px 46px;
        background-position:
            90% 50%,
            8% 45%,
            48% 92%,
            48% 10%,
            91% 78%;
    }
}


/* =========================================================
   NON-HALLOWEEN THEMES // FULL SITE POLISH
   Keep the default theme untouched. These themes replace the
   remaining light-section fallback and carry their palette
   through the normal site pages.
========================================================= */

/* ---------------------------------------------------------
   CHRISTMAS
--------------------------------------------------------- */

html[data-theme="christmas"] {
    --black: #06100b;
    --white: #f5fff8;
    --grey: #91aaa0;
    --purple: #bfe8ff;
    --border: rgba(191, 232, 255, 0.16);
}

html[data-theme="christmas"] body {
    background:
        radial-gradient(circle at 18% 18%, rgba(191, 232, 255, 0.08), transparent 24%),
        radial-gradient(circle at 82% 82%, rgba(40, 180, 108, 0.08), transparent 25%),
        linear-gradient(180deg, #06100b, #031008);
    color: #f5fff8;
}

html[data-theme="christmas"] body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 999;
    opacity: 0.26;
    background-image:
        radial-gradient(circle at 12% 18%, rgba(255,255,255,.85) 0 1px, transparent 1.5px),
        radial-gradient(circle at 38% 9%, rgba(255,255,255,.75) 0 1px, transparent 1.5px),
        radial-gradient(circle at 72% 22%, rgba(255,255,255,.75) 0 1px, transparent 1.5px),
        radial-gradient(circle at 89% 14%, rgba(255,255,255,.85) 0 1px, transparent 1.5px),
        radial-gradient(circle at 24% 66%, rgba(255,255,255,.62) 0 1px, transparent 1.5px),
        radial-gradient(circle at 64% 78%, rgba(255,255,255,.62) 0 1px, transparent 1.5px);
    background-size: 260px 260px;
}

html[data-theme="christmas"] .nav {
    background: rgba(6, 16, 11, 0.88);
    border-bottom-color: rgba(191, 232, 255, 0.14);
}

html[data-theme="christmas"] .nav-links a:hover {
    color: #bfe8ff;
    text-shadow: 0 0 18px rgba(191, 232, 255, 0.3);
}

html[data-theme="christmas"] .hero {
    background:
        radial-gradient(circle at 75% 45%, rgba(191, 232, 255, 0.08), transparent 32%),
        linear-gradient(180deg, rgba(40, 180, 108, 0.025), transparent 40%);
}

html[data-theme="christmas"] .section-dark,
html[data-theme="christmas"] .contact,
html[data-theme="christmas"] .toolkit-page,
html[data-theme="christmas"] .tool-detail-main,
html[data-theme="christmas"] .arcade-page,
html[data-theme="christmas"] .arcade-main,
html[data-theme="christmas"] .reaction-page {
    background:
        radial-gradient(circle at 80% 8%, rgba(191, 232, 255, 0.055), transparent 24%),
        #06100b;
    color: #f5fff8;
}

html[data-theme="christmas"] .section-light,
html[data-theme="christmas"] .right-now,
html[data-theme="christmas"] .status-live-section,
html[data-theme="christmas"] .curious-scroll {
    background:
        radial-gradient(circle at 18% 8%, rgba(40, 180, 108, 0.07), transparent 25%),
        linear-gradient(180deg, #0a1b12 0%, #06120c 100%);
    color: #f5fff8;
}

html[data-theme="christmas"] .section-label,
html[data-theme="christmas"] .curious-small,
html[data-theme="christmas"] .step-number,
html[data-theme="christmas"] .project-number,
html[data-theme="christmas"] .tool-detail-label,
html[data-theme="christmas"] .tool-detail-pill.version,
html[data-theme="christmas"] .arcade-game-meta,
html[data-theme="christmas"] .reaction-eyebrow,
html[data-theme="christmas"] .reaction-rating {
    color: #bfe8ff;
}

html[data-theme="christmas"] .section-light .card,
html[data-theme="christmas"] .right-now .now-card,
html[data-theme="christmas"] .status-live-section .live-pulse,
html[data-theme="christmas"] .status-live-section .live-card,
html[data-theme="christmas"] .tool-card,
html[data-theme="christmas"] .tool-detail-card,
html[data-theme="christmas"] .arcade-game-card,
html[data-theme="christmas"] .reaction-shell {
    background:
        linear-gradient(145deg, rgba(191, 232, 255, 0.055), rgba(255,255,255,.012)),
        #0b1711;
    border-color: rgba(191, 232, 255, 0.14);
    color: #f5fff8;
}

html[data-theme="christmas"] .section-light .card p,
html[data-theme="christmas"] .journey-text,
html[data-theme="christmas"] .step p,
html[data-theme="christmas"] .right-now .now-card p,
html[data-theme="christmas"] .status-live-section .live-card p,
html[data-theme="christmas"] .curious-scroll .curious-intro,
html[data-theme="christmas"] .curious-scroll .curious-stage p {
    color: #b8ccc4;
}

html[data-theme="christmas"] .section-light .card h3,
html[data-theme="christmas"] .section-light .section-title,
html[data-theme="christmas"] .right-now .now-card h3,
html[data-theme="christmas"] .right-now .now-status-line strong,
html[data-theme="christmas"] .status-live-section .live-card h3,
html[data-theme="christmas"] .status-live-section .live-pulse strong,
html[data-theme="christmas"] .status-live-section .live-ticker strong,
html[data-theme="christmas"] .curious-scroll .curious-stage h3 {
    color: #f5fff8;
}

html[data-theme="christmas"] .section-light .card:hover {
    background: #bfe8ff;
    color: #06100b;
    border-color: #bfe8ff;
}

html[data-theme="christmas"] .section-light .card:hover p {
    color: #123020;
}

html[data-theme="christmas"] .curious-scroll .curious-stage.active .curious-number {
    background: #bfe8ff;
    color: #06100b;
    border-color: #bfe8ff;
}

html[data-theme="christmas"] .tool-detail-action.primary,
html[data-theme="christmas"] .contact-button:hover {
    background: #bfe8ff;
    color: #06100b;
    border-color: #bfe8ff;
}

html[data-theme="christmas"] .project-card,
html[data-theme="christmas"] .project-card-coming {
    background:
        linear-gradient(145deg, rgba(40, 180, 108, 0.06), rgba(191, 232, 255, 0.025)),
        #09140e;
    border-color: rgba(191, 232, 255, 0.12);
}

html[data-theme="christmas"] .project-card:hover,
html[data-theme="christmas"] .tool-card:hover,
html[data-theme="christmas"] .arcade-game-card:hover {
    border-color: rgba(191, 232, 255, 0.42);
    box-shadow: 0 20px 65px rgba(0, 0, 0, 0.28);
}

/* ---------------------------------------------------------
   MIDNIGHT
--------------------------------------------------------- */

html[data-theme="midnight"] {
    --black: #03050b;
    --white: #f6f4ff;
    --grey: #9395a9;
    --purple: #9d7bff;
    --border: rgba(157, 123, 255, 0.16);
}

html[data-theme="midnight"] body {
    background:
        radial-gradient(circle at 20% 15%, rgba(157, 123, 255, 0.08), transparent 24%),
        radial-gradient(circle at 82% 76%, rgba(75, 125, 255, 0.06), transparent 28%),
        #03050b;
    color: #f6f4ff;
}

html[data-theme="midnight"] body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 999;
    opacity: 0.36;
    background:
        radial-gradient(circle at 12% 16%, rgba(255,255,255,.85) 0 1px, transparent 1.5px),
        radial-gradient(circle at 31% 42%, rgba(255,255,255,.65) 0 1px, transparent 1.5px),
        radial-gradient(circle at 69% 21%, rgba(255,255,255,.75) 0 1px, transparent 1.5px),
        radial-gradient(circle at 88% 54%, rgba(255,255,255,.55) 0 1px, transparent 1.5px),
        radial-gradient(circle at 52% 79%, rgba(255,255,255,.55) 0 1px, transparent 1.5px);
}

html[data-theme="midnight"] .nav {
    background: rgba(3, 5, 11, 0.88);
    border-bottom-color: rgba(157, 123, 255, 0.14);
}

html[data-theme="midnight"] .nav-links a:hover,
html[data-theme="midnight"] .section-label,
html[data-theme="midnight"] .curious-small,
html[data-theme="midnight"] .step-number,
html[data-theme="midnight"] .project-number,
html[data-theme="midnight"] .tool-detail-label,
html[data-theme="midnight"] .tool-detail-pill.version,
html[data-theme="midnight"] .arcade-game-meta,
html[data-theme="midnight"] .reaction-eyebrow,
html[data-theme="midnight"] .reaction-rating {
    color: #9d7bff;
}

html[data-theme="midnight"] .section-dark,
html[data-theme="midnight"] .contact,
html[data-theme="midnight"] .toolkit-page,
html[data-theme="midnight"] .tool-detail-main,
html[data-theme="midnight"] .arcade-page,
html[data-theme="midnight"] .arcade-main,
html[data-theme="midnight"] .reaction-page {
    background:
        radial-gradient(circle at 76% 8%, rgba(157, 123, 255, 0.06), transparent 26%),
        #03050b;
    color: #f6f4ff;
}

html[data-theme="midnight"] .section-light,
html[data-theme="midnight"] .right-now,
html[data-theme="midnight"] .status-live-section,
html[data-theme="midnight"] .curious-scroll {
    background:
        radial-gradient(circle at 80% 5%, rgba(157, 123, 255, 0.08), transparent 24%),
        linear-gradient(180deg, #080d19 0%, #040711 100%);
    color: #f6f4ff;
}

html[data-theme="midnight"] .section-light .card,
html[data-theme="midnight"] .right-now .now-card,
html[data-theme="midnight"] .status-live-section .live-pulse,
html[data-theme="midnight"] .status-live-section .live-card,
html[data-theme="midnight"] .tool-card,
html[data-theme="midnight"] .tool-detail-card,
html[data-theme="midnight"] .arcade-game-card,
html[data-theme="midnight"] .reaction-shell {
    background:
        linear-gradient(145deg, rgba(157, 123, 255, 0.07), rgba(255,255,255,.012)),
        #0a0e18;
    border-color: rgba(157, 123, 255, 0.15);
    color: #f6f4ff;
}

html[data-theme="midnight"] .section-light .card p,
html[data-theme="midnight"] .journey-text,
html[data-theme="midnight"] .step p,
html[data-theme="midnight"] .right-now .now-card p,
html[data-theme="midnight"] .status-live-section .live-card p,
html[data-theme="midnight"] .curious-scroll .curious-intro,
html[data-theme="midnight"] .curious-scroll .curious-stage p {
    color: #b6b8c8;
}

html[data-theme="midnight"] .section-light .section-title,
html[data-theme="midnight"] .section-light .card h3,
html[data-theme="midnight"] .right-now .now-card h3,
html[data-theme="midnight"] .right-now .now-status-line strong,
html[data-theme="midnight"] .status-live-section .live-pulse strong,
html[data-theme="midnight"] .status-live-section .live-ticker strong,
html[data-theme="midnight"] .status-live-section .live-card h3,
html[data-theme="midnight"] .curious-scroll .curious-stage h3 {
    color: #f6f4ff;
}

html[data-theme="midnight"] .section-light .card:hover {
    background: #9d7bff;
    color: #100b18;
    border-color: #9d7bff;
}

html[data-theme="midnight"] .section-light .card:hover p {
    color: #24173c;
}

html[data-theme="midnight"] .curious-scroll .curious-stage.active .curious-number,
html[data-theme="midnight"] .contact-button:hover,
html[data-theme="midnight"] .tool-detail-action.primary {
    background: #9d7bff;
    color: #100b18;
    border-color: #9d7bff;
}

html[data-theme="midnight"] .project-card,
html[data-theme="midnight"] .project-card-coming {
    background:
        radial-gradient(circle at 82% 14%, rgba(157, 123, 255, 0.08), transparent 28%),
        #090c15;
    border-color: rgba(157, 123, 255, 0.12);
}

/* ---------------------------------------------------------
   NEON
--------------------------------------------------------- */

html[data-theme="neon"] {
    --black: #020807;
    --white: #edfffb;
    --grey: #88a9a0;
    --purple: #7fffd4;
    --border: rgba(127, 255, 212, 0.17);
}

html[data-theme="neon"] body {
    background:
        radial-gradient(circle at 18% 24%, rgba(127, 255, 212, 0.09), transparent 24%),
        radial-gradient(circle at 82% 76%, rgba(0, 255, 200, 0.06), transparent 25%),
        #020807;
    color: #edfffb;
}

html[data-theme="neon"] body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 999;
    opacity: 0.14;
    background:
        linear-gradient(rgba(127,255,212,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(127,255,212,.08) 1px, transparent 1px);
    background-size: 38px 38px;
    mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
}

html[data-theme="neon"] .nav {
    background: rgba(2, 8, 7, 0.87);
    border-bottom-color: rgba(127, 255, 212, 0.15);
}

html[data-theme="neon"] .nav-links a:hover,
html[data-theme="neon"] .section-label,
html[data-theme="neon"] .curious-small,
html[data-theme="neon"] .step-number,
html[data-theme="neon"] .project-number,
html[data-theme="neon"] .tool-detail-label,
html[data-theme="neon"] .tool-detail-pill.version,
html[data-theme="neon"] .arcade-game-meta,
html[data-theme="neon"] .reaction-eyebrow,
html[data-theme="neon"] .reaction-rating {
    color: #7fffd4;
}

html[data-theme="neon"] .hero {
    background:
        radial-gradient(circle at 70% 50%, rgba(127,255,212,.12), transparent 32%),
        linear-gradient(180deg, rgba(127,255,212,.025), transparent 40%);
}

html[data-theme="neon"] .section-dark,
html[data-theme="neon"] .contact,
html[data-theme="neon"] .toolkit-page,
html[data-theme="neon"] .tool-detail-main,
html[data-theme="neon"] .arcade-page,
html[data-theme="neon"] .arcade-main,
html[data-theme="neon"] .reaction-page {
    background:
        radial-gradient(circle at 76% 8%, rgba(127, 255, 212, 0.06), transparent 25%),
        #020807;
    color: #edfffb;
}

html[data-theme="neon"] .section-light,
html[data-theme="neon"] .right-now,
html[data-theme="neon"] .status-live-section,
html[data-theme="neon"] .curious-scroll {
    background:
        radial-gradient(circle at 76% 5%, rgba(127,255,212,.10), transparent 24%),
        linear-gradient(180deg, #06120f 0%, #030b09 100%);
    color: #edfffb;
}

html[data-theme="neon"] .section-light .card,
html[data-theme="neon"] .right-now .now-card,
html[data-theme="neon"] .status-live-section .live-pulse,
html[data-theme="neon"] .status-live-section .live-card,
html[data-theme="neon"] .tool-card,
html[data-theme="neon"] .tool-detail-card,
html[data-theme="neon"] .arcade-game-card,
html[data-theme="neon"] .reaction-shell {
    background:
        linear-gradient(145deg, rgba(127,255,212,.075), rgba(255,255,255,.012)),
        #07130f;
    border-color: rgba(127,255,212,.15);
    color: #edfffb;
    box-shadow: 0 0 40px rgba(127,255,212,.025);
}

html[data-theme="neon"] .section-light .card p,
html[data-theme="neon"] .journey-text,
html[data-theme="neon"] .step p,
html[data-theme="neon"] .right-now .now-card p,
html[data-theme="neon"] .status-live-section .live-card p,
html[data-theme="neon"] .curious-scroll .curious-intro,
html[data-theme="neon"] .curious-scroll .curious-stage p {
    color: #a9c8bf;
}

html[data-theme="neon"] .section-light .section-title,
html[data-theme="neon"] .section-light .card h3,
html[data-theme="neon"] .right-now .now-card h3,
html[data-theme="neon"] .right-now .now-status-line strong,
html[data-theme="neon"] .status-live-section .live-pulse strong,
html[data-theme="neon"] .status-live-section .live-ticker strong,
html[data-theme="neon"] .status-live-section .live-card h3,
html[data-theme="neon"] .curious-scroll .curious-stage h3 {
    color: #edfffb;
}

html[data-theme="neon"] .section-light .card:hover {
    background: #7fffd4;
    color: #03100c;
    border-color: #7fffd4;
    box-shadow: 0 0 35px rgba(127,255,212,.22);
}

html[data-theme="neon"] .section-light .card:hover p {
    color: #07372d;
}

html[data-theme="neon"] .curious-scroll .curious-stage.active .curious-number,
html[data-theme="neon"] .contact-button:hover,
html[data-theme="neon"] .tool-detail-action.primary {
    background: #7fffd4;
    color: #03100c;
    border-color: #7fffd4;
}

html[data-theme="neon"] .project-card,
html[data-theme="neon"] .project-card-coming {
    background:
        radial-gradient(circle at 82% 12%, rgba(127,255,212,.08), transparent 28%),
        #06110d;
    border-color: rgba(127,255,212,.13);
}

html[data-theme="neon"] .project-card:hover,
html[data-theme="neon"] .tool-card:hover,
html[data-theme="neon"] .arcade-game-card:hover,
html[data-theme="neon"] .reaction-button:hover {
    border-color: rgba(127,255,212,.5);
    box-shadow: 0 0 38px rgba(127,255,212,.09);
}

/* ---------------------------------------------------------
   TERMINAL
--------------------------------------------------------- */

html[data-theme="terminal"] {
    --black: #020602;
    --white: #f2fff4;
    --grey: #7ea187;
    --purple: #65ff8a;
    --border: rgba(101, 255, 138, 0.18);
}

html[data-theme="terminal"] body {
    background:
        radial-gradient(circle at 50% 0%, rgba(101,255,138,.08), transparent 32%),
        #020602;
    color: #f2fff4;
}

html[data-theme="terminal"] body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 999;
    opacity: 0.16;
    background:
        repeating-linear-gradient(
            0deg,
            rgba(101,255,138,.05) 0,
            rgba(101,255,138,.05) 1px,
            transparent 1px,
            transparent 4px
        );
}

html[data-theme="terminal"] .nav {
    background: rgba(2, 6, 2, 0.92);
    border-bottom-color: rgba(101,255,138,0.18);
}

html[data-theme="terminal"] .nav-links a:hover,
html[data-theme="terminal"] .section-label,
html[data-theme="terminal"] .curious-small,
html[data-theme="terminal"] .step-number,
html[data-theme="terminal"] .project-number,
html[data-theme="terminal"] .tool-detail-label,
html[data-theme="terminal"] .tool-detail-pill.version,
html[data-theme="terminal"] .arcade-game-meta,
html[data-theme="terminal"] .reaction-eyebrow,
html[data-theme="terminal"] .reaction-rating {
    color: #65ff8a;
}

html[data-theme="terminal"] .section-dark,
html[data-theme="terminal"] .contact,
html[data-theme="terminal"] .toolkit-page,
html[data-theme="terminal"] .tool-detail-main,
html[data-theme="terminal"] .arcade-page,
html[data-theme="terminal"] .arcade-main,
html[data-theme="terminal"] .reaction-page {
    background:
        radial-gradient(circle at 78% 8%, rgba(101,255,138,.06), transparent 24%),
        #020602;
    color: #f2fff4;
}

html[data-theme="terminal"] .section-light,
html[data-theme="terminal"] .right-now,
html[data-theme="terminal"] .status-live-section,
html[data-theme="terminal"] .curious-scroll {
    background:
        radial-gradient(circle at 82% 6%, rgba(101,255,138,.08), transparent 24%),
        linear-gradient(180deg, #061106 0%, #020702 100%);
    color: #f2fff4;
}

html[data-theme="terminal"] .section-light .card,
html[data-theme="terminal"] .right-now .now-card,
html[data-theme="terminal"] .status-live-section .live-pulse,
html[data-theme="terminal"] .status-live-section .live-card,
html[data-theme="terminal"] .tool-card,
html[data-theme="terminal"] .tool-detail-card,
html[data-theme="terminal"] .arcade-game-card,
html[data-theme="terminal"] .reaction-shell {
    background:
        linear-gradient(180deg, rgba(101,255,138,.04), rgba(255,255,255,.006)),
        #061006;
    border-color: rgba(101,255,138,.16);
    color: #f2fff4;
}

html[data-theme="terminal"] .section-light .card p,
html[data-theme="terminal"] .journey-text,
html[data-theme="terminal"] .step p,
html[data-theme="terminal"] .right-now .now-card p,
html[data-theme="terminal"] .status-live-section .live-card p,
html[data-theme="terminal"] .curious-scroll .curious-intro,
html[data-theme="terminal"] .curious-scroll .curious-stage p {
    color: #a4c4aa;
}

html[data-theme="terminal"] .section-light .section-title,
html[data-theme="terminal"] .section-light .card h3,
html[data-theme="terminal"] .right-now .now-card h3,
html[data-theme="terminal"] .right-now .now-status-line strong,
html[data-theme="terminal"] .status-live-section .live-pulse strong,
html[data-theme="terminal"] .status-live-section .live-ticker strong,
html[data-theme="terminal"] .status-live-section .live-card h3,
html[data-theme="terminal"] .curious-scroll .curious-stage h3 {
    color: #f2fff4;
}

html[data-theme="terminal"] .section-light .card:hover {
    background: #65ff8a;
    color: #021006;
    border-color: #65ff8a;
    box-shadow: 0 0 34px rgba(101,255,138,.14);
}

html[data-theme="terminal"] .section-light .card:hover p {
    color: #0a3213;
}

html[data-theme="terminal"] .curious-scroll .curious-stage.active .curious-number,
html[data-theme="terminal"] .contact-button:hover,
html[data-theme="terminal"] .tool-detail-action.primary {
    background: #65ff8a;
    color: #021006;
    border-color: #65ff8a;
}

html[data-theme="terminal"] .project-card,
html[data-theme="terminal"] .project-card-coming {
    background:
        radial-gradient(circle at 82% 10%, rgba(101,255,138,.06), transparent 28%),
        #050d05;
    border-color: rgba(101,255,138,.14);
}

html[data-theme="terminal"] .tool-card:hover,
html[data-theme="terminal"] .arcade-game-card:hover,
html[data-theme="terminal"] .reaction-button:hover {
    border-color: rgba(101,255,138,.48);
    box-shadow: 0 0 34px rgba(101,255,138,.07);
}


/* =========================================================
   NON-HALLOWEEN THEMES // DECOR
========================================================= */

/* Christmas: winter icons and soft falling snow. */
html[data-theme="christmas"] body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 999;
    pointer-events: none;
    opacity: 0.22;
    background-repeat: no-repeat;
    background-image:
        url("/assets/themes/christmas-tree.svg"),
        url("/assets/themes/gift.svg"),
        url("/assets/themes/star.svg"),
        url("/assets/themes/snowflake.svg"),
        url("/assets/themes/snowflake.svg"),
        url("/assets/themes/snowflake.svg");
    background-size:
        118px 118px,
        72px 72px,
        52px 52px,
        34px 34px,
        25px 25px,
        19px 19px;
    background-position:
        4% 89%,
        94% 88%,
        88% 16%,
        18% 23%,
        63% 14%,
        78% 69%;
    filter: drop-shadow(0 0 18px rgba(191, 232, 255, 0.18));
}

html[data-theme="christmas"] .hero::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: 4%;
    bottom: 9%;
    pointer-events: none;
    opacity: 0.20;
    background: url("/assets/themes/christmas-tree.svg") center / contain no-repeat;
    filter: drop-shadow(0 0 25px rgba(191, 232, 255, 0.20));
}

/* Midnight: moon, constellation and starfield. */
html[data-theme="midnight"] body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 999;
    pointer-events: none;
    opacity: 0.20;
    background-repeat: no-repeat;
    background-image:
        url("/assets/themes/moon.svg"),
        url("/assets/themes/constellation.svg"),
        url("/assets/themes/star.svg"),
        url("/assets/themes/star.svg");
    background-size:
        150px 150px,
        230px 158px,
        34px 34px,
        22px 22px;
    background-position:
        88% 15%,
        9% 66%,
        15% 19%,
        74% 73%;
    filter: drop-shadow(0 0 28px rgba(157, 123, 255, 0.16));
}

html[data-theme="midnight"] .hero::after {
    content: "";
    position: absolute;
    width: 205px;
    height: 150px;
    right: 3%;
    bottom: 7%;
    pointer-events: none;
    opacity: 0.14;
    background: url("/assets/themes/constellation.svg") center / contain no-repeat;
}

/* Neon: holographic grid and glowing rings. */
html[data-theme="neon"] body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 999;
    pointer-events: none;
    opacity: 0.16;
    background-repeat: no-repeat;
    background-image:
        url("/assets/themes/neon-grid.svg"),
        url("/assets/themes/neon-ring.svg"),
        url("/assets/themes/neon-ring.svg");
    background-size:
        min(560px, 56vw) auto,
        220px 220px,
        130px 130px;
    background-position:
        100% 88%,
        90% 18%,
        13% 72%;
    filter: drop-shadow(0 0 25px rgba(127, 255, 212, 0.18));
}

html[data-theme="neon"] .hero::after {
    content: "";
    position: absolute;
    width: 230px;
    height: 230px;
    right: 1%;
    bottom: 4%;
    pointer-events: none;
    opacity: 0.18;
    background: url("/assets/themes/neon-ring.svg") center / contain no-repeat;
    filter: drop-shadow(0 0 32px rgba(127, 255, 212, 0.24));
}

/* Terminal: command prompt, grid and system readout motifs. */
html[data-theme="terminal"] body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 999;
    pointer-events: none;
    opacity: 0.15;
    background-repeat: no-repeat;
    background-image:
        url("/assets/themes/terminal-prompt.svg"),
        url("/assets/themes/terminal-grid.svg"),
        url("/assets/themes/terminal-prompt.svg");
    background-size:
        170px 90px,
        min(520px, 52vw) auto,
        105px 56px;
    background-position:
        91% 17%,
        100% 91%,
        8% 79%;
    filter: drop-shadow(0 0 20px rgba(101, 255, 138, 0.16));
}

html[data-theme="terminal"] .hero::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 120px;
    right: 3%;
    bottom: 8%;
    pointer-events: none;
    opacity: 0.15;
    background: url("/assets/themes/terminal-prompt.svg") center / contain no-repeat;
    filter: drop-shadow(0 0 24px rgba(101, 255, 138, 0.18));
}

@media (max-width: 700px) {
    html[data-theme="christmas"] body::after {
        background-size:
            82px 82px,
            52px 52px,
            36px 36px,
            25px 25px,
            19px 19px,
            15px 15px;
        background-position:
            2% 92%,
            94% 91%,
            86% 17%,
            14% 25%,
            66% 13%,
            80% 66%;
    }

    html[data-theme="midnight"] body::after {
        background-size:
            105px 105px,
            170px 117px,
            25px 25px,
            17px 17px;
        background-position:
            86% 14%,
            5% 72%,
            13% 21%,
            78% 70%;
    }

    html[data-theme="neon"] body::after {
        background-size:
            360px auto,
            150px 150px,
            95px 95px;
        background-position:
            100% 90%,
            86% 18%,
            10% 76%;
    }

    html[data-theme="terminal"] body::after {
        background-size:
            120px 64px,
            340px auto,
            78px 42px;
        background-position:
            86% 18%,
            100% 92%,
            7% 80%;
    }
}