:root {
  color-scheme: light;
  font-family: ui-rounded, "Arial Rounded MT Bold", "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --white: #fff;
  --orange: #ffb719;
  --blue: #9ed8f2;
  --deep-blue: #72cbe5;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--blue);
  overscroll-behavior: none;
  user-select: none;
}

button {
  appearance: none;
  border: 0;
  margin: 0;
  padding: 0;
  font: inherit;
}

.game {
  --ring-top: clamp(42px, 6.2vw, 84px);
  --ring-size: clamp(66px, 6.9vw, 112px);
  --line-width: clamp(7px, 0.65vw, 11px);
  --tip-offset: clamp(108px, 11vw, 170px);
  position: fixed;
  inset: 0;
  overflow: hidden;
  min-width: 320px;
  min-height: 420px;
  background:
    radial-gradient(60vw 36vw at 25% 102%, rgba(84, 168, 214, 0.75) 0 34%, transparent 35%),
    radial-gradient(75vw 52vw at 50% -12%, rgba(188, 233, 251, 0.42) 0 58%, transparent 59%),
    linear-gradient(#a7daf2 0%, #9cd9f0 58%, #78cee1 100%);
}

.water-backdrop,
.water-backdrop > span {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.water-backdrop::before {
  content: "";
  position: absolute;
  left: -8%;
  right: -8%;
  top: 31%;
  height: 45%;
  border-radius: 0 0 52% 48% / 0 0 100% 100%;
  background: rgba(130, 212, 238, 0.34);
  transform: rotate(2deg);
}

.sand {
  top: auto;
  height: 17%;
  bottom: -1%;
  background: linear-gradient(175deg, rgba(95, 198, 211, 0.94), rgba(108, 205, 213, 0.92));
  clip-path: ellipse(70% 50% at 50% 68%);
}

.rock-left {
  left: -3%;
  top: 54%;
  width: 30%;
  height: 45%;
  background: #6f9bc0;
  border-radius: 48% 54% 13% 14%;
  transform: rotate(-6deg);
  opacity: 0.9;
}

.rock-left::before {
  content: "";
  position: absolute;
  left: 18%;
  top: 2%;
  width: 78%;
  height: 95%;
  border-radius: 50% 48% 18% 18%;
  background: rgba(91, 138, 177, 0.45);
  clip-path: ellipse(45% 56% at 20% 44%);
}

.rock-right {
  left: auto;
  top: 79%;
  right: -8%;
  width: 21%;
  height: 30%;
  background: #4d91bd;
  border-radius: 52% 48% 0 0;
  transform: rotate(-12deg);
}

.plant-left,
.plant-right {
  inset: auto auto 9% 26%;
  width: clamp(42px, 5vw, 76px);
  height: clamp(90px, 12vw, 150px);
}

.plant-left::before,
.plant-left::after,
.plant-right::before,
.plant-right::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 46%;
  width: 8px;
  height: 90%;
  border-radius: 999px;
  background: #6fa8ef;
  transform-origin: bottom center;
}

.plant-left::after {
  height: 65%;
  transform: rotate(31deg);
}

.plant-left::before {
  transform: rotate(-19deg);
}

.plant-right {
  left: auto;
  right: 8%;
  bottom: 13%;
}

.plant-right::before {
  height: 78%;
  transform: rotate(-30deg);
}

.plant-right::after {
  height: 62%;
  transform: rotate(24deg);
}

.bubble {
  width: clamp(26px, 4vw, 70px);
  height: clamp(26px, 4vw, 70px);
  border-radius: 50%;
  background: rgba(220, 249, 255, 0.52);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.12);
  animation: drift 5s ease-in-out infinite alternate;
}

.bubble-a { left: 23%; top: 29%; }
.bubble-b { left: 83%; top: 61%; width: clamp(28px, 3.8vw, 64px); height: clamp(28px, 3.8vw, 64px); animation-delay: -2s; }
.bubble-c { left: 53%; top: 79%; width: clamp(14px, 1.6vw, 28px); height: clamp(14px, 1.6vw, 28px); animation-delay: -1s; }
.bubble-d { left: 78%; top: 84%; width: clamp(10px, 1.1vw, 20px); height: clamp(10px, 1.1vw, 20px); animation-delay: -3s; }

.round-button {
  position: absolute;
  z-index: 30;
  display: grid;
  place-items: center;
  width: clamp(50px, 5.6vw, 88px);
  aspect-ratio: 1;
  border-radius: 50%;
  color: var(--orange);
  background: #fff;
  box-shadow: 0 0 0 clamp(3px, 0.45vw, 7px) rgba(255, 255, 255, 0.75), 0 7px 0 rgba(255, 189, 25, 0.12);
  cursor: pointer;
}

