/* ==========================================================================
   星光资源网 主题样式
   设计变量与排版尺寸 1:1 提取自原站（Tailwind 主题令牌）
   ========================================================================== */

:root {
  --background: hsl(0 0% 97%);
  --foreground: hsl(220 9% 13%);
  --card: hsl(0 0% 100%);
  --card-foreground: hsl(220 9% 13%);
  --popover: hsl(0 0% 100%);
  --popover-foreground: hsl(220 9% 13%);
  --primary: hsl(355 90% 56%);
  --primary-foreground: hsl(0 0% 100%);
  --secondary: hsl(220 10% 94%);
  --muted: hsl(220 10% 94%);
  --muted-foreground: hsl(220 5% 45%);
  --accent: hsl(220 10% 94%);
  --destructive: hsl(0 84% 60%);
  --success: hsl(130 54% 42%);
  --border: hsl(220 6% 88%);
  --input: hsl(220 6% 88%);
  --ring: hsl(355 90% 56%);
  --purple: hsl(262 83% 58%);
  --amber: hsl(38 92% 50%);

  --radius: 0.5rem;
  --shadow-sm: 0 1px 2px 0 hsl(220 43% 11% / 0.05);
  --shadow-md: 0 4px 6px -1px hsl(220 43% 11% / 0.08), 0 2px 4px -2px hsl(220 43% 11% / 0.06);
  --shadow-lg: 0 10px 15px -3px hsl(220 43% 11% / 0.09), 0 4px 6px -4px hsl(220 43% 11% / 0.05);
  --shadow-xl: 0 20px 25px -5px hsl(220 43% 11% / 0.12), 0 8px 10px -6px hsl(220 43% 11% / 0.08);
  --shadow-2xl: 0 25px 50px -12px hsl(220 43% 11% / 0.25);

  /* 全部走系统字体：不再外链 Google Fonts（国内不可达会阻塞首屏），
     系统原生中文字体渲染更快、字重更全，移动端滚动时无字体解析负担。 */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
    'HarmonyOS Sans SC', 'Source Han Sans SC', 'Noto Sans SC', 'Microsoft YaHei',
    'Hiragino Sans GB', Roboto, sans-serif;

  --header-h: 3.5rem;
  --container: 80rem; /* max-w-7xl */
}

html.dark {
  --background: hsl(220 9% 10%);
  --foreground: hsl(220 9% 92%);
  --card: hsl(220 9% 13%);
  --card-foreground: hsl(220 9% 92%);
  --popover: hsl(220 9% 13%);
  --popover-foreground: hsl(220 9% 92%);
  --primary: hsl(355 90% 62%);
  --secondary: hsl(220 8% 20%);
  --muted: hsl(220 8% 20%);
  --muted-foreground: hsl(220 5% 65%);
  --accent: hsl(220 8% 20%);
  --border: hsl(220 8% 22%);
  --input: hsl(220 8% 22%);
}

/* ------------------------------- 基础重置 ------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
  border-color: var(--border);
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.admin-bar {
  --header-h: 5.5rem;
}

h1, h2, h3, h4, h5, h6, p, figure, ul, ol {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

img, svg, video {
  display: block;
  max-width: 100%;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: 0;
}

svg {
  flex-shrink: 0;
}

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1rem;
}

@media (min-width: 768px) {
  .container { padding: 0 1.5rem; }
}

/* --------------------------------- 图标 --------------------------------- */

.icon {
  width: 1rem;
  height: 1rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-sm { width: 0.875rem; height: 0.875rem; }
.icon-lg { width: 1.25rem; height: 1.25rem; }
.icon-xl { width: 1.5rem; height: 1.5rem; }

/* 常用工具类 */
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.hidden { display: none; }
.text-primary { color: var(--primary); }
.text-muted { color: var(--muted-foreground); }

/* --------------------------------- 按钮 --------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  white-space: nowrap;
  border-radius: calc(var(--radius) - 2px);
  font-size: 0.875rem;
  font-weight: 500;
  height: 2.25rem;
  padding: 0 1rem;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s;
}

.btn-primary {
  background: var(--primary);
  color: var(--primary-foreground);
}

.btn-primary:hover { background: hsl(355 90% 48%); }

.btn-ghost {
  background: transparent;
  color: inherit;
}

.btn-ghost:hover {
  color: var(--primary);
  background: hsl(220 10% 94% / 0.7);
}

html.dark .btn-ghost:hover { background: hsl(220 8% 20% / 0.7); }

.btn-outline {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--foreground);
}

.btn-outline:hover { border-color: hsl(220 5% 45% / 0.4); }

.btn-sm { height: 2rem; padding: 0 0.75rem; font-size: 0.75rem; }
.btn-icon { width: 2.25rem; height: 2.25rem; padding: 0; }
.btn-round { border-radius: 9999px; }

/* -------------------------------- 输入框 -------------------------------- */

.input {
  width: 100%;
  height: 2.25rem;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid var(--input);
  background: var(--card);
  padding: 0 0.75rem;
  font-size: 0.875rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.input:focus {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 3px hsl(355 90% 56% / 0.15);
}

.input::placeholder { color: var(--muted-foreground); }

input[type='search']::-webkit-search-cancel-button { display: none; }

/* -------------------------------- 顶部导航 ------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  background: hsl(0 0% 97% / 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid hsl(220 6% 88% / 0.4);
  box-shadow: var(--shadow-sm);
}

html.dark .site-header { background: hsl(220 9% 10% / 0.9); }

.admin-bar .site-header { top: 32px; }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 3rem;
}

@media (min-width: 768px) {
  .site-header__inner { height: 3.5rem; }
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

@media (min-width: 640px) {
  .brand { gap: 0.5rem; }
}

.brand__logo {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.375rem;
  background: linear-gradient(to bottom right, var(--primary), var(--purple));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

@media (min-width: 640px) {
  .brand__logo { width: 2rem; height: 2rem; }
}

.brand__title {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
}

@media (min-width: 640px) {
  .brand__title { font-size: 1rem; }
}

.brand__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.15;
}

.brand__sub {
  display: block;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--primary);
  margin-top: 0.0625rem;
}

@media (min-width: 640px) {
  .brand__sub { font-size: 0.8125rem; }
}

.main-nav {
  display: none;
  align-items: center;
}

@media (min-width: 1024px) {
  .main-nav { display: flex; }
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 2.25rem;
  padding: 0 0.5rem;
  border-radius: calc(var(--radius) - 2px);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--foreground);
  transition: color 0.2s, background-color 0.2s;
}

.nav-link:hover { color: var(--primary); background: hsl(220 10% 94% / 0.7); }
html.dark .nav-link:hover { background: hsl(220 8% 20% / 0.7); }

.nav-link .emoji { font-size: 14px; line-height: 1; }

.nav-item { position: relative; }

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.25rem;
  min-width: 12rem;
  padding: 0.5rem;
  border-radius: calc(var(--radius) + 2px);
  border: 1px solid hsl(220 6% 88% / 0.6);
  background: var(--popover);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}

.nav-item:hover > .nav-dropdown,
.nav-item:focus-within > .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown--grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem;
  width: 13rem;
}

.nav-dropdown a {
  display: block;
  padding: 0.375rem 0.5rem;
  border-radius: calc(var(--radius) - 4px);
  font-size: 0.75rem;
  transition: background-color 0.15s, color 0.15s;
}

.nav-dropdown a:hover { background: var(--muted); color: var(--primary); }

/* 顶部搜索 */
.header-search {
  position: relative;
  flex: 1;
  max-width: 28rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.header-search form {
  position: relative;
  width: 100%;
}

.header-search .icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted-foreground);
  pointer-events: none;
}

.header-search input {
  height: 2rem;
  padding-left: 2.25rem;
  padding-right: 4rem;
  background: hsl(220 10% 94% / 0.5);
  border-color: hsl(220 6% 88% / 0.6);
  font-size: 0.75rem;
}

html.dark .header-search input { background: hsl(220 8% 20% / 0.5); }

@media (min-width: 1024px) {
  .header-search input { height: 2.25rem; padding-left: 2.5rem; font-size: 0.875rem; }
}

.header-search button[type='submit'] {
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  height: 1.5rem;
  padding: 0 0.5rem;
  border-radius: calc(var(--radius) - 2px);
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
}

@media (min-width: 1024px) {
  .header-search button[type='submit'] { height: 1.75rem; padding: 0 0.75rem; font-size: 0.75rem; }
}

.header-actions { display: flex; align-items: center; gap: 0.25rem; }
.header-actions .btn-icon { width: 2.25rem; height: 2.25rem; }

@media (max-width: 1023px) {
  .header-actions .theme-toggle { display: none; }
}

.mobile-menu-btn { display: inline-flex; }
@media (min-width: 1024px) {
  .mobile-menu-btn { display: none; }
}

/* 移动端抽屉 */
.mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
}

.mobile-drawer.is-open { display: block; }

.mobile-drawer__mask {
  position: absolute;
  inset: 0;
  background: hsl(0 0% 0% / 0.6);
}

.mobile-drawer__panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 18rem;
  max-width: 85vw;
  overflow-y: auto;
  background: var(--card);
  padding: 1.5rem;
  box-shadow: var(--shadow-xl);
}

.mobile-drawer__link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 2.5rem;
  font-size: 1rem;
  color: var(--foreground);
  border-radius: calc(var(--radius) - 2px);
  padding: 0 0.5rem;
}

.mobile-drawer__link:hover { background: var(--muted); color: var(--primary); }

.mobile-drawer h4 {
  font-size: 0.875rem;
  font-weight: 500;
  margin: 1.5rem 0 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.mobile-drawer__cats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.mobile-drawer__cats a {
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px);
  padding: 0.375rem 0.5rem;
  font-size: 0.75rem;
}

/* -------------------------------- Hero 区 ------------------------------- */

.hero {
  position: relative;
  width: 100%;
}

.hero__media {
  position: relative;
  width: 100%;
  height: 380px;
  overflow: hidden;
}

@media (min-width: 768px) {
  .hero__media { height: 460px; }
}

.hero__media picture {
  display: block;
  height: 100%;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__overlay-1 {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, hsl(0 0% 97% / 0.4), hsl(0 0% 97% / 0.3), var(--background));
}

html.dark .hero__overlay-1 {
  background: linear-gradient(to bottom, hsl(220 9% 10% / 0.4), hsl(220 9% 10% / 0.3), var(--background));
}

.hero__overlay-2 {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, hsl(355 90% 56% / 0.2), transparent, hsl(262 83% 58% / 0.2));
}

.hero__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
}

/* 手机版：内容整体上移一点（背景不变，仅压缩底部留白） */
@media (max-width: 767px) {
  .hero__content { padding-bottom: 3.5rem; }
}

.hero__heading {
  text-align: center;
  margin-bottom: 2rem;
}

.hero__heading h1 {
  font-size: 1.6875rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.025em;
  filter: drop-shadow(0 4px 6px hsl(0 0% 0% / 0.3));
  text-shadow: 0 2px 12px hsl(262 60% 30% / 0.45);
}

@media (min-width: 768px) {
  .hero__heading h1 { font-size: 3rem; }
}

.hero__heading p {
  margin-top: 1rem;
  font-size: 0.875rem;
  color: #fff;
  filter: drop-shadow(0 1px 4px hsl(0 0% 0% / 0.5));
}

@media (min-width: 768px) {
  .hero__heading p { font-size: 1rem; }
}

.hero__search {
  width: 100%;
  max-width: 42rem;
}

.hero__search form { position: relative; }

.hero__search .icon {
  position: absolute;
  left: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.25rem;
  height: 1.25rem;
  color: var(--muted-foreground);
  pointer-events: none;
  z-index: 1;
}

