@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600;700&family=Geist:wght@400;500;600&display=swap');

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: #000;
  --surface: #0a0a0a;
  --surface2: #111;
  --surface3: #1a1a1a;
  --border: #222;
  --border-mid: #333;
  --border-bright: #444;
  --text: #fff;
  --text-dim: #aaa;
  --text-muted: #666;
  --map-opacity: 0.75;
}

html, body {
  width: 100%; height: 100%;
  background: var(--bg); color: var(--text);
  font-family: 'Geist', 'Inter', system-ui, sans-serif;
  overflow: hidden; touch-action: none; -webkit-user-select: none; user-select: none;
}

/* Loading Screen Animation */
.loader {
  width: 112px;
  height: 112px;
}

.box1,
.box2,
.box3 {
  border: 16px solid #f5f5f5;
  box-sizing: border-box;
  position: absolute;
  display: block;
}

.box1 {
  width: 112px;
  height: 48px;
  margin-top: 64px;
  margin-left: 0px;
  animation: abox1 4s forwards ease-in-out infinite;
}

.box2 {
  width: 48px;
  height: 48px;
  margin-top: 0px;
  margin-left: 0px;
  animation: abox2 4s forwards ease-in-out infinite;
}

.box3 {
  width: 48px;
  height: 48px;
  margin-top: 0px;
  margin-left: 64px;
  animation: abox3 4s forwards ease-in-out infinite;
}

@keyframes abox1 {
  0% { width: 112px; height: 48px; margin-top: 64px; margin-left: 0px; }
  12.5% { width: 48px; height: 48px; margin-top: 64px; margin-left: 0px; }
  25% { width: 48px; height: 48px; margin-top: 64px; margin-left: 0px; }
  37.5% { width: 48px; height: 48px; margin-top: 64px; margin-left: 0px; }
  50% { width: 48px; height: 48px; margin-top: 64px; margin-left: 0px; }
  62.5% { width: 48px; height: 48px; margin-top: 64px; margin-left: 0px; }
  75% { width: 48px; height: 112px; margin-top: 0px; margin-left: 0px; }
  87.5% { width: 48px; height: 48px; margin-top: 0px; margin-left: 0px; }
  100% { width: 48px; height: 48px; margin-top: 0px; margin-left: 0px; }
}

@keyframes abox2 {
  0% { width: 48px; height: 48px; margin-top: 0px; margin-left: 0px; }
  12.5% { width: 48px; height: 48px; margin-top: 0px; margin-left: 0px; }
  25% { width: 48px; height: 48px; margin-top: 0px; margin-left: 0px; }
  37.5% { width: 48px; height: 48px; margin-top: 0px; margin-left: 0px; }
  50% { width: 112px; height: 48px; margin-top: 0px; margin-left: 0px; }
  62.5% { width: 48px; height: 48px; margin-top: 0px; margin-left: 64px; }
  75% { width: 48px; height: 48px; margin-top: 0px; margin-left: 64px; }
  87.5% { width: 48px; height: 48px; margin-top: 0px; margin-left: 64px; }
  100% { width: 48px; height: 48px; margin-top: 0px; margin-left: 64px; }
}

@keyframes abox3 {
  0% { width: 48px; height: 48px; margin-top: 0px; margin-left: 64px; }
  12.5% { width: 48px; height: 48px; margin-top: 0px; margin-left: 64px; }
  25% { width: 48px; height: 112px; margin-top: 0px; margin-left: 64px; }
  37.5% { width: 48px; height: 48px; margin-top: 64px; margin-left: 64px; }
  50% { width: 48px; height: 48px; margin-top: 64px; margin-left: 64px; }
  62.5% { width: 48px; height: 48px; margin-top: 64px; margin-left: 64px; }
  75% { width: 48px; height: 48px; margin-top: 64px; margin-left: 64px; }
  87.5% { width: 48px; height: 48px; margin-top: 64px; margin-left: 64px; }
  100% { width: 112px; height: 48px; margin-top: 64px; margin-left: 0px; }
}