/* Play with Ellie · a calm tap game for ages 4 to 7. Brand kit v1, same feel as Ellie's underwater clip. */
@font-face {
  font-family: "Fredoka";
  src: url("/assets/fonts/fredoka-latin.woff2") format("woff2");
  font-weight: 300 700; font-display: swap;
}

:root {
  --navy: #2E3253;
  --sun: #FDF2C5;
  --coral: #F56F56;
  --lagoon: #0EC0DB;
  --deep: #0293C6;
  --kelp: #8A9A2A;
  --ellie: #D29E76;
  --spots: #716166;
  --blush: #FBB5A8;
}

html, body {
  margin: 0; height: 100%; overflow: hidden;
  overscroll-behavior: none;
  background: #3CC4E2;
}
body {
  position: fixed; inset: 0;
  font-family: "Fredoka", ui-rounded, system-ui, sans-serif;
  color: var(--navy);
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.sea {
  position: absolute; inset: 0; overflow: hidden;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(253, 242, 197, 0.55), transparent 60%),
    linear-gradient(180deg, #A4E2F1 0%, #49C7E4 26%, #16B2DA 52%, #0BA0CE 76%, #2FB0D2 100%);
  cursor: pointer;
}

/* sun rays from the surface */
.sea__light { position: absolute; inset: 0; pointer-events: none; }
.sea__light i {
  position: absolute; top: -6%; left: 50%;
  width: 11vw; min-width: 60px; height: 115%;
  transform-origin: 50% 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 72%);
  filter: blur(14px); opacity: 0.28;
  animation: ray 14s ease-in-out infinite alternate;
}
.sea__light i:nth-child(1) { transform: translateX(-50%) rotate(-34deg); animation-delay: -3s; }
.sea__light i:nth-child(2) { transform: translateX(-50%) rotate(-16deg); width: 7vw; animation-delay: -8s; }
.sea__light i:nth-child(3) { transform: translateX(-50%) rotate(2deg); width: 14vw; animation-delay: -1s; }
.sea__light i:nth-child(4) { transform: translateX(-50%) rotate(19deg); width: 8vw; animation-delay: -11s; }
.sea__light i:nth-child(5) { transform: translateX(-50%) rotate(35deg); animation-delay: -6s; }
@keyframes ray { from { opacity: 0.16; } to { opacity: 0.42; } }

