/* ---- The app's two fonts (24 September 2026) ----
 * EB Garamond for everything read, buttons and form boxes included; IM Fell
 * English for guardian names, headings and small labels. Both are stored here
 * so iPhone and Android see the same letters. Do not add a third. */
@font-face {
    font-family: 'IM Fell English';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/im-fell-english.woff2') format('woff2');
}

@font-face {
    font-family: 'EB Garamond';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/eb-garamond.woff2') format('woff2');
}

@font-face {
    font-family: 'EB Garamond';
    font-style: italic;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/eb-garamond-italic.woff2') format('woff2');
}

button, input, textarea, select {
    font-family: inherit;
}

/* Garamond's small letters are short, so at Georgia's sizes it read a size
 * smaller. This scales every font to the same small-letter height instead of
 * resizing each rule by hand. */
html {
    font-size-adjust: 0.46;
}

/* Love Queen App — room shells and animation system (Task 2) */

* {
    box-sizing: border-box;
}

/* ---- Dragon numerology conversation (Task 7, Phase 2) ---- */

.numerology-flow-card,
.room-static-dialogue {
    position: absolute;
    z-index: 8;
    left: 5%;
    right: 5%;
    top: auto;
    bottom: 3%;
    max-height: 64%;
    /* The card paints the parchment, so it must not be the thing that scrolls
       or fades: masking it would eat the torn edge. The step inside it does
       both instead. */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    color: #371e0e;
    /* No background-colour: the sheet is a cut-out with a torn, transparent
       edge, so a solid colour behind it would draw back the rectangle the
       cut-out exists to remove. */
    background-color: transparent;
    background-image: url("../rooms/numerology/parchment-sheet-cutout.webp");
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border: 0;
    border-radius: 0;
    box-shadow: 0 10px 27px rgba(0, 0, 0, 0.34);
    /* The sheet's bottom tear is deeper than its top one (35px vs 23px in
       the source image), so equal padding is not equal clearance: it puts
       the buttons on the tear while the speaker sits clear of it. The
       bottom carries that difference. */
    padding: 1.3rem 1.45rem 1.95rem;
    -webkit-overflow-scrolling: touch;
}

.room-entry-button {
    position: absolute;
    z-index: 9;
    left: 50%;
    bottom: 7%;
    transform: translateX(-50%);
    /* Natural width: otherwise left: 50% caps it at half the frame and
       every line wraps again on a narrow phone. */
    width: max-content;
    max-width: calc(100% - 2rem);
    white-space: pre-line;
    /* A torn scrap of parchment tucked into the scene (Louisa's pick,
       24 September 2026, over the neat gold-rimmed pill it replaced). */
    border: 0;
    border-radius: 0;
    padding: 0.5rem 1rem 0.6rem;
    background: url('../rooms/apothecary/parchment.webp') center / 300% auto;
    color: #3b2412;
    font: 400 1.3rem/1.15 'IM Fell English', Georgia, serif;
    clip-path: polygon(0% 8%, 6% 2%, 14% 6%, 23% 0%, 34% 5%, 45% 1%, 57% 6%, 68% 0%, 79% 4%, 90% 1%, 100% 7%, 98% 30%, 100% 55%, 97% 78%, 100% 94%, 91% 100%, 80% 95%, 68% 100%, 55% 96%, 43% 100%, 31% 95%, 20% 100%, 9% 96%, 0% 100%, 2% 72%, 0% 48%, 3% 26%);
    cursor: pointer;
}

.room-entry-button::after {
    content: ' \2192';
    font-size: 0.9em;
}

/* The Cat's rose quartz, the same slab her reading sheet is cut from. */
.room-entry-button--quartz {
    clip-path: none;
    background: none;
    border: 14px solid transparent;
    border-image: url("../rooms/runes/cat-chat-panel.webp") 44 fill stretch;
    padding: 0.05rem 0.4rem 0.1rem;
    color: #4a1f2c;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.45));
}

/* No material at all: bright words written straight onto the scene. */
.room-entry-button--ink {
    clip-path: none;
    background: none;
    padding: 0.3rem 0.6rem;
    font-size: 1.3rem;
    color: #fff4d6;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.95), 0 0 10px rgba(0, 0, 0, 0.85), 0 0 18px rgba(255, 210, 140, 0.55);
}

/* Katy D's dusk sky: lighter than her reading sheet, with small
   four-point stars rather than dots. */
.room-entry-button--nightsky {
    clip-path: none;
    border: 1px solid rgba(230, 214, 255, 0.55);
    border-radius: 10px;
    padding: 0.5rem 1.3rem 0.6rem;
    color: #fff3cf;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0 C10.6 7 13 9.4 20 10 C13 10.6 10.6 13 10 20 C9.4 13 7 10.6 0 10 C7 9.4 9.4 7 10 0Z' fill='%23fff8e0'/%3E%3C/svg%3E") 6% 22% / 9px 9px no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0 C10.6 7 13 9.4 20 10 C13 10.6 10.6 13 10 20 C9.4 13 7 10.6 0 10 C7 9.4 9.4 7 10 0Z' fill='%23fff8e0'/%3E%3C/svg%3E") 91% 26% / 11px 11px no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0 C10.6 7 13 9.4 20 10 C13 10.6 10.6 13 10 20 C9.4 13 7 10.6 0 10 C7 9.4 9.4 7 10 0Z' fill='%23fff8e0'/%3E%3C/svg%3E") 74% 86% / 7px 7px no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0 C10.6 7 13 9.4 20 10 C13 10.6 10.6 13 10 20 C9.4 13 7 10.6 0 10 C7 9.4 9.4 7 10 0Z' fill='%23fff8e0'/%3E%3C/svg%3E") 97% 72% / 7px 7px no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0 C10.6 7 13 9.4 20 10 C13 10.6 10.6 13 10 20 C9.4 13 7 10.6 0 10 C7 9.4 9.4 7 10 0Z' fill='%23fff8e0'/%3E%3C/svg%3E") 3% 70% / 7px 7px no-repeat,
        linear-gradient(180deg, rgba(92, 74, 160, 0.94), rgba(58, 44, 112, 0.95));
    box-shadow: 0 0 16px rgba(190, 160, 255, 0.45), 0 4px 10px rgba(0, 0, 0, 0.4);
    text-shadow: 0 0 6px rgba(255, 225, 150, 0.5);
}

/* "Tap anywhere to go back" on a look-closer view: in after a second,
   gone after about five. */
.room-return-hint {
    opacity: 0;
    animation: room-return-hint 5s ease 1s forwards;
}

@keyframes room-return-hint {
    0% { opacity: 0; }
    15% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .room-return-hint {
        animation: none;
        opacity: 1;
    }
}

.room-entry-button--hint {
    margin: 0;
    pointer-events: none;
    cursor: default;
}

.room-entry-button--hint::after {
    content: none;
}

.room-static-dialogue {
    top: auto;
    bottom: 12%;
    max-height: 42%;
    pointer-events: none;
}

/* The Dragon is part of the reading, not wallpaper behind an opaque modal.
 * Keeping the flow low in the frame leaves his face, wings and hearth in
 * view. The form can scroll inside this sheet on smaller phones. */
.numerology-flow-card--reading {
    top: auto;
    max-height: 64%;
    overflow: hidden;
    padding: 1.15rem 1.4rem 1.8rem;
}

/* The scrolling layer. min-height:0 is what lets a flex child actually
   shrink below its content and scroll rather than stretching its parent. */
.numerology-flow-step {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/* Set while there is still text below the fold, and removed on arrival at the
   bottom, so a finished reading ends cleanly instead of always looking cut. */
.numerology-flow-step--more {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 38px), rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 38px), rgba(0, 0, 0, 0) 100%);
}

/* Scrolling with no visible bar: a scrollbar track drawn down the parchment
   reads as a browser artefact sitting on the art. The content still scrolls
   by touch and wheel, and nothing is silently lost the way overflow:hidden
   lost the last lines of the longer readings on a small phone. */
.numerology-flow-card,
.numerology-flow-step,
.room-static-dialogue {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.numerology-flow-card::-webkit-scrollbar,
.numerology-flow-step::-webkit-scrollbar,
.room-static-dialogue::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.room-static-dialogue h2,
.numerology-result-heading {
    margin: 0 0 0.45rem;
    font-family: 'IM Fell English', "EB Garamond", Georgia, serif;
    color: #542d14;
}

.room-static-dialogue p,
.numerology-flow-card p {
    line-height: 1.48;
}

.numerology-flow-speaker {
    margin: 0;
    color: #6b3b1b;
    font-family: 'IM Fell English', "EB Garamond", Georgia, serif;
    font-size: 1.05rem;
}

.numerology-flow-prompt {
    margin: 0.35rem 0 1rem;
    font-family: "EB Garamond", Georgia, serif;
    font-size: 1.08rem;
    line-height: 1.36;
}

.numerology-flow-grid {
    display: grid;
    gap: 0.7rem;
}

.numerology-flow-grid--names {
    grid-template-columns: 1fr 1fr;
}

.numerology-flow-grid--date {
    grid-template-columns: 0.7fr 1.4fr 1fr;
}

.numerology-flow-label {
    margin: 1rem 0 0.4rem !important;
    color: #65391c;
    font-size: 0.8rem;
}

.numerology-flow-field {
    display: grid;
    gap: 0.3rem;
    color: #65391c;
    font-size: 0.75rem;
}

.numerology-flow-input {
    width: 100%;
    min-width: 0;
    border: 1px solid rgba(75, 38, 16, 0.78);
    border-radius: 9px;
    padding: 0.68rem 0.6rem;
    background: rgba(255, 248, 222, 0.28);
    color: #2e180b;
    font: inherit;
}

.numerology-flow-input option {
    color: #21130a;
}

.numerology-flow-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 0.4rem;
}

/* On a result the reading text is indented by .numerology-result's own side
   padding, but the buttons sit outside that block and were starting 12px to
   its left. Match the indent and close the gap under the last line. */
.numerology-flow-step--results .numerology-flow-actions {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    margin-top: 0.5rem;
}

.numerology-flow-actions--stacked {
    flex-direction: column;
    align-items: flex-start;
}

.numerology-flow-button {
    border: 1px solid rgba(65, 31, 14, 0.92);
    border-radius: 999px;
    padding: 0.4rem 0.72rem;
    background: linear-gradient(135deg, rgba(65, 32, 13, 0.96), rgba(47, 22, 9, 0.98));
    box-shadow: inset 0 1px 0 rgba(255, 226, 165, 0.08), 0 2px 4px rgba(37, 17, 6, 0.18);
    color: #f8e6bd;
    font: inherit;
    font-size: 0.84rem;
    cursor: pointer;
}

.numerology-flow-button--quiet {
    background: rgba(248, 226, 174, 0.07);
    box-shadow: none;
    color: #3c1e0e;
}

.numerology-flow-step--pause {
    min-height: 100%;
    display: grid;
    place-items: center;
    text-align: center;
}

.numerology-results {
    display: grid;
    /* Only one result renders at a time, so this gap's only visible job is
       the space under the "Number 1 of 4" line. Kept small for that. */
    gap: 0.3rem;
}

.numerology-result {
    padding: 0.1rem 0.75rem 0.15rem;
    border: 0;
    border-top: 0;
    border-radius: 0;
    background: transparent;
}

.numerology-result-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    font-size: 1rem;
}

.numerology-result-number {
    font-family: "EB Garamond", Georgia, serif;
    color: #633417;
    font-size: 2rem;
    line-height: 1;
}

/* The label sat at the heading's inherited 1rem, which read as a caption
   next to the 2rem number rather than as the name of the thing. */
.numerology-result-label {
    font-size: 1.5rem;
}

.numerology-result-working,
.numerology-result-tagline,
.numerology-result-master,
.numerology-result-meaning {
    margin: 0.45rem 0 0;
}

.numerology-result-working,
.numerology-result-tagline {
    color: #70441f;
    font-size: 0.78rem;
}

.numerology-result-master {
    color: #6d3f1e;
    font-style: italic;
}

.numerology-result-meaning {
    /* Charter over Iowan Old Style for the reading itself. Iowan's thin
       strokes are what made this hard to read on the parchment; Charter is
       a book face drawn to survive coarse rendering, so it keeps the old
       feeling with far less thick/thin variation. Georgia is the fallback
       and the closest match off Apple devices. */
    font-family: "EB Garamond", Georgia, serif;
    font-size: 1.0625rem;
    line-height: 1.62;
    color: #2b1608;
    /* Reading a fine-stroked serif over the parchment's mottling is harder
       than the contrast figure suggests: the texture's noise sits at about
       the same scale as the letter strokes. Contrast is already 10.7:1, so
       darkening further buys nothing. A pale halo the colour of clean
       parchment separates each letter from whatever is behind it. The font
       has no medium weight, only regular and bold, so weight is not
       available as a lever here. */
    text-shadow: 0 0 3px rgba(250, 242, 224, 0.95), 0 0 6px rgba(250, 242, 224, 0.65);
}

@media (max-width: 390px) {
    .numerology-flow-card {
        left: 3%;
        right: 3%;
        /* Tighter sides to buy width on a narrow phone; the bottom still
           carries the deeper tear's extra. */
        padding: 0.9rem 0.8rem 1.55rem;
    }

    .numerology-flow-grid--names {
        grid-template-columns: 1fr;
    }
}

/* ---- Dragon numerology pairing (Task 7, Phase 3) ---- */

