@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English+SC&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alegreya+SC:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alegreya:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');

/* A very basic reset to start fresh */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
:root {
  /* --- Regular (Light) Mode Palette --- */
  
  /* Primary background: A soft, paper-like off-white, easy on the eyes */
  --bg-color: #f5f0e1; 
  
  /* Primary text: The dark purple for a rich, legible contrast */
  --text-color: #452345;
  
  /* Secondary text/accent: The dark gray for helper text or subtle details */
  --text-secondary: #685f5e;
  
  /* Buttons, links, and key elements: The deep, dark purple for a celestial feel */
  --primary-color: #452345;
  
  /* Secondary buttons or decorative accents: The muted magenta */
  --secondary-color: #8f6190;

  /* Card, container, or elevated surface background: The rich beige */
  --surface-color: #c3b185;

    /* Primary Display/Logo Font (Historical, All Caps Look) */
  --font-display: 'IM Fell English SC', serif;

  /* Secondary Display/Header Font (Subtler Caps/Title Look) */
  --font-header: 'Alegreya SC', 'Alegreya', serif;

  /* Main Body/Title Font (Highly readable serif for long-form content) */
  --font-serif: 'Alegreya', Georgia, serif;

  /* Primary User Interface/Body Font (Clean, readable sans-serif) */
  --font-body: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Specific button text color for light mode */
  --button-text-color-light-mode: #a5a6bc; /* Your chosen color */

    /* NEW: Text color for quiz navigation buttons in light mode */
  --quiz-nav-button-text-light-mode: #e8dfe8; /* Your chosen color */
}

.dark-mode {
  /* --- Dark Mode Palette --- */
  
  /* Primary background: The deep, dark purple for a celestial feel */
  --bg-color: #2d2e49; 
  
  /* Primary text: The beige for high-contrast readability */
  --text-color: #c3b185;
  
  /* Secondary text/accent: The dark gray, providing subtle contrast from the background */
  --text-secondary: #c2bfbe;
  
  /* Buttons, links, and key elements: The muted blue, slightly brightened for pop */
  --primary-color: #141312; /* a darker greyish-brown */
  
  /* Secondary buttons or decorative accents: The muted magenta, slightly brighter */
  --secondary-color: #4a4545; /* A slightly lighter variant of #8f6190 */

  /* Card, container, or elevated surface background: The dark gray */
  --surface-color: #685f5e;
}

/* Default setting for all text (clean and readable) */
body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-color);
  background-color: var(--bg-color);
  min-height: 100vh; 
}

/* Primary Headings (H1/H2): Use the highly distinctive IM Fell SC */
h1, h2 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary-color); /* This color applies to global h1/h2s */
  text-align: center; /* NEW: Ensure all global h1/h2s are centered by default */
}

/* Secondary Headings (H3/H4) or Special Titles: Use the elegant Alegreya SC */
h3, h4 {
  font-family: var(--font-header);
  font-weight: 700;
  color: var(--text-color);
  text-align: center; /* Optional: If you want these centered too */
}

/* Long form content, detailed descriptions, or larger paragraphs: Use Alegreya serif */
.long-text, p.serif {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.6;
}

/* UI Elements, Buttons, Inputs: Use the clean, clear Lato */
button, input, textarea {
  font-family: var(--font-body);
}

/* --- Application Header Styles --- */
.app-header {
    background-color: var(--primary-color); /* Use one of your theme colors */
    color: var(--color-text-light); /* Light text for contrast */
    padding: 15px 0; /* Vertical padding */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Subtle shadow for depth */
    position: sticky; /* Make it stick to the top when scrolling */
    top: 0;
    z-index: 1000; /* Ensure it stays above other content */
}

.app-header .header-content {
    max-width: 960px; /* Match your container width */
    margin: 0 auto;   /* Center the content */
    display: flex;    /* Use flexbox for logo and title alignment */
    align-items: center; /* Vertically align items */
    padding: 0 20px;  /* Horizontal padding */
}

.app-header .app-logo {
    height: 40px; /* Adjust height as needed */
    width: auto;  /* Maintain aspect ratio */
    margin-right: 15px; /* Space between logo and title */
    border-radius: 50%; /* Make it circular if you like */
    object-fit: cover; /* Ensure image fills the space */
    border: 2px solid var(--color-text-light); /* Small border */
}

/* NEW/MODIFIED: Style for the H1 specifically within the header */
.app-header h1 {
    font-family: var(--font-display);
    font-size: 2.5em; /* NEW: Slightly larger font size for prominence */
    /* color: var(--color-text-light); /* REMOVE or comment out this line as it will be overridden by background-clip */

    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    flex-grow: 1;
    text-align: center;

    /* --- NEW: Metallic Text Effect --- */
    background-image: linear-gradient(
        to right,
        #FFD700 0%,      /* Gold */
        #DAA520 25%,     /* Goldenrod */
        #B8860B 50%,     /* DarkGoldenrod */
        #DAA520 75%,
        #FFD700 100%
    );
    -webkit-background-clip: text; /* Clip the background to the shape of the text */
    background-clip: text;
    -webkit-text-fill-color: transparent; /* Make the text transparent so the background shows through */
    text-fill-color: transparent;
    filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.4)); /* Subtle shadow for depth and pop */

    /* Fallback for browsers that don't support text-fill-color */
    color: #FFD700;
}

.welcome-subtitle {
    text-align: center; /* Center the text */
    font-family: var(--font-serif); /* Perhaps use your serif font for this */
    font-size: 1.2em; /* Make it a bit larger than regular paragraph text */
    color: var(--text-color); /* Use your primary text color */
    margin-top: 15px; /* Add some space above it */
    margin-bottom: 30px; /* Add some space below it, before the buttons */
    max-width: 600px; /* Optional: constrain width for better readability */
    margin-left: auto; /* Used with max-width to center the block itself */
    margin-right: auto;
}

