/* Pick-a-Card process deck — all colors/sizes are CSS variables so Elementor controls can override them. */
.dkp{
	--dkp-bg1:#1b3a2e;--dkp-bg2:#0b1a16;--dkp-bg3:#03050f;
	--dkp-accent:#34d399;--dkp-ga:#34d399;--dkp-gb:#38bdf8;
	--dkp-h:max(820px,100vh);
	--dkp-text:#fff;--dkp-muted:rgba(255,255,255,.65);
	--dkp-radius:22px;
	--dkp-back1:#0f1a33;--dkp-back2:#0a0e22;
	position:relative;height:var(--dkp-h);overflow:hidden;color:var(--dkp-text);
	font-family:'Inter',system-ui,sans-serif;text-align:left;
	background:radial-gradient(ellipse at 50% 45%,var(--dkp-bg1) 0%,var(--dkp-bg2) 40%,var(--dkp-bg3) 85%);
}
.dkp *,.dkp *::before,.dkp *::after{box-sizing:border-box;margin:0;padding:0}
.dkp img{max-width:none;height:auto}
.dkp::before{content:'';position:absolute;left:50%;top:44%;width:min(900px,120vw);height:520px;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(255,255,255,.06);box-shadow:inset 0 0 120px rgba(52,211,153,.06);pointer-events:none}
.dkp.dkp--noring::before{display:none}
.dkp__head{position:absolute;top:4.5rem;left:0;right:0;text-align:center;z-index:2;padding:0 5%;pointer-events:none}
.dkp__eye{display:block;font-family:'JetBrains Mono',monospace;font-size:.75rem;letter-spacing:.28em;color:var(--dkp-accent)}
.dkp__title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(2.2rem,4.4vw,3.8rem);line-height:1.05;letter-spacing:-.03em;margin:.8rem 0 .6rem;color:var(--dkp-text)}
.dkp__title em{font-style:normal;background:linear-gradient(90deg,var(--dkp-ga),var(--dkp-gb));-webkit-background-clip:text;background-clip:text;color:transparent}
.dkp__sub{color:var(--dkp-muted)}
.dkp__seen{position:absolute;z-index:3;top:1.6rem;right:2rem;font:500 .72rem 'JetBrains Mono',monospace;letter-spacing:.15em;padding:.5rem .9rem;border-radius:100px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.15);color:var(--dkp-text)}
.dkp__seen b{color:var(--dkp-accent);font-weight:700}

.dkp__card{position:absolute;left:50%;top:0;width:210px;height:300px;margin-left:-105px;cursor:pointer;z-index:5;outline:none;
	transition:transform .7s cubic-bezier(.2,.85,.25,1),width .7s cubic-bezier(.2,.85,.25,1),height .7s cubic-bezier(.2,.85,.25,1),margin .7s cubic-bezier(.2,.85,.25,1);}
