/* Frog Hop (js/arcade/frog.js). Every class starts with .fh- */

/*
 * Sizes: the pond is the stage's width (--pw) and --ph tall, and shows 4.4 rows at once (VIEW in
 * frog.js). Pads and the frog are sized from both, so they stay big on a phone and an iPad.
 */
.fh-wrap {
  --pw: min(calc(100vw - 32px), 688px);
  --ph: clamp(340px, calc(100svh - 268px), 900px);
  --row: calc(var(--ph) / 4.4);
  --pad: min(calc(var(--row) * 0.8), calc(var(--pw) * 0.24), 150px);
  --frog: calc(var(--pad) * 0.76);
  --grass: #CDEFA9;
  --grass-d: #B3E28B;
  display: grid; justify-items: center; gap: 8px; width: 100%;
}
.fh-pads4 { --pad: min(calc(var(--row) * 0.76), calc(var(--pw) * 0.205), 136px); }
.fh-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- the HUD and the count ---------- */

.fh-hud { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; align-items: center; font: 700 14px var(--font-ui); color: var(--muted); }
.fh-hud b { color: var(--ink); font-size: 17px; }
.fh-trips { display: inline-flex; align-items: center; gap: 5px; }
.fh-trips::before { content: '🐸'; font-size: 16px; margin-right: 1px; }
.fh-trips i { width: 15px; height: 15px; border-radius: 50%; background: #E2F3EE; box-shadow: inset 0 0 0 2px #BCE5DB; }
.fh-trips i.fh-now { background: #fff; box-shadow: inset 0 0 0 3px var(--teal); }
.fh-trips i.fh-done { background: var(--teal); box-shadow: inset 0 -3px 0 var(--teal-d); }

.fh-count { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; width: 100%; padding: 8px 12px; background: var(--card); border-radius: 18px; box-shadow: var(--shadow-soft); }
.fh-rule { font: 800 15px/1 var(--font-ui); color: #fff; background: var(--teal); padding: 7px 12px 8px; border-radius: 999px; box-shadow: inset 0 -3px 0 var(--teal-d); white-space: nowrap; }
.fh-rule.fh-back { background: var(--grape); box-shadow: inset 0 -3px 0 var(--grape-d); }
/* On a phone the words sit above the numbers, so the card never changes height as the count grows. */
@media (max-width: 560px) { .fh-count { flex-direction: column; gap: 4px; padding: 7px 12px; } .fh-rule { font-size: 14px; padding: 6px 12px 7px; } }
.fh-trail { font: 900 clamp(26px, 7.6vw, 34px)/1.15 var(--font-ui); color: #A9A4BD; white-space: nowrap; }
.fh-trail i { font-style: normal; color: #C9C4D9; }
.fh-trail b.fh-now { color: var(--ink); display: inline-block; animation: fh-pop-in 0.4s ease-out; }
.fh-trail .fh-q { display: inline-block; min-width: 1.3em; padding: 0 6px; text-align: center; color: var(--teal-d); background: #E6F8F4; border: 3px dashed #7FD3C2; border-radius: 12px; }
.fh-trail .fh-yay { display: inline-block; animation: fh-pop-in 0.5s ease-out; }

.fh-msg { min-height: 1.4em; margin: 0; font: 800 17px var(--font-ui); color: var(--teal-d); text-align: center; }

/* ---------- the pond ---------- */

.fh-pond {
  position: relative; width: 100%; height: var(--ph); border-radius: var(--radius); overflow: hidden; touch-action: manipulation;
  background:
    radial-gradient(ellipse 34% 9% at 24% 38%, rgba(255, 255, 255, 0.4), transparent 70%),
    radial-gradient(ellipse 26% 7% at 78% 64%, rgba(255, 255, 255, 0.32), transparent 70%),
    radial-gradient(ellipse 20% 6% at 60% 16%, rgba(255, 255, 255, 0.3), transparent 70%),
    linear-gradient(180deg, #BFEFF5 0%, #A7E3EF 55%, #9CDCEC 100%);
  box-shadow: inset 0 0 0 4px #93D8E4, var(--shadow-soft);
}
/*
 * The track holds the whole crossing; it slides down to show the rows ahead (--cam rows). It
 * starts a moment after the frog takes off, so she sees the frog hop up before the pond follows.
 */
.fh-track { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--row) * var(--n, 6)); transform: translateY(calc(var(--row) * var(--cam, 0))); transition: transform 0.62s cubic-bezier(0.45, 0, 0.3, 1) 0.18s; }
.fh-track.fh-instant { transition: none; }
.fh-row, .fh-bank { position: absolute; left: 0; right: 0; height: var(--row); bottom: calc(var(--row) * var(--i)); }
.fh-sway { position: absolute; inset: 0; }
/* Anything placed on the pond: --x is % across, --y is % of a row up or down from its middle. */
.fh-spot { position: absolute; left: calc(var(--x) * 1%); top: calc(50% + var(--y) * 1%); }

/* The banks: soft grass with a scalloped edge to the water. */
.fh-near { height: calc(var(--row) * 0.86); background: linear-gradient(180deg, var(--grass) 0%, var(--grass-d) 100%); }
.fh-near::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 13px; background: radial-gradient(circle at 50% 100%, var(--grass) 0 12px, transparent 13px) 0 0 / 28px 13px repeat-x; }
.fh-far { height: calc(var(--row) * 0.86); bottom: calc(var(--row) * (var(--i) + 0.14)); background: linear-gradient(180deg, var(--grass-d) 0%, var(--grass) 100%); }
.fh-far::before { content: ''; position: absolute; left: 0; right: 0; bottom: -12px; height: 13px; background: radial-gradient(circle at 50% 0, var(--grass) 0 12px, transparent 13px) 0 0 / 28px 13px repeat-x; }
.fh-deco { width: 1.2em; height: 1.2em; margin: -0.6em 0 0 -0.6em; display: grid; place-items: center; font-size: calc(var(--row) * 0.26); line-height: 1; }
.fh-stone { width: calc(var(--frog) * 1.45); height: calc(var(--frog) * 0.9); margin: calc(var(--frog) * -0.45) 0 0 calc(var(--frog) * -0.725); border-radius: 50%; background: radial-gradient(ellipse at 40% 30%, #F7F7F4, #DED6C9 78%); box-shadow: inset 0 -6px 0 rgba(120, 100, 80, 0.14), 0 4px 0 rgba(80, 140, 60, 0.25); }
.fh-stone b { position: absolute; left: 50%; bottom: -14%; transform: translateX(-50%); min-width: 1.6em; padding: 2px 8px; border-radius: 999px; background: #fff; box-shadow: 0 2px 0 rgba(46, 42, 71, 0.12); font: 900 calc(var(--frog) * 0.3)/1.1 var(--font-ui); color: var(--ink); text-align: center; z-index: 4; }
.fh-seat { width: var(--frog); height: var(--frog); margin: calc(var(--frog) / -2) 0 0 calc(var(--frog) / -2); }
.fh-friend { width: 1.2em; height: 1.2em; margin: -0.6em 0 0 -0.6em; display: grid; place-items: center; font-size: calc(var(--frog) * 0.82); line-height: 1; animation: fh-friend 2.8s ease-in-out infinite; }
.fh-friend.fh-yay { animation: fh-yay 0.45s ease-in-out 4; }
.fh-ripple { width: calc(var(--row) * 0.56); height: calc(var(--row) * 0.2); margin: calc(var(--row) * -0.1) 0 0 calc(var(--row) * -0.28); border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.55); animation: fh-ripple 4.5s ease-in-out infinite; pointer-events: none; }

/* ---------- lily pads ---------- */

.fh-pad {
  width: var(--pad); height: var(--pad); margin: calc(var(--pad) / -2) 0 0 calc(var(--pad) / -2);
  padding: 0; border: 0; border-radius: 50%; background: none; display: grid; place-items: center;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 4px 0 rgba(30, 120, 130, 0.2));
  transition: scale 0.35s, opacity 0.35s, filter 0.35s, box-shadow 0.35s;
}
.fh-leaf { position: absolute; inset: 0; width: 100%; height: 100%; rotate: var(--rot, 0deg); pointer-events: none; }
.fh-num { position: relative; font: 900 calc(var(--pad) * 0.42)/1 var(--font-ui); color: var(--ink); letter-spacing: -0.5px; -webkit-text-stroke: calc(var(--pad) * 0.075) #fff; paint-order: stroke fill; pointer-events: none; }
.fh-num.fh-long { font-size: calc(var(--pad) * 0.32); letter-spacing: -1px; }
/* The row to hop to: a soft white halo and a gentle bob. */
.fh-next .fh-pad { box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.75), 0 0 20px 6px rgba(255, 255, 255, 0.5); animation: fh-bob 1.8s ease-in-out infinite; }
.fh-next .fh-pad:nth-of-type(2) { animation-delay: -0.45s; }
.fh-next .fh-pad:nth-of-type(3) { animation-delay: -0.9s; }
.fh-next .fh-pad:nth-of-type(4) { animation-delay: -1.35s; }
.fh-row .fh-pad.fh-nudge { animation: fh-nudge 0.45s ease-out; }
/* Rows further on are a little smaller and paler: the next row is the one to tap. */
.fh-next ~ .fh-row .fh-pad { scale: 0.88; opacity: 0.8; filter: saturate(0.75) drop-shadow(0 3px 0 rgba(30, 120, 130, 0.16)); }
/* A wrong pad wobbles, sinks a little and stays sunk. */
.fh-row .fh-pad.fh-sunk { animation: fh-sink 0.65s ease-out both; filter: saturate(0.4) brightness(0.93); opacity: 0.55; box-shadow: none; cursor: default; }
.fh-row .fh-pad.fh-gone { opacity: 0.4; scale: 0.84; filter: saturate(0.5); box-shadow: none; animation: none; }
.fh-row .fh-pad.fh-picked { box-shadow: none; animation: none; }
/* Right first time: a flower blooms on the pad. */
.fh-pad.fh-bloom::after { content: '🌸'; position: absolute; right: -2%; top: -2%; font-size: calc(var(--pad) * 0.28); line-height: 1; animation: fh-pop-in 0.5s 0.45s ease-out both; }
/* After a wrong try or two, the right pad glows. */
.fh-pad.fh-hint::before { content: ''; position: absolute; inset: -9%; border-radius: 50%; border: 4px solid #FFD54A; box-shadow: 0 0 16px rgba(255, 201, 60, 0.9); animation: fh-glow 1s ease-in-out infinite; pointer-events: none; }
.fh-ring { position: absolute; inset: 6%; border-radius: 50%; border: 4px solid rgba(255, 255, 255, 0.95); pointer-events: none; animation: fh-ring 0.65s ease-out forwards; }
.fh-splash { position: absolute; inset: 0; pointer-events: none; }
.fh-splash::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 4px solid rgba(255, 255, 255, 0.9); animation: fh-ring 0.6s ease-out forwards; }
.fh-splash i { position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; margin: -5.5px; border-radius: 50% 50% 50% 0; background: #F0FCFF; box-shadow: 0 0 0 2px #84D2E2; animation: fh-drop 0.6s ease-out forwards; }
.fh-splash i:nth-child(1) { --dx: -0.5; --dy: -0.4; }
.fh-splash i:nth-child(2) { --dx: -0.2; --dy: -0.62; }
.fh-splash i:nth-child(3) { --dx: 0.2; --dy: -0.62; }
.fh-splash i:nth-child(4) { --dx: 0.5; --dy: -0.4; }
.fh-splash i:nth-child(5) { --dx: -0.42; --dy: 0.12; }
.fh-splash i:nth-child(6) { --dx: 0.42; --dy: 0.12; }

/* ---------- the frog ---------- */

.fh-frog { width: var(--frog); height: var(--frog); margin: calc(var(--frog) / -2) 0 0 calc(var(--frog) / -2); pointer-events: none; z-index: 3; }
.fh-frog.fh-air { z-index: 6; }
.fh-shadow { position: absolute; left: 14%; right: 14%; bottom: -4%; height: 30%; border-radius: 50%; background: rgba(20, 90, 100, 0.22); }
.fh-body { position: absolute; inset: 0; display: block; }
.fh-body svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 2px 0 rgba(255, 255, 255, 0.8)); animation: fh-breathe 2.4s ease-in-out infinite; }
.fh-body.fh-squash { animation: fh-squash 0.35s ease-out; }
.fh-nope .fh-body svg { animation: fh-breathe 2.4s ease-in-out infinite, fh-nope 0.45s ease-in-out; }

/* ---------- celebrations ---------- */

.fh-pts { position: absolute; z-index: 7; transform: translate(-50%, -50%); font: 900 26px/1 var(--font-ui); color: var(--grape-d); -webkit-text-stroke: 4px #fff; paint-order: stroke fill; pointer-events: none; animation: fh-pts 0.9s ease-out both; }
.fh-burst { width: 0; height: 0; z-index: 7; pointer-events: none; }
.fh-burst i { position: absolute; left: 0; top: 0; width: 12px; height: 12px; margin: -6px; border-radius: 50%; background: #FF9DB4; font: normal 20px/12px sans-serif; text-align: center; animation: fh-fly 1s ease-out forwards; }
.fh-burst i:nth-child(3n + 2) { background: #FFD54A; }
.fh-burst i:nth-child(3n) { background: #8FE0CF; }
.fh-burst i:nth-child(3n + 1) { background: none; }
.fh-banner { position: absolute; inset: 0; z-index: 8; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 0 16px; text-align: center; pointer-events: none; background: radial-gradient(circle, rgba(255, 255, 255, 0.82) 0 32%, transparent 70%); animation: fh-banner 1.9s ease-out both; }
.fh-banner b { font: 900 clamp(30px, 9.5vw, 56px)/1.05 var(--font-ui); color: var(--teal-d); -webkit-text-stroke: 6px #fff; paint-order: stroke fill; }
.fh-banner small { font: 800 16px/1.2 var(--font-ui); color: var(--ink); background: #fff; border-radius: 999px; padding: 5px 14px; box-shadow: var(--shadow-soft); }

/* A fresh pond: the rows float in one after another. */
.fh-fresh .fh-row, .fh-fresh .fh-far { animation: fh-row-in 0.5s calc(var(--i) * 70ms) ease-out both; }

/* ---------- drift: later levels sway the rows gently, each the other way to the next ---------- */

.fh-drift1 .fh-sway { --sway: 3%; animation: fh-sway 9s ease-in-out infinite alternate; }
.fh-drift2 .fh-sway { --sway: 4%; animation: fh-sway 6.5s ease-in-out infinite alternate; }
.fh-sway.fh-flip { animation-direction: alternate-reverse; }
.fh-paused *, .fh-over * { animation-play-state: paused !important; }

@keyframes fh-sway { from { transform: translateX(calc(var(--sway) * -1)); } to { transform: translateX(var(--sway)); } }
@keyframes fh-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@keyframes fh-nudge { 0%, 100% { translate: 0 0; } 35% { translate: 0 -14px; } 65% { translate: 0 2px; } }
@keyframes fh-sink { 0% { scale: 1; rotate: 0deg; } 15% { scale: 1.06; rotate: -10deg; } 35% { rotate: 9deg; } 55% { rotate: -5deg; scale: 0.9; } 100% { scale: 0.8; rotate: 0deg; translate: 0 5%; } }
@keyframes fh-glow { 0%, 100% { opacity: 0.55; scale: 1; } 50% { opacity: 1; scale: 1.06; } }
@keyframes fh-ring { from { opacity: 1; scale: 0.7; } to { opacity: 0; scale: 1.55; } }
@keyframes fh-drop { 0% { opacity: 1; translate: 0 0; scale: 0.5; } 60% { opacity: 1; } 100% { opacity: 0; translate: calc(var(--dx) * var(--pad)) calc(var(--dy) * var(--pad)); scale: 1; } }
@keyframes fh-breathe { 0%, 100% { scale: 1; } 50% { scale: 1.04 0.97; } }
@keyframes fh-squash { 0% { scale: 1.18 0.78; } 45% { scale: 0.92 1.08; } 100% { scale: 1; } }
@keyframes fh-nope { 0%, 100% { translate: 0 0; } 20% { translate: -7% 0; } 40% { translate: 7% 0; } 60% { translate: -5% 0; } 80% { translate: 4% 0; } }
@keyframes fh-pop-in { 0% { scale: 0.3; opacity: 0; } 60% { scale: 1.25; opacity: 1; } 100% { scale: 1; } }
@keyframes fh-pts { 0% { opacity: 0; translate: 0 10px; scale: 0.5; } 25% { opacity: 1; scale: 1.2; } 100% { opacity: 0; translate: 0 -46px; scale: 1; } }
@keyframes fh-fly { 0% { opacity: 1; translate: 0 0; scale: 0.4; } 70% { opacity: 1; } 100% { opacity: 0; translate: var(--dx) var(--dy); scale: 1.1; } }
@keyframes fh-friend { 0%, 100% { rotate: -5deg; } 50% { rotate: 5deg; translate: 0 -3px; } }
@keyframes fh-yay { 0%, 100% { translate: 0 0; scale: 1; } 50% { translate: 0 -30%; scale: 1.15; } }
@keyframes fh-ripple { 0%, 100% { scale: 0.85; opacity: 0.4; } 50% { scale: 1.1; opacity: 0.9; } }
@keyframes fh-banner { 0% { opacity: 0; transform: scale(0.5) rotate(-6deg); } 16% { opacity: 1; transform: scale(1.08) rotate(2deg); } 28% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-16px); } }
@keyframes fh-row-in { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .fh-sway, .fh-next .fh-pad, .fh-friend, .fh-ripple, .fh-body svg, .fh-banner { animation: none !important; }
  .fh-track { transition: none; }
}