/* ==========================================================================
   Reset and Base Styles
   ========================================================================== */

/* Resets default margins, padding, and box-sizing for all elements to ensure consistent layout across browsers */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Includes padding and borders in element dimensions, preventing layout bloat */
}

/* Defines base styling for the body, setting a dark theme and fallback typography */
body {
    font-family: "Arial", sans-serif; /* Fallback font for broad compatibility, overridden by custom fonts where specified */
    background: #0d0d0d; /* Dark background for a medieval fantasy aesthetic */
    color: #e6e6e6; /* Light text color for high contrast against dark background */
    line-height: 1.6; /* Spacious line height for improved readability */
    overflow-x: hidden; /* Prevents horizontal scrolling issues, ensuring a clean layout on all devices */
}

/* ==========================================================================
   Typography and Fonts
   ========================================================================== */

/* Imports custom fonts from Google Fonts for a medieval aesthetic, optimized for performance */
@import url("https://fonts.googleapis.com/css2?family=MedievalSharp&display=swap"); /* MedievalSharp: Handwritten medieval style for desktop */
@import url("https://fonts.googleapis.com/css2?family=Garamond&display=swap"); /* Garamond: Readable serif font for mobile */

/* Styles headings and navigation links with MedievalSharp for desktop, ensuring thematic consistency */
h1,
h2,
.tagline,
nav a,
.dropbtn,
.dropdown-content a,
.update h3,
.document h3,
.location h3 {
    font-family: "MedievalSharp", cursive, Arial; /* MedievalSharp primary, with Arial fallback */
    font-weight: 400; /* Normal weight for clarity, avoiding overly bold distortion */
}

/* Applies MedievalSharp to body text in specific sections for desktop consistency */
.update .date,
.document p,
.location p {
    font-family: "MedievalSharp", cursive, Arial; /* MedievalSharp for thematic body text, with Arial fallback */
    font-weight: 400; /* Normal weight for readability */
}

/* ==========================================================================
   Header and Hero Styling
   ========================================================================== */

/* Styles the header as a full-screen container for background media and hero content */
header {
    height: 100vh; /* Full viewport height for an immersive experience */
    display: flex;
    flex-direction: column; /* Stacks children vertically */
    align-items: center; /* Centers content horizontally */
    position: relative; /* Allows absolute positioning of children */
    overflow: hidden; /* Prevents media overflow from breaking layout */
}

/* Positions the header media (video/image) below the fixed navigation */
.header-media {
    position: absolute;
    top: 4rem; /* Offset to account for fixed nav height */
    left: 0;
    width: 100%; /* Full width for background coverage */
    height: calc(100% - 4rem); /* Adjusts height to fit below nav */
    z-index: 0; /* Places media behind navigation and hero */
}

/* Styles header video for full coverage with a fade-in animation */
header video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures video fills space without distortion */
    animation: fadeIn 2s ease-in; /* Smooth fade-in for visual appeal */
    display: none; /* Hidden by default, shown by script when loaded */
}

/* Styles fallback image for header, visible until video loads */
header img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image fills space without distortion */
    animation: fadeIn 2s ease-in; /* Smooth fade-in for consistency */
    display: block; /* Visible by default, hidden by script if video loads */
}

/* Defines fade-in animation for header media */
@keyframes fadeIn {
    from {
        opacity: 0;
    } /* Starts fully transparent */
    to {
        opacity: 1;
    } /* Ends fully opaque */
}

/* Styles the hero overlay for titles and taglines with a medieval theme */
.hero {
    background: rgba(
        0,
        0,
        0,
        0.7
    ); /* Semi-transparent dark overlay for text readability */
    padding: 2.5rem; /* Generous padding for a framed look */
    border-radius: 15px; /* Rounded corners for a polished medieval style */
    animation: slideUp 1s ease-out; /* Slide-up animation for entry effect */
    position: relative;
    z-index: 1; /* Places hero above media layer */
    margin-top: 60vh; /* Positions below nav, centered vertically on desktop */
    width: 80%; /* Limits width for readability */
    max-width: 800px; /* Caps width for large screens */
}

/* Adjusts hero positioning for specific pages on desktop */
.hero.index,
.hero.updates,
.hero.documents,
.hero.locations,
.hero.spireofdawn,
.hero.livingjungle {
    margin-top: 60vh; /* Consistent vertical positioning across pages */
}

/* Defines slide-up animation for hero section */
@keyframes slideUp {
    from {
        transform: translateY(50px); /* Starts 50px below final position */
        opacity: 0; /* Starts fully transparent */
    }
    to {
        transform: translateY(0); /* Ends at natural position */
        opacity: 1; /* Ends fully opaque */
    }
}

/* Styles main headings with a bold, thematic appearance */
h1 {
    font-size: 4rem; /* Large size for prominent titles */
    color: #d4a017; /* Gold color for medieval flair */
    text-shadow: 3px 3px 6px #000; /* Deep shadow for depth and contrast */
}

/* Styles taglines as supporting text under headings */
.tagline {
    font-size: 1.8rem; /* Smaller but still prominent */
    margin: 1rem 0; /* Vertical spacing for hierarchy */
}

/* ==========================================================================
   Navigation Styling
   ========================================================================== */

/* Styles the fixed navigation bar for consistent visibility */
nav {
    position: fixed;
    top: 0;
    width: 100%; /* Full width across the top */
    background: rgba(0, 0, 0, 0.9); /* Dark, semi-transparent background */
    padding: 1rem 0; /* Vertical padding for spacing */
    z-index: 1000; /* High z-index to stay above content, below burger toggle */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.7); /* Subtle shadow for depth */
}

/* Hides checkbox inputs for mobile menu toggles */
.nav-toggle,
.world-toggle {
    display: none; /* Hidden, controlled by labels for mobile navigation */
}

/* Styles the hamburger menu toggle label, hidden on desktop */
.nav-toggle-label {
    display: none; /* Visible only on mobile via media query */
    position: absolute;
    top: 1rem;
    right: 1rem;
    cursor: pointer;
    z-index: 1002; /* Above all elements for accessibility */
    padding: 0.5rem; /* Padding for tap area */
    background: transparent; /* No background, just lines */
}

/* Styles hamburger menu lines with thematic gold color */
.nav-toggle-label span {
    display: block;
    width: 30px; /* Width of each line */
    height: 4px; /* Thickness of each line */
    background: #d4a017; /* Gold color matching theme */
    margin: 6px 0; /* Spacing between lines */
    transition: all 0.3s ease; /* Smooth animation for toggle effect */
    z-index: 1003; /* Ensures visibility during toggle */
}

