:root {
  --palette-neutral-300: #dddee1;
  --palette-neutral-400: #b7b9be;
  --palette-neutral-500: #8c8f97;
  --palette-neutral-600: #6b6e76;
  --palette-neutral-900: #1e1f21;
  --palette-bright-blue-300: #78a9ff;
  --palette-bright-blue-400: #4589ff;
  --palette-bright-blue-500: #0f62fe;
  --palette-bright-blue-600: #0043ce;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  color: var(--palette-neutral-900);
  background: #fff;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

.router-page {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 64px 24px 96px;
}

.router-card {
  width: 100%;
  max-width: 880px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
}

.router-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.router-logo img {
  display: block;
  height: 26px;
  width: auto;
}

.router-head {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 560px;
}

.router-head h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.router-head p {
  margin: 0;
  color: var(--palette-neutral-600);
}

.map-tooltip {
  position: fixed;
  z-index: 10;
  background: var(--palette-neutral-900);
  color: #fff;
  padding: 8px 16px;
  border-radius: 12px;
  transform: translate(-50%, -100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: -32px;

  /*lgz starting-style */
  transition: opacity .1s, translate .2s;
  @starting-style {
    opacity: 0;
    translate: 0 -4px;
  }
}

.map-tooltip__top {
  font-size: 14px;
  font-weight: 600;
}

.map-tooltip__bottom {
  font-size: 12px;
  color: var(--palette-neutral-400);
}

.hidden {
  display: none;
}

/* World map */

.world-map {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: all;
}

.world-map svg#world {
  display: block;
  width: min(1004px, 100%);
  height: auto;
}

.region-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.region-list__item {
  padding: 6px 10px;
  border: 1px solid var(--palette-neutral-400);
  border-radius: 999px;
  color: var(--palette-neutral-600);
  font-size: 13px;
}

.region-list__item.interactive {
  cursor: pointer;
}

.region-list__item.region-hover {
  border-color: var(--palette-bright-blue-500);
  color: var(--palette-bright-blue-500);
}

.request-region {
  text-align: center;
  font-size: 12px;
  color: var(--palette-neutral-600);
  a {
    color: var(--palette-neutral-600);
    text-decoration: underline;
  }
  a:hover {
    color: var(--palette-neutral-700);
    text-decoration: underline;
  }
}





svg#world > g {
  pointer-events: bounding-box;
}

svg#world > g.interactive {
  cursor: pointer;
}

svg#world > g[id="other"] {
  cursor: default;
  pointer-events: none;
}

svg#world > g circle {
  transition: fill 0.2s ease, r 0.2s ease;
  fill: var(--palette-neutral-300);
}

svg#world > g.region circle {
  fill: var(--palette-bright-blue-300);
}

svg#world > g.region-hover circle {
  fill: var(--palette-bright-blue-500);
}

svg#world > g.interactive.region-hover circle {
  fill: var(--palette-bright-blue-500);
  cursor: pointer;
}

svg#world:has(> g.region-hover) > g:not(.region-hover) circle {
  fill: var(--palette-neutral-300);
}