:root {
  --tinta: #f4ebe0;
  --fraco: #a99cae;
  --fundo: #0d0916;
  --borda: #43364f;
  --ouro: #ffd166;
  --moraes: #c8412c;
  --mendonca: #3f7fd4;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #07050c;
  color: var(--tinta);
  font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;
  overflow: hidden;
  -webkit-font-smoothing: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 30%, #171029 0%, #07050c 70%);
}

#palco {
  --s: 2;
  position: relative;
  font-size: calc(var(--s) * 6px);
  line-height: 1.5;
  box-shadow: 0 0 0 calc(var(--s) * 1px) #2a1f36, 0 calc(var(--s) * 6px) calc(var(--s) * 20px) rgba(0, 0, 0, 0.7);
}

#game {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.2em;
  overflow: auto;
}
.overlay.visivel { display: flex; }
#ovVazio { pointer-events: none; }

.painel {
  width: min(100%, 46em);
  text-align: center;
  background: rgba(11, 7, 18, 0.9);
  border: calc(var(--s) * 1px) solid var(--borda);
  padding: 1.1em 1.4em;
  display: flex;
  flex-direction: column;
  gap: 0.7em;
  align-items: center;
}
.painel.largo { width: min(100%, 74em); }

h1, h2 { margin: 0; letter-spacing: 0.12em; }

.logo {
  width: min(100%, calc(var(--s) * 118px));
  max-width: 596px;
  height: auto;
  image-rendering: auto;
  filter: drop-shadow(0 calc(var(--s) * 3px) 0 rgba(0, 0, 0, 0.55));
}

.faixa {
  width: min(100%, calc(var(--s) * 132px));
  max-width: 412px;
  height: auto;
  image-rendering: auto;
}

.oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

h2 { font-size: 1.5em; color: var(--ouro); }
#fimTitulo.venceu { color: #7ee08a; }
#fimTitulo.perdeu { color: #ff6b5c; }