/* Styles the main navigation menu for desktop */
.main-menu {
    display: flex; /* Horizontal layout for desktop */
    justify-content: center; /* Centers menu items */
    gap: 2rem; /* Spacing between items */
    list-style: none; /* Removes default list bullets */
}

/* Styles navigation links with hover effects */
nav a {
    color: #e6e6e6; /* Light text for contrast */
    text-decoration: none; /* No underline by default */
    font-size: 1.3rem; /* Readable size for navigation */
    transition: color 0.3s, text-shadow 0.3s; /* Smooth hover transitions */
}

nav a:hover {
    color: #d4a017; /* Gold on hover for thematic highlight */
    text-shadow: 0 0 5px rgba(212, 160, 23, 0.8); /* Subtle glow effect */
}

/* Styles dropdown containers for nested navigation */
.dropdown {
    position: relative; /* Positions dropdown content relative to this */
}

/* Styles dropdown button (label for mobile toggle) */
.dropbtn {
    color: #e6e6e6; /* Light text for visibility */
    font-size: 1.3rem; /* Matches nav link size */
    padding: 0; /* No padding on desktop for clean look */
    display: block; /* Full clickable area */
    cursor: pointer; /* Indicates interactivity */
}

/* Styles dropdown menu, hidden by default */
.dropdown-content {
    display: none; /* Hidden until hovered or toggled */
    position: absolute;
    left: 50%; /* Centers horizontally */
    transform: translateX(-50%); /* Adjusts for true centering */
    background: rgba(0, 0, 0, 0.95); /* Dark, semi-transparent background */
    min-width: 180px; /* Ensures sufficient width for content */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6); /* Shadow for depth */
    border-radius: 5px; /* Rounded corners for polish */
    padding: 0.5rem 0; /* Vertical padding for spacing */
    z-index: 1001; /* Above nav, below burger toggle */
}

/* Shows dropdown content on hover for desktop */
.dropdown:hover .dropdown-content {
    display: block; /* Visible on hover */
}

/* Styles dropdown menu links */
.dropdown-content a {
    padding: 0.5rem 1rem; /* Padding for clickable area */
    font-size: 1.1rem; /* Slightly smaller than main nav */
    display: block; /* Full clickable area */
}

/* Hover effect for dropdown links */
.dropdown-content a:hover {
    background: rgba(212, 160, 23, 0.2); /* Subtle gold background on hover */
}

/* ==========================================================================
   General Content Sections
   ========================================================================== */

/* Styles generic sections for content blocks */
section {
    padding: 3rem 2rem; /* Spacious padding for readability */
    max-width: 1200px; /* Caps width for large screens */
    margin: 0 auto; /* Centers content horizontally */
}

/* Styles section headings with thematic prominence */
h2 {
    font-size: 2.8rem; /* Large size for emphasis */
    color: #d4a017; /* Gold color for medieval theme */
    text-align: center; /* Centered for visual balance */
    margin-bottom: 2rem; /* Space below for hierarchy */
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7); /* Deep shadow for depth */
}

/* ==========================================================================
   Document Grid Styling
   ========================================================================== */

/* Styles the document grid for organizing document cards */
.document-grid {
    display: grid; /* Grid layout for flexibility */
    gap: 2rem; /* Spacing between cards */
    padding: 1rem 0; /* Minimal padding for alignment */
}

/* Styles individual document cards */
.document {
    background: #1f1f1f; /* Dark background for contrast */
    padding: 2rem; /* Comfortable padding for content */
    border-radius: 15px; /* Rounded corners for polish */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6); /* Shadow for depth */
    transition: transform 0.3s, box-shadow 0.3s; /* Smooth hover effects */
}

/* Hover effect for document cards */
.document:hover {
    transform: translateY(-5px); /* Slight lift on hover */
    box-shadow: 0 12px 24px rgba(212, 160, 23, 0.3); /* Gold-tinted shadow */
}

/* Styles document thumbnail images */
.document-img {
    width: 100%;
    max-width: 200px; /* Consistent thumbnail size */
    height: auto; /* Maintains aspect ratio */
    border-radius: 10px; /* Rounded corners */
    border: 2px solid #d4a017; /* Gold border for theme */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); /* Subtle shadow */
    margin-bottom: 1rem; /* Space below image */
    transition: transform 0.3s, box-shadow 0.3s; /* Smooth hover effects */
}

/* Hover effect for document images */
.document:hover .document-img {
    transform: scale(1.05); /* Slight enlargement */
    box-shadow: 0 8px 16px rgba(212, 160, 23, 0.3); /* Enhanced shadow */
}

/* Styles document card headings */
.document h3 {
    font-size: 2rem; /* Prominent size for titles */
    color: #d4a017; /* Gold for theme */
    margin-bottom: 0.5rem; /* Space below */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Shadow for depth */
    text-transform: uppercase; /* Uppercase for emphasis */
}

/* Styles document card paragraphs */
.document p {
    font-size: 1.1rem; /* Readable size */
    color: #b0b0b0; /* Lighter grey for contrast */
    margin-bottom: 1rem; /* Space below */
}

/* Styles download buttons within document cards */
.download-btn {
    display: inline-block; /* Inline-block for natural flow */
    padding: 0.5rem 1rem; /* Compact padding for buttons */
    background: #d4a017; /* Gold background */
    color: #0d0d0d; /* Dark text for contrast */
    text-decoration: none; /* No underline */
    border-radius: 5px; /* Rounded corners */
    font-family: "MedievalSharp", cursive, Arial; /* Thematic font */
    font-weight: 400; /* Normal weight */
    transition: background 0.3s, transform 0.3s; /* Smooth hover effects */
}

/* Hover effect for download buttons */
.download-btn:hover {
    background: #f5c442; /* Lighter gold on hover */
    transform: translateY(-2px); /* Slight lift */
    box-shadow: 0 4px 8px rgba(212, 160, 23, 0.4); /* Subtle shadow */
}

/* ==========================================================================
   Location Grid Styling
   ========================================================================== */

/* Styles the location grid for summary pages */
.location-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two-column layout on desktop */
    gap: 2rem; /* Spacing between cards */
    padding: 1rem 0; /* Minimal padding */
}

/* Styles individual location cards */
.location {
    background: #1f1f1f; /* Dark background */
    padding: 2.5rem; /* Spacious padding */
    border-radius: 15px; /* Rounded corners */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6); /* Shadow for depth */
    transition: transform 0.3s, box-shadow 0.3s; /* Smooth hover effects */
    text-align: center; /* Centered content */
}

