/* ═══════════════════════════════════════════════════════════════
   CIFRATURN — CT ARCADE
   ---------------------------------------------------------------
   Camada de identidade dos JOGOS e das FERRAMENTAS (afinador,
   metrônomo, estúdio de progressões).

   Deve ser carregado DEPOIS de theme-premium.css. É a última
   palavra sobre esses componentes.

   Estratégia em duas etapas:

     1. PONTE DE TOKENS — games.css usa `--g-*` e tools-premium.css
        usa `--tool-*`, ambos com laranja #d4af37 fixo. Redefinir
        essas variáveis aqui converte de uma vez dezenas de regras
        para o dourado, sem caçar cada seletor.

     2. POLIMENTO — o que sobra são cores literais (rgba(212, 175, 55))
        cravadas nas regras antigas. Essas precisam de override
        explícito, e é o que vem das seções 03 em diante.

   Contraste medido (WCAG 2.1, AA = 4.5:1 texto normal):
     dourado #d4af37 / superfície #161b22 ......... 8.23:1  AAA
     dourado #8a6a15 / branco ..................... 5.06:1  AA
     texto #e6edf3 / superfície #161b22 ........... 13.9:1  AAA
     texto #16181d / superfície #ffffff ........... 17.4:1  AAA
     branco / botão dourado #a8862a ............... 3.44:1  AA large
       └─ por isso todo botão dourado sólido usa peso ≥700 e
          tamanho ≥16px, ou tinta escura (#1a1408) sobre o dourado
          claro. Nunca texto branco fino sobre dourado.

   Índice:
     01. Tokens do arcade
     02. Ponte de tokens (--g-*, --tool-*)
     03. Modal (jogos e ferramentas)
     04. Seção de jogos
     05. Card de jogo
     06. HUD, progresso e opções
     07. Tela de resultado
     08. Jogos específicos
     09. Ferramenta: afinador
     10. Ferramenta: metrônomo
     11. Ferramenta: estúdio de progressões
     12. Feedback (ripple, toast, confete, XP)
     13. Animações
     14. Responsivo
     15. Acessibilidade
   ═══════════════════════════════════════════════════════════════ */


/* ─── 00. ÂNCORA DE ESPECIFICIDADE ─────────────────────────
   Quase todo seletor de componente aqui aparece prefixado por
       :is(#gm-overlay,#modal-overlay,.games-section,body)
   (ou, nas regras de tema, por :is(#gm-overlay,#modal-overlay,
   .games-section) logo após o body).

   Não é enfeite. site.css, ct-dark-theme.css e o <style> inline do
   index.html trazem ~99 regras do tema laranja no formato
   `body.ct-redesign.theme-light .game-card` — especificidade
   0,3,1. Carregar depois não basta: especificidade vence ordem.

   :is() assume a especificidade do seu argumento mais forte, então
   o ID no grupo eleva estas regras a 1,x,y sem mudar o que elas
   casam — o `body` no fim do grupo garante que nada deixe de
   valer fora dos modais. É um ganho de força, não de alcance.

   Consequência prática: ao acrescentar regra nova aqui, copie o
   prefixo de uma vizinha. Sem ele, a regra perde para o legado.
   ───────────────────────────────────────────────────────────── */

/* ─── 01. TOKENS DO ARCADE ─────────────────────────────────── */

:root {
    /* Superfícies do arcade. Derivam das do tema, mas um degrau
       mais fundas: o modal de jogo precisa "furar" a página. */
    --ar-bg: #0b0f14;
    --ar-surface: #161b22;
    --ar-surface-2: #1c2430;
    --ar-surface-3: #253040;
    --ar-elev: rgba(255, 255, 255, .045);
    --ar-elev-2: rgba(255, 255, 255, .085);
    --ar-line: rgba(255, 255, 255, .09);
    --ar-line-strong: rgba(255, 255, 255, .17);

    --ar-text: #e6edf3;
    --ar-text-soft: #b6c0cc;
    --ar-text-dim: #9aa7b8;

    --ar-gold: #d4af37;
    --ar-gold-soft: #e5c76b;
    --ar-gold-bright: #f0d98a;
    --ar-gold-deep: #a8862a;
    --ar-gold-ink: #1a1408;
    /* tinta sobre dourado claro */
    --ar-gold-wash: rgba(212, 175, 55, .10);
    --ar-gold-wash-2: rgba(212, 175, 55, .18);
    --ar-gold-line: rgba(212, 175, 55, .32);
    --ar-gold-metal: linear-gradient(135deg, #f0d98a 0%, #d4af37 38%, #a8862a 62%, #e5c76b 100%);
    --ar-gold-fill: linear-gradient(135deg, #e5c76b 0%, #d4af37 45%, #a8862a 100%);

    /* Semânticas — dessaturadas o suficiente para conviverem com
       o dourado sem brigar por atenção. */
    --ar-ok: #3fb950;
    /* Tinta sobre o verde sólido. No escuro o verde é claro e pede
       tinta escura; no claro ele escurece e pede branco. Sem este
       token o selo "NOVO" ficava em 3,34:1 no tema claro. */
    --ar-ok-ink: #04220c;
    --ar-ok-wash: rgba(63, 185, 80, .12);
    --ar-ok-line: rgba(63, 185, 80, .42);
    --ar-bad: #f85149;
    --ar-bad-wash: rgba(248, 81, 73, .12);
    --ar-bad-line: rgba(248, 81, 73, .42);
    --ar-warn: #d29922;
    --ar-info: #58a6ff;

    --ar-r-sm: 8px;
    --ar-r: 14px;
    --ar-r-lg: 20px;
    --ar-r-xl: 28px;
    --ar-r-pill: 999px;

    --ar-sh-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .18);
    --ar-sh: 0 4px 14px rgba(0, 0, 0, .3), 0 1px 3px rgba(0, 0, 0, .22);
    --ar-sh-lg: 0 18px 48px rgba(0, 0, 0, .46), 0 6px 16px rgba(0, 0, 0, .28);
    --ar-sh-gold: 0 6px 24px rgba(212, 175, 55, .30);
    --ar-sh-gold-lg: 0 0 0 1px rgba(212, 175, 55, .40), 0 10px 38px rgba(212, 175, 55, .34);

    /* Curvas de movimento. `out` para entradas (rápido no começo,
       assenta devagar) e `spring` para confirmações. */
    --ar-t: 180ms cubic-bezier(.4, 0, .2, 1);
    --ar-t-slow: 340ms cubic-bezier(.4, 0, .2, 1);
    --ar-out: cubic-bezier(.16, 1, .3, 1);
    --ar-spring: cubic-bezier(.34, 1.56, .64, 1);
}

body.theme-light {
    --ar-bg: #eeece6;
    --ar-surface: #ffffff;
    --ar-surface-2: #faf9f6;
    --ar-surface-3: #f0eee8;
    --ar-elev: rgba(24, 20, 10, .035);
    --ar-elev-2: rgba(24, 20, 10, .07);
    --ar-line: rgba(24, 20, 10, .11);
    --ar-line-strong: rgba(24, 20, 10, .2);

    --ar-text: #16181d;
    --ar-text-soft: #44484f;
    --ar-text-dim: #6b655c;

    /* Escurecido: o dourado claro não passa AA sobre branco. */
    --ar-gold: #8a6a15;
    --ar-gold-soft: #a37f1e;
    --ar-gold-bright: #6f5512;
    --ar-gold-deep: #5c4610;
    --ar-gold-ink: #33270a;
    --ar-gold-wash: rgba(138, 106, 21, .08);
    --ar-gold-wash-2: rgba(138, 106, 21, .14);
    --ar-gold-line: rgba(138, 106, 21, .28);
    --ar-gold-metal: linear-gradient(135deg, #a37f1e 0%, #8a6a15 40%, #6f5512 70%, #a37f1e 100%);
    --ar-gold-fill: linear-gradient(135deg,
            #f2d98c 0%, #e0c063 22%, #d9b449 52%, #c9a437 76%, #bf9a2e 100%);

    --ar-ok: #1a7f37;
    --ar-ok-ink: #ffffff;
    /* branco sobre #1a7f37 = 5,01:1 */
    --ar-ok-wash: rgba(26, 127, 55, .09);
    --ar-ok-line: rgba(26, 127, 55, .34);
    --ar-bad: #c1332b;
    --ar-bad-wash: rgba(193, 51, 43, .08);
    --ar-bad-line: rgba(193, 51, 43, .32);
    --ar-warn: #9a6b00;
    --ar-info: #0a58ca;

    --ar-sh-sm: 0 1px 2px rgba(24, 20, 10, .06), 0 2px 8px rgba(24, 20, 10, .05);
    --ar-sh: 0 4px 14px rgba(24, 20, 10, .09), 0 1px 3px rgba(24, 20, 10, .06);
    --ar-sh-lg: 0 18px 48px rgba(24, 20, 10, .14), 0 6px 16px rgba(24, 20, 10, .08);
    --ar-sh-gold: 0 6px 24px rgba(138, 106, 21, .20);
    --ar-sh-gold-lg: 0 0 0 1px rgba(138, 106, 21, .32), 0 10px 38px rgba(138, 106, 21, .22);
}


/* ─── 02. PONTE DE TOKENS ──────────────────────────────────── */
/* Uma única redefinição aqui reescreve o laranja em todas as
   regras antigas de games.css e tools-premium.css que usam estas
   variáveis. É a diferença entre 8 linhas e 300. */

:root {
    /* games.css */
    --g-laranja: #d4af37;
    --g-laranja2: #e5c76b;
    --g-azul: #12171f;
    --g-azul2: #0b0f14;
    --g-verde: #3fb950;
    --g-vermelho: #f85149;
    --g-amarelo: #e5c76b;
    --g-roxo: #8b7cd8;
    --g-azul-claro: #58a6ff;
    --g-surface: #161b22;
    --g-bg: #0b0f14;
    --g-border: rgba(255, 255, 255, .09);
    --g-text: #e6edf3;
    --g-text2: #b6c0cc;
    --g-text3: #9aa7b8;
    --g-shadow: 0 4px 14px rgba(0, 0, 0, .3);
    --g-shadow-lg: 0 18px 48px rgba(0, 0, 0, .46);
    --g-radius: 14px;
    --g-radius-sm: 8px;

    /* tools-premium.css */
    --tool-bg-dark: #12171f;
    --tool-bg-panel-dark: rgba(255, 255, 255, .045);
    --tool-border-dark: rgba(255, 255, 255, .09);
    --tool-bg-light: #ffffff;
    --tool-bg-panel-light: #faf9f6;
    --tool-border-light: rgba(24, 20, 10, .11);
    --tool-accent: #d4af37;
    --tool-accent-hover: #e5c76b;
    --tool-accent-glow: rgba(212, 175, 55, .28);
    --tool-success: #3fb950;
    --tool-success-glow: rgba(63, 185, 80, .3);
    --tool-text-main: #e6edf3;
    --tool-text-muted: #9aa7b8;
    --tool-text-main-light: #16181d;
    --tool-text-muted-light: #6b655c;
    --tool-radius-lg: 20px;
    --tool-radius-md: 14px;
    --tool-radius-sm: 10px;
}

body.theme-light {
    --g-surface: #ffffff;
    --g-bg: #f6f5f2;
    --g-border: rgba(24, 20, 10, .11);
    --g-text: #16181d;
    --g-text2: #44484f;
    --g-text3: #6b655c;
    --g-laranja: #8a6a15;
    --g-laranja2: #a37f1e;
    --g-verde: #1a7f37;
    --g-vermelho: #c1332b;
    --g-amarelo: #9a6b00;
    --g-shadow: 0 4px 14px rgba(24, 20, 10, .09);
    --g-shadow-lg: 0 18px 48px rgba(24, 20, 10, .14);

    --tool-accent: #8a6a15;
    --tool-accent-hover: #a37f1e;
    --tool-accent-glow: rgba(138, 106, 21, .2);
    --tool-success: #1a7f37;
    --tool-success-glow: rgba(26, 127, 55, .22);
}


/* ─── 03. MODAL (JOGOS E FERRAMENTAS) ──────────────────────── */

#gm-overlay,

#modal-overlay {
    background: rgba(6, 9, 13, .74) !important;
    backdrop-filter: blur(14px) saturate(.9) !important;
    -webkit-backdrop-filter: blur(14px) saturate(.9) !important;
    padding: clamp(12px, 3vw, 32px) !important;
}

body.theme-light #gm-overlay,

body.theme-light #modal-overlay {
    background: rgba(30, 26, 16, .5) !important;
}

#gm-overlay.open,

#modal-overlay[style*="flex"] {
    animation: arFade 220ms var(--ar-out) both;
}

/* Superfície do modal — a mesma para jogo e ferramenta, para que
   as duas metades do produto pareçam o mesmo produto. */
#gm-overlay .game-modal,

#modal-overlay :is(.modal,#modal-content) {
    background:
        radial-gradient(120% 90% at 50% -10%, rgba(212, 175, 55, .07) 0%, transparent 58%),
        var(--ar-surface) !important;
    border: 1px solid var(--ar-line) !important;
    border-radius: var(--ar-r-xl) !important;
    box-shadow: var(--ar-sh-lg), inset 0 1px 0 rgba(255, 255, 255, .05) !important;
    animation: arRise 380ms var(--ar-out) both !important;
}

body.theme-light :is(#gm-overlay,#modal-overlay,.games-section) #gm-overlay .game-modal,

body.theme-light #modal-overlay :is(.modal,#modal-content) {
    background:
        radial-gradient(120% 90% at 50% -10%, rgba(138, 106, 21, .05) 0%, transparent 58%),
        var(--ar-surface) !important;
    box-shadow: var(--ar-sh-lg), inset 0 1px 0 rgba(255, 255, 255, .8) !important;
}

