/* Whack-a-Mole (/whack-a-mole/). Garden board inside the dark glass card. */
.whack-a-mole-play { display: grid; gap: var(--space-3); }
.whack-a-mole-play > h1 { margin: 0; font-family: var(--font-display); }
.whack-a-mole-sub { margin: 0; color: var(--text-muted); }

/* Mode tabs (mirrored as chips on the cover by the play shell) */
.wam-modes { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.wam-mode {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-block-size: 40px; padding-inline: var(--space-4);
  border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  background: color-mix(in oklab, var(--surface-2) 80%, transparent);
  color: var(--text-muted); font-weight: 600; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.wam-mode:hover { color: var(--text); border-color: color-mix(in oklab, var(--accent) 60%, var(--border-strong)); }
.wam-mode[aria-selected="true"] { color: var(--text); border-color: var(--accent); background: color-mix(in oklab, var(--accent) 18%, var(--surface-2)); }
.wam-mode[aria-selected="true"] i { color: var(--accent); }

/* HUD */
.wam-hud {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}
.wam-hud__cell {
  display: grid; align-content: center; justify-items: center; gap: 2px;
  min-inline-size: 0; padding: var(--space-2) var(--space-2);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface-1); text-align: center; line-height: 1.1;
}
.wam-hud__cell small { font-size: 0.72rem; color: var(--text-faint); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-inline-size: 100%; }
.wam-hud__cell b { font-family: var(--font-display); font-size: var(--step-2); color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wam-hud__goal { justify-items: stretch; text-align: start; }
.wam-hud__goal b { font-family: var(--font-body); font-size: var(--step-0); font-weight: 700; white-space: normal; }
.wam-bar { position: relative; display: block; block-size: 14px; border-radius: var(--radius-pill); background: var(--surface-3); overflow: hidden; }
.wam-bar i { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 0; background: linear-gradient(90deg, var(--lime), color-mix(in oklab, var(--lime) 60%, var(--cyan))); border-radius: inherit; transition: width var(--dur-fast) var(--ease); }
.wam-bar em { position: relative; display: block; font-style: normal; font-size: 0.68rem; font-weight: 700; line-height: 14px; text-align: center; color: var(--text); text-shadow: 0 1px 2px rgb(0 0 0 / 0.6); font-variant-numeric: tabular-nums; }
.wam-hearts { display: none; gap: 4px; font-size: 1.05rem; line-height: 1; }
.wam-hearts i { font-style: normal; color: var(--surface-3); transition: color var(--dur-fast) var(--ease); }
.wam-hearts i.on { color: var(--pink); text-shadow: 0 0 10px color-mix(in oklab, var(--pink) 60%, transparent); }
.wam-hearts.is-hurt { animation: wam-hurt 420ms var(--ease); }
.wam-hud.is-marathon .wam-bar { display: none; }
.wam-hud.is-marathon .wam-hearts { display: flex; }
.wam-hud__time.is-low b { color: var(--coral); animation: wam-pulse 500ms ease-in-out infinite alternate; }
.wam-hud__combo b.is-hot { color: var(--amber); text-shadow: 0 0 14px color-mix(in oklab, var(--amber) 55%, transparent); }
.wam-hud__react b { font-size: var(--step-1); }
@media (max-width: 599px) {
  .wam-hud { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 6px; }
  .wam-hud__cell { padding: 6px 4px; }
  .wam-hud__cell b { font-size: var(--step-1); }
  .wam-hud__goal b { font-size: 0.8rem; }
  .wam-hud__react b { font-size: var(--step-0); }
  .wam-hud__cell small { font-size: 0.62rem; letter-spacing: 0; }
}

/* Card + stage */
.whack-a-mole-card { padding: var(--space-2) !important; }
.whack-a-mole-stage { --fit-h: min(66vh, 600px); position: relative; }
html.play-open .whack-a-mole-stage { --fit-h: max(240px, calc(100dvh - 250px)); }
html.play-open .whack-a-mole-play .wam-modes { display: none; }
.wam-defs { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }

.wam-field {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* A strip of garden scenery (shed, fence) above the mounds, sized from the height budget so the
     whole board still fits the window / play layer; the grid width below subtracts it. */
  --top: clamp(36px, calc(var(--fit-h) * 0.14), 110px);
  padding: var(--top) clamp(6px, 2%, 18px) clamp(8px, 2%, 16px);
  border-radius: calc(var(--radius-lg) - 4px);
  /* Painted allotment garden from the app (art/garden*.webp), anchored at the top like the app. */
  background: #a9b85c url("/whack-a-mole/art/garden-640.webp?v=62f1436a") center 30% / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
@media (min-width: 700px) {
  .wam-field { background-image: url("/whack-a-mole/art/garden.webp?v=91b5f9e2"); }
}
.wam-field.shake { animation: wam-shake 400ms var(--ease); }
.wam-field.has-overlay .wam-grid { filter: saturate(0.6) brightness(0.6); }

.wam-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: 0 clamp(4px, 2%, 16px);
  inline-size: min(100%, calc((var(--fit-h) - var(--top)) * var(--cols, 3) / var(--rows, 3) * 1.03));
  margin-inline: auto;
  transition: filter var(--dur-med) var(--ease);
}
.wam-hole {
  position: relative;
  container-type: inline-size;
  isolation: isolate;           /* a mole in a lower row stands in front of the mound behind it */
  aspect-ratio: 1 / 0.92;
  inline-size: 100%;
  padding: 0; border: 0; background: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  border-radius: 40%;
}
/* Portrait phones: the board is width-bound, so spend the spare height on taller rows (as the app does). */
@media (max-width: 599px) and (max-aspect-ratio: 3/4) {
  .wam-hole { aspect-ratio: 1 / 1.15; }
  html.play-open .wam-hole { aspect-ratio: 1 / 1.4; }
}
@media (pointer: fine) {
  .wam-field { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg transform='rotate(-35 20 20)'%3E%3Crect x='17' y='14' width='6' height='24' rx='3' fill='%23c69062' stroke='%23402414' stroke-width='1.5'/%3E%3Crect x='6' y='4' width='28' height='13' rx='4' fill='%23b97a46' stroke='%23402414' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E") 12 10, pointer; }
  .wam-hole { cursor: inherit; }
}
.wam-hole:focus-visible { outline: 3px solid var(--focus); outline-offset: -4px; }
.wam-mound { position: absolute; inset-inline-start: -7%; inset-block-end: 0; inline-size: 114%; block-size: auto; display: block; pointer-events: none; }
.wam-mound--back { z-index: 1; filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.25)); }
.wam-mound--front { z-index: 3; }
.wam-clip {
  position: absolute; z-index: 2; pointer-events: none;
  inset-inline: -10%;
  inset-block-end: 14cqw;
  block-size: 124cqw;
  overflow: hidden;
}
.wam-mole {
  position: absolute; inset-block-end: 0; left: 50%;
  inline-size: 78cqw;
  transform: translate(-50%, 9%);
  will-change: transform;
}
.wam-mole.big { inline-size: 92cqw; }
.wam-mole .wam-svg { overflow: visible; display: block; inline-size: 100%; block-size: auto; filter: drop-shadow(2px 4px 3px rgb(0 0 0 / 0.35)); }
.wam-mole.up { animation: wam-bob 1.1s ease-in-out infinite; }
.wam-mole.rising { animation: wam-rise var(--rise, .2s) cubic-bezier(.3, .9, .4, 1) both; }
.wam-mole.hit { animation: wam-hit .42s ease-in forwards; }
.wam-mole.leaving { animation: wam-leave .2s ease-in forwards; }
.wam-mole.k-gold .wam-svg { filter: drop-shadow(0 0 8px rgb(255 214 80 / 0.75)) drop-shadow(2px 4px 3px rgb(0 0 0 / 0.3)); }
/* Tints of the one painted sprite, as in the app's mole.css */
.wam-svg.is-gold .wam-sprite { filter: sepia(.8) saturate(1.9) brightness(1.17); }
.wam-svg.is-chief .wam-sprite { filter: saturate(.8) brightness(.84); }
.wam-svg.is-sleepy .wam-sprite { filter: saturate(.65); }
.wam-mole.k-bomb.up .wam-svg { animation: wam-tick 0.5s ease-in-out infinite alternate; }
.wam-zz text { animation: wam-zz 1.6s ease-in-out infinite; }
.wam-zz text + text { animation-delay: .5s; }
.wam-sparkle { animation: wam-twinkle .6s ease-in-out infinite alternate; }
.wam-spark { transform-box: fill-box; transform-origin: center; animation: wam-spark .25s ease-in-out infinite alternate; }
.wam-burst { transform-box: fill-box; transform-origin: center; animation: wam-burst .42s ease-out forwards; }
.wam-hp { position: absolute; inset-block-start: -12px; left: 50%; transform: translateX(-50%); display: flex; gap: 3px; }
.wam-hp i { inline-size: 9px; block-size: 9px; border-radius: 50%; background: rgb(0 0 0 / 0.35); box-shadow: 0 0 0 1.5px #fff; }
.wam-hp i.on { background: var(--coral); }
.wam-mole.big .wam-hp { inset-block-start: calc(-12% - 8px); }   /* above the crown */
.wam-key {
  position: absolute; z-index: 4; inset-block-end: 3%; left: 50%; transform: translateX(-50%);
  min-inline-size: 18px; padding: 0 4px;
  border-radius: 5px; background: rgb(0 0 0 / 0.35); color: rgb(255 255 255 / 0.75);
  font: 700 11px/16px var(--font-body); pointer-events: none; display: none;
}
@media (pointer: fine) and (hover: hover) { .wam-key { display: block; } }

/* Strike feedback */
.wam-strike { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.wam-hammer { position: absolute; right: -6%; top: -18%; inline-size: 66%; transform-origin: 22% 92%; animation: wam-swing .3s ease-out forwards; }
.wam-hammer-svg { display: block; inline-size: 100%; overflow: visible; filter: drop-shadow(0 8px 8px rgb(0 0 0 / 0.35)); }
.wam-ring { position: absolute; left: 50%; top: 44%; inline-size: 35%; aspect-ratio: 1; border: 4px solid #fff4b8; border-radius: 50%; box-shadow: 0 0 0 3px rgb(237 179 76 / 0.3); animation: wam-impact .4s .08s ease-out both; }
.wam-strike i { position: absolute; left: 50%; top: 44%; inline-size: 7px; block-size: 7px; border-radius: 2px; background: #ffe295; box-shadow: 0 1px 0 #b37b2f; animation: wam-fragment .5s .08s ease-out both; }
.wam-strike.miss .wam-ring { border-color: #9b784c; inline-size: 24%; border-width: 2px; box-shadow: none; }
.wam-strike.miss i { background: #a77a4c; inline-size: 4px; block-size: 4px; }
.wam-strike.bomb .wam-ring { border-color: #ff9a66; }
.wam-strike.bomb i { background: #f3794e; }
.wam-float {
  position: absolute; z-index: 6; left: 50%; top: 2%;
  transform: translateX(-50%);
  font-family: var(--font-display); font-size: clamp(16px, 22cqw, 26px); line-height: 1; white-space: nowrap; pointer-events: none;
  text-shadow: 0 2px 0 rgb(0 0 0 / 0.55), 0 0 10px rgb(0 0 0 / 0.4);
  animation: wam-float .8s ease-out forwards;
}
.wam-float.good { color: #b9ff8a; }
.wam-float.gold { color: #ffd34d; font-size: clamp(18px, 26cqw, 30px); }
.wam-float.bad { color: #fff; font-family: var(--font-body); font-weight: 800; font-size: clamp(10px, 11cqw, 14px); padding: 3px 6px; border-radius: 7px; background: rgb(216 52 75 / 0.92); text-shadow: none; }
.wam-float.combo { color: #9cd2ff; font-size: clamp(13px, 15cqw, 18px); }

/* Banners + overlays */
.wam-banner {
  position: absolute; z-index: 7; left: 50%; top: 10px;
  transform: translateX(-50%);
  display: grid; justify-items: center;
  padding: 8px 20px; border-radius: 16px;
  background: color-mix(in oklab, var(--surface-1) 88%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 50%, var(--border));
  box-shadow: var(--shadow-2);
  pointer-events: none; white-space: nowrap;
  animation: wam-banner .35s cubic-bezier(.2, 1.4, .4, 1);
}
.wam-banner[hidden] { display: none; }
.wam-banner b { font-family: var(--font-display); font-size: var(--step-2); color: var(--text); line-height: 1.05; }
.wam-banner small { color: var(--amber); font-weight: 700; }
.wam-banner.is-praise b { color: var(--amber); }
.wam-banner.is-chief b { color: var(--pink); }

.wam-overlay {
  position: absolute; inset: 0; z-index: 8;
  display: grid; place-items: center;
  padding: var(--space-3);
  overflow: auto;
}
.wam-overlay[hidden] { display: none; }
.wam-panel {
  inline-size: min(100%, 480px);
  display: grid; justify-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-4);
  border: 1px solid color-mix(in oklab, var(--accent) 40%, var(--border));
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 14%, var(--bg-raised)), var(--bg-raised));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow-3);
  text-align: center;
  animation: wam-in .3s var(--ease);
}
.wam-panel > * { margin: 0; }
.wam-kicker { font-family: var(--font-display); font-size: var(--step-2); color: var(--text); line-height: 1; }
.wam-copy { color: var(--text-muted); font-size: var(--step--1); max-inline-size: 34ch; }
.wam-best { color: var(--text-muted); }
.wam-best b { color: var(--accent); font-family: var(--font-display); font-size: var(--step-1); }
.wam-level { display: flex; align-items: center; gap: var(--space-2); inline-size: 100%; }
.wam-level__info { flex: 1; display: grid; gap: 2px; min-inline-size: 0; }
.wam-level__info b { font-family: var(--font-display); font-size: var(--step-2); line-height: 1; }
.wam-level__info small { color: var(--text-muted); }
.wam-step {
  flex: none; display: grid; place-items: center;
  inline-size: var(--tap); block-size: var(--tap);
  border: 1px solid var(--border-strong); border-radius: 50%;
  background: var(--surface-2); color: var(--text); cursor: pointer;
}
.wam-step:hover:not(:disabled) { border-color: var(--accent); }
.wam-step:disabled { opacity: 0.35; cursor: not-allowed; }
[dir="rtl"] .wam-step i { transform: scaleX(-1); }
.wam-stars { display: inline-flex; gap: 2px; justify-content: center; color: var(--surface-3); }
.wam-stars i { font-style: normal; }
.wam-stars i.on { color: var(--amber); }
.wam-stars--big { font-size: 1.8rem; }
.wam-go {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-block-size: 48px; padding-inline: var(--space-6);
  border: 0; border-radius: var(--radius-pill);
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--font-display); font-size: var(--step-1); letter-spacing: 0.03em; text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 26px -12px color-mix(in oklab, var(--accent) 70%, transparent);
  transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.wam-go:hover { background: color-mix(in srgb, var(--accent) 88%, white); transform: translateY(-1px); }
.wam-go:focus-visible, .wam-ghost:focus-visible, .wam-step:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.wam-ghost { min-block-size: 44px; padding-inline: var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: transparent; color: var(--text-muted); cursor: pointer; font-weight: 600; }
.wam-ghost:hover { color: var(--text); border-color: var(--accent); }
.wam-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.wam-final { font-family: var(--font-display); font-size: var(--step-5); line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.wam-newbest { color: var(--amber); font-weight: 700; }
.wam-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: var(--space-2); inline-size: 100%; }
.wam-stats div { padding: 6px 4px; border-radius: var(--radius-sm); background: var(--surface-2); }
.wam-stats dt { overflow-wrap: anywhere; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); }
.wam-stats dd { margin: 0; font-family: var(--font-display); font-size: var(--step-1); color: var(--text); font-variant-numeric: tabular-nums; }
.wam-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-3); font-size: 0.75rem; color: var(--text-muted); }
.wam-legend > span { display: grid; justify-items: center; gap: 2px; }
.wam-legend__art { inline-size: 34px; display: block; }
.wam-legend__art svg { display: block; inline-size: 100%; block-size: auto; }
.wam-keys { font-size: 0.72rem; color: var(--text-faint); display: none; }
@media (pointer: fine) and (hover: hover) { .wam-keys { display: block; } }
@media (max-width: 599px) {
  .wam-panel { padding: var(--space-3); gap: var(--space-2); }
  .wam-legend__art { inline-size: 26px; }
  .wam-final { font-size: var(--step-4); }
}

/* Paused: freeze every CSS animation on the board */
.wam-field.is-paused .wam-grid * { animation-play-state: paused !important; }

@keyframes wam-rise { from { transform: translate(-50%, 105%); } to { transform: translate(-50%, 9%); } }
@keyframes wam-bob { 0%, 100% { transform: translate(-50%, 9%); } 50% { transform: translate(-50%, 13%); } }
@keyframes wam-hit { 0% { transform: translate(-50%, 9%) scale(1.06, .82); } 35% { transform: translate(-50%, 18%) scale(.96, 1.04); } 100% { transform: translate(-50%, 110%) scale(1); } }
@keyframes wam-leave { from { transform: translate(-50%, 9%); } to { transform: translate(-50%, 105%); } }
@keyframes wam-zz { 0% { opacity: 0; transform: translateY(4px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes wam-twinkle { from { opacity: .3; } to { opacity: 1; } }
@keyframes wam-spark { from { transform: scale(.8); } to { transform: scale(1.15); } }
@keyframes wam-tick { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@keyframes wam-burst { from { transform: scale(.2); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }
@keyframes wam-swing { 0% { transform: rotate(-38deg) translateY(-12%); opacity: 1; } 35% { transform: rotate(14deg) translateY(4%); } 60% { transform: rotate(4deg) translateY(2%); } 100% { transform: rotate(-10deg) translateY(-6%); opacity: 0; } }
@keyframes wam-impact { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); } 12% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.65); } }
@keyframes wam-fragment { 0% { opacity: 0; transform: rotate(var(--a)) translateX(0) scale(.2); } 12% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) rotate(110deg) scale(.5); } }
@keyframes wam-float { from { transform: translate(-50%, 10px) scale(.7); opacity: 1; } 30% { transform: translate(-50%, -6px) scale(1.15); } 75% { opacity: 1; } to { transform: translate(-50%, -34px) scale(1); opacity: 0; } }
@keyframes wam-banner { from { transform: translateX(-50%) scale(.6); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }
@keyframes wam-shake { 0%, 100% { transform: none; } 20% { transform: translate(-5px, 2px); } 40% { transform: translate(5px, -2px); } 60% { transform: translate(-4px, -1px); } 80% { transform: translate(3px, 2px); } }
@keyframes wam-pulse { from { transform: scale(1); } to { transform: scale(1.08); } }
@keyframes wam-hurt { 0%, 100% { transform: none; } 30% { transform: scale(1.25); } 60% { transform: translateX(-3px); } }
@keyframes wam-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .wam-mole.up, .wam-mole.rising, .wam-mole.k-bomb.up .wam-svg, .wam-zz text, .wam-sparkle, .wam-spark,
  .wam-hud__time.is-low b, .wam-hearts.is-hurt, .wam-banner, .wam-panel, .wam-field.shake { animation: none; }
  .wam-mole.hit, .wam-mole.leaving { animation: wam-fade .2s linear forwards; }
  .wam-hammer { animation: wam-fade .3s linear forwards; transform: rotate(4deg); }
  .wam-strike i { display: none; }
  .wam-float { animation: wam-fade .8s linear forwards; }
  .wam-mode, .wam-go, .wam-bar i, .wam-grid { transition: none; }
}
@keyframes wam-fade { from { opacity: 1; } to { opacity: 0; } }