@font-face {    font-family: aclonica;    src: url('fonts/aclonica-regular.ttf'); }
@font-face {    font-family: marius-default;    src: url('fonts/default.ttf'); }
@font-face {    font-family: kosugimaru;    src: url('fonts/kosugimaru.ttf'); }
html {  font-family: marius-default, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;}
h1, h2, h3, h4, h5, h6 {  font-family: aclonica, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;}
pre, code {	font-family: kosugimaru, 'Courier New', monospace;}
.bxdata {	font-family: kosugimaru, 'Courier New', monospace;  font-size: 0.9em;  padding: 0 0.5em;  background-color: #073642;  white-space: pre-wrap;}
.monster_container {	font-family: kosugimaru, 'Courier New', monospace;  font-size: 0.9em;  background-color: #073642;}
.monster_image_container {    border: 1px solid #626262;    max-width: 75%;    margin-left: 5px;}
footer {    text-align: center;}
nav ul li a {    font-size: 1.75em;    position: relative;    margin: 0 5px; /* Space between links and separators */}
nav ul li a::before {    content: '::';    color: #626262;    position: absolute;    left: -2.5px; /* Adjust as needed to position correctly */}
/* Hide the separator for the first link */
nav ul li:first-child a::before {    content: '';}
.extra-nav a {    font-size: 1.25em;    position: relative;    margin: 0 5px; /* Space between links and separators */}
.extra-nav-element {    font-size: 1.25em;    position: relative;    margin: 0 5px; /* Space between links and separators */}
.extra-nav a::before {    content: '::';    color: #626262;    position: absolute;    left: -2.5px; /* Adjust as needed to position correctly */}
.extra-nav a:first-child::before {    content: '/';}
ul {	list-style-type: '+ ';}
ul ul {	list-style-type: '- ';}        
.terrain-button {            padding: 10px 20px;            font-size: 16px;            cursor: pointer;        }
.terrain-button-description {    font-size: 0.8em;}
.tool-grid {            display: grid;            grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));            gap: 5px;}
.tool-link-box {  background-color: #073642;        padding: 10px;    text-align: center;    border: 2px solid #626262;    border-radius: 5px;    box-sizing: border-box;    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);}
.tool-link-box a {    text-decoration: none;    font-size: 1.25em;}
/* Responsive Styles */
@media (min-width: 768px) {    
    /* style tool-grid and tool-link-box for mobile here */    
    .tool-grid {        display: flex;        flex-direction: column;}    
    .tool-link-box {        background-color: transparent;        padding: 0px;        border: 0px;        box-shadow: 0px;    }    
    .tool-link-box a {        font-size: 1.1em;    }
}       
.button-item {  display: flex;  flex-direction: column; /* Stack button and description vertically */  align-items: center; /* Center items horizontally */}
/* following is for the novels wit h chapters etc. */
.chapter {  position: relative;  width: 100%;  max-width: 800px;  margin: 0 auto;}
.paragraph-container {  position: relative;  width: 100%;  margin-bottom: 1em;}
.comment {  position: absolute;  right: 0;  top: 0;	font-family: kosugimaru, 'Courier New', monospace;    color: #2E8B57; /* Dark green */  /*background: #f9f9f9;*/  padding: 5px 10px;  border-left: 1px solid #ccc;  white-space: pre-wrap;  max-width: 200px;  font-size: 0.9em;  line-height: 1.4;}
.visually-hidden {  position: absolute;  left: -9999px;  top: auto;  width: 1px;  height: 1px;  overflow: hidden;}
.toc li {    list-style-type: none;}
.toc .level-1 {    margin-left: 0;}
.toc .level-2 {    margin-left: 20px;}
.toc .level-3 {    margin-left: 40px;}
.sr-only {    position: absolute;    width: 1px;    height: 1px;    padding: 0;    margin: -1px;    overflow: hidden;    clip: rect(0 0 0 0);    white-space: nowrap;    border: 0;}
.category-heading {    display: flex;    align-items: center;    gap: 8px;    cursor: pointer;  font-size: 1.1em;    }
.category-toggle {    background: none;    border: none;    cursor: pointer;    /*font-size: 16px;*/    padding: 0;}
.category-toggle .icon {    font-weight: bold;    transition: transform 0.3s;}
.category-container {    margin-bottom: 10px;}
.star {  font-size: 1.5em;  display: inline-block;  margin: 0 2px;}
.star.full {  color: gold;}
.star.half {  color: gold;  text-shadow: 0 0 2px rgba(0,0,0,0.3);}
.star.empty {  color: #ccc;}

/* ========================================
RED VALLEY INVENTORY STYLES
Because inline CSS is a crime against humanity.
========================================*/
.rv_inv_card {    background-color: #073642;    border: 1px solid #2aa198;    padding: 15px;    margin-bottom: 30px;    box-sizing: border-box;}
.rv_inv_list_item {    background-color: #073642;    border: 1px solid #073642;    padding: 10px;    margin-bottom: 15px;}
.rv_inv_section_header {    margin-top: 40px;     border-top: 1px solid #ccc;     padding-top: 15px;    color: #839496;}
.rv_inv_summary {    padding: 10px;     border-left: 4px solid #2aa198;     cursor: pointer;     background-color: #073642;}
.rv_inv_table_row {    border-bottom: 1px solid #073642;     cursor: grab;}
.rv_inv_table_row:active {    cursor: grabbing;}
.rv_inv_select {    background-color: #002b36;    color: #839496;    border: 1px solid #2aa198;    padding: 5px;    border-radius: 4px;}

/* MAGICAL BEDAZZLING TIERS */
.rv_inv_magic_t1 {    color: #38bdf8;    font-weight: bold;    text-shadow: 0 0 4px rgba(56, 189, 248, 0.5);}
.rv_inv_magic_t2 {    color: #c084fc;    font-weight: 900;    text-shadow: 0 0 6px rgba(192, 132, 252, 0.8);}
.rv_inv_magic_t3 {    color: #fbbf24;    font-weight: 900;    letter-spacing: 0.5px;    text-shadow: 0 0 5px #d97706, 0 0 10px #dc2626;}

/* TRASH & DELETION STYLES */
.rv_inv_trash_row {    background-color: #073642;    border: 1px solid #dc322f;    padding: 10px;    margin-bottom: 10px;    display: flex;     justify-content: space-between;     align-items: center;}
.rv_inv_btn_danger {    color: #dc322f;    font-weight: bold;}

/* THE HOARDER SHAME STYLES */
.rv_inv_overburdened {    border-left: 6px solid #b58900 !important;    background-color: #1e2118 !important;    color: #cb4b16 !important;    animation: pulse-toxic 2s infinite;}
@keyframes pulse-toxic {    0% { box-shadow: 0 0 0px 0px rgba(181, 137, 0, 0.2); }    50% { box-shadow: 0 0 10px 2px rgba(181, 137, 0, 0.5); }    100% { box-shadow: 0 0 0px 0px rgba(181, 137, 0, 0.2); }}
.overburdened-insult {    font-weight: normal;    font-style: italic;    color: #dc322f;    margin-left: 10px;}

/* 
========================================
RED VALLEY NEXT GEN (RVNG) NAVIGATION
Dragging this UI kicking and screaming into 2026.
========================================
*/
.rvng-layout-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.rvng-mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    background-color: #073642;
    border-bottom: 2px solid #2aa198;
    margin-bottom: 20px;
}

.rvng-hamburglar-btn {
    background: none;
    border: 1px solid #2aa198;
    color: #839496;
    padding: 8px 12px;
    font-size: 1.2em;
    cursor: pointer;
    border-radius: 4px;
    font-family: inherit;
    font-weight: bold;
}

.rvng-hamburglar-btn:hover {
    background-color: #002b36;
}

.rvng-mobile-title {
    font-weight: bold;
    font-family: aclonica, sans-serif;
    font-size: 1.2em;
    color: #2aa198;
}

.rvng-sidebar {
    display: none; /* Hidden on mobile until toggled */
    background-color: #002b36;
    padding: 15px;
    border-bottom: 2px solid #2aa198;
    margin-bottom: 20px;
}

.rvng-sidebar.rvng-open {
    display: block;
}

.rvng-nav-group-title {
    color: #586e75;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 20px;
    margin-bottom: 10px;
    border-bottom: 1px solid #073642;
    padding-bottom: 5px;
    font-weight: bold;
}

.rvng-sidebar nav > :first-child .rvng-nav-group-title {
    margin-top: 0;
}

.rvng-nav-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.rvng-nav-list li {
    margin-bottom: 5px;
}

.rvng-nav-list li a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #93a1a1;
    padding: 10px 12px;
    border-radius: 4px;
    transition: background 0.2s, color 0.2s;
    font-size: 1.1em;
}

.rvng-nav-list li a:hover, 
.rvng-nav-list li a:focus {
    background-color: #073642;
    color: #2aa198;
}

.rvng-nav-list li a.rvng-active {
    background-color: #073642;
    color: #2aa198;
    border-left: 3px solid #2aa198;
    font-weight: bold;
}

.rvng-nav-icon {
    margin-right: 12px;
    font-size: 1.2em;
    opacity: 0.8;
}

.rvng-main-content {
    padding: 0 15px 40px 15px;
    flex-grow: 1;
}

/* Desktop Sidebar Mode (Screens wider than 800px) */
@media (min-width: 800px) {
    .rvng-layout-wrapper {
        flex-direction: row;
        align-items: flex-start;
    }
    
    .rvng-mobile-header {
        display: none; /* Banished to the shadow realm */
    }
    
    .rvng-sidebar {
        display: block !important; /* Force show on desktop */
        width: 250px;
        flex-shrink: 0;
        height: 100vh;
        position: sticky;
        top: 0;
        overflow-y: auto;
        border-right: 2px solid #2aa198;
        border-bottom: none;
        margin-bottom: 0;
    }
    
    .rvng-main-content {
        width: calc(100% - 250px);
        max-width: 1000px;
        padding: 40px;
    }
}




/* RVNG Override: Nuking the global boomer colons because someone has zero aesthetic commitment */
.rvng-sidebar nav ul li a::before,
.rvng-nav-list li a::before {
    content: none !important;
    display: none !important;
}

/* Terminalcore Brackets - Unselectable and Screen Reader safe */
.rvng-nav-group-title::before {
    content: "[" / "";
    color: #626262;
    margin-right: 8px;
    font-weight: normal;
}

.rvng-nav-group-title::after {
    content: "]" / "";
    color: #626262;
    margin-left: 8px;
    font-weight: normal;
}


/* Nuke Sakura's global body prison because we actually want to use our screens */
body {
    max-width: none !important;
    padding: 0 !important;
}

/* Force the CMS pages back into a readable, centered column */
body > header,
body > main:not(.rvng-main-content),
body > footer {
    max-width: 38em;
    margin: 0 auto;
    padding: 13px; /* Adding Sakura's padding back to just the text areas */
}

/* Let the Red Valley wrapper take up the full screen width */
.rvng-layout-wrapper {
    max-width: 100%;
}

/* Give the Red Valley main content room to breathe on desktop */
@media (min-width: 800px) {
    .rvng-main-content {
        max-width: 1200px; /* Wide enough for maps, but not stretching to infinity */
        margin: 0 auto; 
    }
}