:root {
    --primary-dark: #080a0e;
    --secondary-dark: #0d1117;
    --tertiary-dark: #161b22;
    --accent-copper: #b8734a;
    --accent-brass: #9a7b4f;
    --accent-amber: #d4a855;
    --accent-teal: #1a5c5c;
    --accent-steel: #3d4450;
    --text-primary: #e6e1dc;
    --text-secondary: #8b949e;
    --text-muted: #484f58;
    --border-subtle: rgba(139, 148, 158, 0.15);
    --border-glow: rgba(184, 115, 74, 0.3);
    --glass-bg: rgba(13, 17, 23, 0.92);
    --glass-border: rgba(255, 255, 255, 0.06);
}

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

body {
    font-family: 'Exo 2', sans-serif;
    background-color: var(--primary-dark);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--primary-dark); }
::-webkit-scrollbar-thumb { background: var(--accent-steel); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-copper); }
::-webkit-scrollbar-corner { background: transparent; }

/* Navigation */
.nav-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: linear-gradient(180deg, rgba(8, 10, 14, 0.98) 0%, rgba(8, 10, 14, 0.85) 100%);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-subtle);
}

nav {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    margin-left: 0;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.logo img {
    height: 144px;
    max-height: 144px;
    width: auto;
    filter: brightness(1.1);
    transition: filter 0.3s ease;
}

.logo:hover img { filter: brightness(1.3); }

.nav-links {
    display: flex;
    gap: 8px;
    list-style: none;
}

/* 中文版导航栏按钮间隔加大 */
html:lang(zh) .nav-links {
    gap: 32px;
}

.nav-links li {
    position: relative;
}

.nav-links a {
    font-family: 'Michroma', sans-serif;
    font-size: 0.72rem;
    font-weight: 400;
    color: #b8c5d1;
    text-decoration: none;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    position: relative;
    padding: 10px 16px;
    display: block;
    background: transparent;
    border: 1px solid transparent;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

/* 中文版导航栏字体加大 */
html:lang(zh) .nav-links a {
    font-size: 1.2rem;
    letter-spacing: 6px;
}

/* Tech corner marks */
.nav-links a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    border-top: 1px solid transparent;
    border-left: 1px solid transparent;
    transition: all 0.3s ease;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    border-bottom: 1px solid transparent;
    border-right: 1px solid transparent;
    transition: all 0.3s ease;
}

/* Hover Effects */
.nav-links a:hover {
    color: var(--accent-amber);
    background: rgba(184, 115, 74, 0.1);
    border-color: rgba(184, 115, 74, 0.4);
    text-shadow: 0 0 10px rgba(212, 168, 85, 0.5);
    box-shadow: 
        0 0 15px rgba(184, 115, 74, 0.2),
        inset 0 0 20px rgba(184, 115, 74, 0.05);
}

.nav-links a:hover::before {
    border-top-color: var(--accent-amber);
    border-left-color: var(--accent-amber);
    width: 14px;
    height: 14px;
    box-shadow: -2px -2px 8px rgba(212, 168, 85, 0.4);
}

.nav-links a:hover::after {
    border-bottom-color: var(--accent-amber);
    border-right-color: var(--accent-amber);
    width: 14px;
    height: 14px;
    box-shadow: 2px 2px 8px rgba(212, 168, 85, 0.4);
}

/* Active/Click Effect */
.nav-links a:active {
    transform: scale(0.97);
    background: rgba(184, 115, 74, 0.2);
    box-shadow: 
        0 0 25px rgba(184, 115, 74, 0.4),
        inset 0 0 30px rgba(184, 115, 74, 0.1);
}

/* Scan line effect on hover */
.nav-links li::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-amber), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
    animation: navScan 1.5s linear infinite;
    animation-play-state: paused;
}

.nav-links li:hover::before {
    opacity: 1;
    animation-play-state: running;
}

@keyframes navScan {
    0% { top: 0; }
    100% { top: 100%; }
}

/* Tech dot indicator */
.nav-links li::after {
    content: '';
    position: absolute;
    right: -4px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    background: var(--accent-steel);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.nav-links li:last-child::after {
    display: none;
}

.nav-links li:hover::after {
    background: var(--accent-amber);
    box-shadow: 0 0 8px var(--accent-amber);
}

.nav-links a.disabled { 
    opacity: 0.35; 
    pointer-events: none; 
}

.nav-links a.disabled:hover {
    color: #b8c5d1;
    background: transparent;
    border-color: transparent;
    text-shadow: none;
    box-shadow: none;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Language Selector - Earth Icon */
.lang-selector-wrapper {
    position: relative;
}

.lang-icon-btn {
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: #b8c5d1;
    padding: 8px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 4px;
}

.lang-icon-btn:hover {
    border-color: var(--accent-copper);
    color: var(--accent-copper);
    background: rgba(184, 115, 74, 0.1);
}

.lang-icon-btn svg {
    transition: transform 0.3s ease;
}

.lang-icon-btn.active svg {
    transform: rotate(360deg);
}

.lang-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--secondary-dark);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    min-width: 160px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1001;
    overflow: hidden;
}

.lang-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-option {
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    border: none;
    color: #b8c5d1;
    text-align: left;
    cursor: pointer;
    font-family: 'Exo 2', sans-serif;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.3s ease;
    gap: 10px;
}

.lang-option:hover {
    background: rgba(184, 115, 74, 0.1);
    color: var(--accent-copper);
}

.lang-option.active {
    color: var(--accent-amber);
    background: rgba(212, 168, 85, 0.1);
}

.lang-option .lang-check {
    opacity: 0;
    color: var(--accent-amber);
    transition: opacity 0.3s ease;
}

.lang-option.active .lang-check {
    opacity: 1;
}

.lang-option span {
    flex: 1;
}

/* Old lang-select (hidden) */
.lang-select {
    display: none;
}

.btn-preregister-nav {
    background: linear-gradient(135deg, var(--accent-copper) 0%, var(--accent-brass) 50%, var(--accent-amber) 100%);
    background-size: 200% 200%;
    border: none;
    color: #fff;
    padding: 12px 28px;
    font-family: 'Michroma', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
    box-shadow: 0 4px 15px rgba(184, 115, 74, 0.25);
    animation: navBtnGlow 3s ease-in-out infinite;
}

@keyframes navBtnGlow {
    0%, 100% { box-shadow: 0 4px 15px rgba(184, 115, 74, 0.25); }
    50% { box-shadow: 0 6px 25px rgba(184, 115, 74, 0.4); }
}

.btn-preregister-nav::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.4s ease;
}

.btn-preregister-nav:hover::before { left: 100%; }

.btn-preregister-nav:hover {
    box-shadow: 0 8px 30px rgba(184, 115, 74, 0.5), 0 0 50px rgba(184, 115, 74, 0.2);
    transform: translateY(-2px) scale(1.03);
    letter-spacing: 3px;
}

.btn-preregister-nav:active {
    transform: translateY(0) scale(0.98);
}

/* 中文版导航栏预约按钮字体和字间距 */
html:lang(zh) .btn-preregister-nav {
    font-size: 1.2rem;
    letter-spacing: 6px;
}

html:lang(zh) .btn-preregister-nav:hover {
    letter-spacing: 7px; /* 悬浮时稍微增加字间距 */
}

.btn-login {
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: #b8c5d1;
    padding: 9px 20px;
    font-family: 'Michroma', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* 英语版导航栏登录按钮字体加粗，与预约按钮一致 */
html:lang(en) .btn-login,
html:not(:lang(zh)) .btn-login {
    font-weight: 700;
}

/* 中文版导航栏登录按钮字体和字间距 */
html:lang(zh) .btn-login {
    font-size: 1.2rem;
    letter-spacing: 6px;
}

.btn-login:hover {
    border-color: var(--accent-copper);
    color: var(--accent-copper);
}

/* Mobile Menu Button */
.mobile-menu-btn {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 30px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
    position: relative;
}

.mobile-menu-btn span {
    width: 100%;
    height: 2px;
    background: var(--text-primary);
    border-radius: 2px;
    transition: all 0.3s ease;
    transform-origin: center;
}

.mobile-menu-btn.active span:nth-child(1) {
    transform: rotate(45deg) translate(8px, 8px);
}

.mobile-menu-btn.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-btn.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.mobile-menu-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* Mobile Menu */
.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    max-width: 85%;
    height: 100%;
    background: linear-gradient(180deg, rgba(8, 10, 14, 0.98) 0%, rgba(8, 10, 14, 0.95) 100%);
    backdrop-filter: blur(20px);
    border-left: 1px solid var(--border-subtle);
    z-index: 1000;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    box-shadow: -5px 0 30px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
}

.mobile-menu.active {
    right: 0;
}

.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--border-subtle);
}

.mobile-menu-logo {
    height: 80px;
    width: auto;
}

.mobile-menu-close {
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 24px;
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease;
}

.mobile-menu-close:hover {
    color: var(--accent-amber);
}

.mobile-menu-links {
    list-style: none;
    padding: 20px 0;
    margin: 0;
}

.mobile-menu-links li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.mobile-menu-links a {
    display: block;
    padding: 18px 20px;
    color: #b8c5d1;
    text-decoration: none;
    font-family: 'Michroma', sans-serif;
    font-size: 0.9rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    position: relative;
}

.mobile-menu-links a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background: var(--accent-amber);
    transform: scaleY(0);
    transition: transform 0.3s ease;
}

.mobile-menu-links a:hover,
.mobile-menu-links a:active {
    color: var(--accent-amber);
    background: rgba(184, 115, 74, 0.1);
    padding-left: 25px;
}

.mobile-menu-links a:hover::before,
.mobile-menu-links a:active::before {
    transform: scaleY(1);
}

.mobile-menu-links a.disabled {
    opacity: 0.35;
    pointer-events: none;
}

.mobile-menu-footer {
    padding: 20px;
    border-top: 1px solid var(--border-subtle);
    margin-top: auto;
}

/* Mobile Language Selector - Earth Icon */
.mobile-lang-selector-wrapper {
    position: relative;
    width: 100%;
}

.mobile-lang-icon-btn {
    width: 100%;
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: #b8c5d1;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    font-family: 'Exo 2', sans-serif;
    font-size: 0.9rem;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    border-radius: 4px;
}

.mobile-lang-icon-btn:hover {
    border-color: var(--accent-copper);
    color: var(--accent-copper);
    background: rgba(184, 115, 74, 0.1);
}

.mobile-lang-icon-btn svg {
    transition: transform 0.3s ease;
}

.mobile-lang-icon-btn.active svg {
    transform: rotate(360deg);
}

.mobile-lang-current {
    flex: 1;
    text-align: left;
}

.mobile-lang-dropdown {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--secondary-dark);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 1001;
    overflow: hidden;
    margin-bottom: 8px;
}

.mobile-lang-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mobile-lang-option {
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    border: none;
    color: #b8c5d1;
    text-align: left;
    cursor: pointer;
    font-family: 'Exo 2', sans-serif;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.3s ease;
    gap: 10px;
}

.mobile-lang-option:hover {
    background: rgba(184, 115, 74, 0.1);
    color: var(--accent-copper);
}

.mobile-lang-option.active {
    color: var(--accent-amber);
    background: rgba(212, 168, 85, 0.1);
}

.mobile-lang-option .lang-check {
    opacity: 0;
    color: var(--accent-amber);
    transition: opacity 0.3s ease;
}

.mobile-lang-option.active .lang-check {
    opacity: 1;
}

.mobile-lang-option span {
    flex: 1;
}

/* Old mobile-lang-select (hidden) */
.mobile-lang-select {
    display: none;
}

.mobile-lang-select:hover {
    border-color: var(--accent-copper);
}

.mobile-lang-select:focus {
    outline: none;
    border-color: var(--accent-copper);
}

.mobile-lang-select option {
    background: var(--secondary-dark);
}

/* Hero Section */
.hero {
    position: relative;
    height: 100vh;
    min-height: 700px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Video Background Container */
.hero-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    filter: brightness(0.9) contrast(1.1) saturate(1);
}

/* Fallback background image */
.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('2.jpg');
    background-size: cover;
    background-position: center;
    filter: brightness(0.9) contrast(1.1) saturate(1);
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        180deg,
        rgba(8, 10, 14, 0.15) 0%,
        rgba(8, 10, 14, 0) 30%,
        rgba(8, 10, 14, 0) 60%,
        rgba(8, 10, 14, 0.8) 100%
    );
}

.hero-scanlines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.02) 2px,
        rgba(0, 0, 0, 0.02) 4px
    );
    pointer-events: none;
}

.hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 200px;
    background: linear-gradient(0deg, var(--primary-dark) 0%, transparent 100%);
    pointer-events: none;
    z-index: 4;
}

.hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-top: -200px;
}

/* Play Button - Minimal Circle Style */
.play-button {
    position: relative;
    width: 80px;
    height: 80px;
    background: transparent;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 100;
    pointer-events: auto;
    margin: -150px 0 20px 0;
    transform: translateY(20px); /* 向下移动20px */
}

.play-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(184, 115, 74, 0.15);
    animation: playPulse 2s ease-out infinite;
    pointer-events: none;
}

.play-button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(184, 115, 74, 0.1);
    animation: playPulse 2s ease-out infinite 0.5s;
    pointer-events: none;
}

@keyframes playPulse {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
    100% { transform: translate(-50%, -50%) scale(1.8); opacity: 0; }
}

.play-button svg {
    width: 50px;
    height: 50px;
    fill: rgba(255, 255, 255, 0.9);
    filter: drop-shadow(0 0 15px rgba(184, 115, 74, 0.6)) drop-shadow(0 0 30px rgba(184, 115, 74, 0.3));
    transition: all 0.4s ease;
    position: relative;
    z-index: 1;
}

.play-button:hover {
    transform: translateY(20px) scale(1.15); /* 保持向下20px的同时放大 */
}

.play-button:hover svg {
    fill: #ffffff;
    filter: drop-shadow(0 0 20px rgba(212, 168, 85, 0.8)) drop-shadow(0 0 40px rgba(184, 115, 74, 0.5));
}

/* Logo Wrapper for Glitch Effect */
.hero-logo-wrapper {
    position: relative;
    max-width: 880px;
    width: 95%;
    margin-bottom: -160px;
}

/* Logo */
.hero-logo {
    width: 100%;
    filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.1));
    clip-path: inset(0 0 30% 0);
    position: relative;
    z-index: 2;
    transition: filter 0.1s ease;
    /* 左右边缘渐变透明，解决PNG边界问题 */
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0, 0, 0, 1) 15%,
        rgba(0, 0, 0, 1) 85%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0, 0, 0, 1) 15%,
        rgba(0, 0, 0, 1) 85%,
        transparent 100%
    );
}

/* Signal Interference Effect - Amber/Copper color scheme matching button */
.hero-logo-wrapper.glitch-active .hero-logo {
    animation: logoGlitchFilter 0.15s infinite steps(1);
}

/* Color split using amber and copper tones - matches button style */
@keyframes logoGlitchFilter {
    0% { 
        filter: 
            drop-shadow(-2px 0 0 rgba(212, 168, 85, 0.6))
            drop-shadow(2px 0 0 rgba(184, 115, 74, 0.6))
            drop-shadow(0 0 25px rgba(212, 168, 85, 0.3));
    }
    12% { 
        filter: 
            drop-shadow(-4px 1px 0 rgba(212, 168, 85, 0.8))
            drop-shadow(3px 0 0 rgba(184, 115, 74, 0.5))
            drop-shadow(0 0 35px rgba(212, 168, 85, 0.4));
    }
    25% { 
        filter: 
            drop-shadow(-2px 0 0 rgba(212, 168, 85, 0.5))
            drop-shadow(4px -1px 0 rgba(184, 115, 74, 0.75))
            drop-shadow(0 0 30px rgba(212, 168, 85, 0.35));
    }
    37% { 
        filter: 
            drop-shadow(-5px 0 0 rgba(212, 168, 85, 0.85))
            drop-shadow(2px 1px 0 rgba(184, 115, 74, 0.45))
            drop-shadow(0 0 40px rgba(212, 168, 85, 0.5));
    }
    50% { 
        filter: 
            drop-shadow(-3px -1px 0 rgba(212, 168, 85, 0.55))
            drop-shadow(5px 0 0 rgba(184, 115, 74, 0.8))
            drop-shadow(0 0 25px rgba(212, 168, 85, 0.3));
    }
    62% { 
        filter: 
            drop-shadow(-4px 1px 0 rgba(212, 168, 85, 0.7))
            drop-shadow(3px -1px 0 rgba(184, 115, 74, 0.6))
            drop-shadow(0 0 45px rgba(212, 168, 85, 0.45));
    }
    75% { 
        filter: 
            drop-shadow(-2px 0 0 rgba(212, 168, 85, 0.5))
            drop-shadow(4px 1px 0 rgba(184, 115, 74, 0.7))
            drop-shadow(0 0 32px rgba(212, 168, 85, 0.38));
    }
    87% { 
        filter: 
            drop-shadow(-3px -1px 0 rgba(212, 168, 85, 0.75))
            drop-shadow(2px 0 0 rgba(184, 115, 74, 0.55))
            drop-shadow(0 0 28px rgba(212, 168, 85, 0.35));
    }
    100% { 
        filter: 
            drop-shadow(-3px 0 0 rgba(212, 168, 85, 0.65))
            drop-shadow(3px 0 0 rgba(184, 115, 74, 0.65))
            drop-shadow(0 0 30px rgba(212, 168, 85, 0.4));
    }
}

/* Scanline overlay effect - amber tinted */
.hero-logo-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 30%;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(212, 168, 85, 0.03) 2px,
        rgba(212, 168, 85, 0.03) 4px
    );
    pointer-events: none;
    opacity: 0;
    z-index: 10;
    transition: opacity 0.2s ease;
}

.hero-logo-wrapper.glitch-active::before {
    opacity: 1;
}

/* Hero Logo Text - Split Characters */
.hero-logo-text {
    font-family: 'Michroma', sans-serif;
    font-size: 120px;
    font-weight: 700;
    letter-spacing: 8px;
    color: #fff;
    text-shadow: 
        0 0 30px rgba(184, 115, 74, 0.6),
        0 0 60px rgba(184, 115, 74, 0.4),
        0 0 100px rgba(184, 115, 74, 0.2);
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    perspective: 1000px;
    position: relative;
}

.logo-char {
    display: inline-block;
    position: relative;
    transition: all 0.1s ease;
    transform-style: preserve-3d;
}

.logo-char::before,
.logo-char::after {
    content: attr(data-char);
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
}

.logo-char::before {
    color: #ff0040;
    z-index: -1;
}

.logo-char::after {
    color: #00ffff;
    z-index: -2;
}

.logo-number {
    color: var(--accent-amber);
}

/* Glitch Effect on Hover */
.hero-logo-text.glitch-active .logo-char {
    animation: charGlitch 0.15s ease infinite;
}

.hero-logo-text.glitch-active .logo-char::before {
    opacity: 0.8;
    animation: glitchLeft 0.1s ease infinite;
}

.hero-logo-text.glitch-active .logo-char::after {
    opacity: 0.8;
    animation: glitchRight 0.1s ease infinite;
}

.hero-logo-text.glitch-active .logo-char:nth-child(1) { animation-delay: 0ms; }
.hero-logo-text.glitch-active .logo-char:nth-child(2) { animation-delay: 20ms; }
.hero-logo-text.glitch-active .logo-char:nth-child(3) { animation-delay: 40ms; }
.hero-logo-text.glitch-active .logo-char:nth-child(4) { animation-delay: 60ms; }
.hero-logo-text.glitch-active .logo-char:nth-child(5) { animation-delay: 80ms; }
.hero-logo-text.glitch-active .logo-char:nth-child(6) { animation-delay: 100ms; }
.hero-logo-text.glitch-active .logo-char:nth-child(7) { animation-delay: 120ms; }
.hero-logo-text.glitch-active .logo-char:nth-child(8) { animation-delay: 140ms; }
.hero-logo-text.glitch-active .logo-char:nth-child(9) { animation-delay: 160ms; }

@keyframes charGlitch {
    0% { 
        transform: translate(0, 0) skewX(0deg);
        text-shadow: 0 0 5px rgba(184, 115, 74, 0.35);
    }
    20% { 
        transform: translate(-3px, 2px) skewX(-5deg);
        text-shadow: 0 0 15px rgba(255, 0, 64, 0.45);
    }
    40% { 
        transform: translate(3px, -1px) skewX(3deg);
        text-shadow: 0 0 15px rgba(0, 255, 255, 0.45);
    }
    60% { 
        transform: translate(-2px, -2px) skewX(-2deg);
        text-shadow: 0 0 10px rgba(184, 115, 74, 0.5);
    }
    80% { 
        transform: translate(2px, 1px) skewX(4deg);
        text-shadow: 0 0 20px rgba(255, 200, 100, 0.45);
    }
    100% { 
        transform: translate(0, 0) skewX(0deg);
        text-shadow: 0 0 5px rgba(184, 115, 74, 0.35);
    }
}

@keyframes glitchLeft {
    0% { transform: translate(0, 0); clip-path: inset(0 0 0 0); }
    20% { transform: translate(-5px, -2px); clip-path: inset(20% 0 60% 0); }
    40% { transform: translate(-3px, 3px); clip-path: inset(50% 0 30% 0); }
    60% { transform: translate(-6px, -1px); clip-path: inset(10% 0 70% 0); }
    80% { transform: translate(-2px, 2px); clip-path: inset(40% 0 40% 0); }
    100% { transform: translate(0, 0); clip-path: inset(0 0 0 0); }
}

@keyframes glitchRight {
    0% { transform: translate(0, 0); clip-path: inset(0 0 0 0); }
    20% { transform: translate(5px, 2px); clip-path: inset(60% 0 20% 0); }
    40% { transform: translate(3px, -3px); clip-path: inset(30% 0 50% 0); }
    60% { transform: translate(6px, 1px); clip-path: inset(70% 0 10% 0); }
    80% { transform: translate(2px, -2px); clip-path: inset(40% 0 40% 0); }
    100% { transform: translate(0, 0); clip-path: inset(0 0 0 0); }
}

/* Signal noise overlay on glitch */
.hero-logo-text.glitch-active::before {
    content: '';
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        rgba(255, 255, 255, 0.05) 1px,
        transparent 2px
    );
    animation: noiseMove 0.1s steps(10) infinite;
    pointer-events: none;
    z-index: 10;
}

/* Horizontal scan line that sweeps across */
.hero-logo-text.glitch-active::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 200, 100, 0.8) 50%, 
        transparent 100%
    );
    animation: scanSweep 0.3s linear infinite;
    pointer-events: none;
    z-index: 11;
    box-shadow: 0 0 20px rgba(255, 200, 100, 0.6);
}

@keyframes noiseMove {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}

