/* Survival Realm — Squaremap UI theme (embed + standalone)
 * Install: copy to squaremap web root, link from index.html after the default bundle.
 * Requires theme-bridge.js and settings.web-directory.auto-update: false
 *
 * Colors match the Next.js site tokens (globals.css):
 *   dark bg #000 / light bg #fff
 *   border #3f3f46 (same in both themes)
 *   text #fff / #18181b
 */

html[data-sr-theme='dark'] {
    color-scheme: dark;
    --sr-map-bg: #000000;
    --sr-map-surface: #000000;
    --sr-map-hover: #141416;
    /* Same border hex in both themes (site tokens) */
    --sr-map-border: #3f3f46;
    --sr-map-border-subtle: #2e2e32;
    --sr-map-text: #f4f4f5;
    --sr-map-text-muted: #a1a1aa;
    --sr-map-accent: #d4a853;
    --sr-map-accent-hover: #e6bc6a;
    --sr-map-accent-fill: #1a1710;
    --sr-map-accent-muted: rgba(212, 168, 83, 0.14);
    --sr-map-accent-surface: #14110c;
    /* Opaque — rgba washes go see-through over map tiles */
    --sr-map-accent-surface-hover: #241f14;
    /* Bright gold ring — matches site dark + readable on light fills */
    --sr-map-outline: #d4a853;
    --sr-map-hover-ring: inset 0 0 0 1px #d4a853;
    --sr-map-control-transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        color 0.15s ease,
        opacity 0.15s ease;
    --sr-map-panel-duration: 200ms;
    --sr-map-panel-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html[data-sr-theme='light'] {
    color-scheme: light;
    --sr-map-bg: #ffffff;
    --sr-map-surface: #ffffff;
    --sr-map-hover: #f4f4f5;
    --sr-map-border: #3f3f46;
    --sr-map-border-subtle: #2e2e32;
    --sr-map-text: #18181b;
    --sr-map-text-muted: #52525b;
    --sr-map-accent: #a67c1f;
    --sr-map-accent-hover: #c4942e;
    --sr-map-accent-fill: #f5f0e6;
    --sr-map-accent-muted: rgba(212, 168, 83, 0.14);
    --sr-map-accent-surface: #f7f1e4;
    --sr-map-accent-surface-hover: #ebe4d4;
    /* Same bright gold outline as dark — consistent across themes */
    --sr-map-outline: #d4a853;
    --sr-map-hover-ring: inset 0 0 0 1px #d4a853;
    --sr-map-control-transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        color 0.15s ease,
        opacity 0.15s ease;
    --sr-map-panel-duration: 200ms;
    --sr-map-panel-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Kill Leaflet’s default blue (#0078a8) — brand gold instead */
html[data-sr-theme='dark'] .leaflet-container,
html[data-sr-theme='light'] .leaflet-container {
    -webkit-tap-highlight-color: var(--sr-map-accent-muted);
}

html[data-sr-theme='dark'] .leaflet-container a,
html[data-sr-theme='light'] .leaflet-container a {
    color: var(--sr-map-accent);
}

html[data-sr-theme='dark'] .leaflet-container a:hover,
html[data-sr-theme='dark'] .leaflet-container a:focus,
html[data-sr-theme='light'] .leaflet-container a:hover,
html[data-sr-theme='light'] .leaflet-container a:focus {
    color: var(--sr-map-accent-hover);
}

html[data-sr-theme='dark'] .leaflet-zoom-box,
html[data-sr-theme='light'] .leaflet-zoom-box {
    border-color: var(--sr-map-accent) !important;
}

/* Native checkbox / radio accents inside layers + sidebar */
html[data-sr-theme='dark'] .leaflet-control-layers input,
html[data-sr-theme='light'] .leaflet-control-layers input,
html[data-sr-theme='dark'] #sidebar input,
html[data-sr-theme='light'] #sidebar input {
    accent-color: var(--sr-map-accent);
}

/* Page / map chrome */
html[data-sr-theme='dark'] body,
html[data-sr-theme='dark'] #map {
    background: var(--sr-map-bg);
}

html[data-sr-theme='light'] body,
html[data-sr-theme='light'] #map {
    background: var(--sr-map-bg);
}

/* Leaflet zoom (+ / -) — Lucide Plus / Minus (hide Leaflet’s text glyphs) */
html[data-sr-theme='dark'] .leaflet-bar,
html[data-sr-theme='light'] .leaflet-bar {
    border: 1px solid var(--sr-map-border) !important;
    box-shadow: none !important;
    border-radius: 8px !important;
    /* visible so inset hover rings aren’t clipped at the rounded corners */
    overflow: visible;
}

html[data-sr-theme='dark'] .leaflet-bar a,
html[data-sr-theme='light'] .leaflet-bar a,
html[data-sr-theme='dark'] .leaflet-touch .leaflet-bar a,
html[data-sr-theme='light'] .leaflet-touch .leaflet-bar a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    line-height: 0 !important;
    text-indent: 0 !important;
    font-size: 0 !important;
    color: transparent !important;
    background-color: var(--sr-map-surface) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 18px 18px !important;
    border: 1px solid transparent !important;
    border-bottom: 1px solid var(--sr-map-border-subtle) !important;
    box-shadow: none !important;
    outline: none !important;
    opacity: 1 !important;
    transition: var(--sr-map-control-transition) !important;
}

html[data-sr-theme='dark'] .leaflet-bar a:first-child,
html[data-sr-theme='light'] .leaflet-bar a:first-child {
    border-radius: 7px 7px 0 0 !important;
}

html[data-sr-theme='dark'] .leaflet-bar a:last-child,
html[data-sr-theme='light'] .leaflet-bar a:last-child {
    border-bottom: 1px solid transparent !important;
    border-radius: 0 0 7px 7px !important;
}

html[data-sr-theme='dark'] .leaflet-control-zoom-in,
html[data-sr-theme='dark'] .leaflet-touch .leaflet-control-zoom-in {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f4f4f5' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E") !important;
}

html[data-sr-theme='light'] .leaflet-control-zoom-in,
html[data-sr-theme='light'] .leaflet-touch .leaflet-control-zoom-in {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2318181b' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E") !important;
}

html[data-sr-theme='dark'] .leaflet-control-zoom-out,
html[data-sr-theme='dark'] .leaflet-touch .leaflet-control-zoom-out {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f4f4f5' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") !important;
}

html[data-sr-theme='light'] .leaflet-control-zoom-out,
html[data-sr-theme='light'] .leaflet-touch .leaflet-control-zoom-out {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2318181b' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") !important;
}

