/* Parte-Azulejos — só o que o /assets/base.css do hub não traz. Tudo num ecrã, sem scroll. */

#stage canvas { touch-action: none; }
.stage-overlay .row { justify-content: center; margin-top: 14px; }
.side .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#vidas { letter-spacing: -2px; }

/* O Ministério da Descarga comenta por cima do campo: não empurra nada do painel. */
.aviso {
  position: absolute; z-index: 3; left: 8px; right: 8px; top: 8px; margin: 0;
  padding: 7px 12px; border-radius: 12px; text-align: center;
  background: var(--yellow); color: var(--ink);
  border: 2px solid var(--yellow-edge); box-shadow: 0 3px 0 var(--yellow-edge);
  font: 700 var(--fs-sm)/1.25 var(--font);
  pointer-events: none;
  animation: aviso-entra .22s ease-out;
}
@keyframes aviso-entra { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Nome da obra (o nível) */
.obra {
  margin: 10px 0 0; text-align: center;
  font: 700 var(--fs-sm)/1.2 var(--display); color: var(--ink-2);
}

/* Poderes ligados, com o tempo que falta a escorrer por baixo */
.poderes { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; min-height: 34px; }
.poderes:empty::before {
  content: "Sem poderes. Parte azulejos, que eles caem.";
  font-size: var(--fs-2xs); color: var(--muted); font-weight: 600;
}
.pod {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 9px; border-radius: 11px;
  background: var(--surface-2); border: 2px solid var(--line-strong);
  font: 700 var(--fs-2xs)/1 var(--font); color: var(--ink);
}
.pod > i { font-style: normal; font-size: 15px; }
.pod::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px;
  width: calc(var(--fica, 1) * 100%); background: var(--mint);
}
.pod.eterno::after { display: none; }

.acoes { margin-top: 8px; gap: 8px; }
.acoes .btn { flex: 1; }
#lancar { margin-top: 2px; }

/* Pontos a voar por cima do campo */
.fx { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.fx .pop {
  position: absolute;
  transform: translate(-50%, -50%);
  font: 700 clamp(14px, 2.4vmin, 20px)/1 var(--display);
  color: var(--blue-edge);
  text-shadow: 0 2px 0 #fff, 0 0 10px #fff;
  white-space: nowrap;
  animation: sobe 1s ease-out forwards;
}
.fx .pop.grande { font-size: clamp(18px, 3.2vmin, 26px); color: var(--mint-edge); }
.fx .pop.mau { color: var(--pink-edge); }
@keyframes sobe {
  0% { opacity: 0; transform: translate(-50%, -20%) scale(0.7); }
  22% { opacity: 1; transform: translate(-50%, -60%) scale(1.08); }
  100% { opacity: 0; transform: translate(-50%, -190%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .fx .pop { animation: none; opacity: 0; }
}

/* ── Telemóvel de pé ──────────────────────────────────────────────────────────
   Lição da Torre de Rolos: o campo é bem mais alto do que largo. Numa coluna só, o painel por
   baixo roubava metade da altura e os azulejos ficavam do tamanho de ervilhas. Por isso aqui o
   painel fica ao lado, estreito: o campo aproveita a altura toda. */
@media (orientation: portrait) and (max-width: 900px) {
  .game-page .game-layout {
    grid-template-columns: minmax(0, 1fr) clamp(104px, 29vw, 158px);
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "stage side";
  }
  .game-page .side { max-height: none; }
  .side .stats { grid-template-columns: 1fr; gap: 4px; }
  .game-page .stat { padding: 4px 7px; }
  .obra { margin-top: 6px; font-size: var(--fs-2xs); }
  .poderes { min-height: 0; gap: 4px; }
  .poderes:empty::before { content: none; }
  .acoes { display: grid; grid-template-columns: 1fr; }
  #lancar { padding-inline: 8px; }
}

/* Telemóvel deitado: painel estreito e tudo mais rasteiro. */
@media (max-height: 560px) and (orientation: landscape) {
  .game-page .game-layout { grid-template-columns: minmax(0, 1fr) clamp(150px, 23vw, 230px); }
  .side .stats { grid-template-columns: 1fr 1fr; }
  .obra { margin-top: 6px; font-size: var(--fs-2xs); }
  .poderes { min-height: 0; margin: 6px 0 8px; }
  .poderes:empty::before { content: none; }
  .acoes { margin-top: 6px; }
}