.progress-header {
  text-align: center;
  margin-bottom: 20px;
  color: #004d40;
}

.simulation-controls {
  display: none;
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 10px;
  border: 1px solid #dee2e6;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: center;
  width: 90%;
  max-width: 780px;
  position: relative;
}
.simulation-controls.visible {
  display: flex;
}
#closeControlsBtnAqua {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 20px;
  font-weight: bold;
  color: #6c757d;
  cursor: pointer;
  padding: 5px;
  line-height: 1;
}
#closeControlsBtnAqua:hover {
  color: #343a40;
}
.control-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}
.simulation-controls label {
  font-weight: bold;
  color: #343a40;
  font-size: 13px;
}
.simulation-controls select,
.simulation-controls input[type="range"],
.simulation-controls button {
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #ced4da;
  font-size: 14px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
.simulation-controls select {
  min-width: 100px;
}
.simulation-controls input[type="range"] {
  flex-grow: 1;
  max-width: 200px;
  margin-top: 2px;
}
.simulation-controls button#overviewButtonAqua {
  background-color: #28a745;
  color: white;
  cursor: pointer;
  border: none;
  padding: 10px 15px;
  transition: background-color 0.2s ease;
}
.simulation-controls button#overviewButtonAqua:hover {
  background-color: #218838;
}
#performanceValueAqua {
  min-width: 40px;
  text-align: right;
  font-weight: bold;
  color: #495057;
  font-size: 14px;
  margin-left: 5px;
}
.slider-group {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 300px;
}

#aquarium {
  /* width: 90vw; */ /* REMOVE or comment out this line */
  width: 100%;     /* Make it take the full width of its parent (#progressTabContent) */
  max-width: 1200px; /* Set a max-width similar to the body or what the grid uses */
                     /* This ensures it doesn't get TOO wide on huge screens */
                     /* And aligns with the overall page content max-width */
  height: 60vh;
  max-height: 500px; /* You can adjust this if needed */
  background: linear-gradient(to bottom, #87CEEB 0%, #4682B4 70%, #3672A4 100%);
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0,0,0,0.3);
  margin-left: auto;  /* For centering the block */
  margin-right: auto; /* For centering the block */
  /* margin-top: 0; and margin-bottom: 0; can be added if you want specific vertical margins */
  box-sizing: border-box; /* Good practice */
}

#aquarium::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(
      ellipse 50% 100% at 50% -10%,
      rgba(255, 255, 230, 0.35) 0%,
      rgba(255, 255, 230, 0.2) 20%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 40% 90% at 25% -5%,
      rgba(255, 255, 230, 0.25) 0%,
      rgba(255, 255, 230, 0.15) 25%,
      transparent 65%
    ),
    radial-gradient(
      ellipse 40% 90% at 75% -5%,
      rgba(255, 255, 230, 0.25) 0%,
      rgba(255, 255, 230, 0.15) 25%,
      transparent 65%
    );
  background-size: 100% 100%, 100% 100%, 100% 100%;
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
  opacity: 0.9;
  mix-blend-mode: soft-light;
  animation: swayTorchlight 15s ease-in-out infinite alternate;
}
@keyframes swayTorchlight {
  0% {
    transform: perspective(500px) rotateY(-1deg) rotateX(0.5deg)
      translateX(-2px);
    opacity: 0.8;
  }
  50% {
    opacity: 0.95;
  }
  100% {
    transform: perspective(500px) rotateY(1deg) rotateX(-0.5deg) translateX(2px);
    opacity: 0.8;
  }
}

#aquariumOverviewToggleBtn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 55;
  padding: 6px 10px;
  font-size: 12px;
  background-color: rgba(0, 0, 0, 0.3);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
#aquariumOverviewToggleBtn:hover {
  background-color: rgba(0, 0, 0, 0.5);
}
/* No longer hiding based on .overview-active for #aquarium, text will change */

#overviewOverlayAqua {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.005);
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(0px);
}
#overviewFishContainerAqua {
  width: 95%;
  height: 95%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(6, auto);
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  overflow-y: auto;
}
@media (min-width: 600px) and (min-height: 400px), (orientation: landscape) {
  #overviewFishContainerAqua {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, auto);
    gap: 15px;
  }
}
.overview-fish-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 10px;
  margin-bottom: 5px;
  /*background-color: rgba(4, 53, 72, 0.287);*/
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0);
  transition: transform 0.2s ease;
}

