/* Card of the Day - Main Styles */

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

:root {
    --burgundy: #C0C8E0;
    --cream: #0d1333;
    --cream-dark: #141b45;
    --envelope-cream: #111638;
    --gold: #9AAAD4;

    /* Category theme (defaults = current blue) */
    --cat-primary: #a8b8d8;
    --cat-primary-rgb: 168,184,216;
    --cat-light: #c8d8f0;
    --cat-light-rgb: 200,216,240;
    --cat-glow: #a8b8d8;
    --cat-glow-rgb: 168,184,216;
    --cat-sparkle-end: #C8D8F0;
}

html {
    background: #060A1F;
    overflow: hidden;
    height: 100%;
}

body {
    font-family: 'Prompt', sans-serif;
    font-weight: 300;
    background: #060A1F linear-gradient(135deg, #060A1F 0%, #0a0e27 50%, #0d1333 100%) no-repeat fixed;
    background-size: cover;
    color: var(--burgundy);
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    min-height: 100vh;
    min-height: -webkit-fill-available;
}

/* ==================== STARFIELD BACKGROUND ==================== */
.starfield {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.star {
    position: absolute;
    border-radius: 50%;
    background: #fff;
    animation: twinkle ease-in-out infinite alternate;
}

.star--sm {
    width: 1px;
    height: 1px;
}

.star--md {
    width: 1.5px;
    height: 1.5px;
    box-shadow: 0 0 2px rgba(200, 216, 240, 0.3);
}

.star--lg {
    width: 2px;
    height: 2px;
    box-shadow: 0 0 4px rgba(200, 216, 240, 0.4), 0 0 8px rgba(200, 216, 240, 0.15);
}

@keyframes twinkle {
    0% { opacity: var(--star-min, 0.15); }
    100% { opacity: var(--star-max, 0.8); }
}

/* Shooting stars */
.shooting-star {
    position: absolute;
    width: var(--shoot-len, 80px);
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(200, 216, 240, 0.5) 50%, rgba(255, 255, 255, 0.8) 100%);
    border-radius: 0.5px;
    transform: rotate(var(--shoot-angle, 140deg));
    opacity: 0;
    will-change: transform, opacity;
    animation: shootingStar var(--shoot-dur, 0.8s) ease-in forwards;
    animation-delay: var(--shoot-delay, 0s);
}

@keyframes shootingStar {
    0% {
        opacity: 0;
        transform: rotate(var(--shoot-angle, 215deg)) translateX(0);
    }
    8% {
        opacity: 1;
    }
    70% {
        opacity: 0.6;
    }
    100% {
        opacity: 0;
        transform: rotate(var(--shoot-angle, 215deg)) translateX(var(--shoot-dist, 200px));
    }
}

/* ==================== PRELOAD OVERLAY ==================== */
.preload-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: max(env(safe-area-inset-bottom, 20px), 60px);
    background: linear-gradient(180deg,
        transparent 0%,
        transparent 50%,
        rgba(6,10,31,0.6) 70%,
        rgba(6,10,31,0.92) 100%);
    pointer-events: all;
    transition: opacity 0.6s ease;
}
.preload-overlay.done {
    opacity: 0;
    pointer-events: none;
}

.preload-progress-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 260px;
}

.preload-label {
    font-family: 'Prompt', sans-serif;
    font-size: 0.75rem;
    font-weight: 300;
    letter-spacing: 0.08em;
    color: rgba(154,170,212,0.6);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}

.preload-bar-track {
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: rgba(154,170,212,0.12);
    overflow: hidden;
    position: relative;
}

.preload-bar-fill {
    height: 100%;
    border-radius: 2px;
    width: 0%;
    background: linear-gradient(90deg, rgba(154,170,212,0.4), rgba(200,216,240,0.8));
    box-shadow: 0 0 8px rgba(154,170,212,0.4);
    transition: width 0.3s ease;
}

.preload-percent {
    font-family: 'Prompt', sans-serif;
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    color: rgba(200,216,240,0.7);
}

/* ==================== LANDING PAGE ==================== */

/* Landing header wrapper */
.landing-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 5vh;
    margin-bottom: 0;
    padding-bottom: 1.5rem;
    opacity: 0;
    transform: translateY(-40px);
}

.landing-header.revealed {
    animation: headerReveal 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.landing-heading {
    font-family: 'Caveat', 'Prompt', cursive;
    font-size: 2.5rem;
    font-weight: 500;
    color: var(--burgundy);
    text-align: center;
    line-height: 1.3;
    max-width: 90vw;
    padding: 0 20px;
    margin: 0;
    opacity: 1;
    transform: none;
}

/* ==================== MODE SELECTOR ==================== */

.mode-selector {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0;
    position: relative;
}

.mode-title-wrapper {
    position: relative;
    overflow: visible;
    min-height: 4.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    width: 100%;
}

.mode-title-wrapper .mode-title {
    position: absolute;
    transition: opacity 0.4s ease, transform 0.4s ease;
    white-space: normal;
    width: 100%;
}

.mode-title-wrapper .mode-title.active {
    opacity: 1;
    transform: translateX(0);
}

.mode-title-wrapper .mode-title.slide-left {
    opacity: 0;
    transform: translateX(-30px);
}

.mode-title-wrapper .mode-title.slide-right {
    opacity: 0;
    transform: translateX(30px);
}

.mode-title-wrapper .mode-title:not(.active):not(.slide-left):not(.slide-right) {
    opacity: 0;
    pointer-events: none;
}

.mode-arrow {
    position: absolute;
    top: calc(5vh + 1.75rem);
    background: none;
    border: none;
    color: rgba(192, 200, 224, 0.85);
    cursor: pointer;
    padding: 8px 2px;
    transition: color 0.3s ease, transform 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.8rem;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    z-index: 2001;
}

.mode-arrow-left {
    left: 40px;
    animation: arrowPulseLeft 2s ease-in-out infinite;
}

.mode-arrow-right {
    right: 40px;
    animation: arrowPulseRight 2s ease-in-out infinite;
}

@keyframes arrowPulseLeft {
    0%, 100% { transform: translateX(0); opacity: 0.5; }
    50% { transform: translateX(-5px); opacity: 1; }
}

@keyframes arrowPulseRight {
    0%, 100% { transform: translateX(0); opacity: 0.5; }
    50% { transform: translateX(5px); opacity: 1; }
}

.mode-arrow:hover {
    color: rgba(220, 225, 240, 1);
    animation: none;
}

.mode-arrow:active {
    transform: scale(0.85);
    color: rgba(220, 225, 240, 1);
    animation: none;
}

.mode-dots {
    display: flex;
    gap: 3px;
    justify-content: center;
    align-items: flex-end;
    margin-top: 8px;
    padding: 3px;
    background: rgba(154, 170, 212, 0.06);
    border-radius: 12px;
    border: 1px solid rgba(154, 170, 212, 0.08);
}

.mode-dot {
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: rgba(192, 200, 224, 0.3);
    cursor: pointer;
    transition: all 0.35s ease;
    -webkit-tap-highlight-color: transparent;
}

/* Mini card icons */
.mode-dot-cards {
    display: flex;
    align-items: center;
    gap: 1.5px;
    height: 14px;
}

.mode-dot-cards i {
    display: block;
    width: 5px;
    height: 8px;
    border-radius: 1px;
    background: currentColor;
    opacity: 0.7;
}

/* Fan-style for 3 cards */
.mode-dot-cards.c3 { gap: 0.5px; }
.mode-dot-cards.c3 i:first-child { transform: rotate(-10deg); height: 7px; }
.mode-dot-cards.c3 i:last-child { transform: rotate(10deg); height: 7px; }

/* Fan for 4 cards */
.mode-dot-cards.c4 { gap: 0; }
.mode-dot-cards.c4 i { width: 4px; height: 7px; }
.mode-dot-cards.c4 i:nth-child(1) { transform: rotate(-12deg); height: 6px; }
.mode-dot-cards.c4 i:nth-child(2) { transform: rotate(-4deg); }
.mode-dot-cards.c4 i:nth-child(3) { transform: rotate(4deg); }
.mode-dot-cards.c4 i:nth-child(4) { transform: rotate(12deg); height: 6px; }

/* Grid for 10 — show as 5 tiny blocks (representing 2 rows) */
.mode-dot-cards.c10 { gap: 1px; flex-wrap: wrap; width: 20px; justify-content: center; }
.mode-dot-cards.c10 i { width: 3px; height: 5px; border-radius: 0.5px; }

/* Grid for 12 — show as 6 tiny blocks */
.mode-dot-cards.c12 { gap: 1px; flex-wrap: wrap; width: 22px; justify-content: center; }
.mode-dot-cards.c12 i { width: 3px; height: 5px; border-radius: 0.5px; }

/* Number label */
.mode-dot-num {
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.3px;
}

/* Hover */
.mode-dot:hover {
    color: rgba(192, 200, 224, 0.55);
    background: rgba(154, 170, 212, 0.06);
}

/* Active state */
.mode-dot.active {
    color: rgba(192, 200, 224, 0.9);
    background: rgba(154, 170, 212, 0.12);
    border-color: rgba(154, 170, 212, 0.18);
    box-shadow: 0 0 16px rgba(154, 170, 212, 0.1), inset 0 0 8px rgba(154, 170, 212, 0.05);
}

.mode-dot.active .mode-dot-cards i {
    opacity: 1;
}

/* Press */
.mode-dot:active {
    transform: scale(0.94);
}

/* ==================== THREE-CARD LANDING ==================== */

.three-card-container {
    position: relative;
    top: -20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    margin-bottom: auto;
    cursor: pointer;
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.5s ease;
    -webkit-tap-highlight-color: transparent;
    z-index: 100;
}

.three-card-fan {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 480px;
    height: 448px;
}

.three-card-item {
    position: absolute;
    width: 208px;
    height: 371px;
    border-radius: 10px;
}

/* ScaleX flip wrapper (no 3D transforms — avoids backface-visibility bugs) */
.three-card-flipper {
    width: 100%;
    height: 100%;
    position: relative;
    transition: transform 0.4s ease;
    -webkit-backface-visibility: hidden;
    will-change: transform;
}

/* Face visibility — back shown by default, front hidden */
.three-card-front {
    opacity: 0;
}
.three-card-back {
    opacity: 1;
}

/* Flipped state (set by JS after scaleX midpoint) */
.three-card-item.flipped .three-card-front {
    opacity: 1;
}
.three-card-item.flipped .three-card-back {
    opacity: 0;
}

.three-card-face {
    position: absolute;
    inset: 0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.4),
        0 5px 20px rgba(154, 170, 212, 0.15);
}

.three-card-front {
    background: #fff;
    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.4),
        0 5px 20px rgba(154, 170, 212, 0.15);
}

.three-card-front-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.three-card-item .card-back-galaxy {
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

/* Position labels (Past / Present / Future / Outcome) */
.card-position-label {
    position: absolute;
    bottom: -32px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(192, 200, 224, 0.85);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    white-space: nowrap;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

/* Counter-rotate labels so they stay horizontal on tilted cards */
.three-card-left .card-position-label {
    transform: translateX(-50%) rotate(12deg);
}
.three-card-right .card-position-label {
    transform: translateX(-50%) rotate(-12deg);
}
.fc-1 .card-position-label {
    transform: translateX(-50%) rotate(15deg);
}
.fc-2 .card-position-label {
    transform: translateX(-50%) rotate(5deg);
}
.fc-3 .card-position-label {
    transform: translateX(-50%) rotate(-5deg);
}
.fc-4 .card-position-label {
    transform: translateX(-50%) rotate(-15deg);
}

/* Offset galaxy animations per card so they don't look identical */
.three-card-center .galaxy-bg { animation-delay: -9s; }
.three-card-center .galaxy-stars { animation-delay: -4s; }
.three-card-center .galaxy-stars-2 { animation-delay: -3s; }
.three-card-center .galaxy-shimmer { animation-delay: -2s; }
.three-card-center .galaxy-orbit { animation-delay: -3.5s; }
.three-card-center .galaxy-aurora { animation-delay: -3s; }
.three-card-center .galaxy-ss-1 { animation-delay: -1.5s; }
.three-card-center .galaxy-ss-2 { animation-delay: -3.5s; }
.three-card-center .galaxy-ss-3 { animation-delay: -2s; }

.three-card-right .galaxy-bg { animation-delay: -17s; }
.three-card-right .galaxy-stars { animation-delay: -8s; }
.three-card-right .galaxy-stars-2 { animation-delay: -5s; }
.three-card-right .galaxy-shimmer { animation-delay: -3.5s; }
.three-card-right .galaxy-orbit { animation-delay: -7s; }
.three-card-right .galaxy-aurora { animation-delay: -5.5s; }
.three-card-right .galaxy-ss-1 { animation-delay: -3s; }
.three-card-right .galaxy-ss-2 { animation-delay: -1s; }
.three-card-right .galaxy-ss-3 { animation-delay: -4.5s; }

.three-card-left {
    transform: translateX(-128px) rotate(-12deg);
    animation: cardFloat1 4s ease-in-out infinite;
    z-index: 1;
}

.three-card-center {
    transform: translateX(0) rotate(0deg) translateY(-19px);
    animation: cardFloat2 4s ease-in-out infinite 0.6s;
    z-index: 3;
}

.three-card-right {
    transform: translateX(128px) rotate(12deg);
    animation: cardFloat3 4s ease-in-out infinite 1.2s;
    z-index: 2;
}

@keyframes cardFloat1 {
    0%, 100% { transform: translateX(-128px) rotate(-12deg) translateY(0); }
    50% { transform: translateX(-128px) rotate(-12deg) translateY(-16px); }
}

@keyframes cardFloat2 {
    0%, 100% { transform: translateX(0) rotate(0deg) translateY(-19px); }
    50% { transform: translateX(0) rotate(0deg) translateY(-35px); }
}

@keyframes cardFloat3 {
    0%, 100% { transform: translateX(128px) rotate(12deg) translateY(0); }
    50% { transform: translateX(128px) rotate(12deg) translateY(-16px); }
}

.three-card-container:hover .three-card-face {
    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.4),
        0 5px 25px rgba(154, 170, 212, 0.3);
}

.three-card-container.ready-glow {
    animation: cardReadyReveal 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.three-card-container.ready-glow::after {
    content: '';
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    background: radial-gradient(ellipse at center, rgba(154, 170, 212, 0.12) 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
    animation: subtleGlow 3s ease-in-out infinite;
}

.three-card-container .card-click-hint {
    position: absolute;
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Prompt', sans-serif;
    font-weight: 300;
    font-size: 0.9rem;
    color: var(--burgundy);
    opacity: 0.8;
    white-space: nowrap;
    transition: opacity 0.3s ease;
}

.three-card-container .card-click-hint.loading-state {
    animation: pulse 1.5s ease-in-out infinite;
}

.three-card-container .card-click-hint.ready-state {
    animation: hintReveal 0.6s ease forwards, pulse 2s ease-in-out 0.6s infinite;
}

/* ==================== CARD FACE REALISM EFFECTS ==================== */

/* Thin elegant border - defines card edge like a real card */
.spinning-card-face,
.three-card-face {
    border: 1px solid rgba(192, 200, 224, 0.12);
}

/* Inner depth shadow via ::before - card surface looks recessed */
.spinning-card-face::before,
.three-card-face::before {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow:
        inset 0 0 25px rgba(0, 0, 0, 0.2),
        inset 0 2px 6px rgba(0, 0, 0, 0.15),
        inset 0 -2px 6px rgba(0, 0, 0, 0.1);
    z-index: 10;
    pointer-events: none;
    border-radius: inherit;
}

/* Light reflection via ::after - glossy diagonal sheen */
.spinning-card-face::after,
.three-card-face::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.18) 0%,
        rgba(255, 255, 255, 0.08) 20%,
        transparent 45%,
        transparent 80%,
        rgba(255, 255, 255, 0.04) 100%
    );
    z-index: 11;
    pointer-events: none;
    border-radius: inherit;
}

/* Card thickness - subtle bottom/right edge shadow */
.spinning-card-face,
.three-card-face {
    outline: 1px solid rgba(0, 0, 0, 0.15);
    outline-offset: -1px;
}

/* Card front - vignette darkens edges for depth on white surface */
.spinning-card-front::before,
.three-card-front::before {
    box-shadow:
        inset 0 0 40px rgba(0, 0, 0, 0.18),
        inset 0 0 80px rgba(0, 0, 0, 0.08),
        inset 0 3px 8px rgba(0, 0, 0, 0.12),
        inset 0 -3px 8px rgba(0, 0, 0, 0.08);
}

/* Silver-blue tinted reflection on card front (white-on-white invisible, so use tint) */
.spinning-card-front::after,
.three-card-front::after {
    background: linear-gradient(
        135deg,
        rgba(180, 200, 235, 0.22) 0%,
        rgba(170, 190, 225, 0.1) 25%,
        transparent 50%,
        transparent 80%,
        rgba(170, 190, 225, 0.06) 100%
    );
}

/* ==================== MULTI-CARD CONTAINERS (4, 10, 12) ==================== */

.multi-card-container {
    position: relative;
    top: -10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    margin-bottom: auto;
    cursor: pointer;
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.5s ease;
    -webkit-tap-highlight-color: transparent;
    z-index: 100;
}

.multi-card-fan {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.multi-card-item {
    position: absolute;
    border-radius: 8px;
    perspective: 600px;
}

/* Multi-card 3D flip */
.multi-card-flipper {
    width: 100%;
    height: 100%;
    position: relative;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transition: transform 0.9s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.multi-card-item.peek-flip .multi-card-flipper {
    transform: rotateY(180deg);
}

/* iOS Safari: backface-visibility fallback via opacity cross-fade at flip midpoint */
.multi-card-front {
    opacity: 0;
    transition: opacity 0.2s ease 0.28s;
}
.multi-card-back {
    opacity: 1;
    transition: opacity 0.2s ease 0.28s;
}
.multi-card-item.peek-flip .multi-card-front {
    opacity: 1;
}
.multi-card-item.peek-flip .multi-card-back {
    opacity: 0;
}

.multi-card-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 8px;
    overflow: hidden;
    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.4),
        0 4px 15px rgba(154, 170, 212, 0.15);
}

.multi-card-front {
    transform: rotateY(180deg);
    background: #fff;
    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.4),
        0 4px 15px rgba(154, 170, 212, 0.15);
}

.multi-card-front-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.multi-card-item .card-back-galaxy {
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

.multi-card-container .card-click-hint {
    position: absolute;
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Prompt', sans-serif;
    font-weight: 300;
    font-size: 0.9rem;
    color: var(--burgundy);
    opacity: 0.8;
    white-space: nowrap;
    transition: opacity 0.3s ease;
}

.multi-card-container .card-click-hint.loading-state {
    animation: pulse 1.5s ease-in-out infinite;
}

.multi-card-container .card-click-hint.ready-state {
    animation: hintReveal 0.6s ease forwards, pulse 2s ease-in-out 0.6s infinite;
}

/* ===== 4-Card Fan Layout ===== */
.four-card-fan {
    width: 500px;
    height: 400px;
}

.four-card-fan .multi-card-item {
    width: 160px;
    height: 285px;
}

.fc-1 {
    transform: translateX(-170px) rotate(-15deg);
    animation: fcFloat1 4s ease-in-out infinite;
    z-index: 1;
}
.fc-2 {
    transform: translateX(-58px) rotate(-5deg) translateY(-15px);
    animation: fcFloat2 4s ease-in-out infinite 0.5s;
    z-index: 2;
}
.fc-3 {
    transform: translateX(58px) rotate(5deg) translateY(-15px);
    animation: fcFloat3 4s ease-in-out infinite 1s;
    z-index: 3;
}
.fc-4 {
    transform: translateX(170px) rotate(15deg);
    animation: fcFloat4 4s ease-in-out infinite 1.5s;
    z-index: 1;
}

@keyframes fcFloat1 {
    0%, 100% { transform: translateX(-170px) rotate(-15deg) translateY(0); }
    50% { transform: translateX(-170px) rotate(-15deg) translateY(-14px); }
}
@keyframes fcFloat2 {
    0%, 100% { transform: translateX(-58px) rotate(-5deg) translateY(-15px); }
    50% { transform: translateX(-58px) rotate(-5deg) translateY(-29px); }
}
@keyframes fcFloat3 {
    0%, 100% { transform: translateX(58px) rotate(5deg) translateY(-15px); }
    50% { transform: translateX(58px) rotate(5deg) translateY(-29px); }
}
@keyframes fcFloat4 {
    0%, 100% { transform: translateX(170px) rotate(15deg) translateY(0); }
    50% { transform: translateX(170px) rotate(15deg) translateY(-14px); }
}

/* Offset galaxy animations per card */
.fc-2 .galaxy-bg { animation-delay: -7s; }
.fc-2 .galaxy-stars { animation-delay: -3s; }
.fc-2 .galaxy-shimmer { animation-delay: -2s; }
.fc-3 .galaxy-bg { animation-delay: -13s; }
.fc-3 .galaxy-stars { animation-delay: -6s; }
.fc-3 .galaxy-shimmer { animation-delay: -4s; }
.fc-4 .galaxy-bg { animation-delay: -19s; }
.fc-4 .galaxy-stars { animation-delay: -9s; }
.fc-4 .galaxy-shimmer { animation-delay: -5s; }

/* ===== 10-Card Celtic Cross Spread ===== */
/*
   Layout:
              [3]
    [5]    [1]+[2]    [6]     [10]
              [4]              [9]
                               [8]
                               [7]
   Card 2 rotated 90° crossing over card 1
*/
.ten-card-fan {
    width: 500px;
    height: 440px;
}

.ten-card-fan .multi-card-item {
    width: 80px;
    height: 128px;
    border-radius: 6px;
}

.ten-card-fan .card-back-galaxy { border-radius: 6px; }
.ten-card-fan .card-back-seal { width: 32px; height: 32px; }

/* 1: Significator — center of the cross */
.tc-1  { transform: translate(-65px, 0px);  z-index: 2; animation: ccFloat 5s ease-in-out infinite; }
/* 2: Crossing — rotated 90° over card 1 */
.tc-2  { transform: translate(-65px, 0px) rotate(90deg); z-index: 3; animation: ccFloat 5s ease-in-out infinite 0.5s; }
/* 3: Crown — above center */
.tc-3  { transform: translate(-65px, -140px); z-index: 1; animation: ccFloat 5s ease-in-out infinite 1s; }
/* 4: Base — below center */
.tc-4  { transform: translate(-65px, 140px); z-index: 1; animation: ccFloat 5s ease-in-out infinite 1.5s; }
/* 5: Past — left of center */
.tc-5  { transform: translate(-185px, 0px); z-index: 1; animation: ccFloat 5s ease-in-out infinite 2s; }
/* 6: Future — right of center */
.tc-6  { transform: translate(55px, 0px); z-index: 1; animation: ccFloat 5s ease-in-out infinite 2.5s; }
/* 7-10: Staff column — right side, bottom to top */
.tc-7  { transform: translate(180px, 195px); z-index: 1; animation: ccFloat 5s ease-in-out infinite 3s; }
.tc-8  { transform: translate(180px, 65px);  z-index: 1; animation: ccFloat 5s ease-in-out infinite 3.5s; }
.tc-9  { transform: translate(180px, -65px); z-index: 1; animation: ccFloat 5s ease-in-out infinite 4s; }
.tc-10 { transform: translate(180px, -195px); z-index: 1; animation: ccFloat 5s ease-in-out infinite 4.5s; }

/* New 10-card layout
   [6] [3] [10] [9]
   [2] [1] [5]  [8]
       [4]      [7]
*/
.ten-card-fan.layout-new .tc-1  { transform: translate(-65px, 0px); z-index: 3; }
.ten-card-fan.layout-new .tc-2  { transform: translate(-185px, 0px); z-index: 2; }
.ten-card-fan.layout-new .tc-3  { transform: translate(-65px, -140px); z-index: 2; }
.ten-card-fan.layout-new .tc-4  { transform: translate(-65px, 140px); z-index: 2; }
.ten-card-fan.layout-new .tc-5  { transform: translate(55px, 0px); z-index: 2; }
.ten-card-fan.layout-new .tc-6  { transform: translate(-185px, -140px); z-index: 1; }
.ten-card-fan.layout-new .tc-7  { transform: translate(180px, 140px); z-index: 1; }
.ten-card-fan.layout-new .tc-8  { transform: translate(180px, 0px); z-index: 1; }
.ten-card-fan.layout-new .tc-9  { transform: translate(180px, -140px); z-index: 1; }
.ten-card-fan.layout-new .tc-10 { transform: translate(55px, -140px); z-index: 2; }

.ten-card-fan.layout-new .card-position-label {
    bottom: -30px;
    font-size: 12px;
    letter-spacing: 1.2px;
}

@keyframes ccFloat {
    0%, 100% { margin-top: 0; }
    50% { margin-top: -8px; }
}

/* Subtle cross guide lines */
.ten-card-fan::before {
    content: '';
    position: absolute;
    top: 50%; left: calc(50% - 65px);
    width: 1px; height: 300px;
    transform: translate(-50%, -50%);
    background: linear-gradient(180deg, transparent, rgba(154, 170, 212, 0.06) 30%, rgba(154, 170, 212, 0.06) 70%, transparent);
    pointer-events: none;
}

.ten-card-fan::after {
    content: '';
    position: absolute;
    top: 50%; left: calc(50% - 65px);
    width: 260px; height: 1px;
    transform: translate(-50%, -50%);
    background: linear-gradient(90deg, transparent, rgba(154, 170, 212, 0.06) 30%, rgba(154, 170, 212, 0.06) 70%, transparent);
    pointer-events: none;
}

/* Offset galaxy animations for each 10-card */
.tc-2 .galaxy-bg { animation-delay: -3s; }
.tc-3 .galaxy-bg { animation-delay: -6s; }
.tc-4 .galaxy-bg { animation-delay: -9s; }
.tc-5 .galaxy-bg { animation-delay: -12s; }
.tc-6 .galaxy-bg { animation-delay: -15s; }
.tc-7 .galaxy-bg { animation-delay: -18s; }
.tc-8 .galaxy-bg { animation-delay: -21s; }
.tc-9 .galaxy-bg { animation-delay: -4s; }
.tc-10 .galaxy-bg { animation-delay: -8s; }

/* ===== 12-Card Zodiac Wheel Spread ===== */
.twelve-card-fan {
    width: 520px;
    height: 520px;
}

.twelve-card-fan .multi-card-item {
    width: 85px;
    height: 136px;
    border-radius: 6px;
}

.twelve-card-fan .card-back-galaxy { border-radius: 6px; }
.twelve-card-fan .card-back-seal { width: 32px; height: 32px; }

/* Zodiac wheel ring — subtle circle behind the cards */
.twelve-card-fan::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 400px; height: 400px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(154, 170, 212, 0.08);
    pointer-events: none;
}

/* Inner decorative ring */
.twelve-card-fan::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 300px; height: 300px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px dashed rgba(154, 170, 212, 0.05);
    pointer-events: none;
}

/* 12 houses — radius 200px, card 1 at 12 o'clock, clockwise */
.twc-1  { transform: translate(0px, -200px);    animation: twcF1  5s ease-in-out infinite; }         /* 12 o'clock */
.twc-2  { transform: translate(100px, -173px);  animation: twcF2  5s ease-in-out infinite 0.4s; }    /*  1 o'clock */
.twc-3  { transform: translate(173px, -100px);  animation: twcF3  5s ease-in-out infinite 0.8s; }    /*  2 o'clock */
.twc-4  { transform: translate(200px, 0px);     animation: twcF4  5s ease-in-out infinite 1.2s; }    /*  3 o'clock */
.twc-5  { transform: translate(173px, 100px);   animation: twcF5  5s ease-in-out infinite 1.6s; }    /*  4 o'clock */
.twc-6  { transform: translate(100px, 173px);   animation: twcF6  5s ease-in-out infinite 2s; }      /*  5 o'clock */
.twc-7  { transform: translate(0px, 200px);     animation: twcF7  5s ease-in-out infinite 2.4s; }    /*  6 o'clock */
.twc-8  { transform: translate(-100px, 173px);  animation: twcF8  5s ease-in-out infinite 2.8s; }    /*  7 o'clock */
.twc-9  { transform: translate(-173px, 100px);  animation: twcF9  5s ease-in-out infinite 3.2s; }    /*  8 o'clock */
.twc-10 { transform: translate(-200px, 0px);    animation: twcF10 5s ease-in-out infinite 3.6s; }    /*  9 o'clock */
.twc-11 { transform: translate(-173px, -100px); animation: twcF11 5s ease-in-out infinite 4s; }      /* 10 o'clock */
.twc-12 { transform: translate(-100px, -173px); animation: twcF12 5s ease-in-out infinite 4.4s; }    /* 11 o'clock */

/* Gentle radial breathing */
@keyframes twcF1  { 0%,100% { transform: translate(0px, -200px); }    50% { transform: translate(0px, -208px); } }
@keyframes twcF2  { 0%,100% { transform: translate(100px, -173px); }  50% { transform: translate(104px, -180px); } }
@keyframes twcF3  { 0%,100% { transform: translate(173px, -100px); }  50% { transform: translate(180px, -104px); } }
@keyframes twcF4  { 0%,100% { transform: translate(200px, 0px); }     50% { transform: translate(208px, 0px); } }
@keyframes twcF5  { 0%,100% { transform: translate(173px, 100px); }   50% { transform: translate(180px, 104px); } }
@keyframes twcF6  { 0%,100% { transform: translate(100px, 173px); }   50% { transform: translate(104px, 180px); } }
@keyframes twcF7  { 0%,100% { transform: translate(0px, 200px); }     50% { transform: translate(0px, 208px); } }
@keyframes twcF8  { 0%,100% { transform: translate(-100px, 173px); }  50% { transform: translate(-104px, 180px); } }
@keyframes twcF9  { 0%,100% { transform: translate(-173px, 100px); }  50% { transform: translate(-180px, 104px); } }
@keyframes twcF10 { 0%,100% { transform: translate(-200px, 0px); }    50% { transform: translate(-208px, 0px); } }
@keyframes twcF11 { 0%,100% { transform: translate(-173px, -100px); } 50% { transform: translate(-180px, -104px); } }
@keyframes twcF12 { 0%,100% { transform: translate(-100px, -173px); } 50% { transform: translate(-104px, -180px); } }

/* Offset galaxy animations for 12-card */
.twc-2 .galaxy-bg { animation-delay: -2s; }
.twc-3 .galaxy-bg { animation-delay: -4s; }
.twc-4 .galaxy-bg { animation-delay: -6s; }
.twc-5 .galaxy-bg { animation-delay: -8s; }
.twc-6 .galaxy-bg { animation-delay: -10s; }
.twc-7 .galaxy-bg { animation-delay: -12s; }
.twc-8 .galaxy-bg { animation-delay: -14s; }
.twc-9 .galaxy-bg { animation-delay: -16s; }
.twc-10 .galaxy-bg { animation-delay: -18s; }
.twc-11 .galaxy-bg { animation-delay: -20s; }
.twc-12 .galaxy-bg { animation-delay: -22s; }

/* ==================== COSMIC THEME (Three-Card Mode) ==================== */

/* Background overlays — always present, fade in/out via opacity */
.landing-page::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(200, 100, 40, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 75%, rgba(180, 80, 30, 0.12) 0%, transparent 45%),
        radial-gradient(ellipse at 50% 50%, rgba(160, 70, 25, 0.08) 0%, transparent 60%),
        linear-gradient(180deg, #080408 0%, #12080a 30%, #1a0e0c 50%, #12080a 70%, #080408 100%);
    opacity: 0;
    transition: opacity 0.8s ease;
    z-index: 0;
    pointer-events: none;
}

/* Warm-tinted star field */
.landing-page::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.8s ease;
    background-image:
        radial-gradient(1.2px 1.2px at 10% 15%, rgba(255, 200, 150, 0.7) 50%, transparent 100%),
        radial-gradient(1px 1px at 25% 42%, rgba(255, 220, 170, 0.5) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 40% 8%, rgba(255, 180, 130, 0.8) 50%, transparent 100%),
        radial-gradient(1px 1px at 55% 65%, rgba(255, 230, 190, 0.4) 50%, transparent 100%),
        radial-gradient(1.3px 1.3px at 70% 28%, rgba(255, 190, 140, 0.6) 50%, transparent 100%),
        radial-gradient(1px 1px at 85% 55%, rgba(255, 210, 160, 0.5) 50%, transparent 100%),
        radial-gradient(1.4px 1.4px at 15% 78%, rgba(255, 220, 170, 0.6) 50%, transparent 100%),
        radial-gradient(1px 1px at 48% 88%, rgba(255, 180, 130, 0.4) 50%, transparent 100%),
        radial-gradient(1.1px 1.1px at 62% 35%, rgba(255, 230, 200, 0.5) 50%, transparent 100%),
        radial-gradient(1.3px 1.3px at 92% 72%, rgba(255, 200, 150, 0.6) 50%, transparent 100%),
        radial-gradient(2px 2px at 78% 12%, rgba(255, 160, 110, 0.8) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 50% 25%, rgba(255, 240, 210, 0.5) 50%, transparent 100%),
        radial-gradient(2.2px 2.2px at 20% 60%, rgba(240, 130, 70, 0.7) 50%, transparent 100%);
}

/* Fade in when cosmic theme active */
.landing-page.cosmic-theme::before,
.landing-page.cosmic-theme::after {
    opacity: 1;
}

/* Content above background layers */
.landing-page.cosmic-theme .landing-header,
.landing-page.cosmic-theme .spinning-card-container,
.landing-page.cosmic-theme .three-card-container,
.landing-page.cosmic-theme .multi-card-container,
.landing-page.cosmic-theme .landing-instruction,
.landing-page.cosmic-theme .landing-brand {
    position: relative;
    z-index: 1;
}

/* Smooth transitions when switching themes */
.landing-page .landing-heading,
.landing-page .landing-tagline,
.landing-page .landing-spark,
.landing-page .mode-dots,
.landing-page .mode-dot,
.landing-page .mode-arrow {
    transition: color 0.8s ease, background 0.8s ease, box-shadow 0.8s ease, border-color 0.8s ease;
}
.landing-page .three-card-face {
    transition: box-shadow 0.8s ease;
}

/* Orange accent — three-card elements */
.landing-page.cosmic-theme .three-card-face {
    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.4),
        0 5px 25px rgba(220, 130, 60, 0.25),
        0 0 40px rgba(200, 110, 50, 0.1);
}

.landing-page.cosmic-theme .three-card-container:hover .three-card-face {
    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.4),
        0 5px 30px rgba(220, 130, 60, 0.35),
        0 0 50px rgba(200, 110, 50, 0.15);
}

.landing-page.cosmic-theme .three-card-container.ready-glow::after {
    background: radial-gradient(ellipse at center, rgba(210, 120, 50, 0.12) 0%, transparent 70%);
}

/* Orange-tinted text and UI */
.landing-page.cosmic-theme .landing-heading,
.landing-page.cosmic-theme .landing-tagline,
.landing-page.cosmic-theme .card-click-hint {
    color: rgba(255, 215, 175, 0.85);
}

.landing-page.cosmic-theme .landing-spark {
    color: rgba(255, 175, 130, 0.6);
}

.landing-page.cosmic-theme .mode-dots {
    background: rgba(210, 140, 90, 0.06);
    border-color: rgba(210, 140, 90, 0.1);
}

.landing-page.cosmic-theme .mode-dot.active {
    background: rgba(230, 140, 70, 0.15);
    color: rgba(255, 200, 160, 0.9);
    border-color: rgba(230, 140, 70, 0.2);
    box-shadow: 0 0 16px rgba(230, 140, 70, 0.12), inset 0 0 8px rgba(230, 140, 70, 0.05);
}

.landing-page.cosmic-theme .mode-dot {
    color: rgba(210, 140, 90, 0.3);
}

.landing-page.cosmic-theme .mode-dot:hover {
    background: rgba(210, 140, 90, 0.08);
    color: rgba(255, 200, 160, 0.55);
}

.landing-page.cosmic-theme .mode-arrow {
    color: rgba(255, 200, 165, 0.85);
}

/* ---- Cosmic galaxy card-back — Sunset Nebula ---- */

