@import url("https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap");

/********************************************/
/* GLOBAL BASE                              */
/********************************************/

body {
  margin: 0;
  padding-top: 8rem;

  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  /*font-size: 110%;*/
  line-height: 1.166;

  color: #eaeaea;
  background: #3a1a0b url(../images/Bg_wood.jpg);
}

a {
  color: #eaeaea;
  font-weight: bold;
  text-decoration: none;
}

a:hover {
  color: #33ff00;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #cccccc;
}
/*
h1 { font-size: 120%; }
h2 { font-size: 114%; }
h3 { font-size: 92%; }
h4 { font-size: 120%; }
h5 { font-size: 100%; }
*/
ul {
  list-style-type: square;
}
ul ul {
  list-style-type: disc;
}

/********************************************/
/* HEADER + NAV                             */
/********************************************/

#masthead {
  margin: 0;
  padding: 10px 0px;
  border-bottom: 1px solid #cccccc;
  width: 100%;
}

#nu-masthead {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;

  background: #3a1a0b url(../images/Bg_wood.jpg);
  box-shadow: 0px 6px 15px -2px rgba(0, 0, 0, 0.7);
  transition: all 0.5s ease-in-out;
}

@media (min-width: 1200px) {
  #nu-masthead {
    height: 6rem;
  }
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
}

#nu-siteName {
  padding: 5px;
}

#nu-siteName a:hover {
  color: grey;
}

#navToggle {
  display: block;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
}

#navToggle span {
  display: block;
  width: 25px;
  height: 3px;
  margin: 4px auto;
  background: white;
}

#navToggle:hover span {
  background: #ccc;
}

/* Navigation is hidden by default */
#globalNav {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  /* display: none; */
  flex-direction: column;
  background: #2b1208;
  border-top: 1px solid #555;
  padding: 0;
}
@media (min-width: 1200px) {
  #globalNav {
    max-height: 10rem;
  }
}

/* When menu is opened */
#globalNav.active {
  max-height: 400px;
  display: flex;
}

/* Mobile navigation links */
#globalNav a {
  display: block;
  padding: 12px 20px;
  border-bottom: 1px solid #4a2510;
  margin: 0;
}

#globalNav a:hover {
  background: #4a2510;
  border-bottom-color: #4a2510;
}

/********************************************/
/* DESKTOP NAV (LARGER SCREENS)              */
/********************************************/

@media (min-width: 1200px) {
  #navToggle {
    display: none;
  }

  #globalNav {
    display: block;
    padding: 0 15px 15px;
    background: none;
    border-top: none;
  }

  #globalNav a {
    display: inline-block;
    margin-right: 25px;
    padding: 4px 0;
    border-bottom: none;
  }

  #globalNav a:last-child {
    margin-right: 0;
  }

  #globalNav a:hover {
    color: grey;
    background: none;
    border-bottom: 1px solid grey;
  }
}

/********************************************/
/* PAGE LAYOUT                              */
/********************************************/

#main-layout {
  display: grid;
  grid-template-columns: minmax(320px, 1fr);
  gap: 1rem;
  min-width: 350px;
}

#image-galleryy {
  position: relative;
  display: grid !important;
  position: relative;
  --grid-gap: 1rem;
  margin-bottom: 2rem;
  margin-right: 1rem;
  /* grid-template-columns: 1fr;
  gap: var(--grid-gap);
  margin-bottom: 2rem; */
}

.performers-grid {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: var(--grid-gap, 1rem) !important;
}

@media (min-width: 900px) {
  .performers-grid {
    display: grid !important;
    grid-template-columns: var(--col-1, 1fr) var(--col-2, 1fr);
    gap: var(--grid-gap, 1rem) !important;
  }
}

#image-gallery {
  position: relative;
  --grid-gap: 1rem;
  margin-bottom: 2rem;
}

/* Force display: grid so gap and columns always work */
.performers-grid {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: var(--grid-gap, 1rem) !important;
}

@media (min-width: 900px) {
  .performers-grid {
    display: grid !important;
    grid-template-columns: var(--col-1, 1fr) var(--col-2, 1fr);
    gap: var(--grid-gap, 1rem) !important;
  }
}

/* STACKING ORDER */
#bugLogo {
  grid-row: 1;
}
#bugBasics {
  grid-row: 2;
}
#content,
#alt-content {
  grid-row: 3;
}
#ad1 {
  grid-row: 4;
}
#ad2 {
  grid-row: 5;
}
/*#siteInfo { grid-row: 6; }*/

