/* 崽签页（手账版）：签筒、竹签飞出、红色签纸 */
.qn-shake { display: flex; align-items: center; gap: 22px; margin: 18px 0 6px; }
.qn-tube { width: 86px; height: 132px; position: relative; flex: none; cursor: pointer; outline: none; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.qn-tube:focus-visible { outline: 2px dashed var(--pb-red); outline-offset: 6px; }
.qn-tube i { position: absolute; bottom: 74px; left: var(--x); width: 8px; height: var(--h); background: linear-gradient(#f0d698, #cfa95f);
  border: 1px solid #a88446; border-radius: 2px 2px 0 0; }
.qn-tube b { position: absolute; left: 0; right: 0; bottom: 0; height: 96px; border-radius: 8px 8px 16px 16px; border: 2.5px solid #5a3a1c;
  background: repeating-linear-gradient(90deg, #a06e3e 0 7px, #8a5c31 7px 14px); display: grid; place-items: center; box-shadow: 0 6px 0 rgba(0,0,0,.08); }
.qn-tube b em { font-style: normal; font-family: var(--pb-hand); writing-mode: vertical-rl; letter-spacing: 6px; color: #fbe7bd; font-size: 17px;
  background: #b4442f; padding: 8px 3px; border-radius: 3px; }
.qn-tube.is-shaking { animation: qn-shake .7s ease-in-out; }
@keyframes qn-shake {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(-14deg) translateY(-4px); } 30% { transform: rotate(12deg); }
  45% { transform: rotate(-12deg) translateY(-3px); } 60% { transform: rotate(10deg); }
  75% { transform: rotate(-6deg); } 90% { transform: rotate(3deg); }
}
.qn-fly { position: absolute; left: 38px; bottom: 80px; width: 10px; height: 70px; border-radius: 2px; opacity: 0;
  background: linear-gradient(#ffe6a8, #d9b06a); border: 1px solid #a88446; box-shadow: 0 0 14px rgba(255, 210, 120, .8); }
.qn-fly.is-on { animation: qn-fly .9s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes qn-fly {
  0% { opacity: 1; transform: translateY(0) rotate(0); }
  60% { opacity: 1; transform: translate(26px, -90px) rotate(28deg); }
  100% { opacity: 0; transform: translate(60px, 40px) rotate(80deg); }
}
.qn-shake-side { min-width: 0; }
.qn-shake-tip { font-size: 18px; color: var(--pb-ink2); line-height: 1.5; margin: 0 0 10px; }
.qn-shake-side .pb-btn { min-width: 132px; }
.qn-shake-side .pb-muted { margin-top: 8px; }

/* 签纸 */
.qn-slip { background: #c94e36; border-radius: 6px; padding: 18px 16px 16px; color: #fff6e4; position: relative; margin: 30px 2px 10px;
  box-shadow: 0 8px 18px rgba(150, 50, 30, .3); transform: rotate(-.6deg); }
.qn-slip.is-in { animation: qn-in .55s cubic-bezier(.2, .8, .2, 1.2); }
@keyframes qn-in { from { opacity: 0; transform: translateY(26px) rotate(-6deg) scale(.94); } to { opacity: 1; transform: rotate(-.6deg); } }
.qn-no { font-family: var(--pb-hand); font-size: 14px; letter-spacing: 6px; opacity: .9; margin: 0; }
.qn-title { font-family: var(--pb-hand); font-size: 34px; letter-spacing: 8px; margin: 4px 0 12px; font-weight: 700; color: #fff6e4; }
.qn-stamp { position: absolute; right: 14px; top: 14px; border-color: #fff6e4 !important; color: #fff6e4 !important; width: 60px; height: 60px; }
.qn-poem { background: #fff6e4; color: #4a2a1a; border-radius: 4px; padding: 14px 10px; font-family: var(--pb-hand);
  font-size: 19px; line-height: 2; text-align: center; letter-spacing: 3px; }
.qn-poem span { display: block; }
.qn-for { font-size: 12px; text-align: right; margin: 10px 2px 0; opacity: .85; }

.qn-yj { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.qn-yj .pb-paper { margin: 10px 0 0; padding: 12px 14px; }
.qn-yj b { font-size: 26px; display: block; margin-bottom: 4px; }
.qn-yi { color: var(--pb-green); } .qn-ji { color: var(--pb-red); }
.qn-yj ul { list-style: none; margin: 0; padding: 0; font-size: 14.5px; line-height: 1.9; }
.qn-tip { font-size: 20px; line-height: 1.6; color: var(--pb-ink); margin: 6px 0; }

@media (prefers-reduced-motion: reduce) { .qn-tube.is-shaking, .qn-fly.is-on, .qn-slip.is-in { animation: none; } }
@media (max-width: 380px) { .qn-shake { gap: 14px; } .qn-title { font-size: 29px; letter-spacing: 5px; } .qn-poem { font-size: 17px; letter-spacing: 2px; } }