/* Largura e colunas.
   O conteúdo tem a mesma largura da barra de cima (--wrap), então a faixa dos dois partidos, os botões
   e o menu ficam alinhados nas duas bordas. No computador, o jogo usa duas colunas: a ação à esquerda e a situação do jogo à direita. */
:root{--wrap:1180px}
#app.wide{max-width:none;padding-inline:max(16px,calc((100% - var(--wrap)) / 2),env(safe-area-inset-left,0px))}
.stage-in{max-width:none;margin:0;padding-inline:max(16px,calc((100% - var(--wrap)) / 2),env(safe-area-inset-left,0px))}
.skyline figcaption{right:max(16px,calc((100% - var(--wrap)) / 2),env(safe-area-inset-right,0px))}

/* Telas de foco (passar o celular, conectando): estreitas e centralizadas */
.solo{max-width:560px;margin:0 auto}
.cols-head{margin:0}

@media (min-width:1000px){
  #app:not(.wide){max-width:none;padding-inline:max(16px,calc((100% - var(--wrap)) / 2),env(safe-area-inset-left,0px))}
  .cols{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:0 28px;align-items:start}
  .col{min-width:0}
  .cols-head .hero{padding-top:8px}
  .cols-head .apura{padding:14px 22px 16px}
  .cols-head .apura .sides{gap:28px}
  .cols-head .apura .sn b{font-size:1.5rem}
  .cols-head .apura .sn span{font-size:1.7rem}
  .cols-head .apura .bar{height:10px}
  .cols-head .winner{padding:28px 32px}
}

/* Políticas e personagens: janelas largas, com os dois partidos lado a lado */
.lib-col{min-width:0}
@media (min-width:900px){
  dialog.wide{width:min(1100px,calc(100vw - 64px))}
  .lib{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;align-items:start}
  .lib-col > h3{position:sticky;top:50px;z-index:1;margin:0;padding:12px 0 8px;background:var(--screen);border-bottom:3px solid currentColor}
  .lib-col > h3.L{color:var(--party-l);box-shadow:0 4px 0 -1px var(--party-l-stripe)}
  .lib-col > h3.B{color:var(--party-b);box-shadow:0 4px 0 -1px var(--party-b-stripe)}
  .pers-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:0 20px;align-items:start}
}