/* --- Dark Mode Toggle Button Styles --- */
.theme-toggle-button {
    background: none;
    border: none;
    font-size: 1.8em; /* Make the emoji/icon large enough */
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 5px;
    transition: background-color 0.2s ease, transform 0.2s ease;
    color: var(--color-text-light); /* Ensure it's visible in light header */
}
.dark-mode .theme-toggle-button {
    color: var(--text-color); /* Ensure it's visible in dark header */
}

.theme-toggle-button:hover {
    background-color: rgba(255, 255, 255, 0.2); /* Slight background on hover */
    transform: scale(1.05); /* Subtle grow effect */
}

/* Adjust the icon color in dark mode */
.dark-mode .theme-toggle-button {
    color: var(--text-color); /* Use dark mode text color for the icon */
}


/* Ensure body padding accounts for fixed header */
body {
    /* ... existing body styles ... */
    padding-top: 70px; /* Adjust this to be slightly more than your header's total height */
}

/* --- Layout Elements --- */
.container {
    max-width: 960px; /* Example max width */
    margin: 40px auto; /* Center with top/bottom margin */
    padding: 20px;
    background-color: var(--surface-color); /* Lighter background for content */
    border-radius: 8px; /* Slightly rounded corners */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Subtle shadow */
}

/* --- Styles for Character Portraits --- */
.character-portrait {
    max-width: 50%; /* Ensures image doesn't overflow its container */
    height: auto;    /* Maintains aspect ratio */
    display: block;  /* Removes extra space below image */
    margin: 20px auto; /* Centers the image and adds vertical spacing */
    border-radius: 8px; /* Slightly rounded corners */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Subtle shadow */
}

/* --- Character List Specific Styles --- */
.character-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive grid */
    gap: 30px; /* Space between grid items */
    margin-top: 30px;
}

.character-list-item {
    display: flex; /* Use flexbox for image and text inside each item */
    align-items: flex-start; /* Align image and text to the top */
    gap: 15px; /* Space between image and text */
    background-color: var(--surface-color); /* Use your surface color */
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    flex-direction: row; /* Image then text */
}

.character-list-portrait {
    width: 100px; /* Fixed width for list images */
    height: 100px; /* Fixed height for list images */
    object-fit: cover; /* Ensures image fills the space without distortion */
    border-radius: 50%; /* Make it circular */
    flex-shrink: 0; /* Prevent image from shrinking */
    border: 2px solid var(--primary-color); /* A small border */
}

.character-list-item h3 {
    margin-top: 0; /* Remove top margin for name in list */
    margin-bottom: 5px;
    color: var(--primary-color); /* Give the name some emphasis */
    font-size: 1.3em;
}

.character-list-item p {
    font-size: 0.9em;
    color: var(--text-secondary);
    margin-bottom: 0; /* No bottom margin on last paragraph in list item */
}

/* --- Styles for Character Portrait on Detail Page --- */
.character-portrait-detail {
    max-width: 300px; /* Adjust as desired, e.g., 50% for larger screens */
    height: auto;
    display: block;
    margin: 20px auto; /* Centers it horizontally, 20px top/bottom spacing */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    border: 3px solid var(--primary-color); /* A more prominent border */
}

/* --- Styles for Detail Content Layout (Image left, Description right) --- */
.character-detail-content {
    display: flex;
    flex-direction: row; /* Left col (portrait + info) and description side-by-side */
    gap: 30px;
    align-items: flex-start;
    margin-top: 20px;
}

/* Left column: portrait stacked above info box */
.character-detail-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 300px; /* matches portrait max-width */
    gap: 16px;
    /* let the info box determine height naturally — no overflow clipping */
    height: auto;
    overflow: visible;
}

.character-detail-left .character-portrait-detail {
    width: 100%;
    margin: 0;
}

/* Info box fills the left column width */
.character-detail-left .character-info-box {
    width: 100%;
}

/* Description is now rendered below the portrait row, not inside it */

/* --- Character Name Block (prefix + name + suffix + goes_by + titles) --- */
.character-detail-name-block {
    text-align: center;
    margin-bottom: 20px;
}

.character-name-prefix {
    font-family: var(--font-header);
    font-size: 0.55em;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
    vertical-align: middle;
    font-weight: 400;
}

.dark-mode .character-name-prefix {
    color: rgba(195,177,133,0.7);
}

.character-name-suffix {
    font-family: var(--font-serif);
    font-size: 1em;
    font-style: italic;
    color: var(--text-secondary);
    margin-top: 4px;
    letter-spacing: 0.04em;
    text-align: center;
}

.dark-mode .character-name-suffix {
    color: rgba(195,177,133,0.75);
}

/* Goes-by: the familiar name readers know — prominent, centered */
.character-name-goesby {
    font-family: var(--font-serif);
    font-size: 1.35em;
    font-style: italic;
    color: var(--primary-color);
    margin-top: 6px;
    letter-spacing: 0.03em;
    text-align: center;
}

.dark-mode .character-name-goesby {
    color: #FFD700;
}

/* Titles: each on its own line, smaller and spaced */
.character-name-title {
    font-family: var(--font-header);
    font-size: 0.82em;
    font-weight: 400;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    text-align: center;
    margin-top: 3px;
}

.dark-mode .character-name-title {
    color: rgba(195,177,133,0.8);
}