.round-button svg {
  width: 58%;
  height: 58%;
}

.back-button {
  left: max(28px, env(safe-area-inset-left));
  top: max(34px, env(safe-area-inset-top));
  color: #b9e6fb;
}

.sound-button {
  right: max(34px, env(safe-area-inset-right));
  top: max(45px, env(safe-area-inset-top));
}

.sound-button.music-on {
  color: #fff;
  background: var(--orange);
  box-shadow: 0 0 0 clamp(3px, 0.45vw, 7px) rgba(255, 255, 255, 0.82), 0 0 0 12px rgba(255, 183, 25, 0.16);
}

.score-card {
  position: absolute;
  top: max(46px, env(safe-area-inset-top));
  right: max(118px, calc(env(safe-area-inset-right) + 118px));
  z-index: 28;
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vw, 16px);
  height: clamp(46px, 4.2vw, 70px);
  padding: 0 clamp(10px, 1.2vw, 20px) 0 clamp(8px, 1vw, 15px);
  border: clamp(4px, 0.45vw, 7px) solid #fff;
  border-radius: 999px;
  background: var(--orange);
  box-shadow: 0 4px 0 rgba(255, 255, 255, 0.48), inset 0 -5px 0 rgba(255, 142, 0, 0.22);
}

.badge {
  display: grid;
  place-items: center;
  width: clamp(30px, 2.8vw, 46px);
  aspect-ratio: 1;
  color: #fff;
  border-radius: 12px;
  background: rgba(255, 148, 0, 0.44);
  box-shadow: inset 0 -4px 0 rgba(255, 105, 0, 0.3);
}

.badge svg {
  width: 72%;
  height: 72%;
}

.score-dots {
  display: flex;
  gap: clamp(8px, 0.9vw, 14px);
}

.score-dots i {
  width: clamp(18px, 1.75vw, 29px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 0 #9bd86e;
}

.score-dots i.done {
  background: #9bd86e;
  box-shadow: inset 0 0 0 4px #fff;
}

.hooks {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}

.hook {
  --pull: 0px;
  --drag-x: 0px;
  --cord-length: calc(var(--pull) + var(--ring-top) + (var(--ring-size) * 0.5));
  --cord-angle: 0deg;
  position: absolute;
  top: 0;
  left: var(--hook-x);
  width: clamp(86px, 8vw, 132px);
  height: 100%;
  transform: translateX(-50%);
  background: transparent;
  cursor: grab;
  touch-action: none;
  pointer-events: auto;
}

.hook:active,
.hook.dragging {
  cursor: grabbing;
}

.hook.done {
  pointer-events: none;
  opacity: 0.82;
}

.cord {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--line-width);
  height: var(--cord-length);
  border-radius: 0 0 999px 999px;
  background: #fff;
  transform: translateX(-50%) rotate(var(--cord-angle));
  transform-origin: top center;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.45);
}

.hook-head {
  position: absolute;
  top: calc(var(--pull) + var(--ring-top));
  left: calc(50% + var(--drag-x));
  width: var(--ring-size);
  height: calc(var(--ring-size) + clamp(42px, 4vw, 66px));
  transform: translateX(-50%);
  transition: transform 160ms ease;
}

.ring {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--ring-size);
  aspect-ratio: 1;
  border: clamp(7px, 0.75vw, 12px) solid #fff;
  border-radius: 50%;
  background: var(--hook-fill);
  box-shadow: inset 0 -7px 0 rgba(0, 0, 0, 0.04), 0 6px 0 rgba(255, 255, 255, 0.25);
}

.j-hook {
  position: absolute;
  top: calc(var(--ring-size) - clamp(10px, 1vw, 16px));
  left: 50%;
  width: clamp(36px, 3.2vw, 54px);
  height: clamp(42px, 3.7vw, 62px);
  border: clamp(7px, 0.75vw, 12px) solid #fff;
  border-top: 0;
  border-left: 0;
  border-radius: 0 0 999px 0;
  transform: translateX(-50%);
}