/* Site-style hover: opaque gold-tint fill + gold border (works in dark + light) */
html[data-sr-theme='dark'] .leaflet-bar a:hover,
html[data-sr-theme='dark'] .leaflet-bar a:focus-visible,
html[data-sr-theme='light'] .leaflet-bar a:hover,
html[data-sr-theme='light'] .leaflet-bar a:focus-visible {
    background-color: var(--sr-map-accent-surface-hover) !important;
    border-color: var(--sr-map-outline) !important;
    box-shadow: var(--sr-map-hover-ring) !important;
    outline: none !important;
    opacity: 1 !important;
    filter: none !important;
    -webkit-filter: none !important;
    z-index: 2;
    position: relative;
}

/* Keep Lucide icons on hover — background-image is set per +/- control */
html[data-sr-theme='dark'] .leaflet-control-zoom-in:hover,
html[data-sr-theme='dark'] .leaflet-control-zoom-in:focus-visible,
html[data-sr-theme='dark'] .leaflet-touch .leaflet-control-zoom-in:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f4f4f5' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E") !important;
}

html[data-sr-theme='light'] .leaflet-control-zoom-in:hover,
html[data-sr-theme='light'] .leaflet-control-zoom-in:focus-visible,
html[data-sr-theme='light'] .leaflet-touch .leaflet-control-zoom-in:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2318181b' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E") !important;
}

html[data-sr-theme='dark'] .leaflet-control-zoom-out:hover,
html[data-sr-theme='dark'] .leaflet-control-zoom-out:focus-visible,
html[data-sr-theme='dark'] .leaflet-touch .leaflet-control-zoom-out:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f4f4f5' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") !important;
}

html[data-sr-theme='light'] .leaflet-control-zoom-out:hover,
html[data-sr-theme='light'] .leaflet-control-zoom-out:focus-visible,
html[data-sr-theme='light'] .leaflet-touch .leaflet-control-zoom-out:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2318181b' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") !important;
}

html[data-sr-theme='dark'] .leaflet-bar a:focus:not(:focus-visible),
html[data-sr-theme='light'] .leaflet-bar a:focus:not(:focus-visible) {
    outline: none !important;
}

html[data-sr-theme='dark'] .leaflet-bar a.leaflet-disabled,
html[data-sr-theme='light'] .leaflet-bar a.leaflet-disabled {
    opacity: 0.45 !important;
    background-color: var(--sr-map-surface) !important;
    box-shadow: none !important;
}

/*
 * Layers control — parent is a transparent layout shell only.
 * The toggle chip owns chrome open AND closed so the button never “becomes”
 * a different control when expanding.
 */
html[data-sr-theme='dark'] .leaflet-control-layers:not(.coordinates):not(.link),
html[data-sr-theme='dark'] .leaflet-touch .leaflet-control-layers:not(.coordinates):not(.link),
html[data-sr-theme='dark'] .leaflet-control-layers-collapsed:not(.coordinates):not(.link),
html[data-sr-theme='dark'] .leaflet-control-layers-expanded:not(.coordinates):not(.link),
html[data-sr-theme='light'] .leaflet-control-layers:not(.coordinates):not(.link),
html[data-sr-theme='light'] .leaflet-touch .leaflet-control-layers:not(.coordinates):not(.link),
html[data-sr-theme='light'] .leaflet-control-layers-collapsed:not(.coordinates):not(.link),
html[data-sr-theme='light'] .leaflet-control-layers-expanded:not(.coordinates):not(.link) {
    color: var(--sr-map-text) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
}

/* Put layers beside +/- in the same top-left lane */
html[data-sr-theme='dark'] .leaflet-top.leaflet-left.sr-map-controls,
html[data-sr-theme='light'] .leaflet-top.leaflet-left.sr-map-controls {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin-top: 10px !important;
    margin-left: 10px !important;
}

html[data-sr-theme='dark'] .leaflet-top.leaflet-left.sr-map-controls > .leaflet-control,
html[data-sr-theme='light'] .leaflet-top.leaflet-left.sr-map-controls > .leaflet-control {
    margin: 0 !important;
    float: none !important;
    clear: none !important;
}

