:root { --spray-pink:#ff2f92; --spray-lime:#c8ff1a; --spray-orange:#ff6818; --spray-cyan:#00d8d0; }

html { scrollbar-width:auto; scrollbar-color:var(--spray-orange) #090c10; }
*::-webkit-scrollbar { width:15px; height:13px; }
*::-webkit-scrollbar-track { background:linear-gradient(90deg,#050709,#11161a 50%,#050709); border-left:1px solid rgba(255,255,255,.1); }
*::-webkit-scrollbar-thumb { min-height:48px; border:3px solid #080b0e; border-radius:8px 8px 15px 4px; background:radial-gradient(circle at 27% 92%,var(--spray-orange) 0 3px,transparent 4px),radial-gradient(circle at 72% 98%,var(--spray-pink) 0 2px,transparent 3px),linear-gradient(180deg,var(--spray-orange),var(--spray-pink) 72%,var(--spray-orange)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.24),0 0 10px rgba(255,104,24,.28); }
*::-webkit-scrollbar-thumb:hover { background:radial-gradient(circle at 30% 94%,var(--spray-lime) 0 3px,transparent 4px),linear-gradient(180deg,var(--spray-lime),var(--spray-orange)); }
*::-webkit-scrollbar-corner { background:#050709; }

body::before {
  content:"";
  position:fixed;
  z-index:70;
  inset:0;
  pointer-events:none;
  opacity:.13;
  mix-blend-mode:screen;
  background:
    radial-gradient(circle at 8% 17%,#fff 0 1px,transparent 1.5px),
    radial-gradient(circle at 89% 31%,var(--spray-pink) 0 1px,transparent 1.8px),
    radial-gradient(circle at 22% 82%,var(--spray-lime) 0 1px,transparent 1.6px),
    repeating-linear-gradient(91deg,transparent 0 46px,rgba(255,255,255,.035) 47px 48px);
  background-size:43px 47px,61px 53px,71px 67px,100% 100%;
}

.street-tape {
  position:relative;
  z-index:18;
  width:100%;
  height:31px;
  overflow:hidden;
  color:#050607;
  border-top:2px solid #050607;
  border-bottom:2px solid #050607;
  background:var(--spray-lime);
  box-shadow:0 5px 0 rgba(0,0,0,.55),0 8px 24px rgba(0,0,0,.38);
  transform:rotate(-.18deg) scaleX(1.006);
}
.city-home .street-tape { position:sticky; z-index:79; top:78px; }
.portal-header + .street-tape,.community-header + .street-tape,.district-topbar + .street-tape,.topbar + .street-tape { position:sticky; z-index:59; top:78px; }
.community-header + .street-tape { top:80px; }
.district-topbar + .street-tape { top:76px; }
.street-tape::before,.street-tape::after { content:""; position:absolute; z-index:2; inset:0 auto 0; width:58px; opacity:.35; background:repeating-linear-gradient(45deg,#000 0 5px,transparent 5px 10px); }
.street-tape::after { right:0; left:auto; }
.street-tape > div { display:flex; width:max-content; animation:tapeRun 24s linear infinite; }
.street-tape span { flex:none; padding:8px 0 7px; font:1000 9px/1 system-ui,sans-serif; letter-spacing:.16em; white-space:nowrap; }

.graffiti-corner-tag {
  position:fixed;
  z-index:69;
  right:14px;
  top:110px;
  display:grid;
  justify-items:end;
  pointer-events:none;
  color:white;
  filter:drop-shadow(4px 5px 0 #000);
  transform:rotate(4deg);
}
.graffiti-corner-tag b { font:1000 23px/.8 system-ui,sans-serif; font-style:italic; letter-spacing:-.13em; text-shadow:-2px 2px var(--spray-pink),2px -2px var(--spray-cyan); }
.graffiti-corner-tag span { margin-top:5px; padding:5px 7px 4px; color:#060708; background:var(--spray-orange); font:1000 6px/.95 system-ui,sans-serif; letter-spacing:.13em; text-align:right; clip-path:polygon(4% 5%,100% 0,96% 91%,0 100%); }
.graffiti-corner-tag i { width:34px; height:6px; margin:3px 2px 0 0; background:var(--spray-lime); clip-path:polygon(0 28%,100% 0,91% 60%,25% 100%); }
body.city-home .graffiti-corner-tag { display:none; }

.city-header-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px}.city-more-menu{position:relative}.city-more-menu>summary{min-height:40px;display:grid;place-items:center;padding:0 12px;color:#f5f5f2;border:1px solid rgba(255,255,255,.22);background:#0a0d10;cursor:pointer;list-style:none;font:900 9px/1 system-ui,sans-serif;letter-spacing:.1em}.city-more-menu>summary::-webkit-details-marker{display:none}.city-more-menu[open]>summary{color:#08090a;border-color:var(--spray-lime);background:var(--spray-lime)}.city-more-menu>nav{position:absolute;z-index:120;top:calc(100% + 8px);right:0;width:min(280px,calc(100vw - 24px));display:grid;padding:8px;border:1px solid rgba(255,255,255,.24);background:#090c0f;box-shadow:9px 9px 0 rgba(255,104,24,.25)}.city-more-menu>nav a{min-height:42px;display:flex;align-items:center;padding:0 11px;color:#c7cdd1;border-bottom:1px solid rgba(255,255,255,.1);text-decoration:none;font:850 10px/1 system-ui,sans-serif;letter-spacing:.07em}.city-more-menu>nav a:hover,.city-more-menu>nav a:focus-visible{color:#08090a;background:var(--spray-orange)}
@media(max-width:560px){.community-header>.city-header-actions{grid-column:2;grid-row:1}.community-header>.city-header-actions .header-rider span{display:none}}

.graffiti-hit { --graffiti-paint:var(--spray-orange); position:relative; isolation:isolate; text-shadow:3px 3px 0 #000,-1px 1px 0 rgba(255,255,255,.18); }
.graffiti-hit::after {
  content:"";
  position:absolute;
  z-index:-1;
  left:-.08em;
  bottom:-.16em;
  width:76%;
  height:.58em;
  opacity:.58;
  background:
    radial-gradient(circle at 3% 78%,var(--graffiti-paint) 0 2px,transparent 3px),
    radial-gradient(circle at 12% 12%,var(--graffiti-paint) 0 1.5px,transparent 2.5px),
    radial-gradient(circle at 87% 18%,var(--graffiti-paint) 0 2px,transparent 3px),
    radial-gradient(circle at 94% 72%,var(--graffiti-paint) 0 1.5px,transparent 2.5px),
    radial-gradient(ellipse at 31% 54%,color-mix(in srgb,var(--graffiti-paint) 84%,transparent) 0 13%,transparent 48%),
    radial-gradient(ellipse at 68% 44%,color-mix(in srgb,var(--graffiti-paint) 70%,transparent) 0 10%,transparent 42%);
  filter:blur(.8px) drop-shadow(0 0 8px color-mix(in srgb,var(--graffiti-paint) 34%,transparent));
  transform:rotate(-2deg) skewX(-9deg);
  clip-path:polygon(0 32%,8% 12%,19% 24%,31% 5%,44% 20%,58% 1%,72% 18%,87% 4%,100% 31%,94% 58%,100% 79%,78% 66%,65% 91%,49% 72%,32% 100%,18% 73%,5% 89%);
}
.district-title-card .graffiti-hit,.route-copy .graffiti-hit { --graffiti-paint:var(--district-color,var(--spray-orange)); }

.paste-layer { position:relative; }
.paste-layer::before {
  content:"";
  position:absolute;
  z-index:5;
  width:52px;
  height:15px;
  top:-7px;
  left:calc(12% + var(--paste-index,0) * 17%);
  pointer-events:none;
  opacity:.72;
  background:rgba(221,213,178,.78);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),0 2px 5px rgba(0,0,0,.3);
  transform:rotate(calc(-5deg + var(--paste-index,0) * 3deg));
}

.map-viewport,.explorer-view,.route-player,.tour-viewer,.mini-map-visual {
  box-shadow:0 0 0 1px rgba(255,255,255,.12),7px 8px 0 #030405,0 0 30px rgba(255,47,146,.18);
}
.district-app .explorer-view,.district-app .route-player,.district-app .mini-map-visual { box-shadow:0 0 0 1px rgba(255,255,255,.12),7px 8px 0 #030405,0 0 34px rgba(var(--district-rgb),.24); }
.map-viewport::before,.explorer-view::before {
  content:"NO BLANK WALLS";
  position:absolute;
  z-index:9;
  left:14px;
  top:14px;
  padding:5px 8px;
  pointer-events:none;
  color:#050607;
  background:var(--spray-orange);
  font:1000 6px/1 system-ui,sans-serif;
  letter-spacing:.16em;
  transform:rotate(-3deg);
  clip-path:polygon(2% 4%,100% 0,96% 94%,0 100%);
}
.explorer-view::before { content:"DISTRICT WALL // LIVE"; color:#fff; background:var(--district-color,var(--spray-pink)); }

.district-marker.street-sticker { border:2px solid #fff; box-shadow:4px 4px 0 #000,0 0 0 2px var(--district-color); clip-path:polygon(3% 5%,97% 0,100% 89%,87% 100%,4% 94%,0 25%); }
.district-marker::after { content:"TAG"; position:absolute; right:-11px; top:-9px; padding:3px 4px; color:#050607; background:var(--spray-lime); font:1000 5px/1 system-ui,sans-serif; transform:rotate(9deg); }
.district.is-locked .district-marker::after { content:"BUFFED"; color:#aaa; background:#25292d; }

.street-sticker { box-shadow:3px 3px 0 #000; transform:rotate(-.35deg); }
.find-card:nth-child(even) { transform:rotate(.25deg); }
.find-card:nth-child(odd) { transform:rotate(-.25deg); }
.district-app .street-sticker,.district-app .find-card { transform:none; }
.find-card small::before { content:"✕ "; color:var(--spray-pink); }
.find-card em { display:inline-block; align-self:flex-start; padding:5px 7px; color:#08090a; background:var(--spray-lime); transform:rotate(-1deg); }
.find-card.is-found em { background:var(--district-color,var(--spray-lime)); }

.claim-dialog { overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; border:3px solid #fff; box-shadow:10px 12px 0 var(--spray-pink),20px 22px 0 rgba(0,0,0,.75); }
.claim-dialog::after { content:"STREET SIGNAL"; position:absolute; right:64px; top:8px; padding:7px 12px; color:#070809; background:var(--spray-lime); font:1000 7px/1 system-ui,sans-serif; letter-spacing:.15em; transform:rotate(2deg); }
.claim-panel { overflow:visible; }
.claim-panel::after { content:""; position:absolute; right:-28px; bottom:-25px; width:150px; height:90px; opacity:.23; background:radial-gradient(ellipse,#fff 0 12%,transparent 14%),radial-gradient(circle at 20% 70%,#fff 0 2px,transparent 3px); transform:rotate(-18deg); }
.claim-reward.street-sticker { border-width:2px; transform:rotate(.4deg); }
.claim-source { display:flex; justify-content:space-between; gap:14px; margin:10px 0 0; padding:8px 10px; color:#777f85; border:1px dashed rgba(255,255,255,.24); font:800 6px/1.2 system-ui,sans-serif; letter-spacing:.09em; }
.claim-source b { color:var(--spray-lime); }
.claim-source span { color:white; }

.paint-hit { --paint-color:var(--district-color,var(--spray-pink)); position:fixed; z-index:1000; width:78px; height:48px; pointer-events:none; background:radial-gradient(ellipse at 50% 54%,var(--paint-color) 0 8%,color-mix(in srgb,var(--paint-color) 82%,transparent) 9% 19%,transparent 22%),radial-gradient(circle at 18% 31%,var(--paint-color) 0 3px,transparent 4px),radial-gradient(circle at 76% 16%,var(--paint-color) 0 2px,transparent 3px),radial-gradient(circle at 86% 67%,var(--paint-color) 0 3px,transparent 4px),linear-gradient(99deg,transparent 4%,var(--paint-color) 16% 76%,transparent 94%); transform:translate(-50%,-50%) rotate(var(--paint-rotate)); filter:drop-shadow(0 0 8px color-mix(in srgb,var(--paint-color) 38%,transparent)); animation:paintPop .78s ease-out forwards; clip-path:polygon(0 43%,9% 28%,18% 37%,27% 13%,39% 31%,52% 4%,63% 29%,79% 16%,100% 38%,85% 54%,96% 78%,75% 65%,62% 94%,48% 69%,33% 100%,22% 72%,7% 83%); }
.paint-hit::before,.paint-hit::after { content:""; position:absolute; width:6px; height:6px; border-radius:50%; background:var(--paint-color); box-shadow:-13px 12px 0 -1px var(--paint-color),17px -8px 0 -2px var(--paint-color),25px 16px 0 -1px var(--paint-color); }
.paint-hit::before { left:8px; top:4px; }.paint-hit::after { right:11px; bottom:5px; }
.paint-canvas { position:fixed; z-index:999; inset:0; width:100vw; height:100vh; height:100dvh; opacity:1; pointer-events:none; mix-blend-mode:screen; filter:drop-shadow(0 0 6px rgba(255,104,24,.24)); transition:opacity .9s ease; }
.paint-canvas.is-fading { opacity:0; }

@keyframes tapeRun { to { transform:translateX(-50%); } }
@keyframes paintPop { 0% { opacity:0; scale:.3; } 28% { opacity:.92; scale:1.04; } 100% { opacity:0; scale:1.18; filter:blur(.6px); } }

.motion-off .street-tape > div,.motion-off .paint-hit { animation:none!important; }
.motion-off .paint-canvas { display:none; }

@media (max-width:680px) {
  .graffiti-corner-tag { display:none; }
  .street-tape { height:27px; }
  .city-home .street-tape { top:calc(66px + env(safe-area-inset-top)); }
  .portal-header + .street-tape,.community-header + .street-tape,.district-topbar + .street-tape,.topbar + .street-tape { top:calc(68px + env(safe-area-inset-top)); }
  .street-tape span { padding-top:7px; font-size:7px; }
  .map-viewport,.explorer-view,.route-player,.tour-viewer,.mini-map-visual { box-shadow:0 0 0 1px rgba(255,255,255,.12),4px 5px 0 #030405,0 0 22px rgba(255,47,146,.16); }
  .district-app .explorer-view,.district-app .route-player,.district-app .mini-map-visual { box-shadow:0 0 0 1px rgba(255,255,255,.12),4px 5px 0 #030405,0 0 24px rgba(var(--district-rgb),.2); }
  .claim-source { display:grid; }
  .city-more-menu>summary{min-height:44px;padding:0 9px;font-size:8px}.city-more-menu>nav a{min-height:44px}.city-header-actions{gap:5px}
}

@media (hover:none),(pointer:coarse) {
  .city-more-menu>summary,.city-more-menu>nav a { touch-action:manipulation; }
}

@media (prefers-reduced-motion:reduce) {
  html:not(.motion-ready) .street-tape > div,html:not(.motion-ready) .paint-hit { animation:none!important; }
}