/* ============ 本地像素字体 ============ */
@font-face {
    font-family: 'Press Start 2P';
    src: url('../fonts/PressStart2P.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root{
    --bg-dark:#0f1115;
    --bg-panel:#1a1d24;
    --bg-panel-2:#22262f;
    --border:#2e3340;
    --grass:#5ec45e;
    --grass-bright:#8be08b;
    --grass-dark:#3a8a3a;
    --diamond:#4dd0e1;
    --gold:#ffd54f;
    --gold-bright:#ffe98a;
    --purple:#ce93d8;
    --blue:#4f88ff;
    --red:#ef5350;
    --text:#e8eaed;
    --text-dim:#9aa0a8;
}

.link-green{
    color:#88dd88;
    text-decoration:none;
}
.link-green:visited{
    color:#88dd88;
}
.link-green:hover{
    color:#aaffaa;
}

.link-dim{
    color:#9aa0a8;
    text-decoration:none;
}
.link-dim:visited{
    color:#9aa0a8;
}
.link-dim:hover{
    color:#afb5be;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    font-family:'Noto Sans SC',-apple-system,BlinkMacSystemFont,'Microsoft YaHei',sans-serif;
    background:var(--bg-dark);
    color:var(--text);
    line-height:1.7;
    overflow-x:hidden;
}
.pixel{font-family:'Press Start 2P','Noto Sans SC',monospace;letter-spacing:1px}
.command{
    font-family:'Press Start 2P','Noto Sans SC',monospace;
    letter-spacing:1px;
    color: var(--purple);
    font-size:10px;
}
.item{
    letter-spacing:1px;
    font-size:14px;
    font-weight:bold;
    color: var(--c, var(--blue));
}

/* ============ 顶部导航 ============ */
nav{
    position:sticky;top:0;z-index:100;
    background:rgba(15,17,21,.85);
    backdrop-filter:blur(6px);
    border-bottom:2px solid var(--border);
}
.nav-inner{
    max-width:1200px;margin:0 auto;
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 24px;
}
.logo{display:flex;align-items:center;gap:12px;font-size:18px;font-weight:700;color:var(--grass)}
.logo .cube{
    width:28px;
    height:28px;
    background-image: url('images/MOFS_LOGO_ICON_X64.png');
    background-size: cover;       /* 填满方块区域 */
    background-position:center;   /* 居中 */
    background-repeat:no-repeat;
    box-shadow:inset -4px -4px 0 rgba(0,0,0,.25),inset 4px 4px 0 rgba(255,255,255,.15);
    image-rendering:pixelated;
}
.nav-links{display:flex;gap:28px;list-style:none;align-items:center;position:relative}
.nav-underline{
    position:absolute;
    bottom:-16px;
    height:3px;
    background:var(--grass);
    border-radius:2px;
    box-shadow:0 0 10px var(--grass),0 0 20px rgba(94,196,94,.5);
    left:0;width:0;opacity:0;
    transition:left .45s cubic-bezier(.4,0,.2,1),
               width .45s cubic-bezier(.4,0,.2,1),
               opacity .3s ease;
    pointer-events:none;
}
.nav-underline.active{opacity:1}
.nav-links a{
    color:var(--text-dim);
    text-decoration:none;
    font-size:15px;
    padding:4px 2px;
    border-radius:3px;
    /* 鼠标移出时：1 秒平滑淡出 */
    transition:color .5s ease, text-shadow .5s ease;
}
.nav-links a:hover{
    /* 鼠标移入：立即变色发光，无延迟 */
    transition:none;
    color:#ffffff;
    text-shadow:
        0 0 8px var(--grass),
        0 0 20px rgba(94,196,94,.8),
        0 0 32px rgba(94,196,94,.5);
}
.nav-links a.map-link{
    color:var(--gold);
    font-weight:700;
}
.nav-links a.map-link:hover{
    color:#fff;
    text-shadow:
        0 0 8px var(--gold),
        0 0 20px rgba(255,213,79,.85),
        0 0 32px rgba(255,213,79,.5);
}

/* ============ Hero ============ */
.hero{
    position:relative;
    padding:100px 24px 120px;
    text-align:center;
    background:
            radial-gradient(ellipse at top,var(--hero-glow-color) 0%,transparent 60%),
            linear-gradient(180deg,#0f1115 0%,#141820 100%);
    border-bottom:2px solid var(--border);
    overflow:hidden;
    transition: all 0.3s ease;
}
.hero.online{
    --hero-glow-color: rgba(94,196,94,.12); /* 绿色 在线 */
}
.hero.offline{
    --hero-glow-color: rgba(224, 198, 90,.12); /* 淡黄 离线 */
}
.hero.error{
    --hero-glow-color: rgba(224,90,90,.12); /* 红色 错误 */
}
.hero::before{
    content:"";position:absolute;inset:0;
    background-image:
            linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),
            linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
    background-size:32px 32px;
    pointer-events:none;
}
/* ============ Hero 状态徽章 ============ */
.hero-badge{
    display:inline-flex;align-items:center;gap:8px;
    padding:6px 16px;border:1px solid var(--grass-dark);
    background:rgba(94,196,94,.08);
    color:var(--grass);font-size:13px;border-radius:4px;
    margin-bottom:28px;
    transition: all 0.3s ease;
}
.hero-badge .dot{
    width:8px;height:8px;border-radius:50%;
    transition: all 0.3s ease;
}
/* online：绿色 + 呼吸动画 */
.hero-badge.online{
    border-color: var(--grass-dark);
    background:rgba(94,196,94,.08);
    color:var(--grass);
}
.hero-badge.online .dot{
    background:var(--grass);
    animation:pulse 1s infinite;
}
/* offline：淡黄色，无动画 */
.hero-badge.offline{
    border-color: rgba(224, 198, 90, 0.4);
    background:rgba(224, 198, 90,.08);
    color:#e0c65a;
}
.hero-badge.offline .dot{
    background:#e0c65a;
    animation:pulse 2s infinite;
}
/* error：红色，无动画 */
.hero-badge.error{
    border-color: rgba(224,90,90,0.4);
    background:rgba(224,90,90,.08);
    color:#e05a5a;
}
.hero-badge.error .dot{
    background:#e05a5a;
    animation:none;
}
.dot{width:8px;height:8px;background:var(--grass);border-radius:50%;animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.hero h1{
    font-size:56px;font-weight:900;
    background:linear-gradient(180deg,#fff 0%,var(--grass) 100%);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
    margin-bottom:16px;
    text-shadow:0 0 40px rgba(94,196,94,.3);
}
.hero .sub{color:var(--text-dim);font-size:18px;margin-bottom:40px;max-width:600px;margin-left:auto;margin-right:auto}

/* ============ IP 复制框 ============ */
.ip-box{
    display:inline-flex;align-items:stretch;gap:0;
    background:var(--bg-panel);
    border:2px solid var(--border);
    border-radius:6px;
    overflow:hidden;
    box-shadow:0 8px 30px rgba(0,0,0,.4);
}
/* 点击瞬间：scale 只播一次 放大→缩回；发光 0.2s 淡入、随后 1.5s 淡出 */
.ip-box.pop{
    animation:
        ip-pop .35s ease-out,
        glow-fade 1.7s ease-out forwards;
}
@keyframes ip-pop{
    0%   { transform:scale(1);    }
    40%  { transform:scale(1.07); }
    100% { transform:scale(1);    }
}
@keyframes glow-fade{
    0%   { box-shadow:0 0 0 0 rgba(94,196,94,0),    0 0 0 0 rgba(94,196,94,0),      0 8px 30px rgba(0,0,0,.4);
           border-color:var(--border); }
    12%  { box-shadow:0 0 0 5px rgba(94,196,94,.45), 0 0 36px rgba(94,196,94,.78),  0 8px 30px rgba(0,0,0,.4);
           border-color:var(--grass); }
    100% { box-shadow:0 0 0 0 rgba(94,196,94,0),    0 0 0 0 rgba(94,196,94,0),      0 8px 30px rgba(0,0,0,.4);
           border-color:var(--border); }
}
.ip-text{
    padding:16px 24px;color:var(--diamond);
    font-family:'Press Start 2P',monospace;font-size:14px;
}
.copy-btn{
    padding:16px 24px;background:var(--grass);color:#0f1115;
    border:none;cursor:pointer;font-weight:700;font-size:15px;
    font-family:'Noto Sans SC',sans-serif;
    transition:background .15s, color .8s ease;
}
.copy-btn:hover{background:var(--grass-dark)}
/* "已复制"状态：底色保持深绿，只有文字渐隐 */
.copy-btn.copied{
    background:#2e7d32;color:#fff;
}
.copy-btn.fade-out{
    color:transparent;
}

/* ============ 通用 section ============ */
section{max-width:1200px;margin:0 auto;padding:80px 24px}
.section-title{text-align:center;margin-bottom:50px}
.section-title h2{font-size:32px;margin-bottom:10px}
.section-title p{color:var(--text-dim)}

/* ============ 特性卡片 ============ */
.features{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:20px;
}
.card{
    background:var(--bg-panel);
    border:2px solid var(--border);
    border-radius:6px;padding:28px;
    transition:transform .2s,border-color .2s;
}
.card:hover{transform:translateY(-4px);border-color:var(--grass)}
.card .icon{
    width:48px;height:48px;margin-bottom:16px;
    display:flex;align-items:center;justify-content:center;
    background:var(--bg-panel-2);border-radius:4px;font-size:24px;
}
.card .icon img{
    width:24px;
    height:24px;
    object-fit:contain;
    image-rendering:pixelated;
    filter: drop-shadow(3px 3px 1px rgba(0,0,0,0.6));
}
.card h3{font-size:18px;margin-bottom:8px;color:var(--grass)}
.card p{color:var(--text-dim);font-size:14px}

/* ============ 服务器信息条 ============ */
.stats{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:16px;margin-top:40px;
    max-width:720px;margin-left:auto;margin-right:auto;
}
.stat{
    background:var(--bg-panel);border:2px solid var(--border);
    padding:20px;text-align:center;border-radius:6px;
}
.stat .num{font-size:26px;font-weight:900;color:var(--gold)}
.stat .label{color:var(--text-dim);font-size:13px;margin-top:4px}

/* ============ 玩法模式 ============ */
.modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.mode{
    background:var(--bg-panel);border:2px solid var(--border);
    border-radius:6px;overflow:hidden;
    transition:transform .2s,border-color .2s;
}
.mode:hover{transform:translateY(-4px);border-color:var(--grass)}
.mode .header{
    padding:20px 24px;font-weight:700;font-size:17px;
    border-bottom:2px solid var(--border);
    display:flex;align-items:center;gap:10px;
}
.header img{
    width:20px;
    height:20px;
    object-fit:contain;
    image-rendering:pixelated;
    filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.6));
}
.mode.survival .header{background:linear-gradient(90deg,rgba(94,196,94,.15),transparent);color:var(--grass)}
.mode.portal .header{background:linear-gradient(90deg,rgba(206,147,216,.18),transparent);color:var(--purple)}
.mode.skyland .header{background:linear-gradient(90deg,rgba(255,213,79,.15),transparent);color:var(--gold)}
.mode.future .header{background:linear-gradient(90deg,rgba(77,208,225,.15),transparent);color:var(--diamond)}
.mode .body{padding:20px 24px;color:var(--text-dim);font-size:14px}

/* ============ 加入步骤 ============ */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;counter-reset:step}
.step{
    background:var(--bg-panel);border:2px solid var(--border);
    border-radius:6px;padding:24px;position:relative;
    transition:transform .2s,border-color .2s;
}
.step:hover{transform:translateY(-4px);border-color:var(--grass)}
.step::before{
    counter-increment:step;content:counter(step);
    position:absolute;top:-14px;left:20px;
    width:28px;height:28px;line-height:28px;text-align:center;
    background:var(--grass);color:#0f1115;font-weight:900;
    border-radius:4px;
}
.step h4{margin:8px 0 8px;font-size:16px}
.step p{color:var(--text-dim);font-size:14px}
.step .qq{
    display:inline-block;margin-top:6px;
    padding:3px 10px;background:rgba(255,213,79,.12);
    border:1px solid var(--gold);color:var(--gold);
    border-radius:4px;font-family:'Courier New',monospace;font-weight:700;
}

