/* =============================================
无殇星游｜main.css 全局样式
根目录存放，全站所有页面统一引用
CSS变量统一管理，断点：<=768px移动端 |769‑1024平板 | >=1025 PC
============================================= */
:root {
    /*色彩规范*/
    --bg-gradient: linear-gradient(135deg, #0a1440, #050b26);
    --color-primary: #00aaff;
    --color-hover-gold: #ffd700;
    --color-text-white: #ffffff;
    --color-text-gray: #e0e0e0;
    --color-link: #87ceeb;
    --card-bg: rgba(10, 20, 64, 0.8);
    --card-border: 1px solid rgba(0, 170, 255, 0.5);
    --card-border‑hover: 1px solid #ffd700;
    --shadow‑gold: 0 0 14px rgba(255, 215, 0, 0.45);

    /*间距、动效参数*/
    --border‑radius: 8px;
    --btn‑radius: 4px;
    --transition‑base: 0.3s ease;
    --scroll‑duration: 0.5s;
}

/* ==========全局重置========== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll‑behavior: smooth;
}

body {
    font-family: "PingFang SC", "Microsoft YaHei", sans‑serif;
    background: var(--bg-gradient);
    color: var(--color-text-white);
    min‑height: 100vh;
    line‑height: 1.65;
}

ul,ol {
    list‑style‑position: inside;
}

a {
    color: var(--color-link);
    text‑decoration: none;
    transition: var(--transition‑base);
}
a:hover {
    color: var(--color-hover-gold);
}

img {
    display: block;
    max‑width: 100%;
}

button {
    font‑family: inherit;
    cursor: pointer;
    border: none;
}

/* ==========通用按钮组件========== */
.btn‑primary {
    background‑color: var(--color-primary);
    color: #fff;
    border‑radius: var(--btn‑radius);
    padding: 10px 22px;
    font‑size: 15px;
    transition: var(--transition‑base);
    display: inline‑block;
}
.btn‑primary:hover {
    background‑color: var(--color-hover-gold);
    color: #000;
    transform: scale(1.05);
    box‑shadow: var(--shadow‑gold);
}

/* ==========卡片通用组件========== */
.card‑base {
    background: var(--card-bg);
    border: var(--card-border);
    border‑radius: var(--border‑radius);
    padding: 22px;
    transition: var(--transition‑base);
}
.card‑base:hover {
    transform: translateY(-5px) scale(1.02);
    border: var(--card-border‑hover);
    box‑shadow: var(--shadow‑gold);
}

/* ==========头部导航header========== */
.site‑header {
    position: sticky;
    top:0;
    z‑index: 999;
    padding:14px 24px;
    transition: background‑color var(--transition‑base);
}
.site‑header.nav‑scroll {
    background‑color: rgba(10, 20, 64, 0.94);
}
.header‑wrap {
    max‑width: 1240px;
    margin: 0 auto;
    display: flex;
    align‑items: center;
    justify‑content: space‑between;
}
.logo img {
    width: 120px;
    height: auto;
}
.nav‑pc {
    display: flex;
    gap: 26px;
    align‑items: center;
}
.nav‑pc a {
    font‑size:14px;
}
/*移动端汉堡菜单*/
.hamburger {
    display: none;
    width: 32px;
    height: 28px;
    position: relative;
}
.hamburger span {
    position: absolute;
    width:100%;
    height:2px;
    background:#fff;
    left:0;
    transition: var(--transition‑base);
}
.hamburger span:nth‑child(1){top:2px;}
.hamburger span:nth‑child(2){top:12px;}
.hamburger span:nth‑child(3){top:22px;}
.hamburger.active span:nth‑child(1){transform: rotate(45deg);top:12px;}
.hamburger.active span:nth‑child(2){opacity:0;}
.hamburger.active span:nth‑child(3){transform: rotate(-45deg);top:12px;}

.nav‑mobile {
    display: none;
    position: absolute;
    left:0;
    right:0;
    top:100%;
    background‑color: rgba(10, 20, 64, 0.96);
    padding:16px 24px;
}
.nav‑mobile.show {
    display:block;
}
.nav‑mobile a {
    display:block;
    padding:10px 0;
    font‑size:15px;
}

/* ==========容器通用========== */
.container {
    max‑width:1240px;
    margin:0 auto;
    padding:0 24px;
}
.section {
    padding:60px 0;
}
.page‑banner {
    padding:50px 0;
    background: transparent;
    text‑align:center;
}
.page‑banner h1 {
    font‑size:24px;
    font‑weight:bold;
    margin‑bottom:8px;
}
.page‑banner .sub‑title {
    color: var(--color-text-gray);
    font‑size:14px;
}

/* ==========页脚footer========== */
.site‑footer {
    border‑top:1px solid rgba(0,170,255,0.25);
    padding:36px 24px;
    margin‑top:40px;
}
.footer‑wrap {
    max‑width:1240px;
    margin:0 auto;
    text‑align:center;
    font‑size:12px;
    color: var(--color-text-gray);
}
.footer‑wrap p {
    margin‑bottom:6px;
}

/* ==========返回顶部悬浮按钮========== */
.back‑top {
    position:fixed;
    bottom:24px;
    right:24px;
    width:44px;
    height:44px;
    background‑color: var(--color-primary);
    color:#fff;
    border‑radius:50%;
    display:flex;
    align‑items:center;
    justify‑content:center;
    z‑index:99;
    opacity:0;
    pointer‑events:none;
    transition: var(--transition‑base);
}
.back‑top.show {
    opacity:1;
    pointer‑events:auto;
}
.back‑top:hover {
    background‑color: var(--color-hover-gold);
    color:#000;
}

/* ==========首页专属样式 .page‑index========== */
.page‑index .hero {
    min‑height: 84vh;
    display:flex;
    align‑items:center;
    justify‑content:center;
    position:relative;
    text‑align:center;
    overflow:hidden;
}
#star‑canvas {
    position:absolute;
    inset:0;
    z‑index:0;
}
.scan‑line {
    position:absolute;
    width:100%;
    height:2px;
    background: linear‑gradient(90deg,transparent, #00aaff, transparent);
    animation: scanAnim 4s linear infinite;
    z‑index:1;
}
@keyframes scanAnim {
    0% {top:0; opacity:0.2;}
    50% {opacity:0.6;}
    100% {top:100%; opacity:0.2;}
}
.hero‑inner {
    position:relative;
    z‑index:2;
    padding:0 20px;
}
.hero‑inner h1 {
    font‑size:36px;
    margin‑bottom:14px;
}
.hero‑inner .desc {
    font‑size:16px;
    color: var(--color-text-gray);
    max‑width:640px;
    margin:0 auto 32px;
}
.hero‑btns {
    display:flex;
    gap:18px;
    justify‑content:center;
    flex‑wrap:wrap;
}

/*卡片网格 PC多行，移动端单列*/
.grid‑pc3 {
    display:grid;
    grid‑template‑columns: repeat(3,1fr);
    gap:20px;
}
.grid‑pc2 {
    display:grid;
    grid‑template‑columns: repeat(2,1fr);
    gap:20px;
}

/*滚动淡入动画*/
.fade‑in‑block {
    opacity:0;
    transform: translateY(30px);
    transition: 0.6s ease;
}
.fade‑in‑block.active {
    opacity:1;
    transform: translateY(0);
}

/*礼包复制提示toast*/
.toast‑tip {
    position:fixed;
    left:50%;
    top:30%;
    transform:translateX(-50%);
    background:rgba(0,0,0,0.75);
    color:#fff;
    padding:10px 20px;
    border‑radius:6px;
    z‑index:9999;
    opacity:0;
    pointer‑events:none;
    transition:0.3s;
}
.toast‑shturl.c {
    opacity:1;
}

/*开服表表格样式*/
.table‑wrap {
    overflow‑x:auto;
}
.table‑wrap table {
    width:100%;
    border‑collapse: collapse;
    min‑width:600px;
}
.table‑wrap th {
    background‑color: var(--color-primary);
    color:#fff;
    padding:12px;
    text‑align:left;
}
.table‑wrap td {
    padding:12px;
    border‑bottom:1px solid rgba(255,255,255,0.12);
    color: var(--color-text-gray);
}
.table‑wrap tr:hover td {
    background‑color:rgba(255,255,255,0.08);
}

/*FAQ details折叠组件*/
details {
    background: var(--card-bg);
    border: var(--card-border);
    border‑radius: var(--border‑radius);
    margin‑bottom:12px;
    padding:14px 18px;
}
details summary {
    cursor:pointer;
    font‑weight:500;
    list‑style: none;
    position:relative;
    padding‑right:24px;
}
details summary::after {
    content:"+";
    position:absolute;
    right:0;
    top:0;
}
details[open] summary::after {
    content:"−";
}
details .faq‑content {
    margin‑top:10px;
    color: var(--color-text-gray);
}

/*合作模式时间线*/
.timeline‑wrap {
    display:flex;
    gap:12px;
}
.timeline‑item {
    flex:1;
    position:relative;
    padding:12px;
}
.timeline‑item::before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:2px;
    background: var(--color-primary);
}

