/* ===== Reset & Variables ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
:root {
  --brand-50: #e6faf6; --brand-100: #b2f2e6; --brand-500: #00bfa5; --brand-600: #00a68f; --brand-700: #008c79;
  --white: #fff; --black: #000;
  --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-300: #d1d5db; --gray-400: #9ca3af; --gray-500: #6b7280; --gray-600: #4b5563; --gray-700: #374151; --gray-800: #1f2937;
  --red-50: #fef2f2; --red-500: #ef4444; --red-600: #dc2626;
  --orange-50: #fff7ed; --orange-500: #f97316;
  --yellow-50: #fefce8; --yellow-500: #eab308;
  --green-50: #f0fdf4; --green-500: #22c55e;
  --blue-50: #eff6ff; --blue-500: #3b82f6;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.06);
  --shadow-lg: 0 10px 15px rgba(0,0,0,.1), 0 4px 6px rgba(0,0,0,.05);
  --radius-sm: 6px; --radius: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; --radius-full: 9999px;
  --font: "PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --header-h: 56px;
}
html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { font-family: var(--font); color: var(--gray-700); background: var(--gray-50); line-height: 1.6; -webkit-font-smoothing: antialiased; padding-bottom: var(--safe-bottom); overflow-x: hidden; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
ul { list-style: none; }
button { cursor: pointer; border: none; font-family: inherit; background: none; }
input { font-family: inherit; outline: none; border: none; }
/* ===== Sticky Header ===== */
.detail-header { background: linear-gradient(135deg, #00897b, #00bfa5); padding: 10px 12px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; position: sticky; top: 0; z-index: 100; box-shadow: 0 1px 4px rgba(0,0,0,0.06); height: var(--header-h); }
.detail-header > .dh-btn:first-child { margin-right: auto; }
.dh-btn { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; border-radius: 50%; transition: background 0.2s; background: transparent; border: none; padding: 0; cursor: pointer; position: relative; z-index: 2; }
.dh-btn:active { background: rgba(255,255,255,0.15); }
.dh-btn svg { width: 22px; height: 22px; }
.dh-title { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 0.92rem; font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; display: block; max-width: 42%; text-align: center; z-index: 1; }
.dh-search-wrap { flex: 1; display: none; align-items: center; gap: 8px; }
.detail-header.searching .dh-title { display: none; }
.detail-header.searching .dh-search-wrap { display: flex; }
.dh-search-input { flex: 1; height: 32px; border: none; border-radius: var(--radius-full); padding: 0 12px; font-size: 0.85rem; background: rgba(255,255,255,0.18); color: #fff; outline: none; }
.dh-search-input::placeholder { color: rgba(255,255,255,0.7); }
.dh-search-cancel { font-size: 0.8rem; color: #fff; padding: 4px 4px; white-space: nowrap; }
/* ===== Side Menu Overlay ===== */
.side-menu-mask { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 300; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.side-menu-mask.show { opacity: 1; pointer-events: auto; }
.side-menu { position: fixed; top: 0; right: 0; width: 280px; height: 100%; background: var(--white); z-index: 301; transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94); overflow-y: auto; padding: 20px; }
.side-menu.show { transform: translateX(0); }
.side-menu-close { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--gray-400); }
.side-menu-close svg { width: 20px; height: 20px; }
.side-menu h3 { font-size: 0.9rem; font-weight: 700; color: var(--gray-800); margin-bottom: 12px; margin-top: 20px; }
.side-menu h3:first-child { margin-top: 0; }
.side-menu .sm-link { display: block; padding: 10px 0; font-size: 0.85rem; color: var(--gray-600); border-bottom: 1px solid var(--gray-100); }
.side-menu .sm-link:active { color: var(--brand-600); }
.side-menu .sm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.side-menu .sm-grid a { padding: 10px; background: var(--gray-50); border-radius: var(--radius); font-size: 0.8rem; color: var(--gray-600); text-align: center; }
/* ===== Game Hero ===== */
.game-hero { position: relative; height: 220px; overflow: hidden; background: #c3c3c3; transition: height 0.35s ease; }
.game-hero.playing { height: auto; overflow: visible; }
.game-hero .gh-bg-video { position: absolute; top: 0; left: 0; width: 100%; height: 220px; object-fit: cover; z-index: 0; transition: position 0.35s; }
.game-hero.playing .gh-bg-video { position: relative; display: block; height: auto; max-height: 420px; object-fit: contain; background: #000; }
.gh-bg-video:fullscreen { width: 100%; height: 100%; object-fit: contain !important; background: #000; }
.gh-bg-video:-webkit-full-screen { width: 100%; height: 100%; object-fit: contain !important; background: #000; }
.game-hero.no-video { background: var(--white); height: auto; overflow: visible; border-bottom: 1px solid var(--gray-50); box-shadow: 0 2px 12px rgba(0,0,0,0.04); }
.game-hero.no-video::before { display: none; }
.game-hero.no-video .gh-bg-video { display: none; }
.game-hero.no-video .hero-play-btn { display: none; }
.game-hero.no-video .gh-info { position: relative; bottom: auto; background: var(--white); pointer-events: auto; padding: 22px 16px 18px; gap: 16px; }
.game-hero.no-video .gh-info .gh-icon { width: 92px; height: 92px; border-radius: 22px; border: none; box-shadow: 0 6px 20px rgba(0,0,0,0.1); }
.game-hero.no-video .gh-info .gh-name { color: var(--gray-800); text-shadow: none; font-size: 1.4rem; line-height: 1.2; }
.game-hero.no-video .gh-info .gh-stats { color: var(--gray-500); gap: 12px; margin-top: 10px; }
.game-hero.no-video .gh-info .gh-stats .gh-score { color: var(--orange-500); text-shadow: none; font-size: 0.95rem; display: inline-flex; align-items: center; gap: 3px; }
.game-hero.no-video .gh-info .gh-stats .gh-score::before { content: '\2605'; font-size: 0.8rem; }
.game-hero.no-video .gh-info .gh-stats .gh-ver { color: var(--brand-600); text-shadow: none; font-size: 0.9rem; font-weight: 700; }
.game-hero.no-video .gh-info .gh-stats .gh-sep { background: var(--gray-300); }
.game-hero.no-video .gh-info .gh-stats .gh-dl { opacity: 1; font-weight: 500; }
.gh-desc { display: none; margin-top: 8px; font-size: 0.72rem; color: var(--gray-400); line-height: 1.5; }
.game-hero.no-video .gh-desc { display: block; }
.game-hero::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(0,0,0,0.7) 5%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0) 100%); pointer-events: none; transition: opacity 0.35s; }
.game-hero.playing::before { opacity: 0; }
.game-hero .gh-info { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; padding: 14px; display: flex; align-items: flex-end; gap: 14px; transition: all 0.35s ease; pointer-events: none; }
.game-hero.playing .gh-info { position: relative; bottom: auto; background: var(--white); pointer-events: auto; }
.game-hero.playing .gh-info .gh-name { color: var(--gray-800); text-shadow: none; }
.game-hero.playing .gh-info .gh-stats { color: var(--gray-500); }
.game-hero.playing .gh-info .gh-stats .gh-score { color: var(--orange-500); text-shadow: none; }
.game-hero.playing .gh-info .gh-stats .gh-ver { color: var(--brand-600); text-shadow: none; }
.game-hero.playing .gh-info .gh-icon { border-color: var(--gray-200); }
.hero-play-btn svg { width: 28px; height: 28px; color: #fff; margin-left: 3px; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6)); }
.game-hero.playing .hero-play-btn { opacity: 0; pointer-events: none; }
.gh-icon { width: 76px; height: 76px; border-radius: var(--radius-xl); object-fit: cover; border: 2px solid rgba(255,255,255,0.35); flex-shrink: 0; background: var(--gray-200); box-shadow: 0 4px 16px rgba(0,0,0,0.4); }
.gh-text { flex: 1; min-width: 0; color: #fff; }
.gh-name { font-size: 1.2rem; font-weight: 700; text-shadow: 0 2px 8px rgba(0,0,0,0.5); }
.gh-stats { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 0.72rem; }
.gh-stats .gh-score { font-weight: 700; color: #ffd700; font-size: 0.88rem; }
.gh-stats .gh-ver { font-weight: 700; color: var(--brand-600); font-size: 0.88rem; }
.gh-stats .gh-sep { width: 1px; height: 10px; background: rgba(255,255,255,0.3); }
.gh-stats .gh-dl { opacity: 0.9; }
/* ===== Quick Stats Bar ===== */
.quick-stats { display: flex; background: var(--white); padding: 14px 0; border-bottom: 1px solid var(--gray-100); }
.qs-item { flex: 1; text-align: center; position: relative; }
.qs-item:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 24px; background: var(--gray-200); }
.qs-num { font-size: 1.1rem; font-weight: 700; color: var(--gray-800); }
.qs-num .qs-unit { font-size: 0.65rem; font-weight: 500; color: var(--gray-400); }
.qs-label { font-size: 0.65rem; color: var(--gray-400); margin-top: 2px; }
.qs-num.brand { color: var(--brand-500); }
.qs-num.gold { color: #f6b93b; }
/* ===== Sticky Section Tabs ===== */
.sec-tabs { display: flex; gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; background: var(--white); z-index: 90; border-bottom: 1px solid var(--gray-100); touch-action: pan-x pan-y; }
.sec-tabs::-webkit-scrollbar { display: none; }
.sec-tab { padding: 12px 14px; font-size: 0.9rem; color: var(--gray-500); white-space: nowrap; position: relative; font-weight: 500; transition: color 0.2s; flex-shrink: 0; display: inline-flex; align-items: center; vertical-align: top; }
.sec-tab:last-child { margin-right: 12px; }
.sec-tab.active { color: var(--brand-600); font-weight: 700; }
.sec-tab.active::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 20px; height: 3px; background: var(--brand-500); border-radius: 2px; }
.sec-tab .tab-badge { display: inline-block; background: var(--red-500); color: #fff; font-size: 0.5rem; padding: 0 5px; border-radius: var(--radius-full); min-width: 14px; height: 14px; line-height: 14px; text-align: center; margin-left: 3px; vertical-align: top; }
/* ===== Section Card ===== */
.sec-card { background: var(--white); margin-top: 8px; padding: 16px 14px; scroll-margin-top: calc(var(--header-h) + 42px); }
.sec-card:first-of-type { margin-top: 0; }
.sec-title { font-size: 1rem; font-weight: 700; color: var(--gray-800); display: flex; align-items: center; gap: 7px; margin-bottom: 14px; }
.sec-title::before { content: ''; width: 4px; height: 18px; background: var(--brand-500); border-radius: 2px; flex-shrink: 0; }
.sec-title .st-more { margin-left: auto; font-size: 0.72rem; font-weight: 400; color: var(--gray-400); }
.sec-title .st-more::after { content: ' ›'; }
.rv-write-entry { margin-left: auto; padding: 6px 14px; border-radius: var(--radius-full); font-size: 0.8rem; font-weight: 700; color: #fff; background: var(--brand-500); display: inline-flex; align-items: center; gap: 5px; box-shadow: 0 2px 6px rgba(0,191,165,0.25); }
.rv-write-entry svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
/* ===== Game Description ===== */
.desc-text { font-size: 0.82rem; color: var(--gray-600); line-height: 1.85; }
.desc-text h3 { font-size: 0.9rem; font-weight: 600; color: var(--gray-800); margin-top: 14px; margin-bottom: 6px; }
.desc-text h3:first-child { margin-top: 0; }
.desc-text p { margin-bottom: 4px; }
.desc-collapse { max-height: 200px; overflow: hidden; position: relative; transition: max-height 0.4s ease; }
.desc-collapse.expanded { max-height: none; }
.desc-collapse::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 50px; background: linear-gradient(to top, var(--white), transparent); pointer-events: none; transition: opacity 0.3s; }
.desc-collapse.expanded::after { opacity: 0; }
.desc-toggle { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 10px 0 0; font-size: 0.78rem; color: var(--brand-600); font-weight: 600; width: 100%; }
.desc-toggle svg { width: 14px; height: 14px; transition: transform 0.3s; }
.desc-toggle.expanded svg { transform: rotate(180deg); }
/* ===== Gift Section ===== */
.gift-list { display: flex; flex-direction: column; gap: 10px; }
.gift-card { border: 1px solid var(--gray-200); border-radius: var(--radius-xl); overflow: hidden; }
.gift-card-top { padding: 12px 14px 8px; }
.gift-name { font-size: 0.88rem; font-weight: 700; color: var(--gray-800); }
.gift-desc { font-size: 0.72rem; color: var(--gray-500); margin-top: 4px; line-height: 1.5; }
.gift-card-bottom { display: flex; align-items: center; gap: 8px; padding: 0 14px 12px; }
.gift-code-box { flex: 1; display: flex; align-items: center; gap: 6px; background: linear-gradient(135deg, var(--yellow-50), #fffbeb); border: 1px dashed #f6b93b; border-radius: var(--radius); padding: 6px 10px; }
.gift-code-label { font-size: 0.58rem; color: var(--orange-500); white-space: nowrap; font-weight: 700; }
.gift-code-val { flex: 1; font-size: 0.72rem; color: var(--gray-700); font-family: 'Courier New', monospace; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gift-copy-btn { background: linear-gradient(135deg, var(--orange-500), #e8600f); color: #fff; border-radius: var(--radius-full); padding: 6px 16px; font-size: 0.72rem; font-weight: 700; flex-shrink: 0; box-shadow: 0 2px 8px rgba(249,115,22,0.3); }
.gift-copy-btn:active { transform: scale(0.95); }
.gift-copy-btn.copied { background: var(--green-500); box-shadow: 0 2px 8px rgba(34,197,94,0.3); }
.gift-tip { font-size: 0.68rem; color: var(--gray-400); margin-top: 12px; padding: 10px 12px; background: var(--gray-50); border-radius: var(--radius); line-height: 1.6; }
/* ===== Info Table ===== */
.info-list { display: flex; flex-direction: column; }
.info-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--gray-100); }
.info-row:last-child { border-bottom: none; }
.info-label { font-size: 0.78rem; color: var(--gray-400); width: 84px; flex-shrink: 0; }
.info-value { font-size: 0.78rem; color: var(--gray-700); font-weight: 500; flex: 1; }
.info-value.link { color: var(--brand-600); }
/* ===== Compliance ===== */
.compliance { margin-top: 14px; padding: 12px 14px; background: var(--brand-50); border-radius: var(--radius-lg); border: 1px solid var(--brand-100); }
.compliance-title { font-size: 0.78rem; font-weight: 700; color: var(--brand-700); display: flex; align-items: center; gap: 5px; margin-bottom: 8px; }
.compliance-title svg { width: 16px; height: 16px; }
.compliance ul { padding-left: 16px; }
.compliance li { font-size: 0.7rem; color: var(--gray-600); line-height: 1.7; list-style: disc; }
/* ===== FAQ ===== */
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid var(--gray-100); }
.faq-item:last-child { border-bottom: none; }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 0; font-size: 0.82rem; font-weight: 500; color: var(--gray-800); text-align: left; }
.faq-q .chevron { width: 16px; height: 16px; color: var(--gray-400); flex-shrink: 0; transition: transform 0.3s; }
.faq-item.open .chevron { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.faq-item.open .faq-a { max-height: 300px; }
.faq-a-inner { padding: 0 0 14px; font-size: 0.76rem; color: var(--gray-500); line-height: 1.7; }
/* ===== Server List ===== */
.server-list { display: flex; flex-direction: column; gap: 10px; }
.server-card { display: flex; align-items: center; gap: 10px; padding: 12px; background: var(--gray-50); border-radius: var(--radius-lg); }
.server-icon { width: 40px; height: 40px; border-radius: var(--radius); object-fit: cover; flex-shrink: 0; background: var(--gray-200); }
.server-info { flex: 1; min-width: 0; }
.server-name { font-size: 0.82rem; font-weight: 600; color: var(--gray-800); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.server-meta { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.server-time { font-size: 0.65rem; color: var(--gray-500); font-weight: 500; }
.server-type { font-size: 0.62rem; color: var(--gray-400); }
.server-status { display: inline-block; padding: 2px 8px; border-radius: var(--radius-full); font-size: 0.58rem; font-weight: 600; white-space: nowrap; }
.server-status.opened { background: var(--gray-100); color: var(--gray-500); }
.server-status.today { background: rgba(0,184,148,0.14); color: #00b894; }
.server-status.soon { background: rgba(9,132,227,0.12); color: #0984e3; }
.server-btn { padding: 5px 12px; border-radius: var(--radius-full); font-size: 0.68rem; font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.server-btn.enter { background: var(--brand-50); color: var(--brand-600); }
.server-btn.reserve { background: var(--brand-500); color: #fff; }
/* ===== Rating Summary ===== */
.rating-summary { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; padding: 16px; background: linear-gradient(135deg, var(--brand-50), #f0fdfa); border-radius: var(--radius-xl); }
.rating-score { text-align: center; flex-shrink: 0; }
.rating-score .rs-num { font-size: 2.2rem; font-weight: 800; color: var(--brand-600); line-height: 1; }
.rating-score .rs-stars { color: #f6b93b; font-size: 0.75rem; margin-top: 4px; letter-spacing: 2px; }
.rating-score .rs-count { font-size: 0.62rem; color: var(--gray-400); margin-top: 2px; }
.rating-bars { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.rating-bar { display: flex; align-items: center; gap: 6px; }
.rating-bar .rb-label { font-size: 0.6rem; color: var(--gray-400); width: 20px; flex-shrink: 0; }
.rating-bar .rb-track { flex: 1; height: 6px; background: rgba(0,0,0,0.06); border-radius: 3px; overflow: hidden; }
.rating-bar .rb-fill { height: 100%; border-radius: 3px; background: var(--brand-500); }
/* ===== Comments (3-level reply) ===== */
.rv-filter { display: flex; gap: 6px; margin-bottom: 12px; overflow-x: auto; scrollbar-width: none; }
.rv-filter::-webkit-scrollbar { display: none; }
.rv-filter-btn { padding: 5px 12px; border-radius: var(--radius-full); font-size: 0.72rem; color: var(--gray-500); background: var(--gray-100); white-space: nowrap; border: none; font-weight: 500; }
.rv-filter-btn.active { background: var(--brand-500); color: #fff; }
.rv-pagination { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 16px; padding: 4px 0; }
.rv-page-btn { min-width: 32px; height: 32px; border-radius: var(--radius); font-size: 0.76rem; color: var(--gray-500); background: var(--gray-100); font-weight: 500; display: flex; align-items: center; justify-content: center; padding: 0 8px; }
.rv-page-btn:active { transform: scale(0.94); }
.rv-page-btn.active { background: var(--brand-500); color: #fff; font-weight: 700; }
.rv-page-btn:disabled { opacity: 0.35; }
.rv-page-dots { font-size: 0.72rem; color: var(--gray-400); padding: 0 2px; }
.rv-item { padding: 14px 0; border-bottom: 1px solid var(--gray-100); }
.rv-item:last-child { border-bottom: none; }
.rv-head { display: flex; align-items: center; gap: 8px; }
.rv-avatar { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.85rem; font-weight: 700; }
.rv-name { font-size: 0.8rem; font-weight: 600; color: var(--gray-800); }
.rv-device { font-size: 0.6rem; color: var(--gray-400); background: var(--gray-100); padding: 1px 6px; border-radius: 4px; }
.rv-date { font-size: 0.62rem; color: var(--gray-400); margin-left: auto; }
.rv-rating { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.rv-stars { color: #f6b93b; font-size: 0.7rem; letter-spacing: 1px; }
.rv-score { font-size: 0.65rem; font-weight: 700; color: #f6b93b; }
.rv-rec { font-size: 0.6rem; color: #16a34a; background: #dcfce7; padding: 1px 6px; border-radius: 4px; font-weight: 600; }
.rv-body { font-size: 0.78rem; color: var(--gray-600); margin-top: 8px; line-height: 1.65; word-break: break-word; }
.rv-actions { display: flex; gap: 16px; margin-top: 8px; }
.rv-action { font-size: 0.68rem; color: var(--gray-400); display: flex; align-items: center; gap: 4px; cursor: pointer; user-select: none; }
.rv-action:active { color: var(--brand-600); }
.rv-action svg { width: 14px; height: 14px; }
.rv-action.liked { color: var(--brand-600); }
/* Reply form (level 1 → 2) */
.rv-reply-form { background: var(--gray-50); border-radius: var(--radius-lg); padding: 10px; margin-top: 8px; display: none; }
.rv-reply-form.open { display: block; }
.rv-reply-form textarea { width: 100%; border: 1.5px solid var(--gray-200); border-radius: var(--radius-md); padding: 8px; font-size: 0.76rem; resize: none; outline: none; font-family: inherit; box-sizing: border-box; }
.rv-reply-form textarea:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(0,191,165,0.1); }
.rv-reply-form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.rv-reply-btn { padding: 5px 14px; border: none; border-radius: var(--radius-md); font-size: 0.72rem; font-weight: 600; cursor: pointer; }
.rv-reply-btn.cancel { background: var(--gray-100); color: var(--gray-500); }
.rv-reply-btn.send { background: var(--brand-500); color: #fff; }
/* Level 2: sub-reply */
.rv-sub-list { margin-top: 10px; padding-left: 10px; }
.rv-sub { padding: 8px 0; border-top: 1px solid var(--gray-100); }
.rv-sub:first-child { border-top: none; }
.rv-sub-head { display: flex; align-items: center; gap: 6px; }
.rv-sub-avatar { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.6rem; font-weight: 600; }
.rv-sub-name { font-size: 0.74rem; font-weight: 500; color: var(--gray-700); }
.rv-sub-date { font-size: 0.6rem; color: var(--gray-400); margin-left: auto; }
.rv-sub-body { font-size: 0.74rem; color: var(--gray-600); padding-left: 30px; margin-top: 4px; line-height: 1.55; }
.rv-sub-actions { display: flex; gap: 12px; padding-left: 30px; margin-top: 4px; }
.rv-sub-reply-btn { font-size: 0.64rem; color: var(--gray-400); cursor: pointer; user-select: none; }
.rv-sub-reply-btn:active { color: var(--brand-600); }
/* Sub-reply inline form (level 2 → 3) */
.rv-sub-form { display: none; margin-top: 6px; padding-left: 30px; }
.rv-sub-form.open { display: block; }
.rv-sub-form textarea { width: 100%; border: 1.5px solid var(--gray-200); border-radius: var(--radius-md); padding: 6px 8px; font-size: 0.72rem; resize: none; outline: none; font-family: inherit; box-sizing: border-box; }
.rv-sub-form textarea:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(0,191,165,0.1); }
.rv-sub-form-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 4px; }
/* Level 3: sub-sub-reply */
.rv-sub-sub-list { margin-top: 6px; padding-left: 30px; border-left: 2px solid var(--gray-100); }
.rv-sub-sub { padding: 6px 0; border-top: 1px solid var(--gray-100); }
.rv-sub-sub:first-child { border-top: none; }
.rv-sub-sub-head { display: flex; align-items: center; gap: 5px; }
.rv-sub-sub-avatar { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.55rem; font-weight: 600; }
.rv-sub-sub-name { font-size: 0.68rem; font-weight: 500; color: var(--gray-600); }
.rv-sub-sub-date { font-size: 0.58rem; color: var(--gray-400); margin-left: auto; }
.rv-sub-sub-body { font-size: 0.72rem; color: var(--gray-500); padding-left: 25px; line-height: 1.5; }
.rv-sub-sub-actions { display: flex; gap: 10px; padding-left: 25px; margin-top: 3px; }
.rv-sub-sub-vote { font-size: 0.62rem; color: var(--gray-400); display: flex; align-items: center; gap: 3px; cursor: pointer; user-select: none; }
.rv-sub-sub-vote svg { width: 12px; height: 12px; }
.rv-sub-sub-vote.voted { color: var(--brand-600); }
.rv-expand { font-size: 0.66rem; color: var(--brand-600); cursor: pointer; user-select: none; margin-top: 4px; padding-left: 30px; display: inline-block; }
/* Write review modal */
.rv-modal { position: fixed; inset: 0; z-index: 200; display: none; }
.rv-modal.open { display: block; }
.rv-modal-mask { position: absolute; inset: 0; background: rgba(0,0,0,0.45); }
.rv-modal-sheet { position: absolute; bottom: 0; left: 0; right: 0; background: #fff; border-radius: 16px 16px 0 0; padding: 16px; max-height: 80vh; overflow-y: auto; animation: rvSlideUp 0.3s ease; }
@keyframes rvSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.rv-modal-title { font-size: 0.9rem; font-weight: 700; color: var(--gray-800); margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; }
.rv-modal-close { font-size: 1.2rem; color: var(--gray-400); cursor: pointer; line-height: 1; }
.rv-modal-stars { display: flex; gap: 6px; margin-bottom: 10px; }
.rv-modal-star { font-size: 1.6rem; color: var(--gray-300); cursor: pointer; user-select: none; }
.rv-modal-star.active { color: #f6b93b; }
.rv-modal textarea { width: 100%; border: 1.5px solid var(--gray-200); border-radius: var(--radius-lg); padding: 10px; font-size: 0.8rem; resize: none; outline: none; font-family: inherit; box-sizing: border-box; min-height: 100px; }
.rv-modal textarea:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(0,191,165,0.1); }
.rv-modal-name { width: 100%; border: 1.5px solid var(--gray-200); border-radius: var(--radius-lg); padding: 10px 12px; font-size: 0.8rem; outline: none; font-family: inherit; box-sizing: border-box; margin-bottom: 10px; color: var(--gray-700); }
.rv-modal-name:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(0,191,165,0.1); }
.rv-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
/* ===== Related Games ===== */
.rel-scroll { display: flex; gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 2px 0; }
.rel-scroll::-webkit-scrollbar { display: none; }
.rel-card { width: 70px; flex-shrink: 0; }
.rel-card .rc-icon { width: 70px; height: 70px; border-radius: var(--radius-lg); object-fit: cover; background: var(--gray-200); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.rel-card .rc-name { font-size: 0.76rem; font-weight: 600; color: var(--gray-800); margin-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
/* ===== Rank List (Latest / Hot) ===== */
.rl-scroll { display: flex; gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 2px 0; }
.rl-scroll::-webkit-scrollbar { display: none; }
.rl-card { flex-shrink: 0; width: 268px; display: flex; align-items: center; gap: 10px; padding: 10px; background: var(--gray-50); border: 1px solid var(--gray-100); border-radius: var(--radius-lg); }
.rl-card:active { box-shadow: 0 0 0 1px var(--brand-200, #99e8dc); }
.rl-icon { width: 56px; height: 56px; border-radius: var(--radius); object-fit: cover; background: var(--gray-200); flex-shrink: 0; }
.rl-info { flex: 1; min-width: 0; }
.rl-name { font-size: 0.82rem; font-weight: 600; color: var(--gray-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rl-name .rl-rank { display: inline-block; font-size: 0.6rem; font-weight: 700; color: #fff; background: var(--gray-300); border-radius: 4px; padding: 1px 4px; margin-right: 4px; vertical-align: 1px; }
.rl-name .rl-rank.top1 { background: linear-gradient(135deg, #f6a11b, #f36f21); }
.rl-name .rl-rank.top2 { background: linear-gradient(135deg, #9aa7b5, #6b7a8a); }
.rl-name .rl-rank.top3 { background: linear-gradient(135deg, #d28a5a, #b56a3c); }
.rl-desc { font-size: 0.68rem; color: var(--gray-400); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rl-meta { display: flex; align-items: center; gap: 4px; margin-top: 3px; }
.rl-stars { font-size: 0.6rem; color: var(--orange-500); letter-spacing: -1px; }
.rl-score { font-size: 0.68rem; font-weight: 700; color: var(--brand-600); }
.rl-btn { flex-shrink: 0; background: linear-gradient(135deg, var(--brand-500), var(--brand-600)); color: #fff; font-size: 0.68rem; font-weight: 700; padding: 6px 12px; border-radius: var(--radius-full); white-space: nowrap; }
/* ===== Hot Games (vertical ranking list) ===== */
.hot-list { display: flex; flex-direction: column; }
.hot-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--gray-100); text-decoration: none; color: inherit; }
.hot-item:last-child { border-bottom: none; padding-bottom: 0; }
.hot-item:active { background: var(--gray-50); }
.hot-rank { width: 26px; height: 26px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 800; color: var(--gray-500); background: var(--gray-100); flex-shrink: 0; }
.hot-rank.top1 { color: #fff; background: linear-gradient(135deg, #f6a11b, #f36f21); }
.hot-rank.top2 { color: #fff; background: linear-gradient(135deg, #9aa7b5, #6b7a8a); }
.hot-rank.top3 { color: #fff; background: linear-gradient(135deg, #d28a5a, #b56a3c); }
.hot-icon { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; flex-shrink: 0; background: var(--gray-200); }
.hot-info { flex: 1; min-width: 0; }
.hot-name { font-size: 0.84rem; font-weight: 600; color: var(--gray-800); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hot-desc { font-size: 0.65rem; color: var(--gray-400); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hot-meta { display: flex; align-items: center; gap: 4px; margin-top: 3px; font-size: 0.65rem; }
.hot-stars { color: var(--orange-500); letter-spacing: -1px; }
.hot-score { color: var(--brand-600); font-weight: 700; }
.hot-btn { flex-shrink: 0; background: linear-gradient(135deg, var(--brand-500), var(--brand-600)); color: #fff; font-size: 0.68rem; font-weight: 700; padding: 6px 14px; border-radius: var(--radius-full); }
/* ===== Game Screenshots ===== */
.game-shots { margin-top: 0; }
.shots-scroll { display: flex; gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; }
.shots-scroll::-webkit-scrollbar { display: none; }
.shot-thumb { flex: 0 0 auto; width: 110px; height: 196px; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.08); border: 1px solid var(--gray-100); background: var(--gray-100); }
.shot-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ===== Light Shot Viewer ===== */
.shot-lightbox { position: fixed; inset: 0; z-index: 500; background: rgba(0,0,0,0.94); opacity: 0; pointer-events: none; transition: opacity 0.25s; display: flex; align-items: center; justify-content: center; }
.shot-lightbox.show { opacity: 1; pointer-events: auto; }
.shot-slider { display: flex; width: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.shot-slider::-webkit-scrollbar { display: none; }
.shot-slide { flex: 0 0 100%; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; scroll-snap-align: center; padding: 0 10px; box-sizing: border-box; }
.shot-slide img { max-width: 100%; max-height: 100%; object-fit: contain; }
.shot-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,0.15); color: #fff; display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; z-index: 2; }
.shot-nav svg { width: 22px; height: 22px; }
.shot-nav.prev { left: 12px; }
.shot-nav.next { right: 12px; }
.shot-counter { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 0.8rem; background: rgba(0,0,0,0.45); padding: 4px 14px; border-radius: 999px; z-index: 2; }
.shot-lightbox-close { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.15); color: #fff; display: flex; align-items: center; justify-content: center; z-index: 2; }
.shot-lightbox-close svg { width: 22px; height: 22px; }
/* ===== Articles ===== */
.article-item { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--gray-100); }
.article-item:last-child { border-bottom: none; }
.article-thumb { width: 90px; height: 62px; border-radius: var(--radius); object-fit: cover; flex-shrink: 0; background: var(--gray-200); }
.article-body { flex: 1; min-width: 0; }
.article-title { font-size: 0.8rem; font-weight: 500; color: var(--gray-800); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.article-meta { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.article-tag { font-size: 0.58rem; background: var(--brand-50); color: var(--brand-600); padding: 1px 6px; border-radius: var(--radius-full); font-weight: 600; }
.article-date { font-size: 0.6rem; color: var(--gray-400); }
/* ===== Hero Download Bar ===== */
.hero-dl { display: flex; align-items: center; gap: 10px; background: var(--white); padding: 12px 16px; border-bottom: 1px solid var(--gray-100); }
.hero-dl-fav { width: 40px; height: 40px; border-radius: 50%; background: var(--gray-100); display: flex; align-items: center; justify-content: center; color: var(--gray-500); flex-shrink: 0; }
.hero-dl-fav svg { width: 20px; height: 20px; }
.hero-dl-fav.active { color: var(--red-500); }
.hero-dl-cmt { width: 40px; height: 40px; border-radius: 50%; background: var(--gray-100); display: flex; align-items: center; justify-content: center; color: var(--gray-500); flex-shrink: 0; position: relative; }
.hero-dl-cmt svg { width: 20px; height: 20px; }
.hero-dl-cmt:active { background: var(--gray-200); }
.hero-dl-badge { position: absolute; top: -3px; right: -3px; background: var(--red-500); color: #fff; font-size: 0.55rem; font-weight: 400; min-width: 17px; height: 17px; line-height: 17px; border-radius: var(--radius-full); padding: 0 4px; text-align: center; border: 1.5px solid var(--white); }
.hero-dl-btns { flex: 1; display: flex; gap: 8px; }
.hero-dl-btn { flex: 1; border-radius: var(--radius-full); height: 42px; font-size: 0.88rem; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 5px; }
.hero-dl-btn:active { opacity: 0.88; }
.hero-dl-btn svg { width: 18px; height: 18px; }
.hero-dl-btn.primary { background: linear-gradient(135deg, var(--brand-500), var(--brand-600)); color: #fff; box-shadow: 0 4px 12px rgba(0,191,165,0.3); }
.hero-dl-btn.cloud { background: var(--gray-100); color: var(--gray-700); border: 1px solid var(--gray-200); }
/* ===== Back to Top ===== */
.back-top {
  position: fixed;
  right: 14px;
  bottom: calc(var(--safe-bottom) + 14px);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
  z-index: 150;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: all 0.3s;
  border: none;
}
.back-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.back-top svg { width: 20px; height: 20px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.12)); }
/* ===== Toast ===== */
.toast { position: fixed; top: 60px; left: 50%; transform: translateX(-50%); background: rgba(31,41,55,0.95); color: #fff; padding: 10px 22px; border-radius: var(--radius-full); font-size: 0.78rem; z-index: 600; animation: toastIn 0.25s ease, toastOut 0.25s ease 2s forwards; pointer-events: none; white-space: nowrap; box-shadow: var(--shadow-lg); }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, -10px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes toastOut { from { opacity: 1; } to { opacity: 0; transform: translate(-50%, -10px); } }
/* ===== Footer ===== */
.app-footer { background: var(--gray-800); color: var(--gray-400); padding: 20px 16px calc(20px + var(--safe-bottom)); text-align: center; margin-top: 8px; }
.app-footer p { font-size: 0.68rem; line-height: 1.8; }
.app-footer .footer-links { display: flex; justify-content: center; gap: 12px; margin-bottom: 8px; }
.app-footer .footer-links a { font-size: 0.7rem; color: var(--gray-400); }
.game-hero.no-video .hero-media-switch { display: none; }
.game-hero.no-video .gh-gallery { display: none; }
.game-hero.no-video .gh-info { position: relative; bottom: auto; background: var(--white); pointer-events: auto; padding: 18px 16px 16px; gap: 12px; }
.game-hero.no-video .gh-info .gh-icon { width: 72px; height: 72px; border-radius: 18px; border: none; box-shadow: 0 6px 20px rgba(0,0,0,0.1); }
.game-hero.no-video .gh-info .gh-name { color: var(--gray-800); text-shadow: none; font-size: 1.1rem; line-height: 1.25; }
.hero-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; width: 56px; height: 56px; border-radius: 50%; background: rgba(0,0,0,0.2); backdrop-filter: blur(2px); border: 2px solid rgba(255,255,255,0.5); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: opacity 0.3s, transform 0.2s; }
.hero-play-btn:active { transform: translate(-50%, -50%) scale(0.9); }
.hero-media-switch { position: absolute; top: 8px; right: 8px; z-index: 4; display: flex; gap: 4px; padding: 0; border-radius: var(--radius-full); border: none; background: transparent; }
.hero-media-switch button { padding: 5px 14px; border-radius: var(--radius-full); font-size: 0.7rem; font-weight: 400; color: rgba(255,255,255,0.85); background: transparent; border: none; cursor: pointer; transition: all 0.2s; }
.hero-media-switch button.active { background: rgba(255,255,255,0.22); color: #fff; }
.gh-gallery { position: absolute; inset: 0; z-index: 0; display: none; background: #000; }
.gh-gallery.active { display: flex; }
.gh-gallery .gh-shot-scroll { display: flex; width: 100%; height: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.gh-gallery .gh-shot-scroll::-webkit-scrollbar { display: none; }
.gh-gallery .gh-shot-item { flex: 0 0 100%; width: 100%; height: 100%; position: relative; }
.gh-gallery .gh-shot-item img { width: 100%; height: 100%; object-fit: contain; background: #000; }
.game-hero.gallery-mode .gh-bg-video { display: none; }
.game-hero.gallery-mode .hero-play-btn { display: none; }
.game-hero.gallery-mode::before { opacity: 0; }
.game-hero.gallery-mode .gh-info { text-shadow: 0 1px 3px rgba(0,0,0,0.6); }
/* ===== App Screenshots ===== */
.app-shots { margin-top: 14px; }
.shots-title { font-size: 0.85rem; font-weight: 700; color: var(--gray-800); margin-bottom: 10px; }
/* ===== Shot Viewer (Swipeable Gallery) ===== */
.shot-viewer { position: fixed; inset: 0; z-index: 500; background: rgba(0,0,0,0.94); opacity: 0; pointer-events: none; transition: opacity 0.25s; overflow: hidden; }
.shot-viewer.show { opacity: 1; pointer-events: auto; }
.shot-viewer-track { display: flex; height: 100%; width: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.shot-viewer-track::-webkit-scrollbar { display: none; }
.shot-viewer-track.dragging { scroll-snap-type: none; cursor: grabbing; }
.shot-viewer-slide { flex: 0 0 100%; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; scroll-snap-align: center; overflow: hidden; }
.shot-viewer-slide img { max-width: 100%; max-height: 100%; object-fit: contain; -webkit-user-drag: none; user-select: none; pointer-events: none; }
.shot-viewer-close { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.15); color: #fff; display: flex; align-items: center; justify-content: center; z-index: 2; }
.shot-viewer-close svg { width: 22px; height: 22px; }
.shot-viewer-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.15); color: #fff; display: flex; align-items: center; justify-content: center; z-index: 2; }
.shot-viewer-nav svg { width: 24px; height: 24px; }
.shot-viewer-nav.prev { left: 12px; }
.shot-viewer-nav.next { right: 12px; }
.shot-viewer-counter { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 0.8rem; background: rgba(255,255,255,0.12); padding: 4px 14px; border-radius: var(--radius-full); z-index: 2; }

/* ===== Fav Like (2026-10-02 / b: 计数移图标下方，不遮图标) ===== */
.hero-dl-fav { transition: background 0.2s; }
.hero-dl-fav .hdf-ic { display: flex; align-items: center; justify-content: center; }
.hero-dl-fav:active { background: var(--gray-200); }
.hero-dl-fav.active { background: #fee2e6; }
.hero-dl-fav.active svg { fill: currentColor; }

/* ===== M 端喜欢按钮：点击特效（2026-10-03）=====
   点亮态本来就 OK（.active + fill:currentColor），这里只补点击过程。
   ⚠️ 选择器必须排除 .dw-hp 粒子，否则粒子被抢成 dwMFavBump 动画而隐形。 */
.hero-dl-fav { position: relative; overflow: visible; }
.hero-dl-fav.bump .hdf-ic > svg:not(.dw-hp) {
  animation: dwMFavBump 0.5s cubic-bezier(.2,1.6,.4,1);
}
@keyframes dwMFavBump {
  0%   { transform: scale(1); }
  22%  { transform: scale(0.72); }
  48%  { transform: scale(1.42); }
  70%  { transform: scale(0.92); }
  100% { transform: scale(1); }
}
/* 飘出的小爱心（JS 动态插入 .dw-hp） */
.hero-dl-fav .dw-hp {
  position: absolute; left: 50%; top: 50%;
  width: 12px; height: 12px; margin: -6px 0 0 -6px;
  pointer-events: none; z-index: 5;
  fill: #ff4d6d; stroke: #ff4d6d; stroke-width: 2;
  opacity: 0;
  will-change: transform, opacity;
  animation: dwMFavFly 0.78s cubic-bezier(.18,.72,.3,1) forwards !important;
}
@keyframes dwMFavFly {
  0%   { opacity: 0; transform: translate(0,0) scale(0.3) rotate(0deg); }
  18%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.05) rotate(var(--rot)); }
}
/* 圆底轻微弹一下，给触觉反馈 */
.hero-dl-fav.bump { animation: dwMFavRing 0.5s ease-out; }
@keyframes dwMFavRing {
  0%   { box-shadow: 0 0 0 0 rgba(255,77,109,0.5); }
  100% { box-shadow: 0 0 0 14px rgba(255,77,109,0); }
}