* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  overflow: hidden;
  font-family: system-ui, sans-serif;
  background:
    radial-gradient(ellipse at 18% 22%, rgba(255, 255, 255, 0.55) 0 5%, transparent 6%),
    radial-gradient(ellipse at 70% 18%, rgba(255, 255, 255, 0.45) 0 4%, transparent 5%),
    radial-gradient(ellipse at 45% 30%, rgba(255, 255, 255, 0.5) 0 6%, transparent 7%),
    linear-gradient(#7fc3ea, #bde2f5 55%, #dff2fb);
  user-select: none;
}

#world {
  position: fixed;
  top: 0;
  left: 0;
  will-change: transform;
}

/* ---- Building ---- */
#building {
  position: absolute;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.18) 0 2px,
      rgba(255, 255, 255, 0.03) 2px 4px,
      transparent 4px 26px
    ),
    linear-gradient(180deg, #42485a, #33384a 40%, #272b3a);
  box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.3);
}
#building::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 10px;
  background: linear-gradient(90deg, #565d6f, #7c8598 50%, #565d6f);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.4);
  z-index: 1;
}
#building .interior {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.08)),
    linear-gradient(180deg, #9aa1ad, #7b818c 55%, #636a76);
}
#building .floorline {
  position: absolute;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, #d9c9a3 0 3px, #6a5f4a 3px 8px, #4a4650 8px);
  box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.35);
}
#building .window {
  position: absolute;
  background: linear-gradient(180deg, #b7d8ef, #7fa6c4 70%);
  border: 5px solid #3a3f4c;
  border-radius: 5px;
  box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
}
#building .window::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  background: rgba(58, 63, 76, 0.6);
}
#building .wall-lintel {
  position: absolute;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.15) 0 2px, rgba(255, 255, 255, 0.04) 2px 4px, transparent 4px 22px),
    linear-gradient(180deg, #5a6170, #474d5c);
  border-bottom: 8px solid #3a3f4c;
  box-shadow: inset -6px 0 12px rgba(0, 0, 0, 0.25);
}
#building .wallside {
  position: absolute;
  background: linear-gradient(90deg, #4a5060, #3c4150);
  border-top: 6px solid #5a6170;
  box-shadow: inset 0 10px 16px rgba(0, 0, 0, 0.3);
}

/* ---- Ground / platforms ---- */
.plat {
  position: absolute;
  background: linear-gradient(180deg, #5ea050 0 14px, #4a8340 14px 26px, #6b5738 26px);
  border-radius: 10px 10px 0 0;
  border-top: 6px solid #79c45f;
  box-shadow: inset 0 30px 20px rgba(255, 255, 255, 0.08), inset 0 -40px 30px rgba(0, 0, 0, 0.18);
}
.plat::before {
  content: "";
  position: absolute;
  inset: 14px 0 auto 0;
  height: 12px;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 34px,
    rgba(60, 40, 20, 0.35) 34px 40px,
    transparent 40px 80px
  );
}
.step {
  position: absolute;
  background: linear-gradient(180deg, #c9a876, #b08d5c 30%, #94744a 75%, #7c5f3d);
  border: 4px solid #6f5330;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  box-shadow:
    inset 0 -22px 0 rgba(0, 0, 0, 0.18),
    inset 0 6px 0 rgba(255, 255, 255, 0.18),
    2px 0 8px rgba(0, 0, 0, 0.25);
}
.step::after {
  content: "";
  position: absolute;
  inset: 14px 0 auto 0;
  height: 8px;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 36px,
    rgba(60, 40, 20, 0.4) 36px 42px,
    transparent 42px 72px
  );
}

