/* Import pixel font */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

:root {
    /* NES-inspired palette */
    --bg-dark: #0f0f1b;
    --bg-mid: #1a1a2e;
    --bg-light: #16213e;
    --primary: #00d9ff;
    --secondary: #ff6b9d;
    --accent: #c0ff00;
    --warning: #ffcc00;
    --text: #ffffff;
    --text-dim: #8892b0;
    --pixel-border: #3d5a80;

    /* Pixel sizes */
    --pixel: 4px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Disable anti-aliasing for that crispy pixel look */
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Press Start 2P', monospace;
    background-color: var(--bg-dark);
    color: var(--text);
    line-height: 2;
    font-size: 10px;
    overflow-x: hidden;
}

/* Pixelated scrollbar */
::-webkit-scrollbar {
    width: 16px;
    background: var(--bg-dark);
}

::-webkit-scrollbar-thumb {
    background: var(--primary);
    border: 4px solid var(--bg-dark);
}

/* ===== PIXEL BORDER BOX STYLE ===== */
.pixel-box {
    background: var(--bg-mid);
    border: 4px solid var(--text);
    box-shadow:
        8px 8px 0 var(--bg-dark),
        inset -4px -4px 0 var(--pixel-border),
        inset 4px 4px 0 rgba(255,255,255,0.1);
    position: relative;
}

.pixel-box::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border: 4px solid var(--pixel-border);
    pointer-events: none;
}

/* ===== PARALLAX BACKGROUND ===== */
.parallax-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    overflow: visible;
    pointer-events: none;
}

/* Stars - infinite tiling */
.stars {
    position: absolute;
    top: -50%;
    left: 0;
    width: 100%;
    height: 500%;
    background-image:
        radial-gradient(2px 2px at 20px 30px, var(--primary), transparent),
        radial-gradient(2px 2px at 40px 70px, var(--secondary), transparent),
        radial-gradient(2px 2px at 50px 160px, var(--text), transparent),
        radial-gradient(2px 2px at 90px 40px, var(--accent), transparent),
        radial-gradient(2px 2px at 130px 80px, var(--primary), transparent),
        radial-gradient(2px 2px at 160px 120px, var(--text), transparent),
        radial-gradient(2px 2px at 200px 50px, var(--secondary), transparent),
        radial-gradient(2px 2px at 250px 90px, var(--primary), transparent),
        radial-gradient(2px 2px at 300px 150px, var(--accent), transparent),
        radial-gradient(2px 2px at 350px 30px, var(--text), transparent),
        radial-gradient(2px 2px at 380px 120px, var(--warning), transparent),
        radial-gradient(2px 2px at 70px 180px, var(--primary), transparent),
        radial-gradient(2px 2px at 280px 60px, var(--secondary), transparent),
        radial-gradient(2px 2px at 180px 140px, var(--text), transparent);
    background-repeat: repeat;
    background-size: 400px 220px;
    animation: twinkle 4s ease-in-out infinite alternate;
    will-change: transform;
}

/* Second star layer - bigger stars, different pattern */
.stars-mid {
    top: -50%;
    height: 500%;
    background-image:
        radial-gradient(3px 3px at 100px 50px, var(--warning), transparent),
        radial-gradient(3px 3px at 200px 150px, var(--primary), transparent),
        radial-gradient(4px 4px at 300px 100px, var(--secondary), transparent),
        radial-gradient(3px 3px at 150px 200px, var(--text), transparent),
        radial-gradient(4px 4px at 50px 250px, var(--accent), transparent),
        radial-gradient(3px 3px at 350px 180px, var(--primary), transparent),
        radial-gradient(3px 3px at 420px 80px, var(--secondary), transparent),
        radial-gradient(4px 4px at 480px 220px, var(--warning), transparent);
    background-size: 550px 300px;
    opacity: 0.8;
    animation: twinkle 6s ease-in-out infinite alternate-reverse;
}

@keyframes twinkle {
    0% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* Floating pixel clouds */
.clouds {
    position: absolute;
    top: -50%;
    left: 0;
    width: 100%;
    height: 500%;
    will-change: transform;
}

.clouds::before,
.clouds::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--pixel-border);
    opacity: 0.3;
}

