/* ════════════════════════════════════════════════════════════
   黄志周 · 像素作品集 样式表
   传统幻想 / 像素酒馆 / 棕色木质纹理
   ════════════════════════════════════════════════════════════ */

/* 自托管中文像素字体 Zpix（Press Start 2P 仅拉丁字符） */
@font-face {
  font-family: 'Zpix';
  src: url('../assets/fonts/Zpix.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root{
  /* 酒馆木墙 */
  --wood-light:#c89968;   /* 浅木 */
  --wood-mid:#a9763f;     /* 中木 */
  --wood-dark:#7a4f24;    /* 深木 */
  --wood-darker:#5a3818;  /* 木板缝隙 */
  --wood-beam:#6b3e1a;    /* 横梁 */
  --wood-beam-d:#4a2a12;
  --wall-top:#b58754;     /* 上墙 */
  --wall-bot:#9c6e3c;     /* 下墙 */
  --plank-line:#6b3e1a;   /* 木板分隔线 */

  /* 火焰 / 灯光 */
  --fire-1:#ffd83d;
  --fire-2:#ff9a3d;
  --fire-3:#e63946;
  --glow:#ffe98a;
  --window-night:#2a3a5a;
  --window-glow:#ffd9a0;

  /* 像素色块 */
  --c-red:#e63946;
  --c-red-d:#9b1f2a;
  --c-blue:#3a7bd5;
  --c-blue-d:#1f4f8f;
  --c-gold:#f4c542;
  --c-gold-d:#b8860b;
  --c-green:#43aa5b;
  --c-stone:#a8b6c4;
  --c-stone-d:#6b7a8a;
  --c-roof:#c0392b;
  --c-steel:#c8d2dc;
  --c-steel-d:#8a96a3;
  --c-shield:#3a7bd5;
  --c-shield-d:#1f4f8f;

  /* UI */
  --ink:#1b1b2f;          /* 描边/阴影 */
  --ink-2:#2c2c44;
  --paper:#fdf6e3;        /* 米白卡片 */
  --paper-2:#fffdf5;
  --panel:#fff7d6;        /* 对话框黄 */
  --panel-edge:#c79a2a;
  --text:#2a2a3a;
  --text-dim:#6a6a7a;

  /* 像素描边硬阴影 */
  --shadow: 4px 4px 0 var(--ink);
  --shadow-sm: 3px 3px 0 var(--ink);
  --shadow-lg: 6px 6px 0 var(--ink);
  --shadow-inset: inset 3px 3px 0 rgba(0,0,0,.18);

  /* 字体 */
  --font-display: 'Press Start 2P','Zpix','Cubic 11',monospace;
  --font-body: 'Zpix','VT323','Cubic 11',monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  background:var(--wood-mid);
  color:var(--text);
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:none;
  image-rendering:pixelated;
}
/* 像素感渲染：让 SVG/图片保持硬边 */
img,svg{image-rendering:pixelated;image-rendering:crisp-edges}

/* ═══════════ 酒馆背景层 ═══════════ */
.sky{
  position:fixed;inset:0;z-index:-2;overflow:hidden;
  background:var(--wood-mid);
}
/* 木板纹理：纵向墙板 + 缝隙 */
.sky::before{
  content:"";position:absolute;inset:0;
  background:
    repeating-linear-gradient(90deg,
      transparent 0 88px,
      var(--wood-darker) 88px 92px,
      transparent 92px 96px),
    repeating-linear-gradient(90deg,
      var(--wood-light) 0 44px,
      var(--wood-mid) 44px 88px,
      var(--wood-dark) 88px 92px),
    linear-gradient(180deg,var(--wall-top) 0%,var(--wall-bot) 100%);
  opacity:.92;
}
/* 水平横梁：上中下三道 */
.sky::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,
      transparent 0 18%,
      var(--wood-beam-d) 18% 18.6%,
      var(--wood-beam) 18.6% 22%,
      var(--wood-beam-d) 22% 22.6%,
      transparent 22.6% 78%,
      var(--wood-beam-d) 78% 78.6%,
      var(--wood-beam) 78.6% 82%,
      var(--wood-beam-d) 82% 82.6%,
      transparent 82.6% 100%);
}
.sun,.cloud,.cloud-1,.cloud-2,.cloud-3,.mountains{display:none}

/* ═══════════ HERO ═══════════ */
.hero{
  position:relative;min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:40px 6vw;text-align:center;overflow:hidden;
}
.scene-back{position:absolute;inset:0;z-index:0;pointer-events:none}
.tavern-stage{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(820px,96vw);opacity:1;
}
.castle-stage,.dragon-stage,.grass-strip{display:none}