.numerology-pair-block {
    margin-top: 1rem;
    padding: 0.8rem;
    border: 1px solid rgba(241, 202, 120, 0.24);
    border-radius: 12px;
    background: rgba(255, 244, 215, 0.055);
}

.numerology-pair-heading {
    margin: 0 0 0.6rem;
    font-family: 'IM Fell English', "EB Garamond", Georgia, serif;
    font-size: 0.95rem;
    color: #542d14;
}

/* A pairing puts two date rows inside a bordered block, so each row has the
 * block's padding taken off it as well as the card's. Phase 2's column ratio
 * and input padding clip the day and the year at that width. */
.numerology-pair-block .numerology-flow-grid--date {
    grid-template-columns: 0.85fr 1.3fr 1.05fr;
}

.numerology-pair-block .numerology-flow-input {
    padding-left: 0.45rem;
    padding-right: 0.3rem;
}

.numerology-flow-hint {
    margin: 0.9rem 0 0;
    color: #70441f;
    font-size: 0.78rem;
}

.numerology-pairing-stream {
    margin-top: 0.45rem;
}

.numerology-pairing-progress {
    margin: 0 0 0.15rem;
    color: #70441f;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* The gap between beats is wider than the gap inside one. */
.numerology-bubble--opens {
    margin-top: 0.5rem;
}

.numerology-pairing-stream > .numerology-bubble--opens:first-child {
    margin-top: 0;
}

.numerology-bubble {
    padding: 0.8rem 0.9rem;
    border: 1px solid rgba(241, 202, 120, 0.24);
    border-radius: 14px;
    background: rgba(255, 244, 215, 0.055);
}

.numerology-bubble--page {
    min-height: 0;
    padding: 0.45rem 0.15rem 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

/* A beat is one speech, paged for breath. The bubble that starts a beat is a
 * bordered card; the ones that carry the rest of it hang off it unbordered,
 * so the visitor can see at a glance that the Dragon is still on the same
 * subject. Four of the seven beats carry no caption, and without this the
 * reflection reads as more counsel. */
.numerology-bubble--continues {
    margin-left: 0.9rem;
    border: 0;
    border-left: 1px solid rgba(241, 202, 120, 0.28);
    border-radius: 0;
    padding: 0.15rem 0 0.15rem 0.85rem;
    background: none;
}

.numerology-bubble-caption {
    margin: 0;
    color: #6b3b1b;
    font-family: 'IM Fell English', "EB Garamond", Georgia, serif;
    font-size: 1rem;
}

.numerology-bubble-numbers {
    margin: 0.15rem 0 0;
    color: #633417;
    font-size: 1.35rem;
    font-family: "EB Garamond", Georgia, serif;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.numerology-bubble-text {
    margin: 0.45rem 0 0;
    font-family: "EB Garamond", Georgia, serif;
    font-size: 0.94rem;
    line-height: 1.46;
}

/* The caption belongs to the first bubble of a beat only, so a bubble that
 * is a continuation sits tighter against the one above it. */
.numerology-bubble-caption + .numerology-bubble-text,
.numerology-bubble-numbers + .numerology-bubble-text {
    margin-top: 0.45rem;
}

.numerology-bubble > .numerology-bubble-text:first-child {
    margin-top: 0;
}

@media (max-width: 390px) {
    .numerology-pair-block {
        padding: 0.65rem;
    }

    .numerology-bubble {
        padding: 0.7rem;
    }

    .numerology-flow-card {
        top: auto;
    }

    .numerology-flow-card--reading {
        top: auto;
    }

    .numerology-bubble--page {
        min-height: 0;
    }
}

/* ---- Katy D astrology conversation (Astrology MVP) ---- */

/* Katy D sits high in her tree (roughly 9-43% of the frame), so the sheet
 * stays low and keeps her and the canopy in view.
 *
 * It is not a card. A rounded rectangle with a 1px border, a big soft drop
 * shadow and a gradient fill is a component library sitting on somebody's
 * artwork; this is meant to be the dark gathering at the foot of the tree.
 * So: no border, no shadow, no corners, the full width of the frame, and a
 * top edge that dissolves into the art instead of ruling a line across it. */
.astrology-flow-card {
    position: absolute;
    z-index: 8;
    left: 0;
    right: 0;
    /* Anchored to the floor of the frame and sized by what it holds, like
       the Dragon's sheet, so a short page leaves more of the tree showing
       instead of a half-empty panel. */
    top: auto;
    bottom: 0;
    max-height: 64%;
    /* The sheet must not be the thing that scrolls: the step inside it
       scrolls and fades instead, so the fade never eats the blended top
       edge. Visible, not hidden, because the blend hangs above the sheet
       and overflow: hidden clips it away; nothing else here overflows. */
    overflow: visible;
    display: flex;
    flex-direction: column;
    color: #f3ecff;
    background: linear-gradient(180deg, rgba(24, 17, 45, 0.93), rgba(12, 8, 24, 0.97));
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0.95rem 1.05rem 0.9rem;
    -webkit-overflow-scrolling: touch;
}

/* A single-sign reading holds a steady page height as the visitor goes on.
   The sheet starts at Katy D's feet (43% down the source art); the existing
   inner scroll and fade keep longer lines reachable on smaller phones. */
.astrology-flow-card--sign-reading {
    height: 57%;
    max-height: 57%;
}

/* The blend. It hangs above the sheet rather than inside it, so it costs no
   reading height, and .room-frame clips whatever runs past the art. */
/* The Zodiac Sky has no Katy D in the art to keep clear, so its readings
   can stand taller and fit each sign in three pages. */
/* Hung from a fixed top edge and only as tall as the page, with Go on
   straight under the words. A fixed 84% height with the buttons pinned to
   its foot left a tall empty box between the text and Go on (Louisa,
   28 September). The top stays put page to page; the sky shows below. */
.astrology-flow-card--sign-reading.astrology-flow-card--sky {
    top: 16%;
    bottom: auto;
    height: auto;
    max-height: 84%;
}

.astrology-flow-card--sky::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 54px;
    background: linear-gradient(180deg, rgba(12, 8, 24, 0.97), rgba(12, 8, 24, 0));
    pointer-events: none;
}

.astrology-flow-card::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 54px;
    background: linear-gradient(180deg, rgba(24, 17, 45, 0), rgba(24, 17, 45, 0.93));
    pointer-events: none;
}

/* The scrolling layer. min-height: 0 is what lets a flex child shrink below
   its content and actually scroll rather than stretching its parent. */
.astrology-flow-step {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/* Set while there is still text below the fold and cleared on arrival at the
   bottom, so a finished reading ends cleanly instead of always looking cut. */
.astrology-flow-step--more {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 38px), rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 38px), rgba(0, 0, 0, 0) 100%);
}

/* Scrolling with no visible bar: a scrollbar track drawn down the sheet reads
   as a browser artefact sitting on the art. Nothing is silently lost the way
   overflow: hidden was losing the last third of a sun-sign reading, and the
   "Go on" button with it. */
.astrology-flow-card,
.astrology-flow-step,
.runes-flow-card,
.runes-flow-step {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.astrology-flow-card::-webkit-scrollbar,
.astrology-flow-step::-webkit-scrollbar,
.runes-flow-card::-webkit-scrollbar,
.runes-flow-step::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.astrology-flow-card p {
    line-height: 1.48;
}

/* Katy D's name, not a system label. Uppercase with wide tracking is one of
   the strongest "this is an app panel" tells there is. */
.astrology-flow-speaker {
    margin: 0;
    color: #c9b4ef;
    font-family: 'IM Fell English', "EB Garamond", Georgia, serif;
    font-size: 1.05rem;
}

.astrology-flow-prompt {
    margin: 0.3rem 0 0.75rem;
    font-family: "EB Garamond", Georgia, serif;
    font-size: 1rem;
    line-height: 1.38;
}

.astrology-flow-grid {
    display: grid;
    gap: 0.7rem;
}

.astrology-flow-grid--date {
    grid-template-columns: 0.7fr 1.4fr 1fr;
}

.astrology-flow-grid--pair {
    grid-template-columns: 1fr 1fr;
}

.astrology-flow-field {
    display: grid;
    gap: 0.3rem;
    color: #ded0f5;
    font-size: 0.75rem;
}

.astrology-flow-input {
    width: 100%;
    min-width: 0;
    border: 1px solid rgba(198, 178, 244, 0.36);
    border-radius: 9px;
    padding: 0.6rem;
    background: rgba(240, 236, 255, 0.09);
    color: #fbf8ff;
    font: inherit;
}

.astrology-flow-input option {
    color: #1b1330;
}

.astrology-flow-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.7rem;
}

/* Inside a reading the buttons follow a sentence rather than a form, so they
   sit closer to it. */
.astrology-flow-step--reading .astrology-flow-actions {
    margin-top: 0.45rem;
}


/* These turn the page inside a reading. They are not a web app's primary call
   to action and should not be sized like one. */
.astrology-flow-button {
    border: 1px solid rgba(178, 158, 232, 0.5);
    border-radius: 999px;
    padding: 0.4rem 0.72rem;
    background: linear-gradient(135deg, rgba(94, 68, 158, 0.92), rgba(64, 44, 116, 0.95));
    box-shadow: inset 0 1px 0 rgba(226, 212, 255, 0.1);
    color: #f6f1ff;
    font: inherit;
    font-size: 0.84rem;
    cursor: pointer;
}

.astrology-flow-button--quiet {
    background: rgba(216, 204, 255, 0.06);
    border-color: rgba(178, 158, 232, 0.3);
    box-shadow: none;
    color: #d6c8f4;
}

.astrology-flow-step--pause {
    /* The step is already the flex child that fills the sheet, so 100% here
       only pushed it past the sheet's own padding. Enough height to read as
       Katy D taking a moment rather than as a status strip. */
    min-height: 3.2rem;
    display: grid;
    place-items: center;
    text-align: center;
}

.astrology-sign-head,
.astrology-pair-head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0.25rem 0 0.5rem;
}

.astrology-sign-symbol {
    font-size: 1.75rem;
    line-height: 1;
    color: #f0d98a;
}

.astrology-pair-amp {
    color: #cdb8f2;
    font-family: "EB Garamond", Georgia, serif;
}

.astrology-sign-name {
    margin: 0;
    font-family: "EB Garamond", Georgia, serif;
    font-weight: 500;
    font-size: 1.15rem;
    color: #f0d98a;
}

.astrology-sign-dates {
    margin: 0.1rem 0 0;
    color: #bda8e6;
    font-size: 0.76rem;
}

.astrology-reading-stream {
    margin-top: 0.35rem;
}

/* Katy D counting the reading out in her own words. Uppercase with wide
   tracking turned the line into a page counter from a different product. */
.astrology-reading-progress {
    margin: 0 0 0.35rem;
    color: #bda8e6;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* No bordered box. The reading was a bubble inside a card inside the frame,
   three nested rectangles deep, every one of them drawn over the art. The
   words sit on the night now. */
.astrology-bubble {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}

/* Chemistry is a change of register, not a change of speaker, so it is marked
   the way a margin note is rather than by another box. */
.astrology-bubble--chemistry {
    padding-left: 0.75rem;
    border-left: 1px solid rgba(244, 146, 96, 0.5);
}

/* The caption is pink everywhere else. Here it takes the warm tone of the
   rule beside it, so the change of register reads before the text does. */
.astrology-bubble--chemistry .astrology-bubble-caption {
    color: #f0a074;
}

.astrology-bubble-caption {
    margin: 0;
    color: #ea9bc0;
    font-family: 'IM Fell English', "EB Garamond", Georgia, serif;
    font-size: 1rem;
}

.astrology-bubble-text {
    margin: 0.4rem 0 0;
    font-family: "EB Garamond", Georgia, serif;
    font-size: 1rem;
    line-height: 1.55;
}

.astrology-bubble > .astrology-bubble-text:first-child {
    margin-top: 0;
}

/* Zodiac Sky: each "sign they're in love with you" gets a small heading. */
.astrology-bubble-heading {
    margin: 1rem 0 0;
    color: #ea9bc0;
    font-family: 'IM Fell English', "EB Garamond", Georgia, serif;
    font-size: 1.05rem;
    font-weight: normal;
    line-height: 1.3;
}

.astrology-bubble-heading:first-child {
    margin-top: 0;
}

.astrology-bubble-heading + .astrology-bubble-text {
    margin-top: 0.25rem;
}

/* Short paragraphs and a modest line measure make the longer sign readings
   easier to follow without adding boxes or labels over Katy D's art. */
.astrology-flow-card--sign-reading .astrology-bubble-text {
    max-width: 44ch;
    line-height: 1.6;
}

.astrology-flow-card--sign-reading .astrology-bubble-text + .astrology-bubble-text {
    margin-top: 0.7rem;
}

@media (max-width: 390px) {
    .astrology-flow-card {
        padding: 0.85rem 0.9rem 0.8rem;
    }
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
    background: #0b0b12;
    color: #f4ecf0;
    font-family: "EB Garamond", Georgia, serif;
    font-variant-numeric: lining-nums;
}

#app-root {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
}

/* ---- Room stage ----
 * The stage is a dark backdrop that centres a fixed-aspect frame sized
 * in JS to match the art (768x1376) — contained, not cover-cropped, so
 * nothing is stretched or cut off and hotspot percentages line up with
 * the actual image every time. */

.room-stage {
    position: relative;
    flex: 1 1 auto;
    overflow: hidden;
    background: #05050a;
    display: flex;
    align-items: center;
    justify-content: center;
}

.room-frame {
    position: relative;
    overflow: hidden;
    flex: 0 0 auto;
}

