:root {
  --marshall: #e23b2e;
  --skye: #f06ab0;
  --chase: #2f6bff;
  --rubble: #f0c020;
  --ink: #1a2433;
  --panel: rgba(12, 22, 40, 0.78);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  font-family: "Nunito", "Trebuchet MS", "Segoe UI", sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; background: #0b1524; color: #fff;
  overflow: hidden; user-select: none; -webkit-user-select: none;
}
#app {
  height: 100%; width: 100%; display: grid; place-items: center;
  background: radial-gradient(120% 80% at 50% 0%, #1a3358, #0b1524 70%);
}
/* Stage = phone frame. #art = 720×1280 cover-crop (same transform as composites). */
#stage {
  position: relative;
  width: min(100vw, 50dvh);
  height: 100dvh;
  overflow: hidden; background: #0e1a2e;
  container-type: size;
}
#world {
  position: absolute; inset: 0;
  overflow: hidden; background: #123; touch-action: none;
}
/* Height-fills the stage; width = 9:16 → side-crop on tall phones (≈72px at 412×915). */
#art {
  position: absolute;
  top: 0; left: 50%;
  height: 100%;
  width: calc(100cqh * 9 / 16);
  transform: translateX(-50%);
  overflow: hidden;
}
.scene-layer {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity .38s ease;
  pointer-events: none;
}
.scene-layer.on { opacity: 1; }
.scene-layer img { width: 100%; height: 100%; object-fit: fill; object-position: center top; display: block; }

