/* Starfield background */
body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    font-family: 'Comic Neue', 'Comic Sans MS', sans-serif;
    color: #00ffff;
    background: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow-x: hidden;
}

/* star layers */
body::before, body::after {
    display: none;
        content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    background: transparent url("data:image/svg+xml,%3Csvg width='2' height='2' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='1' cy='1' r='1' fill='white'/%3E%3C/svg%3E") repeat;
    opacity: 0.4;
    animation: starMove 120s linear infinite;
    pointer-events: none;
    z-index: -2;
}
body::after {
    opacity: 0.2;
    animation-duration: 200s;
    transform: translate3d(-25%, -25%, 0) scale(1.5);
    z-index: -3;
}
@keyframes starMove {
    from { transform: translate3d(0,0,0); }
    to   { transform: translate3d(-50%, -50%, 0); }
}

/* HUD */
.hud {
    position: absolute;
    top: 10px;
    font-size: 12px;
    text-align: center;
    line-height: 1.2;
}
.hud-left { left: 10px; }
.hud-right { right: 10px; }
.hud-label { color: #00ffff; }
.hud-value { color: #00ff00; font-weight: bold; }

/* Neon title */
.title-neon.scanlines::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.15) 2px,
      rgba(0, 0, 0, 0.15) 4px
    );
    pointer-events: none;
    mix-blend-mode: multiply;
}

/* Neon title */
.title-neon {
    margin: 0 0 10px;
    font-family: 'Comic Neue', 'Comic Sans MS', sans-serif;
    font-size: 48px;
    color: #00ff00;
    text-shadow: 0 0 8px #00ff00, 0 0 20px #00ff00, 0 0 40px #00ff00;
    letter-spacing: 2px;
    text-align: center;
}
.tagline-neon {
    margin: 0 0 6px;
    font-size: 18px;
    color: #00ff00;
    text-shadow: 0 0 6px #00ff00, 0 0 12px #00ff00, 0 0 24px #00ff00;
    letter-spacing: 1px;
    text-transform: none;
}