@keyframes scanSweep {
    0% { top: -10%; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { top: 110%; opacity: 0; }
}

/* Flicker effect for individual characters */
.hero-logo-text.glitch-active .logo-char:nth-child(odd) {
    animation: charGlitchFast 0.1s ease infinite;
}

.hero-logo-text.glitch-active .logo-char:nth-child(even) {
    animation: charGlitchSlow 0.15s ease infinite reverse;
}

@keyframes charGlitchFast {
    0%, 100% { 
        opacity: 1;
        filter: brightness(1);
    }
    25% { 
        opacity: 0.95;
        filter: brightness(1.15);
    }
    50% { 
        opacity: 1;
        filter: brightness(0.9);
    }
    75% { 
        opacity: 0.97;
        filter: brightness(1.1);
    }
}

@keyframes charGlitchSlow {
    0%, 100% { 
        opacity: 1;
        filter: brightness(1) hue-rotate(0deg);
    }
    33% { 
        opacity: 0.92;
        filter: brightness(1.12) hue-rotate(5deg);
    }
    66% { 
        opacity: 1;
        filter: brightness(0.95) hue-rotate(-5deg);
    }
}

/* Subtitle - Styled like logo font, stacked with offset */
.hero-subtitle {
    display: none; /* 隐藏首页标语 */
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 0 0 20px 0;
}

.hero-subtitle span {
    font-family: 'Michroma', sans-serif;
    font-size: clamp(1.5rem, 4vw, 2.6rem);
    font-weight: 900;
    font-style: italic;
    color: var(--text-primary);
    letter-spacing: clamp(8px, 2vw, 16px);
    text-transform: uppercase;
    text-shadow: 0 0 30px rgba(230, 225, 220, 0.2);
    line-height: 1.2;
    background: linear-gradient(180deg, #ffffff 0%, #c9c4be 50%, #a89a8a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.3);
    transform: skewX(-10deg);
    position: relative;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

/* 中文版字体放大3倍并使用Audiowide字体，两行文字水平排列 */
html:lang(zh) .hero-subtitle {
    flex-direction: row;
    gap: clamp(20px, 3vw, 40px);
    justify-content: center;
}

html:lang(zh) .hero-subtitle span {
    font-family: 'Audiowide', 'Russo One', sans-serif;
    font-size: clamp(4.5rem, 12vw, 7.8rem);
    font-weight: 400;
    font-style: normal;
    letter-spacing: clamp(10px, 2vw, 18px);
    position: relative; /* 确保移动时不影响布局流，保持居中对齐 */
}

/* 标语两侧的线条 - 默认隐藏 */
.hero-subtitle span::before,
.hero-subtitle span::after {
    content: '';
    position: absolute;
    top: 50%;
    height: 2px;
    width: 0;
    background: linear-gradient(90deg, transparent, rgba(212, 168, 85, 0.9), rgba(184, 115, 74, 0.6), transparent);
    transform: translateY(-50%);
    opacity: 0;
    transition: all 0.3s ease;
}

.hero-subtitle span::before {
    right: calc(100% + 15px);
}

.hero-subtitle span::after {
    left: calc(100% + 15px);
}

/* 按钮悬浮时 - 标语文字联动效果 */
.hero-subtitle.pulse-active span {
    text-shadow: 
        0 0 40px rgba(212, 168, 85, 0.8),
        0 0 80px rgba(184, 115, 74, 0.5);
    -webkit-text-stroke: 1px rgba(212, 168, 85, 0.6);
    filter: brightness(1.2);
}

/* 悬浮时线条闪出并波动 */
.hero-subtitle.pulse-active span::before {
    opacity: 1;
    width: 80px;
    animation: lineFlashLeft 0.6s ease-out forwards, linePulse 1.2s ease-in-out 0.6s infinite;
}

.hero-subtitle.pulse-active span::after {
    opacity: 1;
    width: 80px;
    animation: lineFlashRight 0.6s ease-out forwards, linePulse 1.2s ease-in-out 0.6s infinite;
}

@keyframes lineFlashLeft {
    0% {
        width: 0;
        opacity: 0;
        transform: translateY(-50%) translateX(30px);
    }
    50% {
        opacity: 1;
    }
    100% {
        width: 80px;
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
}

@keyframes lineFlashRight {
    0% {
        width: 0;
        opacity: 0;
        transform: translateY(-50%) translateX(-30px);
    }
    50% {
        opacity: 1;
    }
    100% {
        width: 80px;
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
}

@keyframes linePulse {
    0%, 100% {
        opacity: 0.6;
        width: 80px;
        filter: brightness(1);
    }
    50% {
        opacity: 1;
        width: 100px;
        filter: brightness(1.3);
    }
}

.hero-subtitle.pulse-active span:first-child {
    transform: skewX(-10deg) translateX(-305px) translateY(-15px);
}

.hero-subtitle.pulse-active span:last-child {
    transform: skewX(-10deg) translateX(305px);
}

.hero-subtitle span:first-child {
    transform: skewX(-10deg) translateX(-300px) translateY(-15px);
}

.hero-subtitle span:last-child {
    transform: skewX(-10deg) translateX(300px);
}

/* 中文版水平排列时，移除偏移 */
html:lang(zh) .hero-subtitle span:first-child {
    transform: skewX(-30deg);
}

html:lang(zh) .hero-subtitle span:last-child {
    transform: skewX(-30deg);
}

/* 中文版预注册按钮悬浮时 - 两行文字分别向左向右移动，保持居中对齐 */
html:lang(zh) .hero-subtitle.pulse-active {
    justify-content: center; /* 确保容器始终居中 */
    transform: translateX(clamp(20px, 2.5vw, 40px)); /* 补偿倾斜造成的视觉偏移，整体向左移动 */
}

html:lang(zh) .hero-subtitle.pulse-active span:first-child {
    transform: skewX(-30deg) translateX(clamp(-200px, -20vw, -400px));
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

html:lang(zh) .hero-subtitle.pulse-active span:last-child {
    transform: skewX(-30deg) translateX(clamp(60px, 7.5vw, 120px)); /* 减少向右移动距离，补偿倾斜造成的视觉偏移 */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 中文版预注册按钮悬浮时显示横线特效 */
html:lang(zh) .hero-subtitle.pulse-active span::before {
    opacity: 1;
    width: clamp(60px, 8vw, 120px);
    animation: lineFlashLeft 0.6s ease-out forwards, linePulse 1.2s ease-in-out 0.6s infinite;
}

html:lang(zh) .hero-subtitle.pulse-active span::after {
    opacity: 1;
    width: clamp(60px, 8vw, 120px);
    animation: lineFlashRight 0.6s ease-out forwards, linePulse 1.2s ease-in-out 0.6s infinite;
}

/* 中文版鼠标悬浮效果已取消 - 只保留按钮悬浮时的联动效果 */

/* Enhanced Pre-register Button */
/* Industrial Tech Pre-register Button */
.btn-preregister {
    display: inline-block;
    background: linear-gradient(135deg, rgba(20, 25, 30, 0.95) 0%, rgba(30, 35, 40, 0.9) 100%);
    color: var(--accent-amber);
    padding: 24px 80px;
    margin-top: 10px;
    font-family: 'Michroma', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 6px;
    text-transform: uppercase;
    border: 2px solid var(--accent-copper);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-shadow: 0 0 20px rgba(212, 168, 85, 0.6);
    box-shadow: 
        0 0 30px rgba(184, 115, 74, 0.3),
        inset 0 0 40px rgba(184, 115, 74, 0.1);
}

/* Animated border glow */
.btn-preregister::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: linear-gradient(45deg, var(--accent-copper), var(--accent-amber), var(--accent-copper), var(--accent-amber));
    background-size: 400% 400%;
    z-index: -1;
    animation: borderGlow 3s ease infinite;
    opacity: 0.8;
}

@keyframes borderGlow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Inner tech frame */
.btn-preregister::after {
    content: '';
    position: absolute;
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;
    border: 1px solid rgba(212, 168, 85, 0.3);
    pointer-events: none;
}

/* Corner screws */
.btn-preregister-wrapper {
    position: relative;
    display: inline-block;
}

.btn-preregister .corner-screw {
    position: absolute;
    width: 10px;
    height: 10px;
    border: 1px solid var(--accent-amber);
    border-radius: 50%;
    background: rgba(13, 17, 23, 0.9);
    z-index: 10;
}

.btn-preregister .corner-screw::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 1px;
    background: var(--accent-amber);
}

.btn-preregister .corner-screw.tl { top: 8px; left: 8px; }
.btn-preregister .corner-screw.tr { top: 8px; right: 8px; }
.btn-preregister .corner-screw.bl { bottom: 8px; left: 8px; }
.btn-preregister .corner-screw.br { bottom: 8px; right: 8px; }

/* Scan effect - only on hover */
.btn-preregister .scan-effect {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(212, 168, 85, 0.1) 20%,
        rgba(212, 168, 85, 0.4) 50%,
        rgba(212, 168, 85, 0.1) 80%,
        transparent 100%
    );
    opacity: 0;
    pointer-events: none;
    transform: skewX(-15deg);
}

.btn-preregister:hover .scan-effect {
    opacity: 1;
    animation: scanMove 1.5s ease-in-out infinite;
}

@keyframes scanMove {
    0% {
        left: -50%;
    }
    100% {
        left: 150%;
    }
}

/* Ripple extra - glow line effect */
.btn-preregister .ripple-extra {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid transparent;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
}

.btn-preregister:hover .ripple-extra {
    border-color: var(--accent-amber);
    box-shadow: inset 0 0 20px rgba(212, 168, 85, 0.2), 0 0 15px rgba(212, 168, 85, 0.3);
    opacity: 1;
}

/* Side indicators */
.btn-preregister .side-indicator {
    position: absolute;
    width: 3px;
    height: 30px;
    background: var(--accent-amber);
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.6;
    transition: all 0.3s ease;
}

.btn-preregister .side-indicator.left { left: -8px; }
.btn-preregister .side-indicator.right { right: -8px; }

/* Hover Effects */
.btn-preregister:hover {
    transform: translateY(-5px) scale(1.02);
    background: linear-gradient(135deg, rgba(30, 35, 40, 0.98) 0%, rgba(40, 45, 50, 0.95) 100%);
    border-color: var(--accent-amber);
    color: #fff;
    text-shadow: 
        0 0 30px rgba(212, 168, 85, 0.9),
        0 0 60px rgba(212, 168, 85, 0.6);
    letter-spacing: 8px;
    box-shadow: 
        0 0 50px rgba(184, 115, 74, 0.6),
        0 0 100px rgba(184, 115, 74, 0.4),
        0 20px 60px rgba(0, 0, 0, 0.5),
        inset 0 0 60px rgba(184, 115, 74, 0.15);
}

.btn-preregister:hover::before {
    opacity: 1;
    animation: borderGlow 1.5s ease infinite;
}

.btn-preregister:hover::after {
    border-color: rgba(212, 168, 85, 0.6);
}

.btn-preregister:hover .side-indicator {
    opacity: 1;
    height: 40px;
    box-shadow: 0 0 15px var(--accent-amber);
}

.btn-preregister:hover .corner-screw {
    box-shadow: 0 0 10px var(--accent-amber);
}

/* Active/Click Effect */
.btn-preregister:active {
    transform: translateY(-2px) scale(0.98);
    box-shadow: 
        0 0 30px rgba(184, 115, 74, 0.8),
        inset 0 0 80px rgba(184, 115, 74, 0.2);
}

/* Data readout effect */
.btn-preregister .data-readout {
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Exo 2', monospace;
    font-size: 0.6rem;
    color: var(--accent-copper);
    letter-spacing: 3px;
    opacity: 0;
    transition: all 0.3s ease;
}

.btn-preregister:hover .data-readout {
    opacity: 0.7;
    bottom: -30px;
}

/* 中文版按钮样式 - 保持与英文版相同的按钮大小，放大文字 */
html:lang(zh) .btn-preregister {
    padding: 24px 80px; /* 与英文版保持相同的padding，确保按钮大小一致 */
    font-size: 1.8rem; /* 放大文字，从1.5rem增加到1.8rem */
    letter-spacing: 4px; /* 适当调整字间距 */
}

html:lang(zh) .btn-preregister:hover {
    letter-spacing: 5px; /* 悬浮时也相应调整 */
}

/* Social Links - Fixed on scroll */
.social-links {
    position: fixed;
    right: 35px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    z-index: 1000;
}

/* 上方线条 */
.social-links::before {
    content: '';
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 30px;
    background: linear-gradient(180deg, transparent, var(--accent-amber));
    box-shadow: 0 0 8px rgba(212, 168, 85, 0.4);
}

/* 下方线条 */
.social-links::after {
    content: '';
    position: absolute;
    bottom: -35px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 30px;
    background: linear-gradient(180deg, var(--accent-amber), transparent);
    box-shadow: 0 0 8px rgba(212, 168, 85, 0.4);
}

.social-links a {
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(212, 168, 85, 0.4);
    color: var(--accent-amber);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background: linear-gradient(135deg, rgba(13, 17, 23, 0.95) 0%, rgba(8, 10, 14, 0.98) 100%);
    position: relative;
    overflow: visible;
    box-shadow: 0 0 15px rgba(212, 168, 85, 0.1);
}

/* 单个按钮的角装饰 */
.social-links a::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    width: 10px;
    height: 10px;
    border: 2px solid var(--accent-amber);
    border-right: none;
    border-bottom: none;
    transition: all 0.3s ease;
}

.social-links a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    border: 2px solid var(--accent-amber);
    border-left: none;
    border-top: none;
    transition: all 0.3s ease;
}

.social-links a:hover::before,
.social-links a:hover::after {
    width: 12px;
    height: 12px;
}

/* 通用悬浮效果 */
.social-links a:hover {
    transform: translateX(-5px) scale(1.08);
    background: linear-gradient(135deg, rgba(20, 18, 15, 0.98) 0%, rgba(10, 8, 6, 0.99) 100%);
}

/* 抖音 */
.social-links a:nth-child(1):hover {
    border-color: #FFFFFF;
    color: #FFFFFF;
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.5);
    background: #000000;
}
.social-links a:nth-child(1):hover::before,
.social-links a:nth-child(1):hover::after {
    border-color: #FFFFFF;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

/* TapTap */
.social-links a:nth-child(2):hover {
    border-color: #00BCD4;
    color: #00BCD4;
    box-shadow: 0 0 25px rgba(0, 188, 212, 0.5);
}
.social-links a:nth-child(2):hover::before,
.social-links a:nth-child(2):hover::after {
    border-color: #00BCD4;
    box-shadow: 0 0 8px rgba(0, 188, 212, 0.6);
}

/* Bilibili - 使用与微博相同的悬浮样式 */
.social-links a:nth-child(3):hover {
    border-color: #E4405F;
    color: #E4405F;
    box-shadow: 0 0 25px rgba(228, 64, 95, 0.5);
}
.social-links a:nth-child(3):hover::before,
.social-links a:nth-child(3):hover::after {
    border-color: #E4405F;
    box-shadow: 0 0 8px rgba(228, 64, 95, 0.6);
}

/* 微信公众号 */
.social-links a:nth-child(4):hover {
    border-color: #07C160;
    color: #07C160;
    box-shadow: 0 0 25px rgba(7, 193, 96, 0.5);
}
.social-links a:nth-child(4):hover::before,
.social-links a:nth-child(4):hover::after {
    border-color: #07C160;
    box-shadow: 0 0 8px rgba(7, 193, 96, 0.6);
}

/* 微信二维码框 */
.wechat-link {
    position: relative;
}

/* PC端和iPad端隐藏微信logo */
.social-links .wechat-link {
    display: none;
}

.wechat-qrcode-box {
    position: relative;
    width: 160px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(13, 17, 23, 0.98) 0%, rgba(8, 10, 14, 0.99) 100%);
    border: 2px solid rgba(212, 168, 85, 0.4);
    box-shadow: 0 0 15px rgba(212, 168, 85, 0.1);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 1001;
    margin-top: 0;
    animation: qrcodeFadeIn 0.5s ease-out 0.6s both;
}

/* 二维码框角装饰 */
.qrcode-corner {
    position: absolute;
    width: 12px;
    height: 12px;
    border: 2px solid var(--accent-amber);
    transition: all 0.3s ease;
}

.qrcode-corner.top-left {
    top: -2px;
    left: -2px;
    border-right: none;
    border-bottom: none;
}

.qrcode-corner.top-right {
    top: -2px;
    right: -2px;
    border-left: none;
    border-bottom: none;
}

.qrcode-corner.bottom-left {
    bottom: -2px;
    left: -2px;
    border-right: none;
    border-top: none;
}

.qrcode-corner.bottom-right {
    bottom: -2px;
    right: -2px;
    border-left: none;
    border-top: none;
}

.wechat-qrcode-box:hover .qrcode-corner {
    width: 14px;
    height: 14px;
    box-shadow: 0 0 8px rgba(212, 168, 85, 0.6);
}

/* 二维码内容区域 */
.qrcode-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.qrcode-placeholder {
    width: 128px;
    height: 128px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(212, 168, 85, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.qrcode-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    padding: 6px;
    box-sizing: border-box;
}

.qrcode-fallback {
    color: rgba(212, 168, 85, 0.6);
    font-size: 12px;
    text-align: center;
    padding: 10px;
    display: none;
}

/* 如果图片加载失败，显示占位文字 */
.qrcode-image[src=""] ~ .qrcode-fallback,
.qrcode-image:not([src]) ~ .qrcode-fallback {
    display: block;
}

.qrcode-text {
    color: var(--accent-amber);
    font-size: 13px;
    font-family: 'Exo 2', sans-serif;
    font-weight: 500;
    letter-spacing: 1px;
    margin: 0;
    text-align: center;
    line-height: 1.3;
}

.qrcode-text-line1,
.qrcode-text-line2 {
    display: block;
    text-align: center;
}

/* 二维码框动态定位模式（用于页脚和弹窗） */
.wechat-qrcode-box.popup-mode {
    position: fixed;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    z-index: 10000;
}

.wechat-qrcode-box.popup-mode.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.qrcode-text-line1 {
    margin-bottom: 2px;
}

/* YouTube / 小红书 */
.social-links a:nth-child(5):hover {
    border-color: #FF0000;
    color: #FF0000;
    box-shadow: 0 0 25px rgba(255, 0, 0, 0.5);
}
.social-links a:nth-child(5):hover::before,
.social-links a:nth-child(5):hover::after {
    border-color: #FF0000;
    box-shadow: 0 0 8px rgba(255, 0, 0, 0.6);
}

/* 微博 */
.social-links a:nth-child(6):hover {
    border-color: #FF6600;
    color: #FF6600;
    box-shadow: 0 0 25px rgba(255, 102, 0, 0.5);
}
.social-links a:nth-child(6):hover::before,
.social-links a:nth-child(6):hover::after {
    border-color: #FF6600;
    box-shadow: 0 0 8px rgba(255, 102, 0, 0.6);
}

.social-links a:nth-child(1) { animation: socialFadeIn 0.5s ease-out 0.1s both; }
.social-links a:nth-child(2) { animation: socialFadeIn 0.5s ease-out 0.2s both; }
.social-links a:nth-child(3) { animation: socialFadeIn 0.5s ease-out 0.3s both; }
.social-links a:nth-child(4) { animation: socialFadeIn 0.5s ease-out 0.4s both; }
.social-links a:nth-child(5) { animation: socialFadeIn 0.5s ease-out 0.5s both; }
.social-links a:nth-child(6) { animation: socialFadeIn 0.5s ease-out 0.6s both; }

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

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

.social-links svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
    transition: transform 0.3s ease;
    position: relative;
    z-index: 1;
}

/* 确保侧边社媒图标路径颜色跟随父级 color 变化 */
.social-links svg path {
    fill: currentColor !important;
}

.social-links a:hover svg {
    transform: scale(1.2);
}

/* Hero Arrows - Hidden */
.hero-arrow {
    display: none;
}

.hero-arrow::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(184, 115, 74, 0.1), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.hero-arrow:hover::before { opacity: 1; }

.hero-arrow:hover {
    border-color: var(--accent-copper);
    background: rgba(184, 115, 74, 0.08);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 0 30px rgba(184, 115, 74, 0.25);
}

.hero-arrow.prev { left: 40px; }
.hero-arrow.next { right: 100px; }

.hero-arrow svg {
    width: 22px;
    height: 22px;
    fill: var(--text-secondary);
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.hero-arrow:hover svg {
    fill: var(--accent-copper);
}

.hero-arrow.prev:hover svg { transform: translateX(-3px); }
.hero-arrow.next:hover svg { transform: translateX(3px); }

/* World Section */
.world-section {
    padding: 100px 40px;
    background: var(--secondary-dark);
    position: relative;
    overflow: hidden;
}

/* Tech Background Pattern */
.world-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        /* Diagonal tech lines */
        repeating-linear-gradient(45deg, transparent, transparent 100px, rgba(212, 168, 85, 0.06) 100px, rgba(212, 168, 85, 0.06) 102px),
        repeating-linear-gradient(-45deg, transparent, transparent 100px, rgba(212, 168, 85, 0.06) 100px, rgba(212, 168, 85, 0.06) 102px);
    background-size: 200px 200px, 200px 200px;
    pointer-events: none;
}

/* Top border line */
.world-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-copper), transparent);
}

/* Tech Corner Screws */
.world-section .tech-screw,
.event-section .tech-screw {
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(212, 168, 85, 0.7);
    border-radius: 50%;
    background: var(--primary-dark);
    z-index: 1;
    box-shadow: 0 0 8px rgba(212, 168, 85, 0.3);
}

.world-section .tech-screw::before,
.event-section .tech-screw::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 2px;
    background: rgba(212, 168, 85, 0.9);
}

.world-section .tech-screw::after,
.event-section .tech-screw::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
    width: 10px;
    height: 2px;
    background: rgba(212, 168, 85, 0.9);
}

.world-section .tech-screw.top-left,
.event-section .tech-screw.top-left { top: 20px; left: 20px; }
.world-section .tech-screw.top-right,
.event-section .tech-screw.top-right { top: 20px; right: 20px; }
.world-section .tech-screw.bottom-left,
.event-section .tech-screw.bottom-left { bottom: 20px; left: 20px; }
.world-section .tech-screw.bottom-right,
.event-section .tech-screw.bottom-right { bottom: 20px; right: 20px; }

/* Steel Plate Corners */
.world-section .steel-corner,
.event-section .steel-corner {
    position: absolute;
    width: 100px;
    height: 100px;
    z-index: 1;
    pointer-events: none;
}

.world-section .steel-corner.top-left,
.event-section .steel-corner.top-left {
    top: 0;
    left: 0;
    border-top: 3px solid rgba(212, 168, 85, 0.6);
    border-left: 3px solid rgba(212, 168, 85, 0.6);
    box-shadow: inset 5px 5px 15px rgba(212, 168, 85, 0.1);
}

.world-section .steel-corner.top-right,
.event-section .steel-corner.top-right {
    top: 0;
    right: 0;
    border-top: 3px solid rgba(212, 168, 85, 0.6);
    border-right: 3px solid rgba(212, 168, 85, 0.6);
    box-shadow: inset -5px 5px 15px rgba(212, 168, 85, 0.1);
}

.world-section .steel-corner.bottom-left,
.event-section .steel-corner.bottom-left {
    bottom: 0;
    left: 0;
    border-bottom: 3px solid rgba(212, 168, 85, 0.6);
    border-left: 3px solid rgba(212, 168, 85, 0.6);
    box-shadow: inset 5px -5px 15px rgba(212, 168, 85, 0.1);
}

.world-section .steel-corner.bottom-right,
.event-section .steel-corner.bottom-right {
    bottom: 0;
    right: 0;
    border-bottom: 3px solid rgba(212, 168, 85, 0.6);
    border-right: 3px solid rgba(212, 168, 85, 0.6);
    box-shadow: inset -5px -5px 15px rgba(212, 168, 85, 0.1);
}

/* Tech Circuit Lines */
.world-section .circuit-line,
.event-section .circuit-line {
    position: absolute;
    background: rgba(212, 168, 85, 0.4);
    z-index: 1;
    box-shadow: 0 0 6px rgba(212, 168, 85, 0.3);
}

.world-section .circuit-line.horizontal,
.event-section .circuit-line.horizontal {
    height: 2px;
    width: 180px;
}

.world-section .circuit-line.vertical,
.event-section .circuit-line.vertical {
    width: 2px;
    height: 180px;
}

.world-section .circuit-line.h1,
.event-section .circuit-line.h1 { top: 15%; left: 5%; }
.world-section .circuit-line.h2,
.event-section .circuit-line.h2 { top: 85%; right: 5%; width: 220px; }
.world-section .circuit-line.v1,
.event-section .circuit-line.v1 { top: 10%; left: 8%; }
.world-section .circuit-line.v2,
.event-section .circuit-line.v2 { bottom: 10%; right: 8%; }

.world-section .circuit-line::before,
.event-section .circuit-line::before {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background: rgba(212, 168, 85, 0.8);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(212, 168, 85, 0.6);
}

.world-section .circuit-line.horizontal::before,
.event-section .circuit-line.horizontal::before { right: -2px; top: -4px; }
.world-section .circuit-line.vertical::before,
.event-section .circuit-line.vertical::before { bottom: -2px; left: -4px; }

.world-section .circuit-line::after,
.event-section .circuit-line::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background: rgba(212, 168, 85, 0.8);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(212, 168, 85, 0.6);
}

.world-section .circuit-line.horizontal::after,
.event-section .circuit-line.horizontal::after { left: -2px; top: -4px; }
.world-section .circuit-line.vertical::after,
.event-section .circuit-line.vertical::after { top: -2px; left: -4px; }

/* Animated Tech Lines - Enhanced Scan Effect */
.world-section .scan-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    top: -5%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(212, 168, 85, 0.3) 20%, 
        rgba(212, 168, 85, 1) 50%, 
        rgba(212, 168, 85, 0.3) 80%, 
        transparent 100%
    );
    box-shadow: 
        0 0 20px rgba(212, 168, 85, 0.8),
        0 0 40px rgba(212, 168, 85, 0.4),
        0 0 60px rgba(212, 168, 85, 0.2);
    z-index: 100;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* 扫描线激活状态 */
.world-section .scan-line.scanning {
    opacity: 1;
    animation: scanMoveOnce 4s linear forwards;
}

/* 扫描完成后隐藏 */
.world-section .scan-line.scan-complete {
    opacity: 0;
}

/* 扫描线的垂直光束效果 */
.world-section .scan-line::before {
    content: '';
    position: absolute;
    top: -100px;
    left: 0;
    right: 0;
    height: 200px;
    background: linear-gradient(180deg, 
        transparent 0%, 
        rgba(212, 168, 85, 0.05) 40%, 
        rgba(212, 168, 85, 0.15) 50%, 
        rgba(212, 168, 85, 0.05) 60%, 
        transparent 100%
    );
    pointer-events: none;
}

/* 扫描线下方的拖尾效果 */
.world-section .scan-line::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 0;
    right: 0;
    height: 50px;
    background: linear-gradient(180deg, 
        rgba(212, 168, 85, 0.2) 0%, 
        transparent 100%
    );
    pointer-events: none;
}

@keyframes scanMoveEnhanced {
    0% { top: -5%; opacity: 0; }
    5% { opacity: 1; }
    95% { opacity: 1; }
    100% { top: 105%; opacity: 0; }
}

/* 单次扫描动画 */
@keyframes scanMoveOnce {
    0% { top: -5%; }
    100% { top: 105%; }
}

/* Side Tech Panels */
.world-section .side-panel,
.event-section .side-panel {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 250px;
    z-index: 1;
}

.world-section .side-panel.left,
.event-section .side-panel.left { left: 15px; }
.world-section .side-panel.right,
.event-section .side-panel.right { right: 15px; }

.world-section .side-panel::before,
.event-section .side-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, 
        transparent, 
        rgba(212, 168, 85, 0.6) 20%, 
        rgba(212, 168, 85, 0.6) 80%, 
        transparent
    );
    box-shadow: 0 0 10px rgba(212, 168, 85, 0.3);
}

.world-section .side-panel::after,
.event-section .side-panel::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    border: 2px solid rgba(212, 168, 85, 0.8);
    background: var(--primary-dark);
    box-shadow: 0 0 12px rgba(212, 168, 85, 0.5);
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
    z-index: 30;
}

.section-title {
    font-family: 'Iceberg', 'Michroma', sans-serif;
    font-size: 5rem;
    font-weight: 400;
    letter-spacing: 24px;
    color: var(--text-primary);
    margin-bottom: 20px;
}

/* 中文版标题字体加大 */
html:lang(zh) .section-title {
    font-family: 'Michroma', sans-serif; /* 中文版保持原有字体 */
    font-size: 4rem;
    font-weight: 700;
    letter-spacing: 32px;
    line-height: 0.8;
    transform: scaleY(0.85);
}

/* 中文版显示PARALLVERSE时使用Iceberg字体 */
html:lang(zh) .decode-title:not(.chinese-transformed) {
    font-family: 'Iceberg', 'Michroma', sans-serif !important;
}

/* 中文版转换为"平行世界"后使用Michroma字体 */
html:lang(zh) .decode-title.chinese-transformed {
    font-family: 'Michroma', sans-serif !important;
    font-size: 4rem;
    font-weight: 700;
    letter-spacing: 32px;
    line-height: 0.8;
    transform: scaleY(0.85);
}

/* Decode Title Effect */
.decode-title {
    font-family: 'Iceberg', 'Michroma', sans-serif;
    display: inline-block;
    position: relative;
    perspective: 1000px;
}

.decode-char {
    display: inline-block;
    position: relative;
    transition: all 0.1s ease;
    min-width: 0.65em;
    text-align: center;
    transform-style: preserve-3d;
}

/* 等待扫描状态 - 乱码显示 */
.decode-char.scrambled {
    color: rgba(139, 148, 158, 0.5);
    text-shadow: 0 0 5px rgba(139, 148, 158, 0.3);
    animation: scrambleFlicker 0.15s steps(1) infinite;
}

@keyframes scrambleFlicker {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 0.8; }
}

/* 扫描中状态 - 字符快速随机变化 */
.decode-char.scanning {
    animation: charGlitchScan 0.06s steps(1) infinite;
    color: var(--accent-amber);
    text-shadow: 
        0 0 15px var(--accent-amber),
        0 0 30px var(--accent-copper),
        0 0 50px rgba(212, 168, 85, 0.6),
        -2px 0 0 rgba(255, 100, 100, 0.5),
        2px 0 0 rgba(100, 255, 255, 0.5);
}

/* 解码完成状态 - 字符翻转显示 */
.decode-char.decoded {
    animation: charReveal 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* 扫描时的字符抖动动画 */
@keyframes charGlitchScan {
    0% { 
        transform: translateY(-3px) rotateY(15deg) skewX(3deg);
        opacity: 0.9;
        filter: brightness(1.2);
    }
    20% { 
        transform: translateY(2px) rotateY(-10deg) skewX(-2deg);
        opacity: 1;
        filter: brightness(1.5);
    }
    40% { 
        transform: translateY(-1px) rotateY(8deg) skewX(5deg);
        opacity: 0.85;
        filter: brightness(1.1);
    }
    60% { 
        transform: translateY(3px) rotateY(-15deg) skewX(-4deg);
        opacity: 1;
        filter: brightness(1.4);
    }
    80% { 
        transform: translateY(-2px) rotateY(5deg) skewX(2deg);
        opacity: 0.9;
        filter: brightness(1.3);
    }
    100% { 
        transform: translateY(1px) rotateY(-8deg) skewX(-3deg);
        opacity: 0.95;
        filter: brightness(1.2);
    }
}

/* 字符解码翻转动画 - 增强版 */
@keyframes charReveal {
    0% {
        transform: rotateX(90deg) rotateY(30deg) translateY(-15px) scale(0.5);
        opacity: 0;
        color: #00ffff;
        text-shadow: 
            0 0 30px #00ffff,
            0 0 60px var(--accent-amber);
        filter: blur(3px);
    }
    30% {
        transform: rotateX(-30deg) rotateY(-15deg) translateY(8px) scale(1.2);
        opacity: 1;
        color: var(--accent-amber);
        text-shadow: 
            0 0 25px var(--accent-amber),
            0 0 50px var(--accent-copper);
        filter: blur(0);
    }
    60% {
        transform: rotateX(15deg) rotateY(5deg) translateY(-3px) scale(1.05);
        color: #ffffff;
        text-shadow: 
            0 0 20px var(--accent-amber),
            0 0 40px var(--accent-copper);
    }
    100% {
        transform: rotateX(0) rotateY(0) translateY(0) scale(1);
        opacity: 1;
        color: var(--text-primary);
        text-shadow: 0 0 20px rgba(212, 168, 85, 0.4);
        filter: blur(0);
    }
}

/* 扫描线经过时的高亮效果 */
.decode-title.scan-active::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    background: radial-gradient(
        ellipse at center,
        rgba(212, 168, 85, 0.2) 0%,
        rgba(212, 168, 85, 0.1) 30%,
        transparent 70%
    );
    animation: scanHighlight 1s ease-out;
    pointer-events: none;
    z-index: -1;
}

@keyframes scanHighlight {
    0% { opacity: 0; transform: scale(0.8); }
    30% { opacity: 1; }
    100% { opacity: 0; transform: scale(1.3); }
}

/* 完成解码后的辉光效果 */
.decode-title.decode-complete {
    animation: titleGlow 2.5s ease-out;
}

.decode-title.decode-complete .decode-char {
    animation: charShine 2.5s ease-out;
}

