.fishing-stage {
  position: relative;
  width: min(100%, 760px);
  height: 255px;
  margin: -4px auto 0;
  overflow: hidden;
}
.fishing-stage .pond { position: absolute; inset: auto 0 0; height: 190px; margin: 0; }
.fishing-line { --line-height:190px; position: absolute; z-index: 5; left: 54%; top: 0; width: 3px; height: var(--line-height); background: #eefaff; box-shadow: 0 0 2px #477485; transform-origin: top center; }
.hook { position: absolute; z-index: 6; left: calc(54% - 1px); top: 177px; color: #4b5960; font: 900 24px/1 sans-serif; transform: rotate(12deg); }
.splash-mark { position: absolute !important; z-index: 6; left: 48% !important; bottom: 55px !important; opacity: 0; font-size: 2.8rem !important; }
.fishing-stage .floats { position:absolute; z-index:4; inset:35px 5% auto; display:flex; align-items:center; justify-content:space-evenly; flex-wrap:nowrap; gap:5px; }
.fishing-stage .float-button { width:clamp(62px,14vw,96px); height:100px; }
.fishing-stage .float-button span { background:#fff9df; }
.fishing-stage .float-button.caught { animation:float-to-hook 1.05s cubic-bezier(.25,.7,.25,1) both; }
.fishing-stage .catch { top: auto; left: 54%; bottom: 8px; display: grid; place-items: center; min-width: 60px; transform: translateX(-50%); }
.catch span { font-size: 3rem; }
.fishing-active .fishing-line { animation: line-pull 1.05s ease both; }
.fishing-active .hook { animation: hook-pull 1.05s ease both; }
.fishing-active .splash-mark { animation: splash-pop .65s ease both; }
.fishing-active .catch { animation: fish-pull 1.05s cubic-bezier(.25,.7,.25,1) both; }
@keyframes line-pull { 0%,20% { height:var(--line-height) } 48% { height:calc(var(--line-height) + 14px) } 100% { height:20px; transform:translate(17px,-5px) } }
@keyframes hook-pull { 0%,20% { transform:translate(0,0) rotate(12deg) } 48% { transform:translate(0,14px) rotate(12deg) } 100% { transform:translate(17px,-73px) rotate(12deg) } }
@keyframes splash-pop { 0%,20% { opacity:0;transform:scale(.2) } 45% { opacity:1;transform:scale(1.25) } 100% { opacity:0;transform:scale(1.7) } }
@keyframes fish-pull { 0%,20% { transform:translate(-50%,0) rotate(0) } 45% { transform:translate(-50%,-12px) rotate(-8deg) } 100% { transform:translate(calc(-50% + 17px),-92px) rotate(12deg) } }
@keyframes float-to-hook { 0%,20% { transform:translate(0,0) rotate(0) } 45% { transform:translate(var(--catch-shift),-12px) rotate(-7deg) } 100% { transform:translate(calc(var(--catch-shift) + 17px),-112px) rotate(8deg);opacity:1 } }
@media (max-width:620px) {
  .fishing-stage { height:220px; }
  .fishing-stage .pond { height:165px; }
  .fishing-line { --line-height:172px;left:49%;top:0;height:var(--line-height); }
  .hook { left:calc(49% - 1px);top:158px; }
  .fishing-stage .catch { left:49%;bottom:12px; }
  .splash-mark { left:42% !important;bottom:45px !important; }
  .catch span { font-size:2.5rem; }
  .fishing-stage .floats { inset:32px 1% auto; }
  .fishing-stage .float-button { width:clamp(55px,17vw,72px); }
}
@media (prefers-reduced-motion:reduce) {
  .fishing-active .catch { transform:translate(-50%,-60px); }
  .fishing-active .splash-mark { opacity:1; }
  .fishing-active .fishing-line { height:30px; }
}