:root{--lime:#D4FF4F;--lav:#C8B6FF;--rose:#FF8FAB;--ink:#141414;--paper:#FAF8F3;--mint:#B8F2D0;--peach:#FFD3B0}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:#EDEAE2;color:var(--ink);font-family:'Bricolage Grotesque',sans-serif}
body{background-image:radial-gradient(#d6d2c6 1px,transparent 1px);background-size:18px 18px}
.mono{font-family:'JetBrains Mono',monospace}
.shell{max-width:480px;margin:0 auto;min-height:100vh;background:var(--paper);position:relative;padding-bottom:calc(90px + env(safe-area-inset-bottom));border-left:1.5px solid var(--ink);border-right:1.5px solid var(--ink)}
.card{background:#fff;border:1.5px solid var(--ink);border-radius:20px;box-shadow:3px 3px 0 var(--ink);animation:up .35s both}
.chip{border:1.5px solid var(--ink);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:500;background:#fff;white-space:nowrap;min-height:36px}
.chip.on{background:var(--ink);color:var(--lime)}
.btn{border:1.5px solid var(--ink);border-radius:14px;padding:12px 16px;font-weight:800;background:var(--lime);box-shadow:3px 3px 0 var(--ink);transition:transform .08s,box-shadow .08s;min-height:44px}
.btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.btn.ghost{background:#fff}.btn.dark{background:var(--ink);color:var(--lime)}.btn.red{background:#FF4D4D;color:#fff}
.inp{width:100%;border:1.5px solid var(--ink);border-radius:14px;padding:12px 14px;background:#fff;font:inherit;outline:none}
.inp:focus{box-shadow:3px 3px 0 var(--lav)}
.backdrop{position:fixed;inset:0;background:rgba(20,20,20,.45);z-index:1000;display:flex;align-items:flex-end;justify-content:center;animation:fade .2s}
.sheet{width:100%;max-width:480px;background:var(--paper);border:1.5px solid var(--ink);border-bottom:0;border-radius:28px 28px 0 0;padding:20px 20px calc(24px + env(safe-area-inset-bottom));max-height:88vh;overflow:auto;animation:rise .3s cubic-bezier(.2,.9,.3,1.2)}
.grab{width:44px;height:5px;border-radius:9px;background:var(--ink);margin:0 auto 14px;opacity:.25}
.fab{position:fixed;bottom:calc(24px + env(safe-area-inset-bottom));left:50%;transform:translateX(150px);width:60px;height:60px;border-radius:50%;font-size:30px;z-index:500}
@media(max-width:480px){.fab{left:auto;right:18px;transform:none}}
.pulse{animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,77,77,.6)}70%{box-shadow:0 0 0 18px rgba(255,77,77,0)}100%{box-shadow:0 0 0 0 rgba(255,77,77,0)}}
@keyframes rise{from{transform:translateY(100%)}to{transform:none}}
@keyframes up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}}
@keyframes fall{0%{transform:translateY(-10vh) rotate(0)}100%{transform:translateY(110vh) rotate(720deg)}}
.confetti{position:fixed;top:0;width:10px;height:14px;z-index:3000;pointer-events:none;animation:fall 2.4s linear forwards}
.bub{max-width:78%;padding:9px 13px;border-radius:18px;border:1.5px solid var(--ink);font-size:15px;animation:up .2s}
.bub.me{background:var(--lime);border-bottom-right-radius:4px;margin-left:auto}
.bub.them{background:#fff;border-bottom-left-radius:4px}
.toast{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:4000;background:var(--ink);color:var(--lime);padding:10px 18px;border-radius:999px;font-weight:500;animation:up .3s;max-width:90vw;text-align:center}
.leaflet-container{font-family:'Bricolage Grotesque';background:#e8e4da}
.leaflet-tile{filter:saturate(.3) contrast(.95)}
.pin{width:38px;height:38px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#fff;border:2px solid var(--ink);display:flex;align-items:center;justify-content:center}
.pin span{transform:rotate(45deg);font-size:18px}
.pin.spon{background:var(--lime);box-shadow:0 0 0 4px rgba(212,255,79,.5)}
.me-dot{width:18px;height:18px;border-radius:50%;background:var(--lime);border:3px solid var(--ink);animation:pulse 1.6s infinite}
.noscroll::-webkit-scrollbar{display:none}
.bar{height:10px;border-radius:9px;background:var(--lav);border:1.5px solid var(--ink)}