:root{
  --night:#06111e;
  --night2:#0a1829;
  --gold:#c8a45f;
  --gold-soft:#e0c58d;
  --cream:#f2e5c7;
  --ink:#efe2c6;
  --muted:#b9ad94;
  --shadow:rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html{min-height:100%;background:var(--night)}
body{
  margin:0; min-height:100vh; min-height:100dvh; color:var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  background:
    radial-gradient(circle at 50% 5%, rgba(65,84,111,.22), transparent 32%),
    radial-gradient(circle at 20% 70%, rgba(91,66,89,.12), transparent 35%),
    linear-gradient(180deg,var(--night2),var(--night));
  overflow-x:hidden;
}
body:before{
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
}
.stars{position:fixed;inset:0;pointer-events:none;opacity:.72}
.stars:before,.stars:after{
  content:"";position:absolute;inset:0;background-repeat:repeat;
}
.stars-a:before{background-image:radial-gradient(circle,#e8ca88 0 1px,transparent 1.3px);background-size:72px 72px;background-position:11px 5px}
.stars-a:after{background-image:radial-gradient(circle,#fff2c4 0 1px,transparent 1.2px);background-size:113px 113px;background-position:42px 63px;opacity:.55}
.stars-b{transform:rotate(7deg);opacity:.35}
.stars-b:before{background-image:radial-gradient(circle,#d6b46c 0 1.5px,transparent 1.8px);background-size:171px 171px;background-position:90px 20px}

.shell{width:min(1120px,100%);min-height:calc(100dvh - 44px);margin:auto;display:grid;place-items:center;padding:36px 22px 22px;position:relative;z-index:2}
.screen{display:none;width:100%;animation:fade .7s ease both}
.screen.active{display:grid}
#welcome{max-width:680px;text-align:center;place-items:center}
.moon-mark{font-size:58px;color:var(--gold);line-height:1;filter:drop-shadow(0 0 20px rgba(200,164,95,.26));margin-bottom:4px}
.eyebrow{margin:0 0 12px;text-transform:uppercase;letter-spacing:.22em;font-size:.76rem;color:var(--gold-soft)}
h1,h2,h3{font-weight:400;margin:0}
h1{font-size:clamp(3rem,9vw,6.6rem);line-height:.86;letter-spacing:.015em;color:var(--gold-soft);text-shadow:0 6px 36px rgba(0,0,0,.3)}
h1 span{font-size:.52em;font-style:italic;color:var(--cream)}
.intro{font-size:clamp(1.05rem,2vw,1.28rem);line-height:1.7;max-width:500px;margin:30px auto 18px;color:#d9ccb3}
.name-form{width:min(420px,100%);display:grid;gap:10px;text-align:left;margin-top:10px}
label{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
input{
  width:100%;border:1px solid rgba(200,164,95,.42);border-radius:999px;padding:16px 20px;
  background:rgba(3,10,18,.66);color:var(--cream);font:inherit;font-size:1.05rem;outline:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);
}
input:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(200,164,95,.09)}
button{font:inherit;cursor:pointer}
.primary{
  margin-top:4px;border:1px solid rgba(235,207,145,.65);border-radius:999px;
  padding:15px 22px;background:linear-gradient(180deg,#d4b36c,#b98d43);color:#11120d;
  font-weight:700;letter-spacing:.02em;box-shadow:0 10px 34px rgba(0,0,0,.3);
  transition:.25s transform,.25s box-shadow,.25s filter;
}
.primary:hover{transform:translateY(-2px);filter:brightness(1.05);box-shadow:0 13px 42px rgba(0,0,0,.42)}
.primary:active{transform:translateY(0)}
.fineprint{font-size:.82rem;color:#817968;margin-top:22px;font-style:italic}

#ritual{grid-template-columns:minmax(260px,.8fr) minmax(300px,440px);grid-template-areas:"copy card" "actions card" "result card";gap:24px 52px;align-items:center;max-width:980px}
.ritual-copy{grid-area:copy;align-self:end}
.ritual-copy h2{font-size:clamp(2rem,5vw,4.2rem);color:var(--cream);line-height:1}
.ritual-copy>p:last-child{max-width:480px;font-size:1.14rem;line-height:1.65;color:#d7cab0;margin:18px 0 0}
.oracle-wrap{grid-area:card;display:grid;place-items:center}
.card{width:min(360px,78vw);aspect-ratio:2/3;perspective:1400px;filter:drop-shadow(0 24px 44px rgba(0,0,0,.5))}
.card-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform 1.05s cubic-bezier(.2,.72,.25,1)}
.card.revealed .card-inner{transform:rotateY(180deg)}
.card-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:5.2% / 3.5%;overflow:hidden;background:#101820}
.card-face img{display:block;width:100%;height:100%;object-fit:cover}
.card-front{transform:rotateY(180deg)}
.glow{position:relative}
.glow:before{content:"";position:absolute;inset:-10px;border-radius:inherit;background:rgba(200,164,95,.13);filter:blur(16px);z-index:-1;animation:breathe 2.8s ease-in-out infinite}
.actions{grid-area:actions;display:flex;align-items:center;gap:12px;flex-wrap:wrap;align-self:start}
.actions .primary{min-width:260px}
.ghost{background:transparent;border:0;color:#978d78;padding:12px 6px;text-decoration:underline;text-underline-offset:4px}
.result-copy{grid-area:result;border-top:1px solid rgba(200,164,95,.25);padding-top:20px;animation:fade .7s ease both}
.result-copy h3{font-size:2rem;color:var(--gold-soft)}
.tomorrow{color:#958b77;font-style:italic}
footer{height:44px;display:grid;place-items:center;color:#675f52;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;position:relative;z-index:2}

@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes breathe{50%{opacity:.35;transform:scale(1.05)}}
@media (max-width:760px){
  .shell{padding-top:24px}
  #ritual{grid-template-columns:1fr;grid-template-areas:"copy" "card" "actions" "result";gap:18px;text-align:center}
  .ritual-copy>p:last-child{margin-left:auto;margin-right:auto}
  .actions{justify-content:center}
  .oracle-wrap{margin:2px 0}
  .card{width:min(330px,82vw)}
  .actions .primary{width:min(360px,100%)}
}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}