body {
  margin: 0;
  background: #ffe6b3 url('https://travian.com/images/layout/background-b.png') repeat;
  font-family: 'Segoe UI', Verdana, Geneva, sans-serif;
  color: #3e2723;
}

.navbar {
  background-color: #3e2723;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;     /* desktop layout: links in a row */
  flex-wrap: wrap;
  position: relative;
  z-index: 1001;           /* keep navbar above overlay/content */
}

.navbar a {
  color: #ffe6b3;
  padding: 14px 20px;
  text-decoration: none;
  font-weight: bold;
  display: block;
}

.navbar a:hover {
  background-color: #5d4037;
  color: #fff;
}

.back-to-top {
  position: fixed;
  bottom: 5px; /* just above footer height */
  right: 20px;
  z-index: 1100;
  display: none;  /* hidden until scrolled */
}

.back-to-top a {
  display: inline-block;
  background-color: #3e2723;
  color: #ffe6b3;
  padding: 8px 16px;
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.back-to-top a:hover {
  background-color: #5d4037;
}

.back-to-top button {
  background-color: #3e2723;
  color: #ffe6b3;
  padding: 8px 14px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.back-to-top button:hover {
  background-color: #5d4037;
}

.collection-section {
  margin: 20px 0;
}

.collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.collection-item {
  text-align: center;
  background: rgba(255, 255, 255, 0.05); /* subtle background */
  padding: 10px;
  border-radius: 6px;
}

.collection-item img {
  max-width: 100%;
  height: auto;
  border: 2px solid #3e2723;
  border-radius: 6px;
  margin-bottom: 8px;
}

/*
.collection-item {
  margin: 15px 0;
  text-align: center;
} */

/*
.collection-img {
  max-width: 300px;
  height: auto;
  border: 2px solid #3e2723;
  border-radius: 6px;
  margin-bottom: 8px;
}
*/

/* Lightbox overlay */
.lightbox {
  display: none; /* hidden by default */
  position: fixed;
  z-index: 1200;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.8);
  text-align: center;
}

/* Image inside lightbox */
.lightbox-content {
  max-width: 90%;
  max-height: 80%;
  margin-top: 5%;
  border-radius: 6px;
}

/* Caption */
#lightbox-caption {
  position: absolute;
  bottom: 40px;           /* above bottom edge */
  left: 50%;
  transform: translateX(-50%);
  max-width: 90%;
  background: rgba(0, 0, 0, 0.6); /* semi-transparent background */
  color: #ffe6b3;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 16px;
  text-align: center;
  /* NEW: allow clicks to pass through */
  pointer-events: none;
}


/*
#lightbox-caption {
  margin-top: 10px;
  margin-bottom: 10px;
  color: #ffe6b3;
  font-size: 16px;
  text-align: center;
  background: rgba(0,0,0,0.5);
  padding: 6px 12px;
  border-radius: 4px;
  display: inline-block;
} */

/* Close button */
.lightbox .close {
  position: absolute;
  top: 20px; right: 35px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}
.lightbox .close:hover {
  color: #bbb;
}


.lightbox-thumbs {
  display: flex;
  overflow-x: auto;   /* horizontal scroll */
  gap: 8px;
  margin: 15px auto 0;
  max-width: 90%;
  padding-bottom: 10px;
  scrollbar-width: thin; /* Firefox */
}

.lightbox-thumbs::-webkit-scrollbar {
  height: 8px;
}
.lightbox-thumbs::-webkit-scrollbar-thumb {
  background: #555;
  border-radius: 4px;
}
.lightbox-thumbs img {
  flex: 0 0 auto;     /* prevent shrinking */
  width: 64px;
  height: 44px;
  object-fit: cover;
  border: 2px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.lightbox-thumbs img.active {
  border-color: #ffe6b3;
}

.thumbs-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  max-width: 95%;
  margin: 0 auto;
}

.thumb-arrow {
  background: none;
  border: none;
  color: #ffe6b3;
  font-size: 24px;
  cursor: pointer;
  padding: 4px 8px;
}
.thumb-arrow:hover {
  color: #fff;
}



.icon {
  display: none;           /* hidden by default on desktop */
  color: #ffe6b3;
  font-size: 1.5rem;
  padding: 14px 20px;
  cursor: pointer;
}

.content {
  text-align: center;
  padding: 40px 20px;
}

.travian-header {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 10px;
  letter-spacing: 2px;
}

