/* ===================================================================
   SPIN777 页面样式文件
   说明：每个样式块都标注了影响 spin777-inner.html 的哪个位置
   修改建议：加大数值 = 变大/变宽/变高，减小数值 = 变小/变窄/变矮
=================================================================== */

/* ========= 全局基础变量（影响：全页面配色、文字颜色、按钮颜色） ========= */
:root {
    --panel-bg: rgb(2, 2, 36);              /* 影响：所有深色卡片背景色 */
    --panel-border: rgba(255, 215, 130, 0.25); /* 影响：卡片边框颜色 */
    --electric-blue: #4fd8ff;               /* 影响：标题、链接的亮蓝色 */
    --electric-blue-soft: #82e9ff;          /* 影响：标题、链接的柔和蓝色 */
    --text: #e7faff;                        /* 影响：正文文字颜色 */
    --text-soft: #a9c7d8;                   /* 影响：次要文字颜色 */
    --gold-btn1: #ffe9b3;                   /* 影响：金色按钮渐变起始色 */
    --gold-btn2: #c69232;                   /* 影响：金色按钮渐变结束色 */
    --title-light: #fff7d8;                 /* 影响：SPIN777 标题顶部亮色 */
    --title-mid: #ffde8a;                   /* 影响：SPIN777 标题中间色 */
    --title-deep: #c18822;                  /* 影响：SPIN777 标题底部深色 */
    --title-stroke: #4a2b00;                /* 影响：SPIN777 标题描边颜色 */
    
    /* Info Box 相关颜色变量（影响：底部 info-box 区块的配色） */
    --box-bg: rgba(255,255,255,0.05);      /* 影响：外框背景色（半透明） */
    --text-main: #06c3e9;                  /* 影响：info-title 标题颜色（亮青色） */
    --text-sub: #98bdcf;                   /* 影响：info-desc 描述文字颜色 */
    --halo-color: #0d8b9733;               /* 影响：外框旋转光晕颜色 */
    --halo-glow: rgba(86, 210, 210, 0.704); /* 影响：外框发光效果颜色 */
}

/* ========= 页面基础样式（影响：整个页面背景、字体） ========= */
html {
    overflow-y: scroll;                     /* 确保显示垂直滚动条 */
}

body {
    margin: 0;
    padding: 0;
    background: #020218;                    /* 修改此值改变页面背景色 */
    color: var(--text);
    font-family: "Source Sans Pro", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    overflow-x: hidden;                     /* 防止横向滚动 */
    overflow-y: auto;                       /* 允许垂直滚动 */
}

/* ========= 自定义滚动条样式（影响：页面右侧滚动条的外观） ========= */
/* Webkit 浏览器（Chrome, Safari, Edge）滚动条样式 */
::-webkit-scrollbar {
    width: 12px;                            /* 修改此值：加大=滚动条更宽 */
}

::-webkit-scrollbar-track {
    background: rgba(2, 2, 24, 0.8);        /* 修改此值：改变滚动条轨道背景色 */
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, 
        rgba(0, 180, 255, 0.6) 0%,
        rgba(6, 195, 233, 0.8) 50%,
        rgba(0, 180, 255, 0.6) 100%
    );
    border-radius: 6px;                     /* 修改此值：加大=滚动条滑块圆角更大 */
    border: 2px solid rgba(0, 0, 0, 0.3);
    box-shadow: 
        0 0 8px rgba(0, 180, 255, 0.5),
        0 0 15px rgba(6, 195, 233, 0.3) inset;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, 
        rgba(0, 200, 255, 0.8) 0%,
        rgba(6, 215, 253, 1) 50%,
        rgba(0, 200, 255, 0.8) 100%
    );
    box-shadow: 
        0 0 12px rgba(0, 200, 255, 0.7),
        0 0 20px rgba(6, 215, 253, 0.5) inset;
}

/* Firefox 浏览器滚动条样式 */
* {
    scrollbar-width: thin;                  /* 可选值：auto, thin, none */
    scrollbar-color: rgba(6, 195, 233, 0.8) rgba(2, 2, 24, 0.8); /* 滑块颜色 轨道颜色 */
}

/* ========= 顶部主视觉区域（影响：页面最上方 SPIN777 标题区域） ========= */

/* 主视觉区域容器（影响：标题区整体高度、背景） */
.hero-section {
    position: relative;
    width: 100%;
    padding: 80px 20px 80px;               /* 修改第一个值：加大=标题区变高，减小=变矮 */
    overflow: hidden;
    background: #03040e;                   /* 修改此值改变标题区背景色 */
}

/* 背景渐变层1（影响：标题区背后的深色渐变背景动画） */
.hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -3;
    background: radial-gradient(circle at 30% 20%, #097b92, #063985, #4918b1, #490606);
    background-size: 250% 250%;            /* 修改此值：加大=渐变范围变大 */
    animation: galaxyShift 18s ease-in-out infinite; /* 修改18s：加大=动画变慢，减小=变快 */
}

@keyframes galaxyShift {
    0%   { background-position: 0% 20%; }
    50%  { background-position: 100% 80%; }
    100% { background-position: 0% 20%; }
}

