@import url('data:text/css,');

:root {
  color-scheme: light;
  font-family: ui-rounded, "SF Pro Rounded", "Avenir Next", system-ui, sans-serif;
  --ink: #25435a;
  --cream: #fff8df;
  --aqua: #6fd5d3;
  --deep-aqua: #36aeb5;
  --grass: #7ece67;
  --grass-dark: #4ea950;
  --cell-gap: clamp(3px, .75vw, 6px);
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; overscroll-behavior: none; }
body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 16%, rgba(255,255,255,.45) 0 3px, transparent 4px),
    radial-gradient(circle at 82% 26%, rgba(255,255,255,.3) 0 2px, transparent 3px),
    linear-gradient(160deg, #9ae7de 0%, #53c7cf 48%, #45b6c6 100%);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

button { font: inherit; color: inherit; }
.game-shell {
  position: relative;
  width: min(100vw, 560px);
  min-height: min(100vh, 920px);
  padding: clamp(18px, 4vw, 28px) clamp(18px, 5vw, 32px) 22px;
  overflow: hidden;
  isolation: isolate;
}
.game-shell::before, .game-shell::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 170px;
  height: 90px;
  border: 3px solid rgba(255,255,255,.16);
  border-radius: 50%;
  transform: rotate(-14deg);
}
.game-shell::before { top: 23%; left: -105px; }
.game-shell::after { bottom: 16%; right: -100px; transform: rotate(17deg); }