.travian-sub {
  font-size: 1.2rem;
  color: #5d4037;
  margin-bottom: 30px;
}

.about-images {
  display: flex;
  justify-content: center; /* center them horizontally */
  gap: 5px;               /* space between images */
  flex-wrap: nowrap;       /* prevent wrapping */
}

.about-images img {
  max-width: 45%;
  height: auto;
  /* display: block; */
}

.village-icon {
  width: 110px;
  margin-bottom: 20px;
  filter: drop-shadow(0 0 4px #91672c);
}

/*.footer {
  margin-top: 40px;
  font-size: 0.9em;
  color: #888;
}*/

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
/*  background-color: #3e2723; */
  background-color: rgba(62, 39, 35, 0.85); /* same brown, 85% opacity */
  color: #ffe6b3;
  text-align: center;
  padding: 12px;
  font-size: 0.9rem;
  z-index: 1002; /* above overlay/menu */
  backdrop-filter: blur(6px); /* frosted glass effect */
  -webkit-backdrop-filter: blur(6px); /* Safari support */
  opacity: 0;                /* start invisible */
  animation: fadeInFooter 1s ease forwards; /* run animation once */
}

@keyframes fadeInFooter {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.footer a {
  color: #ffe6b3;
  text-decoration: none;
  margin: 0 8px;
}

.footer a:hover {
  text-decoration: underline;
}


iframe {
  width: 100%;
  height: 80vh;
  border: none;
}

.contact-form {
  max-width: 400px;
  margin: 0 auto;
  text-align: left;
}

.contact-form label {
  display: block;
  margin-top: 10px;
  font-weight: bold;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 8px;
  margin-top: 5px;
  border: 1px solid #91672c;
  border-radius: 4px;
  font-family: inherit;
}

.contact-form button {
  margin-top: 15px;
  padding: 10px 20px;
  background-color: #3e2723;
  color: #ffe6b3;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
}

.contact-form button:hover {
  background-color: #5d4037;
  color: #fff;
}

/* Overlay behind expanded menu */
.navbar-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.3); /* semi-transparent black */
  z-index: 1000;               /* just below navbar */
/*  display: none; */
opacity: 0;                    /* starts invisible */
pointer-events: none;          /* don't block clicks when hidden */
transition: opacity 0.3s ease; /* smooth fade */
}

/* Show overlay when menu is expanded */
.navbar.responsive + .navbar-overlay {
/*  display: block;  */
opacity: 1;
pointer-events: auto;          /* allow clicks to close menu */
}

/* Responsive navbar and content */
@media screen and (max-width: 600px) {
  .navbar {
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    height: 50px;                /* collapsed bar height */
  }

  /* Hide links until menu is expanded */
  .navbar a {
    display: none;
  }

  /* Always show hamburger on small screens */
  .navbar .icon {
    display: block;
    font-size: 28px;
    padding: 20px;
    margin-left: auto;
    cursor: pointer;
  }

  /* Expanded state: stack links vertically and let bar grow */
  .navbar.responsive {
    flex-direction: column;      /* vertical layout */
    align-items: flex-start;
    height: auto;                /* allow growth to fit links */
  }

  .navbar.responsive a {
    display: block;              /* reveal links */
    width: 100%;
    text-align: left;
    padding: 12px 16px;
    font-size: 18px;
    border-top: 1px solid #5d4037;
    background: transparent;
  }

  .navbar.responsive .icon {
    position: absolute;          /* keep icon at top-right */
    right: 0;
    top: 0;
  }

  /* Content scale on phones */
  .travian-header { font-size: 1.8rem; }
  .travian-sub    { font-size: 1rem;   }
  .village-icon   { width: 80px;       }
  body            { font-size: 0.95rem;}
}

/* Edison page alignment */
#about-edison h2,
#about-edison h3 {
  text-align: center;
  border-bottom: 1px solid #91672c;
  padding-bottom: 5px;
  margin-bottom: 15px;
}

#about-edison p,
#about-edison ul,
#about-edison li {
  text-align: left !important;
}

/* Frames and layout */
#statusFrame {
  height: 205px;
}

#mainContent {
  position: absolute;
  top: 60px;     /* same as navbar height on desktop */
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0;
  z-index: 1;    /* keep content behind navbar and overlay */
}

iframe#webosFrame {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

iframe#webosFrame2 {
  position: absolute;
  top: 60px;     /* height of your menu bar */
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: calc(100vh - 60px);
  border: none;
}