/* Cosmic Bakery front door: the Oracle pull */
:root{
  --paper:#fbf7ec; --ink:#241f1a;
  --magenta:#d81b8c; --purple:#7b3ea8; --violet:#a26fd6;
  --green:#7cc242; --yellow:#f5c518;
  --deep:#120e24;
  --cw:clamp(92px, 11.5vw, 146px);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--deep); color:var(--paper); overflow:hidden;
  font-family:"Outfit",ui-sans-serif,system-ui,sans-serif;
}
body::before{
  content:""; position:fixed; inset:-6%; z-index:0;
  background:url("assets/cosmos.jpg") center/cover no-repeat;
  animation:drift 60s ease-in-out infinite alternate;
}
body::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%, transparent 28%, rgba(10,7,22,.74) 78%);
}
@keyframes drift{to{transform:scale(1.16) translate(2.5%,-2%)}}
img{display:block; max-width:100%}

.stage{position:relative; z-index:2; height:100dvh; display:grid; place-items:center; padding:16px}
.scene{display:none; flex-direction:column; align-items:center; text-align:center; width:100%}
.scene.on{display:flex; animation:rise .55s cubic-bezier(.2,.9,.3,1) both}
@keyframes rise{from{opacity:0; transform:translateY(16px)}}
.scene.leaving{animation:dissolve .5s ease forwards}
@keyframes dissolve{to{opacity:0; transform:scale(1.04); filter:blur(6px)}}

/* the Cosmic Sloth and what it says */
.sloth{width:min(240px,40vw); filter:drop-shadow(0 0 40px rgba(170,130,255,.45));
  animation:bob 5.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-11px) rotate(2deg)}}
.sloth.small{width:min(78px,15vw)}

.bubble{
  position:relative; background:#fff; color:var(--purple); border:3px solid #12101c;
  font-family:"Caveat",cursive; font-weight:700; line-height:1.08;
  font-size:clamp(23px,3.6vw,40px); padding:13px 26px 11px; margin:0 0 22px;
  min-height:calc(2.16em + 24px); display:grid; place-items:center;
  max-width:min(660px,92vw);
  border-radius:230px 20px 210px 22px/22px 210px 20px 230px;
  box-shadow:6px 7px 0 #12101c, 0 0 60px rgba(150,110,240,.35);
}
.bubble::after{content:""; position:absolute; left:50%; bottom:-19px; translate:-50% 0;
  width:26px; height:26px; background:#fff;
  border-right:3px solid #12101c; border-bottom:3px solid #12101c;
  transform:rotate(38deg) skew(-6deg)}
.bubble.swap{animation:swap .45s cubic-bezier(.2,1.2,.4,1)}
@keyframes swap{from{opacity:0; transform:translateY(10px) scale(.94)}}

.choices{display:flex; gap:16px; margin-top:30px; flex-wrap:wrap; justify-content:center}
.btn{border:3px solid #12101c; cursor:pointer; font-family:"Caveat",cursive; font-weight:700;
  font-size:clamp(21px,2.5vw,29px); padding:9px 38px; color:var(--ink);
  background:var(--yellow); border-radius:210px 15px 195px 17px/17px 195px 15px 210px;
  transition:.16s; text-decoration:none; display:inline-block}
