.hz-jogo {
  padding-block: clamp(3.5rem, 8vw, 6rem);
  background: linear-gradient(var(--nevoa), var(--ceu) 22%);
}

.hz-arena {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  max-height: calc(100svh - 96px);
  margin-inline: auto;
  border-radius: 1.4rem;
  overflow: hidden;
  background: #0b1330;
  box-shadow: 0 0 0 2px rgba(242, 193, 78, 0.45), 0 1.6rem 3rem -1.2rem rgba(0, 0, 0, 0.7);
  outline: none;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

/* Abaixo de 600 px o céu fica ao alto: mais caminho entre a borda e o templo dá tempo para reagir. */
@media (max-width: 37.5rem) {
  .hz-arena {
    aspect-ratio: 3 / 4;
    border-radius: 1rem;
  }
}

.hz-arena:focus-visible {
  box-shadow: 0 0 0 3px var(--ouro);
}

.hz-arena__ceu {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
}

.hz-arena__sem-js {
  position: absolute;
  inset: auto 1rem 1rem;
  margin: 0;
  padding: 1rem;
  border-radius: 0.8rem;
  background: rgba(10, 17, 38, 0.9);
}

.hz-arena--on .hz-arena__sem-js {
  display: none;
}

.hz-hud {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  right: 0.75rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  pointer-events: none;
}

.hz-hud[hidden] {
  display: none;
}

.hz-hud__dados {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
}

.hz-hud__dados div {
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: rgba(10, 17, 38, 0.78);
  box-shadow: inset 0 0 0 1px rgba(242, 193, 78, 0.35);
}

.hz-hud__dados dt {
  display: inline;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-right: 0.35rem;
}

.hz-hud__dados dd {
  display: inline;
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.hz-hud__botoes {
  display: flex;
  gap: 0.4rem;
  pointer-events: auto;
}

.hz-arena--viva .hz-hud__serie dt {
  color: #12072e;
}

.hz-avisos {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hz-aviso {
  position: absolute;
  margin: 0;
  transform: translate(-50%, 0);
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: clamp(0.78rem, 1.8vw, 0.95rem);
  white-space: nowrap;
  animation: hz-subir-aviso 1.1s ease-out forwards;
}

.hz-aviso--acerto {
  background: rgba(10, 17, 38, 0.85);
  color: var(--ouro-claro);
}

.hz-aviso--falha {
  background: rgba(10, 17, 38, 0.85);
  color: var(--tinta-suave);
}

@keyframes hz-subir-aviso {
  0% { opacity: 0; transform: translate(-50%, 0.5rem); }
  15% { opacity: 1; transform: translate(-50%, 0); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -1.6rem); }
}

.hz-faixa {
  position: absolute;
  left: 50%;
  top: 22%;
  transform: translateX(-50%);
  margin: 0;
  padding: 0.5rem 1.4rem;
  border-radius: 999px;
  background: rgba(10, 17, 38, 0.85);
  box-shadow: inset 0 0 0 2px var(--ouro);
  font-family: var(--letra-titulo);
  font-weight: 700;
  font-size: clamp(1rem, 2.6vw, 1.4rem);
  white-space: nowrap;
  pointer-events: none;
}

.hz-camada {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(8, 12, 30, 0.55);
  overflow-y: auto;
}

.hz-camada[hidden] {
  display: none;
}

.hz-camada__caixa {
  width: min(30rem, 100%);
  padding: clamp(1.1rem, 3vw, 1.8rem);
  border-radius: 1.2rem;
  background: rgba(10, 17, 38, 0.94);
  box-shadow: 0 0 0 2px rgba(242, 193, 78, 0.5);
  text-align: center;
}

.hz-camada__caixa--curta {
  width: auto;
  background: transparent;
  box-shadow: none;
}

.hz-camada h3 {
  margin-bottom: 1rem;
}

.hz-modos-lista {
  display: grid;
  gap: 0.6rem;
}

.hz-modo-botao {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  min-height: 3.5rem;
  padding: 0.65rem 1rem;
  border: 2px solid var(--ouro);
  border-radius: 999px;
  background: transparent;
  color: var(--tinta);
  font: inherit;
  cursor: pointer;
  transition: background-color 0.18s ease, transform 0.18s ease;
}

.hz-modo-botao:hover {
  background: rgba(242, 193, 78, 0.14);
  transform: translateY(-2px);
}

.hz-modo-botao__nome {
  font-family: var(--letra-titulo);
  font-weight: 700;
  font-size: 1.1rem;
}

.hz-modo-botao__info {
  font-size: 0.85rem;
  color: var(--tinta-suave);
}

.hz-contagem {
  font-family: var(--letra-titulo);
  font-size: clamp(2.2rem, 7vw, 4rem);
  font-weight: 800;
  color: var(--ouro);
  margin: 0;
  text-shadow: 0 0 1.5rem rgba(242, 193, 78, 0.6);
}

.hz-camada__botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin-top: 1rem;
}

.hz-selo {
  display: inline-block;
  padding: 0.25rem 1rem;
  border-radius: 999px;
  background: var(--ouro);
  color: var(--ceu);
  font-weight: 800;
}

.hz-resultado {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0.5rem 0 0.8rem;
}

.hz-resultado div {
  padding: 0.4rem;
  border-radius: 0.8rem;
  background: rgba(26, 38, 80, 0.7);
}

.hz-resultado__grande {
  grid-column: 1 / -1;
}

.hz-resultado dt {
  font-size: 0.78rem;
  color: var(--tinta-suave);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.hz-resultado dd {
  margin: 0;
  font-weight: 800;
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
}

.hz-resultado__grande dd {
  font-family: var(--letra-titulo);
  font-size: 2rem;
  color: var(--ouro);
}

.hz-resultado__lista {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9rem;
  color: var(--tinta-suave);
}

.hz-diario {
  margin-top: 2rem;
}

.hz-tabela--diario {
  min-width: 22rem;
}

@media (max-width: 37.5rem) {
  .hz-hud {
    top: 0.5rem;
    left: 0.5rem;
    right: 0.5rem;
  }

    .hz-hud__dados div {
    padding: 0.3rem 0.6rem;
  }

  .hz-botao--mini {
    padding: 0.4rem 0.8rem;
  }

  .hz-hud__dados dt {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .hz-resultado {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Energia: a moldura aquece com a série através de --calor (0 a 1). */
.hz-arena {
  --calor: 0;
  box-shadow:
    0 0 0 2px rgba(242, 193, 78, calc(0.45 + var(--calor) * 0.5)),
    0 0 calc(1rem + var(--calor) * 3rem) rgba(255, 79, 216, calc(0.15 + var(--calor) * 0.45)),
    0 1.6rem 3rem -1.2rem rgba(0, 0, 0, 0.7);
  transition: box-shadow 0.3s ease;
}

.hz-hud {
  top: 1rem;
}

.hz-hud__dados div,
.hz-botao--mini {
  backdrop-filter: blur(4px);
}

.hz-arena--viva .hz-hud__serie {
  background: linear-gradient(90deg, #ff4fd8, #f2c14e);
  color: #12072e;
  animation: hz-pulsar 0.6s ease-in-out infinite alternate;
}

@keyframes hz-pulsar {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}

.hz-aviso {
  font-size: clamp(0.85rem, 2vw, 1.05rem);
  letter-spacing: 0.01em;
}

.hz-aviso--dupla {
  background: linear-gradient(90deg, #ffd23f, #ff4fd8);
  color: #12072e;
  box-shadow: 0 0 1.2rem rgba(255, 79, 216, 0.6);
  animation-name: hz-aviso-estalo;
}

.hz-aviso--acerto {
  color: #fff4c2;
  box-shadow: inset 0 0 0 1px rgba(51, 225, 255, 0.6);
}

@keyframes hz-aviso-estalo {
  0% { opacity: 0; transform: translate(-50%, 0.4rem) scale(0.6) rotate(-4deg); }
  18% { opacity: 1; transform: translate(-50%, 0) scale(1.15) rotate(2deg); }
  30% { transform: translate(-50%, 0) scale(1) rotate(0); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -1.8rem) scale(1); }
}

.hz-faixa--serie {
  background: linear-gradient(90deg, #7a2dff, #ff4fd8);
  box-shadow: 0 0 1.6rem rgba(255, 79, 216, 0.7);
  animation: hz-faixa-entra 0.35s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}

.hz-faixa--monte {
  background: linear-gradient(90deg, #0d4a6b, #33e1ff);
  color: #04121c;
}

@keyframes hz-faixa-entra {
  from { transform: translateX(-50%) scale(0.5); opacity: 0; }
  to { transform: translateX(-50%) scale(1); opacity: 1; }
}

.hz-contagem {
  background: linear-gradient(90deg, #33e1ff, #ffd23f, #ff4fd8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: hz-bater 0.5s ease-in-out infinite alternate;
}

@keyframes hz-bater {
  from { transform: scale(1); }
  to { transform: scale(1.1); }
}

.hz-camada__caixa {
  background: linear-gradient(160deg, rgba(34, 12, 90, 0.96), rgba(10, 17, 38, 0.96));
  box-shadow: 0 0 0 2px rgba(242, 193, 78, 0.55), 0 0 2.5rem rgba(200, 107, 255, 0.35);
}

@media (max-width: 37.5rem) {
  .hz-hud {
    flex-wrap: wrap;
    gap: 0.35rem;
  }

  .hz-hud__botoes {
    order: 1;
    width: 100%;
    justify-content: flex-end;
  }

  .hz-hud__dados {
    order: 2;
    flex-wrap: nowrap;
  }

  .hz-hud {
    top: 0.85rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hz-arena--viva .hz-hud__serie,
  .hz-contagem,
  .hz-faixa--serie,
  .hz-aviso--dupla,
  .hz-arena--aperto {
    animation: none;
  }
}

.hz-hud__dados dd.hz-escudos {
  display: inline-flex;
  gap: 0.2rem;
  vertical-align: middle;
}

.hz-escudo {
  display: inline-block;
  width: 0.8rem;
  height: 0.95rem;
  background: #33e1ff;
  clip-path: polygon(50% 0, 100% 18%, 92% 62%, 50% 100%, 8% 62%, 0 18%);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.hz-escudo--gasto {
  opacity: 0.2;
  transform: scale(0.8);
}

.hz-arena--aperto {
  animation: hz-alerta 0.9s ease-in-out infinite alternate;
}

@keyframes hz-alerta {
  from { box-shadow: 0 0 0 2px rgba(255, 79, 122, 0.6), 0 0 1rem rgba(255, 79, 122, 0.3); }
  to { box-shadow: 0 0 0 3px rgba(255, 79, 122, 0.9), 0 0 2.2rem rgba(255, 79, 122, 0.55); }
}

.hz-faixa--perigo {
  background: linear-gradient(90deg, #ff4f7a, #ff9e5e);
  color: #1a0710;
}

.hz-faixa--chefe {
  background: linear-gradient(90deg, #7a2dff, #33e1ff);
  box-shadow: 0 0 1.6rem rgba(51, 225, 255, 0.6);
  animation: hz-faixa-entra 0.35s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}

.hz-faixa--escudo {
  background: linear-gradient(90deg, #33e1ff, #7fffd4);
  color: #04121c;
}

.hz-faixa {
  max-width: calc(100% - 1.5rem);
  white-space: normal;
  text-align: center;
}

.hz-camada__texto {
  color: var(--tinta-suave);
  margin-bottom: 1.1rem;
}

.hz-botao--grande {
  min-height: 3.5rem;
  padding-inline: 2.4rem;
  font-size: 1.15rem;
}

.hz-marcas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 1.2rem 0 0;
}

.hz-marcas div,
.hz-totais dl div {
  padding: 0.45rem;
  border-radius: 0.8rem;
  background: rgba(26, 38, 80, 0.7);
}

.hz-marcas dt,
.hz-totais dt {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.hz-marcas dd,
.hz-totais dd {
  margin: 0;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.hz-patente {
  margin: 0 0 0.6rem;
}

.hz-patente span {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.hz-patente strong {
  font-family: var(--letra-titulo);
  font-size: 1.35rem;
  background: linear-gradient(90deg, #ffd23f, #ff9ee8, #9ff3ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hz-resultado {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hz-totais {
  margin-top: 1.6rem;
}

.hz-totais__titulo {
  font-weight: 700;
  color: var(--tinta-suave);
  margin-bottom: 0.5rem;
}

.hz-totais dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem;
  margin: 0;
}

@media (max-width: 37.5rem) {
  .hz-totais dl,
  .hz-resultado {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hz-marcas {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Fase superada: o número grande no centro do céu. */
.hz-fase {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translate(-50%, -50%);
  pointer-events: none;
  text-align: center;
}

.hz-fase[hidden] {
  display: none;
}

.hz-fase__pontos {
  font-family: var(--letra-titulo);
  font-weight: 800;
  font-size: clamp(2.2rem, 9vw, 5rem);
  white-space: nowrap;
  line-height: 1;
  background: linear-gradient(180deg, #ffffff, #ffd23f 45%, #ff4fd8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 1.2rem rgba(255, 210, 63, 0.75)) drop-shadow(0 0 2.4rem rgba(255, 79, 216, 0.5));
}

.hz-fase__texto {
  margin-top: 0.3rem;
  padding: 0.3rem 1rem;
  border-radius: 999px;
  background: rgba(18, 7, 46, 0.8);
  box-shadow: inset 0 0 0 2px #33e1ff;
  font-weight: 800;
  font-size: clamp(0.85rem, 2.4vw, 1.05rem);
  white-space: nowrap;
}

.hz-fase--anima {
  animation: hz-fase-estoura 1.6s cubic-bezier(0.2, 1.4, 0.3, 1) both;
}

@keyframes hz-fase-estoura {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3) rotate(-8deg); }
  14% { opacity: 1; transform: translate(-50%, -50%) scale(1.18) rotate(3deg); }
  26% { transform: translate(-50%, -50%) scale(1) rotate(0); }
  78% { opacity: 1; transform: translate(-50%, -55%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -75%) scale(0.9); }
}

.hz-resultado__fases {
  grid-column: 1 / -1;
}

.hz-resultado__fases dd {
  color: #ffd23f;
}

.hz-linha-fase th,
.hz-linha-fase td {
  color: #ffd23f;
}

@media (prefers-reduced-motion: reduce) {
  .hz-fase--anima {
    animation: none;
  }
}