.sky-band {
      position: absolute;
      inset: 0 0 auto;
      height: 32%;
      background: linear-gradient(180deg, #e9f7fb 0%, #d7edf3 100%);
    }

    .water {
      position: absolute;
      right: 0;
      bottom: 32%;
      left: 0;
      height: calc(var(--water-level, 62) * 0.42%);
      min-height: 54px;
      max-height: 220px;
      background:
        linear-gradient(180deg, var(--water-top), var(--water-mid)),
        radial-gradient(circle at 16% 24%, var(--water-sheen-1), transparent 18%),
        radial-gradient(circle at 56% 42%, var(--water-sheen-2), transparent 20%);
      transition: height 260ms ease;
    }

    .aquarium.water-clean .mud {
      background: radial-gradient(circle at 20% 22%, rgba(94, 63, 39, 0.16) 0 7px, transparent 8px),
        radial-gradient(circle at 56% 52%, rgba(255, 255, 255, 0.19) 0 4px, transparent 5px),
        radial-gradient(circle at 78% 32%, rgba(94, 63, 39, 0.16) 0 6px, transparent 7px),
        linear-gradient(180deg, #c09d76 0%, #8f613f 100%);
    }

    .aquarium.water-clean .water {
      --water-top: rgba(122, 209, 215, 0.56);
      --water-mid: rgba(63, 148, 164, 0.58);
      --water-sheen-1: rgba(255, 255, 255, 0.72);
      --water-sheen-2: rgba(255, 255, 255, 0.46);
      --water-mud-tint: rgba(95, 62, 40, 0.04);
    }

    .aquarium.water-normal .mud {
      background:
        radial-gradient(circle at 20% 22%, rgba(94, 63, 39, 0.22) 0 7px, transparent 8px),
        radial-gradient(circle at 56% 52%, rgba(255, 255, 255, 0.17) 0 4px, transparent 5px),
        radial-gradient(circle at 78% 32%, rgba(94, 63, 39, 0.22) 0 6px, transparent 7px),
        linear-gradient(180deg, #b4875d 0%, #7a563b 100%);
    }

    .aquarium.water-normal .water {
      --water-top: rgba(68, 171, 180, 0.46);
      --water-mid: rgba(33, 127, 139, 0.5);
      --water-sheen-1: rgba(255, 255, 255, 0.55);
      --water-sheen-2: rgba(255, 255, 255, 0.36);
      --water-mud-tint: rgba(91, 62, 44, 0.14);
    }

    .aquarium.water-murky .mud {
      background:
        radial-gradient(circle at 20% 22%, rgba(94, 63, 39, 0.3) 0 7px, transparent 8px),
        radial-gradient(circle at 56% 52%, rgba(255, 255, 255, 0.1) 0 4px, transparent 5px),
        radial-gradient(circle at 78% 32%, rgba(94, 63, 39, 0.28) 0 6px, transparent 7px),
        linear-gradient(180deg, #9e7150 0%, #68452d 100%);
    }

    .aquarium.water-murky .water {
      --water-top: rgba(118, 100, 84, 0.68);
      --water-mid: rgba(78, 66, 54, 0.72);
      --water-sheen-1: rgba(234, 225, 205, 0.42);
      --water-sheen-2: rgba(234, 225, 205, 0.24);
      --water-mud-tint: rgba(89, 58, 35, 0.28);
    }

    .water::before {
      position: absolute;
      top: -8px;
      left: 0;
      width: 200%;
      height: 18px;
      background:
        radial-gradient(ellipse at center, rgba(255,255,255,0.7) 0 35%, transparent 38%) 0 0 / 80px 18px repeat-x;
      content: "";
      animation: wave 5s linear infinite;
    }

    @keyframes wave {
      from { transform: translateX(0); }
      to { transform: translateX(-80px); }
    }

    .mud {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      height: 34%;
      background:
        radial-gradient(circle at 20% 22%, rgba(94, 63, 39, 0.28) 0 7px, transparent 8px),
        radial-gradient(circle at 56% 52%, rgba(255, 255, 255, 0.17) 0 4px, transparent 5px),
        radial-gradient(circle at 78% 32%, rgba(94, 63, 39, 0.26) 0 6px, transparent 7px),
        linear-gradient(180deg, #b4875d 0%, #7a563b 100%);
    }

    .water-ruler {
      position: absolute;
      top: 14px;
      right: 10px;
      bottom: 14px;
      left: auto;
      width: 48px;
      border: 1px solid rgba(255, 255, 255, 0.45);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.44);
      backdrop-filter: blur(2px);
      pointer-events: none;
    }

    .water-ruler .zone {
      position: absolute;
      right: 2px;
      left: 2px;
      top: 20%;
      height: 30%;
      background: rgba(19, 123, 114, 0.14);
      border-radius: 6px;
    }

    .water-ruler .mark {
      position: absolute;
      right: 8px;
      left: 8px;
      height: 1px;
      background: rgba(0, 0, 0, 0.18);
      opacity: 0.8;
    }

    .water-ruler .mark::after {
      position: absolute;
      left: -7px;
      top: -7px;
      width: 16px;
      text-align: right;
      color: var(--ink);
      font-size: 10px;
      font-weight: 800;
      content: attr(data-label);
      opacity: 0.75;
    }

    .water-ruler .level-indicator {
      position: absolute;
      right: 0;
      left: 0;
      display: block;
      transform: translateY(-50%);
      height: 3px;
      background: #17302d;
      border-radius: 999px;
      opacity: 0.9;
      transition: top 180ms ease;
    }

    .water-ruler .level-indicator::before {
      position: absolute;
      top: 50%;
      right: 6px;
      width: 12px;
      height: 12px;
      transform: translateY(-50%);
      border-radius: 999px;
      background: var(--accent);
      content: "";
    }

    .species-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    .species-item {
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 12px;
      background: #fff;
      min-height: 74px;
      display: grid;
      align-content: center;
    }

    .species-item strong {
      display: block;
      font-size: 28px;
      line-height: 1;
      margin-top: 2px;
      color: var(--accent);
    }

    .species-item span {
      font-size: 11px;
      color: var(--muted);
      font-weight: 800;
    }

    .impact-intro {
      margin: 0 0 10px;
      font-size: 12px;
      color: var(--muted);
      font-weight: 800;
    }

    .activity-form-grid {
      display: grid;
      gap: 10px;
      grid-template-columns: minmax(0, 1fr);
      padding: 16px 18px 0;
    }

    .activity-form-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: stretch;
    }

    .student-name {
      width: 100%;
      min-height: 48px;
      padding: 10px 14px;
      border: 1px solid var(--border);
      border-radius: 8px;
      outline: none;
      background: #fff;
      color: var(--ink);
      font-size: 14px;
      transition: border-color 160ms ease, box-shadow 160ms ease;
    }

    .student-name:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 4px rgba(19, 123, 114, 0.12);
    }

    .question-button {
      min-height: 40px;
      width: 100%;
    }

    .question-modal-body {
      padding: 0 18px 18px;
      line-height: 1.5;
    }

    .question-modal-text {
      margin: 0;
      padding: 14px;
      border-left: 3px solid rgba(19, 123, 114, 0.5);
      border-radius: 4px;
      background: #f4faf5;
      color: #20413b;
      font-size: 17px;
      font-weight: 800;
      line-height: 1.4;
    }

    .question-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      margin-top: 12px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
    }

    .sim-celebrating {
      position: relative;
      box-shadow: 0 0 0 3px rgba(19, 123, 114, 0.14), 0 18px 40px rgba(19, 123, 114, 0.16);
    }

    .sim-celebrating::after {
      position: absolute;
      inset: -2px;
      border-radius: 8px;
      content: "";
      pointer-events: none;
      background:
        radial-gradient(circle at 16% 28%, rgba(19, 123, 114, 0.14) 0 8px, transparent 8px),
        radial-gradient(circle at 76% 62%, rgba(19, 123, 114, 0.11) 0 8px, transparent 8px),
        radial-gradient(circle at 44% 84%, rgba(19, 123, 114, 0.1) 0 8px, transparent 8px),
        radial-gradient(circle at 58% 16%, rgba(19, 123, 114, 0.1) 0 8px, transparent 8px);
      mix-blend-mode: multiply;
      animation: pulse 2.4s ease-in-out infinite;
      z-index: -1;
    }

    @keyframes pulse {
      0%, 100% {
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
    }

    .confetti {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      overflow: hidden;
      border-radius: 8px;
      display: none;
    }

    .sim-celebrating .confetti {
      display: block;
    }

    .confetti span {
      position: absolute;
      top: -12px;
      width: 6px;
      height: 6px;
      border-radius: 999px;
      animation: fall 2.8s linear infinite;
      opacity: 0;
      background: var(--accent);
    }

    .confetti span:nth-child(1) {
      left: 14%;
      animation-delay: 0s;
      background: #2f6feb;
    }

    .confetti span:nth-child(2) {
      left: 29%;
      animation-delay: .3s;
      background: #18a058;
    }

    .confetti span:nth-child(3) {
      left: 45%;
      animation-delay: .6s;
      background: #89c27e;
    }