/* --- Character Detail Description (below portrait row) --- */
.character-detail-description {
    flex: 1;
    min-width: 0; /* prevent flex overflow */
    font-family: var(--font-serif);
    font-size: 1.05em;
    line-height: 1.7;
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* --- Family Box (siblings, children) in right column --- */
.character-family-box {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.18);
    border: 1px solid rgba(69,35,69,0.2);
    order: 1; /* renders after description prose */
}

.dark-mode .character-family-box {
    border-color: rgba(255,215,0,0.2);
}

.character-family-box-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, #6b3a6b 100%);
    color: #FFD700;
    font-family: var(--font-display);
    font-size: 0.85em;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-align: center;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,215,0,0.25);
}

/* "with [Partner]" / "via [Parent]" context lines inside family rows */
.family-with-partner,
.family-via-parent {
    font-family: var(--font-header);
    font-size: 0.88em;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-secondary);
    display: block;
    margin-bottom: 1px;
}

.dark-mode .family-with-partner,
.dark-mode .family-via-parent {
    color: rgba(195,177,133,0.65);
}

/* Death year note after a name in the Family box: "(d. 14,811)" */
.family-death-note {
    font-family: var(--font-serif);
    font-size: 0.82em;
    font-style: italic;
    color: var(--text-secondary);
    opacity: 0.8;
}

.dark-mode .family-death-note {
    color: rgba(195,177,133,0.55);
}

/* Birth/death year span on sibling names: "(b. 14,856)" or "(14,856–14,867)" */
.family-life-dates {
    font-family: var(--font-serif);
    font-size: 0.82em;
    font-style: italic;
    color: var(--text-secondary);
    opacity: 0.75;
}

.dark-mode .family-life-dates {
    color: rgba(195,177,133,0.55);
}

/* --- Clickable character name buttons (in info box) --- */
.char-name-link {
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font-serif);
    font-size: inherit;
    color: var(--primary-color);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: rgba(69,35,69,0.35);
    transition: opacity 0.2s ease;
    display: inline;
}

.dark-mode .char-name-link {
    color: #FFD700;
    text-decoration-color: rgba(255,215,0,0.4);
}

.char-name-link:hover {
    opacity: 0.7;
}

/* --- Relationship grouping in info box --- */
.relationship-group {
    display: block;
    margin-bottom: 5px;
}

.relationship-group:last-child {
    margin-bottom: 0;
}

.relationship-type-label {
    font-family: var(--font-header);
    font-size: 0.8em;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: capitalize;
    color: var(--text-secondary);
    margin-right: 3px;
}

.dark-mode .relationship-type-label {
    color: rgba(195,177,133,0.75);
}

/* --- Book appearance items in info box --- */
.book-appearance-item {
    display: block;
    margin-bottom: 4px;
}

.book-appearance-item:last-child {
    margin-bottom: 0;
}

.info-book-link {
    color: var(--primary-color);
    text-decoration: none;
    font-family: var(--font-serif);
    transition: opacity 0.2s ease;
}

.dark-mode .info-book-link {
    color: #FFD700;
}

.info-book-link:hover {
    opacity: 0.75;
    text-decoration: underline;
}

.book-role-note {
    display: inline-block;
    font-family: var(--font-header);
    font-size: 0.7em;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--secondary-color);
    background-color: rgba(69,35,69,0.08);
    border: 1px solid rgba(69,35,69,0.2);
    border-radius: 10px;
    padding: 1px 7px;
    margin-left: 6px;
    vertical-align: middle;
}

.dark-mode .book-role-note {
    color: #FFD700;
    background-color: rgba(255,215,0,0.08);
    border-color: rgba(255,215,0,0.25);
}

.book-age-note {
    font-family: var(--font-body);
    font-size: 0.85em;
    color: var(--text-secondary);
    font-style: italic;
    margin-left: 4px;
}

/* --- Character Info Box (sits beside portrait) --- */
.character-info-box {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;         /* clips child corners to border-radius */
    box-shadow: 0 2px 10px rgba(0,0,0,0.18);
    border: 1px solid rgba(69,35,69,0.2);
}

.dark-mode .character-info-box {
    border-color: rgba(255,215,0,0.2);
}

.character-info-box-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, #6b3a6b 100%);
    color: #FFD700;
    font-family: var(--font-display);
    font-size: 0.85em;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-align: center;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,215,0,0.25);
}

.character-info-list {
    background-color: var(--bg-color);
    padding: 10px 0;
    margin: 0;
}

.character-info-row {
    display: flex;
    flex-direction: column;
    padding: 9px 16px;
    border-bottom: 1px solid rgba(69,35,69,0.1);
}

.dark-mode .character-info-row {
    border-bottom-color: rgba(255,215,0,0.1);
}

.character-info-row:last-child {
    border-bottom: none;
}

.character-info-row dt {
    font-family: var(--font-header);
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 2px;
}

.dark-mode .character-info-row dt {
    color: rgba(195,177,133,0.7);
}

.character-info-row dd {
    font-family: var(--font-serif);
    font-size: 0.95em;
    color: var(--text-color);
    margin: 0;
    line-height: 1.4;
}

/* Narrow screens: portrait → info box → description */
@media (max-width: 600px) {
    .character-detail-content {
        flex-direction: column;
        align-items: center;
    }
    .character-detail-left {
        width: 100%;
        max-width: 300px;
    }
    .character-detail-description {
        width: 100%;
    }
    .character-family-box {
        width: 100%;
    }
}

/* --- Styles for the "Back" button --- */
.back-button {
    background-color: var(--secondary-color);
    color: var(--button-text-color-light-mode); /* <-- Use the new variable here */
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    margin-bottom: 20px;
    display: inline-block;
    transition: background-color 0.2s ease;
}

.back-button:hover {
    background-color: var(--primary-color); /* Darker blue on hover */
}

