/* Survey page: level-map rail, Anna avatar, birth card, moods, result modal. */

/* ---- Level map (top progress rail) ---- */
.map {
  --route-progress: 0%;
  height: 160px;
  position: relative;
  z-index: 100;
}

.route {
  position: absolute;
  left: max(4%, 52px);
  right: max(4%, 52px);
  top: 62px;
  height: 20px;
  border-radius: 12px;
  background: linear-gradient(#ffffff, #d9dbe2 45%, #9fa3af);
  border: 2px solid #828692;
  box-shadow: 0 2px 3px rgba(0, 0, 0, .25);
  overflow: hidden;
}

.route::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--route-progress);
  border-radius: inherit;
  background: linear-gradient(180deg, var(--pink-soft), var(--pink) 48%, var(--pink-dark));
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, .45);
  transition: width .45s ease;
}

.node {
  position: absolute;
  top: 72px;
  transform: translate(-50%, -50%);
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff, #d9dbe2 45%, #9fa3af);
  border: 6px solid #e9ebf2;
  box-shadow:
    0 0 0 2px #828692,
    0 2px 4px rgba(0, 0, 0, .3),
    inset 0 -4px 8px rgba(0, 0, 0, .35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pink-deep);
  font-weight: bold;
  font-size: 22px;
}

.node.active {
  transform: translate(-50%, -50%) scale(1.18);
  box-shadow:
    0 0 0 2px #828692,
    0 0 14px 5px rgba(241, 78, 152, .85),
    0 2px 4px rgba(0, 0, 0, .3),
    inset 0 -4px 8px rgba(0, 0, 0, .35);
}

.lbl {
  position: absolute;
  top: 112px;
  transform: translateX(-50%);
  font-weight: bold;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--pink-heading);
  white-space: nowrap;
}

/* End labels hug the edges instead of centering on their nodes */
.lbl.n1 { left: 1%; transform: none; }
.lbl.n5 { left: auto; right: 1%; transform: none; }

.n1 { left: max(4%, 52px); }
.n2 { left: 27%; }
.n3 { left: 50%; }
.n4 { left: 73%; }
.n5 { left: calc(100% - max(4%, 52px)); }

/* ---- Page + Anna avatar ---- */
.page {
  height: calc(100vh - 160px);
  position: relative;
}

.avatar {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  height: 78vh;
}

.avatar img {
  height: 100%;
  object-fit: contain;
}

/* Steam clouds sized/positioned against the portrait; visible only while angry */
.avatar img.steam {
  position: absolute;
  display: none;
  pointer-events: none;
  height: auto;
  object-fit: unset;
}

.avatar.angry .steam { display: block; }

.sL {
  left: 4.7%;
  top: 35.9%;
  width: 24.3%;
  transform-origin: 95% 44%;
  animation: puffL 1s ease-in-out infinite;
}

.sR {
  left: 71.6%;
  top: 36.1%;
  width: 22.5%;
  transform-origin: 3% 42%;
  animation: puffR 1s ease-in-out infinite;
  animation-delay: .45s;
}

@keyframes puffL { 50% { transform: scale(1.2) translateX(-3%); } }
@keyframes puffR { 50% { transform: scale(1.2) translateX(3%); } }

/* ---- Birth-details card ---- */
.card {
  position: absolute;
  right: 6%;
  top: 12%;
  width: 330px;
  padding: 20px;
}

.card b {
  display: block;
  margin: 10px 0 6px;
  color: var(--pink-heading);
  letter-spacing: 1px;
}

.card b:first-child { margin-top: 0; }

.row {
  display: flex;
  gap: 6px;
  align-items: center;
}

.card select,
.card input {
  background: #fff;
  border: 3px solid var(--pink-border);
  border-radius: 12px;
  height: 46px;
  padding: 0 12px;
  font-size: 15px;
  color: var(--ink);
  box-shadow: inset 0 2px 4px rgba(180, 60, 120, .15);
  font-family: var(--font-round);
  -webkit-appearance: none;
  appearance: none;
}

/* custom chevron so selects render identically to the text inputs */
.card select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23f14e98' stroke-width='2' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 26px;
}

/* no spinners on the minute field — keeps it flush with everything else */
.card input[type=number]::-webkit-outer-spin-button,
.card input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.card select:focus,
.card input:focus { outline: 2px solid var(--pink); }

.row select {
  flex: 1;
  min-width: 0;
}

.row input#bMin {
  width: 92px;
  flex: 0 0 92px;
}

.colon {
  font-weight: bold;
  color: var(--pink-heading);
  font-size: 18px;
}

.ampm {
  display: flex;
  gap: 5px;
}

.ampm button {
  border: 3px solid var(--pink-border);
  background: #fff;
  color: var(--pink-heading);
  border-radius: 12px;
  height: 46px;
  padding: 0 12px;
  font-weight: bold;
  cursor: pointer;
}

.ampm button.on {
  background: var(--pink);
  border-color: var(--pink-deep);
  color: #fff;
}

/* Location input + autocomplete dropdown */
.locwrap { position: relative; }

.locwrap input { width: 100%; }

#locList {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 4px;
  background: #fff;
  border: 3px solid var(--pink-border);
  border-radius: 12px;
  overflow: hidden;
  display: none;
  z-index: 5;
  box-shadow: 0 6px 14px rgba(120, 20, 80, .25);
}

#locList div {
  padding: 9px 11px;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
}

#locList div:hover { background: var(--pink-soft); }

.next {
  width: 100%;
  margin-top: 16px;
  padding: 14px;
  background: var(--next-gradient);
  color: #fff;
  border: 0;
  border-radius: 14px;
  font-weight: bold;
  font-size: 20px;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: 0 6px 0 var(--pink-dark);
  font-family: var(--font-round);
}