/* Hover effect for location cards */
.location:hover {
    transform: scale(1.05); /* Slight enlargement */
    box-shadow: 0 12px 24px rgba(212, 160, 23, 0.3); /* Gold-tinted shadow */
}

/* Styles location card images */
.location-img {
    width: 100%;
    height: 300px; /* Fixed height for consistency */
    object-fit: cover; /* Fills space without distortion */
    border-radius: 10px; /* Rounded corners */
    border: 2px solid #d4a017; /* Gold border */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); /* Subtle shadow */
    margin-bottom: 1rem; /* Space below */
    transition: transform 0.3s, box-shadow 0.3s; /* Smooth hover effects */
}

/* Hover effect for location images */
.location:hover .location-img {
    transform: scale(1.05); /* Slight enlargement */
    box-shadow: 0 8px 16px rgba(212, 160, 23, 0.3); /* Enhanced shadow */
}

/* Styles location card headings */
.location h3 {
    font-size: 1.8rem; /* Consistent with feature headings */
    color: #e6e6e6; /* Light text */
    margin: 1rem 0; /* Vertical spacing */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); /* Subtle shadow */
}

/* Styles location card paragraphs */
.location p {
    font-size: 1.1rem; /* Readable size */
    color: #b0b0b0; /* Lighter grey */
    line-height: 1.8; /* Spacious line height */
    margin-bottom: 1rem; /* Space below */
}

/* ==========================================================================
   Character Sheet Layout
   ========================================================================== */

/* Styles the character sheet section */
#character-sheet {
    padding: 2rem; /* Consistent padding */
    background: #0d0d0d; /* Dark background for theme */
}

/* Defines the two-column layout for character sheets */
.sheet-container {
    display: grid;
    grid-template-columns: 1fr 2fr; /* Left narrower, right wider for character layout */
    gap: 2rem; /* Spacing between columns */
    max-width: 1200px; /* Caps width */
    margin: 0 auto; /* Centers layout */
}

/* Styles the left column for character image and stats */
.left-column {
    display: flex;
    flex-direction: column; /* Stacks content vertically */
    align-items: center; /* Centers horizontally */
}

/* Styles the main character image */
.characterpage-img {
    width: 800px; /* Fixed width for desktop */
    height: 600px; /* Fixed height, 4:3 ratio */
    object-fit: cover; /* Fills space without distortion */
    border-radius: 10px; /* Rounded corners */
    border: 2px solid #d4a017; /* Gold border */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); /* Subtle shadow */
    margin-bottom: 1rem; /* Space below */
    transition: transform 0.3s, box-shadow 0.3s; /* Smooth hover effects */
}

/* Hover effect for character image */
.characterpage-img:hover {
    transform: scale(1.05); /* Slight enlargement */
    box-shadow: 0 8px 16px rgba(212, 160, 23, 0.3); /* Gold-tinted shadow */
}

/* Styles the stats box within the left column */
.stats-box {
    background: #1f1f1f; /* Dark background */
    border: 2px solid #d4a017; /* Gold border */
    padding: 1rem; /* Compact padding */
    border-radius: 10px; /* Rounded corners */
    width: 100%; /* Full column width */
    text-align: center; /* Centered text */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); /* Subtle shadow */
}

/* Styles stats box heading */
.stats-box h3 {
    font-family: "MedievalSharp", cursive; /* Thematic font */
    color: #d4a017; /* Gold text */
    margin-bottom: 1rem; /* Space below */
}

/* Styles stats box paragraphs */
.stats-box p {
    font-size: 1.2rem; /* Readable size */
    color: #e6e6e6; /* Light text */
    margin: 0.5rem 0; /* Vertical spacing */
}

/* Highlights stat labels in gold */
.stats-box p strong {
    color: #d4a017; /* Gold for emphasis */
}

/* ==========================================================================
   Location Sheet Layout
   ========================================================================== */

/* Styles the location sheet section */
#location-sheet {
    padding: 2rem; /* Consistent padding */
    background: #0d0d0d; /* Dark background */
}

/* Redefines sheet-container for location pages (overrides character sheet layout) */
.sheet-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Equal columns for location layout */
    gap: 2rem; /* Spacing between columns */
    max-width: 1200px; /* Caps width */
    margin: 0 auto; /* Centers layout */
}

/* Styles the left column for location main image and initial sections */
.left-column {
    display: flex;
    flex-direction: column; /* Stacks content vertically */
    gap: 2rem; /* Spacing between elements */
    align-items: center; /* Centers main image */
}

/* Styles the main location image at the top of the left column */
.locationpage-img {
    width: 800px; /* Fixed width for desktop */
    height: 600px; /* Fixed height, 4:3 ratio */
    object-fit: cover; /* Fills space without distortion */
    border-radius: 10px; /* Rounded corners */
    border: 2px solid #d4a017; /* Gold border */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); /* Subtle shadow */
    transition: transform 0.3s, box-shadow 0.3s; /* Smooth hover effects */
}

/* Hover effect for main location image */
.locationpage-img:hover {
    transform: scale(1.05); /* Slight enlargement */
    box-shadow: 0 8px 16px rgba(212, 160, 23, 0.3); /* Gold-tinted shadow */
}

/* Styles sections within the left column (Overview, Geography, History) */
.left-column section {
    display: flex; /* Flex layout for image and text */
    gap: 1rem; /* Spacing between image and text */
    background: #1f1f1f; /* Dark background */
    padding: 1.5rem; /* Comfortable padding */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); /* Subtle shadow */
    width: 100%; /* Full width within column */
}

/* Container for text within left column sections */
.left-column .section-text {
    flex: 1; /* Takes remaining space beside image */
}

/* Styles headings in left column sections */
.left-column h2 {
    font-family: "MedievalSharp", cursive, Arial; /* Thematic font */
    color: #d4a017; /* Gold text */
    font-size: 1.8rem; /* Slightly smaller for hierarchy */
    margin-bottom: 1rem; /* Space below */
}

/* Styles paragraphs in left column sections */
.left-column p {
    font-size: 1rem; /* Smaller text for dense info */
    color: #e6e6e6; /* Light text */
    font-family: "MedievalSharp", cursive, Arial; /* Thematic font */
}

/* Styles the right column for remaining location sections */
.right-column {
    display: flex;
    flex-direction: column; /* Stacks sections vertically */
    gap: 2rem; /* Spacing between sections */
}

/* Styles sections within the right column (Inhabitants, Puzzles, etc.) */
.right-column section {
    background: #1f1f1f; /* Dark background */
    padding: 1.5rem; /* Comfortable padding */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); /* Subtle shadow */
}