@media (min-width: 600px) {
  #main-layout {
    grid-template-columns: minmax(320px, 1fr) 5fr;
    grid-template-rows: auto;
  }

  #bugLogo {
    grid-column: 1;
    grid-row: 1;
  }
  #bugBasics {
    grid-column: 1;
    grid-row: 2;
  }
  #ad1 {
    grid-column: 1;
    grid-row: 3;
  }
  #ad2 {
    grid-column: 1;
    grid-row: 4;
  }
  /* Row 4 */
  /*#siteInfo  { grid-column: 1 / span 2; grid-row: 4; }*/
  #content,
  #alt-content {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  /* Performer stacking */
  #image-gallery {
    grid-template-columns: 1fr;
    margin-right: var(--grid-gap);
  }
}

@media (min-width: 900px) {
  /* Performer stacking */
  #image-gallery {
    /* Uses the PHP-calculated variables if present, falls back to 1fr 1fr */
    grid-template-columns: var(--col-1, 1fr) var(--col-2, 1fr);
    gap: var(--grid-gap);
  }
}

@media (min-width: 1200px) {
  #bugLogo {
    grid-column: 1;
    grid-row: 1;
  }
  #bugBasics {
    grid-column: 1;
    grid-row: 2;
  }
  #ad1 {
    grid-column: 1;
    grid-row: 3;
  }
  #ad2 {
    grid-column: 1;
    grid-row: 4;
  }
  /*#siteInfo  { grid-column: 1 / span 2; grid-row: 5; }*/

  #content,
  #alt-content {
    grid-column: 2 / span 2;
    grid-row: 1 / span 4;
  }
  /* #image-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
  */
}

/* ============================= */
/* Frame Structure                */
/* ============================= */

.framed-image-overlay {
  position: relative;
  width: 100%;
  flex: 1; /* fills available height from flexbox */
  background: #ccc; /* filler for short images */
  display: flex;
  padding: 4.1%;
  box-sizing: border-box;

  align-items: flex-start; /* ✅ TOP align */
  justify-content: flex-start; /* ✅ LEFT align */
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 1);
}

/* ============================= */
/* Inner Photo (no crop, no stretch) */
/* ============================= */

.framed-image-overlay .photo {
  max-height: 92%;

  width: 100%; /* ✅ fill width always */
  height: auto; /* ✅ natural height */
  object-fit: contain;
  display: block;
  z-index: 5;
}

.photo-shadow {
  width: 100%;
  overflow: hidden;

  position: relative; /* CRITICAL: Anchors the absolute pseudo-element */
  display: inline-block; /* Or set a fixed width/height */
  overflow: hidden;
}

.photo-shadow::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* Set z-index higher than the image to ensure it's on top */
  z-index: 10;

  /* Apply the shadow to this element */
  box-shadow: 
        /* Use a strong, transparent color that gives the best contrast on both light/dark */ inset
    5px 5px 10px 5px rgba(0, 0, 0, 0.8); /* Deep, soft black shadow with 50% opacity */

  /* OR, use the White/Black blend (as discussed previously) */
  /* box-shadow: inset 0 0 20px 10px rgba(255, 255, 255, 0.4),  /* Soft inner highlight */
  /* inset 0 0 5px 5px rgba(0, 0, 0, 0.6);        /* Subtle dark edge */
}

/* ============================= */
/* Frame Overlay                  */
/* ============================= */

.framed-image-overlay .frame-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 14;
  pointer-events: none;
}

.frame-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 11;
  pointer-events: none;
}

.frame-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 19;
  pointer-events: none;
}

/* ============================= */
/* Label                          */
/* ============================= */

.label-overlay {
  position: absolute;
  bottom: 4.4%;
  left: 4.4%;
  width: 91%;
  height: 15%;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 15;
}

/* ============================= */
/* Performer Page                */
/* ============================= */

/* Constraint for the Performer Profile Page */
.performer-page-frame-wrapper {
  /* Force a larger "hero" size even for small images */
  width: 100%;
  max-width: 650px; /* Ideal desktop width for a featured bio photo */
  margin-bottom: 25px;
  display: block;
}

.performer-page-frame-wrapper .framed-image-overlay {
  flex: none;
  width: 100%; /* Forces the frame to the wrapper's 650px */
  height: auto;
  display: flex;
  flex-direction: column;
}