.hook-tip {
  position: absolute;
  top: calc(var(--pull) + var(--ring-top) + var(--tip-offset));
  left: calc(50% + var(--drag-x));
  width: 18px;
  height: 18px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.hook.returning .hook-head,
.hook.returning .cord,
.hook.returning .hook-tip {
  transition:
    top 360ms cubic-bezier(0.2, 0.8, 0.35, 1),
    left 360ms cubic-bezier(0.2, 0.8, 0.35, 1),
    height 360ms cubic-bezier(0.2, 0.8, 0.35, 1),
    transform 360ms cubic-bezier(0.2, 0.8, 0.35, 1);
}

.hook.success .hook-head {
  animation: hook-pop 420ms ease;
}

.hook.miss .hook-head {
  animation: hook-shake 300ms ease;
}

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

.fish {
  --swim-x: 0px;
  --swim-y: 0px;
  --bob: 0px;
  --face: 1;
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: clamp(90px, 10vw, 176px);
  aspect-ratio: 1.55;
  transform: translate(calc(-50% + var(--swim-x)), calc(-50% + var(--swim-y) + var(--bob))) scaleX(var(--face)) scale(var(--scale, 1));
  transform-origin: center;
  filter: drop-shadow(0 7px 0 rgba(49, 130, 170, 0.09));
  will-change: transform;
}

.fish .body,
.fish .tail,
.fish .fin,
.fish .eye,
.fish .spot,
.fish .belly,
.fish .spikes {
  position: absolute;
  display: block;
}

.fish .body {
  left: 26%;
  top: 14%;
  width: 62%;
  height: 74%;
  border-radius: 54% 46% 50% 50%;
  background: var(--fish);
  box-shadow: inset -22px -7px 0 rgba(0, 0, 0, 0.06);
}

.fish .tail {
  left: 7%;
  top: 29%;
  width: 34%;
  height: 46%;
  background: var(--fish-dark);
  clip-path: polygon(100% 50%, 4% 8%, 16% 50%, 4% 92%);
  border-radius: 28% 0 0 28%;
}

.fish .fin-top {
  left: 42%;
  top: 3%;
  width: 30%;
  height: 26%;
  background: var(--fish-dark);
  border-radius: 60% 60% 8% 8%;
  transform: rotate(16deg);
}

.fish .fin-side {
  left: 48%;
  top: 54%;
  width: 22%;
  height: 26%;
  border-radius: 55% 45% 55% 45%;
  background: var(--fish-dark);
  opacity: 0.78;
}

.fish .eye {
  right: 12%;
  top: 33%;
  width: 27%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff8e5;
}

.fish .eye::after {
  content: "";
  position: absolute;
  left: 23%;
  top: 20%;
  width: 58%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #24172c;
}

.fish .spot {
  width: 16%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--fish-accent);
  opacity: 0.78;
}

.s1 { left: 25%; top: 30%; }
.s2 { left: 46%; top: 20%; }
.s3 { left: 33%; top: 57%; }
.s4 { left: 52%; top: 50%; }

.fish-bubbles {
  position: absolute;
  right: 1%;
  top: 15%;
  width: 26%;
  height: 42%;
}

.fish-bubbles i {
  position: absolute;
  width: 22%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(230, 252, 255, 0.72);
  animation: tiny-bubble 1.7s ease-in-out infinite alternate;
}

.fish-bubbles i:nth-child(1) { right: 18%; top: 9%; }
.fish-bubbles i:nth-child(2) { right: 0; top: 40%; animation-delay: -0.7s; }
.fish-bubbles i:nth-child(3) { right: 31%; top: 62%; animation-delay: -1.2s; }

.fish-green .body {
  left: 18%;
  width: 64%;
  border-radius: 48% 58% 52% 48%;
}

.fish-green .tail {
  left: 76%;
  width: 28%;
  clip-path: polygon(0 50%, 94% 9%, 78% 50%, 94% 91%);
}

.fish-green .eye {
  left: 15%;
  right: auto;
  width: 21%;
}

.fish-green .fin-side {
  left: 68%;
  top: 47%;
  background: var(--fish-dark);
  transform: rotate(7deg);
}

.fish-purple .body {
  width: 66%;
  background: linear-gradient(90deg, var(--fish-dark) 0 37%, var(--fish) 38% 100%);
}

.fish-purple .tail {
  left: 6%;
  width: 36%;
  background: var(--fish-dark);
}

.fish-purple .fin-side {
  background: #793bd1;
}

.puffer {
  width: clamp(94px, 9.5vw, 168px);
  aspect-ratio: 1.38;
}

.puffer .body {
  left: 19%;
  top: 11%;
  width: 67%;
  height: 76%;
  border-radius: 58% 52% 52% 58%;
  background: var(--fish);
}

.puffer .tail {
  left: 77%;
  top: 33%;
  width: 26%;
  height: 35%;
  background: var(--fish-dark);
  clip-path: polygon(0 50%, 88% 0, 68% 50%, 88% 100%);
}