/* 背景渐变层2（影响：标题区背后的星云图片背景） */
.hero-section::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: url('../img/nebula-blue.png');  /* 修改此路径：改为本地图片路径 */
    background-size: cover;
    background-position: center;
    opacity: 0.35;                         /* 修改此值：加大=星云更明显，减小=更淡 */
    animation: nebulaFloat 30s linear infinite; /* 修改30s：加大=动画变慢 */
}

@keyframes nebulaFloat {
    0%   { transform: scale(1) translate(0,0); }
    50%  { transform: scale(1.15) translate(-30px,20px); } /* 修改1.15：加大=缩放更大 */
    100% { transform: scale(1) translate(0,0); }
}

/* 星星背景层（影响：标题区背景上的星星闪烁效果） */
.hero-stars {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.8), transparent),
        radial-gradient(2px 2px at 60% 70%, rgba(0,255,255,0.9), transparent),
        radial-gradient(1.5px 1.5px at 80% 20%, rgba(140,180,255,0.9), transparent),
        radial-gradient(2.5px 2.5px at 40% 80%, rgba(255,255,200,0.8), transparent);
    opacity: 0.35;                         /* 修改此值：加大=星星更亮 */
    animation: starDrift 22s linear infinite; /* 修改22s：加大=星星移动更慢 */
}

@keyframes starDrift {
    0%   { transform: translate(0,0); }
    50%  { transform: translate(25px,-25px); } /* 修改25px：加大=星星移动距离更大 */
    100% { transform: translate(0,0); }
}

/* 极光点状背景（影响：标题区背景上的点状光晕效果） */
.hero-aurora{
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(circle,rgba(120,255,230,0.25) 2px,transparent 3px),
        radial-gradient(circle,rgba(120,90,255,0.22) 2px,transparent 3px),
        radial-gradient(circle,rgba(255, 255, 255, 0.997) 2px,transparent 3px);
    background-size:160px 160px,240px 240px,180px 180px; /* 修改这些值：加大=点更大更稀疏 */
    animation:heroDots 20s ease-in-out infinite; /* 修改20s：加大=动画更慢 */
}
@keyframes heroDots{
    0%{transform:translateY(0);}
    50%{transform:translateY(-25px);}     /* 修改-25px：加大绝对值=上下移动距离更大 */
    100%{transform:translateY(0);}
}

/* 标题区内容容器（影响：标题、logo、按钮的居中容器宽度） */
.hero-inner{
    position:relative;
    z-index:2;
    max-width:900px;                       /* 修改此值：加大=内容区域更宽 */
    margin:0 auto;
    text-align:center;
}

/* Logo 和标题的横向布局（影响：logo 和 SPIN777 文字之间的间距） */
.hero-brand-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;                              /* 修改此值：加大=logo 和文字间距更大 */
    margin-bottom:10px;
}

/* Logo 图片样式（影响：左上角圆形 logo 的大小、发光效果） */
.hero-logo {
    width: var(--logo-size, 200px);       /* 修改200px：加大=logo 更大 */
    height: var(--logo-size, 200px);
    border-radius: 100%;                  /* 圆形 */
    object-fit: cover;
    box-shadow:
        0 0 25px rgba(0, 240, 255, 0.6),  /* 修改25px和0.6：加大=发光范围更大更亮 */
        0 0 45px rgba(0, 240, 255, 0.4),
        0 0 70px rgba(0, 240, 255, 0.25);
    margin-right: 20px;                   /* 修改此值：加大=logo 和文字距离更远 */
    flex-shrink: 0;
    transition: 0.3s ease;
}

.hero-logo:hover {
    transform: scale(1.06);                /* 修改1.06：加大=鼠标悬停时放大更多 */
    box-shadow:
        0 0 35px rgba(0, 255, 255, 0.8),
        0 0 55px rgba(0, 255, 255, 0.6),
        0 0 90px rgba(0, 255, 255, 0.35);
}

/* SPIN777 主标题文字（影响：页面最上方 "SPIN777" 大标题） */
.hero-title{
    font-size:100px;                       /* 修改此值：加大=标题更大，减小=更小 */
    font-weight:900;
    letter-spacing:6px;                    /* 修改此值：加大=字母间距更大 */
    margin:0;
    background:linear-gradient(180deg,
        var(--title-light) 0%,
        var(--title-mid) 50%,
        var(--title-deep) 100%);
    -webkit-background-clip:text;
    color:transparent;
    -webkit-text-stroke:3px var(--title-stroke); /* 修改3px：加大=描边更粗 */
    text-shadow:
        0 3px 0 rgba(255,240,200,0.9),    /* 修改3px：加大=阴影向下偏移更多 */
        0 7px 0 rgba(142, 105, 11, 0.878),
        0 12px 26px rgba(0,0,0,0.95);
}

/* 副标题（影响：标题下方的 "Explore — Enjoy — Earn..." 文字） */
.hero-sub{
    color: var(--title-mid);
    font-size: 20px;                       /* 修改此值：加大=副标题更大 */
    font-weight: 900;
    margin: 8px 0 20px;                    /* 修改这些值：加大=上下间距更大 */
    text-align: center;
    width: 100%;
}

