:root {
  color-scheme: dark;
  --background-base: #1e1034f2;
  --background-dark: #10091d;
  --background-light: #342049;
  --background-error: #66263d;
  --background-marker: #1a102beb;
  --background-disabled: #332940;
  --background-hover: #573078;
  --background-active: #71439c;
  --background-selected: #a05de0;
  --outline-focus: #d4b1ff;
  --border-radius: 1.6rem;
  --border-color: #b98ae340;
  --border-error: #ed789b;
  --box-shadow: 0 12px 36px #08041159, inset 0 1px #ffffff0d;
  --text-base: #e2d5ef;
  --text-emphasis: #faf5ff;
  --text-subtle: #b9a4cb;
  --text-disabled: #9988ac;
  --text-marker: #f3e9ff;
  --text-hover: #fff;
  --text-active: #fff;
  --text-selected: #fff;
  --text-shadow: none;
  --text-night: #d7c6ff;
  --text-day: #f6dfa2;
  --ui-button-size: 4.8rem;
  --ui-element-spacing: 1.2rem;
}
html { font-size: 62.5%; }
html, body { margin: 0; width: 100%; height: 100%; background: var(--background-dark); overscroll-behavior: none; }
body, input, button { font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; }
body { color: var(--text-base); font-size: 1.5rem; }
* { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: #73508f transparent; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--outline-focus); outline-offset: 3px; }
input { border-radius: 1.2rem; border: 1px solid var(--border-color); background: #10091d94; min-height: 4.4rem; }
input::placeholder { color: var(--text-subtle); }
input:focus { border-color: #c48bf0; box-shadow: 0 0 0 3px #b977ff18; }
.sidebar { padding: 1.6rem; }
.sidebar .sidebar__content { width: 31rem; padding: 0 .5rem .5rem; gap: 1.2rem; }
.sidebar__section { border: 1px solid var(--border-color); border-radius: 1.8rem; background: linear-gradient(145deg, #2d1845f0, #170d28f2); overflow: hidden; box-shadow: var(--box-shadow); }
.sidebar__section .section__heading { font-weight: 650; letter-spacing: .01em; background: #ffffff04; }
.sidebar__section .section__heading button { min-height: 4.8rem; }
.sidebar__section .section__content { padding-top: .6rem; }
.sidebar__section .section__search { margin: 1rem; width: calc(100% - 2rem); }
.sidebar__section .section__skeleton { color: var(--text-subtle); padding: 1.4rem; line-height: 1.5; }
.sidebar .sidebar__buttons button, .leaflet-control { border: 1px solid var(--border-color); box-shadow: var(--box-shadow); }
.sidebar .sidebar__buttons button, .leaflet-control-button, .leaflet-control-layers-toggle, .leaflet-bar a { border-radius: 1.4rem; }
.player, .world__name { border-radius: 1rem; }
.player { min-height: 4.8rem; margin: .3rem .6rem; padding: .7rem 1rem; }
.player .player__icon img { border-radius: .7rem; image-rendering: pixelated; }
.player:hover, .world__name:hover { background: #a35de02b; }
.leaflet-control { background: #201131ed; border-radius: 1.4rem; }
.leaflet-control a, .leaflet-control button { transition: background-color 140ms ease, color 140ms ease; }
.leaflet-control-coordinates { padding: 1.2rem 1.6rem; font-variant-numeric: tabular-nums; }
.leaflet-control-zoom { overflow: hidden; }
.leaflet-control-zoom a { border-radius: 0; }
.leaflet-control-zoom a + a { border-top: 1px solid var(--border-color); }
.leaflet-control-layers .leaflet-control-layers-list { border-radius: 1.4rem; padding: 1.2rem; }
.leaflet-control-logo { max-width: 18rem; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: #201131f5; color: var(--text-base); }
.leaflet-popup-content-wrapper { border: 1px solid var(--border-color); border-radius: 1.6rem; }
.map .marker.marker--player .marker__label { border: 1px solid #bb87e94d; border-radius: 1rem; box-shadow: 0 4px 16px #0004; }
#map-context-menu { border: 1px solid var(--border-color); border-radius: 1.6rem; overflow: hidden; background: #201131f5; }
.modal.modal--backdrop { background: #080411b8; }
.modal .modal__header, .modal .modal__content { background: #211332fa; border: 1px solid var(--border-color); }
.modal .modal__header { border-bottom: 0; border-radius: 2rem 2rem 0 0; }
.modal .modal__content { border-top: 0; border-radius: 0 0 2rem 2rem; }
.modal .modal__close { border-radius: 1.2rem; top: 1rem; right: 1rem; }
.chat { background: #201131f2; border: 1px solid var(--border-color); border-radius: 1.6rem; }
#splash { position: fixed; inset: 0; z-index: 1000; display: grid; place-content: center; justify-items: center; gap: 2rem; background: radial-gradient(ellipse at 50% 40%, #3b195c, #10091d 70%); transition: opacity 180ms ease; }
#splash[hidden] { opacity: 0; pointer-events: none; }
.wolp-splash-mark { width: 8rem; height: 8rem; display: grid; place-items: center; border-radius: 2.5rem; background: linear-gradient(140deg, #ecd6ff, #a362e9); color: #29113d; font-weight: 800; font-size: 4rem; box-shadow: 0 0 65px #ae5bff33; }
.wolp-splash-title { margin: 0; font-size: 2.8rem; font-weight: 750; color: var(--text-emphasis); }
#splash__spinner { width: 2.4rem; height: 2.4rem; border: 2px solid #b98ae32b; border-top-color: #c69af4; border-radius: 50%; animation: wolp-spin 1s linear infinite; }
#splash__error[aria-hidden='true'] { display: none; }
#splash__error { max-width: 40rem; padding: 2rem; margin: 0 2rem; text-align: center; line-height: 1.6; }
#splash__error a { color: #dfb7ff; }
@keyframes wolp-spin { to { transform: rotate(360deg); } }
@supports (backdrop-filter: blur(1px)) {
  .sidebar__section, .leaflet-control, .chat { backdrop-filter: blur(16px) saturate(125%); -webkit-backdrop-filter: blur(16px) saturate(125%); }
}
@media (max-width: 600px) {
  :root { --ui-button-size: 4.6rem; --ui-element-spacing: .9rem; }
  .sidebar { padding: 1rem 6.6rem 1rem .8rem; padding-top: max(1rem, env(safe-area-inset-top)); }
  .sidebar .sidebar__content { width: min(29rem, calc(100vw - 8rem)); }
  .sidebar .sidebar__buttons { right: 1rem; }
  .sidebar__section { border-radius: 1.5rem; }
  .sidebar__section .section__heading { font-size: 1.5rem; }
  .leaflet-control-coordinates { padding: .9rem; font-size: 1.2rem; }
  .modal { padding: 5dvh 1.2rem; }
  .modal .modal__header, .modal .modal__content { padding: 2rem; }
  .leaflet-bottom { bottom: env(safe-area-inset-bottom); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

#splash[hidden] { display: none; }
#app { height: 100%; width: 100%; }
.wolp-map-brand { position: fixed; top: max(1.4rem, env(safe-area-inset-top)); left: 7.8rem; z-index: 105; border: 1px solid var(--border-color); border-radius: 1.8rem; background: linear-gradient(135deg, #2d1845ed, #170d28ed); box-shadow: var(--box-shadow); }
.wolp-map-brand a { display: flex; gap: 1.2rem; align-items: center; padding: 1rem 1.4rem 1rem 1rem; color: var(--text-base); text-decoration: none; border-radius: inherit; }
.wolp-brand-mark { display: grid; place-items: center; width: 3.8rem; height: 3.8rem; border-radius: 1.2rem; background: linear-gradient(140deg, #ecd6ff, #a362e9); color: #29113d; font-size: 2.2rem; font-weight: 800; }
.wolp-map-brand strong { display: block; color: #faf5ff; font-size: 2rem; font-weight: 750; line-height: 1.15; }
.wolp-map-brand small { display: block; color: #c7b5d8; font-size: 1.1rem; margin-top: .3rem; }
.wolp-brand-back { color: #c99af4; margin-left: 1rem; }
@supports (backdrop-filter: blur(1px)) { .wolp-map-brand { backdrop-filter: blur(16px) saturate(125%); -webkit-backdrop-filter: blur(16px) saturate(125%); } }
@media (max-width: 600px) {
  .wolp-map-brand { left: 7rem; max-width: calc(100vw - 14rem); border-radius: 1.4rem; }
  .wolp-map-brand a { gap: .8rem; padding: .8rem; }
  .wolp-brand-mark { width: 3rem; height: 3rem; font-size: 1.8rem; border-radius: .9rem; flex-shrink: 0; }
  .wolp-map-brand strong { font-size: 1.7rem; }
  .wolp-map-brand small { font-size: 1rem; white-space: nowrap; }
  .wolp-brand-back { display: none; }
}
@media (max-width: 600px) {
  .sidebar .sidebar__buttons { position: absolute; top: max(1rem, env(safe-area-inset-top)); right: 1rem; display: flex; flex-direction: column; align-items: flex-end; margin: 0; }
  .sidebar .sidebar__buttons button + button { margin-left: 0; margin-top: var(--ui-element-spacing); }
  .sidebar .sidebar__content { margin-top: 6.4rem; max-height: calc(100dvh - 8.4rem); }
}