/* 掌玩前台统一视觉主题 v3.0
 * 目标：统一首页/详情/登录注册/用户中心视觉，优化移动端与大批量卡片展示。
 */
:root {
  --zw3-bg: #060810;
  --zw3-bg-2: #0a0d18;
  --zw3-panel: rgba(17, 21, 35, .90);
  --zw3-panel-solid: #111523;
  --zw3-panel-soft: #161b2c;
  --zw3-line: rgba(255,255,255,.085);
  --zw3-line-strong: rgba(147,112,255,.36);
  --zw3-text: #f7f8fc;
  --zw3-muted: #9aa3b8;
  --zw3-purple: #8b5cf6;
  --zw3-purple-deep: #5b21b6;
  --zw3-gold: #f7c85b;
  --zw3-gold-deep: #e69518;
  --zw3-cyan: #45c7f3;
  --zw3-green: #2dd071;
  --zw3-red: #ff626d;
  --zw3-radius-xs: 9px;
  --zw3-radius-sm: 13px;
  --zw3-radius: 18px;
  --zw3-radius-lg: 24px;
  --zw3-shadow-sm: 0 10px 30px rgba(0,0,0,.20);
  --zw3-shadow: 0 24px 70px rgba(0,0,0,.34);
  --zw3-ease: cubic-bezier(.22,.8,.24,1);
}

