:root {
    --bg-main: #4C3F72;       /* Deep dark purple background */
    --bg-sidebar: #61358D;    /* Rich purple sidebar */
    --bg-content-box: #5F7496;/* Slate blue containers */
    --accent-copper: #B27553; /* Warm copper accent borders */
    --text-primary: #FFF8DE;  /* Soft cream headings and text */
    --text-secondary: #E0D2F3;/* Soft lavender sub-text */
    --border-slate: #7E8D9F;  /* Light slate trim borders */
}


/* Core Page Styles */
body {
    position: relative;            /* FIX: Tells the browser to measure top: 20px from the absolute top of the screen window! */
    background-color: var(--bg-main); 
    background-image: url('grid-bg.png'); 
    background-repeat: repeat;            
    background-attachment: fixed;         
    color: var(--text-primary);            
    font-family: 'VT323', Courier, monospace; /* Your Option A text style */
    font-size: 1.25rem;
    margin: 0;
    padding: 20px 0;
}

/* Centers the whole website layout block and bounds it to a classic 1000px desktop size */


.site-container {
    max-width: 1000px;
    margin: 0 auto;
    background-color: var(--bg-main);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); 
    border: 3px double var(--accent-copper); 
    position: relative; /* Ground zero anchor point */
}


/* This is the master alignment rule that fixes the bottom-drop bug */
body {
    position: relative !important;
}



/* TOP HEADER BANNER */
.top-banner {
    width: 100%;
    background-color: var(--bg-sidebar);
    border-bottom: 3px double var(--accent-copper);
}
.banner-img {
    width: 100%;
    height: auto;
    display: block;
}
.banner-caption {
    background-color: var(--bg-caption);
    color: var(--text-muted);
    text-align: center;
    padding: 8px;
    font-size: 0.85rem;
    font-weight: bold;
    letter-spacing: 1px;
}

/* 2. Sits side-by-side with your content box */
.site-wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 100%;
}

/* LEFT SIDEBAR */
.left-sidebar {
    width: 200px;
    min-width: 200px;
    background-color: var(--bg-sidebar); /* Rich purple sidebar background */
    border-right: 2px dashed var(--accent-copper); /* Copper accent divider */
    padding: 15px;
    box-sizing: border-box;
}

.sidebar-intro {
    background-color: var(--text-secondary);
    color: var(--bg-main);
    padding: 10px;
    font-size: 0.8rem;
    border: 1px dashed var(--bg-sidebar);
    margin-bottom: 15px;
    line-height: 1.3;
}

/* Heading blocks inside the sidebar */
.sidebar-heading {
    margin: 15px 0 5px 0;
    font-size: 0.9rem;
    text-align: center;
    padding: 4px;
    color: var(--text-primary);
    background-color: var(--accent-copper); /* Copper headers for category blocks */
}

/* Navigation links stacked vertically */
.side-nav a {
    display: block;
    color: var(--text-primary);
    text-decoration: none;
    padding: 6px 8px;
    font-size: 0.9rem;
    background-color: var(--bg-nav-link);
    margin-bottom: 2px;
    border: 1px solid var(--bg-sidebar);
}
.side-nav a:hover, .side-nav .active {
    background-color: var(--text-primary);
    color: var(--bg-sidebar);
    font-weight: bold;
}
.sidebar-box {
    background-color: var(--bg-main);
    border: 1px solid var(--bg-nav-link);
    padding: 10px;
    margin-top: 20px;
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.sidebar-box h3 {
    margin: 0 0 5px 0;
    font-size: 0.85rem;
    background-color: var(--border-slate);
    color: var(--text-primary);
    text-align: center;
}

/* RIGHT MAIN CONTENT AREA */
/* 3. CENTER CONTENT FIELD LANE RESIZING */
.main-content {
    flex: 1;                 /* Automatically stretches or shrinks middle lane to balance beautifully */
    padding: 20px;
    box-sizing: border-box;
    background-color: var(--bg-main);
}

/* Notice Warning Bar at the top of content */
.notice-bar {
    background-color: var(--bg-sidebar);
    border: 2px solid var(--accent-copper);
    color: var(--text-primary);
    text-align: center;
    padding: 8px;
    font-weight: bold;
    font-size: 0.85rem;
    margin-bottom: 20px;
    border-radius: 6px;
}

/* Main Content Section Frame */
.content-box {
    background-color: var(--bg-content-box); 
    border: 3px solid var(--border-slate); 
    padding: 15px;
    margin-bottom: 25px;
}
.section-title {
    margin: 0 0 15px 0;
    color: var(--text-primary);
    font-size: 1.2rem;
    border-bottom: 2px solid var(--text-primary);
    padding-bottom: 3px;
}

/* Internal post headers inside your main block */
.post-block {
    background-color: var(--bg-main); 
    border: 1px solid var(--text-muted);
    margin-bottom: 15px;
}
.post-header {
    background-color: var(--border-slate);
    padding: 6px 10px;
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    font-size: 0.9rem;
    color: var(--text-primary);
}
.post-content {
    padding: 15px;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Horizontal landscape boxes inside posts */
.landscape-profile {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    background-color: var(--bg-content-box);
    padding: 10px;
    border: 1px solid var(--border-slate);
    margin-top: 15px;
}
.landscape-img {
    width: 100px;
    height: auto;
    border: 1px solid var(--accent-copper);
}
.landscape-text {
    flex: 1;
}
.landscape-text h3 {
    margin: 0 0 5px 0;
}

/* CREATOR PROFILE SPECIFIC LAYOUT */
.creator-profile-layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

/* The small layout column for your avatar card */
.creator-sidebar {
    width: 160px;
    min-width: 160px;
    background-color: var(--bg-main);
    border: 1px solid var(--border-slate);
    padding: 10px;
    box-sizing: border-box;
    text-align: center;
}

.creator-avatar-img {
    width: 100%;
    height: auto;
    border: 2px solid var(--accent-copper); /* Copper frame for your avatar */
    background-color: var(--text-primary);
    margin-bottom: 10px;
}

.creator-quick-stats {
    font-size: 0.8rem;
    text-align: left;
    line-height: 1.4;
    color: var(--text-secondary);
}

/* The text area side next to the avatar */
.creator-bio-text {
    flex: 1;
}

.creator-bio-text h3 {
    margin-top: 0;
    margin-bottom: 8px;
    color: var(--text-primary);
    font-size: 1.1rem;
    border-bottom: 1px dotted var(--accent-copper);
    padding-bottom: 2px;
}

.creator-bio-text p {
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 15px;
}

/* Responsive adjustment if screens get narrow */
@media (max-width: 600px) {
    .creator-profile-layout {
        flex-direction: column;
    }
    .creator-sidebar {
        width: 100%;
    }
}

/* CREDITS PAGE SPECIFIC STYLES */

/* Clean, responsive table for image citations */
.credits-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    font-size: 0.9rem;
    background-color: var(--bg-main); /* Contrasting background for cells */
}

.credits-table th {
    background-color: var(--accent-copper); /* Copper headers for the columns */
    color: var(--text-primary);
    text-align: left;
    padding: 10px;
    font-weight: bold;
    border: 1px solid var(--border-slate);
}

.credits-table td {
    padding: 10px;
    border: 1px solid var(--border-slate);
    color: var(--text-secondary);
}

/* Zebra striping for table rows to make them easier to scan */
.credits-table tr:nth-child(even) {
    background-color: var(--bg-content-box); 
}

/* Hyperlinks inside your table */
.credits-table a {
    color: var(--text-primary);
    text-decoration: underline;
}
.credits-table a:hover {
    color: var(--text-muted);
}

/* Bullet list cleanup */
.credits-list {
    padding-left: 20px;
    line-height: 1.6;
    font-size: 0.9rem;
}
.credits-list li {
    margin-bottom: 8px;
}
.credits-list a {
    color: var(--text-primary);
    text-decoration: underline;
}

/* LORE DIRECTORY GRID LAYOUT */

/* Creates a clean grid that fits 2 or 3 categories per row depending on window width */
.lore-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

/* Individual Category Box */
.grid-item {
    background-color: var(--bg-main); /* Dark background to pop from the slate blue content box */
    border: 1px solid var(--border-slate);
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Pushes the button to the absolute bottom of the box */
}

.grid-item h3 {
    margin-top: 0;
    margin-bottom: 5px;
    color: var(--text-primary);
    font-size: 1rem;
    border-bottom: 1px dashed var(--accent-copper); /* Copper divider underline */
    padding-bottom: 4px;
}

.grid-item p {
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--text-secondary);
    margin-bottom: 15px;
}

