/* ============================================
   街机复刻局 · 像素街机风格 (8-Bit Arcade)
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Rajdhani:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;700;900&display=swap');

:root {
    /* Dark base */
    --bg: #080812;
    --bg-alt: #0c0c1c;
    --surface: #0f0f24;
    --surface-light: #141430;

    /* Neon arcade palette */
    --cyan: #00f0ff;
    --cyan-glow: rgba(0,240,255,0.35);
    --magenta: #ff2d95;
    --magenta-glow: rgba(255,45,149,0.35);
    --yellow: #ffe500;
    --yellow-glow: rgba(255,229,0,0.3);
    --green: #00ff88;
    --green-glow: rgba(0,255,136,0.3);
    --orange: #ff6d00;
    --purple: #a855f7;
    --red: #ff3344;

    /* Text */
    --text: #e0e0f0;
    --text-secondary: #a0a0c0;
    --text-muted: #606080;

    /* Borders */
    --border: #1a1a3a;
    --border-light: #252550;

    /* Typography */
    --pixel: 'Press Start 2P', monospace;
    --heading: 'Rajdhani', 'Noto Sans SC', sans-serif;
    --body: 'Noto Sans SC', 'Rajdhani', sans-serif;

    /* Sizing */
    --pixel-unit: 4px;
    --transition: 0.2s ease;
}

/* ====== Reset ====== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:72px}

body{
    font-family:var(--body);
    background:var(--bg);
    color:var(--text);
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
ul{list-style:none}

.container{max-width:1100px;margin:0 auto;padding:0 24px}
.section{padding:100px 0}
.section-alt{
    background:var(--bg-alt);
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,240,255,0.015) 3px, rgba(0,240,255,0.015) 6px);
}

/* ====== CRT Scanline Overlay ====== */
.scanline-overlay {
    position:fixed;inset:0;z-index:9999;pointer-events:none;
    background:repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0,0,0,0.04) 2px,
        rgba(0,0,0,0.04) 4px
    );
}
.noise-overlay {
    position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:0.03;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ====== CRT Vignette ====== */
.crt-vignette {
    position:fixed;inset:0;z-index:9997;pointer-events:none;
    background:radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.5) 100%);
}

/* ====== Background Grid ====== */
.bg-grid{
    position:fixed;inset:0;z-index:-2;pointer-events:none;
    background-image:
        linear-gradient(rgba(0,240,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,240,255,0.04) 1px, transparent 1px);
    background-size:64px 64px;
    mask-image:radial-gradient(ellipse at center, black 30%, transparent 70%);
}

.bg-smoke{
    position:fixed;z-index:-1;pointer-events:none;
    border-radius:50%;filter:blur(140px);opacity:.04;
    animation:smokeDrift 20s ease-in-out infinite;
}
.smoke-1{width:700px;height:500px;background:var(--cyan);top:-100px;right:-200px}
.smoke-2{width:500px;height:400px;background:var(--magenta);bottom:-150px;left:-150px;animation-delay:-10s}

@keyframes smokeDrift{
    0%,100%{transform:translate(0,0) scale(1)}
    25%{transform:translate(40px,-30px) scale(1.1)}
    50%{transform:translate(-30px,20px) scale(.95)}
    75%{transform:translate(-20px,-15px) scale(1.05)}
}

/* ====== Pixel Border Utility ====== */
.pixel-border {
    border: 2px solid var(--border);
    box-shadow:
        inset 2px 2px 0 rgba(255,255,255,0.03),
        inset -2px -2px 0 rgba(0,0,0,0.3),
        2px 2px 0 rgba(0,0,0,0.5);
}

