/* DBA Games — portal. Visual de menu de futebol da era PS2: painéis em diagonal,
   azul de transmissão noturna, tipografia condensada de placar. */
:root {
  --noite: #070d1c;
  --noite-2: #0d1730;
  --painel: #12204a;
  --painel-2: #1a2d63;
  --linha: #2a4386;
  --texto: #eef3ff;
  --suave: #9fb0d8;
  --destaque: #ffd23f;      /* amarelo de seleção de menu */
  --gramado: #2fbf5a;
  --perigo: #ff5a5f;
  --fonte-placar: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --fonte-texto: "Barlow", "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(1200px 600px at 75% -10%, rgba(64, 120, 255, 0.28), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 80px, transparent 80px 160px),
    var(--noite);
  background-attachment: fixed;
  color: var(--texto);
  font: 16px/1.5 var(--fonte-texto);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
a { color: var(--destaque); }
button, input { font: inherit; }
:focus-visible { outline: 3px solid var(--destaque); outline-offset: 2px; }

.marca {
  display: inline-flex; align-items: center; gap: 10px;
  font: 800 22px/1 var(--fonte-placar); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--texto); text-decoration: none;
}
.marca .selo {
  width: 34px; height: 34px; display: grid; place-items: center;
  background: var(--destaque); color: var(--noite);
  clip-path: polygon(18% 0, 100% 0, 82% 100%, 0 100%);
  font-size: 18px;
}

/* ---------- login ---------- */
.entrar {
  min-height: 100%;
  display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: 48px;
  max-width: 1120px; margin: 0 auto; padding-block: 40px;
}
.entrar .apresentacao h1 {
  font: 800 clamp(48px, 8vw, 96px)/0.9 var(--fonte-placar);
  text-transform: uppercase; letter-spacing: 0.01em; margin: 28px 0 18px;
  text-wrap: balance;
}
.entrar .apresentacao h1 span { color: var(--destaque); display: block; }
.entrar .apresentacao p { color: var(--suave); max-width: 46ch; margin: 0; }
.faixa {
  margin-top: 28px; display: flex; gap: 6px; flex-wrap: wrap;
}
.faixa span {
  font: 700 13px/1 var(--fonte-placar); letter-spacing: 0.12em; text-transform: uppercase;
  padding: 8px 14px; background: var(--painel); border-left: 3px solid var(--destaque);
  transform: skewX(-12deg);
}
.faixa span > i { display: inline-block; transform: skewX(12deg); font-style: normal; }

.cartao-login {
  background: linear-gradient(160deg, var(--painel-2), var(--painel));
  border: 1px solid var(--linha);
  padding: 34px 32px 28px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%);
  box-shadow: 0 30px 60px rgba(0,0,0,0.45);
}
.cartao-login h2 {
  margin: 0 0 22px; font: 800 30px/1 var(--fonte-placar); letter-spacing: 0.08em; text-transform: uppercase;
  display: flex; align-items: center; gap: 12px;
}
.cartao-login h2::before { content: ""; width: 10px; height: 26px; background: var(--destaque); transform: skewX(-14deg); }
.campo { display: grid; gap: 6px; margin-bottom: 16px; }
.campo label { font: 700 13px/1 var(--fonte-placar); letter-spacing: 0.14em; text-transform: uppercase; color: var(--suave); }
.campo input {
  width: 100%; padding: 13px 14px; border: 1px solid var(--linha); background: var(--noite-2);
  color: var(--texto); border-radius: 0;
}
.campo input:focus { border-color: var(--destaque); outline: none; box-shadow: 0 0 0 3px rgba(255,210,63,0.25); }
.botao-principal {
  width: 100%; margin-top: 8px; padding: 15px 18px; border: 0; cursor: pointer;
  background: var(--destaque); color: var(--noite);
  font: 800 22px/1 var(--fonte-placar); letter-spacing: 0.1em; text-transform: uppercase;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  transition: transform 0.12s ease, filter 0.12s ease;
}
.botao-principal:hover { filter: brightness(1.08); transform: translateY(-1px); }
.aviso-seguro { margin: 18px 0 0; color: var(--suave); font-size: 13px; display: flex; gap: 8px; align-items: flex-start; }
.aviso-seguro b { color: var(--gramado); font-weight: 600; }
.erro {
  background: rgba(255, 90, 95, 0.12); border-left: 3px solid var(--perigo);
  padding: 10px 12px; margin: 0 0 16px; font-size: 14px;
}

/* ---------- menu do topo ---------- */
.menu-topo { display: flex; align-items: center; gap: 10px; margin-right: auto; margin-left: 28px; }
.menu-topo a {
  color: var(--suave); text-decoration: none;
  font: 700 16px/1 var(--fonte-placar); letter-spacing: 0.12em; text-transform: uppercase;
  padding: 8px 2px; border-bottom: 2px solid transparent;
}
.menu-topo a:hover { color: var(--texto); }
.menu-topo a[aria-current="page"] { color: var(--texto); border-bottom-color: var(--destaque); }
.menu-topo span { color: var(--linha); }

