@import "https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700;900&family=Inter:wght@300;400;500;600;700;800;900&family=Orbitron:wght@400;500;600;700;800;900&display=swap";@tailwind base;@tailwind components;@tailwind utilities;:root{--bg-primary:#0a0a1a;--bg-secondary:#0f0f2a;--bg-card:#161638;--bg-card-hover:#1c1c4a;--bg-elevated:#1a1a44;--border-color:#2a2a5a;--border-glow:#8b5cf64d;--text-primary:#f0f0ff;--text-secondary:#a0a0c0;--text-muted:#6a6a8a;--accent-purple:#8b5cf6;--accent-purple-light:#a78bfa;--accent-purple-dark:#6d28d9;--accent-blue:#3b82f6;--accent-pink:#ec4899;--accent-cyan:#06b6d4;--gradient-hero:linear-gradient(135deg, #6d28d9 0%, #3b82f6 50%, #06b6d4 100%);--gradient-card:linear-gradient(135deg, #8b5cf61a 0%, #3b82f60d 100%);--gradient-glow:linear-gradient(135deg, #8b5cf666, #3b82f666);--shadow-card:0 4px 20px #0000004d;--shadow-glow:0 0 30px #8b5cf626;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;font-family:Noto Sans SC,Inter,system-ui,-apple-system,sans-serif;line-height:1.6}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--accent-purple)}.page-container{max-width:1280px;margin:0 auto;padding:0 20px}.section-header{border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;margin-bottom:24px;padding-bottom:12px;display:flex}.section-header h2{background:var(--gradient-hero);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:1.5rem;font-weight:700}.section-header .view-all{color:var(--text-secondary);font-size:.875rem;font-weight:500;transition:color .2s}.section-header .view-all:hover{color:var(--accent-purple-light)}.hero-banner{border-radius:var(--radius-xl);background:var(--gradient-hero);margin-bottom:40px;padding:48px 40px;position:relative;overflow:hidden}.hero-banner:before{content:"";opacity:.3;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");position:absolute;inset:0}.hero-banner h1{z-index:1;text-shadow:0 2px 20px #0000004d;margin-bottom:8px;font-size:2.5rem;font-weight:900;position:relative}.hero-banner p{opacity:.85;z-index:1;font-size:1.125rem;font-weight:400;position:relative}.article-card{background:var(--bg-card);border-radius:var(--radius-md);cursor:pointer;border:1px solid #0000;transition:all .3s;position:relative;overflow:hidden}.article-card:hover{border-color:var(--border-glow);box-shadow:var(--shadow-glow);background:var(--bg-card-hover);transform:translateY(-4px)}.article-card .card-image{aspect-ratio:16/9;object-fit:cover;object-position:center;width:100%;height:100%;transition:transform .3s;display:block}.article-card:hover .card-image{transform:scale(1.05)}.article-card .card-body{padding:16px}.article-card .card-category{text-transform:uppercase;letter-spacing:.5px;border-radius:20px;margin-bottom:8px;padding:3px 10px;font-size:.75rem;font-weight:600;display:inline-block}.article-card .card-category.news{color:#60a5fa;background:#3b82f633}.article-card .card-category.guides{color:#34d399;background:#10b98133}.article-card .card-category.reviews{color:#fb923c;background:#fb923c33}.article-card .card-category.mobile{color:#f472b6;background:#ec489933}.article-card .card-category.pc{color:#a78bfa;background:#8b5cf633}.article-card .card-category.anime{color:#22d3ee;background:#06b6d433}.article-card h3{color:var(--text-primary);-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-bottom:6px;font-size:1rem;font-weight:600;line-height:1.4;display:-webkit-box;overflow:hidden}.article-card .card-summary{color:var(--text-secondary);-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:.8125rem;line-height:1.5;display:-webkit-box;overflow:hidden}.article-card .card-meta{color:var(--text-muted);align-items:center;gap:12px;margin-top:10px;font-size:.75rem;display:flex}.featured-card{border-radius:var(--radius-lg);cursor:pointer;min-height:340px;transition:all .3s;position:relative;overflow:hidden}.featured-card:hover{transform:translateY(-2px);box-shadow:0 0 40px #8b5cf633}.featured-card .featured-bg{background:linear-gradient(#0000001a 0%,#0000004d 50%,#000000e6 100%);position:absolute;inset:0}.featured-card .featured-img{object-fit:cover;object-position:center;width:100%;height:100%;position:absolute;inset:0}.featured-card .featured-content{z-index:2;flex-direction:column;justify-content:flex-end;min-height:340px;padding:32px;display:flex;position:relative}.featured-card .featured-content h3{color:#fff;text-shadow:0 2px 10px #00000080;margin-bottom:8px;font-size:1.5rem;font-weight:700;line-height:1.3}.featured-card .featured-content p{color:#fffc;max-width:80%;font-size:.9rem}.article-detail{background:var(--bg-card);border-radius:var(--radius-lg);overflow:hidden}.article-detail .article-header{padding:32px 32px 0}.article-detail .article-header h1{margin-bottom:12px;font-size:2rem;font-weight:800;line-height:1.3}.article-detail .article-meta-bar{border-bottom:1px solid var(--border-color);flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:20px;padding-bottom:20px;display:flex}.article-detail .article-body{padding:0 32px 32px}.article-detail .article-body :deep(h2){border-left:4px solid var(--accent-purple);color:var(--text-primary);margin:32px 0 16px;padding-left:16px;font-size:1.5rem;font-weight:700}.article-detail .article-body :deep(h3){color:var(--accent-purple-light);margin:24px 0 12px;font-size:1.25rem;font-weight:600}.article-detail .article-body :deep(p){color:var(--text-secondary);margin-bottom:16px;font-size:1rem;line-height:1.9}.article-detail .article-body :deep(strong){color:var(--text-primary);font-weight:600}:is(.article-detail .article-body :deep(ul),.article-detail .article-body :deep(ol)){margin-bottom:16px;padding-left:24px}.article-detail .article-body :deep(li){color:var(--text-secondary);margin-bottom:8px;line-height:1.7}.article-detail .article-body :deep(blockquote){border-left:4px solid var(--accent-purple);border-radius:0 var(--radius-sm) var(--radius-sm) 0;color:var(--text-secondary);background:#8b5cf614;margin:24px 0;padding:12px 20px}.widget{background:var(--bg-card);border-radius:var(--radius-md);border:1px solid var(--border-color);overflow:hidden}.widget-header{color:var(--text-primary);margin-bottom:12px;padding:16px 16px 0;font-size:1.125rem;font-weight:700}.widget-body{padding:0 16px 16px}.tag-cloud{flex-wrap:wrap;gap:8px;display:flex}.tag-item{color:var(--accent-purple-light);cursor:pointer;background:#8b5cf61a;border:1px solid #8b5cf633;border-radius:20px;padding:4px 12px;font-size:.75rem;transition:all .2s}.tag-item:hover{background:var(--accent-purple);color:#fff;border-color:var(--accent-purple);transform:translateY(-1px)}.btn-primary{border-radius:var(--radius-sm);cursor:pointer;background:var(--gradient-hero);color:#fff;border:none;align-items:center;gap:8px;padding:10px 24px;font-size:.875rem;font-weight:600;transition:all .2s;display:inline-flex}.btn-primary:hover{opacity:.9;transform:translateY(-1px);box-shadow:0 4px 20px #8b5cf64d}.btn-outline{border-radius:var(--radius-sm);cursor:pointer;color:var(--accent-purple-light);border:1px solid var(--border-glow);background:0 0;align-items:center;gap:8px;padding:8px 20px;font-size:.875rem;font-weight:500;transition:all .2s;display:inline-flex}.btn-outline:hover{background:#8b5cf61a;box-shadow:0 0 20px #8b5cf626}.ad-placeholder{border:1px dashed var(--border-color);border-radius:var(--radius-sm);color:var(--text-muted);justify-content:center;align-items:center;font-size:.8rem;display:flex;position:relative;overflow:hidden;background:linear-gradient(135deg,#1a1a44 0%,#0f0f2a 100%)!important}.ad-placeholder:before{content:"📢";opacity:.15;font-size:24px;position:absolute}.gift-code-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:16px;transition:all .2s}.gift-code-card:hover{border-color:var(--border-glow);box-shadow:var(--shadow-glow)}.gift-code-card .code-display{color:var(--accent-cyan);letter-spacing:2px;background:#06b6d41a;border:1px dashed #06b6d44d;border-radius:4px;padding:4px 12px;font-family:Orbitron,monospace;font-size:.9rem;font-weight:600}.copy-btn{background:var(--accent-purple);color:#fff;cursor:pointer;border:none;border-radius:6px;padding:6px 16px;font-size:.8rem;font-weight:600;transition:all .2s}.copy-btn:hover{opacity:.85;transform:translateY(-1px)}.copy-btn.copied{background:#10b981}.rank-item{background:var(--bg-card);border-radius:var(--radius-md);align-items:center;gap:16px;margin-bottom:12px;padding:16px;transition:all .2s;display:flex}.rank-item:hover{background:var(--bg-card-hover);transform:translate(4px)}.rank-number{color:var(--text-muted);text-align:center;min-width:40px;font-family:Orbitron,monospace;font-size:1.5rem;font-weight:800}.rank-item:first-child .rank-number{color:#fbbf24}.rank-item:nth-child(2) .rank-number{color:#94a3b8}.rank-item:nth-child(3) .rank-number{color:#d97706}.nav-main{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid var(--border-color);z-index:100;background:#0a0a1af2;position:sticky;top:0}.nav-inner{align-items:center;max-width:1280px;height:64px;margin:0 auto;padding:0 20px;display:flex}.nav-logo{background:var(--gradient-hero);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-family:Orbitron,sans-serif;font-size:1.25rem;font-weight:800;text-decoration:none}.nav-links{align-items:center;gap:4px;margin-left:32px;display:flex}.nav-link{border-radius:var(--radius-sm);color:var(--text-secondary);padding:8px 16px;font-size:.875rem;font-weight:500;text-decoration:none;transition:all .2s}.nav-link:hover,.nav-link.active{color:var(--text-primary);background:#8b5cf61a}.nav-link.active{color:var(--accent-purple-light)}.lang-switch{align-items:center;gap:4px;margin-left:auto;display:flex}.lang-btn{color:var(--text-muted);border:1px solid var(--border-color);cursor:pointer;background:0 0;border-radius:4px;padding:4px 12px;font-size:.8rem;font-weight:600;text-decoration:none;transition:all .2s}.lang-btn:hover,.lang-btn.active{color:var(--accent-purple-light);border-color:var(--border-glow);background:#8b5cf61a}.lang-btn.active{background:var(--accent-purple);color:#fff;border-color:var(--accent-purple)}.mobile-menu-btn{color:var(--text-primary);cursor:pointer;background:0 0;border:none;padding:8px;font-size:1.5rem;display:none}@media (width<=768px){.nav-links{display:none}.mobile-menu-btn{margin-left:16px;display:block}.nav-links.open{border-bottom:1px solid var(--border-color);background:#0a0a1afa;flex-direction:column;gap:4px;margin-left:0;padding:16px;display:flex;position:absolute;top:64px;left:0;right:0}.nav-links.open .nav-link{width:100%;padding:12px 16px}.hero-banner{padding:32px 24px}.hero-banner h1{font-size:1.5rem}.hero-banner p{font-size:.9rem}.article-detail .article-header,.article-detail .article-body{padding-left:20px;padding-right:20px}.article-detail .article-header h1{font-size:1.4rem}.featured-card .featured-content h3{font-size:1.1rem}.page-container{padding:0 12px}.section-header h2{font-size:1.2rem}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:.4s forwards fadeInUp}.animate-fade-in:first-child{animation-delay:50ms}.animate-fade-in:nth-child(2){animation-delay:.1s}.animate-fade-in:nth-child(3){animation-delay:.15s}.animate-fade-in:nth-child(4){animation-delay:.2s}.animate-fade-in:nth-child(5){animation-delay:.25s}.animate-fade-in:nth-child(6){animation-delay:.3s}.breadcrumb{color:var(--text-muted);align-items:center;gap:8px;margin-bottom:20px;font-size:.875rem;display:flex}.breadcrumb a{color:var(--text-secondary);text-decoration:none;transition:color .2s}.breadcrumb a:hover{color:var(--accent-purple-light)}.breadcrumb .separator{color:var(--text-muted)}.breadcrumb .current{color:var(--text-primary)}.shimmer{background:linear-gradient(90deg, var(--bg-card) 25%, var(--bg-elevated) 50%, var(--bg-card) 75%);background-size:200% 100%;animation:1.5s infinite shimmer}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.stat-badge{color:var(--accent-purple-light);background:#8b5cf61a;border-radius:4px;align-items:center;gap:4px;padding:2px 8px;font-size:.75rem;display:inline-flex}.game-info-card{background:var(--gradient-card);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:16px}.game-info-card .game-icon{border-radius:var(--radius-sm);background:#8b5cf633;justify-content:center;align-items:center;width:48px;height:48px;font-size:1.5rem;display:flex}.footer-main{border-top:1px solid var(--border-color);background:var(--bg-secondary);margin-top:60px}.footer-inner{text-align:center;max-width:1280px;margin:0 auto;padding:32px 20px}.footer-inner .footer-logo{background:var(--gradient-hero);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-family:Orbitron,sans-serif;font-size:1rem;font-weight:700}.footer-inner p{color:var(--text-muted);margin-top:12px;font-size:.8rem}.footer-inner .version-badge{color:var(--accent-purple-light);background:#8b5cf626;border-radius:4px;margin-top:8px;padding:2px 8px;font-family:Orbitron,monospace;font-size:.7rem;display:inline-block}.tab-filter{flex-wrap:wrap;gap:8px;margin-bottom:24px;display:flex}.tab-filter button{border:1px solid var(--border-color);color:var(--text-secondary);cursor:pointer;background:0 0;border-radius:20px;padding:6px 20px;font-size:.85rem;font-weight:500;transition:all .2s}.tab-filter button:hover{border-color:var(--border-glow);color:var(--text-primary)}.tab-filter button.active{background:var(--accent-purple);border-color:var(--accent-purple);color:#fff}