/* The Tarot table. Loads after /styles.css and /assets/sitenav.css and only
   adds the reading table on top of the site's header/footer/tokens.
   Mobile first: the three slots sit side by side even on a phone (three
   narrow cards read better than a scrolling column); wider screens get
   bigger cards and more air. The masthead pieces (.section-mast,
   .section-blurb, .section-lead) come from /styles.css. */

.tarot-main {
  width: min(100%, 1040px);
  margin: 0 auto;
  padding: clamp(22px, 3.4vw, 40px) clamp(16px, 4vw, 48px) clamp(48px, 7vw, 96px);
}

/* --- the table ----------------------------------------------------------- */

.table {
  display: grid;
  gap: clamp(18px, 3vw, 28px);
  margin: clamp(20px, 3vw, 32px) 0 0;
  padding: clamp(16px, 3vw, 28px);
  border: var(--border);
  background: var(--paper-light);
  box-shadow: var(--shadow);
  scroll-margin-top: 16px;
}

.control-label {
  margin: 0;
  font-size: 0.62rem;
  font-weight: 950;
  letter-spacing: 0.16em;
}

.control-label .optional {
  color: #73675b;
}

.question-row {
  display: grid;
  gap: 8px;
}

.question-row textarea {
  min-height: 52px;
  max-height: 120px;
  padding-right: 76px;
}

/* example questions: the shape of a good question, shown rather than
   explained. Styles come from .prompt-chips on the chat page. */
.chips-hint {
  margin: 6px 0 0;
  color: #73675b;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.tarot-chips {
  justify-content: flex-start;
}

.tarot-chips button {
  text-align: left;
}

/* --- the spread ---------------------------------------------------------- */

.spread {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 2vw, 22px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.slot {
  display: grid;
  gap: 8px;
  justify-items: center;
  text-align: center;
}

.slot-label {
  margin: 0;
  font-size: 0.62rem;
  font-weight: 950;
  letter-spacing: 0.18em;
}

.card-flip {
  position: relative;
  width: 100%;
  max-width: 230px;
  aspect-ratio: 480 / 820;
  perspective: 1200px;
}

.card-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--paper-light);
  box-shadow: 4px 4px 0 var(--ink);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  transform-style: preserve-3d;
}

.card-face--back {
  transform: rotateY(0deg);
}

.card-face--front {
  transform: rotateY(180deg);
}

.slot.is-filled .card-face--back {
  transform: rotateY(-180deg);
}

.slot.is-filled .card-face--front {
  transform: rotateY(0deg);
}

.card-face--front img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.3s;
}

.slot.is-reversed .card-face--front img {
  transform: rotate(180deg);
}

/* An empty slot is a dashed outline: a place set for a card that hasn't
   arrived. Once a card lands the back shows for the half-second before the
   flip, so the dashed look is on the slot, not the face. */
.slot:not(.is-filled) .card-face--back {
  border-style: dashed;
  background: transparent;
  box-shadow: none;
}

.slot:not(.is-filled) .card-back {
  opacity: 0;
}

.slot-caption {
  display: grid;
  gap: 4px;
  justify-items: center;
  min-height: 2.4em;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(0.78rem, 2.4vw, 0.95rem);
  line-height: 1.2;
}

.slot:not(.is-filled) .slot-name {
  color: #776b5e;
  font-style: italic;
}

.slot-reversed {
  padding: 3px 6px 2px;
  border: 1.5px solid var(--ink);
  background: var(--pink);
  font-family: "Arial Narrow", "Franklin Gothic Medium", Arial, sans-serif;
  font-size: 0.55rem;
  font-weight: 950;
  letter-spacing: 0.14em;
  transform: rotate(-2deg);
}

.slot-reversed[hidden] {
  display: none;
}

/* the card's keywords, so a stranger knows what it means before Roastie
   tells them what it means about them */
.slot-keys {
  max-width: 100%;
  color: #5e5247;
  font-size: clamp(0.66rem, 2vw, 0.8rem);
  font-style: italic;
  line-height: 1.25;
}

