/* Number Bop (js/arcade/whack.js). Every class starts with .wn- */

/* --hh is a burrow's height; --u is 1% of it, so a critter and its sign scale with the burrow. */
.wn-wrap { --hh: clamp(92px, min(34vw, (100svh - 400px) / 3), 170px); --u: calc(var(--hh) / 100); display: grid; justify-items: center; gap: 8px; width: 100%; }
.wn-cols-4 { --hh: clamp(110px, min(28vw, (100svh - 440px) / 3), 230px); }
.wn-cols-4 .wn-hud { font-size: 16px; }
.wn-cols-4 .wn-hud b { font-size: 20px; }

.wn-hud { display: flex; gap: 6px 13px; flex-wrap: wrap; justify-content: center; align-items: baseline; font: 700 14px var(--font-ui); color: var(--muted); }
.wn-hud b { color: var(--ink); font-size: 17px; }
.wn-hud i { font-style: normal; }
.wn-mult { margin-left: 5px; padding: 1px 7px; border-radius: 999px; background: var(--sun); color: var(--ink); font: 900 13px/1.3 var(--font-ui); display: inline-block; animation: wn-bump 0.35s; }
.wn-mult[hidden] { display: none; }
.wn-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* The rule, on a little garden sign */
.wn-rule { width: 100%; min-height: 92px; display: grid; justify-items: center; align-content: center; gap: 4px; padding: 8px 14px; text-align: center; background: #FFFBEA; border-radius: var(--radius); box-shadow: inset 0 0 0 3px #F4DA8C, 0 4px 0 #EED9A0, var(--shadow-soft); }
.wn-rule.wn-flash { animation: wn-flash 0.6s ease-out; }
.wn-rule-line { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; column-gap: 9px; }
.wn-rule-pre, .wn-rule-post { font: 800 clamp(19px, 5.4vw, 26px)/1.1 var(--font-ui); color: var(--muted); }
.wn-rule-big { font: 900 clamp(36px, 10.5vw, 50px)/1 var(--font-ui); color: var(--grape-d); letter-spacing: 0.5px; }
.wn-hint { display: flex; align-items: center; justify-content: center; gap: 7px; flex-wrap: wrap; }
.wn-chips, .wn-strip { display: flex; gap: 4px; }
.wn-chip { font-style: normal; min-width: 25px; height: 26px; padding: 0 5px; display: grid; place-items: center; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 2px #E8DFF5; font: 800 15px/1 var(--font-ui); color: var(--muted); }
.wn-chips .wn-chip { color: var(--green-d); box-shadow: inset 0 0 0 2px #C3EDBE; }
.wn-strip .wn-chip { opacity: 0.6; }
.wn-strip .wn-chip.wn-yes { opacity: 1; background: #DDF7D6; color: #2F9A3A; box-shadow: inset 0 0 0 2px #8EDB8E; }
.wn-chip.wn-more { background: none; box-shadow: none; min-width: 0; padding: 0 2px; }
.wn-dots { display: inline-flex; gap: 5px; }
.wn-dot { width: 15px; height: 15px; border-radius: 50%; background: var(--grape); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15); }
.wn-plus { font: 900 20px/1 var(--font-ui); color: var(--muted); }
.wn-frame { display: grid; grid-template-columns: repeat(5, 17px); gap: 3px; padding: 4px; border-radius: 7px; background: #fff; box-shadow: inset 0 0 0 2px #E3DCF5; }
.wn-frame i { width: 17px; height: 17px; border-radius: 50%; box-shadow: inset 0 0 0 2px #E3DCF5; }
.wn-frame i.wn-on { background: var(--sky); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15); }

/* The goal: good bops take away wrong taps, up to the carrot */
.wn-goal { width: min(100%, 560px); display: flex; align-items: center; gap: 8px; }
.wn-goal-track { flex: 1; height: 16px; border-radius: 999px; background: #EFE9F7; overflow: hidden; box-shadow: inset 0 2px 0 rgba(46, 42, 71, 0.07); }
.wn-goal-fill { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #9BE59B, var(--green)); transition: width 0.3s ease; }
.wn-goal-n { font: 800 15px var(--font-ui); color: var(--ink); white-space: nowrap; }
.wn-goal-flag { font-size: 24px; line-height: 1; filter: grayscale(0.5) opacity(0.75); transition: filter 0.3s; }
.wn-goal.wn-done .wn-goal-fill { background: linear-gradient(90deg, #FFE27A, var(--sun), var(--lime)); }
.wn-goal.wn-done .wn-goal-flag { filter: none; animation: wn-hop 0.9s ease-in-out infinite; }

/* The garden: mown stripes, a few flowers, and the burrows */
.wn-garden {
  position: relative; width: 100%; display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 6px; padding: 12px 10px 8px; overflow: hidden;
  border-radius: var(--radius); touch-action: manipulation; background-color: #C2EBA9;
  background-image:
    radial-gradient(circle at 6% 6%, #FFE36E 0 3px, #fff 3.5px 6px, transparent 6.5px),
    radial-gradient(circle at 95% 4%, #FFE36E 0 3px, #FFB3CB 3.5px 6px, transparent 6.5px),
    radial-gradient(circle at 50% 98%, #FFE36E 0 3px, #fff 3.5px 6px, transparent 6.5px),
    radial-gradient(circle at 3% 60%, #FFE36E 0 2.5px, #C9B8FF 3px 5px, transparent 5.5px),
    radial-gradient(circle at 97% 66%, #FFE36E 0 2.5px, #fff 3px 5px, transparent 5.5px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0 40px, transparent 40px 80px);
  box-shadow: inset 0 0 0 3px #A9DD8E, var(--shadow-soft);
}
.wn-hole { position: relative; height: var(--hh); border: 0; padding: 0; margin: 0; background: none; border-radius: 18px; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.wn-hole:focus-visible { outline: 3px solid var(--sky); outline-offset: -2px; }
.wn-hole > span { position: absolute; pointer-events: none; }
.wn-pit { left: 11%; right: 11%; bottom: calc(var(--u) * 9); height: calc(var(--u) * 22); border-radius: 50%; background: radial-gradient(ellipse at 50% 30%, #3A2F28 0 48%, #5A4A3F 80%); box-shadow: 0 0 0 calc(var(--u) * 3.5) #D6C6AE, 0 calc(var(--u) * 2) 0 calc(var(--u) * 3.5) #B8A588; }
.wn-hole.wn-tap .wn-pit { animation: wn-thud 0.25s ease-out; }
/* the window a critter rises through: its bottom edge is the middle of the pit */
.wn-win { left: 0; right: 0; top: calc(var(--u) * -12); bottom: calc(var(--u) * 20); overflow: hidden; }
.wn-lip { left: 9%; right: 9%; bottom: calc(var(--u) * 5.5); height: calc(var(--u) * 27); border-radius: 50%; border-bottom: calc(var(--u) * 4.5) solid #E3D5C0; }

/* A critter: an ear pair, a round body, a kawaii face and a sign held in two paws */
.wn-critter { position: absolute; left: 50%; bottom: 0; width: calc(var(--u) * 64); height: calc(var(--u) * 84); margin-left: calc(var(--u) * -32); transform: translateY(108%); transition: transform 0.2s ease-in; --fur: #fff; --fur-d: #E9DDF3; --inner: #FFC2D4; --nose: #FF8FAB; }
.wn-critter.up { transform: none; transition: transform 0.26s cubic-bezier(0.3, 1.5, 0.6, 1); }
.wn-pose { position: absolute; inset: 0; transform-origin: 50% 100%; }
.wn-pose > * { position: absolute; display: block; font-style: normal; }
.wn-body { left: 0; right: 0; top: calc(var(--u) * 14); bottom: calc(var(--u) * -8); border-radius: 46% 46% 32% 32% / 50% 50% 30% 30%; background: var(--fur); box-shadow: inset 0 calc(var(--u) * -5) 0 var(--fur-d); }
.wn-eye { top: calc(var(--u) * 31); width: calc(var(--u) * 8.5); height: calc(var(--u) * 10.5); border-radius: 50%; background: radial-gradient(circle at 34% 30%, #fff 0 calc(var(--u) * 1.7), #2E2A47 calc(var(--u) * 2)); }
.wn-eye-l { left: calc(var(--u) * 16); }
.wn-eye-r { right: calc(var(--u) * 16); }
.wn-cheek { top: calc(var(--u) * 42); width: calc(var(--u) * 10); height: calc(var(--u) * 6); border-radius: 50%; background: #FF9FBF; opacity: 0.6; }
.wn-cheek-l { left: calc(var(--u) * 7); }
.wn-cheek-r { right: calc(var(--u) * 7); }
.wn-nose { top: calc(var(--u) * 41); left: 50%; width: calc(var(--u) * 6.5); height: calc(var(--u) * 4.5); margin-left: calc(var(--u) * -3.25); border-radius: 50% 50% 60% 60%; background: var(--nose); }
.wn-sign { left: 50%; bottom: calc(var(--u) * 3); z-index: 2; transform: translateX(-50%) rotate(-3deg); min-width: calc(var(--u) * 50); height: calc(var(--u) * 31); padding: 0 calc(var(--u) * 4); display: grid !important; place-items: center; background: #fff; border-radius: calc(var(--u) * 8); box-shadow: 0 0 0 calc(var(--u) * 2.4) #9A7558, 0 calc(var(--u) * 2.4) 0 calc(var(--u) * 2.4) #7A5A42; font: 900 calc(var(--u) * 26)/1 var(--font-ui); color: var(--ink); white-space: nowrap; }
.wn-long .wn-sign { font-size: calc(var(--u) * 21); }
.wn-sign::before, .wn-sign::after { content: ''; position: absolute; top: calc(var(--u) * 10); width: calc(var(--u) * 10); height: calc(var(--u) * 10); border-radius: 50%; background: var(--fur); box-shadow: inset 0 calc(var(--u) * -1.6) 0 var(--fur-d), 0 0 0 1px rgba(46, 42, 71, 0.1); }
.wn-sign::before { left: calc(var(--u) * -6); }
.wn-sign::after { right: calc(var(--u) * -6); }

.wn-bunny { --fur: #FFFFFF; --fur-d: #E9DDF3; --inner: #FFC2D4; --nose: #FF8FAB; }
.wn-bunny .wn-ear { top: calc(var(--u) * -9); width: calc(var(--u) * 14); height: calc(var(--u) * 36); border-radius: 50%; background: radial-gradient(ellipse at 50% 58%, var(--inner) 0 34%, var(--fur) 36%); box-shadow: inset 0 calc(var(--u) * -2) 0 var(--fur-d); }
.wn-bunny .wn-ear-l { left: calc(var(--u) * 12); transform: rotate(-12deg); }
.wn-bunny .wn-ear-r { right: calc(var(--u) * 12); transform: rotate(12deg); }

.wn-bear { --fur: #BFE3FF; --fur-d: #97CCF2; --inner: #FFD3E2; --nose: #4B4370; }
.wn-hamster { --fur: #E9DCCB; --fur-d: #CDB9A0; --inner: #FFB4B4; --nose: #E86F8F; }
.wn-bear .wn-ear, .wn-hamster .wn-ear { top: calc(var(--u) * 7); width: calc(var(--u) * 21); height: calc(var(--u) * 21); border-radius: 50%; background: radial-gradient(circle, var(--inner) 0 36%, var(--fur) 38%); box-shadow: inset 0 calc(var(--u) * -2) 0 var(--fur-d); }
.wn-bear .wn-ear-l, .wn-hamster .wn-ear-l { left: calc(var(--u) * 1); }
.wn-bear .wn-ear-r, .wn-hamster .wn-ear-r { right: calc(var(--u) * 1); }
.wn-hamster .wn-ear { top: calc(var(--u) * 10); width: calc(var(--u) * 17); height: calc(var(--u) * 17); }
.wn-hamster .wn-body { background: radial-gradient(56% 34% at 50% 52%, #FBF7F2 98%, transparent 100%), var(--fur); }

.wn-chick { --fur: #FFE46B; --fur-d: #F4C63D; --nose: #F2C200; }
.wn-chick .wn-ear { top: calc(var(--u) * 3); left: 50%; width: calc(var(--u) * 8); height: calc(var(--u) * 17); margin-left: calc(var(--u) * -4); border-radius: 50% 50% 40% 40%; background: var(--fur-d); transform-origin: 50% 100%; }
.wn-chick .wn-ear-l { transform: rotate(-22deg); }
.wn-chick .wn-ear-r { transform: rotate(18deg); }
.wn-chick .wn-nose { width: calc(var(--u) * 10); height: calc(var(--u) * 7); margin-left: calc(var(--u) * -5); border-radius: 50% 50% 50% 50% / 35% 35% 65% 65%; box-shadow: inset 0 calc(var(--u) * -1.5) 0 #CFA400; }
.wn-chick .wn-cheek { background: #FFA8BE; }

.wn-hedgehog { --fur: #EADFD3; --fur-d: #CFC0AE; --nose: #4B3A33; }
.wn-hedgehog .wn-ear-l { top: calc(var(--u) * 1); left: calc(var(--u) * -7); right: calc(var(--u) * -7); width: auto; height: calc(var(--u) * 66); background: linear-gradient(180deg, #A89482, #8C7A6A); clip-path: polygon(2% 100%, 4% 60%, 0% 48%, 9% 40%, 5% 25%, 18% 24%, 17% 9%, 31% 13%, 36% 0%, 46% 9%, 54% 0%, 61% 11%, 72% 6%, 75% 20%, 88% 18%, 86% 32%, 97% 36%, 92% 48%, 100% 56%, 96% 64%, 98% 100%); }
.wn-hedgehog .wn-ear-r { display: none !important; }
.wn-hedgehog .wn-body { left: calc(var(--u) * 4); right: calc(var(--u) * 4); top: calc(var(--u) * 18); }
.wn-hedgehog .wn-nose { width: calc(var(--u) * 7); height: calc(var(--u) * 5.5); margin-left: calc(var(--u) * -3.5); border-radius: 50%; }

/* Bopped: a squash and happy ^ ^ eyes. Oops: a wobble and a question mark. Missed: sleepy eyes. */
.wn-critter.bopped .wn-pose { animation: wn-squash 0.33s ease-out both; }
.wn-critter.bopped .wn-eye { height: calc(var(--u) * 6); background: none; border: calc(var(--u) * 2.6) solid #2E2A47; border-bottom: 0; border-radius: calc(var(--u) * 6) calc(var(--u) * 6) 0 0; }
.wn-critter.bopped .wn-sign { background: #E2F8D8; box-shadow: 0 0 0 calc(var(--u) * 2.4) var(--green-d), 0 calc(var(--u) * 2.4) 0 calc(var(--u) * 2.4) #2F9A3A; }
.wn-critter.oops .wn-pose { animation: wn-wobble 0.5s ease-in-out; }
.wn-critter.oops .wn-sign { background: #FFE6E3; color: var(--danger-d); box-shadow: 0 0 0 calc(var(--u) * 2.4) var(--danger), 0 calc(var(--u) * 2.4) 0 calc(var(--u) * 2.4) var(--danger-d); }
.wn-critter.oops .wn-eye, .wn-critter.miss .wn-eye { height: calc(var(--u) * 3); margin-top: calc(var(--u) * 4); border-radius: calc(var(--u) * 2); background: #2E2A47; }
.wn-critter.oops .wn-pose::after { content: '?'; position: absolute; right: calc(var(--u) * -10); top: calc(var(--u) * -4); font: 900 calc(var(--u) * 24)/1 var(--font-ui); color: var(--danger-d); -webkit-text-stroke: 3px #fff; paint-order: stroke fill; animation: wn-bump 0.4s; }

/* The star burst and points over a bopped burrow */
.wn-burst { position: absolute; left: 50%; top: 40%; width: 0; height: 0; z-index: 4; pointer-events: none; }
.wn-burst i { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; font-style: normal; animation: wn-fly 0.6s ease-out both; }
.wn-burst i:nth-child(4n + 1) { background: #FF8FAB; }
.wn-burst i:nth-child(4n + 2) { background: var(--sky); }
.wn-burst i:nth-child(4n + 3) { background: var(--sun); }
.wn-burst i:nth-child(4n + 4) { background: var(--grape); }
.wn-burst i.wn-star { background: none; width: auto; height: auto; left: -9px; top: -12px; font: 900 22px/1 var(--font-ui); color: #FFC93C; text-shadow: 0 0 6px rgba(255, 201, 60, 0.8); }
.wn-pts { position: absolute; left: 0; top: -18px; font: 900 26px/1 var(--font-ui); color: var(--grape-d); -webkit-text-stroke: 4px #fff; paint-order: stroke fill; white-space: nowrap; animation: wn-rise 0.8s ease-out both; }

/* The banner over the garden: "Ready?", "New rule!", and the end */
.wn-banner { position: absolute; inset: 0; z-index: 6; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 12px; text-align: center; pointer-events: none; background: radial-gradient(circle, rgba(255, 255, 255, 0.94) 0 45%, rgba(255, 255, 255, 0.6) 72%, rgba(255, 255, 255, 0.25)); }
.wn-banner[hidden] { display: none; }
.wn-banner.wn-show { animation: wn-banner 0.5s cubic-bezier(0.3, 1.5, 0.6, 1) both; }
.wn-banner small { font: 900 22px/1 var(--font-ui); color: var(--green-d); letter-spacing: 0.5px; }
.wn-banner .wn-rule-big { font-size: clamp(46px, 14vw, 68px); }
.wn-banner .wn-hint { margin-top: 4px; }

.wn-msg { min-height: 1.4em; margin: 0; text-align: center; font: 800 17px/1.3 var(--font-ui); color: var(--grape-d); }
.wn-msg.wn-good { color: #2F9A3A; }
.wn-msg.wn-bad { color: var(--danger-d); }
.wn-wrap.wn-over .wn-garden { filter: saturate(0.6) brightness(0.97); }

@keyframes wn-squash { 0% { transform: scale(1.14, 0.78); } 45% { transform: scale(0.94, 1.08); } 100% { transform: none; } }
@keyframes wn-wobble { 20% { transform: rotate(-9deg); } 45% { transform: rotate(8deg); } 70% { transform: rotate(-4deg); } 100% { transform: none; } }
@keyframes wn-fly { 0% { transform: translate(0, 0) scale(0.4); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1); opacity: 0; } }
@keyframes wn-rise { 0% { opacity: 0; transform: translate(-50%, 10px) scale(0.5); } 25% { opacity: 1; transform: translate(-50%, -6px) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -46px) scale(1); } }
@keyframes wn-banner { 0% { opacity: 0; transform: scale(0.5) rotate(-6deg); } 100% { opacity: 1; transform: none; } }
@keyframes wn-flash { 30% { transform: scale(1.04); box-shadow: inset 0 0 0 3px #F4DA8C, 0 4px 0 #EED9A0, 0 0 0 6px rgba(255, 201, 60, 0.45); } }
@keyframes wn-bump { 40% { transform: scale(1.3); } }
@keyframes wn-hop { 50% { transform: translateY(-5px) rotate(8deg); } }
@keyframes wn-thud { 40% { transform: scale(0.92, 0.85); } }
@keyframes wn-fade { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .wn-critter, .wn-critter.up { transition: transform 0.06s linear; }
  .wn-critter .wn-pose, .wn-critter .wn-pose::after, .wn-banner.wn-show, .wn-rule.wn-flash, .wn-goal.wn-done .wn-goal-flag, .wn-mult, .wn-hole.wn-tap .wn-pit { animation: none !important; }
  .wn-burst i { display: none; }
  .wn-pts { animation: wn-fade 0.8s linear both; transform: translateX(-50%); }
}