.clouds::before {
    top: 150px;
    left: 10%;
    box-shadow:
        8px 0 var(--pixel-border),
        16px 0 var(--pixel-border),
        24px 0 var(--pixel-border),
        8px -8px var(--pixel-border),
        16px -8px var(--pixel-border),
        /* cloud 2 */
        calc(50vw) 80px var(--pixel-border),
        calc(50vw + 8px) 80px var(--pixel-border),
        calc(50vw + 16px) 80px var(--pixel-border),
        calc(50vw + 24px) 80px var(--pixel-border),
        calc(50vw + 8px) 72px var(--pixel-border),
        calc(50vw + 16px) 72px var(--pixel-border),
        /* cloud 3 */
        calc(80vw) 200px var(--pixel-border),
        calc(80vw + 8px) 200px var(--pixel-border),
        calc(80vw + 16px) 200px var(--pixel-border),
        calc(80vw + 8px) 192px var(--pixel-border);
}

.clouds::after {
    top: 500px;
    left: 20%;
    box-shadow:
        8px 0 var(--pixel-border),
        16px 0 var(--pixel-border),
        8px -8px var(--pixel-border),
        /* cloud 2 */
        calc(40vw) 100px var(--pixel-border),
        calc(40vw + 8px) 100px var(--pixel-border),
        calc(40vw + 16px) 100px var(--pixel-border),
        calc(40vw + 24px) 100px var(--pixel-border),
        calc(40vw + 32px) 100px var(--pixel-border),
        calc(40vw + 8px) 92px var(--pixel-border),
        calc(40vw + 16px) 92px var(--pixel-border),
        calc(40vw + 24px) 92px var(--pixel-border),
        calc(40vw + 16px) 84px var(--pixel-border),
        /* cloud 3 */
        calc(70vw) 300px var(--pixel-border),
        calc(70vw + 8px) 300px var(--pixel-border),
        calc(70vw + 16px) 300px var(--pixel-border),
        calc(70vw + 8px) 292px var(--pixel-border);
}

/* Pixel mountains - part of underground stack, sits above grass */
.mountains {
    position: absolute;
    top: calc(100% - 120px - 16px);
    left: 0;
    width: 100%;
    height: 120px;
    will-change: transform;
    overflow: hidden;
    z-index: 5;
}

.mountains::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 8px;
    height: 8px;
    background: #1a2744;
    box-shadow:
        /* Ground line */
        0 0 #1a2744, 8px 0 #1a2744, 16px 0 #1a2744, 24px 0 #1a2744, 32px 0 #1a2744, 40px 0 #1a2744, 48px 0 #1a2744, 56px 0 #1a2744, 64px 0 #1a2744, 72px 0 #1a2744, 80px 0 #1a2744, 88px 0 #1a2744, 96px 0 #1a2744, 104px 0 #1a2744, 112px 0 #1a2744, 120px 0 #1a2744, 128px 0 #1a2744, 136px 0 #1a2744, 144px 0 #1a2744, 152px 0 #1a2744, 160px 0 #1a2744, 168px 0 #1a2744, 176px 0 #1a2744, 184px 0 #1a2744, 192px 0 #1a2744, 200px 0 #1a2744,
        /* Mountain 1 */
        16px -8px #1a2744, 24px -8px #1a2744, 32px -8px #1a2744, 40px -8px #1a2744, 48px -8px #1a2744,
        24px -16px #1a2744, 32px -16px #1a2744, 40px -16px #1a2744,
        32px -24px #1a2744, 32px -32px #1e3a5f,
        /* Mountain 2 - taller */
        72px -8px #162035, 80px -8px #162035, 88px -8px #162035, 96px -8px #162035, 104px -8px #162035, 112px -8px #162035, 120px -8px #162035,
        80px -16px #162035, 88px -16px #162035, 96px -16px #162035, 104px -16px #162035, 112px -16px #162035,
        88px -24px #162035, 96px -24px #162035, 104px -24px #162035,
        96px -32px #162035, 96px -40px #162035, 96px -48px #1e3a5f,
        /* Mountain 3 - small */
        144px -8px #1a2744, 152px -8px #1a2744, 160px -8px #1a2744,
        152px -16px #1a2744, 152px -24px #1e3a5f,
        /* Continue ground */
        208px 0 #1a2744, 216px 0 #1a2744, 224px 0 #1a2744, 232px 0 #1a2744, 240px 0 #1a2744, 248px 0 #1a2744, 256px 0 #1a2744, 264px 0 #1a2744, 272px 0 #1a2744, 280px 0 #1a2744, 288px 0 #1a2744, 296px 0 #1a2744, 304px 0 #1a2744, 312px 0 #1a2744, 320px 0 #1a2744,
        /* Mountain 4 - big */
        224px -8px #162035, 232px -8px #162035, 240px -8px #162035, 248px -8px #162035, 256px -8px #162035, 264px -8px #162035, 272px -8px #162035, 280px -8px #162035,
        232px -16px #162035, 240px -16px #162035, 248px -16px #162035, 256px -16px #162035, 264px -16px #162035, 272px -16px #162035,
        240px -24px #162035, 248px -24px #162035, 256px -24px #162035, 264px -24px #162035,
        248px -32px #162035, 256px -32px #162035,
        256px -40px #162035, 256px -48px #162035, 256px -56px #1e3a5f;
}