.next:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 var(--pink-dark);
}

/* ---- Beta panels (Emotion + Animation, stacked bottom-left) ---- */
.betas {
  position: absolute;
  left: 5%;
  bottom: 5%;
  z-index: 12; /* above the 3D-transformed shelf cases so buttons stay clickable in stage 2 */
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  max-width: 350px;
}

.betaPanel {
  padding: 12px;
}

.betaHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-weight: bold;
}

.betaToggle {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 2px solid var(--pink);
  border-radius: 7px;
  background: #fff;
  color: var(--pink-heading);
  font-weight: bold;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.betaToggle:hover {
  background: var(--pink);
  color: #fff;
}

.betaPanel.closed .betaBody { display: none; }

/* pre-paint collapse (html.bcA/.bcM set by the inline head script from
   localStorage; survey.js removes them once it applies the real state) */
html.bcA #animsPanel .betaBody,
html.bcM #moodsPanel .betaBody { display: none; }

.betaBody { margin-top: 6px; }

.betaBody button {
  margin: 3px;
  border-radius: 7px;
  border: 2px solid var(--pink);
  background: white;
  padding: 7px;
  cursor: pointer;
}

.betaBody button.on {
  background: var(--pink);
  color: #fff;
}

/* ---- Animation Beta FX layer (behind Anna, above the stars) ---- */
#fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .2) 6%, #000 18%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .2) 6%, #000 18%, #000 100%);
}

#fx span {
  position: absolute;
  will-change: transform, opacity;
}

/* hearts: pink hearts drifting up from below the fold, swaying as they rise */
.fx-heart {
  top: 100%;
  color: var(--pink);
  font-weight: bold;
  text-shadow: 0 0 14px rgba(241, 78, 152, .9), 0 2px 0 var(--pink-dark);
  animation: fxHeart linear infinite;
}

@keyframes fxHeart {
  0%   { transform: translate(0, 0) scale(.9) rotate(-6deg); opacity: 0; }
  6%   { opacity: 1; }
  25%  { transform: translate(22px, -30vh) scale(1.08) rotate(7deg); }
  50%  { transform: translate(-18px, -60vh) scale(1.16) rotate(-7deg); }
  75%  { transform: translate(16px, -90vh) scale(1.06) rotate(6deg); opacity: 1; }
  100% { transform: translate(-8px, -118vh) scale(.95) rotate(-4deg); opacity: 0; }
}

/* boom: CSS-drawn explosions — hot fireball core, expanding shockwave ring,
   and glowing debris flung outward; every layer in a site shares one
   animation timeline (same duration/delay) so the phases stay in sync */
.fx-boomSite { transform: translate(-50%, -50%); }

.fx-boomSite i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  opacity: 0;
}

.fx-boomSite .fireball {
  background: radial-gradient(circle, #fff 0%, #ffe37a 16%, #ffab2e 36%, #f1440e 58%, rgba(70, 18, 8, .85) 76%, transparent 82%);
  animation: fxFireball ease-out infinite;
}

@keyframes fxFireball {
  0%, 54%   { transform: scale(0); opacity: 0; filter: brightness(3); }
  58%       { transform: scale(.55); opacity: 1; filter: brightness(2.6); }
  70%       { transform: scale(1); opacity: 1; filter: brightness(1.4); }
  82%       { transform: scale(1.22); opacity: .75; filter: brightness(.8) saturate(.6); }
  94%, 100% { transform: scale(1.45); opacity: 0; filter: brightness(.45) saturate(.35); }
}

.fx-boomSite .shock {
  border: 4px solid rgba(255, 224, 150, .9);
  box-shadow: 0 0 18px 4px rgba(255, 160, 60, .7), inset 0 0 12px rgba(255, 200, 100, .6);
  animation: fxShock ease-out infinite;
}

@keyframes fxShock {
  0%, 55%   { transform: scale(0); opacity: 0; }
  60%       { transform: scale(.4); opacity: .9; }
  86%, 100% { transform: scale(2.4); opacity: 0; }
}

.fx-boomSite .frag {
  inset: auto;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  background: radial-gradient(circle, #ffd977, #f1440e 70%);
  box-shadow: 0 0 8px 2px rgba(255, 140, 40, .8);
  animation: fxFrag ease-out infinite;
}

@keyframes fxFrag {
  0%, 56%  { transform: translate(0, 0) scale(1); opacity: 0; }
  61%      { opacity: 1; }
  100%     { transform: translate(var(--dx), var(--dy)) scale(.15); opacity: 0; }
}

/* fire: flame row licking up from the bottom edge + rising embers */
.fx-flame {
  bottom: -12px;
  transform-origin: 50% 100%;
  animation: fxFlick ease-in-out infinite alternate;
}

@keyframes fxFlick {
  from { transform: scaleY(1); }
  to   { transform: scaleY(1.3) rotate(3deg); filter: brightness(1.25); }
}

.fx-ember {
  top: 100%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffb347;
  box-shadow: 0 0 9px 3px rgba(255, 140, 40, .8);
  animation: fxRise linear infinite;
}

/* waterfall: translucent columns pouring down + splashes at the base */
.fx-water {
  top: -40%;
  height: 40%;
  border-radius: 12px;
  background: linear-gradient(rgba(170, 225, 255, 0), rgba(170, 225, 255, .55) 45%, rgba(255, 255, 255, .8));
  animation: fxFall linear infinite;
}

@keyframes fxFall {
  to { transform: translateY(350%); }
}

/* splash: CSS-drawn white foam puffs bursting along the bottom edge */
.fx-splash {
  bottom: -18px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 65%, rgba(255, 255, 255, .95), rgba(210, 240, 255, .55) 45%, rgba(170, 225, 255, 0) 72%);
  opacity: 0;
  transform-origin: 50% 100%;
  animation: fxSplash ease-out infinite;
}

@keyframes fxSplash {
  0%, 55% { transform: scale(.3); opacity: 0; }
  68%     { transform: scale(1.2); opacity: 1; }
  100%    { transform: scale(1.6) translateY(-12px); opacity: 0; }
}

/* fine spray droplets kicked up out of the foam, arcing back down */
.fx-drop {
  bottom: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(235, 250, 255, .95);
  box-shadow: 0 0 6px rgba(190, 235, 255, .8);
  opacity: 0;
  animation: fxDrop ease-out infinite;
}

@keyframes fxDrop {
  0%   { transform: translate(0, 0) scale(1); opacity: 0; }
  15%  { opacity: 1; }
  55%  { transform: translate(calc(var(--dx) * .7), -72px) scale(.9); opacity: 1; }
  100% { transform: translate(var(--dx), -8px) scale(.55); opacity: 0; }
}

/* sparkles: twinkling scattered across the sky */
/* shooting stars: a gradient tail that streaks along its rotated axis
   (rotate then translate), visible only briefly per loop */
.fx-shoot {
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 220, 240, .85) 65%, #fff);
  box-shadow: 0 0 10px 1px rgba(255, 255, 255, .75);
  transform-origin: 100% 50%;
  opacity: 0;
  animation: fxShoot linear infinite;
}

