/* This is the CSS part */



/* Base page layout: occupy full height, stack elements vertically */
body {
background-color:black; 
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;

}

/* Background still image positioned below video */
#backgroundStill {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}



#startOverlay video {
  width: 90vmin;        /* Increase from previous value */
 height: auto;
  max-height: 100vh;  /* Increase if needed */
  margin-bottom: 20px;
}



/* Reuse existing popup styles for layout */




/* === Lifebar: fixed at bottom-right, responsive === */
.lifebar-container {
  position: static; /* allow it to participate in the .buttons flex layout */
  z-index: 9000;                    /* above overlay, below modal popups if needed */
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: rgba(31, 31, 31, 0.55);     /* subtle plate for readability */
  backdrop-filter: blur(2px);
  border-radius: 10px;
  border: 3px solid rgba(255,255,255,0.15);
  order: 1; /* place after variant buttons by default */
  margin-left: clamp(8px, 1.2vw, 14px); /* small gap from variant buttons */

}

/* bar sizing scales with viewport but stays reasonable */
.lifebar {
  width: min(36vw, 396px);
  max-width: 60vw;
  height: 13px;
  border-radius: 8px;
  /* lighter base + darker dividers for clearer 10 segments */
  background: 
    linear-gradient(90deg, 
      rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.28) 9%,
      rgba(0,0,0,0.36) 9%, rgba(0,0,0,0.36) 10%,
      rgba(255,255,255,0.28) 10%, rgba(255,255,255,0.28) 19%,
      rgba(0,0,0,0.36) 19%, rgba(0,0,0,0.36) 20%,
      rgba(255,255,255,0.28) 20%, rgba(255,255,255,0.28) 29%,
      rgba(0,0,0,0.36) 29%, rgba(0,0,0,0.36) 30%,
      rgba(255,255,255,0.28) 30%, rgba(255,255,255,0.28) 39%,
      rgba(0,0,0,0.36) 39%, rgba(0,0,0,0.36) 40%,
      rgba(255,255,255,0.28) 40%, rgba(255,255,255,0.28) 49%,
      rgba(0,0,0,0.36) 49%, rgba(0,0,0,0.36) 50%,
      rgba(255,255,255,0.28) 50%, rgba(255,255,255,0.28) 59%,
      rgba(0,0,0,0.36) 59%, rgba(0,0,0,0.36) 60%,
      rgba(255,255,255,0.28) 60%, rgba(255,255,255,0.28) 69%,
      rgba(0,0,0,0.36) 69%, rgba(0,0,0,0.36) 70%,
      rgba(255,255,255,0.28) 70%, rgba(255,255,255,0.28) 79%,
      rgba(0,0,0,0.36) 79%, rgba(0,0,0,0.36) 80%,
      rgba(255,255,255,0.28) 80%, rgba(255,255,255,0.28) 89%,
      rgba(0,0,0,0.36) 89%, rgba(0,0,0,0.36) 90%,
      rgba(255,255,255,0.28) 90%
    );
  overflow: hidden;
  position: relative;
}

/* the fill you already have */
.lifebar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ff4d4d, #ffd24d, #5dff6b);
  transition: width 280ms ease;
}

/* skull/butterfly icons next to the bar */
.lifebar-icon {
  width: clamp(24px, 2.8vw, 37px);
  height: auto;
  opacity: 0.9;
}

/* Keep other buttons from overlapping the lifebar on tiny screens */
@media (max-width: 520px) {
  .lifebar { width: min(60vw, 280px); }
}



/* Main video area with fallback black background to avoid white flashes */
.container {
  flex: 1 1 auto;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 80vh; /* Reduced from 80vh to push content up */
  background: black;
  overflow: visible;
  background: url('images/still-life.jpg') center center no-repeat;
 background-size: cover; 
}



/* Ensure base video stays above the background */

#baseVideo {
  background-color: transparent !important;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 1;
  pointer-events: none; /* Prevent it from blocking button interaction */
    display: block;        /* removes inline gap */
}

.overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  z-index: 3; /* Make sure this is higher than baseVideo */
  display: none; /* Hidden by default, shown by JS */
  /* border: 2px dashed yellow; /* Helps to see the video boundary */
  pointer-events: none; /* Allow mouse events to pass through the overlay */
}

.restart-button {
  margin-top: 10px;
  padding: 15px 30px;
  font-size: 1.5rem;
  background-color: black;
  color: rgb(255, 110, 110);

  cursor: pointer;

}


