/* Vyges chip viewer — clean-room styles. Dark theme to sit on the hero gradient. */

html, body { margin: 0; height: 100%; }
body {
  background: #0b1020;
  color: #e5e7eb;
  font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}

#app { position: relative; width: 100%; height: 100%; }

#map {
  width: 100%;
  height: 100%;
  background: #0b1020;   /* matches die-render letterboxing + hero */
  cursor: grab;
}
#map:active { cursor: grabbing; }
.leaflet-container { background: #0b1020; outline: none; }

/* Header (full mode only) */
#chip-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 1000;
  padding: 10px 14px;
  display: flex; align-items: baseline; gap: 10px;
  background: linear-gradient(180deg, rgba(11,16,32,0.85), rgba(11,16,32,0));
  pointer-events: none;
}
#chip-header .title { font-weight: 700; font-size: 15px; color: #fff; }
#chip-header .hint  { font-size: 12px; color: #9ca3af; }

/* Legend (full mode only) */
#legend {
  position: absolute; bottom: 10px; left: 10px; z-index: 1000;
  background: rgba(17,24,39,0.82); border: 1px solid rgba(148,163,184,0.25);
  border-radius: 8px; padding: 8px 10px; font-size: 11px; line-height: 1.6;
  backdrop-filter: blur(2px);
}
#legend .row { display: flex; align-items: center; gap: 6px; }
#legend .sw { width: 11px; height: 11px; border-radius: 2px; display: inline-block; }

/* Macro tooltip */
.chip-tip.leaflet-tooltip {
  background: #111827; color: #e5e7eb;
  border: 1px solid rgba(148,163,184,0.4); border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
  padding: 6px 9px; font-size: 12px; line-height: 1.45;
}
.chip-tip.leaflet-tooltip::before { display: none; }   /* drop the arrow */
.chip-tip b { color: #fff; }
.chip-tip .sub { color: #9ca3af; }
.chip-tip .go  { color: #7cc4ff; }

/* Error / loading banner */
#banner {
  position: absolute; inset: 0; z-index: 1100;
  display: none; align-items: center; justify-content: center;
  text-align: center; padding: 20px; color: #9ca3af; font-size: 13px;
}

/* embed mode strips the chrome */
body.embed #chip-header,
body.embed #legend { display: none; }
body.embed .leaflet-control-zoom { margin: 10px; }
body.embed .leaflet-control-attribution { display: none; }