.room-state {
    position: absolute;
    inset: 0;
    opacity: 1;
    transition: opacity 0.6s ease;
}

.room-state--entering {
    opacity: 0;
    transition: none;
}

.room-state--leaving {
    opacity: 0;
    pointer-events: none;
}

.room-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    background-position: center;
    will-change: transform;
}

.room-layer--drift {
    animation-name: roomDrift;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: var(--drift-duration, 24s);
    animation-delay: var(--drift-delay, 0s);
    --drift-amount: 6px;
}

@keyframes roomDrift {
    from {
        transform: translate(0, 0) scale(1.02);
    }
    to {
        transform: translate(calc(var(--drift-amount, 6px) * -1), calc(var(--drift-amount, 6px) * 0.6)) scale(1.04);
    }
}

/* A glow layer that breathes in and out slowly (the runes chalk). */
.room-layer--pulse {
    animation: roomPulse var(--pulse-duration, 7s) ease-in-out infinite alternate;
}

@keyframes roomPulse {
    from {
        opacity: 0.3;
    }
    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .room-layer--pulse {
        animation: none;
    }
}

/* Flames lifted from the art, licking upward and swaying from their base. */
.room-layer--flame {
    transform-origin: 50% 100%;
    animation: roomFlame var(--flame-duration, 2.6s) ease-in-out var(--flame-delay, 0s) infinite;
}

@keyframes roomFlame {
    0%, 100% { transform: scale(1, 1) skewX(0deg); opacity: 0.85; }
    18% { transform: scale(1.01, 1.07) skewX(-2deg); opacity: 1; }
    33% { transform: scale(0.99, 0.98) skewX(1deg); opacity: 0.75; }
    52% { transform: scale(1.02, 1.1) skewX(2.5deg); opacity: 1; }
    70% { transform: scale(1, 1.02) skewX(-1deg); opacity: 0.8; }
    85% { transform: scale(1.01, 1.06) skewX(1.5deg); opacity: 0.95; }
}

.room-layer--candle {
    transform-origin: 50% 100%;
    animation: roomCandle var(--flame-duration, 1.8s) ease-in-out var(--flame-delay, 0s) infinite;
}