.hero__search input {
  width: 100%;
  height: 3.5rem;
  border: 0;
  border-radius: 9999px;
  background: hsl(0 0% 100% / 0.95);
  backdrop-filter: blur(8px);
  padding: 0 7rem 0 3.5rem;
  font-size: 1rem;
  color: hsl(220 9% 13%);
  box-shadow: var(--shadow-xl);
}

.hero__search input:focus {
  outline: none;
  box-shadow: var(--shadow-2xl), 0 0 0 2px hsl(355 90% 56% / 0.5);
}

.hero__search button[type='submit'] {
  position: absolute;
  right: 0.375rem;
  top: 50%;
  transform: translateY(-50%);
  height: 2.75rem;
  padding: 0 1.5rem;
  border-radius: 9999px;
  background: var(--primary);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  transition: background-color 0.2s;
}

.hero__search button[type='submit']:hover { background: hsl(355 90% 48%); }

.hero-typing {
  position: absolute;
  left: 3.5rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--primary);
  pointer-events: none;
  white-space: nowrap;
  opacity: 1;
  transition: opacity 0.15s;
}

.hero-typing .xg-caret {
  display: inline-block;
  width: 2px;
  height: 1.15em;
  margin-left: 3px;
  background: currentColor;
  border-radius: 1px;
  animation: xg-caret-blink 1.1s steps(1) infinite;
}

@keyframes xg-caret-blink {
  0%, 55% { opacity: 1; }
  56%, 100% { opacity: 0; }
}

.hero__search input:focus ~ .hero-typing,
.hero-typing.is-hidden { opacity: 0; }

@media (max-width: 767px) {
  .hero-typing { font-size: 1.0625rem; }
}

.hero__hot {
  margin-top: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 42rem;
}

.hero__hot-label {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  filter: drop-shadow(0 1px 3px hsl(0 0% 0% / 0.5));
}

.hero__hot-label span:first-child { font-size: 1rem; line-height: 1; }

.hero__hot a {
  font-size: 0.75rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  background: hsl(0 0% 100% / 0.9);
  backdrop-filter: blur(4px);
  color: #51565d;
  font-weight: 500;
  border: 1px solid hsl(0 0% 100% / 0.5);
  transition: background-color 0.2s, color 0.2s;
}

.hero__hot a:hover { background: #fff; color: var(--foreground); }

/* ------------------------------ 快捷入口四宫格 --------------------------- */

.quick-entries {
  width: 100%;
  margin-top: -2.5rem;
  position: relative;
  z-index: 10;
}

.quick-entries__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

@media (min-width: 768px) {
  .quick-entries__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
}

.quick-entry {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.75rem;
  border-radius: calc(var(--radius) + 4px);
  background: var(--card);
  border: 1px solid hsl(220 6% 88% / 0.5);
  box-shadow: var(--shadow-md);
  transition: box-shadow 0.3s, border-color 0.3s;
}

@media (min-width: 768px) {
  .quick-entry { gap: 1rem; padding: 1.25rem; }
}

.quick-entry:hover {
  box-shadow: var(--shadow-xl);
  border-color: hsl(355 90% 56% / 0.3);
}

.quick-entry__icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: calc(var(--radius) + 4px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s;
}

@media (min-width: 768px) {
  .quick-entry__icon { width: 3rem; height: 3rem; }
}

.quick-entry:hover .quick-entry__icon { transform: scale(1.1); }

.quick-entry__icon--blue { background: hsl(217 91% 60% / 0.1); color: hsl(217 91% 55%); }
.quick-entry__icon--amber { background: hsl(38 92% 50% / 0.1); color: hsl(38 92% 45%); }
.quick-entry__icon--green { background: hsl(142 71% 45% / 0.1); color: hsl(142 71% 40%); }
.quick-entry__icon--purple { background: hsl(262 83% 58% / 0.1); color: hsl(262 83% 55%); }
.quick-entry__icon--rose { background: hsl(347 77% 50% / 0.1); color: hsl(347 77% 50%); }

.quick-entry__label {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--foreground);
}

@media (min-width: 768px) {
  .quick-entry__label { font-size: 1rem; }
}

.quick-entry__desc {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  margin-top: 0.125rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --------------------------------- 区块标题 ------------------------------ */

.home-main { display: block; }
.home-main > section { margin-top: 1rem; }
.home-main > section.quick-entries { margin-top: -2.5rem; }
.home-main > section.hero { margin-top: 0; }

/* 首页「热门推荐」区块：翻页 / 切换 Tab 后锚点定位到这里，预留吸顶页头高度 */
#hot { scroll-margin-top: calc(var(--header-h) + 0.75rem); }

/* 原地翻页过渡：不跳转、不滚动，只做淡入淡出 */
.hot-content {
  transition: opacity 0.16s ease, transform 0.16s ease;
  /* 关掉滚动锚定：新内容高度变化时浏览器会「自动补偿」滚动位置，
     那会导致奇怪的抖动，这里由我们自己保证位置不动。 */
  overflow-anchor: none;
}
/* 请求中：内容变淡但仍可见，避免出现空白等待 */
.hot-content.is-loading {
  opacity: 0.45;
}
/* 新内容就位前后的一瞬淡出（同时提升为合成层，避免逐帧重绘整块网格） */
.hot-content.is-swapping {
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  will-change: opacity, transform;
}

@media (prefers-reduced-motion: reduce) {
  .hot-content { transition: none; }
  .hot-content.is-loading { opacity: 0.6; }
  .hot-content.is-swapping { opacity: 0; transform: none; }
}

@media (min-width: 768px) {
  .home-main > section { margin-top: 1.25rem; }
  .home-main > section.hero { margin-top: 0; }
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.section-head__title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.section-head__bar {
  width: 0.25rem;
  height: 1.5rem;
  border-radius: 9999px;
  background: var(--primary);
}

.section-head h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--foreground);
}

@media (min-width: 768px) {
  .section-head h2 { font-size: 1.5rem; }
}

/* ---------------------------------- Tabs -------------------------------- */

.tabs {
  display: inline-flex;
  align-items: center;
  height: 2.25rem;
  padding: 0.25rem;
  border-radius: calc(var(--radius) + 2px);
  background: var(--muted);
  gap: 0.25rem;
}

.tab {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 2rem;
  padding: 0 0.75rem;
  border-radius: calc(var(--radius) - 2px);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted-foreground);
  transition: background-color 0.2s, color 0.2s;
}

.tab:hover { color: var(--foreground); }

.tab.is-active {
  background: var(--card);
  color: var(--foreground);
  box-shadow: var(--shadow-sm);
}

/* ------------------------------- 游戏卡片网格 ---------------------------- */

.game-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
}

@media (min-width: 640px) {
  .game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .game-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
}

.game-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: calc(var(--radius) + 4px);
  border: 1px solid hsl(220 6% 88% / 0.6);
  background: var(--card);
  transition: box-shadow 0.3s, border-color 0.3s, transform 0.3s;
  height: 100%;
}

.game-card:hover {
  box-shadow: var(--shadow-md);
  border-color: hsl(355 90% 56% / 0.4);
  transform: translateY(-2px);
}

.game-card__cover {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--muted);
}

.game-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.game-card:hover .game-card__cover img { transform: scale(1.05); }

.game-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem; /* 上下收窄，左右不变 */
}

.game-card__badges {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
  font-size: 11px;
  font-weight: 500;
}

.game-card__badges > span {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.game-card__badges .dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  display: inline-block;
}

.dot--primary { background: var(--primary); }
.dot--amber { background: var(--amber); }
.badge--primary { color: var(--primary); }
.badge--amber { color: hsl(32 95% 44%); }

.game-card__title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--foreground);
  line-height: 1.35;
  overflow: hidden;
  /* 单行省略用标准 nowrap+ellipsis：老式 -webkit-line-clamp 在 iOS WebKit 下
     省略号会提前渲染、右侧留白（内嵌 span 副标题时更明显） */
  white-space: nowrap;
  text-overflow: ellipsis;
}

.game-card__title span {
  color: var(--muted-foreground);
  font-weight: 400;
}

.game-card__desc {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  line-height: 1.625;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.game-card__meta {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.375rem;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--muted-foreground);
  padding-top: 0.25rem;
}

.game-card__meta-left {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
}

.game-card__meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

/* 手机端（窄屏卡片）：meta 压成一行，禁止换行/裁切 */
@media (max-width: 767px) {
  .game-card__meta { flex-wrap: nowrap; font-size: 10px; gap: 0.25rem; }
  .game-card__meta-left { gap: 0.375rem; }
  .game-card__meta span { white-space: nowrap; }
  .game-card__meta .meta-opt { display: none; } /* 「更新」二字在小卡上省略 */
}

/* 两列小卡（≤639px）：再收起收藏数，确保一行放得下 */
@media (max-width: 639px) {
  .game-card__meta .meta-star { display: none; }
}

/* 极窄屏（≤359px）：间距再收一档 */
@media (max-width: 359px) {
  .game-card__meta { gap: 0.125rem; }
  .game-card__meta-left { gap: 0.25rem; }
  .game-card__meta span { gap: 0.125rem; }
}

.text-rose { color: hsl(347 77% 50%); }
.text-amber { color: var(--amber); }

/* --------------------------------- 分页 --------------------------------- */

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.pagination__pages {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
}

.page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  height: 2.25rem;
  min-width: 2.25rem;
  padding: 0 0.75rem;
  border-radius: calc(var(--radius) + 2px);
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--foreground);
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.page-btn:hover { border-color: hsl(220 5% 45% / 0.4); }
.page-btn.is-disabled { opacity: 0.4; pointer-events: none; }
.page-btn.is-current {
  background: var(--foreground);
  color: var(--background);
  border-color: var(--foreground);
}

.pagination__jump {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.pagination__jump form { display: flex; align-items: center; gap: 0.25rem; }

.pagination__jump .input {
  height: 2.25rem;
  width: 5rem;
  text-align: center;
  border-radius: calc(var(--radius) + 2px);
}

/* 手机端分页固定两行：第一行页码、第二行跳转；按钮适当缩小 */
@media (max-width: 767px) {
  .pagination {
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
    margin-top: 1.5rem;
  }
  .pagination__pages {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0.25rem;
    max-width: 100%;
  }
  /* 手机端：首末页 + 5 个页码即可，上一页/下一页两个箭头收掉（2026-10-30）
     按钮放大到 2.6rem（≈42px）更接近手指触控尺寸，防误触 */
  .pagination__pages {
    gap: 0.3rem;
  }
  .pagination__pages .page-btn {
    min-width: 2.6rem;
    padding: 0 0.4rem;
  }
  .pagination__pages .page-btn--prev,
  .pagination__pages .page-btn--next {
    display: none;
  }
  .page-btn {
    height: 2.6rem;
    min-width: 2.6rem;
    padding: 0 0.4rem;
    font-size: 0.9rem;
  }
  .pagination__jump {
    gap: 0.375rem;
    font-size: 0.8125rem;
  }
  .pagination__jump form { gap: 0.25rem; }
  .pagination__jump .input {
    height: 2rem;
    width: 3.25rem;
  }
}

/* 中窄屏（≤479px，页码可达 5 个）：上一页/下一页只留箭头，保证页码行一行放得下 */
@media (max-width: 479px) {
  .page-btn .page-txt { display: none; }
}

/* 极窄屏：页码按钮再收一档 */
@media (max-width: 359px) {
  .pagination__pages .page-btn {
    min-width: 2.2rem;
    height: 2.4rem;
    padding: 0 0.25rem;
  }
}

/* -------------------------------- 轮播 Banner ---------------------------- */

.banner {
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--radius) + 4px);
  max-width: 72rem;
  margin: 0 auto;
  /* 横向手势由 JS 接管（左右滑动切图），纵向仍交给页面滚动 */
  touch-action: pan-y;
}

