*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;line-height:1.6;color:#333;background:#f5f5f5}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
header{background:linear-gradient(135deg,#003791 0%,#0070cc 100%);color:#fff;padding:1.5rem 0;box-shadow:0 2px 10px rgba(0,0,0,0.1);position:sticky;top:0;z-index:1000}
header .container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:12px}
.logo svg{flex-shrink:0}
.logo h1{font-size:1.8rem;font-weight:700;letter-spacing:2px}
.logo p{font-size:0.85rem;opacity:0.9}
nav ul{display:flex;list-style:none;gap:2rem}
nav a{color:#fff;text-decoration:none;font-weight:500;transition:all 0.3s;padding:0.5rem 1rem;border-radius:4px}
nav a:hover,nav a.active{background:rgba(255,255,255,0.2)}
.hero{background:linear-gradient(135deg,#001d3d 0%,#003791 100%);color:#fff;padding:5rem 0;text-align:center}
.hero h2{font-size:2.8rem;margin-bottom:0.5rem;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,0.3)}
.hero p{font-size:1.3rem;opacity:0.95;text-shadow:1px 1px 2px rgba(0,0,0,0.3)}
main{padding:3rem 0}
section{margin-bottom:4rem}
h2{font-size:2.2rem;margin-bottom:2rem;color:#001d3d;font-weight:700;display:flex;align-items:center;gap:0.5rem}
.news-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:2rem}
.news-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 4px 15px rgba(0,0,0,0.1);transition:all 0.3s;height:100%;display:flex;flex-direction:column}
.news-card:hover{transform:translateY(-8px);box-shadow:0 8px 25px rgba(0,0,0,0.15)}
.news-card img{width:100%;height:200px;object-fit:cover;display:block}
.card-content{padding:1.5rem;display:flex;flex-direction:column;flex:1}
.tag{display:inline-block;background:#0070cc;color:#fff;padding:0.4rem 0.9rem;border-radius:20px;font-size:0.75rem;font-weight:600;margin-bottom:0.8rem;text-transform:uppercase;align-self:flex-start}
.tag.live{background:#e74c3c;animation:pulse 2s infinite}
.tag.deals{background:#27ae60}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.7}}
.news-card h3{font-size:1.3rem;margin-bottom:0.7rem;color:#001d3d;font-weight:600;line-height:1.3}
.news-card p{color:#666;margin-bottom:1rem;font-size:0.95rem;flex-grow:1;line-height:1.5}
.read-more{color:#0070cc;text-decoration:none;font-weight:600;transition:all 0.3s;align-self:flex-start;padding:0.5rem 0}
.read-more:hover{color:#003791;transform:translateX(5px)}
.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:2rem}
.game-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 4px 15px rgba(0,0,0,0.1);transition:all 0.3s;display:flex;flex-direction:column}
.game-card:hover{transform:translateY(-8px);box-shadow:0 8px 25px rgba(0,0,0,0.15)}
.game-card img{width:100%;height:320px;object-fit:cover;display:block}
.game-info{padding:1.2rem;display:flex;flex-direction:column;flex:1}
.game-info h3{font-size:1.15rem;color:#001d3d;margin-bottom:0.6rem;font-weight:600}
.platform{color:#0070cc;font-weight:600;font-size:0.9rem;margin-bottom:0.3rem}
.release-date{color:#666;font-size:0.9rem;margin-bottom:auto}
.updates-list{background:#fff;border-radius:12px;padding:2rem;box-shadow:0 4px 15px rgba(0,0,0,0.1)}
.update-item{display:grid;grid-template-columns:120px 1fr;gap:2rem;padding:1.5rem 0;border-bottom:1px solid #eee}
.update-item:last-child{border-bottom:none}
.update-date{text-align:center}
.date-day{display:block;font-size:2rem;font-weight:700;color:#0070cc;line-height:1}
.date-label{display:block;font-size:0.85rem;color:#666;margin-top:0.2rem}
.update-content h4{color:#001d3d;margin-bottom:0.5rem;font-weight:600;font-size:1.1rem}
.update-content p{color:#666;font-size:0.95rem;margin-bottom:0.7rem;line-height:1.5}
.update-content a{color:#0070cc;text-decoration:none;font-weight:600;font-size:0.9rem;transition:color 0.3s}
.update-content a:hover{color:#003791;text-decoration:underline}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem}
.stat-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 4px 15px rgba(0,0,0,0.1);transition:all 0.3s}
.stat-card:hover{transform:translateY(-5px);box-shadow:0 8px 25px rgba(0,0,0,0.15)}
.stat-card img{width:100%;height:120px;object-fit:cover;opacity:0.3;display:block}
.stat-content{padding:1.5rem}
.stat-content h3{font-size:2.5rem;color:#0070cc;font-weight:700;margin-bottom:0.3rem}
.stat-content p{font-size:1rem;color:#001d3d;font-weight:600;margin-bottom:0.3rem}
.stat-meta{font-size:0.85rem;color:#666}
.cta-button{display:inline-block;background:#0070cc;color:#fff;padding:0.8rem 2rem;border-radius:30px;text-decoration:none;font-weight:600;transition:all 0.3s;box-shadow:0 4px 10px rgba(0,112,204,0.3)}
.cta-button:hover{background:#003791;transform:translateY(-2px);box-shadow:0 6px 15px rgba(0,112,204,0.4)}
footer{background:#001d3d;color:#fff;padding:3rem 0 1rem;margin-top:4rem}
.footer-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;margin-bottom:2rem}
.footer-section h3,.footer-section h4{color:#fff;margin-bottom:1rem;font-weight:600}
.footer-section p{opacity:0.8;line-height:1.6}
.footer-section ul{list-style:none}
.footer-section a{color:#fff;text-decoration:none;opacity:0.8;transition:opacity 0.3s;display:block;margin-bottom:0.5rem}
.footer-section a:hover{opacity:1}
.footer-bottom{text-align:center;padding-top:2rem;border-top:1px solid rgba(255,255,255,0.1);opacity:0.7;font-size:0.9rem}
.article-header{background:#fff;padding:2.5rem;border-radius:12px;margin-bottom:2rem;box-shadow:0 4px 15px rgba(0,0,0,0.1)}
.article-header h1{color:#001d3d;margin-bottom:1rem;font-size:2.3rem;font-weight:700;line-height:1.2}
.article-meta{color:#666;font-size:0.9rem;margin-bottom:1rem}
.article-content{background:#fff;padding:2.5rem;border-radius:12px;box-shadow:0 4px 15px rgba(0,0,0,0.1);line-height:1.8;font-size:1.05rem}
.article-content h2{color:#001d3d;margin-top:2.5rem;margin-bottom:1.2rem;font-size:1.7rem;font-weight:600}
.article-content h2:first-child{margin-top:0}
.article-content ul,.article-content ol{margin-left:2rem;margin-bottom:1.5rem}
.article-content li{margin-bottom:0.7rem}
.article-content a{color:#0070cc;text-decoration:none;font-weight:500;border-bottom:1px solid transparent;transition:border-color 0.3s}
.article-content a:hover{border-bottom-color:#0070cc}
.callout{background:#fff7e6;border-left:4px solid#ffa500;padding:1.2rem 1.8rem;border-radius:8px;margin:2rem 0}
.callout strong{color:#001d3d}
.note{background:#f0f6ff;border-left:4px solid#0070cc;padding:1.2rem 1.8rem;border-radius:8px;margin:2rem 0;color:#002a5c}
.embed-wrap{position:relative;padding-top:56.25%;border-radius:12px;overflow:hidden;background:#000;margin:2rem 0;box-shadow:0 4px 15px rgba(0,0,0,0.2)}
.embed-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none}
@media(max-width:768px){
header .container{flex-direction:column;gap:1rem}
.logo{flex-direction:column;text-align:center}
nav ul{flex-wrap:wrap;gap:0.5rem;justify-content:center}
.hero h2{font-size:2rem}
.hero p{font-size:1.1rem}
.news-grid,.games-grid{grid-template-columns:1fr}
.update-item{grid-template-columns:1fr;gap:1rem}
.update-date{text-align:left}
.date-day{display:inline;font-size:1.5rem}
.date-label{display:inline;margin-left:0.5rem}
.stats-grid{grid-template-columns:1fr}
h2{font-size:1.8rem}
}