/* Layout: one narrow column. A wheel of 22 roman numerals frames the tarot card; the number field sits below, the reading replaces it once the card turns. */
:root{
  --void:#07051a;
  --indigo:#120d36;
  --violet:#4a2f9c;
  --amethyst:#9a7ee6;
  --gold:#d6b878;
  --gold-dim:#9c8454;
  --gold-pale:#f3e3b8;
  --text:#ebe6f8;
  --mute:#a49cc6;
  --warn:#ff9fb6;
  --line:rgba(214,184,120,.4);
  --line-soft:rgba(214,184,120,.18);
  --f-display:"Forum","Cormorant Garamond","Times New Roman",serif;
  --f-body:"EB Garamond","Cormorant Garamond","Times New Roman",serif;
  --f-num:"Cormorant Garamond","EB Garamond",Georgia,serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{
  background-color:var(--void);
  background-image:
    radial-gradient(70% 45% at 85% -5%,rgba(74,47,156,.6),transparent 70%),
    radial-gradient(60% 45% at -5% 40%,rgba(110,45,130,.28),transparent 70%),
    radial-gradient(90% 55% at 50% 105%,rgba(30,24,110,.55),transparent 70%);
  background-repeat:no-repeat;
  background-attachment:fixed;
  color:var(--text);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.7;
  padding-block:clamp(26px,6vw,52px);
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
}
#sky{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.mist{position:fixed;z-index:0;width:90vmax;height:90vmax;border-radius:50%;pointer-events:none;opacity:.5;animation:mist 48s ease-in-out infinite}
.mist.a{left:-45vmax;top:-35vmax;background:radial-gradient(closest-side,rgba(98,64,200,.45),transparent)}
.mist.b{right:-50vmax;bottom:-45vmax;background:radial-gradient(closest-side,rgba(150,70,170,.35),transparent);animation-delay:-24s}
@keyframes mist{0%,100%{transform:translate(0,0)}50%{transform:translate(7vmax,5vmax)}}
.page{position:relative;z-index:1;max-width:30rem;margin-inline:auto;display:flex;flex-direction:column;gap:1.6rem;min-width:0}
.head{text-align:center;display:flex;flex-direction:column;align-items:center;gap:.7rem}
.eyebrow{margin:0;font-family:var(--f-display);font-size:.82rem;letter-spacing:.42em;padding-left:.42em;text-transform:uppercase;color:var(--gold)}
.orn{display:flex;align-items:center;gap:.7rem;width:9rem;color:var(--gold)}
.orn::before,.orn::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold-dim))}
.orn::after{transform:scaleX(-1)}
.orn i{width:7px;height:7px;transform:rotate(45deg);border:1px solid var(--gold);flex:none}
h1{margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(1.9rem,8vw,2.5rem);line-height:1.2;letter-spacing:.06em;text-transform:uppercase;text-wrap:balance;color:var(--gold-pale);text-shadow:0 0 30px rgba(154,126,230,.6)}
.lede{margin:0;color:var(--mute);text-wrap:balance;max-width:26rem;font-size:1.05rem}