.btn:hover{transform:translateY(-3px) rotate(-1deg); box-shadow:6px 7px 0 #12101c}
.btn.no{background:#fff; color:var(--purple)}
.btn.go{background:var(--green)}

/* the fan. Each card is placed on an arc computed in JS, so the spread always
   fits the viewport instead of depending on a transform-origin far off-screen. */
.fanwrap{position:relative; width:100%; height:var(--fanh,340px); perspective:1500px; margin-top:2px}
.slot{
  position:absolute; left:50%; top:0; width:var(--cw); aspect-ratio:820/1231;
  margin-left:calc(var(--cw) / -2);
  transform-origin:50% 50%;
  transform:translate(var(--x), calc(var(--y) + var(--lift,0px))) rotate(var(--a));
  transition:transform .55s cubic-bezier(.2,.9,.3,1), opacity .5s ease, filter .3s ease;
  cursor:pointer;
}
.slot.dealing{transform:translate(0px, 130%) rotate(0deg) scale(.72); opacity:0}
.slot:hover{--lift:-30px; z-index:60; filter:drop-shadow(0 0 26px rgba(190,150,255,.85))}
.flipper{position:relative; width:100%; height:100%; transform-style:preserve-3d;
  transition:transform .85s cubic-bezier(.3,.9,.3,1)}
.face{position:absolute; inset:0; border-radius:13px; overflow:hidden;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  box-shadow:0 10px 26px rgba(0,0,0,.55), 0 0 0 2px rgba(255,255,255,.14) inset}
.face img{width:100%; height:100%; object-fit:cover}
.face.front{transform:rotateY(180deg); background:#0d0a18}
.slot.scatter{opacity:0; pointer-events:none;
  transform:translate(calc(var(--x) * 1.7), calc(var(--y) - 60px)) rotate(var(--a)) scale(.82)}
.slot.chosen{z-index:200; cursor:default;
  transform:translate(0px, var(--cy,10px)) rotate(0deg) scale(var(--csc,1.5))}
.slot.chosen.turn .flipper{transform:rotateY(180deg)}
.hint{font-family:"Caveat",cursive; font-size:clamp(19px,2.3vw,26px); color:#cbbbf0;
  margin:12px 0 0; opacity:.9}

/* the reveal */
.revealwrap{display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(18px,3vw,34px);
  align-items:center; text-align:left; max-width:min(860px,94vw)}
.revealtext{max-width:52ch}
.revealacts{display:flex; flex-direction:column; align-items:center; gap:8px; margin-top:22px}
.revealcard{width:min(280px,60vw); aspect-ratio:820/1231; border-radius:15px; overflow:hidden;
  box-shadow:0 22px 60px rgba(0,0,0,.6), 0 0 70px rgba(160,120,255,.4);
  animation:land .7s cubic-bezier(.2,1.1,.35,1) both}
@keyframes land{from{opacity:0; transform:translateY(26px) scale(.9)}}
.revealcard img{width:100%; height:100%; object-fit:cover}
.cardno{font-family:"Caveat",cursive; font-size:19px; color:#a99bc9; margin:12px 0 0}

/* the store placeholder */
.store{max-width:min(760px,92vw)}
.store h1{font-family:"Caveat",cursive; font-size:clamp(36px,6.6vw,68px); margin:0 0 4px; color:#fff}
.store .sub{font-family:"Caveat",cursive; font-size:clamp(20px,2.9vw,29px); color:var(--violet); margin:0 0 24px}
.doors{display:flex; flex-direction:column; gap:12px; align-items:center}
.pulled{margin-top:24px; display:flex; align-items:center; gap:14px; justify-content:center;
  background:rgba(255,255,255,.06); border:2px solid rgba(255,255,255,.18);
  padding:11px 18px; border-radius:14px}
.pulled img{width:50px; border-radius:5px}
.pulled span{font-family:"Caveat",cursive; font-size:20px; color:#d8cbf5}
.note{margin-top:24px; font-size:12.5px; color:#8f84ab}
.note code{background:rgba(255,255,255,.09); padding:2px 6px; border-radius:4px}

@media (max-width:700px){
  .bubble{padding:13px 20px 11px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.14s !important}
  body::before{animation:none}
}

/* --- polish --- */
/* a hair of light on each card edge so 44 overlapping backs still read as cards */
.face.back{box-shadow:0 8px 22px rgba(0,0,0,.45), 0 0 0 1.5px rgba(255,255,255,.34) inset}
/* the reveal deserves a proper matte and glow */
.revealcard{background:#fff; padding:7px; border-radius:16px}
.revealcard img{border-radius:10px}
.revealwrap{filter:drop-shadow(0 0 60px rgba(150,110,240,.45))}
.cardno{letter-spacing:.04em}
/* display:flex on .pulled/.choices would otherwise beat the hidden attribute */
[hidden]{display:none !important}

/* --- starfield + a calmer, deeper sky --- */
#stars{position:fixed; inset:0; z-index:1; pointer-events:none; width:100%; height:100%}
body{background:#0a0a1c}
body::after{
  background:radial-gradient(ellipse at 50% 42%, transparent 24%, rgba(6,6,20,.80) 82%),
             linear-gradient(180deg, rgba(8,10,28,.45), transparent 40%, rgba(6,5,18,.6));
}

/* --- directions --- */
.steps{display:flex; gap:clamp(14px,3vw,34px); justify-content:center; margin-top:6px; min-height:1.4em}
.step{font-family:"Caveat",cursive; font-weight:700; font-size:clamp(24px,3.2vw,38px);
  color:#e6dcff; opacity:0; transform:translateY(10px);
  text-shadow:0 0 26px rgba(150,110,240,.85)}
.step.in{animation:stepIn 1.05s cubic-bezier(.2,.9,.3,1) forwards}
@keyframes stepIn{45%{opacity:1; transform:translateY(0) scale(1.04)}
                  100%{opacity:.92; transform:translateY(0) scale(1)}}

/* --- the cards arrive, rather than being flicked out --- */
.slot{transition:transform 1.15s cubic-bezier(.16,.84,.28,1),
                opacity .95s ease, filter .55s ease}
.slot.dealing{transform:translate(0px, 34px) rotate(0deg) scale(.86);
  opacity:0; filter:blur(7px)}
.slot:hover{--lift:-34px; z-index:60;
  filter:drop-shadow(0 0 30px rgba(200,165,255,.95)) brightness(1.06)}
.fanwrap{animation:breathe 9s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:translateY(0) scale(1)}
                   50%{transform:translateY(-7px) scale(1.006)}}
/* a soft light passes across the arc once it has settled */
.fanwrap::after{content:""; position:absolute; inset:-8% -12%; pointer-events:none; opacity:0;
  background:linear-gradient(105deg, transparent 34%, rgba(255,255,255,.30) 50%, transparent 66%);
  mix-blend-mode:screen}
.fanwrap.shimmer::after{animation:sweep 1.5s ease-out 1}
@keyframes sweep{0%{opacity:0; transform:translateX(-38%)}
                 30%{opacity:1} 100%{opacity:0; transform:translateX(38%)}}

.hint{opacity:0; transition:opacity .9s ease}
.hint.in{opacity:.9}
#steps{transition:opacity .6s ease}

/* draft-only: start the whole thing over without touching the URL */
.draftbtn{display:inline-block; cursor:pointer; font-family:"Caveat",cursive; font-weight:700;
  font-size:20px; color:#dcd0ff; background:rgba(255,255,255,.10);
  border:2px solid rgba(255,255,255,.34); padding:7px 20px; border-radius:99px;
  transition:.16s; margin-top:6px}
.draftbtn:hover{background:rgba(255,255,255,.20); color:#fff; border-color:#fff}

/* --- the breath: one slow cycle you actually wait through --- */
.ritual{display:flex; flex-direction:column; align-items:center; gap:12px; min-height:112px;
  justify-content:center; overflow:hidden;
  transition:opacity .7s ease, min-height .8s ease, max-height .8s ease, margin .8s ease}
.ritual.gone{opacity:0; min-height:0; max-height:0; margin:0; pointer-events:none}
.breath{width:104px; height:104px; border-radius:50%; display:grid; place-items:center;
  transform:scale(.46); opacity:0;
  background:radial-gradient(circle at 50% 50%,
    rgba(255,246,214,.92) 0%, rgba(214,178,255,.42) 46%, rgba(150,110,240,.12) 70%, transparent 76%);
  box-shadow:0 0 70px rgba(180,140,255,.55)}
.breath.go{animation:breathcycle 4.0s cubic-bezier(.45,0,.55,1) forwards}
@keyframes breathcycle{
  0%{transform:scale(.46); opacity:0}
  8%{opacity:1}
  50%{transform:scale(1.18); opacity:1}
  92%{transform:scale(.52); opacity:.85}
  100%{transform:scale(.5); opacity:0}
}
.breathword{font-family:"Caveat",cursive; font-size:21px; color:#3a2a55; font-weight:700;
  opacity:.85; letter-spacing:.02em}
.steps .step{opacity:0}
.step.in{animation:stepIn 1.1s cubic-bezier(.2,.9,.3,1) forwards}
@keyframes stepIn{40%{opacity:1; transform:translateY(0) scale(1.05)}
                  100%{opacity:.9; transform:translateY(0) scale(1)}}
/* the sloth breathes along with it */
.sloth.breathing{animation:slothbreath 4.0s cubic-bezier(.45,0,.55,1) 1}
@keyframes slothbreath{0%,100%{transform:scale(1)} 50%{transform:scale(1.13)}}

/* the way out stays out of sight until the card has had its moment */
.waiting{opacity:0; pointer-events:none; transform:translateY(8px)}
#sReveal .btn.go, #sReveal .again{transition:opacity .9s ease, transform .9s ease}

/* --- the deck as a stack you press and hold to shuffle --- */
.slot.stacked{transform:translate(var(--sx,0px), var(--sy,0px)) rotate(var(--sa,0deg))}
.fanwrap.riffling .slot.stacked{transition:none}
.slot.stacked{transition:transform .55s cubic-bezier(.2,.9,.3,1)}
.holdcue{position:absolute; left:50%; top:var(--cuetop,300px); bottom:auto; translate:-50% 0; text-align:center;
  font-family:"Caveat",cursive; font-size:clamp(19px,2.3vw,25px); color:#d6c9f5;
  pointer-events:none; transition:opacity .5s ease; text-shadow:0 0 20px rgba(0,0,0,.7)}
.holdring{position:absolute; left:50%; top:var(--ringtop,46%); translate:-50% -50%;
  width:var(--ringsize,210px); height:var(--ringsize,210px);
  border-radius:50%; border:2px dashed rgba(190,160,255,.4); pointer-events:none;
  opacity:0; transition:opacity .4s ease}
.fanwrap.holdmode .holdring{opacity:1; animation:spin 14s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.fanwrap.riffling .holdring{border-color:rgba(255,224,150,.9); animation-duration:3.4s;
  box-shadow:0 0 46px rgba(255,214,140,.30), inset 0 0 40px rgba(255,214,140,.14)}
.fanwrap.riffling .face.back{box-shadow:0 8px 22px rgba(0,0,0,.45),
  0 0 0 1.5px rgba(255,235,190,.5) inset}
.deckpad{position:absolute; inset:0; cursor:grab; z-index:150}
.fanwrap.riffling .deckpad{cursor:grabbing}
.fanwrap.opened .deckpad,.fanwrap.opened .holdring,.fanwrap.opened .holdcue{display:none}

.cardtitle{font-family:"Caveat",cursive; font-weight:700; font-size:clamp(23px,3vw,32px);
  color:#fff; margin:2px 0 0; max-width:min(430px,86vw); line-height:1.18;
  text-shadow:0 0 28px rgba(150,110,240,.75)}

/* the guidebook, under the card */

.cardmeaning{font-size:15px; line-height:1.66; color:#d3cae9; margin:0}
.cardprompt{font-family:"Caveat",cursive; font-size:clamp(20px,2.4vw,26px); color:#ffe6a6;
  margin:14px 0 0; line-height:1.28; text-shadow:0 0 24px rgba(255,200,90,.35)}
.revealcard{width:clamp(170px,21vw,250px)}


.cardtitle{display:none}
/* a long guidebook entry may need room; let the reveal scroll rather than clip */
#sReveal{max-height:100dvh; overflow-y:auto; overflow-x:hidden; padding:12px 4px}
#sReveal::-webkit-scrollbar{width:8px}
#sReveal::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22); border-radius:8px}
@media (max-width:820px){
  .revealwrap{grid-template-columns:1fr; justify-items:center; text-align:center}
  .revealtext{max-width:44ch}
}

/* the bubble in the reveal was pointing at nothing, so the Sloth comes along */
.sloth.tiny{width:min(64px,13vw); margin:-6px 0 10px}

/* ============================================================
   Coming inside: the cosmos gives way to the Cosmic Bakery.
   Same palette and hand-drawn furniture as cosmicbakery.xyz,
   so the front door and the shop feel like one place.
   ============================================================ */
body.inside{background:#fbf7ec}
body.inside::before{opacity:.12; filter:saturate(.5)}
body.inside::after{
  background:radial-gradient(ellipse at 50% 8%, rgba(226,209,175,.55), transparent 46%),
             radial-gradient(ellipse at 88% 86%, rgba(214,196,232,.42), transparent 50%)}
body.inside #stars{opacity:0}
body::before,body::after{transition:opacity .9s ease, filter .9s ease, background .9s ease}
#stars{transition:opacity .9s ease}

.storesloth{width:min(158px,28vw); margin:0 auto 4px;
  filter:drop-shadow(0 14px 22px rgba(60,40,15,.26));
  animation:bob 5.4s ease-in-out infinite}
.store h1{color:#241f1a}
.store .sub{color:#7b3ea8}
body.inside .btn{border-color:#241f1a; color:#241f1a}
body.inside .btn.no{background:#fff; color:#7b3ea8}
body.inside .btn:hover{box-shadow:6px 7px 0 #241f1a}
body.inside .draftbtn{color:#5b5148; background:rgba(36,31,26,.06); border-color:rgba(36,31,26,.3)}
body.inside .draftbtn:hover{background:rgba(36,31,26,.14); color:#241f1a; border-color:#241f1a}
.playline{font-family:"Caveat",cursive; font-weight:700; color:#241f1a; margin:30px 0 0;
  font-size:clamp(22px,3.2vw,34px)}
.latinline{font-family:"Caveat",cursive; font-style:italic; color:#7b3ea8; margin:2px 0 0;
  font-size:clamp(16px,2vw,21px)}
body.inside .note{color:#8b8172}

/* a bigger Cosmic Sloth throughout: it is the guide, not a bullet point */
.sloth{width:min(300px,48vw)}
.sloth.small{width:min(112px,21vw)}
.sloth.tiny{width:min(84px,16vw)}

/* the shop can be taller than the window on small screens, so let it scroll */
#sStore{max-height:100dvh; overflow-y:auto; overflow-x:hidden; padding:18px 6px}
#sStore::-webkit-scrollbar{width:8px}
#sStore::-webkit-scrollbar-thumb{background:rgba(36,31,26,.2); border-radius:8px}
.store .doors{margin-top:4px}
.playline{margin-top:24px}