/* ================================================================
   程序员休闲游戏 —— 像素街机 · 休闲游戏风格
   告别全站统一的学术卡片风，改用明亮活泼的街机休闲游戏视觉：
   像素网格底纹 / 糖果配色 / 硬阴影游戏按钮 / 卡带式分类 / 血条玩家面板
   明暗主题自适应，与前站绿色学术风调和但更「游戏」
   ================================================================ */

/* ---------- 页面配色基调 ---------- */
.page-games {
  --gs-candy-1: #ff6b6b;   /* 糖果红 */
  --gs-candy-2: #f7b733;   /* 金币黄 */
  --gs-candy-3: #4ecdc4;   /* 马卡龙青 */
  --gs-candy-4: #a29bfe;   /* 葡萄紫 */
  --gs-candy-5: #55efc4;   /* 薄荷绿 */
  --gs-ink: #342e49;       /* 街机深色 */
  --gs-ink-soft: #4a4463;
}

/* 休闲游戏氛围背景：像素网格 + 轻微点阵 */
.page-games .main-wrapper.gs-arcade {
  position: relative;
}
.gs-px-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.gs-px-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,0,0,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.025) 1px, transparent 1px);
  background-size: 28px 28px;
}
/* 说明：.content 置为 relative 使子元素可相对定位并压过背景；
       .sidebar 仅提升 z-index，保持 common.css 的 sticky 定位，
       避免其 position 被覆盖为 relative 导致叠加 top 偏移、与左侧内容顶部不对齐。 */
.page-games .content {
  position: relative;
  z-index: 1;
}
.page-games .sidebar {
  z-index: 1;
}

/* 漂浮像素云朵 */
.gs-px-cloud {
  position: absolute;
  width: 80px; height: 30px;
  background: rgba(255,255,255,0.75);
  border-radius: var(--radius-16);
  opacity: .55;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  animation: gsCloudDrift 22s linear infinite;
}
.gs-px-cloud::before, .gs-px-cloud::after {
  content: '';
  position: absolute;
  background: inherit; border-radius: inherit;
}
.gs-px-cloud::before { width: 34px; height: 34px; top: -16px; left: var(--space-10); }
.gs-px-cloud::after { width: 26px; height: 26px; top: -12px; left: var(--space-40); }
.gs-px-cloud--1 { top: 60px; left: -100px; animation-duration: 34s; }
.gs-px-cloud--2 { top: 210px; left: -160px; animation-duration: 44s; animation-delay: -12s; }
.gs-px-cloud--3 { top: 400px; left: -60px; animation-duration: 38s; animation-delay: -22s; }
@keyframes gsCloudDrift {
  from { transform: translateX(0); }
  to { transform: translateX(calc(100vw + 220px)); }
}
/* 像素星星 */
.gs-px-star {
  position: absolute;
  color: var(--gs-candy-2);
  font-size: var(--fs-20);
  opacity: .5;
  animation: gsStarTwinkle 3s ease-in-out infinite;
}
.gs-px-star--1 { top: 130px; right: 8%; }
.gs-px-star--2 { top: 330px; right: 4%; font-size: var(--fs-15); animation-delay: -1.2s; }
.gs-px-star--3 { top: 70px; left: 3%; color: var(--gs-candy-1); animation-delay: -2s; }
@keyframes gsStarTwinkle {
  0%,100% { opacity: .35; transform: scale(.9); }
  50% { opacity: .8; transform: scale(1.1); }
}

/* ================================================================
   1. Hero —— 街机标题开机画面
   ================================================================ */
