/* Lightbox story popup for Gizmo's Town Rescue. Owned by js/lightbox.js */
#lb{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;
  padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
  background:rgba(43,14,30,.62);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  font-family:'Fredoka',system-ui,sans-serif;opacity:0;visibility:hidden;pointer-events:none;contain:layout paint;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;cursor:pointer;user-select:none;-webkit-user-select:none}
/* shown/hidden by js/lightbox.js: the fade and the card's pop are Web Animations (transform + opacity only); these are the resting states */
#lb.on{opacity:1;visibility:visible;pointer-events:auto}
#lb.pend{visibility:visible;pointer-events:auto}
#lb.out{pointer-events:none}
.lb-card{position:relative;width:min(92vw,520px);max-height:100%;display:flex;flex-direction:column;align-items:center;
  padding:clamp(14px,3.2vh,26px) clamp(16px,4vw,30px) clamp(16px,3.2vh,26px);text-align:center;color:#7c173e;
  filter:drop-shadow(0 14px 22px rgba(60,10,30,.42)) drop-shadow(0 2px 3px rgba(60,10,30,.3));
  opacity:0;transform:scale(.85)}
/* spring-like pop: element.animate() in js/lightbox.js, transform + opacity ONLY (compositor-only); will-change is set by JS just before opening and cleared after */
#lb.on .lb-card{opacity:1;transform:none}
#lb.anim .lb-card,#lb.anim .lb-img,#lb.anim .lb-icon{will-change:transform,opacity}
/* deckled paper */
.lb-paper{position:absolute;inset:0;z-index:0;background:
  radial-gradient(ellipse at 20% 10%,rgba(255,255,255,.7),transparent 55%),
  radial-gradient(ellipse at 85% 95%,rgba(232,196,160,.35),transparent 60%),
  repeating-linear-gradient(37deg,rgba(150,110,70,.035) 0 2px,transparent 2px 5px),
  #fff5e4;filter:url(#lb-deckle);border-radius:10px;box-shadow:inset 0 0 40px rgba(214,170,120,.35)}
.lb-card>*:not(.lb-paper),.lb-text>*{position:relative;z-index:1}
.lb-art{position:relative;width:100%;aspect-ratio:900/560;max-height:44vh;min-height:0;display:flex;align-items:center;justify-content:center;margin:-2px 0 4px}
.lb-art.short{aspect-ratio:auto}
.lb-blob{position:absolute;inset:0 4%;z-index:0;border-radius:52% 48% 55% 45%/48% 55% 45% 52%;
  background:radial-gradient(circle at 30% 35%,rgba(255,150,190,.7),transparent 58%),
    radial-gradient(circle at 72% 62%,rgba(255,196,150,.75),transparent 60%),
    radial-gradient(circle at 50% 50%,rgba(255,214,228,.7),transparent 72%);
  filter:blur(3px);opacity:.95}
.lb-blob::after{content:"";position:absolute;width:16%;height:16%;right:2%;top:8%;border-radius:50%;background:rgba(255,120,175,.45);filter:blur(2px)}
.lb-img{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;object-fit:contain;object-position:center;
  mix-blend-mode:multiply;opacity:0}
#lb.on .lb-img{animation:lb-in .55s cubic-bezier(.3,.9,.4,1) .09s both,lb-float 3.6s ease-in-out .9s infinite}
@keyframes lb-in{0%{opacity:0;transform:scale(.85)}55%{opacity:1;transform:scale(1.04)}100%{opacity:1;transform:scale(1)}}
@keyframes lb-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-5px) rotate(.8deg)}}
.lb-head{font-weight:700;font-size:clamp(26px,5.4vh,38px);line-height:1.05;color:#ff5fa2;margin:4px 0 6px;letter-spacing:.2px;text-shadow:0 1px 0 rgba(255,255,255,.8)}
.lb-story{font-weight:600;font-size:clamp(16px,2.9vh,20px);line-height:1.3;margin:0 0 8px;color:#7c173e;text-wrap:balance}
.lb-cta{font-weight:700;font-size:clamp(20px,4.2vh,28px);line-height:1.1;color:#ff5fa2;margin:2px 0 4px;text-wrap:balance;text-shadow:0 1px 0 rgba(255,255,255,.8)}
.lb-num{display:inline-block;font-weight:700;font-size:clamp(20px,4vh,28px);color:#ff5fa2;background:#fff;border-radius:99px;padding:2px 16px;margin-top:4px;
  box-shadow:0 2px 0 rgba(124,23,62,.18),inset 0 0 0 2px rgba(255,95,162,.35);font-variant-numeric:tabular-nums}
.lb-tap{opacity:0;animation:lb-tapin .5s ease .8s forwards,lb-tappulse 1.5s ease-in-out 1.3s infinite;font-weight:700;font-size:16px;line-height:1.2;color:#7c173e;margin-top:10px;letter-spacing:.2px}
.lb-cta,.lb-num{animation:lb-pulse 1.1s ease-in-out 1s infinite}
@keyframes lb-pulse{50%{transform:scale(1.05)}}
/* cute CSS fallback when art is missing */
.lb-art:has(.lb-fb){aspect-ratio:1.3}
.lb-fb{position:relative;z-index:1;width:64%;aspect-ratio:1;animation:lb-float 3.6s ease-in-out infinite}
.lb-fb i{position:absolute;display:block}
.lb-fb .f{inset:12% 8% 0;border-radius:46% 46% 50% 50%;background:#e8c9a5;box-shadow:inset 0 -8px 0 rgba(124,23,62,.1)}
.lb-fb .m{left:28%;right:28%;bottom:8%;height:36%;border-radius:50%;background:#3a2a36}
.lb-fb .e1,.lb-fb .e2{top:38%;width:11%;height:11%;border-radius:50%;background:#3a2a36}
.lb-fb .e1{left:26%}.lb-fb .e2{right:26%}
.lb-fb .n{left:41%;width:18%;height:11%;top:50%;border-radius:50%;background:#1f1620;z-index:2}
.lb-fb .r1,.lb-fb .r2{top:2%;width:26%;height:38%;border-radius:40% 40% 60% 60%;background:#7a5a48}
.lb-fb .r1{left:0;transform:rotate(-18deg)}.lb-fb .r2{right:0;transform:rotate(18deg)}
.lb-fb .t{left:44%;width:12%;height:14%;bottom:2%;border-radius:0 0 99px 99px;background:#ff5fa2;z-index:2}
.lb-x{display:none}
@media (max-height:460px) and (orientation:landscape){
  .lb-card{width:min(94vw,720px);flex-direction:row;text-align:left;gap:18px;align-items:center;padding:12px 26px 12px 16px}
  .lb-art{flex:0 0 50%;width:50%;max-height:calc(100vh - 60px);margin:0}
  .lb-text{flex:1;display:flex;flex-direction:column;align-items:flex-start}
  .lb-head{font-size:clamp(22px,7vh,30px)}.lb-story{font-size:clamp(14px,4.4vh,18px)}.lb-cta{font-size:clamp(18px,6vh,25px)}
  .lb-tap{margin-top:4px}
}
@media (min-height:461px){.lb-text{display:contents}}
@media (prefers-reduced-motion:reduce){
  #lb.on .lb-img,#lb.on .lb-icon{animation:none!important;opacity:1}
  .lb-img,.lb-cta,.lb-num,.lb-fb{animation:none!important}
}

/* fail: cooler paper, blue-grey blob, image slides away */
#lb.fail .lb-paper{background:radial-gradient(ellipse at 20% 10%,rgba(255,255,255,.75),transparent 55%),radial-gradient(ellipse at 85% 95%,rgba(170,190,215,.4),transparent 60%),repeating-linear-gradient(37deg,rgba(90,110,140,.035) 0 2px,transparent 2px 5px),#f1f1ee;box-shadow:inset 0 0 40px rgba(150,170,200,.35)}
#lb.fail .lb-blob{background:radial-gradient(circle at 30% 35%,rgba(150,175,205,.7),transparent 58%),radial-gradient(circle at 72% 62%,rgba(190,200,215,.75),transparent 60%),radial-gradient(circle at 50% 50%,rgba(205,215,228,.7),transparent 72%)}
#lb.fail .lb-blob::after{background:rgba(140,165,200,.4)}
.lb-nudge{font-weight:600;font-size:clamp(15px,2.9vh,19px);line-height:1.3;color:#7c173e;margin:2px 0 4px;text-wrap:balance}
#lb.fail.on .lb-img{animation:lb-slide 3s ease-in .5s both}
@keyframes lb-slide{0%{opacity:0;transform:translateX(0) scale(.96)}12%{opacity:1;transform:none}55%{opacity:1;transform:none}100%{opacity:.25;transform:translateX(38%) scale(.94)}}
@media (prefers-reduced-motion:reduce){#lb.fail.on .lb-img{animation:none!important;opacity:1}}

@keyframes lb-tapin{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes lb-tappulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){.lb-tap{animation:none!important;opacity:1}}

/* Aaron's orders: the item picture is a canvas, same card as everything else */
.lb-icon{position:relative;z-index:1;height:100%;max-height:100%;aspect-ratio:1;max-width:100%;opacity:0}
#lb.on .lb-icon{animation:lb-in .55s cubic-bezier(.3,.9,.4,1) .09s both,lb-float 3.6s ease-in-out .9s infinite}
#lb.order .lb-art{aspect-ratio:900/520}
.lb-order-cta{color:#ff2f8f;font-size:clamp(19px,3.9vh,27px);text-shadow:0 1px 0 #fff,0 0 12px rgba(255,47,143,.22)}
.lb-num2{margin-left:6px;color:#e8127c;background:#ffe9f3}
#lb.fail.order .lb-icon{opacity:.8;filter:saturate(.55)}
#lb.fail.order.on .lb-icon{animation:lb-in .55s cubic-bezier(.3,.9,.4,1) .09s both}
@media (max-height:460px) and (orientation:landscape){.lb-order-cta{font-size:clamp(16px,5.4vh,23px)}.lb-num2{margin-left:0}}
@media (prefers-reduced-motion:reduce){#lb.on .lb-icon,#lb.fail.order.on .lb-icon{animation:none!important;opacity:1}}

/* short phones / any narrow screen: the art box has a fixed, sensible height and the picture is contained inside it */
@media (max-width:700px) and (min-height:461px){
  .lb-art{aspect-ratio:auto;height:min(38vh,260px);max-height:none;margin:0 0 4px}
  #lb.order .lb-art{aspect-ratio:auto;height:min(30vh,210px)}
  .lb-card{max-height:100%}
}
#lb .lb-card,#lb .lb-text{min-height:0}
/* TOUCH devices: no backdrop-filter over the live canvas, no SVG deckle filter, no mix-blend-mode, no drop-shadow filter.
   Plain semi-transparent dim, and a cheap static shadow, so the whole open animation stays on the compositor. */
@media (pointer:coarse){
  #lb{background:rgba(43,14,30,.74);-webkit-backdrop-filter:none;backdrop-filter:none}
  .lb-card{filter:none}
  .lb-card::before{content:"";position:absolute;inset:6px 4px 0;border-radius:12px;z-index:0;box-shadow:0 12px 26px rgba(60,10,30,.42),0 2px 4px rgba(60,10,30,.3)}
  .lb-paper{filter:none;border-radius:14px 10px 15px 11px/11px 15px 10px 14px;box-shadow:inset 0 0 0 1.5px rgba(214,170,120,.55),inset 0 0 30px rgba(214,170,120,.35)}
  .lb-img{mix-blend-mode:normal}
  #lb.fail.on .lb-img{animation:lb-in .55s cubic-bezier(.3,.9,.4,1) .09s both}   /* no 3 s slide-away on phones */
  .lb-blob{filter:none}
  .lb-blob::after{filter:none}
}
/* the card stays in the DOM while hidden: nothing inside it may keep animating (infinite pulses would tick every frame) */
#lb:not(.on) *{animation:none!important}

/* Multiple portraits use their occupied row height, keeping the story card compact. */
#lb .lb-art.compact-group{aspect-ratio:var(--lb-group-aspect);height:auto;max-height:38vh}
@media (max-height:460px) and (orientation:landscape){#lb .lb-art.compact-group{max-height:calc(100vh - 60px)}}

.lb-order-list { margin: 8px auto; padding-left: 22px; max-width: 360px; text-align: left; font-size: clamp(12px, 2.3vh, 17px); line-height: 1.4; }
.lb-order-list span { color: #7c536c; }

/* Order item lists are static, cached pictures with readable per-item labels. */
#lb.order .lb-art.order-grid-art{height:auto;max-height:none;aspect-ratio:auto;margin:0 0 12px}
.lb-order-panel{width:100%;position:relative;z-index:1}
.lb-order-host{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 12px}
.lb-aaron-avatar{display:block;flex:none;width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:50% 0;background:#ffe6ed;border:2px solid #ff9cc7}
.lb-order-kicker{font-size:18px;font-weight:600;color:#7c536c;margin:0}
.lb-order-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 10px;list-style:none;padding:0;margin:0;width:100%;align-items:start}
.lb-order-grid[data-count="1"]{grid-template-columns:minmax(0,1fr)}
.lb-order-grid[data-count="2"],.lb-order-grid[data-count="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.lb-order-item{min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center}
#lb.order .lb-order-item .lb-icon{width:76px;height:76px;max-width:100%;opacity:1;animation:none!important}
#lb.order .lb-order-grid[data-count="1"] .lb-icon{width:108px;height:108px}
#lb.order .lb-order-grid[data-count="2"] .lb-icon{width:98px;height:98px}
.lb-order-name{font-size:20px;line-height:1.04;font-weight:700;color:#ff2f8f;text-shadow:0 1px 0 #fff;overflow-wrap:break-word}
.lb-order-grid[data-count="1"] .lb-order-name{font-size:29px}
.lb-order-grid[data-count="2"] .lb-order-name{font-size:25px}
.lb-order-location{font-size:13px;line-height:1.2;font-weight:500;color:#7c536c;text-wrap:balance}
.lb-order-support{font-size:16px;font-weight:500;line-height:1.25;color:#7c173e;text-wrap:balance;margin:0 0 8px;max-width:340px}
#lb.order .lb-num,#lb.order .lb-tap{animation:none}
#lb.order .lb-tap{opacity:1;font-size:14px;margin-top:8px}
@media(max-width:350px) and (min-height:461px){
 .lb-order-grid{gap:14px 7px}
 #lb.order .lb-order-item .lb-icon{width:62px;height:62px}
 .lb-order-name{font-size:18px}
 .lb-order-location{font-size:12px}
 .lb-order-kicker{font-size:16px}
 .lb-order-support{font-size:15px}
}
@media(max-height:460px) and (orientation:landscape){
 #lb.order .lb-card{width:min(96vw,780px);gap:20px;padding:16px 24px}
 #lb.order .lb-art.order-grid-art{flex:0 0 66%;width:66%;margin:0}
 #lb.order .lb-text{flex:1;align-items:center;text-align:center;min-width:0}
 .lb-order-host{gap:8px;margin-bottom:8px}
 .lb-aaron-avatar{width:44px;height:44px}
 .lb-order-kicker{font-size:16px}
 .lb-order-grid{gap:10px 10px}
 #lb.order .lb-order-item .lb-icon{width:62px;height:62px}
 #lb.order .lb-order-grid[data-count="1"] .lb-icon{width:100px;height:100px}
 #lb.order .lb-order-grid[data-count="2"] .lb-icon{width:88px;height:88px}
 .lb-order-name{font-size:18px}
 .lb-order-location{font-size:12px}
 .lb-order-support{font-size:15px;margin-bottom:10px}
 #lb.order .lb-num{font-size:20px;padding:4px 10px}
 #lb.order .lb-head{font-size:22px}
 #lb.order .lb-story{font-size:15px}
}

/* ---- Real rescue pugs: Polaroid photos (js/lightbox.js polaroids()) ----
   The art box is a size container, so each Polaroid is sized from its height and the group fans out to fit any card width. */
#lb .lb-art.pola-art{container-type:size;aspect-ratio:900/600}
#lb .lb-art.pola-art .lb-blob{inset:6% 2%;opacity:.8}
.lb-polas{position:absolute;inset:0;z-index:1}
/* width capped so each tucked-under Polaroid keeps over half its width (and its name) in view */
.lb-pola{--w:min(calc(var(--k) * 100cqh * .82),calc(97cqw / (.45 + var(--n) * .55)));--h:calc(var(--w) / .82);--step:min(calc(var(--w) * .78),calc((97cqw - var(--w)) / var(--nm1)));
  position:absolute;margin:0;width:var(--w);height:var(--h);box-sizing:border-box;
  left:calc(50cqw - var(--w) / 2 + var(--o) * var(--step));top:calc((100cqh - var(--h)) / 2 + max(var(--o), calc(var(--o) * -1)) * 2.4cqh);
  padding:calc(var(--w) * .065) calc(var(--w) * .065) 0;background:#fffdf8;border-radius:3px;
  box-shadow:0 10px 18px -4px rgba(60,10,30,.34),0 2px 3px rgba(60,10,30,.22),inset 0 0 0 1px rgba(124,23,62,.06);
  transform:rotate(var(--r));display:flex;flex-direction:column}
/* washi tape */
.lb-pola::before{content:"";position:absolute;z-index:3;left:50%;top:calc(var(--w) * -.05);width:34%;height:calc(var(--w) * .11);
  transform:translateX(-50%) rotate(calc(var(--r) * -1.6));background:rgba(255,150,196,.72);
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.28) 0 4px,transparent 4px 9px);
  -webkit-mask:linear-gradient(90deg,transparent,#000 3px calc(100% - 3px),transparent);mask:linear-gradient(90deg,transparent,#000 3px calc(100% - 3px),transparent)}
.lb-pola .ph{position:relative;width:100%;aspect-ratio:1;overflow:hidden;background:linear-gradient(135deg,#f6dccd,#f3c6d8);border-radius:1px}
.lb-pola .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* warm golden-hour glow from the top-left, a blush of CuppaPug pink at the bottom, and a soft vignette */
.lb-pola .ph::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(150deg,rgba(255,214,150,.34) 0%,rgba(255,214,150,0) 40%),
    linear-gradient(0deg,rgba(212,19,111,.24) 0%,rgba(212,19,111,0) 38%),
    radial-gradient(125% 100% at 50% 42%,transparent 60%,rgba(70,15,40,.3) 100%);
  box-shadow:inset 0 0 0 1px rgba(60,10,30,.08)}
.lb-pola figcaption{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;gap:.22em;padding:0 4px .1em;
  font:400 calc(var(--w) * .118)/1 Pacifico,'Fredoka',cursive;color:#7c173e;white-space:nowrap;overflow:hidden}
.lb-pola figcaption .nm{overflow:hidden;text-overflow:ellipsis;padding:.12em .04em .18em}
/* tucked-under cards: the name hugs the edge that shows (left of the centre card, or right with the icon on the hidden side) */
.lb-pola:first-child:not(:only-child) figcaption,.lb-pola:nth-child(2):nth-last-child(3) figcaption{justify-content:flex-start;padding-left:.2em}
.lb-pola:last-child:nth-child(n+3) figcaption{flex-direction:row-reverse;justify-content:flex-start;padding-right:.2em}
.lb-sex{flex:0 0 auto;width:.82em;height:.82em;display:inline-block;vertical-align:-.08em}
.lb-sex.f{color:#ff4f9a}.lb-sex.m{color:#2f9fc6}
.lb-stamp{position:absolute;z-index:4;right:calc(var(--w) * -.07);top:calc(var(--w) * -.07);width:calc(var(--w) * .27);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ff8cc0,#ff3f8f 70%);box-shadow:0 3px 0 #b8105a,0 6px 12px rgba(184,16,90,.35);display:grid;place-items:center;transform:rotate(12deg)}
.lb-stamp svg{width:58%;height:58%}
#lb.on .lb-pola{animation:lb-pola-in .62s cubic-bezier(.3,1.3,.5,1) calc(.06s + var(--i0) * .09s) both}
#lb.on .lb-stamp{animation:lb-stamp-in .5s cubic-bezier(.3,1.6,.5,1) calc(.5s + var(--i0) * .09s) both}
@keyframes lb-pola-in{0%{opacity:0;transform:translateY(22px) rotate(calc(var(--r) * 3)) scale(.82)}60%{opacity:1}100%{opacity:1;transform:rotate(var(--r))}}
@keyframes lb-stamp-in{0%{opacity:0;transform:scale(2.2) rotate(-20deg)}100%{opacity:1;transform:scale(1) rotate(var(--sr,12deg))}}
/* Polaroids left of centre are overlapped on their right, so their heart sits on the top-left corner instead */
.lb-pola.lt .lb-stamp{right:auto;left:calc(var(--w) * -.07);--sr:-12deg;transform:rotate(-12deg)}
.lb-meta{display:flex;align-items:center;justify-content:center;gap:6px;font-weight:600;font-size:clamp(13px,2.3vh,16px);color:#9a4a6a;margin:-4px 0 6px}
.lb-meta .lb-sex{width:1.05em;height:1.05em}
.lb-joined{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-weight:700;font-size:clamp(13px,2.3vh,16px);color:#7c173e;
  background:#fff;border-radius:99px;padding:3px 12px 3px 8px;box-shadow:inset 0 0 0 2px rgba(124,23,62,.14)}
.lb-joined svg{width:18px;height:18px;fill:#ff5fa2}
#lb.real .lb-story{margin-bottom:4px}
@media (max-width:700px) and (min-height:461px){#lb .lb-art.pola-art{aspect-ratio:auto;height:min(36vh,250px)}}
@media (max-height:460px) and (orientation:landscape){#lb .lb-art.pola-art{aspect-ratio:auto;height:calc(100vh - 70px)}.lb-meta{justify-content:flex-start}}
@media (pointer:coarse){.lb-pola{box-shadow:0 8px 14px -4px rgba(60,10,30,.36),0 1px 2px rgba(60,10,30,.24)}}
@media (prefers-reduced-motion:reduce){#lb.on .lb-pola,#lb.on .lb-stamp{animation:none!important}}

/* ---- Tappable Polaroids: each real pug opens a details card (js/lightbox.js openDetail) ---- */
.lb-pola.tap{cursor:pointer;outline:none;transition:translate .22s cubic-bezier(.3,1.4,.5,1),scale .22s cubic-bezier(.3,1.4,.5,1)}
.lb-pola.tap:focus-visible{outline:3px solid #ffb800;outline-offset:3px}
.lb-pola.tap:active{scale:.97}
@media (hover:hover) and (pointer:fine){.lb-pola.tap:hover{translate:0 -5px;scale:1.04}}
.lb-pola.lifted{visibility:hidden}
/* a small magnifier on the photo corner: the photo opens */
.lb-zoom{position:absolute;z-index:2;right:5%;bottom:5%;width:max(20px,calc(var(--w) * .17));aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,253,248,.92);color:#7c173e;box-shadow:0 2px 5px rgba(60,10,30,.3)}
.lb-zoom svg{width:66%;height:66%}
#lb.on .lb-pola.wig{animation:lb-pola-in .62s cubic-bezier(.3,1.3,.5,1) calc(.06s + var(--i0) * .09s) both,lb-wig .9s ease-in-out 1.25s 1}
@keyframes lb-wig{0%,100%{rotate:0deg;translate:0 0}18%{rotate:-4deg;translate:0 -4px}42%{rotate:3.5deg;translate:0 -4px}66%{rotate:-1.6deg;translate:0 -1px}84%{rotate:.6deg}}
.lb-hint{display:inline-flex;align-items:center;justify-content:center;gap:5px;font-weight:600;font-size:clamp(12.5px,2.1vh,14px);line-height:1.2;color:#9a4a6a;margin:-2px 0 6px}
.lb-hint-ic{display:inline-grid;place-items:center;width:18px;height:18px;flex:0 0 auto;color:#ff5fa2}
.lb-hint-ic svg{width:100%;height:100%}
#lb.dt-on .lb-card *{animation-play-state:paused!important}

/* the details card sits over the story card, inside #lb */
.lb-dt{position:absolute;inset:0;z-index:20;display:none;align-items:center;justify-content:center;cursor:default;
  padding:max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}
.lb-dt.on{display:flex}
.lb-dt:focus{outline:none}
.lb-dt-scrim{position:absolute;inset:0;background:rgba(43,14,30,.55)}
.lb-dt-card{--pw:min(100%,max(150px,calc(100vh - 390px)),340px);position:relative;width:min(100%,380px);max-height:100%;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;
  padding:16px 16px 14px;color:#7c173e;text-align:center}
.lb-dt-paper{position:absolute;inset:0;z-index:0;background:#fffdf8;border-radius:6px;
  box-shadow:0 22px 40px -12px rgba(20,4,12,.62),0 3px 6px rgba(20,4,12,.3),inset 0 0 0 1px rgba(124,23,62,.06)}
.lb-dt-ph,.lb-dt-body{position:relative;z-index:1}
.lb-dt-ph{flex:0 0 auto;width:var(--pw);aspect-ratio:1;overflow:hidden;border-radius:2px;background:linear-gradient(135deg,#f6dccd,#f3c6d8);transform-origin:50% 50%}
.lb-dt-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.lb-dt-ph::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(150deg,rgba(255,214,150,.3) 0%,rgba(255,214,150,0) 40%),linear-gradient(0deg,rgba(212,19,111,.18) 0%,rgba(212,19,111,0) 34%),
    radial-gradient(125% 100% at 50% 42%,transparent 62%,rgba(70,15,40,.24) 100%);box-shadow:inset 0 0 0 1px rgba(60,10,30,.08)}
.lb-dt-body{width:100%;min-height:0;display:flex;flex-direction:column;align-items:center}
.lb-dt-cap{display:flex;align-items:center;justify-content:center;gap:.22em;max-width:100%;margin:8px 0 6px;font:400 clamp(24px,4.4vh,32px)/1.25 Pacifico,'Fredoka',cursive;color:#7c173e;white-space:nowrap}
.lb-dt-cap .nm{overflow:hidden;text-overflow:ellipsis;padding:0 .04em .08em}
.lb-dt-cap .sx{display:inline-flex}.lb-dt-cap .lb-sex{width:.72em;height:.72em}
.lb-dt-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;margin:0 0 8px}
.lb-dt-chips span{font-size:13px;font-weight:600;line-height:1;padding:5px 10px;border-radius:99px;background:#ffeef5;color:#8b1646}
.lb-dt-chips .st{background:#e4f7ec;color:#17784a}
.lb-dt-chips .st.integrating{background:#fff2d6;color:#9a5b00}
.lb-dt-chips .st.just-arrived{background:#e3f0ff;color:#2559a8}
.lb-dt-about{margin:0 2px 12px;font-size:14px;font-weight:500;line-height:1.38;color:#5b2239;text-wrap:pretty;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;user-select:text;-webkit-user-select:text}
.lb-dt-acts{width:100%;display:flex;flex-direction:column;gap:8px}
.lb-dt-book{display:flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;color:#fff;border-radius:16px;padding:7px 16px;min-height:52px;box-sizing:border-box;
  background:linear-gradient(90deg,#e8458b,#9e1849);border:3px solid #7c173e;box-shadow:0 4px 0 #7c173e,0 8px 18px rgba(232,69,139,.3);transition:transform .15s ease}
.lb-dt-book svg{width:24px;height:24px;flex:0 0 auto}
.lb-dt-book-txt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;min-width:0;text-align:left}
.lb-dt-book b{font-size:18px;font-weight:700;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-dt-book small{font-size:12.5px;font-weight:500;opacity:.9}
.lb-dt-book:active{transform:translateY(3px);box-shadow:0 1px 0 #7c173e}
.lb-dt-row{display:flex;gap:8px}
.lb-dt-sec{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;box-sizing:border-box;border-radius:14px;border:3px solid #7c173e;background:#fff3df;color:#7c173e;
  font:600 15px/1 'Fredoka',sans-serif;text-decoration:none;cursor:pointer;box-shadow:0 3px 0 #ff5fa2;padding:0 10px;white-space:nowrap}
.lb-dt-sec span{overflow:hidden;text-overflow:ellipsis}
.lb-dt-sec svg{width:19px;height:19px;flex:0 0 auto;color:#ff5fa2}
.lb-dt-sec.hidden{display:none}
.lb-dt-sec:active{transform:translateY(2px);box-shadow:0 1px 0 #ff5fa2}
.lb-dt-x{position:absolute;z-index:3;top:-10px;right:-10px;width:44px;height:44px;border-radius:50%;border:3px solid #7c173e;background:#fff3df;color:#7c173e;
  display:grid;place-items:center;padding:0;cursor:pointer;box-shadow:0 3px 0 #ff5fa2,0 6px 14px rgba(20,4,12,.3)}
.lb-dt-x svg{width:20px;height:20px}
.lb-dt-x:active{transform:translateY(2px);box-shadow:0 1px 0 #ff5fa2}
.lb-dt-book:focus-visible,.lb-dt-sec:focus-visible,.lb-dt-x:focus-visible{outline:3px solid #ffb800;outline-offset:2px}
@media (hover:hover) and (pointer:fine){.lb-dt-book:hover{transform:translateY(-2px)}.lb-dt-sec:hover,.lb-dt-x:hover{background:#fff}}
@media (max-height:600px) and (min-height:461px){.lb-dt-about{-webkit-line-clamp:2}}
/* short landscape phones: photo on the left, words and buttons on the right */
@media (max-height:460px) and (orientation:landscape){
  .lb-dt-card{--pw:min(calc(100vh - 56px),340px);width:min(100%,700px);flex-direction:row;align-items:center;gap:16px;padding:12px 16px 12px 12px;text-align:left}
  .lb-dt-body{flex:1;align-items:flex-start}
  .lb-dt-cap{margin:0 0 4px;justify-content:flex-start}
  .lb-dt-chips{justify-content:flex-start;margin-bottom:6px}
  .lb-dt-about{margin:0 0 10px;-webkit-line-clamp:3}
}
@media (pointer:coarse){.lb-dt-paper{box-shadow:0 16px 28px -10px rgba(20,4,12,.6),0 2px 4px rgba(20,4,12,.3)}}
@media (prefers-reduced-motion:reduce){
  #lb.on .lb-pola.wig{animation:none!important}
  .lb-pola.tap,.lb-dt-book{transition:none}
}

/* Town stroll "meet" card: two real buttons instead of "tap to continue" */
.lb-meet-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;width:100%;margin:6px 0 2px}
.lb-btn{min-height:48px;box-sizing:border-box;border-radius:16px;padding:0 20px;font:700 18px/1 'Fredoka',system-ui,sans-serif;cursor:pointer;border:3px solid #7c173e;touch-action:manipulation}
.lb-play{flex:1 1 200px;max-width:280px;color:#fff;background:linear-gradient(90deg,#ff5fa2,#d4136f);box-shadow:0 4px 0 #7c173e,0 8px 18px rgba(232,69,139,.3)}
.lb-keep{flex:0 1 auto;color:#7c173e;background:#fff3df;box-shadow:0 3px 0 #ff5fa2;font-size:16px}
.lb-btn:active{transform:translateY(3px);box-shadow:0 1px 0 #7c173e}
.lb-btn:focus-visible{outline:3px solid #ffb800;outline-offset:2px}
@media (hover:hover) and (pointer:fine){.lb-play:hover{filter:brightness(1.06)}.lb-keep:hover{background:#fff}}
#lb.meet .lb-head{font-size:clamp(24px,4.8vh,34px)}
#lb.meet .lb-tap{display:none}
@media (max-height:460px) and (orientation:landscape){.lb-meet-acts{justify-content:flex-start;margin-top:4px}.lb-btn{min-height:44px;font-size:16px}}

/* Rescue run: collection progress under "Added to your grumble" */
.lb-progress{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:8px;font-weight:600;font-size:clamp(12.5px,2.1vh,14px);line-height:1.25;color:#7c173e;text-wrap:balance}
.lb-progress i{display:block;width:min(200px,70%);height:6px;border-radius:99px;background:#f3d5c2;overflow:hidden}
.lb-progress b{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ff9cc7,#ff5fa2)}
.lb-progress.done{color:#d4136f;font-weight:700}
@media (max-height:460px) and (orientation:landscape){.lb-progress{align-items:flex-start;margin-top:4px}}