/* ===== STORE MAP — DARK CHICANO NEON NIGHT PIXEL theme ===== */
@font-face{font-family:'Zpix';src:url('public/fonts/zpix.ttf') format('truetype');font-display:swap}
body, body *{font-family:'Zpix','Press Start 2P','VT323',monospace !important}
:root{
  --bg:#0a0612;            /* near-black purple night */
  --bg2:#140a22;
  --panel:#1a1030;         /* deep purple panel */
  --neon-pink:#ff2d95;     /* chicano hot pink */
  --neon-cyan:#00f0ff;     /* electric cyan */
  --neon-purple:#9d4dff;   /* neon purple */
  --neon-gold:#ffd23f;     /* lowrider gold */
  --neon-green:#39ff14;
  --ink:#e8e0ff;
  --muted:#8a7db5;
}
*{box-sizing:border-box;margin:0;padding:0}
.as-body{
  font-family:'VT323',monospace;background:var(--bg);color:var(--ink);font-size:20px;line-height:1.35;min-height:100vh;
  /* CRT scanlines + faint neon grid */
  background-image:
    repeating-linear-gradient(0deg,rgba(0,240,255,.04) 0 1px,transparent 1px 3px),
    radial-gradient(circle at 20% 10%,rgba(157,77,255,.18),transparent 45%),
    radial-gradient(circle at 85% 90%,rgba(255,45,149,.15),transparent 45%);
}

