.monkey-stage {
  --mk-scale: clamp(0.16rem, min(0.98vw, 0.65vh), 0.65rem);
  position: relative; min-width: 0;
  display: flex; justify-content: center;
  font-size: var(--mk-scale);
  transform: translate3d(0, 0, 0);
}
.art-wrap {
  position: relative; width: max-content; min-width: 0;
  will-change: transform;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
}
.monkey-stage .ascii-monkey {
  position: relative; left: 0;
  margin: 0; font-family: var(--font-mono); font-weight: 700;
  font-size: 1em; line-height: 1.04; white-space: pre; text-align: left;
  width: max-content; flex-shrink: 0; user-select: none;
  background-image: linear-gradient(180deg,
    var(--accent-bright) 0%,
    var(--accent) 55%,
    color-mix(in oklch, var(--accent) 78%, black) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 10px color-mix(in oklch, var(--accent-bright) 36%, transparent));
}
.monkey-stage .ascii-monkey .e {
  background-image: none; -webkit-background-clip: initial; background-clip: initial;
  color: var(--mk-eye, var(--fg)); -webkit-text-fill-color: var(--mk-eye, var(--fg));
}
.monkey-stage .ascii-monkey .g { transition: none; }

.monkey-stage .ascii-monkey::before {
  content: "";
  position: absolute; z-index: -1;
  top: 42%; left: 52%;
  width: 100%; height: 100%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle closest-side at 50% 50%,
    color-mix(in oklch, var(--accent) 24%, transparent) 0%,
    color-mix(in oklch, var(--accent) 16%, transparent) 24%,
    color-mix(in oklch, var(--accent) 9%, transparent) 44%,
    color-mix(in oklch, var(--accent) 4%, transparent) 62%,
    transparent 80%);
  pointer-events: none;
}
[data-theme="light"] .monkey-stage .ascii-monkey::before { display: none; }

.monkey-stage .fx-meter {
  position: absolute; right: 0; top: -1.7em;
  font-family: var(--font-mono);
  font-size: calc(var(--mk-scale) * 1.5);
  letter-spacing: 0.08em;
  color: var(--accent-bright);
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
  pointer-events: none; user-select: none; white-space: pre;
  text-shadow: 0 0 10px color-mix(in oklch, var(--accent-bright) 35%, transparent);
}
.monkey-stage .fx-meter.is-on { opacity: 0.72; }
.monkey-stage .fx-meter.is-full {
  opacity: 1; color: var(--fg);
  text-shadow: 0 0 12px color-mix(in oklch, var(--accent-bright) 75%, transparent),
               0 0 28px color-mix(in oklch, var(--accent-bright) 45%, transparent);
}
[data-theme="light"] .monkey-stage .fx-meter.is-full { color: var(--accent-bright); }

.art-wrap.is-reward > #art { animation: rm-surge 2400ms var(--ease-out) 1; }
@keyframes rm-surge {
  0%   { filter: brightness(1); }
  11%  { filter: brightness(0.45); }
  26%  { filter: brightness(0.50); }
  36%  { filter: brightness(2.10); }
  52%  { filter: brightness(1.38); }
  70%  { filter: brightness(1.10); }
  100% { filter: brightness(1); }
}
[data-theme="light"] .art-wrap.is-reward > #art { animation: rm-surge-light 2400ms var(--ease-out) 1; }
@keyframes rm-surge-light {
  0%   { filter: brightness(1) saturate(1); }
  11%  { filter: brightness(0.88) saturate(0.70); }
  26%  { filter: brightness(0.90) saturate(0.76); }
  36%  { filter: brightness(1.90) saturate(1.15); }
  52%  { filter: brightness(1.42) saturate(1.08); }
  70%  { filter: brightness(1.12) saturate(1.03); }
  100% { filter: brightness(1) saturate(1); }
}

@media (prefers-reduced-motion: reduce) {
  .monkey-stage .ascii-monkey .g { transition: none !important; }
  .monkey-stage .fx-meter { display: none !important; }
  .art-wrap.is-full > #art, .art-wrap.is-reward > #art { animation: none !important; }
}

@media (max-width: 640px) {
  .monkey-stage { --mk-scale: clamp(0.14rem, min(0.9vw, 0.62vh), 0.36rem); }
}

.oferta-v2 .oferta-ascii, .dlaczego-ascii,
.pd-feature .oferta-ascii, .pd-feature .dlaczego-ascii { padding-top: 2.6rem; }
@media (max-width: 640px) { .oferta-v2 .oferta-ascii, .dlaczego-ascii { padding-top: 2rem; } }

.oferta-ascii .monkey-stage, .dlaczego-ascii .monkey-stage {
  --mk-scale: clamp(0.24rem, min(0.55vw, 0.62vh), 0.44rem);
}
.pd-feature .oferta-ascii .monkey-stage, .pd-feature .dlaczego-ascii .monkey-stage {
  --mk-scale: clamp(0.2rem, min(0.5vw, 0.55vh), 0.4rem);
}
@media (max-width: 640px) {
  .oferta-v2 .oferta-ascii .monkey-stage { --mk-scale: 0.2rem; }
}