/* Retro Entry Buttons */
.enter-btn {
    display: block;
    text-align: center;
    background-color: var(--bg-sidebar); /* Purple button background */
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: bold;
    padding: 6px;
    border: 1px solid var(--accent-copper);
}

.enter-btn:hover {
    background-color: var(--text-primary);
    color: var(--bg-sidebar);
}

/* Top list layout adjustments for Finalized Lore */
.lore-links-list {
    padding-left: 20px;
    margin-top: 10px;
}
.lore-links-list li {
    margin-bottom: 5px;
}
.lore-links-list a {
    color: var(--text-primary);
    font-weight: bold;
    text-decoration: none;
}
.lore-links-list a:hover {
    text-decoration: underline;
    color: var(--accent-copper);
}

/* STACKED TIMELINE SPECIFIC LAYOUT */
.timeline-stack {
    display: flex;
    flex-direction: column;
    gap: 25px; /* Creates a uniform gap between each stacked era card */
    margin-top: 20px;
    position: relative;
    padding-left: 15px;
    border-left: 3px dashed var(--accent-copper); /* A beautiful copper timeline axis line running down the left side */
}

/* Individual Timeline Block Card */
.timeline-entry {
    background-color: var(--bg-main); /* Contrasting background container box */
    border: 1px solid var(--border-slate);
    padding: 15px;
    position: relative;
}

/* Era Header Badges */
.timeline-badge-era {
    display: inline-block;
    background-color: var(--accent-copper); /* Copper accent background badge */
    color: var(--text-primary);
    font-size: 0.75rem;
    font-weight: bold;
    padding: 4px 8px;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

/* Meta dates text label styling */
.timeline-meta {
    font-size: 0.8rem;
    color: var(--text-muted); /* Muted slate gray text for dates */
    margin-bottom: 10px;
    font-style: italic;
}

.timeline-body h3 {
    margin-top: 0;
    margin-bottom: 8px;
    color: var(--text-primary);
    font-size: 1.1rem;
}

.timeline-body p {
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0;
}

/* Variant Styling: Highlight box for critical world events like wars/cataclysms */
.timeline-entry.major-war {
    border: 2px dashed var(--accent-copper); /* Changes frame line style to grab attention */
    background-color: var(--bg-sidebar); /* Shifts to the darker purple hue for a dark/tense event vibe */
}
.timeline-entry.major-war .timeline-badge-era {
    background-color: var(--bg-nav-link); /* Different badge hue */
}

/* UNIVERSAL SUB-CATEGORY DIRECTORY STYLES */
.category-summary-text {
    font-size: 0.95rem;
    line-height: 1.5;
    background-color: var(--bg-main);
    padding: 15px;
    border-left: 3px solid var(--accent-copper); /* Copper accent highlight line */
    margin-bottom: 25px;
}

.sub-entry-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Horizontal card block for listing individual article logs */
.article-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--bg-main);
    border: 1px solid var(--border-slate);
    padding: 15px;
    gap: 20px;
}

.card-left {
    flex: 1; /* Lets text expand to fill available room */
}

.article-title {
    margin-top: 0;
    margin-bottom: 5px;
    color: var(--text-primary);
    font-size: 1.05rem;
}

.article-teaser {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Button to step completely into the dedicated page document */
.read-article-btn {
    display: inline-block;
    white-space: nowrap; /* Prevents text from wrapping into two lines inside button */
    background-color: var(--bg-sidebar);
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: bold;
    padding: 8px 12px;
    border: 1px solid var(--accent-copper);
    transition: all 0.2s ease;
}

.read-article-btn:hover {
    background-color: var(--text-primary);
    color: var(--bg-sidebar);
}

/* Responsive fix for narrow screens */
@media (max-width: 650px) {
    .article-card {
        flex-direction: column;
        align-items: flex-start;
    }
    .read-article-btn {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }
}

/* MYTH & ORIGINS ARTICLE STYLES */

/* Highlighting the epic opening quote block */
.myth-quote {
    background-color: var(--bg-sidebar); /* Rich purple background */
    border-left: 5px solid var(--accent-copper); /* Strong copper accent line */
    margin: 20px 0;
    padding: 15px 20px;
    font-style: italic;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-primary);
}
.myth-quote cite {
    display: block;
    text-align: right;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 8px;
    font-weight: bold;
    text-transform: uppercase;
}

/* Side-by-side layout for reading text next to historical footnotes */
.myth-article-layout {
    display: flex;
    gap: 20px;
    margin-top: 25px;
}

.myth-text {
    flex: 2; /* Gives the main text more visual weight */
}
.myth-text h3 {
    color: var(--text-primary);
    border-bottom: 1px dotted var(--accent-copper);
    padding-bottom: 3px;
    margin-top: 25px;
}
.myth-text p {
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 15px;
    text-align: justify; /* Cleans up text edges like an open book */
}

/* THE COZY DROP CAP (Makes the first letter giant and fancy!) */
.drop-cap-para {
    position: relative;
}
.drop-cap {
    font-size: 3.2rem;
    float: left;
    line-height: 0.8;
    margin-top: 4px;
    margin-right: 8px;
    color: var(--accent-copper); /* Copper color for the drop-cap letter */
    font-weight: bold;
    font-family: Georgia, serif; /* Shifts style to classic book serif just for this letter */
    text-shadow: 2px 2px var(--bg-sidebar);
}

/* Small contextual box for archivist footnotes */
.myth-annotation-box {
    flex: 1;
    min-width: 180px;
    background-color: var(--bg-main);
    border: 1px dashed var(--accent-copper);
    padding: 12px;
    font-size: 0.8rem;
    height: fit-content; /* Box stops growing once content ends */
}
.myth-annotation-box h4 {
    margin-top: 0;
    margin-bottom: 8px;
    color: var(--text-primary);
    text-align: center;
    background-color: var(--border-slate);
    padding: 3px;
}
.myth-annotation-box p {
    line-height: 1.4;
    color: var(--text-secondary);
    margin: 0;
}

/* Article bottom navigation buttons row */
.article-footer-nav {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    border-top: 1px solid var(--border-slate);
    padding-top: 15px;
}
.back-link {
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: bold;
    text-decoration: none;
}
.back-link:hover {
    color: var(--accent-copper);
    text-decoration: underline;
}

/* Collapse columns vertically if viewed on mobile screen devices */
@media (max-width: 700px) {
    .myth-article-layout {
        flex-direction: column;
    }
}

/* LANGUAGE ARTICLE LAYOUT STYLES */
.lang-layout-row {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
}

.lang-text-block {
    flex: 2;
}

/* The alphabet script card resting on the right side */
.script-card {
    flex: 1;
    min-width: 200px;
    background-color: var(--bg-sidebar); /* Rich purple card container */
    border: 1px solid var(--accent-copper); /* Copper framing */
    padding: 12px;
    box-sizing: border-box;
    font-size: 0.8rem;
    height: fit-content;
}
.script-card h4 {
    margin-top: 0;
    margin-bottom: 10px;
    color: var(--text-primary);
    text-align: center;
    border-bottom: 1px dashed var(--accent-copper);
    padding-bottom: 4px;
}
.script-preview-box {
    background-color: var(--bg-main);
    border: 1px dashed var(--border-slate);
    color: var(--text-muted);
    text-align: center;
    padding: 20px 10px;
    margin-bottom: 10px;
    font-size: 0.75rem;
    font-weight: bold;
}

/* Custom linguistic grid tables */
.lang-data-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    margin-bottom: 25px;
    font-size: 0.85rem;
    background-color: var(--bg-main);
}
.lang-data-table th {
    background-color: var(--border-slate); /* Slate gray column row */
    color: var(--text-primary);
    text-align: left;
    padding: 8px;
    border: 1px solid var(--bg-content-box);
}
.lang-data-table td {
    padding: 8px;
    border: 1px solid var(--bg-content-box);
    color: var(--text-primary);
}
.lang-data-table tr:nth-child(even) {
    background-color: #556480; /* Alternate slate row lighting */
}