.performer-page-frame-wrapper .photo {
  display: block;
  width: 100%; /* Upscales the 415px image to fill the 650px frame */
  height: auto; /* Keeps aspect ratio perfect */
  max-height: 60vh; /* Safety cap for very tall portraits */
  object-fit: cover; /* Ensures no gaps, even if slightly blurry */

  /* Optional: subtle sharpening for legacy images */
  image-rendering: -webkit-optimize-contrast;
}

.performer-page-frame-wrapper .photo-shadow {
  width: 100%;
  height: auto;
}

.performer-page-frame-wrapper {
  width: 100%;
  max-width: 650px; /* The "Hero" size we discussed */
  margin-top: 0;
  margin-bottom: 25px;

  /* ✅ Centering Logic */
  margin-left: auto;
  margin-right: auto;

  display: block;
}

/* Ensure the frame inside behaves itself and doesn't 
   try to pull to the left 
*/
.performer-page-frame-wrapper .framed-image-overlay {
  flex: none;
  width: 100%;
  margin: 0; /* Reset any legacy margins */
}

/* ============================= */
/* Blurb                          */
/* ============================= */

.blurb-text {
  margin-top: 15px;
}

/********************************************/
/* SIDEBAR LIST CLEANUP                     */
/********************************************/

.sectionLinks h3 {
  padding: 10px 0 2px 10px;
}

.sectionLinks h3 a {
  color: inherit;
}

.sectionLinks ul {
  list-style: none;
  margin: 0;
  padding: 4px;
  background-image: url(../images/Content_bg.jpg);
  border-radius: 15px;
}

.sectionLinks ul li {
  padding: 2px 0 2px 10px;
  cursor: pointer;
  font-weight: bold;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color: #3a1a0b;
}

.sectionLinks ul li a {
  display: block;
  padding: 3px 10px;
  border-top: 1px solid #ccc;
  color: #3a1a0b;
}

.sectionLinks ul li a:hover {
  background: white;
  color: #006600;
}

/********************************************/
/* IMAGE OVERLAY CLEAN                       */
/********************************************/

#imageOverlay,
#macwebOverlay {
  position: fixed;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: center;
}

#imageOverlay.visible,
.showOverlay {
  display: flex;
}

#imageOverlay img {
  max-width: 100vw;
  max-height: 100vh;
  object-fit: contain;
}

#overlayText {
  position: absolute;
  bottom: 3vh;
  color: white;
  font-size: 2rem;
  text-shadow: 0 0 6px black;
}

/********************************************/
/* SOCIAL MEDIA ICONS                       */
/********************************************/

.facebook-icon {
  display: inline-block; /* Ensures the width/height are respected */
  width: 20px;
  height: 20px;
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="120" height="118" %3E%3Cpath style="fill:%23ffffff; stroke:none;" d="M49 107L49 73L39 73L39 58L49 58C49.0672 33.6556 61.1634 26.1977 84 28L84 41C70.8071 41.0015 67 44.8907 67 58L83 58C80.0956 69.7892 79.9908 73 67 73L67 108C79.9685 105.484 91.5452 100.435 100.1 89.9105C119.886 65.5698 112.214 27.0778 84 12.9707C74.8755 8.40843 65.036 7.58376 55 8.03935C-0.639458 10.5652 -2.81957 95.006 49 107z"/%3E%3C/svg%3E');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle; /* Aligns it nicely with adjacent text */
}

.instagram-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  /* Fixed: Removed line breaks, encoded # as %23, and matched fill colors to your UI */
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="120" height="118"%3E%3Cpath style="fill:%23ffffff; stroke:none;" d="M41 20.5324C20.7574 25.3549 25 50.4466 25 66C25 73.7427 24.6106 82.4183 29.6381 88.9066C39.2823 101.353 73.171 99.4479 87 95.956C106.764 90.9654 103 66.4761 103 51C103 42.6682 102.874 33.9421 97.3873 27.0934C88.5376 16.0466 68.4881 20 56 20C51.1301 20 45.7702 19.396 41 20.5324z"/%3E%3Cpath style="fill:%23505050; stroke:none;" d="M43 28.6528C28.4516 33.2218 32.9446 57.3618 33.0008 69C33.0249 73.9951 33.1902 79.8443 36.4329 83.9452C43.2973 92.6264 75.0059 91.3458 84.9992 88.196C99.049 83.7676 95.6969 57.4195 94.9105 46C94.6161 41.7251 94.0343 36.6018 91.3472 33.108C84.4938 24.197 64.9261 28 55 28C51.1241 28 46.7473 27.4759 43 28.6528z"/%3E%3Cpath style="fill:%23ffffff; stroke:none;" d="M81.4344 34.0324C76.4258 37.3795 81.6104 44.9834 86.7685 41.9568C92.41 38.6466 86.5145 30.6375 81.4344 34.0324M60 38.5177C34.6062 43.9045 41.6779 83.1932 67 78.5316C93.1695 73.714 86.073 32.9869 60 38.5177z"/%3E%3Cpath style="fill:%23505050; stroke:none;" d="M62.0008 46.5193C46.8397 48.9175 49.8898 72.4458 65 70.3881C80.9072 68.2219 77.6289 44.0472 62.0008 46.5193z"/%3E%3C/svg%3E');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
}

