/* ============================================================
   EL INDICE - JUEGOS - estilos base compartidos
   Estética editorial sobria, alineada con el sitio principal.
   Si las variables --ei-font-* ya existen en el sitio, se reusan.
   Si no, se aplican fallbacks.
   ============================================================ */

:root {
  --ei-juego-bg: #ffffff;
  --ei-juego-text: #1a1a1a;
  --ei-juego-text-muted: #6b6b6b;
  --ei-juego-line: #d8d8d8;
  --ei-juego-line-soft: #ececec;
  --ei-juego-rojo: #c8102e;
  --ei-juego-rojo-soft: rgba(200, 16, 46, 0.08);
  --ei-juego-azul: #1f4b8a;
  --ei-juego-azul-soft: rgba(31, 75, 138, 0.08);
  --ei-juego-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  --ei-juego-radius: 6px;

  --ei-juego-font-serif: var(--ei-font-serif, 'Georgia', 'Times New Roman', serif);
  --ei-juego-font-body:  var(--ei-font-body,  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  --ei-juego-font-ui:    var(--ei-font-ui,    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  --ei-juego-font-mono:  var(--ei-font-mono,  'JetBrains Mono', Consolas, monospace);
}

/* contenedor general */
.ei-juego {
  background: var(--ei-juego-bg);
  color: var(--ei-juego-text);
  font-family: var(--ei-juego-font-body);
  max-width: 980px;
  margin: 0 auto;
  padding: 24px 16px 64px;
  box-sizing: border-box;
}

/* cabecera del juego */
.ei-juego__head {
  border-bottom: 1px solid var(--ei-juego-line);
  padding-bottom: 14px;
  margin-bottom: 22px;
}
.ei-juego__cat {
  font-family: var(--ei-juego-font-ui);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ei-juego-rojo);
  font-weight: 700;
  margin: 0 0 6px;
}
.ei-juego__title {
  font-family: var(--ei-juego-font-serif);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 4px;
  color: var(--ei-juego-text);
}
.ei-juego__deck {
  font-family: var(--ei-juego-font-body);
  font-size: 15px;
  color: var(--ei-juego-text-muted);
  margin: 0;
  line-height: 1.45;
}

/* barra superior con controles */
.ei-juego__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding: 10px 0;
  border-bottom: 1px solid var(--ei-juego-line-soft);
}
.ei-juego__bar-group {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* botones */
.ei-juego__btn {
  font-family: var(--ei-juego-font-ui);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ei-juego-text);
  background: #fff;
  border: 1px solid var(--ei-juego-line);
  padding: 8px 14px;
  border-radius: var(--ei-juego-radius);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.ei-juego__btn:hover {
  background: #f5f5f5;
  border-color: #b8b8b8;
}
.ei-juego__btn--primary {
  background: var(--ei-juego-text);
  color: #fff;
  border-color: var(--ei-juego-text);
}
.ei-juego__btn--primary:hover {
  background: #000;
  border-color: #000;
}
.ei-juego__btn--rojo {
  background: var(--ei-juego-rojo);
  color: #fff;
  border-color: var(--ei-juego-rojo);
}
.ei-juego__btn--rojo:hover {
  background: #a50e25;
  border-color: #a50e25;
}
.ei-juego__btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* selector de dificultad */
.ei-juego__select {
  font-family: var(--ei-juego-font-ui);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ei-juego-text);
  background: #fff;
  border: 1px solid var(--ei-juego-line);
  padding: 8px 28px 8px 12px;
  border-radius: var(--ei-juego-radius);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%231a1a1a' d='M0 0l5 6 5-6z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

/* timer / status */
.ei-juego__status {
  font-family: var(--ei-juego-font-mono);
  font-size: 13px;
  color: var(--ei-juego-text-muted);
}
.ei-juego__status strong {
  color: var(--ei-juego-text);
  font-weight: 600;
}

/* mensaje (toast / banner) */
.ei-juego__msg {
  font-family: var(--ei-juego-font-ui);
  font-size: 13px;
  padding: 10px 14px;
  border-radius: var(--ei-juego-radius);
  margin-bottom: 14px;
  border: 1px solid var(--ei-juego-line);
  background: #fafafa;
  color: var(--ei-juego-text);
}
.ei-juego__msg--ok {
  background: #f0f7ed;
  border-color: #c5dec0;
  color: #2c5e20;
}
.ei-juego__msg--err {
  background: var(--ei-juego-rojo-soft);
  border-color: rgba(200, 16, 46, 0.25);
  color: var(--ei-juego-rojo);
}
.ei-juego__msg--info {
  background: var(--ei-juego-azul-soft);
  border-color: rgba(31, 75, 138, 0.2);
  color: var(--ei-juego-azul);
}

@media (max-width: 600px) {
  .ei-juego__title { font-size: 24px; }
  .ei-juego__bar { flex-direction: column; align-items: stretch; }
  .ei-juego__bar-group { justify-content: center; }
}