/* ═══════════════════════════════════════════════
   GAME BAR V2 — dois andares no mobile:
   ações (Chutar/Secar) em linha própria + pill de navegação embaixo
   (gate: GameBar::Gate — partial _game_bar_v2)

   Desktop (>768px): NENHUMA regra aqui muda nada — a v2 herda o visual da v1
   inteiro do arena.css (mesmas classes). Todo este arquivo só age no mobile.

   Convenções (não relaxar):
   - Todo seletor usa o composto `.game-bar.game-bar--v2` (0,2,0) — vence o
     `.game-bar` base e o media query mobile do arena.css:3983 por
     especificidade + ordem (este arquivo carrega DEPOIS de arena.css).
   - NUNCA overridar cor/background/box-shadow dos botões Chutar/Secar: os
     estados ready/pulse/pop/suspended e os temas dourado/bronze vivem nessas
     propriedades no arena.css/matches.css. Aqui só tamanho e forma.
   ═══════════════════════════════════════════════ */

/* Pill e menu Mais não existem no desktop. */
.game-bar.game-bar--v2 .game-bar-nav {
  display: none;
}

@media (max-width: 768px) {
  /* O pointer-events: none da raiz sozinho não basta: o hit-test pularia a
     raiz mas cairia no PAI #game-bar-wrapper (fixed, z-index 100), que ocupa
     a mesma área — os vãos transparentes virariam zona morta de toque. Com a
     v2 renderizada, o wrapper também vira none e os banners (presença /
     countdown de pré-temporada) reativam individualmente. */
  body:has(.game-bar--v2) .game-bar-wrapper {
    pointer-events: none;
  }

  body:has(.game-bar--v2) .game-bar-wrapper .presence-blocked-banner,
  body:has(.game-bar--v2) .game-bar-wrapper .game-bar-countdown {
    pointer-events: auto;
  }

  /* ── Raiz: dois andares — ações em cima, pill embaixo ── */
  .game-bar.game-bar--v2 {
    background: transparent;
    border-top: none;
    box-shadow: none;
    padding: 0 0.6rem 0.6rem;
    gap: 0.45rem;
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    /* O fundo transparente não deve roubar toques do conteúdo atrás;
       os andares reativam pointer-events. */
    pointer-events: none;
  }

  [data-theme="dark"] .game-bar.game-bar--v2 {
    background: transparent;
    box-shadow: none;
  }

  /* Temas de mata-mata pintam borda/sombra na RAIZ com !important
     (matches.css) — numa raiz transparente a borda dourada viraria uma linha
     solta atravessando o vão. Os botões continuam recebendo o tema. */
  .game-bar.game-bar--v2.game-bar-final,
  .game-bar.game-bar--v2.game-bar-third {
    border-top: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  /* Team badge e ícones da direita são elementos do layout desktop. */
  .game-bar.game-bar--v2 .game-bar-team-group,
  .game-bar.game-bar--v2 .game-bar-icons {
    display: none;
  }

  /* ── Ações: stack compacto FLUTUANDO à direita (teste 2026-08-14) ──
     Em vez da linha de largura total acima da pill, Chutar/Secar empilham
     verticais coladas à direita, num tamanho que não tampa a página — o
     conteúdo continua visível à esquerda do stack. */
  .game-bar.game-bar--v2 .game-bar-actions {
    order: 1;
    flex: 0 0 auto;
    position: relative;
    width: auto;
    align-self: flex-end;
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
    pointer-events: auto;
  }

  /* button_to embrulha cada botão num <form> — o flex item é o form. */
  .game-bar.game-bar--v2 .game-bar-actions > form,
  .game-bar.game-bar--v2 .game-bar-secar-wrap {
    flex: none;
    min-width: 0;
    display: flex;
  }

  .game-bar.game-bar--v2 .game-bar-secar-wrap form {
    flex: 1;
    display: flex;
    min-width: 0;
  }

  /* Só forma e tamanho — cor/sombra/estados ficam com o arena.css. */
  .game-bar.game-bar--v2 .game-bar-btn {
    flex: 1;
    width: 118px;
    min-width: 0;
    border-radius: 16px;
    padding: 0.65rem 0.6rem;
  }

  /* PRONTO: além do pulso de sombra do arena.css, um shake curto recorrente
     (~0.4s a cada 4s, com descanso) chama a atenção de quem está com a página
     aberta esperando o cooldown. A lista de animações precisa REPETIR o pulso
     do arena.css (animation é propriedade única — só o shake o apagaria). */
  .game-bar.game-bar--v2 .game-bar-chutar.game-bar-btn-ready {
    animation: game-bar-pulse-green 2s ease-in-out infinite,
               game-bar-v2-shake 4s ease-in-out 0.6s infinite;
  }

  .game-bar.game-bar--v2 .game-bar-secar.game-bar-btn-ready {
    animation: game-bar-pulse-red 2s ease-in-out infinite,
               game-bar-v2-shake 4s ease-in-out 0.6s infinite;
  }

  /* O :active do arena.css desliga a animação durante o press — a regra de
     cima tem especificidade maior e venceria sem este espelho. */
  .game-bar.game-bar--v2 .game-bar-chutar.game-bar-btn-ready:active,
  .game-bar.game-bar--v2 .game-bar-secar.game-bar-btn-ready:active {
    animation: none;
  }

  /* Cooldown (disabled): o arena.css usa opacity 0.5 no botão INTEIRO — sobre
     a barra branca da v1 era só um "washed", mas na v2 a raiz é transparente e
     o conteúdo da página vazava através do botão; e apagar o botão todo fazia
     as DUAS ações principais do jogo sumirem pra quem entra no meio do
     cooldown. Princípio: a IDENTIDADE (verde/vermelho) nunca esmaece — quem
     comunica a espera é o TIMER, protagonista do estado. */
  .game-bar.game-bar--v2 .game-bar-btn:disabled {
    opacity: 1;
    background: var(--bg-surface);
  }

  /* O arena.css põe pointer-events: none no :disabled — na v1 era inofensivo
     (clique caía na barra sólida), mas no stack FLUTUANTE o botão em cooldown
     ficava transparente ao toque e o clique atravessava pro link da página
     embaixo (navegação acidental). Botão visível SEMPRE captura o toque; em
     disabled o browser o torna inerte sozinho. */
  .game-bar.game-bar--v2 .game-bar-btn:disabled {
    pointer-events: auto;
  }

  .game-bar.game-bar--v2 .game-bar-chutar:disabled {
    background: var(--green-wash);
    border-color: rgba(45, 106, 79, 0.45);
  }

  /* A lavagem vermelha tem alpha — precisa ancorar sobre o surface SÓLIDO
     (background-color + image em camadas), senão vaza a página de novo. */
  .game-bar.game-bar--v2 .game-bar-secar:disabled {
    background-color: var(--bg-surface);
    background-image: linear-gradient(rgba(220, 38, 38, 0.07), rgba(220, 38, 38, 0.07));
    border-color: rgba(220, 38, 38, 0.38);
  }

  [data-theme="dark"] .game-bar.game-bar--v2 .game-bar-secar:disabled {
    background-image: linear-gradient(rgba(248, 113, 113, 0.12), rgba(248, 113, 113, 0.12));
    border-color: rgba(248, 113, 113, 0.4);
  }

  .game-bar.game-bar--v2 .game-bar-btn:disabled .game-bar-btn-label {
    opacity: 0.92;
  }

  .game-bar.game-bar--v2 .game-bar-btn:disabled .game-bar-btn-timer {
    opacity: 1;
    font-size: 0.72rem;
    font-weight: 700;
  }

  .game-bar.game-bar--v2 .game-bar-btn-label {
    font-size: 0.82rem;
  }

  .game-bar.game-bar--v2 .game-bar-btn-timer,
  .game-bar.game-bar--v2 .game-bar-btn-ready-text {
    font-size: 0.66rem;
  }

  /* Dia sem Secar (Copa/Estrelas): Chutar solo já ocupa a linha inteira. */
  .game-bar.game-bar--v2 .game-bar-actions-solo .game-bar-chutar {
    max-width: none;
  }

  /* Preferência de /personalizacao: stack à ESQUERDA (canhotos). */
  .game-bar.game-bar--v2.game-bar--actions-left .game-bar-actions {
    align-self: flex-start;
  }

  /* "Me avisa": o JS troca o textContent (5 estados) — vira um chip flutuante
     acima da barra, texto intacto. Sai do fluxo pra não roubar largura.
     O background é obrigatório: o estilo base (pwa_install.css) é
     `background: none` porque na v1 o chip senta sobre a barra branca — aqui
     ele flutua sobre o conteúdo da página. */
  .game-bar.game-bar--v2 .game-bar-remind-btn {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    background: var(--bg-surface);
    color: var(--text-secondary);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
  }

  .game-bar.game-bar--v2.game-bar--actions-left .game-bar-remind-btn {
    right: auto;
    left: 0;
  }

  [data-theme="dark"] .game-bar.game-bar--v2 .game-bar-remind-btn {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  }

  /* ── Andar de baixo: pill de navegação ── */
  .game-bar.game-bar--v2 .game-bar-nav {
    order: 2;
    position: relative; /* âncora do badge de não-lidas (irmão, fora do cache) */
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    width: 100%;
    gap: 0;
    padding: 0.25rem 0.35rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
    pointer-events: auto;
    min-width: 0;
    /* A pill vem ANTES das ações no DOM (ordem visual via `order`), então sem
       z-index os botões pintariam POR CIMA do menu Mais aberto. */
    z-index: 2;
  }

  [data-theme="dark"] .game-bar.game-bar--v2 .game-bar-nav {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  }

  .game-bar.game-bar--v2 .game-bar-nav-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-width: 0;
    gap: 0.12rem;
    padding: 0.35rem 0.2rem;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-display);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
  }

  .game-bar.game-bar--v2 .game-bar-nav-item:hover {
    color: var(--green-primary);
    background: var(--green-wash);
  }

  .game-bar.game-bar--v2 .game-bar-nav-item:focus-visible {
    outline: 2px solid var(--green-primary);
    outline-offset: 2px;
  }

  /* Labels estilo InfinitePay (a pill em largura total tem espaço).
     O :not() poupa o badge de não-lidas, que também é um span. */
  .game-bar.game-bar--v2 .game-bar-nav-item span:not(.game-bar-nav-badge) {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  /* Badge de não-lidas quando o jogador escolheu Mensagens na pill.
     Filho direto da .game-bar-nav (fora do fragment cache); o `left` vem
     inline do partial, calculado pelo índice do slot de Mensagens. */
  .game-bar.game-bar--v2 .game-bar-nav-badge {
    position: absolute;
    top: 1px;
    transform: translateX(-50%);
    min-width: 15px;
    height: 15px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 0.56rem;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
    border: 2px solid var(--bg-surface);
  }

  /* Item ativo: verde + o ponto laranja do "ebol." embaixo do label. */
  .game-bar.game-bar--v2 .game-bar-nav-active {
    color: var(--green-primary);
  }

  .game-bar.game-bar--v2 .game-bar-nav-active::after {
    content: "";
    position: absolute;
    bottom: 1px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent);
  }

  /* ── Menu "Mais" (abre pra cima) ── */
  .game-bar.game-bar--v2 .game-bar-more {
    position: relative;
    display: flex;
    flex: 1 1 0;
    min-width: 0;
  }

  .game-bar.game-bar--v2 .game-bar-more .game-bar-more-trigger {
    flex: 1;
    width: 100%;
  }

  .game-bar.game-bar--v2 .game-bar-more-menu {
    display: none;
    position: absolute;
    bottom: calc(100% + 12px);
    right: 0;
    flex-direction: column;
    min-width: 185px;
    padding: 0.35rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    z-index: 5;
  }

  [data-theme="dark"] .game-bar.game-bar--v2 .game-bar-more-menu {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  }

  .game-bar.game-bar--v2 .game-bar-more-menu.game-bar-more-open {
    display: flex;
    animation: game-bar-more-in 0.16s ease-out;
  }

  .game-bar.game-bar--v2 .game-bar-more-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.7rem;
    border-radius: 10px;
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease;
  }

  .game-bar.game-bar--v2 .game-bar-more-item svg {
    color: var(--text-muted);
    flex-shrink: 0;
  }

  .game-bar.game-bar--v2 .game-bar-more-item:hover {
    background: var(--bg-card-hover);
  }

  .game-bar.game-bar--v2 .game-bar-more-item-static {
    color: var(--text-muted);
  }

  .game-bar.game-bar--v2 .game-bar-more-badge {
    margin-left: auto;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
  }

  /* ── Folga do conteúdo (só quando a v2 renderiza — v1 intocada) ──
     Pill (~54px) + gap + stack vertical de ações (~130px): a folga precisa
     cobrir o stack inteiro, senão conteúdo do canto inferior fica
     permanentemente atrás dos botões, inalcançável mesmo rolando. */
  body:has(.game-bar--v2) .arena-main {
    padding-bottom: 14rem;
  }

  body:has(.game-bar--v2):has(.game-bar-countdown) .arena-main {
    padding-bottom: 16rem;
  }
}

