@font-face { font-family: 'Creepster'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/creepster.ttf') format('truetype'); }

/* Halloween field guide: deep plum, pumpkin, warm bone, lilac and ghost-light. */
:root {
  color-scheme: dark;
  --ink: #fff0d1;
  --paper: #191222;
  --white: #281e35;
  --muted: #c9bfd4;
  --line: #51425d;
  --pink: #ff9d48;
  --pumpkin: #ff9d48;
  --ghost: #c9e97c;
  --lilac: #cbb1ff;
  --display: 'Creepster', Georgia, serif;
  --header-height: 60px;
}
::selection { background: #ff9d48; color: #191222; }
button:focus-visible, a:focus-visible, input:focus-visible { outline-color: var(--pumpkin); }
button:hover { filter: brightness(1.12); }
.masthead {
  background: #191222;
  color: var(--ink);
  height: var(--header-height); padding: 0 20px;
  border-bottom: 1px solid #49384f;
  box-shadow: none;
}
.brand { font-family: var(--display); font-size: 28px; letter-spacing: .4px; gap: 10px; }
.brand i { color: inherit; font: inherit; }
.brand-ghost { color: var(--ghost); width: 24px; height: 30px; }
.brand-sub { color: #c5b69a; letter-spacing: 1.55px; }
.event-date { color: #d5bfdc; font-size: 11px; letter-spacing: .2px; gap: 8px; }
.date-dot { box-shadow: 0 0 10px #ff9d4866; }
.date-divider { color: #90816b; }
.header-controls { display: flex; align-items: center; gap: 8px; }
.header-controls .icon-button { border: 1px solid #5d4869; width: 36px; height: 36px; margin: 0; }
.app { height: calc(100dvh - var(--header-height)); }
.sidebar { width: 320px; min-width: 320px; border-right: 1px solid #49384f; box-shadow: none; }
.sidebar-top { padding: 16px 20px 0; }
.sidebar-top .eyebrow { color: #c9b38b; text-transform: none; font-size: 11px; letter-spacing: .2px; font-weight: 400; }
h1 { font-family: var(--display); font-size: 43px; letter-spacing: .6px; line-height: 1.09; color: var(--pumpkin); text-shadow: 2px 3px 0 #0008; }
.intro { color: #c5c9b8; }
.progress-star { color: var(--pumpkin); }
.progress-track { background: #44324f; height: 3px; }
#progress-fill { background: var(--pumpkin); }
.list-tools { padding: 14px 16px 0; }
.search-box { height: 40px; }
.filters { margin: 9px 0 10px; gap: 5px; }
.filter { padding: 6px 9px; min-height: 30px; }
.stop-list { padding: 0 16px; }
.stop-row { min-height: 66px; padding: 12px 3px; }
.search-box { background: #281e35; border-color: #6d557c; }
.search-box input::placeholder { color: #a6b09b; opacity: 1; }
.filter { color: #e8dcf6; border-color: #725a83; }
.filter.active { background: var(--lilac); color: #21172b; border-color: var(--lilac); }
.stop-list { scrollbar-color: #526049 #141b15; }
.stop-row:hover, .stop-row.selected { background: #3a2a46; }
.stop-number { background: #3d2a4e; border-color: #a48aba; color: #f0e3ff; box-shadow: inset 0 0 0 3px #151d1844; }
.stop-row.selected .stop-number { background: #523722; color: #ffd5a5; border-color: var(--pumpkin); }
.stop-number.done { background: #263329; border-color: #5c7659; color: #bcccb6; }
.stop-number.done:after { background: var(--ghost); color: #152018; }
.row-badges { color: #efbb85; }
.meetup { background: #30261d; border-top-color: #846242; padding: 9px 16px; gap: 10px; }
.meetup-number { width: 29px; height: 34px; font-size: 12px; }
.meetup small { margin-bottom: 3px; }
.meetup small { color: #f2bc87; }
.meetup-number { color: #ffcc93; border-color: #b78351; background: #453120; }
.meetup > svg { color: var(--pumpkin); }
#map { background: #1b1a22; }
.street-label { background: none; border: none; pointer-events: none !important; }
.street-label span { display: block; white-space: nowrap; text-align: center; color: #b5b1c0; font: 500 10px/16px var(--font); text-shadow: 0 1px 2px #1b1a22, 0 -1px 2px #1b1a22; }
.leaflet-tile-pane { filter: grayscale(1) invert(1) brightness(.78) contrast(.88) sepia(.15) hue-rotate(215deg) saturate(.55); }
.map-note, .map-action { background: #281e35f5; border-color: #8e74a4; box-shadow: 0 3px 14px #0005; }
.map-note { color: #fff0d1; }
.note-ghost { width: 15px; height: 18px; color: var(--ghost); flex-shrink: 0; }
.map-actions { z-index: 700; top: 12px; right: 12px; flex-direction: row; gap: 0; border: 1px solid #665174; background: #281e35f5; border-radius: 8px; overflow: hidden; }
.map-action { width: 40px; height: 40px; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.map-action + .map-action { border-left: 1px solid #554260; }
.leaflet-top.leaflet-right { z-index: 700; top: 60px; right: 2px; }
.leaflet-bar { border-color: #8e74a4 !important; box-shadow: 0 3px 14px #0005 !important; }
.leaflet-bar a { background: #281e35 !important; color: #fff0d1 !important; border-bottom-color: #725381 !important; }
.leaflet-bar a.leaflet-disabled { color: #818c77 !important; }
.map-key { background: #281e35f5; border-color: #785b8b; color: #ddcee9; }
.key-pin { background: #58356c; color: #f1efd5; border-color: #c4a5ff; }
.key-cluster { background: #3d2850; color: #fff0d1; border: 1px solid #aa8cc8; }
.pin-body {
  background: #4d365f;
  border-color: #e6d6ff;
  border-radius: 17px 17px 3px 3px;
  color: #fff3d8;
  line-height: 35px;
  font-size: 13px;
  text-shadow: none;
  box-shadow: 0 2px 4px #0005;
}
.pin-body:before { content: none; }
.pin-body:after { border-color: #e6d6ff; }
.pin-body.visited { background: #25332d; color: #b7c9b5; border-color: #809e78; box-shadow: 0 2px 5px #0008; }
.pin-body.finish { background: #a94f1f; border-color: #ffca8b; color: #fff4d9; box-shadow: 0 2px 4px #0005; }
.pin-body.finish:after { border-color: #ffca8b; }
.pin-body.selected { outline: 3px solid #ffca8b; outline-offset: 2px; box-shadow: none; }
.cluster-body { background: #302637; color: #fff0d1; border: 1px solid #aa8ac5; box-shadow: 0 2px 4px #0005; }
.cluster-body small { color: #e1cff4; }
.leaflet-tooltip { background: #2b1e37; border-color: #967bad; color: #fff0d1; box-shadow: 0 3px 12px #0005; }
.leaflet-tooltip-top:before { border-top-color: #967bad; }
.leaflet-marker-icon:focus-visible { outline: 3px solid var(--pumpkin); outline-offset: 5px; }
.leaflet-control-attribution { background: #201529f5 !important; color: #c5b7d3; }
.leaflet-control-attribution a { color: #e3d2f7; }
.detail-card { width: 370px; padding: 18px; background: #281e35; border-color: #725881; box-shadow: 0 6px 25px #0007; max-height: min(65dvh, 480px); overflow-y: auto; }
.detail-card:before { content: none; }
.detail-topline { color: #d9b687; }
.detail-card h2 { color: #fff0d7; }
.tag { background: #3a3023; color: #f4c894; }
.directions { background: var(--pumpkin); color: #24190f; }
.visit-button { background: #3b2949; color: #e8dff1; border-color: #8f74a3; }
.visit-button.is-visited { background: #3c4f33; color: #e5f1d0; }
.toast { background: #fff0d1; color: #241732; border: 1px solid #c1d59f; box-shadow: 0 4px 25px #0008; }
.tile-warning { background: #382b1d; color: #ffe1b5; border-color: #a6814d; }
.user-dot { background: #82bbff; border-color: #e5f2ff; box-shadow: 0 0 0 7px #82bbff33, 0 0 18px #82bbff55; }
dialog { border-color: #9b7cb2; background: #241732; box-shadow: 0 20px 80px #000b; }
dialog::backdrop { background: #0e0715c7; }
.dialog-ghost { color: var(--ghost); filter: drop-shadow(0 0 10px #c9e97c44); }
dialog h2 { font-family: var(--display); color: var(--pumpkin); letter-spacing: .4px; line-height: 1.1; }
.reset-button { background: #3c2a49; border-color: #9778ad; }
.no-js { background: #281e35; color: #fff0d1; }

/* Compact navigation leaves the street map as the main surface. */
.map-toolbar { position: absolute; z-index: 1000; right: 16px; bottom: 22px; display: flex; align-items: center; }
@media (max-width: 1000px) and (min-width: 701px) {
  .brand { font-size: 25px; }
  .event-date { font-size: 10px; }
  .sidebar { width: 300px; min-width: 300px; }
}
@media (max-width: 700px) {
  :root { --header-height: calc(50px + env(safe-area-inset-top)); }
  .masthead { height: var(--header-height); padding: env(safe-area-inset-top) 12px 0; align-items: center; flex-wrap: nowrap; gap: 8px; }
  .brand { font-size: clamp(20px, 5.8vw, 25px); letter-spacing: .1px; gap: 8px; min-width: 0; }
  .brand-ghost { width: 21px; min-width: 21px; height: 27px; }
  .event-date { display: none; }
  .header-controls .icon-button { width: 36px; height: 36px; border-radius: 8px; }
  .header-controls svg { width: 18px; height: 18px; }
  .sidebar { top: var(--header-height); bottom: calc(48px + env(safe-area-inset-bottom)); width: 100%; min-width: 0; border-right: 0; }
  .list-tools { padding: 12px 16px 0; }
  .search-box { height: 42px; }
  .filter { min-height: 34px; padding: 7px 10px; }
  .stop-list { padding: 0 16px; }
  .stop-row { min-height: 70px; }
  .meetup { padding: 8px 16px; }
  .map-actions { top: 10px; right: 10px; }
  .leaflet-control-zoom { display: none; }
  .leaflet-control-attribution { bottom: calc(48px + env(safe-area-inset-bottom)); }
  .map-toolbar { position: fixed; left: 0; right: 0; bottom: 0; height: calc(48px + env(safe-area-inset-bottom)); padding: 0 10px env(safe-area-inset-bottom); gap: 12px; justify-content: space-between; background: #21162d; border-top: 1px solid #4d385a; }
  .map-toolbar .mobile-toggle { display: flex; position: static; flex: 1; min-width: 0; width: auto; height: 44px; padding: 0 6px; gap: 9px; background: transparent; border: 0; box-shadow: none; color: #fff0d1; font-size: 12px; }
  .mobile-toggle > svg { color: var(--pumpkin); width: 18px; height: 18px; }
  .mobile-progress { background: transparent; color: #c2aecf; padding: 0; font-size: 10px; }
  .detail-card { bottom: calc(70px + env(safe-area-inset-bottom)); left: 10px; width: calc(100% - 20px); max-width: none; padding: 16px; }
  .detail-card h2 { font-size: 25px; }
  .detail-topline { font-size: 8px; letter-spacing: .7px; }
  .detail-actions a, .detail-actions button { min-height: 44px; font-size: 11px; }
  .toast { top: 60px; }
}