/* NitroEngine arcade theme - shared */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

*{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg:#0a0a0a;
  --bg-alt:#111;
  --bg-card:#1a1a2e;
  --border:#333;
  --neon-green:#0f0;
  --neon-cyan:#0ff;
  --neon-yellow:#ff0;
  --neon-magenta:#f0f;
  --neon-orange:#f80;
  --neon-red:#f00;
  --text:#fff;
  --text-dim:#888;
  --text-faint:#555;
}

html,body{background:var(--bg);color:var(--text);min-height:100vh}
body{
  font-family:'Press Start 2P','Courier New',monospace;
  overflow-x:hidden;
  position:relative;
  line-height:1.6;
}

a{color:var(--neon-cyan);text-decoration:none}
a:hover{color:var(--neon-green)}

/* Starfield */
.stars{position:fixed;inset:0;pointer-events:none;z-index:0}
.star{position:absolute;background:#fff;border-radius:50%;animation:twinkle var(--dur) ease-in-out infinite alternate}
@keyframes twinkle{0%{opacity:.2;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}

/* Scanlines */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:1000;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.1) 2px,rgba(0,0,0,.1) 4px);
}
/* CRT vignette */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:999;
  background:radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.45) 100%);
}

/* Floating pixels (populated by arcade.js) */
.pixel-float{
  position:fixed;pointer-events:none;z-index:0;
  width:6px;height:6px;opacity:.3;
  animation:pixFloat linear infinite;
}
@keyframes pixFloat{
  0%{transform:translateY(100vh) rotate(0);opacity:0}
  10%{opacity:.3}90%{opacity:.3}
  100%{transform:translateY(-20px) rotate(720deg);opacity:0}
}

/* Container */
.container{position:relative;z-index:1;max-width:1100px;margin:0 auto;padding:20px}

/* Top nav */
.top-nav{
  position:relative;z-index:10;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
  padding:16px 24px;margin:10px auto;max-width:1100px;
  border:2px solid var(--neon-green);
  background:rgba(0,20,0,.3);
  box-shadow:0 0 15px rgba(0,255,0,.2),inset 0 0 20px rgba(0,255,0,.05);
}
.nav-logo{
  font-size:.85rem;color:var(--neon-green);text-shadow:0 0 8px var(--neon-green);
  letter-spacing:2px;
}
.nav-logo::after{content:'_';animation:blink 1s step-end infinite}
@keyframes blink{50%{opacity:0}}
.nav-links{display:flex;flex-wrap:wrap;gap:10px}
.nav-links a{
  font-size:.6rem;color:#fff;border:1px solid #555;
  padding:8px 14px;letter-spacing:1px;transition:all .25s;
}
.nav-links a:hover,.nav-links a.active{
  color:var(--neon-green);border-color:var(--neon-green);
  background:rgba(0,255,0,.08);box-shadow:0 0 10px rgba(0,255,0,.4);
}

