:root{
  --green:#5dff8f; --orange:#ff9a3c;
  --bg:#0c0b0e; --ink:#f2efe8; --pink:#ff3fa4; --cyan:#4df3ff; --yellow:#ffe14d;
  --red:#e8322f; --paper:#f4efe1; --paper-ink:#1d1b18; --grime:#2a2730;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:"Special Elite","Courier New",monospace;overflow:hidden}
a{color:inherit}

/* top bar: sticker-bombed stall door */
.topbar{position:fixed;inset:0 0 auto 0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 16px;background:linear-gradient(180deg,rgba(12,11,14,.95),rgba(12,11,14,.6) 80%,transparent)}
.logo{font-family:"Bungee",sans-serif;font-size:clamp(1rem,3.4vw,1.6rem);text-decoration:none;color:var(--pink);letter-spacing:.02em;
  text-shadow:0 0 6px var(--pink),0 0 18px rgba(255,63,164,.6);animation:flicker 7s infinite}
.logo span{color:var(--cyan);text-shadow:0 0 6px var(--cyan)}
@keyframes flicker{0%,92%,100%{opacity:1}93%{opacity:.4}94%{opacity:1}96%{opacity:.6}97%{opacity:1}}
nav{display:flex;align-items:center;gap:14px}
.nav-link{font-family:"Permanent Marker",cursive;text-decoration:none;color:var(--yellow);font-size:.95rem;transform:rotate(-2deg);display:inline-block}
.nav-link:nth-child(2){transform:rotate(1.5deg);color:var(--cyan)}
.btn-submit{font-family:"Bungee",sans-serif;font-size:.8rem;text-decoration:none;background:var(--yellow);color:#111;padding:8px 12px;
  border:2px solid #111;box-shadow:3px 3px 0 var(--pink);transform:rotate(-1deg)}
@media (max-width:640px){.nav-link{display:none}}

#map{position:fixed;inset:0}
.maplibregl-ctrl-attrib{font-family:system-ui,sans-serif;font-size:10px}

/* pins */
.pin{width:14px;height:14px;border-radius:50%;background:var(--pink);border:2px solid #fff;cursor:pointer;
  box-shadow:0 0 8px var(--pink),0 0 18px rgba(255,63,164,.5)}
.pin.live{background:var(--cyan);box-shadow:0 0 10px var(--cyan),0 0 24px var(--cyan)}

/* the pop-up photo that rises out of a pin */
.pop-anchor{width:96px;cursor:pointer}
.pop{position:relative;width:96px;transform-origin:50% 100%;pointer-events:auto;cursor:pointer;
  animation:rise 4.2s cubic-bezier(.2,.8,.2,1) forwards}
.pop .frame{background:#fff;padding:4px 4px 16px;box-shadow:0 8px 24px rgba(0,0,0,.6);transform:rotate(var(--tilt,-4deg))}
.pop img{display:block;width:100%;aspect-ratio:1;object-fit:cover;background:#222}
.pop .score{position:absolute;bottom:2px;left:0;right:0;text-align:center;font-family:"Permanent Marker",cursive;font-size:.7rem;color:#111}
.pop::after{content:"";position:absolute;left:50%;bottom:-10px;width:2px;height:10px;background:var(--cyan);transform:translateX(-50%)}
@keyframes rise{
  0%{opacity:0;transform:translateY(30px) scale(.2)}
  14%{opacity:1;transform:translateY(-8px) scale(1.05)}
  20%{transform:translateY(0) scale(1)}
  80%{opacity:1;transform:translateY(0) scale(1)}
  100%{opacity:0;transform:translateY(24px) scale(.3)}
}

/* ticker */
.ticker{position:fixed;left:0;right:0;bottom:30px;z-index:10;pointer-events:none;text-align:center;padding:0 16px}
.ticker span{display:inline-block;background:rgba(0,0,0,.7);border:1px solid var(--cyan);color:var(--cyan);padding:6px 12px;
  font-size:.85rem;box-shadow:0 0 12px rgba(77,243,255,.3);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.demo-badge{position:fixed;top:64px;right:16px;z-index:10;font-family:"Bungee",sans-serif;font-size:.7rem;color:var(--red);
  border:2px solid var(--red);padding:3px 8px;transform:rotate(4deg);background:rgba(0,0,0,.6)}

/* preview card: a clean city inspection report slapped on a grimy wall */
.card{position:fixed;z-index:20;left:50%;bottom:72px;transform:translateX(-50%) rotate(-1deg);width:min(360px,calc(100vw - 32px));
  background:var(--paper);color:var(--paper-ink);border:1px solid #c9c0a8;box-shadow:0 18px 50px rgba(0,0,0,.7);
  background-image:repeating-linear-gradient(0deg,transparent 0 23px,rgba(0,0,0,.05) 23px 24px)}
.card[hidden]{display:none}
.card::before{content:"";position:absolute;top:-10px;left:50%;width:70px;height:20px;transform:translateX(-50%) rotate(2deg);
  background:rgba(255,225,77,.75)}
.card-close{position:absolute;top:6px;right:8px;background:none;border:0;font-size:1.4rem;cursor:pointer;color:var(--paper-ink)}
.card-photo img{display:block;width:100%;height:180px;object-fit:cover;filter:contrast(1.05) saturate(.9)}
.card-body{position:relative;padding:12px 16px 16px}
.card-body h2{margin:0 0 2px;font-size:1.25rem}
.card-meta{font-size:.8rem;opacity:.7;text-transform:uppercase;letter-spacing:.06em}
.card-quote{margin:10px 0 12px;font-style:italic}
.card-link{display:inline-block;font-family:"Bungee",sans-serif;font-size:.75rem;text-decoration:none;background:var(--paper-ink);color:var(--paper);padding:8px 10px}
.card-stamp{position:absolute;right:14px;top:-42px;font-family:"Bungee",sans-serif;font-size:1rem;padding:4px 10px;border:3px solid;
  transform:rotate(-12deg);opacity:.85;mix-blend-mode:multiply;background:rgba(255,255,255,.2)}
.card-stamp.ok{color:#1d7a2e;border-color:#1d7a2e}
.card-stamp.bad{color:var(--red);border-color:var(--red)}
.rolls{display:flex;gap:2px;margin-top:8px;font-size:1.3rem;line-height:1}
.roll{position:relative;display:inline-block}
.roll.empty{opacity:.18;filter:grayscale(1)}
.roll.half::after{content:"";position:absolute;top:0;right:0;width:50%;height:100%;background:var(--paper);opacity:.82}
.rolls .num{margin-left:6px;font-size:.95rem;align-self:center}

/* footer + secret plunger */
.foot{position:fixed;left:0;right:0;bottom:0;z-index:10;display:flex;justify-content:space-between;align-items:center;
  padding:6px 16px;font-size:.7rem;color:#8a8590;background:rgba(12,11,14,.85)}
.plunger{color:#3a3640;transition:color .3s}
.plunger:hover{color:var(--red)}
@media (max-width:640px){.foot span{display:none}}

/* closed bars + address links */
.pin.closed{background:#666;border-color:#bbb;box-shadow:none}
.card-stamp.closed{color:#222;border-color:#222}
.card-addr{display:block;font-size:.85rem;color:var(--paper-ink);text-decoration:none;margin:2px 0}
.card-addr:empty{display:none}
.card-addr:hover{text-decoration:underline}

/* merch link with a little SOON sticker */
.nav-link.merch{position:relative;color:var(--pink)}
.nav-link.merch .soon{position:absolute;top:-9px;right:-22px;font-family:"Bungee",sans-serif;font-size:.5rem;background:var(--red);color:#fff;
  padding:1px 4px;transform:rotate(12deg);letter-spacing:.05em}
@media (max-width:640px){.nav-link.merch{display:inline-block}}

/* image logo (neon sign) */
.logo img{display:block;height:112px;width:auto;filter:drop-shadow(0 0 12px rgba(255,63,164,.35))}
.logo{animation:flicker 7s infinite;line-height:0}
@media (max-width:640px){.logo img{height:84px}}
@media (max-width:380px){.logo img{height:68px}}

/* room for the bigger logo */
.topbar{align-items:flex-start;padding-top:8px}
.topbar nav{margin-top:14px}
@media (max-width:640px){.topbar nav{margin-top:8px;flex-wrap:wrap;justify-content:flex-end;gap:8px}}
.demo-badge{top:132px}
.nav-link.merch{margin-right:18px}

/* ===== header v2: logo with links underneath, Submit stays top right ===== */
.topbar{align-items:flex-start;padding:8px 16px 14px}
.brand{display:flex;flex-direction:column;gap:6px}
.links{display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px;padding-left:8px;margin:0}
.nl{position:relative;font-family:"Permanent Marker",cursive;font-size:1rem;text-decoration:none;
  color:rgba(242,239,232,.42);transition:color .2s,text-shadow .2s;background:none;border:0;cursor:pointer;padding:0}
.nl:hover,.nl:focus-visible,.nl.on{color:var(--c);text-shadow:0 0 6px var(--c),0 0 18px var(--c)}
.nl.on{cursor:default}
.nl .soon{position:absolute;top:-9px;right:-24px;font-family:"Bungee",sans-serif;font-size:.48rem;background:var(--red);color:#fff;
  padding:1px 4px;transform:rotate(12deg);letter-spacing:.05em;opacity:.55;transition:opacity .2s}
.nl:hover .soon,.nl.on .soon{opacity:1}
.btn-submit{margin-top:14px}
@media (max-width:640px){
  .topbar{padding:6px 12px 10px}
  .links{gap:4px 14px;padding-left:4px}
  .nl{font-size:.85rem}
  .btn-submit{margin-top:8px;font-size:.7rem;padding:7px 10px}
}
.wrap{padding-top:176px}
@media (max-width:640px){.wrap{padding-top:140px}}
.demo-badge{top:170px}

/* ===== header v3: vertical link list under the logo ===== */
.links{flex-direction:column;align-items:flex-start;gap:4px;padding-left:10px}
.nl{font-size:1.05rem;line-height:1.35}
.links .nl{transition:color .2s,text-shadow .2s,transform .2s}
.links .nl:hover,.links .nl.on{transform:translateX(5px)}
.links .nl .soon{position:static;display:inline-block;margin-left:8px;vertical-align:2px;transform:rotate(8deg)}
@media (max-width:640px){.links{gap:2px;padding-left:6px}.nl{font-size:.9rem}}
/* content pages: header scrolls with the page so the list never covers content */
body.page .topbar{position:relative;background:none}
body.page .wrap{padding-top:8px}

/* ===== header v4: always-colorful marker links, no hover effects ===== */
.links .nl{font-family:"Permanent Marker",cursive;color:var(--c);text-shadow:0 0 6px color-mix(in srgb,var(--c) 55%,transparent);
  transform:rotate(-1.5deg);transition:none}
.links .nl:nth-child(even){transform:rotate(1.2deg)}
.links .nl:hover,.links .nl:focus-visible,.links .nl.on{color:var(--c);transform:rotate(-1.5deg)}
.links .nl:nth-child(even):hover,.links .nl:nth-child(even).on{transform:rotate(1.2deg)}
.links .nl.on{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.links .nl .soon{opacity:1}

/* full-screen catcher behind the preview card: click anywhere off the card to close */
.card-backdrop{position:fixed;inset:0;z-index:15;background:rgba(0,0,0,.25);cursor:pointer}
.card-backdrop[hidden]{display:none}

/* ===== map as the page background ===== */
html{background:var(--bg)}
body.page.has-map{background:transparent;background-image:none}
.bg-map{position:fixed;inset:0;z-index:-2}
.bg-map .maplibregl-ctrl-bottom-right,.bg-map .maplibregl-ctrl-bottom-left{display:none}
.bg-dim{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 18%,rgba(12,11,14,.15) 0,rgba(12,11,14,.55) 45%,rgba(12,11,14,.82) 100%)}
.bg-pin{width:8px;height:8px;border-radius:50%;background:var(--pink);opacity:.55;box-shadow:0 0 6px var(--pink)}
.bg-pin.closed{background:#777;box-shadow:none}
.bg-pin.focus{width:22px;height:22px;opacity:1;border:3px solid #fff;box-shadow:0 0 12px var(--pink),0 0 34px var(--pink);animation:pulse 1.8s ease-in-out infinite}
.bg-pin.focus.closed{background:#777;box-shadow:0 0 10px #aaa}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}

/* Instagram button next to Submit */
.top-actions{display:flex;align-items:center;gap:12px;margin-top:14px}
.top-actions .btn-submit{margin-top:0}
.ig-btn{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;color:#fff;text-decoration:none;
  background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fd5949 45%,#d6249f 60%,#285aeb 90%);box-shadow:0 0 10px rgba(214,36,159,.6)}
@media (max-width:640px){.top-actions{margin-top:8px;gap:8px}.ig-btn{width:34px;height:34px}.ig-btn svg{width:18px;height:18px}}

/* bar pages: the map background is clickable (back to the map) */
body.page.has-map{cursor:zoom-out}
body.page.has-map .file,body.page.has-map .report,body.page.has-map .topbar,body.page.has-map .foot,body.page.has-map .lightbox{cursor:auto}

/* sticky footer: short pages push the footer to the bottom of the screen */
body.page{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
body.page > main{flex:1 0 auto;width:100%}
body.page > .foot{margin-top:40px;flex-shrink:0}

/* place types */
.pin.cat-restaurant{background:var(--yellow)}
.pin.cat-random{background:var(--green)}
.cat-filter{position:fixed;left:0;right:0;bottom:72px;z-index:11;display:flex;justify-content:center;gap:6px;flex-wrap:wrap;padding:0 16px;pointer-events:none}
.cat-filter button{pointer-events:auto;font:inherit;font-size:.78rem;cursor:pointer;background:rgba(0,0,0,.75);color:var(--ink);
  border:1px solid var(--pink);padding:5px 10px;border-radius:999px}
.cat-filter button[data-cat="restaurant"]{border-color:var(--yellow)}
.cat-filter button[data-cat="random"]{border-color:var(--green)}
.cat-filter button[aria-pressed="false"]{opacity:.55}
.cat-filter button[aria-pressed="true"]{opacity:1;background:var(--pink);color:#111;font-weight:bold;box-shadow:0 0 12px rgba(255,63,164,.6)}
.cat-filter button[data-cat="all"]{border-color:var(--ink)}
.cat-filter button[data-cat="all"][aria-pressed="true"]{background:var(--ink);box-shadow:none}
.cat-filter button[data-cat="restaurant"][aria-pressed="true"]{background:var(--yellow);box-shadow:0 0 12px rgba(255,225,77,.6)}
.cat-filter button[data-cat="random"][aria-pressed="true"]{background:var(--green);box-shadow:0 0 12px rgba(93,255,143,.6)}
.cat-filter button[data-cat="hit"][aria-pressed="true"]{background:var(--orange);box-shadow:0 0 12px rgba(255,154,60,.7)}
.pin.closed[class]{background:#666}

/* hit list */
.pin.hit{width:26px;height:26px;background:rgba(0,0,0,.6);border:2px dashed var(--orange);display:grid;place-items:center;font-size:14px;
  box-shadow:0 0 10px rgba(255,154,60,.6);animation:hitpulse 2.4s ease-in-out infinite}
.pin.hit span{line-height:1}
@keyframes hitpulse{50%{box-shadow:0 0 18px rgba(255,154,60,.95)}}
.cat-filter button[data-cat="hit"]{border-color:var(--orange)}
.card.is-hit .card-photo{display:none}
.card-stamp.wanted{color:var(--orange);border-color:var(--orange)}
.bounty{font-family:"Bungee",sans-serif;font-size:1.3rem;color:#c25f00}
.bounty small{display:block;font-family:"Special Elite",monospace;font-size:.75rem;color:#555}
.cat-filter[data-only="all"] button{opacity:1}