* { margin:0; padding:0; box-sizing:border-box; }

body {
    background:#000;
    color:#fff;
    overflow:hidden;
    height:100vh;
    width:100vw;
    font-family:'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;
    user-select:none;
}

#starCanvas {
    position:fixed;
    top:0; left:0;
    width:100%; height:100%;
    z-index:0;
}

/* ===== 标题 ===== */
.header-title {
    position:fixed;
    top:18px;
    left:50%;
    transform:translateX(-50%);
    z-index:10;
    font-size:2rem;
    font-weight:700;
    letter-spacing:8px;
    background:linear-gradient(135deg,#00f0ff,#8b5cf6,#ff2d95);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    text-shadow:none;
    animation:titleGlow 3s ease-in-out infinite, fadeDown 1s ease-out;
    white-space:nowrap;
}

@keyframes titleGlow {
    0%, 100% { filter:drop-shadow(0 0 12px rgba(139,92,246,0.3)); }
    50% { filter:drop-shadow(0 0 25px rgba(139,92,246,0.6)); }
}

@keyframes fadeDown {
    from { opacity:0; transform:translateX(-50%) translateY(-20px); }
    to { opacity:1; transform:translateX(-50%) translateY(0); }
}

/* ===== 导航网格 ===== */
.nav-grid {
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    z-index:5;
    display:flex;
    gap:6px;
    padding:10px;
    max-width:96vw;
    flex-wrap:nowrap;
    justify-content:center;
}

.nav-col {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    min-width:120px;
    opacity:0;
    animation:colFadeIn 0.8s ease forwards;
}

.nav-col:nth-child(1) { animation-delay:0.1s; }
.nav-col:nth-child(2) { animation-delay:0.2s; }
.nav-col:nth-child(3) { animation-delay:0.3s; }
.nav-col:nth-child(4) { animation-delay:0.4s; }
.nav-col:nth-child(5) { animation-delay:0.5s; }
.nav-col:nth-child(6) { animation-delay:0.6s; }
.nav-col:nth-child(7) { animation-delay:0.7s; }
.nav-col:nth-child(8) { animation-delay:0.8s; }
.nav-col:nth-child(9) { animation-delay:0.9s; }

@keyframes colFadeIn {
    from { opacity:0; transform:translateY(20px); }
    to { opacity:1; transform:translateY(0); }
}

.col-title {
    font-size:1.1rem;
    font-weight:700;
    letter-spacing:3px;
    padding:10px 14px;
    background:rgba(0,0,0,0.5);
    border-radius:14px;
    border:1px solid rgba(255,255,255,0.12);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    text-align:center;
    width:100%;
    white-space:nowrap;
    transition:all 0.3s ease;
    cursor:pointer;
}

.nav-col:nth-child(1) .col-title { color:#ff6b6b; border-color:rgba(255,107,107,0.3); }
.nav-col:nth-child(2) .col-title { color:#ffd93d; border-color:rgba(255,217,61,0.3); }
.nav-col:nth-child(3) .col-title { color:#6bcb77; border-color:rgba(107,203,119,0.3); }
.nav-col:nth-child(4) .col-title { color:#4d96ff; border-color:rgba(77,150,255,0.3); }
.nav-col:nth-child(5) .col-title { color:#9b59b6; border-color:rgba(155,89,182,0.3); }
.nav-col:nth-child(6) .col-title { color:#1abc9c; border-color:rgba(26,188,156,0.3); }
.nav-col:nth-child(7) .col-title { color:#e84393; border-color:rgba(232,67,147,0.3); }
.nav-col:nth-child(8) .col-title { color:#00cec9; border-color:rgba(0,206,201,0.3); }
.nav-col:nth-child(9) .col-title { color:#fd79a8; border-color:rgba(253,121,168,0.3); }

.col-title:hover {
    transform:scale(1.05);
    box-shadow:0 0 20px rgba(139,92,246,0.2);
}

.col-item {
    font-size:0.9rem;
    font-weight:500;
    letter-spacing:1px;
    color:rgba(255,255,255,0.7);
    padding:6px 14px;
    background:rgba(0,0,0,0.3);
    border-radius:10px;
    border:1px solid rgba(255,255,255,0.05);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    text-align:center;
    width:100%;
    white-space:nowrap;
    cursor:pointer;
    transition:all 0.3s ease;
}

.col-item:hover {
    color:#fff;
    background:rgba(0,0,0,0.5);
    border-color:rgba(139,92,246,0.3);
    transform:scale(1.05);
    box-shadow:0 0 15px rgba(139,92,246,0.15);
}

/* ===== 提示 ===== */
.hint {
    position:fixed;
    bottom:18px;
    left:50%;
    transform:translateX(-50%);
    color:rgba(255,255,255,0.35);
    font-size:0.85rem;
    letter-spacing:4px;
    font-weight:300;
    z-index:1;
    text-shadow:0 0 10px rgba(0,0,0,0.8);
    animation:fadeUp 2s ease-out;
}

@keyframes fadeUp {
    from { opacity:0; transform:translateX(-50%) translateY(20px); }
    to { opacity:1; transform:translateX(-50%) translateY(0); }
}

/* ===== 弹窗 ===== */
.modal-overlay {
    position:fixed;
    top:0; left:0;
    width:100%; height:100%;
    background:rgba(0,0,0,0.75);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    z-index:100;
    display:none;
    align-items:center;
    justify-content:center;
}
.modal-overlay.active { display:flex; }

.modal-content {
    background:linear-gradient(135deg,rgba(15,15,46,0.96),rgba(10,10,26,0.96));
    border:1px solid rgba(255,255,255,0.08);
    border-radius:24px;
    padding:40px 45px;
    max-width:400px;
    width:90%;
    text-align:center;
    position:relative;
    animation:scaleIn 0.35s ease;
    box-shadow:0 0 80px rgba(139,92,246,0.15);
}

@keyframes scaleIn {
    from { opacity:0; transform:scale(0.85); }
    to { opacity:1; transform:scale(1); }
}

.modal-close {
    position:absolute;
    top:14px; right:18px;
    background:none;
    border:none;
    color:rgba(255,255,255,0.4);
    font-size:1.4rem;
    cursor:pointer;
    transition:all 0.3s;
}
.modal-close:hover { color:#fff; transform:rotate(90deg); }

.modal-icon { font-size:3.2rem; margin-bottom:12px; }
.modal-title {
    font-size:1.6rem;
    font-weight:700;
    margin-bottom:14px;
    background:linear-gradient(135deg,#00f0ff,#8b5cf6);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}
.modal-desc {
    color:rgba(255,255,255,0.65);
    font-size:0.95rem;
    line-height:1.8;
    margin-bottom:22px;
}
.modal-btn {
    padding:11px 32px;
    border:none;
    border-radius:30px;
    background:linear-gradient(135deg,#8b5cf6,#ff2d95);
    color:#fff;
    font-size:0.95rem;
    font-weight:600;
    cursor:pointer;
    transition:all 0.3s;
    letter-spacing:2px;
}
.modal-btn:hover {
    transform:translateY(-2px);
    box-shadow:0 8px 30px rgba(139,92,246,0.4);
}

/* ===== 响应式 ===== */
@media (max-width:1200px) {
    .nav-grid { gap:5px; padding:8px; }
    .nav-col { min-width:105px; }
    .col-title { font-size:1rem; padding:8px 10px; }
    .col-item { font-size:0.82rem; padding:5px 10px; }
    .header-title { font-size:1.6rem; letter-spacing:6px; }
}

@media (max-width:1024px) {
    .nav-grid { gap:4px; padding:6px; }
    .nav-col { min-width:95px; }
    .col-title { font-size:0.9rem; padding:7px 8px; letter-spacing:2px; }
    .col-item { font-size:0.75rem; padding:4px 8px; }
    .header-title { font-size:1.3rem; letter-spacing:4px; }
}

@media (max-width:768px) {
    .nav-grid {
        flex-wrap:wrap;
        gap:4px;
        padding:6px;
        top:55%;
    }
    .nav-col { min-width:85px; }
    .col-title { font-size:0.85rem; padding:6px 6px; letter-spacing:1px; }
    .col-item { font-size:0.7rem; padding:4px 6px; }
    .header-title { font-size:1.1rem; letter-spacing:3px; top:14px; }
    .modal-content { padding:30px 25px; }
    .modal-title { font-size:1.3rem; }
}