@charset "UTF-8";
/* ==========================================================================
   游匣补给站 · 基础层 base.css
   重置、设计令牌、两端共用的通用组件。
   由 preview/assets/preview.css 移植，选择器与 parts/*.php 的类名一一对应。
   ========================================================================== */

/* ==========================================================================
   设计令牌
   与 theme.json 的预设一一对应：优先读 --wp--preset--color--*，
   取不到时退回硬编码默认值。后台换主题色后，class-assets.php 会再注入一层覆盖。
   ========================================================================== */
:root {
	--brand: var(--wp--preset--color--brand, #6c5ce7);
	--brand-2: var(--wp--preset--color--brand-2, #4a7dff);
	--brand-soft: var(--wp--preset--color--brand-soft, #efecff);
	--accent: var(--wp--preset--color--accent, #ff6b57);
	--accent-soft: var(--wp--preset--color--accent-soft, #ffece8);
	--update-red: var(--wp--preset--color--update, #ff3b30);
	--ok: var(--wp--preset--color--ok, #14b87a);
	--warn: var(--wp--preset--color--warn, #d97706);

	--ink: var(--wp--preset--color--ink, #141826);
	--ink-2: var(--wp--preset--color--ink-2, #4a5162);
	--ink-3: var(--wp--preset--color--ink-3, #8a90a2);
	--ink-4: var(--wp--preset--color--ink-4, #b6bbc9);
	--line: var(--wp--preset--color--line, #ebedf3);
	--line-2: var(--wp--preset--color--line-2, #f3f4f8);
	--bg: var(--wp--preset--color--bg, #f4f5f9);
	--card: var(--wp--preset--color--card, #ffffff);

	--r-xs: 8px;
	--r-s: 12px;
	--r-m: 16px;
	--r-l: 22px;
	--r-xl: 28px;
	--r-full: 999px;

	--sh-1: 0 2px 8px rgba(20, 24, 38, 0.05);
	--sh-2: 0 6px 24px rgba(20, 24, 38, 0.07);
	--sh-3: 0 16px 48px rgba(20, 24, 38, 0.12);
	--sh-brand: 0 10px 30px rgba(108, 92, 231, 0.28);

	--grad-brand: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
	--grad-warm: linear-gradient(135deg, #ff8a5b 0%, #ff5c8a 100%);
	--grad-cool: linear-gradient(135deg, #22d3ee 0%, #4a7dff 100%);
	--grad-ink: linear-gradient(135deg, #2b3350 0%, #171c2e 100%);
	--grad-gold: linear-gradient(135deg, #ffbc1f 0%, #ff7a00 100%);
	--grad-ok: linear-gradient(135deg, #14b87a 0%, #0ea5a5 100%);
	--grad-rose: linear-gradient(135deg, #ff8a5b 0%, #ff5c8a 100%);
	--grad-violet: linear-gradient(135deg, #a855f7 0%, #6366f1 100%);
	--grad-cyan: linear-gradient(135deg, #22d3ee 0%, #0ea5e9 100%);

	--font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
		"Microsoft YaHei", "Source Han Sans SC", "Noto Sans SC", system-ui, sans-serif;
	--font-num: "SF Mono", ui-monospace, Menlo, Consolas, monospace;

	--tabbar-safe: env(safe-area-inset-bottom);
}

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

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

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.01em; }

/* 占位缩略图（无需外部图片资源） */
.thumb {
  position: relative;
  overflow: hidden;
  background: var(--grad-brand);
  border-radius: var(--r-m);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 26px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  flex: none;
}

.thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 78% 18%, rgba(255, 255, 255, 0.35), transparent 55%);
}

/* 标签 / 角标 */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  background: var(--brand-soft);
  color: var(--brand);
  white-space: nowrap;
}

.badge-accent { background: var(--accent-soft); color: var(--accent); }

.badge-solid { background: var(--grad-brand); color: #fff; }

.badge-glass {
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  backdrop-filter: blur(8px);
}

.meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-3);
}

.meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-4); }

.chip {
  flex: none;
  height: 32px;
  padding: 0 14px;
  border-radius: var(--r-full);
  background: #fff;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  box-shadow: var(--sh-1);
  transition: 0.18s;
}

.chip.is-active {
  background: var(--grad-brand);
  color: #fff;
  box-shadow: var(--sh-brand);
}

/* 区块标题 */
.sec-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 16px 10px;
}

.sec-head h2 { font-size: 16px; }

.sec-head .more { margin-left: auto; font-size: 12px; color: var(--ink-3); }

.sec-head .bar {
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: var(--grad-brand);
  align-self: center;
}

.hero-card .cover .badge { position: absolute; top: 12px; left: 12px; }

.hero-card .meta { justify-content: space-between; }

.btn {
  height: 36px;
  padding: 0 16px;
  border-radius: var(--r-full);
  background: var(--grad-brand);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: var(--sh-brand);
  white-space: nowrap;
}

.btn:active { transform: scale(0.96); }

.btn-ghost {
  background: #fff;
  color: var(--brand);
  box-shadow: inset 0 0 0 1px #e4e0ff;
}

.btn-block { width: 100%; justify-content: center; height: 46px; font-size: 15px; border-radius: var(--r-m); }

.btn-lg { height: 48px; padding: 0 26px; font-size: 15px; }

/* 列表分隔标题 */
.strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 16px 10px;
  font-size: 15px;
  font-weight: 700;
}

.strip .line { flex: 1; height: 1px; background: var(--line); }

.strip .fire { color: var(--accent); }

.dl-panel .row .btn {
  flex: 1;
  justify-content: center;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.dl-panel .row .btn.solid { background: #fff; color: var(--brand); box-shadow: none; }

/* 标签 */
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }

.tag {
  height: 28px;
  padding: 0 12px;
  border-radius: var(--r-full);
  background: #fff;
  color: var(--ink-2);
  font-size: 12.5px;
  display: inline-flex;
  align-items: center;
  box-shadow: var(--sh-1);
}

.tag::before { content: "#"; color: var(--ink-4); margin-right: 1px; }

.rel-item .thumb { width: 64px; height: 48px; border-radius: var(--r-s); font-size: 18px; }

.rel-item .meta { font-size: 11px; margin-top: 4px; }

/* --- 加载 / 刷新反馈 --- */
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px 0 6px;
  font-size: 12.5px;
  color: var(--ink-3);
}

.spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--line);
  border-top-color: var(--brand);
  animation: spin 0.7s linear infinite;
}

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

.end-note { text-align: center; font-size: 12px; color: var(--ink-4); padding: 22px 0 6px; }

/* 标签（小字号胶囊） */
.tag-mini-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }

.tag-mini {
  font-size: 11px;
  line-height: 1;
  color: var(--ink-2);
  background: #fff;
  padding: 6px 10px;
  border-radius: var(--r-full);
  box-shadow: var(--sh-1);
}

.tag-mini::before { content: "#"; color: var(--ink-4); margin-right: 1px; }

/* 内容区块 */
.blk {
  margin-top: 16px;
  padding: 16px;
  background: #fff;
  border-radius: var(--r-l);
  box-shadow: var(--sh-1);
}

.blk > h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14.5px;
  margin-bottom: 13px;
}

.blk > h2::before {
  content: "";
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: var(--grad-brand);
  flex: none;
}

.blk > h2 .tag-src {
  margin-left: auto;
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-4);
  background: var(--bg);
  padding: 3px 8px;
  border-radius: var(--r-full);
}

.blk .free-text { font-size: 14px; line-height: 1.85; color: var(--ink-2); }

.mtabs { display: flex; gap: 8px; padding: 0 16px 12px; }

.mtab {
  flex: 1;
  height: 36px;
  border-radius: var(--r-full);
  background: #fff;
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: var(--sh-1);
  transition: 0.18s;
}

.mtab.on { background: var(--grad-brand); color: #fff; box-shadow: var(--sh-brand); }

.mtab .n { font-family: var(--font-num); font-size: 11px; opacity: 0.72; }

.mtab-panel { display: none; }

.mtab-panel.on { display: block; }

/* ==========================================================================
   自定义页面（赞助 / 常见问题）：内容来自后台自定义 HTML
   ========================================================================== */
.custom-hero {
  padding: 26px 16px 22px;
  background: var(--grad-brand);
  color: #fff;
}

.custom-hero .kk {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.28);
  padding: 3px 10px;
  border-radius: var(--r-full);
  margin-bottom: 12px;
}

.custom-hero h1 { font-size: 22px; margin-bottom: 9px; letter-spacing: -0.01em; }

.custom-hero p { font-size: 12.5px; line-height: 1.7; opacity: 0.88; }

.custom-body { padding: 16px; }

.rich { font-size: 14px; line-height: 1.85; color: var(--ink-2); }

.rich > * + * { margin-top: 12px; }

.rich h2 {
  font-size: 16px;
  color: var(--ink);
  margin-top: 22px;
  padding-left: 11px;
  position: relative;
  line-height: 1.5;
}

.rich h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  width: 3px;
  border-radius: 2px;
  background: var(--grad-brand);
}

.rich h3 { font-size: 14.5px; color: var(--ink); margin-top: 16px; }

.rich p { font-size: 14px; line-height: 1.85; }

.rich ul, .rich ol { padding-left: 20px; list-style: disc; }

.rich ol { list-style: decimal; }

.rich li { font-size: 14px; line-height: 1.9; }

.rich a { color: var(--brand); font-weight: 600; }

.rich img, .rich .fig { border-radius: var(--r-m); width: 100%; display: grid; place-items: center; font-size: 34px; }

.rich .note {
  padding: 12px 14px;
  border-radius: var(--r-m);
  background: var(--bg);
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.75;
}

.rich .note.warn { background: #fff6e6; color: #a1600a; }

.rich code {
  font-family: var(--font-num);
  font-size: 12.5px;
  background: var(--brand-soft);
  color: var(--brand);
  padding: 1px 6px;
  border-radius: 5px;
}

.faq { background: #fff; border-radius: var(--r-l); box-shadow: var(--sh-1); overflow: hidden; }

.faq details { border-bottom: 1px solid var(--line-2); }

.faq details:last-child { border-bottom: 0; }

.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 9px;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  margin-left: auto;
  color: var(--ink-4);
  font-size: 17px;
  font-weight: 400;
}

.faq details[open] summary::after { content: "−"; color: var(--brand); }

.faq .a { padding: 0 16px 15px; font-size: 13.5px; line-height: 1.8; color: var(--ink-2); }

.faq .a > * + * { margin-top: 10px; }

.spon-tier {
  display: flex;
  gap: 12px;
  padding: 14px;
  border-radius: var(--r-l);
  background: #fff;
  box-shadow: var(--sh-1);
}

.spon-tier .amt {
  flex: none;
  width: 62px;
  text-align: center;
  font-family: var(--font-num);
  font-size: 17px;
  font-weight: 700;
  color: var(--brand);
}

.spon-tier .amt small { display: block; font-size: 10.5px; font-family: var(--font); font-weight: 500; color: var(--ink-3); margin-top: 2px; }

.spon-tier h4 { font-size: 14px; margin-bottom: 5px; }

.spon-tier p { font-size: 12px; color: var(--ink-3); line-height: 1.65; }

.spon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 48px;
  border-radius: var(--r-m);
  background: var(--grad-brand);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  box-shadow: var(--sh-brand);
}

.guest-tip .btn { height: 44px; padding: 0 36px; font-size: 14.5px; }

/* 轻提示 */
.toast {
  position: fixed;
  left: 50%;
  bottom: 100px;
  z-index: 70;
  transform: translate(-50%, 12px);
  background: rgba(20, 24, 38, 0.92);
  color: #fff;
  font-size: 13px;
  padding: 10px 18px;
  border-radius: var(--r-full);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: 0.24s;
  white-space: nowrap;
}

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

/* ==========================================================================
   主题补充：预览稿里没有、但主题模板用到的类
   ========================================================================== */
.t-gold { background: var(--grad-gold); }
.t-ok { background: var(--grad-ok); }
.t-rose { background: var(--grad-rose); }
.t-violet { background: var(--grad-violet); }
.t-cyan { background: var(--grad-cyan); }

.yx-logo-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

.yx-empty {
	padding: 26px 16px;
	text-align: center;
	font-size: 13.5px;
	color: var(--ink-3);
	line-height: 1.8;
}

.yx-count {
	font-size: 12px;
	font-weight: 400;
	color: var(--ink-3);
}

.yx-blank { text-align: center; padding: 64px 24px; }
.yx-blank .ic {
	width: 72px; height: 72px; margin: 0 auto 20px;
	border-radius: 24px; background: var(--brand-soft); color: var(--brand);
	display: grid; place-items: center; font-size: 34px;
}
.yx-blank h1 { font-size: 20px; margin-bottom: 10px; }
.yx-blank p { font-size: 14px; color: var(--ink-3); margin-bottom: 22px; }

.strip__more {
	font-size: 12px; color: var(--ink-3); font-weight: 500;
	background: none; border: 0; padding: 0; cursor: pointer;
}
.strip__more:hover { color: var(--brand); }
.strip__hint { font-size: 12px; color: var(--ink-3); }

.blk__sum {
	list-style: none; cursor: pointer;
	display: flex; align-items: center; gap: 9px;
	font-size: 14.5px; font-weight: 700; margin-bottom: 13px;
}
.blk__sum::-webkit-details-marker { display: none; }
.yx-fold { margin-left: auto; font-size: 11.5px; font-weight: 400; color: var(--ink-4); }
.blk--article { padding: 18px 16px; }

/* 归档 / 搜索分页 */
.navigation.pagination { padding: 18px 16px 26px; }
.navigation.pagination .nav-links {
	display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
}
.navigation.pagination .page-numbers {
	min-width: 34px; height: 34px; padding: 0 10px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: var(--r-s); background: #fff; color: var(--ink-2);
	font-size: 13.5px; box-shadow: var(--sh-1);
}
.navigation.pagination .page-numbers.current { background: var(--grad-brand); color: #fff; }

/* WordPress 对齐类兜底 */
.alignleft { float: left; margin: 0 16px 12px 0; }
.alignright { float: right; margin: 0 0 12px 16px; }
.aligncenter { margin-left: auto; margin-right: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text, .wp-block-image figcaption {
	font-size: 12px; color: var(--ink-3); text-align: center; margin-top: 8px;
}
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap;
}