/* Tarot Module Premium Styles */

.premium-gold-text {
    color: #fbbf24;
    background: linear-gradient(to bottom, #fef3c7 0%, #fbbf24 50%, #d97706 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.4));
}

/* Card Foundation */
.card-back-mystic {
    background-image: url('/static/card_back_mystic.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.tarot-card-magnify {
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), z-index 0s, box-shadow 0.4s ease;
    z-index: 10;
}

/* Desktop Hover Magnification */
@media (hover: hover) {
    .flipped.tarot-card-magnify:hover {
        transform: scale(1.75) translateY(-10px);
        z-index: 100 !important;
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9), 0 0 30px rgba(251, 191, 36, 0.4);
    }

    .flipped.tarot-card-magnify:hover .card-info-overlay,
    .flipped.tarot-card-magnify:hover .reversed-tag {
        opacity: 0 !important;
        pointer-events: none;
    }
}

/* Class-based Magnification (for toggle/mobile) */
.flipped.tarot-card-magnify.magnified {
    transform: scale(1.75) translateY(-10px);
    z-index: 100 !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9), 0 0 30px rgba(251, 191, 36, 0.4);
}

.flipped.tarot-card-magnify.magnified .card-info-overlay,
.flipped.tarot-card-magnify.magnified .reversed-tag {
    opacity: 0 !important;
    pointer-events: none;
}

@media (max-width: 768px) {
    .flipped.tarot-card-magnify.magnified {
        transform: scale(1.15) translateY(-5px) !important;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8), 0 0 20px rgba(251, 191, 36, 0.3) !important;
    }
}

/* Specific case for cards that should never have text overlays (e.g. Significator/Shadow) */
.card-no-text .card-info-overlay,
.card-no-text .reversed-tag {
    display: none !important;
}

/* Keep Significator/Shadow cards stable inside their small side boxes. */
.card-no-text .flipped.tarot-card-magnify:hover,
.card-no-text .flipped.tarot-card-magnify.magnified {
    transform: none !important;
    z-index: 10 !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45) !important;
}

/* In advanced Significator/Shadow panel, cards must never jump outside boxes. */
#advanced-cards-panel .flipped.tarot-card-magnify:hover,
#advanced-cards-panel .flipped.tarot-card-magnify.magnified {
    transform: none !important;
    z-index: 10 !important;
}

/* Panel card artwork: slightly narrower than the global 7rem default so the
   Significator/Shadow metadata gets more usable text width while the outer
   panel width stays exactly the same. Applied to both cards for symmetry. */
#advanced-cards-panel .card-no-text {
    width: 6.5rem;
    max-width: 6.5rem;
    min-width: 6.5rem;
}

/* Background-influences panel layout (2-row, stable).
   Desktop:
     ROW 1:  [ SIGNIFIKATOR / KARTA PITACA ]   [ SENKA ]
     ROW 2:  [ ELEMENTARNI TOK - full width          ]

   Why 2 rows instead of 3 columns:
     Significator and Shadow each need enough width for image + metadata,
     while the Elemental Flow prose is variable-length localized text that
     needs its own wide row. Forcing three columns made the middle track a
     narrow vertical strip and let side metadata spill into it. Two rows are
     stable: the two cards share the top row equally, and the Elemental Flow
     prose gets the full width underneath.

   The DOM order is sig-box, elemental-box, shadow-box; grid-template-areas
   places them into the target rows without reordering any data:
     "sig shadow"
     "elemental elemental"
   No hard column minimums, no fixed heights, no max-height clamps, no
   overflow hiding. */
#advanced-cards-panel {
    max-width: 64rem;
}

#advanced-cards-panel > div {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-areas:
        "sig shadow"
        "elemental elemental" !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    height: auto !important;
    min-height: 0 !important;
}

/* The row has two direct children: the real grid row and the decorative
   gradient overlay. Keep the overlay out of the grid flow so it never
   becomes a grid track that pushes the cards around. */
#advanced-cards-panel > div > .absolute {
    position: absolute !important;
}

