:root {
  --bg-top: #cfe8ff;
  --bg-mid: #7eb4d6;
  --bg-bottom: #1a4a6e;
  --card: rgba(7, 31, 49, 0.86);
  --card-border: rgba(154, 216, 250, 0.25);
  --text: #eaf6ff;
  --muted: #9ec8e1;
  --accent: #55d7ff;
  --accent-strong: #0ba9df;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(1200px 420px at 15% -5%, rgba(255, 255, 255, 0.45), transparent 60%),
    radial-gradient(800px 520px at 95% 0%, rgba(195, 232, 255, 0.35), transparent 70%),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 28%, var(--bg-bottom) 76%, #0d2337 100%);
  display: flex;
  justify-content: center;
  padding: 22px;
}

.game-shell {
  width: min(1080px, 100%);
  display: grid;
  gap: 14px;
}

.hero,
.water-card,
.gear-card,
.upgrades-card,
.species-card,
.log-card,
.stat-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 14px;
}

.hero {
  padding: 16px 18px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.hero h1 {
  margin: 0;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  letter-spacing: 0.02em;
}

.hero p {
  margin: 8px 0 0;
  color: var(--muted);
}

.hero-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.lang-picker {
  display: flex;
  gap: 4px;
}

.lang-button {
  border: 1px solid rgba(165, 225, 255, 0.32);
  border-radius: 7px;
  padding: 6px 10px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  background: rgba(8, 42, 66, 0.6);
  cursor: pointer;
  transition: filter 0.12s ease, border-color 0.12s ease;
}

.lang-button:hover {
  filter: brightness(1.12);
}

.lang-button.active {
  color: var(--text);
  border-color: rgba(119, 232, 255, 0.85);
  background: rgba(15, 118, 168, 0.6);
  box-shadow: 0 0 0 1px rgba(137, 236, 255, 0.16) inset;
}

.hero-button {
  border: 1px solid rgba(165, 225, 255, 0.42);
  border-radius: 9px;
  padding: 9px 12px;
  font-weight: 700;
  color: var(--text);
  background: rgba(15, 118, 168, 0.52);
  cursor: pointer;
}

.hero-button:hover {
  filter: brightness(1.08);
}

.hero-button.danger {
  background: rgba(170, 60, 72, 0.45);
  border-color: rgba(255, 162, 171, 0.36);
}

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

.stat-card {
  padding: 12px;
  display: grid;
  gap: 4px;
}

.stat-card span {
  color: var(--muted);
  font-size: 0.85rem;
}

.stat-card strong {
  font-size: clamp(1rem, 2vw, 1.22rem);
}

.water-card,
.gear-card,
.upgrades-card,
.species-card,
.log-card {
  padding: 16px;
}

.water {
  position: relative;
  border-radius: 12px;
  height: 214px;
  overflow: hidden;
  border: 1px solid rgba(126, 197, 239, 0.45);
  background:
    radial-gradient(circle at 25% 26%, rgba(207, 238, 255, 0.31), transparent 24%),
    radial-gradient(circle at 78% 35%, rgba(173, 224, 255, 0.21), transparent 33%),
    radial-gradient(circle at 46% 82%, rgba(51, 111, 158, 0.35), transparent 48%),
    repeating-linear-gradient(
      -20deg,
      rgba(90, 184, 242, 0.1),
      rgba(90, 184, 242, 0.1) 11px,
      rgba(24, 81, 128, 0.12) 11px,
      rgba(24, 81, 128, 0.12) 19px
    ),
    linear-gradient(180deg, #2a86b7 0%, #1c638f 42%, #103553 100%);
}

.water::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.36;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent),
    repeating-linear-gradient(
      84deg,
      transparent 0 32px,
      rgba(230, 246, 255, 0.08) 32px 37px
    );
}

.water.world-level-2 {
  border-color: rgba(116, 213, 255, 0.62);
  background:
    radial-gradient(circle at 20% 18%, rgba(223, 248, 255, 0.34), transparent 28%),
    radial-gradient(circle at 85% 22%, rgba(184, 234, 255, 0.28), transparent 36%),
    radial-gradient(circle at 50% 86%, rgba(19, 82, 125, 0.42), transparent 48%),
    repeating-linear-gradient(
      -18deg,
      rgba(124, 208, 250, 0.12),
      rgba(124, 208, 250, 0.12) 12px,
      rgba(32, 94, 139, 0.14) 12px,
      rgba(32, 94, 139, 0.14) 22px
    ),
    linear-gradient(180deg, #3498cb 0%, #1e6c9d 43%, #0f3959 100%);
}

.water.world-level-2::before {
  opacity: 0.45;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(214, 241, 255, 0.03)),
    repeating-linear-gradient(
      82deg,
      transparent 0 28px,
      rgba(233, 250, 255, 0.1) 28px 34px
    );
}

.water.world-level-2 .harbor {
  opacity: 0.52;
}

.water.world-level-2 .fish {
  filter: saturate(1.16) brightness(1.04);
}