@keyframes roomCandle {
    0%, 100% { transform: scale(1, 1) skewX(0deg); opacity: 0.9; }
    15% { transform: scale(0.92, 1.22) skewX(-9deg); opacity: 1; }
    30% { transform: scale(1.05, 0.9) skewX(4deg); opacity: 0.7; }
    48% { transform: scale(0.9, 1.28) skewX(10deg); opacity: 1; }
    64% { transform: scale(1, 1.05) skewX(-5deg); opacity: 0.8; }
    82% { transform: scale(0.94, 1.18) skewX(6deg); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .room-layer--candle,
    .room-layer--flame {
        animation: none;
    }
}

/* ---- Moon disc (Task 8, static picture per Louisa 2026-08-21) ---- */

.moon-disc {
    position: absolute;
    /* x/y from the manifest are the disc's centre point, not its
       top-left corner - without this the disc drifts up-left of where
       it's meant to sit whenever its size changes independently of
       its position. */
    transform: translate(-50%, -50%);
    /* Purely visual, sits above the hotspot in stacking order - without
       this, clicks on the disc itself (i.e. the moon, the only thing a
       visitor would actually try to tap) never reach the hotspot below
       it. This is why tapping the moon did nothing at all. */
    pointer-events: none;
    z-index: 4;
    cursor: pointer;
    /* moon-disc.webp has its own soft glow baked in (wide, pre-coloured
       alpha fade) rather than a CSS box-shadow - a box-shadow here is
       redundant with that (and, at this size, its own blur radius is
       small enough relative to the box that it draws a visible ring
       of its own right at the image's edge). The breathing effect
       below is done as an opacity pulse instead. */
    background: url("../rooms/moon/moon-disc.webp") center / cover no-repeat;
}

.moon-disc--glow {
    animation: moonDiscGlow 3.6s ease-in-out infinite;
}

@keyframes moonDiscGlow {
    0%, 100% {
        opacity: 0.85;
        filter: brightness(1);
    }
    50% {
        opacity: 1;
        filter: brightness(1.15);
    }
}

/* A tap bump, layered alongside the glow breathing above - the glow
   animates opacity/filter, this animates transform, so both run at
   once without one cutting the other off. */
.moon-disc--tap {
    animation: moonDiscTap 0.4s ease-out;
}

.moon-disc--glow.moon-disc--tap {
    animation: moonDiscGlow 3.6s ease-in-out infinite, moonDiscTap 0.4s ease-out;
}

@keyframes moonDiscTap {
    0% {
        transform: translate(-50%, -50%) scale(1);
    }
    30% {
        transform: translate(-50%, -50%) scale(1.18);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
    }
}

/* ---- Text-draw card (Task 8's affirmation pull; generic mechanism) ---- */

.affirmation-card,
.text-draw-card {
    position: absolute;
    left: 8%;
    right: 8%;
    top: 58%;
    transform: translateY(-50%);
    z-index: 6;
    background: rgba(10, 12, 24, 0.55);
    backdrop-filter: blur(3px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 1.4rem 1.2rem;
    text-align: center;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.affirmation-card.is-visible,
.text-draw-card.is-visible {
    opacity: 1;
}

.affirmation-card p,
.text-draw-card p {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.5;
    font-style: italic;
    color: #f4ecf0;
    min-height: 1.5em;
}

.text-draw-card__redraw {
    appearance: none;
    margin-top: 1rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    color: #f4ecf0;
    font-size: 0.8rem;
    padding: 0.4rem 0.9rem;
    cursor: pointer;
}

.text-draw-card__redraw:hover {
    background: rgba(255, 255, 255, 0.16);
}

/* The Moon's affirmation card: a softly rounded moonlit card with a crescent,
   rather than a generic rounded box, in the storybook face, with a quiet text link
   instead of an outlined button (Louisa, 24 September 2026). */
.affirmation-card {
    border: 0;
    border-radius: 34px;
    padding: 2.3rem 1.5rem 1.5rem;
    background:
        radial-gradient(ellipse 70% 45% at 50% 0%, rgba(214, 204, 255, 0.3), transparent 70%),
        rgba(24, 20, 52, 0.66);
    box-shadow: 0 0 28px rgba(170, 150, 255, 0.25);
}

.affirmation-card::before {
    content: '\263D';
    position: absolute;
    top: 0.55rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.1rem;
    color: rgba(255, 244, 214, 0.85);
    text-shadow: 0 0 8px rgba(255, 240, 200, 0.6);
}

.affirmation-card p {
    font-family: 'IM Fell English', "EB Garamond", Georgia, serif;
    font-style: italic;
    font-size: 1.3rem;
    line-height: 1.35;
    color: #fbf3e4;
}

.affirmation-card .text-draw-card__redraw {
    margin-top: 0.9rem;
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0.2rem 0.4rem;
    font-family: 'IM Fell English', "EB Garamond", Georgia, serif;
    font-size: 1rem;
    color: #e9d9ff;
}

.affirmation-card .text-draw-card__redraw::after {
    content: ' \2192';
}

.affirmation-card .text-draw-card__redraw:hover {
    background: none;
    color: #fff;
}

/* Bottom-anchored variant. The base card is vertically centred, which in a
   room whose guardian sits in the upper half lands it on her lap. Astrology
   uses this; any future room framed the same way should too. */
.text-draw-card--lower,
.affirmation-card.text-draw-card--lower {
    top: auto;
    bottom: 6%;
    transform: none;
}

/* Soft glowing cue, centred on screen - has the moment to itself,
   fades, then the affirmation card fades in where it was before, so
   it's never two things to read at once. */
.affirmation-cue {
    position: absolute;
    left: 8%;
    right: 8%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 6;
    margin: 0;
    text-align: center;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    color: #f4ecd8;
    text-shadow: 0 0 12px rgba(244, 236, 216, 0.7);
    opacity: 0;
    animation: cueFade 3s ease-in-out forwards;
    pointer-events: none;
}

@keyframes cueFade {
    0% { opacity: 0; }
    13% { opacity: 1; }
    60% { opacity: 1; }
    100% { opacity: 0; }
}

/* ---- Moon modes: labelled buttons along the top, a hint under the moon ---- */

.moon-modes {
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
}

.moon-modes__row,
.moon-modes__back {
    position: absolute;
    top: 3%;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: auto;
}

.moon-modes__row {
    display: flex;
    gap: 0.3rem;
    padding: 0.2rem;
    background: rgba(10, 12, 24, 0.55);
    backdrop-filter: blur(3px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    white-space: nowrap;
}

.moon-modes__button {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 0.95rem;
    line-height: 1;
    padding: 0.4rem 0.75rem;
    color: rgba(244, 236, 216, 0.72);
    background: none;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.moon-modes__button.is-active {
    color: #fff8e6;
    background: rgba(244, 236, 216, 0.2);
    box-shadow: 0 0 12px rgba(230, 240, 255, 0.35);
}

.moon-modes__back {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 1rem;
    padding: 0.35rem 0.9rem;
    color: #fff8e6;
    background: rgba(10, 12, 24, 0.55);
    backdrop-filter: blur(3px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
}

/* Sits just under the moon itself (the disc is centred at 25%). */
.moon-modes__hint {
    position: absolute;
    top: 32%;
    left: 0;
    right: 0;
    margin: 0;
    text-align: center;
    font-family: 'EB Garamond', Georgia, serif;
    font-style: italic;
    font-size: 1rem;
    color: rgba(255, 248, 230, 0.85);
    text-shadow: 0 0 6px rgba(10, 12, 40, 0.95), 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* A room's first-visit `intro`: words on the scene that fade in, stay
   long enough to read twice, then go. Taps pass straight through. */
.room-intro {
    position: absolute;
    left: 8%;
    right: 8%;
    z-index: 6;
    pointer-events: none;
    text-align: center;
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 1.05rem;
    line-height: 1.4;
    color: #fff8e6;
    text-shadow: 0 0 6px rgba(10, 12, 40, 0.95), 0 0 14px rgba(10, 12, 40, 0.8), 0 1px 3px rgba(0, 0, 0, 0.8);
    animation: roomIntro 11s ease-in-out forwards;
}

.room-intro p {
    margin: 0 0 0.5rem;
}

@keyframes roomIntro {
    0% { opacity: 0; }
    8% { opacity: 1; }
    85% { opacity: 1; }
    100% { opacity: 0; }
}

/* ---- Ambient video (shown only in video mode, moon corner) ---- */

.room-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* ---- Mood check-in (shown only in check-in mode, moon corner) ---- */

/* In the open sky under the moon, where it can be read; taps between
   the pieces fall through to the moon. */
.mood-checkin {
    position: absolute;
    left: 8%;
    right: 8%;
    top: 31%;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    text-align: center;
    pointer-events: none;
    text-shadow: 0 0 6px rgba(10, 12, 40, 0.95), 0 1px 3px rgba(0, 0, 0, 0.8);
}

.mood-checkin > * {
    pointer-events: auto;
}

.mood-checkin__prompt {
    margin: 0;
    font-family: 'EB Garamond', Georgia, serif;
    font-style: italic;
    font-size: 1.05rem;
    color: rgba(255, 248, 230, 0.92);
}

.mood-checkin__reply {
    margin: 0;
    min-height: 1.3em;
    max-width: 17rem;
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 1rem;
    line-height: 1.35;
    color: #fff8e6;
    opacity: 0;
}

.mood-checkin__reply.is-shown {
    animation: moodReply 0.8s ease-out forwards;
}

@keyframes moodReply {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

.mood-checkin__moods {
    position: relative;
    display: flex;
    gap: 0.5rem;
}

.mood-checkin__mood {
    position: relative;
    background: rgba(10, 12, 24, 0.55);
    backdrop-filter: blur(3px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 50%;
    width: 2.6rem;
    height: 2.6rem;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
}

.mood-checkin__mood:hover {
    background: rgba(10, 12, 24, 0.75);
}

.mood-checkin__ripple {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2.6rem;
    height: 2.6rem;
    margin: -1.3rem 0 0 -1.3rem;
    border: 1px solid rgba(244, 236, 216, 0.5);
    border-radius: 50%;
    pointer-events: none;
    animation: moodRipple 1.4s ease-out forwards;
}

@keyframes moodRipple {
    to {
        width: 6rem;
        height: 6rem;
        margin: -3rem 0 0 -3rem;
        opacity: 0;
    }
}

.mood-checkin__history {
    color: rgba(244, 236, 240, 0.8);
    font-size: 0.85rem;
}

.mood-checkin__history summary {
    cursor: pointer;
}

.mood-checkin__history-empty {
    margin: 0.4rem 0 0;
    opacity: 0.7;
}

.mood-checkin__history-list {
    list-style: none;
    margin: 0.4rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    max-height: 7.5rem;
    overflow-y: auto;
    scrollbar-width: none;
}

.mood-checkin__history-list::-webkit-scrollbar {
    display: none;
}

/* ---- Reading flow (Task 3's tarot full flow) ---- */

.reading-flow-card {
    position: absolute;
    left: 6%;
    right: 6%;
    top: 8%;
    bottom: 8%;
    z-index: 8;
    display: flex;
    flex-direction: column;
    background: rgba(10, 12, 24, 0.72);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    padding: 1.4rem 1.2rem;
    overflow-y: auto;
}

.reading-flow-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    gap: 1rem;
    text-align: center;
    margin: auto 0;
}

.reading-flow-step--reading,
.reading-flow-step--offer {
    justify-content: flex-start;
}

.reading-flow-prompt {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: #f4ecf0;
}

.reading-flow-input,
.reading-flow-textarea {
    width: 100%;
    max-width: 22rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 10px;
    color: #f4ecf0;
    font: inherit;
    font-size: 0.95rem;
    padding: 0.7rem 0.9rem;
    resize: none;
}

.reading-flow-input::placeholder,
.reading-flow-textarea::placeholder {
    color: rgba(244, 236, 240, 0.45);
}

.reading-flow-button {
    appearance: none;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    color: #f4ecf0;
    font: inherit;
    font-size: 0.85rem;
    line-height: 1.2;
    padding: 0.4rem 1rem;
    cursor: pointer;
}

.reading-flow-button:hover {
    background: rgba(255, 255, 255, 0.2);
}

.reading-flow-button:disabled {
    opacity: 0.6;
    cursor: default;
}

.reading-flow-button--quiet {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.16);
    opacity: 0.75;
}

.reading-flow-button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
}

/* Three identical, unlabelled, independently tappable piles (spec 4.2).
   The same stamped card-back asset is reused by the piles, shuffle, insight
   fan and unrevealed tray cards; the CSS layers remain as a load fallback. */
.reading-flow-piles {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.reading-flow-pile {
    appearance: none;
    width: 4.6rem;
    height: 7rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04));
    cursor: pointer;
    transition: transform 0.15s ease;
}

.reading-flow-pile:hover,
.reading-flow-pile:focus-visible {
    transform: translateY(-4px);
}

/* Keep a visible deck in the room while the server prepares a reading.
   Without it, choosing a pile made every card vanish for several seconds. */
.reading-flow-shuffle {
    position: relative;
    width: 8.5rem;
    height: 7.2rem;
    margin-bottom: 1.2rem;
}

.reading-flow-shuffle-card {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 4.4rem;
    height: 6.7rem;
    border: 2px solid rgba(255, 223, 121, 0.65);
    border-radius: 10px;
    background:
        var(--tarot-card-back-image),
        radial-gradient(circle at center, rgba(255, 238, 165, 0.5) 0 3%, transparent 4%),
        repeating-linear-gradient(45deg, rgba(255, 226, 128, 0.18) 0 3px, transparent 3px 8px),
        linear-gradient(135deg, #563863, #19132d);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: 0 7px 17px rgba(0, 0, 0, 0.35);
    transform-origin: 50% 100%;
    animation: tarot-shuffle 1.05s ease-in-out infinite alternate;
}

.reading-flow-shuffle-card:nth-child(1) {
    margin-left: -3.8rem;
    animation-delay: -0.7s;
}

.reading-flow-shuffle-card:nth-child(2) {
    margin-left: -2.2rem;
    animation-delay: -0.35s;
}

.reading-flow-shuffle-card:nth-child(3) {
    margin-left: -0.6rem;
}

/* The insight fan: the same card backs, still, fanned for a pick. */
.reading-flow-pick-card {
    appearance: none;
    padding: 0;
    cursor: pointer;
    animation: none;
    transform: rotate(var(--tilt, 0deg));
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.reading-flow-pick-card:hover,
.reading-flow-pick-card:focus-visible {
    transform: rotate(var(--tilt, 0deg)) translateY(-0.4rem);
}

.reading-flow-pile.is-picked {
    transform: translateY(-0.7rem);
    box-shadow: 0 0 18px rgba(255, 215, 114, 0.75);
}

.reading-flow-pick-card.is-picked {
    z-index: 1;
    transform: rotate(0deg) translateY(-0.7rem);
    box-shadow: 0 0 18px rgba(255, 215, 114, 0.75);
}

@keyframes tarot-shuffle {
    from { transform: translate3d(-0.45rem, 0.18rem, 0) rotate(-4deg); }
    to { transform: translate3d(0.45rem, -0.18rem, 0) rotate(4deg); }
}

.reading-flow-pause {
    margin: 0;
    font-size: 0.95rem;
    font-style: italic;
    letter-spacing: 0.02em;
    color: #f4ecd8;
    text-shadow: 0 0 12px rgba(244, 236, 216, 0.5);
}

.reading-flow-text {
    text-align: left;
}

.reading-flow-text p {
    margin: 0 0 1rem;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #f4ecf0;
    white-space: pre-wrap;
}

.reading-flow-clarity-offer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.reading-flow-step--offer {
    align-items: center;
    text-align: center;
    gap: 1rem;
}

/* Empty on purpose - Task 10 fills this in (deeper reading / StormJewel
   / Keen offer). Kept as a real, styled slot now so that task is a
   content change, not a layout change. */
.tarot-offer-slot {
    width: 100%;
    min-height: 3rem;
    border: 1px dashed rgba(255, 255, 255, 0.16);
    border-radius: 10px;
}

/* ---- StormJewel's paced close-up scene (Task 3 reading rebuild) ---- */

.reading-flow-card {
    inset: 0;
    display: block;
    overflow: hidden;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
}

.reading-flow-portrait {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.reading-flow-step,
.reading-flow-step--reading,
.reading-flow-step--offer {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
    margin: 0;
    padding: 1rem 3% 0.75rem;
    overflow-x: hidden;
    overflow-y: auto;
    text-align: center;
}

.reading-flow-bubble {
    position: absolute;
    top: clamp(1rem, 3%, 2.5rem);
    left: 50%;
    z-index: 3;
    width: min(96%, 29rem);
    padding: 0.8rem 0.85rem;
    text-align: left;
    color: #fff7fb;
    background: rgba(24, 14, 35, 0.88);
    border: 1px solid rgba(255, 220, 245, 0.43);
    border-radius: 15px;
    box-shadow: 0 10px 26px rgba(9, 3, 16, 0.45);
    transform: translateX(-50%);
}

/* Keep the spoken reading close to StormJewel while leaving the light above
   her clear for the card row. Arrival and follow-up forms intentionally keep
   the higher bubble placement. */
.reading-flow-step--reading .reading-flow-bubble {
    top: auto;
    bottom: 0.25rem;
}

/* A reading bubble fills the room between her chin and the bottom edge
   (--bubble-room, measured in reading-flow.js) and scrolls inside that. */
.reading-flow-step--reading .reading-flow-bubble {
    display: flex;
    flex-direction: column;
    max-height: var(--bubble-room, none);
}

.reading-flow-step--reading .reading-flow-bubble .reading-flow-prompt {
    flex: 1 1 auto;
    min-height: 3.2em;
    max-height: none;
}

/* Only her words scroll: the name and the yellow position line keep their
   full height however little room the bubble has. */
.reading-flow-step--reading .reading-flow-bubble .reading-flow-speaker,
.reading-flow-step--reading .reading-flow-bubble .reading-flow-position {
    flex-shrink: 0;
}

/* These screens have controls after StormJewel's speech. Let the bubble
   take up real space so it cannot cover the choices or the question box. */
.reading-flow-step--choice .reading-flow-bubble,
.reading-flow-step--follow-up .reading-flow-bubble {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    flex: 0 0 auto;
    transform: none;
}

.reading-flow-bubble > .reading-flow-button {
    display: block;
    margin: 0.6rem auto 0;
}

/* The way forward in a bubble: a moving gold arrow at the end of her last
   line, taking no space of its own. */
.reading-flow-next {
    display: inline-block;
    float: right;
    margin: 0.15rem 0 0 0.35rem;
    padding: 0 0.3rem;
    color: #ffd772;
    background: none;
    border: 0;
    font: inherit;
    font-size: 1.25rem;
    line-height: 1;
    vertical-align: -0.08em;
    text-shadow: 0 0 8px rgba(255, 215, 114, 0.85);
    cursor: pointer;
    animation: reading-flow-nudge 1.2s ease-in-out infinite;
}

/* The same arrow in the other rooms (runes, numerology, astrology),
   coloured for each room's panel. */
.flow-next {
    display: inline-block;
    float: right;
    margin: 0.15rem 0 0 0.35rem;
    padding: 0 0.3rem;
    color: #ffd772;
    background: none;
    border: 0;
    font: inherit;
    font-size: 1.25rem;
    font-style: normal;
    line-height: 1;
    vertical-align: -0.08em;
    text-shadow: 0 0 8px rgba(255, 215, 114, 0.85);
    cursor: pointer;
    animation: reading-flow-nudge 1.2s ease-in-out infinite;
}

.flow-next--runes {
    color: #8a2f4f;
    text-shadow: none;
}

.flow-next--numerology {
    color: #7a3a12;
    text-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
    .flow-next {
        animation: none;
    }
}

@keyframes reading-flow-nudge {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(5px); }
}

@media (prefers-reduced-motion: reduce) {
    .reading-flow-next {
        animation: none;
    }
}

.reading-flow-bubble-footer {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.reading-flow-button.reading-flow-button--small {
    padding: 0.3rem 0.75rem;
    font-size: 0.8rem;
}

.reading-flow-bubble::after {
    position: absolute;
    right: 14%;
    bottom: -9px;
    width: 16px;
    height: 16px;
    content: '';
    background: rgba(24, 14, 35, 0.88);
    border-right: 1px solid rgba(255, 220, 245, 0.43);
    border-bottom: 1px solid rgba(255, 220, 245, 0.43);
    transform: rotate(45deg);
}

/* A bubble below her face points up at her. */
.reading-flow-step--reading .reading-flow-bubble::after,
.reading-flow-step--choice .reading-flow-bubble::after,
.reading-flow-step--follow-up .reading-flow-bubble::after {
    top: -9px;
    bottom: auto;
    border-right: 0;
    border-bottom: 0;
    border-top: 1px solid rgba(255, 220, 245, 0.43);
    border-left: 1px solid rgba(255, 220, 245, 0.43);
}

.reading-flow-speaker {
    margin: 0 0 0.35rem;
    color: #f7bdde;
    font-family: 'IM Fell English', "EB Garamond", Georgia, serif;
    font-size: 1.05rem;
}

.reading-flow-bubble .reading-flow-prompt {
    margin: 0;
    color: #fff7fb;
    font-family: "EB Garamond", Georgia, serif;
    font-size: 1rem;
    line-height: 1.6;
}

.reading-flow-bubble .reading-flow-prompt p {
    margin: 0;
}

.reading-flow-bubble .reading-flow-prompt p + p {
    margin-top: 0.45rem;
}

.reading-flow-card-name {
    color: #ffd772;
    font-weight: 700;
}

.reading-flow-visitor-panel {
    display: flex;
    width: 100%;
    max-width: 29rem;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    padding: 0.75rem;
    background: rgba(14, 8, 25, 0.65);
    border-radius: 13px;
}

/* The spread chooser: one compact line-pair per spread, name in gold. */
.reading-flow-spread-choice {
    gap: 0.4rem;
}

.reading-flow-spread-tile {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.7rem;
    padding: 0.35rem 0.8rem 0.35rem 0.45rem;
    color: #f4ecf0;
    font: inherit;
    text-align: left;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 10px;
    cursor: pointer;
}

.reading-flow-spread-tile:hover,
.reading-flow-spread-tile:focus-visible {
    background: rgba(255, 255, 255, 0.16);
}

/* The spread they picked, shown above the question box: a label, not a
   button, so no pointer or hover. */
.reading-flow-spread-tile--chosen {
    margin-bottom: 0.6rem;
    cursor: default;
}

.reading-flow-spread-tile--chosen:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* Each spread's own card, small, on the left (from spreads.json). */
.reading-flow-spread-tile-card {
    flex: 0 0 auto;
    width: 1.7rem;
    height: 2.9rem;
    object-fit: cover;
    border: 1px solid rgba(255, 237, 180, 0.7);
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

.reading-flow-spread-tile-words {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.reading-flow-spread-tile-name {
    color: #ffd772;
    font-family: 'IM Fell English', "EB Garamond", Georgia, serif;
    font-size: 1.05rem;
    line-height: 1.15;
}

.reading-flow-spread-tile-line {
    font-family: "EB Garamond", Georgia, serif;
    font-size: 0.78rem;
    opacity: 0.85;
}

.reading-flow-toggle {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: rgba(255, 247, 251, 0.82);
    font-size: 0.82rem;
    cursor: pointer;
}

.reading-flow-follow-up-label {
    width: 100%;
    margin: 0;
    color: #ffd772;
    font-family: 'IM Fell English', "EB Garamond", Georgia, serif;
    font-size: 0.9rem;
    text-align: left;
}

.reading-flow-toggle input {
    accent-color: #ffd772;
}

/* Main action in the tarot follow-up: gold, and glowing once it can be used. */
.reading-flow-button--primary {
    background: rgba(255, 215, 114, 0.16);
    border-color: rgba(255, 215, 114, 0.7);
    color: #fff4d6;
    font-weight: 600;
}

.reading-flow-button--primary:not(:disabled) {
    animation: reading-flow-glow 2.4s ease-in-out infinite;
}

@keyframes reading-flow-glow {
    0%, 100% { box-shadow: 0 0 6px rgba(255, 215, 114, 0.35); }
    50% { box-shadow: 0 0 16px rgba(255, 215, 114, 0.75); }
}

/* The ask screen: everything stacks at the bottom, compact, so her eyes
   are never covered. */
.reading-flow-step--composer {
    gap: 0.45rem;
}

.reading-flow-step--composer .reading-flow-visitor-panel {
    gap: 0.45rem;
    padding: 0.55rem;
}

.reading-flow-step--composer .reading-flow-textarea {
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
    resize: none;
    overflow-y: auto;
}

.reading-flow-step--composer .reading-flow-starter,
.reading-flow-step--composer .reading-flow-button-row .reading-flow-button {
    white-space: nowrap;
}

.reading-flow-step--composer .reading-flow-button-row {
    gap: 0.45rem;
}

.reading-flow-step--composer .reading-flow-button-row .reading-flow-button {
    padding: 0.45rem 0.85rem;
    font-size: 0.82rem;
}

.reading-flow-starters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: center;
}

.reading-flow-button.reading-flow-starter {
    padding: 0.3rem 0.7rem;
    font-size: 0.78rem;
    background: rgba(247, 189, 222, 0.12);
    border-color: rgba(247, 189, 222, 0.4);
}

@media (prefers-reduced-motion: reduce) {
    .reading-flow-button--primary:not(:disabled) {
        animation: none;
        box-shadow: 0 0 10px rgba(255, 215, 114, 0.55);
    }
}

.reading-flow-input,
.reading-flow-textarea {
    max-width: none;
    background: rgba(255, 255, 255, 0.14);
}

.reading-flow-alternative {
    margin: 0.1rem 0 0;
    color: rgba(255, 247, 251, 0.78);
    font-size: 0.82rem;
}

.reading-flow-piles {
    gap: 0.7rem;
}

.reading-flow-pile {
    width: 4.4rem;
    height: 6.7rem;
    border: 2px solid rgba(255, 223, 121, 0.65);
    background:
        var(--tarot-card-back-image),
        radial-gradient(circle at center, rgba(255, 238, 165, 0.5) 0 3%, transparent 4%),
        repeating-linear-gradient(45deg, rgba(255, 226, 128, 0.18) 0 3px, transparent 3px 8px),
        linear-gradient(135deg, #563863, #19132d);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: 0 7px 17px rgba(0, 0, 0, 0.35);
}

.reading-flow-card-face {
    position: absolute;
    top: 0.7rem;
    right: 0.85rem;
    z-index: 2;
    margin: 0;
    max-width: 8rem;
    text-align: center;
    color: #fff4dd;
    font-family: "EB Garamond", Georgia, serif;
    font-size: 0.73rem;
    text-shadow: 0 1px 3px #160b1c;
}

.reading-flow-card-face img {
    display: block;
    width: 4.6rem;
    height: 7rem;
    border: 2px solid rgba(255, 237, 180, 0.8);
    border-radius: 5px;
    object-fit: cover;
    box-shadow: 0 6px 17px rgba(0, 0, 0, 0.45);
}

/* The name wraps under the card rather than hanging off to one side. */
.reading-flow-card-face--large {
    width: min-content;
}

.reading-flow-card-face--large img {
    width: min(18vw, 4.1rem);
    height: auto;
    max-height: 18vh;
}

.reading-flow-card-face figcaption {
    padding-top: 0.25rem;
}

.reading-flow-revealed-cards {
    position: absolute;
    top: 0.45rem;
    right: 50%;
    z-index: 2;
    display: flex;
    max-width: 100%;
    gap: 0.35rem;
    justify-content: center;
    transform: translateX(50%);
}

/* While she shuffles with cards already above her head, her line sits low
   above the deck so her face shows. On the first draw it stays at the top. */
.reading-flow-step--pause-low .reading-flow-bubble {
    position: relative;
    top: auto;
    left: auto;
    flex: 0 0 auto;
    transform: none;
}

.reading-flow-step--pause-low .reading-flow-bubble::after {
    top: -9px;
    bottom: auto;
    border-right: 0;
    border-bottom: 0;
    border-top: 1px solid rgba(255, 220, 245, 0.43);
    border-left: 1px solid rgba(255, 220, 245, 0.43);
}

.reading-flow-step--pause .reading-flow-shuffle {
    margin-bottom: 0.4rem;
}

.reading-flow-revealed-cards .reading-flow-card-face {
    position: static;
    transform: none;
}

.reading-flow-revealed-cards .reading-flow-card-face img {
    width: min(20vw, 4rem);
    height: auto;
}

/* Let the usual three or four cards sit boldly in StormJewel's hair.
   As the continuing reading grows, reduce only enough to keep the whole
   row above her brown hair clip rather than spilling over her face. */
.reading-flow-revealed-cards--4 .reading-flow-card-face img {
    width: min(18vw, 3.65rem);
}

.reading-flow-revealed-cards--5 .reading-flow-card-face img {
    width: min(15vw, 3rem);
}

.reading-flow-revealed-cards--6 .reading-flow-card-face img {
    width: min(13vw, 2.55rem);
}

.reading-flow-revealed-cards .reading-flow-card-face figcaption {
    display: none;
}

/* The free reading's three places while it is read (buildMainTray). */
.reading-flow-step--reading .reading-flow-main-tray {
    top: 2.2rem;
}

.reading-flow-card-back {
    display: block;
    width: min(20vw, 4rem);
    aspect-ratio: 4.6 / 7;
    border: 2px solid rgba(255, 223, 121, 0.65);
    border-radius: 5px;
    background:
        var(--tarot-card-back-image),
        radial-gradient(circle at center, rgba(255, 238, 165, 0.5) 0 3%, transparent 4%),
        repeating-linear-gradient(45deg, rgba(255, 226, 128, 0.18) 0 3px, transparent 3px 8px),
        linear-gradient(135deg, #563863, #19132d);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: 0 6px 17px rgba(0, 0, 0, 0.45);
}

.reading-flow-main-tray .reading-flow-card-face:not(.is-current) img {
    opacity: 0.7;
}

.reading-flow-main-tray .reading-flow-card-face.is-current img {
    border-color: #ffd772;
    box-shadow: 0 0 0 2px rgba(255, 215, 114, 0.45), 0 6px 17px rgba(0, 0, 0, 0.45);
}

/* Gift spreads. The position of the card being read, in yellow, above
   StormJewel's words. */
.reading-flow-position {
    margin: 0 0 0.4rem;
    color: #ffd772;
    font-family: 'IM Fell English', "EB Garamond", Georgia, serif;
    font-size: 1rem;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Everything she says at one stage of a reading is one bubble, scrolling
   inside itself when long, with a fade while there is more. */
.reading-flow-bubble .reading-flow-prompt {
    max-height: min(9rem, 27vh);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

/* No scrollbars anywhere in the tarot reading; the fade is the cue. */
.reading-flow-card,
.reading-flow-card * {
    scrollbar-width: none;
}

.reading-flow-card::-webkit-scrollbar,
.reading-flow-card *::-webkit-scrollbar {
    display: none;
}

.reading-flow-button-row--nowrap {
    flex-wrap: nowrap;
}

.reading-flow-bubble .reading-flow-prompt--more {
    -webkit-mask-image: linear-gradient(to bottom, #000 50%, rgba(0, 0, 0, 0.05) 100%);
    mask-image: linear-gradient(to bottom, #000 50%, rgba(0, 0, 0, 0.05) 100%);
}

/* With the words below her, the top of the frame is free, so the card and
   the spread map sit a little lower. */
.reading-flow-step--reading .reading-flow-card-face,
.gift-spread-step--card .gift-spread-map--mini {
    top: 2.2rem;
}

/* The spread in its real shape. Card size and spacing come from
   reading-flow.js (--slot-w, --step) and each card's row and column. */
.gift-spread-map {
    padding: 0.45rem;
    background: rgba(16, 9, 26, 0.62);
    border: 1px solid rgba(255, 220, 245, 0.28);
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(9, 3, 16, 0.4);
}

.gift-spread-map-inner {
    position: relative;
}

.gift-spread-slot {
    position: absolute;
    top: calc(var(--row) * var(--step) * var(--slot-w) * 1.714);
    left: calc(var(--col) * var(--step) * var(--slot-w));
    display: block;
    width: var(--slot-w);
    height: calc(var(--slot-w) * 1.714);
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #2a1c3a;
    border: 1px solid rgba(255, 237, 180, 0.75);
    border-radius: 3px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45);
}

.gift-spread-slot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gift-spread-slot--empty {
    background: rgba(255, 255, 255, 0.06);
    border-style: dashed;
    border-color: rgba(255, 237, 180, 0.4);
    box-shadow: none;
}

/* The challenge card lies sideways across the blessing, spec section 1. */
.gift-spread-slot--across {
    z-index: 1;
    transform: rotate(90deg);
}

.gift-spread-slot--current {
    z-index: 2;
    border: 2px solid #ffd772;
    box-shadow: 0 0 0 2px rgba(255, 215, 114, 0.35), 0 0 12px rgba(255, 215, 114, 0.75);
}

/* During the reading: tucked top left, clear of the big card top right. */
.gift-spread-map--mini {
    position: absolute;
    top: 0.7rem;
    left: 0.85rem;
    z-index: 2;
    padding: 0.3rem;
    border-radius: 8px;
}

.gift-spread-map--mini .gift-spread-slot {
    border-width: 1px;
    border-radius: 2px;
}

/* After the reading: the whole shape centred above her head, with any
   follow-up cards beside it. */
.gift-spread-tray {
    position: absolute;
    top: 0.6rem;
    left: 50%;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    transform: translateX(-50%);
}

.gift-spread-tray .gift-spread-map--mini {
    position: static;
}

.gift-spread-extras {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.gift-spread-extras img {
    display: block;
    width: 1.5rem;
    height: auto;
    border: 1px solid rgba(255, 237, 180, 0.75);
    border-radius: 2px;
}

/* The end of a spread: the whole shape small above her head so her face
   shows, tappable to see it bigger. */
.gift-spread-peek {
    position: absolute;
    top: 0.6rem;
    left: 50%;
    z-index: 2;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    transform: translateX(-50%);
}

.gift-spread-map--mid {
    padding: 0.35rem;
    border-radius: 10px;
}

/* The overview at the end: big enough to see each card, every card a
   button with its number. */
.gift-spread-step--overview .gift-spread-map--full {
    flex: 0 0 auto;
    padding: 0.7rem;
}

.gift-spread-map--full .gift-spread-slot {
    cursor: pointer;
    border-width: 2px;
    border-radius: 5px;
}

.gift-spread-slot-number {
    position: absolute;
    top: 0.15rem;
    left: 0.15rem;
    min-width: 1.05rem;
    padding: 0.05rem 0.2rem;
    color: #1a0f24;
    background: #ffd772;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

.gift-spread-slot--across .gift-spread-slot-number {
    transform: rotate(-90deg);
}

.reading-flow-return {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 2;
    padding: 0.35rem 0.75rem;
    background: rgba(16, 9, 26, 0.44);
}

.reading-flow-step--offer .tarot-offer-slot {
    min-height: 0;
    border: 0;
}

@media (max-height: 700px) {
    .reading-flow-step,
    .reading-flow-step--reading,
    .reading-flow-step--offer {
        padding-bottom: 0.6rem;
    }

    .reading-flow-bubble .reading-flow-prompt {
        font-size: 0.91rem;
    }

    .reading-flow-card-face--large img {
        max-height: 23vh;
    }
}

@media (prefers-reduced-motion: reduce) {
    .reading-flow-shuffle-card {
        animation: none;
    }

    .reading-flow-shuffle-card:not(.reading-flow-pick-card):nth-child(1) {
        transform: rotate(-6deg);
    }

    .reading-flow-shuffle-card:not(.reading-flow-pick-card):nth-child(3) {
        transform: rotate(6deg);
    }
}

/* ---- Placeholder rooms (no art yet) ---- */

.room-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.5rem;
    padding: 1.5rem;
}

.room-placeholder__name {
    font-size: 1.4rem;
    letter-spacing: 0.04em;
    opacity: 0.9;
}

.room-placeholder__guardian {
    font-size: 0.9rem;
    opacity: 0.55;
}

/* ---- Entry scene ---- */

.entry-scene {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 5;
}

/* ---- Glow affordance (3.3) ---- */

.glows {
    animation: glowPulse 3.2s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% {
        filter: drop-shadow(0 0 0 rgba(255, 223, 170, 0));
    }
    50% {
        filter: drop-shadow(0 0 6px rgba(255, 223, 170, 0.85));
    }
}

/* ---- Hotspots: unlabelled clickable atmosphere (2.3, 3.3) ---- */

/* A line of text over the art (manifest `caption`), e.g. the Zodiac Sky's
   invitation to tap a sign. Clicks pass through to the hotspots. */
.room-caption {
    position: absolute;
    left: 8%;
    right: 8%;
    margin: 0;
    z-index: 2;
    text-align: center;
    color: #f6e3ee;
    font-family: 'IM Fell English', "EB Garamond", Georgia, serif;
    font-size: clamp(1.1rem, 5.2vw, 1.5rem);
    line-height: 1.25;
    text-shadow: 0 0 10px rgba(36, 27, 61, 0.95), 0 1px 3px rgba(0, 0, 0, 0.8);
    pointer-events: none;
}

.room-hotspot {
    position: absolute;
    border-radius: 6px;
    cursor: pointer;
    z-index: 3;
}

.room-hotspot--glow {
    animation: hotspotGlow 3.6s ease-in-out infinite;
}

@keyframes hotspotGlow {
    0%, 100% {
        box-shadow: inset 0 0 0 rgba(255, 223, 170, 0);
    }
    50% {
        box-shadow: inset 0 0 26px 4px rgba(255, 223, 170, 0.22);
    }
}

/* `glow: "orb"`: a round light breathing over a small creature, spilling
   past the tap area so it reads as light rather than a shape. */
.room-hotspot--orb::before {
    content: '';
    position: absolute;
    inset: -40%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 245, 170, 0.8) 0%, rgba(210, 255, 170, 0.4) 35%, rgba(180, 250, 190, 0) 70%);
    mix-blend-mode: screen;
    pointer-events: none;
    animation: hotspotOrb 2.6s ease-in-out infinite;
}

@keyframes hotspotOrb {
    0%, 100% { opacity: 0.35; transform: scale(0.85); }
    50% { opacity: 1; transform: scale(1.1); }
}

/* A hotspot's `glowImage`: a cut-out of the object, laid exactly over
 * it and pulsed brighter, so the glow follows the object's own outline
 * (the Apothecary's skull jar) rather than a box or oval. */
.room-hotspot__glow-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    animation: hotspotObjectGlow 3.2s ease-in-out infinite;
}

@keyframes hotspotObjectGlow {
    0%, 100% { filter: brightness(1) drop-shadow(0 0 0 rgba(255, 220, 130, 0)); }
    50% { filter: brightness(1.35) drop-shadow(0 0 7px var(--glow-color, rgba(255, 220, 130, 0.85))); }
}

/* ---- Ambient life (state `ambient`): smoke, dust motes, flicker ---- */

.room-ambient {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}

/* A soft puff that rises, widens and fades, three per source in turn. */
.ambient-smoke {
    position: absolute;
    width: 7%;
    aspect-ratio: 1;
    margin-left: -3.5%;
    margin-top: -3.5%;
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--smoke-color), transparent);
    opacity: 0;
    animation: ambientSmoke 6.6s ease-out infinite;
}

@keyframes ambientSmoke {
    0% { transform: translate(0, 0) scale(0.4); opacity: 0; }
    20% { opacity: 0.9; }
    100% { transform: translate(var(--sway), -320%) scale(1.8); opacity: 0; }
}

/* A speck catching the light: drifts a little and twinkles. */
.ambient-mote {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--mote-color, rgba(255, 236, 190, 0.9));
    box-shadow: 0 0 4px 1px var(--mote-color, rgba(255, 226, 160, 0.6));
    opacity: 0;
    animation: ambientMote 12s ease-in-out infinite;
}

@keyframes ambientMote {
    0% { transform: translate(0, 0); opacity: 0; }
    25% { opacity: 0.8; }
    50% { opacity: 0.3; }
    75% { opacity: 0.7; }
    100% { transform: translate(var(--dx), var(--dy)); opacity: 0; }
}

/* Bubbles rising through a potion and popping at the surface. */
.ambient-liquid {
    position: absolute;
    overflow: hidden;
    border-radius: 6px;
}

.ambient-liquid--round {
    border-radius: 12% 12% 50% 50% / 20% 20% 80% 80%;
}

.ambient-bubble {
    position: absolute;
    bottom: 0;
    border-radius: 50%;
    border: 1px solid var(--bubble-color);
    background: radial-gradient(circle at 35% 35%, var(--bubble-color), transparent 70%);
    opacity: 0;
    animation: ambientBubble 3s ease-in infinite;
}

@keyframes ambientBubble {
    0% { transform: translate(0, 0) scale(0.6); opacity: 0; }
    15% { opacity: 0.9; }
    85% { transform: translate(2px, -900%) scale(1); opacity: 0.8; }
    100% { transform: translate(2px, -1000%) scale(1.5); opacity: 0; }
}

/* A spark lifting off a fire, swaying as it cools and fades. */
.ambient-ember {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255, 210, 120, 1);
    box-shadow: 0 0 5px 2px rgba(255, 140, 40, 0.7);
    opacity: 0;
    animation: ambientEmber 4s ease-out infinite;
}

@keyframes ambientEmber {
    0% { transform: translate(0, 0) scale(1); opacity: 0; }
    10% { opacity: 1; }
    100% { transform: translate(var(--sway), var(--rise)) scale(0.4); opacity: 0; }
}

/* A small four-point star that glints briefly, then rests. */
.ambient-twinkle {
    position: absolute;
    aspect-ratio: 1;
    transform: translate(-50%, -50%) scale(0);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0 C10.6 7 13 9.4 20 10 C13 10.6 10.6 13 10 20 C9.4 13 7 10.6 0 10 C7 9.4 9.4 7 10 0Z' fill='%23fffbe8'/%3E%3C/svg%3E") center / contain no-repeat;
    filter: drop-shadow(0 0 3px var(--twinkle-color));
    opacity: 0;
    animation: ambientTwinkle 7s ease-in-out infinite;
}

@keyframes ambientTwinkle {
    0%, 78%, 100% { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 0; }
    86% { transform: translate(-50%, -50%) scale(1) rotate(20deg); opacity: 1; }
    94% { transform: translate(-50%, -50%) scale(0.3) rotate(40deg); opacity: 0.4; }
}

/* A ring spreading across still water and fading as it widens. */
.ambient-ripple {
    position: absolute;
    aspect-ratio: 3;
    transform: translate(-50%, -50%) scale(0.15);
    border: 1.5px solid rgba(210, 225, 255, 0.55);
    border-radius: 50%;
    opacity: 0;
    animation: ambientRipple 4.4s ease-out infinite;
}

@keyframes ambientRipple {
    0% { transform: translate(-50%, -50%) scale(0.15); opacity: 0; }
    12% { opacity: 0.9; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* A jewel flushing a colour: quick bloom, brief hold, quick fade. */
.ambient-gem {
    position: absolute;
    aspect-ratio: 1;
    transform: translate(-50%, -50%) scale(0.6);
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--gem-color) 35%, transparent);
    opacity: 0;
    animation: ambientGem 3.5s ease-in-out infinite;
}

@keyframes ambientGem {
    0%, 55%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
    68%, 80% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* A warm glow that wavers unevenly, like a flame. */
.ambient-flicker {
    position: absolute;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--flicker-color), transparent);
    mix-blend-mode: screen;
    animation: ambientFlicker 2.3s steps(1, end) infinite, ambientFlickerSoft 5.1s ease-in-out infinite;
}

/* The glow drifts a little way round the colour wheel and back. */
.ambient-flicker--shift {
    animation: ambientFlicker 2.3s steps(1, end) infinite, ambientFlickerSoft 5.1s ease-in-out infinite, ambientShift 9s ease-in-out infinite;
}

@keyframes ambientShift {
    0%, 100% { filter: hue-rotate(0deg); }
    33% { filter: hue-rotate(-35deg); }
    66% { filter: hue-rotate(40deg); }
}

@keyframes ambientFlicker {
    0%, 100% { opacity: 0.85; }
    13% { opacity: 0.6; }
    21% { opacity: 0.95; }
    47% { opacity: 0.7; }
    62% { opacity: 1; }
    80% { opacity: 0.75; }
}

@keyframes ambientFlickerSoft {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
    .ambient-smoke,
    .ambient-mote,
    .ambient-bubble,
    .ambient-ember,
    .ambient-twinkle,
    .ambient-ripple,
    .ambient-gem { display: none; }
    .ambient-flicker { animation: none; opacity: 0.8; }
}

/* ---- First-visit room welcome (state `welcome`) ---- */



.welcome-popup {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 16px;
    background: rgba(10, 6, 12, 0.55);
    cursor: pointer;
    animation: fullscreenVideoIn 0.4s ease-out;
    font-family: 'IM Fell English', "EB Garamond", Georgia, serif;
}

.welcome-popup__scroll {
    width: min(88vw, 380px);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: scrollUnroll 0.55s ease-out;
}

/* The roller slices are 1000 x 200 and overhang the paper on both sides. */
.welcome-popup__roller {
    display: block;
    width: 100%;
    height: auto;
    flex: none;
    position: relative;
    z-index: 1;
}

/* The middle slice is plain paper, so stretching it to the text is safe.
 * The negative margins tuck it under both rollers so no seam shows. */
.welcome-popup__paper {
    margin: -6% 0;
    padding: 10% 15%;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: none;
    background-size: 100% 100%;
    color: #3b2412;
    text-align: center;
    container-type: inline-size;
}

.welcome-popup__paper::-webkit-scrollbar {
    display: none;
}

.welcome-popup__title {
    margin: 0 0 0.6em;
    text-align: center;
    color: #3b2412;
    font-family: inherit;
    font-weight: 400;
    font-size: clamp(1.3rem, 9cqw, 2rem);
    line-height: 1.15;
}

.welcome-popup__note {
    font-family: "EB Garamond", Georgia, serif;
    font-size: 1.1rem;
    line-height: 1.45;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.welcome-popup__note--shown {
    opacity: 1;
    transform: translateY(0);
}

.welcome-popup__note p {
    margin: 0 0 0.7em;
}

.welcome-popup__note .welcome-popup__signoff {
    margin: 0;
    font-style: italic;
}

.welcome-popup--leaving {
    opacity: 0;
    transition: opacity 0.4s ease-in;
}

/* ---- Gift box (hotspot `giftBox`), rough first pass ---- */

.gift-popup {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(10, 6, 12, 0.6);
    animation: fullscreenVideoIn 0.35s ease-out;
}

/* A plain card of aged paper: the stained parchment from the scroll art
 * (parchment.webp, cut from inside the paper so there are no torn edges)
 * with an ink border. */
.gift-popup__card {
    width: min(92vw, 380px);
    max-height: 88vh;
    overflow: auto;
    box-sizing: border-box;
    padding: 22px 22px 14px;
    background: #efdcb8 url('../rooms/apothecary/parchment.webp') center / cover no-repeat;
    border: 2px solid #6b4a2e;
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5), inset 0 0 26px rgba(120, 75, 35, 0.35);
    color: #3b2412;
    font-family: "EB Garamond", Georgia, serif;
    text-align: center;
    animation: fullscreenVideoIn 0.35s ease-out;
    scrollbar-width: none;
}

.gift-popup__card::-webkit-scrollbar {
    display: none;
}

.gift-popup__lead {
    margin: 0 0 12px;
    font-family: 'IM Fell English', "EB Garamond", Georgia, serif;
    font-size: 1.3rem;
    line-height: 1.3;
}

.gift-popup__spreads {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    text-align: left;
}

.gift-popup__spread {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 12px;
    margin-bottom: 8px;
    border: 1px solid rgba(107, 74, 46, 0.4);
    border-radius: 8px;
    background: rgba(255, 250, 238, 0.6);
}

.gift-popup__spread strong {
    font-family: 'IM Fell English', "EB Garamond", Georgia, serif;
    font-weight: 400;
    font-size: 1.1rem;
}

.gift-popup__seal {
    font-size: 1rem;
    line-height: 1.4;
}

.gift-popup__line {
    display: block;
    font-size: 0.9rem;
    color: #6b4a2e;
}

/* A wax-seal red, squarer than an app pill. */
.gift-popup__button {
    display: block;
    width: 100%;
    padding: 11px 12px;
    border: 1px solid #4e1024;
    border-radius: 6px;
    background: radial-gradient(ellipse at 50% 30%, #9a2a4c, #6e1a36);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 2px 5px rgba(60, 20, 10, 0.35);
    color: #fbeede;
    font-family: 'IM Fell English', "EB Garamond", Georgia, serif;
    font-size: 1.15rem;
    cursor: pointer;
}

.gift-popup__quiet {
    margin-top: 8px;
    padding: 6px 10px;
    border: 0;
    background: none;
    color: #6b4a2e;
    font: inherit;
    font-size: 0.9rem;
    text-decoration: underline;
    cursor: pointer;
}

/* Inputs as ruled lines on the paper. */
.gift-popup__input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 12px;
    padding: 8px 4px;
    border: 0;
    border-bottom: 1.5px solid #6b4a2e;
    border-radius: 0;
    background: rgba(255, 250, 238, 0.35);
    color: #3b2412;
    font: inherit;
    font-size: 1rem;
    outline: none;
}

.gift-popup__input:focus {
    border-bottom-color: #7a1f3d;
    background: rgba(255, 250, 238, 0.6);
}

.gift-popup__input::placeholder {
    color: rgba(107, 74, 46, 0.7);
}

.gift-popup__consent {
    margin: 2px 0 8px;
    font-size: 0.78rem;
    line-height: 1.35;
    color: #6b4a2e;
}

.gift-popup__consent a {
    color: #7a1f3d;
}

.gift-popup__error {
    min-height: 1.2em;
    margin: 0 0 6px;
    font-size: 0.9rem;
    color: #9b1c1c;
}

.gift-popup--leaving {
    opacity: 0;
    transition: opacity 0.35s ease-in;
}

/* Parchment scroll (hotspot `scroll`). The paper keeps the art's own
 * shape (1000 x 1512) at whatever size fits, and the text box sits
 * inside the plain part of the paper, clear of the rollers. */
.scroll-popup {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(10, 6, 12, 0.6);
    cursor: pointer;
    animation: fullscreenVideoIn 0.35s ease-out;
}

.scroll-popup__paper {
    position: relative;
    /* A touch taller than the art (1000 x 1512) so the first line
       clears the top roller. */
    width: min(92vw, calc(88vh * 1000 / 1640), 460px);
    aspect-ratio: 1000 / 1640;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    transform-origin: 50% 50%;
    animation: scrollUnroll 0.5s ease-out;
    container-type: inline-size;
}

.scroll-popup__text {
    position: absolute;
    left: 17%;
    right: 17%;
    top: 16%;
    bottom: 16%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.2em;
    text-align: center;
    color: #3b2412;
    font-family: "EB Garamond", Georgia, serif;
    font-size: clamp(0.95rem, 5.4cqw, 1.3rem);
    line-height: 1.45;
}

.scroll-popup__text p {
    margin: 0;
}

/* Rollers left and right (art 1080 x 1000); old-style lettering. */
.scroll-popup__paper--sideways {
    /* Stretched a little taller than the art (1080 x 1000) so a
       three-line title and a paragraph both have room. */
    width: min(92vw, calc(80vh * 1080 / 1150), 420px);
    aspect-ratio: 1080 / 1150;
    animation-name: scrollUnrollSideways;
}

.scroll-popup__paper--sideways .scroll-popup__text {
    left: 19%;
    right: 19%;
    top: 12%;
    bottom: 12%;
    font-family: 'IM Fell English', "EB Garamond", Georgia, serif;
    font-size: clamp(1.05rem, 6cqw, 1.45rem);
}

.scroll-popup__title {
    margin: 0;
    font-family: 'IM Fell English', "EB Garamond", Georgia, serif;
    font-weight: 400;
    font-size: 1.45em;
    line-height: 1.1;
}

/* The sideways scroll is short, so a two-line title needs less size. */
.scroll-popup__paper--sideways .scroll-popup__title {
    font-size: 1.2em;
    margin-bottom: 0.2em;
}

@keyframes scrollUnrollSideways {
    from { transform: scaleX(0.15); opacity: 0; }
    to { transform: scaleX(1); opacity: 1; }
}

.scroll-popup__text a {
    color: #7a1f3d;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.scroll-popup__text .scroll-popup__small {
    font-size: 0.68em;
    line-height: 1.35;
    color: #6b4a2e;
}

.scroll-popup--leaving {
    opacity: 0;
    transition: opacity 0.35s ease-in;
}

@keyframes scrollUnroll {
    from { transform: scaleY(0.15); opacity: 0; }
    to { transform: scaleY(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .scroll-popup__paper { animation: none; }
}

/* Full-screen one-off video (hotspot `video`), above everything. */
.fullscreen-video {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    animation: fullscreenVideoIn 0.4s ease-out;
}

.fullscreen-video video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Played inside the room frame, lined up with the painting (videoFit). */
.fullscreen-video--in-frame {
    position: absolute;
    z-index: 50;
    overflow: hidden;
    background: transparent;
    display: block;
}

.fullscreen-video--in-frame video {
    position: absolute;
    left: 0;
    width: 100%;
    object-fit: fill;
}

.fullscreen-video--leaving {
    opacity: 0;
    transition: opacity 0.4s ease-in;
}

@keyframes fullscreenVideoIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .room-hotspot__glow-img { animation: none; filter: brightness(1.2); }
}

.room-hotspot--return {
    border-radius: 0;
    animation: returnVignette 4.5s ease-in-out infinite;
}

@keyframes returnVignette {
    0%, 100% {
        box-shadow: inset 0 0 0 rgba(255, 255, 255, 0);
    }
    50% {
        box-shadow: inset 0 0 60px 10px rgba(255, 255, 255, 0.06);
    }
}

/* ---- Entry gate (Task 11, section 4) ----
 * 8.1a's disclaimer as a one-time agreement on first visit: over 18,
 * entertainment only, privacy policy seen. The room shows dimly behind it
 * rather than a blank screen, so the first thing anyone sees is still the
 * app. An inline script in index.html sets data-agreed before first paint,
 * so a returning visitor never sees this flash up. */

.entry-gate {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: rgba(5, 5, 10, 0.82);
    backdrop-filter: blur(7px);
    overscroll-behavior: contain;
}

html[data-agreed] .entry-gate {
    display: none;
}

.entry-gate__card {
    width: 100%;
    max-width: 24rem;
    max-height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 1.6rem 1.4rem 1.5rem;
    border: 1px solid rgba(241, 202, 120, 0.28);
    border-radius: 14px;
    background: rgba(17, 13, 24, 0.97);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
    text-align: center;
}

.entry-gate__title {
    margin: 0 0 0.9rem;
    font: 400 1.35rem/1.25 Georgia, "Times New Roman", serif;
    color: #fff8e6;
}

.entry-gate__card p {
    margin: 0 0 0.9rem;
    font-size: 0.83rem;
    line-height: 1.55;
    color: rgba(244, 236, 240, 0.78);
}

.entry-gate__card a {
    color: #f1ca78;
}

.entry-gate__button {
    display: block;
    width: 100%;
    margin-top: 1.1rem;
    min-height: 48px;
    padding: 0.8rem 1rem;
    border: 1px solid rgba(241, 202, 120, 0.72);
    border-radius: 999px;
    background: rgba(43, 22, 9, 0.9);
    color: #fff8e6;
    font: 600 0.92rem Georgia, "Times New Roman", serif;
    cursor: pointer;
}

.entry-gate__button:hover,
.entry-gate__button:focus-visible {
    background: rgba(63, 33, 14, 0.95);
}

/* ---- Bottom nav (6.8) ---- */

.bottom-nav {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(10, 10, 16, 0.92);
    backdrop-filter: blur(6px);
    padding: 0.4rem 0.5rem calc(0.4rem + env(safe-area-inset-bottom, 0px));
}

.nav-btn {
    appearance: none;
    background: none;
    border: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.35rem 0.4rem;
    min-width: 44px;
    min-height: 44px;
    flex: 1 1 0;
    cursor: pointer;
    opacity: 0.65;
    transition: opacity 0.2s ease;
}

.nav-btn svg {
    width: 24px;
    height: 24px;
    fill: none;
    /* Warm gold, rounded ends: the cosy set (Louisa, 24 September 2026). */
    stroke: #e8c47e;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nav-btn.is-active {
    opacity: 1;
}

.nav-btn__label {
    font-size: 0.58rem;
    letter-spacing: 0.02em;
}

.nav-btn--gift svg {
    stroke: #e8c47e;
}

/* The gift unlock moment: one bright burst, then back to the usual glow. */
.nav-btn--gift.nav-btn--burst {
    animation: giftBurst 1.4s ease-out 1, glowPulse 3.2s ease-in-out 1.4s infinite;
}

@keyframes giftBurst {
    0% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255, 223, 170, 0)); }
    30% { transform: scale(1.35); filter: drop-shadow(0 0 14px rgba(255, 223, 170, 1)); }
    100% { transform: scale(1); filter: drop-shadow(0 0 4px rgba(255, 223, 170, 0.6)); }
}

.reading-flow-consent {
    font-size: 0.75rem;
    opacity: 0.85;
}

.reading-flow-consent a {
    color: inherit;
}

/* ---- Small screens ---- */

/* Labels always show (Louisa, 24 September 2026); tighter on tiny screens. */
@media (max-width: 340px) {
    .bottom-nav {
        padding-left: 0.15rem;
        padding-right: 0.15rem;
    }

    /* Seven tabs at 44px each is wider than a 280px screen, which pushed
       Gifts off the end. Let them share the width instead. */
    .nav-btn {
        min-width: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .nav-btn__label {
        font-size: 0.5rem;
        letter-spacing: 0;
    }
}

/* ---- Cat runes oracle (Task 5) ---- */

/* Same sheet geometry as the Dragon's flow, but the Cat's sheet is a slab
 * of rose quartz (art/cat-chat-bg.png). It is drawn as a 9-slice border
 * image so the painted rim and its corner radius stay the right thickness
 * whatever height the card grows to; only the quartz centre stretches, and
 * the crack pattern is abstract enough to take it. Form mode gets the
 * height a multi-step form needs; reading mode sits lower so the kitchen
 * and the cat stay in view. */
.runes-flow-card {
    --cat-ink: #3f232b;
    --cat-ink-soft: #7c5560;
    --cat-line: rgba(88, 44, 54, 0.3);
    --cat-fill: rgba(255, 255, 255, 0.42);

    position: absolute;
    z-index: 8;
    left: 5%;
    right: 5%;
    /* Grows up from the floor to fit whatever screen it is holding, rather
     * than always standing at the form's full height. Short screens then
     * need no scrolling and leave more of the kitchen showing. The cap is
     * what keeps a long one from covering the room. */
    top: auto;
    /* The ceiling is the shelf, where the cat sits, and the slab must never
     * reach it: 62.5% plus the 1.5% it stands off the floor puts its top
     * edge at 36%, below the shelf brackets. The floor showing below is a
     * hem, not a margin. A screen taller than this scrolls inside the slab
     * rather than growing past it. */
    bottom: 1.5%;
    height: auto;
    max-height: 62.5%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--cat-ink);
    /* The fill slice paints the quartz centre, so the flat colour is only a
     * fallback if the art fails to load. It is clipped to the padding box so
     * it cannot leak a hairline past the painted rim, and carries the radius
     * so it does not square off the corners it sits behind.
     *
     * The slice is 44, not 58: the painted rim is 29px thick in a 587px-wide
     * source and the corner arc runs to 40, so 44 takes the rim and the arc
     * and nothing else. At 58 it also caught the quartz highlight lying just
     * inside the rim on the right and bottom, and stretched it down the whole
     * edge as a pale glow. */
    background: #f3d2d4;
    background-clip: padding-box;
    /* 16, not 22. The slice is 44 source pixels and the painted rim is only
     * 29 of them, so the rest of the band is quartz sitting between the
     * content and the black line. At 22 that shoulder was 7px, and with the
     * padding on top of it the buttons stood 11px clear of the line. */
    border: 16px solid transparent;
    border-radius: 34px;
    border-image: url("../rooms/runes/cat-chat-panel.webp") 44 fill stretch;
    filter: drop-shadow(0 14px 32px rgba(0, 0, 0, 0.55));
    padding: 0.2rem 0.25rem 0;
    -webkit-overflow-scrolling: touch;
}

/* The reading is long by nature and always fills the slab to the ceiling. */
.runes-flow-card--reading {
    height: 62.5%;
    padding: 0.85rem 1rem 0.95rem;
}

/* Translucent, so the quartz reads through it and the button sits on the
 * slab rather than on top of it. */
.runes-flow-card--greeting .runes-flow-actions .runes-flow-button {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(88, 44, 54, 0.42);
    padding: 0.32rem 0.95rem;
}

/* The scrolling layer. min-height: 0 is what lets a flex child shrink below
 * its content and actually scroll rather than stretching the slab. Scrolling
 * inside the step rather than the card leaves the painted rim alone: a mask
 * on the card would fade the quartz edge out with the text. */
.runes-flow-step {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    /* The quartz is fixed to the slab while the words move over it, and its
     * veining makes that hard to read: a line can cross a bright vein and a
     * dark facet in the same breath. A flat wash gives the text one even
     * ground to sit on. It does not scroll, so nothing shifts under the
     * words, and the rim and corners are still stone. Feathered at the edges
     * rather than a hard-edged panel, which read as a box inside the box. */
    background: radial-gradient(farthest-side, rgba(255, 250, 251, 0.8) 70%, rgba(255, 250, 251, 0.45) 88%, rgba(255, 250, 251, 0) 100%);
    /* A pale halo lifts each letter off any vein the wash does not cover. */
    text-shadow: 0 0 6px rgba(255, 250, 251, 0.9);
    padding: 0.5rem 0.65rem;
}

/* Set while there is still something below the fold and cleared on arrival
 * at the bottom, so a screen that ends cleanly does not always look cut.
 * With the scrollbar hidden this fade is the only cue that there is more. */
.runes-flow-step--more {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), rgba(0, 0, 0, 0) 100%);
}

.runes-flow-card p {
    line-height: 1.5;
}

.runes-flow-speaker {
    margin: 0;
    color: var(--cat-ink);
    font-family: 'IM Fell English', "EB Garamond", Georgia, serif;
    font-size: 1.05rem;
}

/* Nothing follows the Cat's line on the greeting screen, so the gap it
 * holds for the fields below is dead space there, and costs the last word. */
.runes-flow-step > .runes-flow-prompt:last-child {
    margin-bottom: 0;
}

.runes-flow-prompt {
    margin: 0.35rem 0 1rem;
    font-family: "EB Garamond", Georgia, serif;
    font-size: 1.03rem;
}

.runes-flow-hint {
    margin: 0.5rem 0 0;
    color: var(--cat-ink-soft);
    font-size: 0.78rem;
}

.runes-flow-field {
    display: grid;
    gap: 0.3rem;
    margin-top: 0.85rem;
    color: var(--cat-ink-soft);
    font-size: 0.75rem;
}

.runes-flow-input {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--cat-line);
    border-radius: 9px;
    padding: 0.68rem 0.6rem;
    background: var(--cat-fill);
    color: var(--cat-ink);
    font: inherit;
}

.runes-flow-input--area {
    resize: vertical;
    min-height: 3.2rem;
    font-family: "EB Garamond", Georgia, serif;
}

.runes-flow-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 1rem;
}

/* Pinned under the scrolling step rather than riding inside it. The action
 * row is the one thing that must never be under the fold, and keeping it
 * out of the scroller also stops it appearing before the text it follows. */
.runes-flow-card > .runes-flow-actions {
    flex: 0 0 auto;
    margin-top: 0.35rem;
    /* Holds its height while it is empty, waiting out the beat before a
     * button appears. Without this the step grows into the gap, the scroll
     * is re-clamped under it, and the page lands mid-sentence. */
    min-height: 1.85rem;
}

/* An action that leaves, kept away from where the button that carries on
 * has been sitting. Same rule in all three rooms. */
.runes-flow-actions .runes-flow-button--end,
.numerology-flow-actions .numerology-flow-button--end,
.astrology-flow-actions .astrology-flow-button--end {
    margin-left: auto;
}

.runes-flow-choices {
    display: grid;
    gap: 0.55rem;
    margin-top: 0.4rem;
}

.runes-flow-choices--inline {
    grid-auto-flow: column;
    justify-content: start;
}

.runes-flow-custom {
    margin-top: 0.7rem;
    padding: 0.7rem;
    border: 1px solid var(--cat-line);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.28);
}