/* art-v3 transparent sprites */
.spr img.art-spr, .tgt img.art-spr {
  width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.25));
}
.spr.fly-out { transition: left .7s ease-in, top .7s ease-in, transform .7s ease-in; transform: translate(-50%,-50%) rotate(-12deg) scale(.85); }
.spr.jump-arc { animation: jumpArc .85s cubic-bezier(.2,1.4,.4,1) forwards; }
@keyframes jumpArc {
  0% { transform: translate(-50%,-50%) scale(1); }
  40% { transform: translate(-50%, calc(-50% - 40px)) scale(1.08); }
  100% { transform: translate(-50%,-50%) scale(1); }
}
.spr.wiggle { animation: wiggle .45s ease-in-out 2; }
@keyframes wiggle {
  0%, 100% { transform: translate(-50%,-50%) rotate(0); }
  25% { transform: translate(-50%,-50%) rotate(-8deg); }
  75% { transform: translate(-50%,-50%) rotate(8deg); }
}
.spr.roll-away { animation: rollAway 1.1s ease-in forwards; }
@keyframes rollAway {
  0% { transform: translate(-50%,-50%) rotate(0); }
  100% { transform: translate(80%, 40%) rotate(420deg); opacity: .3; }
}
.spr.dance { animation: danceBob .55s ease-in-out infinite alternate; }
@keyframes danceBob {
  from { transform: translate(-50%,-50%) rotate(-4deg) translateY(0); }
  to { transform: translate(-50%,-50%) rotate(4deg) translateY(-10px); }
}
.spr.confetti-burst::before {
  content: "✦ ✧ ★"; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  font-size: 18px; color: #ffe14d; animation: confettiUp .9s ease-out forwards; pointer-events: none;
}
@keyframes confettiUp {
  0% { opacity: 1; margin-top: 0; }
  100% { opacity: 0; margin-top: -40px; }
}
.spr.glow-on { filter: drop-shadow(0 0 10px #ffe14d) drop-shadow(0 0 18px #ff9a3c); }
.toy-path {
  position: absolute; pointer-events: none; z-index: 2;
  border: 3px dashed rgba(255,225,77,.85); border-radius: 40px;
  background: rgba(255,225,77,.08);
}
.ears-flat { filter: saturate(.85) brightness(.95); }
.ir-ph {
  display: grid; place-items: center; width: 100%; height: 100%;
  background: repeating-linear-gradient(-45deg, #ffe14d, #ffe14d 8px, #1a2433 8px, #1a2433 16px);
  color: #1a2433; font-weight: 900; font-size: 15px; text-align: center;
  border: 3px solid #1a2433; border-radius: 12px; padding: 4px;
}
.ir-ph span {
  background: #ffe14d; padding: 2px 8px; border-radius: 8px; border: 2px solid #1a2433;
}
.ir-ph small { display: block; margin-top: 4px; font-size: 11px; background: #fff; padding: 2px 6px; border-radius: 6px; }
.ir-banner {
  position: absolute; left: 50%; top: 8%; transform: translateX(-50%); z-index: 8;
  background: #ffe14d; color: #1a2433; font-weight: 900; font-size: 13px;
  padding: 6px 12px; border-radius: 12px; border: 3px solid #1a2433;
  pointer-events: none; white-space: nowrap; max-width: 92%;
}
.toy-path.ir-path::after {
  content: "IR-03"; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  background: #ffe14d; color: #1a2433; font-weight: 900; font-size: 14px;
  padding: 4px 10px; border: 2px solid #1a2433; border-radius: 10px;
}

.ov { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.sprites { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.targets { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.spr {
  position: absolute; transform: translate(-50%, -50%);
  pointer-events: auto; touch-action: none; cursor: grab;
  /* Above .lev-root (z=1) so B01/P0 drag props stay visible over cover-crop layers */
  z-index: 12;
}
.spr svg { width: 100%; height: 100%; display: block; overflow: visible; }
.spr.static { pointer-events: none; }
.spr.anim { transition: left .3s cubic-bezier(.34, 1.56, .64, 1), top .3s cubic-bezier(.34, 1.56, .64, 1); }
.spr.slow { transition: left .7s ease-in-out, top .7s ease-in-out; }
.spr.drag { z-index: 30; cursor: grabbing; }
.spr.drag::after, .spr.glow::after {
  content: ""; position: absolute; inset: -8px; border-radius: 20px;
  border: 3px solid rgba(255, 255, 255, .9);
}
.spr.locked { pointer-events: none; }
/* Spring-back after a wrong drop: overshoots home so the child sees it bounce. */
.spr.bounce { transition: left .55s cubic-bezier(.25, 1.9, .5, 1), top .55s cubic-bezier(.25, 1.9, .5, 1); }
.spr.card-spr {
  background: rgba(255, 255, 255, .94); border: 3px solid #ffe14d; border-radius: 18px; padding: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}
.spr.paw-handle { width: 68px; height: 68px; z-index: 6; }
.pause-ring {
  position: absolute; inset: -10px; border-radius: 50%; pointer-events: none; z-index: 1;
  background: conic-gradient(#ffe14d calc(var(--p, 0) * 1turn), rgba(255, 255, 255, .2) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
  filter: drop-shadow(0 0 4px rgba(255, 225, 77, .7));
}
.spr.hover-bob { animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 0%, 100% { margin-top: 0; } 50% { margin-top: -6px; } }
.goal {
  position: absolute; transform: translate(-50%, -50%); pointer-events: none;
  border: 3px dashed rgba(255, 255, 255, .95); border-radius: 18px;
  background: rgba(255, 225, 77, .14);
  animation: pulseHot 1.6s ease-in-out infinite;
}
.goal.dot { width: 54px; height: 54px; border-radius: 50%; }
.shake { animation: shake .45s ease-in-out; }
@keyframes shake {
  0%, 100% { margin-left: 0; }
  20% { margin-left: -12px; } 40% { margin-left: 10px; }
  60% { margin-left: -6px; } 80% { margin-left: 4px; }
}

.tgt {
  position: absolute; transform: translate(-50%, -50%);
  min-width: 64px; min-height: 64px; padding: 0;
  border: 3px solid rgba(255, 255, 255, .92); border-radius: 22px;
  background: rgba(255, 255, 255, .12);
  pointer-events: auto; touch-action: manipulation;
  animation: pulseHot 1.6s ease-in-out infinite;
}
.tgt.round { border-radius: 50%; }
.tgt.quiet { border-color: transparent; background: transparent; animation: none; }
.tgt.hinted { border-color: rgba(255, 225, 77, .95); }
.tgt svg { width: 100%; height: 100%; display: block; pointer-events: none; }
.tgt.card {
  background: rgba(255, 255, 255, .94); border-color: #ffe14d; padding: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}
.tgt.bubble-btn {
  background: #fff; color: var(--ink); border: 3px solid #ffb347; border-radius: 22px;
  font-family: inherit; font-weight: 900; font-size: 17px; animation: popIn .22s ease-out;
}
.tgt.bubble-btn.wait { opacity: .75; }
.tgt.bubble-btn.ok { background: #ffe0ea; border-color: #ff4f7b; }
.heart-ic { color: #ff4f7b; font-size: 30px; line-height: 1; }
@keyframes pulseHot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .35); }
  50% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
}
.tag {
  position: absolute; transform: translate(-50%, -50%); z-index: 5;
  background: #fff; color: var(--ink); font-weight: 900; font-size: 15px;
  border-radius: 14px; padding: 3px 10px; pointer-events: none; white-space: nowrap;
  animation: popIn .25s ease-out;
}
.bubble {
  position: absolute; z-index: 5; pointer-events: none;
  background: #fff; color: var(--ink); font-weight: 900; font-size: 16px;
  border-radius: 16px; padding: 4px 10px; border: 3px solid #ffb347;
  animation: popIn .22s ease-out;
}
.bubble.q { border-color: #8fb8ff; }
@keyframes popIn { from { opacity: 0; margin-top: 10px; } to { opacity: 1; margin-top: 0; } }
.heart {
  position: absolute; z-index: 5; font-size: 28px; pointer-events: none;
  transition: left .6s ease-in, top .6s ease-in, opacity .6s ease-in;
  margin: -16px 0 0 -14px;
}

.puzzle {
  position: absolute; inset: 0; z-index: 6; overflow: hidden; touch-action: none;
  opacity: 0; transition: opacity .3s ease;
}
.puzzle.on { opacity: 1; }
.puzzle .bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.puzzle .layer { position: absolute; inset: 0; }
.puzzle .ghost {
  position: absolute; transform: translate(-50%, -50%);
  border: 3px dashed rgba(255, 255, 255, .85); border-radius: 12px;
  background: rgba(255, 255, 255, .12); pointer-events: none;
}
.puzzle .ghost svg { width: 100%; height: 100%; opacity: .35; }
.puzzle .ghost.fit { border-color: #2fbe6a; background: rgba(47, 190, 106, .28); }
.puzzle .ghost.nofit { border-color: #ff9f43; background: rgba(255, 159, 67, .25); }
.puzzle .knots {
  position: absolute; left: 50%; top: 7.5%; transform: translateX(-50%);
  display: flex; gap: 10px; z-index: 3; pointer-events: none;
}
.puzzle .knot {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  font-size: 20px; font-weight: 900; background: #ff6b5b; border: 3px solid #fff; color: #fff;
}
.puzzle .knot.ok { background: #2fbe6a; }

.fx, .ripple-layer { position: absolute; inset: 0; pointer-events: none; z-index: 7; overflow: hidden; }
.spark {
  position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #ffe14d;
  animation: spark .8s ease-out forwards;
}
@keyframes spark { to { margin-left: 14px; margin-top: -28px; opacity: 0; } }
.ripple {
  position: absolute; width: 20px; height: 20px; margin: -10px; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .8); animation: rip .55s ease-out forwards;
}
@keyframes rip { to { width: 80px; height: 80px; margin: -40px; opacity: 0; } }
.hand-hint {
  position: absolute; z-index: 9; font-size: 40px; pointer-events: none;
  margin: -6px 0 0 -14px; transition: left .9s ease-in-out, top .9s ease-in-out;
}
.flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 10; transition: opacity .3s ease; }
.flash.on { opacity: .92; transition: none; }

.hud {
  position: absolute; top: 0; left: 0; right: 0; z-index: 12;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 8px 8px 0 12px; pointer-events: none;
}
.hud > * { pointer-events: auto; }
.hud-right { display: flex; gap: 6px; }
.btn-ico {
  width: 38px; height: 38px; border-radius: 50%; border: 0;
  background: var(--panel); color: #fff; font-size: 16px; font-weight: 800;
}
.progress {
  flex: 1; height: 8px; max-width: 46%;
  background: rgba(0, 0, 0, .3); border-radius: 99px; opacity: 0; pointer-events: none;
}
.progress.on { opacity: 1; }
.progress i {
  display: block; height: 100%; width: 0%; border-radius: inherit;
  background: linear-gradient(90deg, #ffe14d, #4aa3ff); transition: width .3s ease;
}
.turn-banner {
  position: absolute; left: 12px; margin: 0; z-index: 13;
  bottom: calc(22% + 8px);
  background: rgba(255, 225, 77, .96); color: var(--ink); font-weight: 900;
  padding: 4px 12px; border-radius: 999px; font-size: 13px; display: none; width: auto; text-align: center;
}
#stage.samen #caption { padding-top: 28px; }
.turn-banner.on { display: block; }
.turn-banner.b { background: rgba(120, 200, 255, .96); }

/* Caption overlays bottom ~22% of the cover-cropped frame (SCENE-SPEC).
   pointer-events none so near-edge drag sprites stay grabable; skip re-enables. */
#caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 11;
  height: 22%;
  min-height: 96px;
  padding: 10px 14px calc(8px + var(--safe-bottom));
  background: linear-gradient(180deg, rgba(8, 16, 28, .55), rgba(8, 16, 28, .96));
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  pointer-events: none;
}
#caption .skip { pointer-events: auto; }
body[data-bg="NK3c"] #caption,
body[data-bg="NK3a"] #caption,
body[data-bg="NK3b"] #caption,
body[data-bg="HA3"] #caption,
body[data-bg="B01"] #caption,
body[data-bg="P0"] #caption {
  padding: 6px 12px calc(6px + var(--safe-bottom));
  gap: 2px;
  justify-content: flex-end;
  background: linear-gradient(
    180deg,
    rgba(8, 16, 28, 0) 0%,
    rgba(8, 16, 28, .55) 28%,
    rgba(8, 16, 28, .94) 55%,
    rgba(8, 16, 28, .98) 100%
  );
}
body[data-bg="NK3c"] #caption .say,
body[data-bg="NK3a"] #caption .say,
body[data-bg="NK3b"] #caption .say,
body[data-bg="HA3"] #caption .say,
body[data-bg="B01"] #caption .say,
body[data-bg="P0"] #caption .say {
  font-size: clamp(14px, 3.8vw, 17px);
  line-height: 1.2;
}
body[data-bg="NK3c"] #caption .say small,
body[data-bg="NK3a"] #caption .say small,
body[data-bg="NK3b"] #caption .say small,
body[data-bg="HA3"] #caption .say small,
body[data-bg="B01"] #caption .say small,
body[data-bg="P0"] #caption .say small {
  margin-top: 1px;
  font-size: .78em;
}
body[data-bg="NK3c"] #caption .skip,
body[data-bg="NK3a"] #caption .skip,
body[data-bg="NK3b"] #caption .skip,
body[data-bg="HA3"] #caption .skip,
body[data-bg="B01"] #caption .skip,
body[data-bg="P0"] #caption .skip {
  min-height: 34px;
  font-size: 12px;
  padding: 4px 10px;
}
.say {
  margin: 0; font-size: clamp(16px, 4.4vw, 19px); font-weight: 800; line-height: 1.28;
}
.say small { display: block; margin-top: 3px; font-size: .8em; font-weight: 700; opacity: .85; }
.skip {
  align-self: flex-end; min-height: 40px; min-width: 120px; border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .92); font-weight: 800; font-size: 14px; padding: 6px 14px;
}

#boot, #pause, #help {
  position: absolute; inset: 0; z-index: 20;
  background: linear-gradient(160deg, #1e6fff 0%, #0b3d8c 55%, #07284f 100%);
  display: grid; place-items: center; padding: 24px; text-align: center;
}
#boot[hidden], #pause[hidden], #help[hidden], #memoir[hidden], #puzzle[hidden] { display: none !important; }
#boot h1, #pause h2, #help h2 { margin: 0 0 8px; font-size: clamp(28px, 8vw, 36px); font-weight: 900; }
#boot p, #pause p, #help p { margin: 0 0 16px; opacity: .94; font-weight: 700; line-height: 1.35; }
.mode-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.mode-row button {
  min-height: 58px; border-radius: 16px; border: 3px solid transparent;
  font-weight: 900; font-size: 17px; background: rgba(255, 255, 255, .15); color: #fff;
}
.mode-row button.on { border-color: #ffe14d; background: rgba(255, 255, 255, .28); }
#btnStart, .panel-btn {
  min-height: 60px; min-width: 70%; border: 0; border-radius: 18px;
  background: #ffe14d; color: var(--ink); font-weight: 900; font-size: 20px;
}
.panel-btn.alt { background: #fff; min-width: 60%; font-size: 17px; }
.boot-note { font-size: 12px !important; opacity: .7 !important; margin-top: 12px !important; }
.boot-ver { font-size: 11px !important; opacity: .55 !important; margin-top: 6px !important; letter-spacing: .04em; }

.memoir {
  position: absolute; left: 5%; right: 5%; top: 7%; z-index: 9;
  height: calc(100cqw * 16 / 9 * 0.86);
  background: #fff6e4; color: var(--ink); border-radius: 22px; border: 4px solid #e9c98f;
  padding: 14px; display: flex; flex-direction: column; gap: 10px; align-items: center;
}
.memoir h3 { margin: 0; font-size: 26px; font-weight: 900; color: #1e4fbf; }
.memoir .photo {
  position: relative; width: 78%; aspect-ratio: 3 / 4; border-radius: 10px; border: 6px solid #fff;
  background-size: cover; background-position: 50% 45%; flex-shrink: 1; min-height: 0;
}
.memoir .photo .sticker { position: absolute; width: 24%; transform: translate(-50%, -50%); pointer-events: none; }
.memoir .photo .sticker svg { width: 100%; height: auto; display: block; }
.memoir .stamps {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  max-width: 100%; padding: 0 2px; box-sizing: border-box;
}
.memoir .stamp {
  width: min(72px, 18vw); text-align: center; font-size: clamp(10px, 2.8vw, 12px); font-weight: 900;
}
.memoir .stamp .ic {
  width: min(60px, 16vw); height: min(60px, 16vw); margin: 0 auto 2px; border-radius: 50%;
  background: #fff; border: 3px dashed #e0a84a; display: grid; place-items: center;
  overflow: hidden;
}
.memoir .stamp .ic svg { width: 70%; height: 70%; }
.memoir .stamp .ic .stamp-img { width: 92%; height: 92%; object-fit: contain; display: block; }
.memoir .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-top: auto; }
.memoir .row button {
  min-height: 54px; border: 0; border-radius: 16px; font-weight: 900; font-size: 17px;
  background: #2fbe6a; color: #fff;
}
.memoir .row button.soft { background: #ff9f43; }

/* ===== v2.5.2-levend: layered living scenes (720×1280 art-space = cover-crop box) ===== */
/* z=1 under .spr (12) / .tgt so interactive tokens are never covered by voorlaag */
.lev-root { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.lev-cam {
  position: absolute; inset: 0; width: 100%; height: 100%;
  transform-origin: 50% 45%; will-change: transform;
}
.lev-band { position: absolute; inset: 0; pointer-events: none; }
.lev-full {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.lev-full img { width: 100%; height: 100%; object-fit: fill; display: block; }
.lev-cam.lev-punch { animation: levPunch .28s ease-out; }
@keyframes levPunch {
  0% { transform: scale(1); }
  30% { transform: scale(1.03); }
  100% { transform: scale(1); }
}
.lev-fx { position: absolute; inset: 0; z-index: 40; pointer-events: none; }
.lev-actor {
  position: absolute;
  transform: translate(calc(-1 * var(--feet-x, 50%)), calc(-1 * var(--feet-y, 100%)));
  transform-origin: var(--feet-x, 50%) var(--feet-y, 100%);
  pointer-events: none;
}
.lev-prop {
  position: absolute; pointer-events: none;
  transform: translate(-50%, -50%); transform-origin: 50% 50%;
}
.lev-prop[data-pivot="bottom"] { transform: translate(-50%, -100%); transform-origin: 50% 100%; }
.lev-prop[data-pivot="top"] { transform: translate(-50%, 0); transform-origin: 50% 0; }
.lev-prop[data-pivot="feet"] {
  transform: translate(calc(-1 * var(--feet-x, 50%)), calc(-1 * var(--feet-y, 100%)));
  transform-origin: var(--feet-x, 50%) var(--feet-y, 100%);
}
.lev-prop img, .lev-actor img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
.lev-actor .lev-shadow {
  position: absolute; left: 50%; bottom: 0; width: 70%; height: 18%;
  transform: translate(-50%, 40%); opacity: .55; z-index: 0;
}
.lev-actor .lev-tail { position: absolute; inset: 0; z-index: 1; }
.lev-actor .lev-body { position: absolute; inset: 0; z-index: 2; }
.lev-actor .lev-blink, .lev-actor .lev-mouth, .lev-actor .lev-doel {
  position: absolute; inset: 0; z-index: 3;
}
.lev-actor .lev-doel { z-index: 4; animation: levGlow 1.1s ease-in-out infinite alternate; }
.lev-breathe { animation: levBreathe 2.6s ease-in-out infinite; animation-delay: calc(var(--phase, 0) * -2.6s); }
@keyframes levBreathe {
  0%, 100% { scale: 1 1; }
  50% { scale: 0.995 1.015; }
}
.lev-wag .lev-tail { animation: levWag 1.2s ease-in-out infinite; }
.lev-wag-happy .lev-tail { animation: levWagHappy .35s ease-in-out infinite; }
@keyframes levWag {
  0%, 100% { transform: rotate(-6deg); }
  50% { transform: rotate(6deg); }
}
@keyframes levWagHappy {
  0%, 100% { transform: rotate(-16deg); }
  50% { transform: rotate(16deg); }
}
.lev-squash { animation: levSquash .32s ease-out; }
@keyframes levSquash {
  0% { scale: 1.12 0.88; }
  40% { scale: 0.95 1.05; }
  100% { scale: 1 1; }
}
.lev-cloud {
  position: absolute; opacity: .95; transform: translate(-50%, -50%);
  animation: levCloudDrift linear infinite;
  animation-duration: var(--drift-s, 16s);
}
@keyframes levCloudDrift {
  from { translate: 0 0; }
  to { translate: 90% 0; }
}
.lev-dust {
  position: absolute; opacity: .45; transform: translate(-50%, -50%);
  animation: levDust 5s ease-in-out infinite alternate;
}
@keyframes levDust {
  from { translate: 0 0; opacity: .25; }
  to { translate: 8px -12px; opacity: .7; }
}
.lev-leaf { position: absolute; pointer-events: none; transform: translate(-50%, -50%); }
.lev-leaf.burst { animation: levLeafBurst 2s ease-out forwards; }
@keyframes levLeafBurst {
  0% { translate: 0 0; rotate: 0deg; opacity: 1; }
  100% { translate: 55vw 30vh; rotate: 220deg; opacity: 0; }
}
.lev-woord {
  position: absolute; z-index: 22; transform: translate(-50%, -50%);
  animation: levWoordPop 1s ease-out forwards; pointer-events: none;
}
.lev-woord img { width: 100%; height: auto; display: block; }
@keyframes levWoordPop {
  0% { scale: 0; opacity: 0; rotate: -6deg; }
  15% { scale: 1.1; opacity: 1; }
  25% { scale: 1; }
  70% { translate: 0 -12px; opacity: 1; }
  100% { translate: 0 -18px; opacity: 0; }
}
.lev-glinster {
  position: absolute; transform: translate(-50%, -50%);
  animation: levTwinkle .5s ease-out forwards; pointer-events: none; z-index: 21;
}
@keyframes levTwinkle {
  0% { scale: .4; opacity: 0; }
  40% { scale: 1; opacity: 1; }
  100% { scale: .6; opacity: 0; }
}
/* Soft glow pulse ≤ ~1 Hz (photosensitivity-safe; max ~2 flashes/s) */
.lev-glow-target { animation: levGlow 1.2s ease-in-out infinite alternate; }
.lev-glow-target.lev-glow-off { animation: none; opacity: 0 !important; }
.lev-lamp-lit {
  transition: opacity .28s ease-in-out;
}
@keyframes levGlow {
  from { opacity: .45; scale: 1; }
  to { opacity: .9; scale: 1.04; }
}
.lev-bulb {
  position: absolute; transform: translate(-50%, 0); transform-origin: 50% 0;
  overflow: visible;
}
.lev-bulb img { width: 100%; height: 100%; object-fit: contain; object-position: top center; display: block; }
.lev-cloud img { width: 100%; height: 100%; object-fit: contain; display: block; }
.lev-bulb.swing { animation: levBulbSwing 2s ease-in-out infinite; }
@keyframes levBulbSwing {
  0%, 100% { rotate: -5deg; }
  50% { rotate: 5deg; }
}
.lev-btn-pop { animation: levBtnPop .28s cubic-bezier(.34,1.56,.64,1); }
@keyframes levBtnPop {
  from { transform: translate(-50%, -50%) scale(0.85); }
  to { transform: translate(-50%, -50%) scale(1); }
}
.lev-scarf-fly { position: absolute; z-index: 14; transform: translate(-50%, -50%); pointer-events: none; }
.lev-wind { position: absolute; z-index: 13; opacity: .6; animation: levWind .6s linear forwards; pointer-events: none; }
@keyframes levWind {
  from { translate: -40vw 0; opacity: 0; }
  20% { opacity: .65; }
  to { translate: 80vw 0; opacity: 0; }
}
.lev-iris {
  position: absolute; inset: 0; z-index: 40; pointer-events: none;
  background: #0b1524;
  clip-path: circle(80% at 50% 40%);
  animation: levIris .7s ease-in forwards;
}
@keyframes levIris {
  from { clip-path: circle(80% at 68% 37%); opacity: 0; }
  10% { opacity: 1; }
  to { clip-path: circle(0% at 68% 37%); opacity: 1; }
}
.tgt.lamp-choice {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  border-radius: 50%; overflow: visible;
  min-width: 72px !important; min-height: 72px !important;
  animation: none; /* no pulseHot — keeps hit box stable */
}
.tgt.lamp-choice.lev-btn-pop { animation: levBtnPop .28s cubic-bezier(.34,1.56,.64,1); }
.tgt.lamp-choice img { filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); width: 85%; height: 85%; }
.tgt.siren-lamp {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  min-width: 72px !important; min-height: 72px !important;
  animation: none;
}
body[data-reduced-motion="1"] .lev-breathe,
body[data-reduced-motion="1"] .lev-wag .lev-tail,
body[data-reduced-motion="1"] .lev-wag-happy .lev-tail,
body[data-reduced-motion="1"] .lev-cloud,
body[data-reduced-motion="1"] .lev-dust,
body[data-reduced-motion="1"] .lev-bulb.swing,
body[data-reduced-motion="1"] .lev-cam.lev-punch,
body[data-reduced-motion="1"] .lev-squash { animation: none !important; }
body[data-reduced-motion="1"] .lev-doel,
body[data-reduced-motion="1"] .lev-glow-target { animation: none; opacity: .8; }
@media (prefers-reduced-motion: reduce) {
  .lev-breathe, .lev-wag .lev-tail, .lev-cloud, .lev-dust, .lev-bulb.swing { animation: none !important; }
}