#map {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: #0a0a0a;
}

/* Hide Leaflet attribution on mobile to save space */
.leaflet-control-attribution {
  font-size: 9px !important;
  opacity: 0.5;
}

.leaflet-control-zoom {
  display: none;
}

/* Live walker pulse */
@keyframes pulse {
  0%   { transform: scale(1);   opacity: 1; }
  50%  { transform: scale(1.6); opacity: 0.4; }
  100% { transform: scale(1);   opacity: 1; }
}

.walker-marker {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(255,255,255,0.6);
  animation: pulse 1.6s ease-in-out infinite;
  box-shadow: 0 0 10px rgba(255,255,255,0.8);
}

/* Live walker avatar pulse ring */
.walker-live {
  animation: pulse 1.6s ease-in-out infinite;
  box-shadow: 0 0 12px rgba(255,255,255,0.7);
}

/* Bounty treasure chest marker */
.bounty-chest-icon { background: none; border: none; }

/* Bounty image marker */
.bounty-img-icon { background: none; border: none; }
.bounty-img-marker {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  overflow: hidden;
  border: 3px solid #ffd700;
  box-shadow: 0 0 14px rgba(255, 215, 0, 0.7);
  animation: chest-bob 2s ease-in-out infinite;
}
.bounty-img-marker img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bounty-img-marker.opening {
  animation: chest-open-bounce 0.5s ease-out forwards;
}
.bounty-chest {
  position: relative;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transform-origin: center bottom;
  animation: chest-bob 2s ease-in-out infinite;
}
.bounty-chest .chest-svg {
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.6));
  overflow: visible;
}
.chest-glow {
  position: absolute;
  left: 50%;
  top: 58%;
  width: 36px;
  height: 36px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, var(--chest-glow, rgba(255,205,40,0.6)) 0%, transparent 70%);
  animation: chest-pulse 1.8s ease-in-out infinite;
  pointer-events: none;
}

