html, body, #app, #app *,
*, *::before, *::after,
*:focus, *:focus-visible, *:focus-within {
    outline: none !important;
    outline-style: none !important;
    outline-width: 0 !important;
    -webkit-tap-highlight-color: transparent !important;
}

.leaflet-container *,
.leaflet-container *:focus,
.leaflet-container *:focus-visible,
.leaflet-container *:focus-within,
.leaflet-container,
.leaflet-container:focus,
.leaflet-container:focus-visible,
html.leaflet-container *:focus,
body *:focus {
    outline-style: none !important;
    outline: none !important;
}

html, body, #app, .leaflet-container, .map, .sidebar__content {
    overscroll-behavior: none !important;
    -ms-scroll-chaining: none !important;
    overscroll-behavior-y: none !important;
    overscroll-behavior-x: none !important;
}

html, body {
    overflow: hidden !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    border: none !important;
}

#app, .leaflet-container, .map {
    border: none !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
    letter-spacing: 0.01em;
}

.sidebar__section .section__heading button {
    font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
    font-weight: 600;
    font-size: 1.6rem;
    letter-spacing: 0.01em;
}

button, [type=button], .leaflet-control-button, .leaflet-control-layers-toggle,
.leaflet-control-logo, .leaflet-bar a, .leaflet-control a, .leaflet-control button,
.menu > input[type=radio] + label {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 400;
}

.sidebar__section,
.chat,
.clock,
.modal .modal__header,
.modal .modal__content,
.leaflet-control-layers .leaflet-control-layers-list,
#map-context-menu ul,
.leaflet-popup .leaflet-popup-content-wrapper,
.leaflet-tooltip,
.vue-notification-group .notification {
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    background-color: var(--background-base) !important;
    border: 1px solid rgba(161, 161, 170, 0.10);
}

.leaflet-control {
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    background-color: var(--background-base);
    border: 1px solid rgba(161, 161, 170, 0.10);
}

.sidebar__buttons button {
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    backdrop-filter: var(--glass-blur);
    background-color: var(--background-base);
    border: 1px solid rgba(161, 161, 170, 0.10);
}

.sidebar__buttons {
    background: transparent !important;
}

.sidebar__buttons button {
    border-radius: var(--border-radius) !important;
}

.leaflet-control-zoom a:hover,
.leaflet-control-layers-toggle:hover,
.sidebar__buttons button:hover {
    background-color: #27272a !important;
    background: #27272a !important;
}

.sidebar__buttons button[aria-expanded="true"] {
    background: var(--accent-gradient) !important;
}

.sidebar__section,
.chat,
.modal .modal__header,
.modal .modal__content,
.leaflet-control,
.leaflet-control-layers .leaflet-control-layers-list,
#map-context-menu ul,
.leaflet-popup .leaflet-popup-content-wrapper,
.vue-notification-group .notification,
.clock,
button, [type=button],
.leaflet-control-button,
.leaflet-control-layers-toggle,
.leaflet-bar a,
.leaflet-tooltip,
input {
    border-radius: var(--border-radius) !important;
}

.leaflet-bar {
    overflow: hidden;
    border-radius: var(--border-radius) !important;
}

.leaflet-bar a {
    border-radius: 0 !important;
}

.leaflet-bar a:first-child {
    border-top-left-radius: var(--border-radius) !important;
    border-top-right-radius: var(--border-radius) !important;
}

.leaflet-bar a:last-child {
    border-bottom-left-radius: var(--border-radius) !important;
    border-bottom-right-radius: var(--border-radius) !important;
}

button, [type=button], .leaflet-control-button, .leaflet-control-layers-toggle,
.leaflet-control-logo, .leaflet-bar a, .leaflet-control a, .leaflet-control button,
.menu > input[type=radio] + label {
    transition: background-color .2s ease, color .2s ease, transform .18s ease, box-shadow .2s ease !important;
}

button:hover, [type=button]:hover, .leaflet-control-button:hover,
.leaflet-control-layers-toggle:hover, .leaflet-bar a:hover, .leaflet-control a:hover,
.menu > input[type=radio] + label:hover {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 6px 16px rgba(113, 113, 122, 0.25);
}

button:active, [type=button]:active {
    transform: translateY(0) scale(0.98);
}

button[aria-expanded=true], [aria-expanded=true][type=button],
button[aria-pressed=true], [aria-pressed=true][type=button],
.menu > input[type=radio]:checked + label {
    background: var(--accent-gradient) !important;
    color: #fff !important;
    box-shadow: 0 4px 18px rgba(113, 113, 122, 0.45) !important;
}

