/* --- CSS VARIABLE DEFINITIONS FOR THEMES --- */
:root, body[data-theme='gunmetal'] {
    --font-main: 'Lora', serif;
    --font-heading-main: 'Patrick Hand', 'Lora', cursive;
    --color-bg: #203841; --color-text: #e0e0e0; --color-text-heading: #858583; --color-text-special: #b0b0b0;
    --color-surface: #203841; --shadow-light: #2d495d; --shadow-dark: #1a2c34;
    --button-border: #5D2D48; --separator-fill: #5D2D48;
    --teal-icon-bg: linear-gradient(145deg, #5D2D48, #412032);
    --button-grad-1: #7c3c62; --button-grad-2: #412032; --button-grad-3: #5D2D48; --button-grad-4: #412032;
    --title-grad-1: #e784c1; --title-grad-2: #a15088; --title-grad-3: #8f3a74; --title-grad-4: #d86eb1;
    --in-out-border: var(--button-border);
}

/* --- Add these new rules to your style.css --- */

body[data-theme='linen'] {
    --font-main: 'Lora', serif;
    --font-heading-main: 'Patrick Hand', 'Lora', cursive;
    --color-bg: #F5EFE6; --color-text: #4E443A; --color-text-heading: #786A5E; --color-text-special: #9B8D80;
    --color-surface: #F5EFE6; --shadow-light: #ffffff; --shadow-dark: #d0c9be;
    --button-border: #A88F78; --separator-fill: #A88F78; --outline-color: #d0c9be; --outline-shadow: rgba(120,106,94,0.1);
    --teal-icon-bg: linear-gradient(145deg, #A88F78, #8a735e);
    --button-grad-1: #c5a98f; --button-grad-2: #8a735e; --button-grad-3: #A88F78; --button-grad-4: #8a735e;
    --title-grad-1: #a0826c; --title-grad-2: #796350; --title-grad-3: #655242; --title-grad-4: #92755e;
}

body[data-theme='seashell'] {
    --font-main: 'Lora', serif;
    --font-heading-main: 'Patrick Hand', 'Lora', cursive;
    --color-bg: #FFF5EE; --color-text: #5C4033; --color-text-heading: #8B695A; --color-text-special: #A4887A;
    --color-surface: #FFF5EE; --shadow-light: #ffffff; --shadow-dark: #d9d0c8;
    --button-border: #E4A67B; --separator-fill: #E4A67B; --outline-color: #d9d0c8; --outline-shadow: rgba(139,105,90,0.1);
    --teal-icon-bg: linear-gradient(145deg, #E4A67B, #c78c62);
    --button-grad-1: #fdbd8f; --button-grad-2: #c78c62; --button-grad-3: #E4A67B; --button-grad-4: #c78c62;
    --title-grad-1: #d28e62; --title-grad-2: #a56842; --title-grad-3: #8a5532; --title-grad-4: #c07a4e;
}

body[data-theme='raisin-black'] {
    --color-bg: #24201D; --color-text: #D9D4C8; --color-text-heading: #ABA38F; --color-text-special: #b5b0a6;
    --color-surface: #24201D; --shadow-light: #3a332e; --shadow-dark: #1a1715;
    --button-border: #792E29; --separator-fill: #792E29;
    --teal-icon-bg: linear-gradient(145deg, #792E29, #565538);
    --button-grad-1: #9c3c36; --button-grad-2: #602420; --button-grad-3: #792E29; --button-grad-4: #602420;
    --title-grad-1: #f89a94; --title-grad-2: #c0635d; --title-grad-3: #a14841; --title-grad-4: #e5837c;
}

body[data-theme='dark-sienna'] {
    --color-bg: #2F070C; --color-text: #e6d4d6; --color-text-heading: #C25F30; --color-text-special: #8F4A91;
    --color-surface: #2F070C; --shadow-light: #410a11; --shadow-dark: #1d0407;
    --button-border: #7E1C2E; --separator-fill: #C25F30;
    --teal-icon-bg: linear-gradient(145deg, #8F4A91, #7E1C2E);
    --button-grad-1: #a5243c; --button-grad-2: #631523; --button-grad-3: #7E1C2E; --button-grad-4: #631523;
    --title-grad-1: #fca77c; --title-grad-2: #e37e4f; --title-grad-3: #c25f30; --title-grad-4: #f89060;
}

body[data-theme='passion'] {
    --color-bg: #5D2D48; --color-text: #e9e3e7; --color-text-heading: #858583; --color-text-special: #a5a5a3;
    --color-surface: #5D2D48; --shadow-light: #7c3c62; --shadow-dark: #412032;
    --button-border: #2D495D; --separator-fill: #858583;
    --teal-icon-bg: linear-gradient(145deg, #2D495D, #203841);
    --button-grad-1: #3c637c; --button-grad-2: #203841; --button-grad-3: #2D495D; --button-grad-4: #203841;
    --title-grad-1: #89c4f4; --title-grad-2: #5397c8; --title-grad-3: #3b7fad; --title-grad-4: #73b6ec;
}

body[data-theme='castro'] {
    --color-bg: #412032; --color-text: #e5e1e3; --color-text-heading: #858583; --color-text-special: #a5a5a3;
    --color-surface: #412032; --shadow-light: #5a2c46; --shadow-dark: #2c1522;
    --button-border: #5D2D48; --separator-fill: #858583;
    --teal-icon-bg: linear-gradient(145deg, #5D2D48, #2D495D);
    --button-grad-1: #7c3c62; --button-grad-2: #412032; --button-grad-3: #5D2D48; --button-grad-4: #412032;
    --title-grad-1: #e784c1; --title-grad-2: #a15088; --title-grad-3: #8f3a74; --title-grad-4: #d86eb1;
}

body[data-theme='charcoal'] {
    --color-bg: #2D495D; --color-text: #e3e7e9; --color-text-heading: #858583; --color-text-special: #a5a5a3;
    --color-surface: #2D495D; --shadow-light: #3c637c; --shadow-dark: #203841;
    --button-border: #5D2D48; --separator-fill: #858583;
    --teal-icon-bg: linear-gradient(145deg, #5D2D48, #412032);
    --button-grad-1: #7c3c62; --button-grad-2: #412032; --button-grad-3: #5D2D48; --button-grad-4: #412032;
    --title-grad-1: #e784c1; --title-grad-2: #a15088; --title-grad-3: #8f3a74; --title-grad-4: #d86eb1;
}

body[data-theme='solar-flare'] 
{
    --color-bg: #8c2a1a;
    --color-text: #fdfae3;
    --color-text-heading: #f0e2b4;
    --color-text-special: #f0c476;
    --color-surface: #8c2a1a;
    --shadow-light: #ab3e2b;
    --shadow-dark: #6e2014;
    --button-border: #f0e2b4;
    --separator-fill: #f0e2b4;
    --outline-color: #6e2014;
    --outline-shadow: rgba(240, 226, 180, 0.3);
    --teal-icon-bg: linear-gradient(145deg, #f0e2b4, #d8bc88);
    --button-grad-1: #c4644a;
    --button-grad-2: #8c2a1a;
    --button-grad-3: #ab3e2b;
    --button-grad-4: #6e2014;
    --title-grad-1: #ffb899;
    --title-grad-2: #ff7d66;
    --title-grad-3: #ff664c;
    --title-grad-4: #ff9d8c;
}

body[data-theme='aqua-wave']
{
    --color-bg: #e3e7e9;
    --color-text: #2D495D;
    --color-text-heading: #5D8C99;
    --color-text-special: #858583;
    --color-surface: #e3e7e9;
    --shadow-light: #f7f7f7;
    --shadow-dark: #c5c9cb;
    --button-border: #5D8C99;
    --separator-fill: #858583;
    --outline-color: #5D8C99;
    --outline-shadow: rgba(93, 140, 153, 0.3);
    --teal-icon-bg: linear-gradient(145deg, #a5a5a3, #8a8a86);
    --button-grad-1: #adcbd4;
    --button-grad-2: #7fa4ad;
    --button-grad-3: #95b8c2;
    --button-grad-4: #6a959f;
    --title-grad-1: #85c2d1;
    --title-grad-2: #5da4b8;
    --title-grad-3: #4a91a3;
    --title-grad-4: #70b4c8;
}

body[data-theme='evergreen']
{
    --color-bg: #1c322b;
    --color-text: #e7e9e5;
    --color-text-heading: #c1c1a9;
    --color-text-special: #84967a;
    --color-surface: #1c322b;
    --shadow-light: #2c4a3b;
    --shadow-dark: #12211c;
    --button-border: #84967a;
    --separator-fill: #c1c1a9;
    --outline-color: #12211c;
    --outline-shadow: rgba(132, 150, 122, 0.3);
    --teal-icon-bg: linear-gradient(145deg, #84967a, #6c7c66);
    --button-grad-1: #5c7050;
    --button-grad-2: #344738;
    --button-grad-3: #4a5c4f;
    --button-grad-4: #223425;
    --title-grad-1: #9dd18a;
    --title-grad-2: #6ba05a;
    --title-grad-3: #58874a;
    --title-grad-4: #7dbe6a;
}

body[data-theme='vaporwave'] {
    --color-bg: #2a0e4e;
    --color-text: #f0f0ff;
    --color-text-heading: #ff00ff;
    --color-text-special: #00ffff;
    --color-surface: #2a0e4e;
    --shadow-light: #3a1c6e;
    --shadow-dark: #1c0a32;
    --button-border: #9400d3;
    --separator-fill: #00ffff;
    --outline-color: #1c0a32;
    --outline-shadow: rgba(148, 0, 211, 0.3);
    --teal-icon-bg: linear-gradient(145deg, #ff00ff, #8000ff);
    --button-grad-1: #8000ff;
    --button-grad-2: #ff00ff;
    --button-grad-3: #a500ff;
    --button-grad-4: #e600e6;
    --title-grad-1: #ff80ff;
    --title-grad-2: #c450ff;
    --title-grad-3: #8800ff;
    --title-grad-4: #66aaff;
}

/* --- BASE STYLES USING CSS VARIABLES --- */
html { scroll-behavior: smooth; }
body { background-color: var(--color-bg); color: var(--color-text); font-family: var(--font-main); line-height: 1.7; transition: background-color 0.3s ease, color 0.3s ease; }
body.menu-open { overflow: hidden; }
h1, h2, h3, h4, h5, h6, .font-heading { font-family: var(--font-heading-main); color: var(--color-text-heading); transition: color 0.3s ease; }
.font-special { font-family: 'Special Elite', monospace; color: var(--color-text-special); transition: color 0.3s ease; }

.site-title {
    position: relative;
    isolation: isolate; /* This creates a new stacking context to fix the z-index issue */
    font-size: 4rem;
    font-weight: 700;
    text-align: center;
    line-height: 1;
    background-image: linear-gradient(to bottom, #feccb1 0%, #f17432 50%, #ea5507 51%, #fb955e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
}

.site-title::before { content: attr(data-text); position: absolute; left: 0; right: 0; z-index: -1; color: transparent; -webkit-text-stroke: 1px black; text-shadow: none; transition: all 0.3s ease; }

/* --- NEW CONTENT TITLE STYLES --- */
.content-title {
    position: relative;
    background-image: linear-gradient(to bottom, var(--title-grad-1) 0%, var(--title-grad-2) 50%, var(--title-grad-3) 51%, var(--title-grad-4) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    line-height: 1.2; /* Adjust line height for better appearance */
}

.content-title::before {
    content: attr(data-text);
    position: absolute;
    left: 0;
    right: 0;
    z-index: -1;
    color: transparent;
    -webkit-text-stroke: 1px black;
    text-shadow: none;
    transition: all 0.3s ease;
}

.neumorphic-outset { border: 1px solid var(--in-out-border); background-color: var(--color-surface); border-radius: 1.5rem; box-shadow: 12px 12px 24px var(--shadow-dark), -12px -12px 24px var(--shadow-light); transition: all 0.3s ease-in-out; }
.neumorphic-inset { border: 1px solid var(--in-out-border); background-color: var(--color-surface); border-radius: 1.5rem; box-shadow: inset 8px 8px 16px var(--shadow-dark), inset -8px -8px 16px var(--shadow-light); transition: all 0.3s ease-in-out; }
.neumorphic-input { width: 100%; padding: 1rem; border: none; border-radius: 1rem; font-family: var(--font-main); color: var(--color-text); background-color: var(--color-surface); box-shadow: inset 5px 5px 10px var(--shadow-dark), inset -5px -5px 10px var(--shadow-light); transition: all 0.3s ease-in-out; }
.neumorphic-input:focus { outline: none; box-shadow: inset 8px 8px 16px var(--shadow-dark), inset -8px -8px 16px var(--shadow-light); }
.shiny-orange-button, .shiny-teal-icon { position: relative; display: inline-block; color: white; text-shadow: 0 1px 2px rgba(0,0,0,0.35); border: 1px solid var(--button-border); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), 4px 4px 8px var(--shadow-dark), -4px -4px 8px var(--shadow-light); transition: all 0.2s ease-in-out; cursor: pointer; overflow: hidden; text-decoration: none; }
.shiny-orange-button { padding: 1rem 2rem; font-family: 'Special Elite', monospace; font-size: 1.1rem; font-weight: 600; background-image: radial-gradient(ellipse at top, var(--button-grad-1), transparent), radial-gradient(ellipse at bottom, var(--button-grad-2), transparent), linear-gradient(145deg, var(--button-grad-3), var(--button-grad-4)); border-radius: 3rem; }
#desktop-nav .shiny-orange-button { padding: 0.65rem 1.35rem; font-family: var(--font-heading-main); font-size: 1rem; }
.shiny-teal-icon { width: 3.5rem; height: 3.5rem; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; background: var(--teal-icon-bg); }
.shiny-orange-button.is-pressed, .shiny-teal-icon.is-pressed { box-shadow: 0 0 0 var(--shadow-dark), 0 0 0 var(--shadow-light), inset 3px 3px 6px rgba(0,0,0,0.5); transform: translateY(2px); }
.interactive-element { cursor: pointer; }
.nav-separator { display: inline-block; width: 24px; height: 24px; margin: 0 0.5rem; transition: transform 0.2s ease-in-out; }
.nav-separator svg { width: 100%; height: 100%; fill: var(--separator-fill); transition: fill 0.3s ease; }
#desktop-nav:hover .nav-separator:hover { transform: scale(1.3) rotate(12deg); }
.story-details-list dt { font-family: 'Special Elite', monospace; font-weight: 700; color: var(--color-text-heading); }
.story-details-list dd { margin-left: 1rem; margin-bottom: 0.75rem; }

/* --- THEME SELECTOR STYLES --- */
.theme-selector-wrapper { position: relative; }
#desktop-theme-palette, #mobile-theme-palette { width: 320px; }
#desktop-theme-palette { display: none; position: absolute; top: 100%; right: 0; margin-top: 10px; padding: 1rem; gap: 1rem; z-index: 100; }
#desktop-theme-palette.active { display: block; }
.theme-category { margin-bottom: 1rem; }
.theme-category-title { font-family: 'Montserrat', sans-serif; font-weight: bold; color: var(--color-text-heading); margin-bottom: 0.5rem; border-bottom: 1px solid var(--separator-fill); padding-bottom: 0.25rem; }
.theme-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); gap: 1rem; }
.theme-choice { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; cursor: pointer; text-align: center; }
.theme-swatch { width: 32px; height: 32px; border-radius: 50%; border: 2px solid rgba(0,0,0,0.2); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.theme-choice:hover .theme-swatch { transform: scale(1.1); }
.theme-choice .theme-name { font-size: 0.75rem; font-family: 'Montserrat', sans-serif; color: var(--color-text); }
.theme-swatch.active { box-shadow: 0 0 0 3px var(--color-surface), 0 0 0 5px var(--separator-fill); }

/* --- MOBILE/RESPONSIVE STYLES --- */
#menu-backdrop { opacity: 0; pointer-events: none; transition: opacity 0.3s ease-in-out; background-color: rgba(0,0,0,0.5); }
#mobile-menu { transform: translateX(100%); transition: transform 0.3s ease-in-out; background-color: var(--color-surface); }
body.menu-open #menu-backdrop { opacity: 1; pointer-events: auto; }
body.menu-open #mobile-menu { transform: translateX(0); }
@media (min-width: 768px) { .site-title { font-size: 5.75rem; } }