.water.world-level-3 {
  border-color: rgba(134, 174, 255, 0.56);
  background:
    radial-gradient(circle at 18% 16%, rgba(196, 210, 255, 0.24), transparent 30%),
    radial-gradient(circle at 86% 28%, rgba(109, 131, 217, 0.26), transparent 38%),
    radial-gradient(circle at 52% 92%, rgba(6, 26, 51, 0.64), transparent 56%),
    repeating-linear-gradient(
      -16deg,
      rgba(73, 93, 170, 0.13),
      rgba(73, 93, 170, 0.13) 14px,
      rgba(16, 36, 79, 0.16) 14px,
      rgba(16, 36, 79, 0.16) 24px
    ),
    linear-gradient(180deg, #2c4978 0%, #1a2f56 40%, #08162d 100%);
}

.water.world-level-3::before {
  opacity: 0.52;
  background:
    linear-gradient(180deg, rgba(232, 238, 255, 0.16), rgba(20, 40, 93, 0.06)),
    repeating-linear-gradient(
      79deg,
      transparent 0 30px,
      rgba(201, 220, 255, 0.08) 30px 36px
    );
}

.water.world-level-3 .harbor {
  opacity: 0.24;
  filter: saturate(0.72);
}

.water.world-level-3 .fish {
  filter: saturate(1.3) brightness(0.88) hue-rotate(14deg);
}

.water.world-level-3 .fish-layer {
  opacity: 0.92;
}

.water.world-level-2 .fisher-auto,
.water.world-level-2 .rod-auto {
  filter: brightness(1.05);
}

.water.world-level-3 .fisher-auto,
.water.world-level-3 .rod-auto {
  filter: saturate(1.14) brightness(0.94);
}

.water.is-fishing {
  box-shadow: inset 0 0 24px rgba(129, 226, 255, 0.34);
}

.water.is-fishing::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 14;
  background: linear-gradient(90deg, transparent, rgba(129, 227, 255, 0.22), transparent);
  animation: waterPulse 1.1s linear infinite;
}

.harbor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

