/* jale.co/editor — the web map editor. Colours, type and shapes follow the designer's "Jale Map Editor" screens. */

@font-face { font-family: Urbanist; src: url("/site/urbanist-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: Urbanist; src: url("/site/urbanist-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: Urbanist; src: url("/site/urbanist-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: Urbanist; src: url("/site/urbanist-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: Urbanist; src: url("/site/urbanist-900.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Jale Icons"; src: url("/editor-assets/icons.woff2?v=2") format("woff2"); font-weight: 100 700; font-display: block; }

:root {
  --bg: #0B0820; --map: #0E0A24; --bar: #110D29; --card: #15112F; --pop: #1E1846; --brand: #3525AC;
  --lav: #B7ACFF; --lav2: #D8D3FF; --text2: #C9C3EE; --sub: #A9A3D6; --mute: #8A84B8; --dim: #6F69A0;
  --line: rgba(255, 255, 255, .08); --green: #3DD68C; --red: #FF6369; --gold: #FFC53D; --ink: #1B1356;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: #fff; font-family: Urbanist, -apple-system, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
a { color: var(--lav); text-decoration: none; }
a:hover { color: #fff; }
button { font-family: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
button:disabled { cursor: default; }
input { font-family: inherit; }
input::placeholder { color: var(--dim); }
:focus-visible { outline: 2px solid var(--lav); outline-offset: 2px; }
.ic { font-family: "Jale Icons"; font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none;
  display: inline-block; white-space: nowrap; direction: ltr; -webkit-font-feature-settings: "liga"; font-feature-settings: "liga";
  font-variation-settings: "FILL" 1, "wght" 600; -webkit-font-smoothing: antialiased; user-select: none; }
.ic.o { font-variation-settings: "FILL" 0, "wght" 600; }
.boot { min-height: 100vh; display: grid; place-items: center; }
.boot img { border-radius: 17px; opacity: .85; animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; } }
.noscript { padding: 40px; text-align: center; color: var(--sub); }

/* ---------- brand row ---------- */
.brand { display: flex; align-items: center; gap: 10px; color: #fff; }
.brand .mark { width: 24px; height: auto; display: block; }
.brand .word { width: 54px; height: auto; display: block; }
.chip-tag { margin-left: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(183, 172, 255, .14); color: var(--lav2); font-size: 13px; font-weight: 800; white-space: nowrap; }

/* ---------- sign in ---------- */
.signin { min-height: 100vh; display: flex; flex-direction: column;
  background: radial-gradient(900px 600px at 50% -10%, rgba(75, 58, 216, .5), transparent 70%), var(--bg); }
.signin-top { padding: 22px 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.signin-top .back { font-size: 15px; font-weight: 700; color: var(--text2); }
.signin-body { flex: 1; display: grid; place-items: center; padding: 24px 24px 80px; }
.signin-card { width: 100%; max-width: 440px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.signin-card .appicon { width: 88px; height: 88px; border-radius: 21px; display: block; box-shadow: 0 18px 36px rgba(15, 10, 60, .6); }
.eyebrow { margin-top: 28px; font-size: 15px; font-weight: 800; color: var(--lav); }
.signin-card h1 { margin: 10px 0 0; font-size: clamp(42px, 6vw, 60px); line-height: .95; font-weight: 900; letter-spacing: -.04em; }
.signin-card .lede { margin: 18px 0 0; font-size: 18px; line-height: 1.5; font-weight: 500; color: #B9B3E3; text-wrap: pretty; }
.signin-buttons { margin-top: 34px; width: 100%; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.btn-apple { width: 100%; height: 56px; border-radius: 999px; background: #fff; color: var(--bg); font-size: 17px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; gap: 10px; }
.btn-apple svg { width: 16px; height: 20px; fill: currentColor; }
.btn-apple:disabled, .btn-google-off { opacity: .45; }
.btn-google-off { width: 100%; height: 56px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .05);
  font-size: 17px; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 10px; }
.google-slot { width: 100%; min-height: 44px; display: flex; justify-content: center; color-scheme: light; }
.signin-note { margin: 22px 0 0; max-width: 360px; font-size: 14px; line-height: 1.5; font-weight: 600; color: var(--mute); }
.signin-error { margin: 16px 0 0; font-size: 15px; font-weight: 700; color: var(--red); }
.dev { margin-top: 20px; display: flex; gap: 8px; }
.dev input { width: 90px; height: 40px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .15); background: var(--bg); color: #fff; padding: 0 12px; }
.dev button { padding: 0 14px; border-radius: 12px; background: rgba(255, 255, 255, .1); font-weight: 800; }

/* ---------- home ---------- */
.home { min-height: 100vh; background: radial-gradient(1000px 500px at 80% -10%, rgba(75, 58, 216, .35), transparent 70%), var(--bg); }
.wrap { max-width: 1160px; margin: 0 auto; }
.home-top { padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.home-top .actions { display: flex; align-items: center; gap: 10px; position: relative; }
.btn-white { padding: 12px 20px; border-radius: 999px; background: #fff; color: var(--ink); font-size: 15px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.btn-white .ic { font-size: 19px; }
.avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 17px; font-weight: 900; overflow: hidden;
  display: grid; place-items: center; flex: none; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.menu { position: absolute; right: 0; top: 54px; z-index: 80; min-width: 220px; padding: 8px; border-radius: 18px; background: var(--pop);
  border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 20px 50px rgba(0, 0, 0, .5); }
.menu .who { padding: 10px 12px 12px; font-size: 15px; font-weight: 800; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.menu button { width: 100%; padding: 11px 12px; border-radius: 12px; display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; text-align: left; }
.menu button:hover { background: rgba(255, 255, 255, .07); }
.home-body { padding: 36px 24px 80px; }
.home-body h1 { margin: 0; font-size: clamp(40px, 5vw, 64px); line-height: .95; font-weight: 900; letter-spacing: -.04em; overflow-wrap: anywhere; }
.home-body .lede { margin: 14px 0 0; font-size: 18px; font-weight: 500; color: var(--sub); }
.cols { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.col-main { flex: 2 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.col-side { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.points { border-radius: 28px; padding: 30px; background: var(--brand); background-image: radial-gradient(420px 300px at 90% 0%, rgba(183, 172, 255, .4), transparent 70%);
  display: flex; flex-wrap: wrap; gap: 28px; justify-content: space-between; align-items: flex-end; }
.points .label { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; color: var(--lav2); }
.points .label .ic { font-size: 20px; color: var(--gold); }
.points .big { margin-top: 10px; font-size: 64px; line-height: 1; font-weight: 900; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.points .month { margin-top: 10px; font-size: 15px; font-weight: 700; color: #E1DDFF; }
.tallies { display: flex; gap: 10px; flex-wrap: wrap; }
.tally { min-width: 96px; padding: 14px 16px; border-radius: 18px; background: rgba(11, 8, 32, .28); }
.tally b { display: block; font-size: 30px; font-weight: 900; line-height: 1; }
.tally span { display: block; margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--lav2); }
.votes-banner { border-radius: 24px; padding: 20px 22px; background: var(--card); border: 1px solid rgba(255, 197, 61, .25); display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.votes-banner .badge { width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 197, 61, .16); color: var(--gold); display: grid; place-items: center; flex: none; }
.votes-banner .badge .ic { font-size: 22px; }
.votes-banner .txt { flex: 1 1 240px; }
.votes-banner .txt b { display: block; font-size: 18px; font-weight: 800; }
.votes-banner .txt span { display: block; margin-top: 3px; font-size: 15px; font-weight: 500; color: var(--sub); }
.btn-gold { padding: 12px 18px; border-radius: 999px; background: var(--gold); color: #2A1D00; font-size: 15px; font-weight: 800; }
.card { border-radius: 28px; background: var(--card); border: 1px solid rgba(255, 255, 255, .07); }
.list-card { padding: 10px; }
.list-head { padding: 16px 14px 12px; display: flex; justify-content: space-between; align-items: center; }
.list-head b { font-size: 20px; font-weight: 900; letter-spacing: -.01em; }
.list-head span { font-size: 14px; font-weight: 700; color: var(--mute); }
.rows { display: flex; flex-direction: column; gap: 4px; }
.row { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 18px; cursor: pointer; flex-wrap: wrap; text-align: left; width: 100%; }
.row:hover { background: rgba(255, 255, 255, .05); }
.dot-ic { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex: none; color: #fff; }
.dot-ic .ic { font-size: 21px; font-variation-settings: "FILL" 1, "wght" 700; }
.dot-ic .num { font-size: 15px; font-weight: 900; }
.row .main { flex: 1 1 200px; min-width: 0; }
.row .t { font-size: 16.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .s { margin-top: 2px; font-size: 14px; font-weight: 600; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .end { display: flex; align-items: center; gap: 12px; flex: none; }
.row .pts { font-size: 14px; font-weight: 800; color: var(--lav2); }
.pill { padding: 5px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.empty { padding: 30px 20px; text-align: center; font-size: 15px; font-weight: 600; color: var(--mute); line-height: 1.5; }
.info { padding: 26px; display: flex; flex-direction: column; gap: 16px; }
.info h2 { margin: 0; font-size: 20px; font-weight: 900; letter-spacing: -.01em; }
.info .rule { display: flex; gap: 12px; }
.info .rule b { min-width: 52px; font-size: 16px; font-weight: 900; color: var(--green); }
.info .rule b.neg { color: var(--red); }
.info .rule span, .info p { font-size: 15px; line-height: 1.45; font-weight: 500; color: var(--sub); margin: 0; }
.info .foot { padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.45; font-weight: 600; color: var(--mute); }

/* ---------- map screen ---------- */
.mapscreen { position: fixed; inset: 0; overflow: hidden; background: var(--map); }
.topbar { position: absolute; left: 0; right: 0; top: 0; height: 64px; z-index: 1000; display: flex; align-items: center; gap: 14px;
  padding: 0 14px 0 18px; background: var(--bar); border-bottom: 1px solid var(--line); }
.topbar .brand { cursor: pointer; flex: none; }
.topbar .brand .mark { width: 22px; }
.topbar .brand .word { width: 50px; }
.search { position: relative; flex: 0 1 360px; min-width: 160px; margin-left: 12px; }
.search-box { height: 42px; border-radius: 999px; background: var(--bg); border: 1px solid rgba(255, 255, 255, .1); display: flex; align-items: center; gap: 8px; padding: 0 14px; }
.search-box .ic { font-size: 20px; color: var(--mute); }
.search-box input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: #fff; font-size: 15px; font-weight: 600; }
.results { position: absolute; left: 0; right: 0; top: 48px; z-index: 1100; border-radius: 18px; background: var(--pop); border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .5); padding: 6px; display: flex; flex-direction: column; max-height: 60vh; overflow-y: auto; }
.results button { padding: 10px 12px; border-radius: 12px; font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 10px; text-align: left; }
.results button:hover, .results button.on { background: rgba(255, 255, 255, .07); }
.results .ic { font-size: 18px; color: var(--mute); }
.results small { display: block; font-size: 13px; font-weight: 600; color: var(--mute); margin-top: 2px; }
.results .note { padding: 10px 12px; font-size: 14px; font-weight: 600; color: var(--mute); }
.spacer { flex: 1; }
.pts-pill { display: flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px; background: rgba(255, 197, 61, .12); color: var(--gold);
  font-size: 15px; font-weight: 900; flex: none; font-variant-numeric: tabular-nums; }
.pts-pill .ic { font-size: 18px; }
.topbar .avatar { width: 40px; height: 40px; font-size: 16px; }

.rail { position: absolute; left: 0; top: 64px; bottom: 0; width: 84px; z-index: 900; background: var(--bar); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 0; overflow-y: auto; }
.tool { width: 72px; padding: 9px 4px; border-radius: 16px; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--text2); }
.tool .sq { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .06); color: var(--lav2); }
.tool .sq .ic { font-size: 21px; }
.tool span:last-child { font-size: 11.5px; font-weight: 800; line-height: 1.15; text-align: center; }
.tool.on { background: rgba(183, 172, 255, .16); color: #fff; }
.tool.on .sq { color: #fff; }
.tool:hover:not(.on) { background: rgba(255, 255, 255, .04); }

#map { position: absolute; top: 64px; left: 84px; right: 380px; bottom: 0; background: var(--map); z-index: 1; }
.leaflet-container { background: var(--map); font-family: Urbanist, system-ui, sans-serif; outline: 0; }
/* OpenStreetMap's light tiles (no Mapbox token), turned night-time purple to sit with the app */
#map:not(.mapbox)[data-style="dark"] .leaflet-tile-pane { filter: invert(1) hue-rotate(205deg) brightness(.78) contrast(1.12) saturate(.55); }
/* Mapbox Dark, nudged from grey towards the app's night purple (Colour and Satellite stay as they are) */
#map.mapbox[data-style="dark"] .leaflet-tile-pane { filter: sepia(.5) hue-rotate(208deg) saturate(1.7) brightness(1.3) contrast(1.15); }
#map:not(.mapbox)[data-style="color"] .leaflet-tile-pane { filter: none; }
.mapbox-logo { display: block; width: 88px; height: 23px; margin: 0 0 8px 10px !important; background-repeat: no-repeat; background-size: contain;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill-rule='evenodd' viewBox='0 0 88 23'%3E%3Cdefs%3E%3Cpath id='logo' d='M11.5 2.25c5.105 0 9.25 4.145 9.25 9.25s-4.145 9.25-9.25 9.25-9.25-4.145-9.25-9.25 4.145-9.25 9.25-9.25zM6.997 15.983c-.051-.338-.828-5.802 2.233-8.873a4.395 4.395 0 013.13-1.28c1.27 0 2.49.51 3.39 1.42.91.9 1.42 2.12 1.42 3.39 0 1.18-.449 2.301-1.28 3.13C12.72 16.93 7 16 7 16l-.003-.017zM15.3 10.5l-2 .8-.8 2-.8-2-2-.8 2-.8.8-2 .8 2 2 .8z'/%3E%3Cpath id='text' d='M50.63 8c.13 0 .23.1.23.23V9c.7-.76 1.7-1.18 2.73-1.18 2.17 0 3.95 1.85 3.95 4.17s-1.77 4.19-3.94 4.19c-1.04 0-2.03-.43-2.74-1.18v3.77c0 .13-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V8.23c0-.12.1-.23.23-.23h1.4zm-3.86.01c.01 0 .01 0 .01-.01.13 0 .22.1.22.22v7.55c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V15c-.7.76-1.69 1.19-2.73 1.19-2.17 0-3.94-1.87-3.94-4.19 0-2.32 1.77-4.19 3.94-4.19 1.03 0 2.02.43 2.73 1.18v-.75c0-.12.1-.23.23-.23h1.4zm26.375-.19a4.24 4.24 0 00-4.16 3.29c-.13.59-.13 1.19 0 1.77a4.233 4.233 0 004.17 3.3c2.35 0 4.26-1.87 4.26-4.19 0-2.32-1.9-4.17-4.27-4.17zM60.63 5c.13 0 .23.1.23.23v3.76c.7-.76 1.7-1.18 2.73-1.18 1.88 0 3.45 1.4 3.84 3.28.13.59.13 1.2 0 1.8-.39 1.88-1.96 3.29-3.84 3.29-1.03 0-2.02-.43-2.73-1.18v.77c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V5.23c0-.12.1-.23.23-.23h1.4zm-34 11h-1.4c-.13 0-.23-.11-.23-.23V8.22c.01-.13.1-.22.23-.22h1.4c.13 0 .22.11.23.22v.68c.5-.68 1.3-1.09 2.16-1.1h.03c1.09 0 2.09.6 2.6 1.55.45-.95 1.4-1.55 2.44-1.56 1.62 0 2.93 1.25 2.9 2.78l.03 5.2c0 .13-.1.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.8 0-1.46.7-1.59 1.62l.01 4.68c0 .13-.11.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.85 0-1.54.79-1.6 1.8v4.5c0 .13-.1.23-.23.23zm53.615 0h-1.61c-.04 0-.08-.01-.12-.03-.09-.06-.13-.19-.06-.28l2.43-3.71-2.39-3.65a.213.213 0 01-.03-.12c0-.12.09-.21.21-.21h1.61c.13 0 .24.06.3.17l1.41 2.37 1.4-2.37a.34.34 0 01.3-.17h1.6c.04 0 .08.01.12.03.09.06.13.19.06.28l-2.37 3.65 2.43 3.7c0 .05.01.09.01.13 0 .12-.09.21-.21.21h-1.61c-.13 0-.24-.06-.3-.17l-1.44-2.42-1.44 2.42a.34.34 0 01-.3.17zm-7.12-1.49c-1.33 0-2.42-1.12-2.42-2.51 0-1.39 1.08-2.52 2.42-2.52 1.33 0 2.42 1.12 2.42 2.51 0 1.39-1.08 2.51-2.42 2.52zm-19.865 0c-1.32 0-2.39-1.11-2.42-2.48v-.07c.02-1.38 1.09-2.49 2.4-2.49 1.32 0 2.41 1.12 2.41 2.51 0 1.39-1.07 2.52-2.39 2.53zm-8.11-2.48c-.01 1.37-1.09 2.47-2.41 2.47s-2.42-1.12-2.42-2.51c0-1.39 1.08-2.52 2.4-2.52 1.33 0 2.39 1.11 2.41 2.48l.02.08zm18.12 2.47c-1.32 0-2.39-1.11-2.41-2.48v-.06c.02-1.38 1.09-2.48 2.41-2.48s2.42 1.12 2.42 2.51c0 1.39-1.09 2.51-2.42 2.51z'/%3E%3C/defs%3E%3Cmask id='clip'%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='white'/%3E%3Cuse xlink:href='%23logo'/%3E%3Cuse xlink:href='%23text'/%3E%3C/mask%3E%3Cg id='outline' opacity='0.3' stroke='%23000' stroke-width='3'%3E%3Ccircle mask='url(%23clip)' cx='11.5' cy='11.5' r='9.25'/%3E%3Cuse xlink:href='%23text' mask='url(%23clip)'/%3E%3C/g%3E%3Cg id='fill' opacity='0.9' fill='%23fff'%3E%3Cuse xlink:href='%23logo'/%3E%3Cuse xlink:href='%23text'/%3E%3C/g%3E%3C/svg%3E"); }
.leaflet-control-attribution { background: rgba(11, 8, 32, .78) !important; color: var(--mute) !important; font-size: 11px; border-radius: 8px 0 0 0; }
.leaflet-control-attribution a { color: var(--lav) !important; }
.leaflet-crosshair, .leaflet-crosshair .leaflet-interactive { cursor: crosshair !important; }
.mk { position: relative; width: 38px; height: 38px; border-radius: 50%; border: 2.5px solid #fff; display: grid; place-items: center; color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .5); cursor: pointer; }
.mk.pending { border-style: dashed; }
.mk.dead { opacity: .5; }
.mk.on { box-shadow: 0 0 0 7px rgba(255, 255, 255, .3), 0 8px 20px rgba(0, 0, 0, .55); }
.mk .ic { font-size: 19px; font-variation-settings: "FILL" 1, "wght" 700; }
.mk .num { font-size: 14px; font-weight: 900; }
.mk .needs { position: absolute; top: -6px; right: -6px; width: 15px; height: 15px; border-radius: 50%; background: var(--gold); border: 3px solid var(--map); }
.mk.draft { width: 42px; height: 42px; border-width: 3px; box-shadow: 0 0 0 9px rgba(255, 255, 255, .16), 0 6px 18px rgba(0, 0, 0, .5); }
.chev { width: 0; height: 0; }
.chev i { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-top: 3px solid #fff; border-right: 3px solid #fff; transform-origin: 50% 50%; }
.vertex { width: 14px; height: 14px; border-radius: 50%; background: var(--lav); border: 3px solid #fff; }
.leaflet-div-icon { background: none; border: 0; }

.hint { position: absolute; top: 80px; left: calc(84px + (100% - 464px) / 2); transform: translateX(-50%); z-index: 950; padding: 11px 18px; border-radius: 999px;
  background: #fff; color: var(--ink); font-size: 15px; font-weight: 800; box-shadow: 0 14px 30px rgba(0, 0, 0, .4); display: flex; gap: 8px; align-items: center;
  pointer-events: none; white-space: nowrap; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; }
.hint .ic { font-size: 19px; }
.mapctl { position: absolute; right: 396px; bottom: 28px; z-index: 950; display: flex; flex-direction: column; gap: 8px; }
.zoom { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: rgba(22, 18, 54, .92); border: 1px solid rgba(255, 255, 255, .1); }
.zoom button, .locate { width: 44px; height: 44px; display: grid; place-items: center; color: #fff; }
.zoom button:hover, .locate:hover { background: rgba(255, 255, 255, .06); }
.zoom hr { margin: 0; height: 1px; border: 0; background: rgba(255, 255, 255, .1); }
.zoom .ic, .locate .ic { font-size: 22px; font-variation-settings: "FILL" 0, "wght" 600; }
.locate { border: 1px solid rgba(255, 255, 255, .1); border-radius: 16px; background: rgba(22, 18, 54, .92); }
.style-menu { position: absolute; right: 54px; bottom: 0; width: 196px; padding: 6px; border-radius: 18px; background: var(--pop);
  border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 20px 50px rgba(0, 0, 0, .5); display: flex; flex-direction: column; }
.style-menu button { padding: 11px 12px; border-radius: 12px; display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; text-align: left; }
.style-menu button:hover { background: rgba(255, 255, 255, .07); }
.style-menu button span:nth-child(2) { flex: 1; }
.style-menu .ic { font-size: 20px; color: var(--lav); }
.style-menu .tick { color: var(--green); font-size: 19px; }
.loading-roads { position: absolute; left: calc(84px + 16px); bottom: 44px; z-index: 950; padding: 9px 14px; border-radius: 999px; background: rgba(22, 18, 54, .92);
  border: 1px solid rgba(255, 255, 255, .1); font-size: 13.5px; font-weight: 700; color: var(--sub); display: flex; align-items: center; gap: 8px; }
.loading-roads::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--lav); border-right-color: transparent; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.panel { position: absolute; z-index: 1000; top: 64px; right: 0; bottom: 0; width: 380px; background: var(--card); border-left: 1px solid var(--line);
  display: flex; flex-direction: column; overflow: hidden; }
.panel-scroll { flex: 0 1 auto; min-height: 0; overflow-y: auto; padding: 22px; display: flex; flex-direction: column; gap: 22px; overscroll-behavior: contain; }
.panel h2 { margin: 0; font-size: 24px; font-weight: 900; letter-spacing: -.02em; }
.panel .lede { margin: 8px 0 0; font-size: 15px; line-height: 1.5; font-weight: 500; color: var(--sub); }
.sec { display: flex; flex-direction: column; gap: 10px; }
.sec-head { display: flex; align-items: center; justify-content: space-between; padding: 0 2px; }
.cap { font-size: 13px; font-weight: 800; color: var(--mute); text-transform: uppercase; letter-spacing: .06em; }
.count { padding: 3px 9px; border-radius: 999px; background: rgba(255, 197, 61, .16); color: var(--gold); font-size: 12.5px; font-weight: 900; }
.vrow { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 16px; cursor: pointer; background: rgba(255, 255, 255, .03); width: 100%; text-align: left; }
.vrow:hover { background: rgba(255, 255, 255, .07); }
.vrow .dot-ic { width: 38px; height: 38px; }
.vrow .dot-ic .ic { font-size: 19px; }
.vrow .main { flex: 1; min-width: 0; }
.vrow .t { font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vrow .s { margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vrow .chev-r { font-size: 20px; color: var(--dim); }
.caught { padding: 14px; border-radius: 16px; background: rgba(255, 255, 255, .03); font-size: 14.5px; font-weight: 600; color: var(--mute); line-height: 1.45; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips.tight { gap: 6px; }
.chip { padding: 10px 16px; border-radius: 999px; font-size: 15px; font-weight: 700; background: rgba(255, 255, 255, .07); color: var(--lav2); }
.chip.on { background: #fff; color: var(--ink); }
.chip.sm { padding: 9px 14px; font-size: 14.5px; }
.layer { padding: 8px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 700; display: flex; align-items: center; gap: 6px;
  border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .07); color: #fff; }
.layer i { width: 8px; height: 8px; border-radius: 50%; }
.layer.off { background: transparent; color: var(--dim); }
.layer.off i { background: transparent !important; }
.form-head { display: flex; align-items: center; gap: 12px; }
.form-head .sq { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; flex: none; }
.form-head .sq .ic { font-size: 22px; }
.form-head .ttl { flex: 1; font-size: 22px; font-weight: 900; letter-spacing: -.02em; }
.x { width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .07); color: var(--lav2); display: grid; place-items: center; flex: none; }
.x .ic { font-size: 19px; font-variation-settings: "FILL" 0, "wght" 600; }
.loc { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .1); }
.loc .ic { font-size: 21px; color: var(--mute); }
.loc span:last-child { flex: 1; font-size: 15px; font-weight: 700; color: var(--sub); }
.loc.set { background: rgba(61, 214, 140, .08); border-color: rgba(61, 214, 140, .25); }
.loc.set .ic { color: var(--green); }
.loc.set span:last-child { color: #fff; }
.lenrow { display: flex; justify-content: space-between; align-items: baseline; }
.lenrow b { font-size: 17px; font-weight: 900; font-variant-numeric: tabular-nums; }
.lenrow em { font-style: normal; font-size: 14px; font-weight: 700; color: var(--sub); }
input[type=range] { width: 100%; accent-color: var(--lav); }
.dirrow { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; border-radius: 16px; background: rgba(229, 72, 77, .1); }
.dirrow span { flex: 1; font-size: 15px; font-weight: 700; }
.dirrow span b { color: var(--red); font-weight: 700; }
.btn-soft { padding: 9px 14px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #fff; font-size: 14px; font-weight: 800; display: flex; align-items: center; gap: 6px; }
.btn-soft .ic { font-size: 18px; font-variation-settings: "FILL" 0, "wght" 600; }
.kinds { display: grid; grid-template-columns: repeat(4, 1fr); row-gap: 14px; column-gap: 6px; }
.kind { display: flex; flex-direction: column; align-items: center; gap: 7px; color: var(--sub); }
.kind .circ { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.kind .circ .ic { font-size: 25px; font-variation-settings: "FILL" 1, "wght" 700; }
.kind span:last-child { font-size: 13px; font-weight: 800; }
.kind.on { color: #fff; }
.kind.on .circ { box-shadow: 0 0 0 3px var(--card), 0 0 0 6px #fff; }
.limits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.limit { height: 56px; width: 56px; justify-self: center; border-radius: 50%; font-size: 18px; font-weight: 900; background: rgba(255, 255, 255, .07); color: #fff; }
.limit.cur { color: var(--dim); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .18); }
.limit.on { background: #fff; color: var(--ink); }
.limit:disabled { opacity: .35; }
.rulebox { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .04); }
.rulebox p { margin: 0; font-size: 14px; line-height: 1.5; font-weight: 600; color: var(--sub); }
.rulebox .gold { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 800; color: var(--gold); }
.rulebox .gold .ic { font-size: 17px; }
.actions-row { display: flex; gap: 10px; }
.btn-main { flex: 1; height: 54px; border-radius: 999px; background: #fff; color: var(--ink); font-size: 16px; font-weight: 900; }
.btn-main:disabled { opacity: .35; }
.btn-ghost { height: 54px; padding: 0 20px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: transparent; color: #fff; font-size: 16px; font-weight: 800; }
.det-head { display: flex; align-items: flex-start; gap: 14px; }
.det-head .dot-ic { width: 52px; height: 52px; }
.det-head .dot-ic .ic { font-size: 25px; }
.det-head .dot-ic .num { font-size: 18px; }
.det-head .main { flex: 1; min-width: 0; }
.det-head .t { font-size: 21px; line-height: 1.15; font-weight: 900; letter-spacing: -.015em; overflow-wrap: anywhere; }
.det-head .s { margin-top: 4px; font-size: 14.5px; font-weight: 600; color: var(--sub); overflow-wrap: anywhere; }
.statrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.statrow .pill { padding: 6px 12px; font-size: 13px; font-weight: 900; }
.statrow span:last-child { font-size: 14px; font-weight: 600; color: var(--mute); }
.det-rule { font-size: 14.5px; line-height: 1.5; font-weight: 500; color: var(--sub); }
.tallies2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tallies2 div { padding: 14px; border-radius: 16px; }
.tallies2 b { display: block; font-size: 26px; font-weight: 900; line-height: 1; }
.tallies2 span { display: block; margin-top: 6px; font-size: 13.5px; font-weight: 700; color: var(--sub); }
.tallies2 .up { background: rgba(61, 214, 140, .08); }
.tallies2 .up b { color: var(--green); }
.tallies2 .down { background: rgba(255, 99, 105, .08); }
.tallies2 .down b { color: var(--red); }
.btn-up { flex: 1; height: 54px; border-radius: 999px; background: #10B86E; color: #04140C; font-size: 16px; font-weight: 900; display: flex; align-items: center; justify-content: center; gap: 8px; }
.btn-down { flex: 1; height: 54px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); color: #fff; font-size: 16px; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 8px; }
.btn-up .ic, .btn-down .ic { font-size: 20px; }
.btn-down .ic { font-variation-settings: "FILL" 0, "wght" 600; }
.voted { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .05); font-size: 15px; font-weight: 700; line-height: 1.4; }
.voted .ic { font-size: 20px; color: var(--green); flex: none; }
.voted.info-note .ic { color: var(--lav); }
.mypts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mypts .gold { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; color: var(--gold); }
.mypts .gold .ic { font-size: 19px; }
.btn-withdraw { padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(255, 99, 105, .4); color: var(--red); font-size: 14px; font-weight: 800; }
.hist { display: flex; flex-direction: column; }
.hist .cap { margin-bottom: 12px; }
.hrow { display: flex; gap: 12px; }
.hrow .rail-dot { display: flex; flex-direction: column; align-items: center; width: 12px; flex: none; }
.hrow .rail-dot i { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; }
.hrow .rail-dot u { flex: 1; width: 2px; background: var(--line); margin: 4px 0; text-decoration: none; }
.hrow > div:last-child { padding-bottom: 14px; }
.hrow b { display: block; font-size: 14.5px; font-weight: 700; }
.hrow span { display: block; margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--mute); }

.toast { position: fixed; left: 50%; top: 80px; transform: translateX(-50%); z-index: 3000; padding: 12px 14px 12px 16px; border-radius: 999px; background: #fff;
  color: var(--ink); font-size: 15px; font-weight: 800; display: flex; gap: 10px; align-items: center; box-shadow: 0 20px 40px rgba(0, 0, 0, .45);
  max-width: calc(100% - 24px); animation: toast-in .2s ease-out; }
.toast .ic { font-size: 20px; color: #0A8A52; flex: none; }
.toast.err .ic { color: #C9252C; }
.toast span:nth-child(2) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toast .tp { padding: 4px 10px; border-radius: 999px; background: #FFF3D1; color: #7A5200; font-size: 13px; font-weight: 900; white-space: nowrap; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, -8px); } }

/* ---------- phones: map-first (the designer's narrow layout) ---------- */
.narrow .topbar, .narrow .rail { display: none; }
.narrow #map { inset: 0; }
.float-top { display: none; }
.narrow .float-top { position: absolute; left: 12px; right: 12px; top: calc(12px + env(safe-area-inset-top)); z-index: 1000; display: flex; align-items: flex-start; gap: 8px; pointer-events: none; }
.float-top > * { pointer-events: auto; }
.fbtn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .1); background: rgba(22, 18, 54, .9);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: #fff; display: grid; place-items: center; flex: none; }
.fbtn .ic { font-size: 22px; font-variation-settings: "FILL" 0, "wght" 600; }
.narrow .search { flex: 1 1 auto; margin: 0; min-width: 0; }
.narrow .search-box { height: 48px; background: rgba(22, 18, 54, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); padding: 0 16px; }
.narrow .results { top: 54px; }
.needs-pill { height: 48px; padding: 0 14px; border-radius: 999px; background: var(--gold); color: #2A1D00; font-size: 14.5px; font-weight: 800; display: flex; align-items: center; gap: 6px; flex: none; }
.needs-pill .ic { font-size: 19px; }
.dock { display: none; }
.narrow .dock { position: absolute; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 1000; max-width: calc(100% - 24px);
  display: flex; gap: 2px; padding: 7px; border-radius: 28px; background: rgba(22, 18, 54, .94); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 20px 50px rgba(0, 0, 0, .5); overflow-x: auto; }
.dock .tool { width: 74px; flex: none; padding: 7px 2px; border-radius: 20px; gap: 5px; }
.dock .tool .sq { width: 36px; height: 36px; border-radius: 50%; color: #fff; }
.dock .tool .sq .ic { font-size: 19px; }
.dock .tool span:last-child { font-size: 11px; white-space: nowrap; }
.narrow .panel { top: auto; right: auto; left: 50%; bottom: calc(102px + env(safe-area-inset-bottom)); width: calc(100% - 24px); max-height: 46vh; transform: translateX(-50%);
  border-radius: 28px; border: 1px solid var(--line); box-shadow: 0 30px 70px rgba(0, 0, 0, .55); }
.narrow .panel.idle { display: none; }
.narrow .panel-scroll { padding: 18px; gap: 18px; }
.narrow .hint { top: calc(72px + env(safe-area-inset-top)); left: 50%; }
.narrow .mapctl { right: 12px; bottom: calc(110px + env(safe-area-inset-bottom)); }
.narrow.sheet-open .mapctl { display: none; }
.narrow .loading-roads { left: 12px; bottom: calc(110px + env(safe-area-inset-bottom)); }
.narrow .leaflet-bottom.leaflet-left { bottom: calc(96px + env(safe-area-inset-bottom)); }
.narrow .toast { top: calc(72px + env(safe-area-inset-top)); }
.narrow .leaflet-bottom.leaflet-right { bottom: calc(96px + env(safe-area-inset-bottom)); }

@media (max-width: 560px) {
  .home-top { padding: 16px; }
  .home-body { padding: 24px 16px 60px; }
  .points { padding: 24px; }
  .points .big { font-size: 52px; }
  .signin-top { padding: 18px 16px; }
  .row .end { width: 100%; justify-content: space-between; padding-left: 56px; }
  .tallies { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); }
  .tally { min-width: 0; padding: 12px; }
  .tally b { font-size: 26px; }
  .home-top .actions { gap: 8px; }
}