/* =========================================================
   Lumi — animated hero demo
   Faithful recreation of the real app screens, looping inside
   the phone frame. Motion is driven by hero-demo.js toggling
   classes / data-attributes; all movement here is transform +
   opacity only (GPU friendly). Brand tokens (--gold, --bronze,
   --champagne, --ivory, --ink, --taupe, --sage, --clay,
   --white-soft, fonts) come from style.css and are reused here.
   ========================================================= */

/* The demo fills the whole screen (ignoring .phone__screen padding). */
.phone__screen { padding: 0; }            /* demo manages its own spacing */
.demo {
  position: absolute;
  inset: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: linear-gradient(180deg, var(--white-soft) 0%, var(--ivory) 55%, var(--ivory-deep) 100%);
  overflow: hidden;
  isolation: isolate;
}

/* ---------- Cross-fading screens ---------- */
.dscreen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 20px 78px;          /* 48 clears the notch · 78 clears the tab bar */
  opacity: 0;
  pointer-events: none;
  transition: opacity .62s cubic-bezier(.4, 0, .2, 1);
  will-change: opacity;
}
.demo[data-screen="swipe"]     .dscreen--swipe,
.demo[data-screen="clean"]     .dscreen--clean,
.demo[data-screen="celebrate"] .dscreen--celebrate { opacity: 1; }

/* Celebration is full-bleed → drop the tab-bar gutter */
.dscreen--celebrate { padding-bottom: 20px; }

/* ---------- Shared top bar ---------- */
.dbar {
  position: relative;
  width: 100%;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  flex: none;
}
.dbar__title {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.dbar__gear {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--taupe);
}
.dbar__gear svg { width: 20px; height: 20px; }

/* =========================================================
   SCREEN A — SWIPE
   ========================================================= */
.dsub {
  font-family: "SFMono-Regular", ui-monospace, "Menlo", monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--taupe);
  margin-bottom: 12px;
  flex: none;
}

.dchips {
  display: flex;
  gap: 7px;
  margin-bottom: 16px;
  flex: none;
}
.dchip {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 6px 13px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(194, 163, 117, 0.25);
  color: var(--bronze);
  white-space: nowrap;
}
.dchip--on {
  background: linear-gradient(135deg, var(--gold), var(--bronze));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 12px rgba(194, 163, 117, 0.35);
}