/* ====== SVG Icon System ====== */
.icon {
    width:1em;height:1em;
    stroke:currentColor;fill:none;
    stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
    vertical-align:middle;flex-shrink:0;
    transition:all var(--transition);
}
.logo-icon .icon {width:1.25em;height:1.25em;color:var(--cyan)}
.hero-avatar .avatar-fallback .icon {width:3rem;height:3rem;color:var(--cyan)}
.card-icon .icon {width:1.5em;height:1.5em;color:var(--cyan);stroke-width:1.8}
.skill-icon-wrap .icon {width:1.6em;height:1.6em;color:var(--cyan)}
.skill-card:hover .skill-icon-wrap .icon {transform:scale(1.15);color:#fff}
.game-emoji .icon {width:2em;height:2em;color:#fff;stroke-width:1.5}
.game-card:hover .game-emoji .icon {transform:scale(1.1)}
.social-icon .icon {width:1.6em;height:1.6em;color:var(--text-secondary)}
.social-card:hover .social-icon .icon {color:var(--cyan);transform:translateY(-2px)}
.footer-logo .icon {width:1.15em;height:1.15em;color:var(--cyan);vertical-align:-0.15em}
.contact-card .card-icon .icon {color:var(--cyan)}

/* ====== Music Toggle ====== */
.music-toggle {
    position:fixed;bottom:28px;right:28px;z-index:999;
    width:44px;height:44px;border-radius:0;
    background:rgba(8,8,18,.9);
    border:2px solid var(--cyan);
    color:var(--cyan);cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:all var(--transition);
    box-shadow:0 0 12px var(--cyan-glow), 2px 2px 0 rgba(0,0,0,0.6);
    image-rendering:pixelated;
}
.music-toggle:hover {
    box-shadow:0 0 24px var(--cyan-glow), 2px 2px 0 rgba(0,0,0,0.6);
    transform:scale(1.08);
}
.music-toggle svg {display:block}

/* ====== Navigation ====== */
.navbar{
    position:fixed;top:0;left:0;right:0;z-index:1000;
    padding:10px 0;transition:all .3s ease;
    background:rgba(8,8,18,.94);
    border-bottom:2px solid var(--border);
}
.navbar.scrolled{
    padding:6px 0;
    border-bottom-color:var(--cyan);
    box-shadow:0 2px 20px rgba(0,240,255,0.12);
}
.nav-container{
    max-width:1100px;margin:0 auto;padding:0 24px;
    display:flex;align-items:center;justify-content:space-between;
}
.nav-logo{
    display:flex;align-items:center;gap:10px;
    font-family:var(--pixel);font-size:0.72rem;
    letter-spacing:1px;color:var(--cyan);
    text-shadow:0 0 12px var(--cyan-glow);
    text-transform:uppercase;
}
.logo-icon{display:inline-flex;align-items:center;justify-content:center}
.logo-hl{color:var(--yellow);text-shadow:0 0 10px var(--yellow-glow)}

.nav-menu{display:flex;gap:2px}

.nav-link{
    padding:8px 14px;font-size:0.78rem;font-weight:700;
    color:var(--text-muted);transition:all var(--transition);
    font-family:var(--pixel);letter-spacing:0.5px;
    text-transform:uppercase;
    border:2px solid transparent;
}
.nav-link:hover{
    color:var(--cyan);
    border-color:rgba(0,240,255,0.25);
    background:rgba(0,240,255,0.05);
    text-shadow:0 0 8px var(--cyan-glow);
}

.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px;z-index:1001}
.nav-toggle span{display:block;width:24px;height:3px;background:var(--cyan);transition:all var(--transition)}
.nav-toggle.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.nav-toggle.active span:nth-child(2){opacity:0}
.nav-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* ====== Hero ====== */
.hero{
    min-height:100vh;display:flex;flex-direction:column;
    align-items:center;justify-content:center;position:relative;
    padding:120px 24px 60px;text-align:center;
}
.hero::before{
    content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
    background:
        radial-gradient(ellipse at 30% 20%,rgba(0,240,255,.06) 0%,transparent 50%),
        radial-gradient(ellipse at 70% 60%,rgba(255,45,149,.05) 0%,transparent 50%);
}
.hero-content{position:relative;z-index:1;max-width:720px}

.hero-badge{
    display:inline-flex;align-items:center;gap:10px;
    padding:8px 22px;
    border:2px solid var(--cyan);
    background:rgba(0,240,255,0.05);
    font-size:0.7rem;font-weight:400;color:var(--cyan);
    margin-bottom:28px;
    font-family:var(--pixel);letter-spacing:3px;text-transform:uppercase;
    box-shadow:0 0 20px var(--cyan-glow), 3px 3px 0 rgba(0,0,0,0.5);
    animation:pixelPulse 2s ease-in-out infinite;
}
.badge-pulse{
    width:8px;height:8px;background:var(--cyan);
    display:inline-block;
    box-shadow:0 0 8px var(--cyan-glow);
    animation:pixelBlink 1s step-end infinite;
}
@keyframes pixelBlink{50%{opacity:0}}
@keyframes pixelPulse{
    0%,100%{box-shadow:0 0 20px var(--cyan-glow), 3px 3px 0 rgba(0,0,0,0.5)}
    50%{box-shadow:0 0 32px var(--cyan-glow), 3px 3px 0 rgba(0,0,0,0.5), 0 0 60px rgba(0,240,255,0.1)}
}

/* Hero Avatar */
.hero-avatar{
    width:96px;height:96px;margin:0 auto 24px;
    overflow:hidden;position:relative;
    border:3px solid var(--cyan);
    box-shadow:0 0 30px var(--cyan-glow), 4px 4px 0 rgba(0,0,0,0.6);
    background:linear-gradient(135deg,rgba(0,240,255,.15),rgba(255,45,149,.1));
}
.hero-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.hero-avatar .avatar-fallback{display:none}
.hero-avatar.no-img .avatar-fallback{
    display:flex;align-items:center;justify-content:center;
    width:100%;height:100%;
}
.hero-avatar.no-img img{display:none}
.team-avatar{
    width:80px;height:80px;margin:0 auto 24px;
    border:3px solid var(--cyan);
    box-shadow:0 0 30px var(--cyan-glow), 4px 4px 0 rgba(0,0,0,0.6);
    background:linear-gradient(135deg,rgba(0,240,255,.2),rgba(255,45,149,.15));
    display:flex;align-items:center;justify-content:center;
}

.hero-title{margin-bottom:20px}
.hero-label{
    display:block;font-family:var(--pixel);
    font-size:0.7rem;letter-spacing:4px;color:var(--text-muted);
    margin-bottom:12px;
}
.hero-name{
    display:block;font-family:var(--pixel);
    font-size:clamp(1.2rem,4vw,2rem);font-weight:400;
    letter-spacing:2px;line-height:1.6;color:var(--yellow);
    text-shadow:0 0 30px var(--yellow-glow), 4px 4px 0 rgba(255,45,149,0.3);
}
.hero-desc{
    font-size:1.1rem;color:var(--text-secondary);
    line-height:2;margin-bottom:32px;max-width:520px;
    margin-left:auto;margin-right:auto;
}
.hero-motto{
    display:inline-block;margin-top:8px;
    color:var(--cyan);font-size:1.05rem;letter-spacing:1px;
    font-family:var(--heading);font-weight:600;
    text-shadow:0 0 12px var(--cyan-glow);
}

/* ====== Pixel Buttons ====== */
.hero-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:56px}

