/* Centered fluid content column; CRT ambiance fills the margins on wide screens */
.content-scroll { position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.content-col {
  width: min(100%, 34rem);
  margin-inline: auto;
  min-height: 100%;                 /* fill the scroll viewport so content can center */
  /* bottom pad reserves space for the fixed "THE CARD IS THE READING" tagline */
  padding: clamp(14px, 4vw, 32px) clamp(12px, 4vw, 24px) clamp(84px, 11vh, 104px);
  display: flex; flex-direction: column; align-items: center;
  /* Center the whole screen vertically when it fits; when it's taller than the
     viewport (mobile / short windows) fall back to top-aligned scroll. `safe`
     keeps the top from clipping out of reach when it overflows. */
  justify-content: safe center;
}
/* Card scales down on small screens, capped on large */
.card { width: min(340px, 92vw); }
@media (min-width: 1024px) { .content-col { width: 36rem; } }
@media (orientation: landscape) and (max-height: 480px) {
  .content-col { padding-top: 12px; }  /* phone landscape: reclaim vertical space */
}

/* Reading view — responsive columns:
   • mobile        : single column, buttons at the bottom of the stack
   • ≥960px        : [card + buttons] | [wisdom + reading text]
   • ≥1280px       : [card + buttons] | [wisdom] | [reading text]
   The card column is sticky, so the card + its buttons stay visible while a long
   interpretation scrolls. */
.reading-grid { display: flex; flex-direction: column; align-items: center; width: 100%; }
.reading-card-col { display: flex; flex-direction: column; align-items: center; width: 100%; }
.reading-actions { display: flex; flex-direction: column; align-items: center; width: 100%; margin-top: 16px; }

@media (min-width: 960px) {
  /* Widen the column only for readings (idle stays a narrow, centered column). */
  .content-col.phase-reading { width: min(100%, 60rem); }
  .reading-grid { flex-direction: row; align-items: flex-start; justify-content: center; gap: clamp(28px, 4vw, 56px); }
  /* Card + buttons are the left column and stay pinned while the text scrolls. */
  .reading-card-col { width: auto; flex: 0 0 auto; align-self: flex-start;
    position: sticky; top: clamp(8px, 2vh, 24px); }
  .reading-card-col > .card { margin-inline: 0; }
  .reading-actions { margin-top: 18px; }
  .card-reading.reading-interp { flex: 0 1 22rem; padding-top: 0; }
}
@media (min-width: 1280px) {
  /* Third column: split the interpretation into wisdom | reading text. */
  .content-col.phase-reading { width: min(100%, 76rem); }
  .card-reading.reading-interp { display: contents; }  /* promote wisdom + text to columns */
  .reading-wisdom { flex: 0 1 20rem; align-self: flex-start; }
  .reading-text  { flex: 0 1 24rem; align-self: flex-start; margin-top: 0; }
}