:root {
    --dingu-card-gold: rgba(249, 228, 173, 0.22);
    --dingu-card-gold-strong: rgba(249, 228, 173, 0.48);
    --dingu-card-radius: 32px;
    --dingu-card-radius-compact: 24px;
    --dingu-card-shadow: 0 20px 48px rgba(0, 0, 0, 0.22);
    --dingu-card-shadow-compact: 0 14px 30px rgba(0, 0, 0, 0.18);
    --dingu-glass-background: linear-gradient(145deg, rgba(16, 23, 54, 0.82), rgba(19, 32, 57, 0.62));
    --dingu-story-background: linear-gradient(145deg, rgba(249, 228, 173, 0.96), rgba(229, 207, 143, 0.92));
}

.dingu-card {
    box-sizing: border-box;
    border: 1px solid var(--dingu-card-gold) !important;
    border-radius: var(--dingu-card-radius) !important;
    box-shadow: var(--dingu-card-shadow) !important;
}

.dingu-card--compact {
    --dingu-card-radius: var(--dingu-card-radius-compact);
    --dingu-card-shadow: var(--dingu-card-shadow-compact);
}

.dingu-card--glass {
    background: var(--dingu-glass-background) !important;
    color: #fff;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.dingu-card--story {
    background: var(--dingu-story-background) !important;
    color: #101731;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.dingu-card--content.dingu-card--glass,
.dingu-card--content.dingu-card--glass p,
.dingu-card--content.dingu-card--glass li,
.dingu-card--content.dingu-card--glass .mud-typography {
    color: rgba(255, 255, 255, 0.86) !important;
    -webkit-text-stroke: 0 !important;
}

.dingu-card--content.dingu-card--glass h2,
.dingu-card--content.dingu-card--glass h3,
.dingu-card--content.dingu-card--glass h4,
.dingu-card--content.dingu-card--glass h5,
.dingu-card--content.dingu-card--glass strong,
.dingu-card--content.dingu-card--glass .outline {
    color: #f9e4ad !important;
    -webkit-text-stroke: 0 !important;
}

.dingu-card--content.dingu-card--story,
.dingu-card--content.dingu-card--story p,
.dingu-card--content.dingu-card--story li,
.dingu-card--content.dingu-card--story .mud-typography {
    color: #101731 !important;
}

.dingu-card--interactive {
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.dingu-card--interactive:hover,
.dingu-card--interactive:focus-visible {
    border-color: var(--dingu-card-gold-strong) !important;
    box-shadow: 0 22px 42px rgba(0, 0, 0, 0.28), 0 0 28px rgba(249, 228, 173, 0.1) !important;
}

@media (max-width: 700px) {
    :root {
        --dingu-card-radius: 24px;
        --dingu-card-radius-compact: 20px;
    }
}