/* ============================================================
   HYB-GN 个人主页样式
   深色科技风格：深藏青背景 + 青色主色调 + 网格/光晕
   下面用 CSS 变量统一管理颜色和间距，方便以后整体调整
   ============================================================ */

:root{
  /* -- 颜色 -- */
  --bg-void:#060d14;
  --bg-panel:#0d1b29;
  --bg-panel-2:#14293c;
  --accent:#4de8e0;
  --accent-soft:rgba(77,232,224,.14);
  --accent-2:#f2b860;
  --text-1:#eaf6fb;
  --text-2:#8fa8bc;
  --text-3:#5d7488;
  --border-soft:rgba(139,205,224,.14);
  --border-strong:rgba(139,205,224,.32);

  /* -- 间距系统：所有 margin/padding/gap 都从这里取值，避免随手写数字 -- */
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:24px;
  --sp-6:32px;
  --sp-7:48px;
  --sp-8:64px;

  /* -- 字体：中文优先走系统字体，避免国内访问 Google Fonts 被墙变慢 -- */
  --font-sans:"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Noto Sans SC",system-ui,-apple-system,sans-serif;
  --font-mono:"JetBrains Mono",Consolas,"SF Mono",ui-monospace,monospace;

  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:22px;

  --header-h:68px;
  --content-max:1360px;
}

*{box-sizing:border-box;}
html,body{width:100%;margin:0;padding:0;}
html{scroll-behavior:smooth;}