/* Styles headings in right column sections */
.right-column h2 {
    font-family: "MedievalSharp", cursive, Arial; /* Thematic font */
    color: #d4a017; /* Gold text */
    font-size: 1.8rem; /* Consistent with left column */
    margin-bottom: 1rem; /* Space below */
}

/* Styles paragraphs in right column sections */
.right-column p {
    max-width: 700px; /* Limits line length for readability */
    font-size: 1rem; /* Smaller text for dense info */
    color: #e6e6e6; /* Light text */
    font-family: "MedievalSharp", cursive, Arial; /* Thematic font */
}

/* ==========================================================================
   Section Image Styling
   ========================================================================== */

/* Styles smaller section images (400x300px) within left column sections */
.section-img {
    width: 400px; /* Fixed width for desktop */
    height: 300px; /* Fixed height, 4:3 ratio */
    object-fit: cover; /* Fills space without distortion */
    border-radius: 10px; /* Rounded corners */
    border: 2px solid #d4a017; /* Gold border */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); /* Subtle shadow */
    transition: transform 0.3s, box-shadow 0.3s; /* Smooth hover effects */
}

/* Hover effect for section images */
.section-img:hover {
    transform: scale(1.05); /* Slight enlargement */
    box-shadow: 0 8px 16px rgba(212, 160, 23, 0.3); /* Gold-tinted shadow */
}

/* ==========================================================================
   Button Styling
   ========================================================================== */

/* Styles explore buttons for interactive elements */
.explore-btn {
    display: inline-block; /* Inline-block for flow */
    padding: 0.8rem 1.5rem; /* Larger padding for tap targets */
    background: #d4a017; /* Gold background */
    color: #0d0d0d; /* Dark text */
    text-decoration: none; /* No underline */
    border-radius: 5px; /* Rounded corners */
    font-family: "MedievalSharp", cursive, Arial; /* Thematic font */
    font-weight: 400; /* Normal weight */
    transition: background 0.3s, transform 0.3s; /* Smooth hover effects */
}

/* Hover effect for explore buttons */
.explore-btn:hover {
    background: #f5c442; /* Lighter gold */
    transform: translateY(-2px); /* Slight lift */
    box-shadow: 0 4px 8px rgba(212, 160, 23, 0.4); /* Subtle shadow */
}

/* ==========================================================================
   Update Grid Styling
   ========================================================================== */

/* Styles the update grid for news and announcements */
.update-grid {
    display: grid; /* Grid layout */
    gap: 2rem; /* Spacing between cards */
    padding: 1rem 0; /* Minimal padding */
}

/* Styles individual update cards */
.update {
    background: #1f1f1f; /* Dark background */
    padding: 2rem; /* Comfortable padding */
    border-radius: 15px; /* Rounded corners */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6); /* Shadow for depth */
    transition: transform 0.3s, box-shadow 0.3s; /* Smooth hover effects */
}

/* Hover effect for update cards */
.update:hover {
    transform: translateY(-5px); /* Slight lift */
    box-shadow: 0 12px 24px rgba(212, 160, 23, 0.3); /* Gold-tinted shadow */
}

/* Styles update card headings */
.update h3 {
    font-size: 2rem; /* Prominent size */
    color: #d4a017; /* Gold text */
    margin-bottom: 0.5rem; /* Space below */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Shadow for depth */
    text-transform: uppercase; /* Uppercase for emphasis */
}

/* Styles update card dates */
.update .date {
    font-size: 1rem; /* Smaller size for metadata */
    color: #b0b0b0; /* Lighter grey */
    margin-bottom: 1rem; /* Space below */
    font-style: italic; /* Italic for distinction */
}

/* Styles update card paragraphs */
.update p {
    font-size: 1.1rem; /* Readable size */
    color: #b0b0b0; /* Lighter grey */
    line-height: 1.8; /* Spacious line height */
}

/* Styles media container within update cards */
.update .media {
    margin-top: 1rem; /* Space above */
    text-align: center; /* Centered content */
}

/* Styles media images within update cards */
.update .media img {
    width: 100%;
    max-width: 400px; /* Caps width */
    height: auto; /* Maintains aspect ratio */
    border-radius: 10px; /* Rounded corners */
    border: 2px solid #d4a017; /* Gold border */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); /* Subtle shadow */
    transition: transform 0.3s, box-shadow 0.3s; /* Smooth hover effects */
}

/* Hover effect for update media images */
.update .media img:hover {
    transform: scale(1.05); /* Slight enlargement */
    box-shadow: 0 8px 16px rgba(212, 160, 23, 0.3); /* Enhanced shadow */
}

/* ==========================================================================
   Feature Grid Styling
   ========================================================================== */

/* Styles the feature grid as a horizontal carousel */
.feature-grid {
    display: flex; /* Flex layout for scrolling */
    overflow-x: auto; /* Enables horizontal scrolling */
    gap: 2rem; /* Spacing between items */
    padding: 1rem 0; /* Minimal padding */
    scrollbar-width: thin; /* Thin scrollbar for Firefox */
    scrollbar-color: #d4a017 #1f1f1f; /* Custom scrollbar colors */
}

/* Customizes Webkit scrollbar appearance */
.feature-grid::-webkit-scrollbar {
    height: 8px; /* Thin scrollbar height */
}

.feature-grid::-webkit-scrollbar-track {
    background: #1f1f1f; /* Dark track */
}

.feature-grid::-webkit-scrollbar-thumb {
    background: #d4a017; /* Gold thumb */
    border-radius: 4px; /* Rounded thumb */
}

/* Styles individual feature cards */
.feature {
    flex: 0 0 400px; /* Fixed width, no shrinking */
    background: #1f1f1f; /* Dark background */
    padding: 2.5rem; /* Spacious padding */
    border-radius: 15px; /* Rounded corners */
    text-align: center; /* Centered content */
    transition: transform 0.3s, box-shadow 0.3s; /* Smooth hover effects */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6); /* Shadow for depth */
}

/* Hover effect for feature cards */
.feature:hover {
    transform: scale(1.1); /* Larger scale for emphasis */
    box-shadow: 0 12px 24px rgba(212, 160, 23, 0.3); /* Gold-tinted shadow */
}

/* Styles feature card images */
.feature img {
    width: 100%;
    height: 250px; /* Fixed height */
    object-fit: cover; /* Fills space without distortion */
    border-radius: 10px; /* Rounded corners */
    border: 2px solid #d4a017; /* Gold border */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); /* Subtle shadow */
    transition: transform 0.3s, box-shadow 0.3s; /* Smooth hover effects */
}

