:root{font-family:Georgia,'Times New Roman',serif;color:#f5eddf;background:#161326;color-scheme:dark}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 50% 10%,#433255 0,#201a32 45%,#100f1e 100%)}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.6}a{color:inherit}.page{width:min(100% - 32px,1100px);margin:auto}.site-nav{min-height:76px;display:flex;align-items:center;gap:26px;border-bottom:1px solid #9e7b6855}.brand{margin-right:auto;text-decoration:none;color:#efc58d;font-size:1.18rem;font-weight:700}.nav-link,.nav-current{font-family:Arial,sans-serif;font-size:.9rem;text-decoration:none}.nav-link{color:#d3c8d5}.nav-current{color:#efc58d}.hero{text-align:center;padding:56px 12px 34px}.eyebrow{font:700 .76rem Arial,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#efc58d}.hero h1{font-size:clamp(2.5rem,7vw,5.1rem);font-weight:400;line-height:1.08;margin:18px 0}.hero em{color:#efc58d;font-weight:400}.hero>p{max-width:660px;margin:0 auto 25px;color:#d9cddd;font-size:1.15rem;line-height:1.6}.primary,.secondary{border-radius:100px;padding:15px 30px;border:1px solid #e2ad72;font-family:Arial,sans-serif;font-weight:700}.primary{background:#e2ad72;color:#25182c;box-shadow:0 8px 30px #e2ad7233}.primary:hover{background:#f4c894}.secondary{background:transparent;color:#f4d5aa}.secondary:hover{background:#ffffff15}.hero .small,.small{font: .8rem/1.5 Arial,sans-serif;color:#a99eaf;margin-top:14px}.table{min-height:380px;position:relative;border:1px solid #b18c635e;border-radius:30px;background:radial-gradient(ellipse at 50% 20%,#4b3757 0,#30213c 50%,#201727 100%);padding:32px 24px 42px;text-align:center;box-shadow:0 24px 80px #0005}.table:before{content:'';pointer-events:none;position:absolute;inset:12px;border:1px solid #ad82534d;border-radius:23px}.table-message{font-size:1.2rem;color:#efd1ab;margin:14px auto 28px}.deck{height:136px;position:relative;display:grid;place-items:center;margin:auto}.deck-card{position:absolute;width:86px;height:126px;border-radius:11px;border:2px solid #e9bc87;background:repeating-linear-gradient(45deg,#3e274c,#3e274c 7px,#55345d 7px,#55345d 14px);display:grid;place-items:center;color:#f5cf94;font-size:2.4rem;box-shadow:0 12px 22px #0007}.deck-card:nth-child(1){transform:rotate(-12deg) translateX(-10px)}.deck-card:nth-child(2){transform:rotate(9deg) translateX(10px)}.deck.shuffling .deck-card:nth-child(1){animation:shuffle-a 1s ease-in-out 5}.deck.shuffling .deck-card:nth-child(2){animation:shuffle-b 1s ease-in-out 5}@keyframes shuffle-a{50%{transform:translateX(-90px) rotate(-30deg)}}@keyframes shuffle-b{50%{transform:translateX(90px) rotate(30deg)}}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;max-width:830px;margin:auto}.card-slot{min-width:0}.card-button{display:block;width:min(100%,190px);aspect-ratio:2/3;margin:auto;border:0;padding:0;background:transparent;perspective:900px}.card-inner{position:relative;display:block;width:100%;height:100%;transition:transform .7s;transform-style:preserve-3d}.card-button.open .card-inner{transform:rotateY(180deg)}.card-face{position:absolute;inset:0;display:grid;place-items:center;backface-visibility:hidden;border-radius:14px;border:2px solid #e6b883;box-shadow:0 14px 25px #0008}.card-back{background:repeating-linear-gradient(45deg,#392449,#392449 8px,#55325d 8px,#55325d 16px);font-size:3rem;color:#f7cf95}.card-front{background:#211b30;transform:rotateY(180deg);overflow:hidden}.card-front img{width:100%;height:100%;object-fit:cover}.card-caption{font: .93rem/1.5 Arial,sans-serif;color:#e6dce5;margin:14px auto 0;max-width:220px}.card-caption strong{display:block;font:1.3rem Georgia,serif;color:#f3c98f;margin-bottom:7px}.actions{position:relative;margin:36px auto 0;max-width:810px}.reading{margin:0 auto 28px;text-align:left;border:1px solid #d5ab7c70;background:#1d182ce0;padding:24px 30px;border-radius:19px;font:1rem/1.7 Arial,sans-serif}.reading h2{font:1.6rem Georgia,serif;color:#efc58d}.reading p{margin:1em 0}.reroll{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:14px;margin-top:27px;font: .9rem Arial,sans-serif;color:#c5b9ca}.text-button{border:0;background:none;color:#eec48e;text-decoration:underline;padding:10px}.history{padding:34px 0}.history h2{font-weight:400}.history button{background:none;border:1px solid #ab875f;border-radius:9px;padding:10px 14px;color:#efd0a5;margin:5px}.error{margin:24px auto;padding:15px;border-radius:12px;max-width:810px;background:#772f3b;color:white;font:1rem Arial,sans-serif}footer{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:48px;padding:23px 0;border-top:1px solid #9e7b6855;color:#9f96a7;font:.78rem Arial,sans-serif}dialog{border:1px solid #caa474;border-radius:20px;background:#282038;color:#f5eddf;padding:28px;width:min(94vw,450px);box-shadow:0 25px 100px #000b}dialog::backdrop{background:#08050bbb}dialog form{display:grid;gap:14px}dialog h2{margin:0;font-weight:400;font-size:1.8rem}dialog p{margin:0;line-height:1.5}dialog label{font:.85rem Arial,sans-serif}dialog input{border:1px solid #ae91ae;border-radius:10px;background:#171322;color:white;padding:13px}.close{position:absolute;right:15px;top:10px;background:none;border:0;color:#e9d9e8;font-size:2rem}@media(max-width:620px){.site-nav{gap:10px;min-height:68px;flex-wrap:wrap;padding:14px 0}.brand{width:100%}.hero{padding-top:40px}.table{padding:24px 14px;border-radius:20px}.cards{gap:8px}.card-caption{font-size:.77rem}.card-caption strong{font-size:1rem}.reading{padding:16px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* Оригинальная рубашка и пропорции колоды Райдера–Уэйта. */
.deck{height:150px}
.deck-card{width:81px;height:140px;border:1px solid #d8bd83;border-radius:7px;background:#e5dbc4 url('/gadanie/assets/tarot-back.jpg') center/100% 100% no-repeat;font-size:0}
.card-button{width:min(100%,190px);aspect-ratio:500/864}
.card-face{border:1px solid #d8bd83;border-radius:7px}
.card-back{background:#e5dbc4 url('/gadanie/assets/tarot-back.jpg') center/100% 100% no-repeat;font-size:0}
.card-front{background:#e5dbc4}
.card-front img{object-fit:contain}
.verdict{margin-top:26px;padding:18px 21px;border:1px solid #e2ad72;border-radius:14px;background:#3a2940}
.verdict h3{margin:0 0 8px;font:1.25rem Georgia,serif;color:#f4d29e}
.verdict p{margin:0}
.verdict strong{color:#fff0d5}
.spread-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:min(100%,520px);min-inline-size:0;max-width:100%;margin:0 auto 24px;padding:0;border:0;text-align:left}
.spread-picker legend{width:100%;margin-bottom:10px;text-align:center;font:700 .82rem Arial,sans-serif;color:#e8c89d}
.spread-picker label{position:relative;min-width:0;cursor:pointer}
.spread-picker input{position:absolute;opacity:0}
.spread-picker span{display:block;min-width:0;height:100%;padding:14px 16px;border:1px solid #947b8f;border-radius:12px;background:#2a2039;font:1rem Arial,sans-serif;color:#f2e6ef}
.spread-picker strong,.spread-picker small{display:block}
.spread-picker small{margin-top:5px;font:.78rem/1.35 Arial,sans-serif;color:#c7b6cb}
.spread-picker input:checked+span{border-color:#efc58d;background:#47324b;box-shadow:0 0 0 1px #efc58d66}
.spread-picker input:focus-visible+span{outline:2px solid #fff;outline-offset:3px}
.card-position{min-height:1.6em;margin:0 0 10px;color:#e9c69c;font:700 .85rem Arial,sans-serif;letter-spacing:.03em}
.relationship-reading{margin:24px 0;padding:18px 22px;border-left:3px solid #e2ad72;background:#ffffff0b}
.relationship-reading h3{margin:0 0 10px;font:1.3rem Georgia,serif;color:#efc58d}
.relationship-reading p{margin:10px 0}
.relationship-reading .relationship-note{color:#c7b6cb;font-size:.87rem}
@media(max-width:480px){.spread-picker{gap:8px}.spread-picker span{padding:12px 10px}.spread-picker small{font-size:.7rem}.card-position{font-size:.7rem}}
.hero-cta{width:min(100%,520px);margin:0 auto}
.hero-choice{margin:0 0 9px;color:#f3d3a8;font:700 .9rem Arial,sans-serif}
.hero-cta .primary{display:block;width:100%;min-height:70px;padding:15px 22px;border-radius:17px;font-size:1.22rem;box-shadow:0 10px 34px #e2ad7266}
.hero-cta .primary:not(:disabled):hover{transform:translateY(-2px)}
.hero-cta .primary:focus-visible,.hero-cta .secondary:focus-visible{outline:3px solid #fff;outline-offset:3px}
.hero-countdown{margin:10px 0 0;color:#e6d1bd;font:700 .9rem Arial,sans-serif}
.hero-paid-reroll{width:100%;min-height:52px;margin-top:12px;border-radius:15px}
@media(max-width:620px){.hero{padding-top:22px}.hero .eyebrow{font-size:.65rem;letter-spacing:.14em}.hero h1{margin:11px 0;font-size:clamp(2rem,9vw,2.5rem)}.hero>p{font-size:1rem;line-height:1.45;margin-bottom:17px}.hero-cta .primary{min-height:66px;font-size:1.13rem}}

/* The first screen follows the order: question, topic, cards. */
body{background:radial-gradient(ellipse at 50% 0%,#51375b 0,#261c36 32%,#14101f 76%)}
.hero{position:relative;isolation:isolate;padding:42px 12px 35px}
.hero::before{content:'';position:absolute;z-index:-1;inset:0 4%;pointer-events:none;background:radial-gradient(ellipse at 50% 35%,#c5916021,transparent 60%)}
.hero .eyebrow{display:block;color:#f4ce9b;letter-spacing:.2em}
.hero h1{max-width:810px;margin:17px auto 17px;font-size:clamp(2.8rem,7vw,5.3rem);line-height:1.07;text-wrap:balance}
.hero h1 em{font-style:italic;color:#f7d4a5}
.hero .hero-intro{max-width:650px;margin:0 auto 27px;color:#e4d8e3;font:1.08rem/1.55 Arial,sans-serif}
.spread-picker{width:min(100%,590px);gap:13px;margin-bottom:18px}
.spread-picker legend{margin-bottom:13px;font-size:.88rem;letter-spacing:.03em;color:#ead5b6}
.spread-picker label span{min-height:104px;padding:15px 16px;border-color:#a88a9a7a;background:linear-gradient(145deg,#3b2b48,#271c34);box-shadow:0 7px 22px #100a1a48;transition:border-color .2s,background .2s,transform .2s,box-shadow .2s}
.spread-picker label:hover span{transform:translateY(-3px);border-color:#e6bf8d}
.spread-picker input:checked+span{background:linear-gradient(145deg,#64435a,#3e2b45);border-color:#f5ce9a;box-shadow:0 0 0 1px #f5ce9a70,0 12px 30px #c0926b25}
.spread-picker strong{font-size:1.02rem;color:#fff2dd}
.spread-picker small{color:#dbcedb;line-height:1.35}
.topic-symbol{float:left;display:grid;place-items:center;width:36px;height:36px;margin:0 10px 20px 0;border:1px solid #e7bb8880;border-radius:50%;color:#f4c990;font:1.55rem Georgia,serif}
.spread-picker:focus-visible{outline:2px solid #f6d59f;outline-offset:7px;border-radius:8px}
.hero-cta{width:min(100%,590px)}
.hero-choice{font-size:.83rem;color:#f0d8b6}
.hero-cta .primary{min-height:68px;background:linear-gradient(110deg,#f5d19b,#e8ae6e 60%,#f6d49d);border-color:#ffdba9;color:#2a1a29;box-shadow:0 12px 35px #dba46a55;transition:transform .2s,box-shadow .2s,filter .2s}
.hero-cta .primary:not(:disabled):hover{box-shadow:0 16px 38px #dba46a88;filter:brightness(1.06)}
.hero-cta .primary:active{transform:translateY(1px)}
.hero-steps{display:flex;justify-content:center;gap:clamp(12px,3vw,34px);max-width:730px;margin:24px auto 0;padding:0;list-style:none;color:#d7c8d9;font:.85rem Arial,sans-serif}
.hero-steps li{display:flex;align-items:center;gap:8px;white-space:nowrap}
.hero-steps span{color:#edc38e;font-size:.73rem;letter-spacing:.05em}
.hero .hero-note{margin:15px auto 0;color:#bcadc2}
.table{overflow:hidden;background:radial-gradient(circle at 50% 8%,#67485c 0,#3c2947 38%,#22192f 82%);box-shadow:0 28px 85px #08050d8c,inset 0 1px #f4d5a533}
.table::after{content:'✦';position:absolute;top:23px;left:34px;color:#e1b68145;font-size:1.5rem;pointer-events:none}
.table-message{position:relative;margin:18px auto 27px;font-size:clamp(1.15rem,2.5vw,1.42rem);line-height:1.35;color:#ffe0b3}
.deck{height:165px;margin:8px auto 20px;filter:drop-shadow(0 16px 18px #09071180)}
.deck-card:nth-child(1){transform:translateX(-57px) rotate(-18deg)}
.deck-card:nth-child(2){transform:translateX(57px) rotate(18deg)}
.deck-card:nth-child(3){transform:translateY(-8px) rotate(1deg)}
.deck.shuffling .deck-card:nth-child(3){animation:shuffle-c 1s ease-in-out 5}
@keyframes shuffle-c{50%{transform:translateY(-15px) rotate(-11deg)}}
.card-button:not(.open):hover .card-inner{transform:translateY(-7px)}
.card-button:focus-visible{outline:3px solid #ffe2b4;outline-offset:5px;border-radius:7px}
.card-caption{color:#eee3eb}
.actions{margin-top:29px}
.reading-teaser{max-width:570px;margin:0 auto 10px;color:#eee0e9;font:1rem/1.5 Arial,sans-serif}
#reading-button{display:block;width:min(100%,560px);min-height:61px;margin:25px auto;border-radius:15px;background:linear-gradient(110deg,#f4d09b,#eab676);font-size:1.04rem;line-height:1.25;box-shadow:0 10px 35px #dfa86352}
.reading{box-shadow:0 16px 42px #100a1d80}
.reroll .secondary{min-height:48px}
.error{margin:0 auto 20px;border:1px solid #f0b9a166}
dialog{padding:30px;max-height:min(92vh,680px);overflow:auto}
dialog h2{color:#f4d19e}
dialog .primary{border-radius:12px;min-height:52px}
dialog input:focus-visible{outline:2px solid #f4d19e;outline-offset:2px}
@media(max-width:620px){
  .hero{padding:28px 5px 26px}
  .hero h1{font-size:clamp(2.35rem,9vw,3.4rem);margin:14px auto}
  .hero .hero-intro{font-size:.96rem;line-height:1.45;margin-bottom:20px}
  .spread-picker{gap:9px;margin-bottom:15px}
  .spread-picker label span{min-height:106px;padding:12px 11px}
  .spread-picker strong{font-size:.9rem}
  .spread-picker small{font-size:.71rem}
  .topic-symbol{width:28px;height:28px;margin-right:7px;margin-bottom:25px;font-size:1.2rem}
  .hero-cta .primary{min-height:63px;font-size:1.09rem}
  .hero-steps{gap:10px;margin-top:18px;font-size:.7rem}
  .hero-steps li{gap:4px}
  .hero-steps span{font-size:.66rem}
  .table{padding:23px 13px 35px}
  .deck{margin-top:4px}
  .table-message{margin:12px auto 20px}
  #reading-button{font-size:.98rem}
  .reroll .secondary{width:100%}
}
@media(max-width:375px){.hero-steps{gap:6px;font-size:.64rem}.topic-symbol{display:none}.spread-picker label span{padding:11px 9px}}