/* Make list items indicate they are clickable */
.character-list-item {
    /* ... existing styles ... */
    cursor: pointer; /* Change cursor to pointer on hover */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Smooth hover effects */
}

.character-list-item:hover {
    transform: translateY(-3px); /* Slight lift effect */
    box-shadow: 0 4px 10px rgba(0,0,0,0.2); /* More prominent shadow */
}

/* --- Home Screen Buttons --- */
.home-buttons-wrap {
    display: flex;
    justify-content: center;
}

.home-buttons {
    display: inline-flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 30px;
}

.action-button {
    background-color: var(--primary-color);
    color: var(--button-text-color-light-mode);
    padding: 15px 30px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.2em;
    font-family: var(--font-header);
    letter-spacing: 0.05em;
    transition: background-color 0.2s ease, transform 0.2s ease;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}

.action-button:hover {
    background-color: var(--secondary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Ensure character-detail-name looks right */
h1.character-detail-name {
    margin-bottom: 20px; /* Add some space below the character name */
    text-align: center; /* Center the character name on detail page */
}

/* --- Quiz Specific Styles --- */
.quiz-container {
    background-color: var(--surface-color);
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    max-width: 700px;
    margin: 30px auto;
    text-align: center;
}

.quiz-container .question-number {
    font-size: 0.9em;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.quiz-container .quiz-question-text {
    font-family: var(--font-header);
    font-size: 1.8em;
    color: var(--text-color);
    margin-bottom: 30px;
    line-height: 1.3;
}

.quiz-answers {
    display: flex;
    flex-direction: column; /* Stack buttons vertically */
    gap: 15px; /* Space between answer buttons */
    margin-bottom: 30px;
}

/* --- Quiz Answer Buttons --- */
.quiz-answer-button {
    background-color: var(--primary-color);
    color: var(--button-text-color-light-mode); /* <-- Use the new variable here */
    padding: 15px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.1em;
    text-align: left;
    transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
}

.quiz-answer-button:hover {
    background-color: var(--secondary-color);
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.quiz-answer-button.selected {
    background-color: var(--secondary-color); /* Highlight for selected answer */
    box-shadow: inset 0 0 0 2px var(--text-color); /* Inner border to show selection */
    font-weight: bold;
}

.quiz-short-answer-input {
    width: calc(100% - 40px); /* Adjust width to fit container with padding */
    min-height: 100px;
    padding: 15px;
    border: 2px solid var(--text-secondary);
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 1em;
    color: var(--text-color);
    background-color: var(--bg-color); /* Use background color from theme */
    resize: vertical; /* Allow vertical resizing */
    margin-bottom: 30px;
}

.quiz-short-answer-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-color), 0.3); /* Subtle focus ring */
}

.quiz-navigation {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.quiz-nav-button {
    flex-grow: 1; /* Make buttons expand to fill space */
    padding: 12px 20px;
    font-size: 1em;
    text-transform: uppercase;
    background-color: var(--secondary-color); /* Use the magenta for background */
    color: var(--quiz-nav-button-text-light-mode); /* Use the new light text color */
}

/* Specific styling for the back button in quiz view */
#back-to-quiz-home-btn {
    margin-bottom: 20px;
}

/* Adjust hover state specifically for quiz navigation buttons */
.quiz-nav-button:hover {
    background-color: var(--primary-color); /* Hover to the primary blue */
    transform: translateY(-2px); /* Keep the subtle lift effect */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Keep the shadow effect */
}

/* Optional: Ensure specific disabled state is clear */
.quiz-nav-button:disabled {
    opacity: 0.5; /* Fade out disabled buttons */
    cursor: not-allowed;
}

/* --- Quiz Results and Loading Styles --- */
.quiz-results-loading {
    text-align: center;
    padding: 50px 20px;
    color: var(--text-color);
}

.quiz-results-loading h2 {
    font-size: 2em;
    margin-bottom: 15px;
}

.quiz-results-loading p {
    font-size: 1.1em;
    color: var(--text-secondary);
}

/* Simple Loading Spinner (adjust as desired) */
.loading-spinner {
    border: 5px solid var(--surface-color);
    border-top: 5px solid var(--primary-color);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 30px auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.quiz-results {
    background-color: var(--surface-color);
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    max-width: 800px;
    margin: 30px auto;
    text-align: left; /* Gemini's text might be better left-aligned */
}

.quiz-results h1 {
    font-family: var(--font-header);
    font-size: 2.2em;
    color: var(--primary-color);
    margin-bottom: 25px;
    text-align: center; /* Keep the main result title centered */
}

.quiz-results .gemini-response-content {
    font-family: var(--font-body);
    font-size: 1.1em;
    line-height: 1.6;
    color: var(--text-color);
    white-space: pre-wrap; /* Preserves whitespace and line breaks from Gemini's response */
}

.quiz-results.error-message {
    border: 2px solid #e74c3c; /* Red border for errors */
    background-color: #fce4e4; /* Light red background */
    color: #c0392b; /* Dark red text */
    text-align: center;
}
.quiz-results.error-message h1 {
    color: #e74c3c;
}
.quiz-results.error-message p {
    color: #c0392b;
}

/* Ensure the back button is visible above results */
.quiz-results + .back-button {
    margin-top: 20px;
}
.match-portrait-container {
    text-align: center;
    margin: 20px 0;
}

.match-portrait {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid gold;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
}

/* --- Quiz Match Character Name --- */
.match-character-name {
    font-family: var(--font-display);
    font-size: 2.2em;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    text-align: center;
    display: block;
    margin: 15px auto 5px auto;
    background-image: linear-gradient(
        to right,
        #FFD700 0%,
        #DAA520 25%,
        #B8860B 50%,
        #DAA520 75%,
        #FFD700 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.4));
}

/* =================================================================================
   Oram Calendar Converter Styles
   ================================================================================= */

.calendar-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 10px;
}

.calendar-today-panel {
    background: linear-gradient(135deg, var(--primary-color) 0%, #6b3a6b 100%);
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 30px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    border: 1px solid rgba(255,215,0,0.3);
}

.calendar-today-panel .today-label {
    font-family: var(--font-header);
    font-size: 0.85em;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255,215,0,0.7);
    margin-bottom: 8px;
}

.calendar-today-panel .today-earth {
    font-family: var(--font-display);
    font-size: 1.4em;
    color: #f5f0e1;
    margin-bottom: 6px;
    letter-spacing: 0.05em;
}

.calendar-today-panel .today-divider {
    font-size: 1.5em;
    margin: 8px 0;
    opacity: 0.6;
    color: #FFD700;
}

.calendar-today-panel .today-oram {
    font-family: var(--font-display);
    font-size: 1.6em;
    letter-spacing: 0.08em;
    background-image: linear-gradient(to right, #FFD700 0%, #DAA520 25%, #B8860B 50%, #DAA520 75%, #FFD700 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.5));
}

.calendar-today-panel .today-season {
    font-family: var(--font-serif);
    font-size: 1em;
    color: rgba(255,215,0,0.8);
    margin-top: 6px;
    font-style: italic;
}

.calendar-today-panel .today-special,
.converter-result .birthday-message {
    font-family: var(--font-header);
    font-size: 1em;
    color: #FFD700;
    margin-top: 10px;
    padding: 8px 15px;
    border: 1px solid rgba(255,215,0,0.4);
    border-radius: 20px;
    display: inline-block;
    background: rgba(255,215,0,0.1);
    letter-spacing: 0.05em;
}

.calendar-converters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

@media (max-width: 600px) {
    .calendar-converters {
        grid-template-columns: 1fr;
    }
}

.converter-panel {
    background-color: var(--bg-color);
    border-radius: 12px;
    padding: 22px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    border: 1px solid rgba(69,35,69,0.2);
}

.converter-panel h3 {
    font-family: var(--font-display);
    font-size: 1em;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--primary-color);
    margin-bottom: 18px;
    text-align: center;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(69,35,69,0.2);
}

.dark-mode .converter-panel h3 {
    color: #FFD700;
    border-bottom-color: rgba(255,215,0,0.2);
}

.converter-panel label {
    display: block;
    font-family: var(--font-header);
    font-size: 0.8em;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 5px;
    margin-top: 12px;
}

.converter-panel input[type="date"],
.converter-panel select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(69,35,69,0.3);
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: 1em;
    color: var(--text-color);
    background-color: var(--surface-color);
    cursor: pointer;
    box-sizing: border-box;
}

.dark-mode .converter-panel input[type="date"],
.dark-mode .converter-panel select {
    border-color: rgba(255,215,0,0.2);
    background-color: var(--secondary-color);
    color: var(--text-color);
}

.converter-panel .convert-btn {
    width: 100%;
    margin-top: 16px;
    padding: 12px;
    background: linear-gradient(135deg, var(--primary-color), #6b3a6b);
    color: #FFD700;
    border: none;
    border-radius: 8px;
    font-family: var(--font-header);
    font-size: 0.9em;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.converter-panel .convert-btn:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}

.converter-result {
    margin-top: 16px;
    padding: 14px;
    background: linear-gradient(135deg, var(--primary-color) 0%, #6b3a6b 100%);
    border-radius: 8px;
    text-align: center;
    display: none;
}

.converter-result.visible {
    display: block;
}

.converter-result .result-date {
    font-family: var(--font-display);
    font-size: 1.2em;
    letter-spacing: 0.08em;
    background-image: linear-gradient(to right, #FFD700 0%, #DAA520 50%, #FFD700 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.5));
}

.converter-result .result-season {
    font-family: var(--font-serif);
    font-size: 0.85em;
    color: rgba(255,215,0,0.75);
    margin-top: 4px;
    font-style: italic;
}

.converter-result .result-special {
    font-family: var(--font-header);
    font-size: 0.85em;
    color: #FFD700;
    margin-top: 8px;
    padding: 5px 10px;
    border: 1px solid rgba(255,215,0,0.4);
    border-radius: 12px;
    display: inline-block;
    background: rgba(255,215,0,0.1);
}

.oram-day-select {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* --- Download Buttons --- */
.download-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 25px;
    flex-wrap: wrap;
}

.download-btn {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-family: var(--font-header);
    font-size: 1em;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    min-width: 200px;
}

.download-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

.pdf-btn {
    background: linear-gradient(135deg, var(--primary-color), #6b3a6b);
    color: #FFD700;
    border: 1px solid rgba(255,215,0,0.3);
}

.share-btn {
    background: linear-gradient(135deg, #B8860B, #DAA520);
    color: #2d2e49;
    font-weight: bold;
}

.download-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

@media (max-width: 480px) {
    .download-buttons {
        flex-direction: column;
        align-items: center;
    }
    .download-btn {
        width: 100%;
    }
}

/* --- Quiz Match Goes By and Aliases --- */
.match-goes-by,
.match-aliases {
    font-family: var(--font-serif);
    font-size: 0.95em;
    color: var(--text-secondary);
    text-align: center;
    margin: 3px 0;
}

.match-goes-by em,
.match-aliases em {
    font-style: normal;
    font-weight: 600;
    color: #FFD700;
    -webkit-text-fill-color: #FFD700;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

/* =================================================================================
   Character List — Structured (Collection / Saga / Book / Role) Styles
   ================================================================================= */

.character-list-structured {
    margin-top: 20px;
}

/* ── Collection level (top) ── */
.collection-section {
    margin-bottom: 60px;
}

.collection-header {
    font-family: var(--font-display);
    font-size: 2em;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--primary-color);
    text-align: center;
    padding-bottom: 12px;
    border-bottom: 3px solid var(--primary-color);
    margin-bottom: 35px;
}

.dark-mode .collection-header {
    color: #FFD700;
    border-bottom-color: rgba(255, 215, 0, 0.5);
}

.collection-header a,
.saga-header a,
.book-header a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.collection-header a:hover,
.saga-header a:hover,
.book-header a:hover {
    opacity: 0.75;
    text-decoration: underline;
}

/* ── Saga level ── */
.saga-section {
    margin-bottom: 45px;
    padding-left: 8px;
}

.saga-header {
    font-family: var(--font-display);
    font-size: 1.5em;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--primary-color);
    text-align: left;
    padding-bottom: 8px;
    border-bottom: 2px solid rgba(69, 35, 69, 0.35);
    margin-bottom: 25px;
}

.dark-mode .saga-header {
    color: #FFD700;
    border-bottom-color: rgba(255, 215, 0, 0.35);
}

/* ── Book level ── */
.book-section {
    margin-bottom: 35px;
    padding-left: 12px;
    border-left: 3px solid var(--surface-color);
}

.dark-mode .book-section {
    border-left-color: rgba(255, 215, 0, 0.2);
}

.book-header {
    font-family: var(--font-display);
    font-size: 1.6em;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--primary-color);
    text-align: left;
    margin-bottom: 16px;
    padding: 8px 0 6px 0;
    border-bottom: 1px solid rgba(69, 35, 69, 0.2);
}

.dark-mode .book-header {
    color: #FFD700;
    border-bottom-color: rgba(255, 215, 0, 0.2);
}

.coming-soon-label {
    font-family: var(--font-header);
    font-size: 0.4em;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--secondary-color);
    background-color: var(--bg-color);
    border: 1px solid var(--secondary-color);
    border-radius: 20px;
    padding: 3px 12px;
    margin-left: 12px;
    vertical-align: middle;
    white-space: nowrap;
}

.dark-mode .coming-soon-label {
    color: #FFD700;
    border-color: rgba(255, 215, 0, 0.5);
    background-color: rgba(255, 215, 0, 0.08);
}

/* ── Role level ── */
.role-section {
    margin-bottom: 20px;
}

.role-label {
    font-family: var(--font-header);
    font-size: 0.8em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--text-secondary);
    text-align: left;
    margin-bottom: 10px;
    padding-bottom: 4px;
    border-bottom: 1px dashed rgba(69, 35, 69, 0.2);
}

.dark-mode .role-label {
    color: rgba(195, 177, 133, 0.7);
    border-bottom-color: rgba(255, 215, 0, 0.15);
}

.role-section .character-list-grid {
    margin-top: 0;
}

/* =================================================================================
   Character List — View Tabs (Profiles / A–Z Index)
   ================================================================================= */

.char-list-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 28px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.char-list-tab {
    flex: 1;
    padding: 12px 20px;
    border: none;
    cursor: pointer;
    font-family: var(--font-header);
    font-size: 0.95em;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: background-color 0.2s ease, color 0.2s ease;
    /* Inactive tab: lavender / secondary color */
    background-color: var(--secondary-color);
    color: var(--quiz-nav-button-text-light-mode);
}

.char-list-tab:hover:not(.active) {
    background-color: var(--primary-color);
    color: var(--button-text-color-light-mode);
}

.char-list-tab.active {
    /* Active tab: dark purple / primary color */
    background-color: var(--primary-color);
    color: var(--button-text-color-light-mode);
    cursor: default;
}

.dark-mode .char-list-tab {
    color: #c3b185;
}

.dark-mode .char-list-tab.active {
    color: #FFD700;
}

/* =================================================================================
   A–Z Index View
   ================================================================================= */

.char-index-jump-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    margin-bottom: 24px;
    padding: 14px 16px;
    background: linear-gradient(135deg, var(--primary-color) 0%, #6b3a6b 100%);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.jump-bar-letter {
    background: none;
    border: 1px solid rgba(255,215,0,0.3);
    border-radius: 4px;
    color: rgba(255,215,0,0.75);
    font-family: var(--font-header);
    font-size: 0.85em;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 4px 8px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    min-width: 30px;
    text-align: center;
}

.jump-bar-letter:hover {
    background-color: rgba(255,215,0,0.18);
    color: #FFD700;
    border-color: rgba(255,215,0,0.6);
}

.jump-bar-letter.disabled {
    opacity: 0.28;
    cursor: default;
    pointer-events: none;
}

/* Letter section heading in the index */
.char-index-letter-heading {
    font-family: var(--font-display);
    font-size: 1.6em;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--primary-color);
    border-bottom: 2px solid rgba(69,35,69,0.3);
    padding-bottom: 4px;
    margin: 28px 0 10px 0;
    scroll-margin-top: 80px; /* clears sticky header */
}

.dark-mode .char-index-letter-heading {
    color: #FFD700;
    border-bottom-color: rgba(255,215,0,0.35);
}

.char-index-letter-heading:first-child {
    margin-top: 0;
}

/* Individual name row */
.char-index-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 7px 6px;
    border-bottom: 1px solid rgba(69,35,69,0.08);
    transition: background-color 0.15s ease;
    border-radius: 4px;
}