/* Assign each box to its grid area. */
#advanced-cards-panel .sig-box {
    grid-area: sig;
}

#advanced-cards-panel .shadow-box {
    grid-area: shadow;
}

#advanced-cards-panel .elemental-box {
    grid-area: elemental;
}

/* Cards + Elemental Flow: grow with content, never clip, always wrap
   internally, and stay within their own grid cell. */
#advanced-cards-panel .sig-box,
#advanced-cards-panel .shadow-box,
#advanced-cards-panel .elemental-box {
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    /* No height or max-height may be set here: each row must follow its
       tallest cell. overflow stays visible so nothing is clipped. */
    height: auto;
    max-height: none;
    min-height: 0;
    overflow: visible;
    box-sizing: border-box;
}

/* Elemental Flow: full-width row with a comfortable reading measure. */
#advanced-cards-panel .elemental-box {
    justify-self: stretch;
    min-width: 0;
    /* Tighter, intentional vertical rhythm (less dead space) while keeping
       the mystical breathing room. */
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    margin-top: 0;
    margin-bottom: 0;
    gap: 0.5rem;
}

/* Elemental Flow title: centered, elegant, still small. */
#advanced-cards-panel .elemental-box > p {
    font-size: 0.6875rem;
    letter-spacing: 0.28em;
    line-height: 1.4;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

/* Elemental Flow BODY ({{.Dignities}}): must be clearly readable and never
   look like a tiny footnote. It is targeted by a dedicated `.elemental-flow-body`
   hook (and, defensively, by the structural selector) so the intended
   typography cannot lose a specificity race against a utility class.
   The template no longer declares a competing text size / line-height.
   At ~15px / 1.6 with a ~52rem centered measure this reads as body prose,
   while staying smaller than the card titles. No letter-by-letter tracking,
   no forced uppercase, no nowrap. */
#advanced-cards-panel .elemental-flow-body,
#advanced-cards-panel .elemental-box > div:last-child {
    font-size: 0.9375rem;
    line-height: 1.6;
    max-width: 52rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    letter-spacing: 0.01em;
    text-align: center;
    text-transform: none;
    white-space: normal;
    font-style: italic;
}

/* Descendants must wrap by WHOLE WORDS and never exceed their parent width.
   NOTE: `overflow-wrap: anywhere` is deliberately NOT used here - it splits
   ordinary words mid-way (e.g. "PERSPEKTIV / A") even when they would fit on
   the next line. `break-word` only breaks when a single word cannot fit. */
#advanced-cards-panel .elemental-box *,
#advanced-cards-panel .advanced-card-info * {
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
}

/* The card artwork column keeps a fixed, predictable width. */
#advanced-cards-panel .sig-box > div:first-child,
#advanced-cards-panel .shadow-box > div:last-child {
    flex: 0 0 auto;
    min-width: 0;
}

/* Tighter image/text gap inside the two top cards (was gap-5 = 1.25rem);
   the reclaimed space goes to the metadata text. */
#advanced-cards-panel .sig-box,
#advanced-cards-panel .shadow-box {
    gap: 0.75rem;
}

/* Card metadata text: claim the freed width and wrap by WHOLE WORDS only.
   Never split a Serbian word letter-by-letter. */
#advanced-cards-panel .advanced-card-info > p {
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: none;
}

/* Significator/Shadow metadata: stays ENTIRELY inside its own card box,
   vertically centered and confined to its grid cell. */
#advanced-cards-panel .advanced-card-info {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    min-height: 0;
    height: auto;
    max-height: none;
    overflow: visible;
}

/* Symmetric internal rhythm for both top cards. */
#advanced-cards-panel .advanced-card-info > p {
    margin-top: 0;
}

/* Keywords: keep the uppercase hierarchy, but reduce tracking so ordinary
   Serbian words stay on one line instead of being split letter-by-letter. */
