/* ============================================
   高三九班 · 回忆录
   ============================================ */

:root{
  --paper:      #f7f2e8;
  --paper-2:    #efe7d7;
  --card:       #fffdf7;
  --ink:        #1f1c18;
  --ink-soft:   #4a453c;
  --muted:      #8b8377;
  --line:       rgba(31,28,24,.12);
  --line-soft:  rgba(31,28,24,.07);
  --board:      #2c433c;
  --board-2:    #22352f;
  --chalk:      #e9e4d6;
  --accent:     #b4553a;
  --accent-2:   #c67a4e;

  --serif: "Songti SC","STSong","Source Han Serif SC","Noto Serif CJK SC",SimSun,"Times New Roman",serif;
  --sans:  "PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  --kai:   "Kaiti SC","STKaiti",KaiTi,"FangSong",STFangsong,serif;

  --ease: cubic-bezier(.2,.8,.2,1);
}

*,*::before,*::after{box-sizing:border-box;}

/* [hidden] 兜底：.lightbox / .modal 自己写了 display:grid，会盖过浏览器默认的
   [hidden]{display:none}（作者样式优先于 UA 样式），导致隐藏的遮罩层依然铺满
   整屏、吃掉所有点击。必须用 !important 兜住。 */
[hidden]{display:none !important;}

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

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  /* 安卓部分浏览器点按高亮一块灰，很难看 */
  -webkit-tap-highlight-color:transparent;
}

img{max-width:100%;}
a{color:inherit;}
button,input,textarea{font-family:inherit;font-size:inherit;color:inherit;}
button{cursor:pointer;background:none;border:0;padding:0;}
::selection{background:rgba(180,85,58,.18);}

/* 纸纹 ------------------------------------------------------ */
.grain{
  position:fixed; top:0; right:0; bottom:0; left:0; z-index:80; pointer-events:none;
  opacity:.42; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E");
}

.progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:70;
  background:transparent;
}
.progress i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transition:width .12s linear;
}

/* 导航 ------------------------------------------------------ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  height:58px; padding:0 clamp(16px,4vw,34px);
  background:rgba(247,242,232,.84);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-soft);
  opacity:0; transform:translateY(-10px); pointer-events:none;
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.nav.show{opacity:1; transform:none; pointer-events:auto;}
.nav-brand{
  font-family:var(--serif); font-size:15px; letter-spacing:.24em;
  text-decoration:none; color:var(--ink);
}
.nav-links{display:flex; align-items:center; gap:clamp(4px,1.4vw,14px);}
.nav-links a{
  position:relative;
  font-size:12.5px; letter-spacing:.12em; text-decoration:none;
  color:var(--muted); padding:6px 6px; transition:color .25s;
}
.nav-links a:hover{color:var(--ink);}
.nav-links a.cur{color:var(--accent);}
.nav-links a.cur:not(.nav-cta)::after{
  content:""; position:absolute; left:6px; right:6px; bottom:1px;
  height:1px; background:var(--accent); opacity:.6;
}
.nav-links .nav-cta{
  color:var(--ink); border:1px solid var(--line); border-radius:999px;
  padding:6px 14px; margin-left:4px; transition:background .25s,color .25s;
}
.nav-links .nav-cta:hover{background:var(--ink); color:var(--paper);}

/* 封面 ------------------------------------------------------ */
.hero{
  position:relative;
  min-height:100vh;      /* 老安卓不认 svh，先给 vh 兜底 */
  min-height:100svh;
  display:grid; place-items:center; overflow:hidden;
  color:#f4efe2; isolation:isolate;
}
.hero-bg{
  position:absolute; top:-7%; right:-7%; bottom:-7%; left:-7%; z-index:-2;
  background:url("assets/img/board-front.jpg") center 45%/cover no-repeat;
  filter:brightness(.6) saturate(.72) contrast(1.03);
  transform:scale(1.04);
  animation:drift 34s ease-in-out infinite alternate;
}
@keyframes drift{
  from{transform:scale(1.04) translate3d(0,0,0);}
  to  {transform:scale(1.12) translate3d(-1.2%,-1.4%,0);}
}
.hero-veil{
  position:absolute; top:0; right:0; bottom:0; left:0; z-index:-1;
  background:
    radial-gradient(72% 62% at 50% 44%, rgba(18,22,18,.04), rgba(12,14,12,.56) 78%),
    linear-gradient(to bottom, rgba(12,14,12,.40) 0%, rgba(12,14,12,.02) 24%, rgba(247,242,232,0) 76%, var(--paper) 99%);
}
.hero-inner{position:relative; text-align:center; padding:0 24px 6vh;}
.hero-kicker{
  margin:0 0 clamp(26px,5vh,44px); font-size:11.5px; letter-spacing:.62em; text-indent:.62em;
  color:rgba(244,239,226,.82);
}
.hero-title{margin:0; font-family:var(--serif); font-weight:500; line-height:1.02;}
.hero-main{
  display:block;
  font-size:clamp(46px,10.6vw,112px);
  letter-spacing:.1em; text-indent:.1em;
  text-shadow:0 2px 40px rgba(0,0,0,.42);
}
.hero-under{
  display:block; font-family:var(--kai); font-weight:400;
  font-size:clamp(18px,3.3vw,34px); line-height:1.2;
  letter-spacing:.46em; text-indent:.46em;
  color:rgba(244,239,226,.84);
  margin-top:clamp(18px,3.4vh,32px);
  text-shadow:0 1px 18px rgba(0,0,0,.5);
}
.scroll-cue{
  position:absolute; bottom:30px; left:50%; margin-left:0;
  transform:translateX(-50%);
  display:grid; justify-items:center; gap:10px;
  font-size:10.5px; letter-spacing:.34em; color:rgba(244,239,226,.6);
}
/* 横屏 / 矮屏：封面收紧，别和副标题撞上 */
@media (max-height:560px){
  .hero-inner{padding-bottom:0;}
  .hero-kicker{margin-bottom:clamp(10px,2.2vh,18px);}
  .hero-main{font-size:clamp(38px,8vw,76px);}
  .hero-under{margin-top:clamp(8px,2.2vh,16px); font-size:clamp(15px,2.6vw,24px);}
  .scroll-cue{display:none;}
}
.scroll-cue i{
  width:1px; height:46px; background:linear-gradient(to bottom,rgba(244,239,226,.55),transparent);
  position:relative; overflow:hidden;
}
.scroll-cue i::after{
  content:""; position:absolute; top:-50%; left:0; width:1px; height:50%;
  background:rgba(244,239,226,.95);
  animation:cue 2.4s var(--ease) infinite;
}
@keyframes cue{ 0%{top:-50%;} 60%,100%{top:100%;} }