.dark-mode .char-index-row {
    border-bottom-color: rgba(255,215,0,0.08);
}

.char-index-row:hover {
    background-color: rgba(69,35,69,0.06);
}

.dark-mode .char-index-row:hover {
    background-color: rgba(255,215,0,0.06);
}

.char-index-link {
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font-header);
    font-size: 1.05em;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--primary-color);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: rgba(69,35,69,0.3);
    transition: opacity 0.2s ease;
    text-align: left;
}

.dark-mode .char-index-link {
    color: #FFD700;
    text-decoration-color: rgba(255,215,0,0.35);
}

.char-index-link:hover {
    opacity: 0.7;
}

.char-index-full-name {
    font-family: var(--font-serif);
    font-size: 0.88em;
    font-style: italic;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dark-mode .char-index-full-name {
    color: rgba(195,177,133,0.65);
}

/* New Characters banner (book 2+) */
.new-characters-banner {
    font-family: var(--font-header);
    font-size: 0.9em;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--secondary-color);
    text-align: left;
    margin: 0 0 16px 0;
}

.dark-mode .new-characters-banner {
    color: #FFD700;
}

/* =================================================================================
   App Footer
   ================================================================================= */

#app-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 24px;
    background: linear-gradient(135deg, var(--primary-color) 0%, #6b3a6b 100%);
    margin-top: 40px;
    gap: 16px;
}