/* Bottom control bar anchored bottom-left (lifebar is already bottom-right) */
.buttons {
  position: static; /* keep in document flow, below .container */
  margin: 10px auto; /* center horizontally and add small gap from video */
  z-index: 9005;                   /* below modals, above stage */
  display: flex;
  flex-direction: row;
  justify-content: center; /* center children horizontally */
  align-items: center;
  gap: clamp(10px, 1.6vw, 16px);
  flex-wrap: nowrap; /* keep variant buttons and lifebar side-by-side */
  max-width: min(90vw, 1100px);
}

/* Home icon: responsive square */
#homeButton {
  order: -1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(36px, 5vw, 56px);
  height: clamp(36px, 5vw, 56px);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  margin-right: clamp(10px, 1.6vw, 16px);
}
#homeButton img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Optional: small hover affordance */
#homeButton:hover { filter: drop-shadow(0 2px 4px rgba(227, 116, 116, 0.25)); }

/* Optional: nudge controls if you want pixel offsets without breaking responsiveness */
:root {
  --home-offset-x: 0px;   /* tweak as needed */
  --home-offset-y: 0px;
}
#homeButton { margin-left: var(--home-offset-x); margin-top: var(--home-offset-y); }

/* Variant buttons group in the bottom bar */
.variant-buttons {
  display: flex;
  gap: clamp(8px, 1.2vw, 14px);
 order: 0;
  flex-wrap: wrap;
}

/* Image-based variant buttons (square, responsive) */
.variant-buttons{
  display: flex;
  gap: clamp(10px, 1.6vw, 16px);
  flex-wrap: wrap;
  align-items: center;
}

.variant-btn.img{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(48px, 6.6vw, 79px);
  height: clamp(48px, 6.6vw, 79px);
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.variant-btn.img img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  image-rendering: auto;
  padding: 2px;
  transition: filter 120ms ease, transform 120ms ease;
}

/* Hover/active/focus affordance */
.variant-btn.img:hover { 
  transform: translateY(-3px); 
  transform: scale(1.1); 
}
.variant-btn.img:active { 
  transform: translateY(0); 
  filter: invert(1) contrast(1.05) brightness(1.05);
}
.variant-btn.img:focus-visible{
  outline: 3px solid #82b1ff;
  outline-offset: 2px;
  border-radius: 10px; /* in case PNG has transparent edges */
}

/* Optional: make the active variant look selected */
.variant-btn.img.is-active {
  filter: drop-shadow(0 0 0.35rem rgba(255,255,255,.35));
   filter: invert(1) contrast(1.05) brightness(1.05);
}
 

/* Small screens: give the bar more width so it doesn't collide with lifebar */
@media (max-width: 560px) {
  .buttons { max-width: 75vw; }
}


/* Exit button at bottom-right */
.exit-button {
  position: absolute;
  bottom: 5px;
  right: 5px;
  padding: 5px 10px;
  font-size: 0.9rem;
  z-index: 10000;
  background: red;
  color: white;
  border: none;
  cursor: pointer;
}

/* Close button inside context4 popup */
.close-button {
  display: block;
  margin: 10px auto 0 auto;
  padding: 5px 15px;
  font-size: 0.9rem;
  cursor: pointer;
}


/* Help window stays square */
.help-popup {
  /* Removed old sizing rules - now controlled by #helpPopup ID rules for proper sizing separation */
  display: none;
}

#helpVideo {
  max-width: 100vw;
  max-height: 100vh;
  width: 100%;
  height: auto;
  margin-bottom: 15px;
}

/* controla la ventana inicial y la ventana final */
.popup {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  border: 2px solid black;
  z-index: 9999;
  background: rgb(255, 192, 192);
  width: 80vmin;
  height: auto;
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
  pointer-events: auto;
}
/*REf: video premio*/
.popup video {
  position: static !important;
  transform: none !important;
  width: 80%;
  height: auto;
  max-height: 50vh;
  display: block;
  margin: 0 auto 10px auto;
}

#prizePopup {
  width: 90vmin;    /* or use max-width: 90vw */
  max-width: 95vw;
  height: 70vh;     /* Taller window */
  position: fixed;  /* make it modal-like */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10001; /* above the scrim */
}

/* Full-screen scrim shown when prize popup is open */
.prize-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 10000; /* below prizePopup but above stage */
}

/* Style the prize text */
#prizeText {
    font-family: 'Silkscreen', sans-serif;
  font-size: 1.2rem;
  text-align: center;
  margin-top: 10px;
  color: black;
   max-width: 80%; /* Keep text width aligned with video */
     margin-left: auto;
  margin-right: auto;
  }


