/* ==========================================================================
   BBGTALK 视觉精修层（最后加载）
   设计方向：黑墨中性底 + 单一柠檬绿强调；编辑型信息密度；小圆角；真实画面优先。
   本层只做视觉，不改任何内容、路由与结构。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 字体层级与数字
   -------------------------------------------------------------------------- */

body {
	font-size: 14px;
	line-height: 1.62;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
	letter-spacing: -.02em;
}

/* 所有计数、时长、时间、评分统一窄体数字，避免不同字宽造成跳动 */
.card__meta,
.card__dur,
.card__stat,
.news-item__meta,
.ep__meta,
.hero__meta,
.gplayer__time,
.chapters__time,
.page-head__count,
.filter-bar__item,
.podcast-head__meta,
.article__meta,
.game-card__score,
.badge--score {
	font-family: var(--font-num);
	font-variant-numeric: tabular-nums;
	letter-spacing: .01em;
}

:focus-visible {
	outline: 2px solid var(--brand-ink);
	outline-offset: 3px;
}

::selection {
	background: var(--brand);
	color: var(--brand-contrast);
}

/* --------------------------------------------------------------------------
   2. 页面节奏：区块之间用细分隔线建立阅读节拍
   -------------------------------------------------------------------------- */

.container {
	padding-top: 28px;
}

.lead {
	margin-bottom: 30px;
	gap: var(--gutter);
	align-items: stretch;
}

.section {
	margin-bottom: 48px;
	padding-top: 24px;
	border-top: 1px solid var(--line);
}

.section__head {
	margin-bottom: 18px;
	gap: 16px;
}

.section__title {
	gap: 10px;
	font-size: 21px;
	font-weight: 800;
	letter-spacing: -.03em;
}

.section__title::before {
	width: 4px;
	height: 19px;
	border-radius: 1px;
	background: var(--brand);
}

.section__more {
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--text-4);
}

.section__more .u-icon {
	width: 13px;
	height: 13px;
}

/* --------------------------------------------------------------------------
   3. 侧栏与顶栏：把品牌收进一个方块，导航用左侧竖条表示选中
   -------------------------------------------------------------------------- */

.sidebar {
	background: var(--bg);
	border-right: 1px solid var(--line-2);
}

.sidebar__brand-mark {
	background: var(--brand);
	color: var(--brand-contrast);
	border-radius: var(--r-sm);
	font-weight: 800;
}

.sidebar__brand span:last-child {
	letter-spacing: .04em;
}