.dark-mode #app-footer {
    background: linear-gradient(135deg, #1a1a2e 0%, #2d2e49 100%);
    border-top: 1px solid rgba(255, 215, 0, 0.15);
}

.footer-logo-wrap {
    display: flex;
    align-items: center;
    flex: 1;
}

.footer-logo-img {
    height: 28px;
    width: auto;
    opacity: 0.88;
}

.footer-copyright {
    font-family: var(--font-header);
    font-size: 0.82em;
    letter-spacing: 0.08em;
    color: rgba(255, 215, 0, 0.8);
    white-space: nowrap;
}

.footer-about-link {
    background: none;
    border: 1px solid rgba(255, 215, 0, 0.35);
    border-radius: 4px;
    color: rgba(255, 215, 0, 0.75);
    font-family: var(--font-header);
    font-size: 0.82em;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 4px 12px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
}

.footer-about-link:hover {
    background-color: rgba(255, 215, 0, 0.15);
    color: #FFD700;
    border-color: rgba(255, 215, 0, 0.6);
}

/* =================================================================================
   About Modal
   ================================================================================= */

#about-modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

#about-modal {
    background-color: var(--bg-color);
    border-radius: 10px;
    max-width: 480px;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.about-modal-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, #6b3a6b 100%);
    color: #FFD700;
    font-family: var(--font-display);
    font-size: 1.2em;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
    padding: 16px 24px;
}

