/* Layout: fluxo (celular/tablet/PC) e modo TV (16:9, sem rolagem, escala proporcional). */
.boot { position: fixed; inset: 0; display: grid; place-content: center; justify-items: center; gap: 1.2rem; background: var(--fundo); z-index: 50; text-align: center; padding: 2rem; }
.boot__logo { width: min(18rem, 70vw); animation: pulse 2.2s ease-in-out infinite; }
.boot p { font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; color: var(--verde); }
@keyframes pulse { 50% { transform: scale(1.04); opacity: .85; } }

.app { display: flex; flex-direction: column; gap: var(--gap); padding: .8rem; max-width: 120rem; margin: 0 auto; }

.board { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.hero { order: 1; }
.board { order: 2; }
.overview { order: 3; display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }

/* --- tablet/celular --- */
@media (max-width: 700px) {
  .app { padding: .6rem; }
}

/* --- TV 16:9 (ativada por JS: .layout-tv) --- */
html.layout-tv { font-size: min(calc(100vw / 120), calc(100vh / 67.5)); }
.layout-tv body { height: 100vh; overflow: hidden; }
.layout-tv .app { height: 100vh; max-width: none; padding: 1rem; gap: .8rem; display: grid;
  grid-template-rows: auto auto 13.8rem minmax(0, 1fr) auto; }
.layout-tv .ribbons:empty { display: none; }
.layout-tv .top { grid-row: 1; }
.layout-tv .ribbons { grid-row: 2; }
.layout-tv .hero { grid-row: 3; }
.layout-tv .board { grid-row: 4; min-height: 0; gap: .8rem; grid-template-columns: none; }
.layout-tv .overview { grid-row: 5; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .8rem; height: 11.6rem; }
.layout-tv .overview:empty { display: none; }
.layout-tv .board > .panel { min-height: 0; min-width: 0; }