.slot-keys:empty {
  display: none;
}

/* --- the card back ------------------------------------------------------- */

.card-back {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(
      -45deg,
      var(--pink) 0 7px,
      var(--pink-dark) 7px 14px
    );
}

.card-back::before {
  content: "";
  position: absolute;
  inset: 7%;
  border: 2px solid var(--paper-light);
  border-radius: 4px;
}

.card-back span {
  display: grid;
  place-items: center;
  width: 46%;
  aspect-ratio: 1;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 3px 3px 0 var(--ink);
  color: var(--ink);
  font-size: clamp(1.2rem, 6vw, 2.4rem);
  font-weight: 950;
  letter-spacing: -0.05em;
  transform: rotate(-6deg);
}

/* --- the fan of face-down cards ------------------------------------------- */

.deck-row {
  display: grid;
  gap: 10px;
}

.deck-row[hidden] {
  display: none;
}

.fan {
  --fan-card-w: clamp(54px, 16vw, 92px);
  position: relative;
  width: 100%;
  height: calc(var(--fan-card-w) * 1.7 + 16px);
}

.fan-card {
  position: absolute;
  top: 8px;
  width: var(--fan-card-w);
  height: calc(var(--fan-card-w) * 1.7);
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: var(--paper-light);
  box-shadow: 3px 3px 0 var(--ink);
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.18s, opacity 0.25s;
  transform: rotate(var(--tilt, 0deg));
}

/* only the top card of the fan wears the badge; twelve overlapping badges
   read as noise */
.fan-card .card-back span {
  display: none;
  font-size: clamp(0.9rem, 4vw, 1.3rem);
}

.fan-card:last-child .card-back span {
  display: grid;
}

.fan-card:hover:not(:disabled),
.fan-card:focus-visible {
  z-index: 5;
  transform: translateY(-10px) rotate(var(--tilt, 0deg));
}

.fan-card.is-taken {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-40px) rotate(var(--tilt, 0deg));
}

.fan-card:disabled:not(.is-taken) {
  cursor: default;
  opacity: 0.55;
}

/* --- actions and the reading --------------------------------------------- */

.table-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.table-actions .send-button {
  flex: 1 1 220px;
}

.table-actions .new-chat-button {
  min-height: 56px;
  padding: 0 16px;
}

.table-actions .new-chat-button[hidden] {
  display: none;
}

.table .chat-status {
  padding: 0;
  background: transparent;
}

.table .typing-row {
  padding: 0;
}

.reading[hidden] {
  display: none;
}

