/* 大屏用固定视口两行布局；min-height/min-width 防止 Grid 子项撑出滚动条。 */
.screen-page { height: 100vh; height: 100dvh; overflow: hidden; display: grid; grid-template-rows: minmax(0, 1fr) 76px; background: radial-gradient(ellipse at 65% 72%, #11302a70, transparent 58%), var(--bg); }
.screen-layout { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; margin: 0 4%; }
.qr-area { position: relative; width: calc(100% - 16px); margin: 0 8px 12px; padding: 8px; }
.qr-orbit { position: absolute; inset: 0; border: 1px solid #baf5d826; border-radius: 25px; transform: rotate(-5deg); background: #baf5d803; }
.qr-card { position: relative; background: #fff; padding: 8px; border-radius: 15px; box-shadow: 0 0 60px #8be9b912; aspect-ratio: 1; display: grid; place-items: center; }
#qr-canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; border-radius: 4px; }
#qr-error { color: #18332c; padding: 15px; font-size: 13px; line-height: 1.6; }
.qr-tag { position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 8px 12px; border: 1px solid #314b40; border-radius: 20px; background: #162b23; color: #d3eedc; font-size: 11px; }
.qr-tag .live-dot { margin-right: 5px; }
.preview-note { max-width: 340px; color: #baa787; font-size: 10px; line-height: 1.5; margin-top: 10px; }
.wall { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) 46px; min-width: 0; min-height: 0; background-image: radial-gradient(#b9e2d510 1px, transparent 1px); background-size: 28px 28px; }
/* 留言占满整个画布，二维码仅在空闲位置浮现，不保留专栏或底部空间。 */
.wall-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; min-height: 0; overflow: hidden; }
.bubble-canvas { position: relative; overflow: hidden; min-width: 0; min-height: 0; isolation: isolate; }
.qr-overlay { position: absolute; inset: 0; pointer-events: none; visibility: hidden; opacity: 0; }
/* 隐藏不做延迟淡出，防止淡出过程中仍挡住到来的留言；仅出现时淡入。 */
.qr-overlay.is-visible { visibility: visible; opacity: 1; transition: opacity .35s; }
.qr-float { position: absolute; width: clamp(180px, 22vw, 260px); left: 0; top: 0; animation: qr-float 18s ease-in-out infinite; }
.qr-overlay.is-visible .qr-float { pointer-events: auto; }
.qr-float:hover { animation-play-state: paused; }
/* 整张码只作低速、小幅平移，不旋转或缩放；内部定位图案仍保持固定。 */
@keyframes qr-float {
  0%, 100% { transform: translateY(12px); }
  50% { transform: translateY(-12px); }
}
.wall-empty { position: absolute; inset: auto 16px 20px; display: flex; justify-content: center; text-align: center; color: #7e9f90; }
.wall-empty-content { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 100%; }
.wall-empty-content > span { font-size: 40px; color: #baf5d8; font-weight: 200; }
.wall-empty p { font-size: 17px; letter-spacing: 2px; }
.wall-empty small { color: #607e71; font-size: 11px; }
.wall-bottom { text-align: center; align-self: center; color: #6f9080; font-size: 10px; letter-spacing: 2px; }
.wall-bottom .live-dot { width: 4px; height: 4px; margin-right: 8px; }
.wall-bottom > span:last-child { margin-left: 14px; }
/* 入场前测量并留出间距；所有气泡等速直线上浮，不再用透明度掩盖重叠。 */
.bubble { position: absolute; top: 100%; width: max-content; max-width: min(360px, 80%); will-change: transform; animation: bubble-rise var(--duration) linear both; pointer-events: none; }
.bubble.measuring { visibility: hidden; animation: none; }
.bubble-body { position: relative; padding: 19px 24px; border: 1px solid rgba(226, 255, 241, .23); border-radius: 25px 25px 25px 8px; background: linear-gradient(130deg, var(--color-a), var(--color-b)); box-shadow: inset 0 1px 0 #ffffff12, 0 10px 36px #00000012; color: #f0fff7; font-size: clamp(16px, 1.3vw, 23px); line-height: 1.65; overflow-wrap: anywhere; }
.bubble-body::after { content: ""; position: absolute; top: 9px; left: 17px; width: 23px; height: 2px; border-radius: 2px; background: #ffffff26; }
/* 固定图片显示区域，图片解码前就预留高度，防止上浮路径测量后跳动。 */
.bubble.has-image { width: 280px; }
.bubble-image { display: block; width: 100%; height: 150px; border-radius: 12px; object-fit: contain; background: #07131166; }
.bubble-placeholder { display: grid; place-items: center; border: 1px dashed #ffffff40; color: #b6cbbf; font-size: 12px; }
.bubble-image + p { margin-top: 10px; }
@keyframes bubble-rise {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  8% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translate3d(0, calc(var(--travel) * -1), 0); opacity: 0; }
}
.screen-footer { margin: 0 4%; border-top: 1px solid var(--line); gap: 14px; }
.screen-footer > p { color: #758b82; font-size: 10px; letter-spacing: 1.2px; }
.footer-line { display: inline-block; height: 9px; border-left: 1px solid #496055; margin: 0 12px; }
.footer-actions { gap: 10px; }
#debug-feedback { color: #91bca5; font-size: 11px; }
@media (max-height: 760px) {
  .screen-page { grid-template-rows: minmax(0, 1fr) 60px; }
}
@media (max-width: 800px) {
  .screen-footer > p, #debug-feedback { display: none; }
  .wall-empty { padding: 15px; }
  .wall-empty p { font-size: 13px; }
  .screen-footer { justify-content: flex-end; }
  .bubble-body { padding: 14px 16px; font-size: 14px; }
}
@media (max-width: 520px) {
  .qr-float { width: 180px; }
}
@media (prefers-reduced-motion: reduce) {
  .qr-float { animation: none; }
  .bubble { animation-name: bubble-still; top: var(--still-top); }
  @keyframes bubble-still { 0%, 100% { opacity: 0; } 10%, 90% { opacity: 1; } }
}