/* Final interaction fixes — batched with the existing V2 polish. */

.moment-track { overflow-x: auto !important; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 7rem; cursor: grab; }
.moment-track::-webkit-scrollbar { display: none; }
.moment-track:active { cursor: grabbing; }
.moment-grid { animation: none !important; will-change: auto; width: max-content !important; min-width: max-content !important; grid-template-columns: repeat(7, minmax(270px, 300px)) !important; }
.moment-card { min-width: 0; }
.moments-rail-controls { position: absolute; right: clamp(1.3rem, 6vw, 5.5rem); bottom: 1.35rem; z-index: 8; display: flex; gap: .5rem; }
.moments-rail-control { width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(255,254,251,.94); color: var(--deep); box-shadow: 0 8px 22px rgba(70,100,86,.13); cursor: pointer; font-size: 1.35rem; line-height: 1; transition: transform .2s ease, opacity .2s ease, box-shadow .2s ease; }
.moments-rail-control:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(70,100,86,.17); }
.moments-rail-control:disabled { opacity: .35; cursor: default; transform: none; }
#moments:has(#story-player:not([hidden])) { z-index: 10001 !important; }
.story-player { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; max-width: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; z-index: 10000 !important; display: grid !important; place-items: center !important; background: rgba(47,66,57,.48) !important; backdrop-filter: blur(12px); overflow: auto !important; }
.story-player[hidden] { display: none !important; }
.story-player .player-layout { width: min(1180px, 94vw) !important; max-height: 88vh !important; margin: 0 !important; }
.story-player .player-close { position: fixed !important; top: 18px !important; right: 18px !important; z-index: 10002 !important; width: 46px !important; height: 46px !important; border-radius: 50%; background: rgba(255,254,251,.98) !important; color: var(--deep) !important; box-shadow: 0 10px 28px rgba(35,55,46,.28); font-size: 1.7rem !important; line-height: 1 !important; }
.player-media video.player-portrait { width: auto !important; height: min(72vh, 700px) !important; max-width: min(78%, 430px) !important; max-height: 72vh !important; aspect-ratio: auto !important; object-fit: contain !important; }
.player-media video.player-landscape { width: auto !important; height: auto !important; max-width: 100% !important; max-height: 78vh !important; aspect-ratio: auto !important; object-fit: contain !important; }
.memory-note { animation: memoryStagger 16s ease-in-out infinite !important; will-change: opacity, transform; }
.memory-note:nth-child(1) { transform: rotate(-1.4deg); animation-delay: 0s !important; }
.memory-note:nth-child(2) { transform: rotate(1.1deg); animation-delay: -4s !important; }
.memory-note:nth-child(3) { transform: rotate(-.8deg); animation-delay: -8s !important; }
.memory-note:nth-child(4) { transform: rotate(1.5deg); animation-delay: -12s !important; }
.memory-note:hover { animation-play-state: paused !important; transform: translateY(-6px) rotate(0deg) !important; }
@keyframes memoryStagger { 0%, 12% { opacity: 0; } 22%, 72% { opacity: 1; } 84%, 100% { opacity: 0; } }

@media (max-width: 800px) {
  .moments-rail-controls { right: 1.3rem; bottom: 1.1rem; }
  .moments-rail-control { width: 40px; height: 40px; }
  .moment-grid { grid-template-columns: repeat(7, minmax(78vw, 78vw)) !important; }
  html, body { max-width: 100%; overflow-x: hidden !important; }
  #moments .moment-track { width: 100% !important; max-width: 100% !important; overflow: hidden !important; overflow-x: hidden !important; overflow-y: hidden !important; }
  /* Match the existing 11px white photo frame on all four sides. */
  #moments .moment-card:last-child .card-image { padding: 0 !important; border: 11px solid #fff !important; box-sizing: border-box !important; }
  #moments .moment-card:last-child .card-image::after { display: none !important; }
  .story-gallery { min-height: 520px !important; }
}