/* Truth or Dare Cards — 3D card game */
.tdcards-page .tdcards-hero{min-height:auto;padding:clamp(2.4rem,4.5vw,4rem) clamp(1rem,5vw,4rem)}
.tdcards-page .tdcards-hero h1{font-size:clamp(2.35rem,5vw,4.7rem)}
.tdcards-game{overflow:visible}
.tdcards-layout{display:grid;grid-template-columns:minmax(260px,.82fr) minmax(430px,1.18fr);gap:clamp(1rem,3vw,2rem);max-width:1080px;margin:0 auto;align-items:start}
.tdcards-controls{display:grid;gap:.75rem}
.tdcards-control-card,.tdcards-turn-card{border:1px solid rgba(255,255,255,.18);border-radius:18px;background:linear-gradient(145deg,rgba(28,56,145,.58),rgba(74,21,114,.52));box-shadow:inset 0 1px rgba(255,255,255,.07),0 14px 34px rgba(3,0,61,.18);padding:.92rem}
.tdcards-control-card label{display:block;color:#fff;font-weight:900;margin-bottom:.42rem}.tdcards-control-card label span{color:#bdc9ec;font-size:.85em;font-weight:700}
.tdcards-control-card select,.tdcards-control-card input{width:100%;min-height:45px;border:1px solid rgba(255,255,255,.22);border-radius:13px;background:rgba(7,15,68,.78);color:#fff;padding:.62rem .72rem;outline:none;box-shadow:inset 0 1px rgba(255,255,255,.05)}
.tdcards-control-card select:focus,.tdcards-control-card input:focus{border-color:#64e8ff;box-shadow:0 0 0 3px rgba(100,232,255,.12)}.tdcards-control-card select option{background:#14105b;color:#fff}
.tdcards-control-card>small,.tdcards-control-heading small{display:block;margin-top:.4rem;color:#b9c4e8;font-size:.75rem;line-height:1.4}
.tdcards-control-heading{display:flex;align-items:start;justify-content:space-between;gap:.75rem}.tdcards-control-heading label{margin:0}.tdcards-text-button{border:0;background:transparent;color:#6deaff;font-weight:850;cursor:pointer;padding:0}.tdcards-text-button:hover{text-decoration:underline}
.tdcards-player-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.5rem;margin-top:.7rem}.tdcards-player-form .btn{min-height:45px;padding:.55rem .8rem}
.tdcards-player-chips{display:flex;flex-wrap:wrap;gap:.4rem;min-height:28px;margin-top:.65rem;max-height:62px;overflow:auto}.tdcards-player-chip{display:inline-flex;align-items:center;gap:.35rem;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(255,255,255,.075);padding:.35rem .55rem;color:#fff;font-size:.75rem;font-weight:800}.tdcards-player-chip button{border:0;background:transparent;color:#a9f6ff;cursor:pointer;font-size:.95rem;line-height:1}.tdcards-empty-player{color:#aeb9df;font-size:.76rem}
.tdcards-turn-card{display:grid;text-align:center;gap:.08rem;border-color:rgba(89,228,255,.27);background:linear-gradient(135deg,rgba(24,101,197,.44),rgba(92,29,151,.48))}.tdcards-turn-card>span{text-transform:uppercase;letter-spacing:.08em;color:#79efff;font-size:.63rem;font-weight:950}.tdcards-turn-card strong{font-size:1.08rem}.tdcards-turn-card small{color:#bcc8e9;font-size:.72rem}
.tdcards-stage-wrap{display:grid;justify-items:center;gap:.75rem;min-width:0}
.tdcards-stage{position:relative;width:min(100%,650px);min-height:535px;border:1px solid rgba(255,255,255,.14);border-radius:24px;background:radial-gradient(circle at 50% 30%,rgba(75,104,236,.16),transparent 35%),linear-gradient(145deg,rgba(7,25,76,.88),rgba(50,13,76,.77));box-shadow:0 24px 54px rgba(2,0,55,.28),inset 0 1px rgba(255,255,255,.06);overflow:hidden;isolation:isolate;perspective:1500px}
.tdcards-stage::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 0 38%,rgba(255,255,255,.035) 40% 43%,transparent 45% 100%);pointer-events:none}
.tdcards-deck{position:absolute;left:10%;top:50%;width:170px;height:240px;transform:translateY(-50%) rotateZ(-6deg);z-index:1;filter:drop-shadow(0 20px 22px rgba(0,0,0,.28))}
.tdcards-stack-card,.tdcards-deck-top{position:absolute;inset:0;border-radius:18px;border:2px solid rgba(237,247,255,.82);background:linear-gradient(145deg,#162069,#3e1676 54%,#8b207f);box-shadow:inset 0 1px rgba(255,255,255,.2)}
.tdcards-stack-card.stack-4{transform:translate(-13px,12px) rotate(-4deg);opacity:.52}.tdcards-stack-card.stack-3{transform:translate(-9px,8px) rotate(-2.5deg);opacity:.67}.tdcards-stack-card.stack-2{transform:translate(-6px,5px) rotate(-1.3deg);opacity:.82}.tdcards-stack-card.stack-1{transform:translate(-3px,2px)}
.tdcards-deck-top{display:grid;place-items:center;align-content:center;gap:.22rem;background:radial-gradient(circle at 35% 20%,rgba(106,226,255,.27),transparent 28%),linear-gradient(145deg,#16246f,#52178a 54%,#bf218d);box-shadow:inset 0 1px rgba(255,255,255,.28),inset 0 -25px 40px rgba(0,0,0,.22),0 12px 28px rgba(0,0,0,.25)}
.tdcards-deck-top::before,.tdcards-deck-top::after{content:"";position:absolute;border:1px solid rgba(255,255,255,.14);border-radius:14px}.tdcards-deck-top::before{inset:12px}.tdcards-deck-top::after{inset:22px}
.tdcards-deck-top span,.tdcards-deck-top b,.tdcards-deck-top small{position:relative;z-index:1}.tdcards-deck-top span{font-size:.66rem;letter-spacing:.16em;color:#ff91ce;font-weight:950}.tdcards-deck-top b{font-size:1.38rem;letter-spacing:.08em}.tdcards-deck-top small{font-size:.62rem;letter-spacing:.16em;color:#79edff;font-weight:900}
.tdcards-card-slot{position:absolute;right:8%;top:50%;width:310px;height:430px;transform:translateY(-50%);perspective:1500px;z-index:4}
.tdcards-card{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateY(0deg) rotateX(1deg);transition:transform .95s cubic-bezier(.2,.8,.18,1),filter .3s ease;filter:drop-shadow(0 28px 30px rgba(0,0,0,.32));will-change:transform}
.tdcards-card.is-revealed{transform:rotateY(180deg) rotateX(1deg)}
.tdcards-card.is-drawing{animation:tdcardsDraw 1.05s cubic-bezier(.18,.74,.2,1)}
@keyframes tdcardsDraw{0%{transform:translate3d(-210px,35px,-120px) rotateY(0deg) rotateZ(-8deg) scale(.72)}44%{transform:translate3d(-55px,-12px,45px) rotateY(74deg) rotateZ(-2deg) scale(.96)}100%{transform:translate3d(0,0,0) rotateY(180deg) rotateX(1deg) scale(1)}}
.tdcards-face{position:absolute;inset:0;border-radius:25px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;border:4px solid rgba(247,251,255,.94);box-shadow:inset 0 2px rgba(255,255,255,.42),inset 0 -16px 30px rgba(0,0,0,.2)}
.tdcards-back{display:grid;place-items:center;align-content:center;gap:.75rem;background:radial-gradient(circle at 30% 18%,rgba(100,230,255,.34),transparent 28%),radial-gradient(circle at 72% 80%,rgba(255,68,181,.24),transparent 32%),linear-gradient(145deg,#122673,#401985 52%,#9b1f89);color:#fff;text-align:center}
.tdcards-back::before,.tdcards-back::after{content:"";position:absolute;border:1px solid rgba(255,255,255,.15);border-radius:20px}.tdcards-back::before{inset:15px}.tdcards-back::after{inset:28px}
.tdcards-back-mark{position:relative;z-index:1;display:grid;place-items:center;width:95px;height:95px;border-radius:50%;background:linear-gradient(145deg,#2f82ff,#7a43ff 50%,#ed379e);box-shadow:0 0 0 8px rgba(255,255,255,.08),0 14px 28px rgba(0,0,0,.22);font-size:3.6rem;font-weight:950;line-height:1}.tdcards-back strong{position:relative;z-index:1;display:grid;gap:.05rem;font-size:1.55rem;letter-spacing:.08em}.tdcards-back strong i{font-style:normal;color:#78ecff;font-size:.65rem;letter-spacing:.18em}.tdcards-back small{position:relative;z-index:1;color:#e6e9ff;font-weight:900;letter-spacing:.13em}
.tdcards-front{transform:rotateY(180deg);display:flex;flex-direction:column;padding:1.1rem;background:radial-gradient(circle at 26% 12%,rgba(106,235,255,.25),transparent 30%),linear-gradient(155deg,#17327e,#315ccc 58%,#173178);color:#fff}
.tdcards-front.is-dare{background:radial-gradient(circle at 28% 12%,rgba(255,179,223,.24),transparent 30%),linear-gradient(155deg,#7b175c,#d42685 58%,#72134f)}
.tdcards-front::before{content:"";position:absolute;inset:12px;border:1px solid rgba(255,255,255,.16);border-radius:18px;pointer-events:none}
.tdcards-card-top,.tdcards-card-bottom{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:.5rem}.tdcards-card-top>span{display:inline-flex;align-items:center;min-height:30px;padding:.3rem .62rem;border-radius:999px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.2);font-size:.68rem;font-weight:950;letter-spacing:.08em}.tdcards-card-top small{font-size:.68rem;color:#d8e7ff;font-weight:800}.tdcards-card-body{position:relative;z-index:1;flex:1;display:grid;align-content:center;justify-items:center;gap:.7rem;text-align:center;padding:.5rem .45rem}.tdcards-card-body strong{color:#a8f3ff;font-size:.82rem;letter-spacing:.04em}.tdcards-front.is-dare .tdcards-card-body strong{color:#ffd0ea}.tdcards-card-body p{margin:0;font-size:clamp(1.1rem,2.15vw,1.42rem);font-weight:900;line-height:1.4;text-wrap:balance}.tdcards-card-bottom{color:#d6e0fa}.tdcards-card-bottom>span{font-size:.67rem;font-weight:900;letter-spacing:.05em}.tdcards-card-bottom small{font-size:.62rem;text-align:right}
.tdcards-draw-button{width:min(360px,94%);min-height:66px;border:1px solid rgba(255,255,255,.44);border-radius:18px;background:linear-gradient(135deg,#277dff,#7951ff 48%,#ed369d);color:#fff;padding:.72rem 1rem;box-shadow:0 0 26px rgba(55,193,255,.28),0 14px 34px rgba(7,0,81,.28),inset 0 1px rgba(255,255,255,.2);cursor:pointer;transition:.18s ease}.tdcards-draw-button span{display:block;font-size:1.02rem;font-weight:950;letter-spacing:.03em}.tdcards-draw-button small{display:block;margin-top:.12rem;color:#e5e7ff;font-weight:700}.tdcards-draw-button:hover:not(:disabled){transform:translateY(-2px);filter:saturate(1.12)}.tdcards-draw-button:disabled{opacity:.56;cursor:wait}
.tdcards-stage-actions{display:flex;justify-content:center;gap:.55rem}.tdcards-stage-actions .btn{min-height:42px;padding:.5rem .85rem;font-size:.78rem}.tdcards-status{margin:0;color:#aebbe2;font-size:.74rem;text-align:center}.tdcards-safety-note{max-width:850px;margin:.85rem auto 0;text-align:center;color:#bbc5e7;font-size:.78rem;line-height:1.45}
@media(max-width:900px){.tdcards-layout{grid-template-columns:1fr;max-width:650px}.tdcards-stage-wrap{grid-row:1}.tdcards-controls{grid-template-columns:repeat(2,minmax(0,1fr))}.tdcards-turn-card{grid-column:1/-1}.tdcards-stage{min-height:510px}.tdcards-deck{left:8%}}
@media(max-width:620px){.tdcards-controls{grid-template-columns:1fr}.tdcards-turn-card{grid-column:auto}.tdcards-stage{min-height:430px;border-radius:19px}.tdcards-deck{width:120px;height:170px;left:6%;transform:translateY(-50%) rotateZ(-6deg)}.tdcards-card-slot{width:235px;height:330px;right:5%}.tdcards-face{border-radius:20px;border-width:3px}.tdcards-back-mark{width:72px;height:72px;font-size:2.7rem}.tdcards-back strong{font-size:1.15rem}.tdcards-front{padding:.85rem}.tdcards-card-body p{font-size:1rem}.tdcards-card-body strong{font-size:.72rem}.tdcards-card-bottom>span,.tdcards-card-bottom small{font-size:.55rem}.tdcards-draw-button{min-height:60px}.tdcards-page .tdcards-hero p{font-size:.9rem}}
@media(max-width:430px){.tdcards-game{padding:.8rem}.tdcards-stage{min-height:370px}.tdcards-deck{width:91px;height:130px;left:4%;opacity:.82}.tdcards-deck-top span,.tdcards-deck-top small{font-size:.43rem}.tdcards-deck-top b{font-size:.82rem}.tdcards-card-slot{width:min(68vw,220px);height:min(95vw,310px);right:3%}.tdcards-card-body p{font-size:.9rem;line-height:1.34}.tdcards-card-top small{font-size:.56rem}.tdcards-card-top>span{min-height:25px;padding:.24rem .48rem;font-size:.58rem}.tdcards-control-card{padding:.72rem}.tdcards-control-card select,.tdcards-control-card input{min-height:41px}.tdcards-player-form .btn{min-height:41px}.tdcards-page .tdcards-hero{padding:1.1rem .75rem}.tdcards-page .tdcards-hero h1{font-size:clamp(1.9rem,10vw,2.5rem)}.tdcards-page .tdcards-hero p{display:none}.tdcards-page .tdcards-hero .hero-actions{margin-top:.6rem}}
@media(prefers-reduced-motion:reduce){.tdcards-card{transition:none!important}.tdcards-card.is-drawing{animation:none!important}}


/* 3D card face visibility fix: prevents mirrored reverse text after a draw */
.tdcards-back{
  transform:rotateY(0deg);
  -webkit-transform:rotateY(0deg);
  opacity:1;
  visibility:visible;
}
.tdcards-front{
  transform:rotateY(180deg);
  -webkit-transform:rotateY(180deg);
  opacity:0;
  visibility:hidden;
}
.tdcards-card.is-revealed .tdcards-back{
  opacity:0;
  visibility:hidden;
}
.tdcards-card.is-revealed .tdcards-front{
  opacity:1;
  visibility:visible;
}


/* Stable 3D card flip — prevents mirrored text and disappearing faces */
.tdcards-card{
  transform:rotateY(0deg) rotateX(1deg);
  transform-style:preserve-3d;
}
.tdcards-card.is-revealed{
  transform:rotateY(0deg) rotateX(1deg);
}

/* Both surfaces face forward; JS switches which one is visible at the flip midpoint. */
.tdcards-back,
.tdcards-front{
  transform:none !important;
  -webkit-transform:none !important;
  backface-visibility:visible;
  -webkit-backface-visibility:visible;
}
.tdcards-back{
  opacity:1;
  visibility:visible;
}
.tdcards-front{
  opacity:0;
  visibility:hidden;
}
.tdcards-card.is-revealed .tdcards-back{
  opacity:0;
  visibility:hidden;
}
.tdcards-card.is-revealed .tdcards-front{
  opacity:1;
  visibility:visible;
}

/* Flip toward the viewer's edge and return forward instead of ending at 180deg. */
.tdcards-card.is-drawing{
  animation:tdcardsDrawStable 1.05s cubic-bezier(.18,.74,.2,1);
}
@keyframes tdcardsDrawStable{
  0%{
    transform:translate3d(-190px,32px,-110px) rotateY(0deg) rotateZ(-7deg) scale(.74);
  }
  44%{
    transform:translate3d(-42px,-10px,34px) rotateY(82deg) rotateZ(-1deg) scale(.96);
  }
  50%{
    transform:translate3d(-24px,-10px,42px) rotateY(89deg) rotateZ(0deg) scale(.98);
  }
  56%{
    transform:translate3d(-10px,-7px,30px) rotateY(82deg) rotateZ(0deg) scale(.99);
  }
  100%{
    transform:translate3d(0,0,0) rotateY(0deg) rotateX(1deg) scale(1);
  }
}
@media(prefers-reduced-motion:reduce){
  .tdcards-card.is-drawing{animation:none!important}
}


/* FINAL stable card animation: no backface/180deg conflicts, card remains visible */
.tdcards-card{
  transform:translate3d(0,0,0) rotateX(2deg) rotateZ(0deg) scale(1) !important;
  transform-style:preserve-3d;
  transition:none !important;
  opacity:1 !important;
  visibility:visible !important;
}
.tdcards-face{
  backface-visibility:visible !important;
  -webkit-backface-visibility:visible !important;
  transform:none !important;
  -webkit-transform:none !important;
  transition:opacity .16s ease,visibility .16s ease !important;
}
.tdcards-back{
  z-index:2 !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto;
}
.tdcards-front{
  z-index:3 !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none;
}
.tdcards-card.is-revealed .tdcards-back{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none;
}
.tdcards-card.is-revealed .tdcards-front{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto;
}
.tdcards-card.is-drawing{
  animation:tdcardsDrawFinal 1s cubic-bezier(.18,.76,.2,1) both !important;
  opacity:1 !important;
  visibility:visible !important;
}
@keyframes tdcardsDrawFinal{
  0%{
    transform:translate3d(-185px,30px,-90px) rotateX(8deg) rotateZ(-8deg) scale(.76) !important;
    filter:drop-shadow(0 18px 20px rgba(0,0,0,.22));
  }
  38%{
    transform:translate3d(-45px,-10px,36px) rotateX(7deg) rotateZ(-2deg) scale(.96) !important;
  }
  48%{
    transform:translate3d(-18px,-7px,48px) rotateX(4deg) rotateZ(0deg) scaleX(.10) scaleY(.99) !important;
  }
  55%{
    transform:translate3d(-8px,-5px,38px) rotateX(3deg) rotateZ(0deg) scaleX(.34) scaleY(1) !important;
  }
  78%{
    transform:translate3d(5px,-3px,16px) rotateX(2deg) rotateZ(.5deg) scale(1.025) !important;
  }
  100%{
    transform:translate3d(0,0,0) rotateX(2deg) rotateZ(0deg) scale(1) !important;
    filter:drop-shadow(0 28px 30px rgba(0,0,0,.32));
  }
}
@media(prefers-reduced-motion:reduce){
  .tdcards-card.is-drawing{animation:none!important}
}


/* Draw animation v5: a separate card visibly flies from the left deck to the result slot. */
.tdcards-deck.is-dealing .tdcards-deck-top{
  animation:tdcardsDeckDeal .34s ease-out;
}
@keyframes tdcardsDeckDeal{
  0%{transform:translate3d(0,0,0) rotateZ(0deg)}
  45%{transform:translate3d(9px,-5px,0) rotateZ(2deg)}
  100%{transform:translate3d(0,0,0) rotateZ(0deg)}
}

.tdcards-card.is-waiting{
  opacity:.16 !important;
  filter:drop-shadow(0 14px 18px rgba(0,0,0,.18)) blur(.2px) !important;
  transform:translate3d(0,3px,0) rotateX(2deg) scale(.985) !important;
  transition:opacity .18s ease,filter .18s ease,transform .18s ease !important;
}
.tdcards-card.is-arriving{
  animation:tdcardsCardLand .28s cubic-bezier(.2,.9,.25,1.25) both;
}
@keyframes tdcardsCardLand{
  0%{transform:translate3d(0,-5px,0) rotateX(2deg) scale(.965)}
  65%{transform:translate3d(0,1px,0) rotateX(2deg) scale(1.018)}
  100%{transform:translate3d(0,0,0) rotateX(2deg) scale(1)}
}

/* Temporary flying card is positioned with JS using the real deck and result-card coordinates. */
.tdcards-flying-card{
  position:fixed;
  left:0;
  top:0;
  z-index:9998;
  pointer-events:none;
  border:3px solid rgba(247,251,255,.96);
  border-radius:18px;
  overflow:hidden;
  color:#fff;
  background:
    radial-gradient(circle at 30% 18%,rgba(100,230,255,.34),transparent 28%),
    radial-gradient(circle at 72% 80%,rgba(255,68,181,.24),transparent 32%),
    linear-gradient(145deg,#16246f,#52178a 54%,#bf218d);
  box-shadow:
    inset 0 1px rgba(255,255,255,.3),
    inset 0 -22px 34px rgba(0,0,0,.22),
    0 20px 34px rgba(0,0,0,.32);
  transform-origin:50% 50%;
  will-change:transform,filter,opacity;
  display:grid;
  place-items:center;
  align-content:center;
  gap:.2rem;
}
.tdcards-flying-card::before,
.tdcards-flying-card::after{
  content:"";
  position:absolute;
  border:1px solid rgba(255,255,255,.15);
  border-radius:14px;
}
.tdcards-flying-card::before{inset:9%}
.tdcards-flying-card::after{inset:16%}
.tdcards-flying-card span,
.tdcards-flying-card b,
.tdcards-flying-card small{
  position:relative;
  z-index:1;
}
.tdcards-flying-card span{
  color:#ff9bd2;
  font-size:.56rem;
  font-weight:950;
  letter-spacing:.14em;
}
.tdcards-flying-card b{
  font-size:1rem;
  letter-spacing:.08em;
}
.tdcards-flying-card small{
  color:#78efff;
  font-size:.5rem;
  font-weight:900;
  letter-spacing:.13em;
}
.tdcards-flying-card.is-truth{
  box-shadow:
    inset 0 1px rgba(255,255,255,.32),
    inset 0 -22px 34px rgba(0,0,0,.2),
    0 0 26px rgba(67,183,255,.38),
    0 22px 36px rgba(0,0,0,.34);
}
.tdcards-flying-card.is-dare{
  box-shadow:
    inset 0 1px rgba(255,255,255,.32),
    inset 0 -22px 34px rgba(0,0,0,.2),
    0 0 26px rgba(255,65,175,.34),
    0 22px 36px rgba(0,0,0,.34);
}
@media(prefers-reduced-motion:reduce){
  .tdcards-deck.is-dealing .tdcards-deck-top,
  .tdcards-card.is-arriving{animation:none!important}
}