/* Stable 36×36 chip — same footprint as each zoom button */
html[data-sr-theme='dark'] .leaflet-control-layers:not(.coordinates):not(.link) > .leaflet-control-layers-toggle,
html[data-sr-theme='dark'] .leaflet-touch .leaflet-control-layers:not(.coordinates):not(.link) > .leaflet-control-layers-toggle,
html[data-sr-theme='light'] .leaflet-control-layers:not(.coordinates):not(.link) > .leaflet-control-layers-toggle,
html[data-sr-theme='light'] .leaflet-touch .leaflet-control-layers:not(.coordinates):not(.link) > .leaflet-control-layers-toggle,
.leaflet-control-layers-expanded:not(.coordinates):not(.link) > .leaflet-control-layers-toggle,
.leaflet-control-layers:not(.coordinates):not(.link).sr-layers-closing > .leaflet-control-layers-toggle {
    filter: none !important;
    -webkit-filter: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    background-color: var(--sr-map-surface) !important;
    background-image: none !important;
    border: 1px solid var(--sr-map-border) !important;
    border-radius: 8px !important;
    color: var(--sr-map-text-muted, #a1a1aa) !important;
    box-shadow: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    order: 0 !important;
    transition: var(--sr-map-control-transition) !important;
}

html[data-sr-theme='dark'] .leaflet-control-layers:not(.coordinates):not(.link) > .leaflet-control-layers-toggle:hover,
html[data-sr-theme='dark'] .leaflet-control-layers:not(.coordinates):not(.link) > .leaflet-control-layers-toggle:focus-visible,
html[data-sr-theme='light'] .leaflet-control-layers:not(.coordinates):not(.link) > .leaflet-control-layers-toggle:hover,
html[data-sr-theme='light'] .leaflet-control-layers:not(.coordinates):not(.link) > .leaflet-control-layers-toggle:focus-visible,
html[data-sr-theme='dark']
    .leaflet-control-layers-expanded:not(.coordinates):not(.link)
    > .leaflet-control-layers-toggle:hover,
html[data-sr-theme='dark']
    .leaflet-control-layers-expanded:not(.coordinates):not(.link)
    > .leaflet-control-layers-toggle:focus-visible,
html[data-sr-theme='light']
    .leaflet-control-layers-expanded:not(.coordinates):not(.link)
    > .leaflet-control-layers-toggle:hover,
html[data-sr-theme='light']
    .leaflet-control-layers-expanded:not(.coordinates):not(.link)
    > .leaflet-control-layers-toggle:focus-visible,
html[data-sr-theme='dark']
    .leaflet-control-layers:not(.coordinates):not(.link)[data-sr-layers='open']
    > .leaflet-control-layers-toggle:hover,
html[data-sr-theme='dark']
    .leaflet-control-layers:not(.coordinates):not(.link)[data-sr-layers='open']
    > .leaflet-control-layers-toggle:focus-visible,
html[data-sr-theme='light']
    .leaflet-control-layers:not(.coordinates):not(.link)[data-sr-layers='open']
    > .leaflet-control-layers-toggle:hover,
html[data-sr-theme='light']
    .leaflet-control-layers:not(.coordinates):not(.link)[data-sr-layers='open']
    > .leaflet-control-layers-toggle:focus-visible,
html[data-sr-theme='dark']
    .leaflet-touch
    .leaflet-control-layers-expanded:not(.coordinates):not(.link)
    > .leaflet-control-layers-toggle:hover,
html[data-sr-theme='light']
    .leaflet-touch
    .leaflet-control-layers-expanded:not(.coordinates):not(.link)
    > .leaflet-control-layers-toggle:hover {
    background-color: var(--sr-map-accent-surface-hover) !important;
    background-image: none !important;
    border: 1px solid var(--sr-map-outline) !important;
    box-shadow: var(--sr-map-hover-ring) !important;
    color: var(--sr-map-text) !important;
    outline: none !important;
}

/* Dual-glyph morph: same button, icon crossfades in place */
.leaflet-control-layers:not(.coordinates):not(.link) > .leaflet-control-layers-toggle .sr-layers-icon {
    position: relative;
    display: block;
    width: 18px;
    height: 18px;
    pointer-events: none;
}

.leaflet-control-layers:not(.coordinates):not(.link)
    > .leaflet-control-layers-toggle
    .sr-layers-icon__glyph {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        opacity 180ms var(--sr-map-panel-ease),
        transform 180ms var(--sr-map-panel-ease);
    will-change: opacity, transform;
}

.leaflet-control-layers:not(.coordinates):not(.link)
    > .leaflet-control-layers-toggle
    .sr-layers-icon__glyph
    svg {
    display: block;
    width: 18px;
    height: 18px;
    pointer-events: none;
    stroke: currentColor;
}

.leaflet-control-layers:not(.coordinates):not(.link)
    > .leaflet-control-layers-toggle
    .sr-layers-icon__layers {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

.leaflet-control-layers:not(.coordinates):not(.link)
    > .leaflet-control-layers-toggle
    .sr-layers-icon__x {
    opacity: 0;
    transform: rotate(-90deg) scale(0.72);
}

.leaflet-control-layers:not(.coordinates):not(.link)
    > .leaflet-control-layers-toggle
    .sr-layers-icon[data-state='open']
    .sr-layers-icon__layers {
    opacity: 0;
    transform: rotate(90deg) scale(0.72);
}

.leaflet-control-layers:not(.coordinates):not(.link)
    > .leaflet-control-layers-toggle
    .sr-layers-icon[data-state='open']
    .sr-layers-icon__x {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

@media (prefers-reduced-motion: reduce) {
    .leaflet-control-layers:not(.coordinates):not(.link)
        > .leaflet-control-layers-toggle
        .sr-layers-icon__glyph {
        transition: none !important;
    }
}

/* Expanded: keep the chip, drop the checklist card underneath (aligned to zoom lane) */
html[data-sr-theme='dark'] .leaflet-control-layers-expanded:not(.coordinates):not(.link),
html[data-sr-theme='light'] .leaflet-control-layers-expanded:not(.coordinates):not(.link),
html[data-sr-theme='dark']
    .leaflet-control-layers:not(.coordinates):not(.link).sr-layers-closing,
html[data-sr-theme='light']
    .leaflet-control-layers:not(.coordinates):not(.link).sr-layers-closing {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
}

html[data-sr-theme='dark']
    .leaflet-control-layers-expanded:not(.coordinates):not(.link)
    .leaflet-control-layers-list,
html[data-sr-theme='light']
    .leaflet-control-layers-expanded:not(.coordinates):not(.link)
    .leaflet-control-layers-list,
html[data-sr-theme='dark']
    .leaflet-control-layers:not(.coordinates):not(.link).sr-layers-closing
    .leaflet-control-layers-list,
html[data-sr-theme='light']
    .leaflet-control-layers:not(.coordinates):not(.link).sr-layers-closing
    .leaflet-control-layers-list {
    order: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: min(240px, 72vw) !important;
    max-height: min(52vh, 340px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: var(--sr-map-surface) !important;
    border: 1px solid var(--sr-map-border) !important;
    border-radius: 10px !important;
    color: var(--sr-map-text) !important;
    box-shadow: none !important;
    transform-origin: top left;
    animation: sr-layers-in var(--sr-map-panel-duration) var(--sr-map-panel-ease) both;
}

html[data-sr-theme='dark']
    .leaflet-control-layers:not(.coordinates):not(.link).sr-layers-closing
    .leaflet-control-layers-list,
html[data-sr-theme='light']
    .leaflet-control-layers:not(.coordinates):not(.link).sr-layers-closing
    .leaflet-control-layers-list {
    animation: sr-layers-out 160ms ease both;
}

.sr-layers-panel__head {
    padding: 10px 12px 8px;
    border-bottom: 1px solid var(--sr-map-border-subtle);
    background: var(--sr-map-surface);
    text-align: left !important;
}

.sr-layers-panel__eyebrow {
    display: none !important;
}

.sr-layers-panel__title {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sr-map-text);
    line-height: 1.3;
    text-align: left !important;
}

html[data-sr-theme='dark'] .leaflet-control-layers label,
html[data-sr-theme='light'] .leaflet-control-layers label {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    border-radius: 0 !important;
    color: var(--sr-map-text) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    cursor: pointer;
}

html[data-sr-theme='dark'] .leaflet-control-layers label:hover,
html[data-sr-theme='light'] .leaflet-control-layers label:hover {
    background: var(--sr-map-hover) !important;
}

html[data-sr-theme='dark'] .leaflet-control-layers-separator,
html[data-sr-theme='light'] .leaflet-control-layers-separator {
    margin: 0 !important;
    border-top: 1px solid var(--sr-map-border) !important;
    height: 0 !important;
}

html[data-sr-theme='dark'] .leaflet-control-layers-base,
html[data-sr-theme='light'] .leaflet-control-layers-base,
html[data-sr-theme='dark'] .leaflet-control-layers-overlays,
html[data-sr-theme='light'] .leaflet-control-layers-overlays {
    padding: 4px 0 !important;
}

@keyframes sr-layers-in {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes sr-layers-out {
    from {
        opacity: 1;
        transform: none;
    }
    to {
        opacity: 0;
        transform: translateY(-6px) scale(0.98);
    }
}

html[data-sr-theme='dark'] .leaflet-control-layers-toggle:focus:not(:focus-visible),
html[data-sr-theme='light'] .leaflet-control-layers-toggle:focus:not(:focus-visible) {
    outline: none !important;
}

html[data-sr-theme='dark'] .leaflet-control-layers-expanded,
html[data-sr-theme='light'] .leaflet-control-layers-expanded {
    color: var(--sr-map-text) !important;
}

/* Link control disabled (copy-view URL — broken in embeds). Keep coords styled. */
div.leaflet-control-layers.link {
    display: none !important;
}

html[data-sr-theme='dark'] div.leaflet-control-layers.coordinates,
html[data-sr-theme='light'] div.leaflet-control-layers.coordinates,
html[data-sr-theme='dark'] div.leaflet-control-layers.coordinates.sr-coordinates,
html[data-sr-theme='light'] div.leaflet-control-layers.coordinates.sr-coordinates {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 10px !important;
    line-height: 1.35 !important;
    font-size: 12px !important;
    color: var(--sr-map-text);
    background: var(--sr-map-surface);
    border: 1px solid var(--sr-map-border);
    box-shadow: none;
    border-radius: 8px;
    transition: var(--sr-map-control-transition);
}

html[data-sr-theme='dark'] .sr-coords-icon,
html[data-sr-theme='light'] .sr-coords-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: 16px !important;
    height: 16px !important;
    color: var(--sr-map-text);
    line-height: 0 !important;
}

html[data-sr-theme='dark'] .sr-coords-icon svg,
html[data-sr-theme='light'] .sr-coords-icon svg {
    display: block;
    width: 16px;
    height: 16px;
}

html[data-sr-theme='dark'] .sr-coords-text,
html[data-sr-theme='light'] .sr-coords-text {
    display: block;
    min-width: 0;
    color: var(--sr-map-text);
    line-height: 1.35;
}

/* Claim / marker tooltips — theme chrome + stable card width
 * (width:100% + overflow-wrap:anywhere was collapsing to a 1-char column).
 *
 * CRITICAL: never transition transform/left/top/opacity on .leaflet-tooltip.
 * Sticky claim tooltips update position every mousemove; any transition
 * interpolates that and looks like a trailing ghost behind the cursor.
 *
 * Do NOT force min-width / fixed inner width on all tooltips — player
 * nameplates also use .leaflet-tooltip and were stretching empty. */
html[data-sr-theme='dark'] .leaflet-tooltip,
html[data-sr-theme='light'] .leaflet-tooltip,
html[data-sr-theme='dark'] .leaflet-fade-anim .leaflet-tooltip,
html[data-sr-theme='light'] .leaflet-fade-anim .leaflet-tooltip,
html[data-sr-theme='dark'] .leaflet-tooltip-pane .leaflet-tooltip,
html[data-sr-theme='light'] .leaflet-tooltip-pane .leaflet-tooltip {
    box-sizing: border-box !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: min(320px, 84vw) !important;
    padding: 0 !important;
    border: 1px solid var(--sr-map-border) !important;
    border-radius: 10px !important;
    background: var(--sr-map-surface) !important;
    color: var(--sr-map-text) !important;
    box-shadow: none !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    line-height: 1.45 !important;
    font-size: 13px !important;
    opacity: 1 !important;
    /* Sticky claim tooltips track the cursor — never fade/slide or steal hover */
    pointer-events: none !important;
    transition: none !important;
    transition-property: none !important;
    animation: none !important;
    will-change: auto !important;
}

html[data-sr-theme='dark'] .leaflet-tooltip-pane,
html[data-sr-theme='light'] .leaflet-tooltip-pane {
    pointer-events: none !important;
    transition: none !important;
    animation: none !important;
}

/*
 * Sticky claim tooltips follow the cursor every mousemove.
 * Leaflet can leave transform/opacity transitions or pointer hit-testing
 * enabled (.leaflet-interactive) — that duplicates cards and trails ghosts.
 */
html[data-sr-theme='dark'] .leaflet-tooltip.leaflet-interactive,
html[data-sr-theme='light'] .leaflet-tooltip.leaflet-interactive,
html[data-sr-theme='dark'] .leaflet-zoom-anim .leaflet-tooltip.leaflet-zoom-animated,
html[data-sr-theme='light'] .leaflet-zoom-anim .leaflet-tooltip.leaflet-zoom-animated,
html[data-sr-theme='dark'] .leaflet-tooltip:has(.sr-claim-tooltip),
html[data-sr-theme='light'] .leaflet-tooltip:has(.sr-claim-tooltip) {
    pointer-events: none !important;
    transition: none !important;
    transition-property: none !important;
    animation: none !important;
    will-change: auto !important;
}

/* Inner wrapper — hug by default; claim cards pin width below */
html[data-sr-theme='dark'] .leaflet-tooltip > div,
html[data-sr-theme='light'] .leaflet-tooltip > div {
    box-sizing: border-box !important;
    width: max-content !important;
    max-width: min(320px, 84vw) !important;
    min-width: 0 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

/* Claim cards need a stable reading width */
html[data-sr-theme='dark'] .leaflet-tooltip:has(.sr-claim-tooltip),
html[data-sr-theme='light'] .leaflet-tooltip:has(.sr-claim-tooltip) {
    min-width: 260px !important;
    overflow: hidden !important;
}

html[data-sr-theme='dark'] .leaflet-tooltip:has(.sr-claim-tooltip) > div,
html[data-sr-theme='light'] .leaflet-tooltip:has(.sr-claim-tooltip) > div {
    width: 100% !important;
    min-width: 260px !important;
    max-width: min(300px, 84vw) !important;
    margin: 0 !important;
    padding: 0 !important;
}

html[data-sr-theme='dark'] .leaflet-popup-content:has(.sr-claim-tooltip),
html[data-sr-theme='light'] .leaflet-popup-content:has(.sr-claim-tooltip) {
    width: min(300px, 84vw) !important;
    max-width: min(300px, 84vw) !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Player nameplates — after general tooltip rules so they win (hug content) */
html[data-sr-theme='dark'] div.leaflet-nameplate-pane > div,
html[data-sr-theme='light'] div.leaflet-nameplate-pane > div,
html[data-sr-theme='dark'] .leaflet-tooltip:has(.nameplate-container),
html[data-sr-theme='light'] .leaflet-tooltip:has(.nameplate-container),
html[data-sr-theme='dark'] .leaflet-tooltip-pane .leaflet-tooltip:has(.nameplate-container),
html[data-sr-theme='light'] .leaflet-tooltip-pane .leaflet-tooltip:has(.nameplate-container) {
    box-sizing: border-box !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 4px 8px !important;
    border: 1px solid var(--sr-map-border) !important;
    border-radius: 8px !important;
    background: var(--sr-map-surface) !important;
    color: var(--sr-map-text) !important;
    box-shadow: none !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    line-height: 1 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    opacity: 1 !important;
    pointer-events: none !important;
    transition: none !important;
}

html[data-sr-theme='dark'] .leaflet-tooltip:has(.nameplate-container) > div,
html[data-sr-theme='light'] .leaflet-tooltip:has(.nameplate-container) > div {
    width: max-content !important;
    min-width: 0 !important;
    max-width: none !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

html[data-sr-theme='dark'] .nameplate-container,
html[data-sr-theme='light'] .nameplate-container {
    display: flex !important;
    align-items: center !important;
    gap: 0.375rem !important;
    margin: 0 !important;
    width: max-content !important;
    max-width: none !important;
}

html[data-sr-theme='dark'] .nameplate-col2,
html[data-sr-theme='light'] .nameplate-col2 {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.125rem !important;
    width: max-content !important;
    min-width: 0 !important;
}

html[data-sr-theme='dark'] div.leaflet-nameplate-pane img.head,
html[data-sr-theme='light'] div.leaflet-nameplate-pane img.head,
html[data-sr-theme='dark'] .leaflet-tooltip:has(.nameplate-container) img.head,
html[data-sr-theme='light'] .leaflet-tooltip:has(.nameplate-container) img.head {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
    image-rendering: pixelated;
}

html[data-sr-theme='dark'] div.leaflet-nameplate-pane img.armor,
html[data-sr-theme='dark'] div.leaflet-nameplate-pane img.health,
html[data-sr-theme='light'] div.leaflet-nameplate-pane img.armor,
html[data-sr-theme='light'] div.leaflet-nameplate-pane img.health,
html[data-sr-theme='dark'] .leaflet-tooltip:has(.nameplate-container) img.armor,
html[data-sr-theme='dark'] .leaflet-tooltip:has(.nameplate-container) img.health,
html[data-sr-theme='light'] .leaflet-tooltip:has(.nameplate-container) img.armor,
html[data-sr-theme='light'] .leaflet-tooltip:has(.nameplate-container) img.health {
    width: auto !important;
    max-width: none !important;
    height: 9px !important;
    display: block !important;
    image-rendering: pixelated;
}

html[data-sr-theme='dark'] .leaflet-tooltip::before,
html[data-sr-theme='light'] .leaflet-tooltip::before {
    border-top-color: var(--sr-map-border) !important;
}

html[data-sr-theme='dark'] .leaflet-tooltip-bottom::before,
html[data-sr-theme='light'] .leaflet-tooltip-bottom::before {
    border-bottom-color: var(--sr-map-border) !important;
    border-top-color: transparent !important;
}

html[data-sr-theme='dark'] .leaflet-tooltip-left::before,
html[data-sr-theme='light'] .leaflet-tooltip-left::before {
    border-left-color: var(--sr-map-border) !important;
    border-top-color: transparent !important;
}

html[data-sr-theme='dark'] .leaflet-tooltip-right::before,
html[data-sr-theme='light'] .leaflet-tooltip-right::before {
    border-right-color: var(--sr-map-border) !important;
    border-top-color: transparent !important;
}

/* Click tooltips use the same Leaflet tooltip chrome in Squaremap */
html[data-sr-theme='dark'] .leaflet-popup-content-wrapper,
html[data-sr-theme='light'] .leaflet-popup-content-wrapper {
    box-sizing: border-box !important;
    min-width: 260px !important;
    max-width: min(320px, 84vw) !important;
    padding: 0 !important;
    border: 1px solid var(--sr-map-border) !important;
    border-radius: 10px !important;
    background: var(--sr-map-surface) !important;
    color: var(--sr-map-text) !important;
    box-shadow: none !important;
}

html[data-sr-theme='dark'] .leaflet-popup-content,
html[data-sr-theme='light'] .leaflet-popup-content {
    box-sizing: border-box !important;
    width: 280px !important;
    max-width: min(320px, 84vw) !important;
    margin: 0 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

html[data-sr-theme='dark'] .leaflet-popup-tip,
html[data-sr-theme='light'] .leaflet-popup-tip {
    background: var(--sr-map-surface) !important;
    border: 1px solid var(--sr-map-border) !important;
    box-shadow: none !important;
}

/* Claim card — matches sidebar fieldset cards */
.sr-claim-tooltip {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 0;
    color: var(--sr-map-text);
    background: transparent;
    text-align: left;
    overflow: hidden;
}

.sr-claim-tooltip__head {
    padding: 10px 12px 8px;
    border-bottom: 1px solid var(--sr-map-border-subtle);
    background: var(--sr-map-accent-surface);
}

.sr-claim-tooltip__eyebrow {
    margin: 0 0 4px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sr-map-accent);
    line-height: 1.2;
}

.sr-claim-tooltip__title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    text-align: left;
    line-height: 1.3;
    letter-spacing: -0.01em;
    overflow-wrap: break-word;
    word-break: normal;
}

/* Legacy markup (title/divider/rows direct under root) until plugin rebuild */
.sr-claim-tooltip > .sr-claim-tooltip__title {
    padding: 10px 12px 8px;
    border-bottom: 1px solid var(--sr-map-border-subtle);
    background: var(--sr-map-accent-surface);
}

.sr-claim-tooltip__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px 12px;
}

.sr-claim-tooltip:not(:has(.sr-claim-tooltip__body)) {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px 12px;
}

.sr-claim-tooltip:not(:has(.sr-claim-tooltip__body)) > .sr-claim-tooltip__row {
    margin: 0;
}

.sr-claim-tooltip__divider {
    display: none;
}

.sr-claim-tooltip__row {
    display: grid;
    grid-template-columns: 4.75rem minmax(0, 1fr);
    gap: 2px 10px;
    align-items: start;
    margin: 0;
}

.sr-claim-tooltip__row:last-child {
    margin-bottom: 0;
}

.sr-claim-tooltip__row--trusted {
    align-items: start;
}

.sr-claim-tooltip__label {
    color: var(--sr-map-text-muted);
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.4;
    padding-top: 1px;
}

.sr-claim-tooltip__value {
    min-width: 0;
    color: var(--sr-map-text);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    overflow-wrap: break-word;
    word-break: normal;
}

.sr-claim-tooltip__muted {
    color: var(--sr-map-text-muted);
    font-weight: 500;
}

.sr-claim-tooltip__trusted {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    min-width: 0;
    max-width: 100%;
}

.sr-claim-tooltip__chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: 1.35rem;
    padding: 2px 8px;
    border: 1px solid var(--sr-map-border);
    border-radius: 6px;
    background: var(--sr-map-accent-surface);
    color: var(--sr-map-text);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Sidebar panel */
html[data-sr-theme='dark'] #sidebar,
html[data-sr-theme='light'] #sidebar {
    color: var(--sr-map-text);
    background-color: var(--sr-map-surface);
    border-left: 1px solid var(--sr-map-border);
    transition:
        width var(--sr-map-panel-duration) var(--sr-map-panel-ease),
        padding var(--sr-map-panel-duration) var(--sr-map-panel-ease),
        background-color var(--sr-map-panel-duration) ease,
        border-color var(--sr-map-panel-duration) ease;
    will-change: width;
}

/* Open panel: flex column so the players list can scroll.
 * Pin is position:fixed when open, so overflow:hidden is safe and clips the slide. */
html[data-sr-theme='dark'] #sidebar.show,
html[data-sr-theme='light'] #sidebar.show {
    display: flex !important;
    flex-flow: column nowrap !important;
    gap: 10px !important;
    width: 200px !important;
    height: 100vh !important;
    max-height: 100vh !important;
    padding: 10px 8px 12px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Fully closed — hide body so it can’t spill over the map */
html[data-sr-theme='dark'] #sidebar:not(.show):not(.sr-sidebar-closing) > :not(#pin):not(#sr-pin-face),
html[data-sr-theme='light'] #sidebar:not(.show):not(.sr-sidebar-closing) > :not(#pin):not(#sr-pin-face) {
    display: none !important;
}

/* Panel body fades/slides in with the rail */
html[data-sr-theme='dark'] #sidebar.show > :not(#pin):not(#sr-pin-face),
html[data-sr-theme='light'] #sidebar.show > :not(#pin):not(#sr-pin-face) {
    animation: sr-sidebar-body-in 180ms var(--sr-map-panel-ease) both;
}

html[data-sr-theme='dark'] #sidebar.sr-sidebar-closing > :not(#pin):not(#sr-pin-face),
html[data-sr-theme='light'] #sidebar.sr-sidebar-closing > :not(#pin):not(#sr-pin-face) {
    opacity: 0;
    transform: translateX(10px);
    pointer-events: none;
    transition:
        opacity 120ms ease,
        transform 140ms ease;
}