/* 描述文字（影响：副标题下方的长段描述文字） */
.hero-desc {
    font-size: 18px;                       /* 修改此值：加大=描述文字更大 */
    color: var(--text-soft);
    line-height: 1.7;                       /* 修改此值：加大=行距更大 */
    max-width: 720px;                      /* 修改此值：加大=文字区域更宽 */
    margin: 0 auto 25px auto;
    text-align: center;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* 官方网址按钮行（影响：标题下方的 "Official Website: spin777 →" 按钮区域） */
.hero-link-row{
    margin-top:18px;                       /* 修改此值：加大=按钮区域距离上方更远 */
    font-size:18px;                        /* 修改此值：加大=按钮文字更大 */
    font-weight:700;
    color:var(--electric-blue-soft);
    text-align: center;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;                             /* 修改此值：加大=按钮和文字间距更大 */
}

/* 官方网址按钮（影响：标题下方的深色按钮 "spin777 →"） */
.hero-link-btn{
    display:inline-block;
    padding:10px 38px;                     /* 修改这些值：加大=按钮更大 */
    margin-left:10px;
    background:rgba(0,0,0,0.45);          /* 修改0.45：加大=按钮背景更不透明 */
    border-radius:12px;                    /* 修改此值：加大=按钮圆角更大 */
    border:1px solid rgba(120,255,255,0.4);
    color:var(--electric-blue-soft);
    text-decoration:none;
    font-weight:900;
    box-shadow:0 0 18px rgba(80,255,255,0.4); /* 修改18px和0.4：加大=发光范围更大更亮 */
    transition:0.25s ease;
}
.hero-link-btn:hover{
    background:rgba(120,255,255,0.12);
    box-shadow:0 0 26px rgba(80,255,255,0.75);
}

/* ========= 动态荧光横条（影响：标题下方发光的蓝色横条） ========= */
.blue-divider {
    position: relative;
    width: 100%;                           /* 修改此值：改为固定宽度如 900px = 横条变窄 */
    height: 6px;                           /* 修改此值：加大=横条变粗 */
    margin: 22px auto 18px;                /* 修改这些值：加大=横条上下间距更大 */
    border-radius: 30px;                   /* 修改此值：加大=横条两端更圆 */
    background: rgba(0, 180, 255, 0.25);   /* 修改0.25：加大=横条背景更明显 */
    overflow: hidden;
    box-shadow:
        0 0 12px rgba(0, 240, 255, 0.7),   /* 修改12px和0.7：加大=外发光范围更大更亮 */
        0 0 25px rgba(0, 240, 255, 0.5),
        0 0 40px rgba(0, 240, 255, 0.35);
}

/* 横条内部流动的高亮（影响：横条中间从左到右流动的亮光） */
.blue-divider::before {
    content: "";
    position: absolute;
    top: 0;
    left: -50%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(0,255,255,0.9) 35%,
        rgba(255,255,255,1) 50%,          /* 修改1：加大=中心更亮 */
        rgba(0,255,255,0.9) 65%,
        transparent 100%
    );
    filter: blur(8px) brightness(1.5);    /* 修改8px：加大=模糊范围更大；修改1.5：加大=更亮 */
    animation: ledRun 1.8s linear infinite; /* 修改1.8s：减小=流动速度更快 */
}

@keyframes ledRun {
    0%   { left: -50%; }
    100% { left: 120%; }
}

/* ========= 中部 SPIN777 Dare 区块（影响：页面中部左侧大卡片 + 右侧滚动列表） ========= */

/* 中部区块容器（影响：整个中部区域的背景、高度） */
.section-dark{
    background:#010412;                    /* 修改此值改变中部区域背景色 */
    padding:20px 18px 20px;                /* 修改这些值：加大=中部区域上下留白更大 */
    border-top:1px solid rgba(80,255,255,0.2);
}

/* 中部区块标题（影响：中部区域的 "Welcome to the SPIN777 Aurora Experience" 标题） */
.section-title{
    font-size:26px;                        /* 修改此值：加大=标题更大 */
    font-weight:900;
    text-align:center;
    color:var(--electric-blue-soft);
    text-shadow:0 0 18px rgba(6, 66, 54, 0.75); /* 修改18px：加大=标题发光范围更大 */
    margin:0 0 16px;                       /* 修改16px：加大=标题下方间距更大 */
}

/* 左右两列布局（影响：左侧 SPIN777 Dare 卡片和右侧 BONUS 列表的横向排列） */
.two-col{
    display:flex;
    gap:24px;                              /* 修改此值：加大=左右两列间距更大 */
    align-items:flex-start;
    margin-top:10px;
}

/* 左侧 SPIN777 Dare 卡片（影响：中部左侧的大卡片） */
.card-left{
    flex:1.9;                              /* 修改此值：加大=左侧卡片占更多宽度 */
    min-width:0;
    border-radius:20px;                    /* 修改此值：加大=卡片圆角更大 */
    background:var(--panel-bg);
    position:relative;
    padding:20px 20px;                     /* 修改这些值：加大=卡片内边距更大 */
    box-shadow:0 0 30px rgba(0,0,0,0.6);   /* 修改30px：加大=卡片阴影范围更大 */
    overflow:hidden;
}

/* 左侧卡片的光晕旋转效果（影响：左侧卡片边缘的旋转光晕） */
.card-left-glow{
    position:absolute;
    inset:-40px;                           /* 修改-40px：加大绝对值=光晕范围更大 */
    background:linear-gradient(90deg,
        rgba(80,255,220,0) 0%,
        rgba(80,255,220,0.24) 50%,         /* 修改0.24：加大=光晕更明显 */
        rgba(80,255,220,0) 100%);
    filter:blur(3px);                      /* 修改3px：加大=光晕更模糊 */
    animation:rotateAurora 16s linear infinite; /* 修改16s：加大=旋转更慢 */
}
@keyframes rotateAurora{
    0%{transform:rotate(0);}
    100%{transform:rotate(360deg);}
}

