/* ============================================================
   mystical.quest -- Tarot-Card Guided Journey
   Maximalist occult illustration with pop-art bold outlines
   ============================================================ */

:root {
    --parchment: #f5e6c8;
    --woodcut: #1a1a1a;
    --arcane-red: #c62828;
    --mystic-blue: #1565c0;
    --forest-green: #2e7d32;
    --solar-yellow: #f9a825;
    --deep-violet: #4a148c;

    --border-thick: 8px solid #1a1a1a;
    --border-medium: 4px solid #1a1a1a;
    --border-thin: 3px solid #1a1a1a;
    --shadow-block: 8px 8px 0 #1a1a1a;
    --shadow-block-sm: 4px 4px 0 #1a1a1a;

    --font-display: "Almendra", "Merriweather", Georgia, serif;
    --font-body: "Merriweather", Georgia, serif;
    --font-numeral: "MedievalSharp", "Almendra", Georgia, serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    color: var(--woodcut);
    background-color: var(--parchment);
    background-image:
        repeating-linear-gradient(0deg, rgba(26, 26, 26, 0.04) 0 1px, transparent 1px 28px),
        repeating-linear-gradient(90deg, rgba(26, 26, 26, 0.04) 0 1px, transparent 1px 28px);
    line-height: 1.8;
    overflow-x: hidden;
}

/* ============================================================
   PROGRESS INDICATOR
   ============================================================ */

.deck-progress {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 100;
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    background: var(--parchment);
    border: var(--border-medium);
    box-shadow: var(--shadow-block-sm);
    padding: 0.55rem 1rem;
    font-family: var(--font-numeral);
    color: var(--woodcut);
    user-select: none;
}

.progress-label {
    font-family: var(--font-display);
    font-size: 0.75rem;
    letter-spacing: 0.25em;
    font-weight: 700;
}

.progress-count,
.progress-total {
    font-family: var(--font-numeral);
    font-size: 1.5rem;
    line-height: 1;
}

.progress-count {
    color: var(--arcane-red);
    font-weight: 700;
    transition: color 0.3s ease;
}

.progress-divider {
    font-family: var(--font-numeral);
    font-size: 1.2rem;
    line-height: 1;
    opacity: 0.6;
}

/* ============================================================
   DECK + SECTION LAYOUT
   ============================================================ */

.deck {
    width: 100%;
}

.card-section {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 1.5rem;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    position: relative;
}

.card-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 12% 18%, rgba(26, 26, 26, 0.04) 0 2px, transparent 2px),
        radial-gradient(circle at 88% 78%, rgba(26, 26, 26, 0.04) 0 2px, transparent 2px),
        radial-gradient(circle at 52% 92%, rgba(198, 40, 40, 0.05) 0 3px, transparent 3px);
    background-size: 80px 80px, 110px 110px, 140px 140px;
    z-index: 0;
}

/* ============================================================
   HERO FLIP CARD
   ============================================================ */

.hero-section {
    perspective: 1600px;
    perspective-origin: 50% 50%;
}

.hero-stage {
    width: 100%;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    position: relative;
    z-index: 1;
}

.flip-card {
    width: 100%;
    aspect-ratio: 5 / 7;
    perspective: 1800px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.2s linear;
    transform: rotateY(0deg);
}

.flip-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border: var(--border-thick);
    box-shadow: var(--shadow-block);
    background: var(--parchment);
    overflow: hidden;
}

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

.flip-front {
    transform: rotateY(180deg);
    background: var(--parchment);
    padding: 0;
}

/* Card back: conic-gradient pattern + frame */
.back-pattern {
    position: absolute;
    inset: 0;
    background:
        repeating-conic-gradient(
            from 0deg at 50% 50%,
            var(--deep-violet) 0deg 30deg,
            var(--woodcut) 30deg 60deg
        );
    background-size: 40px 40px;
}

.back-frame {
    position: absolute;
    inset: 24px;
    border: 4px solid var(--parchment);
    box-shadow: inset 0 0 0 2px var(--woodcut), 0 0 0 2px var(--woodcut);
    background:
        repeating-linear-gradient(
            45deg,
            rgba(245, 230, 200, 0.92) 0 4px,
            rgba(245, 230, 200, 0.78) 4px 8px
        );
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 1.25rem;
    text-align: center;
}

