/* ⚡ 皮皮的 AI 游戏世界 · 深夜霓虹街机风（零外部依赖，手机优先，动效自动降级） */

:root {
  --bg1: #0a0e2a;
  --bg2: #171a44;
  --card: rgba(255, 255, 255, 0.055);
  --line: rgba(255, 255, 255, 0.12);
  --yellow: #ffd60a;
  --cyan: #4cc9f0;
  --pink: #ff5d8f;
  --text: #f5f7ff;
  --dim: #a9b0d4;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(255, 93, 143, 0.16), transparent 60%),
    radial-gradient(1000px 600px at -10% 10%, rgba(76, 201, 240, 0.14), transparent 55%),
    linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 100%);
  min-height: 100vh;
  line-height: 1.6;
}

/* ============ 🚀 顶部：皮皮主舞台 ============ */
.hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 64px 16px 44px;
}

.hero::before {  /* 底层金色呼吸光晕 */
  content: "";
  position: absolute;
  inset: -20%;
  background: radial-gradient(560px 320px at 50% 32%, rgba(255, 214, 10, 0.13), transparent 70%);
  animation: 呼吸 5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes 呼吸 { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

#星空 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero-inner { position: relative; }

.avatar {
  font-size: 76px;
  line-height: 1;
  animation: 漂浮 3.2s ease-in-out infinite;
  filter: drop-shadow(0 10px 24px rgba(255, 214, 10, 0.4));
}

@keyframes 漂浮 {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50% { transform: translateY(-12px) rotate(5deg); }
}

.hero h1 {
  margin-top: 10px;
  font-size: clamp(3.6rem, 13vw, 5.6rem);
  font-weight: 900;
  letter-spacing: 0.06em;
  background: linear-gradient(110deg, var(--yellow) 0%, #fff 22%, var(--cyan) 45%, var(--pink) 68%, var(--yellow) 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: 流光 6s linear infinite;
}

@keyframes 流光 { 0% { background-position: 0% 0; } 100% { background-position: 300% 0; } }

.motto {
  margin-top: 6px;
  min-height: 2.2em;
  color: var(--yellow);
  font-weight: 800;
  font-size: clamp(1.05rem, 4vw, 1.4rem);
  letter-spacing: 0.14em;
  text-shadow: 0 0 18px rgba(255, 214, 10, 0.45);
}

.光标 { animation: 眨眼 0.9s steps(1) infinite; }

@keyframes 眨眼 { 50% { opacity: 0; } }

.hero-stats {
  margin-top: 18px;
  display: flex;
  justify-content: center;
}

.分类栏 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.分类栏 button {
  padding: 7px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.分类栏 button:hover { transform: translateY(-2px); border-color: rgba(255, 214, 10, 0.5); }

.分类栏 button.选中 {
  background: linear-gradient(92deg, var(--yellow), #ffb703);
  color: #1a1030;
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(255, 214, 10, 0.4);
}

.hero-sub {
  margin-top: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--dim);
  font-size: 0.82rem;
}

.hero-sub .chip {
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.82rem;
}
.hero-sub .chip.dim { opacity: 0.55; }

.card.隐藏 { display: none; }

/* ============ 🎮 作品墙 ============ */
main { max-width: 1180px; margin: 0 auto; padding: 10px 16px 40px; }

.games {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 22px;
}

.card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(36px) scale(0.96);
  transition: opacity 0.6s ease, transform 0.6s ease,
              border-color 0.22s ease, box-shadow 0.22s ease;
  will-change: transform;
}

.card.入场 { opacity: 1; transform: none; filter: none; }

.card:hover {
  border-color: rgba(255, 214, 10, 0.55);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 214, 10, 0.18);
}

.card::after {  /* 鼠标聚光灯（配合 JS 的 --mx/--my） */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 214, 10, 0.13), transparent 62%);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.card:hover::after { opacity: 1; }

.cover {
  position: relative;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, #101538, #232a5e);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* 封面是美术卡面（统一 16:10），直接铺满即可，不垫模糊层（省 6 个 blur 合成层） */
.cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.emoji-cover .big-emoji {
  font-size: 84px;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.5));
}

.cover .ver,
.cover .new {
  position: absolute;
  top: 10px;
  z-index: 2;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 800;
  backdrop-filter: blur(6px);
}

.cover .ver {
  right: 10px;
  color: var(--text);
  background: rgba(10, 14, 42, 0.72);
  border: 1px solid var(--line);
}

.cover .new {
  left: 10px;
  color: #1a1030;
  background: linear-gradient(92deg, var(--yellow), #ffb703);
  box-shadow: 0 4px 14px rgba(255, 214, 10, 0.45);
  animation: 脉冲 1.7s ease-in-out infinite;
}

@keyframes 脉冲 { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }

.card-body {
  padding: 16px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.card-body h2 {
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.tagline { color: var(--dim); font-size: 0.92rem; flex: 1; }

.tags { display: flex; flex-wrap: wrap; gap: 6px; }

.tags span {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--cyan);
  background: rgba(76, 201, 240, 0.13);
  border: 1px solid rgba(76, 201, 240, 0.3);
  padding: 2px 10px;
  border-radius: 999px;
}

.changelog {
  list-style: none;
  color: var(--dim);
  font-size: 0.8rem;
  border-left: 3px solid rgba(255, 214, 10, 0.45);
  padding-left: 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.play {
  position: relative;
  overflow: hidden;
  margin-top: 4px;
  padding: 12px 18px;
  display: block;
  text-align: center;
  text-decoration: none;
  color: #1a1030;
  border-radius: 999px;
  background: linear-gradient(92deg, var(--yellow), #ffb703);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(255, 214, 10, 0.32);
  transition: transform 0.16s ease, filter 0.16s ease;
}

.play::after {  /* 划过的光带 */
  content: "";
  position: absolute;
  top: 0; left: -80%;
  width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.65), transparent);
  transform: skewX(-22deg);
  transition: left 0.45s ease;
}

.play:hover { transform: scale(1.03); filter: brightness(1.06); }
.play:hover::after { left: 130%; }
.play:active { transform: scale(0.97); }

.empty { text-align: center; color: var(--dim); padding: 60px 0; }

/* ============ 🔻 页脚 ============ */
footer {
  text-align: center;
  padding: 26px 16px 34px;
  color: var(--dim);
  font-size: 0.85rem;
  border-top: 1px solid var(--line);
}

footer .privacy { margin-top: 6px; opacity: 0.75; font-size: 0.78rem; }

footer .beian { margin-top: 8px; font-size: 0.75rem; }

footer .beian a { color: var(--dim); text-decoration: none; opacity: 0.7; }

footer .beian a:hover { color: var(--yellow); opacity: 1; }

/* ============ 📱 手机 & 降级 ============ */
@media (max-width: 640px) {
  .hero { padding-top: 44px; }
  .avatar { font-size: 62px; }
  .games { grid-template-columns: 1fr; gap: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .card { opacity: 1; transform: none; transition: none; }
  .hero h1, .avatar, .hero::before, .cover .new { animation: none; }
  .play::after { display: none; }
}