.btn{
    display:inline-flex;align-items:center;gap:8px;
    padding:14px 28px;
    font-size:0.72rem;font-weight:400;cursor:pointer;
    transition:all var(--transition);border:none;
    font-family:var(--pixel);letter-spacing:1px;
    text-transform:uppercase;position:relative;
    image-rendering:pixelated;
}
.btn-primary{
    background:var(--cyan);
    color:var(--bg);
    box-shadow:0 0 20px var(--cyan-glow), 4px 4px 0 #006677;
    border:2px solid #00d8e8;
}
.btn-primary:hover{
    box-shadow:0 0 32px var(--cyan-glow), 4px 4px 0 #006677;
    transform:translate(-1px,-1px);
}
.btn-primary:active{
    transform:translate(4px,4px);
    box-shadow:0 0 12px var(--cyan-glow);
}
.btn-tactical{
    background:transparent;color:var(--text);
    border:2px solid var(--border);
    box-shadow:4px 4px 0 rgba(0,0,0,0.5);
}
.btn-tactical:hover{
    border-color:var(--cyan);
    color:var(--cyan);
    box-shadow:4px 4px 0 rgba(0,0,0,0.5), 0 0 16px var(--cyan-glow);
    transform:translate(-1px,-1px);
}
.btn-tactical:active{
    transform:translate(4px,4px);
    box-shadow:none;
}
.btn-block{width:100%;justify-content:center}

/* Hero Stats */
.hero-stats{display:flex;gap:56px;justify-content:center;flex-wrap:wrap}
.stat-item{text-align:center}
.stat-number{
    font-family:var(--pixel);font-size:0.85rem;
    letter-spacing:2px;color:var(--text-secondary);
}
.stat-big{
    font-size:2.4rem;color:var(--cyan);
    text-shadow:0 0 16px var(--cyan-glow);
    font-family:var(--pixel);
}
.stat-label{
    display:block;font-size:0.72rem;color:var(--text-muted);
    font-weight:600;letter-spacing:2px;margin-top:6px;
    text-transform:uppercase;font-family:var(--pixel);
}

/* Scroll indicator */
.scroll-indicator{
    position:absolute;bottom:30px;left:50%;transform:translateX(-50%);
    display:flex;flex-direction:column;align-items:center;gap:6px;
    color:var(--text-muted);font-size:0.72rem;letter-spacing:2px;
    z-index:1;text-transform:uppercase;font-family:var(--pixel);
    animation:pixelBounce 2s ease-in-out infinite;
}
@keyframes pixelBounce{
    0%,100%{transform:translateX(-50%) translateY(0)}
    30%{transform:translateX(-50%) translateY(10px)}
}

/* ====== Section Headers ====== */
.section-header{text-align:center;margin-bottom:60px}
.section-tag{
    display:inline-block;padding:6px 18px;
    background:rgba(0,240,255,0.05);color:var(--cyan);
    font-size:0.7rem;letter-spacing:3px;
    font-family:var(--pixel);
    border:2px solid rgba(0,240,255,0.2);
    margin-bottom:16px;text-transform:uppercase;
    box-shadow:0 0 12px rgba(0,240,255,0.08);
}
.section-title{
    font-family:var(--pixel);
    font-size:clamp(1rem,3vw,1.35rem);font-weight:400;
    letter-spacing:2px;margin-bottom:10px;text-transform:uppercase;
    color:#fff;
    text-shadow:0 0 20px rgba(255,255,255,0.1);
}
.section-desc{
    font-size:1rem;color:var(--text-muted);max-width:500px;margin:0 auto;
}