/* 左侧卡片内部内容（影响：左侧卡片内的文字、链接、按钮） */
.card-left-inner{
    position:relative;
    z-index:2;
}

/* 左侧卡片标题（影响：左侧卡片内的 "SPIN777 Dare" 标题） */
.card-left-inner h2{
    font-size:30px;                        /* 修改此值：加大=标题更大 */
    margin:0 0 12px;                       /* 修改12px：加大=标题下方间距更大 */
    color:var(--electric-blue-soft);
    text-shadow:0 0 12px rgba(100,255,235,0.7); /* 修改12px：加大=标题发光范围更大 */
}

/* 左侧卡片描述文字（影响：左侧卡片内的描述段落） */
.card-left-inner p{
    font-size:16px;                        /* 修改此值：加大=描述文字更大 */
    color:var(--text);
    line-height:1.7;                       /* 修改此值：加大=行距更大 */
    white-space:normal;
}

/* ========= 三条发光链接（影响：左侧卡片内的三条 "Enter SPIN777 Bonuses..." 链接） ========= */
.clean-links-under {
    margin-top: 18px;                      /* 修改此值：加大=链接区域距离上方更远 */
    padding-left: 4px;
}

.clean-links-under li {
    list-style: none;
    margin: 6px 0;                         /* 修改此值：加大=每条链接之间间距更大 */
    white-space: nowrap;                   /* 保持链接和说明文字在同一行 */
}

/* 链接文字样式（影响：三条链接的文字颜色、发光效果、呼吸动画） */
.clean-links-under li a {
    color: #ffffff;                          /* 修改此值：白色文字 */
    font-weight: 900;
    font-size: 16px;                       /* 修改此值：加大=链接文字更大 */
    text-decoration: underline;
    text-underline-offset: 4px;            /* 修改此值：加大=下划线和文字距离更远 */
    white-space: normal;
    max-width: 100%;
    overflow-wrap: break-word;
    display: inline-block;
    transform-origin: center center;
    animation: linkBreath 2.2s ease-in-out infinite; /* 修改2.2s：减小=呼吸动画更快 */
    text-shadow:
        0 0 8px rgba(0,180,255,0.9),       /* 修改8px和0.9：加大=蓝色发光范围更大更亮 */
        0 0 15px rgba(0,180,255,1),
        0 0 25px rgba(0,180,255,0.9);
}

/* 链接说明文字（影响：链接后面的灰色说明文字） */
.clean-links-under .desc {
    font-size: 14px;                       /* 修改此值：加大=说明文字更大 */
    color: var(--text-soft);
    opacity: 0.85;                         /* 修改此值：加大=说明文字更不透明 */
}

/* 链接呼吸动画（影响：三条链接的轻微放大缩小效果） */
@keyframes linkBreath {
    0%   { opacity: 0.85; transform: scale(1); }
    50%  { opacity: 1;    transform: scale(1.03); } /* 修改1.03：加大=放大更多 */
    100% { opacity: 0.85; transform: scale(1); }
}

/* PLAY NOW 按钮（影响：左侧卡片底部的黄色 "▶ PLAY NOW" 按钮） */
.card-left-inner a.play-btn{
    display:inline-block;
    margin-top:16px;                       /* 修改此值：加大=按钮距离上方更远 */
    padding:10px 26px;                     /* 修改这些值：加大=按钮更大 */
    background:linear-gradient(180deg,var(--gold-btn1),var(--gold-btn2));
    border-radius:12px;                    /* 修改此值：加大=按钮圆角更大 */
    font-weight:900;
    color:#2e1b00;
    text-decoration:none;
    box-shadow:0 6px 18px rgba(255,230,150,0.6); /* 修改18px：加大=按钮阴影范围更大 */
    animation:flashGold 1.8s infinite ease-in-out; /* 修改1.8s：减小=闪烁动画更快 */
}

/* 右侧 BONUS 滚动列表容器（影响：中部右侧的 "Claim your Special BONUS instantly" 卡片） */
.card-right{
    width:340px;                           /* 修改此值：加大=右侧卡片更宽 */
    border-radius:20px;                    /* 修改此值：加大=卡片圆角更大 */
    background:var(--panel-bg);
    box-shadow:0 0 30px rgba(0,0,0,0.6);
    padding:16px;                          /* 修改此值：加大=卡片内边距更大 */
    flex-shrink:0;
}

/* 右侧卡片标题（影响：右侧卡片内的 "Claim your Special BONUS instantly" 标题） */
.card-right h3{
    margin:0 0 10px;                       /* 修改10px：加大=标题下方间距更大 */
    font-size:20px;                        /* 修改此值：加大=标题更大 */
    text-align:center;
    color:#ffe9b6;
    text-shadow:0 0 12px rgba(255,230,160,0.7);
}