/* ---- Water ---- */
#water {
  position: absolute;
  overflow: hidden;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.14) 0 2px,
      transparent 2px 90px,
      rgba(255, 255, 255, 0.06) 90px 91px,
      transparent 91px 260px,
      rgba(255, 255, 255, 0.05) 260px 261px,
      transparent 261px 520px,
      rgba(255, 255, 255, 0.04) 520px 521px,
      transparent 521px 900px,
      rgba(255, 255, 255, 0.03) 900px 901px,
      transparent 901px
    ),
    linear-gradient(180deg, #5ec8e8 0%, #3aa6d8 18%, #2a7fc0 38%, #1a5a9e 60%, #0e3a70 80%, #06203f);
  opacity: 0.95;
}
#water::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.22), transparent 45%),
    radial-gradient(circle at 70% 30%, rgba(120, 220, 255, 0.12), transparent 40%);
  pointer-events: none;
}
#water::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 8px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
  filter: blur(1px);
  mix-blend-mode: screen;
  animation: surfaceShimmer 3.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes surfaceShimmer {
  0%, 100% { transform: translateX(-18%); opacity: 0.4; }
  50% { transform: translateX(18%); opacity: 0.9; }
}

/* ---- Living ocean decor ---- */
#water .decor {
  position: absolute;
  pointer-events: none;
}
#water .ray {
  top: -4%;
  bottom: 0;
  width: 70px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.03) 70%, transparent);
  transform-origin: top center;
  filter: blur(7px);
  mix-blend-mode: screen;
  animation: raySway ease-in-out infinite;
}
@keyframes raySway {
  0%, 100% { transform: rotate(5deg) scaleY(1); opacity: 0.45; }
  50% { transform: rotate(13deg) scaleY(1.06); opacity: 0.85; }
}
#water .bubble {
  bottom: -24px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.12) 60%, transparent);
  box-shadow: inset 0 0 4px rgba(255, 255, 255, 0.5);
  animation: bubbleRise linear infinite;
  opacity: 0;
}
@keyframes bubbleRise {
  0% { transform: translateY(0); opacity: 0; }
  8% { opacity: 0.75; }
  85% { opacity: 0.5; }
  100% { transform: translateY(-2000px); opacity: 0; }
}
#water .seaweed {
  bottom: 0;
  width: 20px;
  background: linear-gradient(180deg, #3fae6a, #1f7a45 55%, #0f4a28);
  border-radius: 50% 50% 0 0;
  transform-origin: bottom center;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.35);
  animation: seaweedSway ease-in-out infinite;
}
@keyframes seaweedSway {
  0%, 100% { transform: rotate(-9deg); }
  50% { transform: rotate(9deg); }
}
#water .caustic {
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.14) 0 7px, transparent 8px),
    radial-gradient(circle at 60% 60%, rgba(255, 255, 255, 0.12) 0 9px, transparent 10px),
    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.14) 0 6px, transparent 7px),
    radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.1) 0 8px, transparent 9px);
  background-size: 130px 130px;
  mix-blend-mode: screen;
  opacity: 0.6;
  animation: causticMove 9s linear infinite;
}
@keyframes causticMove {
  from { background-position: 0 0; }
  to { background-position: 130px 0; }
}
#water .plankton {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.4);
  animation: planktonFloat ease-in-out infinite;
}
@keyframes planktonFloat {
  0%, 100% { transform: translate(0, 0); opacity: 0.15; }
  50% { transform: translate(12px, -16px); opacity: 0.7; }
}
#tank-frame {
  position: absolute;
  border: 10px solid #5fc7ec;
  border-radius: 16px;
  box-shadow:
    inset 0 0 60px rgba(0, 0, 0, 0.3),
    0 0 0 2px #2d86b5,
    0 6px 24px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}
#tank-frame::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.25), transparent 20%, transparent 80%, rgba(255, 255, 255, 0.15));
  pointer-events: none;
}
.tankwall {
  position: absolute;
  background: linear-gradient(
    90deg,
    rgba(95, 199, 236, 0.55),
    rgba(95, 199, 236, 0.12) 45%,
    rgba(95, 199, 236, 0.35)
  );
  border: 3px solid #5fc7ec;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.25);
  z-index: 2;
}
#aquarium-bg {
  position: absolute;
  background:
    radial-gradient(ellipse at 20% 78%, rgba(60, 120, 60, 0.5) 0 18%, transparent 19%),
    radial-gradient(ellipse at 80% 82%, rgba(60, 120, 60, 0.45) 0 15%, transparent 16%),
    radial-gradient(ellipse at 45% 85%, rgba(80, 60, 40, 0.6) 0 30%, transparent 31%),
    linear-gradient(180deg, #1a5a8a, #0f3d66 55%, #0a2c4a 75%, #081f36);
  box-shadow: inset 0 -40px 60px rgba(0, 0, 0, 0.5);
}

