/* ========== FuYan · Portfolio · 横向跑地图版 ========== */
@font-face{
  font-family:'HYG';
  src:url(../assets/fonts/HYG3GJM-sub.woff2) format('woff2');
  font-display:swap;
}
:root{
  --night1:#0d1330; --night2:#232a52; --star:#ffd75e; --neon:#7ef0d4;
  --paper:#f6f1e7; --ink:#2f2c27; --accent:#f2c230;
  --note-y:#eedea8; --note-b:#c3d4da; --note-g:#c7d5bd; --note-o:#e7caa6;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;height:100%}
body{
  height:100%;overflow-x:auto;overflow-y:hidden;
  font-family:'HYG',-apple-system,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  color:var(--ink);background:var(--paper);line-height:1.7;
}
img{display:block;max-width:100%}

/* ---------- 地图骨架：横向长卷 ---------- */
#map{display:flex;height:100vh;height:100dvh;width:max-content}
.panel{position:relative;flex:0 0 auto;height:100%;padding:12vh 5vw 18vh;overflow-y:auto;overflow-x:hidden}
#project-list{display:contents}

/* 面板地面（Mae 脚下的路，随地图滚动） */
.panel::after{content:"";position:absolute;bottom:0;left:0;width:100%;height:10vh}
.panel.paper::after,.panel.dawn::after{border-top:3px solid #2f2c2733}
.panel.night::after{background:#0b1026;border-top:3px solid #16233f}

/* ---------- 第一段：夜晚森林 ---------- */
#hero{width:2400px;padding:0;overflow:hidden;background:linear-gradient(#0b1129 30%,var(--night2))}
.moon{position:absolute;top:8vh;left:55%;width:86px;height:86px;border-radius:50%;background:radial-gradient(circle at 36% 34%,#fff8e2,#f5d67a 58%,#e0ad4e);box-shadow:0 0 70px 22px #f5d67a40}
.stars i{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;animation:twinkle 3s infinite}
@keyframes twinkle{0%,100%{opacity:.15}50%{opacity:.95}}
.hills{position:absolute;left:0;bottom:10vh;width:100%;height:20vh}
.hills::before,.hills::after{content:"";position:absolute;bottom:0;border-radius:50% 50% 0 0}
.hills::before{left:-6%;width:55%;height:100%;background:#121a3d}
.hills::after{right:-8%;width:60%;height:72%;background:#0e1533}
.ground{position:absolute;bottom:0;left:0;width:100%;height:10vh;background:#0b1026;border-top:3px solid #16233f}
.ground::before{content:"";position:absolute;top:-3px;left:0;width:100%;height:12px;background:repeating-linear-gradient(90deg,transparent 0 22px,#16233f 22px 24px);opacity:.8}

/* 松树剪影 */
.tree{position:absolute;bottom:10vh;width:0;height:0;border-left:34px solid transparent;border-right:34px solid transparent;border-bottom:90px solid #0c1430}
.tree::before{content:"";position:absolute;left:-26px;top:26px;width:0;height:0;border-left:26px solid transparent;border-right:26px solid transparent;border-bottom:64px solid #0c1430}
.tree.t2{transform:scale(1.35)}
.tree.t3{transform:scale(.75)}

/* 可互动物件 */
.obj{position:absolute;bottom:10vh;cursor:pointer;z-index:2}
.obj.near::before{content:"点我";position:absolute;top:-30px;left:50%;transform:translateX(-50%);background:var(--accent);color:#3a2f10;font-size:12px;padding:2px 9px;border-radius:999px;white-space:nowrap;animation:bob .9s infinite alternate}
@keyframes bob{to{transform:translateX(-50%) translateY(-4px)}}

#obj-neon .sign{display:block;font-family:ui-monospace,Consolas,monospace;font-size:13px;letter-spacing:2px;padding:8px 14px;border:2px solid #3a4a7a;border-radius:8px;color:#3a4a7a;background:#0f1633;transition:all .4s}
#obj-neon .pole{display:block;width:4px;height:56px;background:#2a3a6a;margin:0 auto}
#obj-neon.lit .sign{color:var(--neon);border-color:var(--neon);text-shadow:0 0 8px var(--neon),0 0 22px var(--neon);box-shadow:0 0 22px #7ef0d450}

#obj-fire .logs{display:block;width:64px;height:10px;background:#5a3a26;border-radius:5px;position:relative}
#obj-fire .logs::before{content:"";position:absolute;inset:0;background:#6b4630;border-radius:5px;transform:rotate(14deg)}
#obj-fire .flames{display:none;position:absolute;bottom:8px;left:50%;width:0}
#obj-fire.lit .flames{display:block}
#obj-fire .flames i{position:absolute;bottom:0;left:-9px;width:18px;height:28px;background:radial-gradient(#ffe27a,#f2782e 72%,transparent);border-radius:50%/60% 60% 40% 40%;animation:flick .45s infinite alternate}
#obj-fire .flames i:nth-child(2){left:0;height:20px;animation-delay:.14s}
#obj-fire .flames i:nth-child(3){left:-18px;height:16px;animation-delay:.28s}
@keyframes flick{from{transform:scaleY(.82) translateY(2px)}to{transform:scaleY(1.12) translateY(-2px)}}

#obj-star .pond{display:block;width:112px;height:24px;border-radius:50%;background:#12294d;box-shadow:inset 0 0 14px #2a5a8a}
#obj-star .star-bit{position:absolute;top:-30px;left:44px;color:var(--star);font-size:22px;animation:twinkle 2.2s infinite}

#obj-door .frame{display:block;width:62px;height:108px;border:6px solid #b8933f;border-bottom:none;border-radius:8px 8px 0 0;background:radial-gradient(circle at 50% 80%,#ffe9b0,#e8b23f 70%,#c98f2e);box-shadow:0 0 30px #e8b23f55;animation:doorGlow 2.6s infinite}
@keyframes doorGlow{50%{box-shadow:0 0 48px #e8b23f99}}

.firefly{position:absolute;width:5px;height:5px;border-radius:50%;background:#ffe27a;box-shadow:0 0 8px 3px #ffe27a77;animation:fly 7s infinite}
@keyframes fly{0%{transform:translate(0,0);opacity:0}15%{opacity:1}50%{transform:translate(14px,-32px)}100%{transform:translate(-10px,-68px);opacity:0}}

.shooting{position:absolute;left:-140px;width:130px;height:2px;background:linear-gradient(90deg,transparent,#fff);transform:rotate(-18deg);animation:shoot 1.1s ease-out forwards;z-index:2}
@keyframes shoot{to{left:110%;opacity:0}}

.hero-title{position:absolute;top:15vh;left:8vw;z-index:4;transition:opacity .8s;pointer-events:none}
.hero-title.dim{opacity:.12}
.hi{color:var(--star);letter-spacing:.35em;font-size:.95rem}
.hero-title h1{margin-top:10px;font-family:"Kaiti SC","KaiTi","STKaiti",serif;font-weight:700;font-size:clamp(2rem,5vw,3.4rem);color:#f2ecd9;letter-spacing:.06em}
.hero-title h1 em{font-style:normal;color:var(--accent)}
.hero-title .sub{margin-top:12px;color:#aeb9e6;font-size:.95rem;letter-spacing:.2em}

/* 黎明：夜到纸的过渡 */
.panel.dawn{width:42vw;min-width:280px;padding:0;background:linear-gradient(90deg,#141b3f,var(--paper))}

/* ---------- Mae（固定在屏幕上，随滚动奔跑） ---------- */
#mae{position:fixed;bottom:10vh;left:30vw;height:104px;z-index:30;pointer-events:none}
.mae-in{height:100%;transform-origin:50% 50%}
.mae-in img,.mae-in svg{height:100%;display:block}

#say{position:fixed;bottom:26vh;left:50%;transform:translateX(-50%);background:#fff;border:2px solid var(--ink);border-radius:14px;padding:9px 16px;font-size:14px;max-width:82vw;z-index:35;box-shadow:3px 3px 0 #00000022}
#say::after{content:"";position:absolute;left:50%;bottom:-9px;width:14px;height:14px;background:#fff;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translateX(-50%) rotate(45deg)}

#game-help{position:fixed;top:14px;left:16px;color:#8ea0d8;font-size:13px;z-index:35}

/* ---------- 导航 ---------- */
#nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);display:flex;gap:4px;padding:6px 10px;border-radius:999px;background:#f6f1e7ee;box-shadow:0 4px 18px #00000022;opacity:0;pointer-events:none;transition:opacity .4s;z-index:40}
#nav.show{opacity:1;pointer-events:auto}
#nav a{padding:5px 14px;border-radius:999px;color:var(--ink);text-decoration:none;font-size:14px}
#nav a:hover{background:var(--accent)}

/* ---------- 纸张面板 ---------- */
.panel.paper{background:var(--paper)}
.panel.paper.alt{background:#fbf7ee}
.sec-title{font-family:"Kaiti SC","KaiTi","STKaiti",serif;font-size:1.7rem;letter-spacing:.1em;display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.sec-title::after{content:"";width:120px;height:3px;background:repeating-linear-gradient(90deg,var(--ink) 0 10px,transparent 10px 16px);opacity:.35;border-radius:2px}
.sec-title.light{color:#f2ecd9}
.sec-title.light::after{background:repeating-linear-gradient(90deg,#f2ecd9 0 10px,transparent 10px 16px)}

/* 项目面板：纵向居中，图片横向排开 */
.panel.proj{display:flex;flex-direction:column;justify-content:center;padding-top:8vh}
.proj header{display:flex;gap:18px;align-items:baseline}
.proj .num{font-family:"Kaiti SC","KaiTi",serif;font-size:2.6rem;color:var(--accent);text-shadow:2px 2px 0 var(--ink)}
.proj h3{font-family:"Kaiti SC","KaiTi",serif;font-size:1.45rem;letter-spacing:.06em}
.proj .sub{color:#7a7466;font-size:.92rem;margin-top:2px}
.bubble{position:relative;background:#fff;border:2px solid var(--ink);border-radius:14px;padding:16px 20px;margin:24px 0 20px;max-width:560px;box-shadow:4px 4px 0 #00000018}
.bubble b{position:absolute;top:-13px;left:18px;background:var(--accent);color:#3a2f10;font-size:12px;padding:2px 12px;border-radius:999px;letter-spacing:.1em}
.bubble::after{content:"";position:absolute;left:36px;bottom:-10px;width:16px;height:16px;background:#fff;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg)}
.shots{display:flex;gap:22px}
.shots figure{flex:0 0 auto;width:min(560px,78vw);background:#fff;padding:10px;box-shadow:0 6px 20px #0000001c;transition:transform .3s}
.collage{display:flex;gap:22px}
.collage figure{flex:0 0 auto;width:min(500px,78vw);background:#fff;padding:10px;box-shadow:0 6px 20px #0000001c;transition:transform .3s}
.shots figure:nth-child(odd),.collage figure:nth-child(odd){transform:rotate(-.8deg)}
.shots figure:nth-child(even),.collage figure:nth-child(even){transform:rotate(.7deg)}
.shots figure:hover,.collage figure:hover{transform:rotate(0) translateY(-5px)}
.shots img,.collage img{width:100%;cursor:zoom-in}
.collage{margin-top:8px}
.collage figcaption{padding:8px 4px 2px;font-size:.85rem;color:#7a7466;letter-spacing:.08em}

/* ---------- 夜晚面板：便签墙 ---------- */
.panel.night{background:linear-gradient(#141b3f,#1d2650);color:#e8e4d6}
#board{width:100vw;display:flex;flex-direction:column;justify-content:center}
#notes-wall{display:flex;flex-wrap:wrap;gap:20px;margin:26px 0 34px}
.note{width:230px;padding:16px 16px 12px;color:#3a352c;border-radius:3px;box-shadow:0 6px 16px #00000040}
.note:nth-child(3n+1){transform:rotate(-2deg)}
.note:nth-child(3n+2){transform:rotate(1.4deg)}
.note:nth-child(3n){transform:rotate(-.6deg)}
.note.y{background:var(--note-y)} .note.b{background:var(--note-b)}
.note.g{background:var(--note-g)} .note.o{background:var(--note-o)}
.note p{font-size:.95rem;line-height:1.6}
.note span{display:block;margin-top:10px;text-align:right;font-size:.78rem;color:#00000077}
#note-form{max-width:440px;display:flex;flex-direction:column;gap:12px}
#note-form input,#note-form textarea{font:inherit;padding:10px 14px;border:2px solid #f6f1e733;border-radius:10px;background:#f6f1e714;color:#f6f1e7;outline:none}
#note-form input::placeholder,#note-form textarea::placeholder{color:#f6f1e766}
#note-form input:focus,#note-form textarea:focus{border-color:var(--accent)}
#note-form button{font:inherit;font-size:1rem;padding:10px;border:none;border-radius:999px;background:var(--accent);color:#3a2f10;cursor:pointer;letter-spacing:.2em}
#note-form button:disabled{opacity:.6;cursor:default}
#note-form.off input,#note-form.off textarea,#note-form.off button{pointer-events:none;opacity:.45}
.form-tip{font-size:.8rem;color:#e8e4d688}
.form-off{font-size:.85rem;color:var(--star);margin-bottom:14px}
#board-toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%) translateY(20px);background:#fff;color:var(--ink);padding:10px 22px;border-radius:999px;box-shadow:0 8px 24px #00000044;opacity:0;transition:all .35s;z-index:45;pointer-events:none}
#board-toast.show{opacity:1;transform:translateX(-50%)}

/* ---------- 关于 ---------- */
#about{width:100vw;display:flex;flex-direction:column;justify-content:center}
.about-wrap{display:flex;gap:56px;align-items:flex-start;flex-wrap:wrap}
.about-name{font-family:"Kaiti SC","KaiTi",serif;font-size:2.2rem;letter-spacing:.14em;margin-top:14px}
.about-tag{color:#7a7466;margin-top:6px;letter-spacing:.1em}
#skills{flex:1;min-width:280px;display:flex;flex-direction:column;gap:14px;padding-top:54px}
.skill{display:flex;align-items:center;gap:14px}
.skill span{width:96px;font-size:.92rem;letter-spacing:.04em}
.bar{flex:1;height:10px;background:#ddd5c2;border-radius:999px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--accent);border-radius:999px;transition:width 1.1s cubic-bezier(.2,.7,.2,1)}
.reveal.in .bar i{width:var(--w)}

/* ---------- 终点 ---------- */
#end{width:70vw;min-width:420px;display:flex;flex-direction:column;justify-content:center;font-size:.85rem;color:#e8e4d699;letter-spacing:.06em}
#end p+p{margin-top:6px}
.back-home{display:inline-block;margin-top:22px;color:var(--star);text-decoration:none;font-size:.9rem;letter-spacing:.1em}
.back-home:hover{text-decoration:underline}

/* ---------- 放大查看（修复：hidden 必须生效） ---------- */
#lightbox{position:fixed;inset:0;background:#0a0d1eee;display:flex;align-items:center;justify-content:center;z-index:50;cursor:zoom-out}
#lightbox[hidden]{display:none}
#lightbox img{max-width:94vw;max-height:92vh;box-shadow:0 10px 50px #00000088}

/* ---------- 滚动显现 ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- 移动端 ---------- */
@media (max-width:720px){
  .hero-title{left:6vw;top:12vh}
  #mae{height:82px;left:24vw}
  .panel{padding:9vh 6vw 18vh}
  .proj .num{font-size:2rem}
  .note{width:46%;min-width:170px}
  #skills{padding-top:10px}
}

/* ---------- 猫爪光标 ---------- */
body{cursor:none}
input,textarea{cursor:text}
#paw{position:fixed;left:0;top:0;width:34px;height:34px;background:url(../assets/paw.svg) no-repeat center/contain;z-index:60;pointer-events:none}
@media (hover:none){#paw{display:none}body{cursor:auto}}
.mae-mood{position:fixed;width:72px;height:72px;z-index:61;pointer-events:none;animation:moodPop 1.3s forwards}
@keyframes moodPop{0%{opacity:0;transform:translateY(8px) scale(.6)}18%{opacity:1;transform:none}70%{opacity:1}100%{opacity:0;transform:translateY(-10px) scale(.92)}}

/* ---------- 迷你地图（屏幕底部的旅程进度） ---------- */
#minimap{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);width:min(420px,56vw);height:8px;display:flex;border-radius:99px;z-index:34;box-shadow:0 1px 6px #00000033}
#minimap .seg{height:100%}
#minimap .seg:first-child{border-radius:99px 0 0 99px}
#minimap .seg:last-child{border-radius:0 99px 99px 0}
#minimap .seg.night{background:#232a52}
#minimap .seg.paper{background:#e6ddc9}
#minimap .seg.dawn{background:#9aa1c4}
#minimap img{position:absolute;top:-9px;width:26px;height:26px;transform:translateX(-50%)}

/* ---------- 自定义字体：标题优先使用 ---------- */
.sec-title,.hero-title h1,.proj h3,.proj .num,.about-name,.hi,#nav a{
  font-family:'HYG',"Kaiti SC","KaiTi","STKaiti",serif;
}