/* Card stack */
.dstack {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  margin-bottom: 18px;
}
.dcard {
  position: absolute;
  inset: 0;
  border-radius: 22px;
  overflow: visible;   /* let the KEEP/TRASH stamp sit ON the card (image is rounded below) */
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 20px 44px rgba(41, 38, 33, 0.20);
  background: var(--ivory-deep);
  /* opacity transitions; all TRANSFORM motion is keyframe-driven below (one-shot
     animations are reliable — plain transform transitions snapped instead of
     sliding, which is why the swipe didn't read as a swipe). */
  transition: opacity var(--swipe-op, .45s) ease;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.dcard img {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* photos are swappable — any aspect ratio crops cleanly */
  border-radius: 22px;     /* the card no longer clips, so round the photo itself */
}
.dcard__date {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(22, 20, 17, 0.52);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.02em;
}

/* Back card peeks behind, then settles to the front (keyframe = reliable motion).
   Motion is translateY + opacity only — NO scale. Scaling a cached image layer up
   to 1× left the photo visibly blurry for the whole promote (then it snapped sharp);
   a pure vertical settle keeps the shot crisp the entire time. */
.dcard--back  { transform: translateY(12px); opacity: 0.9; z-index: 1; }
.dcard--back.is-front {
  opacity: 1;
  animation: dPromote var(--swipe-dur, .5s) cubic-bezier(.3, .7, .3, 1) forwards;
}
/* flies off SOLID and on top (z-index lifts it above the next card as it leaves),
   clipped by the screen edge */
.dcard--back.is-gone-left {
  z-index: 3;
  animation: dFlyLeft var(--swipe-dur, .66s) cubic-bezier(.4, .08, .55, 1) forwards;
}

.dcard--front { z-index: 2; }
.dcard--front.is-gone-right {
  z-index: 3;
  animation: dFlyRight var(--swipe-dur, .66s) cubic-bezier(.4, .08, .55, 1) forwards;
}

/* Third (deepest) card — sits furthest back, then rises one slot each swipe so the
   stack never looks empty. It is never swiped: it just settles at the front and holds
   until the screen cross-fades to Clean. */
.dcard--third { transform: translateY(24px); opacity: 0.62; z-index: 0; }
.dcard--third.is-peek {        /* swipe 1: rises into the "back" peek slot */
  opacity: 0.9;
  animation: dPeek var(--swipe-dur, .5s) cubic-bezier(.3, .7, .3, 1) forwards;
}
.dcard--third.is-front {       /* swipe 2: rises to full front and stays */
  opacity: 1;
  animation: dPromote2 var(--swipe-dur, .5s) cubic-bezier(.3, .7, .3, 1) forwards;
}
@keyframes dPeek     { from { transform: translateY(24px); } to { transform: translateY(12px); } }
@keyframes dPromote2 { from { transform: translateY(12px); } to { transform: translateY(0); } }

/* One-shot fly-offs: `from` pins the start so the slide always plays cleanly,
   regardless of the card's prior transform. */
@keyframes dFlyRight { from { transform: translate(0,0) rotate(0deg); } to { transform: translateX(135%) rotate(16deg); } }
@keyframes dFlyLeft  { from { transform: translate(0,0) rotate(0deg); } to { transform: translateX(-135%) rotate(-16deg); } }
@keyframes dPromote  { from { transform: translateY(12px); } to { transform: translateY(0); } }

/* Swipe stamps */
.dstamp {
  position: absolute;
  top: 16px;
  z-index: 3;
  padding: 5px 14px;
  border: 3px solid;
  border-radius: 10px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: 0.06em;
  opacity: 0;
  transition: opacity .22s ease;
  pointer-events: none;
}
.dstamp--keep  { left: 14px;  color: var(--sage); border-color: var(--sage); transform: rotate(-16deg); }
.dstamp--trash { right: 14px; color: var(--clay); border-color: var(--clay); transform: rotate(16deg); }
.dstamp.is-show { opacity: 1; }

/* Control buttons */
.dcontrols {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex: none;
}
.dctl {
  border: none;
  background: var(--white-soft);
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 16px rgba(41, 38, 33, 0.14);
  cursor: default;
  padding: 0;
}
.dctl svg { display: block; }
.dctl--trash { width: 54px; height: 54px; color: var(--clay); }
.dctl--trash svg { width: 25px; height: 25px; }
.dctl--undo  { width: 42px; height: 42px; color: var(--taupe); }
.dctl--undo svg { width: 20px; height: 20px; }
.dctl--heart { width: 54px; height: 54px; color: var(--sage); }
.dctl--heart svg { width: 26px; height: 26px; }
.dctl.is-pulse { animation: dCtlPulse .5s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes dCtlPulse { 0% { transform: scale(1); } 40% { transform: scale(1.2); } 100% { transform: scale(1); } }

/* =========================================================
   SCREEN B — CLEAN
   ========================================================= */
.dring {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 16px auto 22px;
  flex: none;
}
.dring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dring__track { fill: none; stroke: rgba(156, 126, 84, 0.16); stroke-width: 12; }
.dring__fill {
  fill: none;
  stroke: url(#dGoldGrad);
  stroke-width: 12;
  stroke-linecap: round;
  stroke-dasharray: 553;              /* 2·π·88 ≈ 553 */
  stroke-dashoffset: 553;             /* JS drives this 553 → 0 to fill */
  filter: drop-shadow(0 4px 10px rgba(194, 163, 117, 0.45));
}
.dring__c {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.dring__num { font-family: var(--font-head); font-weight: 300; font-size: 18px; color: var(--ink); }
.dring__num b { font-weight: 700; font-size: 44px; line-height: 1; }
.dring__lbl { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--taupe); }

.dtiles {
  display: flex;
  gap: 9px;
  width: 100%;
  margin-bottom: 18px;
  flex: none;
}
.dtile {
  flex: 1 1 0;
  background: #fff;
  border: 1px solid rgba(156, 126, 84, 0.12);
  border-radius: 16px;
  padding: 13px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.4, 0, .2, 1);
}
.dtile__icon { color: var(--bronze); }
.dtile__icon svg { width: 20px; height: 20px; }
.dtile__val { font-family: var(--font-head); font-weight: 700; font-size: 16px; color: var(--ink); line-height: 1; }
.dtile__lbl { font-size: 8.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--taupe); }
/* staggered reveal when the clean screen is live */
.demo[data-screen="clean"] .dtile { opacity: 1; transform: translateY(0); }
.demo[data-screen="clean"] .dtile:nth-child(1) { transition-delay: .15s; }
.demo[data-screen="clean"] .dtile:nth-child(2) { transition-delay: .28s; }
.demo[data-screen="clean"] .dtile:nth-child(3) { transition-delay: .41s; }

.dclean__btn {
  margin-top: auto;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px;
  border: none;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--gold), var(--bronze));
  color: var(--ink);
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.02em;
  box-shadow: 0 12px 28px rgba(194, 163, 117, 0.4);
  cursor: default;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), box-shadow .3s ease;
}
.dclean__btn svg { width: 18px; height: 18px; }
.dclean__btn.is-press {
  transform: scale(0.96);
  box-shadow: 0 0 0 4px rgba(224, 209, 173, 0.55), 0 16px 36px rgba(194, 163, 117, 0.6);
}