.runes-flow-button {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    border: 1px solid var(--cat-line);
    border-radius: 14px;
    padding: 0.32rem 0.7rem;
    background: rgba(255, 255, 255, 0.5);
    color: var(--cat-ink);
    font: inherit;
    font-size: 0.82rem;
    text-align: left;
    cursor: pointer;
}

.runes-flow-actions .runes-flow-button {
    border-radius: 999px;
}

.runes-flow-button--quiet {
    background: transparent;
}

.runes-flow-button-sub {
    color: var(--cat-ink-soft);
    font-size: 0.76rem;
}

.runes-flow-step--pause {
    min-height: 100%;
    display: grid;
    place-items: center;
    text-align: center;
}

.runes-flow-asked {
    margin: 0;
    color: var(--cat-ink-soft);
    font-size: 0.8rem;
    font-style: italic;
}

.runes-flow-considering {
    color: var(--cat-ink-soft);
    font-style: italic;
}

.runes-paws {
    display: flex;
    justify-content: center;
    gap: 0.9rem;
    margin: 0.6rem 0 0.2rem;
    height: 2.8rem;
}

.runes-paw {
    width: 1.45rem;
    height: 1.45rem;
    fill: #8c3f52;
    opacity: 0;
    transform: rotate(90deg);
    animation: runes-paw-step 2.8s ease-in-out infinite;
}

