/* ============================================================
   READINGS
   ============================================================ */

/* --- Spread chooser ------------------------------------------ */

/* No overflow clipping: the hover sparkles are meant to spill past the edge. */
.spread-card {
    position: relative;
    /* Keeps the sparkle layers from being painted over by sibling cards. */
    isolation: isolate;
}

.spread-card__size {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding-inline: var(--space-2);
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    color: var(--accent-ink);
    background: var(--gold-soft);
    border-radius: var(--radius-pill);
}

/* --- The six spreads ---------------------------------------------
   Six divides as 3 x 2, never as 4. `grid-auto-md` fits four across
   on a wide screen and leaves the last two stranded in a half-empty
   row, which reads as a mistake rather than as a layout.
   ------------------------------------------------------------------ */

.spread-grid {
    grid-template-columns: 1fr;
}

@media (min-width: 560px) {
    .spread-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 900px) {
    .spread-grid {
        grid-template-columns: repeat(3, 1fr);
        /* Three columns of a readable width rather than four thin ones. */
        max-width: 68rem;
        margin-inline: auto;
    }
}

/* --- Reading table ------------------------------------------- */

/* Sized so the heading, the table and the button share one screen: having
   to scroll to reach "draw the cards" broke the moment. The card size is
   driven by the space left over, not fixed. */
.reading-stage {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    align-items: center;
    min-height: calc(100dvh - var(--nav-height) - var(--space-9));
    padding-block: var(--space-3);
}

/* Centred with auto margins rather than `justify-content`, which clips the
   overflow above the container and leaves no way to scroll back to it: on a
   phone the eyebrow and the title disappeared off the top. */
.reading-stage > :first-child {
    margin-block-start: auto;
}

.reading-stage > :last-child {
    margin-block-end: auto;
}

.reading-stage__intro {
    max-width: 52ch;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.reading-stage__title {
    margin: 0;
    font-size: clamp(1.45rem, 5.5vw, 2.75rem);
    line-height: 1.1;
}

.reading-stage__summary {
    margin: 0;
    font-size: var(--text-base);
    color: var(--text-secondary);
    text-wrap: pretty;
}

/* --- The deal form ------------------------------------------------ */

.reading-form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    justify-content: center;
    width: min(100%, 680px);
}

.reading-form__field {
    flex: 1 1 260px;
    min-width: 0;
}

.reading-form .btn {
    flex: 0 0 auto;
}

@media (max-width: 767px) {
    /* No forced height on a phone. The content already comes to about 650px
       of an 844px screen, so the minimum only added a dead band of 116px
       between the last link and the disclaimer, and the page scrolled anyway
       because of the footer below it. */
    .reading-stage {
        min-height: 0;
        gap: var(--space-3);
    }

    .reading-stage > :first-child,
    .reading-stage > :last-child {
        margin-block: 0;
    }

    .reading-stage__summary {
        font-size: var(--text-sm);
    }
}

@media (max-width: 559px) {
    .reading-form {
        flex-direction: column;
        align-items: stretch;
    }

    /* `flex: 1 1 260px` is for the row. Turned into a column, the grow
       applies to the height instead and the field swelled to fill the
       screen, pushing the button to the bottom with a void above it. */
    .reading-form__field {
        flex: 0 0 auto;
    }

    .reading-form .btn {
        width: 100%;
    }
}

.reading-stage__back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);
    color: var(--text-muted);
    text-decoration: none;
}

.reading-stage__back:hover {
    color: var(--text-primary);
}

/* One card size for the whole flow: the table and the turned result have to
   match, or the cards appear to grow as they are revealed. */
.reading-cards {
    --card-max: 11rem;
}

.reading-cards .tarot-card {
    max-width: var(--card-max);
    margin-inline: auto;
}

/* On the table the button has to share the screen, so the cards also give way
   to whatever height is left after the text. */
.reading-stage .reading-cards {
    --card-max: min(11rem, 26vh);
}

.reading-stage .card-slot__meaning {
    font-size: var(--text-xs);
}