@keyframes sr-sidebar-body-in {
    from {
        opacity: 0;
        transform: translateX(12px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* Players + Dimensions — card chrome; titles are .sr-fieldset-title (not <legend>) */
html[data-sr-theme='dark'] #sidebar fieldset,
html[data-sr-theme='light'] #sidebar fieldset {
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 0 6px !important;
    border: 1px solid var(--sr-map-border) !important;
    border-radius: 8px !important;
    background: var(--sr-map-surface) !important;
    box-shadow: none !important;
    flex-shrink: 0;
    min-width: 0;
    overflow: hidden;
    position: relative;
}

/* Hide native legend — it sits in the border gap and breaks the outline */
html[data-sr-theme='dark'] #sidebar fieldset > legend,
html[data-sr-theme='light'] #sidebar fieldset > legend {
    display: none !important;
}

.sr-fieldset-title {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 10px 12px 8px !important;
    border: none !important;
    border-bottom: 1px solid var(--sr-map-border-subtle) !important;
    background: var(--sr-map-surface) !important;
    color: var(--sr-map-text) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    line-height: 1.3 !important;
    flex: 0 0 auto !important;
}

html[data-sr-theme='dark'] #sidebar fieldset#players,
html[data-sr-theme='light'] #sidebar fieldset#players {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
}