/* Monkey overlay canvas styles */
#monkeyWrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: 1080px;
  pointer-events: none; /* canvas shouldn't block stage interactions */
  z-index: 6; /* sits above video overlay but under popups */
}

#monkeyCanvas {
  display: block;
  image-rendering: optimizeQuality;

  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.popup-button-container button {
  padding: 5px 20px;
  font-size: 1rem;
  cursor: pointer;
}

/* Prize popup actions: two large flexible buttons */
.prize-actions {
  display: flex;
  gap: clamp(8px, 2vw, 12px);
  width: 100%;
  justify-content: center;
  align-items: center;
  padding: 8px 0 0 0;
  box-sizing: border-box;
  flex-wrap: wrap;
  overflow: hidden;
}
.prize-actions .prize-btn {
  flex: 0 0 auto;
  width: 160px;
  padding: 8px 16px;
  font-size: clamp(13px, 1.8vw, 16px);
  font-family: "Helvetica Neue", "Segoe UI", Arial, system-ui, sans-serif;
  font-weight: 700;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.18);
  background: linear-gradient(180deg, #fff 0%, #f1f1f1 100%);
  color: #111;
  cursor: pointer;
  box-shadow: 0 6px 0 rgba(0,0,0,0.18);
}
.prize-actions .prize-btn:active{ transform: translateY(1px); box-shadow: 0 2px 0 rgba(0,0,0,0.25) inset; }

/* Slightly different accent for Rate button */
.prize-actions #rateMeButton {
  background: linear-gradient(90deg, #ffd24d, #ff6b6b);
  color: #111;
  font-weight: 700;
}


/* botones dentro de las ventanas Exit */
.popup-button {
  margin-top: 10px;
  padding: 15px 30px;
  font-size: 1.2rem;
  background-color: black;
  color: rgb(255, 110, 110);
  border: 5px solid white;
  cursor: pointer;
  align-self: flex-end; /* use 'center' if you want it centered */
}




/* Este controla las propiedades de casi todas las popup windows */
.mouse-popup {
  position: absolute;
  background: rgb(237, 180, 180);
  padding: 10px;
  border: 0px solid black;
  z-index: 9999;
  display: none;
  max-width: 90%;
  max-height: 90%;
  overflow: auto;
  box-shadow: 0 10 20px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
}

/*Ref:video pacman calaca*/
.mouse-popup video {
  /* position: static !important; */
  transform: none !important;
  width: 100%;              /* Let the container define the size */
  max-width: 550px;         /* Cap the width */
  height: auto !important;
  max-height: 70vh;         /* Prevent tall videos */
  display: block;
  margin: 0 auto;           /* Center inside popup */
}

/*  #contextVideo5 { max-width: 700px !important; } 
#contextVideo1 { max-width: 500px !important; }  */

 


#creditsButton {
  padding: 10px 20px;
  font-size: 1rem;
  background: white;
  color: black;
  font-family: 'Silkscreen', sans-serif;
  border: 2px solid black;
  border-radius: 15px;
  cursor: pointer;
  margin-left: 150px; /* Adjust this value as needed:distancia de la lifebar */
}

.credits-scrollable {
  font-family: Arial, Helvetica, sans-serif;
  max-height: 50vh;
  overflow-y: auto;
  padding: 15px;
  text-align: left;
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  line-height: 1.6;
}

.credits-scrollable::-webkit-scrollbar {
  width: 8px;
}

.credits-scrollable::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 4px;
}

/* Context Zone Calaca pacman, postmorten y musa paradisiaca */
.context-zone {
  position: absolute;
  border-radius: 50%;
  background: transparent;
  border:0px solid rgb(144, 13, 226);
  z-index: 5;
  cursor: pointer;
}

.context-zone:hover {
  background: rgba(255, 0, 0, 0.5);  /* Highlight more on hover */
   animation: pulseLoop 2s ease-in-out infinite;
}

@keyframes pulseLoop {
  0%, 100% {
    transform: /* translate(-50%, -50%) */ scale(0.3);
    background: rgba(255, 0, 0, 0.2); /* temporary visible while pulsing */
  }
  50% {
    transform: /* translate(-50%, -50%) */ scale(1);
    background: rgba(255, 0, 0, 0.4);
  }
}


