/* How to use it (MT-6, MT-32): the map of each film's three views with the swipes between them, the other gestures,
   the sound switch and Proceed. Its animations run each time the screen appears, as #help goes from display:none to
   shown. The gold arrow and the fingertip it draws with are defined once in index.html (.help-defs). */
#help {
  align-items: center; justify-content: center; overflow: hidden;
  padding: calc(8px + var(--safe-t)) calc(12px + var(--safe-r)) calc(6px + var(--safe-b)) calc(12px + var(--safe-l));
  background: radial-gradient(ellipse at 50% 35%, #1d1a16 0%, var(--bg) 70%);
}
.help-defs { position: absolute; width: 0; height: 0; }
.help-panel { width: 100%; height: 100%; max-width: 1040px; display: flex; flex-direction: column; justify-content: center; gap: 1.5vh; }
.help-title { margin: 0; font-size: clamp(16px, 5vh, 22px); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.help-body { flex: 0 1 auto; min-height: 0; display: flex; align-items: center; gap: 2.5vw; }

/* The map: three columns of views, three rows of films, the gold frame walking it on a 10-second loop. */
.map { flex: 1 1 auto; min-width: 0; height: min(64vh, 52vw); }
.map text { font-size: 15px; fill: var(--muted); }
.map-heads text { text-anchor: middle; font-weight: 800; fill: var(--text); font-size: 17px; }
.map-rows text { text-anchor: end; }
.map-says text { text-anchor: middle; fill: #cfc9ba; }
.map-cells rect { fill: rgba(255,255,255,.035); stroke: var(--line); stroke-width: 1.5; }
.map-cells rect.this { fill: rgba(255,255,255,.08); }
.map-here { fill: rgba(232,180,74,.12); stroke: var(--accent); stroke-width: 4; animation: map-walk 10s ease-in-out infinite; }
@keyframes map-walk {
  0%, 10% { transform: translate(0, 0); opacity: 1; }
  16%, 26% { transform: translate(-205px, 0); }
  32%, 42% { transform: translate(0, 0); }
  48%, 58% { transform: translate(205px, 0); }
  64%, 84% { transform: translate(205px, 92px); opacity: 1; }
  90% { transform: translate(205px, 92px); opacity: 0; }
  94% { transform: translate(0, 0); opacity: 0; }
  100% { transform: translate(0, 0); opacity: 1; }
}
.map-swipe { opacity: 0; animation: map-swipe 10s ease-in-out infinite; }
.map-swipe text { text-anchor: middle; fill: var(--accent); font-weight: 800; font-size: 14px; }
.map-swipe.s2 { animation-delay: 1.6s; }
.map-swipe.s3 { animation-delay: 3.2s; }
.map-swipe.s4 { animation-delay: 4.8s; }
@keyframes map-swipe { 0%, 8% { opacity: 0; } 10%, 16% { opacity: 1; } 19%, 100% { opacity: 0; } }

/* The other gestures, beside the map. */
.help-more { flex: 0 0 auto; width: min(30vw, 260px); margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 1.6vh; }
.help-more li { display: flex; align-items: center; gap: 10px; font-size: clamp(11px, 3.4vh, 14px); line-height: 1.25; color: #ece6d8; font-weight: 600; }
.help-more svg { flex: none; width: min(9vh, 40px); height: min(9vh, 40px); overflow: visible; }
.help-more .heart path { fill: var(--heart); }
.ripple { fill: none; stroke: var(--accent); stroke-width: 3; opacity: .8; }
.ring { fill: none; stroke: var(--accent); stroke-width: 4; }
.screen-box { fill: rgba(255,255,255,.06); stroke: #8b8678; stroke-width: 2; }

/* Under it: the big sound switch, and the way on. */
.help-controls { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mute {
  flex: none; width: min(18vh, 72px); height: min(18vh, 72px); border-radius: 50%; border: 2px solid var(--line);
  background: radial-gradient(circle at 38% 32%, #3a3a46, var(--panel) 70%); font-size: min(8vh, 30px);
  box-shadow: 0 6px 16px rgba(0,0,0,.6);
}
.mute::before { content: "\1F507"; }
.mute[aria-pressed="false"]::before { content: "\1F50A"; }
.mute[aria-pressed="false"] { border-color: var(--accent); }
.help-go { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
.skip-help { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 14px; white-space: nowrap; }
.proceed { padding: 12px 32px; border: 0; border-radius: 999px; background: var(--accent); color: #111; font-weight: 800; font-size: 17px; box-shadow: 0 6px 16px rgba(232,180,74,.25); white-space: nowrap; }

.tmdb { margin: 0; font-size: 11px; color: #77756f; display: flex; align-items: center; gap: 10px; }
.tmdb img { height: 12px; width: auto; flex: none; }