@import url("./styles-2d-starry-showcase.css");

/* Fusion preview: constellation map with hand-drawn edges and softer dreamy UI. */
:root {
  --ink: #fff9f2;
  --muted: #d8cde4;
  --panel: rgba(21, 18, 50, 0.72);
  --line: rgba(255, 218, 158, 0.30);
  --accent: #ffb4d0;
  --accent-strong: #ffe7b4;
  --shadow: 7px 8px 0 rgba(7, 6, 18, 0.20), 0 26px 90px rgba(0, 0, 0, 0.48);
}

body {
  background:
    radial-gradient(circle at 11% 16%, rgba(255, 213, 141, 0.92) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 18%, rgba(158, 239, 255, 0.84) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 76%, rgba(255, 180, 208, 0.70) 0 1px, transparent 2px),
    radial-gradient(circle at 42% 48%, rgba(55, 108, 255, 0.30), transparent 46%),
    linear-gradient(135deg, #0b0922 0%, #112551 52%, #16091f 100%);
  background-size: 124px 124px, 186px 186px, 152px 152px, auto, auto;
}

.sidebar,
.map-stage {
  border-width: 2px;
  border-radius: 14px;
  border-color: rgba(255, 218, 158, 0.38);
  background:
    linear-gradient(180deg, rgba(47, 42, 93, 0.72), rgba(8, 16, 35, 0.76)),
    rgba(21, 18, 50, 0.72);
  box-shadow: var(--shadow);
}

.brand-block,
.panel,
.topbar {
  border-color: rgba(255, 218, 158, 0.22);
}

.brand-block,
.panel {
  border-style: dashed;
}

h1,
#campusTitle {
  color: #fff0cb;
  text-shadow:
    2px 2px 0 rgba(61, 37, 80, 0.88),
    0 0 24px rgba(255, 213, 141, 0.28);
}

.campus-button,
.place-button,
.result-button,
.layer-toggle,
.address-card,
.memory-drawer,
.map-badge span {
  border-width: 2px;
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255, 180, 208, 0.08), rgba(88, 230, 255, 0.08)),
    rgba(7, 14, 32, 0.58);
}

.section-head span,
.search-box button,
.download-link,
.memory-row button {
  border: 2px solid rgba(40, 25, 60, 0.72);
  color: #21152f;
  background: linear-gradient(135deg, #ffe9b8, #ffb4d0 48%, #9eefff);
  box-shadow: 4px 5px 0 rgba(18, 11, 36, 0.22), 0 0 20px rgba(255, 180, 208, 0.18);
}

.leaflet-map,
.leaflet-container {
  background:
    radial-gradient(circle at 44% 44%, rgba(255, 180, 208, 0.10), transparent 10%),
    radial-gradient(circle at 67% 38%, rgba(158, 239, 255, 0.13), transparent 16%),
    radial-gradient(circle at 20% 62%, rgba(255, 213, 141, 0.10), transparent 12%),
    linear-gradient(rgba(255, 244, 221, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 244, 221, 0.035) 1px, transparent 1px),
    #080a1f;
  background-size: auto, auto, auto, 42px 42px, 42px 42px, auto;
}

.feature-label,
.road-label,
.area-label,
.campus-address-label {
  border-width: 2px;
  border-radius: 10px;
  box-shadow:
    3px 4px 0 rgba(7, 6, 18, 0.16),
    0 0 18px rgba(88, 230, 255, 0.16);
}

.feature-label.major,
.landmark-marker strong {
  color: #21152f;
  background: linear-gradient(135deg, #ffe9b8, #ffb4d0 46%, #9eefff);
}

.landmark-marker img {
  border-width: 2px;
  border-color: rgba(255, 232, 184, 0.90);
  box-shadow:
    5px 6px 0 rgba(17, 12, 31, 0.22),
    0 0 36px rgba(255, 180, 208, 0.30),
    0 0 46px rgba(88, 230, 255, 0.22);
}