/* RESONATE 0.9.1 — dedicated reading table */
.reading-table{min-height:calc(100vh - 92px);display:flex;flex-direction:column;justify-content:center;gap:18px;padding:18px 0 28px}
.stage-heading{text-align:center;max-width:720px;margin:0 auto}
.stage-heading h1{margin:.3rem 0 .45rem}
.stage-heading p{margin:0;color:var(--muted,#aaa)}
.stage-board{width:100%;margin:2px auto 4px;align-items:center}
.stage-position{min-width:0}
.stage-card{position:relative;width:min(132px,22vw);aspect-ratio:2/3;margin:0 auto;border-radius:10px;perspective:900px;filter:drop-shadow(0 12px 20px rgba(0,0,0,.35));transform-origin:center;will-change:transform,opacity}
.stage-card .reading-card-back{position:absolute;inset:0;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.stage-actions{display:flex;justify-content:center;gap:12px;align-items:center;margin-top:4px}
.stage-actions button{min-width:170px}
.shuffle-button:disabled{opacity:.72;cursor:wait}

/* A restrained poker-table shuffle: alternate cards split left/right, cross through centre, then settle. */
.stage-board.is-shuffling .stage-card{animation:tarot-shuffle-left .86s cubic-bezier(.22,.75,.25,1)}
.stage-board.is-shuffling .stage-position:nth-child(even) .stage-card{animation-name:tarot-shuffle-right}
.stage-board.is-shuffling .stage-position:nth-child(3n) .stage-card{animation-delay:.055s}
.stage-board.is-shuffling .stage-position:nth-child(4n) .stage-card{animation-delay:.095s}
@keyframes tarot-shuffle-left{
  0%{transform:translate3d(0,0,0) rotate(0)}
  24%{transform:translate3d(-46px,-12px,0) rotate(-7deg)}
  48%{transform:translate3d(28px,-22px,0) rotate(5deg) scale(1.035)}
  72%{transform:translate3d(-12px,-5px,0) rotate(-2deg)}
  100%{transform:translate3d(0,0,0) rotate(0)}
}
@keyframes tarot-shuffle-right{
  0%{transform:translate3d(0,0,0) rotate(0)}
  24%{transform:translate3d(46px,-12px,0) rotate(7deg)}
  48%{transform:translate3d(-28px,-22px,0) rotate(-5deg) scale(1.035)}
  72%{transform:translate3d(12px,-5px,0) rotate(2deg)}
  100%{transform:translate3d(0,0,0) rotate(0)}
}
@media (max-width:700px){
  .reading-table{min-height:calc(100svh - 78px);justify-content:flex-start;padding-top:10px;gap:14px}
  .stage-card{width:min(104px,25vw)}
  .stage-actions{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:9px}
  .stage-actions button{min-width:0;width:100%}
}
@media (max-height:760px) and (min-width:701px){
  .reading-table{justify-content:flex-start;gap:10px;padding-top:8px}
  .stage-heading p{font-size:.92rem}
  .stage-card{width:min(104px,14vh)}
  .stage-actions{margin-top:0}
}
@media (prefers-reduced-motion:reduce){
  .stage-board.is-shuffling .stage-card{animation:none}
}

/* Spread roles remain readable on both the face-down table and drawn cards. */
/* Keep the complete printed card, including its top numeral, inside its frame. */
.reading-card-front img,.detail-card-image img,.card-image-wrap img{object-fit:contain;object-position:center;box-sizing:border-box;padding:4px}
.reading-card-front{display:grid;grid-template-rows:minmax(0,1fr) auto;padding:4px}
.reading-card-front img{width:100%;height:100%;min-height:0;min-width:0}
.reading-card-front strong{display:block;white-space:normal;overflow-wrap:anywhere;line-height:1.3;padding:4px 2px 6px;min-height:2.6em}
.spread-scroll{max-width:100%;overflow-x:auto;padding:8px 0 20px}
.spread-scroll:focus-visible{outline:1px solid var(--gold,#c9a96a);outline-offset:3px}
.slot-label{display:block;min-height:2.8em;line-height:1.35;color:var(--gold,#c9a96a);font-size:13px;font-weight:600;letter-spacing:.02em;text-align:center;white-space:normal;overflow-wrap:anywhere}
.reading-role{color:var(--gold,#c9a96a)}
.position-context{border-left:2px solid var(--gold,#c9a96a);padding-left:14px;color:#e7dfd3;line-height:1.65}
.sample-deck-note{max-width:680px;margin:8px auto 16px;text-align:center}
.spread-board .reading-position{min-width:0;width:100%}
.spread-board .reading-card{max-width:100%}
.layout-relationship{grid-template-columns:repeat(3,minmax(90px,160px));max-width:580px}
.layout-relationship .reading-position:nth-child(1){grid-area:1/1}
.layout-relationship .reading-position:nth-child(2){grid-area:1/3}
.layout-relationship .reading-position:nth-child(3){grid-area:1/2}
.layout-relationship .reading-position:nth-child(4){grid-area:2/1}
.layout-relationship .reading-position:nth-child(5){grid-area:2/3}
.spread-board.layout-seven{grid-template-columns:repeat(7,minmax(0,1fr));max-width:1000px;gap:12px}
.spread-board.layout-seven .reading-position:nth-child(n){grid-column:auto;grid-row:1;justify-self:stretch}
.spread-board.layout-seven .reading-position:nth-child(2),.spread-board.layout-seven .reading-position:nth-child(6){margin-top:60px}
.spread-board.layout-seven .reading-position:nth-child(3),.spread-board.layout-seven .reading-position:nth-child(5){margin-top:120px}
.spread-board.layout-seven .reading-position:nth-child(4){margin-top:180px}
.layout-seven .stage-card{width:100%;max-width:132px}
.spread-board.layout-celtic{grid-template-columns:repeat(5,minmax(0,150px));grid-template-rows:repeat(4,auto);max-width:860px;gap:14px}
.layout-celtic .reading-position:nth-child(1){grid-area:2/2}
.layout-celtic .reading-position:nth-child(2){grid-area:2/3}
.layout-celtic .reading-position:nth-child(3){grid-area:3/2}
.layout-celtic .reading-position:nth-child(4){grid-area:2/1}
.layout-celtic .reading-position:nth-child(5){grid-area:1/2}
.layout-celtic .reading-position:nth-child(6){grid-area:2/4}
.layout-celtic .reading-position:nth-child(7){grid-area:4/5}
.layout-celtic .reading-position:nth-child(8){grid-area:3/5}
.layout-celtic .reading-position:nth-child(9){grid-area:2/5}
.layout-celtic .reading-position:nth-child(10){grid-area:1/5}
.layout-celtic .stage-card{width:100%;max-width:120px}
@media(max-width:700px){
  .slot-label{font-size:14px;min-height:3.8em}
  .spread-board.layout-seven{min-width:650px}
  .spread-board.layout-celtic{min-width:620px}
  .spread-board.layout-seven{gap:5px}
  .layout-seven .reading-card,.layout-seven .stage-card{width:100%}
  .layout-seven .reading-card-front strong{font-size:9px;padding:2px}
  .spread-board.layout-seven .reading-position:nth-child(2),.spread-board.layout-seven .reading-position:nth-child(6){margin-top:45px}
  .spread-board.layout-seven .reading-position:nth-child(3),.spread-board.layout-seven .reading-position:nth-child(5){margin-top:90px}
  .spread-board.layout-seven .reading-position:nth-child(4){margin-top:135px}
  .spread-board.layout-celtic{gap:5px}
  .layout-celtic .reading-card,.layout-celtic .stage-card{width:100%}
  .layout-celtic .reading-card-front strong{font-size:9px;padding:2px}
  .detail-title h1{overflow-wrap:anywhere}
}

/* Keep the two reading controls perfectly regimented */
.stage-actions .shuffle-button,.stage-actions .draw-cta{margin:0;min-height:46px;height:46px;align-items:center;justify-content:center}

/* Prevent the native white scrollbar flashing during wide-spread shuffles. */
.spread-scroll{scrollbar-width:none;-ms-overflow-style:none}
.spread-scroll::-webkit-scrollbar{display:none;width:0;height:0}
@media(min-width:701px){.spread-scroll{overflow-x:hidden}}