/* Specific highlight column styling for the conlang words */
.glossary-table .native-word {
    color: var(--text-primary);
    font-weight: bold;
    background-color: var(--bg-sidebar); /* Gives your native words a pop highlight box effect */
    border-right: 2px solid var(--accent-copper);
}

/* Collapse columns for mobile viewport monitors */
@media (max-width: 650px) {
    .lang-layout-row {
        flex-direction: column;
    }
}

/* RELIGION TEMPLATE LAYOUT STYLES */

/* Top block merging the stats badge and description text */
.religion-summary-row {
    display: flex;
    gap: 25px;
    background-color: var(--bg-main);
    padding: 15px;
    border-left: 4px solid var(--accent-copper); /* Strong copper accent marker */
    margin-bottom: 25px;
}

/* The vertical deity profile box */
.deity-badge {
    width: 180px;
    min-width: 180px;
    background-color: var(--bg-sidebar); /* Deep purple badge backing */
    border: 1px solid var(--border-slate);
    padding: 12px;
    box-sizing: border-box;
    text-align: center;
}
.deity-avatar-box {
    background-color: var(--bg-main);
    border: 1px dashed var(--accent-copper);
    color: var(--text-muted);
    padding: 25px 5px;
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.deity-stats {
    font-size: 0.8rem;
    text-align: left;
    line-height: 1.4;
    color: var(--text-secondary);
}

.religion-intro-text {
    flex: 1;
}
.religion-intro-text h3 {
    margin-top: 0;
    color: var(--text-primary);
}

/* The custom boxed-in list for religious orders and commands */
.tenets-box {
    background-color: var(--bg-sidebar);
    border: 2px solid var(--border-slate);
    padding: 15px 20px;
    margin-bottom: 25px;
}
.tenets-box h3 {
    margin-top: 0;
    color: var(--text-primary);
}
.tenets-box p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 15px;
}
.tenets-list {
    padding-left: 20px;
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.6;
}
.tenets-list li {
    margin-bottom: 10px;
}
.tenets-list strong {
    color: var(--accent-copper); /* Gives code decree headings a bright copper pop tint */
}

/* Side-by-side columns for secondary concepts */
.religion-split-grid {
    display: flex;
    gap: 20px;
}
.religion-block {
    flex: 1;
    background-color: var(--bg-main);
    border: 1px solid var(--bg-content-box);
    padding: 15px;
    box-sizing: border-box;
}
.religion-block h3 {
    margin-top: 0;
    color: var(--text-primary);
    border-bottom: 1px dotted var(--accent-copper);
    padding-bottom: 3px;
}
.religion-block p {
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0;
}

/* Variant layout block specifically for Heretic / Splinter entries */
.religion-block.heresy-variant {
    border: 1px dashed var(--accent-copper); /* Dashed copper frame lines alert danger/chaos */
}

/* Collapse grid vertically on mobile devices */
@media (max-width: 650px) {
    .religion-summary-row, .religion-split-grid {
        flex-direction: column;
    }
    .deity-badge {
        width: 100%;
    }
}

/* GEOGRAPHY TEMPLATE LAYOUT STYLES */

/* Top block splitting the map specs card and the intro text stream */
.geo-atlas-row {
    display: flex;
    gap: 25px;
    background-color: var(--bg-main);
    padding: 15px;
    border-left: 4px solid var(--accent-copper); /* Strong copper accent marker */
    margin-bottom: 25px;
}

/* Rigid atlas specification metadata box */
.atlas-specs-card {
    width: 220px;
    min-width: 220px;
    background-color: var(--bg-sidebar); /* Rich purple card container base */
    border: 1px solid var(--border-slate);
    padding: 12px;
    box-sizing: border-box;
}
.atlas-specs-card h4 {
    margin-top: 0;
    margin-bottom: 10px;
    color: var(--text-primary);
    text-align: center;
    background-color: var(--accent-copper); /* Copper headline label tag */
    padding: 3px;
    font-size: 0.85rem;
}
.atlas-meta-list {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--text-secondary);
}
.atlas-meta-list li {
    margin-bottom: 6px;
    border-bottom: 1px dotted var(--bg-main);
    padding-bottom: 4px;
}
.atlas-meta-list strong {
    color: var(--text-primary); /* Bright cream titles for atlas elements */
}

.geo-intro-text {
    flex: 1;
}
.geo-intro-text h3 {
    margin-top: 0;
    color: var(--text-primary);
}

/* Symmetric layout rows for landscape territories */
.geo-split-grid {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
}
.geo-landmark-card {
    flex: 1;
    background-color: var(--bg-sidebar);
    border: 1px solid var(--border-slate);
    padding: 15px;
    box-sizing: border-box;
}
.landmark-header {
    font-weight: bold;
    color: var(--text-primary);
    font-size: 1rem;
    border-bottom: 2px dashed var(--accent-copper); /* Copper dashed underline */
    padding-bottom: 4px;
    margin-bottom: 10px;
}
.geo-landmark-card p {
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0;
    color: var(--text-primary);
}

/* Bottom deep-dive climate container */
.climate-box {
    background-color: var(--bg-main);
    border: 1px solid var(--bg-content-box);
    padding: 15px;
    margin-bottom: 15px;
}
.climate-box h3 {
    margin-top: 0;
    color: var(--text-primary);
}
.climate-box p {
    font-size: 0.85rem;
    line-height: 1.5;
}

/* Collapse geography blocks cleanly onto phone viewports */
@media (max-width: 650px) {
    .geo-atlas-row, .geo-split-grid {
        flex-direction: column;
    }
    .atlas-specs-card {
        width: 100%;
    }
}

/* LOCATIONS TEMPLATE LAYOUT STYLES */
.location-layout-row {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
}

.location-main-text {
    flex: 2;
}

/* Right side data dossier profile box */
.location-data-badge {
    flex: 1;
    min-width: 200px;
    background-color: var(--bg-sidebar); /* Rich purple backing */
    border: 1px solid var(--border-slate);
    padding: 12px;
    box-sizing: border-box;
    height: fit-content;
}
.location-data-badge h4 {
    margin-top: 0;
    margin-bottom: 10px;
    color: var(--text-primary);
    text-align: center;
    background-color: var(--accent-copper); /* Copper tag */
    padding: 4px;
    font-size: 0.85rem;
}
.location-crest-placeholder {
    background-color: var(--bg-main);
    border: 1px dashed var(--border-slate);
    color: var(--text-muted);
    text-align: center;
    padding: 15px 5px;
    font-size: 0.75rem;
    font-weight: bold;
    margin-bottom: 12px;
}
.location-specs {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--text-secondary);
}
.location-specs li {
    margin-bottom: 6px;
    border-bottom: 1px dotted var(--bg-main);
    padding-bottom: 4px;
}
.location-specs strong {
    color: var(--text-primary);
}

/* Danger Alert warning panel */
.location-warning-box {
    background-color: var(--bg-main);
    border: 1px dashed var(--accent-copper); /* Dashed copper warning box line */
    padding: 15px;
    margin-bottom: 25px;
}
.location-warning-box h3 {
    margin-top: 0;
    color: var(--text-primary);
    font-size: 0.95rem;
    letter-spacing: 1px;
}
.location-warning-box p {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.4;
    font-style: italic;
    color: var(--text-primary);
}

/* Numbered point-of-interest directory items */
.poi-stack {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 15px;
    margin-bottom: 20px;
}
.poi-item {
    display: flex;
    background-color: var(--bg-sidebar);
    border: 1px solid var(--border-slate);
    align-items: center;
}
.poi-number {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--text-primary);
    background-color: var(--accent-copper); /* Giant copper block number background */
    padding: 20px;
    min-width: 40px;
    text-align: center;
    align-self: stretch; /* Forces number box height to perfectly match the card height */
    display: flex;
    align-items: center;
    justify-content: center;
}
.poi-body {
    padding: 15px;
    flex: 1;
}
.poi-body h4 {
    margin-top: 0;
    margin-bottom: 5px;
    color: var(--text-primary);
    font-size: 1rem;
}
.poi-body p {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.4;
}


/* Mobile responsive alignment drop */
@media (max-width: 650px) {
    .location-layout-row {
        flex-direction: column;
    }
    .location-data-badge {
        width: 100%;
    }
}

/* STATES TEMPLATE LAYOUT STYLES */
.state-layout-row {
    display: flex;
    gap: 25px;
    margin-bottom: 25px;
}