.landing-page.cosmic-theme .card-back-galaxy {
    background: #0c0610;
    overflow: hidden;
}
.landing-page.cosmic-theme .galaxy-bg {
    background:
        radial-gradient(ellipse at 30% 20%, rgba(230, 100, 50, 0.5) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 75%, rgba(180, 60, 120, 0.35) 0%, transparent 45%),
        radial-gradient(ellipse at 50% 50%, rgba(255, 140, 60, 0.25) 0%, transparent 55%),
        radial-gradient(ellipse at 20% 80%, rgba(120, 50, 140, 0.3) 0%, transparent 45%),
        linear-gradient(180deg, #08030a 0%, #180c14 30%, #1e1018 50%, #180c14 70%, #08030a 100%);
    animation: cosmicDrift 20s ease-in-out infinite;
}
.landing-page.cosmic-theme .galaxy-stars {
    background-image:
        radial-gradient(1.2px 1.2px at 10% 15%, rgba(255, 200, 160, 0.8) 50%, transparent 100%),
        radial-gradient(1px 1px at 30% 40%, rgba(255, 180, 220, 0.6) 50%, transparent 100%),
        radial-gradient(1.3px 1.3px at 50% 10%, rgba(255, 220, 170, 0.7) 50%, transparent 100%),
        radial-gradient(1px 1px at 70% 55%, rgba(255, 190, 140, 0.6) 50%, transparent 100%),
        radial-gradient(1.2px 1.2px at 85% 30%, rgba(255, 210, 180, 0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 15% 70%, rgba(255, 170, 200, 0.6) 50%, transparent 100%),
        radial-gradient(1.3px 1.3px at 60% 80%, rgba(255, 200, 150, 0.5) 50%, transparent 100%),
        radial-gradient(1.1px 1.1px at 90% 65%, rgba(255, 230, 200, 0.6) 50%, transparent 100%);
}
.landing-page.cosmic-theme .galaxy-aurora {
    background: linear-gradient(170deg, transparent 0%, rgba(230, 80, 50, 0.15) 25%, rgba(200, 60, 120, 0.12) 50%, rgba(255, 120, 60, 0.1) 75%, transparent 100%);
}
.landing-page.cosmic-theme .galaxy-shimmer {
    background: linear-gradient(115deg, transparent 30%, rgba(255, 160, 100, 0.08) 45%, rgba(255, 190, 140, 0.14) 50%, rgba(255, 160, 100, 0.08) 55%, transparent 70%);
}
.landing-page.cosmic-theme .galaxy-orbit::before {
    background: conic-gradient(from 0deg, transparent 0%, rgba(240, 130, 70, 0.6) 10%, rgba(200, 70, 130, 0.3) 25%, transparent 40%, rgba(255, 150, 80, 0.4) 55%, transparent 75%, rgba(220, 90, 140, 0.3) 90%, transparent 100%);
}
.landing-page.cosmic-theme .galaxy-orbit::after {
    background: rgba(255, 200, 160, 0.95);
    box-shadow: 0 0 8px rgba(240, 130, 70, 0.8), 0 0 16px rgba(200, 70, 130, 0.4);
}
.landing-page.cosmic-theme .card-back-seal {
    filter: drop-shadow(0 0 12px rgba(240, 110, 60, 0.5));
}
.landing-page.cosmic-theme .galaxy-shooting-star {
    background: linear-gradient(180deg, transparent 0%, rgba(255, 180, 140, 0.4) 30%, rgba(255, 220, 190, 0.95) 100%);
}

@keyframes cosmicDrift {
    0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
    25% { transform: translate(6%, -3%) rotate(1.5deg) scale(1.03); }
    50% { transform: translate(-4%, 5%) rotate(-1deg) scale(1.01); }
    75% { transform: translate(-6%, -3%) rotate(0.5deg) scale(1.04); }
}

/* ==================== END COSMIC THEME ==================== */

/* Sparkle divider between title and tagline */
.landing-sparkles {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 6px 0 8px;
}

.landing-spark {
    color: rgba(168, 184, 216, 0.6);
    font-size: 0.9rem;
    animation: landingSparkle 2.5s ease-in-out infinite;
}

.landing-spark.s2 {
    font-size: 1.1rem;
    animation-delay: 0.4s;
    color: rgba(168, 184, 216, 0.8);
}

.landing-spark.s3 {
    animation-delay: 0.8s;
}

@keyframes landingSparkle {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* Tagline — per-language modern fonts */
.landing-tagline {
    font-family: 'Outfit', sans-serif;
    font-size: 1.2rem;
    font-weight: 300;
    color: rgba(192, 204, 228, 0.9);
    text-align: center;
    letter-spacing: 0.5px;
    margin: 0;
    padding: 0 20px;
}

/* Thai — Kanit: modern geometric Thai */
html[lang="th"] .landing-tagline {
    font-family: 'Kanit', sans-serif;
    font-weight: 200;
    font-size: 1.25rem;
    letter-spacing: 0.5px;
}

/* English / French — Outfit (default above) */

/* Chinese Simplified */
html[lang="zh-Hans"] .landing-tagline {
    font-family: 'Outfit', sans-serif;
    font-size: 1.2rem;
    letter-spacing: 1.5px;
}

/* Chinese Traditional */
html[lang="zh-Hant"] .landing-tagline {
    font-family: 'Outfit', sans-serif;
    font-size: 1.2rem;
    letter-spacing: 1.5px;
}

/* Korean — Gowun Dodum: modern rounded */
html[lang="ko"] .landing-tagline {
    font-family: 'Gowun Dodum', sans-serif;
    font-size: 1.15rem;
    letter-spacing: 0.5px;
}

/* Japanese — Zen Kaku Gothic New: clean modern */
html[lang="ja"] .landing-tagline {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-size: 1.15rem;
    letter-spacing: 1px;
}

/* Epic reveal animation for header */
@keyframes headerReveal {
    0% {
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
    }
    50% {
        opacity: 1;
        transform: translateY(8px) scale(1.03);
    }
    75% {
        transform: translateY(-3px) scale(1);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.strikethrough-word {
    position: relative;
    display: inline-block;
}

.strikethrough-word .mistake {
    text-decoration: line-through;
    text-decoration-color: #E8E8F0;
    text-decoration-thickness: 2px;
}

.strikethrough-word .valentine {
    position: absolute;
    left: 50%;
    top: 85%;
    transform: translateX(-50%) rotate(-8deg);
    white-space: nowrap;
    font-family: 'Caveat', 'Prompt', cursive;
    font-size: 1em;
    font-weight: 400;
    color: #E8E8F0;
}

.landing-page {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    z-index: 2000;
    transition: opacity 0.8s ease, visibility 0.8s ease;
    overflow: hidden;
}

.landing-page.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.landing-page.hidden .mode-arrow {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Landing page draw counter */
.landing-counter {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: 10px;
    font-size: 0.75rem;
    letter-spacing: 0.3px;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.6s ease 0.5s, transform 0.6s ease 0.5s;
}

.landing-counter.show {
    opacity: 1;
    transform: translateY(0);
}

.landing-counter-prefix {
    color: rgba(192, 200, 224, 0.5);
}

.landing-counter-num {
    font-weight: 600;
    color: #C0C8E0;
    font-variant-numeric: tabular-nums;
}

.landing-counter-label {
    color: rgba(192, 200, 224, 0.5);
}

/* ==================== PROFILE SWITCHER ==================== */
.profile-switcher {
    position: fixed;
    top: 15px;
    right: 15px;
    z-index: 10000;
}

.fb-login-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, rgba(24, 119, 242, 0.15), rgba(24, 119, 242, 0.06));
    border: 1px solid rgba(24, 119, 242, 0.3);
    border-radius: 20px;
    padding: 8px 12px;
    color: rgba(210, 218, 240, 0.95);
    cursor: pointer;
    font-family: 'Prompt', sans-serif;
    font-size: 0.8rem;
    font-weight: 400;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(24, 119, 242, 0.1);
}

.fb-login-btn svg {
    width: 17px;
    height: 17px;
    color: #4a9af5;
    flex-shrink: 0;
    filter: drop-shadow(0 0 3px rgba(24, 119, 242, 0.25));
}

.fb-login-btn:hover {
    background: linear-gradient(135deg, rgba(24, 119, 242, 0.25), rgba(24, 119, 242, 0.1));
    border-color: rgba(24, 119, 242, 0.5);
    color: #E8E8F0;
    box-shadow: 0 2px 12px rgba(24, 119, 242, 0.18);
}

.fb-login-btn:active {
    transform: scale(0.96);
}

.fb-login-btn.connected {
    padding: 4px 10px 4px 4px;
    background: rgba(13, 19, 51, 0.7);
    border-color: rgba(154, 170, 212, 0.25);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.fb-login-btn.connected:hover {
    background: rgba(13, 19, 51, 0.85);
    border-color: rgba(154, 170, 212, 0.4);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

.fb-login-btn.connected svg {
    display: none;
}

.fb-profile-pic {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid rgba(154, 170, 212, 0.35);
    box-shadow: 0 0 6px rgba(154, 170, 212, 0.15);
}

.fb-login-btn.connected #fbBtnText {
    font-size: 0.7rem;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Profile Dropdown */
.profile-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    background: rgba(13, 19, 51, 0.98);
    border: 1px solid rgba(140, 160, 200, 0.2);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    overflow: hidden;
}

.profile-switcher.open .profile-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.profile-dropdown-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
}

.profile-dropdown-pic {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid rgba(154, 170, 212, 0.3);
}

.profile-dropdown-name {
    font-family: 'Prompt', sans-serif;
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--burgundy);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 120px;
}

.profile-dropdown-divider {
    height: 1px;
    background: rgba(140, 160, 200, 0.15);
}

.profile-dropdown-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: 'Prompt', sans-serif;
    font-size: 0.8rem;
    font-weight: 300;
    color: #B8C0D8;
    transition: all 0.15s ease;
    text-align: left;
}

.profile-dropdown-option:hover {
    background: rgba(140, 160, 200, 0.08);
}

.profile-dropdown-option svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.7;
}

.profile-dropdown-option.profile-logout {
    color: #E88080;
}

.profile-dropdown-option.profile-logout:hover {
    background: rgba(232, 128, 128, 0.08);
}

/* Animation for header moving to top-left corner */
.landing-header.revealed {
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                top 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                left 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                margin 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                padding 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.landing-header.fade-out {
    animation: none !important;
    opacity: 0 !important;
    transition: opacity 0.6s ease !important;
}

/* Floating animation for spread cards */
@keyframes cardFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-4px);
    }
}

.card-container.spread.floating {
    animation: cardFloat 3s ease-in-out infinite;
    animation-delay: var(--float-delay, 0s);
}

/* Animation for spinning card hint fade */
.spinning-card-container .card-click-hint {
    transition: opacity 0.3s ease;
}

/* Ensure spinning card stays above the stack during animation */
.spinning-card-container {
    z-index: 100;
}

/* Card grid - stacked state (before spread animation) */
.card-grid.stacked {
    gap: 0;
}

.card-grid.stacked .card-container {
    position: absolute;
}

/* Spinning Card Container - Diamond shape spinning on corner */
.spinning-card-container {
    position: relative;
    top: -20px;
    width: 180px;
    height: 321px;
    perspective: 1500px;
    cursor: pointer;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    margin-top: auto;
    margin-bottom: auto;
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.5s ease;
}

.spinning-card-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transform-origin: center center;
    /* Spin around Y-axis (vertical) */
    animation: spinOnY 3s linear infinite;
    transition: transform 0.5s ease;
}

.spinning-card {
    position: relative;
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transform-origin: center center;
    /* Tilt so diagonal (top-left to bottom-right) becomes vertical
       angle = arctan(width/height) = arctan(180/321) ≈ 29.3 degrees */
    transform: rotate(-29.3deg);
    transition: transform 0.5s ease;
}

.spinning-card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 12px;
    overflow: hidden;
    box-shadow:
        0 30px 60px rgba(160, 180, 220, 0.5),
        0 15px 40px rgba(0, 0, 0, 0.4);
}

.spinning-card-face img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.spinning-card-front {
    animation: spinFrontVis 3s step-end infinite;
}

.spinning-card-back {
    transform: rotateY(180deg);
    animation: spinBackVis 3s step-end infinite;
}

/* iOS Safari: backface-visibility breaks with child animations.
   Use synced visibility animations as a robust fallback. */
@keyframes spinFrontVis {
    0%    { visibility: visible; }
    25%   { visibility: hidden; }   /* 90deg – back starts facing */
    75%   { visibility: visible; }  /* 270deg – front starts facing */
}
@keyframes spinBackVis {
    0%    { visibility: hidden; }
    25%   { visibility: visible; }
    75%   { visibility: hidden; }
}

@keyframes spinOnY {
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(360deg);
    }
}

.spinning-card-container:hover {
    transform: scale(1.05);
}

/* Sparkle particles - floating stars */
.spinning-card-container .sparkle-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle,
        rgba(255, 255, 255, 1) 0%,
        rgba(200, 216, 240, 0.8) 30%,
        transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    box-shadow: 0 0 6px rgba(200, 216, 240, 0.8);
}

@keyframes sparkleRise {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(0);
    }
    20% {
        opacity: 1;
        transform: translate(calc(var(--move-x) * 0.2), calc(var(--move-y) * 0.2)) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(var(--move-x), var(--move-y)) scale(0.5);
    }
}

/* Click hint on card */
.card-click-hint {
    position: absolute;
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Prompt', sans-serif;
    font-weight: 300;
    font-size: 0.9rem;
    color: var(--burgundy);
    opacity: 0.8;
    white-space: nowrap;
}

.card-click-hint.loading-state {
    animation: pulse 1.5s ease-in-out infinite;
}

/* Ready state animation for hint */
@keyframes hintReveal {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }
    100% {
        opacity: 0.9;
        transform: translateX(-50%) translateY(0);
    }
}

.card-click-hint.ready-state {
    animation: hintReveal 0.6s ease forwards, pulse 2s ease-in-out 0.6s infinite;
}

/* Card glow and scale effect when ready */
@keyframes cardReadyReveal {
    0% {
        transform: scale(1);
        filter: drop-shadow(0 0 0 rgba(154, 170, 212, 0));
    }
    30% {
        transform: scale(1.08);
        filter: drop-shadow(0 0 30px rgba(154, 170, 212, 0.8));
    }
    60% {
        transform: scale(1.02);
        filter: drop-shadow(0 0 20px rgba(154, 170, 212, 0.5));
    }
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 8px rgba(154, 170, 212, 0.3));
    }
}

