/* The card dialogs render outside .tarot-page-shell, so they need the same
   tokens; without --tarot-card-ratio the card frame collapses to 0 height. */
.tarot-page-shell,
.tarot-card-dialog {
    --tarot-gold: #f9d976;
    --tarot-gold-rgb: 249, 217, 118;
    --tarot-wands: #ff8a4c;
    --tarot-cups: #38d9ff;
    --tarot-swords: #b9a7ff;
    --tarot-pentacles: #6ee7a8;
    --tarot-card-ratio: 7 / 12;
    --tarot-card-radius: 8px;
    --tarot-card-border-width: 2px;
    --tarot-card-width: clamp(3.6rem, 11vw, 7.25rem);
}

.tarot-page {
    gap: clamp(1rem, 3vw, 1.8rem);
}

.tarot-panel {
    position: relative;
    isolation: isolate;
    min-width: 0;
    border: 1px solid var(--surface-edge-strong);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(var(--tarot-gold-rgb), 0.1), transparent 42%),
        linear-gradient(180deg, var(--glass-tint-strong), var(--glass-tint));
    box-shadow: 0 20px 45px -32px rgba(0, 0, 0, 0.9), inset 0 1px 0 var(--surface-highlight);
}

/* Compact page title sharing a row with the view tabs. */
.tarot-topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem 1rem;
    min-width: 0;
}

.tarot-title {
    margin: 0;
    font-size: clamp(1.3rem, 2.6vw, 1.8rem);
    line-height: 1.15;
}

/* ---------- view tabs ---------- */

.tarot-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.35rem;
    border: 1px solid var(--surface-edge);
    border-radius: 14px;
    background: rgba(5, 14, 28, 0.72);
    box-shadow: inset 0 1px 0 var(--surface-highlight);
    width: fit-content;
    max-width: 100%;
}

.tarot-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 44px;
    padding: 0.45rem 1rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--ink-soft);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color var(--motion-fast), color var(--motion-fast), background var(--motion-fast), box-shadow var(--motion-fast);
}

.tarot-tab-glyph {
    color: var(--tarot-gold);
    opacity: 0.7;
}

.tarot-tab:hover {
    border-color: var(--surface-edge-strong);
    color: var(--ink);
}

.tarot-tab[aria-selected="true"] {
    border-color: var(--tarot-gold);
    background: linear-gradient(135deg, rgba(var(--tarot-gold-rgb), 0.18), rgba(124, 92, 255, 0.16));
    color: var(--ink);
    box-shadow: 0 0 22px rgba(var(--tarot-gold-rgb), 0.28);
}

.tarot-tab[aria-selected="true"] .tarot-tab-glyph {
    opacity: 1;
}

.tarot-tab:focus-visible {
    outline: 2px solid var(--accent-warm);
    outline-offset: 3px;
}

.tarot-tab-panel[hidden] {
    display: none;
}

.tarot-tab-panel:focus-visible {
    outline: 2px solid var(--accent-warm);
    outline-offset: 3px;
}

.tarot-panel {
    padding: clamp(0.95rem, 2.5vw, 1.35rem);
}

.tarot-load-error {
    margin: 0;
    color: var(--ink);
    font-weight: 800;
}

.tarot-panel-heading {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    align-items: end;
    margin-bottom: 1rem;
}

.tarot-panel-heading h2,
.tarot-panel-heading p {
    margin: 0;
}

.tarot-panel-heading h2 {
    scroll-margin-top: 1.5rem;
}

.tarot-panel-note {
    max-width: 44ch;
    color: var(--muted);
    font-size: var(--step--1);
}

/* ---------- buttons ---------- */

.tarot-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.tarot-button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1rem;
    border: 1px solid var(--surface-edge);
    border-radius: 6px;
    background: rgba(5, 14, 28, 0.86);
    color: var(--ink);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color var(--motion-fast), background var(--motion-fast), box-shadow var(--motion-fast), transform var(--motion-fast);
}

.tarot-button:hover:not(:disabled),
.tarot-button:focus-visible {
    border-color: var(--tarot-gold);
    box-shadow: 0 0 24px rgba(var(--tarot-gold-rgb), 0.28);
    transform: translateY(-1px);
}

.tarot-button-primary {
    border-color: var(--accent);
    background: linear-gradient(135deg, rgba(0, 245, 255, 0.2), rgba(255, 43, 214, 0.18));
    box-shadow: 0 0 20px var(--glow), inset 0 -3px 0 rgba(255, 43, 214, 0.5);
}

.tarot-button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.tarot-button:focus-visible,
.tarot-gallery-card:focus-visible,
.tarot-slot:focus-visible,
.tarot-fan-card:focus-visible,
.tarot-field select:focus-visible {
    outline: 2px solid var(--accent-warm);
    outline-offset: 3px;
}

/* ---------- shared card frame ---------- */

.tarot-card {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: var(--tarot-card-ratio);
    border-radius: var(--tarot-card-radius);
}

.tarot-card-static.is-reversed .tarot-card-face {
    transform: rotate(180deg);
}

.tarot-card-face,
.tarot-card-back {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    /* Crisp, fully opaque palette edge; the dark 1px ring outside it keeps it sharp on any backdrop. */
    border: var(--tarot-card-border-width) solid var(--tarot-gold);
    border-radius: var(--tarot-card-radius);
    background: #0a0f22;
    box-shadow: 0 10px 22px -14px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(0, 0, 0, 0.4);
}

.tarot-card-face {
    --tarot-suit: var(--tarot-gold);
    border-color: var(--tarot-suit);
    transition: transform var(--motion-medium);
}

.tarot-card-face[data-group="wands"] {
    --tarot-suit: var(--tarot-wands);
}

.tarot-card-face[data-group="cups"] {
    --tarot-suit: var(--tarot-cups);
}

.tarot-card-face[data-group="swords"] {
    --tarot-suit: var(--tarot-swords);
}