.svg-icon {
    filter: drop-shadow(0 0 3px rgba(161, 161, 170, 0.35));
    transition: filter .2s ease, transform .2s ease;
}

button:hover .svg-icon, [type=button]:hover .svg-icon,
.leaflet-control a:hover .svg-icon, .leaflet-bar a:hover .svg-icon {
    filter: drop-shadow(0 0 6px rgba(161, 161, 170, 0.65));
}

.sidebar__section {
    box-shadow: var(--box-shadow);
}

.sidebar__section .section__heading {
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}

.sidebar__section .section__content {
    border-top: 1px solid rgba(161, 161, 170, 0.08);
    padding-top: .8rem;
    margin-top: .2rem;
}

.sidebar__section .section__search {
    margin-top: .2rem;
}

.menu label span:last-child:not(.player__name) {
    font-size: 1.2rem !important;
    color: var(--text-subtle) !important;
    font-weight: 400 !important;
}

.map {
    border-radius: 0.8rem;
    overflow: hidden;
}

.target__icon {
    border-radius: 20%;
}

.world {
    border-radius: var(--border-radius);
    transition: background-color .2s ease;
}

.world:hover {
    background-color: var(--background-hover);
}

.map .marker.marker--player:before {
    box-shadow: none;
}

.map .marker .marker__label {
    border-radius: 0.6rem !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    padding: .4rem .4rem !important;
    font-size: 1.4rem !important;
}

.leaflet-tooltip {
    border-radius: 0.6rem !important;
    padding: .4rem .4rem !important;
    font-size: 1.4rem !important;
}

.map .marker:hover .marker__label,
.map .marker:focus .marker__label,
.map .marker .marker__label:focus,
.map .marker .marker__label:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.clock .clock__time {
    border-radius: 0.6rem;
    font-family: 'Plus Jakarta Sans', monospace;
    box-shadow: inset 0 0 0 1px rgba(161, 161, 170, 0.15);
}

.chat .chat__form .chat__input {
    background-color: var(--background-light);
    color: var(--text-base);
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.chat .chat__form .chat__send {
    background: var(--accent-gradient) !important;
    color: #fff !important;
}

.vue-notification-group .notification.success {
    background: linear-gradient(135deg, #16a34a, #22c55e) !important;
    border-left: none;
}

.vue-notification-group .notification.warn {
    background: linear-gradient(135deg, #d97706, #f59e0b) !important;
    border-left: none;
}

.vue-notification-group .notification.error {
    background: linear-gradient(135deg, #b91c1c, #ef4444) !important;
    border-left: none;
}

input {
    background-color: var(--background-light) !important;
    transition: box-shadow .2s ease, border-color .2s ease;
}

input:focus {
    border-color: var(--accent-blue-light) !important;
    box-shadow: 0 0 0 3px rgba(161, 161, 170, 0.25) !important;
}

* {
    scrollbar-color: rgba(161, 161, 170, 0.35) transparent !important;
}

*::-webkit-scrollbar-thumb {
    background-color: rgba(161, 161, 170, 0.35) !important;
    border: 2px solid transparent !important;
}

#splash {
    background:
        radial-gradient(ellipse 80% 60% at 15% 0%, rgba(113, 113, 122, 0.18), transparent 60%),
        radial-gradient(ellipse 70% 50% at 100% 100%, rgba(82, 82, 91, 0.16), transparent 60%),
        var(--background-dark) !important;
}

#splash__error-message {
    border: 1px solid rgba(239, 68, 68, 0.4);
}

#map-context-menu ul {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(161, 161, 170, 0.12);
}

.leaflet-container,
.leaflet-container:focus,
.leaflet-container:focus-visible,
.leaflet-container *:focus,
.leaflet-container *:focus-visible,
#app:focus,
#app *:focus,
.map:focus,
.map:focus-visible,
.map .marker:focus,
.map .marker:focus-visible {
    outline: none !important;
}

.leaflet-zoom-anim .leaflet-zoom-animated {
    transition: transform .25s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

.modal.modal--backdrop {
    background-color: rgba(9, 9, 11, 0.75) !important;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.leaflet-container a.leaflet-popup-close-button {
    top: .4rem !important;
    right: .4rem !important;
}

@media (max-width: 480px) {
    :root {
        --border-radius: 1.1rem;
    }
}