/* the reading rises into the top of the table as the cards step aside */
.reading:not([hidden]) {
  animation: reading-in 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes reading-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.reading .message-row {
  margin: 0;
}

.reading .message-bubble {
  max-width: 100%;
}

.reading-text p {
  margin: 0 0 0.9em;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.reading-text p:last-child {
  margin-bottom: 0;
}

.reading-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 16px;
}

.share-note {
  color: #73675b;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.share-note:empty {
  display: none;
}

.table-fine-print {
  margin: 18px 0 0;
  color: #73675b;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

/* --- after the reading: the cards step aside ------------------------------ */
/* Once Roastie has read the spread, the reading is the show. tarot.js moves
   the question, the three cards and the buttons out of the table into this
   card and animates the trip. The card sits under the title on a laptop and
   under the reading on a phone. */

.cast-aside {
  display: grid;
  gap: 14px;
  margin: 24px 0 0;
  padding: 16px clamp(14px, 2.5vw, 20px) 18px;
  border: 2px solid var(--ink);
  background: var(--paper-light);
  box-shadow: 4px 4px 0 var(--ink);
}

.cast-aside[hidden] {
  display: none;
}

.cast-aside .spread {
  gap: clamp(8px, 1.5vw, 14px);
  padding: 0;
}

.cast-aside .slot {
  gap: 6px;
}

.cast-aside .card-flip {
  max-width: 150px;
}

.cast-aside .card-face {
  box-shadow: 3px 3px 0 var(--ink);
}

.cast-aside .slot-caption {
  font-size: clamp(0.74rem, 2vw, 0.84rem);
}

.cast-aside .slot-keys {
  font-size: clamp(0.62rem, 1.8vw, 0.72rem);
}

.cast-aside .question-row textarea {
  min-height: 44px;
  font-size: 0.92rem;
}

/* the question is settled; the chips go */
.cast-aside .chips-hint,
.cast-aside .tarot-chips {
  display: none;
}

/* the spread has been read; only "shuffle again" is left to do */
.cast-aside .send-button {
  display: none;
}

.cast-aside .table-actions .new-chat-button {
  flex: 1 1 auto;
  width: 100%;
}

/* --- how the cards work ---------------------------------------------------- */
/* same dashed receipt panel as the I Ching page's brief and coins panel */

.brief {
  margin: 14px 0 0 0;
  border: 2px dashed #b9ad9c;
  padding: 0 14px;
}

.brief summary {
  padding: 10px 0;
  font-size: 0.62rem;
  font-weight: 950;
  letter-spacing: 0.16em;
  color: #5e5247;
  cursor: pointer;
}

.brief[open] summary {
  border-bottom: 1px dashed #b9ad9c;
}

.method-panel {
  margin-top: 16px;
}

.method-body {
  padding: 2px 0 16px;
}

.method-body p {
  margin: 12px 0 0;
  color: #3f362e;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.9rem;
  line-height: 1.55;
}

.method-body strong {
  display: block;
  margin-bottom: 3px;
  color: var(--pink-dark);
  font-family: "Arial Narrow", "Franklin Gothic Medium", Arial, sans-serif;
  font-size: 0.64rem;
  font-weight: 950;
  letter-spacing: 0.14em;
}

/* --- wider screens --------------------------------------------------------- */

@media (min-width: 720px) {
  .table {
    grid-template-columns: 1fr;
  }

  .table > .spread {
    padding: 6px clamp(0px, 6vw, 60px) 0;
  }

  .table-actions .send-button {
    flex: 0 1 280px;
  }
}

/* Laptop: the table sits beside the title, as the chat card does on the
   front page. The title column holds the mast, the blurb and the credits;
   the table takes the rest and grows down as the reading comes in. */
@media (min-width: 1001px) {
  .tarot-main {
    display: grid;
    grid-template-columns: minmax(280px, 0.66fr) minmax(0, 1.34fr);
    grid-template-rows: repeat(5, auto) 1fr;
    width: 100%;
    column-gap: clamp(32px, 4vw, 72px);
    align-items: start;
    padding-inline: clamp(20px, 4vw, 58px);
  }

  .tarot-main > .section-mast {
    grid-column: 1;
    grid-row: 1;
  }

  .tarot-main > .cast-aside {
    grid-column: 1;
    grid-row: 2;
  }

  .tarot-main > .section-blurb {
    grid-column: 1;
    grid-row: 3;
    margin-top: 22px;
  }

  .tarot-main > .table {
    grid-column: 2;
    grid-row: 1 / -1;
    margin-top: 0;
  }

  .tarot-main > .table-fine-print {
    grid-column: 1;
    grid-row: 4;
    margin-top: 26px;
  }

  .tarot-main > .method-panel {
    grid-column: 1;
    grid-row: 5;
  }

  .tarot-main .section-mast h1 {
    font-size: clamp(2.6rem, 3.8vw, 4rem);
  }
}

/* on a phone the cards card follows the reading, ahead of the blurb */
@media (max-width: 759px) {
  .tarot-main > .cast-aside {
    order: 1;
  }
}

@media (max-width: 480px) {
  .card-face {
    box-shadow: 3px 3px 0 var(--ink);
  }

  .table-actions .send-button {
    width: 100%;
  }

  .table-actions .new-chat-button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-face,
  .card-face--front img,
  .fan-card {
    transition: none;
  }

  .reading:not([hidden]) {
    animation: none;
  }
}