/* 掌玩前台统一视觉主题 v2.0 */
:root {
  --zw-bg: #070910;
  --zw-bg-soft: #0d101b;
  --zw-panel: rgba(17, 20, 34, .88);
  --zw-panel-solid: #111522;
  --zw-panel-2: #171c2c;
  --zw-line: rgba(255,255,255,.09);
  --zw-line-strong: rgba(139,92,246,.34);
  --zw-text: #f4f5fb;
  --zw-muted: #939bb2;
  --zw-purple: #8b5cf6;
  --zw-purple-2: #6d28d9;
  --zw-gold: #f6c453;
  --zw-gold-2: #f59e0b;
  --zw-cyan: #38bdf8;
  --zw-green: #22c55e;
  --zw-shadow: 0 22px 60px rgba(0,0,0,.35);
  --zw-radius: 18px;
}
html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(circle at 8% -8%, rgba(109,40,217,.22), transparent 32%),
    radial-gradient(circle at 92% 14%, rgba(246,196,83,.09), transparent 27%),
    linear-gradient(180deg, #070910 0%, #090c15 48%, #070910 100%) !important;
  color: var(--zw-text) !important;
  letter-spacing: .01em;
}
body::before, body::after { opacity: .16 !important; filter: blur(150px) !important; }
.container { width: min(100% - 40px, 1360px) !important; max-width: 1360px !important; padding-left: 0 !important; padding-right: 0 !important; }
.header {
  background: rgba(7,9,16,.78) !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  box-shadow: 0 10px 35px rgba(0,0,0,.22) !important;
  backdrop-filter: blur(20px) saturate(130%) !important;
}
.header::after { height: 1px !important; background: linear-gradient(90deg, transparent, rgba(139,92,246,.75), rgba(246,196,83,.55), transparent) !important; }
.logo-icon {
  border: 1px solid rgba(255,255,255,.18) !important;
  background: linear-gradient(145deg, #9f7aea, #6d28d9 65%, #4c1d95) !important;
  box-shadow: 0 8px 24px rgba(109,40,217,.34) !important;
}
.logo span { background: linear-gradient(120deg,#fff 15%,#ddd6fe 60%,#f6c453) !important; -webkit-background-clip:text !important; background-clip:text !important; }
.nav a { border: 1px solid transparent; }
.nav a:hover, .nav a.active { background: rgba(139,92,246,.12) !important; border-color: rgba(139,92,246,.2) !important; }
.nav .btn-login { background: rgba(255,255,255,.025) !important; }
.nav .btn-register, .btn-primary, .search-btn {
  background: linear-gradient(135deg, #8b5cf6, #6d28d9) !important;
  box-shadow: 0 8px 22px rgba(109,40,217,.22);
}
.section { padding: 46px 0 !important; }
.section-head { margin-bottom: 22px !important; }
.section-title { font-size: clamp(22px,2vw,29px) !important; letter-spacing: -.02em; }
.section-title .bar, .card-title .bar { background: linear-gradient(180deg,var(--zw-gold),var(--zw-purple)) !important; box-shadow: 0 0 16px rgba(139,92,246,.32); }
.section-title .sub { color: var(--zw-muted) !important; }
.notice-bar {
  background: linear-gradient(100deg,rgba(139,92,246,.11),rgba(246,196,83,.055)) !important;
  border-color: rgba(139,92,246,.25) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.035);
}
.game-card, .account-card, .card, .profile-card, .app-section, .contact-card {
  background: linear-gradient(155deg,rgba(22,26,43,.94),rgba(13,16,27,.96)) !important;
  border: 1px solid var(--zw-line) !important;
  box-shadow: 0 12px 35px rgba(0,0,0,.19) !important;
}
.game-card, .account-card { border-radius: var(--zw-radius) !important; }
.game-card:hover, .account-card:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(139,92,246,.44) !important;
  box-shadow: 0 22px 48px rgba(0,0,0,.32), 0 0 0 1px rgba(139,92,246,.08) !important;
}
.game-cover, .account-cover { background-color: #101421 !important; }
.game-cover::after, .account-cover::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,transparent 58%,rgba(7,9,16,.56)); }
.game-info, .account-body { position: relative; }
.game-name, .account-title { letter-spacing: -.01em; }
.category-tabs { gap: 10px !important; }
.category-tab {
  background: rgba(17,21,34,.72) !important;
  border-color: var(--zw-line) !important;
  border-radius: 999px !important;
  padding: 8px 17px !important;
}
.category-tab.active { background: linear-gradient(135deg,#8b5cf6,#6d28d9) !important; box-shadow: 0 8px 20px rgba(109,40,217,.22); }
.search-bar {
  padding: 14px !important;
  border-radius: 16px;
  background: rgba(17,21,34,.68);
  border: 1px solid var(--zw-line);
}
.search-input, .search-select, .form-input, .form-select, .form-textarea, .input {
  background: rgba(8,11,20,.72) !important;
  border-color: rgba(255,255,255,.11) !important;
  color: var(--zw-text) !important;
}
.search-input:focus, .search-select:focus, .form-input:focus, .form-select:focus, .form-textarea:focus, .input:focus {
  border-color: rgba(139,92,246,.75) !important;
  box-shadow: 0 0 0 4px rgba(139,92,246,.12) !important;
}
.account-btn, .game-btn.detail { background: rgba(139,92,246,.10) !important; border-color: rgba(139,92,246,.25) !important; color:#ddd6fe !important; }
.game-btn.download { background: linear-gradient(135deg,var(--zw-gold),var(--zw-gold-2)) !important; }
.account-code-link { background: rgba(246,196,83,.08); border:1px solid rgba(246,196,83,.18); border-radius:999px; padding:4px 9px; }
.app-section, .contact-card { border-radius: 24px !important; overflow:hidden; position:relative; }
.app-section::before, .contact-card::before { content:""; position:absolute; width:260px; height:260px; border-radius:50%; filter:blur(70px); opacity:.12; right:-90px; top:-120px; background:var(--zw-purple); pointer-events:none; }
.app-icon-box { background:linear-gradient(145deg,#9f7aea,#6d28d9) !important; border:1px solid rgba(255,255,255,.14); }
.contact-wechat { background: rgba(34,197,94,.08) !important; border-width: 1px !important; }
.footer { background:#080b13 !important; border-top-color:rgba(255,255,255,.07) !important; }
.float-toggle { animation:none !important; border:1px solid rgba(255,255,255,.18) !important; }
.float-panel { background:rgba(14,18,29,.96) !important; border-color:rgba(34,197,94,.24) !important; }
.empty { border:1px dashed rgba(255,255,255,.11); border-radius:18px; background:rgba(255,255,255,.018); }
.sponsor-badge { animation:none !important; }
.auth-wrapper { background:transparent !important; }
.brand-panel { background:linear-gradient(145deg,rgba(19,23,39,.98),rgba(10,12,22,.98)) !important; }
.form-panel { background:rgba(10,13,22,.9) !important; }
.form-box { background:rgba(18,22,36,.72); border:1px solid var(--zw-line); border-radius:24px; padding:32px !important; box-shadow:var(--zw-shadow); }
.back-home, .back-btn { border:1px solid var(--zw-line) !important; background:rgba(255,255,255,.035) !important; border-radius:999px !important; }
.main { position:relative; z-index:1; }
.tabs { background:rgba(17,21,34,.68) !important; border:1px solid var(--zw-line); border-radius:16px !important; padding:6px !important; }
.tab { border-radius:11px !important; }
.tab.active { background:linear-gradient(135deg,#8b5cf6,#6d28d9) !important; }
@media (max-width: 968px) {
  .container { width:min(100% - 28px,1360px) !important; }
  .section { padding:34px 0 !important; }
}
@media (max-width: 768px) {
  .container { width:min(100% - 24px,1360px) !important; }
  .header .container { height:62px !important; }
  .section-title .sub { display:none; }
  .search-bar { padding:10px !important; gap:9px !important; }
  .search-input-wrap { flex-basis:100%; }
  .search-select { flex:1; min-width:0 !important; }
  .search-btn { width:100%; }
  .game-card:hover, .account-card:hover { transform:none !important; }
  .app-section, .contact-card { padding:24px 18px !important; }
  .float-contact { right:14px !important; bottom:84px !important; }
  .form-box { padding:24px 18px !important; border-radius:18px; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* 首页轮播组件 v2 */
.banner-section { padding:22px 0 16px !important; }
.banner {
  position:relative; overflow:hidden; border-radius:24px !important;
  aspect-ratio:16/5; min-height:330px; max-height:460px;
  background:#101421; border:1px solid rgba(255,255,255,.10);
  box-shadow:0 26px 70px rgba(0,0,0,.38) !important;
  isolation:isolate; touch-action:pan-y;
}
.banner::after { content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(255,255,255,.035); pointer-events:none; z-index:8; }
.banner-slides { height:100%; display:flex; transition:transform .62s cubic-bezier(.22,.8,.24,1) !important; will-change:transform; }
.banner-slide { min-width:100%; height:100% !important; padding:0 !important; position:relative; display:flex; align-items:center; background:linear-gradient(135deg,#251447,#0b1528) !important; overflow:hidden; }
.banner-media { position:absolute; inset:0; display:block; }
.banner-media img { width:100%; height:100%; display:block; object-fit:cover; object-position:center center; transform:scale(1.002); }
.banner-slide::before { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg,rgba(6,8,15,.90) 0%,rgba(6,8,15,.68) 38%,rgba(6,8,15,.18) 70%,rgba(6,8,15,.06) 100%); }
.banner-slide[data-overlay="soft"]::before { background:linear-gradient(90deg,rgba(6,8,15,.76),rgba(6,8,15,.34) 52%,rgba(6,8,15,.08)); }
.banner-slide[data-overlay="none"]::before { background:linear-gradient(180deg,transparent 56%,rgba(6,8,15,.32)); }
.banner-slide.no-text::before { background:linear-gradient(180deg,rgba(6,8,15,.02),rgba(6,8,15,.18)); }
.banner-slide-content { position:relative; z-index:2; max-width:610px !important; margin-left:clamp(28px,5.5vw,82px); padding:34px 0 50px; }
.banner-eyebrow { display:inline-flex; align-items:center; gap:8px; margin-bottom:13px; padding:6px 11px; border-radius:999px; border:1px solid rgba(246,196,83,.28); background:rgba(246,196,83,.08); color:#f8d984; font-size:12px; font-weight:800; letter-spacing:.12em; }
.banner-eyebrow::before { content:""; width:6px; height:6px; border-radius:50%; background:#f6c453; box-shadow:0 0 10px rgba(246,196,83,.8); }
.banner-slide-content h2 { margin:0 0 12px !important; font-size:clamp(28px,3.1vw,48px) !important; line-height:1.13; letter-spacing:-.035em; text-shadow:0 7px 28px rgba(0,0,0,.4); }
.banner-slide-content p { max-width:520px; margin:0 0 24px !important; font-size:clamp(14px,1.25vw,17px) !important; line-height:1.75; color:rgba(245,247,255,.78) !important; }
.banner-btns { gap:11px !important; }
.banner-btn { min-height:44px; padding:11px 22px !important; border-radius:12px !important; display:inline-flex; align-items:center; justify-content:center; gap:7px; transition:transform .2s,box-shadow .2s,border-color .2s !important; }
.banner-btn:hover { transform:translateY(-2px); }
.banner-btn.primary { background:linear-gradient(135deg,#f8d36b,#e99a22) !important; color:#201400 !important; box-shadow:0 10px 25px rgba(233,154,34,.25); }
.banner-btn.outline { background:rgba(255,255,255,.075) !important; border:1px solid rgba(255,255,255,.20) !important; backdrop-filter:blur(8px); }
.banner-arrow { position:absolute; z-index:6; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.18); background:rgba(7,9,16,.48); color:#fff; display:grid; place-items:center; font-size:25px; line-height:1; backdrop-filter:blur(10px); opacity:0; transition:opacity .2s,background .2s,transform .2s; }
.banner:hover .banner-arrow,.banner:focus-within .banner-arrow { opacity:1; }
.banner-arrow:hover { background:rgba(109,40,217,.72); transform:translateY(-50%) scale(1.05); }
.banner-prev { left:16px; }.banner-next { right:16px; }
.banner-bottom { position:absolute; z-index:6; left:clamp(24px,5vw,74px); right:clamp(24px,5vw,74px); bottom:16px; display:flex; align-items:center; justify-content:space-between; gap:18px; }
.banner-dots { position:static !important; transform:none !important; display:flex; gap:8px !important; }
.banner-dot { width:8px !important; height:8px !important; border:0; padding:0; background:rgba(255,255,255,.36) !important; border-radius:999px !important; transition:width .25s,background .25s !important; }
.banner-dot.active { width:26px !important; background:#fff !important; }
.banner-counter { font-size:12px; color:rgba(255,255,255,.64); font-variant-numeric:tabular-nums; letter-spacing:.12em; }
.banner-progress { position:absolute; z-index:7; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,.09); }
.banner-progress-bar { width:0; height:100%; background:linear-gradient(90deg,#8b5cf6,#f6c453); transform-origin:left; }
.banner-progress-bar.running { animation:bannerProgress var(--banner-duration,6000ms) linear forwards; }
@keyframes bannerProgress { from{width:0} to{width:100%} }
.banner.is-single .banner-arrow,.banner.is-single .banner-bottom,.banner.is-single .banner-progress { display:none !important; }
@media (max-width:968px){
  .banner { aspect-ratio:16/7; min-height:300px; border-radius:20px !important; }
  .banner-slide-content { margin-left:34px; max-width:520px !important; }
  .banner-arrow { opacity:1; width:40px; height:40px; }
}
@media (max-width:640px){
  .banner-section { padding-top:12px !important; }
  .banner { aspect-ratio:4/3; min-height:0; max-height:none; border-radius:18px !important; }
  .banner-slide::before { background:linear-gradient(180deg,rgba(6,8,15,.18) 0%,rgba(6,8,15,.48) 44%,rgba(6,8,15,.94) 100%); }
  .banner-slide[data-overlay="soft"]::before { background:linear-gradient(180deg,rgba(6,8,15,.08),rgba(6,8,15,.82)); }
  .banner-slide-content { align-self:flex-end; margin:0; padding:24px 20px 48px; max-width:none !important; width:100%; }
  .banner-eyebrow { margin-bottom:9px; padding:4px 9px; font-size:10px; }
  .banner-slide-content h2 { font-size:clamp(23px,7vw,31px) !important; margin-bottom:8px !important; }
  .banner-slide-content p { font-size:13px !important; line-height:1.55; margin-bottom:15px !important; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .banner-btn { min-height:40px; padding:9px 15px !important; font-size:13px !important; }
  .banner-arrow { top:42%; width:36px; height:36px; font-size:21px; background:rgba(7,9,16,.38); }
  .banner-prev{left:9px}.banner-next{right:9px}
  .banner-bottom { left:20px; right:20px; bottom:13px; }
  .banner-counter { display:none; }
}

/* 移动端底部导航与轮播细节 */
.mobile-tabbar { background:rgba(8,11,19,.92) !important; border-top-color:rgba(255,255,255,.08) !important; backdrop-filter:blur(18px) saturate(140%) !important; }
.mobile-tabbar-items { max-width:560px; margin:0 auto; }
.mobile-tabbar a { flex:1; min-width:0; padding:6px 3px !important; transition:color .2s,transform .2s; }
.mobile-tabbar a.active { color:#a78bfa !important; }
.mobile-tabbar a.active .icon { transform:translateY(-1px); filter:drop-shadow(0 4px 8px rgba(139,92,246,.38)); }
@media(max-width:640px){ .banner-arrow{display:none !important;} }