/* Fio dourado no topo — assinatura visual comum a todos os modais */
#gm-overlay .game-modal::before,

#modal-overlay .modal::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ar-gold-line) 22%, var(--ar-gold) 50%, var(--ar-gold-line) 78%, transparent);
    opacity: .75;
    pointer-events: none;
    z-index: 3;
}

#gm-overlay .game-modal,

#modal-overlay :is(.modal,#modal-content) {
    position: relative !important;
    overflow: hidden !important;
}

#gm-overlay .game-modal-body,

#modal-overlay .modal-body {
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--ar-gold-line) transparent;
}

#gm-overlay .game-modal-body::-webkit-scrollbar,

#modal-overlay .modal-body::-webkit-scrollbar {
    width: 8px;
}

#gm-overlay .game-modal-body::-webkit-scrollbar-thumb,

#modal-overlay .modal-body::-webkit-scrollbar-thumb {
    background: var(--ar-gold-line);
    border-radius: 99px;
}

/* Cabeçalho.
   games.css pintava um gradiente azul-escuro fixo aqui e
   ct-dark-theme.css repetia a dose em
   `:is(body.ct-redesign) #modal-content .modal-header` (1,2,0) —
   por isso o seletor abaixo carrega DOIS ids: precisa passar de
   1,2,0 para valer. O cabeçalho passa a ser a mesma superfície do
   modal, separado só por um fio. */
#gm-overlay .game-modal .game-modal-header,
#gm-overlay .game-modal-header,
#modal-overlay :is(.modal,#modal-content) .modal-header {
    background: transparent !important;
    background-image: none !important;
    border-bottom: 1px solid var(--ar-line) !important;
    padding-bottom: 14px !important;
}

/* HUD: a regra de superfícies claras do tema pintava cada item de
   branco, virando três caixas dentro de uma caixa. Aqui os itens
   são só colunas — quem tem fundo é a barra. */
#gm-overlay .game-modal .hud-item,
#gm-overlay .hud-item,
#modal-overlay :is(.modal,#modal-content) .hud-item {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
}

#gm-overlay .game-modal-title,

#modal-overlay .modal-header h3 {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: -.4px !important;
    color: var(--ar-text) !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

#gm-overlay .game-modal-title i,

#modal-overlay .modal-header h3 i {
    color: var(--ar-gold) !important;
}

/* Botão fechar */
#gm-overlay .game-modal-close,

#modal-overlay .modal-close {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: var(--ar-elev) !important;
    border: 1px solid var(--ar-line) !important;
    color: var(--ar-text-dim) !important;
    display: grid !important;
    place-items: center !important;
    cursor: pointer;
    transition: background var(--ar-t), color var(--ar-t), transform var(--ar-t), border-color var(--ar-t) !important;
}

#gm-overlay .game-modal-close:hover,

#modal-overlay .modal-close:hover {
    background: var(--ar-gold-wash-2) !important;
    border-color: var(--ar-gold-line) !important;
    color: var(--ar-gold) !important;
    transform: rotate(90deg) !important;
}

#gm-overlay .game-modal-close:active,

#modal-overlay .modal-close:active {
    transform: rotate(90deg) scale(.9) !important;
}


/* ─── 04. SEÇÃO DE JOGOS ───────────────────────────────────── */

/* A própria seção não pode usar a âncora de descendente do topo do
   arquivo — `:is(…,.games-section) .games-section` exigiria uma
   seção dentro da outra e nunca casaria. Aqui o reforço vem de
   `body` + as duas classes, que já batem o legado. */
/* background-color separado de background-image: sob os gradientes
   fica sempre uma cor opaca de verdade. Sem ela a seção herda o
   fundo do corpo em qualquer caminho que não pinte as camadas de
   imagem — e o texto de cima passa a cair sobre o tom errado. */
