/* ============================================================================
 * SPIDER-儒 · 自我介绍网站
 * 结构：三个 .page 叠放，通过 .is-active 切换
 * ========================================================================== */

:root {
  --red:        #e62429;
  --red-deep:   #a8171b;
  --blue:       #1b3a8f;
  --blue-lite:  #2f5fd0;
  --yellow:     #ffcb05;
  --ink:        #0b0b10;
  --paper:      #fdfaf3;
  --web:        #ffffff;

  --font-comic: "Impact", "Haettenschweiler", "Arial Black", "Franklin Gothic Heavy", sans-serif;
  --font-cn:    "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;

  --line: 5px solid var(--ink);
  --shadow-hard: 12px 12px 0 rgba(0, 0, 0, .85);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-cn);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

/* ============================================================================
 * 页面容器与切换
 * ========================================================================== */
.page {
  position: fixed;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow-x: hidden;
  overflow-y: auto;
  transform: scale(1.04);
  transition:
    opacity .55s ease,
    transform .7s cubic-bezier(.22, 1, .36, 1),
    visibility 0s linear .55s;
}

.page.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(1);
  transition:
    opacity .55s ease,
    transform .7s cubic-bezier(.22, 1, .36, 1),
    visibility 0s;
}

/* ============================================================================
 * 第 1 页 · 开场
 * ========================================================================== */
.page--hero {
  overflow: hidden;
  background: #14172b;
}

/* ---- 漫画版蜘蛛侠背景 ---- */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg__img {
  position: absolute;
  inset: -2%;
  background: url('../assets/spidey-original.jpg') center 26% / cover no-repeat;
  transform: scale(1.06);
  animation: bg-breathe 18s ease-in-out infinite alternate;
}

@keyframes bg-breathe {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.13) translate3d(-1%, -1%, 0); }
}

/* 漫画网点 */
.hero-bg__dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(0, 0, 0, .55) 1px, transparent 1.5px);
  background-size: 7px 7px;
  opacity: .35;
  mix-blend-mode: multiply;
}

/* 压暗，让白色蛛丝和文字卡片跳出来 */
.hero-bg__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(9, 10, 22, .55) 0%, rgba(9, 10, 22, .18) 35%, rgba(9, 10, 22, .62) 100%),
    radial-gradient(ellipse at center, transparent 30%, rgba(0, 0, 0, .55) 100%);
}

/* ---- 角落蜘蛛网 ---- */
.corner-web {
  position: absolute;
  top: 0;
  width: min(34vw, 340px);
  height: auto;
  color: rgba(255, 255, 255, .3);
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6));
  animation: web-in 1.6s ease .2s both;
}

.corner-web--tl { left: 0; }
.corner-web--tr { right: 0; transform: scaleX(-1); }

@keyframes web-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ============================================================================
 * 蛛丝射出 → 拉住文字 → 收缩上提 → 悬空摆动
 *
 *  时间线（总时长 2.4s）：
 *    0.00s ~ 0.50s  三根蛛丝从屏幕顶部射出，向下垂到画面之外（卡片还停在屏幕外）
 *    0.50s ~ 2.40s  蛛丝收缩，把卡片从下方拉到屏幕中央
 *    2.55s ~        以「屏幕顶部中心」为悬点，像钟摆一样左右晃动
 *
 *  蛛丝末端始终落在屏幕正中（50%），而卡片在拉升层里也是垂直居中的，
 *  所以无论卡片多高，丝尖都稳稳扎在卡片内部，看起来就是「粘住并被拉起」。
 *
 *  .rope  —— 固定在屏幕坐标系，只负责摆动
 *  .strand—— 从顶部射出并收缩的蛛丝
 *  .lift  —— 只负责把卡片从下方提上来
 * ========================================================================== */
.rope {
  position: absolute;
  inset: 0;
  z-index: 3;
  transform-origin: 50% 0;          /* 悬点 = 屏幕顶部中心 */
  animation: swing 3.4s ease-in-out 2.55s infinite;
}

@keyframes swing {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}