.spinning-card-container.ready-glow {
    animation: cardReadyReveal 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Persistent subtle glow after ready */
.spinning-card-container.ready-glow::after {
    content: '';
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    background: radial-gradient(ellipse at center, rgba(154, 170, 212, 0.15) 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
    animation: subtleGlow 3s ease-in-out infinite;
}

@keyframes subtleGlow {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}

/* Landing Instruction */
.landing-instruction {
    display: none;
}

/* Mobile-only hint (shown at bottom of screen on mobile) */
.landing-hint-mobile {
    display: none;
}

@keyframes pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* Brand on Landing */
/* Mute Button */
.mute-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(160, 180, 220, 0.1);
    border: 1px solid rgba(160, 180, 220, 0.2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 9999;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.mute-btn:hover {
    background: rgba(160, 180, 220, 0.2);
    transform: scale(1.05);
}

.mute-btn:active {
    transform: scale(0.95);
}

.mute-btn svg {
    width: 20px;
    height: 20px;
    color: var(--burgundy);
    opacity: 0.7;
}

.mute-btn .hidden {
    display: none;
}

.mute-btn .sound-wave {
    opacity: 0.6;
}

@media (max-width: 480px) {
    .mute-btn {
        bottom: 14px;
        right: 14px;
        width: 40px;
        height: 40px;
    }
}

/* Sound Wave Indicator */
.sound-indicator {
    position: fixed;
    bottom: 26px;
    right: 70px;
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 9998;
}

.sound-indicator.playing {
    opacity: 1;
}

.sound-indicator .bar {
    width: 3px;
    background: var(--burgundy);
    border-radius: 2px;
    opacity: 0.6;
}

.sound-indicator .bar:nth-child(1) {
    height: 6px;
    animation: soundBar1 0.6s ease-in-out infinite;
}

.sound-indicator .bar:nth-child(2) {
    height: 12px;
    animation: soundBar2 0.6s ease-in-out infinite 0.1s;
}

.sound-indicator .bar:nth-child(3) {
    height: 8px;
    animation: soundBar3 0.6s ease-in-out infinite 0.2s;
}

.sound-indicator .bar:nth-child(4) {
    height: 14px;
    animation: soundBar4 0.6s ease-in-out infinite 0.15s;
}

@keyframes soundBar1 {
    0%, 100% { height: 6px; }
    50% { height: 14px; }
}

@keyframes soundBar2 {
    0%, 100% { height: 12px; }
    50% { height: 6px; }
}

@keyframes soundBar3 {
    0%, 100% { height: 8px; }
    50% { height: 16px; }
}

@keyframes soundBar4 {
    0%, 100% { height: 14px; }
    50% { height: 8px; }
}

/* Facebook Connect Button */
.facebook-connect-btn {
    position: absolute;
    top: 20px;
    left: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #1877F2;
    border: none;
    border-radius: 24px;
    color: white;
    font-family: 'Prompt', sans-serif;
    font-weight: 400;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(24, 119, 242, 0.3);
    opacity: 0;
    transform: translateY(-10px);
}

.facebook-connect-btn.show {
    opacity: 1;
    transform: translateY(0);
}

.facebook-connect-btn:hover {
    background: #166fe5;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(24, 119, 242, 0.4);
}

.facebook-connect-btn:active {
    transform: translateY(0);
}

.facebook-connect-btn svg {
    width: 18px;
    height: 18px;
    fill: white;
}

.facebook-connect-btn.connected {
    background: linear-gradient(135deg, #1877F2, #42b883);
}

.facebook-connect-btn.connected::before {
    content: '\2713';
    margin-right: 4px;
    font-size: 0.9rem;
}

.landing-brand {
    position: absolute;
    bottom: 30px;
    font-family: 'Cormorant Garamond', 'Prompt', serif;
    font-size: 1.3rem;
    letter-spacing: 3px;
    color: var(--burgundy);
    opacity: 0;
    transition: opacity 0.8s ease;
}

.landing-brand.revealed {
    opacity: 1;
}

/* Version tag - bottom right corner */
.version-tag {
    position: fixed;
    bottom: 3px;
    right: 8px;
    font-family: 'Courier New', monospace;
    font-size: 0.55rem;
    color: rgba(160, 180, 220, 0.25);
    letter-spacing: 0.5px;
    pointer-events: none;
    user-select: none;
    z-index: 1;
}

/* Notification circle stacks wrapper (below profile pic) */
.notif-circle-stacks {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
    pointer-events: none;
}

/* Unified notification circle stack */
.notif-circle-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.notif-circle-item,
.friends-circle-item {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    flex-shrink: 0;
    opacity: 0;
    animation: friendCircleSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.notif-circle-item img,
.friends-circle-item img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(154, 170, 212, 0.3);
    box-shadow:
        0 2px 10px rgba(0, 0, 0, 0.3),
        0 0 8px rgba(154, 170, 212, 0.06);
    transition: all 0.25s ease;
}

.notif-circle-item:hover img,
.friends-circle-item:hover img {
    transform: scale(1.1);
    border-color: rgba(154, 170, 212, 0.55);
    box-shadow:
        0 3px 14px rgba(0, 0, 0, 0.4),
        0 0 14px rgba(154, 170, 212, 0.12);
}

.notif-circle-item:active img,
.friends-circle-item:active img {
    transform: scale(0.95);
}

.friends-circle-item-default {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(13, 19, 51, 0.85);
    border: 2px solid rgba(154, 170, 212, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(154, 170, 212, 0.5);
    box-shadow:
        0 2px 10px rgba(0, 0, 0, 0.3),
        0 0 8px rgba(154, 170, 212, 0.06);
    transition: all 0.25s ease;
}

.friends-circle-initial {
    font-size: 1rem;
    font-weight: 600;
    font-family: 'Prompt', sans-serif;
    color: rgba(200, 210, 240, 0.9);
    background: linear-gradient(135deg, rgba(80, 60, 140, 0.85), rgba(40, 30, 80, 0.9));
    border-color: rgba(154, 170, 212, 0.4);
}

.notif-circle-item:hover .friends-circle-item-default,
.friends-circle-item:hover .friends-circle-item-default {
    transform: scale(1.1);
    border-color: rgba(154, 170, 212, 0.55);
}

.friends-circle-pulse {
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: 50%;
    border: 1.5px solid rgba(154, 170, 212, 0.25);
    animation: friendCirclePulse 2.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes friendCircleSlideIn {
    from {
        opacity: 0;
        transform: translateX(16px) scale(0.7);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes friendCirclePulse {
    0%, 100% { opacity: 0.25; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.06); }
}

/* Type indicator badges on circles */
.notif-circle-item::after,
.friends-circle-item::after {
    content: '';
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='6' y='3' width='12' height='18' rx='2' stroke='white' stroke-width='2.2' fill='rgba(255,255,255,0.15)' transform='rotate(10 12 12)'/%3E%3C/svg%3E") center / 11px 11px no-repeat,
        linear-gradient(135deg, #6366f1, #818cf8);
    border: 1.5px solid rgba(13, 19, 51, 0.9);
    z-index: 2;
    pointer-events: none;
}

/* Reply-type notif circles: pink border + chat badge instead of card badge */
.notif-circle-item.notif-circle-reply img {
    border-color: rgba(236, 72, 153, 0.4);
    box-shadow:
        0 2px 10px rgba(0, 0, 0, 0.3),
        0 0 8px rgba(236, 72, 153, 0.1);
}
.notif-circle-item.notif-circle-reply:hover img {
    border-color: rgba(236, 72, 153, 0.65);
    box-shadow:
        0 3px 14px rgba(0, 0, 0, 0.4),
        0 0 14px rgba(236, 72, 153, 0.15);
}
.notif-circle-item.notif-circle-reply .reply-circle-item-default {
    border-color: rgba(236, 72, 153, 0.4);
    color: rgba(236, 72, 153, 0.6);
    box-shadow:
        0 2px 10px rgba(0, 0, 0, 0.3),
        0 0 8px rgba(236, 72, 153, 0.1);
}
.notif-circle-item.notif-circle-reply::after {
    content: '💬';
    background: linear-gradient(135deg, #ec4899, #f472b6);
    font-size: 0.45rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.notif-circle-item.notif-circle-reply .reply-circle-pulse {
    border-color: rgba(236, 72, 153, 0.25);
    animation-name: replyCirclePulse;
}

/* Reply circle items (inside reply-circle-stack on landing/result) */
.reply-circle-item {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    flex-shrink: 0;
    opacity: 0;
    animation: friendCircleSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.reply-circle-item img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(236, 72, 153, 0.4);
    box-shadow:
        0 2px 10px rgba(0, 0, 0, 0.3),
        0 0 8px rgba(236, 72, 153, 0.1);
    transition: all 0.25s ease;
}

.reply-circle-item:hover img {
    transform: scale(1.1);
    border-color: rgba(236, 72, 153, 0.65);
    box-shadow:
        0 3px 14px rgba(0, 0, 0, 0.4),
        0 0 14px rgba(236, 72, 153, 0.15);
}

.reply-circle-item:active img {
    transform: scale(0.95);
}

.reply-circle-item-default {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(13, 19, 51, 0.85);
    border: 2px solid rgba(236, 72, 153, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(236, 72, 153, 0.6);
    box-shadow:
        0 2px 10px rgba(0, 0, 0, 0.3),
        0 0 8px rgba(236, 72, 153, 0.1);
    transition: all 0.25s ease;
}

.reply-circle-item:hover .reply-circle-item-default {
    transform: scale(1.1);
    border-color: rgba(236, 72, 153, 0.65);
}

.reply-circle-item::after {
    content: '💬';
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ec4899, #f472b6);
    font-size: 0.45rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgba(13, 19, 51, 0.9);
    z-index: 2;
    pointer-events: none;
}

.reply-circle-pulse {
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: 50%;
    border: 1.5px solid rgba(236, 72, 153, 0.25);
    animation: replyCirclePulse 2.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes replyCirclePulse {
    0%, 100% { opacity: 0.25; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.06); }
}

.reply-circle-badge {
    position: absolute;
    top: -4px;
    left: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: #ec4899;
    color: #fff;
    border-radius: 8px;
    font-family: 'Prompt', sans-serif;
    font-size: 0.55rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgba(13, 19, 51, 0.9);
    z-index: 3;
}

/* Reply circle dismiss button */
.reply-circle-dismiss {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid rgba(236, 72, 153, 0.2);
    background: rgba(13, 19, 51, 0.85);
    color: rgba(236, 72, 153, 0.5);
    cursor: pointer;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    flex-shrink: 0;
    opacity: 0;
    animation: friendCircleSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    transition: all 0.25s ease;
}
.reply-circle-dismiss:hover {
    border-color: rgba(236, 72, 153, 0.5);
    color: rgba(236, 72, 153, 0.8);
    background: rgba(20, 27, 69, 0.95);
    transform: scale(1.1);
}
.reply-circle-dismiss:active {
    transform: scale(0.9);
}
.reply-circle-dismiss svg {
    width: 14px;
    height: 14px;
}

/* Enhanced entrance for newly detected notifications (via polling) */
.notif-circle-item.friends-circle-entrance,
.friends-circle-item.friends-circle-entrance {
    animation: friendCircleEntrancePop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes friendCircleEntrancePop {
    0% {
        opacity: 0;
        transform: translateX(30px) scale(0.3) rotate(12deg);
    }
    45% {
        opacity: 0.9;
        transform: translateX(-4px) scale(1.15) rotate(-2deg);
    }
    75% {
        transform: translateX(2px) scale(0.95) rotate(0deg);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1) rotate(0deg);
    }
}

/* Glow ring on newly entered circles */
.notif-circle-item.friends-circle-entrance .friends-circle-pulse,
.friends-circle-item.friends-circle-entrance .friends-circle-pulse {
    animation: friendCircleGlowIn 0.8s ease-out, friendCirclePulse 2.5s ease-in-out 0.8s infinite;
    border-width: 2px;
}

@keyframes friendCircleGlowIn {
    0% {
        opacity: 0;
        transform: scale(0.5);
        border-color: rgba(154, 170, 212, 0.7);
        box-shadow: 0 0 12px rgba(154, 170, 212, 0.4);
    }
    50% {
        opacity: 1;
        transform: scale(1.3);
    }
    100% {
        opacity: 0.25;
        transform: scale(1);
        border-color: rgba(154, 170, 212, 0.25);
        box-shadow: none;
    }
}

/* Cascade dismiss animation */
.notif-circle-item.friends-circle-dismiss-out,
.notif-circle-dismiss.friends-circle-dismiss-out,
.friends-circle-item.friends-circle-dismiss-out,
.friends-circle-dismiss.friends-circle-dismiss-out {
    animation: friendCircleDismissOut 0.35s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}

@keyframes friendCircleDismissOut {
    0% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    60% {
        opacity: 0.3;
        transform: translateX(10px) scale(0.8);
    }
    100% {
        opacity: 0;
        transform: translateX(30px) scale(0.3) rotate(10deg);
    }
}

/* Circle stack scrollable + dismiss */
.notif-circle-stack.scrollable,
.friends-circle-stack.scrollable {
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 8px 8px 8px 14px;
    margin: -8px -8px -8px -14px;
}
.notif-circle-stack.scrollable::-webkit-scrollbar,
.friends-circle-stack.scrollable::-webkit-scrollbar {
    display: none;
}

/* Collapsed state: only show first (primary) circle + expand button */
.notif-circle-stack.collapsed > .notif-circle-item:not(.notif-circle-primary),
.notif-circle-stack.collapsed > .notif-circle-collapse-btn,
.reply-notif-bar.collapsed > .notif-circle-item:not(.notif-circle-primary),
.reply-notif-bar.collapsed > .notif-circle-collapse-btn {
    display: none !important;
}
.notif-circle-stack:not(.collapsed) > .notif-circle-expand-btn,
.reply-notif-bar:not(.collapsed) > .notif-circle-expand-btn {
    display: none !important;
}

/* Expand button */
.notif-circle-expand-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1.5px solid rgba(154, 170, 212, 0.25);
    background: rgba(13, 19, 51, 0.85);
    color: rgba(154, 170, 212, 0.7);
    cursor: pointer;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    flex-shrink: 0;
    gap: 1px;
    opacity: 0;
    animation: friendCircleSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    transition: all 0.25s ease;
}
.notif-circle-expand-btn:hover {
    border-color: rgba(154, 170, 212, 0.5);
    background: rgba(20, 27, 69, 0.95);
    transform: scale(1.1);
    color: rgba(154, 170, 212, 0.95);
}
.notif-circle-expand-btn:active {
    transform: scale(0.9);
}
.notif-circle-expand-count {
    font-family: 'Prompt', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
}
.notif-circle-expand-btn svg {
    opacity: 0.6;
}
/* Horizontal bar: rotate chevrons for left/right direction */
.reply-notif-bar .notif-circle-expand-btn svg {
    transform: rotate(90deg);
}
.reply-notif-bar .notif-circle-collapse-btn svg {
    transform: rotate(90deg);
}

/* Collapse button (chevron-up, shown when expanded) */
.notif-circle-collapse-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1.5px solid rgba(154, 170, 212, 0.2);
    background: rgba(13, 19, 51, 0.85);
    color: rgba(154, 170, 212, 0.5);
    cursor: pointer;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    flex-shrink: 0;
    opacity: 0;
    animation: friendCircleSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    transition: all 0.25s ease;
}
.notif-circle-collapse-btn:hover {
    border-color: rgba(154, 170, 212, 0.45);
    color: rgba(154, 170, 212, 0.8);
    background: rgba(20, 27, 69, 0.95);
    transform: scale(1.1);
}
.notif-circle-collapse-btn:active {
    transform: scale(0.9);
}

.notif-circle-dismiss,
.friends-circle-dismiss {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1.5px solid rgba(154, 170, 212, 0.2);
    background: rgba(13, 19, 51, 0.85);
    color: rgba(154, 170, 212, 0.5);
    cursor: pointer;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    flex-shrink: 0;
    opacity: 0;
    animation: friendCircleSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    transition: all 0.25s ease;
}
.notif-circle-dismiss:hover,
.friends-circle-dismiss:hover {
    border-color: rgba(154, 170, 212, 0.45);
    color: rgba(154, 170, 212, 0.8);
    background: rgba(20, 27, 69, 0.95);
    transform: scale(1.1);
}
.notif-circle-dismiss:active,
.friends-circle-dismiss:active {
    transform: scale(0.9);
}
.notif-circle-dismiss svg,
.friends-circle-dismiss svg {
    width: 18px;
    height: 18px;
}

/* Friends tab: unseen card badge */
.feed-card-unseen-badge {
    display: inline-block;
    font-family: 'Prompt', sans-serif;
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #0d1333;
    background: linear-gradient(135deg, rgba(154, 170, 212, 0.9), rgba(192, 200, 224, 0.95));
    padding: 1px 6px;
    border-radius: 6px;
    margin-left: 6px;
    vertical-align: middle;
    animation: newBadgePulse 2s ease-in-out infinite;
    box-shadow: 0 1px 6px rgba(154, 170, 212, 0.25);
}
@keyframes newBadgePulse {
    0%, 100% { opacity: 0.9; }
    50% { opacity: 1; box-shadow: 0 1px 10px rgba(154, 170, 212, 0.4); }
}

.feed-card.feed-card-unseen {
    border-left: 2px solid rgba(154, 170, 212, 0.35);
}

/* Mark all read bar */
.friends-mark-all-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    margin-bottom: 4px;
}
.friends-mark-all-bar .unseen-count-text {
    font-family: 'Prompt', sans-serif;
    font-size: 0.72rem;
    color: rgba(154, 170, 212, 0.6);
    font-weight: 300;
}
.friends-mark-all-btn {
    font-family: 'Prompt', sans-serif;
    font-size: 0.68rem;
    font-weight: 400;
    color: rgba(154, 170, 212, 0.7);
    background: rgba(154, 170, 212, 0.08);
    border: 1px solid rgba(154, 170, 212, 0.15);
    border-radius: 14px;
    padding: 4px 12px;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
}
.friends-mark-all-btn:hover {
    background: rgba(154, 170, 212, 0.15);
    border-color: rgba(154, 170, 212, 0.3);
    color: rgba(192, 200, 224, 0.9);
}
.friends-mark-all-btn:active {
    transform: scale(0.96);
}

/* Light theme overrides */
.comments-panel.light-theme .feed-card-unseen-badge {
    color: #fff;
    background: linear-gradient(135deg, #7c6dc9, #9b8dd8);
    box-shadow: 0 1px 6px rgba(124, 109, 201, 0.3);
}
.comments-panel.light-theme .feed-card.feed-card-unseen {
    border-left-color: rgba(124, 109, 201, 0.35);
}
.comments-panel.light-theme .friends-mark-all-bar .unseen-count-text {
    color: rgba(60, 50, 100, 0.6);
}
.comments-panel.light-theme .friends-mark-all-btn {
    color: rgba(60, 50, 100, 0.7);
    background: rgba(100, 80, 160, 0.06);
    border-color: rgba(100, 80, 160, 0.15);
}
.comments-panel.light-theme .friends-mark-all-btn:hover {
    background: rgba(100, 80, 160, 0.12);
    border-color: rgba(100, 80, 160, 0.3);
    color: rgba(50, 40, 90, 0.85);
}

/* Social Icons */
.social-icons {
    display: flex;
    justify-content: center;
    gap: 16px;
}

.social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--burgundy);
    opacity: 0.5;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.social-icons a:hover {
    opacity: 1;
    transform: scale(1.1);
}

.social-icons svg {
    width: 20px;
    height: 20px;
}

/* Footer social icons */
.footer-social {
    margin-bottom: 8px;
}

.footer-social svg {
    width: 22px;
    height: 22px;
}

/* ==================== MAIN PAGE ==================== */
.main-page {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease 0.5s, visibility 0.8s ease 0.5s;
    height: 100vh;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

.main-page.visible {
    opacity: 1;
    visibility: visible;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Header - Hidden */
header {
    display: none;
}

/* Card Grid - Overlapping Row Layout */
.card-grid {
    position: relative;
    width: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    align-content: center;
    gap: 0;
    padding: 10px 10px 10px 10px;
    overflow: hidden;
    transition: opacity 0.5s ease;
}

.card-grid.multi-select-mode {
    overflow: visible;
}

.card-grid.multi-select-mode::before {
    content: '';
    position: absolute;
    top: 20%;
    left: 50%;
    width: 90%;
    height: 70%;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center,
        rgba(var(--cat-primary-rgb, 168,184,216), 0.07) 0%,
        rgba(var(--cat-glow-rgb, 168,184,216), 0.03) 40%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 0;
    animation: ambientCatGlow 4s ease-in-out infinite alternate;
}

@keyframes ambientCatGlow {
    0% { opacity: 0.4; transform: translateX(-50%) scale(0.95); }
    100% { opacity: 1; transform: translateX(-50%) scale(1.05); }
}

/* Multi-pick progress indicator */
.multi-pick-indicator {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: rgba(10, 14, 39, 0.88);
    border: 1px solid rgba(var(--cat-primary-rgb, 168,184,216), 0.2);
    border-radius: 40px;
    z-index: 200;
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.multi-pick-indicator.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.multi-pick-indicator.hiding {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.mpi-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1.5px solid rgba(var(--cat-primary-rgb, 168,184,216), 0.5);
    background: transparent;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}

.mpi-dot.filled {
    background: var(--cat-primary, #a8b8d8);
    border-color: var(--cat-light, #c8d8f0);
    box-shadow: 0 0 8px rgba(var(--cat-primary-rgb, 168,184,216), 0.6);
    transform: scale(1.2);
}

/* Card */
.card-container {
    width: 65px;
    height: 116px;
    perspective: 1000px;
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform-origin: center center;
    flex-shrink: 0;
    contain: layout style paint;
}

.card-container.spread:hover {
    transform: translateY(-6px) scale(1.08);
    z-index: 100;
}

.card-container.disabled {
    pointer-events: none;
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.card-container.selecting {
    transition: all 0.5s ease;
}

/* Golden glow effect for selected card */
.card-container.selecting::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    background: radial-gradient(ellipse at center, rgba(var(--cat-light-rgb, 200,216,240), 0.8) 0%, rgba(var(--cat-primary-rgb, 180,200,232), 0.4) 40%, transparent 70%);
    border-radius: 16px;
    z-index: -1;
    animation: goldenGlow 0.6s ease-out forwards;
}

@keyframes goldenGlow {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    50% {
        opacity: 1;
        transform: scale(1.3);
    }
    100% {
        opacity: 1;
        transform: scale(1.2);
    }
}

/* Sparkle particles */
.sparkle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, #fff 0%, var(--cat-sparkle-end, #C8D8F0) 50%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1000;
    animation: sparkleFloat 0.8s ease-out forwards;
}

/* Category icon particles */
.sparkle.sparkle-icon {
    width: auto;
    height: auto;
    background: none;
    border-radius: 0;
    font-size: 14px;
    line-height: 1;
    filter: drop-shadow(0 0 4px rgba(var(--cat-primary-rgb, 168,184,216), 0.8));
    animation: sparkleIconFloat 0.9s ease-out forwards;
}

@keyframes sparkleFloat {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(var(--sparkle-x), var(--sparkle-y)) scale(0);
    }
}

@keyframes sparkleIconFloat {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(0.5) rotate(0deg);
    }
    30% {
        opacity: 1;
        transform: translate(calc(var(--sparkle-x) * 0.3), calc(var(--sparkle-y) * 0.3)) scale(1.2) rotate(calc(var(--sparkle-spin, 0deg) * 0.3));
    }
    100% {
        opacity: 0;
        transform: translate(var(--sparkle-x), var(--sparkle-y)) scale(0.3) rotate(var(--sparkle-spin, 0deg));
    }
}

/* Card slide out effect - keep visible with glow */
.card-container.selecting.slide-out {
    /* Card stays visible with golden glow effect */
}

/* Multi-card picked state: lifted with aura */
.card-container.multi-picked {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
    cursor: pointer;
    pointer-events: auto !important;
    contain: style;
    position: relative;
    animation: none !important;
}

.card-container.multi-picked::before {
    content: '';
    position: absolute;
    top: -12px;
    left: -12px;
    right: -12px;
    bottom: -12px;
    background: radial-gradient(ellipse at center, rgba(var(--cat-primary-rgb, 168,184,216), 0.5) 0%, rgba(var(--cat-primary-rgb, 168,184,216), 0.25) 50%, transparent 75%);
    border-radius: 14px;
    z-index: -1;
    animation: multiPickedAura 2s ease-in-out infinite;
}

.card-container.multi-picked::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 10px;
    border: 1.5px solid rgba(var(--cat-primary-rgb, 168,184,216), 0.5);
    pointer-events: none;
}

@keyframes multiPickedAura {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}


.card {
    width: 100%;
    height: 100%;
    position: relative;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.card.flipped {
    transform: rotateY(180deg);
}

/* iOS Safari: backface-visibility fallback via opacity fade at midpoint */
.card .card-front {
    opacity: 0;
    transition: opacity 0.12s ease 0.15s;
}
.card .card-back {
    opacity: 1;
    transition: opacity 0.12s ease 0.15s;
}
.card.flipped .card-front {
    opacity: 1;
}
.card.flipped .card-back {
    opacity: 0;
}

.card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(160, 180, 220, 0.15);
}

/* Only show shadow on spread cards, not stacked */
.card-container.spread .card-face {
    box-shadow: 0 2px 8px rgba(160, 180, 220, 0.2);
}

/* Stacked cards - minimal individual shadows */
.card-container.stacked .card-face {
    box-shadow: none;
}

/* Stack container shadow - single shadow for whole stack */
.card-grid.stacked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90px;
    height: 160px;
    border-radius: 10px;
    box-shadow: 0 15px 40px rgba(160, 180, 220, 0.4), 0 5px 15px rgba(0, 0, 0, 0.2);
    z-index: -1;
    pointer-events: none;
}

.card-grid.stacked.fade-in::after {
    opacity: 1;
    transition: opacity 0.5s ease;
}

.card-grid:not(.stacked)::after {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.card-face img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-back {
    background: #0a0e27;
}

/* ===== Galaxy Animated Card Back ===== */
.card-back-galaxy {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #050818;
}

.card-back-galaxy > img.card-back-seal {
    position: relative;
    width: auto;
    height: auto;
    max-width: 55%;
    max-height: 55%;
    object-fit: contain;
    z-index: 5;
    filter: drop-shadow(0 0 15px rgba(154, 170, 212, 0.5));
    animation: sealPulse 3s ease-in-out infinite;
}

@keyframes sealPulse {
    0%, 100% { filter: drop-shadow(0 0 15px rgba(154, 170, 212, 0.5)) drop-shadow(0 0 4px rgba(180, 200, 240, 0.3)); }
    50% { filter: drop-shadow(0 0 28px rgba(154, 170, 212, 0.7)) drop-shadow(0 0 10px rgba(200, 220, 255, 0.5)); }
}

/* Nebula background — slow drifting color clouds */
.galaxy-bg {
    position: absolute;
    inset: -60%;
    width: 220%;
    height: 220%;
    z-index: 1;
    background:
        radial-gradient(ellipse at 25% 15%, rgba(50, 70, 150, 0.7) 0%, transparent 50%),
        radial-gradient(ellipse at 75% 85%, rgba(30, 50, 120, 0.6) 0%, transparent 45%),
        radial-gradient(ellipse at 65% 35%, rgba(90, 60, 160, 0.3) 0%, transparent 40%),
        radial-gradient(ellipse at 15% 75%, rgba(40, 90, 160, 0.4) 0%, transparent 45%),
        linear-gradient(180deg, #030510 0%, #080e28 30%, #0c1440 50%, #080e28 70%, #030510 100%);
    animation: galaxyDrift 25s ease-in-out infinite;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* ── Grid cards: kill all galaxy animations for performance ── */
.card-container .galaxy-bg {
    inset: 0;
    width: 100%;
    height: 100%;
    animation: none !important;
    will-change: auto;
    background:
        radial-gradient(ellipse at 25% 15%, rgba(50,70,150,0.5) 0%, transparent 50%),
        radial-gradient(ellipse at 75% 85%, rgba(30,50,120,0.4) 0%, transparent 45%),
        radial-gradient(ellipse at 80% 15%, rgba(40,55,130,0.4) 0%, transparent 50%),
        radial-gradient(ellipse at 20% 85%, rgba(35,60,140,0.35) 0%, transparent 50%),
        linear-gradient(180deg, #060a1a 0%, #0c1440 50%, #060a1a 100%);
}
.card-container .galaxy-stars,
.card-container .galaxy-stars-2,
.card-container .galaxy-shimmer,
.card-container .galaxy-orbit,
.card-container .galaxy-aurora,
.card-container .galaxy-shooting-star {
    display: none !important;
}
.card-container .card-back-seal {
    animation: none !important;
    filter: drop-shadow(0 0 10px rgba(154,170,212,0.4));
}

@keyframes galaxyDrift {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(6%, -4%) rotate(1.5deg); }
    50% { transform: translate(-4%, 6%) rotate(-1deg); }
    75% { transform: translate(-6%, -3%) rotate(0.5deg); }
}

/* ===== Moving star fields — continuous scroll for "flying through space" ===== */

/* Layer 1: Distant small stars — slow drift upward */
.galaxy-stars {
    position: absolute;
    inset: 0;
    z-index: 2;
    will-change: background-position;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background-image:
        radial-gradient(1.2px 1.2px at 8% 12%, #fff 50%, transparent 100%),
        radial-gradient(1px 1px at 20% 35%, rgba(200,215,255,0.9) 50%, transparent 100%),
        radial-gradient(1px 1px at 38% 8%, #fff 50%, transparent 100%),
        radial-gradient(1.3px 1.3px at 55% 52%, rgba(180,200,255,0.8) 50%, transparent 100%),
        radial-gradient(1px 1px at 72% 20%, #fff 50%, transparent 100%),
        radial-gradient(1px 1px at 88% 65%, rgba(200,220,255,0.9) 50%, transparent 100%),
        radial-gradient(1.2px 1.2px at 15% 78%, #fff 50%, transparent 100%),
        radial-gradient(1px 1px at 45% 88%, rgba(220,230,255,0.8) 50%, transparent 100%),
        radial-gradient(1px 1px at 65% 42%, #fff 50%, transparent 100%),
        radial-gradient(1.1px 1.1px at 82% 92%, rgba(200,210,255,0.9) 50%, transparent 100%),
        radial-gradient(1px 1px at 30% 60%, rgba(230,240,255,0.7) 50%, transparent 100%),
        radial-gradient(1px 1px at 95% 30%, #fff 50%, transparent 100%);
    background-size: 100% 200%;
    animation: starsScrollSlow 12s linear infinite;
}

/* Layer 2: Mid stars — faster scroll, bigger */
.galaxy-stars-2 {
    background-image:
        radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent 100%),
        radial-gradient(2px 2px at 28% 50%, rgba(180,200,255,1) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 50% 15%, #fff 50%, transparent 100%),
        radial-gradient(1.8px 1.8px at 70% 70%, rgba(200,220,255,1) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 90% 40%, #fff 50%, transparent 100%),
        radial-gradient(2px 2px at 35% 82%, rgba(220,230,255,1) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 60% 30%, rgba(200,215,255,0.9) 50%, transparent 100%),
        radial-gradient(1.8px 1.8px at 80% 85%, #fff 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 5% 55%, rgba(210,225,255,1) 50%, transparent 100%),
        radial-gradient(2px 2px at 48% 68%, #fff 50%, transparent 100%);
    background-size: 100% 200%;
    animation: starsScrollMid 8s linear infinite;
}

@keyframes starsScrollSlow {
    from { background-position: 0 0; }
    to { background-position: 0 -200%; }
}

@keyframes starsScrollMid {
    from { background-position: 0 0; }
    to { background-position: 0 -200%; }
}

/* Shimmer sweep — light beam crossing */
.galaxy-shimmer {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: linear-gradient(
        115deg,
        transparent 30%,
        rgba(140, 165, 220, 0.08) 45%,
        rgba(180, 200, 240, 0.14) 50%,
        rgba(140, 165, 220, 0.08) 55%,
        transparent 70%
    );
    animation: galaxyCardShimmer 5s ease-in-out 1s infinite;
}

@keyframes galaxyCardShimmer {
    0% { transform: translateX(-150%); }
    30% { transform: translateX(150%); }
    100% { transform: translateX(150%); }
}

/* ===== Orbit ring — rotating ellipse around the seal ===== */
.galaxy-orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 62%;
    height: 62%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid transparent;
    z-index: 4;
    animation: orbitSpin 10s linear infinite;
}

.galaxy-orbit::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    border: 1px solid transparent;
    background: conic-gradient(
        from 0deg,
        transparent 0%,
        rgba(154, 170, 212, 0.6) 15%,
        transparent 30%,
        transparent 50%,
        rgba(120, 150, 210, 0.35) 65%,
        transparent 80%
    ) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

/* Small orbiting dot */
.galaxy-orbit::after {
    content: '';
    position: absolute;
    top: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(210, 230, 255, 1);
    box-shadow: 0 0 10px rgba(180, 200, 255, 0.8), 0 0 20px rgba(140, 170, 230, 0.5);
}

@keyframes orbitSpin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ===== Aurora wave — nebula color band ===== */
.galaxy-aurora {
    position: absolute;
    bottom: 5%;
    left: -20%;
    width: 140%;
    height: 40%;
    z-index: 3;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(40, 80, 160, 0.15) 20%,
        rgba(60, 100, 180, 0.22) 40%,
        rgba(80, 60, 160, 0.15) 60%,
        rgba(40, 100, 170, 0.1) 80%,
        transparent 100%
    );
    filter: blur(6px);
    animation: auroraWave 8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes auroraWave {
    0%, 100% { transform: translateX(-8%) skewX(-3deg); opacity: 0.5; }
    33% { transform: translateX(10%) skewX(3deg); opacity: 1; }
    66% { transform: translateX(-5%) skewX(-1deg); opacity: 0.7; }
}

/* ===== Shooting stars — top-right to bottom-left diagonal ===== */
.galaxy-shooting-star {
    position: absolute;
    width: 1.5px;
    z-index: 3;
    border-radius: 1px;
    background: linear-gradient(180deg, transparent 0%, rgba(180, 200, 240, 0.4) 30%, rgba(240, 245, 255, 0.95) 100%);
    pointer-events: none;
    opacity: 0;
}

.galaxy-ss-1 {
    height: 50px;
    top: -15%;
    left: 75%;
    animation: shootingStar1 4.5s ease-in 0.5s infinite;
}

.galaxy-ss-2 {
    height: 35px;
    top: -10%;
    left: 40%;
    animation: shootingStar2 5.5s ease-in 2.5s infinite;
}

.galaxy-ss-3 {
    height: 40px;
    top: -12%;
    left: 55%;
    animation: shootingStar3 6s ease-in 4.5s infinite;
}

@keyframes shootingStar1 {
    0% { opacity: 0; transform: rotate(25deg) translateY(0); }
    3% { opacity: 1; }
    10% { opacity: 0.9; transform: rotate(25deg) translateY(180px); }
    14% { opacity: 0; transform: rotate(25deg) translateY(250px); }
    100% { opacity: 0; }
}

@keyframes shootingStar2 {
    0% { opacity: 0; transform: rotate(15deg) translateY(0); }
    3% { opacity: 1; }
    10% { opacity: 0.9; transform: rotate(15deg) translateY(150px); }
    14% { opacity: 0; transform: rotate(15deg) translateY(200px); }
    100% { opacity: 0; }
}

@keyframes shootingStar3 {
    0% { opacity: 0; transform: rotate(20deg) translateY(0); }
    3% { opacity: 1; }
    10% { opacity: 0.9; transform: rotate(20deg) translateY(170px); }
    14% { opacity: 0; transform: rotate(20deg) translateY(230px); }
    100% { opacity: 0; }
}

.card-front {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    background: white;
}


/* Center Card (Large) */
.center-card-container {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 280px;
    height: 500px;
    z-index: 1001;
    perspective: 1000px;
    transform: translate(-50%, -90%) scale(0);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
    pointer-events: none;
}

.center-card-container.active {
    transform: translate(-50%, -90%) scale(1);
    opacity: 1;
}

/* ===== Radial aura glow behind card ===== */
.center-card-aura {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 380px;
    height: 600px;
    transform: translate(-50%, -50%) scale(0.6);
    border-radius: 50%;
    background: radial-gradient(ellipse at center,
        rgba(140, 165, 220, 0.45) 0%,
        rgba(120, 150, 210, 0.25) 30%,
        rgba(100, 130, 200, 0.1) 55%,
        transparent 75%);
    opacity: 0;
    pointer-events: none;
    z-index: 0;
}

.center-card {
    z-index: 2;
}

.center-card-container.show-info .center-card-aura {
    animation: auraAppear 1.8s ease-out forwards, auraBreath 3s ease-in-out 1.8s infinite;
}

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

@keyframes auraBreath {
    0%, 100% { opacity: 0.85; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
}

/* ===== Floating particles container ===== */
.center-card-particles {
    position: absolute;
    top: -60px;
    left: -40px;
    right: -40px;
    bottom: -120px;
    pointer-events: none;
    z-index: 0;
    overflow: visible;
}

.center-card-particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(192, 200, 240, 0.7);
    box-shadow: 0 0 6px rgba(192, 200, 240, 0.5);
    opacity: 0;
    animation: revealParticleFloat var(--p-dur, 4s) ease-in-out var(--p-delay, 0s) infinite;
}

@keyframes revealParticleFloat {
    0% { opacity: 0; transform: translateY(0) scale(0.5); }
    15% { opacity: 0.8; }
    50% { opacity: 0.4; transform: translateY(var(--p-dy, -30px)) translateX(var(--p-dx, 5px)) scale(1); }
    85% { opacity: 0.6; }
    100% { opacity: 0; transform: translateY(0) scale(0.5); }
}

/* ===== Center card info (name + quote + tap to continue) ===== */
.center-card-info {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: 320px;
    padding-top: 16px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.8s ease;
}

.center-card-container.show-info {
    pointer-events: auto;
    cursor: pointer;
}

.center-card-container.show-info .center-card-info {
    opacity: 1;
}

/* Top decorative stars */
.center-card-info-stars {
    font-size: 0.6rem;
    letter-spacing: 8px;
    color: rgba(154, 170, 212, 0.4);
    margin-bottom: 10px;
    opacity: 0;
    transform: translateY(8px);
    animation: revealInfoSlideUp 0.6s ease forwards 0.1s;
}

.center-card-container:not(.show-info) .center-card-info-stars {
    animation: none;
    opacity: 0;
}

/* Card name — Prompt bold with shimmer */
.center-card-info-name {
    font-family: 'Prompt', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    line-height: 1.3;
    margin-bottom: 8px;
    background: linear-gradient(
        105deg,
        #a0aed4 0%,
        #d4daf0 25%,
        #f0f4ff 45%,
        #d4daf0 55%,
        #a0aed4 75%,
        #d4daf0 100%
    );
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 12px rgba(154, 170, 212, 0.3)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
    animation: cardNameShimmer 4s ease-in-out infinite;
    opacity: 0;
    transform: translateY(10px);
}

.center-card-container.show-info .center-card-info-name {
    animation: revealInfoSlideUp 0.7s ease forwards 0.2s, cardNameShimmer 4s ease-in-out 1s infinite;
}

/* Decorative divider: ── ☽ ── */
.center-card-info-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 10px;
    opacity: 0;
    transform: translateY(8px);
    animation: revealInfoSlideUp 0.6s ease forwards 0.35s;
}

.center-card-container:not(.show-info) .center-card-info-divider {
    animation: none;
    opacity: 0;
}

.center-card-info-divider span:first-child,
.center-card-info-divider span:last-child {
    display: block;
    width: 40px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(154, 170, 212, 0.4), transparent);
}

.center-card-info-divider span:nth-child(2) {
    font-size: 0.75rem;
    color: rgba(154, 170, 212, 0.5);
}

/* Quote */
.center-card-info-quote {
    font-family: 'Cormorant Garamond', 'Prompt', serif;
    font-size: 0.92rem;
    color: rgba(192, 200, 224, 0.8);
    font-style: italic;
    line-height: 1.6;
    margin-bottom: 20px;
    opacity: 0;
    transform: translateY(10px);
}

.center-card-container.show-info .center-card-info-quote {
    animation: revealInfoSlideUp 0.7s ease forwards 0.5s;
}

/* Tap to continue — pulsing with chevrons */
.center-card-info-continue {
    font-family: 'Prompt', sans-serif;
    font-size: 0.78rem;
    font-weight: 300;
    color: rgba(192, 200, 224, 0.45);
    letter-spacing: 1.5px;
    opacity: 0;
    transform: translateY(8px);
}

.center-card-container.show-info .center-card-info-continue {
    animation: revealInfoSlideUp 0.6s ease forwards 0.7s, pulseContinue 2.5s ease-in-out 1.3s infinite;
}

/* Slide-up reveal keyframe for staggered info items */
@keyframes revealInfoSlideUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pulseContinue {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; color: rgba(210, 218, 240, 0.7); }
}

/* ===== Card face — enhanced glow on flip ===== */
.center-card {
    width: 100%;
    height: 100%;
    position: relative;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transition: transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.center-card.flipped {
    transform: rotateY(180deg);
}

/* iOS Safari: backface-visibility fallback via opacity fade at midpoint */
.center-card .card-face {
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.center-card .card-front {
    opacity: 0;
    transition: opacity 0.15s ease 0.2s, box-shadow 1.5s ease;
}
.center-card .card-back {
    opacity: 1;
    transition: opacity 0.15s ease 0.2s, box-shadow 1.5s ease;
}
.center-card.flipped .card-front {
    opacity: 1;
}
.center-card.flipped .card-back {
    opacity: 0;
}

/* Glow on card faces (box-shadow instead of filter to preserve 3D context on iOS Safari) */
.center-card-container.show-info .center-card .card-face {
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(154, 170, 212, 0.35),
        0 0 50px rgba(120, 145, 210, 0.2),
        0 0 80px rgba(100, 130, 200, 0.12);
}

/* ===== Fly to header ===== */
.center-card-container.fly-to-header .center-card-info {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.center-card-container.fly-to-header .center-card-aura {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.center-card-container.fly-to-header {
    animation: flyToHeader 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes flyToHeader {
    0% {
        transform: translate(-50%, -90%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-45vw, -90vh) scale(0.15);
        opacity: 0;
    }
}

/* Overlay */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.overlay.active {
    opacity: 1;
    visibility: visible;
    overflow: hidden;
}

/* ==================== CATEGORY SELECTION OVERLAY ==================== */
.category-overlay {
    position: fixed;
    inset: 0;
    z-index: 3500;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0s 0.5s;
}
.category-overlay.active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease, visibility 0s 0s;
}
.category-overlay-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 30%, rgba(12, 16, 42, 0.93) 0%, rgba(2, 3, 10, 0.97) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.category-content {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 20px 16px;
    max-width: 400px;
    width: 100%;
}

/* Header */
.category-header {
    margin-bottom: 28px;
    opacity: 0;
    transform: translateY(-20px);
}
.category-overlay.active .category-header {
    animation: catFadeDown 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}
.category-sparkles {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-bottom: 14px;
    font-size: 0.85rem;
    color: rgba(154, 170, 212, 0.45);
}
.category-spark {
    animation: landingSparkle 3s ease-in-out infinite;
}
.category-spark.s2 { animation-delay: 1s; }
.category-spark.s3 { animation-delay: 2s; }
.category-title {
    font-family: 'Prompt', sans-serif;
    font-weight: 400;
    font-size: 1.1rem;
    color: rgba(192, 200, 224, 0.9);
    letter-spacing: 0.5px;
    margin: 0 0 6px;
}
.category-subtitle {
    font-family: 'Prompt', sans-serif;
    font-weight: 200;
    font-size: 0.78rem;
    color: rgba(154, 170, 212, 0.4);
    letter-spacing: 0.3px;
    margin: 0;
}

/* Category Cards Container */
.category-cards {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: center;
}

/* ============ CATEGORY CARD — EPIC VERSION ============ */
.category-card {
    position: relative;
    width: 100%;
    max-width: 340px;
    padding: 3px;
    background: transparent;
    border: none;
    border-radius: 22px;
    cursor: pointer;
    outline: none;
    font-family: 'Prompt', sans-serif;
    color: #C0C8E0;
    opacity: 0;
    transform: translateY(40px) scale(0.85);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Staggered entrance */
.category-overlay.active .category-card:nth-child(1) {
    animation: catCardIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}
.category-overlay.active .category-card:nth-child(2) {
    animation: catCardIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both;
}
.category-overlay.active .category-card:nth-child(3) {
    animation: catCardIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
}

/* ---- Rotating border glow (the "aura ring") ---- */
.cat-border-glow {
    position: absolute;
    inset: 0;
    border-radius: 22px;
    opacity: 0.4;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 0;
}
.cat-border-glow::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 24px;
    padding: 2px;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}
[data-category="love"] .cat-border-glow::before {
    background: conic-gradient(from var(--cat-angle, 0deg),
        transparent 0%, #ff6b8a 15%, transparent 30%,
        #ff3366 50%, transparent 65%, #ff8fa8 80%, transparent 100%);
    animation: catBorderSpin 4s linear infinite;
}
[data-category="work"] .cat-border-glow::before {
    background: conic-gradient(from var(--cat-angle, 0deg),
        transparent 0%, #64b5ff 15%, transparent 30%,
        #2979ff 50%, transparent 65%, #90caf9 80%, transparent 100%);
    animation: catBorderSpin 5s linear infinite;
}
[data-category="finance"] .cat-border-glow::before {
    background: conic-gradient(from var(--cat-angle, 0deg),
        transparent 0%, #ffd54f 15%, transparent 30%,
        #ffab00 50%, transparent 65%, #ffe082 80%, transparent 100%);
    animation: catBorderSpin 4.5s linear infinite;
}
.category-card:hover .cat-border-glow { opacity: 1; }

/* ---- Inner card body ---- */
.cat-card-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px 22px;
    border-radius: 20px;
    overflow: hidden;
    z-index: 1;
    background: rgba(8, 12, 35, 0.85);
}

/* ---- Nebula background inside card ---- */
.cat-nebula {
    position: absolute;
    inset: 0;
    opacity: 0.5;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 0;
}
[data-category="love"] .cat-nebula {
    background:
        radial-gradient(ellipse at 20% 50%, rgba(255, 50, 80, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 30%, rgba(255, 120, 160, 0.08) 0%, transparent 40%);
    animation: catNebulaLove 6s ease-in-out infinite alternate;
}
[data-category="work"] .cat-nebula {
    background:
        radial-gradient(ellipse at 20% 50%, rgba(40, 100, 255, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 30%, rgba(100, 180, 255, 0.08) 0%, transparent 40%);
    animation: catNebulaWork 7s ease-in-out infinite alternate;
}
[data-category="finance"] .cat-nebula {
    background:
        radial-gradient(ellipse at 20% 50%, rgba(255, 180, 0, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 30%, rgba(255, 220, 80, 0.08) 0%, transparent 40%);
    animation: catNebulaFin 5.5s ease-in-out infinite alternate;
}
.category-card:hover .cat-nebula { opacity: 1; }

/* ---- Always-on floating particles ---- */
.cat-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}
.cat-particles span {
    position: absolute;
    opacity: 0;
    animation: catFloat 4s ease-in-out infinite;
}
.cat-particles span:nth-child(1) { left: 8%; bottom: -5%; font-size: 9px; animation-delay: 0s; }
.cat-particles span:nth-child(2) { left: 22%; bottom: -8%; font-size: 12px; animation-delay: 0.6s; }
.cat-particles span:nth-child(3) { left: 40%; bottom: -5%; font-size: 7px; animation-delay: 1.2s; }
.cat-particles span:nth-child(4) { left: 58%; bottom: -10%; font-size: 10px; animation-delay: 1.8s; }
.cat-particles span:nth-child(5) { left: 72%; bottom: -5%; font-size: 8px; animation-delay: 2.4s; }
.cat-particles span:nth-child(6) { left: 88%; bottom: -8%; font-size: 11px; animation-delay: 3s; }
.cat-particles span:nth-child(7) { left: 50%; bottom: -12%; font-size: 6px; animation-delay: 3.5s; }
.cat-particles span:nth-child(8) { left: 15%; bottom: -6%; font-size: 8px; animation-delay: 0.3s; }

[data-category="love"] .cat-particles span { color: rgba(255, 100, 140, 0.7); }
[data-category="work"] .cat-particles span { color: rgba(100, 170, 255, 0.7); }
[data-category="finance"] .cat-particles span { color: rgba(255, 210, 60, 0.7); }
.category-card:hover .cat-particles span { animation-duration: 2.8s; }

/* ---- Icon wrapper with aura ring ---- */
.cat-icon-wrap {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cat-icon {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 0 8px rgba(255,255,255,0.15));
}
/* Pulsing aura ring behind icon */
.cat-icon-aura {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    opacity: 0.4;
    transition: opacity 0.4s ease;
    z-index: 0;
}
[data-category="love"] .cat-icon-aura {
    background: radial-gradient(circle, rgba(255, 70, 110, 0.3) 0%, transparent 70%);
    animation: catAuraPulse 2s ease-in-out infinite;
}
[data-category="work"] .cat-icon-aura {
    background: radial-gradient(circle, rgba(60, 130, 255, 0.3) 0%, transparent 70%);
    animation: catAuraPulse 2.5s ease-in-out infinite;
}
[data-category="finance"] .cat-icon-aura {
    background: radial-gradient(circle, rgba(255, 190, 0, 0.3) 0%, transparent 70%);
    animation: catAuraPulse 2.2s ease-in-out infinite;
}
.category-card:hover .cat-icon-aura { opacity: 1; }

/* Icon-specific animations */
[data-category="love"] .cat-icon svg {
    animation: catHeartbeat 1.5s ease-in-out infinite;
}
[data-category="work"] .cat-icon svg {
    animation: catLightningPulse 2s ease-in-out infinite;
}
[data-category="finance"] .cat-icon svg {
    animation: catCoinShine 2.5s ease-in-out infinite;
}

/* ---- Text ---- */
.cat-text {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    text-align: left;
}
.cat-title {
    font-family: 'Prompt', sans-serif;
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: 0.8px;
    line-height: 1.3;
    transition: text-shadow 0.4s ease;
}
[data-category="love"] .cat-title {
    color: #ffb0c4;
    text-shadow: 0 0 20px rgba(255, 80, 120, 0);
}
[data-category="work"] .cat-title {
    color: #a0c8ff;
    text-shadow: 0 0 20px rgba(60, 130, 255, 0);
}
[data-category="finance"] .cat-title {
    color: #ffe088;
    text-shadow: 0 0 20px rgba(255, 190, 0, 0);
}
.category-card:hover [data-category="love"] .cat-title,
[data-category="love"]:hover .cat-title {
    text-shadow: 0 0 25px rgba(255, 80, 120, 0.4);
}
[data-category="work"]:hover .cat-title {
    text-shadow: 0 0 25px rgba(60, 130, 255, 0.4);
}
[data-category="finance"]:hover .cat-title {
    text-shadow: 0 0 25px rgba(255, 190, 0, 0.4);
}

.cat-desc {
    font-family: 'Prompt', sans-serif;
    font-weight: 200;
    font-size: 0.82rem;
    color: rgba(154, 170, 212, 0.5);
    margin-top: 3px;
}

/* ---- Shimmer sweep ---- */
.cat-shimmer {
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.07) 50%, transparent 65%);
    background-size: 300% 100%;
    background-position: 100% 0;
    pointer-events: none;
    z-index: 3;
    transition: background-position 0s;
}
.category-card:hover .cat-shimmer {
    background-position: -100% 0;
    transition: background-position 1s ease;
}

/* ---- Hover: lift + intensify everything ---- */
.category-card:hover {
    transform: translateY(-6px) scale(1.03);
}
.category-card:active {
    transform: scale(0.97);
    transition-duration: 0.1s;
}

/* ---- Selected state (epic flash) ---- */
.category-card.selected {
    transform: scale(1.06) !important;
    transition-duration: 0.15s !important;
}
.category-card.selected .cat-border-glow { opacity: 1; }
.category-card.selected .cat-nebula { opacity: 1; }
.category-card.selected .cat-icon-aura { opacity: 1; transform: scale(1.3); }
[data-category="love"].selected .cat-card-inner {
    box-shadow: inset 0 0 40px rgba(255, 60, 100, 0.1);
}
[data-category="work"].selected .cat-card-inner {
    box-shadow: inset 0 0 40px rgba(40, 110, 255, 0.1);
}
[data-category="finance"].selected .cat-card-inner {
    box-shadow: inset 0 0 40px rgba(255, 180, 0, 0.1);
}

/* Back button */
.category-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 28px;
    padding: 10px 20px;
    background: transparent;
    border: 1px solid rgba(154, 170, 212, 0.12);
    border-radius: 24px;
    color: rgba(154, 170, 212, 0.5);
    font-family: 'Prompt', sans-serif;
    font-size: 0.8rem;
    font-weight: 300;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0;
}
.category-overlay.active .category-back-btn {
    animation: catFadeDown 0.4s ease 0.6s both;
}
.category-back-btn:hover {
    color: #C0C8E0;
    border-color: rgba(154, 170, 212, 0.3);
    background: rgba(154, 170, 212, 0.05);
}
.category-back-btn svg { transition: transform 0.3s ease; }
.category-back-btn:hover svg { transform: translateX(-3px); }

/* Close animation */
.category-overlay.closing {
    opacity: 0;
    transition: opacity 0.4s ease;
}
.category-overlay.closing .category-card {
    transform: scale(0.8) translateY(15px);
    opacity: 0;
    transition: all 0.3s ease;
}

/* ============ KEYFRAMES ============ */
@keyframes catFadeDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes catCardIn {
    0% { opacity: 0; transform: translateY(40px) scale(0.85); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* Rotating border aura */
@keyframes catBorderSpin {
    to { --cat-angle: 360deg; }
}
@property --cat-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
/* Icon aura breathing */
@keyframes catAuraPulse {
    0%, 100% { transform: scale(1); opacity: 0.4; }
    50% { transform: scale(1.25); opacity: 0.7; }
}
/* Love: heartbeat */
@keyframes catHeartbeat {
    0%, 100% { transform: scale(1); }
    14% { transform: scale(1.25); }
    28% { transform: scale(0.95); }
    42% { transform: scale(1.18); }
    56% { transform: scale(1); }
}
/* Work: power surge */
@keyframes catLightningPulse {
    0%, 100% { transform: translateY(0) scale(1); filter: brightness(1) drop-shadow(0 0 4px rgba(100,170,255,0.3)); }
    20% { transform: translateY(-4px) scale(1.12); filter: brightness(1.4) drop-shadow(0 0 12px rgba(100,170,255,0.6)); }
    40% { transform: translateY(0) scale(1); filter: brightness(1) drop-shadow(0 0 4px rgba(100,170,255,0.3)); }
    60% { transform: translateY(-2px) scale(1.06); filter: brightness(1.2) drop-shadow(0 0 8px rgba(100,170,255,0.5)); }
    80% { transform: translateY(0) scale(1); filter: brightness(1) drop-shadow(0 0 4px rgba(100,170,255,0.3)); }
}
/* Finance: coin gleam */
@keyframes catCoinShine {
    0%, 100% { transform: rotateY(0deg) scale(1); filter: brightness(1) drop-shadow(0 0 6px rgba(255,200,40,0.3)); }
    50% { transform: rotateY(20deg) scale(1.12); filter: brightness(1.35) drop-shadow(0 0 14px rgba(255,200,40,0.6)); }
}
/* Particles floating up */
@keyframes catFloat {
    0% { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
    10% { opacity: 0.6; }
    50% { opacity: 0.8; }
    100% { transform: translateY(-90px) translateX(8px) scale(0.2) rotate(30deg); opacity: 0; }
}
/* Nebula breathing */
@keyframes catNebulaLove {
    0% { background-position: 0% 50%; opacity: 0.5; }
    100% { background-position: 100% 50%; opacity: 0.8; }
}
@keyframes catNebulaWork {
    0% { background-position: 0% 50%; opacity: 0.5; }
    100% { background-position: 100% 50%; opacity: 0.8; }
}
@keyframes catNebulaFin {
    0% { background-position: 0% 50%; opacity: 0.5; }
    100% { background-position: 100% 50%; opacity: 0.8; }
}

/* Category selection — edge glow effect */
.category-flash {
    position: fixed;
    inset: 0;
    z-index: 3600;
    pointer-events: none;
    animation: catEdgeFade 1.4s ease-out forwards;
}

/* Soft vignette glow from all edges */
.category-flash::before {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow:
        inset 0 0 60px 15px rgba(var(--cat-primary-rgb, 168,184,216), 0.45),
        inset 0 0 140px 40px rgba(var(--cat-glow-rgb, 168,184,216), 0.18),
        inset 0 0 240px 80px rgba(var(--cat-glow-rgb, 168,184,216), 0.06);
    animation: catEdgePulse 1.4s ease-out forwards;
}

/* Light sweep — bright accent tracing the border */
.category-flash::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1.5px solid transparent;
    border-image: conic-gradient(
        from var(--sweep-angle, 0deg),
        rgba(var(--cat-light-rgb, 200,216,240), 0.8) 0%,
        rgba(var(--cat-primary-rgb, 168,184,216), 0.3) 12%,
        transparent 25%,
        transparent 75%,
        rgba(var(--cat-primary-rgb, 168,184,216), 0.3) 88%,
        rgba(var(--cat-light-rgb, 200,216,240), 0.8) 100%
    ) 1;
    animation: catSweepBorder 1.0s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes catEdgeFade {
    0%   { opacity: 0; }
    15%  { opacity: 1; }
    60%  { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes catEdgePulse {
    0% {
        box-shadow:
            inset 0 0 30px 5px rgba(var(--cat-primary-rgb, 168,184,216), 0.0),
            inset 0 0 80px 20px rgba(var(--cat-glow-rgb, 168,184,216), 0.0),
            inset 0 0 140px 40px rgba(var(--cat-glow-rgb, 168,184,216), 0.0);
    }
    25% {
        box-shadow:
            inset 0 0 80px 20px rgba(var(--cat-primary-rgb, 168,184,216), 0.5),
            inset 0 0 180px 50px rgba(var(--cat-glow-rgb, 168,184,216), 0.2),
            inset 0 0 300px 100px rgba(var(--cat-glow-rgb, 168,184,216), 0.08);
    }
    100% {
        box-shadow:
            inset 0 0 40px 10px rgba(var(--cat-primary-rgb, 168,184,216), 0.0),
            inset 0 0 100px 30px rgba(var(--cat-glow-rgb, 168,184,216), 0.0),
            inset 0 0 160px 50px rgba(var(--cat-glow-rgb, 168,184,216), 0.0);
    }
}

@property --sweep-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@keyframes catSweepBorder {
    0%   { --sweep-angle: 0deg; opacity: 0; }
    10%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { --sweep-angle: 360deg; opacity: 0; }
}

/* ============ DESKTOP ============ */
@media (min-width: 600px) {
    .category-content { max-width: 760px; }
    .category-cards {
        flex-direction: row;
        justify-content: center;
        gap: 22px;
    }
    .category-card { max-width: 220px; }
    .cat-card-inner {
        flex-direction: column;
        text-align: center;
        padding: 32px 20px 28px;
        gap: 14px;
    }
    .cat-text { align-items: center; text-align: center; }
    .cat-icon-wrap { width: 72px; height: 72px; }
    .cat-icon svg { width: 50px; height: 50px; }
}

/* Result Panel — full-screen scrollable */
.result-panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, #060A1F 0%, #0a0e27 30%, #0d1333 60%, #080c25 100%);
    z-index: 1002;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0s 0.4s;
}

/* Starfield dots on result panel */
.result-panel::before {
    content: '';
    position: fixed;
    width: 1px;
    height: 1px;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 0;
    box-shadow:
        18px 40px 0 0 rgba(255,255,255,0.5),
        55px 95px 0 0 rgba(255,255,255,0.2),
        90px 170px 0 0 rgba(255,255,255,0.4),
        130px 250px 0 0.5px rgba(200,216,240,0.35),
        165px 320px 0 0 rgba(255,255,255,0.3),
        200px 400px 0 0 rgba(255,255,255,0.5),
        230px 470px 0 0 rgba(255,255,255,0.2),
        260px 70px 0 0.5px rgba(200,216,240,0.4),
        295px 140px 0 0 rgba(255,255,255,0.35),
        320px 220px 0 0 rgba(255,255,255,0.3),
        350px 300px 0 0 rgba(255,255,255,0.5),
        380px 380px 0 0 rgba(255,255,255,0.2),
        405px 450px 0 0.5px rgba(200,216,240,0.35),
        35px 520px 0 0 rgba(255,255,255,0.3),
        75px 590px 0 0.5px rgba(200,216,240,0.4),
        115px 660px 0 0 rgba(255,255,255,0.2),
        160px 730px 0 0 rgba(255,255,255,0.45),
        210px 130px 0 0 rgba(255,255,255,0.3),
        245px 570px 0 0 rgba(255,255,255,0.35),
        290px 650px 0 0 rgba(255,255,255,0.2),
        330px 720px 0 0.5px rgba(200,216,240,0.35),
        370px 160px 0 0 rgba(255,255,255,0.4),
        410px 240px 0 0 rgba(255,255,255,0.3),
        60px 360px 0 0 rgba(255,255,255,0.35),
        140px 440px 0 0 rgba(255,255,255,0.2),
        235px 510px 0 0.5px rgba(200,216,240,0.3),
        315px 80px 0 0 rgba(255,255,255,0.45),
        430px 310px 0 0 rgba(255,255,255,0.35),
        455px 540px 0 0 rgba(255,255,255,0.2),
        480px 110px 0 0 rgba(255,255,255,0.4),
        28px 800px 0 0 rgba(255,255,255,0.3),
        100px 850px 0 0.5px rgba(200,216,240,0.35),
        180px 900px 0 0 rgba(255,255,255,0.25),
        270px 820px 0 0 rgba(255,255,255,0.4),
        355px 870px 0 0 rgba(255,255,255,0.2),
        425px 840px 0 0.5px rgba(200,216,240,0.3);
    animation: headerStarsTwinkle 4s ease-in-out infinite alternate;
}

.result-panel.active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease, visibility 0s 0s;
}

/* Entrance animations for content */
.result-panel.active .result-sticky-card {
    animation: resultFadeIn 0.5s ease 0.15s both;
}

.result-panel.active .result-glass-card {
    animation: resultFadeUp 0.6s ease 0.4s both;
}

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

@keyframes resultFadeUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Content wrapper for centered layout */
.result-content-wrapper {
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
    position: relative;
    z-index: 1;
}

.result-panel .comment-section {
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
    position: relative;
    z-index: 1;
}

/* Sticky card at top of result panel — row layout: card left, info right */
.result-sticky-card {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 24px 22px 20px;
    gap: 18px;
    background: transparent;
    overflow: hidden;
    transition: padding 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                gap 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                border-bottom-color 0.4s ease,
                box-shadow 0.4s ease,
                background 0.4s ease;
}

.result-sticky-card-img {
    width: 120px;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                border-radius 0.3s ease,
                box-shadow 0.4s ease;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

/* Info container — always visible (card name + quote beside card) */
.result-sticky-card-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
    overflow: hidden;
    position: relative;
    z-index: 1;
    opacity: 1;
    transition: opacity 0.35s ease, gap 0.3s ease;
}

.result-sticky-card-name {
    font-family: 'Prompt', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    line-height: 1.3;
    transition: font-size 0.35s ease, letter-spacing 0.35s ease;
    /* Silver shimmer text effect */
    background: linear-gradient(
        105deg,
        #b0bce0 0%,
        #d4daf0 20%,
        #f0f2ff 40%,
        #d4daf0 50%,
        #b0bce0 60%,
        #d4daf0 80%,
        #f0f2ff 100%
    );
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: cardNameShimmer 4s ease-in-out infinite;
    filter: drop-shadow(0 0 10px rgba(154, 170, 212, 0.25)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

@keyframes cardNameShimmer {
    0% { background-position: 250% center; }
    100% { background-position: -250% center; }
}

.result-sticky-card-quote {
    font-family: 'Cormorant Garamond', 'Prompt', serif;
    font-style: italic;
    font-size: 0.88rem;
    color: rgba(192, 200, 224, 0.7);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: font-size 0.35s ease, -webkit-line-clamp 0s;
}

/* Minimized state — compact header bar with starry background */
.result-sticky-card.minimized {
    padding: 10px 20px;
    gap: 14px;
    border-bottom: 1px solid rgba(160, 180, 220, 0.12);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
    background: linear-gradient(180deg, #060A1F 0%, #0a0e27 100%);
}

/* Stars inside minimized sticky card */
.result-sticky-card.minimized::before {
    content: '';
    position: absolute;
    width: 1px;
    height: 1px;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 0;
    box-shadow:
        15px 8px 0 0 rgba(255,255,255,0.6),
        48px 5px 0 0 rgba(255,255,255,0.25),
        82px 18px 0 0 rgba(255,255,255,0.5),
        120px 10px 0 0.5px rgba(200,216,240,0.4),
        155px 22px 0 0 rgba(255,255,255,0.3),
        190px 6px 0 0 rgba(255,255,255,0.6),
        218px 16px 0 0 rgba(255,255,255,0.25),
        250px 3px 0 0.5px rgba(200,216,240,0.5),
        285px 20px 0 0 rgba(255,255,255,0.4),
        310px 9px 0 0 rgba(255,255,255,0.3),
        340px 15px 0 0 rgba(255,255,255,0.6),
        370px 4px 0 0 rgba(255,255,255,0.25),
        395px 19px 0 0.5px rgba(200,216,240,0.4),
        30px 30px 0 0 rgba(255,255,255,0.3),
        70px 35px 0 0.5px rgba(200,216,240,0.5),
        110px 42px 0 0 rgba(255,255,255,0.25),
        150px 38px 0 0 rgba(255,255,255,0.5),
        200px 45px 0 0 rgba(255,255,255,0.3),
        240px 32px 0 0 rgba(255,255,255,0.4),
        280px 48px 0 0 rgba(255,255,255,0.25),
        320px 40px 0 0.5px rgba(200,216,240,0.4),
        360px 33px 0 0 rgba(255,255,255,0.5),
        400px 50px 0 0 rgba(255,255,255,0.3),
        55px 55px 0 0 rgba(255,255,255,0.4),
        135px 58px 0 0 rgba(255,255,255,0.25),
        225px 52px 0 0.5px rgba(200,216,240,0.35),
        305px 56px 0 0 rgba(255,255,255,0.5),
        420px 12px 0 0 rgba(255,255,255,0.4),
        445px 38px 0 0 rgba(255,255,255,0.25),
        470px 7px 0 0 rgba(255,255,255,0.5);
    animation: headerStarsTwinkle 4s ease-in-out infinite alternate;
}

/* Shooting stars in minimized sticky card */
.result-header-shooting-star {
    position: absolute;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(200,216,240,0.5) 50%, rgba(255,255,255,0.9) 100%);
    border-radius: 0.5px;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    will-change: transform, opacity;
    animation: headerShootingStar var(--hss-dur, 0.6s) ease-in forwards;
    animation-delay: var(--hss-delay, 0s);
}

.result-sticky-card.minimized .result-sticky-card-img {
    width: 50px;
    border-radius: 6px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
}

.result-sticky-card.minimized .result-sticky-card-name {
    font-size: 0.95rem;
    letter-spacing: 0.5px;
}

.result-sticky-card.minimized .result-sticky-card-quote {
    font-size: 0.78rem;
    -webkit-line-clamp: 1;
}

.result-sticky-card.minimized .result-sticky-card-info {
    gap: 3px;
}

/* ===== Multi-card sticky header (reuses .result-sticky-card) ===== */
.result-sticky-card.multi-sticky {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 16px;
    padding: 20px calc(50% - 44px) 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.result-sticky-card.multi-sticky::-webkit-scrollbar {
    display: none;
}

.result-sticky-card.multi-sticky .multi-result-card-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
    opacity: 0.45;
}

.result-sticky-card.multi-sticky .multi-result-card-item.active {
    opacity: 1;
    transform: scale(1.18);
}

.result-sticky-card.multi-sticky .multi-result-card-img {
    width: 72px;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    border: 1.5px solid transparent;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.35s ease,
                border-color 0.35s ease,
                border-radius 0.3s ease;
}

.result-sticky-card.multi-sticky .multi-result-card-item.active .multi-result-card-img {
    border-color: rgba(var(--cat-primary-rgb, 154,170,212), 0.6);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 16px rgba(var(--cat-primary-rgb, 154,170,212), 0.3);
}

.result-sticky-card.multi-sticky .multi-result-card-label {
    margin-top: 8px;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(154, 170, 212, 0.5);
    font-weight: 500;
    transition: opacity 0.3s ease, margin-top 0.3s ease, font-size 0.3s ease, color 0.3s ease;
}

.result-sticky-card.multi-sticky .multi-result-card-item.active .multi-result-card-label {
    color: rgba(var(--cat-primary-rgb, 154,170,212), 0.9);
}

/* Minimized state for multi-card sticky */
.result-sticky-card.multi-sticky.minimized {
    padding: 10px calc(50% - 24px) 8px;
    gap: 10px;
    border-bottom: 1px solid rgba(160, 180, 220, 0.12);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
    background: linear-gradient(180deg, #060A1F 0%, #0a0e27 100%);
}

.result-sticky-card.multi-sticky.minimized .multi-result-card-item {
    opacity: 0.35;
}

.result-sticky-card.multi-sticky.minimized .multi-result-card-item.active {
    opacity: 1;
    transform: scale(1.12);
}

.result-sticky-card.multi-sticky.minimized .multi-result-card-img {
    width: 40px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.result-sticky-card.multi-sticky.minimized .multi-result-card-label {
    font-size: 0.55rem;
    margin-top: 4px;
    opacity: 0.6;
}

.result-sticky-card.multi-sticky.minimized .multi-result-card-item.active .multi-result-card-label {
    opacity: 1;
}

/* Sentinel — invisible marker for IntersectionObserver */
.result-card-sentinel {
    height: 1px;
    width: 100%;
}

/* Card name & quote — hidden (shown in sticky header only) */
.result-card-name,
.result-quote-block,
.result-star-divider {
    display: none;
}

/* Glass card for interpretation */
.result-glass-card {
    background: rgba(13, 19, 51, 0.88);
    border: 1px solid rgba(154, 170, 212, 0.12);
    border-radius: 16px;
    padding: 20px 22px 24px;
    margin-top: 12px;
    margin-bottom: 24px;
}

/* Section header with star icon */
.result-section-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
    font-family: 'Prompt', sans-serif;
    font-weight: 400;
    font-size: 0.82rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(154, 170, 212, 0.6);
}

.result-section-icon {
    flex-shrink: 0;
}

/* Interpretation — flows naturally, no internal scroll */
.result-interpretation {
    font-size: 0.95rem;
    line-height: 1.85;
    color: var(--burgundy);
    text-align: left;
    white-space: pre-line;
    padding-bottom: 4px;
}

.result-interpretation p {
    margin: 0 0 0.8em 0;
}
.result-interpretation p:last-child {
    margin-bottom: 0;
}

/* Pick Counter */
.pick-counter {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 15px auto;
    padding: 8px 16px;
    background: linear-gradient(135deg, rgba(154, 170, 212, 0.1), rgba(160, 180, 220, 0.08));
    border: 1px solid rgba(154, 170, 212, 0.3);
    border-radius: 20px;
    font-size: 0.85rem;
    color: var(--burgundy);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    max-width: fit-content;
}

.pick-counter.show {
    opacity: 1;
    transform: translateY(0);
}

.pick-counter-icon {
    font-size: 1rem;
}

.pick-counter-text {
    font-weight: 300;
}

#pickCountNumber {
    font-weight: 500;
    color: var(--gold);
    font-size: 1rem;
}

.retry-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 20px auto 0;
    font-family: 'Prompt', sans-serif;
    flex-wrap: wrap;
}

.retry-row-bottom {
    margin-top: 12px;
}

.retry-row .accept-btn {
    flex: none;
}

.retry-text {
    font-weight: 300;
    font-size: 0.85rem;
    color: var(--burgundy);
    opacity: 0.6;
}

.result-close {
    display: inline-block;
    padding: 6px 16px;
    font-family: 'Prompt', sans-serif;
    font-weight: 400;
    font-size: 0.9rem;
    background: var(--burgundy);
    color: var(--cream);
    border: none;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.result-close:hover {
    background: #8090B8;
    transform: scale(1.05);
}

/* Share Buttons */
.share-section {
    margin-top: 28px;
    text-align: center;
}

/* Social share circle buttons */
.share-section .save-row {
    gap: 14px;
}

.social-share-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.social-share-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.social-share-btn:hover {
    transform: scale(1.12);
}

.social-share-btn:active {
    transform: scale(0.95);
}

.social-share-btn svg {
    width: 22px;
    height: 22px;
    fill: white;
    position: relative;
    z-index: 1;
}

/* Messenger */
.social-share-btn.messenger {
    background: linear-gradient(135deg, #00b2ff, #006aff);
    box-shadow: 0 3px 14px rgba(0, 106, 255, 0.35);
}

.social-share-btn.messenger:hover {
    box-shadow: 0 4px 20px rgba(0, 106, 255, 0.55);
}

/* LINE */
.social-share-btn.line {
    background: linear-gradient(135deg, #00C300, #00B900);
    box-shadow: 0 3px 14px rgba(0, 185, 0, 0.35);
}

.social-share-btn.line:hover {
    box-shadow: 0 4px 20px rgba(0, 185, 0, 0.55);
}

/* Native share */
.social-share-btn.native-share {
    background: linear-gradient(135deg, rgba(154, 170, 212, 0.25), rgba(154, 170, 212, 0.12));
    border: 1.5px solid rgba(154, 170, 212, 0.4);
    box-shadow: 0 3px 14px rgba(154, 170, 212, 0.15);
}

.social-share-btn.native-share svg {
    fill: #C0C8E0;
}

.social-share-btn.native-share:hover {
    background: linear-gradient(135deg, rgba(154, 170, 212, 0.4), rgba(154, 170, 212, 0.2));
    box-shadow: 0 4px 20px rgba(154, 170, 212, 0.3);
}

.social-share-btn .share-btn-label {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Prompt', sans-serif;
    font-size: 0.6rem;
    font-weight: 300;
    color: rgba(192, 200, 224, 0.6);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.social-share-btn:hover .share-btn-label {
    opacity: 1;
}

.share-label {
    font-family: 'Prompt', sans-serif;
    font-weight: 300;
    font-size: 0.9rem;
    color: var(--burgundy);
    margin-bottom: 12px;
    opacity: 0.8;
}

.share-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.share-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    font-size: 1.2rem;
}

.share-btn:hover {
    transform: scale(1.1);
}

.share-btn.facebook {
    background: #1877F2;
    color: white;
}

.share-btn.line {
    background: #00B900;
    color: white;
}

.share-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* Save Buttons */
.save-section {
    margin-top: 15px;
    text-align: center;
}

.save-label {
    font-family: 'Prompt', sans-serif;
    font-weight: 300;
    font-size: 0.9rem;
    color: var(--burgundy);
    margin-bottom: 10px;
    opacity: 0.8;
}

.save-buttons {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.save-btn {
    padding: 8px 14px;
    border-radius: 20px;
    border: 1.5px solid var(--burgundy);
    background: transparent;
    color: var(--burgundy);
    cursor: pointer;
    font-family: 'Prompt', sans-serif;
    font-weight: 300;
    font-size: 0.75rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 5px;
}

.save-btn:hover {
    background: var(--burgundy);
    color: var(--cream);
}

.save-btn svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.save-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.save-label-inline {
    font-family: 'Prompt', sans-serif;
    font-weight: 300;
    font-size: 0.85rem;
    color: var(--burgundy);
    opacity: 0.8;
}

.save-btn.icon-only {
    padding: 8px 10px;
}

.save-btn.icon-only svg {
    width: 18px;
    height: 18px;
}

.save-btn.with-text {
    padding: 6px 12px;
}

.save-btn.with-text svg {
    width: 14px;
    height: 14px;
}

.copy-toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--burgundy);
    color: var(--cream);
    padding: 12px 24px;
    border-radius: 30px;
    font-family: 'Prompt', sans-serif;
    font-weight: 300;
    font-size: 0.9rem;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 2000;
}

.copy-toast.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Save Preview Popup */
.save-preview-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99990;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.save-preview-popup.show {
    opacity: 1;
    visibility: visible;
}

.save-preview-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.save-preview-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 90vw;
    max-height: 88vh;
    padding: 20px;
    animation: savePreviewSlideIn 0.3s ease;
}

@keyframes savePreviewSlideIn {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.save-preview-close {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.5rem;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    z-index: 1;
}

.save-preview-close:hover {
    background: rgba(255, 255, 255, 0.25);
}

.save-preview-img-wrap {
    max-height: 65vh;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}

.save-preview-img {
    display: block;
    max-width: 80vw;
    max-height: 65vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
}

.save-preview-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.save-preview-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 30px;
    font-family: 'Prompt', sans-serif;
    font-weight: 400;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.25s ease;
}

.save-preview-btn svg {
    flex-shrink: 0;
}

.save-preview-share {
    background: linear-gradient(135deg, rgba(100, 140, 255, 0.3), rgba(140, 100, 255, 0.3));
    color: #c8d4ff;
}

.save-preview-share:hover {
    background: linear-gradient(135deg, rgba(100, 140, 255, 0.5), rgba(140, 100, 255, 0.5));
}

.save-preview-download {
    background: linear-gradient(135deg, rgba(80, 200, 120, 0.3), rgba(60, 180, 140, 0.3));
    color: #a8e8c0;
}

.save-preview-download:hover {
    background: linear-gradient(135deg, rgba(80, 200, 120, 0.5), rgba(60, 180, 140, 0.5));
}

/* Footer */
footer {
    text-align: center;
    padding: 8px 20px;
    color: var(--burgundy);
    font-family: 'Cormorant Garamond', 'Prompt', serif;
    flex-shrink: 0;
}

.brand {
    font-size: 0.9rem;
    letter-spacing: 2px;
    opacity: 0.7;
    margin: 0;
}

/* Loading State */
.loading {
    text-align: center;
    padding: 50px;
    font-size: 1.2rem;
    color: var(--burgundy);
}

/* ==================== WALLPAPER BANNER ==================== */
.wallpaper-banner {
    display: block;
    position: relative;
    margin: 24px 0 0;
    padding: 22px 24px;
    border-radius: 16px;
    background:
        linear-gradient(135deg,
            rgba(30, 25, 20, 0.95) 0%,
            rgba(45, 38, 28, 0.9) 30%,
            rgba(35, 30, 22, 0.95) 60%,
            rgba(25, 22, 18, 0.95) 100%);
    border: 1px solid rgba(195, 170, 120, 0.25);
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    animation: bannerFadeIn 0.8s ease 0.5s forwards;
}

@keyframes bannerFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.wallpaper-banner:hover {
    border-color: rgba(195, 170, 120, 0.5);
    transform: translateY(-2px);
    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.3),
        0 0 25px rgba(195, 170, 120, 0.1);
}

.wallpaper-banner:active {
    transform: translateY(0) scale(0.99);
}

/* Animated border glow — rotating golden light around edges */
.wallpaper-banner::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 17px;
    background: conic-gradient(
        from var(--banner-angle, 0deg),
        transparent 0%,
        rgba(195, 170, 120, 0.4) 10%,
        transparent 20%,
        transparent 50%,
        rgba(195, 170, 120, 0.2) 60%,
        transparent 70%
    );
    z-index: 0;
    opacity: 0;
    animation: bannerBorderReveal 1s ease 1.3s forwards, bannerBorderSpin 6s linear 1.3s infinite;
    pointer-events: none;
}

.wallpaper-banner::after {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: 15px;
    background:
        linear-gradient(135deg,
            rgba(30, 25, 20, 0.98) 0%,
            rgba(45, 38, 28, 0.95) 30%,
            rgba(35, 30, 22, 0.98) 60%,
            rgba(25, 22, 18, 0.98) 100%);
    z-index: 0;
    pointer-events: none;
}

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

@keyframes bannerBorderSpin {
    from { --banner-angle: 0deg; }
    to { --banner-angle: 360deg; }
}

@property --banner-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

/* Shimmer sweep — light beam across the banner */
.wallpaper-banner-glow {
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        105deg,
        transparent 30%,
        rgba(225, 200, 140, 0.06) 45%,
        rgba(225, 200, 140, 0.12) 50%,
        rgba(225, 200, 140, 0.06) 55%,
        transparent 70%
    );
    z-index: 1;
    pointer-events: none;
    animation: bannerShimmer 4s ease-in-out 2s infinite;
}

@keyframes bannerShimmer {
    0% { left: -100%; }
    40% { left: 150%; }
    100% { left: 150%; }
}

/* Content */
.wallpaper-banner-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.wallpaper-banner-stars {
    display: flex;
    justify-content: center;
    gap: 14px;
    font-size: 0.7rem;
    color: rgba(195, 170, 120, 0.4);
    margin-bottom: 8px;
    letter-spacing: 4px;
}

.wallpaper-banner-stars span:nth-child(1) {
    animation: bannerStarTwinkle 3s ease-in-out infinite 0s;
}
.wallpaper-banner-stars span:nth-child(2) {
    animation: bannerStarTwinkle 3s ease-in-out infinite 1s;
}
.wallpaper-banner-stars span:nth-child(3) {
    animation: bannerStarTwinkle 3s ease-in-out infinite 2s;
}

@keyframes bannerStarTwinkle {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.3); color: rgba(235, 220, 170, 0.9); }
}

.wallpaper-banner-title {
    font-family: 'Cormorant Garamond', 'Prompt', serif;
    font-size: 0.7rem;
    font-weight: 400;
    color: rgba(195, 170, 120, 0.6);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.wallpaper-banner-heading {
    font-family: 'Cormorant Garamond', 'Prompt', serif;
    font-size: 1.35rem;
    font-weight: 600;
    color: rgba(235, 220, 185, 0.95);
    letter-spacing: 1.5px;
    line-height: 1.3;
    margin-bottom: 6px;
    text-shadow: 0 0 20px rgba(195, 170, 120, 0.15);
}

.wallpaper-banner-text-accent {
    font-style: italic;
    font-weight: 300;
    font-size: 1.1rem;
    color: rgba(195, 170, 120, 0.7);
    margin: 0 4px;
}

.wallpaper-banner-sub {
    font-family: 'Prompt', sans-serif;
    font-size: 0.72rem;
    font-weight: 300;
    color: rgba(195, 170, 120, 0.55);
    letter-spacing: 2px;
    margin-bottom: 14px;
}

/* CTA button — pulsing gold pill */
.wallpaper-banner-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 22px;
    border-radius: 20px;
    border: 1px solid rgba(195, 170, 120, 0.35);
    background: linear-gradient(135deg, rgba(195, 170, 120, 0.1) 0%, rgba(195, 170, 120, 0.05) 100%);
    font-family: 'Prompt', sans-serif;
    font-size: 0.78rem;
    font-weight: 400;
    color: rgba(225, 205, 160, 0.9);
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    animation: bannerCtaPulse 2.5s ease-in-out infinite;
}

.wallpaper-banner-cta svg {
    transition: transform 0.3s ease;
}

.wallpaper-banner:hover .wallpaper-banner-cta {
    background: linear-gradient(135deg, rgba(195, 170, 120, 0.2) 0%, rgba(195, 170, 120, 0.1) 100%);
    border-color: rgba(195, 170, 120, 0.55);
    color: rgba(240, 228, 195, 1);
    box-shadow: 0 0 15px rgba(195, 170, 120, 0.15);
}

.wallpaper-banner:hover .wallpaper-banner-cta svg {
    transform: translateX(3px);
}

@keyframes bannerCtaPulse {
    0%, 100% {
        box-shadow: 0 0 0 rgba(195, 170, 120, 0);
    }
    50% {
        box-shadow: 0 0 12px rgba(195, 170, 120, 0.12), 0 0 4px rgba(195, 170, 120, 0.08);
    }
}

/* Decorative floating particles */
.wallpaper-banner-decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    border-radius: 16px;
    z-index: 1;
}

.wallpaper-banner-orb {
    position: absolute;
    border-radius: 50%;
    background: rgba(195, 170, 120, 0.6);
    box-shadow: 0 0 6px rgba(195, 170, 120, 0.4);
}

.wallpaper-banner-orb-1 {
    width: 3px;
    height: 3px;
    top: 20%;
    left: 12%;
    animation: bannerParticleFloat 5s ease-in-out infinite;
}

.wallpaper-banner-orb-2 {
    width: 2px;
    height: 2px;
    top: 65%;
    right: 15%;
    animation: bannerParticleFloat 4s ease-in-out infinite 1.5s;
}

.wallpaper-banner-orb-3 {
    width: 2.5px;
    height: 2.5px;
    top: 35%;
    right: 8%;
    animation: bannerParticleFloat 4.5s ease-in-out infinite 3s;
}

.wallpaper-banner-orb-4 {
    width: 2px;
    height: 2px;
    top: 75%;
    left: 25%;
    animation: bannerParticleFloat 5.5s ease-in-out infinite 2s;
}

@keyframes bannerParticleFloat {
    0%, 100% { opacity: 0; transform: translateY(0); }
    20% { opacity: 0.7; }
    50% { opacity: 0.4; transform: translateY(-18px); }
    80% { opacity: 0.7; }
}

/* ===== StarryTale Calendar Banner ===== */
.starrytale-banner {
    display: block;
    position: relative;
    margin: 16px 0 0;
    padding: 24px 24px 22px;
    border-radius: 16px;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(200, 180, 150, 0.15) 0%, transparent 60%),
        radial-gradient(ellipse at 70% 80%, rgba(140, 170, 210, 0.12) 0%, transparent 50%),
        linear-gradient(160deg,
            #c8b896 0%,
            #d4c4a6 20%,
            #c9bfa8 40%,
            #b8c4d4 65%,
            #9ab0cc 85%,
            #8aa4c0 100%);
    border: 1px solid rgba(180, 160, 130, 0.4);
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    animation: bannerFadeIn 0.8s ease 0.7s forwards;
}

.starrytale-banner:hover {
    border-color: rgba(180, 160, 130, 0.65);
    transform: translateY(-2px);
    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.15),
        0 0 25px rgba(180, 160, 130, 0.12);
}

.starrytale-banner:active {
    transform: translateY(0) scale(0.99);
}

/* Oil-painting texture overlay */
.starrytale-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background:
        repeating-conic-gradient(rgba(160, 140, 110, 0.03) 0% 25%, transparent 0% 50%) 0 0 / 6px 6px,
        radial-gradient(ellipse at 50% 0%, rgba(255, 245, 220, 0.2) 0%, transparent 55%);
    z-index: 1;
    pointer-events: none;
}

/* Shimmer sweep */
.starrytale-shimmer {
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        105deg,
        transparent 30%,
        rgba(255, 255, 255, 0.08) 45%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.08) 55%,
        transparent 70%
    );
    z-index: 3;
    pointer-events: none;
    animation: starrytaleShimmer 5s ease-in-out 2.5s infinite;
}

@keyframes starrytaleShimmer {
    0% { left: -100%; }
    35% { left: 150%; }
    100% { left: 150%; }
}

/* Soft cloud layers — drifting */
.starrytale-clouds {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    border-radius: 16px;
    z-index: 1;
}

.starrytale-cloud {
    position: absolute;
    border-radius: 50%;
    filter: blur(20px);
}

.starrytale-cloud-1 {
    width: 120px;
    height: 50px;
    top: 10%;
    right: -10%;
    background: rgba(255, 250, 240, 0.18);
    animation: cloudDrift 12s ease-in-out infinite;
}

.starrytale-cloud-2 {
    width: 90px;
    height: 40px;
    bottom: 15%;
    left: -5%;
    background: rgba(180, 200, 230, 0.15);
    animation: cloudDrift 10s ease-in-out infinite 3s reverse;
}

@keyframes cloudDrift {
    0%, 100% { transform: translateX(0); opacity: 0.6; }
    50% { transform: translateX(20px); opacity: 1; }
}

/* Constellation dots — small twinkling dots in an arc */
.starrytale-constellation {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-bottom: 10px;
    position: relative;
    z-index: 2;
}

.starrytale-constellation span {
    display: block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(80, 60, 30, 0.5);
    box-shadow: 0 0 4px rgba(80, 60, 30, 0.3);
}

.starrytale-constellation span:nth-child(1) { animation: constellationPulse 4s ease-in-out infinite 0s; }
.starrytale-constellation span:nth-child(2) { animation: constellationPulse 4s ease-in-out infinite 0.8s; transform: translateY(-3px); }
.starrytale-constellation span:nth-child(3) { animation: constellationPulse 4s ease-in-out infinite 1.6s; transform: translateY(-5px); }
.starrytale-constellation span:nth-child(4) { animation: constellationPulse 4s ease-in-out infinite 2.4s; transform: translateY(-3px); }
.starrytale-constellation span:nth-child(5) { animation: constellationPulse 4s ease-in-out infinite 3.2s; }

@keyframes constellationPulse {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.6); box-shadow: 0 0 8px rgba(80, 60, 30, 0.5); }
}

/* Content */
.starrytale-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.starrytale-brand {
    font-family: 'Cormorant Garamond', 'Prompt', serif;
    font-size: 1.65rem;
    font-weight: 600;
    font-style: italic;
    color: rgba(50, 35, 15, 0.85);
    letter-spacing: 2px;
    margin-bottom: 2px;
    text-shadow: 0 1px 8px rgba(255, 245, 220, 0.4);
}

.starrytale-heading {
    font-family: 'Prompt', sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    color: rgba(55, 40, 20, 0.8);
    letter-spacing: 1.5px;
    margin-bottom: 8px;
}

.starrytale-desc {
    font-family: 'Prompt', sans-serif;
    font-size: 0.68rem;
    font-weight: 300;
    color: rgba(60, 50, 35, 0.65);
    line-height: 1.6;
    letter-spacing: 0.5px;
    margin-bottom: 14px;
}

/* CTA button — warm earth tone pill */
.starrytale-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 24px;
    border-radius: 20px;
    border: 1px solid rgba(120, 90, 50, 0.3);
    background: linear-gradient(135deg, rgba(120, 90, 50, 0.12) 0%, rgba(100, 80, 45, 0.06) 100%);
    font-family: 'Prompt', sans-serif;
    font-size: 0.78rem;
    font-weight: 400;
    color: rgba(65, 45, 20, 0.85);
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    animation: starrytaleCtaPulse 3s ease-in-out infinite;
}

.starrytale-cta svg {
    transition: transform 0.3s ease;
}

.starrytale-banner:hover .starrytale-cta {
    background: linear-gradient(135deg, rgba(120, 90, 50, 0.22) 0%, rgba(100, 80, 45, 0.12) 100%);
    border-color: rgba(120, 90, 50, 0.5);
    color: rgba(50, 30, 10, 0.95);
    box-shadow: 0 0 15px rgba(180, 160, 120, 0.2);
}

.starrytale-banner:hover .starrytale-cta svg {
    transform: translateX(3px);
}

@keyframes starrytaleCtaPulse {
    0%, 100% {
        box-shadow: 0 0 0 rgba(180, 160, 120, 0);
    }
    50% {
        box-shadow: 0 0 14px rgba(180, 160, 120, 0.15), 0 0 5px rgba(180, 160, 120, 0.1);
    }
}

/* Floating decorative stars */
.starrytale-stars-decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    border-radius: 16px;
    z-index: 1;
}

.starrytale-star {
    position: absolute;
    font-size: 0.55rem;
    color: rgba(90, 70, 40, 0.35);
}

.starrytale-star-1 {
    top: 18%;
    left: 8%;
    animation: starryFloat 6s ease-in-out infinite;
}

.starrytale-star-2 {
    top: 30%;
    right: 10%;
    animation: starryFloat 5s ease-in-out infinite 1.2s;
}

.starrytale-star-3 {
    bottom: 22%;
    left: 15%;
    animation: starryFloat 5.5s ease-in-out infinite 2.4s;
}

.starrytale-star-4 {
    bottom: 35%;
    right: 18%;
    animation: starryFloat 4.5s ease-in-out infinite 3.6s;
}

.starrytale-star-5 {
    top: 55%;
    left: 30%;
    animation: starryFloat 7s ease-in-out infinite 1.8s;
}

@keyframes starryFloat {
    0%, 100% { opacity: 0.15; transform: translateY(0) scale(0.8); }
    30% { opacity: 0.6; }
    50% { opacity: 0.4; transform: translateY(-10px) scale(1.2); }
    70% { opacity: 0.6; }
}

/* Comment Section */
.comment-section {
    margin-top: 20px;
    padding-bottom: 16px;
    text-align: center;
}

/* ===== Minimizable Comment Section ===== */

/* Scroll-down arrow: hidden by default, shown when minimized */
.scroll-down-arrow {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: none;
    animation: scrollArrowBounce 1.5s ease-in-out infinite;
}

@keyframes scrollArrowBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(4px); }
}

/* Minimized: hide input group */
.comment-section.minimized .comment-input-group {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-bottom: 0;
    padding: 0;
    pointer-events: none;
    transition: max-height 0.35s ease, opacity 0.25s ease, margin 0.35s ease;
}

.comment-section:not(.minimized) .comment-input-group {
    max-height: 200px;
    opacity: 1;
    overflow: visible;
    transition: max-height 0.4s ease, opacity 0.3s ease 0.1s, margin 0.35s ease;
}

/* Minimized: sticky bar at bottom of scroll container */
.comment-section.minimized {
    position: sticky;
    bottom: 0;
    z-index: 11;
    margin-top: 0;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
    background: rgba(13, 19, 51, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(154, 170, 212, 0.1);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
}

.comment-section.minimized .comment-form {
    padding: 0;
    background: transparent;
    max-width: 520px;
    margin: 0 auto;
    transition: padding 0.35s ease, background 0.35s ease;
}

.comment-section:not(.minimized) .comment-form {
    transition: padding 0.35s ease, background 0.35s ease;
}

/* Minimized button: compact pill style */
.comment-section.minimized .comment-submit-btn {
    padding: 12px 24px;
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0.5px;
    gap: 6px;
    animation: none;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25), 0 0 8px rgba(154, 170, 212, 0.1);
    background: linear-gradient(135deg, #151d48 0%, #1c2658 100%);
    border-color: rgba(154, 170, 212, 0.2);
}

.comment-section.minimized .accept-btn-icon {
    width: 16px;
    height: 16px;
}

.comment-section.minimized .back-home-btn {
    width: 40px;
    height: 40px;
}

.comment-section.minimized .back-home-btn svg {
    width: 16px;
    height: 16px;
}

/* Show arrow when minimized */
.comment-section.minimized .scroll-down-arrow {
    display: inline-block;
}

/* Fade overlay: no longer needed (panel scrolls instead of interpretation) */
.interpretation-fade-overlay {
    display: none;
}

.interpretation-fade-overlay::before {
    content: '';
    positยion: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30px;
    background: linear-gradient(to top, rgba(13, 19, 51, 0.85), transparent);
    opacity: 1;
    transition: opacity 0.3s ease;
}

.interpretation-fade-overlay.hidden::before {
    opacity: 0;
}

/* Quick Save Button on Result Page */
/* Save & Share section on result page */
.result-save-share-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 5px auto 20px;
    padding: 0 10px;
}
.result-save-share-section .save-section,
.result-save-share-section .share-section {
    width: 100%;
    margin-top: 0;
}
.result-save-share-section .save-row {
    justify-content: center;
}

.comment-buttons-row {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.comment-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 30px;
    border: 2px solid var(--burgundy);
    background: linear-gradient(135deg, rgba(140, 160, 200, 0.1) 0%, rgba(140, 160, 200, 0.05) 100%);
    color: var(--burgundy);
    cursor: pointer;
    font-family: 'Prompt', sans-serif;
    font-weight: 400;
    font-size: 0.9rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(140, 160, 200, 0.15);
    position: relative;
    overflow: hidden;
}

.comment-toggle-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    transition: width 0.5s ease, height 0.5s ease;
    border-radius: 50%;
}

.comment-toggle-btn:hover::before {
    width: 300px;
    height: 300px;
}

.comment-toggle-btn:hover {
    background: linear-gradient(135deg, var(--burgundy) 0%, #7B8DB5 100%);
    color: var(--cream);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(140, 160, 200, 0.35);
}

.comment-toggle-btn:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 2px 8px rgba(140, 160, 200, 0.25);
}

.comment-toggle-btn svg {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

.comment-toggle-btn:hover svg {
    transform: scale(1.1);
}

.comment-toggle-btn.active {
    background: linear-gradient(135deg, var(--burgundy) 0%, #7B8DB5 100%);
    color: var(--cream);
}

.comment-toggle-btn.commented {
    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
    border-color: #4CAF50;
    color: white;
    cursor: default;
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}

.comment-toggle-btn.commented:hover {
    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
    transform: none;
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}

.comment-toggle-btn.commented::before {
    display: none;
}

.view-comments-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    border: 1.5px solid var(--gold);
    background: transparent;
    color: var(--gold);
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.view-comments-btn:hover {
    background: var(--gold);
    color: var(--cream);
}

.view-comments-btn svg {
    width: 20px;
    height: 20px;
}

/* Accept Actions Container */
.accept-actions {
    animation: fadeIn 0.3s ease;
    margin-top: 10px;
}

.comment-form {
    margin-top: 15px;
    padding: 15px;
    background: rgba(140, 160, 200, 0.05);
    border-radius: 15px;
    text-align: left;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.comment-input-group {
    margin-bottom: 12px;
    position: relative;
}

.comment-input-group label {
    display: block;
    font-family: 'Prompt', sans-serif;
    font-weight: 300;
    font-size: 0.8rem;
    color: var(--burgundy);
    margin-bottom: 5px;
}

.comment-input-group input,
.comment-input-group textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid rgba(140, 160, 200, 0.3);
    border-radius: 10px;
    background: var(--cream);
    color: var(--burgundy);
    font-family: 'Prompt', sans-serif;
    font-weight: 300;
    font-size: 0.9rem;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
}

.comment-input-group input:focus,
.comment-input-group textarea:focus {
    outline: none;
    border-color: var(--burgundy);
}

.comment-input-group textarea {
    min-height: 80px;
    resize: vertical;
}

.char-count {
    position: absolute;
    right: 10px;
    bottom: 8px;
    font-family: 'Prompt', sans-serif;
    font-size: 0.7rem;
    color: rgba(140, 160, 200, 0.5);
}

.comment-input-group textarea + .char-count {
    bottom: 12px;
}

/* Accept button row — holds the main btn + back-home circle */
.accept-btn-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.accept-btn-row .comment-submit-btn {
    flex: 1;
    width: auto;
    max-width: none;
}

/* ── Back to Home — Circular U-turn button ── */
.back-home-btn {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    min-width: 0;
    border-radius: 50%;
    border: 1px solid rgba(154, 170, 212, 0.28);
    background: linear-gradient(135deg, rgba(20, 27, 69, 0.9) 0%, rgba(26, 34, 85, 0.75) 100%);
    color: rgba(154, 170, 212, 0.65);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, transform 0.2s ease;
    box-shadow:
        0 0 12px rgba(154, 170, 212, 0.08),
        0 3px 10px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(154, 170, 212, 0.1);
    animation: acceptBtnPulse 3s ease-in-out infinite;
}

.back-home-btn svg {
    width: 20px;
    height: 20px;
    position: relative;
    z-index: 1;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.back-home-btn:hover {
    color: #C0C8E0;
    border-color: rgba(154, 170, 212, 0.55);
    background: linear-gradient(135deg, rgba(26, 34, 85, 0.95) 0%, rgba(36, 48, 114, 0.85) 100%);
    box-shadow:
        0 0 20px rgba(154, 170, 212, 0.22),
        0 0 40px rgba(154, 170, 212, 0.08),
        0 4px 15px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(154, 170, 212, 0.2);
    transform: scale(1.06);
}

.back-home-btn:hover svg {
    transform: rotate(-20deg) scale(1.1);
}

.back-home-btn:active {
    transform: scale(0.94);
}

/* Soft glow aura (reuses accept-btn-glow approach) */
.back-home-glow {
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0%,
        rgba(154, 170, 212, 0.15) 25%,
        transparent 50%,
        rgba(154, 170, 212, 0.08) 75%,
        transparent 100%
    );
    animation: acceptGlowRotate 5s linear infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.back-home-btn:hover .back-home-glow {
    opacity: 1;
}

/* Accept Prophecy Button — Mystical Blessing Style */
.comment-submit-btn {
    width: 100%;
    max-width: 100%;
    padding: 16px 28px;
    border-radius: 30px;
    border: 1px solid rgba(154, 170, 212, 0.3);
    background: linear-gradient(135deg, #1a2255 0%, #243072 40%, #1e2a60 100%);
    color: #d4daf0;
    cursor: pointer;
    font-family: 'Prompt', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 1.5px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 0 20px rgba(154, 170, 212, 0.15),
        0 0 60px rgba(154, 170, 212, 0.08),
        0 4px 15px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(154, 170, 212, 0.15);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    animation: acceptBtnPulse 3s ease-in-out infinite;
    z-index: 1;
}

/* Pulsing glow aura */
.accept-btn-glow {
    position: absolute;
    inset: -3px;
    border-radius: 32px;
    background: linear-gradient(135deg, rgba(154,170,212,0.4), rgba(120,140,200,0.1), rgba(180,190,230,0.4));
    background-size: 200% 200%;
    animation: acceptGlowRotate 4s linear infinite;
    z-index: -1;
    opacity: 0.5;
    filter: blur(2px);
    transition: opacity 0.4s ease;
}

/* Floating sparkles */
.accept-btn-sparkles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    border-radius: 30px;
}

.accept-sparkle {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(200, 210, 240, 0.8);
    box-shadow: 0 0 4px rgba(180, 195, 235, 0.6);
    animation: acceptSparkleFloat 3s ease-in-out infinite;
    opacity: 0;
}
.accept-sparkle:nth-child(1) { left: 12%; top: 30%; animation-delay: 0s; animation-duration: 2.8s; }
.accept-sparkle:nth-child(2) { left: 30%; top: 60%; animation-delay: 0.6s; animation-duration: 3.2s; }
.accept-sparkle:nth-child(3) { left: 55%; top: 25%; animation-delay: 1.2s; animation-duration: 2.5s; }
.accept-sparkle:nth-child(4) { left: 75%; top: 55%; animation-delay: 0.3s; animation-duration: 3.5s; }
.accept-sparkle:nth-child(5) { left: 88%; top: 35%; animation-delay: 1.8s; animation-duration: 2.9s; }
.accept-sparkle:nth-child(6) { left: 45%; top: 70%; animation-delay: 2.2s; animation-duration: 3.1s; }

/* Icon */
.accept-btn-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    filter: drop-shadow(0 0 3px rgba(154, 170, 212, 0.4));
    animation: acceptIconSpin 12s linear infinite;
}

.comment-submit-btn svg:not(.accept-btn-icon) {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Shimmer sweep */
.comment-submit-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(180, 195, 235, 0.15), rgba(200, 215, 245, 0.25), rgba(180, 195, 235, 0.15), transparent);
    animation: acceptShimmer 4s ease-in-out infinite;
    z-index: 1;
}

/* Star trail on hover */
.comment-submit-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(180, 195, 235, 0.3), transparent 70%);
    transform: translate(-50%, -50%);
    transition: width 0.5s ease, height 0.5s ease, opacity 0.5s ease;
    opacity: 0;
    z-index: 0;
}

.comment-submit-btn:hover::after {
    width: 200%;
    height: 300%;
    opacity: 1;
}

.comment-submit-btn:hover {
    border-color: rgba(154, 170, 212, 0.6);
    background: linear-gradient(135deg, #1e2a60 0%, #2d3d8a 40%, #243072 100%);
    color: #e8ecf8;
    transform: translateY(-3px);
    box-shadow:
        0 0 30px rgba(154, 170, 212, 0.3),
        0 0 80px rgba(154, 170, 212, 0.12),
        0 8px 30px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(200, 210, 240, 0.2);
    animation: none;
}
.comment-submit-btn:hover .accept-btn-glow {
    opacity: 0.9;
}
.comment-submit-btn:hover .accept-sparkle {
    animation-duration: 1.5s !important;
}
.comment-submit-btn:hover .accept-btn-icon {
    filter: drop-shadow(0 0 6px rgba(180, 195, 235, 0.7));
}

/* Click effect — blessing burst */
.comment-submit-btn:active {
    transform: translateY(-1px) scale(0.97);
    box-shadow:
        0 0 50px rgba(154, 170, 212, 0.5),
        0 0 100px rgba(154, 170, 212, 0.2),
        0 2px 10px rgba(0, 0, 0, 0.2);
    background: linear-gradient(135deg, #243072 0%, #3a4fa0 40%, #2d3d8a 100%);
    border-color: rgba(180, 195, 235, 0.8);
    color: #fff;
    transition: all 0.1s ease;
}

.comment-submit-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    animation: none;
    border-color: rgba(154, 170, 212, 0.1);
}
.comment-submit-btn:disabled .accept-btn-glow,
.comment-submit-btn:disabled .accept-btn-sparkles {
    display: none;
}
.comment-submit-btn:disabled::before,
.comment-submit-btn:disabled::after {
    display: none;
}
.comment-submit-btn:disabled .accept-btn-icon {
    animation: none;
    filter: none;
}

.comment-submit-btn.success {
    background: linear-gradient(135deg, #1a3a2a 0%, #2a5a3a 40%, #1e4a30 100%);
    border-color: rgba(76, 175, 80, 0.5);
    box-shadow: 0 0 30px rgba(76, 175, 80, 0.3), 0 0 60px rgba(76, 175, 80, 0.1);
    animation: acceptSuccessPulse 0.6s ease;
}
.comment-submit-btn.success .accept-btn-glow {
    background: linear-gradient(135deg, rgba(76,175,80,0.4), rgba(40,120,50,0.1), rgba(100,200,100,0.4));
}

/* Keyframes */
@keyframes acceptBtnPulse {
    0%, 100% { box-shadow: 0 0 20px rgba(154,170,212,0.15), 0 0 60px rgba(154,170,212,0.08), 0 4px 15px rgba(0,0,0,0.3), inset 0 1px 0 rgba(154,170,212,0.15); }
    50% { box-shadow: 0 0 25px rgba(154,170,212,0.25), 0 0 70px rgba(154,170,212,0.12), 0 4px 20px rgba(0,0,0,0.3), inset 0 1px 0 rgba(154,170,212,0.2); }
}

@keyframes acceptGlowRotate {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes acceptSparkleFloat {
    0%, 100% { opacity: 0; transform: translateY(0) scale(0.5); }
    20% { opacity: 0.8; }
    50% { opacity: 1; transform: translateY(-8px) scale(1); }
    80% { opacity: 0.6; }
}

@keyframes acceptShimmer {
    0%, 100% { left: -60%; opacity: 0; }
    40% { opacity: 1; }
    60% { opacity: 1; }
    100% { left: 120%; opacity: 0; }
}

@keyframes acceptIconSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes acceptSuccessPulse {
    0% { transform: scale(1); }
    30% { transform: scale(1.06); }
    60% { transform: scale(0.98); }
    100% { transform: scale(1); }
}

/* Mobile: slightly adjusted accept button */
@media (max-width: 768px) {
    .comment-submit-btn {
        padding: 14px 20px;
        letter-spacing: 0.5px;
        font-size: 0.95rem;
    }
    .accept-btn-icon {
        width: 20px;
        height: 20px;
    }
}

/* Comments Button (Bottom Left) */
/* Social Button - Floating CTA */
.comments-btn {
    position: fixed;
    bottom: 20px;
    left: 20px;
    height: 46px;
    border-radius: 23px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 16px 0 13px;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 9999;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    box-shadow:
        0 4px 15px rgba(99, 102, 241, 0.4),
        0 1px 3px rgba(0, 0, 0, 0.2);
    overflow: visible;
    animation: socialBtnEntrance 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes socialBtnEntrance {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.8);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Glow ring behind button */
.comments-btn-glow {
    position: absolute;
    inset: -3px;
    border-radius: 26px;
    background: linear-gradient(135deg, #6366f1, #a855f7, #ec4899, #6366f1);
    background-size: 300% 300%;
    animation: socialGlow 4s ease-in-out infinite;
    opacity: 0.5;
    z-index: -1;
    filter: blur(8px);
}

@keyframes socialGlow {
    0%, 100% { background-position: 0% 50%; opacity: 0.4; }
    50% { background-position: 100% 50%; opacity: 0.7; }
}

.comments-btn:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow:
        0 8px 25px rgba(99, 102, 241, 0.5),
        0 2px 6px rgba(0, 0, 0, 0.2);
}

.comments-btn:hover .comments-btn-glow {
    opacity: 0.8;
}

.comments-btn:active {
    transform: translateY(0) scale(0.97);
    box-shadow:
        0 2px 8px rgba(99, 102, 241, 0.4),
        0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Icon container */
.comments-btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.comments-btn-icon svg {
    width: 20px;
    height: 20px;
    color: #fff;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}

/* Label text */
.comments-btn-label {
    font-family: 'Prompt', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.02em;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* Notification badge */
.comments-count {
    position: absolute;
    top: -6px;
    right: -4px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    background: #ef4444;
    color: #fff;
    border-radius: 11px;
    font-family: 'Prompt', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.5);
    border: 2px solid rgba(13, 19, 51, 0.9);
    animation: badgePop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes badgePop {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}

.comments-count.show {
    display: flex;
}

/* Mobile: compact circle button (icon only) */
@media (max-width: 480px) {
    .comments-btn {
        height: 40px;
        width: 40px;
        border-radius: 50%;
        padding: 0;
        justify-content: center;
        bottom: 14px;
        left: 14px;
    }
    .comments-btn-label {
        display: none;
    }
    .comments-btn-glow {
        border-radius: 50%;
    }
    .comments-btn-icon {
        width: 20px;
        height: 20px;
    }
    .comments-btn-icon svg {
        width: 18px;
        height: 18px;
    }
    .comments-count {
        top: -5px;
        right: -5px;
        min-width: 18px;
        height: 18px;
        font-size: 0.65rem;
        padding: 0 4px;
        border-radius: 9px;
    }
}

/* Comments Panel */
.comments-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.25);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.comments-overlay.show {
    opacity: 1;
    visibility: visible;
}

.comments-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: 500px;
    height: 100vh;
    height: 100dvh;
    background: linear-gradient(180deg, #060A1F 0%, #0a0e27 30%, #0d1333 60%, #080c25 100%);
    border-radius: 0;
    z-index: 10001;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.3);
}

.comments-panel::before {
    content: '';
    position: absolute;
    width: 1px;
    height: 1px;
    top: 0;
    left: 0;
    box-shadow:
        15px 60px 0 0 rgba(255,255,255,0.5),
        48px 120px 0 0 rgba(255,255,255,0.2),
        82px 200px 0 0 rgba(255,255,255,0.4),
        120px 280px 0 0.5px rgba(200,216,240,0.35),
        155px 350px 0 0 rgba(255,255,255,0.3),
        190px 430px 0 0 rgba(255,255,255,0.5),
        218px 500px 0 0 rgba(255,255,255,0.2),
        250px 90px 0 0.5px rgba(200,216,240,0.4),
        285px 160px 0 0 rgba(255,255,255,0.35),
        310px 240px 0 0 rgba(255,255,255,0.3),
        340px 320px 0 0 rgba(255,255,255,0.5),
        370px 400px 0 0 rgba(255,255,255,0.2),
        395px 480px 0 0.5px rgba(200,216,240,0.35),
        30px 550px 0 0 rgba(255,255,255,0.3),
        70px 620px 0 0.5px rgba(200,216,240,0.4),
        110px 700px 0 0 rgba(255,255,255,0.2),
        150px 770px 0 0 rgba(255,255,255,0.45),
        200px 150px 0 0 rgba(255,255,255,0.3),
        240px 600px 0 0 rgba(255,255,255,0.35),
        280px 680px 0 0 rgba(255,255,255,0.2),
        320px 750px 0 0.5px rgba(200,216,240,0.35),
        360px 180px 0 0 rgba(255,255,255,0.4),
        400px 260px 0 0 rgba(255,255,255,0.3),
        55px 380px 0 0 rgba(255,255,255,0.35),
        135px 460px 0 0 rgba(255,255,255,0.2),
        225px 540px 0 0.5px rgba(200,216,240,0.3),
        305px 100px 0 0 rgba(255,255,255,0.45),
        420px 340px 0 0 rgba(255,255,255,0.35),
        445px 570px 0 0 rgba(255,255,255,0.2),
        470px 130px 0 0 rgba(255,255,255,0.4),
        25px 830px 0 0 rgba(255,255,255,0.3),
        95px 880px 0 0.5px rgba(200,216,240,0.35),
        175px 930px 0 0 rgba(255,255,255,0.25),
        265px 850px 0 0 rgba(255,255,255,0.4),
        345px 900px 0 0 rgba(255,255,255,0.2),
        415px 870px 0 0.5px rgba(200,216,240,0.3);
    animation: headerStarsTwinkle 4s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
}

.comments-panel.show {
    transform: translateY(0);
}

.comments-panel-header {
    padding: 12px 15px;
    border-bottom: 1px solid rgba(140, 160, 200, 0.06);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: transparent;
    position: relative;
    overflow: hidden;
    transition: padding 0.25s ease;
}

/* Header stars */
.comments-panel-header::before {
    content: '';
    position: absolute;
    width: 1px;
    height: 1px;
    top: 0;
    left: 0;
    box-shadow:
        15px 8px 0 0 rgba(255,255,255,0.7),
        48px 5px 0 0 rgba(255,255,255,0.3),
        82px 18px 0 0 rgba(255,255,255,0.6),
        120px 10px 0 0.5px rgba(200,216,240,0.5),
        155px 22px 0 0 rgba(255,255,255,0.4),
        190px 6px 0 0 rgba(255,255,255,0.7),
        218px 16px 0 0 rgba(255,255,255,0.3),
        250px 3px 0 0.5px rgba(200,216,240,0.6),
        285px 20px 0 0 rgba(255,255,255,0.5),
        310px 9px 0 0 rgba(255,255,255,0.4),
        340px 15px 0 0 rgba(255,255,255,0.7),
        370px 4px 0 0 rgba(255,255,255,0.3),
        395px 19px 0 0.5px rgba(200,216,240,0.5),
        30px 30px 0 0 rgba(255,255,255,0.4),
        70px 35px 0 0.5px rgba(200,216,240,0.6),
        110px 42px 0 0 rgba(255,255,255,0.3),
        150px 38px 0 0 rgba(255,255,255,0.6),
        200px 45px 0 0 rgba(255,255,255,0.4),
        240px 32px 0 0 rgba(255,255,255,0.5),
        280px 48px 0 0 rgba(255,255,255,0.3),
        320px 40px 0 0.5px rgba(200,216,240,0.5),
        360px 33px 0 0 rgba(255,255,255,0.6),
        400px 50px 0 0 rgba(255,255,255,0.4),
        55px 55px 0 0 rgba(255,255,255,0.5),
        135px 58px 0 0 rgba(255,255,255,0.3),
        225px 52px 0 0.5px rgba(200,216,240,0.4),
        305px 56px 0 0 rgba(255,255,255,0.6),
        420px 12px 0 0 rgba(255,255,255,0.5),
        445px 38px 0 0 rgba(255,255,255,0.3),
        470px 7px 0 0 rgba(255,255,255,0.6);
    animation: headerStarsTwinkle 4s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
}

/* Header shooting stars — spawned by JS inside the header */
.header-shooting-star {
    position: absolute;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(200,216,240,0.5) 50%, rgba(255,255,255,0.9) 100%);
    border-radius: 0.5px;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    will-change: transform, opacity;
    animation: headerShootingStar var(--hss-dur, 0.6s) ease-in forwards;
    animation-delay: var(--hss-delay, 0s);
}

@keyframes headerStarsTwinkle {
    0% { opacity: 0.6; }
    100% { opacity: 1; }
}

@keyframes headerShootingStar {
    0% {
        opacity: 0;
        transform: rotate(var(--hss-angle, 140deg)) translateX(0);
    }
    10% {
        opacity: 1;
    }
    70% {
        opacity: 0.5;
    }
    100% {
        opacity: 0;
        transform: rotate(var(--hss-angle, 140deg)) translateX(var(--hss-dist, 120px));
    }
}

.comments-panel-header.collapsed {
    padding: 6px 15px;
}

.comments-panel-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    overflow: hidden;
    position: relative;
    z-index: 1;
    flex: 1;
    text-align: center;
}

.comments-panel-header h3 {
    font-family: 'Prompt', sans-serif;
    font-size: 0.7rem;
    color: rgba(140, 160, 200, 0.5);
    margin: 0;
    font-weight: 400;
    letter-spacing: 0.5px;
    transition: font-size 0.25s ease, opacity 0.25s ease;
}

.comments-panel-header.collapsed h3 {
    font-size: 0.65rem;
}

.comments-panel-user {
    font-family: 'Cormorant Garamond', 'Prompt', serif;
    font-size: 1.4rem;
    color: var(--burgundy);
    font-weight: 600;
    line-height: 1.2;
    max-height: 2em;
    opacity: 1;
    transition: max-height 0.25s ease, opacity 0.2s ease, margin 0.25s ease;
}

.comments-panel-header.collapsed .comments-panel-user {
    max-height: 0;
    opacity: 0;
    margin: 0;
    pointer-events: none;
}

.comments-panel-user.anonymous {
    font-style: italic;
    color: rgba(140, 160, 200, 0.6);
}

.comments-panel-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid rgba(140, 160, 200, 0.25);
    background: rgba(10, 15, 40, 0.4);
    color: var(--burgundy);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    padding: 0;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    position: relative;
    z-index: 1;
}

.comments-panel-header.collapsed .comments-panel-close {
    width: 30px;
    height: 30px;
}

.comments-panel-close svg {
    width: 20px;
    height: 20px;
    stroke-width: 2.5;
    transition: width 0.25s ease, height 0.25s ease;
}

.comments-panel-header.collapsed .comments-panel-close svg {
    width: 16px;
    height: 16px;
}

.comments-panel-close:hover {
    background: var(--burgundy);
    color: white;
    transform: scale(1.1);
}

/* Theme Toggle Button */
.comments-theme-toggle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1.5px solid rgba(140, 160, 200, 0.2);
    background: rgba(10, 15, 40, 0.35);
    color: rgba(192, 200, 224, 0.6);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    padding: 0;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    margin-right: 6px;
}

.comments-theme-toggle:hover {
    background: rgba(140, 160, 200, 0.15);
    color: rgba(192, 200, 224, 0.9);
    transform: scale(1.1);
}

.comments-theme-toggle svg {
    width: 16px;
    height: 16px;
}

/* Default: show sun (switch to light), hide moon */
.theme-icon-dark { display: none; }
.theme-icon-light { display: block; }

/* Light theme: show moon (switch to dark), hide sun */
.comments-panel.light-theme .theme-icon-dark { display: block; }
.comments-panel.light-theme .theme-icon-light { display: none; }

/* ==================== LIGHT THEME ==================== */

/* Panel background */
.comments-panel.light-theme {
    background: linear-gradient(180deg, #eeeaf8 0%, #f0edf6 30%, #f4f2fc 60%, #ece8f5 100%);
    box-shadow: 0 -10px 40px rgba(80, 60, 140, 0.12);
}

/* Light starfield stars */
.comments-panel.light-theme::before {
    box-shadow:
        15px 60px 0 0 rgba(130,110,190,0.2),
        48px 120px 0 0 rgba(130,110,190,0.1),
        82px 200px 0 0 rgba(130,110,190,0.18),
        120px 280px 0 0.5px rgba(130,110,190,0.15),
        155px 350px 0 0 rgba(130,110,190,0.12),
        190px 430px 0 0 rgba(130,110,190,0.2),
        218px 500px 0 0 rgba(130,110,190,0.1),
        250px 90px 0 0.5px rgba(130,110,190,0.18),
        285px 160px 0 0 rgba(130,110,190,0.15),
        310px 240px 0 0 rgba(130,110,190,0.12),
        340px 320px 0 0 rgba(130,110,190,0.2),
        370px 400px 0 0 rgba(130,110,190,0.1),
        395px 480px 0 0.5px rgba(130,110,190,0.15),
        30px 550px 0 0 rgba(130,110,190,0.12),
        70px 620px 0 0.5px rgba(130,110,190,0.18),
        110px 700px 0 0 rgba(130,110,190,0.1),
        150px 770px 0 0 rgba(130,110,190,0.2),
        200px 150px 0 0 rgba(130,110,190,0.12),
        240px 600px 0 0 rgba(130,110,190,0.15),
        280px 680px 0 0 rgba(130,110,190,0.1),
        320px 750px 0 0.5px rgba(130,110,190,0.15),
        360px 180px 0 0 rgba(130,110,190,0.18),
        400px 260px 0 0 rgba(130,110,190,0.12),
        55px 380px 0 0 rgba(130,110,190,0.15),
        135px 460px 0 0 rgba(130,110,190,0.1),
        225px 540px 0 0.5px rgba(130,110,190,0.12),
        305px 100px 0 0 rgba(130,110,190,0.2),
        420px 340px 0 0 rgba(130,110,190,0.15),
        445px 570px 0 0 rgba(130,110,190,0.1),
        470px 130px 0 0 rgba(130,110,190,0.18),
        25px 830px 0 0 rgba(130,110,190,0.12),
        95px 880px 0 0.5px rgba(130,110,190,0.15),
        175px 930px 0 0 rgba(130,110,190,0.1),
        265px 850px 0 0 rgba(130,110,190,0.18),
        345px 900px 0 0 rgba(130,110,190,0.1),
        415px 870px 0 0.5px rgba(130,110,190,0.12);
}

/* Header */
.comments-panel.light-theme .comments-panel-header {
    border-bottom-color: rgba(100, 80, 160, 0.08);
}

/* Header stars — muted purple dots */
.comments-panel.light-theme .comments-panel-header::before {
    box-shadow:
        15px 8px 0 0 rgba(130,110,190,0.35),
        48px 5px 0 0 rgba(130,110,190,0.15),
        82px 18px 0 0 rgba(130,110,190,0.3),
        120px 10px 0 0.5px rgba(110,90,180,0.25),
        155px 22px 0 0 rgba(130,110,190,0.2),
        190px 6px 0 0 rgba(130,110,190,0.35),
        218px 16px 0 0 rgba(130,110,190,0.15),
        250px 3px 0 0.5px rgba(110,90,180,0.3),
        285px 20px 0 0 rgba(130,110,190,0.25),
        310px 9px 0 0 rgba(130,110,190,0.2),
        340px 15px 0 0 rgba(130,110,190,0.35),
        370px 4px 0 0 rgba(130,110,190,0.15),
        395px 19px 0 0.5px rgba(110,90,180,0.25),
        30px 30px 0 0 rgba(130,110,190,0.2),
        70px 35px 0 0.5px rgba(110,90,180,0.3),
        110px 42px 0 0 rgba(130,110,190,0.15),
        150px 38px 0 0 rgba(130,110,190,0.3),
        200px 45px 0 0 rgba(130,110,190,0.2),
        240px 32px 0 0 rgba(130,110,190,0.25),
        280px 48px 0 0 rgba(130,110,190,0.15),
        320px 40px 0 0.5px rgba(110,90,180,0.25),
        360px 33px 0 0 rgba(130,110,190,0.3),
        400px 50px 0 0 rgba(130,110,190,0.2),
        55px 55px 0 0 rgba(130,110,190,0.25),
        135px 58px 0 0 rgba(130,110,190,0.15),
        225px 52px 0 0.5px rgba(110,90,180,0.2),
        305px 56px 0 0 rgba(130,110,190,0.3),
        420px 12px 0 0 rgba(130,110,190,0.25),
        445px 38px 0 0 rgba(130,110,190,0.15),
        470px 7px 0 0 rgba(130,110,190,0.3);
}

/* Header shooting stars — purple tint */
.comments-panel.light-theme .header-shooting-star {
    background: linear-gradient(90deg, transparent 0%, rgba(130,110,190,0.4) 50%, rgba(100,80,170,0.7) 100%);
}

/* Header text */
.comments-panel.light-theme .comments-panel-header h3 {
    color: rgba(60, 50, 100, 0.7);
}

.comments-panel.light-theme .comments-panel-user {
    color: #2d2850;
}

.comments-panel.light-theme .comments-panel-user.anonymous {
    color: rgba(60, 50, 100, 0.65);
}

/* Header buttons */
.comments-panel.light-theme .comments-theme-toggle {
    border-color: rgba(100, 80, 160, 0.25);
    background: rgba(240, 235, 255, 0.6);
    color: rgba(60, 50, 100, 0.7);
}

.comments-panel.light-theme .comments-theme-toggle:hover {
    background: rgba(100, 80, 160, 0.1);
    color: #3a3560;
}

.comments-panel.light-theme .comments-panel-close {
    border-color: rgba(100, 80, 160, 0.2);
    background: rgba(240, 235, 255, 0.5);
    color: #3a3560;
}

.comments-panel.light-theme .comments-panel-close:hover {
    background: #6B5BA8;
    color: white;
}

/* Tabs */
.comments-panel.light-theme .comments-tabs {
    background: rgba(240, 238, 248, 0.6);
    border-bottom-color: rgba(100, 80, 160, 0.08);
}

.comments-panel.light-theme .comments-tab {
    color: rgba(60, 50, 100, 0.65);
}

.comments-panel.light-theme .comments-tab:hover {
    color: #3a3560;
}

.comments-panel.light-theme .comments-tab.active {
    color: #3a3560;
}

.comments-panel.light-theme .comments-tab.active::after {
    background: #6B5BA8;
}

/* Activity icon tab light theme */
.comments-panel.light-theme .comments-tab-activity svg {
    color: #5a4d8a;
}

/* Friends CTA light theme */
.comments-panel.light-theme .friends-cta-icon {
    color: rgba(100, 80, 160, 0.35);
}

/* Comment cards */
.comments-panel.light-theme .comment-card {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(100, 80, 160, 0.1);
    box-shadow: 0 2px 8px rgba(100, 80, 160, 0.06);
}

.comments-panel.light-theme .comment-card.expanded {
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 8px 30px rgba(100, 80, 160, 0.12);
}

.comments-panel.light-theme .comment-card-name {
    color: #3a3560;
}

.comments-panel.light-theme .comment-card-text {
    color: #3d3860;
}

.comments-panel.light-theme .comment-card-text::before {
    color: rgba(80, 60, 140, 0.4);
}

.comments-panel.light-theme .comment-card-date {
    color: rgba(60, 50, 100, 0.6);
}

.comments-panel.light-theme .comment-card-tarot {
    background: rgba(100, 80, 160, 0.08);
    color: #5a4f90;
}

/* Avatars */
.comments-panel.light-theme .comment-avatar {
    border-color: rgba(100, 80, 160, 0.15);
}

.comments-panel.light-theme .comment-avatar-default {
    background: rgba(100, 80, 160, 0.1);
    color: rgba(80, 60, 140, 0.6);
}

/* Feed cards */
.comments-panel.light-theme .feed-card {
    border-bottom-color: rgba(100, 80, 160, 0.08);
}

.comments-panel.light-theme .feed-card:hover:not(.expanded) {
    background: rgba(100, 80, 160, 0.03);
}

.comments-panel.light-theme .feed-card.expanded {
    background: rgba(100, 80, 160, 0.04);
    border-left-color: rgba(107, 91, 168, 0.4);
    box-shadow: inset 0 1px 0 rgba(100, 80, 160, 0.06), inset 0 -1px 0 rgba(100, 80, 160, 0.06);
}

.comments-panel.light-theme .feed-card-name {
    color: #3a3560;
}

.comments-panel.light-theme .feed-card-meta {
    color: rgba(60, 50, 100, 0.7);
}

.comments-panel.light-theme .feed-card-meta strong {
    color: rgba(50, 40, 90, 0.85);
}

.comments-panel.light-theme .feed-card-date {
    color: rgba(60, 50, 100, 0.55);
}

.comments-panel.light-theme .feed-card-date::before {
    color: rgba(60, 50, 100, 0.45);
}

.comments-panel.light-theme .feed-card-comment {
    color: #3d3860;
}

.comments-panel.light-theme .feed-card-chevron {
    color: rgba(60, 50, 100, 0.45);
}

.comments-panel.light-theme .feed-card-quote {
    color: rgba(50, 40, 90, 0.85);
    border-left-color: rgba(100, 80, 160, 0.35);
    background: rgba(100, 80, 160, 0.06);
}

.comments-panel.light-theme .feed-card-interpretation {
    color: rgba(50, 40, 90, 0.8);
}

.comments-panel.light-theme .feed-card-reply-count {
    background: rgba(100, 80, 160, 0.25);
    color: #4a4570;
    border-color: rgba(255, 255, 255, 0.8);
}

.comments-panel.light-theme .feed-card-reply-count.unread-replies {
    background: rgba(220, 60, 60, 0.7);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.9);
}

.comments-panel.light-theme .feed-card-header .comment-avatar {
    border-color: rgba(100, 80, 160, 0.12);
}

.comments-panel.light-theme .feed-card-header .comment-avatar-default {
    border-color: rgba(100, 80, 160, 0.08);
}

/* Reply chat bubbles */
.comments-panel.light-theme .reply-bubble-left .reply-bubble {
    background: rgba(240, 238, 248, 0.8);
}

.comments-panel.light-theme .reply-bubble-right .reply-bubble {
    background: rgba(100, 80, 160, 0.08);
}

.comments-panel.light-theme .reply-self .reply-bubble {
    background: rgba(100, 120, 200, 0.12);
    border-color: rgba(100, 120, 200, 0.15);
}

.comments-panel.light-theme .reply-original {
    border-bottom-color: rgba(100, 80, 160, 0.08);
}

.comments-panel.light-theme .reply-original .reply-bubble {
    background: rgba(245, 243, 252, 0.95);
    border-color: rgba(100, 80, 160, 0.12);
}

.comments-panel.light-theme .reply-original.reply-self .reply-bubble {
    background: rgba(245, 243, 252, 0.95);
    border-color: rgba(100, 120, 200, 0.2);
}

.comments-panel.light-theme .reply-name {
    color: #3a3560;
}

.comments-panel.light-theme .reply-text {
    color: #3d3860;
}

.comments-panel.light-theme .reply-date {
    color: rgba(60, 50, 100, 0.6);
}

.comments-panel.light-theme .reply-input {
    background: rgba(245, 243, 252, 0.9);
    color: #3a3560;
    border-color: rgba(100, 80, 160, 0.2);
}

.comments-panel.light-theme .reply-input::placeholder {
    color: rgba(60, 50, 100, 0.5);
}

.comments-panel.light-theme .reply-input:focus {
    border-color: #6B5BA8;
}

.comments-panel.light-theme .reply-submit-btn {
    background: #6B5BA8;
}

.comments-panel.light-theme .reply-submit-btn:hover {
    background: #5a4a98;
}

/* Activity timeline */
.comments-panel.light-theme .activity-card::before {
    background: linear-gradient(180deg, rgba(100, 80, 160, 0.15) 0%, rgba(100, 80, 160, 0.05) 100%);
}

.comments-panel.light-theme .activity-timeline-dot {
    background: rgba(100, 80, 160, 0.1);
    border-color: rgba(100, 80, 160, 0.2);
}

.comments-panel.light-theme .activity-card[data-type="draw"] .activity-timeline-dot {
    background: rgba(130, 100, 220, 0.12);
    border-color: rgba(130, 100, 220, 0.3);
    color: rgba(110, 80, 200, 0.8);
    box-shadow: 0 0 8px rgba(130, 100, 220, 0.1);
}

.comments-panel.light-theme .activity-card[data-type="comment"] .activity-timeline-dot {
    background: rgba(60, 120, 210, 0.12);
    border-color: rgba(60, 120, 210, 0.3);
    color: rgba(50, 100, 200, 0.8);
    box-shadow: 0 0 8px rgba(60, 120, 210, 0.1);
}

.comments-panel.light-theme .activity-card[data-type="replied"] .activity-timeline-dot {
    background: rgba(50, 170, 160, 0.12);
    border-color: rgba(50, 170, 160, 0.3);
    color: rgba(40, 150, 140, 0.8);
    box-shadow: 0 0 8px rgba(50, 170, 160, 0.1);
}

.comments-panel.light-theme .activity-card-content {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(248, 246, 255, 0.2) 100%);
    border-color: rgba(100, 80, 160, 0.08);
}

.comments-panel.light-theme .activity-card:hover .activity-card-content {
    border-color: rgba(100, 80, 160, 0.15);
}

.comments-panel.light-theme .activity-card.expanded .activity-card-content {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(248, 246, 255, 0.4) 100%);
    border-color: rgba(100, 80, 160, 0.12);
}

.comments-panel.light-theme .activity-chevron {
    color: rgba(100, 80, 160, 0.25);
}

.comments-panel.light-theme .activity-card.expanded .activity-chevron {
    color: rgba(100, 80, 160, 0.5);
}

.comments-panel.light-theme .activity-action {
    color: rgba(60, 50, 100, 0.85);
}

.comments-panel.light-theme .activity-card[data-type="draw"] .activity-action {
    color: rgba(110, 80, 200, 0.85);
}

.comments-panel.light-theme .activity-card[data-type="comment"] .activity-action {
    color: rgba(50, 100, 200, 0.85);
}

.comments-panel.light-theme .activity-card[data-type="replied"] .activity-action {
    color: rgba(40, 150, 140, 0.85);
}

.comments-panel.light-theme .activity-date {
    color: rgba(60, 50, 100, 0.6);
}

.comments-panel.light-theme .activity-card.expanded .activity-card-detail {
    border-top-color: rgba(100, 80, 160, 0.06);
}

.comments-panel.light-theme .activity-card-image {
    border-color: rgba(100, 80, 160, 0.1);
}

.comments-panel.light-theme .activity-card-name {
    color: rgba(60, 50, 100, 0.85);
}

.comments-panel.light-theme .activity-card-comment {
    color: rgba(50, 40, 90, 0.75);
}

/* Empty states and misc */
.comments-panel.light-theme .comments-empty {
    color: #5a4f90;
}

.comments-panel.light-theme .comments-load-more-btn {
    border-color: #6B5BA8;
    color: #6B5BA8;
}

.comments-panel.light-theme .comments-load-more-btn:hover {
    background: #6B5BA8;
    color: white;
}

.comments-panel.light-theme .comments-loading span {
    color: rgba(60, 50, 100, 0.7);
}

/* Related comments in expanded cards */
.comments-panel.light-theme .related-comment-item {
    background: rgba(245, 243, 252, 0.5);
    border-color: rgba(100, 80, 160, 0.08);
}

.comments-panel.light-theme .related-comment-name {
    color: #3a3560;
}

.comments-panel.light-theme .related-comment-text {
    color: #3d3860;
}

.comments-panel.light-theme .related-comment-date {
    color: rgba(60, 50, 100, 0.6);
}

/* Scrollbar for light theme */
.comments-panel.light-theme .comments-list::-webkit-scrollbar-track {
    background: rgba(240, 238, 248, 0.5);
}

.comments-panel.light-theme .comments-list::-webkit-scrollbar-thumb {
    background: rgba(100, 80, 160, 0.15);
}

.comments-panel.light-theme .comments-list::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 80, 160, 0.25);
}

/* Comments Tabs */
.comments-tabs {
    display: flex;
    gap: 0;
    padding: 0 15px;
    border-bottom: 1px solid rgba(140, 160, 200, 0.1);
    background: rgba(10, 15, 40, 0.25);
    transition: padding 0.25s ease;
    position: relative;
    z-index: 1;
}

.comments-tabs.collapsed {
    padding: 0 10px;
}

.comments-tab {
    flex: 1;
    padding: 8px 10px;
    border: none;
    background: transparent;
    font-family: 'Prompt', sans-serif;
    font-size: 0.8rem;
    font-weight: 400;
    color: rgba(140, 160, 200, 0.5);
    cursor: pointer;
    position: relative;
    transition: all 0.25s ease;
}

.comments-tabs.collapsed .comments-tab {
    padding: 5px 8px;
    font-size: 0.72rem;
}

.comments-tab:hover {
    color: var(--burgundy);
}

.comments-tab.active {
    color: var(--burgundy);
    font-weight: 500;
}

.comments-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 2px;
    background: var(--burgundy);
    border-radius: 2px;
}

/* Tab notification badge */
.tab-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: rgba(154, 170, 212, 0.85);
    color: #0d1333;
    font-family: 'Prompt', sans-serif;
    font-size: 0.55rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgba(13, 19, 51, 0.8);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    z-index: 2;
}

.tab-badge.show {
    opacity: 1;
    transform: scale(1);
}

/* Light theme tab badge */
.comments-panel.light-theme .tab-badge {
    background: rgba(100, 80, 160, 0.8);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.8);
}

/* Hide "Me" tab by default - shown by JS if user has comments */
.comments-tab[data-tab="me"] {
    display: none;
}

/* Activity tab — icon only, pushed to right */
.comments-tab-activity {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.comments-tab-activity svg {
    width: 16px;
    height: 16px;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.comments-tab-activity:hover svg,
.comments-tab-activity.active svg {
    opacity: 1;
}

.comments-tab-activity.active::after {
    width: 20px;
}

/* Social loading CTA — shown while waiting for FB SDK to confirm login */
.social-loading-cta {
    padding: 60px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex: 1;
    min-height: 0;
}

.social-loading-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(154, 170, 212, 0.15);
    border-top-color: rgba(154, 170, 212, 0.6);
    border-radius: 50%;
    animation: socialLoadingSpin 0.8s linear infinite;
}

@keyframes socialLoadingSpin {
    to { transform: rotate(360deg); }
}

.social-loading-cta .comments-empty-text {
    font-size: 0.8rem;
    color: rgba(154, 170, 212, 0.5);
}

.comments-panel.light-theme .social-loading-spinner {
    border-color: rgba(100, 80, 160, 0.12);
    border-top-color: rgba(100, 80, 160, 0.5);
}

.comments-panel.light-theme .social-loading-cta .comments-empty-text {
    color: rgba(50, 40, 90, 0.5);
}

/* Friends tab */
.friends-cta {
    padding: 40px 20px;
    /* Cancel parent .comments-list padding so CTA is consistent across all tabs */
    margin: -15px -15px -15px -25px;
    padding: 40px 20px;
}

.comments-list.feed-mode .friends-cta {
    margin: 0;
}

.friends-cta-icon {
    margin-bottom: 12px;
    color: rgba(154, 170, 212, 0.4);
}

.friends-cta-icon svg {
    width: 48px;
    height: 48px;
}

.friends-invite-btn,
.friends-login-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 10px 24px;
    border: none;
    border-radius: 20px;
    font-family: 'Prompt', sans-serif;
    font-size: 0.85rem;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.2s ease;
}

.friends-invite-btn {
    background: linear-gradient(135deg, #0084FF 0%, #00C6FF 100%);
    color: #fff;
    box-shadow: 0 3px 12px rgba(0, 132, 255, 0.3);
}

.friends-invite-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 18px rgba(0, 132, 255, 0.4);
}

.friends-invite-btn svg {
    width: 18px;
    height: 18px;
}

.friends-login-btn {
    background: #1877F2;
    color: #fff;
    box-shadow: 0 3px 12px rgba(24, 119, 242, 0.3);
}

.friends-login-btn:hover {
    background: #166FE5;
    transform: translateY(-1px);
    box-shadow: 0 5px 18px rgba(24, 119, 242, 0.4);
}

.friends-login-btn svg {
    width: 16px;
    height: 16px;
}

.comments-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: visible;
    padding: 15px 15px 15px 25px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: relative;
    z-index: 1;
}

.comments-loading {
    text-align: center;
    padding: 50px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    box-sizing: border-box;
    flex: 1;
    /* compensate asymmetric .comments-list padding (25px left, 15px right) */
    width: calc(100% + 10px);
    margin-left: -5px;
    color: var(--burgundy);
    font-family: 'Prompt', sans-serif;
    font-weight: 300;
}

/* In feed-mode padding is 0, no compensation needed */
.comments-list.feed-mode .comments-loading {
    width: 100%;
    margin-left: 0;
}

/* Hide replies section in mycard tab when not logged in */
.comments-list.mycard-mode .feed-card-replies-section {
    display: none;
}

/* Tarot Mystic Loader */
.tarot-loader {
    position: relative;
    width: 64px;
    height: 64px;
}

/* Outer mystic ring — slowly rotating dashed circle */
.tarot-loader-ring {
    position: absolute;
    inset: 0;
    border: 1.5px dashed rgba(154, 170, 212, 0.3);
    border-radius: 50%;
    animation: tarotRingSpin 8s linear infinite;
}

/* Inner ring — counter-rotating with dotted pattern */
.tarot-loader-ring-inner {
    position: absolute;
    inset: 8px;
    border: 1px dotted rgba(154, 170, 212, 0.2);
    border-radius: 50%;
    animation: tarotRingSpin 6s linear infinite reverse;
}

/* Center star symbol — pulsing glow */
.tarot-loader-star {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    color: rgba(154, 170, 212, 0.85);
    text-shadow: 0 0 12px rgba(154, 170, 212, 0.6), 0 0 24px rgba(154, 170, 212, 0.2);
    animation: tarotStarPulse 2.5s ease-in-out infinite;
}

/* Orbiting particles */
.tarot-loader-orbit {
    position: absolute;
    inset: 0;
    animation: tarotRingSpin 3s linear infinite;
}

.tarot-loader-orbit::before {
    content: '✦';
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 8px;
    color: rgba(154, 170, 212, 0.7);
    text-shadow: 0 0 6px rgba(154, 170, 212, 0.5);
}

.tarot-loader-orbit:nth-child(4) {
    animation-delay: -1s;
}

.tarot-loader-orbit:nth-child(5) {
    animation-delay: -2s;
}

/* Loading text with shimmer */
.tarot-loader-text {
    font-size: 0.8rem;
    font-weight: 300;
    letter-spacing: 0.5px;
    background: linear-gradient(
        90deg,
        rgba(154, 170, 212, 0.4) 0%,
        rgba(192, 200, 224, 0.9) 50%,
        rgba(154, 170, 212, 0.4) 100%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: tarotTextShimmer 2.5s ease-in-out infinite;
}

@keyframes tarotRingSpin {
    to { transform: rotate(360deg); }
}

@keyframes tarotStarPulse {
    0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(0.9); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
}

@keyframes tarotTextShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Light theme overrides */
.comments-panel.light-theme .tarot-loader-ring {
    border-color: rgba(100, 80, 160, 0.2);
}

.comments-panel.light-theme .tarot-loader-ring-inner {
    border-color: rgba(100, 80, 160, 0.12);
}

.comments-panel.light-theme .tarot-loader-star {
    color: rgba(100, 80, 160, 0.7);
    text-shadow: 0 0 12px rgba(100, 80, 160, 0.3), 0 0 24px rgba(100, 80, 160, 0.1);
}

.comments-panel.light-theme .tarot-loader-orbit::before {
    color: rgba(100, 80, 160, 0.5);
    text-shadow: 0 0 6px rgba(100, 80, 160, 0.3);
}

.comments-panel.light-theme .tarot-loader-text {
    background: linear-gradient(
        90deg,
        rgba(100, 80, 160, 0.3) 0%,
        rgba(80, 60, 140, 0.8) 50%,
        rgba(100, 80, 160, 0.3) 100%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: tarotTextShimmer 2.5s ease-in-out infinite;
}

/* Mini loader for related comments & replies */
.tarot-loader-mini {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
}

.tarot-loader-mini-dot {
    width: 5px;
    height: 5px;
    background: rgba(154, 170, 212, 0.5);
    border-radius: 50%;
    animation: tarotDotBounce 1.4s ease-in-out infinite;
}

.tarot-loader-mini-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.tarot-loader-mini-dot:nth-child(3) {
    animation-delay: 0.4s;
}

.tarot-loader-mini-star {
    font-size: 8px;
    color: rgba(154, 170, 212, 0.6);
    animation: tarotDotBounce 1.4s ease-in-out infinite;
    animation-delay: 0.3s;
}

@keyframes tarotDotBounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.3; }
    40% { transform: scale(1.2); opacity: 1; }
}

/* Comments section titles */
.comments-section-title {
    font-family: 'Cormorant Garamond', 'Prompt', serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--burgundy);
    padding: 5px 0 8px 0;
    opacity: 0.8;
}