body{
  background:var(--bg-void);
  color:var(--text-1);
  font-family:var(--font-sans);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{color:inherit;}
h1,h2,h3,h4,p{font-family:inherit;}

::selection{background:var(--accent);color:#03222a;}

a:focus-visible,button:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}

/* -- 背景：视频（地球/太空实拍）+ 暗色遮罩保证文字可读性 + 一层柔光 -- */
.bg-video{
  position:fixed;inset:0;z-index:0;
  width:100%;height:100%;
  object-fit:cover;
  background:var(--bg-void); /* 视频加载出来之前，先用底色垫着，不会白屏/黑屏突兀 */
}

.bg-video-overlay{
  position:fixed;inset:0;z-index:0;
  background:rgba(6,13,20,.6);
}

.bg-glow{
  position:fixed;inset:0;z-index:0;
  background:
    radial-gradient(560px 360px at 18% 18%,rgba(77,232,224,.12),transparent 70%),
    radial-gradient(480px 320px at 88% 26%,rgba(242,184,96,.07),transparent 70%);
  animation:glow-pulse 9s ease-in-out infinite alternate;
}

@keyframes glow-pulse{
  from{opacity:.7;}
  to{opacity:1;}
}

.page{
  position:relative;
  z-index:1;
  max-width:var(--content-max);
  margin:0 auto;
  padding:0 5%;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* ================= Header ================= */
.header{
  position:relative;
  height:var(--header-h);
  flex-shrink:0;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:var(--sp-5);
  border-bottom:1px solid var(--border-soft);
}

.logo{
  justify-self:start;
  font-size:1.35rem;
  font-weight:700;
  letter-spacing:.02em;
  text-decoration:none;
  color:var(--text-1);
}
.logo span{color:var(--accent);}

.nav{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:var(--sp-6);
}
.nav a{
  text-decoration:none;
  color:var(--text-2);
  font-size:.95rem;
  padding:6px 1px;
  position:relative;
  white-space:nowrap;
  transition:color .25s;
}
.nav a:hover{color:var(--text-1);}
.nav a.is-active{color:var(--accent);}
.nav a.is-active::after{
  content:"";
  position:absolute;left:0;right:0;bottom:-3px;
  height:2px;border-radius:2px;
  background:var(--accent);
}
.nav-contact-mobile{display:none;}

.contact-btn{
  justify-self:end;
  text-decoration:none;
  color:var(--accent);
  border:1px solid var(--accent);
  border-radius:20px;
  padding:8px 22px;
  font-size:.9rem;
  white-space:nowrap;
  transition:background .25s,color .25s;
}
.contact-btn:hover{background:var(--accent);color:#03222a;}

.nav-toggle{
  display:none;
  background:none;
  border:1px solid var(--border-soft);
  border-radius:10px;
  width:38px;height:38px;
  color:var(--text-1);
  align-items:center;justify-content:center;
  cursor:pointer;
}
.nav-toggle svg{width:20px;height:20px;}
.nav-toggle .icon-close{display:none;}
.nav-toggle[aria-expanded="true"] .icon-open{display:none;}
.nav-toggle[aria-expanded="true"] .icon-close{display:block;}

/* ================= Hero ================= */
main{
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
}

.hero{
  flex:1;
  display:flex;
  gap:var(--sp-7);
  padding-top:var(--sp-6);
  padding-bottom:var(--sp-6);
}

.side-card{
  width:250px;
  flex-shrink:0;
  align-self:flex-start;
  background:linear-gradient(180deg,var(--bg-panel),rgba(13,27,41,.4));
  border:1px solid var(--border-soft);
  border-radius:var(--radius-lg);
  padding:var(--sp-5);
  display:flex;
  flex-direction:column;
  gap:var(--sp-4);
  backdrop-filter:blur(6px);
  opacity:0;
  animation:fade-up .7s ease .05s forwards;
}

.avatar{
  width:76px;height:76px;
  margin:0 auto;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);
  font-size:1rem;
  letter-spacing:.02em;
  color:var(--accent);
  background:var(--bg-void);
  border:2px solid var(--accent);
  box-shadow:0 0 0 4px var(--accent-soft);
}

.side-card h3{
  margin:0;
  text-align:center;
  font-size:1rem;
  font-weight:600;
  color:var(--text-2);
}

.bio{
  margin:0;
  font-size:.85rem;
  color:var(--text-2);
  line-height:1.7;
}

.side-links{
  display:flex;flex-direction:column;gap:2px;
  border-top:1px solid var(--border-soft);
  padding-top:var(--sp-3);
}
.side-links a{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:9px 10px;
  border-radius:var(--radius-sm);
  text-decoration:none;
  color:var(--text-2);
  font-size:.88rem;
  transition:background .2s,color .2s;
}
.side-links a svg{width:18px;height:18px;flex-shrink:0;}
.side-links a:hover{background:var(--bg-panel-2);color:var(--accent);}

.side-contact{
  display:flex;align-items:center;gap:var(--sp-2);
  padding-top:var(--sp-3);
  border-top:1px solid var(--border-soft);
  font-size:.78rem;
  color:var(--text-3);
  text-decoration:none;
  word-break:break-all;
  transition:color .2s;
}
.side-contact svg{width:16px;height:16px;flex-shrink:0;}
.side-contact:hover{color:var(--accent);}

/* ================= Content ================= */
.content{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:.85rem;
  color:var(--text-3);
  margin:0 0 var(--sp-3);
  display:flex;gap:8px;
  opacity:0;
  animation:fade-up .7s ease .15s forwards;
}
.eyebrow .prompt{color:var(--accent);}
.eyebrow .typed{
  display:inline-block;
  overflow:hidden;
  white-space:nowrap;
  vertical-align:bottom;
  border-right:2px solid var(--accent);
  width:0;
  animation:typing 1s steps(6) .5s forwards, caret .8s step-end infinite;
}
@keyframes typing{to{width:6ch;}}
@keyframes caret{50%{border-color:transparent;}}
@keyframes fade-up{
  from{opacity:0;transform:translateY(16px);}
  to{opacity:1;transform:translateY(0);}
}

h1{
  margin:0 0 var(--sp-2);
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:var(--sp-4);
  opacity:0;
  animation:fade-up .7s ease .3s forwards;
}
h1 .brand{
  font-size:clamp(2.1rem,4vw,3rem);
  font-weight:700;
  letter-spacing:.01em;
  background:linear-gradient(90deg,var(--text-1),var(--accent) 130%);
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
h1 .role{
  font-size:clamp(.95rem,1.6vw,1.1rem);
  font-weight:400;
  color:var(--text-2);
}

h2{
  font-size:clamp(.9rem,1.4vw,1.05rem);
  font-weight:400;
  color:var(--text-2);
  margin:0 0 var(--sp-5);
  opacity:0;
  animation:fade-up .7s ease .42s forwards;
}

.tags{
  display:flex;flex-wrap:wrap;gap:var(--sp-2);
  margin-bottom:var(--sp-5);
  opacity:0;
  animation:fade-up .7s ease .54s forwards;
}
.tags span{
  font-family:var(--font-mono);
  font-size:.72rem;
  color:var(--text-2);
  border:1px solid var(--border-soft);
  border-radius:20px;
  padding:5px 13px;
}

.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--sp-4);
}

.card{
  position:relative;
  overflow:hidden;
  min-height:128px;
  padding:var(--sp-4);
  border-radius:var(--radius-md);
  background:var(--bg-panel);
  border:1px solid var(--border-soft);
  text-decoration:none;
  color:var(--text-1);
  display:flex;
  flex-direction:column;
  gap:6px;
  opacity:0;
  animation:fade-up .6s ease forwards;
  transition:transform .25s,border-color .25s,background .25s;
}
.card:nth-child(1){animation-delay:.66s;}
.card:nth-child(2){animation-delay:.72s;}
.card:nth-child(3){animation-delay:.78s;}
.card:nth-child(4){animation-delay:.84s;}
.card:nth-child(5){animation-delay:.9s;}
.card:nth-child(6){animation-delay:.96s;}

/* 鼠标悬浮在卡片上时，跟随光标出现一小片光斑（--mx/--my 由 JS 更新） */
.card::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(77,232,224,.14),transparent 70%);
  opacity:0;
  transition:opacity .3s;
  pointer-events:none;
}
.card:hover::before{opacity:1;}
.card > *{position:relative;}
.card-tag{
  align-self:flex-start;
  font-family:var(--font-mono);
  font-size:.62rem;
  letter-spacing:.05em;
  color:var(--text-3);
  border:1px solid var(--border-soft);
  border-radius:20px;
  padding:2px 9px;
}
.card-icon{width:20px;height:20px;color:var(--accent);margin-top:var(--sp-1);}
.card h3{margin:2px 0 0;font-size:.98rem;font-weight:600;}
.card p{margin:0;font-size:.8rem;color:var(--text-2);flex:1;}

