/* =========================================================
   Step 3 — Leave-In Serum (scoped under .lvl-3)
   Layout: the client in the chair + one panel that changes
   per phase (serum tray → store memory → absorb timer).
   Wide stage → side by side; portrait stage → stacked.
   Sizes are computed from the stage container (cqw/cqh).
   ========================================================= */

.lvl-3 {
  --pad: clamp(8px, 2.2cqmin, 22px);
  --gap: clamp(8px, 2cqmin, 20px);
  --dlg: 0px;
  --bar: 30px;
  --chainH: clamp(62px, 12cqh, 92px);
  --availW: calc(100cqw - var(--pad) * 2);
  --availH: calc(100cqh - var(--pad) * 2 - var(--dlg));
  /* wide layout: panel width per phase */
  --pw: min(36cqw, 400px);
  /* the store window (4:3 scene + bar + chain), height-limited */
  --memW: min(calc(var(--availW) - var(--gap) - 24cqw), calc((var(--availH) - var(--bar) - var(--chainH)) * 4 / 3));
}
.lvl-3.is-talking { --dlg: 118px; }
.lvl-3[data-phase="store"] { --pw: var(--memW); }
.lvl-3[data-phase="weak"] { --pw: min(50cqw, 540px); }
.lvl-3[data-phase="done"] { --pw: 0px; --gap: 0px; }

.lvl-3 .l3-sprite { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

/* fallback background if the kit's scene is missing */
.lvl-3 .l3-bgfall {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(50% 45% at 25% 40%, rgba(255, 255, 255, .8), transparent 70%),
    radial-gradient(55% 45% at 12% 8%, rgba(255, 205, 228, .6), transparent 70%),
    radial-gradient(50% 45% at 92% 92%, rgba(207, 238, 255, .6), transparent 70%),
    linear-gradient(160deg, #fff0f7, #f3ecff);
}

/* ---------------- layout ---------------- */
.lvl-3 .l3-layout {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--pw);
  grid-template-rows: minmax(0, 1fr);
  gap: var(--gap);
  padding: var(--pad) var(--pad) calc(var(--pad) + var(--dlg));
  transition: padding .35s var(--ease-out), grid-template-columns .6s var(--ease-in-out), grid-template-rows .6s var(--ease-in-out);
}
.lvl-3 .l3-chair {
  position: relative;
  min-width: 0;
  min-height: 0;
  container: l3chair / size;
  display: grid;
  place-items: center;
}
.lvl-3 .l3-panel {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
}
.lvl-3 .l3-panel > * { grid-area: 1 / 1; }

@container stage (orientation: portrait) {
  .lvl-3 {
    --dlgP: 0px;
    --memW: min(var(--availW), calc((var(--availH) - var(--gap) - 19cqh - var(--bar) - var(--chainH)) * 4 / 3));
    --ph: min(31cqh, 250px);
  }
  .lvl-3.is-talking { --dlg: 150px; }
  .lvl-3[data-phase="store"] { --ph: calc(var(--memW) * .75 + var(--bar) + var(--chainH)); }
  .lvl-3[data-phase="weak"] { --ph: min(54cqh, 400px); }
  .lvl-3[data-phase="done"] { --ph: 0px; --gap: 0px; }
  .lvl-3 .l3-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) var(--ph);
  }
}
@container stage (max-height: 420px) {
  .lvl-3 { --bar: 24px; --chainH: clamp(50px, 17cqh, 64px); --pad: 8px; --gap: 8px; }
  .lvl-3.is-talking { --dlg: 92px; }
}

/* panel children: one visible per phase */
.lvl-3 .l3-tray,
.lvl-3 .l3-mem,
.lvl-3 .l3-absorb {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(.92) translateY(10px);
  transition: opacity .35s ease, transform .5s var(--ease-pop), visibility 0s linear .5s;
}
.lvl-3[data-phase="serum"] .l3-tray,
.lvl-3[data-phase="store"] .l3-mem,
.lvl-3[data-phase="weak"] .l3-absorb {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: opacity .4s ease .18s, transform .6s var(--ease-pop) .18s, visibility 0s;
}

/* ---------------- the client ---------------- */
.lvl-3 .l3-client {
  position: relative;
  height: min(100cqh, 123.08cqw);
  aspect-ratio: 520 / 640;
}
.lvl-3 .l3-seat { position: absolute; inset: 0; width: 100%; filter: drop-shadow(0 18px 24px rgba(120, 40, 110, .18)); }
.lvl-3 .l3-seat .salon-client { transition: filter .6s ease; }
.lvl-3.is-shimmer .l3-seat .salon-client { animation: l3-shimmer 1.3s ease-out 1; }
.lvl-3.is-silky .l3-seat .salon-client { animation: l3-shimmer 1.8s ease-out 1; }
@keyframes l3-shimmer {
  0% { filter: none; }
  35% { filter: drop-shadow(0 0 20px rgba(201, 180, 255, .95)) brightness(1.08); }
  100% { filter: none; }
}
/* overlay in the client's own box (same geometry as .salon-seat__client) */
.lvl-3 .l3-over {
  position: absolute;
  z-index: 4;
  left: 11.5385%;
  top: 1.5625%;
  width: 76.923%;
  height: 78.125%;
  pointer-events: none;
}

/* hair sections (serum drops → rub targets). JS syncs this box to the
   client's hair zone and sets --mk (section size) from it. */
