/* Magusto — 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: -1px; }

/* A Comissão do Magusto comenta por cima do quintal: 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 do nível */
.obra {
  margin: 10px 0 0; text-align: center;
  font: 700 var(--fs-sm)/1.2 var(--display); color: var(--ink-2);
}

/* Quanto é que vai no cesto (e o aviso de cheio) */
.cesto-barra {
  position: relative; margin: 8px 0 6px; height: 22px;
  border-radius: 11px; overflow: hidden;
  background: var(--surface-2); border: 2px solid var(--line-strong);
}
.cesto-cheia {
  position: absolute; inset: 0 auto 0 0; width: 0;
  background: linear-gradient(90deg, var(--amber, #f0b429), var(--yellow, #ffd23f));
  transition: width .18s ease-out;
}
.cesto-cheia.mesmo-cheio { animation: cheio 1s ease-in-out infinite; }
@keyframes cheio { 50% { filter: brightness(1.3); } }
.cesto-txt {
  position: absolute; inset: 0; display: grid; place-items: center;
  font: 700 var(--fs-2xs)/1 var(--font); color: var(--ink);
}
.dica { margin: 0 0 6px; text-align: center; font: 600 var(--fs-2xs)/1.3 var(--font); color: var(--muted); }

/* Poderes ligados, com o tempo que falta a escorrer por baixo */
.poderes { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 8px; min-height: 34px; }
.poderes:empty::before {
  content: "Sem poderes. Eles caem do castanheiro.";
  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: 4px; gap: 8px; }
.acoes .btn { flex: 1; }

/* Legenda do ecrã de início: o que é cada coisa que cai */
.legenda { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin: 4px 0 2px; }
.legenda span { display: inline-flex; align-items: center; gap: 6px; font: 700 var(--fs-2xs)/1 var(--font); color: var(--ink-2); }
.legenda .ponto { width: 13px; height: 13px; border-radius: 50%; border: 2px solid rgba(0, 0, 0, .25); }
.legenda .ponto.castanha { background: #6b3a1c; }
.legenda .ponto.ouro { background: #e8a21a; }
.legenda .ponto.ourico { background: #7a9a3c; }
.legenda .ponto.lume { background: #ff7a18; }

/* Pontos a voar por cima do quintal */
.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: #7a3a10;
  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); }
.fx .pop.dourada { color: #b07800; }
.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; }
  .cesto-cheia.mesmo-cheio { animation: none; }
}

/* ── Telemóvel de pé ──────────────────────────────────────────────────────────
   Como no Parte-Azulejos: o quintal é bem mais alto do que largo. Numa coluna só, o painel por
   baixo roubava metade da altura e as castanhas 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); }
  .dica { display: none; }
  .poderes { min-height: 0; gap: 4px; margin: 6px 0; }
  .poderes:empty::before { content: none; }
  .acoes { display: grid; grid-template-columns: 1fr; }
}

/* 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); }
  .dica { display: none; }
  .poderes { min-height: 0; margin: 6px 0; }
  .poderes:empty::before { content: none; }
  .acoes { margin-top: 6px; }
}