/* Context Zone 2 Candela */
.context-zone-2 {
  position: absolute;
 
  border-radius: 50%;
  background: transparent;
  border: 0px solid red;;
  z-index: 5;
  cursor: pointer;

}

.context-zone-2:hover {
  animation: pulseLoop2 2s ease-in-out infinite;
}

@keyframes pulseLoop2 {
  0%, 100% {
    transform:  scale(0.3);
    background: rgb(255, 247, 3);
  }
  50% {
    transform:  scale(1);
    background: rgba(0, 0, 255, 0.4);
  }
}

/* Context Zone 3 Pantocrator window */
.context-zone-3 {
  position: absolute;
 
  border-radius: 50%;
  background: transparent;  /* light green for dev */
  border: 0px solid rgb(49, 8, 255);

  cursor: pointer;
   z-index: 30; /* higher than #rollover2 */
}

.context-zone-3:hover {
  animation: pulse-zone-3 2s infinite;
}

@keyframes pulse-zone-3 {
  0%, 100% { transform: scale(0.3);
  background: rgb(255, 247, 3);
  }
  
  50% { transform: scale(1); 
     background: rgba(255, 0, 0, 0.4);
     }
}


/* Style for Rollover Zone 1 Bananos negros */
.rollover-zone-1 {
  position: absolute;

  /* background: rgba(0, 255, 0, 0.3); */
  background: transparent;
  border: 0px solid green;
  z-index: 5;
  cursor: pointer;

}

/* Style for Rollover Zone 2 Cuadro monkeyz */
.rollover-zone-2 {
  position: absolute;
 
 /* background: rgba(0, 0, 255, 0.3); */
 background: transparent; 
 border: 0px solid rgb(0, 255, 94);
  z-index: 5;
  cursor: pointer;

}

/* Context zones: keep red highlight on hover, no animation */
#videoOverlay .context-zone:hover,
#videoOverlay .context-zone-2:hover,
#videoOverlay .context-zone-3:hover {
  animation: none !important;
  transform: none !important;
  background: rgba(255, 0, 0, 0.45) !important;
  transition: background 160ms ease-in-out !important;
}

/* Rollover zones: semi-transparent blue highlight on hover */
#videoOverlay .rollover-zone-1:hover,
#videoOverlay .rollover-zone-2:hover,
#videoOverlay .rollover-zone-3:hover,
#videoOverlay .rollover-zone-4:hover,
#videoOverlay .rollover-zone-5:hover,
#videoOverlay .rollover-zone-6:hover {
  animation: none !important;
  transform: none !important;
  background: rgba(0, 102, 255, 0.35) !important; /* semi-transparent blue */
  transition: background 160ms ease-in-out !important;
}

/* Ensure both types transition their background smoothly */
#videoOverlay .context-zone,
#videoOverlay .context-zone-2,
#videoOverlay .context-zone-3,
#videoOverlay .rollover-zone-1,
#videoOverlay .rollover-zone-2,
#videoOverlay .rollover-zone-3,
#videoOverlay .rollover-zone-4 {
  transition: background 160ms ease-in-out !important;
}
    


#rollover1 {
  position: absolute;
  z-index: 20;  /* Higher = in front */
  pointer-events: none;
}

#rollover2 {
   position: absolute;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  display: block;         /* Always visible */
  opacity: 1;
  pointer-events: none;   /* Mouse events go to underlying elements */
   z-index: 10; /* Not too high to avoid covering start overlay */
}


#rollover3 {
  display: block;
  opacity: 1;
  pointer-events: none;
  z-index: 10;
}

/* Este es el rollover de la gema azul */
.rollover-zone-3 {
  position: absolute;
  
  cursor: pointer;
   border: 0px solid rgb(221, 27, 118);
  background: transparent; /* Or a semi-transparent dev color if needed */
  z-index: 20;
}

/* Rollover Zone 4: circular hotspot (position/size set from HTML data-attrs) */
.rollover-zone-4 {
  position: absolute;
  cursor: pointer;
  border: 0px solid rgb(221, 27, 118);
  background: transparent;
  border-radius: 50%; /* make circular */
  z-index: 20;
}

/* Rollover Zone 5: circular hotspot (position/size set from HTML data-attrs) */
.rollover-zone-5 {
  position: absolute;
  cursor: pointer;
  border: 0px solid rgb(221, 27, 118);
  background: transparent;
  border-radius: 50%; /* make circular */
  z-index: 20;
}

