html {
  /* Prevent horizontal scrollbar caused by transformed overflow */
  overflow-x: hidden;
  /* Keep viewport units stable if scrollbars appear */
  scrollbar-gutter: stable both-edges;
}

body {
  margin : 0px; 
  overflow: hidden;
  font-family: Arial, Courier, 'Courier New',  monospace;
}

/* Mini-game overlay mode: hide camera, fish UI, and bubbles */
body.mini-game-active #video-container { display: none !important; }
body.mini-game-active .new-capture { display: none !important; }
body.mini-game-active .fish-collection { display: none !important; }
body.mini-game-active .bubble-1,
body.mini-game-active .bubble-2,
body.mini-game-active .bubble-3,
body.mini-game-active .bubble-spawn { display: none !important; animation: none !important; }

/* Landing Page */
.landing-page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.landing-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  max-width: 500px;
  z-index: 15;
}

.landing-text {
  color: #ffffff;
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 40px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  background: rgba(0, 0, 0, 0.3);
  padding: 20px;
  border-radius: 15px;
}

.landing-text p {
  margin: 0;
}

.start-button {
  background: #ff6b35;
  color: #ffffff;
  border: none;
  padding: 18px 60px;
  font-size: 28px;
  font-weight: bold;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  text-transform: uppercase;
}

.start-button:hover {
  background: #ff8555;
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.start-button:active {
  transform: scale(0.98);
}

#counter {
  color: #cfe7f4; 
  display: flex;
  justify-content: center;
  align-items: center;
  text-shadow: #000 1px 0 10px;
  font-size: 48px;
}

.logo-wrapper {
  position: absolute;
  bottom: 30px;
  left: 0;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  z-index: 13;
}

.logo {
  width: 80vw;
}

.logo-shake {
  animation: logo-shake 400ms ease-in-out 1;
  will-change: transform;
}

@keyframes logo-shake {
  0% { transform: translateX(0) rotate(0deg); }
  15% { transform: translateX(-4px) rotate(-2deg); }
  30% { transform: translateX(4px) rotate(2deg); }
  45% { transform: translateX(-3px) rotate(-1.5deg); }
  60% { transform: translateX(3px) rotate(1.5deg); }
  75% { transform: translateX(-2px) rotate(-1deg); }
  90% { transform: translateX(2px) rotate(1deg); }
  100% { transform: translateX(0) rotate(0deg); }
}

.front-reef {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100vw;
  z-index: 10;
  opacity: 0.6;
}

.middle-reef {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100vw;
  z-index: 9;
  opacity: 0.4;
}
/* .left-coral {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40vw;
  z-index: 10;
  opacity: 0.4;
}

.right-coral {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20vw;
  z-index: 10;
  opacity: 0.3;
} */

.background-img {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  mix-blend-mode: hard-light;
  opacity: 0.4;
  z-index: 9;
}

.new-capture {
  position: absolute;
  left: 0;
  top: 10%;
  height: 100vw;
  width: 100vw;
  /* display: flex; */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: none;
  background-image: radial-gradient(circle, #FFF 10%, transparent, transparent);
  transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1), opacity 0.6s ease-out;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.new-capture img {
  width: 50vw;
}

.fish-collection {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100vw - 48px);
  height: 5vh;
  z-index: 11;
  padding: 24px;
  display: flex;
  flex-wrap: wrap;
}
.fish-collection img {
  position: relative;
  height: 100%;
  margin: 10px;
  transition: opacity 0.8s ease-in;
}

