/* The radar (/radar): a full-screen dark map with glowing points of the night and the cards below. */
.radar { position: fixed; inset: 0; background: var(--bg); overflow: hidden; }
.radar__map { position: absolute; inset: 0; }
.radar__map .maplibregl-ctrl-attrib { background: rgba(10,10,9,.7); color: var(--text3); font: 10px/1.4 Onest, sans-serif; }
.radar__map .maplibregl-ctrl-attrib a { color: var(--text3); }
.radar__top { position: absolute; left: 0; right: 0; top: 0; padding: max(12px, env(safe-area-inset-top)) 16px 0; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.radar__top > * { pointer-events: auto; }
.radar__logo { font-size: 20px; width: max-content; text-shadow: 0 2px 12px rgba(0,0,0,.8); }
.radar__chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.radar__chips::-webkit-scrollbar { display: none; }
.chip { flex: none; border: 1px solid var(--line); background: rgba(10,10,9,.82); color: var(--text); border-radius: 999px; padding: 9px 14px; font: 700 14px/1 Onest, sans-serif; cursor: pointer; backdrop-filter: blur(8px); }
.chip.is-on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.radar__locate { position: absolute; right: 12px; bottom: 236px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: rgba(10,10,9,.85); color: var(--text); display: grid; place-items: center; cursor: pointer; }
.radar__info { position: absolute; right: 12px; bottom: 290px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: rgba(10,10,9,.85); color: var(--text2); font: 700 15px/1 "Geist Mono", monospace; cursor: pointer; }
.radar__info[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); }
.radar__legend { position: absolute; right: 12px; bottom: 334px; display: grid; gap: 8px; padding: 12px 14px; border-radius: 12px; background: rgba(10,10,9,.92); border: 1px solid var(--line); font-size: 11px; text-transform: uppercase; color: var(--text2); backdrop-filter: blur(8px); }
.radar__legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); margin-right: 8px; vertical-align: middle; position: relative; }
.radar__legend .dot--live::after { content: ''; position: absolute; left: 3px; top: 3px; width: 4px; height: 4px; border-radius: 50%; background: var(--live); }
.radar__legend .dot--hot { box-shadow: 0 0 0 2px rgba(255,61,139,.6); }
.radar__legend .dot--me { background: #4FC3F7; border: 2px solid #fff; width: 8px; height: 8px; }
.radar__bottom { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 0 max(14px, env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(10,10,9,0) 0%, rgba(10,10,9,.92) 40%); }
/* Centred over the cards, a little higher, line breaks kept from the text (owner, 21.10.2026). */
.radar__empty { margin: 0 16px 14px; color: var(--text2); font-size: 12px; line-height: 1.5; text-align: center; white-space: pre-line; }
/* Side padding of half a screen minus half a card: the first and the last card can sit in the middle too. */
.radar__cards { display: flex; gap: 10px; overflow-x: auto; padding: 0 max(16px, calc(50% - 136px)); scroll-snap-type: x mandatory; scrollbar-width: none; }
.radar__cards::-webkit-scrollbar { display: none; }
.rcard { flex: none; width: 272px; scroll-snap-align: center; display: grid; grid-template-columns: 88px 1fr; gap: 12px; background: var(--bg2); border: 1px solid var(--line); border-radius: 16px; padding: 10px; color: inherit; text-decoration: none; transition: border-color .2s; }
.rcard.is-on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 8px 24px rgba(0,0,0,.5); }
.rcard__art { width: 88px; height: 112px; border-radius: 10px; object-fit: cover; background: var(--bg3); }
.rcard__body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rcard__time { font-size: 11px; color: var(--text2); text-transform: uppercase; letter-spacing: .02em; }
.rcard__time b { color: var(--accent); font-weight: 500; }
.rcard__title { margin: 0; font: 800 16px/1.1 Onest, sans-serif; text-transform: uppercase; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rcard__venue { font-size: 12px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rcard__meta { margin-top: auto; display: flex; gap: 8px; align-items: center; font-size: 11px; color: var(--text2); }
.rcard__hot { color: var(--live); font-weight: 700; }
.rcard__going { color: var(--accent); }

/* Pins: every party is a lime dot that grows with heat; a night that is on right now gets a pink core that blinks,
   a hot pulse adds a pink ring breathing around it. */
.pin { position: relative; width: 0; height: 0; cursor: pointer; }
.pin__dot { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: var(--size, 20px); height: var(--size, 20px); border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); box-shadow: 0 0 0 1px rgba(198,255,61,.35), 0 0 14px rgba(198,255,61,.35); transition: transform .2s; }
.pin__core { position: absolute; left: 50%; top: 50%; width: calc(var(--size, 20px) * .42); height: calc(var(--size, 20px) * .42); border-radius: 50%; background: var(--live); transform: translate(-50%, -50%); display: none; box-shadow: 0 0 8px var(--live); }
.pin--live .pin__core { display: block; animation: blink 1.1s ease-in-out infinite; }
/* A live night breathes: a soft lime halo swelling around the dot, seen from the corner of the eye on a zoomed-out map. */
.pin__halo { position: absolute; left: 50%; top: 50%; width: calc(var(--size, 20px) * 2.6); height: calc(var(--size, 20px) * 2.6); border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(198,255,61,.45) 0%, rgba(198,255,61,.12) 45%, rgba(198,255,61,0) 70%); display: none; pointer-events: none; }
.pin--live .pin__halo { display: block; animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: translate(-50%, -50%) scale(.8); opacity: .7; } 50% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; } }
@keyframes blink { 0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 50% { opacity: .35; transform: translate(-50%, -50%) scale(.7); } }
.pin__ring { position: absolute; left: 50%; top: 50%; width: var(--size, 20px); height: var(--size, 20px); border-radius: 50%; transform: translate(-50%, -50%); border: 2px solid var(--live); opacity: 0; }
.pin--hot .pin__ring { animation: ring 1.6s ease-out infinite; }
.pin--hot .pin__ring:nth-child(2) { animation-delay: .8s; }
@keyframes ring { 0% { transform: translate(-50%, -50%) scale(1); opacity: .9; } 100% { transform: translate(-50%, -50%) scale(2.8); opacity: 0; } }
.pin__count { position: absolute; left: calc(50% + var(--size, 20px) / 2 - 7px); top: calc(50% - var(--size, 20px) / 2 - 8px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--text); color: var(--bg); font: 700 11px/18px Onest, sans-serif; text-align: center; }
/* The name is part of the tap target (padding makes it a comfortable one), not just the dot. */
.pin__label { position: absolute; left: 50%; top: calc(50% + var(--size, 20px) / 2); transform: translateX(-50%); padding: 4px 8px 6px; white-space: nowrap; font: 500 10px/1 "Geist Mono", monospace; letter-spacing: .04em; text-transform: uppercase; color: var(--text); text-shadow: 0 1px 4px #000, 0 0 10px #000; cursor: pointer; }
/* A finger-sized hit area around the dot itself. */
.pin::before { content: ''; position: absolute; left: 50%; top: 50%; width: max(44px, calc(var(--size, 20px) + 16px)); height: max(44px, calc(var(--size, 20px) + 16px)); transform: translate(-50%, -50%); border-radius: 50%; }
/* The tapped pin: half as big again, a white ring, the name in lime and bold, above the others. */
.pin.is-on { z-index: 5; }
.pin.is-on .pin__dot { transform: translate(-50%, -50%) scale(1.5); box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--text), 0 0 22px rgba(198,255,61,.7); }
.pin.is-on .pin__label { color: var(--accent); font-weight: 700; font-size: 11px; top: calc(50% + var(--size, 20px) * .75 + 4px); }
.pin.is-on .pin__count { transform: translate(4px, -4px); }
.pin.is-off { opacity: .45; }
.me { position: relative; width: 16px; height: 16px; border-radius: 50%; background: #4FC3F7; border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 0 12px rgba(79,195,247,.8); }
.me::before { content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; border-radius: 50%; transform: translate(-50%, -50%); background: rgba(79,195,247,.35); animation: ring 2.4s ease-out infinite; }
.rcard__walk { color: var(--text2); }
.radar__locate.is-on { color: #4FC3F7; border-color: #4FC3F7; }
@media (min-width: 900px) {
  .radar__top { padding: 20px 24px 0; }
  .radar__info { right: 24px; }
  .radar__legend { right: 24px; }
  .radar__bottom { left: 24px; right: 24px; }
  .rcard { width: 320px; }
  .radar__cards { padding: 0 max(16px, calc(50% - 160px)); }
}

/* Inside the app (?embed=1): no wordmark, the app has its own header; links open in a new tab. */
.radar--embed .radar__top { padding-top: 10px; }