/* 前景：盾牌 + 交叉长剑 + 名字 */
.hero-banner{
  display:flex;align-items:center;justify-content:center;
  margin-bottom:6px;position:relative;
  min-height:180px;
}
.name-emblem{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:min(260px,56vw);z-index:1;
  pointer-events:none;
  filter:drop-shadow(4px 4px 0 rgba(0,0,0,.4));
}
.hero-sprite,.floating-sword{display:none}

/* 前景内容（名字 + 按钮）居中 */
.hero-content{
  position:relative;z-index:4;display:flex;flex-direction:column;align-items:center;
}

.name{
  position:relative;z-index:2;
  font-family:var(--font-display);
  font-size:clamp(2rem,6vw,3.8rem);
  letter-spacing:.1em;
  color:var(--c-gold);
  text-shadow:
    3px 3px 0 var(--ink),
    5px 5px 0 var(--c-red-d),
    6px 6px 0 var(--ink);
  cursor:pointer;user-select:none;
  padding:6px 4px;
  transition:transform .15s;
}
.name:hover{transform:translateY(-2px) scale(1.02)}
.name:active{transform:translateY(1px)}
.name-glyph{display:inline-block}
.name-sub{
  font-family:var(--font-display);font-size:.7rem;letter-spacing:.25em;
  color:var(--ink);background:var(--c-gold);
  padding:7px 14px;margin:14px 0 22px;
  border:3px solid var(--ink);box-shadow:var(--shadow);
}

