/* ============================================
   c7娱乐 - 全站样式表
   配色方案: 深紫金主题 (独特设计)
   ============================================ */

/* CSS Reset & Base */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;color:#e8e0f0;background:#0a0a1a;line-height:1.8;overflow-x:hidden}
a{color:#f0c040;text-decoration:none;transition:color .3s}
a:hover{color:#ffe080}
img{max-width:100%;height:auto;display:block}
ul,ol{list-style:none}
h1,h2,h3,h4,h5,h6{line-height:1.3;font-weight:700}

/* Utility */
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 16px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.text-gold{color:#daa520}
.text-white{color:#fff}
.bg-dark{background:#0d0d24}
.bg-darker{background:#060614}

/* ============================================
   Header & Navigation (非sticky)
   ============================================ */
.site-header{background:linear-gradient(135deg,#0d0d24 0%,#1a0a30 100%);border-bottom:2px solid #daa520;padding:12px 0;position:relative;z-index:100}
.header-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.site-logo{display:flex;align-items:center;gap:10px}
.site-logo img{height:48px;width:auto}
.site-logo span{font-size:1.25rem;font-weight:700;color:#daa520}

/* Desktop Nav */
.main-nav{display:none}
.main-nav ul{display:flex;gap:4px;flex-wrap:wrap}
.main-nav a{display:block;padding:8px 14px;border-radius:6px;font-size:.9rem;color:#ccc;transition:all .3s}
.main-nav a:hover,.main-nav a.active{background:rgba(218,165,32,.15);color:#daa520}

/* Mobile Menu Toggle */
.menu-toggle{display:flex;flex-direction:column;gap:5px;cursor:pointer;padding:8px;background:none;border:1px solid #daa520;border-radius:6px}
.menu-toggle span{display:block;width:24px;height:2px;background:#daa520;transition:all .3s}

/* Mobile Nav */
.mobile-nav{display:none;width:100%;background:#12122a;border-top:1px solid #222;padding:10px 0}
.mobile-nav.open{display:block}
.mobile-nav a{display:block;padding:12px 20px;color:#ccc;border-bottom:1px solid #1a1a35;font-size:.95rem}
.mobile-nav a:hover{color:#daa520;background:rgba(218,165,32,.08)}

@media(min-width:768px){
  .menu-toggle{display:none}
  .main-nav{display:block}
  .mobile-nav{display:none!important}
}

/* ============================================
   Hero Section
   ============================================ */
.hero-section{position:relative;overflow:hidden;background:#0a0a1a}
.hero-section img{width:100%;height:auto;min-height:200px;object-fit:cover}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(10,10,26,.3),rgba(10,10,26,.7));display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px}
.hero-overlay h1{font-size:clamp(1.5rem,5vw,3rem);color:#fff;text-shadow:0 2px 20px rgba(218,165,32,.5)}
.hero-overlay p{font-size:clamp(.9rem,2.5vw,1.25rem);color:#e0d0b0;margin-top:10px}

/* CTA Button */
.cta-btn{display:inline-block;padding:14px 36px;background:linear-gradient(135deg,#daa520,#f0c040);color:#0d0d24;font-weight:700;font-size:1.05rem;border-radius:50px;margin-top:20px;box-shadow:0 4px 20px rgba(218,165,32,.4);transition:all .3s;border:none;cursor:pointer}
.cta-btn:hover{transform:translateY(-2px);box-shadow:0 6px 30px rgba(218,165,32,.6);color:#0d0d24}

/* ============================================
   Video Section
   ============================================ */
.video-section{padding:40px 0;background:#0d0d24}
.video-wrapper{position:relative;max-width:800px;margin:0 auto;border-radius:12px;overflow:hidden;box-shadow:0 8px 40px rgba(0,0,0,.5)}
.video-wrapper video{width:100%;display:block;background:#000}
.video-poster{position:relative;cursor:pointer}
.video-poster img{width:100%;display:block}
.play-btn-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.3);transition:background .3s}
.play-btn-overlay:hover{background:rgba(0,0,0,.1)}
.play-btn-circle{width:70px;height:70px;border-radius:50%;background:rgba(218,165,32,.9);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(218,165,32,.5)}
.play-btn-circle::after{content:"";display:block;width:0;height:0;border-style:solid;border-width:15px 0 15px 25px;border-color:transparent transparent transparent #0d0d24;margin-left:5px}

/* ============================================
   Section Titles
   ============================================ */
.section-title{text-align:center;padding:40px 0 25px;position:relative}
.section-title h2{font-size:clamp(1.3rem,3.5vw,2rem);color:#daa520;display:inline-block;position:relative}
.section-title h2::after{content:"";display:block;width:60%;height:3px;background:linear-gradient(to right,transparent,#daa520,transparent);margin:10px auto 0}
.section-title p{color:#999;margin-top:8px;font-size:.95rem}

/* ============================================
   Game Cards Grid
   ============================================ */
.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;padding:0 0 40px}
.game-card{border-radius:12px;overflow:hidden;background:#12122a;border:1px solid #222;transition:all .4s;position:relative}
.game-card:hover{transform:translateY(-6px);border-color:#daa520;box-shadow:0 8px 30px rgba(218,165,32,.2)}
.game-card figure{overflow:hidden;aspect-ratio:4/3}
.game-card figure img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.game-card:hover figure img{transform:scale(1.08)}
.game-card-body{padding:16px}
.game-card-body h3{font-size:1.1rem;color:#fff;margin-bottom:6px}
.game-card-body p{font-size:.85rem;color:#999;line-height:1.6}
.game-card .card-cta{display:inline-block;margin-top:12px;padding:8px 24px;background:#daa520;color:#0d0d24;border-radius:20px;font-size:.85rem;font-weight:600}
.game-card .card-cta:hover{background:#f0c040}

/* ============================================
   Lottery Module
   ============================================ */
.lottery-section{background:linear-gradient(180deg,#0d0d24,#0a0a1a);padding:40px 0}
.lottery-grid{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:768px){.lottery-grid{grid-template-columns:1fr 1fr}}
.lottery-card{background:#12122a;border:1px solid #222;border-radius:12px;overflow:hidden;padding:20px}
.lottery-card img{border-radius:8px;margin-bottom:15px}
.lottery-card h3{color:#daa520;font-size:1.15rem;margin-bottom:10px}
.lottery-card p{color:#bbb;font-size:.9rem}

/* ============================================
   Promo / Recharge Section
   ============================================ */
.promo-section{padding:40px 0;background:#060614}
.promo-banner{border-radius:12px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.4)}
.promo-banner img{width:100%}

/* ============================================
   Articles Grid
   ============================================ */
.articles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;padding-bottom:40px}
.article-card{background:#12122a;border:1px solid #222;border-radius:12px;overflow:hidden;transition:all .3s}
.article-card:hover{border-color:#daa520;transform:translateY(-4px)}
.article-card figure{aspect-ratio:16/10;overflow:hidden}
.article-card figure img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.article-card:hover figure img{transform:scale(1.05)}
.article-card-body{padding:16px}
.article-card-body h3{font-size:1rem;color:#fff;margin-bottom:8px}
.article-card-body p{font-size:.85rem;color:#999;line-height:1.6}
.article-card-body .read-more{display:inline-block;margin-top:10px;color:#daa520;font-size:.85rem}

/* ============================================
   Reviews Section
   ============================================ */
.reviews-section{padding:40px 0;background:#0a0a1a}
.reviews-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px}
.review-card{background:#12122a;border:1px solid #1a1a35;border-radius:12px;padding:20px;transition:border-color .3s}
.review-card:hover{border-color:#daa520}
.review-header{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.review-avatar{width:50px;height:50px;border-radius:50%;object-fit:cover;border:2px solid #daa520}
.review-meta h4{font-size:.95rem;color:#fff}
.review-meta .review-info{font-size:.78rem;color:#888}
.review-stars{color:#daa520;font-size:1rem;margin-bottom:8px;letter-spacing:2px}
.review-text{font-size:.88rem;color:#bbb;line-height:1.7}
.review-date{font-size:.75rem;color:#666;margin-top:10px}

/* ============================================
   FAQ Section
   ============================================ */
.faq-section{padding:40px 0;background:#0d0d24}
.faq-list{max-width:800px;margin:0 auto}
.faq-item{border:1px solid #222;border-radius:10px;margin-bottom:12px;overflow:hidden;background:#12122a}
.faq-question{padding:16px 20px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:600;color:#e0d0b0;font-size:.95rem;transition:background .3s}
.faq-question:hover{background:rgba(218,165,32,.08)}
.faq-question::after{content:"+";font-size:1.3rem;color:#daa520;transition:transform .3s}
.faq-item.active .faq-question::after{transform:rotate(45deg)}
.faq-answer{padding:0 20px;max-height:0;overflow:hidden;transition:all .4s ease;color:#999;font-size:.9rem;line-height:1.8}
.faq-item.active .faq-answer{padding:0 20px 16px;max-height:500px}

/* ============================================
   About Section
   ============================================ */
.about-section{padding:40px 0;background:#060614}
.about-content{max-width:900px;margin:0 auto}
.about-content p{margin-bottom:16px;font-size:.95rem;color:#bbb;line-height:1.9}
.about-content h3{color:#daa520;font-size:1.2rem;margin:25px 0 12px}

/* ============================================
   Payment Section
   ============================================ */
.payment-section{padding:40px 0;background:#0a0a1a}
.payment-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:15px;max-width:700px;margin:0 auto}
.payment-item{background:#12122a;border:1px solid #222;border-radius:10px;padding:15px;text-align:center;transition:all .3s}
.payment-item:hover{border-color:#daa520}
.payment-item img{margin:0 auto 8px;height:50px;width:auto}
.payment-item span{display:block;font-size:.8rem;color:#999}

/* ============================================
   License Section
   ============================================ */
.license-section{padding:40px 0;background:#0d0d24}
.license-content{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.license-content img{max-width:400px;border-radius:12px;border:2px solid #daa520}
.license-info{max-width:700px}
.license-info p{color:#bbb;font-size:.9rem;line-height:1.8;margin-bottom:10px}
@media(min-width:768px){.license-content{flex-direction:row;text-align:left}}

/* ============================================
   Support Section
   ============================================ */
.support-section{padding:40px 0;background:#060614}
.support-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:20px;max-width:800px;margin:0 auto}
.support-card{background:#12122a;border:1px solid #222;border-radius:12px;padding:20px;text-align:center;transition:all .3s}
.support-card:hover{border-color:#daa520;transform:translateY(-3px)}
.support-card img{width:60px;height:60px;margin:0 auto 12px;border-radius:50%}
.support-card h4{color:#fff;font-size:.95rem;margin-bottom:6px}
.support-card p{color:#999;font-size:.8rem}

/* ============================================
   Responsible Gaming
   ============================================ */
.responsible-section{padding:40px 0;background:#0a0a1a;border-top:1px solid #222}
.responsible-content{max-width:800px;margin:0 auto;text-align:center}
.responsible-content p{color:#999;font-size:.88rem;line-height:1.8;margin-bottom:12px}
.responsible-content .age-badge{display:inline-block;margin:15px 0}
.responsible-content .age-badge img{width:60px;height:60px}

/* ============================================
   Breadcrumb
   ============================================ */
.breadcrumb{padding:12px 0;font-size:.82rem;color:#888}
.breadcrumb a{color:#daa520}
.breadcrumb span{margin:0 6px;color:#555}

/* ============================================
   Footer
   ============================================ */
.site-footer{background:#060610;border-top:2px solid #daa520;padding:40px 0 0}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:30px;padding-bottom:30px}
.footer-col h4{color:#daa520;font-size:1rem;margin-bottom:15px;position:relative;padding-bottom:8px}
.footer-col h4::after{content:"";position:absolute;bottom:0;left:0;width:40px;height:2px;background:#daa520}
.footer-col a{display:block;color:#999;font-size:.85rem;padding:4px 0;transition:color .3s}
.footer-col a:hover{color:#daa520;padding-left:4px}
.footer-col p{color:#888;font-size:.83rem;line-height:1.7}
.footer-social{display:flex;gap:10px;margin-top:12px}
.footer-social a{display:flex}
.footer-social img{width:36px;height:36px;border-radius:8px;transition:transform .3s}
.footer-social img:hover{transform:scale(1.1)}
.footer-payment{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.footer-payment img{height:35px;width:auto;border-radius:6px}
.footer-bottom{border-top:1px solid #1a1a30;padding:20px 0;text-align:center}
.footer-bottom p{color:#666;font-size:.78rem;line-height:1.7}
.footer-disclaimer{max-width:800px;margin:0 auto;padding:15px 0}
.footer-disclaimer p{color:#777;font-size:.75rem;line-height:1.7}

/* ============================================
   Inner Page Styles
   ============================================ */
.page-hero{padding:60px 0 40px;background:linear-gradient(135deg,#0d0d24,#1a0a30);text-align:center}
.page-hero h1{font-size:clamp(1.5rem,4vw,2.5rem);color:#daa520}
.page-hero p{color:#999;margin-top:8px;font-size:.95rem}
.page-content{padding:30px 0 50px;background:#0a0a1a}
.page-content article{max-width:900px;margin:0 auto}
.page-content article p{color:#bbb;font-size:.95rem;line-height:1.9;margin-bottom:16px}
.page-content article h2{color:#daa520;font-size:1.4rem;margin:30px 0 15px;padding-bottom:8px;border-bottom:1px solid #222}
.page-content article h3{color:#e0d0b0;font-size:1.15rem;margin:20px 0 10px}
.page-content article ul,.page-content article ol{margin:10px 0 16px 20px;color:#bbb}
.page-content article li{margin-bottom:6px;font-size:.9rem;line-height:1.7}
.page-content article ul li::before{content:"▸";color:#daa520;margin-right:8px}
.page-content .game-images{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:15px;margin:20px 0}
.page-content .game-images img{border-radius:10px;border:1px solid #222}
.page-content .info-table{width:100%;border-collapse:collapse;margin:20px 0}
.page-content .info-table th,.page-content .info-table td{padding:12px 16px;border:1px solid #222;font-size:.88rem}
.page-content .info-table th{background:#1a1a35;color:#daa520;text-align:left}
.page-content .info-table td{color:#bbb}

/* ============================================
   App Download Page
   ============================================ */
.app-hero{padding:60px 20px;background:linear-gradient(135deg,#1a0a30,#0d0d24);text-align:center}
.app-hero h1{font-size:clamp(1.5rem,4vw,2.5rem);color:#daa520}
.app-hero p{color:#bbb;margin-top:10px}
.app-features{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px;padding:40px 0}
.app-feature-card{background:#12122a;border:1px solid #222;border-radius:12px;padding:24px;text-align:center;transition:all .3s}
.app-feature-card:hover{border-color:#daa520;transform:translateY(-4px)}
.app-feature-card h3{color:#daa520;margin-bottom:10px}
.app-feature-card p{color:#999;font-size:.88rem}
.download-btns{display:flex;flex-wrap:wrap;gap:15px;justify-content:center;margin:30px 0}
.download-btn{display:inline-flex;align-items:center;gap:10px;padding:14px 30px;border-radius:12px;font-weight:600;font-size:1rem;transition:all .3s}
.download-btn.ios{background:linear-gradient(135deg,#333,#555);color:#fff}
.download-btn.android{background:linear-gradient(135deg,#1b5e20,#388e3c);color:#fff}
.download-btn:hover{transform:translateY(-2px);box-shadow:0 4px 20px rgba(0,0,0,.4)}
.qr-section{text-align:center;padding:30px 0}
.qr-section img{width:180px;margin:0 auto;border:3px solid #daa520;border-radius:12px;padding:10px;background:#fff}

/* ============================================
   Author Box
   ============================================ */
.author-box{display:flex;gap:16px;align-items:flex-start;background:#12122a;border:1px solid #222;border-radius:12px;padding:20px;margin:30px 0}
.author-box img{width:80px;height:80px;border-radius:50%;border:2px solid #daa520}
.author-info h4{color:#daa520;font-size:1rem}
.author-info p{color:#999;font-size:.85rem;line-height:1.6}

/* ============================================
   Animations
   ============================================ */
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.fade-in{animation:fadeInUp .6s ease forwards;opacity:0}
.shimmer-gold{background:linear-gradient(90deg,#daa520,#f0c040,#daa520);background-size:200% 100%;animation:shimmer 3s infinite}

/* ============================================
   Responsive
   ============================================ */
@media(max-width:480px){
  .container{padding:0 12px}
  .games-grid{grid-template-columns:1fr}
  .reviews-grid{grid-template-columns:1fr}
  .articles-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .payment-grid{grid-template-columns:repeat(3,1fr)}
  .support-grid{grid-template-columns:repeat(2,1fr)}
  .author-box{flex-direction:column;align-items:center;text-align:center}
}
@media(min-width:481px) and (max-width:767px){
  .games-grid{grid-template-columns:repeat(2,1fr)}
  .reviews-grid{grid-template-columns:1fr}
}
@media(min-width:1024px){
  .games-grid{grid-template-columns:repeat(3,1fr)}
}