@keyframes fxShoot {
  0%, 60%   { transform: rotate(-28deg) translateX(0); opacity: 0; }
  64%       { opacity: 1; }
  76%       { opacity: 1; }
  84%, 100% { transform: rotate(-28deg) translateX(-56vw); opacity: 0; }
}

/* ---- Compatibility result modal ---- */
#overlay {
  position: fixed;
  inset: 0;
  background: rgba(60, 5, 35, .55);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 20;
}

.modal {
  width: min(92vw, 540px);
  max-height: 86vh;
  overflow: auto;
  padding: 24px;
  color: var(--ink);
}

.modal h2 {
  margin: 0 0 4px;
  text-align: center;
  color: var(--pink-heading);
  letter-spacing: 2px;
}

.pct {
  text-align: center;
  font-size: 70px;
  font-weight: bold;
  color: var(--pink);
}

.modal h3 {
  margin: 12px 0 4px;
  color: var(--pink-heading);
  font-size: 15px;
  letter-spacing: 1px;
}

.modal ul {
  margin: 0;
  padding-left: 6px;
  list-style: none;
}

.modal li {
  font-size: 14px;
  margin: 4px 0;
}

.closeM {
  display: block;
  margin: 0 auto;
  padding: 11px 34px;
  background: var(--pink);
  color: #fff;
  border: 0;
  border-radius: 12px;
  font-weight: bold;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 5px 0 var(--pink-dark);
}

.closeM:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 var(--pink-dark);
}

/* ---- Stage 2: the movie test (Blu-ray shelf) ---- */
/* Stage visibility: body.s2 swaps the birth card for the shelf and shrinks
   Anna into the corner (transform so it animates; feet stay on the floor). */
#stage2 { display: none; }

/* Shelf hugs the left (right inset leaves the corner clear for Anna) */
body.s2 #stage2 {
  display: flex;
  flex-direction: column;
  position: absolute;
  inset: 0 21% 2% 3%;
  z-index: 3;
}

body.s2 .card { display: none; }

.avatar {
  transform-origin: bottom center;
  transition: transform .6s cubic-bezier(.5, 1.4, .4, 1);
}

/* Anna sits above the shelf (but under #moreInfo z15 / overlay z20 / reveal
   z30) so her face and reactions stay visible; pointer-events off so she
   never blocks a poster click */
body.s2 .avatar {
  transform: translateX(-50%) translateX(37vw) scale(.5);
  z-index: 4;
  pointer-events: none;
}

.shelfHead {
  text-align: center;
  margin: 6px 0 10px;
}

.shelfHead b {
  display: block;
  color: #fff;
  font-size: 26px;
  letter-spacing: 3px;
}

.shelfHead span {
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 0 10px rgba(0, 0, 0, .3);
}

/* Mobile-only instruction beneath the stage heading (mobile.css shows it). */
.shelfCta { display: none; }

.shelfHead [hidden] { display: none; }

#stage2 #seenCount {
  color: #fff;
  font-weight: bold;
  letter-spacing: 1px;
  text-align: center;
}

/* Each row is 6 cases standing on a chrome plank (same finish as the route rail) */
/* Keep both desktop rows in one centered group. If each row independently
   flexes to fill the stage, narrower posters leave a huge false "gap"
   between the shelves as the browser width shrinks. */
.shelf {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(24px, 4vh, 40px);
}

.shelfRow {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0 .6vw;
  justify-items: center;
  align-items: end;
  perspective: 1100px;
  padding: 14px 1% 0;
  border-bottom: 14px solid transparent;
  border-image: linear-gradient(#ffffff, #d9dbe2 45%, #9fa3af) 0 0 100% 0 / 0 0 14px 0;
}

#shelfRow2 { padding-top: 0; }

@media (min-width: 701px) {
  body.s2 .shelfRow { transform: translateY(-36px); }
}

/* The case: a Blu-ray in your hand. preserve-3d so the spine reads as a real
   side face when the case tilts. Transform is driven inline by mousemove. */
.case {
  position: relative;
  width: min(100%, 17vh);
  aspect-ratio: 2 / 3;
  margin-bottom: 10px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform .18s ease-out;
  will-change: transform;
  animation: casePopIn .45s cubic-bezier(.4, 1.6, .5, 1) backwards;
}

@keyframes casePopIn {
  from { opacity: 0; transform: translateY(34px) rotateX(18deg); }
}

.case:hover { z-index: 10; }

/* shadow lives on the img, NOT as a filter on .case — filter would flatten
   the preserve-3d and kill the spine */
.case img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 3px 6px 6px 3px;
  border: 1px solid rgba(255, 255, 255, .25);
  transform: translateZ(6px);
  box-shadow: none;
  transition: box-shadow .18s ease-out;
  -webkit-user-select: none;
  user-select: none;
}

