/* ---------- 結果頁「小安的那一晚」（night.js）：只用 .night-* 選擇器，顏色取自 app.css 的變數 ---------- */
.night-page { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.night-screen {
  position: relative; width: 100%; aspect-ratio: 4 / 3; background: #10161d; border-radius: 12px; overflow: hidden;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
/* 原生 160×120 的像素畫：放大縮小都不要糊掉 */
.night-video, .night-poster {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: contain;
  image-rendering: crisp-edges; image-rendering: pixelated;
}
.night-caption { font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.night-time { font-size: 13px; font-weight: 700; color: var(--ink-2); letter-spacing: .05em; }

/* 這個時刻小安看到的訊息：小型聊天泡泡 */
.night-lines { display: flex; flex-direction: column; gap: 6px; background: var(--chat-bg); border-radius: 12px; padding: 10px; min-width: 0; }
.night-ch { align-self: flex-start; font-size: 11px; color: #33414e; margin-top: 2px; }
.night-line { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; max-width: 85%; min-width: 0; }
.night-line.mine { align-self: flex-end; align-items: flex-end; }
.night-name { font-size: 10px; color: #33414e; }
.night-bubble {
  background: var(--card); color: var(--ink); padding: 4px 10px; border-radius: 12px; border-top-left-radius: 4px;
  font-size: 13px; line-height: 1.45; max-width: 100%; overflow-wrap: anywhere; word-break: break-word;
}
.night-line.mine .night-bubble { background: var(--mine); border-top-left-radius: 12px; border-top-right-radius: 4px; }
.night-sticker { font-size: 28px; line-height: 1.1; }
.night-photo { width: 56px; height: 42px; border-radius: 6px; background: linear-gradient(135deg, #c6ced6, #9aa7b3 40%, #d8c3b0); filter: blur(2px); }
.night-sys {
  align-self: center; max-width: 92%; font-size: 11px; color: #24323f; background: rgba(255, 255, 255, .6);
  padding: 2px 10px; border-radius: 999px; text-align: center; overflow-wrap: anywhere;
}
.night-ping { background: var(--warm); color: #2b2420; }

/* 進度圓點和按鈕：捲動時固定在下方（底色和 .sheet 相同） */
.night-foot { position: sticky; bottom: 0; background: #fbfaf7; padding: 8px 0 4px; display: flex; flex-direction: column; gap: 8px; }
.night-dots { display: flex; justify-content: center; gap: 6px; }
.night-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); transition: background .3s, transform .3s; }
.night-dots i.done { background: var(--ink-3); }
.night-dots i.on { background: var(--accent); transform: scale(1.25); }
.night-foot .night-next { margin-top: 0; touch-action: manipulation; }
.night-hint { text-align: center; font-size: 12px; color: var(--ink-3); }

@media (prefers-reduced-motion: reduce) {
  .night-dots i { transition: none; }
}