/* Visual de jogo, não de painel administrativo: fontes de pixel e bordas
   recortadas no estilo das caixas de texto dos jogos de Pokémon.

   A borda "pixelada" é feita com quatro sombras sólidas em cruz — isso deixa
   os cantos recortados, que é o que dá a cara de 8 bits. */

:root {
  --bg: #14122b;
  --bg-2: #0d0b1d;
  --painel: #2a2450;
  --painel-2: #362e64;
  --linha: #6f63b8;
  --tinta: #12101f;
  --texto: #f4f1ff;
  --muted: #a99ede;
  --ouro: #ffcb3d;
  --verde: #5bd97a;
  --vermelho: #ff6b6b;
  --azul: #5b8dff;

  --fonte-titulo: 'Press Start 2P', 'Courier New', monospace;
  --fonte: 'Pixelify Sans', 'Trebuchet MS', system-ui, sans-serif;

  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg-2);
  background-image: radial-gradient(1200px 700px at 50% -15%, #2c2560, var(--bg-2));
  color: var(--texto);
  font: 17px/1.5 var(--fonte);
  display: flex;
  justify-content: center;
  padding: 16px;
  min-height: 100vh;
}

.frame {
  width: 100%;
  max-width: 540px;
}

.screen {
  display: none;
}
.screen.active {
  display: block;
}

/* --- borda de pixel reaproveitada --- */

/* Construção da caixa de texto dos jogos: borda escura por fora, linha clara
   por dentro. As quatro sombras em cruz deixam os cantos recortados. */
.pixel,
.game,
.card,
.chip,
.manual input,
button,
.verdict,
.campeao,
.cut-card {
  border: 0;
  border-radius: 0;
  box-shadow: 0 -4px 0 0 var(--tinta), 0 4px 0 0 var(--tinta), -4px 0 0 0 var(--tinta),
    4px 0 0 0 var(--tinta), inset 0 0 0 3px var(--linha);
}

/* --- tipografia --- */

.kicker {
  margin: 0 0 10px;
  font-family: var(--fonte-titulo);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--ouro);
  text-shadow: 2px 2px 0 var(--tinta);
}

h1 {
  margin: 0 0 10px;
  font-family: var(--fonte-titulo);
  font-size: 19px;
  line-height: 1.45;
  text-shadow: 3px 3px 0 var(--tinta);
}

h2 {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: 20px;
  line-height: 1.4;
  text-shadow: 3px 3px 0 var(--tinta);
}