/* Extend mountains across screen */
.mountains::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 320px;
    width: calc(100vw);
    height: 8px;
    background: repeating-linear-gradient(90deg, #1a2744 0px, #1a2744 8px);
}

/* ===== UNDERGROUND TERRARIA LAYERS ===== */
.underground {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    overflow: visible;
}

/* Grass & dirt surface - starts right below mountains */
.grass-layer {
    position: absolute;
    top: calc(100% - 16px);
    left: 0;
    width: 100%;
    height: 400px;
    background: #8B4513;
    will-change: transform;
    z-index: 4;
}

.grass-layer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 16px;
    background: repeating-linear-gradient(
        90deg,
        #228B22 0px, #228B22 8px,
        #2E8B2E 8px, #2E8B2E 16px,
        #1E7B1E 16px, #1E7B1E 24px,
        #228B22 24px, #228B22 32px
    );
}

/* Grass blades on top */
.grass-layer::after {
    content: '';
    position: absolute;
    top: -8px;
    left: 0;
    width: 8px;
    height: 8px;
    background: #228B22;
    box-shadow:
        16px 0 #2E8B2E, 40px 0 #228B22, 48px -8px #1E7B1E, 72px 0 #228B22, 96px 0 #2E8B2E, 104px -8px #228B22,
        128px 0 #228B22, 152px 0 #1E7B1E, 160px -8px #2E8B2E, 184px 0 #228B22, 200px 0 #228B22, 224px -8px #1E7B1E,
        248px 0 #2E8B2E, 272px 0 #228B22, 280px -8px #228B22, 304px 0 #1E7B1E, 328px 0 #228B22, 352px -8px #2E8B2E,
        376px 0 #228B22, 400px 0 #228B22, 424px -8px #1E7B1E, 448px 0 #2E8B2E, 472px 0 #228B22, 496px -8px #228B22,
        520px 0 #1E7B1E, 544px 0 #228B22, 568px -8px #2E8B2E, 592px 0 #228B22, 616px 0 #228B22, 640px -8px #1E7B1E,
        664px 0 #2E8B2E, 688px 0 #228B22, 712px -8px #228B22, 736px 0 #1E7B1E, 760px 0 #228B22, 784px -8px #2E8B2E;
}

/* Dirt layer with rocks */
.dirt-layer {
    position: absolute;
    top: calc(100% - 16px + 400px);
    left: 0;
    width: 100%;
    height: 600px;
    background:
        repeating-linear-gradient(
            0deg,
            #6B4423 0px, #6B4423 8px,
            #7B5433 8px, #7B5433 16px,
            #5B3413 16px, #5B3413 24px,
            #6B4423 24px, #6B4423 32px
        );
    will-change: transform;
    z-index: 3;
}

/* Rocks and small stones in dirt */
.dirt-layer::before {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: #808080;
    top: 40px;
    left: 50px;
    box-shadow:
        /* Scattered rocks */
        120px 20px #707070, 122px 20px #606060,
        200px 80px #808080, 202px 82px #707070,
        320px 40px #686868, 324px 42px #787878,
        450px 100px #707070,
        80px 150px #808080, 82px 152px #606060,
        250px 180px #686868, 254px 180px #787878,
        400px 200px #707070, 404px 202px #808080,
        550px 160px #606060,
        150px 280px #808080, 154px 282px #686868,
        300px 320px #707070,
        500px 300px #787878, 502px 302px #606060,
        100px 400px #808080,
        350px 420px #686868, 354px 420px #707070,
        600px 380px #606060, 604px 382px #808080,
        /* Worms (pink) */
        180px 120px #FFB6C1, 184px 122px #FFB6C1, 188px 120px #FFB6C1,
        420px 260px #FFB6C1, 424px 262px #FFB6C1, 428px 260px #FFB6C1,
        /* Copper ore (orange) */
        280px 350px #CD7F32, 284px 350px #CD7F32, 282px 354px #B87333, 286px 354px #CD7F32,
        520px 450px #CD7F32, 524px 450px #B87333, 522px 454px #CD7F32;
}