.card:hover{
  transform:translateY(-4px);
  border-color:var(--border-strong);
  background:var(--bg-panel-2);
}

.card-featured{
  border-color:rgba(77,232,224,.4);
  background:linear-gradient(160deg,rgba(77,232,224,.1),var(--bg-panel));
}
.card-featured .card-tag{
  color:#03222a;
  background:var(--accent);
  border-color:var(--accent);
}

.scroll-cue{
  margin:var(--sp-5) auto 0;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  color:var(--text-3);
  text-decoration:none;
  font-family:var(--font-mono);
  font-size:.65rem;
  letter-spacing:.15em;
  animation:bounce 2.4s ease-in-out infinite;
}
.scroll-cue svg{width:15px;height:15px;}
.scroll-cue:hover{color:var(--accent);}
@keyframes bounce{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(6px);}
}

/* ================= Footer ================= */
.site-footer{
  position:relative;z-index:1;
  border-top:1px solid var(--border-soft);
  padding:var(--sp-7) 5% var(--sp-5);
  max-width:var(--content-max);
  margin:0 auto;
  width:100%;
}
.footer-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--sp-6);
}
.footer-col h4{
  margin:0 0 var(--sp-3);
  font-size:.85rem;
  color:var(--text-2);
  font-weight:600;
}
.footer-col a,.footer-col span{
  display:block;
  font-size:.85rem;
  color:var(--text-3);
  text-decoration:none;
  padding:4px 0;
}
.footer-col a:hover{color:var(--accent);}

/* 滚动淡入：只有加载了 JS（.js-ready）才会先隐藏再滚动显现；
   没有 JS 的情况下这段规则不生效，内容直接可见，不会被"卡住"看不到 */
.js-ready .reveal-on-scroll{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .7s ease,transform .7s ease;
}
.reveal-on-scroll.is-visible{
  opacity:1;
  transform:translateY(0);
}
.footer-grid .footer-col:nth-child(1){transition-delay:0s;}
.footer-grid .footer-col:nth-child(2){transition-delay:.1s;}
.footer-grid .footer-col:nth-child(3){transition-delay:.2s;}

