/* ============================================================
   jda-desktop.css — Jogo da Amazônia
   Estilos EXCLUSIVOS para telas largas (≥ 1025px).
   Carregado POR ÚLTIMO — vence qualquer !important de
   mesma especificidade do base ou mobile via source order.
   Bloco único consolidado: sem hack de dois blocos desktop.
   ============================================================ */

@media (min-width: 1025px) {

  /* ── Estabilização de viewport ───────────────────────────────
     Cadeia de 100% garante que nenhum ancestral WP (html → body →
     #page → #jda-game-engine) quebre a altura com "auto".
     #jda-game-engine recebe 100vh !important logo abaixo (source order
     vence a cadeia de 100% para o mesmo elemento).
     #game-container é position:fixed — ignora esta cadeia e se ancora
     direto no viewport, mas a cadeia protege os elementos-irmãos. */

  html, body, #page, #jda-game-engine, #game-container {
    height: 100% !important;   /* !important: temas WP podem setar height:auto via herança */
    min-height: 100% !important;
    margin: 0;
    padding: 0;
  }

  /* ── Fundo e body ─────────────────────────────────────────── */

  html, body {
    background: transparent !important; /* foto deve respirar — sem canvas escuro */
    overflow: hidden;
  }

  body { display: block; } /* cancela flex-centrado do bloco tablet */

  /* Wrapper — 100vh !important vence o 100% da cadeia acima
     (mesma especificidade, source order posterior, ambos !important) */
  #jda-game-engine {
    display: block;
    background: transparent !important;
    height: 100vh !important;
    overflow: hidden;
    position: relative;
    backdrop-filter: none !important; /* blur exclusivo da .glass-card */
    filter: none !important;
  }

  /* ── Foto de fundo ────────────────────────────────────────── */

  #bg {
    position: fixed !important;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1 !important;    /* acima do body, abaixo do game-container */
    transform: none;
    filter: none !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: scroll !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Crédito fotográfico */
  #bg .foto-credito {
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 90;
    font-size: var(--credito-fonte);
    font-style: italic;
    line-height: 1.3;
    color: var(--credito-cor);
    background-color: var(--credito-bg);
    padding: 4px 10px;
    border-radius: 4px;
    white-space: nowrap;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
  }

  /* ── Game Container ──────────────────────────────────────────
     display:flex SEM !important: base também tem flex, então fonte
     de desempate é a ordem (desktop ganha por carregar depois).
     game-hidden{display:none} tem spec(1,1,0) > spec(1,0,0) aqui
     → esconde o container corretamente antes do jogo iniciar.

     flex-direction:column + align-items:center centraliza os slides.
     flex-shrink:0 nos slides impede encolhimento (vide .dilema-slide).
     overflow-y:scroll: snapTo() usa scrollIntoView — exige scroll.
     z-index:2: acima do #bg (z-index:1).                           */

  #game-container {
    /* display: flex SEM !important — game-hidden {display:none} spec(1,1,0)
       vence esta regra spec(1,0,0) mesmo sem !important. Se !important fosse
       usado aqui voltaria o bug de abril/2026: veredito no início do jogo.
       position:fixed !important: sai do fluxo do tema WP (Twenty Twenty-Five
       usa layout Constrained que empurra o container para baixo do header). */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    transform: none;
    z-index: 9999 !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    border: none;
    background: transparent !important;
    backdrop-filter: none !important;
    filter: none !important;
    overflow-y: scroll;
    scroll-snap-type: none; /* JS (snapTo+scrollIntoView) controla a navegação */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  #game-container::-webkit-scrollbar { display: none; } /* Webkit */

  /* ── Slides ──────────────────────────────────────────────────
     #game-container é position:fixed 100vw×100vh e display:flex
     flex-direction:column. Cada slide deve ocupar exatamente 100vh
     para o IntersectionObserver (threshold:0.55) ver apenas 1 slide
     por vez — se dois slides coubessem na tela, o observer dispararia
     buildVeredito() antes de o jogo terminar.

     display:flex !important: !important necessário para vencer
     eventuais overrides de display:block de temas WP nos filhos.
     flex-shrink:0 !important: sem isso, o flex-column do container
     encolhe os slides até a altura do conteúdo (~344px). */

  .dilema-slide {
    display: flex !important;          /* centraliza a pílula via flex */
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;         /* impede encolhimento no container flex-column */
    width: 100vw !important;           /* 100vw (não %) — container fixed não tem largura de layout */
    height: 100vh !important;
    min-height: 100vh !important;      /* dupla proteção: min/max travam o IntersectionObserver */
    max-height: 100vh !important;
    position: relative !important;     /* âncora para filhos position:absolute se necessário */
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box;
    background: transparent !important;
  }

  /* ── Pílula de Cinema ─────────────────────────────────────── */

  .glass-card {
    /* position:relative (não absolute): o slide pai já é display:flex
       com align-items/justify-content:center, então a pílula se centra
       automaticamente no fluxo normal. position:absolute + translate
       foi abandonado porque causava width:0 em contextos flex aninhados. */
    position: relative !important;
    width: 85% !important;
    max-width: 900px !important;
    max-height: 85vh;
    margin: 0 !important;
    overflow-y: auto;
    padding: 0;
  }

  /* Blur cinema: apenas na pílula — foto respira ao redor */
  .glass-card:not(.veredito-card) {
    background: rgba(0, 0, 0, 0.40) !important;
    backdrop-filter: blur(12px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.4) !important;
    border: none !important;
    padding: 0;
  }

  /* ── Splash — isolamento de fases ───────────────────────────
     opacity:0 deixa fantasma visível por 0.75s de transição.
     visibility:hidden com delay elimina após o fade-out completo. */

  .splash-phase {
    visibility: hidden;
    transition: opacity 0.75s ease, visibility 0s linear 0.75s;
  }

  .splash-phase.phase-active {
    visibility: visible;
    transition: opacity 0.75s ease; /* aparece imediatamente */
  }

  .splash-p2-inner,
  .splash-p3-inner {
    max-width: 640px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }

  /* ── Tokens e tipografia ──────────────────────────────────── */

  :root { --card-padding: 1.875rem; }

  .dilema-situacao {
    font-size: clamp(1.2rem, 1.8vw, 1.6rem) !important;
    line-height: 1.65 !important;
    color: rgba(255, 255, 255, 0.96) !important;
    /* text-shadow garante legibilidade sobre o glass escuro (rgba 0,0,0,0.40)
       sem depender de fundo sólido — mantém a estética de cinema */
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.70) !important;
  }

  .dilema-titulo {
    color: rgba(255, 255, 255, 0.96) !important;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.70) !important; /* idem acima */
  }

  .opcao-texto {
    font-size: clamp(1rem, 1.3vw, 1.15rem) !important;
    color: rgba(255, 255, 255, 0.92) !important;
    /* sem text-shadow: os botões já têm fundo rgba(255,255,255,0.12)
       que cria contraste suficiente para o texto das opções */
  }

  /* ── Botões sobre dark glass ──────────────────────────────── */

  .btn-opcao {
    min-height: 58px;
    padding: .9rem 1.5rem;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: rgba(255, 255, 255, 0.92) !important;
  }

  .btn-opcao:hover:not(:disabled):not(.selecionado) {
    background: rgba(255, 255, 255, 0.22) !important;
    color: rgba(255, 255, 255, 0.96) !important;
    border-color: rgba(255, 255, 255, 0.50) !important;
    transform: translateY(-1px);
  }

  .btn-opcao.selecionado,
  .btn-opcao.selecionado:disabled {
    background: rgba(255, 255, 255, 0.92) !important;
    color: #1B480C !important;
    border-color: rgba(255, 255, 255, 0.92) !important;
    opacity: 1 !important;
  }

  .btn-opcao.selecionado .opcao-texto,
  .btn-opcao.selecionado:disabled .opcao-texto {
    color: #1B480C !important;
    text-shadow: none !important;
  }

  /* ── Veredito ─────────────────────────────────────────────── */

  .veredito-radar-wrap { max-width: 420px; }

  /* ── Transparência total — extermínio do fundo cinza do WP ──
     Twenty Twenty-Five injeta background no body/#page/#jda-game-engine.
     Único fundo permitido: #bg (foto) e .glass-card (pílula).      */

  body.jda-fullscreen,
  body.jda-fullscreen #page,
  body.jda-fullscreen #jda-game-engine {
    background: transparent !important;
    background-color: transparent !important;
  }

  /* ── Z-index stack de camadas ────────────────────────────────
     #bg           z-index: 1     (foto de fundo)
     #game-container z-index: 9999 (container fixed)
     .glass-card   z-index: 100   (pílula — abaixo do modal)
     .modal-overlay z-index: 10000 (sobreposição do modal)
     .modal-content z-index: 10001 (conteúdo do modal, sempre na frente) */

  .glass-card { z-index: 100; }

  .modal-overlay { z-index: 10000 !important; }

  /* .modal-backdrop é o filho com rgba(0,0,0,0.42) + blur — apaga a névoa */
  .modal-backdrop {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Informação flutuando sobre a floresta: sombra garante legibilidade */
  .modal-content {
    z-index: 10001 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.50) !important;
    border: 1px solid rgba(255, 255, 255, 0.20) !important;
  }

  /* ── Botão de contexto (ℹ) ───────────────────────────────────
     Deve ficar acima da pílula e acessível sem interferência do
     brilho neon-traveling (pseudo-elementos com z-index negativo). */

  .btn-info {
    position: relative;
    z-index: 200 !important;
  }

}