@charset "UTF-8";
/* ==========================================================================
   Oldtimes MC —— Minecraft 风格覆盖层
   母主题：Twenty Seventeen
   原则：只改表现层，不触碰任何内容；不使用任何外部 CDN / 字体。
   --------------------------------------------------------------------------
   目录
     01 设计令牌
     02 全局与方块纹理背景
     03 排版
     04 站点头部（Hero）
     05 导航栏（MC 按钮 + 物品提示框）
     06 内容区（背包面板）
     07 正文细节（列表 / 引用 / 表格 / 代码）
     08 图片与媒体（方块边框 + 附魔光泽）
     09 侧边栏部件
     10 页脚（基岩层）
     11 复制交互 / Toast / 工具提示
     12 滚动进度条（经验条）与回到顶部
     13 动效与滚动显现
     14 响应式
     15 无障碍与减少动效
   ========================================================================== */

/* ==========================================================================
   01 设计令牌
   ========================================================================== */
:root {
	/*
	 * ======================================================================
	 * 设计令牌：直接采用 minecraft.net 官方色板
	 * 来源：https://www.minecraft.net/webui/mc-components.min.css 的 --mc-core-*
	 * ======================================================================
	 */
	--mc-green-1: #a0e081;
	--mc-green-2: #86d562;
	--mc-green-3: #6cc349;
	--mc-green-4: #52a535;
	--mc-green-5: #3c8527;
	--mc-green-6: #2a641c;

	--mc-grey-1: #ede5e2;
	--mc-grey-2: #d0c5c0;
	--mc-grey-3: #aba09c;
	--mc-grey-4: #6b6562;
	--mc-grey-5: #3d3938;
	--mc-grey-6: #262423;
	--mc-off-black: #171615;
	--mc-off-white: #fcf5f1;

	/* 官方渐变：绿色按钮、深色面、浅色面 */
	--mc-grad-green: linear-gradient(180deg, #6cc349, #52a535 50%, #3c8527);
	--mc-grad-dark: linear-gradient(180deg, #3d3938, #262423);
	--mc-grad-light: linear-gradient(180deg, #fcf5f1, #ede5e2);

	/*
	 * 关键修正：
	 * 上面那套灰是「暖灰」（偏棕），此前用的 #1d2126 / #272c33 是冷蓝灰，
	 * 两者混在同一页里就是观感不协调的根源。这里把既有变量名全部映射到
	 * 官方色板，使所有旧规则随之一致，无需逐条改写。
	 */
	--mc-grass: var(--mc-green-4);
	--mc-grass-hi: var(--mc-green-2);
	--mc-grass-lo: var(--mc-green-6);
	--mc-dirt: #6b4b2f;
	--mc-stone: var(--mc-grey-4);
	--mc-deepslate: var(--mc-grey-6);
	--mc-bedrock: var(--mc-off-black);
	--mc-panel: var(--mc-grey-6);
	--mc-panel-hi: var(--mc-grey-5);
	--mc-slot: #1e1c1b;

	/* 链接改用官方绿，不再用青色 —— 青色不在 MC 品牌色里 */
	--mc-diamond: var(--mc-green-3);
	--mc-gold: #d9a45c;
	--mc-emerald: var(--mc-green-2);
	--mc-redstone: #d2554f;
	--mc-lapis: #5a7fd8;
	--mc-xp: var(--mc-green-2);

	--mc-text: var(--mc-off-white);
	--mc-text-dim: var(--mc-grey-2);
	--mc-text-mute: var(--mc-grey-3);
	--mc-border: #0f0e0d;

	/*
	 * 直角：minecraft.net 全站 border-radius:0（官方 CSS 里出现 57 次），
	 * 除圆形头像外没有任何圆角。方块感由此而来，而不是靠立体斜面。
	 */
	--mc-radius: 0;

	/*
	 * 取消立体斜面与硬字影。
	 * minecraft.net 是克制的现代品牌站，不是游戏内 GUI ——
	 * 界面感靠直角、暖灰、绿色渐变与留白建立，而不是靠斜面。
	 */
	--bevel-out: none;
	--bevel-in: none;
	--bevel-btn: none;
	--bevel-btn-on: none;

	--shadow-block: none;
	--shadow-text: none;
	--shadow-text-lg: none;

	--mc-wrap: 1200px;
}

/* ==========================================================================
   02 全局与方块纹理背景
   ========================================================================== */
body.otm-mc {
	background-color: var(--mc-off-black);
	/*
	 * 极轻的 4px 像素网格。minecraft.net 本身是干净的纯净深色底，
	 * 这里只保留一丝像素质感，不再做大面积纹理，避免暗色下发脏。
	 */
	background-image:
		repeating-linear-gradient(0deg, rgba(255, 255, 255, .014) 0 1px, transparent 1px 4px),
		repeating-linear-gradient(90deg, rgba(0, 0, 0, .03) 0 1px, transparent 1px 4px);
	background-attachment: fixed;
	color: var(--mc-text);
	/* 字体栈对齐 minecraft.net：Noto Sans 优先，中文依次回退 */
	font-family: "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
		"Noto Sans SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	font-synthesis-weight: none;
	text-rendering: optimizeLegibility;
}

.otm-mc .site-content-contain {
	background: transparent;
}

/* 选中文本：萤石绿 */
.otm-mc ::selection {
	background: var(--mc-grass);
	color: #06210a;
}

/* 滚动条：石头槽造型 */
.otm-mc ::-webkit-scrollbar {
	width: 14px;
	height: 14px;
}

.otm-mc ::-webkit-scrollbar-track {
	background: var(--mc-slot);
	box-shadow: var(--bevel-in);
}

.otm-mc ::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, #6b6562, #3d3938);
	box-shadow: var(--bevel-btn);
	border: 2px solid var(--mc-border);
}

.otm-mc ::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(180deg, #7f8794, #525963);
}

/* ==========================================================================
   03 排版
   ========================================================================== */
.otm-mc .entry-title,
.otm-mc .page-title,
.otm-mc h1,
.otm-mc h2,
.otm-mc h3,
.otm-mc h4 {
	color: #fff;
	text-shadow: var(--shadow-text);
	letter-spacing: .01em;
	font-weight: 700;
}

.otm-mc .entry-content h2 {
	position: relative;
	margin: 2.2em 0 .9em;
	padding: 10px 0 10px 18px;
	font-size: 1.5rem;
	color: var(--mc-grass-hi);
	border-left: 6px solid var(--mc-grass);
	background: linear-gradient(90deg, rgba(95, 168, 74, .18), transparent 72%);
	text-shadow: var(--shadow-text-lg);
}

/* 标题下方的方块虚线：模仿草方块边缘 */
.otm-mc .entry-content h2::after {
	content: "";
	position: absolute;
	left: 18px;
	right: 0;
	bottom: 0;
	height: 4px;
	background-image: repeating-linear-gradient(90deg,
			var(--mc-grass-lo) 0 8px, transparent 8px 16px);
	opacity: .75;
}

.otm-mc .entry-content h3 {
	margin: 1.8em 0 .7em;
	padding-left: 14px;
	font-size: 1.2rem;
	color: var(--mc-diamond);
	border-left: 4px solid var(--mc-diamond);
}

.otm-mc .entry-content h4 {
	margin: 1.5em 0 .6em;
	font-size: 1.05rem;
	color: var(--mc-gold);
}

.otm-mc .entry-content p {
	line-height: 1.95;
	font-size: 1rem;
	color: var(--mc-text);
}

.otm-mc .entry-content a {
	color: var(--mc-diamond);
	text-decoration: none;
	border-bottom: 2px solid rgba(74, 237, 217, .35);
	transition: color .18s ease, border-color .18s ease, text-shadow .18s ease;
}

.otm-mc .entry-content a:hover {
	color: #9ffff2;
	border-bottom-color: var(--mc-diamond);
	text-shadow: 0 0 12px rgba(74, 237, 217, .7);
}

/* ==========================================================================
   04 站点头部（Hero）
   ========================================================================== */
.otm-mc .site-header {
	position: relative;
}

.otm-mc .custom-header {
	position: relative;
	min-height: 460px;
	display: flex;
	align-items: center;
	overflow: hidden;
	border-bottom: 4px solid var(--mc-border);
	box-shadow: inset 0 -6px 0 rgba(255, 255, 255, .05), 0 12px 44px rgba(0, 0, 0, .75);
}

.otm-mc .custom-header-media,
.otm-mc .wp-custom-header {
	position: absolute;
	inset: 0;
	height: 100%;
	width: 100%;
}

/* <picture> 包一层后需要显式撑满，否则内部 img 的 100% 会失去参照 */
.otm-mc .wp-custom-header picture {
	display: block;
	width: 100%;
	height: 100%;
}

.otm-mc .custom-header-media img,
.otm-mc .wp-custom-header img,
.otm-mc .custom-header-media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	image-rendering: pixelated; /* 让 MC 截图保留方块质感 */
	filter: saturate(1.18) contrast(1.06);
	transform: scale(1.06) translateY(var(--mc-parallax, 0px));
	transition: transform .25s linear;
	will-change: transform;
}

/* 遮罩：底部渐隐到方块底色，保证文字可读 */
.otm-mc .custom-header::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background:
		linear-gradient(180deg, rgba(10, 12, 16, .30) 0%, rgba(10, 12, 16, .62) 52%, rgba(15, 17, 20, .97) 100%),
		radial-gradient(ellipse at 50% 40%, transparent 30%, rgba(0, 0, 0, .45) 100%);
}

.otm-mc .site-branding {
	position: relative;
	z-index: 3;
	width: 100%;
	padding: 92px 0 68px;
}

.otm-mc .site-branding .wrap {
	text-align: center;
}

.otm-mc .custom-logo-link img {
	image-rendering: pixelated;
	filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .55)) drop-shadow(0 0 26px rgba(74, 237, 217, .28));
	transition: transform .4s cubic-bezier(.2, .7, .2, 1);
}

.otm-mc .custom-logo-link:hover img {
	transform: translateY(-4px) scale(1.04);
}

.otm-mc .site-title,
.otm-mc .site-title a {
	color: #fff !important;
	font-size: clamp(1.9rem, 5vw, 3.4rem);
	font-weight: 800;
	line-height: 1.25;
	text-shadow: 3px 3px 0 var(--mc-grass-lo), 6px 6px 0 rgba(0, 0, 0, .5);
	transition: text-shadow .3s ease;
}

.otm-mc .site-title a:hover {
	text-shadow: 3px 3px 0 var(--mc-grass), 6px 6px 0 rgba(0, 0, 0, .5), 0 0 34px rgba(142, 209, 104, .55);
}

.otm-mc .site-description {
	margin-top: 12px;
	color: var(--mc-gold);
	font-size: 1.05rem;
	letter-spacing: .16em;
	text-shadow: var(--shadow-text);
}

/* ==========================================================================
   05 导航栏（MC 按钮 + 物品提示框）
   ========================================================================== */
.otm-mc .navigation-top {
	position: sticky;
	top: 0;
	z-index: 60;
	background: linear-gradient(180deg, #34393f, #212429);
	border-top: 3px solid rgba(255, 255, 255, .10);
	border-bottom: 3px solid var(--mc-border);
	box-shadow: 0 4px 0 rgba(0, 0, 0, .4), 0 10px 24px rgba(0, 0, 0, .5);
}

.otm-mc .navigation-top .wrap {
	max-width: var(--mc-wrap);
}

.otm-mc .main-navigation ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.otm-mc .main-navigation li {
	position: relative;
}

.otm-mc .main-navigation ul li a {
	display: block;
	margin: 7px 4px;
	padding: 9px 17px;
	background: linear-gradient(180deg, #3d3938, #262423);
	color: #fcf5f1 !important;
	text-decoration: none;
	border: 2px solid var(--mc-border);
	border-radius: var(--mc-radius);
	box-shadow: var(--bevel-btn), 0 3px 0 rgba(0, 0, 0, .48);
	text-shadow: 1px 1px 0 rgba(0, 0, 0, .62);
	font-size: .93rem;
	font-weight: 600;
	transition: transform .13s ease, filter .13s ease, box-shadow .13s ease;
}

.otm-mc .main-navigation ul li a:hover,
.otm-mc .main-navigation ul li a:focus {
	filter: brightness(1.28);
	transform: translateY(-2px);
	box-shadow: var(--bevel-btn), 0 5px 0 rgba(0, 0, 0, .48), 0 0 20px rgba(74, 237, 217, .30);
}

.otm-mc .main-navigation ul li a:active,
.otm-mc .main-navigation ul li.current-menu-item > a,
.otm-mc .main-navigation ul li.current_page_item > a {
	transform: translateY(2px);
	box-shadow: var(--bevel-btn-on);
	background: linear-gradient(180deg, #3a7d33, #2a5c25);
	color: #eaffe4 !important;
}

/* 下拉子菜单 */
.otm-mc .main-navigation ul ul {
	position: absolute;
	top: 100%;
	left: 0;
	display: block;
	min-width: 190px;
	padding: 6px;
	background: var(--mc-panel);
	border: 3px solid var(--mc-border);
	box-shadow: var(--bevel-out), var(--shadow-block);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.otm-mc .main-navigation li:hover > ul,
.otm-mc .main-navigation li:focus-within > ul {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* —— 移动端汉堡按钮 —— */
.otm-mc .menu-toggle {
	background: linear-gradient(180deg, #3d3938, #262423);
	border: 2px solid var(--mc-border);
	box-shadow: var(--bevel-btn), 0 3px 0 rgba(0, 0, 0, .48);
	color: #fcf5f1;
	border-radius: var(--mc-radius);
}

.otm-mc .menu-toggle:hover,
.otm-mc .menu-toggle:focus {
	background: linear-gradient(180deg, #6d7681, #474e57);
	color: #fff;
}

/* ==========================================================================
   06 内容区（背包面板）
   ========================================================================== */
.otm-mc .site-content {
	padding-top: 40px;
}

.otm-mc .wrap {
	max-width: var(--mc-wrap);
}

.otm-mc .site-main > article,
.otm-mc .site-main > .page-header {
	position: relative;
	background: linear-gradient(180deg, var(--mc-panel-hi), var(--mc-panel));
	border: 3px solid var(--mc-border);
	border-radius: var(--mc-radius);
	box-shadow: var(--bevel-out), var(--shadow-block);
	padding: 30px 34px 34px;
	margin-bottom: 30px;
}

.otm-mc .page-header {
	background: linear-gradient(180deg, #353b43, var(--mc-panel));
}

.otm-mc .page-header .page-title {
	margin: 0;
	color: var(--mc-grass-hi);
}

/* 文章头部：状如告示牌 */
.otm-mc .entry-header {
	position: relative;
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 3px solid rgba(0, 0, 0, .45);
	box-shadow: 0 3px 0 rgba(255, 255, 255, .05);
}

.otm-mc .entry-title {
	margin: 0 0 10px;
	font-size: clamp(1.45rem, 3vw, 2.05rem);
}

.otm-mc .entry-title a {
	color: #fff;
	text-decoration: none;
	transition: color .2s ease, text-shadow .2s ease;
}

.otm-mc .entry-title a:hover {
	color: var(--mc-grass-hi);
	text-shadow: 3px 3px 0 rgba(0, 0, 0, .7), 0 0 24px rgba(142, 209, 104, .5);
}

.otm-mc .entry-meta,
.otm-mc .entry-footer {
	color: var(--mc-text-mute);
	font-size: .86rem;
}

.otm-mc .entry-meta a,
.otm-mc .entry-footer a {
	color: var(--mc-text-dim);
}

.otm-mc .entry-content {
	margin-top: 22px;
}

/* ==========================================================================
   07 正文细节
   ========================================================================== */
.otm-mc .entry-content ul,
.otm-mc .entry-content ol {
	margin: 1.1em 0;
	padding-left: 1.5em;
}

.otm-mc .entry-content ul {
	list-style: none;
	padding-left: 1.6em;
}

/* 列表项：草方块子弹 */
.otm-mc .entry-content ul > li {
	position: relative;
	margin: .6em 0;
	line-height: 1.9;
}

.otm-mc .entry-content ul > li::before {
	content: "";
	position: absolute;
	left: -1.35em;
	top: .72em;
	width: 10px;
	height: 10px;
	background: linear-gradient(180deg, var(--mc-grass-hi) 0 45%, var(--mc-dirt) 45% 100%);
	border: 2px solid var(--mc-border);
	box-shadow: 1px 1px 0 rgba(0, 0, 0, .6);
}

.otm-mc .entry-content ol > li {
	margin: .6em 0;
	line-height: 1.9;
}

.otm-mc .entry-content blockquote {
	margin: 1.6em 0;
	padding: 18px 22px;
	background: rgba(20, 23, 26, .85);
	border-left: 6px solid var(--mc-gold);
	box-shadow: var(--bevel-in);
	color: var(--mc-text-dim);
	font-style: normal;
}

.otm-mc .entry-content hr {
	margin: 2.4em 0;
	border: 0;
	height: 4px;
	background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .18) 0 8px, transparent 8px 16px);
}

.otm-mc .entry-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5em 0;
	background: var(--mc-slot);
	box-shadow: var(--bevel-in);
}

.otm-mc .entry-content th,
.otm-mc .entry-content td {
	padding: 11px 14px;
	border: 2px solid var(--mc-border);
	text-align: left;
}

.otm-mc .entry-content th {
	background: linear-gradient(180deg, #3a4048, #2b3037);
	color: var(--mc-gold);
	text-shadow: var(--shadow-text);
}

.otm-mc .entry-content code {
	padding: 2px 7px;
	background: var(--mc-slot);
	border: 2px solid var(--mc-border);
	box-shadow: var(--bevel-in);
	color: var(--mc-xp);
	font-family: "SFMono-Regular", Menlo, Consolas, monospace;
	font-size: .92em;
}

/* ==========================================================================
   08 图片与媒体（方块边框 + 附魔光泽）
   ========================================================================== */
.otm-mc .entry-content img,
.otm-mc .wp-block-image img,
.otm-mc .widget img {
	max-width: 100%;
	height: auto;
	border: 3px solid var(--mc-border);
	box-shadow: var(--bevel-out), 0 8px 22px rgba(0, 0, 0, .55);
	image-rendering: pixelated;
	transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease;
}

.otm-mc .entry-content img:hover,
.otm-mc .wp-block-image img:hover {
	transform: translateY(-4px) scale(1.015);
	box-shadow: var(--bevel-out), 0 14px 34px rgba(0, 0, 0, .65), 0 0 26px rgba(74, 237, 217, .25);
}

.otm-mc .wp-block-gallery img,
.otm-mc .blocks-gallery-item img {
	border-width: 2px;
}

/* 附魔光泽：悬停时一道紫白色高光扫过 */
.otm-mc .mc-glint {
	position: relative;
	overflow: hidden;
}

.otm-mc .mc-glint::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	opacity: 0;
	background: linear-gradient(115deg,
			transparent 32%,
			rgba(178, 138, 255, .30) 45%,
			rgba(255, 255, 255, .48) 50%,
			rgba(178, 138, 255, .30) 55%,
			transparent 68%);
	transform: translateX(-130%);
}

.otm-mc .mc-glint:hover::after {
	animation: mcGlint .95s ease forwards;
}

@keyframes mcGlint {
	0% {
		opacity: .85;
		transform: translateX(-130%);
	}

	100% {
		opacity: 0;
		transform: translateX(130%);
	}
}

/* ==========================================================================
   09 侧边栏部件
   ========================================================================== */
.otm-mc #secondary.widget-area {
	padding-left: 26px;
}

.otm-mc #secondary .widget {
	margin-bottom: 26px;
	padding: 22px 22px 24px;
	background: linear-gradient(180deg, var(--mc-panel-hi), var(--mc-panel));
	border: 3px solid var(--mc-border);
	border-radius: var(--mc-radius);
	box-shadow: var(--bevel-out), 0 8px 22px rgba(0, 0, 0, .5);
	transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s ease;
}

.otm-mc #secondary .widget:hover {
	transform: translateY(-3px);
	box-shadow: var(--bevel-out), 0 14px 30px rgba(0, 0, 0, .6), 0 0 22px rgba(95, 168, 74, .2);
}

.otm-mc #secondary .widget .widget-title,
.otm-mc #secondary .widget h2 {
	margin: 0 0 14px;
	padding-bottom: 10px;
	font-size: 1.05rem;
	color: var(--mc-grass-hi);
	text-shadow: var(--shadow-text);
	border-bottom: 3px solid rgba(0, 0, 0, .45);
	box-shadow: 0 3px 0 rgba(255, 255, 255, .05);
}

.otm-mc #secondary .widget video {
	width: 100%;
	height: auto;
	border: 3px solid var(--mc-border);
	box-shadow: var(--bevel-out);
	background: #000;
}

/* ==========================================================================
   10 页脚（基岩层）
   ========================================================================== */