/* 章节通用 -------------------------------------------------- */
.chapter{position:relative; padding:clamp(64px,11vh,126px) 0; scroll-margin-top:58px;}
.ending{scroll-margin-top:58px;}
.wrap{
  width:calc(100% - 44px); max-width:760px;
  margin-left:auto; margin-right:auto; position:relative;
}

.ghost-num{
  position:absolute; top:-.06em; right:0; z-index:0;
  font-family:var(--serif); font-size:clamp(120px,24vw,300px);
  line-height:.78; color:rgba(44,67,60,.055);
  pointer-events:none; user-select:none;
}

.ch-head{position:relative; margin-bottom:clamp(28px,4vh,44px);}
.ch-label{
  display:inline-flex; align-items:center; gap:12px;
  font-size:11.5px; letter-spacing:.34em; color:var(--accent);
  margin-bottom:14px;
}
.ch-label::after{
  content:""; width:44px; height:1px; background:rgba(180,85,58,.35);
}
.ch-head h2{
  margin:0; font-family:var(--serif); font-weight:500;
  font-size:clamp(28px,4.4vw,42px); line-height:1.25; letter-spacing:.03em;
}

.ch-text{
  position:relative; margin:0 0 18px; max-width:640px;
  font-size:clamp(15px,1.9vw,17px); line-height:2.1; color:var(--ink-soft);
  text-align:justify;
}
.ch-text--small{font-size:14.5px; color:var(--muted); margin-top:26px;}
.note{
  margin:30px 0 0; max-width:560px; font-size:13.5px; line-height:2;
  color:var(--muted); padding-left:16px; border-left:2px solid rgba(180,85,58,.25);
}
.hint{margin:22px 0 0; font-size:12px; letter-spacing:.16em; color:var(--muted); text-align:center;}

/* 序 · 请假条 ------------------------------------------------ */
.letter{
  position:relative; max-width:560px; margin-top:8px;
  padding:clamp(28px,4vw,42px) clamp(24px,4vw,40px) clamp(26px,4vw,38px);
  background:
    repeating-linear-gradient(to bottom, transparent 0 43px, rgba(31,28,24,.045) 43px 44px),
    var(--card);
  border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(31,28,24,.05), 0 26px 50px -34px rgba(31,28,24,.4);
  font-family:var(--kai);
  font-size:clamp(17px,2.4vw,21px);
  line-height:44px;
}
.letter-body p{margin:0;}
.letter .indent{text-indent:2em;}
.letter .sign{text-align:right; margin-top:6px; font-size:.86em; color:var(--ink-soft);}
.letter em{
  font-style:normal; position:relative; color:var(--accent);
  padding:0 .12em;
}
.letter em::after{
  content:""; position:absolute; left:0; right:0; bottom:6px; height:6px;
  background:rgba(180,85,58,.16); z-index:-1;
  transition:opacity .4s;
}
.letter.typing em::after{opacity:0;}

