/* Edicao de perguntas no celular.

   O problema era largura: cada linha da lista tem quatro botoes num flex
   "flex:none" -- uns 300px so de botao -- e num celular de 360px sobrava
   quase nada para o enunciado. Aqui a linha empilha e os botoes viram uma
   grade de dois, com area de toque de gente.

   Os campos sobem para 16px porque abaixo disso o iPhone da zoom sozinho
   ao focar, e a pessoa termina a edicao inteira com a tela torta.

   Corte em 900px, nao nos 820px de habito: um celular grande deste time
   mediu 828px de largura de janela, e a regra antiga passava longe dele. */

@media (max-width: 900px) {
  .papqb-card { padding: 15px !important; }

  .papqb-linha { flex-direction: column !important; align-items: stretch !important; }

  .papqb-acoes {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    flex: 1 1 auto !important;
    margin-top: 8px;
  }
  /* A largura total so vale dentro da GRADE de acoes da lista de
     perguntas. Solta, esta regra espremia botoes soltos (o "Desligar"
     do cartao do premio) ate a palavra partir no meio. */
  .papqb-acoes .papqb-btn {
    width: 100% !important;
    padding: 11px 8px !important;
    font-size: 13px !important;
  }
  .papqb-btn { white-space: nowrap !important; }

  .papqb-form input, .papqb-form textarea, .papqb-form select, .papqb-busca {
    font-size: 16px !important;
  }
  .papqb-form textarea { min-height: 76px; }

  .papqb-alt { gap: 8px !important; }
  .papqb-alt input[type="radio"] { width: 22px !important; height: 22px !important; }

  .papqb-rodape { flex-direction: column-reverse !important; gap: 8px !important; }
  .papqb-rodape button { width: 100% !important; padding: 13px 16px !important; }
}

/* Tela do quiz em abas -- no celular o dedo precisa de alvo, e o botao
   Comecar precisa caber sem rolagem. */
@media (max-width: 900px) {
  .papq-jogar { padding: 16px !important; }
  .papq-abas { gap: 4px !important; }
  .papq-aba { padding: 12px 4px !important; font-size: 13px !important; }
  .papq-comecar { padding: 16px !important; font-size: 16px !important; }
}

/* Linha do ranking no celular.

   No computador ela tem cinco colunas: posicao(26) + nome + loja +
   acertos(82) + XP(64), com 12px de espaco entre elas. So de largura
   fixa sao 172px, mais 48 de espacamento: num celular de 360 sobram
   ~140 para o nome, e nomes reais nao cabem -- foi isso que apareceu
   como texto cortado. Aqui a coluna de acertos sai (ela e detalhe, nao
   e o placar) e o nome recupera o espaco. */
@media (max-width: 900px) {
  .papq-rk { gap: 8px !important; padding: 9px 6px !important; }
  .papq-rk-num { display: none !important; }
  .papq-rk-xp { width: 58px !important; }
  .papq-rk-loja { flex: none !important; }
}

/* Celular: botoes de quantidade menores e cabecalho da pagina menos alto.
   O cabecalho ocupava um terco da tela antes de aparecer qualquer coisa
   util -- num telefone isso e uma rolagem inteira so para comecar. */
@media (max-width: 900px) {
  .papq-qtd { padding: 8px 14px !important; font-size: 13.5px !important; }
  .papq-hero { margin-bottom: 8px !important; }
  .papq-hero .card, .papq-hero > div { padding: 13px 15px !important; }
}

/* Quatro abas numa linha so, tambem no celular. Cabe porque a fonte
   encolhe e o espacamento aperta: "Olimpiadas" a 11,5px ocupa ~62px, e
   num aparelho de 360px cada aba tem ~86px para usar. */
@media (max-width: 900px) {
  .papq-abas { gap: 3px !important; padding: 3px !important; }
  .papq-aba {
    padding: 11px 2px !important;
    font-size: 11.5px !important;
    letter-spacing: -0.2px !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* Botao "Chamar" da olimpiada. Ele usava as classes da lista de
   perguntas, e no celular herdava a grade de largura total -- por isso
   crescia no telefone e ficava normal no computador. */
.papol-btn { white-space: nowrap; }
@media (max-width: 900px) {
  .papol-btn { padding: 9px 14px !important; font-size: 12.5px !important; width: auto !important; }
}

/* Linha de participante da olimpiada.
   Ela usava as classes da lista de perguntas e herdava, no celular, o
   empilhamento: nome em cima, botao embaixo ocupando a largura toda.
   Aqui a linha continua horizontal em qualquer tela -- o nome encolhe
   com reticencias e o botao fica no fim dele. */
.papol-linha { flex-direction: row !important; align-items: center !important; }
.papol-linha > div:first-child { min-width: 0 !important; flex: 1 1 auto !important; }
.papol-btn { white-space: nowrap; flex: none !important; }
@media (max-width: 900px) {
  .papol-btn { width: auto !important; padding: 9px 14px !important; font-size: 12.5px !important; }
}