/* A moldura se ajusta ao canvas. A resolução e as coordenadas do jogo não mudam.
 * Arte 1920x1080: abertura em (383,201), medindo 1151x658. */
body { --altura-barra: 64px; background: #160c05; }
#barra-portal {
  position: fixed; inset: 0 0 auto; height: var(--altura-barra);
  box-sizing: border-box; z-index: 10010; padding: 0 clamp(18px, 2.2vw, 42px);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  background: #100e0b; border-bottom: 1px solid #745124; color: #fff0cd;
}
.marca-portal { display: flex; flex-direction: column; line-height: 1.15; }
.marca-portal span { font: 12px 'font2', sans-serif; text-transform: uppercase; letter-spacing: 2px; color: #efa948; }
.marca-portal strong { font: 23px 'font2', sans-serif; }
.acoes-portal { display: flex; align-items: center; gap: 12px; }
#barra-portal button {
  min-height: 44px; padding: 8px 20px; border: 1px solid #866031; border-radius: 4px;
  background: #21190f; color: #fff0cd; font: 16px 'font1', sans-serif; cursor: pointer;
}
#barra-portal button:hover { background: #382819; border-color: #efb855; }
#barra-portal #abrir-acessibilidade { position: static; opacity: 1; }
#acoes-acessiveis { left: auto; right: 20px; top: 76px; }
#palco-portal {
  position: fixed; inset: var(--altura-barra) 0 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  /* Reserva somente a largura dos rolos e uma margem de 24px em cada lado.
   * O limite vertical inclui as bordas douradas, sem comprimir a cena. */
  --largura-quadro: min(calc((100vw - 48px) * .83), calc((100vh - 112px) * 1.8769));
  --largura-quadro: min(calc((100vw - 48px) * .83), calc((100dvh - 112px) * 1.8769));
}
#quadro-portal {
  position: relative; flex-shrink: 0; width: var(--largura-quadro); aspect-ratio: 1238 / 640;
}
#moldura-portal {
  position: absolute; left: -33.275413%; top: -30.547112%;
  width: 166.811468%; height: 164.133739%; max-width: none;
  pointer-events: none; user-select: none; -webkit-user-drag: none;
}
#quadro-portal #jogo { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; }
#jogo canvas { display: block; }

/* Em telas pequenas o espaço pertence ao jogo; os controles acessíveis continuam disponíveis. */
@media (max-width: 900px), (max-height: 600px) {
  body { --altura-barra: 0px; }
  #barra-portal, .acoes-portal { display: contents; }
  .marca-portal, #expandir-jogo, #moldura-portal { display: none; }
  #quadro-portal { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
  #barra-portal #abrir-acessibilidade { position: fixed; top: 4px; left: 4px; opacity: .8; }
  #acoes-acessiveis { top: 56px; left: 4px; right: auto; }
}
body.portal-tela-cheia { --altura-barra: 0px; }
body.portal-tela-cheia #moldura-portal, body.portal-tela-cheia .marca-portal { display: none; }
body.portal-tela-cheia #quadro-portal { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
body.portal-tela-cheia #barra-portal { display: contents; }
body.portal-tela-cheia .acoes-portal { display: flex; position: fixed; left: 12px; bottom: 12px; z-index: 10010; opacity: 0; }
body.portal-tela-cheia .acoes-portal:hover, body.portal-tela-cheia .acoes-portal:focus-within { opacity: 1; }
body.portal-tela-cheia #barra-portal #abrir-acessibilidade { position: static; }
body.portal-tela-cheia #expandir-jogo { display: block; }
body.portal-tela-cheia #acoes-acessiveis { top: 12px; bottom: 70px; left: 12px; right: auto; }
@media (pointer: coarse) {
  body.portal-tela-cheia .acoes-portal { opacity: .8; }
}