/* ============================================================
   section.css — 分隔页（/about /projects /books /anime /blank）
   公共顶栏 / 主题色 / 各页版式
   依赖 base.css（GitHub 卡片样式也在 base.css）
   ============================================================ */

body { min-height: 100vh; }

/* 每页主题色（body data-theme） */
body[data-theme="rose"]   { --theme: var(--rose);   --theme-d: var(--rose-d); }
body[data-theme="blue"]   { --theme: var(--blue);   --theme-d: var(--blue-d); }
body[data-theme="green"]  { --theme: var(--green);  --theme-d: var(--green-d); }
body[data-theme="purple"] { --theme: var(--purple); --theme-d: var(--purple-d); }
body[data-theme="taupe"]  { --theme: var(--taupe);  --theme-d: var(--taupe-d); }

/* ---------- 顶部色带 + 顶栏 ---------- */
.sec-band {
  height: 10px;
  background: linear-gradient(90deg, var(--theme), var(--cream) 130%);
}
.sec-topbar {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 22px;
  background: rgba(246, 241, 231, .86);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(74, 66, 56, .10);
}
.sec-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--hand);
  font-size: 21px; color: var(--ink);
  text-decoration: none;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1.5px solid rgba(74, 66, 56, .18);
  background: rgba(255, 255, 255, .5);
  transition: transform .2s, box-shadow .2s;
  flex: none;
}
.sec-back:hover { transform: translateX(-3px); box-shadow: 0 3px 8px rgba(74, 66, 56, .14); }

/* ---------- 分隔页音乐按钮（右上角） ---------- */
.sec-music-btn {
  position: fixed; right: 14px; bottom: 18px;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--paper);
  border: 1.5px solid rgba(74, 66, 56, .18);
  box-shadow: 0 4px 12px rgba(74, 66, 56, .14);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-2);
  z-index: 120;
  transition: transform .2s, box-shadow .2s, color .2s;
}
.sec-music-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(74, 66, 56, .2); }
.sec-music-btn .music-note { width: 20px; height: 20px; }
.sec-music-btn .music-eq { display: none; }
.sec-music-btn.playing { color: var(--theme-d, var(--taupe-d)); }
.sec-music-btn.playing .music-eq {
  display: inline-flex; gap: 2px; align-items: flex-end;
  position: absolute; bottom: 5px;
}
.sec-music-btn.playing .music-eq i {
  width: 3px; border-radius: 2px;
  background: currentColor;
  animation: eq-bounce 1s ease-in-out infinite;
}
.sec-music-btn.playing .music-eq i:nth-child(2) { animation-delay: .18s; }
.sec-music-btn.playing .music-eq i:nth-child(3) { animation-delay: .36s; }
@keyframes eq-bounce {
  0%, 100% { height: 4px; }
  50% { height: 11px; }
}

.sec-title {
  display: flex; align-items: baseline; gap: 10px;
  min-width: 0;
}
.sec-title h1 {
  font-family: var(--hand-title);
  font-size: 30px; letter-spacing: 3px;
  white-space: nowrap;
}
.sec-title .sec-title-en {
  font-family: var(--hand-en);
  font-size: 19px; color: var(--ink-2);
  white-space: nowrap;
}