/* Hover effect for feature images */
.feature img:hover {
    transform: scale(1.05); /* Slight enlargement */
    box-shadow: 0 8px 16px rgba(212, 160, 23, 0.3); /* Enhanced shadow */
}

/* Styles feature card headings */
.feature h3 {
    font-size: 1.8rem; /* Consistent size */
    color: #e6e6e6; /* Light text */
    margin: 1rem 0; /* Vertical spacing */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); /* Subtle shadow */
}

/* Styles feature card paragraphs */
.feature p {
    font-size: 1.1rem; /* Readable size */
    color: #b0b0b0; /* Lighter grey */
    line-height: 1.8; /* Spacious line height */
}

/* ==========================================================================
   Teaser Section Styling
   ========================================================================== */

/* Styles the teaser section container */
#teasers {
    padding: 2rem; /* Reduced padding for balance */
    background: #1f1f1f; /* Dark background */
    max-width: 1200px; /* Caps width */
    margin: 0 auto; /* Centers content */
    display: block; /* Ensures visibility */
}

/* Styles the teaser zigzag grid for dynamic layout */
.teaser-zigzag {
    display: grid; /* Grid layout */
    gap: 2rem; /* Spacing between cards */
    padding: 1rem 0; /* Minimal padding */
    visibility: visible; /* Ensures visibility */
}

/* Applies staggered effect to odd-numbered teaser cards */
.teaser-zigzag .teaser-card:nth-child(odd) {
    transform: translateX(-10px); /* Slight left shift */
    visibility: visible; /* Ensures visibility */
    opacity: 1; /* Full opacity */
}

/* Applies staggered effect to even-numbered teaser cards */
.teaser-zigzag .teaser-card:nth-child(even) {
    transform: translateX(10px); /* Slight right shift */
    visibility: visible; /* Ensures visibility */
    opacity: 1; /* Full opacity */
}

/* Defines two-column layout for teaser grid on desktop */
@media (min-width: 768px) {
    .teaser-zigzag {
        grid-template-columns: repeat(2, 1fr); /* Two columns */
        visibility: visible; /* Ensures visibility */
    }
}

/* Styles individual teaser cards */
.teaser-card {
    background: #1f1f1f; /* Dark background */
    border: 2px solid #d4a017; /* Gold border */
    border-radius: 15px; /* Rounded corners */
    padding: 2rem; /* Spacious padding */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6); /* Shadow for depth */
    transition: transform 0.3s, box-shadow 0.3s; /* Smooth hover effects */
    text-align: center; /* Centered content */
    opacity: 1; /* Full opacity */
    transform: translateY(0); /* Default position */
    visibility: visible; /* Ensures visibility */
    display: block; /* Ensures display */
}

/* Defines visible state for teaser cards (for scroll animations) */
.teaser-card.visible {
    opacity: 1; /* Full opacity when in view */
    transform: translateY(0); /* Reset position */
    visibility: visible; /* Ensures visibility */
}

/* Hover effect for teaser cards */
.teaser-card:hover {
    transform: scale(1.05); /* Slight enlargement */
    box-shadow: 0 12px 24px rgba(212, 160, 23, 0.3); /* Gold-tinted shadow */
    visibility: visible; /* Ensures visibility */
    opacity: 1; /* Full opacity */
}

/* Styles teaser card images */
.teaser-card img {
    width: 100%;
    height: 300px; /* Fixed height for desktop */
    object-fit: cover; /* Fills space without distortion */
    border-radius: 10px; /* Rounded corners */
    border: 2px solid #d4a017; /* Gold border */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); /* Subtle shadow */
    transition: transform 0.3s, box-shadow 0.3s; /* Smooth hover effects */
    animation: pulse 2s infinite ease-in-out; /* Subtle pulse animation */
    visibility: visible; /* Ensures visibility */
    opacity: 1; /* Full opacity */
}

/* Hover effect for teaser card images */
.teaser-card img:hover {
    transform: scale(1.05); /* Slight enlargement */
    box-shadow: 0 8px 16px rgba(212, 160, 23, 0.3); /* Enhanced shadow */
    visibility: visible; /* Ensures visibility */
    opacity: 1; /* Full opacity */
}

/* Styles teaser card headings */
.teaser-card h3 {
    font-size: 1.8rem; /* Consistent size */
    color: #e6e6e6; /* Light text */
    margin: 1rem 0; /* Vertical spacing */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); /* Subtle shadow */
    visibility: visible; /* Ensures visibility */
    opacity: 1; /* Full opacity */
}

/* Styles teaser card paragraphs */
.teaser-card p {
    font-size: 1.5rem; /* Larger for readability */
    color: #b0b0b0; /* Lighter grey */
    line-height: 1.8; /* Spacious line height */
    margin-bottom: 1rem; /* Space below */
    visibility: visible; /* Ensures visibility */
    opacity: 1; /* Full opacity */
}

/* Styles teaser card buttons */
.teaser-card a {
    display: inline-block; /* Inline-block for flow */
    padding: 0.8rem 1.5rem; /* Larger padding for tap targets */
    background: #d4a017; /* Gold background */
    color: #0d0d0d; /* Dark text */
    text-decoration: none; /* No underline */
    border-radius: 5px; /* Rounded corners */
    font-family: "MedievalSharp", cursive, Arial; /* Thematic font */
    font-weight: 400; /* Normal weight */
    transition: background 0.3s, transform 0.3s; /* Smooth hover effects */
    visibility: visible; /* Ensures visibility */
    opacity: 1; /* Full opacity */
}

/* Hover effect for teaser card buttons */
.teaser-card a:hover {
    background: #f5c442; /* Lighter gold */
    transform: translateY(-2px); /* Slight lift */
    box-shadow: 0 4px 8px rgba(212, 160, 23, 0.4); /* Subtle shadow */
    visibility: visible; /* Ensures visibility */
    opacity: 1; /* Full opacity */
}

/* Styles teaser section heading */
#teasers h2 {
    font-size: 2.8rem; /* Consistent with other h2 */
    color: #d4a017; /* Gold text */
    text-align: center; /* Centered */
    margin-bottom: 2rem; /* Space below */
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7); /* Deep shadow */
    opacity: 1; /* Full opacity */
    transform: translateX(0); /* Default position */
    animation: slideIn 1s ease-out forwards; /* Slide-in animation */
    visibility: visible; /* Ensures visibility */
}