.banner__track {
  display: flex;
  transition: transform 0.7s cubic-bezier(0.33, 1, 0.68, 1);
}

.banner__slide {
  position: relative;
  flex: 0 0 100%;
  min-width: 100%;
  max-width: 100%;
  aspect-ratio: 21 / 8;
  display: block;
  background: var(--muted);
}

.banner__slide img { width: 100%; height: 100%; object-fit: cover; }

.banner__slide-overlay-1 {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, hsl(0 0% 0% / 0.8), hsl(0 0% 0% / 0.2), transparent);
}

.banner__slide-overlay-2 {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, hsl(0 0% 0% / 0.4), transparent, transparent);
}

.banner__info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.25rem;
}

@media (min-width: 768px) {
  .banner__info { padding: 2rem; }
}

.banner__info h2 {
  font-size: 1.25rem;
  font-weight: 900;
  color: #fff;
  filter: drop-shadow(0 4px 6px hsl(0 0% 0% / 0.3));
  margin-bottom: 0.5rem;
}

@media (min-width: 768px) {
  .banner__info h2 { font-size: 1.875rem; }
}

.banner__info .subtitle {
  color: hsl(0 0% 100% / 0.7);
  font-size: 0.875rem;
  margin-bottom: 0.75rem;
}

@media (min-width: 768px) {
  .banner__info .subtitle { font-size: 1rem; }
}

.banner__info .desc {
  color: hsl(0 0% 100% / 0.8);
  font-size: 0.875rem;
  max-width: 36rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

@media (min-width: 768px) {
  .banner__info .desc { font-size: 1rem; }
}

.banner__info .meta {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.banner__info .meta .tag {
  font-size: 0.75rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  background: hsl(355 90% 56% / 0.8);
  color: #fff;
  font-weight: 500;
}

.banner__info .meta .rating { font-size: 0.75rem; color: hsl(0 0% 100% / 0.7); }

/* 桌面显示「游戏标签 + 评分」；「游戏类型」胶囊只在移动端出现 */
.banner__info .meta .tag--type { display: none; }

.banner__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  border: 1px solid hsl(0 0% 100% / 0.2);
  background: hsl(0 0% 0% / 0.3);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s, background-color 0.3s;
}

.banner:hover .banner__nav { opacity: 1; }
.banner__nav:hover { background: hsl(0 0% 0% / 0.5); }
.banner__nav--prev { left: 1rem; }
.banner__nav--next { right: 1rem; }

.banner__dots {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.banner__dots button {
  height: 0.375rem;
  width: 0.375rem;
  border-radius: 9999px;
  background: hsl(0 0% 100% / 0.4);
  transition: width 0.3s, background-color 0.3s;
}

.banner__dots button:hover { background: hsl(0 0% 100% / 0.6); }
.banner__dots button.is-active { width: 2rem; background: #fff; }

/* 手机端：3/2 比例 + 精简文案（只留游戏类型胶囊，不显示评分/站点标签）+ 隐藏指示点（2026-10-10） */
@media (max-width: 767px) {
  .banner__slide { aspect-ratio: 3 / 2; }
  .banner__info { padding: 0.75rem 0.75rem 1rem; }
  .banner__info h2 { font-size: 0.875rem; margin-bottom: 0.25rem; }
  .banner__info .subtitle { font-size: 0.6875rem; margin-bottom: 0.25rem; }
  .banner__info .desc { font-size: 0.6875rem; }
  .banner__info .meta { margin-top: 0.375rem; gap: 0.5rem; }
  .banner__info .meta .tag { font-size: 0.625rem; padding: 0.125rem 0.4375rem; }
  .banner__info .meta .tag--term,
  .banner__info .meta .rating { display: none; }
  .banner__info .meta .tag--type { display: inline-block; }
  .banner__dots { display: none; }
}

/* --------------------------------- 公告条 -------------------------------- */

.notice-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 1rem;
  border-radius: calc(var(--radius) + 2px);
  border: 1px solid hsl(220 6% 88% / 0.5);
  background: hsl(0 0% 100% / 0.5);
}

html.dark .notice-bar { background: hsl(220 9% 13% / 0.5); }

.notice-bar__label {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: hsl(0 84% 55%);
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 700;
}

.notice-bar__viewport {
  flex: 1;
  overflow: hidden;
  height: 1.625rem;
  position: relative;
}

.notice-bar__track {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  will-change: transform;
}

.notice-bar__item {
  height: 1.625rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.0625rem;
  flex-shrink: 0;
  white-space: nowrap;
}

.notice-bar__type {
  font-size: 10px;
  color: #fff;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  white-space: nowrap;
}

.notice-bar__text {
  color: hsl(220 9% 13% / 0.8);
  white-space: nowrap;
}

html.dark .notice-bar__text { color: hsl(220 9% 92% / 0.8); }

/* 手机端跑马灯文字略收一档，避免太挤 */
@media (max-width: 767px) {
  .notice-bar__viewport,
  .notice-bar__item { height: 1.5rem; }
  .notice-bar__item { font-size: 0.9375rem; }
}

/* 公告重点高亮（Ctrl+D 收藏等） */
.notice-bar__hl {
  color: hsl(0 84% 52%);
  font-weight: 800;
}

html.dark .notice-bar__hl { color: hsl(0 90% 68%); }


.type--new_game { background: hsl(142 71% 45%); }
.type--maintenance { background: var(--amber); }
.type--update { background: hsl(217 91% 60%); }
.type--user { background: var(--purple); }
.type--default { background: hsl(220 9% 46%); }

.notice-bar__arrows {
  display: none; /* 横向跑马灯模式下上下切换箭头不再使用 */
  flex-direction: column;
  gap: 0.125rem;
  flex-shrink: 0;
}

.notice-bar__arrows button {
  color: var(--muted-foreground);
  display: flex;
  transition: color 0.2s;
}

.notice-bar__arrows button:hover { color: var(--foreground); }

/* ------------------------------ 游戏分类快捷区 --------------------------- */

.category-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .category-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .category-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.category-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.25rem 0.75rem;
  border-radius: calc(var(--radius) + 4px);
  background: var(--card);
  border: 1px solid hsl(220 6% 88% / 0.5);
  transition: border-color 0.3s, box-shadow 0.3s;
}

.category-cell:hover {
  border-color: hsl(355 90% 56% / 0.3);
  box-shadow: var(--shadow-md);
}

.category-cell .emoji {
  font-size: 1.5rem;
  line-height: 1;
  transition: transform 0.3s;
}

@media (min-width: 768px) {
  .category-cell .emoji { font-size: 1.875rem; }
}

.category-cell:hover .emoji { transform: scale(1.1); }
.category-cell span:last-child { font-size: 0.75rem; font-weight: 500; }

@media (min-width: 768px) {
  .category-cell span:last-child { font-size: 0.875rem; }
}

/* -------------------------------- 平台快捷区 ----------------------------- */

.platform-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

@media (min-width: 768px) {
  .platform-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .platform-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

.platform-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 1rem 0.5rem;
  border-radius: calc(var(--radius) + 2px);
  background: var(--card);
  border: 1px solid hsl(220 6% 88% / 0.6);
  font-size: 0.75rem;
  font-weight: 500;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.platform-cell:hover {
  background: hsl(355 90% 56% / 0.05);
  color: var(--primary);
  border-color: hsl(355 90% 56% / 0.3);
}

.platform-cell .emoji { font-size: 1.25rem; line-height: 1; }

/* 深色模式下 emoji（游戏手柄/手机等深色字形）会融入背景，统一提亮 */
html.dark .platform-cell .emoji { filter: brightness(1.8) saturate(1.15); }

/* --------------------------------- 页脚 --------------------------------- */

.site-footer {
  width: 100%;
  background: var(--foreground);
  color: var(--background);
  margin-top: 3rem;
}

/* 页脚配色在深浅模式下保持一致（夜间模式不变） */
html.dark .site-footer {
  background: hsl(220 9% 13%);
  color: hsl(0 0% 97%);
}

.site-footer__quick {
  border-bottom: 1px solid hsl(0 0% 97% / 0.1);
}

.site-footer__quick-inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  padding: 1.5rem 0;
}

@media (min-width: 768px) {
  .site-footer__quick-inner { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.site-footer__quick-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: calc(var(--radius) + 2px);
  background: hsl(0 0% 97% / 0.05);
  transition: background-color 0.2s;
}

.site-footer__quick-item:hover { background: hsl(0 0% 97% / 0.1); }

.site-footer__quick-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background: hsl(355 90% 56% / 0.2);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.site-footer__quick-item .label { font-size: 0.875rem; font-weight: 500; }

.site-footer__quick-item .desc {
  font-size: 0.75rem;
  color: hsl(0 0% 97% / 0.6);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-footer__main {
  border-top: 1px solid hsl(0 0% 97% / 0.1);
}

.site-footer__main-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding: 2rem 0;
}

@media (min-width: 768px) {
  .site-footer__main-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  font-weight: 700;
  font-size: 1.125rem;
}

.site-footer__brand-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.375rem;
  background: linear-gradient(to bottom right, var(--primary), var(--purple));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.site-footer__about {
  font-size: 0.875rem;
  color: hsl(0 0% 97% / 0.6);
  line-height: 1.625;
}

.site-footer h4 {
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.site-footer__cats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.site-footer__cats a,
.site-footer__links a {
  font-size: 0.875rem;
  color: hsl(0 0% 97% / 0.6);
  transition: color 0.2s;
}

.site-footer__cats a:hover,
.site-footer__links a:hover { color: var(--primary); }

.site-footer__links a { display: block; margin-bottom: 0.5rem; }

.site-footer__contact p {
  font-size: 0.875rem;
  color: hsl(0 0% 97% / 0.6);
  margin-bottom: 0.5rem;
}

.site-footer__bottom {
  border-top: 1px solid hsl(0 0% 97% / 0.1);
}

.site-footer__bottom-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 1rem 0;
  font-size: 0.75rem;
  color: hsl(0 0% 97% / 0.4);
}

@media (min-width: 768px) {
  .site-footer__bottom-inner { flex-direction: row; }
}

/* ------------------------------ 悬浮操作按钮 ---------------------------- */

.floating-actions {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.floating-btn {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  transition: background-color 0.3s, transform 0.3s, opacity 0.3s;
}

@media (min-width: 768px) {
  .floating-btn { width: 3rem; height: 3rem; }
}

.floating-btn--theme {
  background: #c2d4ff;
  color: #2563eb;
  border: 1px solid #93c5fd;
}

.floating-btn--theme:hover { background: #b5c9ff; }

.floating-btn--top {
  background: hsl(355 90% 56% / 0.9);
  color: #fff;
  opacity: 0;
  transform: translateY(1rem);
  pointer-events: none;
}

.floating-btn--top:hover { background: var(--primary); }
.floating-btn--top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* ------------------------------ 页面通用标题区 --------------------------- */

.page-hero {
  padding: 1.5rem 0 0;
}

.page-hero h1 {
  font-size: 1.5rem;
  font-weight: 700;
}

.page-hero p {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  margin-top: 0.25rem;
}

/* Switch 专区：标题居中 + 计数随行 + 专区搜索栏 */
.page-hero--center {
  text-align: center;
}

.page-hero--center h1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  column-gap: 0.75rem;
}

.page-hero__count {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--muted-foreground);
  white-space: nowrap;
}

.page-hero__count .text-primary {
  color: var(--primary);
}

/* Switch 专区 hero：游戏世界横幅背景（AI 生成，媒体库 id297/298），白字 + 暗色压层保证可读 */
.switch-hero {
  position: relative;
  overflow: hidden;
  background: #1d2733;
}

.switch-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('https://xgzyku.cn/wp-content/uploads/2026/10/switch-hero-1600.webp') center 42% / cover no-repeat;
}

.switch-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgb(12 18 30 / 0.45) 0%,
    rgb(12 18 30 / 0.3) 45%,
    rgb(12 18 30 / 0.55) 100%
  );
}