/* 滚动列表容器（影响：右侧卡片内的滚动列表区域） */
.scroller{
    border-radius:14px;                    /* 修改此值：加大=列表区域圆角更大 */
    border:1px solid rgba(255,220,120,0.25);
    background:rgba(0,0,0,0.3);
    overflow:hidden;
    height:235px;                          /* 修改此值：加大=列表区域更高 */
}

/* 滚动列表内容（影响：列表项的滚动动画） */
.scroller-inner{
    display:flex;
    flex-direction:column;
    animation:scrollLoop 25s linear infinite; /* 修改25s：减小=滚动速度更快 */
}

/* 滚动列表项（影响：列表中的每个 BONUS 项目） */
.scroller-item{
    padding:14px;                           /* 修改此值：加大=每个项目内边距更大 */
    display:flex;
    gap:10px;                              /* 修改此值：加大=图片和文字间距更大 */
    align-items:center;
    color:#ffe9b6;
    font-size:15px;                        /* 修改此值：加大=列表文字更大 */
    border-bottom:1px solid rgba(255,220,120,0.2);
}

/* 滚动列表中的图片（影响：列表中每个 BONUS 项目的图片） */
.scroller-item img{
    width:110px;                           /* 修改此值：加大=图片更大 */
    height:110px;
    border-radius:10px;                    /* 修改此值：加大=图片圆角更大 */
    object-fit:cover;
}

/* 滚动动画（影响：列表的向上滚动效果） */
@keyframes scrollLoop{
    0%{transform:translateY(0);}
    100%{transform:translateY(-50%);}
}

/* ========= Featured Activities 区块（影响：页面中部的横向滚动游戏卡片） ========= */
.featured-wrap{
    padding:20px 16px 30px;                /* 修改这些值：加大=区块上下留白更大 */
    background:#050512;                    /* 修改此值改变区块背景色 */
}

/* Featured 标题（影响：区块的 "Featured Activities — SPIN777 Challenge Arena" 标题） */
.featured-title{
    text-align:center;
    font-size:26px;                        /* 修改此值：加大=标题更大 */
    font-weight:900;
    color:var(--electric-blue-soft);
    text-shadow:0 0 16px rgba(80,255,220,0.7);
    margin:0 0 12px;                       /* 修改12px：加大=标题下方间距更大 */
}

/* Featured 横向滚动容器（影响：游戏卡片的横向滚动区域） */
.featured-row{
    display:flex;
    gap:14px;                              /* 修改此值：加大=卡片之间间距更大 */
    overflow-x:auto;
    padding:8px 0 20px;                    /* 修改20px：加大=滚动区域下方留白更大 */
}

/* Featured 游戏卡片（影响：横向滚动的每个游戏卡片） */
.feature-card,
.feature-card-1{
    width:260px;                           /* 修改此值：加大=卡片更宽 */
    flex:0 0 auto;
    background:var(--panel-bg);
    border-radius:16px;                    /* 修改此值：加大=卡片圆角更大 */
    padding:14px;                          /* 修改此值：加大=卡片内边距更大 */
    border:1px solid var(--panel-border);
    box-shadow:0 0 20px rgba(0,0,0,0.55);
}

/* Featured 卡片中的图片（影响：游戏卡片内的图片） */
.feature-card img,
.feature-card-1 img{
    width:100%;
    border-radius:12px;                    /* 修改此值：加大=图片圆角更大 */
}

/* Featured 卡片标题（影响：游戏卡片内的游戏名称） */
.feature-card h3,
.feature-card-1 h3{
    font-size:20px;                        /* 修改此值：加大=标题更大 */
    margin:10px 0 4px;                     /* 修改这些值：加大=标题上下间距更大 */
    color:var(--electric-blue-soft);
}

/* Featured 卡片描述（影响：游戏卡片内的描述文字） */
.feature-card p,
.feature-card-1 p{
    font-size:14.5px;                      /* 修改此值：加大=描述文字更大 */
    color:var(--text-soft);
}

/* Featured 卡片按钮（影响：游戏卡片底部的 "View Activity →" 按钮） */
.feature-btn{
    margin-top:10px;                       /* 修改此值：加大=按钮距离上方更远 */
    padding:10px 0;                        /* 修改这些值：加大=按钮更高 */
    border-radius:10px;                    /* 修改此值：加大=按钮圆角更大 */
    background:linear-gradient(180deg,var(--gold-btn1),var(--gold-btn2));
    text-align:center;
    font-weight:900;
    color:#3b2500;
    animation:flashGold 1.8s infinite ease-in-out;
}

/* ========= Special Features 区块（影响：页面中部的特殊功能横向滚动卡片） ========= */
.special-title{
    text-align:center;
    font-size:26px;                        /* 修改此值：加大=标题更大 */
    font-weight:900;
    color:var(--electric-blue);
    text-shadow:0 0 18px rgba(80,255,220,0.8);
    margin:10px 0 6px;                     /* 修改这些值：加大=标题上下间距更大 */
}

.special-slider{
    white-space:nowrap;
    overflow-x:auto;
    padding:18px 10px 25px;                 /* 修改这些值：加大=滚动区域留白更大 */
}

.special-card{
    width:260px;                           /* 修改此值：加大=卡片更宽 */
    display:inline-block;
    margin:0 12px;                         /* 修改此值：加大=卡片之间间距更大 */
    background:var(--panel-bg);
    padding:15px;                          /* 修改此值：加大=卡片内边距更大 */
    border-radius:16px;                   /* 修改此值：加大=卡片圆角更大 */
    border:1px solid var(--panel-border);
    box-shadow:0 0 25px rgba(0,0,0,0.45);
    white-space:normal;
}

