/* Mancing Kata: 1 sampai 3 jalur atau satu jalur lebar untuk sekelas */
.mk { --team-c: #059669; --team-c-soft: #d1fae5; }
.mk .lanes { flex: 1; display: grid; grid-template-columns: repeat(var(--n, 2), 1fr); min-height: 0; }
.mk .lanes.n1 { --n: 1; } .mk .lanes.n2 { --n: 2; } .mk .lanes.n3 { --n: 3; }
.lane { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: clamp(4px, 1vw, 14px); gap: clamp(4px, 1vh, 10px); border-right: 3px solid #fff; }
.lane:last-child { border-right: 0; }
.lane.a { background: var(--team-a-soft); } .lane.b { background: var(--team-b-soft); } .lane.c { background: var(--team-c-soft); }
.lanes.n1 .lane.a { background: var(--sky-50); }
.lhead { display: flex; align-items: center; gap: 8px; }
.lane h2 { margin: 0; flex: 1; font-size: clamp(13px, 1.8vw, 24px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lane.a h2 { color: var(--team-a); } .lane.b h2 { color: var(--team-b); } .lane.c h2 { color: var(--team-c); }
.lanes.n1 .lane.a h2 { color: var(--sky-d); }
.score { min-width: 2.2em; text-align: center; padding: 0 8px; border-radius: 999px; background: #fff; font-family: var(--font); font-weight: 800; font-size: clamp(15px, 2vw, 26px); color: var(--ink); border: 3px solid var(--line); }
.hearts { display: inline-flex; gap: 3px; }
.hearts[hidden] { display: none; }
.hearts i { width: clamp(14px, 1.8vw, 24px); height: clamp(14px, 1.8vw, 24px); background: #cbd5e1; }
.hearts i { border-radius: 50%; }
.hearts i.on { background: #f97316; }

.mk .feedback { left: 6px; right: 6px; top: 6px; bottom: auto; padding: 6px 10px; border-width: 3px; border-radius: 14px; font-size: clamp(12px, 1.4vw, 18px); pointer-events: none; opacity: .96; z-index: 4; }
.mk .feedback b { display: inline; margin-right: 6px; font-size: 1.05em; }
.outmask { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(51,65,85,.72); color: #fff; font-family: var(--font); font-weight: 800; font-size: clamp(18px, 3vw, 36px); z-index: 3; }
.lane.out .outmask { display: flex; }
.winner.c { color: var(--team-c); }

@media (max-width: 700px) and (orientation: portrait) {
  .mk .lanes.n3 .pre { display: none; }
  .mk .lanes.n3 .score { min-width: 1.8em; padding: 0 4px; font-size: 14px; border-width: 2px; }
  .mk .lanes.n3 .hearts { gap: 1px; }
  .mk .lanes.n3 .hearts i { width: 11px; height: 11px; }
  }
@media (max-height: 520px) {
  .lane { padding: 4px 6px; gap: 3px; }
  .lane h2 { font-size: 12px; }
  .score { font-size: 14px; border-width: 2px; }
  .field { border-radius: 12px; border-width: 2px; }
}

/* target kata: gambar petunjuk dan kotak huruf */
.target { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; background: #fff; border: 4px solid var(--line); border-radius: 18px; padding: 4px 8px; min-height: 0; }
.lane.a .target { border-color: var(--team-a); } .lane.b .target { border-color: var(--team-b); } .lane.c .target { border-color: var(--team-c); }
.lanes.n1 .lane.a .target { border-color: var(--sky-d); }
.pic[hidden] { display: none; }
.pic img { width: clamp(38px, 6vh, 56px); height: auto; display: block; }
.wslots { --ss: 34px; flex: 1; min-width: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; }
.wslots .cat { flex: 0 0 100%; text-align: center; font-weight: 800; color: var(--muted); font-size: clamp(11px, 1.3vw, 15px); }
.wslot {
  width: var(--ss); height: calc(var(--ss) * 1.15); border-radius: 8px; border: 3px dashed var(--muted); background: var(--sky-50);
  display: grid; place-items: center; font-family: var(--font); font-weight: 800; font-size: calc(var(--ss) * .62); line-height: 1; color: var(--ink);
}
.wslot.on { border-style: solid; border-color: var(--ok); background: #d1fae5; animation: mk-pop .3s; }
.wslots.good .wslot { background: #86efac; }
@keyframes mk-pop { 50% { transform: scale(1.18); } }

/* air dan ikan */
.field { position: relative; flex: 1; min-height: 0; overflow: hidden; border-radius: 16px; border: 3px solid #fff; background: linear-gradient(180deg, #7dd3fc, #0ea5e9 70%, #0369a1); }
.field::before { content: ""; position: absolute; inset: 0; background:
  radial-gradient(circle at 15% 80%, rgba(255,255,255,.35) 0 3px, transparent 4px), radial-gradient(circle at 72% 60%, rgba(255,255,255,.3) 0 2px, transparent 3px),
  radial-gradient(circle at 40% 30%, rgba(255,255,255,.3) 0 4px, transparent 5px), radial-gradient(circle at 88% 20%, rgba(255,255,255,.25) 0 3px, transparent 4px); pointer-events: none; }
.sand { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(8px, 9%, 34px); background: #fde68a; border-top: 3px solid #f59e0b; }
.fish {
  position: absolute; left: 0; top: 0; padding: 0; border: 0; background: transparent; cursor: pointer; touch-action: manipulation; will-change: transform;
  display: grid; place-items: center; font-family: var(--font); font-weight: 800; color: #fff; z-index: 2;
}
.fish::before { content: ""; position: absolute; top: 0; bottom: 0; width: 78%; border-radius: 50%; background: var(--fc); box-shadow: inset -4px -5px 0 rgba(0,0,0,.18); }
.fish::after { content: ""; position: absolute; top: 14%; bottom: 14%; width: 30%; background: var(--fc); filter: brightness(.88); }
.fish.right::before { left: 22%; } .fish.right::after { left: 0; clip-path: polygon(100% 50%, 0 0, 0 100%); }
.fish.left::before { right: 22%; } .fish.left::after { right: 0; clip-path: polygon(0 50%, 100% 0, 100% 100%); }
.fish .eye { position: absolute; top: 26%; width: 11%; aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px #0f172a; z-index: 1; }
.fish.right .eye { right: 14%; } .fish.left .eye { left: 14%; }
.fish .lt { position: relative; z-index: 1; text-shadow: 0 1px 2px rgba(0,0,0,.4); text-transform: uppercase; }
.fish.right .lt { transform: translateX(8%); } .fish.left .lt { transform: translateX(-8%); }
.fish:focus-visible { outline: 3px solid var(--amber); border-radius: 12px; }
.fish.caught { transition: transform .4s ease-in, opacity .4s; opacity: 0; pointer-events: none; animation: mk-up .45s forwards; }
.fish.oops { pointer-events: none; opacity: .5; filter: grayscale(1); animation: mk-shake .4s; }
@keyframes mk-up { to { translate: 0 -120%; scale: .5; } }
@keyframes mk-shake { 25% { translate: -6px 0; } 75% { translate: 6px 0; } }
@media (max-height: 520px) {
  .target { border-width: 3px; border-radius: 12px; padding: 2px 6px; gap: 6px; }
  .pic img { width: clamp(28px, 11vh, 40px); }
  .wslot { border-width: 2px; border-radius: 6px; }
  .wslots .cat { font-size: 10px; }
  .field { border-radius: 12px; border-width: 2px; }
}
@media (prefers-reduced-motion: reduce) { .fish.caught { animation-duration: .01s; } }