#advanced-cards-panel .advanced-card-info > p:nth-of-type(2) {
    letter-spacing: 0.08em;
    line-height: 1.5;
    overflow-wrap: break-word;
    word-break: normal;
}

/* Card name: keep it readable, allow whole-word wrap only. */
#advanced-cards-panel .advanced-card-info > p:nth-of-type(1) {
    letter-spacing: 0.06em;
    line-height: 1.35;
    overflow-wrap: break-word;
    word-break: normal;
}

/* Short localized message: comfortable measure, whole-word wrapping. */
#advanced-cards-panel .advanced-card-info > p:nth-of-type(3) {
    line-height: 1.6;
    overflow-wrap: break-word;
    word-break: normal;
}

/* Long EN labels/keywords should wrap within card overlay on narrow layouts. */
.card-info-overlay {
    overflow: hidden;
}

.card-info-overlay h3,
.card-info-overlay p {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
}

/* Prevent side interpretation text blocks from pushing card columns out of bounds.
   Whole-word wrapping only, so short metadata labels are never split. */
.advanced-card-info {
    min-width: 0;
    overflow: visible;
    overflow-wrap: break-word;
    word-break: normal;
}

.advanced-card-info p {
    overflow-wrap: break-word;
    word-break: normal;
}

/* Touch/tablet screens are compact; disable card magnify to prevent overflow. */
@media (max-width: 1024px) {
    .flipped.tarot-card-magnify:hover,
    .flipped.tarot-card-magnify.magnified {
        transform: none !important;
        z-index: 10 !important;
        box-shadow: 0 12px 26px rgba(0, 0, 0, 0.5) !important;
    }
}

/* Below this width the two top cards no longer sit comfortably side by side,
   so the whole panel stacks into a single centred column. The DOM order
   (Significator -> Elemental Flow -> Shadow) is used as-is. */
@media (max-width: 768px) {
    #advanced-cards-panel > div {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas:
            "sig"
            "elemental"
            "shadow" !important;
        justify-items: center !important;
        max-width: 34rem;
        margin-left: auto;
        margin-right: auto;
    }

    #advanced-cards-panel .sig-box,
    #advanced-cards-panel .shadow-box {
        justify-self: center;
        width: 100%;
        max-width: 34rem;
        max-height: none;
    }

    #advanced-cards-panel .elemental-box {
        justify-self: stretch;
        width: 100%;
        min-width: 0;
        max-width: 34rem;
        max-height: none;
    }

    #advanced-cards-panel .advanced-card-info {
        min-width: 0;
        max-width: none;
    }
}

/* Small screens: Significator switches to column — card on top, text below centered */
@media (max-width: 640px) {
    #advanced-cards-panel .sig-box {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1rem;
    }

    #advanced-cards-panel .sig-box h4 {
        letter-spacing: 0.18em !important;
        line-height: 1.25;
        white-space: normal;
        text-align: center;
    }

    #advanced-cards-panel .sig-box .advanced-card-info {
        width: 100%;
        min-width: 0;
        max-width: none;
        overflow: visible;
    }

    /* Whole-word wrapping only: `anywhere` + `hyphens: auto` split ordinary
       Serbian words letter-by-letter on narrow screens. */
    #advanced-cards-panel .sig-box .advanced-card-info p {
        letter-spacing: 0.02em !important;
        white-space: normal;
        overflow-wrap: break-word;
        word-break: normal;
        hyphens: none;
    }

    #advanced-cards-panel .sig-box .h-px {
        margin-left: auto;
        margin-right: auto;
    }
}