/* kelp, swaying slowly */
.kelp { position: absolute; bottom: 8vh; height: 78vh; width: auto; pointer-events: none; }
.kelp--left { left: -2vw; }
.kelp--right { right: -2vw; }
.kelp__frond { transform-box: fill-box; transform-origin: 50% 100%; animation: sway 9s ease-in-out infinite alternate; }
.kelp__frond--b { animation-duration: 11s; animation-delay: -4s; }
@keyframes sway { from { transform: rotate(-2.2deg); } to { transform: rotate(2.2deg); } }
.kelp__stem { fill: none; stroke: #7E8F24; stroke-width: 9; stroke-linecap: round; }
.kelp__stem--back { stroke: rgba(110, 126, 31, 0.55); stroke-width: 7; }
.kelp__leaf { fill: var(--kelp); }
.kelp__leaf--dark { fill: #6F7E1F; }
.kelp__leaf--back { fill: rgba(110, 126, 31, 0.5); }

/* sandy floor */
.sand {
  position: absolute; left: 0; right: 0; bottom: 0; height: 20vh;
  background:
    radial-gradient(40% 30% at 20% 40%, rgba(255, 255, 255, 0.35), transparent 70%),
    radial-gradient(30% 25% at 70% 60%, rgba(255, 255, 255, 0.3), transparent 70%),
    linear-gradient(180deg, #F3DDB3 0%, #ECCD98 100%);
}
.sand svg { position: absolute; left: 0; bottom: 100%; width: 100%; height: 40px; margin-bottom: -1px; }
.sand path { fill: #F3DDB3; }

.layer { position: absolute; inset: 0; pointer-events: none; }
.layer > * { pointer-events: auto; }
.layer--fx > * { pointer-events: none; }

/* Ellie */
.ellie {
  position: absolute; left: 0; top: 0;
  width: 220px; aspect-ratio: 260 / 110;
  will-change: transform;
  outline: none;
  z-index: 3;
}
.ellie:focus-visible .ellie__svg { filter: drop-shadow(0 0 0 #fff) drop-shadow(0 0 6px #fff); }
.ellie__turn { width: 100%; height: 100%; transition: transform 1.1s ease-in-out; }
.ellie__turn.is-right { transform: scaleX(-1); }
.ellie__loop { width: 100%; height: 100%; transform-origin: 50% 120%; }
.ellie__svg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 18px 14px rgba(2, 80, 120, 0.18)); }
.ellie__tail { transform-box: fill-box; transform-origin: 0% 50%; animation: wag 1.8s ease-in-out infinite alternate; }
@keyframes wag { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
.e-body { fill: var(--ellie); }
.e-fin { fill: #C68F66; }
.e-belly { fill: #F6E6CF; }
.e-spots circle, .e-spot { fill: var(--spots); }
.e-gills { fill: none; stroke: #B48463; stroke-width: 2; stroke-linecap: round; }
.e-eye { fill: #3A2A24; }
.e-glint { fill: #fff; }
.e-cheek { fill: var(--blush); opacity: 0.75; }
.e-smile { fill: none; stroke: #5A3F37; stroke-width: 2.5; stroke-linecap: round; }

/* litter: a big, forgiving tap target around each piece */
.litter {
  position: absolute; left: 0; top: 0;
  width: 92px; height: 92px; padding: 0; border: 0; background: none;
  display: grid; place-items: center;
  cursor: pointer; z-index: 4;
  -webkit-tap-highlight-color: transparent;
}
.litter svg { width: 68%; height: 68%; overflow: visible; animation: rock 4.5s ease-in-out infinite alternate; }
@keyframes rock { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
.litter:focus-visible { outline: 3px solid #fff; outline-offset: -6px; border-radius: 50%; }
.litter.is-going svg { animation: none; }
.litter.is-going::before {
  content: ""; position: absolute; inset: 6px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.85) 0 10%, rgba(255, 255, 255, 0.28) 14% 50%, rgba(255, 255, 255, 0.12));
  border: 2px solid rgba(255, 255, 255, 0.85);
}
.litter.hint::after {
  content: ""; position: absolute; inset: 4px; border-radius: 50%;
  border: 4px solid rgba(253, 242, 197, 0.95);
  animation: hint 1.8s ease-out infinite;
}
@keyframes hint { 0% { transform: scale(0.7); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }

/* friends */
.friend { position: absolute; left: 0; top: 0; cursor: pointer; z-index: 2; }
.friend svg { width: 100%; height: 100%; display: block; overflow: visible; }
.friend__swim { width: 100%; height: 100%; animation: swimbob 3.6s ease-in-out infinite alternate; }
@keyframes swimbob { from { transform: translateY(-5px); } to { transform: translateY(5px); } }
.friend--seastar .friend__swim, .friend--crab .friend__swim { animation: none; }
.friend--crab .friend__swim { animation: scuttle 6s ease-in-out infinite alternate; }
@keyframes scuttle { from { transform: translateX(-18px); } to { transform: translateX(18px); } }

/* bubbles (tap + ambient) */
.fxb {
  position: absolute; left: 0; top: 0; border-radius: 50%;
  background: radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.95) 0 10%, rgba(255, 255, 255, 0.32) 14% 40%, rgba(255, 255, 255, 0.08) 65%, rgba(255, 255, 255, 0.04));
  border: 1.5px solid rgba(255, 255, 255, 0.8);
}

/* Cleo's bucket */
.bucket {
  position: absolute; right: max(16px, env(safe-area-inset-right)); top: max(14px, env(safe-area-inset-top));
  width: 96px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  z-index: 6; pointer-events: none;
}
.bucket svg { width: 84px; height: 84px; overflow: visible; filter: drop-shadow(0 8px 10px rgba(2, 80, 120, 0.25)); }
.pail__handle { fill: none; stroke: var(--navy); stroke-width: 5; stroke-linecap: round; }
.pail__body { fill: var(--coral); }
.pail__rim { fill: #E25A43; }
.pail__star { fill: var(--sun); }
.bucket__dots { display: flex; gap: 8px; }
.bucket__dots i {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.25);
  transition: background-color 0.4s ease, transform 0.4s ease;
}
.bucket__dots i.on { background: var(--sun); transform: scale(1.15); box-shadow: 0 0 10px rgba(253, 242, 197, 0.9); }

/* grown-up controls (small, out of the way) */
.controls {
  position: absolute; left: max(12px, env(safe-area-inset-left)); top: max(12px, env(safe-area-inset-top));
  display: flex; gap: 8px; z-index: 6;
}
.ctl {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 14px; border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  background: rgba(255, 252, 240, 0.78);
  color: var(--navy); text-decoration: none;
  font: 500 0.92rem/1 "Fredoka", system-ui, sans-serif;
  cursor: pointer;
}
.ctl:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.ctl__icon { width: 12px; height: 12px; border-radius: 50%; background: var(--deep); }
.ctl[aria-pressed="false"] .ctl__icon { background: transparent; border: 2px solid var(--deep); width: 8px; height: 8px; }

@media (prefers-reduced-motion: reduce) {
  .sea__light i, .kelp__frond, .litter svg, .friend__swim { animation: none !important; }
  .ellie__turn { transition: none; }
}
.friend__face { width: 100%; height: 100%; }
.friend.is-right .friend__face { transform: scaleX(-1); }

.ctl--round { width: 46px; height: 46px; padding: 0; justify-content: center; }
.ctl--round svg { width: 24px; height: 24px; fill: none; stroke: var(--navy); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ctl--round .spk { fill: var(--navy); }
.ctl--round .off { display: none; }
.ctl[aria-pressed="false"] .wave { display: none; }
.ctl[aria-pressed="false"] .off { display: inline; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 900px) {
  .bucket { width: 120px; }
  .bucket svg { width: 108px; height: 108px; }
  .bucket__dots i { width: 20px; height: 20px; }
}