.topbar {
  display: grid;
  grid-template-columns: 52px 1fr 60px;
  align-items: center;
  gap: 12px;
  color: white;
  text-shadow: 0 2px 0 rgba(24,105,120,.2);
}
.icon-button {
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 16px;
  background: rgba(255,255,255,.22);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.28), 0 7px 18px rgba(21,104,119,.18);
  font-size: 29px;
  font-weight: 900;
  cursor: pointer;
}
.icon-button:active { transform: translateY(2px); }
.level-copy { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.level-copy span { font-size: 11px; font-weight: 900; letter-spacing: .19em; opacity: .82; }
.level-copy strong { margin-top: 5px; font-size: 25px; letter-spacing: -.02em; }
.moves { display: grid; justify-items: center; line-height: 1; }
.moves b { font-size: 28px; }
.moves span { margin-top: 4px; font-size: 9px; font-weight: 900; letter-spacing: .12em; opacity: .78; }

.mission {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px auto 14px;
  padding: 12px 15px;
  width: min(100%, 450px);
  border-radius: 20px;
  background: rgba(255,255,255,.85);
  box-shadow: 0 10px 26px rgba(21,96,105,.14), inset 0 0 0 2px rgba(255,255,255,.8);
  backdrop-filter: blur(8px);
}
.mission strong { font-size: 15px; }
.mission p { margin: 2px 0 0; font-size: 11px; line-height: 1.35; color: #527185; }
.blob-pair { position: relative; flex: 0 0 48px; height: 38px; }
.blob-pair span {
  position: absolute;
  top: 6px;
  width: 29px;
  height: 29px;
  border-radius: 50% 50% 44% 44%;
  background: linear-gradient(#ffe931, #ffbd19);
  border: 2px solid #413c57;
  box-shadow: inset 4px 4px 0 rgba(255,255,255,.3), 0 4px 5px rgba(73,62,40,.15);
}
.blob-pair span::after { content: ""; position: absolute; width: 8px; height: 11px; border-radius: 50%; background: #343044; top: 7px; left: 10px; }
.blob-pair span:first-child { left: 0; transform: rotate(-7deg); }
.blob-pair span:last-child { right: 0; transform: rotate(7deg); }

.world { position: relative; width: min(100%, 500px); margin: 0 auto; padding: 15px 6px 22px; }
.board {
  --pad: 12px;
  position: relative;
  z-index: 2;
  aspect-ratio: 1;
  padding: var(--pad);
  outline: none;
  touch-action: none;
  filter: drop-shadow(0 18px 18px rgba(28,99,95,.26));
}
.board::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 13%;
  background: #5eb85a;
  box-shadow: inset 0 -10px 0 #429b50, inset 0 4px 0 rgba(255,255,255,.18), 0 6px 0 #318c52;
  clip-path: polygon(5% 0, 95% 0, 100% 6%, 100% 94%, 94% 100%, 6% 100%, 0 94%, 0 6%);
}
.grid, .entities {
  position: absolute;
  inset: var(--pad);
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(7, 1fr);
  gap: var(--cell-gap);
}
.grid { z-index: 1; }
.entities { z-index: 3; pointer-events: none; }
.cell { position: relative; min-width: 0; min-height: 0; }
.floor-cell {
  border-radius: 18%;
  background:
    radial-gradient(circle at 24% 24%, rgba(255,255,255,.22) 0 3%, transparent 4%),
    linear-gradient(145deg, #96df74 0%, #70c95f 52%, #5cb759 100%);
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.16), inset -2px -3px 0 rgba(47,126,65,.16);
}
.floor-cell:nth-child(3n) { filter: hue-rotate(-4deg) brightness(1.02); }
.sprout { position: absolute; left: 14%; bottom: 8%; color: rgba(255,247,161,.72); font-size: clamp(8px, 2vw, 14px); transform: rotate(17deg); }
.block-cell { z-index: 2; }
.stone {
  position: absolute;
  inset: 2%;
  border-radius: 21% 21% 25% 25%;
  background: linear-gradient(145deg, #b9bad0 0%, #8589a6 55%, #636987 100%);
  border: clamp(1px, .45vw, 3px) solid #51556f;
  box-shadow: inset 4px 4px 0 rgba(255,255,255,.35), inset -5px -6px 0 rgba(56,61,89,.24), 0 5px 0 #414c6c, 0 9px 9px rgba(40,64,67,.26);
}
.stone::before, .stone::after { content: ""; position: absolute; border-radius: 50%; background: rgba(69,72,101,.32); }
.stone::before { width: 13%; height: 12%; left: 21%; top: 20%; }
.stone::after { width: 9%; height: 8%; right: 20%; bottom: 23%; }
.stone i { position: absolute; display: block; height: 3px; border-radius: 2px; background: rgba(255,255,255,.22); transform: rotate(-12deg); }
.stone i:nth-child(1) { width: 25%; left: 39%; top: 18%; }
.stone i:nth-child(2) { width: 16%; left: 18%; top: 58%; }
.stone i:nth-child(3) { width: 12%; right: 17%; top: 39%; }

.blob {
  position: absolute;
  width: calc((100% - (6 * var(--cell-gap))) / 7);
  height: calc((100% - (6 * var(--cell-gap))) / 7);
  left: calc(var(--col) * ((100% - (6 * var(--cell-gap))) / 7 + var(--cell-gap)));
  top: calc(var(--row) * ((100% - (6 * var(--cell-gap))) / 7 + var(--cell-gap)));
  display: grid;
  place-items: center;
  transition: left 220ms cubic-bezier(.2,.75,.25,1), top 220ms cubic-bezier(.2,.75,.25,1), transform 400ms ease, opacity 260ms ease, filter 250ms ease;
  will-change: left, top, transform;
}
.blob img { width: 112%; max-width: none; height: auto; display: block; filter: drop-shadow(0 4px 2px rgba(74,66,44,.1)); transform: translateY(-1%); }
.blob-tag {
  position: absolute;
  right: 0;
  top: -2px;
  display: grid;
  place-items: center;
  width: clamp(16px, 4vw, 22px);
  height: clamp(16px, 4vw, 22px);
  border-radius: 50%;
  background: #fff8c4;
  border: 2px solid #53475e;
  color: #6a5365;
  font-size: clamp(8px, 2vw, 11px);
  font-weight: 1000;
  box-shadow: 0 2px 0 rgba(52,50,68,.2);
}
.heart { display: none; position: absolute; top: -33%; color: #ff6b83; font-size: clamp(18px, 5vw, 30px); text-shadow: 0 2px 0 white; animation: heart-pop 600ms cubic-bezier(.17,.9,.35,1.4) both; }
.blob.is-reunited { z-index: 8; }
.blob.is-reunited.is-first { transform: translateX(-16%) rotate(-5deg); }
.blob.is-reunited.is-second { transform: translateX(16%) rotate(5deg); }
.blob.is-reunited .blob-tag { opacity: 0; }
.blob.is-reunited.is-second .heart { display: block; }
.blob.is-fallen { opacity: 0; transform: scale(.2) rotate(100deg); filter: blur(5px); }
@keyframes heart-pop { from { opacity: 0; transform: translateY(14px) scale(.2); } 60% { opacity: 1; transform: translateY(-3px) scale(1.3); } to { opacity: 1; transform: translateY(0) scale(1); } }

.direction-pulse {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 7;
  display: grid;
  width: 76px;
  height: 76px;
  place-items: center;
  border: 3px solid rgba(255, 255, 255, .84);
  border-radius: 50%;
  color: white;
  background: rgba(37, 67, 90, .34);
  box-shadow: 0 8px 18px rgba(22, 100, 108, .16);
  font-size: 48px;
  font-weight: 900;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.55);
}

.direction-pulse.show {
  animation: direction-pop .36s ease-out both;
}

@keyframes direction-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.55); }
  28% { opacity: .92; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -66%) scale(1.18); }
}

