/* =========================================================
   STEP 5 — THE MIRROR — scoped under .lvl-5
   Positions that follow the kit's mirror scene (glass, notes,
   shelves, bubble) are set in px by js/levels/level5.js; this
   file styles them. The stage is a size container ("stage").
   ========================================================= */

.lvl-5 { overflow: hidden; }
.lvl-5 .l5-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  isolation: isolate;
  overflow: hidden;
}

/* ---------- the world: kit scene + glow + steam + glass ---------- */
.lvl-5 .l5-world {
  --wy: 0px;
  position: absolute;
  inset: 0;
  z-index: 0;
  transform: translateY(var(--wy));
  transition: transform .8s var(--ease-out);
}
.lvl-5 .l5-kitscene, .lvl-5 .l5-bg { position: absolute; inset: 0; transition: filter 1.2s ease; }
.lvl-5 .l5-bg { background: radial-gradient(60% 60% at 50% 42%, #fffaf4, #ffe6f2 55%, #ecdcff); }
.lvl-5 .l5-scene:not(.is-lit) .l5-kitscene { filter: saturate(.75) brightness(.97); }
.lvl-5 .l5-scene.is-final .l5-kitscene { filter: saturate(1.08) brightness(1.03); }

.lvl-5 .l5-steam {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(50% 40% at 20% 70%, rgba(255, 255, 255, .7), transparent 70%),
    radial-gradient(45% 40% at 82% 30%, rgba(255, 255, 255, .6), transparent 70%),
    linear-gradient(180deg, rgba(248, 238, 252, .55), rgba(255, 244, 250, .4));
  transition: opacity .6s ease;
}
.lvl-5 .l5-steam.is-gone { opacity: 0 !important; transition: opacity 1.1s ease; }

/* glow over the scene's Hollywood bulbs */
.lvl-5 .l5-halos { position: absolute; inset: 0; pointer-events: none; }
.lvl-5 .l5-halo {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .95) 0 12%, rgba(255, 238, 190, .75) 24%, rgba(255, 214, 150, .28) 48%, rgba(255, 200, 225, 0) 70%);
  transform: translate(-50%, -50%) scale(.3);
  opacity: 0;
  transition: opacity .35s ease, transform .45s var(--ease-pop);
}
.lvl-5 .l5-halo.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.lvl-5 .l5-halo.is-settled { opacity: .45; transition: opacity 1.4s ease; }
.lvl-5 .l5-halos.is-flash .l5-halo { animation: l5-flash .44s ease-in-out 3; animation-delay: calc(var(--k, 0) * 30ms); }
@keyframes l5-flash { 0%, 100% { opacity: .5; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.25); } }
.lvl-5 .l5-scene.is-final .l5-halo { opacity: .85; animation: l5-twinkle 1.6s ease-in-out infinite; animation-delay: calc(var(--k, 0) * -.2s); }
@keyframes l5-twinkle { 50% { opacity: .45; } }