.switch-hero > .container {
  position: relative;
  z-index: 1;
  padding: 2.75rem 0 3rem;
}

.switch-hero h1 {
  color: #fff;
  text-shadow: 0 2px 12px rgb(0 0 0 / 0.45);
}

.switch-hero .page-hero__count {
  color: rgb(255 255 255 / 0.92);
  text-shadow: 0 1px 8px rgb(0 0 0 / 0.4);
}

.switch-hero .page-hero__count .text-primary {
  color: #fff;
  font-weight: 600;
}

.switch-hero .hero-search__clear {
  color: rgb(255 255 255 / 0.85);
}

.switch-hero .hero-search__clear:hover {
  color: #fff;
}

@media (max-width: 767px) {
  .switch-hero::before {
    background-image: url('https://xgzyku.cn/wp-content/uploads/2026/10/switch-hero-768.webp');
  }

  .switch-hero > .container {
    padding: 2rem 0 2.25rem;
  }
}

.hero-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 26rem;
  margin: 1.25rem auto 0;
}

.hero-search .icon {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted-foreground);
  pointer-events: none;
}

.hero-search input[type='search'] {
  width: 100%;
  height: 2.5rem;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid var(--input);
  background: var(--card);
  padding: 0 0.75rem 0 2.5rem;
  font-size: 0.875rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.hero-search input[type='search']:focus {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 3px hsl(355 90% 56% / 0.15);
}

.hero-search input[type='search']::placeholder {
  color: var(--muted-foreground);
}

.hero-search .btn {
  height: 2.5rem;
  flex-shrink: 0;
}

.hero-search__clear {
  flex-shrink: 0;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hero-search__clear:hover {
  color: var(--primary);
}

/* 手机端专区搜索栏收紧（原 2.5rem 高、大按钮显得笨重） */
@media (max-width: 767px) {
  .hero-search {
    /* 手机端搜索栏不顶边：居中收窄到 85%（左右各留 ~7.5% 白） */
    max-width: 85%;
    gap: 0.375rem;
    margin-top: 0.875rem;
  }

  .hero-search input[type='search'] {
    height: 2.25rem;
    font-size: 0.8125rem;
    padding: 0 0.625rem 0 2.125rem;
  }

  .hero-search .icon {
    left: 0.7rem;
    width: 1rem;
    height: 1rem;
  }

  .hero-search .btn {
    height: 2.25rem;
    padding: 0 0.8rem;
    font-size: 0.8125rem;
  }
}

/* ------------------------------ 列表页布局 ------------------------------ */

.list-layout {
  display: flex;
  gap: 1.5rem;
  padding: 1.5rem 0 2rem;
}

.list-sidebar { display: none; }

@media (min-width: 1024px) {
  .list-sidebar { display: block; width: 14rem; flex-shrink: 0; }
}

.sidebar-card {
  position: sticky;
  top: 5rem;
  background: var(--card);
  border: 1px solid hsl(220 6% 88% / 0.5);
  border-radius: calc(var(--radius) + 4px);
  padding: 1rem;
}

.sidebar-title {
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.sidebar-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-radius: calc(var(--radius) + 2px);
  font-size: 0.875rem;
  color: var(--foreground);
  transition: background-color 0.2s, color 0.2s;
}

.sidebar-item:hover { background: var(--muted); }
.sidebar-item.is-active { background: hsl(355 90% 56% / 0.1); color: var(--primary); font-weight: 500; }

.sidebar-count {
  font-size: 10px;
  height: 1.25rem;
  min-width: 1.25rem;
  padding: 0 0.375rem;
  border-radius: 9999px;
  background: var(--secondary);
  color: var(--muted-foreground);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.list-content { flex: 1; min-width: 0; }

.list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.list-toolbar .count { font-size: 0.75rem; color: var(--muted-foreground); }

/* 左侧组：排序 tabs + 进站宝箱/游戏盲盒 入口（紧跟 tabs 后面） */
.list-toolbar__left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
@media(max-width:768px){
  .list-toolbar__left{gap:0.5rem}
}

.list-toolbar__right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* 我的收藏入口 + 弹层 */
.fav-open {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 2rem;
  padding: 0 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--foreground);
  border: 1px solid var(--border);
  border-radius: 9999px;
  background: var(--card);
  transition: border-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.fav-open:hover { border-color: var(--primary); color: var(--primary); }
.fav-open .icon-sm { color: var(--amber); }

.fav-badge {
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 0.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #fff;
  background: var(--primary);
  border-radius: 9999px;
}

/* 类选择器的 display 会盖掉 hidden 属性，收藏数为 0 时必须显式隐藏 */
.fav-badge[hidden] { display: none; }

.fav-panel-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: hsl(220 20% 8% / 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.fav-panel-overlay.is-open { opacity: 1; pointer-events: auto; }

.fav-panel {
  width: min(460px, 100%);
  max-height: min(70vh, 560px);
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 6px);
  box-shadow: 0 24px 60px hsl(220 25% 6% / 0.35);
  transform: translateY(10px) scale(0.98);
  transition: transform 0.2s ease;
}
.fav-panel-overlay.is-open .fav-panel { transform: translateY(0) scale(1); }

.fav-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--border);
}
.fav-panel__title { font-weight: 600; }
.fav-panel__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--muted-foreground);
  border-radius: 9999px;
}
.fav-panel__close:hover { background: var(--muted); color: var(--foreground); }

.fav-panel__body {
  overflow-y: auto;
  padding: 0.5rem 0.75rem 0.9rem;
}

.fav-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.35rem;
  border-radius: var(--radius);
}
.fav-item:hover { background: var(--muted); }
.fav-item__link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex: 1;
  min-width: 0;
}
.fav-item__cover {
  width: 4rem;
  height: 3rem;
  object-fit: cover;
  border-radius: calc(var(--radius) - 2px);
  flex-shrink: 0;
  background: var(--muted);
}
.fav-item__cover--ph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--amber);
  font-size: 1.1rem;
}
.fav-item__main { display: flex; flex-direction: column; min-width: 0; gap: 0.15rem; }
.fav-item__title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fav-item__time { font-size: 0.75rem; color: var(--muted-foreground); }
.fav-item__remove {
  flex-shrink: 0;
  padding: 0.3rem 0.6rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  border-radius: 9999px;
}
.fav-item__remove:hover { color: var(--primary); background: hsl(355 90% 56% / 0.1); }

.fav-panel__empty {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--muted-foreground);
  font-size: 0.875rem;
}
.fav-panel__hint { margin-top: 0.4rem; font-size: 0.75rem; opacity: 0.8; }

@media (max-width: 767px) {
  .fav-panel-overlay { padding: 0.75rem; }
  .fav-panel__body { padding: 0.4rem 0.5rem 0.7rem; }
}


.empty-state {
  text-align: center;
  padding: 4rem 1rem;
  color: var(--muted-foreground);
}

.empty-state .icon { width: 3rem; height: 3rem; margin: 0 auto 0.75rem; opacity: 0.4; }

/* -------------------------------- 详情页 -------------------------------- */

.detail-hero {
  position: relative;
  width: 100%;
}

.detail-hero__media {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
  background: var(--muted);
}

@media (min-width: 768px) {
  .detail-hero__media { height: 320px; }
}

.detail-hero__media img { width: 100%; height: 100%; object-fit: cover; }

.detail-hero__overlay-1 {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, hsl(0 0% 0% / 0.2), hsl(0 0% 0% / 0.3) 55%, var(--background));
}

.detail-hero__overlay-2 {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, hsl(0 0% 97% / 0.75), hsl(0 0% 97% / 0.25), transparent);
}

html.dark .detail-hero__overlay-2 {
  background: linear-gradient(to right, hsl(220 9% 10% / 0.75), hsl(220 9% 10% / 0.25), transparent);
}

.detail-body {
  position: relative;
  z-index: 10;
  margin-top: -12rem;
  padding-bottom: 2rem;
}

@media (min-width: 768px) {
  .detail-body { margin-top: -15rem; }
}

.detail-card {
  position: relative;
  background: none;
  border: none;
  border-radius: calc(var(--radius) + 4px);
  padding: 1rem;
  box-shadow: 0 12px 28px hsl(220 30% 20% / 0.1);
}

.detail-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: calc(var(--radius) + 4px);
  background: linear-gradient(180deg, hsl(0 0% 100% / 0) 0%, hsl(0 0% 100% / 0.3) 80px, hsl(0 0% 100% / 0.42) 170px, hsl(0 0% 100% / 0.26) 100%);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 120px);
  mask-image: linear-gradient(180deg, transparent 0, #000 120px);
}

html.dark .detail-card::before {
  background: linear-gradient(180deg, hsl(220 10% 16% / 0) 0%, hsl(220 10% 16% / 0.4) 80px, hsl(220 10% 16% / 0.46) 170px, hsl(220 10% 16% / 0.34) 100%);
}

@media (min-width: 768px) {
  .detail-card { padding: 1.5rem; }
}

.detail-hero__crumb {
  margin-bottom: 0.375rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
}

.crumb-link {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #c02a26;
  background: hsl(0 0% 100% / 0.92);
  padding: 0.25rem 0.75rem;
  border-radius: 0.375rem;
  box-shadow: 0 1px 3px hsl(0 0% 0% / 0.25);
}

.crumb-link:hover { background: #fff; }

.crumb-sep { color: hsl(0 0% 0% / 0.35); }

.detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .detail-grid { grid-template-columns: 17rem 1fr; gap: 1.75rem; }
}

@media (min-width: 1024px) {
  .detail-grid { grid-template-columns: 20rem 1fr; }
}

.detail-hero__poster {
  width: 100%;
  max-width: 22rem;
  aspect-ratio: 16 / 9;
  border-radius: calc(var(--radius) + 3px);
  overflow: hidden;
  border: 3px solid hsl(0 0% 100% / 0.95);
  box-shadow: 0 10px 30px hsl(0 0% 0% / 0.35);
  background: var(--muted);
}

.detail-hero__poster img { width: 100%; height: 100%; object-fit: cover; display: block; }

.detail-hero__info { min-width: 0; }

.detail-title {
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1.3;
  color: var(--foreground);
}

@media (min-width: 768px) {
  .detail-title { font-size: 2rem; }
}

.detail-subtitle {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  margin-top: 0.375rem;
  letter-spacing: 0.05em;
}

