/* Frog Jump. Layout only; the frog and the pads are drawn in markup (kids-frog-core.js). */
.fr-stage{display:grid;gap:14px}
.fr-levels{margin-top:4px}

.fr-card{display:grid;justify-items:center;gap:2px;padding:12px 16px;border-radius:18px;background:rgba(255,255,255,.08);text-align:center}
.fr-op{margin:0;font-size:2.4rem;font-weight:900;line-height:1;color:#ffd54f;min-height:1em}
.fr-card p:last-child{margin:0;font-weight:700}

/* A row of lily pads; they wrap onto more lines on a phone, so no page scroll. */
.fr-line{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;row-gap:36px;column-gap:6px;max-width:760px;width:100%;margin:0 auto;padding:40px 4px 6px}
.fr-pad{position:relative;display:grid;place-items:center;width:clamp(40px,9vw,58px);aspect-ratio:1;padding:0;border:3px solid #2e7d32;border-radius:50%;background:radial-gradient(circle at 50% 45%,#8ee39a 0 42%,#43a047 43%);color:#0d3f20;font:inherit;font-weight:900;font-size:1.05rem;cursor:pointer;touch-action:manipulation;transition:transform .15s ease,box-shadow .15s ease}
.fr-pad:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,.25)}
.fr-pad:focus-visible{outline:4px solid #ffd54f;outline-offset:3px}
.fr-pad.fr-done{background:radial-gradient(circle at 50% 45%,#c8f2cf 0 42%,#7cc78a 43%)}
.fr-pad.fr-shake{animation:fr-shake .45s ease}
.fr-num{pointer-events:none}

.fr-frog{position:absolute;left:50%;top:-32px;width:32px;height:32px;transform:translateX(-50%);pointer-events:none}
.fr-frog svg{display:block;width:100%;height:100%}
.fr-frog.fr-hop{animation:fr-hop .5s ease}

.fr-trail{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0;padding:0;list-style:none;min-height:30px}
.fr-trail li{padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.12);font-weight:700}

.fr-actions{justify-content:center}
.fr-actions svg{width:22px;height:22px;flex:none}
.fr-win-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.fr-win:focus{outline:none}
.fr-howto{margin-top:28px}
.fr-steps{display:grid;gap:8px;padding-left:1.2em}

@keyframes fr-hop{
 0%,100%{transform:translate(-50%,0)}
 40%{transform:translate(-50%,-16px)}
}
@keyframes fr-shake{
 0%,100%{transform:translateX(0)}
 20%{transform:translateX(-6px)}
 40%{transform:translateX(6px)}
 60%{transform:translateX(-4px)}
 80%{transform:translateX(3px)}
}

@media (max-width:520px){
 .fr-line{row-gap:34px;column-gap:4px}
 .fr-op{font-size:2rem}
}

@media (prefers-reduced-motion:reduce){
 .fr-pad{transition:none}
 .fr-pad:hover{transform:none}
 .fr-pad.fr-shake,
 .fr-frog.fr-hop{animation:none}
}