.comments-section-title.recent {
    margin-top: 10px;
    padding-top: 15px;
    border-top: 1px dashed rgba(140, 160, 200, 0.2);
}

/* Reply badge for top comments */
.comment-reply-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'Prompt', sans-serif;
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--gold);
    background: rgba(154, 170, 212, 0.1);
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: auto;
}

.comment-card.top-comment {
    border-color: rgba(154, 170, 212, 0.3);
    box-shadow: 0 2px 12px rgba(154, 170, 212, 0.15);
}

.comment-card {
    background: linear-gradient(135deg, #0F1439 0%, #10163A 100%);
    border: 1px solid rgba(140, 160, 200, 0.15);
    border-radius: 12px;
    padding: 15px;
    position: relative;
    box-shadow: 0 2px 8px rgba(140, 160, 200, 0.08);
    animation: fadeInUp 0.4s ease;
    overflow: visible;
}

.comment-card.with-image {
    padding-left: 75px;
    min-height: 115px;
    padding-bottom: 20px;
}

.comment-card-image {
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%) rotate(-8deg);
    width: 70px;
    z-index: 2;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3));
    transition: transform 0.3s ease;
}

.comment-card:hover .comment-card-image {
    transform: translateY(-50%) rotate(-3deg) scale(1.08);
}