/* Tier palette */
.bounty-chest.tier-gold   { --chest-base:#d99a16; --chest-lid:#f4c948; --chest-glow:rgba(255,205,40,0.6); }
.bounty-chest.tier-silver { --chest-base:#8e97a1; --chest-lid:#d7dde3; --chest-glow:rgba(210,225,240,0.55); }
.bounty-chest.tier-bronze { --chest-base:#9c5d2b; --chest-lid:#cd8b4f; --chest-glow:rgba(220,150,90,0.55); }

.chest-body    { fill: var(--chest-base); stroke: rgba(0,0,0,0.4); stroke-width: 0.6; }
.chest-lid-top { fill: var(--chest-lid);  stroke: rgba(0,0,0,0.4); stroke-width: 0.6; }
.chest-band    { fill: rgba(255,255,255,0.4); }
.chest-lock    { fill: #2a1c08; stroke: var(--chest-lid); stroke-width: 0.8; }

/* Claimed: lid swings open on its hinge, glow bursts, then JS removes it */
.bounty-chest.opening { animation: chest-open-bounce 0.5s ease-out forwards; }
.bounty-chest.opening .chest-lid {
  transform-box: fill-box;
  transform-origin: left bottom;
  animation: lid-open 0.45s ease-out forwards;
}
.bounty-chest.opening .chest-glow { animation: chest-burst 0.9s ease-out forwards; }

@keyframes chest-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
@keyframes chest-pulse {
  0%, 100% { opacity: 0.45; transform: translate(-50%, -50%) scale(0.85); }
  50%      { opacity: 0.9;  transform: translate(-50%, -50%) scale(1.15); }
}
@keyframes chest-open-bounce {
  0%   { transform: translateY(0) scale(1); }
  40%  { transform: translateY(-6px) scale(1.18); }
  100% { transform: translateY(-2px) scale(1.05); }
}
@keyframes lid-open {
  to { transform: rotate(-38deg) translateY(-2px); }
}
@keyframes chest-burst {
  0%   { opacity: 0.95; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0;    transform: translate(-50%, -50%) scale(2.6); }
}

.bounty-tip {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
}

/* Active walk trail */
.walk-trail {
  stroke-dasharray: 6 4;
  animation: dash 1.5s linear infinite;
}

@keyframes dash {
  to { stroke-dashoffset: -20; }
}

/* Claim entrance: fill pulses in with a slight overshoot */
.claim-fill-pulse {
  animation: fill-pulse 1.2s ease-out;
}
@keyframes fill-pulse {
  0%   { fill-opacity: 0; }
  45%  { fill-opacity: 0.4; }
  100% { fill-opacity: 0.18; }
}

/* Steal: three quick flame flashes before settling into the new owner's color */
.steal-flame {
  animation: steal-flame 1.5s ease-in-out;
}
@keyframes steal-flame {
  15%, 45%, 75% { stroke: #ff4422; filter: drop-shadow(0 0 14px #ff5500); }
  30%, 60%, 90% { stroke: #ffd166; filter: drop-shadow(0 0 8px #ffaa00); }
}

/* HUD */
#hud {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
}

.action-btn {
  height: 64px;
  padding: 0 40px;
  border-radius: 32px;
  border: none;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 1px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.action-btn:active { transform: scale(0.95); }

/* Solana Aurora Glass: frosted pill with a rotating purple->teal aurora
   behind the label and a slow shine sweep. Pure CSS, no JS / icon-font deps. */
.action-btn.start {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-sizing: border-box;
  color: #f3fffb;
  text-shadow: 0 1px 10px rgba(0,0,0,0.35);
  background: rgba(255,255,255,0.06);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  border: 1px solid rgba(255,255,255,0.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 10px 32px rgba(90,40,170,0.45),
    0 0 40px rgba(20,241,149,0.18);
}

/* Aurora layer — sits above the glass fill, below the label (negative z) */
.action-btn.start::before {
  content: "";
  position: absolute;
  inset: -50%;
  z-index: -2;
  filter: blur(16px);
  opacity: 0.85;
  background: conic-gradient(from 0deg, #9945ff, #14f195, #00d1ff, #9945ff);
  animation: okaygo-aurora 6s linear infinite;
}

/* Diagonal shine sweep */
.action-btn.start::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 40%;
  height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.55), transparent);
  animation: okaygo-shine 4.5s ease-in-out infinite;
}

.action-btn.start:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    0 16px 40px rgba(90,40,170,0.6),
    0 0 60px rgba(20,241,149,0.3);
}
.action-btn.start:active { transform: translateY(0) scale(0.96); }

@keyframes okaygo-aurora { to { transform: rotate(360deg); } }
@keyframes okaygo-shine {
  0%        { transform: translateX(-160%); }
  55%, 100% { transform: translateX(420%); }
}

@media (prefers-reduced-motion: reduce) {
  .action-btn.start::before,
  .action-btn.start::after { animation: none; }
}

.action-btn.stop {
  background: #ff2222;
  color: #fff;
  box-shadow: 0 0 30px rgba(255,34,34,0.5);
}

/* pump.fun button — top-right glass FAB */
.pump-btn {
  position: fixed;
  top: calc(var(--safe-top) + 12px);
  right: 12px;
  z-index: 1000;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(12, 14, 22, 0.80);
  border: 1px solid rgba(255,255,255,0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 2px 12px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.07);
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
  transition: opacity 0.2s;
}
.pump-btn:hover { opacity: 0.85; }
.pump-btn img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
}

/* Walk stats — sits left of the pump button on desktop */
#walk-stats {
  font-size: 14px;
  font-weight: 700;
  min-width: 80px;
  top: calc(var(--safe-top) + 12px);
  right: 70px;
}
#stat-distance { color: var(--accent); font-size: 16px; }
#stat-speed    { color: var(--text-muted); font-size: 12px; }

/* User panel */
#user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid transparent;
  cursor: pointer;
  overflow: hidden;
}

#user-info { line-height: 1.3; }
#user-name { font-size: 13px; font-weight: 700; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#user-rank { font-size: 11px; color: var(--text-muted); }