:root{
  --bg:#09051a; --panel:#120b2b; --panel2:#180d38; --line:#6336a5;
  --cyan:#22e8ff; --pink:#ff49d7; --green:#62ff9a; --gold:#ffd85a;
  --text:#e9e5ff; --muted:#9b91bc;
  --common:#9b91bc; --uncommon:#62ff9a; --rare:#22e8ff; --epic:#ff49d7; --legendary:#ffd85a;
}
*{box-sizing:border-box}
body{
  margin:0;background:radial-gradient(circle at 50% 15%,#18356b 0,#0b1030 35%,#09051a 80%);
  color:var(--text);font-family:system-ui,Segoe UI,sans-serif;min-height:100vh;
}
button{font:inherit;color:inherit;cursor:pointer}
button:disabled{opacity:.4;cursor:not-allowed}
.app{max-width:1450px;margin:auto;padding:12px}
.topbar{
  display:flex;align-items:center;gap:18px;justify-content:space-between;
  padding:12px 16px;border:2px solid #5422a0;border-radius:16px;
  background:#0d0820cc;box-shadow:0 0 25px #5b20a633;position:sticky;top:8px;z-index:20;
}
.logo{font-weight:1000;line-height:.85;font-size:28px;color:var(--cyan);text-shadow:3px 3px #7d1aa9}
.logo span{color:var(--pink)}
.nav{display:flex;gap:8px;flex-wrap:wrap}
.nav button,.wallet{background:#171032;border:1px solid #57388e;border-radius:9px;padding:8px 11px}
.nav button.active{border-color:var(--cyan);color:var(--cyan)}
.wallet{border-color:var(--green);color:var(--green)}
.layout{display:grid;grid-template-columns:1fr 340px;gap:12px;margin-top:12px}
.card{background:linear-gradient(180deg,#150c31e8,#0d0923e8);border:1px solid var(--line);border-radius:14px;box-shadow:0 0 20px #0008;overflow:hidden}
.card h3{margin:0;padding:10px 12px;font-size:14px;letter-spacing:1px;color:var(--cyan)}
.trench{
  position:relative;height:590px;overflow:hidden;
  background:
   radial-gradient(circle at 20% 75%,#2a1d61 0 2%,transparent 3%),
   linear-gradient(#09285a 0,#062b4a 50%,#07172e 100%);
}
.trench:before{
 content:"";position:absolute;inset:0;
 background:
 radial-gradient(ellipse at 15% 65%,#11647755 0 6%,transparent 7%),
 radial-gradient(ellipse at 80% 35%,#117e9350 0 5%,transparent 6%);
 animation:water 8s ease-in-out infinite alternate;
}
@keyframes water{to{transform:translateY(-10px) scale(1.03);opacity:.75}}
.floor{position:absolute;bottom:-35px;left:-5%;width:110%;height:145px;background:#0c1730;border-radius:50% 50% 0 0/35% 35% 0 0;box-shadow:0 -20px 60px #00d9ff12}
.rockImg{position:absolute;bottom:55px;image-rendering:auto;filter:drop-shadow(0 6px 6px #0007)}
.rockImg.r1{left:6%;width:110px}.rockImg.r2{right:10%;width:150px}
.seaweedImg{position:absolute;bottom:60px;image-rendering:auto;animation:seaweedSway 4s ease-in-out infinite;transform-origin:bottom center}
.seaweedImg.s1{left:22%;width:70px;animation-delay:0s}
.seaweedImg.s2{right:26%;width:60px;animation-delay:1.2s;animation-duration:4.6s}
.seaweedImg.s3{left:48%;width:50px;animation-delay:.6s;animation-duration:3.8s}
@keyframes seaweedSway{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
.fish {
  position: absolute;
  font-size: 52px;
  z-index: 4;
  text-align: center;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  filter: drop-shadow(0 5px 4px #0009);
  transition: filter 0.15s ease, transform 0.15s ease;
  animation: swim var(--speed,9s) ease-in-out infinite alternate;
}

.fish:hover {
  filter: brightness(1.25) drop-shadow(0 5px 4px #0009);
}

.fish:active {
  transform: scale(0.92);
}

.fish.feeding {
  animation: fishFeedReaction 0.65s ease;
  filter: brightness(1.5);
  z-index: 20;
}

/*
  Click/touch target sized to roughly match the visible emoji
  glyph, not the whole label. Emoji font glyphs render with real
  transparent padding inside their own box, so this stays a
  little larger than the ink itself for comfortable tapping —
  but nowhere near the 95x75px region this used to be, which
  extended well past the fish into empty water.
*/
.fish::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.5em;
  height: 1.3em;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: auto;
}

.fish.rarity-uncommon{filter:drop-shadow(0 0 8px var(--uncommon))}
.fish.rarity-rare{filter:drop-shadow(0 0 10px var(--rare))}
.fish.rarity-epic{filter:drop-shadow(0 0 12px var(--epic))}
.fish.rarity-legendary{filter:drop-shadow(0 0 16px var(--gold));font-size:66px}

/* ---- vector fish sprites (Kenney fish pack) ---- */
.fishEmoji{width:1em;height:1em;display:flex;align-items:center;justify-content:center;
  animation:spriteFlip var(--speed,9s) ease-in-out infinite alternate}
@keyframes spriteFlip{0%,45%{transform:scaleX(1)}50%,100%{transform:scaleX(-1)}}
.fishSprite{width:1.6em;height:1.6em;object-fit:contain;pointer-events:none;user-select:none;
  animation:fishWobble .9s ease-in-out infinite;transform-origin:50% 50%}
@keyframes fishWobble{0%,100%{transform:skewX(-4deg) scaleY(1)}50%{transform:skewX(4deg) scaleY(.97)}}
.fish.rarity-legendary .fishSprite{animation-duration:.55s}
.fish.rarity-epic .fishSprite{animation-duration:.7s}
.fish.wild .fishSprite{filter:drop-shadow(0 0 4px var(--gold))}

.fishReward {
  position: fixed;
  z-index: 9999;
  pointer-events: none;

  font-weight: 900;
  font-size: 16px;

  transform: translate(-50%, 0);

  animation: fishRewardFloat 0.9s ease-out forwards;
}

@keyframes fishRewardFloat {
  0% {
    opacity: 0;
    transform: translate(-50%, 10px) scale(0.8);
  }

  20% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1.1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -55px) scale(1);
  }
}

@keyframes fishFeedReaction {
  0% {
    transform: scale(1) rotate(0deg);
  }

  15% {
    transform: scale(1.18) rotate(-3deg);
  }

  30% {
    transform: scale(0.92) rotate(4deg);
  }

  45% {
    transform: scale(1.28) rotate(-2deg);
  }

  65% {
    transform: scale(1.08) rotate(2deg);
  }

  82% {
    transform: scale(1.16) rotate(-1deg);
  }

  100% {
    transform: scale(1) rotate(0deg);
  }
}
/* ============================================================
   PUBLIC TRENCH — JS STEERING MOVEMENT
============================================================ */

.fishSteered {
  animation: none !important;
  transition: filter 0.15s ease !important;
  touch-action: manipulation;
}
.fishSteered .fishEmoji {
  animation: none !important;
  touch-action: manipulation;
}

/* ============================================================
   PUBLIC TRENCH — AQUARIUM DECOR
============================================================ */

.tankDecor {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 1;
  object-fit: contain;
}

.tankDecor.coral {
  width: 110px;
  height: 110px;
}

.tankDecor.rock {
  width: 95px;
  height: 75px;
}

.tankDecor.seaweed {
  width: 85px;
  height: 120px;
}

.tankDecor.shell {
  width: 55px;
  height: 55px;
}

.tankDecor.bubble {
  width: 42px;
  height: 42px;
  opacity: 0.75;
}

.fish {
  z-index: 5;
}

.fish .fishEmoji {
  position: relative;
  z-index: 5;
}

.fish .label {
  z-index: 6;
}

/* New sprites naturally face right.
   Flip only the sprite when the fish initially travels left. */

.fishFacingRight .fishSprite {
  transform: scaleX(1);
}

.fishFacingLeft .fishSprite {
  transform: scaleX(-1);
}

/* These sprites are drawn facing the opposite direction */
.fishSprite[src$="sprite_05.png"],
.fishSprite[src$="sprite_06.png"],
.fishSprite[src$="sprite_09.png"],
.fishSprite[src$="sprite_10.png"],
.fishSprite[src$="sprite_12.png"],
.fishSprite[src$="sprite_15.png"] {
  transform: scaleX(-1);
}

.fishFacingLeft .fishSprite[src$="sprite_05.png"],
.fishFacingLeft .fishSprite[src$="sprite_06.png"],
.fishFacingLeft .fishSprite[src$="sprite_09.png"],
.fishFacingLeft .fishSprite[src$="sprite_10.png"],
.fishFacingLeft .fishSprite[src$="sprite_12.png"],
.fishFacingLeft .fishSprite[src$="sprite_15.png"] {
  transform: scaleX(1);
}


/* ============================================================
   WHALE SPLASH
============================================================ */

.whaleSplash {
  position: fixed;
  z-index: 9998;
  pointer-events: none;

  width: 90px;
  height: 90px;

  transform: translate(-50%, -50%);
  animation: whaleSplash 0.9s ease-out forwards;
}

.whaleSplash::before {
  content: "💦";
  position: absolute;
  left: 50%;
  top: 50%;

  font-size: 58px;
  transform: translate(-50%, -50%);
}

.whaleSplash::after {
  content: "💧 💧 💧";
  position: absolute;
  left: 50%;
  top: 5px;

  white-space: nowrap;
  font-size: 18px;

  transform: translateX(-50%);
  animation: whaleBubbles 0.9s ease-out forwards;
}

@keyframes whaleSplash {
  0% {
    opacity: 0;
    transform: translate(-50%, -20%) scale(0.4);
  }

  25% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.25);
  }

  60% {
    opacity: 1;
    transform: translate(-50%, -55%) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -90%) scale(1.5);
  }
}

@keyframes whaleBubbles {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }

  25% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-55px);
  }
}

/*
  Swim path: five waypoints instead of two, plus a slight
  rotation "wobble" layered on top, so the motion reads as
  swimming rather than a robotic back-and-forth slide.

  The horizontal flip when the fish turns around lives on
  .fishEmoji (spriteFlip, above) instead of here — .fish is the
  shared parent of both the sprite AND the name label, so
  flipping it flipped the label's text too. Only the sprite
  should ever mirror.
*/
@keyframes swim {
  0% {
    transform:
      translate(0, 0)
      rotate(0deg);
  }

  18% {
    transform:
      translate(
        calc(var(--dx) * 0.18),
        calc(var(--dy) * -0.20)
      )
      rotate(calc(var(--rotate) * -1));
  }

  38% {
    transform:
      translate(
        calc(var(--dx) * 0.42),
        calc(var(--dy) * 0.45)
      )
      rotate(var(--rotate));
  }

  55% {
    transform:
      translate(
        calc(var(--dx) * 0.68),
        calc(var(--dy) * -0.30)
      )
      rotate(calc(var(--rotate) * -0.7));
  }

  72% {
    transform:
      translate(
        calc(var(--dx) * 0.88),
        calc(var(--dy) * 0.55)
      )
      rotate(calc(var(--rotate) * 0.6));
  }

  100% {
    transform:
      translate(
        var(--dx),
        var(--dy)
      )
      rotate(0deg);
  }
}

.label{position:absolute;top:calc(100% + 2px);left:50%;transform:translateX(-50%);font-size:9px;white-space:nowrap;color:#fff;background:#09051dcc;border:1px solid #6b4b9e;padding:2px 5px;border-radius:5px}
.wild .label{border-color:var(--gold);color:var(--gold)}
.bubble{position:absolute;bottom:-20px;width:14px;height:14px;background-size:contain;background-repeat:no-repeat;animation:bubble 7s linear infinite;opacity:.85}
@keyframes bubble{to{transform:translateY(-650px) translateX(30px);opacity:0}}
.scanner{position:absolute;left:12px;right:12px;bottom:12px;z-index:8;padding:9px;border:1px solid #3f6c9d;background:#071226d9;border-radius:10px;backdrop-filter:blur(5px)}
.scanline{display:flex;justify-content:space-between;font-size:11px;margin-bottom:6px;color:#a8f6ff}
.tokenrow{display:flex;gap:8px;align-items:center;padding:5px 0;border-top:1px solid #25415c;font-size:11px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 9px var(--green)}
.badge{margin-left:auto;color:var(--gold)}
.heat{position:absolute;top:12px;right:12px;z-index:12;background:#080d20dd;border:1px solid var(--pink);border-radius:9px;padding:6px 10px;font-size:10px;text-align:center}
.heat b{display:block;color:var(--pink);font-size:15px}
#capacityBadge.full{border-color:var(--pink);animation:capacityPulse 1.4s ease-in-out infinite}
@keyframes capacityPulse{0%,100%{box-shadow:0 0 0 0 #ff49d766}50%{box-shadow:0 0 0 6px #ff49d700}}
/* ============================================================
   LIVE TRENCH ECOLOGY
============================================================ */

.trench{
  transition:
    filter 1.5s ease,
    background 1.5s ease;
}

.trench::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:3;
  opacity:0;
  transition:opacity 1.5s ease;
}

/* CALM */

.trench.state-calm{
  filter:saturate(.95) brightness(.95);
}

.trench.state-calm::after{
  opacity:.05;
  background:
    radial-gradient(
      ellipse at 50% 20%,
      #7de8ff22,
      transparent 55%
    );
}

/* ACTIVE */

.trench.state-active{
  filter:saturate(1.08) brightness(1);
}

.trench.state-active::after{
  opacity:.12;
  background:
    radial-gradient(
      ellipse at 30% 40%,
      #22e8ff18,
      transparent 45%
    ),
    radial-gradient(
      ellipse at 80% 70%,
      #7a4cff18,
      transparent 45%
    );
}

/* HOT */

.trench.state-hot{
  filter:saturate(1.18) brightness(1.04);
}

.trench.state-hot::after{
  opacity:.18;
  background:
    radial-gradient(
      ellipse at 25% 30%,
      #22e8ff2b,
      transparent 45%
    ),
    radial-gradient(
      ellipse at 75% 65%,
      #ff49d72b,
      transparent 50%
    );
}

/* FRENZY */

.trench.state-frenzy{
  filter:
    saturate(1.35)
    brightness(1.08);
}

.trench.state-frenzy::after{
  opacity:.26;
  background:
    radial-gradient(
      ellipse at 20% 25%,
      #22e8ff3d,
      transparent 40%
    ),
    radial-gradient(
      ellipse at 80% 70%,
      #ff49d73d,
      transparent 45%
    );
  animation:abyssPulse 2s ease-in-out infinite alternate;
}

@keyframes abyssPulse{
  from{transform:scale(1);opacity:.18}
  to{transform:scale(1.06);opacity:.3}
}

/* ============================================================
   FISH REACT TO TRENCH CONDITIONS
============================================================ */

.trench.state-active .fish{
  --speed-multiplier:.88;
}

.trench.state-hot .fish{
  --speed-multiplier:.72;
  filter:
    drop-shadow(0 0 8px #22e8ff66)
    drop-shadow(0 5px 4px #0009);
}

.trench.state-frenzy .fish{
  --speed-multiplier:.58;
  filter:
    drop-shadow(0 0 13px #ff49d777)
    drop-shadow(0 5px 4px #0009);
}

/* ============================================================
   CURRENT / WATER MOTION
============================================================ */

.trench.state-active .water-current{
  animation-duration:5s;
}

.trench.state-hot .water-current{
  animation-duration:3.5s;
}

.trench.state-frenzy .water-current{
  animation-duration:2s;
}

/* ============================================================
   PRESSURE DISPLAY
============================================================ */

.trenchCondition{
  position:absolute;
  top:12px;
  left:12px;
  z-index:14;
  min-width:170px;
  padding:8px 10px;
  border:1px solid #3f6c9d;
  background:#071226dd;
  border-radius:10px;
  backdrop-filter:blur(6px);
  box-shadow:0 0 18px #0007;
}

.trenchCondition .conditionTitle{
  font-size:9px;
  letter-spacing:1.3px;
  color:var(--muted);
  margin-bottom:3px;
}

.trenchCondition .conditionState{
  font-size:16px;
  font-weight:1000;
  letter-spacing:1px;
  color:var(--cyan);
}

.trenchCondition .conditionPressure{
  font-size:10px;
  margin-top:3px;
  color:#bfefff;
}

.pressureBar{
  width:100%;
  height:6px;
  margin-top:6px;
  background:#080616;
  border-radius:20px;
  overflow:hidden;
}

.pressureBar i{
  display:block;
  width:0%;
  height:100%;
  background:linear-gradient(
    90deg,
    var(--cyan),
    var(--pink)
  );
  transition:
    width .8s ease,
    filter .8s ease;
}

/* ============================================================
   ACTIVE STATE COLORS
============================================================ */

.trenchCondition.state-calm .conditionState{
  color:var(--green);
}

.trenchCondition.state-active .conditionState{
  color:var(--cyan);
}

.trenchCondition.state-hot .conditionState{
  color:var(--pink);
}

.trenchCondition.state-frenzy .conditionState{
  color:var(--gold);
  text-shadow:
    0 0 10px #ffd85a88;
}

/* ============================================================
   BUBBLE ACTIVITY
============================================================ */

.trench.state-active .bubble{
  animation-duration:4.5s;
}

.trench.state-hot .bubble{
  animation-duration:3.2s;
}

.trench.state-frenzy .bubble{
  animation-duration:2.2s;
}
.side{display:flex;flex-direction:column;gap:12px}
.stats{padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.stat{background:#0c0820;border:1px solid #39235f;border-radius:8px;padding:8px}.stat b{display:block;color:var(--cyan);font-size:19px}.stat span{font-size:10px;color:var(--muted)}
.access{padding:12px}.access strong{color:var(--green)}.bar{height:8px;background:#090615;border-radius:20px;overflow:hidden;margin:7px 0}.bar i{display:block;width:0%;height:100%;background:linear-gradient(90deg,var(--pink),var(--cyan));transition:width .4s}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px}
.action{border:1px solid #60429a;background:#171032;border-radius:9px;padding:11px}.action:hover{transform:translateY(-2px);border-color:var(--cyan)}
.log{max-height:210px;overflow:auto;padding:10px;font-size:11px}.event{padding:7px;border-bottom:1px solid #282047}.event b{color:var(--pink)}
.toast{position:fixed;right:18px;bottom:18px;background:#11092a;border:2px solid var(--cyan);border-radius:12px;padding:12px 15px;z-index:50;box-shadow:0 0 30px #00d9ff44;transform:translateY(120px);transition:.3s}.toast.show{transform:none}
.mission{padding:8px 12px;border-bottom:1px solid #241a3f;font-size:11px}
.mission .mbar{height:6px;background:#090615;border-radius:20px;overflow:hidden;margin:5px 0}
.mission .mbar i{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--cyan))}
.mission .claim{margin-top:5px;font-size:10px;background:var(--gold);color:#1a1006;border:none;border-radius:6px;padding:4px 8px;font-weight:800}
.eggrow{padding:8px 12px;border-bottom:1px solid #241a3f;font-size:11px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.eggrow button{font-size:10px;border:1px solid #60429a;background:#171032;border-radius:6px;padding:4px 8px}
.dexgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:12px}
.dexcell{background:#0c0820;border:1px solid #39235f;border-radius:8px;padding:8px;text-align:center;font-size:9px}
.dexcell.locked{opacity:.25;filter:grayscale(1)}
.dexcell .e{font-size:26px}
.lbrow{display:flex;gap:8px;align-items:center;padding:7px 12px;border-bottom:1px solid #241a3f;font-size:11px}
.lbrow b{color:var(--cyan);width:22px}
.rarity-tag{font-size:9px;padding:1px 5px;border-radius:5px;margin-left:auto}
.rarity-tag.common{background:#2a2540;color:var(--common)}
.rarity-tag.uncommon{background:#0f3826;color:var(--uncommon)}
.rarity-tag.rare{background:#0c2f42;color:var(--rare)}
.rarity-tag.epic{background:#3a0f34;color:var(--epic)}
.rarity-tag.legendary{background:#3a2e0a;color:var(--gold)}
.breedpick select{width:100%;background:#0c0820;color:var(--text);border:1px solid #39235f;border-radius:6px;padding:6px;margin:4px 0;font-size:11px}
.modal-wrap{position:fixed;inset:0;background:#000000aa;z-index:40;display:none;align-items:flex-start;justify-content:center;padding:40px 12px;overflow:auto}
.modal-wrap.show{display:flex}
.modal{max-width:640px;width:100%}
.modal .closeBtn{float:right;background:none;border:none;color:var(--muted);font-size:16px}
@media(max-width:900px){
  .layout{
    grid-template-columns:1fr;
  }

  .trench{
    height:calc(100vh - 150px);
    min-height:500px;
  }

  .topbar{
    align-items:flex-start;
    flex-direction:column;
  }

  .nav{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:1000;

    width:auto;
    display:flex;
    justify-content:space-around;
    align-items:stretch;
    gap:0;

    padding:8px 6px calc(8px + env(safe-area-inset-bottom));

    background:rgba(8,5,24,.96);
    border-top:1px solid #57388e;
    box-shadow:0 -8px 24px rgba(0,0,0,.45);
    backdrop-filter:blur(12px);
  }

  .nav button{
    flex:1;
    min-width:0;

    padding:8px 4px;
    border:0;
    border-radius:8px;

    background:transparent;

    font-size:10px;
    font-weight:800;
    white-space:nowrap;
  }

  .nav button.active{
    border:0;
    background:#171032;
  }

  .dexgrid{
    grid-template-columns:repeat(3,1fr);
  }
}
@media(max-width:900px){
  body{
    padding-bottom:72px;
  }
}

.shopItem{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px;border:1px solid #39235f;border-radius:9px;margin-bottom:8px;background:#0c0820}
.shopItem .shopItemName{font-weight:800;font-size:12px}
.shopItem .shopItemDesc{font-size:10px;color:var(--muted);margin-top:2px}
.shopItem .shopBuyBtn{border:1px solid var(--gold);background:transparent;color:var(--gold);border-radius:7px;padding:8px 12px;font-weight:800;font-size:11px;white-space:nowrap}
.shopItem .shopBuyBtn:disabled{opacity:.4}
.seasonTier{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid #241a3f;border-radius:8px;margin-bottom:6px}
.seasonTier.locked{opacity:.4}
.seasonTier .tierNum{width:26px;height:26px;border-radius:50%;background:#171032;border:1px solid #60429a;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:var(--cyan)}
.seasonTier .tierRewards{flex:1;font-size:10px}
.seasonTier .tierClaim{font-size:9px;border:none;border-radius:6px;padding:4px 8px;font-weight:800}
.seasonTier .tierClaim.free{background:var(--green);color:#04220f}
.seasonTier .tierClaim.premium{background:var(--gold);color:#1a1006}

.buyCTBtn {
  margin: 8px 0 10px;
  padding: 8px 14px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--accent);
  color: #111;
  font-weight: 800;
  font-size: 11px;
  cursor: pointer;
}

.buyCTBtn:hover {
  filter: brightness(1.1);
}



.tankGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  padding: 0 12px 14px;
  max-height: 65vh;
  overflow-y: auto;
}

.tankFishCard {
  position: relative;
  padding: 12px 8px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 8px;
  background: rgba(255,255,255,.035);
  text-align: center;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease;
}

.tankFishCard:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
}

.tankFishSprite {
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tankFishSprite .fishSprite {
  max-width: 70px;
  max-height: 60px;
}

.tankFishName {
  margin-top: 5px;
  font-size: 12px;
  font-weight: 800;
}

.tankFishMeta {
  margin-top: 3px;
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
}

.tankModal {
  max-width: 760px;
}

.playerTank {
  position: relative;
  width: calc(100% - 24px);
  height: 420px;
  margin: 0 12px;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.06), transparent 25%),
    linear-gradient(
      180deg,
      rgba(20,70,100,.45),
      rgba(5,25,45,.85)
    );
  box-shadow:
    inset 0 0 50px rgba(0,0,0,.35),
    0 8px 30px rgba(0,0,0,.25);
}

.playerTank::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 24%;
  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(20,60,45,.35)
    );
  pointer-events: none;
}

.tankBubbles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .45;
}

.tankBubbles::before,
.tankBubbles::after {
  content: "·  ·     ·       ·   ·       ·";
  position: absolute;
  left: 12%;
  bottom: 5%;
  font-size: 30px;
  letter-spacing: 22px;
  line-height: 45px;
  animation: tankBubblesRise 8s linear infinite;
}

.tankBubbles::after {
  left: 55%;
  bottom: -5%;
  animation-delay: -4s;
}

@keyframes tankBubblesRise {
  from {
    transform: translateY(30px);
    opacity: .15;
  }

  50% {
    opacity: .5;
  }

  to {
    transform: translateY(-300px);
    opacity: 0;
  }
}

.tankFishLayer {
  position: absolute;
  inset: 0;
}

.tankFish {
  position: absolute;
  width: max-content;
  text-align: center;
  animation:
    tankFishSwim var(--speed) ease-in-out infinite alternate;
  cursor: pointer;
  z-index: 2;
}

.tankFishSprite {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 55px;
}

.tankFishSprite .fishSprite {
  max-width: 70px;
  max-height: 60px;
  filter: drop-shadow(0 4px 5px rgba(0,0,0,.3));
}

.tankFishLabel {
  margin-top: 3px;
  font-size: 9px;
  font-weight: 700;
  color: rgba(255,255,255,.8);
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0,0,0,.8);
}

@keyframes tankFishSwim {
  from {
    transform:
      translate(0, 0)
      rotate(-2deg);
  }

  to {
    transform:
      translate(var(--dx), var(--dy))
      rotate(2deg);
  }
}

.tankGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
  gap: 8px;
  padding: 8px 12px 14px;
  max-height: 150px;
  overflow-y: auto;
}

.tankCollectionCard {
  padding: 7px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 7px;
  background: rgba(255,255,255,.025);
  text-align: center;
}

.tankCollectionSprite {
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tankCollectionSprite .fishSprite {
  max-width: 48px;
  max-height: 40px;
}

.tankCollectionName {
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tankCollectionMeta {
  margin-top: 2px;
  font-size: 8px;
  color: var(--muted);
  text-transform: uppercase;
}
/* ============================================================
   MY TANK — MODAL OVERRIDE
============================================================ */

#tankModal .card.modal.tankModal {
  width: min(900px, 94vw);
  max-width: 900px;
  min-width: 0;
  max-height: 90vh;
  margin: 0 auto;
  box-sizing: border-box;
  overflow-y: auto;
}

#tankModal .playerTank {
  width: calc(100% - 24px);
  height: 420px;
  box-sizing: border-box;
  margin-left: 12px;
  margin-right: 12px;
}

#tankModal .tankFishLayer {
  position: absolute;
  inset: 0;
}

@media(max-width:700px) {
  #tankModal .card.modal.tankModal {
    width: 96vw;
    max-width: 96vw;
  }

  #tankModal .playerTank {
    height: 360px;
  }
}

/* Smooth arrival of new public fish */ 
.fishEntering {
  opacity: 1;
  transition: none;
}
 /* Smooth departure of inactive/removed fish */ .fishLeaving { opacity: 0 !important; transform: scale(0.7) !important; transition: opacity 0.7s ease, transform 0.7s ease; pointer-events: none; }