/* styles.css
   ---------------------------------------------------------------------------
   Visual design: the world is dark and grey. Participating houses blaze
   against it with bright white cards and glowing green checkmarks.

   Stacking order (back → front):
     #camera (video)  <  #world-veil (extra darkening)  <  #overlay (AR markers)
     <  #radar (map fallback)  <  UI chrome (#topbar, #controls)
   --------------------------------------------------------------------------- */

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: #0a0a0a;
  color: #fff;
}

/* ============================================================
   DARK WORLD EFFECT
   The camera feed is desaturated and dimmed so participating
   houses blaze against a grey, subdued backdrop.
   ============================================================ */

/* Ambient boot-screen night sky (drawn by src/bootsky.js). Same z as the
   camera but earlier in the DOM, so the live video paints over it; the map
   and radar (z 3) cover it too. Solid fallback color in case the first
   canvas frame hasn't painted yet. */
#boot-sky {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  background: #0a0512;
}

/* Normal camera image without darkening or desaturation. */
#camera {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Translucent layer on top of camera (transparent now for normal view).
   pointer-events: none so taps pass through to controls. */
#world-veil {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: transparent;
  pointer-events: none;
}

/* ============================================================
   AR OVERLAY LAYER
   Markers are absolutely positioned inside this transparent div.
   ============================================================ */
#overlay {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  /* Markers are no longer visibility-culled by field of view — they get a
     continuous X position and this clip makes them SLIDE off the screen edge
     instead of popping in/out (the old display:none flapping = flicker). */
  overflow: hidden;
}

/* --- Base marker container --------------------------------- */
.ar-marker {
  position: absolute;
  top: 0; left: 0;
  display: none;
  text-align: center;
  /* NO transition here. Position updates come every animation frame from
     ar.js's own exponential smoother; a CSS transition on top of that gets
     retargeted 60×/s and produces rubbery stutter (the flicker bug). */
  will-change: transform;
}

/* --- The floating badge card ------------------------------ */
.ar-card {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  border-radius: 18px;
  padding: 10px 18px 8px;
  min-width: 90px;
}

/* Large checkmark symbol (✓ / ! / ✕) */
.ar-checkmark {
  font-size: 52px;
  line-height: 1;
  font-weight: 900;
  font-family: system-ui, -apple-system, sans-serif;
}