.sec-nav {
  margin-left: auto;
  display: flex; gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.sec-nav::-webkit-scrollbar { display: none; }
.sec-nav a {
  flex: none;
  font-family: var(--hand);
  font-size: 18px; color: var(--ink-2);
  text-decoration: none;
  padding: 5px 12px;
  border-radius: 16px;
  transition: background .2s, color .2s;
}
.sec-nav a:hover { background: rgba(255, 255, 255, .7); color: var(--ink); }
.sec-nav a.here { color: #FFFDF8; background: var(--theme); pointer-events: none; }

/* ---------- 内容区 ---------- */
.sec-main {
  max-width: 980px;
  margin: 0 auto;
  padding: 34px 26px 60px;
}

.sec-note {
  font-family: var(--hand);
  font-size: 21px; color: var(--ink-2);
  text-align: center;
  margin-top: 34px;
}

/* ---------- 通用卡片 ---------- */
.sec-card {
  position: relative;
  background:
    var(--paper-noise),
    var(--paper);
  border: 1px solid rgba(74, 66, 56, .10);
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(74, 66, 56, .08);
  padding: 26px 28px;
}

/* ---------- 页脚 ---------- */
.sec-footer {
  text-align: center;
  padding: 26px 0 30px;
  font-family: var(--hand-en);
  font-size: 17px; color: var(--ink-2);
  border-top: 1.5px dashed rgba(74, 66, 56, .16);
  max-width: 980px; margin: 0 auto;
}

/* ============================================================
   /about 关于我
   ============================================================ */
.ab-hero {
  display: flex; align-items: center; gap: 22px;
  margin-bottom: 26px;
}
.ab-hero img {
  width: 92px; height: 92px;
  border-radius: 50%;
  border: 3px solid var(--paper);
  box-shadow: 0 4px 12px rgba(74, 66, 56, .2);
  flex: none;
}
.ab-hero .ab-name { font-family: var(--hand-title); font-size: 52px; letter-spacing: 6px; line-height: 1.1; }
.ab-hero .ab-sub { font-family: var(--hand-en); font-size: 22px; color: var(--ink-2); margin-top: 4px; }

.ab-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ab-grid .sec-card:first-child { grid-column: 1 / -1; }
.ab-card-title {
  font-family: var(--hand);
  font-size: 24px; color: var(--theme-d);
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
}
.ab-card-title::after { content: ''; flex: 1; height: 1.5px; background: rgba(74, 66, 56, .14); }
.ab-empty {
  border: 1.5px dashed rgba(74, 66, 56, .20);
  border-radius: 10px;
  padding: 30px 16px;
  text-align: center;
  font-family: var(--hand);
  font-size: 20px; color: var(--ink-2);
}
/* 自我介绍是成段文字：左对齐 + 行距放宽，读起来更舒服 */
.ab-grid .sec-card:first-child .ab-empty {
  text-align: left;
  padding: 26px 26px 22px;
  background: rgba(255, 255, 255, .35);
}
.ab-empty p { margin: 0 0 12px; line-height: 1.95; }
.ab-empty p:first-child { text-indent: 2em; }
.ab-empty p:last-child { margin-bottom: 0; }
.ab-empty br + br { display: none; }

/* ============================================================
   /projects GitHub 项目
   ============================================================ */
.pj-stats {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin: 18px 0 24px;
}
.pj-stat {
  flex: 1 1 120px;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(74, 66, 56, .12);
  border-radius: 12px;
  padding: 12px 16px;
  text-align: center;
}
.pj-stat b { display: block; font-family: var(--hand-en); font-size: 30px; color: var(--ink); line-height: 1.1; }
.pj-stat span { font-family: var(--hand); font-size: 17px; color: var(--ink-2); }

.pj-langbar {
  display: flex; height: 10px;
  border-radius: 6px; overflow: hidden;
  margin: 4px 0 26px;
  background: rgba(74, 66, 56, .08);
}
.pj-langbar i { display: block; height: 100%; }
.pj-langlegend { display: flex; gap: 16px; flex-wrap: wrap; margin: -16px 0 26px; }
.pj-langlegend span { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-2); }
.pj-langlegend i { width: 9px; height: 9px; border-radius: 50%; }

/* GitHub 统计卡（github-readme-stats 纯 img） */
.pj-cards {
  display: flex; flex-wrap: wrap; gap: 16px;
  margin: 0 0 26px;
}
.pj-cards img {
  border-radius: 12px;
  background: var(--paper);
  border: 1px solid rgba(74, 66, 56, .12);
  box-shadow: 0 4px 14px rgba(74, 66, 56, .08);
  max-width: 100%;
  height: auto;
}

.pj-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ============================================================
   /books 藏书
   ============================================================ */
.bk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 22px;
}
.bk-card {
  background:
    var(--paper-noise),
    var(--paper);
  border: 1px solid rgba(74, 66, 56, .10);
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(74, 66, 56, .08);
  padding: 20px 14px 16px;
  text-align: center;
}
.bk-card.no-cover { border-style: dashed; }

