/* Tap & Count — kids.devalab.app
 *
 * One number fills the screen; the whole screen is the button. Everything here
 * is sized in vh/vw/clamp so the same page works on a phone held either way,
 * a tablet, and a desktop, with no scrolling ever.
 */

/* ---- Per-number themes. The body carries data-n="1".."10"; each number owns
 * a background (--bg) and a deep shade (--deep) used for the numeral's sticker
 * shadow and the word. Neighbouring numbers are deliberately far apart on the
 * color wheel so every double-tap feels like a scene change. */
[data-n="1"]  { --bg: #ffc93c; --deep: #a66b00; }
[data-n="2"]  { --bg: #4ecdc4; --deep: #087f73; }
[data-n="3"]  { --bg: #ff87ab; --deep: #c2185b; }
[data-n="4"]  { --bg: #8ac926; --deep: #3d7200; }
[data-n="5"]  { --bg: #5aa9e6; --deep: #17568f; }
[data-n="6"]  { --bg: #ff8a5b; --deep: #ad3410; }
[data-n="7"]  { --bg: #b388eb; --deep: #5f3da1; }
[data-n="8"]  { --bg: #ff5d5d; --deep: #9e1b1b; }
[data-n="9"]  { --bg: #45d1f0; --deep: #086f8e; }
[data-n="10"] { --bg: #9b5de5; --deep: #45217e; }

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--bg);
  transition: background-color .45s ease;
  font-family: "Fredoka", "Baloo 2", "Comic Sans MS", system-ui, sans-serif;
  /* A toddler mashes the screen: no zoom, no selection, no long-press menu,
   * no grey tap flash. touch-action:manipulation also kills the double-tap
   * zoom gesture that would otherwise fight our double-tap = next. */
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* ---- Decorative layers ---- */

.glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 42%, rgba(255,255,255,.32), transparent 62%);
}

.bubbles { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }

.bubble {
  position: absolute;
  bottom: -18vmin;
  border-radius: 50%;
  background: rgba(255,255,255,.16);
  animation: rise linear infinite;
}
.b1 { left:  6%; width: 14vmin; height: 14vmin; animation-duration: 19s; animation-delay: -3s;  }
.b2 { left: 20%; width:  7vmin; height:  7vmin; animation-duration: 14s; animation-delay: -9s;  }
.b3 { left: 33%; width: 10vmin; height: 10vmin; animation-duration: 23s; animation-delay: -14s; }
.b4 { left: 48%; width:  5vmin; height:  5vmin; animation-duration: 12s; animation-delay: -5s;  }
.b5 { left: 60%; width: 12vmin; height: 12vmin; animation-duration: 21s; animation-delay: -17s; }
.b6 { left: 72%; width:  6vmin; height:  6vmin; animation-duration: 15s; animation-delay: -1s;  }
.b7 { left: 84%; width:  9vmin; height:  9vmin; animation-duration: 18s; animation-delay: -11s; }
.b8 { left: 93%; width:  5vmin; height:  5vmin; animation-duration: 13s; animation-delay: -7s;  }

@keyframes rise {
  from { transform: translateY(0); }
  to   { transform: translateY(-135vh); }
}

/* ---- The stage: one full-screen button ---- */

#stage {
  position: fixed;
  inset: 0;
  height: 100vh;   /* fallback */
  height: 100dvh;  /* the real mobile viewport, url bar included */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: calc(env(safe-area-inset-top, 0px) + 14px)
           env(safe-area-inset-right, 0px)
           calc(env(safe-area-inset-bottom, 0px) + 12px)
           env(safe-area-inset-left, 0px);
  cursor: pointer;
}

#stage:focus-visible {
  outline: 4px dashed rgba(255,255,255,.85);
  outline-offset: -10px;
}

/* ---- Progress dots ---- */

.dots { display: flex; gap: 7px; }

.dots span {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,.5);
  transition: transform .25s ease, background-color .25s ease;
}
.dots span.on {
  background: #fff;
  transform: scale(1.45);
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}

/* ---- The number itself ---- */

.figure {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 1.4vh, 14px);
  animation: bob 3.4s ease-in-out infinite;
}

.stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(4px, 1.4vh, 14px);
}

.numeral {
  font-weight: 700;
  font-size: min(54vh, 72vw);
  line-height: .95;
  color: #fff;
  /* Sticker look: a hard offset shadow in the number's deep shade, then a
   * soft drop below it. */
  text-shadow:
    0 .045em 0 var(--deep),
    0 .1em .14em rgba(0,0,0,.22);
}
/* Two digits are nearly twice as wide — "10" gets its own cap so it still
 * fits a portrait phone. */
[data-n="10"] .numeral { font-size: min(48vh, 44vw); }

.numeral.pop    { animation: pop .5s cubic-bezier(.34, 1.56, .64, 1); }
.numeral.wiggle { animation: wiggle .55s ease-in-out; }

.word {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: clamp(1.3rem, 5.5vw, 2.4rem);
  color: var(--deep);
}

/* Things to count: N emoji, max five per row so five-and-some reads as a
 * hand of five plus the rest. */
.objects {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .35em;
  font-size: clamp(1.7rem, min(8.5vw, 6vh), 3.4rem);
  max-width: 8.2em;
  min-height: 1.3em;
  line-height: 1.3;
}

.objects span {
  animation: popin .45s cubic-bezier(.34, 1.56, .64, 1) both;
}

/* ---- Parent hint ---- */

.hint {
  margin: 0;
  padding: .55em 1.2em;
  border-radius: 999px;
  background: rgba(0,0,0,.30);
  color: #fff;
  font-weight: 500;
  font-size: clamp(.8rem, 3.2vw, 1rem);
  letter-spacing: .02em;
  transition: opacity 1s ease;
}
.hint.hide { opacity: 0; }

/* ---- Squeezed landscape phones ---- */

@media (orientation: landscape) and (max-height: 500px) {
  .figure { flex-direction: row; gap: 5vw; }
  .numeral { font-size: min(58vh, 34vw); }
  [data-n="10"] .numeral { font-size: min(52vh, 30vw); }
  .word { font-size: clamp(1.1rem, 5vh, 1.8rem); }
  .objects { font-size: clamp(1.2rem, 7vh, 2.2rem); max-width: 8.2em; }
}

/* ---- Animations ---- */

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1.8%); }
}

@keyframes pop {
  0%   { transform: scale(.25) rotate(-8deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  20%      { transform: rotate(-6deg) scale(1.04); }
  45%      { transform: rotate(5deg)  scale(1.04); }
  70%      { transform: rotate(-3deg); }
}

@keyframes popin {
  0%   { transform: scale(0); }
  70%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .figure, .bubble, .numeral.pop, .numeral.wiggle, .objects span {
    animation: none;
  }
  body { transition: none; }
}