/* ============================================================
   章：手账拼贴（gate / portada / aviso）
   牛皮纸 + 白纸卡 + 胶带 + 手写。她画的火柴人当邮票。
   ============================================================ */

/* —— GATE 封面（墨西哥生日派对：papel picado + 彩纸 + 气球） —— */
.gate { position: fixed; inset: 0; z-index: 60; display: grid;
  grid-template-rows: 1fr auto; align-items: end; justify-items: center;
  padding-bottom: 5vh; overflow: hidden;
  transition: transform 1s cubic-bezier(.6,.05,.4,1), opacity 1s; }
.gate.away { transform: translateY(-104%); opacity: .4; }
.gate-fiesta { position: absolute; inset: 0;
  background:
    radial-gradient(3px 3px at 12% 34%, #ffd977 50%, transparent 51%),
    radial-gradient(2.5px 2.5px at 78% 22%, #79d4b8 50%, transparent 51%),
    radial-gradient(3px 3px at 32% 58%, #ff8fb0 50%, transparent 51%),
    radial-gradient(2px 2px at 62% 44%, #ffd977 50%, transparent 51%),
    radial-gradient(2.5px 2.5px at 88% 62%, #8fd0ff 50%, transparent 51%),
    radial-gradient(2px 2px at 22% 78%, #79d4b8 50%, transparent 51%),
    radial-gradient(2.5px 2.5px at 48% 30%, #ff8fb0 50%, transparent 51%),
    radial-gradient(2px 2px at 70% 80%, #ffd977 50%, transparent 51%),
    linear-gradient(180deg, #7c2450 0%, #99306a 40%, #5d2a63 100%); }
/* papel picado 彩纸旗：两排，剪纸镂空感 */
.picado { position: absolute; left: -2%; right: -2%; height: 64px; display: block;
  background:
    radial-gradient(9px 9px at 24px 22px, transparent 62%, var(--pp, #ffd977) 63%),
    radial-gradient(7px 7px at 52px 30px, transparent 62%, var(--pp, #ffd977) 63%);
  -webkit-mask: radial-gradient(22px 26px at 40px 0, #000 70%, transparent 71%);
  mask-image: radial-gradient(38px 60px at 40px 0%, #000 98%, transparent 100%);
  mask-size: 80px 100%; -webkit-mask-size: 80px 100%; mask-repeat: repeat-x; }
.picado-1 { top: 0; --pp: #ffd977; background-color: #e4517e;
  clip-path: polygon(0 0, 100% 0, 100% 68%, 97.5% 100%, 95% 68%, 92.5% 100%, 90% 68%, 87.5% 100%, 85% 68%, 82.5% 100%, 80% 68%, 77.5% 100%, 75% 68%, 72.5% 100%, 70% 68%, 67.5% 100%, 65% 68%, 62.5% 100%, 60% 68%, 57.5% 100%, 55% 68%, 52.5% 100%, 50% 68%, 47.5% 100%, 45% 68%, 42.5% 100%, 40% 68%, 37.5% 100%, 35% 68%, 32.5% 100%, 30% 68%, 27.5% 100%, 25% 68%, 22.5% 100%, 20% 68%, 17.5% 100%, 15% 68%, 12.5% 100%, 10% 68%, 7.5% 100%, 5% 68%, 2.5% 100%, 0 68%);
  mask: none; -webkit-mask: none; }
.picado-2 { top: 58px; height: 52px; background-color: #2fa8a0; --pp: #fff;
  clip-path: polygon(0 0, 100% 0, 100% 60%, 96.6% 100%, 93.3% 60%, 90% 100%, 86.6% 60%, 83.3% 100%, 80% 60%, 76.6% 100%, 73.3% 60%, 70% 100%, 66.6% 60%, 63.3% 100%, 60% 60%, 56.6% 100%, 53.3% 60%, 50% 100%, 46.6% 60%, 43.3% 100%, 40% 60%, 36.6% 100%, 33.3% 60%, 30% 100%, 26.6% 60%, 23.3% 100%, 20% 60%, 16.6% 100%, 13.3% 60%, 10% 100%, 6.6% 60%, 3.3% 100%, 0 60%);
  mask: none; -webkit-mask: none; opacity: .92; }
.gate-cover { position: relative; align-self: center; text-align: center;
  color: #fff6ea; text-shadow: 0 3px 26px rgba(60,10,40,.55); padding-top: 12vh; }
.cover-grito { font-size: clamp(30px, 5.4vw, 52px); color: #ffd977; transform: rotate(-3deg); }
.cover-titulo { font-family: var(--f-hand-es); font-size: clamp(64px, 13vw, 140px);
  line-height: .95; margin: 2px 0 6px; letter-spacing: .02em; }
.cover-linea { font-size: clamp(26px, 4.6vw, 40px); display: flex; gap: 18px; justify-content: center;
  margin: 6px 0 10px; }
.cover-linea .glob { animation: flota 3.4s ease-in-out infinite; display: inline-block; }
.cover-linea .g2 { animation-delay: 1.2s; }
.cover-linea .pinata { animation: bailar 2.6s ease-in-out infinite; display: inline-block; }
@keyframes flota { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes bailar { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
.cover-fecha { font-size: 13px; letter-spacing: .4em; color: #ffd977; }
.cover-de { font-size: 13px; letter-spacing: .1em; opacity: .9; margin-top: 4px; }
/* 信封：横向长条，不触底；确认按钮独立一行居中，避免对齐问题 */
.envelope { position: relative; width: min(760px, 92vw); background: rgba(255,253,247,.94);
  backdrop-filter: blur(10px); margin-bottom: 7vh;
  border: 1.5px solid #d9c9a8; border-radius: 16px; padding: 24px 40px 22px;
  box-shadow: 0 24px 70px rgba(20,14,8,.5); display: grid; gap: 8px; text-align: center; }
#gateBtn { justify-self: center; margin-top: 4px; }

/* —— 飘浮的派对元素（JS 驱动漫游 + 鼠标扰动） —— */
.flotantes { position: absolute; inset: 0; overflow: hidden; z-index: 1; }
.flo { position: absolute; top: 0; left: 0; will-change: transform;
  filter: drop-shadow(0 6px 14px rgba(60,10,40,.35)); user-select: none; }
/* 裸数字 23：与蛋糕上的数字蜡烛同款糖纹描白边 */
.flo-23 { font: 900 1.6em/1 var(--f-ui);
  background: repeating-linear-gradient(45deg, #fff 0 6px, #e8506e 6px 12px);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 2px #fff; }
.gate-cover, .envelope { z-index: 2; }
.envelope::before { content: ""; position: absolute; left: 14px; right: 14px; top: -1px; height: 12px;
  background: repeating-linear-gradient(90deg, var(--straw) 0 14px, var(--paper) 14px 28px, #6e9fc0 28px 42px, var(--paper) 42px 56px);
  border-radius: 10px 10px 0 0; opacity: .85; }
.estampilla { position: absolute; top: 18px; right: 18px; width: 52px; padding: 5px;
  background: var(--paper); border: 2px dashed #b49a6d; transform: rotate(5deg); }
.env-to { font-family: var(--f-hand-es); font-size: 34px; margin-top: 6px; }
.env-de { font-size: 12px; opacity: .65; letter-spacing: .06em; }
.env-q { display: grid; gap: 2px; margin-top: 14px; font-family: var(--f-serif-es); font-size: 19px; }
.env-q small { font-family: var(--f-ui); font-size: 12px; opacity: .6; letter-spacing: .1em; }
#gateInput { font: 18px/1.4 var(--f-hand-es); text-align: center; padding: 10px 14px;
  border: none; border-bottom: 2px solid var(--ink-warm); background: transparent; outline: none; }
#gateInput:focus-visible { border-bottom-color: var(--straw); }
#gateBtn { font: 600 15px var(--f-ui); margin: 8px auto 0; padding: 10px 34px;
  border: none; border-radius: 999px; background: var(--ink-warm); color: var(--paper); cursor: pointer; }
#gateBtn:hover { background: var(--straw); }
#gateBtn:focus-visible { outline: 3px solid var(--straw); outline-offset: 2px; }
.gate-msg { min-height: 1.4em; font-size: 13px; color: #a05a2c; }
.gate.shake-x .envelope { animation: shake .4s; }
@keyframes shake { 25% { transform: translateX(-8px);} 75% { transform: translateX(8px);} }

/* —— 手账场景骨架 —— */
.ch-scrap { background: var(--kraft);
  background-image: radial-gradient(rgba(120,90,40,.07) 1px, transparent 1.4px); background-size: 9px 9px; }
.scrap-frame { position: relative; width: min(640px, 92vw); margin: 0 auto; background: var(--paper);
  padding: 46px 42px 40px; border-radius: 4px; box-shadow: 0 12px 36px rgba(74,56,38,.2);
  transform: rotate(-.6deg); }
#s-aviso .scrap-frame { transform: rotate(.5deg); background: transparent; box-shadow: none; padding: 0; }
.washi { position: absolute; top: -13px; left: 50%; width: 110px; height: 28px;
  background: rgba(232,115,127,.5); transform: translateX(-50%) rotate(-3deg); box-shadow: 0 1px 4px rgba(0,0,0,.1); }
.washi.w-left { left: 18%; background: rgba(110,159,192,.45); }

/* —— portada —— */
#pTitulo { font-family: var(--f-hand-es); font-size: clamp(46px, 9vw, 76px); line-height: 1.05; }
.apodo { font-size: clamp(24px, 4.5vw, 34px); color: var(--straw); margin-top: 4px; }
.chip-badge { position: absolute; top: -22px; right: -18px; width: 74px; height: 74px; display: grid; place-items: center;
  background: var(--straw); color: var(--paper); font: 700 30px var(--f-hand-es);
  border-radius: 50% 46% 52% 48%; transform: rotate(8deg); box-shadow: 0 8px 20px rgba(232,115,127,.45); }
.chip-badge::after { content: "años · 岁"; position: absolute; bottom: 9px; font: 400 9px var(--f-ui); letter-spacing: .1em; }

/* —— aviso：聊天贴纸 + 翻卡 —— */
.chatcard { position: relative; background: var(--paper); border-radius: 6px; padding: 30px 26px 24px;
  box-shadow: 0 10px 30px rgba(74,56,38,.18); display: grid; gap: 12px; transform: rotate(-1.2deg); }
.bubble { max-width: 78%; padding: 10px 16px; border-radius: 18px; font-size: 15px; position: relative; }
.bubble.ella { justify-self: start; background: #e9e9eb; color: #111; border-bottom-left-radius: 4px; }
.bubble.ella time { display: block; font-size: 10px; opacity: .5; margin-top: 4px; }
.bubble.el { justify-self: end; background: #3a86e0; color: #fff; border-bottom-right-radius: 4px; }
.flipcard { perspective: 1100px; display: block; width: 100%; margin-top: 34px;
  background: none; border: none; cursor: pointer; text-align: inherit; color: inherit; font: inherit; }
.flipcard:focus-visible { outline: 3px solid var(--straw); outline-offset: 4px; border-radius: 8px; }
.flip-inner { position: relative; display: block; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.5,.1,.3,1.2); min-height: 170px; }
.flipcard.flipped .flip-inner { transform: rotateY(180deg); }
.flip-face { position: absolute; inset: 0; backface-visibility: hidden; display: grid; align-content: center; gap: 8px;
  background: var(--paper); border-radius: 8px; padding: 26px 30px; box-shadow: 0 10px 30px rgba(74,56,38,.18); }
.flip-front { transform: rotate(.8deg); }
.flip-front .es { font-family: var(--f-hand-es); font-size: 26px; }
.flip-front .zh, .flip-back .zh { font-size: 13px; opacity: .7; letter-spacing: .06em; }
.flip-front .hint { margin-top: 14px; font-size: 11px; letter-spacing: .18em; opacity: .5; text-transform: uppercase; }
.flip-back { transform: rotateY(180deg); background: var(--straw); color: var(--paper); }
.flip-back .es { font-family: var(--f-hand-es); font-size: 24px; }
.flip-back .zh { opacity: .92; }

/* —— 渐变桥 1：纸 → 夜 —— */
.bridge-1 { height: 85vh; position: relative;
  background: linear-gradient(180deg, var(--kraft) 0%, #c9b394 22%, #7d7a86 55%, #33415f 78%, var(--night-0) 100%); }
.b1-stars { position: absolute; inset: 30% 0 0; opacity: .8;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 45% 60%, #ffe9bd 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 70% 40%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 85% 75%, #ffe9bd 50%, transparent 51%),
    radial-gradient(1px 1px at 60% 85%, #fff 50%, transparent 51%);
  mask-image: linear-gradient(180deg, transparent, #000 60%); }

/* —— firma：落款大图铺开（不拘泥中间） —— */
.firma .scrap-frame { width: min(1150px, 94vw); }
.firma .polas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin: 32px 0; }
.firma .pola { width: auto; padding: 8px 8px 30px; }
.firma .pola img { aspect-ratio: 3/4; }
@media (max-width: 900px) { .firma .polas { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (max-width: 560px) { .firma .polas { grid-template-columns: repeat(2, 1fr); } }

/* —— firma：指向火柴人的可爱弯箭头 —— */
.flecha-guia { position: relative; height: 96px; margin-top: 6px; }
.flecha-label { position: absolute; left: 50%; transform: translateX(-90%) rotate(-4deg);
  font-size: 22px; color: #7a4a2b; }
.flecha-svg { position: absolute; left: 55%; top: 18px; width: 110px; }
.flecha-svg path { stroke: #7a4a2b; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 4 9; }

@media (max-width: 640px) {
  .scrap-frame { padding: 36px 24px 30px; width: min(640px, 86vw); transform: rotate(-.3deg); }
  #s-aviso .scrap-frame { transform: rotate(.3deg); }
  .chip-badge { right: -4px; top: -16px; width: 62px; height: 62px; font-size: 24px; }
  .gate-cover { padding-top: 5vh; }
}