/* Stone layer with ores */
.stone-layer {
    position: absolute;
    top: calc(100% - 16px + 1000px);
    left: 0;
    width: 100%;
    height: 800px;
    background:
        repeating-linear-gradient(
            0deg,
            #505050 0px, #505050 8px,
            #585858 8px, #585858 16px,
            #484848 16px, #484848 24px,
            #555555 24px, #555555 32px
        );
    will-change: transform;
    z-index: 2;
}

/* Ores in stone */
.stone-layer::before {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    top: 30px;
    left: 80px;
    background: #C0C0C0;
    box-shadow:
        /* Iron ore (silver) */
        0 0 #C0C0C0, 8px 0 #A9A9A9, 0 8px #B8B8B8, 8px 8px #C0C0C0,
        200px 60px #C0C0C0, 208px 60px #A9A9A9, 204px 68px #B8B8B8,
        450px 100px #A9A9A9, 458px 100px #C0C0C0, 454px 108px #C0C0C0,
        /* Gold ore */
        120px 150px #FFD700, 128px 150px #FFC000, 124px 158px #FFD700, 132px 158px #DAA520,
        380px 200px #FFD700, 388px 200px #FFD700, 384px 208px #FFC000,
        550px 280px #DAA520, 558px 280px #FFD700, 554px 288px #FFD700, 562px 288px #FFC000,
        /* Ruby (red) */
        180px 320px #DC143C, 186px 324px #FF0000, 182px 328px #DC143C,
        480px 380px #FF0000, 486px 384px #DC143C,
        /* Sapphire (blue) */
        300px 250px #0000FF, 306px 254px #1E90FF, 302px 258px #0000CD,
        600px 320px #0000FF, 606px 324px #1E90FF,
        /* Emerald (green) */
        250px 420px #00FF00, 256px 424px #32CD32, 252px 428px #228B22,
        520px 500px #32CD32, 526px 504px #00FF00,
        /* Amethyst (purple) */
        400px 450px #9400D3, 406px 454px #8B008B, 402px 458px #9932CC,
        150px 550px #9400D3, 156px 554px #8B008B,
        /* More iron scattered */
        80px 480px #C0C0C0, 88px 480px #A9A9A9,
        350px 520px #B8B8B8, 358px 524px #C0C0C0,
        /* Cobweb */
        50px 200px rgba(255,255,255,0.3), 54px 204px rgba(255,255,255,0.3), 58px 200px rgba(255,255,255,0.3), 54px 196px rgba(255,255,255,0.3),
        500px 150px rgba(255,255,255,0.3), 504px 154px rgba(255,255,255,0.3), 508px 150px rgba(255,255,255,0.3);
}

/* Cave background holes */
.stone-layer::after {
    content: '';
    position: absolute;
    width: 40px;
    height: 24px;
    background: #2a2a2a;
    border-radius: 50%;
    top: 180px;
    left: 200px;
    box-shadow:
        300px 150px 0 20px #252525,
        -100px 300px 0 15px #2a2a2a,
        400px 350px 0 25px #252525,
        150px 500px 0 30px #2a2a2a;
}

/* Deep underground - hellish - extra tall to cover full page */
.deep-layer {
    position: absolute;
    top: calc(100% - 16px + 1800px);
    left: 0;
    width: 100%;
    height: 5000px;
    background:
        repeating-linear-gradient(
            0deg,
            #2d2d2d 0px, #2d2d2d 8px,
            #333333 8px, #333333 16px,
            #282828 16px, #282828 24px,
            #303030 24px, #303030 32px
        );
    will-change: transform;
    z-index: 1;
}