/********************************************/
/* FOOTER                                   */
/********************************************/

/* Base Label Styling */

.overlay-3d-button {
  /* Layout */
  display: flex;
  align-items: center;
  justify-content: center;

  /* Base size */
  height: 18vw;
  width: 18vw;

  /* Positioning — same as before */
  position: absolute;
  top: 0%;
  left: 10%;
  right: auto;
  transform: translateX(-50%);
  z-index: 500;

  /* Shape */
  border: none;
  border-radius: 50%;
  overflow: hidden;
  cursor: default;

  /* Typography */
  font-family: "Alfa Slab One", serif;
  font-size: 12px;
  color: #fff;
  text-align: center;
  line-height: 1.15;
  letter-spacing: 0.3px;
  text-shadow:
    -1px -1px 0 #900,
    1px -1px 0 #900,
    -1px 1px 0 #900,
    1px 1px 0 #900,
    0 2px 6px rgba(0, 0, 0, 0.6);

  /* Candy lacquer surface */
  background:
    linear-gradient(
      155deg,
      rgba(255, 255, 255, 0.65) 0%,
      rgba(255, 255, 255, 0.25) 30%,
      transparent 31%
    ),
    radial-gradient(
      ellipse 80% 50% at 50% 0%,
      rgba(255, 120, 120, 0.5) 0%,
      transparent 65%
    ),
    radial-gradient(circle at 48% 58%, #d40010 0%, #9c0009 55%, #600006 100%);

  /* Pin badge edge + depth */
  box-shadow:
    inset 0 3px 6px rgba(255, 255, 255, 0.3),
    inset 0 -8px 18px rgba(0, 0, 0, 0.45),
    inset 0 0 0 4px rgba(80, 0, 4, 0.55),
    inset 0 0 0 5px rgba(255, 255, 255, 0.06),
    0 4px 0 #5a0006,
    0 5px 2px rgba(0, 0, 0, 0.3);

  /* Lift on hover */
  filter: drop-shadow(3px 5px 8px rgba(0, 0, 0, 0.35))
    drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
  transition:
    filter 0.2s ease,
    transform 0.2s ease;
}

.overlay-3d-button:hover {
  filter: drop-shadow(4px 8px 14px rgba(0, 0, 0, 0.4))
    drop-shadow(0 3px 5px rgba(0, 0, 0, 0.25));
  /* Merges with your translateX so the badge lifts without drifting */
  transform: translateX(-50%) rotate(2.5deg) scale(1.07) translateY(-4px);
}

@media (min-width: 600px) {
  .overlay-3d-button {
    height: 10vw; /* Increased size to fit "Next Tuesday" */
    width: 10vw;
    font-size: 12px; /* Adjust size to fit the text */
    top: -5%;
    left: 12%;
  }
}

@media (min-width: 900px) {
  .overlay-3d-button {
    height: 12vw; /* Increased size to fit "Next Tuesday" */
    width: 12vw;
    font-size: 15px; /* Adjust size to fit the text */
    left: 50%;
    top: -15%;
  }
}

@media (min-width: 1200px) {
  .overlay-3d-button {
    height: 12vw; /* Increased size to fit "Next Tuesday" */
    width: 12vw;
    font-size: 15px; /* Adjust size to fit the text */
    left: 50%;
    top: -5%;
  }
}

/********************************************/
/* SLIDESHOW                                  */
/********************************************/
/* ── Overlay ─────────────────────────────────── */
#slideshow-overlay {
  position: fixed;
  inset: 0;
  background: black;
  display: none;
  z-index: 9999;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#slideshow-overlay.active {
  display: flex;
}