/* TOP BAR */
.as-topbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;background:var(--bg2);border-bottom:4px solid var(--neon-pink);box-shadow:0 4px 0 #5a0d33,0 6px 18px rgba(255,45,149,.4);padding:10px 16px;position:sticky;top:0;z-index:1000}
.as-brand{display:flex;align-items:center;gap:10px}
.as-brand-logo{height:34px;border:2px solid var(--neon-cyan);background:#000;box-shadow:0 0 8px var(--neon-cyan)}
.as-brand-name{font-family:'Press Start 2P',monospace;font-size:12px;color:var(--neon-cyan);text-shadow:0 0 6px var(--neon-cyan)}
.as-topnav{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.as-topnav a{font-family:'Press Start 2P',monospace;font-size:9px;text-decoration:none;color:var(--neon-cyan);padding:8px 10px;border:2px solid var(--neon-cyan);background:#0c0820;box-shadow:2px 2px 0 #003b40;display:inline-flex;align-items:center;gap:4px;text-shadow:0 0 4px var(--neon-cyan)}
.as-topnav a:hover{background:var(--neon-cyan);color:#001014;text-shadow:none;box-shadow:0 0 10px var(--neon-cyan)}
.as-topnav a.active{background:var(--neon-pink);color:#1a0010;border-color:var(--neon-pink);text-shadow:none;box-shadow:0 0 12px var(--neon-pink)}
.as-src-ic{height:14px;width:14px;border-radius:3px}
.as-badge{font-family:'Press Start 2P',monospace;font-size:9px;color:var(--neon-gold);text-shadow:0 0 6px var(--neon-gold)}

.st-wrap{max-width:1100px;margin:0 auto;padding:24px 16px 50px}

/* stats */
.st-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px}
.st-stat{background:var(--panel);border:3px solid var(--neon-purple);box-shadow:4px 4px 0 #2a0d4a,0 0 14px rgba(157,77,255,.35);padding:16px;text-align:center}
.st-stat small{display:block;font-size:12px;color:var(--muted);margin-top:6px;font-family:'Press Start 2P',monospace}
.st-num{font-family:'Press Start 2P',monospace;font-size:30px;color:var(--neon-pink);text-shadow:0 0 10px var(--neon-pink)}
.st-stat.top{text-align:left}
.st-top-txt{font-size:18px;color:var(--neon-cyan);line-height:1.6;text-shadow:0 0 5px rgba(0,240,255,.6)}
.st-top-txt b{color:var(--neon-gold)}

/* map */
#map{height:560px;border:4px solid var(--neon-cyan);box-shadow:6px 6px 0 #003b40,0 0 24px rgba(0,240,255,.5);margin-bottom:24px;background:#0a0612}
.leaflet-container{font-family:'VT323',monospace;font-size:16px;background:#0a0612}
/* neon-night filter: INVERT the light Gaode tiles into a dark night base,
   then push saturation/hue toward chicano neon (purple/cyan/pink). */
.neon-tiles{filter:invert(1) hue-rotate(190deg) saturate(1.8) contrast(1.15) brightness(.85)}
.leaflet-popup-content-wrapper{background:var(--panel);color:var(--ink);border:2px solid var(--neon-pink);border-radius:0;box-shadow:0 0 12px var(--neon-pink)}
.leaflet-popup-tip{background:var(--neon-pink)}
.leaflet-popup-content{font-family:'VT323',monospace;font-size:18px}
.leaflet-popup-content b{color:var(--neon-cyan)}
.leaflet-control-zoom a{background:var(--bg2)!important;color:var(--neon-cyan)!important;border:1px solid var(--neon-cyan)!important;text-shadow:0 0 4px var(--neon-cyan)}
.leaflet-bar{box-shadow:0 0 8px var(--neon-cyan)}

/* NEON pixel markers */
.st-marker{
  width:12px;height:12px;background:var(--neon-pink);
  border:2px solid #fff;
  box-shadow:0 0 8px var(--neon-pink),0 0 14px var(--neon-pink);
  /* pixel diamond */
  image-rendering:pixelated;
  animation:neonpulse 1.6s infinite;
}
@keyframes neonpulse{0%,100%{box-shadow:0 0 6px var(--neon-pink),0 0 12px var(--neon-pink)}50%{box-shadow:0 0 12px var(--neon-cyan),0 0 22px var(--neon-pink)}}

/* add store */
.st-add,.st-citylist{background:var(--panel);border:3px solid var(--neon-pink);box-shadow:5px 5px 0 #5a0d33,0 0 16px rgba(255,45,149,.3);padding:18px;margin-bottom:24px}
.st-h2{font-family:'Press Start 2P',monospace;font-size:13px;color:var(--neon-pink);margin-bottom:12px;text-shadow:0 0 8px var(--neon-pink)}
.st-hint{font-size:16px;color:var(--muted);margin-bottom:10px}
.st-hint b{color:var(--neon-cyan)}
.st-ta{width:100%;min-height:90px;font-family:'VT323',monospace;font-size:19px;padding:10px 12px;border:3px solid var(--neon-cyan);background:#0c0820;color:var(--ink);resize:vertical;margin-bottom:12px}
.st-ta:focus{outline:none;box-shadow:0 0 12px var(--neon-cyan)}
.st-btn{font-family:'Press Start 2P',monospace;font-size:12px;cursor:pointer;background:var(--neon-pink);color:#1a0010;border:3px solid #fff;box-shadow:4px 4px 0 #5a0d33,0 0 14px var(--neon-pink);padding:14px 22px}
.st-btn:hover{background:var(--neon-cyan);box-shadow:0 0 18px var(--neon-cyan)}
.st-btn:disabled{opacity:.5}
.st-msg{margin-top:12px;font-size:17px;color:var(--neon-green);white-space:pre-line}

/* city list */
.st-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.st-city{display:flex;justify-content:space-between;align-items:center;background:#0c0820;border:2px solid var(--neon-purple);padding:8px 12px;font-size:18px;color:var(--ink)}
.st-city .c-n{font-family:'Press Start 2P',monospace;font-size:12px;color:var(--neon-gold);text-shadow:0 0 6px var(--neon-gold)}
.st-city.clickable{cursor:pointer}
.st-city.clickable:hover{background:#1a1030;border-color:var(--neon-cyan);box-shadow:0 0 10px var(--neon-cyan)}

/* footer */
.as-footer{text-align:center;padding:28px 16px;background:var(--bg2);color:var(--ink);border-top:4px solid var(--neon-pink);box-shadow:0 -4px 18px rgba(255,45,149,.3)}
.as-footer-logo{height:38px;background:#000;border:2px solid var(--neon-cyan);padding:2px;margin-bottom:10px;box-shadow:0 0 8px var(--neon-cyan)}
.as-footer-banner{font-family:'Press Start 2P',monospace;font-size:9px;color:var(--neon-gold);text-shadow:0 0 8px var(--neon-gold)}

@media(max-width:600px){.st-stats{grid-template-columns:1fr}#map{height:420px}}

/* ===== MOBILE (≤640px) ===== */
@media(max-width:640px){
  html,body{max-width:100%;overflow-x:hidden}
  *{max-width:100%}
  .as-topnav{gap:5px;justify-content:flex-end}
  .as-topnav a{font-size:8px;padding:7px 8px}
  .as-topbar{padding:8px 10px}
  .st-stats{grid-template-columns:1fr}
  #map{height:380px}
  .st-ta{font-size:16px}
  .st-btn{width:100%}
  .st-grid{grid-template-columns:repeat(2,1fr)}
  .st-num{font-size:24px}
}
@media(max-width:380px){
  .as-topnav a{font-size:7px;padding:6px 6px}
}