.special-card img{
    width:260px;                           /* 修改此值：加大=图片更宽 */
    height:260px;                          /* 修改此值：加大=图片更高 */
    border-radius:14px;                    /* 修改此值：加大=图片圆角更大 */
    object-fit:cover;
    display:block;
    margin:0 auto 10px;
}

.special-card h3{
    font-size:20px;                        /* 修改此值：加大=标题更大 */
    margin:8px 0 4px;                      /* 修改这些值：加大=标题上下间距更大 */
    font-weight:900;
    color:var(--electric-blue);
}

.special-card p{
    font-size:14px;                        /* 修改此值：加大=描述文字更大 */
    color:var(--text-soft);
}

.special-card .vip-btn{
    margin-top:10px;                       /* 修改此值：加大=按钮距离上方更远 */
    padding:11px 0;                        /* 修改这些值：加大=按钮更高 */
    border-radius:12px;                    /* 修改此值：加大=按钮圆角更大 */
    background:linear-gradient(180deg,var(--gold-btn1),var(--gold-btn2));
    text-align:center;
    font-weight:900;
    color:#3a1f00;
    animation:flashGold 1.8s infinite ease-in-out;
}

/* ========= 第二个两列区块（影响：页面中下部的左侧文字 + 右侧滚动列表） ========= */
.section-dark-2{
    background:#020314;                    /* 修改此值改变区块背景色 */
    padding:30px 18px 35px;                /* 修改这些值：加大=区块上下留白更大 */
}

.two-col-2{
    display:flex;
    gap:24px;                              /* 修改此值：加大=左右两列间距更大 */
    align-items:flex-start;
    margin-top:6px;
}

.card-left-2{
    flex:1.9;                              /* 修改此值：加大=左侧卡片占更多宽度 */
    min-width:0;
    border-radius:20px;                    /* 修改此值：加大=卡片圆角更大 */
    background:var(--panel-bg);
    position:relative;
    padding:30px 24px;                     /* 修改这些值：加大=卡片内边距更大 */
    box-shadow:0 0 30px rgba(0,0,0,0.6);
    overflow:hidden;
}

.card-left-2 h2{
    font-size:26px;                        /* 修改此值：加大=标题更大 */
    margin:0 0 12px;                       /* 修改12px：加大=标题下方间距更大 */
    color:var(--electric-blue-soft);
    text-shadow:0 0 12px rgba(100,255,235,0.7);
}

.card-left-2 p{
    font-size:16px;                        /* 修改此值：加大=描述文字更大 */
    color:var(--text);
    line-height:1.7;                       /* 修改此值：加大=行距更大 */
    white-space:pre-line;
}

.card-right-2{
    width:350px;                           /* 修改此值：加大=右侧卡片更宽 */
    border-radius:20px;                    /* 修改此值：加大=卡片圆角更大 */
    background:var(--panel-bg);
    box-shadow:0 0 30px rgba(0,0,0,0.6);
    padding:16px;                          /* 修改此值：加大=卡片内边距更大 */
    flex-shrink:0;
}

.card-right-2 h3{
    margin:0 0 10px;                       /* 修改10px：加大=标题下方间距更大 */
    font-size:20px;                        /* 修改此值：加大=标题更大 */
    text-align:center;
    color:#ffe9b6;
    text-shadow:0 0 12px rgba(255,230,160,0.7);
}

.scroller-2{
    border-radius:14px;                    /* 修改此值：加大=列表区域圆角更大 */
    border:1px solid rgba(255,220,120,0.25);
    background:rgba(0,0,0,0.3);
    overflow:hidden;
    height:275px;                          /* 修改此值：加大=列表区域更高 */
}

.scroller-2-inner{
    display:flex;
    flex-direction:column;
    animation:scrollLoop 25s linear infinite;
}

.scroller-2-item{
    padding:14px;                          /* 修改此值：加大=每个项目内边距更大 */
    display:flex;
    gap:10px;                              /* 修改此值：加大=图片和文字间距更大 */
    align-items:center;
    color:#ffe9b6;
    font-size:15px;                        /* 修改此值：加大=列表文字更大 */
    border-bottom:1px solid rgba(255,220,120,0.2);
}

.scroller-2-item img{
    width:110px;                           /* 修改此值：加大=图片更大 */
    height:110px;
    border-radius:10px;                    /* 修改此值：加大=图片圆角更大 */
    object-fit:cover;
}

/* ========= VIP Selected 区块（影响：页面中下部的 VIP 游戏横向滚动卡片） ========= */
.vip-selected-section {
    padding:20px 0;                        /* 修改这些值：加大=区块上下留白更大 */
    background:#050512;                    /* 修改此值改变区块背景色 */
}

.vip-selected-title {
    text-align:center;
    font-size:32px;                        /* 修改此值：加大=标题更大 */
    font-weight:900;
    color:var(--electric-blue-soft);
    text-shadow:0 0 16px rgba(80,255,220,0.75);
    margin:0 0 12px;                       /* 修改12px：加大=标题下方间距更大 */
}