.comment-card-image img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.comment-card-content {
    flex: 1;
    min-width: 0;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* New comment highlight animation */
.comment-card.new-comment {
    animation: newCommentPulse 0.5s ease;
    box-shadow: 0 0 0 3px rgba(154, 170, 212, 0.4), 0 4px 15px rgba(140, 160, 200, 0.15);
}

@keyframes newCommentPulse {
    0% {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
        box-shadow: 0 0 0 0 rgba(154, 170, 212, 0.6);
    }
    50% {
        transform: translateY(5px) scale(1.02);
        box-shadow: 0 0 0 6px rgba(154, 170, 212, 0.3);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        box-shadow: 0 0 0 3px rgba(154, 170, 212, 0.4), 0 4px 15px rgba(140, 160, 200, 0.15);
    }
}

/* Navigated card styling */
.comment-card.navigated-card {
    border-left: 3px solid var(--gold);
    animation: fadeInCard 0.3s ease;
}

@keyframes fadeInCard {
    0% {
        opacity: 0;
        transform: scale(0.95);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Fade out animation for navigated cards */
.comment-card.fading-out {
    animation: fadeOutCard 0.3s ease forwards;
}

@keyframes fadeOutCard {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.95);
    }
}

.comment-card::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border: 1px dashed rgba(140, 160, 200, 0.1);
    border-radius: 8px;
    pointer-events: none;
}