/* Lava and hellstone */
.deep-layer::before {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    top: 100px;
    left: 60px;
    background: #FF4500;
    box-shadow:
        /* Lava pools */
        0 0 #FF4500, 8px 0 #FF6600, 16px 0 #FF4500, 24px 0 #FF6600, 32px 0 #FF4500,
        4px 8px #FF6600, 12px 8px #FF4500, 20px 8px #FF6600, 28px 8px #FF4500,
        200px 50px #FF4500, 208px 50px #FF6600, 216px 50px #FF4500, 224px 50px #FF6600,
        204px 58px #FF6600, 212px 58px #FF4500, 220px 58px #FF6600,
        400px 150px #FF4500, 408px 150px #FF6600, 416px 150px #FF4500,
        404px 158px #FF6600, 412px 158px #FF4500,
        /* Hellstone ore (dark red) */
        120px 200px #8B0000, 128px 200px #A00000, 124px 208px #8B0000, 132px 208px #A00000,
        300px 280px #8B0000, 308px 280px #8B0000, 304px 288px #A00000,
        500px 350px #A00000, 508px 350px #8B0000, 504px 358px #8B0000,
        /* Diamond (cyan) */
        180px 400px #00FFFF, 186px 404px #00CED1, 182px 408px #00FFFF, 188px 408px #40E0D0,
        450px 500px #00FFFF, 456px 504px #00CED1, 452px 508px #40E0D0,
        /* Obsidian (very dark purple) */
        250px 300px #1a0a2e, 258px 300px #1a0a2e, 254px 308px #0d051a, 262px 308px #1a0a2e,
        350px 450px #1a0a2e, 358px 450px #0d051a, 354px 458px #1a0a2e,
        /* More lava glow */
        80px 600px #FF4500, 88px 600px #FF6600, 96px 600px #FF4500,
        280px 700px #FF6600, 288px 700px #FF4500, 296px 700px #FF6600,
        550px 650px #FF4500, 558px 650px #FF6600;
}

/* Demon altar / furniture */
.deep-layer::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 32px;
    background: #4a0080;
    top: 250px;
    left: 300px;
    box-shadow:
        0 32px #3a0060, 8px 32px #4a0080, 16px 32px #3a0060,
        8px -8px #6a00a0,
        /* Another altar */
        350px 300px #4a0080, 350px 332px #3a0060, 358px 332px #4a0080, 366px 332px #3a0060, 358px 292px #6a00a0;
}

/* ===== SCANLINES OVERLAY ===== */
.scanlines {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.1) 0px,
        rgba(0, 0, 0, 0.1) 1px,
        transparent 1px,
        transparent 2px
    );
    opacity: 0.3;
}

/* ===== HEADER / NAV ===== */
header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    padding: 16px;
    background: var(--bg-dark);
    border-bottom: 4px solid var(--primary);
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.logo {
    font-size: 14px;
    color: var(--primary);
    text-decoration: none;
    text-shadow: 2px 2px 0 var(--bg-dark), 4px 4px 0 var(--secondary);
}

.logo span {
    color: var(--secondary);
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 24px;
}

.nav-links a {
    color: var(--text);
    text-decoration: none;
    font-size: 8px;
    padding: 8px 12px;
    transition: all 0.1s;
    position: relative;
}

.nav-links a:hover {
    color: var(--bg-dark);
    background: var(--accent);
}

.nav-links a::before {
    content: '>';
    position: absolute;
    left: 0;
    opacity: 0;
    color: var(--accent);
}

.nav-links a:hover::before {
    opacity: 1;
    left: -12px;
}

.mobile-menu-btn {
    display: none;
    color: var(--primary);
    font-size: 16px;
    cursor: pointer;
}

/* ===== CONTAINER ===== */
.container {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px;
}

/* ===== HERO SECTION ===== */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 100px;
    position: relative;
}

.hero-content {
    max-width: 700px;
}

.hero h1 {
    font-size: 24px;
    margin-bottom: 24px;
    line-height: 1.8;
    color: var(--text);
    text-shadow: 4px 4px 0 var(--bg-dark);
}

.hero h1 span {
    color: var(--primary);
    display: inline-block;
    animation: float 2s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.hero p {
    font-size: 10px;
    color: var(--text-dim);
    margin-bottom: 32px;
    line-height: 2.2;
}

/* ===== PIXEL BUTTONS ===== */
.btn {
    display: inline-block;
    padding: 16px 24px;
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    text-decoration: none;
    cursor: pointer;
    border: none;
    position: relative;
    transition: all 0.1s;
    margin-right: 8px;
    margin-bottom: 8px;
}

.btn-primary {
    background: var(--primary);
    color: var(--bg-dark);
    box-shadow:
        4px 4px 0 var(--bg-dark),
        0 0 0 4px var(--primary),
        4px 4px 0 4px var(--bg-dark);
}

.btn-primary:hover {
    transform: translate(2px, 2px);
    box-shadow:
        2px 2px 0 var(--bg-dark),
        0 0 0 4px var(--primary),
        2px 2px 0 4px var(--bg-dark);
}

.btn-secondary {
    background: transparent;
    color: var(--secondary);
    border: 4px solid var(--secondary);
    box-shadow: 4px 4px 0 var(--bg-dark);
}

.btn-secondary:hover {
    background: var(--secondary);
    color: var(--bg-dark);
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--bg-dark);
}

