/* Shared look for Little Sparks: big round buttons, screens, sparkles. */
* { box-sizing: border-box; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; touch-action: none; }
body { font-family: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", system-ui, sans-serif; color: #33415c; }

.screen { position: fixed; inset: 0; display: none; }
.screen.on { display: flex; }

.btn {
  position: relative; width: 78px; height: 78px; border-radius: 50%; border: none; padding: 0; flex: none;
  font-size: 40px; line-height: 1; background: #fff; cursor: pointer; color: inherit; text-decoration: none;
  box-shadow: 0 6px 0 rgba(40,50,90,.18), 0 8px 16px rgba(40,50,90,.12);
  display: grid; place-items: center; touch-action: manipulation; transition: transform .08s, box-shadow .08s, opacity .2s;
}
.btn:active { transform: translateY(5px); box-shadow: 0 1px 0 rgba(40,50,90,.18); }
.btn[disabled] { opacity: .35; pointer-events: none; }
.btn.big { width: 120px; height: 120px; font-size: 62px; }
.btn.go { background: #4ade80; }
.btn.sun { background: #fde047; }
.corner { position: absolute; top: max(16px, env(safe-area-inset-top)); width: 66px; height: 66px; font-size: 32px; z-index: 15; }
.corner.left { left: max(16px, env(safe-area-inset-left)); }
.corner.right { right: max(16px, env(safe-area-inset-right)); }

.title { margin: 0; text-align: center; font-size: clamp(42px, 7.5vw, 84px); line-height: 1.05; font-weight: 900; }
.title span { display: inline-block; -webkit-text-stroke: 3px #fff; paint-order: stroke fill; text-shadow: 0 5px 0 rgba(40,50,90,.15); animation: kit-hop 2s ease-in-out infinite; }

/* a pointing hand above whatever she should tap next */
.pulse { animation: kit-pulse 1.1s ease-in-out infinite; }
.pulse::after {
  content: '👇'; position: absolute; font-size: 44px; top: -54px; left: 50%; translate: -50% 0; z-index: 3;
  animation: kit-hop 1.1s ease-in-out infinite; pointer-events: none;
}

.particle { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 60; font-size: 34px; animation: kit-fly 1.1s ease-out forwards; }

.wobble { animation: kit-shake .45s; }
.pop-in { animation: kit-pop .35s cubic-bezier(.3,1.6,.5,1) both; }

@keyframes kit-hop { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes kit-pulse { 0%,100% { scale: 1; } 50% { scale: 1.14; } }
@keyframes kit-bob { 0%,100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes kit-wiggle { 0%,100% { rotate: -6deg; } 50% { rotate: 6deg; } }
@keyframes kit-spin { to { rotate: 360deg; } }
@keyframes kit-shake { 20% { translate: -10px 0; } 40% { translate: 10px 0; } 60% { translate: -6px 0; } 80% { translate: 6px 0; } }
@keyframes kit-pop { from { scale: 0; } to { scale: 1; } }
@keyframes kit-fly {
  0% { transform: translate(var(--x), var(--y)) scale(.4); opacity: 1; }
  100% { transform: translate(calc(var(--x) + var(--dx)), calc(var(--y) + var(--dy))) scale(1.2); opacity: 0; }
}