/* Lily pad hop engine (bq-mn-). Uses the site tokens from brook.css. */

.bq-mn {
  container-type: inline-size;
  width: 100%;
  max-width: 900px;
}

.bq-mn-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bq-s3);
  justify-items: center;
}

/* The pond */
.bq-mn-pond {
  width: min(100%, 500px);
  padding: clamp(8px, 2.4cqw, 18px);
  border-radius: var(--bq-r-l);
  background:
    radial-gradient(60% 40% at 25% 20%, rgba(150, 240, 255, 0.16), transparent 70%),
    radial-gradient(50% 40% at 80% 85%, rgba(95, 227, 181, 0.12), transparent 70%),
    linear-gradient(160deg, #0f4a55, #0a2f38 60%, #072229);
  border: 1px solid var(--bq-line-2);
  box-shadow: var(--bq-shadow-2), inset 0 0 50px rgba(0, 0, 0, 0.35);
}

.bq-mn-grid {
  display: grid;
  grid-template-columns: repeat(var(--side), minmax(0, 1fr));
  gap: clamp(4px, 1.2cqw, 10px);
}

.bq-mn-pad {
  position: relative;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  transform: rotate(var(--tilt, 0deg));
  transition: transform var(--bq-fast) var(--bq-ease-out), opacity var(--bq-med) var(--bq-ease-out);
  -webkit-tap-highlight-color: transparent;
}

.bq-mn-art,
.bq-mn-slot,
.bq-mn-slot > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.bq-mn-slot { pointer-events: none; display: grid; place-items: center; }

.bq-mn-shadow { fill: rgba(0, 0, 0, 0.28); }
.bq-mn-leaf { fill: #2fa35a; stroke: #1b6e3a; stroke-width: 2; }
.bq-mn-leaf-shine { fill: rgba(190, 255, 170, 0.14); transform: scale(0.82); transform-origin: 50px 50px; }
.bq-mn-veins line { stroke: rgba(14, 70, 34, 0.55); stroke-width: 1.6; stroke-linecap: round; }

.bq-mn.is-open .bq-mn-pad:not(.is-safe) { cursor: pointer; }
.bq-mn.is-open .bq-mn-pad:not(.is-safe):hover { transform: rotate(var(--tilt, 0deg)) translateY(-3px) scale(1.04); }
.bq-mn.is-open .bq-mn-pad:not(.is-safe):active { transform: rotate(var(--tilt, 0deg)) scale(0.95); }
.bq-mn:not(.is-open) .bq-mn-pad:not(.is-safe):not(.is-pike):not(.is-shown) { opacity: 0.82; }
.bq-mn:not(.is-open) .bq-mn-pad { cursor: default; }

/* "Next hop" hint on hover (pointer devices) */
.bq-mn-pad::after {
  content: var(--next, "");
  position: absolute;
  left: 50%;
  top: -6px;
  padding: 2px 8px;
  border-radius: var(--bq-r-pill);
  background: rgba(6, 23, 25, 0.92);
  border: 1px solid var(--bq-line-2);
  color: var(--bq-gold);
  font-family: var(--bq-font-display);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 4px) rotate(calc(var(--tilt, 0deg) * -1));
  transition: opacity var(--bq-fast) var(--bq-ease-out), transform var(--bq-fast) var(--bq-ease-out);
  z-index: 2;
}

@media (hover: hover) {
  .bq-mn.is-open .bq-mn-pad:not(.is-safe):hover::after {
    opacity: 1;
    transform: translate(-50%, -100%) rotate(calc(var(--tilt, 0deg) * -1));
  }
}

/* Frog, pike, flower */
.bq-mn-frog-skin { fill: #7ee06d; stroke: #2a7a33; stroke-width: 2; }
.bq-mn-frog-belly { fill: #d9f7b0; }
.bq-mn-frog-cheek { fill: #ff9a9a; opacity: 0.75; }
.bq-mn-frog-mouth { fill: none; stroke: #1d5a2a; stroke-width: 2.4; stroke-linecap: round; }

.bq-mn-pike-body { fill: #8fa13c; stroke: #3f4a14; stroke-width: 2; }
.bq-mn-pike-belly { fill: none; stroke: #e4e2a6; stroke-width: 3; stroke-linecap: round; opacity: 0.8; }
.bq-mn-pike-fin { fill: #c07a35; stroke: #5b3410; stroke-width: 1.6; stroke-linejoin: round; }
.bq-mn-pike-spot { fill: #d8e07a; opacity: 0.8; }
.bq-mn-pike-mouth { stroke: #2b1606; stroke-width: 2; stroke-linecap: round; }
.bq-mn-pike-teeth { fill: none; stroke: #ffffff; stroke-width: 1.4; stroke-linejoin: round; }
.bq-mn-pike-brow { stroke: #2b1606; stroke-width: 2.6; stroke-linecap: round; }

.bq-mn-petal { fill: #ffb7c9; stroke: #e0708f; stroke-width: 1.2; }

.bq-mn-pad .bq-mn-frog,
.bq-mn-pad .bq-mn-pike,
.bq-mn-pad .bq-mn-flower { transform: rotate(calc(var(--tilt, 0deg) * -1)); }

.bq-mn-pad.is-safe .bq-mn-frog { animation: bq-mn-hop 420ms var(--bq-ease-out) both; }
.bq-mn-pad.is-safe .bq-mn-art { animation: bq-mn-squash 360ms var(--bq-ease-out) 120ms both; }
.bq-mn-pad.is-pike { animation: bq-mn-shake 380ms var(--bq-ease-out); box-shadow: 0 0 0 3px rgba(255, 107, 122, 0.85), 0 0 22px rgba(255, 107, 122, 0.45); }
.bq-mn-pad.is-safe { box-shadow: 0 0 0 2px rgba(95, 227, 181, 0.55), 0 0 18px rgba(95, 227, 181, 0.3); }
.bq-mn-pad.is-pike .bq-mn-pike { animation: bq-mn-jump 480ms var(--bq-ease-out) both; }
.bq-mn-pad.is-pike .bq-mn-leaf { fill: #1f6b46; }
.bq-mn-pad.is-shown .bq-mn-slot { animation: bq-mn-fade 260ms var(--bq-ease-out) both; }
.bq-mn-pad.is-shown { opacity: 0.6; }
.bq-mn-pad.is-flower .bq-mn-flower { transform: rotate(calc(var(--tilt, 0deg) * -1)) scale(0.62); }

@keyframes bq-mn-hop {
  0% { transform: translateY(-46%) scale(0.9); opacity: 0; }
  55% { transform: translateY(4%) scale(1.06, 0.94); opacity: 1; }
  100% { transform: translateY(0) scale(1); }
}

@keyframes bq-mn-squash {
  0% { transform: scale(1); }
  40% { transform: scale(0.92); }
  100% { transform: scale(1); }
}

@keyframes bq-mn-jump {
  0% { transform: translateY(30%) scale(0.9); opacity: 0; }
  60% { transform: translateY(-8%) scale(1.08); opacity: 1; }
  100% { transform: translateY(0) scale(1.02); }
}

@keyframes bq-mn-shake {
  0%, 100% { transform: rotate(var(--tilt, 0deg)) translateX(0); }
  20% { transform: rotate(var(--tilt, 0deg)) translateX(-5px); }
  45% { transform: rotate(var(--tilt, 0deg)) translateX(5px); }
  70% { transform: rotate(var(--tilt, 0deg)) translateX(-3px); }
}

@keyframes bq-mn-fade {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.bq-mn-ripple {
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  border: 3px solid rgba(190, 245, 255, 0.8);
  pointer-events: none;
  animation: bq-mn-ring 650ms var(--bq-ease-out) forwards;
}

.bq-mn-ripple.is-pike { border-color: rgba(255, 107, 122, 0.9); }

@keyframes bq-mn-ring {
  from { transform: scale(0.7); opacity: 1; }
  to { transform: scale(1.45); opacity: 0; }
}

/* Panel */
.bq-mn-panel {
  width: min(100%, 500px);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--bq-s3);
  align-items: center;
  padding: var(--bq-s3);
  border-radius: var(--bq-r-l);
  background: rgba(6, 23, 25, 0.78);
  border: 1px solid var(--bq-line-2);
  backdrop-filter: blur(6px);
}

.bq-mn-cap,
.bq-mn-stat dt {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bq-faint);
}

.bq-mn-pikebox { display: grid; gap: 4px; }

.bq-mn-stepper {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border-radius: var(--bq-r-pill);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--bq-line);
}

.bq-mn-step {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--bq-raise);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  transition: transform var(--bq-fast) var(--bq-ease-out), opacity var(--bq-fast) var(--bq-ease-out);
}

.bq-mn-step:active:not(:disabled) { transform: scale(0.92); }
.bq-mn-step:disabled { opacity: 0.35; cursor: not-allowed; }

.bq-mn-pikeicon { width: 30px; height: 30px; }

.bq-mn-pikecount {
  min-width: 22px;
  text-align: center;
  font-family: var(--bq-font-display);
  font-size: 18px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.bq-mn-stats {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--bq-s2);
}

.bq-mn-stat { display: grid; gap: 2px; min-width: 0; }

.bq-mn-stat dd {
  margin: 0;
  font-family: var(--bq-font-display);
  font-size: 17px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bq-mn-stat.is-now dd { color: var(--bq-gold); }
.bq-mn-stat.is-next dd { color: var(--bq-mint); }
.bq-mn-stat.is-back dd { color: var(--bq-ink); }

.bq-mn-pop { animation: bq-mn-pop 320ms var(--bq-ease-out); }

@keyframes bq-mn-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.14); }
  100% { transform: scale(1); }
}

.bq-mn-stat dd { transform-origin: left center; }
.bq-mn.is-kept .bq-mn-panel { border-color: rgba(255, 207, 90, 0.55); box-shadow: 0 0 0 1px rgba(255, 207, 90, 0.25), 0 10px 30px rgba(255, 207, 90, 0.12); }
.bq-mn.is-lost .bq-mn-pond { animation: bq-mn-bump 360ms var(--bq-ease-out); }

@keyframes bq-mn-bump {
  0%, 100% { transform: translateY(0); }
  35% { transform: translateY(4px); }
}

/* Narrow: two rows of stats */
@container (max-width: 520px) {
  .bq-mn-panel { grid-template-columns: 1fr; }
  .bq-mn-pikebox { grid-template-columns: auto auto; justify-content: space-between; align-items: center; }
  .bq-mn-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Wide: the panel sits beside the pond */
@container (min-width: 780px) {
  .bq-mn-in {
    grid-template-columns: minmax(0, 500px) 250px;
    justify-content: center;
    align-items: center;
    gap: var(--bq-s5);
  }
  .bq-mn-panel { grid-template-columns: 1fr; width: 100%; padding: var(--bq-s4); gap: var(--bq-s4); }
  .bq-mn-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bq-s3); }
  .bq-mn-stat dd { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .bq-mn-pad.is-safe .bq-mn-frog,
  .bq-mn-pad.is-safe .bq-mn-art,
  .bq-mn-pad.is-pike,
  .bq-mn-pad.is-pike .bq-mn-pike,
  .bq-mn-pad.is-shown .bq-mn-slot,
  .bq-mn-ripple,
  .bq-mn-pop,
  .bq-mn.is-lost .bq-mn-pond { animation: none; }
}