/* Title + divider */
.arcade-title{
  font-size:clamp(1.6rem,5vw,3rem);
  color:var(--neon-green);letter-spacing:4px;text-align:center;
  text-shadow:0 0 10px var(--neon-green),0 0 20px var(--neon-green),0 0 40px #080;
  animation:titleGlow 2s ease-in-out infinite alternate;
}
@keyframes titleGlow{
  0%{text-shadow:0 0 10px var(--neon-green),0 0 20px var(--neon-green),0 0 40px #080}
  100%{text-shadow:0 0 15px var(--neon-cyan),0 0 30px var(--neon-cyan),0 0 60px #088}
}
.arcade-subtitle{text-align:center;font-size:.7rem;color:var(--text-dim);margin-top:10px;letter-spacing:2px}
.arcade-divider{
  height:4px;margin:25px auto;max-width:600px;
  background:linear-gradient(90deg,transparent,#0f0,#0ff,#f0f,#ff0,#0f0,transparent);
  background-size:200% 100%;
  animation:rainbowSlide 3s linear infinite;
}
@keyframes rainbowSlide{0%{background-position:0 0}100%{background-position:200% 0}}

/* Sections */
.section{margin:40px 0}
.section-label{
  font-size:.7rem;color:var(--neon-cyan);margin-bottom:18px;
  letter-spacing:2px;text-shadow:0 0 6px var(--neon-cyan);
}

/* Stats strip */
.stats-strip{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;
  padding:18px;border:2px solid #222;background:rgba(0,0,0,.5);
  margin:25px 0;
}
.stats-strip .stat{text-align:center;padding:8px;border-right:1px dashed #222}
.stats-strip .stat:last-child{border-right:none}
.stat-num{display:block;font-size:1.2rem;color:var(--neon-yellow);text-shadow:0 0 8px rgba(255,255,0,.5);margin-bottom:6px}
.stat-label{font-size:.5rem;color:var(--text-dim);letter-spacing:2px}

/* Card grid (shared with games.html) */
.card-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;
  padding:10px 0;
}
.arcade-card{
  background:linear-gradient(135deg,#111 0%,var(--bg-card) 100%);
  border:2px solid var(--border);
  border-radius:8px;padding:22px;
  position:relative;overflow:hidden;
  transition:all .3s;cursor:pointer;
  text-decoration:none;display:block;color:#fff;
  animation:cardIn .5s ease-out backwards;
}
.arcade-card:nth-child(1){animation-delay:.05s}
.arcade-card:nth-child(2){animation-delay:.15s}
.arcade-card:nth-child(3){animation-delay:.25s}
.arcade-card:nth-child(4){animation-delay:.35s}
.arcade-card:nth-child(5){animation-delay:.45s}
.arcade-card:nth-child(6){animation-delay:.55s}
@keyframes cardIn{
  0%{opacity:0;transform:translateY(30px) scale(.9)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
.arcade-card:hover{
  border-color:var(--accent,#0f0);
  transform:translateY(-5px) scale(1.02);
  box-shadow:0 0 25px var(--glow,rgba(0,255,0,.3)),0 10px 30px rgba(0,0,0,.5);
}
.arcade-card::before,.arcade-card::after{
  content:'';position:absolute;width:12px;height:12px;
  border-color:var(--accent,#0f0);border-style:solid;
  opacity:0;transition:opacity .3s;
}
.arcade-card::before{top:6px;left:6px;border-width:2px 0 0 2px}
.arcade-card::after{bottom:6px;right:6px;border-width:0 2px 2px 0}
.arcade-card:hover::before,.arcade-card:hover::after{opacity:1}

.card-icon{
  font-size:2.5rem;margin-bottom:12px;display:block;
  filter:drop-shadow(0 0 8px var(--glow,rgba(0,255,0,.3)));
  animation:bounce 2s ease-in-out infinite;
}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.card-title{font-size:.9rem;color:var(--accent,#0f0);text-shadow:0 0 8px var(--glow,rgba(0,255,0,.3));margin-bottom:10px;letter-spacing:1.5px}
.card-desc{font-size:.6rem;color:#aaa;line-height:1.9;font-family:'Courier New',monospace;letter-spacing:.5px}
.card-tag{
  display:inline-block;margin-top:12px;
  font-size:.5rem;padding:4px 10px;
  border:1px solid var(--accent,#0f0);color:var(--accent,#0f0);
  border-radius:3px;opacity:.8;letter-spacing:1px;
}

/* Terminal box */
.terminal-box{
  background:#000;border:2px solid var(--neon-green);
  border-radius:6px;
  box-shadow:0 0 15px rgba(0,255,0,.2),inset 0 0 30px rgba(0,255,0,.05);
  font-family:'Courier New',monospace;
  overflow:hidden;
}
.terminal-bar{
  background:#0d0d0d;border-bottom:1px solid #1a3a1a;
  padding:8px 14px;display:flex;align-items:center;gap:8px;
  font-size:.55rem;color:var(--text-dim);letter-spacing:1px;
}
.terminal-bar .dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.terminal-bar .dot.r{background:#f55}.terminal-bar .dot.y{background:#fb4}.terminal-bar .dot.g{background:#4f7}
.terminal-bar .path{margin-left:10px}
.terminal-body{padding:20px 22px;font-size:.82rem;color:#9f9;line-height:1.8}
.terminal-body .prompt{color:var(--neon-green)}
.terminal-body .cmd{color:#fff}
.terminal-body .out{color:#aaa;display:block;margin:4px 0 14px 0}
.terminal-body .comment{color:var(--text-faint)}
.terminal-body .cursor::after{content:'_';animation:blink 1s step-end infinite;color:var(--neon-green)}

/* Buttons */
.btn-neon{
  display:inline-block;padding:10px 22px;
  font-family:inherit;font-size:.65rem;letter-spacing:2px;
  background:transparent;color:var(--neon-green);
  border:2px solid var(--neon-green);cursor:pointer;
  transition:all .25s;text-decoration:none;
}
.btn-neon:hover{background:var(--neon-green);color:#000;box-shadow:0 0 15px rgba(0,255,0,.6)}

/* Footer */
.footer{text-align:center;padding:40px 0 20px;font-size:.55rem;color:#444;letter-spacing:1.5px}
.footer a{color:#888}
.footer a:hover{color:#fff}

/* Responsive */
@media(max-width:600px){
  .container,.top-nav{padding-left:12px;padding-right:12px}
  .arcade-title{font-size:1.6rem;letter-spacing:2px}
  .card-grid{grid-template-columns:1fr}
  .nav-logo{font-size:.7rem}
  .nav-links a{font-size:.5rem;padding:6px 10px}
}

/* Utility */
.center{text-align:center}
.mt-20{margin-top:20px}.mt-40{margin-top:40px}