/* ════════════════════════════════════════════════════════════════
   card-draw — Card Draw overlay styles (OBS browser source, transparent bg)
   Three cinematic views: intro (deck backs fan in), show (faces dealt out one by
   one), reveal (one card rises/shuffles up + flips). Card positions are computed
   in JS (layoutFan) so ALL cards fit within a 1080px-wide frame. Transparent body
   per the overlay rule.
   ════════════════════════════════════════════════════════════════ */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    background: transparent;
    font-family: 'Outfit', 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: #fff;
    overflow: hidden;
}

.cd-root {
    width: 100vw;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 16px;
}

/* Stage is capped at 1080px wide so nothing runs off a 1080p canvas. */
.cd-stage {
    position: relative;
    width: 100%;
    max-width: 1080px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cd-face, .cd-arc-card { box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55); }

/* ── Reveal view: one card slides in, then flips ── */
.cd-cardview { position: relative; width: min(50vmin, 440px); aspect-ratio: 500 / 700; }
.cd-cardview[hidden] { display: none; }
.cd-card-slot { position: absolute; inset: 0; perspective: 1400px; }
.cd-card {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
    /* NOTE: never put filter/opacity/mask here — they flatten preserve-3d and
       break the flip (the front face stops showing). Shadow lives on .cd-face. */
}
.cd-card.is-flipped { transform: rotateY(180deg); }

.cd-face {
    position: absolute; inset: 0;
    border-radius: 18px; overflow: hidden;
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
    border: 3px solid rgba(255, 255, 255, 0.12);
}
.cd-back { background: linear-gradient(160deg, #3b2a6b, #1c1436); } /* fallback only — back.png covers it */
.cd-back-fill { width: 100%; height: 100%; background-size: cover; background-position: center; }
.cd-front { transform: rotateY(180deg); --frame: #8b5cf6; }

/* ── Ornate face template (line.png frame + content zones). Shared by the reveal
   front and the show/arc faces. Zone sizes use `em`; JS sets each card's
   font-size to 1% of its width so text scales with the card (works in older CEF —
   no container-query units). ── */
/* NOTE: do NOT set `position` here — .cd-facecard inherits `position:absolute;
   inset:0` from .cd-face / .cd-arc-card, which is the containing block for the
   absolutely-positioned zones below. Overriding it to relative collapses the card
   to 0×0 (all zones are absolute) → the whole face vanishes. */
.cd-facecard {
    background: var(--card-frame, url('assets/line.png')) center / 100% 100% no-repeat, #0e0a1a;
    border: none;
    overflow: hidden;
}
.cd-facecard > * { position: absolute; }
.cd-ftitle {
    top: 15%; left: 4%; right: 4%; text-align: center;
    font-size: 15em; font-weight: 900; line-height: 1; letter-spacing: 0.02em; color: #fff;
    text-shadow: 0 0.04em 0.14em rgba(0, 0, 0, 0.85), 0 0 0.3em rgba(0, 0, 0, 0.5), 0 0 0.5em var(--frame, transparent);
}
.cd-fsub {
    top: 25%; left: 9%; right: 9%; text-align: center;
    font-size: 5em; font-weight: 700; color: #f0d98a; text-shadow: 0 0.06em 0.12em rgba(0, 0, 0, 0.7);
}
.cd-fart { top: 31%; left: 18%; width: 64%; height: 33%; display: flex; align-items: center; justify-content: center; }
.cd-fart img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.cd-fdesc {
    top: 66%; left: 11%; right: 11%; text-align: center;
    font-size: 5.4em; font-weight: 800; line-height: 1.18; color: #fff;
    padding: 1.1em 0.9em; border-radius: 0.7em;
    background: rgba(6, 4, 14, 0.66); border: 0.12em solid rgba(214, 178, 74, 0.5);
    text-shadow: 0 0.05em 0.1em rgba(0, 0, 0, 0.7);
}
.cd-fquote {
    bottom: 4%; left: 8%; right: 8%; text-align: center;
    font-size: 3.5em; font-style: italic; color: #cdb8e8; text-shadow: 0 0.05em 0.1em rgba(0, 0, 0, 0.7);
}

/* Draw: the card slides in from the side, then flips. */
.cd-card-slot.cd-flying { animation: cd-reveal-in 560ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes cd-reveal-in {
    from { opacity: 0; transform: translateX(115%) rotate(9deg) scale(0.9); }
    to   { opacity: 1; transform: none; }
}

/* Auto-hide (backend hold_seconds elapsed): the revealed card flies off to the
   other side instead of just vanishing. */
.cd-card-slot.cd-flying-out { animation: cd-reveal-out 520ms cubic-bezier(0.4, 0, 0.2, 1) both; }
@keyframes cd-reveal-out {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: translateX(-115%) rotate(-9deg) scale(0.9); }
}

/* ── Arc/fan view: intro (backs) / show (faces). Slots positioned by JS. ── */
.cd-arc { position: relative; width: 100%; max-width: 1080px; height: min(66vh, 470px); }
.cd-arc[hidden] { display: none; }
.cd-arc-slot { position: absolute; top: 50%; left: 50%; /* size + transform set by layoutFan() */ }
.cd-arc-card { position: absolute; inset: 0; border-radius: 18px; overflow: hidden; } /* bg from .cd-arc-back or .cd-facecard */
.cd-arc-back {
    width: 100%; height: 100%;
    background: linear-gradient(160deg, #3b2a6b, #1c1436);
    background-size: cover; background-position: center;
}

/* Intro: backs slide in from the right, hold briefly, then slide out to the left
   (a transient flourish — the deck does NOT stay on screen). */
.cd-anim-intro { animation: cd-fly-through 2000ms cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay: calc(var(--i) * 60ms); }
@keyframes cd-fly-through {
    0%   { opacity: 0; transform: translateX(175%) rotate(9deg); }
    16%  { opacity: 1; transform: translateX(0) rotate(0); }
    70%  { opacity: 1; transform: translateX(0) rotate(0); }
    100% { opacity: 0; transform: translateX(-175%) rotate(-9deg); }
}
/* Show: faces dealt out of the deck one at a time (bigger stagger + lift). */
.cd-anim-show { animation: cd-deal 440ms cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(var(--i) * 150ms); }
@keyframes cd-deal {
    0%   { opacity: 0; transform: translateY(-38%) scale(0.55) rotate(-6deg); }
    60%  { opacity: 1; }
    100% { opacity: 1; transform: none; }
}