/* Number play (static/number-play.js) and the think timer (static/game-kit.js).
   Number-play selectors start with .np-, the timer's with .pk-. No panel behind the game: the forest shows through,
   and legibility comes from glows, drop shadows and text shadows. Objects and choices are big tap targets. */

.np-game {
  --np-ink: #fffaf0;
  --np-font: "Fredoka", "Baloo 2", "Nunito", "Arial Rounded MT Bold", "Varela Round", Inter, ui-rounded, system-ui, sans-serif;
  --np-text-shadow: 0 2px 0 rgba(24, 14, 48, .55), 0 0 14px rgba(8, 10, 30, .75);
  --np-glow: #fff2a0;
  position: relative; box-sizing: border-box; width: 100%; height: 100%; min-width: 0; min-height: 0;
  flex: 1 1 100%; align-self: stretch;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto auto; grid-template-columns: minmax(0, 1fr); row-gap: 10px;
  padding: 2px 4px 6px; background: transparent; color: var(--np-ink); font-family: var(--np-font);
  pointer-events: auto; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.np-game *, .np-game *::before, .np-game *::after { box-sizing: border-box; }
.np-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

/* The forest layer styles every button (shadow, hover jump); ours start from a clean button. */
.np-game button[type] {
  appearance: none; -webkit-appearance: none; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit;
  cursor: pointer; filter: none; transform: none; transition: none; opacity: 1; pointer-events: auto; position: relative; display: block;
  touch-action: manipulation;
}
.np-game button[type]:hover { transform: none; }
.np-game button[type]:focus-visible { outline: 4px solid rgba(255, 236, 140, .95); outline-offset: 4px; border-radius: 18px; }

/* ---- top bar: progress stars · think timer; Back to games sits at the bottom, centred, as in every game ---- */
.np-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; min-height: 56px; }
.np-foot { display: flex; justify-content: center; }
.np-game button.np-back {
  justify-self: center; display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 6px 14px 6px 8px;
  border-radius: 999px; background: rgba(14, 20, 46, .5); border: 2px solid rgba(255, 255, 255, .3); color: #fff;
  font: 800 14px/1 var(--np-font); text-shadow: 0 1px 2px rgba(0, 0, 0, .4); white-space: nowrap;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
.np-game button.np-back svg { width: 18px; height: 18px; flex: none; }
.np-game button.np-back:hover { background: rgba(14, 20, 46, .72); }
.np-dots { display: flex; gap: 8px; justify-self: center; }
.np-dot { display: block; width: 22px; height: 22px; }
.np-dot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.np-dot path { fill: rgba(255, 255, 255, .16); stroke: rgba(255, 255, 255, .55); stroke-width: 1.4; stroke-linejoin: round; transition: fill .4s ease, stroke .4s ease; }
.np-dot.np-now path { fill: rgba(255, 255, 255, .08); stroke: #ffffff; stroke-width: 2; filter: drop-shadow(0 0 5px rgba(255, 255, 255, .95)); }
.np-dot.np-now svg { scale: 1.15; }
.np-dot.np-done path { fill: #ffd84a; stroke: #fff2b0; filter: drop-shadow(0 0 5px rgba(255, 210, 60, .9)); }
.np-dot.np-done svg { animation: npDotPop .6s cubic-bezier(.3, 1.6, .5, 1); }
.np-timer-slot { justify-self: end; display: grid; place-items: center; }

/* ---- the objects ---- */
.np-stage { position: relative; min-height: 0; }
.np-field { position: absolute; inset: 0; }
.np-tenframe {
  position: absolute; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(2, 1fr);
  border-radius: 22px; border: 3px solid rgba(255, 244, 210, .55); background: rgba(12, 22, 52, .22);
  box-shadow: 0 0 22px rgba(255, 240, 190, .2), inset 0 0 18px rgba(255, 255, 255, .06);
  transition: left .55s ease, top .55s ease, width .55s ease, height .55s ease;
}
.np-tenframe i { margin: 6%; border-radius: 18px; border: 2px dashed rgba(255, 255, 255, .28); }
.np-game button.np-obj {
  position: absolute; left: 0; top: 0; width: 90px; height: 90px; border-radius: 50%;
  transition: left .55s cubic-bezier(.4, 1.25, .5, 1), top .55s cubic-bezier(.4, 1.25, .5, 1), width .55s ease, height .55s ease;
}
.np-body { position: absolute; inset: 0; display: block; rotate: var(--rot, 0deg); animation: npBob 3.4s ease-in-out var(--bob, 0s) infinite; }
.np-pop { position: absolute; inset: 0; display: block; animation: npPop .55s cubic-bezier(.3, 1.5, .5, 1) var(--d, 0s) both; }
.np-art {
  position: absolute; left: 8%; top: 8%; width: 84%; height: 84%; display: block; overflow: visible;
  filter: drop-shadow(0 0 9px var(--np-glow)) drop-shadow(0 7px 7px rgba(0, 0, 0, .45));
  transition: scale .25s cubic-bezier(.3, 1.6, .5, 1), filter .25s ease, opacity .6s ease .2s;
}
.np-game button.np-obj:hover .np-art { scale: 1.06; }
.np-game button.np-obj:active .np-art { scale: .96; }
.np-tapped .np-art { scale: 1.04; filter: drop-shadow(0 0 14px #fff2a8) drop-shadow(0 0 4px #fff) drop-shadow(0 7px 7px rgba(0, 0, 0, .4)); }
.np-heard .np-art { filter: drop-shadow(0 0 16px #fff3b0) drop-shadow(0 0 3px #fff) drop-shadow(0 7px 7px rgba(0, 0, 0, .4)); }
.np-game button.np-obj.np-lit .np-art { scale: 1.16; filter: drop-shadow(0 0 20px #fff6c0) drop-shadow(0 0 6px #fff) drop-shadow(0 7px 7px rgba(0, 0, 0, .4)); }
.np-hint .np-art { animation: npGlow 1.1s ease-in-out infinite alternate; }

/* A tap shows its count, in tap order. */
.np-badge {
  position: absolute; left: 50%; bottom: 1%; translate: -50% 0; scale: 0; z-index: 2; pointer-events: none;
  min-width: clamp(28px, calc(var(--cell, 90px) * .36), 46px); height: clamp(28px, calc(var(--cell, 90px) * .36), 46px); padding: 0 .3em;
  border-radius: 999px; display: grid; place-items: center; background: #1b2350; border: 3px solid #ffe27a; color: #fff;
  font: 900 clamp(16px, calc(var(--cell, 90px) * .23), 27px)/1 var(--np-font);
  box-shadow: 0 0 12px rgba(255, 226, 122, .75), 0 4px 8px rgba(0, 0, 0, .35);
  transition: scale .3s cubic-bezier(.3, 1.7, .5, 1);
}
.np-tapped .np-badge { scale: 1; }

/* Taking away: a big cross, then the friend fades (still there to see, like 6 − 4 in the example). */
.np-cross {
  position: absolute; left: 16%; top: 16%; width: 68%; height: 68%; opacity: 0; scale: .3; rotate: -25deg; pointer-events: none;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .45));
  transition: opacity .2s ease, scale .4s cubic-bezier(.3, 1.7, .5, 1), rotate .4s ease;
}
.np-gone .np-cross { opacity: 1; scale: 1; rotate: 0deg; }
.np-gone .np-art { opacity: .62; filter: grayscale(.3) drop-shadow(0 6px 6px rgba(0, 0, 0, .35)); }
.np-gone .np-body { animation-play-state: paused; }
.np-game button.np-obj.np-gone { cursor: default; }
.np-game button.np-obj.np-gone:hover .np-art { scale: 1; }
.np-clue .np-gone .np-art { opacity: .42; }

/* Adding: the new ones arrive. */
.np-game button.np-obj.np-pending { visibility: hidden; pointer-events: none; }
.np-new .np-pop { animation: npArrive .85s cubic-bezier(.25, 1.35, .5, 1) var(--d2, 0s) both; }
.np-plus {
  position: absolute; display: grid; place-items: center; width: 70px; height: 70px; pointer-events: none;
  font: 900 70px/1 var(--np-font); color: #fff; text-shadow: 0 0 16px rgba(255, 240, 170, .95), 0 3px 0 rgba(30, 20, 60, .55);
  opacity: 0; scale: .3; transition: opacity .3s ease, scale .45s cubic-bezier(.3, 1.7, .5, 1), left .55s ease, top .55s ease;
}
.np-plus.np-show { opacity: 1; scale: 1; }

/* A little life for each friend (never enough to make counting harder). */
.np-game[data-theme="fish"] .np-body { animation-name: npSwim; animation-duration: 3s; }
.np-game[data-theme="butterflies"] .np-body,
.np-game[data-theme="fireflies"] .np-body { animation-name: npFlutter; animation-duration: 2.6s; }
.np-game[data-theme="frogs"] .np-body { animation-name: npHop; animation-duration: 3.8s; }
.np-game[data-theme="fireflies"] .np-art { animation: npFirefly 2.4s ease-in-out var(--bob, 0s) infinite alternate; }
.np-game[data-theme="fireflies"] .np-hint .np-art { animation: npGlow 1.1s ease-in-out infinite alternate; }
.np-game[data-theme="fireflies"] .np-tapped .np-art, .np-game[data-theme="fireflies"] .np-lit .np-art,
.np-game[data-theme="fireflies"] .np-heard .np-art, .np-game[data-theme="fireflies"] .np-gone .np-art { animation: none; }

/* ---- 3 + 2 = ? ---- */
.np-chip { justify-self: center; display: flex; align-items: center; gap: 10px; padding: 4px; opacity: 0; translate: 0 10px; transition: opacity .35s ease, translate .35s ease; }
.np-chip.np-show { opacity: 1; translate: 0 0; }
.np-box {
  min-width: 58px; height: 58px; padding: 0 10px; border-radius: 16px; display: grid; place-items: center;
  font: 900 36px/1 var(--np-font); color: #1d2147;
  background: linear-gradient(#fffaf0, #fff0d2) padding-box, linear-gradient(135deg, #ffb13b, #ff4fa3) border-box; border: 4px solid transparent;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .35), 0 0 16px rgba(255, 190, 120, .35);
}
.np-sign { min-width: 22px; text-align: center; font: 900 40px/1 var(--np-font); color: #fff; text-shadow: var(--np-text-shadow); }
.np-q { color: #ff4f7b; }
.np-q.np-filled { color: var(--np-num, #ff2fa8); animation: npPopIn .6s cubic-bezier(.3, 1.7, .5, 1); }

/* ---- the three number choices (clue 1) ---- */
.np-choices { display: none; justify-content: center; gap: 24px; padding: 2px 0 4px; }
.np-choices.np-show { display: flex; }
.np-game button.np-choice {
  width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center;
  font: 900 42px/1 var(--np-font); color: #1d2147;
  background: radial-gradient(circle at 35% 30%, #ffffff, #fff1cc 72%); border: 5px solid #ffd257;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .22), 0 8px 16px rgba(0, 0, 0, .4), 0 0 18px rgba(255, 214, 90, .5);
  animation: npPopIn .5s cubic-bezier(.3, 1.6, .5, 1) both; transition: translate .15s ease, opacity .3s ease, scale .2s ease, box-shadow .3s ease;
}
.np-game button.np-choice:nth-child(2) { animation-delay: .08s; }
.np-game button.np-choice:nth-child(3) { animation-delay: .16s; }
.np-game button.np-choice:hover { translate: 0 -4px; }
.np-game button.np-choice:active { scale: .94; }
.np-game button.np-choice.np-tried { opacity: .35; scale: .86; cursor: default; }
.np-game button.np-choice.np-fade { opacity: .3; }
.np-game button.np-choice.np-right { border-color: #6ee36f; scale: 1.08; box-shadow: 0 0 0 5px rgba(110, 227, 111, .45), 0 0 26px rgba(130, 255, 140, .85), 0 8px 16px rgba(0, 0, 0, .4); }

/* ---- the big numeral in a glowing frame (like the "17" example) ---- */
.np-reveal {
  --rh: 200px; position: absolute; left: 60%; top: 10%; width: 36%; height: 80%; z-index: 3; pointer-events: none;
  padding: calc(var(--rh) * .075); border-radius: 30% / 34%; background: var(--np-frame, #55e35f);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .92), 0 0 36px var(--np-frame, #55e35f), 0 14px 28px rgba(0, 0, 0, .45);
  opacity: 0; scale: .2; rotate: -8deg;
  transition: opacity .25s ease, scale .6s cubic-bezier(.3, 1.6, .45, 1), rotate .6s cubic-bezier(.3, 1.6, .45, 1);
}
.np-reveal.np-show { opacity: 1; scale: 1; rotate: 0deg; }
.np-reveal-in {
  width: 100%; height: 100%; border-radius: 27% / 31%; display: grid; place-items: center;
  background: radial-gradient(ellipse at 50% 38%, #ffffff 0%, var(--np-panel, #e3ffdc) 72%);
  box-shadow: 0 0 0 4px #fff, inset 0 -8px 16px rgba(0, 0, 0, .08);
}
.np-numeral { font: 900 calc(var(--rh) * .64)/1 var(--np-font); color: var(--np-num, #ff2fa8); letter-spacing: -.02em; text-shadow: 0 4px 0 rgba(0, 0, 0, .12); }
.np-spark {
  position: absolute; left: 50%; top: 50%; width: calc(var(--rh) * .11); height: calc(var(--rh) * .11); opacity: 0; translate: -50% -50%;
  background: #fff6b0; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  filter: drop-shadow(0 0 4px #fff);
}
.np-spark:nth-of-type(1) { --sx: calc(var(--rh) * -.78); --sy: calc(var(--rh) * -.52); }
.np-spark:nth-of-type(2) { --sx: calc(var(--rh) * .8); --sy: calc(var(--rh) * -.5); }
.np-spark:nth-of-type(3) { --sx: calc(var(--rh) * -.86); --sy: calc(var(--rh) * .3); }
.np-spark:nth-of-type(4) { --sx: calc(var(--rh) * .84); --sy: calc(var(--rh) * .34); }
.np-spark:nth-of-type(5) { --sx: calc(var(--rh) * -.18); --sy: calc(var(--rh) * -.72); }
.np-spark:nth-of-type(6) { --sx: calc(var(--rh) * .22); --sy: calc(var(--rh) * .7); }
.np-reveal.np-show .np-spark { animation: npSpark 1s ease-out .2s both; }

/* ---- the think timer (game-kit.js): a little moon in a ring that slowly empties; warm colours only ---- */
.pk-timer { --pk-size: 54px; position: relative; width: var(--pk-size); height: var(--pk-size); display: grid; place-items: center; transition: opacity .35s ease; }
.pk-timer.pk-idle { opacity: .55; }
.pk-ring { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; overflow: visible; }
.pk-track { fill: rgba(14, 20, 48, .55); stroke: rgba(255, 255, 255, .22); stroke-width: 5; }
.pk-arc { fill: none; stroke: #ffd86b; stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(255, 216, 107, .85)); transition: stroke-dashoffset .25s linear, stroke .4s ease; }
.pk-icon { position: relative; display: block; width: 58%; height: 58%; }
.pk-icon svg { display: block; width: 100%; height: 100%; }
.pk-timer.pk-held .pk-icon { opacity: .8; }
.pk-timer.pk-last { animation: pkPulse 1s ease-in-out infinite; }
.pk-timer.pk-last .pk-arc { stroke: #ffb86e; }

/* ---- motion ---- */
@keyframes npBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4%; } }
@keyframes npSwim { 0%, 100% { translate: 0 0; } 50% { translate: -5% -2%; } }
@keyframes npFlutter { 0%, 100% { translate: 0 0; } 25% { translate: 3% -4%; } 75% { translate: -3% -2%; } }
@keyframes npHop { 0%, 70%, 100% { translate: 0 0; } 80% { translate: 0 -10%; } 90% { translate: 0 0; } }
@keyframes npFirefly { from { filter: drop-shadow(0 0 6px #fff27a) drop-shadow(0 7px 7px rgba(0, 0, 0, .45)); } to { filter: drop-shadow(0 0 16px #fff27a) drop-shadow(0 7px 7px rgba(0, 0, 0, .45)); } }
@keyframes npPop { from { opacity: 0; scale: .3; } 70% { opacity: 1; scale: 1.08; } to { opacity: 1; scale: 1; } }
@keyframes npPopIn { from { opacity: 0; scale: .3; } 70% { opacity: 1; scale: 1.12; } to { opacity: 1; scale: 1; } }
@keyframes npArrive { from { opacity: 0; translate: 130% -90%; scale: .4; rotate: 25deg; } 55% { opacity: 1; } to { opacity: 1; translate: 0 0; scale: 1; rotate: 0deg; } }
@keyframes npGlow { from { filter: drop-shadow(0 0 6px var(--np-glow)) drop-shadow(0 7px 7px rgba(0, 0, 0, .45)); } to { filter: drop-shadow(0 0 22px #fff6c4) drop-shadow(0 0 6px #fff) drop-shadow(0 7px 7px rgba(0, 0, 0, .4)); } }
@keyframes npDotPop { 0% { scale: .5; } 60% { scale: 1.35; } 100% { scale: 1; } }
@keyframes npSpark { from { opacity: 0; translate: -50% -50%; scale: .4; } 30% { opacity: 1; } to { opacity: 0; translate: calc(-50% + var(--sx, 0px)) calc(-50% + var(--sy, 0px)); scale: 1.1; } }
@keyframes pkPulse { 0%, 100% { scale: 1; } 50% { scale: 1.12; filter: drop-shadow(0 0 10px rgba(255, 200, 110, .85)); } }

/* ---- phones (the layer is about 366 × 380 there) ---- */
@media (max-width: 820px) {
  .np-game { row-gap: 6px; padding: 0 2px 4px; }
  .np-bar { min-height: 46px; gap: 6px; }
  .np-game button.np-back { min-height: 36px; padding: 5px 11px 5px 6px; font-size: 13px; }
  .np-game button.np-back svg { width: 16px; height: 16px; }
  .np-dots { gap: 6px; }
  .np-dot { width: 18px; height: 18px; }
  .pk-timer { --pk-size: 46px; }
  .np-chip { gap: 7px; }
  .np-box { min-width: 46px; height: 46px; padding: 0 7px; border-radius: 13px; border-width: 3px; font-size: 28px; }
  .np-sign { min-width: 16px; font-size: 30px; }
  .np-choices { gap: 18px; }
  .np-game button.np-choice { width: 66px; height: 66px; border-width: 4px; font-size: 36px; }
  .np-tenframe { border-radius: 16px; }
  .np-tenframe i { border-radius: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .np-game *, .np-game *::before, .np-game *::after, .pk-timer, .pk-timer * { animation: none !important; transition: none !important; }
}