/* ==========
   Cozy cocoa theme
   ========== */

:root{
  --bg: #2b1a12;          /* deep cocoa */
  --cocoa: #3a2318;       /* dark chocolate */
  --cocoa-2: #4b2d1f;     /* milk chocolate */
  --cream: #f3e7d3;       /* marshmallow cream */
  --latte: #d7b894;       /* warm latte */
  --ocean: #6b4a35;       /* cocoa seas */
  --ocean-2: #5a3d2b;
  --ink: #1a0f0a;
  --shadow: rgba(0,0,0,0.35);

  --ui-radius: 14px;
  --ui-blur: 10px;
  --ui-border: rgba(255,255,255,0.16);
  --ui-bg: rgba(27,15,10,0.55);
}

*{box-sizing:border-box;}
html,body{height:100%; width:100%; margin:0; padding:0; background:var(--bg); overflow:hidden;}
body{font-family: "Nunito", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color:var(--cream);}

#app{
  position:relative;
  height:100vh;
  width:100vw;
}

/* Top bar */
#topBar{
  position:absolute;
  top:0; left:0; right:0;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  padding:16px 16px 10px 16px;
  gap:12px;
  z-index:50;
  pointer-events:none; /* allow map interaction; we'll re-enable on controls */
}

.titleBlock{
  max-width:min(900px, calc(100vw - 80px));
  pointer-events:none;
}

h1{
  margin:0;
  font-family:"Pacifico", cursive;
  font-weight:400;
  font-size: clamp(18px, 2.4vw, 34px);
  letter-spacing: 0.2px;
  color: var(--cream);
  text-shadow: 0 2px 12px var(--shadow);
}
h2{
  margin:6px 0 0 0;
  font-family:"Fredoka", sans-serif;
  font-weight:400;
  font-size: clamp(12px, 1.3vw, 18px);
  color: rgba(243,231,211,0.92);
  text-shadow: 0 2px 10px var(--shadow);
}

/* Icon button */
.iconBtn{
  pointer-events:auto;
  border:1px solid var(--ui-border);
  background: var(--ui-bg);
  backdrop-filter: blur(var(--ui-blur));
  -webkit-backdrop-filter: blur(var(--ui-blur));
  color: var(--cream);
  border-radius: 12px;
  padding:10px 12px;
  cursor:pointer;
  box-shadow: 0 10px 25px var(--shadow);
  transition: transform .12s ease, background .12s ease;
}
.iconBtn:hover{ transform: translateY(-1px); background: rgba(36,20,14,0.62); }
.iconBtn:active{ transform: translateY(0px); }
.iconBtn.small{ padding:6px 10px; border-radius: 10px; }

#menuBtn{ align-self:flex-start; }

/* Hamburger */
.hamburger{
  display:inline-block;
  width:22px; height:16px;
  position:relative;
}
.hamburger::before,
.hamburger::after,
.hamburger span{
  content:"";
  position:absolute;
  left:0;
  width:100%;
  height:2px;
  background: rgba(243,231,211,0.92);
  border-radius:2px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.25);
}
.hamburger::before{ top:0; }
.hamburger::after{ bottom:0; }
.hamburger span{ top:7px; }

/* Loading */
#loading{
  position:absolute;
  left:50%; top:50%;
  transform: translate(-50%,-50%);
  z-index:40;
  padding:12px 16px;
  border-radius: 999px;
  border:1px solid var(--ui-border);
  background: var(--ui-bg);
  backdrop-filter: blur(var(--ui-blur));
  -webkit-backdrop-filter: blur(var(--ui-blur));
  box-shadow: 0 10px 25px var(--shadow);
  font-family:"Fredoka", sans-serif;
  letter-spacing: .2px;
}

/* SVG map */
#mapSvg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}

/* Popup */
#popup{
  position:absolute;
  z-index:60;
  min-width: 190px;
  max-width: 260px;
  padding:10px 12px;
  border-radius: var(--ui-radius);
  border:1px solid var(--ui-border);
  background: rgba(20,11,8,0.72);
  backdrop-filter: blur(var(--ui-blur));
  -webkit-backdrop-filter: blur(var(--ui-blur));
  box-shadow: 0 14px 30px var(--shadow);
  display:none;
  pointer-events:none;
}
#popup .pTitle{
  font-family:"Fredoka", sans-serif;
  font-weight:600;
  margin:0 0 6px 0;
  color: var(--cream);
}
#popup .pRow{
  margin:0;
  color: rgba(243,231,211,0.92);
  font-size: 14px;
}
#popup .pSmall{
  margin-top:6px;
  font-size: 12px;
  color: rgba(243,231,211,0.72);
}

