:root {
    --background: #030711;
    --card-background: #191329;
    --card-border: rgba(255, 255, 255, 0.22);
    --grid-color: rgba(255, 255, 255, 0.25);
    --text-color: #ffffff;
}
.mood-caption {
    position: fixed;
    top: 40px;
    margin-left: 4px;
    rotate: 2deg;
    font-size: 20px;
    color: #3b90a7;
    font-weight: 500;
    font-style: italic;
    line-height: 1.2;
    text-align: center;
}
.mood-card,
.mood-chart {
    overflow: visible;
}
.mood-card {
    margin-left: -24px;
    font-family: 'Montserrat', sans-serif;
    --accent: 210, 0, 179;
    width: min(95%, 300px);
    position: relative;
    border-radius: 20px;
}

.mood-subtitle {
    margin: 0;
    color: #c865df;
    font-size: 14px;
    font-weight: 700;
}

.mood-title {
    margin: 2px 0 5px;
    color: #f063ff;
    font-size: 32px;
    font-weight: 600;
    line-height: 1;
}

.mood-chart {
    display: block;
    width: 100%;
    height: auto;
}

.grid-polygon {
    fill: none;
    stroke: var(--grid-color);
    stroke-width: 1.7;
    stroke-linejoin: round;
}

.axis {
    stroke: var(--grid-color);
    stroke-width: 1.2;
}

.value-area {
    fill: rgb(var(--accent) / 0.3);
    stroke: rgb(var(--accent));
    stroke-width: 1.7;
    stroke-linejoin: round;
    transition: d 0.35s ease;
}

.value-point {
    stroke: #191329;
    stroke-width: 1.5;
    transition: cx 0.35s ease, cy 0.35s ease;
}

.value-label {
    font-size: 16px;
    font-weight: 500;
}

.axis-label {
    font-size: 16px;
    font-weight: 600;
}

.label-happy {
    fill: #c0d52d;
}

.label-sad {
    fill: #4f83d5;
}

.label-nostalgic {
    fill: #d33a5c;
}

.label-inspired {
    fill: #ca52d8;
}

.label-energetic {
    fill: #d8b252;
}

.value-happy {
    fill: #d0df32;
}

.value-sad {
    fill: #4683dc;
}

.value-nostalgic {
    fill: #d53868;
}

.value-inspired {
    fill: #d557df;
}

.value-energetic {
    fill: #d2aa4c;
}


.mood-card-appear-perspective {
    animation: mood-card-appear-perspective 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
    object-fit: cover;
    transform-origin: left center;
    filter: drop-shadow(18px 18px 14px rgba(0, 0, 0, 0.35));
}

@keyframes mood-card-appear-perspective {
    from {
        opacity: 0;
        transform: translateY(20px) perspective(400px) rotateY(0deg);
    }

    to {
        opacity: 1;
        transform: translateY(20px) perspective(400px) rotateY(3deg);
    }
}