* {
  box-sizing: border-box;
}

:root {
  --bg: #020202;
  --text-dim: rgba(248, 239, 230, 0.22);
  --text-glow: rgba(255, 241, 219, 0.95);
  --spot-x: 50vw;
  --spot-y: 50vh;
  --spot-size: 230px;
  --wake: 0;
}

html,
body {
  margin: 0;
  width: 100%;
  min-height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: #f8f2e8;
  font-family: "Noto Serif SC", serif;
  cursor: crosshair;
}

body {
  min-height: 100vh;
}

.scene {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(37, 31, 61, 0.3), transparent 52%),
    radial-gradient(circle at 20% 20%, rgba(102, 36, 36, 0.12), transparent 26%),
    #000;
}

.final-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity 2.8s ease-in-out;
  mix-blend-mode: screen;
  filter: blur(0.2px);
}

.scene.final .final-canvas {
  opacity: 1;
}

.combo-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s ease-in-out;
  mix-blend-mode: screen;
  filter: blur(0.2px);
}

.combo-canvas.show {
  opacity: 1;
}

.combo-line {
  position: absolute;
  left: 50%;
  top: 54%;
  transform: translate(-50%, -50%);
  z-index: 25;
  width: min(760px, calc(100vw - 80px));
  text-align: center;
  font-size: clamp(18px, 2vw, 26px);
  letter-spacing: 0.06em;
  line-height: 1.6;
  color: rgba(255, 248, 232, 0.94);
  text-shadow:
    0 0 14px rgba(255, 226, 154, 0.26),
    0 0 30px rgba(175, 120, 255, 0.20);
  filter: blur(0.35px);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 1.4s ease-in-out,
    transform 2.2s ease-in-out;
}

.combo-line.show {
  opacity: 1;
  transform: translate(-50%, -54%);
}

.hud {
  position: absolute;
  left: 50%;
  top: 24px;
  transform: translateX(-50%);
  z-index: 26;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 248, 232, 0.46);
  text-shadow: 0 0 18px rgba(175, 120, 255, 0.10);
  filter: blur(0.25px);
  user-select: none;
  pointer-events: none;
  opacity: 0.9;
  transition: opacity 1.8s ease-in-out;
}

.hud-count {
  color: rgba(255, 248, 232, 0.78);
  text-shadow:
    0 0 10px rgba(255, 226, 154, 0.18),
    0 0 20px rgba(175, 120, 255, 0.12);
}

.hud-total {
  opacity: 0.65;
}

.scene.final .hud {
  opacity: 0;
}

.final-line {
  position: absolute;
  left: 50%;
  top: 54%;
  transform: translate(-50%, -50%);
  z-index: 27;
  width: min(820px, calc(100vw - 80px));
  text-align: center;
  font-size: clamp(20px, 2.2vw, 30px);
  letter-spacing: 0.07em;
  line-height: 1.65;
  color: rgba(255, 248, 232, 0.96);
  text-shadow:
    0 0 16px rgba(255, 226, 154, 0.28),
    0 0 34px rgba(175, 120, 255, 0.22);
  filter: blur(0.25px);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 2.2s ease-in-out,
    transform 3.2s ease-in-out;
}

.final-line.show {
  opacity: 1;
  transform: translate(-50%, -56%);
}

.scene.final .combo-line {
  opacity: 0;
}

.poem-space {
  position: relative;
  width: 100%;
  height: 100%;
}

