/* ============================================================
   omni.vi #index — 1:1 像素级复刻
   所有数值 100% 来自原站 bwl.css，由 Puppeteer 脚本提取验证
   ============================================================ */

/* == 字体定义 == */
@font-face {
	font-family: "light";
	src: url(assets/MedodicaRegular.otf);
}

/* == 全局重置 == */
* {
	margin: 0;
	padding: 0;
}

/* == CSS 变量（精确匹配 :root） == */
:root {
	--bgc: black;
	--textc: #d5fff5;
	--empc: white;
	--brdc: var(--empc);
	--linkc: rgb(74, 152, 176);
	--linkv: rgb(101, 198, 196);
	--hic: hsl(0deg 0% 100% / 26%);
	--cellgap: 5px;
}

/* == html — 滚动吸附 == */
html {
	scroll-behavior: smooth;
	scroll-snap-type: y proximity;
	box-sizing: border-box;
}

/* == body — font-family: "light", 星空纹理背景 == */
body {
	font-family: "light";
	background: url(assets/skska.png);
	color: var(--textc);
	background-size: 248px;
	background-attachment: fixed;
}

/* == 滚动条 — 主体隐藏，div 内 4px 白色 == */
::-webkit-scrollbar {
	width: 0px;
}

div::-webkit-scrollbar {
	width: 4px;
}

::-webkit-scrollbar-track {
	background: var(--bgc);
}

::-webkit-scrollbar-thumb {
	background: var(--empc);
}

/* == 选中高亮 == */
::selection {
	background: var(--hic);
}

/* == 链接 == */
a {
	color: var(--linkc);
	text-decoration: none;
}

a:visited {
	color: var(--linkv);
}


/* ============================================================
   着陆区：#container — Logo 居中固定
   ============================================================ */
#container {
	position: fixed;
	top: 40%;
	z-index: -1;
	left: 50%;
	transform: translate(-50%, -50%);
}

#h > img {
	width: 500px;
	max-width: 95vw;
	text-align: center;
}

/* 三按钮网格 */
.buttons {
	font-size: 3rem;
	text-align: center;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}

.buttons a {
	display: block;
	height: 50px;
}

.buttons a:hover {
	filter: brightness(80%);
}

.buttons a:nth-child(2) {
	transform: translateY(1.5ch);
}

.buttons a img {
	height: inherit;
}


/* ============================================================
   截图区域 A：#index — 全屏黑色容器，顶部 2px 白线
   margin-top: 105vh 推到首屏下方
   ============================================================ */
#index {
	background-color: var(--bgc);
	width: 100%;
	margin: 105vh auto 0;
	text-align: center;
	min-height: calc(100vh - 2px);
	border-top: solid 2px white;
	overflow: auto;
	scroll-snap-align: start;
	box-sizing: border-box;
	height: 100vh;
	position: relative;
}


/* ============================================================
   截图区域 B：.index-grid — CSS Grid 主布局
   背景图 guardians.png（抖动像素天使），y 偏移 60px
   手动行高对齐每个 section 位置
   ============================================================ */
.index-grid {
	grid-template-rows: 40px 177px 140px 150px 149px 136px 120px;
	background: url('assets/guardians.png');
	background-repeat: no-repeat;
	background-position-y: 60px;
	display: grid;
	margin: 0 auto;
	max-width: 980px;
	min-height: calc(100vh - 2px);
	height: 1200px;
	gap: 10px;
}


/* ============================================================
   截图区域 C：section — 每个内容区块
   仅左边框 1px 白色，margin-left: 300px 让出背景图空间
   ============================================================ */
section {
	border-left: 1px solid white;
	padding-left: 2px;
	margin-right: 1vw;
	margin-left: 300px;
	background-color: var(--bgc);
}


/* ============================================================
   截图区域 D：section h1 — 区块标题栏
   flex 布局，高度 35px，字号 24px，font-weight: normal
   ============================================================ */
section h1 {
	font-weight: normal;
	margin-bottom: var(--cellgap);         /* 5px */
	display: flex;
	height: 35px;
	text-align: left;
	font-size: 24px;
	background: var(--bgc);
}

/* h1 > b — 标题文字容器，三边白色边框（无右边框） */
section h1 b {
	font-weight: normal;
	flex-grow: 1;
	border: solid 1px white;
	border-right: none;
	height: 35px;
	align-content: center;
	padding-left: 5px;
	align-items: center;
	display: flex;
}

/* h1::after — 右侧角标图片 hl.png */
section h1::after {
	content: url('assets/hl.png');
	display: block;
}


/* ============================================================
   截图区域 E：.flexy — 链接单元格网格
   flex 换行，gap: 5px，右侧 2px padding 对齐角标
   ============================================================ */
.flexy {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--cellgap);                   /* 5px */
	padding-right: 2px;
}


/* ============================================================
   截图区域 F：.flexy a — 单个链接单元格
   白色 1px 边框，黑色背景，字号 18px，颜色 #C0C0C0
   ============================================================ */
.flexy a {
	border: solid 1px white;
	background: var(--bgc);
	padding: 0.5ch;
	text-decoration: none;
	position: relative;
	color: #C0C0C0;
	flex-grow: 1;
	min-width: 20%;
	font-size: 18px;
}

/* 悬停效果 — 顶部 1px 白色横线 */
.flexy a:hover::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 1px;
	top: 0;
	left: 0;
	color: black;
	background: white;
}

/* 每个 section 最后一个链接 — 右下角装饰 blc.png */
.flexy a:last-child::after {
	content: url('assets/blc.png');
	position: absolute;
	bottom: -6px;
	right: -1px;
	image-rendering: pixelated;
}


/* ============================================================
   截图区域 G：.gc 第一行 — 向上箭头
   ============================================================ */
#hide {
	font-size: 3rem;
	image-rendering: pixelated;
}

#hide img:hover {
	filter: brightness(80%);
}


/* ============================================================
   截图区域 H：hr.sp — 无形分隔符（articles 上方）
   ============================================================ */
hr.sp {
	border: none;
}


/* ============================================================
   截图区域 I：footer — 底部版权信息
   颜色 lightgray，居中，margin-top: -6ch 向上收紧
   ============================================================ */
footer {
	margin-top: -6ch;
	color: lightgray;
	text-align: center;
	user-select: none;
}


/* ============================================================
   响应式 — 移动端
   ============================================================ */
@media (hover: none) and (pointer: coarse) {
	html {
		scroll-snap-type: none !important;
	}
}

@media (max-width: 675px) {
	.index-grid {
		background: none;
		display: block;
		height: auto;
	}

	section {
		margin-left: 0;
		margin-bottom: 5ch;
		margin-right: 3vw;
		border-left: none;
	}

	.sp {
		display: none;
	}

	footer {
		display: none;
	}
}