/* =========================================================
   SCREEN C — CELEBRATION
   ========================================================= */
.dscreen--celebrate { justify-content: center; background: var(--ivory); }

/* faint concentric gold "depth rings" */
.dcel__rings {
  position: absolute;
  inset: 0;
  background:
    repeating-radial-gradient(circle at 50% 46%,
      transparent 0 30px,
      rgba(194, 163, 117, 0.085) 30px 31.5px);
  -webkit-mask-image: radial-gradient(circle at 50% 46%, #000 35%, transparent 78%);
  mask-image: radial-gradient(circle at 50% 46%, #000 35%, transparent 78%);
  pointer-events: none;
}

/* drifting gold/snow glitter specks */
.dcel__glitter { position: absolute; inset: 0; pointer-events: none; }
.dcel__glitter i {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--champagne), var(--gold));
  opacity: 0;
  animation: dGlitter 4.6s ease-in-out infinite;
}
.dcel__glitter i:nth-child(1) { left: 18%; top: 24%; width: 4px; height: 4px; animation-delay: .0s; }
.dcel__glitter i:nth-child(2) { left: 78%; top: 30%; animation-delay: .5s; }
.dcel__glitter i:nth-child(3) { left: 30%; top: 70%; width: 3px; height: 3px; animation-delay: 1.0s; }
.dcel__glitter i:nth-child(4) { left: 68%; top: 66%; animation-delay: 1.6s; }
.dcel__glitter i:nth-child(5) { left: 50%; top: 18%; width: 6px; height: 6px; animation-delay: .8s; }
.dcel__glitter i:nth-child(6) { left: 12%; top: 52%; animation-delay: 2.1s; }
.dcel__glitter i:nth-child(7) { left: 86%; top: 50%; width: 4px; height: 4px; animation-delay: 1.3s; }
.dcel__glitter i:nth-child(8) { left: 42%; top: 80%; animation-delay: .3s; }
@keyframes dGlitter {
  0%   { opacity: 0; transform: translateY(8px) scale(0.6); }
  35%  { opacity: 0.9; transform: translateY(-4px) scale(1); }
  70%  { opacity: 0.5; transform: translateY(-14px) scale(0.85); }
  100% { opacity: 0; transform: translateY(-26px) scale(0.6); }
}

.dcel__c {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.dcel__num {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 62px;
  line-height: 1;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--gold), var(--bronze));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 16px rgba(194, 163, 117, 0.45));
  transform: scale(0.4);
  opacity: 0;
}
/* spring-ish pop when celebration becomes live */
.demo[data-screen="celebrate"] .dcel__num {
  animation: dPop .9s cubic-bezier(.2, 1.5, .4, 1) forwards;
}
@keyframes dPop {
  0%   { transform: scale(0.3);  opacity: 0; }
  55%  { transform: scale(1.16); opacity: 1; }
  72%  { transform: scale(0.96); }
  100% { transform: scale(1);    opacity: 1; }
}

/* ---- extra dopamine: gold flash + shockwave ring + confetti burst ---- */
.dcel__flash {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 46%,
    rgba(246, 217, 160, 0.6) 0%, rgba(194, 163, 117, 0.18) 32%, transparent 62%);
}
.demo[data-screen="celebrate"] .dcel__flash { animation: dFlash 1.3s ease-out forwards; }
@keyframes dFlash { 0% { opacity: 0; } 16% { opacity: 1; } 100% { opacity: 0.32; } }

.dcel__burst {
  position: absolute; left: 50%; top: 46%; width: 60px; height: 60px;
  margin: -30px 0 0 -30px; border-radius: 50%;
  border: 2px solid rgba(194, 163, 117, 0.55); opacity: 0; pointer-events: none;
}
.demo[data-screen="celebrate"] .dcel__burst { animation: dBurst 1.15s cubic-bezier(.2, .8, .3, 1) forwards; }
@keyframes dBurst {
  0%   { transform: scale(0.2); opacity: 0; }
  18%  { opacity: 0.85; }
  100% { transform: scale(5.6); opacity: 0; }
}