.type-line{opacity:1;}
.type-line .c{opacity:0; transition:opacity .1s linear;}
.type-line .c.on{opacity:1;}
.letter.typing .sign{visibility:hidden;}

.seal{
  position:relative; margin:26px 0 0 auto; width:96px; height:96px;
  display:grid; align-content:center; justify-items:center;
  gap:1px; border:2.5px solid var(--accent); border-radius:3px; color:var(--accent);
  font-family:var(--kai); line-height:1.15; opacity:0;
  transform:scale(1.7) rotate(-4deg);
  box-shadow:inset 0 0 0 3px rgba(180,85,58,.1);
  mix-blend-mode:multiply;
}
.seal::before{
  content:""; position:absolute; top:3px; right:3px; bottom:3px; left:3px; border:1px solid rgba(180,85,58,.45); border-radius:2px;
}
.seal.stamped{
  opacity:.88;
  transform:scale(1) rotate(-7deg);
  transition:transform .5s cubic-bezier(.2,1.5,.4,1), opacity .35s ease;
}
.seal-main{font-size:26px; letter-spacing:.12em; text-indent:.12em;}
.seal-sub{font-size:9.5px; letter-spacing:.06em; opacity:.9;}

/* 照片 ------------------------------------------------------ */
.photo{margin:34px 0 0; position:relative;}
.photo img{
  display:block; width:100%; height:auto; border-radius:2px;
  box-shadow:0 1px 2px rgba(31,28,24,.07), 0 20px 44px -30px rgba(31,28,24,.55);
  transition:transform .9s var(--ease), filter .6s;
  background:var(--paper-2);
}
/* 通栏：不用 transform 居中，避免和 .reveal 的 transform 打架，
   也不用 translate 属性（老安卓核心里没有） */
.photo--wide{
  width:1040px; max-width:calc(100vw - 32px);
  margin-left:calc(50% - 520px);
}
@media (max-width:1070px){
  .photo--wide{
    width:calc(100vw - 32px);
    margin-left:calc((100% - (100vw - 32px)) / 2);
  }
}
.photo--offset{margin-top:clamp(46px,7vh,80px);}
.photo--portrait{width:min(660px,100%); margin-inline:auto;}
.photo figcaption{
  margin-top:12px; font-size:12.5px; color:var(--muted);
  letter-spacing:.04em; display:flex; gap:8px; align-items:baseline;
}
.photo figcaption::before{
  content:""; width:14px; height:1px; background:var(--muted); opacity:.5;
  flex:0 0 auto; transform:translateY(-3px);
}
.zoomable{cursor:zoom-in;}
@media (hover:hover){
  .zoomable:hover img{transform:scale(1.008); filter:saturate(1.06);}
}

.photo-pair{display:none;}

/* 主图 + 一张贴上去的小照片 */
.photo-stack{position:relative; margin:34px 0 clamp(64px,8vw,92px);}
.photo-stack .main{margin:0;}
.photo-stack--portrait .main{width:min(620px,100%); margin-inline:auto;}
.photo-stack .aside{
  position:absolute; right:0; bottom:-52px; width:min(30%,208px);
  margin:0; padding:7px 7px 24px; background:#fffdf7; z-index:2;
  box-shadow:0 2px 4px rgba(31,28,24,.08), 0 24px 40px -22px rgba(31,28,24,.62);
  transform:rotate(2.6deg);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.photo-stack .aside img{box-shadow:none; border-radius:0; display:block;}
.photo-stack .aside figcaption{
  position:absolute; left:6px; right:6px; bottom:4px; margin:0;
  font-size:10.5px; color:#9a9184; letter-spacing:.02em;
  justify-content:center;
}
.photo-stack .aside figcaption::before{display:none;}
@media (hover:hover){
  .photo-stack .aside:hover{transform:rotate(0) translateY(-4px); box-shadow:0 2px 4px rgba(31,28,24,.08), 0 30px 48px -22px rgba(31,28,24,.7);}
}

/* 黑板大字 -------------------------------------------------- */
.board-type{
  position:relative; margin:clamp(20px,4vh,38px) 0 30px;
  padding:clamp(34px,6vw,62px) 20px;
  background:
    radial-gradient(120% 130% at 12% 0%, rgba(255,255,255,.05), transparent 55%),
    linear-gradient(160deg,var(--board),var(--board-2));
  border-radius:3px; text-align:center; color:var(--chalk);
  overflow:hidden;
  box-shadow:0 24px 50px -34px rgba(34,53,47,.85), inset 0 0 90px rgba(0,0,0,.22);
}
.board-type::after{
  content:""; position:absolute; top:0; right:0; bottom:0; left:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='4'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23c)' opacity='.35'/%3E%3C/svg%3E");
  opacity:.05; mix-blend-mode:screen;
}
.board-type p{margin:0; font-family:var(--serif); position:relative; z-index:1;}
.board-year{
  font-size:clamp(22px,4vw,34px); letter-spacing:.3em; opacity:.5;
  transform:rotate(-2.4deg); margin-bottom:-.2em !important;
}
.board-main{
  font-size:clamp(38px,9vw,78px); letter-spacing:.06em;
  text-shadow:0 0 1px rgba(233,228,214,.5), 0 0 22px rgba(233,228,214,.12);
  line-height:1.35;
}
.board-sub{
  font-size:clamp(13px,2.1vw,17px); letter-spacing:.22em; text-indent:.22em;
  opacity:.72;
}
.board-sub:first-child{margin-bottom:10px;}

