/* ══════════════════════════════════════════
   QQPOKER正版官网 — 翡翠绿·墨金主题
   qq1013.com | 2026
══════════════════════════════════════════ */
:root{
  --bg-deep:#0a1a0f;--bg-mid:#0f2518;--bg-card:#122b1a;--bg-card2:#163520;
  --green:#1a7a45;--green2:#22a05a;--green3:#2ecc71;--green-bright:#4ade80;
  --gold:#c9a84c;--gold2:#e8c96a;--gold3:#f5e09a;
  --border:rgba(46,204,113,0.18);--border2:rgba(46,204,113,0.35);
  --text:#e8f5ec;--text2:#8bc4a0;--text3:#4a7a5c;
  --glow:0 0 24px rgba(46,204,113,0.18);--glow2:0 0 40px rgba(46,204,113,0.32);
}

.headLogo{width:auto;height:2.6rem;}
.head{background:linear-gradient(to bottom,#0f2d1a,#0a1a0f);border-bottom:1px solid var(--border2);}
.head .btn{background:var(--gold2);padding:0.2rem;border-radius:50px;color:#0a1a0f;}
.banner{height:auto;}
.banner .jb-1{top:4.5rem;left:2.5rem;}
.banner .jb-2{right:2rem;top:5rem;}
.banner .jb-3{left:2.5rem;bottom:1.3rem;}

.goto-btn{display:block;text-align:center;border-radius:8px;font-size:1.45rem;line-height:1.5;max-width:100%;margin:0 auto 4px;padding:0.5rem 0;}
.btn-back-all{background:linear-gradient(135deg,var(--gold) 0%,var(--gold2) 50%,#d4a843 100%);color:#0a1a0f;font-weight:700;box-shadow:var(--glow2),0 4px 16px rgba(200,168,67,.35);position:relative;overflow:hidden;}
.btn-back-all::after{content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);animation:shine-slide 3s ease-in-out infinite;}
@keyframes shine-slide{0%{left:-100%}60%,100%{left:130%}}
.btn-border-all{border:1px solid var(--gold2);color:var(--gold2);}
.font-weight-300{font-weight:300!important;}
.font-weight-500{font-weight:500!important;}
.text-mynew-amber{background:rgba(0,0,0,0.3);}
.border-color-qq{border:1px solid var(--border2);}
.qq-text-color{color:var(--gold2);}

.card-bg{background:linear-gradient(135deg,var(--bg-card) 0%,var(--bg-card2) 100%);border:1px solid var(--border);box-shadow:var(--glow);}

.qq-btn-animation{display:block;padding:0.8rem 0;border-radius:50px;background:linear-gradient(135deg,var(--gold) 0%,var(--gold2) 60%,#d4a843 100%);color:#0a1a0f;text-align:center;position:fixed;bottom:1rem;left:50%;transform:translateX(-50%);animation:qq-btn-animation 2s infinite;font-weight:700;box-shadow:var(--glow2),0 4px 20px rgba(200,168,67,.4);}
@keyframes qq-btn-animation{
  0%{transform:translateX(-50%) translateY(0) scale(1);box-shadow:var(--glow2),0 4px 20px rgba(200,168,67,.4);}
  50%{transform:translateX(-50%) translateY(-3px) scale(1.02);box-shadow:0 0 48px rgba(46,204,113,.4),0 8px 28px rgba(200,168,67,.5);}
  100%{transform:translateX(-50%) translateY(0) scale(1);box-shadow:var(--glow2),0 4px 20px rgba(200,168,67,.4);}
}

.text-gradient-animation{background:linear-gradient(90deg,var(--gold2),var(--green-bright),var(--gold2));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:text-shimmer 3s linear infinite;}
@keyframes text-shimmer{0%{background-position:200% center}100%{background-position:-200% center}}

.weixin-color{color:#3BAC36;}

.seo-intro{font-size:0.82rem;color:var(--text2);line-height:1.9;margin:0.6rem 0;padding:0.75rem 0.9rem;background:rgba(46,204,113,0.05);border-left:3px solid var(--green3);border-radius:0 6px 6px 0;}
.seo-intro strong{color:var(--gold2);font-weight:600;}

.quick-nav{display:flex;flex-wrap:wrap;gap:0.35rem;margin-top:0.6rem;}
.quick-nav a{font-size:0.72rem;padding:0.22rem 0.7rem;border-radius:20px;background:rgba(46,204,113,0.08);border:1px solid var(--border2);color:var(--green-bright);text-decoration:none;transition:background 0.2s;}
.quick-nav a:hover{background:rgba(46,204,113,0.18);}

.data-num{background:linear-gradient(135deg,var(--green3),var(--green-bright))!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;font-size:1rem;font-weight:900;line-height:1;}
.data-item{border-color:rgba(46,204,113,0.22)!important;background:rgba(10,26,15,0.6)!important;border-radius:8px;padding:0.6rem 0.3rem;text-align:center;}
.data-lbl{font-size:.55rem;color:var(--text3);margin-top:.15rem;}
.data-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin:.5rem 0;}

#pgbar{position:fixed;top:0;left:0;height:2px;width:0%;background:linear-gradient(90deg,var(--green2),var(--green-bright),var(--gold2));z-index:999;pointer-events:none;transition:width .1s linear;}
#btop{position:fixed;bottom:90px;right:12px;width:36px;height:36px;border-radius:50%;background:rgba(10,26,15,.92);border:1px solid rgba(46,204,113,.4);color:var(--green3);font-size:.85rem;display:none;align-items:center;justify-content:center;cursor:pointer;z-index:500;backdrop-filter:blur(6px);}
#btop.show{display:flex;}
.skip-link{position:absolute;top:-40px;left:0;background:var(--green3);color:#0a1a0f;padding:8px 12px;z-index:999;font-weight:700;transition:top .2s;}
.skip-link:focus{top:0;}
.sr-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

.activity-list > div{transition:transform 0.2s,box-shadow 0.2s;}
.activity-list > div:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(46,204,113,0.2);}

.guide-item{border-left:3px solid var(--green2);transition:border-color 0.2s;}
.guide-item:hover{border-color:var(--green3);}
.faq-item{transition:background 0.15s;}
.faq-item:hover{background:rgba(46,204,113,0.04);}

.footer-logo{background:linear-gradient(to bottom,#0a1a0f,#061009);border-top:1px solid var(--border);padding-bottom:5rem;}
.footer-text{text-align:center;font-size:0.72rem;color:var(--text3);padding:0.5rem 1rem;}

.shine{position:relative;overflow:hidden;}
.shine::before{content:'';position:absolute;top:0;left:-100%;width:55%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:sw 3s ease-in-out infinite;}
@keyframes sw{0%{left:-100%}55%,100%{left:135%}}

.floating{animation:floating 3s ease-in-out infinite;filter:drop-shadow(0 4px 8px rgba(46,204,113,0.3));}
@keyframes floating{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-10px) rotate(2deg)}}

body{background:var(--bg-deep)!important;}
.min-h-screen{min-height:100vh;}

@media(max-width:360px){.data-grid{grid-template-columns:repeat(2,1fr)}.goto-btn{font-size:1.2rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media(hover:none){.btn-back-all:hover,.activity-list>div:hover{transform:none}}