/* La So0mbra hunting map - phone first, dark, thumb-reachable. */

:root {
  --bg:      #11150f;
  --panel:   rgba(20, 25, 18, 0.94);
  --line:    rgba(255, 255, 255, 0.10);
  --ink:     #e8f0e2;
  --ink-dim: #97a38d;
  --go:      #4ade80;
  --safe-t:  env(safe-area-inset-top, 0px);
  --safe-b:  env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overscroll-behavior: none;
  overflow: hidden;
}

/* The Maps SDK writes `position: relative; overflow: hidden` onto this
   container as an inline style, which beats anything here and makes `inset: 0`
   do nothing - the div ends up 0px tall and the map never appears. So size it
   explicitly rather than by insets. It is the first element in the body, which
   has no margin, so it lands at the top left regardless of positioning. */
#map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;   /* keeps the map under a phone's collapsing address bar */
}

/* ------------------------------------------------------------- top bar */

#bar {
  position: fixed;
  top: calc(var(--safe-t) + 10px);
  left: 10px;
  right: 10px;
  display: flex;
  gap: 8px;
  align-items: center;
  z-index: 5;
  pointer-events: none;
}

.chip {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
}

.chip:active { transform: scale(0.97); }

.tally { margin-right: auto; cursor: default; }
.tally strong { font-size: 17px; color: var(--go); font-variant-numeric: tabular-nums; }
.tally .lbl { color: var(--ink-dim); font-size: 13px; }

.burger, .burger::before, .burger::after {
  display: block;
  width: 17px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  content: '';
}
.burger { position: relative; }
.burger::before { position: absolute; top: -5px; }
.burger::after  { position: absolute; top: 5px; }

.dot-icon {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid var(--ink-dim);
  position: relative;
}
.dot-icon::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--ink-dim);
}
#locBtn[aria-pressed="true"] .dot-icon { border-color: #38bdf8; }
#locBtn[aria-pressed="true"] .dot-icon::after { background: #38bdf8; }

/* -------------------------------------------------------------- panel */

#panel {
  position: fixed;
  z-index: 6;
  top: calc(var(--safe-t) + 62px);
  left: 10px;
  width: min(340px, calc(100vw - 20px));
  max-height: calc(100vh - var(--safe-t) - var(--safe-b) - 82px);
  overflow-y: auto;
  padding: 6px 14px 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}
#panel[hidden] { display: none; }

.grp { padding: 10px 0; border-bottom: 1px solid var(--line); }
.grp:last-child { border-bottom: 0; }

.grp h2 {
  margin: 0 0 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.sw {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  cursor: pointer;
}
.sw input { width: 19px; height: 19px; accent-color: var(--go); flex: none; }
.sw span { flex: 1; }
.sw small { color: var(--ink-dim); }
.sw em {
  font-style: normal;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}

.radii { display: flex; flex-wrap: wrap; gap: 7px; }

.rad {
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 19px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.rad.is-on { background: rgba(74, 222, 128, 0.18); border-color: rgba(74, 222, 128, 0.5); color: var(--go); }

.types { display: flex; flex-direction: column; gap: 6px; }

.type {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink-dim);
  font: inherit;
  text-align: left;
  cursor: pointer;
  opacity: 0.5;
}
.type.is-on { opacity: 1; color: var(--ink); }
.type i { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.type span { flex: 1; }
.type em { font-style: normal; font-size: 13px; font-variant-numeric: tabular-nums; }

.hint { margin: 9px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-dim); }

/* -------------------------------------------------------------- popup */

.pp { min-width: 252px; font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #16200f; }
.pp-head { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; }

/* The colour comes from --c on .pp-head, which the popup sets per type.
   Declaring --c here as well would shadow that and make every pill green, so
   the fallback goes in the var() call instead. */
.pp-pill {
  padding: 3px 11px;
  border-radius: 11px;
  background: var(--c, #4ade80);
  color: #10140e;
  font-weight: 700;
  font-size: 12.5px;
}
.pp-tag {
  padding: 3px 9px;
  border-radius: 11px;
  background: #e6e9ec;
  color: #5a6472;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pp-tag.gone { background: #fbe0e0; color: #a33; }

.pp-row { display: flex; gap: 10px; align-items: baseline; padding: 2px 0; font-size: 13px; }
.pp-row span { color: #7d8794; min-width: 62px; }
.pp-row code { font-size: 11.5px; word-break: break-all; }

/* Two actions side by side, then Directions on its own row underneath. */
.pp-acts { display: flex; gap: 7px; margin-top: 11px; }

.pp-btn {
  flex: 1;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;   /* "Doesn't exist" must not wrap to two lines */
  cursor: pointer;
}
.pp-btn.go    { background: #16a34a; color: #fff; }
.pp-btn.gone  { background: #dc2626; color: #fff; }
.pp-btn.dirs  { background: #2563eb; color: #fff; margin-top: 7px; width: 100%; }
.pp-btn.ghost { background: #eceff2; color: #384252; }

/* When a sombra is already marked gone there is only one action, so it takes
   the full width rather than sitting in half a row. */
.pp-btn.wide { flex: 1 1 100%; }

.pp-btn:active { filter: brightness(0.92); }

/* -------------------------------------------------------------- toast */

#toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--safe-b) + 22px);
  transform: translate(-50%, 14px);
  z-index: 9;
  max-width: min(420px, calc(100vw - 28px));
  padding: 11px 17px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--panel);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.55);
  font-size: 14px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
#toast.on { opacity: 1; transform: translate(-50%, 0); }

/* --------------------------------------------------------------- misc */

.fatal {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 28px;
  background: var(--bg);
}
.fatal h1 { margin: 0; font-size: 22px; }
.fatal p { margin: 0; max-width: 34em; color: var(--ink-dim); }
.fatal a { color: var(--go); }
.fatal code {
  padding: 1px 6px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 13px;
}
.fatal .small { font-size: 13px; }

/* Google's InfoWindow chrome, toned down to match. */
.gm-style .gm-style-iw-c { padding: 13px !important; border-radius: 14px !important; }
.gm-style .gm-style-iw-d { overflow: hidden !important; }