.subtitle-neon {
    margin: 0 0 20px;
    font-size: 10px;
    color: #00ffff;
    text-shadow: 0 0 6px #00ff88;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Menu container */
.menu-box {
    width: 90%;
    max-width: 500px;
    border: 2px solid #00ff00;
    box-shadow: 0 0 12px #00ff00, inset 0 0 12px #00ff00;
    padding: 20px 20px 20px 0;
    background: rgba(0,0,0,0.4);
}

/* Glow border utility for other elements */
.glow-border {
    border: 2px solid #00ff00;
    box-shadow: 0 0 12px #00ff00, inset 0 0 12px #00ff00;
}

.menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.menu-list li {
    display: block;
    padding-left: 3%;
    margin-bottom: 24px;
}
.game-name {
    font-size: 14px;
    color: #00ffff;
    display: block;
    padding-left: 2%;
}
.game-desc {
    color: #00ffff;
    display: block;
    font-size: 9px;
    padding-left: 2%;
    max-width:none;
}


/* Menu overrides */
.menu-link{display:flex;justify-content:space-between;align-items:center;width:100%;padding:12px 0;border:2px solid transparent;transition:border .2s,box-shadow .2s;cursor:pointer;text-decoration:none;color:inherit;}
.menu-link:hover{border:2px solid #00ff00;box-shadow:0 0 8px #00ff00,inset 0 0 8px #00ff00;}
.menu-link:hover .game-name{color:#00ff00;text-shadow:0 0 6px #00ff00,0 0 12px #00ff00,0 0 24px #00ff00;transform:scale(1.1);} 
.menu-link:hover .game-name::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.15) 2px,rgba(0,0,0,0.15) 4px);pointer-events:none;mix-blend-mode:multiply;}
.menu-link:hover .play-label{color:#ff00ff;text-shadow:0 0 6px #ff00ff,0 0 12px #ff00ff,0 0 24px #ff00ff;}
.menu-link .game-name{position:relative;transition:all .2s;transform-origin:left center;}
.play-label{transition:all .2s;}
.menu-heading{font-size:11px;color:#00ffff;margin:0;text-transform:uppercase;}
.menu-title{display:flex;align-items:center;margin:0 2% 6px;gap:4px;}
.menu-divider{height:1px;background:#00ffff;opacity:0.3;margin:4px 2% 12px;border:none;}
.menu-list{list-style:none;margin:0;padding:0;}
.menu-list li{margin:0 0 24px;}
.item-text{flex:1;min-width:0;display:flex;flex-direction:column;}
.game-name{color:#00ffff;font-size:16px;}
.game-desc{color:#00ffff;font-size:11px;margin-top:4px;white-space:nowrap;max-width:none;}
.play-label{color:#00ffff;font-size:12px;padding-right:8px;}


/* Footer tip */
.copyright-line {
    position: fixed;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
}
.footer-tip {
    margin-top: 40px;
    font-size: 8px;
    letter-spacing: 1px;
}

/* Starfield generated via JS */
#starfield{position:fixed;top:0;left:0;width:100%;height:100%;overflow:hidden;z-index:-1;pointer-events:none;}
.stars-layer{position:absolute;top:-100%;left:0;width:100%;height:200%;}
.layer1{animation:drift 120s linear infinite;}
.layer2{animation:drift 240s linear infinite;}
.layer3{animation:drift 360s linear infinite;}
.layer2 .star{opacity:0.6;}
.layer3 .star{opacity:0.3;}
.star{position:absolute;background:#ffffff;border-radius:50%;opacity:0.8;animation:twinkle 3s ease-in-out infinite;}
@keyframes twinkle{0%,100%{opacity:0.2;}50%{opacity:1;}}
@keyframes drift{from{transform:translateY(0);}to{transform:translateY(100%);}}

/* Green glow block (no scanlines) */
.glow-block-green{display:inline-block;width:11px;height:11px;background:#00ff00;box-shadow:0 0 4px #00ff00,0 0 8px #00ff00;vertical-align:middle;margin-right:4px;position:relative;}
.glow-block-green::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,0.3) 2px 4px);pointer-events:none;mix-blend-mode:multiply;}

/* Green glow scanline block */
.scan-block-green{display:inline-block;width:11px;height:11px;background:#00ff00;box-shadow:0 0 4px #00ff00,0 0 8px #00ff00;position:relative;vertical-align:middle;margin-right:4px;}
.scan-block-green::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,0.3) 2px 4px);pointer-events:none;mix-blend-mode:multiply;}

/* Neon utility classes */
/* Scanlines overlay */
.scanlines {
    position: relative;
}
.scanlines::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.15) 2px,
      rgba(0, 0, 0, 0.15) 4px
    );
    pointer-events: none;
    mix-blend-mode: multiply;
}

/* Glow colour variants */
.glow-green {
    color: #00ffff;
    text-shadow: 0 0 5px #00ff88, 0 0 10px #00ff88, 0 0 20px #00ff88, 0 0 40px #00ff88;
}
.glow-cyan {
    color: #00ffff;
    text-shadow: 0 0 5px #00ffff, 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 40px #00ffff;
}
.glow-magenta {
    color: #ff00ff;
    text-shadow: 0 0 5px #ff00ff, 0 0 10px #ff00ff, 0 0 20px #ff00ff, 0 0 40px #ff00ff;
}
.neon-text {
    text-shadow: 0 0 5px #00ff88, 0 0 10px #00ff88, 0 0 20px #00ff88, 0 0 40px #00ff88;
}
.neon-text-cyan {
    text-shadow: 0 0 5px #00ffff, 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 40px #00ffff;
}
.neon-text-magenta {
    text-shadow: 0 0 5px #ff00ff, 0 0 10px #ff00ff, 0 0 20px #ff00ff, 0 0 40px #ff00ff;
}
.font-retro { font-family: 'Comic Neue', 'Comic Sans MS', sans-serif; }

/* Responsive */
@media (max-width: 1024px), (max-height: 800px) {
    .title-neon { font-size: 36px; }
    .tagline-neon { font-size: 16px; }
    .subtitle-neon { font-size: 9px; }
    .menu-box { padding: 18px 12px; max-height: 70vh; overflow-y: auto; }
    .menu-list li { margin-bottom: 18px; }
    .game-name { font-size: 14px; }
    .game-desc { font-size: 10px; }
}

@media (max-width: 480px) {
    .title-neon { font-size: 28px; }
    .tagline-neon { font-size: 14px; }
    .subtitle-neon { font-size: 8px; }
    .menu-box { padding: 12px 8px; max-height: 70vh; overflow-y: auto; }
    .game-name { font-size: 12px; }
    .game-desc { font-size: 9px; }
}