.rows-wrapper{ display:flex; flex-direction:column; gap:1.25rem; }
.row-block{ display:flex; flex-direction:column; gap:.5rem; }
.row-divider{ display:flex; align-items:center; gap:.75rem; opacity:.8 }
.row-divider .line{ flex:1; height:1px; background: #1f2937 }
.row-divider .label{ font-size:.8rem; color:var(--muted) }
.row-line{ display:flex; gap:.5rem; }
.row-item{ position:relative; border-radius:.5rem; overflow:hidden; background:#0b0f1a }
.row-item img{ width:100%; height:100%; object-fit:cover; display:block }
.row-item .star-badge{ position:absolute; right:.4rem; top:.4rem; background:#ffc107; color:#111; font-size:.65rem; padding:.2rem .4rem; border-radius:.35rem; font-weight:600 }

:root{
	--accent: #8bd450;
	--muted: rgba(255,255,255,0.65);
	/* 站点全局导航高度变量（可按需调整） */
	--navbar-height: 64px;
	--primary-color: #6366f1;
	--secondary-color: #10b981;
	--bg-primary: #0f172a;
	--text-primary: #f8fafc;
}
.no-aos [data-aos]{
	opacity: 1 !important;
	transform: none !important;
}

/* 全局背景：渐变 + 可选背景图（若 images/background.jpg 存在则显示） */
body{
	/* 背景：中等遮罩 (原先較重 -> 已調亮) */
	/* 推薦檔位: 深: 0.65/0.60/0.58 | 中(當前): 0.50/0.46/0.44 | 淺: 0.38/0.34/0.32 */
	background:
		radial-gradient(1100px 560px at 70% -10%, rgba(255,255,255,0.02), rgba(255,255,255,0)),
		linear-gradient(120deg, rgba(12,18,32,0.50) 0%, rgba(10,16,30,0.46) 50%, rgba(8,14,28,0.44) 100%);
	min-height: 100vh;
}


/* 主要内容区域：改为实心深色以回退半透明效果 */
.main-content-area {
	background: transparent;
	backdrop-filter: none;
	border-radius: 1rem;
	padding: 2rem;
	margin: 1rem 0;
	border: 1px solid rgba(255, 255, 255, 0.10);
	box-shadow: none;
}

/* 卡片：使用实心深色背景以移除磨砂/半透 */
.card {
	background: transparent !important;
	backdrop-filter: none;
	border: 1px solid rgba(255,255,255,0.12) !important;
}

/* 文字内容区域：实心背景，移除半透明与模糊 */
.content-section {
	background: transparent;
	backdrop-filter: none;
	border-radius: 0.75rem;
	padding: 1.5rem;
	margin: 1rem 0;
	border: 1px solid rgba(255, 255, 255, 0.10);
}

/* 首页专用：为 About 与 Nav 卡片添加低对比度的微弱背景/线框（不突兀） */
.index-page .panel-subtle{
  background: linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0.008));
  border: 1px solid rgba(255,255,255,0.045);
  box-shadow: 0 6px 18px rgba(2,6,23,0.48);
  border-radius: 0.75rem;
  padding: 1.15rem; /* 与 content-section 保持一致但略紧凑 */
}
.index-page .panel-subtle .card-body{ background: transparent; }

/* 更高级的卡片变体：轻微渐变边框 + 轻微玻璃升起（hover 提升） */
.index-page .panel-subtle.panel-elevated{
	position: relative;
	z-index: 1;
	overflow: hidden;
	border-radius: 0.75rem;
	/* 更明显的白色边缘：将边框设置为高不透明度白色 */
	border: 1px solid rgba(255,255,255,0.92);
	/* 面板内部仍保留很浅的渐变以保持层次 */
	background-image: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.006));
	background-origin: padding-box;
	background-clip: padding-box;
	box-shadow: 0 10px 30px rgba(4,8,20,0.55);
	transition: transform .18s cubic-bezier(.2,.9,.2,1), box-shadow .18s ease, border-color .12s ease;
}
.index-page .panel-subtle.panel-elevated:hover{
	transform: translateY(-6px);
	box-shadow: 0 18px 44px rgba(4,8,20,0.62);
	/* hover 时略微增强边框亮度 */
	border-color: rgba(255,255,255,1);
}