.overview-fish-item .fish {
  position: static !important;
  margin-bottom: 8px;
}
.performance-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 90%;
  max-width: 80px;
  margin-top: 8px;
}
.performance-display .percentage-text {
  color: white;
  font-size: 14px;
  font-weight: bold;
  text-shadow: 1px 1px 1px black;
  white-space: nowrap;
  line-height: 1;
}
.progress-bar-container {
  width: 100%;
  height: 8px;
  background-color: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  background-color: #e53e3e;
  border-radius: 3px;
  width: 0%;
  transition: width 0.3s ease-out;
}

.sand {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 22%;
  background-color: #f4a460;
  z-index: 1;
  border-top: none;
  clip-path: url(#sandWaveClipPath);
}
.seaweed {
  position: absolute;
  bottom: 12%;
  width: 10px;
  background-color: #2e8b57;
  border-radius: 5px 5px 0 0;
  transform-origin: bottom center;
  animation: sway-gentle 5s ease-in-out infinite alternate;
  z-index: 5;
}
.seaweed::before,
.seaweed::after {
  content: "";
  position: absolute;
  bottom: 20px;
  width: 8px;
  height: 60%;
  background-color: #3cb371;
  border-radius: 4px 4px 0 0;
  transform-origin: bottom center;
}
.seaweed::before {
  left: -6px;
  transform: rotate(-15deg);
  animation: sway-gentle 6s ease-in-out infinite alternate-reverse -0.2s;
}
.seaweed::after {
  right: -6px;
  transform: rotate(15deg);
  animation: sway-gentle 5.5s ease-in-out infinite alternate -0.4s;
}
@keyframes sway-gentle {
  0% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(5deg);
  }
}
.ribbon-kelp {
  position: absolute;
  bottom: 10%;
  width: 6px;
  background: linear-gradient(to top, #006400, #228b22);
  border-radius: 3px 3px 0 0;
  transform-origin: bottom center;
  animation: sway-ribbon 7s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite
    alternate;
  z-index: 5;
}
.ribbon-kelp::before,
.ribbon-kelp::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 80%;
  background: inherit;
  border-radius: 3px 3px 0 0;
  transform-origin: bottom center;
}
.ribbon-kelp::before {
  left: -3px;
  transform: skewX(-5deg);
  animation: sway-ribbon-strand 7s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite
    alternate -0.3s;
  filter: brightness(0.9);
}
.ribbon-kelp::after {
  right: -3px;
  transform: skewX(5deg);
  animation: sway-ribbon-strand 7s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite
    alternate -0.6s;
  filter: brightness(1.1);
}
@keyframes sway-ribbon {
  0% {
    transform: rotate(-15deg) skewX(-10deg);
  }
  25% {
    transform: rotate(5deg) skewX(5deg);
  }
  50% {
    transform: rotate(-10deg) skewX(-5deg);
  }
  75% {
    transform: rotate(10deg) skewX(10deg);
  }
  100% {
    transform: rotate(0deg) skewX(0deg);
  }
}
@keyframes sway-ribbon-strand {
  0% {
    transform: rotate(-12deg) skewX(-8deg);
  }
  33% {
    transform: rotate(8deg) skewX(6deg);
  }
  66% {
    transform: rotate(-8deg) skewX(-4deg);
  }
  100% {
    transform: rotate(3deg) skewX(3deg);
  }
}