.button-group {
    margin-top: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ===== TECH STACK SPRITES ===== */
.tech-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 40px;
    padding: 24px;
    background: var(--bg-mid);
    border: 4px solid var(--pixel-border);
}

.tech-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.tech-icon {
    font-size: 24px;
    color: var(--accent);
    animation: bounce 1s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * 0.1s);
}

.tech-item:nth-child(1) { --i: 0; }
.tech-item:nth-child(2) { --i: 1; }
.tech-item:nth-child(3) { --i: 2; }
.tech-item:nth-child(4) { --i: 3; }
.tech-item:nth-child(5) { --i: 4; }
.tech-item:nth-child(6) { --i: 5; }

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

.tech-item span {
    font-size: 8px;
    color: var(--text-dim);
}

/* ===== SECTION STYLES ===== */
section {
    padding: 80px 0;
    position: relative;
}

.section-heading {
    text-align: center;
    margin-bottom: 60px;
}

.section-heading h2 {
    font-size: 16px;
    color: var(--primary);
    display: inline-block;
    padding: 16px 32px;
    background: var(--bg-mid);
    border: 4px solid var(--primary);
    box-shadow: 8px 8px 0 var(--bg-dark);
    position: relative;
}

/* Decorative pixels around heading */
.section-heading h2::before,
.section-heading h2::after {
    content: '★';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--warning);
    animation: spin 2s linear infinite;
}

.section-heading h2::before { left: -40px; }
.section-heading h2::after { right: -40px; }

@keyframes spin {
    from { transform: translateY(-50%) rotate(0deg); }
    to { transform: translateY(-50%) rotate(360deg); }
}

/* ===== VIRAL PROJECT / ACHIEVEMENT BOX ===== */
.viral-project {
    background: var(--bg-mid);
    border: 4px solid var(--warning);
    padding: 32px;
    margin-bottom: 40px;
    position: relative;
    box-shadow: 8px 8px 0 var(--bg-dark);
}

/* Corner decorations */
.viral-project::before {
    content: '◆';
    position: absolute;
    top: -12px;
    left: -12px;
    color: var(--warning);
    font-size: 20px;
    animation: pulse 1s ease-in-out infinite;
}

.viral-project::after {
    content: '◆';
    position: absolute;
    bottom: -12px;
    right: -12px;
    color: var(--warning);
    font-size: 20px;
    animation: pulse 1s ease-in-out infinite 0.5s;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.7; }
}

.viral-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--warning);
    color: var(--bg-dark);
    font-size: 8px;
    margin-bottom: 16px;
    animation: blink 1s step-end infinite;
}

@keyframes blink {
    50% { opacity: 0.7; }
}

.viral-project h3 {
    font-size: 14px;
    color: var(--text);
    margin-bottom: 16px;
    text-shadow: 2px 2px 0 var(--bg-dark);
}

.viral-project > p {
    font-size: 9px;
    color: var(--text-dim);
    margin-bottom: 24px;
    line-height: 2.2;
}

/* ===== STAT BARS (like HP/MP bars) ===== */
.viral-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin: 24px 0;
}

.viral-stat {
    background: var(--bg-dark);
    border: 4px solid var(--pixel-border);
    padding: 16px;
    text-align: center;
}

.stat-value {
    font-size: 18px;
    color: var(--accent);
    margin-bottom: 8px;
    text-shadow: 2px 2px 0 var(--bg-dark);
}

.stat-label {
    font-size: 7px;
    color: var(--text-dim);
}

/* ===== FEATURE GRID ===== */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 24px;
}

.feature-item {
    background: var(--bg-dark);
    border: 4px solid var(--pixel-border);
    padding: 16px;
    display: flex;
    gap: 16px;
    transition: all 0.1s;
}

.feature-item:hover {
    border-color: var(--primary);
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 var(--primary);
}

.feature-icon {
    font-size: 20px;
    color: var(--primary);
    flex-shrink: 0;
}

.feature-text h4 {
    font-size: 9px;
    color: var(--text);
    margin-bottom: 8px;
}

.feature-text p {
    font-size: 8px;
    color: var(--text-dim);
    line-height: 2;
}

/* ===== PROJECT CARDS ===== */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}

