/* ============================================================
   章：终章（蜡烛 + 顶峰）与全部渐变桥 + 手账落款 + 音乐盒
   黎明配色：夜空升起暖阳。
   ============================================================ */

/* —— 渐变桥（章与章之间的色板插值） —— */
.bridge { height: 70vh; }
.bridge-2 { background: linear-gradient(180deg, #24365c 0%, #6b6a80 45%, #cfc6b8 78%, #fdfcfa 100%); }
.bridge-3 { background: linear-gradient(180deg, #fdfcfa 0%, #b3a795 35%, #4a4038 70%, #0a0908 100%); }
.bridge-4 { background: linear-gradient(180deg, #14273c 0%, #3d4560 40%, #b98d76 75%, #fdf6ec 100%); }
.bridge-5 { background: linear-gradient(180deg, #fdfcfa 0%, #8f867b 45%, #2b2622 75%, #050404 100%); }
.bridge-6 { background: linear-gradient(180deg, #0a0908 0%, #4a3f30 45%, #b9a480 75%, #efe6d4 100%); }
.bridge-7 { background: linear-gradient(180deg, #f4efe6 0%, #b8a9ab 40%, #5c5f88 70%, #223a5e 100%); }

/* —— 手账·落款（大图铺开，5 列满幅） —— */
.firma .pola { background: var(--paper); padding: 8px 8px 30px;
  box-shadow: 0 10px 28px rgba(74,56,38,.3); transform: rotate(var(--r, -3deg)); }
.firma .pola img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.firma-final { font-size: clamp(30px, 5vw, 44px); text-align: center; margin-top: 26px; color: var(--ink-warm); }

/* —— 终章 —— */
.ch-final { background: linear-gradient(180deg, #223a5e 0%, #4a5f8a 30%, #b48baa 62%, #f0b8a8 84%, #ffd9a8 100%);
  color: #f6efe9; text-align: center; }
.final-frame { width: min(640px, 92vw); margin: 0 auto; }
.final-title { font-family: var(--f-serif-es); font-style: italic; font-weight: 500;
  font-size: clamp(26px, 4.6vw, 40px); }
.final-title.grande { font-size: clamp(32px, 6vw, 54px); text-shadow: 0 4px 30px rgba(34,58,94,.5); }

/* —— 蛋糕与数字蜡烛（蜡烛本体就是大数字 2 和 3） —— */
.cake { position: relative; width: min(320px, 80vw); margin: 46px auto 10px; }
.candles { display: flex; justify-content: center; gap: 34px; margin-bottom: -10px; position: relative; z-index: 2; }
.candle { position: relative; cursor: pointer; border: none; padding: 0 6px;
  font: 900 clamp(84px, 15vw, 118px)/1 var(--f-ui);
  background: repeating-linear-gradient(45deg, #fff 0 8px, #e8506e 8px 16px);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 3px #fff;
  filter: drop-shadow(0 6px 18px rgba(122,36,80,.4)); }
.flame { position: absolute; top: -26px; left: 50%; transform: translateX(-50%);
  width: 20px; height: 30px;
  background: radial-gradient(ellipse at 50% 72%, #fff8d8 0%, #ffd977 38%, #ff9d3c 68%, transparent 74%);
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  filter: drop-shadow(0 0 12px rgba(255,200,90,.9));
  animation: parpadeo .35s ease-in-out infinite alternate; }
@keyframes parpadeo { from { transform: translateX(-50%) scale(1) rotate(-2deg); }
  to { transform: translateX(-50%) scale(1.14) rotate(2deg); } }
.candle.out .flame { display: none; }
.candle.out::after { content: "〰"; position: absolute; top: -24px; left: 50%; transform: translateX(-50%);
  color: #e6ebf5; font-size: 16px; -webkit-text-stroke: 0; }
.tier { border-radius: 10px; position: relative; z-index: 1; }
.t1 { height: 56px; margin: 0 24px; background: linear-gradient(180deg, #7a4a2b, #5d3a22); border-radius: 10px 10px 4px 4px; }
.t2 { height: 66px; background: linear-gradient(180deg, #ffdfe6, #f6b8c6); margin-top: -4px; }
.plato { height: 12px; margin: -2px -14px 0; background: #fdfcfa; border-radius: 999px; opacity: .9; }
.soplo { margin-top: 26px; }
.btn-mic { font: 600 14px var(--f-ui); padding: 11px 24px; border: none; border-radius: 999px;
  background: rgba(255,255,255,.16); color: #fff; cursor: pointer; backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.35); }
.btn-mic:hover { background: rgba(255,255,255,.28); }
.btn-mic:focus-visible { outline: 3px solid #ffd977; outline-offset: 2px; }
.btn-mic.listening { background: #ffd977; color: #6b3a10; }
.mic-status { min-height: 1.5em; font-size: 13px; margin-top: 10px; opacity: .85; }
.deseo { opacity: 0; transform: translateY(10px); transition: opacity .8s, transform .8s;
  font-family: var(--f-hand-es); font-size: 26px; margin-top: 8px; }
.deseo.on { opacity: 1; transform: none; }

/* —— confetti（复用 library 组件的规格） —— */
#confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 60; }
#confetti span { position: absolute; top: -6vh; animation: caer linear forwards; }
#confetti .pieza { width: 9px; height: 9px; border-radius: 2px; }
@keyframes caer { 0% { transform: translateY(0) rotate(0); } 90% { opacity: 1; }
  100% { transform: translateY(114vh) rotate(540deg); opacity: 0; } }

/* —— 三句话与收束 —— */
.frases { display: grid; gap: 34px; margin: 70px 0 60px; }
.frase { display: grid; gap: 8px; }
.frase .es { font-family: var(--f-serif-es); font-style: italic; font-size: clamp(19px, 3vw, 25px); }
.frase .zh { font-family: var(--f-serif-zh); font-size: 14px; letter-spacing: .18em; opacity: .8; }
/* —— 大彩虹：冲破黑暗、终会有好结果、顶峰相遇 —— */
.arcoiris-wrap { width: min(640px, 92vw); margin: 0 auto 20px; }
.arcoiris-svg { width: 100%; height: auto; display: block; overflow: visible; }
.arcos path { fill: none; stroke: var(--c); stroke-width: 17; stroke-linecap: round;
  stroke-dasharray: 900; stroke-dashoffset: 900; opacity: .96;
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--c) 55%, transparent)); }
.cima-cierre.on .arcos path { animation: arco-crece 2.2s cubic-bezier(.3,.6,.3,1) forwards;
  animation-delay: var(--d); }
@keyframes arco-crece { to { stroke-dashoffset: 0; } }
.nube ellipse { fill: #fdf3ec; opacity: .95; }
.destellos circle { fill: #fff; opacity: 0; }
.cima-cierre.on .destellos circle { animation: chispa 2.6s ease-in-out 2.4s infinite; }
.zh-cima { font-family: var(--f-serif-zh); letter-spacing: .4em; margin-top: 10px; }
.despedida-cima { margin-top: 26px; font-family: var(--f-hand-es);
  font-size: clamp(24px, 3.8vw, 34px); }
.firma-cima { margin-top: 8px; font-size: 14px; font-weight: 700; letter-spacing: .18em;
  color: #223a5e; opacity: 1; }
.volver { display: inline-block; margin-top: 44px; color: #223a5e; font-size: 13px; font-weight: 700;
  letter-spacing: .2em; border: 2px solid #223a5e; border-radius: 999px; padding: 9px 20px;
  text-decoration: none; background: rgba(255,255,255,.35); }
.volver:hover { background: rgba(255,255,255,.65); }
.volver:focus-visible { outline: 3px solid #223a5e; outline-offset: 2px; }

/* —— 音乐盒按钮：黑胶唱片（脊柱 chrome） —— */
.music-btn { position: fixed; top: 16px; right: 16px; z-index: 50; display: none;
  align-items: center; gap: 10px; padding: 7px 16px 7px 8px; border: none; border-radius: 999px;
  background: rgba(16,14,18,.6); color: #f3ede2; font: 12px var(--f-ui); cursor: pointer;
  backdrop-filter: blur(8px); box-shadow: 0 6px 22px rgba(0,0,0,.35); }
body.open .music-btn { display: inline-flex; }
.music-btn .disc { display: inline-grid; place-items: center; width: 34px; height: 34px;
  border-radius: 50%; color: #ffd977; font-size: 11px;
  background:
    radial-gradient(circle at 50% 50%, #e0504f 0 26%, #1c1a1a 27% 34%,
      #2a2726 35% 40%, #1c1a1a 41% 48%, #2a2726 49% 56%, #1c1a1a 57% 66%,
      #2a2726 67% 76%, #141212 77% 100%);
  box-shadow: inset 0 0 6px rgba(0,0,0,.8), 0 2px 8px rgba(0,0,0,.5); }
.music-btn.playing .disc { animation: girar 2.2s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .flame { animation: none; }
  .music-btn.playing .disc { animation: none; }
  #confetti span { animation: none; opacity: 0; }
}