h3 {
  margin: 24px 0 10px;
  font-family: var(--fonte-titulo);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.tagline {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
}

.head {
  padding: 8px 6px 20px;
}

.prompt {
  margin: 0 0 10px;
  font-weight: 700;
  font-size: 17px;
}

.foot {
  margin: 14px 0 6px;
  text-align: center;
  color: var(--muted);
  font-size: 15px;
}

.erro {
  margin: 14px 4px 0;
  padding: 12px 14px;
  background: #5a1f2b;
  color: #ffd9d9;
  font-size: 15px;
  box-shadow: 0 -4px 0 0 var(--tinta), 0 4px 0 0 var(--tinta), -4px 0 0 0 var(--tinta),
    4px 0 0 0 var(--tinta);
}

.voltar {
  all: unset;
  cursor: pointer;
  color: var(--muted);
  font-family: var(--fonte-titulo);
  font-size: 9px;
  padding: 8px 4px;
  display: inline-block;
}
.voltar:hover {
  color: var(--ouro);
}

/* --- lobby --- */

.games {
  display: grid;
  gap: 16px;
}

.game {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 15px;
  background: var(--painel);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.08s, background 0.08s;
}

.game:hover:not(:disabled) {
  transform: translateY(-3px);
  background: var(--painel-2);
}

.game:active:not(:disabled) {
  transform: translateY(1px);
}

.game.bloqueado {
  opacity: 0.4;
  cursor: default;
}

.game-icone {
  font-size: 30px;
  text-align: center;
}

.game-nome {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: 12px;
  line-height: 1.4;
  color: var(--c);
  text-shadow: 2px 2px 0 var(--tinta);
}

.game-resumo {
  display: block;
  font-size: 15px;
  color: var(--muted);
  margin-top: 6px;
}

.game-selo {
  font-family: var(--fonte-titulo);
  font-size: 8px;
  padding: 7px 8px;
  background: var(--tinta);
  color: var(--c);
  white-space: nowrap;
}

/* --- chips --- */

.chips {
  display: flex;
  gap: 14px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.chip {
  flex: 0 0 auto;
  min-width: 58px;
  padding: 11px 16px;
  background: var(--painel);
  color: var(--muted);
  font-family: var(--fonte-titulo);
  font-size: 10px;
  cursor: pointer;
}

.chip.on {
  background: var(--ouro);
  color: var(--tinta);
}

.manual {
  margin-bottom: 10px;
}

.manual input {
  width: calc(100% - 8px);
  margin: 0 4px 12px;
  padding: 12px 13px;
  background: var(--painel);
  color: var(--texto);
  font: 16px var(--fonte);
}

.manual input:focus {
  outline: none;
  background: var(--painel-2);
}

.manual input::placeholder {
  color: #7a6fb0;
}

/* --- carregando --- */

.carregando {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: 100px 0;
  text-align: center;
  color: var(--muted);
  font-family: var(--fonte-titulo);
  font-size: 10px;
  line-height: 1.8;
}

.pokebola {
  width: 52px;
  height: 52px;
  background: linear-gradient(to bottom, var(--vermelho) 0 44%, var(--tinta) 44% 56%, #fff 56% 100%);
  box-shadow: 0 -4px 0 0 var(--tinta), 0 4px 0 0 var(--tinta), -4px 0 0 0 var(--tinta),
    4px 0 0 0 var(--tinta);
  animation: girar 1s steps(8) infinite;
}

@keyframes girar {
  to {
    transform: rotate(360deg);
  }
}

/* --- cartões --- */

.roster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.card {
  display: block;
  width: 100%;
  text-align: left;
  padding: 13px;
  background: var(--painel);
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: transform 0.08s, background 0.08s;
}

.card:hover,
.card:focus-visible {
  transform: translateY(-3px);
  background: var(--painel-2);
  outline: none;
}

.card:active {
  transform: translateY(1px);
}

.card-topo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 11px;
}

.retrato,
.cut-retrato,
.campeao-img {
  image-rendering: pixelated;
  display: block;
}

.retrato {
  width: 46px;
  height: 46px;
  background: var(--tinta);
  flex: 0 0 auto;
  box-shadow: 0 -3px 0 0 var(--c), 0 3px 0 0 var(--c), -3px 0 0 0 var(--c), 3px 0 0 0 var(--c);
}

.card-name {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: 11px;
  line-height: 1.35;
  text-shadow: 2px 2px 0 var(--tinta);
}

.card-tag {
  display: block;
  color: var(--muted);
  font-size: 14px;
  margin-top: 4px;
}

.attrs {
  display: block;
}

.attr {
  display: grid;
  grid-template-columns: 76px 1fr 54px;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  font-size: 12px;
}

.attr i {
  font-style: normal;
  color: var(--muted);
}

.attr em {
  font-style: normal;
  text-align: right;
}

/* Barra em blocos, como medidor de HP */
.bar {
  display: block;
  height: 8px;
  background: var(--tinta);
  overflow: hidden;
}

.bar b {
  display: block;
  height: 100%;
  background: var(--c);
  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.25) 0 2px, transparent 2px 6px);
  background-size: 6px 100%;
}

.skill {
  display: block;
  margin-top: 11px;
  padding-top: 10px;
  border-top: 3px solid var(--tinta);
  font-size: 14px;
  color: var(--muted);
  line-height: 1.4;
}

.skill b {
  color: var(--c);
}

.dot {
  display: inline-block;
  width: 26px;
  height: 26px;
}

.dot.small {
  width: 11px;
  height: 11px;
  margin-right: 7px;
}

/* --- apresentação --- */

.cut-palco {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 62vh;
}

.cut-card {
  position: relative;
  text-align: center;
  padding: 30px 26px 24px;
  background: var(--painel);
  animation: entrar 0.2s steps(4);
  min-width: 268px;
}

@keyframes entrar {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
}

.cut-retrato {
  width: 168px;
  height: 168px;
  margin: 0 auto 18px;
  background: var(--tinta);
  box-shadow: 0 -5px 0 0 var(--c), 0 5px 0 0 var(--c), -5px 0 0 0 var(--c), 5px 0 0 0 var(--c);
}

.cut-tipo {
  margin: 10px 0 14px;
  color: var(--muted);
  font-size: 15px;
}

.cut-skill {
  margin: 0;
  font-size: 15px;
}

