.drawband{padding-top:calc(var(--nav-h) + clamp(20px,3vw,34px))}

/* ---- the bar across the top: Pull, Wish, Print ---- */
.topbar{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  padding:13px 16px;border-radius:18px;margin-bottom:16px;
  background:var(--glass);border:1px solid var(--glass-brd)}
.topacts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.topacts .btn{min-width:104px}
.topacts .btn:disabled{opacity:.35;pointer-events:none}

.status{text-align:center;margin:4px 0 18px}
.status .big{font-family:'Cormorant Garamond',serif;font-size:clamp(19px,2.6vw,27px);color:var(--tx-hi)}
.status .small{font-size:13px;color:var(--tx-3);margin-top:4px;min-height:19px}

/* ---- the three decks, face down ----
   Houses run the full width; planets and zodiac sit side by side beneath.
   Cards overlap like a real fan: --ov is how much of each stays visible. */
.decks{margin-bottom:18px}
.deck{padding:14px 16px 17px;border-radius:18px;margin-bottom:12px;
  background:var(--glass);border:1px solid var(--glass-brd);
  transition:.45s var(--ease)}
.deck.off{opacity:.32;pointer-events:none;filter:grayscale(.6)}
.decklab{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-size:9.5px;font-weight:700;letter-spacing:.19em;text-transform:uppercase;
  color:var(--tx-hi);margin-bottom:10px}
.decklab em{font-style:normal;color:var(--tx-3);letter-spacing:.06em;
  text-transform:none;font-size:11px}
.deckrow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.deckrow .deck{margin-bottom:0}

.fan{display:flex;justify-content:center;padding:12px 0 4px}
#spHouses{--ov:13px;--w:clamp(44px,4.9vw,64px)}
#spPlanets,#spRashi{--ov:24px;--w:clamp(48px,5.6vw,70px)}

.bk{width:var(--w);aspect-ratio:3/4;border-radius:6px;overflow:hidden;cursor:pointer;
  flex:0 0 auto;background:var(--glass-2);
  border:2px solid var(--paper-solid);box-shadow:var(--sh-1);
  margin-right:calc(var(--ov) - var(--w));
  transition:transform .3s var(--spring),box-shadow .3s,margin .3s var(--ease),
             opacity .3s var(--ease)}
.bk:last-child{margin-right:0}
.bk img{width:100%;height:100%;object-fit:cover;display:block}
.bk:hover,.bk:focus-visible{transform:translateY(-15px) scale(1.06);z-index:5;
  box-shadow:var(--sh-3);outline:none;border-color:var(--gold-light)}
.bk:hover + .bk,.bk:focus-visible + .bk{margin-left:calc(var(--w) - var(--ov))}
.bk.flipping + .bk{margin-left:0}
.bk.flipping:hover{transform:translateY(-52px) scale(1.85)}
.bk.gone{width:0;margin-right:0;border-width:0;opacity:0;pointer-events:none;
  transition:.45s var(--ease)}
/* a card drawn by hand turns over in place: out of the fan, up to a size
   worth reading, then round to its face */
.bk.flipping{overflow:visible;background:none;border:0;box-shadow:none;z-index:30;
  transform:translateY(-52px) scale(1.85);transition:transform .34s var(--spring)}
.bk .flipinner{position:relative;width:100%;height:100%;transform-style:preserve-3d;
  transition:transform .46s cubic-bezier(.45,.05,.3,1);transition-delay:.12s}
.bk.turned .flipinner{transform:rotateY(180deg)}
.bk .fface{position:absolute;inset:0;border-radius:6px;overflow:hidden;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border:2px solid var(--paper-solid);box-shadow:var(--sh-3)}
.bk .fface img{width:100%;height:100%;object-fit:cover;display:block}
.bk .ffront{transform:rotateY(180deg)}
.bk.dealin{opacity:0;transform:translateY(-64px) scale(.8) rotate(8deg);
  transition-delay:var(--d,0ms)}

/* ---- Past / Present / Future, then the zodiac ---- */
.rows{display:flex;flex-direction:column;gap:12px}
.brow{display:flex;align-items:center;gap:16px;padding:15px 18px;border-radius:18px;
  transition:.4s var(--ease);position:relative}
.brow.live{border-color:var(--gold-light);box-shadow:var(--sh-2)}
.brow.dead{opacity:.86}
.rlab{flex:0 0 auto;width:104px;font-size:9.5px;font-weight:700;letter-spacing:.17em;
  text-transform:uppercase;color:var(--tx-hi);line-height:1.5}
.brow.live .rlab{color:var(--gold-light)}
.rcards{display:flex;align-items:flex-start;gap:11px;flex-wrap:wrap;flex:1 1 auto}
.rcards .slot{width:clamp(64px,7vw,86px)}
.rcards .arrowlink{align-self:center;color:var(--tx-3);font-size:15px;padding:0 1px}
.deadtag{align-self:center;font-size:9.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--flag-bad-brd);
  border:1px solid var(--flag-bad-brd);border-radius:20px;padding:5px 11px}

/* a slot not yet drawn — the shape of the reading, before it arrives */
.slot.hole .card{background:transparent;border:1.5px dashed var(--glass-brd);box-shadow:none}
.slot.hole .cardlab b{color:var(--tx-3)}
.slot.hole.next .card{border-color:var(--gold-light);
  animation:holepulse 1.7s var(--ease) infinite}
@keyframes holepulse{0%,100%{opacity:.45}50%{opacity:1}}

/* ---- how a house serves the chosen subject ---- */
.slot.good .card{box-shadow:0 0 0 3px var(--flag-good-brd),var(--sh-2)}
.slot.bad  .card{box-shadow:0 0 0 3px var(--flag-bad-brd),var(--sh-2)}
.slot.good .cardlab b{color:var(--flag-good-brd)}
.slot.bad  .cardlab b{color:var(--flag-bad-brd)}
.tg{color:var(--flag-good-brd)}
.tb{color:var(--flag-bad-brd)}

@media(max-width:860px){
  .deckrow{grid-template-columns:1fr}
  #spHouses{--ov:8px;--w:clamp(32px,8.4vw,44px)}
  #spPlanets,#spRashi{--ov:17px;--w:clamp(38px,10vw,54px)}
  .brow{flex-direction:column;align-items:flex-start;gap:10px}
  .rlab{width:auto}
  .rcards .slot{width:clamp(56px,15vw,74px)}
}

@media print{
  .topbar,.decks,.status{display:none}
  .brow{break-inside:avoid}
}