.back-emblem {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: var(--solar-yellow);
    border: 4px solid var(--woodcut);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 6px var(--parchment), 0 0 0 10px var(--woodcut);
    margin-top: 0.5rem;
    position: relative;
}

.back-emblem-star {
    width: 48px;
    height: 48px;
    background: var(--woodcut);
    clip-path: polygon(
        50% 0%, 61% 35%, 98% 35%, 68% 57%,
        79% 91%, 50% 70%, 21% 91%, 32% 57%,
        2% 35%, 39% 35%
    );
}

.back-instruction {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--woodcut);
    background: var(--parchment);
    border: 3px solid var(--woodcut);
    padding: 0.4rem 1.25rem;
    line-height: 1.2;
}

.back-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: 0.25rem;
    animation: scrollHint 1.6s ease-in-out infinite;
}

.arrow-line {
    width: 22px;
    height: 4px;
    background: var(--woodcut);
    transform: skewX(0);
}

.arrow-line:nth-child(1) { width: 30px; }
.arrow-line:nth-child(2) { width: 22px; }
.arrow-line:nth-child(3) { width: 12px; }

@keyframes scrollHint {
    0%, 100% { transform: translateY(0); opacity: 1; }
    50% { transform: translateY(8px); opacity: 0.55; }
}

.hero-caption {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: lowercase;
    color: var(--woodcut);
    border-top: 4px solid var(--woodcut);
    border-bottom: 4px solid var(--woodcut);
    padding: 0.4rem 1.25rem;
    background: var(--parchment);
}

/* ============================================================
   CARD FRAME (shared)
   ============================================================ */

.card-frame {
    position: relative;
    width: 100%;
    max-width: 720px;
    background: var(--parchment);
    border: var(--border-thick);
    box-shadow: var(--shadow-block);
    padding: 3rem 2rem 2.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    z-index: 1;
}

.card-portrait {
    max-width: 560px;
    aspect-ratio: auto;
}

.card-landscape {
    max-width: 880px;
}

/* color accents on the frame */
.card-frame.card-color-red {
    box-shadow: 8px 8px 0 var(--woodcut), inset 0 0 0 4px var(--arcane-red);
}
.card-frame.card-color-blue {
    box-shadow: 8px 8px 0 var(--woodcut), inset 0 0 0 4px var(--mystic-blue);
}
.card-frame.card-color-green {
    box-shadow: 8px 8px 0 var(--woodcut), inset 0 0 0 4px var(--forest-green);
}
.card-frame.card-color-yellow {
    box-shadow: 8px 8px 0 var(--woodcut), inset 0 0 0 4px var(--solar-yellow);
}
.card-frame.card-color-violet {
    box-shadow: 8px 8px 0 var(--woodcut), inset 0 0 0 4px var(--deep-violet);
}

/* Card Numerals (corners) */
.card-corner {
    position: absolute;
    font-family: var(--font-numeral);
    font-size: 2rem;
    line-height: 1;
    color: var(--woodcut);
    background: var(--parchment);
    border: 3px solid var(--woodcut);
    padding: 0.15rem 0.55rem;
    z-index: 3;
}

.card-corner-tl {
    top: -22px;
    left: 1.5rem;
}

.card-corner-br {
    bottom: -22px;
    right: 1.5rem;
    transform: rotate(180deg);
}

/* Title Cartouche */
.card-cartouche {
    position: relative;
    border: 2px solid var(--woodcut);
    padding: 0.55rem 2.5rem;
    background: var(--parchment);
    box-shadow: 3px 3px 0 var(--woodcut);
}

.card-cartouche::before,
.card-cartouche::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--woodcut);
    border: 2px solid var(--parchment);
    box-shadow: 0 0 0 2px var(--woodcut);
}

.card-cartouche::before { left: -8px; }
.card-cartouche::after { right: -8px; }

.cartouche-text {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.4rem, 3.5vw, 2.2rem);
    letter-spacing: 0.05em;
    line-height: 1.1;
}