.swipe-cue {
  position: absolute;
  z-index: 10;
  left: 23%;
  top: 63%;
  display: grid;
  place-items: center;
  color: white;
  text-shadow: 0 2px 0 rgba(36,85,80,.25);
  animation: cue 1.35s ease-in-out infinite;
  pointer-events: none;
}
.swipe-cue span { font-size: clamp(30px, 8vw, 48px); font-weight: 900; }
.swipe-cue small { font-size: 8px; font-weight: 1000; letter-spacing: .2em; }
.swipe-cue.hidden { opacity: 0; transition: opacity 200ms; }
@keyframes cue { 0%,100% { transform: translateY(8px); opacity: .55; } 50% { transform: translateY(-12px); opacity: 1; } }
.pulse-up { animation: nudge-up 180ms ease; }
.pulse-down { animation: nudge-down 180ms ease; }
.pulse-left { animation: nudge-left 180ms ease; }
.pulse-right { animation: nudge-right 180ms ease; }
@keyframes nudge-up { 50% { transform: translateY(-3px); } }
@keyframes nudge-down { 50% { transform: translateY(3px); } }
@keyframes nudge-left { 50% { transform: translateX(-3px); } }
@keyframes nudge-right { 50% { transform: translateX(3px); } }

.island-shadow { position: absolute; left: 12%; right: 12%; bottom: 6%; height: 20px; border-radius: 50%; background: rgba(23,99,113,.21); filter: blur(8px); }
.water-lines { position: absolute; inset: 10% -7%; border: 3px solid rgba(255,255,255,.16); border-radius: 42% 58% 51% 49%; transform: rotate(6deg); }

.controls { display: grid; justify-items: center; margin-top: -2px; }
.controls > button, .controls div button {
  width: clamp(44px, 10vw, 56px);
  height: clamp(40px, 9vw, 50px);
  border: 0;
  border-radius: 16px;
  background: rgba(255,255,255,.2);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.22), 0 5px 12px rgba(29,101,114,.12);
  color: white;
  font-size: 23px;
  font-weight: 900;
  cursor: pointer;
}
.controls div { display: flex; gap: 10px; margin-top: 8px; }
.controls button:active { transform: translateY(2px); background: rgba(255,255,255,.35); }
.controls p { margin: 9px 0 0; color: rgba(255,255,255,.74); font-size: 9px; font-weight: 900; letter-spacing: .16em; }

.result {
  position: fixed;
  z-index: 50;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(23,73,89,.34);
  backdrop-filter: blur(7px);
  animation: veil 250ms ease both;
}
.result[hidden] { display: none; }
.result-card {
  width: min(88vw, 360px);
  padding: 28px 24px 24px;
  text-align: center;
  border-radius: 31px;
  background: linear-gradient(165deg, #fffdf1, #fff4cf);
  border: 4px solid rgba(255,255,255,.84);
  box-shadow: 0 24px 60px rgba(28,75,88,.32), inset 0 -5px 0 #f0d99f;
  animation: card-pop 520ms cubic-bezier(.16,.9,.25,1.18) both;
}
.result-stars { color: #f2be21; font-size: 26px; letter-spacing: .13em; }
.result-stars b { font-size: 52px; text-shadow: 0 4px 0 #dc9d17; }
.result.lost .result-stars { color: #8bcbd0; filter: grayscale(.3); }
.result-card h1 { margin: 9px 0 3px; color: #315268; font-size: 36px; letter-spacing: -.04em; }
.result-card p { margin: 0 0 19px; color: #668093; font-size: 14px; }
.result-card button { padding: 13px 24px; border: 0; border-radius: 15px; background: linear-gradient(#86d569,#55b852); color: white; font-weight: 900; box-shadow: 0 5px 0 #3b9949; cursor: pointer; }
@keyframes veil { from { opacity: 0; } }
@keyframes card-pop { from { opacity: 0; transform: scale(.65) translateY(30px); } to { opacity: 1; transform: scale(1) translateY(0); } }

@media (max-height: 760px) {
  .game-shell { padding-top: 12px; }
  .mission { margin: 10px auto 6px; padding-block: 9px; }
  .world { width: min(82vh, 460px); padding-bottom: 12px; }
  .controls p { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}