/* the glass (placed exactly over the scene's mirror glass) */
.lvl-5 .l5-glass {
  position: absolute;
  overflow: hidden;
  isolation: isolate;
  container-type: inline-size;
  container-name: l5glass;
  touch-action: none;
  cursor: grab;
  outline: none;
}
.lvl-5 .l5-glass:focus-visible { box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 6px var(--pink-2); }
.lvl-5 .l5-scene:not([data-phase="wipe"]) .l5-glass { cursor: default; touch-action: auto; }
.lvl-5 .l5-glass.is-nudge { animation: l5-glassnudge .9s ease-in-out 1; }
@keyframes l5-glassnudge { 40% { box-shadow: inset 0 0 0 4px rgba(255, 140, 196, .8), inset 0 0 40px rgba(255, 140, 196, .4); } }
.lvl-5 .l5-refl {
  position: absolute;
  transition: filter 1s ease;
  filter: saturate(.9);
}
.lvl-5 .l5-refl > svg { width: 100%; height: 100%; max-width: none; display: block; }
.lvl-5 .l5-scene.is-final .l5-refl { filter: saturate(1.08) brightness(1.04); }
.lvl-5 .l5-glass__streaks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(118deg, transparent 12%, rgba(255, 255, 255, .34) 13%, rgba(255, 255, 255, .08) 21%, transparent 22%),
    linear-gradient(118deg, transparent 26%, rgba(255, 255, 255, .18) 27%, transparent 31%),
    linear-gradient(118deg, transparent 82%, rgba(255, 255, 255, .22) 83%, transparent 88%);
}
.lvl-5 .l5-sheen {
  position: absolute;
  top: -20%; bottom: -20%;
  left: -40%;
  width: 30%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
  transform: skewX(-18deg);
  opacity: 0;
}
.lvl-5 .l5-glass.is-sweep .l5-sheen { animation: l5-sweep 1.1s var(--ease-in-out) 1; }
@keyframes l5-sweep { 0% { opacity: 1; transform: skewX(-18deg) translateX(0); } 100% { opacity: 1; transform: skewX(-18deg) translateX(620%); } }
.lvl-5 .l5-mist {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 55%, rgba(255, 255, 255, .95), rgba(250, 240, 250, .8) 60%, rgba(255, 255, 255, .6));
  opacity: 0;
}
.lvl-5 .l5-glass.is-misty .l5-mist { animation: l5-mist 1.2s ease-in-out 1; }
@keyframes l5-mist { 30% { opacity: .7; } 100% { opacity: 0; } }
.lvl-5 .l5-fog {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  pointer-events: none;
  transition: opacity .3s ease;
}
.lvl-5 .l5-fog.is-gone { opacity: 0 !important; transition: opacity .9s ease; }

.lvl-5 .l5-chip {
  position: absolute;
  left: 50%;
  top: 52%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 0 0 2px var(--pink-2), 0 8px 18px rgba(160, 40, 110, .22);
  color: var(--pink-deep);
  font-size: clamp(.58rem, 3.4cqi, .76rem);
  white-space: nowrap;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: l5-bob 2.2s ease-in-out infinite;
  transition: opacity .3s ease;
}
.lvl-5 .l5-chip.is-hidden { opacity: 0; }
.lvl-5 .l5-chip.is-nudge { animation: spa-pulse .5s var(--ease-pop) 2, l5-bob 2.2s ease-in-out infinite; }
.lvl-5 .l5-chip__hand { display: inline-block; font-size: 1.5em; line-height: 1; color: var(--pink); animation: l5-rub 1.1s ease-in-out infinite; }
@keyframes l5-bob { 50% { translate: 0 -5px; } }
@keyframes l5-rub { 0%, 100% { transform: translateX(-3px) rotate(-8deg); } 50% { transform: translateX(4px) rotate(6deg); } }

/* brand name in lipstick on the glass */
.lvl-5 .l5-lip {
  position: absolute;
  left: 3%; right: 3%;
  bottom: 5%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-script);
  font-size: var(--fs, 14cqi);
  line-height: .98;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
}
.lvl-5 .l5-lip.is-on { opacity: 1; }
.lvl-5 .l5-lip__line {
  display: block;
  padding: .05em .18em .12em;
  background: linear-gradient(180deg, #ff4f8f 0%, #d61f63 55%, #a50f48 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .9)) drop-shadow(0 3px 6px rgba(165, 15, 72, .35));
  clip-path: inset(-30% 100% -30% 0);
  transition: clip-path .9s cubic-bezier(.45, .05, .55, .95);
  white-space: nowrap;
}
.lvl-5 .l5-lip__line.is-writing { clip-path: inset(-30% -8% -30% 0); }
.lvl-5 .l5-lip.is-ph { bottom: 6%; }
.lvl-5 .l5-lip__ph {
  display: inline-block;
  padding: 6px 9px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .93);
  box-shadow: 0 6px 16px rgba(150, 40, 110, .2);
  font: 700 clamp(.66rem, 3.6cqi, .95rem)/1.35 var(--font-body);
  animation: spa-pop-in .5s var(--ease-pop) both;
}
.lvl-5 .l5-scene.is-final .l5-lip__line { filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .9)) drop-shadow(0 0 10px rgba(255, 120, 180, .75)); }