.card {
    background: var(--bg-mid);
    border: 4px solid var(--pixel-border);
    transition: all 0.1s;
    display: flex;
    flex-direction: column;
}

.card:hover {
    transform: translate(-4px, -4px);
    box-shadow: 8px 8px 0 var(--primary);
    border-color: var(--primary);
}

.github-embed {
    padding: 16px;
    background: var(--bg-dark);
    border-bottom: 4px solid var(--pixel-border);
    display: flex;
    justify-content: center;
}

.card-header {
    padding: 16px;
    border-bottom: 4px solid var(--pixel-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.card-title {
    font-size: 10px;
    color: var(--text);
}

.card-category {
    font-size: 7px;
    padding: 4px 8px;
    background: var(--primary);
    color: var(--bg-dark);
}

.card-body {
    padding: 16px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.card-body p {
    font-size: 8px;
    color: var(--text-dim);
    line-height: 2.2;
    margin-bottom: 16px;
    flex-grow: 1;
}

.card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.card-tag {
    font-size: 7px;
    padding: 4px 8px;
    background: var(--bg-dark);
    color: var(--accent);
    border: 2px solid var(--accent);
}

.card-footer {
    padding: 16px;
    border-top: 4px solid var(--pixel-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.card-link {
    font-size: 8px;
    color: var(--primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-link:hover {
    color: var(--accent);
}

.card-link::before {
    content: '>';
}

.github-stats {
    display: flex;
    gap: 12px;
}

.github-stats span {
    font-size: 8px;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ===== SKILLS SECTION ===== */
.skills-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

.skill-category {
    background: var(--bg-mid);
    border: 4px solid var(--pixel-border);
    padding: 24px;
    position: relative;
}

.skill-category::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 8px;
    background: repeating-linear-gradient(
        90deg,
        var(--primary) 0px,
        var(--primary) 8px,
        var(--secondary) 8px,
        var(--secondary) 16px
    );
}

.skill-category h3 {
    font-size: 10px;
    color: var(--primary);
    margin-bottom: 20px;
    padding-top: 8px;
}

.tech-badge {
    display: inline-block;
    font-size: 7px;
    padding: 6px 10px;
    margin: 4px;
    background: var(--bg-dark);
    color: var(--text);
    border: 2px solid var(--text-dim);
    transition: all 0.1s;
}

.tech-badge:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-2px);
}

/* ===== SKILL BARS (RPG style) ===== */
.skill-item {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    gap: 12px;
}

.skill-name {
    font-size: 8px;
    min-width: 100px;
    color: var(--text);
}

.skill-level {
    flex-grow: 1;
    height: 16px;
    background: var(--bg-dark);
    border: 2px solid var(--text-dim);
    position: relative;
    overflow: hidden;
}

.skill-progress {
    height: 100%;
    background: linear-gradient(
        180deg,
        var(--accent) 0%,
        var(--primary) 50%,
        var(--accent) 100%
    );
    position: relative;
}

/* Animated shine effect */
.skill-progress::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.3),
        transparent
    );
    animation: shine 2s infinite;
}

@keyframes shine {
    to { left: 100%; }
}

/* ===== TIMELINE ===== */
.timeline {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}

.timeline::after {
    content: '';
    position: absolute;
    width: 4px;
    background: var(--primary);
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -2px;
    box-shadow: 0 0 10px var(--primary);
}

.timeline-container {
    padding: 8px 40px;
    position: relative;
    width: 50%;
}

.timeline-container::after {
    content: '◆';
    position: absolute;
    font-size: 16px;
    color: var(--warning);
    top: 16px;
    z-index: 1;
}

.left { left: 0; }
.right { left: 50%; }

.left::after { right: -8px; }
.right::after { left: -8px; }

.timeline-content {
    background: var(--bg-mid);
    border: 4px solid var(--pixel-border);
    padding: 20px;
    position: relative;
}

.timeline-content:hover {
    border-color: var(--primary);
}

.timeline-content h3 {
    font-size: 9px;
    color: var(--primary);
    margin-bottom: 8px;
}

.experience-date {
    font-size: 7px;
    color: var(--warning);
    margin-bottom: 12px;
    display: block;
}

.timeline-content p {
    font-size: 8px;
    color: var(--text-dim);
    line-height: 2;
}

.timeline-content ul {
    list-style: none;
    margin-top: 12px;
}

.timeline-content li {
    font-size: 8px;
    color: var(--text-dim);
    margin-bottom: 8px;
    padding-left: 16px;
    position: relative;
    line-height: 2;
}

.timeline-content li::before {
    content: '►';
    position: absolute;
    left: 0;
    color: var(--accent);
    font-size: 6px;
}

/* ===== EXPERIENCE ITEM ===== */
.experience-item {
    background: var(--bg-mid);
    border: 4px solid var(--pixel-border);
    padding: 24px;
    position: relative;
}

.experience-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 8px;
    height: 100%;
    background: var(--primary);
}

.experience-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 8px;
}