/* ── Image layers ────────────────────────────── */
.slide-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 1.8s ease-in-out;
  background: black;
}
.slide-layer.active {
  opacity: 1;
  z-index: 1; /* was 10 — only needs to be above the inactive layer */
}

/* ── Controls overlay ────────────────────────── */
#slideshow-controls {
  /*position: absolute;            was missing — caused controls to flow inline */

  bottom: 60px; /* sits above the caption strip */

  left: 50%;
  /* transform: translateX(-50%); centred horizontally */

  z-index: 20; /* above image layers and caption */

  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
#slideshow-controls.visible {
  opacity: 1;
  pointer-events: auto;
}

/* ── Caption strip ───────────────────────────── */
#slide-caption-strip {
  position: absolute;
  bottom: 0; /* was: top:10px + bottom:0 + height:10% — all fighting */

  left: 0;
  right: 0;
  height: 9vh;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  z-index: 15; /* above images, below controls */

  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Arial, sans-serif;
  font-size: 18px;
  padding: 0 15px;
}

/* ── Nav buttons ─────────────────────────────── */
#slide-prev,
#slide-next,
#slide-close {
  position: absolute;
  z-index: 20; /* ensure clickable above image layers */

  color: white;
  font-size: 40px;
  cursor: pointer;
  padding: 20px;
  user-select: none;
  background: none;
  border: none;
}
#slide-prev {
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}
#slide-next {
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}
#slide-close {
  top: 20px;
  right: 20px;
}

.ajax-link {
  /* Ensures the mouse cursor changes to a pointing hand */
  cursor: pointer;
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}

/********************************************/
/* Grid of buttons for past performances    */
/********************************************/

/* Container: Sets up the grid layout */
#year-matrix {
  display: grid;
  /* Create responsive columns that adapt to screen size */
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 15px; /* Spacing between the buttons */
  padding: 20px;
}

/* Wrapper: This is the key to making the button square */
.matrix-button-wrapper {
  /* Uses the aspect ratio trick to force a square shape (1:1 ratio) */
  width: 100%;
  padding-top: 100%; /* Height is equal to width (100% of container width) */
  position: relative;
  border-radius: 8px;
  overflow: hidden; /* Ensures content stays inside */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

/* Link: Styles the actual content and positions it absolutely inside the square wrapper */
.matrix-button-wrapper .ajax-link {
  /* Positioning to fill the square wrapper */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* Center the year number */
  display: flex;
  justify-content: center;
  align-items: center;

  /* Basic button appearance */
  text-decoration: none;
  background-color: #f0f0f0; /* Light grey background for the button */
  color: #333;
  font-size: 1.5em;
  font-weight: bold;
  border: 1px solid #ccc;
  transition:
    background-color 0.2s,
    transform 0.2s;
}

.matrix-button-wrapper .ajax-link:hover {
  background-color: #e0e0e0; /* Darker on hover */
  transform: scale(1.05); /* Slight lift effect */
}

#siteInfo {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2em;
  z-index: 999;

  /* Layout */
  display: flex;
  align-items: center;
  padding: 0 15px;
  box-sizing: border-box;

  /* Styling */
  background: rgba(80, 80, 80, 0.3);
  backdrop-filter: blur(4px);
  color: white;
  font-size: 0.9rem;
  white-space: nowrap;

  flex-direction: row; /* Ensure they don't stack */
  align-items: center; /* Vertical center */
  justify-content: space-between; /* Spread the three groups out */
}

/* Group 1: The Left Side */
.left-group {
  display: flex;
  margin-right: 15px;
  gap: 15px;
}

/* Group 2: The Center Side (The "Magic" Step) */
/* We wrap 3 and 6 or target 3 specifically to push the groups apart */
.center-group {
  display: flex;
  margin-left: 0 auto;
  margin-right: auto;
  gap: 15px;
}

/* Group 3: The Right Side */
.right-group {
  display: flex;
  gap: 5px;
}

/* Modal Container */
.image-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Dark, defocused/blurred background showing page behind */
.modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px); /* Defocuses the background page */
  -webkit-backdrop-filter: blur(8px);
}

/* Modal Content Box */
.modal-content {
  position: relative;
  z-index: 10000;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 12px;
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
}

/* Back Button */
.modal-back-btn {
  background: #222;
  color: #fff;
  border: 1px solid #555;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: bold;
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 10px;
}

.modal-back-btn:hover {
  background: #333;
  border-color: #888;
}

/* Image scaling */
#modal-img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 4px;
  display: block;
}