/* Address hint inside the card */
.ar-hint {
  font-size: 11px;
  font-weight: 600;
  margin-top: 3px;
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Host notes inside the card (e.g. "Available 6-10pm"). Colored per status
   below: the 'on' card is WHITE, so it needs a DARK amber — bright yellow
   (#ffcc00) was unreadable on white. */
.ar-notes {
  font-size: 0.82em;
  font-style: italic;
  font-weight: 500;
  margin-top: 3px;
  max-width: 150px;
}

/* Distance + status label below the card */
.ar-label {
  margin-top: 5px;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 10px;
  background: rgba(0,0,0,0.55);
  white-space: nowrap;
}

/* ============================================================
   STATUS VARIANTS
   ============================================================ */

/* --- PARTICIPATING (status: on) ---------------------------
   Bright white card + green checkmark. The neon GLOW lives on the
   `.near` variant ONLY (ar.js adds it within ~60 m, with hysteresis):
   a house one street over must read small / dim / grey — no glow.
   ar.js also applies a continuous inline grayscale+brightness filter
   and opacity by distance; these rules are just the base look.      */
.ar-marker.on .ar-card {
  background: rgba(255, 255, 255, 0.96);
  border: 3px solid #00e84a;
  /* Plain drop shadow for legibility — NOT a glow. */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
.ar-marker.on.near .ar-card {
  /* Layered glow: tight green ring + wide green bloom — near houses only. */
  box-shadow:
    0 0  8px  3px rgba(0, 232, 74, 0.9),
    0 0 28px 10px rgba(0, 232, 74, 0.55),
    0 0 60px 20px rgba(0, 232, 74, 0.25);
}
.ar-marker.on .ar-checkmark {
  color: #00c93e;
}
.ar-marker.on.near .ar-checkmark {
  /* Text glow to make the ✓ itself luminous — near houses only. */
  text-shadow:
    0 0  6px rgba(0, 220, 60, 1),
    0 0 18px rgba(0, 220, 60, 0.8),
    0 0 36px rgba(0, 220, 60, 0.5);
}
.ar-marker.on .ar-hint  { color: #1a4a1a; }
.ar-marker.on .ar-notes { color: #7a5a00; }   /* dark amber — readable on the white card */
.ar-marker.on .ar-label { color: #00e84a; background: rgba(0,0,0,0.6); }

/* --- OUT OF CANDY (status: out_of_candy) ------------------
   Muted amber — still visible but clearly not a candy stop.
   Same rule: glow only when near.                              */
.ar-marker.out .ar-card {
  background: rgba(40, 30, 0, 0.80);
  border: 2px solid #c87a00;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
.ar-marker.out.near .ar-card {
  box-shadow: 0 0 12px 4px rgba(200, 122, 0, 0.4);
}
.ar-marker.out .ar-checkmark { color: #ffa726; font-size: 38px; }
.ar-marker.out .ar-hint      { color: #c8a060; }
.ar-marker.out .ar-notes     { color: #ffcc00; }  /* bright yellow works on the DARK card */
.ar-marker.out .ar-label     { color: #ffa726; }

/* --- NOT PARTICIPATING (status: off) ----------------------
   Barely visible ghost — these houses blend into the dark world. */
.ar-marker.off {
  opacity: 0.22;
}
.ar-marker.off .ar-card {
  background: rgba(80, 80, 80, 0.35);
  border: 1px solid rgba(180, 180, 180, 0.3);
}
.ar-marker.off .ar-checkmark { color: #888; font-size: 28px; }
.ar-marker.off .ar-hint      { color: #777; }
.ar-marker.off .ar-label     { color: #777; background: rgba(0,0,0,0.3); }

/* ============================================================
   REAL STREET MAP (Leaflet)
   Full-screen, above the AR layer, below the UI chrome.
   ============================================================ */
#map {
  position: fixed;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  background: #0b0b0b;
  /* No padding: Leaflet needs a full-size container or tiles mis-position.
     The top bar and controls float OVER the map (higher z-index) instead. */
}
/* [hidden] must win over the display:block Leaflet may imply. */
#map[hidden], #radar[hidden] { display: none !important; }

/* House pins on the map (Leaflet divIcon content). */
.house-pin {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 18px;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.house-pin.on {
  background: #00e84a; color: #06210d; border-color: #eafff0;
  box-shadow: 0 0 0 3px rgba(0,232,74,0.35), 0 0 16px 4px rgba(0,232,74,0.7);
}
.house-pin.out { background: #ff9800; color: #2a1a00; }
.house-pin.off { background: #555; color: #ddd; opacity: 0.75; }

/* "You are here" marker. */
.user-pin {
  width: 18px; height: 18px; border-radius: 50%;
  background: #3b82f6; border: 3px solid #fff;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.4);
}

/* ============================================================
   RADAR FALLBACK (canvas — used only if Leaflet can't load)
   ============================================================ */
#radar {
  position: fixed;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, #110a0a 0%, #060606 100%);
}

/* ============================================================
   UI CHROME
   ============================================================ */
#topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 4;
  padding: max(12px, env(safe-area-inset-top)) 14px 12px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.7), transparent);
}
#topbar h1 { font-size: 18px; }
#status { margin-top: 4px; font-size: 13px; opacity: 0.85; }
#compass { margin-top: 3px; font-size: 12px; color: #ffd27f; }

/* Keep Leaflet's own controls/attribution clear of our top bar. */
.leaflet-top { margin-top: 64px; }
.leaflet-control-attribution { font-size: 10px; }

#controls {
  position: fixed;
  left: 0; right: 0;
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 4;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0 14px;
}

button {
  font-size: 15px;
  font-weight: 700;
  padding: 12px 20px;
  border: none;
  border-radius: 24px;
  color: #0a1a0a;
  background: #00e84a;
  box-shadow: 0 4px 16px rgba(0, 232, 74, 0.45);
}
button:disabled { opacity: 0.45; }

#hint {
  position: fixed;
  left: 0; right: 0;
  bottom: 76px;
  z-index: 4;
  text-align: center;
  font-size: 12px;
  opacity: 0.75;
  padding: 0 20px;
}

/* ============================================================
   REGISTRATION MODAL (Option B Address + Option A Map Override)
   ============================================================ */
.reg-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.reg-modal-backdrop[hidden] { display: none !important; }

.reg-modal-card {
  background: #141419;
  border: 1px solid rgba(0, 232, 74, 0.3);
  border-radius: 20px;
  padding: 24px;
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.reg-modal-card h2 {
  font-size: 20px;
  color: #00e84a;
  margin-bottom: 4px;
}
.reg-subtext {
  font-size: 13px;
  color: #bbb;
  line-height: 1.4;
}
.reg-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.reg-section label {
  font-size: 13px;
  color: #ddd;
}
.reg-input-group {
  display: flex;
  gap: 8px;
}
.reg-input-group input,
#reg-hint {
  flex: 1;
  background: #22222a;
  border: 1px solid #444;
  border-radius: 10px;
  padding: 10px 12px;
  color: #fff;
  font-size: 14px;
}
#reg-geocode-btn {
  background: #ff9900;
  color: #000;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(255, 153, 0, 0.4);
}
.reg-status {
  font-size: 12px;
  min-height: 16px;
}
.reg-status.success { color: #00e84a; }
.reg-status.error { color: #ff5555; }
.reg-status.loading { color: #ffcc00; }

#reg-map {
  width: 100%;
  height: 240px;
  border-radius: 12px;
  border: 2px solid rgba(0, 232, 74, 0.5);
  background: #000;
}
.reg-coords {
  font-family: monospace;
  font-size: 12px;
  color: #00e84a;
  text-align: right;
}
.reg-actions {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}
.btn-secondary {
  background: #33333a;
  color: #ddd;
  box-shadow: none;
  border-radius: 12px;
  padding: 12px 20px;
  flex: 1;
}
.btn-primary {
  background: #00e84a;
  color: #000;
  border-radius: 12px;
  padding: 12px 20px;
  flex: 2;
}