.b3-stage { height: 192px; perspective: 800px; touch-action: pan-y; cursor: grab; }
.b3-stage:active { cursor: grabbing; }
.b3-book {
  position: relative;
  width: 104px; height: 142px;
  margin: 16px auto 0;
  transform-style: preserve-3d;
  transform: rotateX(8deg) rotateY(-18deg);
  transition: transform .2s ease-out;
  --spine-c: #C4B696;
  --back-c: #D3C7A9;
}
.b3-book.dragging { transition: none; }
.b3-cover {
  position: absolute; inset: 0;
  transform: translateZ(9px);
  border-radius: 3px 7px 7px 3px;
  overflow: hidden;
  background: linear-gradient(155deg, #EFE7D4, #DCCFB4);
  box-shadow: inset 0 0 0 1px rgba(74, 66, 56, .10), 2px 3px 10px rgba(74, 66, 56, .25);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px; padding: 10px;
  text-align: center;
}
.b3-cover::before {
  content: '';
  position: absolute; inset: 7px;
  border: 1px solid rgba(74, 66, 56, .18);
  border-radius: 2px 5px 5px 2px;
  pointer-events: none;
}
.b3-cover img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.b3-def-title { font-family: var(--hand); font-size: 19px; color: var(--ink); line-height: 1.5; max-width: 100%; overflow-wrap: anywhere; }
.b3-def-author { font-family: var(--hand-en); font-size: 13px; color: var(--ink-2); }
.b3-spine {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 18px;
  transform: rotateY(-72deg);
  transform-origin: left center;
  background: var(--spine-c);
  border-radius: 3px 0 0 3px;
}
.b3-pages {
  position: absolute; right: -8px; top: 2px; bottom: 2px;
  width: 16px;
  transform: rotateY(64deg);
  transform-origin: left center;
  background: repeating-linear-gradient(90deg, #F2E8D2 0 1.6px, #D9CCAC 1.6px 2.4px);
  border-radius: 0 2px 2px 0;
}
.b3-backface {
  position: absolute; inset: 0;
  transform: translateZ(-9px);
  background: var(--back-c);
  border-radius: 7px 3px 3px 7px;
}
.bk-name { font-family: var(--hand); font-size: 22px; color: var(--ink); margin-top: 12px; line-height: 1.5; }
.bk-meta { font-size: 12.5px; color: var(--ink-2); margin-top: 4px; }

.filter-empty {
  text-align: center;
  font-family: var(--hand);
  font-size: 20px; color: var(--ink-2);
  padding: 30px 0;
}

/* ============================================================
   /anime 追番 — 3D 亚克力立牌卡片
   ============================================================ */
.st-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 22px;
}
.st-card {
  background:
    var(--paper-noise),
    var(--paper);
  border: 1px solid rgba(74, 66, 56, .10);
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(74, 66, 56, .08);
  padding: 18px 14px 16px;
  text-align: center;
}
.st-card.no-image { border-style: dashed; }

.st-stage { height: 208px; perspective: 800px; touch-action: pan-y; cursor: grab; }
.st-stage:active { cursor: grabbing; }
.st-stand {
  position: relative;
  width: 130px; height: 176px;
  margin: 4px auto 0;
  transform-style: preserve-3d;
  transform: rotateX(5deg) rotateY(-14deg);
  transition: transform .2s ease-out;
}
.st-stand.dragging { transition: none; }

/* ---- 裁形亚克力：按透明图的人物形状切割 ---- */
.st-figure {
  position: absolute;
  left: 50%; bottom: 12px;
  width: 120px; height: 150px;
  transform: translateX(-50%);
  transform-style: preserve-3d;
}
.st-lyr, .st-main, .st-sweep {
  position: absolute; inset: 0;
}
.st-lyr {
  -webkit-mask-image: var(--img);
  mask-image: var(--img);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center bottom;
  mask-position: center bottom;
}
/* 激光白边：放大一圈的半透明剪影 */
.st-lyr-edge {
  background: linear-gradient(160deg, rgba(255, 255, 255, .95), rgba(235, 242, 246, .75));
  transform: scale(1.07);
  transform-origin: center bottom;
  filter: blur(.6px);
  opacity: .92;
}
/* 板材厚度：亚克力蓝灰剪影，向后错位 */
.st-lyr-thick {
  background: linear-gradient(160deg, rgba(176, 206, 220, .7), rgba(140, 170, 190, .5));
  transform: translate(2.5px, 2px) translateZ(-5px);
  opacity: .8;
}
/* 本体 */
.st-main {
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 3px 4px rgba(74, 66, 56, .18));
}
/* 扫光（只在人物形状内出现） */
.st-sweep {
  -webkit-mask-image: var(--img);
  mask-image: var(--img);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center bottom;
  mask-position: center bottom;
  overflow: hidden;
}
.st-sweep::after {
  content: '';
  position: absolute;
  top: -20%; bottom: -20%;
  width: 34%; left: -40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: skewX(-14deg);
  animation: st-sweep 4.6s ease-in-out infinite;
}
@keyframes st-sweep {
  0%, 55% { left: -40%; }
  85%, 100% { left: 120%; }
}
/* 透明亚克力底座 + 插槽 */
.st-base {
  position: absolute; left: 50%; bottom: 0;
  width: 108px; height: 24px;
  transform: translateX(-50%) rotateX(72deg);
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 35%, rgba(255, 255, 255, .75), rgba(200, 212, 222, .45) 55%, rgba(170, 185, 198, .35));
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 3px 8px rgba(74, 66, 56, .12), inset 0 0 6px rgba(255, 255, 255, .5);
}
.st-base::after {
  content: '';
  position: absolute;
  left: 50%; top: 42%;
  width: 34px; height: 8px;
  transform: translate(-50%, -50%);
  border-radius: 3px;
  background: rgba(150, 168, 182, .5);
  box-shadow: inset 0 1px 2px rgba(74, 66, 56, .2);
}
/* 占位（无图可裁时）：虚线人形 */
.st-figure-empty {
  display: flex; align-items: flex-end; justify-content: center;
}
.st-sil { width: 62%; margin-bottom: 6px; }
.st-wait {
  position: absolute;
  top: 8px; left: 50%;
  transform: translateX(-50%);
  font-size: 17px; color: var(--ink-2);
  white-space: nowrap;
}
.st-name { font-family: var(--hand); font-size: 22px; color: var(--ink); margin-top: 10px; line-height: 1.5; }
.st-meta { font-size: 12.5px; color: var(--ink-2); margin-top: 4px; }