.gs-hero {
  position: relative;
  overflow: hidden;
  margin: 0 0 26px;
  padding: clamp(34px, 5vw, 66px) clamp(22px, 4.4vw, 58px);
  border-radius: 20px;
  border: 3px solid var(--gs-ink);
  background:
    radial-gradient(ellipse at 85% 10%, rgba(247,183,51,0.30), transparent 55%),
    radial-gradient(ellipse at 10% 90%, rgba(78,205,196,0.28), transparent 55%),
    linear-gradient(160deg, #5b4b8a, #3b3563 60%, #342e49);
  box-shadow: 0 10px 0 rgba(52,46,73,0.6), 0 20px 40px -16px rgba(52,46,73,0.5);
  color: #fff;
}
/* CRT 扫描线 */
.gs-hero-scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(255,255,255,0.035) 0px,
    rgba(255,255,255,0.035) 1px,
    transparent 2px,
    transparent 4px
  );
  animation: gsScanMove 8s linear infinite;
}
@keyframes gsScanMove {
  from { transform: translateY(0); }
  to { transform: translateY(4px); }
}
/* Hero 内容 */
.gs-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 620px;
}
.gs-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-6) var(--space-16);
  border-radius: var(--radius-6);
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--gs-candy-2);
  background: rgba(0,0,0,0.35);
  border: 2px solid var(--gs-candy-2);
  box-shadow: 0 3px 0 rgba(0,0,0,0.3);
  margin-bottom: var(--space-20);
  font-family: var(--font-mono);
  text-transform: uppercase;
}
.gs-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #55efc4;
  box-shadow: 0 0 0 3px rgba(85,239,196,0.25);
  animation: gsLifePulse 1.4s ease-in-out infinite;
}
@keyframes gsLifePulse {
  0%,100% { opacity: 1; }
  50% { opacity: .4; }
}
.gs-hero-title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: 1.16;
  color: #fff;
  margin-bottom: var(--space-12);
  text-shadow: 3px 3px 0 rgba(0,0,0,0.45);
}
.gs-hero-accent {
  background: linear-gradient(90deg, #ffd86f, #ff9a56);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}
.gs-hero-sub {
  font-size: var(--fs-15);
  line-height: var(--lh-base);
  color: rgba(255,255,255,0.88); margin-bottom: var(--space-20);
}
.gs-hero-sub b { color: var(--gs-candy-2); }
.gs-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-10);
  margin-bottom: var(--space-28);
}
.gs-chip {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-6);
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-8);
  background: rgba(255,255,255,0.12);
  border: 2px solid rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.9);
  font-size: var(--fs-13);
  box-shadow: 0 3px 0 rgba(0,0,0,0.25);
}
.gs-chip b {
  font-size: var(--fs-18);
  font-weight: 800;
  color: var(--gs-candy-2);
  font-variant-numeric: tabular-nums;
}
/* 像素街机按钮 */
.gs-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-28);
  border-radius: var(--radius-8);
  font-size: var(--fs-15);
  font-weight: 800;
  color: #342e49;
  background: linear-gradient(180deg, #ffd86f, #f7b733);
  border: 2px solid #342e49;
  box-shadow: 0 5px 0 #342e49, 0 12px 22px -8px rgba(0,0,0,0.5);
  text-transform: uppercase;
  letter-spacing: .05em;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.gs-btn:hover {
  transform: translateY(2px);
  box-shadow: 0 3px 0 #342e49, 0 8px 16px -8px rgba(0,0,0,0.5);
  color: #342e49;
}
.gs-btn:active { transform: translateY(5px); box-shadow: 0 0 0 #342e49; }

/* Hero 右侧漂浮游戏卡带 */
.gs-hero-mock {
  position: absolute;
  right: clamp(18px, 5vw, 64px);
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  grid-template-columns: repeat(2, 1fr); gap: var(--space-12);
  z-index: 2;
}
.gs-hero-mock-card {
  position: relative;
  width: 82px;
  height: 82px;
  border-radius: var(--radius-12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-32);
  border: 3px solid #342e49;
  box-shadow: 0 6px 0 rgba(52,46,73,0.75);
  animation: gsMockFloat 5s ease-in-out infinite;
}
.gs-hero-mock-card::before {
  content: '';
  position: absolute;
  top: var(--space-6); left: var(--space-8); right: var(--space-8); height: 6px;
  background: rgba(255,255,255,0.4);
  border-radius: var(--radius-4);
}
.gs-hm--1 { background: linear-gradient(135deg, #ffd86f, #ff9a56); animation-delay: 0s; }
.gs-hm--2 { background: linear-gradient(135deg, #55efc4, #4ecdc4); animation-delay: -1.4s; }
.gs-hm--3 { background: linear-gradient(135deg, #a29bfe, #6c5ce7); animation-delay: -2.8s; }
.gs-hm--4 { background: linear-gradient(135deg, #ff9a9e, #ff6b6b); animation-delay: -2.1s; }
@keyframes gsMockFloat {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-12px) rotate(2deg); }
}
/* PRESS START 闪烁 */
.gs-press-start {
  position: absolute;
  bottom: var(--space-12);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: .4em;
  color: rgba(255,255,255,0.75);
  animation: gsPressBlink 1.4s steps(2) infinite;
  z-index: 2;
}
@keyframes gsPressBlink {
  0%, 100% { opacity: .9; }
  50% { opacity: .15; }
}

/* ================================================================
   2. 分类分区 —— 游戏卡带
   ================================================================ */
.gs-section { margin-bottom: var(--space-24);
  padding: var(--space-24) var(--space-28) var(--space-28);
  background: var(--bg-card);
  border-radius: var(--radius-12);
  border: 2px solid var(--gs-ink);
  box-shadow: 0 6px 0 rgba(52,46,73,0.18), var(--shadow-sm);
}
.gs-section-head { margin-bottom: var(--space-24); }
.gs-section-num {
  display: inline-block;
  font-size: var(--fs-12);
  font-weight: 800;
  letter-spacing: .16em;
  color: var(--gs-ink);
  background: var(--gs-candy-2);
  padding: var(--space-4) var(--space-12);
  border-radius: var(--radius-6);
  border: 2px solid var(--gs-ink);
  font-family: var(--font-mono);
  text-transform: uppercase;
  box-shadow: 0 3px 0 var(--gs-ink);
}
.gs-section-title {
  font-family: "huiwen-micho", "Ma Shan Zheng", "STKaiti", "楷体", serif;
  font-size: clamp(24px, 2.8vw, 34px);
  color: var(--text-primary);
  margin: 12px 0 6px;
}
.gs-title-accent {
  background: linear-gradient(90deg, #ff6b6b, #f7b733);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.gs-section-desc { font-size: var(--fs-14); color: var(--text-secondary); margin: 0; }

/* 分类卡带分组 */
.gs-cat-group {
  margin-bottom: 34px;
}
.gs-cat-group:last-child { margin-bottom: 0; }
/* 注意（本文件多处同款双声明）：同一属性连写两行——前一行给不支持 color-mix() 的
   浏览器兜底，后一行才是目标值；无法解析 color-mix() 的浏览器会整条丢弃后一行。
   --cat-color / --gs-accent 均由 games.js 渲染时以内联 style 注入分类色。 */
.gs-cat-head {
  display: flex;
  align-items: center; gap: var(--space-12);
  padding: var(--space-12) var(--space-16); margin-bottom: var(--space-16);
  border: 2px solid var(--cat-color);
  border-radius: var(--radius-16);
  background: linear-gradient(90deg, var(--bg-card), transparent 70%);
  background: linear-gradient(90deg, color-mix(in srgb, var(--cat-color) 15%, var(--bg-card)), transparent 70%);
  box-shadow: 0 5px 0 var(--cat-color);
  box-shadow: 0 5px 0 color-mix(in srgb, var(--cat-color) 45%, transparent);
}
.gs-cat-emoji {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-12);
  font-size: var(--fs-26);
  flex-shrink: 0;
  background: var(--bg-card);
  background: color-mix(in srgb, var(--cat-color) 18%, var(--bg-card));
  border: 2px solid var(--cat-color);
  border: 2px solid color-mix(in srgb, var(--cat-color) 55%, transparent);
  box-shadow: 0 3px 0 var(--cat-color);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--cat-color) 40%, transparent);
}
.gs-cat-info h3 {
  font-size: var(--fs-18);
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 3px;
  display: flex;
  align-items: center;
  gap: var(--space-10);
}

.gs-cat-desc {
  font-size: var(--fs-13);
  color: var(--text-secondary);
  margin: 0;
}

/* ================================================================
   3. 游戏卡片 —— 游戏机卡带
   ================================================================ */
.gs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); gap: var(--space-16);
}
.gs-card {
  --gs-accent: #6c5ce7;
  position: relative;
  display: flex;
  flex-direction: column; padding: var(--space-16) ;
  border-radius: var(--radius-16);
  border: 2px solid var(--gs-ink);
  background: var(--bg-card);
  box-shadow: 0 5px 0 rgba(52,46,73,0.25), var(--shadow-sm);
  overflow: hidden;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}
.gs-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 6px;
  background: var(--gs-accent);
}
.gs-card:hover {
  transform: translateY(-5px);
  border-color: var(--gs-accent);
  box-shadow: 0 10px 0 rgba(52,46,73,0.25), 0 18px 32px -14px rgba(93, 151, 67, 0.45);
  box-shadow: 0 10px 0 rgba(52,46,73,0.25), 0 18px 32px -14px color-mix(in srgb, var(--gs-accent) 55%, transparent);
}
.gs-card-head { display: flex; align-items: center; gap: var(--space-12); margin-bottom: var(--space-12); }
.gs-card-emoji {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: var(--radius-12);
  font-size: var(--fs-26);
  flex-shrink: 0;
  background: var(--bg-card);
  background: color-mix(in srgb, var(--gs-accent) 16%, var(--bg-card));
  border: 2px solid var(--gs-accent);
  border: 2px solid color-mix(in srgb, var(--gs-accent) 45%, transparent);
  box-shadow: 0 3px 0 var(--gs-accent);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--gs-accent) 40%, transparent);
}
.gs-card-title {
  font-size: var(--fs-17);
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 3px;
}
.gs-card-desc {
  font-size: var(--fs-13);
  color: var(--text-secondary);
  line-height: var(--lh-ui);
  margin: 0;
}
.gs-card-tags { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-bottom: var(--space-12); }
.gs-tag {
  font-size: var(--fs-11);
  font-weight: 700;
  padding: var(--space-2) var(--space-10);
  border-radius: var(--radius-6);
  background: var(--bg-card);
  background: color-mix(in srgb, var(--gs-accent) 13%, var(--bg-card));
  color: var(--gs-accent);
  border: 1px solid var(--gs-accent);
  border: 1px solid color-mix(in srgb, var(--gs-accent) 30%, transparent);
}
.gs-card-meta {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: var(--space-10);
  padding-top: var(--space-12);
  border-top: 2px dashed var(--gs-accent);
  border-top: 2px dashed color-mix(in srgb, var(--gs-accent) 40%, transparent);
  font-size: var(--fs-12);
  color: var(--text-secondary);
}
.gs-card-meta span { display: inline-flex; align-items: center; gap: var(--space-4); }
.gs-card-play {
  margin-left: auto;
  font-size: var(--fs-12);
  font-weight: 800;
  color: #fff;
  background: var(--gs-accent);
  padding: var(--space-4) var(--space-12);
  border-radius: var(--radius-6);
  box-shadow: 0 3px 0 var(--gs-accent);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--gs-accent) 60%, #000);
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
}

/* ================================================================
   4. 玩家手册 About 卡片
   ================================================================ */
.gs-about-card {
  display: grid;
  grid-template-columns: repeat(3, 1fr); gap: var(--space-16);
}
.gs-about-item {
  padding: var(--space-20);
  border-radius: var(--radius-16);
  background: var(--bg-card);
  border: 2px solid var(--gs-candy-3);
  box-shadow: 0 5px 0 var(--gs-candy-3);
  box-shadow: 0 5px 0 color-mix(in srgb, var(--gs-candy-3) 40%, transparent);
  transition: transform var(--transition-normal);
}
.gs-about-item:nth-child(2) { box-shadow: 0 5px 0 var(--gs-candy-2); }
.gs-about-item:nth-child(2) { border-color: var(--gs-candy-2); box-shadow: 0 5px 0 color-mix(in srgb, var(--gs-candy-2) 40%, transparent); }
.gs-about-item:nth-child(3) { box-shadow: 0 5px 0 var(--gs-candy-1); }
.gs-about-item:nth-child(3) { border-color: var(--gs-candy-1); box-shadow: 0 5px 0 color-mix(in srgb, var(--gs-candy-1) 40%, transparent); }
.gs-about-item:hover { transform: translateY(-3px); }
.gs-about-ico {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  font-size: var(--fs-28);
  border-radius: var(--radius-12);
  background: var(--bg-card);
  border: 2px solid var(--gs-ink);
  box-shadow: 0 3px 0 var(--gs-ink);
  margin-bottom: var(--space-12);
}
.gs-about-item h3 { font-size: var(--fs-16); font-weight: 800; color: var(--text-primary); margin: 0 0 8px; }
.gs-about-item p { font-size: var(--fs-13); color: var(--text-secondary); line-height: var(--lh-ui); margin: 0; }

/* ================================================================
   5. 侧边栏 —— 玩家状态面板
   ================================================================ */
.gs-side-meter { margin-bottom: var(--space-12); }
.gs-side-meter-label {
  font-size: var(--fs-12);
  font-weight: 700;
  color: var(--text-secondary);
  display: block;
  margin-bottom: var(--space-6);
}
.gs-side-bar {
  height: 12px;
  border-radius: var(--radius-6);
  background: var(--bg-card);
  background: color-mix(in srgb, var(--gs-candy-3) 22%, var(--bg-card));
  border: 2px solid var(--gs-ink);
  overflow: hidden;
}
.gs-side-bar i {
  display: block;
  height: 100%;
  border-radius: var(--radius-4);
  background: linear-gradient(90deg, #55efc4, #4ecdc4);
  animation: gsBarShine 2.2s ease-in-out infinite;
}
.gs-side-bar--hot i { background: linear-gradient(90deg, #ff9a56, #ff6b6b); }
@keyframes gsBarShine {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.25); }
}
.gs-side-tip {
  font-size: var(--fs-12);
  color: var(--text-secondary);
  line-height: var(--lh-ui);
  padding: var(--space-10) var(--space-12);
  border-radius: var(--radius-12);
  background: var(--bg-card);
  background: color-mix(in srgb, var(--gs-candy-2) 12%, var(--bg-card));
  border: 2px dashed var(--gs-candy-2);
  margin: 0;
}
.gs-side-tip b { color: var(--gs-candy-1); }

.gs-side-faq details {
  padding: var(--space-10) var(--space-12);
  border-bottom: 1px dashed var(--gs-candy-4);
  border-bottom: 1px dashed color-mix(in srgb, var(--gs-candy-4) 40%, transparent);
}
.gs-side-faq details:last-child { border-bottom: none; }
.gs-side-faq summary {
  cursor: pointer;
  font-size: var(--fs-13);
  font-weight: 700;
  color: var(--text-primary);
  list-style: none;
}
.gs-side-faq summary::before {
  content: '▸';
  margin-right: var(--space-6);
  color: var(--gs-candy-4);
  font-weight: 800;
}
.gs-side-faq details[open] summary::before { content: '▾'; }
.gs-side-faq p { font-size: var(--fs-12); color: var(--text-secondary); line-height: var(--lh-ui); margin: 8px 0 0; }

/* ================================================================
   6. 响应式
   ================================================================ */
@media (max-width: 1100px) {
  .gs-hero-mock { display: none; }
}
@media (max-width: 900px) {
  .gs-grid { grid-template-columns: repeat(2, 1fr); }
  .gs-about-card { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .gs-grid { grid-template-columns: 1fr; }
  .gs-hero { padding: var(--space-28) var(--space-20); }
  .gs-press-start { display: none; }
}