/* ============================================================
   jda-mobile.css — Jogo da Amazônia
   Estilos EXCLUSIVOS para mobile e tablet (≤ 1024px).
   Carregado APÓS jda-base.css.
   Todas as regras devem estar dentro de @media de largura.
   ============================================================ */


/* ── Tablet 9:16 centrado (600–1024px) ───────────────────── */

@media (min-width: 600px) and (max-width: 1024px) {
  body {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* height: 100dvh explícito — 100% depende do pai sem altura definida */
  #game-container {
    width: min(100vw, calc(100dvh * 9 / 16));
    max-width: 430px;
    height: 100dvh;
  }

  .glass-card { max-width: 400px; }
}

/* Tablet maior com moldura arredondada (900–1024px) */
@media (min-width: 900px) and (max-width: 1024px) {
  #game-container {
    border-radius: 40px;
    height: min(100dvh, calc(100vw * 16 / 9));
    max-height: 900px;
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.06),
      0 40px 100px rgba(0, 0, 0, 0.65);
  }
}


/* ── Visibilidade do fundo no mobile/tablet ──────────────
   Blindagem explícita: temas WP podem setar display:none ou
   opacity:0 em elementos desconhecidos dentro do layout.
   No mobile o #bg não é position:fixed com z-index alto como
   no desktop — ele fica atrás via z-index:-1 e o body precisa
   ser transparente para expô-lo (ver jda-base.css body:transparent). */

@media (max-width: 1024px) {
  #bg {
    display: block !important;      /* alguns temas escondem divs sem classe conhecida */
    opacity: 1 !important;
    visibility: visible !important;
    z-index: -1 !important;         /* atrás do body/game-container; body transparente o expõe */
  }

  body.jda-fullscreen #jda-game-engine {
    background: transparent !important; /* sem canvas escuro sobre o #bg */
  }
}


/* ── Celular pequeno (≤599px): fonte mínima legível ──────── */

@media (max-width: 599px) {
  .dilema-situacao { font-size: 18px !important; line-height: 1.5 !important; }
  .opcao-texto     { font-size: 16px !important; }
}


/* ── Glass cards: Liquid Glass no mobile/tablet ──────────────
   Vidro cristalino: fundo bem transparente + blur médio preservam
   a foto enquanto o desfoque cria contraste suficiente para o texto.
   Usar body.jda-fullscreen (spec 31) é necessário porque jda-base.css
   define .glass-card com !important (spec 21) — sem o prefixo de body,
   a regra do base venceria mesmo carregando depois. */

@media (max-width: 1024px) {
  body.jda-fullscreen [class*="glass-card"]:not(.veredito-card),
  body.jda-fullscreen [class*="slide-content"] {
    background: rgba(255, 255, 255, 0.10) !important;
    backdrop-filter: blur(15px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(15px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.20) !important;
  }
}


/* ── Texto e botões no Liquid Glass (EXCLUSIVO mobile/tablet) ─
   Estratégia: texto branco + text-shadow em vez de fundo opaco.
   text-shadow cria um halo escuro atrás das letras que garante
   contraste sobre qualquer foto (clara ou escura) sem cobrir a
   imagem — substitui a alternativa de usar background sólido,
   que destruiria o efeito de vidro cristalino. */

@media (max-width: 1024px) {
  body.jda-fullscreen .dilema-situacao,
  body.jda-fullscreen .dilema-titulo {
    color: rgba(255, 255, 255, 0.96) !important;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.50) !important; /* halo de legibilidade */
  }
  body.jda-fullscreen .opcao-texto {
    color: rgba(255, 255, 255, 0.92) !important;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.50) !important; /* idem */
  }

  /* Botões de cristal: fundo semitransparente + borda branca.
     box-shadow:none remove a sombra do base que conflita com o
     visual de vidro — a borda branca já dá a separação necessária. */
  body.jda-fullscreen .btn-opcao {
    background: rgba(255, 255, 255, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.40) !important;
    color: rgba(255, 255, 255, 0.95) !important;
    box-shadow: none !important; /* remove sombra do base que conflita com liquid glass */
  }
  body.jda-fullscreen .btn-opcao:hover:not(:disabled):not(.selecionado) {
    background: rgba(255, 255, 255, 0.38) !important;
    border-color: rgba(255, 255, 255, 0.65) !important;
  }

  /* Botão (i): fundo verde sólido — sem ele o botão some sobre a
     vegetação da foto (ícone claro sobre fundo claro = invisível). */
  .btn-info {
    background: rgba(27, 72, 12, 0.85) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
  }
}