#sr-sidebar-roster {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    gap: 10px !important;
    overflow: hidden !important;
}

#sr-sidebar-layers {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    min-width: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    /* Squaremap sets #sidebar { text-align: right } — fieldsets override, this pane must too */
    text-align: left !important;
}

#sidebar[data-sr-tab='roster'] #sr-sidebar-layers,
#sidebar[data-sr-tab='layers'] #sr-sidebar-roster {
    display: none !important;
}

html[data-sr-theme='dark'] #sidebar fieldset#worlds,
html[data-sr-theme='light'] #sidebar fieldset#worlds {
    flex: 0 1 auto !important;
    max-height: 38vh !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

html[data-sr-theme='dark'] #sidebar fieldset a,
html[data-sr-theme='dark'] #sidebar fieldset a:visited,
html[data-sr-theme='light'] #sidebar fieldset a,
html[data-sr-theme='light'] #sidebar fieldset a:visited {
    position: relative;
    z-index: 1;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: var(--sr-map-text) !important;
    border: 1px solid transparent;
    border-radius: 6px;
    margin: 2px 6px;
    padding: 6px 8px !important;
    box-shadow: none;
    outline: none !important;
    transition: var(--sr-map-control-transition) !important;
}

/* Worlds + players — gold fill + matching outline in both themes */
html[data-sr-theme='dark'] #sidebar fieldset a:hover,
html[data-sr-theme='dark'] #sidebar fieldset a:focus-visible,
html[data-sr-theme='light'] #sidebar fieldset a:hover,
html[data-sr-theme='light'] #sidebar fieldset a:focus-visible {
    background-color: var(--sr-map-accent-surface-hover) !important;
    border-color: var(--sr-map-outline) !important;
    box-shadow: var(--sr-map-hover-ring) !important;
    cursor: pointer;
}