/* Left-aligned rigid geopolitical profile box */
.state-fact-sheet {
    width: 220px;
    min-width: 220px;
    background-color: var(--bg-sidebar); /* Deep purple card background */
    border: 1px solid var(--border-slate);
    padding: 12px;
    box-sizing: border-box;
    height: fit-content;
}
.state-fact-sheet h4 {
    margin-top: 0;
    margin-bottom: 10px;
    color: var(--text-primary);
    text-align: center;
    background-color: var(--accent-copper); /* Copper banner */
    padding: 4px;
    font-size: 0.85rem;
}
.state-meta-list {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--text-secondary);
}
.state-meta-list li {
    margin-bottom: 6px;
    border-bottom: 1px dotted var(--bg-main);
    padding-bottom: 4px;
}
.state-meta-list strong {
    color: var(--text-primary);
}

.state-main-text {
    flex: 1;
}
.state-main-text h3 {
    margin-top: 0;
    color: var(--text-primary);
}

/* Social Hierarchy Layout Area */
.hierarchy-box {
    background-color: var(--bg-main);
    border: 1px solid var(--bg-content-box);
    padding: 20px;
    margin-bottom: 25px;
}
.hierarchy-box h3 {
    margin-top: 0;
    color: var(--text-primary);
}
.hierarchy-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 15px;
}

/* Stacked class system blocks */
.hierarchy-tier {
    background-color: var(--bg-sidebar);
    border-left: 4px solid var(--border-slate);
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 20px;
}
.tier-label {
    font-weight: bold;
    font-size: 0.8rem;
    color: var(--text-primary);
    min-width: 140px;
    letter-spacing: 1px;
}
.hierarchy-tier p {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.4;
    flex: 1;
}

/* Optional: Border accent upgrades for your upper/elite social classes */
.hierarchy-tier.elite-tier {
    border-left: 4px solid var(--accent-copper); /* High social tiers get a royal copper accent line */
    background-color: var(--bg-nav-link);      /* Slightly brighter purple to make it pop */
}

/* Mobile responsive collapse */
@media (max-width: 650px) {
    .state-layout-row {
        flex-direction: column-reverse; /* Flips fact sheet underneath intro text on small screens */
    }
    .state-fact-sheet {
        width: 100%;
    }
    .hierarchy-tier {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    .tier-label {
        border-bottom: 1px dotted var(--accent-copper);
        width: 100%;
        padding-bottom: 2px;
    }
}

/* CULTURES TEMPLATE LAYOUT STYLES */
.culture-summary-row {
    margin-bottom: 25px;
}

/* Festivals & Holidays Layout Container */
.festivals-box {
    background-color: var(--bg-sidebar); /* Rich purple frame backing */
    border: 1px solid var(--border-slate);
    padding: 20px;
    margin-bottom: 25px;
}
.festivals-box h3 {
    margin-top: 0;
    color: var(--text-primary);
}
.festivals-box p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 15px;
}

/* Individual festival list layout strips */
.festival-strip {
    display: flex;
    background-color: var(--bg-main); /* Contrasting background */
    border: 1px solid var(--border-slate);
    margin-bottom: 12px;
    align-items: center;
}
.fest-date {
    font-size: 0.8rem;
    font-weight: bold;
    color: var(--text-primary);
    background-color: var(--accent-copper); /* Copper background for the calendar tag */
    padding: 15px;
    min-width: 90px;
    text-align: center;
    align-self: stretch; /* Forces date box height to match card perfectly */
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.fest-body {
    padding: 12px 15px;
    flex: 1;
}
.fest-body h4 {
    margin-top: 0;
    margin-bottom: 4px;
    color: var(--text-primary);
    font-size: 1rem;
}
.fest-body p {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--text-primary);
}

/* Bottom columns layout split */
.culture-split-grid {
    display: flex;
    gap: 20px;
}
.culture-block {
    flex: 1;
    background-color: var(--bg-main);
    border: 1px solid var(--bg-content-box);
    padding: 15px;
    box-sizing: border-box;
}
.culture-block h3 {
    margin-top: 0;
    color: var(--text-primary);
    border-bottom: 1px dotted var(--accent-copper);
    padding-bottom: 3px;
}
.culture-block p {
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0;
}

/* Custom danger variant for cultural taboos */
.culture-block.taboo-variant {
    border: 1px dashed var(--accent-copper); /* Dashed copper border visually alerts deep taboos */
}

/* Responsive collapse for mobile devices */
@media (max-width: 650px) {
    .festival-strip {
        flex-direction: column;
    }
    .fest-date {
        width: 100%;
        padding: 8px;
        box-sizing: border-box;
    }
    .culture-split-grid {
        flex-direction: column;
    }
}

/* MAGIC SYSTEM TEMPLATE LAYOUT STYLES */

/* Side-by-side block for the diagram and text */
.magic-wheel-layout {
    display: flex;
    gap: 25px;
    margin-bottom: 25px;
    align-items: flex-start;
}

.magic-image-card {
    flex: 1.2;
    background-color: var(--bg-caption); /* Dark backing matches your image theme background */
    border: 2px solid var(--accent-copper); /* Copper framing border line */
    padding: 10px;
    box-sizing: border-box;
}
.magic-diagram-img {
    width: 100%;
    height: auto;
    display: block;
}
.magic-caption {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: center;
    margin-top: 8px;
    font-style: italic;
}

.magic-intro-text {
    flex: 1;
}
.magic-intro-text h4 {
    margin-top: 0;
    margin-bottom: 8px;
    color: var(--text-primary);
    font-size: 1.05rem;
    border-bottom: 1px dotted var(--accent-copper);
    padding-bottom: 3px;
}

/* Custom Magic Interaction Data Table */
.magic-verb-table {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0 25px 0;
    font-size: 0.85rem;
    background-color: var(--bg-main);
}
.magic-verb-table th {
    background-color: var(--bg-sidebar); /* Dark purple column headers */
    color: var(--text-primary);
    padding: 10px;
    border: 1px solid var(--border-slate);
    text-align: left;
}
.magic-verb-table td {
    padding: 10px;
    border: 1px solid var(--border-slate);
    color: var(--text-primary);
}
.magic-verb-table tr:nth-child(even) {
    background-color: var(--bg-content-box); /* Alternating slate blue backgrounds */
}
.magic-verb-table strong {
    color: var(--accent-copper); /* Highlighting verbs in bright copper */
}