/* 自我介绍对话框 */
.intro-dialog{
  max-width:560px;margin:0 auto 22px;padding:18px 22px;
  background:var(--panel);
  border:4px solid var(--ink);
  box-shadow:var(--shadow-lg);
  position:relative;
  animation:popIn .25s ease;
}
.intro-dialog::before{
  /* 下方小尖 */
  content:"";position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);
  width:0;height:0;border:12px solid transparent;border-top-color:var(--ink);
}
.intro-dialog::after{
  content:"";position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);
  width:0;height:0;border:8px solid transparent;border-top-color:var(--panel);
}
@keyframes popIn{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
.intro-text{font-family:var(--font-body);font-size:1.05rem;color:var(--text);line-height:1.85}

/* 像素按钮 */
.pixel-btn{
  font-family:var(--font-display);font-size:.78rem;letter-spacing:.12em;
  color:var(--paper);background:var(--c-blue);
  border:4px solid var(--ink);box-shadow:var(--shadow);
  padding:14px 26px;cursor:pointer;
  transition:transform .1s,box-shadow .1s,background .15s;
}
.pixel-btn:hover{background:var(--c-red);transform:translate(-2px,-2px);box-shadow:var(--shadow-lg)}
.pixel-btn:active{transform:translate(2px,2px);box-shadow:var(--shadow-sm)}
.pixel-btn .cursor{color:var(--c-gold);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* HERO 双按钮容器 */
.hero-cta{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:8px}
.pixel-btn--alt{background:var(--c-gold);color:var(--ink);display:inline-flex;align-items:center;gap:8px}
.pixel-btn--alt:hover{background:var(--c-red);color:var(--paper)}

/* 实习报告弹窗内容 */
.rep-body{max-width:680px}
.rep-h{
  font-family:var(--font-display);font-size:.92rem;letter-spacing:.1em;
  color:var(--c-red);margin:18px 0 8px;padding-bottom:6px;
  border-bottom:3px solid var(--ink)
}
.rep-h:first-child{margin-top:0}
.rep-org{
  font-family:var(--font-display);font-size:.78rem;letter-spacing:.06em;
  color:var(--c-blue);margin:6px 0 4px
}
.rep-p{margin:4px 0 10px;color:var(--ink);line-height:1.55}
.rep-label{
  font-family:var(--font-display);font-size:.7rem;letter-spacing:.1em;
  color:#4a4a4a;margin:10px 0 6px
}
.rep-item{
  position:relative;padding-left:14px;margin:8px 0;
  color:var(--ink);line-height:1.6
}
.rep-item .rep-bullet{position:absolute;left:0;color:#4a4a4a}
.rep-item b{color:#4a4a4a}

/* ═══════════ 项目选择器 ═══════════ */
.projects{
  position:relative;z-index:2;padding:70px 6vw 60px;
  background:
    repeating-linear-gradient(90deg,
      var(--wood-dark) 0 88px,
      var(--wood-darker) 88px 92px,
      var(--wood-dark) 92px 96px),
    var(--wood-dark);
  border-top:6px solid var(--ink);
}
.section-title{
  font-family:var(--font-display);text-align:center;
  font-size:clamp(1rem,3vw,1.5rem);letter-spacing:.15em;color:var(--c-gold);
  text-shadow:3px 3px 0 var(--ink);margin-bottom:40px;
}
.card-row{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;max-width:1100px;margin:0 auto}
.project-card{
  min-width:0;
  background:var(--paper);border:5px solid var(--ink);
  box-shadow:var(--shadow-lg);
  padding:26px 22px 20px;text-align:center;cursor:pointer;
  position:relative;transition:transform .18s,box-shadow .18s;
}
.project-card:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--ink)}
.project-card:active{transform:translate(2px,2px);box-shadow:var(--shadow-sm)}
.project-card:focus{outline:none;border-color:var(--c-red);box-shadow:0 0 0 4px var(--c-gold),var(--shadow-lg)}
.card-art{display:flex;justify-content:center;margin-bottom:16px;height:96px;align-items:center}
.card-art svg{height:96px;width:auto}
.card-title{
  font-family:var(--font-display);font-size:1.15rem;letter-spacing:.1em;color:var(--ink);
  margin-bottom:8px;text-shadow:2px 2px 0 var(--c-gold);
}
.card-desc{font-family:var(--font-body);font-size:1rem;color:var(--text-dim);margin-bottom:16px}
.card-enter{
  font-family:var(--font-display);font-size:.62rem;letter-spacing:.15em;
  color:var(--paper);background:var(--c-blue);
  border:3px solid var(--ink);padding:8px 12px;
  box-shadow:var(--shadow-sm);
}
.project-card:hover .card-enter{background:var(--c-red)}
.project-card.locked{cursor:not-allowed;filter:saturate(.85)}
.project-card.locked .card-enter{background:var(--c-stone-d)}
.card-enter.coming{background:var(--c-gold-d)}

/* ═══════════ 底部 ═══════════ */
.footer{
  position:relative;z-index:2;
  background:var(--ink);color:var(--paper);
  text-align:center;padding:30px 6vw;
  border-top:6px solid var(--c-gold);
}
.email-link{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-display);font-size:.8rem;letter-spacing:.05em;
  color:var(--c-gold);text-decoration:none;
  padding:8px 16px;border:3px solid var(--c-gold);
  box-shadow:var(--shadow-sm);
  transition:transform .1s,background .15s,color .15s;
}
.email-link:hover{background:var(--c-gold);color:var(--ink);transform:translate(-2px,-2px)}
.mail-icon{display:inline-flex}
.mail-icon svg{width:22px;height:22px}
.footer-copy{font-family:var(--font-body);font-size:.8rem;color:#b89868;margin-top:14px;letter-spacing:.15em}

/* ═══════════ 简历弹窗 ═══════════ */
.modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:4vh 4vw}
.modal[hidden]{display:none}
.modal-backdrop{position:absolute;inset:0;background:rgba(20,20,40,.7);backdrop-filter:blur(2px)}
.modal-box{
  position:relative;z-index:1;
  width:100%;max-width:760px;max-height:88vh;overflow:hidden;
  background:var(--panel);border:5px solid var(--ink);box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;
}
.modal-box.small{max-width:440px}
.modal-head{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--c-blue);color:var(--paper);
  border-bottom:4px solid var(--ink);padding:12px 16px;
}
.modal-title{font-family:var(--font-display);font-size:.72rem;letter-spacing:.1em}
.modal-close{
  font-family:var(--font-display);font-size:1rem;
  background:var(--c-red);color:var(--paper);
  border:3px solid var(--ink);box-shadow:2px 2px 0 var(--ink);
  cursor:pointer;line-height:1;padding:4px 8px;
}
.modal-close:hover{background:var(--c-gold);color:var(--ink)}
.modal-body{overflow-y:auto;padding:22px 24px 26px}
.modal-body::-webkit-scrollbar{width:12px}
.modal-body::-webkit-scrollbar-track{background:var(--panel-edge)}
.modal-body::-webkit-scrollbar-thumb{background:var(--ink);border:2px solid var(--panel-edge)}
.modal-body.center{text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px}