/* speech bubble at the top of the glass */
.lvl-5 .l5-say {
  position: absolute;
  z-index: 7;
  width: max-content;
  max-width: min(320px, 86cqw);
  padding: 8px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 0 0 2px var(--pink-2), 0 10px 24px rgba(150, 40, 110, .25);
  font-size: .92rem;
  line-height: 1.3;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  opacity: 0;
  transform: translate(-50%, 8px) scale(.9);
  transition: opacity .25s ease, transform .35s var(--ease-pop);
  pointer-events: none;
}
.lvl-5 .l5-say.is-in { opacity: 1; transform: translate(-50%, 0) scale(1); }

/* ---------- brand shelves / tray ---------- */
.lvl-5 .l5-panel {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity .45s var(--ease-out);
}
.lvl-5 .l5-scene.is-choosing .l5-panel { opacity: 1; }
.lvl-5 .l5-scene.is-choosing .l5-shelf, .lvl-5 .l5-scene.is-choosing .l5-plate { pointer-events: auto; }
.lvl-5 .l5-shelf {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 240, 248, .42));
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .95), 0 14px 32px rgba(140, 50, 120, .16);
  backdrop-filter: blur(8px) saturate(1.1);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  transform: translateY(-50%) translateX(var(--in, 0));
  transition: transform .6s var(--ease-out);
}
.lvl-5 .l5-shelf[hidden] { display: none; }
.lvl-5 .l5-shelf--l { --in: -30px; }
.lvl-5 .l5-shelf--r { --in: 30px; }
.lvl-5 .l5-scene.is-choosing .l5-shelf { --in: 0px; }
.lvl-5 .l5-scene[data-mode="tray"] .l5-shelf--l { transform: translateX(-50%) translateY(var(--in)); --in: 40px; border-radius: 24px; }
.lvl-5 .l5-scene[data-mode="tray"].is-choosing .l5-shelf--l { --in: 0px; }
.lvl-5 .l5-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
  grid-auto-rows: var(--th, 110px);
  gap: 10px;
}
.lvl-5 .l5-scene[data-mode="tray"] .l5-grid { gap: 7px; }

.lvl-5 .l5-plate {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 14px 10px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .88);
  box-shadow: inset 0 0 0 2px #fff, 0 8px 22px rgba(150, 40, 110, .16);
  text-align: center;
  flex-shrink: 0;
}
.lvl-5 .l5-plate[data-slot="bottom"] {
  position: absolute;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transform: translateY(16px);
  transition: transform .6s var(--ease-out);
}
.lvl-5 .l5-scene.is-choosing .l5-plate[data-slot="bottom"] { transform: none; }
.lvl-5 .l5-plate__kicker { color: var(--pink-deep); font-size: .62rem; }
.lvl-5 .l5-plate__q { font-size: clamp(.95rem, 2.2cqw, 1.3rem); font-style: italic; line-height: 1.16; color: var(--ink); text-wrap: balance; }
.lvl-5 .l5-plate[data-slot="shelf"] .l5-plate__q { font-size: clamp(.82rem, 1.9cqw, 1.05rem); }
.lvl-5 .l5-plate[data-slot="shelf"] .l5-plate__kicker { font-size: .54rem; }
.lvl-5 .l5-plate[data-slot="tray"] { padding: 6px 12px 7px; }
.lvl-5 .l5-plate[data-slot="tray"] .l5-plate__q { font-size: clamp(.9rem, 4.2cqw, 1.15rem); }