.vip-selected-container {
    overflow-x:auto;
    display:flex;
    flex-wrap:nowrap;
    gap:14px;                              /* 修改此值：加大=卡片之间间距更大 */
    padding:10px 0 20px;                   /* 修改20px：加大=滚动区域下方留白更大 */
    margin:0;
}

.vip-card {
    width:260px;                           /* 修改此值：加大=卡片更宽 */
    flex:0 0 auto;
    background: var(--panel-bg);
    padding: 15px;                         /* 修改此值：加大=卡片内边距更大 */
    border-radius: 16px;                   /* 修改此值：加大=卡片圆角更大 */
    border: 1px solid var(--panel-border);
    box-shadow: 0 0 20px rgba(80,255,220,0.25), 0 0 16px rgba(120,90,255,0.25);
}

.vip-card img {
    width: 100%;
    border-radius: 12px;                   /* 修改此值：加大=图片圆角更大 */
}

.vip-card h3 {
    font-size: 22px;                       /* 修改此值：加大=标题更大 */
    font-weight: 900;
    color: var(--electric-blue-soft);
    margin: 12px 0 6px;                    /* 修改这些值：加大=标题上下间距更大 */
}

.vip-card p {
    color: var(--text);
    font-size: 15px;                       /* 修改此值：加大=描述文字更大 */
}

.vip-btn {
    display: block;
    margin-top: 10px;                      /* 修改此值：加大=按钮距离上方更远 */
    padding: 12px 0;                       /* 修改这些值：加大=按钮更高 */
    background: linear-gradient(180deg, var(--gold-btn1), var(--gold-btn2));
    border-radius: 10px;                   /* 修改此值：加大=按钮圆角更大 */
    font-weight: 900;
    color: #3b2500;
    text-align: center;
    animation: flashGold 1.8s infinite ease-in-out;
}

/* ========= 底部 Info Box + Support 区块（影响：页面最底部的淡蓝色外框 + 深蓝色渐变内框） ========= */

/* Info Box 外层容器（影响：底部整个大框的宽度、高度、圆角） */
.info-box {
    position: relative;
    margin: 22px auto 60px;                /* 修改这些值：加大=外框上下外边距更大 */
    padding: 35px 28px 35px;                /* 修改这些值：加大=外框内边距更大 */
    width: 98%;                            /* 修改此值：改为100% = 外框占满宽度，改为95% = 更窄 */
    max-width: none;
    box-sizing: border-box;
    border-radius: 22px;                   /* 修改此值：加大=外框圆角更大 */
    background: var(--box-bg);             /* 影响：外框的背景色（半透明） */
    backdrop-filter: blur(10px);           /* 修改10px：加大=背景模糊效果更强 */
    z-index: 1;
    border: 1px solid rgba(255,255,255,0.12); /* 修改0.12：加大=边框更明显 */
    overflow: hidden;                      /* 重要：让内部内容跟随圆角裁剪 */
}

/* Info Box 外层旋转光晕（影响：外框边缘的旋转光晕效果） */
.info-box::before {
    content: "";
    position: absolute;
    top: -35px;                            /* 修改-35px：加大绝对值=光晕范围更大 */
    left: -35px;
    right: -35px;
    bottom: -35px;
    border-radius: inherit;
    z-index: -1;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 110deg,
        var(--halo-color) 160deg,
        transparent 230deg,
        transparent 360deg
    );
    filter: blur(45px);                    /* 修改45px：加大=光晕更模糊 */
    animation: haloOuter 5.8s linear infinite; /* 修改5.8s：加大=旋转更慢 */
}

@keyframes haloOuter {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Info Box 内层发光（影响：外框内部的发光效果） */
.info-box::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: -1;
    box-shadow:
        0 0 70px var(--halo-glow),         /* 修改70px：加大=外发光范围更大 */
        0 0 120px var(--halo-glow) inset;  /* 修改120px：加大=内发光范围更大 */
    opacity: 0.35;                         /* 修改0.35：加大=发光更明显 */
}

/* Info Box 标题（影响：外框内的 "Join SPIN777 — High-Intensity Arena" 标题） */
.info-title {
    font-size: 32px;                       /* 修改此值：加大=标题更大 */
    font-weight: 900;
    margin-bottom: 15px;                    /* 修改15px：加大=标题下方间距更大 */
    color: var(--text-main);
}

/* Info Box 描述文字（影响：外框内的长段描述文字） */
.info-desc {
    font-size: 18px;                       /* 修改此值：加大=描述文字更大 */
    line-height: 1.7;                       /* 修改此值：加大=行距更大 */
    color: var(--text-sub);
    white-space: normal;
    word-wrap: break-word;
}