/* Color Coding Element Category Cell Tabs */
.elem-cell {
    font-weight: bold;
    text-shadow: 1px 1px 2px #000;
}
/* Note: These individual element colors stay as hardcoded hex tags to preserve their specific magic wheel color code accents! */
.elem-cell.poison { color: #81C784; }  /* Light greens */
.elem-cell.nature { color: #4CAF50; }
.elem-cell.crystal { color: #4DD0E1; } /* Cyans */
.elem-cell.arcana { color: #BA68C8; }  /* Purples */

/* Secondary text blocks layout split */
.magic-split-grid {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}
.magic-block {
    flex: 1;
    background-color: var(--bg-sidebar);
    border: 1px solid var(--border-slate);
    padding: 15px;
    box-sizing: border-box;
}
.magic-block h3 {
    margin-top: 0;
    color: var(--text-primary);
    border-bottom: 1px dotted var(--accent-copper);
    padding-bottom: 3px;
}
.magic-block p {
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0;
}
.magic-block.cost-variant {
    border: 1px dashed var(--accent-copper); /* Dashed frame lines flag system tolls and dangers */
}

/* Responsive drop adjustment for smaller screen environments */
@media (max-width: 750px) {
    .magic-wheel-layout, .magic-split-grid {
        flex-direction: column;
    }
}

/* ECOLOGY TEMPLATE LAYOUT STYLES */
.ecology-layout-row {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
}

.ecology-main-text {
    flex: 2;
}

/* Right side specimen data dossier profile box */
.ecology-taxonomy-badge {
    flex: 1;
    min-width: 200px;
    background-color: var(--bg-sidebar); /* Rich purple card container base */
    border: 1px solid var(--border-slate);
    padding: 12px;
    box-sizing: border-box;
    height: fit-content;
}
.ecology-taxonomy-badge h4 {
    margin-top: 0;
    margin-bottom: 10px;
    color: var(--text-primary);
    text-align: center;
    background-color: var(--accent-copper); /* Copper badge header tag */
    padding: 4px;
    font-size: 0.85rem;
}
.ecology-sketch-placeholder {
    background-color: var(--bg-main);
    border: 1px dashed var(--border-slate);
    color: var(--text-muted);
    text-align: center;
    padding: 25px 5px;
    font-size: 0.75rem;
    font-weight: bold;
    margin-bottom: 12px;
}
.ecology-specs {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--text-secondary);
}
.ecology-specs li {
    margin-bottom: 6px;
    border-bottom: 1px dotted var(--bg-main);
    padding-bottom: 4px;
}
.ecology-specs strong {
    color: var(--text-primary);
}

/* Wilderness Danger Alert warning panel */
.ecology-threat-box {
    background-color: var(--bg-main);
    border: 1px dashed var(--accent-copper); /* Dashed copper warning box line */
    padding: 15px;
    margin-bottom: 25px;
}
.ecology-threat-box h3 {
    margin-top: 0;
    color: var(--text-primary);
    font-size: 0.95rem;
    letter-spacing: 1px;
}
.ecology-threat-box p {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.4;
    font-style: italic;
    color: var(--text-primary);
}

/* Symmetric layout rows for material breakdowns */
.ecology-split-grid {
    display: flex;
    gap: 20px;
    margin-top: 15px;
}
.ecology-block {
    flex: 1;
    background-color: var(--bg-sidebar);
    border: 1px solid var(--border-slate);
    padding: 15px;
    box-sizing: border-box;
}
.ecology-block h4 {
    margin-top: 0;
    margin-bottom: 8px;
    color: var(--text-primary);
    font-size: 1rem;
    border-bottom: 1px dotted var(--accent-copper);
    padding-bottom: 3px;
}
.ecology-block p {
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0;
    color: var(--text-primary);
}

/* Mobile responsive drop down alignment */
@media (max-width: 650px) {
    .ecology-layout-row, .ecology-split-grid {
        flex-direction: column;
    }
    .ecology-taxonomy-badge {
        width: 100%;
    }
}

/* TECHNOLOGY TEMPLATE LAYOUT STYLES */
.tech-layout-row {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
}

.tech-main-text {
    flex: 2;
}

/* Right side engineering schematic dossier box */
.tech-specs-badge {
    flex: 1;
    min-width: 200px;
    background-color: var(--bg-sidebar); /* Rich purple card container base */
    border: 1px solid var(--border-slate);
    padding: 12px;
    box-sizing: border-box;
    height: fit-content;
}
.tech-specs-badge h4 {
    margin-top: 0;
    margin-bottom: 10px;
    color: var(--text-primary);
    text-align: center;
    background-color: var(--accent-copper); /* Copper badge header tag */
    padding: 4px;
    font-size: 0.85rem;
}
.tech-blueprint-placeholder {
    background-color: var(--bg-caption); /* Blueprint dark background for contrast */
    border: 1px dashed var(--border-slate);
    color: var(--text-muted);
    text-align: center;
    padding: 25px 5px;
    font-size: 0.75rem;
    font-weight: bold;
    margin-bottom: 12px;
}
.tech-specs {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--text-secondary);
}
.tech-specs li {
    margin-bottom: 6px;
    border-bottom: 1px dotted var(--bg-main);
    padding-bottom: 4px;
}
.tech-specs strong {
    color: var(--text-primary);
}

/* Industrial Protocol / Operations Panel */
.tech-protocol-box {
    background-color: var(--bg-main);
    border: 1px dashed var(--accent-copper); /* Dashed copper schematic box line */
    padding: 15px;
    margin-bottom: 25px;
}
.tech-protocol-box h3 {
    margin-top: 0;
    color: var(--text-primary);
    font-size: 0.95rem;
    letter-spacing: 1px;
}
.tech-protocol-box p {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.4;
    font-style: italic;
    color: var(--text-primary);
}

/* Symmetric layout rows for material breakdowns */
.tech-split-grid {
    display: flex;
    gap: 20px;
    margin-top: 15px;
}
.tech-block {
    flex: 1;
    background-color: var(--bg-sidebar);
    border: 1px solid var(--border-slate);
    padding: 15px;
    box-sizing: border-box;
}
.tech-block h4 {
    margin-top: 0;
    margin-bottom: 8px;
    color: var(--text-primary);
    font-size: 1rem;
    border-bottom: 1px dotted var(--accent-copper);
    padding-bottom: 3px;
}
.tech-block p {
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0;
    color: var(--text-primary);
}

/* Mobile responsive alignment drop */
@media (max-width: 650px) {
    .tech-layout-row, .tech-split-grid {
        flex-direction: column;
    }
    .tech-specs-badge {
        width: 100%;
    }
}

/* CHARACTER GALLERY MASTER HUB STYLES */

/* Uses the same grid math from world.html to distribute cards evenly */
.char-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

/* Individual side-by-side layout token card box */
.char-token-card {
    background-color: var(--bg-main); /* Contrasts with slate blue content block background */
    border: 1px solid var(--border-slate);
    padding: 12px;
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

/* Square profile picture window frame on the left side of the card */
.char-token-img {
    width: 85px;
    height: 85px;
    object-fit: cover;
    border: 2px solid var(--accent-copper); /* Copper avatar framing edge */
    background-color: var(--bg-sidebar);
    flex-shrink: 0; /* Prevents the browser from ever squeezing your picture size */
}

.char-token-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between; /* Pushes button link down nicely */
}

.char-token-info h3 {
    margin-top: 0;
    margin-bottom: 6px;
    color: var(--text-primary);
    font-size: 1rem;
    border-bottom: 1px dotted var(--accent-copper);
    padding-bottom: 2px;
}

/* Bullet-free clean info parameters list */
.char-token-specs {
    list-style-type: none;
    padding-left: 0;
    margin: 0 0 10px 0;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--text-secondary);
}
.char-token-specs li {
    padding-right: 4px;
}
.char-token-specs strong {
    color: var(--text-primary);
}

/* Symmetrical directory access click buttons */
.char-enter-btn {
    display: block;
    text-align: center;
    background-color: var(--bg-sidebar);
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 5px;
    border: 1px solid var(--accent-copper);
    margin-top: auto; /* Forces button stay stuck cleanly to the bottom element margins */
}
.char-enter-btn:hover {
    background-color: var(--text-primary);
    color: var(--bg-sidebar);
}

/* Visual Variant for antagonists or rival characters */
.char-token-card.rival-variant {
    border: 1px dashed var(--accent-copper); /* Changes frame edge line to dashed copper */
}
.char-token-card.rival-variant .char-token-img {
    border-color: var(--bg-nav-link);      /* Changes antagonist image border to rich purple tint */
}
/* Visual Variant for neutral or unaligned third-party characters */
.char-token-card.neutral-variant {
    border: 1px solid var(--border-slate); /* Slate gray framing border to reflect neutrality */
}
.char-token-card.neutral-variant .char-token-img {
    border-color: var(--bg-content-box);     /* Muted slate blue border for the avatar ring */
}


/* Mobile responsive alignment stack dropdown collapse */
@media (max-width: 400px) {
    .char-token-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .char-token-info h3 {
        text-align: center;
    }
    .char-token-specs {
        text-align: left;
    }
}

/* ==========================================================================
   INDIVIDUAL ORIGINAL CHARACTER PROFILE SHEET STYLES
   ========================================================================== */

/* Der Hauptbereich für das Bild und die Tabelle */
.oc-top-row {
    display: flex;
    flex-direction: row; /* Erlaubt Bild und Beschreibung nebeneinander */
    gap: 25px;
    margin-bottom: 25px;
    align-items: flex-start;
    width: 100%;
}

/* Der linke Kasten für Bild und die Steckbrief-Daten */
.oc-portrait-card {
    width: 240px;
    min-width: 240px;
    background-color: var(--bg-sidebar);
    border: 2px solid var(--accent-copper);
    padding: 12px;
    box-sizing: border-box;
}
.oc-full-img {
    width: 100%;
    height: auto;
    border: 1px solid var(--border-slate);
    background-color: var(--bg-main);
    margin-bottom: 15px;
}

/* VERHINDERT DAS HOCHSCHIEBEN DER TABELLE */
/* Wir sagen dem Browser explizit, dass die Tabelle eine neue Reihe anfangen muss */
.oc-core-bio {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.oc-core-bio h3, .content-box h3 {
    margin-top: 25px;
    margin-bottom: 12px;
    color: var(--text-primary);
    border-bottom: 2px dashed var(--accent-copper);
    padding-bottom: 4px;
}
.oc-top-row h3 {
    margin-top: 0; /* Align top with image frame box */
}
.oc-text-data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.oc-text-data-table td {
    padding: 6px 4px;
    border-bottom: 1px dotted var(--bg-content-box);
    color: var(--text-primary);
    vertical-align: top;
}
.oc-text-data-table td:first-child {
    width: 130px;
    color: var(--text-muted); /* Muted descriptor tags */
}


/* Die Persönlichkeits-Tabelle (MUSS UNTER DAS BILD!) */
.personality-table {
    width: 100% !important;
    max-width: 650px;       
    border-collapse: collapse;
    background-color: var(--bg-main);
    border: 1px solid var(--border-slate);
    
    /* ⚠️ HIER IST DIE ZWINGENDE BRECHSTANGE: */
    display: table !important;
    clear: both !important;
    margin: 30px auto !important; /* Zentriert die Tabelle mit Abstand unter dem Bild */
}


/* Give all table rows comfortable inner padding height */
.personality-table td {
    padding: 8px 12px;
    font-size: 0.9rem;
    vertical-align: middle;
}

/* COLUMN 1: Left-aligned traits */
.trait-left {
    width: 140px;          /* Locked width so dots never shift */
    text-align: left;
    color: var(--text-primary);
    font-weight: bold;
}

/* COLUMN 2: Permanently centered dots lane */
.trait-dots {
    text-align: center;    /* Forces circles to absolute center */
    font-family: monospace;
    letter-spacing: 4px;   /* Beautiful retro loop spacing gap */
    font-size: 1.05rem;
    white-space: nowrap;   /* Safety: guarantees dots NEVER drop into a second line */
}

/* COLUMN 3: Right-aligned traits */
.trait-right {
    width: 140px;          /* Matching locked width */
    text-align: right;
    color: var(--text-primary);
    font-weight: bold;
}

/* Dot color spectrums */
.active-dots { 
    color: var(--accent-copper); 
} 
/* Update just this selector block at the bottom of style.css */
.empty-dots { 
    color: #8E7AA8; /* Keep this set hex code color to ensure empty loop visibility across all shifts! */
    opacity: 0.5;   /* Gives them a beautiful, slightly transparent "unfilled" look */
}

/* Multi-column layout sheets splitting broad list groups */
.oc-split-grid {
    display: flex;
    gap: 20px;
    margin-bottom: 25px; /* Added spacing between major stat block sections */
}
.oc-stats-block {
    flex: 1;
    background-color: var(--bg-sidebar); /* Rich purple for stat block backing */
    border: 1px solid var(--border-slate);
    padding: 15px;
    box-sizing: border-box;
}
.sub-block-title {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 0.95rem;
    color: var(--text-primary);
    border-bottom: 1px dotted var(--accent-copper); /* Copper divider line under sub-headings */
    padding-bottom: 4px;
}
.dossier-list {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.6;
}
.dossier-list li {
    border-bottom: 1px dotted var(--bg-main);
    padding-bottom: 5px;
    margin-bottom: 5px;
    padding-right: 8px;
    word-break: break-word;
}
/* This styles the bold tags inside the split boxes to be soft lavender */
.dossier-list strong { 
    color: var(--text-secondary); 
}

/* Responsive break points for tight mobile display bounds */
@media (max-width: 650px) {
    .oc-top-row, .oc-split-grid {
        flex-direction: column;
    }
    .oc-portrait-card {
        width: 100%;
    }
    .oc-stats-block {
        width: 100%;
    }
}

/* RETRO HOME PAGE CHANGELOG SCROLL CONTAINER */
.changelog-scroll-container {
    max-height: 280px;         /* Forces the box to cap its size after ~2 large updates */
    overflow-y: scroll;        /* Automatically generates a vertical scrollbar when needed */
    padding-right: 8px;        /* Adds a safety buffer so scrollbar doesn't clip your text */
    background-color: var(--bg-main); /* Deep dark purple inner panel background */
    border: 1px dashed var(--accent-copper); /* Elegant dashed copper tracking boundary frame */
}

/* CUSTOM RETRO SCROLLBAR STYLING (Optional Polish) */
/* This styles the scrollbar track elements to match your custom color scheme */
.changelog-scroll-container::-webkit-scrollbar {
    width: 10px;
}
.changelog-scroll-container::-webkit-scrollbar-track {
    background: var(--bg-main);
    border-left: 1px dotted var(--border-slate);
}
.changelog-scroll-container::-webkit-scrollbar-thumb {
    background: var(--bg-sidebar);       /* Rich purple slider handle */
    border: 1px solid var(--accent-copper); /* Copper accent handle edge frame */
}
.changelog-scroll-container::-webkit-scrollbar-thumb:hover {
    background: var(--bg-nav-link);
}

/* ==========================================================================
   FACTIONS REGISTER INDEX OVERVIEW STYLES
   ========================================================================== */

.factions-list {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Creates a clean sequence gap between stacked faction rows */
    margin-top: 15px;
}

/* Symmetrical horizontal landscape row dossier block card */
.faction-card {
    display: flex;
    gap: 20px;
    background-color: var(--bg-main); /* Contrasts nicely against slate blue block background */
    border: 1px solid var(--border-slate);
    padding: 15px;
    align-items: flex-start;
}

/* Squared emblem crest frame card */
.faction-crest {
    width: 100px;
    height: 100px;
    object-fit: contain;
    border: 2px solid var(--accent-copper); /* Elegant copper framework ring edge */
    background-color: var(--bg-sidebar);
    padding: 5px;
    flex-shrink: 0; /* Guarantees browser never crushes crest size dimensions */
}

.faction-details {
    flex: 1; /* Automatically expands text fields down the horizontal length space */
}

.faction-header-row {
    display: flex;
    justify-content: space-between; /* Automatically flings status badge text to the far right wall edge */
    align-items: baseline;
    border-bottom: 1px dotted var(--accent-copper);
    padding-bottom: 4px;
    margin-bottom: 8px;
}

.faction-name {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.1rem;
}

/* Status markers tracking legal parameters */
.faction-alignment {
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.faction-alignment.alignment-order { color: var(--text-primary); }   /* Formal institutional look */
.faction-alignment.alignment-rebel { color: #FF8A80; }   /* Outlaw faction warning orange/red */

.faction-meta {
    margin: 0 0 8px 0;
    font-size: 0.8rem;
    color: var(--text-muted); /* Soft gray metrics text tracking */
}
.faction-meta strong {
    color: var(--text-secondary); /* Lavender labeling titles */
}

.faction-desc {
    margin: 0 0 15px 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-primary);
}

/* Intelligence directory link clicks */
.faction-link {
    font-size: 0.8rem;
    color: var(--text-primary);
    font-weight: bold;
    text-decoration: none;
}
.faction-link:hover {
    color: var(--accent-copper);
    text-decoration: underline;
}

/* Variant Visual Framework line for rebels or black market cells */
.faction-card.rebel-variant {
    border: 1px dashed var(--accent-copper); /* Turns card line boundaries into dashed copper wire framing */
}

/* Squeeze-responsive drops for tight mobile viewport display constraints */
@media (max-width: 600px) {
    .faction-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .faction-header-row {
        flex-direction: column;
        align-items: center;
        gap: 6px;
        width: 100%;
    }
    .faction-crest {
        width: 120px;
        height: 120px;
    }
}

/* ==========================================================================
   INDIVIDUAL FACTION TEMPLATE STYLES
   ========================================================================== */

.faction-profile-row {
    display: flex;
    gap: 25px;
    margin-bottom: 25px;
    align-items: flex-start;
}

.faction-main-text {
    flex: 2;
}

/* Right side vertical faction dossier box */
.faction-dossier-card {
    flex: 1;
    min-width: 210px;
    background-color: var(--bg-sidebar); /* Rich purple card backing */
    border: 1px solid var(--border-slate);
    padding: 12px;
    box-sizing: border-box;
    height: fit-content;
}
.faction-dossier-card h4 {
    margin-top: 0;
    margin-bottom: 10px;
    color: var(--text-primary);
    text-align: center;
    background-color: var(--accent-copper); /* Copper headline card label */
    padding: 4px;
    font-size: 0.85rem;
}
.faction-crest-placeholder {
    background-color: var(--bg-main);
    border: 1px dashed var(--border-slate);
    color: var(--text-muted);
    text-align: center;
    padding: 25px 5px;
    font-size: 0.75rem;
    font-weight: bold;
    margin-bottom: 12px;
}
.faction-specs-list {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--text-secondary);
}


/* Stance Variant Rows: Ally (Green), Neutral (Slate), Enemy (Copper-Red) */
.standing-ally .stance-badge {
    color: #81C784; /* Beautiful vibrant green text */
    font-weight: bold;
}
.standing-neutral .stance-badge {
    color: var(--text-muted); /* Soft neutral slate gray */
    font-weight: bold;
}
.standing-enemy .stance-badge {
    color: #FF8A80; /* Intense copper-red warning color */
    font-weight: bold;
}

/* Bottom infrastructure split layout grids */
.faction-split-grid {
    display: flex;
    gap: 20px;
    margin-top: 15px;
    margin-bottom: 25px;
}
.faction-block {
    flex: 1;
    background-color: var(--bg-sidebar);
    border: 1px solid var(--border-slate);
    padding: 15px;
    box-sizing: border-box;
}
.faction-block h4 {
    margin-top: 0;
    margin-bottom: 8px;
    color: var(--text-primary);
    font-size: 1rem;
    border-bottom: 1px dotted var(--accent-copper);
    padding-bottom: 3px;
}
.faction-block p {
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0;
    color: var(--text-primary);
}

/* Mobile responsive collapsing paths */
@media (max-width: 650px) {
    .faction-profile-row, .faction-split-grid {
        flex-direction: column;
    }
    .faction-dossier-card {
        width: 100%;
    }
}

/* ==========================================================================
   ART GALLERY HUB PORTFOLIO LAYOUT STYLES
   ========================================================================== */

/* Multi-column grid distributing artwork cards cleanly */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 15px;
}

/* Individual Portfolio Image Card */
.art-card {
    background-color: var(--bg-main); /* Contrasts nicely with the slate-blue block */
    border: 1px solid var(--border-slate);
    padding: 10px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* The dark background frame that sits tightly around the thumbnail image */
.art-frame {
    background-color: var(--bg-caption); /* Deep black backing replicates a digital camera canvas mat */
    border: 2px solid var(--accent-copper);  /* Thick copper accent frame line border */
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* The gallery thumbnail crop rules */
.gallery-thumb {
    width: 100%;
    height: 180px;         /* Forces all artwork cards to be completely uniform in size */
    object-fit: cover;     /* Scales and clips your art cleanly inside the row grids */
    display: block;
    transition: filter 0.15s ease-in-out;
}
.gallery-thumb:hover {
    filter: brightness(1.15); /* Vintage quick feedback highlight pop on hover states */
}

.art-details {
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.art-title {
    margin-top: 0;
    margin-bottom: 6px;
    color: var(--text-primary);
    font-size: 0.95rem;
    border-bottom: 1px dotted var(--accent-copper);
    padding-bottom: 2px;
}

/* Clean, bullet-free metadata parameters */
.art-meta {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--text-secondary); /* Soft lavender descriptions */
}
.art-meta strong {
    color: var(--text-muted); /* Gray labeling titles */
}

/* Responsive collapse safety triggers for narrow window frames */
@media (max-width: 500px) {
    .gallery-grid {
        grid-template-columns: 1fr; /* Rows them completely into a single vertical stream on tiny screens */
    }
    .gallery-thumb {
        height: auto; /* Lets full images flex safely on phone viewports */
    }
}

/* RETRO BADGE MATRIX DIRECTORY STYLES */
.badge-matrix {
    display: flex;
    flex-wrap: wrap; 
    gap: 12px;        /* Bumped up spacing slightly so wider blinkies don't touch */
    background-color: var(--bg-main);
    padding: 15px;
    border: 1px solid var(--border-slate);
    justify-content: center; 
    align-items: center;    /* FIX: Keeps blinkies of different heights perfectly centered vertically */
    margin-bottom: 20px;
}

/* Individual button layout wrapper constraints */
/* Friend button row parameters */
.badge-link img {
    height: auto;           /* FIX: Allows the height to flex naturally up to your max cap */
    max-height: 31px;       /* FIX: The absolute roof limit (perfect for standard 31px high blinkies) */
    width: auto;            /* FIX: Let's the width automatically expand as wide as the image naturally is! */
    display: block;
    border: 1px solid var(--accent-copper);
    image-rendering: pixelated; 
}
.badge-link a:hover img {
    border-color: var(--text-primary);
    transform: scale(1.02);
}

/* Share code widget container panel */
.link-me-back-panel {
    background-color: var(--bg-sidebar);
    border: 1px dashed var(--accent-copper);
    padding: 12px;
}
.link-me-back-panel h4 {
    margin-top: 0;
    margin-bottom: 8px;
    color: var(--text-primary);
    font-size: 0.9rem;
}
.link-share-row {
    display: flex;
    gap: 15px;
    align-items: center;
}
.my-own-badge {
    width: 150px;      /* FIX: Adjusted from 88px to 150px */
    height: 20px;      /* FIX: Adjusted from 31px to 20px */
    border: 1px solid var(--accent-copper);
}

/* The un-editable code textbox widget format */
.badge-code-box {
    flex: 1;
    min-width: 200px;  /* FIX: Forces the box to have a healthy width so your URL fits perfectly */
    height: 28px;      
    background-color: var(--bg-main);
    color: var(--text-secondary);
    border: 1px solid var(--border-slate);
    font-family: monospace;
    font-size: 0.75rem;
    padding: 5px;
    resize: none;      
    white-space: nowrap;
    overflow-x: auto;  
    box-sizing: border-box; /* FIX: Includes padding in width calculations to prevent breaking layout lines */
}

.badge-code-box:focus {
    outline: none;
    border-color: var(--text-primary);
    color: var(--text-primary);
}

/* Collapse layout to single items on small viewports */
@media (max-width: 500px) {
    .link-share-row {
        flex-direction: column;
        align-items: center;
    }
    .badge-code-box {
        width: 100%;
    }
}

/* ==========================================================================
   FLOATING DESKTOP-WIDGET SIDEBAR STYLES
   ========================================================================== */

/* Update just this selector property at the bottom of your style.css */
.right-sidebar {
    position: absolute;       
    top: 0px;                 /* Remains flush with the absolute top of your starry banner */
    
    /* FIX: Changed from 1015px to 1035px to slide the wide box safely out of your content text lanes! */
    left: 1500px;             
    
    width: 450px;             
    min-width: 450px;         
    padding: 0;               
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 15px;                
    z-index: 100;             
}


.deco-box {
    background-color: var(--bg-sidebar); 
    border: 2px dashed var(--accent-copper); 
    padding: 12px;
    font-size: 0.8rem;
    color: var(--text-primary);
    text-align: center;
}



.deco-box h3 {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 0.85rem;
    background-color: var(--bg-nav-link); /* Accent colored category header banners */
    color: var(--text-primary);
    padding: 4px;
    letter-spacing: 0.5px;
}


/* Mobile responsive collapse safety threshold trigger */
@media (max-width: 1260px) {
    .right-sidebar {
        display: none !important; 
    }
}

/* FLOATING WIDGET ELEMENT INTERNAL MATRICES */
.deco-matrix {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;                  /* Uniform gap spacing between assets */
    justify-content: center;
    align-items: center;
    margin-top: 8px;
}

/* Image scaling safety overrides */
.deco-matrix img, .deco-playlist-gif {
    display: block;
    image-rendering: pixelated; /* Keeps crisp pixel graphics sharp */
    border: 1px solid var(--accent-copper);
    transition: transform 0.1s ease;
    
    /* FIX: Strips away the forced dimensions so images render at their natural size! */
    width: auto;
    height: auto;
    max-width: 100%;           /* Safety line: prevents massive images from breaking your layout box bounds */
}

/* Hover interactivity bounce */
.deco-matrix a:hover img, .playlist-gif-link:hover .deco-playlist-gif {
    transform: scale(1.04);
    border-color: var(--text-primary);
}

/* FIX: Specific unique override JUST for your square audio vinyl record spinning wheel icon */
.deco-playlist-gif {
    width: 100px;
    height: 100px;
    margin: 5px auto 0 auto;
}


.pixel-stamp {
    width: 50px;
    height: 50px;
    object-fit: cover;
}

.thin-banner {
    width: 150px;
    height: 20px;
    object-fit: cover;
}

/* Suche diesen Block ganz unten in deiner style.css */
.classic-blinkie {
    width: 88px;
    height: 31px;
    object-fit: contain;   /* FIX: Ändert von 'cover' auf 'contain', damit nichts mehr abgeschnitten wird! */
    background-color: transparent; /* Verhindert hässliche Ränder, falls ein Blinkie mal minimal kleiner ist */
}
/* SPOTIFY EMBED MINIMAL DESIGN STYLES */
.spotify-player {
    width: 100%;
    height: 152px;            /* Die perfekte kompakte Standardhöhe für Spotify-Sidebar-Widgets */
    border: 1px solid var(--accent-copper); /* Kupferner Rahmen passend zu deinem Design */
    background-color: var(--bg-caption);
    margin-top: 8px;
    display: block;
}

/* RETRO MP3 AUDIO CONTROLLER STYLES */
.retro-audio-player {
    background-color: var(--bg-main);
    border: 1px dashed var(--accent-copper);
    padding: 8px;
    margin-top: 5px;
    text-align: left;
}


.now-playing-title {
    font-size: 0.65rem;
    font-weight: bold;
    color: var(--accent-copper);
    letter-spacing: 1px;
}

.song-title-ticker {
    font-family: monospace;
    font-size: 0.8rem;
    color: var(--text-primary);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Safely truncates incredibly long titles with dots ... */
}

/* Vertical stack grid tracking individual song select keys */
.audio-track-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 10px;
}

.track-btn {
    background-color: var(--bg-sidebar);
    color: var(--text-primary);
    border: 1px solid var(--accent-copper);
    padding: 6px;
    font-size: 0.75rem;
    font-weight: bold;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}
.track-btn:hover {
    background-color: var(--text-primary);
    color: var(--bg-sidebar);
}

#jukebox-selector {
    background-color: var(--bg-main);
    color: var(--text-primary);
    border: 1px solid var(--accent-copper);
    padding: 4px;
    font-size: 0.8rem;
    font-family: inherit;
}

#jukebox-selector optgroup {
    background-color: var(--bg-main);    /* Dark slate backing for header dividers */
    color: var(--accent-copper);         /* Copper text color labels for categories */
    font-style: normal;
    font-weight: bold;
}