.overlay,
.mist,
.spotlight {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.overlay {
  z-index: 20;
  background:
    radial-gradient(
      circle var(--spot-size) at var(--spot-x) var(--spot-y),
      rgba(0, 0, 0, 0.05) 0,
      rgba(0, 0, 0, 0.12) 38%,
      rgba(0, 0, 0, 0.92) 72%
    );
}

.mist {
  z-index: 21;
  mix-blend-mode: screen;
  opacity: 0.18;
  background:
    radial-gradient(circle at 20% 30%, rgba(100, 120, 255, 0.11) 0 24%, transparent 25%),
    radial-gradient(circle at 80% 70%, rgba(255, 140, 90, 0.09) 0 25%, transparent 26%),
    radial-gradient(circle at 65% 25%, rgba(230, 230, 255, 0.05) 0 18%, transparent 19%);
  animation: drift 14s ease-in-out infinite alternate;
}

.spotlight {
  z-index: 10;
  background:
    radial-gradient(
      circle calc(var(--spot-size) * 0.56) at var(--spot-x) var(--spot-y),
      rgba(255, 243, 210, 0.2),
      rgba(255, 186, 134, 0.08) 58%,
      transparent 100%
    );
  mix-blend-mode: screen;
  filter: blur(16px);
}

.poem-node {
  position: absolute;
  width: min(280px, 30vw);
  min-width: 180px;
  --wake: 0;
  transform: translate(-50%, -50%) scale(calc(0.98 + var(--wake) * 0.06));
  opacity: calc(0.16 + var(--wake) * 0.84);
  filter: blur(calc(1.2px - var(--wake) * 1.05px));
  transition: none;
}

.poem-node.active {
  /* active 仍保留，但视觉主要由 --wake 渐变驱动 */
}

.visual-shell {
  position: relative;
  width: 100%;
  height: 190px;
  margin-bottom: 14px;
}

.visual {
  position: absolute;
  inset: 0;
  opacity: calc(0.06 + var(--wake) * 0.94);
  transform: scale(calc(0.985 + var(--wake) * 0.02));
  filter: blur(calc(2.4px - var(--wake) * 1.6px));
  transition: none;
  mix-blend-mode: screen;
}

.poem-node.active .visual {
  /* 由 --wake 控制 */
}

.line {
  position: relative;
  z-index: 2;
  margin: 0;
  font-size: clamp(18px, 2vw, 28px);
  letter-spacing: 0.08em;
  color: rgba(248, 241, 232, calc(0.12 + var(--wake) * 0.78));
  text-shadow:
    0 0 10px rgba(255, 226, 154, calc(var(--wake) * 0.24)),
    0 0 26px rgba(175, 120, 255, calc(var(--wake) * 0.18));
  transform: translateY(calc((1 - var(--wake)) * 2px));
  filter: blur(calc(1.25px - var(--wake) * 1.05px));
  opacity: calc(0.20 + var(--wake) * 0.80);
  animation: text-float 9s ease-in-out infinite;
  mix-blend-mode: screen;
}

.line::after {
  content: "";
  position: absolute;
  left: -12px;
  right: -12px;
  top: -10px;
  bottom: -10px;
  background: radial-gradient(circle at 35% 45%, rgba(255, 228, 170, 0.10), transparent 60%);
  filter: blur(10px);
  opacity: calc(var(--wake) * 0.65);
  pointer-events: none;
  z-index: -1;
}

.particles {
  position: absolute;
  inset: -18px -18px -70px -18px;
  overflow: visible;
  mix-blend-mode: screen;
  opacity: calc(0.12 + var(--wake) * 0.88);
  filter: blur(calc(1.8px - var(--wake) * 1.1px));
}

.particle-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.particle-canvas-shape {
  border-radius: 16px;
}

.scene.final .poem-node {
  opacity: 0;
  filter: blur(3px);
  transform: translate(-50%, -50%) scale(0.98);
  transition:
    opacity 2.8s ease-in-out,
    filter 2.8s ease-in-out,
    transform 2.8s ease-in-out;
}

/* 旧的 SVG / DOM 粒子 / 明确轮廓图案已弃用：所有意象由 canvas 粒子聚合实现 */

.poem-node[data-type="glitch"] .line {
  font-style: italic;
}

/* 文字节奏统一减慢：整体像呼吸/潮汐，不做跳变 */
.poem-node[data-type="glitch"] .line {
  animation-duration: 10.5s;
}
.poem-node[data-type="cactus"] .line {
  animation-duration: 9.8s;
}
.poem-node[data-type="melt"] .line {
  animation-duration: 11.2s;
}
.poem-node[data-type="evaporate"] .line {
  animation-duration: 9.2s;
}
.poem-node[data-type="folded"] .line {
  animation-duration: 12.2s;
}
.poem-node[data-type="shadow"] .line {
  animation-duration: 13.6s;
}

@keyframes drift {
  from {
    transform: translate3d(-1.5%, -1%, 0) scale(1);
  }
  to {
    transform: translate3d(1.5%, 1.2%, 0) scale(1.02);
  }
}

@keyframes breathe {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(0.95);
    opacity: 0.7;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.08);
    opacity: 1;
  }
}

@keyframes text-flicker {
  0%,
  100% {
    text-shadow:
      0 0 8px rgba(255, 226, 154, 0.32),
      0 0 24px rgba(215, 131, 255, 0.18);
  }
  45% {
    text-shadow:
      -2px 0 rgba(255, 0, 102, 0.35),
      2px 0 rgba(90, 190, 255, 0.32),
      0 0 20px rgba(255, 196, 123, 0.25);
  }
}

@keyframes text-float {
  0%,
  100% {
    transform: translateY(calc((1 - var(--wake)) * 2px));
  }
  50% {
    transform: translateY(calc(-2px - var(--wake) * 2px));
  }
}

@media (max-width: 900px) {
  :root {
    --spot-size: 180px;
  }

  .poem-node {
    width: min(220px, 42vw);
    min-width: 140px;
  }

  .visual-shell {
    height: 160px;
  }
}