/* Two explicit steps; the selected gender is also the next-step action. */
.is-flow{display:flex;flex-direction:column;background:radial-gradient(ellipse at 8% 38%,#eee7f36b,transparent 60%),var(--paper)}
.is-flow header{height:76px;padding-top:12px;border:0;flex-direction:column;justify-content:center;gap:5px;flex-shrink:0}
.is-flow header>span{font-size:10px;letter-spacing:1.5px}
.is-flow #view{flex:1}
.is-flow footer{margin-top:auto}
.is-flow .step,.is-flow .draw,.is-flow .loading{padding:16px 25px 0}
.flow-steps{margin:0 0 30px;text-align:center}
.flow-steps ol{display:flex;justify-content:center;gap:26px;list-style:none;margin:0;padding:0}
.flow-steps li{position:relative;color:#b7aabb;font-size:11px;line-height:22px;letter-spacing:.2px}
.flow-steps li+li:before{content:"›";position:absolute;left:-16px;color:#c3b6cb;font-size:14px;font-weight:400}
.flow-steps li>a,.flow-steps li>span{display:inline-flex;align-items:center}
.flow-steps li b{font:inherit}
.flow-steps .current{color:#79578d;font-weight:600}
.flow-steps .complete{color:#a592b0}
.is-flow .step-head{padding:0;text-align:center}
.is-flow .step-head h1{font-size:29px;font-weight:600;line-height:1.4;letter-spacing:-.7px;color:#49364f}
.is-flow .description{font-size:12px;line-height:1.9;color:#9a88a3;max-width:310px;margin:15px auto 0;text-wrap:balance}
.is-flow .gender-grid{margin:32px 0 17px;gap:17px}
.is-flow .gender-card{height:226px;padding-bottom:0;transition:transform .2s ease}
.is-flow .gender-card:active{transform:scale(.97)}
.is-flow .back{margin-top:10px}
.is-flow .draw .flow-steps{margin-bottom:22px}
.is-flow .draw .description{margin-top:13px;font-size:13px;line-height:28px;animation:hand-arrive .5s ease-out both}
.ritual-hand{font-size:18px;font-weight:500;color:#79538c;display:inline-block;padding:0 5px;margin:0 2px;background:linear-gradient(transparent 66%,#e7d9ef8c 66%);letter-spacing:1px}
@keyframes hand-arrive{from{opacity:.25;transform:translateY(3px)}to{opacity:1;transform:none}}
.is-flow .draw-status{margin:20px 0 18px;gap:16px}
.is-flow .picked{justify-content:center}
.is-flow .deck{margin-top:0}
.is-flow .draw-note{font-size:11px;margin-top:17px}
.is-flow .draw .back{padding:12px 8px;margin-top:4px}
.is-flow .loading .flow-steps{margin-bottom:44px}
.is-flow .loading-art{height:220px}
.is-flow .loading h1{font-size:25px}
@media(max-width:350px){.is-flow .step,.is-flow .draw,.is-flow .loading{padding:14px 21px 0}.flow-steps{margin-bottom:26px}.flow-steps ol{gap:22px}.is-flow .step-head h1{font-size:26px}.is-flow .description{font-size:11px}.is-flow .gender-grid{gap:12px;margin-top:26px}.is-flow .gender-card{height:210px}.is-flow .draw .flow-steps{margin-bottom:20px}.is-flow .draw-status{margin:17px 0}.is-flow .draw-note{font-size:10px}}
@media(prefers-reduced-motion:reduce){.is-flow .gender-card{transition:none}.is-flow .draw .description{animation:none}}
/* Compact draw screen: the gesture shares a row with the two draw markers. */
.is-drawing header{height:62px;padding-top:4px}
.is-flow.is-drawing .draw{padding:8px 23px 0}
.is-flow.is-drawing .draw .flow-steps{margin-bottom:12px}
.is-flow.is-drawing .step-head h1{font-size:27px;line-height:1.35}
.is-flow.is-drawing .draw-status{display:grid;grid-template-columns:1fr 82px 1fr;align-items:center;gap:4px;margin:8px 0 12px}
.is-drawing .picked{gap:7px}
.is-drawing .picked-icon{width:28px;height:36px;font-size:18px}
.is-drawing .picked strong{font-size:11px}
.hand-guide{display:flex;flex-direction:column;align-items:center;text-align:center;min-height:65px}
.guide-hand{width:45px;height:45px;overflow:visible;fill:none;stroke:#9e7bb2;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.guide-hand.left-hand{transform:scaleX(-1)}
.hand-outline{fill:#e9deef70;animation:hand-touch .85s ease-out both}
.tap-ring{stroke:#c5aacd;animation:tap-once .85s ease-out both;transform-origin:29px 10px}
.hand-caption{font-size:11px;line-height:18px;letter-spacing:1px;color:#a28bae;animation:hand-caption-in .5s .2s both}
.hand-caption strong{font-weight:500;color:#77548c}
@keyframes hand-touch{0%{transform:translateY(4px);opacity:.3}55%{transform:translateY(-2px);opacity:1}100%{transform:translateY(0);opacity:1}}
@keyframes tap-once{0%,35%{transform:scale(.5);opacity:0}65%{opacity:.7}100%{transform:scale(1.35);opacity:0}}
@keyframes hand-caption-in{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.is-flow.is-drawing .deck{gap:9px 8px}
.is-drawing .draw-card{aspect-ratio:3/4;max-height:clamp(74px,calc((100svh - 345px)/3),126px)}
.tarot-back-art{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.is-drawing .back-face small{bottom:10%;font-size:8px;color:#ad91bc}
.is-flow.is-drawing .draw-note{font-size:10px;line-height:1.8;margin-top:11px}
.is-flow.is-drawing .draw .back{padding:9px 8px;margin-top:0;font-size:11px}
.is-drawing footer{padding:8px 20px 12px;font-size:9px}
@media(max-width:350px){.is-flow.is-drawing .draw{padding:8px 18px 0}.is-flow.is-drawing .step-head h1{font-size:25px}.is-flow.is-drawing .draw-status{margin:7px 0 10px}.is-drawing .picked{gap:5px}}
@media(prefers-reduced-motion:reduce){.hand-outline,.tap-ring,.hand-caption{animation:none}.tap-ring{opacity:0}}