/* ============================================================
   /about 信纸风
   ============================================================ */
.letter {
  background:
    repeating-linear-gradient(transparent 0 34px, var(--line) 34px 35px),
    var(--paper-noise),
    var(--paper) !important;
  border-radius: 4px 16px 16px 4px;
  position: relative;
}
.letter::after {
  content: '';
  position: absolute;
  right: 26px; top: 22px;
  width: 54px; height: 54px;
  border-radius: 50%;
  border: 2px solid rgba(169, 130, 120, .45);
  background: radial-gradient(circle at 40% 35%, rgba(201, 163, 156, .35), rgba(169, 130, 120, .18));
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, .5);
}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 760px) {
  .sec-topbar { padding: 10px 14px; gap: 10px; flex-wrap: wrap; }
  .sec-title h1 { font-size: 25px; }
  .sec-title .sec-title-en { display: none; }
  .sec-nav { order: 3; width: 100%; margin-left: 0; }
  .sec-main { padding: 24px 16px 46px; }
  .ab-hero .ab-name { font-size: 40px; }
  .ab-grid { grid-template-columns: 1fr; }
  .pj-grid { grid-template-columns: 1fr; }
  .bk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .st-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  /* 两列窄卡片：缩小书名/元信息字号，避免「次」字单独换行 */
  .bk-card, .st-card { padding: 14px 8px 12px; }
  .bk-name, .st-name { font-size: 18px; margin-top: 8px; }
  .bk-meta, .st-meta { font-size: 10.5px; line-height: 1.5; margin-top: 3px; }
  .b3-stage { height: 168px; }
  .st-stage { height: 168px; }
  /* 6 个导航项在 390px 宽的手机上要挤得下（含「站点」） */
  .sec-nav { gap: 2px; }
  .sec-nav a { font-size: 15px; padding: 4px 8px; }
  .sec-title h1 { font-size: 23px; }
}

/* ============================================================
   通用行动按钮（「我的站点」入口等）
   ============================================================ */
.cta-wrap { text-align: center; margin-top: 26px; }
.sec-cta {
  display: inline-block;
  font-family: var(--hand);
  font-size: 22px;
  color: var(--theme-d, var(--blue-d));
  text-decoration: none;
  padding: 8px 22px;
  border: 1.5px dashed rgba(74, 66, 56, .28);
  border-radius: 22px;
  background: rgba(255, 255, 255, .45);
  transform: rotate(-.6deg);
  transition: transform .2s, background .2s, box-shadow .2s;
}
.sec-cta:hover {
  transform: rotate(0) translateY(-2px);
  background: rgba(255, 255, 255, .8);
  box-shadow: 0 6px 14px rgba(74, 66, 56, .12);
}
@media (max-width: 760px) {
  .sec-cta { font-size: 20px; padding: 7px 18px; }
}