.footer-bottom{
  margin-top:var(--sp-6);
  padding-top:var(--sp-4);
  border-top:1px solid var(--border-soft);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-2);
  font-size:.78rem;
  color:var(--text-3);
}

/* 备案信息：工信部 ICP 备案 + 公安联网备案，居中放在页面最底部 */
.footer-beian{
  margin-top:var(--sp-3);
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:var(--sp-2) var(--sp-5);
  font-size:.72rem;
  color:var(--text-3);
}
.footer-beian a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--text-3);
  text-decoration:none;
  transition:color .2s;
}
.footer-beian a:hover{color:var(--accent);}
.footer-beian svg{width:14px;height:14px;flex-shrink:0;}

/* ================= 游戏合集页：3D 卡片轮播 ================= */
.games-hero{
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:var(--sp-6);
}
.games-intro .eyebrow,.games-intro h2{justify-content:center;}
.games-intro h1{justify-content:center;}
.games-intro h1 .brand{
  font-size:clamp(2.1rem,4vw,3rem);
  font-weight:700;
  background:linear-gradient(90deg,var(--text-1),var(--accent) 130%);
  background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
}
.games-intro h2{color:var(--text-2);font-size:clamp(.9rem,1.4vw,1.05rem);font-weight:400;margin:0;}

.game-carousel{
  width:100%;
  padding:var(--sp-7) 0;
  perspective:1300px;
}
.game-carousel-inner{
  position:relative;
  height:300px;
  transform-style:preserve-3d;
}

.game-card{
  position:absolute;
  top:50%;
  left:50%;
  width:230px;
  aspect-ratio:4/3;
  text-decoration:none;
  color:var(--text-1);
  /* 外层只负责“点击范围”：只做平移和缩放，不旋转、不涉及Z轴透视，
     这样点击区域始终是规规矩矩的矩形，不会出现转过的卡片点不中的问题 */
  transition:transform .5s cubic-bezier(.22,.9,.32,1);
}
.game-card-visual{
  width:100%;
  height:100%;
  border-radius:var(--radius-md);
  border:1px solid var(--border-soft);
  background:linear-gradient(165deg,var(--bg-panel-2),var(--bg-panel));
  display:flex;
  flex-direction:column;
  overflow:hidden;
  /* 真正的 3D 旋转/景深效果放在这一层，纯视觉，不接收点击——
     pointer-events:none 让点击穿透到外层的 <a>，两侧的卡片才能点得到 */
  pointer-events:none;
  transition:transform .5s cubic-bezier(.22,.9,.32,1),border-color .3s,box-shadow .3s;
}
.game-card.is-center .game-card-visual{box-shadow:0 24px 60px rgba(0,0,0,.45);}

.game-thumb{
  flex:1;
  overflow:hidden;
  background:var(--bg-panel-2);
}
.game-thumb img{width:100%;height:100%;object-fit:cover;display:block;}

.game-info{
  padding:var(--sp-3) var(--sp-4) var(--sp-4);
  border-top:1px solid var(--border-soft);
  display:flex;flex-direction:column;gap:4px;
}
.game-tag{
  font-family:var(--font-mono);
  font-size:.62rem;letter-spacing:.05em;
  color:var(--text-3);
}
.game-info h3{margin:0;font-size:1rem;font-weight:600;}

.game-card:hover .game-card-visual,.game-card.is-center .game-card-visual{border-color:var(--border-strong);}
.game-card:hover .game-thumb,.game-card.is-center .game-thumb{color:var(--accent);}

/* ================= 子页面通用：页面顶部标题区 ================= */
.page-hero{
  padding-top:var(--sp-7);
  padding-bottom:var(--sp-6);
}
.page-hero-center{text-align:center;}
.page-hero-center .eyebrow{justify-content:center;}
.page-lead{
  color:var(--text-2);
  font-size:1rem;
  max-width:640px;
  margin:0;
  line-height:1.7;
}
.page-hero-center .page-lead{margin:0 auto;}

.content-block{padding-bottom:var(--sp-7);}
.block-title{font-size:1.3rem;margin:0 0 var(--sp-5);color:var(--text-1);font-weight:600;}

