/* =========================================================
   BLUELOCKDLE · PLANTILLA PREMIUM COMPARTIDA (shell)
   Fondo premium + footer unificado, idéntico a blue-lock-characters.html
   No toca el CSS de los juegos (bluelockdle.css, main.min.css, etc.)
   ========================================================= */

:root {
  --bg0: #05070f;
  --bg1: #0a0f1e;
  --bg2: #101a33;
  --card: rgba(255, 255, 255, 0.035);
  --card-hover: rgba(0, 194, 255, 0.06);
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(0, 194, 255, 0.35);
  --txt: #eef3fb;
  --muted: #93a3c0;
  --cyan: #00c2ff;
  --cyan-soft: #7fe0ff;
  --red: #ff2d55;
  --red-soft: #ff7a8f;
  --gold: #ffc233;
  --violet: #8a6bff;
  --green: #2dff8f;
  --radius: 16px;
  --font: 'Inter', 'Segoe UI', 'Nunito', system-ui, sans-serif;
}

/* ---------- FONDO PREMIUM ---------- */
body {
  margin: 0;
  background:
    radial-gradient(1100px 600px at 12% -8%, rgba(0, 194, 255, 0.10), transparent 55%),
    radial-gradient(900px 520px at 95% 0%, rgba(255, 45, 85, 0.10), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1) 40%, var(--bg0));
  background-attachment: fixed;
  color: var(--txt);
  font-family: var(--font);
  line-height: 1.55;
  min-height: 100vh;
}

/* ---------- FOOTER PREMIUM ---------- */
footer.footer,
body > footer.footer {
  display: block !important;
  background: rgba(4, 6, 12, 0.6);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--font);
}

.footer-bar {
  margin-top: 30px;
  margin-bottom: 30px;
}

.bg-half {
  background: transparent;
}

footer.footer .container {
  box-sizing: border-box;
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 15px;
}

footer.footer .row {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
}

footer.footer [class*="col-"] {
  box-sizing: border-box;
  flex: 0 0 auto;
  padding: 0 15px;
}

footer.footer .col-lg-8,
footer.footer .col-md-8 {
  width: 100%;
}

@media (min-width: 768px) {
  footer.footer .col-lg-8,
  footer.footer .col-md-8 {
    width: 66.6667%;
  }
}

footer.footer .justify-content-center {
  justify-content: center;
}

footer.footer .text-center {
  text-align: center;
}

footer.footer .list-inline-item {
  display: inline-block;
  margin: 0 6px;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 14px;
}

footer.footer p.mb-0 {
  margin-bottom: 0;
  margin-top: 0.35rem;
}

footer.footer a {
  color: var(--cyan);
  text-decoration: none;
}

footer.footer a:hover {
  color: var(--cyan-soft);
}

footer.footer ul,
footer.footer ol {
  margin: 0;
  padding: 0;
}

footer.footer li {
  list-style: none;
}

/* Wrapper de los juegos: contenido sobre el fondo premium sin desbordes */
#wrapper {
  max-width: 1400px;
  margin: 0 auto;
  padding: 10px 18px 60px;
  box-sizing: border-box;
}

/* El juego wordle/unlimited se monta en #root con fondo claro; el shell premium
   dejaba las letras claras (heredadas del body). Se restaura el texto oscuro del
   juego para que letras y números se lean, sin tocar las celdas con color propio
   (p.ej. celdas correctas con text-white sobre fondo verde). */
#root {
  color: #161c2d;
}

#root .number {
  color: #161c2d;
}

/* El tablero del wordle se renderiza dentro de un diálogo Headless UI (portal),
   que queda fuera de #root. Hereda el color claro del body; se restaura oscuro. */
#headlessui-portal-root {
  color: #161c2d;
}

#headlessui-portal-root .number {
  color: #161c2d;
}

.game-iframe {
  width: 100%;
  display: block;
  border: 0;
  overflow: hidden;
}
h1 { color: #013AF5 !important; }