/*404页面*/
.page‑404 {
    min‑height:70vh;
    display:flex;
    flex‑direction:column;
    align‑items:center;
    justify‑content:center;
    text‑align:center;
}
.page‑404 h2 {
    font‑size:18px;
    margin‑bottom:10px;
}
.page‑404 .tip {
    color: var(--color-text-gray);
    font‑size:14px;
    margin‑bottom:24px;
}

/*协议页面长文本*/
.doc‑block {
    max‑width:900px;
    margin:0 auto;
}
.doc‑block h2 {
    margin‑top:28px;
    margin‑bottom:12px;
}
.doc‑block p {
    margin‑bottom:12px;
    color: var(--color-text-gray);
}

/* ==========响应式断点========== */
@media (max‑width:1024px) {
    .grid‑pc3 {
        grid‑template‑columns: repeat(2,1fr);
    }
    .timeline‑wrap {
        flex‑direction:column;
    }
}
@media (max‑width:768px) {
    .nav‑pc {
        display:none;
    }
    .hamburger {
        display:block;
    }
    .grid‑pc3, .grid‑pc2 {
        grid‑template‑columns: 1fr;
    }
    .hero‑inner h1 {
        font‑size:28px;
    }
    .back‑top {
        width:38px;
        height:38px;
    }
}