#intro-dialog {
  position:fixed; inset:0; margin:0; width:100vw; max-width:none;
  height:100dvh; max-height:none; padding:0; border:0; border-radius:0;
  outline:0; overflow:hidden; background:#0c2025; color:#fff3d6; box-shadow:none;
}
#intro-dialog::backdrop { background:#0c2025; backdrop-filter:none; }
#intro-video { display:block; width:100%; height:100%; object-fit:contain; background:#0c2025; }
#intro-welcome {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  flex-direction:column; padding:80px 24px; text-align:center;
  background:linear-gradient(0deg,#081d26d9,#081d262b 70%);
}
#intro-welcome[hidden] { display:none; }
#intro-welcome .intro-kicker { margin:0 0 12px; font-size:12px; letter-spacing:.25em; text-transform:uppercase; }
#intro-welcome h1 { margin:0; font:clamp(34px,7vw,76px)/1.1 Georgia,serif; text-shadow:0 3px 25px #081d26; }
#intro-welcome p { max-width:36em; line-height:1.5; }
#intro-dialog button { min-height:44px; border:1px solid #dfc995; border-radius:7px; padding:11px 20px; font-weight:700; cursor:pointer; }
#start-intro { margin-top:14px; background:#f4e3b4; color:#1e3e3b; box-shadow:0 4px 22px #071e2455; }
#skip-intro { position:absolute; top:max(18px,env(safe-area-inset-top)); right:max(20px,env(safe-area-inset-right)); color:#fff3d6; background:#1b393ee8; }
#intro-message:empty { display:none; }
#intro-dialog button:focus-visible,#map-music-toggle:focus-visible { outline:3px solid #fff4d1; outline-offset:4px; }
#map-music-toggle {
  position:absolute; left:76px; bottom:max(20px,env(safe-area-inset-bottom)); z-index:10;
  min-height:44px; padding:9px 13px; border:1px solid #dfc995; border-radius:24px;
  background:#294d47f2; color:#fff0c9; font-size:12px; font-weight:700;
  box-shadow:0 3px 8px #102c3555; cursor:pointer;
}
@media(max-height:420px) {
  #intro-welcome { padding:60px 20px 24px; }
  #intro-welcome h1 { font-size:36px; }
  #intro-welcome p { margin:8px 0; }
}