@media (max-height: 820px) {

    .reading-stage .reading-cards {
        --card-max: min(9rem, 22vh);
    }
}

.reading-result {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    /* The navbar is sticky, so the first line needs room to clear it. */
    scroll-margin-top: calc(var(--nav-height) + var(--space-4));
}

/* The interpretation is the point of the page, so it gets the width. */
.reading-result .yuna-speech {
    padding: var(--space-5);
}

.reading-result .yuna-speech__text {
    font-size: var(--text-base);
}

.reading-cards {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
}

@media (max-width: 639px) {
    .reading-cards {
        grid-template-columns: 1fr;
        max-width: 320px;
        margin-inline: auto;
    }
}

/* ============================================================
   SPREAD LAYOUTS
   The modifier is built from the spread size in the template
   (`reading-cards--{{ spread.size }}`), so three cards sit in a
   row and five keep a balanced 3 + 2 arrangement instead of
   shrinking into a thin strip.
   ============================================================ */

.reading-cards--1 {
    max-width: 18rem;
    margin-inline: auto;
}

.reading-cards--3 {
    grid-template-columns: repeat(3, 1fr);
    max-width: 42rem;
    margin-inline: auto;
}

.reading-cards--5 {
    grid-template-columns: repeat(6, 1fr);
    max-width: 52rem;
    margin-inline: auto;
}

.reading-cards--5 > :nth-child(1) { grid-column: 1 / span 2; }
.reading-cards--5 > :nth-child(2) { grid-column: 3 / span 2; }
.reading-cards--5 > :nth-child(3) { grid-column: 5 / span 2; }
.reading-cards--5 > :nth-child(4) { grid-column: 2 / span 2; }
.reading-cards--5 > :nth-child(5) { grid-column: 4 / span 2; }

/* On a phone the whole spread goes in one row, however many cards it holds.
   Two per row meant scrolling to see a five-card draw, and a spread you have
   to scroll through is no longer a spread you can read at a glance. At 360px
   that is about 59px a card for five, 101px for three. */
@media (max-width: 767px) {
    .reading-cards--1,
    .reading-cards--3,
    .reading-cards--5 {
        --card-max: 100%;
        max-width: none;
        margin-inline: 0;
    }

    .reading-cards--1 {
        grid-template-columns: 1fr;
        max-width: 11rem;
        margin-inline: auto;
    }

    .reading-cards--3 {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-3);
    }

    .reading-cards--5 {
        grid-template-columns: repeat(5, 1fr);
        gap: var(--space-2);
    }

    .reading-cards--5 > :nth-child(n),
    .reading-cards--3 > :nth-child(n) {
        grid-column: auto;
        max-width: none;
        margin-inline: 0;
    }

    .reading-cards--3 .card-slot__position,
    .reading-cards--5 .card-slot__position {
        font-size: var(--text-2xs);
        letter-spacing: 0;
        line-height: var(--leading-tight);
    }

    /* On the table, at a fifth of a phone, there is no room for the position's
       description under the card. Only on the table: on the result that line
       is the card's meaning, which is the reason the page exists. */
    .reading-stage .reading-cards--5 .card-slot__meaning {
        display: none;
    }
}

@media (max-width: 380px) {
    .reading-cards--5 {
        gap: var(--space-1);
    }

    .reading-stage .reading-cards--3 .card-slot__meaning {
        display: none;
    }
}

.reading-question {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    font-style: italic;
    color: var(--text-secondary);
    background: var(--bg-surface-sunken);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm);
}

/* --- Yuna beside the reading, never over it ------------------- */

/* A line of speech, not a banner. Stretched to full width it left a wide
   empty gap to the right of the text, so it is capped and the two elements
   sit together instead of at opposite ends. */
.reading-host {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    width: auto;
    max-width: min(100%, 620px);
    padding: var(--space-3) var(--space-5) var(--space-3) var(--space-3);
    margin-bottom: var(--space-5);
    background: var(--surface-celestial);
    border: var(--border-width) solid var(--border-accent);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
}

