/* ═══════════════════════════════════════════════════════════════
   HAIL MARY — Projeto Astrophage
   MODO CONSOLA — a missão inteira num só ecrã (desktop)

   Uma consola de nave não se percorre com a roda do rato: lê-se de
   uma vez. Em desktop a página deixa de ser documento e passa a ser
   painel — altura travada ao viewport, decks a dividir o espaço que
   sobra em fracções, e cada valor vertical indexado a `vh` para que
   o painel encolha com dignidade em vez de rebentar.

   Aplica-se só onde há rato e hover (desktop real) e só acima de
   560px de altura. Abaixo disso, ou em toque, o documento volta a
   correr — esmagar até ao ilegível seria pior do que rolar.
   ═══════════════════════════════════════════════════════════════ */

@media (min-width: 901px) and (min-height: 560px) and (hover: hover) and (pointer: fine) {

  /* ─── Ritmo indexado à altura ──────────────────────────────── */

  :root {
    --gap:       clamp(8px, 1.25vh, 14px);
    --pad-panel: clamp(11px, 1.9vh, 20px);

    /* A consola cresce com o ecrã em vez de esticar só na vertical:
       mais altura disponível, painel mais largo, placas com a mesma
       proporção a 1366 e a 2560. */
    --max-width: clamp(1060px, 118vh, 1480px);
  }

  html, body {
    height: 100%;
    overflow: hidden;              /* sem scroll vertical nem horizontal */
    overscroll-behavior: none;
  }

  /* ─── Estrutura: uma coluna que ocupa exactamente o ecrã ───── */

  .wrapper {
    height: 100dvh;
    min-height: 0;
    padding-top:    clamp(12px, 2.4vh, 44px);
    padding-bottom: clamp(12px, 2.2vh, 32px);
    /* Em ecrãs altos a consola é um objecto centrado no vazio, não uma
       barra colada em cima e outra colada em baixo. */
    justify-content: center;
  }

  main {
    flex: 1;
    min-height: 0;
    /* Tecto: acima disto as placas deixavam de ser instrumentos e
       passavam a caixas ocas. O que sobra vira ar em cima e em baixo. */
    max-height: clamp(560px, 74vh, 780px);
    display: flex;
    flex-direction: column;
    gap: var(--gap);
  }

  /* Os dois decks repartem o espaço restante: o principal vale duas
     linhas, o técnico uma — o que dá linhas de igual altura nos dois. */
  main > .console            { flex: 2 1 0; min-height: 0; }
  main > .console--internal  { flex: 1 1 0; min-height: 0; }

  .console {
    grid-auto-rows: minmax(0, 1fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .console--internal { grid-template-rows: minmax(0, 1fr); }

  /* ─── Cabeçalho da consola ─────────────────────────────────── */

  .console-head { padding-bottom: clamp(8px, 1.6vh, 20px); }

  .mission-label {
    margin-bottom: clamp(3px, 0.8vh, 8px);
    font-size: clamp(9.5px, 1.15vh, 11px);
  }

  .mission-title { font-size: clamp(26px, min(5.4vw, 6.6vh), 52px); }

  .mission-subtitle {
    margin-top: clamp(3px, 0.8vh, 8px);
    font-size: clamp(11px, 1.4vh, 13px);
  }

  .head-clock  { font-size: clamp(16px, min(2.4vw, 2.7vh), 23px); }
  .head-coords { font-size: clamp(9.5px, 1.1vh, 10.5px); }

  .audio-toggle {
    margin-top: clamp(5px, 1vh, 10px);
    min-height: clamp(30px, 4.2vh, 44px);
    padding-block: 4px;
  }

  /* ─── Linha de Petrova ─────────────────────────────────────── */

  .petrova         { margin-bottom: clamp(10px, 2vh, 32px); }
  .petrova__stats  { padding: clamp(7px, 1.3vh, 14px) 4px; }

  /* ─── Cabeçalho do convés técnico ──────────────────────────── */

  .deck-internal-head {
    flex: 0 0 auto;
    margin: 0;
    padding-top: clamp(6px, 1.2vh, 14px);
  }

  /* ─── Placas ───────────────────────────────────────────────── */

  .panel {
    min-height: 0;
    gap: clamp(6px, 1vh, 10px);
  }

  .panel__icon {
    width:  clamp(28px, 4.4vh, 38px);
    height: clamp(28px, 4.4vh, 38px);
  }

  .panel--hero .panel__icon {
    width:  clamp(34px, 5.6vh, 46px);
    height: clamp(34px, 5.6vh, 46px);
  }

  .panel--cell .panel__icon {
    width:  clamp(24px, 3.8vh, 32px);
    height: clamp(24px, 3.8vh, 32px);
  }

  .panel__icon svg,
  .panel--hero .panel__icon svg { width: 58%; height: auto; }

  .panel__name              { font-size: clamp(16px, 2.2vh, 19px); }
  .panel--hero .panel__name { font-size: clamp(20px, min(3vw, 3.6vh), 30px); }
  .panel--cell .panel__name { font-size: clamp(13.5px, 1.9vh, 16px); }

  /* A descrição é apoio, não corpo de texto: corta em vez de empurrar. */
  .panel__desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
            line-clamp: 2;
    overflow: hidden;
    font-size: clamp(11px, 1.5vh, 12.5px);
  }

  .panel--hero .panel__desc {
    -webkit-line-clamp: 3;
            line-clamp: 3;
    font-size: clamp(12px, 1.7vh, 13.5px);
  }

  .panel--cell .panel__desc { font-size: clamp(10.5px, 1.35vh, 11.5px); }

  /* ─── Rodapé ───────────────────────────────────────────────── */

  .console-foot {
    flex: 0 0 auto;
    margin-top:  clamp(10px, 1.8vh, 34px);
    padding-top: clamp(8px, 1.4vh, 18px);
  }

  .social-link {
    min-height: clamp(30px, 4.2vh, 44px);
    padding-block: 4px;
  }

  /* ─── Ecrãs baixos: o convés técnico vira instrumentação ────── */

  /* Sem altura para prosa, as células ficam só com nome e estado —
     é o que uma linha de instrumentos mostra de qualquer maneira. */
  @media (max-height: 700px) {
    .panel--cell .panel__desc { display: none; }
  }

  /* Sem altura para a legenda da secção, resta o título. */
  @media (max-height: 620px) {
    .deck-internal-head__note { display: none; }
  }

  /* ─── Rocky não pode ficar por cima do rodapé ──────────────── */

  /* Numa página que rola, o Rocky flutua e o conteúdo passa por baixo.
     Num painel travado, a sobreposição seria permanente: abre-se-lhe
     lugar à direita e encolhe-se com o ecrã. */
  /* Reserva exactamente o que falta: se a margem livre ao lado da consola
     já chega para o Rocky, o rodapé não perde um pixel. */
  .console-foot {
    padding-right: max(0px, calc(158px - (100vw - var(--max-width)) / 2));
  }

  /* Quando o ecrã é estreito de mais para o ter ao lado da consola, o
     Rocky passa a estar *atrás* dela — de pé no convés — em vez de tapar
     o estado do último módulo. */
  @media (max-width: 1400px) {
    .rocky { z-index: 5; }
  }

  @media (max-height: 820px) {
    .rocky { transform: scale(0.86); transform-origin: 100% 100%; }
  }

  @media (max-height: 700px) {
    .rocky { transform: scale(0.72); transform-origin: 100% 100%; }
  }
}