html[data-sr-theme='dark'] #sidebar fieldset a.following,
html[data-sr-theme='light'] #sidebar fieldset a.following,
html[data-sr-theme='dark'] #sidebar fieldset#worlds a.sr-world-current,
html[data-sr-theme='light'] #sidebar fieldset#worlds a.sr-world-current {
    background-color: var(--sr-map-accent-surface) !important;
    border-color: var(--sr-map-outline) !important;
    box-shadow: var(--sr-map-hover-ring) !important;
}

html[data-sr-theme='dark'] #sidebar fieldset a.following:hover,
html[data-sr-theme='light'] #sidebar fieldset a.following:hover,
html[data-sr-theme='dark'] #sidebar fieldset#worlds a.sr-world-current:hover,
html[data-sr-theme='light'] #sidebar fieldset#worlds a.sr-world-current:hover {
    background-color: var(--sr-map-accent-surface-hover) !important;
    border-color: var(--sr-map-outline) !important;
    box-shadow: var(--sr-map-hover-ring) !important;
}

/* Kill Squaremap’s default white drop-shadows on dark chrome */
html[data-sr-theme='dark'] #sidebar fieldset a img,
html[data-sr-theme='dark'] #sidebar #pin,
html[data-sr-theme='light'] #sidebar #pin {
    -webkit-filter: none !important;
    filter: none !important;
}

