@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;800&family=Nunito:wght@400;600;800&display=swap");

:root {
  color-scheme: dark;
  font-family: "Nunito", sans-serif;
  background: #10091d;
  color: #fff8db;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    linear-gradient(#10091dcc, #10091df2),
    repeating-linear-gradient(45deg, transparent 0 18px, #b577ff0a 19px 20px),
    radial-gradient(circle at 15% 10%, #713ab0 0, transparent 35%),
    #10091d;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background-image: radial-gradient(#ffe5a0 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(to bottom, #000, transparent 75%);
}

.magic-orb {
  position: fixed;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: #b765ff;
  filter: blur(110px);
  opacity: .18;
  pointer-events: none;
}
.orb-one { top: -90px; right: -70px; }
.orb-two { bottom: -110px; left: -60px; background: #ffbd59; }

main {
  position: relative;
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding: 44px 0;
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  gap: 22px;
}

.card {
  position: relative;
  border: 1px solid #d5a9ff66;
  border-radius: 8px 28px 8px 28px;
  background: linear-gradient(145deg, #23143aee, #130c24f5);
  overflow: hidden;
  box-shadow: 0 24px 70px #0009, inset 0 0 30px #b769ff0b;
}
.card::before {
  content: "✦";
  position: absolute;
  z-index: 600;
  top: 8px;
  left: 12px;
  color: #f6cb73;
  text-shadow: 0 0 12px #f6cb73;
}

.intro { padding: 44px; display: flex; flex-direction: column; justify-content: center; }
.quest-badge {
  align-self: flex-start;
  margin-bottom: 22px;
  padding: 7px 14px;
  border: 1px solid #f6cb7388;
  border-radius: 999px;
  background: #f6cb7315;
  color: #f6cb73;
  font: 700 .68rem "Cinzel", serif;
  letter-spacing: .18em;
}
.eyebrow { color: #caa1f4; font: 700 .68rem "Cinzel", serif; letter-spacing: .17em; line-height: 1.5; }
h1 { margin: 16px 0 12px; font: 800 clamp(2.45rem, 5vw, 4.8rem)/.98 "Cinzel", serif; letter-spacing: -.05em; text-shadow: 0 5px 25px #000; }
h1 em { color: #f5cc77; font-style: normal; text-shadow: 0 0 28px #db8b36aa; }
.divider { display: flex; align-items: center; gap: 12px; color: #b777f0; }
.divider::before, .divider::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, #b777f0); }
.divider::after { transform: rotate(180deg); }
p { color: #c9bdd7; line-height: 1.65; }

button, a {
  border: 1px solid #ffe3a0;
  border-radius: 6px 18px 6px 18px;
  padding: 15px 22px;
  background: linear-gradient(135deg, #f7d47f, #cf8e37);
  color: #291126;
  font: 800 .85rem "Cinzel", serif;
  letter-spacing: .06em;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  box-shadow: 0 8px 28px #d58c3850, inset 0 1px #fff9;
  transition: transform .2s, filter .2s;
}
button { margin-top: 18px; }
button span { margin-right: 7px; }
button:hover, a:hover { transform: translateY(-2px); filter: brightness(1.13); }

.map-card { position: relative; min-height: 510px; }
#map { height: 100%; min-height: 510px; background: #1b1127; filter: saturate(.8) sepia(.15) hue-rotate(225deg); }
.result { grid-column: 1 / -1; padding: 24px 28px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.section-label { display: block; color: #c8a4ed; font: 700 .75rem "Cinzel", serif; letter-spacing: .16em; text-transform: uppercase; }
.result.unlocked { border-color: #f6cb73; box-shadow: 0 0 50px #d3954f35; }
.leaflet-control-attribution { font-size: 9px; }

@media (max-width: 760px) {
  main { grid-template-columns: 1fr; padding: 18px 0 28px; }
  .intro { padding: 36px 28px; }
  .map-card, #map { min-height: 440px; }
  .result { grid-column: auto; flex-direction: column; align-items: stretch; }
}