/* Body and main container */
body {
  color: #222;
  margin: 0;
  padding: 0;
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}
    
h1, h2, h3 {
}
    /* Classic wide margins for entire site */
.page-container {
  max-width: 1000px;
  margin: 40px auto;
  padding: 0 30px;
    }
    /* Top rectangular header */
.top-header {
  height: 180px;
  border: 1px solid #ccc;
  border-radius: 6px;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  
    }
.top-header h1 {
  font-size: 2.5em;
  background-color: rgba(255,255,255,0.7);
  padding: 10px 20px;
  border: 1px solid #ccc;
  border-radius: 6px;
  margin: 0;
}
    /* Sidebar + main content layout */
.content-wrapper {
  display: flex;
  align-items: flex-start;
}
    
    
.page-notice-bar{
  border: 2px solid;
  padding: 10px 14px;
  border-radius: 6px;
  margin-top: 12px;
  margin-bottom: 20px;
  font-size: 120%;
  height: 80px;
}
#noticeType{
  font-weight: bold;
}
    /* Sidebar navigation */
.sidebar {
  width: 180px;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding-top: 20px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: calc(100% - 200px); /* full viewport height */
  position: sticky;
  overflow-y: scroll;
  top: 0;
}
    /* Main content area */
.main-content {
  margin-left: 30px;
  flex: 1;
}
    
.site-footer {
  margin-top: 50px;
  padding: 20px;
  border-top: 2px solid;
  text-align: center;
  border-radius: 10px 10px 0 0;
}
.footer-title {
  font-size: 1.3rem;
  font-weight: bold;
  margin-bottom: 10px;
}
.footer-section {
  margin: 15px 0;
}
.footer-heading {
  font-size: 0.9rem;
  color: #555;
  margin-bottom: 6px;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.footer-links a {
  text-decoration: none;
  font-size: 0.85rem;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background 0.2s;
}
.footer-links a:hover {
}
.footer-copy {
  margin-top: 15px;
  font-size: 0.8rem;
  color: #777;
}
button {
  border: 2px solid;
  padding: 10px;
  cursor: pointer;
  
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columns */
  gap: 12px;
}
.gallery-item img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
  border: 2px solid;
  transition: transform 0.2s, box-shadow 0.2s;
}
.gallery-item img:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.moodboard-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 3 columns */
  grid-template-rows: masonry;
  gap: 12px;
}
.moodboard-item img {
  width: 100%;
  height: 300px;
  border-radius: 6px;
  display: block;
  object-fit: cover;
  border: 2px solid;
  transition: transform 0.2s, box-shadow 0.2s;
}
.moodboard-item img:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.page-updates-section {
  margin-top: 40px;
}
.page-updates-box {
  border: 2px solid;
  border-radius: 8px;
  padding: 16px;
  max-height: 300px;
  overflow-y: scroll;
}
.update-item {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed;
}
.update-item:last-child {
  border-bottom: none;
}
.update-date {
  font-size: 0.85rem;
  font-weight: bold;
}
.update-content {
  margin: 4px 0 0 0;
  font-size: 0.9rem;
}
/* Wrapper for arrows and nav */
/* Wrapper with arrows */
/* Container hides overflow */
.horizontal-nav-container {
  overflow-x: auto;      /* allows horizontal scroll */
  overflow-y: hidden;    /* hide vertical scroll */
  white-space: nowrap;
  padding: 5px 0;
  -webkit-overflow-scrolling: touch;  /* smooth scroll on mobile */
  width: 670px;
  margin-bottom: 15px;   /* adds space below the nav */
  position: sticky;
  top: 0;
  z-index: 100;
}
/* Hide scrollbar visually but still scrollable */
.horizontal-nav-container::-webkit-scrollbar {
  display: none;
}
/* Nav links */
.horizontal-nav a {
  display: inline-block;
  padding: 6px 12px;
  margin-right: 10px;
  text-decoration: none;
  border-radius: 6px;
  white-space: nowrap;
  font-size: 27px;
  transition: transform 0.2s, background-color 0.2s;
}
.horizontal-nav a:hover {
  transform: scale(1.05);
}
.horizontal-nav a.active {
  color: black;
  font-weight: bold;
}
.horizontal-nav-container::-webkit-scrollbar {
  height: 8px;            /* horizontal scrollbar height */
}
.horizontal-nav-container::-webkit-scrollbar-track {
  border-radius: 4px;
}
.horizontal-nav-container::-webkit-scrollbar-thumb {
  border-radius: 4px;
}
    /* Sections with top border heading */
