/* ============================================================
   HEADER — Score, level, lives, controls
   ============================================================ */

#game-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         0 var(--space-5);
    background:      var(--color-surface);
    border-bottom:   1px solid var(--color-border);
    box-shadow:      0 1px 6px rgba(48, 40, 32, 0.08);
}

/* ── Brand ───────────────────────────────────────────────── */
.header-brand {
    font-size:      var(--fs-sm);
    font-weight:    var(--fw-semibold);
    color:          var(--color-primary);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    display:        flex;
    align-items:    center;
    gap:            var(--space-2);
    text-decoration: none;
    border-radius:  var(--radius-sm);
}

.header-brand:focus-visible {
    outline:        2px solid var(--color-gold);
    outline-offset: 3px;
}

.header-brand .brand-brahmi {
    font-family: var(--font-brahmi);
    font-size:   var(--fs-md);
    color:       var(--color-gold);
}

/* ── HUD stats ───────────────────────────────────────────── */
#screen-hud {
    display:     flex;
    align-items: center;
    gap:         var(--space-5);
    flex:        1;
    justify-content: flex-end;
}

.hud-stat {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    min-width:      52px;
}

.hud-stat__label {
    font-size:      var(--fs-xs);
    color:          var(--color-text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight:    var(--fw-medium);
}

.hud-stat__value {
    font-size:   var(--fs-md);
    font-weight: var(--fw-bold);
    color:       var(--color-text);
    line-height: 1.2;
}

/* ── Lives ───────────────────────────────────────────────── */
#hud-lives {
    display: flex;
    gap:     var(--space-1);
}

.life {
    display:       inline-block;
    width:         18px;
    height:        18px;
    border-radius: 50%;
    background:    var(--color-primary);
    transition:    background var(--transition-base),
                   transform  var(--transition-base),
                   opacity    var(--transition-base);
}

.life--empty {
    background: var(--color-surface-alt);
    border:     1px solid var(--color-border);
    opacity:    0.5;
}

.lives-hit .life--full {
    animation: life-pulse 0.5s ease;
}

/* The life just won back is the last filled dot. */
.lives-gain .life--full:has(+ .life--empty),
.lives-gain .life--full:last-child {
    animation: life-gain 0.6s ease;
}

/* ── Control buttons ─────────────────────────────────────── */
.header-controls {
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
    margin-left: var(--space-4);
}

.ctrl-btn {
    width:         36px;
    height:        36px;
    border-radius: var(--radius-sm);
    border:        1px solid var(--color-border);
    background:    var(--color-surface);
    color:         var(--color-text-muted);
    font-size:     var(--fs-base);
    display:       flex;
    align-items:   center;
    justify-content: center;
    transition:    background var(--transition-fast),
                   color      var(--transition-fast),
                   border-color var(--transition-fast);
}

.ctrl-btn:hover {
    background:    var(--color-surface-alt);
    color:         var(--color-text);
    border-color:  var(--color-border-strong);
}

.ctrl-btn.sound-off {
    color:   var(--color-text-light);
    opacity: 0.6;
}