.comment-card.with-image::before {
    left: 65px;
}

/* Fix dashed border height when expanded - keep it at original card size */
.comment-card.expanded::before {
    bottom: auto;
    height: 95px;
}

/* Profile avatars */
.comment-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
    border: 1.5px solid rgba(140, 160, 200, 0.2);
}

.comment-avatar-default {
    background: rgba(140, 160, 200, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(140, 160, 200, 0.45);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid rgba(140, 160, 200, 0.15);
}

.comment-avatar-default svg {
    width: 18px;
    height: 18px;
}

.comment-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.comment-card-author {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.comment-card-name {
    font-family: 'Cormorant Garamond', 'Prompt', serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--burgundy);
    font-style: italic;
}

.comment-card-tarot {
    display: inline-block;
    background: rgba(140, 160, 200, 0.1);
    padding: 2px 8px;
    border-radius: 10px;
    font-family: 'Prompt', sans-serif;
    font-size: 0.65rem;
    color: var(--burgundy);
}

.comment-card-date {
    font-family: 'Prompt', sans-serif;
    font-size: 0.6rem;
    color: rgba(140, 160, 200, 0.4);
}

.comment-card-text {
    font-family: 'Prompt', sans-serif;
    font-weight: 300;
    font-size: 0.9rem;
    color: #B8C0D8;
    line-height: 1.4;
    position: relative;
    padding-left: 15px;
    margin-bottom: 6px;
    /* Limit to 2 lines with ellipsis */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.comment-card-text::before {
    content: '"';
    position: absolute;
    left: 0;
    top: -5px;
    font-family: 'Cormorant Garamond', 'Prompt', serif;
    font-size: 1.5rem;
    color: rgba(140, 160, 200, 0.3);
}

/* Expanded Comment Card State */
.comment-card {
    cursor: pointer;
}

.comment-card.expanded {
    background: linear-gradient(135deg, #0E1338 0%, #0d1333 100%);
    box-shadow: 0 8px 30px rgba(140, 160, 200, 0.2);
    z-index: 10;
    padding-bottom: 15px;
    overflow: visible;
}

.comment-card.expanded.with-image {
    min-height: auto;
    padding-bottom: 15px;
}

.comment-card.expanded .comment-card-image {
    top: 57px;
    transform: translateY(-50%) rotate(-8deg);
}

.comment-card.expanded:hover .comment-card-image {
    transform: translateY(-50%) rotate(-3deg) scale(1.08);
}

.comment-card.expanded .comment-card-text {
    -webkit-line-clamp: unset;
    overflow: visible;
}

.comment-card.expanded .comment-card-date {
    margin-top: 0;
}

/* Full interpretation section */
.comment-card-full {
    display: none;
}

.comment-card.expanded .comment-card-full {
    display: block;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed rgba(140, 160, 200, 0.2);
}

.comment-card.expanded.with-image .comment-card-full {
    margin-left: -60px;
    padding-left: 0;
}

.comment-card-full-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
}

.comment-card-full-title .comment-card-tarot {
    font-size: 0.75rem;
    padding: 3px 10px;
    background: rgba(140, 160, 200, 0.12);
}

.comment-card-full-label {
    font-family: 'Cormorant Garamond', 'Prompt', serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--burgundy);
    display: flex;
    align-items: center;
    gap: 6px;
}

.comment-card-full-label::before {
    content: '✦';
    font-size: 0.75rem;
}

.comment-card-full-interpretation {
    font-family: 'Prompt', sans-serif;
    font-size: 0.85rem;
    font-weight: 300;
    color: #B8C0D8;
    line-height: 1.6;
    white-space: pre-line;
}

/* Replies section (expanded view) */
.comment-card-replies-section {
    display: none;
}

.comment-card.expanded .comment-card-replies-section {
    display: block;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed rgba(140, 160, 200, 0.2);
}

/* Hide title and reply button in expanded comment cards — chat bubbles replace them */
.comment-card.expanded .comment-card-replies-title {
    display: none;
}

.comment-card.expanded .comment-card-actions {
    display: none;
}

/* Auto-show reply form when comment card is expanded */
.comment-card.expanded .reply-form {
    max-height: 150px;
    opacity: 1;
    margin-top: 10px;
    overflow: visible;
}

.comment-card.expanded.with-image .comment-card-replies-section {
    margin-left: -60px;
    padding-left: 0;
}

.comment-card-replies-title {
    font-family: 'Prompt', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(140, 160, 200, 0.7);
    margin-bottom: 8px;
}

.replies-empty-btn {
    display: block;
    width: 100%;
    text-align: center;
    font-family: 'Prompt', sans-serif;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--burgundy);
    padding: 12px;
    background: rgba(140, 160, 200, 0.08);
    border: 1px dashed rgba(140, 160, 200, 0.3);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 10px;
}

.replies-empty-btn:hover {
    background: rgba(140, 160, 200, 0.15);
    border-color: rgba(140, 160, 200, 0.5);
}

/* Related comments section */
.comment-card-related {
    display: none;
}

.comment-card.expanded .comment-card-related {
    display: block;
    max-height: 300px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed rgba(140, 160, 200, 0.2);
    overflow-y: auto;
}

.comment-card.expanded.with-image .comment-card-related {
    margin-left: -60px;
    padding-left: 0;
}

/* Hide card image and related comments in cardview mode (already shown in header) */
.cardview-mode .comment-card-image {
    display: none !important;
}

.cardview-mode .comment-card-related {
    display: none !important;
}

.comment-card-related-title {
    font-family: 'Prompt', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(140, 160, 200, 0.7);
    margin-bottom: 10px;
}

.related-comment {
    background: rgba(20, 27, 69, 0.6);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
    border-left: 3px solid rgba(140, 160, 200, 0.3);
}

.related-comment:last-child {
    margin-bottom: 0;
}

.related-comment-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.related-comment-header .comment-avatar {
    width: 20px;
    height: 20px;
}

.related-comment-header .comment-avatar-default {
    width: 20px;
    height: 20px;
}

.related-comment-header .comment-avatar-default svg {
    width: 12px;
    height: 12px;
}

.related-comment-name {
    font-family: 'Cormorant Garamond', 'Prompt', serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--burgundy);
    font-style: italic;
}

.related-comment-date {
    font-family: 'Prompt', sans-serif;
    font-size: 0.6rem;
    color: rgba(140, 160, 200, 0.45);
}

.related-comment-text {
    font-family: 'Prompt', sans-serif;
    font-size: 0.8rem;
    font-weight: 300;
    color: #B8C0D8;
    line-height: 1.4;
}

.related-comment-loading,
.related-comment-empty {
    text-align: center;
    font-family: 'Prompt', sans-serif;
    font-size: 0.75rem;
    color: rgba(140, 160, 200, 0.5);
    padding: 10px;
}

.related-comment:hover {
    background: rgba(20, 27, 69, 0.8);
    border-left-color: var(--burgundy);
    transform: translateX(2px);
    transition: all 0.2s ease;
    overflow: hidden;
}

.related-comment-replies {
    font-family: 'Prompt', sans-serif;
    font-size: 0.65rem;
    color: var(--gold);
    background: rgba(168, 184, 216, 0.15);
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: auto;
    margin-right: 8px;
}

/* Reply Feature Styles */
.comment-card-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}

.reply-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    padding: 4px 8px;
    cursor: pointer;
    font-family: 'Prompt', sans-serif;
    font-size: 0.7rem;
    color: rgba(140, 160, 200, 0.6);
    transition: all 0.2s ease;
    border-radius: 12px;
}

.reply-btn:hover {
    background: rgba(140, 160, 200, 0.1);
    color: var(--burgundy);
}

.reply-btn svg {
    width: 14px;
    height: 14px;
}

.reply-count {
    font-size: 0.65rem;
    background: rgba(140, 160, 200, 0.15);
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 2px;
}

/* Reply Form */
.reply-form {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.3s ease;
    margin-top: 0;
}

.reply-form.show {
    max-height: 150px;
    opacity: 1;
    margin-top: 10px;
}

.reply-input-wrapper {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.reply-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid rgba(140, 160, 200, 0.2);
    border-radius: 16px;
    font-family: 'Prompt', sans-serif;
    font-size: 0.8rem;
    font-weight: 300;
    background: rgba(20, 27, 69, 0.8);
    color: #E8E8F0;
    resize: none;
    min-height: 36px;
    max-height: 80px;
}

.reply-input:focus {
    outline: none;
    border-color: var(--burgundy);
}

.reply-submit-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--burgundy);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.reply-submit-btn:hover {
    background: #6B7399;
    transform: scale(1.05);
}

.reply-submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.reply-submit-btn svg {
    width: 16px;
    height: 16px;
}

/* Replies List — Chat Bubble Style */
.replies-list {
    padding: 6px 0;
    margin-bottom: 8px;
}

/* Hide replies-list in comment cards until loaded */
.comment-card-replies-section .replies-list {
    display: none;
}

/* Base reply item — chat row */
.reply-item {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    align-items: flex-end;
}

.reply-item:last-child {
    margin-bottom: 0;
}

/* Avatar column */
.reply-avatar-col {
    flex-shrink: 0;
}

.reply-avatar-col .comment-avatar,
.reply-avatar-col .comment-avatar-default {
    width: 28px;
    height: 28px;
}

.reply-avatar-col .comment-avatar-default svg {
    width: 14px;
    height: 14px;
}

/* Chat bubble */
.reply-bubble {
    max-width: 78%;
    padding: 7px 11px;
    border-radius: 14px;
}

/* Left-aligned bubble (comment owner) */
.reply-bubble-left {
    flex-direction: row;
}

.reply-bubble-left .reply-bubble {
    background: rgba(20, 27, 69, 0.7);
    border-bottom-left-radius: 4px;
}

/* Right-aligned bubble (others) — avatar on right */
.reply-bubble-right {
    flex-direction: row;
    justify-content: flex-end;
}

.reply-bubble-right .reply-bubble {
    background: rgba(140, 160, 200, 0.12);
    border-bottom-right-radius: 4px;
}

/* Original comment bubble — visually distinct from replies */
.reply-original {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(154, 170, 212, 0.08);
}

.reply-original .reply-avatar-col .comment-avatar,
.reply-original .reply-avatar-col .comment-avatar-default {
    width: 34px;
    height: 34px;
}

.reply-original .reply-avatar-col .comment-avatar-default svg {
    width: 17px;
    height: 17px;
}

.reply-original .reply-bubble {
    background: rgba(20, 27, 69, 0.9);
    border: 1px solid rgba(154, 170, 212, 0.12);
    max-width: 85%;
}

.reply-original .reply-text {
    font-size: 0.8rem;
}

.reply-original .reply-name {
    font-size: 0.85rem;
}

/* Current user's bubble — accent color */
.reply-self .reply-bubble {
    background: rgba(90, 130, 210, 0.2);
    border: 1px solid rgba(90, 130, 210, 0.12);
}

/* Original + self: keep original style but with self border */
.reply-original.reply-self .reply-bubble {
    background: rgba(20, 27, 69, 0.9);
    border-color: rgba(90, 130, 210, 0.2);
}

/* Bubble header */
.reply-bubble-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}

.reply-name {
    font-family: 'Cormorant Garamond', 'Prompt', serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--burgundy);
    font-style: italic;
}

.reply-date {
    font-family: 'Prompt', sans-serif;
    font-size: 0.5rem;
    color: rgba(140, 160, 200, 0.4);
}

.reply-text {
    font-family: 'Prompt', sans-serif;
    font-size: 0.75rem;
    font-weight: 300;
    color: #B8C0D8;
    line-height: 1.4;
    word-break: break-word;
}

/* Reply Notification Circles (inside comments panel) — horizontal bar */
.reply-notif-bar {
    position: absolute;
    right: 8px;
    bottom: 12px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    z-index: 5;
    pointer-events: none;
}
.reply-notif-bar.scrollable {
    max-width: calc(100% - 16px);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 8px;
    margin: -8px;
}
.reply-notif-bar.scrollable::-webkit-scrollbar {
    display: none;
}

/* Reply highlight effect */
.reply-item.reply-highlight {
    background: rgba(154, 170, 212, 0.15);
    border-radius: 14px;
    box-shadow: 0 0 12px rgba(154, 170, 212, 0.1);
    transition: background 0.8s ease, box-shadow 0.8s ease;
}

.reply-item.reply-highlight-fade {
    background: transparent;
    box-shadow: none;
}

.comments-panel.light-theme .reply-item.reply-highlight {
    background: rgba(100, 80, 160, 0.1);
    box-shadow: 0 0 12px rgba(100, 80, 160, 0.06);
}

.comments-load-more {
    text-align: center;
    padding: 15px;
}

.comments-load-more-btn {
    padding: 10px 25px;
    border-radius: 20px;
    border: 1px solid var(--burgundy);
    background: transparent;
    color: var(--burgundy);
    cursor: pointer;
    font-family: 'Prompt', sans-serif;
    font-weight: 300;
    font-size: 0.85rem;
    transition: all 0.3s ease;
}

.comments-load-more-btn:hover {
    background: var(--burgundy);
    color: var(--cream);
}

.comments-load-more-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.comments-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--burgundy);
    opacity: 0.6;
}

.comments-empty-icon {
    font-size: 3rem;
    margin-bottom: 15px;
    opacity: 0.4;
}

.comments-empty-text {
    font-family: 'Prompt', sans-serif;
    font-weight: 300;
    font-size: 0.9rem;
}

/* Comments CTA - Go to draw card */
.comments-empty-cta {
    opacity: 1;
    padding: 50px 30px;
    position: relative;
}

.comments-empty-cta .comments-empty-text {
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--burgundy);
    margin-bottom: 8px;
}

.cta-sparkles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
}

.cta-sparkles .sparkle {
    position: absolute;
    color: var(--gold);
    font-size: 1.2rem;
    animation: sparkle-float 3s ease-in-out infinite;
    opacity: 0.6;
}

.cta-sparkles .s1 { top: 15%; left: 15%; animation-delay: 0s; }
.cta-sparkles .s2 { top: 25%; right: 20%; animation-delay: 1s; }
.cta-sparkles .s3 { bottom: 20%; left: 25%; animation-delay: 2s; }

@keyframes sparkle-float {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.4; }
    50% { transform: translateY(-8px) scale(1.2); opacity: 0.8; }
}

.cta-card-icon {
    width: 80px;
    height: 100px;
    margin: 0 auto 20px;
    color: var(--burgundy);
    opacity: 0.7;
    animation: card-float 4s ease-in-out infinite;
}

.cta-card-icon svg {
    width: 100%;
    height: 100%;
}

@keyframes card-float {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50% { transform: translateY(-10px) rotate(3deg); }
}

.cta-subtitle {
    font-family: 'Prompt', sans-serif;
    font-size: 0.85rem;
    font-weight: 300;
    color: rgba(160, 180, 220, 0.6);
    margin: 0 0 25px 0;
}

.cta-draw-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: linear-gradient(135deg, var(--burgundy) 0%, #7B8DB5 100%);
    color: var(--cream);
    border: none;
    border-radius: 30px;
    font-family: 'Prompt', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(160, 180, 220, 0.3);
    position: relative;
    overflow: hidden;
}

.cta-draw-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.cta-draw-btn:hover::before {
    left: 100%;
}

.cta-draw-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(160, 180, 220, 0.4);
}

/* Go Draw Card button — mystical CTA in My Card tab */
.go-draw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 8px;
    padding: 14px 36px;
    border: 1px solid rgba(154, 170, 212, 0.35);
    border-radius: 30px;
    background: linear-gradient(135deg, #1a2255 0%, #2a3a7a 50%, #1e2a60 100%);
    background-size: 200% 200%;
    color: #dce1f0;
    cursor: pointer;
    font-family: 'Prompt', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 0 20px rgba(154, 170, 212, 0.15),
        0 4px 15px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(154, 170, 212, 0.15);
    animation: goDrawPulse 2.5s ease-in-out infinite;
}

.go-draw-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(192, 200, 224, 0.15), transparent);
    animation: goDrawShimmer 3s ease-in-out infinite;
}

@keyframes goDrawShimmer {
    0% { left: -100%; }
    50% { left: 100%; }
    100% { left: 100%; }
}

@keyframes goDrawPulse {
    0%, 100% {
        box-shadow:
            0 0 20px rgba(154, 170, 212, 0.15),
            0 4px 15px rgba(0, 0, 0, 0.3),
            inset 0 1px 0 rgba(154, 170, 212, 0.15);
    }
    50% {
        box-shadow:
            0 0 30px rgba(154, 170, 212, 0.25),
            0 4px 20px rgba(0, 0, 0, 0.3),
            inset 0 1px 0 rgba(154, 170, 212, 0.2);
    }
}

.go-draw-btn:hover {
    border-color: rgba(154, 170, 212, 0.6);
    background: linear-gradient(135deg, #1e2a60 0%, #344898 50%, #243072 100%);
    color: #eef0f8;
    transform: translateY(-2px);
    box-shadow:
        0 0 35px rgba(154, 170, 212, 0.3),
        0 6px 20px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(154, 170, 212, 0.2);
}

.go-draw-btn:active {
    transform: translateY(0) scale(0.97);
}

.go-draw-btn-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    animation: acceptIconSpin 12s linear infinite;
}

.cta-draw-btn:active {
    transform: translateY(0);
}

.cta-draw-btn svg {
    width: 22px;
    height: 22px;
    opacity: 0.9;
}

/* Draw History Cards */

/* ========================================
   Feed Card (Minimal full-width style)
   ======================================== */

/* Remove side padding when feed tab is active */
.comments-list.feed-mode {
    padding: 0;
    gap: 0;
}

.feed-card {
    position: relative;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(154, 170, 212, 0.08);
    border-radius: 0;
    overflow: hidden;
    flex-shrink: 0;
    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
    -webkit-tap-highlight-color: transparent;
    border-left: 3px solid transparent;
}

.feed-card:last-child {
    border-bottom: none;
}

.feed-card:hover:not(.expanded) {
    background: rgba(154, 170, 212, 0.03);
}

.feed-card.expanded {
    background: rgba(154, 170, 212, 0.04);
    border-left-color: rgba(154, 170, 212, 0.35);
    box-shadow: inset 0 1px 0 rgba(154, 170, 212, 0.06), inset 0 -1px 0 rgba(154, 170, 212, 0.06);
}

.feed-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 36px 0 18px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.feed-card-header .comment-avatar {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border: 1.5px solid rgba(154, 170, 212, 0.15);
}

.feed-card-header .comment-avatar-default {
    width: 36px;
    height: 36px;
    border: 1.5px solid rgba(154, 170, 212, 0.1);
}

.feed-card-header .comment-avatar-default svg {
    width: 18px;
    height: 18px;
}

.feed-card-author {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}

.feed-card-name {
    font-family: 'Prompt', sans-serif;
    font-weight: 500;
    font-size: 0.85rem;
    color: rgba(192, 200, 224, 0.9);
    line-height: 1.3;
    letter-spacing: 0.01em;
}

.feed-card-meta {
    font-size: 0.7rem;
    color: rgba(154, 170, 212, 0.45);
    display: flex;
    align-items: center;
    gap: 3px;
    font-family: 'Prompt', sans-serif;
    font-weight: 300;
}

.feed-card-meta strong {
    color: rgba(154, 170, 212, 0.65);
    font-weight: 400;
}

.feed-card-date {
    font-size: 0.65rem;
    color: rgba(154, 170, 212, 0.3);
}

.feed-card-date::before {
    content: '\00B7';
    color: rgba(154, 170, 212, 0.25);
    font-weight: bold;
    margin: 0 3px;
}

.feed-card-body {
    padding: 8px 36px 6px 18px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    max-height: 200px;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.3s ease;
}

.feed-card.expanded .feed-card-body {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.feed-card-comment {
    font-family: 'Prompt', sans-serif;
    font-weight: 300;
    font-size: 0.85rem;
    color: rgba(192, 200, 224, 0.75);
    line-height: 1.6;
    margin-bottom: 4px;
    word-break: break-word;
    border-left: none;
    padding-left: 0;
}

.feed-card-comment:empty {
    display: none;
}

.feed-card-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.feed-card-reply-count {
    position: absolute;
    bottom: 0px;
    right: -2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: rgba(120, 140, 190, 0.4);
    color: #E0E4F0;
    font-size: 0.6rem;
    font-family: 'Prompt', sans-serif;
    font-weight: 500;
    line-height: 1;
    border: 1.5px solid rgba(15, 20, 57, 0.8);
    transition: background 0.3s, border-color 0.3s, color 0.3s;
}

.feed-card-reply-count.unread-replies {
    background: rgba(255, 90, 90, 0.75);
    color: #fff;
    border-color: rgba(180, 40, 40, 0.8);
}

.feed-card-image {
    display: flex;
    justify-content: center;
    background: none;
    border-radius: 0;
    padding: 0;
    margin-top: 2px;
}

.feed-card-image img {
    max-height: 220px;
    border-radius: 8px;
    object-fit: contain;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.25));
}

.feed-card-image img:hover {
    transform: scale(1.02);
    opacity: 0.92;
}

/* Chevron indicator — centered vertically on collapsed card */
.feed-card-chevron {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: rgba(154, 170, 212, 0.3);
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.feed-card.expanded .feed-card-chevron {
    opacity: 0;
}

/* Expandable section — hidden by default */
.feed-card-expanded {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0 18px;
    transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.3s ease;
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.feed-card.expanded .feed-card-expanded {
    max-height: 2000px;
    opacity: 1;
    padding: 4px 18px 14px;
}

.feed-card-expanded .feed-card-image {
    flex-shrink: 0;
    margin-top: 0;
}

.feed-card-expanded .feed-card-image img {
    max-height: 135px;
    width: auto;
}

.feed-card-info {
    flex: 1;
    min-width: 0;
}

.feed-card-quote {
    font-family: 'Cormorant Garamond', 'Prompt', serif;
    font-style: italic;
    font-size: 0.95rem;
    color: rgba(192, 200, 224, 0.85);
    line-height: 1.5;
    margin: 0 0 8px;
    padding: 8px 12px;
    border-left: 2px solid rgba(154, 170, 212, 0.3);
    background: rgba(154, 170, 212, 0.06);
    border-radius: 0 6px 6px 0;
}

.feed-card-interpretation {
    font-family: 'Prompt', sans-serif;
    font-weight: 300;
    font-size: 0.75rem;
    color: rgba(192, 200, 224, 0.55);
    line-height: 1.6;
}

/* Category badge in feed header */
.feed-cat-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.6rem;
    font-weight: 500;
    padding: 1px 7px;
    border-radius: 10px;
    margin-left: 6px;
    vertical-align: middle;
    letter-spacing: 0.02em;
}
.feed-cat-love {
    background: rgba(255, 107, 138, 0.15);
    color: #ff8fa8;
    border: 1px solid rgba(255, 107, 138, 0.25);
}
.feed-cat-work {
    background: rgba(100, 181, 255, 0.15);
    color: #8ac4ff;
    border: 1px solid rgba(100, 181, 255, 0.25);
}
.feed-cat-finance {
    background: rgba(255, 213, 79, 0.15);
    color: #ffe088;
    border: 1px solid rgba(255, 213, 79, 0.25);
}

/* Multi-card feed: stack cards above interpretation */
.feed-card-expanded:has(.feed-multi-cards) {
    flex-direction: column;
    align-items: stretch;
}

.feed-multi-cards {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 10px 0 14px;
}

.feed-multi-card-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    flex: 1;
    min-width: 0;
    max-width: 100px;
    cursor: pointer;
    opacity: 0.45;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.feed-multi-card-item.active {
    opacity: 1;
}

.feed-multi-card-item:not(.active):hover {
    opacity: 0.7;
}

.feed-multi-card-item.active img {
    box-shadow: 0 0 12px rgba(160, 140, 255, 0.4), 0 0 4px rgba(200, 180, 255, 0.3);
}

.feed-multi-card-item img {
    width: 100%;
    max-width: 80px;
    height: auto;
    border-radius: 5px;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
}

.feed-multi-card-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.65rem;
    color: rgba(192, 200, 224, 0.85);
    text-align: center;
    line-height: 1.2;
    font-weight: 600;
}

.feed-multi-card-pos {
    font-family: 'Prompt', sans-serif;
    font-size: 0.55rem;
    color: rgba(154, 170, 212, 0.5);
    text-transform: capitalize;
    letter-spacing: 0.04em;
}

/* Multi-card interpretation sections */
.feed-multi-info {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
}

.feed-multi-interp {
    padding-top: 10px;
    border-top: none;
    animation: feedInterpFadeIn 0.35s ease;
}

@keyframes feedInterpFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.feed-multi-interp-pos {
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.7rem;
    color: rgba(154, 170, 212, 0.6);
    letter-spacing: 0.06em;
    margin-bottom: 2px;
}

.feed-multi-interp-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(192, 200, 224, 0.9);
    margin-bottom: 6px;
}

.feed-card-replies-section {
    display: none;
    border-top: 1px solid rgba(154, 170, 212, 0.05);
    padding: 0 18px 14px;
    background: rgba(0, 0, 0, 0.03);
}

.feed-card-replies-section.open {
    display: block;
}

.feed-card-replies-section .replies-list {
    padding: 10px 0 0;
}

.feed-card-replies-section .reply-form {
    display: none;
    padding-top: 10px;
}

.feed-card-replies-section .reply-form.show {
    display: block;
}

.feed-card-replies-section .reply-input-wrapper {
    display: flex;
    gap: 8px;
    align-items: center;
}

.feed-card-replies-section .reply-input {
    flex: 1;
    background: rgba(154, 170, 212, 0.06);
    border: 1px solid rgba(154, 170, 212, 0.1);
    border-radius: 20px;
    color: #C0C8E0;
    padding: 8px 14px;
    font-size: 0.75rem;
    font-family: 'Prompt', sans-serif;
    font-weight: 300;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
}

.feed-card-replies-section .reply-input:focus {
    border-color: rgba(154, 170, 212, 0.25);
    background: rgba(154, 170, 212, 0.08);
}

.feed-card-replies-section .reply-submit-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(154, 170, 212, 0.15);
    border: none;
    color: rgba(154, 170, 212, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s, transform 0.2s;
}

.feed-card-replies-section .reply-submit-btn:hover:not(:disabled) {
    background: rgba(154, 170, 212, 0.3);
    color: #C0C8E0;
    transform: scale(1.05);
}

.feed-card-replies-section .reply-submit-btn:disabled {
    opacity: 0.25;
    cursor: default;
}

.feed-card-replies-section .reply-submit-btn svg {
    width: 14px;
    height: 14px;
}

/* New comment animation */
.feed-card.new-comment {
    animation: feedSlideIn 0.4s ease-out;
}

@keyframes feedSlideIn {
    0% { opacity: 0; transform: translateY(-15px) scale(0.97); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ========================================
   Activity Timeline
   ======================================== */
.activity-timeline-wrapper {
    padding: 8px 4px 8px 0;
}

.activity-card {
    display: flex;
    gap: 10px;
    padding: 0 0 0 8px;
    position: relative;
    margin-bottom: 2px;
    flex-shrink: 0;
    cursor: pointer;
}

/* Timeline vertical line — extend into margin to connect between rows */
.activity-card::before {
    content: '';
    position: absolute;
    left: 19px;
    top: 0;
    bottom: -6px;
    width: 2px;
    background: rgba(154, 170, 212, 0.12);
}

.activity-card:first-child::before {
    top: 16px;
}

.activity-card:last-child::before {
    bottom: 50%;
}

/* Color-coded timeline dots */
.activity-timeline-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 8px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(154, 170, 212, 0.12);
    border: 2px solid rgba(154, 170, 212, 0.2);
    transition: transform 0.2s, box-shadow 0.2s;
}

.activity-card:hover .activity-timeline-dot {
    transform: scale(1.1);
}

.activity-timeline-dot svg {
    width: 11px;
    height: 11px;
    stroke-width: 2.5;
}

/* Draw activity - purple accent */
.activity-card[data-type="draw"] .activity-timeline-dot {
    background: rgba(147, 130, 220, 0.18);
    border-color: rgba(147, 130, 220, 0.35);
    color: rgba(170, 155, 235, 0.85);
    box-shadow: 0 0 10px rgba(147, 130, 220, 0.15);
}

/* Comment activity - blue accent */
.activity-card[data-type="comment"] .activity-timeline-dot {
    background: rgba(100, 160, 230, 0.18);
    border-color: rgba(100, 160, 230, 0.35);
    color: rgba(120, 175, 240, 0.85);
    box-shadow: 0 0 10px rgba(100, 160, 230, 0.15);
}

/* Reply activity - teal accent */
.activity-card[data-type="replied"] .activity-timeline-dot {
    background: rgba(100, 200, 190, 0.18);
    border-color: rgba(100, 200, 190, 0.35);
    color: rgba(120, 215, 205, 0.85);
    box-shadow: 0 0 10px rgba(100, 200, 190, 0.15);
}

.activity-card-content {
    flex: 1;
    background: linear-gradient(135deg, rgba(160, 180, 220, 0.05) 0%, rgba(130, 150, 200, 0.02) 100%);
    border: 1px solid rgba(154, 170, 212, 0.07);
    border-radius: 10px;
    padding: 7px 12px;
    margin-bottom: 4px;
    min-width: 0;
    transition: border-color 0.2s, background 0.2s;
}

.activity-card:hover .activity-card-content {
    border-color: rgba(154, 170, 212, 0.15);
}

.activity-card.expanded .activity-card-content {
    background: linear-gradient(135deg, rgba(160, 180, 220, 0.07) 0%, rgba(130, 150, 200, 0.03) 100%);
    border-color: rgba(154, 170, 212, 0.12);
}

.activity-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.activity-icon {
    display: none;
}

.activity-action {
    font-family: 'Prompt', sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    color: rgba(192, 200, 224, 0.85);
}

/* Color-coded action text */
.activity-card[data-type="draw"] .activity-action {
    color: rgba(170, 155, 235, 0.9);
}
.activity-card[data-type="comment"] .activity-action {
    color: rgba(120, 175, 240, 0.9);
}
.activity-card[data-type="replied"] .activity-action {
    color: rgba(120, 215, 205, 0.9);
}

.activity-date {
    font-size: 0.65rem;
    color: rgba(154, 170, 212, 0.35);
    margin-left: auto;
    white-space: nowrap;
}

.activity-chevron {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: rgba(154, 170, 212, 0.25);
    transition: transform 0.25s ease;
    margin-left: 2px;
}

.activity-card.expanded .activity-chevron {
    transform: rotate(180deg);
    color: rgba(154, 170, 212, 0.5);
}

/* Detail section — hidden by default, expand on click */
.activity-card-detail {
    display: flex;
    align-items: center;
    gap: 10px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin-top: 0;
    padding-top: 0;
    border-top: 1px solid transparent;
    transition: max-height 0.25s ease, opacity 0.2s ease, margin-top 0.25s ease, padding-top 0.25s ease, border-color 0.25s ease;
}

.activity-card.expanded .activity-card-detail {
    max-height: 120px;
    opacity: 1;
    margin-top: 6px;
    padding-top: 6px;
    border-top-color: rgba(154, 170, 212, 0.06);
    overflow: visible;
}

.activity-card-image {
    width: 42px;
    height: 62px;
    flex-shrink: 0;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(154, 170, 212, 0.1);
}

.activity-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.activity-card-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.activity-card-name {
    font-family: 'Cormorant Garamond', 'Prompt', serif;
    font-size: 0.88rem;
    font-weight: 600;
    font-style: italic;
    color: rgba(192, 200, 224, 0.85);
}

.activity-card-comment {
    font-family: 'Prompt', sans-serif;
    font-weight: 300;
    font-size: 0.75rem;
    color: rgba(192, 200, 224, 0.55);
    font-style: italic;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
}

/* Cardview Tab - View specific card comments */
.comments-tab-cardview {
    position: relative;
    padding: 8px 12px !important;
    margin-left: auto;
    overflow: visible;
}

.comments-tab-cardview.active {
    color: var(--burgundy);
    font-weight: 500;
}

.comments-tab-cardview.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 2px;
    background: var(--gold);
    border-radius: 2px;
}

.tab-card-preview {
    width: 32px;
    height: 48px;
    object-fit: cover;
    border-radius: 3px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.25);
    border: 1.5px solid var(--gold);
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%) rotate(-8deg);
    transition: transform 0.2s ease;
}

.comments-tab-cardview:hover .tab-card-preview {
    transform: translateX(-50%) rotate(-3deg) translateY(-2px);
}

.comments-tab-cardview.active .tab-card-preview {
    transform: translateX(-50%) rotate(-5deg) scale(1.05);
    box-shadow: 0 4px 15px rgba(168, 184, 216, 0.4);
}

/* Cardview Header - Card image overflow */
.cardview-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 20px 20px;
    margin: -80px -15px 20px -25px;
    background: linear-gradient(180deg,
        rgba(13, 19, 51, 0.98) 0%,
        rgba(13, 19, 51, 0.95) 60%,
        transparent 100%
    );
    position: relative;
}

.cardview-card-wrapper {
    position: relative;
    margin-top: 20px;
}

.cardview-card-image {
    width: 100px;
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow:
        0 8px 25px rgba(160, 180, 220, 0.3),
        0 4px 10px rgba(0, 0, 0, 0.1);
    border: 2px solid var(--gold);
}

.cardview-card-glow {
    position: absolute;
    inset: -10px;
    background: radial-gradient(ellipse at center, rgba(168, 184, 216, 0.3) 0%, transparent 70%);
    z-index: -1;
    animation: card-glow-pulse 3s ease-in-out infinite;
}

@keyframes card-glow-pulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.05); }
}

.cardview-card-name {
    margin-top: 12px;
    font-family: 'Cormorant Garamond', 'Prompt', serif;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--burgundy);
    text-align: center;
}

.cardview-comment-count {
    font-family: 'Prompt', sans-serif;
    font-size: 0.8rem;
    font-weight: 300;
    color: rgba(160, 180, 220, 0.6);
    margin-top: 4px;
}

/* My Card Tab Sections */
/* My Card Tab Sections */
.mycard-section {
    margin-bottom: 10px;
}

.mycard-section-replied {
    margin-top: 25px;
}

.section-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 5px;
    margin-bottom: 12px;
}

.section-label {
    font-family: 'Prompt', sans-serif;
    font-size: 0.8rem;
    font-weight: 400;
    color: rgba(160, 180, 220, 0.7);
    white-space: nowrap;
}

.section-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, rgba(160, 180, 220, 0.3), rgba(160, 180, 220, 0.1));
}

.section-count {
    font-family: 'Cormorant Garamond', 'Prompt', serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--burgundy);
    min-width: 20px;
    text-align: center;
}

/* ==================== REVEAL OVERLAY ==================== */
.reveal-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0s 0.5s;
}

.reveal-overlay.active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease, visibility 0s 0s;
}