.reading-host__portrait {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    object-fit: contain;
    border-radius: var(--radius-pill);
    filter: drop-shadow(0 0 16px color-mix(in srgb, var(--gold) 32%, transparent));
}

.reading-host__text {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0;
    text-wrap: pretty;
}

@media (max-width: 479px) {
    .reading-host {
        display: flex;
        flex-direction: column;
        text-align: center;
        border-radius: var(--radius-lg);
        padding: var(--space-4);
    }
}

/* ============================================================
   THE RESULT ON A PHONE
   Stacked, a card and its panel filled most of the screen and
   the reading took five scrolls to pass. Each card becomes a
   row instead: a thumbnail beside its text. Tapping the
   thumbnail opens it full size.
   ============================================================ */

@media (max-width: 639px) {
    .reading-result .reading-cards,
    .reading-result .reading-cards--1,
    .reading-result .reading-cards--3,
    .reading-result .reading-cards--5 {
        --card-max: 6.5rem;
        grid-template-columns: 1fr;
        gap: var(--space-3);
        max-width: 30rem;
        margin-inline: auto;
    }

    /* The balanced five-card arrangement has no meaning in one column. */
    .reading-result .reading-cards--5 > :nth-child(n),
    .reading-result .reading-cards--3 > :nth-child(n) {
        grid-column: auto;
        max-width: none;
        margin-inline: 0;
    }

    .reading-result .card-slot {
        display: grid;
        grid-template-columns: var(--card-max) 1fr;
        grid-template-areas:
            "card position"
            "card panel";
        align-items: start;
        gap: var(--space-1) var(--space-3);
        text-align: left;
    }

    .reading-result .card-slot__position {
        grid-area: position;
    }

    .reading-result .tarot-card {
        grid-area: card;
    }

    .reading-result .card-slot__panel {
        grid-area: panel;
        /* Fills the column beside the card rather than matching its width:
           the symmetry that rule exists for only applies when they stack. */
        width: auto;
        align-items: flex-start;
        text-align: left;
        padding: var(--space-2) var(--space-3);
    }
}

/* ============================================================
   THE READING, IN TWO HALVES
   What fell, and what Yuna makes of it. Stacked on a phone,
   side by side once there is room for both to be read at once.
   ============================================================ */

.reading-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    align-items: start;
}

@media (min-width: 1024px) {
    .reading-split {
        /* The cards take what they need; the interpretation takes the rest,
           because it is the longer of the two. */
        grid-template-columns: minmax(22rem, 26rem) 1fr;
        gap: var(--space-6);
    }

    /* The cards stay in view while the interpretation is read, which is the
       reason for splitting them in the first place. */
    .reading-split__cards {
        position: sticky;
        top: calc(var(--nav-height) + var(--space-4));
    }
}

.reading-split__cards,
.reading-split__voice {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

.reading-section__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding-bottom: var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--accent-ink);
    border-bottom: 1px solid color-mix(in srgb, var(--gold) 22%, transparent);
}

.reading-section__title .material-symbols-rounded {
    font-size: 1.05rem;
    width: 1.05rem;
    text-align: center;
    flex-shrink: 0;
}

/* Three cards across a column this narrow left each meaning about twelve
   characters wide, hyphenated to pieces. In the sidebar they become rows
   instead, the same shape the phone already uses: thumbnail on the left, the
   text beside it with room to be read. */