/* "关于我"页：专注方向小卡片 */
.focus-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4);}
.focus-card{padding:var(--sp-5);border-radius:var(--radius-md);background:var(--bg-panel);border:1px solid var(--border-soft);}
.focus-icon{width:26px;height:26px;color:var(--accent);margin-bottom:var(--sp-3);display:block;}
.focus-card h3{margin:0 0 6px;font-size:1rem;}
.focus-card p{margin:0;font-size:.85rem;color:var(--text-2);line-height:1.6;}

.tags-lg span{font-size:.8rem;padding:7px 16px;}

/* "关于我"页：项目经历时间线 */
.timeline{display:flex;flex-direction:column;gap:var(--sp-4);}
.timeline-item{display:flex;gap:var(--sp-4);padding-bottom:var(--sp-4);border-bottom:1px solid var(--border-soft);}
.timeline-item:last-child{border-bottom:none;padding-bottom:0;}
.timeline-date{flex-shrink:0;width:90px;font-family:var(--font-mono);font-size:.78rem;color:var(--accent);padding-top:2px;}
.timeline-content h3{margin:0 0 4px;font-size:.98rem;}
.timeline-content p{margin:0;color:var(--text-2);font-size:.85rem;line-height:1.6;}

.cta-block{text-align:center;}
.cta-btn{display:inline-block;margin-top:var(--sp-4);}

/* "技术笔记"列表页 */
.post-list{display:flex;flex-direction:column;gap:var(--sp-4);}
.post-item{
  display:block;
  padding:var(--sp-5);
  border-radius:var(--radius-md);
  background:var(--bg-panel);
  border:1px solid var(--border-soft);
  text-decoration:none;
  color:var(--text-1);
  transition:border-color .25s,transform .25s,background .25s;
}
.post-item:hover{border-color:var(--border-strong);background:var(--bg-panel-2);transform:translateX(4px);}
.post-meta{display:flex;gap:var(--sp-3);margin-bottom:var(--sp-2);font-family:var(--font-mono);font-size:.72rem;color:var(--text-3);}
.post-cat{color:var(--accent);}
.post-item h3{margin:0 0 4px;font-size:1.05rem;}
.post-item p{margin:0;color:var(--text-2);font-size:.88rem;}

/* "联系方式"页 */
.contact-panel{display:flex;flex-direction:column;gap:var(--sp-3);max-width:480px;margin:0 auto;}
.contact-row{
  display:flex;align-items:center;gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-5);
  border-radius:var(--radius-md);
  background:var(--bg-panel);
  border:1px solid var(--border-soft);
  text-decoration:none;color:var(--text-1);
  transition:border-color .25s;
}
.contact-row:hover{border-color:var(--border-strong);}
.contact-row svg{width:22px;height:22px;color:var(--accent);flex-shrink:0;}
.contact-row > div{display:flex;flex-direction:column;gap:2px;}
.contact-label{font-size:.72rem;color:var(--text-3);}
.contact-value{font-size:.95rem;word-break:break-all;}
.contact-note{text-align:center;max-width:480px;margin:var(--sp-5) auto 0;color:var(--text-3);font-size:.8rem;}

/* 文章 / 项目详情模板：正文排版 */
.article-page{max-width:760px;margin:0 auto;padding:var(--sp-7) 0 var(--sp-8);width:100%;}
.back-link{display:inline-block;color:var(--text-3);text-decoration:none;font-size:.85rem;margin-bottom:var(--sp-5);transition:color .2s;}
.back-link:hover{color:var(--accent);}
.article-meta{display:flex;gap:var(--sp-3);font-family:var(--font-mono);font-size:.75rem;color:var(--text-3);margin-bottom:var(--sp-3);}
.article-title{font-size:clamp(1.6rem,3vw,2.2rem);margin:0 0 var(--sp-3);}
.article-lead{color:var(--text-2);font-size:1rem;line-height:1.7;margin:0 0 var(--sp-5);}