#player {
  position: fixed;
  z-index: 5;
  transform: translate(-50%, -100%);
  height: 96px;
  width: auto;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.25));
}

/* ---- Fish ---- */
.fish {
  position: absolute;
  width: 46px;
  height: 46px;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  transform: translate(-50%, -50%);
  z-index: 15;
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.3));
}
.fish .fish-label {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%) scaleX(-1);
  margin-bottom: 2px;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
  background: rgba(0, 0, 0, 0.5);
  padding: 2px 6px;
  border-radius: 7px;
  pointer-events: none;
}

/* ---- HUD ---- */
#hud {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 20;
  pointer-events: none;
  padding: 10px 14px;
  border-radius: 18px;
  background: rgba(10, 20, 35, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

#fish-count {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
#fish-count::before {
  content: "🐟 ";
  font-size: 16px;
}

#money {
  font-size: 18px;
  font-weight: 800;
  color: #ffd76a;
  text-shadow: 0 1px 3px rgba(120, 80, 0, 0.5);
  padding: 4px 12px;
  background: rgba(255, 215, 106, 0.15);
  border: 1px solid rgba(255, 215, 106, 0.3);
  border-radius: 18px;
  display: flex;
  align-items: center;
}

#oxygen {
  width: 150px;
  height: 16px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.45);
  border: 2px solid rgba(255, 255, 255, 0.25);
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}
#oxygen-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #2f8ee0, #6fe0ff);
  transition: background 0.2s, width 0.15s;
  border-radius: 8px;
}

#infinite-o2 {
  border: none;
  cursor: pointer;
  pointer-events: auto;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  font-size: 20px;
  line-height: 1;
  background: rgba(255, 255, 255, 0.14);
  border: 2px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.1s, background 0.2s, box-shadow 0.2s;
}
#infinite-o2:active {
  transform: scale(0.9);
}
#infinite-o2.on {
  background: linear-gradient(135deg, #3ddc84, #21b466);
  border-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 12px rgba(61, 220, 132, 0.7);
}

#shade {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, rgba(0, 0, 40, 0) 30%, rgba(0, 0, 25, 0.9) 100%);
  opacity: 0;
  pointer-events: none;
  z-index: 4;
  transition: opacity 0.3s;
}

#air-vignette {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, rgba(220, 30, 30, 0) 40%, rgba(220, 30, 30, 0.85) 100%);
  opacity: 0;
  pointer-events: none;
  z-index: 4;
}

#msg {
  position: fixed;
  top: 22%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  z-index: 30;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  background: rgba(10, 20, 35, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 12px 22px;
  border-radius: 16px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  max-width: 82vw;
}

button {
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ---- Movement controls ---- */
#btn-back,
#btn-walk,
#btn-jump {
  position: fixed;
  bottom: 5vh;
  z-index: 10;
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 50%;
  font-size: 1.8rem;
  color: #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.06));
  border: 2px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.25), 0 8px 20px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform 0.08s, box-shadow 0.08s;
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
#btn-back::before,
#btn-walk::before,
#btn-jump::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.25);
}

#btn-back:active,
#btn-walk:active,
#btn-jump:active {
  transform: translateY(4px) scale(0.95);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.2);
}

#btn-back {
  left: 5vw;
}
#btn-walk {
  left: 22vw;
  background: linear-gradient(180deg, rgba(90, 200, 255, 0.55), rgba(30, 120, 220, 0.35));
}
#btn-jump {
  right: 5vw;
  background: linear-gradient(180deg, rgba(90, 230, 150, 0.55), rgba(30, 160, 110, 0.35));
}