.lvl-3 .l3-hairfx { position: absolute; z-index: 3; left: 15%; top: 6%; width: 70%; height: 66%; pointer-events: none; }
.lvl-3 .l3-mark {
  --p: 0;
  position: absolute;
  width: var(--mk, 23%);
  aspect-ratio: 1;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  -webkit-tap-highlight-color: transparent;
}
.lvl-3 .l3-mark__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, .28) 0 52%, transparent 53%),
    conic-gradient(from -90deg, rgba(255, 255, 255, .98) calc(var(--p) * 1turn), rgba(220, 208, 255, .35) 0);
  -webkit-mask: radial-gradient(circle, transparent 0 58%, #000 60% 70%, transparent 72%);
  mask: radial-gradient(circle, transparent 0 58%, #000 60% 70%, transparent 72%);
  filter: drop-shadow(0 0 6px rgba(183, 156, 255, .95));
}
.lvl-3 .l3-mark::before {
  content: '';
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  border: 2.5px dashed rgba(255, 255, 255, .9);
  background: radial-gradient(circle, rgba(255, 255, 255, .22), rgba(220, 208, 255, .12) 60%, transparent 72%);
  box-shadow: 0 0 18px rgba(183, 156, 255, .55);
}
.lvl-3 .l3-mark__drop { position: relative; width: 34%; opacity: 0; }
.lvl-3 .l3-mark__drop svg { width: 100%; height: auto; }
.lvl-3 .l3-mark.is-dripping { opacity: 1; }
.lvl-3 .l3-mark.is-dripping .l3-mark__drop { opacity: 1; animation: l3-drip .45s cubic-bezier(.55, 0, .9, .6) both; }
.lvl-3 .l3-mark.is-dripping:not(.is-wet)::before,
.lvl-3 .l3-mark.is-dripping:not(.is-wet) .l3-mark__ring { opacity: 0; }
@keyframes l3-drip { 0% { transform: translateY(-260%) scale(.7, 1.2); opacity: 0; } 20% { opacity: 1; } 100% { transform: none; } }
.lvl-3 .l3-mark.is-wet { opacity: 1; pointer-events: auto; cursor: grab; }
.lvl-3 .l3-mark.is-wet::before { animation: l3-breathe 1.2s ease-in-out infinite; animation-delay: calc(var(--i) * -.35s); }
.lvl-3 .l3-mark.is-wet .l3-mark__drop { animation: l3-wobble 1.6s ease-in-out infinite; }
.lvl-3 .l3-mark.is-wet.is-scrubbing { cursor: grabbing; }
.lvl-3 .l3-mark.is-wet.is-scrubbing::before { border-color: #fff; background: radial-gradient(circle, rgba(255, 255, 255, .45), rgba(255, 180, 220, .25) 60%, transparent 72%); }
.lvl-3 .l3-mark:focus-visible { outline: 3px dashed var(--pink-deep); outline-offset: 2px; }
.lvl-3 .l3-mark.is-done { opacity: 1; pointer-events: none; }
.lvl-3 .l3-mark.is-done::before {
  border: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, .9) 0 10%, rgba(233, 221, 255, .6) 32%, rgba(255, 180, 220, .22) 58%, transparent 72%);
  box-shadow: none;
  animation: l3-pop-glow .7s var(--ease-out) both;
}
.lvl-3 .l3-mark.is-done .l3-mark__ring { opacity: 0; transition: opacity .3s; }
.lvl-3 .l3-mark.is-done .l3-mark__drop { opacity: 0; transform: scale(1.5); transition: opacity .3s, transform .4s; }
.lvl-3.is-shimmer .l3-mark.is-done { opacity: 0; transition: opacity 1.2s ease .9s; }
@keyframes l3-breathe { 0%, 100% { scale: 1; } 50% { scale: 1.08; } }
@keyframes l3-wobble { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10%); } }
@keyframes l3-pop-glow { 0% { scale: .4; opacity: 0; } 60% { scale: 1.3; opacity: 1; } 100% { scale: 1; opacity: .9; } }

/* rub hint: a glowing fingertip dot circling the next section */
.lvl-3 .l3-mark.is-wet::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26%;
  aspect-ratio: 1;
  margin: -13% 0 0 -13%;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 34%, rgba(255, 140, 196, .85) 55%, transparent 72%);
  box-shadow: 0 0 14px rgba(255, 95, 168, .8);
  opacity: 0;
  pointer-events: none;
}
.lvl-3.is-rubbing .l3-mark.is-wet:not(.is-scrubbing)::after { animation: l3-rubhint 1.4s ease-in-out 2; animation-delay: calc(var(--i) * .25s + .4s); }
.lvl-3.is-rubbing.is-nudged .l3-mark.is-wet:not(.is-scrubbing)::after { animation-iteration-count: infinite; }
@keyframes l3-rubhint {
  0% { transform: translate(-70%, 0); opacity: 0; }
  15% { opacity: 1; }
  40% { transform: translate(70%, -20%); }
  65% { transform: translate(-60%, 20%); }
  85% { opacity: 1; }
  100% { transform: translate(60%, 0); opacity: 0; }
}