.tarot-card-face[data-group="pentacles"] {
    --tarot-suit: var(--tarot-pentacles);
}

.tarot-card-image,
.tarot-card-back-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tarot-card-fallback {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-rows: auto 1fr auto;
    justify-items: center;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.35rem;
    border: 1px solid color-mix(in srgb, var(--tarot-suit) 45%, transparent);
    border-radius: calc(var(--tarot-card-radius) - 2px);
    margin: 4px;
    background:
        radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--tarot-suit) 30%, transparent), transparent 62%),
        linear-gradient(160deg, #111a36, #05070d 70%);
    color: var(--ink);
    text-align: center;
}

.tarot-card-fallback-number {
    color: var(--tarot-suit);
    font-family: var(--serif);
    font-size: clamp(0.6rem, 0.55rem + 0.3vw, 0.8rem);
    font-weight: 700;
    letter-spacing: 0.08em;
}

.tarot-card-fallback-glyph {
    color: var(--tarot-suit);
    font-size: clamp(1.4rem, 1rem + 1.6vw, 2.4rem);
    line-height: 1;
    text-shadow: 0 0 18px var(--tarot-suit);
}

.tarot-card-fallback-name {
    max-width: 100%;
    font-family: var(--serif);
    font-size: clamp(0.56rem, 0.5rem + 0.3vw, 0.78rem);
    font-weight: 700;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.tarot-card-back {
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 43, 214, 0.35), transparent 55%),
        repeating-linear-gradient(45deg, rgba(0, 245, 255, 0.14) 0 2px, transparent 2px 10px),
        repeating-linear-gradient(-45deg, rgba(var(--tarot-gold-rgb), 0.12) 0 2px, transparent 2px 10px),
        linear-gradient(160deg, #1a0f3a, #05070d);
}

.tarot-card-back-glyph {
    color: var(--tarot-gold);
    font-size: clamp(1.2rem, 1rem + 1.2vw, 2rem);
    text-shadow: 0 0 18px rgba(var(--tarot-gold-rgb), 0.8);
}

/* ---------- gallery ---------- */

.tarot-gallery-groups {
    display: grid;
    gap: clamp(1.2rem, 3vw, 2rem);
}

.tarot-gallery-group {
    display: grid;
    gap: 0.8rem;
}

.tarot-gallery-group-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.6rem;
    margin: 0;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid var(--line);
}

.tarot-gallery-group-glyph {
    color: var(--tarot-gold);
    text-shadow: 0 0 14px rgba(var(--tarot-gold-rgb), 0.6);
}

.tarot-gallery-group[data-group="wands"] .tarot-gallery-group-glyph {
    color: var(--tarot-wands);
    text-shadow: 0 0 14px var(--tarot-wands);
}

.tarot-gallery-group[data-group="cups"] .tarot-gallery-group-glyph {
    color: var(--tarot-cups);
    text-shadow: 0 0 14px var(--tarot-cups);
}

.tarot-gallery-group[data-group="swords"] .tarot-gallery-group-glyph {
    color: var(--tarot-swords);
    text-shadow: 0 0 14px var(--tarot-swords);
}

.tarot-gallery-group[data-group="pentacles"] .tarot-gallery-group-glyph {
    color: var(--tarot-pentacles);
    text-shadow: 0 0 14px var(--tarot-pentacles);
}

.tarot-gallery-group-count {
    color: var(--muted);
    font-size: var(--step--1);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.tarot-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(5.4rem, 18vw, 7.4rem), 1fr));
    gap: clamp(0.6rem, 1.6vw, 1rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.tarot-gallery-item {
    min-width: 0;
}

.tarot-gallery-card {
    width: 100%;
    display: grid;
    gap: 0.4rem;
    padding: 0.3rem;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--ink-soft);
    font: inherit;
    text-align: center;
    cursor: pointer;
    transition: border-color var(--motion-fast), background var(--motion-fast), transform var(--motion-fast);
}

.tarot-gallery-card:hover,
.tarot-gallery-card:focus-visible {
    border-color: var(--surface-edge);
    background: var(--surface-fill-subtle);
    transform: translateY(-3px);
}

.tarot-gallery-card:hover .tarot-card-face,
.tarot-gallery-card:focus-visible .tarot-card-face {
    box-shadow: 0 0 24px rgba(var(--tarot-gold-rgb), 0.35), 0 0 0 1px rgba(var(--tarot-gold-rgb), 0.6);
}

.tarot-gallery-card-name {
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

/* ---------- detail dialog ---------- */

.tarot-card-dialog {
    width: min(760px, calc(100% - 2rem));
    max-height: calc(100vh - 2rem);
    padding: 0;
    border: 1px solid var(--surface-edge-strong);
    border-radius: 10px;
    background:
        linear-gradient(135deg, rgba(var(--tarot-gold-rgb), 0.12), transparent 45%),
        var(--panel-solid);
    color: var(--ink);
    box-shadow: var(--shadow-md);
}

.tarot-card-dialog::backdrop {
    background: rgba(2, 3, 9, 0.78);
    backdrop-filter: blur(6px);
}

.tarot-dialog-body {
    display: grid;
    grid-template-columns: minmax(150px, 230px) minmax(0, 1fr);
    gap: clamp(1rem, 3vw, 1.6rem);
    padding: clamp(1rem, 3vw, 1.6rem);
}

.tarot-dialog-card {
    align-self: start;
}

.tarot-dialog-copy {
    display: grid;
    align-content: start;
    gap: 0.75rem;
    min-width: 0;
}

.tarot-dialog-copy h2,
.tarot-dialog-copy .eyebrow {
    margin: 0;
}

.tarot-dialog-meanings {
    display: grid;
    gap: 0.75rem;
    margin: 0;
}

.tarot-dialog-meanings > div {
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--surface-edge);
    border-radius: 6px;
    background: rgba(5, 14, 28, 0.72);
}