.reveal-overlay.closing {
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* ── Minimized state: shrink to top portion, result panel visible below ── */
.reveal-overlay.minimized {
    bottom: auto;
    height: 45vh;
    justify-content: flex-start;
    overflow: hidden;
    transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-overlay.minimized .reveal-overlay-bg {
    opacity: 0.9;
    mask-image: linear-gradient(to bottom, black 0%, black 60%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 60%, transparent 100%);
    transition: opacity 0.5s ease;
}

.reveal-overlay.minimized .reveal-fan-wrapper {
    transform: scale(0.38);
    transform-origin: top center;
    margin-top: 24px;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
                margin-top 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
}

.reveal-overlay.minimized .reveal-card-info,
.reveal-overlay.minimized .reveal-prompt,
.reveal-overlay.minimized .reveal-skip-btn,
.reveal-overlay.minimized .reveal-layout-switch {
    opacity: 0 !important;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.reveal-overlay.minimized.closing {
    height: 0;
    opacity: 0;
    transition: height 0.4s cubic-bezier(0.4, 0, 1, 1), opacity 0.3s ease;
}

/* ── Scroll-down hint indicator ── */
.reveal-scroll-hint {
    position: fixed;
    top: 45vh;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 3001;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    opacity: 0;
    transition: opacity 0.5s ease;
    cursor: pointer;
}

.reveal-scroll-hint.visible {
    opacity: 1;
}

.reveal-scroll-hint-line {
    width: 1px;
    height: 30px;
    background: linear-gradient(to bottom, transparent, rgba(192, 204, 228, 0.35));
}

.reveal-scroll-hint svg {
    width: 26px;
    height: 26px;
    color: rgba(192, 204, 228, 0.7);
    animation: revealScrollBounce 1.8s ease-in-out infinite;
    filter: drop-shadow(0 0 6px rgba(154, 170, 212, 0.3));
}

@keyframes revealScrollBounce {
    0%, 100% { transform: translateY(0); opacity: 0.7; }
    50% { transform: translateY(6px); opacity: 1; }
}

/* ── Stashed state: hidden but content preserved ── */
.reveal-overlay.stashed {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ── Reopen button (fixed corner) ── */
.reveal-reopen-btn {
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 1003;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(154, 170, 212, 0.25);
    border-radius: 50%;
    background: rgba(10, 14, 39, 0.55);
    color: rgba(192, 204, 228, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.reveal-reopen-btn:hover,
.reveal-reopen-btn:active {
    background: rgba(10, 14, 39, 0.75);
    color: rgba(220, 225, 240, 0.95);
    border-color: rgba(154, 170, 212, 0.45);
    box-shadow: 0 0 14px rgba(154, 170, 212, 0.25);
}

.reveal-overlay-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 30%, rgba(12, 16, 42, 0.93) 0%, rgba(2, 3, 10, 0.97) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.reveal-layout-switch {
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 3003;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    cursor: pointer;
}

.reveal-layout-title {
    font-family: 'Prompt', sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(192, 204, 228, 0.82);
}

.reveal-layout-segment {
    display: inline-flex;
    padding: 2px;
    border-radius: 999px;
    background: rgba(154, 170, 212, 0.10);
    border: 1px solid rgba(154, 170, 212, 0.20);
    gap: 2px;
}

.reveal-layout-option {
    border: 0;
    background: transparent;
    color: rgba(192, 204, 228, 0.72);
    font-family: 'Prompt', sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    min-width: 54px;
    padding: 5px 10px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.reveal-layout-option.active {
    color: rgba(230, 236, 248, 0.96);
    background: linear-gradient(135deg, rgba(154, 170, 212, 0.35), rgba(120, 139, 188, 0.36));
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.22);
}

.reveal-layout-option:hover {
    color: rgba(230, 236, 248, 0.94);
}

.reveal-fan-wrapper {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Stop float/drift animations inside the reveal overlay — cards stay still */
.reveal-overlay .three-card-left,
.reveal-overlay .three-card-center,
.reveal-overlay .three-card-right,
.reveal-overlay [class*="fc-"],
.reveal-overlay [class*="tc-"],
.reveal-overlay [class*="twc-"] {
    animation: none !important;
}

.reveal-overlay .ten-card-fan .multi-card-item {
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Highlight next card to reveal */
.reveal-overlay .reveal-next .three-card-face,
.reveal-overlay .reveal-next .multi-card-face {
    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.4),
        0 5px 25px rgba(154, 170, 212, 0.35),
        0 0 40px rgba(154, 170, 212, 0.15);
    transition: box-shadow 0.4s ease;
}

/* Glow pulse on revealed card */
.reveal-overlay .peek-flip .three-card-face,
.reveal-overlay .peek-flip .multi-card-face {
    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.4),
        0 5px 20px rgba(220, 180, 100, 0.25);
}

/* Single card reveal layout */
.reveal-single-fan {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 250px;
    height: 420px;
}

.reveal-single-fan .three-card-item {
    position: relative;
    transform: none;
    animation: none !important;
}

/* Card info display (name + quote) */
.reveal-card-info {
    position: relative;
    z-index: 1;
    text-align: center;
    width: 340px;
    max-width: 90vw;
    padding-top: 12px;
    min-height: 80px;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.reveal-card-info.visible {
    opacity: 1;
}

.reveal-card-info-stars {
    font-size: 0.55rem;
    letter-spacing: 8px;
    color: rgba(154, 170, 212, 0.4);
    margin-bottom: 8px;
    opacity: 0;
}

.reveal-card-info.visible .reveal-card-info-stars {
    animation: revealInfoSlideUp 0.6s ease forwards 0.1s;
}

.reveal-card-info-name {
    font-family: 'Prompt', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(220, 225, 240, 0.95);
    margin-bottom: 8px;
    opacity: 0;
    filter: drop-shadow(0 0 10px rgba(154, 170, 212, 0.3));
}

.reveal-card-info.visible .reveal-card-info-name {
    animation: revealInfoSlideUp 0.7s ease forwards 0.2s;
}

.reveal-card-info-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 8px;
    opacity: 0;
}

.reveal-card-info.visible .reveal-card-info-divider {
    animation: revealInfoSlideUp 0.6s ease forwards 0.35s;
}

.reveal-card-info-divider span:first-child,
.reveal-card-info-divider span:last-child {
    display: block;
    width: 35px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(154, 170, 212, 0.35), transparent);
}

.reveal-card-info-divider span:nth-child(2) {
    font-size: 0.7rem;
    color: rgba(154, 170, 212, 0.45);
}

.reveal-card-info-quote {
    font-family: 'Cormorant Garamond', 'Prompt', serif;
    font-size: 0.88rem;
    color: rgba(192, 200, 224, 0.75);
    font-style: italic;
    line-height: 1.6;
    max-width: 300px;
    margin: 0 auto;
    opacity: 0;
}

.reveal-card-info.visible .reveal-card-info-quote {
    animation: revealInfoSlideUp 0.7s ease forwards 0.5s;
}

/* Fade-out transition when switching to next card's info */
.reveal-card-info.switching {
    opacity: 0;
    transition: opacity 0.25s ease;
}

@media (max-width: 768px) {
    .reveal-card-info {
        width: 280px;
        padding-top: 8px;
        min-height: 70px;
    }

    .reveal-card-info-name {
        font-size: 0.95rem;
    }

    .reveal-card-info-quote {
        font-size: 0.82rem;
        max-width: 260px;
    }
}

@media (max-width: 480px) {
    .reveal-card-info {
        width: 260px;
        padding-top: 6px;
    }

    .reveal-card-info-name {
        font-size: 0.88rem;
        letter-spacing: 1.5px;
    }

    .reveal-card-info-quote {
        font-size: 0.78rem;
        max-width: 240px;
    }
}

/* Prompt text */
.reveal-prompt {
    position: relative;
    z-index: 1;
    color: rgba(192, 204, 228, 0.8);
    font-family: 'Prompt', sans-serif;
    font-weight: 300;
    font-size: 1rem;
    letter-spacing: 0.5px;
    margin-top: 50px;
    text-align: center;
    animation: pulse 2s ease-in-out infinite;
}

/* Skip button */
.reveal-skip-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 2;
    background: rgba(154, 170, 212, 0.08);
    border: 1px solid rgba(154, 170, 212, 0.2);
    color: rgba(192, 204, 228, 0.7);
    padding: 10px 24px;
    border-radius: 20px;
    cursor: pointer;
    font-family: 'Prompt', sans-serif;
    font-size: 0.85rem;
    font-weight: 300;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.reveal-skip-btn:hover {
    background: rgba(154, 170, 212, 0.15);
    color: rgba(192, 204, 228, 0.95);
    border-color: rgba(154, 170, 212, 0.35);
}

/* Responsive reveal overlay */
@media (max-width: 768px) {
    .reveal-layout-switch {
        top: 10px;
        right: 10px;
        padding: 0;
        gap: 6px;
    }
    .reveal-layout-title {
        font-size: 0.66rem;
    }
    .reveal-layout-option {
        min-width: 48px;
        padding: 4px 8px;
        font-size: 0.66rem;
    }

    .reveal-prompt {
        margin-top: 40px;
        font-size: 0.9rem;
    }

    .reveal-skip-btn {
        bottom: 20px;
        right: 20px;
        padding: 8px 18px;
        font-size: 0.8rem;
    }

    .reveal-single-fan {
        width: 200px;
        height: 340px;
    }
}

@media (max-width: 480px) {
    .reveal-layout-title {
        display: none;
    }
    .reveal-layout-switch {
        padding: 0;
    }
    .reveal-layout-option {
        min-width: 44px;
        padding: 4px 7px;
        font-size: 0.64rem;
    }

    .reveal-prompt {
        margin-top: 30px;
        font-size: 0.85rem;
    }

    .reveal-single-fan {
        width: 180px;
        height: 310px;
    }
}

/* ==================== COMING SOON / DISABLED MODE ==================== */

.landing-page.mode-disabled .multi-card-container,
.landing-page.mode-disabled .spinning-card-container {
    opacity: 0.35;
    filter: grayscale(0.6) brightness(0.7);
    pointer-events: none;
    transition: opacity 0.5s ease, filter 0.5s ease;
}

.landing-page.mode-disabled .card-click-hint.coming-soon-state {
    opacity: 1 !important;
    color: rgba(192, 200, 224, 0.5);
    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    animation: none;
    pointer-events: none;
}

.landing-page.mode-disabled .mode-arrow {
    opacity: 0.3;
}

/* Disabled dot indicators */
.mode-dot.disabled {
    opacity: 0.35;
    cursor: default;
}

.mode-dot.disabled:hover {
    color: rgba(192, 200, 224, 0.3);
    background: transparent;
}

.mode-dot.disabled .mode-dot-cards i {
    opacity: 0.4;
}

/* ==================== DESKTOP HEIGHT RESPONSIVE ==================== */
/* Medium desktop / laptop screens (e.g. 1440×900, 1280×800) */
@media (min-width: 769px) and (max-height: 900px) {
    .landing-header {
        margin-top: 2vh;
        padding-bottom: 1rem;
    }

    .landing-heading {
        font-size: 2.1rem;
    }

    .spinning-card-container {
        width: 150px;
        height: 268px;
        top: -10px;
    }

    .three-card-container {
        top: -10px;
    }

    /* Three-card fan: scale 0.85 from 480×448 */
    .three-card-fan {
        transform: scale(0.85);
        margin: -34px -36px;
    }

    .multi-card-container {
        top: -5px;
    }

    /* Four-card fan: scale 0.85 from 500×400 */
    .four-card-fan {
        transform: scale(0.85);
        margin: -30px -37.5px;
    }

    /* Ten-card fan: scale 0.78 from 500×440 */
    .ten-card-fan {
        transform: scale(0.78);
        margin: -48px -55px;
    }

    /* Twelve-card fan: scale 0.72 from 520×520 */
    .twelve-card-fan {
        transform: scale(0.72);
        margin: -73px;
    }

    .landing-brand {
        bottom: 20px;
        font-size: 1.1rem;
    }
}

/* Short desktop / small laptop screens (e.g. 1366×768, small windows) */
@media (min-width: 769px) and (max-height: 750px) {
    .landing-header {
        margin-top: 1.5vh;
        padding-bottom: 0.5rem;
    }

    .landing-heading {
        font-size: 1.8rem;
    }

    .landing-tagline {
        font-size: 1rem;
    }

    .spinning-card-container {
        width: 120px;
        height: 214px;
        top: -5px;
    }

    .three-card-container {
        top: -5px;
    }

    /* Three-card fan: scale 0.68 from 480×448 */
    .three-card-fan {
        transform: scale(0.68);
        margin: -72px -77px;
    }

    /* Four-card fan: scale 0.7 from 500×400 */
    .four-card-fan {
        transform: scale(0.7);
        margin: -60px -75px;
    }

    /* Ten-card fan: scale 0.62 from 500×440 */
    .ten-card-fan {
        transform: scale(0.62);
        margin: -84px -95px;
    }

    /* Twelve-card fan: scale 0.56 from 520×520 */
    .twelve-card-fan {
        transform: scale(0.56);
        margin: -114px;
    }

    .landing-brand {
        bottom: 12px;
        font-size: 1rem;
    }
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 768px) {
    .envelope-container {
        width: 85vw;
        height: 60vw;
        max-width: none;
        max-height: none;
    }

    .wax-seal {
        width: 110px;
        height: 110px;
    }

    .wax-seal::before {
        width: 85px;
        height: 85px;
    }

    .landing-header {
        margin-top: 6vh;
    }

    .landing-heading {
        font-size: 1.8rem;
        max-width: 90vw;
    }

    .spinning-card-container {
        width: 150px;
        height: 268px;
    }

    .three-card-fan {
        width: 416px;
        height: 384px;
    }

    .three-card-item {
        width: 176px;
        height: 314px;
    }

    .three-card-left {
        transform: translateX(-104px) rotate(-12deg);
        animation-name: cardFloat1m;
    }
    .three-card-center {
        transform: translateX(0) rotate(0deg) translateY(-16px);
        animation-name: cardFloat2m;
    }
    .three-card-right {
        transform: translateX(104px) rotate(12deg);
        animation-name: cardFloat3m;
    }

    .card-position-label {
        font-size: 11px;
        bottom: -28px;
    }

    @keyframes cardFloat1m {
        0%, 100% { transform: translateX(-104px) rotate(-12deg) translateY(0); }
        50% { transform: translateX(-104px) rotate(-12deg) translateY(-13px); }
    }
    @keyframes cardFloat2m {
        0%, 100% { transform: translateX(0) rotate(0deg) translateY(-16px); }
        50% { transform: translateX(0) rotate(0deg) translateY(-29px); }
    }
    @keyframes cardFloat3m {
        0%, 100% { transform: translateX(104px) rotate(12deg) translateY(0); }
        50% { transform: translateX(104px) rotate(12deg) translateY(-13px); }
    }

    /* 4-card responsive */
    .four-card-fan { width: 420px; height: 350px; }
    .four-card-fan .multi-card-item { width: 136px; height: 243px; }
    .fc-1 { transform: translateX(-144px) rotate(-15deg); }
    .fc-2 { transform: translateX(-49px) rotate(-5deg) translateY(-12px); }
    .fc-3 { transform: translateX(49px) rotate(5deg) translateY(-12px); }
    .fc-4 { transform: translateX(144px) rotate(15deg); }
    @keyframes fcFloat1 { 0%,100% { transform: translateX(-144px) rotate(-15deg) translateY(0); } 50% { transform: translateX(-144px) rotate(-15deg) translateY(-12px); } }
    @keyframes fcFloat2 { 0%,100% { transform: translateX(-49px) rotate(-5deg) translateY(-12px); } 50% { transform: translateX(-49px) rotate(-5deg) translateY(-24px); } }
    @keyframes fcFloat3 { 0%,100% { transform: translateX(49px) rotate(5deg) translateY(-12px); } 50% { transform: translateX(49px) rotate(5deg) translateY(-24px); } }
    @keyframes fcFloat4 { 0%,100% { transform: translateX(144px) rotate(15deg) translateY(0); } 50% { transform: translateX(144px) rotate(15deg) translateY(-12px); } }

    /* 10-card Celtic Cross responsive */
    .ten-card-fan { width: 420px; height: 380px; }
    .ten-card-fan .multi-card-item { width: 68px; height: 108px; }
    .ten-card-fan .card-back-seal { width: 28px; height: 28px; }
    .tc-1  { transform: translate(-55px, 0px); }
    .tc-2  { transform: translate(-55px, 0px) rotate(90deg); }
    .tc-3  { transform: translate(-55px, -120px); }
    .tc-4  { transform: translate(-55px, 120px); }
    .tc-5  { transform: translate(-155px, 0px); }
    .tc-6  { transform: translate(45px, 0px); }
    .tc-7  { transform: translate(152px, 155px); }
    .tc-8  { transform: translate(152px, 52px); }
    .tc-9  { transform: translate(152px, -52px); }
    .tc-10 { transform: translate(152px, -155px); }
    .ten-card-fan.layout-new .tc-1  { transform: translate(-55px, 0px); }
    .ten-card-fan.layout-new .tc-2  { transform: translate(-155px, 0px); }
    .ten-card-fan.layout-new .tc-3  { transform: translate(-55px, -120px); }
    .ten-card-fan.layout-new .tc-4  { transform: translate(-55px, 120px); }
    .ten-card-fan.layout-new .tc-5  { transform: translate(45px, 0px); }
    .ten-card-fan.layout-new .tc-6  { transform: translate(-155px, -120px); }
    .ten-card-fan.layout-new .tc-7  { transform: translate(152px, 120px); }
    .ten-card-fan.layout-new .tc-8  { transform: translate(152px, 0px); }
    .ten-card-fan.layout-new .tc-9  { transform: translate(152px, -120px); }
    .ten-card-fan.layout-new .tc-10 { transform: translate(45px, -120px); }
    .ten-card-fan.layout-new .card-position-label { bottom: -26px; font-size: 10.5px; }

    /* 12-card zodiac responsive — radius 168px */
    .twelve-card-fan { width: 450px; height: 450px; }
    .twelve-card-fan .multi-card-item { width: 70px; height: 112px; }
    .twelve-card-fan .card-back-seal { width: 28px; height: 28px; }
    .twelve-card-fan::before { width: 336px; height: 336px; }
    .twelve-card-fan::after { width: 252px; height: 252px; }
    .twc-1  { transform: translate(-168px, 0px); }
    .twc-2  { transform: translate(-146px, 84px); }
    .twc-3  { transform: translate(-84px, 146px); }
    .twc-4  { transform: translate(0px, 168px); }
    .twc-5  { transform: translate(84px, 146px); }
    .twc-6  { transform: translate(146px, 84px); }
    .twc-7  { transform: translate(168px, 0px); }
    .twc-8  { transform: translate(146px, -84px); }
    .twc-9  { transform: translate(84px, -146px); }
    .twc-10 { transform: translate(0px, -168px); }
    .twc-11 { transform: translate(-84px, -146px); }
    .twc-12 { transform: translate(-146px, -84px); }
    @keyframes twcF1  { 0%,100% { transform: translate(-168px, 0px); }   50% { transform: translate(-175px, 0px); } }
    @keyframes twcF2  { 0%,100% { transform: translate(-146px, 84px); }  50% { transform: translate(-152px, 88px); } }
    @keyframes twcF3  { 0%,100% { transform: translate(-84px, 146px); }  50% { transform: translate(-88px, 152px); } }
    @keyframes twcF4  { 0%,100% { transform: translate(0px, 168px); }    50% { transform: translate(0px, 175px); } }
    @keyframes twcF5  { 0%,100% { transform: translate(84px, 146px); }   50% { transform: translate(88px, 152px); } }
    @keyframes twcF6  { 0%,100% { transform: translate(146px, 84px); }   50% { transform: translate(152px, 88px); } }
    @keyframes twcF7  { 0%,100% { transform: translate(168px, 0px); }    50% { transform: translate(175px, 0px); } }
    @keyframes twcF8  { 0%,100% { transform: translate(146px, -84px); }  50% { transform: translate(152px, -88px); } }
    @keyframes twcF9  { 0%,100% { transform: translate(84px, -146px); }  50% { transform: translate(88px, -152px); } }
    @keyframes twcF10 { 0%,100% { transform: translate(0px, -168px); }   50% { transform: translate(0px, -175px); } }
    @keyframes twcF11 { 0%,100% { transform: translate(-84px, -146px); } 50% { transform: translate(-88px, -152px); } }
    @keyframes twcF12 { 0%,100% { transform: translate(-146px, -84px); } 50% { transform: translate(-152px, -88px); } }

    .card-click-hint {
        font-size: 0.85rem;
        bottom: -50px;
        display: none !important;
    }

    .landing-hint-mobile {
        display: block;
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        font-family: 'Prompt', sans-serif;
        font-weight: 300;
        font-size: 0.85rem;
        color: var(--burgundy);
        opacity: 0.8;
        white-space: nowrap;
        z-index: 5;
    }

    .landing-hint-mobile.loading-state {
        animation: pulse 1.5s ease-in-out infinite;
    }

    .landing-hint-mobile.ready-state {
        animation: hintReveal 0.6s ease forwards, pulse 2s ease-in-out 0.6s infinite;
    }

    .landing-hint-mobile.coming-soon-state {
        opacity: 0.5;
    }

    .landing-brand {
        bottom: 35px;
    }

    .card-grid {
        padding: 8px 10px;
    }

    .card-grid.stacked::after {
        width: 70px;
        height: 125px;
    }

    footer {
        padding: 5px 15px;
    }

    .center-card-container {
        width: 240px;
        height: 429px;
    }

    .result-content-wrapper,
    .result-panel .comment-section {
        padding-left: 18px;
        padding-right: 18px;
    }

    .result-sticky-card {
        padding: 20px 18px 16px;
        gap: 16px;
    }

    .result-sticky-card-img {
        width: 110px;
    }

    .result-sticky-card.minimized .result-sticky-card-img {
        width: 48px;
    }

    .result-sticky-card-name {
        font-size: 1.15rem;
    }

    .result-sticky-card-quote {
        font-size: 0.82rem;
    }

    .result-sticky-card.minimized .result-sticky-card-name {
        font-size: 0.88rem;
    }

    .result-sticky-card.minimized .result-sticky-card-quote {
        font-size: 0.75rem;
    }

    .result-sticky-card.multi-sticky .multi-result-card-img {
        width: 68px;
    }

    .result-sticky-card.multi-sticky.minimized .multi-result-card-img {
        width: 38px;
    }

    .result-glass-card {
        padding: 18px 18px 20px;
    }
}

@media (max-width: 480px) {
    .envelope-container {
        width: 90vw;
        height: 63vw;
    }

    .wax-seal {
        width: 95px;
        height: 95px;
    }

    .wax-seal::before {
        width: 72px;
        height: 72px;
    }

    .landing-header {
        margin-top: 5vh;
    }

    .landing-heading {
        font-size: 2rem;
        max-width: 90vw;
    }

    .spinning-card-container {
        width: 180px;
        height: 321px;
    }

    .three-card-fan {
        width: 384px;
        height: 352px;
    }

    .three-card-item {
        width: 160px;
        height: 285px;
    }

    .three-card-left {
        transform: translateX(-93px) rotate(-10deg);
        animation-name: cardFloat1s;
    }
    .three-card-center {
        transform: translateX(0) rotate(0deg) translateY(-13px);
        animation-name: cardFloat2s;
    }
    .three-card-right {
        transform: translateX(93px) rotate(10deg);
        animation-name: cardFloat3s;
    }

    .three-card-left .card-position-label {
        transform: translateX(-50%) rotate(10deg);
    }
    .three-card-right .card-position-label {
        transform: translateX(-50%) rotate(-10deg);
    }

    .card-position-label {
        font-size: 10px;
        bottom: -24px;
        letter-spacing: 1px;
    }

    @keyframes cardFloat1s {
        0%, 100% { transform: translateX(-93px) rotate(-10deg) translateY(0); }
        50% { transform: translateX(-93px) rotate(-10deg) translateY(-11px); }
    }
    @keyframes cardFloat2s {
        0%, 100% { transform: translateX(0) rotate(0deg) translateY(-13px); }
        50% { transform: translateX(0) rotate(0deg) translateY(-24px); }
    }
    @keyframes cardFloat3s {
        0%, 100% { transform: translateX(93px) rotate(10deg) translateY(0); }
        50% { transform: translateX(93px) rotate(10deg) translateY(-11px); }
    }

    /* 4-card small screen */
    .four-card-fan { width: 340px; height: 300px; }
    .four-card-fan .multi-card-item { width: 110px; height: 196px; }
    .fc-1 { transform: translateX(-116px) rotate(-14deg); }
    .fc-2 { transform: translateX(-40px) rotate(-4deg) translateY(-10px); }
    .fc-3 { transform: translateX(40px) rotate(4deg) translateY(-10px); }
    .fc-4 { transform: translateX(116px) rotate(14deg); }
    .fc-1 .card-position-label { transform: translateX(-50%) rotate(14deg); }
    .fc-2 .card-position-label { transform: translateX(-50%) rotate(4deg); }
    .fc-3 .card-position-label { transform: translateX(-50%) rotate(-4deg); }
    .fc-4 .card-position-label { transform: translateX(-50%) rotate(-14deg); }
    @keyframes fcFloat1 { 0%,100% { transform: translateX(-116px) rotate(-14deg) translateY(0); } 50% { transform: translateX(-116px) rotate(-14deg) translateY(-10px); } }
    @keyframes fcFloat2 { 0%,100% { transform: translateX(-40px) rotate(-4deg) translateY(-10px); } 50% { transform: translateX(-40px) rotate(-4deg) translateY(-20px); } }
    @keyframes fcFloat3 { 0%,100% { transform: translateX(40px) rotate(4deg) translateY(-10px); } 50% { transform: translateX(40px) rotate(4deg) translateY(-20px); } }
    @keyframes fcFloat4 { 0%,100% { transform: translateX(116px) rotate(14deg) translateY(0); } 50% { transform: translateX(116px) rotate(14deg) translateY(-10px); } }

    /* 10-card Celtic Cross small screen */
    .ten-card-fan { width: 340px; height: 320px; }
    .ten-card-fan .multi-card-item { width: 55px; height: 88px; }
    .ten-card-fan .card-back-seal { width: 22px; height: 22px; }
    .tc-1  { transform: translate(-44px, 0px); }
    .tc-2  { transform: translate(-44px, 0px) rotate(90deg); }
    .tc-3  { transform: translate(-44px, -98px); }
    .tc-4  { transform: translate(-44px, 98px); }
    .tc-5  { transform: translate(-126px, 0px); }
    .tc-6  { transform: translate(38px, 0px); }
    .tc-7  { transform: translate(124px, 130px); }
    .tc-8  { transform: translate(124px, 43px); }
    .tc-9  { transform: translate(124px, -43px); }
    .tc-10 { transform: translate(124px, -130px); }
    .ten-card-fan.layout-new .tc-1  { transform: translate(-44px, 0px); }
    .ten-card-fan.layout-new .tc-2  { transform: translate(-126px, 0px); }
    .ten-card-fan.layout-new .tc-3  { transform: translate(-44px, -98px); }
    .ten-card-fan.layout-new .tc-4  { transform: translate(-44px, 98px); }
    .ten-card-fan.layout-new .tc-5  { transform: translate(38px, 0px); }
    .ten-card-fan.layout-new .tc-6  { transform: translate(-126px, -98px); }
    .ten-card-fan.layout-new .tc-7  { transform: translate(124px, 98px); }
    .ten-card-fan.layout-new .tc-8  { transform: translate(124px, 0px); }
    .ten-card-fan.layout-new .tc-9  { transform: translate(124px, -98px); }
    .ten-card-fan.layout-new .tc-10 { transform: translate(38px, -98px); }
    .ten-card-fan.layout-new .card-position-label { bottom: -23px; font-size: 9px; letter-spacing: 0.8px; }

    /* 12-card zodiac small screen — radius 140px */
    .twelve-card-fan { width: 380px; height: 380px; }
    .twelve-card-fan .multi-card-item { width: 56px; height: 90px; }
    .twelve-card-fan .card-back-seal { width: 22px; height: 22px; }
    .twelve-card-fan::before { width: 280px; height: 280px; }
    .twelve-card-fan::after { width: 210px; height: 210px; }
    .twc-1  { transform: translate(-140px, 0px); }
    .twc-2  { transform: translate(-121px, 70px); }
    .twc-3  { transform: translate(-70px, 121px); }
    .twc-4  { transform: translate(0px, 140px); }
    .twc-5  { transform: translate(70px, 121px); }
    .twc-6  { transform: translate(121px, 70px); }
    .twc-7  { transform: translate(140px, 0px); }
    .twc-8  { transform: translate(121px, -70px); }
    .twc-9  { transform: translate(70px, -121px); }
    .twc-10 { transform: translate(0px, -140px); }
    .twc-11 { transform: translate(-70px, -121px); }
    .twc-12 { transform: translate(-121px, -70px); }
    @keyframes twcF1  { 0%,100% { transform: translate(-140px, 0px); }   50% { transform: translate(-146px, 0px); } }
    @keyframes twcF2  { 0%,100% { transform: translate(-121px, 70px); }  50% { transform: translate(-127px, 73px); } }
    @keyframes twcF3  { 0%,100% { transform: translate(-70px, 121px); }  50% { transform: translate(-73px, 127px); } }
    @keyframes twcF4  { 0%,100% { transform: translate(0px, 140px); }    50% { transform: translate(0px, 146px); } }
    @keyframes twcF5  { 0%,100% { transform: translate(70px, 121px); }   50% { transform: translate(73px, 127px); } }
    @keyframes twcF6  { 0%,100% { transform: translate(121px, 70px); }   50% { transform: translate(127px, 73px); } }
    @keyframes twcF7  { 0%,100% { transform: translate(140px, 0px); }    50% { transform: translate(146px, 0px); } }
    @keyframes twcF8  { 0%,100% { transform: translate(121px, -70px); }  50% { transform: translate(127px, -73px); } }
    @keyframes twcF9  { 0%,100% { transform: translate(70px, -121px); }  50% { transform: translate(73px, -127px); } }
    @keyframes twcF10 { 0%,100% { transform: translate(0px, -140px); }   50% { transform: translate(0px, -146px); } }
    @keyframes twcF11 { 0%,100% { transform: translate(-70px, -121px); } 50% { transform: translate(-73px, -127px); } }
    @keyframes twcF12 { 0%,100% { transform: translate(-121px, -70px); } 50% { transform: translate(-127px, -73px); } }

    .card-click-hint {
        font-size: 0.8rem;
        bottom: -50px;
    }

    .landing-hint-mobile {
        font-size: 0.8rem;
    }

    .card-grid {
        padding: 6px 8px;
    }

    .card-grid.stacked::after {
        width: 55px;
        height: 100px;
    }

    /* Ensure footer is always visible on mobile */
    .main-page .container {
        padding-bottom: 50px;
    }

    .main-page footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: transparent;
        padding: 8px 10px;
        z-index: 100;
    }

    .footer-social {
        margin-bottom: 4px;
    }

    .footer-social svg {
        width: 22px;
        height: 22px;
    }

    .social-icons a {
        opacity: 0.6;
    }

    .brand {
        font-size: 0.75rem;
        opacity: 0.5;
    }

    .center-card-container {
        width: 200px;
        height: 357px;
    }

    .result-sticky-card {
        padding: 16px 14px 14px;
        gap: 14px;
    }

    .result-sticky-card-img {
        width: 95px;
    }

    .result-sticky-card-name {
        font-size: 1.05rem;
    }

    .result-sticky-card-quote {
        font-size: 0.8rem;
        -webkit-line-clamp: 2;
    }

    .result-sticky-card.minimized {
        padding: 8px 14px;
        gap: 10px;
    }

    .result-sticky-card.minimized .result-sticky-card-img {
        width: 42px;
    }

    .result-sticky-card.minimized .result-sticky-card-name {
        font-size: 0.82rem;
    }

    .result-sticky-card.minimized .result-sticky-card-quote {
        font-size: 0.72rem;
        -webkit-line-clamp: 1;
    }

    .result-sticky-card.multi-sticky {
        gap: 10px;
        padding: 14px calc(50% - 38px) 12px;
    }

    .result-sticky-card.multi-sticky .multi-result-card-img {
        width: 60px;
    }

    .result-sticky-card.multi-sticky.minimized {
        gap: 8px;
        padding: 8px calc(50% - 22px) 6px;
    }

    .result-sticky-card.multi-sticky.minimized .multi-result-card-img {
        width: 34px;
    }

    .result-sticky-card.multi-sticky.minimized .multi-result-card-label {
        font-size: 0.5rem;
        margin-top: 3px;
    }

    .result-glass-card {
        padding: 16px 16px 18px;
        border-radius: 14px;
    }

    .result-content-wrapper,
    .result-panel .comment-section:not(.minimized) {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ==================== ANALYTICS PAGE ==================== */
.analytics-page {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #060A1F 0%, #0a0e27 50%, #141b45 100%);
    z-index: 20000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;
    overflow-y: auto;
    overflow-x: hidden;
}

.analytics-page.show {
    opacity: 1;
    visibility: visible;
}

.analytics-header {
    position: relative;
    text-align: center;
    padding: 40px 20px 30px;
    background: linear-gradient(180deg, rgba(154, 170, 212, 0.1) 0%, transparent 100%);
}

.analytics-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.analytics-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.analytics-close svg {
    width: 20px;
    height: 20px;
}

.analytics-title {
    font-family: 'Cormorant Garamond', 'Prompt', serif;
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--gold);
    margin-bottom: 8px;
    text-shadow: 0 2px 20px rgba(154, 170, 212, 0.3);
}

.analytics-subtitle {
    font-family: 'Prompt', sans-serif;
    font-size: 0.9rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.analytics-content {
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
}

.analytics-section {
    margin-bottom: 40px;
}

.section-title {
    font-family: 'Cormorant Garamond', 'Prompt', serif;
    font-size: 1.4rem;
    font-weight: 600;
    color: white;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(154, 170, 212, 0.3);
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-title::before {
    content: '';
    width: 4px;
    height: 20px;
    background: var(--gold);
    border-radius: 2px;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.stat-card {
    padding: 20px;
    border-radius: 16px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
}

.stat-card.gradient-pink {
    background: linear-gradient(135deg, #C0C8E0 0%, #7B8DB5 100%);
}

.stat-card.gradient-purple {
    background: linear-gradient(135deg, #5b2c6f 0%, #8e44ad 100%);
}

.stat-card.gradient-blue {
    background: linear-gradient(135deg, #1a5276 0%, #2980b9 100%);
}

.stat-card.gradient-gold {
    background: linear-gradient(135deg, #2A3570 0%, #9AAAD4 100%);
}

.stat-icon {
    width: 40px;
    height: 40px;
    margin: 0 auto 10px;
    color: rgba(255, 255, 255, 0.8);
}

.stat-icon svg {
    width: 100%;
    height: 100%;
}

.stat-value {
    font-family: 'Prompt', sans-serif;
    font-size: 2rem;
    font-weight: 600;
    color: white;
    margin-bottom: 5px;
}

.stat-label {
    font-family: 'Prompt', sans-serif;
    font-size: 0.75rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Top Cards List */
.top-cards-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.top-card-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.top-card-item:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(5px);
}

.top-card-rank {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Prompt', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.top-card-rank.gold {
    background: linear-gradient(135deg, #c9a227 0%, #f4d03f 100%);
    color: #1a1a2e;
}

.top-card-rank.silver {
    background: linear-gradient(135deg, #a0a0a0 0%, #d0d0d0 100%);
    color: #1a1a2e;
}

.top-card-rank.bronze {
    background: linear-gradient(135deg, #cd7f32 0%, #e6a56c 100%);
    color: #1a1a2e;
}

.top-card-rank.normal {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
}

.top-card-image {
    width: 45px;
    height: 80px;
    border-radius: 4px;
    object-fit: cover;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
}

.top-card-info {
    flex: 1;
    min-width: 0;
}

.top-card-name {
    font-family: 'Cormorant Garamond', 'Prompt', serif;
    font-size: 1rem;
    font-weight: 600;
    color: white;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.top-card-count {
    font-family: 'Prompt', sans-serif;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}

.top-card-bar {
    width: 60px;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
}

.top-card-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold) 0%, #C8D8F0 100%);
    border-radius: 4px;
    transition: width 0.5s ease;
}

/* All Cards Grid */
.all-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(55px, 1fr));
    gap: 8px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.card-grid-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    transition: all 0.2s ease;
}

.card-grid-item:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.05);
}

.card-grid-image {
    width: 45px;
    height: 70px;
    object-fit: cover;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.card-grid-count {
    margin-top: 4px;
    font-family: 'Prompt', sans-serif;
    font-size: 0.65rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
}

.card-grid-rank {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Prompt', sans-serif;
    font-size: 0.55rem;
    font-weight: 700;
    z-index: 1;
}

.card-grid-rank.gold {
    background: linear-gradient(135deg, #c9a227 0%, #f4d03f 100%);
    color: #1a1a2e;
}

.card-grid-rank.silver {
    background: linear-gradient(135deg, #a8a8a8 0%, #d4d4d4 100%);
    color: #1a1a2e;
}

.card-grid-rank.bronze {
    background: linear-gradient(135deg, #cd7f32 0%, #e8a857 100%);
    color: #1a1a2e;
}

/* Chart Container */
.chart-container {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.chart-bar-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chart-bar-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.chart-bar-label {
    width: 80px;
    font-family: 'Prompt', sans-serif;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    flex-shrink: 0;
}

.chart-bar-track {
    flex: 1;
    height: 24px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}

.chart-bar-fill {
    height: 100%;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 10px;
    transition: width 0.8s ease;
    min-width: 40px;
}

.chart-bar-fill.ig-story {
    background: linear-gradient(90deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%);
}

.chart-bar-fill.square {
    background: linear-gradient(90deg, #c13584 0%, #e1306c 100%);
}

.chart-bar-fill.facebook {
    background: linear-gradient(90deg, #1877F2 0%, #42a5f5 100%);
}

.chart-bar-fill.wide {
    background: linear-gradient(90deg, #C0C8E0 0%, #7B8DB5 100%);
}

.chart-bar-fill.messenger {
    background: linear-gradient(90deg, #00b2ff 0%, #006aff 100%);
}

.chart-bar-fill.line {
    background: linear-gradient(90deg, #00B900 0%, #32cd32 100%);
}

.chart-bar-fill.copy {
    background: linear-gradient(90deg, #6c757d 0%, #adb5bd 100%);
}

/* Time to Pick Colors */
.chart-bar-fill.instant {
    background: linear-gradient(90deg, #00c853 0%, #69f0ae 100%);
}

.chart-bar-fill.quick {
    background: linear-gradient(90deg, #64dd17 0%, #b2ff59 100%);
}

.chart-bar-fill.normal {
    background: linear-gradient(90deg, #ffc107 0%, #ffeb3b 100%);
}

.chart-bar-fill.medium {
    background: linear-gradient(90deg, #ff9800 0%, #ffb74d 100%);
}

.chart-bar-fill.slow {
    background: linear-gradient(90deg, #f44336 0%, #ef9a9a 100%);
}

/* Scroll Depth Colors */
.chart-bar-fill.scroll-low {
    background: linear-gradient(90deg, #ff5252 0%, #ff8a80 100%);
}

.chart-bar-fill.scroll-med {
    background: linear-gradient(90deg, #ff9800 0%, #ffcc80 100%);
}

.chart-bar-fill.scroll-high {
    background: linear-gradient(90deg, #4caf50 0%, #a5d6a7 100%);
}

.chart-bar-fill.scroll-complete {
    background: linear-gradient(90deg, #2196f3 0%, #90caf9 100%);
}

.chart-bar-value {
    font-family: 'Prompt', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Social Stats Grid */
.social-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.social-stat-card {
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.social-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.social-stat-card.instagram {
    background: linear-gradient(135deg, rgba(131, 58, 180, 0.3), rgba(253, 29, 29, 0.3), rgba(252, 176, 69, 0.3));
}

.social-stat-card.tiktok {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.5), rgba(37, 244, 238, 0.2), rgba(254, 44, 85, 0.2));
}

.social-stat-card.facebook {
    background: linear-gradient(135deg, rgba(24, 119, 242, 0.3), rgba(66, 165, 245, 0.2));
}

.social-stat-card.youtube {
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.3), rgba(190, 0, 0, 0.2));
}

.social-stat-card.line {
    background: linear-gradient(135deg, rgba(0, 185, 0, 0.3), rgba(0, 140, 0, 0.2));
}

.social-breakdown {
    font-size: 0.6rem;
    opacity: 0.6;
    margin-top: 5px;
}

.social-stat-icon {
    width: 36px;
    height: 36px;
    margin: 0 auto 10px;
    color: white;
}

.social-stat-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.social-stat-value {
    font-family: 'Prompt', sans-serif;
    font-size: 1.8rem;
    font-weight: 600;
    color: white;
    margin-bottom: 3px;
}

.social-stat-label {
    font-family: 'Prompt', sans-serif;
    font-size: 0.7rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Hot Comments List */
.hot-comments-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.hot-comment-card {
    padding: 18px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 3px solid var(--gold);
}

.hot-comment-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}

.hot-comment-user {
    font-family: 'Cormorant Garamond', 'Prompt', serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--gold);
    font-style: italic;
}

.hot-comment-replies {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: rgba(154, 170, 212, 0.2);
    border-radius: 12px;
    font-family: 'Prompt', sans-serif;
    font-size: 0.7rem;
    color: var(--gold);
}

.hot-comment-replies svg {
    width: 12px;
    height: 12px;
}

.hot-comment-card-name {
    font-family: 'Prompt', sans-serif;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 8px;
}

.hot-comment-text {
    font-family: 'Prompt', sans-serif;
    font-size: 0.9rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
}

/* Loading Spinner */
.loading-spinner {
    width: 30px;
    height: 30px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 20px auto;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Analytics Footer */
.analytics-footer {
    text-align: center;
    padding: 40px 20px 60px;
    color: rgba(255, 255, 255, 0.4);
    font-family: 'Prompt', sans-serif;
    font-size: 0.8rem;
}

.analytics-brand {
    font-family: 'Cormorant Garamond', 'Prompt', serif;
    font-size: 1.2rem;
    color: var(--gold);
    letter-spacing: 3px;
    margin-top: 10px;
}

/* User Journey Funnel */
.funnel-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.funnel-step {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 15px;
    background: linear-gradient(90deg, rgba(255,255,255,0.1), transparent);
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

.funnel-step::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: var(--bar-width, 0%);
    background: linear-gradient(90deg, var(--gold), transparent);
    opacity: 0.3;
    transition: width 0.5s ease;
}

.funnel-step-label {
    font-family: 'Prompt', sans-serif;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.9);
    min-width: 80px;
    z-index: 1;
}

.funnel-step-value {
    font-family: 'Prompt', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: var(--gold);
    z-index: 1;
}

.funnel-step-percent {
    margin-left: auto;
    font-family: 'Prompt', sans-serif;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.6);
    z-index: 1;
}

/* Device Stats Grid */
.device-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.device-stat {
    background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.device-icon {
    width: 40px;
    height: 40px;
    margin: 0 auto 10px;
    color: var(--gold);
}

.device-name {
    font-family: 'Prompt', sans-serif;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.7);
    margin-bottom: 5px;
}

.device-value {
    font-family: 'Prompt', sans-serif;
    font-size: 1.4rem;
    font-weight: 500;
    color: white;
}

.device-percent {
    font-family: 'Prompt', sans-serif;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.5);
}

/* Feature Usage Grid */
.feature-usage-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.feature-item {
    background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 15px;
}

.feature-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.feature-name {
    font-family: 'Prompt', sans-serif;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.9);
}

.feature-total {
    font-family: 'Prompt', sans-serif;
    font-size: 0.75rem;
    color: var(--gold);
}

.feature-breakdown {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.feature-action {
    display: flex;
    justify-content: space-between;
    font-family: 'Prompt', sans-serif;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.6);
}

/* Position Heatmap */
.position-heatmap {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

.heatmap-circle {
    position: relative;
    width: 250px;
    height: 250px;
}

.heatmap-section {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.1);
    border: 2px solid rgba(255,255,255,0.2);
    transition: all 0.3s ease;
}

.heatmap-section.hot {
    background: linear-gradient(135deg, rgba(255,75,75,0.4), rgba(255,150,75,0.3));
    border-color: rgba(255,100,100,0.5);
}

.heatmap-section.warm {
    background: linear-gradient(135deg, rgba(255,200,75,0.3), rgba(255,150,75,0.2));
    border-color: rgba(255,200,100,0.4);
}

.heatmap-section.cool {
    background: linear-gradient(135deg, rgba(75,150,255,0.2), rgba(100,200,255,0.1));
    border-color: rgba(100,200,255,0.3);
}

.heatmap-section-label {
    font-family: 'Prompt', sans-serif;
    font-size: 0.65rem;
    color: rgba(255,255,255,0.7);
}

.heatmap-section-value {
    font-family: 'Prompt', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    color: white;
}

.heatmap-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
    border: 2px solid rgba(255,255,255,0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.heatmap-center-label {
    font-family: 'Prompt', sans-serif;
    font-size: 0.65rem;
    color: rgba(255,255,255,0.5);
}

.heatmap-center-value {
    font-family: 'Prompt', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: var(--gold);
}

/* Responsive adjustments for new sections */
@media (max-width: 480px) {
    .device-stats-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .device-stat {
        padding: 12px 8px;
    }

    .device-icon {
        width: 30px;
        height: 30px;
    }

    .device-value {
        font-size: 1.1rem;
    }

    .feature-usage-grid {
        grid-template-columns: 1fr;
    }

    .heatmap-circle {
        width: 200px;
        height: 200px;
    }

    .heatmap-section {
        width: 45px;
        height: 45px;
    }

    .heatmap-center {
        width: 60px;
        height: 60px;
    }
}

/* Empty State */
.analytics-empty {
    text-align: center;
    padding: 30px;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Prompt', sans-serif;
    font-size: 0.85rem;
}

/* Responsive */
@media (max-width: 480px) {
    .analytics-title {
        font-size: 1.8rem;
    }

    .stats-grid {
        gap: 10px;
    }

    .stat-card {
        padding: 15px;
    }

    .stat-value {
        font-size: 1.6rem;
    }

    .top-card-image {
        width: 35px;
        height: 62px;
    }

    .social-stats-grid {
        gap: 10px;
    }

    .all-cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(45px, 1fr));
        gap: 5px;
        padding: 10px;
    }

    .card-grid-image {
        width: 38px;
        height: 58px;
    }

    .card-grid-count {
        font-size: 0.55rem;
    }

    .card-grid-rank {
        width: 14px;
        height: 14px;
        font-size: 0.5rem;
        top: -3px;
        right: -3px;
    }
}

/* ========================================
   Blessing Celebration Screen
   ======================================== */

.blessing-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(6, 10, 31, 0.8);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 10000;
    display: none;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    overflow-y: auto;
    overflow-x: hidden;
}

.blessing-screen.active {
    display: flex;
    animation: blessingFadeIn 0.8s ease forwards;
}

.blessing-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: auto;
    padding: 20px 0;
}

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

/* Glowing background effect */
.blessing-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(168, 184, 216, 0.3) 0%, rgba(168, 184, 216, 0.1) 40%, transparent 70%);
    transform: translate(-50%, -60%);
    animation: blessingGlow 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes blessingGlow {
    0%, 100% {
        transform: translate(-50%, -60%) scale(1);
        opacity: 0.8;
    }
    50% {
        transform: translate(-50%, -60%) scale(1.2);
        opacity: 1;
    }
}


/* Card container - 3D spinning effect like homepage */
.blessing-card-container {
    position: relative;
    width: 200px;
    height: 357px; /* 200 * 1.783 (tarot ratio) */
    perspective: 1500px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    animation: blessingCardZoomIn 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    transform: scale(0);
}

/* Pulsating aura behind the card */
.blessing-card-container::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 280px;
    height: 380px;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse at center,
        rgba(168, 184, 216, 0.4) 0%,
        rgba(168, 184, 216, 0.2) 30%,
        rgba(130, 150, 190, 0.1) 50%,
        transparent 70%
    );
    border-radius: 50%;
    animation: auraGlow 3s ease-in-out infinite;
    z-index: -1;
    filter: blur(20px);
}

/* Reflection below the card */
.blessing-card-container::after {
    content: '';
    position: absolute;
    bottom: -60px;
    left: 50%;
    width: 160px;
    height: 30px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center,
        rgba(168, 184, 216, 0.3) 0%,
        rgba(168, 184, 216, 0.1) 40%,
        transparent 70%
    );
    border-radius: 50%;
    filter: blur(8px);
    animation: reflectionPulse 3s ease-in-out infinite;
}

/* Wrapper - spins around Y-axis */
.blessing-card-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transform-origin: center center;
    animation: blessingSpinOnY 3s linear infinite;
}

/* Inner card - tilted like homepage */
.blessing-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transform-origin: center center;
    /* Tilt so diagonal becomes vertical - same as homepage */
    transform: rotate(-29.3deg);
}

/* Card faces */
.blessing-card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 12px;
    overflow: hidden;
    box-shadow:
        0 30px 60px rgba(160, 180, 220, 0.5),
        0 15px 40px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(168, 184, 216, 0.4);
}

.blessing-card-face img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blessing-card-back {
    transform: rotateY(180deg);
}

/* Blessing sparkle particles */
.blessing-card-container .blessing-sparkle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle,
        rgba(255, 255, 255, 1) 0%,
        rgba(200, 216, 240, 0.8) 30%,
        transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    box-shadow: 0 0 6px rgba(200, 216, 240, 0.8);
    z-index: 10;
}

@keyframes blessingSparkleRise {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(0);
    }
    20% {
        opacity: 1;
        transform: translate(calc(var(--move-x) * 0.2), calc(var(--move-y) * 0.2)) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(var(--move-x), var(--move-y)) scale(0.5);
    }
}

@keyframes blessingSpinOnY {
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(360deg);
    }
}

@keyframes auraGlow {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.15);
        opacity: 1;
    }
}

@keyframes reflectionPulse {
    0%, 100% {
        transform: translateX(-50%) scaleX(1);
        opacity: 0.6;
    }
    50% {
        transform: translateX(-50%) scaleX(1.2);
        opacity: 0.9;
    }
}

@keyframes blessingCardZoomIn {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}


/* Card area wrapper */
.blessing-card-area {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Comment overlay - main text element */
.blessing-comment-overlay {
    text-align: center;
    z-index: 20;
    animation: blessingTextFadeIn 1.2s ease 1s forwards;
    opacity: 0;
    width: 90vw;
    max-width: 90vw;
    padding: 0 20px;
    margin-top: 15px;
}

@keyframes blessingTextFadeIn {
    from {
        opacity: 0;
        transform: translateY(25px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes commentOverlayFadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(25px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.blessing-name {
    font-family: 'Prompt', sans-serif;
    font-size: 1.5rem;
    font-weight: 500;
    color: #A8B8D8;
    margin-bottom: 12px;
    text-shadow:
        0 2px 20px rgba(0, 0, 0, 0.95),
        0 0 40px rgba(168, 184, 216, 0.4);
    letter-spacing: 1px;
}

.blessing-comment {
    font-family: 'Prompt', sans-serif;
    font-size: 1.25rem;
    font-weight: 300;
    font-style: italic;
    color: rgba(232, 232, 240, 0.95);
    width: 100%;
    max-width: none;
    margin: 0 auto;
    line-height: 1.7;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.95);
}

/* Blessing Login CTA for non-logged-in users */
.blessing-login-cta {
    text-align: center;
    margin-top: 30px;
    padding: 20px;
    opacity: 0;
    animation: socialItemFadeIn 0.8s ease 1s forwards;
}

.blessing-login-cta .friends-cta-icon {
    margin-bottom: 10px;
    color: rgba(154, 170, 212, 0.5);
}

.blessing-login-cta .cta-sparkles {
    margin-bottom: 8px;
}

.blessing-login-cta .cta-sparkles .sparkle {
    display: inline-block;
    color: rgba(154, 170, 212, 0.5);
    font-size: 1rem;
    margin: 0 6px;
    animation: sparkleFloat 2s ease-in-out infinite;
}

.blessing-login-cta .cta-sparkles .s2 {
    animation-delay: 0.3s;
}

.blessing-login-cta .cta-sparkles .s3 {
    animation-delay: 0.6s;
}

.blessing-login-cta-text {
    font-size: 1.1rem;
    font-weight: 500;
    color: #C0C8E0;
    margin-bottom: 6px;
}

.blessing-login-cta .cta-subtitle {
    font-size: 0.8rem;
    color: rgba(154, 170, 212, 0.6);
    margin-bottom: 8px;
}

.blessing-login-cta .friends-login-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 24px;
    border: none;
    border-radius: 20px;
    font-family: 'Prompt', sans-serif;
    font-size: 0.85rem;
    font-weight: 400;
    cursor: pointer;
    background: #1877F2;
    color: #fff;
    box-shadow: 0 3px 12px rgba(24, 119, 242, 0.3);
    transition: all 0.2s ease;
}

.blessing-login-cta .friends-login-btn:hover {
    background: #166FE5;
    transform: translateY(-1px);
    box-shadow: 0 5px 18px rgba(24, 119, 242, 0.4);
}

.blessing-login-cta .friends-login-btn svg {
    width: 16px;
    height: 16px;
}

/* Save & share section */
.blessing-save-share-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    opacity: 0;
    animation: socialItemFadeIn 0.6s ease 0.8s forwards;
}

.blessing-save-share-section .save-section,
.blessing-save-share-section .share-section {
    width: 100%;
    margin-top: 0;
}

.blessing-save-share-section .save-row {
    justify-content: center;
}

/* Branding */
.blessing-branding {
    margin-top: 16px;
    opacity: 0;
    animation: socialItemFadeIn 0.6s ease forwards;
    animation-delay: var(--delay);
}

.blessing-branding-text {
    font-family: 'Cormorant Garamond', 'Prompt', serif;
    font-size: 1.1rem;
    font-weight: 400;
    color: rgba(168, 184, 216, 0.5);
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Social icons — compact row (default / small screens) */
.blessing-social-section {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 16px;
    opacity: 0;
    animation: socialItemFadeIn 0.6s ease forwards;
    animation-delay: var(--delay);
}

.blessing-social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(168, 184, 216, 0.2);
    color: rgba(232, 232, 240, 0.6);
    text-decoration: none;
    transition: all 0.3s ease;
    gap: 8px;
}

.blessing-social-icon:hover {
    color: #A8B8D8;
    border-color: rgba(168, 184, 216, 0.5);
    background: rgba(168, 184, 216, 0.08);
    transform: scale(1.05);
}

.blessing-social-icon svg {
    width: 18px;
    height: 18px;
    min-width: 18px;
    fill: currentColor;
}

.blessing-social-label {
    display: none;
}

/* Expanded social list on tall mobile screens */
@media (min-height: 780px) and (max-width: 767px) {
    .blessing-social-section {
        flex-direction: column;
        gap: 10px;
    }

    .blessing-social-icon {
        width: auto;
        height: auto;
        border-radius: 20px;
        padding: 7px 18px 7px 12px;
        font-size: 0.82rem;
    }

    .blessing-social-label {
        display: inline;
    }
}

@keyframes socialItemFadeIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* LINE CTA section — prominent horoscope banner */
.blessing-line-section {
    display: flex;
    margin-top: 22px;
    opacity: 0;
    animation: socialItemFadeIn 0.6s ease forwards;
    animation-delay: var(--delay);
    width: 100%;
}

.blessing-line-cta {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 18px;
    border-radius: 16px;
    border: 1px solid rgba(0, 185, 0, 0.3);
    background: linear-gradient(135deg, rgba(0, 60, 0, 0.5) 0%, rgba(0, 40, 0, 0.6) 50%, rgba(0, 55, 0, 0.45) 100%);
    color: #e8f5e8;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 0 20px rgba(0, 185, 0, 0.1),
        0 4px 15px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(0, 185, 0, 0.1);
    animation: socialItemFadeIn 0.6s ease forwards, lineCtaPulse 3.5s ease-in-out 2s infinite;
    animation-delay: var(--delay);
}

/* Glow border sweep */
.blessing-line-cta-glow {
    position: absolute;
    inset: -1px;
    border-radius: 17px;
    background: linear-gradient(135deg, rgba(0,185,0,0.4), transparent 40%, transparent 60%, rgba(0,210,0,0.3));
    background-size: 200% 200%;
    animation: lineGlowSweep 4s ease-in-out infinite;
    opacity: 0.5;
    z-index: 0;
    pointer-events: none;
}

/* Shimmer */
.blessing-line-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 210, 0, 0.08), rgba(0, 255, 0, 0.12), rgba(0, 210, 0, 0.08), transparent);
    animation: lineCtaShimmer 5s ease-in-out 2.5s infinite;
    z-index: 1;
    pointer-events: none;
}

/* FREE badge */
.blessing-line-cta-badge {
    position: absolute;
    top: -1px;
    right: 16px;
    background: linear-gradient(135deg, #00C800, #00A000);
    color: #fff;
    font-family: 'Prompt', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    padding: 3px 10px 4px;
    border-radius: 0 0 8px 8px;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(0, 185, 0, 0.3);
    z-index: 2;
    animation: badgeBounce 2s ease-in-out 3s infinite;
}

/* Text content */
.blessing-line-cta-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
    z-index: 1;
}

.blessing-line-cta-title {
    font-family: 'Prompt', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #b8f0b8;
    letter-spacing: 0.5px;
    line-height: 1.3;
}

.blessing-line-cta-sub {
    font-family: 'Prompt', sans-serif;
    font-size: 0.78rem;
    font-weight: 400;
    color: rgba(0, 210, 0, 0.7);
    letter-spacing: 0.3px;
}

/* LINE icon + arrow */
.blessing-line-cta-icon {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    z-index: 1;
}

.blessing-line-cta-icon svg:first-child {
    width: 28px;
    height: 28px;
    fill: #00C800;
    filter: drop-shadow(0 0 4px rgba(0, 185, 0, 0.3));
    transition: all 0.3s ease;
}

.blessing-line-cta-arrow {
    width: 16px;
    height: 16px;
    color: rgba(0, 210, 0, 0.5);
    animation: lineArrowNudge 2s ease-in-out infinite;
}

/* Hover */
.blessing-line-cta:hover {
    border-color: rgba(0, 210, 0, 0.6);
    background: linear-gradient(135deg, rgba(0, 75, 0, 0.6) 0%, rgba(0, 55, 0, 0.7) 50%, rgba(0, 70, 0, 0.55) 100%);
    transform: translateY(-2px) scale(1.01);
    box-shadow:
        0 0 30px rgba(0, 185, 0, 0.2),
        0 8px 25px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(0, 210, 0, 0.15);
}
.blessing-line-cta:hover .blessing-line-cta-glow { opacity: 0.8; }
.blessing-line-cta:hover .blessing-line-cta-title { color: #d0ffd0; }
.blessing-line-cta:hover .blessing-line-cta-icon svg:first-child {
    fill: #00E000;
    filter: drop-shadow(0 0 8px rgba(0, 210, 0, 0.5));
}
.blessing-line-cta:hover .blessing-line-cta-arrow { color: rgba(0, 230, 0, 0.8); }

/* Active */
.blessing-line-cta:active {
    transform: translateY(0) scale(0.98);
    transition: all 0.1s ease;
}

/* Keyframes */
@keyframes lineCtaPulse {
    0%, 100% { box-shadow: 0 0 20px rgba(0,185,0,0.1), 0 4px 15px rgba(0,0,0,0.3), inset 0 1px 0 rgba(0,185,0,0.1); }
    50% { box-shadow: 0 0 28px rgba(0,185,0,0.18), 0 4px 20px rgba(0,0,0,0.3), inset 0 1px 0 rgba(0,185,0,0.15); }
}

@keyframes lineGlowSweep {
    0% { background-position: 0% 0%; }
    50% { background-position: 100% 100%; }
    100% { background-position: 0% 0%; }
}

@keyframes lineCtaShimmer {
    0%, 100% { left: -50%; opacity: 0; }
    40% { opacity: 1; }
    60% { opacity: 1; }
    100% { left: 120%; opacity: 0; }
}

@keyframes badgeBounce {
    0%, 100% { transform: translateY(0); }
    40% { transform: translateY(-3px); }
    60% { transform: translateY(-1px); }
}

@keyframes lineArrowNudge {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(4px); }
}

/* Restart button - bottom right */
.blessing-restart-btn {
    position: absolute;
    bottom: 25px;
    right: 25px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 24px;
    border-radius: 25px;
    border: 1.5px solid rgba(168, 184, 216, 0.6);
    background: rgba(168, 184, 216, 0.2);
    color: #C0C8E0;
    cursor: pointer;
    font-family: 'Prompt', sans-serif;
    font-weight: 400;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    animation: buttonFadeIn 1s ease 2.8s forwards;
    opacity: 0;
    box-shadow: 0 0 12px rgba(168, 184, 216, 0.15);
}

.blessing-restart-btn:hover {
    background: rgba(168, 184, 216, 0.35);
    border-color: rgba(168, 184, 216, 0.8);
    color: #E0E4F0;
    box-shadow: 0 0 20px rgba(168, 184, 216, 0.25);
}

.restart-arrow {
    font-weight: 400;
    letter-spacing: -2px;
}

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

/* Responsive */
@media (max-width: 480px) {
    .blessing-screen {
        padding-bottom: 50px;
    }

    .blessing-card-container {
        width: 130px;
        height: 232px;
    }

    .blessing-comment-overlay {
        width: 95vw;
        max-width: 95vw;
        margin-top: 10px;
    }

    .blessing-name {
        font-size: 1.1rem;
        margin-bottom: 6px;
    }

    .blessing-comment {
        font-size: 0.95rem;
        max-width: none;
    }

    .blessing-login-cta {
        margin-top: 14px;
        padding: 12px;
    }

    .blessing-save-share-section {
        margin-top: 18px;
    }

    .blessing-restart-btn {
        bottom: 15px;
        right: 15px;
        padding: 8px 14px;
        font-size: 0.75rem;
    }

    .blessing-glow {
        width: 300px;
        height: 300px;
    }

    .blessing-social-item {
        font-size: 0.8rem;
    }

    .blessing-social-item svg {
        width: 18px;
        height: 18px;
    }
}

/* Short viewport (e.g. iPhone SE, landscape) */
@media (max-height: 700px) {
    .blessing-screen {
        padding-bottom: 40px;
    }

    .blessing-content {
        padding: 5px 0;
    }

    .blessing-card-container {
        width: 100px;
        height: 178px;
    }

    .blessing-comment-overlay {
        margin-top: 8px;
    }

    .blessing-name {
        font-size: 1rem;
        margin-bottom: 4px;
    }

    .blessing-comment {
        font-size: 0.85rem;
    }

    .blessing-login-cta {
        margin-top: 10px;
        padding: 8px;
    }

    .blessing-save-share-section {
        margin-top: 12px;
    }

    .blessing-social-section {
        margin-top: 10px;
    }

    .blessing-line-section {
        margin-top: 10px;
    }
}

/* Desktop: result panel — centered hero card + content */
@media (min-width: 768px) {
    .result-sticky-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        max-width: 560px;
        margin: 0 auto;
        padding: 32px 24px 24px;
        gap: 14px;
    }

    .result-sticky-card-img {
        width: 160px;
    }

    .result-sticky-card-info {
        align-items: center;
    }

    .result-sticky-card-quote {
        -webkit-line-clamp: none;
    }

    /* Minimized: horizontal bar, full-width background */
    .result-sticky-card.minimized {
        flex-direction: row;
        text-align: left;
        max-width: 100%;
        padding: 10px 24px;
        gap: 14px;
    }

    .result-sticky-card.minimized .result-sticky-card-img {
        width: 50px;
    }

    .result-sticky-card.minimized .result-sticky-card-info {
        align-items: flex-start;
    }

    .result-sticky-card.minimized .result-sticky-card-quote {
        -webkit-line-clamp: 1;
    }

    /* Multi-sticky: always horizontal row on desktop */
    .result-sticky-card.multi-sticky {
        flex-direction: row;
        max-width: 100%;
        padding: 24px calc(50% - 48px) 20px;
    }

    .result-sticky-card.multi-sticky .multi-result-card-img {
        width: 80px;
    }

    .result-sticky-card.multi-sticky.minimized {
        flex-direction: row;
        max-width: 100%;
        padding: 10px calc(50% - 28px) 8px;
    }

    .result-sticky-card.multi-sticky.minimized .multi-result-card-img {
        width: 44px;
    }
}

/* Desktop: two-column layout */
@media (min-width: 768px) {
    .blessing-content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-content: center;
        gap: 0 50px;
        max-width: 820px;
        margin: auto 0;
        padding: 30px 20px;
    }

    /* Card pinned to left column, spanning all right-side rows */
    .blessing-card-area {
        grid-column: 1;
        grid-row: 1 / span 6;
        align-self: center;
        justify-self: center;
    }

    .blessing-card-container {
        width: 200px;
        height: 357px;
    }

    /* Comment overlay: absolute within card area for grid layout */
    .blessing-comment-overlay {
        position: absolute;
        bottom: -30px;
        left: 50%;
        transform: translateX(-50%);
        margin-top: 0;
        width: 340px;
        max-width: 340px;
        animation-name: commentOverlayFadeIn;
    }

    .blessing-name {
        font-size: 1.4rem;
        margin-bottom: 12px;
    }

    .blessing-comment {
        font-size: 1.1rem;
        max-width: none;
    }

    /* Right column items */
    .blessing-login-cta,
    .blessing-save-share-section,
    .blessing-branding,
    .blessing-social-section,
    .blessing-line-section {
        grid-column: 2;
        justify-self: start;
    }

    .blessing-save-share-section {
        margin-top: 0;
    }

    .blessing-save-share-section .save-row {
        justify-content: flex-start;
    }

    .blessing-branding {
        margin-top: 24px;
    }

    /* Always show labels on desktop */
    .blessing-social-section {
        flex-direction: column;
        justify-content: flex-start;
        gap: 10px;
        margin-top: 20px;
    }

    .blessing-social-icon {
        width: auto;
        height: auto;
        border-radius: 20px;
        padding: 7px 18px 7px 12px;
        font-size: 0.82rem;
    }

    .blessing-social-label {
        display: inline;
    }

    .blessing-line-section {
        margin-top: 16px;
    }

    .blessing-glow {
        width: 500px;
        height: 500px;
    }

    .blessing-restart-btn {
        bottom: 30px;
        right: 30px;
    }
}

/* Large desktop */
@media (min-width: 1024px) {
    .blessing-content {
        gap: 0 70px;
        max-width: 950px;
    }

    .blessing-card-container {
        width: 240px;
        height: 428px;
    }

    .blessing-comment-overlay {
        width: 400px;
        max-width: 400px;
    }

    .blessing-name {
        font-size: 1.6rem;
    }

    .blessing-comment {
        font-size: 1.25rem;
    }

    .blessing-branding-text {
        font-size: 1.3rem;
    }

    .blessing-social-icon {
        font-size: 0.88rem;
        padding: 8px 20px 8px 14px;
    }

    .blessing-line-cta-title {
        font-size: 1.05rem;
    }
}

/* ==================== LANGUAGE SWITCHER ==================== */
.lang-switcher {
    position: fixed;
    top: 15px;
    left: 15px;
    z-index: 10000;
}

.lang-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(13, 19, 51, 0.95);
    border: 1px solid rgba(140, 160, 200, 0.2);
    border-radius: 20px;
    cursor: pointer;
    font-family: 'Prompt', sans-serif;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--burgundy);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
}

.lang-btn:hover {
    background: #111638;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.lang-flag {
    font-size: 1rem;
    line-height: 1;
}

.lang-code {
    font-weight: 500;
}

.lang-arrow {
    width: 12px;
    height: 12px;
    transition: transform 0.2s ease;
}

.lang-switcher.open .lang-arrow {
    transform: rotate(180deg);
}

.lang-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 140px;
    background: rgba(13, 19, 51, 0.98);
    border: 1px solid rgba(140, 160, 200, 0.2);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    overflow: hidden;
}

.lang-switcher.open .lang-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: 'Prompt', sans-serif;
    font-size: 0.85rem;
    color: #B8C0D8;
    transition: all 0.15s ease;
    text-align: left;
}

.lang-option:hover {
    background: rgba(140, 160, 200, 0.08);
}

.lang-option.active {
    background: rgba(168, 184, 216, 0.15);
    color: var(--burgundy);
    font-weight: 500;
}

.lang-option .lang-flag {
    font-size: 1.1rem;
}

.lang-option .lang-name {
    flex: 1;
}

/* Hide lang switcher on analytics page */
.analytics-page.show ~ .lang-switcher {
    display: none;
}

@media (max-width: 480px) {
    .lang-switcher {
        top: 10px;
        left: 10px;
    }

    .lang-btn {
        padding: 6px 10px;
        font-size: 0.75rem;
    }

    .lang-flag {
        font-size: 0.9rem;
    }

    .profile-switcher {
        top: 10px;
        right: 10px;
    }

    .fb-login-btn {
        padding: 6px 10px;
        font-size: 0.75rem;
    }
}

/* ==================== MULTI-CARD RESULT ==================== */
.multi-result-cards {
    padding: 0 0 20px;
}

/* Horizontal card thumbnails row */
.multi-result-row {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 10px 0 24px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.multi-result-card-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    animation: multiCardFadeIn 0.5s ease both;
}
.multi-result-card-item:nth-child(1) { animation-delay: 0s; }
.multi-result-card-item:nth-child(2) { animation-delay: 0.1s; }
.multi-result-card-item:nth-child(3) { animation-delay: 0.2s; }
.multi-result-card-item:nth-child(4) { animation-delay: 0.3s; }

.multi-result-card-img {
    width: 72px;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 2px 12px rgba(154, 170, 212, 0.25), 0 0 20px rgba(154, 170, 212, 0.1);
    border: 1px solid rgba(154, 170, 212, 0.2);
    transition: transform 0.3s ease;
}
.multi-result-card-item:hover .multi-result-card-img {
    transform: translateY(-3px);
}

.multi-result-card-label {
    margin-top: 8px;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(154, 170, 212, 0.8);
    font-weight: 500;
}

/* Per-card interpretation section */
.multi-result-section {
    margin-bottom: 8px;
    animation: multiSectionSlideUp 0.5s ease both;
}
.multi-result-section:nth-child(2) { animation-delay: 0.15s; }
.multi-result-section:nth-child(3) { animation-delay: 0.3s; }
.multi-result-section:nth-child(4) { animation-delay: 0.45s; }
.multi-result-section:nth-child(5) { animation-delay: 0.6s; }

.multi-result-position {
    text-align: center;
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    color: #9AAAD4;
    margin-bottom: 6px;
    font-weight: 600;
}

.multi-result-card-name {
    text-align: center;
    font-size: 1.15rem;
    font-weight: 700;
    color: #C0C8E0;
    margin-bottom: 6px;
    letter-spacing: 0.02em;
}

.multi-result-quote {
    text-align: center;
    font-style: italic;
    font-size: 0.85rem;
    color: rgba(192, 200, 224, 0.65);
    margin-bottom: 14px;
    line-height: 1.5;
}

.multi-result-glass {
    background: rgba(15, 22, 55, 0.6);
    border: 1px solid rgba(154, 170, 212, 0.12);
    border-radius: 14px;
    padding: 18px 16px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.multi-result-interpretation {
    font-size: 0.92rem;
    line-height: 1.75;
    color: rgba(192, 200, 224, 0.85);
}

/* Divider between cards */
.multi-result-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 20px 0;
}
.multi-result-divider span {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(154, 170, 212, 0.2), transparent);
}

@keyframes multiCardFadeIn {
    from { opacity: 0; transform: translateY(12px) scale(0.9); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes multiSectionSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==================== SOCIAL FEATURES ==================== */
/* Hide Facebook login and social sharing — only Social button visible */
#profileSwitcher,
.footer-social,
.blessing-login-cta,
.result-page .share-section {
    display: none !important;
}

/* ── FUNCTIONAL ADDITIONS (added post fa67435) ── */

/* Reveal overlay: disable fan animations + big-fan scaling + no-quote */
.reveal-overlay [class*="fc-"],
.reveal-overlay [class*="tc-"],
.reveal-overlay [class*="twc-"] {
    animation: none !important;
}

/* Big fan (10/12 cards): scale applied via JS to fit viewport precisely */
.reveal-overlay .reveal-big-fan {
    transform-origin: center center;
    flex-shrink: 0;
}

/* Hide quote + divider in reveal when no interpretations available */
.reveal-card-info.no-quote .reveal-card-info-divider,
.reveal-card-info.no-quote .reveal-card-info-quote {
    display: none;
}

/* Coming-soon card list (10/12-card result view) */
.coming-soon-card-list {
    padding: 8px 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    animation: multiSectionSlideUp 0.5s 0.15s ease both;
    opacity: 0;
    animation-fill-mode: forwards;
}
.coming-soon-card-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(160, 180, 220, 0.06);
    border: 1px solid rgba(154, 170, 212, 0.12);
    border-radius: 10px;
    padding: 8px 12px;
    transition: background 0.2s;
}
.coming-soon-card-row:hover {
    background: rgba(160, 180, 220, 0.11);
}
.coming-soon-card-num {
    font-size: 0.8rem;
    color: var(--gold);
    opacity: 0.7;
    min-width: 20px;
    text-align: center;
    font-weight: 600;
}
.coming-soon-card-thumb {
    width: 36px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid rgba(154, 170, 212, 0.2);
    flex-shrink: 0;
}
.coming-soon-card-name {
    font-size: 0.9rem;
    color: var(--burgundy);
    letter-spacing: 0.03em;
    font-weight: 500;
}


/* ═══════════════════════════════════════════════════════════════════════
   PWA Install Banner
   ═══════════════════════════════════════════════════════════════════════ */

.pwa-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10001;
    padding: 0 0 env(safe-area-inset-bottom, 0) 0;
    display: none;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
}

.pwa-banner.pwa-banner--visible {
    transform: translateY(0);
    pointer-events: all;
}

.pwa-banner-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #111638 0%, #0d1333 100%);
    border-top: 1px solid rgba(154, 170, 212, 0.3);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.5), 0 -1px 0 rgba(154, 170, 212, 0.08);
    padding: 14px 16px 14px 16px;
    margin: 0;
}