/* speech bubble */
.lvl-3 .l3-say {
  position: absolute;
  left: 56%;
  top: -3%;
  z-index: 6;
  width: max-content;
  max-width: min(56%, 250px);
  padding: .55em .85em;
  border-radius: 16px;
  background: #fff;
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  font: italic 800 clamp(.9rem, 3.4cqmin, 1.25rem)/1.2 var(--font-display);
  color: var(--ink);
  opacity: 0;
  transform-origin: 10% 110%;
  pointer-events: none;
}
.lvl-3 .l3-say::after {
  content: '';
  position: absolute;
  left: 14px;
  bottom: -10px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: skewX(-25deg) rotate(45deg);
}
.lvl-3 .l3-say.is-in { animation: l3-say-in .45s var(--ease-pop) both; }
.lvl-3 .l3-say.is-out { animation: l3-say-out .3s ease-in both; }
@keyframes l3-say-in { 0% { opacity: 0; transform: scale(.5) rotate(-6deg); } 100% { opacity: 1; transform: none; } }
@keyframes l3-say-out { from { opacity: 1; } to { opacity: 0; transform: scale(.9); } }

/* "Silky" sticker */
.lvl-3 .l3-silky {
  position: absolute;
  left: 2%;
  top: 40%;
  z-index: 5;
  font-size: clamp(.62rem, 3cqmin, .9rem);
  background: linear-gradient(180deg, #fff6c9, #ffe28a);
  box-shadow: 0 6px 14px rgba(150, 110, 20, .22);
  opacity: 0;
  pointer-events: none;
}
.lvl-3 .l3-silky.is-in { animation: l3-stamp .6s var(--ease-pop) both; }
@keyframes l3-stamp { 0% { opacity: 0; transform: scale(2.2) rotate(-14deg); } 60% { opacity: 1; transform: scale(.94) rotate(-4deg); } 100% { opacity: 1; transform: rotate(-6deg); } }

/* ---------------- 1 · the serum tray ---------------- */
.lvl-3 .l3-tray {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2cqh, 16px);
}
.lvl-3 .l3-tray__halo {
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(100%, 60cqh);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .95) 0%, rgba(233, 220, 255, .75) 40%, rgba(255, 200, 230, .3) 62%, transparent 72%);
  animation: l3-halo 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes l3-halo { 50% { transform: scale(1.06); opacity: .85; } }
.lvl-3 .l3-tray__stand { position: relative; display: flex; flex-direction: column; align-items: center; }
.lvl-3 .l3-bottle {
  position: relative;
  height: min(44cqh, 320px);
  min-width: 44px;
  min-height: 44px;
  padding: 0 6px;
  border: 0;
  background: none;
  cursor: grab;
  touch-action: none;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  filter: drop-shadow(0 16px 16px rgba(110, 60, 150, .25));
  transition: transform .25s var(--ease-pop), filter .25s;
  -webkit-tap-highlight-color: transparent;
}
.lvl-3 .l3-bottle > svg { height: 100%; width: auto; max-width: none; }
.lvl-3 .l3-bottle:hover { transform: translateY(-6px) rotate(-3deg); }
.lvl-3 .l3-bottle:active { cursor: grabbing; }
.lvl-3 .l3-bottle.is-hinted { filter: drop-shadow(0 0 14px rgba(255, 95, 168, .8)) drop-shadow(0 16px 16px rgba(110, 60, 150, .25)); }
.lvl-3 .l3-bottle.is-hinted { animation: l3-wiggle 1.2s ease-in-out infinite; }
.lvl-3 .l3-bottle.is-pump { animation: l3-pump .5s var(--ease-pop) 1; }
.lvl-3 .l3-bottle:focus-visible { outline: 3px dashed var(--pink-deep); outline-offset: 6px; border-radius: 16px; }
.lvl-3 .l3-bottle__glint {
  position: absolute;
  inset: 8% 10%;
  overflow: hidden;
  border-radius: 18px;
  pointer-events: none;
}
.lvl-3 .l3-bottle__glint::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent);
  animation: spa-glint 2.8s ease-in-out infinite;
}
.lvl-3 .l3-tray__shelf {
  width: clamp(120px, 26cqw, 260px);
  height: 12px;
  margin-top: -3px;
  border-radius: 99px;
  background: linear-gradient(180deg, #fff, #e7dcf7 60%, #cbbde6);
  box-shadow: 0 8px 18px rgba(110, 60, 150, .2);
}
.lvl-3 .l3-tray__meta { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lvl-3 .l3-tray__tag { position: relative; font-size: .64rem; }
.lvl-3 .l3-count {
  position: relative;
  padding: 5px 12px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--lilac-2), 0 6px 14px rgba(120, 40, 110, .14);
  color: #6a4bd0;
  font-size: .66rem;
  opacity: 0;
  transform: scale(.8);
  transition: opacity .3s, transform .3s var(--ease-pop);
}
.lvl-3 .l3-count.is-in { opacity: 1; transform: none; }
.lvl-3 .l3-count.is-bump { animation: spa-pulse .38s var(--ease-pop); }
@keyframes l3-bob { 50% { transform: translateY(-8px); } }
@keyframes l3-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-5deg) translateY(-4px); } 75% { transform: rotate(5deg) translateY(-4px); } }
@keyframes l3-pump { 0% { transform: none; } 30% { transform: scale(1.06, .9) translateY(4px); } 65% { transform: scale(.96, 1.06) translateY(-6px); } 100% { transform: none; } }

@container stage (orientation: portrait) {
  .lvl-3 .l3-tray { flex-direction: row; flex-wrap: wrap; gap: 6px 14px; align-content: center; }
  .lvl-3 .l3-tray__halo { top: 50%; width: min(90%, 40cqh); }
  .lvl-3 .l3-bottle { height: min(22cqh, 190px); }
  .lvl-3 .l3-tray__meta { align-items: flex-start; }
}