/* PARALLVERSE转换为平行世界的特效 */
.decode-char.transforming {
    display: inline-block;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.decode-char.transforming.decoded {
    animation: chineseReveal 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes chineseReveal {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(10px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes titleGlow {
    0% {
        filter: brightness(1.5) drop-shadow(0 0 30px var(--accent-amber));
    }
    30% {
        filter: brightness(1.3) drop-shadow(0 0 50px var(--accent-copper));
    }
    100% {
        filter: brightness(1) drop-shadow(0 0 0 transparent);
    }
}

@keyframes charShine {
    0% {
        text-shadow: 
            0 0 40px var(--accent-amber),
            0 0 80px var(--accent-copper),
            0 0 120px rgba(212, 168, 85, 0.5);
    }
    50% {
        text-shadow: 
            0 0 25px var(--accent-amber),
            0 0 50px var(--accent-copper);
    }
    100% {
        text-shadow: 0 0 20px rgba(212, 168, 85, 0.3);
    }
}

.section-line {
    width: 80px;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-copper), var(--accent-amber));
    margin: 0 auto;
}

.world-slider {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 150;
}

/* 图片区域科技外框 */
.world-slider-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: visible;
    border: 2px solid rgba(212, 168, 85, 0.5);
    background: linear-gradient(135deg, rgba(13, 17, 23, 0.9) 0%, rgba(8, 10, 14, 0.95) 100%);
    padding: 0.5em;
    box-shadow: 
        0 0 30px rgba(212, 168, 85, 0.15),
        inset 0 0 60px rgba(0, 0, 0, 0.5);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    box-sizing: border-box;
}

/* 外框四角装饰 */
.world-slider-container::before,
.world-slider-container::after {
    content: '';
    position: absolute;
    width: 2.5em;
    height: 2.5em;
    border: 2px solid var(--accent-amber);
    z-index: 10;
    pointer-events: none;
}

.world-slider-container::before {
    top: -2px;
    left: -2px;
    border-right: none;
    border-bottom: none;
    box-shadow: -0.1875em -0.1875em 0.625em rgba(212, 168, 85, 0.4);
}

.world-slider-container::after {
    bottom: -2px;
    right: -2px;
    border-left: none;
    border-top: none;
    box-shadow: 0.1875em 0.1875em 0.625em rgba(212, 168, 85, 0.4);
}

/* 外框内部装饰线 */
.world-slider-frame {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 5;
}

.world-slider-frame::before {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    width: 2.5em;
    height: 2.5em;
    border: 2px solid var(--accent-amber);
    border-left: none;
    border-bottom: none;
    box-shadow: 0.1875em -0.1875em 0.625em rgba(212, 168, 85, 0.4);
}

.world-slider-frame::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: -2px;
    width: 2.5em;
    height: 2.5em;
    border: 2px solid var(--accent-amber);
    border-right: none;
    border-top: none;
    box-shadow: -0.1875em 0.1875em 0.625em rgba(212, 168, 85, 0.4);
}

/* 扫描线经过外框时的高亮效果 */
.world-slider-container.scan-highlight {
    border-color: var(--accent-amber);
    box-shadow: 
        0 0 50px rgba(212, 168, 85, 0.3),
        0 0 100px rgba(212, 168, 85, 0.15),
        inset 0 0 60px rgba(0, 0, 0, 0.5);
}

.world-slider-container.scan-highlight::before,
.world-slider-container.scan-highlight::after {
    box-shadow: 0 0 15px rgba(212, 168, 85, 0.8);
}

/* 外框顶部数据条 */
.frame-data-top {
    position: absolute;
    top: -25px;
    left: 50px;
    right: 50px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'Exo 2', monospace;
    font-size: 0.65rem;
    color: rgba(212, 168, 85, 0.7);
    letter-spacing: 2px;
    z-index: 10;
}

.frame-data-top::before {
    content: '[ PARALLVERSE.SYS ]';
}

.frame-data-top::after {
    content: 'SCANNING...';
    animation: dataFlicker 1s steps(2) infinite;
}

@keyframes dataFlicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* 外框底部数据条 */
.frame-data-bottom {
    position: absolute;
    bottom: -25px;
    left: 50px;
    right: 50px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'Exo 2', monospace;
    font-size: 0.65rem;
    color: rgba(212, 168, 85, 0.7);
    letter-spacing: 2px;
    z-index: 10;
}

.frame-data-bottom::before {
    content: 'RES: 1920x1080';
}

.frame-data-bottom::after {
    content: 'STATUS: ACTIVE';
}

.world-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    clip-path: polygon(0 0, calc(100% - 1.875em) 0, 100% 1.875em, 100% 100%, 1.875em 100%, 0 calc(100% - 1.875em));
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0.6s ease, transform 0.6s ease;
    transform: scale(1.02);
}

.world-card.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.world-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.world-card.active:hover img { transform: scale(1.05); }

.world-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(0deg, rgba(8, 10, 14, 0.95) 0%, transparent 50%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 3.125em;
}

.world-card-title {
    font-family: 'Michroma', sans-serif;
    font-size: 1.5em;
    font-weight: 400;
    letter-spacing: 0.25em;
    margin-bottom: 0.75em;
    color: var(--text-primary);
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.5s ease 0.2s;
}

.world-card.active .world-card-title {
    transform: translateY(0);
    opacity: 1;
}

.world-card-desc {
    color: var(--text-secondary);
    font-size: 0.95em;
    max-width: 31.25em;
    line-height: 1.7;
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.5s ease 0.3s;
}

.world-card.active .world-card-desc {
    transform: translateY(0);
    opacity: 1;
}

/* Slider Navigation Arrows - Minimal Style with Glow */
.world-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    background: transparent;
    border: none;
    color: var(--accent-amber);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
    z-index: 10;
}

.world-slider-arrow.prev {
    left: -80px;
}

.world-slider-arrow.next {
    right: -80px;
}

.world-slider-arrow svg {
    width: 36px;
    height: 36px;
    fill: currentColor;
    filter: drop-shadow(0 0 8px rgba(212, 168, 85, 0.5));
    transition: all 0.4s ease;
}

.world-slider-arrow:hover {
    color: #f0c866;
}

.world-slider-arrow:hover svg {
    filter: drop-shadow(0 0 15px rgba(212, 168, 85, 0.8)) 
            drop-shadow(0 0 30px rgba(212, 168, 85, 0.5))
            drop-shadow(0 0 45px rgba(212, 168, 85, 0.3));
}

.world-slider-arrow.prev:hover svg {
    transform: translateX(-5px) scale(1.1);
}

.world-slider-arrow.next:hover svg {
    transform: translateX(5px) scale(1.1);
}

.world-slider-arrow:active svg {
    transform: scale(0.95);
}

.world-indicators {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 30px;
}

.world-indicators span {
    width: 50px;
    height: 3px;
    background: var(--accent-steel);
    cursor: pointer;
    transition: all 0.3s ease;
}

.world-indicators span:hover {
    background: var(--accent-brass);
}

.world-indicators span.active {
    background: linear-gradient(90deg, var(--accent-copper), var(--accent-amber));
    width: 70px;
}

/* Responsive for slider arrows */
@media (max-width: 1400px) {
    .world-slider-arrow.prev {
        left: -60px;
    }
    
    .world-slider-arrow.next {
        right: -60px;
    }
}

@media (max-width: 1280px) {
    .world-slider-arrow.prev {
        left: -50px;
    }
    
    .world-slider-arrow.next {
        right: -50px;
    }
    
    .world-slider-arrow svg {
        width: 30px;
        height: 30px;
    }
}

/* Event Section */
.event-section {
    padding: 100px 40px 30px 40px;
    background: var(--secondary-dark);
    position: relative;
    overflow: hidden;
}

/* Tech Background Pattern for Event Section */
.event-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        /* Diagonal tech lines */
        repeating-linear-gradient(45deg, transparent, transparent 100px, rgba(212, 168, 85, 0.06) 100px, rgba(212, 168, 85, 0.06) 102px),
        repeating-linear-gradient(-45deg, transparent, transparent 100px, rgba(212, 168, 85, 0.06) 100px, rgba(212, 168, 85, 0.06) 102px);
    background-size: 200px 200px, 200px 200px;
    pointer-events: none;
}

/* Top border line */
.event-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-copper), transparent);
}

.event-container {
    max-width: 1300px;
    margin: 0 auto;
}

/* Vertical Event Container */
.event-container-vertical {
    max-width: 1700px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
    position: relative;
    z-index: 50;
}

/* Event Main Header */
.event-main-header {
    text-align: center;
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

/* Tech Style Rules Button - 科技风格按钮 */
.btn-rules-tech {
    position: relative;
    background: linear-gradient(135deg, rgba(13, 17, 23, 0.9) 0%, rgba(8, 10, 14, 0.95) 100%);
    border: 2px solid rgba(212, 168, 85, 0.5);
    color: var(--accent-amber);
    padding: 14px 30px;
    font-family: 'Exo 2', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    box-shadow: 
        0 0 20px rgba(212, 168, 85, 0.15),
        inset 0 0 30px rgba(0, 0, 0, 0.3);
}

.btn-rules-tech:hover {
    border-color: var(--accent-amber);
    color: #fff;
    box-shadow: 
        0 0 30px rgba(212, 168, 85, 0.3),
        0 0 60px rgba(212, 168, 85, 0.15),
        inset 0 0 30px rgba(212, 168, 85, 0.1);
    transform: translateY(-2px);
}

.btn-rules-tech svg {
    fill: currentColor;
}

/* 按钮四角装饰 */
.btn-rules-tech .btn-corner {
    position: absolute;
    width: 8px;
    height: 8px;
    border: 2px solid var(--accent-amber);
    pointer-events: none;
    transition: all 0.3s ease;
}

.btn-rules-tech .btn-corner.tl {
    top: -2px;
    left: -2px;
    border-right: none;
    border-bottom: none;
}

.btn-rules-tech .btn-corner.tr {
    top: -2px;
    right: -2px;
    border-left: none;
    border-bottom: none;
}

.btn-rules-tech .btn-corner.bl {
    bottom: -2px;
    left: -2px;
    border-right: none;
    border-top: none;
}

.btn-rules-tech .btn-corner.br {
    bottom: -2px;
    right: -2px;
    border-left: none;
    border-top: none;
}

.btn-rules-tech:hover .btn-corner {
    width: 12px;
    height: 12px;
    box-shadow: 0 0 8px rgba(212, 168, 85, 0.6);
}

.event-main-title {
    font-family: 'Iceberg', 'Michroma', sans-serif;
    font-size: 5rem;
    font-weight: 400;
    letter-spacing: 12px;
    color: var(--text-primary);
    margin-bottom: 12px;
    text-shadow: 0 0 30px rgba(184, 115, 74, 0.3);
    display: inline-block;
}

/* 中文版保持原有样式 */
html:lang(zh) .event-main-title {
    font-family: 'Michroma', sans-serif;
    font-size: 4rem;
    font-weight: 700;
    letter-spacing: 12px;
    line-height: 0.8;
    transform: scaleY(0.85);
}

.event-title-line1,
.event-title-line2 {
    display: inline;
}

/* PRISM 特殊效果 - 琥珀金色风格 */
.prism-highlight {
    background: linear-gradient(90deg, 
        var(--accent-copper), 
        var(--accent-amber), 
        #f0c866, 
        var(--accent-amber), 
        var(--accent-copper)
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: prismShine 3s linear infinite;
    filter: drop-shadow(0 0 10px rgba(212, 168, 85, 0.6)) drop-shadow(0 0 20px rgba(184, 115, 74, 0.4));
}

@keyframes prismShine {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

/* 中文版隐藏PRISM，显示棱镜 */
/* 固定为中文版，只显示prism-zh */
.prism-en {
    display: none !important;
}

.prism-zh {
    display: inline !important;
}


.btn-rules-main {
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    padding: 10px 24px;
    font-family: 'Exo 2', sans-serif;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-rules-main:hover {
    border-color: var(--accent-copper);
    color: var(--accent-copper);
}


/* Section Block Header */
.section-block-header {
    text-align: center;
    margin-bottom: 25px;
}

.section-block-title {
    font-family: 'Michroma', sans-serif;
    font-size: 1.4rem;
    letter-spacing: 3px;
    color: var(--text-primary);
    margin-bottom: 8px;
    text-shadow: 0 0 20px rgba(184, 115, 74, 0.2);
    white-space: nowrap;
}

.event-squad-section .section-block-title {
    font-size: 1.88rem;
    letter-spacing: 6px;
    text-shadow: 0 0 20px rgba(184, 115, 74, 0.2);
}

.section-block-desc {
    font-size: 1.05rem;
    color: var(--text-muted);
}

.event-squad-section .section-block-desc {
    font-size: 0.95rem;
    color: #d4d4d4;
    text-shadow: 
        0 0 15px rgba(184, 115, 74, 0.6),
        0 0 30px rgba(184, 115, 74, 0.3);
    opacity: 1;
    white-space: nowrap;
}

/* Event Section Frames - 科技外框样式 */
.event-squad-section {
    position: relative;
    background: linear-gradient(135deg, rgba(13, 17, 23, 0.9) 0%, rgba(8, 10, 14, 0.95) 100%);
    border: 2px solid rgba(212, 168, 85, 0.5);
    padding: 15px 30px;
    box-shadow: 
        0 0 30px rgba(212, 168, 85, 0.15),
        inset 0 0 60px rgba(0, 0, 0, 0.5);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    z-index: 50;
    max-width: 1240px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 等比缩小内部所有元素 - 作为整体居中 */
.event-squad-section .section-block-header {
    transform: scale(0.85);
    transform-origin: center center;
    margin: 0 0 -30px 0;
    text-align: center;
}

.event-squad-section .squad-members-row {
    transform: scale(0.75);
    transform-origin: center center;
    margin-bottom: 0;
    margin-top: -40px;
}

.event-squad-section .squad-notice {
    margin-top: 0;
    color: #ffffff;
    line-height: 1.5;
    margin: 0;
    letter-spacing: 0.5px;
    white-space: nowrap;
    text-shadow: none;
}

/* 里程碑和抽奖左右分栏容器 */
.milestone-lottery-container {
    display: flex;
    gap: 15px;
    max-width: 1240px;
    width: 100%;
    margin: 0 auto;
    padding: 30px 0 0 0;
    position: relative;
    z-index: 50;
    box-sizing: border-box;
}

/* 左侧：里程碑区 */
.milestone-column {
    flex: 0 0 calc(45% - 7.5px);
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0; /* 防止flex子元素溢出 */
    background: linear-gradient(135deg, rgba(13, 17, 23, 0.9) 0%, rgba(8, 10, 14, 0.95) 100%);
    border: 2px solid rgba(212, 168, 85, 0.5);
    padding: 5px 30px;
    box-shadow: 
        0 0 30px rgba(212, 168, 85, 0.15),
        inset 0 0 60px rgba(0, 0, 0, 0.5);
}

.milestone-column::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    width: 30px;
    height: 30px;
    border: 2px solid var(--accent-amber);
    border-right: none;
    border-bottom: none;
    pointer-events: none;
    box-shadow: -3px -3px 10px rgba(212, 168, 85, 0.4);
}

.milestone-column::after {
    content: '';
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 30px;
    height: 30px;
    border: 2px solid var(--accent-amber);
    border-left: none;
    border-top: none;
    pointer-events: none;
    box-shadow: 3px 3px 10px rgba(212, 168, 85, 0.4);
}

.milestone-column .frame-corner {
    position: absolute;
    width: 30px;
    height: 30px;
    border: 2px solid var(--accent-amber);
    pointer-events: none;
    z-index: 10;
}

.milestone-column .frame-corner.top-right {
    top: -2px;
    right: -2px;
    border-left: none;
    border-bottom: none;
    box-shadow: 2px -2px 8px rgba(212, 168, 85, 0.3);
}

.milestone-column .frame-corner.bottom-left {
    bottom: -2px;
    left: -2px;
    border-right: none;
    border-top: none;
    box-shadow: -2px 2px 8px rgba(212, 168, 85, 0.3);
}

/* 右侧：抽奖区 */
.lottery-column {
    flex: 0 0 calc(55% - 7.5px);
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0; /* 防止flex子元素溢出 */
    background: linear-gradient(135deg, rgba(13, 17, 23, 0.9) 0%, rgba(8, 10, 14, 0.95) 100%);
    border: 2px solid rgba(212, 168, 85, 0.5);
    padding: 5px 30px;
    box-shadow: 
        0 0 30px rgba(212, 168, 85, 0.15),
        inset 0 0 60px rgba(0, 0, 0, 0.5);
}

.lottery-column::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    width: 30px;
    height: 30px;
    border: 2px solid var(--accent-amber);
    border-right: none;
    border-bottom: none;
    pointer-events: none;
    box-shadow: -3px -3px 10px rgba(212, 168, 85, 0.4);
}

.lottery-column::after {
    content: '';
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 30px;
    height: 30px;
    border: 2px solid var(--accent-amber);
    border-left: none;
    border-top: none;
    pointer-events: none;
    box-shadow: 3px 3px 10px rgba(212, 168, 85, 0.4);
}

.lottery-column .frame-corner {
    position: absolute;
    width: 30px;
    height: 30px;
    border: 2px solid var(--accent-amber);
    pointer-events: none;
    z-index: 10;
}

.lottery-column .frame-corner.top-right {
    top: -2px;
    right: -2px;
    border-left: none;
    border-bottom: none;
    box-shadow: 2px -2px 8px rgba(212, 168, 85, 0.3);
}

.lottery-column .frame-corner.bottom-left {
    bottom: -2px;
    left: -2px;
    border-right: none;
    border-top: none;
    box-shadow: -2px 2px 8px rgba(212, 168, 85, 0.3);
}

.event-milestone-section {
    position: relative;
    background: linear-gradient(135deg, rgba(13, 17, 23, 0.9) 0%, rgba(8, 10, 14, 0.95) 100%);
    border: 2px solid rgba(212, 168, 85, 0.5);
    padding: 15px 30px;
    box-shadow: 
        0 0 30px rgba(212, 168, 85, 0.15),
        inset 0 0 60px rgba(0, 0, 0, 0.5);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    z-index: 50;
    max-width: 1240px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.event-giftpack-section,
.event-lottery-section {
    position: relative;
    background: linear-gradient(135deg, rgba(13, 17, 23, 0.9) 0%, rgba(8, 10, 14, 0.95) 100%);
    border: 2px solid rgba(212, 168, 85, 0.5);
    padding: 30px;
    box-shadow: 
        0 0 30px rgba(212, 168, 85, 0.15),
        inset 0 0 60px rgba(0, 0, 0, 0.5);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    z-index: 50;
}

/* 左右分栏内的标题样式 */
.milestone-column .section-block-header,
.lottery-column .section-block-header {
    text-align: center;
    margin-bottom: 10px;
    margin-top: 10px;
}

.milestone-column .section-block-title,
.lottery-column .section-block-title {
    font-family: 'Michroma', sans-serif;
    font-size: 1.4rem;
    letter-spacing: 3px;
    color: var(--text-primary);
    margin-bottom: 8px;
    white-space: nowrap;
    text-shadow: 0 0 20px rgba(184, 115, 74, 0.2);
}

/* 外框四角装饰 */
.event-squad-section::before,
.event-squad-section::after,
.event-milestone-section::before,
.event-milestone-section::after,
.event-giftpack-section::before,
.event-giftpack-section::after,
.event-lottery-section::before,
.event-lottery-section::after {
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    border: 2px solid var(--accent-amber);
    z-index: 10;
    pointer-events: none;
}

.event-squad-section::before,
.event-milestone-section::before,
.event-giftpack-section::before,
.event-lottery-section::before {
    top: -2px;
    left: -2px;
    border-right: none;
    border-bottom: none;
    box-shadow: -3px -3px 10px rgba(212, 168, 85, 0.4);
}

.event-squad-section::after,
.event-milestone-section::after,
.event-giftpack-section::after,
.event-lottery-section::after {
    bottom: -2px;
    right: -2px;
    border-left: none;
    border-top: none;
    box-shadow: 3px 3px 10px rgba(212, 168, 85, 0.4);
}

/* 框体内部角落装饰 */
.frame-corner {
    position: absolute;
    width: 30px;
    height: 30px;
    border: 2px solid var(--accent-amber);
    z-index: 10;
    pointer-events: none;
}

.frame-corner.top-right {
    top: -2px;
    right: -2px;
    border-left: none;
    border-bottom: none;
    box-shadow: 3px -3px 10px rgba(212, 168, 85, 0.4);
}

.frame-corner.bottom-left {
    bottom: -2px;
    left: -2px;
    border-right: none;
    border-top: none;
    box-shadow: -3px 3px 10px rgba(212, 168, 85, 0.4);
}

/* Squad Members Row - Horizontal with Rectangle Cards */
.squad-members-row {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 25px;
    flex-wrap: nowrap;
}

/* Squad Member Card - Rectangle Style */
.squad-member-card {
    background: linear-gradient(180deg, rgba(40, 30, 30, 0.8) 0%, rgba(20, 15, 15, 0.9) 100%);
    border: 1px solid var(--border-subtle);
    padding: 20px;
    width: 300px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
}

.squad-member-card:hover {
    border-color: var(--accent-copper);
    transform: translateY(-3px);
}

.squad-member-card.leader {
    border-color: var(--accent-copper);
    box-shadow: 0 0 20px rgba(184, 115, 74, 0.2);
}

/* Login Button Card - 登录按钮样式 */
.squad-member-card.login-button-card {
    cursor: pointer;
    border-color: var(--accent-amber);
    box-shadow: 0 0 25px rgba(212, 168, 85, 0.3);
}

.squad-member-card.login-button-card:hover {
    border-color: #ffd93d;
    box-shadow: 0 0 35px rgba(255, 217, 61, 0.5);
    transform: translateY(-5px) scale(1.02);
}

.login-avatar-box {
    position: relative;
    cursor: pointer;
}

.login-center-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Michroma', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: rgba(212, 168, 85, 0.8);
    letter-spacing: 2px;
    text-align: center;
    z-index: 1;
    text-shadow: 
        0 0 10px rgba(212, 168, 85, 0.5),
        0 0 20px rgba(212, 168, 85, 0.3);
    transition: opacity 0.3s ease;
    pointer-events: none;
    white-space: nowrap;
    width: 100%;
}

/* 登录后隐藏文字，显示头像 */
.squad-member-card.login-button-card.has-member .login-center-text {
    display: none;
}

.squad-member-card.login-button-card.has-member .member-avatar-img {
    display: block !important;
}

.squad-member-card.login-button-card.has-member .login-hover-text {
    display: none;
}

.login-hover-text {
    position: relative;
    display: block;
    font-family: 'Michroma', sans-serif;
    font-size: 0.95rem;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    opacity: 0;
    transition: all 0.3s ease;
    text-align: center;
    margin-top: 0;
    pointer-events: none;
    font-weight: 500;
}

.squad-member-card.login-button-card:hover .login-hover-text {
    opacity: 1;
    color: #ffc107;
    text-shadow: 
        0 0 15px rgba(255, 193, 7, 0.8),
        0 0 30px rgba(212, 168, 85, 0.6),
        0 0 45px rgba(255, 193, 7, 0.4);
    letter-spacing: 2.5px;
}

.squad-member-card.login-button-card:hover .member-avatar-fallback {
    opacity: 0.3;
    transform: scale(0.9);
}

.squad-member-card.login-button-card:hover .member-avatar-box {
    background: linear-gradient(180deg, rgba(80, 60, 40, 0.8) 0%, rgba(50, 35, 20, 0.9) 100%);
    border-color: var(--accent-amber);
    box-shadow: inset 0 0 30px rgba(212, 168, 85, 0.2);
}


.squad-member-card.empty {
    border-style: dashed;
    opacity: 0.7;
}

.squad-member-card.empty:hover {
    opacity: 1;
}

/* Invite Button Card - 复制邀请链接按钮样式 */
.squad-member-card.invite-button-card {
    cursor: pointer;
    transition: all 0.3s ease;
}

.squad-member-card.invite-button-card:hover {
    border-color: var(--accent-teal);
    box-shadow: 0 0 25px rgba(26, 92, 92, 0.4);
    transform: translateY(-3px);
}

/* 有队员时不显示复制链接功能 */
.squad-member-card:not(.empty) .invite-hover-text {
    display: none;
}

.squad-member-card:not(.empty).invite-button-card {
    cursor: default;
}

.squad-member-card:not(.empty).invite-button-card:hover {
    border-color: var(--border-subtle);
    box-shadow: none;
    transform: none;
}

.invite-avatar-box {
    position: relative;
}

.invite-hover-text {
    position: relative;
    display: block;
    font-family: 'Michroma', sans-serif;
    font-size: 0.95rem;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    opacity: 0;
    transition: all 0.3s ease;
    text-align: center;
    margin-top: 0;
    pointer-events: none;
    font-weight: 500;
}

.squad-member-card.invite-button-card:hover .invite-hover-text {
    opacity: 1;
    color: #4dd0e1;
    text-shadow: 
        0 0 15px rgba(77, 208, 225, 0.8),
        0 0 30px rgba(26, 92, 92, 0.6),
        0 0 45px rgba(77, 208, 225, 0.4);
    letter-spacing: 1.5px;
}

.squad-member-card.invite-button-card:hover .member-avatar-fallback {
    opacity: 0.3;
    transform: scale(0.9);
}

.squad-member-card.invite-button-card:hover .member-avatar-box {
    background: linear-gradient(180deg, rgba(20, 50, 50, 0.8) 0%, rgba(10, 30, 30, 0.9) 100%);
    border-color: var(--accent-teal);
    box-shadow: inset 0 0 30px rgba(26, 92, 92, 0.2);
}


/* 有队员时的样式 - 只显示形象 */
.squad-member-card.has-member {
    cursor: default;
}

.squad-member-card.has-member.invite-button-card {
    pointer-events: none;
}

.squad-member-card.has-member:hover {
    border-color: var(--border-subtle);
    box-shadow: 0 0 20px rgba(184, 115, 74, 0.1);
    transform: translateY(-2px);
}

.squad-member-card.has-member .invite-hover-text {
    display: none !important;
}

.squad-member-card.has-member .member-avatar-box {
    background: linear-gradient(180deg, rgba(60, 50, 50, 0.6) 0%, rgba(30, 25, 25, 0.8) 100%);
    border-color: rgba(184, 115, 74, 0.3);
}

.squad-member-card.has-member .member-avatar-fallback {
    display: none;
}

.squad-member-card.has-member .member-avatar-img {
    display: block;
}

.squad-member-card.has-member .member-label {
    color: var(--text-secondary);
}

/* Member Avatar Box - Rectangle */
.member-avatar-box {
    width: 260px;
    height: 320px;
    margin: 0 auto 15px;
    background: linear-gradient(180deg, rgba(60, 50, 50, 0.6) 0%, rgba(30, 25, 25, 0.8) 100%);
    border: 1px solid rgba(184, 115, 74, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.squad-member-card.leader .member-avatar-box {
    border-color: var(--accent-copper);
}

.squad-member-card.empty .member-avatar-box {
    border-style: dashed;
    border-color: rgba(184, 115, 74, 0.2);
}

.member-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}

.member-avatar-img[src]:not([src=""]) {
    display: block;
}

.member-avatar-img[src]:not([src=""]) + .member-avatar-fallback {
    display: none;
}

.member-avatar-fallback {
    font-size: 5rem;
    opacity: 0.5;
}

.squad-member-card.leader .member-avatar-fallback {
    font-size: 5.5rem;
    opacity: 0.7;
}

.squad-member-card .leader-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 22px;
    height: 22px;
    background: linear-gradient(135deg, var(--accent-copper), var(--accent-amber));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: var(--primary-dark);
    z-index: 2;
}

/* 登录按钮不显示徽章 */
.squad-member-card.login-button-card .leader-badge {
    display: none;
}

.member-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    letter-spacing: 0.5px;
}

.squad-member-card.leader .member-label {
    color: var(--accent-copper);
}

/* Squad Actions - 已隐藏，登录功能移至第一个角色框 */
.squad-actions {
    display: none;
}

.squad-actions .btn-login-team,
.squad-actions .btn-invite-team {
    min-width: 180px;
}

/* Squad Notice */
.squad-notice {
    text-align: center;
    font-size: 0.95rem;
    color: #ffffff;
    line-height: 1.5;
    margin: 0;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* Milestone Section - 使用通用样式 */

/* Gift Pack Section - 使用通用样式 */

/* Lottery Section - 使用通用样式 */

/* Event Content Wrapper */
.event-content-wrapper {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 40px;
}

/* Team Section */
.event-team-section {
    background: linear-gradient(135deg, rgba(26, 92, 92, 0.1) 0%, rgba(13, 17, 23, 0.95) 100%);
    border: 1px solid var(--border-subtle);
    padding: 30px;
    clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
}

.team-section-header {
    text-align: center;
    margin-bottom: 25px;
}

.team-section-title {
    font-family: 'Michroma', sans-serif;
    font-size: 1rem;
    letter-spacing: 3px;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.team-section-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Team Circle Layout */
.team-circle-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 25px;
    padding: 20px 10px;
}

.team-member-circle {
    text-align: center;
}

.team-member-circle.leader {
    grid-column: 2;
    grid-row: 1;
}

.team-member-circle[data-slot="2"] { grid-column: 1; grid-row: 1; }
.team-member-circle[data-slot="3"] { grid-column: 3; grid-row: 1; }
.team-member-circle[data-slot="4"] { grid-column: 1; grid-row: 2; }
.team-member-circle[data-slot="5"] { grid-column: 3; grid-row: 2; }

.team-avatar-circle {
    width: 70px;
    height: 70px;
    margin: 0 auto 8px;
    border-radius: 50%;
    border: 2px solid var(--border-subtle);
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.3s ease;
}

.team-member-circle.leader .team-avatar-circle {
    width: 85px;
    height: 85px;
    border-color: var(--accent-copper);
    box-shadow: 0 0 25px rgba(184, 115, 74, 0.3);
}

.team-avatar-circle.empty {
    border-style: dashed;
    opacity: 0.6;
}

.team-avatar-circle .avatar-placeholder {
    font-size: 1.8rem;
    opacity: 0.6;
}

.team-member-circle.leader .avatar-placeholder {
    font-size: 2.2rem;
}

.leader-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 22px;
    height: 22px;
    background: linear-gradient(135deg, var(--accent-copper), var(--accent-amber));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: var(--primary-dark);
}

.member-status {
    font-size: 0.75rem;
    color: var(--text-muted);
    letter-spacing: 0.5px;
}

/* Team Actions */
.team-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.btn-login-team, .btn-invite-team {
    width: 100%;
    padding: 14px 20px;
    font-family: 'Exo 2', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    letter-spacing: 1px;
}

.btn-login-team {
    background: linear-gradient(135deg, var(--accent-copper) 0%, var(--accent-brass) 100%);
    border: none;
    color: var(--primary-dark);
}

.btn-login-team:hover {
    box-shadow: 0 5px 25px rgba(184, 115, 74, 0.4);
    transform: translateY(-2px);
}

.btn-invite-team {
    background: transparent;
    border: 1px solid var(--accent-teal);
    color: var(--accent-teal);
}

.btn-invite-team:hover:not(:disabled) {
    background: var(--accent-teal);
    color: var(--text-primary);
}

.btn-invite-team:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.team-notice {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: flex;
    align-items: flex-start;
    gap: 6px;
    line-height: 1.5;
}

.team-notice svg {
    flex-shrink: 0;
    margin-top: 2px;
}

/* Rewards Section */
.event-rewards-section {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.rewards-section-title {
    font-family: 'Michroma', sans-serif;
    font-size: 0.9rem;
    letter-spacing: 3px;
    color: var(--text-primary);
    margin-bottom: 20px;
}

/* Milestone Progress */
.milestone-progress-container {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-subtle);
    padding: 25px 30px;
}

.milestone-progress-bar {
    margin-bottom: 30px;
    padding: 0 20px;
    width: 100%;
    max-width: 100%;
    min-width: 600px;
    flex-shrink: 0;
}

.progress-track {
    position: relative;
    height: 4px;
    background: var(--accent-steel);
    border-radius: 2px;
    margin: 30px 0 50px;
    width: 100%;
    min-width: 500px;
    box-sizing: border-box;
    overflow: visible;
}

/* 连接线点亮效果 - 使用progress-fill来控制，这里只是确保样式正确 */
.progress-fill {
    z-index: 2;
}

.progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--accent-copper), var(--accent-amber));
    border-radius: 2px;
    transition: width 0.5s ease;
}