/* ---- 蛛丝：先射出，再收缩 ---- */
.strand {
  position: absolute;
  top: 0;
  left: 50%;
  height: 0;                        /* 由动画驱动 */
  border-radius: 0 0 4px 4px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .2) 0%, #fff 16%, #fff 100%);
  box-shadow:
    0 0 10px rgba(255, 255, 255, .75),
    0 0 3px rgba(0, 0, 0, .5);
  transform-origin: 50% 0;
  transform: rotate(var(--rot, 0deg));
  animation: strand-life 2.4s var(--delay, 0s) both;
  pointer-events: none;
}

@keyframes strand-life {
  0% {
    height: 0;
    animation-timing-function: cubic-bezier(.15, .85, .35, 1);   /* 射出：快而干脆，末端减速 */
  }
  21% {
    height: 158%;                                                /* 垂到屏幕下方，够到卡片 */
    animation-timing-function: cubic-bezier(.32, 1.15, .5, 1);   /* 收缩：匀速收线，末端回弹一下 */
  }
  100% { height: 50%; }                                          /* 收到屏幕中央，正好抓住卡片 */
}

.strand--mid   { width: 6px; --rot: 0deg;     --delay: 0s; }
.strand--left  { width: 4px; --rot: -7.5deg;  --delay: .08s; }
.strand--right { width: 4px; --rot: 7.5deg;   --delay: .14s; }

/* ---- 拉升层：前 21% 时间原地待命，等蛛丝射下来 ---- */
.lift {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: lift-up 2.4s both;
}

@keyframes lift-up {
  0%  { transform: translateY(108%); animation-timing-function: linear; }
  21% { transform: translateY(108%); animation-timing-function: cubic-bezier(.32, 1.25, .5, 1); }
  100% { transform: translateY(0); }
}

/* ---- 文字卡片 ---- */
.hero-card {
  --tilt: -1.2deg;
  position: relative;
  max-width: 88vw;
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1.6rem, 5.5vw, 4rem) clamp(1.7rem, 4.4vw, 3.2rem);
  background: var(--paper);
  border: var(--line);
  border-radius: 4px;
  box-shadow:
    var(--shadow-hard),
    0 30px 70px rgba(0, 0, 0, .6);
  text-align: center;
  transform: rotate(var(--tilt));
  /* 比 .rope 晚一点起步，制造被吊着的滞后感 */
  animation: card-sway 3.4s ease-in-out 2.8s infinite;
}

@keyframes card-sway {
  0%, 100% { transform: rotate(calc(var(--tilt) - 1.2deg)); }
  50%      { transform: rotate(calc(var(--tilt) + 1.2deg)); }
}

/* 卡片四角的红色小角标 */
.hero-card::before,
.hero-card::after {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  border: 4px solid var(--red);
}

