/* ================= 第五幕 豆豆来了 ================= */
#ch-doudou { padding: calc(var(--vh) * 12) 0 calc(var(--vh) * 10); }
.dd-wrap { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.dd-date { font-size: 15px; color: var(--gold3); letter-spacing: .14em; }
.dd-pet { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.dd-frame { width: min(74vw, 330px); padding: 12px 12px 14px; transform: rotate(-1.5deg); touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.dd-photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 12px; border: 3px solid var(--ink); background: #f3d9c0; }
.dd-photo img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 85%; transition: transform .3s ease; pointer-events: none; }
.dd-frame.petting .dd-photo img { transform: scale(1.035, .975); }
.dd-frame.binky { animation: dd-binky 1.15s var(--ease-pop); }
@keyframes dd-binky { 0% { transform: rotate(-1.5deg); } 22% { transform: translateY(-40px) rotate(9deg) scale(1.03); } 42% { transform: translateY(0) rotate(-3deg) scale(1.02, .97); } 60% { transform: translateY(-18px) rotate(-8deg); } 80% { transform: translateY(0) rotate(1deg); } 100% { transform: rotate(-1.5deg); } }
.dd-tape { position: absolute; z-index: 2; width: 66px; height: 20px; background: rgba(255, 211, 107, .8); border: 1.5px solid rgba(42, 26, 18, .2); }
.dd-frame .t1 { left: -14px; top: 12px; transform: rotate(-38deg); }
.dd-frame .t2 { right: -14px; top: 12px; transform: rotate(38deg); background: rgba(255, 158, 196, .8); }
.dd-hint { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ink); background: rgba(255, 246, 232, .94); border: 2.5px solid var(--ink); border-radius: 99px; padding: 5px 14px; white-space: nowrap; pointer-events: none; transition: opacity .6s; box-shadow: 0 3px 0 rgba(42, 26, 18, .3); }
.dd-hint.gone { opacity: 0; }
.dd-hand { width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--pink); border: 2px solid var(--ink); animation: dd-hand 1.5s ease-in-out infinite; }
@keyframes dd-hand { 0%, 100% { transform: translateX(-9px); } 50% { transform: translateX(9px); } }
.dd-say { position: absolute; right: -8px; top: 30px; z-index: 3; max-width: 70%; padding: 6px 12px; font-size: 15px; line-height: 1.4; color: var(--ink); background: #fffaf0; border: 2.5px solid var(--ink); border-radius: 16px 16px 4px 16px; box-shadow: 0 3px 0 rgba(42, 26, 18, .3); opacity: 0; transform: scale(.6) translateY(8px); transform-origin: 90% 100%; transition: opacity .3s, transform .4s var(--ease-pop); pointer-events: none; word-break: keep-all; overflow-wrap: anywhere; }
.dd-say.on { opacity: 1; transform: none; }
.dd-meter { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--txt); }
.dm-bar { display: block; width: 130px; height: 14px; border: 2.5px solid var(--ink); border-radius: 99px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.dm-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffd3e3, #ff7fb0); transition: width .3s ease; }
.dd-meter b { min-width: 3.2em; font-size: 15px; color: #fff2c4; white-space: nowrap; }
.dd-full .dm-bar i { background: linear-gradient(90deg, #ffd36b, #ff7fb0, #ffd36b); background-size: 200% 100%; animation: dd-shine 2.4s linear infinite; }
@keyframes dd-shine { to { background-position: -200% 0; } }
.dd-album { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; width: min(100%, 400px); margin-top: 6px; }
.dd-pol { position: relative; margin: 0; background: #fffaf2; padding: 8px 8px 4px; border: 2.5px solid var(--ink); border-radius: 4px; box-shadow: 0 4px 0 rgba(42, 26, 18, .3), 0 10px 22px rgba(8, 6, 40, .3); transform: rotate(var(--r)); cursor: zoom-in; }
.dd-pol img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 2px solid var(--ink); border-radius: 2px; background: #f3d9c0; }
.dd-pol figcaption { text-align: center; font-size: 14px; color: var(--ink); margin-top: 3px; min-height: 1.5em; }
.dd-pol .dd-tape { left: 50%; top: -10px; width: 50px; height: 18px; margin-left: -25px; transform: rotate(-4deg); }
.dd-pol:nth-child(2n) .dd-tape { background: rgba(255, 158, 196, .8); transform: rotate(5deg); }
.dd-line { text-align: center; font-size: clamp(16px, 4.4vw, 19px); word-break: keep-all; overflow-wrap: anywhere; }
@media (min-width: 900px) {
  .dd-wrap { display: grid; grid-template-columns: auto auto; grid-template-areas: 'head head' 'pet album' 'line line'; justify-content: center; align-items: center; column-gap: 56px; row-gap: 26px; width: min(100% - 64px, 920px); }
  .dd-wrap > .ch-head { grid-area: head; }
  .dd-pet { grid-area: pet; }
  .dd-album { grid-area: album; width: 360px; }
  .dd-line { grid-area: line; }
}