*{margin:0;padding:0;box-sizing:border-box;}body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);min-height:100vh;color:#333;line-height:1.6;}.container{max-width:1200px;margin:0 auto;padding:0 20px;min-height:100vh;display:flex;flex-direction:column;}@media (min-width:1920px){.container{max-width:1400px;}}@media (min-width:2560px){.container{max-width:1800px;}}@media (min-width:3840px){.container{max-width:2400px;}}.header{text-align:center;padding:60px 0 40px;color:white;position:relative;}.top-nav{position:absolute;top:20px;right:20px;display:flex;gap:15px;flex-wrap:wrap;justify-content:flex-end;}.nav-link{color:rgba(255,255,255,0.9);text-decoration:none;padding:8px 16px;border-radius:20px;font-size:0.9rem;font-weight:500;transition:all 0.3s ease;background:rgba(255,255,255,0.1);backdrop-filter:blur(10px);}.nav-link:hover{background:rgba(255,255,255,0.2);color:white;}.header-content{animation:fadeInUp 0.8s ease-out;}.logo{font-size:3.5rem;font-weight:700;margin-bottom:10px;text-shadow:0 4px 20px rgba(0,0,0,0.3);}.tagline{font-size:1.2rem;font-weight:300;opacity:0.9;text-shadow:0 2px 10px rgba(0,0,0,0.2);}.intro-section{background:rgba(255,255,255,0.1);backdrop-filter:blur(10px);border-radius:20px;padding:40px;margin:30px 0 40px;color:white;animation:fadeInUp 0.8s ease-out 0.3s both;}.intro-content{max-width:1000px;margin:0 auto;}.intro-content h2{font-size:2rem;margin-bottom:20px;text-align:center;text-shadow:0 2px 10px rgba(0,0,0,0.2);}.intro-content>p{font-size:1.1rem;text-align:center;margin-bottom:30px;opacity:0.95;}.intro-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:25px;margin:30px 0;}.feature-item{background:rgba(255,255,255,0.15);padding:25px;border-radius:15px;text-align:center;transition:transform 0.3s ease;}.feature-item:hover{transform:translateY(-5px);background:rgba(255,255,255,0.2);}.feature-icon{font-size:2.5rem;display:block;margin-bottom:10px;}.feature-item h3{font-size:1.2rem;margin-bottom:10px;color:white;}.feature-item p{font-size:0.9rem;opacity:0.9;margin:0;}.intro-more{text-align:center;margin-top:20px;font-size:1rem;opacity:0.9;}.categories{display:flex;justify-content:center;gap:15px;margin-bottom:40px;flex-wrap:wrap;animation:fadeInUp 0.8s ease-out 0.4s both;background:rgba(255,255,255,0.15);backdrop-filter:blur(15px);border:2px solid rgba(255,255,255,0.3);border-radius:25px;padding:25px 30px;box-shadow:0 8px 32px rgba(0,0,0,0.2);}.category-btn{background:rgba(255,255,255,0.2);border:2px solid rgba(255,255,255,0.4);color:white;padding:14px 28px;border-radius:50px;cursor:pointer;font-size:1rem;font-weight:600;transition:all 0.3s ease;backdrop-filter:blur(10px);text-decoration:none;box-shadow:0 4px 15px rgba(0,0,0,0.15);text-shadow:0 1px 3px rgba(0,0,0,0.2);}.category-btn:hover{background:rgba(255,255,255,0.35);border-color:rgba(255,255,255,0.6);transform:translateY(-3px);box-shadow:0 6px 20px rgba(0,0,0,0.25);}.category-btn.active{background:rgba(255,255,255,0.95);border-color:rgba(255,255,255,1);border-width:3px;box-shadow:0 8px 30px rgba(255,255,255,0.6),0 0 30px rgba(255,255,255,0.4),inset 0 0 20px rgba(255,255,255,0.3);transform:scale(1.08);font-weight:700;color:#333;text-shadow:none;}.games-grid{flex:1;max-width:100%;width:100%;animation:fadeInUp 0.8s ease-out 0.4s both;}.loading{text-align:center;padding:60px 0;color:white;}.spinner{width:40px;height:40px;border:4px solid rgba(255,255,255,0.3);border-top:4px solid white;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 20px;}.games-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(370px,1fr));gap:25px;padding-bottom:40px;max-width:100%;width:100%;box-sizing:border-box;margin:0 auto;}.game-card{background:rgba(255,255,255,0.95);border-radius:20px;border:2px solid transparent;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,0.1);transition:all 0.3s ease;cursor:pointer;backdrop-filter:blur(10px);display:flex;flex-direction:column;height:100%;}.game-card:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(0,0,0,0.15);}.game-thumbnail{width:100%;height:220px;object-fit:contain;background:linear-gradient(45deg,#f0f0f0,#e0e0e0);display:block;flex-shrink:0;}.game-info{padding:20px;display:flex;flex-direction:column;flex:1;}.game-name{font-size:1.3rem;font-weight:600;margin-bottom:12px;color:#333;line-height:1.4;word-wrap:break-word;overflow-wrap:break-word;hyphens:auto;}.game-description{font-size:0.9rem;color:#666;margin-bottom:15px;line-height:1.5;height:3rem;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}.game-category{display:inline-block;background:linear-gradient(45deg,#667eea,#764ba2);color:white;padding:6px 12px;border-radius:20px;font-size:0.8rem;font-weight:500;margin-top:auto;width:fit-content;}.game-header{display:flex;align-items:center;gap:20px;padding:30px 0;color:white;animation:fadeInUp 0.8s ease-out;}.back-btn{background:rgba(255,255,255,0.1);border:2px solid rgba(255,255,255,0.2);color:white;padding:12px 20px;border-radius:50px;cursor:pointer;font-size:0.9rem;font-weight:500;transition:all 0.3s ease;backdrop-filter:blur(10px);display:flex;align-items:center;gap:8px;}.back-btn:hover{background:rgba(255,255,255,0.2);border-color:rgba(255,255,255,0.4);transform:translateX(-5px);}.game-title{font-size:2rem;font-weight:600;text-shadow:0 2px 10px rgba(0,0,0,0.2);flex:1;text-align:center;}.game-content{flex:1;animation:fadeInUp 0.8s ease-out 0.2s both;}.game-frame-container{background:rgba(255,255,255,0.95);border-radius:20px;padding:20px;margin-bottom:30px;box-shadow:0 10px 30px rgba(0,0,0,0.1);backdrop-filter:blur(10px);}.game-frame{width:100%;height:600px;border-radius:15px;background:#f8f9fa;}.game-info{background:rgba(255,255,255,0.95);border-radius:20px;padding:25px;box-shadow:0 10px 30px rgba(0,0,0,0.1);backdrop-filter:blur(10px);}.game-description{font-size:1rem;color:#555;line-height:1.7;margin-bottom:20px;}.game-meta{display:flex;gap:15px;flex-wrap:wrap;}.game-category{background:linear-gradient(45deg,#667eea,#764ba2);color:white;padding:8px 16px;border-radius:25px;font-size:0.9rem;font-weight:500;}.footer{text-align:center;padding:30px 0;color:rgba(255,255,255,0.8);font-size:0.9rem;margin-top:auto;}.footer-links{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;margin-bottom:20px;}.footer-links a{color:rgba(255,255,255,0.8);text-decoration:none;transition:color 0.3s ease;}.footer-links a:hover{color:white;text-decoration:underline;}@keyframes fadeInUp{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:translateY(0);}}@keyframes spin{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}@media (max-width:768px){.container{padding:0 15px;}.header{padding:40px 0 30px;}.top-nav{position:relative;top:0;right:0;justify-content:center;margin-bottom:20px;}.nav-link{font-size:0.8rem;padding:6px 12px;}.logo{font-size:2.5rem;}.tagline{font-size:1rem;}.intro-section{padding:25px 20px;}.intro-content h2{font-size:1.5rem;}.intro-features{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:15px;}.categories{gap:10px;margin-bottom:30px;padding:20px 15px;}.category-btn{padding:12px 20px;font-size:0.9rem;}.games-container{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;}.game-frame{height:400px;}.game-header{flex-direction:column;align-items:flex-start;gap:15px;padding:20px 0;}.game-title{font-size:1.5rem;}}@media (max-width:480px){.games-container{grid-template-columns:1fr;gap:15px;}.game-frame{height:300px;}.categories{justify-content:flex-start;overflow-x:auto;padding:18px 12px;margin-bottom:25px;}.category-btn{white-space:nowrap;flex-shrink:0;padding:10px 18px;font-size:0.85rem;}.intro-features{grid-template-columns:1fr;}.footer-links{flex-direction:column;gap:10px;}}