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

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #0a1628;
  color: #e2e8f0;
  overflow: hidden;
  height: 100vh;
}

#header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 12px 24px;
  background: linear-gradient(180deg, rgba(10, 22, 40, 0.95) 0%, rgba(10, 22, 40, 0) 100%);
  pointer-events: none;
}

#header h1 {
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.5px;
}

#header p {
  font-size: 0.8rem;
  color: #8899b0;
  margin-top: 2px;
}

#map {
  width: 100%;
  height: 100vh;
}

#legend {
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 1000;
  background: rgba(17, 31, 56, 0.92);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 14px 18px;
  min-width: 160px;
}

#legend h3 {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #8899b0;
  margin-bottom: 10px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: #c8d4e2;
  padding: 3px 0;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ===== Waving Flag Markers ===== */

.flag-marker-wrapper {
  cursor: pointer;
  width: 44px;
  height: 46px;
}

.flag-pole {
  position: relative;
  width: 44px;
  height: 46px;
}

.flag-pole::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(to bottom, #ccc, #888);
  border-radius: 2px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
  z-index: 2;
}

.flag-pole::after {
  content: "";
  position: absolute;
  left: -1px;
  top: -4px;
  width: 5px;
  height: 5px;
  background: #ddd;
  border-radius: 50%;
  z-index: 3;
}

.flag-wave {
  position: absolute;
  left: 3px;
  top: 0;
  width: 36px;
  height: 24px;
  overflow: hidden;
  transform-origin: left center;
  animation: wave 1.8s ease-in-out infinite;
  border-radius: 0 2px 2px 0;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
}

.flag-stripe {
  width: 100%;
  height: 33.33%;
}

.flag-stripe.green {
  background: #00732f;
}

.flag-stripe.white {
  background: #ffffff;
}

.flag-stripe.black {
  background: #000000;
}

.flag-red-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 25%;
  height: 100%;
  background: #ee1c25;
  z-index: 1;
}

@keyframes wave {
  0%   { transform: perspective(200px) rotateY(0deg) skewY(0deg); }
  15%  { transform: perspective(200px) rotateY(5deg) skewY(-2deg); }
  30%  { transform: perspective(200px) rotateY(-3deg) skewY(1.5deg); }
  45%  { transform: perspective(200px) rotateY(4deg) skewY(-1deg); }
  60%  { transform: perspective(200px) rotateY(-2deg) skewY(1deg); }
  75%  { transform: perspective(200px) rotateY(3deg) skewY(-0.5deg); }
  100% { transform: perspective(200px) rotateY(0deg) skewY(0deg); }
}

.flag-marker-wrapper:hover .flag-wave {
  animation-duration: 0.8s;
}

/* ===== MapLibre Popup Styles ===== */

.maplibregl-popup-content {
  background: rgba(17, 31, 56, 0.95) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  color: #e2e8f0 !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
  padding: 14px !important;
}

.maplibregl-popup-tip {
  border-top-color: rgba(17, 31, 56, 0.95) !important;
}

.maplibregl-popup-close-button {
  color: #8899b0 !important;
  font-size: 20px !important;
  padding: 4px 8px !important;
}

.maplibregl-popup-close-button:hover {
  color: #fff !important;
  background: transparent !important;
}

.building-popup {
  min-width: 200px;
}

.building-popup h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}

.building-popup .emirate-tag {
  display: inline-block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 8px;
  font-weight: 600;
}

.building-popup .description {
  font-size: 0.82rem;
  color: #a0b0c4;
  line-height: 1.5;
  margin-bottom: 6px;
}

.building-popup .details {
  font-size: 0.75rem;
  color: #6b7f99;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 6px;
  margin-top: 6px;
}

.building-popup .details span {
  color: #8899b0;
}

/* ===== Mini flags on every OSM building ===== */

.mini-flag-wrapper {
  cursor: pointer;
  width: 18px;
  height: 20px;
}

.mini-flag-wrapper::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(to bottom, #bbb, #666);
  border-radius: 1px;
}

.mini-flag {
  position: absolute;
  left: 2px;
  top: 0;
  width: 14px;
  height: 10px;
  overflow: hidden;
  transform-origin: left center;
  animation: wave 2s ease-in-out infinite;
  border-radius: 0 1px 1px 0;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

.mf-green {
  width: 100%;
  height: 33.33%;
  background: #00732f;
}

.mf-white {
  width: 100%;
  height: 33.33%;
  background: #ffffff;
}

.mf-black {
  width: 100%;
  height: 33.33%;
  background: #000000;
}

.mf-red {
  position: absolute;
  top: 0;
  left: 0;
  width: 25%;
  height: 100%;
  background: #ee1c25;
}

.mini-flag-wrapper:hover .mini-flag {
  animation-duration: 0.6s;
}

/* ===== Building counter ===== */

#building-count-box {
  position: absolute;
  top: 60px;
  right: 16px;
  z-index: 1000;
  background: rgba(17, 31, 56, 0.92);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.78rem;
  color: #8899b0;
  text-align: center;
}

#building-count-box strong {
  display: block;
  font-size: 1.2rem;
  color: #00D4AA;
  font-weight: 700;
}

#zoom-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
  background: rgba(17, 31, 56, 0.85);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 12px 20px;
  font-size: 0.85rem;
  color: #8899b0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}

/* ===== Tour Controls ===== */

#tour-controls {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 12px;
}

#tour-btn {
  background: rgba(17, 31, 56, 0.92);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 8px 16px;
  color: #00D4AA;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 0.3px;
}

#tour-btn:hover,
#music-btn:hover {
  background: rgba(0, 212, 170, 0.15);
  border-color: rgba(0, 212, 170, 0.3);
}

#music-btn {
  background: rgba(17, 31, 56, 0.92);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 8px 12px;
  color: #00D4AA;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s;
}

#music-btn.muted {
  color: #FF4D4D;
  border-color: rgba(255, 77, 77, 0.3);
}

#tour-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  min-width: 140px;
  transition: opacity 0.3s;
}

/* ===== Start Overlay ===== */

#start-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(6, 12, 24, 0.88);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s;
}

.start-content {
  text-align: center;
}

.start-flag {
  position: relative;
  width: 120px;
  height: 80px;
  margin: 0 auto 24px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
  animation: wave 2s ease-in-out infinite;
  transform-origin: left center;
}

.sf-green { width: 100%; height: 33.33%; background: #00732f; }
.sf-white { width: 100%; height: 33.33%; background: #ffffff; }
.sf-black { width: 100%; height: 33.33%; background: #000000; }
.sf-red {
  position: absolute;
  top: 0; left: 0;
  width: 25%; height: 100%;
  background: #ee1c25;
}

.start-content h2 {
  font-size: 1.8rem;
  color: #fff;
  margin-bottom: 8px;
  letter-spacing: 1px;
}

.start-content p {
  font-size: 0.95rem;
  color: #8899b0;
  margin-bottom: 28px;
}

#start-experience {
  background: linear-gradient(135deg, #00D4AA, #00a885);
  border: none;
  border-radius: 10px;
  padding: 14px 36px;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 20px rgba(0, 212, 170, 0.3);
}

#start-experience:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 28px rgba(0, 212, 170, 0.45);
}