/* Mirror Cards — single responsive page */
:root{
  --ink:#0D0A12; --cream:#F4EAD6; --text:#EFE4D0; --muted:#B9AC9A; --dim:#877C72;
  --gold:#E9B565; --gold2:#F7B665; --panel:rgba(26,17,20,.82);
  --serif:'Cormorant Garamond','Literata',Georgia,serif; --body:'Literata',Georgia,serif;
  --col:520px; --h1:42px;
  --card-w:52px; --card-h:86px; --cols:6;
  --tray-w:96px; --tray-h:158px;
  --res-w:100px; --res-h:165px;
  --deck-scale:1;
}
@media (min-width:700px){
  :root{ --col:720px; --h1:50px; --card-w:68px; --card-h:112px; --cols:8; --tray-w:120px; --tray-h:197px; --res-w:130px; --res-h:214px; --deck-scale:1.25 }
}
@media (min-width:1100px){
  :root{ --col:820px; --h1:56px; --card-w:84px; --card-h:138px; --tray-w:136px; --tray-h:224px; --res-w:150px; --res-h:247px; --deck-scale:1.4 }
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  min-height:100vh; color:var(--text); font-family:var(--body); -webkit-font-smoothing:antialiased;
  background-color:#0D0A12;
  background-image:radial-gradient(ellipse 90% 34% at 50% 26%,rgba(247,182,101,.10),rgba(247,182,101,0) 70%),radial-gradient(ellipse 130% 70% at 50% 18%,rgba(70,58,110,.30),rgba(70,58,110,0) 70%),url(assets/stars.png);
  background-size:100% 900px,100% 900px,520px 520px; background-repeat:no-repeat,no-repeat,repeat;
  display:flex; flex-direction:column; overflow-x:hidden; position:relative;
}
a{color:var(--gold)} a:hover{color:#F7D49A}
button{font:inherit}
.motif{position:absolute; left:50%; top:150px; width:560px; height:560px; margin-left:-280px; pointer-events:none; transform-origin:50% 30%; transform:scale(var(--deck-scale))}
.brand{position:relative; display:flex; align-items:center; justify-content:center; gap:10px; padding:26px 20px 8px}
.brand span{font-size:15px; font-weight:600; letter-spacing:.32em; color:var(--gold)}
main{position:relative; width:100%; max-width:var(--col); margin:0 auto; padding:22px 20px 40px; text-align:center; flex:1}
.screen{display:none; flex-direction:column; align-items:center; gap:22px; width:100%}
.screen.on{display:flex; animation:akRise .6s ease-out both}
h1{margin:0; font-family:var(--serif); font-size:var(--h1); line-height:1.1; font-weight:500; color:var(--cream)}
h2{margin:0}
.eyebrow{margin:0; font-size:14px; font-weight:600; letter-spacing:.24em; color:var(--muted)}
.lead{margin:0; font-size:18px; line-height:1.6; color:#D9CCB7}
.dots{display:flex; gap:8px; justify-content:center}
.dots span{width:28px; height:3px; border-radius:2px; background:rgba(247,182,101,.25)}
.dots span.on{background:var(--gold)}
.opts{display:flex; flex-direction:column; gap:12px; width:100%; margin-top:4px}
.opt{all:unset; cursor:pointer; box-sizing:border-box; width:100%; min-height:64px; padding:16px 20px; border-radius:2px; border:1px solid rgba(247,182,101,.35); background:rgba(26,17,20,.7); display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:20px; color:var(--cream); text-align:left; transition:border-color .25s,background .25s}
.opt:hover,.opt:focus-visible{border-color:var(--gold); background:rgba(233,181,101,.10)}
.opt i{font-style:normal; font-family:var(--serif); font-size:22px; color:var(--gold)}
.field{display:flex; flex-direction:column; gap:8px; width:100%; text-align:left}
.field label{font-size:15px; letter-spacing:.14em; color:var(--muted)}
.in{width:100%; min-height:60px; padding:16px 18px; border-radius:2px; border:1px solid rgba(247,182,101,.45); background:rgba(26,17,20,.85); color:var(--cream); font:inherit; font-size:20px; outline:none}
.in:focus{border-color:var(--gold); box-shadow:0 0 0 3px rgba(233,181,101,.2)}
.in::placeholder{color:#8F8578}
.btn-line{all:unset; cursor:pointer; box-sizing:border-box; width:100%; max-width:420px; min-height:62px; border-radius:2px; border:1px solid var(--gold); background:rgba(233,181,101,.07); box-shadow:inset 0 0 0 4px var(--ink),inset 0 0 0 5px rgba(233,181,101,.35); color:var(--gold); font-size:17px; font-weight:600; letter-spacing:.24em; text-align:center; padding:18px 20px}
.btn-line[disabled]{opacity:.6; cursor:default}
.btn-gold{all:unset; cursor:pointer; box-sizing:border-box; width:100%; min-height:64px; border-radius:2px; background:var(--gold); box-shadow:inset 0 0 0 4px var(--gold),inset 0 0 0 5px rgba(13,10,18,.35),0 10px 26px -10px rgba(233,181,101,.6); color:var(--ink); font-size:18px; font-weight:600; letter-spacing:.16em; text-align:center; padding:20px}
.link{all:unset; cursor:pointer; min-height:44px; padding:8px 14px; font-size:17px; color:var(--muted); text-decoration:underline}
.btn-line:focus-visible,.btn-gold:focus-visible,.link:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
.hint{margin:0; font-family:var(--serif); font-style:italic; font-size:24px; line-height:1.35; color:#D9CCB7; min-height:32px}

/* deck */
.stage{position:relative; width:350px; height:348px; display:flex; align-items:flex-end; justify-content:center; transform:scale(var(--deck-scale)); transform-origin:50% 100%; margin-top:calc((var(--deck-scale) - 1) * 348px)}
.deck{position:relative; width:170px; height:318px}
.layer{position:absolute; left:0; bottom:0; width:170px; height:280px}
.layer .ak-back{width:170px; height:280px; overflow:hidden; position:relative}
.glint{position:absolute; top:-40px; left:0; width:50px; height:370px; background:linear-gradient(90deg,rgba(255,240,200,0),rgba(255,240,200,.7),rgba(255,240,200,0)); opacity:0}
.ground{position:absolute; left:-55px; bottom:-26px; width:280px; height:70px; border-radius:50%; background:radial-gradient(ellipse at center,rgba(247,182,101,.16),rgba(247,182,101,0) 70%); transition:opacity .4s}

/* cards */
.ak-back{background-color:#1A1114; background-image:url(assets/grain.png),linear-gradient(118deg,rgba(255,236,200,0) 30%,rgba(255,236,200,.07) 46%,rgba(255,236,200,0) 62%),url(assets/card-back.svg); background-size:150px 150px,100% 100%,100% 100%; background-repeat:repeat,no-repeat,no-repeat; background-position:0 0,center,center; border-radius:2.25%/1.37%}
.ak-face{position:relative; color:var(--text); background-color:#1A1114; background-image:url(assets/grain.png),radial-gradient(ellipse at 50% 45%,rgba(247,182,101,.12),rgba(247,182,101,0) 70%); background-size:150px 150px,100% 100%; border-radius:2.25%/1.37%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:12px 8px; text-align:center}
.ak-face::before{content:""; position:absolute; inset:5px; border:1px solid rgba(247,182,101,.75); border-radius:2px; pointer-events:none}
.ak-face .num{font-family:var(--serif); font-weight:600; color:var(--gold2); font-size:calc(var(--tray-w) * .28)}
.ak-face .nm{font-family:var(--serif); font-weight:600; line-height:1.15; font-size:calc(var(--tray-w) * .17)}
.ak-sh-stack{box-shadow:0 .8px 0 #C99748,0 1.8px 1px rgba(0,0,0,.7)}
.ak-sh-air{box-shadow:0 .8px 0 #C99748,0 2px 3px rgba(0,0,0,.4),0 14px 20px -10px rgba(0,0,0,.6)}
.ak-sh-table{box-shadow:inset 0 0 0 .5px rgba(247,182,101,.22),0 .5px 1px rgba(0,0,0,.6),0 2px 3px rgba(0,0,0,.35),0 16px 24px -10px rgba(0,0,0,.55)}
.ak-sh-lift{box-shadow:inset 0 0 0 .5px rgba(247,182,101,.3),0 1px 2px rgba(0,0,0,.5),0 10px 16px -2px rgba(0,0,0,.35),0 0 26px rgba(247,182,101,.14)}
.pick{border:0; padding:0; margin:0; cursor:pointer; display:block; width:var(--card-w); height:var(--card-h); transition:transform .25s,box-shadow .25s,opacity .5s}
.pick:hover,.pick:focus-visible{transform:translateY(-5px) rotate(-.6deg); box-shadow:inset 0 0 0 .5px rgba(247,182,101,.35),0 1px 2px rgba(0,0,0,.6),0 24px 34px -14px rgba(0,0,0,.7),0 0 22px rgba(247,182,101,.12); outline:none}
.hole{width:var(--card-w); height:var(--card-h); border:1px dashed rgba(247,182,101,.7); border-radius:3px; display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:calc(var(--card-w) * .35); font-weight:600; color:var(--gold)}
.grid{display:grid; grid-template-columns:repeat(var(--cols),var(--card-w)); justify-content:center; gap:10px 6px; width:100%}
@media (min-width:700px){.grid{gap:16px 12px}}
.grid > div{display:flex; justify-content:center}

/* tray */
.tray{display:flex; justify-content:center; gap:14px; width:100%}
@media (min-width:700px){.tray{gap:32px}}
.slot{display:flex; flex-direction:column; align-items:center; gap:8px}
.slot .lab{font-family:var(--serif); font-style:italic; font-size:calc(var(--tray-w) * .19); font-weight:600; color:#8F8578}
.slot.cur .lab{color:var(--cream)} .slot.done .lab{color:var(--gold)}
.slot .empty{width:var(--tray-w); height:var(--tray-h); border:1px dashed rgba(247,182,101,.32); border-radius:4px; background:rgba(247,182,101,.03); display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:calc(var(--tray-w) * .35); font-weight:600; color:rgba(247,182,101,.32); transition:border-color .3s,color .3s}
.slot.cur .empty{border-color:rgba(247,182,101,.85); color:rgba(247,182,101,.85)}
.slot .ak-face{width:var(--tray-w); height:var(--tray-h)}

/* reading */
.reading{display:flex; flex-direction:column; gap:22px; width:100%; text-align:left}
.reading-head{display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center}
.divider{display:flex; align-items:center; justify-content:center; gap:12px}
.divider span{width:56px; height:1px; background:rgba(233,181,101,.45)}
.res-cards{display:flex; gap:10px; justify-content:center}
@media (min-width:700px){.res-cards{gap:24px}}
.res-card{display:flex; flex-direction:column; align-items:center; gap:8px}
.res-card .lab{font-family:var(--serif); font-style:italic; font-size:calc(var(--res-w) * .18); font-weight:600; color:var(--gold)}
.res-card .ak-face{width:var(--res-w); height:var(--res-h)}
.res-card .ak-face .num{font-size:calc(var(--res-w) * .24)} .res-card .ak-face .nm{font-size:calc(var(--res-w) * .16)}
.panel{position:relative; overflow:hidden; display:flex; flex-direction:column; gap:10px; padding:22px 20px; color:var(--text); background-color:var(--panel); background-image:url(assets/grain.png); background-size:150px 150px; border:1px solid rgba(247,182,101,.24); border-radius:3px}
.panel.strong{border-color:rgba(247,182,101,.45)}
.panel-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap}
.panel h2{font-family:var(--serif); font-size:26px; font-weight:600; line-height:1.2; color:var(--cream)}
.panel h2 em{color:var(--gold)}
.panel p{margin:0; font-size:20px; line-height:1.7}
.panel ol{margin:0; padding-left:24px; display:flex; flex-direction:column; gap:10px; font-size:19px; line-height:1.6}
.locktag{display:none; align-items:center; gap:6px; font-size:13px; letter-spacing:.14em; color:var(--gold)}
.lock{filter:blur(5px); user-select:none; -webkit-user-select:none; pointer-events:none}
.unlock-over{display:none; position:absolute; inset:0; align-items:center; justify-content:center; padding-top:34px; text-decoration:none; background:linear-gradient(180deg,rgba(13,10,18,0) 30%,rgba(13,10,18,.45) 100%)}
.unlock-over span{display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:12px 20px; border-radius:2px; background:var(--gold); color:var(--ink); font-size:15px; font-weight:600; letter-spacing:.16em; box-shadow:0 8px 22px rgba(0,0,0,.45)}
.panel.locked .locktag{display:inline-flex}
.panel.locked .unlock-over{display:flex}
.sticky{position:sticky; bottom:14px; z-index:30; display:flex; align-items:center; justify-content:center; min-height:60px; padding:16px 20px; border-radius:2px; background:var(--gold); color:var(--ink); font-size:17px; font-weight:600; letter-spacing:.14em; text-decoration:none; box-shadow:0 14px 30px rgba(0,0,0,.55); transition:opacity .25s}
.sticky.off{opacity:0; pointer-events:none}
.offer{display:flex; flex-direction:column; gap:16px; padding:26px 20px; border:1.5px solid var(--gold); border-radius:3px; background:rgba(233,181,101,.08); box-shadow:0 0 34px rgba(247,182,101,.14)}
.offer h2{text-align:center; font-family:var(--serif); font-size:32px; font-weight:500; line-height:1.15; color:var(--cream)}
.offer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; font-size:18px; line-height:1.5}
.offer li{display:flex; gap:10px}
.offer li svg{flex:none; margin-top:3px}
.offer .guarantee{margin:0; text-align:center; font-size:16px; line-height:1.55; color:#D9CCB7}
.offer .guarantee strong{color:var(--cream)}
.offer .fine{margin:0; text-align:center; font-size:14px; line-height:1.55; color:var(--muted)}
.note{margin:0; padding:14px 16px; border:1px dashed rgba(185,172,154,.6); border-radius:3px; font-size:16px; line-height:1.5; color:#D9CCB7}
details.about{align-self:center; text-align:center; max-width:100%}
details.about summary{cursor:pointer; min-height:44px; display:inline-flex; align-items:center; gap:8px; padding:10px 6px; list-style:none; font-size:13px; letter-spacing:.12em; color:var(--dim); text-decoration:underline}
details.about summary::-webkit-details-marker{display:none}
details.about p{margin:0; padding:4px 4px 14px; font-size:15px; line-height:1.6; color:#9C9184; text-align:left}
.after{display:none; flex-direction:column; gap:12px; align-items:center}
.reading.unlocked .after{display:flex}
.reading.unlocked .offer,.reading.unlocked .sticky{display:none}

footer{position:relative; padding:18px 20px 28px; text-align:center; color:var(--dim); line-height:1.6}
footer .disc{margin:0 0 10px; font-size:12px; letter-spacing:.16em}
footer nav{display:flex; gap:6px 16px; justify-content:center; flex-wrap:wrap; font-size:13px}
footer nav a{color:var(--dim)}

/* motion */
@keyframes akBreathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes akJog{0%{transform:scale(1)}35%{transform:scale(1.04) translateY(-4px)}70%{transform:scale(.99)}100%{transform:scale(1)}}
@keyframes akGlint{0%{opacity:0;transform:translateX(-120%) rotate(18deg)}40%{opacity:.55}100%{opacity:0;transform:translateX(220%) rotate(18deg)}}
@keyframes akDeal{from{opacity:0;transform:translateY(-220px) scale(.6) rotate(-8deg)}to{opacity:1;transform:none}}
@keyframes akFlip{0%{transform:perspective(900px) rotateY(90deg) scale(.9);opacity:.3}60%{transform:perspective(900px) rotateY(-8deg) scale(1.03);opacity:1}100%{transform:perspective(900px) rotateY(0) scale(1);opacity:1}}
@keyframes akRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes akOrbit{to{transform:rotate(360deg)}}
.ak-orbit{animation:akOrbit 240s linear infinite; transform-origin:50% 50%}
.ak-breathe{animation:akBreathe 3.6s ease-in-out infinite}
.ak-jog{animation:akJog .3s ease-out}
.ak-glint{animation:akGlint .9s ease-out both}
.ak-deal{animation:akDeal .6s cubic-bezier(.2,.7,.2,1) both}
.ak-flip{animation:akFlip .8s cubic-bezier(.2,.7,.2,1) both}
.ak-rise{animation:akRise .8s ease-out both}
@media (prefers-reduced-motion:reduce){.pick:hover{transform:none}.ak-orbit,.ak-breathe,.ak-jog,.ak-deal,.ak-flip,.ak-rise,.screen.on{animation:none}.layer{transition:none!important}}

/* print / save as PDF */
@media print{
  body{background:#fff; color:#111}
  .motif,.brand,footer,.screen:not(#s-reading),.offer,.sticky,.after .btn-line,details.about,.res-cards,.note{display:none!important}
  .panel{background:#fff; border:1px solid #ccc; color:#111; break-inside:avoid}
  .panel h2,.panel h2 em,h1{color:#111}
  .lock{filter:none}
  .reading-head .eyebrow{color:#555}
}