@media (min-width: 1024px) {
    .reading-split .reading-cards,
    .reading-split .reading-cards--1,
    .reading-split .reading-cards--3,
    .reading-split .reading-cards--5 {
        --card-max: 6.5rem;
        grid-template-columns: 1fr;
        gap: var(--space-3);
        max-width: none;
        margin-inline: 0;
    }

    .reading-split .reading-cards--5 > :nth-child(n),
    .reading-split .reading-cards--3 > :nth-child(n) {
        grid-column: auto;
        max-width: none;
        margin-inline: 0;
    }

    .reading-split .card-slot {
        display: grid;
        grid-template-columns: var(--card-max) 1fr;
        grid-template-areas:
            "card position"
            "card panel";
        align-items: start;
        gap: var(--space-1) var(--space-3);
        text-align: left;
    }

    .reading-split .card-slot__position {
        grid-area: position;
    }

    .reading-split .tarot-card {
        grid-area: card;
    }

    .reading-split .card-slot__panel {
        grid-area: panel;
        /* Fills the column beside the card: matching the card's width is for
           when they stack, not when they sit side by side. */
        width: auto;
        align-items: flex-start;
        text-align: left;
        padding: var(--space-2) var(--space-3);
    }

    /* Yuna's panel fills its column rather than being capped for a page. */
    .reading-split .yuna-speech {
        width: 100%;
    }
}

/* ============================================================
   SI O NO
   La respuesta va grande y antes que el texto: es lo que se vino
   a buscar. El color acompana, pero la palabra se lee sola.
   ============================================================ */

.yes-no {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    margin: var(--space-4) auto var(--space-6);
    max-width: 32rem;
    padding: var(--space-5);
    text-align: center;
    border: 2px solid var(--border);
}

.yes-no--yes {
    border-color: var(--secondary);
}

.yes-no--no {
    border-color: color-mix(in srgb, var(--text-secondary) 60%, transparent);
}

.yes-no__word {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 8vw, 4rem);
    line-height: 1;
    color: var(--text-primary);
}

.yes-no--yes .yes-no__word {
    color: var(--secondary-contrast);
}

.yes-no__note {
    margin: 0;
    color: var(--text-secondary);
    text-wrap: pretty;
}

/* ============================================================
   TIRADAS DE LUNA
   ============================================================ */

.spread-card--locked {
    opacity: 0.78;
}

.reading-locked {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    margin-block: var(--space-6);
    padding: var(--space-6) var(--space-5);
    text-align: center;
}

.reading-locked__icon {
    font-size: 2.5rem;
    color: var(--secondary-contrast);
}

.reading-locked__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-2xl, var(--text-xl));
    color: var(--text-primary);
}

.reading-locked__note {
    margin: 0;
    max-width: 32rem;
    color: var(--text-secondary);
}

/* ============================================================
   EL DIARIO DE CARTAS
   ============================================================ */

.diary {
    margin-top: var(--space-6);
    padding: var(--space-5);
}

.diary__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-2);
    font-family: var(--font-display);
    font-size: var(--text-xl);
}

.diary__lead,
.diary__suits {
    margin: 0 0 var(--space-3);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.diary__count {
    margin: 0 0 var(--space-2);
    font-weight: var(--weight-bold, 600);
}

.diary__top {
    margin: 0 0 var(--space-3);
    padding-left: var(--space-5);
}

.diary__top li + li {
    margin-top: var(--space-1);
}

/* ============================================================
   ¿TE SIRVIO?
   ============================================================ */

.feedback {
    margin: var(--space-6) auto var(--space-5);
    max-width: 32rem;
    padding: var(--space-4) var(--space-5);
    text-align: center;
}

.feedback__question {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
    font-family: var(--font-display);
    font-size: var(--text-lg);
}

.feedback__question:last-child {
    margin-bottom: 0;
}

/* La tirada del dia: cuanto falta para la siguiente. */
.reading-renews {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
    color: var(--text-secondary);
}

.reading-renews .material-symbols-rounded {
    color: var(--secondary-contrast);
}

/* ============================================================
   COMPARTIR UN TROZO
   Discreto, bajo cada parrafo: el texto manda, el boton acompaña.
   ============================================================ */

.fragment + .fragment {
    margin-top: var(--space-3);
}

.fragment-share {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-1);
}

.fragment-share__button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 32px;
    text-decoration: none;
}

.fragment-share__button .material-symbols-rounded {
    font-size: 1.05em;
    color: var(--secondary-contrast);
}

.fragment-share__status {
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

.quote-gold .fragment-share {
    display: flex;
}