/* ============================================
   FanWar 2026 - 赛博朋克风格样式表
   ============================================ */

/* CSS 变量 - 赛博朋克配色 */
:root {
    /* 主色调 */
    --primary-cyan: #00fff2;
    --primary-pink: #ff00aa;
    --primary-purple: #9d4edd;
    --primary-blue: #4361ee;
    --primary-yellow: #ffd60a;
    
    /* 背景色 */
    --bg-dark: #0a0a0f;
    --bg-darker: #050508;
    --bg-card: rgba(15, 15, 25, 0.85);
    --bg-card-hover: rgba(25, 25, 40, 0.95);
    
    /* 渐变 */
    --gradient-primary: linear-gradient(135deg, var(--primary-cyan), var(--primary-pink));
    --gradient-secondary: linear-gradient(135deg, var(--primary-purple), var(--primary-blue));
    --gradient-gold: linear-gradient(135deg, #ffd60a, #ff6b00);
    
    /* 文字颜色 */
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --text-muted: rgba(255, 255, 255, 0.5);
    
    /* 边框 */
    --border-glow: 1px solid rgba(0, 255, 242, 0.3);
    --border-subtle: 1px solid rgba(255, 255, 255, 0.1);
    
    /* 阴影 */
    --glow-cyan: 0 0 20px rgba(0, 255, 242, 0.3);
    --glow-pink: 0 0 20px rgba(255, 0, 170, 0.3);
    --glow-gold: 0 0 20px rgba(255, 214, 10, 0.3);
    
    /* 字体 */
    --font-display: 'Orbitron', sans-serif;
    --font-body: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
    
    /* 间距 */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-xxl: 5rem;
    
    /* 圆角 */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 30px;
    
    /* 动画时间 */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* ============================================
   基础重置
   ============================================ */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    /* 防止水平溢出 */
    overflow-x: hidden;
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-dark);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100vh;
    /* 防止内容溢出 */
    width: 100%;
    max-width: 100vw;
}

/* 全局防溢出 */
img, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
}

/* 文字防溢出 */
h1, h2, h3, h4, h5, h6, p, span, a, li {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    outline: none;
    background: none;
}

input {
    font-family: inherit;
    border: none;
    outline: none;
    background: none;
}

ul, ol {
    list-style: none;
}

/* ============================================
   背景效果
   ============================================ */
.bg-grid {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(0, 255, 242, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 242, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    pointer-events: none;
    z-index: -2;
}

.bg-glow {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(ellipse at 20% 20%, rgba(0, 255, 242, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(255, 0, 170, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(157, 78, 221, 0.05) 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
}

/* ============================================
   导航栏
   ============================================ */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(10, 10, 15, 0.9);
    backdrop-filter: blur(20px);
    border-bottom: var(--border-subtle);
}

.nav-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 16px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    flex-shrink: 0;
    text-decoration: none;
}

.logo-icon {
    font-size: 1.4rem;
    animation: pulse 2s infinite;
}

.logo-img {
    height: 50px;
    width: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

.logo:hover .logo-img {
    transform: scale(1.08) translateX(3px);
    filter: drop-shadow(0 4px 8px rgba(230, 57, 70, 0.4));
}

.logo-text {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.logo-text .year {
    font-size: 0.8em;
    opacity: 0.8;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.nav-link {
    position: relative;
    font-size: 0.85rem;
    color: var(--text-secondary);
    transition: color var(--transition-normal);
    padding: 6px 10px;
    white-space: nowrap;
    flex-shrink: 0;
}

.nav-link:hover,
.nav-link.active {
    color: var(--primary-cyan);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gradient-primary);
    transition: width var(--transition-normal);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

/* 白皮书导航链接高亮 */
.nav-link-highlight {
    color: var(--primary-yellow) !important;
    font-weight: 600;
    background: rgba(255, 215, 0, 0.1);
    padding: 6px 10px !important;
    border-radius: 6px;
    border: 1px solid rgba(255, 215, 0, 0.3);
    transition: all 0.3s ease;
}

.nav-link-highlight:hover {
    background: rgba(255, 215, 0, 0.2);
    border-color: var(--primary-yellow);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}

.nav-link-highlight::after {
    display: none;
}

/* 世界杯专题导航链接橙色高亮 */
.nav-link-highlight-orange {
    color: #f7931a !important;
    font-weight: 600;
    background: rgba(247, 147, 26, 0.15);
    padding: 6px 12px !important;
    border-radius: 6px;
    border: 1px solid rgba(247, 147, 26, 0.4);
    transition: all 0.3s ease;
}

.nav-link-highlight-orange:hover {
    background: rgba(247, 147, 26, 0.25);
    border-color: #f7931a;
    box-shadow: 0 0 15px rgba(247, 147, 26, 0.4);
    color: #ffab40 !important;
}

.nav-link-highlight-orange::after {
    display: none;
}

.mobile-link-highlight-orange {
    color: #f7931a !important;
    font-weight: 600;
    background: rgba(247, 147, 26, 0.15);
    border: 1px solid rgba(247, 147, 26, 0.4);
    border-radius: 6px;
    margin-top: 0.5rem;
}

.mobile-link-highlight {
    color: var(--primary-yellow) !important;
    font-weight: 600;
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 6px;
    margin-top: 0.5rem;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.points-display {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-card);
    border: var(--border-glow);
    border-radius: var(--radius-xl);
    font-family: var(--font-display);
    font-size: 0.85rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.points-icon {
    font-size: 1.2rem;
}

.points-value {
    color: var(--primary-cyan);
    font-weight: 600;
}

.points-label {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.btn-connect {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--gradient-primary);
    border-radius: var(--radius-xl);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--bg-dark);
    transition: all var(--transition-normal);
    box-shadow: var(--glow-cyan);
    white-space: nowrap;
    flex-shrink: 0;
}

.wallet-text {
    white-space: nowrap;
}

.wallet-icon {
    flex-shrink: 0;
}

.btn-connect:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(0, 255, 242, 0.5);
}

/* 钱包已连接状态 */
.btn-connect.connected {
    background: rgba(0, 255, 136, 0.15);
    border: 1px solid #00ff88;
    color: #00ff88;
    padding: 8px 16px;
}

.btn-connect.connected:hover {
    background: rgba(0, 255, 136, 0.25);
}

.wallet-status-dot {
    width: 8px;
    height: 8px;
    background: #00ff88;
    border-radius: 50%;
    animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.7); }
    50% { opacity: 0.8; box-shadow: 0 0 0 6px rgba(0, 255, 136, 0); }
}

.wallet-network {
    font-size: 0.7rem;
    opacity: 0.7;
    margin-left: 4px;
    padding: 2px 6px;
    background: rgba(0, 255, 136, 0.2);
    border-radius: 4px;
}

/* 钱包菜单 */
.wallet-menu {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 255, 136, 0.3);
    border-radius: var(--radius-md);
    padding: 0;
    min-width: 280px;
    z-index: 10000;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 255, 136, 0.1);
    animation: menuSlideIn 0.2s ease;
}

@keyframes menuSlideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.wallet-menu-header {
    padding: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.wallet-menu-address {
    font-family: var(--font-display);
    font-size: 0.85rem;
    color: var(--primary-cyan);
    word-break: break-all;
    margin-bottom: 8px;
}

.wallet-menu-network {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.network-dot {
    width: 8px;
    height: 8px;
    background: #00ff88;
    border-radius: 50%;
}

.wallet-menu-actions {
    padding: 8px;
}

.wallet-menu-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 0.9rem;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.wallet-menu-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.wallet-menu-btn.disconnect-wallet {
    color: #ff4757;
}

.wallet-menu-btn.disconnect-wallet:hover {
    background: rgba(255, 71, 87, 0.15);
}

/* 移动端菜单按钮 */
.mobile-menu-btn {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 5px;
}

.mobile-menu-btn span {
    display: block;
    width: 25px;
    height: 2px;
    background: var(--primary-cyan);
    transition: all var(--transition-normal);
}

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

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

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

/* 移动端菜单 */
.mobile-menu {
    display: none;
    position: fixed;
    top: 70px;
    left: 0;
    width: 100%;
    height: calc(100vh - 70px);
    background: rgba(10, 10, 15, 0.98);
    backdrop-filter: blur(20px);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-normal);
}

.mobile-menu.active {
    opacity: 1;
    visibility: visible;
}

.mobile-menu-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: var(--spacing-lg);
}

.mobile-link {
    font-size: 1.5rem;
    font-family: var(--font-display);
    color: var(--text-secondary);
    transition: all var(--transition-normal);
}

.mobile-link:hover {
    color: var(--primary-cyan);
    text-shadow: var(--glow-cyan);
}

.mobile-connect {
    margin-top: var(--spacing-lg);
}

/* ============================================
   主页横幅 Hero
   ============================================ */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px var(--spacing-md) var(--spacing-xxl);
    position: relative;
    overflow: hidden;
    /* 足球场草地渐变背景 */
    background: 
        radial-gradient(ellipse at 50% 120%, rgba(34, 139, 34, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 50% -20%, rgba(0, 255, 242, 0.1) 0%, transparent 40%),
        var(--bg-dark);
}

/* ============================================
   ⚽ 足球装饰元素
   ============================================ */
.football-decorations {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
}

.football {
    position: absolute;
    font-size: 3rem;
    opacity: 0.15;
    animation: float-football 8s ease-in-out infinite;
}

.football-1 {
    top: 15%;
    left: 10%;
    animation-delay: 0s;
}

.football-2 {
    top: 60%;
    right: 8%;
    animation-delay: 2s;
    font-size: 2rem;
}

.football-3 {
    bottom: 20%;
    left: 15%;
    animation-delay: 4s;
    font-size: 2.5rem;
}

@keyframes float-football {
    0%, 100% { 
        transform: translateY(0) rotate(0deg); 
    }
    50% { 
        transform: translateY(-20px) rotate(180deg); 
    }
}

.goal-net {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 150px;
    background: 
        repeating-linear-gradient(90deg, transparent, transparent 15px, rgba(255,255,255,0.03) 15px, rgba(255,255,255,0.03) 16px),
        repeating-linear-gradient(0deg, transparent, transparent 15px, rgba(255,255,255,0.03) 15px, rgba(255,255,255,0.03) 16px);
    opacity: 0.5;
    border-bottom: 2px solid rgba(255,255,255,0.1);
}

/* ============================================
   🏆 2026 美加墨世界杯徽章
   ============================================ */
.world-cup-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 28px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 107, 0, 0.1));
    border: 2px solid rgba(255, 215, 0, 0.4);
    border-radius: 20px;
    margin-bottom: var(--spacing-md);
    position: relative;
    overflow: hidden;
}

.world-cup-badge::before {
    content: '⚽';
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 4rem;
    opacity: 0.1;
}

.host-flags {
    display: flex;
    gap: 12px;
    font-size: 1.8rem;
}

.host-flag {
    animation: wave-flag 2s ease-in-out infinite;
}

.host-flag:nth-child(2) {
    animation-delay: 0.3s;
}

.host-flag:nth-child(3) {
    animation-delay: 0.6s;
}

@keyframes wave-flag {
    0%, 100% { transform: rotate(-3deg); }
    50% { transform: rotate(3deg); }
}