/* PWA standalone: home indicator do iOS. */
@media (display-mode: standalone) and (max-width: 768px) {
  .game-bar.game-bar--v2 {
    padding-bottom: calc(0.6rem + env(safe-area-inset-bottom));
  }

  body:has(.game-bar--v2) .arena-main {
    padding-bottom: calc(14rem + env(safe-area-inset-bottom));
  }

  body:has(.game-bar--v2):has(.game-bar-countdown) .arena-main {
    padding-bottom: calc(16rem + env(safe-area-inset-bottom));
  }
}

/* ═══ Picker de atalhos da pill (/configuracoes, card "Barra de jogo") ═══
   Fora dos media queries: o card existe em qualquer largura. */

.gbnav-picker {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.gbnav-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.gbnav-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.gbnav-chip:hover {
  border-color: var(--green-primary);
  color: var(--text-primary);
}

.gbnav-chip.is-selected {
  background: var(--green-wash);
  border-color: var(--green-primary);
  color: var(--green-primary);
}

.gbnav-chip.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.gbnav-order {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.gbnav-order-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
}

.gbnav-order-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--green-primary);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  flex-shrink: 0;
}

.gbnav-order-label {
  flex: 1;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-primary);
}

.gbnav-order-actions {
  display: inline-flex;
  gap: 0.25rem;
}