.tarot-dialog-meanings dt {
    color: var(--tarot-gold);
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.tarot-dialog-meanings dd {
    margin: 0.25rem 0 0;
    color: var(--ink-soft);
}

/* ---------- hero reveal dialog (post-deal single reveals) ---------- */

.tarot-reading-dialog {
    width: min(880px, calc(100% - 2rem));
}

.tarot-reveal-body {
    grid-template-columns: minmax(170px, 290px) minmax(0, 1fr);
    align-items: center;
}

.tarot-reveal-stage {
    align-self: center;
    perspective: 1100px;
}

.tarot-reveal-card-frame {
    transform-origin: 50% 100%;
    animation: tarot-hero-flip-up 720ms cubic-bezier(0.2, 0.85, 0.25, 1) both;
}

.tarot-reveal-card-frame .tarot-card-face {
    box-shadow:
        0 26px 50px -22px rgba(0, 0, 0, 0.95),
        0 0 0 1px rgba(0, 0, 0, 0.4),
        0 0 42px rgba(var(--tarot-gold-rgb), 0.24);
}

.tarot-reveal-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.7rem;
    font-family: var(--serif);
    overflow-wrap: anywhere;
}

@keyframes tarot-hero-flip-up {
    from {
        opacity: 0;
        transform: translateY(28px) rotateX(78deg) scale(0.7);
    }

    60% {
        opacity: 1;
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.tarot-keywords {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tarot-keywords li {
    padding: 0.2rem 0.55rem;
    border: 1px solid rgba(var(--tarot-gold-rgb), 0.45);
    border-radius: 999px;
    background: rgba(var(--tarot-gold-rgb), 0.08);
    color: var(--ink);
    font-size: 0.76rem;
    font-weight: 800;
}

/* ---------- spreads ---------- */

/* The start block (spread chips, description, draw mode + Shuffle & deal) is the
   first thing in the dealer panel, anchored top-left above the table, so starting
   a shuffle is always in the first viewport. */
.tarot-spread-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(0.8rem, 2vw, 1.1rem);
    align-items: start;
}

.tarot-spread-controls {
    display: grid;
    justify-items: start;
    gap: 0.75rem;
    min-width: 0;
}

.tarot-spread-controls > * {
    max-width: 100%;
}

/* One framed group for everything needed to start a reading. */
.tarot-start-panel {
    display: grid;
    gap: 0.7rem;
    width: min(100%, 64rem);
    min-width: 0;
    padding: clamp(0.75rem, 2vw, 1rem);
    border: 1px solid rgba(var(--tarot-gold-rgb), 0.38);
    border-left-width: 3px;
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(var(--tarot-gold-rgb), 0.09), transparent 55%),
        rgba(3, 8, 18, 0.72);
    box-shadow: 0 16px 34px -26px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(var(--tarot-gold-rgb), 0.12);
}

.tarot-spread-controls > .tarot-deal-status {
    width: min(100%, 64rem);
}

.tarot-deal-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 0.75rem 1.25rem;
    min-width: 0;
    padding-top: 0.7rem;
    border-top: 1px dashed rgba(var(--tarot-gold-rgb), 0.22);
}

.tarot-deal-bar .tarot-mode-picker {
    flex: 0 1 auto;
}

/* The "go" control: the largest, brightest button in the panel. */
.tarot-button.tarot-deal-go {
    flex: 0 0 auto;
    min-height: 58px;
    min-width: 13rem;
    gap: 0.6rem;
    padding: 0.85rem 1.9rem;
    border: 2px solid var(--tarot-gold);
    border-radius: 8px;
    background: linear-gradient(135deg, var(--tarot-gold) 0%, #ffb35c 48%, var(--accent-strong) 130%);
    color: #120a02;
    font-size: 1.08rem;
    letter-spacing: 0.1em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
    box-shadow: 0 0 28px rgba(var(--tarot-gold-rgb), 0.45), 0 12px 24px -14px rgba(0, 0, 0, 0.9), inset 0 -3px 0 rgba(120, 40, 0, 0.35);
}

.tarot-button.tarot-deal-go::before {
    content: "✦";
    content: "✦" / "";
    font-size: 1.15em;
    line-height: 1;
}

.tarot-button.tarot-deal-go:hover:not(:disabled),
.tarot-button.tarot-deal-go:focus-visible {
    border-color: #fff3c4;
    box-shadow: 0 0 38px rgba(var(--tarot-gold-rgb), 0.65), 0 14px 26px -14px rgba(0, 0, 0, 0.9), inset 0 -3px 0 rgba(120, 40, 0, 0.35);
    transform: translateY(-2px);
}

/* Collapsed after Shuffle & deal: the setup band shrinks to a slim bar holding
   the re-expand toggle and the live deal status, leaving the table the view. */
.tarot-spread-controls > [hidden] {
    display: none !important;
}

.tarot-spread-layout.is-collapsed .tarot-spread-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 0.9rem;
    animation: tarot-controls-collapse-in var(--motion-medium) ease-out both;
}

.tarot-spread-layout.is-collapsed .tarot-deal-status {
    flex: 1 1 16rem;
    min-width: 0;
}

.tarot-spread-layout.is-collapsed .tarot-table {
    animation: tarot-table-widen-in var(--motion-medium) ease-out both;
}

/* Re-expand toggle: sits where the start block was (top-left), in its gold frame. */
.tarot-controls-toggle {
    flex: none;
    order: -1;
    gap: 0.45rem;
    border-color: rgba(var(--tarot-gold-rgb), 0.6);
    border-left-width: 3px;
    background: linear-gradient(135deg, rgba(var(--tarot-gold-rgb), 0.14), rgba(3, 8, 18, 0.86));
}

.tarot-controls-toggle::before {
    content: "✦";
    content: "✦" / "";
    color: var(--tarot-gold);
}

@keyframes tarot-controls-collapse-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes tarot-table-widen-in {
    from {
        opacity: 0.6;
    }

    to {
        opacity: 1;
    }
}