.case:hover img { box-shadow: 0 26px 26px rgba(0, 0, 0, .6); }

/* Blu-ray spine: the blue left edge, folded 90° backwards */
.case .spine {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 12px;
  background: linear-gradient(180deg, #1f7ae0, #0a4faf 30%, #063a86);
  border-radius: 2px 0 0 2px;
  transform: rotateY(-90deg) translateZ(6px);
  transform-origin: left center;
}

/* Glossy plastic wrap: highlight follows the cursor (set as --mx/--my by js) */
.case .gloss {
  position: absolute;
  inset: 0;
  border-radius: 3px 6px 6px 3px;
  transform: translateZ(7px);
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(255, 255, 255, .34), rgba(255, 255, 255, .08) 34%, transparent 60%);
  opacity: 0;
  transition: opacity .18s;
  pointer-events: none;
}

.case:hover .gloss { opacity: 1; }

/* Picked = seen: pink glow + corner tag, stays proud of the shelf */
.case .seenTag {
  position: absolute;
  top: 7px;
  right: -6px;
  padding: 4px 9px;
  background: var(--pink);
  color: #fff;
  font-size: 12px;
  letter-spacing: 1px;
  border-radius: 6px;
  box-shadow: 0 2px 0 var(--pink-dark), 0 3px 6px rgba(0, 0, 0, .4);
  transform: translateZ(9px) rotate(6deg) scale(0);
  transition: transform .22s cubic-bezier(.4, 1.8, .5, 1);
}

.case.picked .seenTag { transform: translateZ(9px) rotate(6deg) scale(1); }

.case.picked img {
  outline: 3px solid var(--pink);
  box-shadow: 0 0 18px 4px rgba(241, 78, 152, .8);
}

.case.picked:not(:hover) { transform: translateY(-8px); }

.shelfFoot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding-top: 14px;
}

.shelfFoot .seen {
  color: #fff;
  font-weight: bold;
  letter-spacing: 1px;
}

.shelfFoot .next {
  width: auto;
  margin: 0;
  padding: 12px 36px;
}

#stage2 .shelfFoot .next {
  width: min(64vh, 480px);
  padding: 14px;
}

#stage4 .shelfFoot .next {
  width: min(64vh, 480px);
  padding: 14px;
}

/* Progress rail: unfinished stages are chrome; completed stages turn pink. */
.node.done {
  background: radial-gradient(circle at 35% 30%, var(--pink-soft), #f772b0 30%, var(--pink) 60%, var(--pink-dark) 85%);
  color: #fff;
  cursor: pointer;
}

/* ---- Compatibility reveal: flashes between stages ---- */
#reveal {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(60, 5, 35, .55);
  backdrop-filter: blur(4px);
  pointer-events: none; /* a flash, never a blocker */
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s, visibility .45s;
}

#reveal.show {
  opacity: 1;
  visibility: visible;
}

.ringWrap {
  position: relative;
  width: min(46vh, 340px);
  height: min(46vh, 340px);
}

.ringWrap svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg); /* fill starts from 12 o'clock */
}

.ringBg,
.ringFill {
  fill: none;
  stroke-width: 11;
  stroke-linecap: round;
}

.ringBg { stroke: rgba(255, 255, 255, .28); }

.ringFill {
  stroke: var(--pink);
}

.ringPct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: min(11vh, 82px);
  font-weight: bold;
  color: #fff;
}

.ringLabel {
  font-weight: bold;
  font-size: 20px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #fff;
}

/* punchline under the ring (age gate): reads while the flash lingers */
.ringVerdict {
  max-width: min(86vw, 480px);
  margin-top: 10px;
  text-align: center;
  font-weight: bold;
  font-size: 17px;
  line-height: 1.45;
  color: #fff;
  text-shadow: 0 2px 0 var(--pink-dark), 0 3px 8px rgba(0, 0, 0, .45);
}

.ringVerdict:empty { display: none; }

/* ---- Tiny "more info" escape hatch for the old modal (temporary) ---- */
#moreInfo {
  position: fixed;
  right: 10px;
  bottom: 8px;
  z-index: 15;
  display: none;
  padding: 4px 9px;
  font-size: 10px;
  color: var(--pink-heading);
  background: rgba(255, 255, 255, .75);
  border: 1px solid var(--pink-border);
  border-radius: 8px;
  cursor: pointer;
  opacity: .7;
}

#moreInfo:hover { opacity: 1; }

/* ---- Stage 2b: favorite-movies field (appears when ≤3 shelf movies seen) ---- */
/* Floats above the NEXT footer — the stage is a fixed-height viewport, so an
   inline box would push below the fold. Grows upward as chips are added. */
#faves {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%);
  z-index: 14;
  width: min(64vh, 480px);
  padding: 14px 16px;
  color: var(--pink-heading);
}

#faves.show { display: block; }

#stage2.needsFaves #faves {
  bottom: 18px;
}

#stage2.needsFaves > .shelfFoot {
  display: none;
}

#stage2.needsFaves .shelfCta {
  display: none;
}

#favesNextSlot #nextBtn2 {
  width: 100%;
  margin: 14px 0 0;
  padding: 14px;
}

