/***** TITLE *****/
#item-title {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 11px;

    margin: 10px 0 20px;
}

#item-title-award {
    --award-size: 38px;
    --award-padding: 6.5px;
    width: var(--award-size);
    height: var(--award-size);
    border-radius: 50%;

    background-color: white;
    position: relative;
}

#item-title-award::after {
    content: '';
    position: absolute;
    inset: 0;
    background-size: calc(var(--award-size) - 2 * var(--award-padding));
    background-position: center;
    background-repeat: no-repeat;
    /* keep the crystal on its own compositor layer, so Chrome doesn't snap it by 1px when the pop animation starts/ends */
    will-change: transform;
}

#item-title-award[data-award="1"]::after {
    background-image: url("https://www.umimeto.org/asset/global/img/badges/crystal-grey-1.svg");
}
#item-title-award[data-award="2"]::after {
    background-image: url("https://www.umimeto.org/asset/global/img/badges/crystal-grey-2.svg");
}
#item-title-award[data-award="3"]::after {
    background-image: url("https://www.umimeto.org/asset/global/img/badges/crystal-grey-3.svg");
}
#item-title-award[data-award="4"]::after {
    background-image: url("https://www.umimeto.org/asset/global/img/badges/crystal-grey-4.svg");
}
#item-title-award[data-award="1"].half::after {
    background-image: url("https://www.umimeto.org/asset/global/img/badges/crystal-half-1.svg");
}
#item-title-award[data-award="2"].half::after {
    background-image: url("https://www.umimeto.org/asset/global/img/badges/crystal-half-2.svg");
}
#item-title-award[data-award="3"].half::after {
    background-image: url("https://www.umimeto.org/asset/global/img/badges/crystal-half-3.svg");
}
#item-title-award[data-award="4"].half::after {
    background-image: url("https://www.umimeto.org/asset/global/img/badges/crystal-half-4.svg");
}
#item-title-award[data-award="1"].full::after,
#item-title-award[data-award="1"].solved::after {
    background-image: url("https://www.umimeto.org/asset/global/img/badges/crystal-blue-1.svg");
}
#item-title-award[data-award="2"].full::after,
#item-title-award[data-award="2"].solved::after {
    background-image: url("https://www.umimeto.org/asset/global/img/badges/crystal-blue-2.svg");
}
#item-title-award[data-award="3"].full::after,
#item-title-award[data-award="3"].solved::after {
    background-image: url("https://www.umimeto.org/asset/global/img/badges/crystal-blue-3.svg");
}
#item-title-award[data-award="4"].full::after,
#item-title-award[data-award="4"].solved::after {
    background-image: url("https://www.umimeto.org/asset/global/img/badges/crystal-blue-4.svg");
}
#item-title-award.solved::after {
    --glow: #5dade2;
    --glow-blur: 2.75px;
    --shine: 1;
    filter: brightness(var(--shine)) drop-shadow(0px 0px var(--glow-blur) var(--glow));
    transition: filter 200ms ease-in-out;
    animation: crystal-pop 900ms ease-in-out, crystal-shine 1700ms ease-in-out;
}

@property --glow-blur {
    syntax: '<length>';
    inherits: false;
    initial-value: 0px;
}

@property --shine {
    syntax: '<number>';
    inherits: false;
    initial-value: 1;
}

@keyframes crystal-pop {
    0% {--glow-blur: 0px; transform: scale(1);}
    40% {--glow-blur: 3.25px; transform: scale(1.1);}
    100% {--glow-blur: 2.75px; transform: scale(1);}
}

@keyframes crystal-shine {
    0% {--shine: 1;}
    40% {--shine: 1.25;}
    100% {--shine: 1;}
}

/***** ITEM PROGRESS DOTS *****/
.item-progress-dots {
    --height: 10px;
    --half-height: calc(var(--height) / 2);
    display: flex;
    justify-content: center;
    flex-direction: row;
    height: var(--height);
}

.item-progress-dot {
    width: 15px;
    border: 1px solid var(--darkGray);
    position: relative;
    border-radius: 1px;
}

.item-progress-dot:first-child {
    border-top-left-radius: var(--half-height);
    border-bottom-left-radius: var(--half-height);
}

.item-progress-dot:last-child {
    border-top-right-radius: var(--half-height);
    border-bottom-right-radius: var(--half-height);
}

.item-progress-dot + .item-progress-dot {
    margin-left: -1px;
}

.item-progress-dot.unsolved {
    background-color: var(--lightGray);
}

.item-progress-dot.current {
    background-color: white;
    position: relative;
    z-index: 1;
    outline: 3px solid #bdc3c780;
    outline: 3px solid color(from var(--gray) srgb r g b / .5);
}

.item-progress-dot.correct {
    background-color: var(--green);
}

.item-progress-dot.wrong {
    background-color: var(--faintRed);
}