.detail-tags {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* 分类胶囊与游戏标题之间的间距（原为 0，胶囊紧贴标题） */
.detail-tags:not(.detail-tags--glass) { margin-bottom: 0.375rem; }

.detail-tags--glass { margin-top: 1rem; }

.chip {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  background: var(--muted);
  color: var(--foreground);
}

.chip--primary { background: var(--primary); color: #fff; }
.chip--amber { background: hsl(32 95% 44%); color: #fff; }

.detail-intro {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
  line-height: 1.75;
  max-width: 42rem;
}

.detail-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1.125rem;
}

@media (min-width: 640px) {
  .detail-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 手机端详情页统计只保留「支持平台 / 浏览量」 */
@media (max-width: 767px) {
  .detail-stats .stat--optional { display: none; }
}

.stat {
  border: none;
  border-radius: calc(var(--radius) + 2px);
  padding: 0.625rem 0.75rem;
  background: linear-gradient(135deg, hsl(355 90% 56% / 0.12), hsl(355 90% 56% / 0.04) 55%, transparent);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

html.dark .stat { background: linear-gradient(135deg, hsl(355 90% 56% / 0.25), hsl(355 90% 56% / 0.08) 55%, transparent); }

.stat__label {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.stat__label .icon { width: 0.75rem; height: 0.75rem; }

.stat__value { font-size: 1rem; font-weight: 700; margin-top: 0.25rem; color: var(--foreground); line-height: 1.45; }

.detail-hero__engage {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: 0.875rem;
  font-size: 0.8125rem;
  font-weight: 600;
}

.detail-hero__engage .icon { width: 0.875rem; height: 0.875rem; margin-right: 0.2rem; vertical-align: -2px; }

.detail-hero__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.375rem;
}

.btn-hero {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  font-weight: 700;
  padding: 0.625rem 1.375rem;
  border-radius: calc(var(--radius) + 2px);
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}

.btn-hero:active { transform: scale(0.97); }

.btn-hero--primary { background: var(--primary); color: #fff; box-shadow: 0 6px 18px hsl(355 90% 56% / 0.4); }
.btn-hero--primary:hover { background: hsl(355 90% 50%); }

/* 下载游戏按钮：绿色，和收藏/分享区分开（下载站的主动作） */
.btn-hero--dl { background: linear-gradient(135deg, #16a34a, #22c55e); color: #fff; box-shadow: 0 6px 18px hsl(142 72% 40% / 0.36); }
.btn-hero--dl:hover { background: linear-gradient(135deg, #15803d, #16a34a); }
.btn-hero--dl .icon { stroke: currentColor; }

.btn-hero--ghost {
  background: hsl(0 0% 100% / 0.72);
  color: var(--foreground);
  border: 1px solid hsl(220 6% 88%);
}

.btn-hero--ghost:hover { background: #fff; }

/* 分享按钮：淡紫描边玻璃，跟旁边的红色「收藏」拉开主次，不再是一块死白 */
.btn-hero--ghost.js-share {
  background: linear-gradient(135deg, hsl(262 100% 98%), hsl(272 92% 96%));
  color: hsl(262 68% 52%);
  border: 1px solid hsl(262 62% 88%);
  box-shadow: 0 3px 12px hsl(262 60% 60% / 0.14);
}

.btn-hero--ghost.js-share:hover {
  background: linear-gradient(135deg, hsl(262 96% 96%), hsl(272 92% 92%));
  color: hsl(262 76% 44%);
  border-color: hsl(262 62% 78%);
  box-shadow: 0 8px 22px hsl(262 60% 55% / 0.24);
  transform: translateY(-1px);
}

html.dark .btn-hero--ghost.js-share {
  background: linear-gradient(135deg, hsl(262 42% 17% / 0.92), hsl(272 46% 21% / 0.92));
  color: hsl(262 85% 80%);
  border-color: hsl(262 40% 32%);
  box-shadow: 0 3px 12px hsl(0 0% 0% / 0.32);
}

html.dark .btn-hero--ghost.js-share:hover {
  background: linear-gradient(135deg, hsl(262 46% 22%), hsl(272 48% 27%));
  color: #fff;
  border-color: hsl(262 45% 42%);
}

/* 深色模式：白底写死会变成「白字浮在白底上」，换成暗色玻璃底 */
/* 主题切换瞬间（.theme-switching 由 JS 在切换时短暂挂上）：全局禁用过渡，
   避免带 transition 的元素比页面其他部分慢半拍变色，切深色显得闪烁不流畅 */
.theme-switching *,
.theme-switching *::before,
.theme-switching *::after {
  transition: none !important;
}

html.dark .btn-hero--ghost {
  background: hsl(220 8% 20% / 0.7);
  color: hsl(220 9% 92%);
  border-color: hsl(220 6% 26%);
}

html.dark .btn-hero--ghost:hover {
  background: hsl(220 8% 28% / 0.9);
  color: #fff;
}

.btn-hero--primary.is-faved { background: hsl(38 92% 50%); box-shadow: 0 6px 18px hsl(38 92% 50% / 0.4); }

.btn-hero--primary.is-faved .icon { fill: currentColor; }

/* 收藏星标弹跳动效 */
@keyframes fav-pop {
  0% { transform: scale(1) rotate(0deg); }
  40% { transform: scale(1.45) rotate(16deg); }
  70% { transform: scale(0.92) rotate(-6deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.fav-pop { animation: fav-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* 收藏轻提示 */
.fav-toast {
  position: fixed;
  left: 50%;
  bottom: 2.5rem;
  z-index: 200;
  transform: translate(-50%, 1rem);
  background: hsl(220 9% 13% / 0.92);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.625rem 1.125rem;
  border-radius: 9999px;
  box-shadow: 0 10px 30px hsl(220 9% 13% / 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.fav-toast.is-show { opacity: 1; transform: translate(-50%, 0); }

/* 分享菜单 */
.share-menu {
  position: absolute;
  z-index: 80;
  display: none;
  min-width: 10rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 2px);
  box-shadow: 0 12px 30px hsl(220 30% 20% / 0.18);
  padding: 0.375rem;
}

.share-menu.is-open { display: block; }

.share-menu__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  text-align: left;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--foreground);
  background: none;
  border: none;
  border-radius: var(--radius);
  padding: 0.5rem 0.625rem;
  cursor: pointer;
}

.share-menu__item:hover { background: var(--muted); }

.detail-content {
  margin-top: 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.9;
  color: var(--foreground);
}

.detail-content p { margin-bottom: 1rem; }
.detail-content h2 { font-size: 1.125rem; font-weight: 700; margin: 1.5rem 0 0.75rem; }
.detail-content h3 { font-size: 1rem; font-weight: 700; margin: 1.25rem 0 0.5rem; }
.detail-content ul { list-style: disc; padding-left: 1.25rem; margin-bottom: 1rem; }
.detail-content img { border-radius: calc(var(--radius) + 2px); margin: 1rem 0; }

/* ------------------------------ 游戏下载 -------------------------------- */

/* 锚点定位：#xg-download 被固定页头遮住，需按页头高度补偿；
   再留一点余量，让「游戏下载」标题落在视口偏上位置而不是贴顶/偏下。 */
.detail-download {
  margin-top: 2rem;
  scroll-margin-top: calc(var(--header-h) + 1rem);
}

.detail-download__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.125rem;
  margin-top: 1rem;
  padding: 1.5rem 1.5rem 1.375rem;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 4px);
  background: linear-gradient(135deg, hsl(355 90% 56% / 0.05), hsl(210 90% 56% / 0.06));
  text-align: center;
}

.detail-download__qr {
  flex: 0 0 auto;
  width: 168px;
  height: 168px;
  display: grid;
  place-items: center;
  padding: 6px;
  background: #fff;
  border-radius: calc(var(--radius) + 2px);
  box-shadow: 0 6px 18px hsl(220 30% 20% / 0.1);
}
.detail-download__qr img,
.detail-download__qr canvas { display: block; width: 156px !important; height: 156px !important; border-radius: 4px; }
/* 手机长按二维码要能弹出「识别图中二维码 / 保存图片」：显式把长按菜单相关样式
   恢复成默认值，避免被上级继承下来的拦截样式（user-select:none / touch-callout:none）吃掉 */
.detail-download__qr img {
  pointer-events: auto;
  touch-action: auto;
  -webkit-touch-callout: default;
  -webkit-user-select: auto;
  -webkit-user-drag: auto;
  user-select: auto;
}

.detail-download__tip {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.75;
  color: var(--muted-foreground);
}
.detail-download__tip-title {
  display: block;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--foreground);
}
.detail-download__tip-sub { display: block; margin-top: 0.25rem; }
/* 页面内二维码只在手机端显示；桌面端二维码进弹窗（点击「获取地址」弹出） */
.detail-download__qr--mobile { display: none; }
/* 桌面端：二维码下方显示蓝色「获取地址」按钮；手机端显示「网盘下载」按钮。
   两组按钮靠 --desktop / --mobile 后缀分开控制显隐，模板里各渲染一份，
   文案不同（获取地址 / 网盘下载），避免用 CSS 改文字。 */
.detail-download__actions { display: none; }
.detail-download__actions .btn { display: inline-flex; align-items: center; gap: 0.375rem; }

/* 桌面端按钮：蓝底白字，圆角，与参考站截图一致 */
.detail-download__actions--desktop {
  display: flex;
  justify-content: center;
  margin-top: 0.25rem;
}
.detail-download__actions--desktop .btn {
  min-width: 15rem;
  justify-content: center;
  padding: 0.8125rem 2rem;
  border: 0;
  border-radius: 10px;
  background: #1a6dff;
  color: #fff;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 10px hsl(218 100% 55% / 0.28);
  transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.detail-download__actions--desktop .btn:hover {
  background: #0d5ee6;
  box-shadow: 0 4px 16px hsl(218 100% 55% / 0.36);
}
.detail-download__actions--desktop .btn:active { transform: translateY(1px); }
.detail-download__actions--desktop .btn .icon { width: 1.125rem; height: 1.125rem; }
.detail-download__actions--mobile { display: none; }

/* 手机游戏直跳下载：全设备可见（桌面居中，窄屏自动换行全宽） */
.detail-dl-direct {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.625rem;
  margin-top: 0.25rem;
}
.detail-dl-direct .btn {
  min-width: 15rem;
  justify-content: center;
  padding: 0.8125rem 2rem;
  border: 0;
  border-radius: 10px;
  background: #1a6dff;
  color: #fff;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 10px hsl(218 100% 55% / 0.28);
  transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.detail-dl-direct .btn:hover {
  background: #0d5ee6;
  box-shadow: 0 4px 16px hsl(218 100% 55% / 0.36);
}
.detail-dl-direct .btn:active { transform: translateY(1px); }
.detail-dl-direct .btn .icon { width: 1.125rem; height: 1.125rem; }
@media (max-width: 479px) {
  .detail-dl-direct .btn { flex: 1 1 auto; min-width: 0; }
}

@media (max-width: 767px) {
  .detail-download__card { gap: 0.875rem; padding: 1.25rem 1rem; margin-top: 0.75rem; }
  .detail-download__qr { width: 132px; height: 132px; }
  .detail-download__qr img,
  .detail-download__qr canvas { width: 120px !important; height: 120px !important; }
  /* 手机端：页面内二维码恢复显示，隐藏桌面蓝按钮，恢复「网盘下载」按钮 */
  .detail-download__qr--mobile { display: grid; }
  .detail-download__actions--desktop { display: none; }
  .detail-download__actions--mobile {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.625rem;
  }
}

@media (max-width: 479px) {
  .detail-download__qr { width: 150px; height: 150px; }
  .detail-download__qr img,
  .detail-download__qr canvas { width: 138px !important; height: 138px !important; }
  .detail-download__actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ------------------------------ 扫码弹窗（桌面端「获取地址」） ------------------------------ */

/* 铁律：本文件写了 display:flex 的元素若会切 hidden，必须同文件补 [hidden] 压制 */
.dl-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  /* 弹窗要始终落在「浏览器可视区」正中央：固定定位 + dvh 兼容移动端地址栏收缩 */
  height: 100vh;
  height: 100dvh;
}
.dl-modal[hidden] { display: none; }
.dl-modal__mask {
  position: fixed;
  inset: 0;
  background: hsl(220 30% 12% / 0.62);
}
.dl-modal__card {
  position: relative;
  width: min(46rem, 100%);
  max-height: calc(100vh - 2.5rem);
  max-height: calc(100dvh - 2.5rem);
  margin: auto;             /* 与 flex 居中双保险，任何情况下都居中 */
  overflow-y: auto;
  padding: 1.75rem 1.75rem 1.375rem;
  border-radius: 18px;
  background: #fff;
  color: #1f2430;
  text-align: center;
  scrollbar-width: none;          /* Firefox：隐藏弹窗内滚动条 */
  -ms-overflow-style: none;       /* 旧 Edge/IE */
}
.dl-modal__card::-webkit-scrollbar { display: none; }  /* Chrome/Safari */
.dl-modal__x {
  position: absolute;
  top: 0.875rem;
  right: 1rem;
  width: 2rem;
  height: 2rem;
  border: 0;
  background: none;
  font-size: 1.375rem;
  line-height: 1;
  color: #9aa1ad;
  cursor: pointer;
}
.dl-modal__x:hover { color: #1f2430; }
.dl-modal__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #1f2430;
}
.dl-modal__sub {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  line-height: 1.7;
  color: #6b7280;
}
.dl-modal__qr {
  width: 168px;
  height: 168px;
  margin: 1rem auto 0;
  display: grid;
  place-items: center;
  padding: 6px;
  background: #fff;
  border: 1px solid #eceef2;
  border-radius: 10px;
}
.dl-modal__qr img,
.dl-modal__qr canvas { display: block; width: 156px !important; height: 156px !important; border-radius: 4px; }
.dl-modal__hint {
  margin: 0.75rem 0 0;
  font-size: 0.8125rem;
  color: #9aa1ad;
}
/* 二维码（左）+ 夸克扫码演示图（右）两列布局 */
.dl-modal__body {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 1.125rem;
  text-align: center;
}
.dl-modal__qrbox { flex: 0 0 auto; }
.dl-modal__shot { flex: 0 0 auto; }
.dl-modal__shot img {
  display: block;
  width: 200px;
  height: auto;
  border-radius: 8px;
}
/* 温馨提示（浅蓝底信息条） */
.dl-modal__notice {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin-top: 1.375rem;
  padding: 0.875rem 1rem;
  border-radius: 8px;
  background: #f4f8ff;
  text-align: left;
}
.dl-modal__notice-ico { flex: 0 0 auto; color: #1a6dff; font-size: 0.9375rem; line-height: 1.7; }
.dl-modal__notice p { margin: 0; font-size: 0.8125rem; line-height: 1.7; color: #55617a; }
/* 手机端弹窗：恢复单列窄卡 */
@media (max-width: 767px) {
  .dl-modal__card { width: min(22rem, 100%); padding: 2.25rem 1.25rem 1.25rem; }
  .dl-modal__body { flex-direction: column; gap: 1rem; margin-top: 1rem; }
  .dl-modal__shot img { width: 180px; }
}
.dl-modal__closebtn {
  width: 100%;
  margin-top: 1.375rem;
  padding: 0.8125rem 1rem;
  border: 0;
  border-radius: 10px;
  background: #1a6dff;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.18s ease;
}
.dl-modal__closebtn:hover { background: #0d5ee6; }
body.dl-modal-open { overflow: hidden; }

/* ------------------------------ 支持一下（分享/点赞/收藏） ------------------------------ */

.detail-support {
  margin-top: 1rem;
  padding: 1.5rem 1rem 1.375rem;
  border: 1px dashed var(--border);
  border-radius: calc(var(--radius) + 4px);
  text-align: center;
}
.detail-support__tip {
  margin: 0 0 1.125rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}
.detail-support__actions {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 2.75rem;
}
.support-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 0.8125rem;
  color: var(--foreground);
}
.support-btn .icon {
  width: 1.375rem;
  height: 1.375rem;
  color: var(--muted-foreground);
  transition: color 0.15s, transform 0.15s;
}
.support-btn:hover .icon { color: var(--primary); transform: translateY(-2px); }
.support-btn .support-count {
  font-size: 0.75rem;
  line-height: 1;
  color: var(--muted-foreground);
}
.support-btn.js-like.is-liked .icon { color: hsl(355 90% 56%); fill: hsl(355 90% 56% / 0.25); }
.support-btn.js-like.is-liked .js-like-label { color: hsl(355 90% 56%); }
.support-btn.js-fav.is-faved .icon { color: hsl(38 92% 50%); fill: hsl(38 92% 50% / 0.3); }
.support-btn.js-fav.is-faved .js-fav-label { color: hsl(38 92% 50%); }

@media (max-width: 479px) {
  .detail-support { padding: 1.25rem 0.75rem 1.125rem; }
  .detail-support__actions { gap: 2.25rem; }
}

/* ------------------------------ 游戏截图 -------------------------------- */

.detail-shots { margin-top: 2rem; }

.detail-shots__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.5rem;
}

.detail-shot {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 2px);
  overflow: hidden;
  background: var(--muted);
  line-height: 0;
}
.detail-shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
/* 鼠标悬停不做放大：截图竖排后整块很大，缩放反而晕，点击仍有灯箱 */
.detail-shot:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

@media (max-width: 767px) {
  .detail-shots { margin-top: 1.5rem; }
  .detail-shots__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }
}

/* ---------------------------- 免责声明（截图下方） ----------------------- */

.detail-disclaimer {
  margin: 0.875rem 0 0;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 2px);
  background: var(--muted);
  font-size: 0.75rem;
  line-height: 1.75;
  color: hsl(220 9% 42%);
}

.detail-disclaimer__title {
  font-weight: 700;
  color: hsl(0 84% 50%);
}

html.dark .detail-disclaimer { color: hsl(220 9% 78% / 0.88); }

html.dark .detail-disclaimer__title { color: hsl(0 88% 66%); }

@media (max-width: 767px) {
  .detail-disclaimer {
    margin-top: 0.75rem;
    padding: 0.625rem 0.75rem;
    font-size: 0.6875rem;
    line-height: 1.7;
  }
}

/* ------------------- 详情页两栏：竖排截图 + 正文 | 随机展示 ---------------- */

.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  margin-top: 1.75rem;
}

.detail-main { min-width: 0; }

@media (min-width: 1024px) {
  .detail-layout {
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: 1.75rem;
    align-items: start;
  }

  /* 截图竖排后页面很长，右栏跟随滚动 */
  .detail-aside {
    position: sticky;
    top: 5rem;
  }
}

/* 竖排截图：一行一张，铺满主栏；紧接游戏简介之后 */
.detail-shots--stack { margin-top: 1.75rem; }

.detail-shots__stack {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.detail-shots__stack .detail-shot {
  border-radius: calc(var(--radius) + 4px);
  box-shadow: var(--shadow-sm);
}

/* 「猜你喜欢」：横向滑动轨道，封面铺满 + 底部叠字，悬停换行（参照参考站「相关推荐」） */
.detail-related { margin-top: 1rem; }

/* 轨道容器：左右箭头叠在轨道两端、竖直居中（桌面显示） */
.pick-wrap { position: relative; }

.pick-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: hsl(220 25% 8% / 0.38);
  color: #fff;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.2s ease, background 0.2s ease;
}

.pick-arrow:hover { opacity: 1; background: hsl(220 25% 8% / 0.62); }
.pick-arrow:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.pick-arrow.is-off { opacity: 0; pointer-events: none; }
.pick-arrow--prev { left: 0.5rem; }
.pick-arrow--next { right: 0.5rem; }

@media (min-width: 1024px) and (hover: hover) {
  .pick-arrow { display: flex; }
}

/* 轨道可鼠标拖拽（配合惯性），触屏走原生滑动 */
.pick-rail {
  display: flex;
  gap: 0.375rem;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.pick-rail.is-dragging { cursor: grabbing; }
.pick-rail img { -webkit-user-drag: none; }
.pick-rail::-webkit-scrollbar { display: none; }

.pick-card {
  position: relative;
  display: block;
  flex: 0 0 auto;
  /* 一屏正好 4 张整卡：容器宽减去 3 个 gap 再四等分，避免第 4 张被切一半 */
  width: calc((100% - 1.125rem) / 4);
  aspect-ratio: 10 / 7;
  border-radius: calc(var(--radius) + 2px);
  overflow: hidden;
  background: var(--muted);
  isolation: isolate;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease;
}

.pick-card:hover { box-shadow: var(--shadow-md); }
.pick-card:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

@media (max-width: 767px) {
  /* 手机一屏 2 张整卡（不再露出半张） */
  .pick-card { width: calc((100% - 0.375rem) / 2); }
}

.pick-card__cover,
.pick-card__cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pick-card__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    hsl(220 25% 6% / 0) 38%,
    hsl(220 25% 6% / 0.5) 68%,
    hsl(220 25% 6% / 0.86) 100%
  );
}

/* 叠字层：默认只露单行标题，悬停/聚焦时上滑换成「标题 + 时间 + 浏览量」 */
.pick-card__text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.4rem 0.5rem;
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.35;
  text-shadow: 0 1px 2px hsl(0 0% 0% / 0.6);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.pick-card__text--front {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pick-card__text--back {
  opacity: 0;
  transform: translateY(100%);
}

.pick-card__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pick-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.2rem;
  font-size: 0.6875rem;
  font-weight: 400;
  opacity: 0.82;
}

.pick-card__views {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
}

.pick-card:hover .pick-card__text--front,
.pick-card:focus-visible .pick-card__text--front {
  opacity: 0;
  transform: translateY(100%);
}

.pick-card:hover .pick-card__text--back,
.pick-card:focus-visible .pick-card__text--back {
  opacity: 1;
  transform: translateY(0);
}

/* 触屏没有 hover，直接把「加长标题 + 时间/浏览量」常显 */
@media (hover: none) {
  .pick-card__text--front { display: none; }
  .pick-card__text--back { opacity: 1; transform: none; }
}

@media (max-width: 639px) {
  .pick-card__text { font-size: 0.75rem; padding: 0.35rem 0.45rem; }
  .pick-card__meta { font-size: 0.625rem; }
}

/* ------ 右栏「随机展示」卡片 ------ */

.rec-card {
  background: var(--card);
  border: 1px solid hsl(220 6% 88% / 0.6);
  border-radius: calc(var(--radius) + 4px);
  padding: 1rem;
  box-shadow: var(--shadow-sm);
}

html.dark .rec-card { border-color: hsl(220 8% 24% / 0.8); }

.rec-card__head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.75rem;
}

.rec-card__head .section-head__bar { height: 1.125rem; }

.rec-card__head h2 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--foreground);
}

.rec-list {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.rec-item a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.1875rem;
  border-radius: var(--radius);
  transition: background 0.15s ease;
}

.rec-item a:hover { background: var(--muted); }

.rec-item__thumb {
  flex: 0 0 auto;
  width: 7.25rem;
  aspect-ratio: 16 / 9;
  border-radius: calc(var(--radius) - 2px);
  overflow: hidden;
  background: var(--muted);
  line-height: 0;
}

.rec-item__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rec-item__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.rec-item__title {
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--foreground);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rec-item__meta {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem;
  color: var(--muted-foreground);
}

.rec-item__views {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
}

/* 截图灯箱 */
.shotbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: hsl(220 25% 6% / 0.88);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.shotbox.is-open { opacity: 1; pointer-events: auto; }
.shotbox img {
  max-width: min(1100px, 100%);
  max-height: 88vh;
  width: auto;
  height: auto;
  border-radius: calc(var(--radius) + 2px);
  box-shadow: 0 24px 60px hsl(220 25% 6% / 0.5);
}
.shotbox__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  font-size: 1.5rem;
  line-height: 1;
  color: #fff;
  background: hsl(0 0% 100% / 0.14);
  border-radius: 9999px;
}
.shotbox__close:hover { background: hsl(0 0% 100% / 0.24); }

/* --------------------------------- FAQ ---------------------------------- */

.faq-list { display: grid; gap: 0.75rem; margin: 1.5rem 0 3rem; }

.faq-item {
  background: var(--card);
  border: 1px solid hsl(220 6% 88% / 0.6);
  border-radius: calc(var(--radius) + 4px);
  overflow: hidden;
}

.faq-item__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  text-align: left;
  padding: 1rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
}

.faq-item__q .icon { transition: transform 0.25s; color: var(--muted-foreground); }
.faq-item.is-open .faq-item__q .icon { transform: rotate(180deg); color: var(--primary); }

.faq-item__a {
  display: none;
  padding: 0 1.25rem 1.25rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
  line-height: 1.8;
}

.faq-item.is-open .faq-item__a { display: block; }

/* ------------------------------ 搜索结果页 ------------------------------- */

.search-hero {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  padding: 1.5rem 0;
}

.search-hero h1 { font-size: 1.25rem; font-weight: 700; }
.search-hero p { font-size: 0.875rem; color: var(--muted-foreground); margin-top: 0.25rem; }

/* 模糊匹配提示：精确搜索无结果、按关键词兜底命中时显示 */
.search-fuzzy-hint {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--primary);
  background: rgba(244, 42, 59, 0.12);
  vertical-align: middle;
}

/* 搜索结果页的相关推荐：与上方结果用一条细线隔开 */
.search-related {
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
}
.search-related .section-head { margin-bottom: 1rem; }

/* ------------------------------ 文章内容样式 ----------------------------- */

.entry-content { font-size: 0.9375rem; line-height: 1.9; }
.entry-content p { margin-bottom: 1rem; }
.entry-content img { border-radius: calc(var(--radius) + 2px); }

/* -------------------------------- 响应式微调 ---------------------------- */

.desktop-only { display: none; }

@media (min-width: 768px) {
  .desktop-only { display: inline-flex; }
  .mobile-only { display: none !important; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 767px) {
  .hero__search input { height: 3rem; font-size: 0.875rem; padding-right: 5.5rem; }
  .hero__search button[type='submit'] { height: 2.5rem; padding: 0 1rem; font-size: 0.75rem; }
  .hero__hot { margin-top: 1rem; }
  .quick-entry { padding: 0.875rem; gap: 0.625rem; }
  .quick-entry__label { font-size: 0.8125rem; }
  .section-head h2 { font-size: 1.125rem; }
  .floating-actions { right: 1rem; bottom: 1rem; }
}

/* ------------------------- 移动端滚动性能优化 --------------------------- */
/* backdrop-filter（毛玻璃）在手机 GPU 上需要每帧重新采样背景：
   - 吸顶页头是常驻固定层，滚动时逐帧重算 → 上下滑动明显掉帧、卡顿；
   - 详情页 .detail-card::before 覆盖大半个内容区，滚动时同样逐帧重算。
   窄屏下改为不透明/高不透明度纯色底，观感几乎一致但零逐帧开销。 */
@media (max-width: 767px) {
  .site-header,
  html.dark .site-header {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .site-header { background: hsl(0 0% 97%); }
  html.dark .site-header { background: hsl(220 9% 10%); }

  .hero__search input {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: hsl(0 0% 100% / 0.97);
  }

  .hero__hot a {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: hsl(0 0% 100% / 0.95);
  }

  .detail-card::before {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ------------------------- 移动端底部导航（mbar） ------------------------- */

.mbar {
  display: none;
}

.mbar-sheet {
  display: none;
}

@media (max-width: 767px) {
  /* 给固定底栏留出空间，页脚版权不被遮挡；刘海屏/手势条再加安全区 */
  body {
    padding-bottom: calc(3.75rem + env(safe-area-inset-bottom, 0px));
  }

  .floating-actions {
    bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
  }

  .mbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding: 0.375rem 0.25rem calc(0.375rem + env(safe-area-inset-bottom, 0px));
    background: hsl(0 0% 100% / 0.97);
    border-top: 1px solid var(--border);
    box-shadow: 0 -1px 2px hsl(220 43% 11% / 0.04);
  }

  .mbar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    padding: 0.25rem 0;
    border-radius: var(--radius);
    font-size: 0.6875rem;
    line-height: 1.2;
    color: var(--muted-foreground);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }

  .mbar__icon {
    width: 1.375rem;
    height: 1.375rem;
  }

  .mbar__item.is-active,
  .mbar__item:active {
    color: var(--primary);
    font-weight: 600;
  }

  /* 「更多」底部弹层 */
  .mbar-sheet {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 210;
  }

  /* 关键：类选择器的 display 会盖掉 HTML hidden 属性的默认 display:none，
     收起时必须显式隐藏，否则这层全屏遮罩会吃掉整页点击（2026-10-15 事故） */
  .mbar-sheet[hidden] { display: none; }

  /* 兜底：未展开时遮罩不接收点击 */
  .mbar-sheet:not(.is-open) .mbar-sheet__mask { pointer-events: none; }

  .mbar-sheet__mask {
    position: absolute;
    inset: 0;
    background: hsl(220 43% 11% / 0.45);
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  .mbar-sheet__panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
    background: var(--card);
    border-radius: 1rem 1rem 0 0;
    box-shadow: var(--shadow-2xl);
    transform: translateY(100%);
    transition: transform 0.22s ease;
  }

  .mbar-sheet.is-open .mbar-sheet__mask {
    opacity: 1;
  }

  .mbar-sheet.is-open .mbar-sheet__panel {
    transform: translateY(0);
  }

  .mbar-sheet__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
  }

  .mbar-sheet__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 0.75rem 0.25rem;
    border-radius: var(--radius);
    background: var(--muted);
    color: var(--foreground);
    font-size: 0.75rem;
    text-decoration: none;
  }

  .mbar-sheet__icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--primary);
  }

  .mbar-sheet__top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    width: 100%;
    margin-top: 0.75rem;
    padding: 0.625rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: transparent;
    color: var(--muted-foreground);
    font-size: 0.8125rem;
  }
}

