:root {
  --blue: #0632b8;
  --yellow: #fff56a;
  --orange: #ff6500;
  --pink: #ec62e9;
  --cyan: #00bfe8;
  --ink: #111111;
  --paper: #fffdf8;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-width: 320px; min-height: 100%; margin: 0; }
body { overflow: hidden; color: var(--ink); background: #dce6d6; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.35; }
button, input { font: inherit; }
a { color: inherit; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.today-main, .today-explorer, .today-map-shell { width: 100%; height: 100svh; min-height: 100svh; height: 100dvh; min-height: 100dvh; margin: 0; }
.today-map-shell { position: relative; overflow: hidden; background: #dce6d6; }
.today-map { position: absolute; inset: 0; }
.today-map .maplibregl-canvas { outline: none; }
.map-credit { position: fixed; z-index: 4; top: calc(14px + env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); margin: 0; color: rgb(17 17 17 / .58); font-size: 9px; line-height: 1; pointer-events: auto; }
.map-credit a { color: inherit; text-decoration: none; }
.map-credit a:hover { color: var(--blue); text-decoration: underline; }

.today-controls { position: fixed; z-index: 5; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); left: auto; display: flex; width: min(760px, calc(100vw - 216px)); max-height: min(35dvh, 188px); align-content: center; align-items: center; flex-wrap: wrap; gap: 7px; padding: 10px; overflow: auto; overscroll-behavior: contain; border: 1px solid rgb(17 17 17 / .14); border-radius: 14px; background: rgb(255 253 248 / .93); box-shadow: 0 5px 24px rgb(17 17 17 / .12); backdrop-filter: blur(16px); scrollbar-width: none; }
.today-controls::-webkit-scrollbar, .time-rail::-webkit-scrollbar, .category-filters::-webkit-scrollbar { display: none; }
.map-utility, .map-status, .time-button, .filter-button, .today-language { flex: 0 0 auto; min-height: 34px; border: 1px solid rgb(17 17 17 / .21); border-radius: 8px; background: rgb(255 253 248 / .88); color: var(--ink); font-size: 12px; line-height: 1; }
.map-utility { display: inline-flex; align-items: center; padding: 0 10px; color: var(--blue); font-weight: 700; text-decoration: none; }
.map-utility:hover { border-color: var(--blue); }
.map-weekly-link--mobile, .map-controls-toggle { display: none; }
.map-status { display: inline-flex; align-items: center; padding: 0 9px; border-color: transparent; background: transparent; color: var(--blue); font-size: 10px; font-weight: 800; letter-spacing: .075em; text-transform: uppercase; }
.time-rail, .category-filters { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; flex-wrap: wrap; }
.time-button, .filter-button { appearance: none; padding: 0 11px; cursor: pointer; }
.time-button { font-weight: 700; }
.time-button:hover, .filter-button:hover { border-color: var(--blue); color: var(--blue); }
.time-button[aria-pressed="true"] { border-color: var(--blue); background: var(--blue); color: var(--paper); }
.filter-button[aria-pressed="true"] { border-color: var(--yellow); background: var(--yellow); color: var(--ink); }
.today-language { display: inline-flex; align-items: center; gap: 4px; color: var(--ink); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.today-language button { appearance: none; padding: 5px 1px; border: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; }
.today-language button[aria-pressed="true"] { color: var(--blue); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.map-language { position: absolute; z-index: 6; top: calc(12px + env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); gap: 2px; min-height: 34px; padding: 3px; border: 1px solid rgb(17 17 17 / .18); border-radius: 999px; background: rgb(255 253 248 / .94); box-shadow: 0 4px 14px rgb(17 17 17 / .10); backdrop-filter: blur(10px); pointer-events: auto; }
.map-language > span { display: none; }
.map-language button { min-width: 28px; min-height: 26px; padding: 0 6px; border-radius: 999px; }
.map-language button[aria-pressed="true"] { background: var(--blue); color: var(--paper); text-decoration: none; }
.map-key-toggle { position: absolute; z-index: 6; top: calc(12px + env(safe-area-inset-top)); right: calc(max(12px, env(safe-area-inset-right)) + 94px); display: grid; width: 34px; height: 34px; padding: 0; place-items: center; border: 1px solid rgb(17 17 17 / .18); border-radius: 50%; background: rgb(255 253 248 / .94); box-shadow: 0 4px 14px rgb(17 17 17 / .10); color: var(--blue); cursor: pointer; font-size: 17px; font-weight: 800; line-height: 1; }
.map-game-toggle { position: absolute; z-index: 6; top: calc(12px + env(safe-area-inset-top)); right: calc(max(12px, env(safe-area-inset-right)) + 136px); display: grid; width: 34px; height: 34px; padding: 0 0 0 2px; place-items: center; border: 1px solid rgb(17 17 17 / .18); border-radius: 50%; background: var(--yellow); box-shadow: 0 4px 14px rgb(17 17 17 / .10); color: var(--blue); cursor: pointer; font-size: 13px; font-weight: 800; line-height: 1; }
.map-game-toggle:hover { border-color: var(--blue); transform: scale(1.05); }
.map-game-toggle:disabled { cursor: wait; opacity: .65; }
.map-key { position: absolute; z-index: 7; top: calc(58px + env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); width: min(252px, calc(100vw - 24px)); margin: 0; padding: 12px; border: 1px solid rgb(17 17 17 / .15); border-radius: 14px; background: rgb(255 253 248 / .96); box-shadow: 0 7px 22px rgb(17 17 17 / .14); color: var(--ink); opacity: 0; pointer-events: none; transform: translateY(-6px); transition: opacity .2s ease, transform .2s ease, visibility .2s ease; visibility: hidden; }
.map-key[data-open="true"] { opacity: 1; pointer-events: auto; transform: translateY(0); visibility: visible; }
.map-key__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.map-key__head p { margin: 0; color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: .075em; text-transform: uppercase; }
.map-key__close { display: grid; width: 26px; height: 26px; padding: 0; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; font-size: 19px; line-height: 1; }
.map-key__close:hover { background: rgb(17 17 17 / .07); }
.map-key__list { display: grid; gap: 7px; margin: 11px 0 0; padding: 0; list-style: none; }
.map-key__list li { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; line-height: 1.2; }
.map-key__icon { display: grid; width: 23px; height: 23px; flex: 0 0 23px; place-items: center; border: 1px solid var(--paper); border-radius: 50%; box-shadow: 0 1px 0 1px rgb(17 17 17 / .11); color: var(--ink); font-size: 12px; line-height: 1; }
.map-key__icon--move { background: var(--cyan); }
.map-key__icon--make { background: var(--pink); }
.map-key__icon--listen { background: var(--orange); }
.map-key__icon--meet { background: var(--yellow); }
.map-key__icon--cluster { background: var(--blue); color: var(--paper); font-size: 17px; }
.time-button:focus-visible, .filter-button:focus-visible, .today-language button:focus-visible, .map-utility:focus-visible, .map-controls-toggle:focus-visible, .map-key-toggle:focus-visible, .map-game-toggle:focus-visible, .map-key__close:focus-visible, .event-pin:focus-visible, .event-cluster:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }

.maplibregl-popup { z-index: 7; }
.maplibregl-popup-content { min-width: 214px; max-width: 255px; padding: 14px 16px 15px; border: 1px solid rgb(17 17 17 / .22); border-radius: 8px; background: var(--paper); box-shadow: 0 8px 22px rgb(17 17 17 / .18); color: var(--ink); font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.3; }
.maplibregl-popup-content strong { display: block; margin-top: 4px; color: var(--blue); font-size: 17px; letter-spacing: -.035em; }
.maplibregl-popup-content p { margin: 8px 0 0; }
.maplibregl-popup-content .popup-price { color: #555; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.maplibregl-popup-content a { display: inline-block; margin-top: 10px; color: var(--blue); font-weight: 700; }
.maplibregl-popup-close-button { width: 26px; height: 26px; border-radius: 0 8px 0 6px; color: var(--ink); font-size: 18px; line-height: 22px; }
.maplibregl-popup-tip { border-top-color: var(--paper) !important; }
.cluster-popup-list { display: grid; gap: 6px; margin-top: 10px; }
.cluster-popup-item { width: 100%; padding: 8px 9px; border: 1px solid rgb(17 17 17 / .16); border-radius: 6px; background: rgb(255 255 255 / .72); color: var(--ink); cursor: pointer; font: inherit; text-align: left; }
.cluster-popup-item:hover { border-color: var(--blue); color: var(--blue); }
.cluster-popup-item span { display: block; font-size: 12px; font-weight: 700; line-height: 1.2; }
.cluster-popup-item small { display: block; margin-top: 3px; color: #555; font-size: 10px; font-weight: 700; }
.event-pin, .event-cluster { display: block; padding: 0; overflow: visible; appearance: none; background: transparent; border: 0; cursor: pointer; }
/* MapLibre positions each marker root with its own transform. Keeping these
   roots absolute prevents the visual buttons from entering normal page flow
   on mobile, where that would pull later pins far south of their venue. */
.event-pin.maplibregl-marker, .event-cluster.maplibregl-marker { position: absolute; top: 0; left: 0; }
.event-pin { display: grid; width: 44px; height: 44px; place-items: center; }
.event-pin__orb { display: grid; place-items: center; width: 38px; height: 38px; border: 2px solid var(--paper); border-radius: 50%; background: var(--blue); box-shadow: 0 2px 0 2px rgb(17 17 17 / .11), 0 3px 10px rgb(17 17 17 / .14); color: var(--paper); font-size: 16px; font-weight: 700; }
.event-pin__label { position: absolute; top: 50%; left: 40px; display: block; max-width: 154px; padding: 6px 9px; overflow: hidden; border: 1px solid rgb(17 17 17 / .22); border-radius: 6px; background: rgb(255 253 248 / .96); box-shadow: 0 2px 7px rgb(17 17 17 / .12); color: var(--ink); font-size: 11px; font-weight: 700; line-height: 1.1; text-align: left; text-overflow: ellipsis; transform: translateY(-50%); white-space: nowrap; }
.event-pin.is-compact .event-pin__label { display: none; }
.event-pin.pin-move .event-pin__orb { background: var(--cyan); color: var(--ink); }
.event-pin.pin-make .event-pin__orb { background: var(--pink); color: var(--ink); }
.event-pin.pin-listen .event-pin__orb { background: var(--orange); color: var(--ink); }
.event-pin.pin-meet .event-pin__orb { background: var(--yellow); color: var(--ink); }
.event-pin.is-selected .event-pin__orb { background: var(--blue); box-shadow: 0 0 0 4px var(--yellow), 0 4px 14px rgb(17 17 17 / .25); color: var(--paper); }
.event-cluster { display: grid; width: 44px; height: 44px; place-items: center; }
.event-cluster__disc { position: relative; display: grid; width: 36px; height: 36px; place-items: center; border: 2px solid var(--paper); border-radius: 50%; background: var(--blue); box-shadow: 0 2px 0 2px rgb(17 17 17 / .11), 0 3px 10px rgb(17 17 17 / .14); }
.event-cluster__mark { color: var(--paper); font-size: 25px; line-height: .5; transform: translateY(-1px); }
.event-cluster__count { position: absolute; top: -8px; right: -9px; display: grid; min-width: 20px; height: 20px; padding: 0 4px; place-items: center; border: 2px solid var(--paper); border-radius: 999px; background: var(--yellow); color: var(--blue); font-size: 10px; font-weight: 800; line-height: 1; }
.event-cluster__label { position: absolute; top: 50%; left: 42px; display: block; min-width: max-content; max-width: 168px; padding: 6px 9px; overflow: hidden; border: 1px solid rgb(17 17 17 / .22); border-radius: 6px; background: rgb(255 253 248 / .96); box-shadow: 0 2px 7px rgb(17 17 17 / .12); color: var(--ink); font-size: 11px; font-weight: 700; line-height: 1.1; text-align: left; text-overflow: ellipsis; transform: translateY(-50%); white-space: nowrap; }
.event-cluster.is-compact .event-cluster__label { display: none; }
.event-cluster.is-selected .event-cluster__disc { box-shadow: 0 0 0 4px var(--yellow), 0 4px 14px rgb(17 17 17 / .25); }

@media (max-width: 700px) {
  .today-controls { right: 12px; bottom: calc(64px + env(safe-area-inset-bottom)); left: auto; display: flex; width: min(340px, calc(100vw - 24px)); max-height: min(62dvh, 490px); min-height: 0; padding: 12px; align-content: flex-start; align-items: flex-start; flex-wrap: wrap; gap: 8px; overflow-x: hidden; overflow-y: auto; border-radius: 14px; opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity .18s ease, transform .18s ease, visibility .18s ease; visibility: hidden; }
  .today-controls[data-expanded="true"] { opacity: 1; pointer-events: auto; transform: translateY(0); visibility: visible; }
  .map-weekly-link--desktop { display: none; }
  .map-weekly-link--mobile { position: fixed; z-index: 6; bottom: calc(12px + env(safe-area-inset-bottom)); left: max(12px, env(safe-area-inset-left)); display: inline-flex; min-height: 42px; padding: 0 13px; border-radius: 999px; background: rgb(255 253 248 / .96); box-shadow: 0 4px 14px rgb(17 17 17 / .14); }
  .map-controls-toggle { position: fixed; z-index: 6; right: max(12px, env(safe-area-inset-right)); bottom: calc(12px + env(safe-area-inset-bottom)); display: inline-flex; min-height: 42px; align-items: center; gap: 7px; padding: 0 14px; border: 1px solid var(--blue); border-radius: 999px; background: var(--blue); box-shadow: 0 4px 14px rgb(17 17 17 / .16); color: var(--paper); cursor: pointer; font-size: 12px; font-weight: 800; line-height: 1; }
  .map-controls-toggle__icon { display: grid; width: 16px; place-items: center; font-size: 18px; font-weight: 400; line-height: 1; }
  .map-utility, .map-status, .time-button, .filter-button, .today-language { min-height: 33px; }
  .map-status { display: flex; width: 100%; min-height: 20px; padding: 0 1px 4px; }
  .time-rail, .category-filters { width: 100%; flex: 1 0 100%; align-items: flex-start; flex-wrap: wrap; }
  .time-rail { padding-bottom: 8px; border-bottom: 1px solid rgb(17 17 17 / .10); }
  .event-pin__label, .event-cluster__label { max-width: 134px; }
}

@media (min-width: 521px) {
  .map-language { top: 16px; right: 16px; }
  .map-key-toggle { top: 16px; right: 110px; }
  .map-game-toggle { top: 16px; right: 152px; }
  .map-key { top: 62px; right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}