/* ---- Teleport controls ---- */
#btn-sell,
#btn-top,
#btn-bottom {
  position: fixed;
  left: 5vw;
  z-index: 10;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  font-size: 1.5rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3), 0 6px 16px rgba(0, 0, 0, 0.25);
  border: 2px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  transition: transform 0.08s, box-shadow 0.08s, filter 0.2s;
  touch-action: manipulation;
  display: flex;
  align-items: center;
  justify-content: center;
}
#btn-sell {
  top: 15vh;
  background: linear-gradient(180deg, rgba(255, 200, 90, 0.8), rgba(220, 150, 30, 0.7));
  border-color: rgba(255, 235, 180, 0.5);
}
#btn-top {
  top: 27vh;
  background: linear-gradient(180deg, rgba(120, 210, 255, 0.8), rgba(40, 150, 220, 0.7));
  border-color: rgba(190, 235, 255, 0.5);
}
#btn-bottom {
  top: 39vh;
  background: linear-gradient(180deg, rgba(40, 120, 200, 0.85), rgba(15, 60, 140, 0.8));
  border-color: rgba(120, 190, 255, 0.5);
}
#btn-sell:active,
#btn-top:active,
#btn-bottom:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}
#btn-top img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* ---- Shop button ---- */
#shop-btn {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 25;
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 16px;
  font-size: 26px;
  background: linear-gradient(145deg, #ffd76a, #f6a93b);
  color: #7a4d00;
  box-shadow: 0 6px 0 #c98b1f, 0 10px 22px rgba(0, 0, 0, 0.3),
    inset 0 2px 0 rgba(255, 255, 255, 0.5);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.08s, box-shadow 0.08s;
  display: flex;
  align-items: center;
  justify-content: center;
}
#shop-btn:hover {
  filter: brightness(1.06);
}
#shop-btn:active {
  transform: translateY(4px) scale(0.96);
  box-shadow: 0 2px 0 #c98b1f;
}

/* ---- Shop modal ---- */
#overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 10, 25, 0.6);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
#overlay.show {
  opacity: 1;
  pointer-events: auto;
}

#shop {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.88);
  width: min(360px, 90vw);
  background: linear-gradient(180deg, #ffffff, #eef2fb);
  border-radius: 22px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.22s cubic-bezier(0.34, 1.4, 0.64, 1), opacity 0.2s;
  padding: 18px 16px 20px;
  border: 1px solid rgba(255, 255, 255, 0.6);
}
#shop.show {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.shop-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 4px 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  margin-bottom: 14px;
}
.shop-title {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #16223d;
}
.shop-money {
  margin-left: auto;
  font-size: 17px;
  font-weight: 800;
  color: #b8860b;
  background: rgba(246, 185, 59, 0.18);
  padding: 4px 10px;
  border-radius: 14px;
}
#shop-close {
  border: none;
  background: #e4e9f4;
  color: #44506b;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
#shop-close:hover {
  background: #d5dcea;
}
#shop-close:active {
  transform: scale(0.9);
}

.upgrade {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 14px;
  margin-bottom: 10px;
  box-shadow: 0 3px 8px rgba(30, 50, 90, 0.06);
  transition: transform 0.1s, box-shadow 0.15s;
}
.upgrade:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(30, 50, 90, 0.12);
}
.u-icon {
  font-size: 26px;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #f0f5ff, #dce6fb);
  border-radius: 12px;
}
.u-info {
  flex: 1;
}
.u-name {
  font-weight: 800;
  color: #22314f;
  font-size: 15px;
}
.u-desc {
  font-size: 12px;
  color: #7a8499;
}
.u-buy {
  border: none;
  background: linear-gradient(145deg, #3ddc84, #21b466);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  border-radius: 10px;
  padding: 9px 12px;
  cursor: pointer;
  box-shadow: 0 3px 0 #188b4d, inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: transform 0.08s, box-shadow 0.08s, filter 0.15s;
}
.u-buy:hover {
  filter: brightness(1.07);
}
.u-buy:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #188b4d;
}
.u-buy:disabled {
  background: #c3ccdb;
  color: #7c8798;
  box-shadow: 0 2px 0 #a5aeba;
  cursor: not-allowed;
}
.u-level {
  font-size: 12px;
  font-weight: 700;
  color: #5b6a85;
  min-width: 34px;
  text-align: center;
  background: #eef2f9;
  padding: 4px 6px;
  border-radius: 10px;
}