.harbor-edge {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 42px;
  background:
    repeating-linear-gradient(
      90deg,
      #6e5a48 0 18px,
      #644f3f 18px 36px
    ),
    linear-gradient(180deg, #6c5a48, #4a3a2f);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

.pier {
  position: absolute;
  left: 8%;
  top: 22px;
  width: 50%;
  height: 20px;
  border-radius: 2px;
  background: repeating-linear-gradient(
    90deg,
    #85654c 0 13px,
    #795b44 13px 26px
  );
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.24);
}

.pier-post {
  position: absolute;
  width: 10px;
  height: 28px;
  top: 40px;
  border-radius: 2px;
  background: linear-gradient(180deg, #684d3a, #4a382d);
}

.post-1 {
  left: 13%;
}

.post-2 {
  left: 30%;
}

.post-3 {
  left: 49%;
}

.fisher {
  position: absolute;
  left: 40%;
  top: 0px;
  width: 34px;
  height: 50px;
  z-index: 12;
}

.fisher-hat {
  position: absolute;
  top: 0;
  left: 4px;
  width: 20px;
  height: 9px;
  background: linear-gradient(180deg, #3a5a3a, #2d4a2d);
  border-radius: 50% 50% 10% 10%;
  z-index: 2;
}

.fisher-hat::before {
  content: "";
  position: absolute;
  bottom: -2px;
  left: -4px;
  width: 28px;
  height: 4px;
  background: #2d4a2d;
  border-radius: 999px;
}

.fisher-head {
  position: relative;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #f2dcc8, #d4b89a);
  margin-left: 7px;
  margin-top: 5px;
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.12);
  z-index: 1;
}

.fisher-body {
  position: relative;
  width: 18px;
  height: 20px;
  margin-left: 6px;
  margin-top: 1px;
  border-radius: 5px 5px 2px 2px;
  background: linear-gradient(180deg, #264f74, #1d3750);
  box-shadow: inset -2px 0 4px rgba(0, 0, 0, 0.15);
}

.fisher-arm {
  position: absolute;
  top: 24px;
  left: 18px;
  width: 18px;
  height: 4px;
  background: linear-gradient(90deg, #264f74, #d4b89a);
  border-radius: 3px;
  transform: rotate(-16deg);
  transform-origin: left center;
}

.fisher-legs {
  width: 16px;
  height: 8px;
  margin-left: 7px;
  border-radius: 0 0 2px 2px;
  background: linear-gradient(180deg, #3a3a4a, #2a2a38);
}

.fisher-legs::before {
  content: "";
  display: block;
  width: 5px;
  height: 4px;
  margin-top: 8px;
  background: #4a3a2f;
  border-radius: 2px;
  box-shadow: 8px 0 0 0 #4a3a2f;
}

.fisher-auto {
  left: 68%;
  top: 1px;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.fisher-auto .fisher-body {
  background: linear-gradient(180deg, #3f5368, #283a4d);
}

.fisher-auto .fisher-hat {
  background: linear-gradient(180deg, #5a3a3a, #4a2d2d);
}

.fisher-auto .fisher-hat::before {
  background: #4a2d2d;
}

.fisher-auto .fisher-arm {
  background: linear-gradient(90deg, #3f5368, #d4b89a);
}

.rod {
  position: absolute;
  left: 41.4%;
  top: 23px;
  width: 31%;
  height: 72px;
  z-index: 13;
  pointer-events: none;
}

.rod-stick {
  position: absolute;
  left: 0;
  top: 18px;
  width: 100%;
  height: 3px;
  transform: rotate(-19deg);
  transform-origin: left center;
  border-radius: 999px;
  background: linear-gradient(90deg, #ad8358 0%, #d8af72 55%, #ffdf9f 100%);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.34);
}

.rod-tip {
  position: absolute;
  left: 93%;
  top: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f4faff;
  box-shadow: 0 0 0 1px rgba(7, 45, 74, 0.34);
}

.rod-reel {
  position: absolute;
  left: 10px;
  top: 20px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(217, 239, 255, 0.8);
  background: radial-gradient(circle at 40% 35%, #a8e8ff, #4b86b0);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.32);
}

.rod-auto {
  left: 67%;
  top: 24px;
  width: 22%;
  height: 66px;
  opacity: 0;
  transform: scaleX(-1) rotate(1.5deg);
  transform-origin: right top;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.rod-auto .rod-stick {
  top: 17px;
  transform: rotate(-14deg);
}

.rod-auto .rod-tip {
  left: 8%;
  top: 4px;
}

.rod-auto .rod-reel {
  left: auto;
  right: 8px;
  top: 18px;
}

.fish-layer {
  position: absolute;
  inset: 44px 0 0;
  z-index: 4;
  pointer-events: none;
}

/* ── In-game fish (child element structure) ── */
.fish {
  position: absolute;
  left: -18%;
  opacity: 0.95;
}


.gf-body {
  width: 38px;
  height: 18px;
  border-radius: 50% 44% 44% 50%;
  position: relative;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
}

/* Tail — behind the body (left side for right-facing fish) */
.gf-tail {
  position: absolute;
  left: -8px;
  top: 4px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 10px solid;
  border-right-color: inherit;
}

/* Eye — front of the body (right side for right-facing fish) */
.gf-eye {
  position: absolute;
  right: 7px;
  top: 6px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(10, 25, 40, 0.85);
  box-shadow: inset 1px -1px 0 rgba(255, 255, 255, 0.35);
}

/* Dorsal fin — top */
.gf-dorsal {
  position: absolute;
  right: 14px;
  top: -3px;
  width: 10px;
  height: 5px;
  border-radius: 50% 50% 0 0;
  opacity: 0.6;
}

/* Pectoral fin — bottom */
.gf-fin {
  position: absolute;
  right: 14px;
  top: 15px;
  width: 8px;
  height: 4px;
  border-radius: 0 0 50% 50%;
  opacity: 0.5;
}

/* ── Fish species ── */
.fish-1 {
  top: 30%;
  animation: swimRight 12s linear infinite;
}
.fish-1 .gf-body { background: linear-gradient(180deg, #c4d6e4, #7b9db3); }
.fish-1 .gf-tail { border-right-color: #96b5c8; }
.fish-1 .gf-dorsal { background: rgba(123, 157, 179, 0.6); }
.fish-1 .gf-fin { background: rgba(123, 157, 179, 0.45); }

.fish-2 {
  top: 58%;
  animation: swimLeft 16s linear infinite -3s;
}
.fish-2 .gf-body { width: 34px; height: 16px; background: linear-gradient(180deg, #b4d4a8, #6c9974); }
.fish-2 .gf-tail { border-right-color: #88b87a; top: 3px; }
.fish-2 .gf-eye { right: 6px; top: 5px; width: 3px; height: 3px; }
.fish-2 .gf-dorsal { background: rgba(108, 153, 116, 0.55); right: 12px; top: -2px; width: 8px; height: 4px; }
.fish-2 .gf-fin { background: rgba(108, 153, 116, 0.4); right: 12px; top: 13px; }

.fish-3 {
  top: 72%;
  animation: swimRight 19s linear infinite -6s;
}
.fish-3 .gf-body { width: 44px; height: 20px; background: linear-gradient(180deg, #c8b8a0, #8a7a69); }
.fish-3 .gf-tail { border-right-color: #a89880; top: 5px; border-top-width: 6px; border-bottom-width: 6px; border-right-width: 11px; left: -10px; }
.fish-3 .gf-eye { right: 8px; top: 7px; width: 4px; height: 4px; }
.fish-3 .gf-dorsal { background: rgba(138, 122, 105, 0.5); right: 16px; top: -3px; width: 12px; height: 5px; }
.fish-3 .gf-fin { background: rgba(138, 122, 105, 0.4); right: 16px; top: 17px; width: 9px; }

.fish-4 {
  top: 44%;
  animation: swimLeft 11s linear infinite -7s;
}
.fish-4 .gf-body { width: 28px; height: 13px; background: linear-gradient(180deg, #d0d8e0, #7a8e9a); }
.fish-4 .gf-tail { border-right-color: #a0b0bc; top: 2px; border-top-width: 4px; border-bottom-width: 4px; border-right-width: 8px; left: -7px; }
.fish-4 .gf-eye { right: 5px; top: 4px; width: 3px; height: 3px; }
.fish-4 .gf-dorsal { background: rgba(122, 142, 154, 0.5); right: 10px; top: -2px; width: 7px; height: 3px; }
.fish-4 .gf-fin { background: rgba(122, 142, 154, 0.35); right: 10px; top: 11px; width: 6px; height: 3px; }

.fish-5 {
  top: 18%;
  animation: swimRight 15s linear infinite -9s;
}
.fish-5 .gf-body { width: 35px; height: 16px; background: linear-gradient(180deg, #dce0d4, #8ca497); }
.fish-5 .gf-tail { border-right-color: #a8bca8; top: 3px; }
.fish-5 .gf-eye { right: 6px; top: 5px; width: 3px; height: 3px; }
.fish-5 .gf-dorsal { background: rgba(140, 164, 151, 0.5); right: 12px; top: -2px; width: 9px; height: 4px; }
.fish-5 .gf-fin { background: rgba(140, 164, 151, 0.4); right: 12px; top: 13px; }

.fish-6 {
  top: 84%;
  animation: swimLeft 17s linear infinite -12s;
}
.fish-6 .gf-body { width: 31px; height: 14px; background: linear-gradient(180deg, #ccc8d6, #8b8795); }
.fish-6 .gf-tail { border-right-color: #a8a4b4; top: 3px; border-top-width: 4px; border-bottom-width: 4px; border-right-width: 8px; left: -7px; }
.fish-6 .gf-eye { right: 6px; top: 4px; width: 3px; height: 3px; }
.fish-6 .gf-dorsal { background: rgba(139, 135, 149, 0.5); right: 11px; top: -2px; width: 8px; height: 4px; }
.fish-6 .gf-fin { background: rgba(139, 135, 149, 0.35); right: 11px; top: 12px; width: 6px; height: 3px; }

.cast-line {
  position: absolute;
  top: 6px;
  left: 71%;
  width: 2px;
  height: 80px;
  z-index: 8;
  transform-origin: top center;
  background: linear-gradient(180deg, rgba(249, 254, 255, 0.92), rgba(223, 243, 255, 0.7));
  opacity: 0.96;
  transition: transform 0.2s ease, opacity 0.2s ease, height 0.2s ease, top 0.2s ease;
}

.water.is-fishing .cast-line:not(.auto-cast-line) {
  opacity: 1;
}

.auto-cast-line {
  left: 69%;
  top: 10px;
  height: 34px;
  opacity: 0;
  background: linear-gradient(180deg, rgba(255, 251, 232, 0.92), rgba(248, 220, 147, 0.74));
  transition: transform 0.16s ease, opacity 0.25s ease, height 0.16s ease, top 0.16s ease;
}

.bobber {
  position: absolute;
  width: 16px;
  height: 16px;
  left: calc(71% - 2px);
  top: 92px;
  z-index: 9;
  border-radius: 50%;
  border: 2px solid rgba(251, 255, 255, 0.92);
  background:
    radial-gradient(circle at 36% 22%, #ffffff 0 20%, transparent 20%),
    linear-gradient(180deg, #f4f6f9 0 48%, #cf3d2f 48% 100%);
  box-shadow:
    0 0 0 2px rgba(8, 44, 71, 0.2),
    0 4px 10px rgba(0, 0, 0, 0.24);
}

.bobber::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 13px;
  width: 6px;
  height: 8px;
  border: 1px solid rgba(239, 248, 255, 0.95);
  border-top: 0;
  border-left: 0;
  border-radius: 0 0 7px 0;
  transform: rotate(28deg);
}

.water.is-fishing .bobber:not(.auto-bobber) {
  animation: bob 0.82s ease-in-out infinite;
}

.auto-bobber {
  width: 14px;
  height: 14px;
  left: calc(69% - 2px);
  top: 74px;
  opacity: 0;
  border-color: rgba(255, 250, 233, 0.94);
  background:
    radial-gradient(circle at 34% 21%, #ffffff 0 20%, transparent 20%),
    linear-gradient(180deg, #f9f7f0 0 50%, #d89e45 50% 100%);
  transition: opacity 0.25s ease, transform 0.15s ease, box-shadow 0.22s ease;
}

.auto-bobber::after {
  left: 3px;
  top: 11px;
  width: 5px;
  height: 7px;
}

.water.auto-ready .fisher-auto,
.water.auto-ready .rod-auto,
.water.auto-ready .auto-cast-line,
.water.auto-ready .auto-bobber {
  opacity: 1;
}

.water.auto-ready .fisher-auto {
  transform: translateY(0);
}

.water.auto-fishing .fisher-auto {
  animation: autoFisherNod 1.6s ease-in-out infinite;
}

.water.auto-fishing .auto-bobber {
  animation: bobAuto 0.94s ease-in-out infinite;
}

.water.auto-catch .auto-bobber {
  box-shadow:
    0 0 0 2px rgba(254, 227, 136, 0.35),
    0 0 14px rgba(255, 224, 122, 0.66),
    0 5px 10px rgba(0, 0, 0, 0.26);
}

@keyframes bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

@keyframes bobAuto {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

@keyframes waterPulse {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}

@keyframes autoFisherNod {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-1px);
  }
}

@keyframes swimRight {
  0% {
    left: -16%;
    transform: translateY(0);
  }
  25% {
    transform: translateY(-3px);
  }
  50% {
    transform: translateY(3px);
  }
  75% {
    transform: translateY(-2px);
  }
  100% {
    left: 112%;
    transform: translateY(0);
  }
}

@keyframes swimLeft {
  0% {
    left: 112%;
    transform: scaleX(-1) translateY(0);
  }
  25% {
    transform: scaleX(-1) translateY(-3px);
  }
  50% {
    transform: scaleX(-1) translateY(3px);
  }
  75% {
    transform: scaleX(-1) translateY(-2px);
  }
  100% {
    left: -16%;
    transform: scaleX(-1) translateY(0);
  }
}

.fishing-readout {
  display: grid;
  grid-template-columns: auto auto auto 1fr;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}

.mode-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(170, 231, 255, 0.3);
  padding: 5px 10px;
  font-size: 0.82rem;
  font-weight: 700;
}

.mode-pill.idle {
  background: rgba(74, 138, 177, 0.42);
}

.mode-pill.fishing {
  background: rgba(40, 170, 124, 0.45);
  border-color: rgba(132, 241, 195, 0.36);
}

.mode-pill.cooldown {
  background: rgba(195, 133, 64, 0.42);
  border-color: rgba(255, 213, 140, 0.37);
}

.fishing-readout span {
  color: var(--muted);
  font-size: 0.88rem;
}

.world-level-picker {
  margin-top: 10px;
  display: grid;
  gap: 8px;
}

.world-level-picker > span {
  color: var(--muted);
  font-size: 0.84rem;
  letter-spacing: 0.01em;
}

.world-level-buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.level-switch-button {
  border: 1px solid rgba(143, 223, 255, 0.32);
  border-radius: 10px;
  padding: 8px 10px;
  color: #def4ff;
  font-size: 0.84rem;
  font-weight: 700;
  text-align: center;
  background: rgba(8, 52, 83, 0.68);
  cursor: pointer;
  transition: filter 0.12s ease, border-color 0.12s ease;
}

.level-switch-button:hover:enabled {
  filter: brightness(1.08);
}

.level-switch-button.active {
  border-color: rgba(119, 232, 255, 0.9);
  background: linear-gradient(180deg, rgba(72, 191, 235, 0.56), rgba(17, 102, 148, 0.72));
  box-shadow: 0 0 0 1px rgba(137, 236, 255, 0.16) inset;
}

.level-switch-button.locked {
  border-color: rgba(131, 171, 198, 0.3);
  color: #94b5cb;
  background: rgba(16, 37, 56, 0.68);
}

.level-switch-button:disabled {
  opacity: 0.66;
  cursor: not-allowed;
}

.status-text {
  margin: 12px 0 10px;
  color: var(--muted);
  min-height: 1.2em;
}

.progress-wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

.progress-track {
  width: 100%;
  height: 16px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(142, 221, 255, 0.32);
}

.progress-fill {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #a9f2ff 0%, #3ccffc 55%, #089dce 100%);
  transition: width 0.08s linear;
}

.hold-button {
  margin-top: 12px;
  width: 100%;
  border: 0;
  border-radius: 12px;
  padding: 14px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #072337;
  background: linear-gradient(180deg, #7ae8ff, #2bc5f5);
  cursor: pointer;
  touch-action: none;
  transition: transform 0.12s ease, filter 0.12s ease;
}

.hold-button:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.hold-button:active,
.hold-button.holding {
  transform: translateY(1px) scale(0.996);
  filter: brightness(0.95);
}

.hold-button.secondary {
  margin-top: 8px;
  padding: 11px;
  font-size: 0.95rem;
  color: #d9f4ff;
  background: linear-gradient(180deg, #2a6f95, #1b4c69);
}

.hold-button.secondary:hover:enabled {
  filter: brightness(1.09);
}

.hold-button:disabled {
  opacity: 0.58;
  cursor: not-allowed;
  transform: none;
  filter: none;
}

.gear-card h2,
.upgrades-card h2,
.species-card h2,
.log-card h2 {
  margin-top: 0;
  margin-bottom: 12px;
}

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

.gear-button {
  border: 1px solid rgba(145, 222, 255, 0.33);
  border-radius: 10px;
  padding: 10px;
  text-align: left;
  color: var(--text);
  background: rgba(8, 54, 87, 0.56);
  cursor: pointer;
}

.gear-button strong {
  display: block;
  font-size: 0.95rem;
}

.gear-button span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.83rem;
}

.gear-button.active {
  border-color: rgba(118, 230, 255, 0.85);
  box-shadow: 0 0 0 2px rgba(109, 224, 255, 0.2) inset;
}

.gear-button:disabled {
  opacity: 0.54;
  cursor: not-allowed;
}

.active-gear {
  margin: 10px 0 0;
  color: #bfeaff;
}

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

.upgrade-box {
  border: 1px solid rgba(149, 225, 255, 0.26);
  border-radius: 12px;
  padding: 12px;
  background: rgba(4, 24, 43, 0.5);
}

.upgrade-box h3 {
  margin: 0;
}

.upgrade-box p {
  margin: 8px 0;
  color: var(--muted);
}

.upgrade-level {
  margin: 8px 0;
  font-size: 0.92rem;
}

.upgrade-effect {
  color: #bfeeff;
  min-height: 1.2em;
  font-size: 0.88rem;
}

.upgrade-button {
  width: 100%;
  border: 1px solid rgba(143, 226, 255, 0.25);
  border-radius: 9px;
  padding: 10px;
  font-weight: 700;
  color: var(--text);
  background: rgba(26, 137, 188, 0.5);
  cursor: pointer;
}

.upgrade-button:hover:enabled {
  filter: brightness(1.08);
}

.upgrade-button:disabled {
  cursor: not-allowed;
  opacity: 0.56;
}

.species-list,
.catch-log {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.species-list li,
.catch-log li {
  border-radius: 9px;
  padding: 8px 10px;
  background: rgba(4, 24, 43, 0.5);
  border: 1px solid rgba(145, 212, 255, 0.2);
}

.species-row {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
  flex-wrap: wrap;
}

.species-name {
  font-weight: 700;
}

.species-meta {
  font-size: 0.84rem;
  color: var(--muted);
}

.species-undiscovered .species-name {
  color: #aac4d7;
}

.species-locked {
  opacity: 0.66;
}

.tier-tag {
  border-radius: 999px;
  font-size: 0.72rem;
  padding: 2px 8px;
  border: 1px solid rgba(164, 224, 255, 0.3);
  color: #dbf4ff;
}

.tier-common {
  border-left: 4px solid #9ad4ff;
}

.tier-uncommon {
  border-left: 4px solid #89ffa9;
}

.tier-rare {
  border-left: 4px solid #ffd96f;
}

.tier-epic {
  border-left: 4px solid #ff8f69;
}

.tier-legendary {
  border-left: 4px solid #ff55aa;
}

.tier-mythic {
  border-left: 4px solid #b16cff;
}

/* ── Hidden utility ── */
.secret-coin-btn {
  display: block;
  margin: 10px auto 0;
  padding: 6px 18px;
  font-size: 0.82rem;
  color: rgba(255, 120, 120, 0.5);
  background: rgba(180, 40, 40, 0.15);
  border: 1px solid rgba(255, 80, 80, 0.2);
  border-radius: 8px;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.2s;
}

.secret-coin-btn:hover {
  opacity: 1;
  background: rgba(180, 40, 40, 0.3);
  border-color: rgba(255, 80, 80, 0.45);
}

.hidden {
  display: none !important;
}

/* ── Loading Screen ── */
.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #0a1e33 0%, #0d3252 35%, #134a6e 65%, #1a5c85 100%);
  overflow: hidden;
}

.loading-ocean {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.loading-wave {
  position: absolute;
  width: 200%;
  height: 120px;
  bottom: 0;
  left: -50%;
  border-radius: 45% 48% 0 0;
  opacity: 0.3;
}

.wave-1 {
  background: rgba(85, 215, 255, 0.25);
  bottom: -10px;
  animation: waveFloat 6s ease-in-out infinite;
}

.wave-2 {
  background: rgba(55, 185, 235, 0.2);
  bottom: -30px;
  animation: waveFloat 8s ease-in-out infinite -2s;
}

.wave-3 {
  background: rgba(30, 140, 200, 0.18);
  bottom: -50px;
  animation: waveFloat 10s ease-in-out infinite -4s;
}

@keyframes waveFloat {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  25% { transform: translateX(2%) rotate(0.5deg); }
  50% { transform: translateX(-1.5%) rotate(-0.3deg); }
  75% { transform: translateX(1%) rotate(0.2deg); }
}

/* ── Light rays ── */
.light-ray {
  position: absolute;
  top: 0;
  width: 60px;
  height: 100%;
  background: linear-gradient(180deg, rgba(180, 230, 255, 0.12), transparent 70%);
  transform: skewX(-12deg);
  opacity: 0;
  animation: rayPulse 6s ease-in-out infinite;
}

.ray-1 { left: 20%; animation-delay: 0s; }
.ray-2 { left: 48%; width: 40px; animation-delay: 2s; }
.ray-3 { left: 72%; width: 50px; animation-delay: 4s; }

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

/* ── Bubbles ── */
.bubble {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(200, 240, 255, 0.5), rgba(120, 200, 240, 0.15));
  border: 1px solid rgba(200, 240, 255, 0.2);
  animation: bubbleRise linear infinite;
  z-index: 3;
}

.bubble-1 { width: 8px; height: 8px; left: 46%; bottom: -10px; animation-duration: 5s; }
.bubble-2 { width: 5px; height: 5px; left: 49%; bottom: -10px; animation-duration: 4s; animation-delay: 1.2s; }
.bubble-3 { width: 6px; height: 6px; left: 52%; bottom: -10px; animation-duration: 6s; animation-delay: 0.6s; }
.bubble-4 { width: 4px; height: 4px; left: 44%; bottom: -10px; animation-duration: 5.5s; animation-delay: 2.5s; }
.bubble-5 { width: 7px; height: 7px; left: 51%; bottom: -10px; animation-duration: 4.5s; animation-delay: 3.8s; }

@keyframes bubbleRise {
  from { transform: translateY(0) scale(1); opacity: 0.6; }
  50% { opacity: 0.4; }
  to { transform: translateY(-50vh) scale(0.4); opacity: 0; }
}

/* ── Fishing scene ── */
.scene-wrap {
  position: absolute;
  left: 50%;
  top: 16%;
  transform: translateX(-50%);
  width: 200px;
  height: 260px;
  z-index: 5;
}

.scene-pier {
  position: absolute;
  left: 10px;
  top: 80px;
  width: 90px;
  height: 14px;
  background:
    repeating-linear-gradient(90deg, #7a6350 0 10px, #6b5545 10px 20px);
  border-radius: 2px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
}

.scene-pier::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 14px;
  width: 8px;
  height: 20px;
  background: linear-gradient(180deg, #6b5545, #4a3a2f);
  border-radius: 0 0 2px 2px;
  box-shadow: 40px 0 0 0 #5a4a3f, 56px -2px 0 0 #5a4a3f;
}

.scene-fisher {
  position: absolute;
  left: 48px;
  top: 32px;
  z-index: 6;
}

.sf-head {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #f2dcc8, #d4b89a);
  margin-left: 2px;
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.15);
}

.sf-hat {
  position: absolute;
  top: -6px;
  left: -2px;
  width: 22px;
  height: 10px;
  background: linear-gradient(180deg, #3a5a3a, #2d4a2d);
  border-radius: 50% 50% 10% 10%;
  box-shadow: 0 2px 0 0 #2d4a2d;
}

.sf-hat::before {
  content: "";
  position: absolute;
  bottom: -2px;
  left: -4px;
  width: 30px;
  height: 4px;
  background: #2d4a2d;
  border-radius: 999px;
}

.sf-body {
  width: 18px;
  height: 28px;
  margin-top: 2px;
  margin-left: 1px;
  border-radius: 6px 6px 3px 3px;
  background: linear-gradient(180deg, #2a5478, #1d3a55);
  box-shadow: inset -2px 0 4px rgba(0, 0, 0, 0.2);
}

.sf-arm {
  position: absolute;
  top: 22px;
  left: 14px;
  width: 28px;
  height: 5px;
  background: linear-gradient(90deg, #2a5478, #d4b89a);
  border-radius: 3px;
  transform: rotate(-22deg);
  transform-origin: left center;
}

.sf-legs {
  width: 16px;
  height: 12px;
  margin-left: 2px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(180deg, #3a3a4a, #2a2a38);
}

.sf-legs::before {
  content: "";
  display: block;
  width: 6px;
  height: 5px;
  margin-top: 12px;
  margin-left: -1px;
  background: #4a3a2f;
  border-radius: 2px;
  box-shadow: 9px 0 0 0 #4a3a2f;
}

.scene-rod {
  position: absolute;
  left: 78px;
  top: 38px;
  width: 100px;
  height: 3px;
  background: linear-gradient(90deg, #ad8358 0%, #d8af72 40%, #f0d48a 80%, #ffe8a8 100%);
  border-radius: 999px;
  transform: rotate(-18deg);
  transform-origin: left center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  z-index: 7;
}

.scene-rod::before {
  content: "";
  position: absolute;
  right: -2px;
  top: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f8f8ff, #b0c4de);
}

.scene-line {
  position: absolute;
  left: 163px;
  top: 18px;
  width: 1.5px;
  height: 110px;
  background: linear-gradient(180deg, rgba(220, 240, 255, 0.7), rgba(180, 220, 255, 0.35));
  z-index: 4;
  transform-origin: top center;
  animation: lineSwing 4s ease-in-out infinite;
}

@keyframes lineSwing {
  0%, 100% { transform: rotate(-1.5deg); }
  50% { transform: rotate(1.5deg); }
}

.scene-bobber {
  position: absolute;
  left: 154px;
  top: 126px;
  width: 18px;
  height: 32px;
  z-index: 8;
  animation: bobberFloat 2.4s ease-in-out infinite;
}

.bobber-top {
  width: 4px;
  height: 10px;
  margin: 0 auto;
  background: linear-gradient(180deg, #ff4444, #cc2222);
  border-radius: 2px 2px 0 0;
  box-shadow: 0 0 4px rgba(255, 80, 60, 0.4);
}

.bobber-bottom {
  width: 14px;
  height: 16px;
  margin: 0 auto;
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.4), transparent 50%),
    linear-gradient(180deg, #f0f2f5 0 45%, #e63030 45% 100%);
  border-radius: 40% 40% 50% 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  box-shadow:
    0 0 8px rgba(255, 100, 80, 0.2),
    0 3px 8px rgba(0, 0, 0, 0.35);
}

.bobber-hook {
  width: 6px;
  height: 8px;
  margin: 0 auto;
  border: 1.5px solid rgba(200, 220, 240, 0.5);
  border-top: 0;
  border-right: 0;
  border-radius: 0 0 0 6px;
  transform: translateX(2px);
}

@keyframes bobberFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  20% { transform: translateY(-6px) rotate(-1deg); }
  50% { transform: translateY(3px) rotate(0.5deg); }
  75% { transform: translateY(-2px) rotate(-0.5deg); }
}

/* ── Ripples around bobber ── */
.scene-ripple {
  position: absolute;
  border: 1px solid rgba(180, 230, 255, 0.3);
  border-radius: 50%;
  z-index: 7;
  animation: rippleExpand 3s ease-out infinite;
}

.ripple-1 {
  left: 148px;
  top: 152px;
  width: 30px;
  height: 8px;
}

.ripple-2 {
  left: 148px;
  top: 152px;
  width: 30px;
  height: 8px;
  animation-delay: 1.5s;
}

@keyframes rippleExpand {
  0% { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(3.5, 2); opacity: 0; }
}

/* ── Water surface line ── */
.water-surface {
  position: absolute;
  left: 0;
  top: 42%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg,
    transparent,
    rgba(160, 220, 255, 0.15) 20%,
    rgba(180, 240, 255, 0.25) 50%,
    rgba(160, 220, 255, 0.15) 80%,
    transparent
  );
  z-index: 4;
  animation: surfaceShimmer 4s ease-in-out infinite;
}

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

/* ── Fish (swimming RIGHT → facing RIGHT) ── */
.loading-fish-swim {
  position: absolute;
  z-index: 3;
  animation: loadFishSwim linear infinite;
}

.lf-body {
  width: 42px;
  height: 18px;
  border-radius: 50% 46% 46% 50%;
  position: relative;
}

.lf-tail {
  position: absolute;
  left: -10px;
  top: 3px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 12px solid;
  border-right-color: inherit;
}

.lf-eye {
  position: absolute;
  right: 8px;
  top: 6px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(10, 25, 40, 0.85);
  box-shadow: inset 1px -1px 0 rgba(255, 255, 255, 0.3);
}

.lf-fin {
  position: absolute;
  right: 16px;
  top: 14px;
  width: 8px;
  height: 4px;
  border-radius: 0 0 60% 40%;
  opacity: 0.5;
}

.fish-swim-1 {
  top: 58%;
}

.fish-swim-1 .lf-body {
  background: linear-gradient(180deg, #7ec8e8, #4a9fc4);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.fish-swim-1 .lf-tail { border-right-color: #5ab0d0; }
.fish-swim-1 .lf-fin { background: rgba(90, 176, 208, 0.5); }
.fish-swim-1 { animation-duration: 9s; }

.fish-swim-2 {
  top: 72%;
}

.fish-swim-2 .lf-body {
  width: 34px;
  height: 15px;
  background: linear-gradient(180deg, #b8d4a0, #6ea860);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.18);
}

.fish-swim-2 .lf-tail { border-right-color: #82b86a; top: 2px; border-top-width: 6px; border-bottom-width: 6px; border-right-width: 10px; }
.fish-swim-2 .lf-eye { right: 6px; top: 5px; width: 3px; height: 3px; }
.fish-swim-2 .lf-fin { background: rgba(100, 160, 80, 0.4); right: 12px; top: 12px; }
.fish-swim-2 { animation-duration: 13s; animation-delay: -4s; }

.fish-swim-3 {
  top: 82%;
}

.fish-swim-3 .lf-body {
  width: 50px;
  height: 22px;
  background: linear-gradient(180deg, #d4c0a8, #a08868);
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.22);
}

.fish-swim-3 .lf-tail { border-right-color: #b8a080; top: 4px; border-top-width: 8px; border-bottom-width: 8px; border-right-width: 14px; left: -13px; }
.fish-swim-3 .lf-eye { right: 10px; top: 7px; width: 5px; height: 5px; }
.fish-swim-3 .lf-fin { background: rgba(160, 136, 104, 0.4); right: 20px; top: 17px; width: 10px; height: 5px; }
.fish-swim-3 { animation-duration: 11s; animation-delay: -7s; }

@keyframes loadFishSwim {
  0% { left: -8%; transform: translateY(0); }
  15% { transform: translateY(-5px); }
  35% { transform: translateY(4px); }
  55% { transform: translateY(-3px); }
  75% { transform: translateY(5px); }
  90% { transform: translateY(-2px); }
  100% { left: 108%; transform: translateY(0); }
}

.loading-title {
  position: relative;
  z-index: 10;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  color: #eaf6ff;
  text-shadow:
    0 0 30px rgba(85, 215, 255, 0.5),
    0 0 60px rgba(85, 215, 255, 0.2),
    0 2px 4px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.06em;
  margin: 0 0 32px;
  animation: titlePulse 3s ease-in-out infinite;
}

@keyframes titlePulse {
  0%, 100% { text-shadow: 0 0 30px rgba(85, 215, 255, 0.5), 0 0 60px rgba(85, 215, 255, 0.2), 0 2px 4px rgba(0, 0, 0, 0.5); }
  50% { text-shadow: 0 0 40px rgba(85, 215, 255, 0.7), 0 0 80px rgba(85, 215, 255, 0.35), 0 2px 4px rgba(0, 0, 0, 0.5); }
}

.loading-bar-wrap {
  position: relative;
  z-index: 10;
  width: min(320px, 80%);
  height: 10px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 999px;
  border: 1px solid rgba(85, 215, 255, 0.25);
  overflow: hidden;
}

.loading-bar {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #55d7ff, #0ba9df, #55d7ff);
  background-size: 200% 100%;
  animation: shimmer 1.5s linear infinite;
  transition: width 0.3s ease;
}

@keyframes shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

.loading-tip {
  position: relative;
  z-index: 10;
  margin: 18px 0 0;
  color: rgba(158, 200, 225, 0.8);
  font-size: 0.92rem;
  letter-spacing: 0.01em;
}

/* ── Loading Screen fade-out ── */
.loading-screen.fade-out {
  animation: fadeOut 0.6s ease forwards;
}

@keyframes fadeOut {
  to { opacity: 0; pointer-events: none; }
}

/* ── Menu Screen ── */
.menu-screen {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #0a1e33 0%, #0d3252 35%, #134a6e 65%, #1a5c85 100%);
  overflow: hidden;
}

.menu-screen.fade-in {
  animation: menuFadeIn 0.5s ease forwards;
}

@keyframes menuFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.menu-screen.fade-out {
  animation: fadeOut 0.5s ease forwards;
}

.menu-ocean {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.menu-fish-swim {
  position: absolute;
  opacity: 0.35;
  z-index: 3;
  animation: loadFishSwim linear infinite;
}

.menu-fish-swim.fish-swim-1 {
  top: 70%;
  animation-duration: 14s;
}

.menu-fish-swim.fish-swim-1 .lf-body {
  background: linear-gradient(180deg, #7ec8e8, #4a9fc4);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.18);
}

.menu-fish-swim.fish-swim-1 .lf-tail { border-right-color: #5ab0d0; }
.menu-fish-swim.fish-swim-1 .lf-fin { background: rgba(90, 176, 208, 0.5); }

.menu-fish-swim.fish-swim-2 {
  top: 82%;
  animation-duration: 18s;
  animation-delay: -6s;
}

.menu-fish-swim.fish-swim-2 .lf-body {
  width: 36px;
  height: 16px;
  background: linear-gradient(180deg, #d4c498, #a89060);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.18);
}

.menu-fish-swim.fish-swim-2 .lf-tail { border-right-color: #b8a070; top: 2px; }
.menu-fish-swim.fish-swim-2 .lf-eye { right: 7px; top: 5px; width: 3px; height: 3px; }
.menu-fish-swim.fish-swim-2 .lf-fin { background: rgba(168, 144, 96, 0.4); }

.menu-card {
  position: relative;
  z-index: 10;
  background: rgba(7, 31, 49, 0.92);
  border: 1px solid rgba(85, 215, 255, 0.25);
  border-radius: 20px;
  padding: 40px 48px;
  text-align: center;
  box-shadow:
    0 0 60px rgba(85, 215, 255, 0.08),
    0 16px 48px rgba(0, 0, 0, 0.4);
  animation: menuCardIn 0.6s ease 0.1s both;
  min-width: min(380px, 85vw);
}

@keyframes menuCardIn {
  from { opacity: 0; transform: translateY(24px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.menu-title {
  margin: 0 0 32px;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: #eaf6ff;
  text-shadow:
    0 0 20px rgba(85, 215, 255, 0.4),
    0 2px 4px rgba(0, 0, 0, 0.4);
  letter-spacing: 0.04em;
}

.menu-buttons {
  display: grid;
  gap: 12px;
  margin-bottom: 28px;
}

.menu-btn {
  border: 1px solid rgba(85, 215, 255, 0.35);
  border-radius: 14px;
  padding: 16px 24px;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #072337;
  background: linear-gradient(180deg, #7ae8ff, #2bc5f5);
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}

.menu-btn:hover:enabled {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 6px 20px rgba(85, 215, 255, 0.3);
}

.menu-btn:active:enabled {
  transform: translateY(1px);
  filter: brightness(0.95);
}

.menu-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  color: #94b5cb;
  background: linear-gradient(180deg, #2a6f95, #1b4c69);
  border-color: rgba(131, 171, 198, 0.3);
}

.menu-lang-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.menu-lang-label {
  color: var(--muted);
  font-size: 0.88rem;
  letter-spacing: 0.02em;
}

.menu-lang-picker {
  justify-content: center;
}

.menu-lang-picker .lang-button {
  padding: 8px 14px;
  font-size: 0.85rem;
}

@media (max-width: 980px) {
  .hud {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .upgrade-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  body {
    padding: 12px;
  }

  .hud {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fishing-readout {
    grid-template-columns: 1fr;
  }

  .world-level-buttons {
    grid-template-columns: 1fr;
  }

  .gear-buttons {
    grid-template-columns: 1fr;
  }

  .upgrade-grid {
    grid-template-columns: 1fr;
  }

  .hero-actions {
    width: 100%;
  }

  .hero-button {
    flex: 1;
  }

  .water {
    height: 186px;
  }

  .rod {
    transform: scale(0.84);
    transform-origin: left top;
    left: 40%;
    top: 18px;
  }

  .fisher-auto {
    left: 66%;
    top: 2px;
  }

  .rod-auto {
    left: 65%;
    top: 19px;
    transform: scale(0.82) scaleX(-1) rotate(2deg);
  }

  .cast-line {
    left: 71%;
  }

  .bobber {
    left: calc(71% - 2px);
  }

  .auto-cast-line {
    left: 66%;
  }

  .auto-bobber {
    left: calc(66% - 2px);
  }
}