.milestone-node {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    cursor: pointer;
}

.node-circle {
    width: 80px;
    height: 80px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Michroma', sans-serif;
    font-size: 1.8rem;
    font-weight: 800;
    color: rgba(255, 215, 0, 0.9);
    text-shadow: 
        0 0 15px rgba(255, 215, 0, 0.9),
        0 0 30px rgba(212, 168, 85, 0.7),
        0 0 45px rgba(212, 168, 85, 0.4),
        0 0 60px rgba(212, 168, 85, 0.2);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
    perspective: 1000px;
}

/* 六边形节点设计 */
.node-circle {
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: 
        linear-gradient(135deg, rgba(10, 15, 25, 0.9) 0%, rgba(5, 8, 15, 0.95) 100%),
        linear-gradient(45deg, rgba(212, 168, 85, 0.15) 0%, transparent 50%);
    border: 3px solid rgba(212, 168, 85, 0.3);
    box-shadow: 
        0 0 25px rgba(212, 168, 85, 0.3),
        0 0 20px rgba(0, 0, 0, 0.8),
        inset 0 0 30px rgba(0, 0, 0, 0.5),
        inset 0 2px 6px rgba(255, 255, 255, 0.1),
        0 0 0 2px rgba(212, 168, 85, 0.15);
    position: relative;
    overflow: visible;
}

/* 六边形内部光效 */
.node-circle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    height: 70%;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: radial-gradient(circle, rgba(212, 168, 85, 0.3) 0%, rgba(212, 168, 85, 0.1) 50%, transparent 100%);
    opacity: 0.4;
    transition: opacity 0.5s ease;
}

/* 六边形外圈光晕 */
.node-circle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: conic-gradient(
        from 0deg,
        transparent,
        rgba(212, 168, 85, 0.2),
        transparent 30%,
        transparent 70%,
        rgba(212, 168, 85, 0.2),
        transparent
    );
    opacity: 0.3;
    z-index: -1;
    animation: hexRotate 4s linear infinite;
}


.milestone-node:hover .node-circle {
    transform: scale(1.1) rotate(5deg);
    border-color: rgba(212, 168, 85, 0.6);
    box-shadow: 
        0 0 35px rgba(212, 168, 85, 0.7),
        0 0 60px rgba(212, 168, 85, 0.4),
        0 0 25px rgba(0, 0, 0, 0.8),
        inset 0 0 30px rgba(0, 0, 0, 0.5),
        inset 0 2px 6px rgba(255, 255, 255, 0.15),
        0 0 0 2px rgba(212, 168, 85, 0.3);
}

.milestone-node:hover .node-circle::before {
    opacity: 0.8;
}

.milestone-node.achieved .node-circle {
    border-color: var(--accent-amber);
    border-width: 4px;
    color: #ffff00;
    text-shadow: 
        0 0 20px rgba(255, 255, 0, 1.2),
        0 0 40px rgba(255, 215, 0, 1),
        0 0 60px rgba(212, 168, 85, 0.9),
        0 0 80px rgba(212, 168, 85, 0.6),
        0 0 100px rgba(212, 168, 85, 0.4),
        0 0 120px rgba(212, 168, 85, 0.2);
    background: 
        linear-gradient(135deg, rgba(212, 168, 85, 0.4) 0%, rgba(184, 115, 74, 0.35) 100%),
        linear-gradient(45deg, rgba(212, 168, 85, 0.25) 0%, transparent 50%),
        linear-gradient(135deg, rgba(10, 15, 25, 0.9) 0%, rgba(5, 8, 15, 0.95) 100%);
    box-shadow: 
        0 0 50px rgba(212, 168, 85, 1.2),
        0 0 100px rgba(212, 168, 85, 0.8),
        0 0 150px rgba(212, 168, 85, 0.5),
        0 0 200px rgba(212, 168, 85, 0.2),
        inset 0 0 50px rgba(212, 168, 85, 0.5),
        inset 0 2px 10px rgba(255, 255, 255, 0.3),
        0 0 0 4px rgba(212, 168, 85, 0.5);
    animation: hexAchieved 2.5s ease-in-out infinite, numberGlow 2s ease-in-out infinite;
}

.milestone-node.achieved .node-circle::before {
    opacity: 1;
    background: radial-gradient(circle, rgba(212, 168, 85, 0.7) 0%, rgba(212, 168, 85, 0.4) 50%, rgba(212, 168, 85, 0.1) 100%);
    animation: hexInnerGlow 2s ease-in-out infinite;
}

.milestone-node.achieved .node-circle::after {
    opacity: 1;
    background: conic-gradient(
        from 0deg,
        rgba(212, 168, 85, 0.6),
        rgba(212, 168, 85, 1),
        rgba(184, 115, 74, 1),
        rgba(212, 168, 85, 0.6)
    );
    filter: blur(1px);
    box-shadow: 0 0 30px rgba(212, 168, 85, 0.8);
}

@keyframes hexRotate {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes hexAchieved {
    0%, 100% {
        box-shadow: 
            0 0 50px rgba(212, 168, 85, 1.2),
            0 0 100px rgba(212, 168, 85, 0.8),
            0 0 150px rgba(212, 168, 85, 0.5),
            0 0 200px rgba(212, 168, 85, 0.2),
            inset 0 0 50px rgba(212, 168, 85, 0.5),
            inset 0 2px 10px rgba(255, 255, 255, 0.3),
            0 0 0 4px rgba(212, 168, 85, 0.5);
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(3deg);
    }
    50% {
        box-shadow: 
            0 0 60px rgba(212, 168, 85, 1.5),
            0 0 120px rgba(212, 168, 85, 1),
            0 0 180px rgba(212, 168, 85, 0.7),
            0 0 240px rgba(212, 168, 85, 0.3),
            inset 0 0 60px rgba(212, 168, 85, 0.6),
            inset 0 2px 12px rgba(255, 255, 255, 0.4),
            0 0 0 5px rgba(212, 168, 85, 0.6);
        transform: rotate(0deg);
    }
    75% {
        transform: rotate(-3deg);
    }
}

/* 添加数字文字动画，让它在点亮时更亮 */
.milestone-node.achieved .node-circle {
    animation: hexAchieved 2.5s ease-in-out infinite, numberGlow 2s ease-in-out infinite;
}

@keyframes numberGlow {
    0%, 100% {
        color: #ffff00;
        text-shadow: 
            0 0 20px rgba(255, 255, 0, 1.2),
            0 0 40px rgba(255, 215, 0, 1),
            0 0 60px rgba(212, 168, 85, 0.9),
            0 0 80px rgba(212, 168, 85, 0.6),
            0 0 100px rgba(212, 168, 85, 0.4),
            0 0 120px rgba(212, 168, 85, 0.2);
    }
    50% {
        color: #ffffff;
        text-shadow: 
            0 0 25px rgba(255, 255, 255, 1.3),
            0 0 50px rgba(255, 255, 0, 1.2),
            0 0 75px rgba(255, 215, 0, 1),
            0 0 100px rgba(212, 168, 85, 0.9),
            0 0 125px rgba(212, 168, 85, 0.6),
            0 0 150px rgba(212, 168, 85, 0.4);
    }
}

@keyframes hexInnerGlow {
    0%, 100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1.2);
    }
}

.node-label {
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.9rem;
    font-weight: 700;
    color: rgba(212, 168, 85, 0.7);
    white-space: nowrap;
    text-shadow: 
        0 0 15px rgba(212, 168, 85, 0.7),
        0 0 30px rgba(212, 168, 85, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.6);
    transition: all 0.5s ease;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-family: 'Michroma', sans-serif;
}

.milestone-node.achieved .node-label {
    color: var(--accent-amber);
    text-shadow: 
        0 0 20px rgba(212, 168, 85, 1.2),
        0 0 40px rgba(212, 168, 85, 0.8),
        0 0 60px rgba(212, 168, 85, 0.5),
        0 0 80px rgba(212, 168, 85, 0.3),
        0 2px 4px rgba(0, 0, 0, 0.6);
    font-weight: 800;
    animation: labelGlow 2s ease-in-out infinite;
}

.node-draw-label {
    position: absolute;
    top: 90px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.9rem;
    font-weight: 700;
    color: rgba(212, 168, 85, 0.4);
    white-space: nowrap;
    text-shadow: 
        0 0 10px rgba(212, 168, 85, 0.3),
        0 2px 4px rgba(0, 0, 0, 0.6);
    transition: all 0.5s ease;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: 'Michroma', sans-serif;
}

.milestone-node.achieved .node-draw-label {
    color: var(--accent-amber);
    text-shadow: 
        0 0 20px rgba(212, 168, 85, 1.2),
        0 0 40px rgba(212, 168, 85, 0.8),
        0 0 60px rgba(212, 168, 85, 0.5),
        0 0 80px rgba(212, 168, 85, 0.3),
        0 2px 4px rgba(0, 0, 0, 0.6);
    font-weight: 800;
    animation: labelGlow 2s ease-in-out infinite;
}

@keyframes labelGlow {
    0%, 100% {
        text-shadow: 
            0 0 20px rgba(212, 168, 85, 1.2),
            0 0 40px rgba(212, 168, 85, 0.8),
            0 0 60px rgba(212, 168, 85, 0.5),
            0 0 80px rgba(212, 168, 85, 0.3),
            0 2px 4px rgba(0, 0, 0, 0.6);
    }
    50% {
        text-shadow: 
            0 0 25px rgba(212, 168, 85, 1.5),
            0 0 50px rgba(212, 168, 85, 1),
            0 0 75px rgba(212, 168, 85, 0.7),
            0 0 100px rgba(212, 168, 85, 0.4),
            0 2px 4px rgba(0, 0, 0, 0.6);
    }
}

/* Milestone Tooltip - 悬浮窗 */
.milestone-tooltip {
    position: absolute;
    bottom: calc(100% + 20px);
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    z-index: 100;
    pointer-events: none;
}

/* 所有节点的悬浮窗都在上方居中 */
.milestone-node .milestone-tooltip {
    left: 50%;
    transform: translateX(-50%);
}

.milestone-node:hover .milestone-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-5px);
}

/* 新的里程碑流程布局 */
.milestone-flow-container {
    position: relative;
    width: 100%;
    padding: 20px;
    padding-bottom: 50px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    background: 
        radial-gradient(circle at 20% 30%, rgba(212, 168, 85, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(184, 115, 74, 0.03) 0%, transparent 50%);
}

/* 里程碑项目 */
.milestone-item {
    position: relative;
    background: linear-gradient(135deg, rgba(13, 17, 23, 0.6) 0%, rgba(8, 10, 14, 0.8) 100%);
    border: 1px solid rgba(212, 168, 85, 0.3);
    border-radius: 8px;
    padding: 15px;
    transition: all 0.3s ease;
    overflow: hidden;
}

.milestone-item.achieved {
    border-color: rgba(212, 168, 85, 0.6);
    background: linear-gradient(135deg, rgba(13, 17, 23, 0.8) 0%, rgba(8, 10, 14, 0.9) 100%);
    box-shadow: 0 0 20px rgba(212, 168, 85, 0.2);
}

/* 里程碑头部 */
.milestone-header {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    position: relative;
    overflow: visible;
}

.milestone-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(212, 168, 85, 0.2) 0%, rgba(184, 115, 74, 0.3) 100%);
    border: 2px solid rgba(212, 168, 85, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Michroma', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--accent-amber);
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.milestone-item.achieved .milestone-number {
    background: linear-gradient(135deg, rgba(212, 168, 85, 0.4) 0%, rgba(184, 115, 74, 0.5) 100%);
    border-color: var(--accent-amber);
    box-shadow: 0 0 15px rgba(212, 168, 85, 0.5);
    color: var(--text-primary);
}

.milestone-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.milestone-title {
    font-family: 'Exo 2', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.milestone-rewards {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.milestone-reward {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    color: var(--text-secondary);
}

.milestone-reward.auto-reward {
    color: var(--accent-amber);
}

.milestone-reward.pack-reward {
    color: var(--accent-amber);
}

.milestone-item.achieved .milestone-reward {
    color: var(--text-primary);
}

.reward-icon {
    font-size: 1rem;
}

.reward-text {
    font-family: 'Exo 2', sans-serif;
    white-space: nowrap;
}

.milestone-status {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.status-icon {
    font-size: 1.5rem;
    color: rgba(212, 168, 85, 0.3);
    transition: all 0.3s ease;
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
}

.status-icon::before {
    content: "○";
    display: block;
}

.milestone-item.achieved .status-icon {
    color: var(--accent-amber);
    text-shadow: 0 0 10px rgba(212, 168, 85, 0.8);
}

.milestone-item.achieved .status-icon::before {
    content: "✓";
}

/* Pack 框体 */
.milestone-pack-box {
    margin-top: 0.75em;
    padding: 0.75em;
    padding-bottom: 1.4em;
    background: linear-gradient(135deg, rgba(13, 17, 23, 0.4) 0%, rgba(8, 10, 14, 0.6) 100%);
    border: 1px solid rgba(212, 168, 85, 0.2);
    border-radius: 0.375em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9em;
    overflow: hidden;
    min-width: 0;
    box-sizing: border-box;
    position: relative;
    aspect-ratio: 4 / 1;
    width: 100%;
}

.pack-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25em;
    min-width: 0;
    overflow: hidden;
}

/* 礼包框体中的文字样式 - 使用更具体的选择器确保优先级 */
.milestone-pack-box .pack-name {
    font-family: 'Michroma', sans-serif;
    font-size: 1em !important;
    font-weight: 600;
    color: var(--accent-amber);
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.milestone-pack-box .pack-content {
    font-family: 'Exo 2', sans-serif;
    font-size: 0.875em !important;
    color: var(--text-secondary);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
}

/* 通用样式（保留用于其他地方） */
.pack-name {
    font-family: 'Michroma', sans-serif;
    font-size: 3rem;
    font-weight: 600;
    color: var(--accent-amber);
    letter-spacing: 1px;
}

.pack-content {
    font-family: 'Exo 2', sans-serif;
    font-size: 2.8rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* 按钮样式适配新布局 - 与礼包框融为一体 */
.milestone-pack-box .btn-claim-pack {
    width: auto;
    min-width: 0;
    max-width: 100%;
    padding: 0.5em 0.75em;
    font-size: 0.875em;
    white-space: nowrap;
    flex-shrink: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    background: transparent !important;
    border: 1px solid rgba(212, 168, 85, 0.3) !important;
    border-radius: 0.25em;
    box-shadow: none !important;
    margin: 0;
    position: relative;
    color: var(--accent-amber) !important;
    opacity: 1 !important;
    filter: none !important;
    font-family: 'Exo 2', sans-serif;
    line-height: 1.4;
}

.milestone-pack-box .btn-claim-pack::before {
    display: none !important;
}

.milestone-pack-box .btn-claim-pack:hover:not(:disabled) {
    background: rgba(212, 168, 85, 0.1) !important;
    border-color: rgba(212, 168, 85, 0.5) !important;
    box-shadow: inset 0 0 10px rgba(212, 168, 85, 0.1) !important;
    transform: none !important;
    color: var(--accent-amber) !important;
    opacity: 1 !important;
    filter: none !important;
}

.milestone-pack-box .btn-claim-pack.go-invite {
    background: transparent !important;
    border-color: rgba(212, 168, 85, 0.3) !important;
    color: var(--accent-amber) !important;
    opacity: 1 !important;
    filter: none !important;
}

.milestone-pack-box .btn-claim-pack.go-invite:hover {
    background: rgba(212, 168, 85, 0.1) !important;
    border-color: rgba(212, 168, 85, 0.5) !important;
    color: var(--accent-amber) !important;
    opacity: 1 !important;
    filter: none !important;
}

.milestone-description {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0 20px;
    padding-bottom: 10px;
    text-align: center;
}

.milestone-description p {
    font-size: 0.95rem;
    color: #ffffff;
    line-height: 1.5;
    margin: 0;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.milestone-node-1 {
    position: absolute;
    top: 80px;
    left: 15%;
    transform: translate(-50%, -50%);
}

.milestone-node-3 {
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translate(-50%, -50%);
}

.milestone-node-5 {
    position: absolute;
    top: 80px;
    left: 85%;
    transform: translate(-50%, -50%);
}

/* Milestone Progress Line - 里程碑连接线 - 全新设计 */
.milestone-progress-line {
    position: absolute;
    top: 80px;
    left: calc(15% + 40px); /* 从节点1的右边缘开始（节点1中心15% + 六边形半径40px） */
    width: calc(70% - 80px); /* 到节点5的左边缘（总宽度70%减去两个六边形的半径80px） */
    height: 8px;
    transform: translateY(-50%);
    z-index: 0;
    pointer-events: none;
}

.progress-line-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: 
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 10px,
            rgba(212, 168, 85, 0.2) 10px,
            rgba(212, 168, 85, 0.2) 12px
        ),
        linear-gradient(90deg, 
            rgba(212, 168, 85, 0.08) 0%,
            rgba(212, 168, 85, 0.15) 50%,
            rgba(212, 168, 85, 0.08) 100%
        );
    border-radius: 4px;
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.6),
        inset 0 -2px 4px rgba(0, 0, 0, 0.4),
        0 0 15px rgba(212, 168, 85, 0.3),
        0 0 25px rgba(212, 168, 85, 0.15);
    overflow: hidden;
    position: relative;
}

.progress-line-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%,
        rgba(212, 168, 85, 0.25) 30%,
        rgba(212, 168, 85, 0.35) 50%,
        rgba(212, 168, 85, 0.25) 70%,
        transparent 100%
    );
    animation: bgPulse 4s ease-in-out infinite;
}

.progress-line-bg::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    transform: translateY(-50%);
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(212, 168, 85, 0.4) 20%,
        rgba(212, 168, 85, 0.6) 50%,
        rgba(212, 168, 85, 0.4) 80%,
        transparent 100%
    );
    animation: bgScan 3s linear infinite;
}

.progress-line-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: 
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 8px,
            rgba(255, 255, 255, 0.2) 8px,
            rgba(255, 255, 255, 0.2) 9px
        ),
        linear-gradient(90deg,
            rgba(212, 168, 85, 0.7) 0%,
            rgba(212, 168, 85, 1) 15%,
            rgba(212, 168, 85, 1) 85%,
            rgba(212, 168, 85, 0.7) 100%
        ),
        linear-gradient(0deg,
            rgba(255, 255, 255, 0.25) 0%,
            transparent 40%,
            transparent 60%,
            rgba(0, 0, 0, 0.2) 100%
        );
    border-radius: 4px;
    box-shadow: 
        0 0 25px rgba(212, 168, 85, 1.2),
        0 0 50px rgba(212, 168, 85, 0.9),
        0 0 75px rgba(212, 168, 85, 0.6),
        0 0 100px rgba(212, 168, 85, 0.3),
        inset 0 2px 4px rgba(255, 255, 255, 0.4),
        inset 0 -2px 4px rgba(0, 0, 0, 0.3);
    transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    z-index: 2;
}

.progress-line-fill::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.8) 20%,
        rgba(255, 255, 255, 1) 50%,
        rgba(255, 255, 255, 0.8) 80%,
        transparent 100%
    );
    animation: progressShine 1.5s ease-in-out infinite;
    filter: blur(1px);
}

.progress-line-fill::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -6px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: var(--accent-amber);
    box-shadow: 
        0 0 20px rgba(212, 168, 85, 1.3),
        0 0 40px rgba(212, 168, 85, 1),
        0 0 60px rgba(212, 168, 85, 0.7),
        0 0 80px rgba(212, 168, 85, 0.4),
        inset 0 0 10px rgba(255, 255, 255, 0.5);
    animation: hexDotPulse 1.2s ease-in-out infinite;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.progress-line-fill.active {
    animation: progressGlow 2s ease-in-out infinite;
}

@keyframes bgPulse {
    0%, 100% {
        opacity: 0.4;
    }
    50% {
        opacity: 0.8;
    }
}

@keyframes bgScan {
    0% {
        left: -100%;
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        left: 100%;
        opacity: 0;
    }
}

@keyframes progressShine {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

@keyframes hexDotPulse {
    0%, 100% {
        transform: translateY(-50%) scale(1) rotate(0deg);
        opacity: 1;
        box-shadow: 
            0 0 20px rgba(212, 168, 85, 1.3),
            0 0 40px rgba(212, 168, 85, 1),
            0 0 60px rgba(212, 168, 85, 0.7),
            0 0 80px rgba(212, 168, 85, 0.4),
            inset 0 0 10px rgba(255, 255, 255, 0.5);
    }
    50% {
        transform: translateY(-50%) scale(1.3) rotate(30deg);
        opacity: 1;
        box-shadow: 
            0 0 25px rgba(212, 168, 85, 1.5),
            0 0 50px rgba(212, 168, 85, 1.2),
            0 0 75px rgba(212, 168, 85, 0.9),
            0 0 100px rgba(212, 168, 85, 0.5),
            inset 0 0 12px rgba(255, 255, 255, 0.6);
    }
}

@keyframes progressGlow {
    0%, 100% {
        box-shadow: 
            0 0 25px rgba(212, 168, 85, 1.2),
            0 0 50px rgba(212, 168, 85, 0.9),
            0 0 75px rgba(212, 168, 85, 0.6),
            0 0 100px rgba(212, 168, 85, 0.3),
            inset 0 2px 4px rgba(255, 255, 255, 0.4),
            inset 0 -2px 4px rgba(0, 0, 0, 0.3);
    }
    50% {
        box-shadow: 
            0 0 30px rgba(212, 168, 85, 1.5),
            0 0 60px rgba(212, 168, 85, 1.2),
            0 0 90px rgba(212, 168, 85, 0.8),
            0 0 120px rgba(212, 168, 85, 0.4),
            inset 0 2px 6px rgba(255, 255, 255, 0.5),
            inset 0 -2px 6px rgba(0, 0, 0, 0.4);
    }
}

.arrow-1-to-3 {
    top: 80px;
    left: 15%;
    transform: translate(0, -50%);
    width: 35%;
    height: 20px;
}

.arrow-3-to-5 {
    top: 80px;
    left: 50%;
    transform: translate(0, -50%);
    width: 35%;
    height: 20px;
}

/* 线条点亮效果 */
.milestone-arrow.active path {
    stroke: rgba(212, 168, 85, 0.9);
    stroke-width: 4;
    filter: drop-shadow(0 0 12px rgba(212, 168, 85, 0.8));
    animation: arrowGlow 2s ease-in-out infinite;
}

@keyframes arrowGlow {
    0%, 100% {
        stroke-opacity: 0.8;
        filter: drop-shadow(0 0 8px rgba(212, 168, 85, 0.6));
    }
    50% {
        stroke-opacity: 1;
        filter: drop-shadow(0 0 12px rgba(212, 168, 85, 0.8));
    }
}

.milestone-pack {
    position: absolute;
    z-index: 2;
}

.pack-1 {
    top: 240px;
    left: 50%;
    transform: translateX(-50%);
}

.pack-2 {
    top: 410px;
    left: 50%;
    transform: translateX(-50%);
}

.pack-box {
    background: linear-gradient(135deg, rgba(13, 17, 23, 0.98) 0%, rgba(8, 10, 14, 0.95) 100%);
    border: 2px solid rgba(212, 168, 85, 0.6);
    border-radius: 10px;
    padding: 18px 24px;
    box-shadow: 
        0 0 30px rgba(212, 168, 85, 0.3),
        0 4px 20px rgba(0, 0, 0, 0.4),
        inset 0 0 40px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(212, 168, 85, 0.1);
    width: 100%;
    max-width: 600px;
    min-width: 500px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.pack-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(212, 168, 85, 0.1), transparent);
    transition: left 0.6s ease;
    z-index: 0;
}

.pack-box:hover::before {
    left: 100%;
}

.pack-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 8px;
    position: relative;
    z-index: 1;
}

.pack-box .pack-name {
    font-family: 'Michroma', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--accent-amber);
    letter-spacing: 2px;
    text-shadow: 0 0 15px rgba(212, 168, 85, 0.5);
    white-space: nowrap;
}

.pack-box .pack-content {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
}

.btn-claim-pack {
    width: auto;
    min-width: 120px;
    padding: 12px 30px;
    background: linear-gradient(135deg, rgba(212, 168, 85, 0.15) 0%, rgba(184, 115, 74, 0.15) 100%);
    border: 2px solid rgba(212, 168, 85, 0.5);
    border-radius: 8px;
    color: var(--accent-amber);
    font-family: 'Michroma', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 
        0 0 15px rgba(212, 168, 85, 0.2),
        inset 0 0 20px rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
    z-index: 2;
}

.btn-claim-pack::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(212, 168, 85, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.btn-claim-pack:hover:not(:disabled)::before {
    width: 300px;
    height: 300px;
}

.btn-claim-pack:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(212, 168, 85, 0.3) 0%, rgba(184, 115, 74, 0.3) 100%);
    border-color: var(--accent-amber);
    box-shadow: 
        0 0 25px rgba(212, 168, 85, 0.6),
        0 4px 15px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}

.btn-claim-pack.go-invite {
    opacity: 1;
    cursor: pointer;
    filter: grayscale(0);
    background: linear-gradient(135deg, rgba(139, 148, 158, 0.3) 0%, rgba(72, 79, 88, 0.3) 100%);
    border-color: rgba(139, 148, 158, 0.6);
    color: var(--text-primary);
}

.btn-claim-pack.go-invite:hover {
    opacity: 1;
    filter: grayscale(0);
    border-color: rgba(139, 148, 158, 0.8);
    color: var(--text-primary);
    background: linear-gradient(135deg, rgba(139, 148, 158, 0.4) 0%, rgba(72, 79, 88, 0.4) 100%);
}

.btn-claim-pack.claim-ready {
    background: linear-gradient(135deg, rgba(212, 168, 85, 0.3) 0%, rgba(184, 115, 74, 0.3) 100%);
    border-color: var(--accent-amber);
    color: var(--accent-amber);
    box-shadow: 
        0 0 25px rgba(212, 168, 85, 0.6),
        0 4px 15px rgba(0, 0, 0, 0.3);
}

.btn-claim-pack.claimed {
    background: linear-gradient(135deg, rgba(87, 110, 92, 0.4) 0%, rgba(50, 76, 57, 0.45) 100%);
    border-color: rgba(122, 176, 130, 0.75);
    color: #cfe9cf;
    box-shadow:
        0 0 18px rgba(76, 130, 90, 0.35),
        inset 0 0 18px rgba(0, 0, 0, 0.28);
    cursor: not-allowed;
}

.btn-claim-pack.claimed::before {
    display: none;
}