.dcel__confetti { position: absolute; left: 50%; top: 46%; width: 0; height: 0; pointer-events: none; z-index: 0; }
.dcel__confetti i {
  position: absolute; left: 0; top: 0; width: 7px; height: 10px; border-radius: 2px;
  opacity: 0; transform-origin: center;
}
.demo[data-screen="celebrate"] .dcel__confetti i { animation: dConfetti 1.45s ease-out forwards; }
@keyframes dConfetti {
  0%   { opacity: 0; transform: translate(0, 0) rotate(0); }
  12%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)); }
}
.dcel__confetti i:nth-child(1)  { --dx:-120px; --dy:-70px;  --r:200deg;  background: var(--gold);      animation-delay:.00s; }
.dcel__confetti i:nth-child(2)  { --dx: 110px; --dy:-80px;  --r:-180deg; background: var(--champagne); animation-delay:.03s; }
.dcel__confetti i:nth-child(3)  { --dx:-140px; --dy: 10px;  --r:160deg;  background: var(--bronze);    animation-delay:.06s; }
.dcel__confetti i:nth-child(4)  { --dx: 135px; --dy:-10px;  --r:-220deg; background: var(--gold);      animation-delay:.02s; }
.dcel__confetti i:nth-child(5)  { --dx:-90px;  --dy: 90px;  --r:140deg;  background: var(--sage);      animation-delay:.07s; }
.dcel__confetti i:nth-child(6)  { --dx: 95px;  --dy: 85px;  --r:-160deg; background: var(--champagne); animation-delay:.04s; }
.dcel__confetti i:nth-child(7)  { --dx:-30px;  --dy:-130px; --r:240deg;  background: var(--gold);      animation-delay:.01s; }
.dcel__confetti i:nth-child(8)  { --dx: 40px;  --dy:-125px; --r:-200deg; background: var(--bronze);    animation-delay:.05s; }
.dcel__confetti i:nth-child(9)  { --dx:-160px; --dy:-30px;  --r:180deg;  background: var(--champagne); animation-delay:.08s; }
.dcel__confetti i:nth-child(10) { --dx: 150px; --dy: 40px;  --r:-140deg; background: var(--sage);      animation-delay:.03s; }
.dcel__confetti i:nth-child(11) { --dx:-60px;  --dy: 120px; --r:210deg;  background: var(--gold);      animation-delay:.06s; }
.dcel__confetti i:nth-child(12) { --dx: 70px;  --dy: 115px; --r:-190deg; background: var(--champagne); animation-delay:.02s; }
.dcel__confetti i:nth-child(13) { --dx: 12px;  --dy:-140px; --r:160deg;  background: var(--gold);      animation-delay:.09s; }
.dcel__confetti i:nth-child(14) { --dx:-18px;  --dy: 135px; --r:-170deg; background: var(--bronze);    animation-delay:.04s; }
.dcel__freed {
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--taupe);
}
.dcel__sub {
  margin-top: 14px;
  font-family: var(--font-head);
  font-weight: 300;
  font-size: 14px;
  color: var(--bronze);
}

/* "New personal record" badge — the rare, shareable win. Gold pill above the
   number, mirroring SwipeCelebrationView's recordBadge. */
.dcel__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  padding: 6px 13px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--champagne), var(--gold));
  color: var(--ink);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 6px 16px rgba(194, 163, 117, 0.45);
}
.dcel__badge svg { width: 13px; height: 13px; }
.demo[data-screen="celebrate"] .dcel__badge {
  animation: dBadgeIn .6s cubic-bezier(.2, 1.4, .4, 1) .05s both;
}
@keyframes dBadgeIn {
  from { opacity: 0; transform: translateY(8px) scale(0.8); }
  to   { opacity: 1; transform: none; }
}

/* Share / Done actions — pinned near the bottom of the reward screen (the tab bar
   is hidden on this screen, so there's room). The loop ENDS on this frame. */
