@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap");
:root { --cream:#f5f0e8; --oxblood:#551a26; --rose:#c79a9f; --ink:#171515; --gold:#b69a68; --paper:#fffdf8; --muted:#6f6260; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); font-family:Arial,sans-serif; background:var(--cream); }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.1; background-image:radial-gradient(circle at 12% 17%,transparent 0 52px,var(--gold) 53px 54px,transparent 55px),radial-gradient(circle at 91% 72%,transparent 0 82px,var(--oxblood) 83px 84px,transparent 85px),linear-gradient(30deg,transparent 49.7%,var(--gold) 50%,transparent 50.3%); background-size:310px 310px,430px 430px,190px 190px; }
main { width:min(680px,calc(100% - 32px)); margin:auto; padding:70px 0 84px; position:relative; }
.hero { text-align:center; margin-bottom:34px; }
.eyebrow { color:var(--gold); letter-spacing:.24em; font-size:.72rem; font-weight:700; }
h1,h2 { font-family:"DM Serif Display",Georgia,serif; color:var(--oxblood); font-weight:400; }
h1 { font-size:clamp(3.4rem,10vw,5.7rem); line-height:.95; margin:.22em 0 .13em; }
.intro { color:var(--ink); font-family:"DM Serif Display",Georgia,serif; font-size:1.18rem; font-style:italic; }
.price { display:inline-flex; align-items:baseline; gap:8px; color:var(--oxblood); font:bold 1.35rem Arial,sans-serif; }
.price span { color:var(--muted); font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; }
.panel { border:1px solid rgba(85,26,38,.22); border-radius:3px; background:rgba(255,253,248,.94); padding:clamp(26px,6vw,46px); box-shadow:0 22px 65px rgba(85,26,38,.09); position:relative; }
.panel::before { content:"✦"; position:absolute; top:15px; right:18px; color:var(--gold); font-size:.78rem; }
label { display:block; color:var(--oxblood); font-size:.78rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; margin:22px 0 9px; }
label:first-child { margin-top:0; }
input,select,textarea { width:100%; border:1px solid var(--rose); border-radius:2px; color:var(--ink); background:var(--paper); padding:14px 15px; font:1rem Arial,sans-serif; outline:none; }
input:focus,select:focus,textarea:focus { border-color:var(--oxblood); box-shadow:0 0 0 3px rgba(199,154,159,.22); }
textarea { min-height:145px; resize:vertical; }
.counter { text-align:right; color:var(--muted); font-size:.72rem; margin-top:6px; }
.hint,.disclaimer { color:var(--muted); font-size:.8rem; line-height:1.55; }
button { border:0; border-radius:2px; padding:15px 22px; font:bold .79rem Arial,sans-serif; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; }
button:disabled { opacity:.55; cursor:wait; }
.primary { width:100%; margin-top:22px; color:var(--cream); background:var(--oxblood); }
.secondary { color:var(--cream); background:var(--oxblood); }
.link-button { display:block; margin:14px auto 0; padding:7px; color:var(--oxblood); background:transparent; text-decoration:underline; text-underline-offset:4px; }
#waiting-panel,#draw-panel,#result-panel { text-align:center; }
.moon { color:var(--gold); font-size:4rem; }
h2 { font-size:2.15rem; }
blockquote { color:var(--muted); font:italic 1.15rem/1.65 "DM Serif Display",Georgia,serif; }
.card-back { position:relative; width:210px; height:326px; margin:22px auto 0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; border:1px solid var(--gold); border-radius:3px; color:var(--cream); background:var(--oxblood); box-shadow:0 18px 38px rgba(85,26,38,.22); }
.card-back::before,.card-back::after { content:""; position:absolute; width:178px; height:292px; border:1px solid rgba(245,240,232,.35); }
.card-back span { font-size:3rem; color:var(--gold); }.card-back small { color:var(--cream); opacity:.75; }.card-back strong,.card-back small,.card-back span { position:relative; z-index:1; }
.revealed-card { width:min(260px,90%); min-height:390px; margin:auto; padding:42px 22px; display:flex; flex-direction:column; justify-content:center; border:1px solid var(--gold); border-radius:3px; background:var(--paper); box-shadow:0 18px 45px rgba(85,26,38,.13); }
.star { color:var(--gold); font-size:3rem; }.revealed-card h2 { margin:18px 0 8px; }.revealed-card p { color:var(--oxblood); font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.16em; }
.reading { font:1.22rem/1.7 "DM Serif Display",Georgia,serif; color:var(--oxblood); margin:28px auto; max-width:480px; }
.error { padding:14px; color:#fff; background:var(--oxblood); border-radius:2px; text-align:center; }
.hidden { display:none !important; }
@media (max-width:520px) { main{padding-top:42px}.panel{padding:28px 22px}.card-back{height:300px}h1{font-size:3.75rem} }