.otm-mc .site-footer {
	position: relative;
	margin-top: 20px;
	padding: 44px 0 26px;
	background:
		linear-gradient(180deg, #1b1f24, var(--mc-bedrock));
	border-top: 5px solid var(--mc-border);
	box-shadow: inset 0 5px 0 rgba(255, 255, 255, .06), 0 -10px 34px rgba(0, 0, 0, .55);
	color: var(--mc-text-dim);
}

.otm-mc .site-footer .widget {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
	margin-bottom: 22px;
}

.otm-mc .site-footer .widget:hover {
	transform: none;
	box-shadow: none;
}

.otm-mc .site-footer .widget-title,
.otm-mc .site-footer h2 {
	color: var(--mc-grass-hi);
	text-shadow: var(--shadow-text);
	border-bottom: 3px solid rgba(255, 255, 255, .08);
	padding-bottom: 8px;
}

.otm-mc .site-info {
	padding-top: 20px;
	border-top: 3px solid rgba(255, 255, 255, .07);
	color: var(--mc-text-mute);
	font-size: .88rem;
	text-align: center;
}

.otm-mc .site-info a {
	color: var(--mc-text-dim);
	border-bottom: 1px dotted rgba(255, 255, 255, .2);
}

.otm-mc .site-info a:hover {
	color: var(--mc-diamond);
}

/* ==========================================================================
   11 复制交互 / Toast / 工具提示
   ========================================================================== */
/* 服务器地址：等宽高亮 + 复制按钮 */
.otm-mc .mc-host {
	color: var(--mc-xp);
	font-family: "SFMono-Regular", Menlo, Consolas, monospace;
	font-size: .95em;
	text-shadow: 0 0 10px rgba(124, 252, 0, .35);
	white-space: nowrap;
}

.otm-mc .mc-copy {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin: 0 2px 0 7px;
	padding: 3px 11px;
	vertical-align: middle;
	background: linear-gradient(180deg, #3d3938, #262423);
	border: 2px solid var(--mc-border);
	border-radius: var(--mc-radius);
	box-shadow: var(--bevel-btn), 0 2px 0 rgba(0, 0, 0, .48);
	color: #fcf5f1;
	font-family: inherit;
	font-size: .76rem;
	font-weight: 600;
	line-height: 1.6;
	cursor: pointer;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, .6);
	transition: transform .12s ease, filter .12s ease, box-shadow .12s ease, background .2s ease;
}

.otm-mc .mc-copy:hover {
	filter: brightness(1.3);
	transform: translateY(-1px);
}

.otm-mc .mc-copy:active {
	transform: translateY(2px);
	box-shadow: var(--bevel-btn-on);
}

.otm-mc .mc-copy.is-done {
	background: linear-gradient(180deg, #45a83c, #2c6f26);
	color: #f2fff0;
}

/* 提示浮层：Minecraft 物品提示框质感 */
.otm-mc .mc-tip {
	position: fixed;
	z-index: 99999;
	max-width: 320px;
	padding: 7px 12px;
	pointer-events: none;
	background: rgba(16, 0, 16, .96);
	border: 2px solid #2c0a63;
	outline: 2px solid #100010;
	box-shadow: 0 4px 0 rgba(0, 0, 0, .5), 0 0 20px rgba(44, 10, 99, .6);
	color: #fff;
	font-size: .82rem;
	line-height: 1.65;
	text-shadow: 1px 1px 0 #3f3f3f;
	opacity: 0;
	transition: opacity .14s ease;
}

.otm-mc .mc-tip.is-on {
	opacity: 1;
}

/* Toast：获得成就 / 物品提示风格 */
.otm-mc .mc-toast {
	position: fixed;
	left: 50%;
	bottom: 34px;
	z-index: 99998;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 13px 22px;
	background: linear-gradient(180deg, #2f353d, #22262b);
	border: 3px solid var(--mc-border);
	border-radius: var(--mc-radius);
	box-shadow: var(--bevel-out), 0 10px 30px rgba(0, 0, 0, .65), 0 0 30px rgba(124, 252, 0, .22);
	color: var(--mc-text);
	font-size: .92rem;
	opacity: 0;
	transform: translate(-50%, 18px);
	transition: opacity .28s ease, transform .28s cubic-bezier(.2, .7, .2, 1);
}

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

.otm-mc .mc-toast b {
	color: var(--mc-xp);
	text-shadow: var(--shadow-text);
}

/* ==========================================================================
   12 滚动进度条（经验条）与回到顶部
   ========================================================================== */
.otm-mc .mc-xp {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99997;
	width: 0;
	height: 5px;
	background: linear-gradient(90deg, #4fa82f, #8fe04a 60%, #c6ff86);
	box-shadow: 0 0 12px rgba(124, 252, 0, .75), 0 2px 0 rgba(0, 0, 0, .5);
	transition: width .1s linear;
}

.otm-mc .mc-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 99996;
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(180deg, #6b6562, #3d3938);
	border: 3px solid var(--mc-border);
	border-radius: var(--mc-radius);
	box-shadow: var(--bevel-btn), 0 5px 0 rgba(0, 0, 0, .45);
	color: #fcf5f1;
	font-size: 1.1rem;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(14px);
	transition: opacity .25s ease, transform .25s ease, visibility .25s, filter .15s ease;
}

.otm-mc .mc-top.is-on {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.otm-mc .mc-top:hover {
	filter: brightness(1.3);
	transform: translateY(-3px);
}

.otm-mc .mc-top:active {
	transform: translateY(2px);
	box-shadow: var(--bevel-btn-on);
}

/* ==========================================================================
   13 动效与滚动显现
   ========================================================================== */
/* 进入视口时：方块从下方「放置」上来 */
.otm-mc .mc-reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .62s ease, transform .62s cubic-bezier(.2, .7, .2, 1);
}

.otm-mc .mc-reveal.is-in {
	opacity: 1;
	transform: none;
}

/* 标题的方块落位 */
@keyframes mcDrop {
	0% {
		opacity: 0;
		transform: translateY(-18px) scale(.97);
	}

	100% {
		opacity: 1;
		transform: none;
	}
}

.otm-mc .site-branding-text {
	animation: mcDrop .7s cubic-bezier(.2, .7, .2, 1) both;
}

/* 平滑滚动（锚点） */
@media (prefers-reduced-motion: no-preference) {
	.otm-mc html {
		scroll-behavior: smooth;
	}
}

/* ==========================================================================
   14 响应式
   ========================================================================== */
@media screen and (max-width: 1024px) {
	.otm-mc #secondary.widget-area {
		padding-left: 0;
		padding-top: 10px;
	}

	.otm-mc .site-main > article,
	.otm-mc .site-main > .page-header {
		padding: 24px 22px 26px;
	}
}

@media screen and (max-width: 768px) {
	.otm-mc .custom-header {
		min-height: 340px;
	}

	.otm-mc .site-branding {
		padding: 66px 0 46px;
	}

	.otm-mc .main-navigation ul {
		flex-direction: column;
		gap: 0;
	}

	.otm-mc .main-navigation ul li {
		width: 100%;
	}

	.otm-mc .main-navigation ul li a {
		margin: 3px 8px;
		text-align: center;
	}

	.otm-mc .entry-content h2 {
		font-size: 1.3rem;
	}

	.otm-mc .mc-top {
		right: 14px;
		bottom: 14px;
		width: 44px;
		height: 44px;
	}
}

/* ==========================================================================
   15 无障碍与减少动效
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {

	.otm-mc *,
	.otm-mc *::before,
	.otm-mc *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}

	.otm-mc .mc-reveal,
	.otm-mc .mc-rv {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
	}

	.otm-mc .mc-glint::after {
		display: none;
	}
}

/* 键盘可达性：始终可见的焦点环 */
.otm-mc a:focus-visible,
.otm-mc button:focus-visible,
.otm-mc .mc-copy:focus-visible,
.otm-mc .mc-top:focus-visible {
	outline: 3px solid var(--mc-gold);
	outline-offset: 2px;
}

/* ==========================================================================
   16 页脚二维码：切开中间黑带，重塑为两张独立卡片
   --------------------------------------------------------------------------
   源图 二维码.png 是 700x300 的单张图，内含：
       左码 x 0–299（300px） | 中间纯黑带 x 300–399（100px） | 右码 x 400–699（300px）
   那条黑带是图片自带的像素，不是 CSS 间隙，因此无法靠调 margin/padding 去掉。

   本层不修改图片文件、不修改数据库内容，而是用同一个 URL 渲染两份，
   各自裁掉不需要的部分：左码取 x 0–299，右码取 x 400–699，黑带随之消失。
   两个码因此成为可以独立排版的元素。

   尺寸全部用百分比表达（源图宽 700 = 窗口宽 300 的 233.3333%），
   无论卡片被缩放多少，裁剪边都精确落在同一条像素线上。
   ========================================================================== */
.mc-qr-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: flex-start;
	margin: 0 0 10px;
}

.mc-qr {
	flex: 1 1 0;
	min-width: 124px;
	padding: 12px;
	background: #fff;
	border: 3px solid var(--mc-border);
	border-radius: var(--mc-radius);
	box-shadow: var(--bevel-out), 0 8px 22px rgba(0, 0, 0, .55);
	transition: transform .28s cubic-bezier(.2, .7, .2, 1), box-shadow .28s ease;
}

.mc-qr:hover {
	transform: translateY(-4px);
	box-shadow: var(--bevel-out), 0 14px 30px rgba(0, 0, 0, .65), 0 0 24px rgba(255, 255, 255, .16);
}

/* 裁剪窗口：padding-top:100% 撑出 1:1 方形（兼容性优于 aspect-ratio） */
.mc-qr-inner {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: #fff;
}

.mc-qr-inner::before {
	content: "";
	display: block;
	padding-top: 100%;
}

/*
 * 选择器必须带上 .otm-mc 与 .mc-qr：
 * 第 08 节的通用规则 `.otm-mc .widget img` 优先级为 (0,2,1)，
 * 若这里只写 `.mc-qr-inner img` (0,1,1) 会被它的 max-width:100% 压回去，
 * 导致图片缩到容器宽度、右码被 left 推出视野（即「左边挤一角、右边全空白」）。
 * 这里同时提高优先级并对待争用的三个属性加 !important，确保裁切绝对生效。
 */
.otm-mc .mc-qr .mc-qr-inner img {
	position: absolute;
	top: 0;
	left: 0;
	width: 233.3333% !important; /* 700 / 300 ：源图宽度相对一个二维码窗口的倍率 */
	height: auto !important;
	max-width: none !important;
	min-width: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
	background: none !important;
	image-rendering: pixelated;
}

/* 左码：直接对齐源图左边缘（x 0–299） */
.otm-mc .mc-qr--l .mc-qr-inner img {
	left: 0 !important;
}

/* 右码：把源图 x=400 拉到窗口 x=0，即左移 400/300 = 133.3333% */
.otm-mc .mc-qr--r .mc-qr-inner img {
	left: -133.3333% !important;
}

/* 两张并排需要更宽的第一栏，顺带重新配比页脚栏目 */
@media screen and (min-width: 48em) {

	.otm-mc .site-footer .widget-column.footer-widget-1 {
		width: 44%;
	}

	.otm-mc .site-footer .widget-column.footer-widget-2 {
		width: 52%;
	}
}

/* 窄屏：两个码各占满一行，避免缩到无法扫码 */
@media screen and (max-width: 30em) {

	.mc-qr {
		flex: 1 1 100%;
		min-width: 0;
	}
}

/* ==========================================================================
   17 v2 精修层：排版节奏与层级
   --------------------------------------------------------------------------
   上一版的问题是「样样都强调」——颜色多、边框重、字距散，导致整体不协调。
   这一层做减法：统一字距与行高、收敛标题层级、拉开留白，让版面安静下来。
   ========================================================================== */
.otm-mc .entry-content p {
	font-size: 1.02rem;
	line-height: 2.05;
	letter-spacing: .012em;
	color: #dde3ea;
}

.otm-mc .entry-content h2 {
	margin: 2.6em 0 .85em;
	font-size: 1.42rem;
	letter-spacing: .01em;
}

.otm-mc .entry-content h3 {
	margin: 2em 0 .7em;
	font-size: 1.16rem;
	letter-spacing: .01em;
}

.otm-mc .entry-content h4 {
	margin: 1.7em 0 .6em;
	font-size: 1.02rem;
	letter-spacing: .02em;
}

/* 首段稍大，形成阅读入口 */
.otm-mc .entry-content > p:first-of-type {
	font-size: 1.08rem;
	color: #fcf5f1;
}

/* ==========================================================================
   18 导航改造为「快捷栏」（hotbar）
   --------------------------------------------------------------------------
   由凸起按钮改为凹陷格子 + 选中时白色描边并抬起，更贴近 MC 的快捷栏交互。
   ========================================================================== */
.otm-mc .navigation-top {
	background: linear-gradient(180deg, rgba(26, 30, 36, .94), rgba(15, 17, 21, .97));
	-webkit-backdrop-filter: blur(10px) saturate(140%);
	backdrop-filter: blur(10px) saturate(140%);
	border-top: 1px solid rgba(255, 255, 255, .06);
	border-bottom: 1px solid #000;
	box-shadow: 0 6px 26px rgba(0, 0, 0, .55);
}

.otm-mc .main-navigation ul li a {
	margin: 6px 3px;
	padding: 9px 18px;
	background: linear-gradient(180deg, #3d3938, #262423);
	border: 1px solid var(--mc-border);
	color: #d0c5c0 !important;
	font-weight: 500;
	letter-spacing: .02em;
	box-shadow: var(--bevel-in);
	transition: transform .14s cubic-bezier(.2, .7, .2, 1), background .14s ease,
		box-shadow .14s ease, color .14s ease;
}

/* 悬停 = MC 快捷栏选中格：白色描边 + 物品抬起 */
.otm-mc .main-navigation ul li a:hover,
.otm-mc .main-navigation ul li a:focus {
	background: linear-gradient(180deg, #3f4650, #2a2f36);
	color: #fff !important;
	transform: translateY(-3px);
	box-shadow: var(--bevel-in), 0 0 0 2px rgba(255, 255, 255, .5), 0 8px 18px rgba(0, 0, 0, .5);
}

.otm-mc .main-navigation ul li a:active,
.otm-mc .main-navigation ul li.current-menu-item > a {
	transform: translateY(1px);
	background: linear-gradient(180deg, #3a6b2c, #2a5220);
	box-shadow: var(--bevel-in), 0 0 0 2px rgba(131, 201, 90, .55);
	color: #f2ffe9 !important;
}

/* 当前页锚点：同源内嵌按钮加一个极小的指示点 */
.otm-mc .main-navigation ul li.mc-embed > a::after {
	content: "";
	display: inline-block;
	width: 4px;
	height: 4px;
	margin-left: 7px;
	vertical-align: 2px;
	background: var(--mc-grass-hi);
	opacity: .75;
}

/* ==========================================================================
   19 Hero 精修
   ========================================================================== */
.otm-mc .custom-header {
	min-height: clamp(380px, 52vh, 560px);
}

.otm-mc .custom-header-media img,
.otm-mc .wp-custom-header img {
	filter: saturate(1.06) contrast(1.05) brightness(.94);
}

.otm-mc .custom-header::after {
	background:
		linear-gradient(180deg, rgba(12, 14, 17, .26) 0%, rgba(12, 14, 17, .54) 46%, rgba(12, 14, 17, .97) 100%),
		radial-gradient(ellipse at 50% 42%, transparent 26%, rgba(0, 0, 0, .5) 100%);
}

.otm-mc .site-title,
.otm-mc .site-title a {
	letter-spacing: .01em;
}

/* ==========================================================================
   20 传送门：把外部页面嵌进本站内打开
   --------------------------------------------------------------------------
   点导航按钮不再跳走，而是在当前页面上浮起一层「MC 窗口」载入目标页。
   目标站未发送 X-Frame-Options / CSP frame-ancestors，可正常内嵌；
   外部站与拒绝内嵌的站点仍走新标签页（脚本里判断）。
   ========================================================================== */
.mc-portal {
	position: fixed;
	inset: 0;
	z-index: 999990;
	display: flex;
	padding: 3vh 3vw;
	background: rgba(6, 8, 11, .84);
	-webkit-backdrop-filter: blur(9px) saturate(120%);
	backdrop-filter: blur(9px) saturate(120%);
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease, visibility .3s;
}

.mc-portal.is-on {
	opacity: 1;
	visibility: visible;
}

.mc-portal-shell {
	display: flex;
	flex-direction: column;
	width: min(1440px, 100%);
	height: 100%;
	margin: 0 auto;
	background: linear-gradient(180deg, var(--mc-panel-hi), var(--mc-panel));
	border: 2px solid var(--mc-border);
	border-radius: var(--mc-radius);
	box-shadow: var(--bevel-out), 0 26px 64px rgba(0, 0, 0, .72);
	transform: translateY(20px) scale(.985);
	transition: transform .36s cubic-bezier(.2, .7, .2, 1);
	overflow: hidden;
}

.mc-portal.is-on .mc-portal-shell {
	transform: none;
}

/* 标题栏：状如 MC 的 GUI 窗框 */
.mc-portal-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	background: linear-gradient(180deg, #3d3938, #262423);
	border-bottom: 2px solid var(--mc-border);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.mc-portal-title {
	flex: 1;
	min-width: 0;
	color: #fff;
	font-size: .95rem;
	font-weight: 600;
	text-shadow: var(--shadow-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mc-portal-title em {
	font-style: normal;
	margin-left: 9px;
	color: var(--mc-text-mute);
	font-size: .82rem;
	font-weight: 400;
}

.mc-portal-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 13px;
	background: linear-gradient(180deg, #3d3938, #262423);
	border: 1px solid var(--mc-border);
	border-radius: var(--mc-radius);
	box-shadow: var(--bevel-btn);
	color: #ede5e2;
	font-family: inherit;
	font-size: .8rem;
	text-decoration: none;
	cursor: pointer;
	transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}

.mc-portal-btn:hover {
	filter: brightness(1.28);
	color: #fff;
	transform: translateY(-1px);
}

.mc-portal-btn:active {
	transform: translateY(1px);
	box-shadow: var(--bevel-btn-on);
}

.mc-portal-btn--x {
	padding: 6px 11px;
	background: linear-gradient(180deg, #b3453f, #8a3630);
	color: #ffffff;
}

.mc-portal-body {
	position: relative;
	flex: 1;
	min-height: 0;
	/* 深色底：弹窗载入瞬间不闪白，与站点整体一致 */
	background: var(--mc-bedrock);
}

.mc-portal-body iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* 载入态：MC 风格的进度条 + 方块 */
.mc-portal-loading {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
	background: var(--mc-bedrock);
	color: var(--mc-text-dim);
	font-size: .92rem;
	transition: opacity .25s ease;
}

.mc-portal-loading.is-hidden {
	opacity: 0;
	pointer-events: none;
}

.mc-cube {
	width: 28px;
	height: 28px;
	background: linear-gradient(135deg, var(--mc-grass-hi), var(--mc-grass-lo));
	box-shadow: inset -3px -3px 0 rgba(0, 0, 0, .42), inset 2px 2px 0 rgba(255, 255, 255, .28);
	animation: mcSpin 1.5s steps(4, end) infinite;
}

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

.mc-loadbar {
	width: min(260px, 60%);
	height: 14px;
	padding: 2px;
	background: var(--mc-slot);
	border: 2px solid var(--mc-border);
	box-shadow: var(--bevel-in);
}

.mc-loadbar i {
	display: block;
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--mc-grass-lo), var(--mc-grass-hi));
}

.mc-portal.is-on .mc-loadbar i {
	animation: mcLoad 2.2s ease-out forwards;
}

@keyframes mcLoad {
	to {
		width: 94%;
	}
}

/* 内嵌失败提示 */
.mc-portal-fail {
	position: absolute;
	inset: 0;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 30px;
	background: var(--mc-bedrock);
	color: var(--mc-text-dim);
	text-align: center;
	font-size: .95rem;
	line-height: 1.9;
}

.mc-portal-fail.is-on {
	display: flex;
}

@media screen and (max-width: 48em) {

	.mc-portal {
		padding: 0;
	}

	.mc-portal-shell {
		width: 100%;
		border: 0;
		border-radius: 0;
	}
}

@media (prefers-reduced-motion: reduce) {

	.mc-cube {
		animation: none;
	}

	.mc-portal,
	.mc-portal-shell {
		transition-duration: .001ms;
	}
}

/* ==========================================================================
   21 首页版式重构
   --------------------------------------------------------------------------
   改造前的问题：
     1. 头图在首页被父主题设成 position:fixed 且靠 transform 居中，
        而覆盖层只改了 transform 没改 position，于是头图变成「固定在视口
        右下方的背景」，从内容面板四周透出来（已修，见 21.1）。
     2. 正文段落带 has-small-font-size 和内联灰色 #bebebe，又小又灰。
     3. 「社区概述」这类小标题原文是 <p><strong>，不是真标题，层级立不起来。
     4. 侧边栏两个视频各自 6~8MB 且 autoplay，打开首页就自动拉流。
   ========================================================================== */

/* --------------------------------------------------------------------------
   21.1 头图定位修复
   --------------------------------------------------------------------------
   父主题（.has-header-image .custom-header-media img，优先级 0,2,1）声明了
   position:fixed / left:50% / top:50% / min-width:100vw，
   本层用同优先级但更靠后的位置全部改写为「填满 Hero 容器」。
   -------------------------------------------------------------------------- */
.otm-mc .custom-header-media img,
.otm-mc .wp-custom-header img {
	position: absolute;
	top: 0;
	left: 0;
	right: auto;
	bottom: auto;
	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;
	max-width: none;
	object-fit: cover;
	object-position: center;
}

/* --------------------------------------------------------------------------
   21.2 两栏骨架：改用 Grid，比例更稳，间距可控
   -------------------------------------------------------------------------- */
@media screen and (min-width: 48em) {

	.otm-mc .site-content > .wrap {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 348px;
		column-gap: 32px;
		align-items: start;
	}

	.otm-mc .site-content > .wrap > .page-header {
		grid-column: 1 / -1;
	}

	.otm-mc .site-content > .wrap > #primary {
		grid-column: 1;
		float: none;
		width: auto;
		max-width: none;
		min-width: 0;
	}

	.otm-mc .site-content > .wrap > #secondary {
		grid-column: 2;
		float: none;
		width: auto;
		max-width: none;
		min-width: 0;
		padding-left: 0;
	}
}

/* 首页那句泛泛的「文章」标题是多余的，正文标题已经说明一切 */
.otm-mc.home .site-content > .wrap > .page-header {
	display: none;
}

/* --------------------------------------------------------------------------
   21.3 文章卡：日期徽标 + 更有分量的标题
   -------------------------------------------------------------------------- */
.otm-mc .site-main > article {
	padding: 32px 36px 36px;
}

.otm-mc .entry-meta {
	margin: 0 0 12px;
	font-size: .8rem;
}

/*
 * 日期徽标。
 * 同时挂在两个选择器上：
 *   .mc-date —— 首页去链接后由模板自行包裹的容器（父主题没有可用的容器类）
 *   a        —— 其它视图（如归档页）日期仍是链接时的样式
 */
.otm-mc .entry-meta a,
.otm-mc .entry-meta .mc-date {
	display: inline-block;
	padding: 5px 13px;
	background: rgba(92, 156, 62, .15);
	border: 1px solid rgba(131, 201, 90, .34);
	border-radius: var(--mc-radius);
	color: var(--mc-grass-hi) !important;
	letter-spacing: .05em;
	text-decoration: none;
	text-shadow: none;
	transition: background .2s ease, border-color .2s ease;
}

.otm-mc .entry-meta a:hover {
	background: rgba(92, 156, 62, .26);
	border-color: rgba(131, 201, 90, .6);
}

.otm-mc .entry-title {
	margin: 0;
	font-size: clamp(1.5rem, 3.2vw, 2.15rem);
	line-height: 1.32;
}

.otm-mc .entry-title a {
	color: #fff;
	text-decoration: none;
}

.otm-mc .entry-title a:hover {
	color: var(--mc-grass-hi);
}

/* --------------------------------------------------------------------------
   21.4 正文排版：覆盖 WP 的小字号与内联灰色
   --------------------------------------------------------------------------
   color 与 font-size 必须带 !important —— 原文用的是内联 style="color:#bebebe"
   和 .has-small-font-size，普通声明压不住内联样式。
   -------------------------------------------------------------------------- */
.otm-mc .entry-content p.has-small-font-size,
.otm-mc .entry-content p.has-normal-font-size {
	font-size: 1.04rem !important;
	line-height: 2.05 !important;
	color: #dfe5ec !important;
	letter-spacing: .012em;
}

.otm-mc .entry-content p {
	margin: 0 0 1.1em;
}

/* 把 <p><strong>区块小标题</strong></p> 排成真正的标题 */
.otm-mc .entry-content p.has-medium-font-size,
.otm-mc .entry-content p.has-large-font-size {
	margin: 2.3em 0 1em !important;
	padding: 11px 0 11px 18px !important;
	font-size: 1.3rem !important;
	line-height: 1.55 !important;
	color: var(--mc-grass-hi) !important;
	border-left: 6px solid var(--mc-grass);
	background: linear-gradient(90deg, rgba(92, 156, 62, .16), transparent 74%);
	text-shadow: var(--shadow-text-lg);
	letter-spacing: .01em;
}

.otm-mc .entry-content p.has-medium-font-size strong,
.otm-mc .entry-content p.has-large-font-size strong {
	font-weight: 700;
}

/* 正文里的分隔线（原文用 * 之类的孤立段落）也统一收敛 */
.otm-mc .entry-content > p:empty {
	display: none;
}

/* --------------------------------------------------------------------------
   21.5 侧边栏媒体栏：视频整幅卡片、画廊拼图、单图成卡
   -------------------------------------------------------------------------- */

/* —— 视频：去掉内边距，让画面铺满卡片 —— */
.otm-mc #secondary .widget_media_video {
	padding: 0;
	overflow: hidden;
	line-height: 0;
}

.otm-mc #secondary .widget_media_video figure,
.otm-mc #secondary .widget_media_video .wp-block-video {
	margin: 0;
}

.otm-mc #secondary .widget_media_video video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border: 0;
	background: #000;
}

/* —— 画廊：首图通栏 + 其余两列成格，比平铺一列更有节奏 —— */
.otm-mc #secondary .wp-block-gallery {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin: 0;
	padding: 16px;
}

.otm-mc #secondary .wp-block-gallery > figure {
	margin: 0;
	overflow: hidden;
	border: 2px solid var(--mc-border);
	border-radius: var(--mc-radius);
	box-shadow: var(--bevel-in);
	transition: transform .28s cubic-bezier(.2, .7, .2, 1);
}

.otm-mc #secondary .wp-block-gallery > figure:hover {
	transform: translateY(-3px);
}

.otm-mc #secondary .wp-block-gallery > figure:first-child {
	grid-column: 1 / -1;
}

.otm-mc #secondary .wp-block-gallery img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border: 0;
	box-shadow: none;
	transition: transform .38s cubic-bezier(.2, .7, .2, 1);
}

.otm-mc #secondary .wp-block-gallery > figure:first-child img {
	aspect-ratio: 16 / 9;
}

.otm-mc #secondary .wp-block-gallery > figure:hover img {
	transform: scale(1.07);
}

/* —— 单图：撑满卡片 —— */
.otm-mc #secondary .widget_media_image {
	padding: 16px;
}

.otm-mc #secondary .widget_media_image img {
	display: block;
	width: 100%;
	height: auto;
	border: 2px solid var(--mc-border);
	box-shadow: var(--bevel-out);
}

/* --------------------------------------------------------------------------
   21.6 视频封面：点一下才播放
   --------------------------------------------------------------------------
   原视频带 autoplay，两个合计约 14MB，打开首页就开始自动拉流。
   改为封面 + 播放按钮后，视频只在用户点击时才加载。
   -------------------------------------------------------------------------- */
.otm-mc .mc-video {
	position: relative;
	display: block;
	overflow: hidden;
	background: #0c0b0b;
	cursor: pointer;
}

.otm-mc .mc-video video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background: #000;
}

.otm-mc .mc-video-cover {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(8, 9, 11, .34);
	transition: background .25s ease, opacity .25s ease;
}

.otm-mc .mc-video-cover::before {
	content: "";
	width: 0;
	height: 0;
	margin-left: 7px;
	border-left: 24px solid #ffffff;
	border-top: 14px solid transparent;
	border-bottom: 14px solid transparent;
	filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, .65));
	transition: transform .22s cubic-bezier(.2, .7, .2, 1);
}

.otm-mc .mc-video:hover .mc-video-cover {
	background: rgba(8, 9, 11, .16);
}

.otm-mc .mc-video:hover .mc-video-cover::before {
	transform: scale(1.12);
}

.otm-mc .mc-video.is-playing .mc-video-cover {
	opacity: 0;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   21.7 窄屏：回到单栏
   -------------------------------------------------------------------------- */
@media screen and (max-width: 47.99em) {

	.otm-mc .site-main > article {
		padding: 24px 20px 26px;
	}

	.otm-mc #secondary.widget-area {
		margin-top: 26px;
	}
}

/* ==========================================================================
   22 统一媒体面板
   --------------------------------------------------------------------------
   改造前：侧边栏把「2 个视频 + 5 图画廊 + 1 张单图」四块各自往下排，
           视觉上就是一堆图片在堆叠，彼此毫无关系。
   改造后：收进同一块面板 —— 上方一个主舞台，下方一条缩略图带，
           点缩略图切换主舞台，配合淡入淡出与缓慢推近，成为一件有交互的整体。

   面板由 assets/js/mc.js 的 initMediaPanel() 依据侧边栏实际部件动态生成，
   因此后台增删部件时面板内容会跟着变，不会与后台脱节。
   ========================================================================== */

/* 面板接管后隐藏原来的部件；脚本没执行时它们照常显示（优雅降级） */
.mc-media-taken > .widget {
	display: none;
}

.mc-media {
	padding: 16px;
	background: linear-gradient(180deg, var(--mc-panel-hi), var(--mc-panel));
	border: 3px solid var(--mc-border);
	border-radius: var(--mc-radius);
	box-shadow: var(--bevel-out), 0 10px 26px rgba(0, 0, 0, .5);
}

/* —— 标题栏 —— */
.mc-media-bar {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 12px;
}

.mc-media-title {
	flex: 1;
	min-width: 0;
	color: var(--mc-grass-hi);
	font-size: .95rem;
	font-weight: 600;
	text-shadow: var(--shadow-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mc-media-count {
	color: var(--mc-text-mute);
	font-size: .8rem;
	font-variant-numeric: tabular-nums;
}

.mc-media-arrow {
	width: 28px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: linear-gradient(180deg, #3d3938, #262423);
	border: 1px solid var(--mc-border);
	border-radius: var(--mc-radius);
	box-shadow: var(--bevel-btn);
	color: #ede5e2;
	font-size: .95rem;
	line-height: 1;
	cursor: pointer;
	transition: transform .14s ease, filter .14s ease;
}

.mc-media-arrow:hover {
	filter: brightness(1.32);
	transform: translateY(-2px);
}

.mc-media-arrow:active {
	transform: translateY(1px);
	box-shadow: var(--bevel-btn-on);
}

/* —— 主舞台 —— */
.mc-media-stage {
	position: relative;
	aspect-ratio: 16 / 10;
	background: #0c0b0b;
	border: 2px solid var(--mc-border);
	border-radius: var(--mc-radius);
	box-shadow: var(--bevel-in);
	overflow: hidden;
	cursor: pointer;
}

.mc-media-stage img,
.mc-media-stage video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity .45s ease, transform 7s cubic-bezier(.16, .7, .3, 1);
}

/* 静图缓慢推近：即使不动，画面也有呼吸感 */
.mc-media-stage img.is-on {
	opacity: 1;
	transform: scale(1.07);
}

.mc-media-stage video.is-on {
	opacity: 1;
	transform: none;
	transition: opacity .45s ease;
}

.mc-media-stage.is-playing {
	cursor: default;
}

/* 切换时的方块加载指示 */
.mc-media-spin {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 24px;
	height: 24px;
	margin: -12px 0 0 -12px;
	background: linear-gradient(135deg, var(--mc-grass-hi), var(--mc-grass-lo));
	box-shadow: inset -3px -3px 0 rgba(0, 0, 0, .42), inset 2px 2px 0 rgba(255, 255, 255, .28);
	animation: mcSpin 1.2s steps(4, end) infinite;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease;
}

.mc-media-spin.is-on {
	opacity: 1;
}

/* 说明条：悬停时浮现 */
.mc-media-cap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 24px 12px 9px;
	background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .84));
	color: #ede5e2;
	font-size: .78rem;
	letter-spacing: .02em;
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s ease;
}

.mc-media-stage:hover .mc-media-cap {
	opacity: 1;
}

/* —— 缩略图带 —— */
.mc-media-strip {
	display: flex;
	gap: 7px;
	margin-top: 12px;
	padding-bottom: 5px;
	overflow-x: auto;
	scrollbar-width: thin;
}

.mc-media-strip::-webkit-scrollbar {
	height: 6px;
}

.mc-media-strip::-webkit-scrollbar-track {
	background: var(--mc-slot);
}

.mc-media-strip::-webkit-scrollbar-thumb {
	background: #4a515a;
	border-radius: 3px;
}

.mc-media-thumb {
	position: relative;
	flex: 0 0 58px;
	height: 40px;
	padding: 0;
	background: var(--mc-slot);
	border: 2px solid var(--mc-border);
	border-radius: var(--mc-radius);
	box-shadow: var(--bevel-in);
	overflow: hidden;
	cursor: pointer;
	transition: transform .2s cubic-bezier(.2, .7, .2, 1), box-shadow .2s ease;
}

.mc-media-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mc-media-thumb:hover {
	transform: translateY(-3px);
	box-shadow: var(--bevel-in), 0 0 0 2px rgba(255, 255, 255, .45);
}

.mc-media-thumb.is-on {
	transform: translateY(-3px);
	box-shadow: var(--bevel-in), 0 0 0 2px var(--mc-grass-hi), 0 0 16px rgba(131, 201, 90, .55);
}

/* 视频缩略图：无论有无封面都盖一层播放三角 */
.mc-media-thumb--video {
	background: linear-gradient(135deg, #2b3138, #171a1e);
}

.mc-media-thumb--video img {
	opacity: .7;
}

.mc-media-thumb--video::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -6px 0 0 -4px;
	border-left: 9px solid rgba(255, 255, 255, .94);
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, .7));
}

/* —— 大图查看 —— */
.mc-media-lb {
	position: fixed;
	inset: 0;
	z-index: 999996;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4vh 4vw;
	background: rgba(5, 6, 9, .94);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	opacity: 0;
	visibility: hidden;
	transition: opacity .28s ease, visibility .28s;
}

.mc-media-lb.is-on {
	opacity: 1;
	visibility: visible;
}

.mc-media-lb img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	border: 2px solid var(--mc-border);
	box-shadow: 0 22px 60px rgba(0, 0, 0, .8);
}

.mc-media-lb-x {
	position: absolute;
	top: 20px;
	right: 20px;
	padding: 7px 15px;
	background: linear-gradient(180deg, #b3453f, #8a3630);
	border: 1px solid var(--mc-border);
	border-radius: var(--mc-radius);
	box-shadow: var(--bevel-btn);
	color: #ffffff;
	font-family: inherit;
	font-size: .82rem;
	cursor: pointer;
}

.mc-media-lb-x:hover {
	filter: brightness(1.25);
}

/* ==========================================================================
   23 v3 设计系统：对齐 minecraft.net
   --------------------------------------------------------------------------
   依据 https://www.minecraft.net/ 的官方实现（mc-components.min.css）：
     · 直角       全站 border-radius:0（官方 CSS 中出现 57 次，无一处圆角）
     · 暖灰底     官方灰是偏棕的暖灰，而非冷蓝灰
     · 官方绿     #6cc349 及其色阶，不用青色等非品牌色
     · 绿色渐变   linear-gradient(180deg,#6cc349,#52a535 50%,#3c8527)
     · 按钮       实心/渐变 + 加粗文字，不用立体斜面
     · 排版       正文克制，标题跨度大（700/800 字重）；
                  大标题字距 -.015em，小标签 +.03em
     · 动效       .2s–.5s 为主，缓动干脆，不做弹跳
   本层只做覆盖，不改动上方已通过验证的结构与交互。
   ========================================================================== */

/* --------------------------------------------------------------------------
   23.1 排版体系
   -------------------------------------------------------------------------- */
.otm-mc .entry-content p,
.otm-mc .entry-content p.has-small-font-size,
.otm-mc .entry-content p.has-normal-font-size {
	font-size: 1rem !important;
	line-height: 1.9 !important;
	color: var(--mc-grey-1) !important;
	letter-spacing: 0;
}

.otm-mc .entry-title {
	font-size: clamp(1.75rem, 3.6vw, 2.5rem);
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -.015em;
}

/* 区块小标题：左侧绿条，去掉渐变底与硬字影 */
.otm-mc .entry-content p.has-medium-font-size,
.otm-mc .entry-content p.has-large-font-size {
	margin: 2.5em 0 1em !important;
	padding: 2px 0 2px 18px !important;
	font-size: 1.5rem !important;
	line-height: 1.35 !important;
	color: var(--mc-off-white) !important;
	border-left: 5px solid var(--mc-green-3);
	background: none;
	text-shadow: none;
	letter-spacing: -.01em;
}

/* 正文链接：官方绿 + 下划线，悬停转白（与 minecraft.net 一致） */
.otm-mc .entry-content a {
	color: var(--mc-green-3);
	border-bottom: 1px solid rgba(108, 195, 73, .5);
	text-decoration: none;
	text-shadow: none;
	transition: color .2s ease, border-color .2s ease;
}

.otm-mc .entry-content a:hover {
	color: var(--mc-off-white);
	border-bottom-color: var(--mc-off-white);
	text-shadow: none;
}

/* --------------------------------------------------------------------------
   23.2 导航：干净顶栏 + 绿色下划线（取代原来的凸起按钮列）
   -------------------------------------------------------------------------- */
.otm-mc .navigation-top {
	background: rgba(23, 22, 21, .94);
	-webkit-backdrop-filter: blur(12px) saturate(140%);
	backdrop-filter: blur(12px) saturate(140%);
	border-top: 0;
	border-bottom: 1px solid rgba(237, 229, 226, .12);
	box-shadow: none;
}

.otm-mc .main-navigation ul li a {
	position: relative;
	margin: 0;
	padding: 16px 15px;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--mc-grey-2) !important;
	font-size: .9375rem;
	font-weight: 700;
	letter-spacing: .01em;
	text-shadow: none;
	transform: none;
	filter: none;
	transition: color .2s ease;
}

