/* =========================================
   CORE & BACKGROUNDS
   ========================================= */
body { background-color: #030305; color: #fff; cursor: none; -webkit-tap-highlight-color: transparent; }
a, button, .hoverable { cursor: none; }

/* Custom Cursor */
#cursor-dot { position: fixed; pointer-events: none; transform: translate(-50%, -50%); }
#cursor-outline { position: fixed; pointer-events: none; transform: translate(-50%, -50%); }

/* Scroll Progress */
#scroll-progress { position: fixed; top: 0; left: 0; height: 3px; z-index: 10001; }

.perspective-container { perspective: 1000px; }
.tech-background { background-color: #030305; }

/* Mobile Optimizations */
@media (max-width: 768px) {
    .mobile-hide { display: none !important; }
    .mobile-hide-btn { display: none !important; }
    body, a, button, .hoverable { cursor: auto !important; }
    .js-tilt { transform: none !important; }
    .mobile-reduced { animation: none !important; opacity: 0.1 !important; }
}

.grid-line {
    position: absolute; width: 200%; height: 200%; top: -50%; left: -50%;
    background-image: linear-gradient(rgba(99, 102, 241, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(99, 102, 241, 0.1) 1px, transparent 1px);
    background-size: 50px 50px;
    transform: perspective(500px) rotateX(60deg);
    animation: grid-move 20s linear infinite;
    opacity: 0.4;
}
@keyframes grid-move {
    0% { transform: perspective(500px) rotateX(60deg) translateY(0); }
    100% { transform: perspective(500px) rotateX(60deg) translateY(50px); }
}
.vignette { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, transparent 0%, #030305 90%); }
.js-tilt { transition: transform 0.1s ease-out; will-change: transform; transform-style: preserve-3d; }
.project-wrapper { perspective: 1000px; }

/* =========================================
   UI COMPONENTS
   ========================================= */
.access-btn {
    display: flex; align-items: center; gap: 12px;
    padding: 10px; border-radius: 10px;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05);
    color: #94a3b8; font-size: 0.85rem; font-weight: 600;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.access-btn:hover {
    background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2);
    color: white; transform: translateX(4px);
}
.access-btn .icon-box {
    width: 28px; height: 28px; border-radius: 6px;
    background: rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center;
}
.access-btn.active { background: rgba(99, 102, 241, 0.15); border-color: #6366f1; color: white; }
.access-btn.active .icon-box { background: #6366f1; color: white; }
.access-btn .status-dot { width: 6px; height: 6px; border-radius: 50%; background: #334155; transition: 0.3s; margin-left: auto; }
.access-btn.active .status-dot { background: #00ff9d; box-shadow: 0 0 8px #00ff9d; }

.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 10px; }

.theme-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    height: 80px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.03); cursor: none; transition: all 0.3s ease;
    position: relative; overflow: hidden;
}
.theme-card:hover { transform: translateY(-3px); border-color: rgba(255,255,255,0.3); }
.theme-card.locked { opacity: 0.4; pointer-events: none; filter: grayscale(1); }
.theme-card.active { border-color: #6366f1; box-shadow: 0 0 15px rgba(99, 102, 241, 0.3); }
.theme-card .preview { width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0.3; z-index: 0; }
.theme-card span { position: relative; z-index: 1; font-size: 0.7rem; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; text-shadow: 0 2px 4px rgba(0,0,0,0.8); }

.project-card {
    background: rgba(10, 10, 12, 0.6); backdrop-filter: blur(10px); border-radius: 16px;
    overflow: hidden; box-shadow: 0 10px 40px -10px rgba(0,0,0,0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.project-card:hover { transform: translateY(-10px); box-shadow: 0 20px 50px -10px rgba(99, 102, 241, 0.2); }

/* =========================================
   UTILITIES & ANIMATIONS
   ========================================= */
#overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 9999; opacity: 0; pointer-events: none; transition: opacity 0.5s; }
#overlay.active { opacity: 1; pointer-events: all; }

/* TRANSITIONS ANIMATIONS PER THEME */
#overlay.trans-matrix { background: #000; transform: scaleY(0); transform-origin: top; border-bottom: 5px solid #00ff41; opacity: 1; }
#overlay.trans-matrix.active { transform: scaleY(1); transition: transform 0.4s cubic-bezier(0.4, 0, 1, 1); }

#overlay.trans-retro { background: #1a1000; opacity: 0; transition: none; }
#overlay.trans-retro.active { opacity: 1; animation: turn-off 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards; }
@keyframes turn-off {
    0% { transform: scale(1, 1.3) translate3d(0, 0, 0); filter: brightness(1); }
    60% { transform: scale(1, 0.001) translate3d(0, 0, 0); filter: brightness(10); }
    100% { transform: scale(0, 0.001) translate3d(0, 0, 0); filter: brightness(0); }
}
#overlay.trans-cyber { background: #fcee0a; transform: translateX(-100%) skewX(-10deg); opacity: 1; }
#overlay.trans-cyber.active { transform: translateX(0) skewX(0deg); transition: transform 0.4s cubic-bezier(0.7, 0, 0.3, 1); }
#overlay.trans-sakura { background: #fce7f3; opacity: 0; backdrop-filter: blur(0px); }
#overlay.trans-sakura.active { opacity: 1; backdrop-filter: blur(20px); transition: all 0.8s ease; }
#overlay.trans-inferno { background: linear-gradient(to top, #ff4500, #000); transform: translateY(100%); opacity: 1; }
#overlay.trans-inferno.active { transform: translateY(0); transition: transform 0.6s ease-in-out; }
#overlay.trans-bdj { background: #1F3C5C; transform: scale(0.1); border-radius: 100%; opacity: 0; }
#overlay.trans-bdj.active { transform: scale(2); opacity: 1; border-radius: 0; transition: transform 0.6s cubic-bezier(0.7, 0, 0.3, 1), opacity 0.1s; }


#content-wrapper.high-contrast { filter: contrast(1.5) saturate(1.5); }
#content-wrapper.inverted { filter: invert(1) hue-rotate(180deg); }

.skill-pill {
    display: flex; align-items: center; gap: 10px; padding: 10px 20px;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 50px; transition: all 0.3s ease; cursor: default;
}
.skill-pill:hover { background: rgba(99, 102, 241, 0.15); border-color: rgba(99, 102, 241, 0.4); transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.3); }
.skill-pill img { width: 24px; height: 24px; transition: 0.3s; }
.skill-pill:hover img { transform: scale(1.2); }
.ue-icon img.invert { filter: invert(1); }


/* =========================================
   THEMES & CUSTOM MENUS
   ========================================= */

/* 1. LIGHT MODE */
body.light-mode { background-color: #f1f5f9; color: #0f172a; }
body.light-mode .tech-background { background-color: #f8fafc; }
body.light-mode .grid-line { background-image: linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px); opacity: 1; }
body.light-mode .vignette { background: radial-gradient(circle at 50% 50%, transparent 0%, #f1f5f9 90%); opacity: 0.6; }
body.light-mode h1, body.light-mode h2, body.light-mode h3 { color: #1e293b; }
body.light-mode p, body.light-mode span { color: #475569; }
body.light-mode .text-highlight { color: #2563eb !important; }
body.light-mode .bg-ninja-card { background-color: #ffffff; border-color: #e2e8f0; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
body.light-mode .ue-icon img { filter: invert(0); }
body.light-mode .menu-content, body.light-mode .theme-content { background: rgba(255,255,255,0.95); border-color: #cbd5e1; color: #0f172a; }
body.light-mode .access-btn { background: #f1f5f9; color: #334155; border-color: #e2e8f0; }
body.light-mode .access-btn:hover { background: #e0e7ff; }
body.light-mode .menu-toggle, body.light-mode .theme-toggle { background: white; color: #6366f1; border-color: #cbd5e1; }
body.light-mode .hero-btn { background: #fff; color: #4f46e5; border-color: #e2e8f0; }
body.light-mode .header-line { background: #cbd5e1; }
body.light-mode .skill-pill { background: #fff; border-color: #cbd5e1; color: #334155; }
body.light-mode .text-gray-400 { color: #64748b; }
body.light-mode #scroll-progress { background-color: #4f46e5; }
body.light-mode #cursor-dot, body.light-mode #cursor-outline { mix-blend-mode: normal; border-color: #000; background-color: #000; }
body.light-mode #cursor-outline { background-color: transparent; }
body.light-mode .theme-card { border-color: #cbd5e1; background: #fff; color: #334155; }
body.light-mode .theme-card:hover { background: #f8fafc; }
body.light-mode .project-card { background: #ffffff; border-color: #e2e8f0; color: #0f172a; box-shadow: 0 4px 20px rgba(0,0,0,0.05); }
body.light-mode .project-card h3 { color: #1e293b; }
body.light-mode .project-card p { color: #475569; }
body.light-mode .project-card .border-t { border-color: #e2e8f0; }
/* LIGHT MODE BUTTON FIXES */
body.light-mode .project-card .external { background: #4f46e5 !important; color: #ffffff !important; border: none !important; box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important; font-weight: 700; padding: 6px 12px; border-radius: 8px; }
body.light-mode .project-card .external:hover { background: #4338ca !important; transform: translateY(-2px); box-shadow: 0 6px 8px rgba(0,0,0,0.15) !important; }
body.light-mode .hero-btn { background: #4f46e5 !important; color: #ffffff !important; border: none !important; box-shadow: 0 10px 20px rgba(79, 70, 229, 0.3) !important; font-weight: 700; }
body.light-mode .hero-btn:hover { background: #4338ca !important; transform: translateY(-2px); }

/* 2. MATRIX MODE */
body.matrix-mode { background-color: #000; color: #00ff41; font-family: 'Space Grotesk', monospace; }
body.matrix-mode .tech-background, body.matrix-mode #realistic-bg, body.matrix-mode #cyber-bg, body.matrix-mode #vapor-bg, body.matrix-mode #retro-bg, body.matrix-mode #blueprint-bg, body.matrix-mode #ninja-bg, body.matrix-mode #bdj-bg, body.matrix-mode #art-bg, body.matrix-mode #ksek-bg, body.matrix-mode #nozu-bg { opacity: 0; }
body.matrix-mode .bg-ninja-card { background-color: rgba(0,10,0,0.95); border-color: #00ff41; }
body.matrix-mode img { filter: grayscale(100%) sepia(100%) hue-rotate(90deg) saturate(300%) contrast(1.2); opacity: 0.8; }
body.matrix-mode .hero-btn { border-color: #00ff41; color: #00ff41; box-shadow: 0 0 10px rgba(0,255,65,0.3); }
body.matrix-mode .hero-btn:hover { background: #00ff41; color: black; }
body.matrix-mode .text-transparent { -webkit-text-fill-color: #00ff41; }
body.matrix-mode .menu-toggle, body.matrix-mode .theme-toggle { background: black; border-color: #00ff41; color: #00ff41; }
body.matrix-mode .badge { background: #00ff41 !important; color: black !important; }
body.matrix-mode .header-line { background: #00ff41; }
body.matrix-mode #scroll-progress, body.matrix-mode #cursor-dot { background-color: #00ff41; }
body.matrix-mode #cursor-outline { border-color: #00ff41; }
body.matrix-mode .menu-content, body.matrix-mode .theme-content { background: rgba(0, 20, 0, 0.95); border: 1px solid #00ff41; box-shadow: 0 0 20px rgba(0, 255, 65, 0.2); }
body.matrix-mode .access-btn { border-color: #00ff41; color: #00ff41; }
body.matrix-mode .access-btn:hover { background: #00ff41; color: #000; }

/* 3. REALISTIC MODE */
body.realistic-mode { font-family: 'Cinzel', serif; color: #f8fafc; }
body.realistic-mode .tech-background, body.realistic-mode #matrix-canvas { display: none; }
body.realistic-mode #realistic-bg { opacity: 1; }
body.realistic-mode .bg-ninja-card { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.2); }
body.realistic-mode .text-ninja-accent { color: #fbbf24 !important; -webkit-text-fill-color: #fbbf24 !important; }
body.realistic-mode .hero-btn { background: rgba(251, 191, 36, 0.2); border-color: #fbbf24; color: #fbbf24; }
body.realistic-mode .hero-btn:hover { background: #fbbf24; color: black; }
body.realistic-mode .header-line { background: #fbbf24; }
body.realistic-mode #scroll-progress { background-color: #fbbf24; }

/* 4. CYBERPUNK MODE */
body.cyber-mode { background-color: #0a0a0a; color: #fcee0a; font-family: 'Share Tech Mono', monospace; }
body.cyber-mode #cyber-bg { opacity: 1; }
body.cyber-mode .tech-background, body.cyber-mode #matrix-canvas { display: none; }
body.cyber-mode h1, body.cyber-mode h2, body.cyber-mode h3 { color: #fcee0a !important; text-transform: uppercase; letter-spacing: 2px; text-shadow: 2px 2px 0px #00ffff; }
body.cyber-mode p, body.cyber-mode span { color: #00ffff !important; }
body.cyber-mode .text-transparent { -webkit-text-fill-color: #fcee0a !important; }
body.cyber-mode .bg-ninja-card { background: rgba(10, 10, 10, 0.9); border: 2px solid #fcee0a; clip-path: polygon(0 0, 100% 0, 100% 85%, 90% 100%, 0 100%); box-shadow: 5px 5px 0px #00ffff; }
body.cyber-mode .hero-btn { background: #fcee0a; color: #000; border: none; clip-path: polygon(0 0, 90% 0, 100% 100%, 10% 100%); font-weight: 900; padding-left: 40px; padding-right: 40px; }
body.cyber-mode .hero-btn:hover { background: #00ffff; color: #000; transform: translate(-2px, -2px); }
body.cyber-mode .menu-toggle, body.cyber-mode .theme-toggle { background: #000; color: #fcee0a; border: 2px solid #fcee0a; }
body.cyber-mode .badge { background: #fcee0a !important; color: #000 !important; border: 1px solid #fcee0a; }
body.cyber-mode #scroll-progress { background-color: #fcee0a; }
body.cyber-mode #cursor-dot { background-color: #fcee0a; }
body.cyber-mode #cursor-outline { border-color: #00ffff; border-radius: 0; }
body.cyber-mode .menu-content, body.cyber-mode .theme-content { background: #0a0a0a; border: 2px solid #fcee0a; border-radius: 0; clip-path: polygon(0 0, 100% 0, 100% 95%, 95% 100%, 0 100%); }
body.cyber-mode .access-btn { border: 1px solid #fcee0a; color: #fcee0a; border-radius: 0; }
body.cyber-mode .access-btn:hover { background: #fcee0a; color: #000; }

/* 5. VAPORWAVE MODE */
body.vapor-mode { color: #fff; font-family: 'Comfortaa', cursive; }
body.vapor-mode #vapor-bg { opacity: 1; }
body.vapor-mode .tech-background, body.vapor-mode #matrix-canvas { display: none; }
body.vapor-mode .bg-ninja-card { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 20px; box-shadow: 0 10px 30px rgba(255, 0, 255, 0.3); }
body.vapor-mode .hero-btn { background: linear-gradient(45deg, #ff71ce, #01cdfe); border: none; border-radius: 30px; box-shadow: 0 5px 20px rgba(255, 113, 206, 0.6); }
body.vapor-mode h1 { text-shadow: 3px 3px 0px #01cdfe; font-style: italic; }
body.vapor-mode .text-ninja-accent { color: #fff !important; -webkit-text-fill-color: #fff !important; }
body.vapor-mode .header-line { background: linear-gradient(90deg, #ff71ce, #01cdfe); }
body.vapor-mode #scroll-progress { background: linear-gradient(90deg, #ff71ce, #01cdfe); }
body.vapor-mode #cursor-dot { background-color: #ff71ce; }
body.vapor-mode #cursor-outline { border-color: #01cdfe; }
body.vapor-mode .menu-content, body.vapor-mode .theme-content { background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(20px); border: 1px solid #ff71ce; border-radius: 20px; }
body.vapor-mode .access-btn { border: 1px solid #01cdfe; color: #fff; }
body.vapor-mode .access-btn:hover { background: #ff71ce; }

/* 6. RETRO CRT MODE */
body.retro-mode { background-color: #1a1000; color: #ffb000; font-family: 'VT323', monospace; text-shadow: 0 0 5px #ffb000; }
body.retro-mode #retro-bg { opacity: 1; }
body.retro-mode .tech-background { display: none; }
body.retro-mode h1, body.retro-mode h2, body.retro-mode h3, body.retro-mode p, body.retro-mode span { color: #ffb000 !important; -webkit-text-fill-color: #ffb000 !important; }
body.retro-mode .bg-ninja-card { background: rgba(26, 16, 0, 0.9); border: 1px solid #ffb000; box-shadow: 0 0 10px #ffb000; }
body.retro-mode .hero-btn { background: transparent; border: 2px solid #ffb000; color: #ffb000; }
body.retro-mode .hero-btn:hover { background: #ffb000; color: #1a1000; }
body.retro-mode img { filter: sepia(100%) hue-rotate(-30deg) saturate(200%) contrast(1.2); mix-blend-mode: luminosity; }
body.retro-mode .menu-toggle, body.retro-mode .theme-toggle { border-color: #ffb000; color: #ffb000; background: #1a1000; }
body.retro-mode .header-line { background: #ffb000; }
body.retro-mode #scroll-progress { background-color: #ffb000; }
body.retro-mode .menu-content, body.retro-mode .theme-content { background: #1a1000; border: 2px solid #ffb000; border-radius: 4px; }
body.retro-mode .access-btn { border: 1px solid #ffb000; color: #ffb000; }
body.retro-mode .access-btn:hover { background: #ffb000; color: #1a1000; }

/* 7. BLUEPRINT MODE */
body.blueprint-mode { color: #fff; font-family: 'Share Tech Mono', monospace; }
body.blueprint-mode #blueprint-bg { opacity: 1; }
body.blueprint-mode .tech-background { display: none; }
body.blueprint-mode .bg-ninja-card { background: transparent; border: 2px dashed rgba(255,255,255,0.5); border-radius: 0; }
body.blueprint-mode h1, body.blueprint-mode h2, body.blueprint-mode h3 { text-transform: uppercase; letter-spacing: 2px; }
body.blueprint-mode .hero-btn { border: 2px solid white; border-radius: 0; background: transparent; }
body.blueprint-mode .hero-btn:hover { background: white; color: #0052cc; }
body.blueprint-mode .badge { border-radius: 0; background: white !important; color: #0052cc !important; }
body.blueprint-mode .menu-toggle, body.blueprint-mode .theme-toggle { border-radius: 0; border: 1px solid white; background: #0052cc; }
body.blueprint-mode .header-line { background: white; border-bottom: 1px dashed #0052cc; height: 2px; }
body.blueprint-mode #scroll-progress { background-color: #fff; }

/* 8. ZENITH MODE */
body.zenith-mode { background-color: #000; color: #fff; font-family: 'Outfit', sans-serif; }
body.zenith-mode .tech-background, body.zenith-mode #bg-layer > div { opacity: 0; }
body.zenith-mode .bg-ninja-card { background: #000; border: 1px solid #333; }
body.zenith-mode img { filter: grayscale(100%) contrast(1.5); }
body.zenith-mode .text-transparent { -webkit-text-fill-color: #fff; }
body.zenith-mode .hero-btn { border: 1px solid #fff; color: #fff; background: #000; }
body.zenith-mode .hero-btn:hover { background: #fff; color: #000; }
body.zenith-mode .header-line { background: #333; }
body.zenith-mode #scroll-progress { background-color: #333; }

/* 9. TERMINAL MODE */
body.terminal-mode { background-color: #0c0c0c; color: #33ff00; font-family: 'VT323', monospace; }
body.terminal-mode #terminal-bg { opacity: 1; }
body.terminal-mode .tech-background, body.terminal-mode #matrix-canvas { display: none; }
body.terminal-mode .bg-ninja-card { background: #000; border: 1px solid #33ff00; border-radius: 0; }
body.terminal-mode h1, body.terminal-mode h2, body.terminal-mode h3, body.terminal-mode p { color: #33ff00 !important; -webkit-text-fill-color: #33ff00 !important; }
body.terminal-mode .hero-btn { border: 1px solid #33ff00; color: #33ff00; background: transparent; border-radius: 0; }
body.terminal-mode .hero-btn:hover { background: #33ff00; color: #000; }
body.terminal-mode img { filter: grayscale(100%) sepia(100%) hue-rotate(50deg) saturate(300%); }
body.terminal-mode #cursor-dot { background: #33ff00; }
body.terminal-mode #cursor-outline { border-color: #33ff00; border-radius: 0; }

/* 10. SAKURA MODE */
body.sakura-mode { color: #881337; font-family: 'Comfortaa', cursive; }
body.sakura-mode #sakura-canvas, body.sakura-mode #sakura-bg { opacity: 1; }
body.sakura-mode .tech-background { display: none; }
body.sakura-mode .bg-ninja-card { background: rgba(255, 255, 255, 0.7); border: 1px solid #fbcfe8; backdrop-filter: blur(5px); }
body.sakura-mode h1 { color: #db2777 !important; }
body.sakura-mode .text-transparent { -webkit-text-fill-color: #db2777 !important; }
body.sakura-mode .hero-btn { background: #fce7f3; color: #be185d; border: 1px solid #fbcfe8; }
body.sakura-mode .hero-btn:hover { background: #fbcfe8; }
body.sakura-mode #scroll-progress { background: #f472b6; }
body.sakura-mode #cursor-dot { background: #db2777; }
body.sakura-mode .menu-content, body.sakura-mode .theme-content { background: rgba(255, 255, 255, 0.9); border: 1px solid #fbcfe8; border-radius: 20px; }
body.sakura-mode .access-btn { background: #fce7f3; color: #db2777; }
body.sakura-mode .access-btn:hover { background: #fbcfe8; }

/* 11. VOLTAGE MODE */
body.voltage-mode { background: #050505; color: #00f3ff; font-family: 'Share Tech Mono', monospace; }
body.voltage-mode #voltage-bg { opacity: 1; }
body.voltage-mode .tech-background { display: none; }
body.voltage-mode .bg-ninja-card { background: #000; border: 1px solid #00f3ff; box-shadow: 0 0 15px #00f3ff; }
body.voltage-mode .hero-btn { background: transparent; border: 2px solid #00f3ff; color: #00f3ff; box-shadow: 0 0 10px #00f3ff; }
body.voltage-mode .hero-btn:hover { background: #00f3ff; color: #000; box-shadow: 0 0 30px #00f3ff; }
body.voltage-mode .text-transparent { -webkit-text-fill-color: #00f3ff !important; text-shadow: 0 0 10px #00f3ff; }
body.voltage-mode #cursor-dot { background: #fff; }
body.voltage-mode #cursor-outline { border-color: #00f3ff; box-shadow: 0 0 10px #00f3ff; }

/* 12. INFERNO MODE */
body.inferno-mode { background-color: #1a0505; color: #ff4500; font-family: 'Creepster', cursive; letter-spacing: 1px; }
body.inferno-mode #inferno-bg, body.inferno-mode #inferno-canvas { opacity: 1; }
body.inferno-mode .tech-background { display: none; }
body.inferno-mode .bg-ninja-card { background: rgba(10, 0, 0, 0.9); border: 2px solid #ff4500; box-shadow: 0 0 20px #ff0000; border-radius: 0; }
body.inferno-mode h1, body.inferno-mode h2, body.inferno-mode h3 { color: #ff0000 !important; text-shadow: 0 0 10px #ff4500; text-transform: uppercase; }
body.inferno-mode .text-transparent { -webkit-text-fill-color: #ff4500 !important; }
body.inferno-mode .hero-btn { background: #3a0000; border: 2px solid #ff0000; color: #ff4500; }
body.inferno-mode .hero-btn:hover { background: #ff0000; color: #000; box-shadow: 0 0 40px #ff0000; }
body.inferno-mode .menu-toggle, body.inferno-mode .theme-toggle { background: #1a0000; border: 1px solid #ff0000; color: #ff4500; }
body.inferno-mode #scroll-progress { background: linear-gradient(to right, #ff0000, #ff4500); }
body.inferno-mode #cursor-dot { background: #ff0000; }
body.inferno-mode #cursor-outline { border-color: #ff4500; box-shadow: 0 0 10px #ff0000; }
body.inferno-mode .menu-content, body.inferno-mode .theme-content { background: #1a0000; border: 2px solid #ff4500; border-radius: 0; box-shadow: 0 0 15px #ff0000; }
body.inferno-mode .access-btn { color: #ff4500; border-color: #ff4500; }
body.inferno-mode .access-btn:hover { background: #ff4500; color: #000; }

/* 13. FROSTBITE MODE */
body.frost-mode { color: #e0f2fe; font-family: 'Iceland', sans-serif; }
body.frost-mode #frost-bg, body.frost-mode #frost-canvas { opacity: 1; }
body.frost-mode .tech-background { display: none; }
body.frost-mode .bg-ninja-card { background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); border: 1px solid #7dd3fc; box-shadow: 0 0 15px rgba(125,211,252,0.3); }
body.frost-mode h1, body.frost-mode h2 { color: #bae6fd !important; text-shadow: 0 0 5px #7dd3fc; }
body.frost-mode .hero-btn { background: rgba(125,211,252,0.2); border: 1px solid #bae6fd; color: #e0f2fe; }
body.frost-mode #scroll-progress { background: #7dd3fc; }
body.frost-mode #cursor-dot { background: #bae6fd; }

/* 14. RGB MODE */
body.rgb-mode { background: #000; font-family: 'Orbitron', sans-serif; }
body.rgb-mode #rgb-bg { opacity: 1; }
body.rgb-mode .tech-background { display: none; }
body.rgb-mode .bg-ninja-card { border: 2px solid transparent; border-image: linear-gradient(45deg, #ff0000, #00ff00, #0000ff) 1; background: #111; animation: rgb-border 2s linear infinite; }
body.rgb-mode .hero-btn { background: linear-gradient(90deg, #ff0000, #00ff00, #0000ff); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; border: 2px solid white; font-weight: bold; }
body.rgb-mode h1 { background: linear-gradient(90deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: rgb-border 5s linear infinite; }
body.rgb-mode #cursor-dot { background: white; mix-blend-mode: difference; }

/* 15. MIDNIGHT MODE */
body.midnight-mode { background-color: #020402; color: #00ff00; font-family: 'Share Tech Mono', monospace; }
body.midnight-mode #midnight-bg { opacity: 1; }
body.midnight-mode .tech-background { display: none; }
body.midnight-mode .bg-ninja-card { background: rgba(0,20,0,0.8); border: 1px solid #003300; box-shadow: inset 0 0 20px rgba(0,50,0,0.5); }
body.midnight-mode .hero-btn { border: 1px solid #00ff00; color: #00ff00; background: transparent; letter-spacing: 2px; }
body.midnight-mode .hero-btn:hover { background: #003300; }
body.midnight-mode img { filter: grayscale(100%) sepia(100%) hue-rotate(90deg) saturate(300%) brightness(0.7); }
body.midnight-mode #cursor-outline { border-color: #00ff00; border-radius: 0; border-style: dashed; }

/* ==========================================================
   THE "BIG 6" ULTRA CUSTOM THEMES (BEST IN THE WORLD)
   ========================================================== */

/* 16. NINJA MODE (ULTRA) - THE DEV */
body.ninja-mode { background-color: #080808; color: #e5e5e5; font-family: 'Noto Sans JP', sans-serif; }
body.ninja-mode #ninja-bg, body.ninja-mode #ninja-canvas { opacity: 1; }
body.ninja-mode .tech-background { display: none; }
body.ninja-mode .bg-ninja-card { background: rgba(10,10,10,0.95); border: 1px solid #333; box-shadow: 0 20px 50px rgba(0,0,0,0.9); }
body.ninja-mode h1, body.ninja-mode h2 { color: #fff; letter-spacing: 4px; text-transform: uppercase; border-left: 5px solid #fff; padding-left: 20px; }
body.ninja-mode .text-transparent { -webkit-text-fill-color: #fff !important; }
body.ninja-mode .hero-btn { background: #000; border: 1px solid #fff; color: #fff; text-transform: uppercase; font-weight: 900; letter-spacing: 2px; }
body.ninja-mode .hero-btn:hover { background: #fff; color: #000; box-shadow: 0 0 20px rgba(255,255,255,0.5); }
body.ninja-mode #cursor-dot { background: #fff; border-radius: 0; transform: rotate(45deg); }
body.ninja-mode #cursor-outline { border-radius: 0; border-color: #fff; transform: rotate(45deg); }
body.ninja-mode .header-line { background: #fff; height: 2px; }
body.ninja-mode .skill-pill { border: 1px solid #333; background: #000; color: #fff; border-radius: 0; }

/* =========================================
   17. BDJ MODE (MUSIC)
   ========================================= */
body.bdj-mode { 
    background: #1F3C5C; 
    color: #C8C6D7; 
    font-family: 'Orbitron', sans-serif; 
}
body.bdj-mode #bdj-canvas { opacity: 1; }
body.bdj-mode .tech-background { display: none; }
body.bdj-mode .bg-ninja-card { 
    background: rgba(31, 60, 92, 0.95); 
    border: 1px solid #C16125; 
    box-shadow: 0 0 25px rgba(193, 97, 37, 0.2); 
}
body.bdj-mode .hero-btn { 
    background: #C16125; 
    color: #fff; 
    border: none; 
    box-shadow: 0 0 15px rgba(193, 97, 37, 0.5); 
}
body.bdj-mode .hero-btn:hover { 
    background: #fff; 
    color: #C16125; 
}
body.bdj-mode .text-transparent { 
    -webkit-text-fill-color: #C16125; 
    text-shadow: 0 0 10px rgba(193, 97, 37, 0.4); 
}
body.bdj-mode h1 { text-shadow: 2px 2px 0px #0f1e2e; }
body.bdj-mode #scroll-progress { background: #C16125; }
body.bdj-mode #cursor-dot { background: #C16125; }
body.bdj-mode #cursor-outline { border-color: #C8C6D7; }
body.bdj-mode .menu-content, 
body.bdj-mode .theme-content { 
    background: rgba(31, 60, 92, 0.98); 
    border: 1px solid #C16125; 
}
body.bdj-mode .access-btn { border-color: #C16125; color: #C8C6D7; }
body.bdj-mode .access-btn:hover { background: #C16125; color: #fff; }

/* 18. PIURCZYK MODE (ART - ULTRA) - THE ARTIST */
body.art-mode { background: #f3e5ab; color: #292524; font-family: 'Permanent Marker', cursive; overflow-x: hidden; }
body.art-mode #art-bg { opacity: 1; }
body.art-mode .tech-background { display: none; }
body.art-mode #content-wrapper { filter: url(#sketchy); }
body.art-mode .bg-ninja-card { background: rgba(255,255,255,0.6); border: 3px solid #292524; border-radius: 2px; box-shadow: 8px 8px 0px #292524; backdrop-filter: none; }
body.art-mode h1, body.art-mode h2, body.art-mode h3 { color: #000 !important; text-shadow: none; transform: rotate(-1deg); }
body.art-mode .text-transparent { -webkit-text-fill-color: #dc2626; }
body.art-mode .hero-btn { background: transparent; border: 4px solid #292524; color: #292524; box-shadow: none; border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; }
body.art-mode .hero-btn:hover { background: #292524; color: #f3e5ab; transform: scale(1.1) rotate(2deg); }
body.art-mode #cursor-dot { background: #292524; width: 10px; height: 10px; border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
body.art-mode #cursor-outline { border-color: #292524; border-style: solid; border-width: 2px; border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; animation: float 3s ease-in-out infinite; }
body.art-mode .header-line { background: #292524; height: 4px; border-radius: 100%; }
body.art-mode .skill-pill { border: 2px solid #292524; background: transparent; color: #292524; box-shadow: 4px 4px 0 #292524; }

/* 19. KSEK MODE (BLENDER/3D - ULTRA) - THE MODELER */
body.ksek-mode { background: #262626; color: #EA7600; font-family: 'Inter', sans-serif; }
body.ksek-mode #ksek-canvas { opacity: 1; }
body.ksek-mode .tech-background { display: none; }
body.ksek-mode #ksek-canvas { transform: perspective(600px) rotateX(45deg) scale(2); transform-origin: 50% 50%; filter: drop-shadow(0 0 10px #EA7600); }
body.ksek-mode .bg-ninja-card { background: rgba(40, 40, 40, 0.95); border: 1px solid #EA7600; }
body.ksek-mode h1, body.ksek-mode h2 { color: #fff !important; }
body.ksek-mode .text-transparent { -webkit-text-fill-color: #EA7600 !important; }
body.ksek-mode .hero-btn { border: 1px solid #EA7600; color: #EA7600; background: transparent; }
body.ksek-mode .hero-btn:hover { background: #EA7600; color: #fff; }
body.ksek-mode img { opacity: 0.8; border: 1px solid #EA7600; }

/* 20. KULA MODE (SPHERE - ULTRA) - THE FRIEND */
body.kula-mode { background: #000; color: #fff; }
body.kula-mode #kula-canvas { opacity: 1; }
body.kula-mode .tech-background { display: none; }
body.kula-mode .bg-ninja-card { background: rgba(20,20,20,0.8); border: 1px solid #444; }

/* 21. NOZU MODE (MUSHROOM - ULTRA) - THE GIRLFRIEND */
body.nozu-mode { background-color: #2b1d0e; color: #d4e157; font-family: 'Comfortaa', cursive; }
body.nozu-mode #nozu-bg, body.nozu-mode #nozu-canvas { opacity: 1; }
body.nozu-mode .tech-background { display: none; }
body.nozu-mode .bg-ninja-card { background: rgba(43, 29, 14, 0.9); border: 2px solid #8bc34a; box-shadow: 0 10px 30px rgba(139, 195, 74, 0.2); border-radius: 24px; }
body.nozu-mode h1, body.nozu-mode h2 { color: #ff7043 !important; text-shadow: 3px 3px 0 #3e2723; }
body.nozu-mode .text-transparent { -webkit-text-fill-color: #ff7043 !important; }
body.nozu-mode .hero-btn { background: #8bc34a; color: #1b5e20; border: none; border-radius: 50px; font-weight: bold; box-shadow: 0 5px 0 #558b2f; }
body.nozu-mode .hero-btn:hover { background: #aed581; transform: translateY(2px); box-shadow: 0 3px 0 #558b2f; }
body.nozu-mode #cursor-dot { background: #ff7043; }
body.nozu-mode #cursor-outline { border-color: #8bc34a; }
body.nozu-mode .skill-pill { background: #3e2723; border: 1px solid #8bc34a; color: #d4e157; }