/* ====== Cards (Pixel Style) ====== */
.about-card{
    background:var(--surface);
    border:2px solid var(--border);
    padding:28px 24px;position:relative;
    opacity:0;transform:translateY(20px);
    transition:all .5s ease;
    box-shadow:3px 3px 0 rgba(0,0,0,0.4);
}
.about-card.visible{opacity:1;transform:translateY(0)}
.about-card:hover{
    border-color:var(--cyan);
    box-shadow:3px 3px 0 rgba(0,0,0,0.5), 0 0 24px rgba(0,240,255,0.08);
}
.card-header{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.card-icon{display:inline-flex;align-items:center;justify-content:center}
.card-badge{
    font-family:var(--pixel);font-size:0.6rem;letter-spacing:2px;
    color:var(--cyan);padding:4px 10px;
    background:rgba(0,240,255,0.06);border:2px solid rgba(0,240,255,0.15);
    text-transform:uppercase;
}
.card-badge.green{color:var(--green);background:rgba(0,255,136,0.06);border-color:rgba(0,255,136,0.15)}
.about-card p{font-size:0.95rem;color:var(--text-secondary);line-height:1.8}
.about-card p em{color:var(--cyan);font-style:normal;font-weight:600}
.about-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.about-tags span{
    padding:5px 12px;font-size:0.75rem;color:var(--text-muted);
    background:var(--bg);border:2px solid var(--border);font-weight:500;
    transition:all var(--transition);
}
.about-tags span:hover{border-color:var(--cyan);color:var(--cyan)}
.about-details{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.detail-row{
    display:flex;align-items:center;gap:12px;font-size:0.85rem;
    padding:8px 14px;background:var(--bg);border-left:3px solid var(--cyan);
}
.detail-lbl{color:var(--text-muted);font-weight:600;font-size:0.72rem;letter-spacing:2px;text-transform:uppercase;min-width:48px}
.online{color:var(--green);font-weight:600}

/* ====== Team Members ====== */
.member-card .card-header{gap:14px;align-items:center}
.member-avatar{
    width:44px;height:44px;
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-size:1.1rem;font-weight:900;
    flex-shrink:0;
    border:2px solid rgba(255,255,255,0.3);
    box-shadow:2px 2px 0 rgba(0,0,0,0.5);
}
.member-hobbies{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.member-hobbies span{
    padding:4px 10px;font-size:0.78rem;
    background:rgba(0,240,255,0.06);color:var(--cyan);
    border:2px solid rgba(0,240,255,0.12);
    font-weight:600;font-family:var(--heading);letter-spacing:0.5px;
}
.member-card .card-badge{font-size:0.62rem;white-space:nowrap}
.member-card p{font-size:0.9rem;color:var(--text-secondary);line-height:1.7}
.member-card p em{color:var(--cyan);font-style:normal}

/* ====== Skills ====== */
.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}
.skill-card{
    background:var(--surface);border:2px solid var(--border);
    padding:28px 22px;position:relative;
    opacity:0;transform:translateY(20px);transition:all .5s ease;
    box-shadow:3px 3px 0 rgba(0,0,0,0.4);
}
.skill-card.visible{opacity:1;transform:translateY(0)}
.skill-card::before{
    content:'';position:absolute;top:0;left:0;width:100%;height:4px;
    background:var(--cyan);
    opacity:0;transition:opacity var(--transition);
    box-shadow:0 0 10px var(--cyan-glow);
}
.skill-card:hover{
    border-color:var(--cyan);
    box-shadow:3px 3px 0 rgba(0,0,0,0.5), 0 4px 24px rgba(0,240,255,0.1);
    transform:translateY(-4px)!important;
}
.skill-card:hover::before{opacity:1}
.skill-rank{
    font-family:var(--pixel);font-size:1.5rem;
    color:rgba(0,240,255,0.08);position:absolute;top:12px;right:16px;
}
.skill-icon-wrap{display:inline-flex;align-items:center;justify-content:center;margin-bottom:14px}
.skill-card h4{
    font-family:var(--pixel);font-size:0.75rem;font-weight:400;
    margin-bottom:8px;letter-spacing:1px;text-transform:uppercase;
}
.skill-card p{font-size:0.85rem;color:var(--text-muted);margin-bottom:16px}
.skill-meter{height:6px;background:var(--border);overflow:hidden}
.skill-fill{
    height:100%;
    background:linear-gradient(90deg, var(--cyan), #00d8e8);
    transition:width 1.5s ease;
    box-shadow:0 0 8px var(--cyan-glow);
}

/* ====== Video ====== */
.video-wrapper {
    position:relative;width:100%;max-width:900px;margin:0 auto;
    border:2px solid var(--border);overflow:hidden;
    box-shadow:3px 3px 0 rgba(0,0,0,0.5);
    background:#000;transition:all var(--transition);
}
.video-wrapper:hover {
    border-color:var(--cyan);
    box-shadow:3px 3px 0 rgba(0,0,0,0.5), 0 0 24px var(--cyan-glow);
}
.video-wrapper iframe,
.video-wrapper video {
    display:block;width:100%;height:506px;border:none;
}
@media(max-width:768px){.video-wrapper iframe,.video-wrapper video{height:240px}}

/* ====== Game Cards (Pixel/8-bit Cartridge Style) ====== */
.games-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.game-card{
    display:flex;align-items:center;gap:16px;
    background:var(--surface);border:2px solid var(--border);
    padding:22px 24px;overflow:hidden;position:relative;
    opacity:0;transform:translateY(20px);
    transition:all .5s ease;
    box-shadow:3px 3px 0 rgba(0,0,0,0.4);
    image-rendering:pixelated;
}
.game-card.visible{opacity:1;transform:translateY(0)}
.game-card::after{
    content:'';position:absolute;top:0;left:0;right:0;height:3px;
    transition:opacity var(--transition);opacity:0;
}
.game-card:hover{transform:translateY(-4px)!important}
.game-card:hover::after{opacity:1}
.game-thumb{
    width:64px;height:64px;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:4px;
    flex-shrink:0;position:relative;
    border:2px solid rgba(255,255,255,0.1);
    box-shadow:2px 2px 0 rgba(0,0,0,0.5);
}
.game-emoji{display:flex;align-items:center;justify-content:center}
.game-badge{
    font-size:0.62rem;font-weight:400;letter-spacing:1px;
    text-transform:uppercase;padding:2px 6px;
    background:rgba(0,0,0,.5);color:#fff;
    font-family:var(--pixel);
}
.game-info h3{
    font-family:var(--pixel);font-size:0.7rem;font-weight:400;
    margin-bottom:4px;letter-spacing:0.5px;text-transform:uppercase;
}
.game-info p{font-size:0.82rem;color:var(--text-muted)}

/* Game card color themes */
.game-shooting .game-thumb{background:rgba(0,240,255,0.15);border-color:rgba(0,240,255,0.3)}
.game-shooting:hover{border-color:var(--cyan);box-shadow:3px 3px 0 rgba(0,0,0,0.5), 0 0 20px rgba(0,240,255,0.15)}
.game-shooting::after{background:var(--cyan);box-shadow:0 0 8px var(--cyan-glow)}
.game-space .game-thumb{background:rgba(59,130,246,0.15);border-color:rgba(59,130,246,0.3)}
.game-space:hover{border-color:#3b82f6;box-shadow:3px 3px 0 rgba(0,0,0,0.5), 0 0 20px rgba(59,130,246,0.15)}
.game-space::after{background:#3b82f6;box-shadow:0 0 8px rgba(59,130,246,0.4)}
.game-bio .game-thumb{background:rgba(220,38,38,0.15);border-color:rgba(220,38,38,0.3)}
.game-bio:hover{border-color:#dc2626;box-shadow:3px 3px 0 rgba(0,0,0,0.5), 0 0 20px rgba(220,38,38,0.15)}
.game-bio::after{background:#dc2626;box-shadow:0 0 8px rgba(220,38,38,0.4)}
.game-sniper .game-thumb{background:rgba(59,130,246,0.15);border-color:rgba(59,130,246,0.3)}
.game-sniper:hover{border-color:#3b82f6;box-shadow:3px 3px 0 rgba(0,0,0,0.5), 0 0 20px rgba(59,130,246,0.15)}
.game-sniper::after{background:#3b82f6;box-shadow:0 0 8px rgba(59,130,246,0.4)}
.game-tank .game-thumb{background:rgba(245,158,11,0.15);border-color:rgba(245,158,11,0.3)}
.game-tank:hover{border-color:#f59e0b;box-shadow:3px 3px 0 rgba(0,0,0,0.5), 0 0 20px rgba(245,158,11,0.15)}
.game-tank::after{background:#f59e0b;box-shadow:0 0 8px rgba(245,158,11,0.4)}
.game-tomb .game-thumb{background:rgba(180,83,9,0.15);border-color:rgba(180,83,9,0.3)}
.game-tomb:hover{border-color:#b45309;box-shadow:3px 3px 0 rgba(0,0,0,0.5), 0 0 20px rgba(180,83,9,0.15)}
.game-tomb::after{background:#b45309;box-shadow:0 0 8px rgba(180,83,9,0.4)}
.game-fight .game-thumb{background:rgba(255,215,0,0.15);border-color:rgba(255,215,0,0.3)}
.game-fight:hover{border-color:#ffd700;box-shadow:3px 3px 0 rgba(0,0,0,0.5), 0 0 24px rgba(255,215,0,0.2)}
.game-fight::after{background:#ffd700;box-shadow:0 0 10px rgba(255,215,0,0.5)}

/* ====== Overview (项目概览 & 目标用户) ====== */
.section-overview{background:var(--bg-alt)}
.overview-quote {
    border-left:4px solid var(--cyan);
    padding:18px 24px;margin:20px 0;
    background:rgba(0,240,255,0.03);
    font-size:1.05rem;color:var(--text-secondary);
    box-shadow:2px 2px 0 rgba(0,0,0,0.3);
}
.users-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.user-card{
    background:var(--surface);border:2px solid var(--border);
    padding:24px 16px;text-align:center;transition:all var(--transition);
    box-shadow:3px 3px 0 rgba(0,0,0,0.4);
}
.user-card:hover{
    border-color:var(--cyan);
    box-shadow:3px 3px 0 rgba(0,0,0,0.5), 0 0 20px rgba(0,240,255,0.08);
    transform:translateY(-3px);
}
.user-card .user-emoji{font-size:2.2rem;margin-bottom:10px;display:block;image-rendering:pixelated}
.user-card h4{font-family:var(--pixel);font-size:0.65rem;font-weight:400;margin-bottom:8px;letter-spacing:0.5px;color:var(--text)}
.user-card p{font-size:0.82rem;color:var(--text-muted);line-height:1.6}

/* ====== Highlights (核心创意 & 项目亮点) ====== */
.highlights-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.highlight-card{
    background:var(--surface);border:2px solid var(--border);
    padding:28px 24px;transition:all var(--transition);
    position:relative;overflow:hidden;
    box-shadow:3px 3px 0 rgba(0,0,0,0.4);
}
.highlight-card::before{
    content:'';position:absolute;top:0;left:0;right:0;height:3px;
    transition:opacity var(--transition);opacity:0;
}
.highlight-card:nth-child(1):hover{border-color:var(--cyan)}
.highlight-card:nth-child(1)::before{background:var(--cyan);box-shadow:0 0 8px var(--cyan-glow)}
.highlight-card:nth-child(2):hover{border-color:var(--magenta)}
.highlight-card:nth-child(2)::before{background:var(--magenta);box-shadow:0 0 8px var(--magenta-glow)}
.highlight-card:nth-child(3):hover{border-color:var(--green)}
.highlight-card:nth-child(3)::before{background:var(--green);box-shadow:0 0 8px var(--green-glow)}
.highlight-card:nth-child(4):hover{border-color:var(--yellow)}
.highlight-card:nth-child(4)::before{background:var(--yellow);box-shadow:0 0 8px var(--yellow-glow)}
.highlight-card:nth-child(5):hover{border-color:var(--cyan)}
.highlight-card:nth-child(5)::before{background:var(--cyan);box-shadow:0 0 8px var(--cyan-glow)}
.highlight-card:nth-child(6):hover{border-color:var(--magenta)}
.highlight-card:nth-child(6)::before{background:var(--magenta);box-shadow:0 0 8px var(--magenta-glow)}
.highlight-card:hover{transform:translateY(-4px);box-shadow:3px 3px 0 rgba(0,0,0,0.5), 0 8px 32px rgba(0,0,0,0.4)}
.highlight-card:hover::before{opacity:1}
.highlight-card .hl-badge{
    display:inline-block;padding:3px 10px;
    font-family:var(--pixel);font-size:0.6rem;
    letter-spacing:2px;margin-bottom:14px;
    text-transform:uppercase;
}
.hl-badge.cyan{color:var(--cyan);border:2px solid var(--cyan);box-shadow:0 0 8px var(--cyan-glow)}
.hl-badge.magenta{color:var(--magenta);border:2px solid var(--magenta);box-shadow:0 0 8px var(--magenta-glow)}
.hl-badge.green{color:var(--green);border:2px solid var(--green)}
.hl-badge.yellow{color:var(--yellow);border:2px solid var(--yellow)}
.highlight-card h4{font-family:var(--pixel);font-size:0.72rem;font-weight:400;margin-bottom:8px;text-transform:uppercase;letter-spacing:1px}
.highlight-card p{font-size:0.88rem;color:var(--text-muted);line-height:1.6}

/* ====== Rank System (段位系统) ====== */
.rank-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.rank-card{
    background:var(--surface);border:2px solid var(--border);
    padding:22px 12px;text-align:center;transition:all var(--transition);
    box-shadow:3px 3px 0 rgba(0,0,0,0.4);
}
.rank-card:hover{transform:translateY(-4px);box-shadow:3px 3px 0 rgba(0,0,0,0.5), 0 6px 24px rgba(0,0,0,0.5)}
.rank-card:nth-child(1):hover{border-color:#cd7f32;box-shadow:3px 3px 0 rgba(0,0,0,0.5), 0 6px 24px rgba(205,127,50,0.2)}
.rank-card:nth-child(2):hover{border-color:#c0c0c0;box-shadow:3px 3px 0 rgba(0,0,0,0.5), 0 6px 24px rgba(192,192,192,0.15)}
.rank-card:nth-child(3):hover{border-color:#ffd700;box-shadow:3px 3px 0 rgba(0,0,0,0.5), 0 6px 24px rgba(255,215,0,0.2)}
.rank-card:nth-child(4):hover{border-color:var(--cyan)}
.rank-card:nth-child(5):hover{border-color:var(--purple)}
.rank-card:nth-child(6):hover{border-color:var(--magenta);box-shadow:3px 3px 0 rgba(0,0,0,0.5), 0 6px 24px var(--magenta-glow)}
.rank-icon{font-size:2rem;margin-bottom:8px;display:block;image-rendering:pixelated}
.rank-name{font-family:var(--pixel);font-size:0.65rem;font-weight:400;letter-spacing:0.5px;margin-bottom:8px;text-transform:uppercase}
.rank-desc{font-size:0.75rem;color:var(--text-muted);line-height:1.6}

/* ====== AI & AIGC ====== */
.section-ai{background:var(--bg-alt)}
.ai-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.ai-card{
    background:var(--surface);border:2px solid var(--border);
    padding:28px 24px;transition:all var(--transition);
    box-shadow:3px 3px 0 rgba(0,0,0,0.4);
}
.ai-card:hover{border-color:var(--magenta);box-shadow:3px 3px 0 rgba(0,0,0,0.5), 0 0 24px var(--magenta-glow)}
.ai-card h4{font-family:var(--pixel);font-size:0.75rem;font-weight:400;margin-bottom:16px;text-transform:uppercase;letter-spacing:1px}
.ai-feature{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--border)}
.ai-feature:last-child{border-bottom:none}
.ai-feature .ai-icon{font-size:1.4rem;flex-shrink:0;width:36px;text-align:center;image-rendering:pixelated}
.ai-feature strong{display:block;font-size:0.95rem;color:var(--text);margin-bottom:2px;font-family:var(--heading);letter-spacing:0.5px}
.ai-feature span{font-size:0.85rem;color:var(--text-muted);line-height:1.5}
.ai-table-wrap{overflow-x:auto}
.ai-table{width:100%;border-collapse:collapse;font-size:0.8rem}
.ai-table th{
    font-family:var(--pixel);font-size:0.62rem;color:var(--magenta);
    text-transform:uppercase;letter-spacing:1px;
    text-align:left;padding:10px 12px;
    border-bottom:2px solid var(--border);background:var(--bg);
}
.ai-table td{padding:10px 12px;border-bottom:1px solid var(--border);color:var(--text-muted);font-size:0.85rem}
.ai-table tr:hover td{background:rgba(255,45,149,0.03)}

/* ====== Timeline ====== */
.timeline-container{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.timeline-track{position:relative;padding-left:28px}
.timeline-track::before{
    content:'';position:absolute;left:6px;top:0;bottom:0;width:3px;
    background:linear-gradient(to bottom, var(--cyan), var(--magenta), var(--yellow), var(--green));
    box-shadow:0 0 8px var(--cyan-glow);
}
.timeline-node{position:relative;margin-bottom:30px;padding-left:24px}
.timeline-node::before{
    content:'';position:absolute;left:-25px;top:4px;
    width:12px;height:12px;background:var(--bg);
    border:2px solid var(--cyan);
    image-rendering:pixelated;
}
.timeline-node:nth-child(2)::before{border-color:var(--magenta)}
.timeline-node:nth-child(3)::before{border-color:var(--yellow)}
.timeline-node:nth-child(4)::before{border-color:var(--green)}
.timeline-date{
    font-family:var(--pixel);font-size:0.62rem;color:var(--cyan);
    margin-bottom:4px;letter-spacing:1px;text-transform:uppercase;
}
.timeline-node:nth-child(2) .timeline-date{color:var(--magenta)}
.timeline-node:nth-child(3) .timeline-date{color:var(--yellow)}
.timeline-node:nth-child(4) .timeline-date{color:var(--green)}
.timeline-node h4{font-size:1rem;font-weight:700;margin-bottom:4px;color:var(--text);font-family:var(--heading);letter-spacing:1px;text-transform:uppercase}
.timeline-node p{font-size:0.78rem;color:var(--text-muted);line-height:1.6}
.rhythm-card{
    background:var(--surface);border:2px solid var(--border);
    padding:28px 24px;box-shadow:3px 3px 0 rgba(0,0,0,0.4);
}
.rhythm-card h4{font-family:var(--pixel);font-size:0.72rem;font-weight:400;margin-bottom:16px;text-transform:uppercase;letter-spacing:1px}
.rhythm-row{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--border);font-size:0.9rem}
.rhythm-row:last-child{border-bottom:none}
.rhythm-time{font-family:var(--pixel);font-size:0.62rem;color:var(--yellow);min-width:52px;letter-spacing:1px}
.rhythm-row:nth-child(2) .rhythm-time{color:var(--cyan)}
.rhythm-row:nth-child(3) .rhythm-time{color:var(--magenta)}
.rhythm-row:nth-child(4) .rhythm-time{color:var(--green)}

/* ====== MVP ====== */
.mvp-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.mvp-table-wrap{overflow-x:auto}
.mvp-table{width:100%;border-collapse:collapse;font-size:0.8rem}
.mvp-table th{
    font-family:var(--pixel);font-size:0.62rem;color:var(--cyan);
    text-transform:uppercase;letter-spacing:1px;
    text-align:left;padding:10px 12px;
    border-bottom:2px solid var(--border);background:var(--bg);
}
.mvp-table td{padding:10px 12px;border-bottom:1px solid var(--border);color:var(--text-muted);font-size:0.85rem}
.mvp-table tr:hover td{background:rgba(0,240,255,0.02)}
.tag{display:inline-block;padding:4px 12px;font-size:0.62rem;font-weight:400;font-family:var(--pixel);letter-spacing:1px;text-transform:uppercase;border:2px solid}
.tag-p0{background:var(--magenta);color:#fff;border-color:var(--magenta)}
.tag-p1{background:var(--cyan);color:var(--bg);border-color:var(--cyan)}
.tag-p2{background:var(--text-muted);color:var(--bg);border-color:var(--text-muted)}
.mvp-checklist{
    background:var(--surface);border:2px solid var(--border);
    padding:28px 24px;box-shadow:3px 3px 0 rgba(0,0,0,0.4);
}
.mvp-checklist h4{font-family:var(--pixel);font-size:0.72rem;font-weight:400;margin-bottom:16px;text-transform:uppercase;letter-spacing:1px}
.checklist{list-style:none}
.checklist li{
    display:flex;align-items:center;gap:12px;
    padding:12px 0;border-bottom:1px solid var(--border);
    font-size:0.92rem;color:var(--text-secondary);
}
.checklist li:last-child{border-bottom:none}
.check-icon{
    width:24px;height:24px;border:2px solid var(--green);
    color:var(--green);display:flex;align-items:center;justify-content:center;
    font-size:0.65rem;flex-shrink:0;
    font-family:var(--pixel);
}

/* ====== Risk ====== */
.section-risk{background:var(--bg-alt)}
.risk-table-wrap{overflow-x:auto}
.risk-table{width:100%;border-collapse:collapse;font-size:0.82rem}
.risk-table th{
    font-family:var(--pixel);font-size:0.62rem;color:var(--cyan);
    text-transform:uppercase;letter-spacing:1px;
    text-align:left;padding:12px 14px;
    border-bottom:2px solid var(--border);background:var(--bg);
}
.risk-table td{padding:12px 14px;border-bottom:1px solid var(--border);color:var(--text-muted);font-size:0.85rem;line-height:1.5}
.risk-table tr:hover td{background:rgba(0,240,255,0.02)}
.risk-high{color:var(--magenta);font-weight:700;text-shadow:0 0 6px var(--magenta-glow)}
.risk-mid{color:var(--yellow);font-weight:700}
.risk-low{color:var(--green)}
.risk-table td strong{color:var(--text)}

/* ====== Contact ====== */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.contact-card{
    background:var(--surface);border:2px solid var(--border);
    padding:28px;opacity:0;transform:translateY(20px);
    transition:all .5s ease;
    box-shadow:3px 3px 0 rgba(0,0,0,0.4);
}
.contact-card.visible{opacity:1;transform:translateY(0)}
.contact-card:hover{border-color:var(--cyan);box-shadow:3px 3px 0 rgba(0,0,0,0.5), 0 0 24px var(--cyan-glow)}
.contact-card p{color:var(--text-secondary);font-size:0.95rem;margin-bottom:20px;line-height:1.8}
.social-links{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.social-card{
    background:var(--surface);border:2px solid var(--border);
    padding:22px 16px;display:flex;flex-direction:column;
    align-items:center;gap:4px;text-align:center;
    transition:all var(--transition);
    opacity:0;transform:translateY(20px);
    box-shadow:2px 2px 0 rgba(0,0,0,0.4);
}
.social-card.visible{opacity:1;transform:translateY(0)}
.social-card:hover{
    border-color:var(--cyan);
    box-shadow:2px 2px 0 rgba(0,0,0,0.5), 0 0 20px var(--cyan-glow);
    transform:translateY(-2px);
}
.social-icon{display:inline-flex;align-items:center;justify-content:center}
.social-card span{font-weight:700;font-family:var(--pixel);letter-spacing:1px;font-size:0.72rem;text-transform:uppercase}
.social-card small{color:var(--text-muted);font-size:0.72rem}

/* ====== Footer ====== */
.footer{
    background:#060610;border-top:2px solid var(--border);padding:28px 0;
}
.footer-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;flex-wrap:wrap;gap:12px}
.footer-logo{font-family:var(--pixel);font-size:0.7rem;letter-spacing:2px;color:var(--cyan);text-shadow:0 0 8px var(--cyan-glow);text-transform:uppercase}
.footer-status{font-family:var(--pixel);font-size:0.65rem;color:var(--text-muted);letter-spacing:1px;text-transform:uppercase}
.footer-bottom{border-top:1px solid var(--border);padding-top:14px;text-align:center;font-size:0.82rem;color:var(--text-muted);letter-spacing:1px}

/* ====== Scroll Reveal ====== */
.skill-card,.about-card,.contact-card,.social-card,.game-card{opacity:0;transform:translateY(20px);transition:all .5s ease}
.skill-card.visible,.about-card.visible,.contact-card.visible,.social-card.visible,.game-card.visible{opacity:1;transform:translateY(0)}

/* ====== Responsive ====== */
@media(max-width:768px){
    .nav-menu{
        position:fixed;top:0;right:-100%;width:280px;height:100vh;
        background:rgba(8,8,18,.98);
        flex-direction:column;padding:80px 32px 32px;
        border-left:2px solid var(--border);
        transition:right .3s ease;gap:4px;
    }
    .nav-menu.active{right:0}
    .nav-toggle{display:flex}
    .nav-link{font-size:0.7rem;padding:12px 16px}
    .about-grid{grid-template-columns:1fr}
    .contact-grid{grid-template-columns:1fr}
    .games-grid{grid-template-columns:repeat(2,1fr)}
    .social-links{grid-template-columns:1fr 1fr}
    .hero-stats{gap:28px}
    .hero-name{font-size:1rem}
    .section{padding:70px 0}
    .users-grid{grid-template-columns:1fr 1fr}
    .highlights-grid{grid-template-columns:1fr 1fr}
    .rank-grid{grid-template-columns:repeat(3,1fr)}
    .ai-grid{grid-template-columns:1fr}
    .timeline-container{grid-template-columns:1fr}
    .mvp-grid{grid-template-columns:1fr}
}
@media(max-width:480px){
    .games-grid{grid-template-columns:1fr}
    .hero-actions{flex-direction:column;align-items:center}
    .btn{width:100%;justify-content:center}
    .hero-stats{gap:18px}
    .stat-big{font-size:1.5rem}
    .skills-grid{grid-template-columns:1fr}
    .social-links{grid-template-columns:1fr}
    .hero-name{font-size:0.8rem}
    .users-grid{grid-template-columns:1fr}
    .highlights-grid{grid-template-columns:1fr}
    .rank-grid{grid-template-columns:1fr 1fr}
}

/* Animation delays */
.skill-card:nth-child(1){transition-delay:.04s}
.skill-card:nth-child(2){transition-delay:.08s}
.skill-card:nth-child(3){transition-delay:.12s}
.skill-card:nth-child(4){transition-delay:.16s}
.skill-card:nth-child(5){transition-delay:.2s}
.game-card:nth-child(1){transition-delay:.04s}
.game-card:nth-child(2){transition-delay:.08s}
.game-card:nth-child(3){transition-delay:.12s}
.game-card:nth-child(4){transition-delay:.16s}
.game-card:nth-child(5){transition-delay:.20s}
.game-card:nth-child(6){transition-delay:.24s}
.social-card:nth-child(1){transition-delay:.04s}
.social-card:nth-child(2){transition-delay:.08s}
.social-card:nth-child(3){transition-delay:.12s}
.social-card:nth-child(4){transition-delay:.16s}

@media print{
    .navbar,.bg-grid,.bg-smoke,.scroll-indicator,.scanline-overlay,.noise-overlay,.crt-vignette{display:none}
    .section{padding:40px 0}
    body{color:#000;background:#fff}
}