.hero-card::before { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.hero-card::after  { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }

.hero-card__tag {
  display: inline-block;
  margin-bottom: clamp(.6rem, 1.6vw, 1.1rem);
  padding: .28em .8em;
  background: var(--ink);
  color: var(--yellow);
  font-family: var(--font-comic);
  font-size: clamp(.62rem, 1.35vw, .95rem);
  letter-spacing: .22em;
  border-radius: 2px;
  transform: skewX(-8deg);
}

.hero-title {
  margin: 0;
  line-height: 1.06;
  font-weight: 900;
}

.hero-title__line1 {
  display: block;
  font-size: clamp(1.15rem, 3.3vw, 2.5rem);
  letter-spacing: .14em;
  color: var(--ink);
}

.hero-title__line2 {
  display: block;
  margin-top: clamp(.15rem, .8vw, .5rem);
  font-family: var(--font-comic), var(--font-cn);
  font-size: clamp(2rem, 7.4vw, 5.6rem);
  letter-spacing: .01em;
  color: var(--red);
  text-shadow:
     3px  3px 0 var(--ink),
    -2px -2px 0 var(--ink),
     2px -2px 0 var(--ink),
    -2px  2px 0 var(--ink),
     3px  0   0 var(--ink),
    -3px  0   0 var(--ink),
     0    3px 0 var(--ink),
     0   -3px 0 var(--ink),
     0    9px 0 rgba(0, 0, 0, .22);
}

/* ---- 拟声词 ---- */
.sfx {
  position: absolute;
  top: 13%;
  right: 6%;
  z-index: 4;
  font-family: var(--font-comic);
  font-size: clamp(1.8rem, 5.6vw, 4.6rem);
  letter-spacing: .04em;
  color: var(--yellow);
  -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill;
  text-shadow: 6px 6px 0 var(--ink);
  transform: rotate(-12deg) scale(.2);
  opacity: 0;
  pointer-events: none;
  /* 与蛛丝射出的瞬间同步 */
  animation: sfx-pop 1.7s cubic-bezier(.2, 1.6, .4, 1) .4s both;
}

@keyframes sfx-pop {
  0%   { transform: rotate(-12deg) scale(.25); opacity: 0; }
  30%  { transform: rotate(-12deg) scale(1.18); opacity: 1; }
  50%  { transform: rotate(-12deg) scale(1); opacity: 1; }
  100% { transform: rotate(-12deg) scale(1.02); opacity: 0; }
}

/* ---- 继续提示 ---- */
.hint {
  position: absolute;
  left: 50%;
  bottom: clamp(20px, 5vh, 50px);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: .7em 1.4em;
  background: rgba(11, 11, 16, .72);
  border: 2px solid rgba(255, 255, 255, .55);
  border-radius: 999px;
  color: #fff;
  font-family: var(--font-cn);
  font-size: clamp(.75rem, 1.55vw, .95rem);
  letter-spacing: .08em;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transform: translateX(-50%);
  opacity: 0;
  animation: hint-in .7s ease 2.6s both, hint-pulse 2.2s ease-in-out 3.3s infinite;
}

@keyframes hint-in {
  from { opacity: 0; transform: translate(-50%, 14px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes hint-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .30); }
  50%      { box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); }
}

.hint__dot {
  width: .55em;
  height: .55em;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 8px var(--red);
  animation: dot-blink 1.2s ease-in-out infinite;
}

@keyframes dot-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .25; }
}

/* ============================================================================
 * 第 2 / 3 页 · 公共背景
 * ========================================================================== */
.page--menu,
.page--detail {
  background:
    radial-gradient(circle at 50% -10%, #232a4d 0%, #12142a 45%, #08080f 100%);
}

.bg-deco {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.bg-deco__dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .18) 1px, transparent 1.6px);
  background-size: 22px 22px;
  opacity: .5;
  mask-image: radial-gradient(ellipse at 50% 40%, #000 10%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 10%, transparent 78%);
}

.bg-deco__figure {
  position: absolute;
  right: -7%;
  bottom: -5%;
  width: min(48vw, 640px);
  aspect-ratio: 2 / 3;
  background: url('../assets/spidey-comic.jpg') center / contain no-repeat;
  opacity: .17;
  filter: saturate(.75) contrast(1.1);
  mask-image: linear-gradient(to top, transparent 2%, #000 55%);
  -webkit-mask-image: linear-gradient(to top, transparent 2%, #000 55%);
}

.bg-deco__figure--right { right: auto; left: -8%; opacity: .13; }

.foot {
  position: relative;
  z-index: 2;
  margin: clamp(26px, 5vh, 52px) 0 30px;
  font-size: .74rem;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .38);
  text-align: center;
}

.foot a { color: rgba(255, 255, 255, .62); }

/* ============================================================================
 * 第 2 页 · 模块入口
 * ========================================================================== */
.page--menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: safe center;
  gap: clamp(24px, 5vh, 46px);
  padding: clamp(30px, 7vh, 70px) clamp(16px, 4vw, 40px) 0;
}

.page--menu > * { position: relative; z-index: 2; }

.menu-head { text-align: center; }

.menu-head__kicker {
  margin: 0 0 .7rem;
  font-family: var(--font-comic);
  font-size: clamp(.68rem, 1.5vw, .9rem);
  letter-spacing: .34em;
  color: var(--red);
}