.runes-paw--right {
    align-self: flex-end;
}

.runes-paw svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Each print lands, holds, and fades before the trail starts again. */
@keyframes runes-paw-step {
    0%   { opacity: 0; }
    10%  { opacity: 0.7; }
    55%  { opacity: 0.7; }
    80%  { opacity: 0; }
    100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .runes-paw {
        animation: none;
        opacity: 0.5;
    }
}

.runes-flow-opening {
    margin: 0.9rem 0 0;
    font-family: "EB Garamond", Georgia, serif;
    font-size: 1rem;
}

.runes-flow-action {
    margin: 0.35rem 0 0;
    color: var(--cat-ink-soft);
    font-size: 0.82rem;
    font-style: italic;
}

.runes-flow-action + .runes-flow-opening {
    margin-top: 0.3rem;
}

.runes-flow-error {
    margin-top: 0.9rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid rgba(150, 70, 60, 0.45);
    border-radius: 12px;
    background: rgba(190, 110, 95, 0.16);
}

.runes-flow-error-text {
    margin: 0 0 0.55rem;
}

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

.runes-spread {
    margin: 0.9rem 0 0.4rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem;
}

.runes-spread--norns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.runes-spread--odin {
    justify-content: center;
}

.runes-spread--odin .runes-tile {
    min-width: 40%;
}