#jukebox-selector option {
    background-color: var(--bg-sidebar); /* Dropdown rows color layout */
    color: var(--text-primary);
}

/* ==========================================================================
   CATEGORIZED LEFT SIDEBAR OVERHAUL STYLES
   ========================================================================== */

.nav-group {
    margin-bottom: 15px; /* Spacing between distinct category blocks */
    width: 100%;
}

/* Custom Color Coding for individual section heading bars */
.sidebar-heading.nav-hdr-main {
    background-color: #d925f2 !important; /* Pastel Red-Pink */
    color: #1a1a24 !important;
}

.sidebar-heading.nav-hdr-world {
    background-color: #b41ef1 !important; /* Pastel Orange-Yellow */
    color: #1a1a24 !important;
}

.sidebar-heading.nav-hdr-creative {
    background-color: #9419f5 !important; /* Pastel Mint Cyan */
    color: #1a1a24 !important;
}

.sidebar-heading.nav-hdr-blog {
    background-color: #7219fa !important; /* Pastel Lavender Purple */
    color: #1a1a24 !important;
}

/* Cleanup link aesthetics to match the reference look */
.side-nav a {
    display: block;
    color: var(--text-primary);
    text-decoration: none;
    padding: 6px 10px;
    font-size: 0.85rem;
    font-weight: bold;
    background-color: rgba(0, 0, 0, 0.2); /* Soft transparent darkening layer */
    margin-bottom: 2px;
    border-left: 3px solid transparent;
    transition: all 0.1s ease;
}