.menu-head__title {
  margin: 0;
  font-size: clamp(1.6rem, 4.4vw, 3.1rem);
  font-weight: 900;
  letter-spacing: .04em;
  color: var(--paper);
  text-shadow: 4px 4px 0 rgba(0, 0, 0, .55);
}

.menu-head__sub {
  margin: .85rem 0 0;
  font-size: clamp(.82rem, 1.7vw, 1rem);
  color: rgba(255, 255, 255, .58);
  letter-spacing: .06em;
}

/* ---- 三张模块卡 ---- */
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 30px);
  width: min(1120px, 92vw);
}

.card {
  --accent: var(--red);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .55rem;
  padding: clamp(1.5rem, 3vw, 2.3rem) clamp(1.3rem, 2.4vw, 2rem) clamp(1.4rem, 2.6vw, 2rem);
  background: var(--paper);
  border: var(--line);
  border-radius: 4px;
  box-shadow: 10px 10px 0 rgba(0, 0, 0, .85);
  color: var(--ink);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s ease;
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10px;
  background: var(--accent);
  border-bottom: 4px solid var(--ink);
}

.card:hover,
.card:focus-visible {
  transform: translate(-5px, -9px) rotate(-1.1deg);
  box-shadow: 17px 20px 0 rgba(0, 0, 0, .9);
  outline: none;
}

.card:active { transform: translate(-1px, -3px) rotate(-.4deg); }

.card__no {
  position: absolute;
  top: 14px;
  right: 14px;
  font-family: var(--font-comic);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1;
  color: var(--accent);
  opacity: .22;
}

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(46px, 5vw, 58px);
  height: clamp(46px, 5vw, 58px);
  margin-top: .9rem;
  color: var(--accent);
  background: rgba(11, 11, 16, .05);
  border: 3px solid var(--ink);
  border-radius: 50%;
}

.card__icon svg { width: 62%; height: 62%; }

.card__en {
  font-family: var(--font-comic);
  font-size: clamp(.66rem, 1.3vw, .82rem);
  letter-spacing: .26em;
  color: var(--accent);
  filter: brightness(.85);
}

.card__title {
  font-size: clamp(1.35rem, 2.9vw, 2rem);
  font-weight: 900;
  letter-spacing: .05em;
  line-height: 1.15;
}

.card__brief {
  font-size: clamp(.8rem, 1.5vw, .92rem);
  line-height: 1.75;
  color: rgba(11, 11, 16, .68);
}

.card__more {
  margin-top: auto;
  padding-top: .9rem;
  font-size: clamp(.78rem, 1.4vw, .88rem);
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--ink);
  border-top: 2px dashed rgba(11, 11, 16, .25);
  width: 100%;
  transition: color .2s ease, letter-spacing .2s ease;
}

.card:hover .card__more { color: var(--accent); letter-spacing: .18em; }

/* ---- 重播按钮 ---- */
.replay {
  position: fixed;
  top: clamp(16px, 3vh, 28px);
  right: clamp(16px, 3vw, 28px);
  z-index: 6;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .06);
  border: 2px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  color: rgba(255, 255, 255, .8);
  font-size: 1.2rem;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: transform .35s ease, background .25s ease, color .25s ease;
}

.replay:hover {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  transform: rotate(-180deg);
}

/* ============================================================================
 * 第 3 页 · 详情
 * ========================================================================== */
.page--detail {
  --accent: var(--red);
  padding: clamp(26px, 6vh, 64px) clamp(16px, 4vw, 40px) 0;
}

.detail-wrap {
  position: relative;
  z-index: 2;
  width: min(920px, 100%);
  margin: 0 auto;
}

.back {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  margin-bottom: clamp(18px, 3.4vh, 34px);
  padding: .6em 1.2em;
  background: rgba(255, 255, 255, .05);
  border: 2px solid rgba(255, 255, 255, .32);
  border-radius: 999px;
  color: rgba(255, 255, 255, .82);
  font-family: inherit;
  font-size: .85rem;
  letter-spacing: .08em;
  cursor: pointer;
  transition: background .22s ease, color .22s ease, border-color .22s ease, transform .22s ease;
}