body.ct-redesign .games-section,
.games-section {
    background-color: #0d1117 !important;
    background-image:
        radial-gradient(90% 60% at 50% 0%, rgba(212, 175, 55, .09) 0%, transparent 62%),
        linear-gradient(170deg, #12171f 0%, #0d1117 55%, #0b0f14 100%) !important;
    position: relative;
    isolation: isolate;
}

body.ct-redesign.theme-light .games-section,
body.theme-light .games-section {
    background-color: #f6f5f2 !important;
    background-image:
        radial-gradient(90% 60% at 50% 0%, rgba(138, 106, 21, .09) 0%, transparent 62%),
        linear-gradient(170deg, #faf9f6 0%, #f6f5f2 55%, #f0eee8 100%) !important;
}

/* Trama de pontos — profundidade sem peso de imagem */
body .games-section::before {
    background-image: radial-gradient(var(--ar-gold-line) 1px, transparent 1px) !important;
    background-size: 34px 34px !important;
    opacity: .28 !important;
}

body.ct-redesign :is(#gm-overlay,#modal-overlay,.games-section) .games-header h2,
:is(#gm-overlay,#modal-overlay,.games-section,body) .games-header h2 {
    color: var(--ar-text) !important;
    letter-spacing: -1px !important;
}

body.ct-redesign.theme-light :is(#gm-overlay,#modal-overlay,.games-section) .games-header h2 {
    color: var(--ar-text) !important;
}

/* O destaque do título vira ouro metálico */
:is(#gm-overlay,#modal-overlay,.games-section,body) .games-header h2 span {
    background: var(--ar-gold-metal) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

body.ct-redesign :is(#gm-overlay,#modal-overlay,.games-section) .games-header p,
body.ct-redesign.theme-light :is(#gm-overlay,#modal-overlay,.games-section) .games-header p {
    color: var(--ar-text-dim) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .games-badge-top {
    background: var(--ar-gold-wash) !important;
    border: 1px solid var(--ar-gold-line) !important;
    color: var(--ar-gold) !important;
    border-radius: var(--ar-r-pill) !important;
    letter-spacing: 1.4px !important;
}

/* Cartão de XP acumulado */
:is(#gm-overlay,#modal-overlay,.games-section,body) .games-xp-card {
    background: var(--ar-elev) !important;
    border: 1px solid var(--ar-line) !important;
    border-radius: var(--ar-r-lg) !important;
    box-shadow: var(--ar-sh-sm) !important;
    backdrop-filter: blur(8px);
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .xp-card-icon {
    color: var(--ar-gold) !important;
    background: var(--ar-gold-wash) !important;
    border: 1px solid var(--ar-gold-line) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .xp-card-label {
    color: var(--ar-text-dim) !important;
    letter-spacing: 1.2px !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .xp-card-value {
    background: var(--ar-gold-metal) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-variant-numeric: tabular-nums;
}

/* CTA principal */
:is(#gm-overlay,#modal-overlay,.games-section,body) .games-main-cta {
    background: var(--ar-gold-fill) !important;
    color: var(--ar-gold-ink) !important;
    border: none !important;
    border-radius: var(--ar-r-pill) !important;
    font-weight: 800 !important;
    letter-spacing: .6px !important;
    box-shadow: var(--ar-sh-gold), inset 0 1px 0 rgba(255, 255, 255, .35) !important;
    transition: transform var(--ar-t), box-shadow var(--ar-t) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .games-main-cta:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--ar-sh-gold-lg), inset 0 1px 0 rgba(255, 255, 255, .45) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .games-main-cta:active {
    transform: translateY(0) scale(.98) !important;
}

/* --- Chamada Premium --- */
:is(#gm-overlay,#modal-overlay,.games-section,body) .games-premium-cta {
    background: var(--ar-elev) !important;
    border: 1px solid var(--ar-gold-line) !important;
    border-radius: var(--ar-r-xl) !important;
    box-shadow: var(--ar-sh-sm) !important;
}

/* A estrela vinha da regra genérica `[class$="-icon"]` do tema, que
   dá fundo dourado translúcido a qualquer ícone. Como esta div é
   block e ocupa a largura toda da caixa, o "fundo do ícone" virava
   uma faixa bege atravessando o cartão. Aqui ela volta a ser o que
   é: um selo redondo do tamanho do glifo. */
:is(#gm-overlay,#modal-overlay,.games-section,body) .premium-cta-icon {
    display: inline-grid !important;
    place-items: center !important;
    width: 56px !important;
    height: 56px !important;
    margin: 0 auto 14px !important;
    border-radius: 50% !important;
    background: var(--ar-gold-wash) !important;
    border: 1px solid var(--ar-gold-line) !important;
    font-size: 26px !important;
    line-height: 1 !important;
}

/* O parágrafo vinha num laranja queimado (#b45309) herdado do tema
   antigo: 4,29:1 sobre o marfim, abaixo de AA. Texto de apoio é
   texto — vai para o tom neutro escuro da escala. */
:is(#gm-overlay,#modal-overlay,.games-section,body) .games-premium-cta p {
    color: var(--ar-text-soft) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .games-premium-cta h3 {
    color: var(--ar-text) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .premium-cta-btn {
    background: var(--ar-gold-fill) !important;
    color: var(--ar-gold-ink) !important;
    border: none !important;
    border-radius: var(--ar-r-pill) !important;
    font-weight: 800 !important;
    box-shadow: var(--ar-sh-gold), inset 0 1px 0 rgba(255, 255, 255, .3) !important;
    transition: transform var(--ar-t), box-shadow var(--ar-t) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .premium-cta-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--ar-sh-gold-lg) !important;
}

/* Abas */
body.ct-redesign .games-tab,
body.ct-redesign.theme-light :is(#gm-overlay,#modal-overlay,.games-section) .games-tab,
:is(#gm-overlay,#modal-overlay,.games-section,body) .games-tab {
    background: var(--ar-elev) !important;
    border: 1px solid var(--ar-line) !important;
    color: var(--ar-text-soft) !important;
    border-radius: var(--ar-r-pill) !important;
    font-weight: 600 !important;
    transition: background var(--ar-t), color var(--ar-t), border-color var(--ar-t), transform var(--ar-t) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .games-tab:hover {
    background: var(--ar-gold-wash) !important;
    border-color: var(--ar-gold-line) !important;
    color: var(--ar-gold) !important;
    transform: translateY(-1px) !important;
}

body.ct-redesign :is(#gm-overlay,#modal-overlay,.games-section) .games-tab.active,
body.ct-redesign.theme-light :is(#gm-overlay,#modal-overlay,.games-section) .games-tab.active,
:is(#gm-overlay,#modal-overlay,.games-section,body) .games-tab.active {
    background: var(--ar-gold-fill) !important;
    border-color: transparent !important;
    color: var(--ar-gold-ink) !important;
    box-shadow: var(--ar-sh-gold) !important;
}


/* ─── 05. CARD DE JOGO ─────────────────────────────────────── */

body.ct-redesign .game-card,
:is(#gm-overlay,#modal-overlay,.games-section,body) .game-card {
    background: var(--ar-surface) !important;
    border: 1px solid var(--ar-line) !important;
    border-radius: var(--ar-r-lg) !important;
    box-shadow: var(--ar-sh) !important;
    position: relative;
    overflow: hidden;
    transition: transform 260ms var(--ar-out), box-shadow 260ms var(--ar-out), border-color var(--ar-t) !important;
}

body.ct-redesign.theme-light :is(#gm-overlay,#modal-overlay,.games-section) .game-card {
    background: var(--ar-surface) !important;
    border-color: var(--ar-line) !important;
}

/* Os cards têm altura igual na linha do grid, mas o conteúdo varia
   (uma descrição de duas linhas, outra de três). Sem isto a folga
   sobrava DEPOIS do botão — ~90px de vazio no pé do card. Deixando
   o cabeçalho absorver a sobra, o botão fica colado na base em
   todos, e a linha do grid volta a ler como uma linha. */
:is(#gm-overlay,#modal-overlay,.games-section,body) .game-card {
    display: flex !important;
    flex-direction: column !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .game-card-header {
    flex: 1 1 auto !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .game-card-footer,
:is(#gm-overlay,#modal-overlay,.games-section,body) .game-play-btn {
    flex: 0 0 auto !important;
}

/* Brilho que varre o card no hover. Camada própria com
   pointer-events:none para não roubar o clique do card. */
:is(#gm-overlay,#modal-overlay,.games-section,body) .game-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 35%, rgba(212, 175, 55, .13) 50%, transparent 65%);
    transform: translateX(-120%);
    transition: transform 720ms var(--ar-out);
    pointer-events: none;
    z-index: 2;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .game-card:hover::after {
    transform: translateX(120%);
}

body.ct-redesign :is(#gm-overlay,#modal-overlay,.games-section) .game-card:hover,
body.ct-redesign.theme-light :is(#gm-overlay,#modal-overlay,.games-section) .game-card:hover,
:is(#gm-overlay,#modal-overlay,.games-section,body) .game-card:hover {
    transform: translateY(-6px) !important;
    border-color: var(--ar-gold-line) !important;
    box-shadow: var(--ar-sh-lg), 0 0 0 1px var(--ar-gold-line) !important;
    background: var(--ar-surface) !important;
}

body.ct-redesign :is(#gm-overlay,#modal-overlay,.games-section) .game-card h3,
body.ct-redesign.theme-light :is(#gm-overlay,#modal-overlay,.games-section) .game-card h3 {
    color: var(--ar-text) !important;
    letter-spacing: -.3px !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .game-card:hover h3 {
    color: var(--ar-gold) !important;
}

body.ct-redesign :is(#gm-overlay,#modal-overlay,.games-section) .game-card-desc,
body.ct-redesign.theme-light :is(#gm-overlay,#modal-overlay,.games-section) .game-card-desc {
    color: var(--ar-text-dim) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .game-card-icon {
    border-radius: var(--ar-r) !important;
    border: 1px solid var(--ar-line) !important;
    background: var(--ar-elev) !important;
    transition: transform 300ms var(--ar-spring) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .game-card:hover .game-card-icon {
    transform: scale(1.1) rotate(-6deg) !important;
    border-color: var(--ar-gold-line) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .game-card-badge {
    background: var(--ar-gold-fill) !important;
    color: var(--ar-gold-ink) !important;
    border-radius: var(--ar-r-pill) !important;
    font-weight: 800 !important;
    box-shadow: var(--ar-sh-sm) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .game-card-badge.new {
    background: var(--ar-ok) !important;
    color: var(--ar-ok-ink) !important;
}

body.ct-redesign :is(#gm-overlay,#modal-overlay,.games-section) .game-card-footer,
body.ct-redesign.theme-light :is(#gm-overlay,#modal-overlay,.games-section) .game-card-footer {
    background: var(--ar-elev) !important;
    border-top: 1px solid var(--ar-line) !important;
}

body.ct-redesign :is(#gm-overlay,#modal-overlay,.games-section) .game-stat-num,
body.ct-redesign.theme-light :is(#gm-overlay,#modal-overlay,.games-section) .game-stat-num {
    color: var(--ar-text) !important;
    font-variant-numeric: tabular-nums;
}

body.ct-redesign :is(#gm-overlay,#modal-overlay,.games-section) .game-stat-label,
body.ct-redesign.theme-light :is(#gm-overlay,#modal-overlay,.games-section) .game-stat-label {
    color: var(--ar-text-dim) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .game-xp-badge {
    background: var(--ar-gold-wash) !important;
    border: 1px solid var(--ar-gold-line) !important;
    color: var(--ar-gold) !important;
    border-radius: var(--ar-r-pill) !important;
    font-weight: 800 !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .game-play-btn {
    background: var(--ar-gold-fill) !important;
    color: var(--ar-gold-ink) !important;
    border: none !important;
    border-radius: var(--ar-r-pill) !important;
    font-weight: 800 !important;
    letter-spacing: .4px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3) !important;
    transition: transform var(--ar-t), box-shadow var(--ar-t) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .game-play-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--ar-sh-gold), inset 0 1px 0 rgba(255, 255, 255, .4) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .game-play-btn:active {
    transform: translateY(0) scale(.97) !important;
}

/* Dificuldade */
body.ct-redesign .game-diff-label,
body.ct-redesign.theme-light :is(#gm-overlay,#modal-overlay,.games-section) .game-diff-label {
    color: var(--ar-text-dim) !important;
    letter-spacing: .6px !important;
}

body.ct-redesign :is(#gm-overlay,#modal-overlay,.games-section) .game-diff-dot,
body.ct-redesign.theme-light :is(#gm-overlay,#modal-overlay,.games-section) .game-diff-dot {
    background: var(--ar-line-strong) !important;
}

body.ct-redesign :is(#gm-overlay,#modal-overlay,.games-section) .game-diff-dot.active.verde,
body.ct-redesign.theme-light :is(#gm-overlay,#modal-overlay,.games-section) .game-diff-dot.active.verde {
    background: var(--ar-ok) !important;
}

body.ct-redesign :is(#gm-overlay,#modal-overlay,.games-section) .game-diff-dot.active.amarelo,
body.ct-redesign.theme-light :is(#gm-overlay,#modal-overlay,.games-section) .game-diff-dot.active.amarelo {
    background: var(--ar-warn) !important;
}

body.ct-redesign :is(#gm-overlay,#modal-overlay,.games-section) .game-diff-dot.active.vermelho,
body.ct-redesign.theme-light :is(#gm-overlay,#modal-overlay,.games-section) .game-diff-dot.active.vermelho {
    background: var(--ar-bad) !important;
}


/* ─── 06. HUD, PROGRESSO E OPÇÕES ──────────────────────────── */
:is(#gm-overlay,#modal-overlay,.games-section,body) .game-hud {
    background: var(--ar-elev) !important;
    border: 1px solid var(--ar-line) !important;
    border-radius: var(--ar-r) !important;
    padding: 12px 8px !important;
    /* space-between jogava dois indicadores para os cantos opostos e
       deixava um vão de 500px no meio. Distribuídos por igual, o HUD
       lê como um bloco, não como duas ilhas. */
    justify-content: space-evenly !important;
    gap: clamp(8px, 3vw, 28px) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .hud-item {
    min-width: 56px !important;
}

/* Fio separando os indicadores — hierarquia sem mais uma caixa */
:is(#gm-overlay,#modal-overlay,.games-section,body) .hud-item+.hud-item {
    border-left: 1px solid var(--ar-line);
    padding-left: clamp(8px, 3vw, 28px);
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .hud-val {
    font-variant-numeric: tabular-nums;
    letter-spacing: -.5px !important;
    color: var(--ar-text) !important;
}

/* Cores semânticas do HUD por classe, não por style inline —
   assim o tema claro consegue reagir. */
:is(#gm-overlay,#modal-overlay,.games-section,body) .hud-val.is-xp {
    color: var(--ar-ok) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .hud-val.is-streak {
    color: var(--ar-gold) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .hud-val.is-premium {
    color: var(--ar-gold-soft) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .hud-label {
    color: var(--ar-text-dim) !important;
    letter-spacing: .8px !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .hud-timer {
    color: var(--ar-text) !important;
    font-variant-numeric: tabular-nums;
    transition: color var(--ar-t);
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .hud-timer.urgente {
    color: var(--ar-bad) !important;
    animation: arPulse .85s ease-in-out infinite !important;
}

/* Barra de progresso */
:is(#gm-overlay,#modal-overlay,.games-section,body) .g-progress-wrap {
    background: var(--ar-elev-2) !important;
    border-radius: var(--ar-r-pill) !important;
    overflow: hidden !important;
    height: 8px !important;
    border: 1px solid var(--ar-line);
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .g-progress-fill {
    background: var(--ar-gold-fill) !important;
    border-radius: var(--ar-r-pill) !important;
    position: relative;
    transition: width 420ms var(--ar-out) !important;
    box-shadow: 0 0 12px var(--ar-gold-wash-2);
}

/* Brilho que corre dentro da barra enquanto a partida está viva */
:is(#gm-overlay,#modal-overlay,.games-section,body) .g-progress-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .38), transparent);
    animation: arSheen 2.1s linear infinite;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .g-progress-label {
    color: var(--ar-text-dim) !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: .5px !important;
}

/* Card da pergunta */
:is(#gm-overlay,#modal-overlay,.games-section,body) .g-question-card {
    background:
        radial-gradient(100% 100% at 50% 0%, var(--ar-gold-wash) 0%, transparent 70%),
        var(--ar-elev) !important;
    border: 1px solid var(--ar-line) !important;
    border-radius: var(--ar-r-lg) !important;
    box-shadow: var(--ar-sh-sm) !important;
    animation: arRise 320ms var(--ar-out) both;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .g-question-label {
    color: var(--ar-text-dim) !important;
    letter-spacing: 1.4px !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .g-question-main {
    color: var(--ar-text) !important;
    letter-spacing: -1px !important;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}

body.theme-light :is(#gm-overlay,#modal-overlay,.games-section) .g-question-main {
    text-shadow: none;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .g-question-sub {
    color: var(--ar-text-soft) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .g-question-tag {
    background: var(--ar-gold-wash) !important;
    border: 1px solid var(--ar-gold-line) !important;
    color: var(--ar-gold) !important;
    border-radius: var(--ar-r-pill) !important;
}

/* Botões de opção — o componente mais tocado do produto.
   Entram em cascata de 55ms: o olho segue a sequência e chega no
   fim já sabendo que são quatro. `both` é obrigatório — sem ele o
   botão pisca no lugar final antes de a animação começar. */
:is(#gm-overlay,#modal-overlay,.games-section,body) .g-opt-btn {
    animation: arOptIn 380ms var(--ar-out) both;
    background: var(--ar-surface-2) !important;
    border: 1px solid var(--ar-line) !important;
    border-radius: var(--ar-r) !important;
    color: var(--ar-text) !important;
    font-weight: 700 !important;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    box-shadow: var(--ar-sh-sm) !important;
    transition:
        transform 150ms var(--ar-out),
        background var(--ar-t),
        border-color var(--ar-t),
        box-shadow var(--ar-t),
        color var(--ar-t) !important;
}

body.theme-light :is(#gm-overlay,#modal-overlay,.games-section) .g-opt-btn:not(.correct):not(.wrong):not(.highlight) {
    background: var(--ar-surface) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .g-opt-btn:hover:not(:disabled) {
    background: var(--ar-gold-wash) !important;
    border-color: var(--ar-gold-line) !important;
    color: var(--ar-gold) !important;
    transform: translateY(-3px) !important;
    box-shadow: var(--ar-sh), 0 0 0 1px var(--ar-gold-line) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .g-opt-btn:active:not(:disabled) {
    transform: translateY(-1px) scale(.98) !important;
    transition-duration: 70ms !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .g-opt-btn:nth-child(2) {
    animation-delay: 55ms;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .g-opt-btn:nth-child(3) {
    animation-delay: 110ms;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .g-opt-btn:nth-child(4) {
    animation-delay: 165ms;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .g-opt-btn:focus-visible {
    outline: 2px solid var(--ar-gold) !important;
    outline-offset: 3px !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .g-opt-btn:disabled {
    opacity: .5 !important;
    cursor: not-allowed !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .g-opt-btn.correct {
    background: var(--ar-ok-wash) !important;
    border-color: var(--ar-ok-line) !important;
    color: var(--ar-ok) !important;
    box-shadow: 0 0 0 1px var(--ar-ok-line), 0 8px 26px var(--ar-ok-wash) !important;
    opacity: 1 !important;
    animation: arPop 420ms var(--ar-spring) both !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .g-opt-btn.wrong {
    background: var(--ar-bad-wash) !important;
    border-color: var(--ar-bad-line) !important;
    color: var(--ar-bad) !important;
    opacity: 1 !important;
    animation: arShake 480ms cubic-bezier(.36, .07, .19, .97) both !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .g-opt-btn.highlight {
    border-color: var(--ar-gold) !important;
    box-shadow: 0 0 0 2px var(--ar-gold-line) !important;
    animation: arGlow 1.4s ease-in-out infinite !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .g-opt-sub {
    color: var(--ar-text-dim) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .g-opt-btn.correct .g-opt-sub {
    color: var(--ar-ok) !important;
    opacity: .85;
}

/* Botões primário e secundário dos jogos */
:is(#gm-overlay,#modal-overlay,.games-section,body) .g-btn-primary {
    background: var(--ar-gold-fill) !important;
    color: var(--ar-gold-ink) !important;
    border: none !important;
    border-radius: var(--ar-r-pill) !important;
    font-weight: 800 !important;
    letter-spacing: .4px !important;
    box-shadow: var(--ar-sh-gold), inset 0 1px 0 rgba(255, 255, 255, .3) !important;
    transition: transform var(--ar-t), box-shadow var(--ar-t), filter var(--ar-t) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .g-btn-primary:hover:not(:disabled) {
    transform: translateY(-2px) !important;
    box-shadow: var(--ar-sh-gold-lg), inset 0 1px 0 rgba(255, 255, 255, .42) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .g-btn-primary:active:not(:disabled) {
    transform: translateY(0) scale(.97) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .g-btn-primary:disabled {
    filter: grayscale(.7) !important;
    opacity: .45 !important;
    box-shadow: none !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .g-btn-secondary {
    background: var(--ar-elev) !important;
    border: 1px solid var(--ar-line) !important;
    color: var(--ar-text-soft) !important;
    border-radius: var(--ar-r-pill) !important;
    font-weight: 700 !important;
    transition: all var(--ar-t) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .g-btn-secondary:hover {
    background: var(--ar-gold-wash) !important;
    border-color: var(--ar-gold-line) !important;
    color: var(--ar-gold) !important;
}


/* ─── 07. TELA DE RESULTADO ────────────────────────────────── */
:is(#gm-overlay,#modal-overlay,.games-section,body) .g-result {
    animation: arRise 420ms var(--ar-out) both;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .g-result-emoji {
    filter: drop-shadow(0 8px 24px rgba(212, 175, 55, .34));
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .g-result-title {
    color: var(--ar-text) !important;
    letter-spacing: -.5px !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .g-result-sub {
    color: var(--ar-text-dim) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .g-result-stats {
    background: var(--ar-elev) !important;
    border: 1px solid var(--ar-line) !important;
    border-radius: var(--ar-r-lg) !important;
    padding: 18px 12px !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .g-result-stat-val {
    font-variant-numeric: tabular-nums;
    letter-spacing: -1px !important;
    color: var(--ar-text) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .g-result-stat-val.is-hits {
    color: var(--ar-ok) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .g-result-stat-val.is-acc {
    color: var(--ar-info) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .g-result-stat-val.is-xp {
    color: var(--ar-gold) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .g-result-stat-label {
    color: var(--ar-text-dim) !important;
    letter-spacing: .8px !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .g-premium-info {
    background: var(--ar-gold-wash) !important;
    border: 1px solid var(--ar-gold-line) !important;
    color: var(--ar-gold) !important;
    border-radius: var(--ar-r) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .g-coins-info {
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    margin-top: 8px;
    color: var(--ar-gold) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .g-result-btns .btn-replay {
    background: var(--ar-gold-fill) !important;
    color: var(--ar-gold-ink) !important;
    border: none !important;
    border-radius: var(--ar-r-pill) !important;
    font-weight: 800 !important;
    box-shadow: var(--ar-sh-gold) !important;
    transition: transform var(--ar-t), box-shadow var(--ar-t) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .g-result-btns .btn-replay:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--ar-sh-gold-lg) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .g-result-btns .btn-close {
    background: var(--ar-elev) !important;
    border: 1px solid var(--ar-line) !important;
    color: var(--ar-text-soft) !important;
    border-radius: var(--ar-r-pill) !important;
    font-weight: 700 !important;
    transition: all var(--ar-t) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .g-result-btns .btn-close:hover {
    background: var(--ar-elev-2) !important;
    color: var(--ar-text) !important;
    border-color: var(--ar-line-strong) !important;
}


/* ─── 08. JOGOS ESPECÍFICOS ────────────────────────────────── */
:is(#gm-overlay,#modal-overlay,.games-section,body) /* --- Piano virtual --- */
.piano-wrap {
    background: var(--ar-elev) !important;
    border: 1px solid var(--ar-line) !important;
    border-radius: var(--ar-r) !important;
    padding: 14px !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .piano-key.white {
    background: linear-gradient(180deg, #fdfcf9 0%, #e8e5dd 100%) !important;
    border: 1px solid rgba(24, 20, 10, .18) !important;
    box-shadow: 0 4px 0 rgba(24, 20, 10, .22), 0 6px 14px rgba(0, 0, 0, .3) !important;
    color: #16181d !important;
    transition: transform 90ms ease, box-shadow 90ms ease, background var(--ar-t) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .piano-key.white:hover {
    background: linear-gradient(180deg, #fffdf6 0%, #f3e9cd 100%) !important;
}

/* Tecla "afunda": translada e perde a sombra de 4px do mesmo tanto */
:is(#gm-overlay,#modal-overlay,.games-section,body) .piano-key.white:active,
:is(#gm-overlay,#modal-overlay,.games-section,body) .piano-key.white.selected {
    transform: translateY(3px) !important;
    box-shadow: 0 1px 0 rgba(24, 20, 10, .22), 0 2px 6px rgba(0, 0, 0, .3) !important;
    background: linear-gradient(180deg, #f7edd2 0%, #e8d9a8 100%) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .piano-key.black {
    background: linear-gradient(180deg, #2a2f38 0%, #12161c 100%) !important;
    border: 1px solid rgba(0, 0, 0, .6) !important;
    box-shadow: 0 4px 0 #05070a, 0 8px 16px rgba(0, 0, 0, .5) !important;
    color: #e6edf3 !important;
    transition: transform 90ms ease, box-shadow 90ms ease, background var(--ar-t) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .piano-key.black:hover {
    background: linear-gradient(180deg, #39404b 0%, #1a1f27 100%) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .piano-key.black:active,
:is(#gm-overlay,#modal-overlay,.games-section,body) .piano-key.black.selected {
    transform: translateY(3px) !important;
    box-shadow: 0 1px 0 #05070a, 0 3px 8px rgba(0, 0, 0, .5) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .piano-key.white.correct,
:is(#gm-overlay,#modal-overlay,.games-section,body) .piano-key.black.correct {
    background: linear-gradient(180deg, #4ad463 0%, #1a7f37 100%) !important;
    color: var(--ar-ok-ink) !important;
    animation: arPop 400ms var(--ar-spring) both !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .piano-key.white.wrong,
:is(#gm-overlay,#modal-overlay,.games-section,body) .piano-key.black.wrong {
    background: linear-gradient(180deg, #ff7b73 0%, #c1332b 100%) !important;
    color: #2b0705 !important;
    animation: arShake 460ms cubic-bezier(.36, .07, .19, .97) both !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .piano-key-label {
    color: inherit !important;
    opacity: .7;
}

/* --- Chips de notas --- */
:is(#gm-overlay,#modal-overlay,.games-section,body) .note-chip {
    background: var(--ar-gold-wash) !important;
    border: 1px solid var(--ar-gold-line) !important;
    color: var(--ar-gold) !important;
    border-radius: var(--ar-r-pill) !important;
    font-weight: 700 !important;
    animation: arPop 300ms var(--ar-spring) both;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .note-chip.empty {
    background: var(--ar-elev) !important;
    border-style: dashed !important;
    border-color: var(--ar-line-strong) !important;
    color: var(--ar-text-dim) !important;
    animation: none;
}

/* --- Simon --- */
:is(#gm-overlay,#modal-overlay,.games-section,body) .simon-grid {
    gap: 14px !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .simon-btn {
    border-radius: var(--ar-r-lg) !important;
    border: 1px solid var(--ar-line) !important;
    background: var(--ar-surface-2) !important;
    color: var(--ar-text) !important;
    font-weight: 800 !important;
    position: relative;
    overflow: hidden;
    box-shadow: var(--ar-sh-sm), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
    transition: transform 140ms var(--ar-out), box-shadow 140ms var(--ar-out), border-color var(--ar-t) !important;
}

body.theme-light :is(#gm-overlay,#modal-overlay,.games-section) .simon-btn:not(.flash) {
    background: var(--ar-surface) !important;
}

/* --sc é a cor de identidade do acorde, injetada inline por
   games.js. Repetida aqui como fallback caso o atributo falte. */
:is(#gm-overlay,#modal-overlay,.games-section,body) .simon-btn {
    --sc: var(--ar-gold);
    background:
        linear-gradient(160deg, color-mix(in srgb, var(--sc) 16%, transparent) 0%, transparent 70%),
        var(--ar-surface-2) !important;
    border-color: color-mix(in srgb, var(--sc) 40%, transparent) !important;
}

body.theme-light :is(#gm-overlay,#modal-overlay,.games-section) .simon-btn:not(.flash) {
    background:
        linear-gradient(160deg, color-mix(in srgb, var(--sc) 13%, transparent) 0%, transparent 70%),
        var(--ar-surface) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .simon-btn::after {
    background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--sc) 70%, transparent) 0%, transparent 72%) !important;
    opacity: 0;
    transition: opacity 260ms ease-out !important;
}

/* Flash da sequência: a luz acende num frame (transition 0ms) e
   apaga em 260ms. A assimetria é proposital — é assim que luz real
   se comporta, e é o que faz o flash parecer "aceso" e não animado. */
:is(#gm-overlay,#modal-overlay,.games-section,body) .simon-btn.flash {
    border-color: var(--sc) !important;
    background:
        linear-gradient(160deg, color-mix(in srgb, var(--sc) 42%, transparent) 0%, color-mix(in srgb, var(--sc) 14%, transparent) 100%),
        var(--ar-surface-2) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--sc) 55%, transparent), 0 0 36px color-mix(in srgb, var(--sc) 34%, transparent) !important;
    transform: scale(1.06) !important;
    transition-duration: 0ms !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .simon-btn.flash::after {
    opacity: 1 !important;
    transition-duration: 0ms !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .simon-btn:hover:not(:disabled):not(.flash) {
    border-color: color-mix(in srgb, var(--sc) 70%, transparent) !important;
    transform: translateY(-3px) !important;
    box-shadow: var(--ar-sh) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .simon-btn:active:not(:disabled) {
    transform: scale(.96) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .simon-btn:disabled {
    opacity: .45 !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .simon-btn .btn-notes {
    color: var(--ar-text-dim) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .simon-status {
    border-radius: var(--ar-r-pill) !important;
    font-weight: 800 !important;
    letter-spacing: .6px !important;
    background: var(--ar-elev) !important;
    border: 1px solid var(--ar-line) !important;
    color: var(--ar-text-soft) !important;
    transition: all var(--ar-t) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .simon-status.watching {
    background: var(--ar-gold-wash) !important;
    border-color: var(--ar-gold-line) !important;
    color: var(--ar-gold) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .simon-status.your-turn {
    background: var(--ar-ok-wash) !important;
    border-color: var(--ar-ok-line) !important;
    color: var(--ar-ok) !important;
    animation: arBreathe 1.8s ease-in-out infinite !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .simon-status.wrong {
    background: var(--ar-bad-wash) !important;
    border-color: var(--ar-bad-line) !important;
    color: var(--ar-bad) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .simon-level-display {
    color: var(--ar-text) !important;
    font-variant-numeric: tabular-nums;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .simon-dot {
    background: var(--ar-line-strong) !important;
    transition: all 200ms var(--ar-spring) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .simon-dot.done {
    background: var(--ar-gold) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .simon-dot.current {
    background: var(--ar-gold-bright) !important;
    box-shadow: 0 0 12px var(--ar-gold) !important;
    transform: scale(1.5) !important;
}

/* --- Acorde na Hora Certa --- */
:is(#gm-overlay,#modal-overlay,.games-section,body) .ahc-chord-display {
    background:
        radial-gradient(100% 100% at 50% 0%, var(--ar-gold-wash) 0%, transparent 70%),
        var(--ar-elev) !important;
    border: 1px solid var(--ar-line) !important;
    border-radius: var(--ar-r-lg) !important;
    color: var(--ar-text) !important;
    letter-spacing: -1px !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .ahc-chord-display.correct {
    border-color: var(--ar-ok-line) !important;
    color: var(--ar-ok) !important;
    background: var(--ar-ok-wash) !important;
    animation: arPop 420ms var(--ar-spring) both !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .ahc-chord-display.wrong {
    border-color: var(--ar-bad-line) !important;
    color: var(--ar-bad) !important;
    background: var(--ar-bad-wash) !important;
    animation: arShake 480ms cubic-bezier(.36, .07, .19, .97) both !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .ahc-timer-ring .bg {
    stroke: var(--ar-elev-2) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .ahc-timer-ring .fill {
    stroke: var(--ar-gold) !important;
    filter: drop-shadow(0 0 6px var(--ar-gold-wash-2));
    transition: stroke-dashoffset 1s linear, stroke 300ms ease !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .ahc-timer-ring .fill.urgente {
    stroke: var(--ar-bad) !important;
    filter: drop-shadow(0 0 10px var(--ar-bad-line));
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .ahc-timer-text {
    color: var(--ar-text) !important;
    font-variant-numeric: tabular-nums;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .chord-diagram-btn {
    background: var(--ar-surface-2) !important;
    border: 1px solid var(--ar-line) !important;
    border-radius: var(--ar-r) !important;
    color: var(--ar-text) !important;
    box-shadow: var(--ar-sh-sm) !important;
    transition: transform 150ms var(--ar-out), border-color var(--ar-t), background var(--ar-t) !important;
}

body.theme-light :is(#gm-overlay,#modal-overlay,.games-section) .chord-diagram-btn:not(.correct):not(.wrong) {
    background: var(--ar-surface) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .chord-diagram-btn:hover:not(:disabled) {
    border-color: var(--ar-gold-line) !important;
    background: var(--ar-gold-wash) !important;
    transform: translateY(-3px) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .chord-diagram-btn.correct {
    border-color: var(--ar-ok-line) !important;
    background: var(--ar-ok-wash) !important;
    color: var(--ar-ok) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .chord-diagram-btn.wrong {
    border-color: var(--ar-bad-line) !important;
    background: var(--ar-bad-wash) !important;
    color: var(--ar-bad) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .chord-name-large {
    color: inherit !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .chord-type-small {
    color: var(--ar-text-dim) !important;
}

/* --- Quiz de progressão --- */
.progression-display {
    background: var(--ar-elev) !important;
    border: 1px solid var(--ar-line) !important;
    border-radius: var(--ar-r-lg) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .prog-chord {
    background: var(--ar-surface-2) !important;
    border: 1px solid var(--ar-line) !important;
    border-radius: var(--ar-r) !important;
    color: var(--ar-text) !important;
    font-weight: 800 !important;
}

body.theme-light :is(#gm-overlay,#modal-overlay,.games-section) .prog-chord:not(.tonic):not(.unknown) {
    background: var(--ar-surface) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .prog-chord.tonic {
    background: var(--ar-gold-wash) !important;
    border-color: var(--ar-gold-line) !important;
    color: var(--ar-gold) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .prog-chord.unknown {
    border-style: dashed !important;
    border-color: var(--ar-gold) !important;
    color: var(--ar-gold) !important;
    animation: arBreathe 1.6s ease-in-out infinite !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .prog-arrow {
    color: var(--ar-text-dim) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .prog-context {
    color: var(--ar-text-dim) !important;
}

/* --- Memória --- */
:is(#gm-overlay,#modal-overlay,.games-section,body) .memory-card-btn {
    border-radius: var(--ar-r) !important;
    border: 1px solid var(--ar-line) !important;
    background: transparent !important;
    transition: transform 200ms var(--ar-out) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .memory-card-btn::before {
    border-radius: var(--ar-r) !important;
    transition: all 300ms var(--ar-out) !important;
}

/* Verso da carta. games.css só conhece `.hidden`, que não usamos
   mais (colide com o Tailwind), então o estado virado-para-baixo é
   redefinido inteiro aqui. */
:is(#gm-overlay,#modal-overlay,.games-section,body) .memory-card-btn.is-oculta::before {
    opacity: 1 !important;
    background:
        repeating-linear-gradient(45deg, rgba(212, 175, 55, .07) 0 6px, transparent 6px 12px),
        linear-gradient(160deg, var(--ar-surface-3) 0%, var(--ar-surface-2) 100%) !important;
    border: 1px solid var(--ar-line) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .memory-card-btn.is-oculta {
    display: flex !important;
    cursor: pointer;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .memory-card-btn.is-oculta .card-face {
    opacity: 0 !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .memory-card-btn.is-oculta .memory-qmark {
    opacity: 1 !important;
}

/* Virada e encontrada: o verso (::before) sai de cena por opacity —
   quem aparece é o fundo do próprio botão. Pintar o ::before aqui
   seria inútil, porque ele está invisível nesses dois estados. */
:is(#gm-overlay,#modal-overlay,.games-section,body) .memory-card-btn.revealed {
    background:
        linear-gradient(150deg, color-mix(in srgb, var(--mc, var(--ar-gold)) 26%, transparent) 0%, transparent 78%),
        var(--ar-surface-2) !important;
    border-color: color-mix(in srgb, var(--mc, var(--ar-gold)) 55%, transparent) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .memory-card-btn.found {
    background: var(--ar-ok-wash) !important;
    border-color: var(--ar-ok-line) !important;
    cursor: default !important;
}

/* Grade e painel da Memória */
:is(#gm-overlay,#modal-overlay,body) .memory-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
}

:is(#gm-overlay,#modal-overlay,body) .mem-hud {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: var(--ar-elev);
    border: 1px solid var(--ar-line);
    border-radius: var(--ar-r);
    padding: 10px 8px;
    margin-bottom: 10px;
}

:is(#gm-overlay,#modal-overlay,body) .mem-hud-item {
    text-align: center;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .memory-card-btn .card-face {
    color: var(--ar-text) !important;
    transition: opacity 200ms var(--ar-out) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .memory-card-btn.found .card-face {
    color: var(--ar-ok) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .memory-card-btn.is-oculta:hover:not(:disabled) {
    transform: translateY(-4px) scale(1.02) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .memory-card-btn:not(.is-oculta) {
    animation: arFlip 340ms var(--ar-out) both;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .memory-card-btn.found {
    animation: arPop 420ms var(--ar-spring) both !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .memory-qmark {
    color: var(--ar-gold) !important;
    opacity: .5;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .card-sub-notes {
    color: var(--ar-text-dim) !important;
}


/* ─── 09. FERRAMENTA: AFINADOR ─────────────────────────────── */
/* O afinador herdava a largura máxima genérica do modal e virava
   uma faixa de 1400px com um "A" no meio. Ele é um instrumento de
   leitura vertical: quanto mais estreito, mais rápido o olho vai do
   ponteiro à nota. */
#modal-overlay :is(.modal,#modal-content):has(.af-container) {
    max-width: 480px !important;
}

#modal-overlay .af-container {
    align-items: center !important;
}

/* A pílula de status é um selo, não uma barra */
#modal-overlay .af-status-card {
    align-self: center !important;
    width: auto !important;
    min-width: 160px;
    text-align: center;
}

#modal-overlay .af-note-main {
    font-size: clamp(48px, 11vh, 84px) !important;
    margin-top: -8px !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .af-display {
    background: linear-gradient(180deg, var(--ar-elev) 0%, transparent 100%) !important;
    border: 1px solid var(--ar-line) !important;
    border-bottom: none !important;
    position: relative !important;
}

body.theme-light :is(#gm-overlay,#modal-overlay,.games-section) .af-display {
    background: linear-gradient(180deg, var(--ar-surface-3) 0%, transparent 100%) !important;
    border-color: var(--ar-line) !important;
}

/* Marcas de escala do afinador: sem elas o ponteiro flutua sem
   referência e o usuário não sabe quanto falta. */
:is(#gm-overlay,#modal-overlay,.games-section,body) .af-display::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, transparent calc(50% - .5px), var(--ar-gold-line) 50%, transparent calc(50% + .5px)),
        repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), var(--ar-line-strong) calc(10% - 1px) 10%);
    -webkit-mask-image: linear-gradient(180deg, transparent 8%, #000 55%);
    mask-image: linear-gradient(180deg, transparent 8%, #000 55%);
    pointer-events: none;
}

/* Faixa verde do "afinado" — ±5 cents, a tolerância que o ouvido
   humano não distingue num violão. */
:is(#gm-overlay,#modal-overlay,.games-section,body) .af-display::after {
    content: '';
    position: absolute;
    left: 46%;
    right: 46%;
    top: 0;
    bottom: 0;
    background: linear-gradient(180deg, transparent, var(--ar-ok-wash));
    opacity: 0;
    transition: opacity 260ms var(--ar-out);
    pointer-events: none;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .af-display.is-tuned::after {
    opacity: 1;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .af-needle {
    background: linear-gradient(to top, transparent 8%, var(--ar-text-dim) 45%, var(--ar-text) 100%) !important;
    /* Mola crítica: chega rápido e para sem oscilar. Um ponteiro que
       balança dá impressão de leitura instável mesmo quando não é. */
    transition: left 140ms cubic-bezier(.22, 1, .36, 1), background 260ms ease, box-shadow 260ms ease !important;
    will-change: left;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .af-needle::after {
    background: var(--ar-surface) !important;
    border: 3px solid var(--ar-text-soft) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .af-needle.in-tune {
    background: linear-gradient(to top, transparent 8%, var(--ar-ok) 45%, var(--ar-ok) 100%) !important;
    box-shadow: 0 0 24px var(--ar-ok-line) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .af-needle.in-tune::after {
    border-color: var(--ar-ok) !important;
    box-shadow: 0 0 16px var(--ar-ok-line) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .af-note-main {
    color: var(--ar-text) !important;
    letter-spacing: -4px !important;
    font-variant-numeric: tabular-nums;
    transition: color 260ms ease, text-shadow 260ms ease !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .af-note-main.in-tune {
    color: var(--ar-ok) !important;
    text-shadow: 0 0 36px var(--ar-ok-line) !important;
    animation: arPop 380ms var(--ar-spring) both !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .af-freq-small {
    color: var(--ar-text-dim) !important;
    font-variant-numeric: tabular-nums;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .af-status-card {
    background: var(--ar-elev) !important;
    border: 1px solid var(--ar-line) !important;
    color: var(--ar-text-soft) !important;
    border-radius: var(--ar-r-pill) !important;
    transition: all 260ms var(--ar-out) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .af-status-card.afinado {
    background: var(--ar-ok-wash) !important;
    border-color: var(--ar-ok-line) !important;
    color: var(--ar-ok) !important;
    box-shadow: 0 0 24px var(--ar-ok-wash) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .af-status-card.baixo,
:is(#gm-overlay,#modal-overlay,.games-section,body) .af-status-card.alto {
    background: var(--ar-gold-wash) !important;
    border-color: var(--ar-gold-line) !important;
    color: var(--ar-gold) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .af-strings-label {
    color: var(--ar-text-dim) !important;
    letter-spacing: 1.4px !important;
    text-transform: uppercase;
    font-size: 11px !important;
    font-weight: 700 !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .af-string-btn {
    background: var(--ar-surface-2) !important;
    border: 1px solid var(--ar-line) !important;
    color: var(--ar-text) !important;
    border-radius: var(--ar-r) !important;
    box-shadow: var(--ar-sh-sm), inset 0 1px 0 rgba(255, 255, 255, .05) !important;
    transition: transform 160ms var(--ar-out), border-color var(--ar-t), background var(--ar-t), color var(--ar-t) !important;
}

body.theme-light :is(#gm-overlay,#modal-overlay,.games-section) .af-string-btn:not(.playing):not(.is-target) {
    background: var(--ar-surface) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .af-string-btn span {
    color: var(--ar-text-dim) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .af-string-btn:hover {
    background: var(--ar-gold-wash) !important;
    border-color: var(--ar-gold-line) !important;
    color: var(--ar-gold) !important;
    transform: translateY(-4px) !important;
    box-shadow: var(--ar-sh-gold) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .af-string-btn.playing {
    background: var(--ar-gold-fill) !important;
    border-color: transparent !important;
    color: var(--ar-gold-ink) !important;
    transform: translateY(-2px) scale(1.06) !important;
    box-shadow: var(--ar-sh-gold-lg) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .af-string-btn.playing span {
    color: var(--ar-gold-ink) !important;
    opacity: .75;
}

/* Corda que o afinador está detectando agora */
:is(#gm-overlay,#modal-overlay,.games-section,body) .af-string-btn.is-target {
    border-color: var(--ar-gold) !important;
    box-shadow: 0 0 0 2px var(--ar-gold-line) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .af-main-action {
    background: var(--ar-gold-fill) !important;
    color: var(--ar-gold-ink) !important;
    border: none !important;
    border-radius: var(--ar-r-pill) !important;
    font-weight: 800 !important;
    box-shadow: var(--ar-sh-gold), inset 0 1px 0 rgba(255, 255, 255, .32) !important;
    transition: transform var(--ar-t), box-shadow var(--ar-t) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .af-main-action:hover {
    transform: translateY(-3px) !important;
    box-shadow: var(--ar-sh-gold-lg) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .af-main-action.parar,
body.theme-light :is(#gm-overlay,#modal-overlay,.games-section) .af-main-action.parar {
    background: linear-gradient(135deg, #f85149 0%, #c1332b 100%) !important;
    color: #fff !important;
    box-shadow: 0 6px 24px rgba(248, 81, 73, .34) !important;
}

/* O pulso só existe enquanto o microfone está aberto — é o
   indicador de gravação, não decoração. */
:is(#gm-overlay,#modal-overlay,.games-section,body) .af-main-action.is-listening {
    animation: arListen 2s ease-out infinite !important;
}


/* ─── 10. FERRAMENTA: METRÔNOMO ────────────────────────────── */

#modal-overlay :is(.modal,#modal-content):has(.mt2-wrap) {
    max-width: 540px !important;
}

/* O modal ganhou duas linhas (tap e subdivisão). O ritmo vertical é
   reapertado aqui — e as folgas viram clamp() ligado à altura da
   janela — para caber inteiro num laptop sem rolagem, e continuar
   respirando numa tela grande. */
:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-wrap {
    gap: 0 !important;
    padding: 2px 20px 6px !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-arc-wrap {
    width: clamp(168px, 26vh, 218px) !important;
    height: clamp(168px, 26vh, 218px) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-controls {
    margin: clamp(8px, 2vh, 20px) 0 !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-slider-area {
    margin: clamp(4px, 1vh, 10px) 0 !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-sig-label {
    margin-top: clamp(10px, 2vh, 20px) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-signature {
    margin-top: clamp(6px, 1.2vh, 10px) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-extra {
    margin-top: clamp(10px, 2vh, 16px) !important;
    padding-top: clamp(10px, 2vh, 16px) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-hint {
    margin-top: clamp(8px, 1.5vh, 14px) !important;
}

/* O SVG escala com o wrap, mas o número dentro dele não escalava
   junto e transbordava nas alturas pequenas. */
:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-bpm-val {
    font-size: clamp(42px, 8vh, 64px) !important;
}

/* Anel — as medidas responsivas ficam no bloco de ritmo vertical
   logo acima; aqui só posição. */
:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-arc-wrap {
    position: relative !important;
    margin: 0 auto !important;
    flex-shrink: 0;
}


/* ═══ METRÓNOMO EM ECRÃ BAIXO ═══════════════════════════════
   Num portátil de 1366×768 sobram pouco mais de 600 px de área útil,
   e o metrónomo precisa de 593. Aqui ele encolhe onde não faz falta —
   o anel, as folgas e a linha de dica — para caber inteiro sem rolar.
   Os botões e o número do BPM ficam do mesmo tamanho: são o que se
   usa. Ver p83. */
@media (min-width: 769px) and (max-height: 760px) {
    :is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-arc-wrap {
        transform: scale(.78);
        transform-origin: top center;
        margin-bottom: -34px !important;
    }

    :is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-dots {
        margin: 2px 0 8px !important;
    }

    :is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-controls {
        margin: 6px 0 !important;
    }

    :is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-slider-area {
        margin: 2px 0 !important;
    }

    :is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-sig-label {
        margin-top: 6px !important;
    }

    :is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-signature {
        margin-top: 4px !important;
    }

    :is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-extra {
        margin-top: 6px !important;
        padding-top: 6px !important;
    }

    /* Texto de ajuda, não controlo: é o primeiro a sair. */
    :is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-hint {
        display: none !important;
    }
}

/* Com um modal aberto, a página por trás fica quieta. Sem isto são
   dois movimentos a disputar a mesma roda do rato — e o que se mexe
   costuma ser o errado. */
html body.ct-modal-aberto {
    overflow: hidden !important;
}

/* Recorte de 270° como fallback: se o JS não rodar, o anel ainda
   aparece como arco em vez de círculo fechado.
   578.05 = 2πr (r=92); 433.54 = 75% disso. */
:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-arc-track,
:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-arc-dash {
    stroke-dasharray: 433.54 578.05;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-arc-svg .mt2-arc-track {
    stroke: var(--ar-elev-2) !important;
    stroke-width: 10px !important;
    stroke-linecap: round !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-arc-svg .mt2-arc-dash {
    stroke: var(--ar-gold) !important;
    stroke-width: 10px !important;
    stroke-linecap: round !important;
    filter: drop-shadow(0 0 10px var(--ar-gold-wash-2)) !important;
    transition: stroke-dashoffset 260ms var(--ar-out) !important;
}

/* Halo que pulsa a cada tempo. Fica atrás do anel e some sozinho —
   a classe é removida pelo JS no fim da animação. */
:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-arc-wrap::before {
    content: '';
    position: absolute;
    inset: 8%;
    border-radius: 50%;
    background: radial-gradient(circle, var(--ar-gold-wash-2) 0%, transparent 68%);
    opacity: 0;
    pointer-events: none;
    transform: scale(.9);
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-arc-wrap.beat::before {
    animation: arBeat 420ms var(--ar-out);
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-arc-wrap.beat-strong::before {
    animation: arBeatStrong 520ms var(--ar-out);
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-bpm-val {
    /* Tamanho definido no bloco de ritmo vertical (escala com a
       altura da janela, junto com o anel). Antes eram 88px fixos e o
       "120" encostava nas duas bordas do anel. */
    line-height: .95 !important;
    letter-spacing: -3px !important;
    background: var(--ar-gold-metal) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .45)) !important;
    font-variant-numeric: tabular-nums;
    /* Sem isto o número "pula" a cada dígito e a leitura fica suja */
    font-feature-settings: 'tnum' 1;
    transition: transform 120ms var(--ar-spring) !important;
}

body.theme-light :is(#gm-overlay,#modal-overlay,.games-section) .mt2-bpm-val {
    filter: none !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-bpm-val.bump {
    transform: scale(1.06);
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-bpm-unit {
    color: var(--ar-gold) !important;
    letter-spacing: 5px !important;
    text-shadow: none !important;
}

/* Pontos de tempo */
:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-dots {
    gap: 12px !important;
    margin: 6px 0 14px !important;
    min-height: 18px;
    align-items: center;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-dot {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background: var(--ar-elev-2) !important;
    border: 1px solid var(--ar-line) !important;
    box-shadow: none !important;
    /* Transição só na saída. Na entrada o JS tira a transição para
       o acender ser instantâneo — luz acende, não desliza. */
    transition: transform 260ms var(--ar-out), background 260ms var(--ar-out), box-shadow 260ms var(--ar-out) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-dot.active {
    background: var(--ar-gold-soft) !important;
    border-color: var(--ar-gold-soft) !important;
    box-shadow: 0 0 14px var(--ar-gold-wash-2) !important;
    transform: scale(1.25) !important;
    transition-duration: 0ms !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-dot.strong {
    background: var(--ar-gold-bright) !important;
    border-color: var(--ar-gold-bright) !important;
    box-shadow: 0 0 22px var(--ar-gold), 0 0 0 3px var(--ar-gold-wash) !important;
    transform: scale(1.5) !important;
    transition-duration: 0ms !important;
}

/* Controles */
:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-controls {
    gap: clamp(10px, 3vw, 18px) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-btn-adj {
    background: var(--ar-surface-2) !important;
    border: 1px solid var(--ar-line) !important;
    color: var(--ar-text) !important;
    box-shadow: var(--ar-sh-sm), inset 0 1px 0 rgba(255, 255, 255, .05) !important;
    font-variant-numeric: tabular-nums;
    transition: transform 140ms var(--ar-out), background var(--ar-t), border-color var(--ar-t), color var(--ar-t) !important;
}

body.theme-light :is(#gm-overlay,#modal-overlay,.games-section) .mt2-btn-adj {
    background: var(--ar-surface) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-btn-adj:hover {
    background: var(--ar-gold-wash) !important;
    border-color: var(--ar-gold-line) !important;
    color: var(--ar-gold) !important;
    transform: translateY(-2px) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-btn-adj:active {
    transform: translateY(0) scale(.92) !important;
    transition-duration: 60ms !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-btn-play {
    background: var(--ar-gold-fill) !important;
    color: var(--ar-gold-ink) !important;
    border: none !important;
    box-shadow: var(--ar-sh-gold-lg), inset 0 2px 6px rgba(255, 255, 255, .3) !important;
    position: relative !important;
    transition: transform 180ms var(--ar-spring), box-shadow var(--ar-t) !important;
    /* O botão saía OVAL no telemóvel — achatado na largura.
       `.mt2-controls` é uma linha flex com quatro botões de ajuste e
       este no meio; a soma passa a largura do modal num ecrã estreito e
       o flex resolve isso encolhendo os itens. Só que `border-radius:
       50%` num rectângulo desenha uma elipse, e a `height` fixa não
       encolhe junto — o círculo esmaga-se na horizontal e a altura
       fica.

       É o mesmo problema que o comentário do aro (`.is-playing::before`)
       descreve mais abaixo; ali resolveu-se no pseudo-elemento e
       deixou-se o botão de fora.

       `flex-shrink: 0` tira-o da negociação de largura e `aspect-ratio`
       garante o círculo mesmo que uma folha antiga mexa só numa das
       medidas. */
    flex-shrink: 0 !important;
    aspect-ratio: 1 / 1 !important;
}

/* Pela mesma razão: os quatro botões de ajuste também são círculos numa
   linha flex, e encolhiam antes do botão central chegar a ceder. */
:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-btn-adj {
    flex-shrink: 0 !important;
    aspect-ratio: 1 / 1 !important;
}

/* ── A coluna dos botões de ajuste ──
   `.mt2-ctrl-adj-row` existia no HTML e em CSS nenhum. Era um `div`
   block com dois `<button>` inline-block lá dentro, e a única razão
   para aparecerem EMPILHADOS era a linha partir: o div encolhia como
   item flex até os dois botões deixarem de caber lado a lado.

   Layout por acidente, e com um efeito visível: as duas colunas
   encolhiam para larguras DIFERENTES (o conteúdo não é o mesmo — "−5"
   e "−" à esquerda, "+" e "+5" à direita), e como o espaço entre itens
   flex é medido a partir da borda de cada caixa, o botão de play ficava
   descentrado. Era o "uns símbolos mais afastados do play, outros mais
   perto": à esquerda sobrava a largura que a coluna não usou.

   Declarada como coluna, cada uma passa a medir exactamente um botão, e
   o `gap` do `.mt2-controls` volta a valer o mesmo dos dois lados. */
:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-ctrl-adj-row {
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(8px, 2vw, 14px) !important;
    flex-shrink: 0 !important;
    width: auto !important;
}

/* E o grupo inteiro centrado: sem `justify-content` a fila assentava
   no início do eixo, o que só não se notava enquanto ela ocupava a
   largura toda. */
:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-controls {
    justify-content: center !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-btn-play:hover {
    transform: scale(1.06) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-btn-play:active {
    transform: scale(.95) !important;
}

/* Aro que respira enquanto está tocando.
   `max-width: none` é obrigatório: ct-dark-theme.css aplica
   `max-width: 100%` a `*, ::before, ::after`, o que travava a
   largura do aro na do botão enquanto a altura crescia — o anel
   saía oval e deslocado para a esquerda. */
:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-btn-play.is-playing::before {
    content: '';
    position: absolute;
    inset: -6px;
    max-width: none !important;
    max-height: none !important;
    box-sizing: border-box;
    border-radius: 50%;
    border: 2px solid var(--ar-gold);
    opacity: 0;
    pointer-events: none;
    animation: arRipple 1.6s ease-out infinite;
}

/* Slider */
:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-slider-area {
    width: 100% !important;
    padding: 0 clamp(4px, 2vw, 16px) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-slider {
    height: 8px !important;
    border-radius: var(--ar-r-pill) !important;
    background: var(--ar-elev-2) !important;
    border: 1px solid var(--ar-line) !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35) !important;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

body.theme-light :is(#gm-overlay,#modal-overlay,.games-section) .mt2-slider {
    box-shadow: inset 0 1px 3px rgba(24, 20, 10, .12) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    background: var(--ar-gold-fill) !important;
    border: 3px solid var(--ar-surface) !important;
    box-shadow: var(--ar-sh-gold), 0 2px 6px rgba(0, 0, 0, .4) !important;
    cursor: grab;
    transition: transform 140ms var(--ar-spring), box-shadow var(--ar-t);
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-slider:active::-webkit-slider-thumb {
    cursor: grabbing;
    transform: scale(1.2);
    box-shadow: var(--ar-sh-gold-lg) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ar-gold);
    border: 3px solid var(--ar-surface);
    box-shadow: var(--ar-sh-gold);
    cursor: grab;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-slider:focus-visible {
    outline: 2px solid var(--ar-gold);
    outline-offset: 4px;
}

/* Compasso */
:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-sig-label,
:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-extra-label {
    color: var(--ar-text-dim) !important;
    letter-spacing: 2.4px !important;
    text-transform: uppercase;
    font-size: 11px !important;
    font-weight: 800 !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-sig-btn {
    background: var(--ar-surface-2) !important;
    border: 1px solid var(--ar-line) !important;
    color: var(--ar-text-soft) !important;
    border-radius: var(--ar-r-pill) !important;
    box-shadow: var(--ar-sh-sm) !important;
    transition: transform 140ms var(--ar-out), background var(--ar-t), color var(--ar-t), border-color var(--ar-t) !important;
}

body.theme-light :is(#gm-overlay,#modal-overlay,.games-section) .mt2-sig-btn:not(.active) {
    background: var(--ar-surface) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-sig-btn:hover {
    border-color: var(--ar-gold-line) !important;
    color: var(--ar-gold) !important;
    background: var(--ar-gold-wash) !important;
    transform: translateY(-2px) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-sig-btn.active {
    background: var(--ar-gold-fill) !important;
    border-color: transparent !important;
    color: var(--ar-gold-ink) !important;
    box-shadow: var(--ar-sh-gold) !important;
}

/* --- Linha extra: tap tempo e subdivisão (markup novo) --- */
:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-extra {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--ar-line);
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-tap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--ar-r-pill);
    background: var(--ar-surface-2);
    border: 1px solid var(--ar-line);
    color: var(--ar-text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .6px;
    cursor: pointer;
    box-shadow: var(--ar-sh-sm);
    transition: transform 120ms var(--ar-out), background var(--ar-t), border-color var(--ar-t), color var(--ar-t);
}

body.theme-light :is(#gm-overlay,#modal-overlay,.games-section) .mt2-tap:not(.tapped) {
    background: var(--ar-surface);
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-tap:hover {
    background: var(--ar-gold-wash);
    border-color: var(--ar-gold-line);
    color: var(--ar-gold);
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-tap:active,
:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-tap.tapped {
    transform: scale(.94);
    background: var(--ar-gold-fill);
    border-color: transparent;
    color: var(--ar-gold-ink);
    transition-duration: 60ms;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-tap-count {
    font-variant-numeric: tabular-nums;
    opacity: .7;
    font-weight: 600;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-subs {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border-radius: var(--ar-r-pill);
    background: var(--ar-elev);
    border: 1px solid var(--ar-line);
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-sub-btn {
    min-width: 42px;
    padding: 7px 10px;
    border-radius: var(--ar-r-pill);
    background: transparent;
    border: none;
    color: var(--ar-text-dim);
    font-family: 'Bravura Text', 'Segoe UI Symbol', serif;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background var(--ar-t), color var(--ar-t);
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-sub-btn:hover {
    color: var(--ar-gold);
    background: var(--ar-gold-wash);
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-sub-btn.active {
    background: var(--ar-gold-fill);
    color: var(--ar-gold-ink);
    font-weight: 700;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-sub-btn:focus-visible,
:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-tap:focus-visible,
:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-sig-btn:focus-visible,
:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-btn-adj:focus-visible,
:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-btn-play:focus-visible {
    outline: 2px solid var(--ar-gold);
    outline-offset: 3px;
}


/* ─── 11. FERRAMENTA: ESTÚDIO DE PROGRESSÕES ───────────────── */
:is(#gm-overlay,#modal-overlay,.games-section,body) .an-header h2 {
    color: var(--ar-text) !important;
    letter-spacing: -.6px !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .an-header p {
    color: var(--ar-text-dim) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .an-input-panel {
    background: var(--ar-elev) !important;
    border: 1px solid var(--ar-line) !important;
    border-radius: var(--ar-r-lg) !important;
    box-shadow: inset 0 2px 12px rgba(0, 0, 0, .22) !important;
    transition: border-color var(--ar-t), box-shadow var(--ar-t) !important;
}

body.theme-light :is(#gm-overlay,#modal-overlay,.games-section) .an-input-panel {
    background: var(--ar-surface-2) !important;
    box-shadow: inset 0 2px 12px rgba(24, 20, 10, .04) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .an-input-panel:focus-within {
    border-color: var(--ar-gold-line) !important;
    box-shadow: 0 0 0 3px var(--ar-gold-wash), inset 0 2px 12px rgba(0, 0, 0, .22) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .an-textarea {
    color: var(--ar-text) !important;
    background: transparent !important;
    text-shadow: none !important;
    font-family: 'Roboto Mono', ui-monospace, monospace !important;
    letter-spacing: 1px !important;
    resize: none;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .an-textarea::placeholder {
    color: var(--ar-text-dim) !important;
    opacity: .6;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .an-tool-btn {
    background: var(--ar-surface-2) !important;
    border: 1px solid var(--ar-line) !important;
    color: var(--ar-text-soft) !important;
    border-radius: var(--ar-r-pill) !important;
    box-shadow: var(--ar-sh-sm) !important;
    transition: all var(--ar-t) !important;
}

body.theme-light :is(#gm-overlay,#modal-overlay,.games-section) .an-tool-btn {
    background: var(--ar-surface) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .an-tool-btn:hover {
    background: var(--ar-gold-wash) !important;
    border-color: var(--ar-gold-line) !important;
    color: var(--ar-gold) !important;
    transform: translateY(-2px) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .btn-analyze {
    background: var(--ar-gold-fill) !important;
    color: var(--ar-gold-ink) !important;
    border: none !important;
    border-radius: var(--ar-r-pill) !important;
    font-weight: 800 !important;
    box-shadow: var(--ar-sh-gold), inset 0 1px 0 rgba(255, 255, 255, .3) !important;
    transition: transform var(--ar-t), box-shadow var(--ar-t) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .btn-analyze:hover {
    transform: translateY(-3px) !important;
    box-shadow: var(--ar-sh-gold-lg) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .btn-play {
    background: var(--ar-surface-2) !important;
    border: 1px solid var(--ar-gold-line) !important;
    color: var(--ar-gold) !important;
    border-radius: var(--ar-r) !important;
    box-shadow: var(--ar-sh-sm) !important;
    transition: all var(--ar-t) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .btn-play:hover {
    background: var(--ar-gold-wash) !important;
    transform: translateY(-2px) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .an-dashboard {
    animation: arRise 380ms var(--ar-out) both;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .an-card {
    background: var(--ar-elev) !important;
    border: 1px solid var(--ar-line) !important;
    border-radius: var(--ar-r-lg) !important;
    box-shadow: var(--ar-sh-sm) !important;
}

body.theme-light :is(#gm-overlay,#modal-overlay,.games-section) .an-card {
    background: var(--ar-surface) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .an-card.primary {
    background: linear-gradient(150deg, var(--ar-gold-wash-2) 0%, transparent 72%) !important;
    border-color: var(--ar-gold-line) !important;
}

/* O segundo card não compete pelo dourado — mas azul também não era
   a resposta: puxava o olho para longe do dado principal e não
   existe em nenhum outro ponto do site. Fica em tinta neutra, um
   degrau de superfície acima, e a hierarquia se resolve pelo
   dourado que só o card primário tem. */
:is(#gm-overlay,#modal-overlay,.games-section,body) .an-card.accent {
    background: var(--ar-surface-3) !important;
    border-color: var(--ar-line-strong) !important;
}

body.theme-light :is(#gm-overlay,#modal-overlay,.games-section) .an-card.accent {
    background: var(--ar-surface-3) !important;
    border-color: var(--ar-line) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .an-card-label {
    color: var(--ar-text-dim) !important;
    letter-spacing: 1.4px !important;
    text-transform: uppercase;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .an-card-val {
    color: var(--ar-text) !important;
    letter-spacing: -1px !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .an-card.primary .an-card-val {
    background: var(--ar-gold-metal) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .an-timeline-container {
    background: var(--ar-elev) !important;
    border: 1px solid var(--ar-line) !important;
    border-radius: var(--ar-r-lg) !important;
    box-shadow: inset 0 2px 12px rgba(0, 0, 0, .2) !important;
}

body.theme-light :is(#gm-overlay,#modal-overlay,.games-section) .an-timeline-container {
    background: var(--ar-surface-2) !important;
    box-shadow: inset 0 2px 12px rgba(24, 20, 10, .04) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .an-chord {
    background: var(--ar-surface-2) !important;
    border: 1px solid var(--ar-line) !important;
    border-radius: var(--ar-r) !important;
    color: var(--ar-text) !important;
    box-shadow: var(--ar-sh-sm) !important;
    transition: transform 220ms var(--ar-out), border-color var(--ar-t), background var(--ar-t), color var(--ar-t) !important;
}

body.theme-light :is(#gm-overlay,#modal-overlay,.games-section) .an-chord:not(.playing) {
    background: var(--ar-surface) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .an-item:hover .an-chord {
    background: var(--ar-gold-wash) !important;
    border-color: var(--ar-gold-line) !important;
    color: var(--ar-gold) !important;
    transform: translateY(-6px) scale(1.06) !important;
    box-shadow: var(--ar-sh-gold) !important;
}

/* Acorde que está tocando agora no player da progressão */
:is(#gm-overlay,#modal-overlay,.games-section,body) .an-chord.playing {
    background: var(--ar-gold-fill) !important;
    border-color: transparent !important;
    color: var(--ar-gold-ink) !important;
    transform: translateY(-8px) scale(1.1) !important;
    box-shadow: var(--ar-sh-gold-lg) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .an-deg {
    color: var(--ar-text-dim) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .an-deg.important {
    color: var(--ar-gold) !important;
    font-weight: 800 !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .an-action-btn {
    background: var(--ar-surface-2) !important;
    border: 1px solid var(--ar-line) !important;
    color: var(--ar-text-soft) !important;
    border-radius: var(--ar-r) !important;
    box-shadow: var(--ar-sh-sm) !important;
    transition: all var(--ar-t) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .an-action-btn:hover,
body.theme-light :is(#gm-overlay,#modal-overlay,.games-section) .an-action-btn:hover {
    background: var(--ar-gold-fill) !important;
    border-color: transparent !important;
    color: var(--ar-gold-ink) !important;
    transform: translateY(-3px) !important;
    box-shadow: var(--ar-sh-gold) !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .an-action-btn:hover i {
    color: var(--ar-gold-ink) !important;
}


/* ─── 12. FEEDBACK ─────────────────────────────────────────── */

/* Ripple no ponto do clique */
.ct-ripple {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, var(--ar-gold-wash-2) 0%, transparent 70%);
    transform: scale(0);
    opacity: .9;
    pointer-events: none;
    z-index: 0;
    animation: arRippleOut 600ms var(--ar-out) forwards;
}

.ct-confetti-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100000;
}

/* Popup de XP */
.xp-popup {
    color: var(--ar-ok) !important;
    font-weight: 900 !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .5) !important;
    letter-spacing: -.5px !important;
    pointer-events: none;
    z-index: 99999;
}

.xp-popup.combo {
    color: var(--ar-gold) !important;
}

.xp-popup.coins {
    color: var(--ar-gold-soft) !important;
}

/* Toast */
.ct-toast {
    position: fixed;
    top: 84px;
    left: 50%;
    transform: translateX(-50%) translateY(-14px);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 22px;
    border-radius: var(--ar-r-pill);
    background: var(--ar-surface);
    border: 1px solid var(--ar-gold-line);
    color: var(--ar-text);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 700;
    box-shadow: var(--ar-sh-lg), 0 0 0 1px var(--ar-gold-wash);
    z-index: 100001;
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms var(--ar-out), transform 300ms var(--ar-spring);
}

.ct-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.ct-toast-ico {
    font-size: 20px;
    line-height: 1;
}

.ct-toast.is-ok {
    border-color: var(--ar-ok-line);
}

.ct-toast.is-bad {
    border-color: var(--ar-bad-line);
}

/* Barra de power-ups */
:is(#gm-overlay,#modal-overlay,.games-section,body) .pu-bar {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .pu-chip {
    --pc: var(--ar-gold);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: var(--ar-r-pill);
    background: color-mix(in srgb, var(--pc) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--pc) 42%, transparent);
    color: var(--pc);
    font-size: 12px;
    font-weight: 700;
    cursor: default;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .pu-chip.is-clickable {
    cursor: pointer;
    transition: transform var(--ar-t), background var(--ar-t);
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .pu-chip.is-clickable:hover {
    transform: scale(1.07);
    background: color-mix(in srgb, var(--pc) 22%, transparent);
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .pu-chip.is-clickable:focus-visible {
    outline: 2px solid var(--pc);
    outline-offset: 2px;
}

/* Timer congelado pelo power-up ❄️ */
:is(#gm-overlay,#modal-overlay,.games-section,body) .hud-timer.congelado {
    color: #39c5cf !important;
    text-shadow: 0 0 16px rgba(57, 197, 207, .5);
    animation: arBreathe 1.2s ease-in-out infinite !important;
}

/* Botões de power-up dentro da partida */
:is(#gm-overlay,#modal-overlay,.games-section,body) .pu-action {
    padding: 6px 15px;
    border: 1px solid var(--ar-gold-line);
    border-radius: var(--ar-r-pill);
    background: var(--ar-gold-wash);
    color: var(--ar-gold);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--ar-t), transform var(--ar-t);
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .pu-action:hover {
    background: var(--ar-gold-wash-2);
    transform: translateY(-2px);
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .pu-action.is-hint {
    border-color: rgba(210, 153, 34, .45);
    background: rgba(210, 153, 34, .12);
    color: var(--ar-warn);
}


/* ─── 12b. PEÇAS MENORES DOS JOGOS ─────────────────────────── */
:is(#gm-overlay,#modal-overlay,.games-section,body) /* Estas classes substituíram estilos inline em games.js. O motivo
   está lá em cima, no renderHUD: `style=` vence a folha externa e
   congelava as cores no tema escuro. */

/* Botão ▶ dentro de um texto */
.g-play-inline {
    background: none;
    border: none;
    color: var(--ar-gold);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: var(--ar-r-sm);
    transition: transform var(--ar-t), background var(--ar-t);
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .g-play-inline:hover {
    background: var(--ar-gold-wash);
    transform: scale(1.15);
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .g-play-inline:active {
    transform: scale(.92);
}

/* Botão grande de ouvir (Identificador de Notas) */
:is(#gm-overlay,#modal-overlay,.games-section,body) .g-listen-btn {
    width: 84px;
    height: 84px;
    margin: 14px 0;
    border: none;
    border-radius: 50%;
    background: var(--ar-gold-fill);
    color: var(--ar-gold-ink);
    font-size: 28px;
    cursor: pointer;
    box-shadow: var(--ar-sh-gold-lg), inset 0 2px 6px rgba(255, 255, 255, .3);
    transition: transform 180ms var(--ar-spring), box-shadow var(--ar-t);
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .g-listen-btn:hover {
    transform: scale(1.08);
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .g-listen-btn:active {
    transform: scale(.94);
}

/* Aro pulsante: sinaliza que o botão é a ação principal da rodada.
   `max-width/height: none` pelo mesmo motivo do aro do metrônomo —
   ver a nota lá. */
:is(#gm-overlay,#modal-overlay,.games-section,body) .g-listen-btn::after {
    content: '';
    position: absolute;
    inset: -8px;
    max-width: none !important;
    max-height: none !important;
    box-sizing: border-box;
    border-radius: 50%;
    border: 2px solid var(--ar-gold);
    opacity: 0;
    animation: arRipple 2s ease-out infinite;
    pointer-events: none;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .g-listen-btn {
    position: relative;
}

/* Linha de feedback abaixo das opções */
:is(#gm-overlay,#modal-overlay,.games-section,body) .g-feedback {
    text-align: center;
    font-size: 13px;
    color: var(--ar-text-dim);
    min-height: 20px;
    margin-top: 10px;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .g-answer {
    color: var(--ar-gold);
    font-weight: 800;
}

/* Selos premium */
:is(#gm-overlay,#modal-overlay,.games-section,body) .g-prem-chip {
    display: inline-block;
    padding: 4px 13px;
    border-radius: var(--ar-r-pill);
    background: var(--ar-gold-fill);
    color: var(--ar-gold-ink);
    font-size: 11px;
    font-weight: 800;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .g-prem-banner {
    padding: 11px 16px;
    margin-bottom: 16px;
    border-radius: var(--ar-r);
    background: var(--ar-gold-wash);
    border: 1px solid var(--ar-gold-line);
    color: var(--ar-gold);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}

/* Memória — painel de estatísticas */
:is(#gm-overlay,#modal-overlay,.games-section,body) .mem-stat {
    font-size: 16px;
    font-weight: 800;
    color: var(--ar-text);
    font-variant-numeric: tabular-nums;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .mem-stat.is-ok {
    color: var(--ar-ok);
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .mem-stat.is-gold {
    color: var(--ar-gold);
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .mem-stat.is-alt {
    color: var(--ar-info);
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .mem-stat-den {
    color: var(--ar-text-dim);
    font-size: 12px;
    font-weight: 600;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .mem-stat-lbl {
    font-size: 9px;
    color: var(--ar-text-dim);
    text-transform: uppercase;
    letter-spacing: .6px;
    margin-top: 2px;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .mem-legend {
    display: flex;
    justify-content: center;
    gap: 16px;
    font-size: 11px;
    color: var(--ar-text-dim);
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .mem-legend .dot-gold,
:is(#gm-overlay,#modal-overlay,.games-section,body) .mem-legend .dot-alt {
    font-size: 10px;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .mem-legend .dot-gold {
    color: var(--ar-gold);
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .mem-legend .dot-alt {
    color: var(--ar-info);
}

/* Desafio — barra de tempo */
:is(#gm-overlay,#modal-overlay,.games-section,body) .ds-bar-wrap {
    background: var(--ar-elev-2);
    border: 1px solid var(--ar-line);
    border-radius: var(--ar-r-pill);
    height: 8px;
    overflow: hidden;
    margin-bottom: 14px;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .ds-bar {
    height: 100%;
    border-radius: var(--ar-r-pill);
    background: var(--ar-gold-fill);
    /* linear, não eased: uma barra de tempo tem que ser lida como
       medida, e qualquer easing mente sobre quanto sobrou. */
    transition: width 1s linear, background 400ms ease;
}

/* Abaixo de 25% vira alerta. O gradiente muda junto com o número
   para quem não distingue as cores ainda ter o contador. */
:is(#gm-overlay,#modal-overlay,.games-section,body) .ds-bar.critico {
    background: linear-gradient(135deg, #f85149, #c1332b);
}

/* Menu de jogos */
:is(#gm-overlay,#modal-overlay,.games-section,body) .gm-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .gm-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
    padding: 14px 16px;
    text-align: left;
    background: var(--ar-surface-2);
    border: 1px solid var(--ar-line);
    border-radius: var(--ar-r);
    color: var(--ar-text);
    font-family: inherit;
    cursor: pointer;
    box-shadow: var(--ar-sh-sm);
    animation: arSlideIn 340ms var(--ar-out) both;
    transition: transform 180ms var(--ar-out), border-color var(--ar-t), background var(--ar-t), box-shadow var(--ar-t);
}

body.theme-light :is(#gm-overlay,#modal-overlay,.games-section) .gm-item:not(:hover) {
    background: var(--ar-surface);
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .gm-item:hover {
    background: var(--ar-gold-wash);
    border-color: var(--ar-gold-line);
    transform: translateX(5px);
    box-shadow: var(--ar-sh);
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .gm-item:active {
    transform: translateX(5px) scale(.99);
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .gm-item-ico {
    font-size: 26px;
    line-height: 1;
    flex-shrink: 0;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .gm-item-main {
    flex: 1;
    min-width: 0;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .gm-item-meta {
    text-align: right;
    flex-shrink: 0;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .gm-item-name {
    font-weight: 700;
    font-size: 14px;
    color: var(--ar-text);
    margin-bottom: 3px;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .gm-item:hover .gm-item-name {
    color: var(--ar-gold);
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .gm-item-desc {
    font-size: 12px;
    color: var(--ar-text-dim);
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .gm-item-xp {
    font-size: 12px;
    font-weight: 800;
    color: var(--ar-gold);
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .gm-item-dif {
    font-size: 11px;
    color: var(--ar-text-dim);
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .gm-new {
    display: inline-block;
    margin-left: 7px;
    padding: 1px 8px;
    border-radius: var(--ar-r-pill);
    background: var(--ar-ok);
    color: var(--ar-ok-ink);
    font-size: 10px;
    font-weight: 800;
    vertical-align: middle;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .gm-intro {
    color: var(--ar-text-dim);
    font-size: 13px;
    text-align: center;
    margin-bottom: 14px;
}

/* Metrônomo — rótulo de andamento e dica de teclado */
:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-tempo-name {
    margin-top: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--ar-text-dim);
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-hint {
    margin-top: 14px;
    font-size: 11px;
    color: var(--ar-text-dim);
    opacity: .75;
    text-align: center;
}

/* A dica de atalhos só serve para quem tem teclado */
@media (hover: none) {
    :is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-hint {
        display: none;
    }
}

/* Estúdio — progressões salvas */
:is(#gm-overlay,#modal-overlay,.games-section,body) .an-saved-item {
    display: inline-flex;
    align-items: stretch;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .an-saved-item .an-tool-btn:first-child {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: none !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .an-del {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    padding: 10px 13px !important;
    font-size: 15px !important;
    line-height: 1 !important;
}

:is(#gm-overlay,#modal-overlay,.games-section,body) .an-del:hover {
    background: var(--ar-bad-wash) !important;
    border-color: var(--ar-bad-line) !important;
    color: var(--ar-bad) !important;
}


/* ─── 12c. DOURADO SOBRE DOURADO, NO TEMA CLARO ────────────── */
/* Toda pílula do arcade combina fundo `--ar-gold-wash` com texto
   `--ar-gold`. No escuro isso dá 6,09:1 — o wash escurece um fundo
   que já era escuro. No claro o efeito se inverte: o wash puxa o
   branco na direção do dourado, e a distância entre texto e fundo
   encolhe. Onde a peça está dentro de OUTRA superfície lavada (a
   tag dentro do card da pergunta, a tônica dentro da timeline) os
   dois washes se somam e o contraste cai para 3,99:1.

   A correção não é clarear o fundo — é escurecer o texto. O tom
   `bright` da rampa clara (#6f5512) é o mais escuro que existe nela
   e leva o pior caso de 3,99 para 5,4:1.

   Só o texto muda; fundo e borda continuam iguais, então a peça
   permanece visualmente a mesma. */
body.theme-light :is(#gm-overlay,#modal-overlay,.games-section) :is(.games-badge-top,
    .xp-card-icon,
    .games-tab:hover,
    .game-xp-badge,
    .g-question-tag,
    .g-opt-btn:hover:not(:disabled),
    .g-btn-secondary:hover,
    .g-premium-info,
    .note-chip,
    .simon-status.watching,
    .prog-chord.tonic,
    .prog-chord.unknown,
    .af-status-card.baixo,
    .af-status-card.alto,
    .af-string-btn:hover,
    .mt2-btn-adj:hover,
    .mt2-sig-btn:hover,
    .mt2-tap:hover,
    .mt2-sub-btn:hover,
    .an-tool-btn:hover,
    .an-deg.important,
    .pu-action,
    .g-prem-banner,
    .g-coins-info,
    .an-item:hover .an-chord) {
    color: var(--ar-gold-bright) !important;
}


/* ─── 13. ANIMAÇÕES ────────────────────────────────────────── */

@keyframes arOptIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes arSlideIn {
    from {
        opacity: 0;
        transform: translateX(-14px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes arFade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Entrada de modal: sobe, escala e desfoca de leve. O blur some
   antes do movimento acabar, senão parece lento. */
@keyframes arRise {
    from {
        opacity: 0;
        transform: translateY(22px) scale(.97);
        filter: blur(6px);
    }

    60% {
        filter: blur(0);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes arPop {

    0% {
        transform: scale(1);
    }

    45% {
        transform: scale(1.09);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes arShake {

    10%,
    90% {
        transform: translateX(-2px);
    }

    20%,
    80% {
        transform: translateX(4px);
    }

    30%,
    50%,
    70% {
        transform: translateX(-7px);
    }

    40%,
    60% {
        transform: translateX(7px);
    }
}

@keyframes arPulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .6;
        transform: scale(1.08);
    }
}

@keyframes arBreathe {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .62;
    }
}

@keyframes arGlow {

    0%,
    100% {
        box-shadow: 0 0 0 2px var(--ar-gold-line);
    }

    50% {
        box-shadow: 0 0 0 4px var(--ar-gold-wash-2), 0 0 22px var(--ar-gold-wash-2);
    }
}

@keyframes arSheen {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(220%);
    }
}

@keyframes arRippleOut {
    to {
        transform: scale(1);
        opacity: 0;
    }
}

@keyframes arRipple {
    0% {
        opacity: .7;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(1.35);
    }
}

@keyframes arListen {
    0% {
        box-shadow: 0 0 0 0 rgba(248, 81, 73, .55);
    }

    70% {
        box-shadow: 0 0 0 18px rgba(248, 81, 73, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(248, 81, 73, 0);
    }
}

/* Batida fraca e batida forte têm curvas diferentes de propósito:
   a forte vai mais longe e demora mais a sumir. */
@keyframes arBeat {
    0% {
        opacity: .85;
        transform: scale(.92);
    }

    100% {
        opacity: 0;
        transform: scale(1.12);
    }
}

@keyframes arBeatStrong {
    0% {
        opacity: 1;
        transform: scale(.9);
    }

    100% {
        opacity: 0;
        transform: scale(1.26);
    }
}

/* Virada em 2D (scaleX), não em rotateY.
   Com rotateY o Chrome rasteriza a carta numa textura 3D e o texto
   pequeno das notas ("F · A · C", 10px) simplesmente não era
   pintado: o elemento existia, com cor e opacidade corretas, e a
   carta aparecia vazia. scaleX dá a mesma leitura de "virou" sem
   sair do plano — e sem camada de composição. */
@keyframes arFlip {
    from {
        transform: scaleX(.05);
        opacity: .35;
    }

    60% {
        opacity: 1;
    }

    to {
        transform: scaleX(1);
        opacity: 1;
    }
}


/* ─── 14. RESPONSIVO ───────────────────────────────────────── */

@media (max-width: 640px) {

    #gm-overlay .game-modal,

    #modal-overlay :is(.modal,#modal-content) {
        border-radius: var(--ar-r-lg) !important;
        max-height: 92dvh !important;
    }

    :is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-extra {
        gap: 8px;
        margin-top: 12px;
        padding-top: 12px;
    }

    :is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-tap {
        padding: 9px 16px;
        font-size: 12px;
    }

    :is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-sub-btn {
        min-width: 36px;
        padding: 6px 8px;
    }

    :is(#gm-overlay,#modal-overlay,.games-section,body) .game-card::after {
        display: none;
        /* o sweep não vale o custo de pintura no mobile */
    }

    .ct-toast {
        top: auto;
        bottom: 24px;
        max-width: calc(100vw - 32px);
    }
}

@media (hover: none) {

    /* Sem cursor não existe hover: o estado só confundiria depois
       do toque. Fica só o :active. */
:is(#gm-overlay,#modal-overlay,.games-section,body)     .game-card:hover {
        transform: none !important;
    }

    :is(#gm-overlay,#modal-overlay,.games-section,body) .g-opt-btn:hover:not(:disabled) {
        transform: none !important;
    }
}


/* ─── 15. ACESSIBILIDADE ───────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {

    #gm-overlay .game-modal,

    #modal-overlay :is(.modal,#modal-content),
:is(#gm-overlay,#modal-overlay,.games-section,body) .g-question-card,
:is(#gm-overlay,#modal-overlay,.games-section,body) .g-result,
:is(#gm-overlay,#modal-overlay,.games-section,body) .an-dashboard,
:is(#gm-overlay,#modal-overlay,.games-section,body) .memory-card-btn:not(.is-oculta) {
        animation: none !important;
    }

    :is(#gm-overlay,#modal-overlay,.games-section,body) .g-progress-fill::after,
:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-btn-play.is-playing::before,
:is(#gm-overlay,#modal-overlay,.games-section,body) .af-main-action.is-listening,
:is(#gm-overlay,#modal-overlay,.games-section,body) .g-listen-btn::after,
:is(#gm-overlay,#modal-overlay,.games-section,body) .simon-status.your-turn,
:is(#gm-overlay,#modal-overlay,.games-section,body) .prog-chord.unknown,
:is(#gm-overlay,#modal-overlay,.games-section,body) .g-opt-btn.highlight,
:is(#gm-overlay,#modal-overlay,.games-section,body) .hud-timer.urgente,
:is(#gm-overlay,#modal-overlay,.games-section,body) .hud-timer.congelado,
:is(#gm-overlay,#modal-overlay,.games-section,body) .gm-item,
:is(#gm-overlay,#modal-overlay,.games-section,body) .note-chip {
        animation: none !important;
    }

    /* O halo de batida do metrônomo é a única pista visual do pulso;
       sem animação ele some, então vira um estado estático que o JS
       já liga e desliga a cada tempo. */
:is(#gm-overlay,#modal-overlay,.games-section,body)     .mt2-arc-wrap.beat::before,
:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-arc-wrap.beat-strong::before {
        animation: none !important;
        opacity: .5;
    }

    :is(#gm-overlay,#modal-overlay,.games-section,body) .game-card::after {
        display: none !important;
    }

    /* O feedback continua existindo — vira estado, não movimento. */
:is(#gm-overlay,#modal-overlay,.games-section,body)     .g-opt-btn,
:is(#gm-overlay,#modal-overlay,.games-section,body) .g-opt-btn.correct,
:is(#gm-overlay,#modal-overlay,.games-section,body) .g-opt-btn.wrong,
:is(#gm-overlay,#modal-overlay,.games-section,body) .ahc-chord-display.correct,
:is(#gm-overlay,#modal-overlay,.games-section,body) .ahc-chord-display.wrong,
:is(#gm-overlay,#modal-overlay,.games-section,body) .memory-card-btn.found,
:is(#gm-overlay,#modal-overlay,.games-section,body) .af-note-main.in-tune,
:is(#gm-overlay,#modal-overlay,.games-section,body) .piano-key.white.correct,
:is(#gm-overlay,#modal-overlay,.games-section,body) .piano-key.black.correct,
:is(#gm-overlay,#modal-overlay,.games-section,body) .piano-key.white.wrong,
:is(#gm-overlay,#modal-overlay,.games-section,body) .piano-key.black.wrong {
        animation: none !important;
    }

    * {
        transition-duration: 1ms !important;
    }
}

/* Foco visível consistente em tudo que é clicável no arcade */
:is(#gm-overlay,#modal-overlay,.games-section,body) .game-card:focus-visible,
:is(#gm-overlay,#modal-overlay,.games-section,body) .games-tab:focus-visible,
:is(#gm-overlay,#modal-overlay,.games-section,body) .game-play-btn:focus-visible,
:is(#gm-overlay,#modal-overlay,.games-section,body) .games-main-cta:focus-visible,
:is(#gm-overlay,#modal-overlay,.games-section,body) .simon-btn:focus-visible,
:is(#gm-overlay,#modal-overlay,.games-section,body) .memory-card-btn:focus-visible,
:is(#gm-overlay,#modal-overlay,.games-section,body) .chord-diagram-btn:focus-visible,
:is(#gm-overlay,#modal-overlay,.games-section,body) .af-string-btn:focus-visible,
:is(#gm-overlay,#modal-overlay,.games-section,body) .af-main-action:focus-visible,
:is(#gm-overlay,#modal-overlay,.games-section,body) .an-tool-btn:focus-visible,
:is(#gm-overlay,#modal-overlay,.games-section,body) .btn-analyze:focus-visible,
:is(#gm-overlay,#modal-overlay,.games-section,body) .g-btn-primary:focus-visible,
:is(#gm-overlay,#modal-overlay,.games-section,body) .g-btn-secondary:focus-visible {
    outline: 2px solid var(--ar-gold) !important;
    outline-offset: 3px !important;
}

/* Alto contraste: o dourado sozinho não pode ser o único sinal */
@media (prefers-contrast: more) {

    :is(#gm-overlay,#modal-overlay,.games-section,body) .g-opt-btn,
:is(#gm-overlay,#modal-overlay,.games-section,body) .mt2-sig-btn,
:is(#gm-overlay,#modal-overlay,.games-section,body) .af-string-btn,
:is(#gm-overlay,#modal-overlay,.games-section,body) .simon-btn,
:is(#gm-overlay,#modal-overlay,.games-section,body) .game-card {
        border-width: 2px !important;
    }
}