html[data-sr-theme='light'] #sidebar fieldset a img {
    -webkit-filter: none !important;
    filter: none !important;
}

html[data-sr-theme='light'] #sidebar fieldset#players::-webkit-scrollbar-thumb {
    border-right-color: rgba(63, 63, 70, 0.45);
}

html[data-sr-theme='light'] #sidebar fieldset#players::-webkit-scrollbar-thumb:hover {
    background-color: rgba(63, 63, 70, 0.35);
}

/*
 * Collapsed: no rail — floating players/dimensions control.
 * Lucide icon is painted by #sr-pin-face (theme-bridge.js).
 * Hover uses data-sr-hot from JS so sidebar content never lights the button.
 */
#sidebar:not(.show) {
    width: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* Closing: keep the open rail painted while width animates to 0 */
#sidebar.sr-sidebar-closing {
    display: flex !important;
    flex-flow: column nowrap !important;
    gap: 10px !important;
    width: 0 !important;
    height: 100vh !important;
    max-height: 100vh !important;
    padding-top: 10px !important;
    padding-bottom: 12px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden !important;
    background-color: var(--sr-map-surface) !important;
    border-left: 1px solid var(--sr-map-border) !important;
    box-sizing: border-box !important;
}

@media (prefers-reduced-motion: reduce) {
    html[data-sr-theme='dark'],
    html[data-sr-theme='light'] {
        --sr-map-panel-duration: 1ms;
    }

    html[data-sr-theme='dark']
        .leaflet-control-layers-expanded:not(.coordinates):not(.link)
        .leaflet-control-layers-list,
    html[data-sr-theme='light']
        .leaflet-control-layers-expanded:not(.coordinates):not(.link)
        .leaflet-control-layers-list,
    html[data-sr-theme='dark']
        .leaflet-control-layers:not(.coordinates):not(.link).sr-layers-closing
        .leaflet-control-layers-list,
    html[data-sr-theme='light']
        .leaflet-control-layers:not(.coordinates):not(.link).sr-layers-closing
        .leaflet-control-layers-list,
    html[data-sr-theme='dark'] #sidebar,
    html[data-sr-theme='light'] #sidebar,
    html[data-sr-theme='dark'] #sidebar.show > :not(#pin):not(#sr-pin-face),
    html[data-sr-theme='light'] #sidebar.show > :not(#pin):not(#sr-pin-face),
    html[data-sr-theme='dark'] #sidebar:not(.show) > :not(#pin):not(#sr-pin-face),
    html[data-sr-theme='light'] #sidebar:not(.show) > :not(#pin):not(#sr-pin-face) {
        animation: none !important;
        transition: none !important;
    }
}

#sidebar #pin,
#sr-pin-face {
    box-sizing: border-box !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    border: 1px solid var(--sr-map-border) !important;
    border-radius: 8px !important;
    background-color: var(--sr-map-surface) !important;
    background-image: none !important;
    box-shadow: none !important;
    transition: var(--sr-map-control-transition) !important;
}

/* Invisible Squaremap toggle — face owns hover/click chrome */
#sidebar #pin {
    cursor: pointer;
    z-index: 10050 !important;
    padding: 0 !important;
    object-fit: contain !important;
    -webkit-filter: none !important;
    filter: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    outline: none !important;
}

#sr-pin-face {
    z-index: 10051 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    pointer-events: auto !important;
    cursor: pointer;
    color: var(--sr-map-text-muted, #a1a1aa);
    visibility: visible !important;
    opacity: 1 !important;
    appearance: none;
    -webkit-appearance: none;
    padding: 0 !important;
    font: inherit;
    outline: none !important;
}

#sr-pin-face svg {
    display: block;
    width: 18px;
    height: 18px;
    pointer-events: none;
}

#sidebar:not(.show):not(.sr-sidebar-closing) #pin,
#sidebar:not(.show):not(.sr-sidebar-closing) #sr-pin-face,
#sr-pin-face[data-sr-state='closed'] {
    position: absolute !important;
    top: 12px !important;
    left: 0 !important;
    right: auto !important;
    transform: translateX(calc(-100% - 12px)) !important;
    border-radius: 8px !important;
}

/*
 * Open / closing: dock the control to the left of the rail with fixed positioning
 * so Squaremap overflow / flex layout can’t clip or swallow the X.
 * Closing keeps this placement while the X fades out (no snap to Options yet).
 */
#sidebar.show #pin,
#sidebar.show #sr-pin-face,
#sidebar.sr-sidebar-closing #pin,
#sidebar.sr-sidebar-closing #sr-pin-face,
#sr-pin-face[data-sr-state='open'],
#sr-pin-face[data-sr-state='closing'] {
    position: fixed !important;
    top: 10px !important;
    right: calc(200px + 8px) !important;
    left: auto !important;
    transform: none !important;
    border-radius: 8px !important;
    z-index: 10050 !important;
    visibility: visible !important;
    display: inline-flex !important;
}

#sidebar.show #sr-pin-face,
#sr-pin-face[data-sr-state='open'] {
    opacity: 1 !important;
}

#sr-pin-face[data-sr-state='closing'],
#sr-pin-face.sr-pin-face--leaving {
    pointer-events: none !important;
}

/* Pin stays an invisible Squaremap hit-target; face is the visible control. */
#sidebar.show #pin,
#sidebar.sr-sidebar-closing #pin {
    pointer-events: none !important;
    opacity: 0 !important;
    display: block !important;
}

#sidebar.show #sr-pin-face,
#sr-pin-face[data-sr-state='open'] {
    pointer-events: auto !important;
    z-index: 10051 !important;
}

/* Resting — closed */
#sidebar #pin[data-sr-state='closed'],
#sidebar:not(.show) #pin,
#sidebar:not(.show) #sr-pin-face,
#sr-pin-face[data-sr-state='closed'] {
    background-color: var(--sr-map-surface) !important;
    border-color: var(--sr-map-border) !important;
}