.otm-mc .main-navigation ul li a::after {
	content: "";
	position: absolute;
	left: 15px;
	right: 15px;
	bottom: 7px;
	height: 3px;
	background: var(--mc-green-3);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}

.otm-mc .main-navigation ul li a:hover,
.otm-mc .main-navigation ul li a:focus,
.otm-mc .main-navigation ul li a:active,
.otm-mc .main-navigation ul li.current-menu-item > a {
	background: none;
	box-shadow: none;
	transform: none;
	filter: none;
	color: var(--mc-off-white) !important;
}

.otm-mc .main-navigation ul li a:hover::after,
.otm-mc .main-navigation ul li a:focus::after,
.otm-mc .main-navigation ul li a:active::after,
.otm-mc .main-navigation ul li.current-menu-item > a::after {
	transform: scaleX(1);
}

/* 内嵌指示点改为绿色小方块 */
.otm-mc .main-navigation ul li.mc-embed > a::before {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	margin-right: 7px;
	vertical-align: 2px;
	background: var(--mc-green-3);
	opacity: .9;
}

.otm-mc .menu-toggle {
	background: rgba(237, 229, 226, .08);
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--mc-grey-1);
}

/* --------------------------------------------------------------------------
   23.3 Hero
   -------------------------------------------------------------------------- */
.otm-mc .custom-header {
	min-height: clamp(420px, 58vh, 620px);
	border-bottom: 0;
	box-shadow: none;
}

.otm-mc .custom-header::after {
	background:
		linear-gradient(180deg, rgba(23, 22, 21, .28) 0%, rgba(23, 22, 21, .58) 46%, var(--mc-off-black) 100%);
}

.otm-mc .custom-header-media img,
.otm-mc .wp-custom-header img {
	filter: saturate(1.05) contrast(1.03);
}

.otm-mc .site-title,
.otm-mc .site-title a {
	font-size: clamp(2rem, 5.5vw, 4rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.015em;
	text-shadow: none;
}

.otm-mc .site-title a:hover {
	color: var(--mc-green-2) !important;
	text-shadow: none;
}

.otm-mc .site-description {
	margin-top: 14px;
	color: var(--mc-green-3);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-shadow: none;
}

.otm-mc .custom-logo-link img {
	filter: none;
	transition: transform .4s cubic-bezier(.2, .7, .2, 1);
}

.otm-mc .custom-logo-link:hover img {
	transform: scale(1.04);
}

/* --------------------------------------------------------------------------
   23.4 文章卡
   -------------------------------------------------------------------------- */
.otm-mc .site-main > article,
.otm-mc .site-main > .page-header {
	position: relative;
	background: var(--mc-grey-6);
	border: 0;
	box-shadow: none;
	padding: 34px 40px 42px;
}

/* 顶部一道官方绿渐变条，替代原来的立体斜面 */
.otm-mc .site-main > article::before,
.otm-mc .site-main > .page-header::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--mc-grad-green);
}

.otm-mc .entry-header {
	padding-bottom: 18px;
	border-bottom: 1px solid rgba(237, 229, 226, .1);
	box-shadow: none;
}

.otm-mc .entry-meta a,
.otm-mc .entry-meta .mc-date {
	display: inline-block;
	padding: 5px 12px;
	background: var(--mc-green-6);
	border: 0;
	border-radius: 0;
	color: var(--mc-green-1) !important;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .06em;
}

.otm-mc .entry-meta a:hover {
	background: var(--mc-green-5);
}

/* --------------------------------------------------------------------------
   23.5 侧边栏部件与媒体面板
   -------------------------------------------------------------------------- */
.otm-mc #secondary .widget,
.mc-media {
	background: var(--mc-grey-6);
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.otm-mc #secondary .widget {
	padding: 0;
	overflow: hidden;
	transition: none;
}

.otm-mc #secondary .widget:hover {
	transform: none;
	box-shadow: none;
}

.mc-media {
	padding: 0;
}

.mc-media-bar {
	margin: 0;
	padding: 14px 16px;
	border-bottom: 1px solid rgba(237, 229, 226, .1);
}

.mc-media-title {
	color: var(--mc-off-white);
	font-size: .875rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-shadow: none;
}

.mc-media-count {
	color: var(--mc-grey-3);
	font-size: .8125rem;
	font-weight: 700;
}

.mc-media-arrow {
	width: 30px;
	height: 30px;
	background: rgba(237, 229, 226, .08);
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--mc-grey-1);
	transition: background .2s ease, color .2s ease;
}

.mc-media-arrow:hover {
	background: var(--mc-green-4);
	color: #fff;
	transform: none;
	filter: none;
}

.mc-media-arrow:active {
	transform: none;
	box-shadow: none;
}

.mc-media-stage {
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.mc-media-strip {
	margin-top: 0;
	padding: 12px 16px 14px;
}

.mc-media-thumb {
	border: 0;
	border-radius: 0;
	box-shadow: none;
	opacity: .5;
	transition: opacity .25s ease;
}

.mc-media-thumb:hover,
.mc-media-thumb.is-on {
	opacity: 1;
	transform: none;
	box-shadow: inset 0 -3px 0 0 var(--mc-green-3);
}

/* --------------------------------------------------------------------------
   23.6 相册：与全站统一为直角 + 官方绿
   -------------------------------------------------------------------------- */
.otm-mc .mc-gal-item {
	border: 0;
	border-radius: 0;
	background: var(--mc-grey-6);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
	transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease;
}

.otm-mc .mc-gal-item:hover,
.otm-mc .mc-gal-item:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 14px 28px rgba(0, 0, 0, .55);
}

.otm-mc .mc-gal-group {
	color: var(--mc-off-white);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -.01em;
	text-shadow: none;
}

.otm-mc .mc-gal-group::after {
	height: 1px;
	background-image: none;
	background-color: rgba(237, 229, 226, .16);
	opacity: 1;
}

.otm-mc .mc-gal-group i {
	color: var(--mc-grey-3);
	font-size: .8125rem;
}

.otm-mc .mc-gal-chip {
	padding: 9px 18px;
	background: rgba(237, 229, 226, .08);
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--mc-grey-2);
	font-size: .875rem;
	font-weight: 700;
	letter-spacing: .03em;
	transition: background .2s ease, color .2s ease;
}

.otm-mc .mc-gal-chip:hover {
	background: rgba(237, 229, 226, .16);
	color: var(--mc-off-white);
	transform: none;
	box-shadow: none;
}

.otm-mc .mc-gal-chip.is-on {
	background: var(--mc-grad-green);
	color: #fff;
	box-shadow: none;
}

.otm-mc .mc-gal-chip i,
.otm-mc .mc-gal-chip.is-on i {
	color: rgba(255, 255, 255, .78);
}

.otm-mc .mc-gal-sub b {
	color: var(--mc-green-2);
	text-shadow: none;
}

/* --------------------------------------------------------------------------
   23.7 按钮与控件：主操作用官方绿，工具类用中性灰
   -------------------------------------------------------------------------- */
.otm-mc .mc-copy,
.otm-mc .mc-gal-more {
	background: var(--mc-grad-green);
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: #fff;
	font-weight: 700;
	letter-spacing: .03em;
	text-shadow: none;
	transition: filter .2s ease, transform .2s ease;
}

.otm-mc .mc-copy:hover,
.otm-mc .mc-gal-more:hover {
	filter: brightness(1.12);
	transform: translateY(-2px);
	box-shadow: none;
}

.otm-mc .mc-copy:active,
.otm-mc .mc-gal-more:active {
	transform: none;
	box-shadow: none;
}

.otm-mc .mc-copy.is-done {
	background: var(--mc-green-5);
}

.otm-mc .mc-top {
	width: 46px;
	height: 46px;
	background: rgba(237, 229, 226, .1);
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--mc-grey-1);
	transition: background .2s ease, opacity .25s ease, visibility .25s;
}

.otm-mc .mc-top:hover {
	background: var(--mc-green-4);
	color: #fff;
	transform: none;
	filter: none;
}

.otm-mc .mc-top:active {
	transform: none;
	box-shadow: none;
}

/* 进度条：官方绿渐变，收细到 3px */
.otm-mc .mc-xp {
	height: 3px;
	background: var(--mc-grad-green);
	box-shadow: none;
}

/* 提示浮层与 Toast：直角、暖灰、无紫边 */
.otm-mc .mc-tip {
	padding: 9px 13px;
	background: rgba(38, 36, 35, .98);
	border: 0;
	border-left: 3px solid var(--mc-green-3);
	outline: 0;
	box-shadow: 0 8px 20px rgba(0, 0, 0, .5);
	color: var(--mc-off-white);
	font-size: .8125rem;
	text-shadow: none;
}

.otm-mc .mc-toast {
	padding: 14px 22px;
	background: var(--mc-grey-5);
	border: 0;
	border-left: 4px solid var(--mc-green-3);
	border-radius: 0;
	box-shadow: 0 14px 34px rgba(0, 0, 0, .6);
	color: var(--mc-off-white);
	font-weight: 600;
}

.otm-mc .mc-toast b {
	color: var(--mc-green-2);
	text-shadow: none;
}

/* 复制按钮旁的地址：等宽 + 官方绿 */
.otm-mc .mc-host {
	color: var(--mc-green-2);
	text-shadow: none;
}

/* --------------------------------------------------------------------------
   23.8 传送门 / 灯箱：直角扁平
   -------------------------------------------------------------------------- */
.mc-portal,
.mc-lb,
.mc-media-lb {
	background: rgba(12, 11, 11, .9);
}

.mc-portal-shell,
.mc-lb-shell {
	background: var(--mc-grey-6);
	border: 1px solid rgba(237, 229, 226, .14);
	border-radius: 0;
	box-shadow: 0 30px 70px rgba(0, 0, 0, .7);
}

.mc-portal-bar,
.mc-lb-bar {
	background: var(--mc-grey-5);
	border-bottom: 1px solid rgba(237, 229, 226, .12);
	box-shadow: none;
}

.mc-portal-title,
.mc-lb-title {
	color: var(--mc-off-white);
	font-weight: 700;
	text-shadow: none;
}

.mc-portal-btn,
.mc-lb-btn {
	padding: 7px 15px;
	background: rgba(237, 229, 226, .1);
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--mc-grey-1);
	font-weight: 700;
	letter-spacing: .03em;
	transition: background .2s ease, color .2s ease;
}

.mc-portal-btn:hover,
.mc-lb-btn:hover {
	background: var(--mc-green-4);
	color: #fff;
	transform: none;
	filter: none;
}

.mc-portal-btn--x,
.mc-lb-btn--x,
.mc-media-lb-x {
	background: rgba(210, 85, 79, .22);
	color: #f3b6b3;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.mc-portal-btn--x:hover,
.mc-lb-btn--x:hover,
.mc-media-lb-x:hover {
	background: #b3453f;
	color: #fff;
	filter: none;
}

.mc-portal-body {
	background: var(--mc-off-black);
}

.mc-portal-loading,
.mc-media-lb img,
.mc-lb-stage img {
	box-shadow: none;
}

.mc-lb-stage {
	background: #0c0b0b;
}

/* --------------------------------------------------------------------------
   23.9 页脚
   -------------------------------------------------------------------------- */
.otm-mc .site-footer {
	padding: 52px 0 28px;
	background: #131211;
	border-top: 1px solid rgba(237, 229, 226, .1);
	box-shadow: none;
	color: var(--mc-grey-2);
}

.otm-mc .site-footer .widget-title,
.otm-mc .site-footer h2 {
	color: var(--mc-off-white);
	font-size: .9375rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-shadow: none;
	border-bottom: 0;
}

.otm-mc .site-info {
	border-top: 1px solid rgba(237, 229, 226, .1);
	color: var(--mc-grey-3);
}

.otm-mc .site-info a {
	color: var(--mc-green-3);
	border-bottom: 0;
}

.otm-mc .site-info a:hover {
	color: var(--mc-off-white);
}

/* 页脚二维码卡片也随之改为直角扁平 */
.otm-mc .mc-qr {
	padding: 12px;
	background: #fff;
	border: 0;
	border-radius: 0;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}

.otm-mc .mc-qr:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 28px rgba(0, 0, 0, .55);
}

/* --------------------------------------------------------------------------
   23.10 滚动条与选中态
   -------------------------------------------------------------------------- */
.otm-mc ::selection {
	background: var(--mc-green-4);
	color: #fff;
}

.otm-mc ::-webkit-scrollbar {
	width: 12px;
	height: 12px;
}

.otm-mc ::-webkit-scrollbar-track {
	background: var(--mc-off-black);
	box-shadow: none;
}

.otm-mc ::-webkit-scrollbar-thumb {
	background: var(--mc-grey-5);
	border: 0;
	box-shadow: none;
}

.otm-mc ::-webkit-scrollbar-thumb:hover {
	background: var(--mc-grey-4);
}

/* ==========================================================================
   24 v4 融合层：让模块与背景融到一起，并收敛标题
   --------------------------------------------------------------------------
   反馈的两个问题：
     1. 融入感差 —— 整页是「死平的深色底 + 贴上去的方块」，
        卡片与背景仅靠明度差区分，既生硬又没有整体感。
        解法：背景不再是纯色（加一层极淡的绿色辉光做纵深），
              卡片改为半透明暖灰 —— 于是模块是「从背景里透出来」，
              而不是「糊在背景上」。
     2. 标题突兀 —— 800 字重的白色黑体压在暗图上，又大又硬。
        解法：降到 700，缩小一档，字距按中文调整；
              并把副标题提为标题上方的 eyebrow（官网 Hero 的常见结构），
              用一小行绿色小字做视觉引子，标题才不孤单。
   ========================================================================== */

/* --------------------------------------------------------------------------
   24.1 背景：给页面一点纵深，不再是死平一块
   -------------------------------------------------------------------------- */
body.otm-mc {
	background-color: #131211;
	background-image:
		/* 顶部一层极淡的绿辉，呼应品牌绿，同时让半透明卡片有东西可透 */
		radial-gradient(1500px 820px at 50% -8%, rgba(108, 195, 73, .07), transparent 62%),
		/* 底部轻微压暗，形成纵向层次 */
		linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .35) 100%),
		/* 保留的 4px 像素网格 */
		repeating-linear-gradient(0deg, rgba(255, 255, 255, .012) 0 1px, transparent 1px 4px);
	background-attachment: fixed;
}

/* --------------------------------------------------------------------------
   24.2 Hero：降低压暗、收紧高度，图片才看得见
   -------------------------------------------------------------------------- */
.otm-mc .custom-header {
	min-height: clamp(360px, 46vh, 520px);
}

.otm-mc .custom-header::after {
	background:
		linear-gradient(180deg,
			rgba(19, 18, 17, .34) 0%,
			rgba(19, 18, 17, .22) 34%,
			rgba(19, 18, 17, .62) 78%,
			rgba(19, 18, 17, .98) 100%),
		radial-gradient(ellipse at 50% 45%, transparent 34%, rgba(0, 0, 0, .38) 100%);
}

.otm-mc .site-branding {
	padding: 96px 0 108px;
}

/*
 * 副标题提为 eyebrow：置于标题上方，小号 + 加宽字距 + 品牌绿。
 * 用 flex 反向排列即可，不需要改模板或内容。
 */
.otm-mc .site-branding-text {
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
}

.otm-mc .site-title,
.otm-mc .site-title a {
	font-size: clamp(1.7rem, 4.2vw, 3rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .02em;
	text-shadow: 0 2px 26px rgba(0, 0, 0, .6);
}

.otm-mc .site-description {
	margin: 0 0 16px;
	color: var(--mc-green-3);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .3em;
	text-indent: .3em; /* 补偿字距在行尾多出的空隙，使视觉居中 */
	text-transform: uppercase;
	text-shadow: 0 1px 12px rgba(0, 0, 0, .6);
}

/* --------------------------------------------------------------------------
   24.3 导航压到 Hero 上：不再是悬空的一块板
   -------------------------------------------------------------------------- */
.otm-mc .navigation-top {
	/* 必须保持 sticky —— 写成 relative 会把粘顶导航弄坏 */
	position: sticky;
	top: 0;
	z-index: 60;
	/* 负外边距把它提上去压在 Hero 图底部，与图片连成一体而不是悬空一块板 */
	margin-top: -62px;
	background: rgba(19, 18, 17, .72);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
	border-top: 0;
	border-bottom: 1px solid rgba(237, 229, 226, .1);
}

/* --------------------------------------------------------------------------
   24.4 模块：半透明暖灰 + 一道极淡描边
   --------------------------------------------------------------------------
   关键是「半透明」—— 背景那层绿辉会从卡片里微微透出来，
   卡片与背景因此属于同一个空间，而不是两张贴纸。
   -------------------------------------------------------------------------- */
.otm-mc .site-main > article,
.otm-mc .site-main > .page-header,
.otm-mc #secondary .widget,
.mc-media,
.otm-mc .mc-gal-item {
	background: rgba(38, 36, 35, .68);
	border: 1px solid rgba(237, 229, 226, .075);
	box-shadow: none;
}

/* 相册格保持图片满铺，只留描边 */
.otm-mc .mc-gal-item {
	background: rgba(38, 36, 35, .5);
}

.otm-mc .site-main > article::before,
.otm-mc .site-main > .page-header::before {
	background: var(--mc-grad-green);
}

/* 媒体面板内部的标题栏与缩略图带用更淡的分隔线 */
.mc-media-bar {
	border-bottom: 1px solid rgba(237, 229, 226, .07);
}

/* 页脚也一并「透气」，避免与上方割裂 */
.otm-mc .site-footer {
	background: rgba(19, 18, 17, .6);
}

/* --------------------------------------------------------------------------
   24.5 间距节奏：统一为 24px 栏距与一致的上下呼吸
   -------------------------------------------------------------------------- */
@media screen and (min-width: 48em) {

	.otm-mc .site-content > .wrap {
		column-gap: 24px;
	}
}

.otm-mc .site-content {
	padding-top: 32px;
}

.otm-mc .site-main > article {
	padding: 32px 36px 40px;
	margin-bottom: 24px;
}

.otm-mc #secondary .widget {
	margin-bottom: 24px;
}

/* --------------------------------------------------------------------------
   24.6 窄屏适配
   -------------------------------------------------------------------------- */
@media screen and (max-width: 47.99em) {

	.otm-mc .navigation-top {
		margin-top: -46px;
	}

	.otm-mc .site-branding {
		padding: 74px 0 86px;
	}

	.otm-mc .site-title,
	.otm-mc .site-title a {
		font-size: clamp(1.5rem, 6.4vw, 2rem);
	}

	.otm-mc .site-description {
		letter-spacing: .2em;
		text-indent: .2em;
	}
}

/* ==========================================================================
   25 v5 一体性：整块内容共用一块底面
   --------------------------------------------------------------------------
   反馈：「要有一体性，不要一块一块的」。
   此前是「文章一个盒子 + 媒体一个盒子」并排，各带自己的底色与描边，
   读起来像两个贴纸。现在改为：两栏共用同一块底面，中间只用一道极淡的
   竖线分栏；顶部只有一条绿条，而不是两块各一条。
   ========================================================================== */
@media screen and (min-width: 48em) {

	.otm-mc .site-content > .wrap {
		position: relative;
		display: grid;
		grid-template-columns: minmax(0, 1fr); /* 默认单栏 */
		background: rgba(38, 36, 35, .62);
		border: 1px solid rgba(237, 229, 226, .075);
	}

	/* 只有存在侧栏时才分两栏（相册页没有侧栏，走单栏） */
	.otm-mc.has-sidebar .site-content > .wrap {
		grid-template-columns: minmax(0, 1fr) 356px;
	}

	.otm-mc .site-content > .wrap > #primary {
		padding: 36px 40px 42px;
	}

	.otm-mc.has-sidebar .site-content > .wrap > #secondary {
		padding: 34px 30px 36px;
		border-left: 1px solid rgba(237, 229, 226, .075);
		background: rgba(0, 0, 0, .14); /* 右栏压深一档：分栏但不割裂 */
	}

	/* 整块底面顶部一条绿渐变，代替原先两块各一条 */
	.otm-mc .site-content > .wrap::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 4px;
		background: var(--mc-grad-green);
		pointer-events: none;
	}
}

/* 文章不再是一张卡片：它已经在这块底面上了 */
.otm-mc .site-main > article,
.otm-mc .site-main > .page-header {
	background: none;
	border: 0;
	padding: 0;
	margin: 0 0 28px;
	box-shadow: none;
}

.otm-mc .site-main > article::before,
.otm-mc .site-main > .page-header::before {
	display: none; /* 绿条已上移到整块底面 */
}

/* 侧栏部件同样去掉自己的盒子，只作为底面上的一个章节存在 */
.otm-mc #secondary .widget {
	background: none;
	border: 0;
	padding: 0;
	margin: 0 0 30px;
	box-shadow: none;
}

/* --------------------------------------------------------------------------
   25.2 媒体区重做：读起来像「文章的媒体章节」，而不是一个控件盒
   -------------------------------------------------------------------------- */
.mc-media {
	background: none;
	border: 0;
	padding: 0;
	box-shadow: none;
}

.mc-media-label {
	margin: 0 0 18px;
	padding: 2px 0 2px 14px;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.45;
	color: var(--mc-off-white);
	border-left: 4px solid var(--mc-green-3); /* 与文章小标题同款 */
	letter-spacing: -.01em;
}

.mc-media-stage {
	aspect-ratio: 16 / 9; /* 与玩家截图原始比例一致，不裁切 */
	background: #0c0b0b;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.mc-media-cap {
	font-size: .75rem;
	letter-spacing: .04em;
}

.mc-media-strip {
	display: flex;
	gap: 6px;
	margin-top: 12px;
	padding: 0 0 4px;
	overflow-x: auto;
}

.mc-media-thumb {
	flex: 0 0 52px;
	height: 38px;
	background: rgba(0, 0, 0, .4);
	border: 0;
	border-radius: 0;
	box-shadow: none;
	opacity: .42;
	transition: opacity .25s ease;
}

.mc-media-thumb:hover,
.mc-media-thumb.is-on {
	opacity: 1;
	transform: none;
	box-shadow: inset 0 -3px 0 0 var(--mc-green-3);
}

/* 计数与翻页收在右下角，顶部不再压一条工具栏 */
.mc-media-foot {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid rgba(237, 229, 226, .07);
}

.mc-media-count {
	flex: 1;
	color: var(--mc-grey-3);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .06em;
}

.mc-media-arrow {
	width: 30px;
	height: 30px;
	background: rgba(237, 229, 226, .08);
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--mc-grey-1);
	font-size: 1rem;
	transition: background .2s ease, color .2s ease;
}

.mc-media-arrow:hover {
	background: var(--mc-green-4);
	color: #fff;
	transform: none;
	filter: none;
}

/* 旧的工具栏标题栏样式已被新结构取代 */
.mc-media-bar,
.mc-media-title {
	display: none;
}

/* --------------------------------------------------------------------------
   25.3 窄屏：底面继续延伸，侧栏改为下方一段
   -------------------------------------------------------------------------- */
@media screen and (max-width: 47.99em) {

	.otm-mc .site-content > .wrap {
		position: relative;
		background: rgba(38, 36, 35, .62);
		border: 1px solid rgba(237, 229, 226, .075);
	}

	.otm-mc .site-content > .wrap > #primary {
		padding: 26px 20px 28px;
	}

	.otm-mc #secondary.widget-area {
		margin-top: 0;
		padding: 24px 20px 28px;
		border-top: 1px solid rgba(237, 229, 226, .075);
	}

	.otm-mc .site-content > .wrap::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 4px;
		background: var(--mc-grad-green);
		pointer-events: none;
	}
}

/* ==========================================================================
   26 v6 拟物层：材质 + 斜面 + 投影
   --------------------------------------------------------------------------
   需求：整体要拟物风格，不要扁平；但元素之间必须协调。
   --------------------------------------------------------------------------
   「协调」不是靠把所有效果都堆上去，而是靠三条纪律：

     1. 统一光源 —— 全站只有一盏灯，从左上照来。
        凸起 = 左上亮、右下暗；凹陷 = 正好反过来。没有一个元素例外，
        所以按钮、卡片、凹槽看起来才像同一个空间里的东西。
     2. 统一材质 —— 只用「深板岩」一种石头（stone.png 做底、grain.png 做颗粒），
        所有面都是同一块石头的不同受光面，而不是各用各的质感。
     3. 统一层级 —— 全站只用三档投影：贴地 / 浮起 / 对话。
        不再随手加阴影，深度关系因此可以被读懂。

   材质贴图由 tools/build-textures.php 生成，两张加起来不到 2 KB。
   ========================================================================== */
:root {
	/* 光源一致的两组斜面 */
	--bevel-up: inset 3px 3px 0 0 rgba(255, 255, 255, .10), inset -3px -3px 0 0 rgba(0, 0, 0, .58);
	--bevel-up-sm: inset 2px 2px 0 0 rgba(255, 255, 255, .12), inset -2px -2px 0 0 rgba(0, 0, 0, .55);
	--bevel-down: inset 3px 3px 0 0 rgba(0, 0, 0, .58), inset -3px -3px 0 0 rgba(255, 255, 255, .09);
	--bevel-down-sm: inset 2px 2px 0 0 rgba(0, 0, 0, .55), inset -2px -2px 0 0 rgba(255, 255, 255, .10);

	/* 所有材质块共用同一道暗边 */
	--edge: 2px solid #0b0a0a;

	/* 三档投影，不再有第四档 */
	--drop-ground: 0 3px 0 rgba(0, 0, 0, .38), 0 8px 18px rgba(0, 0, 0, .42);
	--drop-float: 0 5px 0 rgba(0, 0, 0, .42), 0 14px 30px rgba(0, 0, 0, .50);
	--drop-dialog: 0 8px 0 rgba(0, 0, 0, .45), 0 30px 70px rgba(0, 0, 0, .68);

	--tex-grain: url("/art-cache/tex/grain.png");
	--tex-stone: url("/art-cache/tex/stone.png");
}

/* --------------------------------------------------------------------------
   26.1 页面底：整块深板岩
   -------------------------------------------------------------------------- */
body.otm-mc {
	background-color: #1a1918;
	background-image: var(--tex-stone);
	background-repeat: repeat;
	background-attachment: fixed;
}

/* --------------------------------------------------------------------------
   26.2 内容底面：一块凸起的石材
   -------------------------------------------------------------------------- */
@media screen and (min-width: 48em) {

	.otm-mc .site-content > .wrap {
		background-color: #2e2c2b;
		background-image: var(--tex-grain), linear-gradient(180deg, #363431, #292726);
		border: var(--edge);
		box-shadow: var(--bevel-up), var(--drop-float);
	}

	/* 顶部的草方块边缘：一道凸起的绿条 */
	.otm-mc .site-content > .wrap::after {
		height: 5px;
		background: var(--mc-grad-green);
		box-shadow:
			inset 0 2px 0 rgba(255, 255, 255, .22),
			inset 0 -2px 0 rgba(0, 0, 0, .45);
	}
}

/* --------------------------------------------------------------------------
   26.3 导航：凸起的石条，菜单项是凹槽
   -------------------------------------------------------------------------- */
.otm-mc .navigation-top {
	background-color: #332f2d;
	background-image: var(--tex-grain), linear-gradient(180deg, #3d3936, #2b2826);
	border-bottom: var(--edge);
	box-shadow:
		inset 0 2px 0 rgba(255, 255, 255, .08),
		inset 0 -2px 0 rgba(0, 0, 0, .5),
		0 4px 0 rgba(0, 0, 0, .35);
}

.otm-mc .main-navigation ul li a {
	margin: 6px 3px;
	padding: 10px 16px;
	background-color: rgba(255, 255, 255, .028);
	background-image: var(--tex-grain);
	border: 1px solid rgba(0, 0, 0, .55);
	box-shadow: var(--bevel-down-sm);
	color: var(--mc-grey-2) !important;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, .55);
	transform: none;
	filter: none;
}

/* 扁平下划线是上一版的做法，拟物版改用凹槽高亮 */
.otm-mc .main-navigation ul li a::after {
	display: none;
}

.otm-mc .main-navigation ul li a:hover,
.otm-mc .main-navigation ul li a:focus,
.otm-mc .main-navigation ul li a:active,
.otm-mc .main-navigation ul li.current-menu-item > a {
	background-color: rgba(108, 195, 73, .18);
	box-shadow: var(--bevel-down-sm), inset 0 0 0 1px rgba(134, 213, 98, .5);
	color: var(--mc-off-white) !important;
	transform: none;
	filter: none;
}

.otm-mc .menu-toggle {
	background-color: rgba(255, 255, 255, .05);
	background-image: var(--tex-grain);
	border: var(--edge);
	box-shadow: var(--bevel-up-sm);
	color: var(--mc-grey-1);
}

/* --------------------------------------------------------------------------
   26.4 Hero：图片底部压一道内凹，与下方石面衔接
   -------------------------------------------------------------------------- */
.otm-mc .custom-header {
	box-shadow: inset 0 -8px 0 rgba(0, 0, 0, .42);
}

.otm-mc .site-title,
.otm-mc .site-title a {
	text-shadow: 2px 2px 0 rgba(0, 0, 0, .7), 0 6px 30px rgba(0, 0, 0, .6);
}

/* --------------------------------------------------------------------------
   26.5 文章内的小件：日期做凹槽，标题加硬字影
   -------------------------------------------------------------------------- */
.otm-mc .entry-header {
	border-bottom: 0;
	padding-bottom: 20px;
	box-shadow: 0 2px 0 rgba(0, 0, 0, .45);
}

.otm-mc .entry-meta a,
.otm-mc .entry-meta .mc-date {
	padding: 5px 13px;
	background-color: #232120;
	background-image: var(--tex-grain);
	border: 1px solid rgba(0, 0, 0, .6);
	box-shadow: var(--bevel-down-sm);
	color: var(--mc-green-2) !important;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, .55);
}