#nextBtn2 {
  transition: opacity .25s ease, filter .25s ease;
}

#nextBtn2.awaitingFaves {
  opacity: .3;
  filter: saturate(.45);
  cursor: not-allowed;
  pointer-events: none;
}

#faves > b {
  display: block;
  margin-bottom: 8px;
  letter-spacing: .5px;
}

#faves input {
  width: 100%;
  background: #fff;
  border: 3px solid var(--pink-border);
  border-radius: 12px;
  padding: 10px 8px;
  font-size: 15px;
  color: var(--ink);
  box-shadow: inset 0 2px 4px rgba(180, 60, 120, .15);
  font-family: var(--font-round);
}

#faves input:focus { outline: 2px solid var(--pink); }

/* suggestion dropdown, same treatment as the city autocomplete but opening
   upward (the box sits near the bottom edge) */
#favList {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 4px);
  background: #fff;
  border: 3px solid var(--pink-border);
  border-radius: 12px;
  overflow: hidden;
  display: none;
  z-index: 5;
  box-shadow: 0 6px 14px rgba(120, 20, 80, .25);
}

#favList div {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 11px;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
}

#favList div:hover { background: var(--pink-soft); }

#favList img {
  width: 28px;
  height: 42px;
  object-fit: cover;
  border-radius: 3px;
  flex: 0 0 28px;
}

#favChips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.favChip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  border: 2px solid var(--pink);
  border-radius: 9px;
  padding: 4px 8px;
  font-size: 13px;
  font-weight: bold;
  color: var(--ink);
}

.favChip img {
  width: 24px;
  height: 36px;
  object-fit: cover;
  border-radius: 3px;
}

.favChip .rm {
  border: 0;
  background: none;
  color: var(--pink-deep);
  font-weight: bold;
  font-size: 15px;
  padding: 0 2px;
  cursor: pointer;
}

/* ---- Stage 3: looks match (upload -> paired polaroids -> verdict) ---- */
#stage3 { display: none; }

body.s3 #stage3 {
  display: flex;
  flex-direction: column;
  position: absolute;
  inset: 0 21% 2% 3%;
  z-index: 3;
}

#stage3.hasResult > .shelfHead { display: none; }

body.s3 .card { display: none; }

/* Anna shrinks into the corner exactly like stage 2 */
body.s3 .avatar {
  transform: translateX(-50%) translateX(37vw) scale(.5);
  z-index: 4;
  pointer-events: none;
}

/* Upload zone: big candy drop target + CAPTURE */
.lmUpload {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 22px;
  padding-bottom: clamp(80px, 14vh, 130px);
}

.lmMedia {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

/* Wii-channel-style tile: chrome bezel, glossy plastic panel, top sheen */
.lmDrop {
  position: relative;
  overflow: hidden;
  width: min(64vh, 480px);
  aspect-ratio: 4 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #eef3f9 50%, #d9e2ee 100%);
  border: 6px solid #e9ebf2;
  border-radius: 26px;
  color: var(--pink-heading);
  box-shadow:
    0 0 0 2px #828692,
    0 9px 0 rgba(70, 80, 100, .3),
    0 14px 22px rgba(0, 0, 0, .25),
    inset 0 -12px 18px rgba(130, 145, 170, .3);
  background-size: cover;
  background-position: center;
  transition: transform .15s ease-out;
  font-family: var(--font-round);
}

/* glass sheen across the top, like a Wii menu channel */
.lmDrop::before {
  content: '';
  position: absolute;
  left: 3%;
  right: 3%;
  top: 2%;
  height: 40%;
  border-radius: 20px 20px 48% 48%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0));
  pointer-events: none;
}

/* take-a-photo / upload-one choice buttons inside the frame */
.lmBtns {
  display: flex;
  gap: 12px;
  width: calc(100% - 32px);
  margin: 4px 16px 2px;
}

.lmBtns button {
  flex: 1 1 0;
  min-width: 0;
  padding: 13px 20px;
  border: 0;
  border-radius: 13px;
  font-weight: bold;
  font-size: 16px;
  letter-spacing: 1px;
  cursor: pointer;
  font-family: var(--font-round);
}

#lmTake {
  background: var(--next-gradient);
  color: #fff;
  box-shadow: 0 5px 0 var(--pink-dark);
}

#lmPick {
  background: #fff;
  color: var(--pink-heading);
  border: 3px solid var(--pink-border);
  box-shadow: 0 5px 0 var(--pink-border);
}

.lmBtns button:hover { transform: scale(1.04); }

.lmBtns button:active { transform: translateY(4px); box-shadow: none; }

.lmDrop b {
  box-sizing: border-box;
  width: 100%;
  padding-inline: 32px;
  font-size: 21px;
  letter-spacing: 2px;
  text-align: center;
  text-transform: uppercase;
}