/* ============ FAQ ============ */
.faq details{
    background:var(--bg-panel);border:2px solid var(--border);
    border-radius:6px;margin-bottom:12px;
    transition:transform .2s,border-color .2s;
}
.faq details:hover{transform:translateY(-4px);border-color:var(--grass)}
.faq summary{transition:color .5s ease, text-shadow .2s ease;padding:18px 22px;cursor:pointer;font-weight:700;color:var(--grass);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+ ";color:var(--text-dim)}
.faq summary:hover{transition:none;color:rgb(192,255,192);text-shadow:0 0 16px rgba(0,96,0,0.5);}
.faq details[open] summary::before{content:"- "}
.faq details p{padding: 0 22px 18px 22px;margin-top:-6px;color:var(--text-dim);font-size:14px}

/* ============ 页脚 ============ */
footer{
    border-top:2px solid var(--border);
    background:var(--bg-panel);
    padding:40px 24px;text-align:center;color:var(--text-dim);font-size:14px;
}
footer .pixel{color:var(--grass);font-size:12px;margin-bottom:12px;display:block}
footer a{color:var(--gold);text-decoration:none}
.footer-inner{
    max-width:860px;margin:0 auto;
    display:flex;flex-direction:column;align-items:center;gap:8px;
}
.footer-meta{color:var(--text-dim);font-size:13px;line-height:1.8}
.footer-meta a{color:var(--text-dim);text-decoration:none}
.footer-meta a:hover{color:#afb5be}
.footer-bottom{
    display:flex;align-items:center;gap:16px;justify-content:center;flex-wrap:wrap;
    font-size:12px;color:var(--text-dim);opacity:.85;
}
.footer-agree{
    color:var(--gold);text-decoration:none;
    border:1px solid rgba(255,213,79,.35);border-radius:4px;
    padding:3px 14px;font-size:12px;
    transition:border-color .2s,color .2s;
}
.footer-agree:hover{color:#fff;border-color:var(--gold)}

/* ============ 字体加载等待：就绪前隐藏页面，就绪后淡入 ============ */
html.font-loading body{opacity:0}
body{transition:opacity .2s ease}

/* ============ 简版导航：返回链接 ============ */
.back-link{
    color:var(--text-dim);
    text-decoration:none;
    font-size:15px;
    transition:color .5s ease, text-shadow .5s ease;
}
.back-link:hover{
    transition:none;
    color:#fff;
    text-shadow:0 0 8px var(--grass),0 0 20px rgba(94,196,94,.8);
}

/* ============ 响应式 ============ */
@media(max-width:768px){
    .nav-links{display:none}
    .hero h1{font-size:34px}
    .ip-text{font-size:11px;padding:14px 16px}
    .copy-btn{padding:14px 16px}
}

/* 汉堡按钮 */
.hamburger {
    display: none;
    background: transparent;
    border: none;
    color:var(--text-dim);
    font-size: 30px;
    cursor: pointer;
    line-height: 1;
    position: relative;
    z-index: 102;
    transition:color .5s ease, text-shadow .5s ease;
}
.hamburger:hover {
    transition:none;
    color:#ffffff;
    text-shadow:
            0 0 8px var(--grass),
            0 0 20px rgba(94,196,94,.8),
            0 0 32px rgba(94,196,94,.5);
}

@media (max-width:768px) {
    .hamburger {
        display: block;
    }

    .nav-inner {
        position: relative;
    }

    /* 移动端导航容器ul */
    .nav-links {
        position: absolute;
        top: 100%;
        right: 0;
        width: 160px;
        margin: 0;

        background: rgba(15,17,21,.85);
        border-bottom: 2px solid var(--border);

        /* 竖排 */
        display: flex;
        flex-direction: column;
        gap: 22px;
        padding: 24px;
        align-items: flex-start;

        /* 默认隐藏状态 */
        visibility: hidden;
        opacity: 0;
        transform: translateY(-24px);
        transition: 0.3s ease;
        z-index: 101;
        pointer-events: none; /* 隐藏的时候不能点击菜单内链接 */
    }

    /* open 激活，显示菜单 */
    .nav-links.open {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    /* 菜单里的每个链接，继承文字样式 */
    .nav-links li a {
        font-size: 1rem;
    }

    /* 隐藏下划线占位li */
    .nav-underline {
        display: none;
    }
}