.dcel__actions {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 24px;
  display: flex;
  gap: 10px;
  z-index: 2;
  opacity: 0;                       /* revealed by the entrance animation below */
}
.demo[data-screen="celebrate"] .dcel__actions {
  animation: dActionsIn .55s cubic-bezier(.4, 0, .2, 1) .6s both;
}
@keyframes dActionsIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.dcel__btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 46px;
  border-radius: 999px;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.01em;
  cursor: default;
}
.dcel__btn svg { width: 17px; height: 17px; }
.dcel__btn--share {
  background: linear-gradient(135deg, var(--gold), var(--bronze));
  color: var(--ink);
  box-shadow: 0 10px 24px rgba(194, 163, 117, 0.4);
}
.dcel__btn--done {
  color: var(--bronze);
  background: transparent;
  box-shadow: inset 0 0 0 1.5px rgba(156, 126, 84, 0.4);
}

/* =========================================================
   SHARED BOTTOM TAB BAR
   ========================================================= */
.dtabs {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 62px;
  display: flex;
  align-items: stretch;
  padding: 0;
  background: #fff;
  border-top: 1px solid rgba(156, 126, 84, 0.08);
  box-shadow: 0 -6px 20px rgba(41, 38, 33, 0.06);
  opacity: 1;
  transition: opacity .4s ease;
  z-index: 4;
}
.demo[data-screen="celebrate"] .dtabs { opacity: 0; pointer-events: none; }

/* sliding gold selection indicator */
.dtabs__pill {
  position: absolute;
  top: 7px;
  width: 64px;
  height: 48px;
  border-radius: 18px;
  background: linear-gradient(160deg, var(--gold) 0%, var(--bronze) 100%);
  box-shadow: 0 6px 16px rgba(156, 126, 84, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transform: translateX(-50%);
  transition: left .42s cubic-bezier(.5, 0, .2, 1);
  z-index: 0;
}
.dtabs[data-sel="recent"] .dtabs__pill { left: 83.333%; }
.dtabs[data-sel="clean"]  .dtabs__pill { left: 50%; }

.dtab {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: none;
  background: none;
  color: var(--taupe);
  cursor: default;
  padding: 0;
}
.dtab svg { width: 22px; height: 22px; }
.dtab > span {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--taupe);
  transition: color .4s ease;
}
/* active tab: icon AND label sit on the gold pill, both white + legible */
.dtabs[data-sel="recent"] .dtab--recent,
.dtabs[data-sel="clean"]  .dtab--clean { color: #fff; }
.dtabs[data-sel="recent"] .dtab--recent > span,
.dtabs[data-sel="clean"]  .dtab--clean  > span { color: #fff; font-weight: 700; }

/* =========================================================
   CONFIRM SHEET — iOS-style alert over the Clean screen,
   shown after the "Clean it all" tap, before the celebration.
   ========================================================= */
.dconfirm {
  position: absolute; inset: 0; z-index: 6;
  display: flex; align-items: center; justify-content: center;
  background: rgba(41, 38, 33, 0.30);
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility .3s;
}
.dconfirm.is-show { opacity: 1; visibility: visible; }
.dconfirm__card {
  width: 80%; max-width: 232px;
  background: rgba(252, 250, 246, 0.97);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-radius: 20px; overflow: hidden; text-align: center;
  box-shadow: 0 22px 54px rgba(41, 38, 33, 0.30);
  transform: scale(0.88); transition: transform .3s cubic-bezier(.2, 1.2, .4, 1);
}
.dconfirm.is-show .dconfirm__card { transform: scale(1); }
.dconfirm__t {
  font-family: var(--font-head); font-weight: 700; font-size: 16px;
  color: var(--ink); padding: 18px 18px 5px;
}
.dconfirm__b {
  font-size: 11.5px; line-height: 1.45; color: var(--taupe); padding: 0 18px 16px;
}
.dconfirm__row { display: flex; border-top: 1px solid rgba(41, 38, 33, 0.10); }
.dconfirm__btn {
  flex: 1 1 0; padding: 12px 0; font-size: 14px; font-weight: 600;
  color: var(--taupe); font-family: var(--font-head);
}
.dconfirm__btn--ok {
  color: var(--bronze); font-weight: 700;
  border-left: 1px solid rgba(41, 38, 33, 0.10);
  transition: background .15s ease;
}
.dconfirm__btn--ok.is-press { background: rgba(194, 163, 117, 0.20); }

/* =========================================================
   REDUCED MOTION — static, tasteful celebration frame.
   (style.css already neutralises transitions/animations; here
   we make sure the still frame reads correctly.)
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .dcard--front { animation: none; }
  .dcel__num { transform: none; opacity: 1; }
  .dcel__actions { opacity: 1; }            /* keep Share/Done visible without the entrance anim */
  .dcel__glitter { display: none; }
  .demo[data-screen="clean"] .dtile { opacity: 1; transform: none; }
}