/* Inside hero front, suppress shadow on cartouche to keep clean */
.flip-front .card-frame {
    border: none;
    box-shadow: none;
    padding: 2rem 1.5rem 1.5rem;
}

/* ============================================================
   CARD ILLUSTRATIONS (pure CSS shapes)
   ============================================================ */

.card-illustration {
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 360px;
    background: var(--parchment);
    border: 3px solid var(--woodcut);
    box-shadow: inset 0 0 0 6px var(--parchment), inset 0 0 0 8px var(--woodcut);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-portrait .card-illustration {
    aspect-ratio: 1 / 1;
    max-width: 360px;
    max-height: none;
}

.card-illustration::before {
    content: "";
    position: absolute;
    inset: 14px;
    border: 2px dashed rgba(26, 26, 26, 0.35);
    pointer-events: none;
}

/* --- Eye (hero front) --- */
.symbol-eye {
    position: relative;
    width: 78%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.eye-outer {
    position: absolute;
    width: 100%;
    height: 56%;
    background: var(--parchment);
    border: 4px solid var(--woodcut);
    border-radius: 50%;
    clip-path: ellipse(50% 50% at 50% 50%);
    box-shadow: inset 0 0 0 3px var(--solar-yellow);
}

.eye-iris {
    position: absolute;
    width: 38%;
    aspect-ratio: 1 / 1;
    background: var(--mystic-blue);
    border: 3px solid var(--woodcut);
    border-radius: 50%;
    z-index: 2;
}

.eye-pupil {
    position: absolute;
    width: 12%;
    aspect-ratio: 1 / 1;
    background: var(--woodcut);
    border-radius: 50%;
    z-index: 3;
}

.eye-ray {
    position: absolute;
    width: 4px;
    height: 24%;
    background: var(--woodcut);
    top: 50%;
    left: 50%;
    transform-origin: bottom center;
}

.ray-1 { transform: translate(-50%, -110%) rotate(0deg); }
.ray-2 { transform: translate(-50%, -110%) rotate(45deg); }
.ray-3 { transform: translate(-50%, -110%) rotate(90deg); }
.ray-4 { transform: translate(-50%, -110%) rotate(135deg); }
.ray-5 { transform: translate(-50%, -110%) rotate(180deg); }
.ray-6 { transform: translate(-50%, -110%) rotate(225deg); }
.ray-7 { transform: translate(-50%, -110%) rotate(270deg); }
.ray-8 { transform: translate(-50%, -110%) rotate(315deg); }

/* --- Sun --- */
.symbol-sun {
    position: relative;
    width: 70%;
    aspect-ratio: 1 / 1;
}

.sun-core {
    position: absolute;
    inset: 22%;
    background: var(--solar-yellow);
    border: 4px solid var(--woodcut);
    border-radius: 50%;
    box-shadow: inset 0 0 0 4px var(--parchment), inset 0 0 0 8px var(--solar-yellow);
}

.sun-ray {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14%;
    height: 22%;
    background: var(--arcane-red);
    border: 3px solid var(--woodcut);
    transform-origin: 50% 230%;
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

.sun-ray.ray-n  { transform: translate(-50%, -230%) rotate(0deg); }
.sun-ray.ray-ne { transform: translate(-50%, -230%) rotate(45deg); }
.sun-ray.ray-e  { transform: translate(-50%, -230%) rotate(90deg); }
.sun-ray.ray-se { transform: translate(-50%, -230%) rotate(135deg); }
.sun-ray.ray-s  { transform: translate(-50%, -230%) rotate(180deg); }
.sun-ray.ray-sw { transform: translate(-50%, -230%) rotate(225deg); }
.sun-ray.ray-w  { transform: translate(-50%, -230%) rotate(270deg); }
.sun-ray.ray-nw { transform: translate(-50%, -230%) rotate(315deg); }

/* --- Moon --- */
.symbol-moon {
    position: relative;
    width: 60%;
    aspect-ratio: 1 / 1;
}

.moon-disc {
    position: absolute;
    inset: 0;
    background: var(--mystic-blue);
    border: 4px solid var(--woodcut);
    border-radius: 50%;
}

.moon-shadow {
    position: absolute;
    inset: 6%;
    background: var(--parchment);
    border-radius: 50%;
    transform: translateX(28%);
    border: 3px solid var(--woodcut);
}

.moon-star {
    position: absolute;
    width: 10%;
    aspect-ratio: 1 / 1;
    background: var(--solar-yellow);
    border: 3px solid var(--woodcut);
    transform: rotate(45deg);
}

.moon-star::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--solar-yellow);
    border: 3px solid var(--woodcut);
    transform: rotate(45deg);
}

.star-1 { top: -10%; left: -10%; }
.star-2 { bottom: -8%; right: -10%; width: 14%; }
.star-3 { top: 10%; right: -14%; width: 8%; }

/* --- Tower --- */
.symbol-tower {
    position: relative;
    width: 70%;
    aspect-ratio: 1 / 1.2;
}

.tower-body {
    position: absolute;
    bottom: 0;
    left: 30%;
    width: 40%;
    height: 70%;
    background: var(--arcane-red);
    border: 4px solid var(--woodcut);
    box-shadow: inset 0 0 0 4px var(--parchment), inset 0 0 0 8px var(--arcane-red);
}

.tower-crown {
    position: absolute;
    top: 6%;
    left: 24%;
    width: 52%;
    height: 18%;
    background: var(--solar-yellow);
    border: 4px solid var(--woodcut);
    clip-path: polygon(0% 100%, 0% 30%, 12% 30%, 12% 0%, 24% 0%, 24% 30%, 36% 30%, 36% 0%, 48% 0%, 48% 30%, 60% 30%, 60% 0%, 72% 0%, 72% 30%, 84% 30%, 84% 0%, 100% 0%, 100% 100%);
}

.tower-bolt {
    position: absolute;
    top: -4%;
    right: 8%;
    width: 18%;
    height: 50%;
    background: var(--solar-yellow);
    border: 3px solid var(--woodcut);
    clip-path: polygon(50% 0%, 90% 30%, 60% 35%, 100% 60%, 50% 100%, 30% 60%, 60% 50%, 20% 30%);
    transform: rotate(-12deg);
}

.tower-debris {
    position: absolute;
    background: var(--woodcut);
    border: 2px solid var(--woodcut);
}

.tower-debris.d-1 {
    bottom: 5%;
    left: 8%;
    width: 14%;
    height: 8%;
    transform: rotate(-15deg);
    background: var(--arcane-red);
}

.tower-debris.d-2 {
    bottom: 12%;
    right: 6%;
    width: 10%;
    height: 6%;
    transform: rotate(20deg);
    background: var(--arcane-red);
}

.tower-debris.d-3 {
    bottom: 2%;
    left: 50%;
    width: 8%;
    height: 6%;
    transform: translateX(-50%) rotate(8deg);
    background: var(--solar-yellow);
}

/* --- Tree --- */
.symbol-tree {
    position: relative;
    width: 70%;
    aspect-ratio: 1 / 1;
}

.tree-trunk {
    position: absolute;
    bottom: 12%;
    left: 50%;
    transform: translateX(-50%);
    width: 14%;
    height: 50%;
    background: var(--woodcut);
    border: 3px solid var(--woodcut);
}

.tree-canopy {
    position: absolute;
    background: var(--forest-green);
    border: 4px solid var(--woodcut);
    border-radius: 50%;
}

.tree-canopy.c-1 {
    top: 4%;
    left: 50%;
    width: 50%;
    aspect-ratio: 1 / 1;
    transform: translateX(-50%);
}

.tree-canopy.c-2 {
    top: 18%;
    left: 18%;
    width: 38%;
    aspect-ratio: 1 / 1;
}

.tree-canopy.c-3 {
    top: 18%;
    right: 18%;
    width: 38%;
    aspect-ratio: 1 / 1;
}

.tree-root {
    position: absolute;
    bottom: 4%;
    width: 28%;
    height: 4px;
    background: var(--woodcut);
    border-radius: 2px;
}

.tree-root.r-l { left: 10%; transform: rotate(-12deg); }
.tree-root.r-r { right: 10%; transform: rotate(12deg); }

/* --- Star (Magician) --- */
.symbol-star {
    position: relative;
    width: 70%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.star-poly {
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--deep-violet);
    border: 0;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.star-poly-a {
    background: var(--deep-violet);
    transform: rotate(0deg);
}

.star-poly-b {
    background: var(--solar-yellow);
    transform: rotate(36deg) scale(0.78);
}

.star-center {
    position: absolute;
    width: 16%;
    aspect-ratio: 1 / 1;
    background: var(--arcane-red);
    border: 3px solid var(--woodcut);
    border-radius: 50%;
    z-index: 2;
}

.star-orbit {
    position: absolute;
    width: 110%;
    aspect-ratio: 1 / 1;
    border: 3px dashed var(--woodcut);
    border-radius: 50%;
    pointer-events: none;
}

/* --- Lovers --- */
.symbol-lovers {
    position: relative;
    width: 80%;
    aspect-ratio: 2 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lover-circle {
    position: absolute;
    width: 48%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 4px solid var(--woodcut);
}

.lover-l {
    left: 5%;
    background: var(--arcane-red);
    box-shadow: inset 0 0 0 4px var(--parchment), inset 0 0 0 8px var(--arcane-red);
}

.lover-r {
    right: 5%;
    background: var(--mystic-blue);
    box-shadow: inset 0 0 0 4px var(--parchment), inset 0 0 0 8px var(--mystic-blue);
}

.lover-bond {
    position: absolute;
    width: 14%;
    aspect-ratio: 1 / 1;
    background: var(--solar-yellow);
    border: 4px solid var(--woodcut);
    transform: rotate(45deg);
    z-index: 2;
}

.lover-spark {
    position: absolute;
    width: 6%;
    aspect-ratio: 1 / 1;
    background: var(--woodcut);
    border-radius: 50%;
    z-index: 3;
}

/* --- Wheel --- */
.symbol-wheel {
    position: relative;
    width: 70%;
    aspect-ratio: 1 / 1;
}

.wheel-rim {
    position: absolute;
    inset: 0;
    border: 8px solid var(--woodcut);
    border-radius: 50%;
    background: var(--solar-yellow);
    box-shadow: inset 0 0 0 6px var(--parchment), inset 0 0 0 10px var(--woodcut);
}

.wheel-spoke {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 78%;
    height: 4px;
    background: var(--woodcut);
    transform-origin: 50% 50%;
}

.spoke-1 { transform: translate(-50%, -50%) rotate(0deg); }
.spoke-2 { transform: translate(-50%, -50%) rotate(45deg); }
.spoke-3 { transform: translate(-50%, -50%) rotate(90deg); }
.spoke-4 { transform: translate(-50%, -50%) rotate(135deg); }

.wheel-hub {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18%;
    aspect-ratio: 1 / 1;
    background: var(--arcane-red);
    border: 4px solid var(--woodcut);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

/* ============================================================
   DESCRIPTION PANEL
   ============================================================ */

.card-description {
    width: 100%;
    border-top: 4px solid var(--woodcut);
    padding-top: 1.25rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
}

.card-meaning {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--arcane-red);
    background: var(--parchment);
    border-bottom: 3px solid var(--woodcut);
    padding-bottom: 0.25rem;
}

.card-color-blue .card-meaning { color: var(--mystic-blue); }
.card-color-green .card-meaning { color: var(--forest-green); }
.card-color-yellow .card-meaning { color: var(--solar-yellow); -webkit-text-stroke: 1px var(--woodcut); text-stroke: 1px var(--woodcut); }
.card-color-violet .card-meaning { color: var(--deep-violet); }

.card-description p {
    font-size: 1rem;
    line-height: 1.8;
    max-width: 56ch;
    color: var(--woodcut);
}

.card-keywords {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    justify-content: center;
    margin-top: 0.25rem;
}

.card-keywords li {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border: 3px solid var(--woodcut);
    padding: 0.25rem 0.85rem;
    background: var(--parchment);
    box-shadow: 3px 3px 0 var(--woodcut);
}

.card-color-red .card-keywords li:nth-child(1) { background: var(--arcane-red); color: var(--parchment); }
.card-color-blue .card-keywords li:nth-child(2) { background: var(--mystic-blue); color: var(--parchment); }
.card-color-green .card-keywords li:nth-child(3) { background: var(--forest-green); color: var(--parchment); }
.card-color-yellow .card-keywords li:nth-child(1) { background: var(--solar-yellow); color: var(--woodcut); }
.card-color-violet .card-keywords li:nth-child(2) { background: var(--deep-violet); color: var(--parchment); }

/* ============================================================
   FINAL CARD: Reshuffle button
   ============================================================ */

.reshuffle-btn {
    margin-top: 0.5rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--parchment);
    background: var(--woodcut);
    border: 3px solid var(--woodcut);
    padding: 0.7rem 1.4rem;
    cursor: pointer;
    box-shadow: 5px 5px 0 var(--arcane-red);
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.reshuffle-btn:hover {
    background: var(--arcane-red);
    box-shadow: 5px 5px 0 var(--woodcut);
    transform: translate(-2px, -2px);
}

.reshuffle-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--woodcut);
}

.reshuffle-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 3px solid var(--parchment);
    border-top-color: transparent;
    display: inline-block;
    transition: transform 0.6s ease;
}

