:root{
  --bg:#0a0a0f; --bg2:#12121b; --card:#15151f; --line:#26263a;
  --txt:#ECECF5; --muted:#9a9ab0; --accent:#a855f7; --accent2:#7c3aed;
  --gooning:#a855f7; --hosting:#22c55e; --online:#3b82f6; --travelling:#eab308;
  --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--txt);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; overflow:hidden;
}
.hidden{display:none !important}
.muted{color:var(--muted)}
.tiny{font-size:12px}
.grow{flex:1}

/* overlays */
.overlay{
  position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center;
  padding:20px; background:radial-gradient(120% 100% at 50% -10%, #1b1030 0%, #0a0a0f 60%);
  overflow:auto;
}
.card{
  width:100%; max-width:440px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:26px 22px; box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.brand{display:flex; align-items:baseline; gap:6px; letter-spacing:2px; font-weight:800; margin-bottom:18px}
.brand .logo{font-size:22px}
.brand .accent{color:var(--accent)}
.brand .city{font-size:11px; letter-spacing:3px; color:var(--muted); font-weight:700; margin-left:4px}
.brand.small .logo{font-size:16px}
.brand.small .city{font-size:9px}
h1{font-size:24px; margin:.2em 0 .4em}
h2{font-size:20px; margin:.2em 0 .8em}
h3{margin:.2em 0 .8em}
.legal{font-size:12px; color:var(--muted); background:var(--bg2); border:1px solid var(--line); border-radius:12px; padding:12px}
.row{display:flex; gap:10px; margin-top:16px}

.btn{
  appearance:none; border:1px solid var(--line); background:var(--bg2); color:var(--txt);
  padding:13px 16px; border-radius:12px; font-size:15px; font-weight:600; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; transition:.15s;
}
.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(180deg,var(--accent),var(--accent2)); border-color:transparent; width:100%}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent}
.row .btn{flex:1}

label{display:block; font-size:13px; color:var(--muted); margin:14px 0 0; font-weight:600}
input,textarea{
  width:100%; margin-top:6px; background:var(--bg2); border:1px solid var(--line); color:var(--txt);
  border-radius:12px; padding:12px; font-size:15px; font-family:inherit;
}
input:focus,textarea:focus{outline:none; border-color:var(--accent)}