/* ---------------- 2 · the memory window ---------------- */
.lvl-3 .l3-mem {
  position: relative;
  width: var(--memW);
  display: flex;
  flex-direction: column;
  overflow: visible;
  border-radius: 18px;
}
.lvl-3 .l3-bar { flex: none; height: var(--bar); padding-top: 0; padding-bottom: 0; white-space: nowrap; overflow: hidden; border-radius: 16px 16px 0 0; }
.lvl-3 .l3-bar__title { overflow: hidden; text-overflow: ellipsis; }
.lvl-3 .l3-bar__place { margin-left: auto; opacity: .8; overflow: hidden; text-overflow: ellipsis; text-transform: none; font-family: var(--font-body); font-weight: 700; letter-spacing: 0; font-size: .74rem; }
.lvl-3 .l3-mem__body { display: flex; flex-direction: column; border-radius: 0 0 16px 16px; overflow: hidden; }
.lvl-3 .l3-view {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  container: l3view / inline-size;
  --hs: max(44px, 10.5cqw);
  cursor: crosshair;
}
.lvl-3 .l3-art, .lvl-3 .l3-art .l3-svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.lvl-3 .l3-view:not([data-scene="1"]) .s1,
.lvl-3 .l3-view:not([data-scene="2"]) .s2 { display: none; }
.lvl-3 .l3-view.is-arriving .l3-shopper { animation: l3-walk .9s var(--ease-out) both; }
.lvl-3 .l3-think { transform-box: fill-box; transform-origin: 85% 100%; }
.lvl-3 .l3-view.is-arriving .l3-think { animation: l3-think .55s .75s var(--ease-pop) both; }
.lvl-3 .l3-cloud--a { animation: l3-drift 9s ease-in-out infinite alternate; }
.lvl-3 .l3-cloud--b { animation: l3-drift 12s ease-in-out -4s infinite alternate-reverse; }
.lvl-3 .l3-tw use { transform-box: fill-box; transform-origin: center; animation: l3-twinkle 2.6s ease-in-out infinite; }
.lvl-3 .l3-tw use:nth-child(2) { animation-delay: -.9s; }
.lvl-3 .l3-tw use:nth-child(3) { animation-delay: -1.7s; }
.lvl-3 .l3-view[data-scene="2"] .l3-bus { animation: l3-bus 1.2s var(--ease-out) both; }
@keyframes l3-walk {
  0% { transform: translateX(-150px); opacity: 0; }
  18% { opacity: 1; }
  30% { transform: translate(-100px, -4px); }
  50% { transform: translate(-58px, 0); }
  70% { transform: translate(-22px, -3px); }
  100% { transform: none; opacity: 1; }
}
@keyframes l3-think { 0% { transform: scale(.2); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes l3-drift { from { transform: translateX(-10px); } to { transform: translateX(14px); } }
@keyframes l3-twinkle { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.55); opacity: .55; } }
@keyframes l3-bus { from { transform: translateX(-90px); } to { transform: none; } }

