/* ============================================================
   PIPO · formato deitado (16:9) — tablets, computador e TV
   O jogo vira um "palco" 16:9 centralizado na tela. No celular
   em pé nada disso vale: o layout de sempre continua igual.
   ============================================================ */

/* aviso para celular deitado (pouca altura): pede para virar */
#girar { display: none; }
@media (orientation: landscape) and (max-height: 479px) {
  #girar {
    display: flex; position: fixed; inset: 0; z-index: 100;
    flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    background: linear-gradient(180deg, #7FD3FF, #3FA9F5); color: #fff;
    font: 700 24px var(--fonte); text-align: center; padding: 20px;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .2);
  }
  #girar img { height: 45vh; animation: girar-aviso 2s ease-in-out infinite; }
  @keyframes girar-aviso { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
}

@media (min-aspect-ratio: 4/3) and (min-height: 480px) {
  :root { --app-h: min(100dvh, 100vw * 9 / 16); }
  body { display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #2E6B3A, #173A20); }
  #app {
    max-width: none;
    width: min(100vw, 100dvh * 16 / 9);
    height: var(--app-h);
    margin: 0;
    box-shadow: 0 0 80px rgba(0, 0, 0, .4);
  }
  /* fundo deitado, se existir; senão usa o em pé */
  .fundo-ilustrado { background-image: var(--fundo-largo, none), var(--fundo); }

  /* ---------- início: personagens à esquerda, marca e botões à direita ---------- */
  .tela-inicio {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr auto auto;
    grid-template-areas: "topo topo" "palco marca" "palco acoes" "barra barra";
  }
  .tela-inicio > .topo { grid-area: topo; }
  .tela-inicio > .inicio-marca { grid-area: marca; align-self: end; }
  .tela-inicio > .inicio-palco { grid-area: palco; padding-top: 0; }
  .tela-inicio > .inicio-acoes { grid-area: acoes; align-self: start; padding-top: 18px; }
  .tela-inicio > .barra-madeira { grid-area: barra; justify-self: center; width: min(620px, 70%); }
  .logo { font-size: calc(var(--app-h) * .17); }
  .faixa-madeira { font-size: calc(var(--app-h) * .03); }
  /* menores, com os pés na trilha de terra do fundo */
  .tela-inicio > .inicio-palco { padding-bottom: 2%; padding-left: 12%; }
  .heroi-inicio { height: 64%; max-height: none; }
  .heroi-inicio .balao { font-size: 18px; }
  .amigo-inicio { max-height: none; height: 38%; }
  .btn-jogar { width: min(90%, 360px); }

  /* ---------- mapa: trilha no centro, floresta dos lados ---------- */
  .mapa-trilha { max-width: 640px; margin: 0 auto; }
  .mundos-abas { left: 50%; right: auto; transform: translateX(-50%); width: min(720px, 90%); }
  .mundo-aba-foto { max-width: 110px; height: 60px; }

  /* ---------- jogo: mais largo e com peças lado a lado ---------- */
  .jogo-missao { width: min(900px, 100%); margin: 0 auto; }
  .jogo-area { padding: 4px 32px 40px; }
  .se-par { flex-direction: row; gap: 18px; }
  .se-figura { width: min(48%, 620px, calc((var(--app-h) - 310px) * 1.333)); }
  .qc { flex-direction: row; align-items: center; justify-content: center; gap: 24px; }
  /* tudo abaixo desconta ~250-340px de topo + missão + folga embaixo (o "respiro") */
  .qc { flex: none; }
  .qc-tabuleiro { width: min(58%, 640px, calc((var(--app-h) - 270px) * 1.333)); }
  .qc-bandeja { width: min(38%, 440px); flex: none; max-height: calc(var(--app-h) - 270px); grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); align-content: start; }
  .en-cena { width: min(100%, 820px, calc((var(--app-h) - 300px) * 1.333)); }
  .mm-grade { width: min(100%, 760px, calc((var(--app-h) - 270px) / var(--linhas) * var(--colunas) * .8)); }
  .df-grade { width: min(100%, 720px, calc((var(--app-h) - 260px) * var(--colunas) / var(--linhas))); }
  .lb-tabuleiro { width: min(100%, 720px, calc((var(--app-h) - 290px) * var(--prop))); }
  .lp-quadro { width: min(100%, 620px); flex: none; max-height: none; }
  .lp-item { width: clamp(52px, calc((var(--app-h) - 330px) / 5.8), 92px); padding: 8px; }
  .lp-coluna { gap: 8px; }
  .mu-palco { width: min(100%, 620px, calc((var(--app-h) - 340px) * 1.45)); }
  .mu-casa { font-size: clamp(32px, calc((var(--app-h) - 340px) / 5), 64px); }
  .df-emoji { font-size: calc(min(720px, 100%) / var(--colunas) * .46); }

  /* ---------- jogos rápidos: 5 por linha ---------- */
  .rp-quadro { width: min(1000px, 94%); align-self: center; }
  .rp-grade { grid-template-columns: repeat(5, 1fr); }
  .rp-cartao:last-child:nth-child(3n+1) { grid-column: auto; }
  .rp-icone { width: 80px; height: 80px; }
  .rp-cartao b { font-size: 16px; }

  /* ---------- perfil: palco à esquerda, coleção à direita ---------- */
  .tela-perfil {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas: "topo topo" "palco abas" "palco itens" "palco acao";
  }
  .tela-perfil > .topo { grid-area: topo; }
  .tela-perfil > .perfil-palco { grid-area: palco; height: auto; margin: 0 8px 18px 18px; }
  .tela-perfil > .perfil-abas { grid-area: abas; padding-top: 0; }
  .tela-perfil > .perfil-itens { grid-area: itens; }
  .tela-perfil > .perfil-acao { grid-area: acao; }
  .mascote-perfil { width: min(24vw, 240px); }

  /* ---------- conquistas: duas colunas ---------- */
  .conq-lista { grid-template-columns: 1fr 1fr; width: min(1000px, 100%); margin: 0 auto; }

  /* ---------- área dos pais e compra: texto em coluna confortável ---------- */
  .pais { width: min(760px, 100%); margin: 0 auto; }
  .pais-cartoes { grid-template-columns: repeat(3, 1fr); }
}