/* Loaded after the legacy aquarium theme so the photographic environment wins. */
.teacher-live-shell,.public-aquarium{
  background:#087891 url('/assets/aquarium/realistic-lagoon-v1.png') center/cover no-repeat;
}
.platform-tank,
.platform-tank.theme-lagoon,
.platform-tank.theme-reef,
.platform-tank.theme-deep,
.platform-tank.theme-night{
  background-color:#087891;
  background-image:linear-gradient(rgba(0,73,103,.04),rgba(0,38,65,.12)),url('/assets/aquarium/realistic-lagoon-v1.png');
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
}
.platform-tank>.rock,.platform-tank>.plant,.platform-tank>.sand,.platform-tank>.level-decorations{display:none}
.platform-tank .water-light{opacity:.32;mix-blend-mode:screen}
.platform-tank .water-ambience{opacity:.68}
.teacher-live-aquarium.panel-aquarium{background:transparent}

/* A moved or minimized console floats over a truly full-width aquarium. */
.teacher-live-shell:has(.teacher-live-roster.is-floating) .teacher-live-aquarium.panel-aquarium,
.teacher-live-shell:has(.teacher-live-roster.is-collapsed) .teacher-live-aquarium.panel-aquarium{
  right:0!important;
}

/* Compact aquarium identity bar */
.teacher-live-header{display:flex;align-items:center;gap:12px;padding:0 17px}
.teacher-live-header .aquarium-class-brand{display:flex;align-items:center;gap:10px;padding:6px 14px 6px 8px;border:1px solid rgba(255,255,255,.22);border-radius:16px;background:rgba(3,36,49,.88);backdrop-filter:blur(14px);text-decoration:none;box-shadow:0 8px 24px rgba(0,18,28,.3)}
.aquarium-class-brand>i{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:linear-gradient(145deg,#21cfc6,#0b83a0);font-size:20px;font-style:normal;box-shadow:0 5px 15px rgba(0,0,0,.22)}
.aquarium-class-brand>i img{width:26px;height:26px;object-fit:contain;display:block;}
.aquarium-class-brand b,.aquarium-class-brand small{display:block;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aquarium-class-brand b{font-size:14px;color:#fff;font-weight:800}.aquarium-class-brand small{margin-top:2px;color:#7dd3fc;font-size:8px;font-weight:850;letter-spacing:.09em}
.teacher-live-header nav{display:flex;align-items:center;gap:8px;padding:4px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(3,36,49,.88);backdrop-filter:blur(14px);box-shadow:0 8px 24px rgba(0,18,28,.28)}
.teacher-live-header .teacher-live-status{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;background:rgba(16,185,129,.2);border:1px solid rgba(52,211,153,.45);color:#34d399;font-size:13px!important;font-weight:750!important;letter-spacing:.02em}
.live-dot-pulse{display:inline-block;width:8px;height:8px;border-radius:50%;background:#34d399;box-shadow:0 0 10px #34d399;animation:pulse-live-dot 1.8s ease-in-out infinite}
@keyframes pulse-live-dot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.65}}
.teacher-live-header .teacher-back-panel-link{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.32);color:#ffffff!important;font-size:13px!important;font-weight:750!important;text-decoration:none;transition:all .2s ease;box-shadow:0 4px 12px rgba(0,0,0,.22)}
.teacher-live-header .teacher-back-panel-link:hover{background:rgba(255,255,255,.26);border-color:#ffffff;transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.35)}
.btn-fullscreen,
button[data-fullscreen],
.teacher-live-header>button{
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
  padding:7px 16px!important;
  border-radius:999px!important;
  background:rgba(4,28,44,.94)!important;
  border:1px solid rgba(255,255,255,.32)!important;
  color:#ffffff!important;
  font-family:inherit!important;
  font-size:13px!important;
  font-weight:750!important;
  line-height:1!important;
  box-shadow:0 6px 18px rgba(0,0,0,.35)!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;
  cursor:pointer!important;
  white-space:nowrap!important;
  transition:all .2s ease!important;
}
.btn-fullscreen i,
button[data-fullscreen] i,
.teacher-live-header>button i{
  font-size:13px!important;
  color:#38bdf8!important;
  line-height:1!important;
}
.btn-fullscreen span,
button[data-fullscreen] span,
.teacher-live-header>button span{
  color:#ffffff!important;
  font-size:13px!important;
  font-weight:750!important;
}
.btn-fullscreen:hover,
button[data-fullscreen]:hover,
.teacher-live-header>button:hover{
  background:rgba(8,48,72,.98)!important;
  border-color:#38bdf8!important;
  transform:translateY(-1px)!important;
  box-shadow:0 8px 24px rgba(0,0,0,.45)!important;
}
@media(max-width:600px){.teacher-live-header{gap:6px;padding:0 7px}.teacher-live-header .aquarium-class-brand{padding:5px 8px}.aquarium-class-brand>i{width:32px;height:32px;font-size:16px}.aquarium-class-brand small{display:none}.aquarium-class-brand b{max-width:115px;font-size:12px}.teacher-live-header nav{padding:3px;gap:5px}.teacher-live-header .teacher-live-status{padding:5px 9px;font-size:11px!important}.teacher-live-header .teacher-back-panel-link{display:inline-flex!important;padding:5px 10px;font-size:11px!important}.teacher-live-header>button{padding:6px 9px;font-size:11px}}

/* The class header floats inside the aquarium; it is not a full-width page bar. */
.teacher-live-page{position:relative}
.teacher-live-page .teacher-live-header{position:absolute;z-index:45;top:14px;left:14px;right:14px;height:auto;min-height:0;padding:0;border:0;background:transparent;box-shadow:none;pointer-events:none}
.teacher-live-page .teacher-live-header>*{pointer-events:auto}

/* Public viewer upgraded header with normal reading font sizes and glowing live badge */
.aquarium-view-header{position:fixed;z-index:35;left:16px;top:16px;display:flex;align-items:center;gap:12px;padding:8px 14px;border:1px solid rgba(255,255,255,.22);border-radius:18px;background:rgba(3,30,45,.88);color:#fff;box-shadow:0 12px 35px rgba(0,19,30,.35);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.aquarium-view-header .aquarium-class-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;padding-right:6px}
.aquarium-view-header .aquarium-class-brand i{font-size:22px;font-style:normal}
.aquarium-view-header .aquarium-class-brand b{font-size:15px;font-weight:800;color:#ffffff;display:block;line-height:1.2}
.aquarium-view-header .aquarium-class-brand small{display:block;font-size:10px;font-weight:700;color:#7dd3fc;letter-spacing:.08em;margin-top:2px}
.aquarium-view-header nav{display:flex;align-items:center;gap:8px}
.aquarium-view-header .teacher-live-status{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:rgba(16,185,129,.16);border:1px solid rgba(16,185,129,.35);color:#34d399;font-size:13px;font-weight:700}
.live-dot-pulse{display:inline-block;width:8px;height:8px;border-radius:50%;background:#10b981;box-shadow:0 0 10px #10b981;animation:live-dot-glow 1.5s infinite alternate}
@keyframes live-dot-glow{from{opacity:.5;transform:scale(.85)}to{opacity:1;transform:scale(1.15);box-shadow:0 0 14px #34d399}}
.aquarium-fish-count-badge{display:inline-flex;align-items:center;gap:4px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);color:#e2e8f0;font-size:13px;font-weight:600}
.aquarium-explore-link{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:999px;background:rgba(56,189,248,.18);border:1px solid rgba(56,189,248,.35);color:#38bdf8!important;font-size:13px;font-weight:700;text-decoration:none;transition:all .2s ease}
.aquarium-explore-link:hover{background:rgba(56,189,248,.3);transform:translateY(-1px)}
.aquarium-view-header .aquarium-back-link{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);color:#f1f5f9!important;font-size:13px;font-weight:700;text-decoration:none;transition:all .2s ease}
.aquarium-view-header .aquarium-back-link:hover{background:rgba(255,255,255,.22);transform:translateY(-1px)}
.aquarium-view-header>button{border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(255,255,255,.1);color:#fff;padding:6px 14px;font-size:13px;font-weight:700;cursor:pointer;transition:all .2s ease}
.aquarium-view-header>button:hover{background:rgba(255,255,255,.2);transform:translateY(-1px)}
.aquarium-page .game-hud{top:86px}
.public-footer{padding:8px 11px;border:1px solid rgba(255,255,255,.15);border-radius:11px;background:rgba(3,32,45,.66);backdrop-filter:blur(10px)}

/* Floating Motto Tip Capsule inside Aquarium Tank */
.aquarium-motto-tip{position:absolute;top:18px;right:20px;z-index:28;display:inline-flex;align-items:center;gap:8px;padding:8px 18px;background:rgba(15,23,42,.68);border:1px solid rgba(255,255,255,.22);border-radius:999px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#f8fafc;font-size:13px;font-weight:600;box-shadow:0 6px 20px rgba(0,0,0,.28),0 0 16px rgba(56,189,248,.18);pointer-events:none;animation:motto-float 4s ease-in-out infinite alternate;letter-spacing:.01em}
.aquarium-motto-tip span{font-size:16px;filter:drop-shadow(0 0 6px #facc15)}
.aquarium-motto-tip b{color:#ffffff;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.5)}
@keyframes motto-float{0%{transform:translateY(0)}100%{transform:translateY(-4px)}}
@media(max-width:768px){.aquarium-motto-tip{top:auto;bottom:58px;right:50%;transform:translateX(50%);font-size:11px;padding:6px 14px;white-space:nowrap;animation:none}}
@media(max-width:600px){.aquarium-view-header{left:8px;right:8px;top:8px;padding:6px 10px;justify-content:space-between}.aquarium-view-header .aquarium-class-brand b{max-width:110px;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.aquarium-view-header nav{gap:4px}.aquarium-fish-count-badge{display:none}.aquarium-explore-link,.aquarium-view-header .aquarium-back-link{font-size:11px;padding:5px 10px}.aquarium-view-header>button{font-size:0;padding:6px 8px}.aquarium-view-header>button:before{content:"⛶";font-size:14px}.aquarium-page .game-hud{top:76px}.public-footer span:last-child{display:none}}
.teacher-live-page .teacher-live-shell{height:100vh;min-height:100vh}
.teacher-live-page .teacher-live-aquarium .game-hud{top:86px}
.teacher-live-page .teacher-live-roster:not(.is-floating){top:82px;height:min(580px,calc(100% - 96px))}
@media(max-width:600px){.teacher-live-page .teacher-live-header{top:7px;left:7px;right:7px;padding:0}.teacher-live-page .teacher-live-shell{height:100vh;min-height:100vh}.teacher-live-page .teacher-live-aquarium .game-hud{top:68px}.teacher-live-page .teacher-live-roster:not(.is-floating){top:auto;height:45%}}

/* One continuous background; only swimmers reserve room for a docked console. */
.teacher-live-page .teacher-live-aquarium.panel-aquarium{right:0!important}
.teacher-live-shell:not(:has(.teacher-live-roster.is-floating)):not(:has(.teacher-live-roster.is-collapsed)) .swimmer-layer{right:398px}
.teacher-live-shell:not(:has(.teacher-live-roster.is-floating)):has(.teacher-live-roster.is-collapsed) .swimmer-layer{right:246px}
@media(max-width:900px) and (min-width:601px){.teacher-live-shell:not(:has(.teacher-live-roster.is-floating)):not(:has(.teacher-live-roster.is-collapsed)) .swimmer-layer{right:368px}.teacher-live-shell:not(:has(.teacher-live-roster.is-floating)):has(.teacher-live-roster.is-collapsed) .swimmer-layer{right:246px}}
@media(max-width:600px){.teacher-live-shell .swimmer-layer{right:0!important}}

/* Deterministic console visibility */
.roster-header-brand{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.roster-badge-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,rgba(20,184,166,.4),rgba(6,95,115,.6));border:1px solid rgba(45,212,191,.35);font-size:18px;flex-shrink:0;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.roster-titles{display:flex;flex-direction:column;min-width:0;gap:2px}
.roster-title-full{font-size:15px;font-weight:800;color:#ffffff;white-space:nowrap;margin:0;line-height:1.2;letter-spacing:-0.01em}
.roster-title-collapsed{display:none;font-size:14px;font-weight:800;color:#ffffff;white-space:nowrap;margin:0;line-height:1.2}
.roster-meta{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:#7dd3fc;white-space:nowrap;line-height:1}
.roster-meta-dot{color:#34d399;font-size:8px}
.teacher-live-roster .live-roster-controls>strong{display:none!important}
.teacher-live-roster.is-collapsed .roster-title-full{display:none!important}
.teacher-live-roster.is-collapsed .roster-title-collapsed{display:block!important}



/* Generated selectable aquarium environments. */
.platform-tank.theme-lagoon{background-image:linear-gradient(rgba(0,73,103,.04),rgba(0,38,65,.12)),url('/assets/aquarium/realistic-lagoon-v1.png')}
.platform-tank.theme-reef{background-image:linear-gradient(rgba(0,75,94,.02),rgba(0,35,53,.1)),url('/assets/aquarium/theme-reef-v1.png')}
.platform-tank.theme-deep{background-image:linear-gradient(rgba(1,22,65,.08),rgba(0,12,39,.18)),url('/assets/aquarium/theme-deep-v1.png')}
.platform-tank.theme-night{background-image:linear-gradient(rgba(5,5,49,.06),rgba(1,5,31,.17)),url('/assets/aquarium/theme-night-v1.png')}
.example-card.lagoon .example-water,.gallery-scene.lagoon{background-image:url('/assets/aquarium/realistic-lagoon-v1.png')}
.example-card.reef .example-water,.gallery-scene.reef{background-image:url('/assets/aquarium/theme-reef-v1.png')}
.example-card.deep .example-water,.gallery-scene.deep{background-image:url('/assets/aquarium/theme-deep-v1.png')}
.gallery-scene.reef,.gallery-scene.deep{filter:none}
.example-water,.gallery-scene{background-position:center;background-repeat:no-repeat;background-size:cover}

/* ==========================================================================
   1. WATER CAUSTICS & SUNBEAMS (Realistic Light Refraction)
   ========================================================================== */
.water-caustics-layer{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:3;
  overflow:hidden;
  opacity:.42;
  mix-blend-mode:screen;
  background:
    radial-gradient(ellipse at 25% 15%, rgba(255,255,255,.32) 0%, transparent 45%),
    radial-gradient(ellipse at 75% 25%, rgba(186,230,253,.26) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 60%, rgba(224,242,254,.18) 0%, transparent 60%);
  animation:caustic-drift 14s ease-in-out infinite alternate;
}
.water-caustics-layer::before,
.water-caustics-layer::after{
  content:'';
  position:absolute;
  inset:-25%;
  pointer-events:none;
}
.water-caustics-layer::before{
  background:repeating-linear-gradient(
    115deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.07) 12%,
    rgba(125,211,252,.12) 22%,
    rgba(255,255,255,0) 35%
  );
  filter:blur(18px);
  animation:caustic-shimmer 9s cubic-bezier(.445,.05,.55,.95) infinite alternate;
}
.water-caustics-layer::after{
  background:repeating-linear-gradient(
    65deg,
    rgba(255,255,255,0) 0%,
    rgba(186,230,253,.08) 15%,
    rgba(255,255,255,.05) 28%,
    rgba(255,255,255,0) 42%
  );
  filter:blur(22px);
  animation:caustic-shimmer-alt 12s cubic-bezier(.445,.05,.55,.95) infinite alternate;
}
@keyframes caustic-drift{
  0%{transform:scale(1) translate3d(0,0,0)}
  50%{transform:scale(1.04) translate3d(-1.5%,1%,0)}
  100%{transform:scale(1) translate3d(1.5%,-1%,0)}
}
@keyframes caustic-shimmer{
  0%{transform:translate3d(-20px,-10px,0) rotate(0deg) scale(1)}
  100%{transform:translate3d(30px,18px,0) rotate(2deg) scale(1.06)}
}
@keyframes caustic-shimmer-alt{
  0%{transform:translate3d(15px,-15px,0) rotate(0deg) scale(1.04)}
  100%{transform:translate3d(-25px,20px,0) rotate(-2deg) scale(1)}
}

/* ==========================================================================
   2. DYNAMIC DAY / NIGHT & LIGHTING MODES
   ========================================================================== */
.platform-tank.time-morning::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:3;
  background:linear-gradient(135deg, rgba(253,230,138,.22) 0%, rgba(251,191,36,.12) 35%, rgba(14,116,144,.04) 100%);
  mix-blend-mode:screen;
}
.platform-tank.time-morning .water-caustics-layer{opacity:.52;filter:sepia(.25) hue-rotate(-20deg)}

.platform-tank.time-noon::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:3;
  background:linear-gradient(180deg, rgba(56,189,248,.14) 0%, rgba(3,105,161,.04) 75%);
  mix-blend-mode:screen;
}

.platform-tank.time-sunset::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:3;
  background:linear-gradient(160deg, rgba(244,63,94,.18) 0%, rgba(249,115,22,.16) 45%, rgba(30,27,75,.32) 100%);
  mix-blend-mode:color-dodge;
}
.platform-tank.time-sunset .water-caustics-layer{opacity:.4;filter:hue-rotate(300deg) saturate(1.4)}

.platform-tank.time-night::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:3;
  background:linear-gradient(180deg, rgba(3,7,28,.68) 0%, rgba(8,20,44,.75) 55%, rgba(2,6,23,.82) 100%);
}
.platform-tank.time-night .water-caustics-layer{opacity:.18;filter:brightness(1.5) saturate(1.8)}
.platform-tank.time-night .fish-label{
  background:rgba(3,18,36,.88);
  border-color:rgba(56,189,248,.4);
  box-shadow:0 0 14px rgba(56,189,248,.35);
}

/* ==========================================================================
   3. LIVING UNDERWATER FLOOR & INTERACTIVE PROPS
   ========================================================================== */
.tank-floor-props{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:95px;
  pointer-events:none;
  z-index:18;
}
.interactive-prop{
  position:absolute;
  pointer-events:auto;
  cursor:pointer;
  user-select:none;
  transition:transform .24s cubic-bezier(.34,1.56,.64,1);
}
.interactive-prop:hover{
  transform:scale(1.1);
}
.interactive-prop:active{
  transform:scale(.94);
}

/* 3.1. Giant Clam with Glowing Pearl */
.animated-clam{
  left:max(195px, 20%);
  bottom:10px;
  width:60px;
  height:44px;
}
.clam-bottom{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:24px;
  background:radial-gradient(circle at 50% 100%, #fdba74 0%, #ea580c 45%, #9a3412 100%);
  border:2px solid #fed7aa;
  border-radius:6px 6px 30px 30px;
  box-shadow:0 6px 16px rgba(0,0,0,.45);
  z-index:2;
}
.clam-pearl{
  position:absolute;
  bottom:12px;
  left:50%;
  transform:translateX(-50%);
  width:18px;
  height:18px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #ffffff 0%, #fed7aa 40%, #f472b6 75%, #a855f7 100%);
  box-shadow:0 0 12px #ffffff, 0 0 24px #38bdf8;
  z-index:3;
  animation:pearl-glow 2.8s ease-in-out infinite alternate;
}
.clam-top{
  position:absolute;
  bottom:18px;
  left:0;
  width:100%;
  height:26px;
  background:radial-gradient(circle at 50% 0%, #fed7aa 0%, #ea580c 50%, #7c2d12 100%);
  border:2px solid #ffedd5;
  border-radius:30px 30px 6px 6px;
  box-shadow:0 -4px 14px rgba(0,0,0,.35);
  transform-origin:bottom center;
  transform:rotateX(38deg) translateY(-2px);
  transition:transform .4s cubic-bezier(.34,1.56,.64,1);
  z-index:4;
  animation:clam-breathe 6s ease-in-out infinite;
}
.clam-sparkle{
  position:absolute;
  top:-14px;
  left:50%;
  transform:translateX(-50%);
  font-size:14px;
  color:#fef08a;
  text-shadow:0 0 8px #fef08a;
  animation:sparkle-float 2.2s ease-in-out infinite alternate;
  pointer-events:none;
}
.animated-clam.is-snapped .clam-top{
  transform:rotateX(0deg) translateY(4px)!important;
  animation:none;
}
@keyframes clam-breathe{
  0%,100%{transform:rotateX(42deg) translateY(-3px)}
  50%{transform:rotateX(15deg) translateY(0)}
}
@keyframes pearl-glow{
  0%{box-shadow:0 0 8px #fff, 0 0 16px #38bdf8;transform:translateX(-50%) scale(.96)}
  100%{box-shadow:0 0 18px #fff, 0 0 32px #a855f7, 0 0 45px #38bdf8;transform:translateX(-50%) scale(1.08)}
}
@keyframes sparkle-float{
  0%{transform:translateX(-50%) translateY(0) scale(.8);opacity:.5}
  100%{transform:translateX(-50%) translateY(-6px) scale(1.2);opacity:1}
}

/* 3.2. Sunken Treasure Chest */
.sunken-chest{
  right:75px;
  bottom:10px;
  width:62px;
  height:48px;
}
.chest-box{
  position:relative;
  width:100%;
  height:100%;
}
.chest-body{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:28px;
  background:linear-gradient(180deg, #78350f 0%, #451a03 100%);
  border:2px solid #ca8a04;
  border-radius:4px 4px 8px 8px;
  box-shadow:0 6px 18px rgba(0,0,0,.5);
}
.chest-lid{
  position:absolute;
  bottom:24px;
  left:-2px;
  width:calc(100% + 4px);
  height:20px;
  background:radial-gradient(ellipse at 50% 100%, #92400e 0%, #451a03 100%);
  border:2px solid #eab308;
  border-radius:14px 14px 2px 2px;
  transform-origin:bottom left;
  transform:rotate(-12deg);
  transition:transform .4s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 -3px 12px rgba(0,0,0,.35);
  animation:chest-creak 5s ease-in-out infinite alternate;
}
.chest-lock{
  position:absolute;
  bottom:16px;
  left:50%;
  transform:translateX(-50%);
  width:10px;
  height:12px;
  background:#facc15;
  border:1px solid #713f12;
  border-radius:3px;
  box-shadow:0 0 6px #facc15;
  z-index:5;
}
.chest-glow{
  position:absolute;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  width:26px;
  height:14px;
  background:radial-gradient(ellipse, #fde047 0%, #ca8a04 60%, transparent 100%);
  filter:blur(4px);
  opacity:.75;
  animation:chest-gold-shine 2.5s ease-in-out infinite alternate;
}
.sunken-chest.is-opened .chest-lid{
  transform:rotate(-45deg)!important;
  animation:none;
}
@keyframes chest-creak{
  0%{transform:rotate(-8deg)}
  100%{transform:rotate(-18deg)}
}
@keyframes chest-gold-shine{
  0%{opacity:.5;transform:translateX(-50%) scale(.9)}
  100%{opacity:1;transform:translateX(-50%) scale(1.3)}
}

/* 3.3. Sand Crab Crawler */
.sand-crab-crawler{
  bottom:6px;
  left:38%;
  font-size:26px;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.45));
  animation:crab-walk 24s ease-in-out infinite alternate;
}
.crab-inner{
  display:inline-block;
  animation:crab-wobble 1.2s ease-in-out infinite alternate;
}
.crab-emoji{
  display:inline-block;
}
@keyframes crab-walk{
  0%{left:26%;transform:scaleX(1)}
  48%{transform:scaleX(1)}
  50%{left:72%;transform:scaleX(-1)}
  98%{transform:scaleX(-1)}
  100%{left:26%;transform:scaleX(1)}
}
@keyframes crab-wobble{
  0%{transform:rotate(-6deg) translateY(0)}
  100%{transform:rotate(6deg) translateY(-3px)}
}
.sand-crab-crawler.is-scared{
  animation:crab-dash .6s ease-in-out 3 alternate!important;
}
@keyframes crab-dash{
  0%{transform:translateY(0) scale(1.2)}
  100%{transform:translateY(-8px) scale(1.3) rotate(15deg)}
}

/* ==========================================================================
   4. FISH AI: CHEWING, RESTING & INTERACTIONS
   ========================================================================== */
.stage-fish.is-eating .fish-sprite,
.stage-fish.is-chewing .fish-sprite{
  animation:fish-nibble .22s ease-in-out infinite alternate!important;
}
@keyframes fish-nibble{
  0%{transform:scale(1,1)}
  100%{transform:scale(1.08,.94)}
}
.stage-fish.is-resting{
  filter:brightness(.92);
  transition:filter 1.5s ease;
}
.stage-fish.is-resting .fish-label{
  opacity:.45;
  transition:opacity 1s ease;
}

/* Nibble Micro-Bubbles */
.nibble-bubble{
  position:absolute;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%, rgba(255,255,255,.9), rgba(125,211,252,.5) 60%, rgba(255,255,255,.1) 100%);
  border:1px solid rgba(255,255,255,.6);
  pointer-events:none;
  z-index:22;
  animation:nibble-rise var(--duration, 1.2s) ease-out forwards;
}
@keyframes nibble-rise{
  0%{transform:translate3d(0,0,0) scale(.3);opacity:1}
  100%{transform:translate3d(var(--drift, 0px), -45px, 0) scale(1.1);opacity:0}
}

/* ==========================================================================
   5. STAR TRAIL PARTICLES (Leader / Star Student)
   ========================================================================== */
.star-trail-layer{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:15;
  overflow:hidden;
}
.star-particle{
  position:absolute;
  pointer-events:none;
  font-size:16px;
  color:#fde047;
  text-shadow:0 0 8px #facc15, 0 0 16px #eab308;
  animation:star-particle-drift var(--duration, 1.4s) ease-out forwards;
}
@keyframes star-particle-drift{
  0%{
    transform:translate3d(0,0,0) scale(.4) rotate(0deg);
    opacity:1;
  }
  50%{
    transform:translate3d(var(--dx, 0px), var(--dy, -15px), 0) scale(1.2) rotate(120deg);
    opacity:.9;
  }
  100%{
    transform:translate3d(calc(var(--dx, 0px) * 1.8), calc(var(--dy, -15px) - 25px), 0) scale(.2) rotate(260deg);
    opacity:0;
  }
}

/* ==========================================================================
   6. CELEBRATION & 100 FOOD MILESTONE EVENT
   ========================================================================== */
.tank-celebration-layer{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:32;
  overflow:hidden;
}
.celebration-confetti-bubble{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  box-shadow:0 0 12px currentColor;
  animation:confetti-rise var(--duration, 3.5s) cubic-bezier(.25,.46,.45,.94) forwards;
}
@keyframes confetti-rise{
  0%{transform:translate3d(0,0,0) scale(.3);opacity:0}
  15%{opacity:1;transform:translate3d(0,-20px,0) scale(1.1)}
  100%{transform:translate3d(var(--drift, 0px), -420px, 0) scale(.8);opacity:0}
}
.celebration-banner{
  position:absolute;
  top:30%;
  left:50%;
  transform:translate(-50%,-50%) scale(.6);
  padding:14px 28px;
  background:rgba(3,26,45,.92);
  border:2px solid #facc15;
  border-radius:24px;
  color:#ffffff;
  font-size:16px;
  font-weight:800;
  text-align:center;
  box-shadow:0 12px 40px rgba(0,0,0,.6), 0 0 30px rgba(250,204,21,.5);
  backdrop-filter:blur(16px);
  z-index:40;
  pointer-events:none;
  animation:celebrate-pop 4.5s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes celebrate-pop{
  0%{transform:translate(-50%,-50%) scale(.3);opacity:0}
  15%{transform:translate(-50%,-50%) scale(1.08);opacity:1}
  25%{transform:translate(-50%,-50%) scale(1);opacity:1}
  85%{transform:translate(-50%,-50%) scale(1);opacity:1}
  100%{transform:translate(-50%,-60%) scale(.8);opacity:0}
}

/* ==========================================================================
   7. HUD CHIP BUTTONS (Time & Audio Interactive Controls)
   ========================================================================== */
.game-hud .hud-chip.time-mode-chip,
.game-hud .hud-chip.audio-mode-chip{
  cursor:pointer;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(3,32,45,.75);
  transition:all .2s ease;
  user-select:none;
}
.game-hud .hud-chip.time-mode-chip:hover,
.game-hud .hud-chip.audio-mode-chip:hover{
  background:rgba(5,52,72,.9);
  border-color:rgba(56,189,248,.6);
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.game-hud .hud-chip.time-mode-chip:active,
.game-hud .hud-chip.audio-mode-chip:active{
  transform:translateY(0) scale(.96);
}
.game-hud .hud-chip.audio-mode-chip.is-active{
  border-color:#34d399;
  background:rgba(6,78,59,.82);
  box-shadow:0 0 14px rgba(52,211,153,.4);
}
.game-hud .hud-chip.audio-mode-chip.is-active span{
  animation:audio-pulse 1.2s ease-in-out infinite alternate;
}
@keyframes audio-pulse{
  0%{transform:scale(1)}
  100%{transform:scale(1.22)}
}

/* ==========================================================================
   8. TEACHER LIVE ROSTER & SCROLLABLE STUDENT LIST (FIXED LAYOUT)
   ========================================================================== */
.teacher-live-roster {
  position: absolute !important;
  z-index: 35 !important;
  top: 76px;
  right: 18px;
  width: 470px !important;
  min-width: 430px !important;
  max-width: min(485px, calc(100vw - 20px)) !important;
  height: min(720px, calc(100vh - 96px)) !important;
  max-height: calc(100vh - 96px) !important;
  padding: 16px 18px 14px !important;
  border-radius: 24px !important;
  background: rgba(3, 24, 39, 0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 24px 60px rgba(0, 10, 22, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  transition: box-shadow .2s ease, background .2s ease, border-color .2s ease !important;
}

.teacher-live-roster.is-floating {
  right: auto !important;
  bottom: auto !important;
}

.teacher-live-roster > header {
  min-height: 44px;
  padding: 0 0 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: grab;
  user-select: none;
  flex-shrink: 0;
}

.teacher-live-roster.is-dragging {
  cursor: grabbing;
}

.live-roster-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.live-roster-controls button {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 15px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all .18s ease;
}

.live-roster-controls button:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(56, 189, 248, 0.5);
  transform: scale(1.06);
}

.live-control-tip {
  margin: 8px 0 6px !important;
  padding: 7px 10px !important;
  border-radius: 10px !important;
  background: rgba(14, 165, 233, 0.12) !important;
  border: 1px solid rgba(14, 165, 233, 0.22) !important;
  color: #bae6fd !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  flex-shrink: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.live-quick-add {
  margin-bottom: 8px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(56, 189, 248, 0.28) !important;
  background: rgba(3, 20, 34, 0.94) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
  flex-shrink: 0;
  overflow: hidden !important;
}

.live-quick-add summary {
  padding: 8px 12px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #38bdf8 !important;
  cursor: pointer;
  user-select: none;
  background: rgba(255, 255, 255, 0.04) !important;
}

.live-quick-add summary:hover {
  color: #7dd3fc !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.live-quick-add .live-quick-body,
.live-quick-add .quick-student {
  padding: 8px 12px 10px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
}

.live-quick-add form {
  display: flex;
  gap: 8px;
  align-items: center;
}

.live-quick-add input {
  flex: 1;
  min-width: 0;
  height: 38px !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  background: #020c16 !important;
  border: 1.5px solid rgba(56, 189, 248, 0.5) !important;
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 750 !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5) !important;
  outline: none !important;
}

.live-quick-add input:focus {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.3), inset 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

.live-quick-add input::placeholder {
  color: rgba(226, 232, 240, 0.6) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

.live-quick-add select {
  width: 105px !important;
  height: 38px !important;
  padding: 0 6px !important;
  border-radius: 10px !important;
  background: #071929 !important;
  border: 1.5px solid rgba(56, 189, 248, 0.5) !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  cursor: pointer;
  outline: none !important;
}

.live-quick-add button {
  height: 38px !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  cursor: pointer;
  white-space: nowrap !important;
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.45) !important;
  transition: all 0.16s ease !important;
}

.live-quick-add button:hover {
  background: linear-gradient(135deg, #38bdf8, #0ea5e9) !important;
  transform: translateY(-1px);
}

.live-feed-all {
  margin-bottom: 7px !important;
  flex-shrink: 0;
}

.live-feed-all button {
  width: 100% !important;
  min-height: 38px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.3) !important;
  cursor: pointer;
  transition: all .2s ease;
}

.live-feed-all button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.45);
}

.live-search-box {
  margin-bottom: 7px;
  flex-shrink: 0;
}

.live-search-box input {
  width: 100%;
  height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  outline: none;
  box-sizing: border-box;
  transition: all .2s ease;
}

.live-search-box input::placeholder {
  color: #94a3b8;
}

.live-search-box input:focus {
  background: rgba(255, 255, 255, 0.14);
  border-color: #38bdf8;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.3);
}

.live-list-label {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 4px 2px 6px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .07em !important;
  color: #7dd3fc !important;
  flex-shrink: 0;
}

.live-list-label strong {
  font-size: 10px;
  color: #34d399;
  font-weight: 700;
}

/* THE CRITICAL SCROLLABLE CONTAINER */
.live-roster-list {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 5px;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px;
}

.live-roster-list::-webkit-scrollbar {
  width: 6px;
}

.live-roster-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 999px;
}

.live-roster-list::-webkit-scrollbar-thumb {
  background: rgba(56, 189, 248, 0.4);
  border-radius: 999px;
}

.live-roster-list::-webkit-scrollbar-thumb:hover {
  background: rgba(56, 189, 248, 0.7);
}

/* STUDENT ROWS WITH 4 COLUMNS: RANK | AVATAR | META | ACTIONS */
.live-roster-row {
  display: grid !important;
  grid-template-columns: 24px 38px minmax(0, 1fr) auto !important;
  gap: 10px !important;
  min-height: 52px !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  align-items: center !important;
  transition: all .18s ease !important;
  box-sizing: border-box !important;
}

.live-roster-row:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(56, 189, 248, 0.4) !important;
  transform: translateY(-1px);
}

.live-roster-row.rank-1 {
  border-color: rgba(245, 158, 11, 0.45) !important;
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.14), rgba(255, 255, 255, 0.06)) !important;
}

.live-roster-row.rank-2 {
  border-color: rgba(226, 232, 240, 0.35) !important;
  background: linear-gradient(90deg, rgba(226, 232, 240, 0.1), rgba(255, 255, 255, 0.06)) !important;
}

.live-roster-row.rank-3 {
  border-color: rgba(217, 119, 6, 0.35) !important;
  background: linear-gradient(90deg, rgba(217, 119, 6, 0.1), rgba(255, 255, 255, 0.06)) !important;
}

.live-rank-badge {
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  color: #94a3b8;
  text-align: center;
  user-select: none;
}

.live-roster-row.rank-1 .live-rank-badge {
  font-size: 16px;
  filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.7));
}

.live-roster-row.rank-2 .live-rank-badge {
  font-size: 16px;
  filter: drop-shadow(0 0 6px rgba(203, 213, 225, 0.6));
}

.live-roster-row.rank-3 .live-rank-badge {
  font-size: 16px;
  filter: drop-shadow(0 0 6px rgba(217, 119, 6, 0.6));
}

.live-avatar-wrap {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  display: grid !important;
  place-items: center !important;
  flex-shrink: 0;
}

.live-avatar-wrap img {
  max-width: 30px !important;
  max-height: 28px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35)) !important;
}

.live-meta {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-width: 0 !important;
  gap: 2px !important;
  overflow: hidden;
}

.live-meta b {
  max-width: 100% !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.25 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

.live-meta small {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #fde047 !important;
  line-height: 1 !important;
  margin: 0 !important;
}

.live-row-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

.live-row-actions button {
  min-height: 32px !important;
  height: 32px !important;
  padding: 0 10px !important;
  border-radius: 9px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  border: none !important;
  white-space: nowrap !important;
  transition: all .16s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

.live-row-actions button[data-feed-student] {
  background: linear-gradient(135deg, #0d9488, #0f766e) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(13, 148, 136, 0.3) !important;
}

.live-row-actions button[data-feed-student]:hover {
  background: #0d9488 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(13, 148, 136, 0.45) !important;
}

.live-row-actions button.reward {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3) !important;
}

.live-row-actions button.reward:hover {
  background: #f59e0b !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.45) !important;
}

.live-row-actions button.minus {
  background: rgba(239, 68, 68, 0.16) !important;
  border: 1px solid rgba(239, 68, 68, 0.38) !important;
  color: #fca5a5 !important;
  width: 28px !important;
  min-width: 28px !important;
  padding: 0 !important;
  text-align: center !important;
  font-size: 13px !important;
}

.live-row-actions button.minus:hover {
  background: rgba(239, 68, 68, 0.32) !important;
  color: #fff !important;
  border-color: #f87171 !important;
}

/* RESPONSIVE HANDLING FOR ROSTER */
@media (max-width: 600px) {
  .teacher-live-roster {
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 52% !important;
    max-height: 52% !important;
    border-radius: 20px 20px 0 0 !important;
    padding: 12px 14px 10px !important;
  }
  .live-control-tip {
    display: none !important;
  }
}

/* ==========================================================================
   ULTRA-CLEAR, VIBRANT & CRISP FISH RENDERING (NO OPACITY, NO COLOR HALO)
   ========================================================================== */
.platform-tank .swimmer-layer,
.tank .swimmer-layer,
[data-fish-layer] {
  position: absolute !important;
  inset: 0 0 42px !important;
  z-index: 25 !important;
  isolation: isolate !important;
  pointer-events: none !important;
}

.water-caustics-layer,
.water-light,
.water-ambience,
.surface-shimmer,
.platform-tank::before,
.platform-tank.time-noon::before,
.platform-tank.time-morning::before,
.platform-tank.time-sunset::before,
.platform-tank.time-night::before {
  z-index: 3 !important;
}

.stage-fish {
  position: absolute !important;
  opacity: 1 !important;
  z-index: 26 !important;
  pointer-events: auto !important;
  filter: none !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform-style: preserve-3d !important;
  -webkit-transform-style: preserve-3d !important;
}

.stage-fish .fish-sprite {
  opacity: 1 !important;
  filter: none !important;
  image-rendering: auto !important;
  image-rendering: smooth !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform: translateZ(0) !important;
  object-fit: contain !important;
}

.stage-fish.depth-back,
.stage-fish.depth-mid,
.stage-fish.depth-front,
.stage-fish:nth-child(2n),
.stage-fish:nth-child(3n),
.stage-fish:nth-child(4n+1),
.stage-fish:nth-child(4n+2) {
  opacity: 1 !important;
  filter: none !important;
}

.stage-fish.depth-back .fish-sprite,
.stage-fish.depth-mid .fish-sprite,
.stage-fish.depth-front .fish-sprite,
.stage-fish:nth-child(2n) .fish-sprite,
.stage-fish:nth-child(3n) .fish-sprite {
  opacity: 1 !important;
  filter: none !important;
}

/* GIF fish: disable interfering skew/breathe CSS animations, preserve pure frame rate */
.stage-fish.species-cartoon-green .fish-sprite,
.stage-fish.species-cartoon-whale .fish-sprite,
.stage-fish .fish-sprite[src*=".gif"] {
  animation: none !important;
  filter: none !important;
  transform: none !important;
  image-rendering: auto !important;
  image-rendering: smooth !important;
}

.platform-tank .stage-fish.species-cartoon-green {
  width: 126px !important;
  height: 82px !important;
}

.platform-tank .stage-fish.species-cartoon-whale {
  width: 156px !important;
  height: 96px !important;
}

.platform-tank .stage-fish.species-manta {
  width: 140px !important;
  height: 88px !important;
}

.stage-fish.is-fed .fish-sprite {
  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.9)) !important;
}

.stage-fish.is-resting,
.stage-fish.is-resting .fish-sprite {
  opacity: 1 !important;
  filter: none !important;
}

.stage-fish.is-resting .fish-label {
  opacity: 1 !important;
}

.stage-fish .fish-label {
  z-index: 22 !important;
}

.food-layer {
  z-index: 28 !important;
}

/* ==========================================================================
   STUDENT PENALTY SYSTEM & SEPARATE LIST SECTION
   ========================================================================== */
.btn-penalty,
.btn-feed-penalty {
  background: rgba(239, 68, 68, 0.14) !important;
  border: 1px solid rgba(239, 68, 68, 0.38) !important;
  color: #fca5a5 !important;
  height: 27px !important;
  min-height: 27px !important;
  padding: 0 7px !important;
  border-radius: 7px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all .16s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  box-sizing: border-box !important;
}

.btn-penalty:hover,
.btn-feed-penalty:hover {
  background: rgba(239, 68, 68, 0.28) !important;
  border-color: #f87171 !important;
  color: #fff !important;
  transform: translateY(-1px);
}

.btn-penalty.active,
.btn-feed-penalty.active {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  border-color: #f87171 !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.35) !important;
}

.penalty-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(239, 68, 68, 0.18);
  border: 1px solid rgba(239, 68, 68, 0.38);
  color: #fca5a5;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 6px;
  margin-top: 3px;
  width: fit-content;
}

.penalty-tag-mini {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 6px;
  margin-left: 6px;
}

/* SEPARATE PENALIZED STUDENTS SECTION IN LIVE ROSTER */
.live-penalized-section {
  margin-top: 8px !important;
  padding-top: 7px !important;
  border-top: 1px dashed rgba(239, 68, 68, 0.35) !important;
  flex-shrink: 0;
}

.live-list-label.penalized-label {
  color: #f87171 !important;
  font-size: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 5px !important;
}

.live-list-label.penalized-label strong {
  color: #fff !important;
  background: #ef4444 !important;
  padding: 1px 8px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}

.live-penalized-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  max-height: 180px !important;
  overflow-y: auto !important;
  padding-right: 3px !important;
}

.live-penalized-row {
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr) auto !important;
  gap: 10px !important;
  min-height: 48px !important;
  padding: 8px 12px !important;
  border-radius: 13px !important;
  background: rgba(239, 68, 68, 0.12) !important;
  border: 1px solid rgba(239, 68, 68, 0.32) !important;
  align-items: center !important;
  box-sizing: border-box !important;
  transition: all .16s ease !important;
}

.live-penalized-row:hover {
  background: rgba(239, 68, 68, 0.2) !important;
  border-color: rgba(239, 68, 68, 0.5) !important;
}

.live-penalized-row .live-avatar-wrap {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  background: rgba(0, 0, 0, 0.3) !important;
  display: grid !important;
  place-items: center !important;
}

.live-penalized-row .live-avatar-wrap img {
  width: 30px !important;
  height: 30px !important;
  object-fit: contain !important;
  filter: grayscale(0.4);
}

.live-penalized-row .live-meta {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  gap: 2px !important;
}

.live-penalized-row .live-meta b {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: #fecaca !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.25 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

.live-penalized-row .penalty-countdown {
  font-size: 11px !important;
  font-weight: 750 !important;
  color: #fca5a5 !important;
}

.btn-undo-penalty {
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 13px !important;
  border-radius: 9px !important;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.25), rgba(16, 185, 129, 0.25)) !important;
  border: 1px solid rgba(34, 197, 94, 0.55) !important;
  color: #4ade80 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  transition: all .16s ease !important;
}

.btn-undo-penalty:hover {
  background: #22c55e !important;
  border-color: #22c55e !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(34, 197, 94, 0.45) !important;
}

/* REALISTIC FISH JUMP & EXPULSION ANIMATION */
@keyframes fish-realistic-jump-exit {
  0% {
    transform: translate3d(var(--cur-x, 0px), var(--cur-y, 0px), 0) rotate(0deg) scale(1);
    filter: drop-shadow(0 0 14px rgba(239, 68, 68, 0.9)) brightness(1.2);
    opacity: 1;
  }
  15% {
    /* Tail flick & startle recoil */
    transform: translate3d(calc(var(--cur-x, 0px) - 14px), calc(var(--cur-y, 0px) + 12px), 0) rotate(-22deg) scale(1.12);
    filter: drop-shadow(0 0 24px rgba(239, 68, 68, 1)) brightness(1.35) saturate(1.4);
  }
  35% {
    /* Powerful upward thrust towards surface */
    transform: translate3d(calc(var(--cur-x, 0px) + 28px), calc(var(--cur-y, 0px) - 85px), 0) rotate(-42deg) scale(1.05);
  }
  65% {
    /* Breaching the surface in ballistic curve */
    transform: translate3d(calc(var(--cur-x, 0px) + 65px), -60px, 0) rotate(15deg) scale(0.9);
  }
  100% {
    /* Flying out of the aquarium through the air */
    transform: translate3d(calc(var(--cur-x, 0px) + 110px), -380px, 0) rotate(55deg) scale(0.35);
    opacity: 0;
    filter: grayscale(0.8) brightness(0.4);
  }
}

.stage-fish.is-expelling {
  pointer-events: none !important;
  z-index: 100 !important;
  animation: fish-realistic-jump-exit 0.95s cubic-bezier(0.25, 0.8, 0.25, 1) forwards !important;
}

.stage-fish.is-expelling .fish-sprite {
  animation: none !important;
  filter: none !important;
}

/* Water surface splash ripple when fish leaps */
@keyframes water-splash-ring {
  0% { transform: translate(-50%, -50%) scale(0.2); opacity: 1; border-width: 3px; }
  100% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; border-width: 1px; }
}

.water-splash-ripple {
  position: absolute;
  width: 55px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.8), inset 0 0 10px rgba(239, 68, 68, 0.6);
  pointer-events: none;
  z-index: 95;
  animation: water-splash-ring 0.8s ease-out forwards;
}

@keyframes water-droplet-fly {
  0% { transform: translate(0, 0) scale(1); opacity: 0.95; }
  100% { transform: translate(var(--dx, 20px), var(--dy, -60px)) scale(0.2); opacity: 0; }
}

.water-splash-droplet {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 40%, rgba(56, 189, 248, 0.9) 100%);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.9);
  pointer-events: none;
  z-index: 96;
  animation: water-droplet-fly 0.75s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

@keyframes shockwave-pop {
  0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
  25% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
  75% { transform: translate(-50%, -65%) scale(1); opacity: 0.95; }
  100% { transform: translate(-50%, -95%) scale(0.8); opacity: 0; }
}

.expel-shockwave {
  position: absolute;
  z-index: 105;
  pointer-events: none;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  padding: 5px 14px;
  border-radius: 999px;
  box-shadow: 0 4px 22px rgba(239, 68, 68, 0.75), 0 0 12px rgba(255, 255, 255, 0.4);
  border: 2px solid #ffffff;
  animation: shockwave-pop 1.1s ease-out forwards;
  letter-spacing: .04em;
  white-space: nowrap;
}

.expel-shockwave span {
  opacity: .95;
  font-size: 11.5px;
  margin-left: 4px;
  font-weight: 700;
}

/* REALISTIC FISH PLUNGE / DIVE RETURN ANIMATION (CEZA BİTİNCE AKVARYUMA GERÇEKÇİ DALIŞ) */
@keyframes fish-realistic-dive-return {
  0% {
    transform: translate3d(var(--enter-x, 150px), -120px, 0) rotate(42deg) scale(0.65);
    opacity: 0;
    filter: drop-shadow(0 0 18px rgba(34, 197, 94, 0.95)) brightness(1.3);
  }
  30% {
    opacity: 1;
    transform: translate3d(calc(var(--enter-x, 150px) - 15px), 25px, 0) rotate(28deg) scale(1.08);
    filter: drop-shadow(0 0 25px rgba(34, 197, 94, 1)) brightness(1.25);
  }
  65% {
    transform: translate3d(calc(var(--enter-x, 150px) - 8px), calc(var(--target-y, 180px) + 18px), 0) rotate(-12deg) scale(1.02);
    filter: drop-shadow(0 0 12px rgba(56, 189, 248, 0.7));
  }
  85% {
    transform: translate3d(var(--enter-x, 150px), calc(var(--target-y, 180px) - 8px), 0) rotate(5deg) scale(0.98);
  }
  100% {
    transform: translate3d(var(--enter-x, 150px), var(--target-y, 180px), 0) rotate(0deg) scale(1);
    opacity: 1;
    filter: none;
  }
}

.stage-fish.is-returning {
  pointer-events: none !important;
  z-index: 95 !important;
  animation: fish-realistic-dive-return 1.1s cubic-bezier(0.2, 0.9, 0.3, 1) forwards !important;
}

.stage-fish.is-returning .fish-sprite {
  animation: none !important;
  filter: none !important;
}

@keyframes welcome-pop {
  0% { transform: translate(-50%, -40%) scale(0.4); opacity: 0; }
  25% { transform: translate(-50%, -50%) scale(1.12); opacity: 1; }
  75% { transform: translate(-50%, -50%) scale(1); opacity: 0.95; }
  100% { transform: translate(-50%, -80%) scale(0.85); opacity: 0; }
}

.welcome-return-badge {
  position: absolute;
  z-index: 105;
  pointer-events: none;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  padding: 5px 15px;
  border-radius: 999px;
  box-shadow: 0 4px 22px rgba(16, 185, 129, 0.75), 0 0 14px rgba(255, 255, 255, 0.5);
  border: 2px solid #ffffff;
  animation: welcome-pop 1.2s ease-out forwards;
  letter-spacing: .04em;
  white-space: nowrap;
}

.welcome-return-badge span {
  opacity: .95;
  font-size: 11.5px;
  margin-left: 4px;
  font-weight: 700;
}

/* NEW FISH WELCOME DIVE ANIMATION ("HOŞ GELDİN ARKADAŞIM!") */
@keyframes fish-welcome-dive {
  0% {
    transform: translate3d(var(--enter-x, 200px), -150px, 0) rotate(48deg) scale(0.6);
    opacity: 0;
    filter: drop-shadow(0 0 25px rgba(56, 189, 248, 1)) brightness(1.4);
  }
  30% {
    opacity: 1;
    transform: translate3d(calc(var(--enter-x, 200px) - 18px), 30px, 0) rotate(26deg) scale(1.18);
    filter: drop-shadow(0 0 30px rgba(56, 189, 248, 1)) brightness(1.3);
  }
  65% {
    transform: translate3d(calc(var(--enter-x, 200px) - 6px), calc(var(--target-y, 160px) + 24px), 0) rotate(-14deg) scale(1.04);
    filter: drop-shadow(0 0 16px rgba(14, 165, 233, 0.75));
  }
  85% {
    transform: translate3d(var(--enter-x, 200px), calc(var(--target-y, 160px) - 8px), 0) rotate(5deg) scale(0.98);
  }
  100% {
    transform: translate3d(var(--enter-x, 200px), var(--target-y, 160px), 0) rotate(0deg) scale(1);
    opacity: 1;
    filter: none;
  }
}

.stage-fish.is-welcoming {
  pointer-events: none !important;
  z-index: 100 !important;
  animation: fish-welcome-dive 1.35s cubic-bezier(0.2, 0.9, 0.3, 1) forwards !important;
}

.stage-fish.is-welcoming .fish-sprite {
  animation: none !important;
  filter: none !important;
}

@keyframes welcome-friend-bounce {
  0% { transform: translate(-50%, -40%) scale(0.3); opacity: 0; }
  20% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
  35% { transform: translate(-50%, -50%) scale(0.96); opacity: 1; }
  75% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  90% { transform: translate(-50%, -65%) scale(0.95); opacity: 0.9; }
  100% { transform: translate(-50%, -95%) scale(0.7); opacity: 0; }
}

.welcome-friend-badge {
  position: absolute;
  z-index: 110;
  pointer-events: none;
  background: linear-gradient(135deg, #0284c7, #0ea5e9, #0d9488);
  color: #ffffff;
  font-size: 14.5px;
  font-weight: 850;
  padding: 8px 22px;
  border-radius: 999px;
  box-shadow: 0 8px 32px rgba(14, 165, 233, 0.8), 0 0 24px rgba(255, 255, 255, 0.6);
  border: 2px solid #ffffff;
  animation: welcome-friend-bounce 2.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  letter-spacing: .02em;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.welcome-friend-badge b {
  font-size: 15px;
  color: #fef08a;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

.welcome-friend-badge span {
  background: rgba(255, 255, 255, 0.25);
  padding: 2px 10px;
  border-radius: 99px;
  font-size: 13px;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  font-weight: 800;
}