.back:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: translateX(-4px);
}

.detail-head {
  padding-bottom: clamp(18px, 3vh, 30px);
  border-bottom: 4px solid rgba(255, 255, 255, .14);
}

.detail-head__en {
  margin: 0 0 .6rem;
  font-family: var(--font-comic);
  font-size: clamp(.7rem, 1.5vw, .92rem);
  letter-spacing: .3em;
  color: var(--accent);
}

.detail-head__title {
  margin: 0;
  font-size: clamp(1.9rem, 5.4vw, 3.6rem);
  font-weight: 900;
  letter-spacing: .04em;
  color: var(--paper);
  text-shadow: 5px 5px 0 rgba(0, 0, 0, .5);
}

.detail-head__brief {
  margin: clamp(12px, 2vh, 20px) 0 0;
  max-width: 60ch;
  font-size: clamp(.86rem, 1.8vw, 1rem);
  line-height: 1.85;
  color: rgba(255, 255, 255, .66);
}

.detail-body {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2.2vh, 22px);
  margin-top: clamp(22px, 4vh, 38px);
}

.entry {
  position: relative;
  display: flex;
  gap: clamp(14px, 2.4vw, 24px);
  padding: clamp(1.2rem, 2.6vw, 1.9rem) clamp(1.2rem, 2.6vw, 2rem);
  background: var(--paper);
  border: 4px solid var(--ink);
  border-left: 12px solid var(--accent);
  border-radius: 4px;
  box-shadow: 9px 9px 0 rgba(0, 0, 0, .75);
  color: var(--ink);
  transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s ease;
  animation: entry-in .55s cubic-bezier(.22, 1, .36, 1) both;
}

.entry:nth-child(1) { animation-delay: .04s; }
.entry:nth-child(2) { animation-delay: .10s; }
.entry:nth-child(3) { animation-delay: .16s; }
.entry:nth-child(4) { animation-delay: .22s; }
.entry:nth-child(5) { animation-delay: .28s; }
.entry:nth-child(6) { animation-delay: .34s; }