.article-body{color:var(--text-1);font-size:.98rem;line-height:1.85;}
.article-body h2{font-size:1.2rem;margin:var(--sp-6) 0 var(--sp-3);padding-top:var(--sp-4);border-top:1px solid var(--border-soft);}
.article-body h2:first-child{margin-top:0;padding-top:0;border-top:none;}
.article-body p{margin:0 0 var(--sp-4);color:var(--text-2);}
.article-body img{max-width:100%;height:auto;display:block;margin:0 0 var(--sp-4);border-radius:var(--radius-sm);border:1px solid var(--border-soft);}
.article-body ul{margin:0 0 var(--sp-4);padding-left:1.3em;color:var(--text-2);}
.article-body li{margin-bottom:6px;}
.article-body code{font-family:var(--font-mono);font-size:.85em;background:var(--bg-panel-2);padding:2px 6px;border-radius:4px;color:var(--accent);}
.article-body pre{background:var(--bg-panel);border:1px solid var(--border-soft);border-radius:var(--radius-sm);padding:var(--sp-4);overflow-x:auto;margin:0 0 var(--sp-4);}
.article-body pre code{background:none;padding:0;color:var(--text-1);}
.article-body blockquote{margin:0 0 var(--sp-4);padding:var(--sp-3) var(--sp-4);border-left:3px solid var(--accent);background:var(--bg-panel);color:var(--text-2);border-radius:0 var(--radius-sm) var(--radius-sm) 0;}
.article-footer-nav{margin-top:var(--sp-7);padding-top:var(--sp-5);border-top:1px solid var(--border-soft);}

/* ================= 响应式 ================= */
@media(max-width:1080px){
  .nav{
    display:none;
    position:absolute;
    top:calc(var(--header-h) + 1px);
    left:0;right:0;
    background:var(--bg-panel);
    border:1px solid var(--border-soft);
    border-top:none;
    border-radius:0 0 var(--radius-md) var(--radius-md);
    flex-direction:column;
    align-items:stretch;
    gap:var(--sp-1);
    padding:var(--sp-4) var(--sp-4) var(--sp-5);
    z-index:20;
  }
  .nav.is-open{display:flex;}
  .nav a{padding:10px 6px;}
  .nav a.is-active::after{display:none;}
  .nav-contact-mobile{
    display:block;
    margin-top:var(--sp-2);
    text-align:center;
    color:var(--accent);
    border:1px solid var(--accent);
    border-radius:20px;
    padding:9px;
  }

  .contact-btn{display:none;}
  .nav-toggle{display:flex;}

  .hero{flex-direction:column;gap:var(--sp-5);}
  .side-card{width:100%;}
  .side-links{flex-direction:row;flex-wrap:wrap;}
  .side-links a{flex:1 1 45%;}

  /* 移动端/平板端卡片会堆成一列，scroll-cue 会被挤到首屏以外，
     等用户刷到那里时其实已经划过了整个卡片区，提示已经没有意义，直接隐藏 */
  .scroll-cue{display:none !important;}
  .bio{text-align:left;}

  .cards{grid-template-columns:repeat(2,1fr);}
  .focus-grid{grid-template-columns:repeat(2,1fr);}

  .game-carousel-inner{height:230px;}
  .game-card{width:170px;}
}

@media(max-width:640px){
  .page{padding:0 6%;}
  .site-footer{padding-left:6%;padding-right:6%;}
  .cards{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;gap:var(--sp-5);}
  h1{flex-direction:column;gap:2px;}
  .side-links a{flex:1 1 100%;}
  .focus-grid{grid-template-columns:1fr;}
  .contact-row{padding:var(--sp-4);}
  .timeline-item{flex-direction:column;gap:4px;}
  .timeline-date{width:auto;}

  /* 手机端屏幕太窄，3D 层叠效果放不下也不好点，改成竖着排的普通卡片列表 */
  .game-carousel{perspective:none;padding:var(--sp-5) 0;}
  .game-carousel-inner{display:flex;flex-direction:column;gap:var(--sp-4);height:auto;transform:none !important;}
  .game-card{position:static;width:100%;aspect-ratio:16/9;transform:none !important;}
  .game-card-visual{transform:none !important;box-shadow:none !important;}
}

/* ================= 减少动效偏好 ================= */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration:.001ms !important;
    animation-delay:0s !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .eyebrow .typed{width:6ch;border-right:none;}
}