/* ════════════════════════════════════════════════════════════════════
   EL MENÚ PREVIO DE CADA MINIJUEGO (09/10/2026) — `minijuego.html`
   Sin cajas: el logo con su halo, el nombre en Anton, las tres pestañas
   de siempre y los números como en una planilla (Anton grande, rótulo
   chico, líneas finas). El botón es el de la ley (`cop-b cop-borde`).
   ════════════════════════════════════════════════════════════════════ */
body{background:var(--bg,#0b0e14);color:var(--text,#f4f6fb);font-family:Inter,sans-serif}
.mj-main{max-width:var(--cop-ancho,720px);margin:0 auto;padding:0 var(--aire-contenido,16px) calc(var(--bb-h,58.5px) + var(--gap-2xl,1.8rem))}

/* ── la portada del juego ── */
.mj-hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--gap-sm,.5rem);padding:var(--gap-lg,1rem) 0 var(--gap-xl,1.3rem)}
.mj-logo{position:relative;width:96px;height:96px;margin-bottom:var(--gap-sm,.5rem)}
.mj-logo::before{content:"";position:absolute;inset:-26px;border-radius:50%;
  background:radial-gradient(closest-side, rgba(var(--tc-rgb,12,149,235),.42), transparent 72%);animation:mjHalo 3.4s ease-in-out infinite alternate}