/* ---- Like / Premium ---- */
#like-btn {
  position: fixed;
  left: 5vw;
  bottom: calc(5vh + 5.5rem + 6px);
  z-index: 25;
  border: none;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: #fff;
  background: linear-gradient(135deg, #ff5ac0, #ff8a5c);
  box-shadow: 0 5px 0 rgba(150, 40, 90, 0.5), 0 8px 20px rgba(255, 90, 150, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  padding: 11px 15px;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.08s, box-shadow 0.08s, filter 0.2s;
}
#like-btn:hover {
  filter: brightness(1.06);
}
#like-btn:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 rgba(150, 40, 90, 0.5), 0 3px 8px rgba(255, 90, 150, 0.4);
}

#premium-badge {
  position: fixed;
  right: 5vw;
  bottom: calc(5vh + 5.5rem + 6px);
  z-index: 20;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #fff;
  background: linear-gradient(135deg, rgba(255, 215, 106, 0.9), rgba(255, 170, 60, 0.85));
  border: 1px solid rgba(255, 240, 200, 0.7);
  border-radius: 20px;
  padding: 8px 16px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px) scale(0.9);
  transition: opacity 0.4s, transform 0.4s;
  box-shadow: 0 4px 14px rgba(255, 170, 60, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  text-shadow: 0 1px 2px rgba(120, 70, 0, 0.4);
}
#premium-badge.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ---- Confetti ---- */
#confetti {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 35;
}
.confetti-piece {
  position: absolute;
  top: -20px;
  width: 10px;
  height: 14px;
  border-radius: 2px;
  animation: confetti-fall linear forwards;
}
@keyframes confetti-fall {
  to {
    transform: translate3d(var(--dx), 110vh, 0) rotate(var(--rot));
    opacity: 0;
  }
}

/* ---- Cash machine ---- */
.machine {
  position: absolute;
  background: linear-gradient(160deg, #b7c2d4, #66708a 55%, #444d63 80%, #3b4352);
  border-radius: 12px;
  border: 4px solid #2e3542;
  box-shadow: inset 0 -24px 0 rgba(0, 0, 0, 0.22), 0 5px 0 #222a35, 0 12px 24px rgba(0, 0, 0, 0.4);
}
.machine::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 8px;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(90deg, #2e3542, #5a6579 50%, #2e3542);
}
.machine .screen {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 14px;
  height: 28px;
  background: #061a0a;
  border: 2px solid #1d2c20;
  border-radius: 6px;
  color: #4ef09a;
  font: 700 18px/26px monospace;
  text-align: center;
  text-shadow: 0 0 6px rgba(78, 240, 154, 0.8);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.7);
  animation: screenFlicker 4s infinite;
}
@keyframes screenFlicker {
  0%, 92%, 100% { opacity: 1; }
  93% { opacity: 0.6; }
  94% { opacity: 1; }
  97% { opacity: 0.7; }
  98% { opacity: 1; }
}
.machine .slot {
  position: absolute;
  left: 24px;
  right: 24px;
  top: 64px;
  height: 20px;
  background: linear-gradient(180deg, #05070c, #14181f);
  border-radius: 7px;
  border: 2px solid #1b2029;
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.8);
}
.machine .light {
  position: absolute;
  right: 14px;
  bottom: 12px;
  width: 16px;
  height: 16px;
  background: radial-gradient(circle at 40% 35%, #ffe9a3, #ffd23e 60%, #c98f00);
  border-radius: 50%;
  box-shadow: 0 0 12px #ffd23e, 0 0 24px rgba(255, 210, 62, 0.5);
  animation: blink 1.2s infinite;
}
@keyframes blink {
  50% {
    opacity: 0.3;
  }
}

/* ---- Teleport locked ---- */
#btn-sell.locked {
  opacity: 0.35;
  filter: grayscale(0.7);
  pointer-events: auto;
}