/* 视频 ------------------------------------------------------ */
.film{
  position:relative; margin:34px 0 0; border-radius:3px; overflow:hidden;
  background:#14170f;
  width:1040px; max-width:calc(100vw - 32px);
  margin-left:calc(50% - 520px);
  /* 不依赖 aspect-ratio：高 = 宽 × 9/16，老浏览器也准 */
  height:calc((100vw - 32px) * 0.5625); max-height:585px;
  box-shadow:0 1px 2px rgba(31,28,24,.1), 0 26px 54px -34px rgba(31,28,24,.6);
}
@media (max-width:1070px){
  .film{
    width:calc(100vw - 32px);
    margin-left:calc((100% - (100vw - 32px)) / 2);
  }
}
.film-video{display:block; width:100%; height:100%; object-fit:contain; background:#0e100c;}
.film-play{
  position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; z-index:2;
  width:max-content; height:max-content;
  display:flex; align-items:center; gap:10px;
  padding:14px 24px 14px 18px; border-radius:999px;
  color:#f4efe2; background:rgba(18,22,17,.5);
  border:1px solid rgba(244,239,226,.4);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  font-size:13px; letter-spacing:.16em;
  transition:transform .35s var(--ease), background .35s, opacity .3s;
}
.film-play svg{width:20px; height:20px;}
.film-play:hover{transform:scale(1.04); background:rgba(18,22,17,.7);}
.film.playing .film-play{opacity:0; pointer-events:none; transform:scale(.9);}
.film-meta{
  position:absolute; right:16px; bottom:12px; z-index:1;
  font-size:10.5px; letter-spacing:.2em; color:rgba(244,239,226,.62);
  text-shadow:0 1px 6px rgba(0,0,0,.6);
  transition:opacity .4s;
}
.film.playing .film-meta{opacity:0;}

/* 胶片带 ---------------------------------------------------- */
.chapter--strip{padding-bottom:clamp(40px,7vh,70px);}
.strip{
  display:flex; gap:14px; align-items:flex-start;
  overflow-x:auto; scroll-snap-type:x proximity;
  touch-action:auto; overscroll-behavior-x:contain;
  padding:26px max(22px,calc(50vw - 520px)) 14px;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.strip::-webkit-scrollbar{display:none;}
.strip-item{
  position:relative; margin:0; flex:0 0 auto; scroll-snap-align:center;
  cursor:zoom-in;
}
.strip-item img{
  display:block; height:clamp(150px,20vw,224px); width:auto;
  filter:grayscale(.18) contrast(1.03);
  transition:filter .5s var(--ease), transform .5s var(--ease);
  border-radius:2px;
  box-shadow:0 14px 30px -22px rgba(31,28,24,.6);
}
.strip-item:hover img{filter:none; transform:translateY(-3px);}
.strip-item span{
  position:absolute; left:8px; bottom:8px; font-size:10px; letter-spacing:.16em;
  color:rgba(255,255,255,.9); text-shadow:0 1px 6px rgba(0,0,0,.7);
}
.strip-hint{
  margin:4px 0 0; padding-left:max(22px,calc(50vw - 520px));
  font-size:11px; letter-spacing:.2em; color:#b3aa9c;
}

/* 记忆墙 ---------------------------------------------------- */
.wall{background:linear-gradient(to bottom, transparent, rgba(239,231,215,.55) 12%, rgba(239,231,215,.55) 88%, transparent);}

.wall-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin:34px 0 16px;
}
.me{display:flex; align-items:center; gap:11px;}
.avatar{
  width:40px; height:40px; border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center;
  background:hsl(var(--h,38) 34% 84%);
  color:hsl(var(--h,38) 34% 26%);
  font-size:15px; font-weight:600; letter-spacing:0;
  font-family:var(--sans);
}
.me-info{display:grid; line-height:1.35;}
.me-info strong{font-size:14px; font-weight:600;}
.link-btn{
  font-size:12px; color:var(--muted); text-decoration:underline;
  text-underline-offset:3px; text-decoration-color:rgba(139,131,119,.4);
  text-align:left; width:max-content;
}
.link-btn:hover{color:var(--accent);}

.wall-tabs{display:flex; gap:4px; background:rgba(31,28,24,.05); border-radius:999px; padding:3px;}
.wall-tabs button{
  font-size:12.5px; padding:6px 14px; border-radius:999px; color:var(--muted);
  transition:background .25s, color .25s;
}
.wall-tabs button.on{background:var(--card); color:var(--ink); box-shadow:0 1px 3px rgba(31,28,24,.1);}

.composer{
  background:var(--card); border:1px solid var(--line); border-radius:7px;
  padding:16px 16px 12px;
  box-shadow:0 1px 2px rgba(31,28,24,.04), 0 18px 40px -34px rgba(31,28,24,.45);
}
.composer textarea{
  width:100%; border:0; outline:none; background:transparent; resize:vertical;
  font-size:15.5px; line-height:1.95; min-height:88px; padding:4px 2px;
  font-family:var(--sans);
}
.composer textarea::placeholder{color:#b3aa9c;}
.attach-row{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding-top:12px; border-top:1px dashed var(--line);
}
.chip{
  font-size:12.5px; padding:6px 12px; border-radius:999px;
  border:1px solid var(--line); color:var(--ink-soft);
  transition:background .2s, border-color .2s;
}
.chip:hover{background:rgba(31,28,24,.045); border-color:rgba(31,28,24,.2);}

.switch{display:flex; align-items:center; gap:8px; margin-left:auto; cursor:pointer; font-size:12.5px; color:var(--ink-soft);}
.switch input{position:absolute; opacity:0; width:0; height:0;}
.switch-track{
  width:36px; height:21px; border-radius:999px; background:rgba(31,28,24,.16);
  position:relative; transition:background .28s; flex:0 0 auto;
}
.switch-track i{
  position:absolute; top:3px; left:3px; width:15px; height:15px; border-radius:50%;
  background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2); transition:transform .28s var(--ease);
}
.switch input:checked + .switch-track{background:var(--board);}
.switch input:checked + .switch-track i{transform:translateX(15px);}
.switch input:focus-visible + .switch-track{outline:2px solid var(--accent); outline-offset:2px;}

.attach-preview{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;}
.attach-preview:empty{display:none;}
.thumb{
  position:relative; width:74px; height:74px; border-radius:4px; overflow:hidden;
  border:1px solid var(--line); background:var(--paper-2);
}
.thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.thumb button{
  position:absolute; top:2px; right:2px; width:18px; height:18px; border-radius:50%;
  background:rgba(20,18,16,.72); color:#fff; font-size:12px; line-height:1;
  display:grid; place-items:center;
}
.attach-tag{
  display:inline-flex; align-items:center; gap:8px; max-width:100%;
  font-size:12px; padding:6px 8px 6px 11px; border-radius:4px;
  background:rgba(31,28,24,.05); color:var(--ink-soft);
}
.attach-tag span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:200px;}
.attach-tag button{color:var(--muted); font-size:14px; line-height:1;}
.attach-tag button:hover{color:var(--accent);}