@keyframes fish-wiggle {
  0% {
    transform: rotate(0deg) skewY(0deg) translateY(0) scale(1);
  }
  10% {
    transform: rotate(-12deg) skewY(-4deg) translateY(-8px) scale(1.05);
  }
  20% {
    transform: rotate(12deg) skewY(4deg) translateY(-5px) scale(0.98);
  }
  30% {
    transform: rotate(-10deg) skewY(-3deg) translateY(-10px) scale(1.03);
  }
  40% {
    transform: rotate(10deg) skewY(3deg) translateY(-3px) scale(0.97);
  }
  50% {
    transform: rotate(-8deg) skewY(-2deg) translateY(-7px) scale(1.02);
  }
  60% {
    transform: rotate(8deg) skewY(2deg) translateY(-2px) scale(0.99);
  }
  70% {
    transform: rotate(-5deg) skewY(-1deg) translateY(-5px) scale(1.01);
  }
  80% {
    transform: rotate(5deg) skewY(1deg) translateY(-1px) scale(0.99);
  }
  90% {
    transform: rotate(-2deg) skewY(-0.5deg) translateY(-2px) scale(1);
  }
  100% {
    transform: rotate(0deg) skewY(0deg) translateY(0) scale(1);
  }
}

@keyframes fish-float {
  0% {
    transform: rotate(0deg) translateY(0);
  }
  25% {
    transform: rotate(-1deg) translateY(-3px);
  }
  50% {
    transform: rotate(1deg) translateY(-1px);
  }
  75% {
    transform: rotate(-0.5deg) translateY(-2px);
  }
  100% {
    transform: rotate(0deg) translateY(0);
  }
}

.fish-wiggle {
  animation: fish-wiggle 1.2s ease-in-out, fish-float 4s ease-in-out 1.2s infinite;
}

.fish-float-only {
  animation: fish-float 4s ease-in-out infinite;
  transform: scale(1.2);
}

@keyframes fish-victory {
  0% {
    transform: rotate(0deg) scale(1);
  }
  10% {
    transform: rotate(-15deg) scale(1.1);
  }
  20% {
    transform: rotate(15deg) scale(1.2);
  }
  30% {
    transform: rotate(-15deg) scale(1.1);
  }
  40% {
    transform: rotate(15deg) scale(1.2);
  }
  50% {
    transform: rotate(-10deg) scale(1.15);
  }
  60% {
    transform: rotate(10deg) scale(1.25);
  }
  70% {
    transform: rotate(-5deg) scale(1.2);
  }
  80% {
    transform: rotate(5deg) scale(1.3);
  }
  90% {
    transform: rotate(-2deg) scale(1.25);
  }
  100% {
    transform: rotate(0deg) scale(1.2);
  }
}

.fish-victory {
  animation: fish-victory 2s ease-in-out 2;
}

/* Victory Stage: centered big fish with celebration */
.victory-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  /* Clip any rotating overflow so it doesn't affect viewport */
  overflow: hidden;
  contain: paint;
}

.victory-center {
  position: relative;
  z-index: 2;
}

.victory-center-img {
  width: 75vmin !important;
}

/* New swarm layer for circular animation (JS-positioned) */
.victory-swarm {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.swarm-fish {
  position: absolute;
  width: 40px;
  height: auto;
  will-change: transform, top, left;
}
img.swarm-fish {
  width: 20vw;
}

/* Gentle bobbing without rotation for dancers */
@keyframes fish-bob {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}

/* Victory overlay */
.victory-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200000; /* above mini-game overlay (100000) */
}

.victory-modal {
  position: relative;
  background: #fff;
  border-radius: 16px;
  padding: 20px 24px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  max-width: 76vw;
  width: 480px;
  transition: transform 0.35s cubic-bezier(0.4, 0.0, 0.2, 1);
  will-change: transform;
}

/* Docked menu states (slides to bottom, leaves handle peeking) */
.victory-overlay.is-docked { align-items: flex-end; }
.victory-overlay.is-docked .victory-modal { margin-bottom: 12px; }
/* When collapsed, allow interactions through overlay but keep handle clickable */
.victory-overlay.is-docked.collapsed { pointer-events: none; }
.victory-overlay.is-docked.collapsed .victory-modal { pointer-events: auto; transform: translateY(100%); }

.victory-modal-close {
  position: absolute;
  background: white;
  width: 60px;
  height: 60px;
  border-radius: 30px;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  font-size: 2.6em;
  line-height: 1;
}

.victory-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 16px;
  color: #0b2740;
}

.victory-text{
  font-size: 16px;
  margin-top: 20px;
  line-height: 25px;
  margin-bottom: 15px;
}

