/* ============================================================================
   ui_polish_v1.css — padronização visual + micro-animações dos botões da UI.
   Objetivo: feedback moderno e suave (hover/active) sem pesar e sem quebrar
   layouts. Usa só transform/opacity/filter/box-shadow (composited → não causa
   reflow). Respeita prefers-reduced-motion.

   ESCOPO: botões "normais" de interface. EXCLUI explicitamente:
     • FABs flutuantes posicionados (#igc-fab,#igp-fab,#social-fab,#vb-start) —
       já têm hover próprio e posição fixa calculada;
     • botões de toque do jogo (#splitBtn,#ejectBtn,#mobileStuff…) — controles,
       não UI, e não devem "pular";
     • elementos com hover já definido (modais am-/igp-/gc-) ficam intactos.
   ============================================================================ */

/* Transição base — qualquer <button> e .btn ganham suavidade ao interagir.
   (transition é barata; só anima quando a propriedade muda de fato.) */
button,
.btn,
.auth-buttons .btn,
#helloDialog button,
.toolbar button,
.sp-btn,
.gc-btn {
    transition: transform .13s cubic-bezier(.2, .8, .3, 1),
                box-shadow .13s ease,
                filter .13s ease,
                background-color .13s ease,
                border-color .13s ease;
    will-change: transform;
}

/* Hover: leve zoom + brilho discreto + sombra suave. Só em dispositivos com
   ponteiro real (evita "hover preso" no toque). */
@media (hover: hover) and (pointer: fine) {
    button:not(:disabled):not(#igc-fab):not(#igp-fab):not(#social-fab):not(#vb-start):not(#splitBtn):not(#ejectBtn):not(.am-btn):not(.igp-tab):hover,
    .btn:not(:disabled):hover,
    .auth-buttons .btn:hover,
    #helloDialog button:not(:disabled):hover,
    .toolbar button:not(:disabled):hover {
        transform: translateY(-1px) scale(1.035);
        filter: brightness(1.08);
        box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
    }
}

/* Active (clique): afunda levemente — feedback tátil de pressão. */
button:not(:disabled):not(#igc-fab):not(#igp-fab):not(#social-fab):not(#vb-start):not(#splitBtn):not(#ejectBtn):active,
.btn:not(:disabled):active,
.auth-buttons .btn:active,
#helloDialog button:not(:disabled):active,
.toolbar button:not(:disabled):active {
    transform: translateY(0) scale(.97);
    filter: brightness(.96);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
    transition-duration: .06s;
}

/* Foco por teclado: anel sutil e consistente (acessibilidade + padrão visual). */
button:focus-visible,
.btn:focus-visible,
.auth-buttons .btn:focus-visible {
    outline: 2px solid rgba(96, 165, 250, .7);
    outline-offset: 2px;
}

/* Botões desabilitados: sem animação, aparência clara de inativo. */
button:disabled,
.btn:disabled {
    cursor: default;
    filter: saturate(.6) opacity(.7);
}

/* Acessibilidade: quem pede menos movimento não recebe os transforms. */
@media (prefers-reduced-motion: reduce) {
    button, .btn, .auth-buttons .btn, #helloDialog button, .toolbar button, .sp-btn, .gc-btn {
        transition: background-color .12s ease, border-color .12s ease, filter .12s ease;
        will-change: auto;
    }
    button:hover, .btn:hover, .auth-buttons .btn:hover,
    #helloDialog button:hover, .toolbar button:hover,
    button:active, .btn:active { transform: none !important; }
}