/* zzzbet - Atomic CSS Architecture */
/* 原子化CSS - 每个类只做一件事 */

/* Reset */
*{margin:0;padding:0;box-sizing:border-box;}

/* Typography */
body{font-family:'Poppins',Arial,sans-serif;line-height:1.6;color:#333;}
.text-center{text-align:center;}
.text-white{color:#FFF;}
.text-primary{color:#1E3A8A;}
.text-secondary{color:#60A5FA;}
.font-bold{font-weight:700;}
.font-black{font-weight:900;}
.text-sm{font-size:14px;}
.text-base{font-size:16px;}
.text-lg{font-size:18px;}
.text-xl{font-size:24px;}
.text-2xl{font-size:32px;}
.text-3xl{font-size:40px;}
.text-4xl{font-size:48px;}

/* Layout */
.container{max-width:1200px;margin:0 auto;padding:0 20px;}
.flex{display:flex;}
.flex-col{flex-direction:column;}
.items-center{align-items:center;}
.justify-between{justify-content:space-between;}
.justify-center{justify-content:center;}
.gap-2{gap:8px;}
.gap-4{gap:16px;}
.gap-6{gap:24px;}
.gap-8{gap:32px;}

/* Spacing */
.p-4{padding:16px;}
.p-6{padding:24px;}
.p-8{padding:32px;}
.py-2{padding-top:8px;padding-bottom:8px;}
.py-4{padding-top:16px;padding-bottom:16px;}
.py-6{padding-top:24px;padding-bottom:24px;}
.py-8{padding-top:32px;padding-bottom:32px;}
.py-12{padding-top:48px;padding-bottom:48px;}
.py-16{padding-top:64px;padding-bottom:64px;}
.px-4{padding-left:16px;padding-right:16px;}
.px-6{padding-left:24px;padding-right:24px;}
.px-8{padding-left:32px;padding-right:32px;}
.m-auto{margin:auto;}
.mb-2{margin-bottom:8px;}
.mb-4{margin-bottom:16px;}
.mb-6{margin-bottom:24px;}
.mb-8{margin-bottom:32px;}
.mb-12{margin-bottom:48px;}

/* Background */
.bg-primary{background:#1E3A8A;}
.bg-secondary{background:#60A5FA;}
.bg-dark{background:#0F172A;}
.bg-light{background:#F1F5F9;}
.bg-white{background:#FFF;}

/* Border */
.rounded{border-radius:8px;}
.rounded-lg{border-radius:12px;}
.rounded-full{border-radius:9999px;}

/* Shadow */
.shadow{box-shadow:0 2px 8px rgba(0,0,0,0.1);}
.shadow-lg{box-shadow:0 4px 16px rgba(0,0,0,0.15);}

/* Components */
.header{background:#0F172A;color:#FFF;padding:16px 0;position:sticky;top:0;z-index:100;}
.nav-link{color:#FFF;text-decoration:none;font-weight:500;transition:color 0.3s;}
.nav-link:hover{color:#60A5FA;}
.btn{display:inline-block;padding:12px 32px;border-radius:8px;font-weight:700;text-decoration:none;transition:all 0.3s;}
.btn-primary{background:#1E3A8A;color:#FFF;}
.btn-primary:hover{background:#1E40AF;}
.btn-secondary{background:#60A5FA;color:#FFF;}
.btn-secondary:hover{background:#3B82F6;}

.hero{background:url('/images/hero-background.jpg') center/cover;position:relative;padding:80px 20px;min-height:500px;display:flex;align-items:center;justify-content:center;}
.hero::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(30,58,138,0.9) 0%,rgba(15,23,42,0.85) 100%);}
.hero-content{position:relative;z-index:1;text-align:center;color:#FFF;max-width:900px;}

.game-grid{display:flex;flex-wrap:wrap;gap:24px;margin-bottom:48px;}
.game-card{flex:1 1 calc(33.333% - 24px);min-width:280px;background:#FFF;border-radius:12px;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,0.1);transition:transform 0.3s,box-shadow 0.3s;}
.game-card:hover{transform:translateY(-8px);box-shadow:0 8px 24px rgba(30,58,138,0.2);}
.game-img{width:100%;height:200px;object-fit:cover;}

.faq-list{max-width:900px;margin:0 auto;}
.faq-item{background:#F1F5F9;border-radius:12px;padding:24px;margin-bottom:16px;}
.faq-q{font-size:18px;font-weight:700;color:#1E3A8A;margin-bottom:8px;}
.faq-a{font-size:15px;color:#64748B;line-height:1.7;}

.review-grid{display:flex;flex-wrap:wrap;gap:24px;}
.review-card{flex:1 1 calc(33.333% - 24px);min-width:250px;background:#FFF;border-radius:12px;padding:24px;box-shadow:0 3px 10px rgba(0,0,0,0.08);}
.stars{color:#FBBF24;font-size:18px;margin-bottom:8px;}

.footer{background:#0F172A;color:#FFF;padding:64px 20px 24px;}
.footer-grid{display:flex;flex-wrap:wrap;gap:48px;margin-bottom:32px;}
.footer-col{flex:1 1 200px;}
.footer-title{font-size:18px;font-weight:700;margin-bottom:16px;color:#60A5FA;}
.footer-links{list-style:none;}
.footer-link{color:#CBD5E1;text-decoration:none;display:block;margin-bottom:10px;transition:color 0.3s;}
.footer-link:hover{color:#60A5FA;}
.footer-bottom{text-align:center;padding-top:24px;border-top:1px solid #334155;color:#94A3B8;font-size:14px;}

@media (max-width:768px){
.game-card,.review-card{flex:1 1 100%;}
.text-4xl{font-size:32px;}
.text-3xl{font-size:28px;}
}