.pwa-banner-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    flex-shrink: 0;
    border: 1px solid rgba(154, 170, 212, 0.25);
    background: linear-gradient(135deg, #1a2555 0%, #0d1333 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #9AAAD4;
}

.pwa-banner-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pwa-banner-title {
    font-family: 'Prompt', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #C0C8E0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pwa-banner-sub {
    font-family: 'Prompt', sans-serif;
    font-size: 11px;
    font-weight: 300;
    color: rgba(154, 170, 212, 0.65);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pwa-banner-btn {
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(154, 170, 212, 0.2) 0%, rgba(120, 140, 190, 0.15) 100%);
    border: 1px solid rgba(154, 170, 212, 0.45);
    color: #C0C8E0;
    font-family: 'Prompt', sans-serif;
    font-size: 12px;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: 20px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s, border-color 0.2s, transform 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.pwa-banner-btn:active {
    transform: scale(0.95);
    background: linear-gradient(135deg, rgba(154, 170, 212, 0.35) 0%, rgba(120, 140, 190, 0.28) 100%);
}

.pwa-banner-close {
    flex-shrink: 0;
    background: none;
    border: none;
    color: rgba(154, 170, 212, 0.45);
    font-size: 16px;
    line-height: 1;
    padding: 8px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.2s;
}

.pwa-banner-close:active {
    color: rgba(192, 200, 224, 0.8);
}

/* ── iOS Install Modal ────────────────────────────────── */

.pwa-ios-modal {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10002;
    display: none;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
}

.pwa-ios-modal.pwa-ios-modal--visible {
    transform: translateY(0);
    pointer-events: all;
}

.pwa-ios-inner {
    background: linear-gradient(160deg, #141b45 0%, #0d1333 60%, #080d24 100%);
    border-top: 1px solid rgba(154, 170, 212, 0.35);
    border-radius: 20px 20px 0 0;
    padding: 24px 24px calc(24px + env(safe-area-inset-bottom, 0)) 24px;
    text-align: center;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.6);
    position: relative;
}

.pwa-ios-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    color: rgba(154, 170, 212, 0.5);
    font-size: 18px;
    cursor: pointer;
    padding: 4px;
    -webkit-tap-highlight-color: transparent;
}

.pwa-ios-glyph {
    font-size: 36px;
    color: #9AAAD4;
    margin: 4px 0 0;
    text-shadow: 0 0 20px rgba(154, 170, 212, 0.5);
}

.pwa-ios-title {
    font-family: 'Prompt', sans-serif;
    font-size: 17px;
    font-weight: 500;
    color: #C0C8E0;
    margin: 12px 0 18px;
}

.pwa-ios-steps {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 12px;
    counter-reset: ios-steps;
}

.pwa-ios-steps li {
    font-family: 'Prompt', sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: rgba(192, 200, 224, 0.85);
    padding-left: 32px;
    position: relative;
    counter-increment: ios-steps;
}

.pwa-ios-steps li::before {
    content: counter(ios-steps);
    position: absolute;
    left: 0;
    top: 0;
    width: 22px;
    height: 22px;
    background: rgba(154, 170, 212, 0.15);
    border: 1px solid rgba(154, 170, 212, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 500;
    color: #9AAAD4;
    line-height: 22px;
    text-align: center;
}

.pwa-ios-shareicon {
    display: inline-block;
    background: rgba(154, 170, 212, 0.15);
    border: 1px solid rgba(154, 170, 212, 0.25);
    border-radius: 6px;
    padding: 1px 6px;
    font-size: 13px;
    margin: 0 2px;
}

.pwa-ios-arrow {
    font-size: 22px;
    color: rgba(154, 170, 212, 0.4);
    animation: pwaArrowBounce 1.4s ease-in-out infinite;
    margin-top: 4px;
}

@keyframes pwaArrowBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(6px); }
}

/* ── PWA Static Badge — styles live inline in index.html to bypass SW cache ── */