/* Resting — open uses the same neutral chrome as closed (gold only on hover) */
#sidebar #pin[data-sr-state='open'],
#sidebar.show #pin,
#sidebar.show #sr-pin-face,
#sr-pin-face[data-sr-state='open'] {
    background-color: var(--sr-map-surface) !important;
    border-color: var(--sr-map-border) !important;
}

/*
 * Kill Squaremap’s green/red pin:hover fills — pin is non-interactive now.
 */
#sidebar #pin:hover,
#sidebar #pin.pinned:hover,
#sidebar #pin.unpinned:hover,
#sidebar:not(.show) #pin:hover,
#sidebar.show #pin:hover,
#sidebar #pin:focus,
#sidebar #pin:focus-visible {
    background-color: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    opacity: 0 !important;
    filter: none !important;
    -webkit-filter: none !important;
}

/*
 * Same hover as zoom — gold wash + inset ring + accent border.
 * Face is the hover target (not the invisible pin).
 */
html[data-sr-theme='dark'] #sr-pin-face:hover,
html[data-sr-theme='light'] #sr-pin-face:hover,
html[data-sr-theme='dark'] #sr-pin-face:focus-visible,
html[data-sr-theme='light'] #sr-pin-face:focus-visible,
html[data-sr-theme='dark'] #sr-pin-face[data-sr-hot='1'],
html[data-sr-theme='light'] #sr-pin-face[data-sr-hot='1'],
html[data-sr-theme='dark'] #sidebar #sr-pin-face:hover,
html[data-sr-theme='light'] #sidebar #sr-pin-face:hover,
html[data-sr-theme='dark'] #sidebar #sr-pin-face:focus-visible,
html[data-sr-theme='light'] #sidebar #sr-pin-face:focus-visible,
html[data-sr-theme='dark'] #sidebar #sr-pin-face[data-sr-hot='1'],
html[data-sr-theme='light'] #sidebar #sr-pin-face[data-sr-hot='1'],
html[data-sr-theme='dark'] #sidebar:not(.show) #sr-pin-face:hover,
html[data-sr-theme='light'] #sidebar:not(.show) #sr-pin-face:hover,
html[data-sr-theme='dark'] #sidebar.show #sr-pin-face:hover,
html[data-sr-theme='light'] #sidebar.show #sr-pin-face:hover,
html[data-sr-theme='dark'] #sidebar:not(.show) #sr-pin-face[data-sr-hot='1'],
html[data-sr-theme='light'] #sidebar:not(.show) #sr-pin-face[data-sr-hot='1'],
html[data-sr-theme='dark'] #sidebar.show #sr-pin-face[data-sr-hot='1'],
html[data-sr-theme='light'] #sidebar.show #sr-pin-face[data-sr-hot='1'],
html[data-sr-theme='dark'] #sr-pin-face[data-sr-state='closed']:hover,
html[data-sr-theme='light'] #sr-pin-face[data-sr-state='closed']:hover,
html[data-sr-theme='dark'] #sr-pin-face[data-sr-state='open']:hover,
html[data-sr-theme='light'] #sr-pin-face[data-sr-state='open']:hover,
html[data-sr-theme='dark'] #sr-pin-face[data-sr-state='closed'][data-sr-hot='1'],
html[data-sr-theme='light'] #sr-pin-face[data-sr-state='closed'][data-sr-hot='1'],
html[data-sr-theme='dark'] #sr-pin-face[data-sr-state='open'][data-sr-hot='1'],
html[data-sr-theme='light'] #sr-pin-face[data-sr-state='open'][data-sr-hot='1'] {
    background-color: var(--sr-map-accent-surface-hover) !important;
    border-color: var(--sr-map-outline) !important;
    box-shadow: var(--sr-map-hover-ring) !important;
    outline: none !important;
    color: var(--sr-map-text) !important;
}

html[data-sr-theme='dark'] #sr-pin-face:hover svg,
html[data-sr-theme='light'] #sr-pin-face:hover svg,
html[data-sr-theme='dark'] #sr-pin-face:focus-visible svg,
html[data-sr-theme='light'] #sr-pin-face:focus-visible svg,
html[data-sr-theme='dark'] #sr-pin-face[data-sr-hot='1'] svg,
html[data-sr-theme='light'] #sr-pin-face[data-sr-hot='1'] svg {
    stroke: var(--sr-map-text) !important;
}


/* ── Sidebar Players ↔ Layers tabs (single Options chip opens this) ─── */
#sr-sidebar-tabs {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 4px !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 3px !important;
    border: 1px solid var(--sr-map-border) !important;
    border-radius: 8px !important;
    background: var(--sr-map-surface) !important;
}

.sr-sidebar-tab {
    appearance: none;
    margin: 0;
    padding: 7px 8px !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: var(--sr-map-text-muted, #a1a1aa) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
    cursor: pointer;
    transition: var(--sr-map-control-transition) !important;
}

.sr-sidebar-tab:hover,
.sr-sidebar-tab:focus-visible {
    color: var(--sr-map-text) !important;
    background: var(--sr-map-hover) !important;
    outline: none !important;
}

.sr-sidebar-tab.is-active {
    color: var(--sr-map-text) !important;
    background: var(--sr-map-accent-surface) !important;
    border-color: var(--sr-map-outline) !important;
    box-shadow: var(--sr-map-hover-ring) !important;
}

/* Docked Leaflet layers control lives inside the slide menu */
.leaflet-control-layers.sr-layers-docked:not(.coordinates):not(.link),
.leaflet-touch .leaflet-control-layers.sr-layers-docked:not(.coordinates):not(.link) {
    position: static !important;
    float: none !important;
    clear: none !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.leaflet-control-layers.sr-layers-docked:not(.coordinates):not(.link)
    > .leaflet-control-layers-toggle {
    display: none !important;
}

.leaflet-control-layers.sr-layers-docked:not(.coordinates):not(.link)
    .leaflet-control-layers-list,
.leaflet-control-layers.sr-layers-docked.leaflet-control-layers-expanded:not(.coordinates):not(.link)
    .leaflet-control-layers-list {
    order: 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    height: 100% !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    animation: none !important;
    transform: none !important;
    background: var(--sr-map-surface) !important;
    border: 1px solid var(--sr-map-border) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
    text-align: left !important;
}

/* Open sidebar needs room for the tab row above the cards */
html[data-sr-theme='dark'] #sidebar.show,
html[data-sr-theme='light'] #sidebar.show {
    padding-top: 10px !important;
}