.fish {
  position: absolute;
  border-radius: 50% 35% 35% 50% / 60% 45% 45% 60%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  color: white;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
  transform-origin: center center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  cursor: default;
  --fish-hue: 0;
  --fish-saturation: 70%;
  --fish-lightness: 60%;
  background-image: linear-gradient(
    to bottom,
    hsl(var(--fish-hue), var(--fish-saturation), var(--fish-lightness)),
    hsl(
      var(--fish-hue),
      var(--fish-saturation),
      min(95%, calc(var(--fish-lightness) + 20%))
    )
  );
  transition: transform 0.2s ease-out, left 0.3s ease-out, top 0.3s ease-out,
    filter 0.5s ease-in-out;
}
.fish.fish-is-unwell {
  filter: grayscale(100%) brightness(0.8);
}
.fish.unwell-twitch-animation {
  animation: fishTwitchKeyframes 0.15s ease-in-out;
}
@keyframes fishTwitchKeyframes {
  0%,
  100% {
    transform: scaleX(var(--direction-scale, 1)) scale(var(--size-scale, 0.72))
      rotateZ(var(--unwell-rotation, 170deg));
  }
  25% {
    transform: scaleX(var(--direction-scale, 1))
      scale(var(--size-scale-twitch, 0.7))
      rotateZ(calc(var(--unwell-rotation, 170deg) - 8deg));
  }
  75% {
    transform: scaleX(var(--direction-scale, 1))
      scale(var(--size-scale-twitch, 0.7))
      rotateZ(calc(var(--unwell-rotation, 170deg) + 8deg));
  }
}
.fish-eye {
  position: absolute;
  width: 7px;
  height: 7px;
  background-color: #fff;
  border-radius: 50%;
  border: 1px solid #444;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  overflow: hidden;
}
.fish-eye::after {
  content: "";
  position: absolute;
  width: 3px;
  height: 3px;
  background-color: #000;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
@keyframes fishBlinkAnimation {
  0%,
  100% {
    height: 7px;
    background-color: #fff;
    border-color: #444;
  }
  40%,
  60% {
    height: 1.5px;
    background-color: #333;
    border-color: #222;
  }
}
.fish.fish-is-blinking .fish-eye {
  animation: fishBlinkAnimation 0.25s ease-in-out;
}
.fish::before {
  content: "";
  position: absolute;
  right: -26px;
  top: 50%;
  width: 26px;
  height: 28px;
  background-color: hsl(
    var(--fish-hue),
    var(--fish-saturation),
    var(--fish-lightness)
  );
  filter: brightness(0.8);
  clip-path: polygon(0% 50%, 100% 10%, 80% 50%, 100% 90%);
  transform: translateY(-50%);
  transform-origin: 0% 50%;
  animation-name: wag-tail;
  animation-duration: var(--tail-animation-duration, 0.7s);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: var(--tail-animation-delay, 0s);
  z-index: 0;
}
.fish.has-distinct-tail::before {
  filter: brightness(1.25)
    drop-shadow(
      0 0 1px
        hsla(
          var(--fish-hue),
          var(--fish-saturation),
          calc(var(--fish-lightness) + 20%),
          0.7
        )
    );
}
.fish::after {
  content: "";
  position: absolute;
  top: -7px;
  left: 40%;
  width: 20px;
  height: 12px;
  background-color: hsl(
    var(--fish-hue),
    var(--fish-saturation),
    var(--fish-lightness)
  );
  filter: brightness(0.9);
  border-radius: 30% 30% 50% 50% / 100% 100% 30% 30%;
  transform-origin: bottom center;
  animation: sway-fin 2.5s ease-in-out infinite alternate;
  animation-delay: var(--dorsal-fin-animation-delay, 0s);
  z-index: 0;
}
.fish.has-shark-fin::after {
  width: 18px;
  height: 18px;
  top: -18px;
  left: 38%;
  border-radius: 0;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  animation: sway-fin-shark 3s ease-in-out infinite alternate;
}
@keyframes sway-fin-shark {
  0% {
    transform: rotateZ(-2deg) skewX(-1deg);
  }
  100% {
    transform: rotateZ(2deg) skewX(1deg);
  }
}
.fish-pectoral-fin {
  position: absolute;
  width: 14px;
  height: 10px;
  background-color: hsl(
    var(--fish-hue),
    var(--fish-saturation),
    var(--fish-lightness)
  );
  filter: brightness(0.85) opacity(0.75);
  left: 20px;
  top: 58%;
  border-radius: 50% 50% 20% 20% / 80% 80% 40% 40%;
  transform-origin: 0% 50%;
  animation: flap-pectoral-fin 1s ease-in-out infinite alternate;
  animation-delay: var(--pectoral-fin-animation-delay, 0s);
  z-index: 1;
}
.fish span {
  position: relative;
  z-index: 3;
  display: inline-block;
  transform-origin: center center;
}
.fish-stripe {
  position: absolute;
  width: 3px;
  height: 70%;
  top: 15%;
  background-color: hsla(
    var(--fish-hue),
    calc(var(--fish-saturation) - 20%),
    calc(var(--fish-lightness) - 20%),
    0.35
  );
  border-radius: 1px;
  z-index: 0;
}
.fish-freckle {
  position: absolute;
  background-color: hsla(
    var(--fish-hue),
    calc(var(--fish-saturation) - 25%),
    calc(var(--fish-lightness) - 35%),
    0.6
  );
  border-radius: 50%;
  z-index: 0;
}
.fish-wavy-line-container {
  position: absolute;
  z-index: 0;
}
.fish-wavy-line-container svg {
  display: block;
  width: 100%;
  height: 100%;
  stroke: hsla(
    var(--fish-hue),
    calc(var(--fish-saturation) - 15%),
    calc(var(--fish-lightness) - 25%),
    0.7
  );
  stroke-width: 1.5;
  fill: none;
}
@keyframes wag-tail {
  0% {
    transform: translateY(-50%) rotateZ(-15deg);
  }
  50% {
    transform: translateY(-50%) rotateZ(15deg);
  }
  100% {
    transform: translateY(-50%) rotateZ(-15deg);
  }
}
@keyframes sway-fin {
  0% {
    transform: rotateZ(-4deg);
  }
  100% {
    transform: rotateZ(4deg);
  }
}
@keyframes flap-pectoral-fin {
  0% {
    transform: rotateZ(-20deg) scaleY(0.9);
  }
  100% {
    transform: rotateZ(15deg) scaleY(1);
  }
}
.fish-type-1 {
  --fish-hue: 0;
  --fish-saturation: 70%;
  --fish-lightness: 60%;
  width: 70px;
  height: 30px;
}
.fish-type-2 {
  --fish-hue: 30;
  --fish-saturation: 70%;
  --fish-lightness: 60%;
  width: 75px;
  height: 33px;
}
.fish-type-3 {
  --fish-hue: 60;
  --fish-saturation: 70%;
  --fish-lightness: 60%;
  width: 68px;
  height: 28px;
}
.fish-type-4 {
  --fish-hue: 90;
  --fish-saturation: 70%;
  --fish-lightness: 55%;
  width: 80px;
  height: 35px;
}
.fish-type-5 {
  --fish-hue: 120;
  --fish-saturation: 70%;
  --fish-lightness: 50%;
  width: 70px;
  height: 30px;
}
.fish-type-6 {
  --fish-hue: 150;
  --fish-saturation: 70%;
  --fish-lightness: 60%;
  width: 72px;
  height: 31px;
}
.fish-type-7 {
  --fish-hue: 180;
  --fish-saturation: 70%;
  --fish-lightness: 60%;
  width: 70px;
  height: 30px;
}
.fish-type-8 {
  --fish-hue: 210;
  --fish-saturation: 70%;
  --fish-lightness: 60%;
  width: 77px;
  height: 34px;
}
.fish-type-9 {
  --fish-hue: 240;
  --fish-saturation: 70%;
  --fish-lightness: 65%;
  width: 70px;
  height: 30px;
}
.fish-type-10 {
  --fish-hue: 270;
  --fish-saturation: 70%;
  --fish-lightness: 60%;
  width: 65px;
  height: 29px;
}
.fish-type-11 {
  --fish-hue: 300;
  --fish-saturation: 70%;
  --fish-lightness: 60%;
  width: 70px;
  height: 30px;
}
.fish-type-12 {
  --fish-hue: 330;
  --fish-saturation: 70%;
  --fish-lightness: 60%;
  width: 82px;
  height: 36px;
}
.bubbles {
  position: absolute;
  bottom: 5%;
  left: 0;
  width: 100%;
  height: 95%;
  pointer-events: none;
  z-index: 10;
}
.bubble {
  position: absolute;
  background-color: rgba(212, 238, 247, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  animation: rise 10s linear infinite;
  opacity: 0;
  box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.3);
}
.bubble:nth-child(1) {
  width: 10px;
  height: 10px;
  left: 15%;
  animation-duration: 12s;
  animation-delay: 0s;
}
.bubble:nth-child(2) {
  width: 16px;
  height: 16px;
  left: 35%;
  animation-duration: 9s;
  animation-delay: 1.5s;
}
.bubble:nth-child(3) {
  width: 8px;
  height: 8px;
  left: 55%;
  animation-duration: 14s;
  animation-delay: 0.8s;
}
.bubble:nth-child(4) {
  width: 13px;
  height: 13px;
  left: 75%;
  animation-duration: 8s;
  animation-delay: 2.5s;
}
.bubble:nth-child(5) {
  width: 19px;
  height: 19px;
  left: 5%;
  animation-duration: 11s;
  animation-delay: 0.3s;
}
.bubble:nth-child(6) {
  width: 11px;
  height: 11px;
  left: 85%;
  animation-duration: 13s;
  animation-delay: 1s;
}
.bubble:nth-child(7) {
  width: 15px;
  height: 15px;
  left: 45%;
  animation-duration: 10s;
  animation-delay: 3s;
}
@keyframes rise {
  0% {
    bottom: 0%;
    opacity: 0;
    transform: translateX(0px) scale(0.8);
  }
  10% {
    opacity: 0.7;
    transform: translateX(5px) scale(1);
  }
  25% {
    transform: translateX(-10px);
  }
  50% {
    opacity: 0.9;
    transform: translateX(15px);
  }
  75% {
    transform: translateX(-5px);
  }
  90% {
    opacity: 0.4;
  }
  100% {
    bottom: 100%;
    opacity: 0;
    transform: translateX(0px);
  }
}

/* Mobile-responsive aquarium height adjustments */
@media (max-width: 767px) {
  #aquarium {
    height: 130vh !important ; /* Even more height for mobile */
    max-height: 1000px !important; /* More max height */
  }
  
  /* Ensure overview overlay matches aquarium dimensions */
  #overviewOverlayAqua {
    height: 100%; /* Match parent height */
  }
  