.cut-skill b {
  color: var(--c);
}

.cut-aposta {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ouro);
  color: var(--tinta);
  font-family: var(--fonte-titulo);
  font-size: 8px;
  padding: 6px 10px;
  white-space: nowrap;
  box-shadow: 0 -3px 0 0 var(--tinta), 0 3px 0 0 var(--tinta), -3px 0 0 0 var(--tinta),
    3px 0 0 0 var(--tinta);
}

.cut-contador {
  position: absolute;
  bottom: 8px;
  right: 14px;
  font-size: 13px;
  color: var(--muted);
}

/* --- simulação --- */

#stage {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  background: var(--bg-2);
  box-shadow: 0 -5px 0 0 var(--tinta), 0 5px 0 0 var(--tinta), -5px 0 0 0 var(--tinta),
    5px 0 0 0 var(--tinta);
}

.seed {
  margin: 14px 0 0;
  text-align: center;
  font-size: 13px;
  color: #6c5fa6;
}

/* --- resultado --- */

#screen-result {
  padding: 12px 4px;
}

.campeao {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 26px 18px 24px;
  background: var(--painel);
}

.raios {
  position: absolute;
  inset: -60% -10%;
  background: repeating-conic-gradient(
    from 0deg at 50% 38%,
    color-mix(in srgb, var(--c) 22%, transparent) 0deg 9deg,
    transparent 9deg 24deg
  );
  animation: raiar 18s steps(60) infinite;
  pointer-events: none;
}

@keyframes raiar {
  to {
    transform: rotate(360deg);
  }
}

.campeao > *:not(.raios) {
  position: relative;
}

.campeao-retrato {
  margin: 10px 0 14px;
}

.campeao-img {
  width: 136px;
  height: 136px;
  margin: 0 auto;
  background: var(--tinta);
  box-shadow: 0 -5px 0 0 var(--c), 0 5px 0 0 var(--c), -5px 0 0 0 var(--c), 5px 0 0 0 var(--c);
  animation: pulsar 1.6s steps(8) infinite;
}

@keyframes pulsar {
  50% {
    transform: translateY(-5px);
  }
}

.motivo {
  margin: 12px 0 0;
  font-size: 15px;
  color: var(--muted);
}

.verdict {
  margin: 20px 4px 0;
  padding: 15px;
  text-align: center;
  font-size: 16px;
  background: var(--painel);
}

.verdict.hit {
  background: #1d5637;
  color: #b7f5c9;
}

.verdict.miss {
  background: #5a1f2b;
  color: #ffd9d9;
}

.recap,
.stats {
  margin: 0;
  padding: 0;
  list-style: none;
}

.recap li,
.stats li {
  padding: 11px 12px;
  border-bottom: 3px solid var(--painel);
  font-size: 15px;
}

.recap li:last-child,
.stats li:last-child {
  border-bottom: 0;
}

.recap span {
  display: inline-block;
  min-width: 38px;
  color: var(--ouro);
  font-family: var(--fonte-titulo);
  font-size: 9px;
}

.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 26px;
  padding: 0 4px;
}

button {
  flex: 1 1 150px;
  padding: 15px 14px;
  background: var(--painel);
  color: var(--texto);
  font-family: var(--fonte-titulo);
  font-size: 10px;
  line-height: 1.5;
  cursor: pointer;
  transition: transform 0.08s, background 0.08s;
}

button:hover:not(:disabled) {
  background: var(--painel-2);
}

button:active:not(:disabled) {
  transform: translateY(2px);
}

button.primary {
  flex-basis: 100%;
  background: var(--ouro);
  color: var(--tinta);
}

button.primary:hover {
  background: #ffd96b;
}

.som {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 10;
  flex: 0 0 auto;
  padding: 10px 12px;
  background: var(--painel);
  color: var(--ouro);
  font-size: 9px;
  box-shadow: 0 -4px 0 0 var(--tinta), 0 4px 0 0 var(--tinta), -4px 0 0 0 var(--tinta),
    4px 0 0 0 var(--tinta), inset 0 0 0 3px var(--linha);
}

.som.off {
  color: #6c5fa6;
}

.ghost {
  display: block;
  margin: 22px auto 0;
  max-width: 260px;
  background: var(--painel);
  color: var(--muted);
}

@media (max-width: 430px) {
  .roster {
    grid-template-columns: 1fr;
  }
  h1 {
    font-size: 16px;
  }
}