/* the brand tiles */
.lvl-5 .l5-tile {
  --tint: #ffe3f0;
  --deep: #ff8cc4;
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  align-items: end;
  gap: 3px;
  min-width: 0;
  min-height: 44px;
  padding: 7px 5px 6px;
  border: 2px solid #fff;
  border-radius: 18px;
  background:
    radial-gradient(90% 60% at 50% 30%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 70%),
    linear-gradient(170deg, #fff 0%, var(--tint) 100%);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--deep) 45%, #fff), 0 8px 18px rgba(120, 40, 110, .14);
  cursor: pointer;
  touch-action: manipulation;
  overflow: hidden;
  container-type: inline-size;
  transition: transform .22s var(--ease-pop), box-shadow .25s ease, opacity .45s ease, filter .45s ease;
}
.lvl-5 .l5-scene.is-choosing .l5-tile { animation: l5-tile-in .55s var(--ease-pop) backwards; animation-delay: calc(.25s + var(--i) * 55ms); }
@keyframes l5-tile-in { from { opacity: 0; transform: translateY(26px) scale(.7) rotate(-6deg); } }
.lvl-5 .l5-tile.is-hop { animation: l5-hop .5s var(--ease-pop) 1 !important; }
@keyframes l5-hop { 40% { transform: translateY(-7px) rotate(-2deg); } }
.lvl-5 .l5-tile::after { /* gloss sweep */
  content: '';
  position: absolute;
  inset: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent);
  transform: translateX(-160%) skewX(-18deg);
  pointer-events: none;
}
.lvl-5 .l5-tile:hover:not(.is-out):not(.is-dimmed) { transform: translateY(-4px) rotate(-1deg); box-shadow: 0 5px 0 color-mix(in srgb, var(--deep) 45%, #fff), 0 14px 24px rgba(120, 40, 110, .2); }
.lvl-5 .l5-tile:hover:not(.is-out)::after { animation: spa-glint 1s ease-in-out 1; }
.lvl-5 .l5-tile:active:not(.is-out) { transform: translateY(2px) scale(.97); }
.lvl-5 .l5-tile:focus-visible { outline: none; box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--pink-2), 0 10px 22px rgba(255, 95, 168, .3); }
.lvl-5 .l5-tile__art { display: grid; place-items: end center; width: 100%; height: 100%; min-height: 0; }
.lvl-5 .l5-tile__art svg { height: 100%; width: auto; max-width: 66%; filter: drop-shadow(0 5px 5px rgba(90, 30, 80, .2)); transition: transform .3s var(--ease-pop), opacity .3s; }
.lvl-5 .l5-tile:hover:not(.is-out) .l5-tile__art svg { transform: translateY(-3px) rotate(-4deg); }
.lvl-5 .l5-tile__name {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.3em;
  max-width: 100%;
  font: 700 clamp(.5rem, 9.6cqi, .86rem)/1.12 var(--font-body);
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ink);
  text-align: center;
  overflow-wrap: normal;
  word-break: normal;
}
.lvl-5 .l5-tile:nth-child(3n+1) .l5-tile__name { font: italic 800 clamp(.62rem, 12.4cqi, 1.05rem)/1.05 var(--font-display); letter-spacing: 0; text-transform: none; }
.lvl-5 .l5-tile:nth-child(3n+3) .l5-tile__name { letter-spacing: .07em; font-weight: 600; font-size: clamp(.48rem, 9cqi, .82rem); }
.lvl-5 .l5-tile--ph .l5-tile__name { font: 700 clamp(.5rem, 8.4cqi, .76rem)/1.25 var(--font-body) !important; letter-spacing: 0 !important; text-transform: none !important; }
.lvl-5 .l5-tile--ph .ph { padding: .05em .3em; }
.lvl-5 .l5-tile--ph { background: radial-gradient(90% 60% at 50% 30%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 70%), repeating-linear-gradient(-45deg, #fffbe6 0 10px, #fff3bf 10px 20px); }

.lvl-5 .l5-tile__tag {
  position: absolute;
  top: 5px; left: 50%;
  translate: -50% 0;
  padding: 2px 7px;
  border-radius: 99px;
  background: linear-gradient(180deg, var(--pink-2), var(--pink));
  color: #fff;
  font-size: .48rem;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .3s ease;
}
.lvl-5 .l5-tile.is-lifted .l5-tile__art svg { opacity: .2; transform: translateY(-10px) scale(.9); }
.lvl-5 .l5-tile.is-out { opacity: .42; filter: grayscale(.75); transform: scale(.94); cursor: default; }
.lvl-5 .l5-tile.is-dimmed { opacity: .35; filter: grayscale(.5); cursor: default; }
.lvl-5 .l5-tile.is-glow { animation: l5-glow 1.3s ease-in-out infinite !important; opacity: 1; z-index: 1; }
.lvl-5 .l5-tile.is-glow::after { animation: spa-glint 1.6s ease-in-out infinite; }
@keyframes l5-glow {
  0%, 100% { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #ffd76a, 0 0 18px 4px rgba(255, 215, 106, .75); transform: translateY(0) scale(1); }
  50% { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #ff8cc4, 0 0 30px 10px rgba(255, 140, 196, .7); transform: translateY(-3px) scale(1.04); }
}
.lvl-5 .l5-tile.is-right { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--pink), 0 0 26px rgba(255, 95, 168, .6); transform: scale(1.04); z-index: 1; }
.lvl-5 .l5-tile.is-right .l5-tile__tag { opacity: 1; }

/* spotlight + floating bottle */
.lvl-5 .l5-dim {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: radial-gradient(circle var(--gr, 240px) at var(--gx, 50%) var(--gy, 45%), rgba(43, 21, 49, 0) 0%, rgba(43, 21, 49, .08) 55%, rgba(43, 21, 49, .5) 100%);
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
}
.lvl-5 .l5-scene.is-spot .l5-dim { opacity: 1; }
.lvl-5 .l5-floats { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.lvl-5 .l5-float { position: absolute; display: grid; place-items: end center; transform-origin: 50% 50%; }
.lvl-5 .l5-float svg { height: 100%; width: auto; max-width: none; filter: drop-shadow(0 8px 10px rgba(60, 20, 70, .3)); }
.lvl-5 .l5-float.is-drum svg { animation: l5-drum .16s ease-in-out infinite alternate; }
@keyframes l5-drum { from { transform: rotate(-3deg) translateY(0); } to { transform: rotate(3deg) translateY(-2px); } }
.lvl-5 .l5-float.is-win svg { filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 16px rgba(255, 215, 106, .95)); animation: l5-winpop .5s var(--ease-pop) 1; }
@keyframes l5-winpop { 50% { transform: scale(1.18) rotate(-4deg); } }

/* ---------- notes tucked into the glass ---------- */
.lvl-5 .l5-notes { position: absolute; z-index: 5; pointer-events: none; }
.lvl-5 .l5-note {
  position: absolute;
  top: calc(26% + var(--row, 0) * 34%);
  width: clamp(52px, 15%, 84px);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  animation: l5-note-in .6s var(--ease-pop) backwards;
  animation-delay: calc(var(--i) * .16s);
}
.lvl-5 .l5-note--l { left: 3%; rotate: -9deg; }
.lvl-5 .l5-note--r { right: 3%; rotate: 8deg; top: calc(40% + var(--row, 0) * 34%); }
@keyframes l5-note-in { from { opacity: 0; transform: scale(.3) translateY(20px); } }
.lvl-5 .l5-note__paper {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 4px 4px 14px 4px;
  background:
    repeating-linear-gradient(180deg, transparent 0 22%, rgba(255, 140, 196, .35) 22% 24%),
    linear-gradient(160deg, #fff 0%, #ffe6f1 100%);
  box-shadow: 0 2px 0 rgba(255, 255, 255, .9) inset, 0 8px 14px rgba(140, 40, 100, .28);
  transition: transform .25s var(--ease-pop);
}
.lvl-5 .l5-note__tape {
  position: absolute;
  top: -9%; left: 50%;
  width: 56%; height: 20%;
  translate: -50% 0;
  rotate: -4deg;
  background: repeating-linear-gradient(90deg, rgba(183, 156, 255, .85) 0 4px, rgba(220, 208, 255, .85) 4px 8px);
  border-radius: 2px;
}
.lvl-5 .l5-note__num { color: var(--pink-deep); font-size: .8rem; }
.lvl-5 .l5-note__seal {
  position: absolute;
  right: -12%; bottom: -12%;
  display: grid;
  place-items: center;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff9fcb, #e33b8a 70%);
  box-shadow: 0 0 0 2px #fff, 0 4px 8px rgba(160, 30, 100, .35);
  color: #fff;
  font-size: .85rem;
  line-height: 1;
}
.lvl-5 .l5-note:hover .l5-note__paper { transform: scale(1.08) rotate(-3deg); }
.lvl-5 .l5-note:focus-visible { outline: none; }
.lvl-5 .l5-note:focus-visible .l5-note__paper { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--pink-2); }
.lvl-5 .l5-note.is-next .l5-note__paper { animation: l5-notepulse 1.4s ease-in-out infinite; }
.lvl-5 .l5-note.is-nudge { animation: spa-wiggle .5s ease-in-out 2; }
@keyframes l5-notepulse {
  0%, 100% { box-shadow: 0 2px 0 rgba(255, 255, 255, .9) inset, 0 8px 14px rgba(140, 40, 100, .28), 0 0 0 0 rgba(255, 95, 168, .6); }
  50% { box-shadow: 0 2px 0 rgba(255, 255, 255, .9) inset, 0 8px 14px rgba(140, 40, 100, .28), 0 0 0 12px rgba(255, 95, 168, 0); transform: scale(1.07); }
}
.lvl-5 .l5-note.is-open { opacity: .15; }
.lvl-5 .l5-note.is-read .l5-note__paper { filter: saturate(.8); }
.lvl-5 .l5-note.is-read .l5-note__seal { background: radial-gradient(circle at 35% 30%, #d8c7ff, #8565f0 70%); }

/* ---------- a note, unfolded ---------- */
.lvl-5 .l5-read {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  padding: 16px;
}
.lvl-5 .l5-read__shade {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: radial-gradient(circle at 50% 45%, rgba(60, 20, 70, .12), rgba(60, 20, 70, .42));
  cursor: pointer;
  animation: fade .3s ease both;
}
.lvl-5 .l5-read.is-out .l5-read__shade { opacity: 0; transition: opacity .35s ease; }
.lvl-5 .l5-read__card {
  position: relative;
  width: min(100%, 460px);
  max-height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 26px 24px 18px;
  border-radius: 6px 6px 22px 6px;
  background:
    linear-gradient(90deg, transparent 22px, rgba(255, 140, 196, .35) 22px 24px, transparent 24px),
    repeating-linear-gradient(180deg, #fffafd 0 29px, rgba(255, 170, 210, .3) 29px 30px),
    #fffafd;
  box-shadow: 0 2px 0 #fff inset, 0 22px 50px rgba(110, 30, 90, .35);
  text-align: center;
  cursor: pointer;
}
.lvl-5 .l5-read__tape {
  position: absolute;
  top: -12px; left: 50%;
  width: 110px; height: 24px;
  translate: -50% 0;
  rotate: 3deg;
  background: repeating-linear-gradient(90deg, rgba(255, 140, 196, .75) 0 6px, rgba(255, 200, 225, .75) 6px 12px);
  border-radius: 2px;
}
.lvl-5 .l5-read__kicker { color: var(--ink-3); font-size: .62rem; }
.lvl-5 .l5-read__count { color: var(--pink-deep); }
.lvl-5 .l5-read__head { font-size: 1.25rem; font-style: italic; color: var(--pink-deep); }
.lvl-5 .l5-read__text {
  max-width: 34ch;
  font: italic 600 clamp(1.02rem, 2.9cqmin, 1.28rem)/1.5 var(--font-display);
  color: var(--ink);
  text-wrap: pretty;
}
.lvl-5 .l5-read__text .ph { font-style: normal; }
.lvl-5 .l5-read__keep { margin-top: 6px; }

/* short stages (phone landscape) */
@container stage (max-height: 460px) {
  .lvl-5 .l5-shelf { padding: 7px; gap: 7px; border-radius: 18px; }
  .lvl-5 .l5-grid { gap: 7px; }
  .lvl-5 .l5-tile { padding: 5px 4px 4px; border-radius: 14px; }
  .lvl-5 .l5-say { font-size: .8rem; padding: 6px 12px; }
  .lvl-5 .l5-read { padding: 8px; }
  .lvl-5 .l5-read__card { padding: 16px 18px 12px; gap: 5px; width: min(100%, 540px); }
  .lvl-5 .l5-read__head { font-size: 1rem; }
  .lvl-5 .l5-read__text { font-size: clamp(.92rem, 4.6cqh, 1.1rem); line-height: 1.4; max-width: 46ch; }
  .lvl-5 .l5-plate { padding: 6px 10px 7px; }
}
@container stage (max-width: 380px) {
  .lvl-5 .l5-plate__kicker { display: none; }
  .lvl-5 .l5-tile { border-radius: 14px; }
}