@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Outfit:wght@300..800&display=swap');
html, body { overflow-x:clip; }
.lfa { font-family:'Outfit','Segoe UI',sans-serif; position:relative; left:50%; right:50%; margin:0 -50vw; width:100vw;
  background:
    radial-gradient(900px 520px at 12% -10%, rgba(255,62,165,.28) 0%, transparent 60%),
    radial-gradient(900px 560px at 88% 110%, rgba(34,224,255,.24) 0%, transparent 58%),
    linear-gradient(180deg,#0a0620 0%,#120a2e 45%,#0a0620 100%);
  color:#eef3ff; padding:74px 5vw 66px; overflow:hidden; isolation:isolate; }
.lfa::before { content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,.22) 0 1px, transparent 1px 3px); opacity:.5; }
.lfa::after { content:""; position:absolute; inset:0; pointer-events:none; z-index:3;
  background:radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%); }
.lfa-in { max-width:1140px; margin:0 auto; position:relative; z-index:4; }

/* marquee sign */
.lfa-sign { text-align:center; margin:0 auto 34px; max-width:760px; padding:22px 30px; border-radius:14px;
  border:2px solid rgba(34,224,255,.5); background:rgba(6,3,20,.55);
  box-shadow:0 0 0 4px rgba(10,6,32,.8), 0 0 34px rgba(34,224,255,.28), inset 0 0 34px rgba(34,224,255,.10); }
.lfa-bulbs { display:flex; justify-content:center; gap:9px; margin-bottom:16px; }
.lfa-bulbs i { width:8px; height:8px; border-radius:50%; background:#ffd23f; box-shadow:0 0 10px #ffd23f;
  animation:lfaBulb 1.1s infinite steps(1); }
.lfa-bulbs i:nth-child(2n){ animation-delay:.55s; background:#ff3ea5; box-shadow:0 0 10px #ff3ea5; }
@keyframes lfaBulb { 0%,49%{opacity:1} 50%,100%{opacity:.18} }
.lfa-sign h2 { font-family:'Press Start 2P',monospace; font-size:clamp(.95rem,2.5vw,1.5rem); line-height:1.7;
  margin:0; color:#fff; letter-spacing:1px;
  text-shadow:0 0 8px rgba(34,224,255,.9), 0 0 22px rgba(34,224,255,.5), 0 3px 0 #ff3ea5; }
.lfa-sign p { margin:16px 0 0; font-size:1.02rem; color:#b9c6e6; line-height:1.6; }
.lfa-sign p a { color:#22e0ff; text-decoration:underline; text-underline-offset:3px; }

/* cartridge grid */
/* flex, not grid, so the 7th tile sits centred instead of hanging left on the second row */
.lfa-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:16px; margin-bottom:34px; }
.lfa-t { flex:0 1 246px; position:relative; display:block; text-decoration:none; padding:20px 18px 18px; border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.13); color:#eef3ff; overflow:hidden;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.lfa-t::before { content:""; position:absolute; left:0; top:0; height:3px; width:100%; background:var(--n); }
.lfa-t:hover { transform:translateY(-5px); border-color:var(--n);
  box-shadow:0 12px 34px rgba(0,0,0,.5), 0 0 26px color-mix(in srgb, var(--n) 45%, transparent); }
.lfa-t:focus-visible { outline:3px solid var(--n); outline-offset:3px; }
.lfa-ic { font-size:2rem; line-height:1; margin-bottom:12px; filter:drop-shadow(0 0 10px color-mix(in srgb, var(--n) 60%, transparent)); }
.lfa-t h3 { font-family:'Press Start 2P',monospace; font-size:.68rem; line-height:1.55; margin:0 0 8px; color:#fff; }
.lfa-t .lfa-k { font-size:.68rem; letter-spacing:1.6px; text-transform:uppercase; color:var(--n); font-weight:600; }
.lfa-t .lfa-go { margin-top:14px; font-family:'Press Start 2P',monospace; font-size:.55rem; color:#fff; opacity:.75; }
.lfa-t:hover .lfa-go { opacity:1; color:var(--n); }

/* CTA */
.lfa-cta { text-align:center; }
.lfa-coin { font-family:'Press Start 2P',monospace; font-size:.6rem; color:#ffd23f; letter-spacing:1px;
  margin-bottom:14px; animation:lfaBlink 1.4s steps(1) infinite; }
@keyframes lfaBlink { 0%,59%{opacity:1} 60%,100%{opacity:.15} }
.lfa-btn { display:inline-block; font-family:'Press Start 2P',monospace; font-size:.8rem; line-height:1;
  padding:20px 34px; border-radius:10px; text-decoration:none; color:#07121b;
  background:linear-gradient(180deg,#5ff0ff,#22e0ff); border:0; letter-spacing:1px;
  box-shadow:0 6px 0 #0d8fa8, 0 12px 30px rgba(34,224,255,.35); transition:transform .1s ease, box-shadow .1s ease; }
.lfa-btn:hover { transform:translateY(3px); box-shadow:0 3px 0 #0d8fa8, 0 8px 22px rgba(34,224,255,.4); color:#07121b; }
.lfa-btn:active { transform:translateY(6px); box-shadow:0 0 0 #0d8fa8; }
.lfa-note { margin:18px 0 0; font-size:.92rem; color:#8fa0c4; }
.lfa-note a { color:#c9d6f2; text-decoration:underline; text-underline-offset:3px; }

@media (max-width:640px){
  .lfa { padding:54px 20px 48px; }
  .lfa-sign { padding:18px 18px; }
  .lfa-grid { gap:12px; } .lfa-t { flex:0 1 152px; }
  .lfa-t { padding:16px 14px 14px; }
}
@media (prefers-reduced-motion:reduce){
  .lfa-bulbs i, .lfa-coin { animation:none; }
  .lfa-t:hover { transform:none; }
}