/* Conjoin · Responsivo
   Mobile-first no conteúdo; no desktop o app fica num aparelho centralizado ao lado do painel de demonstração. */

/* Telas de celular reais: o app ocupa a tela inteira, sem moldura */
@media (max-width: 520px), (max-height: 640px) {
  body { background: var(--bg); }
  .stage { display: block; padding: 0; min-height: 100dvh; }
  .device {
    width: 100%;
    height: 100dvh;
    border-radius: 0;
    box-shadow: none;
  }
  .statusbar { display: none; }
  .app { padding-top: env(safe-area-inset-top, 0px); }
}

/* Telas muito estreitas (320px) */
@media (max-width: 359px) {
  :root { --gutter: 12px; }
  .facts { grid-template-columns: 1fr; }
  .slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento { grid-template-columns: 1fr; }
  .bento > .span-2 { grid-column: auto; }
  .match h1 { font-size: 2.5rem; line-height: 3rem; }
  .match-art { transform: scale(0.88); }
  .choices.is-grid { grid-template-columns: 1fr; }
}

/* Desktop: espaço para o painel de demonstração ao lado */
@media (min-width: 1100px) {
  .stage { grid-template-columns: 1fr auto 1fr; gap: var(--s-12); }
  .device { grid-column: 2; }
}