.tooltip-content {
    background: linear-gradient(135deg, rgba(13, 17, 23, 0.95) 0%, rgba(8, 10, 14, 0.98) 100%);
    border: 2px solid rgba(212, 168, 85, 0.6);
    padding: 18px 24px;
    border-radius: 4px;
    box-shadow: 
        0 0 30px rgba(212, 168, 85, 0.3),
        inset 0 0 40px rgba(0, 0, 0, 0.5);
    min-width: 280px;
    position: relative;
}

.tooltip-content::before {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid rgba(212, 168, 85, 0.6);
}

.tooltip-title {
    font-family: 'Michroma', sans-serif;
    font-size: 1.1rem;
    color: var(--accent-amber);
    margin-bottom: 14px;
    text-align: center;
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(212, 168, 85, 0.3);
    padding-bottom: 10px;
}

.tooltip-item {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 10px 0;
    font-size: 1.05rem;
    color: var(--accent-amber);
}

.tooltip-item.highlight {
    color: var(--accent-amber);
}

.tooltip-item .reward-icon-small {
    display: none;
}

/* Milestone Rewards Grid */
.milestone-rewards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.milestone-reward-card {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--border-subtle);
    padding: 15px;
    transition: all 0.3s ease;
}

.milestone-reward-card.unlocked {
    border-color: var(--accent-copper);
    box-shadow: 0 0 20px rgba(184, 115, 74, 0.2);
}

.reward-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.reward-tier {
    font-family: 'Michroma', sans-serif;
    font-size: 0.7rem;
    color: var(--text-primary);
    letter-spacing: 1px;
}

.reward-status {
    font-size: 0.65rem;
    padding: 3px 8px;
    border-radius: 2px;
    letter-spacing: 0.5px;
}

.reward-status.locked {
    background: rgba(139, 148, 158, 0.2);
    color: var(--text-muted);
}

.reward-status.unlocked {
    background: rgba(26, 92, 92, 0.3);
    color: var(--accent-teal);
}

.reward-card-content {
    margin-bottom: 12px;
}

.reward-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.reward-item.highlight {
    color: var(--accent-amber);
}

.reward-icon-small {
    font-size: 1rem;
}

.btn-claim-reward {
    width: 100%;
    padding: 8px;
    background: var(--accent-steel);
    border: none;
    color: var(--text-muted);
    font-family: 'Exo 2', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: not-allowed;
    transition: all 0.3s ease;
}

.btn-claim-reward:not(:disabled) {
    background: linear-gradient(135deg, var(--accent-copper), var(--accent-brass));
    color: var(--primary-dark);
    cursor: pointer;
}

.btn-claim-reward:not(:disabled):hover {
    box-shadow: 0 3px 15px rgba(184, 115, 74, 0.4);
}

/* Gift Pack Details */
.gift-pack-details {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-subtle);
    padding: 20px;
}

.gift-pack-title {
    font-family: 'Exo 2', sans-serif;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.gift-pack-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.gift-pack-item {
    background: rgba(0, 0, 0, 0.3);
    padding: 12px 15px;
    border-left: 2px solid var(--accent-copper);
}

.pack-name {
    display: block;
    font-family: 'Michroma', sans-serif;
    font-size: 0.7rem;
    color: var(--accent-amber);
    letter-spacing: 1px;
    margin-bottom: 5px;
    white-space: nowrap;
}

.pack-content {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
}

/* Lottery Section - Grid Style */
.lottery-grid-section {
    background: linear-gradient(180deg, rgba(139, 69, 69, 0.15) 0%, rgba(13, 17, 23, 0.95) 100%);
    border: 1px solid rgba(184, 115, 74, 0.3);
    padding: 20px;
    position: relative;
}

.lottery-grid-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(90deg, transparent 0%, rgba(184, 115, 74, 0.05) 50%, transparent 100%),
        repeating-linear-gradient(0deg, transparent, transparent 50px, rgba(184, 115, 74, 0.02) 50px, rgba(184, 115, 74, 0.02) 100px);
    pointer-events: none;
}

.lottery-grid-header {
    text-align: center;
    margin-bottom: 20px;
    position: relative;
}

.lottery-grid-title {
    font-family: 'Michroma', sans-serif;
    font-size: 1.1rem;
    letter-spacing: 4px;
    color: var(--accent-amber);
    text-shadow: 0 0 20px rgba(212, 168, 85, 0.4);
}

/* Prize Wrapper */
.lottery-prize-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
}

/* 3x3 Prize Grid */
.prize-grid-3x3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

/* 4x2 Prize Grid (8 prizes) */
.prize-grid-4x2 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

/* 对称的抽奖网格布局 */
.prize-grid-symmetric {
    display: grid;
    grid-template-columns: repeat(6, 1fr) !important;
    grid-template-rows: repeat(3, auto) !important;
    gap: 10px;
    padding: 10px 0;
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

/* 第一行：鼠标（中，2列）、显卡（大，2列）、耳机（中，2列） */
.prize-mouse {
    grid-column: 1 / 3 !important;
    grid-row: 1 !important;
    margin-top: 25px;
}

.prize-gpu {
    grid-column: 3 / 5 !important;
    grid-row: 1 !important;
}

.prize-headset {
    grid-column: 5 / 7 !important;
    grid-row: 1 !important;
    margin-top: 25px;
}

/* 第二行：三个小框均匀分布（每个占2列） */
.prize-topup6 {
    grid-column: 1 / 3 !important;
    grid-row: 2 !important;
    margin-top: 20px;
}

.prize-topup30 {
    grid-column: 3 / 5 !important;
    grid-row: 2 !important;
    margin-top: 10px;
}

.prize-topup64 {
    grid-column: 5 / 7 !important;
    grid-row: 2 !important;
    margin-top: 20px;
}

/* 第三行：两个小框居中对称（每个占2列，居中） */
.prize-supply {
    grid-column: 2 / 4 !important;
    grid-row: 3 !important;
    margin-top: 30px;
}

.prize-thanks {
    grid-column: 4 / 6 !important;
    grid-row: 3 !important;
    margin-top: 30px;
}

/* 奖品尺寸样式 */
.prize-cell.prize-small {
    aspect-ratio: 1 / 0.6;
}

.prize-cell.prize-medium {
    aspect-ratio: 1 / 0.6;
}

.prize-cell.prize-large {
    aspect-ratio: 1 / 0.6;
}

.prize-cell.prize-large .prize-image-placeholder {
    width: 60%;
    aspect-ratio: 1 / 1;
    max-width: 120px;
}

.prize-cell.prize-medium .prize-image-placeholder {
    width: 55%;
    aspect-ratio: 1 / 1;
    max-width: 100px;
}

.prize-cell.prize-small .prize-image-placeholder {
    width: 50%;
    aspect-ratio: 1 / 1;
    max-width: 80px;
}

/* Prize Rows - Legacy */
.prize-row {
    display: grid;
    gap: 8px;
}

.prize-row.top-row {
    grid-template-columns: 1fr 1.3fr 1fr;
}

.prize-row.middle-row {
    grid-template-columns: 1fr 1.3fr 1fr;
}

.prize-row.bottom-row {
    grid-template-columns: repeat(3, 1fr);
}

/* Prize Cells */
.prize-cell {
    background: linear-gradient(180deg, rgba(60, 40, 40, 0.8) 0%, rgba(30, 20, 20, 0.9) 100%);
    border: 1px solid rgba(184, 115, 74, 0.25);
    padding: 8% 5%;
    text-align: center;
    position: relative;
    transition: all 0.3s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.prize-cell::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(184, 115, 74, 0.5), transparent);
}

.prize-cell:hover {
    border-color: var(--accent-copper);
    transform: scale(1.02);
    box-shadow: 0 0 20px rgba(184, 115, 74, 0.3);
}

.prize-cell.grand {
    padding: 10% 5%;
}

.prize-cell.grand::before {
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--accent-amber), transparent);
}

.prize-cell.featured {
    background: linear-gradient(180deg, rgba(100, 60, 30, 0.9) 0%, rgba(50, 30, 15, 0.95) 100%);
    border-color: var(--accent-amber);
    box-shadow: 0 0 30px rgba(212, 168, 85, 0.2);
}

.prize-cell.featured::before {
    height: 3px;
    background: linear-gradient(90deg, var(--accent-copper), var(--accent-amber), var(--accent-copper));
}

.featured-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: linear-gradient(135deg, var(--accent-copper), var(--accent-amber));
    color: var(--primary-dark);
    font-family: 'Michroma', sans-serif;
    font-size: 0.5rem;
    padding: 3px 8px;
    letter-spacing: 1px;
}

/* .prize-cell.thanks 已移除opacity设置，使颜色与其他奖品一致 */

.prize-cell-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5em;
    width: 100%;
    height: 100%;
    justify-content: center;
}

/* Prize Image Placeholder */
.prize-image-placeholder {
    width: 55%;
    aspect-ratio: 1 / 1;
    max-width: 100px;
    background: transparent;
    border: none;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease;
    margin: 0 auto;
}

.prize-cell.grand .prize-image-placeholder {
    width: 60%;
    aspect-ratio: 1 / 1;
    max-width: 120px;
}

.prize-image-placeholder .prize-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    opacity: 0;
    transition: opacity 0.24s ease;
}

.prize-image-placeholder .prize-img.is-loaded {
    opacity: 1;
}

.prize-image-placeholder .prize-img.is-loaded + .prize-img-fallback {
    display: none;
}

.prize-img-fallback {
    font-size: 2rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
    position: relative;
    z-index: 0;
}

.prize-cell.grand .prize-img-fallback {
    font-size: 2.5rem;
}

.prize-cell:hover .prize-image-placeholder {
    border: none;
    background: transparent;
}