.tabs{display:flex; gap:6px; margin-bottom:8px; background:var(--bg2); border:1px solid var(--line); border-radius:12px; padding:4px}
.tab{flex:1; background:none; border:none; color:var(--muted); padding:9px; border-radius:9px; font-weight:700; cursor:pointer}
.tab.on{background:var(--card); color:var(--txt)}
.orline{display:flex; align-items:center; gap:10px; color:var(--muted); font-size:12px; margin:16px 0 12px}
.orline:before,.orline:after{content:""; flex:1; height:1px; background:var(--line)}
.err{color:#fda4af; font-size:13px; background:rgba(244,63,94,.12); border:1px solid rgba(244,63,94,.4); padding:8px 10px; border-radius:10px; margin-top:10px}

.chips{display:flex; gap:8px; margin-top:8px}
.chips.wrap{flex-wrap:wrap}
.chip{
  border:1px solid var(--line); background:var(--bg2); color:var(--txt);
  padding:9px 12px; border-radius:999px; font-size:13px; cursor:pointer; font-weight:600;
}
.chip.on{background:var(--accent2); border-color:var(--accent); color:#fff}

/* app shell */
#app{position:fixed; inset:0}
#map{position:absolute; inset:0}
#topbar{
  position:absolute; top:0; left:0; right:0; z-index:20; height:54px;
  display:flex; align-items:center; gap:12px; padding:0 14px;
  background:linear-gradient(180deg, rgba(10,10,15,.92), rgba(10,10,15,0));
}
#topbar .brand{margin:0}
.pill{
  margin-left:auto; background:rgba(21,21,31,.85); border:1px solid var(--line);
  padding:7px 12px; border-radius:999px; font-size:13px; font-weight:600; backdrop-filter:blur(6px);
}
.pill #onlineCount{color:var(--accent)}
.iconbtn{
  width:40px; height:40px; border-radius:12px; border:1px solid var(--line);
  background:rgba(21,21,31,.85); color:var(--txt); font-size:18px; cursor:pointer;
}
#topbar .pill{margin-left:auto}
#topbar .iconbtn{margin-left:10px}

.demo-banner{
  position:absolute; left:50%; transform:translateX(-50%); bottom:18px; z-index:20;
  max-width:92%; background:rgba(168,85,247,.14); border:1px solid var(--accent);
  color:#e9d5ff; padding:9px 14px; border-radius:999px; font-size:12.5px; text-align:center; backdrop-filter:blur(6px);
}

/* markers */
.pin-wrap{
  position:relative; width:46px; height:46px; cursor:pointer;
}
.pin-wrap.demo{opacity:.82}

/* the colored teardrop dot at the bottom (the actual location anchor).
   Absolutely positioned so the pointy tip sits at a known, fixed point of the
   wrapper regardless of the fist above it. The square is 24x24 centered on
   x=23 (wrapper centre). After rotate(-45deg) about its own centre the tip
   points straight down; we place its centre so the tip lands at the wrapper
   bottom-centre (23, 46) — which is the geographic anchor (see app.js offset). */
.pin-wrap .dot{
  position:absolute; left:50%; bottom:0;
  width:24px; height:24px; margin-left:-12px;
  /* lift the square up by half its rotated diagonal so the tip reaches bottom:0 */
  transform:translateY(-5px) rotate(-45deg);
  transform-origin:50% 50%;
  border-radius:50% 50% 50% 0;
  border:2px solid #fff3; box-shadow:0 4px 12px rgba(0,0,0,.5);
}
.pin-wrap.me .dot{outline:3px solid #fff6}
.pin-wrap.gooning .dot{background:var(--gooning)} .pin-wrap.hosting .dot{background:var(--hosting)}
.pin-wrap.online .dot{background:var(--online)} .pin-wrap.travelling .dot{background:var(--travelling)}

/* the pumping fist that sits above the dot.
   Two layers so rotation and animation compose without clobbering each other:
   .fist (outer)  -> static 90deg rotation = fist on its side
   .fist-inner    -> the horizontal stroking pump (translateX + scale) */
.pin-wrap .fist{
  position:absolute; top:-2px; left:50%; width:20px; height:20px; margin-left:-10px;
  color:#fff; filter:drop-shadow(0 2px 3px rgba(0,0,0,.55));
  transform-origin:50% 50%;
  transform:rotate(90deg);   /* lay the fist on its side */
}
.pin-wrap .fist-inner{
  width:100%; height:100%;
  transform-origin:0% 50%;   /* stroke out from the wrist side */
  animation:goonpump .5s ease-in-out infinite;
}
.pin-wrap .fist svg{width:100%; height:100%; display:block}
/* tint the fist to the status colour so it reads as "this person, pumping" */
.pin-wrap.gooning .fist{color:#e9d5ff} .pin-wrap.hosting .fist{color:#bbf7d0}
.pin-wrap.online .fist{color:#dbeafe} .pin-wrap.travelling .fist{color:#fef08a}

/* ONLINE is the headliner — a bigger, faster, unmistakable pump */
.pin-wrap.online .fist{
  width:23px; height:23px; margin-left:-11.5px;
}
.pin-wrap.online .fist-inner{
  animation:goonpump-online .46s ease-in-out infinite;
}

/* horizontal stroking loop (translateX + a touch of scale).
   Because .fist is rotated 90deg, this X motion reads as a sideways stroke. */
@keyframes goonpump{
  0%,100%{transform:translateX(0) scale(1)}
  50%    {transform:translateX(5px) scale(1.12)}
}
@keyframes goonpump-online{
  0%,100%{transform:translateX(0) scale(1)}
  45%    {transform:translateX(7px) scale(1.2)}
  70%    {transform:translateX(1px) scale(1.05)}
}
@media (prefers-reduced-motion: reduce){
  .pin-wrap .fist-inner{animation:none}
}

/* sheets / drawers */
.sheet,.drawer{
  position:absolute; left:0; right:0; bottom:0; z-index:30;
  background:var(--card); border-top:1px solid var(--line);
  border-radius:20px 20px 0 0; padding:22px 18px 28px; box-shadow:0 -20px 60px rgba(0,0,0,.6);
  max-height:72%; overflow:auto;
}
.sheetclose{position:absolute; top:12px; right:14px; background:none; border:none; color:var(--muted); font-size:18px; cursor:pointer}
.p-head{display:flex; align-items:center; gap:12px; margin-bottom:8px}
.p-avatar{
  width:52px; height:52px; border-radius:14px; object-fit:cover; flex:0 0 auto;
  border:1px solid var(--line); background:var(--bg2);
}
.p-avatar.ph{
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:22px; color:#fff; text-transform:uppercase;
}
.p-dot{width:14px; height:14px; border-radius:50%}
.p-handle{font-size:19px; font-weight:800}
.p-status{font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:1px}
.p-tags{display:flex; flex-wrap:wrap; gap:6px; margin:10px 0}
.p-tag{font-size:12px; background:var(--bg2); border:1px solid var(--line); padding:5px 10px; border-radius:999px}
.p-bio{color:#cfcfe0; margin:8px 0 14px}
.badge-demo{font-size:11px; background:rgba(168,85,247,.18); color:#e9d5ff; border:1px solid var(--accent); padding:3px 8px; border-radius:999px; margin-left:auto}

/* chat */
.chat{position:absolute; inset:0; z-index:40; background:var(--bg); display:flex; flex-direction:column}
.chathead{display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid var(--line); height:54px}
.chathead #chatWith{font-weight:700}
.chatlog{flex:1; overflow:auto; padding:14px; display:flex; flex-direction:column; gap:8px}
.msg{max-width:78%; padding:9px 13px; border-radius:16px; font-size:14px}
.msg.them{align-self:flex-start; background:var(--bg2); border:1px solid var(--line); border-bottom-left-radius:4px}
.msg.me{align-self:flex-end; background:linear-gradient(180deg,var(--accent),var(--accent2)); border-bottom-right-radius:4px}
.msg .meta{font-size:10px; opacity:.6; margin-top:3px}
.chatform{display:flex; gap:8px; padding:10px; border-top:1px solid var(--line)}
.chatform input{margin:0}
.chatform .btn{width:auto; padding:12px 18px}

.drawer h3{margin-top:0}

/* photo field on the go-live screen */
.photo-row{display:flex; gap:12px; align-items:flex-start; margin-top:8px}
.photo-preview{
  width:64px; height:64px; flex:0 0 auto; border-radius:14px;
  border:1px solid var(--line); background:var(--bg2) center/cover no-repeat;
}
.photo-preview.ph{
  display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-size:26px; font-weight:400; border-style:dashed;
}
.photo-fields{flex:1; min-width:0}
.photo-fields input{margin-top:0}
.photo-actions{display:flex; gap:8px; margin-top:8px}
.tiny-btn{padding:8px 12px; font-size:13px; width:auto}