.reshuffle-btn:hover .reshuffle-icon {
    transform: rotate(360deg);
}

.reshuffle-btn.spinning .reshuffle-icon {
    animation: shuffleSpin 0.9s linear;
}

@keyframes shuffleSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(720deg); }
}

/* ============================================================
   FOOTER
   ============================================================ */

.deck-footer {
    width: 100%;
    padding: 3rem 1.5rem 4rem;
    display: flex;
    justify-content: center;
    background: var(--parchment);
    scroll-snap-align: end;
}

.footer-frame {
    width: 100%;
    max-width: 720px;
    border: var(--border-thick);
    box-shadow: var(--shadow-block);
    padding: 2rem 1.5rem;
    text-align: center;
    background: var(--parchment);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.footer-mark {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.6rem;
    letter-spacing: 0.18em;
}

.footer-line {
    font-size: 0.95rem;
    max-width: 48ch;
    color: var(--woodcut);
}

.footer-sigil {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.sigil-dot {
    width: 12px;
    height: 12px;
    background: var(--woodcut);
    border-radius: 50%;
}

.sigil-bar {
    width: 36px;
    height: 4px;
    background: var(--woodcut);
}

/* ============================================================
   ENTRY ANIMATION FOR CARDS
   ============================================================ */

.card-frame {
    opacity: 0;
    transform: translateY(40px) rotate(-1.2deg);
    transition: opacity 0.55s ease, transform 0.55s ease;
}

.card-frame.is-revealed {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
}

/* hero card-frame inside flip-front: always visible */
.flip-front .card-frame {
    opacity: 1;
    transform: none;
}

.card-section.is-active .card-cartouche {
    animation: cartouchePulse 1.4s ease-out;
}

@keyframes cartouchePulse {
    0% { transform: scale(0.85); }
    60% { transform: scale(1.04); }
    100% { transform: scale(1); }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 720px) {
    .card-section {
        padding: 3rem 1rem;
    }

    .card-frame {
        padding: 2.25rem 1.25rem 1.75rem;
    }

    .card-corner {
        font-size: 1.4rem;
        padding: 0.1rem 0.4rem;
    }

    .card-cartouche {
        padding: 0.45rem 1.5rem;
    }

    .card-illustration {
        max-width: 100%;
    }

    .card-portrait .card-illustration {
        max-width: 280px;
    }

    .deck-progress {
        top: 1rem;
        right: 1rem;
        padding: 0.4rem 0.75rem;
    }

    .progress-count,
    .progress-total {
        font-size: 1.2rem;
    }

    .hero-stage {
        max-width: 360px;
    }
}

@media (max-width: 420px) {
    .card-keywords li {
        font-size: 0.8rem;
        padding: 0.2rem 0.6rem;
    }

    .reshuffle-btn {
        font-size: 0.9rem;
        padding: 0.6rem 1rem;
    }
}