.section {
  padding: 25px 20px 20px 20px;
  margin-bottom: 30px;
  position: relative;
  border-radius: 4px;
  border-top: 2px solid #333;
}
/* Heading on top border */
.section-heading {
  position: absolute;
  top: -18px;                       /* negative to sit on the top border */
  left: 15px;                        /* align with content inside */
  padding: 0 8px;                    /* little horizontal padding to “cover” border */
  font-size: 30px;
  cursor: pointer;
  background-color: #fff;
}
/* Scrollable content below heading */
.section-content {
  max-height: 300px;      /* adjust height as needed */
  overflow-y: auto;
  text-align: justify;
}
.section h2 {
  position: absolute;
  top: -14px;
  left: 20px;
  background-color: #fafafa;
  padding: 0 10px;
  font-size: 1.5em;
  margin: 0;
}
    
.section ul li {
  text-align: justify;
}
    
.section-toggle {
  margin-left: auto;
  font-size: 14px;
  transition: transform 0.25s ease;
}
.section.collapsed .section-content {
  display: none;
}
.section.collapsed .section-toggle {
  transform: rotate(-90deg);
}
.section-content::-webkit-scrollbar {
  width: 8px;
}
.section-content::-webkit-scrollbar-thumb {
  border-radius: 4px;
}
.section-content::-webkit-scrollbar-track {
}
/* Container holding all wiki entry cards */
#wikiList {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columns */
  gap: 20px; /* space between cards */
  max-width: 1200px; /* optional: control overall width */
  margin: 0 auto; /* center container */
  padding: 20px; /* spacing inside container */
}
/* Individual card styling */
.wiki-entry-card {
  background-color: #fefefe; /* soft pastel background */
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px;
  transition: transform 0.2s ease;
}
.wiki-entry-card:hover {
  transform: scale(1.02);
}
/* Thumbnail inside card */
.wiki-thumb {
  width: 100%;
  object-fit: cover;
  border-radius: 4px;
}
/* Info area */
.wiki-info h3 {
  margin: 0 0 5px 0;
  font-size: 1.1rem;
}
.wiki-info small {
  color: #555;
  font-size: 0.8rem;
}
.wiki-info p {
  margin: 5px 0 0 0;
  font-size: 0.75rem;
  color: #777;
}
    /* Character grid inside section */
    
    .profile-card {
  width: 260px;
  padding: 15px;
  max-height: 750px;
}
.profile-card h2 {
  text-align: center;
  margin-bottom: 10px;
}
.profile-photo {
  width: 100%;
  border: 2px solid #ccc;
}
.profile-carousel {
  position: relative;
  width: 100%;
}
.carousel-image {
  width: 100%;
  border: 2px solid #ccc;
  display: none;
}
.carousel-image.active {
  display: block;
}
.carousel-controls {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
}
.carousel-controls button {
  font-family: monospace;
  cursor: pointer;
}
.basic-info {
  margin-top: 10px;
  font-family: monospace;
  font-size: 14px;
}
.recent-event-card {
  margin-top: 15px;
  padding: 10px;
  border: 2px solid;
  font-family: monospace;
}
.recent-event-card h3 {
  margin-top: 0;
}
.stats-modal {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
}
.stats-box {
  border: 2px solid;
  width: 70%;
  max-width: 800px;
  margin: 80px auto;
  padding: 20px;
  position: relative;
  background: #fff;
}
.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  cursor: pointer;
  font-size: 20px;
}
.stats-content {
  display: flex;
  gap: 20px;
}
.stats-photo img {
  width: 250px;
  object-fit: cover;
}
.stats-info {
  max-height: 400px;
  overflow-y: auto;
  font-family: monospace;
}
.time-machine-box{
  max-width:700px;      /* keeps it inside page margins */
  width:100%;
  margin:20px auto;     /* centers it */
  border:2px solid;
  border-radius:6px;
  display:flex;
  flex-direction:column;
}
/* top title */
.tm-header{
  padding:10px 15px;
  border-bottom:2px solid;
  font-weight:bold;
  font-size:18px;
}
.era-info {
  position: fixed; /* center on the screen */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  border-radius: 10px;
  width: 600px;
  max-height: 400px;
  overflow-y: auto;
  box-shadow: 0 6px 12px rgba(0,0,0,0.2);
  background: #fff;
  z-index: 1000;
  display: none;
}
.era-info ul {
  margin: 0;
  padding-left: 20px;
}
.era-title {
  cursor: pointer;
  text-decoration: underline;
}
.era-info-overlay {
  position: fixed;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.2); /* dim background */
  z-index: 900;
  display: none;
}
/* event area */
#timeline-events {
  padding: 15px;
  max-height: 300px;
  overflow-y: auto;
  transition: opacity 0.4s ease;
  opacity: 1;
}
/* events */
.timeline-event{
  margin-bottom:8px;
}
/* controls bar */
.tm-controls{
  border-top:2px solid;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  padding:10px;
}
/* buttons */
.tm-controls button{
  padding:4px 10px;
  cursor:pointer;
}
/* year */
#currentYear{
  font-weight:bold;
  font-size:18px;
}
.image-viewer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  z-index: 1000;
}
.viewer-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.85);
}
.viewer-content {
  position: relative;
  width: 90%;
  max-width: 900px;
  margin: 60px auto;
  text-align: center;
}
#viewerImage {
  max-width: 100%;
  max-height: 70vh;
  border-radius: 6px;
}
.viewer-prev,
.viewer-next {
  position: absolute;
  top: 45%;
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  font-size: 28px;
  padding: 10px;
  cursor: pointer;
}
.viewer-prev { left: -60px; }
.viewer-next { right: -60px; }
.viewer-close {
  position: absolute;
  top: -40px;
  right: 0;
  font-size: 22px;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
}
.viewer-filmstrip {
  margin-top: 15px;
  display: flex;
  justify-content: center;
  gap: 8px;
  overflow-x: auto;
}
.viewer-filmstrip img {
  height: 60px;
  cursor: pointer;
  opacity: 0.6;
}
.viewer-filmstrip img.active {
  opacity: 1;
  outline: 2px solid white;
}
/* era label */
#currentEra{
  margin-left:15px;
  font-style:italic;
}
.relationship-circle {
  margin-bottom: 30px;
}
.relationship-year {
  margin-left: 10px;
  margin-bottom: 20px;
}
.relationship-category {
  margin-left: 15px;
  margin-bottom: 15px;
}
.relationship-entry {
  margin-left: 20px;
  margin-bottom: 10px;
  padding: 8px;
  border-left: 3px solid;
}
.year-notes {
  font-size: 0.85rem;
  color: #666;
  margin-bottom: 10px;
}
.relation-type {
}
.relation-period {
  font-size: 0.8rem;
  color: #888;
}
.popup-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.popup-content {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  max-width: 600px;
  width: 90%;
  max-height: 90%;
  overflow-y: auto;
  position: relative;
}
.popup-close {
  position: absolute;
  top: 10px; right: 15px;
  cursor: pointer;
  font-size: 20px;
}
    /* Responsive adjustments */