/* ============================================================
   Интерактивный расклад: тасовка → выбор карт → раскрытие → оплата.
   Всё на CSS-трансформах: сторонних библиотек нет (их запрещает CSP),
   а 3D-переворот и веер держат 60 fps даже на слабых телефонах.
   ============================================================ */

.dr-sky{position:fixed;inset:0;z-index:0;pointer-events:none}
.dr-wrap{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:26px 18px 80px}

/* ---------- шаги ---------- */
.dr-step{display:none;animation:drIn .5s cubic-bezier(.2,.8,.2,1)}
.dr-step.on{display:block}
@keyframes drIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.dr-head{text-align:center;max-width:660px;margin:0 auto 26px}
.dr-head h1{font-size:clamp(25px,4.2vw,38px);margin:6px 0 10px;line-height:1.15}
.dr-head p{color:var(--text-2);font-size:15.5px;line-height:1.65;margin:0}
.dr-kicker{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);display:block}

/* ---------- выбор расклада ---------- */
.dr-picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:12px;margin:22px 0 26px}
.dr-pick{
  position:relative;text-align:left;cursor:pointer;padding:16px 18px;border-radius:14px;
  background:var(--panel);border:1px solid var(--line);color:var(--text);
  transition:.18s;font:inherit;display:block;width:100%;
}
.dr-pick:hover{border-color:var(--line-2);transform:translateY(-2px)}
.dr-pick.on{border-color:var(--gold);background:linear-gradient(160deg,rgba(201,168,106,.13),transparent 65%)}
.dr-pick b{display:block;font-family:var(--serif);font-size:17px;margin-bottom:5px}
.dr-pick span{display:block;color:var(--muted);font-size:13.5px;line-height:1.5}
.dr-pick .dr-tags{margin-top:10px;display:flex;gap:6px;flex-wrap:wrap}
.dr-tag{font-size:11.5px;border:1px solid var(--line-2);border-radius:20px;padding:3px 10px;color:var(--text-2)}
.dr-tag.gold{border-color:rgba(201,168,106,.5);color:var(--gold)}

.dr-q{position:relative;margin-bottom:8px}
.dr-q textarea{min-height:104px;font-family:var(--serif);font-size:16px}
.dr-count{position:absolute;right:12px;bottom:10px;font-size:12px;color:var(--muted);pointer-events:none}
.dr-hint{font-size:13px;color:var(--muted);margin:0 0 20px}