/* ---------- início ---------- */
.topo {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  max-width: 1180px; margin: 0 auto; padding-block: 18px;
  border-bottom: 1px solid var(--linha);
}
.topo .usuario { display: flex; align-items: center; gap: 14px; color: var(--suave); font-size: 14px; }
.topo .usuario strong { color: var(--texto); font-weight: 600; }
.botao-sair {
  background: transparent; color: var(--texto); border: 1px solid var(--linha); padding: 8px 14px; cursor: pointer;
  font: 700 14px/1 var(--fonte-placar); letter-spacing: 0.1em; text-transform: uppercase;
}
.botao-sair:hover { border-color: var(--destaque); color: var(--destaque); }

.inicio { max-width: 1180px; margin: 0 auto; padding-block: 28px 56px; display: grid; gap: 28px; }

.destaque-jogo {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1.25fr 0.75fr; min-height: 340px;
  background: linear-gradient(115deg, #0f2a7a 0%, #10307e 45%, #0a1838 45.2%, #0b1a3c 100%);
  border: 1px solid var(--linha);
}
.destaque-jogo .gramado {
  position: absolute; inset: auto 0 0 0; height: 46%;
  background:
    repeating-linear-gradient(90deg, #2c8a3c 0 70px, #2f9442 70px 140px);
  clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 100%);
  opacity: 0.9;
}
.destaque-jogo .info { position: relative; padding: 34px 34px 30px; display: flex; flex-direction: column; gap: 14px; }
.etiqueta {
  align-self: flex-start;
  font: 700 12px/1 var(--fonte-placar); letter-spacing: 0.16em; text-transform: uppercase;
  background: var(--destaque); color: var(--noite); padding: 6px 10px;
}
.destaque-jogo h1 {
  margin: 0; font: 800 clamp(54px, 9vw, 104px)/0.86 var(--fonte-placar); text-transform: uppercase;
  text-shadow: 0 6px 0 rgba(0,0,0,0.35);
}
.destaque-jogo .sub { color: #cfe0ff; margin: 0; max-width: 44ch; text-shadow: 0 1px 6px rgba(0,0,0,0.6); }
.acoes { display: flex; gap: 12px; flex-wrap: wrap; margin-top: auto; }
.botao-jogar {
  display: inline-flex; align-items: center; gap: 12px; text-decoration: none;
  background: var(--destaque); color: var(--noite);
  padding: 16px 34px 16px 28px;
  font: 800 28px/1 var(--fonte-placar); letter-spacing: 0.12em; text-transform: uppercase;
  clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
.botao-jogar::before { content: "▶"; font-size: 18px; }
.botao-jogar:hover { filter: brightness(1.08); }
.botao-secundario {
  display: inline-flex; align-items: center; text-decoration: none; color: var(--texto);
  border: 1px solid #5675c9; padding: 14px 20px;
  font: 700 18px/1 var(--fonte-placar); letter-spacing: 0.1em; text-transform: uppercase;
}

.ficha { position: relative; padding: 30px 30px 26px; display: grid; align-content: start; gap: 10px; }
.ficha .linha-ficha {
  display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: baseline;
  padding: 10px 14px; background: rgba(7, 13, 28, 0.72); border-left: 3px solid var(--linha);
}
.ficha .linha-ficha span { color: var(--suave); font: 700 13px/1.2 var(--fonte-placar); letter-spacing: 0.12em; text-transform: uppercase; }
.ficha .linha-ficha b { font: 700 20px/1 var(--fonte-placar); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.ficha .ok { color: var(--gramado); }

.grade { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.bloco h2 {
  margin: 0 0 14px; font: 800 24px/1 var(--fonte-placar); letter-spacing: 0.1em; text-transform: uppercase;
  display: flex; align-items: center; gap: 10px;
}
.bloco h2::before { content: ""; width: 8px; height: 20px; background: var(--destaque); transform: skewX(-14deg); }

.controles { display: grid; grid-template-columns: auto 1fr auto; gap: 0; border: 1px solid var(--linha); }
.controles div { padding: 9px 12px; border-bottom: 1px solid rgba(42, 67, 134, 0.5); }
.controles .k { font: 700 15px/1.2 var(--fonte-placar); letter-spacing: 0.06em; color: var(--destaque); }
.controles .t { font-size: 14px; color: var(--suave); text-align: right; font-family: var(--fonte-placar); letter-spacing: 0.06em; }
.controles .a { font-size: 15px; }

.atualizacoes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.atualizacoes li {
  display: grid; grid-template-columns: 74px 1fr; gap: 14px; padding: 12px 14px;
  background: var(--painel); border-left: 3px solid var(--gramado);
}
.atualizacoes time { font: 700 14px/1.4 var(--fonte-placar); color: var(--suave); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.atualizacoes p { margin: 0; font-size: 14px; }

.status-controle { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--suave); }
.status-controle::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #5a6a90; }
.status-controle.ligado { color: var(--texto); }
.status-controle.ligado::before { background: var(--gramado); box-shadow: 0 0 10px var(--gramado); }

/* ---------- biblioteca ---------- */
.biblioteca { max-width: 1180px; margin: 0 auto; padding-block: 30px 64px; display: grid; gap: 34px; }
.cabecalho-biblioteca { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.cabecalho-biblioteca h1 { margin: 0; font: 800 clamp(40px, 6vw, 64px)/0.95 var(--fonte-placar); text-transform: uppercase; letter-spacing: 0.02em; }
.cabecalho-biblioteca p { margin: 0; color: var(--suave); font: 700 16px/1 var(--fonte-placar); letter-spacing: 0.12em; text-transform: uppercase; }

.capa {
  position: relative; overflow: hidden; aspect-ratio: 3 / 4; max-width: 100%;
  background: var(--fundo);
  display: grid; place-items: center;
}
.capa .simbolo {
  position: relative; z-index: 1;
  font: 800 64px/1 var(--fonte-placar); color: var(--realce); letter-spacing: 0.02em;
  text-shadow: 0 4px 0 rgba(0,0,0,0.35);
}
.capa-gramado { background:
  linear-gradient(170deg, var(--fundo) 0 52%, transparent 52.2%),
  repeating-linear-gradient(90deg, #2c8a3c 0 22px, #31964a 22px 44px); }
.capa-gramado::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 2px; height: 46%; background: rgba(255,255,255,0.65); }
.capa-cartucho { background:
  repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0 3px, transparent 3px 6px),
  radial-gradient(circle at 30% 20%, rgba(255,255,255,0.18), transparent 50%),
  var(--fundo); }
.capa-cartucho::before { content: ""; position: absolute; inset: 14% 18% auto; height: 18%; border: 3px solid var(--realce); opacity: 0.6; }
.capa-grade { background:
  linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px) 0 0 / 22px 22px,
  linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px) 0 0 / 22px 22px,
  var(--fundo); }

.destaque-biblioteca {
  display: grid; grid-template-columns: 300px 1fr; gap: 0;
  background: linear-gradient(115deg, var(--painel-2), var(--noite-2));
  border: 1px solid var(--linha);
}
.destaque-biblioteca .capa-grande .simbolo { font-size: 120px; }
.destaque-biblioteca .info { padding: 34px 36px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.destaque-biblioteca h2 { margin: 0; font: 800 clamp(48px, 7vw, 88px)/0.88 var(--fonte-placar); text-transform: uppercase; }
.destaque-biblioteca .sub { margin: 0; color: #cfe0ff; max-width: 52ch; }
.destaque-biblioteca .meta { margin: 0; color: var(--suave); font: 700 15px/1.3 var(--fonte-placar); letter-spacing: 0.1em; text-transform: uppercase; }

.linha-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.selo-status {
  white-space: nowrap;
  font: 700 12px/1 var(--fonte-placar); letter-spacing: 0.14em; text-transform: uppercase;
  padding: 6px 9px; border: 1px solid currentColor;
}
.selo-status.jogavel { color: var(--gramado); }
.selo-status.desenvolvimento { color: var(--destaque); }
.selo-status.em-breve { color: var(--suave); }

.estante { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 22px; }
.cartao-jogo {
  display: grid; color: var(--texto); text-decoration: none;
  background: var(--painel); border: 1px solid var(--linha);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
a.cartao-jogo:hover, a.cartao-jogo:focus-visible { transform: translateY(-4px); border-color: var(--destaque); box-shadow: 0 16px 30px rgba(0,0,0,0.4); }
.cartao-jogo.indisponivel { opacity: 0.72; }
.cartao-jogo.indisponivel .capa { filter: saturate(0.6); }
.capa-cartao { position: relative; }
.capa-cartao .selo-status { position: absolute; top: 10px; left: 10px; background: rgba(7, 13, 28, 0.85); white-space: nowrap; }
.dados-cartao { padding: 12px 14px 16px; display: grid; gap: 6px; }
.dados-cartao h3 { margin: 0; font: 800 26px/1 var(--fonte-placar); text-transform: uppercase; letter-spacing: 0.02em; }
.dados-cartao p { margin: 0; color: var(--suave); font-size: 13px; }
.categoria { color: var(--suave); font: 700 12px/1 var(--fonte-placar); letter-spacing: 0.14em; text-transform: uppercase; }

@media (max-width: 860px) {
  .destaque-biblioteca { grid-template-columns: 1fr; }
  .destaque-biblioteca .capa-grande { aspect-ratio: 16 / 9; }
  .menu-topo { margin-left: 0; order: 3; width: 100%; }
  .entrar { grid-template-columns: 1fr; gap: 28px; }
  .destaque-jogo { grid-template-columns: 1fr; }
  .grade { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

.botao-jogar.desativado { background: #3a4a78; color: #c3cdea; cursor: default; }
.botao-jogar.desativado::before { content: ""; }
.aviso-texto { margin: 0; color: var(--suave); max-width: 60ch; }