/* Main card container — transparent background, centered column layout */
.score-card {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    background: transparent;
    padding: 10px 24px 14px;
    margin: 0 auto;
}

/* Title: "optimism score" — light blue-gray with bottom-left solid shadow */
.score-title {
    font-family: 'Outfit', 'Century Gothic', sans-serif;
    font-weight: 700;
    font-size: 3.038rem;
    color: #c5d2dc;
    text-transform: lowercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    text-shadow:
        -2px 2px 0px #4a7a9b,       /* solid blue-gray offset layer */
        -3px 3px 5px rgba(50, 90, 120, 0.28); /* soft depth blur */
    line-height: 1.1;
    margin-bottom: 0;
}

/* Score number — large dark blue with layered light-gray 3D shadow */
.score-number {
    font-family: 'Outfit', 'Century Gothic', sans-serif;
    font-weight: 700;
    font-size: 14.175rem;
    line-height: 1;
    color: #3d6f8e;
    text-shadow:
        -4px 4px 0px #c8d8e4,       /* first solid layer */
        -8px 8px 0px #d8e6ee,       /* second solid layer */
        -11px 11px 14px rgba(190, 215, 230, 0.35); /* final diffuse blur */
    letter-spacing: 0.02em;
    margin-bottom: -12px;           /* pulls domain text closer */
}

/* Domain URL — italic, dark gray with 3-layer progressive 3D shadow */
.score-domain {
    font-family: 'Libre Franklin', 'Franklin Gothic Medium', Arial, sans-serif;
    font-style: italic;
    font-weight: 500;
    font-size: 1.62rem;
    color: #333;
    letter-spacing: 0.10em;
    white-space: nowrap;
    margin-top: 8px;
    margin-bottom: 16px;
    text-shadow:
        -1px 1px 0px #bbb,          /* first solid layer */
        -2px 2px 0px #ccc,          /* second solid layer */
        -3px 3px 5px rgba(0, 0, 0, 0.08); /* soft depth blur */
}

/* TLD extension (.re) — smaller, lighter gray, proportional to domain */
.score-domain .tld {
    font-size: 0.70em;              /* 70% of .score-domain font-size */
    color: #777;                    /* ~30% lighter than domain color #333 */
    font-weight: 400;
}

/* Bar wrapper — fixed width, relative positioning for indicator dot */
.score-bar-wrap {
    width: 23rem;
    margin-bottom: 10px;
    position: relative;
}

/* Gradient bar — red (pessimism) to green (optimism) */
.score-bar {
    width: 100%;
    height: 25px;
    border-radius: 12px;
    background: linear-gradient(
        to right,
        #ed3b41 0%,                 /* extreme pessimism */
        #ed3b41 10%,
        #f08030 25%,                /* pessimism */
        #fff011 50%,                /* neutral */
        #c8d400 65%,                /* optimism */
        #01a657 100%                /* extreme optimism */
    );
    position: relative;
}

/* Circular indicator dot — positioned at the current score value */
.score-indicator {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
}

/* ?? Mobile responsive (matches site breakpoint: 40em) ?? */
@media screen and (max-width: 40em) {

    /* Reduce title size on mobile */
    .score-title {
        font-size: 2rem;
    }

    /* Smaller number with proportionally reduced shadow offsets */
    .score-number {
        font-size: 9rem;
        text-shadow:
            -3px 3px 0px #c8d8e4,
            -5px 5px 0px #d8e6ee,
            -7px 7px 10px rgba(190, 215, 230, 0.35);
    }

    /* Narrower bar on mobile */
    .score-bar-wrap {
        width: 16rem;
    }

    /* Thinner bar with smaller radius on mobile */
    .score-bar {
        height: 16px;
        border-radius: 8px;
    }

    /* Smaller indicator dot on mobile */
    .score-indicator {
        width: 22px;
        height: 22px;
    }

    /* Smaller domain text on mobile */
    .score-domain {
        font-size: 1.1rem;
    }

    /* TLD stays proportional at 70% of domain — no change needed */
    .score-domain .tld {
        font-size: 0.70em;
    }
}