.sidebar__link {
	border-radius: var(--r-sm);
	font-size: 13.5px;
	font-weight: 500;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.sidebar__link.is-active {
	position: relative;
	background: var(--brand-soft);
	color: var(--brand-ink);
	font-weight: 700;
}

.sidebar__link.is-active::before {
	content: "";
	position: absolute;
	left: 0;
	top: 20%;
	bottom: 20%;
	width: 3px;
	border-radius: 0 2px 2px 0;
	background: var(--brand);
}

.topbar {
	background: color-mix(in srgb, var(--bg) 92%, transparent);
	border-bottom: 1px solid var(--line-2);
}

.search__input {
	border: 1px solid var(--line-2);
	background: var(--bg-box);
}

.search__input:focus {
	border-color: var(--brand-line);
}

.segmented {
	border: 1px solid var(--line);
}

.segmented__item {
	font-weight: 600;
}

.btn {
	border-radius: var(--r-sm);
	letter-spacing: .01em;
}

.btn--brand {
	font-weight: 700;
}

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

/* --------------------------------------------------------------------------
   4. 首屏：真实画面 + 左侧深色压暗，标题成为唯一视觉重心
   -------------------------------------------------------------------------- */

.hero {
	min-height: 420px;
	border-radius: var(--r-md);
}

.hero__media img {
	filter: saturate(.86) contrast(1.04);
	transition: transform 700ms var(--ease), filter var(--dur) var(--ease);
}

.hero:hover .hero__media img {
	transform: scale(1.045);
	filter: saturate(1) contrast(1.04);
}

.hero__mask {
	background:
		linear-gradient(90deg, rgba(6, 10, 4, .9) 0%, rgba(6, 10, 4, .62) 40%, rgba(6, 10, 4, .08) 100%),
		linear-gradient(0deg, rgba(6, 10, 4, .72) 0%, transparent 62%);
}

.hero__body {
	padding: 36px 40px;
	max-width: 74%;
	gap: 11px;
}

.hero__title {
	font-size: clamp(26px, 2.4vw, 36px);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.035em;
	max-width: 620px;
	text-shadow: 0 2px 18px rgba(0, 0, 0, .3);
}

.hero__sub {
	font-size: var(--fs-md);
	line-height: 1.6;
	max-width: 52ch;
	color: rgba(241, 245, 234, .82);
}

.hero__meta {
	font-size: var(--fs-sm);
	color: rgba(241, 245, 234, .72);
}

.hero .card__badges .badge--brand,
.hero .card__badges .badge {
	background: var(--brand);
	color: var(--brand-contrast);
	font-weight: 700;
	letter-spacing: .02em;
}

.lead__side {
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: 18px 18px 8px;
	overflow: hidden;
}

.lead__side-head {
	padding-bottom: 12px;
	border-bottom: 1px solid var(--line-2);
}

.lead__side-head h2 {
	font-size: var(--fs-lg);
	font-weight: 800;
}

/* 右栏保持纯文字快讯，缩略图只在资讯横滑区出现 */
.lead__side .news-item__thumb {
	display: none;
}

.lead__side .news-item {
	padding: 10px 0;
}

.lead__side .news-item__title {
	font-size: 13px;
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   5. 卡片：统一细边框 + 小圆角，靠画面而非底色区分层级
   -------------------------------------------------------------------------- */

.card {
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	overflow: hidden;
	transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
		box-shadow var(--dur) var(--ease);
}

.card:hover {
	border-color: var(--brand-line);
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

.card__media {
	border-radius: 0;
	aspect-ratio: 16 / 10;
}

.card__body {
	padding: 12px 12px 14px;
}

.card__title {
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: -.01em;
}

.card__subtitle {
	font-size: var(--fs-xs);
	line-height: 1.5;
	margin-top: 4px;
}

.card__meta {
	font-size: var(--fs-xs);
	margin-top: 9px;
}

.card__dur {
	border-radius: 2px;
	font-size: var(--fs-xs);
	font-weight: 600;
	background: rgba(10, 14, 6, .82);
	color: var(--text-inverse);
}

.badge,
.chip {
	letter-spacing: .02em;
}

.chip {
	font-size: var(--fs-xs);
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   6. 资讯：每条补一张小图，列表从灰字墙变成可扫读的信息流
   -------------------------------------------------------------------------- */

.news-col {
	border: 1px solid var(--line);
	background: var(--bg);
	padding: 6px 14px 2px;
	border-radius: var(--r-md);
}

.news-item {
	gap: 12px;
	padding: 11px 0;
	border-bottom: 1px solid var(--line);
}

.news-item:last-child {
	border-bottom: 0;
}

.news-item__thumb {
	width: 74px;
	height: 54px;
	border-radius: var(--r-xs);
}

.news-item__title {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.45;
}

.news-item__meta {
	font-size: var(--fs-xs);
	color: var(--text-4);
	margin-top: 5px;
}

/* --------------------------------------------------------------------------
   7. 播客 / 播单 / 游戏 / 专题
   -------------------------------------------------------------------------- */

.ep {
	border-bottom: 1px solid var(--line);
}

.ep__cover {
	border-radius: var(--r-sm);
}

.ep__title {
	font-size: var(--fs-md);
	font-weight: 700;
	line-height: 1.45;
}

.ep__desc {
	font-size: var(--fs-sm);
	line-height: 1.55;
}

.ep__meta {
	font-size: var(--fs-xs);
	color: var(--text-4);
}

.ep__play {
	background: var(--brand);
	color: var(--brand-contrast);
}

.ep__play:hover {
	background: var(--brand-deep);
	color: var(--brand-contrast);
}

.album-card {
	border-radius: var(--r-md);
	border: 1px solid var(--line-3);
}

.album-card__label {
	font-size: var(--fs-xs);
	letter-spacing: .08em;
	font-weight: 700;
	color: var(--brand);
}

.album-card__title {
	font-weight: 700;
	line-height: 1.4;
}

.game-card,
.topic-card {
	border-radius: var(--r-md);
}

.game-card img,
.topic-card img {
	transition: transform 500ms var(--ease);
}

.game-card:hover img,
.topic-card:hover img {
	transform: scale(1.045);
}

/* --------------------------------------------------------------------------
   8. 阅读页：更长的行高、克制的段距、单一强调色
   -------------------------------------------------------------------------- */

.article__title {
	font-size: clamp(27px, 2.6vw, 36px);
	font-weight: 800;
	line-height: 1.28;
	letter-spacing: -.035em;
}

.entry-content {
	font-size: 15.5px;
	line-height: 1.92;
	color: var(--text-2);
}

.entry-content p {
	margin-bottom: 1.35em;
}

.entry-content h2,
.entry-content h3 {
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--text-1);
}

.entry-content a {
	color: var(--brand-ink);
	text-decoration-color: var(--brand-line);
	text-decoration-thickness: 2px;
}

.entry-content blockquote {
	border-left: 3px solid var(--brand);
	background: var(--brand-soft);
	color: var(--text-2);
}

.page-head__title {
	font-size: var(--fs-2xl);
	font-weight: 800;
	letter-spacing: -.03em;
}

.filter-bar__item.is-active {
	background: var(--brand);
	color: var(--brand-contrast);
	border-color: var(--brand);
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   9. 播放器与页脚：一条压得住全场的墨色基准线
   -------------------------------------------------------------------------- */

.gplayer {
	background: var(--bg-dark);
	border-top: 2px solid var(--brand);
	box-shadow: 0 -6px 28px rgba(10, 14, 6, .22);
}

.gplayer__title {
	color: #f1f5ea;
	font-weight: 700;
}

.gplayer__author,
.gplayer__time {
	color: rgba(241, 245, 234, .62);
}

.gplayer__toggle,
.gplayer__toggle:hover {
	background: var(--brand);
	color: var(--brand-contrast);
}

.gplayer__close {
	color: rgba(241, 245, 234, .7);
}

.gplayer__close:hover {
	background: rgba(241, 245, 234, .12);
	color: #f1f5ea;
}

.footer {
	border-top: 1px solid var(--line-2);
	background: var(--bg);
}

.footer__inner {
	padding: 40px 0 32px;
}

.footer__brand p {
	max-width: 34ch;
	line-height: 1.75;
}

.footer__col h4 {
	font-size: var(--fs-xs);
	font-weight: 800;
	letter-spacing: .09em;
	color: var(--text-4);
}

.footer__bottom {
	border-top: 1px solid var(--line);
	color: var(--text-5);
}

/* --------------------------------------------------------------------------
   10. 暗色模式：不降低品牌亮度，只补齐边框与画面层次
   -------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
	.card__media img,
	.game-card img,
	.topic-card img,
	.news-item__thumb {
		filter: brightness(.9) saturate(.92);
	}

	.hero__sub,
	.hero__meta {
		color: rgba(241, 245, 234, .8);
	}

	.card:hover {
		border-color: var(--brand-line);
	}

	.news-col,
	.lead__side {
		background: var(--bg);
	}

	.album-card {
		border-color: var(--line-2);
	}
}

/* --------------------------------------------------------------------------
   11. 响应式：所有多列在这里显式给出单列回退
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
	.hero {
		min-height: 340px;
	}

	.hero__body {
		padding: 28px 30px;
		max-width: 86%;
	}
}

@media (max-width: 768px) {
	.container {
		padding-top: 18px;
	}

	.section {
		margin-bottom: 36px;
		padding-top: 18px;
	}

	.section__title {
		font-size: 19px;
	}

	.hero {
		min-height: 280px;
	}

	.hero__body {
		padding: 22px 20px;
		max-width: 100%;
		gap: 8px;
	}

	.hero__title {
		font-size: 24px;
		max-width: none;
	}

	.hero__sub {
		font-size: var(--fs-sm);
	}

	.news-item__thumb {
		width: 60px;
		height: 46px;
	}

	.entry-content {
		font-size: 15px;
		line-height: 1.85;
	}
}

@media (max-width: 480px) {
	.hero {
		min-height: 250px;
	}

	.hero__sub {
		display: none;
	}

	.card__title {
		font-size: 14px;
	}
}

/* --------------------------------------------------------------------------
   12. 动效约束
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}