:root {
  --ink: #2B2B3D;
  --yellow: #FFD166;
  --text: #F3F1EA;
  --muted: #A9A8B8;
  --panel: rgba(255, 255, 255, 0.08);
  /* The map's own tone under the dark veil: what Safari paints behind its
     status bar and toolbar, so they melt into the map instead of showing
     a darker band. */
  --map-tone: #3C3C46;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
/* No sideways drift, so the page (and the map behind it) stays put under a
   sideways swipe. Vertical overscroll is left alone: pull-to-refresh works.
   Pinch-zoom is kept. */
html { overflow-x: hidden; overscroll-behavior-x: none; background: var(--map-tone); }
body { overflow-x: clip; overscroll-behavior-x: none; touch-action: pan-y pinch-zoom; }
body {
  background: transparent; /* the map (or the ink) is on <html> */
  color: var(--text);
  font: 17px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  display: flex; flex-direction: column; min-height: 100dvh;
  position: relative;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}
main {
  flex: 1; width: 100%; max-width: 420px; margin: 0 auto;
  padding: 32px 16px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.el { background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.el img { display: block; width: 180px; height: 180px; }
.el.squash img { animation: squash 0.35s ease-out; }
@keyframes squash {
  30% { transform: scale(1.08, 0.9); }
  60% { transform: scale(0.96, 1.05); }
}

.speech { width: 100%; display: flex; flex-direction: column; gap: 8px; min-height: 1px; }
.line {
  background: var(--panel); border-radius: 16px; padding: 12px 16px;
  animation: appear 0.35s ease-out both;
}
@keyframes appear { from { opacity: 0; transform: translateY(6px); } }

.choices { display: flex; gap: 12px; width: 100%; animation: appear 0.35s ease-out both; }
.choices button, .primary {
  flex: 1; font: inherit; font-weight: 600; color: var(--ink);
  background: var(--yellow); border: 0; border-radius: 14px;
  padding: 14px 16px; cursor: pointer;
}
.choices button:active, .primary:active { transform: scale(0.97); }
.primary:disabled { opacity: 0.55; cursor: default; }
.primary { width: 100%; }

.note { margin: 0; font-size: 13px; color: var(--muted); text-align: center; }
.note a { color: var(--yellow); }
.error { margin: 0; color: #FF8A8A; font-size: 14px; }

.email { width: 100%; display: flex; flex-direction: column; gap: 12px; animation: appear 0.35s ease-out both; }
.email input[type="email"] {
  font: inherit; color: var(--text); background: var(--panel);
  border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 12px; padding: 14px 16px;
  width: 100%;
}
.email input[type="email"]:focus { outline: 2px solid var(--yellow); border-color: transparent; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.consent input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--yellow); flex: none; }
#captcha { display: flex; justify-content: center; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
[hidden] { display: none !important; }

footer { text-align: center; color: var(--muted); font-size: 13px; padding: 16px; }

dialog { width: min(92vw, 560px); height: 80dvh; padding: 0; border: 0; border-radius: 16px; background: #fff; overflow: hidden; }
dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
dialog iframe { width: 100%; height: 100%; border: 0; }
#privacy-close {
  position: absolute; top: 6px; right: 8px; z-index: 1; width: 36px; height: 36px;
  font-size: 26px; line-height: 1; border: 0; border-radius: 50%; background: rgba(0,0,0,.08); cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .line, .choices, .email, .el.squash img { animation: none; }
}

/* The map the app opens on, quiet, as the page's own background (the
   canvas), so the browser paints it under the status bar and the toolbar too
   instead of a bare colour there. It is set once the picture is loaded
   (app.js adds .map-ready to <html>), so it never holds up the first show. */
html.map-ready {
  background:
    linear-gradient(rgba(43, 43, 61, 0.55), rgba(43, 43, 61, 0.55)),
    url("img/london_map.jpg") center / cover no-repeat,
    var(--map-tone);
}