:root{--primary:#6a11cb;--primary-dark:#4a00a8;--secondary:#ff6b6b;--accent:#00d2ff;--dark:#2c3e50;--light:#f8f9fa;--gray:#6c757d;--mc:#ff9800;--pvz:#4caf50;--visual:#9c27b0;--classic:#2196f3;--rainyun:#4a90e2;--shadow:0 10px 30px rgba(0,0,0,0.2);--transition:all 0.3s ease;--glass-bg:rgba(255,255,255,0.15);--glass-border:rgba(255,255,255,0.2);--glass-shadow:0 8px 32px rgba(31,38,135,0.37);}*{margin:0;padding:0;box-sizing:border-box;}html{scroll-behavior:smooth;}body{background:url('https://s21.ax1x.com/2025/07/23/pVGtdOI.jpg') no-repeat center center fixed;background-size:cover;color:var(--light);line-height:1.6;min-height:100vh;overflow-x:hidden;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;} .glass-effect{background:var(--glass-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:20px;border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);} .site-header{text-align:center;padding:60px 20px 40px;color:white;position:relative;margin:20px;border-radius:20px;background:rgba(255,255,255,0.1);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);border:1px solid rgba(255,255,255,0.2);box-shadow:0 8px 32px rgba(31,38,135,0.37);}.site-header h1{font-size:clamp(2rem,5vw,3.8rem);background:linear-gradient(90deg,#fff,var(--accent),#fff);-webkit-background-clip:text;background-clip:text;color:transparent;animation:glow 3s ease-in-out infinite;margin-bottom:15px;}@keyframes glow{0%,100%{text-shadow:0 0 20px rgba(255,255,255,0.5),0 0 40px rgba(0,210,255,0.3);}50%{text-shadow:0 0 30px rgba(255,255,255,0.8),0 0 60px rgba(0,210,255,0.5);}}.version-badge{display:inline-block;background:rgba(255,255,255,0.2);backdrop-filter:blur(10px);padding:8px 20px;border-radius:20px;margin-top:15px;border:1px solid rgba(255,255,255,0.3);} .search-section{max-width:700px;margin:0 auto 40px;padding:0 20px;}.search-box-wrapper{position:relative;margin-bottom:20px;}.search-input{width:100%;padding:20px 30px 20px 60px;border-radius:50px;border:1px solid rgba(255,255,255,0.2);font-size:1.1rem;background:rgba(255,255,255,0.15);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--light);box-shadow:var(--glass-shadow);transition:var(--transition);}.search-input::placeholder{color:rgba(255,255,255,0.7);}.search-input:focus{outline:none;transform:translateY(-3px);box-shadow:0 15px 50px rgba(31,38,135,0.4);border-color:rgba(255,255,255,0.4);}.search-icon{position:absolute;left:25px;top:50%;transform:translateY(-50%);color:rgba(255,255,255,0.7);font-size:1.3rem;}.game-counter{text-align:center;color:white;background:rgba(255,255,255,0.15);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:15px 30px;border-radius:30px;display:inline-block;border:1px solid rgba(255,255,255,0.2);box-shadow:var(--glass-shadow);} .category-nav{display:flex;justify-content:center;flex-wrap:wrap;gap:15px;margin-bottom:50px;padding:0 20px;}.category-btn{padding:14px 28px;background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.2);border-radius:30px;color:white;cursor:pointer;font-weight:600;transition:var(--transition);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:var(--glass-shadow);}.category-btn:hover{background:rgba(255,255,255,0.25);transform:translateY(-3px);box-shadow:0 10px 30px rgba(31,38,135,0.4);}.category-btn.active{background:rgba(255,255,255,0.25);color:var(--accent);border-color:var(--accent);transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,210,255,0.4);} .games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:30px;padding:0 20px;max-width:1400px;margin:0 auto;} .game-card{background:rgba(255,255,255,0.15);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:20px;overflow:hidden;box-shadow:var(--glass-shadow);transition:var(--transition);display:flex;flex-direction:column;position:relative;animation:fadeInUp 0.6s ease forwards;opacity:0;transform:translateY(30px);border:1px solid rgba(255,255,255,0.2);}@keyframes fadeInUp{to{opacity:1;transform:translateY(0);}}.game-card::before{content:'';position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,var(--primary),var(--accent));}.game-card:hover{transform:translateY(-15px) scale(1.02);box-shadow:0 25px 50px rgba(31,38,135,0.4);border-color:rgba(255,255,255,0.4);}.game-card-content{padding:30px;flex-grow:1;display:flex;flex-direction:column;}.game-card h3{font-size:1.4rem;margin-bottom:15px;line-height:1.4;min-height:3.5em;color:var(--light);}.game-tags{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px;}.tag{padding:6px 12px;border-radius:20px;font-size:0.85rem;font-weight:600;background:rgba(255,255,255,0.2);color:var(--light);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,0.3);}.tag-mc{background:rgba(255,152,0,0.2);color:#ffcc80;border-color:rgba(255,152,0,0.4);}.tag-pvz{background:rgba(76,175,80,0.2);color:#a5d6a7;border-color:rgba(76,175,80,0.4);}.tag-visual{background:rgba(156,39,176,0.2);color:#f48fb1;border-color:rgba(156,39,176,0.4);}.tag-classic{background:rgba(33,150,243,0.2);color:#90caf9;border-color:rgba(33,150,243,0.4);}.game-card p{color:rgba(255,255,255,0.8);margin-bottom:20px;flex-grow:1;}.btn-play{display:inline-block;padding:14px 30px;background:var(--primary);color:white;text-decoration:none;border-radius:12px;text-align:center;font-weight:600;transition:var(--transition);position:relative;overflow:hidden;}.btn-play::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);transition:left 0.5s;}.btn-play:hover::before{left:100%;}.btn-play:hover{background:var(--primary-dark);transform:translateY(-3px);}.btn-mc{background:linear-gradient(135deg,#ff9800,#f57c00);}.btn-pvz{background:linear-gradient(135deg,#4caf50,#388e3c);}.btn-visual{background:linear-gradient(135deg,#9c27b0,#7b1fa2);}.btn-classic{background:linear-gradient(135deg,#2196f3,#1976d2);} .partner-section{margin:80px 20px 50px;}.partner-card{background:rgba(255,255,255,0.15);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:20px;overflow:hidden;max-width:450px;margin:0 auto;box-shadow:var(--glass-shadow);transition:var(--transition);border:1px solid rgba(255,255,255,0.2);}.partner-card:hover{transform:translateY(-10px);box-shadow:0 20px 40px rgba(31,38,135,0.4);border-color:rgba(255,255,255,0.4);}.partner-logo{background:linear-gradient(135deg,var(--rainyun),#7b68ee);height:140px;display:flex;align-items:center;justify-content:center;color:white;font-size:3.5rem;}.partner-info{padding:30px;text-align:center;}.partner-info h3{margin-bottom:15px;color:var(--light);}.partner-info p{color:rgba(255,255,255,0.8);margin-bottom:20px;}.btn-partner{display:inline-flex;align-items:center;gap:10px;padding:14px 30px;background:linear-gradient(135deg,var(--rainyun),#3a7bd5);color:white;text-decoration:none;border-radius:12px;font-weight:600;transition:var(--transition);}.btn-partner:hover{transform:translateY(-3px);box-shadow:0 6px 20px rgba(74,144,226,0.5);} .site-footer{text-align:center;margin-top:80px;padding:40px 20px;color:rgba(255,255,255,0.95);background:rgba(255,255,255,0.1);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);border:1px solid rgba(255,255,255,0.2);box-shadow:var(--glass-shadow);border-radius:20px;margin:80px 20px 20px;}.footer-nav{display:flex;justify-content:center;gap:30px;margin-bottom:25px;flex-wrap:wrap;}.footer-nav a{color:rgba(255,255,255,0.9);text-decoration:none;transition:var(--transition);position:relative;}.footer-nav a::after{content:'';position:absolute;bottom:-5px;left:0;width:0;height:2px;background:var(--accent);transition:width 0.3s;}.footer-nav a:hover{color:white;}.footer-nav a:hover::after{width:100%;}.social-links{display:flex;justify-content:center;gap:20px;margin-bottom:20px;}.social-links a{display:flex;align-items:center;justify-content:center;width:45px;height:45px;border-radius:50%;background:rgba(255,255,255,0.15);color:white;transition:var(--transition);border:1px solid rgba(255,255,255,0.2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:var(--glass-shadow);}.social-links a:hover{background:var(--primary);transform:translateY(-5px) scale(1.1);box-shadow:0 10px 25px rgba(106,17,203,0.4);} .modal{position:fixed;inset:0;background:rgba(0,0,0,0.8);backdrop-filter:blur(10px);display:flex;justify-content:center;align-items:center;z-index:10000;opacity:0;visibility:hidden;transition:var(--transition);}.modal:not([hidden]){opacity:1;visibility:visible;}.modal-content{background:rgba(255,255,255,0.15);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);border-radius:20px;max-width:600px;width:90%;max-height:80vh;overflow:hidden;box-shadow:var(--glass-shadow);transform:scale(0.9);transition:transform 0.3s;border:1px solid rgba(255,255,255,0.2);color:var(--light);}.modal-body h3{color:var(--light) !important;}.modal-body p{color:rgba(255,255,255,0.8) !important;}.modal:not([hidden]) .modal-content{transform:scale(1);}.modal-header{background:linear-gradient(135deg,#667eea,#764ba2);color:white;padding:25px;text-align:center;}.modal-body{padding:30px;max-height:400px;overflow-y:auto;}.modal-body h3{margin:20px 0 10px;color:#333;}.modal-body h3:first-child{margin-top:0;}.modal-body p{color:#666;line-height:1.7;}.modal-footer{padding:20px 30px;border-top:1px solid #eee;display:flex;gap:15px;justify-content:flex-end;}.btn{padding:12px 30px;border:none;border-radius:25px;font-size:1rem;cursor:pointer;transition:var(--transition);font-weight:600;}.btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:white;box-shadow:0 4px 15px rgba(102,126,234,0.4);}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(102,126,234,0.5);}.btn-secondary{background:#f5f5f5;color:#666;}.btn-secondary:hover{background:#e8e8e8;} .empty-state{grid-column:1 / -1;text-align:center;padding:60px;color:white;background:rgba(255,255,255,0.15);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:20px;border:1px solid rgba(255,255,255,0.2);box-shadow:var(--glass-shadow);} @media (max-width:768px){.games-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));}.category-nav{justify-content:flex-start;overflow-x:auto;padding-bottom:15px;-webkit-overflow-scrolling:touch;}.category-btn{flex-shrink:0;}}@media (max-width:480px){.games-grid{grid-template:1fr;}.modal-body{max-height:50vh;}}::-webkit-scrollbar{width:8px;}::-webkit-scrollbar-track{background:rgba(255,255,255,0.1);}::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.3);border-radius:4px;}::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.5);}::selection{background:rgba(106,17,203,0.3);color:white;} @media (hover:none) and (pointer:coarse){.game-card:hover{transform:none;}.category-btn:hover{transform:none;}.btn-play:hover::before{display:none;}} @media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important;}} @media print{.loading-overlay,.modal,.category-nav,.search-section,.partner-section,.site-footer{display:none !important;}.game-card{break-inside:avoid;page-break-inside:avoid;}} @media (prefers-contrast:high){.game-card{border:2px solid currentColor;}.btn-play{border:2px solid currentColor;}} *:focus-visible{outline:3px solid var(--accent);outline-offset:2px;} input[type="search"]{-webkit-appearance:none;appearance:none;}input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;}