/* Página do jogo no navegador: tela cheia para o canvas do Godot e uma tela de carga no tema do jogo. */
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; background: #0d1815; color: #e8e2cf; }
body { font-family: Georgia, "Times New Roman", serif; touch-action: none; }
#canvas { display: block; position: fixed; inset: 0; width: 100%; height: 100%; outline: none; }
#canvas:focus { outline: none; }
.sem-js { position: fixed; inset: auto 0 45% 0; text-align: center; }
#status {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 35%, #1d3a31 0%, #0d1815 70%);
  z-index: 2;
}
.cartao {
  width: min(560px, calc(100% - 32px)); padding: 28px 28px 22px; text-align: center;
  background: rgba(19, 36, 31, 0.92); border: 1px solid #2e4a3f; border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
}
.titulo { margin: 0 0 4px; font-size: 1.6rem; letter-spacing: 0.04em; color: #e3c478; font-variant: small-caps; }
.subtitulo { margin: 0 0 20px; color: #b8b39f; }
.barra { height: 12px; border-radius: 999px; background: #0a120f; border: 1px solid #2e4a3f; overflow: hidden; }
#status-barra { height: 100%; width: 0%; background: linear-gradient(90deg, #8a6d2c, #e3c478); transition: width 0.2s ease; }
#status-texto { margin: 12px 0 0; font-size: 0.95rem; color: #e8e2cf; }
#status-erro { margin: 14px 0 0; padding: 12px; border-radius: 8px; background: #3a1614; color: #f3d2cc; text-align: left; white-space: pre-line; }
.dica { margin: 16px 0 0; font-size: 0.85rem; color: #9fb89a; }
.voltar { margin: 14px 0 0; font-size: 0.85rem; }
.voltar a { color: #e3c478; }