/* Rollover Zone 6: circular hotspot (position/size set from HTML data-attrs) */
.rollover-zone-6 {
  position: absolute;
  cursor: pointer;
  border: 0px solid rgb(221, 27, 118);
  background: transparent;
  border-radius: 50%; /* make circular */
  z-index: 20;
}


/* Keyframes for scaling animation */
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
}

/* Class to trigger the pulse effect */
.pulse-effect {
  animation: pulse 0.6s ease-out;
}

/* Window Exit laberinto */
#contextWindow4 {
  position: absolute;        /* placed inside .container */

  background: white;
  padding: 10px;
  border: 2px solid black;
  z-index: 10000;
  /* don't hardcode display; use .hidden class instead */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5); /* fixed: missing 'px' after 8 */
/*   pointer-events: auto; */
}

/* rely on .hidden to hide popups */
.hidden { display: none !important; } 

/* keep your video sizing */
#contextVideo4 {
  width: 300px;
  height: auto;
  display: block;
  margin: 0 auto;
}





/* === Help button === */
#helpButton {
  position: fixed;            /* Fixed position on screen */
  bottom: 20px;               /* 20px from the bottom */
  right: 150px;                /* Positioned to the left of the mute button */
  width: 40px;                /* Circle width */
  height: 40px;               /* Circle height */
  border-radius: 50%;         /* Makes it perfectly circular */
  background: white;          /* Button background */
  color: black;               /* Text color */
  border: 2px solid black;    /* Border styling */
  font-weight: bold;          /* Bold label */
  font-size: 2rem;            /* Text size */
  cursor: pointer;            /* Pointer on hover */
  z-index: 9999;              /* Ensures it appears above other elements */
}

/* Fix for modal popups that should be centered and responsive */
/* Base positioning shared by both */
#helpPopup,
#creditsPopup {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 50050 !important;
  width: auto !important;
  box-sizing: border-box !important;
  background: var(--modal-bg, rgba(230,192,192,1)) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45) !important;
}

/* Help window: 95% of viewport (much larger) */
#helpPopup {
  max-width: 92vw !important;
  max-height: 95vh !important;
  padding: clamp(12px, 2.4vw, 24px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  overflow: hidden !important;
}

/* Credits window: standard size (20% smaller than help) */
#creditsPopup {
  max-width: 92vw !important;
  max-height: 76vh !important;
  padding: clamp(12px, 2.4vw, 24px) !important;
}

/* Help popup video: sized for larger window */
#helpPopup video {
  max-width: 100% !important;
  max-height: calc(95vh - 140px) !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
}

/* Credits popup video: standard sizing */
#creditsPopup video {
  max-width: 100% !important;
  max-height: calc(92vh - 140px) !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
}

/* Help popup close button */
#helpPopup .popup-button {
  margin: 12px auto 0 auto !important;
  align-self: center !important;
}

/* Credits popup close button */
#creditsPopup .popup-button {
  margin: 12px auto 0 auto !important;
  align-self: center !important;
}

/* Layout specifically for credits: keep text scrollable but footer (close) visible */
#creditsPopup {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

#creditsPopup .credits-scrollable {
  overflow: auto !important;
  flex: 1 1 auto !important;
  max-height: calc(76vh - 80px) !important;
  padding: 16px !important;
  padding-right: 12px !important;
  background-color: #e8e8e8 !important;
  border-radius: 8px !important;
}

#creditsPopup > .popup-button-container {
  flex: 0 0 auto !important;
  display: flex !important;
  justify-content: center !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Ensure hidden state always wins for these modals (higher specificity) */
#creditsPopup.hidden,
#helpPopup.hidden {
  display: none !important;
}

/* Help visual area: expanded to fill larger window */
#helpPopup .help-visual {
  display: block !important;
  max-height: calc(95vh - 100px) !important;
  max-width: 92vw !important;
  width: 100% !important;
  height: auto !important;
  overflow: hidden !important;
  flex: 1 1 auto !important;
}

/* Help video sizing: fills the visual area without overflow */
#helpPopup .help-visual video,
#helpVideo {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

/* Help button container at bottom */
#helpPopup > .popup-button-container {
  flex: 0 0 auto !important;
  display: flex !important;
  justify-content: center !important;
  margin-top: 12px !important;
}

#helpPopup .popup-button {
  margin: 0 !important;
  flex-shrink: 0 !important;
  align-self: center !important;
}



/* ensure .buttons stays centered (overrides earlier conflicting rules) */
.buttons {
  position: static; /* ensure buttons remain below .container in normal flow */
}