.badge-text {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-yellow);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.badge-cities {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* ============================================
   👍 LIKE TO EARN 口号
   ============================================ */
.slogan-banner {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 12px 32px;
    background: linear-gradient(135deg, rgba(0, 255, 242, 0.2), rgba(255, 0, 170, 0.15));
    border: 2px solid var(--primary-cyan);
    border-radius: 50px;
    margin: var(--spacing-md) 0;
    animation: pulse-border 2s ease-in-out infinite;
}

@keyframes pulse-border {
    0%, 100% { 
        box-shadow: 0 0 20px rgba(0, 255, 242, 0.3);
    }
    50% { 
        box-shadow: 0 0 40px rgba(0, 255, 242, 0.6), 0 0 60px rgba(255, 0, 170, 0.3);
    }
}

.slogan-icon {
    font-size: 1.5rem;
    animation: bounce-icon 1s ease-in-out infinite;
}

.slogan-icon:last-child {
    animation-delay: 0.5s;
}

@keyframes bounce-icon {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.slogan-text {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 900;
    background: linear-gradient(90deg, var(--primary-cyan), var(--primary-pink), var(--primary-yellow));
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-flow 3s linear infinite;
    letter-spacing: 0.15em;
}

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

/* ============================================
   🎮 核心玩法提示
   ============================================ */
.gameplay-hints {
    display: flex;
    justify-content: center;
    gap: var(--spacing-lg);
    margin: var(--spacing-md) 0;
    flex-wrap: wrap;
}

.hint-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 30px;
    transition: all 0.3s ease;
}

.hint-item:hover {
    background: rgba(0, 255, 242, 0.1);
    border-color: var(--primary-cyan);
    transform: translateY(-2px);
}

.hint-icon {
    font-size: 1.2rem;
}

.hint-text {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* ============================================
   🏟️ 世界杯状态提示
   ============================================ */
.worldcup-status {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    background: rgba(34, 139, 34, 0.15);
    border: 1px solid rgba(34, 139, 34, 0.3);
    border-radius: 12px;
    margin-top: var(--spacing-md);
}

.status-icon {
    font-size: 2rem;
}

.status-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.status-title {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 700;
    color: #32CD32;
}

.status-info {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* ============================================
   ⚽ 足球主题按钮
   ============================================ */
.btn-football {
    position: relative;
    overflow: hidden;
}

.btn-football::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: repeating-conic-gradient(
        from 0deg,
        transparent 0deg 30deg,
        rgba(255,255,255,0.05) 30deg 60deg
    );
    animation: rotate-pattern 20s linear infinite;
    pointer-events: none;
}

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

.btn-icon {
    margin-right: 8px;
}

.hero-content {
    text-align: center;
    max-width: 800px;
    z-index: 1;
}

.hero-badge {
    display: inline-block;
    padding: 8px 20px;
    background: rgba(255, 214, 10, 0.1);
    border: 1px solid var(--primary-yellow);
    border-radius: var(--radius-xl);
    color: var(--primary-yellow);
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: var(--spacing-lg);
    animation: glow-pulse 2s infinite;
}

.hero-title {
    font-family: var(--font-display);
    font-size: clamp(3rem, 12vw, 8rem);
    font-weight: 900;
    line-height: 1;
    margin-bottom: var(--spacing-md);
}

.title-line {
    display: block;
}

.title-line.small {
    font-size: 0.4em;
    color: var(--text-secondary);
    letter-spacing: 0.5em;
}

.gradient-text {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 3s ease infinite;
    background-size: 200% 200%;
}

.hero-subtitle {
    font-size: 1.2rem;
    color: var(--primary-cyan);
    font-family: var(--font-display);
    letter-spacing: 0.1em;
    margin-bottom: var(--spacing-sm);
}

.hero-desc {
    font-size: 1.1rem;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto var(--spacing-xl);
}

.hero-stats {
    display: flex;
    justify-content: center;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
    flex-wrap: wrap;
}

.stat-item {
    text-align: center;
}

.stat-value {
    display: block;
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-cyan);
    text-shadow: var(--glow-cyan);
}

.stat-label {
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* ============================================
   空投计算面板
   ============================================ */
.airdrop-calculator {
    background: linear-gradient(135deg, rgba(0, 255, 242, 0.05), rgba(255, 0, 170, 0.05));
    border: 1px solid rgba(0, 255, 242, 0.3);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin: var(--spacing-xl) auto;
    max-width: 700px;
    backdrop-filter: blur(10px);
}

.calc-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.calc-icon {
    font-size: 1.5rem;
}

.calc-title {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    background: var(--gradient-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.calc-formula {
    text-align: center;
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-lg);
}

.formula-text {
    font-family: var(--font-mono, monospace);
    font-size: 0.85rem;
    color: var(--primary-cyan);
}

.calc-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-lg);
}

.calc-item {
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    text-align: center;
    min-width: 100px;
    transition: all var(--transition-fast);
}

.calc-item:hover {
    border-color: var(--primary-cyan);
    box-shadow: var(--glow-cyan);
}

.calc-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: var(--spacing-xs);
}

.calc-value {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.calc-value.highlight {
    color: var(--primary-cyan);
    text-shadow: var(--glow-cyan);
}

.calc-sub {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.calc-operator {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-yellow);
    padding: 0 var(--spacing-xs);
}

.calc-result {
    background: linear-gradient(135deg, rgba(255, 214, 10, 0.2), rgba(255, 107, 0, 0.2));
    border: 2px solid rgba(255, 214, 10, 0.5);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    text-align: center;
    margin-bottom: var(--spacing-md);
}

.result-label {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: var(--spacing-xs);
}

.result-value {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 700;
    background: var(--gradient-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.result-unit {
    font-size: 1rem;
    opacity: 0.8;
}

#calcTotalAirdrop.updating {
    animation: pulse-glow 0.3s ease;
}

@keyframes pulse-glow {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); filter: brightness(1.5); }
    100% { transform: scale(1); }
}

.calc-tips {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.tip-item {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-align: center;
}

.calc-item.clickable {
    cursor: pointer;
    transition: all var(--transition-fast);
}

.calc-item.clickable:hover {
    transform: scale(1.05);
    border-color: var(--primary-yellow);
    box-shadow: 0 0 20px rgba(255, 214, 10, 0.3);
}

/* 我支持的国家赛况 */
.my-nations-status {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.nations-status-header {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: var(--spacing-sm);
    text-align: center;
}

.nations-status-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    justify-content: center;
}

.no-nations {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-style: italic;
}

.nation-status-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    background: var(--bg-card);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
}

.nation-status-item .flag {
    font-size: 1.2rem;
}

.nation-status-item .stage {
    color: var(--primary-cyan);
    font-weight: 600;
}

.nation-status-item .multiplier {
    color: var(--primary-yellow);
    font-weight: 700;
}

.nation-status-item.champion {
    background: linear-gradient(135deg, rgba(255, 214, 10, 0.2), rgba(255, 107, 0, 0.2));
    border: 1px solid var(--primary-yellow);
}

.nation-status-item .minted-tag {
    background: var(--primary-cyan);
    color: var(--bg-dark);
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
}

/* 胜负加成弹窗 */
.multiplier-modal {
    max-width: 500px;
}

.multiplier-sections {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
}

.multiplier-section {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
}

.section-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-weight: 600;
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
}

.section-icon {
    font-size: 1.2rem;
}

.multiplier-items {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.multiplier-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-sm);
}

.multiplier-row.highlight {
    background: rgba(0, 255, 242, 0.1);
    border: 1px solid rgba(0, 255, 242, 0.3);
}

.multiplier-row.champion {
    background: linear-gradient(135deg, rgba(255, 214, 10, 0.2), rgba(255, 107, 0, 0.2));
    border: 1px solid rgba(255, 214, 10, 0.5);
}

.mult-desc {
    color: var(--text-secondary);
}

.mult-value {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--text-primary);
}

.mult-value.highlight-cyan {
    color: var(--primary-cyan);
    text-shadow: var(--glow-cyan);
}

.mult-value.highlight-gold {
    color: var(--primary-yellow);
    text-shadow: 0 0 10px rgba(255, 214, 10, 0.5);
}

.calc-explanation {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.8;
}

.calc-explanation p {
    margin: 4px 0;
}

.modal-footer {
    text-align: center;
    padding-top: var(--spacing-md);
}

/* 移动端适配 */
@media (max-width: 600px) {
    .airdrop-calculator {
        padding: var(--spacing-md);
    }
    
    .calc-grid {
        flex-direction: column;
    }
    
    .calc-item {
        width: 100%;
    }
    
    .calc-operator {
        transform: rotate(90deg);
        padding: var(--spacing-xs) 0;
    }
    
    .calc-value {
        font-size: 1.3rem;
    }
    
    .result-value {
        font-size: 2rem;
    }
    
    .multiplier-modal {
        max-width: 95%;
    }
}

.hero-actions {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 16px 32px;
    background: var(--gradient-primary);
    border-radius: var(--radius-xl);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--bg-dark);
    transition: all var(--transition-normal);
    box-shadow: var(--glow-cyan);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 40px rgba(0, 255, 242, 0.6);
}

.btn-arrow {
    font-size: 1.3rem;
    transition: transform var(--transition-normal);
}

.btn-primary:hover .btn-arrow {
    transform: translateX(5px);
}

.btn-secondary {
    padding: 16px 32px;
    background: transparent;
    border: 2px solid var(--primary-cyan);
    border-radius: var(--radius-xl);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-cyan);
    transition: all var(--transition-normal);
}

.btn-secondary:hover {
    background: rgba(0, 255, 242, 0.1);
    box-shadow: var(--glow-cyan);
}

/* 悬浮卡片动画 */
.hero-visual {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.floating-cards {
    position: relative;
    width: 100%;
    height: 100%;
}

.float-card {
    position: absolute;
    font-size: 4rem;
    opacity: 0.3;
    animation: float 6s ease-in-out infinite;
}

.float-card.card-1 { top: 15%; left: 10%; animation-delay: 0s; }
.float-card.card-2 { top: 25%; right: 15%; animation-delay: 1s; }
.float-card.card-3 { bottom: 30%; left: 5%; animation-delay: 2s; }
.float-card.card-4 { bottom: 20%; right: 10%; animation-delay: 3s; }
.float-card.card-5 { top: 50%; left: 50%; animation-delay: 4s; }

/* ============================================
   跑马灯
   ============================================ */
.ticker-bar {
    background: rgba(0, 255, 242, 0.05);
    border-top: 1px solid rgba(0, 255, 242, 0.2);
    border-bottom: 1px solid rgba(0, 255, 242, 0.2);
    padding: var(--spacing-sm) 0;
    overflow: hidden;
}

.ticker-content {
    display: flex;
    gap: var(--spacing-xl);
    animation: ticker 30s linear infinite;
    white-space: nowrap;
}

.ticker-item {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* ============================================
   通用区块样式
   ============================================ */
.section-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--spacing-xxl) var(--spacing-md);
}

.section-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.section-title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 5vw, 2.5rem);
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
}

.section-title .en-title {
    font-size: 0.6em;
    color: var(--text-muted);
    font-weight: 400;
    display: block;
    margin-top: 5px;
}

.section-desc {
    color: var(--text-secondary);
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
}

/* ============================================
   国家墙 Nation Wall
   ============================================ */
.nations-section {
    background: linear-gradient(180deg, transparent, rgba(0, 255, 242, 0.02), transparent);
}

/* 热度榜 */
.hot-nations {
    margin-bottom: var(--spacing-xl);
}

