/* Live stacked-deck effects: the next REAL case is rendered beneath the active case.
   Loaded after swipe.css and intro.css to override the older empty-card stack. */
.is-quiz .deck{
  isolation:isolate;
  overflow:visible;
}
.is-quiz .deck::before,
.is-quiz .deck::after{
  z-index:-1;
  pointer-events:none;
}
.is-quiz .deck .card.card-current{
  position:relative;
  z-index:2;
  will-change:transform;
  transform-origin:50% 80%;
}
.is-quiz .deck .card.card-next{
  position:absolute;
  inset:0;
  z-index:0;
  box-sizing:border-box;
  display:block;
  height:100%;
  min-height:0;
  max-height:none;
  overflow:hidden;
  opacity:1;
  background:#fff;
  border:3px solid #d0c2e9;
  border-radius:inherit;
  pointer-events:none;
  user-select:none;
  -webkit-user-select:none;
  transform:translate3d(10px,11px,0) rotate(1.7deg) scale(.975);
  transform-origin:50% 85%;
  transition:transform .23s cubic-bezier(.2,.8,.25,1),box-shadow .23s ease;
  box-shadow:0 8px 0 #e7ddf2,0 14px 22px #3a266015;
}
.is-quiz .deck.is-peeking .card.card-next{
  transition:none;
}
.is-quiz .deck.is-committing .card.card-next{
  transition:transform .24s cubic-bezier(.2,.8,.22,1);
}
.is-quiz .deck .card.card-next .topic,
.is-quiz .deck .card.card-next .card-main,
.is-quiz .deck .card.card-next .card-bottom{
  pointer-events:none;
}
.is-quiz .deck .swipe-stamp.stamp-floating{
  position:absolute;
  top:-16px;
  left:50%;
  right:auto;
  z-index:7;
  width:max-content;
  max-width:calc(100% - 20px);
  box-sizing:border-box;
  padding:9px 16px;
  border:3px solid #fff;
  border-radius:14px;
  box-shadow:0 5px 0 #31215e30,0 0 0 2px #302159;
  font:900 clamp(18px,4.2vw,27px)/1.06 Arial,sans-serif;
  color:#fff;
  background:#b54435;
  white-space:nowrap;
  text-shadow:none;
  pointer-events:none;
  transform:translate3d(calc(-50% + var(--swipe-x,0px)),0,0) rotate(-5deg);
  transition:opacity .06s linear;
}
.is-quiz .deck .swipe-stamp.stamp-floating.stamp-scam{
  opacity:var(--stamp-left,0);
  background:#bb4636;
}
.is-quiz .deck .swipe-stamp.stamp-floating.stamp-safe{
  opacity:var(--stamp-right,0);
  background:#28884c;
  transform:translate3d(calc(-50% + var(--swipe-x,0px)),0,0) rotate(5deg);
}
.is-quiz .deck.is-peeking .card.card-current{
  z-index:3;
}
.is-quiz .deck.is-committing .card.card-current{
  z-index:3;
}
.is-quiz .deck.is-committing .swipe-stamp.stamp-floating{
  transition:opacity .12s ease;
}
/* Keep the preview in the same shape as the active first card on the home. */
.is-home .home-first .deck .card.card-next{
  position:absolute;
  inset:0;
  height:100%;
  min-height:0;
  overflow:hidden;
  border-radius:25px;
  background:#fff;
}
.is-home .home-first .deck .card.card-current{
  position:relative;
  z-index:2;
}
@media(max-width:600px){
  .is-quiz .deck .swipe-stamp.stamp-floating{
    top:-13px;
    padding:8px 13px;
    border-radius:11px;
    font-size:clamp(17px,5vw,23px);
  }
  .is-quiz .deck .card.card-next{
    transform:translate3d(8px,10px,0) rotate(1.5deg) scale(.98);
  }
}
@media(prefers-reduced-motion:reduce){
  .is-quiz .deck .card.card-next,
  .is-quiz .deck .swipe-stamp.stamp-floating{
    transition:none!important;
  }
}


/* Inside the moving card, the verdict travels 1:1 with the finger.
   Keeping it WITHIN the card bounds stops mobile Safari clipping it. */
.is-quiz .deck .card.card-current>.swipe-stamp.stamp-floating{
 position:absolute;
 top:14px;
 left:50%;
 right:auto;
 z-index:12;
 max-width:calc(100% - 28px);
 box-sizing:border-box;
 transform:translate3d(-50%,0,0) rotate(-4deg);
 pointer-events:none;
}
.is-quiz .deck .card.card-current>.stamp-safe.stamp-floating{
 transform:translate3d(-50%,0,0) rotate(4deg);
}
.is-quiz .deck .card.card-current{
 overflow:visible!important;
}
@media(max-width:600px){
 .is-quiz .deck .card.card-current>.swipe-stamp.stamp-floating{
  top:11px;left:50%;max-width:calc(100% - 24px);
 }
}


/* The peeking card must have EXACTLY the current card's internal geometry.
   Previously it was display:block while the current card was flex, so its
   title/story jumped on promotion. Keep the same vertical space budget. */
.is-quiz .deck .card.card-next{
 display:flex;
 flex-direction:column;
 align-items:stretch;
 justify-content:flex-start;
 flex:0 0 auto;
}
.is-quiz .deck .card.card-next>.topic{
 flex:0 0 auto;
 align-self:flex-start;
}
.is-quiz .deck .card.card-next>.card-main{
 display:flex;
 align-items:center;
 flex:1 1 auto;
 min-height:0;
 height:auto;
}
.is-quiz .deck .card.card-next>.card-bottom{
 display:block;
 flex:0 0 auto;
 margin-top:auto;
 min-height:0;
 height:auto;
}
/* Match the content box including border-box padding and all mobile breakpoints. */
.is-quiz:not(.is-home) .deck .card.card-next{
 display:flex;
 flex-direction:column;
}
.is-home .home-first .deck .card.card-next{
 display:flex;
 flex-direction:column;
}