/* wheel + card */
.altar{position:relative;width:min(100%,30rem);aspect-ratio:1;margin-inline:auto;transition:opacity .8s}
.altar.dim{opacity:.45}
.wheel{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.wheel *{fill:none;stroke:var(--gold);stroke-width:.6}
.wheel .faint{stroke-opacity:.35}
.wheel .mid{stroke-opacity:.55}
.wheel text{fill:var(--gold-dim);stroke:none;font-family:var(--f-num);font-style:italic;font-size:10px;text-anchor:middle;transition:fill .6s}
.wheel text.on{fill:var(--gold-pale);font-size:12px;filter:drop-shadow(0 0 4px rgba(243,227,184,.95))}
.wheel .halo{stroke:var(--gold-pale);stroke-width:.8;opacity:0;transition:opacity .8s}
.altar.lit .wheel .halo{opacity:.9}
.spin-a,.spin-b{transform-box:view-box;transform-origin:200px 200px}
.spin-a{animation:spin 160s linear infinite}
.spin-b{animation:spin 240s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.scene{position:absolute;left:32.5%;top:15%;width:35%;aspect-ratio:420/840;perspective:1100px;container-type:inline-size;animation:drift 8s ease-in-out infinite}
.scene.open{animation:none}
.card{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.scene.open .card{transform:rotateY(180deg)}
.face{position:absolute;inset:0;border-radius:6px;-webkit-backface-visibility:hidden;backface-visibility:hidden;box-shadow:0 24px 60px rgba(0,0,0,.65)}
.back{background:linear-gradient(160deg,#241a66,#120d36 55%,#0a0724);border:1px solid var(--line);color:var(--gold)}
.back{overflow:hidden}
.back svg{display:block;width:100%;height:100%}
.b-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
.back.has-img .b-img{display:block}
.back.has-img svg{display:none}
.front{transform:rotateY(180deg);background:radial-gradient(120% 80% at 50% 38%,#2a1d78,#150e40 55%,#0a0724);border:1px solid var(--line);color:var(--gold);overflow:hidden;text-align:center}
.f-plain{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:12cqw 6cqw 10cqw}
.f-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
.front.has-img .f-img{display:block}
.front.has-img .f-plain,.front.has-img::before{display:none}
.front::before{content:"";position:absolute;inset:3.2cqw;border:1px solid var(--line-soft);pointer-events:none}
.scene.open .front{box-shadow:0 0 0 1px rgba(243,227,184,.25),0 0 70px rgba(154,126,230,.55),0 24px 60px rgba(0,0,0,.65)}
.f-top{font-family:var(--f-display);font-size:6.5cqw;letter-spacing:.3em;padding-left:.3em}
.f-num{font-family:var(--f-num);font-style:italic;font-weight:500;font-size:40cqw;line-height:1;color:var(--gold-pale);text-shadow:0 0 22px rgba(243,227,184,.55);font-variant-numeric:lining-nums}
.f-bot{display:flex;align-items:center;gap:3cqw;font-family:var(--f-display);font-size:7cqw;letter-spacing:.2em}
.f-bot svg{width:4.5cqw;height:4.5cqw;flex:none}
@keyframes drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* entry */
.panel{position:relative;background:rgba(10,7,32,.62);border:1px solid var(--line);padding:1.5rem 1.25rem 1.4rem;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:inset 0 0 0 4px rgba(7,5,26,.9),inset 0 0 0 5px var(--line-soft)}
.field{display:flex;flex-direction:column;align-items:center;gap:.4rem}
label{font-family:var(--f-display);font-size:.8rem;letter-spacing:.32em;padding-left:.32em;text-transform:uppercase;color:var(--gold)}
input{width:8rem;font-family:var(--f-num);font-style:italic;font-weight:500;font-size:2.6rem;line-height:1.2;text-align:center;color:var(--gold-pale);background:transparent;border:0;border-bottom:1px solid var(--gold-dim);border-radius:0;padding:.1rem .5rem}
input::placeholder{color:rgba(164,156,198,.45)}
input:focus{outline:none;border-bottom-color:var(--gold-pale);box-shadow:0 1px 0 var(--gold-pale)}
.btn:focus-visible,.again:focus-visible,.sw:focus-visible,.adm-btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.err{margin:.9rem 0 0;text-align:center;color:var(--warn);font-size:.98rem}
.btn{display:block;margin-top:1.2rem;width:100%;text-align:center;text-decoration:none;font-family:var(--f-display);font-size:.95rem;letter-spacing:.3em;padding:.95rem 1.2rem .95rem calc(1.2rem + .3em);text-transform:uppercase;color:var(--gold);background:transparent;border:1px solid var(--gold);border-radius:0;cursor:pointer;transition:background .25s,color .25s}
.btn:hover{background:var(--gold);color:var(--void)}
.closed{text-align:center}
.closed h2{margin:0 0 .5rem;font-family:var(--f-display);font-weight:400;font-size:1.4rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-pale)}
.closed p{margin:0;color:var(--mute)}

/* reading */
.reading{opacity:0;transform:translateY(12px);transition:opacity 1s ease .9s,transform 1s ease .9s;display:flex;flex-direction:column;gap:1.2rem}
.reading.show{opacity:1;transform:none}
.reading h2{margin:0;text-align:center;font-family:var(--f-display);font-weight:400;font-size:1.65rem;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-pale);text-wrap:balance;outline:none}
.reading .orn{align-self:center}
.r-head{display:flex;flex-direction:column;align-items:center;gap:.35rem;text-align:center}
.r-kicker{margin:0;font-family:var(--f-display);font-size:.82rem;letter-spacing:.4em;padding-left:.4em;text-transform:uppercase;color:var(--gold)}
.r-note{margin:.3rem 0 0;max-width:24rem;color:var(--mute);font-style:italic;font-size:1rem}
.r-body{display:flex;flex-direction:column;gap:1.5rem}
.motto{margin:0;padding:1rem 1.1rem;border-left:1px solid var(--gold);background:rgba(74,47,156,.16)}
.motto .lab{display:block;margin-bottom:.4rem;font-family:var(--f-display);font-size:.78rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.motto .q{margin:0;font-family:var(--f-num);font-style:italic;font-size:1.3rem;line-height:1.5;color:var(--gold-pale)}
.r-text{margin:0;font-size:1.12rem;line-height:1.85}
.r-sec h3,.advice h3{margin:0 0 .7rem;font-family:var(--f-display);font-weight:400;font-size:1.02rem;letter-spacing:.14em;line-height:1.5;text-transform:uppercase;color:var(--gold)}
.r-item{margin:0 0 1rem}
.r-item strong{display:block;margin-bottom:.1rem;font-weight:500;font-size:1.1rem;color:var(--gold-pale)}
.r-item p,.advice p{margin:0;font-size:1.1rem;line-height:1.8}
.advice{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:1.2rem 0}
.advice p{font-style:italic;color:var(--gold-pale)}
.cta{border:1px solid var(--line);padding:1.2rem 1.1rem 1.3rem;background:rgba(74,47,156,.18);text-align:center}
.cta p{margin:0;color:var(--mute);font-size:1rem}
.cta .handle{margin-top:.8rem;font-family:var(--f-num);font-style:italic;font-size:1.3rem;color:var(--gold-pale);user-select:all}
.again{align-self:center;background:none;border:0;color:var(--mute);font:inherit;font-size:.98rem;text-decoration:underline;text-underline-offset:4px;cursor:pointer;padding:.4rem}

/* owner strip */
.admin{border-top:1px dashed var(--line);padding-top:1rem;display:flex;flex-direction:column;gap:.6rem;font-size:.98rem}
.admin strong{font-family:var(--f-display);font-weight:400;letter-spacing:.2em;text-transform:uppercase;font-size:.85rem;color:var(--gold)}
.admin p{margin:0;color:var(--mute)}
.sw{display:inline-flex;align-items:center;gap:.75rem;align-self:flex-start;background:none;border:0;color:var(--text);font:inherit;cursor:pointer;padding:.25rem 0}
.sw .track{width:48px;height:26px;border:1px solid var(--gold-dim);position:relative;transition:background .2s;border-radius:0}
.sw .thumb{position:absolute;top:3px;left:3px;width:18px;height:18px;background:var(--gold-dim);transition:transform .2s,background .2s}
.sw[aria-checked="true"] .track{background:rgba(74,47,156,.6)}
.sw[aria-checked="true"] .thumb{transform:translateX(22px);background:var(--gold-pale)}
.ask{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}
.ask span{flex:1 1 100%;color:var(--text)}
.adm-btn{font-family:var(--f-display);letter-spacing:.12em;font-size:.9rem;padding:.55rem 1.1rem;cursor:pointer;border:1px solid var(--gold-dim);background:transparent;color:var(--gold);border-radius:0}
.adm-btn.go{background:var(--warn);border-color:var(--warn);color:var(--void)}

/* share panel */
.share{position:fixed;inset:0;z-index:50;overflow:auto;background:rgba(7,5,26,.94);display:flex;flex-direction:column;align-items:center;gap:1rem;padding:calc(env(safe-area-inset-top,0px) + 20px) max(16px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 24px) max(16px,env(safe-area-inset-left,0px))}
.share>*{width:min(100%,23rem);flex:none}
.share h2{margin:0;text-align:center;font-family:var(--f-display);font-weight:400;font-size:1.3rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-pale)}
.share img{display:block;width:100%;height:auto;aspect-ratio:9/16;background:var(--indigo);border:1px solid var(--line)}
.share-hint{margin:0;color:var(--mute);font-size:1rem;text-align:center}
.share-msg{margin:0;min-height:1.5em;text-align:center;color:var(--gold-pale)}
.share .btn{margin-top:0}
textarea{width:100%;font:inherit;font-size:1rem;line-height:1.5;color:var(--text);background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:0;padding:.7rem .8rem;resize:none}
textarea:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
#share-open{margin-top:.2rem}
@media (prefers-reduced-motion:reduce){
  .scene,.mist,.spin-a,.spin-b{animation:none}
  .card,.reading{transition:none}
}

.btn.alt{margin-top:.7rem;border-color:var(--line);color:var(--text)}
.btn.alt:hover{border-color:var(--gold);color:var(--void)}