.hot-title {
    font-family: var(--font-display);
    font-size: 1.2rem;
    margin-bottom: var(--spacing-md);
    text-align: center;
}

.hot-list {
    display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.hot-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 8px 16px;
    background: var(--bg-card);
    border: var(--border-subtle);
    border-radius: var(--radius-xl);
    transition: all var(--transition-normal);
}

.hot-item:hover {
    border-color: var(--primary-cyan);
    box-shadow: var(--glow-cyan);
}

.hot-item.fire {
    border-color: #ff6b00;
    animation: fire-glow 1s ease-in-out infinite;
}

.hot-rank {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--primary-yellow);
}

.hot-flag {
    font-size: 1.5rem;
}

.hot-name {
    font-weight: 500;
}

.hot-count {
    color: var(--primary-cyan);
    font-family: var(--font-display);
    font-size: 0.9rem;
}

/* 查看完整排行榜按钮 */
.view-full-ranking {
    display: block;
    margin: var(--spacing-md) auto 0;
    padding: 10px 24px;
    background: linear-gradient(135deg, rgba(255, 214, 10, 0.2), rgba(255, 107, 0, 0.2));
    border: 1px solid rgba(255, 214, 10, 0.4);
    border-radius: var(--radius-xl);
    color: var(--primary-yellow);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.view-full-ranking:hover {
    background: linear-gradient(135deg, rgba(255, 214, 10, 0.3), rgba(255, 107, 0, 0.3));
    box-shadow: 0 0 20px rgba(255, 214, 10, 0.3);
    transform: translateY(-2px);
}

/* ============================================
   完整排行榜弹窗样式
   ============================================ */
.ranking-modal .ranking-content {
    max-width: 800px;
    width: 95%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.ranking-header {
    text-align: center;
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: var(--spacing-md);
}

.ranking-title {
    font-family: var(--font-display);
    font-size: 1.8rem;
    background: var(--gradient-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
}

.ranking-subtitle {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.ranking-stats-bar {
    display: flex;
    justify-content: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-md);
    background: rgba(255, 214, 10, 0.05);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
}

.ranking-stat-item {
    text-align: center;
}

.ranking-stat-item .stat-label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.ranking-stat-item .stat-value {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary-yellow);
}

.ranking-list-container {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.ranking-list-header {
    display: grid;
    grid-template-columns: 60px 1fr 80px 120px 80px;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(0, 255, 242, 0.1);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: var(--spacing-xs);
}

.ranking-list {
    flex: 1;
    overflow-y: auto;
    padding-right: 8px;
}

.ranking-list::-webkit-scrollbar {
    width: 6px;
}

.ranking-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.ranking-list::-webkit-scrollbar-thumb {
    background: rgba(0, 255, 242, 0.3);
    border-radius: 3px;
}

.ranking-item {
    display: grid;
    grid-template-columns: 60px 1fr 80px 120px 80px;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-xs);
    align-items: center;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.ranking-item:hover {
    background: var(--bg-card-hover);
    border-color: rgba(0, 255, 242, 0.3);
}

.ranking-item.gold {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 165, 0, 0.1));
    border-color: rgba(255, 215, 0, 0.4);
}

.ranking-item.silver {
    background: linear-gradient(135deg, rgba(192, 192, 192, 0.15), rgba(169, 169, 169, 0.1));
    border-color: rgba(192, 192, 192, 0.4);
}

.ranking-item.bronze {
    background: linear-gradient(135deg, rgba(205, 127, 50, 0.15), rgba(184, 115, 51, 0.1));
    border-color: rgba(205, 127, 50, 0.4);
}

.ranking-item.my-top {
    border-color: var(--primary-pink);
    box-shadow: 0 0 10px rgba(255, 0, 170, 0.2);
}

.ranking-item .col-rank {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--primary-yellow);
}

.ranking-item.gold .col-rank,
.ranking-item.silver .col-rank,
.ranking-item.bronze .col-rank {
    font-size: 1.5rem;
}

.ranking-item .col-nation {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.ranking-item .nation-flag {
    font-size: 1.8rem;
}

.ranking-item .nation-name {
    font-weight: 600;
}

.ranking-item .col-group {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.ranking-item .col-boosts {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ranking-item .boost-num {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--primary-cyan);
}

.ranking-item .my-contribution {
    font-size: 0.75rem;
    color: var(--primary-pink);
}

.boost-btn-small {
    padding: 6px 12px;
    background: rgba(0, 255, 242, 0.1);
    border: 1px solid rgba(0, 255, 242, 0.3);
    border-radius: var(--radius-sm);
    color: var(--primary-cyan);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.boost-btn-small:hover {
    background: rgba(0, 255, 242, 0.2);
    box-shadow: 0 0 10px rgba(0, 255, 242, 0.3);
}

/* 筛选器 */
.nations-filter {
    display: flex;
    justify-content: center;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-lg);
    flex-wrap: wrap;
}

.filter-btn {
    padding: 8px 16px;
    background: var(--bg-card);
    border: var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.9rem;
    transition: all var(--transition-normal);
}

.filter-btn:hover,
.filter-btn.active {
    background: rgba(0, 255, 242, 0.1);
    border-color: var(--primary-cyan);
    color: var(--primary-cyan);
}

/* 国家网格 */
.nations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--spacing-md);
}

.nation-card {
    position: relative;
    background: var(--bg-card);
    border: var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-normal);
    overflow: hidden;
}

.nation-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--gradient-primary);
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.nation-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary-cyan);
    box-shadow: var(--glow-cyan);
}

.nation-card:hover::before {
    opacity: 0.05;
}

.nation-card.hot::after {
    content: '🔥';
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 1.2rem;
    animation: bounce 0.5s ease infinite;
}

.nation-flag {
    font-size: 3rem;
    margin-bottom: var(--spacing-xs);
    position: relative;
    z-index: 1;
}

.nation-name {
    font-weight: 600;
    margin-bottom: 5px;
    position: relative;
    z-index: 1;
}

.nation-group {
    font-size: 0.8rem;
    color: var(--text-muted);
    position: relative;
    z-index: 1;
}

.nation-likes {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: var(--spacing-xs);
    font-size: 0.85rem;
    color: var(--primary-cyan);
    font-family: var(--font-display);
    position: relative;
    z-index: 1;
}

/* ============================================
   国家详情弹窗
   ============================================ */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-normal);
}

.modal.active {
    opacity: 1;
    visibility: visible;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
}

.modal-content {
    position: relative;
    background: var(--bg-card);
    border: var(--border-glow);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    transform: scale(0.9);
    transition: transform var(--transition-normal);
}

.modal.active .modal-content {
    transform: scale(1);
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-normal);
}

.modal-close:hover {
    background: rgba(255, 0, 170, 0.3);
    color: var(--primary-pink);
}

.modal-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.modal-flag {
    font-size: 4rem;
}

.modal-title {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 700;
}

.modal-group {
    color: var(--text-muted);
}

.modal-stats {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.modal-stat {
    flex: 1;
    text-align: center;
    padding: var(--spacing-sm);
    background: rgba(0, 255, 242, 0.05);
    border-radius: var(--radius-sm);
}

.modal-stat.my-boost {
    background: rgba(255, 107, 0, 0.1);
    border: 1px solid rgba(255, 107, 0, 0.3);
}

.modal-stat.my-boost .stat-num {
    color: #ff6b00;
}

.modal-stat .stat-num {
    display: block;
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary-cyan);
}

.modal-stat .stat-text {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* 助力信息栏 */
.boost-info-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: linear-gradient(90deg, rgba(255, 107, 0, 0.1), rgba(255, 0, 170, 0.1));
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-lg);
    font-size: 0.85rem;
}

.boost-remaining {
    color: #ff6b00;
    font-weight: 600;
}

.boost-tip {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.modal-contract {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm);
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-lg);
    font-size: 0.9rem;
}

.contract-label {
    color: var(--text-muted);
}

.contract-address {
    font-family: monospace;
    color: var(--primary-cyan);
}

.copy-btn {
    margin-left: auto;
    padding: 5px 10px;
    background: rgba(0, 255, 242, 0.1);
    border-radius: var(--radius-sm);
    transition: all var(--transition-normal);
}

.copy-btn:hover {
    background: rgba(0, 255, 242, 0.2);
}

.modal-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

.action-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    font-weight: 600;
    transition: all var(--transition-normal);
}

.action-btn.free-like {
    position: relative;
    overflow: visible;
    background: rgba(0, 255, 242, 0.1);
    border: 1px solid rgba(0, 255, 242, 0.3);
    color: var(--primary-cyan);
}

.action-btn.free-like:hover {
    background: rgba(0, 255, 242, 0.2);
    box-shadow: var(--glow-cyan);
}

.action-btn.free-like:active {
    transform: scale(0.95);
}

/* 助力按钮禁用状态 */
.action-btn.free-like.disabled {
    background: rgba(100, 100, 100, 0.2);
    border-color: rgba(100, 100, 100, 0.3);
    color: var(--text-muted);
    cursor: not-allowed;
}

.action-btn.free-like.disabled:hover {
    background: rgba(100, 100, 100, 0.2);
    box-shadow: none;
    transform: none;
}

/* 助力动画 */
.action-btn.free-like.boost-animating {
    animation: boostPulse 0.3s ease;
}

@keyframes boostPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); background: rgba(0, 255, 136, 0.3); }
    100% { transform: scale(1); }
}

/* +1 飘动效果 */
.boost-floater {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    font-weight: bold;
    color: #00ff88;
    text-shadow: 0 0 10px #00ff88;
    animation: floatUp 0.6s ease-out forwards;
    pointer-events: none;
    z-index: 10;
}

@keyframes floatUp {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -150%) scale(1.5);
    }
}

/* 助力值显示样式 */
.boost-display {
    background: linear-gradient(135deg, rgba(255, 107, 0, 0.2), rgba(255, 0, 170, 0.2)) !important;
    border: 1px solid rgba(255, 107, 0, 0.4) !important;
}

.boost-display .boost-value {
    color: #ff6b00;
    font-weight: 700;
}

.action-btn.mint-badge {
    background: var(--gradient-primary);
    color: var(--bg-dark);
}

.action-btn.mint-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(0, 255, 242, 0.5);
}

.action-icon {
    font-size: 1.5rem;
}

.action-text {
    flex: 1;
    text-align: left;
}

.action-reward,
.action-cost {
    font-size: 0.9rem;
    opacity: 0.9;
}

.action-bonus {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--primary-yellow);
    margin-top: 2px;
}

.modal-benefits h4 {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: var(--spacing-sm);
}

