:root{
  --bg:#0b1020;
  --fg:#e5e7eb;
  --muted:#a3a3a3;
  --card:#0f172a;
  --cardHover:#111d36;
  --accent:#22d3ee;
  --border:#1f2937;
  --erro:#e11d48;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:linear-gradient(180deg, var(--bg), #0f172a);
  color:var(--fg);
  font:16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem;
}

.wrap{
  width:min(1100px,100%);
}

header{
  text-align:center;
  margin-bottom:1.25rem;
}

h2{
  margin:.2rem 0 .4rem;
  font-size:clamp(1.5rem,2.2vw + 1rem,2.3rem);
}

h3{
  margin:.1rem 0 .3rem;
  font-weight:500;
}

.subtitle{
  margin:0;
  color:var(--muted);
  font-size:.95rem;
}

.grid{
  display:grid;
  gap:1rem;
  margin-top:1.25rem;
  grid-template-columns:repeat(auto-fill, minmax(260px,1fr));
}

/* Card genérico para todos os jogos */
.btn{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:1rem 1.1rem;
  text-decoration:none;
  color:inherit;
  transition:.15s ease;
  outline:none;
  display:flex;
  flex-direction:column;
  gap:.6rem;
}

.btn:hover,
.btn:focus-visible{
  background:var(--cardHover);
  border-color:#334155;
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(0,0,0,.25);
}

.btn-header{
  display:flex;
  align-items:flex-start;
  gap:.6rem;
}

.btn .text{
  display:flex;
  flex-direction:column;
}

.btn .title{
  font-weight:700;
  font-size:1.02rem;
}

.btn .hint{
  font-size:.86rem;
  color:var(--muted);
}

.actions{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
  margin-top:.2rem;
}

.badge{
  font-size:.75rem;
  background:var(--accent);
  color:#0c111b;
  padding:.18rem .5rem;
  border-radius:999px;
  font-weight:700;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}

/* Botão "Sem Login" desabilitado */
.badge.disabled{
  background:#4b5563;
  color:var(--fg);
  cursor:not-allowed;
  pointer-events:none;
  opacity:0.7;
}

svg.icon{
  width:18px;
  height:18px;
}

code{
  background:#0b1325;
  padding:.1rem .3rem;
  border-radius:6px;
  border:1px solid #1f2742;
}

/* Se quiser manter a ideia de card inteiro bloqueado em algum caso */
.btn.erro{
  border:2px solid var(--erro) !important;
  box-shadow:0 0 10px rgba(225, 29, 72, 0.5);
  cursor:not-allowed;
  pointer-events:none;
  opacity:0.6;
}

footer{
  margin-top:2rem;
  color:var(--muted);
  font-size:.9rem;
  text-align:center;
}

.footer-back{
  margin-top:.8rem;
}

.back-btn{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  background:var(--card);
  border:1px solid var(--border);
  padding:.55rem .9rem;
  border-radius:10px;
  color:var(--fg);
  text-decoration:none;
  font-size:.95rem;
  transition:.15s;
}

.back-btn:hover,
.back-btn:focus-visible{
  background:var(--cardHover);
  border-color:#334155;
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}

.back-btn .icon{
  width:18px;
  height:18px;
  flex-shrink:0;
}