:root{
  --cols: 26; --overlap: 18px; --gap-y: 16px;
  --card-w: 120px; --center-cols: 3; --center-card-w: 196px;
  --ink: inherit; --back-url: url("../images/back.webp");
}

*{box-sizing:border-box}
html,body{height:100%}
.tarot-stage{ margin:0; color:var(--ink); font-family:inherit; background:transparent; overflow-x:hidden;
  display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px 10px 40px; position:relative }

.topbar{ width:min(98vw,1760px); display:flex; align-items:center; justify-content:space-between; gap:10px; }
#progress{ background:rgba(0,0,0,.05); color:inherit; padding:6px 10px; border-radius:999px; display:none; border:none; }

/* Selected tray */
.selected{ width:min(98vw,1760px); display:flex; justify-content:center; align-items:flex-start; gap:10px; min-height:calc((var(--card-w) * 16 / 9) + 10px); transition:min-height .3s ease, opacity .25s ease; }
.selected.hidden{ display:none; }
.slot{ width:var(--card-w); position:relative; border:none; border-radius:12px; user-select:none; will-change:opacity, transform; }
.slot:hover{transform:translateY(-4px)}

/* Flip faces */
.cardbox{ width:100%; aspect-ratio: 9 / 16; perspective: 900px; }
.card-frame{ position:relative; width:100%; height:100%; border-radius:12px; overflow:hidden; box-shadow:none; transform-style:preserve-3d; }
.face{ position:absolute; inset:0; width:100%; height:100%; backface-visibility:hidden;
  transition:opacity .42s cubic-bezier(.22,.78,.16,1), transform .42s cubic-bezier(.22,.78,.16,1);}
.face.back{ background:var(--back-url) center/cover no-repeat; opacity:1; transform:rotateY(0deg); z-index:2; }
.face.front{ background:#fff; opacity:0; transform:rotateY(90deg); z-index:3; }
.face.front img{ width:100%; height:100%; object-fit:cover; display:block; }
.card-frame.revealed .face.front{ opacity:1; transform:rotateY(0deg); }
.card-frame.revealed .face.back{ opacity:0; transform:rotateY(-90deg); pointer-events:none; }

/* Captions & centered layout */
.pos-caption{ margin-top:6px; text-align:center; font-size:.85rem; color:inherit; opacity:.75; }
.selected.center{ display:grid; gap:16px; justify-content:center; align-content:center; width:100%; min-height:70vh; grid-template-columns: repeat(var(--center-cols), var(--center-card-w)); transition:grid-template-columns .35s ease, min-height .35s ease; }
.selected.center .slot{ width:var(--center-card-w); transform:none !important; }

/* Spread */
.board{ width:min(98vw,1760px); margin:0 auto; position:relative; min-height: calc((var(--card-w) * 16 / 9) + 40px); }
.board.hidden{ display:none; }
.spread{ width:100%; display:none }
.rows{ display:flex; flex-direction:column; gap:var(--gap-y) }
.row{ display:flex; align-items:flex-start; }
.card,.ghost{ position:relative; width:var(--card-w); aspect-ratio: 9 / 16; border-radius:12px; margin-left: calc(-1 * var(--overlap)); }
.card:first-child,.ghost:first-child{ margin-left:0 }
.card{ cursor:pointer; background:#fff; border:none; box-shadow:none; transition:transform .28s ease, opacity .28s ease; }
.card .back{ position:absolute; inset:0; border-radius:12px; background:var(--back-url) center/cover no-repeat; }
.card.hovered{ transform:translate(8px,-10px) rotate(-.4deg); }
.row.sliding .card{ transition:transform .22s ease, opacity .22s ease }
.ghost{ visibility:hidden; }

/* Deck & flying */
.deck-wrap{ position:absolute; left:0; top:0; width:calc((var(--card-w)) + 60px); height:calc((var(--card-w) * 16 / 9) + 60px); transition:opacity .25s ease; }
.deck{ position:absolute; left:30px; top:30px; width:var(--card-w); aspect-ratio: 9 / 16; border-radius:12px; cursor:pointer; border:none; }
.deck-layer{ position:absolute; inset:0; border-radius:12px; background:var(--back-url) center/cover no-repeat; opacity:.98; will-change:transform; }
.deck-layer.top::after{ content:""; position:absolute; inset:0; border-radius:12px; background:transparent; }
.tempDeckTarget{ position:fixed; right:min(3vw, 32px); top:50%; transform:translateY(-50%); width:min(22vw, 260px); aspect-ratio:9/16; z-index:50; pointer-events:none; }
.flying{ position:fixed; left:0; top:0; width:var(--card-w); aspect-ratio: 9 / 16; border-radius:12px; overflow:hidden; z-index:2800; background:var(--back-url) center/cover no-repeat; box-shadow:none; transform:translate(0,0); transition:transform .38s cubic-bezier(.22,.78,.16,1), opacity .28s ease; }

/* Reading grid */
.reading{ width:min(98vw,1760px); margin:0 auto; display:none; grid-template-columns: 4fr 1fr; gap:22px; align-items:center; }

/* Right deck (reset) */
.rightDeckWrap{ display:none; justify-self:center; align-self:center; width:min(92%, var(--center-card-w)); text-align:center; position:relative; }
.rightDeck{ width:100%; aspect-ratio:9/16; border-radius:12px; border:none; position:relative; }
.rightDeck .stack-layer{ position:absolute; inset:0; border-radius:12px; background:var(--back-url) center/cover no-repeat; border:none; opacity:.98; will-change:transform; pointer-events:none; }
.rightDeck .stack-layer.top{ pointer-events:auto; cursor:pointer; }
.rightDeckHint{ position:absolute; inset:auto 10% -46px 10%; display:inline-block; opacity:0; transform:translateY(6px); transition:.22s ease; pointer-events:none; background:rgba(0,0,0,.05); color:inherit; border-radius:10px; padding:10px 14px; font-size:.9rem; }
.rightDeck .stack-layer.top:hover ~ .rightDeckHint{ opacity:1; transform:translateY(0); }

/* Reset target */
.resetDeckTarget{
  position:fixed; left:min(3vw, 32px); top:50%; transform:translateY(-50%);
  width:min(22vw, 260px); aspect-ratio:9/16; z-index:70; pointer-events:none;
}

/* Modal */
.modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.5); z-index:60 }
.modal.open{ display:flex; animation:fadeIn .2s ease }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
.sheet{ position:relative; width:min(960px, 92vw); max-height:92vh; overflow:auto; background:#fff; border-radius:14px; padding:18px; display:grid; grid-template-columns:1fr 1.3fr; gap:16px; transform:scale(.94); opacity:0; animation:pop .2s ease forwards; color:inherit; }
@keyframes pop{ to{ transform:scale(1); opacity:1 } }
@media (max-width:720px){ .sheet{ grid-template-columns:1fr } }
.sheet img{ width:100%; border-radius:10px; max-height:72vh; object-fit:contain; }
.sheet h2{ margin:.25rem 0 .5rem; font-weight:700 }
.sheet p{ line-height:1.65; white-space:pre-wrap }
.close{ position:absolute; top:10px; right:12px; width:36px; height:36px; border-radius:10px; display:grid; place-items:center; cursor:pointer; background:rgba(0,0,0,.05); border:none; }
.close:hover{ background:rgba(0,0,0,.08); }

/* Responsive */
@media (max-width: 900px){
  .reading{ grid-template-columns: 1fr; }
  .rightDeckWrap{ width:min(260px, 60vw); justify-self:center; }
}