/* "Spot what I noticed." */
.lvl-3 .l3-ask {
  position: absolute;
  left: 2.4cqw;
  top: 2.4cqw;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 62%;
  padding: 5px 14px 5px 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--pink-2), 0 8px 18px rgba(120, 40, 110, .2);
  opacity: 0;
  transform: scale(.6) rotate(-4deg);
  transform-origin: 10% 50%;
  transition: opacity .3s, transform .5s var(--ease-pop);
  pointer-events: none;
}
.lvl-3 .l3-ask.is-in { opacity: 1; transform: rotate(-2deg); }
.lvl-3 .l3-ask__face {
  flex: none;
  width: clamp(26px, 7cqw, 42px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 35%, #fff, var(--blush-2));
  box-shadow: 0 0 0 2px var(--pink-2);
}
.lvl-3 .l3-ask__face svg { width: 100%; height: 100%; }
.lvl-3 .l3-ask__txt { font-style: italic; font-size: clamp(.9rem, 4.3cqw, 1.6rem); color: var(--pink-deep); line-height: 1.05; }

/* hotspots */
.lvl-3 .l3-hots { position: absolute; inset: 0; z-index: 3; }
.lvl-3 .l3-hot {
  position: absolute;
  width: var(--hs);
  height: var(--hs);
  margin: calc(var(--hs) / -2) 0 0 calc(var(--hs) / -2);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: zoom-in;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .3s;
}
.lvl-3 .l3-hot::before {
  content: '';
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, .0);
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.lvl-3 .l3-hot:hover::before,
.lvl-3 .l3-hot:focus-visible::before {
  border-color: #fff;
  background-color: rgba(255, 255, 255, .18);
  box-shadow: 0 0 0 2px rgba(255, 95, 168, .5), inset 0 0 14px rgba(255, 255, 255, .7);
}
.lvl-3 .l3-hot:focus-visible { outline: none; }
.lvl-3 .l3-hot__spark {
  position: absolute;
  right: 0;
  top: -4%;
  font-size: clamp(15px, 3.8cqw, 26px);
  line-height: 1;
  color: #fff;
  text-shadow: 0 0 3px #ff5fa8, 0 0 9px #ff5fa8, 0 1px 0 #d63384;
  animation: l3-spark 1.8s ease-in-out infinite;
  animation-delay: var(--d, 0s);
  pointer-events: none;
}
@keyframes l3-spark {
  0%, 100% { transform: scale(.72) rotate(0deg); opacity: .8; }
  50% { transform: scale(1.15) rotate(45deg); opacity: 1; }
}
.lvl-3 .l3-hot.is-hinted::before {
  border: 3px solid #fff;
  box-shadow: 0 0 0 3px var(--pink), 0 0 24px rgba(255, 95, 168, .85);
  animation: l3-ping 1.1s ease-in-out infinite;
}
@keyframes l3-ping { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
.lvl-3 .l3-hot.is-found::before {
  inset: 0;
  border: 3px solid var(--pink);
  background: radial-gradient(circle, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, .45));
  box-shadow: 0 0 0 3px #fff, 0 0 26px rgba(255, 95, 168, .8);
  animation: l3-circle .5s var(--ease-pop) both;
}
@keyframes l3-circle { 0% { transform: scale(1.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.lvl-3 .l3-hot.is-found .l3-hot__spark { display: none; }
.lvl-3 .l3-hot__tag {
  position: absolute;
  left: 50%;
  bottom: 100%;
  translate: -50% -4px;
  padding: 4px 8px 3px;
  border-radius: 8px;
  background: var(--pink);
  color: #fff;
  font-size: .62rem;
  white-space: nowrap;
  box-shadow: 0 2px 0 var(--pink-deep), 0 0 0 2px #fff;
  animation: spa-pop-in .45s var(--ease-pop) both;
  pointer-events: none;
}
.lvl-3 .l3-hots.is-locked .l3-hot:not(.is-found) { opacity: 0; pointer-events: none; }

/* camera flash */
.lvl-3 .l3-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 6; }
.lvl-3 .l3-flash.is-on { animation: l3-flash .55s ease-out both; }
@keyframes l3-flash { 0% { opacity: .9; } 100% { opacity: 0; } }

/* time-passes iris card */
.lvl-3 .l3-timecard {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: grid;
  place-items: center;
  padding: 16px;
  background:
    radial-gradient(circle at 50% 42%, #fff 0 16%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(135deg, #ffd7ea 0%, #e6dcff 55%, #d6efff 100%);
  clip-path: circle(0% at 50% 50%);
  pointer-events: none;
}
.lvl-3 .l3-timecard.is-in { clip-path: circle(76% at 50% 50%); transition: clip-path .5s var(--ease-in-out); pointer-events: auto; }
.lvl-3 .l3-timecard.is-out { clip-path: circle(0% at 50% 50%); transition: clip-path .36s var(--ease-in-out); }
.lvl-3 .l3-timecard__in { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.lvl-3 .l3-timecard__txt { font-style: italic; font-size: clamp(1.4rem, 7.4cqw, 3rem); color: var(--ink); line-height: 1.05; }
.lvl-3 .l3-timecard__pages { position: relative; width: clamp(34px, 7cqw, 52px); aspect-ratio: 1; margin-bottom: 4px; }
.lvl-3 .l3-timecard__pages i {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: #fff linear-gradient(180deg, var(--pink) 0 26%, #fff 26%);
  box-shadow: 0 3px 8px rgba(120, 40, 110, .2);
}
.lvl-3 .l3-timecard.is-in .l3-timecard__pages i:nth-child(2) { animation: l3-page .5s .12s ease-in both; }
.lvl-3 .l3-timecard.is-in .l3-timecard__pages i:nth-child(3) { animation: l3-page .5s .34s ease-in both; }
@keyframes l3-page { 0% { transform: none; opacity: 1; } 100% { transform: translate(40%, -70%) rotate(24deg); opacity: 0; } }

/* speech-bubble nudges in the scene */
.lvl-3 .l3-nudge {
  position: absolute;
  z-index: 8;
  --tx: -50%;
  --ty: 0px;
  --tl: 50%;
  width: max-content;
  max-width: min(64cqw, 260px);
  padding: .5em .8em;
  border-radius: 14px;
  background: #fff;
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  font-size: clamp(.74rem, 2.6cqw, .95rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  pointer-events: none;
  transform: translate(var(--tx), var(--ty));
  animation: l3-nudge-in .35s var(--ease-pop) both;
}
.lvl-3 .l3-nudge.is-c { --tx: -50%; --tl: 50%; }
.lvl-3 .l3-nudge.is-l { --tx: -14%; --tl: 14%; }
.lvl-3 .l3-nudge.is-r { --tx: -86%; --tl: 86%; }
.lvl-3 .l3-nudge.is-above { --ty: calc(-100% - var(--hs) / 2 - 6px); }
.lvl-3 .l3-nudge.is-below { --ty: calc(var(--hs) / 2 + 8px); }
.lvl-3 .l3-nudge.is-soft { border-color: #8565f0; box-shadow: 3px 3px 0 #8565f0; }
.lvl-3 .l3-nudge::after {
  content: '';
  position: absolute;
  left: var(--tl);
  width: 12px;
  height: 12px;
  margin-left: -6px;
  background: #fff;
  border-right: 2px solid;
  border-bottom: 2px solid;
  border-color: inherit;
}
.lvl-3 .l3-nudge.is-above::after { bottom: -8px; transform: rotate(45deg); }
.lvl-3 .l3-nudge.is-below::after { top: -8px; transform: rotate(225deg); }
.lvl-3 .l3-nudge.is-out { animation: l3-nudge-out .3s ease-in both; }
@keyframes l3-nudge-in { from { opacity: 0; scale: .7; } to { opacity: 1; scale: 1; } }
@keyframes l3-nudge-out { to { opacity: 0; scale: .9; } }

/* the pattern chain */
.lvl-3 .l3-chain {
  flex: none;
  height: var(--chainH);
  margin: 0;
  padding: 6px 10px;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background:
    repeating-linear-gradient(180deg, transparent 0 17px, rgba(143, 211, 255, .3) 17px 18px),
    linear-gradient(180deg, #fffdf8, #fff4fa);
  border-top: 2px solid #fff;
  box-shadow: inset 0 3px 8px rgba(120, 40, 110, .06);
}
.lvl-3 .l3-slot {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-align: center;
}
.lvl-3 .l3-slot__ic {
  position: relative;
  flex: none;
  height: calc(var(--chainH) * .5);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px dashed var(--lilac);
  background: rgba(255, 255, 255, .7);
}
.lvl-3 .l3-slot__ic svg { width: 100%; height: 100%; }
.lvl-3 .l3-slot__q { font: 400 .8rem var(--font-pixel); color: var(--lilac); }
.lvl-3 .l3-slot__lbl { max-width: 100%; font-size: clamp(.58rem, 1.6cqw, .8rem); font-weight: 700; color: var(--ink-3); line-height: 1.08; }
.lvl-3 .l3-slot.is-next .l3-slot__ic { border-color: var(--pink); background: rgba(255, 225, 238, .8); animation: l3-breathe 1.2s ease-in-out infinite; }
.lvl-3 .l3-slot.is-next .l3-slot__q { color: var(--pink); }
.lvl-3 .l3-slot.is-filled .l3-slot__ic { border: 0; background: #fff; box-shadow: 0 0 0 2.5px #fff, 0 4px 10px rgba(80, 40, 110, .2); animation: none; }
.lvl-3 .l3-slot.is-filled .l3-slot__lbl { color: var(--ink); }
.lvl-3 .l3-slot.is-land .l3-slot__ic { animation: l3-land .45s var(--ease-pop) both; }
.lvl-3 .l3-slot.is-glow .l3-slot__ic { animation: l3-glow .7s var(--ease-pop) both; }
.lvl-3 .l3-chain.is-solved .l3-slot__ic { box-shadow: 0 0 0 2.5px #fff, 0 0 0 5px var(--pink-2), 0 4px 14px rgba(255, 95, 168, .35); }
.lvl-3 .l3-chain.is-solved .l3-slot__lbl { color: var(--pink-deep); }
@keyframes l3-land { 0% { scale: 1.5; } 100% { scale: 1; } }
@keyframes l3-glow { 0% { scale: 1; } 45% { scale: 1.22; } 100% { scale: 1; } }
.lvl-3 .l3-arrow { flex: none; width: clamp(12px, 2.4cqw, 26px); margin-bottom: 1.1em; color: #dcd0ff; }
.lvl-3 .l3-arrow svg { width: 100%; height: auto; overflow: visible; }
.lvl-3 .l3-arrow path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; transition: stroke-dashoffset .5s var(--ease-out), color .3s; }
.lvl-3 .l3-arrow.is-drawn { color: var(--pink); }
.lvl-3 .l3-arrow.is-drawn path { stroke-dashoffset: 0; }

/* pick the middle two */
.lvl-3 .l3-pick {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 3cqw, 16px);
  padding: 4cqw;
  background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, .88), rgba(255, 240, 248, .78) 60%, rgba(240, 230, 255, .72));
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s, visibility 0s linear .35s;
}
.lvl-3 .l3-view.is-picking .l3-pick { opacity: 1; visibility: visible; transition: opacity .35s; }
.lvl-3 .l3-view.is-picking { cursor: default; }
.lvl-3 .l3-pick__title { font-style: italic; font-size: clamp(1.05rem, 5.4cqw, 2rem); color: var(--ink); text-align: center; }
.lvl-3 .l3-pick__row { display: flex; gap: clamp(10px, 4cqw, 26px); }
.lvl-3 .l3-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: clamp(96px, 26cqw, 170px);
  min-height: 44px;
  padding: clamp(8px, 2.4cqw, 16px) clamp(10px, 3cqw, 20px);
  border: 3px solid #fff;
  border-radius: 20px;
  background: linear-gradient(180deg, #fff, #ffeef6);
  box-shadow: 0 5px 0 rgba(255, 140, 196, .45), 0 12px 24px rgba(150, 40, 110, .16);
  cursor: pointer;
  transition: transform .2s var(--ease-pop), box-shadow .2s, opacity .3s;
  animation: l3-card-in .5s var(--ease-pop) both;
}
.lvl-3 .l3-card:nth-child(2) { animation-delay: .1s; }
.lvl-3 .l3-card:hover { transform: translateY(-4px) rotate(-1.5deg); }
.lvl-3 .l3-card:active { transform: translateY(2px) scale(.97); }
.lvl-3 .l3-card__ic { width: clamp(34px, 11cqw, 64px); aspect-ratio: 1; }
.lvl-3 .l3-card__ic svg { width: 100%; height: 100%; }
.lvl-3 .l3-card__lbl { font: italic 800 clamp(.95rem, 3.8cqw, 1.35rem) var(--font-display); color: var(--ink); }
.lvl-3 .l3-card.is-hinted { box-shadow: 0 5px 0 rgba(255, 140, 196, .45), 0 0 0 4px var(--pink), 0 0 26px rgba(255, 95, 168, .6); animation: l3-ping 1.1s ease-in-out infinite; }
.lvl-3 .l3-card.is-used { opacity: .25; transform: scale(.92); pointer-events: none; }
.lvl-3 .l3-card:focus-visible { outline: 3px dashed var(--pink-deep); outline-offset: 4px; }
@keyframes l3-card-in { from { opacity: 0; transform: translateY(16px) scale(.9); } }
.lvl-3 .l3-pick__note { min-height: 1.3em; font-size: clamp(.78rem, 2.8cqw, 1rem); font-weight: 700; color: #6a4bd0; text-align: center; }
.lvl-3 .l3-pick__note.is-new { animation: spa-fade-up .35s var(--ease-out); }

/* "This is my strength." */
.lvl-3 .l3-strong {
  position: absolute;
  right: -10px;
  top: calc(var(--bar) + 8px);
  z-index: 9;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 8px 8px;
  border-radius: 14px;
  background: linear-gradient(180deg, #fff6c9, #ffe28a);
  border: 2px dashed rgba(120, 80, 20, .35);
  box-shadow: 0 10px 24px rgba(150, 110, 20, .28), 0 0 0 3px #fff;
  opacity: 0;
  pointer-events: none;
}
.lvl-3 .l3-strong.is-in { animation: l3-stamp-big .7s var(--ease-pop) both; }
@keyframes l3-stamp-big { 0% { opacity: 0; transform: scale(2.4) rotate(-16deg); } 60% { opacity: 1; transform: scale(.94) rotate(3deg); } 100% { opacity: 1; transform: rotate(4deg); } }
.lvl-3 .l3-strong__ic { display: grid; place-items: center; width: clamp(28px, 4cqw, 40px); aspect-ratio: 1; border-radius: 50%; background: #fff; color: var(--pink-deep); box-shadow: 0 0 0 2px var(--pink-2); }
.lvl-3 .l3-strong__ic svg { width: 64%; height: 64%; }
.lvl-3 .l3-strong__txt { font: italic 800 clamp(1rem, 2.4cqw, 1.5rem) var(--font-display); color: #6b4a12; white-space: nowrap; }

/* flyers (drops, clue chips, cards) */
.lvl-3 .l3-flyer { position: absolute; z-index: 20; pointer-events: none; filter: drop-shadow(0 6px 10px rgba(80, 40, 110, .25)); }
.lvl-3 .l3-flyer svg { width: 100%; height: 100%; }
.lvl-3 .l3-flyer--drop { filter: drop-shadow(0 0 8px rgba(183, 156, 255, .9)); }

/* ---------------- 4 · the absorb timer ---------------- */
.lvl-3 .l3-absorb {
  width: min(100%, 540px);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
}
.lvl-3 .l3-absorb__body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(12px, 2.4cqw, 24px);
  padding: clamp(12px, 3cqh, 26px) clamp(14px, 2.4cqw, 26px);
  background:
    radial-gradient(60% 80% at 12% 50%, rgba(233, 221, 255, .7), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 244, 250, .96));
}
.lvl-3 .l3-ring { --ring: clamp(96px, min(17cqw, 28cqh), 180px); position: relative; flex: none; width: var(--ring); height: var(--ring); }
.lvl-3 .l3-ring__svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 6px 12px rgba(120, 80, 200, .2)); }
.lvl-3 .l3-ring .l3-ring__prod { position: absolute; left: 50%; top: 50%; height: 60%; width: auto; max-width: none; translate: -50% -52%; }
.lvl-3 .l3-ring__pct { position: absolute; left: 50%; bottom: -4px; translate: -50% 50%; padding: 3px 8px; border-radius: 99px; background: #fff; box-shadow: 0 0 0 2px var(--lilac-2); color: #6a4bd0; font-size: .6rem; }
.lvl-3 .l3-ring.is-nope { animation: l3-nope .5s var(--ease-out); }
@keyframes l3-nope { 0% { transform: none; } 30% { transform: scale(1.06) rotate(5deg); } 60% { transform: scale(.98) rotate(-3deg); } 100% { transform: none; } }
.lvl-3 .l3-absorb.is-done .l3-ring { animation: l3-glow .8s var(--ease-pop) both; }
.lvl-3 .l3-absorb__copy { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(4px, 1.2cqh, 10px); min-width: 0; }
.lvl-3 .l3-absorb__state { color: #6a4bd0; font-size: .62rem; }
.lvl-3 .l3-absorb.is-done .l3-absorb__state { color: #1f8b64; }
.lvl-3 .l3-absorb__line { font-style: italic; font-size: clamp(1.2rem, 3.2cqw, 2rem); line-height: 1.1; color: var(--ink); min-height: 1.1em; }
.lvl-3 .l3-absorb__detail { font-size: clamp(.86rem, 1.7cqw, 1.05rem); line-height: 1.4; color: var(--ink-2); min-height: 2.8em; opacity: 0; transition: opacity .3s; }
.lvl-3 .l3-absorb__detail.is-in { opacity: 1; }
.lvl-3 .l3-speedrow { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 4px; }
.lvl-3 .l3-speed { min-height: 46px; }
.lvl-3 .l3-speed__ic { font-size: 1.05em; }
.lvl-3 .l3-speed.is-hinted { animation: l3-ping 1.1s ease-in-out infinite; }
.lvl-3 .l3-speed.is-wobble { animation: l3-jelly .55s var(--ease-out); }
.lvl-3 .l3-absorb.is-done .l3-speed { opacity: .5; }
@keyframes l3-jelly { 0% { transform: none; } 25% { transform: scale(1.12, .88) rotate(-3deg); } 50% { transform: scale(.92, 1.08) rotate(3deg); } 75% { transform: scale(1.04, .96); } 100% { transform: none; } }
.lvl-3 .l3-speed__note { font-size: clamp(.78rem, 1.6cqw, .92rem); font-weight: 700; color: #6a4bd0; opacity: 0; }
.lvl-3 .l3-speed__note.is-in { animation: spa-fade-up .35s var(--ease-out) both; }

@container stage (orientation: portrait) {
  .lvl-3 .l3-strong { right: 8px; top: calc(var(--bar) + 6px); max-width: calc(100% - 16px); }
  .lvl-3 .l3-strong__txt { font-size: clamp(.95rem, 4.6cqw, 1.3rem); }
  .lvl-3 .l3-absorb { width: 100%; }
  .lvl-3 .l3-absorb__body { grid-template-columns: auto minmax(0, 1fr); padding: 12px 14px 14px; gap: 10px 14px; }
  .lvl-3 .l3-ring { --ring: clamp(76px, 24cqw, 130px); }
  .lvl-3 .l3-absorb__copy { display: contents; }
  .lvl-3 .l3-absorb__state { grid-column: 2; grid-row: 1; align-self: start; margin-top: 6px; }
  .lvl-3 .l3-absorb__line { grid-column: 2; grid-row: 1; align-self: center; font-size: clamp(1.15rem, 5.6cqw, 1.6rem); }
  .lvl-3 .l3-absorb__detail { grid-column: 1 / -1; font-size: clamp(.84rem, 3.9cqw, 1rem); min-height: 0; }
  .lvl-3 .l3-speedrow { grid-column: 1 / -1; justify-content: center; margin-top: 0; }
}
@container stage (max-height: 420px) {
  .lvl-3 .l3-absorb__body { padding: 8px 12px; gap: 10px; }
  .lvl-3 .l3-ring { --ring: clamp(70px, 26cqh, 110px); }
  .lvl-3 .l3-absorb__line { font-size: clamp(1rem, 6cqh, 1.35rem); }
  .lvl-3 .l3-absorb__detail { font-size: .8rem; line-height: 1.3; min-height: 0; }
  .lvl-3 .l3-speed { min-height: 44px; padding: .5em 1.1em; font-size: .88rem; }
  .lvl-3 .l3-strong { padding: 5px 10px 5px 5px; }
  .lvl-3 .l3-ask { padding: 3px 10px 3px 3px; }
}

/* compact dialog on narrow stages (scoped: only this step) */
@container stage (max-width: 480px) {
  .lvl-3 .dlg.l3-dlg { bottom: 8px; padding: 10px 12px 10px 8px; gap: 8px; width: calc(100% - 16px); }
  .lvl-3 .l3-dlg .dlg__face { width: 44px; height: 44px; }
  .lvl-3 .l3-dlg .dlg__text { font-size: .92rem; line-height: 1.32; }
  .lvl-3 .l3-bar .win__dots { display: none; }
}
@container stage (max-width: 480px) and (max-height: 600px) {
  .lvl-3 .l3-absorb__body { padding: 10px 12px 12px; gap: 8px 12px; }
  .lvl-3 .l3-absorb__detail { font-size: .84rem; line-height: 1.32; }
  .lvl-3 .l3-speedrow { gap: 4px 10px; }
  .lvl-3 .l3-speed { min-height: 44px; padding: .6em 1.3em; font-size: .95rem; }
}
/* compact dialog on short stages (scoped: only this step) */
@container stage (max-height: 420px) {
  .lvl-3 .dlg.l3-dlg { bottom: 6px; padding: 6px 12px 6px 8px; gap: 8px; border-radius: 16px; }
  .lvl-3 .l3-dlg .dlg__face { width: 40px; height: 40px; }
  .lvl-3 .l3-dlg .dlg__text { font-size: .9rem; line-height: 1.3; }
}

/* short landscape (phones on their side): chain beside the scene, dialog docked
   under the chair so the store window keeps its full height */
@container stage (max-height: 420px) and (orientation: landscape) {
  .lvl-3 {
    --chainW: clamp(112px, 15cqw, 150px);
    --viewW: min(calc(var(--availW) - var(--gap) - 30cqw - var(--chainW)), calc((var(--availH) - var(--bar)) * 4 / 3));
    --memW: calc(var(--viewW) + var(--chainW));
  }
  .lvl-3.is-talking { --dlg: 0px; }
  .lvl-3 .l3-mem__body { flex-direction: row; }
  .lvl-3 .l3-view { flex: none; width: var(--viewW); }
  .lvl-3 .l3-chain {
    width: var(--chainW);
    height: auto;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    padding: 6px 8px;
    border-top: 0;
    border-left: 2px solid #fff;
  }
  .lvl-3 .l3-slot { flex: 0 0 auto; height: auto; flex-direction: row; justify-content: flex-start; gap: 6px; text-align: left; }
  .lvl-3 .l3-slot__ic { height: clamp(28px, 11cqh, 38px); }
  .lvl-3 .l3-slot__lbl { font-size: .66rem; }
  .lvl-3 .l3-arrow { width: clamp(28px, 11cqh, 38px); height: 11px; margin: 1px 0; display: grid; place-items: center; }
  .lvl-3 .l3-arrow svg { width: 11px; rotate: 90deg; }
  .lvl-3 .dlg.l3-dlg {
    left: var(--pad);
    transform: none;
    width: calc(100cqw - var(--memW) - var(--pad) * 2 - var(--gap) - 6px);
    max-width: 560px;
  }
  .lvl-3 .l3-strong { top: auto; bottom: 10px; right: calc(var(--chainW) + 6px); }
}

/* reduced motion: keep states, drop the travel */
.lvl-3.is-rm .l3-mark::after { display: none; }