/* 深色模式：底栏与弹层跟随（统一 html.dark 前缀） */
html.dark .mbar {
  background: hsl(220 9% 10% / 0.97);
  border-top-color: hsl(220 8% 20% / 0.7);
}

/* 深色下未选中项提亮（全局 muted-foreground 65% 在深底上偏灰） */
html.dark .mbar__item {
  color: hsl(220 8% 82%);
}

html.dark .mbar-sheet__panel {
  background: hsl(220 9% 12%);
}

html.dark .mbar-sheet__mask {
  background: hsl(0 0% 0% / 0.6);
}

html.dark .mbar-sheet__link {
  background: hsl(220 8% 20% / 0.7);
  color: hsl(0 0% 92%);
}

/* ------------------------- 普通页面（welcome 等） ------------------------ */
/* 版式向游戏详情页看齐：渐层 Hero + 正文卡片 | 右栏随机展示 + 猜你喜欢轨道 */

.page-hero-band {
  position: relative;
  margin-top: 1rem;
  padding: 2.25rem 0 2rem;
  overflow: hidden;
  border-radius: calc(var(--radius) + 6px);
  border: 1px solid var(--border);
  background:
    radial-gradient(120% 140% at 0% 0%, hsl(355 90% 56% / 0.16) 0%, transparent 55%),
    radial-gradient(110% 120% at 100% 0%, hsl(262 83% 58% / 0.14) 0%, transparent 52%),
    linear-gradient(180deg, var(--card) 0%, var(--background) 100%);
}

