/* ==========================================================================
   Clean sea / Laut bersih: drag and drop river game (inside the cobalt field).
   The stage is paper; water is cobalt; objects are Phosphor icons.
   ========================================================================== */
.sea__hud { margin-bottom: 14px; }
.sea__stats { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 28px; font-size: 15px; }
.sea__stats b { margin-right: 4px; font: 400 1.5rem/1 var(--serif); font-variant-numeric: tabular-nums lining-nums; }
.sea__frame { position: relative; }
.sea__stage {
  --rw: clamp(40px, 5.4vw, 74px);
  --murk: 0;
  position: relative;
  height: clamp(460px, 66vh, 640px);
  overflow: hidden;
  background: var(--paper);
  user-select: none;
  -webkit-user-select: none;
}
.sea__map { position: absolute; inset: 0; width: 100%; height: 100%; }
.m-sea { fill: var(--cobalt-deep); }
.m-murk { fill: var(--ink); opacity: var(--murk); transition: opacity .8s ease; }
.m-bank, .m-water, .m-flow, .m-guide { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.m-bank { stroke: rgba(14, 23, 38, .14); stroke-width: calc(var(--rw) + 10px); }
.m-water { stroke: rgba(21, 119, 189, .24); stroke-width: var(--rw); }
.m-flow { stroke: rgba(21, 119, 189, .6); stroke-width: 2px; stroke-dasharray: 10 26; }
.m-guide { stroke: none; }
html.motion-ok .sea.is-running .m-flow { animation: sea-flow 1.4s linear infinite; }
@keyframes sea-flow { to { stroke-dashoffset: -36; } }

/* Scenery sprites (Phosphor icons placed in % of the stage) */
.sea__deco { position: absolute; inset: 0; pointer-events: none; }
.sp { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); font-size: calc(var(--s) * clamp(17px, 2.3vw, 30px)); line-height: 1; color: var(--ink-2); transform: translate(-50%, -50%); }
.sp--wave { color: rgba(255, 255, 255, .5); }
html.motion-ok .sp--bird { animation: sea-bird 6s ease-in-out infinite alternate; }
html.motion-ok .sp--wave { animation: sea-wave 3.2s ease-in-out infinite alternate; }
@keyframes sea-bird { to { transform: translate(-30%, -70%); } }
@keyframes sea-wave { to { transform: translate(-40%, -50%); } }

/* Waste items: a square token with the item name below */
.sea__items, .sea__trashes { position: absolute; inset: 0; }
.sea__items { z-index: 3; pointer-events: none; }
.wi {
  --d: 56px;
  position: absolute;
  left: 0; top: 0;
  width: var(--d); height: var(--d);
  margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  pointer-events: auto;
  touch-action: none;
  cursor: grab;
  will-change: transform;
}
.wi__disc {
  display: grid;
  place-items: center;
  width: 100%; height: 100%;
  background: var(--paper);
  box-shadow: inset 0 0 0 1.5px var(--ink), 0 8px 16px -10px rgba(14, 23, 38, .55);
  font-size: calc(var(--d) * .5);
  color: var(--ink);
  transition: transform .18s var(--ease-out), box-shadow .2s ease;
}
.wi__name {
  position: absolute;
  left: 50%; top: calc(100% + 5px);
  padding: 2px 6px;
  background: rgba(241, 243, 239, .94);
  font: 600 12.5px/1.25 var(--sans);
  color: var(--ink);
  white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: none;
}
.wi.is-front .wi__disc { box-shadow: inset 0 0 0 2px var(--cobalt), 0 0 0 3px var(--paper), 0 0 0 5px var(--cobalt); }
html.motion-ok .wi.is-urgent .wi__disc { animation: sea-urgent .9s ease-in-out infinite; }
@keyframes sea-urgent { 50% { transform: scale(1.08); } }
.wi.is-held { z-index: 5; cursor: grabbing; }
.wi.is-held .wi__disc { transform: scale(1.18) rotate(-4deg); box-shadow: inset 0 0 0 2px var(--cobalt), 0 22px 34px -14px rgba(14, 23, 38, .55); }
.wi.is-trash { --d: 34px; pointer-events: none; cursor: default; }
.wi.is-trash .wi__disc { background: rgba(241, 243, 239, .86); box-shadow: none; }
.wi.is-trash .wi__name { display: none; }
@media (hover: hover) and (pointer: fine) { .wi:not(.is-trash):hover .wi__disc { transform: scale(1.08); } }