@keyframes entry-in {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

.entry:hover {
  transform: translate(-4px, -6px);
  box-shadow: 14px 16px 0 rgba(0, 0, 0, .8);
}

.entry__no {
  flex: 0 0 auto;
  font-family: var(--font-comic);
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  line-height: 1.05;
  color: var(--accent);
}

.entry__main { min-width: 0; }

.entry__t {
  margin: 0 0 .5rem;
  font-size: clamp(1.02rem, 2.2vw, 1.3rem);
  font-weight: 900;
  letter-spacing: .03em;
}

.entry__d {
  margin: 0;
  font-size: clamp(.82rem, 1.65vw, .95rem);
  line-height: 1.9;
  color: rgba(11, 11, 16, .72);
}

/* ============================================================================
 * 响应式
 * ========================================================================== */
@media (max-width: 900px) {
  .cards { grid-template-columns: 1fr; width: min(540px, 90vw); }
  .bg-deco__figure { width: min(70vw, 460px); opacity: .12; }
  .corner-web { width: min(46vw, 260px); }
}

@media (max-width: 560px) {
  :root { --line: 4px solid var(--ink); }
  .hero-card { max-width: 90vw; }
  .sfx { top: 9%; right: 4%; font-size: clamp(1.5rem, 8vw, 2.6rem); }
  .card { box-shadow: 7px 7px 0 rgba(0, 0, 0, .85); }
  .entry { border-left-width: 9px; box-shadow: 6px 6px 0 rgba(0, 0, 0, .75); }
  .foot { font-size: .68rem; }
}

/* 横屏矮屏：避免卡片被挤扁 */
@media (max-height: 520px) and (orientation: landscape) {
  .hero-card { padding: 1rem 1.6rem 1.2rem; }
  .hero-title__line2 { font-size: clamp(1.6rem, 5vw, 2.6rem); }
  .strand--mid { height: 42%; }
}

/* ============================================================================
 * 左上角 · 编辑入口（蜘蛛侠头像）
 * ========================================================================== */
.edit-avatar {
  position: fixed;
  top: clamp(14px, 2.8vh, 26px);
  left: clamp(14px, 2.6vw, 26px);
  z-index: 50;
  width: 52px;
  height: 52px;
  padding: 5px;
  display: grid;
  place-items: center;
  background: rgba(11, 11, 16, .5);
  border: 2px solid rgba(255, 255, 255, .4);
  border-radius: 50%;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: transform .3s cubic-bezier(.22, 1, .36, 1),
              box-shadow .25s ease, border-color .25s ease, background .25s ease;
}

.edit-avatar svg { width: 100%; height: 100%; display: block; }

.edit-avatar:hover,
.edit-avatar:focus-visible {
  transform: scale(1.12) rotate(-7deg);
  border-color: var(--red);
  background: rgba(11, 11, 16, .74);
  box-shadow: 0 0 0 5px rgba(230, 36, 41, .22), 0 10px 26px rgba(0, 0, 0, .55);
  outline: none;
}

/* 解锁后头像亮起黄圈，一眼能看出正处于编辑状态 */
body.editing .edit-avatar {
  border-color: var(--yellow);
  box-shadow: 0 0 0 5px rgba(255, 203, 5, .26), 0 10px 26px rgba(0, 0, 0, .55);
}

/* ============================================================================
 * 密码弹窗
 * ========================================================================== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(5, 5, 11, .74);
  backdrop-filter: blur(5px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility 0s linear .25s;
}

.modal.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .25s ease, visibility 0s;
}

.modal__box {
  width: min(400px, 100%);
  padding: 1.9rem 1.7rem 1.6rem;
  background: var(--paper);
  border: var(--line);
  border-radius: 4px;
  box-shadow: 14px 14px 0 rgba(0, 0, 0, .85);
  color: var(--ink);
  text-align: center;
  transform: translateY(16px) scale(.95);
  transition: transform .32s cubic-bezier(.22, 1, .36, 1);
}

.modal.is-open .modal__box { transform: translateY(0) scale(1); }

.modal__title {
  margin: 0;
  font-size: clamp(1.3rem, 3.4vw, 1.7rem);
  font-weight: 900;
  letter-spacing: .06em;
}

.modal__desc {
  margin: .6rem 0 0;
  font-size: .84rem;
  line-height: 1.7;
  color: rgba(11, 11, 16, .62);
}

.modal__input {
  width: 100%;
  margin-top: 1.2rem;
  padding: .7em .9em;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 3px;
  font-family: var(--font-comic), var(--font-cn);
  font-size: 1.7rem;
  letter-spacing: .45em;
  text-indent: .45em;
  text-align: center;
  color: var(--ink);
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.modal__input::placeholder { color: rgba(11, 11, 16, .25); letter-spacing: .3em; }

.modal__input:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 4px rgba(230, 36, 41, .18);
}

.modal__input.shake { animation: shake .5s cubic-bezier(.36, .07, .19, .97); }

@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-8px); }
  40%, 60% { transform: translateX(8px); }
}

.modal__err {
  margin: .7rem 0 0;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--red);
}

.modal__actions {
  display: flex;
  justify-content: center;
  gap: .9rem;
  margin-top: 1.4rem;
}

/* ============================================================================
 * 弹窗里的表单（添加模块 / 更换背景）
 * ========================================================================== */
.modal__box--wide { width: min(460px, 100%); }
.modal__box--wide .modal__title,
.modal__box--wide .modal__desc { text-align: center; }

.field {
  display: block;
  margin-top: 1rem;
  text-align: left;
}

.field__label {
  display: block;
  margin-bottom: .45rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: rgba(11, 11, 16, .72);
}

.field__label em {
  font-style: normal;
  font-weight: 400;
  color: rgba(11, 11, 16, .38);
}

.field__input {
  width: 100%;
  padding: .6em .8em;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 3px;
  font-family: inherit;
  font-size: .95rem;
  color: var(--ink);
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.field__input:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 4px rgba(230, 36, 41, .16);
}

/* 主题色 */
.swatches { display: flex; flex-wrap: wrap; gap: .55rem; }

.swatch {
  width: 34px;
  height: 34px;
  padding: 0;
  background: var(--sw);
  border: 3px solid var(--ink);
  border-radius: 50%;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}

.swatch:hover { transform: scale(1.12); }

.swatch.is-on {
  transform: scale(1.14);
  box-shadow: 0 0 0 4px rgba(11, 11, 16, .22);
}

/* 图标 */
.iconpick { display: flex; flex-wrap: wrap; gap: .45rem; }

.iconpick__item {
  width: 40px;
  height: 40px;
  padding: 7px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 3px solid rgba(11, 11, 16, .28);
  border-radius: 6px;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease, transform .18s ease;
}

.iconpick__item svg { width: 100%; height: 100%; }
.iconpick__item:hover { transform: translateY(-2px); border-color: var(--ink); }

.iconpick__item.is-on {
  border-color: var(--red);
  color: var(--red);
  box-shadow: 0 0 0 3px rgba(230, 36, 41, .16);
}

/* 背景预览 */
.bg-preview {
  position: relative;
  height: 118px;
  margin-top: 1.1rem;
  border: 3px solid var(--ink);
  border-radius: 3px;
  background: #232a4d center / cover no-repeat;
}

.bg-preview::after {
  content: '默认背景';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: .8rem;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .78);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}