.runes-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    min-width: 0;
    padding: 0.4rem 0.35rem;
    text-align: center;
    animation: runes-tile-in 0.3s ease both;
}

.runes-tile--still {
    animation: none;
    opacity: 1;
}

@keyframes runes-tile-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.runes-tile__pos {
    color: var(--cat-ink-soft);
    font-family: 'IM Fell English', "EB Garamond", Georgia, serif;
    font-size: 0.72rem;
}

.runes-tile__glyph {
    min-height: 1.7rem;
    font-family: "EB Garamond", Georgia, serif;
    font-size: 1.5rem;
    line-height: 1.1;
    color: #8c3f52;
}

.runes-tile--blank .runes-tile__glyph::after {
    content: "\00b7";
    color: rgba(140, 63, 82, 0.35);
}

.runes-tile__name {
    font-size: 0.72rem;
    color: var(--cat-ink);
}

/* The recognisable Celtic Cross: a cross of five on the left (the crossing
 * rune lies over the matter), the staff on the right in two columns of
 * three, col 4 a narrow gutter. Three rows, not six: a staff of six in one
 * column stood taller than the slab and pushed the words out of sight.
 * Placement is by data-pos so a narrow screen can drop the lot to a
 * wrapping row (below) without inline styles to fight. */
.runes-spread--celtic {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 0.25fr 1fr 1fr;
    gap: 0.2rem;
    align-items: start;
    justify-content: stretch;
}