.composer-foot{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:12px;}
.composer-tip{font-size:11.5px; color:var(--muted); line-height:1.5;}
.btn-send{
  flex:0 0 auto; background:var(--ink); color:var(--paper);
  padding:10px 20px; border-radius:999px; font-size:13.5px; letter-spacing:.06em;
  transition:transform .25s var(--ease), opacity .25s, background .25s;
}
.btn-send:hover{transform:translateY(-1px); background:#332e27;}
.btn-send:disabled{opacity:.5; transform:none; cursor:default;}

.wall-stats{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:26px 0 14px; font-size:12.5px; color:var(--muted); flex-wrap:wrap;
}
.wall-stats b{color:var(--ink); font-size:15px; font-weight:600; font-variant-numeric:tabular-nums;}

.wall-list{column-count:1; column-gap:16px;}
@media (min-width:880px){ .wall-list{column-count:2;} }

.card{
  background:var(--card); border:1px solid var(--line-soft); border-radius:7px;
  padding:16px 17px 13px; position:relative; margin:0 0 16px;
  break-inside:avoid; -webkit-column-break-inside:avoid;
  box-shadow:0 1px 2px rgba(31,28,24,.03);
  transition:box-shadow .35s var(--ease), transform .35s var(--ease), border-color .35s;
}
.card:hover{box-shadow:0 16px 34px -26px rgba(31,28,24,.5); border-color:var(--line);}
.card.fresh{animation:pop .5s var(--ease);}
@keyframes pop{ from{opacity:0; transform:translateY(10px) scale(.99);} to{opacity:1; transform:none;} }

.card-head{display:flex; align-items:center; gap:10px;}
.card-head .avatar{width:32px; height:32px; font-size:13px;}
.card-name{font-size:13.5px; font-weight:600;}
.card-name.anon{color:var(--muted); font-weight:500;}
.card-pin{
  font-size:10px; letter-spacing:.1em; color:var(--accent); line-height:1.6;
  border:1px solid rgba(180,85,58,.34); border-radius:3px; padding:0 5px;
  white-space:nowrap; flex:0 0 auto;
}
.card-time{font-size:11px; color:#a99f90; margin-left:auto; white-space:nowrap; letter-spacing:.04em;}
.card-body{
  margin:11px 0 0; font-size:14.8px; line-height:1.95; color:#2b2621;
  white-space:pre-wrap; overflow-wrap:anywhere;
}
.card-media{display:grid; gap:5px; margin-top:12px;}
.card-media.multi{grid-template-columns:1fr 1fr;}
.card-media img{
  width:100%; height:auto; object-fit:cover; border-radius:3px; display:block;
  aspect-ratio:1/1; cursor:zoom-in; background:var(--paper-2);
}
.card-media.single img{aspect-ratio:4/3;}
.card-media.multi > img:first-child:nth-last-child(3){grid-column:span 2; aspect-ratio:2/1;}

.card-embed{margin-top:12px; border:1px solid var(--line-soft); border-radius:4px; overflow:hidden;}
.card-embed iframe,.card-embed video{display:block; width:100%; height:210px; border:0; background:#0e100c;}
@supports (aspect-ratio:16/9){
  .card-embed iframe,.card-embed video{height:auto; aspect-ratio:16/9;}
}

.card-link{
  display:flex; gap:10px; align-items:center; margin-top:12px;
  border:1px solid var(--line-soft); border-radius:4px; padding:10px 12px;
  text-decoration:none; transition:background .25s, border-color .25s;
}
.card-link:hover{background:rgba(31,28,24,.03); border-color:var(--line);}
.card-link .dot{width:6px; height:6px; border-radius:50%; background:var(--accent); flex:0 0 auto;}
.card-link .lk{min-width:0; display:grid; line-height:1.4;}
.card-link .lk b{font-size:12.5px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.card-link .lk span{font-size:11px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

.card-foot{display:flex; align-items:center; gap:14px; margin-top:11px;}
.like-btn{
  display:inline-flex; align-items:center; gap:5px;
  font-size:12px; color:var(--muted); transition:color .2s;
}
.like-btn svg{width:14px; height:14px; transition:transform .3s var(--ease);}
.like-btn:hover{color:var(--accent);}
.like-btn.on{color:var(--accent);}
.like-btn.on svg{transform:scale(1.12);}
.del-btn{margin-left:auto; font-size:11.5px; color:#b5ab9c; transition:color .2s;}
.del-btn:hover{color:var(--accent);}

.wall-empty{
  margin-top:18px; padding:52px 20px; text-align:center;
  border:1px dashed rgba(31,28,24,.18); border-radius:7px; color:var(--muted);
}
.wall-empty p{margin:0 0 6px; font-family:var(--serif); font-size:18px; color:var(--ink-soft);}
.wall-empty span{font-size:12.5px; letter-spacing:.1em;}
.wall-more{text-align:center; margin-top:22px;}
.btn-ghost{
  border:1px solid var(--line); border-radius:999px; padding:9px 20px;
  font-size:13px; color:var(--ink-soft); transition:background .25s;
}
.btn-ghost:hover{background:rgba(31,28,24,.045);}

/* 尾声 ------------------------------------------------------ */
.ending{
  position:relative; margin-top:clamp(50px,9vh,100px);
  padding:clamp(90px,18vh,180px) 24px;
  background:
    radial-gradient(90% 120% at 50% 0%, rgba(255,255,255,.055), transparent 60%),
    linear-gradient(180deg,var(--board),#1c2c27);
  color:var(--chalk); text-align:center; overflow:hidden;
}
.ending::after{
  content:""; position:absolute; top:0; right:0; bottom:0; left:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='4'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23c)' opacity='.4'/%3E%3C/svg%3E");
  opacity:.05; mix-blend-mode:screen;
}
.ending-inner{position:relative; z-index:1;}
.ending-small{
  margin:0 0 8px; font-size:clamp(13px,1.9vw,15px); letter-spacing:.1em;
  color:rgba(233,228,214,.62);
}
.ending-big{
  margin:clamp(34px,6vh,52px) 0 0;
  font-family:var(--serif); font-weight:500;
  font-size:clamp(30px,6.4vw,62px); letter-spacing:.1em; text-indent:.1em;
  text-shadow:0 0 1px rgba(233,228,214,.45), 0 0 30px rgba(233,228,214,.1);
}
.ending-meta{
  margin:26px 0 0; font-size:11.5px; letter-spacing:.34em;
  color:rgba(233,228,214,.45);
}

.foot{
  padding:44px 24px 54px; text-align:center;
  background:var(--paper); border-top:1px solid var(--line-soft);
  font-size:12.5px; color:var(--muted); line-height:2;
}
.foot p{margin:0;}
.foot-dim{font-size:11.5px; color:#a99f90; letter-spacing:.08em;}
.foot-top{
  display:inline-block; margin-top:16px; font-size:12px; letter-spacing:.16em;
  color:var(--ink-soft); text-decoration:none;
  border-bottom:1px solid var(--line); padding-bottom:2px;
}
.foot-top:hover{color:var(--accent); border-color:var(--accent);}

/* BGM ------------------------------------------------------- */
.bgm{
  position:fixed; right:16px; bottom:16px; z-index:65;
  bottom:calc(16px + env(safe-area-inset-bottom,0px));
  display:flex; align-items:center; gap:9px;
  padding:7px 15px 7px 7px; border-radius:999px;
  background:rgba(255,253,247,.9);
  border:1px solid var(--line);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 6px 22px -12px rgba(31,28,24,.5);
  transition:transform .3s var(--ease), box-shadow .3s;
  -webkit-user-select:none; user-select:none;
  touch-action:manipulation;
}
.bgm:hover{transform:translateY(-2px);}
.bgm:active{transform:scale(.96);}
.bgm-disc{
  width:26px; height:26px; border-radius:50%; flex:0 0 auto;
  background:
    radial-gradient(circle at 50% 50%, #f7f2e8 0 3.2px, transparent 3.4px),
    radial-gradient(circle at 50% 50%, #2f2a24 0 100%);
  display:grid; place-items:center; position:relative;
}
.bgm-disc i{
  position:absolute; top:0; right:0; bottom:0; left:0; border-radius:50%;
  background:conic-gradient(from 0deg, rgba(255,255,255,.16), transparent 22%, transparent 50%, rgba(255,255,255,.1) 62%, transparent 80%);
}
.bgm.playing .bgm-disc{animation:spin 5.5s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.bgm-text{
  font-size:11.5px; letter-spacing:.14em; color:var(--ink-soft);
  min-width:2.6em; text-align:center;
}
.bgm.playing .bgm-text{color:var(--accent);}
/* 还没放的时候，唱片轻轻晃两下，提示这儿能点 */
.bgm.hint .bgm-disc{animation:bgmhint 2.8s ease-in-out infinite;}
@keyframes bgmhint{
  0%,60%,100%{transform:rotate(0deg);}
  70%{transform:rotate(-10deg);}
  85%{transform:rotate(8deg);}
}

/* 灯箱 ------------------------------------------------------ */
.lightbox{
  position:fixed; top:0; right:0; bottom:0; left:0; z-index:200;
  background:rgba(12,13,11,.95);
  display:grid; place-items:center; padding:clamp(20px,5vw,56px);
  opacity:0; transition:opacity .3s ease;
}
.lightbox.open{opacity:1;}
.lightbox img{
  max-width:92vw; max-height:80vh; object-fit:contain;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.9);
  border-radius:2px;
}
.lb-close{
  position:absolute; top:14px; right:20px; font-size:34px; line-height:1;
  color:rgba(244,239,226,.7); padding:6px;
}
.lb-close:hover{color:#fff;}
.lb-cap{
  position:absolute; bottom:26px; left:0; right:0; text-align:center;
  margin:0; font-size:12.5px; letter-spacing:.1em; color:rgba(244,239,226,.62);
  padding:0 24px;
}

/* 弹窗 ------------------------------------------------------ */
.modal{
  position:fixed; top:var(--vvtop,0px); left:0; right:0; z-index:150;
  height:var(--vvh,100%);
  background:rgba(24,22,18,.42);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  display:flex; align-items:flex-start; justify-content:center;
  padding:20px; overflow-y:auto; -webkit-overflow-scrolling:touch;
  opacity:0; transition:opacity .25s ease;
}
.modal.open{opacity:1;}
.modal-card{
  margin:auto;                     /* 空间够就居中，不够就顶到头，能滚 */
  width:420px; max-width:100%; background:var(--card); border-radius:9px;
  padding:26px 24px 20px;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.6);
  transform:translateY(8px); transition:transform .3s var(--ease);
}
.modal.open .modal-card{transform:none;}
.modal-card h3{margin:0 0 8px; font-family:var(--serif); font-size:20px; font-weight:500; letter-spacing:.04em;}
.modal-desc{margin:0 0 4px; font-size:12.5px; line-height:1.8; color:var(--muted);}
.modal-card input{
  width:100%; margin:16px 0 0; padding:11px 13px;
  border:1px solid var(--line); border-radius:5px; background:#fff;
  font-size:15px; outline:none; transition:border-color .2s;
}
.modal-card input:focus{border-color:var(--accent);}
.modal-row{display:flex; gap:10px; justify-content:flex-end; margin-top:18px;}
.modal-anon{margin:16px auto 0; display:block;}
[data-close]{cursor:pointer;}

/* Toast ----------------------------------------------------- */
.toast{
  position:fixed; left:50%; bottom:76px;
  bottom:calc(76px + env(safe-area-inset-bottom,0px));
  transform:translate(-50%,14px); z-index:300;
  background:rgba(31,28,24,.94); color:var(--paper);
  padding:10px 18px; border-radius:999px; font-size:13px;
  opacity:0; pointer-events:none;
  transition:opacity .3s, transform .3s var(--ease);
  max-width:86vw; max-width:min(86vw,420px); text-align:center; line-height:1.5;
}
.toast.show{opacity:1; transform:translate(-50%,0);}

/* 滚动入场 -------------------------------------------------- */
.reveal{
  opacity:0; transform:translateY(20px);
  transition:opacity .95s var(--ease), transform .95s var(--ease);
  transition-delay:var(--d,0ms);
}
.reveal.in{opacity:1; transform:none;}

/* 响应式 ---------------------------------------------------- */
@media (max-width:720px){
  .nav-links a:not(.nav-cta){display:none;}
  .hero-bg{
    background-size:auto 132%; background-position:52% 56%;
    filter:brightness(.54) saturate(.66) contrast(1.05);
  }
  .hero-veil{
    background:
      radial-gradient(84% 56% at 50% 50%, rgba(16,20,16,.20), rgba(12,14,12,.62) 82%),
      linear-gradient(to bottom, rgba(12,14,12,.42) 0%, rgba(12,14,12,.04) 24%, rgba(247,242,232,0) 78%, var(--paper) 99%);
  }
  .ghost-num{font-size:clamp(90px,30vw,150px); opacity:.75;}
  .composer-foot{flex-direction:column; align-items:stretch; gap:9px;}
  .composer textarea{resize:none;}
  .wall-stats{flex-direction:column; align-items:flex-start; gap:4px;}
  .composer-tip{text-align:center; order:1;}
  .btn-send{width:100%; padding:12px 20px; order:2;}
  .photo-stack{margin-bottom:26px;}
  .photo-stack .aside{
    position:relative; right:auto; bottom:auto;
    width:60%; margin:16px 0 0 auto; transform:rotate(1.8deg);
  }
  .photo-stack--portrait .aside{width:52%;}
  .grain{opacity:.2; mix-blend-mode:normal;}
  .modal{padding:14px;}
  .modal-card{padding:22px 18px 16px;}
  .modal-row{margin-top:16px;}
  .modal-row .btn-send{width:auto; padding:10px 20px; order:0;}
  .modal-row .btn-ghost{padding:9px 16px;}
  .lightbox img{max-height:72vh;}
}
@media (max-width:480px){
  .wrap{width:calc(100% - 36px);}
  .ch-text{text-align:left;}
  .strip{padding-inline:18px;}
  .bgm{padding:6px 12px 6px 6px;}
  .hero-main{font-size:clamp(42px,12.2vw,62px);}
  .hero-under{font-size:clamp(16px,4.4vw,22px); letter-spacing:.38em; text-indent:.38em;}
  .card-media.multi{gap:4px;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .reveal{opacity:1; transform:none;}
  .hero-bg{animation:none;}
}

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