/* Main Styling */
body {margin: 0; padding: 0; font-family: Arial, sans-serif; min-height: 100vh; background-color: var(--bg-color); color: var(--text-color); display: flex; flex-direction: column; transition: background 0.3s ease, color 0.3s ease;}
h1, h2, h3 {color: var(--text-color);}
main {flex-grow: 1; padding: 20px; overflow-y: auto; max-width: calc(100% - 180px); box-sizing: border-box; position: relative;}
table {border-collapse: collapse; width: 100%;}
table th, table td {border: 1px solid var(--content-border); padding: 8px; text-align: left;}
table th {background-color: var(--content-bg); color: var(--button-text);}
hr {display: block; margin-top: 0.5em; margin-bottom: 0.5em; margin-left: auto; margin-right: auto; border-style: inset; border-width: 1px;}
hr.gradient {height: 3px; border: none; border-radius: 6px; background: linear-gradient(90deg, var(--button-text) 0%, var(--text-color) 50%, var(--button-text) 100%);}
a {color: var(--link-color);text-decoration: underline;}
a:visited {color: var(--link-color);}
a:hover {color: var(--link-hover);text-decoration: underline;}
#content {flex: 1;padding: 20px; width: 100%; box-sizing: border-box; margin-top: 60px;}
.stretched-image {width: 100%; height: 20vh; object-fit: fill;}
.collapsible {background-color: var(--button-bg); color: var(--button-text); cursor: pointer; padding: 15px; width: 100%; border: none; text-align: left; outline: none; font-size: 1.5em; transition: background-color 0.3s; margin-bottom: 5px;}
.collapsible:hover {background-color: var(--button-hover);}
.collapsible-header {background-color: var(--content-bg); color: var(--text-color); padding: 10px 15px; font-size: 1.5em; border: none; text-align: left; width: 100%; cursor: pointer; border-radius: 5px; outline: none; transition: background-color 0.3s ease;}
.collapsible-header:hover {background-color: var(--content-bg);}
.collapsible-content {padding: 15px; background-color: var(--content-bg); border: 1px solid var(--content-border); border-radius: 5px; margin-bottom: 10px; display: block; overflow: hidden; transition: max-height 0.3s ease-out;}
.collapsible-section.active .collapsible-content {display: block;}
.section-banner {background-color: var(--button-bg); color: var(--button-text); padding: 10px 15px; margin-bottom: 15px; border-radius: 5px; font-size: 1.5em;}
.content {padding: 15px; overflow: hidden; background-color: var(--content-bg); display: block;}
.image-container {width: 100%; max-width: none; margin: 0; padding: 0; display: block; position: relative;}
.centered-image {width: 100%; height: auto; display: block; box-shadow: none; border-radius: 0;}
.red-text {color: red;}
.green-text {color: greenyellow;}
@media screen and (min-width: 2560px) {.image-container {max-width: 2560px; margin: 0 auto;}}
@media screen and (max-width: 768px) {main {max-width: 100%;}.dropdown-content {left: 0; top: 100%; width: 100%;}}
/* TopNav Styling */
.top-nav {position: fixed; top: 0; left: 0; width: 100%; background-color: var(--nav-bg); display: flex; padding: 0; margin: 0; z-index: 1000; height: 50px; flex-shrink: 0;}
.top-nav ul {list-style-type: none; padding: 0; margin: 0; display: flex; flex-wrap: nowrap; width: 100%; justify-content: space-evenly;}
.top-nav li {position: relative; display: flex; align-items: center;}
.top-nav a, .top-nav .dropbtn {color: var(--nav-text); text-decoration: none; padding: 0 15px; display: flex; align-items: center; height: 50px; transition: background-color 0.3s; white-space: nowrap;}
.top-nav .active {background-color: var(--content-bg);}
.top-nav a:hover, .top-nav .dropbtn:hover {background-color: var(--dropdown-hover);}
.top-nav .dropdown-content {display: none; position: absolute; top: 100%; left: 0; background-color: var(--dropdown-bg); min-width: 180px; box-shadow: 0 8px 16px rgba(0,0,0,0.2); z-index: 1;}
.top-nav .dropdown:hover .dropdown-content {display: block;}
@media screen and (max-width: 768px) {.top-nav {position: fixed; height: auto;} #content {margin-top: 50px;} .top-nav.expanded + #content {margin-top: 300px;}}
#topnav-container nav {display: block;}
.dropdown {position: relative;}
.dropdown-content {display: none; position: absolute; left: 60%; top: 0; background-color: var(--dropdown-bg); min-width: 80px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1;}
.dropdown-content a {color: var(--nav-text); padding: 8px 16px; text-decoration: none; display: block; white-space: nowrap;}
.dropdown-content a:hover {background-color: var(--dropdown-hover);}
.active {display: block !important;}
.hidden, .hidden-detail {display: none;}
/* Main City Format Styling */
#category-buttons {display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 20px 0;}
.category-button {background-color: var(--button-bg);; color: var(--text-color); border: 2px solid var(--content-border); border-radius: 5px; padding: 10px 20px; font-weight: bold; font-size: 1em; cursor: pointer; transition: background-color 0.3s ease, transform 0.2s ease;}
.category-button:hover {background-color: var(--button-hover); color: white; transform: translateY(-2px);}
#category-content {background-color: var(--content-bg); border: 2px solid var(--content-border); border-radius: 5px; padding: 20px; margin-top: 20px; min-height: 200px;}
/* Planet Page Styling */
.planet-container {display: flex; align-items: center; margin-bottom: 20px;}
.planet-image {width: 150px; height: 150px; border: none; background-color: #e0e0e0; margin-right: 20px; display: flex; align-items: center; justify-content: center; overflow: hidden;}
.planet-image img {max-width: 100%; max-height: 100%; object-fit: contain; display: block; margin: auto;}
.planet-description {max-width: 600px;}
.planet-title {font-size: 24px; font-weight: bold; color: var(--text-color); margin-bottom: 10px;}
/* Character-Select Page Styling */
.character-container {display: flex; flex-wrap: nowrap; align-items: flex-start; max-width: 1600px; margin: 0 auto; gap: 20px;}
.character-image {flex-shrink: 0; width: 500px;}
.character-info {flex-grow: 1; max-width: 100%;}
.video-wrapper {aspect-ratio: 3 / 7; width: 500px; max-height: 1150px; flex-shrink: 0; overflow: hidden;}
.video-wrapper video {width: 100%; height: 100%; object-fit: cover; display: block;}
#image-container {width: 500px; min-height: 1150px; display: flex; align-items: flex-start; justify-content: center;}
#image-container img {max-width: 100%; height: auto; object-fit: contain; border-radius: 8px;}
.character-image.has-video {width: 500px; flex-shrink: 0;}
.character-image:not(.has-video) {width: 500px; min-height: 650px; flex-shrink: 0; display: flex; align-items: flex-start; justify-content: center;}
.character-image:not(.has-video) img {max-width: 100%; height: auto; object-fit: contain; border-radius: 8px;}
.image-navigation-buttons {display: flex; justify-content: center; gap: 10px; margin-bottom: 10px; width: 100%;}
.nav-button {background-color: var(--button-bg); color: var(--button-text); border: 1px solid var(--content-border); padding: 4px 7px; border-radius: 6px; cursor: pointer; font-weight: bold; font-size: 1.2em; transition: background-color 0.2s ease, transform 0.1s ease; min-width: 45px; user-select: none;}
.nav-button:hover {background-color: var(--button-hover); color: var(--text-color); transform: translateY(-1px);}
.nav-button:active {transform: translateY(0);}
.image-container-wrapper {width: 100%; display: flex; align-items: flex-start; justify-content: center;}
.image-container-wrapper img {max-width: 100%; height: auto; object-fit: contain; border-radius: 8px;}
.single-image .image-navigation-buttons {display: none;}
.character-image {display: flex; flex-direction: column; align-items: center; width: 500px; flex-shrink: 0;}
@media (max-width: 768px) {.nav-button {padding: 6px 12px; font-size: 1em; min-width: 40px;} .image-navigation-buttons {gap: 8px; margin-bottom: 8px;}}
.character-grid {display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 1200px; margin: 0 auto; padding: 20px;}
.character-item, .character-item-Arties {position: relative; width: 100%; aspect-ratio: 3/4; border: 2px solid #000; overflow: hidden; background-color: #f5f5f5; transition: transform 0.3s ease;}
.character-item img, .character-item-Arties img {width: 100%; height: 100%; object-fit: cover; object-position: center top;}
.character-name {position: absolute; top: 10px; left: 10px; background-color: rgba(0, 0, 0, 0.7); color: white; padding: 5px 10px; font-size: 1.2em; z-index: 1; border-radius: 4px;}
.character-item a, .character-item-Arties a {display: block; width: 100%; height: 100%; text-decoration: none;}
.character-item:hover, .character-item-Arties:hover {transform: scale(1.02); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);}
.image-boxes {position: relative; top: auto; right: auto; display: flex; gap: 10px; justify-content: center; margin-top: 15px; padding: 15px; background-color: var(--moon-card-bg); border-radius: 8px; border: 2px solid var(--content-border);}
.image-box {width: 60px; height: 60px; border: 2px solid var(--content-border); border-radius: 5px; overflow: hidden; cursor: pointer; display: flex; align-items: center; justify-content: center; background-color: var(--content-bg); transition: transform 0.2s ease;}
.image-box img {width: 100%; height: 100%; object-fit: cover; display: block;}
.image-box:hover {transform: scale(1.1); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);}
.modal-caption {position: absolute; bottom: 130px; left: 50%; transform: translateX(-50%); color: white; text-align: center; font-size: 1.2em; font-family: Arial, sans-serif; max-width: 80%; background: rgba(0, 0, 0, 0.6); padding: 10px; border-radius: 8px;}
@media (max-width: 768px) {.character-container {flex-direction: column;}.character-image {margin-right: 5px; margin-bottom: 20px;}}
@media (max-width: 1200px) {.character-grid {max-width: 900px;}}
@media (max-width: 768px) {.character-grid {padding: 10px; gap: 10px;}}
@media (max-width: 600px) {.character-grid {grid-template-columns: 1fr; max-width: 450px;}}
@media screen and (max-width: 768px) {.character-container {flex-direction: column; align-items: center;}.character-info {width: 100%; max-width: 100%;}.character-image {margin-right: 0; margin-bottom: 20px;}}
/* NPCs Directory Page Styling */
.npcpage-container {max-width: 1200px; margin: 0 auto; padding: 20px;}
.npcpage-header {text-align: center; margin-bottom: 40px; padding: 40px 0; background: var(--sign-card-bg); backdrop-filter: blur(10px); border-radius: 20px; border: 1px solid var(--content-border);}
.npcpage-header h1 {font-size: 3rem; background: var(--text-color); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 15px; text-shadow: 0 0 30px rgba(135, 206, 235, 0.3);}
.npcpage-subtitle {font-size: 1.2rem; color: var(--sign-sub-text); font-style: italic; margin: 0;}
.npcpage-section {margin-bottom: 50px;}
.npcpage-section-header {text-align: center; margin-bottom: 30px;}
.npcpage-section-header h2 {font-size: 2.2rem; color: var(--text-color); margin-bottom: 10px; font-weight: bold;}
.npcpage-section-description {font-size: 1.1rem; color: var(--sign-sub-text); font-style: italic; margin: 0;}
.npcpage-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 25px; margin-top: 30px;}
.npcpage-card {background: var(--sign-card-bg); backdrop-filter: blur(15px); border-radius: 15px; padding: 25px; border: 2px solid var(--content-border); text-decoration: none; color: inherit; transition: all 0.3s ease; position: relative; overflow: hidden; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);}
.npcpage-card::before {content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--nav-bg); transform: scaleX(0); transition: transform 0.3s ease;}
.npcpage-card:hover {transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2); border-color: var(--nav-bg);}
.npcpage-card:hover::before {transform: scaleX(1);}
.npcpage-card-content h3 {font-size: 1.4rem; color: var(--text-color); margin-bottom: 10px; font-weight: bold; text-align: center;}
.npcpage-card-content p {color: var(--sign-sub-text); line-height: 1.5; margin: 0; text-align: center;}
/* Themed card variations */
.npcpage-card.guards::before {background: linear-gradient(90deg, #dc2626, #ef4444);}
.npcpage-card.guards:hover {border-color: #dc2626;}
.npcpage-card.officials::before {background: linear-gradient(90deg, #7c3aed, #8b5cf6);}
.npcpage-card.officials:hover {border-color: #7c3aed;}
.npcpage-card.citizens::before {background: linear-gradient(90deg, #059669, #10b981);}
.npcpage-card.citizens:hover {border-color: #059669;}
.npcpage-card.combatants::before {background: linear-gradient(90deg, #ea580c, #f97316);}
.npcpage-card.combatants:hover {border-color: #ea580c;}
.npcpage-card.friends::before {background: linear-gradient(90deg, #16a34a, #22c55e);}
.npcpage-card.friends:hover {border-color: #16a34a;}
.npcpage-card.ambassadors::before {background: linear-gradient(90deg, #0891b2, #06b6d4);}
.npcpage-card.ambassadors:hover {border-color: #0891b2;}
.npcpage-card.notables::before {background: linear-gradient(90deg, #ca8a04, #eab308);}
.npcpage-card.notables:hover {border-color: #ca8a04;}
.npcpage-card.enemies::before {background: linear-gradient(90deg, #9f1239, #e11d48);}
.npcpage-card.enemies:hover {border-color: #9f1239;}
.npcpage-card.deceased::before {background: linear-gradient(90deg, #374151, #6b7280);}
.npcpage-card.deceased:hover {border-color: #374151;}
/* Mobile responsiveness for NPCs directory page */
@media (max-width: 768px) {.npcpage-container {padding: 15px;}.npcpage-header h1 {font-size: 2.5rem;}.npcpage-section-header h2 {font-size: 1.8rem;}.npcpage-grid {grid-template-columns: 1fr; gap: 20px;}.npcpage-card {padding: 20px;}}
@media (max-width: 480px) {.npcpage-header {padding: 30px 15px;margin-bottom: 30px;}.npcpage-header h1 {font-size: 2rem;}.npcpage-subtitle {font-size: 1rem;}.npcpage-section {margin-bottom: 40px;}.npcpage-card {padding: 15px;}.npcpage-card-content h3 {font-size: 1.2rem;}}
/* New Character Page Style */
#video-container,
#image-container {width: 100%; min-height: 0; margin: 0; padding: 0;}
/* Make sure both video and image have the same container behavior */
.newnpc-video-wrapper {width: 100%; position: relative; overflow: hidden; border-radius: 10px; margin: 0; padding: 0;}
/* Ensure video and image have consistent aspect ratio behavior */
.newnpc-video-wrapper video.newnpc-portrait,
.newnpc-portrait {width: 100%; height: auto; display: block; object-fit: cover; border-radius: 10px; box-shadow: 0 8px 25px rgba(var(--nav-bg), 0.5); border: 3px solid rgba(var(--nav-bg), 0.6); margin: 0; padding: 0;}
/* Force consistent dimensions */
.newnpc-media-toggle-container {display: flex; flex-direction: column; align-items: center; gap: 0; margin: 0; padding: 0;}
/* Ensure buttons don't add extra spacing */
.newnpc-media-buttons {margin-top: 10px; margin-bottom: 0; display: flex; gap: 10px; padding: 0;}
.newnpc-media-buttons button {background-color: var(--button-bg); color: var(--button-text); border: 1px solid var(--content-border); padding: 5px 10px; border-radius: 6px; cursor: pointer; font-weight: bold; font-size: 0.9em; transition: background-color 0.2s ease; margin: 0;}
.newnpc-media-buttons button:hover {background-color: var(--button-hover); color: var(--text-color);}
/* Additional fix: Ensure portrait section doesn't have flexible height */
.newnpc-portrait-section {position: relative; flex-shrink: 0;}
/* Photo Modal Config */
.photo-modal {display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.85); align-items: center; justify-content: center; padding: 40px 20px; box-sizing: border-box; flex-direction: column;}
.photo-modal-wrapper {max-width: 90%; max-height: 90%; text-align: center;}
.photo-modal-image {max-width: 100%; max-height: 70vh; border-radius: 8px; margin-bottom: 10px;}
.photo-modal-caption {color: white; font-size: 1.1em; background-color: rgba(0,0,0,0.5); padding: 10px 20px; border-radius: 8px; display: inline-block;}
/* Media toggle container */
.media-toggle-container {display: flex; flex-direction: column; align-items: center; gap: 10px;}
.media-buttons {margin-bottom: 5px; display: flex; gap: 10px;}
.media-buttons button {background-color: var(--button-bg); color: var(--button-text); border: 1px solid var(--content-border); padding: 5px 10px; border-radius: 6px; cursor: pointer; font-weight: bold; font-size: 0.9em; transition: background-color 0.2s ease;}
.media-buttons button:hover {background-color: var(--button-hover); color: var(--text-color);}
/* Photo Modal Navigation */
.photo-modal-nav-container {display: flex; align-items: center; gap: 20px; max-width: 90%; max-height: 90%;}
.photo-modal-nav {font-size: 3em; color: white; cursor: pointer; user-select: none; padding: 10px 15px; background-color: rgba(0, 0, 0, 0.5); border-radius: 50%; transition: background-color 0.3s ease, transform 0.2s ease; display: flex; align-items: center; justify-content: center; min-width: 60px; height: 60px;}
.photo-modal-nav:hover {background-color: rgba(0, 0, 0, 0.8); transform: scale(1.1);}
.photo-modal-nav-prev {margin-left: 20px;}
.photo-modal-nav-next {margin-right: 20px;}
.photo-modal-wrapper {flex: 1; display: flex; justify-content: center; align-items: center;}
/* Mobile responsiveness */
@media (max-width: 768px) {.character-container {flex-direction: column; align-items: center;}.character-info {width: 100%; max-width: 100%;} .character-image, .character-image.has-video, .character-image:not(.has-video) {margin-right: 0; margin-bottom: 20px; width: 100%; max-width: 300px;}}
/* Birthday Page */
.birthday-header {text-align: center; margin: 20px 0;}
.birthday-controls {text-align: center; margin: 20px 0;}
.birthday-select {padding: 5px; font-size: 1em;}
.birthday-button {margin-left: 10px; padding: 5px 15px;}
.no-birthdays-message {display: none; text-align: center; margin: 40px;}
.birthday-countdown {color: var(--button-text); font-weight: bold;}
/* New NPC Layout */
.npc-container {max-width: 1200px; margin: 0 auto; background: rgba(15, 20, 25, 0.9); border-radius: 15px; overflow: hidden; box-shadow: 0 0 30px rgba(46, 125, 50, 0.3); border: 2px solid rgba(46, 125, 50, 0.5);}
.npc-header {background: var(--nav-bg); padding: 30px; text-align: center; position: relative; overflow: hidden;}
.npc-header::before {content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('data:image/svg+xml,') repeat; animation: sparkle 3s ease-in-out infinite;}
@keyframes sparkle {0%, 100% { opacity: 0.3; } 50% { opacity: 0.8; }}
.npc-header h1 {font-size: 3.5em; margin: 0; text-shadow: 3px 3px 6px rgba(0,0,0,0.7); position: relative; z-index: 1;}
.npc-subtitle {font-size: 1.3em; margin: 10px 0 0 0; font-style: italic; opacity: 0.9; position: relative; z-index: 1;}
.npc-dossier-content {display: grid; grid-template-columns: 400px 1fr; gap: 30px; padding: 30px;}
.npc-portrait-section {position: relative;}
.npc-portrait {width: 100%; border-radius: 10px; box-shadow: 0 8px 25px rgba(var(--nav-bg), 0.5); border: 3px solid rgba(var(--nav-bg), 0.6);}
.npc-button-swap {background: var(--nav-bg); color: white; padding: 10px; text-align: center; font-weight: bold; font-size: 1.1em; margin-top: 15px; border-radius: 8px; box-shadow: 0 4px 15px rgba(var(--nav-bg), 0.3);}
.npc-info-section {display: flex; flex-direction: column; gap: 25px;}
.npc-section {background: var(--sign-card-bg); padding: 25px; border-radius: 10px; border-left: 5px solid var(--sign-card-bg); box-shadow: 0 4px 15px rgba(0,0,0,0.3);}
.npc-section h2 {color: var(--text-color); margin: 0 0 20px 0; font-size: 1.8em; border-bottom: 2px solid var(--text-color); padding-bottom: 10px; text-shadow: 1px 1px 3px rgba(0,0,0,0.5);}
.npc-detail-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 20px;}
.npc-detail-item {background: var(--moon-card-bg); padding: 15px; border-radius: 8px; border: 1px solid var(--nav-bg);}
.npc-detail-label {font-weight: bold; color: var(--text-color); margin-bottom: 5px;}
.npc-detail-value {color: var(--text-color);}
.npc-full-width {grid-column: 1 / -1;}
.npc-personality-traits {display: grid; grid-template-columns: 1fr 1fr; gap: 15px;}
.npc-trait-category {background: var(--moon-card-bg); padding: 15px; border-radius: 8px; border: 1px solid var(--nav-bg);}
.npc-trait-title {font-weight: bold; color: var(--text-color); margin-bottom: 10px; font-size: 1.1em;}
.npc-trait-list {list-style: none; padding: 0; margin: 0;}
.npc-trait-list li {padding: 5px 0; border-bottom: 1px solid var(--sign-card-bg); color: var(--text-color);}
.npc-trait-list li:last-child {border-bottom: none;}
.npc-quote-box {background: var(--moon-card-bg); border: 2px solid var(--nav-bg); border-radius: 10px; padding: 20px; font-style: italic; font-size: 1.2em; text-align: center; position: relative; margin-top: 20px;}
.npc-quote-box::before {content: '"'; font-size: 4em; color: var(--text-color); position: absolute; top: -10px; left: 15px;}
.npc-quote-box::after {content: '"'; font-size: 4em; color: var(--text-color); position: absolute; bottom: -40px; right: 15px;}
.npc-quotes-v2 {background: var(--moon-card-bg);border: 2px solid var(--nav-bg);border-radius: 12px;padding: 18px 20px;margin-top: 20px;}
.npc-quote-v2 {margin: 0;padding: 10px 0;text-align: center;font-style: italic;position: relative;}
.npc-quote-v2 p {margin: 0;font-size: 1.05em;line-height: 1.35;}
.npc-quote-v2::before {content: '"';color: var(--text-color);position: absolute;left: 0;top: 2px;font-size: 2.2em;opacity: 0.35;}
.npc-quote-v2::after {content: '"';color: var(--text-color);position: absolute;right: 0;bottom: -6px;font-size: 2.2em;opacity: 0.35;}
.npc-quote-v2 + .npc-quote-v2 {border-top: 1px solid rgba(255, 255, 255, 0.10);margin-top: 10px;padding-top: 16px;}
.npc-relationship-tag {display: inline-block; background: var(--sign-card-bg); padding: 5px 12px; border-radius: 15px; margin: 5px; font-size: 0.9em; border: 1px solid var(--nav-bg);}
.npc-warning-box {background: linear-gradient(135deg, rgba(183, 28, 28, 0.5), rgba(183, 28, 28, 0.4)); border: 2px solid rgba(183, 28, 28, 0.4); border-radius: 10px; padding: 15px; margin-top: 15px;}
.npc-warning-title {color: #f44336; font-weight: bold; margin-bottom: 10px;}
@media (max-width: 768px) {.content {grid-template-columns: 1fr; padding: 20px;}.detail-grid {grid-template-columns: 1fr;}.personality-traits {grid-template-columns: 1fr;}}
/* NPC Pages Styling */
.npc-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; padding: 20px; max-width: 100%; box-sizing: border-box;}
.npc-item {background-color: var(--content-bg); border: 2px solid var(--content-border); border-radius: 10px; padding: 20px; text-align: center; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; justify-content: center; align-items: center; height: 150px; transition: transform 0.2s ease, box-shadow 0.2s ease;}
.npc-item:hover {transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);}
.npc-item h3 {font-size: 1.2em; margin: 0 0 5px; color: var(--text-color);}
.npc-item h3 a {text-decoration: none; color: inherit;}
.npc-item h3 a:hover {text-decoration: underline;}
.npc-item p {margin: 0; font-size: 0.9em; color: var(--text-color);}
.npc-container.large {grid-template-columns: 1fr;}
.npc-buttons {display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 800px; margin: 50px auto; justify-content: center; align-items: center;}
.npc-button {background-color: var(--button-bg); color: var(--button-text) !important; text-decoration: none; text-align: center; padding: 15px 10px; font-size: 1.2em; border-radius: 8px; transition: background-color 0.3s ease, transform 0.2s ease; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); display: inline-block; min-width: 150px;}
.npc-button:hover {background-color: var(--button-hover); color: var(--text-color) !important; transform: translateY(-3px);}
.npc-button.full-width {grid-column: span 3;}
.citizen-list {margin-top: 30px; padding: 20px; background-color: var(--content-bg); border: 2px solid var(--content-border); border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);}
.citizen-list h2 {color: var(--text-color); text-align: center; font-size: 1.8em; margin-bottom: 20px;}
.citizen-content {column-count: 2; column-gap: 20px; height: 2300px; overflow-y: auto; padding: 10px; box-sizing: border-box;}
.citizen-content p {margin: 0 0 10px; break-inside: avoid;}
.citizens-container {max-width: 2400px; margin: 0 auto; padding: 20px;}
.family-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 20px; margin-bottom: 40px;}
.family-card {border: 2px solid var(--content-border); border-radius: 10px; padding: 20px; background-color: var(--button-hover);}
.family-name {color: var(--text-color); font-size: 1.2em; font-weight: bold; margin-bottom: 15px; padding-bottom: 5px; border-bottom: 2px solid var(--content-border);}
.family-member {padding: 10px; margin-bottom: 10px; background-color: var(--content-bg); border-radius: 5px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);}
.member-name {font-weight: bold; color: var(--text-color);}
.member-details {color: var(--button-text); font-size: 0.9em; margin-top: 5px;}
.section-title {color: var(--text-color); font-size: 1.5em; text-align: center; margin: 30px 0;}
.individuals-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 15px; margin-top: 20px;}
.individual-card {border: 1px solid var(--content-border); border-radius: 8px; padding: 15px; background-color: var(--content-bg);}
@media (max-width: 768px) {.npc-container {grid-template-columns: 1fr;}}
/* Map Page Styling */
.map-page-container {width: 100%; display: flex; flex-direction: column; margin-top: 50px; align-items: center;}
.map-container {width: 100%; max-width: 2500px; position: relative; display: block; margin: 0 auto; padding: 0;}
.map-image {width: 100%; height: auto; display: block; object-fit: contain; margin: 0 auto;}
#cities-container {display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 20px;}
#cities-container a {width: 180px; height: 40px; padding: 5px; background-color: var(--button-bg); color: var(--button-text); border: 2px solid var(--content-border); border-radius: 5px; cursor: pointer; transition: all 0.3s ease; font-size: 14px; text-decoration: none; display: flex; align-items: center; justify-content: center; font-weight: bold;}
#cities-container a:hover {background-color: var(--button-hover); color: var(--text-color); transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);}
@media screen and (max-width: 1800px) {.map-container {width: 100%; max-width: none;}}
@media screen and (min-width: 2000px) {.map-container {padding: 0 20px;}}
/* Enchanted Gem Page Styling
.gem-collapsible {position: relative; overflow: hidden; background: linear-gradient(to right, #3a3a3a, #1f1f1f); color: #fff; border: 1px solid var(--content-border); padding: 15px; cursor: pointer; transition: background 0.3s ease; margin-bottom: 5px; border-radius: 6px; display: flex; justify-content: space-between; align-items: center;}
.gem-collapsible:hover {background: linear-gradient(to right, #505050, #2a2a2a); box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);}
.gem-collapsible::before {content: "\25BA"; font-size: 1em; color: #ccc; transition: transform 0.3s ease; margin-right: 10px;}
.gem-collapsible.active::before {transform: rotate(90deg);}
.gem-price::after {content: " ✦"; color: gold;}
.gem-content {background-color: rgba(255, 255, 255, 0.03); border-left: 4px solid var(--button-hover); padding: 15px; animation: fadeIn 0.3s ease-in-out;}
.gem-content-container {display: flex; gap: 20px; align-items: flex-start;}
.gem-icon {width: 80px; height: 80px; border-radius: 6px; overflow: hidden; background-color: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center;}
.gem-icon img {max-width: 100%; max-height: 100%; object-fit: contain;}
.gem-details h1 {font-size: 1.2em; margin-bottom: 5px; color: var(--button-text);}
.gem-details ul li {margin-left: 20px; margin-bottom: 5px; list-style-type: disc; color: var(--text-color);}
@keyframes fadeIn {from { opacity: 0; } to { opacity: 1; }} */
/* Updated Gem Card Styling with CSS Variables
details.gem-card {background: linear-gradient(to right, var(--content-bg), var(--bg-color)); border: 1px solid var(--content-border); border-radius: 6px; margin-bottom: 10px; padding: 0; overflow: hidden; transition: all 0.3s ease;}
details.gem-card summary {list-style: none; cursor: pointer; padding: 10px 15px; display: flex; justify-content: space-between; align-items: center; font-weight: bold; color: var(--text-color); background-color: var(--button-bg); transition: background-color 0.3s ease; position: relative;}
details.gem-card[open] summary {background-color: var(--button-hover);}
details.gem-card summary::before {content: "▶"; display: inline-block; margin-right: 10px; transition: transform 0.3s ease; font-size: 0.8em; color: var(--text-color);}
details.gem-card[open] summary::before {transform: rotate(90deg);}
.gem-name {flex-grow: 1; color: var(--text-color);}
.gem-price {color: gold; font-weight: normal; margin-left: auto;}
.gem-price::after {content: " ✦"; color: gold;}
.gem-content {padding: 10px 15px; color: var(--text-color); background-color: var(--content-bg);}
.gem-content-container {display: flex; gap: 20px; align-items: flex-start;}
.gem-icon {width: 80px; height: 80px; border-radius: 6px; overflow: hidden; background-color: var(--button-bg); border: 1px solid var(--content-border); display: flex; align-items: center; justify-content: center; flex-shrink: 0;}
.gem-icon img {max-width: 100%; max-height: 100%; object-fit: contain;}
.gem-details h1 {font-size: 1.2em; margin-bottom: 5px; color: var(--button-text);}
.gem-details ul {margin: 10px 0; padding-left: 20px;}
.gem-details ul li {margin-bottom: 5px; list-style-type: disc; color: var(--text-color);}
/* Remove default summary marker
details summary::-webkit-details-marker {display: none;}
details summary::-moz-list-bullet {list-style-type: none;}
/* Remove default bullets and add custom icons
.gem-details ul {margin: 10px 0; padding-left: 20px; list-style: none !important; list-style-type: none !important;}
.gem-details ul li {margin-bottom: 5px; color: var(--text-color); position: relative; padding-left: 25px; list-style: none !important;}
/* Remove the default bullet fallback since we're using custom icons
.gem-details ul li::before {position: absolute; left: 0; font-size: 16px;}
/* Custom icons based on classes added by JavaScript
.gem-details ul li.weapon-line::before {content: "⚔️";}
.gem-details ul li.armor-line::before {content: "🛡️";}
.gem-details ul li.jewelry-line::before {content: "💎";}
*/
/* Session Page Styling */
.session-collapsible {display: flex; justify-content: space-between; align-items: center; width: 100%; background-color: var(--button-bg); color: var(--button-text); cursor: pointer; padding: 15px; border: none; text-align: left; outline: none; font-size: 1.5em; transition: background-color 0.3s; margin-bottom: 5px; position: relative;}
.session-content {padding: 15px; overflow: hidden; background-color: var(--content-bg); border: 1px solid var(--content-border); border-radius: 5px; display: none;}
/* Bolo Page Styling */
.bolo-collapsible {display: flex; justify-content: space-between; align-items: center; width: 100%; background-color: var(--button-bg); color: white; cursor: pointer; padding: 15px; border: none; text-align: left; outline: none; font-size: 1.5em; transition: background-color 0.3s; margin-bottom: 5px; position: relative;}
.bolo-collapsible:hover {background-color: var(--button-hover);}
.bolo-name {flex-grow: 1; margin-right: 100px;}
.bolo-link {color: var(--text-color); font-weight: normal; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); white-space: nowrap;}
.icon-question-mark {display: inline-block; font-size: 20px; font-weight: bold; color: var(--button-text); border: 2px solid var(--button-text); border-radius: 50%; width: 25px; height: 25px; text-align: center; line-height: 25px; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); white-space: nowrap;}
.bolo-content {padding: 15px; overflow: hidden; background-color: var(--content-bg); border: 1px solid var(--content-border); border-radius: 5px;display: none;}
/* Bolo Tech Breakdown Styling */
/* .bolo-content-section1 {padding: 20px; margin-bottom: 20px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); background-color: #BBC9EF;}
.bolo-content-section2 {padding: 20px; margin-bottom: 20px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); background-color: #eaf7ea;}
.bolo-content-section3 {padding: 20px; margin-bottom: 20px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); background-color: #fdf1dc;}
.bolo-content-section4 {padding: 20px; margin-bottom: 20px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); background-color: #FADDFD;}
.bolo-content-section5 {padding: 20px; margin-bottom: 20px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); background-color: #A0CFCE;} */
/* Book Page Styling */
.book-container {display: flex; margin-top: 20px;}
.book-image {flex: 1; max-width: 600px; margin-right: 20px;}
.book-image img {width: 100%; height: auto; border-radius: 5px;}
.book-info {flex: 3;}
.book-collapsible {background-color: var(--button-bg); color: var(--button-text); cursor: pointer; padding: 15px; width: 100%; border: none; text-align: left; outline: none; font-size: 1.5em; transition: background-color 0.3s; margin-bottom: 5px;}
.book-collapsible:hover {background-color: var(--button-hover);}
/* .book-collapsible-header {background: linear-gradient(to bottom, #006400, #001a00); color: #a0ffa0; padding: 10px 15px; font-size: 1.5em; border: none; text-align: left; width: 100%; cursor: pointer; border-radius: 5px; outline: none; transition: background-color 0.3s ease;} */
.book-collapsible-header:hover {background-color: var(--button-bg);}
/* .book-collapsible-content {padding: 15px; background-color: #E0F7E0; border: 1px solid #004d00; border-radius: 5px; margin-bottom: 10px; display: block; overflow: hidden; transition: max-height 0.3s ease-out;} */
.book-collapsible-section.active .book-collapsible-content {display: block;}
.book-content {padding: 15px; overflow: hidden; background-color: var(--content-bg); border: 1px solid var(--content-border); border-radius: 5px; display: none;}
/* Realms Page Styling */
.realms-container {display: flex; justify-content: space-between; gap: 20px; margin-top: 20px;}
.realm-column {flex: 1; padding: 20px; border: 2px solid var(--content-border); border-radius: 10px; background-color: var(--content-bg); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);}
.realm-column h3 {color: var(--button-text); font-size: 1.5em; margin-bottom: 15px;}
.realm-column p {color: var(--text-color); line-height: 1.6;}
#MRcontent {margin-top: 50px; max-width: 2400px; margin-left: auto; margin-right: auto; padding: 20px; box-sizing: border-box;}
/* Animal Market Styling */
.animal-market {display: flex; justify-content: space-between; gap: 20px;}
.animal-column {flex: 1; padding: 10px; background-color: var(--content-bg); border: 1px solid var(--content-border); border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);}
.animal-column h2 {text-align: center; color: var(--text-color);}
.animal-column table {width: 100%; border-collapse: collapse;}
.animal-column th, .animal-column td {padding: 8px; text-align: left; border-bottom: 1px solid var(--content-border);}
.animal-column th {background-color: var(--button-bg); color: var(--button-text);}
/* Labor Market Styling */
.labor-market {padding: 10px; background-color: var(--content-bg); border: 1px solid var(--content-border); border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);}
.labor-market h2 {text-align: center; color: var(--button-text);}
.labor-market table {width: 100%; border-collapse: collapse;}
.labor-market th, .labor-market td {padding: 8px; text-align: left; border-bottom: 1px solid var(--content-border);}
.labor-market th {background-color: var(--button-bg); color: var(--button-text);}
/* Food Market Styling */
.food-market {display: flex; flex-direction: column; gap: 20px;}
.food-column {flex: 1; padding: 10px; background-color: var(--content-bg); border: 1px solid var(--content-border); border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);}
.food-column h2 {text-align: center; color: var(--button-text);}
.food-column table {width: 100%; border-collapse: collapse;}
.food-column table th, .food-column table td {width: 25%; text-align: left; padding: 8px;}
.food-column table th {background-color: var(--button-bg); color: var(--button-text);}
.food-column table {width: 100%; table-layout: fixed; border-collapse: collapse;}
.food-nav {margin-bottom: 20px; text-align: center; padding: 10px; border-radius: 5px;}
/* .food-nav-button {display: inline-block; margin: 0 10px; padding: 8px 16px; background-color: var(--content-bg); color: #a0ffa0; text-decoration: none; border-radius: 5px; transition: background-color 0.3s;} */
.food-nav-button:hover {background-color: var(--button-hover);}
.food-section-header {display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;}
/* .food-back-to-top {font-size: 0.8em; padding: 4px 8px; background-color: var(--content-bg); color: #a0ffa0; text-decoration: none; border-radius: 3px; transition: background-color 0.3s;} */
.food-back-to-top:hover {background-color: var(--button-hover);}
.food-menu, .fruits, .vegetables, .spices, .drinks {background-color: var(--content-bg);}
/* Armor Market Styling */
.armor-section {text-align: center; margin-top: 20px; color: var(--button-text);}
.armor-table {width: 100%; border-collapse: collapse; margin: 15px 0; border: 1px solid var(--content-border);}
.armor-table th, .armor-table td {padding: 10px; text-align: center; border: 1px solid var(--content-border);}
.armor-table th {background-color: var(--content-bg); color: var(--button-text);}
/* Magic Item Page Styling */
.grid-container {display: flex; gap: 10px; flex-wrap: wrap;}
.grid-item {width: 180px; height: 60px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--content-border); border-radius: 10px; background-color: var(--button-bg); color: var(--button-text); text-decoration: none; font-weight: bold; transition: all 0.3s ease; text-align: center;}
.grid-item:hover {background-color: var(--button-hover); color: var(--button-text); transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);}
/* Estate-Item Page Styling */
.estate-card {background-color: var(--button-bg); border: 2px solid var(--content-border); padding: 20px; margin-top: 20px; font-family: 'Scala Sans', Arial, sans-serif; color: var(--text-color); max-width: 800px; margin-left: auto; margin-right: auto; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);}
.card-title {background-color: var(--button-hover); color: var(--button-text); padding: 10px; text-align: center; font-weight: bold; font-size: 1.5em; margin-top: 0; margin-bottom: 15px;}
.pf-stat {font-weight: bold; color: var(--button-text);}
.section-title {color: var(--button-text); font-weight: bold; margin-top: 15px; padding-bottom: 5px; font-size: 1.1em;}
.estate-card ul {margin: 10px 0; padding-left: 20px;}
.estate-card ul li {list-style-type: disc;}
/* Estate Upgrade Page Styling */
.columns-container {display: flex; justify-content: space-between; gap: 20px; margin-top: 20px;}
.column {flex: 1; padding: 20px; background-color: var(--button-bg); border: 1px solid var(--content-border); border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);}
.mundane-column h2, .magical-column h2 {color: var(--text-color); text-align: center; font-size: 1.5em; margin-bottom: 15px;}
.column ul {padding-left: 20px; list-style-type: none;}
.column ul li {margin-bottom: 8px; color: var(--text-color);}
.house-content-container {display: flex; align-items: flex-start; gap: 20px; max-width: 2800px; margin: 0 auto;}
.house-image-container {flex: 1; max-width: 2800px;}
.house-left-image {width: 100%; height: auto; border-radius: 5px;}
.house-text-content {flex: 2; padding: 20px; background-color: var(--button-bg); border: 1px solid var(--content-border); border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);}
.column ul li.purchased::before {content: none; color: var(--text-color); font-weight: bold;}
.check-item {list-style-type: none; padding-left: 30px; position: relative;}
.checkbox {position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; border: 2px solid var(--content-border); border-radius: 3px; background-color: var(--button-bg);}
.checkbox::before {content: "✓"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--text-color); font-size: 14px; font-weight: bold; display: block;}
.estate-stats-container {display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; padding: 0 20px; width: 100%; box-sizing: border-box; margin: 20px auto; text-align: center;}
.estate-stat {padding: 15px; border: 2px solid var(--content-border); border-radius: 8px; background-color: #C3FDB8; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); font-weight: bold; color: var(--text-color);}
.estate-finance-container {display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; padding: 0 20px; width: 100%; box-sizing: border-box; margin: 20px auto; text-align: center;}
.estate-finance-stat {padding: 15px; border: 2px solid var(--content-border); border-radius: 8px; background-color: #049A6D; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); font-weight: bold; color: #FFFEFC;}
@keyframes pulse-positive {0% { background-color: #00FF00;} 50% {background-color: #32CD32;} 100% {background-color: #00FF00;}}
@keyframes pulse-negative {0% { background-color: #FF0000;} 50% {background-color: #CD5C5C;} 100% {background-color: #FF0000;}}
@media (max-width: 768px) {.columns-container {flex-direction: column;}}
@media (max-width: 768px) {.house-content-container {flex-direction: column;}.house-image-container, .house-text-content {max-width: 100%;}}
.estate-header {background: linear-gradient(135deg, #1a365d 0%, #2d5a87 50%, #4a90a4 100%); border-radius: 20px; padding: 30px; margin-bottom: 30px; box-shadow: 0 15px 35px rgba(0,0,0,0.3); position: relative; overflow: hidden;}
.estate-header::before {content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('data:image/svg+xml,') repeat; animation: sparkle 4s ease-in-out infinite;}
@keyframes sparkle {0%, 100% { opacity: 0.3; }50% { opacity: 0.8; }}
.estate-title {font-size: 3.5em; color: #ffffff; text-align: center; margin: 0; text-shadow: 3px 3px 6px rgba(0,0,0,0.5); position: relative; z-index: 1; font-family: 'Cinzel', serif;}
.estate-subtitle {text-align: center; color: #e2e8f0; font-size: 1.3em; margin: 15px 0 0 0; position: relative; z-index: 1; font-style: italic;}
.estate-image-container {text-align: center; margin: 30px 0; border-radius: 15px; overflow: hidden; box-shadow: 0 10px 25px rgba(0,0,0,0.3);}
.estate-image-container img {width: 100%; height: auto; border-radius: 15px; transition: transform 0.3s ease;}
.estate-image-container:hover img {transform: scale(1.02);}
/* Modern dashboard styling for stats */
.estate-dashboard {display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin: 40px 0; padding: 0 10px;}
.dashboard-section {background: linear-gradient(145deg, var(--content-bg), var(--button-bg)); border-radius: 15px; padding: 25px; box-shadow: 0 8px 20px rgba(0,0,0,0.15); border: 2px solid var(--content-border); transition: transform 0.3s ease, box-shadow 0.3s ease;}
.dashboard-section:hover {transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0,0,0,0.25);}
.section-title {font-size: 1.4em; font-weight: bold; color: var(--text-color); margin-bottom: 20px; text-align: center; border-bottom: 2px solid var(--content-border); padding-bottom: 10px;}
.stat-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 15px;}
.stat-item {background: var(--bg-color); border: 2px solid var(--content-border); border-radius: 10px; padding: 15px; text-align: center; transition: all 0.3s ease; position: relative; overflow: hidden;}
.stat-item::before {content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); transition: left 0.5s ease;}
.stat-item:hover::before {left: 100%;}
.stat-item:hover {transform: scale(1.05); box-shadow: 0 5px 15px rgba(0,0,0,0.2);}
.stat-label {font-size: 0.9em; color: var(--text-color); margin-bottom: 8px; font-weight: 600;}
.stat-value {font-size: 1.4em; font-weight: bold; color: var(--text-color);}
/* Special styling for important stats */
.balance-section {background: linear-gradient(145deg, #1a365d, #2d5a87); color: white;}
.balance-section .stat-item {background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.3);}
.balance-section .stat-label, .balance-section .stat-value {color: white;}
.resource-section {background: linear-gradient(145deg, #744210, #a0670f); color: white;}
.resource-section .stat-item {background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.3);}
.resource-section .stat-label, .resource-section .stat-value {color: white;}
/* Title section styling */
.title-section {background: linear-gradient(145deg, #553c9a, #7c3aed); color: white; text-align: center; border-radius: 15px; padding: 25px; margin: 30px 0; box-shadow: 0 8px 20px rgba(0,0,0,0.15);}
.current-title {font-size: 1.8em; font-weight: bold; margin-bottom: 15px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3);}
.title-bonuses {background: rgba(255,255,255,0.1); border-radius: 10px; padding: 15px; border: 2px solid rgba(255,255,255,0.2);}
.title-bonuses h4 {margin: 0 0 10px 0; font-size: 1.2em;}
.title-bonuses ul {list-style: none; padding: 0; margin: 0;}
.title-bonuses li {padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,0.2);}
.title-bonuses li:last-child {border-bottom: none;}
/* Upgrade sections styling */
.upgrades-container {display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 40px;}
.upgrade-column {background: linear-gradient(145deg, var(--content-bg), var(--button-bg)); border-radius: 20px; padding: 30px; box-shadow: 0 10px 25px rgba(0,0,0,0.15); border: 2px solid var(--content-border);}
.upgrade-column h2 {color: var(--text-color); font-size: 2em; text-align: center; margin: 0 0 30px 0; padding-bottom: 15px; border-bottom: 3px solid var(--content-border);}
.upgrade-category {margin-bottom: 30px; background: var(--bg-color); border-radius: 15px; padding: 20px; border: 2px solid var(--content-border);}
.upgrade-category h3 {color: var(--text-color); font-size: 1.3em; margin: 0 0 15px 0; padding-bottom: 10px; border-bottom: 2px solid var(--content-border);}
.upgrade-list {list-style: none; padding: 0; margin: 0;}
.upgrade-item {display: flex; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--content-border); transition: background-color 0.3s ease;}
.upgrade-item:last-child {border-bottom: none;}
.upgrade-item:hover {background-color: rgba(0,0,0,0.05); border-radius: 8px; padding-left: 10px; padding-right: 10px;}
.upgrade-checkbox {width: 20px; height: 20px; border: 2px solid var(--content-border); border-radius: 4px; margin-right: 15px; display: flex; align-items: center; justify-content: center; background: var(--bg-color); transition: all 0.3s ease;}
.upgrade-item.purchased .upgrade-checkbox {background: #10b981; border-color: #10b981;}
.upgrade-item.purchased .upgrade-checkbox::before {content: "?"; color: white; font-weight: bold; font-size: 14px;}
.upgrade-link {color: var(--text-color); text-decoration: none; flex-grow: 1; transition: color 0.3s ease;}
.upgrade-link:hover {color: var(--button-text); text-decoration: underline;}
.upgrade-description {font-size: 0.9em; color: var(--button-text); margin-left: 10px; font-style: italic;}
/* Responsive design */
@media (max-width: 1200px) {.upgrades-container {grid-template-columns: 1fr;}}
@media (max-width: 768px) {.estate-title {font-size: 2.5em;}.dashboard-section {padding: 20px;} .stat-grid {grid-template-columns: 1fr 1fr;}}
/* Positive/Negative balance animations */
.positive-balance {animation: pulse-positive 2s infinite;}
.negative-balance {animation: pulse-negative 2s infinite;}
@keyframes pulse-positive {0% { background-color: #10b981; }50% { background-color: #34d399; }100% { background-color: #10b981; }}
@keyframes pulse-negative {0% { background-color: #ef4444; }50% { background-color: #f87171; }100% { background-color: #ef4444; }}
/* Modal Styling */
.modal-content {margin: auto; display: block; max-width: 80%; max-height: 80%; width: auto; height: auto; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); border-radius: 8px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.modal {display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background-color: rgba(0, 0, 0, 0.8);}
.close {position: absolute; top: 15px; right: 35px; color: #fff; font-size: 40px; font-weight: bold; transition: 0.3s;}
.close:hover, .close:focus {color: #bbb; text-decoration: none; cursor: pointer;}
/* Flowchart Styling */
.roll {color: green;}
.damage {color: red;}
.flow-step {background-color: var(--content-bg); border: 1px solid var(--content-border); border-radius: 5px; margin-bottom: 20px; padding: 15px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);}
.flow-step h3 {margin: 0; color: var(--text-color);}
.action {background-color: var(--content-bg); border-left: 4px solid var(--content-border); padding: 10px; margin: 10px 0;}
.decision {background-color: var(--content-bg); border-left: 4px solid var(--content-border); padding: 10px; margin: 10px 0;}
/* Change Log Styling */
.console-box {background-color: #1a1a1a; color: #00ff00; font-family: monospace; padding: 20px; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 255, 0, 0.5); max-width: 1500px; margin: 40px auto; white-space: pre-wrap;}
/* Character Sheet Styling */
.character-sheet-container {display: grid; grid-template-columns: 1fr 1fr; gap: 20px; width: 100%; max-width: 1200px; margin: auto;}
.left-column {display: flex; flex-direction: column; gap: 20px;}
.right-column {display: flex; flex-direction: column; gap: 20px; background-color: var(--content-bg); padding: 15px; border-radius: 8px; border: 2px solid var(--content-border); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);}
.right-column td {background-color: var(--content-bg);}
.boxed {display: inline-block; padding: 4px 8px; border: 2px solid var(--content-border); border-radius: 5px; background-color: var(--content-bg); font-weight: bold;}
.ability-table {width: auto; border-collapse: collapse;}
.ability-table th, .ability-table td {padding: 5px 10px; text-align: center; white-space: nowrap;}
.ability-table th, .combat-table th, .right-column th {font-weight: bold; background-color: var(--content-bg); color: var(--text-color);}
#cmb_total, #cmd_total {min-width: 50px; text-align: center; padding: 2px;}
.skills-table td:first-child {width: 20px; text-align: center;}
.skills-table input[type="checkbox"] {transform: scale(1.2); cursor: pointer;}
.abilities-box {background: var(--content-border); padding: 2px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);}
.ability-content {display: none; padding: 10px; background: #E0F7E0; border: 1px solid #004d00; border-radius: 5px; margin-bottom: 10px;}
.toggle-symbol {font-weight: bold; color: var(--text-color); cursor: pointer; font-size: 1.2em; width: 20px; text-align: center;}
.ability-name {font-weight: bold; flex-grow: 1;}
.abilities-container {background-color: var(--content-hover); padding: 20px; border-radius: 10px;}
.ability-item {background-color: var(--content-bg); border: 1px solid #004d00; border-radius: 0px; margin-bottom: 0px; overflow: hidden;}
.language-item {background-color: var(--content-bg); border: 1px solid #004d00; border-radius: 0px; margin-bottom: 0px; overflow: hidden;}
.ability-toggle {width: 100%; text-align: left; padding: 10px 15px; font-size: 1.2em; font-weight: bold; background: white; border: none; cursor: pointer; outline: none; display: block;}
.ability-toggle:hover {background-color: var(--content-bg)}
.ability-details {padding: 10px 15px; background-color: var(--button-bg); display: none;}
.hidden {display: none;}
.secondary-highlight {background-color: var(--content-bg);}
/* Class Page Styling */
.class-ceiling {scroll-margin-top: 60px;}
/* Calendar Styling */
.calendar-container {width: 100%; max-width: none; margin: 0; padding: 0;}
.calendar-image-wrapper {position: relative; width: 100%; display: block; overflow: hidden;}
.calendar-image {width: 100%; height: auto; display: block;}
.calendar-nav {position: absolute; top: 50%; transform: translateY(-50%); font-size: 2em; color: var(--text-color); text-decoration: none; padding: 10px; background-color: rgba(255, 255, 255, 0.7); border-radius: 50%; transition: background-color 0.3s; z-index: 10;}
.calendar-nav:hover {background-color: rgba(255, 255, 255, 0.9);}
.calendar-nav-prev {left: 10px;}
.calendar-nav-next {right: 10px;}
.calendar-grid {display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; padding: 10px; background-color: var(--content-bg); border: 2px solid var(--content-border); border-radius: 10px;}
.calendar-day {display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; height: 120px; border: 2px solid var(--content-border); background-color: var(--content-bg); color: var(--text-color); font-size: 1em; cursor: pointer; transition: background-color 0.3s ease, transform 0.2s; font-family: 'Lora', serif; padding: 10px;}
.calendar-day span:first-child {position: absolute; top: 5px; left: 5px; color: var(--text-color); font-size: 1.2em; font-weight: bold;}
.calendar-day span:not(:first-child) {font-family: 'Dancing Script', cursive; color: var(--text-color); text-align: center; margin-top: 5px; font-size: 1.1em; line-height: 1.4;}
.calendar-day:hover {background-color: #f0f8ff; transform: scale(1.02); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);}
.holiday-details {margin-top: 20px; padding: 15px; border: 1px solid var(--content-border); background-color: var(--content-bg); border-radius: 5px; font-family: 'Lora', serif; font-size: 1em; color: var(--text-color);}
.hidden-detail {display: none;}
.season-section {margin: 40px auto; padding: 20px; max-width: 800px; border: 4px solid var(--content-border); border-radius: 25px; text-align: center;}
.season-title {font-size: 24px; color: var(--text-color); margin-bottom: 20px; font-weight: bold;}
.season-content {display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;}
.month-box {padding: 15px 20px; background-color: var(--button-hover); color: var(--button-text);; text-decoration: none; font-weight: bold; border: 3px solid var(--content-border); border-radius: 15px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); transition: transform 0.3s, background-color 0.3s;}
.month-box:hover {background-color: var(--button-hover); transform: translateY(-5px);}
.hidden-detail h2 {text-align: center; color: var(--button-text);}
/* Monster Page Styling */
.pf-monster-card {max-width: 100%; width: 100%; background-color: var(--button-bg); padding: 5px; border: 2px solid var(--content-border); font-family: 'Scala Sans', system-ui; margin: 10px auto; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px;}
.pf-image-container {position: relative; display: inline-block; overflow: hidden; width: auto; height: auto;}
.pf-image-container img {max-width: 60%; height: auto; display: block; object-fit: contain;}
.pf-content-left, .pf-content-right {width: 48%; box-sizing: border-box;}
.pf-content-right {padding-top: 60px; padding-left: 10px;}
.pf-monster-title {font-size: 1.6em; color: var(--button-text); margin: 0; padding-top: 60px;}
.pf-monster-subtitle {font-style: italic; margin: 5px 0; padding-bottom: 5px; border-bottom: 2px solid var(--content-border);}
.pf-stats-block {margin: 10px 0;}
.pf-stat-line {margin: 5px 0;}
.pf-stat-name {font-weight: bold; color: var(--button-text);}
.pf-ability-scores {display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; margin: 10px 0; text-align: center;}
.pf-ability-score {font-weight: bold;}
/* .pf-ability-mod {color: #666;} */
.pf-section-header {color: var(--button-text); font-weight: bold; margin: 10px 0 5px 0;}
#monsters-grid {display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 20px; margin: 0 auto; max-width: 1200px;}
.cr-group {border: 2px solid var(--content-border); border-radius: 10px; padding: 20px; background-color: var(--content-bg);}
.cr-group h2 {text-align: center; color: var(--button-text); margin-bottom: 10px;}
.cr-container {margin-bottom: 20px;}
.cr-container h3 {color: var(--text-color); margin-bottom: 5px;}
.monster-button {display: inline-block; padding: 10px 20px; font-size: 1em; color: var(--button-text); background-color: var(--button-bg); border: 2px solid var(--content-border); border-radius: 5px; text-decoration: none; transition: background-color 0.3s ease, transform 0.2s ease;}
.monster-button:hover {background-color: var(--button-hover);transform: translateY(-2px);}
/* Spell List Styling */
.spell-box {background-color: var(--content-bg); padding: 15px; border-radius: 5px; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); margin-bottom: 20px;} /* border: 1px solid #ccc; */
.spell-entry {scroll-margin-top: 60px; padding: 0; border: none; background: none; box-shadow: none;}
/* Material List Styling */
.material-box {background-color: var(--content-bg); border: 1px solid #ccc; padding: 15px; border-radius: 5px; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); margin-bottom: 20px;}
.material-entry {scroll-margin-top: 60px; padding: 0; border: none; background: none; box-shadow: none;}
.material-box table {table-layout: fixed; width: 100%;}
.material-box th:first-child {width: 70%;}
.material-box th:last-child {width: 30%; text-align: right;}
/* Magic Item Container */
.mi-container {max-width: 800px; margin: 40px auto; padding: 20px; background-color: var(--content-bg); border-radius: 10px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); text-align: left;}
.mi-container img {max-width: 100%; height: auto; border-radius: 5px;}
.mi-container h1 {margin-top: 20px;}
/* New NPC Configuration */
.npc-row {background-color: var(--button-bg); border: 2px solid var(--content-border); border-radius: 10px; margin-bottom: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); transition: background-color 0.3s ease;}
.npc-link {display: flex; justify-content: space-between; align-items: center; text-decoration: none; padding: 15px 20px; color: var(--button-text);}
.npc-link:hover {background-color: var(--button-hover); color: var(--text-color);}
.npc-info {font-size: 1em; line-height: 1.4em;}
.npc-flag {font-size: 4em; font-weight: bold; color: #FFD700; text-shadow: 0 0 10px #FFD700; animation: pulse-flag 1.5s infinite;}
@keyframes pulse-flag {0% { transform: scale(1); opacity: 1; }50% { transform: scale(1.2); opacity: 0.85; }100% { transform: scale(1); opacity: 1; }}
.npc-grid-container {display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 20px; max-width: 1800px; margin: 0 auto;}
.npc-card {background-color: var(--button-bg); border: 2px solid var(--content-border); border-radius: 10px; transition: background-color 0.3s ease; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); overflow: hidden; padding: clamp(10px, 1.5vw, 20px); display: flex; flex-direction: column; justify-content: center; min-height: 160px;
max-height: 160px;}
.npc-card a {display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; text-decoration: none; color: var(--button-text); height: 100%; padding-top: 10px; padding-bottom: 10px;}
.npc-card a:hover {background-color: var(--button-hover); color: var(--text-color);}
.npc-content {font-size: 1em; line-height: 1.2em; display: flex; flex-direction: column; justify-content: center; padding: 0; margin: 0; align-items: flex-start;}
.npc-content strong {display: block; font-size: clamp(1.2em, 2vw, 2.2em); margin: 0; padding: 0; line-height: 1.1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%;}
.npc-content span {font-size: clamp(0.8em, 1.5vw, 1em); line-height: 1.3em; padding: 0; margin: 0; max-height: 2.6em; overflow: hidden;}
/* Market Dropdown */
.marketdropdown-container {position: relative; display: inline-block;}
.marketdropdown-button {background-color: var(--button-bg); color: var(--button-text); padding: 8px 12px; font-size: 16px; border: none; cursor: pointer;}
.marketdropdown-content {display: none; position: absolute; background-color: var(--nav-bg); min-width: 200px; box-shadow: 0 4px 8px rgba(0,0,0,0.2); z-index: 1;}
.marketdropdown-content a {color: var(--nav-text); padding: 10px 14px; text-decoration: none; display: block;}
.marketdropdown-content a:hover {background-color: var(--dropdown-hover);}
.marketdropdown-content {display: none;}
.marketdropdown-content.show-dropdown {display: block;}
.marketdropdown-center {display: flex; justify-content: center; margin-top: 20px;}
.submenu-container {position: relative;}
.submenu-content {display: none; position: absolute; left: 100%; top: 0; background-color: var(--nav-bg); color: var(--nav-text); min-width: 160px; box-shadow: 0 4px 8px rgba(0,0,0,0.2); z-index: 1;}
.submenu-container:hover .submenu-content {display: block;}
.has-submenu {position: relative; padding-right: 20px;}
.has-submenu::after {content: ""; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);}
#market-display-box {margin: 40px auto; max-width: 1800px; min-height: 600px; padding: 20px; background-color: var(--bg-color); border: 2px solid #ccc; box-shadow: 0 0 12px rgba(0, 0, 0, 0.1); overflow-y: auto; font-family: serif; font-size: 16px; line-height: 1.5;}
/* Astrology Page */
.sign-container {max-width: 1200px; margin: 0 auto;}
.sign-header {text-align: center; margin-bottom: 40px; padding: 40px 0; background: var(--sign-card-bg); backdrop-filter: blur(10px); border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.2);}
.sign-header h1 {font-size: 3rem; background: var(--text-color); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 15px; text-shadow: 0 0 30px rgba(255, 215, 0, 0.3);}
.sign-header .subtitle {font-size: 1.2rem; color: var(--sign-sub-text); font-style: italic;}
.sign-introduction {background: var(--sign-card-bg); padding: 30px; border-radius: 15px; margin-bottom: 40px; border-left: 4px solid var(--nav-bg); line-height: 1.6;}
.signs-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 25px; margin-bottom: 40px;}
.sign-card {background: var(--sign-card-bg); backdrop-filter: blur(15px); border-radius: 20px; padding: 30px; border: 1px solid rgba(255, 255, 255, 0.2); transition: all 0.3s ease; position: relative; overflow: hidden;}
.sign-card::before {content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--nav-bg); transform: scaleX(0); transition: transform 0.3s ease;}
.sign-card:hover {transform: translateY(-5px); box-shadow: 0 15px 40px rgba(255, 215, 0, 0.2); border-color: rgba(255, 215, 0, 0.4);}
.sign-card:hover::before {transform: scaleX(1);}
.sign-name {font-size: 1.8rem; font-weight: bold; margin-bottom: 10px; background: var(--text-color); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;}
.sign-name a {color: inherit; text-decoration: none; transition: all 0.3s ease;}
.sign-name a:hover {text-shadow: 0 0 20px rgba(255, 215, 0, 0.6);}
.sign-dates {font-size: 1rem; color: var(--sign-sub-text); margin-bottom: 20px; font-weight: 500;}
.traits, .affinity {margin-bottom: 15px;}
.traits strong, .affinity strong {color: var(--text-color); display: block; margin-bottom: 5px; font-size: 1.1rem;}
.traits-text, .affinity-text {color: var(--sign-sub-text); line-height: 1.5;}
.celestial-info {background: var(--sign-card-bg); padding: 30px; border-radius: 15px; margin-top: 40px; border: 1px solid rgba(255, 255, 255, 0.1);}
.celestial-info h2 {color: var(--text-color); margin-bottom: 20px; font-size: 1.8rem;}
.moon-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 20px;}
.moon-card {background: var(--moon-card-bg); padding: 20px; border-radius: 10px; border-left: 3px solid;}
.moon-card.verdant {border-left-color: #4CAF50;}
.moon-card.lumina {border-left-color: #C0C0C0;}
.moon-card.umbra {border-left-color: #9C27B0;}
.moon-name {font-weight: bold; background: var(--text-color); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 10px; font-size: 1.2rem;}
.moon-cycle {color: var(--sign-sub-text); font-size: 0.9rem; margin-bottom: 8px;}
.moon-influence {color: var(--text-color); font-size: 0.95rem; line-height: 1.4;}
@media (max-width: 768px) {.header h1 {font-size: 2rem;}.signs-grid {grid-template-columns: 1fr;}.sign-card {padding: 20px;}}
.planet-image video {max-width: 100%; max-height: 100%; object-fit: contain; display: block; margin: auto;}
.moon-data {width: 100%; border-collapse: collapse; color: #fffec9; margin-bottom: 40px;}
.moon-data th {background: #222; color: var(--button-text); text-align: left; padding: 10px;}
.moon-data td {background: rgba(255, 255, 255, 0.04); color: var(--text-color); padding: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.08);}
/* Astrological Sign Page */
.sign-image {text-align: center; margin-bottom: 30px; padding: 20px;}
.sign-image img {max-width: 100%; height: auto; max-height: 500px; border-radius: 20px; box-shadow: 0 15px 40px rgba(255, 215, 0, 0.3); border: 2px solid rgba(255, 215, 0, 0.3);}
.sign-dates {font-size: 1.2rem; color: var(--sign-sub-text); font-style: italic; margin-bottom: 15px;}
.sign-traits-summary {background: var(--moon-card-bg); padding: 20px; border-radius: 15px; border-left: 4px solid var(--nav-bg); margin-bottom: 10px;}
.sign-traits-summary h3 {color: var(--text-color); margin-bottom: 10px; font-size: 1.3rem;}
.sign-content-section {background: var(--sign-card-bg); backdrop-filter: blur(15px); border-radius: 20px; padding: 30px; margin-bottom: 25px; border: 1px solid var(--sign-card-bg); transition: all 0.3s ease; position: relative; overflow: hidden;}
.sign-content-section::before {content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--nav-bg); transform: scaleX(0); transition: transform 0.3s ease;}
.sign-content-section:hover {transform: translateY(-2px); box-shadow: 0 10px 30px rgba(135, 206, 235, 0.2); border-color: rgba(135, 206, 235, 0.4);}
.sign-content-section:hover::before {transform: scaleX(1);}
.sign-section-title {font-size: 1.5rem; font-weight: bold; margin-bottom: 15px; background: var(--text-color); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;}
.sign-section-content {color: var(--text-color); line-height: 1.7; font-size: 1.05rem;}
.back-link {display: inline-block; margin-bottom: 30px; padding: 12px 24px; background: var(--sign-card-bg); backdrop-filter: blur(10px); border-radius: 15px; color: #ffd700; text-decoration: none; border: 1px solid rgba(255, 215, 0, 0.3); transition: all 0.3s ease; font-weight: 500;}
.back-link:hover {background: rgba(255, 215, 0, 0.2); transform: translateY(-2px); box-shadow: 0 5px 15px rgba(255, 215, 0, 0.3); border-color: rgba(255, 215, 0, 0.6);}
.sign-compatibility-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-top: 20px;}
.sign-compatibility-card {background: var(--moon-card-bg); padding: 15px; border-radius: 10px; border-left: 3px solid; transition: all 0.3s ease;}
.sign-compatibility-card.good {border-left-color: #4CAF50;}
.sign-compatibility-card.challenging {border-left-color: #FF5722;}
.sign-compatibility-card:hover {background: rgba(255, 255, 255, 0.1); transform: translateY(-2px);}
.sign-compatibility-type {font-weight: bold; margin-bottom: 8px; font-size: 1.1rem;}
.sign-compatibility-type.good {color: var(--text-color);}
.sign-compatibility-type.challenging {color: var(--text-color);}
.sign-list {color: var(--sign-sub-text); font-size: 0.95rem; line-height: 1.4;}
@media (max-width: 768px) {.sign-header h1 {font-size: 2rem;}.sign-content-section {padding: 20px;}.sign-section-title {font-size: 1.3rem;}}
/* Sign header styling with gradient title */
.signs-header h1 {font-size: 3rem; background: var(--text-color); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 15px; text-shadow: 0 0 30px rgba(135, 206, 235, 0.3); text-align: center;}
/* Make sure the sign header is properly styled */
.signs-header {text-align: center; margin-bottom: 40px; padding: 40px 0; background: var(--sign-card-bg); backdrop-filter: blur(10px); border-radius: 20px; border: 1px solid var(--sign-card-bg);}
/* Sign section titles with gradient */
.signs-section-title {font-size: 1.5rem; font-weight: bold; margin-bottom: 15px; background: var(--text-color); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;}
/* Traits summary styling */
.signs-traits-summary h3 {color: var(--text-color); margin-bottom: 10px; font-size: 1.3rem;}
/* Make sure the container has the right background */
.signs-container {max-width: 1200px; margin: 0 auto;}
/* City Media Toggle Styling - Updated */
.city-image-container {width: 100%; max-width: none; margin: 0; padding: 0; display: block; position: relative;}
.city-media-toggle-container {display: flex; flex-direction: column; align-items: center; gap: 10px;}
.city-media-buttons {margin-bottom: 5px; display: flex; gap: 10px;}
.city-media-buttons button {background-color: var(--button-bg); color: var(--button-text); border: 1px solid var(--content-border); padding: 5px 10px; border-radius: 6px; cursor: pointer; font-weight: bold; font-size: 0.9em; transition: background-color 0.2s ease;}
.city-media-buttons button:hover {background-color: var(--button-hover); color: var(--text-color);}
.city-media-content {width: 100%; position: relative;}
#city-video-container, #city-image-container {width: 100%;}
.city-media-element {width: 100%; height: auto; display: block; object-fit: contain; max-width: 100%;}
/* Ensure both video and image have the same dimensions */
.city-media-element {aspect-ratio: auto;}
/* Constrain city media to ensure content below remains visible */
.city-media-constrained {max-height: 60vh; width: 100%; height: auto; display: block; object-fit: contain; max-width: 100%;}
.signs-npc-loading {text-align: center; font-style: italic; color: var(--text-color);}
.signs-npc-list {display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; margin-top: 15px;}
.signs-npc-card {border: 1px solid var(--accent-color); border-radius: 8px; padding: 15px; background: var(--moon-card-bg);}
.signs-npc-card h4 {margin: 0 0 10px 0; color: var(--sub-text-bg);}
.signs-npc-card h4 a {text-decoration: none; color: inherit;}
.signs-npc-card h4 a:hover {text-decoration: underline;}
.signs-npc-card p {margin: 5px 0; font-size: 0.9em;}
.signs-no-npcs {text-align: center; font-style: italic; color: var(--sign-sub-text);}
.signs-npc-error {text-align: center; color: var(--sign-sub-text);}
/* Themes */
/* Default Theme (Light) */
:root {
--bg-color: white;
--text-color: black;
--nav-bg: #006400;
--nav-text: #a0ffa0;
--dropdown-bg: #004d00;
--dropdown-hover: rgba(255, 255, 255, 0.1);
--button-bg: #4CAF50;
--button-text: black;
--button-hover: #45a049;
--content-bg: #f9f9f9;
--content-border: #004d00;
--content-text: black;
--sign-card-bg: #e0e0e0;
--moon-card-bg: #a8a8a8;
--sign-sub-text: #3b3b3b;
--accent-color: #4CAF50;
--card-border: #006400;
--input-bg: #f0f0f0;
--shadow-color: rgba(0, 0, 0, 0.15);
}
/* Dark Mode */
.dark-theme {
--bg-color: #1a1a1a;
--text-color: #f0f0f0;
--nav-bg: #004d00;
--nav-text: #ffffff;
--dropdown-bg: #002200;
--dropdown-hover: rgba(255, 255, 255, 0.2);
--button-bg: #003300;
--button-text: #ffffff;
--button-hover: #005500;
--content-bg: #222222;
--content-border: #666666;
--content-text: #ffffff;
--sign-card-bg: #313131;
--moon-card-bg: #3d3d3d;
--sign-sub-text: #b0b0b0;
--accent-color: #00ff00;
--card-border: #004d00;
--input-bg: #2a2a2a;
--shadow-color: rgba(0, 0, 0, 0.5);
}
/* Forest Theme */
.forest-theme {
--bg-color: #2d4d2d;
--text-color: #c5e1a5;
--nav-bg: #1b3b1b;
--nav-text: #dfffd0;
--dropdown-bg: #143314;
--dropdown-hover: rgba(255, 255, 255, 0.15);
--button-bg: #205020;
--button-text: #e0ffd0;
--button-hover: #307030;
--content-bg: #1f3f1f;
--content-border: #204020;
--content-text: #ffffff;
--sign-card-bg: #243d24;
--moon-card-bg: #2d4d2d;
--sign-sub-text: #8db380;
--accent-color: #7cb342;
--card-border: #205020;
--input-bg: #1a2e1a;
--shadow-color: rgba(0, 0, 0, 0.4);
}
/* Ocean Theme */
.ocean-theme {
--bg-color: #001f3f;
--text-color: #7fdbff;
--nav-bg: #005f7f;
--nav-text: #b0ffff;
--dropdown-bg: #00334d;
--dropdown-hover: rgba(255, 255, 255, 0.15);
--button-bg: #004466;
--button-text: #cceeff;
--button-hover: #005580;
--content-bg: #002f4f;
--content-border: #004466;
--content-text: #ffffff;
--sign-card-bg: #003355;
--moon-card-bg: #004466;
--sign-sub-text: #5fb3cc;
--accent-color: #00bfff;
--card-border: #005f7f;
--input-bg: #001a33;
--shadow-color: rgba(0, 0, 0, 0.6);
}
/* Solarized Theme */
.solarized-theme {
--bg-color: #fdf6e3;
--text-color: #657b83;
--nav-bg: #073642;
--nav-text: #93a1a1;
--dropdown-bg: #002b36;
--dropdown-hover: rgba(255, 255, 255, 0.1);
--button-bg: #586e75;
--button-text: #fdf6e3;
--button-hover: #2aa198;
--content-bg: #eee8d5;
--content-border: #93a1a1;
--content-text: #ffffff;
--sign-card-bg: #d6cdb8;
--moon-card-bg: #c2b9a5;
--sign-sub-text: #516369;
--accent-color: #268bd2;
--card-border: #839496;
--input-bg: #e4ddc7;
--shadow-color: rgba(0, 0, 0, 0.15);
}
/* Pink Theme */
.pink-theme {
--bg-color: #ffe0f0;
--text-color: #ff007f;
--nav-bg: #ff66b2;
--nav-text: #ffffff;
--dropdown-bg: #ff3399;
--dropdown-hover: rgba(255, 255, 255, 0.2);
--button-bg: #ff66b2;
--button-text: #ffffff;
--button-hover: #ff3385;
--content-bg: #ffd1e6;
--content-border: #ff99c2;
--content-text: #ffffff;
--sign-card-bg: #ebb5cd;
--moon-card-bg: #c78baa;
--sign-sub-text: #590029;
--accent-color: #ff1493;
--card-border: #ff66b2;
--input-bg: #ffc7e0;
--shadow-color: rgba(255, 0, 127, 0.2);
}
/* Black & Pink Theme */
.blackpink-theme {
--bg-color: #1a1a1a;
--text-color: #ff66b2;
--nav-bg: #ff007f;
--nav-text: #ffffff;
--dropdown-bg: #cc0052;
--dropdown-hover: rgba(255, 255, 255, 0.2);
--button-bg: #ff3399;
--button-text: #ffffff;
--button-hover: #cc0052;
--content-bg: #331a33;
--content-border: #ff007f;
--content-text: #ffffff;
--sign-card-bg: #2d1a2d;
--moon-card-bg: #3d2a3d;
--sign-sub-text: #e699cc;
--accent-color: #ff1493;
--card-border: #ff007f;
--input-bg: #260026;
--shadow-color: rgba(255, 0, 127, 0.4);
}
/* Autumn Theme (Gold, Brown, and Orange) */
.autumn-theme {
--bg-color: #4d2600;
--text-color: #ffcc66;
--nav-bg: #8c4000;
--nav-text: #ffeb94;
--dropdown-bg: #663300;
--dropdown-hover: rgba(255, 153, 51, 0.2);
--button-bg: #cc6600;
--button-text: #ffcc66;
--button-hover: #a64d00;
--content-bg: #663300;
--content-border: #ff9900;
--content-text: #ffffff;
--sign-card-bg: #5c3317;
--moon-card-bg: #734d26;
--sign-sub-text: #d4a574;
--accent-color: #ff9900;
--card-border: #cc6600;
--input-bg: #3d2200;
--shadow-color: rgba(0, 0, 0, 0.5);
}
/* Black and Icy Blue Theme (High Contrast Dark Mode) */
.icy-dark-theme {
--bg-color: #0b0f1e;
--text-color: #80dfff;
--nav-bg: #14213d;
--nav-text: #ffffff;
--dropdown-bg: #1f2a47;
--dropdown-hover: rgba(128, 223, 255, 0.2);
--button-bg: #1a73e8;
--button-text: #ffffff;
--button-hover: #1558b3;
--content-bg: #111827;
--content-border: #80dfff;
--content-text: #ffffff;
--sign-card-bg: #1a2332;
--moon-card-bg: #243447;
--sign-sub-text: #5da9c7;
--accent-color: #00d9ff;
--card-border: #1a73e8;
--input-bg: #0a0e1a;
--shadow-color: rgba(0, 0, 0, 0.7);
}
/* Lightning Theme */
.lightning-theme {
--bg-color: #0a0a2a;
--text-color: #ffd700;
--nav-bg: #1b1b6e;
--nav-text: #ffffff;
--dropdown-bg: #22226e;
--dropdown-hover: #967A0D;
--button-bg: #2a2a9e;
--button-text: #ffffff;
--button-hover: #967A0D;
--button-hover-text: black;
--content-bg: #1f1f4d;
--content-border: #ffd700;
--content-text: #ffffff;
--sign-card-bg: #1a1a4a;
--moon-card-bg: #252570;
--sign-sub-text: #c7b84f;
--accent-color: #ffff00;
--card-border: #ffd700;
--input-bg: #0f0f2a;
--shadow-color: rgba(255, 215, 0, 0.3);
}
/* Blue and Gold (Alliance) Theme */
.alliance-theme {
--bg-color: #0a1a4a;
--text-color: #ffcc00;
--nav-bg: #002366;
--nav-text: #ffd700;
--dropdown-bg: #001a33;
--dropdown-hover: rgba(255, 215, 0, 0.2);
--button-bg: #003399;
--button-text: #ffd700;
--button-hover: #001f4d;
--content-bg: #0f2d5c;
--content-border: #ffcc00;
--content-text: #ffffff;
--sign-card-bg: #0d2147;
--moon-card-bg: #163366;
--sign-sub-text: #d4a928;
--accent-color: #ffd700;
--card-border: #003399;
--input-bg: #071533;
--shadow-color: rgba(0, 0, 0, 0.6);
}
/* Winter Theme */
.winter-theme {
--bg-color: #e0f7ff;
--text-color: #00162b;
--nav-bg: #007fbf;
--nav-text: #ffffff;
--dropdown-bg: #004466;
--dropdown-hover: rgba(255, 255, 255, 0.2);
--button-bg: #009ae3;
--button-text: #e0f7ff;
--button-hover: #0075b0;
--content-bg: #cceeff;
--content-border: #0077b3;
--content-text: #ffffff;
--sign-card-bg: #cce6ff;
--moon-card-bg: #a5c0d1;
--sign-sub-text: #314757;
--accent-color: #00bfff;
--card-border: #007fbf;
--input-bg: #b8e6ff;
--shadow-color: rgba(0, 127, 191, 0.2);
}
/* Dark Purple (Arties) Theme */
.dark-purple-theme {
--bg-color: #1a0d25;
--text-color: #c59eff;
--nav-bg: #3b0077;
--nav-text: #ffffff;
--dropdown-bg: #29004d;
--dropdown-hover: rgba(255, 255, 255, 0.2);
--button-bg: #4b0082;
--button-text: #ffffff;
--button-hover: #3b0077;
--content-bg: #210635;
--content-border: #800080;
--content-text: #ffffff;
--sign-card-bg: #170C21;
--moon-card-bg: #2a1540;
--sign-sub-text: #a17bb8;
--accent-color: #9370db;
--card-border: #4b0082;
--input-bg: #110722;
--shadow-color: rgba(75, 0, 130, 0.5);
}
/* Rustveil Theme */
.rustveil-theme {
--bg-color: #1a0807;
--text-color: #ffffff;
--nav-bg: #b42a1a;
--nav-text: #ffffff;
--dropdown-bg: #b42a1a;
--dropdown-hover: rgba(255, 255, 255, 0.2);
--button-bg: #ce301d;
--button-text: #ffffff;
--button-hover: #c4301e;
--content-bg: #aa2b1c;
--content-border: #d12c18;
--content-text: #ffffff;
--sign-card-bg: #3d1f1a;
--moon-card-bg: #5c2e26;
--sign-sub-text: #d99188;
--accent-color: #ff4d3d;
--card-border: #ce301d;
--input-bg: #2a1612;
--shadow-color: rgba(206, 48, 29, 0.4);
}
/* Chronomax Theme */
.chronomax-theme {
--bg-color: #1a1a1a;
--text-color: #fff200;
--nav-bg: #23cf97;
--nav-text: #000000;
--dropdown-bg: #21c28d;
--dropdown-hover: rgba(255, 255, 255, 0.2);
--button-bg: #126147;
--button-text: #f7f072;
--button-hover: #0f4a37;
--content-bg: #254a3e;
--content-border: #fff84f;
--content-text: #ffffff;
--sign-card-bg: #11523b;
--moon-card-bg: #0f4a37;
--sign-sub-text: #00d491;
--accent-color: #b2ff00;
--card-border: #305700;
--input-bg: #0d2c0c;
--shadow-color: rgba(0, 0, 0, 0.5);
}
/* USA (Stars & Stripes) Theme */
.usa-theme {
--bg-color: #0a1f3d;
--text-color: #ffffff;
--nav-bg: #b22234;
--nav-text: #ffffff;
--dropdown-bg: #8b1a2b;
--dropdown-hover: rgba(255, 255, 255, 0.2);
--button-bg: #3c3b6e;
--button-text: #ffffff;
--button-hover: #2a2952;
--content-bg: #1a2e4d;
--content-border: #b22234;
--content-text: #ffffff;
--sign-card-bg: #243652;
--moon-card-bg: #2f4666;
--sign-sub-text: #c9d1e0;
--accent-color: #ffffff;
--card-border: #b22234;
--input-bg: #0d1829;
--shadow-color: rgba(178, 34, 52, 0.3);
}
/* Italy (Tricolore) Theme */
.italy-theme {
--bg-color: #f4f4f4;
--text-color: #1a1a1a;
--nav-bg: #009246;
--nav-text: #ffffff;
--dropdown-bg: #007038;
--dropdown-hover: rgba(255, 255, 255, 0.2);
--button-bg: #ce2b37;
--button-text: #ffffff;
--button-hover: #a8222c;
--content-bg: #ffffff;
--content-border: #009246;
--content-text: #ffffff;
--sign-card-bg: #e8f5e9;
--moon-card-bg: #c8e6c9;
--sign-sub-text: #4a4a4a;
--accent-color: #ce2b37;
--card-border: #009246;
--input-bg: #fafafa;
--shadow-color: rgba(0, 146, 70, 0.2);
}
/* Volcanic (Lava & Ash) Theme */
.volcanic-theme {
--bg-color: #1a0f0a;
--text-color: #ff6b35;
--nav-bg: #2d1810;
--nav-text: #ffaa80;
--dropdown-bg: #1f0f08;
--dropdown-hover: rgba(255, 107, 53, 0.2);
--button-bg: #b83c1f;
--button-text: #ffe6d9;
--button-hover: #8f2f18;
--content-bg: #261410;
--content-border: #ff6b35;
--content-text: #ffffff;
--sign-card-bg: #3d2419;
--moon-card-bg: #4d3024;
--sign-sub-text: #cc7a5c;
--accent-color: #ff4500;
--card-border: #b83c1f;
--input-bg: #140a06;
--shadow-color: rgba(255, 69, 0, 0.4);
}
/* Cyberpunk (Neon Nights) Theme */
.cyberpunk-theme {
--bg-color: #0d0221;
--text-color: #00fff9;
--nav-bg: #1a0b33;
--nav-text: #ff006e;
--dropdown-bg: #0d0221;
--dropdown-hover: rgba(255, 0, 110, 0.2);
--button-bg: #8338ec;
--button-text: #00fff9;
--button-hover: #6420c7;
--content-bg: #190735;
--content-border: #ff006e;
--content-text: #ffffff;
--sign-card-bg: #1e0e3e;
--moon-card-bg: #2b1654;
--sign-sub-text: #b388ff;
--accent-color: #ff006e;
--card-border: #8338ec;
--input-bg: #0a0115;
--shadow-color: rgba(131, 56, 236, 0.5);
}
/* Desert Sunset Theme */
.desert-theme {
--bg-color: #2d1b0e;
--text-color: #ffd89b;
--nav-bg: #8b4513;
--nav-text: #ffe4b5;
--dropdown-bg: #6b3410;
--dropdown-hover: rgba(255, 140, 0, 0.2);
--button-bg: #d2691e;
--button-text: #fff8dc;
--button-hover: #a0522d;
--content-bg: #3d2817;
--content-border: #ff8c00;
--content-text: #ffffff;
--sign-card-bg: #4a3324;
--moon-card-bg: #5c4033;
--sign-sub-text: #deb887;
--accent-color: #ff8c00;
--card-border: #d2691e;
--input-bg: #1f1308;
--shadow-color: rgba(210, 105, 30, 0.4);
}
/* The Forge Theme */
.forge-theme {
--bg-color: #292929;
--text-color: #fae2c8;
--nav-bg: #f07c1d;
--nav-text: #1a1a1a;
--dropdown-bg: #cc5d00;
--dropdown-hover: rgba(255, 255, 255, 0.2);
--button-bg: #eb6600;
--button-text: #1a1a1a;
--button-hover: #eb9100;
--content-bg: #222222;
--content-border: #666666;
--content-text: #ffffff;
--sign-card-bg: #424242;
--moon-card-bg: #525252;
--sign-sub-text: #b0b0b0;
--accent-color: #ff8324;
--card-border: #f07c1d;
--input-bg: #2a2a2a;
--shadow-color: rgba(0, 0, 0, 0.5);
}
.violet-theme {
--bg-color: #ffffff;
--text-color: #170e1f;
--nav-bg: #8b4fc2;
--nav-text: #a0ffa0;
--dropdown-bg: #7443a3;
--dropdown-hover: rgba(255, 255, 255, 0.1);
--button-bg: #7739b8;
--button-text: #a0ffa0;
--button-hover: #623199;
--content-bg: #f9f9f9;
--content-border: #8b4fc2;
--content-text: #000000;
--sign-card-bg: #c0a3cc;
--moon-card-bg: #9879ab;
--sign-sub-text: #3b3b3b;
--accent-color: #4caf50;
--card-border: #006400;
--input-bg: #f0f0f0;
--shadow-color: rgba(0, 0, 0, 0.15);
}
.nightlight-theme {
--bg-color: #f1c788;
--text-color: #6a4001;
--nav-bg: #6a7501;
--nav-text: #b1b848;
--dropdown-bg: #6a6901;
--dropdown-hover: rgba(255, 255, 255, 0.1);
--button-bg: #929d2c;
--button-text: #6a4001;
--button-hover: #8f9528;
--content-bg: #eec485;
--content-border: #6a6901;
--content-text: #6a4001;
--sign-card-bg: #e0b778;
--moon-card-bg: #c3995a;
--sign-sub-text: #895f21;
--accent-color: #929d2c;
--card-border: #6a7501;
--input-bg: #f0f0f0;
--shadow-color: rgba(0, 0, 0, 0.15);
}
/* Theme Selector Dropdown */
#theme-selector {padding: 8px; font-size: 1.2em; border-radius: 5px; border: 2px solid var(--content-border); background-color: white; color: black; cursor: pointer;}
#theme-selector:focus {outline: none; border-color: #008000;}