/* Bins: drop zones with a lid that opens while you hover with an item */
.sea__bins { position: absolute; z-index: 2; left: 2%; right: 24%; bottom: 3.5%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 1.2vw, 16px); }
.sea__stage[data-layout="tall"] .sea__bins { left: 3%; right: 3%; bottom: 2.5%; }
.wbin {
  position: relative;
  height: clamp(86px, 14vh, 122px);
  padding: 0;
  border: 0;
  background: var(--paper);
  box-shadow: inset 0 0 0 1.5px var(--ink);
  color: var(--ink);
  cursor: pointer;
  transition: transform .25s var(--ease-out), box-shadow .2s ease, background-color .2s ease;
}
.wbin__lid {
  position: absolute;
  left: -4px; right: -4px; top: -9px;
  height: 9px;
  background: var(--ink);
  transform-origin: 0 100%;
  transition: transform .28s cubic-bezier(.34, 1.56, .64, 1);
}
.wbin__lid::after { content: ""; position: absolute; left: 50%; top: -5px; width: 22px; height: 5px; margin-left: -11px; background: var(--ink); }
.wbin__body { position: absolute; inset: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon name" "icon hint"; align-content: center; column-gap: 10px; row-gap: 2px; padding: 10px 40px 10px 14px; text-align: left; }
.wbin__icon { grid-area: icon; font-size: clamp(22px, 2.4vw, 30px); color: var(--cobalt-deep); }
.wbin__name { grid-area: name; font: 600 15.5px/1.2 var(--sans); }
.wbin__hint { grid-area: hint; font-size: 12.5px; line-height: 1.3; color: var(--ink-2); }
.wbin__count { position: absolute; right: 12px; bottom: 8px; font: 400 1.35rem/1 var(--serif); font-variant-numeric: tabular-nums lining-nums; color: var(--ink-2); }
.wbin__key { position: absolute; right: 10px; top: 9px; display: grid; place-items: center; width: 20px; height: 20px; box-shadow: inset 0 0 0 1px var(--rule-strong); font: 600 11px/1 var(--sans); color: var(--ink-2); }
.wbin__plus { position: absolute; left: 50%; top: -14px; font: 600 15px/1 var(--sans); color: var(--cobalt-deep); pointer-events: none; }
.wbin.is-over, .wbin.is-open { background: #E4EDF4; box-shadow: inset 0 0 0 2.5px var(--cobalt); transform: translateY(-4px); }
.wbin.is-over .wbin__lid, .wbin.is-open .wbin__lid { transform: rotate(-22deg) translateY(-4px); background: var(--cobalt); }
.wbin.is-over .wbin__lid::after, .wbin.is-open .wbin__lid::after { background: var(--cobalt); }
.wbin.is-right { box-shadow: inset 0 0 0 3px var(--cobalt); }
.wbin.is-wrong { box-shadow: inset 0 0 0 3px var(--ink); background: #E3E5E3; }
.wbin:active { transform: scale(.98); }
.sea:not(.is-running) .wbin { cursor: default; }
@media (hover: none) { .wbin__key { display: none; } }

/* Overlays (start, paused) */
.sea__intro, .sea__paused {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  background: rgba(241, 243, 239, .92);
  color: var(--ink);
  text-align: center;
}
.sea__intro-title { max-width: 22ch; font: 400 clamp(1.6rem, 2.6vw, 2.4rem)/1.12 var(--serif); letter-spacing: -.014em; text-wrap: balance; }
.sea__intro-text { max-width: 50ch; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.sea__relaxed { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; cursor: pointer; }
.sea__relaxed input { width: 20px; height: 20px; margin: 0; accent-color: var(--cobalt); }
.sea__keys { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); }
.sea__paused p { font: 400 1.7rem/1.2 var(--serif); }
.game--sea .sea__intro :focus-visible, .game--sea .sea__paused :focus-visible { outline-color: var(--cobalt-deep); }
@media (hover: none) { .sea__keys { display: none; } }

.sea__msg { min-height: 1.6em; margin-top: 12px; font-size: 16px; line-height: 1.5; }
.sea__msg.is-no, .sea__msg.is-lost { font-weight: 600; }

/* End panel (white text on cobalt) */
.sea__end { display: grid; gap: 28px; margin-top: 36px; }
.wend__title { font: 400 clamp(2rem, 3.6vw, 3.4rem)/1.05 var(--serif); letter-spacing: -.02em; text-wrap: balance; }
.wend__title:focus { outline: none; }
.wend__sub { margin-top: 10px; font-size: 18px; opacity: .92; }
.wend__h { font: 600 15px/1.3 var(--sans); }
.wend__learn ul { list-style: none; display: grid; gap: 12px; max-width: 82ch; margin-top: 12px; }
.wend__learn li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; align-items: start; font-size: 16px; line-height: 1.5; }
.wend__learn strong { font-weight: 700; }
.wend__icon { display: grid; place-items: center; width: 36px; height: 36px; background: var(--paper); color: var(--ink); font-size: 20px; }
.wend__perfect { font-size: 18px; }
.wend__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 56px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .4); }
.wend__col p { margin-top: 12px; font-size: 16px; line-height: 1.55; text-wrap: pretty; }
.game--sea .link-arrow, .game--sea .src-link { color: var(--on-cobalt); }
@media (hover: hover) { .game--sea .link-arrow:hover, .game--sea .src-link:hover { color: var(--on-cobalt); text-decoration-thickness: 2px; } }

@media (max-width: 767px) {
  .sea__stats { gap: 4px 18px; font-size: 14px; }
  .sea__stage { height: min(600px, 76vh); --rw: 40px; }
  .wi { --d: 46px; }
  .wi:not(.is-front):not(.is-held) .wi__name { display: none; }
  .sea__bins { gap: 6px; }
  .wbin { height: 96px; }
  .wbin__body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "icon" "name"; justify-items: center; padding: 10px 4px 22px; text-align: center; }
  .wbin__hint { display: none; }
  .wbin__name { font-size: 13px; }
  .wbin__count { right: 50%; bottom: 6px; transform: translateX(50%); font-size: 1.1rem; }
  .wend__cols { grid-template-columns: minmax(0, 1fr); }
}