/* Mirror front-facing layout/background */
body {
  font-family: Arial, sans-serif;
  text-align: center;
  height: 100vh;
  margin: 0;
  padding: 0;
  background-image: url('./assets/topdown/BuildingCampaignBackground2.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
/* Headline styling */
.headline {
  font-family: 'Impact', 'Arial Black', sans-serif;
  color: #ffffff;
  background-color: #004225;
  padding: 12px 24px;
  border-radius: 8px;
  text-align: center;
  display: inline-block;
  font-size: 2rem;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  margin-bottom: 5px;
}
/* iPads and small desktops */
@media (max-width: 1024px) {
  body {
    background-image: url('./assets/topdown/VerticalBackground2.jpg');
    background-size: cover;
    background-position: top center;
  }
}

/* Mobile phones */
@media (max-width: 768px) {
  body {
  height: 100vh;
  margin: 0;
  padding: 0;
    background-image: url('./assets/topdown/VerticalBackground2.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
  }
}

h1 { margin-top: 20px; }

/* Container scales by artboard ratio (3840x2160) */
#svg-container {
  position: relative;
  width: min(95vw, 1300px);   /* bump this up/down to taste */
  margin: 0 auto;
  aspect-ratio: 3840 / 2160;  /* keeps perfect proportions */
  /* removed: padding-bottom */
}

/* Base + Text fill the box */
.base-img,
.text-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;   /* was height:auto */
  user-select: none;
  -webkit-user-drag: none;
}

/* Injected overlay SVG fills the box */
#svg-overlay-container svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;   /* was height:auto */
  z-index: 2;
}


/* Same hover affordance as front */
.hoverable:hover {
  fill: #ffd54f !important;
  cursor: pointer;
  opacity: 0.6;
}

/* --- Floor + Floorline behavior --- */
/* Only tint the .color subgroup; keep .lines on top and click-through */
#svg-overlay-container [data-section] .color * {
  mix-blend-mode: multiply;  /* floor patterns/lines stay visible through tint */
}
#svg-overlay-container [data-section] .lines * {
  fill: none !important;
  pointer-events: none !important;
  vector-effect: non-scaling-stroke;
}

/* Popup (same as front) */
#popup-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 90;
}
#popup-backdrop.hidden { display: none; }

#popup {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: #fff; border: 2px solid #333;
  padding: 20px; z-index: 200;
  display: flex; flex-direction: column; gap: 10px;
  width: 450px; max-width: 90vw; max-height: 90vh;
  box-shadow: 0 10px 25px rgba(0,0,0,.2);
  border-radius: 8px; box-sizing: border-box; overflow: hidden;
}
#popup.hidden { display: none; }
#close-popup { align-self: flex-end; background: none; border: none; font-size: 18px; cursor: pointer; }

#donation-items { list-style: none; padding: 0; text-align: left; }
#donation-items li { margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
.quantity-group { display: flex; align-items: center; gap: 5px; }
.quantity-group input { width: 40px; padding: 2px 5px; font-size: 14px; text-align: center; }

#give-now { background: #4CAF50; color: #fff; border: none; padding: 10px; font-size: 16px; border-radius: 4px; cursor: pointer; }
#give-now:hover { background: #45a049; }

.fully-funded { color: #999; text-decoration: line-through; pointer-events: none; opacity: .6; }

@media (max-width: 600px) {
  #popup { width: 95vw; padding: 15px; }
  #popup h2, #popup label, #popup input, #popup span { font-size: .95rem; }
  .quantity-group input { width: 35px; font-size: 13px; }
}
@media (max-height: 600px) {
  #popup { top: 10%; transform: translateX(-50%); }
}

/* Make the puzzle appear larger on small screens */
@media (max-width: 768px) {
  #svg-container {
    width: 125vw;          /* 1.25× the screen width */
    margin-left: -12.5vw;  /* center it */
  }
}
@media (max-width: 480px) {
  #svg-container {
    width: 145vw;          /* 1.45× on typical phones */
    margin-left: -22.5vw;
  }
}
@media (max-width: 380px) {
  #svg-container {
    width: 160vw;          /* 1.6× on the tiniest phones */
    margin-left: -30vw;
  }
}