.modal-benefits ul {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.modal-benefits li {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* ============================================
   任务中心 Missions
   ============================================ */
.missions-section {
    background: linear-gradient(180deg, transparent, rgba(255, 0, 170, 0.02), transparent);
}

.daily-progress {
    max-width: 600px;
    margin: 0 auto var(--spacing-xl);
    padding: var(--spacing-lg);
    background: var(--bg-card);
    border: var(--border-glow);
    border-radius: var(--radius-lg);
}

.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.progress-title {
    font-weight: 600;
}

.progress-value {
    font-family: var(--font-display);
    color: var(--primary-cyan);
}

.progress-bar {
    height: 10px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: var(--spacing-sm);
}

.progress-fill {
    height: 100%;
    background: var(--gradient-primary);
    border-radius: 5px;
    transition: width var(--transition-slow);
}

.progress-reset {
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.progress-reset span {
    color: var(--primary-yellow);
    font-family: var(--font-display);
}

/* 任务卡片 */
.missions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
    gap: var(--spacing-md);
}

.mission-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: var(--bg-card);
    border: var(--border-subtle);
    border-radius: var(--radius-md);
    transition: all var(--transition-normal);
    min-height: 100px;
}

.mission-card:hover {
    border-color: var(--primary-cyan);
    transform: translateX(5px);
}

.mission-card.featured {
    border-color: var(--primary-pink);
    background: linear-gradient(135deg, rgba(255, 0, 170, 0.05), rgba(0, 255, 242, 0.05));
}

.mission-card.featured:hover {
    box-shadow: var(--glow-pink);
}

.mission-card.completed {
    opacity: 0.6;
}

.mission-card.completed::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    color: var(--primary-cyan);
    opacity: 0.3;
}

.mission-badge {
    position: absolute;
    top: -10px;
    right: 15px;
    padding: 4px 12px;
    background: var(--gradient-gold);
    border-radius: var(--radius-xl);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--bg-dark);
}

.mission-icon {
    font-size: 2.5rem;
    flex-shrink: 0;
    width: 50px;
    text-align: center;
}

.mission-content {
    flex: 1;
    min-width: 150px;
}

.mission-title {
    font-weight: 600;
    margin-bottom: 5px;
    white-space: nowrap;
}

.mission-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.mission-streak {
    margin-top: 5px;
    font-size: 0.8rem;
    color: var(--primary-yellow);
}

.mission-reward {
    text-align: center;
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(0, 255, 242, 0.1);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    min-width: 70px;
}

.reward-value {
    display: block;
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary-cyan);
    white-space: nowrap;
}

.reward-label {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.mission-btn {
    padding: 12px 24px;
    background: var(--gradient-primary);
    border-radius: var(--radius-sm);
    font-weight: 600;
    color: var(--bg-dark);
    flex-shrink: 0;
    transition: all var(--transition-normal);
    white-space: nowrap;
}

.mission-btn:hover {
    transform: scale(1.05);
    box-shadow: var(--glow-cyan);
}

.mission-btn:disabled {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
    cursor: not-allowed;
}

/* ============================================
   邀请裂变 Invite
   ============================================ */
.invite-section {
    background: linear-gradient(180deg, transparent, rgba(157, 78, 221, 0.02), transparent);
}

.invite-link-box {
    max-width: 600px;
    margin: 0 auto var(--spacing-xl);
    padding: var(--spacing-lg);
    background: var(--bg-card);
    border: var(--border-glow);
    border-radius: var(--radius-lg);
    text-align: center;
}

.invite-link-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-md);
}

.link-icon {
    font-size: 1.5rem;
}

.link-title {
    font-weight: 600;
}

.invite-link-input {
    display: flex;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-md);
}

.invite-link-input input {
    flex: 1;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--primary-cyan);
    font-family: monospace;
}

.copy-link-btn {
    padding: 12px 24px;
    background: var(--gradient-primary);
    border-radius: var(--radius-sm);
    font-weight: 600;
    color: var(--bg-dark);
    transition: all var(--transition-normal);
}

.copy-link-btn:hover {
    box-shadow: var(--glow-cyan);
}

.invite-stats {
    display: flex;
    justify-content: center;
    gap: var(--spacing-xl);
}

.invite-stat .stat-num {
    display: block;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-cyan);
}

.invite-stat .stat-text {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* 等级系统 */
.rank-system {
    margin-bottom: var(--spacing-xl);
}

.rank-title {
    font-family: var(--font-display);
    font-size: 1.3rem;
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.rank-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-md);
}

.rank-card {
    padding: var(--spacing-lg);
    background: var(--bg-card);
    border: var(--border-subtle);
    border-radius: var(--radius-md);
    text-align: center;
    transition: all var(--transition-normal);
    opacity: 0.6;
}

.rank-card.active {
    opacity: 1;
    border-color: var(--primary-cyan);
    box-shadow: var(--glow-cyan);
}

.rank-card:hover {
    transform: translateY(-5px);
}

.rank-icon {
    font-size: 3rem;
    margin-bottom: var(--spacing-sm);
}

.rank-name {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: var(--spacing-xs);
}

.rank-requirement {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: var(--spacing-sm);
}

.rank-benefit {
    font-size: 0.85rem;
    color: var(--primary-cyan);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: rgba(0, 255, 242, 0.1);
    border-radius: var(--radius-sm);
}

/* 团队Buff */
.team-buff {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    max-width: 600px;
    margin: 0 auto;
    padding: var(--spacing-lg);
    background: linear-gradient(135deg, rgba(255, 214, 10, 0.1), rgba(255, 107, 0, 0.1));
    border: 1px solid var(--primary-yellow);
    border-radius: var(--radius-md);
}

.buff-icon {
    font-size: 2.5rem;
    animation: pulse 1s infinite;
}

.buff-content {
    flex: 1;
}

.buff-content h4 {
    font-family: var(--font-display);
    color: var(--primary-yellow);
    margin-bottom: 5px;
}

.buff-content p {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.buff-content strong {
    color: var(--primary-yellow);
}

.buff-progress {
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--primary-yellow);
}

/* ============================================
   代币权益 Tokenomics
   ============================================ */
.tokenomics-section {
    background: linear-gradient(180deg, transparent, rgba(67, 97, 238, 0.02), transparent);
}

.formula-box {
    max-width: 800px;
    margin: 0 auto var(--spacing-xl);
    padding: var(--spacing-lg);
    background: var(--bg-card);
    border: var(--border-glow);
    border-radius: var(--radius-lg);
    text-align: center;
}

.formula-box h3 {
    font-family: var(--font-display);
    margin-bottom: var(--spacing-md);
    color: var(--primary-cyan);
}

.formula {
    font-size: 1.1rem;
    font-family: monospace;
    padding: var(--spacing-md);
    background: rgba(0, 255, 242, 0.05);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
}

/* 升级版公式卡片 */
.formula-box.featured {
    max-width: 900px;
    border: 2px solid var(--primary-cyan);
    background: linear-gradient(135deg, rgba(0, 255, 242, 0.05), rgba(157, 78, 221, 0.05));
}

.formula-main {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--primary-cyan);
}

.formula-example {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-md);
    background: var(--bg-dark);
    border-radius: var(--radius-md);
    text-align: left;
}

.example-title {
    font-weight: 600;
    color: var(--primary-yellow);
    margin-bottom: var(--spacing-md);
    text-align: center;
}

.example-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.example-row {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: var(--spacing-md);
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.example-row.result {
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-md);
    border-top: 1px dashed rgba(255, 255, 255, 0.2);
    font-weight: 600;
    color: var(--text-primary);
}

.example-value {
    font-family: var(--font-display);
    font-weight: 700;
    text-align: right;
}

.example-value.highlight {
    color: var(--primary-yellow);
    text-shadow: 0 0 10px rgba(255, 214, 10, 0.5);
    font-size: 1.1rem;
}

/* 规则卡片网格 */
.rules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
    margin: var(--spacing-xl) 0;
}

.rule-card {
    position: relative;
    padding: var(--spacing-lg);
    background: var(--bg-card);
    border: var(--border-subtle);
    border-radius: var(--radius-lg);
    transition: all var(--transition-normal);
}

.rule-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary-cyan);
    box-shadow: var(--glow-cyan);
}

.rule-card.featured {
    border-color: var(--primary-cyan);
    background: linear-gradient(135deg, rgba(0, 255, 242, 0.05), rgba(157, 78, 221, 0.05));
}

.rule-badge {
    position: absolute;
    top: -10px;
    right: 16px;
    padding: 4px 12px;
    background: var(--gradient-primary);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--bg-dark);
}

.rule-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.rule-icon {
    font-size: 1.5rem;
}

.rule-header h4 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--text-primary);
}

.rule-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.rule-group-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-top: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
}

.rule-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-sm);
}

.rule-item.small {
    padding: 6px 10px;
    font-size: 0.85rem;
}

.rule-item.highlight {
    background: rgba(0, 255, 242, 0.1);
    border: 1px solid rgba(0, 255, 242, 0.2);
}

.rule-desc {
    color: var(--text-secondary);
}

.rule-value {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--text-primary);
}

.rule-value.cyan {
    color: var(--primary-cyan);
    text-shadow: var(--glow-cyan);
}

.rule-value.gold {
    color: var(--primary-yellow);
    text-shadow: 0 0 10px rgba(255, 214, 10, 0.5);
}

.rule-tip {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
    font-size: 0.85rem;
    color: var(--text-muted);
    text-align: center;
}

/* 代币权益标题 */
.token-benefits-section {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-xl);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.benefits-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: var(--spacing-lg);
    color: var(--primary-yellow);
}

/* 移动端适配 */
@media (max-width: 768px) {
    .example-row {
        grid-template-columns: 1fr;
        gap: var(--spacing-xs);
        text-align: center;
    }
    
    .example-value {
        text-align: center;
    }
    
    .rules-grid {
        grid-template-columns: 1fr;
    }
    
    .rule-item {
        flex-direction: column;
        gap: 4px;
        text-align: center;
    }
}

/* 系数卡片 */
.multiplier-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.multiplier-card {
    padding: var(--spacing-lg);
    background: var(--bg-card);
    border: var(--border-subtle);
    border-radius: var(--radius-md);
}

.multiplier-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: var(--border-subtle);
}

.multiplier-icon {
    font-size: 1.5rem;
}

.multiplier-title {
    font-family: var(--font-display);
    font-weight: 600;
}

.multiplier-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.multiplier-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-xs) 0;
}

.multiplier-item.special {
    color: var(--primary-yellow);
    font-weight: 600;
}

.multiplier-value {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--text-muted);
}

.multiplier-value.highlight {
    color: var(--primary-cyan);
    text-shadow: var(--glow-cyan);
}

/* 权益卡片 */
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-md);
}

.benefit-card {
    position: relative;
    padding: var(--spacing-lg);
    background: var(--bg-card);
    border: var(--border-subtle);
    border-radius: var(--radius-md);
    text-align: center;
    transition: all var(--transition-normal);
}

.benefit-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary-cyan);
}

.benefit-card.featured {
    border-color: var(--primary-yellow);
    background: linear-gradient(135deg, rgba(255, 214, 10, 0.05), rgba(255, 107, 0, 0.05));
}

.benefit-badge {
    position: absolute;
    top: -10px;
    right: 20px;
    padding: 4px 12px;
    background: var(--gradient-gold);
    border-radius: var(--radius-xl);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--bg-dark);
}

.benefit-icon {
    font-size: 3rem;
    margin-bottom: var(--spacing-sm);
}

.benefit-card h4 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    margin-bottom: var(--spacing-sm);
}

.benefit-card p {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* ============================================
   防刷说明
   ============================================ */
.security-section {
    padding: var(--spacing-xl) var(--spacing-md);
}

.security-box {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--spacing-lg);
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
}

.security-box h3 {
    font-family: var(--font-display);
    text-align: center;
    margin-bottom: var(--spacing-md);
}