/* Defines slide-in animation for teaser heading */
@keyframes slideIn {
    from {
        opacity: 0; /* Starts transparent */
        transform: translateX(-50px); /* Starts left */
    }
    to {
        opacity: 1; /* Ends opaque */
        transform: translateX(0); /* Ends at natural position */
    }
}

/* Defines pulse animation for teaser images */
@keyframes pulse {
    0% {
        transform: scale(1);
    } /* Normal size */
    50% {
        transform: scale(1.05);
    } /* Slightly enlarged */
    100% {
        transform: scale(1);
    } /* Back to normal */
}

/* Applies hover glow effect to teaser elements */
.teaser-card:hover img,
.teaser-card:hover h3,
.teaser-card:hover p {
    text-shadow: 0 0 10px #d4a017; /* Gold glow */
    transition: text-shadow 0.3s ease-in-out; /* Smooth transition */
    visibility: visible; /* Ensures visibility */
    opacity: 1; /* Full opacity */
}

/* ==========================================================================
   Footer Styling
   ========================================================================== */

/* Styles the footer with a minimal, thematic design */
footer {
    background: #080808; /* Darker background for contrast */
    padding: 2rem; /* Spacious padding */
    text-align: center; /* Centered content */
    font-size: 1rem; /* Readable size */
}

/* Styles footer links */
footer a {
    color: #d4a017; /* Gold text */
    text-decoration: none; /* No underline */
}

/* Hover effect for footer links */
footer a:hover {
    text-decoration: underline; /* Simple underline on hover */
}

/* ==========================================================================
   Responsive Design (Mobile Adjustments)
   ========================================================================== */

/* Applies mobile-specific styles below 767px */
@media (max-width: 767px) {
    /* Shows hamburger menu toggle on mobile */
    .nav-toggle-label {
        display: block; /* Visible on mobile */
        z-index: 1002; /* Above other elements */
    }

    /* Collapses main menu into a vertical list on mobile */
    .main-menu {
        display: none; /* Hidden by default */
        flex-direction: column; /* Vertical stacking */
        position: absolute;
        top: 4rem; /* Below nav bar */
        left: 0;
        width: 100%; /* Full width */
        background: rgba(0, 0, 0, 0.95); /* Dark background */
        padding: 1rem 0; /* Vertical padding */
        z-index: 1000; /* Above header media */
    }

    /* Shows main menu when toggled */
    .nav-toggle:checked ~ .main-menu {
        display: flex; /* Visible when checkbox is checked */
    }

    /* Animates hamburger lines into an X on toggle */
    .nav-toggle:checked + .nav-toggle-label span:nth-child(1) {
        transform: rotate(45deg) translate(6px, 6px); /* Top line rotates */
    }
    .nav-toggle:checked + .nav-toggle-label span:nth-child(2) {
        opacity: 0; /* Middle line disappears */
    }
    .nav-toggle:checked + .nav-toggle-label span:nth-child(3) {
        transform: rotate(-45deg) translate(8px, -8px); /* Bottom line rotates */
    }

    /* Adjusts dropdown menu for mobile */
    .dropdown-content {
        display: none; /* Hidden by default */
        position: static; /* No absolute positioning */
        transform: none; /* No centering offset */
        width: 100%; /* Full width */
        box-shadow: none; /* No shadow */
        background: rgba(0, 0, 0, 0.95); /* Dark background */
        padding-left: 1rem; /* Indent for hierarchy */
    }

    .dropdown {
        position: static; /* No relative positioning */
    }

    .dropbtn {
        padding: 0.5rem; /* Padding for tap area */
    }

    .dropdown:hover .dropdown-content {
        display: none; /* Disables hover effect */
    }

    #world-toggle:checked ~ .dropdown-content {
        display: block; /* Shows when toggled */
    }

    /* Switches typography to Garamond for mobile readability */
    h1,
    h2,
    .tagline,
    nav a,
    .dropbtn,
    .dropdown-content a,
    .update h3,
    .document h3,
    .location h3 {
        font-family: "Garamond", serif, Arial; /* Garamond for legibility */
        font-weight: 400; /* Normal weight */
    }

    h1 {
        font-size: 2.2rem;
    } /* Smaller h1 */
    h2 {
        font-size: 2rem;
    } /* Smaller h2 */
    .tagline {
        font-size: 1.2rem;
    } /* Smaller tagline */
    nav a,
    .dropbtn {
        font-size: 1.2rem;
    } /* Smaller nav links */
    .dropdown-content a {
        font-size: 1rem;
    } /* Smaller dropdown links */
    .update h3,
    .document h3,
    .location h3 {
        font-size: 1.6rem;
    } /* Smaller section headings */
    .update .date,
    .document p,
    .location p {
        font-family: "Garamond", serif, Arial; /* Garamond for body text */
        font-size: 1rem; /* Adjusted size */
    }

    /* Adjusts header media for mobile */
    .header-media {
        top: 4rem;
        height: calc(100% - 4rem); /* Fits below nav */
    }

    /* Adjusts hero positioning for mobile */
    .hero {
        margin-top: 50vh;
    } /* Lower on mobile */
    .hero.index {
        margin-top: 20vh;
    } /* Shorter for homepage */
    .hero.updates,
    .hero.documents,
    .hero.locations,
    .hero.spireofdawn,
    .hero.livingjungle {
        margin-top: 50vh;
    } /* Consistent for detail pages */

    /* Switches location grid to single column */
    .location-grid {
        grid-template-columns: 1fr; /* Single column */
    }

    /* Adjusts explore button font for mobile */
    .explore-btn {
        font-family: "Arial", sans-serif; /* Sans-serif for clarity */
        font-size: 1rem; /* Readable size */
        padding: 0.8rem 1.5rem; /* Large tap target */
    }

    /* Adjusts grids and cards for mobile */
    .feature-grid,
    .update-grid,
    .document-grid,
    .location-grid,
    .teaser-zigzag {
        gap: 1rem; /* Tighter spacing */
        padding: 1rem 0; /* Minimal padding */
    }

    .feature,
    .update,
    .document,
    .location,
    .teaser-card {
        flex: 0 0 280px; /* Smaller width */
        padding: 2rem; /* Spacious padding */
    }

    .feature img,
    .update .media img,
    .location-img,
    .teaser-card img {
        height: 200px; /* Smaller height */
    }

    .feature h3,
    .update h3,
    .document h3,
    .location h3,
    .teaser-card h3 {
        font-size: 1.5rem; /* Smaller headings */
    }

    .feature p,
    .update p,
    .document p,
    .location p,
    .teaser-card p {
        font-size: 1rem; /* Smaller text */
    }

    .download-btn,
    .explore-btn {
        padding: 0.8rem 1.5rem; /* Large tap targets */
        font-size: 1rem; /* Readable size */
    }

    section {
        padding: 2rem 1rem; /* Tighter padding */
    }

    /* Adjusts sheet container to single column */
    .sheet-container {
        grid-template-columns: 1fr; /* Single column */
    }

    .left-column,
    .right-column {
        width: 100%; /* Full width */
    }

    .characterpage-img,
    .locationpage-img {
        width: 100%; /* Full width */
        height: auto; /* Maintains aspect ratio */
    }

    .left-column section {
        flex-direction: column; /* Stacks image and text */
        gap: 1rem; /* Spacing */
    }

    .section-img {
        width: 100%; /* Full width */
        height: auto; /* Maintains aspect ratio */
    }

    .left-column h2 {
        font-family: "Garamond", serif, Arial; /* Garamond for readability */
        font-size: 1.6rem; /* Smaller size */
    }

    .left-column p,
    .right-column p {
        font-family: "Garamond", serif, Arial; /* Garamond for body text */
        font-size: 0.9rem; /* Smaller size */
        max-width: 100%; /* Full width */
    }

    .right-column h2 {
        font-family: "Garamond", serif, Arial; /* Garamond for readability */
        font-size: 1.6rem; /* Smaller size */
    }

    .teaser-card img {
        height: 200px; /* Smaller height */
    }

    .teaser-card h3 {
        font-size: 1.5rem; /* Smaller size */
    }

    .teaser-card p {
        font-size: 1rem; /* Smaller size */
    }

    .teaser-card a {
        font-family: "Arial", sans-serif; /* Sans-serif for clarity */
        font-size: 1rem; /* Readable size */
        padding: 0.8rem 1.5rem; /* Large tap target */
    }
}
/* ==========================================================================
   Weapon and Armor Sheet Styling
   ========================================================================== */

