.dialog-surface:has(.pond-game) { width: min(650px,calc(100% - 20px)); }
.pond-game { display: grid; gap: 10px; }
.pond-stats { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 5px; }
.pond-stats > span { padding: 5px 8px; border: 1px solid #87ab8b65; border-radius: 8px; background: #274038; color: #eef5df; font-size: 13px; }
.pond-scene {
  position: relative; overflow: hidden; height: clamp(158px,45vw,285px); border-radius: 16px;
  border: 1px solid #82b59c7f; background: #1a5860 url("./art/pond.webp") center 60% / cover;
}
.pond-bobber {
  position: absolute; left: var(--bobber-x); top: var(--bobber-y); width: 12px; height: 17px;
  border: 2px solid #f9ead3; border-radius: 55% 55% 45% 45%; background: linear-gradient(#f76d56 0 52%,#fff3d6 53%);
  box-shadow: 0 2px 6px #183d4f; transform-origin: center bottom;
}
.pond-bobber i {
  position: absolute; left: 50%; top: 85%; width: 16px; height: 7px; border-radius: 50%;
  border: 1px solid #e2fff8; animation: pond-ripple 1.5s ease-out infinite;
}
.pond-bite { animation: pond-bob .28s ease-in-out infinite alternate; }
.pond-reeling { animation: pond-bob .45s ease-in-out infinite alternate; transition: left .24s ease, top .24s ease; }
.pond-controls {
  display: grid; gap: 8px; padding: 11px; text-align: center; color: #f1f5dd;
  border-radius: 13px; border: 1px solid #8dbfa876; background: linear-gradient(140deg,#294c42,#1e372f);
}
.pond-controls p { margin: 0; font-size: 13px; color: #cee6d9; }
.pond-controls > strong { font-size: 20px; }
.pond-controls > .btn.small { justify-self: center; }
.pond-pull { touch-action: none; user-select: none; -webkit-touch-callout: none; }
.pond-gauge {
  position: relative; height: 16px; margin: 4px 3px; border: 1px solid #e3e9bc8f; border-radius: 10px;
  background: linear-gradient(90deg,#536c7a 0 var(--low),#a4db78 var(--low) var(--high),#b77063 var(--high) 100%);
}
.pond-gauge i {
  position: absolute; inset-block: -3px; width: 4px; border-radius: 3px; translate: -50% 0;
  background: #fff5d8; box-shadow: 0 0 7px #ffefaa; pointer-events: none;
}
.pond-catch { display: grid; justify-items: center; gap: 7px; }
.pond-catch-emoji { font-size: 53px; line-height: 1; filter: drop-shadow(0 4px 9px #15211c); animation: pond-catch-in .28s ease-out; }
.pond-catch-stats,.pond-catch-actions { display: flex; justify-content: center; gap: 7px; width: 100%; }
.pond-catch-stats span { border-radius: 8px; padding: 6px 9px; background: #1c372e; }
.pond-catch-actions .btn { flex: 1; }
.pond-catch small { color: #cbe0c7; }
.pond-fish-title { font-size: 17px; }
.fish-tier-common { color: #fff; }
.fish-tier-uncommon { color: #b9ed86; }
.fish-tier-epic { color: #dda5ff; }
.fish-tier-legendary { color: #ffe588; }
.fish-tier-mythic { color: #ff8887; }
.fish-tier-secret {
  color: #9e9fa5;
  background: linear-gradient(100deg,#222327 18%,#777980 36%,#c0c1c6 50%,#777980 64%,#222327 82%);
  background-size: 240% 100%;
  background-position: 100% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 1px #d0d1d86b);
  animation: secret-fish-shimmer 3s linear infinite;
}
@keyframes secret-fish-shimmer { to { background-position: 0% 50%; } }
@media (prefers-reduced-motion: reduce) {
  .fish-tier-secret { animation: none; background-position: 50% 50%; }
}
.pond-route-hint { grid-column: 1 / -1; text-align: center; margin: 0 0 3px; color: var(--muted); }
.buyer-fish { display: grid; gap: 6px; }
.buyer-fish .btn { justify-content: space-between; text-align: start; }
@keyframes pond-bob { to { transform: translateY(4px) rotate(11deg); } }
@keyframes pond-ripple { from { transform: translate(-50%,-50%) scale(.6); opacity: .8; } to { transform: translate(-50%,-50%) scale(3); opacity: 0; } }
@keyframes pond-catch-in { from { transform: translateY(10px) scale(.85); opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .pond-bobber,.pond-bobber i,.pond-catch-emoji { animation: none; } }