.security-items {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.security-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.security-icon {
    font-size: 1.3rem;
}

/* ============================================
   页脚 Footer
   ============================================ */
.footer {
    background: var(--bg-darker);
    border-top: var(--border-subtle);
    padding: var(--spacing-xxl) var(--spacing-md) var(--spacing-lg);
}

.footer-container {
    max-width: 1400px;
    margin: 0 auto;
}

.footer-brand {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.footer-logo {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
}

.footer-desc {
    color: var(--text-muted);
    max-width: 400px;
    margin: 0 auto;
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.footer-column h4 {
    font-family: var(--font-display);
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
}

.footer-column a {
    display: block;
    padding: 5px 0;
    color: var(--text-muted);
    font-size: 0.9rem;
    transition: color var(--transition-normal);
}

.footer-column a:hover {
    color: var(--primary-cyan);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--spacing-lg);
    border-top: var(--border-subtle);
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.footer-bottom p {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.footer-social {
    display: flex;
    gap: var(--spacing-sm);
}

.social-link {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    font-size: 1.2rem;
    transition: all var(--transition-normal);
}

.social-link:hover {
    background: var(--primary-cyan);
    transform: translateY(-3px);
}

/* ============================================
   Toast 通知
   ============================================ */
.toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--bg-card);
    border: var(--border-glow);
    border-radius: var(--radius-xl);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    z-index: 3000;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-normal);
}

.toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    visibility: visible;
}

.toast.success {
    border-color: #00ff88;
}

.toast.error {
    border-color: #ff4444;
}

.toast-icon {
    font-size: 1.5rem;
}

.toast-message {
    font-weight: 500;
}

/* ============================================
   钱包连接弹窗
   ============================================ */
.wallet-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-normal);
}

.wallet-modal.active {
    opacity: 1;
    visibility: visible;
}

.wallet-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
}

.wallet-modal-content {
    position: relative;
    background: var(--bg-card);
    border: var(--border-glow);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    max-width: 640px;
    width: 95%;
    max-height: 90vh;
    overflow-y: auto;
    text-align: center;
}

.wallet-modal-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    margin-bottom: var(--spacing-xs);
    color: #ffffff;
}

.wallet-modal-desc {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: var(--spacing-md);
}

/* 链选择器 */
.chain-selector {
    margin-bottom: var(--spacing-lg);
    text-align: left;
}

.chain-selector-title,
.wallet-selector-title {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: var(--spacing-sm);
    font-weight: 500;
}

.chain-tabs {
    display: flex;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
    flex-wrap: wrap;
}

.chain-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl);
    color: var(--text-secondary);
    font-size: 0.9rem;
    transition: all var(--transition-normal);
}

.chain-tab:hover {
    background: rgba(0, 255, 242, 0.1);
    border-color: rgba(0, 255, 242, 0.3);
}

.chain-tab.active {
    background: rgba(0, 255, 242, 0.15);
    border-color: var(--primary-cyan);
    color: var(--primary-cyan);
}

.chain-icon {
    font-size: 1.1rem;
}

.chain-list {
    display: none;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.chain-list.active {
    display: flex;
}

.chain-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.85rem;
    transition: all var(--transition-normal);
}

.chain-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

.chain-item.active {
    background: rgba(0, 255, 242, 0.1);
    border-color: var(--primary-cyan);
    color: var(--primary-cyan);
}

.chain-logo {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
}

/* 钱包选择器 */
.wallet-selector {
    text-align: left;
    margin-bottom: var(--spacing-md);
}

.wallet-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-sm);
    max-height: 480px;
    overflow-y: auto;
    padding-right: 4px;
}

.wallet-grid::-webkit-scrollbar {
    width: 4px;
}

.wallet-grid::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.05);
    border-radius: 4px;
}

.wallet-grid::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.2);
    border-radius: 4px;
}

.wallet-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: var(--spacing-md) var(--spacing-sm);
    background: rgba(255, 255, 255, 0.03);
    border: var(--border-subtle);
    border-radius: var(--radius-md);
    transition: all var(--transition-normal);
    position: relative;
}

.wallet-option:hover {
    background: rgba(0, 255, 242, 0.1);
    border-color: var(--primary-cyan);
    transform: translateY(-2px);
}

.wallet-logo {
    font-size: 2rem;
}

.wallet-logo-img {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    object-fit: contain;
    background: rgba(255, 255, 255, 0.1);
    padding: 4px;
}

.wallet-name {
    font-weight: 500;
    font-size: 0.85rem;
    text-align: center;
    color: #ffffff;
}

.wallet-tag {
    position: absolute;
    top: -6px;
    right: -6px;
    padding: 2px 8px;
    font-size: 0.65rem;
    font-weight: 600;
    border-radius: var(--radius-xl);
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
}

.wallet-tag.popular {
    background: var(--gradient-gold);
    color: var(--bg-dark);
}

.wallet-note {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: var(--spacing-xs);
}

.wallet-modal-footer {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.wallet-modal-footer a {
    color: var(--primary-cyan);
}

/* ============================================
   动画
   ============================================ */
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

@keyframes glow-pulse {
    0%, 100% { box-shadow: 0 0 10px rgba(255, 214, 10, 0.3); }
    50% { box-shadow: 0 0 20px rgba(255, 214, 10, 0.6); }
}

@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(5deg); }
}