.dkp__card:focus-visible .dkp__front{outline:3px solid var(--dkp-accent);outline-offset:3px}
.dkp__in{position:absolute;inset:0}
.dkp__face{position:absolute;inset:0;border-radius:var(--dkp-radius);overflow:hidden;border:1px solid rgba(255,255,255,.2);box-shadow:0 25px 60px rgba(0,0,0,.6);background:#0c1028}
.dkp__front img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.dkp__front::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,5,15,.1) 35%,rgba(3,5,15,.92) 100%)}
.dkp__front .n{position:absolute;z-index:2;top:.8rem;left:.9rem;font:700 2.2rem/1 'Space Grotesk',sans-serif;color:#fff;text-shadow:0 4px 20px rgba(0,0,0,.6)}
.dkp__front .suit{position:absolute;z-index:2;top:1rem;right:.9rem;width:30px;height:30px;border-radius:50%;background:var(--c);box-shadow:0 0 18px var(--c)}
.dkp__front .t{position:absolute;z-index:2;left:.9rem;right:.9rem;bottom:.9rem;font:700 1.35rem/1.05 'Space Grotesk',sans-serif;color:#fff}
.dkp__front .t small{display:block;font:500 .58rem 'JetBrains Mono',monospace;letter-spacing:.18em;color:var(--c);margin-bottom:.3rem}
.dkp__card.seen:not(.played) .dkp__front .suit::after{content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#fff;color:#03050f;font-weight:700;font-size:.9rem}
.dkp__back{opacity:0;visibility:hidden;transition:opacity .45s ease .35s,visibility 0s .8s;display:grid;grid-template-columns:1fr 1fr;background:linear-gradient(160deg,var(--dkp-back1),var(--dkp-back2))}
.dkp__pic{position:relative}
.dkp__pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dkp__pic span{position:absolute;left:1rem;bottom:1rem;font:700 4rem/1 'Space Grotesk',sans-serif;color:transparent;-webkit-text-stroke:1.5px #fff}
.dkp__txt{padding:2rem 1.8rem;display:flex;flex-direction:column;gap:.9rem;overflow-y:auto}
.dkp__txt small{font:500 .66rem 'JetBrains Mono',monospace;letter-spacing:.2em;color:var(--c)}
.dkp__txt h3{font:700 2.2rem/1 'Space Grotesk',sans-serif;letter-spacing:-.02em;color:#fff}
.dkp__txt p{color:rgba(255,255,255,.8);line-height:1.55}
.dkp__txt ul{list-style:none;display:grid;gap:.45rem}
.dkp__txt li{display:flex;gap:.55rem;font-size:.9rem;color:rgba(255,255,255,.88)}
.dkp__txt li::before{content:'◆';color:var(--c);font-size:.7rem;margin-top:.25rem}
.dkp__meta{display:flex;gap:1.2rem;font:500 .72rem 'JetBrains Mono',monospace;color:rgba(255,255,255,.6);padding-top:.8rem;border-top:1px solid rgba(255,255,255,.12);margin-top:auto}
.dkp__meta b{color:#fff;font-weight:500}

.dkp__close,.dkp__next{position:absolute;z-index:60;opacity:0;pointer-events:none;transition:opacity .4s ease .5s}
.dkp.has-play .dkp__close,.dkp.has-play .dkp__next{opacity:1;pointer-events:auto}
.dkp__close{top:1.4rem;left:2rem;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(3,5,15,.6);color:#fff;font-size:1.1rem;cursor:pointer;display:grid;place-items:center}
.dkp__next{left:50%;transform:translateX(-50%);bottom:2rem;display:flex;gap:.7rem}
.dkp__next button,.dkp__next a{height:50px;padding:0 1.3rem;border-radius:100px;font:600 .9rem 'Inter',sans-serif;cursor:pointer;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);display:inline-flex;align-items:center;text-decoration:none;white-space:nowrap}
.dkp__next a{background:linear-gradient(135deg,var(--dkp-ga),var(--dkp-gb));color:#03050f;border:0}
.dkp__dim{position:absolute;inset:0;z-index:40;background:rgba(3,5,15,.82);opacity:0;pointer-events:none;transition:opacity .5s ease}
.dkp.has-play .dkp__dim{opacity:1;pointer-events:auto}
.dkp__tip{position:absolute;z-index:3;left:0;right:0;bottom:1.6rem;text-align:center;font:500 .66rem 'JetBrains Mono',monospace;letter-spacing:.22em;color:rgba(255,255,255,.45);transition:opacity .3s}
.dkp.has-play .dkp__tip{opacity:0}
@media(max-width:760px){
	.dkp__card{width:150px;height:215px;margin-left:-75px}
	.dkp__front .t{font-size:1.05rem}.dkp__front .n{font-size:1.6rem}
	.dkp__back{grid-template-columns:1fr;grid-template-rows:32% 68%}
	.dkp__txt{padding:1.2rem;gap:.6rem}.dkp__txt h3{font-size:1.7rem}.dkp__txt p{font-size:.9rem}
	.dkp__seen{top:1rem;right:1rem}
}
@media(prefers-reduced-motion:reduce){.dkp *{transition:none!important}}


/* 2D crossfade instead of a 3D flip: text on the opened card is never on a transformed 3D layer, so it stays sharp */
.dkp__front{transition:opacity .35s ease .2s,visibility 0s .6s}
.dkp__card.played .dkp__front{opacity:0;visibility:hidden}
.dkp__card.played .dkp__back{opacity:1;visibility:visible;transition:opacity .45s ease .35s,visibility 0s 0s}
.dkp__txt,.dkp__txt *{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;filter:none;backface-visibility:visible}