.otm-mc .entry-title,
.otm-mc .entry-content h2,
.otm-mc .entry-content h3,
.otm-mc .entry-content h4 {
	text-shadow: 2px 2px 0 rgba(0, 0, 0, .6);
}

.otm-mc .entry-content p.has-medium-font-size,
.otm-mc .entry-content p.has-large-font-size {
	border-left: 5px solid var(--mc-green-3);
	box-shadow: inset 4px 0 0 rgba(255, 255, 255, .06);
}

/* --------------------------------------------------------------------------
   26.6 相册格：一块块凸起的小石板
   -------------------------------------------------------------------------- */
.otm-mc .mc-gal-item {
	background-color: #2b2928;
	border: var(--edge);
	box-shadow: var(--bevel-up-sm), var(--drop-ground);
}

.otm-mc .mc-gal-item:hover,
.otm-mc .mc-gal-item:focus-visible {
	transform: translateY(-4px);
	box-shadow: var(--bevel-up-sm), var(--drop-float);
}

.otm-mc .mc-gal-chip {
	background-color: rgba(255, 255, 255, .03);
	background-image: var(--tex-grain);
	border: 1px solid rgba(0, 0, 0, .55);
	box-shadow: var(--bevel-down-sm);
	color: var(--mc-grey-2);
}

.otm-mc .mc-gal-chip:hover {
	background-color: rgba(255, 255, 255, .07);
	color: var(--mc-off-white);
	transform: none;
	box-shadow: var(--bevel-down-sm);
}

.otm-mc .mc-gal-chip.is-on {
	background-color: var(--mc-green-4);
	background-image: var(--tex-grain), var(--mc-grad-green);
	box-shadow: var(--bevel-up-sm);
	color: #fff;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, .45);
}

/* --------------------------------------------------------------------------
   26.7 绿色按钮：凸起，按下时凹陷
   -------------------------------------------------------------------------- */
.otm-mc .mc-copy,
.otm-mc .mc-gal-more {
	background-color: var(--mc-green-4);
	background-image: var(--tex-grain), var(--mc-grad-green);
	border: var(--edge);
	box-shadow: var(--bevel-up-sm), var(--drop-ground);
	color: #fff;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, .45);
}

.otm-mc .mc-copy:hover,
.otm-mc .mc-gal-more:hover {
	filter: brightness(1.08);
	transform: none;
	box-shadow: var(--bevel-up-sm), var(--drop-ground);
}

.otm-mc .mc-copy:active,
.otm-mc .mc-gal-more:active {
	transform: translateY(3px);
	box-shadow: var(--bevel-down-sm);
}

.otm-mc .mc-copy.is-done {
	background-image: var(--tex-grain), linear-gradient(180deg, #52a535, #2a641c);
}

.otm-mc .mc-top {
	background-color: #332f2d;
	background-image: var(--tex-grain), linear-gradient(180deg, #3d3936, #2b2826);
	border: var(--edge);
	box-shadow: var(--bevel-up-sm), var(--drop-ground);
	color: var(--mc-grey-1);
}

.otm-mc .mc-top:hover {
	background-color: var(--mc-green-4);
	background-image: var(--tex-grain), var(--mc-grad-green);
	color: #fff;
	transform: none;
}

/* 进度条做成一根凸起的管子 */
.otm-mc .mc-xp {
	height: 5px;
	box-shadow:
		inset 0 2px 0 rgba(255, 255, 255, .3),
		inset 0 -2px 0 rgba(0, 0, 0, .4),
		0 2px 0 rgba(0, 0, 0, .4);
}

/* --------------------------------------------------------------------------
   26.8 浮层：凸起的对话框
   -------------------------------------------------------------------------- */
.mc-portal-shell,
.mc-lb-shell {
	background-color: #2e2c2b;
	background-image: var(--tex-grain), linear-gradient(180deg, #363431, #292726);
	border: var(--edge);
	box-shadow: var(--bevel-up), var(--drop-dialog);
}

.mc-portal-bar,
.mc-lb-bar {
	background-color: #3a3634;
	background-image: var(--tex-grain), linear-gradient(180deg, #423d3a, #302c2a);
	border-bottom: var(--edge);
	box-shadow: inset 0 2px 0 rgba(255, 255, 255, .08), inset 0 -2px 0 rgba(0, 0, 0, .5);
}

.mc-portal-btn,
.mc-lb-btn {
	background-color: rgba(255, 255, 255, .05);
	background-image: var(--tex-grain);
	border: 1px solid rgba(0, 0, 0, .55);
	box-shadow: var(--bevel-up-sm);
	color: var(--mc-grey-1);
	text-shadow: 1px 1px 0 rgba(0, 0, 0, .5);
}

.mc-portal-btn:hover,
.mc-lb-btn:hover {
	background-color: var(--mc-green-4);
	background-image: var(--tex-grain), var(--mc-grad-green);
	color: #fff;
	transform: none;
	filter: none;
}

.mc-portal-btn--x,
.mc-lb-btn--x,
.mc-media-lb-x {
	background-color: #6d2b28;
	background-image: var(--tex-grain);
	border: 1px solid rgba(0, 0, 0, .55);
	box-shadow: var(--bevel-up-sm);
	color: #f3d3d1;
}

.mc-portal-btn--x:hover,
.mc-lb-btn--x:hover,
.mc-media-lb-x:hover {
	background-color: #8a3630;
	color: #fff;
	filter: none;
}

/* --------------------------------------------------------------------------
   26.9 页脚：向上凸起的一层石台
   -------------------------------------------------------------------------- */
.otm-mc .site-footer {
	background-color: #201e1d;
	background-image: var(--tex-grain), linear-gradient(180deg, #262423, #1b1a19);
	border-top: var(--edge);
	box-shadow: inset 0 3px 0 rgba(255, 255, 255, .05), 0 -4px 0 rgba(0, 0, 0, .3);
}

/* 二维码卡片：白色小石板 */
.otm-mc .mc-qr {
	border: var(--edge);
	box-shadow: var(--bevel-up-sm), var(--drop-ground);
}

.otm-mc .mc-qr:hover {
	transform: translateY(-4px);
	box-shadow: var(--bevel-up-sm), var(--drop-float);
}

/* 滚动条：凹槽 + 凸起滑块 */
.otm-mc ::-webkit-scrollbar-track {
	background-color: #171615;
	box-shadow: var(--bevel-down-sm);
}

.otm-mc ::-webkit-scrollbar-thumb {
	background-color: #3d3938;
	background-image: var(--tex-grain);
	border: 0;
	box-shadow: var(--bevel-up-sm);
}

/* --------------------------------------------------------------------------
   26.10 首页取消侧栏：媒体面板已移除，正文改单栏
   --------------------------------------------------------------------------
   侧栏是「隐藏」而不是「删除」—— 那些部件仍在 WordPress 后台里，
   需要恢复时删掉本节即可。
   -------------------------------------------------------------------------- */
.otm-mc.home .site-content > .wrap > #secondary {
	display: none;
}

.otm-mc.home.has-sidebar .site-content > .wrap {
	grid-template-columns: minmax(0, 1fr);
}

/* 单栏后正文若铺满 1200px，每行四五十字太宽，收窄到舒适阅读宽度 */
@media screen and (min-width: 48em) {

	.otm-mc.home .site-content > .wrap {
		max-width: 900px;
		margin-left: auto;
		margin-right: auto;
	}

	.otm-mc.home .site-content > .wrap > #primary {
		padding: 40px 46px 46px;
	}
}

/* ==========================================================================
   27 v7 修复层：夺回被父主题压过的首页样式
   --------------------------------------------------------------------------
   用带媒体查询求值的级联分析器查了一遍，发现 Twenty Seventeen 在首页
   （.home.blog / .home.blog.has-header-image）有一整套优先级 30–50 的规则，
   而我此前的选择器普遍只有 20 —— 被大量压过，这才是几处「莫名其妙的丑」的来源：

     · .home.blog .entry-title (30)
         color:#666 / font-weight:300 / font-size:1.625rem
         → 首页标题一直是灰、细、小的。这就是「欢迎来到…」太淡的真正原因。

     · .home.blog.has-header-image .custom-header-media (40)
         position:relative / height:100vh / max-height:100%
         → 头图不在文档流之外，而是以 100vh 高留在流内，把 Hero 整个撑成
           一屏高，图片也按视口高度被拉伸。

     · .home.blog.has-header-image .site-branding (40)
         margin-bottom:70px
         → Hero 底部平白多出 70px 死区。

     · .home.blog.has-header-image .custom-header-media::before (50)
         自带一层 30% 黑遮罩
         → 与我们的渐变叠加，把头图压得发闷。

   这里统一用「5 个类的选择器」（优先级 50）压过去，只作用于首页，不影响其它页面。
   ========================================================================== */

/* --------------------------------------------------------------------------
   27.1 文章标题：亮起来、立起来
   --------------------------------------------------------------------------
   「欢迎」的感觉来自三件事：够亮、够重、够大，再加一圈暖绿辉光。
   -------------------------------------------------------------------------- */
.otm-mc.home.blog .entry-title {
	color: var(--mc-off-white);
	font-size: clamp(1.85rem, 3.8vw, 2.7rem);
	font-weight: 800;
	line-height: 1.24;
	letter-spacing: .01em;
	text-shadow:
		2px 2px 0 rgba(0, 0, 0, .62),
		0 0 38px rgba(134, 213, 98, .18);
}

/* --------------------------------------------------------------------------
   27.2 头图：回到绝对定位，Hero 高度由我们说了算
   -------------------------------------------------------------------------- */
.otm-mc.home.blog.has-header-image .custom-header-media,
.otm-mc.home.blog.has-header-video .custom-header-media {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	height: 100%;
	max-height: none;
	overflow: hidden;
}

/* 关掉父主题那层 30% 黑遮罩 —— 我们已有自己的渐变，叠起来只会把图压闷 */
.otm-mc.home.blog.has-header-image .custom-header-media::before,
.otm-mc.home.blog.has-header-video .custom-header-media::before {
	display: none;
}

.otm-mc.home.blog.has-header-image .custom-header,
.otm-mc.home.blog.has-header-video .custom-header {
	display: block;
	height: auto;
	width: 100%;
	min-height: clamp(380px, 50vh, 540px);
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   27.3 站点品牌：清掉父主题多给的底部外边距
   -------------------------------------------------------------------------- */
.otm-mc.home.blog.has-header-image .site-branding,
.otm-mc.home.blog.has-header-video .site-branding {
	position: relative;
	top: auto;
	right: auto;
	bottom: auto;
	left: auto;
	display: block;
	width: auto;
	height: auto;
	margin-bottom: 0;
	padding: 100px 0 92px;
	vertical-align: baseline;
}

/* --------------------------------------------------------------------------
   27.4 顺带确认：Hero 里的副标题与主标题在首页用同一套字重逻辑
   -------------------------------------------------------------------------- */
.otm-mc.home.blog .site-description {
	color: var(--mc-green-3);
	font-weight: 700;
}

.otm-mc.home.blog .site-title,
.otm-mc.home.blog .site-title a {
	color: var(--mc-off-white) !important;
}

/* ==========================================================================
   28 v8 MC 元素层
   --------------------------------------------------------------------------
   挑的是「辨识度高、又不喧宾夺主」的几样，全部由 CSS 绘制，不额外请求图片：
     · 等距方块（三个面用 clip-path 拼出）—— MC 最具代表性的造型
     · 草方块边缘 —— 区块标题与内容底面顶部
     · 环境粒子 —— Hero 里缓缓上浮的方块碎屑
     · 成就提示 —— 复制地址时的弹窗改成 MC 的「成就达成」
     · 基岩底边 —— 页脚底部参差不齐的收口
   ========================================================================== */

/* --------------------------------------------------------------------------
   28.1 等距方块：顶面 + 左右两个侧面拼出立体块
   --------------------------------------------------------------------------
   一个元素 + 两个伪元素 = 三个面。改色只需覆盖 --iso-* 三个变量。

   几何说明（盒子 26×30，两个伪元素都铺满整个盒子，靠 clip-path 定位）：
     顶面菱形  顶点 y=0，左右顶点 y=21.7%，下顶点 y=43.3%
     侧面      从左右顶点（y=21.7%）向下，底边收于 y=78.3% 与 y=100%
   侧面必须在 y=21.7% 就开始，否则顶面与侧面之间会露出一段空白。
   -------------------------------------------------------------------------- */
.mc-iso {
	position: relative;
	display: inline-block;
	width: 26px;
	height: 30px;
	vertical-align: -7px;
	flex: 0 0 auto;

	/* 默认：草方块 */
	--iso-top: var(--mc-green-2);
	--iso-left: var(--mc-green-4);
	--iso-right: var(--mc-green-6);
}

/* 顶面：菱形 */
.mc-iso::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--iso-top);
	box-shadow: inset 0 2px 0 rgba(255, 255, 255, .22);
	clip-path: polygon(50% 0, 100% 21.7%, 50% 43.3%, 0 21.7%);
}

/* 左右两个侧面：一道左右对分的渐变即可分开明暗 */
.mc-iso::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right,
		var(--iso-left) 0 50%,
		var(--iso-right) 50% 100%
	);
	clip-path: polygon(0 21.7%, 50% 43.3%, 100% 21.7%, 100% 78.3%, 50% 100%, 0 78.3%);
}

/* 不同矿物只需换三个变量 */
.mc-iso--diamond {
	--iso-top: #6fe6d8;
	--iso-left: #4ac4b8;
	--iso-right: #2e8f87;
}

.mc-iso--gold {
	--iso-top: #ffe066;
	--iso-left: #e0b53c;
	--iso-right: #a87f22;
}

.mc-iso--redstone {
	--iso-top: #ff6b63;
	--iso-left: #c9403a;
	--iso-right: #8d2823;
}

.mc-iso--emerald {
	--iso-top: #64f0a0;
	--iso-left: #35c07a;
	--iso-right: #1d8452;
}

.mc-iso--stone {
	--iso-top: #8d8a88;
	--iso-left: #6b6562;
	--iso-right: #4a4644;
}

/* --------------------------------------------------------------------------
   28.2 区块小标题前放一个方块
   --------------------------------------------------------------------------
   「社区概述 / 加入条件 / 服务器地址 …」每节前一个草方块，
   读起来像游戏里一路铺过去的路径标记。

   标题内只有一个伪元素可用，画不了三个面，所以改用「上浅下深的
   渐变 + 方块轮廓」来表现受光：顶部一段是顶面，其余是侧面。
   -------------------------------------------------------------------------- */
.otm-mc .entry-content p.has-medium-font-size::before,
.otm-mc .entry-content p.has-large-font-size::before {
	content: "";
	display: inline-block;
	width: 22px;
	height: 25px;
	margin-right: 12px;
	vertical-align: -6px;
	background: linear-gradient(
		180deg,
		var(--mc-green-2) 0 43.3%,
		var(--mc-green-4) 43.3% 100%
	);
	clip-path: polygon(50% 0, 100% 21.7%, 100% 78.3%, 50% 100%, 0 78.3%, 0 21.7%);
	box-shadow: none;
}

/* 标题需要成为定位参照，方块的 inline-block 才能与文字基线对齐 */
.otm-mc .entry-content p.has-medium-font-size,
.otm-mc .entry-content p.has-large-font-size {
	position: relative;
}

/* --------------------------------------------------------------------------
   28.3 内容底面顶部的草方块边缘
   --------------------------------------------------------------------------
   把原来一条直绿带换成「上绿下土、下沿参差」的草方块剖面。
   -------------------------------------------------------------------------- */
@media screen and (min-width: 48em) {

	.otm-mc .site-content > .wrap::after {
		height: 9px;
		background:
			/* 下沿的土壤层，用重复渐变切出参差的方块牙口 */
			repeating-linear-gradient(90deg,
				var(--mc-green-6) 0 8px,
				transparent 8px 16px) 0 5px / 16px 4px repeat-x,
			var(--mc-grad-green);
		box-shadow:
			inset 0 2px 0 rgba(255, 255, 255, .25),
			inset 0 -2px 0 rgba(0, 0, 0, .4);
	}
}

/* --------------------------------------------------------------------------
   28.4 Hero 里的环境粒子
   --------------------------------------------------------------------------
   由 assets/js/mc.js 的 initParticles() 生成，缓慢上浮后重置，
   对应游戏里飘散的方块碎屑。数量控制在 14 个以内，且尊重减少动效偏好。
   -------------------------------------------------------------------------- */
.mc-particle {
	position: absolute;
	bottom: -10px;
	z-index: 3;
	width: 4px;
	height: 4px;
	background: rgba(226, 255, 210, .55);
	box-shadow: 0 0 6px rgba(134, 213, 98, .45);
	pointer-events: none;
	animation: mcFloat linear infinite;
}

.mc-particle--dim {
	background: rgba(255, 255, 255, .28);
	box-shadow: none;
}

@keyframes mcFloat {
	0% {
		transform: translateY(0) translateX(0);
		opacity: 0;
	}

	12% {
		opacity: 1;
	}

	85% {
		opacity: .8;
	}

	100% {
		transform: translateY(-320px) translateX(var(--drift, 12px));
		opacity: 0;
	}
}

/* --------------------------------------------------------------------------
   28.5 成就提示：把复制成功的 Toast 做成 MC 的「成就达成」
   -------------------------------------------------------------------------- */