/* ---- Portal ---- */
#portal {
  position: absolute;
  width: 140px;
  height: 190px;
  transform: translate(-50%, -100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
  z-index: 18;
}
#portal.show {
  opacity: 1;
}
#portal-core {
  position: absolute;
  inset: 6% 4%;
  border-radius: 50% 50% 46% 46%;
  background: radial-gradient(circle at 50% 35%, #eaffff, #6fdcff 45%, #7a2fff 80%, #c020ff);
  box-shadow: 0 0 45px #7a2fff, inset 0 0 45px #d8f6ff;
  animation: portalPulse 1.4s ease-in-out infinite;
}
#portal-core::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 3px solid rgba(200, 245, 255, 0.7);
  animation: portalSpin 7s linear infinite;
}
#portal-core::after {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: inherit;
  border: 2px dashed rgba(255, 155, 240, 0.9);
  animation: portalSpin 4s linear infinite reverse;
}
.portal-particle {
  position: absolute;
  bottom: 0;
  width: 5px;
  height: 5px;
  background: #c8f5ff;
  border-radius: 50%;
  box-shadow: 0 0 8px #7ae4ff;
  animation: portalRise linear infinite;
  opacity: 0.9;
}
@keyframes portalPulse {
  50% {
    filter: brightness(1.4);
  }
}
@keyframes portalSpin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes portalRise {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.9;
  }
  100% {
    transform: translateY(-180px) scale(0.3);
    opacity: 0;
  }
}