.side-nav a:hover, .side-nav a.active {
    background-color: var(--text-primary) !important;
    color: var(--bg-sidebar) !important;
    border-left: 3px solid var(--accent-copper);
}

/* ==========================================================================
   DEV DIARY & BLOG ARTICLE LOG STYLES
   ========================================================================== */

/* Universal vertical list spacing container for your blog posts */
.sub-entry-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 15px;
}

/* Horizontal landscape block card for listing individual blog diary entries */
.article-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--bg-main); /* Deep dark purple inner panel background */
    border: 1px solid var(--border-slate);
    padding: 15px;
    gap: 20px;
}

.card-left {
    flex: 1; /* Automatically stretches text field length down the lane space */
}

.article-title {
    margin-top: 0;
    margin-bottom: 5px;
    color: var(--text-primary); /* Soft cream headings text */
    font-size: 1.05rem;
}

.article-teaser {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-secondary); /* Soft lavender description text */
    line-height: 1.4;
}

/* Retro Directory Read Buttons */
.read-article-btn {
    display: inline-block;
    white-space: nowrap; /* Safety: prevents text from wrapping into two lines inside button */
    background-color: var(--bg-sidebar); /* Purple button background */
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: bold;
    padding: 8px 12px;
    border: 1px solid var(--accent-copper); /* Warm copper border rim frame line */
    transition: all 0.2s ease;
}