.variant-hint {
  position: absolute;
  /* sit about 20px above the top of the buttons bar */
   /* sit above the buttons bar */
  bottom: 90px;
  /* align over the variant button */
  left: 290px;        /* ← tweak this */
  /* remove centering transform */
  background: rgba(0,0,0,0.85);
  color: #fff;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 1.5rem;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 9999;
}
.variant-hint.show {
  opacity: 1;
}

@keyframes hint-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.1); }
}
#cycleVariantButton.hint-pulse {
  /* make sure it scales from its center */
  transform-origin: center center;
  animation: hint-pulse 1s ease-in-out infinite;
}


/* Remove default focus outline/border from buttons in the bar */
.buttons button {
  border: none;       /* kills any visible border */
  outline: none;      /* removes the focus outline */
  box-shadow: none;   /* just in case you’ve got focus-ring shadows */
}

/* Specifically ensure no outline on focus */
.buttons button:focus {
  outline: none;
  box-shadow: none;
}


/* Overlay that we will align to the ACTUAL drawn video rect (inside container) */
#videoOverlay {

  position: absolute;
  /* left/top/width/height set by JS */
  pointer-events: none;
  z-index: 5;              /* above the video, below popups */
  will-change: transform;
}

/* Hotspots inside overlay are interactive and absolutely positioned */
#videoOverlay .context-zone,
#videoOverlay .context-zone-2,
#videoOverlay .context-zone-3,
#videoOverlay .rollover-zone-1,
#videoOverlay .rollover-zone-2,
#videoOverlay .rollover-zone-3,
#videoOverlay .rollover-zone-4,
#videoOverlay .rollover-zone-5,
#videoOverlay .rollover-zone-6 {
  position: absolute;
  pointer-events: auto;
  box-sizing: border-box;
    transform: none;   /* critical: kill any leftover translate(-50%,-50%) */
  width: auto;       /* no CSS sizes—JS will set */
  height: auto;
}




/* ===== Off-canvas base ===== */
.hidden { display: none !important; }          /* already added earlier, keep it */



/* DEBUG: force menu toggle visible and on top */
.offcanvas-toggle {
  position: fixed;
  top: clamp(12px, 2vh, 24px);
  left: clamp(12px, 2vw, 24px);
  bottom: auto;                /* ensure it's not anchored bottom anymore */
  z-index: 12010;
  padding: 8px 10px;
  font: 700 14px/1 'Silkscreen', sans-serif;
  border: 1px solid #222;
  border-radius: 10px;
  background: #fff;
  color: #111;
  cursor: pointer;
}


/* Scrim behind the panel */
.offcanvas-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 12000;
  opacity: 0;
  transition: opacity 200ms ease;
}

/* Panel */
.offcanvas {
  position: fixed;
  left: 0;
  top: 0;
  height: 100dvh;
  width: min(86vw, 320px);
  max-width: 92vw;
  background: #111;
  color: #fff;
  z-index: 12050;                 /* above scrim and UI */
  transform: translateX(-100%);
  transition: transform 240ms ease;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(255,255,255,.12);
}

/* When open */
.offcanvas.is-open { transform: translateX(0); }
.offcanvas-scrim.is-open { opacity: 1; }

/* Header & list */
.offcanvas-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.offcanvas-close {
  appearance: none; background: transparent; border: 0; color: #fff;
  font-size: 18px; cursor: pointer; padding: 6px;
}
.offcanvas-list { list-style: none; margin: 0; padding: 12px; display: grid; gap: 8px; }
.offcanvas-link {
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.05);
  color: #fff;
  font: 600 14px/1 'Silkscreen', sans-serif;
  cursor: pointer;
}
.offcanvas-link:hover { background: rgba(255,255,255,.12); }

/* Prevent body scroll while menu is open */
body.no-scroll { overflow: hidden; }


/* --- POPUP BASE --- */
.hidden { display: none !important; }


.modal-popup { pointer-events: auto; }
.modal-popup * { pointer-events: auto; }


/* Accessibly hide utility */
.sr-only{position:absolute!important;clip:rect(1px,1px,1px,1px)!important;width:1px!important;height:1px!important;overflow:hidden!important;white-space:nowrap!important}

/* Block the stage while wizard is open */
.lock-stage .container,
.lock-stage #videoOverlay,
.lock-stage .buttons,
.lock-stage .lifebar-container { pointer-events:none; filter: saturate(.8) brightness(.9); }

/* Wizard shell */