/* Mobile readability pass: make interpretation areas less cramped. */
@media (max-width: 768px) {
    #advanced-cards-panel {
        max-width: 100%;
    }

    #advanced-cards-panel > div {
        padding: 1rem;
        gap: 1rem;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    #advanced-cards-panel .card-no-text {
        width: 5.75rem;
        max-width: 5.75rem;
        min-width: 5.75rem;
    }

    #advanced-cards-panel .sig-box,
    #advanced-cards-panel .shadow-box {
        padding: 1rem !important;
        gap: 1rem !important;
    }

    #advanced-cards-panel .advanced-card-info p {
        letter-spacing: normal !important;
        line-height: 1.6;
    }

    #advanced-cards-panel .advanced-card-info p:first-child {
        font-size: 1rem !important;
        letter-spacing: 0.04em !important;
    }

    #divine-insight-panel {
        max-width: 100%;
    }

    #divine-insight-panel .insight-inner {
        padding: 1rem 0.875rem;
    }

    #divine-insight-panel .insight-title {
        letter-spacing: 0.2em !important;
    }

    #divine-insight-panel #divine-insight-text p {
        text-align: left;
        font-size: 1rem;
        line-height: 1.7;
    }
}

.card-info-overlay {
    transition: opacity 0.4s ease;
}

.is-reversed img {
    transform: rotate(180deg);
}

.reversed-tag {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(220, 38, 38, 0.9);
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    z-index: 20;
    box-shadow: 0 0 10px rgba(220, 38, 38, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: opacity 0.4s ease;
}

/* Shuffle Ritual */
#shuffle-overlay {
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at center, rgba(10, 10, 10, 0.99), rgba(0, 0, 0, 1));
    z-index: 500;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(20px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.shuffle-stack {
    position: relative;
    width: 200px;
    height: 300px;
    margin-bottom: 2rem;
    perspective: 1000px;
}

.shuffle-card {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    border: 1px solid rgba(251, 191, 36, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.shuffling .shuffle-card:nth-child(1) {
    animation: shuffle-anim-1 1s infinite alternate ease-in-out;
}

.shuffling .shuffle-card:nth-child(2) {
    animation: shuffle-anim-2 1.2s infinite alternate ease-in-out;
}

.shuffling .shuffle-card:nth-child(3) {
    animation: shuffle-anim-3 1.4s infinite alternate ease-in-out;
}

.shuffling .shuffle-card:nth-child(4) {
    animation: shuffle-anim-1 1.1s infinite alternate-reverse ease-in-out;
}

.shuffling .shuffle-card:nth-child(5) {
    animation: shuffle-anim-2 1.3s infinite alternate-reverse ease-in-out;
}

@keyframes shuffle-anim-1 {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    100% {
        transform: translate(-40px, -20px) rotate(-10deg);
    }
}

@keyframes shuffle-anim-2 {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    100% {
        transform: translate(40px, 20px) rotate(10deg);
    }
}

@keyframes shuffle-anim-3 {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    100% {
        transform: translate(0, -40px) scale(1.05);
    }
}

/* Ritual Buttons */
.btn-ritual {
    position: relative;
    background: rgba(10, 10, 15, 0.8);
    border: 1px solid rgba(251, 191, 36, 0.3);
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(12px);
}

.btn-ritual:hover {
    border-color: rgba(251, 191, 36, 0.8);
    box-shadow: 0 0 30px rgba(251, 191, 36, 0.2);
    transform: translateY(-2px);
}

/* Draw Fan */
#draw-fan {
    position: relative;
    width: min(92vw, 760px);
    height: 210px;
    margin: 0 auto;
}

.draw-fan-card {
    position: absolute;
    left: 50%;
    top: 18px;
    width: 102px;
    height: 154px;
    border-radius: 16px;
    border: 1px solid rgba(99, 102, 241, 0.45);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
    transition: transform 0.28s ease, opacity 0.28s ease, filter 0.2s ease;
    transform-origin: bottom center;
}

.draw-fan-card:hover {
    filter: brightness(1.15) drop-shadow(0 0 10px rgba(99, 102, 241, 0.4));
    cursor: pointer;
}

@media (max-width: 768px) {
    .draw-fan-card {
        width: 88px;
        height: 132px;
        border-radius: 14px;
    }

    #draw-fan {
        width: min(96vw, 520px);
        height: 180px;
    }
}

/* Particles */
.particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    animation: rise var(--duration) infinite ease-out;
    opacity: var(--opacity);
}