/* Better grid layout for mobile overview */
#overviewFishContainerAqua {
  grid-template-columns: repeat(2, 1fr); /* 2 columns on mobile */
  grid-template-rows: repeat(6, 180px); /* Fixed height, no auto expansion */
  gap: 20px; /* Increased gap between cards */
  padding: 20px;
  overflow-y: auto; /* Enable scrolling if needed */
  max-height: 85%; /* Slightly less to account for larger content */
}
}

/* Specific adjustments for very tall/narrow mobile screens */
@media (max-width: 480px) and (min-height: 700px) {
  #aquarium {
    height: 80vh; /* Even taller on very tall mobile screens */
  }
  
  /* Adjust sand height proportionally */
  .sand {
    height: 18%; /* Slightly smaller sand proportion */
  }
}

/* Better fish distribution in taller aquariums */
@media (max-width: 767px) {
  /* Adjust fish swimming animations for taller tank */
  @keyframes rise {
    /* Extend animation keyframes for taller bubbles path */
    0% { bottom: 0%; opacity: 0; transform: translateX(0px) scale(0.8); }
    5% { opacity: 0.7; transform: translateX(5px) scale(1); }
    20% { transform: translateX(-10px); }
    40% { opacity: 0.9; transform: translateX(15px); }
    60% { transform: translateX(-5px); }
    80% { opacity: 0.4; }
    100% { bottom: 100%; opacity: 0; transform: translateX(0px); }
  }
  
  /* Slow down bubble animations for taller tank */
  .bubble:nth-child(1) { animation-duration: 18s; }
  .bubble:nth-child(2) { animation-duration: 15s; }
  .bubble:nth-child(3) { animation-duration: 20s; }
  .bubble:nth-child(4) { animation-duration: 14s; }
  .bubble:nth-child(5) { animation-duration: 17s; }
  .bubble:nth-child(6) { animation-duration: 19s; }
  .bubble:nth-child(7) { animation-duration: 16s; }
}