@keyframes ticker {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes fire-glow {
    0%, 100% { box-shadow: 0 0 10px rgba(255, 107, 0, 0.3); }
    50% { box-shadow: 0 0 25px rgba(255, 107, 0, 0.7); }
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* ============================================
   响应式设计
   ============================================ */
@media (max-width: 1024px) {
    .nav-links {
        display: none;
    }
    
    .mobile-menu-btn {
        display: flex;
    }
    
    .mobile-menu {
        display: block;
    }
    
    .hero-stats {
        gap: var(--spacing-lg);
    }
    
    .stat-value {
        font-size: 1.5rem;
    }
    
    .missions-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    html {
        font-size: 14px;
    }
    
    .nav-container {
        height: 56px;
        padding: 0 12px;
        gap: 8px;
        overflow: visible;
    }
    
    .logo {
        font-size: 1rem;
        flex-shrink: 1;
        min-width: 0;
    }
    
    /* Logo 图片和文字缩小 */
    .logo img {
        height: 32px !important;
    }
    
    .logo span {
        font-size: 16px !important;
    }
    
    .points-display {
        display: none;
    }
    
    /* 钱包按钮 - 移动端修复 */
    .btn-connect {
        padding: 6px 12px;
        font-size: 0.75rem;
        white-space: nowrap;
        max-width: 140px;
        overflow: hidden;
    }
    
    .btn-connect.connected {
        padding: 6px 12px;
        max-width: 130px;
    }
    
    .wallet-text {
        display: inline;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 90px;
    }
    
    .wallet-icon {
        display: none;
    }
    
    /* 页面内容区的连接按钮不受导航栏 max-width 限制 */
    .hero-btn.btn-connect,
    .hero-btn.primary.btn-connect,
    .connect-btn-large.btn-connect,
    .games-cta-btn.btn-connect,
    .earn-cta-btn.btn-connect,
    .connect-banner-btn.btn-connect {
        max-width: none;
        overflow: visible;
        font-size: 14px;
        padding: 12px 24px;
    }

    .wallet-status-dot {
        width: 6px;
        height: 6px;
    }
    
    .nav-actions {
        gap: 6px;
        flex-shrink: 1;
        min-width: 0;
    }
    
    .language-switcher {
        margin-right: 2px;
    }
    
    .lang-btn {
        padding: 4px 6px;
    }
    
    .lang-arrow {
        display: none;
    }
    
    .hero {
        padding: 100px var(--spacing-md) var(--spacing-xl);
    }
    
    .hero-title {
        font-size: clamp(2.5rem, 15vw, 5rem);
    }
    
    /* Hero 统计项 - 平板横向 */
    .hero-stats {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between;
        gap: var(--spacing-sm);
    }
    
    .stat-item {
        flex: 1;
    }
    
    .hero-actions {
        flex-direction: column;
        width: 100%;
    }
    
    .btn-primary,
    .btn-secondary {
        width: 100%;
        justify-content: center;
    }
    
    .nations-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: var(--spacing-sm);
    }
    
    .nation-card {
        padding: var(--spacing-sm);
    }
    
    .nation-flag {
        font-size: 2.5rem;
    }
    
    .nation-name {
        font-size: 0.85rem;
    }
    
    .missions-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .mission-card {
        flex-wrap: wrap;
        justify-content: space-between;
    }
    
    .mission-content {
        min-width: calc(100% - 80px);
        order: 2;
    }
    
    .mission-icon {
        order: 1;
    }
    
    .mission-reward {
        order: 3;
    }
    
    /* 弹窗统计 - 横向 */
    .modal-stats {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between;
        gap: 8px;
    }
    
    .modal-stat {
        flex: 1 !important;
        min-width: 0;
        padding: 8px 4px;
    }
    
    .modal-stat .stat-num {
        font-size: 1rem;
    }
    
    .modal-stat .stat-text {
        font-size: 0.6rem;
        white-space: nowrap;
    }
    
    /* 排行榜统计 - 横向 */
    .ranking-stats-bar {
        display: flex !important;
        flex-direction: row !important;
    }
    
    .mission-btn {
        width: 100%;
        margin-top: var(--spacing-sm);
        order: 4;
    }
    
    .rank-cards {
        grid-template-columns: 1fr;
    }
    
    .team-buff {
        flex-direction: column;
        text-align: center;
    }
    
    .multiplier-grid {
        grid-template-columns: 1fr;
    }
    
    .benefits-grid {
        grid-template-columns: 1fr;
    }
    
    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
    
    .modal-content {
        padding: var(--spacing-md);
    }
    
    .modal-stats {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between;
        gap: 8px;
    }
    
    .modal-stat {
        flex: 1 !important;
        min-width: 0;
        padding: 8px 4px;
    }
    
    .modal-stat .stat-num {
        font-size: 1rem;
    }
    
    .modal-stat .stat-text {
        font-size: 0.6rem;
        white-space: nowrap;
    }
    
    .invite-link-input {
        flex-direction: column;
    }
    
    .copy-link-btn {
        width: 100%;
    }
    
    /* 排行榜移动端样式 */
    .ranking-stats-bar {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .ranking-list-header {
        display: none;
    }
    
    .ranking-item {
        grid-template-columns: 50px 1fr auto;
        gap: var(--spacing-xs);
        padding: var(--spacing-sm);
    }
    
    .ranking-item .col-group {
        display: none;
    }
    
    .ranking-item .col-action {
        grid-column: span 3;
        margin-top: var(--spacing-xs);
    }
    
    .boost-btn-small {
        width: 100%;
    }
}

@media (max-width: 480px) {
    /* ========== 导航栏 ========== */
    .nav-container {
        padding: 0 8px;
        height: 52px;
        gap: 6px;
    }
    
    .logo img {
        height: 28px !important;
    }
    
    .logo span {
        font-size: 14px !important;
    }
    
    .nav-actions {
        gap: 4px;
    }
    
    .btn-connect {
        padding: 5px 10px;
        font-size: 0.7rem;
        border-radius: 8px;
        max-width: 120px;
    }
    
    .btn-connect.connected {
        padding: 5px 10px;
        max-width: 110px;
    }
    
    .wallet-text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 65px;
    }
    
    /* 页面内容区的连接按钮不受导航栏 max-width 限制 */
    .hero-btn.btn-connect,
    .hero-btn.primary.btn-connect,
    .connect-btn-large.btn-connect,
    .games-cta-btn.btn-connect,
    .earn-cta-btn.btn-connect,
    .connect-banner-btn.btn-connect {
        max-width: none;
        overflow: visible;
        font-size: 13px;
        padding: 10px 20px;
    }
    
    .language-switcher {
        margin-right: 0;
    }
    
    .lang-btn {
        padding: 3px 5px;
    }
    
    .lang-code {
        display: none;
    }
    
    .lang-flag {
        font-size: 1rem;
    }
    
    /* ========== 基础布局 ========== */
    .section-container {
        padding: var(--spacing-lg) var(--spacing-sm);
    }
    
    .section-header {
        margin-bottom: var(--spacing-md);
    }
    
    .section-title {
        font-size: 1.3rem;
    }
    
    .section-desc {
        font-size: 0.8rem;
    }
    
    /* ========== Hero 区域 ========== */
    .hero {
        padding-top: 80px;
        min-height: auto;
    }
    
    .hero-content {
        padding: var(--spacing-md);
    }
    
    .hero-badge {
        font-size: 0.7rem;
        padding: 6px 12px;
    }
    
    .hero-title .title-line {
        font-size: 2.5rem;
    }
    
    .hero-title .title-line.small {
        font-size: 1.5rem;
    }
    
    .hero-subtitle {
        font-size: 1rem;
    }
    
    .hero-desc {
        font-size: 0.85rem;
        line-height: 1.5;
    }
    
    /* Hero 统计项 - 横向排列 */
    .hero-stats {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between;
        gap: 8px;
        padding: var(--spacing-sm);
    }
    
    .stat-item {
        flex: 1;
        text-align: center;
        padding: 8px 4px;
    }
    
    .stat-value {
        font-size: 1.1rem !important;
    }
    
    .stat-label {
        font-size: 0.6rem;
        white-space: nowrap;
    }
    
    /* Hero 按钮 */
    .hero-actions {
        flex-direction: column;
        gap: 10px;
    }
    
    .btn-primary, .btn-secondary {
        width: 100%;
        padding: 12px 20px;
        font-size: 0.9rem;
    }
    
    /* ========== 空投计算面板 ========== */
    .airdrop-calculator {
        padding: var(--spacing-sm);
        margin-top: var(--spacing-md);
    }
    
    .calc-header {
        flex-direction: row;
        gap: 8px;
    }
    
    .calc-title {
        font-size: 0.9rem;
    }
    
    .calc-formula {
        font-size: 0.7rem;
        padding: 8px;
    }
    
    /* 计算项目 - 横向排列，可滚动 */
    .calc-grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        gap: 6px;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
    }
    
    .calc-item {
        flex: 0 0 auto;
        min-width: 70px;
        padding: 8px 6px;
    }
    
    .calc-label {
        font-size: 0.55rem;
        white-space: nowrap;
    }
    
    .calc-value {
        font-size: 1rem;
    }
    
    .calc-sub {
        font-size: 0.5rem;
    }
    
    .calc-operator {
        flex: 0 0 auto;
        font-size: 0.9rem;
        padding: 0 4px;
    }
    
    .calc-result {
        padding: 10px;
    }
    
    .result-label {
        font-size: 0.75rem;
    }
    
    .result-value {
        font-size: 1.3rem;
    }
    
    .calc-tips {
        display: none; /* 移动端隐藏提示，节省空间 */
    }
    
    /* ========== 热门排行 ========== */
    .hot-list {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        gap: 8px;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
    }
    
    .hot-item {
        flex: 0 0 auto;
        min-width: 100px;
        padding: 8px 10px;
    }
    
    .hot-rank {
        font-size: 0.7rem;
    }
    
    .hot-flag {
        font-size: 1.2rem;
    }
    
    .hot-name {
        font-size: 0.7rem;
    }
    
    .hot-count {
        font-size: 0.65rem;
    }
    
    .view-full-ranking {
        font-size: 0.8rem;
        padding: 8px 16px;
    }
    
    /* ========== 国家筛选器 ========== */
    .nations-filter {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 6px;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
    }
    
    .filter-btn {
        flex: 0 0 auto;
        padding: 6px 12px;
        font-size: 0.75rem;
        white-space: nowrap;
    }
    
    /* ========== 国家卡片网格 ========== */
    .nations-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    
    .nation-card {
        padding: 10px 6px;
    }
    
    .nation-flag {
        font-size: 1.8rem;
    }
    
    .nation-name {
        font-size: 0.65rem;
    }
    
    .nation-group {
        font-size: 0.55rem;
    }
    
    .nation-stats {
        display: none; /* 移动端隐藏卡片内统计 */
    }
    
    /* ========== 国家详情弹窗 ========== */
    .modal-content {
        width: 95%;
        max-width: 100%;
        margin: 10px;
        padding: var(--spacing-md);
        max-height: 90vh;
        overflow-y: auto;
    }
    
    .modal-header {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        margin-bottom: var(--spacing-sm);
    }
    
    .modal-flag {
        font-size: 2.5rem;
    }
    
    .modal-title {
        font-size: 1.2rem;
    }
    
    .modal-group {
        font-size: 0.75rem;
    }
    
    /* 弹窗统计项 - 强制横向排列 */
    .modal-stats {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-around;
        gap: 4px;
        margin-bottom: var(--spacing-sm);
    }
    
    .modal-stat {
        flex: 1 !important;
        min-width: 0;
        padding: 8px 4px;
        background: rgba(0, 255, 242, 0.05);
        border-radius: 6px;
    }
    
    .modal-stat .stat-num {
        font-size: 1rem;
        display: block;
    }
    
    .modal-stat .stat-text {
        font-size: 0.55rem;
        white-space: nowrap;
        display: block;
    }
    
    /* 助力信息栏 */
    .boost-info-bar {
        flex-direction: column;
        gap: 4px;
        padding: 8px;
        font-size: 0.7rem;
    }
    
    /* 弹窗操作按钮 - 横向排列 */
    .modal-actions {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px;
    }
    
    .action-btn {
        flex: 1;
        padding: 12px 8px;
    }
    
    .action-icon {
        font-size: 1.2rem;
    }
    
    .action-text {
        font-size: 0.7rem;
    }
    
    .action-cost, .action-reward {
        font-size: 0.6rem;
    }
    
    .action-bonus {
        font-size: 0.55rem;
    }
    
    /* 弹窗好处列表 */
    .modal-benefits {
        padding: 10px;
    }
    
    .modal-benefits h4 {
        font-size: 0.8rem;
    }
    
    .modal-benefits li {
        font-size: 0.7rem;
        padding: 4px 0;
    }
    
    /* ========== 排行榜弹窗 ========== */
    .ranking-content {
        width: 95%;
        max-height: 85vh;
        padding: var(--spacing-sm);
    }
    
    .ranking-title {
        font-size: 1.1rem;
    }
    
    .ranking-subtitle {
        font-size: 0.7rem;
    }
    
    /* 排行榜统计栏 - 横向 */
    .ranking-stats-bar {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between;
        padding: 10px;
        gap: 8px;
    }
    
    .ranking-stat-item {
        flex: 1;
        text-align: center;
    }
    
    .ranking-stat-item .stat-label {
        font-size: 0.6rem;
    }
    
    .ranking-stat-item .stat-value {
        font-size: 0.9rem;
    }
    
    .ranking-list-header {
        font-size: 0.6rem;
        padding: 8px;
    }
    
    .ranking-item {
        padding: 8px;
        font-size: 0.75rem;
    }
    
    .ranking-item .col-rank {
        font-size: 0.7rem;
    }
    
    .boost-btn-small {
        padding: 4px 8px;
        font-size: 0.6rem;
    }
    
    /* ========== 铸造指南卡片 ========== */
    .missions-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .mission-card {
        padding: 12px;
    }
    
    .mission-icon {
        font-size: 1.5rem;
    }
    
    .mission-title {
        font-size: 0.8rem;
    }
    
    .mission-desc {
        font-size: 0.65rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .mission-reward .reward-value {
        font-size: 1rem;
    }
    
    .mission-reward .reward-label {
        font-size: 0.55rem;
    }
    
    .mission-btn {
        padding: 6px 12px;
        font-size: 0.7rem;
    }
    
    /* ========== 邀请系统 ========== */
    .invite-link-box {
        padding: var(--spacing-sm);
    }
    
    .invite-link-input {
        flex-direction: column;
        gap: 8px;
    }
    
    .invite-link-input input {
        font-size: 0.75rem;
    }
    
    .copy-link-btn {
        width: 100%;
    }
    
    /* 邀请统计 - 横向 */
    .invite-stats {
        display: flex !important;
        flex-direction: row !important;
        gap: 10px;
    }
    
    .invite-stat {
        flex: 1;
        text-align: center;
    }
    
    /* 等级卡片 - 横向滚动 */
    .rank-cards {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        gap: 10px;
        padding-bottom: 10px;
        -webkit-overflow-scrolling: touch;
    }
    
    .rank-card {
        flex: 0 0 auto;
        min-width: 120px;
        padding: 12px;
    }
    
    .rank-icon {
        font-size: 1.5rem;
    }
    
    .rank-name {
        font-size: 0.75rem;
    }
    
    .rank-requirement, .rank-benefit {
        font-size: 0.6rem;
    }
    
    /* ========== 空投规则 ========== */
    .formula-box {
        padding: var(--spacing-sm);
    }
    
    .formula-box h3 {
        font-size: 1rem;
    }
    
    .formula {
        font-size: 0.75rem;
        word-break: break-all;
    }
    
    .example-content {
        font-size: 0.7rem;
    }
    
    /* 规则卡片 - 2列 */
    .rules-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .rule-card {
        padding: 12px;
    }
    
    .rule-header h4 {
        font-size: 0.75rem;
    }
    
    .rule-icon {
        font-size: 1.2rem;
    }
    
    .rule-item {
        font-size: 0.65rem;
        padding: 4px 0;
    }
    
    .rule-tip {
        font-size: 0.6rem;
    }
    
    /* 代币权益 - 单列 */
    .benefits-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .benefit-card {
        padding: 12px;
    }
    
    .benefit-icon {
        font-size: 1.5rem;
    }
    
    .benefit-card h4 {
        font-size: 0.85rem;
    }
    
    .benefit-card p {
        font-size: 0.7rem;
    }
    
    /* ========== 安全说明 ========== */
    .security-box {
        padding: var(--spacing-sm);
    }
    
    .security-box h3 {
        font-size: 0.9rem;
    }
    
    .security-item {
        flex-direction: row;
        text-align: left;
        font-size: 0.7rem;
        gap: 8px;
    }
    
    .security-icon {
        font-size: 1rem;
    }
    
    /* ========== 钱包弹窗 ========== */
    .wallet-modal-content {
        width: 95%;
        max-height: 90vh;
        padding: var(--spacing-sm);
    }
    
    .wallet-modal-title {
        font-size: 1.1rem;
    }
    
    .wallet-modal-desc {
        font-size: 0.75rem;
    }
    
    /* 链选择器 - 横向滚动 */
    .chain-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 6px;
        -webkit-overflow-scrolling: touch;
    }
    
    .chain-tab {
        flex: 0 0 auto;
        padding: 6px 12px;
        font-size: 0.75rem;
    }
    
    .chain-list {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 8px;
        -webkit-overflow-scrolling: touch;
    }
    
    .chain-item {
        flex: 0 0 auto;
        padding: 8px 12px;
    }
    
    .chain-logo {
        width: 20px;
        height: 20px;
    }
    
    /* 钱包网格 - 3列 */
    .wallet-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    
    .wallet-option {
        padding: 10px 6px;
    }
    
    .wallet-logo-img {
        width: 28px;
        height: 28px;
    }
    
    .wallet-name {
        font-size: 0.6rem;
    }
    
    .wallet-tag {
        font-size: 0.45rem;
        padding: 1px 4px;
    }
    
    /* ========== 页脚 ========== */
    .footer-container {
        padding: var(--spacing-md);
    }
    
    .footer-links {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    
    .footer-column h4 {
        font-size: 0.85rem;
    }
    
    .footer-column a {
        font-size: 0.75rem;
    }
    
    /* ========== 通用优化 ========== */
    /* 隐藏滚动条但保持可滚动 */
    .hot-list::-webkit-scrollbar,
    .calc-grid::-webkit-scrollbar,
    .nations-filter::-webkit-scrollbar,
    .rank-cards::-webkit-scrollbar,
    .chain-tabs::-webkit-scrollbar,
    .chain-list::-webkit-scrollbar {
        display: none;
    }
    
    .hot-list,
    .calc-grid,
    .nations-filter,
    .rank-cards,
    .chain-tabs,
    .chain-list {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    
    /* 跑马灯 */
    .ticker-bar {
        font-size: 0.75rem;
        padding: 8px 0;
    }
}

/* 暗黑模式强化 - 确保在任何系统主题下都是深色 */
@media (prefers-color-scheme: light) {
    body {
        background-color: var(--bg-dark);
        color: var(--text-primary);
    }
}

/* 打印样式 */
@media print {
    .navbar,
    .mobile-menu,
    .ticker-bar,
    .modal,
    .wallet-modal,
    .toast {
        display: none !important;
    }
    
    body {
        background: white;
        color: black;
    }
}

/* ============================================
   语言切换器样式
   ============================================ */

.language-switcher {
    position: relative;
    margin-right: 0;
    flex-shrink: 0;
}

.lang-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: rgba(15, 15, 25, 0.8);
    border: 1px solid rgba(0, 255, 242, 0.3);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.8rem;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.lang-btn:hover {
    background: rgba(0, 255, 242, 0.1);
    border-color: var(--primary-cyan);
    box-shadow: var(--glow-cyan);
}

.lang-flag {
    font-size: 1.1rem;
}

.lang-code {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.75rem;
}

.lang-arrow {
    font-size: 0.6rem;
    opacity: 0.7;
    transition: transform 0.3s ease;
}

.language-switcher.active .lang-arrow {
    transform: rotate(180deg);
}

.lang-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 150px;
    max-height: 70vh;
    overflow-y: auto;
    background: rgba(15, 15, 25, 0.98);
    border: 1px solid rgba(0, 255, 242, 0.3);
    border-radius: 12px;
    padding: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 10001;
    backdrop-filter: blur(10px);
}

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

.lang-option {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    width: 100%;
    padding: 0.7rem 1rem;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.lang-option:hover {
    background: rgba(0, 255, 242, 0.1);
    color: var(--text-primary);
}

.lang-option.active {
    background: rgba(0, 255, 242, 0.2);
    color: var(--primary-cyan);
}

.lang-option .lang-flag {
    font-size: 1.2rem;
}

.lang-option .lang-name {
    flex: 1;
}

/* 移动端语言切换 */
.mobile-lang-switcher {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1rem 0;
    justify-content: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin: 1rem 0;
}

.mobile-lang-btn {
    padding: 0.5rem 0.8rem;
    background: rgba(15, 15, 25, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mobile-lang-btn:hover,
.mobile-lang-btn.active {
    background: rgba(0, 255, 242, 0.2);
    border-color: var(--primary-cyan);
    color: var(--primary-cyan);
}

/* 响应式语言切换器 */
@media (max-width: 768px) {
    .language-switcher {
        margin-right: 0.5rem;
    }
    
    .lang-btn {
        padding: 0.4rem 0.6rem;
    }
    
    .lang-code {
        display: none;
    }
    
    .lang-dropdown {
        right: -50%;
    }
}

@media (max-width: 480px) {
    .lang-btn {
        padding: 0.3rem 0.5rem;
    }
    
    .lang-flag {
        font-size: 1rem;
    }
}

/* ============================================
   📱 移动端响应式设计 - 防止溢出和错位
   ============================================ */

/* 移动端全局防溢出 */
@media (max-width: 768px) {
    html, body {
        overflow-x: hidden;
        width: 100%;
        max-width: 100%;
    }
    
    /* 所有容器防溢出 */
    .section-container,
    .hero-content,
    .modal-content,
    .wallet-modal-content {
        max-width: 100%;
        overflow: hidden;
    }
    
    /* 固定容器内边距 */
    .section-container {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ========== Hero 区域 ========== */
@media (max-width: 768px) {
    .hero {
        padding: 80px 16px 30px;
        overflow: hidden;
    }
    
    /* 足球装饰 */
    .football {
        font-size: 2rem;
        opacity: 0.1;
    }
    
    .football-1 {
        top: 10%;
        left: 5%;
    }
    
    .football-2 {
        top: 50%;
        right: 5%;
        font-size: 1.5rem;
    }
    
    .football-3 {
        display: none;
    }
    
    .goal-net {
        width: 200px;
        height: 100px;
    }
    
    /* 世界杯徽章 */
    .world-cup-badge {
        padding: 12px 20px;
        border-radius: 16px;
    }
    
    .host-flags {
        font-size: 1.5rem;
        gap: 10px;
    }
    
    .badge-text {
        font-size: 0.85rem;
    }
    
    .badge-cities {
        font-size: 0.65rem;
    }
    
    /* Like to Earn 口号 */
    .slogan-banner {
        padding: 10px 20px;
        gap: 10px;
    }
    
    .slogan-icon {
        font-size: 1.2rem;
    }
    
    .slogan-text {
        font-size: 1.1rem;
        letter-spacing: 0.1em;
    }
    
    /* 玩法提示 */
    .gameplay-hints {
        gap: 8px;
        justify-content: center;
    }
    
    .hint-item {
        padding: 8px 12px;
    }
    
    .hint-icon {
        font-size: 1rem;
    }
    
    .hint-text {
        font-size: 0.7rem;
    }
    
    /* 世界杯状态 */
    .worldcup-status {
        padding: 10px 16px;
        gap: 10px;
    }
    
    .status-icon {
        font-size: 1.5rem;
    }
    
    .status-title {
        font-size: 0.8rem;
    }
    
    .status-info {
        font-size: 0.65rem;
    }
    
    .hero-content {
        padding: 0;
        width: 100%;
    }
    
    .hero-badge {
        font-size: 0.7rem;
        padding: 8px 14px;
        display: inline-block;
        max-width: 100%;
        text-align: center;
    }
    
    .hero-title .title-line {
        font-size: 2.5rem;
    }
    
    .hero-title .title-line.small {
        font-size: 1.4rem;
    }
    
    .hero-subtitle {
        font-size: 0.9rem;
    }
    
    .hero-desc {
        font-size: 0.85rem;
        padding: 0 8px;
    }
    
    /* Hero 统计 - 固定3列网格 */
    .hero-stats {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        padding: 16px 8px;
        width: 100%;
    }
    
    .stat-item {
        text-align: center;
        padding: 12px 8px;
        background: rgba(0, 255, 242, 0.05);
        border-radius: 10px;
        border: 1px solid rgba(0, 255, 242, 0.1);
    }
    
    .stat-value {
        font-size: 1.2rem !important;
        display: block;
    }
    
    .stat-label {
        font-size: 0.6rem;
        display: block;
        margin-top: 4px;
    }
    
    .hero-actions {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
        padding: 0 8px;
    }
    
    .btn-primary,
    .btn-secondary {
        width: 100%;
        padding: 14px 20px;
        font-size: 0.9rem;
        text-align: center;
    }
}

/* ========== 空投计算器 ========== */
@media (max-width: 768px) {
    .airdrop-calculator {
        padding: 16px;
        margin: 20px 8px;
        width: calc(100% - 16px);
        overflow: hidden;
    }
    
    .calc-header {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    
    .calc-title {
        font-size: 0.95rem;
    }
    
    .calc-formula {
        font-size: 0.7rem;
        padding: 10px;
        text-align: center;
        word-break: break-word;
    }
    
    /* 计算网格 - 横向滚动 */
    .calc-grid {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 8px;
        padding-bottom: 10px;
        margin: 0 -8px;
        padding-left: 8px;
        padding-right: 8px;
    }
    
    .calc-item {
        flex: 0 0 70px;
        padding: 10px 6px;
        text-align: center;
    }
    
    .calc-label {
        font-size: 0.55rem;
    }
    
    .calc-value {
        font-size: 1rem;
    }
    
    .calc-sub {
        font-size: 0.5rem;
    }
    
    .calc-operator {
        flex: 0 0 20px;
        font-size: 0.9rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .calc-result {
        padding: 12px;
        text-align: center;
    }
    
    .result-label {
        font-size: 0.75rem;
    }
    
    .result-value {
        font-size: 1.4rem;
    }
    
    .calc-tips {
        display: none;
    }
}

/* ========== 热门排行 ========== */
@media (max-width: 768px) {
    .hot-nations {
        width: 100%;
        overflow: hidden;
    }
    
    .hot-title {
        font-size: 1rem;
        margin-bottom: 12px;
    }
    
    .hot-list {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 10px;
        padding-bottom: 12px;
        margin: 0 -16px;
        padding-left: 16px;
        padding-right: 16px;
    }
    
    .hot-item {
        flex: 0 0 100px;
        padding: 12px 10px;
        text-align: center;
    }
    
    .hot-rank {
        font-size: 0.7rem;
    }
    
    .hot-flag {
        font-size: 1.5rem;
    }
    
    .hot-name {
        font-size: 0.7rem;
    }
    
    .hot-count {
        font-size: 0.65rem;
    }
    
    .view-full-ranking {
        width: 100%;
        padding: 12px;
        font-size: 0.8rem;
        text-align: center;
    }
}

/* ========== 国家筛选器 ========== */
@media (max-width: 768px) {
    .nations-filter {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 8px;
        padding-bottom: 12px;
        margin: 0 -16px;
        padding-left: 16px;
        padding-right: 16px;
    }
    
    .filter-btn {
        flex: 0 0 auto;
        padding: 8px 14px;
        font-size: 0.75rem;
        white-space: nowrap;
    }
}

/* ========== 国家卡片网格 ========== */
@media (max-width: 768px) {
    .nations-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        width: 100%;
    }
    
    .nation-card {
        padding: 12px 8px;
        text-align: center;
        width: 100%;
    }
    
    .nation-flag {
        font-size: 2rem;
    }
    
    .nation-name {
        font-size: 0.7rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .nation-group {
        font-size: 0.55rem;
    }
    
    .nation-stats {
        display: none;
    }
}

/* ========== 国家详情弹窗 ========== */
@media (max-width: 768px) {
    .modal-content {
        width: calc(100% - 24px);
        max-width: 100%;
        margin: 12px;
        padding: 20px 16px;
        max-height: 90vh;
        overflow-y: auto;
        overflow-x: hidden;
    }
    
    .modal-header {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-bottom: 16px;
    }
    
    .modal-flag {
        font-size: 3rem;
        flex-shrink: 0;
    }
    
    .modal-info {
        flex: 1;
        min-width: 0;
    }
    
    .modal-title {
        font-size: 1.2rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .modal-group {
        font-size: 0.8rem;
    }
    
    /* 弹窗统计 - 固定4列网格 */
    .modal-stats {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        margin-bottom: 16px;
        width: 100%;
    }
    
    .modal-stat {
        text-align: center;
        padding: 10px 4px;
        background: rgba(0, 255, 242, 0.05);
        border-radius: 8px;
    }
    
    .modal-stat .stat-num {
        font-size: 1rem;
        display: block;
    }
    
    .modal-stat .stat-text {
        font-size: 0.5rem;
        display: block;
        margin-top: 4px;
    }
    
    /* 助力信息栏 */
    .boost-info-bar {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 10px;
        font-size: 0.7rem;
    }
    
    /* 弹窗操作按钮 - 2列网格 */
    .modal-actions {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 16px;
    }
    
    .action-btn {
        padding: 14px 10px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
    }
    
    .action-icon {
        font-size: 1.3rem;
    }
    
    .action-text {
        font-size: 0.75rem;
    }
    
    .action-cost,
    .action-reward {
        font-size: 0.6rem;
    }
    
    .action-bonus {
        font-size: 0.55rem;
    }
    
    /* 好处列表 */
    .modal-benefits {
        padding: 12px;
    }
    
    .modal-benefits h4 {
        font-size: 0.85rem;
        margin-bottom: 10px;
    }
    
    .modal-benefits li {
        font-size: 0.7rem;
        padding: 6px 0;
    }
}

/* ========== 排行榜弹窗 ========== */
@media (max-width: 768px) {
    .ranking-content {
        width: calc(100% - 24px);
        max-height: 85vh;
        padding: 20px 12px;
        overflow: hidden;
    }
    
    .ranking-title {
        font-size: 1.1rem;
        text-align: center;
    }
    
    .ranking-subtitle {
        font-size: 0.7rem;
        text-align: center;
    }
    
    /* 排行榜统计 - 3列网格 */
    .ranking-stats-bar {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        padding: 12px 0;
    }
    
    .ranking-stat-item {
        text-align: center;
        padding: 10px 6px;
        background: rgba(0, 255, 242, 0.05);
        border-radius: 8px;
    }
    
    .ranking-stat-item .stat-label {
        font-size: 0.6rem;
        display: block;
    }
    
    .ranking-stat-item .stat-value {
        font-size: 1rem;
        display: block;
    }
    
    .ranking-list-header {
        font-size: 0.55rem;
        padding: 10px 8px;
    }
    
    .ranking-list {
        max-height: 50vh;
        overflow-y: auto;
    }
    
    .ranking-item {
        padding: 10px 8px;
        font-size: 0.7rem;
    }
    
    .boost-btn-small {
        padding: 6px 10px;
        font-size: 0.6rem;
    }
}

/* ========== 铸造指南 ========== */
@media (max-width: 768px) {
    .missions-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        width: 100%;
    }
    
    .mission-card {
        padding: 14px 12px;
        width: 100%;
    }
    
    .mission-icon {
        font-size: 1.6rem;
    }
    
    .mission-title {
        font-size: 0.8rem;
    }
    
    .mission-desc {
        font-size: 0.65rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .mission-reward .reward-value {
        font-size: 1.1rem;
    }
    
    .mission-reward .reward-label {
        font-size: 0.55rem;
    }
    
    .mission-btn {
        padding: 8px 12px;
        font-size: 0.7rem;
        width: 100%;
    }
}

/* ========== 邀请系统 ========== */
@media (max-width: 768px) {
    .invite-link-box {
        padding: 16px;
        width: 100%;
    }
    
    .invite-link-input {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    .invite-link-input input {
        width: 100%;
        font-size: 0.75rem;
        padding: 12px;
    }
    
    .copy-link-btn {
        width: 100%;
        padding: 12px;
    }
    
    /* 邀请统计 - 2列网格 */
    .invite-stats {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-top: 16px;
    }
    
    .invite-stat {
        text-align: center;
        padding: 14px 10px;
        background: rgba(0, 255, 242, 0.05);
        border-radius: 10px;
    }
    
    .invite-stat .stat-num {
        font-size: 1.3rem;
        display: block;
    }
    
    .invite-stat .stat-text {
        font-size: 0.7rem;
        display: block;
        margin-top: 4px;
    }
    
    /* 等级卡片 - 横向滚动 */
    .rank-cards {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 12px;
        padding-bottom: 12px;
        margin: 0 -16px;
        padding-left: 16px;
        padding-right: 16px;
    }
    
    .rank-card {
        flex: 0 0 130px;
        padding: 16px 12px;
        text-align: center;
    }
    
    .rank-icon {
        font-size: 1.8rem;
    }
    
    .rank-name {
        font-size: 0.8rem;
    }
    
    .rank-requirement,
    .rank-benefit {
        font-size: 0.6rem;
    }
}

/* ========== 规则卡片 ========== */
@media (max-width: 768px) {
    .formula-box {
        padding: 16px;
        width: 100%;
    }
    
    .formula-box h3 {
        font-size: 1rem;
    }
    
    .formula {
        font-size: 0.7rem;
        padding: 12px;
        word-break: break-word;
        text-align: center;
    }
    
    .example-content {
        font-size: 0.7rem;
    }
    
    .rules-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        width: 100%;
    }
    
    .rule-card {
        padding: 14px;
        width: 100%;
    }
    
    .rule-header h4 {
        font-size: 0.75rem;
    }
    
    .rule-icon {
        font-size: 1.2rem;
    }
    
    .rule-item {
        font-size: 0.65rem;
        padding: 5px 0;
    }
    
    .rule-tip {
        font-size: 0.6rem;
    }
    
    .benefits-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .benefit-card {
        padding: 14px;
    }
    
    .benefit-icon {
        font-size: 1.6rem;
    }
    
    .benefit-card h4 {
        font-size: 0.85rem;
    }
    
    .benefit-card p {
        font-size: 0.7rem;
    }
}

/* ========== 安全说明 ========== */
@media (max-width: 768px) {
    .security-box {
        padding: 16px;
    }
    
    .security-box h3 {
        font-size: 0.95rem;
    }
    
    .security-item {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        font-size: 0.7rem;
        padding: 10px 0;
    }
    
    .security-icon {
        font-size: 1.1rem;
        flex-shrink: 0;
    }
}

/* ========== 钱包弹窗 ========== */
@media (max-width: 768px) {
    .wallet-modal-content {
        width: calc(100% - 24px);
        max-height: 90vh;
        padding: 20px 16px;
        overflow-y: auto;
        overflow-x: hidden;
    }
    
    .wallet-modal-title {
        font-size: 1.1rem;
        text-align: center;
    }
    
    .wallet-modal-desc {
        font-size: 0.75rem;
        text-align: center;
    }
    
    .chain-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 8px;
        padding-bottom: 12px;
    }
    
    .chain-tab {
        flex: 0 0 auto;
        padding: 10px 14px;
        font-size: 0.75rem;
    }
    
    .chain-list {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 10px;
        padding-bottom: 12px;
    }
    
    .chain-item {
        flex: 0 0 auto;
        padding: 10px 14px;
    }
    
    .chain-logo {
        width: 22px;
        height: 22px;
    }
    
    /* 钱包网格 - 3列固定 */
    .wallet-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        width: 100%;
    }
    
    .wallet-option {
        padding: 12px 8px;
        text-align: center;
        width: 100%;
    }
    
    .wallet-logo-img {
        width: 32px;
        height: 32px;
    }
    
    .wallet-name {
        font-size: 0.6rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .wallet-tag {
        font-size: 0.45rem;
        padding: 2px 5px;
    }
}

/* ========== 页脚 ========== */
@media (max-width: 768px) {
    .footer-container {
        padding: 30px 16px;
    }
    
    .footer-brand {
        text-align: center;
        margin-bottom: 24px;
    }
    
    .footer-links {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        text-align: center;
    }
    
    .footer-column h4 {
        font-size: 0.8rem;
        margin-bottom: 10px;
    }
    
    .footer-column a {
        font-size: 0.7rem;
        display: block;
        padding: 4px 0;
    }
    
    .footer-bottom {
        text-align: center;
        margin-top: 24px;
        padding-top: 20px;
    }
}

/* ========== 隐藏滚动条 ========== */
@media (max-width: 768px) {
    .hot-list::-webkit-scrollbar,
    .calc-grid::-webkit-scrollbar,
    .nations-filter::-webkit-scrollbar,
    .rank-cards::-webkit-scrollbar,
    .chain-tabs::-webkit-scrollbar,
    .chain-list::-webkit-scrollbar,
    .ranking-list::-webkit-scrollbar {
        display: none;
    }
    
    .hot-list,
    .calc-grid,
    .nations-filter,
    .rank-cards,
    .chain-tabs,
    .chain-list,
    .ranking-list {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
}

/* ========== 跑马灯 ========== */
@media (max-width: 768px) {
    .ticker-bar {
        font-size: 0.75rem;
        padding: 10px 0;
    }
}

/* ========== 超小屏幕 ========== */
@media (max-width: 360px) {
    html {
        font-size: 13px;
    }
    
    .section-container {
        padding-left: 12px;
        padding-right: 12px;
    }
    
    .nations-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .missions-grid,
    .rules-grid {
        grid-template-columns: 1fr;
    }
    
    .wallet-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .modal-stats {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .hero-stats {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .footer-links {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* ============================================
   RTL (阿拉伯语等从右到左语言) 支持
   ============================================ */
[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

[dir="rtl"] .nav-container {
    flex-direction: row-reverse;
}

[dir="rtl"] .nav-links {
    flex-direction: row-reverse;
}

[dir="rtl"] .nav-actions {
    flex-direction: row-reverse;
}

[dir="rtl"] .language-switcher .lang-arrow {
    margin-left: 0;
    margin-right: 4px;
}

[dir="rtl"] .lang-dropdown {
    left: auto;
    right: 0;
}

[dir="rtl"] .mobile-menu {
    left: 0;
    right: auto;
    transform: translateX(-100%);
}

[dir="rtl"] .mobile-menu.active {
    transform: translateX(0);
}

[dir="rtl"] .hero-stats {
    direction: ltr;
}

[dir="rtl"] .earn-card,
[dir="rtl"] .token-card,
[dir="rtl"] .phase-card,
[dir="rtl"] .rule-card,
[dir="rtl"] .benefit-card {
    text-align: right;
}

[dir="rtl"] .btn-hero,
[dir="rtl"] .btn-connect,
[dir="rtl"] .cta-btn {
    direction: ltr;
}

[dir="rtl"] .news-card {
    text-align: right;
}

[dir="rtl"] .news-meta {
    flex-direction: row-reverse;
}

[dir="rtl"] .task-item {
    flex-direction: row-reverse;
}

[dir="rtl"] .task-info {
    text-align: right;
}

[dir="rtl"] .airdrop-card {
    text-align: right;
}

[dir="rtl"] .profile-stat {
    text-align: right;
}

[dir="rtl"] .invite-link-input {
    direction: ltr;
    text-align: left;
}

[dir="rtl"] .modal-content {
    text-align: right;
}

[dir="rtl"] .wallet-grid {
    direction: ltr;
}

[dir="rtl"] .footer-section {
    text-align: right;
}

[dir="rtl"] .mobile-lang-switcher {
    flex-direction: row-reverse;
}