/* Styles the weapon/armor sheet sections */
#weapon-sheet,
#armor-sheet {
    padding: 2rem; /* Matches existing section padding */
    background: #0d0d0d; /* Dark background for theme */
    max-width: 1200px; /* Consistent width cap */
    margin: 0 auto; /* Centers content */
}

/* Defines two-column layout for weapon/armor sheets, overriding character/location layouts */
.sheet-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Equal columns for balanced layout */
    gap: 2rem; /* Consistent spacing */
    max-width: 1200px; /* Matches section width */
    margin: 0 auto; /* Centers layout */
}

/* Styles the left column for portrait and descriptive sections */
.left-column {
    display: flex;
    flex-direction: column; /* Stacks content vertically */
    gap: 2rem; /* Spacing between sections */
    align-items: center; /* Centers portrait image */
}

/* Styles the main weapon/armor portrait image */
.weaponpage-img,
.armorpage-img {
    width: 100%;
    max-width: 800px; /* Matches your 800x600 prompt dimensions */
    height: 600px; /* Fixed height for consistency */
    object-fit: cover; /* Fills space without distortion */
    border-radius: 10px; /* Matches your rounded aesthetic */
    border: 2px solid #d4a017; /* Gold border for theme */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); /* Subtle shadow */
    transition: transform 0.3s, box-shadow 0.3s; /* Smooth hover effects */
}

/* Hover effect for weapon/armor portrait images */
.weaponpage-img:hover,
.armorpage-img:hover {
    transform: scale(1.05); /* Slight enlargement */
    box-shadow: 0 8px 16px rgba(212, 160, 23, 0.3); /* Gold-tinted shadow */
}

/* Styles sections within the left column (Appearance, Lore, etc.) */
.left-column section {
    background: #1f1f1f; /* Dark card background */
    padding: 1.5rem; /* Comfortable padding */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); /* Subtle shadow */
    width: 100%; /* Full column width */
}

/* Styles headings in left column sections */
.left-column h2 {
    font-family: "MedievalSharp", cursive, Arial; /* Thematic font */
    color: #d4a017; /* Gold text */
    font-size: 1.8rem; /* Matches your smaller section headings */
    margin-bottom: 1rem; /* Space below */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); /* Subtle shadow */
}

/* Styles paragraphs in left column sections */
.left-column p {
    font-size: 1rem; /* Matches your dense info size */
    color: #e6e6e6; /* Light text */
    font-family: "MedievalSharp", cursive, Arial; /* Thematic font */
}

/* Styles blockquotes for lore quotes */
.left-column blockquote {
    margin: 1rem 0; /* Vertical spacing */
    padding: 1rem; /* Internal padding */
    background: #2a2a2a; /* Slightly lighter background */
    border-left: 4px solid #d4a017; /* Gold accent */
    font-style: italic; /* Thematic emphasis */
    color: #b0b0b0; /* Lighter grey */
    font-family: "MedievalSharp", cursive, Arial; /* Thematic font */
}

/* Styles the powers/properties list */
.power-list,
.property-list {
    margin-top: 1rem; /* Space above */
}

/* Styles individual power/property items */
.power-item,
.property-item {
    margin-bottom: 1rem; /* Space between items */
}

/* Styles power/property headings */
.power-item h3,
.property-item h3 {
    font-family: "MedievalSharp", cursive, Arial; /* Thematic font */
    color: #e6e6e6; /* Light text */
    font-size: 1.2rem; /* Slightly larger for hierarchy */
    margin-bottom: 0.5rem; /* Space below */
}

/* Styles power/property descriptions */
.power-item p,
.property-item p {
    font-size: 1rem; /* Matches body text */
    color: #b0b0b0; /* Lighter grey */
    font-family: "MedievalSharp", cursive, Arial; /* Thematic font */
}

/* Styles the right column for stats and additional sections */
.right-column {
    display: flex;
    flex-direction: column; /* Stacks sections vertically */
    gap: 2rem; /* Spacing between sections */
}

/* Styles sections within the right column (Narrative, Wielders, etc.) */
.right-column section {
    background: #1f1f1f; /* Dark card background */
    padding: 1.5rem; /* Comfortable padding */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); /* Subtle shadow */
}

/* Styles headings in right column sections */
.right-column h2 {
    font-family: "MedievalSharp", cursive, Arial; /* Thematic font */
    color: #d4a017; /* Gold text */
    font-size: 1.8rem; /* Consistent with left column */
    margin-bottom: 1rem; /* Space below */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); /* Subtle shadow */
}

/* Styles paragraphs in right column sections */
.right-column p {
    max-width: 700px; /* Limits line length */
    font-size: 1rem; /* Matches body text */
    color: #e6e6e6; /* Light text */
    font-family: "MedievalSharp", cursive, Arial; /* Thematic font */
}