.bg-preview.has-img::after { content: '新背景'; }

/* 选本地图片 */
.filepick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .7rem;
  margin-top: .9rem;
  cursor: pointer;
}

.filepick__btn {
  padding: .55em 1.1em;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 3px;
  font-size: .85rem;
  font-weight: 700;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform .18s ease, box-shadow .18s ease;
}

.filepick:hover .filepick__btn { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.filepick__hint { font-size: .74rem; color: rgba(11, 11, 16, .5); }

/* 工具条里的按钮紧凑一点 */
.editbar .btn { padding: .5em 1em; font-size: .82rem; }

/* 服务器连不上时的离线模式：改动只保存在本机，界面上要说清楚 */
body.offline-mode .editbar { border-color: var(--yellow); }
body.offline-mode .editbar__label::after {
  content: '· 离线，仅本机生效';
  margin-left: .45em;
  color: var(--yellow);
}
body.offline-mode .edit-avatar {
  border-color: var(--yellow);
  box-shadow: 0 0 0 5px rgba(255, 203, 5, .2);
}

/* ============================================================================
 * 编辑模式下的增删控件
 * ========================================================================== */

/* 自己添加的模块：卡片右上角有删除按钮 */
.card__del {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: none;
  width: 30px;
  height: 30px;
  place-items: center;
  background: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 50%;
  color: #fff;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}

body.editing .card__del { display: grid; }
body.editing .card__no { opacity: .1; }
.card__del:hover { background: var(--red); transform: scale(1.12); }

/* 条目右上角的删除按钮 */
.entry__del {
  position: absolute;
  top: 10px;
  right: 12px;
  display: none;
  width: 28px;
  height: 28px;
  place-items: center;
  background: var(--ink);
  border-radius: 50%;
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}

body.editing .entry__del { display: grid; }
.entry__del:hover { background: var(--red); transform: scale(1.12); }

/* 「添加一条内容」—— 只在编辑模式下、且只对自己添加的模块出现 */
.add-entry {
  display: none;
  width: 100%;
  padding: .95rem;
  background: transparent;
  border: 3px dashed rgba(255, 255, 255, .42);
  border-radius: 4px;
  color: rgba(255, 255, 255, .8);
  font-family: inherit;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .06em;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}

body.editing .add-entry { display: block; }
.add-entry:hover {
  border-color: var(--accent);
  color: #fff;
  background: rgba(255, 255, 255, .07);
}

/* ============================================================================
 * 漫画风按钮
 * ========================================================================== */
.btn {
  padding: .6em 1.35em;
  border: 3px solid var(--ink);
  border-radius: 3px;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .06em;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}

.btn--primary { background: var(--red);   color: #fff;       box-shadow: 4px 4px 0 var(--ink); }
.btn--ghost   { background: var(--paper); color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }

.btn:hover  { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active { transform: translate(1px, 1px);   box-shadow: 2px 2px 0 var(--ink); }

/* ============================================================================
 * 编辑工具条
 * ========================================================================== */
.editbar {
  position: fixed;
  left: 50%;
  bottom: clamp(16px, 3.5vh, 34px);
  z-index: 55;
  display: flex;
  align-items: center;
  gap: clamp(.5rem, 1.2vw, .9rem);
  padding: .6rem .7rem .6rem 1.1rem;
  background: rgba(11, 11, 16, .93);
  border: 3px solid var(--paper);
  border-radius: 999px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .62);
  transform: translate(-50%, 160%);
  opacity: 0;
  visibility: hidden;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1),
              opacity .3s ease, visibility 0s linear .45s;
}

body.editing .editbar {
  transform: translate(-50%, 0);
  opacity: 1;
  visibility: visible;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1),
              opacity .3s ease, visibility 0s;
}

.editbar__label {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-size: .82rem;
  letter-spacing: .05em;
  color: rgba(255, 255, 255, .86);
  white-space: nowrap;
}

.editbar__dot {
  width: .5em;
  height: .5em;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 8px var(--yellow);
  animation: dot-blink 1.2s ease-in-out infinite;
}

.editbar__saved {
  min-width: 3.4em;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--yellow);
  opacity: 0;
  transition: opacity .25s ease;
  white-space: nowrap;
}

