*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
::-webkit-scrollbar { width: 0; height: 0; }
::-webkit-scrollbar-thumb { background: transparent; }

button:focus-visible { outline: 1px solid #1a1a1a; outline-offset: 2px; }

@keyframes kapsul-spin    { to { transform: rotate(360deg); } }
@keyframes kapsul-fadein  { from { opacity: 0 } to { opacity: 1 } }
@keyframes kapsul-slideup { from { transform: translateY(100%) } to { transform: translateY(0) } }
@keyframes kapsul-pulse   { 0% { transform: scale(0.35); opacity: 0.7 } 100% { transform: scale(1.8); opacity: 0 } }

.np-enter        { animation: kapsul-fadein  200ms ease-out both; }
.np-sheet-enter  { animation: kapsul-slideup 280ms cubic-bezier(.2,.8,.2,1) both; }
.screen-enter    { animation: kapsul-fadein  200ms ease-out both; }

/* Vue <Transition name="screen"> — tab switching */
.screen-enter-active, .screen-leave-active {
  transition: opacity 180ms ease, transform 180ms cubic-bezier(.2,.8,.2,1);
}
.screen-enter-from { opacity: 0; transform: translateY(6px); }
.screen-leave-to   { opacity: 0; transform: translateY(-4px); }

/* Vue <Transition name="np"> — overlays (NowPlaying, Creator, Search) */
.np-enter-active { transition: opacity 200ms ease-out; }
.np-leave-active { transition: opacity 160ms ease-in; }
.np-enter-from, .np-leave-to { opacity: 0; }

/* Globe loading skeleton — shows while world atlas JSON loads */
@keyframes kapsul-skeleton-shimmer {
  0%   { opacity: 0.25; transform: scale(1); }
  50%  { opacity: 0.4;  transform: scale(1.005); }
  100% { opacity: 0.25; transform: scale(1); }
}
.kapsul-skel-circle {
  animation: kapsul-skeleton-shimmer 1.4s ease-in-out infinite;
}

/* Subtle hover scale on buttons that should feel "tactile" */
.kapsul-tactile { transition: transform 120ms ease, box-shadow 120ms ease; }
.kapsul-tactile:hover  { transform: translateY(-1px); }
.kapsul-tactile:active { transform: translateY(0); }

/* Sheet draggable handle: avoids text selection while dragging */
.sheet-grab { user-select: none; -webkit-user-select: none; touch-action: none; }

/* Leaflet overrides — match the original editorial palette */
.leaflet-container {
  background: #ecebe4 !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  outline: none;
  z-index: 0;
  isolation: isolate;
}
.leaflet-control-attribution { display: none !important; }
.leaflet-tile.kapsul-streets-tint {
  filter: invert(1) grayscale(1) sepia(0.05) brightness(1.7) contrast(1.25) !important;
}

/* Custom DivIcon pins (Leaflet) */
.kapsul-pin, .kapsul-me, .kapsul-me-label {
  background: transparent !important;
  border: none !important;
}
.kapsul-pin-root {
  position: relative; width: 180px; height: 40px;
  pointer-events: auto; transition: opacity 180ms ease;
}
.kapsul-pin-root.is-muted { opacity: 0.22; }
.kapsul-pin-dot {
  position: absolute; left: 86px; top: 16px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #1a1a1a; box-shadow: 0 0 0 3px #f4f2ed;
  transition: all 180ms ease;
}
.kapsul-pin-root.is-hl  .kapsul-pin-dot { width: 10px; height: 10px; left: 85px; top: 15px; }
.kapsul-pin-root.is-sel .kapsul-pin-dot { width: 12px; height: 12px; left: 84px; top: 14px; }
.kapsul-pin-ring-white {
  position: absolute; left: 83px; top: 13px;
  width: 14px; height: 14px; border-radius: 50%; background: #f4f2ed;
}
.kapsul-pin-ring {
  position: absolute; left: 78px; top: 8px;
  width: 24px; height: 24px; border-radius: 50%;
  border: 0.8px solid rgba(178, 74, 43, 0.55);
}
.kapsul-pin-halo {
  position: absolute; left: 74px; top: 4px;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px dashed #1a1a1a;
  animation: kapsul-spin 6s linear infinite;
}
.kapsul-pin-radio-pulse {
  position: absolute; left: 78px; top: 8px;
  width: 24px; height: 24px; border-radius: 50%;
  border: 1.2px solid #b24a2b;
  animation: kapsul-pulse 1.6s ease-out infinite;
  pointer-events: none;
}
.kapsul-pin-label {
  position: absolute; left: 100px; top: 3px;
  width: 150px; pointer-events: none;
  opacity: 0; transition: opacity 140ms ease;
}
.kapsul-pin-root:hover .kapsul-pin-label,
.kapsul-pin-root.is-sel .kapsul-pin-label { opacity: 1; }
.kapsul-pin-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 13px; font-style: italic; color: #1a1a1a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow:
    0 0 2px #f4f2ed, 0 0 4px #f4f2ed,
    0 0 8px #f4f2ed, 0 0 12px rgba(244,242,237,0.8);
}
.kapsul-pin-city {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 8px; letter-spacing: 0.6px;
  color: rgba(26,26,26,0.75); margin-top: 2px;
  text-shadow: 0 0 2px #f4f2ed, 0 0 4px #f4f2ed, 0 0 8px rgba(244,242,237,0.85);
}

/* "Me" marker (Leaflet) */
.kapsul-me { width: 28px; height: 28px; position: relative; }
.kapsul-me-dot {
  position: absolute; left: 10px; top: 10px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #b24a2b;
  box-shadow: 0 0 0 3px #f4f2ed, 0 0 0 4px #b24a2b;
}
.kapsul-me-pulse {
  position: absolute; left: 4px; top: 4px;
  width: 20px; height: 20px; border-radius: 50%;
  border: 1.2px solid #b24a2b;
  animation: kapsul-pulse 2.2s ease-out infinite;
}
.kapsul-me-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 9px; letter-spacing: 1px; color: #b24a2b;
  white-space: nowrap;
  text-shadow: 0 0 4px #f4f2ed, 0 0 8px #f4f2ed;
  font-weight: 500;
}

/* Sheet height transition (replaces the inline style on the React sheet) */
.sheet-anim { transition: height 320ms cubic-bezier(0.32, 0.72, 0, 1); }

/* Hide native horizontal scrollbar on genre rail */
.genre-rail { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.genre-rail::-webkit-scrollbar { display: none; }