/* Shared by the home page (index.html) and the Hangout Map for moderators page (hangout-map-moderators.html):
   the trailers' player, the rows of screenshots, the screens full screen and the small notice at the bottom.
   Their script is public/dti/media.js. Stamped (?v=) with the DTI scripts by tools/dti-stamp.js. */
/* The trailers: a picture of the poster linking to the MP4, which media.js (trailers()) turns into the video on a tap,
   so the video loads only when wanted. The MazWiz trailer (#trailer) is on the home page. */
.trailer { margin: 32px 0 0; }
.trailer .section-title { margin: 0 0 12px; }
.trailer-frame {
    position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 18px;
    background: #0B0D10; border: 1px solid var(--border); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
}
.trailer-frame img { display: block; width: 100%; height: 100%; object-fit: cover; background: #0B0D10; }
/* contain, never cover: full screen on a long phone screen must not cut the top and bottom of the picture */
.trailer-frame video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.trailer-frame:fullscreen { width: 100%; height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; box-shadow: none; background: #000; }
.trailer-frame:-webkit-full-screen { width: 100%; height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; box-shadow: none; background: #000; }
video:fullscreen { object-fit: contain; }
/* Shown from the tap until the trailer plays (and again while it waits for more), so a slow start never looks broken */
.trailer-load {
    position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    background: rgba(0, 0, 0, 0.45); color: #fff; font-size: 15px; font-weight: 700; pointer-events: none;
}
.trailer-frame.loading .trailer-load { display: flex; }
.trailer-spin {
    width: 52px; height: 52px; border-radius: 999px; border: 5px solid rgba(255, 255, 255, 0.25); border-top-color: var(--accent);
    animation: trailer-spin 0.9s linear infinite;
}
@keyframes trailer-spin { to { transform: rotate(360deg); } }
/* Full screen only: a close button back to the page (top right, clear of the video's own controls at the bottom) */
.trailer-close {
    position: absolute; top: calc(14px + env(safe-area-inset-top)); right: calc(14px + env(safe-area-inset-right)); z-index: 2;
    display: none; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 0;
    border-radius: 999px; background: rgba(0, 0, 0, 0.6); color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.trailer-close svg { width: 24px; height: 24px; }
.trailer-frame:fullscreen .trailer-close { display: flex; }
.trailer-frame:-webkit-full-screen .trailer-close { display: flex; }
.trailer-play {
    position: absolute; left: 50%; top: 50%; display: flex; align-items: center; justify-content: center;
    width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 999px; background: var(--accent); color: var(--on-accent);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); transition: transform 0.15s;
}
.trailer-play svg { width: 30px; height: 30px; margin-left: 4px; }
.trailer-frame:hover .trailer-play { transform: scale(1.06); }
/* The Hangout Map's trailer for moderators, on its own page (public/hangout-map-moderators.html, #hangout-map-mods-trailer):
   the same player, played in the page (data-inline: no full screen on a tap, so the chapters stay in sight), and its
   chapters always open, each jumping to its part, the one playing marked (media.js trailers(); their times are written
   by tools/motion-render.js --film mods --web), under the video: two columns, one on a phone. */
.trailer-mods { margin: 0 0 28px; }
.trailer-mods h2 { margin: 0 0 4px; color: var(--text); font-size: 22px; line-height: 1.25; }
.trailer-mods .trailer-lead { margin: 0 0 14px; font-size: 15px; }
.trailer-body { display: grid; gap: 14px; }
.trailer-chapters-title { margin: 0 0 8px; color: var(--text-muted); font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.trailer-chapters { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 560px) { .trailer-chapters { grid-template-columns: 1fr 1fr; } }
.trailer-chapters button {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px;
    background: var(--surface-2); color: var(--text); font: inherit; font-size: 14px; font-weight: 700; text-align: left; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.trailer-chapters button:hover { border-color: var(--accent); }
.trailer-chapters button[aria-current] { border-color: var(--accent); background: var(--accent-soft); }
.trailer-chapters .t { flex: none; min-width: 38px; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.trailer-share { margin-top: 14px; }
/* The rows of screenshots that scroll sideways, with arrows for mouse users (media.js shots()) */
.shots-wrap { position: relative; margin: 0 -16px 6px; }
.shots {
    display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 16px 14px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
}
.shots::-webkit-scrollbar { display: none; }
.shot { flex: 0 0 196px; margin: 0; scroll-snap-align: center; }
.shot img {
    display: block; width: 196px; height: 424px; border-radius: 26px; background: var(--surface-2);
    border: 4px solid #2C3138; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
.shot figcaption { margin: 12px 4px 0; font-size: 14px; line-height: 1.4; color: var(--text-muted); }
.shot figcaption b { display: block; margin-bottom: 2px; color: var(--text); font-size: 15px; }
.shots-nav {
    position: absolute; top: 196px; z-index: 1; display: none; align-items: center; justify-content: center; width: 40px; height: 40px;
    border: 1px solid var(--border); border-radius: 999px; background: rgba(34, 38, 44, 0.92); color: var(--text); cursor: pointer;
}
.shots-nav svg { width: 18px; height: 18px; }
.shots-nav.prev { left: 6px; }
.shots-nav.next { right: 6px; }
.shots-nav:disabled { opacity: 0; pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .shots-nav { display: inline-flex; } }
.shot img { cursor: zoom-in; }
/* The screens full screen (media.js viewer()): one slide per screen of the row, swiped sideways. */
.viewer { position: fixed; inset: 0; z-index: 20; background: #0A0C0F; }
.viewer[hidden] { display: none; }
.viewer-track {
    display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.viewer-track::-webkit-scrollbar { display: none; }
.viewer-slide {
    flex: 0 0 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box;
    padding: calc(60px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom)); scroll-snap-align: center;
    scroll-snap-stop: always;
}
.viewer-slide img {
    display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 160px); max-height: calc(100dvh - 160px);
    border-radius: 22px; border: 3px solid #2C3138;
}
.viewer-slide p { max-width: 460px; margin: 12px 0 0; text-align: center; color: var(--text-muted); font-size: 14px; line-height: 1.4; }
.viewer-slide p b { color: var(--text); margin-right: 6px; }
.viewer-bar {
    position: absolute; top: env(safe-area-inset-top); left: 0; right: 0; z-index: 1; display: flex; align-items: center;
    justify-content: space-between; padding: 8px 12px 8px 20px; color: var(--text-muted); font-size: 14px; font-weight: 700;
}
.viewer-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px;
    border: 1px solid var(--border); background: rgba(34, 38, 44, 0.92); color: var(--text); cursor: pointer;
}
.viewer-btn svg { width: 20px; height: 20px; }
.viewer-nav { position: absolute; top: 50%; z-index: 1; display: none; transform: translateY(-50%); }
.viewer-nav.prev { left: 16px; }
.viewer-nav.next { right: 16px; }
.viewer-nav:disabled { opacity: 0; pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .viewer-nav { display: inline-flex; } }
.shots-note { margin: 0 0 18px; text-align: center; color: var(--text-muted); font-size: 13px; }
/* A short notice at the bottom (Copied to clipboard) */
.toast {
    position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 10;
    padding: 12px 20px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border);
    color: var(--text); font-size: 14px; font-weight: 700; white-space: nowrap; opacity: 0; transition: opacity 0.3s; pointer-events: none;
}
.toast.show { opacity: 1; }
@media (min-width: 600px) {
    .shots-wrap { margin: 0 -24px 6px; }
    .shots { padding-left: 24px; padding-right: 24px; }
}