* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #14121a;
  color: #f1eef7;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  overscroll-behavior: none;
}

body {
  height: 100dvh;
}

/* ---- Onboarding modal ---- */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  background: #14121a;
  padding: 20px;
}

.modal-card {
  width: 100%;
  max-width: 340px;
  text-align: center;
}

.modal-card h1 {
  margin: 0 0 4px;
  font-size: 24px;
}

.modal-card p {
  color: #b9b3c9;
  margin: 0 0 16px;
}

.modal-card input {
  width: 100%;
  padding: 14px;
  border-radius: 10px;
  border: 1px solid #3a3543;
  background: #201d29;
  color: #fff;
  font-size: 16px;
  margin-bottom: 12px;
  text-align: center;
}

.modal-card button {
  width: 100%;
  padding: 14px;
  border-radius: 10px;
  border: none;
  background: #ee3425;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}

/* ---- App shell ---- */
.app {
  display: none;
  flex-direction: column;
  height: 100dvh;
  max-width: 480px;
  margin: 0 auto;
  overflow: hidden;
}

.topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #201d29;
  font-size: 13px;
}

.who-am-i b { color: #ee3425; }

.link-btn {
  background: none;
  border: none;
  color: #9d97ad;
  text-decoration: underline;
  font-size: 12px;
  padding: 4px;
}

/* ---- Map ---- */
.map-container {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: #0a0910;
  touch-action: none;
  cursor: grab;
}

.map-container img {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none; /* dragging is handled on the container */
}

.pins-layer {
  position: absolute;
  inset: 0;
  pointer-events: none; /* re-enabled per-pin below */
}

.placed-pin {
  position: absolute;
  /* Anchor at the BOTTOM center — that's the pointed tip of the pin,
     i.e. the actual location. transition lets opacity fade in smoothly
     as the fade-by-age calculation updates each render. */
  transform: translate(-50%, -100%);
  transform-origin: 50% 100%;
  pointer-events: auto;
  z-index: 10;
  transition: opacity 0.4s ease;
}

.reticle {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  /* Same bottom-anchor as .placed-pin so the tip sits exactly on the
     fixed center point being aimed at. */
  transform: translate(-50%, -100%);
  z-index: 20;
  pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(0,0,0,0.6));
}

/* Map-pin icon: rounded head, pointed tip at the bottom (see pinHTML in
   app.js for the SVG). Sizing lives here so the same markup can be reused
   at different sizes (on the map, in the people list, in the reticle). */
.pin {
  display: block;
  width: 30px;
  height: 40px;
}

.pin svg {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.45));
}

.placed-pin .pin.self svg {
  filter: drop-shadow(0 0 4px #fff) drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

.reticle .pin {
  width: 34px;
  height: 45px;
}

/* Brief pop when jumping to someone's pin from the people list */
@keyframes pinJumpPop {
  0%   { transform: translate(-50%, -100%) scale(1); }
  35%  { transform: translate(-50%, -100%) scale(1.4); }
  65%  { transform: translate(-50%, -100%) scale(0.92); }
  100% { transform: translate(-50%, -100%) scale(1); }
}

.placed-pin.jump-highlight {
  animation: pinJumpPop 0.7s ease;
}

.pin-label {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: rgba(20, 18, 26, 0.95);
  color: #fff;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
}

.placed-pin.show-label .pin-label {
  display: block;
}

.zoom-controls {
  position: absolute;
  right: 10px;
  bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 30;
}

.zoom-btn {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: none;
  background: rgba(20, 18, 26, 0.85);
  color: #fff;
  font-size: 20px;
  line-height: 1;
}

/* ---- Action row ---- */
.action-row {
  flex: 0 0 auto;
  padding: 10px 14px;
  background: #201d29;
}

.primary-btn {
  width: 100%;
  padding: 15px;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 12px;
  background: #ee3425;
  color: #fff;
}

.primary-btn:disabled {
  opacity: 0.6;
}

.aim-buttons {
  display: none;
  gap: 8px;
}

.aim-buttons .primary-btn {
  flex: 2;
}

.cancel-btn {
  flex: 1;
  padding: 15px;
  border-radius: 12px;
  border: 1px solid #3a3543;
  background: transparent;
  color: #f1eef7;
  font-size: 15px;
}

.status {
  min-height: 16px;
  font-size: 12px;
  text-align: center;
  color: #b9b3c9;
  margin: 8px 0 0;
}

/* ---- People bar ---- */
.people-bar {
  flex: 0 0 auto;
  background: #201d29;
  border-top: 1px solid #2c2836;
}

.people-toggle {
  width: 100%;
  padding: 10px 14px;
  background: none;
  border: none;
  color: #f1eef7;
  font-size: 13px;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 4px;
}

.chev { transition: transform 0.15s ease; }

.people-bar.expanded .chev {
  transform: rotate(180deg);
}

.people-list {
  max-height: 0;
  overflow-y: auto;
  transition: max-height 0.2s ease;
  padding: 0 14px;
}

.people-bar.expanded .people-list {
  max-height: 30vh;
  padding-bottom: 10px;
}

.person-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 4px;
  margin: 0 -4px;
  border-top: 1px solid #2c2836;
  font-size: 13px;
  border-radius: 8px;
}

.person-row.clickable {
  cursor: pointer;
}

.person-row.clickable:hover,
.person-row.clickable:active {
  background: rgba(255,255,255,0.06);
}

.person-row .who {
  display: flex;
  align-items: center;
  gap: 8px;
}

.person-row .pin {
  width: 18px;
  height: 24px;
}

.person-row .ago {
  font-size: 11px;
  color: #9d97ad;
}

.empty {
  color: #9d97ad;
  font-size: 13px;
  padding: 10px 0;
  margin: 0;
}