/* Tablet-specific styling for aquarium */
@media (min-width: 768px) and (max-width: 1024px) {
  #aquarium {
    height: 85vh !important; /* Increased from 70vh to 85vh for more depth */
    min-height: 700px !important; /* Ensure minimum height */
    max-height: 1000px !important; /* Increased from 650px */
    width: 95% !important; /* Take up more horizontal space */
  }
  
  /* Ensure the sand proportion is appropriate */
  .sand {
    height: 20%; /* Between desktop (22%) and mobile (18%) */
  }
  
  /* Adjust bubble animations for tablet heights */
  .bubble:nth-child(1) { animation-duration: 15s; }
  .bubble:nth-child(2) { animation-duration: 13s; }
  .bubble:nth-child(3) { animation-duration: 17s; }
  .bubble:nth-child(4) { animation-duration: 12s; }
  .bubble:nth-child(5) { animation-duration: 14s; }
  .bubble:nth-child(6) { animation-duration: 16s; }
  .bubble:nth-child(7) { animation-duration: 13s; }
  
  /* Ensure overview mode works well on tablets */
  #overviewFishContainerAqua {
    grid-template-columns: repeat(3, 1fr); /* 3 columns on tablet (between mobile's 2 and desktop's 4) */
    grid-template-rows: repeat(4, auto);
    gap: 12px; /* Slightly larger gap than mobile */
  }
  