.prize-icon-large {
    font-size: 2.5rem;
    margin-bottom: 10px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.prize-icon-medium {
    font-size: 1.8rem;
    margin-bottom: 8px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.prize-cell-name {
    font-family: 'Exo 2', sans-serif;
    font-size: 0.8rem;
    color: var(--text-primary);
    margin-bottom: 4px;
    line-height: 1.3;
}

.prize-cell.grand .prize-cell-name {
    font-size: 0.9rem;
    font-weight: 600;
}

.prize-cell-value {
    font-family: 'Michroma', sans-serif;
    font-size: 0.75rem;
    color: var(--accent-amber);
    text-shadow: 0 0 8px rgba(212, 168, 85, 0.4);
}

/* Draw Button Section - Below Grid */
.draw-button-section {
    background: transparent;
    border: none;
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
    margin-top: 5px;
}

/* PC端：让lottery-info-text贴在框体底部 */
@media (min-width: 1025px) {
    .lottery-column {
        position: relative;
        display: flex;
        flex-direction: column;
    }
    
    .draw-button-section {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        margin-top: auto;
        padding-bottom: 0 !important;
    }
    
    .lottery-info-text {
        margin-top: auto;
        margin-bottom: 0;
        padding-bottom: 20px !important;
    }
    
    /* PC端：让milestone-description贴在框体底部 - 使用与lottery-info-text相同的方式 */
    .milestone-column {
        position: relative;
        display: flex;
        flex-direction: column;
    }
    
    .milestone-flow-container {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        margin-top: auto;
        padding-bottom: 0 !important;
    }
    
    .milestone-description {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        margin-top: auto !important;
        margin-bottom: 0 !important;
        padding-bottom: 20px !important;
    }
    
    /* PC端：让squad-notice贴在框体底部 - 使用与milestone-description相同的方式 */
    .event-squad-section {
        position: relative;
        display: flex;
        flex-direction: column;
    }
    
    .event-squad-section .squad-members-row {
        flex: 1;
        display: flex;
        flex-direction: row;
        justify-content: center;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    .event-squad-section .squad-notice {
        margin-top: auto !important;
        margin-bottom: 0 !important;
        padding-bottom: 10px !important;
    }
    
    /* PC端抽奖奖品图片优化 - 放大图片并移除棕色边框 */
    .prize-cell {
        border: none !important;
        background: transparent !important;
        padding: 0 !important;
    }
    
    .prize-cell::before {
        display: none !important;
    }
    
    .prize-cell:hover {
        border: none !important;
        box-shadow: none !important;
        transform: none !important;
    }
    
    .prize-image-placeholder {
        width: 100% !important;
        max-width: none !important;
        aspect-ratio: 1 / 1 !important;
    }
    
    .prize-cell.prize-large .prize-image-placeholder {
        width: 100% !important;
        max-width: none !important;
        aspect-ratio: 1 / 1 !important;
    }
    
    .prize-cell.prize-medium .prize-image-placeholder {
        width: 100% !important;
        max-width: none !important;
        aspect-ratio: 1 / 1 !important;
    }
    
    .prize-cell.prize-small .prize-image-placeholder {
        width: 100% !important;
        max-width: none !important;
        aspect-ratio: 1 / 1 !important;
    }
    
    .prize-cell.grand .prize-image-placeholder {
        width: 100% !important;
        max-width: none !important;
        aspect-ratio: 1 / 1 !important;
    }
    
    .prize-cell.featured {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }
    
    .prize-cell.featured::before {
        display: none !important;
    }
    
    .prize-cell-inner {
        padding: 0 !important;
        gap: 0 !important;
    }
}

.draw-button-section::before {
    display: none;
}

.draw-button-section .btn-draw-grid {
    max-width: 280px;
    width: 100%;
}

/* Draw Button Cell - Legacy */
.draw-button-cell {
    background: linear-gradient(180deg, rgba(184, 115, 74, 0.3) 0%, rgba(139, 69, 50, 0.4) 100%);
    border: 2px solid var(--accent-copper);
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
}

.draw-button-cell::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg, transparent, rgba(212, 168, 85, 0.1), transparent, rgba(212, 168, 85, 0.1), transparent);
    animation: rotateBg 8s linear infinite;
    opacity: 0.5;
}

@keyframes rotateBg {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.btn-draw-grid {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 15px 20px;
    background: linear-gradient(180deg, #c73b3b 0%, #8b2525 50%, #6b1a1a 100%);
    border: 2px solid #ff6b6b;
    color: #fff;
    font-family: 'Michroma', sans-serif;
    cursor: not-allowed;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(199, 59, 59, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn-draw-grid:not(:disabled) {
    cursor: pointer;
    animation: btnPulseRed 2s ease-in-out infinite;
}

@keyframes btnPulseRed {
    0%, 100% { box-shadow: 0 4px 15px rgba(199, 59, 59, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
    50% { box-shadow: 0 6px 25px rgba(199, 59, 59, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
}

.btn-draw-grid:not(:disabled):hover {
    transform: scale(1.05);
    box-shadow: 0 8px 30px rgba(199, 59, 59, 0.6);
}

.btn-draw-grid:disabled {
    background: linear-gradient(180deg, #5a5a5a 0%, #3a3a3a 50%, #2a2a2a 100%);
    border-color: #666;
    box-shadow: none;
}

.draw-text {
    display: block;
    font-size: 1.1rem;
    letter-spacing: 3px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.draw-subtext {
    display: block;
    font-family: 'Exo 2', sans-serif;
    font-size: 0.65rem;
    opacity: 0.8;
    letter-spacing: 1px;
    margin-top: 4px;
}

.draw-chances {
    position: relative;
    z-index: 1;
    font-family: 'Exo 2', sans-serif;
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-top: 10px;
}

.chances-num,
.chances-number {
    font-family: 'Michroma', sans-serif;
    font-size: 1.2rem;
    color: var(--accent-amber);
    text-shadow: 0 0 10px rgba(212, 168, 85, 0.5);
    transition: all 0.3s ease;
}

@keyframes chanceUpdate {
    0% {
        transform: scale(1);
        color: var(--accent-amber);
    }
    50% {
        transform: scale(1.3);
        color: #ffc107;
        text-shadow: 0 0 20px rgba(255, 193, 7, 0.8);
    }
    100% {
        transform: scale(1);
        color: var(--accent-amber);
    }
}

/* Draw Coming Soon Button */
.btn-draw-coming-soon {
    width: 100%;
    max-width: 300px;
    padding: 15px 30px;
    background: linear-gradient(135deg, rgba(212, 168, 85, 0.2) 0%, rgba(184, 115, 74, 0.2) 100%);
    border: 2px solid rgba(212, 168, 85, 0.4);
    border-radius: 8px;
    color: var(--accent-amber);
    font-family: 'Michroma', sans-serif;
    font-size: 1rem;
    letter-spacing: 2px;
    cursor: not-allowed;
    transition: all 0.3s ease;
    margin-top: 20px;
    white-space: nowrap;
}

.btn-draw-coming-soon:disabled {
    opacity: 0.7;
}

.lottery-info-text {
    font-size: 0.95rem;
    color: #ffffff;
    text-align: center;
    margin-top: 15px;
    line-height: 1.5;
    padding: 0 20px;
    white-space: nowrap;
}

.chances-num {
    font-family: 'Michroma', sans-serif;
    font-size: 1.2rem;
    color: var(--accent-amber);
    font-weight: 700;
    text-shadow: 0 0 10px rgba(212, 168, 85, 0.6);
}

/* Lottery Note */
/* Responsive */
@media (max-width: 600px) {
    .prize-grid-3x3 {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }
    
    .prize-grid-4x2 {
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
    }
    
    .prize-image-placeholder {
        width: 50%;
        aspect-ratio: 1 / 1;
        max-width: 45px;
    }
    
    .prize-cell.grand .prize-image-placeholder {
        width: 55%;
        aspect-ratio: 1 / 1;
        max-width: 50px;
    }
    
    .prize-img-fallback {
        font-size: 1.3rem;
    }
    
    .prize-cell.grand .prize-img-fallback {
        font-size: 1.5rem;
    }
    
    .prize-cell {
        padding: 6% 3%;
    }
    
    .prize-cell-name {
        font-size: 0.6rem;
    }
    
    .prize-cell-value {
        font-size: 0.55rem;
    }
    
    .draw-button-section {
        padding: 15px;
    }
    
    .prize-row.top-row,
    .prize-row.middle-row {
        grid-template-columns: 1fr;
    }
    
    .prize-row.bottom-row {
        grid-template-columns: 1fr 1fr 1fr;
    }
    
    .draw-button-cell {
        order: -1;
    }
}

@media (max-width: 480px) {
    .prize-grid-4x2 {
        grid-template-columns: repeat(4, 1fr);
        gap: 4px;
    }
    
    .prize-image-placeholder {
        width: 50%;
        aspect-ratio: 1 / 1;
        max-width: 38px;
    }
    
    .prize-cell.grand .prize-image-placeholder {
        width: 55%;
        aspect-ratio: 1 / 1;
        max-width: 42px;
    }
    
    .prize-img-fallback {
        font-size: 1.1rem;
    }
    
    .prize-cell.grand .prize-img-fallback {
        font-size: 1.2rem;
    }
    
    .prize-cell {
        padding: 5% 2.5%;
    }
    
    .prize-cell-name {
        font-size: 0.5rem;
    }
    
    .featured-badge {
        font-size: 0.35rem;
        padding: 2px 4px;
        top: 4px;
        right: 4px;
    }
    
    .hero-logo-wrapper { 
        max-width: 80%; 
        margin-bottom: -60px; 
    }
    
    .hero-subtitle {
        display: none !important;
    }
    
    .section-title {
        font-size: clamp(1.4rem, 5vw, 2rem) !important;
        letter-spacing: clamp(2px, 1.2vw, 5px) !important;
        white-space: nowrap !important;
        overflow: visible !important;
    }
    html:lang(zh) .section-header {
        padding-bottom: 15px !important;
        margin-bottom: 40px !important;
    }
    .decode-title {
        font-size: clamp(2rem, 7vw, 3rem) !important;
        letter-spacing: clamp(3px, 1.5vw, 8px) !important;
        white-space: nowrap !important;
        overflow: visible !important;
    }
    html:lang(zh) .decode-title {
        padding-bottom: 10px !important;
        margin-bottom: 10px !important;
    }
    /* 隐藏PARALLVERSE页面的扫描特效和解码特效 */
    .world-section .scan-line {
        display: none !important;
    }
    .decode-title::before,
    .decode-title::after {
        display: none !important;
    }
    /* 隐藏乱码，直接显示最终文字 */
    .decode-char {
        animation: none !important;
        color: var(--text-primary) !important;
        text-shadow: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .decode-char.scrambled,
    .decode-char.scanning {
        animation: none !important;
        color: var(--text-primary) !important;
        text-shadow: none !important;
        opacity: 1 !important;
    }
    .decode-char::before,
    .decode-char::after {
        display: none !important;
    }
    .decode-char.decoded {
        animation: none !important;
    }
    .decode-title.scan-active::before {
        display: none !important;
    }
    .decode-title.decode-complete {
        animation: none !important;
    }
    .decode-title.decode-complete .decode-char {
        animation: none !important;
    }
    /* 隐藏轮播指示器 */
    .world-indicators {
        display: none !important;
    }
    /* 隐藏frame-data */
    .frame-data-top,
    .frame-data-bottom {
        display: none !important;
    }
    
    .event-main-header {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
    html:lang(zh) .event-main-header {
        width: 100%;
        max-width: 100vw;
        overflow-x: visible;
        padding: 0 10px;
    }
    .event-main-title {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        line-height: 1.2;
        margin-bottom: 0;
    }
    html:lang(zh) .event-main-title {
        display: inline-block !important;
        white-space: nowrap !important;
        width: 100%;
        max-width: 100vw;
        overflow-x: visible;
        min-width: 100%;
        margin-bottom: 15px !important;
    }
    .event-title-line1,
    .event-title-line2 {
        font-size: clamp(1.8rem, 6vw, 2.5rem) !important;
        letter-spacing: clamp(3px, 1.2vw, 6px) !important;
        white-space: nowrap !important;
        text-align: center;
    }
    html:lang(zh) .event-title-line1,
    html:lang(zh) .event-title-line2 {
        display: inline !important;
    }
    .event-title-line1 {
        margin-bottom: 0.2em;
    }
    html:lang(zh) .event-title-line1 {
        margin-bottom: 0 !important;
        margin-right: 0.2em;
    }
    html:lang(zh) .event-title-line1::after {
        content: ' ';
    }
    .btn-rules-tech {
        margin-top: 0 !important;
        align-self: center;
        padding: clamp(10px, 2vw, 14px) clamp(20px, 4vw, 30px) !important;
        font-size: clamp(0.75rem, 2vw, 0.9rem) !important;
        letter-spacing: clamp(1px, 0.5vw, 2px) !important;
        gap: clamp(6px, 1.5vw, 10px) !important;
    }
    .btn-rules-tech svg {
        width: clamp(12px, 2.5vw, 16px) !important;
        height: clamp(12px, 2.5vw, 16px) !important;
    }
    .btn-rules-tech .btn-corner {
        width: clamp(6px, 1.5vw, 8px) !important;
        height: clamp(6px, 1.5vw, 8px) !important;
    }
    
    /* 隐藏平行世界页面图片框上的文字 */
    .world-card-overlay {
        display: none !important;
    }
}

/* Responsive */
@media (max-width: 1024px) {
    .event-content-wrapper {
        grid-template-columns: 1fr;
    }
    
    .event-team-section {
        max-width: 450px;
        margin: 0 auto;
    }
    
    .event-container-vertical {
        gap: 30px;
    }
    html:lang(zh) .event-container-vertical {
        width: 100%;
        max-width: 100vw;
        overflow-x: visible;
        padding: 0 5px;
    }
    
    .milestone-rewards-grid {
        grid-template-columns: 1fr;
    }
    
    .gift-pack-grid {
        grid-template-columns: 1fr;
    }
    
    .lottery-section {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .lottery-info {
        text-align: center;
    }
    
    .lottery-wheel {
        margin: 0 auto;
    }
    
    .squad-members-row {
        gap: 15px;
    }
    
    .squad-member-card {
        width: 250px;
        padding: 15px;
    }
    
    .member-avatar-box {
        width: 220px;
        height: 270px;
    }
    
    .member-avatar-fallback {
        font-size: 4.5rem;
    }
    
    .squad-member-card.leader .member-avatar-fallback {
        font-size: 5rem;
    }
}

@media (max-width: 1400px) {
    .squad-members-row {
        gap: 12px;
    }
    
    .squad-member-card {
        width: 200px;
        padding: 12px;
    }
    
    .member-avatar-box {
        width: 176px;
        height: 220px;
    }
    
    .member-avatar-fallback {
        font-size: 3.5rem;
    }
    
    .squad-member-card.leader .member-avatar-fallback {
        font-size: 4rem;
    }
}

@media (max-width: 1100px) {
    .squad-members-row {
        gap: 10px;
    }
    
    .squad-member-card {
        width: 160px;
        padding: 10px;
    }
    
    .member-avatar-box {
        width: 140px;
        height: 175px;
    }
    
    .member-avatar-fallback {
        font-size: 3rem;
    }
    
    .squad-member-card.leader .member-avatar-fallback {
        font-size: 3.5rem;
    }
}

@media (max-width: 900px) {
    .squad-members-row {
        gap: 8px;
        flex-wrap: nowrap;
    }
    
    .squad-member-card {
        width: 140px;
        padding: 10px;
    }
    
    .member-avatar-box {
        width: 120px;
        height: 150px;
    }
    
    .member-avatar-fallback {
        font-size: 2.5rem;
    }
    
    .squad-member-card.leader .member-avatar-fallback {
        font-size: 3rem;
    }
}

@media (max-width: 767px) {
    .squad-members-row {
        gap: 8px;
        flex-wrap: nowrap;
    }
    
    .squad-member-card {
        width: 120px;
        padding: 10px;
    }
    
    .member-avatar-box {
        width: 100px;
        height: 125px;
    }
    
    .member-avatar-fallback {
        font-size: 2.2rem;
    }
    
    .squad-member-card.leader .member-avatar-fallback {
        font-size: 2.5rem;
    }
}

@media (max-width: 600px) {
    .squad-members-row {
        gap: 6px;
        flex-wrap: nowrap;
    }
    
    .squad-member-card {
        width: 100px;
        padding: 8px;
    }
    
    .member-avatar-box {
        width: 84px;
        height: 105px;
    }
    
    .member-avatar-fallback {
        font-size: 1.8rem;
    }
    
    .squad-member-card.leader .member-avatar-fallback {
        font-size: 2rem;
    }
    
    .member-label {
        font-size: 0.6rem;
    }
    
    .squad-member-card .leader-badge {
        width: 18px;
        height: 18px;
        font-size: 0.55rem;
        top: 5px;
        right: 5px;
    }
    
    .squad-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .squad-actions .btn-login-team,
    .squad-actions .btn-invite-team {
        width: 100%;
        max-width: 280px;
    }
}

/* Footer */
footer {
    background: var(--primary-dark);
    border-top: 1px solid var(--border-subtle);
    padding: 50px 40px;
}

.footer-content {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 25px;
}

.footer-links {
    display: flex;
    gap: 30px;
}

.footer-links a {
    color: #ffffff;
    text-decoration: none;
    font-size: 1rem;
    transition: color 0.3s ease;
}

.footer-links a:hover { color: var(--accent-copper); }

.footer-social {
    display: flex;
    gap: 15px;
}

.footer-social a {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    color: #ffffff;
    transition: all 0.3s ease;
    position: relative;
}

.footer-social a svg {
    width: 22px;
    height: 22px;
}

/* 确保页脚社媒图标路径颜色跟随父级 color 变化 */
.footer-social a svg path {
    fill: currentColor !important;
}

/* 抖音 */
.footer-social a:nth-child(1):hover {
    background: #000000;
    border-color: #FFFFFF;
    color: #FFFFFF;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
}

/* TapTap */
.footer-social a:nth-child(2):hover {
    background: #00BCD4;
    border-color: #00BCD4;
    color: #ffffff;
    box-shadow: 0 0 20px rgba(0, 188, 212, 0.5);
    transform: translateY(-2px);
}

/* Bilibili */
.footer-social a:nth-child(3):hover {
    background: #E4405F;
    border-color: #E4405F;
    color: #ffffff;
    box-shadow: 0 0 20px rgba(228, 64, 95, 0.5);
    transform: translateY(-2px);
}

/* 微信公众号 */
.footer-social a:nth-child(4):hover {
    background: #07C160;
    border-color: #07C160;
    color: #ffffff;
    box-shadow: 0 0 20px rgba(7, 193, 96, 0.5);
    transform: translateY(-2px);
}

/* 小红书 */
.footer-social a:nth-child(5):hover {
    background: #FF0000;
    border-color: #FF0000;
    color: #ffffff;
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.5);
    transform: translateY(-2px);
}

/* 微博 */
.footer-social a:nth-child(6):hover {
    background: #FF6600;
    border-color: #FF6600;
    color: #ffffff;
    box-shadow: 0 0 20px rgba(255, 102, 0, 0.5);
    transform: translateY(-2px);
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 20px;
}

.footer-logo-img {
    height: 90px;
    filter: brightness(1.5);
    transition: filter 0.3s ease;
}

.footer-logo:hover .footer-logo-img {
    filter: brightness(1.8);
}

.footer-logo span {
    font-family: 'Michroma', sans-serif;
    font-size: 1.2rem;
    color: #ffffff;
    letter-spacing: 2px;
}

.copyright {
    width: 100%;
    text-align: center;
    padding-top: 30px;
    margin-top: 30px;
    border-top: 1px solid var(--border-subtle);
    color: #ffffff;
    font-size: 1rem;
}

.copyright p {
    margin: 8px 0;
}

.footer-company-info {
    margin-top: 15px;
    font-size: 1rem;
    color: #ffffff;
}

.footer-company-info a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-company-info a:hover {
    color: var(--accent-copper);
    text-decoration: underline;
}

/* Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(12px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    transition: opacity 0.3s ease;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.modal-overlay.active {
    display: flex;
    opacity: 1;
}

.modal {
    background: var(--secondary-dark);
    border: 1px solid var(--border-subtle);
    width: 90%;
    max-width: 440px;
    position: relative;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    overflow: hidden;
    margin: auto;
    animation: modalSlideIn 0.3s ease;
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}

.modal-large { max-width: 600px; }

.modal-avatar { 
    max-width: 800px; 
    width: 90%;
}

.modal-scrollable .modal-body {
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
}

.modal-scrollable .rules-content {
    max-height: none;
    overflow: visible;
}

@keyframes modalSlideIn {
    from { opacity: 0; transform: translateY(-30px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-header {
    padding: 15px 30px 10px;
    text-align: center;
    border-bottom: 1px solid var(--border-subtle);
}

.modal-logo-img {
    height: 144px;
    margin-bottom: -30px;
    filter: brightness(1.1);
    clip-path: inset(0 0 30% 0);
}

.modal-title {
    font-family: 'Michroma', sans-serif;
    font-size: 0.85rem;
    font-weight: 400;
    color: #b8c5d1;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: #8b949e;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    font-size: 1rem;
    z-index: 2;
}

.modal-close:hover {
    border-color: var(--accent-copper);
    color: var(--accent-copper);
}

.modal-body {
    padding: 30px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.form-group { margin-bottom: 20px; }

.form-label {
    display: block;
    font-size: 0.85rem;
    color: #b8c5d1;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.form-input {
    width: 100%;
    padding: 14px 16px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    font-family: 'Exo 2', sans-serif;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.form-input:focus {
    outline: none;
    border-color: var(--accent-copper);
    background: rgba(0, 0, 0, 0.6);
}

.form-input::placeholder { color: #8b949e; }

.form-row {
    display: flex;
    gap: 12px;
}

.form-row .form-input { flex: 1; }

/* Email Input Group */
.email-input-group {
    display: flex;
    align-items: stretch;
    gap: 0;
    border: 1px solid var(--border-subtle);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.email-input-group:focus-within {
    border-color: var(--accent-copper);
    box-shadow: 0 0 10px rgba(184, 115, 74, 0.2);
}

.email-input-group .email-prefix {
    flex: 1;
    border: none;
    min-width: 0;
    background: rgba(0, 0, 0, 0.4);
}

.email-input-group .email-prefix:focus {
    outline: none;
    background: rgba(0, 0, 0, 0.6);
}

.email-input-group .email-at {
    background: rgba(0, 0, 0, 0.5);
    border: none;
    border-left: 1px solid var(--border-subtle);
    border-right: 1px solid var(--border-subtle);
    padding: 0 10px;
    color: var(--accent-amber);
    font-family: 'Exo 2', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.email-input-group .email-domain {
    flex: 1.1;
    border: none;
    cursor: pointer;
    appearance: none;
    background-color: rgba(0, 0, 0, 0.4);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%23d4a855'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 35px;
    min-width: 0;
    color: #8b949e;
}

.email-input-group .email-domain:focus {
    outline: none;
    background-color: rgba(0, 0, 0, 0.6);
}

.email-input-group .email-domain:valid:not([value=""]) {
    color: var(--text-primary);
}

.email-input-group .email-domain option {
    background: var(--secondary-dark);
    color: var(--text-primary);
    padding: 10px;
}

.email-input-group .email-domain option:first-child {
    color: #8b949e;
}

.btn-send-code {
    background: var(--accent-teal);
    color: var(--text-primary);
    border: none;
    padding: 14px 20px;
    font-family: 'Exo 2', sans-serif;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.3s ease;
    font-size: 0.85rem;
}

.btn-send-code:hover { background: #1f6b6b; }

.human-verify-popup-host {
    position: fixed;
    top: -9999px;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
}

.human-verify-popup-host #aliyunCaptchaElement,
.human-verify-popup-host #aliyunCaptchaTrigger {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.checkbox-group.sub {
    margin-left: 24px;
    margin-bottom: 8px;
}

.checkbox-group input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent-copper);
    margin-top: 3px;
    flex-shrink: 0;
}

.checkbox-group label {
    font-size: 0.85rem;
    color: #8b949e;
    line-height: 1.5;
}

.terms-link {
    color: var(--accent-amber);
    text-decoration: underline;
    cursor: pointer;
    transition: all 0.3s ease;
}

.terms-link:hover {
    color: var(--accent-copper);
    text-shadow: 0 0 8px rgba(212, 168, 85, 0.5);
}

.required-mark {
    color: #e74c3c;
    margin-left: 3px;
    font-weight: bold;
}

.rules-content h4 {
    color: var(--text-primary);
    font-family: 'Michroma', sans-serif;
    font-size: 0.9rem;
    letter-spacing: 1px;
    margin: 20px 0 10px;
}

.rules-content h4:first-child {
    margin-top: 0;
}

.rules-content h5 {
    color: var(--text-primary);
    font-family: 'Michroma', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    margin: 15px 0 8px;
    font-weight: normal;
}

.rules-content ul {
    margin: 10px 0;
    padding-left: 20px;
}

.prize-pool-table {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0;
    font-size: 0.85rem;
    color: #b8c5d1;
}

.prize-pool-table thead {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.prize-pool-table th {
    padding: 12px 15px;
    text-align: left;
    font-family: 'Michroma', sans-serif;
    font-size: 0.8rem;
    color: var(--text-primary);
    letter-spacing: 0.5px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.prize-pool-table td {
    padding: 10px 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #b8c5d1;
}

.prize-pool-table tbody tr {
    background: rgba(255, 255, 255, 0.02);
}

.prize-pool-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.04);
}

.prize-pool-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.06);
}

.prize-pool-table td:last-child {
    text-align: right;
    font-family: 'Courier New', monospace;
    color: #a0b8c8;
}

/* 表格响应式样式 */
@media (max-width: 768px) {
    .prize-pool-table {
        font-size: 0.75rem;
    }
    
    .prize-pool-table th,
    .prize-pool-table td {
        padding: 8px 10px;
    }
}

@media (max-width: 480px) {
    .rules-content {
        overflow-x: auto;
    }
    
    .prize-pool-table {
        font-size: 0.7rem;
        min-width: 100%;
        display: table;
    }
    
    .prize-pool-table th,
    .prize-pool-table td {
        padding: 6px 8px;
        white-space: nowrap;
    }
    
    .prize-pool-table td:first-child {
        min-width: 180px;
    }
}

.rules-content li {
    margin-bottom: 8px;
    color: #b8c5d1;
}

.platform-select {
    display: flex;
    gap: 15px;
}

.platform-btn {
    flex: 1;
    padding: 14px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--border-subtle);
    color: #b8c5d1;
    font-family: 'Exo 2', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.platform-btn:hover,
.platform-btn.active {
    border-color: var(--accent-copper);
    color: var(--accent-copper);
    background: rgba(184, 115, 74, 0.1);
}

.btn-submit {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, var(--accent-copper) 0%, var(--accent-brass) 100%);
    border: none;
    color: var(--primary-dark);
    font-family: 'Michroma', sans-serif;
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 10px;
}

.btn-submit:hover {
    box-shadow: 0 5px 25px rgba(184, 115, 74, 0.4);
    transform: translateY(-2px);
}

/* Success Modal */
.modal-success { text-align: center; }

.success-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 25px;
    border: 2px solid var(--accent-teal);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.success-icon svg {
    width: 40px;
    height: 40px;
    fill: var(--accent-teal);
}

.success-title {
    font-family: 'Michroma', sans-serif;
    font-size: 1rem;
    margin-bottom: 12px;
    color: var(--text-primary);
    letter-spacing: 1px;
}

.success-message {
    color: #b8c5d1;
    font-size: 0.95rem;
    margin-bottom: 25px;
    line-height: 1.7;
}

.join-team-message {
    margin-bottom: 25px;
    text-align: center;
}

.join-team-title {
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 12px;
    line-height: 1.5;
}

.join-team-subtitle {
    color: rgba(184, 197, 209, 0.6);
    font-size: 0.85rem;
    line-height: 1.6;
    margin: 0;
}

.social-follow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-top: 25px;
    padding-top: 25px;
    border-top: 1px solid var(--border-subtle);
}

.social-follow span {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 1px;
    filter: brightness(1.3);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

/* 中文版：加大"立即组队"按钮文字 */
html:lang(zh) .modal-success .btn-submit {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
}

/* 中文版弹窗中所有按钮的字体大小和加粗程度参考"立即组队"按钮 */
html:lang(zh) .modal .btn-submit,
html:lang(zh) .modal .btn-confirm,
html:lang(zh) .modal .btn-copy,
html:lang(zh) .modal .btn-next {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
}

/* 微信二维码弹窗样式 */
.wechat-qrcode-modal-content {
    position: relative;
    width: 100%;
    max-width: 280px;
    margin: 0 auto 25px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(13, 17, 23, 0.98) 0%, rgba(8, 10, 14, 0.99) 100%);
    border: 2px solid rgba(212, 168, 85, 0.4);
    box-shadow: 0 0 20px rgba(212, 168, 85, 0.15);
}

.wechat-qrcode-modal-content .qrcode-corner {
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid var(--accent-amber);
    transition: all 0.3s ease;
}

.wechat-qrcode-modal-content .qrcode-corner.top-left {
    top: -2px;
    left: -2px;
    border-right: none;
    border-bottom: none;
}

.wechat-qrcode-modal-content .qrcode-corner.top-right {
    top: -2px;
    right: -2px;
    border-left: none;
    border-bottom: none;
}

.wechat-qrcode-modal-content .qrcode-corner.bottom-left {
    bottom: -2px;
    left: -2px;
    border-right: none;
    border-top: none;
}

.wechat-qrcode-modal-content .qrcode-corner.bottom-right {
    bottom: -2px;
    right: -2px;
    border-left: none;
    border-top: none;
}

.wechat-qrcode-modal-content:hover .qrcode-corner {
    width: 16px;
    height: 16px;
    box-shadow: 0 0 10px rgba(212, 168, 85, 0.6);
}

.wechat-qrcode-modal-content .qrcode-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.wechat-qrcode-modal-content .qrcode-placeholder {
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(212, 168, 85, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.wechat-qrcode-modal-content .qrcode-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    padding: 8px;
    box-sizing: border-box;
}

.wechat-qrcode-modal-content .qrcode-fallback {
    color: rgba(212, 168, 85, 0.6);
    font-size: 14px;
    text-align: center;
    padding: 10px;
    display: none;
}

.wechat-qrcode-modal-content .qrcode-image[src=""] ~ .qrcode-fallback,
.wechat-qrcode-modal-content .qrcode-image:not([src]) ~ .qrcode-fallback {
    display: block;
}

.wechat-qrcode-modal-content .qrcode-text {
    color: var(--accent-amber);
    font-size: 15px;
    font-family: 'Exo 2', sans-serif;
    font-weight: 500;
    letter-spacing: 1px;
    margin: 0;
    text-align: center;
    line-height: 1.5;
}

.wechat-qrcode-modal-content .qrcode-text-line1,
.wechat-qrcode-modal-content .qrcode-text-line2 {
    display: block;
    text-align: center;
}

.wechat-qrcode-modal-content .qrcode-text-line1 {
    margin-bottom: 4px;
    font-weight: 600;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .wechat-qrcode-modal-content {
        max-width: 240px;
        padding: 20px;
    }
    
    .wechat-qrcode-modal-content .qrcode-placeholder {
        width: 160px;
        height: 160px;
    }
    
    .wechat-qrcode-modal-content .qrcode-text {
        font-size: 13px;
    }
}

.social-icons {
    display: flex;
    gap: 15px;
}

.social-icons a {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    color: var(--text-primary);
    transition: all 0.3s ease;
}

.social-icons a svg {
    width: 24px;
    height: 24px;
}

/* 确保弹窗内社媒图标路径颜色跟随父级 color 变化 */
.social-icons a svg path {
    fill: currentColor !important;
}

/* 抖音 */
.social-icons a:nth-child(1):hover {
    background: #000000;
    border-color: #FFFFFF;
    color: #FFFFFF;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

/* TapTap */
.social-icons a:nth-child(2):hover {
    background: #00BCD4;
    border-color: #00BCD4;
    color: #ffffff;
    box-shadow: 0 0 20px rgba(0, 188, 212, 0.5);
}

/* Bilibili */
.social-icons a:nth-child(3):hover {
    background: #E4405F;
    border-color: #E4405F;
    color: #ffffff;
    box-shadow: 0 0 20px rgba(228, 64, 95, 0.5);
}

/* 微信公众号 */
.social-icons a:nth-child(4):hover {
    background: #07C160;
    border-color: #07C160;
    color: #ffffff;
    box-shadow: 0 0 20px rgba(7, 193, 96, 0.5);
}

/* 小红书 */
.social-icons a:nth-child(5):hover {
    background: #FF0000;
    border-color: #FF0000;
    color: #ffffff;
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.5);
}

/* 微博 */
.social-icons a:nth-child(6):hover {
    background: #FF6600;
    border-color: #FF6600;
    color: #ffffff;
    box-shadow: 0 0 20px rgba(255, 102, 0, 0.5);
}

/* Avatar Selection */
.avatar-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
    margin-bottom: 30px;
    max-width: 100%;
    padding: 10px 0;
    justify-items: center;
}

.avatar-option {
    aspect-ratio: 0.7;
    border: 2px solid var(--border-subtle);
    background: rgba(0, 0, 0, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    border-radius: 8px;
    width: 100%;
    max-width: 140px;
    min-height: 200px;
}

.avatar-option:hover {
    border-color: var(--accent-copper);
    box-shadow: 0 0 15px rgba(184, 115, 74, 0.3);
    transform: translateY(-3px);
}

.avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.3s ease;
    z-index: 1;
}

.avatar-option:hover .avatar-image {
    transform: scale(1.05);
    filter: brightness(1.1);
}

.avatar-placeholder {
    font-size: 2.5rem;
    opacity: 0.7;
    position: relative;
    z-index: 0;
    display: none;
}

/* 当图片存在时隐藏placeholder */
.avatar-option:has(.avatar-image[src]:not([src=""])) .avatar-placeholder {
    display: none;
}

/* 当图片不存在时显示placeholder */
.avatar-option:not(:has(.avatar-image[src]:not([src=""]))) .avatar-placeholder {
    display: block;
}

.avatar-option:hover { border-color: var(--accent-copper); }

.avatar-option.selected {
    border-color: var(--accent-amber);
    border-width: 3px;
    box-shadow: 
        0 0 30px rgba(212, 168, 85, 0.5),
        0 0 60px rgba(184, 115, 74, 0.3),
        inset 0 0 20px rgba(212, 168, 85, 0.1);
    transform: scale(1.05);
}

.avatar-option.selected::after {
    content: '✓';
    position: absolute;
    top: 5px;
    right: 5px;
    width: 24px;
    height: 24px;
    background: var(--accent-copper);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: bold;
    z-index: 10;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(184, 115, 74, 0.5);
}

/* Avatar Error Message */
.avatar-error-msg {
    display: none;
    text-align: center;
    color: #ff6b6b;
    background: rgba(255, 107, 107, 0.1);
    border: 1px solid rgba(255, 107, 107, 0.3);
    padding: 12px 20px;
    margin-bottom: 15px;
    border-radius: 4px;
    font-size: 0.95rem;
    animation: errorShake 0.5s ease;
}

@keyframes errorShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* Avatar Grid Responsive */
@media (max-width: 900px) {
    .modal-avatar {
        max-width: 700px;
    }
    
    .avatar-option {
        max-width: 120px;
        min-height: 170px;
    }
}

@media (max-width: 767px) {
    .modal-overlay {
        align-items: flex-start;
        padding: 12px;
    }

    .modal {
        width: 100%;
        max-width: none;
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
    }

    .modal-header {
        padding: 18px 22px 10px;
    }

    .modal-body {
        padding: 22px;
    }

    .modal-close {
        top: max(10px, env(safe-area-inset-top));
        right: 10px;
        width: 40px;
        height: 40px;
    }

    .modal-avatar {
        max-width: 95%;
        width: 95%;
    }
    
    .modal-title {
        white-space: nowrap !important;
        font-size: clamp(0.6rem, 1.2vw, 0.85rem) !important;
        letter-spacing: clamp(1px, 0.5vw, 3px) !important;
        overflow: hidden !important;
    }
    
    .avatar-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 8px;
        padding: 0;
    }
    
    .avatar-option {
        max-width: 100%;
        min-height: 120px;
        aspect-ratio: 0.7;
    }
}

@media (max-width: 480px) {
    .modal-overlay {
        padding: 8px;
    }

    .modal {
        max-height: calc(100vh - 16px);
        max-height: calc(100dvh - 16px);
    }

    .modal-header {
        padding: 16px 18px 8px;
    }

    .modal-body {
        padding: 18px;
    }

    .modal-avatar {
        max-width: 98%;
        width: 98%;
    }
    
    .modal-title {
        white-space: nowrap !important;
        font-size: clamp(0.55rem, 1.1vw, 0.75rem) !important;
        letter-spacing: clamp(0.8px, 0.4vw, 2px) !important;
        overflow: hidden !important;
    }
    
    .avatar-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 6px;
    }
    
    .avatar-option {
        min-height: 100px;
        aspect-ratio: 0.7;
    }
}

@media (max-width: 390px), (max-width: 430px) and (max-height: 760px) {
    #loginModal .modal,
    #preregisterModal .modal {
        width: min(100%, 344px);
        max-height: calc(100vh - 8px);
        max-height: calc(100dvh - 8px);
    }

    #loginModal .modal-header,
    #preregisterModal .modal-header {
        padding: 8px 50px 4px 14px;
    }

    #loginModal .modal-logo-img,
    #preregisterModal .modal-logo-img {
        height: 92px;
        margin-bottom: -24px;
    }

    #loginModal .modal-title,
    #preregisterModal .modal-title {
        font-size: 0.68rem !important;
        letter-spacing: 1.1px !important;
        line-height: 1.25;
    }

    #loginModal .modal-close,
    #preregisterModal .modal-close {
        top: max(6px, env(safe-area-inset-top));
        right: 6px;
        width: 34px;
        height: 34px;
        font-size: 0.9rem;
        z-index: 4;
    }

    #loginModal .modal-body,
    #preregisterModal .modal-body {
        padding: 12px 14px 14px;
    }

    #loginModal .form-group,
    #preregisterModal .form-group {
        margin-bottom: 10px;
    }

    #loginModal .form-label,
    #preregisterModal .form-label {
        margin-bottom: 6px;
        font-size: 0.75rem;
        letter-spacing: 0.45px;
    }

    #loginModal .form-input,
    #preregisterModal .form-input {
        padding: 11px 12px;
        font-size: 0.88rem;
    }

    #loginModal .form-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        align-items: stretch;
    }

    #loginModal .btn-send-code {
        min-width: 78px;
        padding: 11px 12px;
        font-size: 0.76rem;
    }

    #loginModal .checkbox-group,
    #preregisterModal .checkbox-group {
        gap: 8px;
        margin-bottom: 6px;
    }

    #loginModal .checkbox-group.sub,
    #preregisterModal .checkbox-group.sub {
        margin-left: 16px;
        margin-bottom: 5px;
    }

    #loginModal .checkbox-group label,
    #preregisterModal .checkbox-group label {
        font-size: 0.74rem;
        line-height: 1.3;
    }

    #preregisterModal .platform-select {
        gap: 8px;
    }

    #preregisterModal .platform-btn {
        padding: 11px 9px;
        font-size: 0.78rem;
        gap: 5px;
    }

    #loginModal .btn-submit,
    #preregisterModal .btn-submit {
        margin-top: 4px;
        padding: 12px 13px;
        font-size: 0.71rem;
        letter-spacing: 1.2px;
    }
}

.selected-avatar {
    width: 120px;
    height: 120px;
    margin: 0 auto 30px;
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid var(--accent-copper);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    overflow: hidden;
    position: relative;
}

.selected-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Confirm Buttons */
.confirm-buttons {
    display: flex;
    gap: 15px;
}

.btn-confirm {
    flex: 1;
    padding: 14px;
    font-family: 'Exo 2', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 1px;
}

.btn-confirm.primary {
    background: var(--accent-copper);
    border: none;
    color: var(--primary-dark);
}

.btn-confirm.secondary {
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: #b8c5d1;
}

.btn-confirm.primary:hover { box-shadow: 0 5px 20px rgba(184, 115, 74, 0.3); }
.btn-confirm.secondary:hover {
    border-color: var(--accent-copper);
    color: var(--accent-copper);
}

/* Copy Link */
.copy-link-box {
    display: flex;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--border-subtle);
    margin-bottom: 20px;
}

.copy-link-box input {
    flex: 1;
    padding: 14px;
    background: transparent;
    border: none;
    color: #b8c5d1;
    font-size: 0.85rem;
    font-family: 'Exo 2', sans-serif;
}

.copy-link-box input:focus { outline: none; }

