/* ================= Ocean Stickers ================= */
.game-stickers { justify-content: flex-start; gap: 2vmin; }
.stk-scene {
  position: relative; flex: 1 1 auto; width: 100%; min-height: 0; overflow: hidden; border-radius: 5vmin;
  background: linear-gradient(#7fd6ff, #3fa9e8 60%, #2b8fd6);
  box-shadow: inset 0 0 0 .8vmin rgba(255, 255, 255, .5), var(--shadow);
  animation: popIn .6s var(--pop) backwards;
}
.stk-rays {
  position: absolute; inset: -10% -20% 30%; pointer-events: none;
  background: repeating-linear-gradient(100deg, rgba(255, 255, 255, .2) 0 4vmin, transparent 4vmin 13vmin);
  -webkit-mask: linear-gradient(#000, transparent); mask: linear-gradient(#000, transparent);
  animation: stkRays 9s ease-in-out infinite alternate;
}
@keyframes stkRays { from { transform: translateX(-4%) skewX(-4deg); opacity: .7; } to { transform: translateX(4%) skewX(4deg); opacity: 1; } }
.stk-scene .bubble { z-index: 1; }
.stk-sand {
  position: absolute; left: -5%; right: -5%; bottom: -2vmin; height: 12vmin;
  background: radial-gradient(circle at 20% 30%, #ffe9b8 0 1vmin, transparent 1.1vmin) 0 0 / 7vmin 5vmin, #ffd98e;
  border-radius: 50% 50% 0 0 / 5vmin 5vmin 0 0;
}
.stk-decor { position: absolute; bottom: 3vmin; font-size: 12vmin; line-height: 1; pointer-events: none; }
.stk-weed { transform-origin: 50% 100%; animation: sway 3.2s ease-in-out infinite; }
.stk-rock { bottom: 1.5vmin; font-size: 9vmin; }
.stk-layer { position: absolute; inset: 0; z-index: 2; }

/* placed sticker */
.stk { position: absolute; width: 0; height: 0; touch-action: none; cursor: grab; }
.stk-move { position: absolute; left: 0; top: 0; }
.stk-bob { animation: stkBob 2.2s ease-in-out infinite; }
.stk-emoji {
  font-size: 11vmin; line-height: 1; transform: translate(-50%, -50%);
  filter: drop-shadow(0 .6vmin 0 rgba(0, 20, 60, .18));
}
.stk-new .stk-emoji { animation: stkPop .6s var(--pop); }
@keyframes stkPop {
  0% { transform: translate(-50%, -50%) scale(1.35, .7); }
  35% { transform: translate(-50%, -80%) scale(.85, 1.2); }
  70% { transform: translate(-50%, -50%) scale(1.1, .9); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
@keyframes stkBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5vmin); } }

/* fish emoji face left: swim left, turn around, swim back */
.stk-swim { animation: stkSwimL linear infinite; }
.stk-swim.stk-right { animation-name: stkSwimR; }
@keyframes stkSwimL {
  0% { transform: translateX(0) scaleX(1); }
  45% { transform: translateX(var(--d)) scaleX(1); }
  50% { transform: translateX(var(--d)) scaleX(-1); }
  95% { transform: translateX(0) scaleX(-1); }
  100% { transform: translateX(0) scaleX(1); }
}
@keyframes stkSwimR {
  0% { transform: translateX(0) scaleX(-1); }
  45% { transform: translateX(var(--d)) scaleX(-1); }
  50% { transform: translateX(var(--d)) scaleX(1); }
  95% { transform: translateX(0) scaleX(1); }
  100% { transform: translateX(0) scaleX(-1); }
}
.stk-walk { animation: stkWalk ease-in-out infinite; }
.stk-walk .stk-bob { animation: stkStep .35s ease-in-out infinite alternate; }
@keyframes stkWalk {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(var(--d)); }
}
@keyframes stkStep { from { transform: rotate(-7deg) translateY(0); } to { transform: rotate(7deg) translateY(-.8vmin); } }
.stk-pulse { animation: stkPulse ease-in-out infinite; }
.stk-pulse .stk-bob { animation: none; }
@keyframes stkPulse {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  30% { transform: translateY(-5vmin) scale(.88, 1.14); }
  60% { transform: translateY(-6vmin) scale(1.1, .92); }
}
.stk-wiggle { animation: stkWiggle ease-in-out infinite; }
.stk-wiggle .stk-bob { animation: none; }
@keyframes stkWiggle {
  0%, 75%, 100% { transform: rotate(0) scale(1); }
  80% { transform: rotate(-14deg) scale(1.1); }
  87% { transform: rotate(12deg) scale(1.1); }
  94% { transform: rotate(-6deg); }
}
.stk-sway { animation: stkSway ease-in-out infinite; transform-origin: 0 4vmin; }
.stk-sway .stk-bob { animation: none; }
@keyframes stkSway { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }

.stk-lifted { opacity: .25; }
.stk-drift { animation: stkDrift 1s ease-in forwards; pointer-events: none; }
@keyframes stkDrift { to { transform: translateY(-40vh) scale(.4); opacity: 0; } }
.stk-wash { animation: stkWash .5s ease-in forwards; pointer-events: none; }
@keyframes stkWash { to { transform: scale(0) rotate(200deg); opacity: 0; } }

/* dragged copy */
.stk-ghost { position: absolute; z-index: 10; }
.stk-ghost .stk-emoji {
  font-size: 13vmin; filter: drop-shadow(0 2.5vmin 1.5vmin rgba(0, 0, 0, .28));
  animation: stkDangle .9s ease-in-out infinite alternate;
}
@keyframes stkDangle {
  from { transform: translate(-50%, -50%) rotate(-8deg) scale(1.05); }
  to { transform: translate(-50%, -50%) rotate(8deg) scale(1.12, 1.02); }
}

/* clear button + sponge sweep */
.stk-clear {
  position: absolute; right: 2.5vmin; top: 2.5vmin; z-index: 3; width: 13vmin; height: 13vmin; min-width: 56px; min-height: 56px;
  border-radius: 50%; background: #fff; font-size: 7vmin; box-shadow: var(--shadow);
  display: grid; place-items: center; transition: transform .15s var(--pop);
}
.stk-clear:active { transform: scale(.88); }
.stk-sponge {
  position: absolute; top: 20%; left: -20vmin; z-index: 4; font-size: 26vmin; pointer-events: none;
  animation: stkSweep 1.1s cubic-bezier(.5, 0, .5, 1) forwards;
}
@keyframes stkSweep {
  0% { transform: translate(0, 0) rotate(-10deg); }
  25% { transform: translate(30vw, 12vh) rotate(10deg); }
  50% { transform: translate(60vw, -6vh) rotate(-10deg); }
  75% { transform: translate(90vw, 14vh) rotate(10deg); }
  100% { transform: translate(130vw, 0) rotate(-10deg); }
}

/* sticker tray */
.stk-tray { flex: none; gap: 1.6vmin; padding: 1.6vmin 3vmin; min-height: 0; }
.stk-src {
  width: 11vmin; height: 11vmin; min-width: 44px; min-height: 44px; border-radius: 3vmin; background: #fff;
  box-shadow: 0 .6vmin 0 rgba(0, 0, 0, .1); display: grid; place-items: center; touch-action: none; cursor: grab;
  animation: popIn .5s var(--pop) backwards; animation-delay: calc(var(--i) * 50ms + 200ms);
}
.stk-src span { font-size: 7.5vmin; line-height: 1; animation: bob 2.2s ease-in-out infinite; animation-delay: calc(var(--i) * -.3s); }
.stk-src:active { transform: scale(.9); }