/**
 * smgr/css/pages/minijuegos.css — HUB de mini-juegos (chrome "Foco").
 *
 * Port del <style> inline del hub clásico. Reglas del port:
 *   · El bloque :root con las variables --mj-* se deja SIN scope (custom props
 *     globales inofensivas).
 *   · body { background } / .logo-main del original NO se portan: el chrome Foco
 *     ya aporta fondo (--ground) y cabecera. El hero pinta su propio fondo.
 *   · TODO el resto de selectores va prefijado con ".game-scope " para aislar el
 *     hub de los globales de rincon.css y viceversa.
 *   · Reset de aislamiento arriba: neutraliza los resets de rincon.css (img)
 *     que distorsionarían las tarjetas.
 */

/* ===== Variables del hub (globales, sin scope) ===== */
:root {
    --mj-navy:#1e3a5f; --mj-navy2:#2c5282; --mj-orange:#ed8936; --mj-mas:#16a34a;
    --mj-bg:#eef2f8; --mj-border:#e2e8f0; --mj-muted:#64748b; --mj-ink:#0f172a;
}

/* ===== Reset de aislamiento (contrarresta rincon.css dentro del hub) ===== */
.game-scope img { max-width: none; }

.game-scope #mj-app { max-width: 880px; margin: 4px auto 44px; padding: 0 14px; font-family: Roboto, sans-serif; color: var(--mj-ink); }

.game-scope .mj-hero { background:linear-gradient(135deg,var(--mj-navy) 0%,var(--mj-navy2) 100%); color:#fff; border-radius:16px;
    padding:30px 26px; text-align:center; position:relative; overflow:hidden; box-shadow:0 4px 16px rgba(15,23,42,.08); }
.game-scope .mj-hero::after { content:''; position:absolute; right:-50px; top:-50px; width:180px; height:180px; border-radius:50%;
    background:radial-gradient(circle, rgba(237,137,54,.22) 0%, transparent 70%); pointer-events:none; }
.game-scope .mj-hero h1 { margin:0 0 8px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(1.7rem,5vw,2.3rem); letter-spacing:-.02em; color:#fff; }
.game-scope .mj-hero p { margin:0 auto; max-width:520px; opacity:.92; font-size:15px; line-height:1.45; }
.game-scope .mj-admin-chip { position:absolute; top:14px; right:16px; z-index:2; display:inline-flex; align-items:center; gap:6px;
    background:rgba(255,255,255,.16); color:#fff; text-decoration:none; font-size:12.5px; font-weight:700; padding:6px 12px; border-radius:999px; }
.game-scope .mj-admin-chip:hover { background:rgba(255,255,255,.30); color:#fff; }

.game-scope .mj-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:18px; }
.game-scope .mj-card { display:flex; flex-direction:column; gap:11px; background:#fff; border:2px solid var(--mj-border); border-radius:16px;
    padding:18px; text-decoration:none; color:inherit; transition:.15s; position:relative; }
.game-scope .mj-card:hover { transform:translateY(-3px); box-shadow:0 10px 24px rgba(30,58,95,.13); }
.game-scope .mj-card.a-orange:hover { border-color:var(--mj-orange); }
.game-scope .mj-card.a-navy:hover { border-color:var(--mj-navy2); }
.game-scope .mj-card.a-mas:hover { border-color:var(--mj-mas); }
.game-scope .mj-card-h { display:flex; align-items:center; gap:12px; }
.game-scope .mj-card-h img { width:52px; height:52px; border-radius:11px; flex:0 0 52px; }
.game-scope .mj-card-h .nm { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:20px; line-height:1.1; color:var(--mj-ink); }
.game-scope .mj-pitch { font-size:13.5px; color:#475569; line-height:1.45; }
.game-scope .mj-players { font-size:12.5px; color:var(--mj-muted); font-weight:600; }
.game-scope .mj-players i { color:#94a3b8; margin-right:5px; }
.game-scope .mj-when { font-size:12px; color:var(--mj-muted); }
.game-scope .mj-when i { color:#94a3b8; margin-right:5px; }
.game-scope .mj-go { margin-top:auto; align-self:stretch; text-align:center; font-weight:700; font-size:14px; color:#fff; padding:11px; border-radius:10px;
    background:linear-gradient(135deg,var(--mj-navy2),var(--mj-navy)); }
.game-scope .a-orange .mj-go { background:linear-gradient(135deg,var(--mj-orange),#dd6b20); }
.game-scope .a-mas .mj-go { background:linear-gradient(135deg,var(--mj-mas),#15803d); }
.game-scope .mj-go i { margin-left:6px; }
.game-scope .mj-card:hover .mj-go { filter:brightness(1.06); }

.game-scope .mj-badges { position:absolute; top:12px; right:12px; display:flex; flex-direction:column; gap:5px; align-items:flex-end; }
.game-scope .mj-badge { color:#fff; font-size:10.5px; font-weight:700; letter-spacing:.06em; padding:3px 9px; border-radius:999px; text-transform:uppercase; }
.game-scope .mj-badge.nuevo { background:var(--mj-mas); }
.game-scope .mj-badge.popular { background:var(--mj-orange); }

.game-scope .mj-cross { display:flex; flex-direction:column; gap:11px; background:#fff; border:2px solid #cfe0d5; border-radius:16px;
    padding:18px; text-decoration:none; color:inherit; transition:.15s; position:relative; }
.game-scope .mj-cross:hover { transform:translateY(-3px); box-shadow:0 10px 24px rgba(11,46,28,.15); border-color:#1f8b4d; }
.game-scope .mj-cross-k { font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#1f8b4d; }
.game-scope .mj-cross .mj-card-h img { background:#0b2e1c; object-fit:contain; padding:7px; }
.game-scope .mj-cross .mj-go { background:linear-gradient(135deg,#1f8b4d,#0b2e1c); }
.game-scope .mj-cross:hover .mj-go { filter:brightness(1.08); }

.game-scope .mj-soon { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center;
    background:transparent; border:2px dashed #cbd5e1; border-radius:16px; padding:18px; color:var(--mj-muted); }
.game-scope .mj-soon .ic { font-size:22px; color:#94a3b8; }
.game-scope .mj-soon .t { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:16px; color:#475569; }
.game-scope .mj-soon .d { font-size:12.5px; }

@media (max-width:560px) {
    .game-scope .mj-grid { grid-template-columns:1fr; }
    .game-scope .mj-hero { padding:24px 18px; }
}