.gbnav-order-actions button {
  width: 26px;
  height: 26px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: 0.75rem;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.gbnav-order-actions button:hover {
  color: var(--green-primary);
  border-color: var(--green-primary);
}

@keyframes game-bar-more-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* "Vibração" do botão pronto: rajada curta no início do ciclo, resto parado.
   Amplitude pequena (2px / 0.6deg) — nudge, não alarme. */
@keyframes game-bar-v2-shake {
  0%, 11%, 100% {
    transform: translateX(0) rotate(0);
  }
  2% {
    transform: translateX(-2px) rotate(-0.6deg);
  }
  4% {
    transform: translateX(2px) rotate(0.6deg);
  }
  6% {
    transform: translateX(-2px) rotate(-0.6deg);
  }
  8% {
    transform: translateX(2px) rotate(0.6deg);
  }
  10% {
    transform: translateX(-1px) rotate(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .game-bar.game-bar--v2 .game-bar-more-menu.game-bar-more-open {
    animation: none;
  }

  /* Sem shake — volta só ao pulso de sombra do arena.css. */
  .game-bar.game-bar--v2 .game-bar-chutar.game-bar-btn-ready {
    animation: game-bar-pulse-green 2s ease-in-out infinite;
  }

  .game-bar.game-bar--v2 .game-bar-secar.game-bar-btn-ready {
    animation: game-bar-pulse-red 2s ease-in-out infinite;
  }
}