.lmDrop span { font-size: 13px; color: #8a6a7c; }

/* CSS-drawn candy point-and-shoot: pink body, chrome lens, flash */
.lmCam {
  position: relative;
  flex: 0 0 84px;
  width: 122px;
  min-width: 122px;
  max-width: 122px;
  height: 84px;
  min-height: 84px;
  max-height: 84px;
  margin-top: 10px;
  margin-bottom: 8px;
  border-radius: 16px;
  font-style: normal;
  background: linear-gradient(180deg, #fdd7e9 0%, #f591c1 45%, #e0509d 100%);
  border: 3px solid #fff;
  box-shadow:
    0 0 0 2px #cf3d8d,
    0 6px 0 rgba(120, 20, 80, .3),
    inset 0 3px 4px rgba(255, 255, 255, .85),
    inset 0 -7px 10px rgba(160, 30, 100, .35);
}

.lmCam u { position: absolute; display: block; text-decoration: none; }

/* the raised viewfinder hump */
.camTop {
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 46px;
  height: 14px;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, #fdd7e9, #ef7ab8);
  border: 3px solid #fff;
  border-bottom: 0;
  box-shadow: 0 0 0 2px #cf3d8d, inset 0 2px 2px rgba(255, 255, 255, .8);
}

.camLens {
  inset: 0;
  margin: auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #8fa2c6 6%, #3c4560 32%, #12141d 72%);
  border: 5px solid #e9ebf2;
  box-shadow:
    0 0 0 2px #828692,
    0 3px 6px rgba(0, 0, 0, .35),
    inset 0 2px 4px rgba(255, 255, 255, .5);
}

.camLens::after {
  content: '';
  position: absolute;
  left: 8px;
  top: 6px;
  width: 15px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .85);
  transform: rotate(-25deg);
}

.camFlash {
  right: 10px;
  top: 8px;
  width: 17px;
  height: 10px;
  border-radius: 4px;
  background: linear-gradient(180deg, #fff, #ffe9a8 60%, #f6c544);
  box-shadow: 0 0 7px rgba(255, 235, 150, .95), inset 0 1px 1px rgba(255, 255, 255, .9);
}

/* Once a photo is picked, the channel tile becomes the same white polaroid
   used by the comparison result. The uploaded image is inherited by the
   photo-area pseudo-element so the bottom caption stays clean. */
.lmDrop.hasPhoto {
  aspect-ratio: 5 / 6;
  background: #fff;
  opacity: 1;
  border: 0;
  border-radius: 6px;
  box-shadow: 0 16px 32px rgba(0, 0, 0, .45);
}

.lmDrop.hasPhoto::before {
  left: 10px;
  right: 10px;
  top: 10px;
  bottom: 96px;
  height: auto;
  border-radius: 2px;
  background-color: var(--sky);
  background-image: var(--lm-photo);
  background-position: center;
  background-size: cover;
}

.lmDrop.hasPhoto::after {
  content: 'YOU';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 48px;
  color: var(--ink);
  font-size: 17px;
  font-weight: bold;
  letter-spacing: 2px;
  text-align: center;
}

.lmDrop.hasPhoto i,
.lmDrop.hasPhoto span,
.lmDrop.hasPhoto .lmBtns { display: none; }

.lmDrop.hasPhoto b {
  background: rgba(255, 228, 240, .92);
  border-radius: 10px;
  padding: 8px 14px;
}

#lmPrompt.ready {
  flex: 0 0 auto;
  padding: 8px 14px;
  color: var(--pink-heading);
  font-size: 21px;
  font-weight: bold;
  letter-spacing: 2px;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
}

.lmCapture { width: min(64vh, 480px); margin: 0; }

.lmCapture[hidden] { display: none; }

.lmCapture:disabled { opacity: .45; cursor: not-allowed; }

/* Paired polaroids, tilted toward each other */
.lmStage { flex: 1; display: none; flex-direction: column; }

.lmStage.show { display: flex; }

.lmPair {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.pol {
  width: min(38vh, 320px);
  margin: 0;
  padding: 12px 12px 46px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 16px 32px rgba(0, 0, 0, .45);
  animation: polDrop .5s cubic-bezier(.4, 1.5, .5, 1) backwards;
}

.pol img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  background: var(--sky);
}

.pol figcaption {
  text-align: center;
  margin-top: 12px;
  font-weight: bold;
  font-size: 17px;
  letter-spacing: 2px;
  color: var(--ink);
  text-transform: uppercase;
}

.pol.you { transform: rotate(-6deg) translateY(8px); }

.pol.annaPol { transform: rotate(5deg); animation-delay: .12s; }

@keyframes polDrop {
  from { opacity: 0; transform: translateY(-60px) rotate(0deg) scale(1.15); }
}

.lmHeart {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 64px;
  height: 64px;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .3));
}

.lmHeartWhole,
.lmHeartHalf {
  position: absolute;
  inset: 0;
  display: block;
  transform-origin: center;
}

.lmHeart.pumping .lmHeartWhole {
  animation: heartPumpOnce .8s ease-in-out infinite;
}

.lmHeart.breaking .lmHeartWhole {
  animation:
    heartPumpOnce .5s ease-in-out 4,
    heartSwap .01s linear 2s forwards;
}

.lmHeartHalf {
  visibility: hidden;
}

.lmHeartLeft {
  clip-path: polygon(0 0, 53% 0, 42% 24%, 57% 48%, 43% 68%, 53% 100%, 0 100%);
  animation: heartLeftDrop .8s cubic-bezier(.2, .8, .35, 1) 2s forwards;
}

.lmHeartRight {
  clip-path: polygon(53% 0, 100% 0, 100% 100%, 53% 100%, 43% 68%, 57% 48%, 42% 24%);
  animation: heartRightDrop .8s cubic-bezier(.2, .8, .35, 1) 2s forwards;
}

@keyframes heartPumpOnce {
  0%, 100% { transform: scale(1); }
  42% { transform: scale(1.24); }
  70% { transform: scale(.96); }
}

@keyframes heartSwap {
  to {
    visibility: hidden;
    opacity: 0;
  }
}

@keyframes heartLeftDrop {
  0% {
    visibility: visible;
    transform: translate(0, 0) rotate(0deg);
  }
  55% { transform: translate(-8px, 19px) rotate(-11deg); }
  100% {
    visibility: visible;
    transform: translate(-13px, 34px) rotate(-19deg);
  }
}

