@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');
:root{--black:#070405;--panel:#11090b;--red:#7d0e1c;--bright:#bd2638;--gold:#c8a66b;--ivory:#eee4d1;--muted:#a99b8d;--line:rgba(200,166,107,.28)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% -10%,#311018 0,#0c0608 38%,#050304 75%);color:var(--ivory);font-family:Inter,system-ui,sans-serif;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.12;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E")}
.mist{position:fixed;width:60vw;height:24vw;border-radius:50%;filter:blur(70px);opacity:.07;background:#d7d3dc;pointer-events:none;animation:drift 18s ease-in-out infinite alternate}.mist-a{left:-20vw;top:18vh}.mist-b{right:-20vw;bottom:5vh;animation-delay:-7s}@keyframes drift{to{transform:translate(14vw,5vh) scale(1.15)}}
.masthead{height:92px;display:flex;align-items:center;gap:18px;padding:0 clamp(20px,5vw,72px);border-bottom:1px solid var(--line);background:rgba(5,3,4,.8);backdrop-filter:blur(16px);position:relative;z-index:3}.sigil{width:48px;height:58px;display:grid;place-items:center;font:700 32px Cinzel;color:var(--bright);border:1px solid var(--gold);clip-path:polygon(50% 0,100% 20%,90% 82%,50% 100%,10% 82%,0 20%)}
h1,h2,h3,.section-kicker,.eyebrow,button{font-family:Cinzel,serif}.eyebrow,.section-kicker{margin:0 0 5px;color:var(--gold);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase}.masthead h1{margin:0;font-size:clamp(1.05rem,3vw,1.65rem);letter-spacing:.04em}.icon-button{margin-left:auto;border:1px solid var(--line);background:#12090b;color:var(--gold);width:42px;height:42px;border-radius:50%;font-size:1.2rem;cursor:pointer}.icon-button[aria-pressed=true]{box-shadow:0 0 18px rgba(189,38,56,.5);color:#fff}
main{max-width:1440px;margin:auto;padding:clamp(22px,4vw,56px)}.altar{min-height:670px;display:grid;grid-template-columns:minmax(310px,430px) 1fr;border:1px solid var(--line);background:linear-gradient(135deg,rgba(25,11,14,.96),rgba(8,5,6,.92));box-shadow:0 26px 90px #000;border-radius:4px;overflow:hidden}.controls{padding:clamp(26px,4vw,54px);border-right:1px solid var(--line)}h2{font-size:clamp(1.65rem,4vw,2.7rem);line-height:1.1;margin:0 0 16px}.intro{color:var(--muted);line-height:1.65;margin-bottom:28px}.controls label{display:block;font-weight:600;margin-bottom:8px}.controls label span{font-weight:400;color:var(--muted)}textarea{width:100%;min-height:86px;resize:vertical;padding:14px;border:1px solid var(--line);border-radius:3px;background:#080506;color:var(--ivory);font:inherit;line-height:1.45;outline:none}textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,166,107,.08)}fieldset{border:0;padding:0;margin:24px 0}legend{font-weight:600;margin-bottom:10px}.spread-options,.deck-options{display:grid;gap:8px}.deck-options{grid-template-columns:repeat(3,1fr)}.spread,.deck-choice{display:flex;justify-content:space-between;align-items:center;text-align:left;padding:13px 14px;border:1px solid rgba(200,166,107,.16);color:var(--ivory);background:#0b0607;cursor:pointer}.deck-choice{display:block;text-align:center;padding:11px 5px}.spread span,.deck-choice span{font:400 .72rem Inter;color:var(--muted);margin-left:12px}.deck-choice span{display:block;margin:4px 0 0}.spread.active,.deck-choice.active{border-color:var(--gold);background:linear-gradient(90deg,rgba(125,14,28,.34),transparent);box-shadow:inset 3px 0 var(--bright)}.draw-button{width:100%;padding:16px;border:1px solid #d6b373;background:linear-gradient(#8f1425,#5d0915);color:#fff;font-weight:700;font-size:1rem;letter-spacing:.08em;cursor:pointer;box-shadow:0 8px 28px rgba(125,14,28,.4)}.draw-button:hover{filter:brightness(1.16)}.draw-button:disabled{opacity:.55;cursor:wait}.disclaimer{font-size:.72rem;color:#746b63;margin:13px 0 0;text-align:center}
.tabletop{position:relative;min-height:670px;display:grid;place-items:center;padding:28px;background:radial-gradient(circle at 50% 42%,rgba(107,19,31,.18),transparent 53%),linear-gradient(30deg,rgba(255,255,255,.015) 12%,transparent 12.5%,transparent 87%,rgba(255,255,255,.015) 87.5%)}.tabletop:after{content:"";position:absolute;inset:18px;border:1px solid rgba(200,166,107,.12);pointer-events:none}.idle-deck{position:relative;width:min(260px,58vw);filter:drop-shadow(0 24px 24px #000);animation:breathe 4s ease-in-out infinite}.idle-deck img{width:100%;display:block;border-radius:8px}.deck-shadow{position:absolute;inset:10px -10px -10px 10px;border:1px solid var(--gold);z-index:-1}@keyframes breathe{50%{transform:translateY(-8px);filter:drop-shadow(0 32px 30px #000) brightness(1.08)}}
.cards{width:100%;display:flex;flex-wrap:wrap;gap:22px;align-items:flex-start;justify-content:center;position:relative;z-index:1}.dealt{width:clamp(138px,18vw,210px);perspective:1200px;opacity:0;transform:translateY(-60px) rotate(4deg);animation:deal .65s cubic-bezier(.2,.8,.2,1) forwards}.dealt:nth-child(even){transform:translateY(-60px) rotate(-4deg)}@keyframes deal{to{opacity:1;transform:translateY(0) rotate(0)}}.card-label{text-align:center;color:var(--gold);font:600 .77rem Cinzel;letter-spacing:.09em;margin-bottom:8px;min-height:2em}.card-shell{position:relative;aspect-ratio:198/337;transform-style:preserve-3d;transition:transform .85s}.card-shell.flip{transform:rotateY(180deg)}.card-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:6px;overflow:hidden;box-shadow:0 15px 35px #000;border:1px solid rgba(200,166,107,.55)}.card-face img{width:100%;height:100%;object-fit:cover;display:block}.card-front{transform:rotateY(180deg)}.card-front.reversed img{transform:rotate(180deg)}.orientation{text-align:center;margin-top:8px;font-size:.72rem;color:var(--muted)}.orientation.rev{color:#d66c79}
.oracle{margin-top:34px;border:1px solid var(--line);background:rgba(15,8,10,.96);padding:clamp(26px,5vw,64px);box-shadow:0 20px 70px #000}.oracle.hidden{display:none}.oracle-heading{text-align:center;border-bottom:1px solid var(--line);padding-bottom:22px}.oracle-heading h2{margin:0}.summary{max-width:900px;margin:28px auto;color:#ddd0be;font-family:Georgia,serif;font-size:clamp(1.05rem,2vw,1.25rem);line-height:1.8}.details{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:28px}.detail{border:1px solid rgba(200,166,107,.18);padding:20px;background:#0a0607}.detail h3{color:var(--gold);margin:0 0 6px}.detail .card-name{color:#fff;font-weight:600;margin:0 0 12px}.detail p{color:var(--muted);line-height:1.55;margin:0}.secondary-button{display:block;margin:32px auto 0;background:transparent;color:var(--gold);border:1px solid var(--gold);padding:12px 20px;cursor:pointer}footer{max-width:1440px;margin:auto;padding:12px clamp(22px,5vw,72px) 38px;display:flex;justify-content:space-between;gap:20px;color:#71675e;font-size:.72rem;letter-spacing:.08em}
@media(max-width:850px){.altar{grid-template-columns:1fr}.controls{border-right:0;border-bottom:1px solid var(--line)}.tabletop{min-height:560px}.cards{gap:14px}.dealt{width:clamp(116px,28vw,180px)}footer{flex-direction:column}.masthead{height:78px}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}