/* Mobile overview fish item fixes */
@media (max-width: 767px) {
  #overviewFishContainerAqua .overview-fish-item {
    height: 180px !important; /* Fixed height instead of min-height */
    padding: 20px 15px !important;
    margin: 5px 0 !important; /* Extra vertical margin */
    justify-content: space-between !important;
    box-sizing: border-box !important;
    
    /* Completely hide all container backgrounds */
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  
  /* Also remove backgrounds from child elements */
  #overviewFishContainerAqua .overview-fish-item .performance-display {
    background: none !important;
    background-color: transparent !important;
  }
  
  #overviewFishContainerAqua .overview-fish-item .progress-bar-container {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
  }
  
  #overviewFishContainerAqua .overview-fish-item .star-rating-container {
    background: none !important;
    background-color: transparent !important;
  }
  
/* Mobile overview fish item fixes */
@media (max-width: 767px) {
  #overviewFishContainerAqua .overview-fish-item {
    height: 180px !important;
    padding: 20px 15px !important;
    margin: 5px 0 !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
  }
  
  .overview-fish-item .fish {
    margin-bottom: 15px !important;
    flex-shrink: 0 !important;
  }
  
  .performance-display {
    margin-top: 15px !important;
    flex-shrink: 0 !important;
  }
  
  /* Ensure fish content is readable */
  .overview-fish-item .fish span {
    font-size: 14px !important;
    font-weight: bold !important;
  }
}
  
  .performance-display {
    margin-top: 12px !important;
    flex-shrink: 0 !important;
  }
}

/* For larger tablets (9-10 inch range) */

/* For larger tablets (9-10 inch range) */
@media (min-width: 1025px) and (max-width: 1366px) {
  #aquarium {
    height: 80vh !important; /* Increased from 70vh to 80vh */
    min-height: 750px !important; /* Increased minimum height */
    max-height: 1000px !important; /* Increased from 800px */
    width: 90% !important;
  }
}

/* iPad Pro and similar very large tablets */
@media (min-width: 1000px) and (max-width: 1366px) and (min-height: 1000px) {
  #aquarium {
    height: 90vh !important; /* Maximum height for very tall tablets */
    min-height: 900px !important;
    max-height: 1400px !important;
  }
}

/* Add a specific adjustment for extra-large tablets (11-13 inch range) */
@media (min-width: 1200px) and (max-width: 1366px) {
  #aquarium {
    height: 85vh !important; /* Even taller for larger tablets */
    min-height: 850px !important;
    max-height: 1200px !important;
  }
  
}

/* Specific adjustment for tablets in landscape orientation */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  #aquarium {
    height: 90vh !important; /* Increased from 80vh */
    width: 98% !important; 
    min-height: 700px !important; /* Adjusted to be more reasonable */
    max-height: 1200px !important;
  }
}

}