@keyframes heartRightDrop {
  0% {
    visibility: visible;
    transform: translate(0, 0) rotate(0deg);
  }
  55% { transform: translate(8px, 22px) rotate(11deg); }
  100% {
    visibility: visible;
    transform: translate(13px, 38px) rotate(19deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lmHeart.pumping .lmHeartWhole { animation: none; }

  .lmHeart.breaking .lmHeartWhole { visibility: hidden; animation: none; }

  .lmHeartLeft {
    visibility: visible;
    animation: none;
    transform: translate(-13px, 34px) rotate(-19deg);
  }

  .lmHeartRight {
    visibility: visible;
    animation: none;
    transform: translate(13px, 38px) rotate(19deg);
  }
}

/* Loading bar: candy stripes crawling while the "analysis" runs */
.lmLoad {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 8% 10px;
}

.lmBarWrap {
  width: 100%;
  height: 26px;
  border-radius: 13px;
  background: linear-gradient(#ffffff, #d9dbe2 45%, #9fa3af);
  border: 2px solid #828692;
  box-shadow: 0 2px 3px rgba(0, 0, 0, .25);
  overflow: hidden;
}

.lmBar {
  width: 0;
  height: 100%;
  border-radius: 13px;
  background: repeating-linear-gradient(-45deg, var(--pink) 0 14px, var(--pink-hot) 14px 28px);
  background-size: 200% 100%;
  animation: barCrawl .6s linear infinite;
  transition: width .3s ease-out;
}

@keyframes barCrawl { to { background-position: -40px 0; } }

.lmMsg {
  color: #fff;
  font-weight: bold;
  font-size: 15px;
  letter-spacing: 1px;
}

/* Verdict stamp: dark glass pill so it reads over any photo */
.lmVerdict {
  display: none;
  text-align: center;
  font-size: 44px;
  font-weight: bold;
  letter-spacing: 3px;
  animation: stampIn .35s cubic-bezier(.3, 1.6, .5, 1) backwards;
}

.lmVerdict.show {
  display: inline-block;
  align-self: center;
  margin-bottom: 8px;
  padding: 12px 30px 16px;
  background: rgba(50, 6, 32, .78);
  border: 3px solid rgba(255, 255, 255, .3);
  border-radius: 18px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.lmVerdictScore,
.lmVerdictStatus {
  display: block;
}

.lmVerdictScore {
  font-size: 28px;
  line-height: 1;
}

.lmVerdictStatus {
  margin-top: 8px;
  line-height: 1.2;
}

.lmVerdict.yes {
  color: #fff;
  box-shadow: 0 0 26px rgba(140, 255, 170, .4);
}

.lmVerdict.no {
  color: #fff;
  box-shadow: 0 0 26px rgba(255, 80, 120, .4);
}

.lmVerdict small {
  display: block;
  font-size: 15px;
  letter-spacing: 1px;
  margin-top: 8px;
  color: #fff;
}

@keyframes stampIn {
  from { opacity: 0; transform: scale(2.4) rotate(-6deg); }
}

.lmFoot {
  visibility: hidden;
  justify-content: center;
}

.lmFoot .next {
  width: min(64vh, 480px);
  padding: 14px;
}

.lmFoot.show { visibility: visible; }

/* ---- 🎲 randomize: small ghost button tucked under NEXT ---- */
/* plain text link, not a button */
.rndBtn {
  display: block;
  margin: 10px auto 0;
  padding: 0;
  background: none;
  border: 0;
  color: var(--pink-heading);
  font-size: 13px;
  font-weight: normal;
  text-decoration: underline;
  cursor: pointer;
  font-family: var(--font-round);
}

.rndBtn:hover { color: var(--pink); }

/* ---- Photobooth: live selfie feed inside the stage-3 frame ---- */
.booth {
  position: relative;
  width: min(64vh, 480px);
}

.booth .lmDrop { width: 100%; }

#boothVid { display: none; }

.booth.live #boothVid {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transform: scaleX(-1); /* mirror, like a real photobooth screen */
  background: #000;
  border: 4px solid var(--pink);
  border-radius: 22px;
  box-shadow: 7px 9px 0 rgba(120, 20, 80, .35);
}

.booth.live .lmDrop { display: none; }

.boothCount {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 130px;
  font-weight: bold;
  color: #fff;
  pointer-events: none;
}

.boothCount.show {
  display: flex;
  animation: countPulse .8s ease-in-out infinite;
}

@keyframes countPulse {
  0%   { transform: scale(1.5); opacity: .3; }
  35%  { transform: scale(1); opacity: 1; }
  100% { transform: scale(.96); opacity: .95; }
}

.boothFlash {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: 22px;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}

.boothFlash.go { animation: flashPop .5s ease-out; }

@keyframes flashPop {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ---- Stage 4: the height check ---- */
#stage4 { display: none; }

body.s4 #stage4 {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  z-index: 3;
}

body.s4 .card { display: none; }
body.s4 .avatar { display: none; }

#stage4 #hcLine {
  color: #fff;
  font-weight: bold;
  letter-spacing: 1px;
}

/* the floor the standees stand on */
.hcFloor {
  flex: 1;
  position: relative;
  margin: 0 6%;
}

.hcPair {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2vw;
}

/* department-store cardboard standee: photo head + flat silhouette + easel base */
.hcStd {
  position: relative;
  transition: height .08s linear;
}

.hcStd u { position: absolute; display: block; text-decoration: none; }

/* head = circle cropped from the photo; sits on top of the silhouette */
.hcHead {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 42%;
  height: 15.5%;
  border-radius: 50%;
  background-color: #e8d4b8;
  background-size: cover;
  background-position: 50% 20%;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px rgba(120, 90, 60, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  overflow: hidden;
}

/* flat body silhouette, cut like blank white cardboard */
.hcBody {
  top: 13.5%;
  bottom: 2.5%;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, #ffffff 0%, #f0f2f6 55%, #d9dee6 100%);
  box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0); /* keep paint order stable */
  clip-path: polygon(
    38% 0%, 62% 0%,
    66% 3%, 82% 8%, 86% 16%, 84% 40%, 79% 45%, 73% 43%, 74% 55%,
    72% 96%, 65% 100%, 56% 98%, 51% 62%, 49% 62%, 44% 98%, 35% 100%, 28% 96%,
    26% 55%, 27% 43%, 21% 45%, 16% 40%, 14% 16%, 18% 8%, 34% 3%
  );
}

/* Anna's standee is print-quality: pink dress cardboard */
.hcStd.anna .hcBody {
  background: linear-gradient(180deg, #fbc0dc 0%, #ef7ab8 55%, #d63a90 100%);
}

.hcStd.anna .hcHead {
  background-color: var(--pink-soft);
  box-shadow: 0 0 0 2px var(--pink-deep);
}

/* easel base */
.hcBase {
  display: none !important;
}

/* dashed line marking Anna's height for the comparison */
.hcAnnaLine {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 3px dashed rgba(241, 78, 152, .8);
  pointer-events: none;
}

.hcAnnaLine em {
  position: absolute;
  right: 0;
  top: -26px;
  font-size: 14px;
  font-weight: bold;
  font-style: normal;
  letter-spacing: 1px;
  color: var(--pink-heading);
}

/* YOUR dashed measuring line — mirrors Anna's, label on the left */
.hcYouLine {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 3px dashed rgba(255, 255, 255, .95);
  pointer-events: none;
}

.hcYouLine em {
  position: absolute;
  left: 0;
  top: -26px;
  font-size: 14px;
  font-weight: bold;
  font-style: normal;
  letter-spacing: 1px;
  color: var(--pink-heading);
}

/* the measuring tool: chrome ruler track with tick marks + candy notch thumb */
.hcTool {
  padding: 12px 8% 8px;
}

#hcSlider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 36px;
  border-radius: 12px;
  border: 2px solid #828692;
  background:
    repeating-linear-gradient(90deg,
      transparent 0 11px, rgba(90, 96, 110, .55) 11px 12px) left bottom / 100% 14px no-repeat,
    linear-gradient(#ffffff, #d9dbe2 45%, #9fa3af);
  box-shadow: 0 3px 5px rgba(0, 0, 0, .3), inset 0 2px 3px rgba(255, 255, 255, .8);
  cursor: ew-resize;
}

#hcSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 30px;
  height: 52px;
  border-radius: 10px;
  border: 3px solid #fff;
  background:
    linear-gradient(90deg, transparent 0 12px, #fff 12px 14px, transparent 14px) no-repeat,
    linear-gradient(180deg, #fbc0dc 0%, #ef7ab8 30%, var(--pink-hot) 55%, var(--pink-deep) 100%);
  box-shadow: 0 0 0 2px var(--pink-deep), 0 4px 8px rgba(0, 0, 0, .4), inset 0 2px 3px rgba(255, 255, 255, .7);
  cursor: grab;
}

#hcSlider::-webkit-slider-thumb:active { cursor: grabbing; }

#hcSlider::-moz-range-thumb {
  width: 30px;
  height: 52px;
  border-radius: 10px;
  border: 3px solid #fff;
  background: linear-gradient(180deg, #fbc0dc 0%, #ef7ab8 30%, var(--pink-hot) 55%, var(--pink-deep) 100%);
  box-shadow: 0 0 0 2px var(--pink-deep), 0 4px 8px rgba(0, 0, 0, .4);
  cursor: grab;
}

#stage4 .shelfFoot { padding-bottom: 14px; }

/* Anna's standee head: cropped from her portrait cutout */
.hcStd.anna .hcHead {
  background-image: url("../assets/portrait-cutout.png");
  background-size: 250% auto;
  background-position: 50% 27%;
}

/* .hcStd u's display:block outranks .hcHead's flex — restore centering for the ? fallback */
.hcStd u.hcHead {
  display: flex;
  font-size: 30px;
  font-weight: bold;
  color: #8a6a50;
}

/* Uploaded-photo head: a fixed circle anchored at the shoulders. Its size is
   independent of the selected height, while the square source crop fills it. */
.hcStd u.hcHead.sticker {
  top: 13.5%;
  width: clamp(80px, 9vw, 104px);
  height: clamp(80px, 9vw, 104px);
  border: 3px solid #fff;
  border-radius: 50%;
  background-color: #e8d4b8;
  box-shadow: 0 0 0 2px rgba(120, 90, 60, .55);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 2;
  transform-origin: center;
  animation: headWobble 2.8s ease-in-out infinite;
}

@keyframes headWobble {
  0%, 100% { transform: translate(-50%, -55%) rotate(-3.5deg); }
  50%      { transform: translate(-50%, -55%) rotate(3.5deg); }
}

/* real full-body Anna cutout, when assets/anna-fullbody.png exists */
.hcStd.full img {
  height: 100%;
  width: auto;
  display: block;
}

/* drawn hearts (no emoji) */
.heartIco {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.12em;
}

.lmHeart .heartIco {
  width: 64px;
  height: 64px;
}

/* ---- Production: beta panels are dev-only tools (js adds body.prod off-localhost).
   Buttons stay in the DOM so stage/reveal reactions can still drive them. ---- */
body.prod .betas { display: none !important; }

/* Keep the height-check heading legible over every background frame. */
body.s4 .shelfHead b,
body.s4 .shelfHead span { color: #fff; }
body.s4 .shelfFoot .seen { color: var(--pink-heading); }