.runes-spread--celtic .runes-tile[data-pos="rising"]        { grid-area: 1 / 2; }
.runes-spread--celtic .runes-tile[data-pos="passing"]       { grid-area: 2 / 1; }
.runes-spread--celtic .runes-tile[data-pos="matter"]        { grid-area: 2 / 2; }
.runes-spread--celtic .runes-tile[data-pos="near-future"]   { grid-area: 2 / 3; }
.runes-spread--celtic .runes-tile[data-pos="beneath"]       { grid-area: 3 / 2; }
.runes-spread--celtic .runes-tile[data-pos="outcome"]       { grid-area: 1 / 5; }
.runes-spread--celtic .runes-tile[data-pos="outcome-two"]   { grid-area: 2 / 5; }
.runes-spread--celtic .runes-tile[data-pos="outcome-three"] { grid-area: 3 / 5; }
.runes-spread--celtic .runes-tile[data-pos="hopes"]         { grid-area: 1 / 6; }
.runes-spread--celtic .runes-tile[data-pos="outside"]       { grid-area: 2 / 6; }
.runes-spread--celtic .runes-tile[data-pos="fears"]         { grid-area: 3 / 6; }

.runes-spread--celtic .runes-tile {
    padding: 0.3rem 0.1rem;
}

/* The crossing glyph turned across the matter's. */
.runes-tile--crossed .runes-tile__glyph {
    position: relative;
}

.runes-tile__cross {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0.75;
}

.runes-tile__cross--blank::after {
    content: "\00b7";
}

/* Past the first page the spread has done its job; see showReading. */
.runes-flow-step--paging .runes-spread,
.runes-flow-step--paging .runes-flow-asked {
    display: none;
}

/* ---- the reading stream ---- */

.runes-flow-stream {
    margin-top: 0.6rem;
}

/* No frame of its own: each turned rune sits straight on the card, with a
 * hairline above it as the only separator. A bordered panel inside the
 * bordered card read as a box in a box. */
.runes-flow-rune {
    padding: 0.8rem 0 0.2rem;
    border-top: 1px solid var(--cat-line);
}

.runes-flow-stream > .runes-flow-rune:first-child {
    border-top: 0;
}

.runes-flow-rune-pos {
    margin: 0;
    color: var(--cat-ink);
    font-family: 'IM Fell English', "EB Garamond", Georgia, serif;
    font-size: 1.1rem;
}

.runes-flow-rune-name {
    margin: 0.2rem 0 0;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-family: "EB Garamond", Georgia, serif;
    font-size: 1rem;
    color: var(--cat-ink);
}

.runes-flow-rune-glyph {
    font-size: 1.35rem;
    color: #8c3f52;
}

.runes-flow-rune-glyph--blank::after {
    content: "\00b7";
    color: rgba(140, 63, 82, 0.35);
}

.runes-flow-rune-core {
    margin: 0.35rem 0 0;
    color: var(--cat-ink-soft);
    font-size: 0.86rem;
}

.runes-flow-rune-reading {
    margin: 0.5rem 0 0;
    font-family: "EB Garamond", Georgia, serif;
    font-size: 0.95rem;
    line-height: 1.55;
}

/* Short tail pages gathered onto one card still need the air between them
 * that being separate pages used to give. */
.runes-flow-tail > * + * {
    margin-top: 0.9rem;
}

.runes-flow-more {
    margin-top: 0.5rem;
}

.runes-flow-more-label {
    margin: 0.7rem 0 0.1rem;
    color: var(--cat-ink);
    font-family: 'IM Fell English', "EB Garamond", Georgia, serif;
    font-size: 1.1rem;
}

.runes-flow-body {
    margin: 0.4rem 0 0;
    font-family: "EB Garamond", Georgia, serif;
    font-size: 1rem;
    line-height: 1.55;
}

/* Straight on the quartz like the rune pages: a panel inside the slab read
 * as a box in a box. */
.runes-flow-synthesis,
.runes-flow-consider {
    margin-top: 0.9rem;
}

.runes-flow-caption {
    margin: 0;
    color: var(--cat-ink);
    font-family: 'IM Fell English', "EB Garamond", Georgia, serif;
    font-size: 1.1rem;
}

.runes-flow-caption + .runes-flow-body {
    margin-top: 0.45rem;
}

.runes-flow-closing {
    margin: 0.9rem 0 0;
    font-family: "EB Garamond", Georgia, serif;
    font-size: 0.97rem;
    font-style: italic;
}

/* ---- feedback ---- */

.runes-flow-feedback {
    margin-top: 1rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--cat-line);
}

.runes-flow-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

.runes-flow-chip {
    border: 1px solid var(--cat-line);
    border-radius: 999px;
    padding: 0.4rem 0.7rem;
    background: transparent;
    color: var(--cat-ink);
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
}

.runes-flow-chip--on {
    background: rgba(255, 255, 255, 0.62);
    border-color: rgba(88, 44, 54, 0.5);
}

@media (max-width: 430px) {
    /* The cross does not fit at phone width; drop it to a plain wrapping
     * row, which also makes grid-area on the tiles inert. */
    .runes-spread--celtic {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (max-width: 390px) {
    .runes-flow-card {
        left: 3%;
        right: 3%;
        padding: 0.2rem 0.25rem 0;
    }

    .runes-flow-card--reading {
        top: 34%;
    }

    .runes-flow-choices--inline {
        grid-auto-flow: row;
    }

    .runes-tile__glyph {
        font-size: 1.3rem;
    }
}

/* The Cat's short paragraphs (short-paragraphs.js), blocks inside one node. */
.runes-flow-para {
    display: block;
}

.runes-flow-para + .runes-flow-para {
    margin-top: 0.55em;
}

/* Short note over the room after a magic link (app.js showNotice). */
.app-notice {
    position: fixed;
    left: 50%;
    top: 16px;
    transform: translateX(-50%);
    max-width: min(90vw, 360px);
    padding: 10px 16px;
    border-radius: 12px;
    background: rgba(28, 18, 40, 0.92);
    color: #f5e6c4;
    border: 1px solid #c9a24a;
    font-family: "EB Garamond", Georgia, serif;
    font-size: 16px;
    text-align: center;
    z-index: 1000;
}
.app-notice--problem { border-color: #b86a6a; }

/* Gift box, unlocked: each gift is a button that opens it in the tarot
   room, looking like the sealed row it replaces. */
.gift-popup__spread--open {
    width: 100%;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}


/* ---- Report a problem (report.js) ----
   A small tab in the top-left corner, clear of StormJewel's face and the
   tarot cards along the top. Below the entry gate (z 50) so it cannot be
   used before someone has agreed to come in. */
.report-tab {
    position: fixed;
    z-index: 40;
    top: calc(env(safe-area-inset-top, 0px) + 6px);
    left: 6px;
    border: 1px solid rgba(178, 158, 232, 0.35);
    border-radius: 999px;
    padding: 0.18rem 0.55rem;
    background: rgba(18, 12, 34, 0.55);
    color: rgba(236, 226, 255, 0.8);
    font-family: "EB Garamond", Georgia, serif;
    font-size: 0.7rem;
    cursor: pointer;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.report-tab--nudge {
    background: rgba(94, 68, 158, 0.92);
    color: #fff;
    font-size: 0.8rem;
    padding: 0.3rem 0.75rem;
}

.report-sheet {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(6, 4, 14, 0.6);
}

.report-sheet__card {
    width: 100%;
    max-width: 26rem;
    border: 1px solid rgba(178, 158, 232, 0.35);
    border-radius: 18px;
    padding: 1.1rem 1.15rem 1rem;
    background: linear-gradient(180deg, rgba(34, 24, 62, 0.98), rgba(16, 10, 32, 0.98));
    color: #f3ecff;
    font-family: "EB Garamond", Georgia, serif;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}

.report-sheet__speaker {
    margin: 0;
    color: #c9b4ef;
    font-family: 'IM Fell English', "EB Garamond", Georgia, serif;
    font-size: 1.05rem;
}

.report-sheet__text {
    margin: 0.35rem 0 0.8rem;
    font-size: 1rem;
    line-height: 1.5;
}

.report-sheet__input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(178, 158, 232, 0.4);
    border-radius: 10px;
    padding: 0.55rem 0.65rem;
    background: rgba(255, 255, 255, 0.07);
    color: #f6f1ff;
    font: inherit;
    font-size: 1rem;
    resize: vertical;
}

.report-sheet__small {
    margin: 0.4rem 0 0;
    color: rgba(222, 210, 250, 0.65);
    font-size: 0.8rem;
}

.report-sheet__error {
    margin: 0.5rem 0 0;
    color: #f4b3c8;
    font-size: 0.9rem;
}

.report-sheet__actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.85rem;
}

.report-sheet__button {
    border: 1px solid rgba(178, 158, 232, 0.5);
    border-radius: 999px;
    padding: 0.4rem 0.95rem;
    background: transparent;
    color: #f6f1ff;
    font: inherit;
    font-size: 0.95rem;
    cursor: pointer;
}

.report-sheet__button--primary {
    background: linear-gradient(135deg, rgba(94, 68, 158, 0.92), rgba(64, 44, 116, 0.95));
}

.report-sheet__button:disabled {
    opacity: 0.55;
    cursor: default;
}