.about-modal-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.about-modal-body p {
    font-family: var(--font-serif);
    font-size: 1em;
    color: var(--text-color);
    line-height: 1.65;
}

.about-modal-body a {
    color: var(--primary-color);
    font-weight: 700;
}

.dark-mode .about-modal-body a {
    color: #FFD700;
}

.about-modal-close {
    display: block;
    width: calc(100% - 48px);
    margin: 0 24px 20px;
    padding: 10px;
    background-color: var(--primary-color);
    color: #FFD700;
    font-family: var(--font-header);
    font-size: 0.9em;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.about-modal-close:hover {
    opacity: 0.85;
}

/* =================================================================================
   Quiz Disclaimer
   ================================================================================= */

.quiz-disclaimer {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.82em;
    color: var(--text-secondary);
    text-align: center;
    margin-top: 16px;
    opacity: 0.8;
}
/* =================================================================================
   Moon Tracker Styles
   Add these to the bottom of style.css (or after the Calendar Converter section)
   ================================================================================= */

/* ── Input panel ─────────────────────────────────────────────────────────────── */

.moon-tracker-input-panel {
    margin-bottom: 24px;
}

.moon-tracker-inputs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 4px;
}

@media (max-width: 700px) {
    .moon-tracker-inputs {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 400px) {
    .moon-tracker-inputs {
        grid-template-columns: 1fr;
    }
}

/* Location row — centered, full-width feel, above the date inputs */
.mt-location-row {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.moon-input-group--location {
    width: 100%;
    max-width: 320px;
    text-align: center;
}

.mt-input--location {
    width: 100%;
    text-align: center;
}

.moon-input-group {
    display: flex;
    flex-direction: column;
}

.mt-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(69,35,69,0.3);
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: 1em;
    color: var(--text-color);
    background-color: var(--surface-color);
    cursor: pointer;
    box-sizing: border-box;
}

.dark-mode .mt-input {
    border-color: rgba(255,215,0,0.2);
    background-color: var(--secondary-color);
    color: var(--text-color);
}

/* ── Sky diagram ─────────────────────────────────────────────────────────────── */

.moon-sky-diagram {
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
    border: 1px solid rgba(255,215,0,0.15);
    background: #0a0818;
}

/* ── Moon cards grid ─────────────────────────────────────────────────────────── */

.moon-tracker-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

@media (max-width: 700px) {
    .moon-tracker-cards {
        grid-template-columns: 1fr;
    }
}

.moon-card {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--moon-color, #452345) 35%, transparent);
    background-color: var(--bg-color);
    box-shadow: 0 2px 10px rgba(0,0,0,0.12);
    transition: box-shadow 0.15s ease;
}

.moon-card:hover {
    box-shadow: 0 4px 18px rgba(0,0,0,0.2);
}



.moon-card-header {
    font-family: var(--font-display);
    font-size: 1.1em;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 12px 16px 10px;
    background: linear-gradient(135deg, var(--primary-color) 0%, #6b3a6b 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.dark-mode .moon-card-header {
    background: linear-gradient(135deg, #1a1535 0%, #2d1850 100%);
}

.moon-card-badge {
    font-family: var(--font-header);
    font-size: 0.65em;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    border-radius: 10px;
    text-transform: uppercase;
}

.badge--night {
    background: rgba(255,215,0,0.2);
    color: #FFD700;
    border: 1px solid rgba(255,215,0,0.4);
}

.badge--day {
    background: rgba(150,150,160,0.2);
    color: rgba(200,200,210,0.8);
    border: 1px solid rgba(150,150,160,0.3);
}

.badge--daysky {
    background: rgba(135,206,235,0.2);
    color: #87ceeb;
    border: 1px solid rgba(135,206,235,0.4);
}

.moon-card-body {
    padding: 14px 16px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.moon-phase-icon {
    flex-shrink: 0;
    line-height: 0;
}

.moon-phase-icon svg {
    display: block;
}

.moon-card-details {
    flex: 1;
    min-width: 0;
}

.moon-stat {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 6px;
    padding: 4px 0;
    border-bottom: 1px solid rgba(69,35,69,0.08);
    font-size: 0.82em;
}

.dark-mode .moon-stat {
    border-bottom-color: rgba(255,215,0,0.07);
}

.moon-stat:last-child {
    border-bottom: none;
}

.moon-stat-label {
    font-family: var(--font-header);
    font-size: 0.85em;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.moon-stat-value {
    font-family: var(--font-serif);
    color: var(--text-color);
    text-align: right;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.moon-visibility {
    font-style: italic;
    font-size: 0.92em;
    opacity: 0.85;
}

/* Illumination bar */
.illum-bar-wrap {
    display: inline-block;
    width: 48px;
    height: 6px;
    background: rgba(69,35,69,0.15);
    border-radius: 3px;
    overflow: hidden;
    vertical-align: middle;
}

.dark-mode .illum-bar-wrap {
    background: rgba(255,215,0,0.1);
}

.illum-bar {
    display: block;
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
}

.moon-card-footer {
    font-family: var(--font-header);
    font-size: 0.72em;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    text-align: center;
    padding: 8px 14px;
    border-top: 1px solid rgba(69,35,69,0.1);
    background: rgba(69,35,69,0.03);
}

.dark-mode .moon-card-footer {
    border-top-color: rgba(255,215,0,0.06);
}

/* ── Events panel ────────────────────────────────────────────────────────────── */

.moon-tracker-events {
    margin-bottom: 20px;
}

.moon-events-title {
    font-family: var(--font-display);
    font-size: 0.95em;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--primary-color);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(69,35,69,0.2);
}

.dark-mode .moon-events-title {
    color: #FFD700;
    border-bottom-color: rgba(255,215,0,0.2);
}

.moon-events-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 500px) {
    .moon-events-grid {
        grid-template-columns: 1fr;
    }
}

.moon-event {
    border-radius: 10px;
    padding: 16px 18px;
    text-align: center;
    border: 1px solid;
}

.moon-event--dark {
    background: linear-gradient(135deg, #0a0818, #1a1535);
    border-color: rgba(140,120,200,0.3);
}

.moon-event--bright {
    background: linear-gradient(135deg, #1a1010, #2d1810);
    border-color: rgba(255,215,0,0.3);
}

.moon-event-icon {
    font-size: 1.6em;
    margin-bottom: 6px;
}

.moon-event-label {
    font-family: var(--font-display);
    font-size: 0.85em;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,215,0,0.7);
    margin-bottom: 6px;
}

.moon-event-date {
    font-family: var(--font-serif);
    font-size: 1em;
    background-image: linear-gradient(to right, #FFD700, #DAA520, #FFD700);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
    margin-bottom: 4px;
}

.moon-event-away {
    font-family: var(--font-header);
    font-size: 0.78em;
    letter-spacing: 0.08em;
    color: rgba(255,215,0,0.5);
    text-transform: uppercase;
}

/* ── Moon Tracker — city label above sky diagram ───────────────────────── */
.mt-city-label {
    font-family: var(--font-display);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 215, 0, 0.65);
    text-align: center;
    margin: 0 0 10px;
    padding: 5px 12px;
    background: rgba(255, 215, 0, 0.06);
    border-radius: 4px;
    border: 1px solid rgba(255, 215, 0, 0.12);
}

/* ── World Map — base structure ─────────────────────────────────────────── */
.map-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

.map-base-img {
    width: 100%;
    height: auto;
    display: block;
}

.map-overlay-container {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
}

.map-tooltip {
    position: absolute;
    background: rgba(20, 14, 35, 0.88);
    color: #e0d0c0;
    font-family: var(--font-serif);
    font-size: 0.85rem;
    padding: 5px 10px;
    border-radius: 4px;
    pointer-events: none;
    display: none;
    z-index: 20;
    border: 1px solid rgba(255, 215, 0, 0.25);
}

/* ── World Map — city pins ──────────────────────────────────────────────── */
.map-city-pin {
    position: absolute;
    transform: translate(-50%, -100%);
    pointer-events: all;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    z-index: 10;
    cursor: pointer;
}

.map-city-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e87a5a;
    border: 2px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    transition: transform 0.15s ease;
}

.map-city-pin--capital .map-city-dot {
    background: #b89acf;
    width: 10px;
    height: 10px;
}

.map-city-pin:hover .map-city-dot {
    transform: scale(1.35);
}

.map-city-label {
    font-family: var(--font-display);
    font-size: 0.62rem;
    letter-spacing: 0.04em;
    color: #fff;
    background: rgba(12, 8, 20, 0.82);
    padding: 2px 5px;
    border-radius: 3px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    margin-bottom: 2px;
    order: -1;
}

.map-city-pin:hover .map-city-label {
    opacity: 1;
}