@keyframes rise {
    0% {
        transform: translateY(0);
        opacity: 0;
    }

    15% {
        opacity: var(--opacity);
    }

    100% {
        transform: translateY(-100vh);
        opacity: 0;
    }
}

/* Magic Dust Reveal */
.reveal-dust {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 50;
    opacity: 0;
}

.revealed .reveal-dust {
    animation: dust-fade 1s forwards;
}

/* Celtic Cross Specific Layout */
.celtic-grid {
    display: grid;
    grid-template-columns: minmax(130px, 1fr) minmax(180px, 240px) minmax(130px, 1fr) 2.5rem minmax(130px, 1fr);
    grid-template-rows: repeat(4, auto);
    column-gap: 2.25rem;
    row-gap: 1.8rem;
    max-width: 1120px;
    margin: 0 auto;
    position: relative;
}

.pos-3 {
    grid-column: 2 / span 1;
    grid-row: 1;
    justify-self: center;
}

.pos-5 {
    grid-column: 1 / span 1;
    grid-row: 2;
    justify-self: center;
    align-self: center;
}

.pos-1-2-container {
    grid-column: 2 / span 1;
    grid-row: 2;
    position: relative;
    width: min(240px, 100%);
    min-height: 360px;
    display: flex;
    justify-content: center;
    align-items: center;
    justify-self: center;
    overflow: visible;
}

.pos-1 {
    position: absolute;
    z-index: 10;
    width: 100%;
}

.pos-2 {
    position: absolute;
    z-index: 15;
    width: 100%;
    transform: rotate(90deg) scale(0.92);
    transform-origin: center center;
}

.pos-2 .flipped.tarot-card-magnify:hover {
    transform: scale(1.28) translateY(-4px);
    z-index: 100 !important;
}

.pos-2 .flipped.tarot-card-magnify.magnified {
    transform: scale(1.28) translateY(-4px);
    z-index: 100 !important;
}

.pos-6 {
    grid-column: 3 / span 1;
    grid-row: 2;
    justify-self: center;
    align-self: center;
}

.pos-4 {
    grid-column: 2 / span 1;
    grid-row: 3;
    justify-self: center;
}

.pos-10 {
    grid-column: 5 / span 1;
    grid-row: 1;
    justify-self: center;
}

.pos-9 {
    grid-column: 5 / span 1;
    grid-row: 2;
    justify-self: center;
}

.pos-8 {
    grid-column: 5 / span 1;
    grid-row: 3;
    justify-self: center;
}

.pos-7 {
    grid-column: 5 / span 1;
    grid-row: 4;
    justify-self: center;
}

@media (max-width: 768px) {
    .celtic-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 2rem;
    }

    .pos-3,
    .pos-5,
    .pos-1-2-container,
    .pos-6,
    .pos-4,
    .pos-10,
    .pos-9,
    .pos-8,
    .pos-7 {
        grid-column: 1;
        grid-row: auto;
        max-width: 300px;
        justify-self: center;
        margin-bottom: 20px;
    }

    .pos-1-2-container {
        height: 350px;
        width: min(280px, 100%);
    }
}

.challenge-label {
    transform: rotate(-90deg) translate(-6px, -108px);
    white-space: nowrap;
    width: 200px;
}

.card-label {
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    color: rgba(251, 191, 36, 1);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    text-align: center;
    margin-bottom: 0.5rem;
    white-space: nowrap;
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.8);
}