/* 渐变边框的移动动画（轻微） */
@keyframes borderShift {
	0%{ background-position: 0% 50%; }
	50%{ background-position: 100% 50%; }
	100%{ background-position: 0% 50%; }
}
.index-page .panel-subtle.panel-elevated.animated-border{ background-position: 0% 0%, 0% 50%; animation: borderShift 8s linear infinite; }

/* ::before 仍保留作为柔和光晕（用于非移动设备） */
.index-page .panel-subtle.panel-elevated::before{
	content: '';
	position: absolute;
	inset: -8px; /* 扩展以显示柔和光晕 */
	z-index: -1;
	border-radius: 0.9rem;
	/* 将光晕调整为更中性偏白的柔和光，以配合白色边框 */
	background: radial-gradient(600px 120px at 10% 20%, rgba(255,255,255,0.06), rgba(255,255,255,0.01));
	filter: blur(10px);
	pointer-events: none;
	opacity: 0.9;
}

/* 减少动画对偏好减少运动的用户影响 */
@media (prefers-reduced-motion: reduce){
	.index-page .panel-subtle.panel-elevated.animated-border,
	.index-page .panel-subtle.panel-elevated:hover{ animation: none; background-position: 0% 0%, 0% 50%; transform: none; }
}

/* 导航交互：活动链接下划线与滚动提升 */
.glass-nav{ position: fixed !important; top: 0; left: 0; right: 0; z-index: 1040; transition: box-shadow .18s ease, background-color .18s ease, backdrop-filter .18s ease; }
.glass-nav .nav-link{ position: relative; overflow: visible; }
.glass-nav .nav-link::after{
	content: '';
	position: absolute;
	left: 12%;
	right: 12%;
	bottom: -6px;
	height: 2px;
	background: linear-gradient(90deg, var(--primary-color), var(--accent));
	transform-origin: left center;
	transform: scaleX(0);
	transition: transform .22s cubic-bezier(.2,.9,.2,1), opacity .18s ease;
	opacity: 0.9;
	border-radius: 2px;
}
.glass-nav .nav-link:hover::after,
.glass-nav .nav-link:focus::after{
	transform: scaleX(1);
}
.glass-nav .nav-link.active::after{ transform: scaleX(1); }

/* 滚动时给导航一个更高级的玻璃效果（非 Safari） */
.glass-nav.nav-elevated{
	/* 滚动后的增强态：改为半透明（从顶部的不透明过渡到半透明），同时保留轻微模糊与阴影 */
	background: rgba(6,8,12,0.58);
	border-bottom: 1px solid rgba(255,255,255,0.05);
	box-shadow: 0 6px 18px rgba(0,0,0,0.45);
	backdrop-filter: blur(4px) saturate(1.02);
}
.is-safari .glass-nav.nav-elevated{ backdrop-filter: none; background: rgba(10,12,16,0.72); }

/* 小屏幕下微交互保持简洁 */
@media (max-width: 900px){
	.glass-nav .nav-link::after{ left: 6%; right: 6%; bottom: -4px; }
	.index-page .panel-subtle.panel-elevated::before{ display: none; }
}


/* 固定全屏背景图层：始终可见且不随滚动移动 */
.page-bg{
	position: fixed;
	inset: 0;
	z-index: -1;
	/* 中等遮罩：降低 alpha，減少模糊，提亮與稍微增加飽和度 */
	/* 推薦檔位:
	   深: alpha 0.72/0.68 + brightness(0.55) saturate(0.60) blur(2px)
	   中(當前): alpha 0.55/0.50 + brightness(0.70) saturate(0.80) blur(1px)
	   淺: alpha 0.40/0.36 + brightness(0.80) saturate(0.95) blur(0)
	*/
	background: linear-gradient(rgba(9,14,24,0.55), rgba(9,14,24,0.50)), url('/images/background.jpg') center/cover no-repeat;
	background-blend-mode: overlay;
	filter: brightness(0.70) saturate(0.80) contrast(0.92) blur(1px);
	will-change: transform;
	transform: translateZ(0);
	pointer-events: none;
}
.is-safari .page-bg{ backface-visibility: hidden; /* Safari 回退：保持不模糊但稍亮 */
	filter: none;
	background: linear-gradient(rgba(0,0,0,0.60), rgba(0,0,0,0.56)), url('/images/background.jpg') center/cover no-repeat;
}