.btn-copy {
    padding: 14px 24px;
    background: var(--accent-teal);
    border: none;
    color: var(--text-primary);
    font-family: 'Exo 2', sans-serif;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-copy:hover { background: #1f6b6b; }

.rules-content {
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 25px;
    background: linear-gradient(135deg, rgba(13, 17, 23, 0.9) 0%, rgba(8, 10, 14, 0.95) 100%);
    border: 2px solid rgba(212, 168, 85, 0.5);
    margin-bottom: 20px;
    color: #b8c5d1;
    font-size: 0.9rem;
    line-height: 1.8;
    position: relative;
    word-break: break-word;
    overflow-wrap: anywhere;
    scrollbar-gutter: stable;
    box-shadow: 
        0 0 20px rgba(212, 168, 85, 0.1),
        inset 0 0 40px rgba(0, 0, 0, 0.4);
}

.rules-content p,
.rules-content li,
.rules-content a,
.rules-content div {
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Rules 文本框四角装饰 */
.rules-content::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    width: 20px;
    height: 20px;
    border: 2px solid var(--accent-amber);
    border-right: none;
    border-bottom: none;
    pointer-events: none;
    box-shadow: -2px -2px 8px rgba(212, 168, 85, 0.3);
}

.rules-content::after {
    content: '';
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 20px;
    height: 20px;
    border: 2px solid var(--accent-amber);
    border-left: none;
    border-top: none;
    pointer-events: none;
    box-shadow: 2px 2px 8px rgba(212, 168, 85, 0.3);
}

/* Rules 文本框另外两角装饰 */
.rules-corner {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid var(--accent-amber);
    pointer-events: none;
    z-index: 10;
}

.rules-corner.top-right {
    top: -2px;
    right: -2px;
    border-left: none;
    border-bottom: none;
    box-shadow: 2px -2px 8px rgba(212, 168, 85, 0.3);
}

.rules-corner.bottom-left {
    bottom: -2px;
    left: -2px;
    border-right: none;
    border-top: none;
    box-shadow: -2px 2px 8px rgba(212, 168, 85, 0.3);
}

/* Video Modal */
.video-modal-overlay {
    background: rgba(0, 0, 0, 0.95);
}

.video-modal {
    position: relative;
    width: 90%;
    max-width: 1200px;
    aspect-ratio: 16 / 9;
    background: #000;
    border: 1px solid var(--border-subtle);
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
}

.video-modal .video-close {
    position: absolute;
    top: -50px;
    right: 0;
    z-index: 10;
}

.trailer-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

.trailer-video::-webkit-media-controls-panel {
    background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, transparent 100%);
}

/* Responsive */
@media (max-width: 1024px) {
    .team-grid { grid-template-columns: repeat(3, 1fr); }
    .milestone-section { grid-template-columns: 1fr; }
    .reward-section { flex-direction: column; }
    
    /* iPad导航栏 - 同步移动端设定 */
    nav { 
        padding: 0 15px; 
        display: flex;
        align-items: center;
        justify-content: flex-start;
        height: 60px;
    }
    
    .logo {
        margin-left: 0;
        flex-shrink: 0;
    }
    
    .logo img {
        height: 80px;
        max-height: 80px;
    }
    
    .nav-links { display: none; }
    
    .nav-right {
        display: flex;
        align-items: center;
        gap: 5px;
        margin-left: auto;
        margin-right: 5px;
        flex-shrink: 0;
    }
    
    .nav-right .lang-selector-wrapper { display: none; }
    
    .btn-preregister-nav {
        padding: 8px 16px;
        font-size: 0.65rem;
        letter-spacing: 1px;
    }
    
    /* 中文版移动端导航栏按钮文字缩小 */
    html:lang(zh) .btn-preregister-nav {
        font-size: 1rem;
        letter-spacing: 2px;
    }
    
    .btn-login {
        padding: 8px 16px;
        font-size: 0.65rem;
        font-weight: 700;
    }
    
    /* 英语版移动端导航栏登录按钮字体加粗，与预约按钮一致 */
    html:lang(en) .btn-login,
    html:not(:lang(zh)) .btn-login {
        font-weight: 700;
    }
    
    /* 中文版移动端导航栏登录按钮文字缩小 */
    html:lang(zh) .btn-login {
        font-size: 1rem;
        letter-spacing: 2px;
    }
    
    .mobile-menu-btn { 
        display: flex; 
        margin-left: 0;
        flex-shrink: 0;
    }
    
    .mobile-menu-overlay { 
        display: none; 
    }
    
    .mobile-menu-overlay.active { 
        display: block; 
    }
    
    /* 社交链接 - iPad端右对齐 */
    .social-links { 
        right: 10px; 
        gap: 10px;
        align-items: flex-end; /* iPad端右对齐 */
    }
    
    .social-links a { width: 44px; height: 44px; }
    
    .social-links svg { width: 20px; height: 20px; }
    
    .social-links::before, .social-links::after { display: none; }
    
    /* iPad端隐藏微信logo */
    .social-links .wechat-link {
        display: none;
    }
    
    /* iPad端二维码框：使用PC端样式，右对齐 */
    .wechat-qrcode-box {
        position: relative;
        width: 160px;
        padding: 16px;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        display: block;
        align-self: flex-end; /* 确保二维码框右对齐 */
    }
    
    /* iPad端二维码框内部元素使用PC端尺寸 */
    .wechat-qrcode-box .qrcode-placeholder {
        width: 128px;
        height: 128px;
    }
    
    .wechat-qrcode-box .qrcode-text {
        font-size: 13px;
    }
    
    .hero-arrow { display: none; }
    
    /* 隐藏首页标语文字 */
    .hero-subtitle {
        display: none !important;
    }
    
    /* 首页Logo设定 - 同步移动端 */
    .hero-logo-wrapper { 
        max-width: 85%; 
        margin-bottom: -80px; 
    }
    
    .hero-logo { 
        clip-path: inset(0 0 30% 0); 
        width: 100%;
        height: auto;
    }
    
    .hero-logo-text { 
        font-size: 2.5rem; 
        letter-spacing: 2px; 
        margin-bottom: 10px; 
    }
    
    /* 播放按钮设定 - 同步移动端 */
    .play-button { 
        width: 60px; 
        height: 60px; 
        margin: 15px 0;
        z-index: 100;
        pointer-events: auto;
    }
    
    .play-button::before { width: 80px; height: 80px; }
    .play-button::after { width: 80px; height: 80px; }
    .play-button svg { width: 24px; height: 24px; }
    
    .hero-content {
        gap: 20px;
    }
    
    /* iPad端：PARALLVERSE 标题尺寸与 FRIEND RALLY 标题一致 */
    #parallverseTitle.decode-title {
        font-size: clamp(2rem, 4.5vw, 3.2rem) !important;
        letter-spacing: clamp(4px, 1.2vw, 10px) !important;
        white-space: nowrap !important;
        overflow: visible !important;
    }
    html:lang(zh) #parallverseTitle.decode-title {
        padding-bottom: 10px !important;
        margin-bottom: 10px !important;
    }

    /* 隐藏PARALLVERSE页面的扫描特效和解码特效 */
    .world-section .scan-line {
        display: none !important;
    }
    .decode-title::before,
    .decode-title::after {
        display: none !important;
        content: none !important;
    }
    /* 彻底关闭乱码效果，直接显示最终文字 */
    .decode-char {
        animation: none !important;
        color: var(--text-primary) !important;
        text-shadow: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .decode-char.scrambled,
    .decode-char.scanning {
        animation: none !important;
        color: var(--text-primary) !important;
        text-shadow: none !important;
        opacity: 1 !important;
    }
    .decode-char::before,
    .decode-char::after {
        display: none !important;
        content: none !important;
    }
    .decode-char.decoded {
        animation: none !important;
    }
    .decode-title.scan-active::before,
    .decode-title.scan-active::after {
        display: none !important;
        content: none !important;
    }
    .decode-title.decode-complete {
        animation: none !important;
    }
    .decode-title.decode-complete .decode-char {
        animation: none !important;
    }
    /* 隐藏轮播指示器 */
    .world-indicators {
        display: none !important;
    }
    /* 隐藏frame-data */
    .frame-data-top,
    .frame-data-bottom {
        display: none !important;
    }
    /* 隐藏平行世界页面图片框上的文字 */
    .world-card-overlay {
        display: none !important;
    }
    
    /* 悬浮窗设定为hover状态 - iPad端 */
    .floating-event-banner {
        transform: translateY(-50%) translateX(5px);
    }
    
    .floating-event-banner .floating-event-content {
        border-color: #ffd93d !important;
        background: linear-gradient(135deg, rgba(30, 20, 10, 0.98) 0%, rgba(20, 12, 5, 0.98) 100%) !important;
        box-shadow: 
            0 8px 40px rgba(0, 0, 0, 0.7),
            0 0 60px rgba(255, 217, 61, 0.5),
            0 0 100px rgba(212, 168, 85, 0.3),
            inset 0 0 40px rgba(255, 217, 61, 0.15) !important;
        transform: scale(1.02) !important;
        padding: 12px 18px 12px 14px !important;
        gap: 10px !important;
        justify-content: flex-start !important;
    }
    
    .floating-event-banner .floating-event-gift {
        width: 40px !important;
        opacity: 1 !important;
        transform: scale(1) rotate(0deg) !important;
        border-color: rgba(255, 255, 255, 0.9) !important;
        animation: giftPop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards,
                   giftPulse 2s ease-in-out 0.6s infinite !important;
    }
    
    .floating-event-banner .floating-event-gift::before {
        animation: giftGlow 1.5s linear infinite !important;
        opacity: 0.8 !important;
    }
    
    .floating-event-banner .floating-event-gift svg {
        animation: giftIconShake 1.5s ease-in-out 0.6s infinite !important;
    }
    
    .floating-event-banner .floating-event-title {
        font-size: 0.6rem !important;
        letter-spacing: 1.5px !important;
        color: var(--accent-amber) !important;
        text-shadow: 0 0 15px rgba(212, 168, 85, 0.6) !important;
    }
    
    .floating-event-banner .floating-event-subtitle {
        font-size: 0.6rem !important;
        letter-spacing: 0.8px !important;
        color: #ffd93d !important;
        text-shadow: 0 0 10px rgba(255, 217, 61, 0.5) !important;
    }
    
    .floating-event-banner .floating-event-arrow svg {
        animation: none !important;
        transform: translateX(6px) !important;
    }
    
    /* 其他首页相关设定 - 同步移动端 */
    .event-banner { padding: 30px 20px; }
    .team-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-content { flex-direction: column; text-align: center; }
    
    /* FRIEND RALLY标题在iPad端保持一行 */
    .event-main-header {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 20px;
        flex-wrap: wrap;
    }
    html:lang(zh) .event-main-header {
        width: 100%;
        max-width: 100vw;
        overflow-x: visible;
        padding: 0 10px;
    }
    .event-main-title {
        display: inline-block;
        text-align: center;
        white-space: nowrap !important;
        margin-bottom: 0;
    }
    .event-title-line1,
    .event-title-line2 {
        display: inline;
        font-size: clamp(2rem, 4.5vw, 3.2rem) !important;
        letter-spacing: clamp(4px, 1.2vw, 10px) !important;
        white-space: nowrap !important;
    }
    .event-title-line1::after {
        content: ' ';
    }
    .btn-rules-tech {
        margin-top: 0 !important;
        align-self: center;
        padding: clamp(12px, 2.2vw, 16px) clamp(24px, 4.5vw, 32px) !important;
        font-size: clamp(0.8rem, 2.2vw, 1rem) !important;
        letter-spacing: clamp(1.5px, 0.6vw, 2.5px) !important;
        gap: clamp(8px, 1.8vw, 12px) !important;
    }
    .btn-rules-tech svg {
        width: clamp(14px, 3vw, 18px) !important;
        height: clamp(14px, 3vw, 18px) !important;
    }
    .btn-rules-tech .btn-corner {
        width: clamp(7px, 1.8vw, 10px) !important;
        height: clamp(7px, 1.8vw, 10px) !important;
    }
    
    /* YOUR SQUAD标题在iPad端保持一行并随页面收缩 */
    .event-squad-section .section-block-title {
        font-size: clamp(1.2rem, 2.5vw, 1.88rem) !important;
        letter-spacing: clamp(2px, 0.8vw, 6px) !important;
        white-space: nowrap !important;
    }
    
    /* SQUAD MISSION标题在iPad端保持一行并随页面收缩 */
    .section-block-title {
        white-space: nowrap !important;
        font-size: clamp(1rem, 2vw, 1.4rem) !important;
        letter-spacing: clamp(2px, 0.6vw, 3px) !important;
        overflow: hidden !important;
    }
    
    /* YOUR SQUAD描述文字在iPad端保持一行并随页面收缩 - 与Draw chances文字大小一致 */
    .event-squad-section .section-block-desc {
        font-size: clamp(0.7rem, 1.2vw, 0.95rem) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
    }
    
    /* 任务框之间的间距在iPad端缩短为10px */
    .milestone-flow-container {
        gap: 10px !important;
    }
    
    /* Draw chances文字在iPad端保持一行并随页面收缩 */
    .milestone-description {
        padding-bottom: clamp(10px, 2vw, 20px) !important;
    }
    
    .milestone-description p {
        white-space: nowrap !important;
        font-size: clamp(0.7rem, 1.2vw, 0.95rem) !important;
        overflow: hidden !important;
    }
    
    /* 确保squad-notice和lottery-info-text在iPad端与milestone-description的底部距离一致 */
    .event-squad-section .squad-notice {
        padding-bottom: clamp(10px, 2vw, 20px) !important;
    }
    
    .lottery-info-text {
        padding-bottom: clamp(10px, 2vw, 20px) !important;
    }
    
    /* 135数字圆圈在iPad端缩放 */
    .milestone-number {
        width: clamp(32px, 3.5vw, 38px) !important;
        height: clamp(32px, 3.5vw, 38px) !important;
        font-size: clamp(1.1rem, 2vw, 1.3rem) !important;
        border-width: clamp(1.5px, 0.2vw, 2px) !important;
    }
    
    /* 任务框文字在iPad端保持一行并随页面收缩 - 放大字体 */
    .milestone-title {
        white-space: nowrap !important;
        font-size: clamp(0.9rem, 1.5vw, 1.2rem) !important;
        overflow: hidden !important;
    }
    
    .reward-text {
        white-space: nowrap !important;
        font-size: clamp(0.85rem, 1.4vw, 1.1rem) !important;
        overflow: hidden !important;
    }
    
    .milestone-pack-box .pack-name {
        white-space: nowrap !important;
        font-size: clamp(0.9rem, 1.4vw, 1.2em) !important;
        overflow: hidden !important;
    }
    
    .milestone-pack-box .pack-content {
        white-space: nowrap !important;
        font-size: clamp(0.8rem, 1.3vw, 1em) !important;
        overflow: hidden !important;
    }
    
    /* 礼包框在iPad端降低高度一倍 */
    .milestone-pack-box {
        aspect-ratio: 8 / 1 !important;
        padding: clamp(0.35em, 0.7vw, 0.75em) !important;
        padding-bottom: clamp(0.6em, 1.2vw, 1.4em) !important;
    }
    
    /* 其他礼包框文字在iPad端保持一行并随页面收缩 - 放大字体 */
    .pack-box .pack-name {
        white-space: nowrap !important;
        font-size: clamp(0.9rem, 1.4vw, 1.2rem) !important;
        overflow: hidden !important;
    }
    
    .pack-box .pack-content {
        white-space: nowrap !important;
        font-size: clamp(0.8rem, 1.3vw, 1rem) !important;
        overflow: hidden !important;
    }
    
    .pack-name {
        white-space: nowrap !important;
        font-size: clamp(0.75rem, 1.3vw, 0.85rem) !important;
        overflow: hidden !important;
    }
    
    .pack-content {
        white-space: nowrap !important;
        font-size: clamp(0.75rem, 1.2vw, 0.95rem) !important;
        overflow: hidden !important;
    }
    
    /* Lucky Draw文字在iPad端保持一行并随页面收缩 */
    .lottery-info-text {
        white-space: nowrap !important;
        font-size: clamp(0.7rem, 1.2vw, 0.95rem) !important;
        overflow: hidden !important;
        padding-bottom: clamp(10px, 2vw, 20px) !important;
    }
    
    /* Draw coming soon按钮在iPad端保持一行并随页面收缩 */
    .btn-draw-coming-soon {
        white-space: nowrap !important;
        font-size: clamp(0.75rem, 1.3vw, 1rem) !important;
        letter-spacing: clamp(1px, 0.4vw, 2px) !important;
        padding: clamp(12px, 2.5vw, 15px) clamp(20px, 4vw, 30px) !important;
    }
    
    /* 确保标题和形象框之间的间距 - iPad端 */
    .event-squad-section .section-block-header {
        margin-bottom: clamp(20px, 4vw, 40px) !important;
    }
    
    /* 确保形象框和底部文字之间的间距 - iPad端 */
    .event-squad-section .squad-notice {
        margin-top: clamp(20px, 4vw, 40px) !important;
        white-space: nowrap !important;
        font-size: clamp(0.7rem, 1.2vw, 0.95rem) !important;
        overflow: hidden !important;
        color: #ffffff !important;
        line-height: 1.5 !important;
        letter-spacing: 0.5px !important;
        padding-bottom: clamp(10px, 2vw, 20px) !important;
    }
    
    /* YOUR SQUAD形象框强制在一排并等比收缩 - iPad端 */
    .event-squad-section .squad-members-row {
        flex-wrap: nowrap !important;
        gap: clamp(4px, 1vw, 12px) !important;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    .event-squad-section .squad-member-card {
        flex: 0 0 auto !important;
        width: clamp(80px, 15vw, 160px) !important;
        min-width: 0 !important;
        padding: clamp(6px, 1.2vw, 12px) !important;
    }
    
    .event-squad-section .member-avatar-box {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 0.8125 !important; /* 260/320 = 0.8125 */
        margin: 0 auto !important;
    }
    
    .event-squad-section .member-avatar-fallback {
        font-size: clamp(1.5rem, 4vw, 3.5rem) !important;
    }
    
    .event-squad-section .squad-member-card.leader .member-avatar-fallback {
        font-size: clamp(1.7rem, 4.5vw, 4rem) !important;
    }
    
    /* Login/Sign up文字在iPad端缩小以确保完整显示 */
    .event-squad-section .login-center-text {
        font-size: clamp(0.5rem, 1.2vw, 0.85rem) !important;
        letter-spacing: clamp(0.5px, 0.3vw, 1.5px) !important;
        white-space: normal !important;
        line-height: 1.2 !important;
        padding: 0 clamp(2px, 0.5vw, 5px) !important;
        word-break: break-word !important;
    }
    
    /* 移除形象框外层边框和背景，只保留照片框 - iPad端 */
    .event-squad-section .squad-member-card {
        border: none !important;
        background: transparent !important;
        padding: clamp(6px, 1.2vw, 12px) !important;
        box-shadow: none !important;
    }
    
    /* 隐藏除照片框外的其他元素 - iPad端 */
    .event-squad-section .squad-member-card .member-label,
    .event-squad-section .squad-member-card .login-hover-text,
    .event-squad-section .squad-member-card .invite-hover-text {
        display: none !important;
    }
    
    /* 隐藏形象框hover效果 - iPad端 */
    .event-squad-section .squad-member-card:hover {
        border-color: var(--border-subtle) !important;
        transform: none !important;
        box-shadow: none !important;
    }
    
    .event-squad-section .squad-member-card.login-button-card:hover {
        border-color: var(--accent-amber) !important;
        box-shadow: 0 0 25px rgba(212, 168, 85, 0.3) !important;
        transform: none !important;
    }
    
    .event-squad-section .squad-member-card.login-button-card:hover .login-hover-text {
        opacity: 0 !important;
    }
    
    .event-squad-section .squad-member-card.login-button-card:hover .member-avatar-fallback {
        opacity: 0.5 !important;
        transform: none !important;
    }
    
    .event-squad-section .squad-member-card.login-button-card:hover .member-avatar-box {
        background: linear-gradient(180deg, rgba(60, 50, 50, 0.6) 0%, rgba(30, 25, 25, 0.8) 100%) !important;
        border-color: rgba(184, 115, 74, 0.3) !important;
        box-shadow: none !important;
    }
    
    .event-squad-section .squad-member-card.empty:hover {
        opacity: 0.7 !important;
    }
    
    /* 带+号的邀请框常驻显示绿色边框效果 - iPad端 */
    .event-squad-section .squad-member-card.empty.invite-button-card {
        border: 1px solid var(--accent-teal) !important;
        box-shadow: 0 0 25px rgba(26, 92, 92, 0.4) !important;
    }
    
    /* iPad端抽奖奖品图片优化 - 放大图片并移除棕色边框 */
    .prize-cell {
        border: none !important;
        background: transparent !important;
        padding: 0 !important;
    }
    
    .prize-cell::before {
        display: none !important;
    }
    
    .prize-cell:hover {
        border: none !important;
        box-shadow: none !important;
        transform: none !important;
    }
    
    .prize-image-placeholder {
        width: 100% !important;
        max-width: none !important;
        aspect-ratio: 1 / 1 !important;
    }
    
    .prize-cell.prize-large .prize-image-placeholder {
        width: 100% !important;
        max-width: none !important;
        aspect-ratio: 1 / 1 !important;
    }
    
    .prize-cell.prize-medium .prize-image-placeholder {
        width: 100% !important;
        max-width: none !important;
        aspect-ratio: 1 / 1 !important;
    }
    
    .prize-cell.prize-small .prize-image-placeholder {
        width: 100% !important;
        max-width: none !important;
        aspect-ratio: 1 / 1 !important;
    }
    
    .prize-cell.grand .prize-image-placeholder {
        width: 100% !important;
        max-width: none !important;
        aspect-ratio: 1 / 1 !important;
    }
    
    .prize-cell.featured {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }
    
    .prize-cell.featured::before {
        display: none !important;
    }
    
    .prize-cell-inner {
        padding: 0 !important;
        gap: clamp(3px, 0.8vw, 6px) !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: space-between !important;
        height: 100% !important;
        width: 100% !important;
    }
    
    .prize-image-placeholder {
        flex-shrink: 1 !important;
        flex-grow: 1 !important;
        min-height: 0 !important;
        transform: scale(0.8) !important;
    }
    
    .prize-cell.prize-large .prize-image-placeholder,
    .prize-cell.prize-medium .prize-image-placeholder,
    .prize-cell.prize-small .prize-image-placeholder,
    .prize-cell.grand .prize-image-placeholder {
        flex-shrink: 1 !important;
        flex-grow: 1 !important;
        min-height: 0 !important;
        transform: scale(0.8) !important;
    }
    
    .prize-cell {
        aspect-ratio: 1 / 0.75 !important;
        padding: clamp(3px, 0.6vw, 6px) !important;
        min-height: 0 !important;
    }
    
    .prize-cell-name {
        display: block !important;
        font-size: clamp(0.55rem, 1.1vw, 0.7rem) !important;
        line-height: 1.15 !important;
        text-align: center !important;
        margin-top: clamp(3px, 0.6vw, 5px) !important;
        margin-bottom: 0 !important;
        padding: 0 clamp(2px, 0.5vw, 4px) !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
        color: var(--text-primary) !important;
        opacity: 0.9 !important;
        flex-shrink: 0 !important;
        max-height: 18% !important;
        overflow: hidden !important;
    }
    
    .event-squad-section .squad-member-card.empty.invite-button-card .member-avatar-box {
        background: linear-gradient(180deg, rgba(20, 50, 50, 0.8) 0%, rgba(10, 30, 30, 0.9) 100%) !important;
        border-color: var(--accent-teal) !important;
        box-shadow: inset 0 0 30px rgba(26, 92, 92, 0.2) !important;
    }
    
    .event-squad-section .squad-member-card.invite-button-card:hover {
        border-color: var(--accent-teal) !important;
        box-shadow: 0 0 25px rgba(26, 92, 92, 0.4) !important;
        transform: none !important;
    }
    
    .event-squad-section .squad-member-card.invite-button-card:hover .invite-hover-text {
        opacity: 0 !important;
    }
    
    .event-squad-section .squad-member-card.invite-button-card:hover .member-avatar-fallback {
        opacity: 0.3 !important;
        transform: scale(0.9) !important;
    }
    
    .event-squad-section .squad-member-card.invite-button-card:hover .member-avatar-box {
        background: linear-gradient(180deg, rgba(20, 50, 50, 0.8) 0%, rgba(10, 30, 30, 0.9) 100%) !important;
        border-color: var(--accent-teal) !important;
        box-shadow: inset 0 0 30px rgba(26, 92, 92, 0.2) !important;
    }
    
    .event-squad-section .squad-member-card.has-member:hover {
        border-color: var(--border-subtle) !important;
        box-shadow: none !important;
        transform: none !important;
    }
}

@media (max-width: 767px) {
    nav { 
        padding: 0 15px; 
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 60px;
    }
    .logo {
        margin-left: 0;
        flex-shrink: 0;
    }
    .logo img {
        height: 80px;
    }
    .nav-links { display: none; }
    .nav-right {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .nav-right .lang-selector-wrapper { display: none; }
    .btn-preregister-nav {
        padding: 8px 16px;
        font-size: 0.65rem;
        letter-spacing: 1px;
    }
    
    /* 中文版移动端导航栏按钮文字缩小 */
    html:lang(zh) .btn-preregister-nav {
        font-size: 1rem;
        letter-spacing: 2px;
    }
    
    .btn-login {
        padding: 8px 16px;
        font-size: 0.65rem;
        font-weight: 700;
    }
    
    /* 英语版移动端导航栏登录按钮字体加粗，与预约按钮一致 */
    html:lang(en) .btn-login,
    html:not(:lang(zh)) .btn-login {
        font-weight: 700;
    }
    
    /* 中文版移动端导航栏登录按钮文字缩小 */
    html:lang(zh) .btn-login {
        font-size: 1rem;
        letter-spacing: 2px;
    }
    
    .mobile-menu-btn { 
        display: flex; 
        margin-left: 10px;
    }
    .mobile-menu-overlay { 
        display: none; 
    }
    .mobile-menu-overlay.active { 
        display: block; 
    }
    .social-links { 
        right: 10px; 
        gap: 10px;
    }
    .social-links a { width: 44px; height: 44px; }
    .social-links svg { width: 20px; height: 20px; }
    .social-links::before, .social-links::after { display: none; }
    
    /* 移动端二维码框：默认隐藏，点击微信图标后在左侧显示 */
    .wechat-qrcode-box {
        position: fixed;
        right: 60px;
        top: 50%;
        transform: translateY(-50%);
        display: none;
        opacity: 0;
        visibility: hidden;
        z-index: 1002;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        width: 140px;
        padding: 12px;
    }
    
    .wechat-qrcode-box.active {
        display: block;
        opacity: 1;
        visibility: visible;
    }
    
    /* 移动端二维码框内部元素尺寸调整 */
    .wechat-qrcode-box .qrcode-placeholder {
        width: 110px;
        height: 110px;
    }
    
    .wechat-qrcode-box .qrcode-text {
        font-size: 11px;
    }
    
    .hero-arrow { display: none; }
    .event-banner { padding: 30px 20px; }
    .team-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-content { flex-direction: column; text-align: center; }
    .hero-logo-wrapper { 
        max-width: 85%; 
        margin-bottom: -80px; 
    }
    .hero-logo { 
        clip-path: inset(0 0 30% 0); 
        width: 100%;
        height: auto;
    }
    .hero-logo-text { 
        font-size: 2.5rem; 
        letter-spacing: 2px; 
        margin-bottom: 10px; 
    }
    .hero-subtitle { 
        margin-bottom: 18px;
        padding: 0 10px;
    }
    .hero-subtitle {
        display: none !important;
    }
    .section-title {
        font-size: clamp(1.2rem, 4.5vw, 1.8rem) !important;
        letter-spacing: clamp(2px, 1vw, 4px) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
    }
    .decode-title {
        font-size: clamp(1.8rem, 6.5vw, 2.8rem) !important;
        letter-spacing: clamp(3px, 1.3vw, 7px) !important;
        white-space: nowrap !important;
        overflow: visible !important;
    }
    html:lang(zh) .decode-title {
        padding-bottom: 10px !important;
        margin-bottom: 10px !important;
    }
    /* 隐藏PARALLVERSE页面的扫描特效和解码特效 */
    .world-section .scan-line {
        display: none !important;
    }
    .decode-title::before,
    .decode-title::after {
        display: none !important;
    }
    /* 彻底关闭乱码效果，直接显示最终文字 */
    .decode-char {
        animation: none !important;
        color: var(--text-primary) !important;
        text-shadow: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .decode-char.scrambled,
    .decode-char.scanning {
        animation: none !important;
        color: var(--text-primary) !important;
        text-shadow: none !important;
        opacity: 1 !important;
    }
    .decode-char::before,
    .decode-char::after {
        display: none !important;
        content: none !important;
    }
    .decode-title.scan-active::before,
    .decode-title.scan-active::after {
        display: none !important;
        content: none !important;
    }
    .decode-title.decode-complete {
        animation: none !important;
    }
    .decode-title.decode-complete .decode-char {
        animation: none !important;
    }
    /* 隐藏轮播指示器 */
    .world-indicators {
        display: none !important;
    }
    /* 隐藏frame-data */
    .frame-data-top,
    .frame-data-bottom {
        display: none !important;
    }
    .event-main-header {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    html:lang(zh) .event-main-header {
        width: 100%;
        max-width: 100vw;
        overflow-x: visible;
        padding: 0 10px;
    }
    .event-main-title {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        line-height: 1.2;
        margin-bottom: 0;
    }
    html:lang(zh) .event-main-title {
        display: inline-block !important;
        white-space: nowrap !important;
        width: 100%;
        max-width: 100vw;
        overflow-x: visible;
        min-width: 100%;
        margin-bottom: 15px !important;
    }
    .event-title-line1,
    .event-title-line2 {
        font-size: clamp(1.6rem, 5.5vw, 2.4rem) !important;
        letter-spacing: clamp(3px, 1.1vw, 6px) !important;
        white-space: nowrap !important;
        text-align: center;
    }
    html:lang(zh) .event-title-line1,
    html:lang(zh) .event-title-line2 {
        display: inline !important;
    }
    .event-title-line1 {
        margin-bottom: 0.2em;
    }
    html:lang(zh) .event-title-line1 {
        margin-bottom: 0 !important;
        margin-right: 0.2em;
    }
    html:lang(zh) .event-title-line1::after {
        content: ' ';
    }
    .btn-rules-tech {
        margin-top: 0 !important;
        align-self: center;
        padding: clamp(8px, 1.8vw, 12px) clamp(16px, 3.5vw, 24px) !important;
        font-size: clamp(0.65rem, 1.8vw, 0.8rem) !important;
        letter-spacing: clamp(0.5px, 0.4vw, 1.5px) !important;
        gap: clamp(5px, 1.2vw, 8px) !important;
    }
    
    /* YOUR SQUAD标题在移动端保持一行并随页面收缩 */
    .event-squad-section .section-block-title {
        font-size: clamp(1rem, 3vw, 1.5rem) !important;
        letter-spacing: clamp(2px, 0.6vw, 4px) !important;
        white-space: nowrap !important;
    }
    
    /* SQUAD MISSION标题在移动端保持一行并随页面收缩 */
    .section-block-title {
        white-space: nowrap !important;
        font-size: clamp(0.9rem, 1.8vw, 1.3rem) !important;
        letter-spacing: clamp(1.5px, 0.5vw, 2.5px) !important;
        overflow: hidden !important;
    }
    
    /* YOUR SQUAD描述文字在移动端保持一行并随页面收缩 - 与Draw chances文字大小一致 */
    .event-squad-section .section-block-desc {
        font-size: clamp(0.6rem, 1.1vw, 0.85rem) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
    }
    
    /* 任务框之间的间距在移动端缩短为10px */
    .milestone-flow-container {
        gap: 10px !important;
        margin-top: -20px !important;
    }
    
    /* Draw chances文字在移动端保持一行并随页面收缩 */
    .milestone-description {
        padding-bottom: clamp(8px, 1.5vw, 15px) !important;
    }
    
    .milestone-description p {
        white-space: nowrap !important;
        font-size: clamp(0.6rem, 1.1vw, 0.85rem) !important;
        overflow: hidden !important;
    }
    
    /* 确保squad-notice和lottery-info-text在移动端与milestone-description的底部距离一致 */
    .event-squad-section .squad-notice {
        padding-bottom: clamp(8px, 1.5vw, 15px) !important;
    }
    
    .lottery-info-text {
        padding-bottom: clamp(8px, 1.5vw, 15px) !important;
    }
    
    /* 135数字圆圈在移动端缩放 */
    .milestone-number {
        width: clamp(30px, 8vw, 36px) !important;
        height: clamp(30px, 8vw, 36px) !important;
        font-size: clamp(1rem, 2.5vw, 1.25rem) !important;
        border-width: clamp(1.5px, 0.4vw, 2px) !important;
    }
    
    /* 任务框文字在移动端保持一行并随页面收缩 */
    .milestone-title {
        white-space: nowrap !important;
        font-size: clamp(0.65rem, 1.2vw, 0.9rem) !important;
        overflow: hidden !important;
        margin-left: -5px !important;
    }
    
    .reward-text {
        white-space: nowrap !important;
        font-size: clamp(0.6rem, 1.1vw, 0.85rem) !important;
        overflow: hidden !important;
        margin-left: -5px !important;
    }
    
    .milestone-pack-box .pack-name {
        white-space: nowrap !important;
        font-size: clamp(0.65rem, 1.1vw, 0.9em) !important;
        overflow: hidden !important;
        margin-top: 10px !important;
        margin-left: -5px !important;
    }
    
    .milestone-pack-box .pack-content {
        white-space: nowrap !important;
        font-size: clamp(0.55rem, 1vw, 0.8em) !important;
        overflow: hidden !important;
        margin-top: 5px !important;
        margin-left: -5px !important;
    }
    
    /* Go Invite按钮在移动端缩小并定位到右上角 */
    .milestone-pack-box {
        position: relative !important;
        aspect-ratio: 4 / 1 !important;
        padding: 0.75em !important;
        padding-bottom: 1.4em !important;
        padding-right: clamp(8px, 2vw, 12px) !important;
    }
    
    .milestone-pack-box .btn-claim-pack {
        position: absolute !important;
        top: clamp(4px, 1vw, 8px) !important;
        right: clamp(4px, 1vw, 8px) !important;
        padding: clamp(0.2em, 0.6vw, 0.35em) clamp(0.4em, 1vw, 0.6em) !important;
        font-size: clamp(0.5rem, 0.9vw, 0.65em) !important;
        width: auto !important;
        min-width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        z-index: 10 !important;
    }
    
    /* 确保礼包框文字区域不会与按钮重叠，但文字可以完整显示 */
    .milestone-pack-box .pack-details {
        padding-right: clamp(60px, 16vw, 80px) !important;
        margin-right: 0 !important;
        overflow: visible !important;
        flex: 1 !important;
        min-width: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .milestone-pack-box .pack-name,
    .milestone-pack-box .pack-content {
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
        max-width: 100% !important;
    }
    
    /* 确保任务框内的完成勾选圆圈不出框 */
    .milestone-item {
        overflow: hidden !important;
        padding-right: clamp(10px, 2.5vw, 15px) !important;
    }
    
    .milestone-header {
        gap: clamp(10px, 2.5vw, 15px) !important;
    }
    
    .milestone-status {
        flex-shrink: 0 !important;
        width: clamp(22px, 5.5vw, 24px) !important;
        height: clamp(22px, 5.5vw, 24px) !important;
    }
    
    .status-icon {
        width: clamp(22px, 5.5vw, 24px) !important;
        height: clamp(22px, 5.5vw, 24px) !important;
        font-size: clamp(1.3rem, 3.5vw, 1.5rem) !important;
        line-height: clamp(22px, 5.5vw, 24px) !important;
    }
    
    /* 其他礼包框文字在移动端保持一行并随页面收缩 */
    .pack-box .pack-name {
        white-space: nowrap !important;
        font-size: clamp(0.65rem, 1.1vw, 0.9rem) !important;
        overflow: hidden !important;
        margin-top: 5px !important;
    }
    
    .pack-box .pack-content {
        white-space: nowrap !important;
        font-size: clamp(0.55rem, 1vw, 0.8rem) !important;
        overflow: hidden !important;
        margin-top: 5px !important;
    }
    
    .pack-name {
        white-space: nowrap !important;
        font-size: clamp(0.55rem, 1vw, 0.65rem) !important;
        overflow: hidden !important;
        margin-top: 5px !important;
    }
    
    .pack-content {
        white-space: nowrap !important;
        font-size: clamp(0.5rem, 0.9vw, 0.75rem) !important;
        overflow: hidden !important;
        margin-top: 5px !important;
    }
    
    /* Lucky Draw文字在移动端保持一行并随页面收缩 */
    .lottery-info-text {
        white-space: nowrap !important;
        font-size: clamp(0.6rem, 1.1vw, 0.85rem) !important;
        overflow: hidden !important;
        padding-bottom: clamp(8px, 1.5vw, 15px) !important;
    }
    
    /* Draw coming soon按钮在移动端保持一行并随页面收缩 */
    .btn-draw-coming-soon {
        white-space: nowrap !important;
        font-size: clamp(0.65rem, 1.2vw, 0.9rem) !important;
        letter-spacing: clamp(0.8px, 0.3vw, 1.5px) !important;
        padding: clamp(10px, 2vw, 15px) clamp(15px, 3.5vw, 30px) !important;
    }
    
    /* 确保标题和形象框之间的间距 - 移动端 */
    .event-squad-section .section-block-header {
        margin-bottom: clamp(15px, 3vw, 30px) !important;
    }
    
    /* 确保形象框和底部文字之间的间距 - 移动端 */
    .event-squad-section .squad-notice {
        margin-top: clamp(15px, 3vw, 30px) !important;
        white-space: nowrap !important;
        font-size: clamp(0.6rem, 1.1vw, 0.85rem) !important;
        overflow: hidden !important;
        color: #ffffff !important;
        line-height: 1.5 !important;
        letter-spacing: 0.5px !important;
    }
    
    /* YOUR SQUAD形象框强制在一排并等比收缩 - 移动端 */
    .event-squad-section .squad-members-row {
        flex-wrap: nowrap !important;
        gap: clamp(3px, 0.8vw, 8px) !important;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    .event-squad-section .squad-member-card {
        flex: 0 0 auto !important;
        width: clamp(60px, 16vw, 120px) !important;
        min-width: 0 !important;
        padding: clamp(5px, 1vw, 10px) !important;
    }
    
    .event-squad-section .member-avatar-box {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 0.8125 !important; /* 260/320 = 0.8125 */
        margin: 0 auto !important;
    }
    
    .event-squad-section .member-avatar-fallback {
        font-size: clamp(1.2rem, 3.5vw, 2.2rem) !important;
    }
    
    .event-squad-section .squad-member-card.leader .member-avatar-fallback {
        font-size: clamp(1.4rem, 4vw, 2.5rem) !important;
    }
    
    /* Login/Sign up文字在移动端缩小以确保完整显示 */
    .event-squad-section .login-center-text {
        font-size: clamp(0.45rem, 1.5vw, 0.75rem) !important;
        letter-spacing: clamp(0.3px, 0.4vw, 1px) !important;
        white-space: normal !important;
        line-height: 1.2 !important;
        padding: 0 clamp(2px, 0.6vw, 4px) !important;
        word-break: break-word !important;
    }
    
    /* 移除形象框外层边框和背景，只保留照片框 - 移动端 */
    .event-squad-section .squad-member-card {
        border: none !important;
        background: transparent !important;
        padding: clamp(5px, 1vw, 10px) !important;
        box-shadow: none !important;
    }
    
    /* 隐藏除照片框外的其他元素 - 移动端 */
    .event-squad-section .squad-member-card .member-label,
    .event-squad-section .squad-member-card .login-hover-text,
    .event-squad-section .squad-member-card .invite-hover-text {
        display: none !important;
    }
    
    /* 隐藏形象框hover效果 - 移动端 */
    .event-squad-section .squad-member-card:hover {
        border-color: var(--border-subtle) !important;
        transform: none !important;
        box-shadow: none !important;
    }
    
    .event-squad-section .squad-member-card.login-button-card:hover {
        border-color: var(--accent-amber) !important;
        box-shadow: 0 0 25px rgba(212, 168, 85, 0.3) !important;
        transform: none !important;
    }
    
    .event-squad-section .squad-member-card.login-button-card:hover .login-hover-text {
        opacity: 0 !important;
    }
    
    .event-squad-section .squad-member-card.login-button-card:hover .member-avatar-fallback {
        opacity: 0.5 !important;
        transform: none !important;
    }
    
    .event-squad-section .squad-member-card.login-button-card:hover .member-avatar-box {
        background: linear-gradient(180deg, rgba(60, 50, 50, 0.6) 0%, rgba(30, 25, 25, 0.8) 100%) !important;
        border-color: rgba(184, 115, 74, 0.3) !important;
        box-shadow: none !important;
    }
    
    .event-squad-section .squad-member-card.empty:hover {
        opacity: 0.7 !important;
    }
    
    /* 带+号的邀请框常驻显示绿色边框效果 - 移动端 */
    .event-squad-section .squad-member-card.empty.invite-button-card {
        border: 1px solid var(--accent-teal) !important;
        box-shadow: 0 0 25px rgba(26, 92, 92, 0.4) !important;
    }
    
    /* 移动端抽奖奖品图片优化 - 放大图片并移除棕色边框 */
    .prize-cell {
        border: none !important;
        background: transparent !important;
        padding: clamp(0.5px, 0.2vw, 2px) clamp(0.5px, 0.2vw, 2px) clamp(1px, 0.3vw, 3px) clamp(0.5px, 0.2vw, 2px) !important;
        aspect-ratio: 1 / 0.85 !important;
        min-height: 0 !important;
        display: flex !important;
    }
    
    .prize-cell::before {
        display: none !important;
    }
    
    .prize-cell:hover {
        border: none !important;
        box-shadow: none !important;
        transform: none !important;
    }
    
    .prize-image-placeholder {
        width: 100% !important;
        max-width: none !important;
        aspect-ratio: 1 / 1 !important;
        flex-shrink: 1 !important;
        flex-grow: 1 !important;
        min-height: 0 !important;
        transform: scale(1.1) !important;
    }
    
    .prize-cell.prize-large .prize-image-placeholder {
        width: 100% !important;
        max-width: none !important;
        aspect-ratio: 1 / 1 !important;
        flex-shrink: 1 !important;
        flex-grow: 1 !important;
        transform: scale(1.15) !important;
    }
    
    .prize-cell.prize-medium .prize-image-placeholder {
        width: 100% !important;
        max-width: none !important;
        aspect-ratio: 1 / 1 !important;
        flex-shrink: 1 !important;
        flex-grow: 1 !important;
        transform: scale(1.1) !important;
    }
    
    .prize-cell.prize-small .prize-image-placeholder {
        width: 100% !important;
        max-width: none !important;
        aspect-ratio: 1 / 1 !important;
        flex-shrink: 1 !important;
        flex-grow: 1 !important;
        transform: scale(1.1) !important;
    }
    
    .prize-cell.grand .prize-image-placeholder {
        width: 100% !important;
        max-width: none !important;
        aspect-ratio: 1 / 1 !important;
        flex-shrink: 1 !important;
        flex-grow: 1 !important;
        transform: scale(1.15) !important;
    }
    
    .prize-cell.featured {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }
    
    .prize-cell.featured::before {
        display: none !important;
    }
    
    .prize-cell-inner {
        padding: 0 !important;
        gap: clamp(1px, 0.3vw, 3px) !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: space-between !important;
        height: 100% !important;
        width: 100% !important;
        min-height: 0 !important;
    }
    
    .prize-cell-name {
        display: -webkit-box !important;
        font-size: clamp(0.5rem, 1.1vw, 0.75rem) !important;
        line-height: 1.15 !important;
        text-align: center !important;
        margin-top: clamp(1px, 0.3vw, 3px) !important;
        margin-bottom: 0 !important;
        padding: 0 clamp(1px, 0.3vw, 2px) 25px clamp(1px, 0.3vw, 2px) !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
        color: var(--text-primary) !important;
        opacity: 0.9 !important;
        flex-shrink: 0 !important;
        max-height: 28% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
    }
    
    .event-squad-section .squad-member-card.empty.invite-button-card .member-avatar-box {
        background: linear-gradient(180deg, rgba(20, 50, 50, 0.8) 0%, rgba(10, 30, 30, 0.9) 100%) !important;
        border-color: var(--accent-teal) !important;
        box-shadow: inset 0 0 30px rgba(26, 92, 92, 0.2) !important;
    }
    
    .event-squad-section .squad-member-card.invite-button-card:hover {
        border-color: var(--accent-teal) !important;
        box-shadow: 0 0 25px rgba(26, 92, 92, 0.4) !important;
        transform: none !important;
    }
    
    .event-squad-section .squad-member-card.invite-button-card:hover .invite-hover-text {
        opacity: 0 !important;
    }
    
    .event-squad-section .squad-member-card.invite-button-card:hover .member-avatar-fallback {
        opacity: 0.3 !important;
        transform: scale(0.9) !important;
    }
    
    .event-squad-section .squad-member-card.invite-button-card:hover .member-avatar-box {
        background: linear-gradient(180deg, rgba(20, 50, 50, 0.8) 0%, rgba(10, 30, 30, 0.9) 100%) !important;
        border-color: var(--accent-teal) !important;
        box-shadow: inset 0 0 30px rgba(26, 92, 92, 0.2) !important;
    }
    
    .event-squad-section .squad-member-card.has-member:hover {
        border-color: var(--border-subtle) !important;
        box-shadow: none !important;
        transform: none !important;
    }
    .btn-rules-tech svg {
        width: clamp(10px, 2.2vw, 14px) !important;
        height: clamp(10px, 2.2vw, 14px) !important;
    }
    .btn-rules-tech .btn-corner {
        width: clamp(5px, 1.2vw, 7px) !important;
        height: clamp(5px, 1.2vw, 7px) !important;
    }
    /* 隐藏平行世界页面图片框上的文字 */
    .world-card-overlay {
        display: none !important;
    }
    .btn-preregister {
        padding: 16px 45px;
        font-size: 0.85rem;
        letter-spacing: 3px;
    }
    
    /* 中文版移动端首页立即预约按钮缩小 */
    html:lang(zh) .btn-preregister {
        padding: 19px 53px;
        font-size: 1rem;
        letter-spacing: 3.5px;
    }
    
    .play-button { 
        width: 60px; 
        height: 60px; 
        margin: 15px 0;
        z-index: 100;
        pointer-events: auto;
    }
    .play-button::before { width: 80px; height: 80px; }
    .play-button::after { width: 80px; height: 80px; }
    .play-button svg { width: 24px; height: 24px; }
    .hero-content {
        gap: 20px;
    }
}

/* Floating Event Banner */
.floating-event-banner {
    position: fixed;
    left: 23px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 999;
    text-decoration: none;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.floating-event-glow {
    position: absolute;
    top: -15px;
    left: -15px;
    right: -15px;
    bottom: -15px;
    background: radial-gradient(ellipse at center, rgba(212, 168, 85, 0.25) 0%, rgba(184, 115, 74, 0.15) 40%, transparent 70%);
    border-radius: 50%;
    animation: floatGlow 3s ease-in-out infinite;
    pointer-events: none;
    filter: blur(8px);
}

@keyframes floatGlow {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.15); }
}

.floating-event-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: linear-gradient(135deg, rgba(20, 15, 10, 0.98) 0%, rgba(15, 10, 5, 0.98) 100%);
    border: 2px solid rgba(212, 168, 85, 0.7);
    padding: 14px 20px 14px 16px;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
    backdrop-filter: blur(12px);
    position: relative;
    overflow: hidden;
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.6),
        0 0 40px rgba(212, 168, 85, 0.3),
        inset 0 0 30px rgba(212, 168, 85, 0.1);
    transition: padding 0.3s ease, gap 0.3s ease, justify-content 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.floating-event-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 217, 61, 0.25), rgba(212, 168, 85, 0.3), rgba(255, 217, 61, 0.25), transparent);
    animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
    0%, 100% { left: -100%; }
    50% { left: 100%; }
}


.floating-event-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.floating-event-title {
    font-family: 'Michroma', sans-serif;
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 2.5px;
    color: var(--text-primary);
    white-space: nowrap;
    transition: font-size 0.3s ease, letter-spacing 0.3s ease;
    line-height: 1.2;
}

/* 中文版悬浮框标题字体加大 */
html:lang(zh) .floating-event-title {
    font-size: 1.3rem;
    letter-spacing: 5px;
}

.floating-event-subtitle {
    font-family: 'Exo 2', sans-serif;
    font-size: 0.8rem;
    color: var(--accent-amber);
    letter-spacing: 1.5px;
    animation: textBlink 2s ease-in-out infinite;
    transition: font-size 0.3s ease, letter-spacing 0.3s ease;
    line-height: 1.2;
}

/* 中文版悬浮框副标题字体加大 */
html:lang(zh) .floating-event-subtitle {
    font-size: 1.13rem;
    letter-spacing: 3.5px;
}

@keyframes textBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.floating-event-gift {
    width: 0;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0;
    transform: scale(0) rotate(-180deg);
    position: relative;
    background: linear-gradient(135deg, #ffd93d 0%, var(--accent-amber) 50%, #ff6b6b 100%);
    clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
    border: 2px solid rgba(255, 255, 255, 0.6);
    box-shadow: 
        0 0 20px rgba(255, 217, 61, 0.6),
        0 0 40px rgba(212, 168, 85, 0.4),
        inset 0 0 15px rgba(255, 255, 255, 0.2);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 10;
    overflow: hidden;
    margin: 0;
}

.floating-event-gift::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffd93d, var(--accent-amber), #ff6b6b, #ffd93d);
    background-size: 200% 200%;
    animation: giftGlow 2s linear infinite;
    opacity: 0.6;
    z-index: -1;
    filter: blur(8px);
}

@keyframes giftGlow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.floating-event-gift svg {
    width: 22px;
    height: 22px;
    fill: var(--primary-dark);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}


@keyframes giftIconShake {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-10deg); }
    75% { transform: rotate(10deg); }
}