.victory-btn {
  padding: 12px 18px;
  border-radius: 10px;
  border: 0;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
}

.victory-btn-restart {
  background: #0ea5e9;
  color: white;
  width: 100%;
  margin-top: 20px;
}

/* Redesigned menu layout */
.menu-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: nowrap;
  margin-bottom: 6px;
}


.mini-games-title {
  font-size: 14px;
  font-weight: 700;
  color: #0b2740;
  margin: 50px 0 4px;
  opacity: 0.9;
}

.mini-games-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: nowrap;
}
  .mini-game-btn {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    height: 50px;

    
  }

  .mini-game-label {
    margin-top: 8px;
    text-align: center;
    font-size: 0.8em;
    font-weight: 100;
  }


/* Bubbles */
  .bubble-1 {
    width: 5px;
    height: 5px;
    
    position: absolute;
    animation-name: bubble-1-anim;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    z-index: 12;
  }
  
  @keyframes bubble-1-anim {
    0%   {left:50%; bottom:0; opacity: 1;}
    50%   {left:47%; bottom:300px; opacity: 1;}
    100% {left:50%; bottom:600px; opacity: 0;}
  }

  .bubble-2 {
    width: 10px;
    height: 10px;
    
    position: absolute;
    animation-name: bubble-2-anim;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    z-index: 14;
  }
  
  @keyframes bubble-2-anim {
    0%   {left:30%; bottom:0; opacity: 1;}
    50%   {left:37%; bottom:150px; opacity: 1;}
    100% {left:30%; bottom:300px; opacity: 0;}
  }

  .bubble-3 {
    width: 12px;
    height: 12px;
    
    position: absolute;
    animation-name: bubble-3-anim;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    z-index: 12;
  }
  
  @keyframes bubble-3-anim {
    0%   {left:75%; bottom:0; opacity: 1;}
    50%   {left:80%; bottom:450px; opacity: 1;}
    100% {left:75%; bottom:900px; opacity: 0;}
  }

  .bubble-spawn {
    position: fixed;
    pointer-events: none;
    z-index: 13;
  }

  @keyframes bubble-float-up {
    0% {
      transform: translateY(0) translateX(0);
      opacity: 1;
    }
    50% {
      transform: translateY(-150px) translateX(20px);
      opacity: 0.8;
    }
    100% {
      transform: translateY(-300px) translateX(0);
      opacity: 0;
    }
  }

/* Developer Toolbar */
.dev-toolbar {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 320px;
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  z-index: 19999;
  border-left: 2px solid #00ff00;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s ease-in-out;
  transform: translateX(0);
}

.dev-toolbar.collapsed { transform: translateX(calc(100% - 40px)); }

.dev-toolbar-toggle {
  background: #1a1a1a;
  padding: 10px 16px;
  font-weight: bold;
  font-size: 14px;
  color: #00ff00;
  cursor: pointer;
  border-bottom: 1px solid #333;
  user-select: none;
}

.dev-toolbar-toggle:hover {
  background: #2a2a2a;
}

.dev-toolbar-header {
  background: #1a1a1a;
  padding: 8px 16px;
  font-weight: bold;
  font-size: 14px;
  color: #00ff00;
  border-bottom: 1px solid #333;
}

.dev-toolbar-content {
  padding: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}

.dev-btn {
  padding: 8px 16px;
  background: #2d5a2d;
  color: #fff;
  border: 1px solid #00ff00;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-weight: bold;
  transition: all 0.2s;
  min-width: 100px;
}

.dev-btn:hover {
  background: #3d7a3d;
  transform: scale(1.05);
}

.dev-btn:active {
  transform: scale(0.95);
}

.dev-btn-danger {
  background: #5a2d2d;
  border-color: #ff0000;
}

.dev-btn-danger:hover {
  background: #7a3d3d;
}

.dev-btn-toggle {
  background: #2d4a5a;
  border-color: #00aaff;
  flex-basis: 100%;
  margin-bottom: 8px;
}

.dev-btn-toggle:hover {
  background: #3d6a7a;
}

/* Video Container and Canvas Styles */
#video-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
}

#video {
  display: none;
}

#canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}