/* ---------- карта ---------- */
.dcard{
  position:relative;width:var(--cw,112px);aspect-ratio:5/8;
  perspective:900px;flex:none;cursor:pointer;background:none;border:0;padding:0;
}
.dcard-in{
  position:relative;width:100%;height:100%;transform-style:preserve-3d;
  transition:transform .7s cubic-bezier(.3,.9,.3,1);border-radius:11px;
}
.dcard.flip .dcard-in{transform:rotateY(180deg)}
.dcard-back,.dcard-face{
  position:absolute;inset:0;backface-visibility:hidden;border-radius:11px;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:10px;text-align:center;box-shadow:var(--shadow);
}
.dcard-back{
  background:
    radial-gradient(circle at 50% 32%,rgba(201,168,106,.22),transparent 58%),
    linear-gradient(155deg,#3a2d5c,#181130 72%);
  border:1px solid var(--line-2);
}
.dcard-back::before{content:'';position:absolute;inset:6px;border:1px solid rgba(201,168,106,.36);border-radius:7px}
.dcard-back::after{
  content:'✦';color:var(--gold);font-size:clamp(18px,3.4vw,26px);opacity:.92;
  text-shadow:0 0 16px rgba(201,168,106,.55);
}
.dcard-face{
  transform:rotateY(180deg);
  /* Фон виден, если картинка не загрузилась, — карта остаётся читаемой. */
  background:linear-gradient(158deg,#2c2442,#15112399 60%,#171226);
  border:1px solid rgba(201,168,106,.42);
  padding:0;justify-content:flex-end;
}
/* Арт колоды Райдера—Уэйта (1909, общественное достояние). */
.dcard-face img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
.dcard.reversed .dcard-face img{transform:rotate(180deg)}

.dcard-face .lbl{
  position:relative;z-index:2;width:100%;box-sizing:border-box;
  padding:16px 5px 6px;
  background:linear-gradient(to top,rgba(9,7,15,.96),rgba(9,7,15,.74) 52%,transparent);
}
.dcard-face .g{font-size:clamp(19px,3.6vw,27px);color:var(--gold);line-height:1;margin-bottom:8px}
.dcard-face .nm{font-family:var(--serif);font-size:clamp(10px,1.8vw,12.5px);line-height:1.2;color:var(--text)}
.dcard-face .st{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.dcard-face .rv{
  display:inline-block;margin-top:5px;font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  color:#f0b8c8;border:1px solid rgba(214,112,143,.5);border-radius:20px;padding:1px 6px;
  background:rgba(40,12,24,.6);
}

/* ---------- тасовка ---------- */
.dr-deckwrap{display:grid;place-items:center;min-height:340px;position:relative}
.dr-deck{position:relative;width:150px;aspect-ratio:5/8;cursor:pointer;background:none;border:0;padding:0}
.dr-deck .dcard{position:absolute;inset:0;width:100%;pointer-events:none}
.dr-deck .dcard:nth-child(1){transform:translate(-7px,5px) rotate(-4deg)}
.dr-deck .dcard:nth-child(2){transform:translate(4px,2px) rotate(3deg)}
.dr-deck .dcard:nth-child(3){transform:none}
.dr-deck.shuffling .dcard:nth-child(1){animation:sh1 .5s ease}
.dr-deck.shuffling .dcard:nth-child(2){animation:sh2 .5s ease}
.dr-deck.shuffling .dcard:nth-child(3){animation:sh3 .5s ease}
@keyframes sh1{50%{transform:translate(-58px,-16px) rotate(-15deg)}}
@keyframes sh2{50%{transform:translate(52px,-9px) rotate(13deg)}}
@keyframes sh3{50%{transform:translateY(-22px) rotate(3deg)}}

/* Сакральная геометрия за колодой — медленно вращается. */
.dr-halo{
  position:absolute;width:min(420px,86vw);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(201,168,106,.14);pointer-events:none;
  animation:drSpin 46s linear infinite;
}
.dr-halo::before,.dr-halo::after{
  content:'';position:absolute;inset:11%;border:1px solid rgba(201,168,106,.11);
}
.dr-halo::before{transform:rotate(0deg)}
.dr-halo::after{transform:rotate(45deg)}
@keyframes drSpin{to{transform:rotate(360deg)}}

/* ---------- слоты позиций ---------- */
.dr-slots{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:0 0 26px}
.slot{
  --cw:96px;
  width:96px;border-radius:11px;border:1px dashed var(--line-2);
  aspect-ratio:5/8;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:8px;text-align:center;transition:.22s;position:relative;background:rgba(26,22,40,.45);
}
.slot .rn{font-family:var(--serif);font-size:19px;color:var(--muted);line-height:1}
.slot .tt{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:7px;line-height:1.35}
.slot.active{border-color:var(--gold);border-style:solid;box-shadow:0 0 0 3px rgba(201,168,106,.14),0 0 26px rgba(201,168,106,.2)}
.slot.active .rn,.slot.active .tt{color:var(--gold)}
.slot.filled{border:0;padding:0;background:none}
.slot .dcard{width:96px}

/* ---------- веер ---------- */
.dr-fan{
  position:relative;height:210px;margin:6px 0 18px;
  display:flex;align-items:flex-end;justify-content:center;
}
.dr-fan .dcard{
  --cw:78px;position:absolute;bottom:0;transform-origin:50% 165%;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .3s;
}
.dr-fan .dcard:hover,.dr-fan .dcard:focus-visible{transform:var(--t) translateY(-24px);z-index:20;outline:none}
.dr-fan .dcard.taken{opacity:0;pointer-events:none;transform:var(--t) translateY(-160px) scale(.7)}

/* ---------- раскрытие ---------- */
.dr-board{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-bottom:8px}
.dr-cell{width:118px;text-align:center}
.dr-cell .dcard{--cw:118px;cursor:default}
.dr-cell .cap{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-top:9px;line-height:1.4}
.dr-sec{width:100%;text-align:center;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:16px 0 2px}

/* ---------- пейволл ---------- */
.dr-pay{
  margin-top:30px;border:1px solid rgba(201,168,106,.42);border-radius:var(--radius);
  background:linear-gradient(165deg,rgba(201,168,106,.09),var(--panel) 60%);padding:28px 26px;
}
.dr-pay h2{font-size:clamp(21px,3.2vw,27px);margin:0 0 12px;text-align:center}
.dr-pay .sub{text-align:center;color:var(--text-2);margin:0 auto 22px;max-width:520px;line-height:1.65}
.dr-locked{position:relative;border-radius:12px;overflow:hidden;margin-bottom:22px}
.dr-locked .txt{filter:blur(5px);opacity:.5;user-select:none;pointer-events:none;padding:2px}
.dr-locked .txt p{color:var(--text-2);line-height:1.75;margin:0 0 11px;font-family:var(--serif);font-size:15px}
.dr-locked .veil{
  position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(to bottom,rgba(26,22,40,.15),rgba(26,22,40,.92));
}
.dr-locked .veil span{
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
  border:1px solid rgba(201,168,106,.45);border-radius:24px;padding:8px 18px;background:rgba(14,12,22,.7);
}
.dr-price{display:flex;align-items:baseline;justify-content:center;gap:11px;margin-bottom:16px}
.dr-price b{font-family:var(--serif);font-size:34px;color:var(--text)}
.dr-price s{color:var(--muted);font-size:17px}
.dr-gives{list-style:none;padding:0;margin:0 auto 22px;max-width:470px}
.dr-gives li{padding:7px 0 7px 26px;position:relative;color:var(--text-2);font-size:14.5px;line-height:1.55}
.dr-gives li::before{content:'✦';position:absolute;left:0;color:var(--gold)}

/* ---------- настройка расклада и честный счётчик ---------- */
.dr-opt{
  align-items:flex-start;margin:0 0 22px;padding:14px 16px;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
}
.dr-opt span{font-size:13.5px;line-height:1.55;color:var(--muted)}
.dr-opt b{color:var(--text-2)}
.dr-counts{margin-top:16px;font-size:13px;color:var(--muted)}

/* ---------- сохранение расклада на почту ---------- */
.dr-save{
  margin-top:26px;padding:20px 22px;border-radius:14px;
  background:rgba(14,12,22,.5);border:1px solid var(--line);
}
.dr-save b{display:block;font-family:var(--serif);font-size:17px;color:var(--text);margin-bottom:6px}
.dr-save p{color:var(--muted);font-size:13.5px;line-height:1.6;margin:0 0 14px}
.dr-save-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.dr-save-row input{flex:1;min-width:200px;margin:0}
.dr-save-row .btn{white-space:nowrap}
.dr-save .chk span{font-size:12.5px;line-height:1.5;color:var(--muted)}
.dr-save.done{
  border-color:#2f6641;background:rgba(47,102,65,.13);color:#a7e0ba;
}
.dr-save.done b{color:#a7e0ba;margin-bottom:2px}

.dr-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:20px}
.dr-note{text-align:center;color:var(--muted);font-size:12.5px;margin-top:14px;line-height:1.6}
.dr-err{
  background:rgba(138,52,80,.16);border:1px solid #8a3450;color:#f2a9ba;
  border-radius:12px;padding:13px 16px;margin-bottom:14px;line-height:1.55
}

@media(max-width:620px){
  .dr-fan{height:172px}
  .dr-fan .dcard{--cw:62px}
  .slot{--cw:74px;width:74px}
  .slot .dcard{width:74px}
  .dr-cell{width:96px}
  .dr-cell .dcard{--cw:96px}
  .dr-pay{padding:22px 17px}
}

@media(prefers-reduced-motion:reduce){
  .dcard-in,.dr-fan .dcard{transition:none}
  .dr-halo,.dr-deck.shuffling .dcard{animation:none}
  .dr-step{animation:none}
}