html { color-scheme: dark; scroll-padding-top: 82px; }
body {
  min-width: 320px;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background:
    radial-gradient(900px 440px at 8% -8%, rgba(100,45,220,.22), transparent 64%),
    radial-gradient(760px 420px at 94% 9%, rgba(247,200,91,.09), transparent 66%),
    linear-gradient(180deg, #060810 0%, #090c16 46%, #060810 100%) !important;
}
::selection { color:#fff; background:rgba(139,92,246,.62); }
:where(a,button,input,select,textarea,[tabindex]):focus-visible {
  outline: 2px solid rgba(167,139,250,.95) !important;
  outline-offset: 3px;
}
:where(button,input,select,textarea) { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img { max-width:100%; }
body::-webkit-scrollbar, *::-webkit-scrollbar { width:10px; height:10px; }
body::-webkit-scrollbar-track, *::-webkit-scrollbar-track { background:rgba(255,255,255,.025); }
body::-webkit-scrollbar-thumb, *::-webkit-scrollbar-thumb { background:rgba(148,163,184,.28); border:2px solid transparent; border-radius:999px; background-clip:padding-box; }
body::-webkit-scrollbar-thumb:hover, *::-webkit-scrollbar-thumb:hover { background:rgba(167,139,250,.45); border:2px solid transparent; background-clip:padding-box; }

.container { width:min(100% - 40px, 1420px) !important; max-width:1420px !important; }
.main, .section, .banner-section { isolation:isolate; }

/* 顶部导航 */
.header {
  background:rgba(6,8,16,.78) !important;
  border-bottom:1px solid rgba(255,255,255,.07) !important;
  backdrop-filter:blur(22px) saturate(145%) !important;
  transition:background .25s, box-shadow .25s !important;
}
.header.is-scrolled { background:rgba(6,8,16,.94) !important; box-shadow:0 14px 38px rgba(0,0,0,.34) !important; }
.header .container { min-height:70px; }
.logo { gap:11px !important; }
.logo-icon {
  width:42px !important; height:42px !important; border-radius:13px !important;
  background:linear-gradient(145deg,#a78bfa 0%,#7c3aed 48%,#4c1d95 100%) !important;
  box-shadow:0 10px 26px rgba(109,40,217,.34), inset 0 1px rgba(255,255,255,.20) !important;
}
.logo span { font-size:clamp(18px,1.7vw,22px); letter-spacing:-.025em; }
.nav { gap:5px !important; }
.nav a { min-height:42px; padding:9px 14px !important; border-radius:11px !important; font-weight:700 !important; }
.nav a:not(.btn-register):not(.btn-login) { color:#a8b0c3 !important; }
.nav a:hover, .nav a.active { color:#fff !important; background:rgba(139,92,246,.12) !important; }
.nav .btn-login, .nav .btn-register { margin-left:4px; }
.nav .btn-register { border:1px solid rgba(255,255,255,.12) !important; }
.nav-toggle {
  width:42px; height:42px; display:none; place-items:center; padding:0 !important;
  border:1px solid var(--zw3-line) !important; border-radius:12px !important;
  background:rgba(255,255,255,.035) !important; font-size:0 !important;
}
.nav-toggle::before { content:""; width:19px; height:14px; background:linear-gradient(#fff 0 0) top/100% 2px no-repeat,linear-gradient(#fff 0 0) center/100% 2px no-repeat,linear-gradient(#fff 0 0) bottom/100% 2px no-repeat; }

/* 首页轮播 */
.banner-section { padding:24px 0 12px !important; }
.banner {
  min-height:340px !important; max-height:480px !important; border-radius:26px !important;
  border:1px solid rgba(255,255,255,.11) !important;
  box-shadow:0 28px 86px rgba(0,0,0,.44), 0 0 0 1px rgba(139,92,246,.05) !important;
}
.banner-slide-content { max-width:660px !important; }
.banner-eyebrow { backdrop-filter:blur(10px); }
.banner-slide-content h2 { max-width:13em; }
.banner-slide-content p { max-width:600px !important; }
.banner-arrow { box-shadow:0 10px 30px rgba(0,0,0,.24); }
.banner-progress { height:2px !important; }
.notice-bar { margin-top:16px !important; margin-bottom:0 !important; border-radius:14px !important; }

/* 版块标题与筛选 */
.section { padding:48px 0 !important; }
.section + .section { border-top:1px solid rgba(255,255,255,.035); }
.section-head { gap:18px; }
.section-title { line-height:1.25 !important; }
.section-title .bar, .card-title .bar { width:5px !important; border-radius:999px !important; }
.section-title .sub { margin-left:2px; }
.category-tabs { margin-bottom:14px !important; overflow-x:auto; flex-wrap:nowrap !important; padding:2px 1px 5px; scrollbar-width:none; }
.category-tabs::-webkit-scrollbar { display:none; }
.category-tab {
  min-height:40px; display:inline-flex; align-items:center; justify-content:center; gap:7px;
  color:#a8b0c3 !important; font-weight:700 !important; transition:transform .2s,border-color .2s,background .2s,color .2s !important;
}
.category-tab:hover { color:#fff !important; transform:translateY(-1px); }
.category-tab .count { min-width:20px; padding:1px 6px; border-radius:999px; background:rgba(255,255,255,.07); font-size:11px; }
.category-tab.active .count { background:rgba(255,255,255,.16); }
.game-toolbar, .search-bar {
  display:flex; align-items:center; gap:10px; padding:12px !important; margin-bottom:12px;
  border:1px solid var(--zw3-line) !important; border-radius:17px !important;
  background:rgba(15,19,31,.72) !important; box-shadow:inset 0 1px rgba(255,255,255,.025);
}
.search-input-wrap { min-height:44px; border-radius:12px !important; background:rgba(6,8,16,.48); }
.search-input, .search-select, .form-input, .form-select, .form-textarea, .input {
  min-height:44px; border-radius:11px !important; color:#f6f7fb !important;
}
.search-input::placeholder, .form-input::placeholder, .form-textarea::placeholder { color:#6f788d !important; }
.search-select { min-width:136px; }
.search-btn { min-height:44px; padding:0 22px !important; border-radius:11px !important; font-weight:800 !important; }
.game-result-bar, .search-result-count { color:var(--zw3-muted) !important; font-size:13px !important; }
.game-result-bar strong, .search-result-count strong { color:#ddd6fe; }
.game-reset-btn { border-radius:999px !important; }

/* 卡片列表 */
.games-grid { grid-template-columns:repeat(auto-fill,minmax(260px,1fr)) !important; gap:20px !important; }
.accounts-grid { grid-template-columns:repeat(auto-fill,minmax(270px,1fr)) !important; gap:20px !important; }
.game-card, .account-card {
  min-width:0; overflow:hidden; border-radius:20px !important;
  background:linear-gradient(158deg,rgba(23,28,46,.97),rgba(12,15,26,.98)) !important;
  box-shadow:0 12px 34px rgba(0,0,0,.21) !important;
  transition:transform .28s var(--zw3-ease),border-color .28s,box-shadow .28s !important;
}
.game-card::before, .account-card::before { content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; background:linear-gradient(135deg,rgba(255,255,255,.045),transparent 26%); opacity:.65; z-index:2; }
.game-card:hover, .account-card:hover { transform:translateY(-6px) !important; border-color:rgba(139,92,246,.48) !important; box-shadow:0 26px 58px rgba(0,0,0,.36),0 0 0 1px rgba(139,92,246,.07) !important; }
.game-cover, .account-cover { position:relative; aspect-ratio:4/3; height:auto !important; overflow:hidden; }
.game-cover img, .account-cover img { width:100%; height:100%; object-fit:cover; transform:translateZ(0); }
.game-cover::after, .account-cover::after { z-index:1; background:linear-gradient(180deg,rgba(6,8,16,.02) 45%,rgba(6,8,16,.70) 100%) !important; }
.game-info, .account-body { padding:17px !important; z-index:3; }
.game-name, .account-title { color:#fff !important; font-weight:850 !important; line-height:1.4 !important; }
.game-name { font-size:18px !important; }
.game-title { color:#8f98ae !important; min-height:42px; }
.game-type-row { min-height:24px; }
.game-server-status { border-radius:10px !important; }
.game-meta { margin-top:12px; }
.tag, .game-type-tag, .cat-badge, .meta-tag { border-radius:999px !important; }
.game-btns { margin-top:2px; }
.game-btn, .account-btn, .app-download-btn, .contact-action-btn, .btn-primary, .btn-gold, .btn-green {
  min-height:42px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:11px !important; font-weight:800 !important; transition:transform .2s,box-shadow .2s,filter .2s !important;
}
.game-btn:hover, .account-btn:hover, .app-download-btn:hover, .contact-action-btn:hover, .btn-primary:hover, .btn-gold:hover, .btn-green:hover { transform:translateY(-1px); filter:brightness(1.05); }
.game-btn.download { color:#251800 !important; box-shadow:0 8px 20px rgba(229,149,24,.18); }
.account-game { color:#a78bfa !important; font-weight:750 !important; }
.account-title-row { gap:8px !important; }
.account-meta { min-height:30px; }
.account-coin { color:#ffd777 !important; }
.account-footer { gap:7px; flex-wrap:wrap; }
.account-code-link, .info-code-link, .account-code-row {
  color:#f7d27b !important; border-color:rgba(247,200,91,.24) !important; background:rgba(247,200,91,.075) !important;
}
.sponsor-badge { border:1px solid rgba(247,200,91,.24) !important; background:linear-gradient(135deg,rgba(247,200,91,.13),rgba(139,92,246,.10)) !important; }

/* 骨架屏、空状态与分页 */
.game-skeleton { position:relative; overflow:hidden; border:1px solid var(--zw3-line); border-radius:20px !important; background:#111522 !important; min-height:390px; }
.game-skeleton::after { content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent); animation:zw3-shimmer 1.35s infinite; }
@keyframes zw3-shimmer { 100% { transform:translateX(100%); } }
.empty { padding:52px 22px !important; }
.game-pagination, .account-pagination, .pagination { gap:7px !important; flex-wrap:wrap; }
.game-pagination button, .account-pagination button, .pagination button, .pagination a {
  min-width:38px; min-height:38px; border-radius:10px !important; border:1px solid var(--zw3-line) !important;
  background:rgba(17,21,35,.78) !important; color:#b7bfd0 !important;
}
.game-pagination button.active, .pagination button.active, .pagination a.active { color:#fff !important; background:linear-gradient(135deg,#8b5cf6,#5b21b6) !important; }
.game-pagination button:disabled, .account-pagination button:disabled { opacity:.38; }

/* APP、客服、页脚 */
.app-section, .contact-card, .profile-card, .card {
  border-radius:24px !important; box-shadow:0 18px 55px rgba(0,0,0,.23) !important;
}
.app-section { padding:34px !important; }
.app-content { gap:28px !important; }
.app-icon-box { width:92px !important; height:92px !important; border-radius:23px !important; }
.contact-card { padding:34px !important; }
.contact-wechat { border-radius:16px !important; }
.footer { margin-top:26px; }
.footer-content { gap:34px !important; }
.footer-bottom { color:#737d91 !important; }
.float-toggle { box-shadow:0 14px 34px rgba(0,0,0,.34) !important; }
.float-panel { border-radius:20px !important; box-shadow:0 25px 70px rgba(0,0,0,.44) !important; }
.mobile-tabbar { padding-bottom:env(safe-area-inset-bottom); }

/* 登录、注册、发布、用户中心 */
.auth-wrapper { min-height:100svh !important; }
.brand-panel { position:relative; overflow:hidden; }
.brand-panel::after { content:""; position:absolute; width:520px; height:520px; border-radius:50%; right:-260px; bottom:-280px; background:rgba(139,92,246,.22); filter:blur(40px); }
.form-panel { padding:32px 22px !important; }
.form-box { width:min(100%,500px) !important; }
.form-title { letter-spacing:-.025em; }
.form-group { margin-bottom:17px !important; }
.input-wrap, .input-wrap .input { border-radius:12px !important; }
.captcha-wrap { gap:10px !important; }
.captcha-img { border-radius:11px !important; overflow:hidden; }
.tabs { gap:6px !important; }
.tab { min-height:42px; }
.profile-card { overflow:hidden; }
.account-list .account-card, .publish-list .account-card { border-radius:17px !important; }
.modal-overlay, .sponsor-modal { backdrop-filter:blur(8px); }
.modal-box, .sponsor-modal-box { border:1px solid var(--zw3-line) !important; border-radius:22px !important; box-shadow:0 34px 90px rgba(0,0,0,.52) !important; }
.warning-box { border-radius:14px !important; }

/* 游戏/账号详情 */
.back-btn, .back-home { min-height:39px; padding:8px 14px !important; }
.game-hero, .account-header, .detail-grid > *, .sidebar > .card, .account-info, .contact-section {
  border-color:var(--zw3-line) !important;
}
.game-hero, .account-header { border-radius:24px !important; overflow:hidden; box-shadow:var(--zw3-shadow-sm); }
.game-cover-big { border-radius:18px !important; overflow:hidden; }
.info-grid { gap:10px !important; }
.info-row { border-radius:12px !important; }
.image-gallery, .gallery { gap:12px !important; }
.gallery-item, .account-img { border-radius:14px !important; overflow:hidden; border:1px solid var(--zw3-line) !important; }
.related-item { border-radius:14px !important; }
.lightbox { backdrop-filter:blur(10px); }

/* 图片失败兜底 */
.image-load-error { position:relative; background:linear-gradient(135deg,#171b2b,#0d101b) !important; }
.image-load-error::before { content:"图片暂时无法加载"; position:absolute; inset:0; display:grid; place-items:center; color:#737d91; font-size:13px; z-index:2; }

/* 回到顶部 */
.zw-backtop {
  position:fixed; right:22px; bottom:22px; z-index:94; width:44px; height:44px; border-radius:14px;
  border:1px solid var(--zw3-line); background:rgba(14,18,30,.90); color:#fff; box-shadow:var(--zw3-shadow-sm);
  backdrop-filter:blur(14px); opacity:0; visibility:hidden; transform:translateY(10px); transition:.2s;
}
.zw-backtop.show { opacity:1; visibility:visible; transform:none; }
.zw-backtop::before { content:"↑"; font-size:20px; }

@media (max-width:1100px) {
  .container { width:min(100% - 30px,1420px) !important; }
  .games-grid { grid-template-columns:repeat(auto-fill,minmax(235px,1fr)) !important; }
  .accounts-grid { grid-template-columns:repeat(auto-fill,minmax(240px,1fr)) !important; }
}

@media (max-width:968px) {
  html { scroll-padding-top:70px; }
  .header .container { min-height:64px; }
  .nav-toggle { display:grid !important; }
  .nav.show {
    top:64px !important; left:14px !important; right:14px !important; padding:12px !important;
    border:1px solid var(--zw3-line) !important; border-radius:16px !important;
    background:rgba(9,12,21,.97) !important; box-shadow:0 25px 70px rgba(0,0,0,.48);
  }
  .nav.show a { min-height:44px; }
  .nav.show #navGuest, .nav.show #navUser { display:contents; }
  .banner { min-height:300px !important; }
  .section { padding:38px 0 !important; }
  .game-toolbar, .search-bar { flex-wrap:wrap; }
  .search-input-wrap { flex:1 1 100% !important; }
  .search-select { flex:1 1 150px; }
  .search-btn { flex:1 1 120px; }
}

@media (max-width:640px) {
  .container { width:min(100% - 24px,1420px) !important; }
  .logo-icon { width:38px !important; height:38px !important; }
  .banner-section { padding-top:12px !important; }
  .banner { aspect-ratio:5/6 !important; min-height:0 !important; border-radius:20px !important; }
  .banner-media img { object-position:center !important; }
  .banner-slide-content { padding:22px 18px 46px !important; }
  .banner-slide-content p { -webkit-line-clamp:3 !important; }
  .section { padding:32px 0 !important; }
  .section-title { font-size:22px !important; }
  .games-grid, .accounts-grid { grid-template-columns:1fr !important; gap:16px !important; }
  .game-card, .account-card { border-radius:18px !important; }
  .game-cover, .account-cover { aspect-ratio:4/3; }
  .game-info, .account-body { padding:15px !important; }
  .game-toolbar, .search-bar { padding:10px !important; border-radius:15px !important; }
  .search-select, .search-btn { flex:1 1 100%; width:100%; }
  .app-section, .contact-card { padding:24px 18px !important; border-radius:20px !important; }
  .app-icon-box { width:76px !important; height:76px !important; }
  .form-panel { padding:18px 12px 30px !important; }
  .form-box { padding:22px 17px !important; }
  .zw-backtop { right:14px; bottom:84px; }
  .mobile-tabbar ~ .zw-backtop { bottom:84px; }
  .float-contact { bottom:136px !important; }
}

@media (hover:none) {
  .game-card:hover, .account-card:hover { transform:none !important; box-shadow:0 12px 34px rgba(0,0,0,.21) !important; }
}

@media (prefers-reduced-motion:reduce) {
  .game-skeleton::after { animation:none !important; }
}

/* v2.0 可访问性与弱性能设备优化 */
:where(.game-name,.game-title,.account-title,.account-desc,.detail-value,.notice-text) { overflow-wrap:anywhere; }
@media (pointer:coarse) {
  :where(button,.btn,a.btn,.nav a,.category-tab,input,select) { min-height:44px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto !important; }
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}