.mj-logo::after{content:"";position:absolute;inset:0;background:var(--tc-logo,url('pelota-penales.webp?v=1')) center/contain no-repeat;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.55));animation:mjFlota 4s ease-in-out infinite}
.mj-tit{margin:0;font:400 2.1rem/1 Anton,Inter,sans-serif;letter-spacing:.02em;text-transform:uppercase;color:#fff}
.mj-intro{margin:0;max-width:34ch;font:500 var(--fs-md,.88rem)/1.45 Inter,sans-serif;color:var(--text-dim,#9aa3b5)}
@keyframes mjHalo{from{opacity:.6;transform:scale(.92)}to{opacity:1;transform:scale(1.06)}}
@keyframes mjFlota{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

.mj-tabs{margin:0 0 var(--gap-lg,1rem);width:auto;max-width:100%;box-sizing:border-box;padding-inline:0}
/* el modo que no existe va apagado, no escondido */
.mj-tabs .mj-tab-off{opacity:.55}

.mj-panel{display:flex;flex-direction:column;gap:var(--gap-lg,1rem);animation:mjEntra .35s cubic-bezier(.2,.8,.2,1) both}
@keyframes mjEntra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* variantes (Vuelo Clash: Columnas · Al arco) */
.mj-var{display:flex;gap:var(--gap-sm,.5rem);justify-content:center}

/* ── el récord online ── */
.mj-record{display:flex;flex-direction:column;align-items:center;gap:var(--gap-xs,.3rem);padding:var(--gap-sm,.5rem) 0}
.mj-record-num{display:flex;align-items:baseline;gap:.35em;font:400 3.2rem/1 Anton,Inter,sans-serif;font-variant-numeric:tabular-nums}
.mj-record-num i{font-style:normal;color:var(--text-faint,#5a6275);font-size:.6em}
.mj-g{color:rgb(var(--cop-acento-rgb,12,149,235))}
.mj-e{color:#fff}
.mj-p{color:var(--text-dim,#9aa3b5)}
.mj-record-rot{font:800 var(--fs-xs,.72rem)/1 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint,#5a6275)}

/* ── los números: planilla de tres columnas con líneas finas ── */
.mj-datos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--card-border,#1e2330);border-bottom:1px solid var(--card-border,#1e2330)}
.mj-dato{display:flex;flex-direction:column;align-items:center;gap:4px;padding:var(--gap-md,.7rem) var(--gap-xs,.3rem);min-width:0;text-align:center}
.mj-dato + .mj-dato{border-left:1px solid var(--card-border,#1e2330)}
.mj-dato-rot{font:800 var(--fs-xs,.72rem)/1 Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint,#5a6275)}
.mj-dato-val{font:400 var(--fs-xl,1.3rem)/1.05 Anton,Inter,sans-serif;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.mj-dato-sub{font:600 var(--fs-xs,.72rem)/1.2 Inter,sans-serif;color:var(--text-dim,#9aa3b5)}
.mj-dato--tenue .mj-dato-val{color:var(--text-faint,#5a6275)}

/* ── el botón ── */
.mj-jugar{width:100%}
.mj-nota{margin:calc(-1 * var(--gap-sm,.5rem)) 0 0;text-align:center;font:600 var(--fs-xs,.72rem)/1.4 Inter,sans-serif;color:var(--text-faint,#5a6275)}
.mj-nota a{color:rgb(var(--cop-acento-rgb,12,149,235));font-weight:800;text-decoration:none}
.mj-sub{margin:0;text-align:center;font:600 var(--fs-sm,.8rem)/1.4 Inter,sans-serif;color:var(--text-dim,#9aa3b5)}

/* ── secciones (cómo se juega · últimos duelos) ── */
.mj-sec{display:flex;flex-direction:column;gap:var(--gap-sm,.5rem);margin-top:var(--gap-sm,.5rem)}
.mj-sec-tit{margin:0;font:800 var(--fs-sm,.8rem)/1 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim,#9aa3b5)}
.mj-reglas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.mj-reglas li{display:grid;grid-template-columns:2rem 1fr;gap:var(--gap-sm,.5rem);align-items:baseline;padding:var(--gap-sm,.5rem) 0;
  border-bottom:1px solid var(--card-border,#1e2330);animation:mjEntra .4s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 70ms + 80ms)}
.mj-reglas li:last-child{border-bottom:0}
.mj-reglas i{font:400 var(--fs-xl,1.3rem)/1 Anton,Inter,sans-serif;font-style:normal;color:rgb(var(--cop-acento-rgb,12,149,235))}
.mj-reglas span{font:500 var(--fs-md,.88rem)/1.45 Inter,sans-serif;color:var(--text,#f4f6fb)}
.mj-clave{margin:var(--gap-xs,.3rem) 0 0;padding-left:var(--gap-md,.7rem);border-left:2px solid rgb(var(--cop-acento-rgb,12,149,235));
  font:600 var(--fs-sm,.8rem)/1.45 Inter,sans-serif;color:var(--text-dim,#9aa3b5)}

.mj-duelos{display:flex;flex-direction:column}
.mj-duelo{display:grid;grid-template-columns:5.2rem minmax(0,1fr) auto;align-items:center;gap:var(--gap-sm,.5rem);padding:var(--gap-sm,.5rem) 0;
  border-bottom:1px solid var(--card-border,#1e2330);animation:mjEntra .4s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 70ms)}
.mj-duelo:last-child{border-bottom:0}
.mj-duelo-res{font:800 var(--fs-xs,.72rem)/1 Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint,#5a6275)}
.mj-duelo--g .mj-duelo-res{color:rgb(var(--cop-acento-rgb,12,149,235))}
.mj-duelo--p .mj-duelo-res{color:var(--text-dim,#9aa3b5)}
.mj-duelo-riv{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:500 var(--fs-md,.88rem)/1.2 Inter,sans-serif;color:var(--text-dim,#9aa3b5)}
.mj-duelo-riv b{color:#fff;font-weight:700}
.mj-duelo-mar{font:400 var(--fs-lg,1.15rem)/1 Anton,Inter,sans-serif;color:#fff;font-variant-numeric:tabular-nums}
.mj-duelo-mar i{font-style:normal;color:var(--text-faint,#5a6275);margin:0 .2em}

.mj-vacio{margin:0;padding:var(--gap-lg,1rem) 0;text-align:center;font:600 var(--fs-sm,.8rem)/1.45 Inter,sans-serif;color:var(--text-dim,#9aa3b5)}

/* ── online que todavía no existe ── */
.mj-pronto{display:flex;flex-direction:column;align-items:center;gap:var(--gap-sm,.5rem);text-align:center;padding:var(--gap-md,.7rem) 0}
.mj-pronto-chip{font:800 var(--fs-xs,.72rem)/1 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;padding:.45em .9em;border-radius:999px;
  color:rgb(var(--cop-acento-rgb,12,149,235));background:rgba(var(--cop-acento-rgb,12,149,235),.12)}
.mj-pronto p{margin:0;max-width:32ch;font:500 var(--fs-md,.88rem)/1.45 Inter,sans-serif;color:var(--text-dim,#9aa3b5)}

/* el ranking va a sangre en el teléfono, como en Rankings */


@media (prefers-reduced-motion:reduce){
  .mj-logo::before,.mj-logo::after,.mj-panel,.mj-reglas li,.mj-duelo{animation:none}
}