/* ══ SENRA · tarot ═════════════════════════════════════════ */

.tarot-shell{ max-width:1180px; margin:0 auto; }
.t-step{ animation:stepIn .8s var(--ease-out) both; }
.t-step-in{ animation:stepIn .8s var(--ease-out) both; }
@keyframes stepIn{ from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none} }

/* ── spread chooser ────────────────────────────────────────────── */
.spread-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(214px,1fr));
  gap:1px; background:var(--hair); border:1px solid var(--hair); margin-bottom:44px;
}
.spread-card{
  position:relative; background:rgba(11,11,19,.5); border:0; cursor:pointer;
  padding:20px 18px 18px; text-align:left; color:inherit; font-family:inherit;
  display:flex; flex-direction:column; gap:12px; overflow:hidden;
  transition:background .55s var(--ease);
}
.spread-card::after{
  content:''; position:absolute; inset:0; opacity:0; pointer-events:none;
  background:radial-gradient(300px 180px at 50% 0%, rgba(142,125,208,.16), transparent 70%);
  transition:opacity .6s;
}
.spread-card:hover{ background:rgba(20,20,34,.72); }
.spread-card:hover::after{ opacity:1; }
.spread-card.is-on{ background:rgba(24,22,42,.85); }
.spread-card.is-on::after{ opacity:1; }
.spread-card.is-on::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:1px;
  background:linear-gradient(180deg,var(--violet),transparent);
}
.sc-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.sc-num{ font-family:var(--serif); font-size:10px; letter-spacing:.3em; color:var(--violet); }
.sc-count{
  font-size:8.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--silver-4);
  border:1px solid var(--hair); padding:2px 7px; white-space:nowrap;
}
.sc-diagram{
  position:relative; height:74px; width:100%; margin:2px 0 4px;
}
.sc-diagram svg{ width:100%; height:100%; overflow:visible; }
.sc-slot{
  fill:rgba(226,229,242,.05); stroke:var(--silver-4); stroke-width:.7;
  vector-effect:non-scaling-stroke; transition:fill .5s, stroke .5s;
}
.spread-card:hover .sc-slot,.spread-card.is-on .sc-slot{
  fill:rgba(142,125,208,.14); stroke:var(--violet);
}
.sc-name{
  font-family:var(--serif); font-size:19px; font-weight:300; color:var(--silver);
  line-height:1.25; letter-spacing:-.005em;
}
.sc-desc{ font-size:10.5px; color:var(--silver-4); line-height:1.6; letter-spacing:.03em; }

.method-row{ text-align:center; border-top:1px solid var(--hair); padding-top:30px; }
.method-label{
  margin:0 0 16px; font-size:9px; letter-spacing:.32em; text-transform:uppercase; color:var(--silver-4);
}