.experience-company {
    font-size: 11px;
    color: var(--text);
}

.experience-title {
    font-size: 9px;
    color: var(--primary);
    margin-bottom: 12px;
}

/* ===== CONTACT SECTION ===== */
.contact {
    background: var(--bg-mid);
    border: 4px solid var(--primary);
    padding: 32px;
    box-shadow: 8px 8px 0 var(--bg-dark);
}

.contact-info {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 32px;
}

.contact-item {
    flex: 1;
    min-width: 200px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.contact-icon {
    width: 48px;
    height: 48px;
    background: var(--primary);
    color: var(--bg-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    border: 4px solid var(--text);
}

.contact-text h4 {
    font-size: 8px;
    color: var(--primary);
    margin-bottom: 4px;
}

.contact-text a,
.contact-text p {
    font-size: 8px;
    color: var(--text-dim);
    text-decoration: none;
}

.contact-text a:hover {
    color: var(--accent);
}

.contact-links {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 24px;
}

.social-link {
    width: 48px;
    height: 48px;
    background: var(--bg-dark);
    color: var(--text);
    border: 4px solid var(--pixel-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.1s;
}

.social-link:hover {
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 var(--primary);
    border-color: var(--primary);
    color: var(--primary);
}

/* ===== FOOTER ===== */
footer {
    text-align: center;
    padding: 32px;
    border-top: 4px solid var(--pixel-border);
    background: var(--bg-dark);
}

footer p {
    font-size: 8px;
    color: var(--text-dim);
    margin-bottom: 16px;
}

footer nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
}

footer nav a {
    font-size: 8px;
    color: var(--text-dim);
    text-decoration: none;
}

footer nav a:hover {
    color: var(--primary);
}

/* ===== BACK TO TOP ===== */
.back-to-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    background: var(--primary);
    color: var(--bg-dark);
    border: 4px solid var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.1s;
    text-decoration: none;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 var(--text);
}

/* ===== PROGRESS BAR ===== */
.progress-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 8px;
    background: var(--bg-dark);
    z-index: 10000;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
    width: 0%;
    transition: width 0.1s;
}

/* ===== GROWTH IMAGE ===== */
.growth-image {
    width: 100%;
    margin-top: 24px;
    border: 4px solid var(--pixel-border);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    body {
        font-size: 8px;
    }

    .hero h1 {
        font-size: 16px;
    }

    .section-heading h2 {
        font-size: 12px;
        padding: 12px 20px;
    }

    .section-heading h2::before,
    .section-heading h2::after {
        display: none;
    }

    .nav-links {
        position: fixed;
        top: 60px;
        left: -100%;
        flex-direction: column;
        background: var(--bg-dark);
        width: 100%;
        padding: 24px;
        border-bottom: 4px solid var(--primary);
        transition: left 0.3s;
    }

    .nav-links.active {
        left: 0;
    }

    .mobile-menu-btn {
        display: block;
    }

    .hero {
        text-align: center;
        padding-top: 120px;
    }

    .feature-grid {
        grid-template-columns: 1fr;
    }

    .timeline::after {
        left: 20px;
    }

    .timeline-container {
        width: 100%;
        padding-left: 50px;
        padding-right: 16px;
    }

    .timeline-container::after {
        left: 12px !important;
        right: auto !important;
    }

    .right {
        left: 0;
    }

    .cards {
        grid-template-columns: 1fr;
    }

    .viral-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .btn {
        display: block;
        text-align: center;
        margin-bottom: 12px;
    }
}

/* ===== HERO IMAGE ===== */
.hero-image {
    display: none;
}

/* ===== PIXEL DECORATIONS ===== */
.flex {
    display: flex;
}

.space-between {
    justify-content: space-between;
}

.align-center {
    align-items: center;
}

/* Remap old classes */
.btn:not(.btn-primary):not(.btn-secondary) {
    background: var(--primary);
    color: var(--bg-dark);
    box-shadow: 4px 4px 0 var(--bg-dark);
}

.btn:not(.btn-primary):not(.btn-secondary):hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--bg-dark);
}