/* v2.1.1 — mobile HUD + animated title */
#agf-vgs{background:var(--agf-bg,#202124); color:#e8eaed; padding:40px 0;}
#agf-vgs .agf-wrap{max-width:1210px; margin:0 auto; padding:0 16px;}
#agf-vgs .agf-title{font:900 clamp(28px,6vw,72px)/1 'Orbitron',system-ui,-apple-system,Segoe UI,Roboto,Arial; letter-spacing:.02em; margin:0 0 6px; text-align:center;}
#agf-vgs .agf-sub{text-align:center; margin:0 0 14px; opacity:.9}
#agf-vgs .agf-actions{display:flex; gap:12px; align-items:center; justify-content:center; flex-wrap:wrap; margin-bottom:12px;}
#agf-canvas{width:100%; height:auto; background:#0f0f0f; border-radius:12px; box-shadow:0 6px 24px rgba(0,0,0,.35); display:block;}
.agf-footer{display:flex; gap:12px; align-items:center; justify-content:center; margin:12px 0 0}
.agf-btn{background:#303134; color:#e8eaed; border:1px solid #5f6368; padding:10px 14px; border-radius:10px; cursor:pointer}
.agf-primary{background:#1a73e8; border-color:#1a73e8; color:#fff}

/* Compact HUD that stays visible */
.agf-hud{display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; margin:6px 0 8px}
.agf-chip{background:#171717; border:1px solid #2c2c2c; padding:6px 10px; border-radius:999px; font-weight:700;}

/* Footer mode */
#agf-vgs-footer{ background:var(--agf-bg,#202124); color:#e8eaed; min-height:var(--agf-h,60vh); display:block; }
#agf-vgs-footer .agf-foot-wrap{ position:relative; width:100%; margin:0 auto; padding:12px 16px; max-width:1210px; }
#agf-vgs-footer .agf-foot-wrap.agf-full{ max-width:none; padding-left:0; padding-right:0; }
#agf-vgs-footer .agf-foot-wrap.agf-match{ max-width:var(--agf-match-w,1210px); }
#agf-vgs-footer .agf-foot-head{ display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-bottom:8px; }
#agf-vgs-footer .agf-foot-title{ font:800 clamp(22px,4vw,44px)/1 'Orbitron',system-ui,-apple-system,Segoe UI,Roboto,Arial; margin:0; }
#agf-canvas-foot{ width:100%; height:calc(var(--agf-h,60vh) - 96px); background:#0f0f0f; border-top:1px solid #2c2c2c; border-bottom:1px solid #2c2c2c; display:block; }
.agf-hud-foot{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:6px 0 8px; justify-content:flex-end; }

/* Mobile fixes */
@media (max-width: 640px){
  .agf-chip{font-size:14px; padding:6px 10px;}
  #agf-canvas, #agf-canvas-foot{ border-radius:10px; }
  .agf-footer{ position:sticky; bottom:0; background:transparent; padding-bottom:8px; }
  .agf-hud, .agf-hud-foot{ position:relative; z-index:3; justify-content:center; }
}

/* Animated title */
.agf-animated-title{ position:relative; display:block; text-transform:uppercase; letter-spacing:.03em; }
.agf-animated-title .agf-title-core{
  --r:66; --g:133; --b:244;
  color: rgb(var(--r),var(--g),var(--b));
  text-shadow:
    0 0 10px rgba(var(--r),var(--g),var(--b),.6),
    0 0 22px rgba(var(--r),var(--g),var(--b),.35);
  animation: agf-flicker 3.2s infinite linear, agf-color 6.4s infinite linear;
  position:relative;
}
.agf-animated-title .agf-title-core::before,
.agf-animated-title .agf-title-core::after{
  content: attr(data-text);
  position:absolute; inset:0; pointer-events:none;
  mix-blend-mode:screen; opacity:.7;
}
.agf-animated-title .agf-title-core::before{ transform: translate(2px, -1px); filter: blur(.4px); }
.agf-animated-title .agf-title-core::after { transform: translate(-2px, 1px); filter: blur(.3px); }

@keyframes agf-flicker{
  0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; }
  19%, 21%, 55% { opacity:.85; }
  23%, 24% { opacity:.65; }
}
@keyframes agf-color{
  0%   { --r:66;  --g:133; --b:244; }
  25%  { --r:234; --g:67;  --b:53;  }
  50%  { --r:251; --g:188; --b:5;   }
  75%  { --r:52;  --g:168; --b:83;  }
  100% { --r:66;  --g:133; --b:244; }
}