/* The glass over a running game: the buttons, the stat, the lives, the score, the note, and the count before it starts. */
/* ---- HUD ---- */
.hud {
    position: absolute;
    inset: 0 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    pointer-events: none;
}
.hud-left,
.hud-right {
    display: flex;
    align-items: center;
    gap: 8px;
}
.hud-right {
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
}
.hud-button,
.hud-pill,
.hud-lives {
    background: var(--glass);
    border: 1px solid var(--glass-line);
    -webkit-backdrop-filter: blur(8px) saturate(1.3);
    backdrop-filter: blur(8px) saturate(1.3);
}
.hud-button {
    pointer-events: auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--cream);
    cursor: pointer;
    flex: none;
}
.hud-button:focus-visible {
    outline: 2px solid var(--lime);
    outline-offset: 2px;
}
.hud-pause {
    width: 12px;
    height: 14px;
    border-left: 4px solid currentColor;
    border-right: 4px solid currentColor;
}
.hud-expand {
    width: 14px;
    height: 14px;
    --c: linear-gradient(currentColor, currentColor);
    background:
        var(--c) top left / 5px 2px no-repeat,
        var(--c) top left / 2px 5px no-repeat,
        var(--c) top right / 5px 2px no-repeat,
        var(--c) top right / 2px 5px no-repeat,
        var(--c) bottom left / 5px 2px no-repeat,
        var(--c) bottom left / 2px 5px no-repeat,
        var(--c) bottom right / 5px 2px no-repeat,
        var(--c) bottom right / 2px 5px no-repeat;
}
.hud-pill {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cream);
    padding: 0 14px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    white-space: nowrap;
}
.hud-lives {
    height: 32px;
    padding: 0 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.hud-lives i {
    width: 12px;
    height: 11px;
    background: var(--lime);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    filter: drop-shadow(0 0 4px rgba(215, 243, 132, 0.6));
}
.hud-pill[hidden],
.hud-lives[hidden] {
    display: none;
}
.hud-score {
    font-size: clamp(22px, 3.2vw, 34px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--cream);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 2px 14px rgba(5, 4, 13, 0.75);
}
.hud-best {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(215, 243, 132, 0.8);
    margin-top: 4px;
    text-shadow: 0 1px 8px rgba(5, 4, 13, 0.9);
}
/* A game that draws its own scoreboard keeps only the buttons */
.hud--own .hud-pill,
.hud--own .hud-lives,
.hud--own .hud-right {
    display: none;
}
.stage.is-over .hud,
.stage.is-paused .hud {
    opacity: 0;
    transition: opacity 0.2s;
}
@media (pointer: coarse) {
    .hud-full {
        display: none;
    }
    /* drawn at 40 px, pressed at 48: a thumb reaching for Pause mid-run must not miss */
    .hud-button {
        position: relative;
    }
    .hud-button::after {
        content: '';
        position: absolute;
        inset: -4px;
    }
}

/* ---- The count ---- */
.ready {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
}
/* `display: grid` outranks the browser's own [hidden] rule: without this the last digit stays up all run */
.ready[hidden] {
    display: none;
}
.ready span {
    font-size: clamp(64px, 14vmin, 140px);
    font-weight: 800;
    color: var(--cream);
    text-shadow:
        0 0 30px rgba(215, 243, 132, 0.55),
        0 4px 24px rgba(5, 4, 13, 0.8);
    animation: count-in 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
@keyframes count-in {
    from {
        opacity: 0;
        transform: scale(1.8);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* The speaker: waves when the sound is on, a slash through it when it is off */
.hud-speaker {
    position: relative;
    width: 18px;
    height: 16px;
}
.hud-speaker::before {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    width: 9px;
    height: 10px;
    background: currentColor;
    clip-path: polygon(0 28%, 38% 28%, 100% 0, 100% 100%, 38% 72%, 0 72%);
}
.hud-speaker::after {
    content: '';
    position: absolute;
    left: 10px;
    top: 2px;
    width: 6px;
    height: 12px;
    border: 2px solid currentColor;
    border-left: 0;
    border-radius: 0 10px 10px 0;
}
#stage-sound[aria-pressed='false'] {
    color: #f5bdb0;
}
#stage-sound[aria-pressed='false'] .hud-speaker::after {
    left: 12px;
    top: -1px;
    width: 2px;
    height: 18px;
    border: 0;
    border-radius: 1px;
    background: currentColor;
    transform: rotate(-40deg);
}

/* A short line over the top of the game: the sound's state, mostly */
.hud-note {
    position: absolute;
    left: 50%;
    top: 14px;
    transform: translate(-50%, -8px);
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--glass);
    border: 1px solid var(--glass-line);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-family: var(--mono);
    font-size: 12px;
    color: var(--cream);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 0.2s,
        transform 0.2s;
}
.hud-note.is-on {
    opacity: 1;
    transform: translate(-50%, 0);
}