.page-hero-band__glow {
  position: absolute;
  right: -6rem;
  top: -7rem;
  width: 20rem;
  height: 20rem;
  border-radius: 9999px;
  background: radial-gradient(circle, hsl(355 90% 56% / 0.22), transparent 68%);
  filter: blur(6px);
  pointer-events: none;
}

.page-hero-band__inner { position: relative; }

html.dark .page-hero-band {
  background:
    radial-gradient(120% 140% at 0% 0%, hsl(355 90% 62% / 0.18) 0%, transparent 55%),
    radial-gradient(110% 120% at 100% 0%, hsl(262 83% 68% / 0.16) 0%, transparent 52%),
    linear-gradient(180deg, var(--card) 0%, var(--background) 100%);
}

.page-crumb {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  flex-wrap: wrap;
}

.page-crumb .crumb-link { color: var(--muted-foreground); }
.page-crumb .crumb-link:hover { color: var(--primary); }
.page-crumb .crumb-sep { display: inline-flex; opacity: 0.6; }
.page-crumb__cur { color: var(--foreground); font-weight: 600; }

.page-hero-band__title {
  margin-top: 0.75rem;
  font-size: 1.625rem;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--foreground);
}

.page-hero-band__sub {
  margin-top: 0.5rem;
  max-width: 44rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--muted-foreground);
}

.page-hero-band__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.page-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.3125rem 0.6875rem;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: hsl(0 0% 100% / 0.6);
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.page-meta-chip .icon { color: var(--primary); }

html.dark .page-meta-chip { background: hsl(220 8% 24% / 0.5); }

@media (min-width: 768px) {
  .page-hero-band__title { font-size: 2rem; }
  .page-hero-band { padding: 2.75rem 0 2.5rem; }
}

.page-body { padding-bottom: 3rem; }

/* 正文卡片：白底圆角，与详情页正文块同气质 */
.page-content-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 6px);
  padding: 1.5rem 1.25rem;
  box-shadow: var(--shadow-sm);
  font-size: 0.9375rem;
  line-height: 1.9;
  color: var(--card-foreground);
}

.page-content-card > :first-child { margin-top: 0; }
.page-content-card > :last-child { margin-bottom: 0; }
.page-content-card p { margin: 0 0 1rem; }

.page-content-card ul,
.page-content-card ol {
  margin: 0 0 1rem;
  padding-left: 0;
  list-style: none;
}

.page-content-card li {
  position: relative;
  padding-left: 1.375rem;
  margin-bottom: 0.625rem;
}

.page-content-card li::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 0.72em;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  background: var(--primary);
}

.page-content-card strong { color: var(--foreground); font-weight: 700; }

.page-content-card a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }

@media (min-width: 768px) {
  .page-content-card { padding: 2rem 2.25rem; font-size: 1rem; }
}

/* welcome 页群二维码：限宽居中，扫码够用即可 */
.xg-qr-figure { width: 15rem; margin: 1.25rem 0 1.5rem; padding-left: 1.375rem; } /* 左缘与列表圆点对齐 */
.xg-qr-figure img { display: block; width: 100%; height: auto; border-radius: calc(var(--radius) + 4px); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }

/* 标题右侧「查看全部」链接 */
.section-head__more {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  transition: color 0.15s ease;
}

.section-head__more:hover { color: var(--primary); }

/* -------- 安全网：带 hidden 属性的元素一律不显示 --------
   本表多处给同类元素写了 display，会把 HTML hidden 的默认 display:none 盖掉，
   造成「不可见的全屏遮罩吃掉整页点击」这类事故（2026-10-15 mbar-sheet）。
   该规则放在文件末尾，同优先级下后声明者胜出。 */
[hidden] { display: none; }

