/*
 * The shared ladder HUD (growth plan 18.7) — hearts, round, score, combo and the question
 * clock, on every game retrofitted onto TPL.ladder. One stylesheet rather than a block per
 * page: these five readouts mean the same thing everywhere, and a copy per game is how they
 * would start to look and behave differently.
 */

.tpl-ladder-hud {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.85rem;
}

.tpl-ladder-hud > * {
    white-space: nowrap;
}

.tpl-ladder-lives {
    color: #dc3545;
    font-size: 1.05rem;
    letter-spacing: 0.12em;
}

.tpl-ladder-round,
.tpl-ladder-band {
    background: rgba(25, 118, 210, 0.14);
    border-radius: 999px;
    color: #0d47a1;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.16em 0.62em;
}

.tpl-ladder-band {
    background: rgba(111, 66, 193, 0.14);
    color: #4a2a86;
}

.tpl-ladder-score {
    font-weight: 700;
}

.tpl-ladder-combo {
    color: #198754;
    font-weight: 700;
    min-width: 2.2em;
}

/* The question clock. Height rather than a number, because the bar is read out of the corner
   of the eye while the player is listening or reading — a digit is not. */
.tpl-ladder-timer {
    background: rgba(0, 0, 0, 0.08);
    border-radius: 999px;
    height: 6px;
    overflow: hidden;
    width: 100%;
}

.tpl-ladder-timer-fill {
    background: linear-gradient(90deg, #198754, #ffc107);
    height: 100%;
    transition: width 0.1s linear;
    width: 100%;
}

.tpl-ladder-timer-fill.low {
    background: linear-gradient(90deg, #fd7e14, #dc3545);
}

[data-bs-theme="dark"] .tpl-ladder-round {
    background: rgba(79, 195, 247, 0.2);
    color: #b3e5fc;
}

[data-bs-theme="dark"] .tpl-ladder-band {
    background: rgba(179, 136, 255, 0.22);
    color: #e1d5ff;
}

[data-bs-theme="dark"] .tpl-ladder-timer {
    background: rgba(255, 255, 255, 0.14);
}