.tarot-spread-picker {
    margin: 0;
    padding: 0;
    border: 0;
    /* Fieldsets default to min-content width; without this the chip row would widen the page. */
    min-width: 0;
}

.tarot-spread-picker legend,
.tarot-orientation-field legend,
.tarot-field > span {
    margin-bottom: 0.45rem;
    padding: 0;
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* A wrapping row of compact chips: auto-fill keeps any number of spreads in tidy,
   evenly sized columns (see the 560px rule for the scrollable mobile row). */
.tarot-spread-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr));
    gap: 0.45rem;
}

.tarot-spread-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    min-height: 44px;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--surface-edge);
    border-radius: 6px;
    background: rgba(5, 14, 28, 0.78);
    cursor: pointer;
    transition: border-color var(--motion-fast), background var(--motion-fast), box-shadow var(--motion-fast);
}

.tarot-spread-option:hover {
    border-color: var(--line-strong);
}

.tarot-spread-option:has(input:checked) {
    border-color: var(--tarot-gold);
    background: rgba(var(--tarot-gold-rgb), 0.1);
    box-shadow: 0 0 20px rgba(var(--tarot-gold-rgb), 0.18);
}

.tarot-spread-option:has(input:focus-visible) {
    outline: 2px solid var(--accent-warm);
    outline-offset: 2px;
}

.tarot-spread-option input,
.tarot-orientation-option input {
    accent-color: var(--tarot-gold);
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
    flex: none;
}

.tarot-spread-option-text {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}