/* ── MONO THEME OVERRIDES ── */
.theme-mono .premium-gold-text {
    background: linear-gradient(to bottom, #e0e0e0 0%, #b0b0b0 50%, #888888 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: none !important;
}
.theme-mono .shuffle-card {
    border-color: rgba(140, 140, 140, 0.3) !important;
}
.theme-mono .btn-ritual {
    border-color: rgba(120, 120, 120, 0.3) !important;
    color: #b0b0b0 !important;
}
.theme-mono .btn-ritual:hover {
    border-color: rgba(180, 180, 180, 0.6) !important;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5) !important;
    color: #e0e0e0 !important;
}
.theme-mono .card-label {
    color: #a0a0a0 !important;
    text-shadow: none !important;
}
.theme-mono .reversed-tag {
    background: rgba(70, 70, 70, 0.9) !important;
    border-color: rgba(120, 120, 120, 0.5) !important;
    box-shadow: none !important;
}
.theme-mono .flipped.tarot-card-magnify:hover,
.theme-mono .flipped.tarot-card-magnify.magnified {
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9) !important;
}
.theme-mono .draw-fan-card {
    border-color: rgba(100, 100, 100, 0.45) !important;
}

/* ── PAPER THEME OVERRIDES ── */
.theme-paper .premium-gold-text {
    background: linear-gradient(to bottom, #101828 0%, #514568 48%, #a04416 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: none !important;
}
.theme-paper #shuffle-overlay {
    background:
        linear-gradient(rgba(12, 72, 106, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(12, 72, 106, 0.035) 1px, transparent 1px),
        radial-gradient(circle at 50% 38%, rgba(210, 168, 76, 0.12), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 251, 0.98) 56%, rgba(234, 243, 247, 0.98)) !important;
    background-size: 56px 56px, 56px 56px, auto, auto !important;
    color: #101828 !important;
    backdrop-filter: blur(12px) !important;
}
.theme-paper #shuffle-overlay h3 {
    letter-spacing: 0.18em !important;
    text-transform: none !important;
}
.theme-paper #shuffle-overlay p {
    color: #344054 !important;
    letter-spacing: 0.28em !important;
}
.theme-paper .shuffle-card {
    border-color: rgba(122, 88, 0, 0.55) !important;
    box-shadow: 0 18px 45px rgba(16, 24, 40, 0.14), 0 0 0 1px rgba(210, 168, 76, 0.12) !important;
}
.theme-paper #tarot-question {
    background: rgba(255, 255, 255, 0.94) !important;
    border-color: rgba(16, 24, 40, 0.14) !important;
    border-radius: 8px !important;
    color: #101828 !important;
    box-shadow: 0 18px 45px rgba(16, 24, 40, 0.08) !important;
}
.theme-paper #tarot-question::placeholder {
    color: rgba(71, 84, 103, 0.62) !important;
}
.theme-paper #start-shuffle-btn {
    background: linear-gradient(135deg, #f1c75c 0%, #d2a84c 38%, #373d46 100%) !important;
    border: 1px solid rgba(16, 24, 40, 0.22) !important;
    border-radius: 999px !important;
    color: #101828 !important;
    box-shadow: 0 18px 45px rgba(16, 24, 40, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;
    font-weight: 800 !important;
}
.theme-paper #start-shuffle-btn:hover {
    transform: translateY(-2px) scale(1.03) !important;
    box-shadow: 0 24px 60px rgba(16, 24, 40, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;
}
.theme-paper #deal-cards-btn {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(16, 24, 40, 0.28) !important;
    border-radius: 999px !important;
    color: #101828 !important;
    box-shadow: 0 16px 40px rgba(16, 24, 40, 0.10) !important;
}
.theme-paper .btn-ritual {
    border-color: rgba(122, 88, 0, 0.60) !important;
    color: #5c4000 !important;
    font-weight: 600 !important;
}
.theme-paper .btn-ritual:hover {
    border-color: rgba(122, 88, 0, 0.90) !important;
    box-shadow: 0 0 20px rgba(122, 88, 0, 0.15) !important;
    color: #3d2a00 !important;
}
.theme-paper .card-label {
    color: #3d2a00 !important;
    text-shadow: none !important;
}
.theme-paper .reversed-tag {
    background: rgba(220, 38, 38, 0.85) !important;
}
.theme-paper .flipped.tarot-card-magnify:hover,
.theme-paper .flipped.tarot-card-magnify.magnified {
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.18) !important;
}
.theme-paper .draw-fan-card {
    border-color: rgba(99, 102, 241, 0.35) !important;
}