.sub { margin: 0; color: var(--fraco); font-size: 0.95em; letter-spacing: 0.06em; }
.placar { margin: 0; font-size: 1.6em; letter-spacing: 0.1em; }
.rodape { margin: 0.2em 0 0; font-size: 0.75em; color: #6b6072; letter-spacing: 0.08em; }
.dica { margin: 0; font-size: 0.85em; color: var(--fraco); }

.linha {
  display: flex;
  gap: 0.6em;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.rotulo { color: var(--fraco); font-size: 0.85em; letter-spacing: 0.16em; }

.botao, .chip {
  font: inherit;
  color: var(--tinta);
  background: #1c1428;
  border: calc(var(--s) * 1px) solid var(--borda);
  padding: 0.55em 1.2em;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition: transform 0.06s, background 0.12s, border-color 0.12s;
}
.botao:hover, .chip:hover { background: #2a1f3a; border-color: var(--ouro); }
.botao:active, .chip:active { transform: translateY(calc(var(--s) * 1px)); }
.botao:focus-visible, .chip:focus-visible { outline: calc(var(--s) * 2px) solid var(--ouro); outline-offset: calc(var(--s) * 2px); }

.botao {
  background: linear-gradient(#3a2036, #23142a);
  border-color: var(--ouro);
  color: var(--ouro);
  font-size: 1.15em;
}
.botao.grande { font-size: 1.5em; padding: 0.45em 2em; }
.botao:hover { background: linear-gradient(#4d2a46, #2d1936); color: #fff3d6; }

.chip { font-size: 0.85em; padding: 0.45em 0.9em; }
.chip.ativo { background: var(--ouro); color: #241a10; border-color: var(--ouro); }

.ajuda {
  border-top: calc(var(--s) * 1px) solid var(--borda);
  padding-top: 0.8em;
  font-size: 0.85em;
  color: var(--tinta);
  text-align: left;
  width: 100%;
}
.ajuda p { margin: 0.25em 0; }
.ajuda b { color: var(--ouro); }
.ajuda .fraco { color: var(--fraco); margin-top: 0.6em; }

.cards {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0.9em;
  width: 100%;
}
.versus {
  align-self: center;
  width: calc(var(--s) * 34px);
  max-width: 140px;
  height: auto;
  image-rendering: auto;
  flex: 0 0 auto;
}

.card {
  flex: 1 1 0;
  min-width: 0;
  background: #150e20;
  border: calc(var(--s) * 2px) solid var(--borda);
  padding: 0.8em 0.7em;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35em;
  transition: border-color 0.12s, background 0.12s, transform 0.08s;
}
.card:hover { background: #1d1430; }
.card[data-id="moraes"].escolhida { border-color: var(--moraes); background: #251320; }
.card[data-id="mendonca"].escolhida { border-color: var(--mendonca); background: #131c2e; }
.card.escolhida { transform: translateY(calc(var(--s) * -2px)); }

.retrato {
  image-rendering: auto;
  max-width: 173px;
  width: calc(var(--s) * 46px);
  height: auto;
  display: block;
}
.placa {
  image-rendering: auto;
  max-width: 245px;
  width: calc(var(--s) * 58px);
  height: auto;
  display: block;
}
.apelido { font-size: 0.8em; color: var(--ouro); letter-spacing: 0.16em; }
.tagline { font-size: 0.72em; color: var(--fraco); }

.stats { width: 100%; display: flex; flex-direction: column; gap: 0.2em; margin: 0.3em 0; }
.stat { display: flex; align-items: center; gap: 0.5em; font-size: 0.72em; color: var(--fraco); }
.trilho { display: flex; gap: calc(var(--s) * 1px); flex: 1; }
.trilho i {
  flex: 1;
  height: calc(var(--s) * 5px);
  background: #2f2637;
  display: block;
}
.card[data-id="moraes"] .trilho i.cheio { background: var(--moraes); }
.card[data-id="mendonca"] .trilho i.cheio { background: var(--mendonca); }

#toque {
  position: fixed;
  inset: auto 0 0 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 max(0.6rem, env(safe-area-inset-left)) max(0.6rem, env(safe-area-inset-bottom));
  pointer-events: none;
  z-index: 10;
}
#toque[hidden] { display: none; }
#toque button {
  pointer-events: auto;
  font: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: #f4ebe0;
  background: rgba(28, 20, 40, 0.62);
  border: 2px solid rgba(255, 209, 102, 0.45);
  border-radius: 50%;
  touch-action: none;
}
#toque button.apertado {
  background: rgba(255, 209, 102, 0.7);
  color: #241a10;
}

.dpad {
  display: grid;
  grid-template-columns: repeat(3, 3.1rem);
  grid-template-rows: repeat(3, 3.1rem);
  gap: 0.2rem;
}
.dpad button:nth-child(1) { grid-area: 1 / 2; }
.dpad button:nth-child(2) { grid-area: 2 / 1; }
.dpad button:nth-child(3) { grid-area: 2 / 3; }
.dpad button:nth-child(4) { grid-area: 3 / 2; }

.acoes {
  display: grid;
  grid-template-columns: repeat(2, 3.5rem);
  grid-template-rows: repeat(2, 3.5rem);
  gap: 0.35rem;
}
.b-soco { border-color: rgba(255, 130, 110, 0.6) !important; }
.b-chute { border-color: rgba(120, 200, 255, 0.6) !important; }
.b-def { border-color: rgba(200, 200, 220, 0.5) !important; }
.b-esp { border-color: rgba(126, 224, 138, 0.6) !important; }

.b-pausa {
  position: fixed;
  top: max(0.5rem, env(safe-area-inset-top));
  right: max(0.5rem, env(safe-area-inset-right));
  width: 2.2rem;
  height: 2.2rem;
  pointer-events: auto;
}

body.toque #palco { box-shadow: none; }

@media (max-height: 430px) {
  .painel { padding: 0.8em 1em; gap: 0.5em; }
  .logo { width: min(100%, calc(var(--s) * 96px)); }
  .retrato { width: calc(var(--s) * 38px); }
  .placa { width: calc(var(--s) * 48px); }
  .tagline { display: none; }
}