/* Legend */
#legend{
  position:absolute;
  left:16px;
  bottom:16px;
  z-index:55;
  width: 250px;
  padding:12px 12px 10px 12px;
  border-radius: var(--ui-radius);
  border:1px solid var(--ui-border);
  background: var(--ui-bg);
  backdrop-filter: blur(var(--ui-blur));
  -webkit-backdrop-filter: blur(var(--ui-blur));
  box-shadow: 0 14px 30px var(--shadow);
}
#legend.minimized{
  width:auto;
  padding:8px 10px;
}
#legendToggle{
  position:absolute;
  right:10px; top:8px;
  border:none;
  background: rgba(243,231,211,0.12);
  color: var(--cream);
  border-radius: 10px;
  padding:2px 8px;
  cursor:pointer;
  font-size: 16px;
}
.legendTitle{
  font-family:"Fredoka", sans-serif;
  font-weight:600;
  margin:0 0 10px 0;
}
#legendItems{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.legendItem{
  display:flex;
  align-items:center;
  gap:10px;
  font-size: 13.5px;
  color: rgba(243,231,211,0.92);
}
.swatch{
  width:20px;
  height:14px;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.18);
}
.legendNote{
  margin-top:10px;
  font-size: 12px;
  color: rgba(243,231,211,0.72);
  line-height: 1.25;
}
#legend.minimized .legendTitle,
#legend.minimized #legendItems,
#legend.minimized .legendNote{
  display:none;
}

/* Sources panel + scrim */
#scrim{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.35);
  z-index:70;
  display:none;
}
#sourcesPanel{
  position:absolute;
  right:16px;
  top:64px;
  z-index:80;
  width: min(360px, calc(100vw - 32px));
  border-radius: var(--ui-radius);
  border:1px solid var(--ui-border);
  background: rgba(20,11,8,0.84);
  backdrop-filter: blur(var(--ui-blur));
  -webkit-backdrop-filter: blur(var(--ui-blur));
  box-shadow: 0 18px 40px var(--shadow);
  display:none;
}
.panelHeader{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 12px 8px 12px;
  border-bottom:1px solid rgba(255,255,255,0.10);
}
.panelTitle{
  font-family:"Fredoka", sans-serif;
  font-weight:600;
}
.panelBody{
  padding:10px 14px 14px 14px;
}
.panelBody ul{
  margin:0;
  padding-left: 18px;
  color: rgba(243,231,211,0.92);
}
.panelBody li{ margin: 6px 0; }
.madeWith{
  margin-top:12px;
  font-size: 12px;
  color: rgba(243,231,211,0.72);
}
.madeWith a{ color: var(--latte); text-decoration:none; }
.madeWith a:hover{ text-decoration:underline; }

/* Orientation hint overlay */
#orientationHint{
  position:fixed;
  inset:0;
  display:none;
  z-index:200;
  background: rgba(0,0,0,0.55);
  align-items:center;
  justify-content:center;
  padding:18px;
}
#orientationHint .hintCard{
  width: min(420px, 92vw);
  border-radius: 18px;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(27,15,10,0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 20px 45px rgba(0,0,0,0.5);
  padding: 16px 16px 14px 16px;
}
.hintTitle{
  font-family:"Fredoka", sans-serif;
  font-weight:700;
  font-size: 18px;
}
.hintBody{
  margin-top:10px;
  color: rgba(243,231,211,0.92);
  line-height: 1.25;
}
.hintFoot{
  margin-top:10px;
  font-size: 12px;
  color: rgba(243,231,211,0.72);
}

/* Small screens: keep header compact */
@media (max-width: 520px){
  #topBar{ padding: 12px 12px 8px 12px; }
  #sourcesPanel{ top: 56px; }
  #legend{ left:12px; bottom:12px; width: 232px; }
}

/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; }
}