.puffer .spikes {
  left: 14%;
  top: 5%;
  width: 76%;
  height: 86%;
  background: var(--fish);
  clip-path: polygon(44% 0, 50% 15%, 59% 1%, 62% 18%, 74% 8%, 72% 25%, 89% 21%, 79% 35%, 97% 42%, 80% 49%, 96% 62%, 77% 63%, 84% 82%, 66% 74%, 62% 98%, 51% 80%, 41% 99%, 36% 77%, 18% 84%, 26% 64%, 3% 62%, 22% 49%, 2% 38%, 24% 35%, 15% 18%, 33% 24%);
  z-index: -1;
}

.puffer .belly {
  left: 20%;
  bottom: -6%;
  width: 58%;
  height: 44%;
  border-radius: 50% 50% 48% 48%;
  background: #fff;
}

.puffer .eye {
  width: 14%;
  background: #fff8e5;
}

.puffer .left-eye {
  left: 19%;
  top: 39%;
}

.puffer .right-eye {
  left: 42%;
  top: 32%;
}

.puffer .eye::after {
  left: 26%;
  top: 19%;
  width: 56%;
}

.puffer .spot {
  width: 10%;
  background: var(--fish-dark);
  opacity: 0.5;
}

.puffer.caught,
.fish.caught {
  animation: caught-float 650ms ease forwards;
}

.word-panel {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: rgba(117, 205, 231, 0.16);
  opacity: 0;
  transform: scale(0.98);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

.word-panel[hidden] {
  display: none !important;
}

.word-panel.show {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.word-card {
  position: relative;
  width: min(62vw, 520px);
  min-width: 250px;
  padding: clamp(14px, 2vw, 24px);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 16px 40px rgba(50, 143, 185, 0.24), inset 0 0 0 8px rgba(255, 255, 255, 0.7);
}

.word-card img {
  display: block;
  width: 100%;
  height: auto;
}

.word-actions {
  position: absolute;
  left: 50%;
  bottom: max(-28px, -3.2vw);
  display: flex;
  gap: 18px;
  transform: translateX(-50%);
}

.panel-button {
  position: static;
  width: clamp(52px, 5vw, 72px);
  color: #fff;
  background: var(--orange);
  box-shadow: 0 0 0 6px #fff, 0 8px 18px rgba(56, 139, 176, 0.26);
}

.spark-layer {
  position: absolute;
  inset: 0;
  z-index: 45;
  pointer-events: none;
}

.spark {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 5px rgba(255, 188, 25, 0.7);
  animation: spark 700ms ease-out forwards;
}

@keyframes drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, -16px, 0); }
}

@keyframes tiny-bubble {
  from { transform: translateY(0) scale(0.9); opacity: 0.62; }
  to { transform: translateY(-12px) scale(1.12); opacity: 0.92; }
}

@keyframes hook-pop {
  0% { transform: translateX(-50%) scale(1); }
  45% { transform: translateX(-50%) scale(1.08); }
  100% { transform: translateX(-50%) scale(1); }
}

@keyframes hook-shake {
  0%, 100% { transform: translateX(-50%) rotate(0deg); }
  30% { transform: translateX(-53%) rotate(-4deg); }
  65% { transform: translateX(-47%) rotate(4deg); }
}

@keyframes caught-float {
  0% { opacity: 1; }
  55% { opacity: 0.96; scale: 0.9; }
  100% { opacity: 0; scale: 0.45; translate: 0 -120px; }
}

@keyframes spark {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(0.5); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.1); }
}

@media (max-width: 760px) and (orientation: portrait) {
  .game {
    --ring-top: clamp(58px, 13vw, 88px);
    --ring-size: clamp(62px, 17vw, 92px);
    --tip-offset: clamp(105px, 29vw, 152px);
  }

  .back-button {
    left: 18px;
    top: 20px;
  }

  .score-card {
    top: 22px;
    right: 84px;
    transform: scale(0.82);
    transform-origin: top right;
  }

  .sound-button {
    right: 18px;
    top: 20px;
  }

  .hook:nth-child(1) { --hook-x: 23%; }
  .hook:nth-child(2) { --hook-x: 41%; }
  .hook:nth-child(3) { --hook-x: 59%; }
  .hook:nth-child(4) { --hook-x: 77%; }

  .fish-red { --x: 48% !important; --y: 40% !important; }
  .fish-green { --x: 62% !important; --y: 56% !important; }
  .fish-purple { --x: 32% !important; --y: 72% !important; }
  .fish-yellow { --x: 61% !important; --y: 84% !important; }

  .word-card {
    width: 78vw;
    border-radius: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}