.read-article-btn:hover {
    background-color: var(--text-primary);
    color: var(--bg-sidebar);
}

/* Post-date header metadata tracking info bar wrapper */
.notice-bar {
    background-color: var(--bg-sidebar);
    border: 2px solid var(--accent-copper);
    color: var(--text-primary);
    text-align: center;
    padding: 8px;
    font-weight: bold;
    font-size: 0.85rem;
    margin-bottom: 20px;
    border-radius: 6px;
}

/* Squeeze-responsive drops for tight mobile viewport display constraints */
@media (max-width: 650px) {
    .article-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .read-article-btn {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }
}

/* ==========================================================================
   HOMEPAGE SITE MONITOR DASHBOARD STYLE
   ========================================================================== */

/* Sucht nach dem Kasten mit dem Blitz-Symbol auf deiner Startseite */
.index-monitor-box {
    background-color: var(--bg-sidebar) !important; /* Wechselt von Schieferblau zu deinem tiefen Lila */
    border: 2px dashed var(--accent-copper) !important; /* Setzt den coolen gestrichelten Kupferrand */
    padding: 15px !important;
    margin-top: 20px;
}

/* Suche diesen Block ganz unten in deiner style.css */
.index-monitor-box ul {
    list-style-type: none;
    padding-left: 0;
    margin: 8px 0 0 0;
    
    /* 🛠️ HIER DIE SCHRIFTGRÖSSE FÜR DIE LISTE ANPASSEN: */
    font-size: 0.5rem !important; /* Erhöhe oder verringere diesen Wert (z.B. 1.3rem für größer, 1rem für kleiner) */
    
    line-height: 1.6;
}


.index-monitor-box li strong {
    color: var(--accent-copper); /* Macht die Labels wie "Current Mood:" kupferfarben */
}

/* ==========================================================================
   CHARACTER STATS WIDGET PANEL ENGINE STYLES
   ========================================================================== */

.oc-status-container {
    width: 100%;
    background-color: var(--bg-main); /* Deep dark purple inner panel background */
    border: 1px dashed var(--accent-copper); /* Warm copper border rim frame line */
    padding: 10px;
    box-sizing: border-box;
    text-align: center;
    margin-top: 15px; /* Comfortable gap spacing separating it from his picture above */
}

.oc-status-container h5 {
    margin: 0 0 8px 0;
    font-size: 0.8rem;
    color: var(--text-primary);
    letter-spacing: 1px;
}

.status-metrics-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: monospace;
}

.stat-bar-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    font-weight: bold;
}

.stat-label {
    color: var(--accent-copper);
}

/* ==========================================================================
   PUBLIC GUESTBOOK WIDGET STYLES
   ========================================================================== */

.guestbook-frame-container {
    width: 100%;
    margin-top: 20px;
    border: 2px dashed var(--accent-copper); /* Kupferner, gestrichelter Rahmen um das gesamte Gästebuch */
    background-color: #12121c;               /* Dunkler Terminal-Hintergrund für optimale Lesbarkeit */
    padding: 10px;
    box-sizing: border-box;
}

.guestbook-frame-container iframe {
    background-color: transparent;
    display: block;
}


footer {
    font-size: 0.8rem;
    text-align: center;
    color: var(--text-muted);
    margin-top: 30px;
}