.tarot-spread-option-text strong {
    font-size: 0.9rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.tarot-spread-option-text span {
    color: var(--muted);
    font-size: 0.74rem;
}

/* ---------- deal mode picker (shuffle & deal vs. fan) ---------- */

.tarot-mode-picker {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.tarot-mode-picker legend {
    margin-bottom: 0.3rem;
    padding: 0;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* A compact two-option segmented switch; it stays a real radio group. */
.tarot-mode-options {
    display: inline-grid;
    grid-template-columns: repeat(2, auto);
    gap: 0.3rem;
    max-width: 100%;
}

.tarot-mode-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    min-height: 36px;
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--surface-edge);
    border-radius: 6px;
    background: rgba(5, 14, 28, 0.78);
    cursor: pointer;
    transition: border-color var(--motion-fast), background var(--motion-fast), box-shadow var(--motion-fast);
}

.tarot-mode-option:hover {
    border-color: var(--line-strong);
}

.tarot-mode-option:has(input:checked) {
    border-color: var(--tarot-gold);
    background: rgba(var(--tarot-gold-rgb), 0.1);
    box-shadow: 0 0 20px rgba(var(--tarot-gold-rgb), 0.18);
}

.tarot-mode-option:has(input:focus-visible) {
    outline: 2px solid var(--accent-warm);
    outline-offset: 2px;
}

.tarot-mode-option input {
    accent-color: var(--tarot-gold);
    width: 0.9rem;
    height: 0.9rem;
    margin: 0;
    flex: none;
}

.tarot-mode-option-text {
    display: block;
    min-width: 0;
}

.tarot-mode-option-text strong {
    font-size: 0.78rem;
    line-height: 1.2;
    white-space: nowrap;
}

/* The one-line hints stay available to screen readers but take no space. */
.tarot-mode-option-text span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Very narrow: the two modes stay side by side, just tighter. */
@media (max-width: 360px) {
    .tarot-mode-option {
        gap: 0.3rem;
        padding: 0.25rem 0.45rem;
    }

    .tarot-mode-option-text strong {
        font-size: 0.74rem;
    }
}

.tarot-deal-status {
    margin: 0;
    color: var(--ink-soft);
    font-size: var(--step--1);
}

/* The chosen spread's explanation reads as quiet annotation beside the gold
   controls: a dusty-lavender aside with a thin rule, no frame or glow, so it
   stays distinctive without looking like another selectable chip. */
.tarot-spread-description {
    --tarot-note-rgb: 176, 168, 204;
    position: relative;
    box-sizing: border-box;
    max-width: 75ch;
    margin: 0;
    padding: 0.55rem 0.9rem 0.55rem 2.1rem;
    border: 0;
    border-left: 2px solid rgba(var(--tarot-note-rgb), 0.55);
    border-radius: 0 6px 6px 0;
    background: linear-gradient(90deg, rgba(var(--tarot-note-rgb), 0.1), rgba(var(--tarot-note-rgb), 0.02) 70%);
    box-shadow: none;
    color: #d6d0e8;
    font-size: var(--step-0, 1rem);
    font-style: italic;
    font-weight: 400;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.tarot-spread-description::before {
    content: '✦';
    position: absolute;
    top: 0.5rem;
    left: 0.75rem;
    color: rgba(var(--tarot-note-rgb), 0.85);
    font-size: 0.9rem;
    font-style: normal;
    line-height: 1.55;
    text-shadow: none;
}

.tarot-spread-description:empty {
    display: none;
}

/* Brief attention cue, re-triggered by tarot.js each time the spread changes. */
.tarot-spread-description.is-highlighted {
    animation: tarot-spread-description-in 650ms ease-out;
}

@keyframes tarot-spread-description-in {
    from {
        opacity: 0.4;
        transform: translateY(-3px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 360px) {
    .tarot-spread-description {
        padding: 0.5rem 0.7rem 0.5rem 1.9rem;
        font-size: 0.92rem;
    }

    .tarot-spread-description::before {
        top: 0.45rem;
        left: 0.6rem;
    }
}

.tarot-deal-status {
    padding: 0.55rem 0.7rem;
    border-left: 3px solid var(--tarot-gold);
    background: rgba(var(--tarot-gold-rgb), 0.06);
}

.tarot-table {
    min-width: 0;
    overflow-x: auto;
    padding: clamp(1rem, 3vw, 2rem) 0.75rem;
    border: 1px solid var(--surface-edge);
    border-radius: 8px;
    background:
        radial-gradient(ellipse at 50% 40%, rgba(124, 92, 255, 0.22), transparent 70%),
        radial-gradient(circle at 50% 120%, rgba(255, 43, 214, 0.14), transparent 60%),
        rgba(3, 6, 14, 0.85);
    container-type: inline-size;
}

/* ---------- face-down fan (shuffled deck to pick from) ---------- */

.tarot-fan {
    --tarot-fan-card-width: clamp(1.5rem, 5vw, 3.4rem);
    --tarot-fan-span: 70deg;
    position: relative;
    width: calc(var(--tarot-fan-card-width) * 11.3);
    height: calc(var(--tarot-fan-card-width) * 3.45 + 1.6rem);
    margin: 0 auto clamp(0.9rem, 2.5vw, 1.4rem);
}

@supports (width: 1cqi) {
    .tarot-fan {
        /* Size the fan to the table so the whole arc fits without scrolling when possible. */
        --tarot-fan-card-width: clamp(1.5rem, 8.3cqi, 3.4rem);
    }
}

.tarot-fan[hidden] {
    display: none;
}

.tarot-fan-card {
    --tarot-fan-angle: calc(var(--tarot-fan-t, 0) * var(--tarot-fan-span));
    position: absolute;
    top: 1.1rem;
    left: 50%;
    display: block;
    width: var(--tarot-fan-card-width);
    aspect-ratio: var(--tarot-card-ratio);
    margin-left: calc(var(--tarot-fan-card-width) / -2);
    padding: 0;
    border: 0;
    border-radius: var(--tarot-card-radius);
    background: transparent;
    color: var(--ink);
    font: inherit;
    cursor: pointer;
    transform-origin: 50% calc(var(--tarot-fan-card-width) * 9);
    transform: rotate(var(--tarot-fan-angle));
    transition: transform var(--motion-fast);
    animation: tarot-fan-open 520ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
    animation-delay: var(--tarot-fan-delay, 0ms);
}

.tarot-fan-card .tarot-card-back {
    border-radius: calc(var(--tarot-card-radius) - 2px);
}

.tarot-fan-card .tarot-card-back-glyph {
    font-size: calc(var(--tarot-fan-card-width) * 0.42);
}

.tarot-fan-card:hover,
.tarot-fan-card:focus-visible {
    transform: rotate(var(--tarot-fan-angle)) translateY(-0.9rem);
}

.tarot-fan-card:focus-visible {
    z-index: 1;
}

.tarot-fan-card:hover .tarot-card-back,
.tarot-fan-card:focus-visible .tarot-card-back {
    box-shadow: 0 0 22px rgba(var(--tarot-gold-rgb), 0.5), 0 0 0 1px rgba(var(--tarot-gold-rgb), 0.8);
}

@keyframes tarot-fan-open {
    from {
        opacity: 0;
        transform: rotate(0deg);
    }
}

/* ---------- shuffle & deal deck stage (primary deal mode) ---------- */

.tarot-deck-stage {
    --tarot-deck-card-width: clamp(4.2rem, 14vw, 6.2rem);
    display: grid;
    justify-items: center;
    gap: 0.8rem;
    margin: 0 auto clamp(1rem, 3vw, 1.6rem);
    padding-bottom: clamp(0.8rem, 2.5vw, 1.2rem);
    border-bottom: 1px dashed rgba(var(--tarot-gold-rgb), 0.25);
    text-align: center;
}

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

.tarot-deck-stage-title {
    margin: 0;
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.tarot-deck-stack {
    position: relative;
    width: var(--tarot-deck-card-width);
    aspect-ratio: var(--tarot-card-ratio);
    /* Room for the packets that swing out to either side while animating. */
    margin: 0.4rem calc(var(--tarot-deck-card-width) * 0.75) 0.2rem;
}

.tarot-deck-card {
    position: absolute;
    inset: 0;
    z-index: var(--tarot-stack-i, 0);
    display: block;
    border-radius: var(--tarot-card-radius);
    translate: calc(var(--tarot-stack-i, 0) * -1.5px) calc(var(--tarot-stack-i, 0) * -2px);
}

.tarot-deck-card .tarot-card-back {
    border-radius: calc(var(--tarot-card-radius) - 1px);
}

.tarot-deck-card .tarot-card-back-glyph {
    font-size: calc(var(--tarot-deck-card-width) * 0.36);
}

.tarot-deck-card:last-child .tarot-card-back {
    box-shadow: 0 0 26px rgba(var(--tarot-gold-rgb), 0.28), 0 14px 26px -14px rgba(0, 0, 0, 0.95);
}

/* Shuffle: the deck splits into two halves that riffle back together. */
.tarot-deck-stack.is-shuffling .tarot-deck-card {
    animation: tarot-riffle-left 360ms cubic-bezier(0.45, 0, 0.25, 1);
    animation-delay: calc(var(--tarot-stack-i, 0) * 6ms);
}

.tarot-deck-stack.is-shuffling .tarot-deck-card:nth-child(even) {
    animation-name: tarot-riffle-right;
}

@keyframes tarot-riffle-left {
    0%,
    100% {
        transform: none;
    }

    35% {
        transform: translateX(-70%) rotate(-10deg);
    }

    60% {
        transform: translateX(-24%) rotate(-4deg);
    }
}

@keyframes tarot-riffle-right {
    0%,
    100% {
        transform: none;
    }

    35% {
        transform: translateX(70%) rotate(10deg);
    }

    60% {
        transform: translateX(24%) rotate(4deg);
    }
}

@keyframes tarot-deck-glow {
    0%,
    100% {
        filter: none;
    }

    40% {
        filter: brightness(1.35) drop-shadow(0 0 10px rgba(var(--tarot-gold-rgb), 0.7));
    }
}

.tarot-deck-meta {
    margin: 0;
    color: var(--muted);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
}

.tarot-deck-actions {
    justify-content: center;
}

.tarot-board {
    --tarot-rows: 1;
    --tarot-cols: 1;
    display: grid;
    grid-template-columns: repeat(var(--tarot-cols), var(--tarot-card-width));
    --tarot-board-gap: clamp(0.55rem, 1.8vw, 1rem);
    grid-template-rows: repeat(var(--tarot-rows), auto);
    justify-content: center;
    gap: var(--tarot-board-gap);
    width: max-content;
    min-width: 100%;
    margin-inline: auto;
}

.tarot-board.has-crossing {
    column-gap: calc(var(--tarot-card-width) * 0.32);
    row-gap: calc(var(--tarot-card-width) * 0.18);
    padding-inline: calc(var(--tarot-card-width) * 0.2);
}

@supports (width: 1cqi) {
    /*
     * Fit every spread inside the table by default: shrink the card width with the
     * spread's column count (set by applyBoardGrid) so all columns, gaps, and the
     * slot-number badge overhang (0.55rem per side) fit the table's inline size.
     * The viewport clamp still caps the size, so roomy spreads render as before.
     */
    .tarot-board {
        --tarot-card-width: max(1rem, min(
            clamp(3.6rem, 11vw, 7.25rem),
            calc((100cqi - 1.1rem - (var(--tarot-cols) - 1) * var(--tarot-board-gap)) / var(--tarot-cols))
        ));
    }

    /*
     * Crossing boards size gaps/padding as multiples of the card width W:
     * cols*W + (cols - 1)*0.32W + 2*0.2W = W * (1.32*cols + 0.08), solved for W here.
     */
    .tarot-board.has-crossing {
        --tarot-card-width: max(1rem, min(
            clamp(3.6rem, 11vw, 7.25rem),
            calc((100cqi - 1.1rem) / (1.32 * var(--tarot-cols) + 0.08))
        ));
    }
}

.tarot-slot {
    position: relative;
    display: block;
    width: var(--tarot-card-width);
    aspect-ratio: var(--tarot-card-ratio);
    padding: 0;
    border: 0;
    border-radius: var(--tarot-card-radius);
    background: transparent;
    color: var(--ink);
    font: inherit;
    transform: rotate(var(--tarot-slot-rotate, 0deg));
}

.tarot-slot.is-crossing {
    transform: rotate(var(--tarot-slot-rotate, 90deg)) scale(0.86);
}

.tarot-slot-empty {
    border: 1px dashed var(--surface-edge);
    background: rgba(0, 245, 255, 0.03);
}

.tarot-slot-number {
    position: absolute;
    top: -0.55rem;
    left: -0.55rem;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid var(--tarot-gold);
    border-radius: 50%;
    background: #0a0f22;
    color: var(--tarot-gold);
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
}

.tarot-slot-empty .tarot-slot-number {
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    border-style: dashed;
    opacity: 0.7;
}

/* Next spot to fill, in the spread's traditional position order. */
.tarot-slot-empty.is-next {
    border: 1px solid var(--tarot-gold);
    background: rgba(var(--tarot-gold-rgb), 0.08);
    animation: tarot-slot-pulse 1.6s ease-in-out infinite;
}

.tarot-slot-empty.is-next .tarot-slot-number {
    border-style: solid;
    background: var(--tarot-gold);
    color: #0a0f22;
    opacity: 1;
}

@keyframes tarot-slot-pulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(var(--tarot-gold-rgb), 0.5), 0 0 14px rgba(var(--tarot-gold-rgb), 0.2);
    }

    50% {
        box-shadow: 0 0 0 5px rgba(var(--tarot-gold-rgb), 0), 0 0 26px rgba(var(--tarot-gold-rgb), 0.45);
    }
}

.tarot-card-flip {
    cursor: pointer;
    perspective: 900px;
    animation: tarot-deal-lay 560ms cubic-bezier(0.22, 0.7, 0.3, 1) backwards;
}

/* In the dealer's hand: not hoverable/clickable until it has settled in its spot. */
.tarot-card-flip.is-dealing {
    pointer-events: none;
}

.tarot-board[aria-busy="true"] .tarot-card-flip {
    cursor: progress;
}

.tarot-card-flip.is-revealed {
    cursor: default;
}

.tarot-card-inner {
    position: absolute;
    inset: 0;
    display: block;
    transform-style: preserve-3d;
    transition: transform 620ms cubic-bezier(0.2, 0.8, 0.2, 1), translate var(--motion-fast);
}

.tarot-card-flip:not(.is-revealed):hover .tarot-card-inner,
.tarot-card-flip:not(.is-revealed):focus-visible .tarot-card-inner {
    translate: 0 -4px;
}

.tarot-card-flip:not(.is-revealed):hover .tarot-card-back,
.tarot-card-flip:not(.is-revealed):focus-visible .tarot-card-back {
    box-shadow: 0 0 26px rgba(var(--tarot-gold-rgb), 0.45), 0 0 0 1px rgba(var(--tarot-gold-rgb), 0.7);
}

.tarot-card-flip.is-revealed .tarot-card-inner {
    transform: rotateY(180deg);
}

/* Next face-down card to turn over, in the spread's position order. */
.tarot-card-flip.is-next-reveal .tarot-card-back {
    box-shadow: 0 0 0 2px var(--tarot-gold), 0 0 24px rgba(var(--tarot-gold-rgb), 0.5);
}

.tarot-card-flip.is-next-reveal .tarot-slot-number {
    width: 1.75rem;
    height: 1.75rem;
    background: var(--tarot-gold);
    color: #0a0f22;
    font-size: 0.8rem;
    animation: tarot-slot-pulse 1.6s ease-in-out infinite;
}

/* Face-down cards that are not next: shown but not operable until their turn. */
.tarot-card-flip.is-out-of-order {
    cursor: not-allowed;
}

.tarot-card-flip.is-out-of-order .tarot-card-back {
    filter: saturate(0.6) brightness(0.72);
}

.tarot-card-flip.is-out-of-order .tarot-slot-number {
    opacity: 0.6;
}

.tarot-card-flip.is-out-of-order:hover .tarot-card-inner,
.tarot-card-flip.is-out-of-order:focus-visible .tarot-card-inner {
    translate: none;
}

.tarot-card-flip.is-out-of-order:hover .tarot-card-back,
.tarot-card-flip.is-out-of-order:focus-visible .tarot-card-back {
    box-shadow: none;
}

.tarot-card-inner > .tarot-card-back,
.tarot-card-front {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.tarot-card-front {
    position: absolute;
    inset: 0;
    display: block;
    transform: rotateY(180deg);
}

.tarot-card-front.is-reversed {
    transform: rotateY(180deg) rotateZ(180deg);
}

/*
 * Flat at rest. The 3D context (perspective + preserve-3d + rotateY faces) exists
 * only while a card turns over; rotated/scaled crossing slots otherwise stay
 * composited through it and rasterize warped and blurry next to upright cards.
 * Face-down: the hidden front carries no 3D transform. Settled (added by tarot.js
 * once the flip transition ends, or at once when it doesn't run): the front is
 * shown as plain 2D content, keeping the 180deg turn for reversed cards.
 */
.tarot-card-flip:not(.is-revealed),
.tarot-card-flip.is-settled {
    perspective: none;
}

.tarot-card-flip:not(.is-revealed) .tarot-card-inner {
    transform-style: flat;
}

.tarot-card-flip:not(.is-revealed) .tarot-card-front {
    visibility: hidden;
    transform: none;
}

.tarot-card-flip.is-settled .tarot-card-inner {
    transform: none;
    transform-style: flat;
    transition: none;
}

.tarot-card-flip.is-settled .tarot-card-inner > .tarot-card-back {
    visibility: hidden;
}

.tarot-card-flip.is-settled .tarot-card-front {
    transform: none;
}

.tarot-card-flip.is-settled .tarot-card-front.is-reversed {
    transform: rotate(180deg);
}

/* Card-name footer overlay: dealt board cards only (lives inside .tarot-card-front,
   so it inherits the front's backface hiding and stays invisible while face-down). */
.tarot-card-footer {
    position: absolute;
    right: var(--tarot-card-border-width);
    bottom: var(--tarot-card-border-width);
    left: var(--tarot-card-border-width);
    z-index: 1;
    display: block;
    max-height: 45%;
    padding: 0.85em 0.3rem 0.35rem;
    overflow: hidden;
    border-radius: 0 0 calc(var(--tarot-card-radius) - var(--tarot-card-border-width)) calc(var(--tarot-card-radius) - var(--tarot-card-border-width));
    background: linear-gradient(180deg, rgba(3, 6, 16, 0), rgba(3, 6, 16, 0.82) 40%, rgba(3, 6, 16, 0.94));
    box-shadow: inset 0 -1px 0 rgba(var(--tarot-gold-rgb), 0.35);
    color: var(--tarot-gold);
    font-family: var(--serif);
    font-size: clamp(0.5rem, 0.44rem + 0.3vw, 0.74rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.03em;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
    overflow-wrap: anywhere;
    pointer-events: none;
}

/* The reversed front is rotated 180deg as a whole; counter-rotate the footer and
   anchor it to the local top so it reads upright at the card's visual bottom. */
.tarot-card-front.is-reversed .tarot-card-footer {
    top: var(--tarot-card-border-width);
    bottom: auto;
    transform: rotate(180deg);
}

/* The footer already names the card, so hide the duplicate fallback name on the board. */
.tarot-card-front .tarot-card-fallback-name {
    visibility: hidden;
}

/*
 * Laying a dealt card down: it travels from the deck (or the fan / table edge) in
 * a slight arc, tilted as if carried by hand, lifts just over its spot, then drops
 * and settles flat. tarot.js sets the per-card offsets; without them the card
 * simply drops in from just above. Individual translate/rotate/scale compose with
 * the slot's own transform, so crossing cards keep their layout rotation.
 */
@keyframes tarot-deal-lay {
    0% {
        opacity: 0;
        translate: var(--tarot-deal-from-x, 0px) var(--tarot-deal-from-y, -18px);
        rotate: var(--tarot-deal-tilt, 0deg);
        scale: 1.1;
        filter: drop-shadow(0 18px 16px rgba(0, 0, 0, 0.55));
    }

    12% {
        opacity: 1;
    }

    62% {
        translate: calc(var(--tarot-deal-from-x, 0px) * 0.1) calc(var(--tarot-deal-from-y, -18px) * 0.1 - 12px);
        rotate: calc(var(--tarot-deal-tilt, 0deg) * -0.2);
        scale: 1.06;
        filter: drop-shadow(0 14px 12px rgba(0, 0, 0, 0.5));
        animation-timing-function: cubic-bezier(0.5, 0, 0.7, 1);
    }

    100% {
        opacity: 1;
        translate: 0 0;
        rotate: 0deg;
        scale: 1;
        filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
    }
}

.tarot-readings {
    margin-top: clamp(1rem, 3vw, 1.5rem);
}

.tarot-readings h3 {
    margin: 0 0 0.75rem;
}

.tarot-readings-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 0.7rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tarot-reading {
    display: grid;
    align-content: start;
    gap: 0.4rem;
    min-width: 0;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--surface-edge);
    border-radius: 6px;
    background: rgba(5, 14, 28, 0.72);
}

.tarot-reading.is-revealed {
    border-color: rgba(var(--tarot-gold-rgb), 0.55);
    background:
        linear-gradient(135deg, rgba(var(--tarot-gold-rgb), 0.08), transparent 60%),
        rgba(5, 14, 28, 0.8);
}

.tarot-reading-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tarot-reading-number {
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    flex: none;
    border: 1px solid var(--tarot-gold);
    border-radius: 50%;
    color: var(--tarot-gold);
    font-size: 0.72rem;
    font-weight: 900;
}

.tarot-reading-position {
    font-size: 0.95rem;
}

.tarot-reading p {
    margin: 0;
}

.tarot-reading-hidden {
    color: var(--muted);
    font-size: var(--step--1);
    font-style: italic;
}

.tarot-reading-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
    font-family: var(--serif);
    font-size: 1.05rem;
    font-weight: 700;
}

.tarot-reading-meaning {
    color: var(--ink-soft);
    font-size: var(--step--1);
}

.tarot-orientation-badge {
    padding: 0.1rem 0.5rem;
    border: 1px solid var(--tarot-pentacles);
    border-radius: 999px;
    color: var(--tarot-pentacles);
    font-family: var(--sans);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.tarot-orientation-badge.is-reversed {
    border-color: var(--accent-strong);
    color: var(--accent-strong);
}

/* ---------- meaning map ---------- */

.tarot-map-layout {
    display: grid;
    grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
    gap: clamp(1rem, 3vw, 1.6rem);
    align-items: start;
}

.tarot-map-form {
    display: grid;
    gap: 0.85rem;
    min-width: 0;
}

.tarot-field {
    display: grid;
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.tarot-field select {
    width: 100%;
    min-height: 44px;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--surface-edge);
    border-radius: 6px;
    background: var(--panel-solid);
    color: var(--ink);
    font: inherit;
    font-size: 0.95rem;
}

.tarot-orientation-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tarot-orientation-option {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--surface-edge);
    border-radius: 6px;
    background: rgba(5, 14, 28, 0.78);
    font-weight: 800;
    cursor: pointer;
}

.tarot-orientation-option:has(input:checked) {
    border-color: var(--tarot-gold);
    background: rgba(var(--tarot-gold-rgb), 0.1);
}

.tarot-map-result {
    display: grid;
    grid-template-columns: minmax(110px, 170px) minmax(0, 1fr);
    gap: clamp(0.9rem, 2.5vw, 1.4rem);
    align-items: start;
    min-width: 0;
    padding: clamp(0.85rem, 2.5vw, 1.2rem);
    border: 1px solid var(--surface-edge);
    border-radius: 8px;
    background:
        radial-gradient(ellipse at 20% 30%, rgba(124, 92, 255, 0.18), transparent 65%),
        rgba(3, 6, 14, 0.8);
}

.tarot-map-copy {
    display: grid;
    gap: 0.65rem;
    min-width: 0;
}

.tarot-map-copy h3,
.tarot-map-meaning {
    margin: 0;
}

.tarot-map-copy h3 {
    font-family: var(--serif);
    overflow-wrap: anywhere;
}

.tarot-map-meaning {
    color: var(--ink-soft);
    line-height: 1.6;
}

/* ---------- responsive + motion ---------- */

@media (max-width: 860px) {
    .tarot-map-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 560px) {
    .tarot-topbar {
        flex-direction: column;
        align-items: stretch;
    }

    .tarot-tabs {
        width: 100%;
    }

    /* Spreads become one horizontally scrollable chip row, so even a long list of
       spreads costs a single row of height and never widens the page. */
    .tarot-spread-options {
        display: flex;
        gap: 0.4rem;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scroll-behavior: smooth;
        scrollbar-width: thin;
        /* Room for the focus outline, which the scroll container would otherwise clip. */
        padding: 4px 4px 0.4rem;
        scroll-padding-inline: 4px;
    }

    .tarot-spread-option {
        flex: 0 0 auto;
        max-width: 15rem;
        scroll-snap-align: start;
    }

    .tarot-spread-option-text strong {
        white-space: nowrap;
    }

    /* The deal bar stacks: the compact mode switch, then a full-width go button. */
    .tarot-deal-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .tarot-button.tarot-deal-go {
        width: 100%;
        min-width: 0;
        min-height: 56px;
    }

    .tarot-tab {
        flex: 1 1 auto;
        justify-content: center;
        padding: 0.45rem 0.7rem;
    }

    .tarot-dialog-body {
        grid-template-columns: minmax(0, 1fr);
    }

    .tarot-dialog-card {
        width: min(180px, 60%);
        justify-self: center;
    }

    .tarot-map-result {
        grid-template-columns: minmax(0, 1fr);
    }

    .tarot-map-card-preview {
        width: min(150px, 50%);
        justify-self: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    /* No lay-down travel: dealt cards appear in place (tarot.js also deals them at once). */
    .tarot-card-flip,
    .tarot-card-flip.is-dealing,
    .tarot-fan-card,
    .tarot-slot-empty.is-next,
    .tarot-reveal-card-frame,
    .tarot-spread-description.is-highlighted,
    .tarot-spread-layout.is-collapsed .tarot-spread-controls,
    .tarot-spread-layout.is-collapsed .tarot-table {
        animation: none;
    }

    .tarot-slot-empty.is-next {
        box-shadow: 0 0 20px rgba(var(--tarot-gold-rgb), 0.4);
    }

    .tarot-card-flip.is-next-reveal .tarot-slot-number {
        animation: none;
        box-shadow: 0 0 14px rgba(var(--tarot-gold-rgb), 0.55);
    }

    /* Swap the riffle motion for a brief glow so the action still registers. */
    .tarot-deck-stack.is-shuffling .tarot-deck-card,
    .tarot-deck-stack.is-shuffling .tarot-deck-card:nth-child(even) {
        animation: tarot-deck-glow 210ms ease-out;
        animation-delay: 0ms;
    }

    .tarot-card-inner,
    .tarot-fan-card,
    .tarot-card-face,
    .tarot-gallery-card,
    .tarot-button,
    .tarot-spread-option,
    .tarot-mode-option,
    .tarot-tab {
        transition: none;
    }

    .tarot-spread-options {
        scroll-behavior: auto;
    }
}