/* Support 蓝色渐变内框（影响：外框内部的深蓝色渐变矩形） */
.spin-support-block {
    width: 94%;                            /* 修改此值：改为100% = 内框占满外框宽度，改为90% = 更窄 */
    max-width: 94%;
    margin: 24px auto 0;                   /* 修改24px：加大=内框距离上方文字更远 */
    box-sizing: border-box;
    padding: 40px 15px 55px;                /* 修改这些值：加大=内框内边距更大 */
    background: linear-gradient(180deg, #2307a2 0%, #06135b 40%, #0b223b 100%); /* 修改这些颜色值改变渐变 */
    text-align: center;
    border-top: 1px solid rgba(80,255,220,0.35); /* 修改0.35：加大=顶部边框更明显 */
    box-shadow: 0 -8px 25px rgba(80,255,220,0.2) inset; /* 修改25px：加大=内阴影范围更大 */
    border-radius: 22px;                   /* 修改此值：加大=内框圆角更大 */
}

.support-inner {
    max-width: 900px;                      /* 修改此值：加大=内部内容区域更宽 */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;                             /* 修改此值：加大=内部元素间距更大 */
}

.support-text {
    text-align: center;
}

.support-icon {
    font-size: 26px;                       /* 修改此值：加大=电话图标更大 */
}

.support-line1 {
    font-size: 22px;                       /* 修改此值：加大=主标题文字更大 */
    font-weight: 900;
    margin-top: 6px;                       /* 修改6px：加大=标题距离图标更远 */
    color: var(--electric-blue-soft);
    text-shadow: 0 0 12px rgba(80,255,255,0.75); /* 修改12px：加大=文字发光范围更大 */
}

.support-line2 {
    font-size: 16px;                       /* 修改此值：加大=副标题文字更大 */
    margin-top: 2px;                       /* 修改2px：加大=副标题距离主标题更远 */
    color: #e7faff;
    opacity: 0.85;                         /* 修改0.85：加大=文字更不透明 */
}

/* Support 按钮（影响：内框底部的 "Contact Support" 按钮） */
.spin-support-btn {
    display: inline-block;
    padding: 12px 32px;                    /* 修改这些值：加大=按钮更大 */
    border-radius: 12px;                   /* 修改此值：加大=按钮圆角更大 */
    font-weight: 900;
    font-size: 18px;                       /* 修改此值：加大=按钮文字更大 */
    text-decoration: none;
    background: linear-gradient(180deg, var(--gold-btn1), var(--gold-btn2));
    color: #3b1d00;
    box-shadow:
        0 0 14px rgba(80,255,255,0.45),    /* 修改14px：加大=按钮外发光范围更大 */
        0 5px 16px rgba(255,220,150,0.45); /* 修改16px：加大=按钮阴影范围更大 */
    animation: flashGold 1.8s infinite ease-in-out;
}

/* ========= 共享动画效果 ========= */

/* 金色按钮闪烁动画（影响：所有金色按钮的闪烁效果） */
@keyframes flashGold{
    0%{box-shadow:0 0 12px rgba(255,220,150,0.25);transform:scale(1);}
    50%{box-shadow:0 0 25px rgba(255,240,200,0.9);transform:scale(1.05);} /* 修改1.05：加大=按钮放大更多 */
    100%{box-shadow:0 0 12px rgba(255,220,150,0.25);transform:scale(1);}
}

/* ========= 响应式适配（影响：不同屏幕尺寸下的布局调整） ========= */

/* 平板和以下（影响：屏幕宽度 ≤ 1024px 时的布局） */
@media(max-width:1024px){
    .two-col,
    .two-col-2{
        flex-direction:column;             /* 左右两列变为上下排列 */
    }

    .card-right,
    .card-right-2{
        width:100%;                        /* 右侧卡片占满宽度 */
        max-width:500px;                   /* 修改500px：加大=右侧卡片最大宽度更大 */
        margin:0 auto;
    }

    .scroller,
    .scroller-2{
        height:200px;                      /* 修改200px：加大=滚动列表区域更高 */
    }

    .scroller-item img,
    .scroller-2-item img{
        width:70px;                        /* 修改70px：加大=列表图片更大 */
        height:70px;
    }
}

/* 中等屏幕（影响：屏幕宽度 ≤ 1000px 时的标题区域调整） */
@media(max-width:1000px){
    .hero-section{padding:90px 14px 40px;} /* 修改这些值：加大=标题区上下留白更大 */
    .hero-brand-row{
        flex-direction:row;
        justify-content:center;
        gap:14px;                          /* 修改14px：加大=logo 和文字间距更大 */
    }
    .hero-logo{width:70px;height:70px;}   /* 修改70px：加大=logo 更大 */
    .hero-title{
        font-size:46px;                    /* 修改46px：加大=标题更大 */
        -webkit-text-stroke:2px var(--title-stroke); /* 修改2px：加大=描边更粗 */
    }
    .hero-sub{font-size:17px;}            /* 修改17px：加大=副标题更大 */
    .hero-desc{font-size:14px;}           /* 修改14px：加大=描述文字更大 */
    .hero-link-row{font-size:16px;}       /* 修改16px：加大=按钮文字更大 */
}

/* 手机屏幕（影响：屏幕宽度 ≤ 480px 时的标题区域调整） */
@media(max-width:480px){
    .hero-brand-row{
        flex-direction:row;
        align-items:center;
    }
    .hero-logo{width:60px;height:60px;}   /* 修改60px：加大=logo 更大 */
    .hero-title{font-size:34px;}          /* 修改34px：加大=标题更大 */
}

/* 小屏幕 Support 区块（影响：屏幕宽度 ≤ 600px 时的底部 Support 区域调整） */
@media(max-width: 600px){
    .support-line1 { font-size: 19px; }   /* 修改19px：加大=主标题更大 */
    .support-line2 { font-size: 14px; }    /* 修改14px：加大=副标题更大 */
    .spin-support-btn { font-size: 16px; padding: 10px 26px; } /* 修改这些值：加大=按钮更大 */
}