.wizard-actions button {
  /* increased ~10% for better visibility */
  padding:11px 18px; border-radius:11px; border:1px solid #fff; background:#fff; color:#111;
  font:700 clamp(15.4px,1.76vw,17.6px)/1 'Silkscreen', sans-serif; cursor:pointer;
}
.wizard-actions button:focus-visible { outline:3px solid #4da3ff; outline-offset:2px; }



/* Subtle depth + press animation for wizard buttons */
.wizard-actions button{
  position: relative;
  transform: translateY(0);
  box-shadow: 0 4px 0 rgba(0,0,0,.35);
  transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

/* Lift slightly on hover (mouse) */
.wizard-actions button:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 0 rgba(0,0,0,.35);
}

/* Pressed state (mouse down & keyboard-assisted via .is-pressed) */
.wizard-actions button:active,
.wizard-actions button.is-pressed{
  transform: translateY(1px);
  box-shadow: 0 2px 0 rgba(0,0,0,.45) inset, 0 0 0 1px rgba(0,0,0,.25);
}

/* Keep focus ring visible for keyboard users */
.wizard-actions button:focus-visible{
  outline: 3px solid #82b1ff;
  outline-offset: 2px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .wizard-actions button{ transition: none; }
}





/* Centered, proportional panel. Height drives width. No margins. */
.wizard{
  position: fixed; 
  inset: 0; 
  z-index: 20000;
  display: grid; 
  place-items: center; /* centers panel vertically+horizontally */
    isolation: isolate;         /* create a stacking context for the overlay */
}

/* Panel: height -> width (16:9), no margin, no scrollbars */
/* Window width drives height; keep 16:9 and center */
.wizard-panel{
  /* visuals */
  background:#111; color:#fff;
  border-radius: 18px;
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
  box-sizing: border-box;


  position: relative;
  z-index: 1;

 
  width: min(96svw, 1200px);     /* keep responsive, but not excessive */
  height: clamp(520px, 92svh, 1000px); /* <= window never taller than viewport */
  --wiz-pad: clamp(22px, 3.6vw, 36px);
padding: 0;   /* let the video use full panel width/height */
  margin: 0;
  overflow: hidden;               /* keep everything inside */




  /* layout: header | content | actions */
  display: grid;
  grid-template-rows:minmax(0, 1fr);
  gap: 12px;
  overflow: hidden;            /* no scrollbars */
}

/* The dimming layer */
.wizard::before{
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);  /* tweak 0.30–0.55 to taste */
  backdrop-filter: blur(1px);    /* optional softening */
  pointer-events: none;          /* never blocks clicks inside the wizard */
  z-index: 0;                    /* sits behind the panel */
}

/* One column, four rows: title | video | text | actions */
.wizard-step{
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;  /* 4 rows */
  gap: 0px;
  min-height: 0;     /* critical for the video row to shrink when needed */
  overflow: hidden;  /* no scrollbars in the step */
  padding: var(--wiz-pad);  
}
.wizard-step.hidden{ display:none !important; }


.wizard-step video{
  width: 100%;
  height: 100%;           /* fill the video row fully */
  object-fit: contain;    /* keep aspect; shows letterbox if aspect differs */
  background: #111;
  border-radius: 12px;
  display: block;
}


/* Hide title/text (you said they’re not important now) */
.wizard-h, .wizard-p { display: none !important; }

/*  .wizard-h{ margin: 0 0 6px 0; }
.wizard-p{ margin: 0; line-height: 1.35; }   */

/* .wizard-p{ display:none; }  */ /* hide the paragraph line */


/* Actions (Next/Start) always visible in the bottom row */

.wizard-actions{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 8px;
  padding-bottom: calc(var(--wiz-pad) * 0.2); /* tiny cushion above bottom */
  background: transparent;
}

/* Distinct Start button styling (larger, bolder, standout color) */
.wizard-actions button#wizardStart{
  padding: 14px 22px; /* larger hit area */
  border-radius: 12px;
  font-weight: 800;
  font-size: clamp(18px, 2.2vw, 20px);
  background: #ff6b6b; /* standout coral/red */
  color: #fff;
  border: 1px solid rgba(0,0,0,0.15);
  box-shadow: 0 6px 0 rgba(0,0,0,.35);
  transform: translateY(0);
  transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

.wizard-actions button#wizardStart:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 0 rgba(0,0,0,.35);
}

.wizard-actions button#wizardStart:active,
.wizard-actions button#wizardStart.is-pressed{
  transform: translateY(1px);
  box-shadow: 0 3px 0 rgba(0,0,0,.45) inset, 0 0 0 1px rgba(0,0,0,.25);
}