/* Safari 平滑优化：禁用 fixed 背景与重型滤镜，强制 GPU 合成 */
.is-safari body{
	background-attachment: scroll !important; /* 覆盖 fixed，防止滚动重绘卡顿 */
}
.is-safari .glass-nav,
.is-safari .glass{
	backdrop-filter: none !important;
	background: rgba(0,0,0,0.65) !important;
}
.is-safari .row-item,
.is-safari .row-item img,
.is-safari .featured-item,
.is-safari .card{
	will-change: transform, opacity;
	transform: translateZ(0);
	backface-visibility: hidden;
}
.is-safari .group-grid,
.is-safari .rows-wrapper{
	contain: layout paint; /* 移除 size，避免自动高度被忽略导致容器塌陷 */
}

/* 玻璃态导航栏（半透明玻璃效果：降低灰度感、更轻盈） */
.glass-nav{ 
	-webkit-backdrop-filter: blur(6px) saturate(1.02);
	backdrop-filter: blur(6px) saturate(1.02);
	background: rgba(8,10,14,0.64) !important;
	border-bottom: 1px solid rgba(255,255,255,0.06);
}
/* 页面内容不要被固定导航遮挡：为 body 添加顶部留白，使用可配置的导航高度变量 */
body{ padding-top: var(--navbar-height); }
/* 提高导航链接对比度与交互可见性 */
.glass-nav .nav-link{ color: #ffffff; font-weight:600; opacity:1; transition: color .12s ease, background-color .12s ease, transform .12s ease; padding: .25rem .5rem; border-radius: .35rem }
.glass-nav .nav-link:hover{ color: var(--accent); background: transparent; }
.glass-nav .nav-link.active{ color: var(--accent); background: transparent; box-shadow: none; }
.glass-nav .navbar-brand{ color: #fff; font-weight:700 }

/* 窄屏下切换按钮（汉堡）确保可见 */
.navbar-dark .navbar-toggler{ border-color: #263144; }
.navbar-dark .navbar-toggler-icon{ filter: drop-shadow(0 1px 0 rgba(0,0,0,0.6)); }
/* 更高优先级覆盖：确保即便 BootsWatch/Bootstrap 有覆盖也能显示为高对比白色 */
.glass-nav.navbar .nav-link,
.glass-nav .navbar-nav .nav-link,
.glass-nav .nav-link{
	color: #ffffff !important;
	opacity: 1 !important;
	background: transparent !important;
	text-shadow: 0 1px 0 rgba(0,0,0,0.6);
}
.glass-nav .nav-link:hover{
	color: var(--accent) !important;
	background: transparent !important;
}
.glass-nav .nav-link.active{
	color: var(--accent) !important;
	background: transparent !important;
	box-shadow: none !important;
}
/* 折叠菜单内的链接也要明显 */
.navbar-collapse .nav-link{ color:#fff !important; }
.navbar-dark .navbar-toggler-icon{ filter: invert(1) brightness(1.2) !important; }

/* Hero 区（透明，叠加网格） */
.hero{ position: relative; color: var(--text-primary); padding: 4rem 0; }
.hero::before{
	content: ""; position:absolute; inset:0; pointer-events:none; opacity:.28; z-index:0;
	/* 网格纹理已移除；如果需要恢复，请还原为原始 data:image/svg+xml URL */
	background: none;
}
.hero .container{ position:relative; z-index:1; }
.hero-text h1{
	background: linear-gradient(135deg, var(--text-primary), var(--primary-color));
	-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero-subtitle{ color: var(--muted); }
.hero-cta .btn{ /* removed backdrop-filter to disable glass effect on buttons */ }
.text-accent{color:var(--accent)!important}
.glass{backdrop-filter: none; background: transparent; border: 1px solid rgba(255,255,255,0.15)}
.card:hover{transform: translateY(-4px); transition: transform .18s ease, box-shadow .18s ease}
img{max-width:100%; height:auto}
.pswp__dynamic-caption{font-size:.95rem}

/* Gallery card */
.gallery-card{position:relative; overflow:hidden; border-radius:.5rem}
.gallery-card img{display:block; width:100%; height:auto; object-fit:cover}
.gallery-card .badge{position:absolute; left:.5rem; top:.5rem; z-index:2}
.gallery-card .badge.bg-warning{ right:.5rem; left:auto; }

/* date badge specifically */
.date-badge{background:#0b1220; color:var(--muted); font-weight:600; padding:.22rem .5rem; border-radius:.35rem; font-size:.70rem}

/* Games card */
.game-cover{width:100%; height:200px; object-fit:cover; border-radius:.5rem}
.tag{display:inline-block; padding:.12rem .5rem; border-radius:999px; background:#0c1220; border:1px solid #0e1622; font-size:.75rem; margin:.1rem .25rem}

/* Utilities */
.link-body-emphasis{text-decoration:none}
.link-body-emphasis:hover{opacity:.95}

/* 分组拼图布局（CSS Grid），每个日期为单独 group，稳定不回流 */
.groups-wrapper{ display:flex; flex-direction:column; gap:2rem; }
.group-block{ position:relative; }
.group-header{ display:flex; align-items:baseline; gap:.75rem; margin:0 0 .75rem; }
.group-header h2{ font-size:1rem; margin:0; font-weight:600; color:var(--text-primary); }
.group-header .count{ font-size:.70rem; color:var(--muted); }
.group-grid{ display:grid; gap:0.75rem; grid-auto-rows:1fr; }
@media (min-width:1200px){ .group-grid{ grid-template-columns:repeat(6, 1fr); } }
@media (min-width:992px) and (max-width:1199px){ .group-grid{ grid-template-columns:repeat(5, 1fr); } }
@media (min-width:768px) and (max-width:991px){ .group-grid{ grid-template-columns:repeat(4, 1fr); } }
@media (max-width:767px){ .group-grid{ grid-template-columns:repeat(2, 1fr); } }

.tile{ position:relative; overflow:hidden; border-radius:.55rem; background:#111; display:block; }
.tile img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Admin 页面修复：禁用卡片悬停上浮动画，防止编辑干扰；提升控制按钮层级 */
.admin-page .card:hover, 
.admin-page .tile:hover, 
.admin-page .row-item:hover,
.admin-page .gallery-card:hover { 
  transform: none !important; 
  box-shadow: none !important; 
}
.admin-image-controls {
  z-index: 100 !important;
  background: rgba(0,0,0,0.6);
  border-radius: 0.25rem;
  backdrop-filter: blur(2px);
}
.admin-page .row-item { overflow: visible !important; } /* 允许按钮超出（如果有必要） */

/* 进一步确保在 Admin 模式下控件不会被祖先容器裁剪或盖住 */
.admin-page .row-line,
.admin-page .row-block,
.admin-page .group-grid,
.admin-page .tile,
.admin-page .gallery-card,
.admin-page .rows-wrapper {
	overflow: visible !important;
}
.admin-page .row-item { z-index: 20 !important; }
.admin-page .admin-image-controls {
	position: absolute !important;
	top: 6px !important;
	right: 6px !important;
	z-index: 9999 !important;
	pointer-events: auto !important;
}

/* 如果控件仍被遮挡，禁用 admin 页面对单项的 transform（避免创建新的 stacking context），并进一步提升层级 */
.admin-page .row-item,
.admin-page .row-item img,
.admin-page .tile,
.admin-page .gallery-card{
	transform: none !important;
	will-change: auto !important;
	z-index: 9999 !important;
}
.admin-page .admin-image-controls{
	transform: translateZ(9999px) !important;
}
.tile.size-s{ grid-column:span 1; aspect-ratio: 1 / 1; }
.tile.size-m{ grid-column:span 2; aspect-ratio: 16 / 10; }
.tile.size-l{ grid-column:span 3; grid-row:span 2; aspect-ratio: 16 / 9; }
@media (max-width:991px){ .tile.size-l{ grid-column:span 2; grid-row:span 1; aspect-ratio: 16 / 9; } }

.tile .date-badge{ left:.5rem; top:.5rem; }
.tile .star-badge{ position:absolute; right:.5rem; top:.5rem; background:#ffc107; color:#111; font-size:.65rem; padding:.25rem .45rem; border-radius:.4rem; font-weight:600; }

/* 头像与在线状态 */
.avatar-wrap{ position:relative; display:inline-block; }
.avatar-wrap {
	position: relative;
	display: inline-block;
}
/* 头像边框用主色，不用绿色 */
.avatar {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	border: 4px solid var(--primary-color);
	box-shadow: 0 20px 40px rgba(0,0,0,.4);
	object-fit: cover;
	z-index: 1;
}
/* 环形扩散动画效果 */
/* 光环扩散范围缩小，颜色更柔和 */
.avatar-glow {
	position: absolute;
	left: 0; top: 0;
	width: 100%; height: 100%;
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
	box-shadow: none;
	animation: none;
}
@keyframes avatar-glow-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(99,102,241,0.35); }
	60%  { box-shadow: 0 0 0 12px rgba(99,102,241,0); }
	100% { box-shadow: 0 0 0 0 rgba(99,102,241,0); }
}
/* 新的在线状态椭圆包裹小绿点和文字 */
.status-status {
	position: absolute;
	right: 0;
	bottom: 0;
	transform: translate(30%, 30%);
	display: flex;
	align-items: center;
	background: #062016;
	border-radius: 999px;
	padding: 2px 14px 2px 6px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.45);
	border: 1.5px solid rgba(16,185,129,0.22);
	font-size: 0.95rem;
	z-index: 2;
	transition: background .18s, border .18s;
}
.status-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--secondary-color);
	box-shadow: 0 0 0 0 rgba(16,185,129,.7);
	border: 2px solid rgba(0,0,0,.18);
	margin-right: 6px;
	animation: pulse 2s infinite;
	position: static;
}
.status-label {
	color: var(--secondary-color);
	font-weight: 600;
	letter-spacing: 1px;
	user-select: none;
}
@keyframes pulse {
	0%   { box-shadow:0 0 0 0 rgba(16,185,129,.7);}
	70%  { box-shadow:0 0 0 7px rgba(16,185,129,0);}
	100% { box-shadow:0 0 0 0 rgba(16,185,129,0);}
}
/* 状态切换样式预留 */
.status-status.status-offline {
	background: rgba(120,120,120,0.10);
	border-color: rgba(120,120,120,0.18);
}
.status-status.status-offline .status-dot {
	background: #aaa;
	border-color: rgba(80,80,80,0.18);
	animation: none;
}
.status-status.status-offline .status-label {
	color: #aaa;
}

/* ---------- site loader (丝滑加载动画) ---------- */
.site-loader{
	position:fixed; inset:0; z-index:3000; display:flex; align-items:center; justify-content:center;
	background: linear-gradient(180deg, rgba(10,12,18,0.95), rgba(10,12,18,0.9));
	color: #fff; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
	transition: opacity .6s cubic-bezier(.2,.9,.2,1), visibility .6s; opacity:1; visibility:visible;
}
.site-loader__box{ text-align:center; max-width:320px; padding:24px; }
.site-loader__logo{ width:84px; height:84px; border-radius:50%; margin:0 auto 12px; overflow:hidden; border:3px solid rgba(255,255,255,0.06); box-shadow: 0 10px 30px rgba(0,0,0,0.6); }
.site-loader__logo img{ width:100%; height:100%; object-fit:cover; display:block }
.site-loader__title{ font-size:1.05rem; font-weight:700; margin-bottom:8px; color:var(--text-primary); opacity:0.96 }
.site-loader__sub{ font-size:.85rem; color:rgba(255,255,255,0.75); margin-bottom:14px }
.site-loader__spinner{ width:48px; height:48px; border-radius:50%; margin:0 auto; position:relative; }
.site-loader__spinner:before{ content:''; position:absolute; inset:0; border-radius:50%; box-shadow: 0 0 22px rgba(99,102,241,0.18); }
.site-loader__ring{ box-sizing:border-box; width:48px; height:48px; border-radius:50%; border:4px solid rgba(255,255,255,0.08); border-top-color:var(--primary-color); animation: loader-spin 1s linear infinite }
@keyframes loader-spin{ to{ transform: rotate(360deg); } }

/* subtle shimmer bar */
.site-loader__bar{ height:6px; width:220px; background:rgba(255,255,255,0.04); border-radius:999px; margin:14px auto 0; overflow:hidden }
.site-loader__bar::after{ content:''; position:relative; display:block; height:100%; width:40%; background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.18), rgba(255,255,255,0.06)); transform:translateX(-120%); animation: shimmer 1.6s cubic-bezier(.2,.9,.2,1) infinite }
@keyframes shimmer{ 100%{ transform:translateX(220%); } }

/* 隐藏状态：淡出并禁用可见性 */
.site-ready .site-loader{ opacity:0; visibility:hidden }

/* 在小屏幕上缩小 loader 元素 */
@media (max-width:600px){
	.site-loader__box{ max-width:220px; padding:16px }
	.site-loader__logo{ width:64px; height:64px }
	.site-loader__ring{ width:40px; height:40px; border-width:3px }
	.site-loader__bar{ width:160px }
}

/* 失败图替换样式：使用内联 SVG 占位并保持内容居中 */
.row-item img.img-failed{
  object-fit: contain !important;
  background: linear-gradient(180deg, #07101a, #0f172a);
  color: #888;
}

.row-item img{ transition: opacity .18s ease; }
.row-item img.img-failed{ opacity: 0.95 }

/* Featured area styles: 放大并在角落显示 date/title */
.featured-area{ display:flex; gap:.75rem; margin-bottom:1rem; overflow:auto; padding-bottom:.5rem }
.featured-item{ position:relative; flex:0 0 360px; height:320px; border-radius:.6rem; overflow:hidden; background:#0b0f1a; display:block }
.featured-item img{ width:100%; height:100%; object-fit:cover; display:block }
.featured-overlay{ position:absolute; left:.6rem; bottom:.6rem; background: #05060a; color:#fff; padding:.4rem .6rem; border-radius:.45rem; font-size:.9rem; box-shadow: 0 6px 18px rgba(0,0,0,0.45); }
.featured-overlay .featured-date{ font-size:0.8rem; color: #e6eef8; margin-top:2px; font-weight:500 }

/* 在小屏幕上把 featured-card 缩小并使其更紧凑 */
@media (max-width: 900px){
	.featured-area{ gap:.5rem }
	.featured-item{ flex:0 0 260px; height:220px }
	.featured-overlay{ left:.4rem; bottom:.4rem; padding:.28rem .45rem; font-size:.82rem }
}

/* ------- 移动端性能优化：减少导致重绘/回流的属性，启用合成层，禁用高开销滤镜 ------- */
@media (max-width: 900px){
	.glass { background: transparent !important; backdrop-filter: none !important; }
	.avatar { box-shadow: 0 8px 18px rgba(0,0,0,.35) !important; }
	.avatar-glow { animation: none !important; opacity: 0.9 !important; }
	body { background-attachment: scroll !important; }
	.row-item, .row-item img { will-change: transform, opacity; transform: translateZ(0); }
	html, body, main { -webkit-overflow-scrolling: touch; }
	.site-loader{ background: linear-gradient(180deg, rgba(8,10,14,0.96), rgba(8,10,14,0.94)); }
}