.editbar__saved.is-on { opacity: 1; }

/* 编辑时隐藏「点击继续」提示，把底部让给工具条 */
body.editing .hint { display: none; }

/* ============================================================================
 * 可编辑文字的高亮
 * ========================================================================== */
body.editing [data-edit] {
  outline: 2px dashed rgba(230, 36, 41, .9);
  outline-offset: 4px;
  border-radius: 3px;
  cursor: text;
  transition: background .16s ease, outline-color .16s ease, outline-style .16s ease;
}

body.editing [data-edit]:hover {
  outline-style: solid;
  background: rgba(255, 203, 5, .34);
}

body.editing [data-edit]:focus {
  outline: 2px solid var(--red);
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 0 0 3px rgba(230, 36, 41, .2);
}

/* 深色区域上的标题用浅黄虚线更好辨认 */
body.editing .menu-head [data-edit],
body.editing .detail-head [data-edit] {
  outline-color: rgba(255, 203, 5, .95);
}

body.editing .menu-head [data-edit]:hover,
body.editing .detail-head [data-edit]:hover {
  background: rgba(255, 203, 5, .22);
}

/* 编辑时卡片/条目不再整体浮起，免得和文字编辑抢操作 */
body.editing .card:hover  { transform: none; box-shadow: 10px 10px 0 rgba(0, 0, 0, .85); }
body.editing .entry:hover { transform: none; box-shadow: 9px 9px 0 rgba(0, 0, 0, .75); }

@media (max-width: 700px) {
  .edit-avatar { width: 44px; height: 44px; }
  .editbar {
    flex-wrap: wrap;
    justify-content: center;
    width: min(94vw, 460px);
    padding: .7rem .8rem;
    border-radius: 16px;
  }
  .editbar__label { width: 100%; justify-content: center; font-size: .76rem; }
}

/* ============================================================================
 * 减少动效偏好
 * ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .lift,
  .rope,
  .strand,
  .sfx,
  .hint,
  .hero-card,
  .hero-bg__img {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
  }
  .lift { transform: translateY(0); }
  .strand { height: 50%; }
  .rope { transform: rotate(0deg); }
  .hero-card { transform: rotate(var(--tilt)); }
  .hint { opacity: 1; }
  .page { transition-duration: .01ms; }
}