.wizard-actions button#wizardStart:focus-visible{
  outline: 3px solid rgba(255,107,107,0.35);
  outline-offset: 2px;
}


/* ===== Feedback Center UI ===== */
.feedback-modal{
  /* restored to previous max width so window size remains as before */
  width: min(96vw, 520px);       /* reduced from 720px to 520px */
  max-height: 75svh;             /* reduced from 92svh to 75svh */
  background: #eeafb8;
  color: black;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(0,0,0,.45);
  padding: clamp(18px, 3.6vw, 28px);

  display: grid;
  grid-template-rows: auto auto auto auto;
  gap: clamp(12px, 2vw, 18px);

 font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.4;

}  

/* Keep the feedback panel clickable over the backdrop */
.feedback-modal{ 
  pointer-events: auto; 
position: relative; 
z-index: 50001;
}


.feedback-title{ margin: 0; font-weight: 700; }
.feedback-copy{ margin: 0; line-height: 1.35; opacity: .9; }

.feedback-faces{
  position: relative;
  height: 40px;            /* space for the skulls above the dots */
}
.feedback-faces .face-left,
.feedback-faces .face-right{
  position: absolute; top: 0; width: 50px; height: 50px; object-fit: contain;
}
.feedback-faces .face-left{ left: 0; }
.feedback-faces .face-right{ right: 0; }

.feedback-scale{
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: clamp(6px, 1vw, 10px);
  align-items: end;
}
.score-dot{
  height: clamp(36px, 5.2vw, 44px);
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  background: #1c1c1c;
  color: #bbb;
  font: inherit;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .12s ease, background .12s ease, color .12s ease, border-color .12s ease;
}
.score-dot:hover{ transform: translateY(-1px); }
.score-dot[aria-checked="true"],
.score-dot.selected{
  background: #e9e9e9;
  color: #111;
  border-color: #e9e9e9;
  font-weight: 700;
}

.feedback-actions{
  display: flex; justify-content: center; gap: clamp(6px, 1vw, 10px); margin-top: 4px; flex-wrap: wrap; overflow: hidden;
}

/* small button presets */
.btn-primary{
  padding: 10px 16px; border-radius: 10px; border: 1px solid #fff;
  background: #fff; color:#111; font: inherit; cursor: pointer;
}

.btn-primary:disabled{ opacity: .5; cursor: not-allowed; }

.btn-ghost{
  padding: 10px 16px; border-radius: 10px; border: 1px solid rgba(255,255,255,.8);
  background: rgba(255,255,255,.2); color:rgb(62, 62, 62); font: inherit; cursor: pointer;
}


/* Result window inner bits */
.feedback-hero{
  display: grid; place-items: center; padding: 12px 0 6px; /* breathing room */
}
.feedback-hero img,
.feedback-hero video{
  width: 90%; /* occupy more horizontal space inside the modal */
  max-width: 950px; /* but don't exceed this absolute size */
  height: auto; 
  max-height: 70vh; /* prevent overflow on small screens */
  object-fit: contain;
  display: block;
  margin: 0 auto;
}
.feedback-hero video{ background: transparent; }
.feedback-stats{
  display: flex; gap: 18px; align-items: center; opacity: .9;
}
.feedback-caption{
  margin: 0;
  line-height: 1.35;
  min-height: 2.5em;
  background: #e5d5d5; /* updated background color */
  color: #222;
  font-family: "Helvetica Neue", "Segoe UI", Arial, system-ui, sans-serif; /* web-safe alternative to Myriad Pro */
  font-size: 1.4rem; /* larger per request */
  padding: 10px 14px;
  border-radius: 6px;
  display: inline-block;
 }


/* Generic modal centering and visibility */
.modal-popup{
  position: fixed;
  display: none;                 /* hidden by default */
  z-index: 50000;                /* above overlay/popups */
}

.modal-popup:not(.hidden){
  display: grid;                 /* show when .hidden is removed */
  place-items: center;           /* center the modal content */
}

/* Feedback result modal: full-screen with grid centering */
#feedbackResult,
#feedbackRate {
  inset: 0 !important;           /* stretch to full viewport */
}


/* scrim shouldn't catch clicks unless it's open */
.offcanvas-scrim { pointer-events: none; }
.offcanvas-scrim.is-open { pointer-events: auto; }

/* Center the text only in the "Rate this work" window */
#feedbackRate .feedback-title,
#feedbackRate .feedback-copy{
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}