:root {
  --bg: #120a1f;
  --panel: #1c1030;
  --panel-2: #251541;
  --ink: #f3ecff;
  --muted: #b9a9d6;
  --accent: #ff7a18;
  --accent-2: #8b5cf6;
  --casa: #d32f2f;
  --vetrina: #2e9e4f;
  --ristoro: #e8a400;
  --associazione: #b44bd6;
  --parcheggio: #4f6d7a;
  --trenino: #2f6df6;
  --topbar-h: 58px;
  --sidebar-w: 380px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
  overflow: hidden;
}

/* ---------- topbar ---------- */
#topbar {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  background: linear-gradient(90deg, #1a0f2e, #2a1147 60%, #3a1352);
  border-bottom: 2px solid var(--accent);
  z-index: 1200;
  position: relative;
}
#menu-btn {
  display: none;
  background: none; border: 0; color: var(--ink); font-size: 22px; cursor: pointer;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand .logo { font-size: 26px; filter: drop-shadow(0 0 6px #ff7a18aa); }
.brand strong { display: block; font-size: 17px; letter-spacing: .3px; }
.brand small { color: var(--muted); font-size: 12px; }
.top-actions { margin-left: auto; }
.top-actions { display: flex; align-items: center; gap: 8px; }
.top-actions a, .top-actions button {
  text-decoration: none; font-size: 20px; padding: 6px 10px; border-radius: 10px;
  background: #ffffff12; color: var(--ink); border: 0; cursor: pointer; font-family: inherit;
}
#theme-btn { font-size: 13px; font-weight: 600; padding: 7px 12px; }
.top-actions a:hover, .top-actions button:hover { background: #ffffff22; }

/* ---------- layout ---------- */
#layout { display: flex; height: calc(100% - var(--topbar-h)); }
#map { flex: 1; height: 100%; background: #0d0718; }

#sidebar {
  width: var(--sidebar-w);
  background: var(--panel);
  border-left: 1px solid #ffffff1a;
  display: flex;
  flex-direction: column;
  z-index: 1000;
}
.side-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 8px;
}
.side-head h2 { font-size: 16px; margin: 0; }
.side-head h2 span { color: var(--muted); font-weight: 400; font-size: 13px; }
#close-btn { display: none; background: none; border: 0; color: var(--ink); font-size: 18px; cursor: pointer; }

.filters { padding: 0 14px 10px; display: grid; gap: 8px; }
.filters input[type="search"] {
  width: 100%; padding: 9px 12px; border-radius: 10px; border: 1px solid #ffffff20;
  background: var(--panel-2); color: var(--ink); font-size: 14px;
}
.check { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 8px; cursor: pointer; }

.table-wrap { overflow: auto; flex: 1; padding: 0 8px 8px; }
#case-table { width: 100%; border-collapse: collapse; font-size: 13px; }
#case-table th {
  position: sticky; top: 0; background: var(--panel-2); color: var(--muted);
  text-align: left; padding: 8px 8px; font-weight: 600; cursor: pointer; user-select: none;
  border-bottom: 1px solid #ffffff1a;
}
#case-table th.num { text-align: center; }
#case-table td { padding: 8px; border-bottom: 1px solid #ffffff10; vertical-align: top; }
#case-table tbody tr { cursor: pointer; }
#case-table tbody tr:hover { background: #ffffff0d; }
#case-table tbody tr.active { background: #ff7a1822; box-shadow: inset 3px 0 0 var(--accent); }
#case-table .nome { font-weight: 600; }
#case-table .addr { color: var(--muted); font-size: 12px; }
#case-table .skulls { text-align: center; white-space: nowrap; }
#case-table .candy-col { text-align: center; }
.skull-none { color: #6b5b8a; font-size: 11px; }
#table-empty { color: var(--muted); font-size: 13px; padding: 14px; text-align: center; }
.side-foot { padding: 10px 14px; border-top: 1px solid #ffffff1a; color: var(--muted); font-size: 12px; }
.side-foot p { margin: 0; }

/* ---------- marker ---------- */
.pin {
  --pin: #888;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--pin);
  border: 3px solid #fff;
  box-shadow: 0 2px 7px #000a;
  display: grid; place-items: center;
  font-size: 20px; line-height: 1;
}
.pin .badge {
  position: absolute; top: -6px; right: -6px;
  background: #1a0f2e; color: #fff; border: 2px solid #fff;
  border-radius: 10px; font-size: 11px; padding: 0 4px; line-height: 16px; font-weight: 700;
}
.pin-wrap { position: relative; }
.pin.trenino-station { width: 46px; height: 46px; font-size: 25px; background: var(--trenino); }
.pin.fermata { background: #1565c0; }

/* ---------- popup ---------- */
.leaflet-popup-content { margin: 12px 14px; }
.pop h3 { margin: 0 0 6px; font-size: 16px; }
.pop .chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.chip {
  font-size: 11px; padding: 2px 8px; border-radius: 999px; color: #fff; background: #555;
  white-space: nowrap;
}
.chip.candy { background: #e91e63; }
.chip.no-candy { background: #555; }
.chip.soft { background: #eee; color: #333; }
.pop .addr { font-size: 13px; color: #444; margin: 0 0 6px; }
.pop .note { font-size: 12px; color: #666; font-style: italic; margin: 0 0 10px; }
.pop .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pop .btn {
  text-decoration: none; font-size: 13px; font-weight: 600; padding: 8px 12px; border-radius: 10px;
  background: var(--accent); color: #fff; display: inline-flex; align-items: center; gap: 6px;
}

/* ---------- legend ---------- */
.legend {
  background: #1c1030ee; border: 1px solid #ffffff1f; border-radius: 12px;
  padding: 10px 12px; color: var(--ink); font-size: 13px; box-shadow: 0 6px 20px #0007;
  max-width: 210px;
}
.legend h3 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: var(--accent); }
.legend ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.legend li { display: flex; align-items: center; gap: 8px; }
.legend .dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff3; flex: none; }
.legend .legend-routes { margin-top: 9px; padding-top: 8px; border-top: 1px solid #ffffff1f; display: flex; align-items: center; gap: 8px; }
.legend .line { width: 22px; height: 0; border-top: 5px solid #ff7a18; border-radius: 3px; }

/* ---------- user location ---------- */
.locate-wrap { position: relative; }
.locate-btn {
  width: 50px; height: 50px; border-radius: 50%; border: 3px solid #fff;
  background: #1c1030ee; color: #fff; font-size: 23px; line-height: 1; cursor: pointer;
  box-shadow: 0 3px 12px #000a; display: grid; place-items: center; padding: 0;
  transition: background .15s ease, transform .1s ease;
}
.locate-btn:hover { background: #2a1147; }
.locate-btn:active { transform: scale(0.94); }
.locate-btn.active { background: var(--trenino); box-shadow: 0 0 0 4px #2f6df655, 0 3px 12px #000a; }

.user-dot {
  width: 20px; height: 20px; border-radius: 50%;
  background: #2f6df6; border: 3px solid #fff;
  box-shadow: 0 0 0 0 rgba(47, 109, 246, 0.55);
  animation: userpulse 2s infinite;
}
@keyframes userpulse {
  0%   { box-shadow: 0 0 0 0 rgba(47, 109, 246, 0.55); }
  70%  { box-shadow: 0 0 0 16px rgba(47, 109, 246, 0); }
  100% { box-shadow: 0 0 0 0 rgba(47, 109, 246, 0); }
}

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  background: #1c1030f2; color: #fff; padding: 11px 18px; border-radius: 12px;
  border: 1px solid #ffffff22; box-shadow: 0 8px 24px #000b; z-index: 3000;
  font-size: 14px; max-width: 90vw; text-align: center; line-height: 1.35;
}

/* ---------- map themes ---------- */
/* Halloween theme: same OSM tiles, darkened and tinted purple */
body[data-theme="halloween"] .leaflet-tile-pane {
  filter: grayscale(1) brightness(0.47) contrast(1.28) sepia(0.55) hue-rotate(212deg) saturate(2);
}
body[data-theme="halloween"] #map { background: #0b0516; }

/* train route glow */
.route-glow { filter: drop-shadow(0 0 5px #ff7a18cc); }
body[data-theme="day"] .route-glow { filter: none; }

/* ---------- responsive ---------- */
@media (max-width: 820px) {
  #menu-btn { display: block; }
  #close-btn { display: block; }
  #sidebar {
    position: absolute; top: var(--topbar-h); right: 0; bottom: 0;
    width: min(92vw, 400px);
    transform: translateX(105%);
    transition: transform .25s ease;
    box-shadow: -10px 0 30px #000a;
  }
  #sidebar.open { transform: translateX(0); }
  #layout { position: relative; }
}