@keyframes giftPulse {
    0%, 100% {
        box-shadow: 
            0 0 30px rgba(255, 217, 61, 0.8),
            0 0 60px rgba(212, 168, 85, 0.6),
            0 0 90px rgba(255, 107, 107, 0.4);
    }
    50% {
        box-shadow: 
            0 0 40px rgba(255, 217, 61, 1),
            0 0 80px rgba(212, 168, 85, 0.8),
            0 0 120px rgba(255, 107, 107, 0.6);
    }
}

.floating-event-arrow {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.floating-event-arrow svg {
    width: 16px;
    height: 16px;
    fill: var(--accent-copper);
    transition: transform 0.3s ease;
    animation: arrowBounce 1.5s ease-in-out infinite;
}

@keyframes arrowBounce {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(4px); }
}

.floating-event-pulse {
    position: absolute;
    top: 50%;
    left: calc(50% - 3px);
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border: 2px solid rgba(255, 217, 61, 0.8);
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
    animation: pulseBorder 1.8s ease-out infinite;
    pointer-events: none;
    box-shadow: 0 0 20px rgba(255, 217, 61, 0.4);
}

@keyframes pulseBorder {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }
}

/* Hover Effects */
.floating-event-banner:hover {
    transform: translateY(-50%) translateX(5px);
}

.floating-event-banner:hover .floating-event-content {
    border-color: #ffd93d;
    background: linear-gradient(135deg, rgba(30, 20, 10, 0.98) 0%, rgba(20, 12, 5, 0.98) 100%);
    box-shadow: 
        0 8px 40px rgba(0, 0, 0, 0.7),
        0 0 60px rgba(255, 217, 61, 0.5),
        0 0 100px rgba(212, 168, 85, 0.3),
        inset 0 0 40px rgba(255, 217, 61, 0.15);
    transform: scale(1.02);
    padding: 12px 18px 12px 14px;
    gap: 10px;
    justify-content: flex-start;
}

/* 悬浮时显示礼物图标并增强效果 */
.floating-event-banner:hover .floating-event-gift {
    width: 40px;
    opacity: 1;
    transform: scale(1) rotate(0deg);
    border-color: rgba(255, 255, 255, 0.9);
    animation: giftPop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards,
               giftPulse 2s ease-in-out 0.6s infinite;
}

.floating-event-banner:hover .floating-event-gift::before {
    animation: giftGlow 1.5s linear infinite;
    opacity: 0.8;
}

.floating-event-banner:hover .floating-event-gift svg {
    animation: giftIconShake 1.5s ease-in-out 0.6s infinite;
}

/* 悬浮时缩小文字 */
.floating-event-banner:hover .floating-event-title {
    font-size: 0.6rem;
    letter-spacing: 1.5px;
}

/* 中文版悬浮框hover状态标题字体 */
html:lang(zh) .floating-event-banner:hover .floating-event-title {
    font-size: 1.2rem;
    letter-spacing: 4px;
}

.floating-event-banner:hover .floating-event-subtitle {
    font-size: 0.6rem;
    letter-spacing: 0.8px;
}

/* 中文版悬浮框hover状态副标题字体 */
html:lang(zh) .floating-event-banner:hover .floating-event-subtitle {
    font-size: 1rem;
    letter-spacing: 2.5px;
}

/* 礼物图标弹出动画 */
@keyframes giftPop {
    0% {
        transform: scale(0) rotate(-180deg);
        opacity: 0;
    }
    50% {
        transform: scale(1.3) rotate(10deg);
        opacity: 1;
    }
    70% {
        transform: scale(0.9) rotate(-5deg);
        opacity: 1;
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

.floating-event-banner:hover .floating-event-arrow svg {
    animation: none;
    transform: translateX(6px);
}

.floating-event-banner:hover .floating-event-title {
    color: var(--accent-amber);
    text-shadow: 0 0 15px rgba(212, 168, 85, 0.6);
}

.floating-event-banner:hover .floating-event-subtitle {
    color: #ffd93d;
    text-shadow: 0 0 10px rgba(255, 217, 61, 0.5);
}

/* 左右分栏响应式样式 */
@media (max-width: 1200px) {
    .milestone-lottery-container {
        flex-direction: column;
        gap: 30px;
    }
    
    .milestone-column,
    .lottery-column {
        width: 100%;
    }
}

/* 里程碑和抽奖区响应式样式 */
@media (max-width: 1200px) {
    .milestone-flow-container {
        min-height: 450px;
    }
    
    .milestone-node-1 {
        left: 20%;
    }
    
    .milestone-node-3 {
        left: 70%;
    }
    
    .milestone-node-5 {
        left: 30%;
    }
    
    .pack-1 {
        left: 40%;
    }
    
    .pack-2 {
        left: 55%;
    }
}

@media (max-width: 900px) {
    .milestone-flow-container {
        min-height: 400px;
        padding: 30px 10px;
    }
    
    .milestone-node-1 {
        top: 15px;
        left: 25%;
    }
    
    .milestone-node-3 {
        top: 180px;
        left: 75%;
    }
    
    .milestone-node-5 {
        top: 350px;
        left: 35%;
    }
    
    .pack-1 {
        top: 100px;
        left: 45%;
    }
    
    .pack-2 {
        top: 420px;
        left: 60%;
    }
    
    .prize-grid-symmetric {
        grid-template-columns: repeat(6, 1fr) !important;
        gap: 10px;
    }
    
    .prize-mouse {
        grid-column: 1 / 3 !important;
        grid-row: 1 !important;
    }
    
    .prize-gpu {
        grid-column: 3 / 5 !important;
        grid-row: 1 !important;
    }
    
    .prize-headset {
        grid-column: 5 / 7 !important;
        grid-row: 1 !important;
    }
    
    .prize-topup6 {
        grid-column: 1 / 3 !important;
        grid-row: 2 !important;
        margin-top: 20px !important;
    }
    
    .prize-topup30 {
        grid-column: 3 / 5 !important;
        grid-row: 2 !important;
        margin-top: 10px !important;
    }
    
    .prize-topup64 {
        grid-column: 5 / 7 !important;
        grid-row: 2 !important;
        margin-top: 20px !important;
    }
    
    .prize-supply {
        grid-column: 2 / 4 !important;
        grid-row: 3 !important;
        margin-top: 30px !important;
    }
    
    .prize-thanks {
        grid-column: 4 / 6 !important;
        grid-row: 3 !important;
        margin-top: 30px !important;
    }
}

/* Hide on small screens for better UX */
@media (max-width: 767px) {
    .floating-event-banner {
        left: 10px;
        top: auto;
        bottom: 80px;
        transform: translateY(0);
    }
    
    .floating-event-banner:hover {
        transform: translateY(-3px) translateX(0);
    }
    
    .floating-event-text {
        display: none;
    }
    
    /* 悬浮窗设定为hover状态 - 移动端 */
    .floating-event-banner .floating-event-content {
        border-color: #ffd93d !important;
        background: linear-gradient(135deg, rgba(30, 20, 10, 0.98) 0%, rgba(20, 12, 5, 0.98) 100%) !important;
        box-shadow: 
            0 8px 40px rgba(0, 0, 0, 0.7),
            0 0 60px rgba(255, 217, 61, 0.5),
            0 0 100px rgba(212, 168, 85, 0.3),
            inset 0 0 40px rgba(255, 217, 61, 0.15) !important;
        transform: scale(1.02) !important;
        padding: 12px 18px 12px 14px !important;
        gap: 10px !important;
        justify-content: flex-start !important;
    }
    
    .floating-event-banner .floating-event-gift {
        width: 40px !important;
        height: 40px !important;
        opacity: 1 !important;
        transform: scale(1) rotate(0deg) !important;
        border-color: rgba(255, 255, 255, 0.9) !important;
        animation: giftPop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards,
                   giftPulse 2s ease-in-out 0.6s infinite !important;
    }
    
    .floating-event-banner .floating-event-gift::before {
        animation: giftGlow 1.5s linear infinite !important;
        opacity: 0.8 !important;
    }
    
    .floating-event-banner .floating-event-gift svg {
        width: 22px !important;
        height: 22px !important;
        animation: giftIconShake 1.5s ease-in-out 0.6s infinite !important;
    }
    
    .floating-event-arrow {
        display: none;
    }
    
    .floating-event-content {
        padding: 10px;
    }
    
    .milestone-flow-container {
        min-height: 350px;
        padding: 20px 5px;
    }
    
    .pack-box {
        min-width: 200px;
        padding: 12px 15px;
    }
    
    .prize-grid-symmetric {
        grid-template-columns: repeat(6, 1fr) !important;
    }
    
    .prize-mouse {
        grid-column: 1 / 3 !important;
        grid-row: 1 !important;
    }
    
    .prize-gpu {
        grid-column: 3 / 5 !important;
        grid-row: 1 !important;
    }
    
    .prize-headset {
        grid-column: 5 / 7 !important;
        grid-row: 1 !important;
    }
    
    .prize-topup6 {
        grid-column: 1 / 3 !important;
        grid-row: 2 !important;
        margin-top: 20px !important;
    }
    
    .prize-topup30 {
        grid-column: 3 / 5 !important;
        grid-row: 2 !important;
        margin-top: 10px !important;
    }
    
    .prize-topup64 {
        grid-column: 5 / 7 !important;
        grid-row: 2 !important;
        margin-top: 20px !important;
    }
    
    .prize-supply {
        grid-column: 2 / 4 !important;
        grid-row: 3 !important;
        margin-top: 30px !important;
    }
    
    .prize-thanks {
        grid-column: 4 / 6 !important;
        grid-row: 3 !important;
        margin-top: 30px !important;
    }
}

/* 390px及以下尺寸优化（包括360px等小屏设备）- Pioneer Pack和Assembler Pack文字进一步缩小 */
@media (max-width: 390px) {
    .milestone-pack-box .pack-name {
        font-size: clamp(0.5rem, 0.9vw, 0.7em) !important;
        margin-left: -5px !important;
    }
    
    .milestone-pack-box .pack-content {
        margin-left: -5px !important;
    }
    
    /* 确保礼包框文字和按钮不重叠 */
    .milestone-pack-box {
        padding-right: clamp(8px, 2vw, 12px) !important;
    }
    
    .milestone-pack-box .pack-details {
        padding-right: clamp(55px, 18vw, 75px) !important;
        overflow: visible !important;
        flex: 1 !important;
        min-width: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .milestone-pack-box .btn-claim-pack {
        font-size: clamp(0.45rem, 0.8vw, 0.6em) !important;
        padding: clamp(0.15em, 0.5vw, 0.3em) clamp(0.3em, 0.8vw, 0.5em) !important;
    }
    
    .milestone-pack-box .pack-name,
    .milestone-pack-box .pack-content {
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
        max-width: 100% !important;
    }
    
    /* 确保任务框内的完成勾选圆圈不出框 */
    .milestone-item {
        overflow: hidden !important;
        padding-right: clamp(8px, 2vw, 12px) !important;
    }
    
    .milestone-header {
        gap: clamp(8px, 2vw, 12px) !important;
    }
    
    .milestone-status {
        width: clamp(20px, 5vw, 24px) !important;
        height: clamp(20px, 5vw, 24px) !important;
        flex-shrink: 0 !important;
    }
    
    .status-icon {
        width: clamp(20px, 5vw, 24px) !important;
        height: clamp(20px, 5vw, 24px) !important;
        font-size: clamp(1.2rem, 3vw, 1.5rem) !important;
        line-height: clamp(20px, 5vw, 24px) !important;
    }
}

/* iPhone SE (375x667) 优化 - 任务框和礼包框文字进一步缩小 */
@media (max-width: 375px) {
    /* 任务框文字在iPhone SE上进一步缩小 */
    .milestone-title {
        font-size: clamp(0.55rem, 1vw, 0.7rem) !important;
    }
    
    .reward-text {
        font-size: clamp(0.5rem, 0.9vw, 0.7rem) !important;
    }
    
    /* 礼包框文字在iPhone SE上进一步缩小 */
    .milestone-pack-box .pack-name {
        font-size: clamp(0.55rem, 0.95vw, 0.75em) !important;
    }
    
    .milestone-pack-box .pack-content {
        font-size: clamp(0.45rem, 0.85vw, 0.65em) !important;
    }
    
    /* 其他礼包框文字在iPhone SE上进一步缩小 */
    .pack-box .pack-name {
        font-size: clamp(0.55rem, 0.95vw, 0.75rem) !important;
    }
    
    .pack-box .pack-content {
        font-size: clamp(0.45rem, 0.85vw, 0.65rem) !important;
    }
    
    .pack-name {
        font-size: clamp(0.45rem, 0.85vw, 0.55rem) !important;
    }
    
    .pack-content {
        font-size: clamp(0.4rem, 0.75vw, 0.6rem) !important;
    }
    
    /* 135数字圆圈在iPhone SE上进一步缩小 */
    .milestone-number {
        width: clamp(28px, 7.5vw, 35px) !important;
        height: clamp(28px, 7.5vw, 35px) !important;
        font-size: clamp(1rem, 2.5vw, 1.2rem) !important;
        border-width: clamp(1.5px, 0.4vw, 2px) !important;
    }
}

/* Noise texture */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.025;
    pointer-events: none;
    z-index: 9999;
}

/* Global toast (non-blocking alert replacement) */
#globalToastContainer {
    position: fixed;
    top: 64px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 11000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: min(calc(100vw - 24px), 420px);
    pointer-events: none;
}

.global-toast {
    width: 100%;
    min-width: 0;
    max-width: 420px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(212, 168, 85, 0.35);
    background: rgba(8, 10, 14, 0.92);
    color: #f0e8db;
    font-size: 14px;
    text-align: center;
    line-height: 1.45;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.global-toast.show {
    opacity: 1;
    transform: translateY(0);
}

.global-toast-info {
    border-color: rgba(102, 181, 255, 0.35);
}

.global-toast-success {
    border-color: rgba(63, 176, 124, 0.45);
}

.global-toast-error {
    border-color: rgba(225, 109, 109, 0.45);
}

@media (max-width: 768px) {
    #globalToastContainer {
        top: 56px;
        width: calc(100vw - 24px);
    }

    .global-toast {
        max-width: 100%;
        font-size: 13px;
    }
    
    /* 移动端隐藏二维码框（iPad端使用PC端样式，不隐藏） */
    @media (max-width: 480px) {
        .wechat-qrcode-box {
            display: none;
        }
        
        /* 移动端显示微信logo */
        .social-links .wechat-link {
            display: flex;
        }
    }
}