/* NAV */
.nav{
    position:fixed;top:0;left:0;width:100%;
    z-index:var(--z-nav);
    background:rgba(5,5,5,0.88);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid var(--border-dim);
    transition:all var(--dur) ease;
}
.nav.scrolled{
    background:rgba(5,5,5,0.96);
    box-shadow:0 2px 30px rgba(0,255,65,0.06);
    border-bottom-color:var(--border);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h)}

.nav-logo{
    font-family:var(--font-pixel);font-size:1.3rem;
    letter-spacing:2px;color:var(--green);
}
.nav-links{display:flex;gap:4px}
.nav-link{
    font-family:var(--font-pixel);font-size:0.85rem;
    color:var(--text-dim);padding:8px 14px;
    border:1px solid transparent;
    transition:all var(--dur) ease;
}
.nav-link:hover,.nav-link.active{
    color:var(--green);border-color:var(--border);
    background:var(--green-glow);
}
.nav-link.active{border-color:var(--border-hover)}

.nav-right{display:flex;align-items:center;gap:20px}
.nav-status{
    display:flex;align-items:center;gap:6px;
    font-family:var(--font-pixel-sm);font-size:0.4rem;
    color:var(--text-dim);letter-spacing:2px;
}

.hamburger{display:none;flex-direction:column;gap:5px;padding:10px;z-index:var(--z-menu)}
.hamburger-line{width:24px;height:2px;background:var(--green);transition:all var(--dur) ease;transform-origin:center}
.hamburger.active .hamburger-line:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.hamburger.active .hamburger-line:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger.active .hamburger-line:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

.nav-scroll-progress{position:absolute;bottom:0;left:0;width:100%;height:2px;background:var(--bg)}
.nav-scroll-bar{height:100%;width:0;background:var(--green-dim);transition:width 0.1s linear;box-shadow:0 0 8px var(--green-glow)}

/* BOOT SCREEN */
.boot-screen{
    position:fixed;top:0;left:0;width:100%;height:100%;
    background:var(--bg);z-index:var(--z-boot);
    display:flex;align-items:center;justify-content:center;
    transition:opacity 0.8s ease,visibility 0.8s ease;
}
.boot-screen.hidden{opacity:0;visibility:hidden;pointer-events:none}
.boot-container{max-width:750px;width:90%;text-align:center}
.boot-ascii{
    font-family:var(--font-mono);
    font-size:clamp(0.28rem,1.1vw,0.62rem);
    color:var(--green);line-height:1.2;
    margin-bottom:10px;white-space:pre;text-align:center;
}
.boot-tagline{
    font-family:var(--font-pixel-sm);
    font-size:0.5rem;
    color:var(--text-dark);
    letter-spacing:4px;
    margin-bottom:30px;
}
.boot-text{
    font-family:var(--font-pixel);font-size:0.95rem;
    color:var(--green);text-align:left;
    line-height:1.9;min-height:280px;
    margin-bottom:24px;
}
.boot-text .boot-line{opacity:0;transform:translateY(5px);animation:bootLine 0.3s forwards}
.boot-progress{width:280px;height:4px;border:1px solid var(--green-dark);margin:0 auto 24px;position:relative;overflow:hidden}
.boot-progress-bar{height:100%;background:var(--green-dim);width:0;transition:width 0.3s ease;box-shadow:0 0 8px var(--green)}
.boot-skip-btn{
    font-family:var(--font-pixel);font-size:0.75rem;
    color:var(--text-dark);letter-spacing:2px;
    cursor:pointer;padding:8px 16px;
    border:1px solid var(--border-dim);
    background:transparent;
    transition:all var(--dur) ease;
}
.boot-skip-btn:hover{color:var(--green);border-color:var(--border)}

/* FLOATING */
.beep-indicator{
    position:fixed;bottom:20px;right:20px;z-index:var(--z-float);
    display:flex;align-items:center;gap:8px;
    padding:8px 14px;background:var(--bg-card);
    border:1px solid var(--border);
    font-family:var(--font-pixel-sm);font-size:0.38rem;
    color:var(--text-dim);letter-spacing:2px;
}
.beep-dot{width:5px;height:5px;border-radius:50%;background:var(--green);animation:beepPulse 2s infinite}

.sound-toggle{
    position:fixed;bottom:20px;left:20px;z-index:var(--z-float);
    padding:8px 12px;background:var(--bg-card);
    border:1px solid var(--border);
    font-family:var(--font-pixel);font-size:0.7rem;
    color:var(--text-dim);
    transition:all var(--dur) ease;
}
.sound-toggle:hover{border-color:var(--green);color:var(--green)}

.scroll-top{
    position:fixed;bottom:60px;right:20px;z-index:var(--z-float);
    width:36px;height:36px;
    background:var(--bg-card);border:1px solid var(--border);
    color:var(--green);font-family:var(--font-pixel);font-size:1.1rem;
    display:flex;align-items:center;justify-content:center;
    opacity:0;transform:translateY(10px);
    transition:all var(--dur) ease;pointer-events:none;
}
.scroll-top.visible{opacity:1;transform:translateY(0);pointer-events:all}
.scroll-top:hover{border-color:var(--green);box-shadow:0 0 12px var(--green-glow);transform:translateY(-2px)}
/* ===== MOBILE MENU BACKDROP ===== */
.nav-links.open::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: rgba(0, 0, 0, 0.6);
    z-index: -1;
}

/* ===== MOBILE NAV ACTIVE INDICATOR ===== */
.nav-links.open .nav-link {
    opacity: 0;
    animation: fadeInUp 0.3s ease forwards;
}

.nav-links.open .nav-link:nth-child(1) { animation-delay: 0.05s; }
.nav-links.open .nav-link:nth-child(2) { animation-delay: 0.1s; }
.nav-links.open .nav-link:nth-child(3) { animation-delay: 0.15s; }
.nav-links.open .nav-link:nth-child(4) { animation-delay: 0.2s; }
.nav-links.open .nav-link:nth-child(5) { animation-delay: 0.25s; }