/* ============================================================
   Demo-page chrome only. The MAP styling lives in
   dist/krackedmaps.css (scoped under .mmap). Restyle the map by
   editing the CSS variables there, or via the playground.
   ============================================================ */
:root {
  --sea:        #0a1e3f;   /* match the blueprint map sea so the letterbox blends */
  --accent:     #5fd0ff;   /* bright cyan — reads on the dark map */
  --label:      #cfe6ff;
  --label-dim:  rgba(207, 230, 255, 0.6);
  --panel-bg:   #0c2748;
  --panel-edge: #1d3c6b;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--sea);
  font-family: var(--font);
  color: var(--label);
}

/* full-screen stage; the .mmap widget (#map) fills it and paints sea + grid */
#stage { position: fixed; inset: 0; }
#map { width: 100%; height: 100%; }

/* ---- title + hud ---- */
#hud {
  position: fixed; z-index: 15; left: 22px; top: 18px;
  pointer-events: none;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);  /* legible on any map colour */
}
#hud h1 {
  margin: 0; font-size: 15px; font-weight: 700; letter-spacing: 3px;
  text-transform: uppercase; color: var(--accent);
}
#hud p { margin: 4px 0 0; font-size: 12px; color: var(--label-dim); }
#hud .hud-link {
  display: inline-block; margin-top: 12px; font-size: 12px; font-weight: 600;
  color: var(--accent); text-decoration: none; pointer-events: auto;
  border-bottom: 1px solid transparent;
}
#hud .hud-link:hover { border-bottom-color: var(--accent); }

/* ---- controls ---- */
#controls {
  position: fixed; z-index: 15; left: 22px; bottom: 20px;
  display: flex; gap: 8px;
}
#controls button {
  font-family: var(--font); font-size: 12px; font-weight: 600;
  color: #eeeeee; background: var(--panel-bg);
  border: 1px solid var(--panel-edge); border-radius: 8px;
  padding: 8px 12px; cursor: pointer;
  transition: color .2s, border-color .2s;
}
#controls button:hover { color: #fff; border-color: var(--accent); }