/* =====================================================================
   Arcade Motors MX — easter egg discreto "Dodge".
   Pantallita pequeña junto al grid de categorías. Sin texto en demo:
   solo corre y, al hover, insinúa un ▶. Todo bajo .ag-* / #ag*.
   ===================================================================== */

/* ---- layout: categorías + mini pantalla a un lado ---- */
.ag-catrow{ display:flex; gap:22px; align-items:flex-start; }
.ag-catrow .cat-grid{ flex:1 1 auto; min-width:0; }
.ag-side{ flex:0 0 auto; width:186px; }
@media(max-width:760px){
  .ag-catrow{ flex-direction:column; align-items:center; }
  .ag-catrow .cat-grid{ width:100%; }
  .ag-side{ width:170px; }
}

/* ---- pantalla ---- */
.ag-mini, .ag-side{ position:relative; }
.ag-screen{
  position:relative; aspect-ratio:3/5; width:100%; border-radius:10px; overflow:hidden;
  background:#0b0a1f; cursor:pointer; touch-action:none; user-select:none; -webkit-user-select:none;
  border:1px solid var(--border-strong);
  box-shadow:inset 0 0 0 2px #050414, inset 0 0 40px rgba(0,0,0,.9);
  transition:box-shadow .22s, transform .22s;
}
.ag-screen:hover{ box-shadow:inset 0 0 0 2px #050414, inset 0 0 40px rgba(0,0,0,.9), 0 0 22px rgba(255,45,149,.4); transform:translateY(-2px); }
.ag-screen:focus-visible{ outline:3px solid var(--cyan); outline-offset:3px; }
#agGame{ display:block; width:100%; height:100%; image-rendering:pixelated; image-rendering:crisp-edges; }

.ag-scan{
  position:absolute; inset:0; pointer-events:none; z-index:3; mix-blend-mode:multiply;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px),
    radial-gradient(120% 120% at 50% 50%, transparent 60%, rgba(0,0,0,.6) 100%);
}

/* ---- HUD (solo al jugar) ---- */
.ag-hud{
  position:absolute; top:0; left:0; right:0; display:flex; justify-content:space-between;
  padding:6px 8px; font-family:var(--term); font-size:13px; letter-spacing:.04em;
  color:var(--cyan); text-shadow:0 0 8px rgba(25,230,255,.6); z-index:4; pointer-events:none;
}
.ag-hud b{ color:#fff; font-variant-numeric:tabular-nums; }
.ag-hud .ag-best{ color:var(--green); text-shadow:0 0 8px rgba(255,182,39,.5); }

/* ---- overlays ---- */
.ag-ov{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; z-index:5; }
.ag-hidden{ display:none !important; }   /* utilidad: sirve para HUD y overlays por igual */

/* demo: sin texto; ▶ sutil que aparece al hover */
.ag-demoP{ pointer-events:none; opacity:0; transition:opacity .22s; background:radial-gradient(circle at 50% 50%, rgba(6,4,20,.32), transparent 68%); }
.ag-screen:hover .ag-demoP{ opacity:1; }
.ag-play{
  width:0; height:0; border-style:solid; border-width:12px 0 12px 20px;
  border-color:transparent transparent transparent rgba(255,255,255,.92);
  filter:drop-shadow(0 0 9px rgba(255,45,149,.85)); margin-left:4px;
}
@media (hover:none){ /* móvil: un latido muy tenue para invitar sin spoilear */
  .ag-demoP{ opacity:.5; animation:agBreath 2.4s ease-in-out infinite; }
  @keyframes agBreath{ 0%,100%{opacity:.2} 50%{opacity:.6} }
}

/* game over: mínimo, cabe en la pantalla chica */
.ag-goP{ background:rgba(8,5,22,.9); font-family:var(--pixel); padding:10px; text-align:center; }
.ag-sl{ font-family:var(--term); font-size:15px; color:var(--text); }
.ag-sl b{ font-family:var(--pixel); font-size:20px; color:var(--cyan); font-variant-numeric:tabular-nums; }
.ag-rec{ font-family:var(--term); font-size:13px; color:var(--green); }
.ag-btnrow{ display:flex; gap:6px; margin-top:4px; }
.ag-btn{ font-family:var(--pixel); font-size:8px; letter-spacing:.04em; padding:8px 10px; border-radius:6px; cursor:pointer; border:1px solid transparent; }
.ag-btn:active{ transform:translateY(1px); }
.ag-btn:focus-visible{ outline:3px solid var(--cyan); outline-offset:2px; }
.ag-btn-p{ background:var(--magenta); color:#fff; box-shadow:0 0 14px rgba(255,45,149,.5); }
.ag-btn-g{ background:transparent; color:var(--green); border-color:var(--green-dim); }

@media (prefers-reduced-motion: reduce){ .ag-demoP{ animation:none; } }