/* ---- Loading screen ---- */
#loading {
  position: fixed;
  inset: 0;
  z-index: 60;
  background:
    radial-gradient(circle at 50% 40%, rgba(122, 92, 255, 0.18), transparent 60%),
    radial-gradient(circle at 20% 80%, rgba(122, 228, 255, 0.12), transparent 50%),
    linear-gradient(180deg, #05030f, #0d0a24);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s;
}
#loading.show {
  opacity: 1;
  pointer-events: auto;
}
.loader {
  position: relative;
  width: 130px;
  height: 130px;
  filter: drop-shadow(0 0 18px rgba(122, 228, 255, 0.4));
}
.ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 5px solid transparent;
  border-top-color: #7ae4ff;
  border-right-color: #ff6bd6;
  border-bottom-color: rgba(255, 255, 255, 0.08);
  animation: spin 1s linear infinite;
}
.ring.r2 {
  inset: 16px;
  border-top-color: #ffd76a;
  border-right-color: #6fffc2;
  animation: spin 1.4s linear infinite reverse;
}
.loader-core {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 46px;
  animation: spin 3s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.loading-text {
  font-size: 22px;
  font-weight: 800;
  color: #dcc8ff;
  letter-spacing: 2px;
  animation: pulseTxt 1.2s ease-in-out infinite;
}
@keyframes pulseTxt {
  50% {
    opacity: 0.35;
  }
}

/* ---- Mutated fish ---- */
.fish.mutated .fish-label {
  color: #ffd76a;
  background: rgba(60, 0, 90, 0.75);
  border: 1px solid #ff6bd6;
  animation: pulseTxt 1s ease-in-out infinite;
}

/* ---- Moon world ---- */
body.moon {
  background: linear-gradient(#05070f, #141c36 60%, #1f1740);
}
body.moon #aquarium-bg {
  background:
    radial-gradient(circle at 15% 20%, rgba(90, 60, 190, 0.35) 0 6%, transparent 7%),
    radial-gradient(circle at 60% 45%, rgba(90, 60, 190, 0.4) 0 8%, transparent 9%),
    radial-gradient(circle at 85% 15%, rgba(70, 45, 160, 0.35) 0 5%, transparent 6%),
    radial-gradient(circle at 40% 70%, rgba(70, 45, 160, 0.4) 0 7%, transparent 8%),
    radial-gradient(circle at 72% 88%, rgba(90, 60, 190, 0.35) 0 6%, transparent 7%),
    linear-gradient(180deg, #2b1a63, #170b3f 55%, #0e0628);
  box-shadow: inset 0 -40px 60px rgba(0, 0, 0, 0.5);
}
body.moon #water {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.1) 0 2px,
      transparent 2px 90px,
      rgba(255, 255, 255, 0.04) 90px 91px,
      transparent 91px 260px,
      rgba(200, 120, 255, 0.05) 260px 261px,
      transparent 261px 520px,
      rgba(255, 255, 255, 0.03) 520px 521px,
      transparent 521px 900px,
      rgba(200, 120, 255, 0.03) 900px 901px,
      transparent 901px
    ),
    linear-gradient(180deg, #5a2fae, #3b1f78 25%, #241046 50%, #140738 75%, #070318);
}
body.moon #water .seaweed {
  background: linear-gradient(180deg, #9a6ae0, #5c3aa8 55%, #2e1a5e);
}
body.moon #water .ray {
  background: linear-gradient(180deg, rgba(200, 150, 255, 0.3), rgba(200, 150, 255, 0.03) 70%, transparent);
}
body.moon #water .caustic {
  background:
    radial-gradient(circle at 20% 30%, rgba(200, 150, 255, 0.16) 0 7px, transparent 8px),
    radial-gradient(circle at 60% 60%, rgba(200, 150, 255, 0.13) 0 9px, transparent 10px),
    radial-gradient(circle at 80% 20%, rgba(200, 150, 255, 0.16) 0 6px, transparent 7px),
    radial-gradient(circle at 40% 80%, rgba(200, 150, 255, 0.11) 0 8px, transparent 9px);
}
body.moon #tank-frame {
  border-color: #a756ff;
  box-shadow:
    inset 0 0 60px rgba(0, 0, 0, 0.35),
    0 0 0 2px #7a2fff,
    0 6px 24px rgba(0, 0, 0, 0.5);
}
body.moon .tankwall {
  background: linear-gradient(
    90deg,
    rgba(167, 86, 255, 0.55),
    rgba(167, 86, 255, 0.12) 45%,
    rgba(167, 86, 255, 0.35)
  );
  border-color: #a756ff;
}
body.moon #building {
  background:
    repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.2) 0 2px,
      rgba(255, 255, 255, 0.03) 2px 4px,
      transparent 4px 26px
    ),
    linear-gradient(180deg, #2a2e52, #1e2240 40%, #171a33);
}
body.moon #building::before {
  background: linear-gradient(90deg, #3d4370, #5c6494 50%, #3d4370);
}
body.moon #building .interior {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.1)),
    linear-gradient(180deg, #7a70b8, #5c548f 55%, #46407a);
}
body.moon #building .floorline {
  background: linear-gradient(180deg, #8a7fd0 0 3px, #4a4268 3px 8px, #2e2b4e 8px);
  box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.4);
}
body.moon #building .window {
  background: linear-gradient(180deg, #3d2a7a, #1c1240 70%);
  border-color: #2a2250;
  box-shadow: inset 0 0 18px rgba(150, 100, 255, 0.35), 0 2px 6px rgba(0, 0, 0, 0.4);
}
body.moon #building .wall-lintel {
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.18) 0 2px, rgba(255, 255, 255, 0.04) 2px 4px, transparent 4px 22px),
    linear-gradient(180deg, #3a3d6e, #2b2e52);
  border-bottom-color: #23263f;
}
body.moon #building .wallside {
  background: linear-gradient(90deg, #2e3160, #242648);
  border-top-color: #3a3d6e;
}
body.moon .plat {
  background: linear-gradient(180deg, #8a6fae 0 14px, #6f5692 14px 26px, #564877 26px);
  border-top-color: #a78cc8;
  box-shadow: inset 0 30px 20px rgba(255, 255, 255, 0.08), inset 0 -40px 30px rgba(0, 0, 0, 0.2);
}
body.moon .plat::before {
  background: repeating-linear-gradient(
    90deg,
    transparent 0 34px,
    rgba(20, 8, 40, 0.35) 34px 40px,
    transparent 40px 80px
  );
}
body.moon .step {
  background: linear-gradient(180deg, #9a7ec4, #7a5d9e 30%, #634b83 75%, #4f3a6a);
  border-color: #3f2d5a;
  box-shadow:
    inset 0 -22px 0 rgba(0, 0, 0, 0.2),
    inset 0 6px 0 rgba(255, 255, 255, 0.12),
    2px 0 8px rgba(0, 0, 0, 0.3);
}
body.moon .step::after {
  background: repeating-linear-gradient(
    90deg,
    transparent 0 36px,
    rgba(20, 8, 40, 0.4) 36px 42px,
    transparent 42px 72px
  );
}
body.moon .machine {
  background: linear-gradient(160deg, #8a8ac0, #5a5a94 55%, #3d3d68 80%, #2f2f50);
  border-color: #232340;
}
body.moon #shade {
  background: radial-gradient(circle at 50% 45%, rgba(40, 0, 90, 0) 30%, rgba(5, 0, 20, 0.9) 100%);
}