.otm-mc .mc-toast {
	padding: 14px 20px 14px 14px;
	background-color: #2f2b29;
	background-image: var(--tex-grain), linear-gradient(180deg, #3a3532, #262423);
	border: var(--edge);
	border-left: var(--edge);
	box-shadow: var(--bevel-up-sm), var(--drop-float);
}

/* 左侧一个金锭色方块当成就图标 */
.otm-mc .mc-toast::before {
	content: "";
	flex: 0 0 auto;
	width: 26px;
	height: 30px;
	margin-right: 4px;
	background: linear-gradient(to right, #e0b53c 0 50%, #a87f22 50% 100%);
	clip-path: polygon(50% 0, 100% 24%, 100% 74%, 50% 98%, 0 74%, 0 24%);
}

.otm-mc .mc-toast b {
	color: var(--mc-green-2);
}

/* --------------------------------------------------------------------------
   28.6 页脚底部：基岩层收口
   -------------------------------------------------------------------------- */
.otm-mc .site-footer {
	position: relative;
	padding-bottom: 44px;
}

.otm-mc .site-footer::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 12px;
	/* 参差不齐的深色方块，像世界底部的基岩 */
	background:
		repeating-linear-gradient(90deg, #0c0b0b 0 10px, transparent 10px 20px) 0 0 / 20px 7px repeat-x,
		repeating-linear-gradient(90deg, transparent 0 5px, #0c0b0b 5px 15px, transparent 15px 20px) 0 7px / 20px 5px repeat-x,
		#131211;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   28.7 导航项前的小方块（替代原来的绿点）
   -------------------------------------------------------------------------- */
.otm-mc .main-navigation ul li.mc-embed > a::before {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	margin-right: 8px;
	vertical-align: 2px;
	background: var(--mc-green-3);
	box-shadow: 1px 1px 0 rgba(0, 0, 0, .5);
}

/* --------------------------------------------------------------------------
   28.8 减少动效偏好下关闭粒子
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

	.mc-particle {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   28.9 层级校正
   --------------------------------------------------------------------------
   粒子放在遮罩之上（z-index 3），因此站点标题要再高一档，
   否则粒子会飘到字上面 —— 装饰绝不能盖住内容。
   -------------------------------------------------------------------------- */
.otm-mc .site-branding {
	z-index: 4;
}

/* 成就提示里的文案块：避免 flex 把每个节点拆开 */
.otm-mc .mc-toast > span {
	min-width: 0;
}

/* ==========================================================================
   30 去掉 Hero 里的站点副标题
   --------------------------------------------------------------------------
   它是 WordPress 的「站点副标题」（后台 → 设置 → 常规 → 副标题），
   由模板输出为 <p class="site-description">，出现在每一页的 Hero 中。

   这里用 display:none 而不是清空后台的副标题，理由有三：
     · 文案仍保留在后台，想恢复时删掉本节即可；
     · display:none 的元素会同时从无障碍树与 Tab 焦点序中消失，
       不会留下「看不见、读屏器却还能读到」的残影；
     · 不影响站点副标题在 SEO 与社交分享预览里的作用。

   若希望连 HTML 源码里也不出现这几个字，把后台的副标题清空即可。

   选择器写到 3 个类（优先级 30），是为了压过父主题
   body.has-header-image .site-description（21）那一条。
   ========================================================================== */
.otm-mc .site-branding .site-description,
.otm-mc.home.blog .site-description {
	display: none;
}

/* ==========================================================================
   31 商店布局页：把 Excel 粘贴进来的表格改成 MC 风格
   --------------------------------------------------------------------------
   这个页面有两个特殊之处，是它「不 MC」的根因：

     1. 它用页面构建器模板（page-template-page-builder-no-sidebar），
        内容直接挂在 .site-content 下，**根本没有 .entry-content** ——
        而本站整套排版层都是以 .entry-content 为根写的，
        所以字体的颜色、字号一条都没落到这个页面上。

     2. 表格是从 Excel 直接粘贴的，带着 Office 的痕迹：
          · 字体是「等线」（Microsoft Office 中文字体）
          · 宽度写 971pt、行高写 21pt（mso-height-source）
          · 底色由 Excel 自动生成的类 xl63… / xl70… 承载
        这些类名与底色一一对应，正好可以按类替换为 MC 色板。

   本层只做表现覆盖，不动任何单元格内容与结构。
   ========================================================================== */

/* --------------------------------------------------------------------------
   31.1 字体：剥掉 Office 的「等线」，回到全站字体
   -------------------------------------------------------------------------- */
.otm-mc .site-content table,
.otm-mc .site-content table td,
.otm-mc .site-content table th,
.otm-mc .site-content table * {
	font-family: inherit !important;
}

/* --------------------------------------------------------------------------
   31.2 页面标题与提示行
   --------------------------------------------------------------------------
   这些 <p> 带内联 color（#d87878 红 / #767676 灰）与内联 font-size，
   必须用 !important 才压得住。
   -------------------------------------------------------------------------- */
.otm-mc .site-content > h1,
.otm-mc .site-content > h2,
.otm-mc .site-content > .wp-block-heading {
	margin: 0 0 10px;
	font-size: 2rem !important;
	font-weight: 800;
	letter-spacing: .01em;
	color: var(--mc-off-white) !important;
	text-shadow: 2px 2px 0 rgba(0, 0, 0, .55);
}

/* 第一行是安全提示（原本是红色），改用 MC 的告警色，重量级更高 */
.otm-mc .site-content > p {
	margin: 0 0 6px;
	font-size: .9375rem !important;
	line-height: 1.7;
	color: var(--mc-grey-2) !important;
}

/* --------------------------------------------------------------------------
   31.3 表格：保留原始宽度比例，窄屏横向可滚动
   --------------------------------------------------------------------------
   23 列在 1200px 容器里塞不下，硬压成 100% 会把铺位号挤断行，
   所以维持原始像素宽度并交给外层横向滚动。
   -------------------------------------------------------------------------- */
.otm-mc .site-content div:has(> table) {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 10px;
}

.otm-mc .site-content table {
	width: 1295px !important; /* Excel 写的 971pt ≈ 1295px，改用像素 */
	max-width: none;
	border-collapse: collapse;
	table-layout: fixed;
	background-color: #231f1c;
}

/* --------------------------------------------------------------------------
   31.4 单元格：MC 的直角 + 暗色描边
   -------------------------------------------------------------------------- */
.otm-mc .site-content table td,
.otm-mc .site-content table th {
	padding: 1px 3px !important;
	border: 1px solid rgba(0, 0, 0, .5) !important;
	height: auto !important; /* 去掉 Excel 写死的 21pt 行高 */
	line-height: 1.45;
	color: var(--mc-off-white) !important;
	font-variant-numeric: tabular-nums; /* 铺位号对齐更整齐 */
}

/* --------------------------------------------------------------------------
   31.5 底色：Excel 色板 → MC 色板
   --------------------------------------------------------------------------
   左侧注释是 Excel 原始色，右侧是替换值。明暗关系刻意保持不变，
   因为不同底色在这个页面里代表不同区域（通道 / 铺位 / 外墙 / 水域）。
   -------------------------------------------------------------------------- */
.otm-mc .site-content table td[class^="xl63"] {
	background-color: #6b4b2f !important; /* 原 #5E3D1C 泥土棕：主通道 */
}

.otm-mc .site-content table td[class^="xl65"] {
	background-color: #3b2a1a !important; /* 原 #432B14 深木：深色区域 */
}

.otm-mc .site-content table td[class^="xl66"] {
	background-color: #cdb787 !important; /* 原 #B6A773 浅褐：铺位块，改沙色更亮眼 */
	color: #241a08 !important;
}

.otm-mc .site-content table td[class^="xl64"] {
	background-color: #231f1c !important; /* 原 #222222 近黑：外墙，改深板岩 */
}

.otm-mc .site-content table td[class^="xl67"] {
	background-color: #4f6b80 !important; /* 原 #8497B0 蓝灰：水体/玻璃 */
}

.otm-mc .site-content table td[class^="xl68"] {
	background-color: #8a6238 !important; /* 原 #774D23 中木：橡木 */
}

/* --------------------------------------------------------------------------
   31.6 楼层 / 方位标题：MC 的金锭与草绿
   --------------------------------------------------------------------------
   这两组原本是 29.33px 的橙红与绿，直接沿用 Excel 配色。
   改用官方的金色与绿色渐变，并且收小到 20px —— 29.33px 在一行里太撑。
   -------------------------------------------------------------------------- */
.otm-mc .site-content table td[class^="xl69"] {
	background-color: #a87f22 !important;
	background-image: linear-gradient(180deg, #e0b53c, #a87f22) !important;
	border-color: #6b4f14 !important;
	color: #241a08 !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	letter-spacing: .06em;
	text-shadow: 0 1px 0 rgba(255, 255, 255, .28);
}

.otm-mc .site-content table td[class^="xl70"] {
	background-color: #3c8527 !important;
	background-image: var(--mc-grad-green) !important;
	border-color: #244f18 !important;
	color: #f4ffef !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	letter-spacing: .06em;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, .45);
}

/* --------------------------------------------------------------------------
   31.7 窄屏：表格横向滚动提示
   -------------------------------------------------------------------------- */
@media screen and (max-width: 47.99em) {

	.otm-mc .site-content > h1,
	.otm-mc .site-content > .wp-block-heading {
		font-size: 1.5rem !important;
	}
}

/* ==========================================================================
   32 正文逐块显现
   --------------------------------------------------------------------------
   目标：不要让整篇文章「一股脑」全部出现。
   每个段落进入视口时才各自浮上来，由 mc.js 的 initReveal() 加 .is-in。

   动作由三部分叠成，缺一就会显得廉价：
     opacity   —— 淡入
     translateY—— 上浮 22px，给一点重量感
     blur      —— 从 5px 模糊收敛到清晰，这一层最出「高级感」

   模糊用得很克制（5px / .55s）：再大就会糊成一片，
   再久就会拖慢阅读的起步。
   ========================================================================== */
.otm-mc .mc-rv {
	opacity: 0;
	transform: translateY(22px);
	filter: blur(5px);
	transition:
		opacity .68s cubic-bezier(.22, .68, .24, 1),
		transform .78s cubic-bezier(.22, .68, .24, 1),
		filter .55s ease-out;
}

.otm-mc .mc-rv.is-in {
	opacity: 1;
	transform: none;
	filter: none;
}

/* --------------------------------------------------------------------------
   32.1 小标题前的方块：比文字慢半拍「落位」
   --------------------------------------------------------------------------
   正文的其他元素没有 ::before，这条不会误伤。
   -------------------------------------------------------------------------- */
.otm-mc .entry-content p.has-medium-font-size.mc-rv::before,
.otm-mc .entry-content p.has-large-font-size.mc-rv::before {
	transition:
		opacity .5s ease .1s,
		transform .55s cubic-bezier(.2, .7, .3, 1.4) .1s;
}

.otm-mc .entry-content p.has-medium-font-size.mc-rv:not(.is-in)::before,
.otm-mc .entry-content p.has-large-font-size.mc-rv:not(.is-in)::before {
	opacity: 0;
	transform: scale(.55);
}

/* --------------------------------------------------------------------------
   32.2 首屏标题与日期：给一点不同的节奏
   --------------------------------------------------------------------------
   标题比正文起得略早、幅度略小，读起来更「稳」。
   -------------------------------------------------------------------------- */
.otm-mc .entry-header.mc-rv {
	transform: translateY(14px);
}

.otm-mc .entry-header.mc-rv.is-in {
	transform: none;
}

/* --------------------------------------------------------------------------
   32.3 数组手机/低性能设备上关掉模糊
   --------------------------------------------------------------------------
   模糊是这里唯一有实时合成成本的一项，小屏上收益低、代价高。
   -------------------------------------------------------------------------- */
@media screen and (max-width: 47.99em) {

	.otm-mc .mc-rv {
		filter: none;
	}
}

/* ==========================================================================
   33 卡通化：去掉像素颗粒，改为纯平色 + 大块棋盘
   --------------------------------------------------------------------------
   反馈：石面颗粒「太难看、太土」。

   判断是对的。拟物感来自「受光关系」——斜面与投影，而不是来自噪点。
   颗粒做在暗色大面积上只会显脏，像旧墙纸；真正让画面显得高级的是
   干净的色块边界。

   所以这里保留全部立体感（斜面、投影、层级都不动），只把材质换成：
     纯平色 + 一块 112px 的暖色棋盘

   棋盘用的是偏暖的米色而不是纯白 —— 纯白在暗底上会发灰，
   暖色才像 MC 的方块光照。
   ========================================================================== */
:root {
	/*
	 * 两张颗粒贴图全部停用。
	 * 因为各处的写法都是 background-image: var(--tex-grain), <渐变>，
	 * 把变量置为 none 就能一次性清干净，不必逐条去改。
	 * （生成脚本 tools/build-textures.php 保留，日后想恢复改回 url() 即可。）
	 */
	--tex-grain: none;
	--tex-stone: none;
}

/* --------------------------------------------------------------------------
   33.1 页面底：大块暖色棋盘
   --------------------------------------------------------------------------
   块做得很大（112px）、差做得很小（3%），所以远看是一块干净的底，
   近看才认出是方块阵列 —— 这正是「卡通」与「贴图」的分界。
   -------------------------------------------------------------------------- */
body.otm-mc {
	background-color: #201e1c;
	background-image: repeating-conic-gradient(
		rgba(226, 209, 184, .032) 0% 25%,
		transparent 0% 50%
	);
	background-size: 112px 112px;
	background-repeat: repeat;
	background-attachment: fixed;
}

/* --------------------------------------------------------------------------
   33.2 内容底面与导航：纯平色，保留渐变但去掉颗粒
   -------------------------------------------------------------------------- */
@media screen and (min-width: 48em) {

	.otm-mc .site-content > .wrap {
		background-color: #333130;
		background-image: linear-gradient(180deg, #3b3936, #2d2b2a);
	}
}

.otm-mc .navigation-top {
	background-color: #37332f;
	background-image: linear-gradient(180deg, #423d39, #2e2a27);
}

.otm-mc .site-footer {
	background-color: #24211f;
	background-image: linear-gradient(180deg, #2a2725, #1e1c1a);
}

/* --------------------------------------------------------------------------
   33.3 按钮与浮层：同样是平色，斜面负责立体感
   -------------------------------------------------------------------------- */
.otm-mc .mc-copy,
.otm-mc .mc-gal-more {
	background-image: var(--mc-grad-green);
}

.otm-mc .mc-copy.is-done {
	background-image: linear-gradient(180deg, #62bd42, #2f7420);
}

.otm-mc .mc-top {
	background-color: #37332f;
	background-image: linear-gradient(180deg, #423d39, #2e2a27);
}

.otm-mc .mc-top:hover {
	background-image: var(--mc-grad-green);
}

.mc-portal-shell,
.mc-lb-shell {
	background-color: #333130;
	background-image: linear-gradient(180deg, #3b3936, #2d2b2a);
}

.mc-portal-bar,
.mc-lb-bar {
	background-color: #3f3a36;
	background-image: linear-gradient(180deg, #48423e, #332f2c);
}

.mc-portal-btn,
.mc-lb-btn,
.mc-portal-btn--x,
.mc-lb-btn--x,
.mc-media-lb-x {
	background-image: none;
}

.mc-portal-btn:hover,
.mc-lb-btn:hover {
	background-image: var(--mc-grad-green);
}

/* --------------------------------------------------------------------------
   33.4 菜单项：凹槽改成干净的平色块
   -------------------------------------------------------------------------- */
.otm-mc .main-navigation ul li a {
	background-color: rgba(255, 255, 255, .04);
	background-image: none;
}

.otm-mc .menu-toggle {
	background-image: none;
}

.otm-mc .entry-meta a,
.otm-mc .entry-meta .mc-date {
	background-image: none;
}

.otm-mc .mc-gal-chip {
	background-image: none;
}

.otm-mc .mc-gal-chip.is-on {
	background-image: linear-gradient(180deg, #62bd42, #2f7420);
}

.otm-mc .mc-toast {
	background-color: #37332f;
	background-image: linear-gradient(180deg, #423d39, #2e2a27);
}

.otm-mc ::-webkit-scrollbar-thumb {
	background-image: none;
}

/* --------------------------------------------------------------------------
   33.5 相册格：纯平色块，靠描边与投影分层
   -------------------------------------------------------------------------- */
.otm-mc .mc-gal-item {
	background-color: #37332f;
}

/* --------------------------------------------------------------------------
   33.6 商店页表格
   --------------------------------------------------------------------------
   第 31 节给表格的两个标题行用的是纯渐变，本来就没有颗粒，无需再改。
   这里只把单元格底色里可能残留的贴图层清掉。
   -------------------------------------------------------------------------- */
.otm-mc .site-content table td {
	background-image: none;
}

/* ==========================================================================
   34 导航菜单：从「凹陷的槽」改成「凸起的按钮」
   --------------------------------------------------------------------------
   反馈：菜单项是凹进去的感觉，不要。

   之前用的是斜面向下的那组变量（左上暗、右下亮），视觉上等于在导航条上
   挖了一排槽 —— 那是我按「物品栏格子」的思路做的，但导航项是链接，
   它该像按钮：静止时凸起，只有真正按下时才凹进去。

   所以这里把三态彻底分开：
     静止  —— 凸起（左上亮、右下暗）+ 一点点贴地投影
     悬停  —— 凸起不变，泛绿光并把文字提亮
     按下  —— 换成凹面并下沉 2px，这才是「按钮按下去」的手感
   ========================================================================== */
.otm-mc .main-navigation ul li a {
	margin: 6px 3px;
	padding: 10px 16px;
	/*
	 * 用暖白而不是纯白：纯白压在暖褐灰的导航条上会发灰，
	 * 和上面那层「冷黑底槽」是同一类毛病。
	 */
	background-color: rgba(255, 246, 232, .075);
	background-image: none;
	border: 1px solid rgba(0, 0, 0, .5);
	/*
	 * 这条不用通用的 --bevel-up-sm：那组是按「深色面」调的，
	 * 用在导航这种浅一档的按钮上斜面太弱，看起来只是「一块亮一点的底」，
	 * 不像凸起。这里单独把高光提亮、暗边压深。
	 */
	box-shadow:
		inset 2px 2px 0 rgba(255, 255, 255, .2),
		inset -2px -2px 0 rgba(0, 0, 0, .65),
		0 3px 0 rgba(0, 0, 0, .4);
	color: var(--mc-grey-1) !important;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, .55);
	transform: none;
	filter: none;
}

/* 悬停：仍保持凸起，只加绿光与亮度 */
.otm-mc .main-navigation ul li a:hover,
.otm-mc .main-navigation ul li a:focus {
	background-color: rgba(108, 195, 73, .22);
	box-shadow:
		inset 2px 2px 0 rgba(255, 255, 255, .24),
		inset -2px -2px 0 rgba(0, 0, 0, .6),
		0 3px 0 rgba(0, 0, 0, .4),
		inset 0 0 0 1px rgba(134, 213, 98, .5);
	color: var(--mc-off-white) !important;
	transform: none;
	filter: none;
}

/* 当前所在页面：凸起的绿色按钮，而不是凹槽高亮 */
.otm-mc .main-navigation ul li.current-menu-item > a,
.otm-mc .main-navigation ul li.current_page_item > a,
.otm-mc .main-navigation ul li.current-menu-ancestor > a {
	background-color: rgba(108, 195, 73, .26);
	background-image: var(--mc-grad-green);
	border-color: #244f18;
	box-shadow:
		inset 2px 2px 0 rgba(255, 255, 255, .28),
		inset -2px -2px 0 rgba(0, 0, 0, .55),
		0 3px 0 rgba(0, 0, 0, .4);
	color: #fff !important;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, .45);
}

/* 按下：斜面反转 + 下沉 —— 这是唯一该出现凹面的状态 */
.otm-mc .main-navigation ul li a:active {
	box-shadow:
		inset 2px 2px 0 rgba(0, 0, 0, .65),
		inset -2px -2px 0 rgba(255, 255, 255, .14);
	transform: translateY(2px);
	filter: none;
}

/* 键盘 Tab 聚焦时给一圈清晰可见的绿框，别只靠斜面暗示 */
.otm-mc .main-navigation ul li a:focus-visible {
	outline: 2px solid var(--mc-green-2);
	outline-offset: 2px;
}

/* 汉堡按钮同样改成凸起 */
.otm-mc .menu-toggle {
	background-color: rgba(255, 246, 232, .075);
	background-image: none;
	box-shadow:
		inset 2px 2px 0 rgba(255, 255, 255, .2),
		inset -2px -2px 0 rgba(0, 0, 0, .65),
		0 3px 0 rgba(0, 0, 0, .4);
}

.otm-mc .menu-toggle:active {
	box-shadow:
		inset 2px 2px 0 rgba(0, 0, 0, .65),
		inset -2px -2px 0 rgba(255, 255, 255, .14);
	transform: translateY(2px);
}

/* ==========================================================================
   35 去掉菜单外面那层「槽」
   --------------------------------------------------------------------------
   反馈：外面那圈底槽不协调。

   查下来是 <ul> 自带一层背景 rgb(34,34,34)。两个问题叠在一起：

     1. 冷暖和不上 —— #222222 是中性冷黑，而导航条是暖褐灰渐变
        (#423d39 → #2e2a27)。冷暖混用，怎么调都不会协调。
     2. 它是上一版「凹槽」方案的遗留 —— 那层底原本是给凹陷的格子垫底用的。
        现在按钮已经改成凸起了，凹槽就没有存在理由，
        留着反而让凸起的按钮像「陷在一块板子里」。

   所以直接撤掉，让按钮直接坐在导航条上。
   （按钮自身有 6px 上下外边距，导航条又有 0.75em 内边距，
     所以撤掉底槽不会显得拥挤，不需要再补 padding。）
   ========================================================================== */
.otm-mc .main-navigation ul,
.otm-mc .main-navigation > div > ul {
	background: transparent;
	background-image: none;
	box-shadow: none;
	border: 0;
}

/* ==========================================================================
   36 Hero 改造：去掉文字，改为相册随机图轮换
   ========================================================================== */

/* --------------------------------------------------------------------------
   36.1 隐藏站点标题与副标题
   --------------------------------------------------------------------------
   用 display:none 而不是清空后台设置：文案与站点名仍保留，
   删掉本节即可恢复；同时它们也会从无障碍树与 Tab 焦点序中消失。

   这里必须带 !important：
   父主题对首页的 .site-branding 有多条 display 声明，最高一条是
   .has-header-image.home.blog .site-branding（4 个类，优先级 40）,
   还会用 display:table-cell 做垂直居中 —— 靠普通选择器追平既啰嗦又易碎，
   而这里本来就是要「无条件关掉」，!important 反而更准确。
   -------------------------------------------------------------------------- */
.otm-mc .site-branding,
.otm-mc .site-branding-text,
.otm-mc .site-title,
.otm-mc .site-description {
	display: none !important;
}

/* --------------------------------------------------------------------------
   36.2 遮罩大幅减淡
   --------------------------------------------------------------------------
   原来那层深色遮罩是为了压暗背景、保证白色标题可读。
   现在 Hero 里没有文字了，继续压暗只会白白糟蹋照片 —— 那是玩家自己拍的图。
   只保留底部一段渐变，用来和下方的石面自然衔接。
   -------------------------------------------------------------------------- */
.otm-mc .custom-header::after {
	background: linear-gradient(
		180deg,
		rgba(19, 18, 17, .2) 0%,
		transparent 28%,
		transparent 64%,
		rgba(19, 18, 17, .52) 88%,
		var(--mc-off-black) 100%
	);
}

/* --------------------------------------------------------------------------
   36.3 高度：没有文字撑高，需要自己给足
   -------------------------------------------------------------------------- */
.otm-mc.has-header-image .custom-header,
.otm-mc.has-header-video .custom-header {
	min-height: clamp(420px, 58vh, 640px);
}

/* 父主题在首页另有一套 4 个类的规则，需要用同样长度压过去 */
.otm-mc.home.blog.has-header-image .custom-header,
.otm-mc.home.blog.has-header-video .custom-header {
	min-height: clamp(420px, 58vh, 640px);
}

/* --------------------------------------------------------------------------
   36.4 轮换图层
   --------------------------------------------------------------------------
   两层交替，靠 opacity 过渡完成交叉淡入。
   层级：底图 0 < 轮换层 1 < 遮罩 2 < 粒子 3。
   -------------------------------------------------------------------------- */
.mc-hero-slide {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	background-color: transparent;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity 1.2s ease;
	pointer-events: none;
}

.mc-hero-slide.is-on {
	opacity: 1;
}

/* 服务端渲染的那张首图：保留不动，作为轮换层下面的底 */
.otm-mc .mc-hero-random img {
	/* 与轮换层用同一套裁切方式，切换时才不会跳 */
	object-position: center;
}

/* --------------------------------------------------------------------------
   36.5 减少动效：不轮换、也不要过渡
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

	.mc-hero-slide {
		display: none;
	}
}

/* ==========================================================================
   37 手帐：纸面 + 散落照片 + 流式正文
   --------------------------------------------------------------------------
   把首页正文做成一本摊开的手帐：
     · 内容卡不再是深色面板，而是一张米色纸（带浅格线）
     · 照片像实体冲印相片一样散在纸面上，带白边、胶带与轻微旋转
     · 正文逐词浮现，像有人在纸上写出来

   配色整体由「深底浅字」翻成「浅底深字」——这是手帐的必要条件。
   强调色仍沿用官方的 MC 绿，保证和站点其它部分是一套。
   ========================================================================== */
:root {
	/* 暗色手帐：纸是深的，所以字要浅 */
	/*
	 * 纸色比页面底亮一档。
	 * 原来是 #32302e，与页面底(#2a2724 上下)只差一点点，
	 * 「底纸」几乎是看不见的 —— 提到 #3a3734，纸才真的像一张纸压在上面。
	 */
	--paper: #3a3734;
	--paper-line: rgba(255, 246, 232, .042);
	--ink: #fcf5f1;
	--ink-soft: #ded7d0;
	--ink-mute: #a49b92;
}

/* --------------------------------------------------------------------------
   37.1 纸面（暗色）
   --------------------------------------------------------------------------
   站点的底子本来就是暗色，所以「暗色纸」只是把内容面做出一张纸的形态：
   比页面底稍亮一点、边缘清楚、带一层极淡的方格。
   不做浅色羊皮纸 —— 那和站点其它部分会割裂。
   -------------------------------------------------------------------------- */
@media screen and (min-width: 48em) {

	.otm-mc .site-content > .wrap {
		background-color: var(--paper);
		background-image:
			linear-gradient(90deg, var(--paper-line) 0 1px, transparent 1px),
			linear-gradient(180deg, var(--paper-line) 0 1px, transparent 1px);
		background-size: 28px 28px, 28px 28px;
		border: 1px solid rgba(0, 0, 0, .55);
		box-shadow:
			inset 0 1px 0 rgba(255, 246, 232, .12),   /* 纸上沿受光的一线 */
			inset 1px 0 0 rgba(255, 246, 232, .04),
			inset -1px 0 0 rgba(0, 0, 0, .3),
			inset 0 -1px 0 rgba(0, 0, 0, .5),
			0 26px 60px -10px rgba(0, 0, 0, .85),      /* 纸压出来的投影 */
			0 4px 12px rgba(0, 0, 0, .5);
	}

	/* 顶部那条绿改成一道和纸胶带 */
	.otm-mc .site-content > .wrap::after {
		height: 16px;
		background: repeating-linear-gradient(
			90deg,
			rgba(108, 195, 73, .5) 0 14px,
			rgba(134, 213, 98, .34) 14px 28px
		);
		box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
		opacity: .95;
	}
}

/* 窄屏同样给纸面，只是没有格线（省渲染） */
@media screen and (max-width: 47.99em) {

	.otm-mc .site-content > .wrap {
		background-color: var(--paper);
		border: 1px solid rgba(0, 0, 0, .5);
	}
}

/* --------------------------------------------------------------------------
   37.2 暗色纸上的文字：浅色
   --------------------------------------------------------------------------
   颜色统一走 --ink / --ink-soft，改配色只需改 :root 那四行。
   用 !important 是因为正文不少颜色来自区块的 has-text-color 类，
   不压掉就会和暗底撞成读不清的灰。
   -------------------------------------------------------------------------- */
.otm-mc .entry-content,
.otm-mc .entry-content p,
.otm-mc .entry-content li,
.otm-mc .entry-content dd,
.otm-mc .entry-content td {
	color: var(--ink-soft) !important;
}

.otm-mc .entry-content strong,
.otm-mc .entry-content b {
	color: var(--ink);
}

/* 暗底上的链接用亮绿，深绿会糊进背景 */
.otm-mc .entry-content a {
	color: var(--mc-green-2);
	box-shadow: inset 0 -2px 0 rgba(108, 195, 73, .4);
}

.otm-mc .entry-content a:hover {
	color: var(--mc-green-1);
	box-shadow: inset 0 -3px 0 rgba(134, 213, 98, .75);
}

/* 小节标题：浅色 + 绿色左边条 */
.otm-mc .entry-content p.has-medium-font-size,
.otm-mc .entry-content p.has-large-font-size {
	color: var(--ink) !important;
	border-left-color: var(--mc-green-4);
	border-left-width: 5px;
	box-shadow: none;
}

/* 语义色：原文的红是为深底选的，这里提亮一档才读得清 */
.otm-mc .entry-content .has-vivid-red-color,
.otm-mc .entry-content .has-red-color {
	color: #f08a80 !important;
}

/* 日期徽标：改成马克笔高亮的样子（暗底上用亮绿字） */
.otm-mc .entry-meta a,
.otm-mc .entry-meta .mc-date {
	background: rgba(108, 195, 73, .18) !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: inset 0 -2px 0 rgba(108, 195, 73, .4) !important;
	color: var(--mc-green-2) !important;
	text-shadow: none !important;
	padding: 4px 12px;
}

/* 文章标题：浅色，去掉深底那套硬字影 */
.otm-mc .entry-title,
.otm-mc.home.blog .entry-title {
	color: var(--ink) !important;
	text-shadow: none !important;
}

.otm-mc .entry-header {
	box-shadow: 0 2px 0 rgba(0, 0, 0, .45) !important;
}

/* 正文里的 .mc-host 复制按钮 */
.otm-mc .entry-content .mc-host {
	color: var(--ink) !important;
}

/* 语义色：红字在暗底上要提亮，否则读不清 */
.otm-mc .entry-content .has-vivid-red-color,
.otm-mc .entry-content .has-red-color {
	color: #f08a80 !important;
}

/* --------------------------------------------------------------------------
   37.3 散落照片
   --------------------------------------------------------------------------
   照片压在正文之上，而不是文末另起一栏 —— 手帐本来就是照片压着字。
   所以用一个绝对定位的覆盖层：层本身不接事件（pointer-events:none），
   只有照片接 —— 这样正文照常可以选中、链接照常可以点。
   -------------------------------------------------------------------------- */
.mc-scrap-layer {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 5;
	/* 层不挡事件，底下的正文照常可读可选可点 */
	pointer-events: none;
}

.mc-scrap-photo {
	position: absolute;
	margin: 0;
	/*
	 * 白边四周等宽、下沿留出一条写日期的位置，
	 * 做成冲印相片那种「下面留白写一行字」的样子。
	 */
	padding: 12px 12px 6px;
	background: #f7f3ea;
	border: 1px solid rgba(0, 0, 0, .35);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, .8) inset,
		0 14px 26px rgba(0, 0, 0, .5),
		0 3px 6px rgba(0, 0, 0, .35);
	cursor: grab;
	pointer-events: auto;
	touch-action: none; /* 触摸拖动时不要被浏览器当成滚动 */

	/*
	 * --pull-x / --pull-y 是「被小人扯过」的位移。
	 *
	 * 它必须由这里组合进 transform，而不是让 figures.js 写内联 transform ——
	 * 内联 transform 会把这四种状态（入场 / 落定 / 悬停 / 拖动中）全部盖掉，
	 * 照片被扯过之后就再也回不到「歪着」的姿势；
	 * 而且拖动时 left 会把这个偏移又算一遍，偏移被叠加两次，跟手感就偏了。
	 *
	 * 放在 rotate 前面：让位移沿页面坐标走，而不是旋转后的斜轴。
	 */
	transform: translate(var(--pull-x, 0px), var(--pull-y, 0px))
		rotate(calc(var(--rot) * 2.4)) translateY(-30px) scale(.9);
	opacity: 0;

	transition:
		transform .55s cubic-bezier(.2, .7, .25, 1.15),
		box-shadow .3s ease,
		opacity .5s ease;
	transition-delay: var(--delay, 0ms);
}

/* 日期：像用笔在照片下面标了一行 */
.mc-scrap-photo figcaption {
	margin-top: 7px;
	font-size: .72rem;
	font-style: italic;
	letter-spacing: .05em;
	line-height: 1.2;
	color: #8d8279;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 落到纸面上 */
.mc-scrap-photo.is-in {
	opacity: 1;
	transform: translate(var(--pull-x, 0px), var(--pull-y, 0px)) rotate(var(--rot));
}

/* 悬停：摆正、抬起 —— 「拿起来看」的手感 */
.mc-scrap-photo.is-in:hover,
.mc-scrap-photo.is-in:focus-visible {
	transform: translate(var(--pull-x, 0px), var(--pull-y, 0px))
		rotate(0deg) translateY(-10px) scale(1.05);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, .8) inset,
		0 26px 44px rgba(0, 0, 0, .6),
		0 5px 10px rgba(0, 0, 0, .4);
	z-index: 99 !important;
	transition-delay: 0ms;
	outline: none;
}

/* 正在拖：摆正、放大、抓取光标 */
.mc-scrap-photo.is-drag {
	cursor: grabbing;
	transform: translate(var(--pull-x, 0px), var(--pull-y, 0px))
		rotate(0deg) scale(1.09) !important;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, .8) inset,
		0 32px 56px rgba(0, 0, 0, .68),
		0 6px 12px rgba(0, 0, 0, .45) !important;
	transition: none;
}

.mc-scrap-photo img {
	display: block;
	width: 100%;
	height: auto;
	background: #2a2725;
	/* 拖图时不要出现浏览器原生的半透明幽灵 */
	-webkit-user-drag: none;
	user-select: none;
}

/* 胶带：压在照片上沿，半透明 */
.mc-scrap-photo::before {
	content: "";
	position: absolute;
	top: -10px;
	left: 50%;
	width: 68px;
	height: 22px;
	transform: translateX(-50%) rotate(-3deg);
	background: repeating-linear-gradient(
		90deg,
		rgba(108, 195, 73, .5) 0 8px,
		rgba(160, 224, 129, .34) 8px 16px
	);
	box-shadow: 0 2px 5px rgba(0, 0, 0, .4);
	pointer-events: none;
}

/* 每三张换个胶带角度，避免整齐得死板 */
.mc-scrap-photo:nth-child(3n+2)::before {
	transform: translateX(-50%) rotate(2.5deg);
	width: 58px;
}

.mc-scrap-photo:nth-child(3n)::before {
	transform: translateX(-50%) rotate(-1deg) translateX(8px);
	width: 76px;
}

/* --------------------------------------------------------------------------
   37.4 照片灯箱
   -------------------------------------------------------------------------- */
.mc-scrap-lb {
	position: fixed;
	inset: 0;
	z-index: 99996;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 4vh 4vw;
	background: rgba(12, 11, 10, .9);
}

.mc-scrap-lb.is-on {
	display: flex;
}

.mc-scrap-locked {
	overflow: hidden;
}

.mc-scrap-lb-shell {
	display: flex;
	flex-direction: column;
	max-width: 100%;
	max-height: 100%;
	padding: 14px;
	background: #fffdf8;
	border: 1px solid rgba(120, 100, 70, .3);
	box-shadow: 0 30px 70px rgba(0, 0, 0, .6);
}

.mc-scrap-lb-bar {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(120, 100, 70, .2);
}

.mc-scrap-lb-date {
	flex: 1;
	font-size: .8125rem;
	font-style: italic;
	letter-spacing: .04em;
	color: var(--ink-mute);
}

.mc-scrap-lb-x {
	width: 30px;
	height: 30px;
	padding: 0;
	background: rgba(160, 60, 50, .12);
	border: 0;
	color: #8a3630;
	font-size: .875rem;
	cursor: pointer;
}

.mc-scrap-lb-x:hover {
	background: #8a3630;
	color: #fff;
}

.mc-scrap-lb-body {
	overflow: auto;
}

.mc-scrap-lb-body img {
	display: block;
	max-width: 88vw;
	max-height: 76vh;
	width: auto;
	height: auto;
}

/*
 * 37.5 流式输出 —— 已按需求删除
 * --------------------------------------------------------------------------
 * 原先是把每个文本节点切成「中文逐字、拉丁词整体」的 <span>，
 * 用递增的 animation-delay 让它们逐个浮现。
 * 对应的 JS（mc.js 14.3 节 streamArticle）与这里一并停用。
 *
 * 正文本来的「整段滚动显现」是另一套（mc.css 32 节 + mc.js 12 节），
 * 仍然保留。
 * -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   37.6 窄屏：散落改为规整排布
   --------------------------------------------------------------------------
   小屏上绝对定位必然叠成一团，而且拖动的余量也不够。
   这里让覆盖层退回文档流，照片改成两列网格。
   -------------------------------------------------------------------------- */
@media screen and (max-width: 47.99em) {

	.mc-scrap-layer {
		position: static;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
		margin: 26px 0 4px;
		pointer-events: auto;
	}

	.mc-scrap-photo {
		position: static;
		width: auto !important;
		left: auto !important;
		top: auto !important;
		padding: 8px;
		cursor: pointer;
	}
}

/* --------------------------------------------------------------------------
   37.7 减少动效
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

	.mc-scrap-photo {
		opacity: 1 !important;
		transform: translate(var(--pull-x, 0px), var(--pull-y, 0px)) rotate(var(--rot)) !important;
	}
}

/* ==========================================================================
   29 v9 导航修正
   --------------------------------------------------------------------------
   两个问题：
     1. 菜单没居中 —— 菜单 <ul> 外面还套了一层 div（.menu-xxx-container），
        只给 <ul> 设 justify-content:center 是不够的，外层 div 必须是满宽
        且自身也居中，否则会跟着内容宽度跑偏。
     2. 右侧那个下箭头 —— 是 Twenty Seventeen 的 .menu-scroll-down
        （「向下滚动到内容」链接）。它是 .main-navigation 的兄弟节点，
        父主题用 .site-header .navigation-top .menu-scroll-down（优先级 30）
        把它绝对定位在右侧。按需求去掉。
   ========================================================================== */

/* --------------------------------------------------------------------------
   29.1 去掉右侧下箭头
   --------------------------------------------------------------------------
   用 display:none 而不是改模板：它同时也会从无障碍树与 Tab 焦点序中消失，
   而且随时可以删掉这条规则恢复。
   -------------------------------------------------------------------------- */
.otm-mc .navigation-top .menu-scroll-down,
.otm-mc .main-navigation .menu-scroll-down {
	display: none !important;
}

/* --------------------------------------------------------------------------
   29.2 强制居中：外层容器满宽，<ul> 也满宽并居中排布
   -------------------------------------------------------------------------- */
.otm-mc .navigation-top .wrap {
	max-width: var(--mc-wrap);
	margin-left: auto;
	margin-right: auto;
}

.otm-mc .main-navigation {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
}

/* 菜单外面那层容器必须是弹性且满宽，否则会按内容宽度收缩 */
.otm-mc .main-navigation > div {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
}

.otm-mc .main-navigation > div > ul,
.otm-mc .main-navigation > ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin: 0;
	padding: 0;
	text-align: center;
	list-style: none;
}

/* 移动端的汉堡按钮不该被 flex 拉伸 */
.otm-mc .main-navigation .menu-toggle {
	flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   29.3 窄屏：菜单改为纵向堆叠时保持居中
   -------------------------------------------------------------------------- */
@media screen and (max-width: 47.99em) {

	.otm-mc .main-navigation {
		display: block;
	}

	.otm-mc .main-navigation > div > ul,
	.otm-mc .main-navigation > ul {
		flex-direction: column;
		align-items: stretch;
	}

	.otm-mc .main-navigation ul li a {
		text-align: center;
	}
}

/* --------------------------------------------------------------------------
   29.4 去掉重复的绿点，并禁止菜单项换行
   --------------------------------------------------------------------------
   菜单项上其实有两个标记，此前只删掉了一个：

     · v8 的 ::before —— 行首 5×5 方块，这是要保留的
     · v3 的 ::after  —— 行尾 4×4 小点，被漏掉了

   漏删的原因：v6 里那条 `a::after { display: none }` 优先级只有 31，
   而 `.mc-embed > a::after` 是 41 —— 更具体的规则赢了，所以行尾那个点还在。

   它带来的两个可见问题：
     1. 看起来「多了一个绿点」；
     2. 行尾元素一旦挤不下就会掉到第二行，整项高度随之跳动，
        悬停时尤其明显 —— 这就是动效不对劲的来源。
   -------------------------------------------------------------------------- */
.otm-mc .main-navigation ul li.mc-embed > a::after,
.otm-mc .main-navigation ul li a::after {
	display: none;
}

/* 菜单项禁止换行：行尾标记不会再有掉行的机会 */
.otm-mc .main-navigation ul li a {
	white-space: nowrap;
}

/* ==========================================================================
   38 窄屏修复：手机菜单收起
   --------------------------------------------------------------------------
   症状：手机上打开首页，整屏都是展开的菜单，正文被挤到很下面。

   原因：父主题在手机上靠
             .js .main-navigation ul { display: none }              （21）
        把菜单收起，点汉堡后加上 .toggled-on 再展开：
             .js .main-navigation.toggled-on > div > ul { display: block }（41）

        而本站第 29 节为了居中写的
             .otm-mc .main-navigation ul            （31）
             .otm-mc .main-navigation > div > ul    （41）
        把「收起」那一条直接压过去了 —— 于是菜单永远展开。

   修法：窄屏下显式写回收起态，只在 .toggled-on 时展开。
   展开那条必须写到 3 个类 + 2 个元素（32），才追得平父主题的 41。
   ========================================================================== */
@media screen and (max-width: 47.99em) {

	/* 收起态：必须显式声明，否则会被第 29 节的 display:flex 盖住 */
	.otm-mc .main-navigation ul,
	.otm-mc .main-navigation > div > ul,
	.otm-mc .main-navigation > ul {
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: 100%;
		padding: 0;
	}

	/* 点开汉堡之后才展开 */
	.otm-mc .main-navigation.toggled-on > div > ul,
	.otm-mc .main-navigation.toggled-on > ul {
		display: flex;
	}

	/*
	 * 展开后的菜单项：收紧一些。
	 * 桌面那套 6px 外边距 + 10px 内边距，八项叠起来会占掉大半屏。
	 */
	.otm-mc .main-navigation ul li {
		width: 100%;
	}

	.otm-mc .main-navigation ul li a {
		margin: 3px 0;
		padding: 12px 14px;
		font-size: .9375rem;
		text-align: center;
	}

	/* 汉堡按钮本身也要够大好点 */
	.otm-mc .menu-toggle {
		margin: 8px auto;
		padding: 10px 18px;
	}

	/* 菜单收起后导航不再是 500 多像素高，粘顶才对 */
	.otm-mc .navigation-top {
		margin-top: -46px;
	}
}

/* --------------------------------------------------------------------------
   38.1 窄屏下的 Hero 与纸面
   --------------------------------------------------------------------------
   Hero 在手机上按 46vh 算只有 380 上下，配上隐藏的站名会显得空，
   这里给它一个更合适的高度区间。
   -------------------------------------------------------------------------- */
@media screen and (max-width: 47.99em) {

	.otm-mc .custom-header,
	.otm-mc.has-header-image .custom-header,
	.otm-mc.has-header-video .custom-header {
		min-height: clamp(260px, 38vh, 400px);
	}

	.otm-mc .site-content > .wrap > #primary {
		padding: 22px 18px 26px;
	}

	/* 纸面上的散落照片在窄屏是两列网格，缩放比例别太大 */
	.mc-scrap-layer {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
		margin: 22px 0 4px;
	}

	.mc-scrap-photo {
		padding: 9px;
	}

	.mc-scrap-photo figcaption {
		font-size: .68rem;
	}
}

/* ==========================================================================
   39 手帐文字：字体与字号
   --------------------------------------------------------------------------
   目标是让正文读起来像「写在纸上」，而不是像网页正文。

   【字体为什么用系统楷体，而不是自托管手写体】
     中文手写体（霞鹜文楷、马善政毛笔楷书这类）完整字库普遍 5–20 MB。
     本站是国内服务器、面向国内玩家，为了一段正文去拉 8 MB 字体很不划算，
     首屏还会明显变慢。
     而「楷体」在中文系统上是自带的：
         macOS   Kaiti SC / STKaiti / Xingkai SC
         Windows KaiTi / STKaiti / 楷体
         Android 无楷体，退回思源宋体（印刷感，仍比黑体更「纸」）
     零下载成本，而楷体本身就是毛笔楷书的形态，手写味足够。

   【为什么正文不整体用楷体】
     楷体笔画细，本站纸面又是深色的 —— 正文字号下会发虚、伤阅读。
     所以楷体只给标题与小标题（字大好认），
     正文改用更大的字号 + 更松的行距来做出「写在纸上」的呼吸感。
   ========================================================================== */
:root {
	/*
	 * 手帐字体：系统楷体。
	 *
	 * 为什么用系统楷体而不是自托管手写体：
	 *   中文手写体（霞鹜文楷、马善政这一类）完整字库普遍 5–20 MB，
	 *   本站是国内服务器、面向国内玩家，为正文拉 8 MB 字体不划算。
	 *   而楷体在各系统上自带：
	 *     macOS   Kaiti SC / STKaiti / Xingkai SC
	 *     Windows KaiTi / STKaiti / 楷体
	 *     Android 无楷体，退回思源宋体（印刷感，仍比黑体更「纸」）
	 */
	--journal-font: "Kaiti SC", "STKaiti", "KaiTi", "楷体", "Xingkai SC",
		"Noto Serif CJK SC", "Source Han Serif SC", "Songti SC", "SimSun", serif;
}

/* ==========================================================================
   41 楷体：已停用
   --------------------------------------------------------------------------
   手帐风格曾试过给首页文章换系统楷体（Kaiti SC / KaiTi），
   范围也从「全站」收窄到「只首页文章」。现按反馈全部停用 ——
   文章与全站字体保持一致。

   一并撤掉的还有为楷体配套的两项：
     · 字重压到 400 —— 那是为了避免楷体被浏览器合成加粗；
       换回黑体后，标题本来就该是 800/700。
     · 正文提亮到 #e8e1d9 —— 那是补楷体笔画偏细；
       黑体不需要，交还给正常的正文色。

   保留字体变量 --journal-font（见第 39 节），当前无人引用；
   若日后想再试，把这个作用域规则加回来即可。
   ========================================================================== */

/* 字重还原：换回黑体后，各处的字重交还给原本的样式 */
.otm-mc .entry-title,
.otm-mc.home.blog .entry-title {
	font-weight: 800;
}

.otm-mc .entry-content p.has-medium-font-size,
.otm-mc .entry-content p.has-large-font-size {
	font-weight: 700;
}


/* ==========================================================================
   43 文字居中排版
   --------------------------------------------------------------------------
   反馈：正文改居中。

   两处要分开处理，只写一句 text-align:center 是不够的：
     · 普通段落是块级 —— 直接给 text-align 即可
     · 小节标题是 inline-block（为了让荧光笔贴着字，不横贯整行）——
       inline-block 的「内部」居中要靠它自己的 text-align，
       而「整体」居中要靠父容器 .entry-content 的 text-align。
       两个都要写。

   另外它原来有个 margin-left: -10px（用来抵掉左侧内边距），
   居中之后这个负边距会让它偏左，所以要归零。
   ========================================================================== */
.otm-mc .entry-header,
.otm-mc .entry-title,
.otm-mc.home.blog .entry-title,
.otm-mc .entry-meta,
.otm-mc .entry-content,
.otm-mc .entry-content p,
.otm-mc .entry-content li,
.otm-mc .entry-content h1,
.otm-mc .entry-content h2,
.otm-mc .entry-content h3,
.otm-mc .entry-content h4,
.otm-mc .entry-content blockquote,
.otm-mc .page-title,
.otm-mc .widget-title {
	text-align: center;
}

/* 小节标题：居中之后负边距会让它偏左，归零 */
.otm-mc .entry-content p.has-medium-font-size,
.otm-mc .entry-content p.has-large-font-size {
	margin-left: 0;
	margin-right: 0;
}

/* 日期徽标本身是 inline-block，靠父容器的居中生效 */
.otm-mc .entry-meta {
	justify-content: center;
}

/* --------------------------------------------------------------------------
   43.1 居中会把「行尾不齐」放大，所以再多给一点行距
   -------------------------------------------------------------------------- */
.otm-mc .entry-content p {
	line-height: 2.15 !important;
}

/* --------------------------------------------------------------------------
   43.2 列表居中后项目符号会错位，用内联块包一层更整齐
   -------------------------------------------------------------------------- */
.otm-mc .entry-content ul,
.otm-mc .entry-content ol {
	display: inline-block;
	text-align: left;
	margin-left: auto;
	margin-right: auto;
}

/* 居中排版下左对齐的引用块不好看，一并居中 */
.otm-mc .entry-content blockquote {
	border-left: 0;
	padding: 0;
}

/* ==========================================================================
   44 内嵌模式：让商店页的样式在 iframe 里也生效
   --------------------------------------------------------------------------
   ?otm_embed=1 时改用 embed.php 渲染，正文被包进 .entry-content。
   而商店页原来的样式是以「内容直接挂在 .site-content 下」为前提写的
   （那个页面用构建器模板，本来就没有 .entry-content），
   所以要把同一套规则补一份 .entry-content 版本。

   内嵌模式下去掉纸面的外边距与描边 —— 它已经是弹窗里的一整块，
   再画一圈边框就成了「窗中窗」。
   ========================================================================== */
.otm-mc .entry-content > h1,
.otm-mc .entry-content > .wp-block-heading {
	margin: 0 0 10px;
	font-size: 2rem !important;
	font-weight: 400;
	letter-spacing: .01em;
	color: var(--mc-off-white) !important;
	text-shadow: none;
}

.otm-mc .entry-content > p {
	margin: 0 0 6px;
	font-size: .9375rem !important;
	line-height: 1.7;
	color: var(--mc-grey-2) !important;
}

.otm-mc .entry-content div:has(> table) {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 10px;
}

/* --------------------------------------------------------------------------
   44.1 内嵌模式自身的版面
   -------------------------------------------------------------------------- */
body.otm-embed {
	background-color: var(--paper);
	background-image: none;
	margin: 0;
}

body.otm-embed .site-content > .wrap {
	max-width: none;
	margin: 0;
	border: 0 !important;
	box-shadow: none !important;
	background-image: none;
}

/* 顶部那道胶带在内嵌时是多余的 —— 弹窗自己已经有标题栏 */
body.otm-embed .site-content > .wrap::after {
	display: none;
}

body.otm-embed .site-content > .wrap > #primary {
	padding: 26px 26px 34px;
}

/* 内嵌时不显示散落照片：那是首页的东西，弹窗里再散一遍会很乱 */
body.otm-embed .mc-scrap-layer {
	display: none;
}

@media screen and (max-width: 47.99em) {

	body.otm-embed .site-content > .wrap > #primary {
		padding: 18px 16px 26px;
	}
}

/* ==========================================================================
   45 日期徽标靠左
   --------------------------------------------------------------------------
   结构是
       .entry-header            text-align: center
         .entry-meta            ← 容器
           span.mc-date         inline-block   ← 徽标本身
         h3.entry-title
   第 43 节把 text-align: center 一并给了 .entry-meta，于是徽标跟着居中。

   徽标是 inline-block，所以「靠左 / 靠右」靠的是**容器的 text-align**，
   而不是给徽标自己加 margin —— 那个对内联级元素不起作用。

   注意：这里一度写成靠右，后按反馈改回靠左。
   ========================================================================== */
.otm-mc .entry-meta {
	text-align: left !important;
	/* 第 43 节给块级容器写的 justify-content 在此无意义，一并清掉 */
	justify-content: flex-start;
}

/* 容器若在别处被改成 flex，靠 auto 外边距同样能贴边 —— 两条都留着更稳 */
.otm-mc .entry-meta .mc-date {
	margin-left: 0;
	margin-right: auto;
}

/* ==========================================================================
   46 手帐小标题：荧光笔笔痕（补回）
   --------------------------------------------------------------------------
   这一节原本是第 40 节，在替换「41+42 全站楷体」那两节时被我误删了 ——
   它是夹在 42 与 43 之间的，替换范围划大了。
   删掉之后小标题退回成「绿竖条 + 绿方块」，也就是最初那套。

   这里补回来，并放在文件末尾 —— 因为第 37.2 节写过
       .otm-mc .entry-content p.has-medium-font-size { border-left-width: 5px }
   放在它前面压不过，竖条会重新冒出来。

   实现要点：
     笔痕是伪元素，必须压在文字下面。
     普通绝对定位会盖住字，所以给标题建层叠上下文
     （position: relative; z-index: 1），再把伪元素放到 z-index: -1。
   ========================================================================== */
.otm-mc .entry-content p.has-medium-font-size,
.otm-mc .entry-content p.has-large-font-size {
	position: relative;
	/* 收成内容宽度，笔痕才会贴着字，而不是横贯整行 */
	display: inline-block;
	z-index: 1;
	border-left: 0 !important;
	padding: 4px 18px 6px 10px;
	margin-left: 0;
	margin-right: 0;
}

.otm-mc .entry-content p.has-medium-font-size::before,
.otm-mc .entry-content p.has-large-font-size::before {
	content: "";
	position: absolute;
	left: -2px;
	right: -4px;
	top: 44%;
	bottom: 12%;
	z-index: -1;
	width: auto;
	height: auto;
	margin: 0;
	display: block;
	box-shadow: none;
	background: rgba(134, 213, 98, .3);
	/* 两端斜切 + 整体略斜，像手画的一笔而不是印刷色块 */
	clip-path: polygon(0 24%, 100% 0, 100% 76%, 0 100%);
	transform: rotate(-.7deg);
	vertical-align: baseline;
}

/* ==========================================================================
   47 页脚「加入或赞助我们」区块
   --------------------------------------------------------------------------
   原状是一个两栏块：左栏 33% 空着（页面上那块空白），右栏 66% 放四行字。
   文字与空白各占一块，不成一体。

   中途一度做成带边框、带底色、带绿左边的「卡片」，但反馈是**太突兀** ——
   页脚本该安静地收尾，加一个方框等于在页尾又立了一块牌子。

   现在改为**无框**：不加边框、不加底色、不加左边线，
   完全落在页面背景上，只靠文字自身的层级撑住结构：
     标题  —— MC 绿，作为入口
     字段  —— 左侧定宽标签 + 右侧高亮值，两行对齐
     脚注  —— 虚线分隔后弱化
   ========================================================================== */
.otm-mc .mc-join-box {
	padding: 0;
	background: none;
	border: 0;
}

/* 区块自带的下边距会撑开多余的空隙，收掉 */
.otm-mc .mc-join-box > *:last-child {
	margin-bottom: 0;
}

.otm-mc .mc-join-title {
	margin: 0 0 16px;
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--mc-green-2) !important;
}

/* 字段行：标签定宽，值跟着对齐，两行看起来成表 */
.otm-mc .mc-join-row {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 0 0 9px;
	font-size: .9375rem;
	color: var(--mc-grey-1) !important;
}

.otm-mc .mc-join-key {
	flex: 0 0 4.5em;
	font-size: .8125rem;
	letter-spacing: .12em;
	color: var(--mc-grey-3) !important;
}

.otm-mc .mc-join-row b {
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--mc-off-white);
	/* 邮箱这类长串在窄屏要能断行，否则会顶破容器 */
	word-break: break-all;
}

/* 分隔线也压淡一档，避免在无框的版面里显得抢眼 */
.otm-mc .mc-join-hint {
	margin: 16px 0 0;
	padding-top: 13px;
	border-top: 1px dashed rgba(237, 229, 226, .09);
	font-size: .8125rem;
	line-height: 1.65;
	color: var(--mc-grey-3) !important;
}

/* ==========================================================================
   48 页脚文字统一：去绿色，颜色与字重一致
   --------------------------------------------------------------------------
   反馈：不要绿色，文字颜色与粗细保持一致。

   之前页脚里有三套颜色 + 两种字重：
     标题   绿  #86d562 / 700
     标签   暗  #aba09c / 400
     值     白  #fcf5f1 / 700
     脚注   暗  #aba09c / 400
   层级虽然清楚，但页脚是收尾的地方，颜色一多就显得嘈杂。

   现在统一成一种颜色、一种字重，**层级只交给字号与间距**：
     标题  17px
     字段  15px（标签与值同号，靠定宽列对齐）
     脚注  13px
   这样整块读起来是「一段联系方式」，而不是「三个强调等级拼起来的表」。
   ========================================================================== */
.otm-mc .mc-join-box,
.otm-mc .mc-join-box * {
	color: var(--mc-grey-2) !important;
	font-weight: 400 !important;
}

.otm-mc .mc-join-title {
	font-size: 1.0625rem;
	letter-spacing: .02em;
}

/* 标签与值同号同色，靠定宽列形成对齐 */
.otm-mc .mc-join-row,
.otm-mc .mc-join-row b,
.otm-mc .mc-join-key {
	font-size: .9375rem;
}

.otm-mc .mc-join-key {
	letter-spacing: .08em;
}

.otm-mc .mc-join-hint {
	font-size: .8125rem;
}

/* --------------------------------------------------------------------------
   48.1 备案号与 WordPress 署名
   --------------------------------------------------------------------------
   同属页脚，一并统一，免得只有中间那块变了、两头还是旧配色。
   -------------------------------------------------------------------------- */
.otm-mc .site-footer .widget-column p,
.otm-mc .site-footer .widget-column a,
.otm-mc .site-footer .site-info,
.otm-mc .site-footer .site-info a {
	color: var(--mc-grey-2) !important;
	font-weight: 400 !important;
}

/* 备案号的链接下划线压淡，别在统一色里跳出来 */
.otm-mc .site-footer .widget-column a {
	text-decoration-color: rgba(208, 197, 192, .35);
	text-underline-offset: 3px;
}

/* ==========================================================================
   49 传送门按钮：同样提升优先级
   --------------------------------------------------------------------------
   与 gallery.css 末尾那节同因：父主题的 .colors-dark button（优先级 11）
   压过了单类选择器（10），导致传送门里的按钮也是浏览器默认外观。
   ========================================================================== */
.mc-portal .mc-portal-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 13px;
	background-color: rgba(255, 255, 255, .06);
	border: 1px solid rgba(237, 229, 226, .18);
	color: var(--mc-grey-1);
	font-size: .8125rem;
	cursor: pointer;
	text-decoration: none;
}

.mc-portal .mc-portal-btn:hover {
	background-color: var(--mc-green-4);
	border-color: var(--mc-green-4);
	color: #fff;
}

.mc-portal .mc-portal-btn--x {
	background-color: rgba(160, 60, 50, .2);
	border-color: rgba(200, 90, 80, .38);
	color: #f0a49c;
}

.mc-portal .mc-portal-btn--x:hover {
	background-color: #8a3630;
	border-color: #8a3630;
	color: #fff;
}

/* ==========================================================================
   50 页脚文字：全部与小字统一
   --------------------------------------------------------------------------
   反馈：统一字体、颜色、大小，和那段小字一致，不要加粗也不要改色。

   第 48 节已经统一了颜色与字重，但字号仍留着三档（17/15/13）——
   那是按「标题—字段—脚注」的层级配的。现在把字号也压平，
   整块变成同一号字，完全靠行距与留白分隔。

   这样做会让层级消失，但页脚本就是收尾，
   没有层级反而更安静 —— 想要层次时再说。
   ========================================================================== */
.otm-mc .mc-join-box,
.otm-mc .mc-join-box *,
.otm-mc .mc-join-box .mc-join-title,
.otm-mc .mc-join-box .mc-join-row,
.otm-mc .mc-join-box .mc-join-row b,
.otm-mc .mc-join-box .mc-join-key,
.otm-mc .mc-join-box .mc-join-hint {
	font-size: .8125rem !important; /* 与小字同号 */
	font-weight: 400 !important;
	color: var(--mc-grey-2) !important;
	letter-spacing: .04em;
}

/* 标题不再靠字号或加粗拉开，只留一点下方的间距 */
.otm-mc .mc-join-box .mc-join-title {
	margin: 0 0 12px;
}

/* 标签的加宽字距也收掉，否则在小字下会显得散 */
.otm-mc .mc-join-box .mc-join-key {
	letter-spacing: .04em;
}

/* 备案号与署名同步，整块页脚保持一致 */
.otm-mc .site-footer .widget-column p,
.otm-mc .site-footer .widget-column a,
.otm-mc .site-footer .site-info,
.otm-mc .site-footer .site-info a {
	font-size: .8125rem;
	font-weight: 400 !important;
	color: var(--mc-grey-2) !important;
}

/* ==========================================================================
   51 商店表格：让文字待在格子里
   --------------------------------------------------------------------------
   症状：表格里不少单元格的文字挤出格子（实测 41 个），
   例如「下界石英矿石」需要 75px，而列宽只有 55px。

   原因：第 31 节给表格设了 table-layout: fixed。
   那是从 Excel 的「971pt 定宽」翻译过来时的选择 —— fixed 会把 23 列
   均分剩余宽度，每列刚好 55px，而内容最长需要 75px，于是必然溢出。

   改法：换成 table-layout: auto，让浏览器按内容宽度分配列宽。
   代价是整表会变宽（约 1600px），但外层本来就有横向滚动容器，
   且列宽够用之后文字才可能待得住 —— 这才是这个表最要紧的事。

   另外把单元格的内边距放宽一点，并允许长内容换行，
   避免个别超长文本把整列撑得离谱。
   ========================================================================== */
.otm-mc .site-content table,
.otm-mc .entry-content table {
	/* auto 才能按内容分配列宽 */
	table-layout: auto !important;
	width: auto !important;
	min-width: 1295px;
	max-width: none;
}

.otm-mc .site-content table td,
.otm-mc .site-content table th,
.otm-mc .entry-content table td,
.otm-mc .entry-content table th {
	padding: 3px 6px !important;
	/* 内容优先不换行；实在放不下才换行，而不是溢出 */
	white-space: nowrap;
	overflow-wrap: normal;
}

/*
 * 长文本（玩家名、备注）允许换行，并给个上限宽度，
 * 否则单列可能被一个超长串撑到几百像素。
 */
.otm-mc .site-content table td,
.otm-mc .entry-content table td {
	white-space: normal;
	max-width: 220px;
}

/* 纯数字/价格这类短内容保持不换行，读起来成列 */
.otm-mc .site-content table td[class^="xl63"],
.otm-mc .site-content table td[class^="xl65"],
.otm-mc .site-content table td[class^="xl66"],
.otm-mc .site-content table td[class^="xl68"] {
	min-width: 62px;
}

/* ==========================================================================
   52 页脚字段行：收窄标签列
   --------------------------------------------------------------------------
   反馈：QQ 群 / 邮箱 和它们的值之间空太大。

   原因是标签列写死了 4.5em（约 58px），而最宽的标签「QQ 群」只要约 45px，
   多出来的十几像素全是空白；「邮箱」更短，空白就更明显。

   收成 3.6em —— 刚好容得下最宽的那个标签，两行的值仍然对齐。
   行间距（gap）也从 12px 收到 9px。
   ========================================================================== */
.otm-mc .mc-join-key {
	flex: 0 0 3.6em;
}

.otm-mc .mc-join-row {
	gap: 9px;
}

@media screen and (max-width: 47.99em) {

	.otm-mc .mc-join-key {
		flex: 0 0 3.6em;
	}
}

/* ==========================================================================
   53 页脚：整体收小 + 拟物嵌底
   --------------------------------------------------------------------------
   反馈：这部分太大太突兀，整体调小，用拟物风格嵌进网页底部。

   为什么原来那么大：
     .mc-qr 写的是 flex: 1 1 0（可伸缩、基准 0），
     而二维码所在的列占页脚 44% 宽 —— 两个二维码就把 491px 平分掉，
     每个约 245px。它本来是想「等分」，结果变成了「撑满」。

   改法分两层：
     尺寸 —— 二维码改固定上限 132px，不再参与伸缩；
             页脚内边距、部件间距、字号一并收紧。
     质感 —— 页脚做成一条**凹槽**：顶部一道极淡的高光边 + 内侧投影，
             像嵌进页面底部的一层，而不是浮在上面的另一块板。
             深色基岩条保留（那是页面收尾的视觉落点）。
   ========================================================================== */

/* --------------------------------------------------------------------------
   53.1 收紧尺寸
   -------------------------------------------------------------------------- */
.otm-mc #secondary.widget-area {
	padding: 18px 20px 20px;
}

.otm-mc .site-footer .widget {
	margin-bottom: 14px;
}

.mc-qr-grid {
	justify-content: flex-start;
	gap: 12px;
}

.mc-qr {
	/* 不再伸缩：撑满是它变大的根因 */
	flex: 0 0 auto;
	width: 132px;
	max-width: 132px;
	padding: 7px;
	border-width: 2px;
}

.otm-mc .mc-qr:hover {
	transform: translateY(-2px);
	box-shadow: var(--bevel-up-sm), var(--drop-float);
}

/* 两栏比例也让一让：左栏不再需要那么宽 */
.otm-mc .site-footer .widget-column.footer-widget-1 {
	width: 32%;
}

.otm-mc .site-footer .widget-column.footer-widget-2 {
	width: 64%;
}

/* --------------------------------------------------------------------------
   53.2 字体再收一档
   -------------------------------------------------------------------------- */
.otm-mc .site-footer .widget-column p,
.otm-mc .site-footer .widget-column a,
.otm-mc .site-footer .mc-join-box,
.otm-mc .site-footer .mc-join-box * {
	font-size: .78rem !important;
}

.otm-mc .site-footer .mc-join-title,
.otm-mc .site-footer .mc-join-hint {
	font-size: .75rem !important;
}

.otm-mc .mc-join-box .mc-join-title {
	margin-bottom: 9px;
}

.otm-mc .mc-join-box .mc-join-hint {
	margin-top: 11px;
	padding-top: 9px;
}

.otm-mc .site-info {
	padding-top: 12px;
	font-size: .75rem !important;
}

/* --------------------------------------------------------------------------
   53.3 拟物：做成嵌进页底的凹槽
   --------------------------------------------------------------------------
   用「顶部一道淡高光 + 内侧投影」表达「凹」，
   而不是加边框或投影去表达「凸」—— 页脚是收尾，不该再浮起来。
   -------------------------------------------------------------------------- */
.otm-mc .site-footer {
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

.otm-mc #secondary.widget-area {
	border-top: 1px solid rgba(0, 0, 0, .5);
	background-image: linear-gradient(180deg, rgba(0, 0, 0, .22), rgba(0, 0, 0, 0) 26px);
	box-shadow: inset 0 10px 18px -14px rgba(0, 0, 0, .95);
}

@media screen and (max-width: 47.99em) {

	.mc-qr {
		width: 118px;
		max-width: 118px;
	}

	.otm-mc .site-footer .widget-column.footer-widget-1,
	.otm-mc .site-footer .widget-column.footer-widget-2 {
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   53.4 页脚内边距：按优先级对齐后再收
   --------------------------------------------------------------------------
   第 53 节写的 .otm-mc #secondary.widget-area 是 (1,2,0) = 120，
   而页面里早就有一条 .otm-mc.has-sidebar .site-content > .wrap > #secondary
   是 (1,4,0) = 140 —— 前者永远赢不了，所以 padding 一直是 34/30/36，
   页脚底部就空出一大片。

   这里用同一条选择器、放在更后面来覆盖。
   -------------------------------------------------------------------------- */
.otm-mc .site-content > .wrap > #secondary,
.otm-mc.has-sidebar .site-content > .wrap > #secondary,
.otm-mc #secondary.widget-area {
	padding: 16px 22px 14px;
}

.otm-mc .site-info {
	padding-top: 10px;
	margin-top: 4px;
}

/* 页脚自身也收一收，别在底部留白 */
.otm-mc .site-footer {
	padding-bottom: 0;
}

/* ==========================================================================
   54 页脚两栏：改浮动为 flex，文字贴近二维码
   --------------------------------------------------------------------------
   反馈：文字往左靠，贴近二维码。

   原因是父主题用浮动排这两栏：
     .site-footer .widget-column.footer-widget-1 { float: left;  width: 36% }
     .site-footer .widget-column.footer-widget-2 { float: right; width: 58% }
   列宽是写死的百分比，而左栏里的两个二维码加起来只有 276px，
   装进 32% 的列（约 357px）就多出 80px 空白；
   再加上两栏之间 4% 的缝，二维码和文字之间凭空隔了 100 多像素。

   改成 flex：
     左栏 flex: 0 0 auto —— 按二维码的实际宽度收窄，不留空白；
     右栏 flex: 1 1 auto —— 吃掉剩下的宽度。
   这样文字的起点就紧跟在二维码后面。
   ========================================================================== */
.otm-mc .site-footer .widget-area {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 34px;
}

.otm-mc .site-footer .widget-column,
.otm-mc .site-footer .widget-column.footer-widget-1,
.otm-mc .site-footer .widget-column.footer-widget-2 {
	float: none;
	width: auto;
}

/* 二维码栏按内容收窄 */
.otm-mc .site-footer .widget-column.footer-widget-1 {
	flex: 0 0 auto;
}

/* 文字栏吃掉剩余宽度 */
.otm-mc .site-footer .widget-column.footer-widget-2 {
	flex: 1 1 300px;
	min-width: 0;
}

/* 窄屏时上下堆叠，间距收一点 */
@media screen and (max-width: 47.99em) {

	.otm-mc .site-footer .widget-area {
		gap: 22px;
	}

	.otm-mc .site-footer .widget-column.footer-widget-1,
	.otm-mc .site-footer .widget-column.footer-widget-2 {
		flex: 1 1 100%;
	}
}

/* ==========================================================================
   55 商店表格：单行显示 + MC 卡通像素风
   --------------------------------------------------------------------------
   反馈：让所有文字都排在一行，并加一点我的世界卡通像素味。

   【为什么原来会换行】
     第 51 节为了让文字不溢出，给单元格加了 white-space: normal + max-width: 108px，
     于是长一点的物品名和价格都会被折成两三行（「500 元/组」拆成「500 元/」+「组」）。
     现在改成 nowrap：宁可整表变宽、用横向滚动看，也不把文字拆开 ——
     数据表最要紧的是「一眼读完一格」。

   【像素风怎么加才不土】
     用的是 MC 原版 GUI 的语言，而不是加一层像素噪点：
       · 格子用「左上亮、右下暗」的斜角描边 —— 那是 MC 物品栏格子的做法
       · 描边一律 2px 实线，不圆角、不模糊，边缘干脆
       · 悬停整行提亮，像鼠标扫过物品栏
     配色仍沿用站点已有的 MC 色，不引入新色。
   ========================================================================== */

/* --------------------------------------------------------------------------
   55.1 一律单行
   -------------------------------------------------------------------------- */
.otm-mc .site-content table td,
.otm-mc .site-content table th,
.otm-mc .entry-content table td,
.otm-mc .entry-content table th {
	white-space: nowrap !important;
	max-width: none !important;
	overflow-wrap: normal;
}

.otm-mc .site-content table,
.otm-mc .entry-content table {
	min-width: 0;
}

/* --------------------------------------------------------------------------
   55.2 斜角描边：MC 物品栏格子的做法
   -------------------------------------------------------------------------- */
.otm-mc .site-content table td,
.otm-mc .entry-content table td {
	padding: 5px 9px !important;
	border-style: solid !important;
	border-width: 2px !important;
	border-top-color: rgba(255, 246, 232, .09) !important;
	border-left-color: rgba(255, 246, 232, .09) !important;
	border-right-color: #16130f !important;
	border-bottom-color: #16130f !important;
	line-height: 1.35;
}

/* 整行悬停提亮：像鼠标扫过物品栏 */
.otm-mc .site-content table tr:hover td,
.otm-mc .entry-content table tr:hover td {
	filter: brightness(1.14);
}

/* --------------------------------------------------------------------------
   55.3 表格外框：厚一点的斜角边，像一块 MC 面板
   -------------------------------------------------------------------------- */
.otm-mc .site-content table,
.otm-mc .entry-content table {
	border: 3px solid #16130f !important;
	border-top-color: rgba(255, 246, 232, .12) !important;
	border-left-color: rgba(255, 246, 232, .12) !important;
}

/* --------------------------------------------------------------------------
   55.4 横向滑动提示
   --------------------------------------------------------------------------
   单行之后表格必然变宽，得有句话告诉玩家「可以左右滑」。
   用伪元素挂在滚动容器上，省得改模板。
   -------------------------------------------------------------------------- */
.otm-mc .site-content div:has(> table)::before,
.otm-mc .entry-content div:has(> table)::before {
	content: "← 表格较宽，可左右滑动查看 →";
	display: block;
	margin-bottom: 8px;
	font-size: .8125rem;
	letter-spacing: .06em;
	color: var(--mc-grey-3);
}

@media screen and (max-width: 47.99em) {

	.otm-mc .site-content table td,
	.otm-mc .entry-content table td {
		padding: 4px 7px !important;
	}
}

/* ==========================================================================
   56 页脚内容居中
   --------------------------------------------------------------------------
   反馈：这块内容居中排版。

   要点：光加 justify-content: center 是不够的 ——
   第 54 节给文字栏写的是 flex: 1 1 300px（会吃满剩余宽度），
   它一撑满，两栏加起来就等于整行了，居中也就没有可居的余量。

   所以要让文字栏也按内容收窄（flex: 0 1 auto）：
   两栏各自贴合内容之后，整组才有余量，居中才真正生效。

   注意只居中「整块」，栏内的「QQ 群 / 邮箱」仍保持左对齐 ——
   那两行的值要对齐成列，居中的话就散了。
   ========================================================================== */
.otm-mc .site-footer .widget-area {
	justify-content: center;
}

.otm-mc .site-footer .widget-column.footer-widget-2 {
	flex: 0 1 auto;
}

/* 窄屏堆叠时不该再居中偏移，回到整宽 */
@media screen and (max-width: 47.99em) {

	.otm-mc .site-footer .widget-column.footer-widget-1,
	.otm-mc .site-footer .widget-column.footer-widget-2 {
		flex: 1 1 100%;
	}
}

/* ==========================================================================
   57 商店表格：收小 + 融入背景 + 手帐感
   --------------------------------------------------------------------------
   反馈：表格整体还是太大，要和背景融入，也要有手帐的感觉。

   【为什么原来「像贴上去的一块板子」】
     第 31 节把 Excel 的色板逐个翻译成了 MC 色，但用的是**不透明**实色
     （#6b4b2f 泥土棕、#3b2a1a 深木……）。一整片实色块压在深色纸面上，
     和背景没有任何往来，视觉上就是「另一块东西」。
     再加上 2px 的强对比斜角描边和 3px 外框，就更硬了。

   【怎么改】
     底色 —— 同样的色相，改成半透明（.35~.55）。纸面透上来之后，
             表格自然变成「画在纸上的一层」，而不是「压在纸上的一块」。
     描边 —— 从 2px 强对比降到 1px 低对比，只留一点分隔感。
     外框 —— 去掉厚边框，换成一道极淡的边 + 一点柔和投影，
             像是把一张表贴在纸面上。
     字号 —— 12px → 11px，内边距 5/9 → 2/6，整表窄下来一截。
     楼层标 —— 从饱和的金/绿渐变改成半透明暖调，字号 20px → 15px。
   ========================================================================== */

/* --------------------------------------------------------------------------
   57.1 收小
   -------------------------------------------------------------------------- */
.otm-mc .site-content table td,
.otm-mc .site-content table th,
.otm-mc .entry-content table td,
.otm-mc .entry-content table th {
	padding: 2px 6px !important;
	font-size: 11px !important;
}

/* --------------------------------------------------------------------------
   57.2 半透明底色：让纸面透上来
   -------------------------------------------------------------------------- */
.otm-mc .site-content table td[class^="xl63"],
.otm-mc .entry-content table td[class^="xl63"] {
	background-color: rgba(107, 75, 47, .40) !important;
}

.otm-mc .site-content table td[class^="xl65"],
.otm-mc .entry-content table td[class^="xl65"] {
	background-color: rgba(59, 42, 26, .52) !important;
}

.otm-mc .site-content table td[class^="xl66"],
.otm-mc .entry-content table td[class^="xl66"] {
	background-color: rgba(205, 183, 135, .52) !important;
}

.otm-mc .site-content table td[class^="xl64"],
.otm-mc .entry-content table td[class^="xl64"] {
	background-color: rgba(35, 31, 28, .42) !important;
}

.otm-mc .site-content table td[class^="xl67"],
.otm-mc .entry-content table td[class^="xl67"] {
	background-color: rgba(79, 107, 128, .34) !important;
}

.otm-mc .site-content table td[class^="xl68"],
.otm-mc .entry-content table td[class^="xl68"] {
	background-color: rgba(138, 98, 56, .42) !important;
}

/* --------------------------------------------------------------------------
   57.3 描边淡化：只留一点分隔感
   -------------------------------------------------------------------------- */
.otm-mc .site-content table td,
.otm-mc .entry-content table td {
	border-width: 1px !important;
	border-top-color: rgba(255, 246, 232, .045) !important;
	border-left-color: rgba(255, 246, 232, .045) !important;
	border-right-color: rgba(0, 0, 0, .16) !important;
	border-bottom-color: rgba(0, 0, 0, .16) !important;
}

/* --------------------------------------------------------------------------
   57.4 外框：像一张贴在纸面上的表
   -------------------------------------------------------------------------- */
.otm-mc .site-content table,
.otm-mc .entry-content table {
	border: 1px solid rgba(237, 229, 226, .09) !important;
	box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .85);
}

/* --------------------------------------------------------------------------
   57.5 楼层标：饱和渐变 → 半透明暖调
   -------------------------------------------------------------------------- */
.otm-mc .site-content table td[class^="xl69"],
.otm-mc .entry-content table td[class^="xl69"] {
	font-size: 15px !important;
	background-image: linear-gradient(180deg, rgba(224, 181, 60, .5), rgba(168, 127, 34, .5)) !important;
	border-color: rgba(0, 0, 0, .18) !important;
}

.otm-mc .site-content table td[class^="xl70"],
.otm-mc .entry-content table td[class^="xl70"] {
	font-size: 15px !important;
	background-image: linear-gradient(180deg, rgba(108, 195, 73, .46), rgba(60, 133, 39, .46)) !important;
	border-color: rgba(0, 0, 0, .18) !important;
}

/* 悬停提亮减弱一档：原来 1.14 在淡底上会跳 */
.otm-mc .site-content table tr:hover td,
.otm-mc .entry-content table tr:hover td {
	filter: brightness(1.08);
}

@media screen and (max-width: 47.99em) {

	.otm-mc .site-content table td,
	.otm-mc .entry-content table td {
		padding: 2px 5px !important;
	}
}

/* ==========================================================================
   58 页脚：右对齐到纸面右缘
   --------------------------------------------------------------------------
   反馈：二维码和文字靠右对齐手帐纸张的右边。

   要对齐，先得同宽 —— 但页脚和纸面本来宽度不一样：
     纸面  .otm-mc.home .site-content > .wrap { max-width: 900px }
     页脚  跟随父主题的 .wrap，实际约 1000~1200px
   宽度不同，右边缘永远对不上，靠右也只是「靠到另一个位置」。

   所以两步：
     1. 页脚内容容器收成和纸面一样的 900px，居中
     2. 里面靠右（justify-content: flex-end）
   另外把 #secondary 的左右内边距归零 —— 它原来那 22px 会让内容比纸面
   边缘再往里缩一截，对齐就差这一截。
   ========================================================================== */
.otm-mc .site-footer > .wrap {
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 0;
	padding-right: 0;
}

.otm-mc .site-footer .widget-area {
	justify-content: flex-end;
}

.otm-mc .site-footer .widget-column.footer-widget-2 {
	flex: 0 1 auto;
}

/* 内边距只留上下，左右交给上面那层控制 */
.otm-mc .site-content > .wrap > #secondary,
.otm-mc.has-sidebar .site-content > .wrap > #secondary,
.otm-mc #secondary.widget-area {
	padding-left: 0;
	padding-right: 0;
}

/* 窄屏要留出安全边距，不然会贴屏幕边 */
@media screen and (max-width: 47.99em) {

	.otm-mc .site-footer > .wrap {
		padding-left: 16px;
		padding-right: 16px;
	}

	.otm-mc .site-footer .widget-area {
		justify-content: flex-start;
	}
}

/* --------------------------------------------------------------------------
   58.1 右对齐的兜底：用 margin-left: auto 而不是 justify-content
   --------------------------------------------------------------------------
   实测发现 justify-content: flex-end 在这里差 34px —— 正好等于 gap 的值。
   容器是 flex-wrap: wrap，末尾的间隙被算进了对齐里，
   于是最后一栏的右缘停在「容器右缘 - 34px」，没真正贴边。

   margin-left: auto 更直接：把第一栏连同后面的一起推到最右，
   最后一栏自然贴住容器右缘，不受 gap 影响。
   -------------------------------------------------------------------------- */
.otm-mc .site-footer .widget-column.footer-widget-1 {
	margin-left: auto;
}

.otm-mc .site-footer .widget-column.footer-widget-2 {
	margin-right: 0;
}

@media screen and (max-width: 47.99em) {

	.otm-mc .site-footer .widget-column.footer-widget-1 {
		margin-left: 0;
	}
}

/* --------------------------------------------------------------------------
   58.2 去掉末尾幽灵间隙
   --------------------------------------------------------------------------
   实测：无论用 justify-content: flex-end 还是 margin-left: auto，
   内容右缘始终停在「容器右缘 - 34px」，而那 34px 正好等于 gap 的值。
   flex-wrap: wrap 的容器里，gap 在末尾一样占位 —— 于是最后永远差一格。

   改法：gap 归零，间距改由第一栏的 margin-right 提供。
   少一个 flex 间隙，末端就不再被占位，最后一栏能真正贴住右缘。
   -------------------------------------------------------------------------- */
.otm-mc .site-footer .widget-area {
	gap: 0;
}

.otm-mc .site-footer .widget-column.footer-widget-1 {
	margin-right: 34px;
}

@media screen and (max-width: 47.99em) {

	.otm-mc .site-footer .widget-area {
		row-gap: 22px;
	}

	.otm-mc .site-footer .widget-column.footer-widget-1 {
		margin-right: 0;
	}
}

/* ==========================================================================
   59 商店表格：收进容器，不用左右滑动
   --------------------------------------------------------------------------
   反馈：表格太宽，要不用左右滑动就能看清全部。

   实测宽度构成（1440px 视口）：
     容器 1440px  表格 1602px  → 超出 162px
     列宽 62 的有 11 列、79 的有 9 列、84 的有 1 列，合计 1477px
     也就是说表格比它自己的内容还多 125px 的尾部空白

   所以只要做两件小事就够了，不必删列：
     1. 把表格宽度收成「刚好包住内容」（fit-content），去掉那 125px 冗余
     2. 内边距再降一档（2/6 → 1/4），每列省几像素，21 列合起来约 80px

   估算：1477 - 80 ≈ 1397px < 1440px ✅

   顺带说明：分列是保不住的 —— 单行文字 + 更窄的表格，两者不可兼得；
   上一轮已经把字号降到 11px，这里只动内边距，字号不再往下压。
   ========================================================================== */
.otm-mc .site-content table,
.otm-mc .entry-content table {
	width: fit-content !important;
	min-width: 0 !important;
	max-width: none;
}

.otm-mc .site-content table td,
.otm-mc .site-content table th,
.otm-mc .entry-content table td,
.otm-mc .entry-content table th {
	padding: 1px 4px !important;
}

/* 楼层标本来字号大、内边距也大，单独收一点，它最占宽 */
.otm-mc .site-content table td[class^="xl69"],
.otm-mc .entry-content table td[class^="xl69"],
.otm-mc .site-content table td[class^="xl70"],
.otm-mc .entry-content table td[class^="xl70"] {
	font-size: 14px !important;
	padding: 3px 5px !important;
}

/* 已经能全部看全，滑动提示就不必了 */
.otm-mc .site-content div:has(> table)::before,
.otm-mc .entry-content div:has(> table)::before {
	content: none;
}

/* --------------------------------------------------------------------------
   59.1 去掉列宽下限 —— 这才是表格宽的真正原因
   --------------------------------------------------------------------------
   第 51 节给「短内容」的列设过 min-width: 62px，想让它成列好看。
   但这一条把所有 21 列都按 62px 起步 ——
   其中 11 列其实是**纯空白的分隔列**（内容是一个全角空格），
   它们本来只需要约 20px，被这条规则硬撑到 62px，
   于是白白多出 11 × 42 ≈ 460px，表格就永远收不进容器。

   列宽交给内容决定即可：有字的格子自然宽，空白的格子自然窄。
   -------------------------------------------------------------------------- */
.otm-mc .site-content table td,
.otm-mc .site-content table th,
.otm-mc .entry-content table td,
.otm-mc .entry-content table th {
	min-width: 0 !important;
}

/* --------------------------------------------------------------------------
   58.3 改为靠左对齐纸面左缘
   --------------------------------------------------------------------------
   反馈：靠左对齐手帐纸的页左边。

   上一轮做的是靠右（margin-left: auto 把内容推到最右）。
   现在方向翻过来即可 —— 页脚容器已经和纸面同为 900px，
   所以「靠左」就等于「与纸面左缘对齐」，不需要再调宽度。

   间距仍由第一栏的 margin-right 提供（不用 gap，理由见 58.2）。
   -------------------------------------------------------------------------- */
.otm-mc .site-footer .widget-column.footer-widget-1 {
	margin-left: 0;
}

.otm-mc .site-footer .widget-area {
	justify-content: flex-start;
}

/* --------------------------------------------------------------------------
   60 商店表格：边列颜色统一
   --------------------------------------------------------------------------
   反馈：最左最右的边框颜色没统一。

   实测边列的底色是各不相同的 —— 左列有时是泥土棕（xl63）、有时是蓝灰（xl67），
   右列有时是深木（xl65）、有时是橡木（xl68）、有时是深板岩（xl64）。
   这些颜色在表格内部是有意义的（泥土是通道、蓝灰是水/玻璃、橡木是木料），
   但落在最外一圈时，两边的色差会让表格看起来「歪了」——
   再加上左右颜色本来就不同，视觉重心就往一边偏。

   改法：最外一圈统一成同一种深色，让表格有一条自己的边框。
   内部格子的颜色一律不动。

   后来反馈「左右边框颜色不对称」—— 再查发现边框列的颜色其实早就统一了，
   真正的差异在别处：这张表是表格软件导出的，列宽合计只有 975px，
   而表格被撑到 1016px，**右边多出 41px 是表格自己的底色**（rgb(35,31,28)）。
   左边没有这段（格子起点与表格左缘只差 1px 边框），于是看着就不对称。

   所以这里做两件事：
     1. 边框列改用**不透明**的 #1e1c18 ——
        原来是 rgba(28,25,21,.55) 叠在表格底色上，最终渲染成 rgb(30,28,24)；
        写成不透明值，颜色就与叠出来的结果**逐像素一致**，不再受底色影响。
     2. 表格底色也用同一个 #1e1c18 ——
        右边那截空列露出来的就是它，于是与边框完全同色，左右对称。

   选 #1e1c18 而不是别的值，是因为它正好等于原来边框列渲染出来的 rgb(30,28,24)，
   改完边框本身的观感不变。

   注意排除楼层标（xl69 金色 / xl70 绿色）——
   它们常常横跨整行、正好落在 first-child / last-child 上，
   不加 :not() 会把那条金/绿横栏也涂黑。
   -------------------------------------------------------------------------- */
/*
 * 只涂**最左列**。
 *
 * 之前 first-child 和 last-child 一起涂，但两边的性质不一样：
 *   最左列 是空白的边列（本来就没内容），涂深色正好当边框；
 *   最右列 是**数据列**（蓝冰、冰块、雪块…），涂深色等于把一列数据压进边框，
 *          看起来右边多了一道 75px 宽的深色竖条，和左边 20px 那道完全不对称。
 *
 * 右边那道边框改由**表格自身的底色**提供（表格比列宽合计多出 41px，
 * 那截露出的就是底色，已经是同一个 #1e1c18），所以不必再涂格子。
 */
.otm-mc .site-content table tr > td:first-child:not([class^="xl69"]):not([class^="xl70"]),
.otm-mc .entry-content table tr > td:first-child:not([class^="xl69"]):not([class^="xl70"]) {
	background-color: #1e1c18 !important;

	/*
	 * 把左边列加宽到与右边那道底色同宽（约 41px）。
	 * 原内边距 4px、列宽 20px；这里补到 25px，列宽约 41px，左右两道边框就一样宽了。
	 */
	padding-left: 25px !important;
}

/*
 * 表格自身的底色也设成同一个 #1e1c18。
 *
 * 表格比它的列宽合计多出 41px（导出时带的宽度与实际列宽对不上），
 * 那 41px 露出的就是表格底色 —— 原来它是 rgb(35,31,28)，比边框亮一档，
 * 于是右边看着和左边不一样。设成同色之后就对称了。
 */
.otm-mc .site-content table,
.otm-mc .entry-content table {
	background-color: #1e1c18 !important;
}

/* 表格居中：容器比表格宽时，左右留白均等 */
.otm-mc .site-content div:has(> table) > table,
.otm-mc .entry-content div:has(> table) > table,
.otm-mc .site-content > table,
.otm-mc .entry-content > table {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* ==========================================================================
   61 页脚文字块：收紧行距，把备案号落到二维码下缘那条线上
   --------------------------------------------------------------------------
   反馈：文字排版再紧凑一点，备案号要压在二维码下缘那条线上。

   改前实测（1440 视口，数值相对页脚顶，各桌面宽度都一样）：
     二维码外框   136 → 268   （高 132）
     文字块       136 → 257.5 （标题 + QQ 群 + 邮箱 + 虚线脚注）
     备案号       271.5 → 291.5
   即备案号比二维码下缘低了 23.5px。

   【为什么按 132 来凑，而不是去猜该往上挪多少】
     两栏是 flex + align-items: flex-start，所以左右两栏**顶边齐平**，都在 136。
     顶边既然齐平，「备案号底边落在二维码底边」就等价于
     「右栏内容总高 = 二维码外框高 = 132」。
     于是不用试偏移量，只要把右栏这几行的高度加间距凑成 132 即可。

     行高一律写死 18px，不再用 1.6 这类倍数 ——
     倍数在 12.48px 字号下算出 19.968，凑不出整数，末尾总要差零点几像素对不上线。
     写死之后逐行实测（行高 18px）：

       标题        18
       +6
       QQ 群       19   ← 标签 13px、值 12.48px，基线对齐后比 18 多出 1px
       +6
       邮箱        19   ← 同上
       +7   ← 与上一行的 6 相邻折叠，取大者，实际间距就是 7
       虚线脚注     1(虚线) + 6(内边距) + 18 = 25
       —————————— 小计 100
       +14  ← 备案号单独起一段，不跟脚注挤在一起
       备案号      18
       —————————— 100 + 14 + 18 = 132 ✅ 正好等于二维码外框高

   所以下面这几个数字不是随手写的，改任何一个都要重新配平 132。
   ========================================================================== */

/* 行高统一：页脚文字一律 18px 一行 */
.otm-mc .site-footer .widget-column p,
.otm-mc .site-footer .widget-column .mc-join-box,
.otm-mc .site-footer .widget-column .mc-join-box * {
	line-height: 18px !important;
}

/* 段间距收一档：原来标题、两行字段各留 9px */
.otm-mc .site-footer .mc-join-box .mc-join-title,
.otm-mc .site-footer .mc-join-box .mc-join-row {
	margin: 0 0 6px;
}

/* 脚注：虚线上方 7、下方留白 6（原 11 / 9） */
.otm-mc .site-footer .mc-join-box .mc-join-hint {
	margin-top: 7px;
	padding-top: 6px;
}

/* 备案号上方那 14px 是配平的关键，改它备案号就离开那条线了 */
.otm-mc .site-footer .footer-widget-2 .widget {
	margin-bottom: 14px;
}

/* 最后一个部件之后不再留空：页脚就收在备案号这一行 */
.otm-mc .site-footer .footer-widget-2 .widget:last-child {
	margin-bottom: 0;
}


/* ==========================================================================
   62 手机版：从「桌面版缩小」改回真正的响应式
   --------------------------------------------------------------------------
   functions.php 里的 otm_desktop_viewport() 把布局视口写死成 1280px，
   手机按 1280 排版再整体缩到屏宽 —— 390px 的手机上缩放比约 0.30，
   15px 的正文实际只有 4.6px，必须双指放大才能读。
   同时它让第 14 节写好的 max-width: 768px / 1024px 那批规则**从未生效过**。

   那个 hook 已经摘掉，这一节补上摘掉之后暴露出来的问题。
   实测方式：CDP 里在页面脚本执行前就把 viewport 固定成 device-width
   （否则 wildlife.js 会拿 1280 去算坐标，量出来的是假的溢出），
   然后在 390 / 768 / 1024 三档量 scrollWidth - clientWidth。

   摘掉 hook 后 390px 实测横向溢出 179px，来源两处，下面逐个处理。
   ========================================================================== */

/* 62.1 图片灯箱 .mc-portal
   它是 position: fixed + visibility: hidden 的浮层，平时看不见，
   但宽度实测 569px，超出 390 的视口，把整个文档的 scrollWidth 撑大了
   —— 表现就是「页面右边多出一条空白，能横向拖」。
   夹到视口宽即可，打开时本来也该铺满屏。 */
@media screen and (max-width: 1024px) {
	.otm-mc .mc-portal,
	.otm-mc .mc-portal-shell,
	.otm-mc .mc-portal-bar,
	.otm-mc .mc-portal-body {
		max-width: 100vw !important;
	}
}

/* 62.2 两侧的宝丽来照片 .mc-fig（在 figures.css 里）
   桌面上它们分列正文两侧做装饰，narrow 之后没有可放的位置，
   会压到正文上或撑出横向滚动。窄屏直接收起 ——
   它们是装饰，不承载信息（图廊有独立的「美好瞬间」页面）。

   figures.css 排在 mc.css **后面**，所以要用 !important 才压得住。 */
@media screen and (max-width: 1024px) {
	.otm-mc .mc-fig,
	.otm-mc .mc-figs,
	.otm-mc .mc-figs-left,
	.otm-mc .mc-figs-right {
		display: none !important;
	}
}

/* 62.3 页脚：两栏改一栏
   aside.widget-area 是 flex-direction: row，两栏（二维码 / 文字块）
   在 358px 的容器里挤成 358 + 225，于是文字块被挤出可视区。
   第 58、61 节那套「备案号对齐二维码下缘」的精确排版是给桌面两栏用的，
   窄屏改成单栏竖排，并把对齐相关的写死值放开。 */
@media screen and (max-width: 768px) {
	.otm-mc .site-footer .widget-area {
		flex-direction: column !important;
		align-items: center !important;
		gap: 22px;
	}

	.otm-mc .site-footer .widget-column {
		width: 100% !important;
		max-width: 320px;
		text-align: center !important;
	}

	/* 桌面版靠写死高度把备案号压到二维码下缘那条线上（第 61 节），
	   单栏之后这条线不存在了，放开高度让它自然流。 */
	.otm-mc .site-footer .widget-column > * {
		height: auto !important;
		line-height: 1.7 !important;
	}
}

/* 62.4 兜底：任何情况下都不允许横向滚动。
   上面两条已经解决了已知的两个溢出源，这条是防止以后新增装饰层
   再把页面撑出去 —— 只在窄屏生效，桌面不受影响。 */
@media screen and (max-width: 1024px) {
	html,
	body {
		overflow-x: hidden;
	}
}

/* ==========================================================================
   63 简体站却用了繁体字形
   --------------------------------------------------------------------------
   母主题 twentyseventeen/style.css 里有这么一条：

       html[lang^="zh-"] body, html[lang^="zh-"] input, … {
         font-family: "PingFang TC", "Helvetica Neue", Helvetica,
                      STHeitiTC-Light, Arial, sans-serif;
       }

   站点是 lang="zh-Hans"（简体），但也匹配 zh-，于是全站正文落到了
   **PingFang TC（繁体字形）**上 —— 实测 body 的 computed font-family
   第一项就是它。子主题声明的 "Noto Sans"/"PingFang SC" 那套只覆盖了
   部分组件，没覆盖 body / 表单。

   mc.css 排在母主题之后，同权重（0,1,2）后写的赢，这里按简体重写。
   ========================================================================== */
html[lang^="zh-"] body,
html[lang^="zh-"] input,
html[lang^="zh-"] select,
html[lang^="zh-"] textarea,
html[lang^="zh-"] button {
	font-family: "Noto Sans", "PingFang SC", "Hiragino Sans GB",
		"Microsoft YaHei", "Noto Sans SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ==========================================================================
   64 对比度：两处实测不达标
   --------------------------------------------------------------------------
   遍历每个文字节点取实际渲染色，背景逐层合成后再算比值：

     「复制」按钮      #ffffff on #52a535 = 3.09:1   ← 需 4.5
     宝丽来日期         #8d8279 on #f7f3ea = 3.39:1   ← 需 4.5（14 处）
   ========================================================================== */

/* 64.1 复制按钮。
   品牌绿 --mc-green-4 (#52a535) 配白字只有 3.09:1。
   这不是这一个按钮的问题 —— 论坛的「发布主题」是同一组合、同一比值，
   属于整套品牌色的系统性问题：这支绿是给**深底上的文字**调的
   （#6cc349 压 #262423 有 7:1），拿来当**按钮底**配白字就不够。
   按钮底改用深一档 --mc-green-5 (#3c8527)，白字 4.59:1，色相不变。
   论坛那边已按同一口径改过，两站保持一致。 */
.otm-mc .mc-copy {
	background: linear-gradient(180deg, #4e9c34, #3c8527 50%, #357621);
	border-color: #214f16;
	color: #fff;
}

.otm-mc .mc-copy:hover,
.otm-mc .mc-copy:focus {
	background: linear-gradient(180deg, #458f2d, #357621 50%, #2d661b);
}

/* 64.2 宝丽来照片下的日期。#8d8279 压在相纸 #f7f3ea 上 3.39:1，
   压深到 #6f655c（5.14:1）。仍然是「淡淡一行小字」的观感。 */
.otm-mc .mc-fig figcaption,
.otm-mc figure.mc-fig figcaption {
	color: #6f655c;
}

/* ==========================================================================
   65 补：768px 档还剩 9px 横向溢出
   --------------------------------------------------------------------------
   第 62.2 收起了 .mc-fig 那组宝丽来，但页面上还有一组用的是
   .mc-scrap-photo（手帐剪贴照片），实测 768px 下最右边到 775px，
   把文档撑出 9px。同样是纯装饰，窄屏一起收起。
   ========================================================================== */
@media screen and (max-width: 1024px) {
	.otm-mc .mc-scrap-photo,
	.otm-mc .mc-scrap,
	.otm-mc .mc-scraps {
		display: none !important;
	}
}

/* ==========================================================================
   66 补：第 64.2 的选择器写错了对象
   --------------------------------------------------------------------------
   64.2 写的是 .mc-fig figcaption，但页面上那 14 张带日期的照片实际是
   .mc-scrap-layer > figure.mc-scrap-photo > figcaption。
   实测仍是 #8d8279 压相纸 #f7f3ea = 3.39:1，压深到 #6f655c（5.14:1）。
   ========================================================================== */
.otm-mc .mc-scrap-photo figcaption,
.otm-mc .mc-scrap-layer figcaption {
	color: #6f655c;
}

/* ==========================================================================
   67 按钮统一（三站共用的组件层 · 动森·描边糖果）
   --------------------------------------------------------------------------
   改之前实测三站按钮：

       圆角    主站 0px      论坛 10px     玩家中心 0 / 2px
       高度    29/33/45/46   38/40/42/46/52   38/40
       字号    12.16px       13px          15/16px
       内边距  3/11 等       8/13、8/20、10/14   0/16、6/12、8/12
       阴影    inset 2px 白斜面 + 2px 黑描边 + 硬投影（三站都是）

   三个问题：
     ① 三套圆角、四档高度、三种字号 —— 并排看根本不像一家；
     ② 论坛「登录」内边距是上 10px / 下 5px，不对称，文字被顶下去；
        「全部主题」纵向溢出 2px。根因是这些按钮用 display:block，
        靠内边距和行高凑垂直居中 —— 字号、行高、图标一变就歪甚至溢出；
     ③ 「过于厚重」来自 inset 2px 白斜面 + 2px 纯黑描边 + 0 3px 0 硬投影三件套。

   统一口径（方案 C·描边糖果）：
     结构   display:inline-flex + align-items/justify-content:center + line-height:1
            —— 不再靠内边距凑居中，字号/图标/长文案都不会歪，也不会溢出
     尺寸   高 32 / 40 / 48，横向内边距 14 / 18 / 24，字号 13 / 14 / 15
     形状   圆角 14px，2px 同色深描边（不是纯黑）
     厚度   0 3px 0 同色深 + 一层柔和外投影 + 顶边 2px 高光
            比原来的「白斜面 + 黑描边 + 硬投影」轻，但仍有可按下去的厚度

   配色按「文字实际落在渐变的哪一段」验算过（不是只看纯色回退值）：
     主  #448c2b → #2a641c   文字区间最差 5.00:1（顶端也有 4.17:1）
     危  #a33a2f → #7a211c   文字区间最差 7.65:1
     次  #fffdf8 → #ece3d4 配墨字 #2e2a26   最差 12.13:1
   顶边那条 2px 高光不参与计算 —— 文字居中，落不到它上面。
   ========================================================================== */

:root {
	/* ---- 三站共用的按钮令牌，三处定义必须一字不差 ---- */
	--ot-btn-r: 14px;
	--ot-btn-h-sm: 32px;
	--ot-btn-h-md: 40px;
	--ot-btn-h-lg: 48px;
	--ot-btn-px-sm: 14px;
	--ot-btn-px-md: 18px;
	--ot-btn-px-lg: 24px;
	--ot-btn-fs-sm: 13px;
	--ot-btn-fs-md: 14px;
	--ot-btn-fs-lg: 15px;

	--ot-btn-primary-top: #448c2b;
	--ot-btn-primary-bottom: #2a641c;
	--ot-btn-primary-edge: #1f4d14;

	--ot-btn-second-top: #fffdf8;
	--ot-btn-second-bottom: #ece3d4;
	--ot-btn-second-edge: #b9ab92;

	--ot-btn-danger-top: #a33a2f;
	--ot-btn-danger-bottom: #7a211c;
	--ot-btn-danger-edge: #5e1a16;

	--ot-btn-lift: 0 7px 14px -5px rgba(0, 0, 0, .45);
	--ot-btn-lift-down: 0 3px 8px -5px rgba(0, 0, 0, .45);
	--ot-btn-gloss: inset 0 2px 0 rgba(255, 255, 255, .28);
}

/* --------------------------------------------------------------------------
   67.1 结构：所有按钮型元素共用
   -------------------------------------------------------------------------- */
.otm-mc .mc-copy,
.otm-mc .menu-toggle,
.otm-mc .mc-top,
.otm-mc .mc-portal-btn,
.otm-mc .main-navigation ul li a {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px;
	line-height: 1 !important;          /* 关键：不靠行高凑居中 */
	white-space: nowrap;
	font-weight: 700;
	letter-spacing: .02em;
	text-decoration: none;
	border-radius: var(--ot-btn-r) !important;
	border: 2px solid var(--ot-btn-primary-edge) !important;
	transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

/* 尺寸档 */
.otm-mc .mc-copy,
.otm-mc .mc-portal-btn {
	height: var(--ot-btn-h-sm) !important;
	padding: 0 var(--ot-btn-px-sm) !important;
	font-size: var(--ot-btn-fs-sm) !important;
}

.otm-mc .main-navigation ul li a,
.otm-mc .menu-toggle,
.otm-mc .mc-top {
	height: var(--ot-btn-h-md) !important;
	padding: 0 var(--ot-btn-px-md) !important;
	font-size: var(--ot-btn-fs-md) !important;
}

/* --------------------------------------------------------------------------
   67.2 配色
   -------------------------------------------------------------------------- */
/* 主：绿 —— 复制、回到顶部 */
.otm-mc .mc-copy,
.otm-mc .mc-top {
	background: linear-gradient(180deg, var(--ot-btn-primary-top), var(--ot-btn-primary-bottom)) !important;
	border-color: var(--ot-btn-primary-edge) !important;
	color: #fff !important;
	box-shadow: 0 3px 0 var(--ot-btn-primary-edge), var(--ot-btn-lift), var(--ot-btn-gloss) !important;
	text-shadow: none !important;
}

/* 次：深色纸签 —— 导航项、菜单、灯箱按钮。
   主站是深色底，次级按钮用深色面板而不是浅纸，免得整条导航突然变白。 */
.otm-mc .main-navigation ul li a,
.otm-mc .menu-toggle,
.otm-mc .mc-portal-btn {
	background: linear-gradient(180deg, #4a4643, #35322f) !important;
	border-color: #201e1c !important;
	color: var(--mc-ink, #fcf5f1) !important;
	box-shadow: 0 3px 0 #201e1c, var(--ot-btn-lift), var(--ot-btn-gloss) !important;
	text-shadow: none !important;
}

/* 导航当前项：用主色点亮 */
.otm-mc .main-navigation ul li.current-menu-item > a,
.otm-mc .main-navigation ul li a:hover,
.otm-mc .main-navigation ul li a:focus-visible {
	background: linear-gradient(180deg, var(--ot-btn-primary-top), var(--ot-btn-primary-bottom)) !important;
	border-color: var(--ot-btn-primary-edge) !important;
	color: #fff !important;
	box-shadow: 0 3px 0 var(--ot-btn-primary-edge), var(--ot-btn-lift), var(--ot-btn-gloss) !important;
}

/* --------------------------------------------------------------------------
   67.3 按下：整颗下沉 2px，厚度跟着收 —— 动森那种「按实了」的手感
   -------------------------------------------------------------------------- */
.otm-mc .mc-copy:active,
.otm-mc .mc-top:active,
.otm-mc .menu-toggle:active,
.otm-mc .mc-portal-btn:active,
.otm-mc .main-navigation ul li a:active {
	transform: translateY(2px) !important;
	box-shadow: 0 1px 0 currentColor, var(--ot-btn-lift-down), var(--ot-btn-gloss) !important;
}

.otm-mc .mc-copy:active,
.otm-mc .mc-top:active {
	box-shadow: 0 1px 0 var(--ot-btn-primary-edge), var(--ot-btn-lift-down), var(--ot-btn-gloss) !important;
}

.otm-mc .menu-toggle:active,
.otm-mc .mc-portal-btn:active,
.otm-mc .main-navigation ul li a:active {
	box-shadow: 0 1px 0 #201e1c, var(--ot-btn-lift-down), var(--ot-btn-gloss) !important;
}

/* 键盘焦点：描边加亮，不挪位置 */
.otm-mc .mc-copy:focus-visible,
.otm-mc .mc-top:focus-visible,
.otm-mc .menu-toggle:focus-visible,
.otm-mc .mc-portal-btn:focus-visible,
.otm-mc .main-navigation ul li a:focus-visible {
	outline: 2px solid var(--mc-green-2, #86d562) !important;
	outline-offset: 2px !important;
}

/* 回到顶部是个方形图标钮，宽度跟高度对齐 */
.otm-mc .mc-top {
	width: var(--ot-btn-h-md) !important;
	padding: 0 !important;
}

/* ==========================================================================
   68 修正：第 67 节的两处副作用
   --------------------------------------------------------------------------
   ① 第 67.1 给 .menu-toggle 也写了 display:inline-flex !important，
      把母主题「≥48em 时 display:none」那条盖掉了 —— 桌面端把手机汉堡钮
      也显示出来了，导航条上凭空多一颗「☰ 菜单」。
      display 不该由按钮组件层来管：它决定「这颗按钮在不在」，
      是布局的事。这里把它交还给母主题，只在窄屏自己打开。

   ② 导航项从「16px 内边距 + 无描边」变成「18px 内边距 + 2px 描边」，
      一项宽了约 8px，七项就多出约 56px —— 1440 视口下「加入我们」
      被挤到第二行。把导航项单独收到 14px 内边距，并允许在真挤不下时
      才换行（gap 也收一点）。
   ========================================================================== */

/* ① display 交还母主题：桌面隐藏、窄屏显示 */
.otm-mc .menu-toggle {
	display: none !important;
}

@media screen and (max-width: 768px) {
	.otm-mc .menu-toggle {
		display: inline-flex !important;
	}
}

/* ② 导航项收窄，保证七项一行放得下 */
.otm-mc .main-navigation ul li a {
	padding: 0 14px !important;
}

.otm-mc .main-navigation ul {
	gap: 6px;
}


/* ==========================================================================
   69 输入框 / 卡片（第二批 · 与第 67/68 节的按钮同一套语言）
   --------------------------------------------------------------------------
   与论坛 custom_less 第 104 节、玩家中心第 77/78 节同名同值。

   实测改之前：
       #content > .wrap（告示牌纸面）  900x1283  圆角 0  边框 1px
                                       阴影 inset 0 1px 0 rgba(255,246,232,.12) …
       .mc-portal-shell（图片灯箱）    圆角 0  边框 2px
                                       阴影 inset 3px 3px 0 rgba(255,255,255,.1) …
                                       —— 3px 的硬内斜面，三站里最重的一处

   口径：
       卡片 / 面板  圆角 18px，比按钮大一档
                    厚度换成「一道实色底边 + 一层柔和外投影」
       输入框      高 40、圆角 14px、2px 同色描边、轻内凹槽

   作用域说明：.wrap 是母主题 Twenty Seventeen 的通用容器，页眉、导航、
   页脚都在用 —— 只能收到 #content > .wrap 这一个，不能裸写 .wrap，
   否则页脚和导航条也会跟着变成圆角卡片。
   ========================================================================== */

:root {
	--ot-field-h: 40px;
	--ot-field-r: 14px;
	--ot-field-px: 14px;
	--ot-card-r: 18px;
	--ot-tag-h: 22px;
	--ot-tag-r: 999px;
	--ot-field-well: inset 0 2px 4px rgba(0, 0, 0, .3);
}

/* --------------------------------------------------------------------------
   69.1 告示牌纸面
   -------------------------------------------------------------------------- */
.otm-mc #content.site-content > .wrap {
	border-radius: var(--ot-card-r) !important;
	border: 2px solid #201e1c !important;
	box-shadow: 0 3px 0 #201e1c,
	            0 16px 32px -14px rgba(0, 0, 0, .6) !important;
}

/* 纸面顶部那条草地像素带要跟着收圆角，否则会从圆角里顶出两个直角 */
.otm-mc #content.site-content > .wrap > *:first-child,
.otm-mc #content.site-content > .wrap::before {
	border-top-left-radius: 16px;
	border-top-right-radius: 16px;
}

/* --------------------------------------------------------------------------
   69.2 图片灯箱
   -------------------------------------------------------------------------- */
.otm-mc .mc-portal-shell {
	border-radius: var(--ot-card-r) !important;
	border: 2px solid #201e1c !important;
	box-shadow: 0 3px 0 #201e1c,
	            0 20px 44px -16px rgba(0, 0, 0, .75) !important;
}

.otm-mc .mc-portal-bar {
	border-top-left-radius: 16px;
	border-top-right-radius: 16px;
}

.otm-mc .mc-portal-body {
	border-bottom-left-radius: 16px;
	border-bottom-right-radius: 16px;
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   69.3 输入框（首页没有，但搜索页 / 评论区 / 商店页有）
   -------------------------------------------------------------------------- */
.otm-mc input[type="text"],
.otm-mc input[type="search"],
.otm-mc input[type="email"],
.otm-mc input[type="url"],
.otm-mc input[type="password"],
.otm-mc input[type="number"],
.otm-mc textarea,
.otm-mc select {
	height: var(--ot-field-h);
	padding: 0 var(--ot-field-px);
	font-size: var(--ot-btn-fs-md, 14px);
	line-height: 1;
	border: 2px solid #201e1c;
	border-radius: var(--ot-field-r);
	background: #2b2927;
	box-shadow: var(--ot-field-well);
	color: var(--mc-ink, #fcf5f1);
	transition: border-color .14s ease-out, box-shadow .14s ease-out;
}

.otm-mc textarea {
	height: auto;
	min-height: 96px;
	padding: 10px var(--ot-field-px);
	line-height: 1.6;
}

.otm-mc input[type="text"]:focus,
.otm-mc input[type="search"]:focus,
.otm-mc input[type="email"]:focus,
.otm-mc input[type="url"]:focus,
.otm-mc input[type="password"]:focus,
.otm-mc input[type="number"]:focus,
.otm-mc textarea:focus,
.otm-mc select:focus {
	border-color: var(--mc-green-4, #52a535);
	box-shadow: var(--ot-field-well), 0 0 0 3px rgba(108, 195, 73, .28);
	outline: none;
}

/* --------------------------------------------------------------------------
   69.4 复选框 / 单选框：小方糖（与玩家中心第 78 节同一套）
   -------------------------------------------------------------------------- */
.otm-mc input[type="checkbox"],
.otm-mc input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	margin: 0 8px 0 0;
	vertical-align: -4px;
	border: 2px solid #201e1c;
	border-radius: 7px;
	background-image: linear-gradient(180deg, #4a4643, #35322f);
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, .3);
	cursor: pointer;
}

.otm-mc input[type="radio"] {
	border-radius: 999px;
}

.otm-mc input[type="checkbox"]:checked,
.otm-mc input[type="radio"]:checked {
	background-image: linear-gradient(180deg, #448c2b, #2a641c);
	border-color: #1f4d14;
	box-shadow: inset 0 2px 0 rgba(255, 255, 255, .28);
}

.otm-mc input[type="checkbox"]:checked::after {
	content: "";
	display: block;
	width: 5px;
	height: 9px;
	margin: 1px auto 0;
	border: solid #fff;
	border-width: 0 2.5px 2.5px 0;
	transform: rotate(42deg);
}

.otm-mc input[type="radio"]:checked::after {
	content: "";
	display: block;
	width: 6px;
	height: 6px;
	margin: 5px auto;
	border-radius: 999px;
	background: #fff;
}


/* ==========================================================================
   70 第三轮统一：草地条的角与透明度（与论坛第 105 节、玩家中心第 79 节同口径）
   --------------------------------------------------------------------------
   站长截图指出告示牌左上角的草地条是直角，从卡片圆角里戳出来。

   第 69 节给的是 .wrap::before 和 .wrap > :first-child —— 选错了。
   实测草地条是 .wrap::after：absolute; top:0; 宽 896; 高 16; 圆角 0。
   卡片本身 18px 圆角 + 2px 描边，内侧有效圆角是 16px，
   直角的条就从两个上角露出去。

   同时三站的草地条图案各不相同，而且是半透明的：
       主站     14px 块  α .50 / .34
       论坛     14px 块  α .60 / .42
       玩家中心 18/18/8  不透明三色
   半透明的条压在不同底色上，会渲染出三种不同的绿。
   统一为不透明两色 14px 块。
   ========================================================================== */

:root {
	--ot-strip: repeating-linear-gradient(90deg, #86d562 0, #86d562 14px, #6cc349 14px, #6cc349 28px);
	--ot-strip-h: 16px;
	--ot-strip-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}

.otm-mc #content.site-content > .wrap::after {
	height: var(--ot-strip-h) !important;
	border-top-left-radius: 16px !important;
	border-top-right-radius: 16px !important;
	background-image: var(--ot-strip) !important;
	box-shadow: var(--ot-strip-shadow) !important;
	opacity: 1 !important;
}

/* ==========================================================================
   71 导航条高度：75 → 64，与论坛 / 玩家中心顶栏一致
   --------------------------------------------------------------------------
   三站顶栏原本 75 / 90 / 57 三种高度。统一为 64（40px 按钮 + 上下各 12px）。
   本站导航条 = 内部 52px（ul 自带的上下内边距 + 40px 按钮）+ .wrap 上下 10.5px
   + 2px 下边。把 .wrap 的上下内边距收到 5px 即得 64。
   只作用于桌面端 —— 手机端这里装的是「☰ 菜单」和展开后的整列菜单，不能限高。
   ========================================================================== */
@media screen and (min-width: 769px) {
	.otm-mc .navigation-top .wrap {
		padding-top: 5px !important;
		padding-bottom: 5px !important;
	}
}

/* ==========================================================================
   72 主题开关的按钮文字
   --------------------------------------------------------------------------
   开关是导航末尾的 .otm-theme-toggle（functions.php 追加进菜单）。
   本站有整页缓存，文字不能由服务端写死，这里按 <html> 上由判定脚本打的
   data-ot-pref 显示当前偏好 —— 首帧就对，不会先空一下再填上。
   ========================================================================== */
html[data-ot-pref="auto"]  .otm-mc .otm-theme-toggle > a::before { content: "🌓 自动"; }
html[data-ot-pref="light"] .otm-mc .otm-theme-toggle > a::before { content: "☀️ 浅色"; }
html[data-ot-pref="dark"]  .otm-mc .otm-theme-toggle > a::before { content: "🌙 深色"; }

/* ==========================================================================
   73 主题开关改成纯图标（与论坛、玩家中心的开关一致）
   --------------------------------------------------------------------------
   第 72 节写的是「🌙 深色」这样的图标 + 文字，实测 1440 下导航第九项被挤到
   第二行。另外两站的开关本来就是只有图标的方形按钮 —— 改成同样的做法，
   文字留在悬停提示和 aria-label 里（functions.php 的脚本会写上）。
   ========================================================================== */
html[data-ot-pref="auto"]  .otm-mc .otm-theme-toggle > a::before { content: "🌓"; }
html[data-ot-pref="light"] .otm-mc .otm-theme-toggle > a::before { content: "☀️"; }
html[data-ot-pref="dark"]  .otm-mc .otm-theme-toggle > a::before { content: "🌙"; }

.otm-mc .main-navigation ul li.otm-theme-toggle > a {
	width: var(--ot-btn-h-md, 40px) !important;
	min-width: var(--ot-btn-h-md, 40px) !important;
	padding: 0 !important;
	font-size: 16px !important;
}

/* 给开关腾位置：导航行宽 1144，原来 8 项加间距只剩约 41px，放不下 40px 的开关 + 6px 间距。
   横向内边距 14 → 12（8 项共省 32px）。 */
.otm-mc .main-navigation ul li a {
	padding-left: 12px !important;
	padding-right: 12px !important;
}

/* 中等宽度（导航行变窄）再收一档：内边距 10、字号 13.5 —— 原来这一档不加开关也是两行 */
@media screen and (min-width: 769px) and (max-width: 1180px) {
	.otm-mc .main-navigation ul li a {
		padding-left: 10px !important;
		padding-right: 10px !important;
		font-size: 13.5px !important;
	}
}


/* ==========================================================================
   74 浅色主题（三站统一的白天版）
   --------------------------------------------------------------------------
   三站现在有「自动 / 浅色 / 深色」三态主题，偏好存在 cookie ot_theme（三站共享），
   由 <head> 里的判定脚本在首帧前给 <html> 打上 data-ot-theme。
   本站以前只有深色；论坛（forum.css）和玩家中心（oldtimes-daylight.css）都有原作者
   设计的白天配色，而且两边用的是同一组值 —— 这里照着同一组值给主站补上：
       台面   #e8dfd0 + 极淡的棋盘格
       顶栏   #dbcaae → #c3ac89，下边 2px #8a7048
       纸面   #f7f3ea，描边 #b9ab92，深墨字 #2e2a26
       页脚   #ece3d3 → #dbcdb4，上边 2px #8a7048，字 #6d5f4a
   深色（默认）一条都不改，全部挂在 html[data-ot-theme="light"] 下。
   ========================================================================== */

html[data-ot-theme="light"] {
	--ink: #2e2a26;
	--ink-soft: #5d554e;
	--ink-mute: #70675e;
}

/* ---- 台面 ---- */
html[data-ot-theme="light"] body {
	background-color: #e8dfd0 !important;
	background-image: repeating-conic-gradient(rgba(87, 70, 50, .05) 0%, rgba(87, 70, 50, .05) 25%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%) !important;
	background-size: 112px 112px !important;
	background-attachment: fixed !important;
	color: #2e2a26;
}

/* ---- 导航条 ---- */
html[data-ot-theme="light"] .otm-mc .navigation-top {
	background-color: #cdbb9f !important;
	background-image: linear-gradient(180deg, #dbcaae, #c3ac89) !important;
	border-bottom: 2px solid #8a7048 !important;
	box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35),
	            inset 0 -2px 0 rgba(120, 100, 74, .3),
	            0 4px 0 rgba(120, 100, 74, .25) !important;
}

/* 导航按钮：纸签（当前项 / 悬停仍是草绿） */
html[data-ot-theme="light"] .otm-mc .main-navigation ul li:not(.current-menu-item) > a:not(:hover):not(:focus-visible),
html[data-ot-theme="light"] .otm-mc .menu-toggle,
html[data-ot-theme="light"] .otm-mc .mc-portal-btn {
	background-image: linear-gradient(180deg, #fffdf8, #ece3d4) !important;
	border-color: #b9ab92 !important;
	color: #2e2a26 !important;
	box-shadow: 0 3px 0 #b9ab92, 0 7px 14px -5px rgba(74, 58, 40, .28), inset 0 2px 0 rgba(255, 255, 255, .85) !important;
}

/* ---- 告示牌纸面 ---- */
html[data-ot-theme="light"] .otm-mc #content.site-content > .wrap {
	--mc-paper: #f7f3ea;
	--mc-paper-line: rgba(87, 70, 50, .075);
	background-color: #f7f3ea !important;
	background-image:
		linear-gradient(90deg, rgba(87, 70, 50, .06) 0, rgba(87, 70, 50, .06) 1px, transparent 1px),
		linear-gradient(rgba(87, 70, 50, .06) 0, rgba(87, 70, 50, .06) 1px, transparent 1px) !important;
	background-size: 28px 28px !important;
	border-color: #b9ab92 !important;
	box-shadow: 0 3px 0 #b9ab92, 0 16px 32px -14px rgba(74, 58, 40, .35) !important;
	color: #2e2a26 !important;
}

html[data-ot-theme="light"] .otm-mc #content.site-content > .wrap :is(h1, h2, h3, h4, h5, strong, b, em, td, th) {
	color: #2e2a26 !important;
	text-shadow: none !important;
}

html[data-ot-theme="light"] .otm-mc #content.site-content > .wrap :is(p, li, span, div, code, figcaption) {
	text-shadow: none !important;
}

html[data-ot-theme="light"] .otm-mc #content.site-content > .wrap :is(p, li) {
	color: #3b332a !important;
}

html[data-ot-theme="light"] .otm-mc #content.site-content > .wrap a:not(.mc-copy) {
	color: #2a641c !important;
}

html[data-ot-theme="light"] .otm-mc #content.site-content > .wrap code {
	color: #2e2a26 !important;
	background: rgba(87, 70, 50, .08) !important;
}

html[data-ot-theme="light"] .otm-mc #content.site-content > .wrap :is(hr, .entry-header) {
	border-color: rgba(87, 70, 50, .2) !important;
}

html[data-ot-theme="light"] .otm-mc .mc-copy {
	color: #fff !important;
}

/* ---- 页脚 ---- */
html[data-ot-theme="light"] .otm-mc .site-footer {
	background-color: #e3d9c7 !important;
	background-image: linear-gradient(180deg, #ece3d3, #dbcdb4) !important;
	border-top: 2px solid #8a7048 !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5) !important;
	color: #6d5f4a !important;
}

html[data-ot-theme="light"] .otm-mc .site-footer :is(p, span, div, li, strong, small, label) {
	color: #5d554e !important;
	text-shadow: none !important;
}

html[data-ot-theme="light"] .otm-mc .site-footer a {
	color: #2a641c !important;
}

/* 服务器地址里「推荐线路」用的是 WordPress 行内高亮 <mark>：深色主题下它的深底
   和面板融在一起看不出来，浅色下就成了一块黑斑、里面的字又是深墨 —— 去掉底色 */
html[data-ot-theme="light"] .otm-mc #content.site-content > .wrap mark {
	background: transparent !important;
}

/* 日期胶囊：亮绿字压浅绿底只有 1.43:1，浅色下换深绿 */
html[data-ot-theme="light"] .otm-mc #content.site-content > .wrap time,
html[data-ot-theme="light"] .otm-mc #content.site-content > .wrap .entry-date {
	color: #2f6b1c !important;
}

/* 页脚里的加粗（QQ 群号等）也用深墨 */
html[data-ot-theme="light"] .otm-mc .site-footer :is(b, em, h2, h3, h4) {
	color: #3b332a !important;
	text-shadow: none !important;
}

/* 「推荐线路」的红字是给深底调的浅红 #f08a80，压奶油纸只有 2.19:1，浅色下换深红 */
html[data-ot-theme="light"] .otm-mc #content.site-content > .wrap mark.has-vivid-red-color,
html[data-ot-theme="light"] .otm-mc #content.site-content > .wrap .has-vivid-red-color {
	color: #b3261e !important;
}

/* ==========================================================================
   75 导航：去掉悬停提示框；所有菜单项都带行首绿点
   --------------------------------------------------------------------------
   ① mc.js 的 initNavTips() 会在悬停导航时弹一个仿 Minecraft 物品提示的浮层
      （名称 + 目标网址）。站长要求按钮下不要有提示框 —— 直接隐藏，脚本不动，
      要恢复删掉这一条即可。
   ② 第 28.7 节的行首绿点只画在 li.mc-embed（会在站内灯箱打开的项）上，
      「加入我们」链向 QQ 群、不能内嵌，所以没有点，一排里就它不一样。
      论坛、玩家中心的顶栏按钮全都带点 —— 这里给所有菜单项都加上，
      主题开关（纯图标方块）除外。
   ========================================================================== */
.mc-tip {
	display: none !important;
}

.otm-mc .main-navigation ul li:not(.otm-theme-toggle) > a::before {
	content: "" !important;
	display: inline-block !important;
	width: 5px;
	height: 5px;
	margin-right: 8px;
	vertical-align: 2px;
	background: var(--mc-green-3, #6cc349);
	box-shadow: 1px 1px 0 rgba(0, 0, 0, .5);
}


/* ==========================================================================
   76 导航放不下时先去掉绿点
   --------------------------------------------------------------------------
   第 75 节给每个导航项加了 5px 绿点 + 8px 间距，8 项合计约 150px，
   1100 左右宽度下主题开关被挤到第二行，独自一颗掉在下面。
   放不下时优先牺牲装饰：≤1180 去掉绿点；≤1060 再把内边距收到 8px、图标间距收到 4px。
   ========================================================================== */
@media screen and (min-width: 769px) and (max-width: 1180px) {
	.otm-mc .main-navigation ul li:not(.otm-theme-toggle) > a::before {
		content: none !important;
		display: none !important;
	}
}

@media screen and (min-width: 769px) and (max-width: 1060px) {
	.otm-mc .main-navigation ul li:not(.otm-theme-toggle) a {
		padding-left: 8px !important;
		padding-right: 8px !important;
		gap: 4px !important;
	}
}

/* 769–979 一行无论如何放不下 9 项，原来会折成 8+1、7+2 —— 开关孤零零落在第二行。
   限制行宽，让它稳定地折成 5 + 4 两行，上下居中对齐 */
@media screen and (min-width: 769px) and (max-width: 979.98px) {
	.otm-mc .main-navigation > div > ul,
	.otm-mc .main-navigation ul.menu,
	.otm-mc .main-navigation #top-menu {
		max-width: 580px !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}


/* ==========================================================================
   77 导航放不下时去绿点：改由脚本按「实际是否换行」触发
   --------------------------------------------------------------------------
   第 76 节按窗口宽度判断，但换不换行还取决于字体、缩放、系统字号，
   用户那边 1180 以上仍然会把开关挤到第二行。functions.php 的 otm_nav_fit_script
   量出真的换行了才给 <html> 加类，这里只管样式。第 76 节的媒体查询保留作兜底。
   ========================================================================== */
html.otm-nav-tight .otm-mc .main-navigation ul li:not(.otm-theme-toggle) > a::before {
	content: none !important;
	display: none !important;
}

html.otm-nav-tighter .otm-mc .main-navigation ul li:not(.otm-theme-toggle) a {
	padding-left: 8px !important;
	padding-right: 8px !important;
	gap: 4px !important;
}