/* ohfrog.com - light, cheerful, phone first */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  color: #24421a;
  background:
    radial-gradient(120% 60% at 50% 105%, #b7e69d 0 38%, transparent 39%),
    radial-gradient(60% 40% at 15% 8%, rgba(255,255,255,.9), transparent 70%),
    linear-gradient(180deg, #d9f4ff 0%, #f1fbff 45%, #e9f9df 70%, #cdeeb7 100%);
  background-attachment: fixed;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

.app {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  max-width: 1200px;
  margin: 0 auto;
  padding: max(10px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
}

/* ---------- header ---------- */
.top { text-align: center; padding: 4px 46px 0; }
.title {
  margin: 0;
  font-size: clamp(2.6rem, 12vw, 5.2rem);
  line-height: 1.15;
  padding-bottom: .1em;                       /* room for the yellow shadow and the comma's tail */
  font-weight: 900;
  letter-spacing: -.02em;
  color: #2f8f2f;
  text-shadow: 0 .06em 0 #ffe066, 0 .1em 0 rgba(47,107,31,.25);
  display: inline-block;
  transform-origin: 50% 80%;
  animation: titleWobble 6s ease-in-out infinite;
}
.title span { color: #48b239; }
.tagline {
  margin: clamp(.45rem, 1.4vw, 1rem) auto 0;
  max-width: 34ch;
  font-size: clamp(.98rem, 3.9vw, 1.25rem);
  font-weight: 700;
  color: #4b6b3a;
}
@keyframes titleWobble {                     /* small enough never to bump into the tagline */
  0%, 86%, 100% { transform: rotate(0); }
  89% { transform: rotate(-1.2deg) translateY(-2px); }
  92% { transform: rotate(1deg) translateY(-1px); }
  95% { transform: rotate(-.5deg); }
}

/* ---------- stage + frog ---------- */
.stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 210px;
  margin: 6px 0 2px;
}
.frog-btn {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  border-radius: 24px;
}
.frog-btn:focus-visible { outline: 4px dashed #48b239; outline-offset: 2px; }
.frog { width: 100%; height: 100%; display: block; overflow: visible; }

.frog-all, .frog-body, .belly, .throat {
  transform-box: view-box;
}
.frog-all { transform-origin: 200px 372px; }
.frog-body { transform-origin: 200px 372px; animation: breathe 3.4s ease-in-out infinite; }
.belly { transform-origin: 200px 300px; animation: bellyWobble 1.7s ease-in-out infinite; }
.throat { transform-origin: 200px 250px; }

@keyframes breathe {
  0%, 100% { transform: scale(1, 1); }
  50% { transform: scale(1.018, .978); }
}
@keyframes bellyWobble {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.045, 1.06); }
}

.frog-all.squash { animation: squash .48s cubic-bezier(.3,1.6,.5,1); }
.frog-all.hop { animation: hop .7s cubic-bezier(.3,.9,.4,1); }
.frog-all.windup { animation: windup .28s ease-in-out; }
.throat.gulp { animation: gulp .6s ease-out; }
@keyframes squash {
  0% { transform: scale(1, 1); }
  25% { transform: scale(1.16, .8); }
  55% { transform: scale(.92, 1.1); }
  80% { transform: scale(1.03, .97); }
  100% { transform: scale(1, 1); }
}
@keyframes hop {
  0% { transform: translateY(0) scale(1, 1); }
  15% { transform: translateY(0) scale(1.12, .85); }
  45% { transform: translateY(-70px) scale(.94, 1.08) rotate(-4deg); }
  75% { transform: translateY(0) scale(1.1, .88); }
  100% { transform: translateY(0) scale(1, 1); }
}
@keyframes windup {
  0%, 100% { transform: scale(1, 1); }
  50% { transform: scale(1.06, .92); }
}
@keyframes gulp {
  0% { opacity: 0; transform: scale(.4); }
  30% { opacity: 1; transform: scale(1.35, 1.5); }
  70% { opacity: 1; transform: scale(1.1, 1.2); }
  100% { opacity: 0; transform: scale(.8); }
}

/* ---------- party (every 100th human) ---------- */
.frog .party-hat { display: none; }
.frog.party .party-hat { display: inline; }
.frog.jumping { transform-origin: 50% 100%; animation: partyJump .62s cubic-bezier(.3,.9,.4,1) 7; }
@keyframes partyJump {
  0%, 100% { transform: translateY(0) scale(1.06, .94); }
  45% { transform: translateY(-13%) scale(.95, 1.06) rotate(-3deg); }
  60% { transform: translateY(-13%) scale(.96, 1.05) rotate(3deg); }
}
.confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 30; }
.cf {
  position: absolute; width: 9px; height: 14px; border-radius: 2px;
  animation: confettiPop var(--dur, 2.6s) cubic-bezier(.2,.7,.4,1) forwards;
  animation-delay: var(--delay, 0s);
  opacity: 0;
}
.cf.round { border-radius: 50%; width: 10px; height: 10px; }
@keyframes confettiPop {
  0% { opacity: 1; transform: translate(0, 0) rotate(0); }
  25% { opacity: 1; transform: translate(var(--bx), var(--by)) rotate(calc(var(--r) * .3)); }
  100% { opacity: .9; transform: translate(var(--ex), var(--ey)) rotate(var(--r)); }
}
@keyframes confettiFade { 0% { opacity: 0; } 20%, 70% { opacity: 1; } 100% { opacity: 0; } }

/* moods: one mouth at a time */
.mouth, .brows { display: none; }
.frog .mouth-smile { display: inline; }
.frog.m-open .mouth-smile, .frog.m-happy .mouth-smile, .frog.m-grumpy .mouth-smile, .frog.m-surprised .mouth-smile { display: none; }
.frog.m-open .mouth-open, .frog.m-happy .mouth-open { display: inline; }
.frog.m-grumpy .mouth-frown, .frog.m-grumpy .brows-grumpy { display: inline; }
.frog.m-surprised .mouth-o, .frog.m-surprised .brows-up { display: inline; }
.frog.m-eyebrow .brows-one { display: inline; }
.frog.m-eyebrow .cheek { opacity: 1; }
.cheek { opacity: .8; transition: opacity .3s; }
.frog.m-happy .cheek { opacity: 1; }
.frog.m-grumpy .cheek { opacity: .45; }

/* ---------- speech bubble ---------- */
.bubble {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 0;
  max-width: min(78vw, 300px);
  padding: .55em .9em;
  background: #fff;
  color: #24421a;
  font-weight: 800;
  font-size: clamp(1rem, 4.2vw, 1.3rem);
  line-height: 1.2;
  text-align: center;
  border: 3px solid #2f6b1f;
  border-radius: 18px;
  box-shadow: 0 4px 0 rgba(47,107,31,.25);
  transform: translate(-50%, -100%) scale(.2);
  opacity: 0;
  pointer-events: none;
  transition: transform .22s cubic-bezier(.3,1.7,.5,1), opacity .15s;
}
.bubble::after {
  content: "";
  position: absolute;
  left: var(--tail, 50%);
  bottom: -13px;
  width: 20px; height: 20px;
  background: #fff;
  border-right: 3px solid #2f6b1f;
  border-bottom: 3px solid #2f6b1f;
  transform: translateX(-50%) rotate(45deg);
  border-bottom-right-radius: 4px;
}
.bubble.show { transform: translate(-50%, -100%) scale(1); opacity: 1; }

/* ---------- tongue + fly layer ---------- */
.sky {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 5;
  overflow: visible;
}
.wing { transform-box: fill-box; transform-origin: 50% 100%; animation: flap .05s linear infinite alternate; }
.wing-back { animation-delay: -.025s; }
@keyframes flap { from { transform: scaleY(1); } to { transform: scaleY(.25); } }
.buzz { font: italic 800 15px/1 ui-rounded, "Segoe UI", system-ui, sans-serif; fill: #4b6b3a; opacity: .8; }

/* ---------- scores, caption, wisdom ---------- */
.info { display: flex; flex-direction: column; gap: 8px; }
.scoreboard { text-align: center; }
.scores { display: flex; justify-content: center; gap: 10px; }
.score {
  flex: 0 1 150px;
  display: flex; flex-direction: column; align-items: center;
  padding: 6px 10px 7px;
  background: #fffef2;
  border: 3px solid #2f6b1f;
  border-radius: 16px;
  box-shadow: 0 4px 0 #2f6b1f;
}
.score .num { font-size: clamp(1.6rem, 7vw, 2.2rem); font-weight: 900; line-height: 1; color: #2f8f2f; }
.score-miss .num { color: #d0574b; }
.score .lbl { font-size: .85rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #5b7a48; }
.score .num.pop { animation: pop .5s cubic-bezier(.3,1.8,.5,1); }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.6) rotate(-6deg); } 100% { transform: scale(1); } }
.caption {
  margin: 8px auto 0;
  min-height: 2.5em;
  max-width: 36ch;
  font-weight: 700;
  font-size: clamp(.95rem, 3.8vw, 1.1rem);
  line-height: 1.25;
  color: #3e5e2e;
}

.wisdom {
  margin: 0;
  padding: 10px 14px 12px;
  background: rgba(255,255,255,.75);
  border: 3px dashed #8fcf6f;
  border-radius: 18px;
  text-align: center;
}
.wisdom figcaption { font-size: .8rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; color: #5b8a3c; }
.wisdom blockquote {
  margin: 4px auto 8px;
  max-width: 40ch;
  font-size: clamp(1rem, 4.1vw, 1.2rem);
  font-weight: 700;
  font-style: italic;
  line-height: 1.3;
  color: #24421a;
  min-height: 2.6em;
  display: flex; align-items: center; justify-content: center;
}
.wisdom blockquote.fresh { animation: pop .45s ease-out; }

/* every button gets the chunky push */
.btn {
  font: inherit;
  font-weight: 900;
  font-size: 1rem;
  color: #fff;
  background: #267a26;
  border: 3px solid #1d4f14;
  border-radius: 999px;
  min-height: 44px;
  min-width: 44px;
  padding: .5em 1.3em;
  box-shadow: 0 5px 0 #1d4f14;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .06s, box-shadow .06s, background .15s;
}
.btn:hover { background: #2c8a2c; }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #1d4f14; }
.btn:focus-visible { outline: 3px dashed #2f6b1f; outline-offset: 3px; }

.foot {
  text-align: center;
  color: #3f5f2f;
  padding: 8px 4px 2px;
}
.foot p { margin: 0 auto; max-width: 62ch; }
.about { font-size: .8rem; font-weight: 600; line-height: 1.3; }
.legal { margin-top: 3px !important; font-size: .72rem; font-weight: 600; color: #4b6b3a; line-height: 1.35; }
.legal-1, .legal-2 { display: block; }       /* phones: two neat lines */
.legal-sep { display: none; }

/* worldwide counters: one small line, hidden until the numbers arrive */
.world {
  margin-top: 3px !important;
  font-size: .74rem; font-weight: 700; line-height: 1.3;
  color: #2f6b1f;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: opacity .35s;
}
.foot .world { max-width: none; }
.world[hidden] { display: none; }
.world.fade { opacity: 0; }
.world b { font-weight: 900; color: #226b22; }

/* the company link: a little tongue licks across it */
.company {
  position: relative;
  display: inline-block;
  padding: 21px 1px 10px;                     /* 44px+ tall tap target without moving anything */
  margin: -21px 0 -10px;                      /* (mostly upwards, so it never pokes below the page) */
  color: #226b22;
  font-weight: 800;
  text-decoration: underline dotted rgba(34,107,34,.55);
  text-underline-offset: 3px;
  transition: color .2s;
}
.company::after, .company::before {
  content: "";
  position: absolute;
  pointer-events: none;
  transition: width .45s cubic-bezier(.3,1.5,.5,1), left .45s cubic-bezier(.3,1.5,.5,1), opacity .15s;
}
.company::after {                             /* the tongue */
  left: 0; bottom: 7px;
  width: 0; height: 3px;
  border-radius: 3px;
  background: #ff6fa5;
  box-shadow: 0 1px 0 #b0174f;
}
.company::before {                            /* its sticky tip */
  left: 0; bottom: 5px;
  width: 7px; height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: #ff4f8b;
  opacity: 0;
  z-index: 1;
}
.company:hover, .company:focus-visible { color: #2e8b2e; text-decoration-color: transparent; animation: linkWobble .5s ease-out; }
.company:hover::after, .company:focus-visible::after { width: 100%; }
.company:hover::before, .company:focus-visible::before { left: 100%; opacity: 1; }
.company:focus-visible { outline: 2px dashed #2f6b1f; outline-offset: -8px; border-radius: 4px; }
@keyframes linkWobble {
  0%, 100% { transform: rotate(0); }
  30% { transform: rotate(-1.5deg) translateY(-1px); }
  60% { transform: rotate(1deg); }
}
.noscript { position: fixed; top: 0; left: 0; right: 0; z-index: 5; margin: 0; padding: 8px; text-align: center; background: #fffef2; }

/* sound on/off: same chunky push, just small and round */
.sound-btn {
  position: absolute;
  z-index: 7;
  top: max(8px, env(safe-area-inset-top));
  right: max(8px, env(safe-area-inset-right));
  width: 44px; height: 44px;
  padding: 0;
  display: grid; place-items: center;
}
.sound-btn svg { width: 24px; height: 24px; }
.sound-btn .snd-off { display: none; }
.sound-btn[aria-pressed="false"] { background: #eef3e6; color: #3f5f2f; }
.sound-btn[aria-pressed="false"] .snd-on { display: none; }
.sound-btn[aria-pressed="false"] .snd-off { display: inline; }

/* share: the sound button's twin, top left */
.share-btn {
  position: absolute;
  z-index: 7;
  top: max(8px, env(safe-area-inset-top));
  left: max(8px, env(safe-area-inset-left));
  width: 44px; height: 44px;
  padding: 0;
  display: grid; place-items: center;
}
.share-btn svg { width: 22px; height: 22px; }

/* ---------- zapping flies ---------- */
.zap-mode, .zap-mode * { cursor: url("zap-cursor.svg") 16 16, crosshair !important; }
.score-zap .num { color: #d9620b; }
.fly.zapped .wing { display: none; }
.fly.zapped { filter: brightness(.35); }
.zap-beam { animation: fxFade .3s ease-out forwards; }
.zap-flash, .zap-text, .scorch { transform-box: fill-box; transform-origin: center; }
.zap-flash { animation: zapFlash .4s ease-out forwards; }
.zap-text {
  font: italic 900 32px/1 ui-rounded, "SF Pro Rounded", "Nunito", "Segoe UI", system-ui, sans-serif;
  fill: #ffd500;
  stroke: #c0392b;
  stroke-width: 3px;
  paint-order: stroke;
  animation: zapText .95s cubic-bezier(.3,1.6,.5,1) forwards;
}
.scorch { animation: puff .6s ease-out forwards; }
@keyframes fxFade { from { opacity: 1; } to { opacity: 0; } }
@keyframes zapFlash { 0% { transform: scale(.2); opacity: 1; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes zapText {
  0% { transform: scale(.2) rotate(-14deg); opacity: 0; }
  20% { transform: scale(1.2) rotate(-8deg); opacity: 1; }
  70% { transform: scale(1) rotate(-8deg); opacity: 1; }
  100% { transform: scale(1) rotate(-8deg) translateY(-16px); opacity: 0; }
}
@keyframes puff { 0% { transform: scale(.3); opacity: .75; } 100% { transform: scale(1.9); opacity: 0; } }

/* ---------- bigger screens ---------- */
@media (min-width: 820px) {
  .info { flex-direction: row; align-items: stretch; justify-content: center; gap: 18px; }
  .scoreboard { flex: 0 1 380px; display: flex; flex-direction: column; justify-content: center; }
  .wisdom { flex: 0 1 460px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
  .stage { min-height: 320px; }
  .legal-1, .legal-2 { display: inline; }   /* wide screens: one line with a dot */
  .legal-sep { display: inline; }
  .foot .legal { max-width: none; }
}
@media (min-width: 820px) and (max-height: 800px) {   /* laptops: keep it all on one screen */
  .stage { min-height: 250px; }
}

@media (max-width: 420px) {
  .scores { gap: 8px; }
  .score .lbl { font-size: .74rem; letter-spacing: .03em; }
}

/* short phones: squeeze a bit so nothing scrolls */
@media (max-height: 700px), (max-width: 380px) and (max-height: 780px) {
  .tagline { margin-top: .3rem; font-size: .92rem; }
  .title { font-size: clamp(2.3rem, 10vw, 3.4rem); }
  .caption { min-height: 0; margin-top: 4px; font-size: .9rem; }
  .wisdom { padding: 6px 10px 8px; }
  .wisdom blockquote { font-size: .95rem; min-height: 0; margin: 2px auto 5px; }
  .btn { padding: .3em 1.1em; font-size: .92rem; }
  .score { padding: 3px 8px 4px; }
  .foot { padding-top: 5px; }
  .about { font-size: .72rem; line-height: 1.25; }
  .legal { font-size: .66rem; }
  .world { font-size: .68rem; margin-top: 2px !important; }
  .stage { min-height: 186px; }
}

/* calmer for people who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  .title, .frog-body, .belly { animation: none; }
  .frog-all.squash, .frog-all.hop, .frog-all.windup { animation-duration: .01s; }
  .wing { animation-duration: .25s; }
  .bubble { transition: opacity .2s; transform: translate(-50%, -100%); }
  .score .num.pop, .wisdom blockquote.fresh { animation: none; }
  .zap-flash, .zap-text, .scorch { animation-name: fxFade; }
  .company, .company:hover, .company:focus-visible { animation: none; }
  .company::after, .company::before { transition: opacity .15s; }
  .world { transition: none; }
  .frog.jumping { animation: partyBob 1.4s ease-in-out 2; }      /* gentle version */
  .cf { animation-name: confettiFade; animation-timing-function: ease-in-out; }
}
@keyframes partyBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2%); } }