/* 「热门推荐」标题后的快捷入口：进站宝箱 / 游戏盲盒 */
#hot .section-head__title{flex-wrap:wrap;row-gap:8px}
.hot-chip{display:inline-flex;align-items:center;gap:9px;padding:5px 15px 5px 5px;border:1px solid #e2e8f4;border-radius:13px;background:#fff;font-size:15.5px;font-weight:800;color:#1d2b3f;text-decoration:none;white-space:nowrap}
.hot-chip:hover{box-shadow:0 4px 14px rgba(37,99,235,.12)}
.hot-chip__icon{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#60a5fa,#2563eb);display:inline-flex;align-items:center;justify-content:center;color:#fff;flex:0 0 auto}
.hot-chip__icon .icon{width:18px;height:18px}
@media(max-width:768px){
  .hot-chip{padding:4px 11px 4px 4px;font-size:13px;gap:7px;border-radius:11px}
  .hot-chip__icon{width:27px;height:27px;border-radius:8px}
  .hot-chip__icon .icon{width:14px;height:14px}
}

/* 游戏盲盒入口卡（详情页 + 普通页面右栏共用；原内联于 single-game.php，2026-10-21 迁入） */
.gacha-entry{display:block;margin-top:1rem;padding:18px;border:1px solid #d7e7fd;border-radius:18px;background:linear-gradient(115deg,#eaf3ff 0%,#f4f9ff 46%,#eef6ff 100%);text-decoration:none;color:#1d2b3f;box-shadow:0 8px 26px rgba(37,99,235,.07);transition:border-color .15s,box-shadow .15s;position:relative;overflow:hidden}
.gacha-entry:hover{border-color:#9fc4fb;box-shadow:0 10px 30px rgba(37,99,235,.13)}
.gacha-entry::after{content:"";position:absolute;right:-40px;top:-60px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(37,99,235,.10),transparent 68%);pointer-events:none}
.gacha-entry__brandrow{display:flex;align-items:center;gap:12px;margin-bottom:12px;position:relative;z-index:1}
.gacha-entry__brand{font-size:18px;font-weight:800;color:#1d2b3f}
.gacha-entry__icon{display:flex;width:48px;height:48px;border-radius:14px;background:#fff;border:1px solid #dbe9fd;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(37,99,235,.10);position:relative;z-index:1}
.gacha-entry__stack{position:relative;width:24px;height:28px}
.gacha-entry__stack b{position:absolute;width:20px;height:26px;border-radius:4px;border:2px solid #2563eb;background:#fff;display:block}
.gacha-entry__stack b:nth-child(1){left:0;top:2px;transform:rotate(-9deg);opacity:.45}
.gacha-entry__stack b:nth-child(2){left:2px;top:1px;transform:rotate(3deg);opacity:.75}
.gacha-entry__stack b:nth-child(3){left:4px;top:0;background:#2563eb;display:flex;align-items:center;justify-content:center}
.gacha-entry__stack .icon{width:11px;height:11px;color:#fff}
.gacha-entry__k{display:inline-flex;align-items:center;font-size:11px;color:#2563eb;background:#fff;border:1px solid #d7e7fd;border-radius:999px;padding:3px 10px;margin-bottom:8px;position:relative;z-index:1}
.gacha-entry__t{display:block;font-size:18px;font-weight:800;margin-bottom:6px;position:relative;z-index:1;line-height:1.3}
.gacha-entry__d{display:block;font-size:12.5px;color:#5a6b82;line-height:1.6;position:relative;z-index:1}
.gacha-entry__go{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;background:#2563eb;color:#fff;border-radius:12px;padding:12px 18px;font-size:14px;font-weight:700;box-shadow:0 6px 18px rgba(37,99,235,.28);position:relative;z-index:1}
.gacha-entry:hover .gacha-entry__go{background:#1d4fd8}

/* ---------------- 多渠道下载弹窗 + 手机端渠道按钮竖排（2026-10-26） ---------------- */
.dl-modal__sub--tip { margin-top: -0.35rem; font-size: 0.8125rem; color: #6b7280; }
.dl-modal__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 4rem;
  margin: 1.125rem 0 1.25rem;
}
.dl-modal__channel { display: grid; justify-items: center; gap: 0.875rem; min-width: 0; }
.dl-modal__ch-name { font-weight: 700; font-size: 1.0625rem; color: #1f2430; }
.dl-modal__channel--quark .dl-modal__ch-name { color: #2f6bff; }
.dl-modal__channel--mobile .dl-modal__ch-name { color: #0aa0a8; }
.dl-modal__channel--thunder .dl-modal__ch-name { color: #6c5ce7; }
.dl-modal__grid .dl-modal__qr { width: 156px; height: 156px; }
.dl-modal__ch-desc { font-size: 0.75rem; color: #6b7280; }
/* 手机端：渠道按钮一个一个竖排（压过同特异性 --mobile 的 flex）
   注意：这里【不能】写不限断点的 display，否则会盖掉基础规则 .detail-download__actions{display:none}，
   导致桌面端也显示手机按钮（2026-10-26 踩过）。只在 767px 内定义。 */
@media (max-width: 767px) {
  /* 显式 1fr 轨道：auto 轨道遇 width:100% 子项会循环解析停在内容宽，必须显式列 */
  .detail-download__actions--stack { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 0.625rem; width: 100%; }
  .detail-download__actions--stack .btn { justify-content: center; }
}

/* ---------------- 详情页收藏/加群提示条（2026-10-27） ---------------- */
.detail-favbar {
  margin: 0.375rem 0 1rem;
  padding: 0.875rem 1.125rem;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 4px);
  background: linear-gradient(135deg, hsl(355 90% 56% / 0.05), hsl(210 90% 56% / 0.06));
  color: var(--muted-foreground);
  font-size: 0.8125rem;
  line-height: 1.8;
}
.detail-favbar__text { margin: 0; }
.detail-favbar__text strong { color: #d46b08; font-weight: 700; }
.detail-favbar__arrow { display: inline-flex; vertical-align: -2px; margin: 0 0.125rem; color: #d46b08; }
.detail-favbar__arrow .icon-sm { width: 1em; height: 1em; }
html.dark .detail-favbar__arrow { color: hsl(28 95% 62%); }
html.dark .detail-favbar {
  background: linear-gradient(135deg, hsl(355 90% 62% / 0.12), hsl(210 90% 62% / 0.13));
}
html.dark .detail-favbar__text strong { color: hsl(28 95% 62%); }
.detail-favbar__btn {
  display: inline-block;
  margin: 0 0.375rem;
  padding: 0.125rem 0.75rem;
  border-radius: 999px;
  background: #12b7f5;
  color: #fff !important;
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: none;
  vertical-align: 1px;
  transition: background 0.15s ease;
}
.detail-favbar__btn:hover { background: #0e9dd6; }

/* 游戏加速时长按钮：形状/字号/圆角与「点击加群」完全一致，只保留自己的配色（2026-11-01） */
.detail-favbar__btn--accel {
  background: linear-gradient(135deg, #ff5c5c, #f5222d);
  box-shadow: 0 2px 6px hsl(355 85% 55% / 0.35);
}
.detail-favbar__btn--accel:hover {
  background: linear-gradient(135deg, #f5222d, #cf1322);
}


/* ---------------- 手机游戏列表页（安卓/苹果切换，2026-10-29） ---------------- */
.mlist-intro { margin-bottom: 1.25rem; }
.mlist__tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.mlist__tab {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 1.2rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted-foreground);
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s ease;
}
.mlist__tab:hover { border-color: #12b7f5; color: #12b7f5; }
.mlist__tab.is-active { background: #12b7f5; border-color: #12b7f5; color: #fff; }
.mlist__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 1rem; }
@media (max-width: 767px) {
  .mlist__grid { grid-template-columns: minmax(0, 1fr); }
}
.mlist-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  min-width: 0;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.mlist-item:hover { border-color: #12b7f5; box-shadow: 0 2px 10px hsl(197 90% 50% / 0.14); }
.mlist-item__badge {
  flex: none;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
}
.mlist-item__badge--android { color: var(--success); background: hsl(130 54% 42% / 0.14); }
.mlist-item__badge--ios { color: hsl(220 9% 35%); background: hsl(220 10% 50% / 0.16); }
.mlist-item__badge--both { color: #0e9dd6; background: hsl(197 90% 50% / 0.15); }
html.dark .mlist-item__badge--ios { color: hsl(220 10% 78%); }
.mlist-item__date { flex: none; font-size: 0.75rem; color: var(--muted-foreground); }
.mlist-item__date--today { color: #e11d48; font-weight: 700; }
.mlist-item__title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--foreground);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
}
.mlist-item__title:hover { color: #12b7f5; }
.mlist-item__btn {
  flex: none;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  border: 0;
  background: #3b82f6;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease;
}
.mlist-item__btn:hover { background: #2563eb; }
.mlist-item__btn.is-off { background: hsl(220 10% 55% / 0.4); cursor: default; }
.mlist__empty {
  padding: 2.75rem 1rem;
  text-align: center;
  color: var(--muted-foreground);
  border: 1px dashed var(--border);
  border-radius: 12px;
}

/* 手机游戏详情页占位封面：游戏名 + 苹果/安卓徽标（无封面图时回退） */
.mcover {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  width: 100%;
  height: 100%;
  min-height: 240px;
  padding: 1.5rem;
  text-align: center;
  background: linear-gradient(135deg, hsl(45 90% 96%), hsl(35 80% 90%));
}
html.dark .mcover {
  background: linear-gradient(135deg, hsl(45 15% 16%), hsl(35 12% 11%));
}
.mcover__name {
  font-size: clamp(1.375rem, 3.2vw, 2.25rem);
  font-weight: 800;
  color: var(--foreground);
  line-height: 1.25;
  word-break: break-word;
}
.mcover__badge {
  padding: 0.25rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 700;
  border-radius: 999px;
}
.mcover__badge--ios { color: hsl(220 9% 35%); background: hsl(220 10% 50% / 0.16); }
.mcover__badge--android { color: var(--success); background: hsl(130 54% 42% / 0.14); }
.mcover__badge--both { color: #0e9dd6; background: hsl(197 90% 50% / 0.15); }
html.dark .mcover__badge--ios { color: hsl(220 10% 78%); }
.mcover-chip { font-weight: 700; }
.mcover-chip--ios { color: hsl(220 9% 35%); background: hsl(220 10% 50% / 0.16); }
.mcover-chip--android { color: var(--success); background: hsl(130 54% 42% / 0.14); }
.mcover-chip--both { color: #0e9dd6; background: hsl(197 90% 50% / 0.15); }
html.dark .mcover-chip--ios { color: hsl(220 10% 78%); }
/* 卡片内紧凑版（game-card 16:9 小封面） */
.game-card__cover .mcover {
  min-height: 0;
  gap: 0.375rem;
  padding: 0.75rem;
}
.game-card__cover .mcover__name {
  font-size: 1.0625rem;
  font-weight: 700;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.game-card__cover .mcover__badge {
  font-size: 0.6875rem;
  padding: 0.125rem 0.5rem;
}

/* ---------------- PC 游戏列表：分类栏靠左 + 卡片 5 列（2026-11-01） ---------------- */
@media (min-width: 1200px) {
  body.post-type-archive-game .container {
    max-width: 88rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  body.post-type-archive-game .game-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.75rem;
  }
}

/* ---------------- 手机端：提示条两个按钮缩小（2026-11-01） ---------------- */
@media (max-width: 767px) {
  .detail-favbar {
    padding: 0.8125rem 0.9375rem;
    font-size: 0.78125rem;
    line-height: 1.9;
  }
  .detail-favbar__btn {
    margin: 0 0.25rem;
    padding: 0.0625rem 0.625rem;
    font-size: 0.75rem;
    line-height: 1.6;
    vertical-align: 1px;
  }
}

/* ---------------- 首页热门推荐：桌面 5 列 × 4 行 = 20 个（2026-11-01） ---------------- */
@media (min-width: 1200px) {
  #hot-content .game-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}