/* ===== Natural Resources interactive lesson ===== */
:root {
  --stage-w: 1920px;
  --stage-h: 1080px;
  /* Letterbox color shown around the lesson when the window shape differs
     (muted hunter green: lighter than the black nav bar, but grayer than the
     bright/lime/mint greens used on the slides so nothing blends together). */
  --bar: #3b6647;
}

* { box-sizing: border-box; }

html, body { margin: 0; height: 100%; background: var(--bar); overflow: hidden; }

#viewport {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--bar);
}

/* Fixed 1920x1080 canvas, scaled to fit by app.js (proportions locked). */
#stage {
  position: relative;
  flex: none;
  width: var(--stage-w);
  height: var(--stage-h);
  transform-origin: center center;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  background: var(--bar);   /* shows while the homepage video loads */
}

#scenes, .scene { position: absolute; inset: 0; }
.scene { display: none; }
.scene.active { display: block; }
.scene { transition: opacity .35s ease; }
.scene.loading { opacity: 0; }

.scene .bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

/* ---- Invisible clickable hotspots ---- */
.hotspot {
  position: absolute;
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 12px;
}
.hotspot.round { border-radius: 50%; }
.hotspot:focus-visible { outline: 4px solid #2a9df4; }

/* ---- Image buttons ---- */
.imgbtn {
  position: absolute;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  transition: transform .1s ease;
  z-index: 5;
}
.imgbtn img { display: block; width: 100%; height: 100%; pointer-events: none; }
.imgbtn:hover { transform: scale(1.07); }
.imgbtn:active { transform: scale(.95); }
.imgbtn:focus-visible { outline: 4px solid #2a9df4; border-radius: 50%; }

.speaker { z-index: 10; }
.speaker.playing img { animation: speak 1s ease-in-out infinite; }
@keyframes speak { 0%,100% { transform: scale(1); } 50% { transform: scale(1.15); } }

.category:hover { transform: scale(1.04); }

/* ---- Nav bar ---- */
#nav { position: absolute; left: 0; top: 0; width: 185px; height: 100%; z-index: 40; }
#nav[hidden] { display: none; }

/* ---- Popups ---- */
#popLayer { position: absolute; inset: 0; z-index: 60; pointer-events: none; }
.popup {
  position: absolute;
  pointer-events: auto;
  z-index: 30;
  filter: drop-shadow(0 10px 28px rgba(0,0,0,.45));
  animation: zoomIn .3s cubic-bezier(.2,.9,.3,1.2) both;
}
.popup.closing { animation: shrinkOut .22s ease-in both; }
.popup.pending { visibility: hidden; animation: none; }
@keyframes zoomIn { from { transform: scale(.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes shrinkOut { from { transform: scale(1); opacity: 1; } to { transform: scale(.1); opacity: 0; } }
.popup-img { display: block; width: 100%; height: auto; pointer-events: none; }

.popup-close {
  position: absolute;
  top: -20px; right: -20px;
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 4px solid #fff;
  background: #d33;
  color: #fff;
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0,0,0,.4);
  display: flex; align-items: center; justify-content: center;
  transition: transform .08s ease;
  z-index: 15;
  padding: 0 0 4px;
}
.popup-close:hover { transform: scale(1.1); }
.popup-close:active { transform: scale(.94); }

/* ---- Overlays & video ---- */
.backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.6);
}
.backdrop[hidden] { display: none; }
#overlayLayer { z-index: 100; }
#videoLayer { z-index: 150; }

.overlay-box { position: absolute; animation: zoomIn .3s ease-out both; }
.overlay-img { display: block; width: 100%; height: 100%; pointer-events: none; }

.video-box {
  position: absolute;
  left: 252px;
  top: 90px;
  width: 1600px;
  height: 900px;
  background: #000;
  box-shadow: 0 10px 40px rgba(0,0,0,.6);
}
.video-box iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---- Sorting mat cards ---- */
.drag-card {
  position: absolute;
  cursor: grab;
  touch-action: none;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.35));
  z-index: 3;
}
.drag-card.dragging { cursor: grabbing; transform: scale(1.08); filter: drop-shadow(0 10px 16px rgba(0,0,0,.4)); }
.drag-card.snapping { transition: left .3s ease, top .3s ease, width .3s ease, height .3s ease; }
.drag-card.done { cursor: default; }

/* ---- Flip cards ---- */
.flipcard { position: absolute; perspective: 1400px; cursor: pointer; }
.flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform .6s ease;
  transform-style: preserve-3d;
}
.flipcard.flipped .flip-inner { transform: rotateY(180deg); }
.flipcard.no-anim .flip-inner { transition: none; }
.face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.face img, img.face { display: block; width: 100%; height: 100%; }
.face.back { transform: rotateY(180deg); }
.face { box-shadow: 0 14px 30px rgba(0,0,0,.6); }
.face.back > img { pointer-events: none; }
.flipcard:hover .flip-inner { box-shadow: 0 0 0 5px rgba(255,255,255,.6); }
.flipcard:focus-visible { outline: 4px solid #2a9df4; }

/* ---- Spinner ---- */
.spinner-arrow { position: absolute; pointer-events: none; z-index: 4; }
.spinner-arrow.spin-anim { transition: transform 2.5s cubic-bezier(.15,.7,.2,1); }
.spin-btn.pulse img { animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* ---- Debug: press "d" to see hotspot boundaries ---- */
body.debug .hotspot { background: rgba(255,0,0,.2); outline: 2px dashed #f00; }