/* Styles the stats box in the right column */
.stats-box {
    background: #1f1f1f; /* Dark background */
    border: 2px solid #d4a017; /* Gold border */
    padding: 1rem; /* Compact padding */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); /* Subtle shadow */
    width: 100%; /* Full column width */
    text-align: center; /* Centered text */
}

/* Styles stats box heading */
.stats-box h3 {
    font-family: "MedievalSharp", cursive, Arial; /* Thematic font */
    color: #d4a017; /* Gold text */
    font-size: 1.6rem; /* Slightly smaller than section headings */
    margin-bottom: 1rem; /* Space below */
}

/* Styles stats box paragraphs */
.stats-box p {
    font-size: 1.2rem; /* Readable size */
    color: #e6e6e6; /* Light text */
    margin: 0.5rem 0; /* Vertical spacing */
}

/* Highlights stat labels in gold */
.stats-box p strong {
    color: #d4a017; /* Gold for emphasis */
}

/* Styles unordered lists in wielders/wearers sections */
.right-column ul {
    list-style: none; /* No bullets */
    padding: 0; /* No default padding */
}

/* Styles list items in wielders/wearers sections */
.right-column li {
    margin: 0.5rem 0; /* Vertical spacing */
    font-size: 1rem; /* Matches body text */
    color: #e6e6e6; /* Light text */
    font-family: "MedievalSharp", cursive, Arial; /* Thematic font */
}

/* Highlights names in wielders/wearers lists */
.right-column li strong {
    color: #d4a017; /* Gold for emphasis */
}

/* ==========================================================================
   Responsive Adjustments for Weapon/Armor Sheets
   ========================================================================== */

@media (max-width: 767px) {
    /* Adjusts weapon/armor sheet to single column on mobile */
    #weapon-sheet,
    #armor-sheet {
        padding: 2rem 1rem; /* Tighter padding */
    }

    .sheet-container {
        grid-template-columns: 1fr; /* Single column */
    }

    .left-column,
    .right-column {
        width: 100%; /* Full width */
    }

    .weaponpage-img,
    .armorpage-img {
        width: 100%; /* Full width */
        height: auto; /* Maintains aspect ratio */
        max-width: 100%; /* Overrides desktop max-width */
    }

    .left-column section,
    .right-column section {
        padding: 1rem; /* Tighter padding */
    }

    .left-column h2,
    .right-column h2 {
        font-family: "Garamond", serif, Arial; /* Switches to Garamond for mobile */
        font-size: 1.6rem; /* Smaller size */
    }

    .left-column p,
    .right-column p,
    .power-item p,
    .property-item p,
    .stats-box p,
    .right-column li {
        font-family: "Garamond", serif, Arial; /* Garamond for readability */
        font-size: 0.9rem; /* Smaller size */
    }

    .power-item h3,
    .property-item h3 {
        font-family: "Garamond", serif, Arial; /* Garamond for mobile */
        font-size: 1.1rem; /* Slightly smaller */
    }

    .stats-box h3 {
        font-family: "Garamond", serif, Arial; /* Garamond for mobile */
        font-size: 1.4rem; /* Smaller size */
    }

    .left-column blockquote {
        font-family: "Garamond", serif, Arial; /* Garamond for mobile */
        font-size: 0.9rem; /* Smaller size */
    }
}
/* ==========================================================================
   Magic Sheet Styling - Added for /world/magic/light-rune.html and future pages
   ========================================================================== */

/* Styles the magic sheet section, matching weapon/armor layout */
#magic-sheet {
    padding: 2rem; /* Consistent padding */
    background: #0d0d0d; /* Dark background for theme */
    max-width: 1200px; /* Caps width */
    margin: 0 auto; /* Centers content */
}

/* Styles the main magic portrait image */
.magicpage-img {
    width: 100%;
    max-width: 800px; /* Matches 800x600 prompt dimensions */
    height: 600px; /* Fixed height for consistency */
    object-fit: cover; /* Fills space without distortion */
    border-radius: 10px; /* Matches your rounded aesthetic */
    border: 2px solid #d4a017; /* Gold border for theme */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); /* Subtle shadow */
    transition: transform 0.3s, box-shadow 0.3s; /* Smooth hover effects */
}

/* Hover effect for magic portrait image */
.magicpage-img:hover {
    transform: scale(1.05); /* Slight enlargement */
    box-shadow: 0 8px 16px rgba(212, 160, 23, 0.3); /* Gold-tinted shadow */
}

/* Responsive adjustments for magic sheets */
@media (max-width: 767px) {
    #magic-sheet {
        padding: 2rem 1rem; /* Tighter padding */
    }
    .magicpage-img {
        width: 100%; /* Full width */
        height: auto; /* Maintains aspect ratio */
        max-width: 100%; /* Overrides desktop max-width */
    }
}
/* ==========================================================================
   Item Sheet Styling - Added for /world/items/dawn-shard.html and future pages
   ========================================================================== */

/* Styles the item sheet section, matching magic/armor layout */
#item-sheet {
    padding: 2rem; /* Consistent padding */
    background: #0d0d0d; /* Dark background for theme */
    max-width: 1200px; /* Caps width */
    margin: 0 auto; /* Centers content */
}

/* Styles the main item portrait image */
.itempage-img {
    width: 100%;
    max-width: 800px; /* Matches 800x600 prompt dimensions */
    height: 600px; /* Fixed height for consistency */
    object-fit: cover; /* Fills space without distortion */
    border-radius: 10px; /* Matches your rounded aesthetic */
    border: 2px solid #d4a017; /* Gold border for theme */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); /* Subtle shadow */
    transition: transform 0.3s, box-shadow 0.3s; /* Smooth hover effects */
}

/* Hover effect for item portrait image */
.itempage-img:hover {
    transform: scale(1.05); /* Slight enlargement */
    box-shadow: 0 8px 16px rgba(212, 160, 23, 0.3); /* Gold-tinted shadow */
}

/* Responsive adjustments for item sheets */
@media (max-width: 767px) {
    #item-sheet {
        padding: 2rem 1rem; /* Tighter padding */
    }
    .itempage-img {
        width: 100%; /* Full width */
        height: auto; /* Maintains aspect ratio */
        max-width: 100%; /* Overrides desktop max-width */
    }
}
/* ==========================================================================
   Future Section Placeholder
   ========================================================================== */

/* Hides future section placeholder until content is added */
.future-section {
    display: none; /* Hidden by default */
}