/* ── ritual / shuffle ──────────────────────────────────────────── */
.ritual-stage{
  position:relative; height:clamp(240px,38vh,340px);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:26px;
  margin-bottom:34px;
}
.deck-stack{
  position:relative; width:132px; height:222px; cursor:pointer;
  transition:transform .6s var(--ease-out);
}
.deck-stack:hover{ transform:translateY(-5px); }
.deck-stack:active{ transform:translateY(1px) scale(.99); }
.ds-card{
  position:absolute; inset:0; border-radius:3px;
  background:linear-gradient(157deg,#151428 0%,#0c0c16 52%,#1a182f 100%);
  border:1px solid var(--hair-2);
  box-shadow:0 12px 34px -14px rgba(0,0,0,.9);
  transform:translate(var(--dx,0),var(--dy,0)) rotate(var(--dr,0deg));
  transition:transform .7s var(--ease-out);
}
.ds-card:last-child{ box-shadow:0 18px 46px -16px rgba(0,0,0,.95), 0 0 40px -18px rgba(142,125,208,.5); }
/* the shuffle settles nothing, so it is quick: a split, a bridge, a
 * squaring up — one and a third seconds, cards leaving a beat apart */
.deck-stack.is-shuffling .ds-card{
  animation:riffle 1.32s var(--ease) both; animation-delay:var(--sd,0s);
}
@keyframes riffle{
  0%{   transform:translate(var(--dx),var(--dy)) rotate(var(--dr)); }
  16%{  transform:translate(calc(var(--dx) - 54px),calc(var(--dy) - 14px)) rotate(-14deg); }
  34%{  transform:translate(calc(var(--dx) + 48px),calc(var(--dy) - 4px)) rotate(12.5deg); }
  52%{  transform:translate(calc(var(--dx) - 24px),calc(var(--dy) + 11px)) rotate(-6deg); }
  70%{  transform:translate(calc(var(--dx) + 15px),calc(var(--dy) - 7px)) rotate(4deg); }
  86%{  transform:translate(calc(var(--dx) - 5px),calc(var(--dy) + 2px)) rotate(-1.4deg); }
  100%{ transform:translate(var(--dx),var(--dy)) rotate(var(--dr)); }
}
.deck-stack.is-shuffling .ds-mark{ animation:markDim 1.32s var(--ease) both; }
@keyframes markDim{
  0%{ opacity:1; } 30%{ opacity:.12; } 74%{ opacity:.3; } 100%{ opacity:1; }
}
body[data-motion="calm"] .deck-stack.is-shuffling .ds-card,
body[data-motion="calm"] .deck-stack.is-shuffling .ds-mark{ animation-duration:.42s; }
.ds-mark{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.ds-mark svg{ width:66%; height:66%; opacity:.62; }

.cut-line{ width:min(420px,80vw); text-align:center; }
.cut-line input[type=range]{
  width:100%; -webkit-appearance:none; appearance:none; height:1px;
  background:linear-gradient(90deg,var(--violet-3),var(--silver-4)); outline:none;
}
.cut-line input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:12px; height:12px; border-radius:50%;
  background:var(--silver); border:1px solid var(--violet);
  box-shadow:0 0 14px rgba(183,169,255,.8); cursor:pointer;
}
.cut-line input[type=range]::-moz-range-thumb{
  width:12px; height:12px; border-radius:50%; background:var(--silver);
  border:1px solid var(--violet); cursor:pointer;
}
.cut-read{
  margin-top:12px; font-size:9px; letter-spacing:.26em; text-transform:uppercase; color:var(--silver-4);
}
.cut-read b{ color:var(--glow); font-weight:400; font-family:var(--serif); font-size:13px; }

.ritual-actions{
  display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap;
}
.res-actions{ margin-top:38px; }

/* ── fan (pick) ────────────────────────────────────────────────── */
.fan-wrap{
  position:relative; height:clamp(280px,42vh,400px); margin-bottom:26px;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.fan{ position:relative; width:100%; height:100%; }
.fan-card{
  position:absolute; left:50%; bottom:6%;
  width:clamp(58px,7.4vw,84px); height:clamp(100px,12.8vw,146px);
  margin-left:calc(clamp(58px,7.4vw,84px) / -2);
  border-radius:3px; border:1px solid var(--hair-2); cursor:pointer; padding:0;
  background:linear-gradient(157deg,#141327 0%,#0b0b14 54%,#191830 100%);
  transform-origin:50% 140%;
  transform:rotate(var(--a)) translateY(0);
  transition:transform .6s var(--ease-out), box-shadow .5s, border-color .5s, opacity .6s;
  box-shadow:0 10px 26px -14px rgba(0,0,0,.9);
  animation:fanIn .9s var(--ease-out) both; animation-delay:var(--d);
}
@keyframes fanIn{
  from{ transform:rotate(0deg) translateY(70px); opacity:0; }
  to{ transform:rotate(var(--a)) translateY(0); opacity:1; }
}
.fan-card::after{
  content:''; position:absolute; inset:5px; border:1px solid rgba(226,229,242,.06);
  border-radius:2px;
}
.fan-card:hover{
  transform:rotate(var(--a)) translateY(-24px);
  border-color:var(--hair-v);
  box-shadow:0 18px 40px -14px rgba(0,0,0,.95), 0 0 30px -8px rgba(142,125,208,.55);
  z-index:5;
}
.fan-card.is-taken{
  opacity:0; pointer-events:none;
  transform:rotate(var(--a)) translateY(-140px) scale(.7);
}
.pick-dots{ display:flex; justify-content:center; gap:7px; margin-bottom:18px; }
.pd{ width:5px; height:5px; border:1px solid var(--silver-4); border-radius:50%; transition:all .5s; }
.pd.is-on{ background:var(--glow); border-color:var(--glow); box-shadow:0 0 10px var(--glow); }

/* ── result board ──────────────────────────────────────────────── */
.board-wrap{ position:relative; width:100%; overflow-x:auto; padding:6px 0 10px; }
.board{
  position:relative; margin:0 auto;
  width:min(100%,var(--bw,900px)); aspect-ratio:var(--bar,16/9);
  min-width:var(--bmin,320px);
}

.card{
  position:absolute; left:calc(var(--x) * 1%); top:calc(var(--y) * 1%);
  width:var(--cw,13%); aspect-ratio:.6;
  transform:translate(-50%,-50%) rotate(var(--r,0deg));
  background:none; border:0; padding:0; cursor:pointer;
  perspective:1200px;
  animation:dealIn .8s var(--ease-out) both; animation-delay:var(--d,0s);
}
@keyframes dealIn{
  from{ opacity:0; transform:translate(-50%,calc(-50% + 34px)) rotate(var(--r)) scale(.86); }
  to{ opacity:1; transform:translate(-50%,-50%) rotate(var(--r)) scale(1); }
}
.card-in{
  display:block; position:relative; width:100%; height:100%;
  transform-style:preserve-3d;
  transition:transform 1.05s var(--ease-out);
}
.card.is-up .card-in{ transform:rotateY(180deg); }

/* a card gathers light before it consents to turn */
.card.is-charge::after{
  content:''; position:absolute; inset:-7%; border-radius:6px;
  border:1px solid var(--glow); pointer-events:none; opacity:0;
  animation:cardRing .30s var(--ease-out) both;
}
@keyframes cardRing{
  0%{ opacity:0; transform:scale(.84); }
  55%{ opacity:.8; transform:scale(1.02); }
  100%{ opacity:0; transform:scale(1.12); }
}
.card.is-charge .face-back{ animation:backGlow .28s var(--ease-out) both; }
@keyframes backGlow{
  from{ filter:brightness(1); box-shadow:0 14px 34px -16px rgba(0,0,0,.95); }
  to{ filter:brightness(1.5); box-shadow:0 0 38px -6px var(--glow); }
}
.card:hover .card-in{ box-shadow:0 0 42px -10px rgba(142,125,208,.6); }
.face{
  position:absolute; inset:0; border-radius:3px; overflow:hidden;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border:1px solid var(--hair-2);
  box-shadow:0 14px 34px -16px rgba(0,0,0,.95);
}
.face-back{
  background:linear-gradient(157deg,#151428 0%,#0b0b14 52%,#1a182f 100%);
  display:flex; align-items:center; justify-content:center;
}
.face-back svg{ width:62%; height:62%; opacity:.6; }
.face-front{
  transform:rotateY(180deg);
  background:linear-gradient(168deg,#131223 0%,#0a0a12 46%,#141327 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  padding:7% 6%;
}
.face-front::before{
  content:''; position:absolute; inset:4%; border:1px solid rgba(226,229,242,.09); border-radius:2px;
  pointer-events:none;
}
.cf-num{
  font-family:var(--serif); font-size:clamp(7px,.82vw,10px); letter-spacing:.2em;
  color:var(--violet); z-index:2; line-height:1;
}
.cf-art{
  flex:1; width:100%; display:flex; align-items:center; justify-content:center;
  padding:4% 0; min-height:0;
}
.cf-art svg{ width:80%; height:100%; max-height:100%; }
.card.is-rev .cf-art{ transform:rotate(180deg); }
.cf-name{
  font-family:var(--serif); font-size:clamp(7.5px,.92vw,12px); line-height:1.2;
  color:var(--silver); text-align:center; letter-spacing:.02em; z-index:2;
  width:100%; word-break:break-word;
}
.cf-rev{
  display:block; font-family:var(--sans); font-size:clamp(5.5px,.62vw,7.5px);
  letter-spacing:.24em; text-transform:uppercase; color:var(--blue); margin-top:3px;
}
.card-pos{
  position:absolute; left:50%; top:calc(100% + 7px); transform:translateX(-50%);
  font-size:8px; letter-spacing:.2em; text-transform:uppercase; color:var(--silver-4);
  white-space:nowrap; opacity:0; transition:opacity .6s .3s;
}
.card.is-up .card-pos{ opacity:1; }
.card.c-rot .card-pos{ display:none; }

/* verdict spread tally */
.verdict{
  text-align:center; margin:6px auto 0; max-width:520px;
}
.verdict-word{
  font-family:var(--serif); font-size:clamp(30px,5vw,52px); font-weight:300;
  letter-spacing:.06em; color:transparent;
  background:linear-gradient(96deg,#e6e8f4,#a99ce6 46%,#8fa4d4 74%,#e6e8f4);
  -webkit-background-clip:text; background-clip:text;
  animation:verdictIn 1.55s var(--ease-out) both;
}
@keyframes verdictIn{
  0%{ opacity:0; letter-spacing:.42em; filter:blur(12px); }
  40%{ opacity:.7; letter-spacing:.22em; filter:blur(4px); }
  100%{ opacity:1; letter-spacing:.06em; filter:blur(0); }
}
/* the tally arrives a beat after the word, under a hairline that draws
 * itself out of nothing */
.verdict::after{
  content:''; display:block; height:1px; width:0; margin:14px auto 0;
  background:linear-gradient(90deg,transparent,var(--hair-3),transparent);
  animation:verdictRule 1.1s var(--ease-out) .5s both;
}
@keyframes verdictRule{ from{ width:0; opacity:0; } to{ width:min(300px,70%); opacity:1; } }
.verdict-sub{
  font-size:9px; letter-spacing:.28em; text-transform:uppercase; color:var(--silver-4);
  margin-top:8px; animation:rowIn .9s var(--ease-out) .8s both;
}

/* ── result list ───────────────────────────────────────────────── */
.res-list{
  margin:34px auto 0; max-width:760px;
  border-top:1px solid var(--hair);
}
.res-row{
  display:grid; grid-template-columns:26px 1fr auto; gap:14px; align-items:baseline;
  padding:13px 4px; border-bottom:1px solid var(--hair);
  animation:rowIn .7s var(--ease-out) both;
}
.rr-i{ font-family:var(--serif); font-size:10px; letter-spacing:.16em; color:var(--violet); }
.rr-mid{ display:flex; flex-direction:column; gap:2px; }
.rr-pos{ font-size:8.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--silver-4); }
.rr-name{ font-family:var(--serif); font-size:17px; color:var(--silver); line-height:1.3; }
.rr-or{
  font-size:8.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--silver-3);
  border:1px solid var(--hair); padding:3px 8px; white-space:nowrap;
}
.rr-or.is-rev{ color:var(--blue); border-color:rgba(127,149,200,.34); }
@keyframes rowIn{ from{opacity:0; transform:translateY(9px)} to{opacity:1; transform:none} }

/* ── loupe ─────────────────────────────────────────────────────── */
.loupe{
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  background:rgba(5,5,9,.86); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  animation:fadeOnly .4s ease both; padding:24px;
}
.loupe-inner{
  width:min(320px,74vw); aspect-ratio:.6; position:relative;
  animation:loupeIn .7s var(--ease-out) both;
}
@keyframes loupeIn{ from{opacity:0; transform:scale(.9) rotateY(-14deg)} to{opacity:1; transform:none} }
.loupe-inner .face-front{
  position:relative; inset:auto; width:100%; height:100%; transform:none;
  box-shadow:0 40px 90px -30px rgba(0,0,0,1), 0 0 70px -20px rgba(142,125,208,.45);
}
.loupe-inner .cf-num{ font-size:12px; }
.loupe-inner .cf-name{ font-size:22px; }
.loupe-inner .cf-rev{ font-size:9px; }
.loupe-x{
  position:absolute; top:22px; right:22px; background:none; border:1px solid var(--hair-2);
  color:var(--silver-3); width:38px; height:38px; cursor:pointer; border-radius:var(--rad);
  display:flex; align-items:center; justify-content:center; transition:color .3s, border-color .3s;
}
.loupe-x:hover{ color:var(--silver); border-color:var(--hair-3); }
.loupe-x svg .s-thin{ stroke:currentColor; }

@media (max-width:860px){
  .spread-grid{ grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); }
  .sc-name{ font-size:16px; }
  .res-row{ grid-template-columns:20px 1fr; }
  .rr-or{ grid-column:2; justify-self:start; margin-top:5px; }
  .card-pos{ font-size:6.5px; letter-spacing:.12em; }
}