/*
 * Barra de topo: voltar à arcada, acerca, música, pausar e sair.
 *
 * O HUD do jogo (guloseimas, tempo, corações) não está aqui: é desenhado no canvas,
 * onde não há `backdrop-filter` e o vidro tem de ser imitado à mão (`glassPanel`
 * em js/render.js).
 *
 * Os botões são `inline-block` (e não `flex`) de propósito: quem os mostra e
 * esconde é o `topbar.js` do SDK, que escreve `display: inline-block` no estilo
 * do elemento. Daí o espaçamento entre o ícone e a etiqueta vir de uma margem e
 * não de um `gap`.
 */

.topBar {
    position: absolute;
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    display: flex;
    gap: 8px;
    z-index: 20;
}

.topBtn {
    display: inline-block;
    padding: 9px 14px;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-pill);
    /* Mais escuro do que nos outros jogos: aqui o céu por trás é claro. */
    background: rgba(42, 20, 58, 0.5);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.topBtn:hover {
    background: rgba(42, 20, 58, 0.65);
    border-color: var(--glass-border-strong);
}

.topBtn--quit:hover {
    border-color: var(--accent-3);
    color: #fff;
}

.topIcon { font-size: 13px; }
.topIcon + .topLabel { margin-left: 7px; }

/* Música desligada: a nota leva um traço por cima e o botão fica mais apagado. */
#musicBtn .musicSlash { display: none; }
#musicBtn[aria-pressed="false"] .musicSlash { display: inline; }
#musicBtn[aria-pressed="false"] { opacity: 0.7; }

/* Telemóvel estreito: três botões com rótulo não cabem, e a nota diz-se sozinha. */
@media (max-width: 400px) {
    #musicBtn .topLabel { display: none; }
    #musicBtn .topIcon + .topLabel { margin-left: 0; }
}