.res-section{margin-bottom:22px;border-bottom:3px dashed var(--panel-edge);padding-bottom:14px}
.res-section:last-of-type{border-bottom:0}
.res-h{font-family:var(--font-display);font-size:.78rem;color:var(--c-red-d);margin-bottom:10px;letter-spacing:.05em}
.res-line{font-family:var(--font-body);font-size:1rem;color:var(--text);margin:4px 0;line-height:1.85}
.res-line.dim{color:var(--text-dim)}
.res-line b{color:var(--c-blue-d);background:var(--c-gold);padding:0 4px}

/* 游戏经历网格 */
.game-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.game-item{background:var(--paper-2);border:3px solid var(--ink);box-shadow:var(--shadow-sm);padding:12px}
.game-cat{font-family:var(--font-display);font-size:.66rem;color:var(--ink);margin-bottom:6px;letter-spacing:.05em}
.game-list{font-family:var(--font-body);font-size:.92rem;color:var(--text-dim);margin-bottom:6px;line-height:1.7}
.game-stat{font-family:var(--font-body);font-size:.9rem;color:var(--text)}
.game-stat b{color:var(--c-red-d);background:var(--c-gold);padding:0 4px}

/* 项目块 */
.proj-block{margin:14px 0;padding:12px 14px;background:var(--paper-2);border:3px solid var(--ink);box-shadow:var(--shadow-sm)}
.proj-head{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.proj-name{font-family:var(--font-display);font-size:.72rem;color:var(--c-blue-d)}
.proj-date{font-family:var(--font-display);font-size:.62rem;color:var(--paper);background:var(--c-stone-d);padding:3px 8px}

/* 技能 */
.skill-row{display:flex;align-items:baseline;gap:10px;margin:8px 0;flex-wrap:wrap}
.skill-chip{font-family:var(--font-display);font-size:.62rem;color:var(--paper);background:var(--c-green);border:2px solid var(--ink);padding:4px 8px;box-shadow:2px 2px 0 var(--ink)}
.skill-detail{font-family:var(--font-body);font-size:.95rem;color:var(--text-dim)}

.modal-foot{font-family:var(--font-display);font-size:.66rem;text-align:center;color:var(--panel-edge);margin-top:8px;letter-spacing:.2em}

/* 即将到来 */
.coming-art{display:flex;justify-content:center}
.coming-art svg{width:72px;height:72px}
.coming-text{font-family:var(--font-body);font-size:1.05rem;color:var(--text);line-height:1.8}

/* ═══════════ 过渡层（RPG幕布 + iframe） ═══════════ */
.transition{position:fixed;inset:0;z-index:300;pointer-events:none;visibility:hidden}
.transition.active{visibility:visible;pointer-events:auto}
.wipe{position:absolute;left:0;right:0;height:50%;background:var(--ink);transform:scaleY(0);transform-origin:top;transition:transform .42s cubic-bezier(.7,0,.3,1)}
.wipe-top{top:0;transform-origin:top}
.wipe-bottom{bottom:0;transform-origin:bottom}
.transition.closing .wipe{transform:scaleY(1)}
.wipe-msg{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:var(--font-display);font-size:1rem;color:var(--c-gold);
  letter-spacing:.2em;opacity:0;transition:opacity .2s;z-index:3;
  text-shadow:3px 3px 0 var(--ink);
}
.transition.closing .wipe-msg{opacity:1;animation:blink 1s steps(1) infinite}
.exhibit-frame{
  position:absolute;inset:0;width:100%;height:100%;border:0;
  opacity:0;transition:opacity .3s;z-index:1;background:#04111a;
}
.transition.shown .exhibit-frame{opacity:1}
.back-btn{
  position:absolute;top:14px;left:14px;z-index:4;
  font-family:var(--font-display);font-size:.66rem;letter-spacing:.08em;
  color:var(--paper);background:var(--c-red);
  border:4px solid var(--ink);box-shadow:var(--shadow-sm);
  padding:10px 14px;cursor:pointer;opacity:0;transition:opacity .2s,transform .1s;
}
.transition.shown .back-btn{opacity:1}
.back-btn:hover{background:var(--c-gold);color:var(--ink)}

/* ═══════════ 响应式 ═══════════ */
@media(max-width:760px){
  .tavern-stage{width:96vw}
  .name-emblem{width:90vw}
  .card-row{grid-template-columns:repeat(2,1fr);gap:18px}
  .modal-head{padding:10px 12px}
  .modal-title{font-size:.62rem}
}
@media(max-width:480px){
  .name{font-size:1.8rem}
  .name-sub{font-size:.55rem}
  .section-title{font-size:.9rem}
  .card-row{grid-template-columns:1fr;gap:18px}
}