/* The drill-down map (Scripts/v2/drillmap.js) - approved mock docs/design/pages-h/W1_MapTags.html, with the old site's curled
   teardrop pins at city level. Niche-agnostic: words, categories and their colours come from the page's profile (the script
   writes the category gradients and sets --dm-tag / --dm-tag-hot on the root). Depends on tokens.css, components.css and
   map.css (city search box, hover cards). Desktop: top panel (slides down once), then the list beside the map, together
   filling the screen under the header. Phones (<= 900px): the list first, the map full screen behind a "Map" button. */

.cg-mw { --dm-tag: #3d0f24; --dm-tag-hot: #d0157a; --cg-mw-header: 77px;
  display: flex; flex-direction: column; height: calc(100vh - var(--cg-mw-header)); height: calc(100dvh - var(--cg-mw-header)); min-height: 680px; background: var(--ground); }

/* ---- The drop panel: slides down once on first load (grid rows 0fr -> 1fr, 350ms) ----------------------------------- */
.cg-mw-drop { flex: none; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s cubic-bezier(.2, .7, .2, 1); }
.cg-mw-drop.is-open, body:not(.cg-js) .cg-mw-drop { grid-template-rows: 1fr; }
.cg-mw-drop__in { min-height: 0; overflow: hidden; }
.cg-mw-drop__body { opacity: 0; transform: translateY(-14px); transition: opacity .3s ease .05s, transform .35s cubic-bezier(.2, .7, .2, 1); }
.cg-mw-drop.is-open .cg-mw-drop__body, body:not(.cg-js) .cg-mw-drop__body { opacity: 1; transform: none; }
.cg-mw-explore { background: var(--surface-warm); border-bottom: 1px solid var(--border); }
.cg-mw-explore .cg-wrap { display: flex; flex-direction: column; gap: 10px; padding-block: 16px 12px; }
.cg-mw-intro { display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.cg-mw-intro__t { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 4px; }
.cg-mw-h1 { margin: 0; font: italic var(--w-regular) 38px/1.02 var(--font-display); letter-spacing: -.015em; color: var(--heading, var(--ink)); }
.cg-mw-lead { margin: 0; font-size: 16px; color: var(--ink-caption); }
.cg-mw-lead b { color: var(--ink); font-weight: var(--w-strong); }
.cg-mw-intro .cg-mp-city { width: 340px; max-width: 100%; background: var(--surface); }
.cg-mw .cg-mp-cities li { justify-content: space-between; gap: 12px; }
.cg-mw .cg-mp-cities li small { font-size: 13px; color: var(--ink-caption); font-weight: var(--w-strong); }
.cg-mw-hide { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 46px; padding: 0 16px; border: 0; border-radius: var(--radius-pill);
  background: none; color: var(--ink-caption); font: var(--w-strong) 14px/1 var(--font-sans); cursor: pointer; }
.cg-mw-hide:hover { background: var(--surface-warm-strong); color: var(--ink); }
body:not(.cg-js) .cg-mw-hide { display: none; }
.cg-mw-tabs { display: flex; gap: 2px; margin: 0 -14px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--border); }
.cg-mw-tabs::-webkit-scrollbar { display: none; }
.cg-mw-tabs:empty { display: none; }
/* world and area levels: the region tabs come with the first levels answer - their row is kept free so the chips do not move */
.cg-js .cg-mw:not([data-cg-level="city"]) .cg-mw-tabs:empty { display: flex; min-height: 47px; }
.cg-mw-tab { flex: none; display: inline-flex; align-items: baseline; gap: 7px; padding: 10px 14px 11px; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px;
  background: none; color: var(--ink-caption); font: var(--w-strong) 15px/1.2 var(--font-sans); cursor: pointer; white-space: nowrap; }
.cg-mw-tab small { font-size: 12px; font-weight: var(--w-strong); color: var(--ink-caption); opacity: .8; }
.cg-mw-tab:hover { color: var(--ink); border-bottom-color: var(--border); }
.cg-mw-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.cg-mw-tab:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; border-radius: 6px; }
.cg-mw-chipwrap { overflow: hidden; transition: height .28s cubic-bezier(.2, .7, .2, 1); }
.cg-mw-chips { list-style: none; margin: 0; padding: 4px 0 2px; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px 8px; }
.cg-body a.cg-mw-chip { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 34px; padding: 0 12px; border-radius: var(--radius-pill);
  background: var(--surface); color: var(--ink); font-size: 14px; font-weight: var(--w-strong); border: 1px solid var(--border); }
.cg-body a.cg-mw-chip:hover { border-color: var(--accent); color: var(--ink); }
.cg-mw-chip__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cg-mw-chip__n { flex: none; font-size: 13px; color: var(--ink-caption); }
.cg-mw-chips.is-in li { animation: cg-mw-in .32s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 9ms); }
@keyframes cg-mw-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cg-mw-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--ink-caption); }
.cg-body .cg-mw-foot a { font-weight: var(--w-strong); }
.cg-mw-more { display: none; }
.cg-mw-show { flex: none; display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 6px var(--gutter); background: var(--surface-warm); border-bottom: 1px solid var(--border); }
.cg-mw-show.is-on { display: flex; }
body:not(.cg-js) .cg-mw-show { display: none; }
/* The phone list's top bar and badge row: rendered by the page (MapV2.cshtml) so their room is there before drillmap.js fills them.
   The child areas too (area levels, filled by the page): phones list them above "Recently updated", desktop has the map's tags. */
.cg-mw-pbar, .cg-mw-pcats, .cg-mw-kids { display: none; }

/* ---- Main: list beside the map ---------------------------------------------------------------------------------------- */
.cg-mw-main { flex: 1; min-height: 420px; display: grid; grid-template-columns: 420px minmax(0, 1fr); }
.cg-mw-side { min-height: 0; overflow-y: auto; background: var(--surface); border-right: 1px solid var(--border); padding: 18px 20px 28px; display: flex; flex-direction: column; gap: 10px; }
.cg-mw-side__h { display: flex; flex-direction: column; gap: 2px; }
.cg-mw-side__h h1, .cg-mw-side__h h2 { margin: 0; font: italic var(--w-regular) 28px/1.1 var(--font-display); color: var(--heading, var(--ink)); overflow-wrap: anywhere; }
.cg-mw-side__sub { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 34px; font-size: 13px; font-weight: var(--w-strong); color: var(--ink-caption); }
.cg-mw-sort { height: 34px; padding: 0 30px 0 12px; border: 1.5px solid var(--border); border-radius: var(--radius-pill); background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237a4a5e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center;
  -webkit-appearance: none; appearance: none; font: var(--w-strong) 13px/1 var(--font-sans); color: var(--ink); cursor: pointer; }
.cg-mw-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cg-mw-list > li + li { border-top: 1px solid var(--border); }
.cg-mw-list__empty { padding: 18px 6px; color: var(--ink-caption); }
.cg-body a.cg-mw-card { position: relative; display: flex; gap: 14px; padding: 14px 6px; border-radius: var(--radius-m); color: var(--ink); }
.cg-body a.cg-mw-card:hover, .cg-mw-list li.is-hot a.cg-mw-card { background: var(--surface-soft); color: var(--ink); }
.cg-mw-thumb { position: relative; flex: none; display: block; overflow: hidden; width: 88px; height: 88px; border-radius: 14px; background: var(--surface-soft); }
.cg-mw-thumb > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.cg-mw-thumb .cg-thumb__pin { width: 14px; height: 14px; margin: -7px 0 0 -7px; border-width: 2.5px; }
.cg-mw-card .cg-catbadge { left: 6px; bottom: 6px; width: 32px; height: 32px; border-radius: 10px; }
.cg-mw-card .cg-catbadge .cg-icon { width: 19px; height: 19px; }
.cg-mw-card__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cg-mw-card__name { display: flex; align-items: flex-start; gap: 8px; font-size: 16px; font-weight: var(--w-strong); line-height: 1.3; overflow-wrap: anywhere; }
.cg-mw-card__meta { font-size: 13px; color: var(--ink-caption); line-height: 1.35; overflow-wrap: anywhere; }
.cg-mw-card__desc { margin: 2px 0 0; font-size: 14px; line-height: 1.45; color: var(--ink-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.cg-mw-card__foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; font-size: 12px; color: var(--ink-caption); }
.cg-mw-when { color: var(--ink-caption); }
.cg-mw-when--old { opacity: .8; }
.cg-mw-stars { color: var(--accent); letter-spacing: 1px; }
.cg-mw-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 6px; font-size: 13px; font-weight: var(--w-strong); color: var(--ink-caption); }
.cg-mw-pager__btns { display: flex; gap: 8px; }
.cg-mw-pager button[disabled] { opacity: .4; cursor: default; }
.cg-mw-note { margin: 0; font-size: 13px; color: var(--ink-caption); }

/* Numbers on the list cards: the category colour (written per profile category as .cg-dm-c--{key}) */
.cg-mw-num { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px;
  color: #fff; background: #5c5560; font: var(--w-strong) 12px/1 var(--font-sans); }
.cg-mw-card .cg-mw-num { margin-top: -1px; }
.cg-mw-card .cg-mw-num--off { background: none; color: var(--ink-caption); box-shadow: inset 0 0 0 1.5px var(--border); }
.cg-mw-nopin { color: var(--ink-caption); font-style: italic; }

/* the base map: calm (map.css), and dark in a dark theme (its --map-tile-filter-calm) */
.cg-mw .cg-mp-map .leaflet-tile-pane { filter: var(--map-tile-filter-calm, saturate(.25) brightness(1.06) contrast(.92) sepia(.12)); }

/* ---- Area tags: speech-bubble labels "Name  count", the tail tip on the area's point ------------------------------------ */
.cg-mp-map .cg-mw-tagicon { overflow: visible; }
.cg-mp-map .cg-mw-tag { position: absolute; left: 0; bottom: 7px; transform: translateX(calc(-50% + var(--dx, 0px))); display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap;
  padding: 5px 9px; border-radius: 8px; background: var(--dm-tag); color: #fff; font: var(--w-strong) 13px/1.2 var(--font-sans); cursor: pointer;
  box-shadow: 0 4px 12px -2px rgba(40, 10, 25, .35); transition: background .12s ease, transform .12s ease; }
.cg-mp-map .cg-mw-tag--w { font-size: 15px; }
.cg-mp-map .cg-mw-tag::after { content: ""; position: absolute; left: calc(50% - var(--dx, 0px)); top: 100%; margin-left: -7px; border: 7px solid transparent; border-bottom: 0; border-top-color: var(--dm-tag); transition: border-color .12s ease; }
.cg-mp-map .cg-mw-tag--below { bottom: auto; top: 7px; }
.cg-mp-map .cg-mw-tag--below::after { top: auto; bottom: 100%; border: 7px solid transparent; border-top: 0; border-bottom-color: var(--dm-tag); }
.cg-mp-map .leaflet-marker-icon:hover .cg-mw-tag--below::after, .cg-mp-map .leaflet-marker-icon:focus-visible .cg-mw-tag--below::after { border-top-color: transparent; border-bottom-color: var(--dm-tag-hot); }
.cg-mp-map .cg-mw-tag__n { font-weight: 400; opacity: .72; }
.cg-mp-map .cg-mw-tag__more { font-weight: 400; opacity: .72; font-size: .85em; }
.cg-mp-map .leaflet-marker-icon:hover .cg-mw-tag, .cg-mp-map .leaflet-marker-icon:focus-visible .cg-mw-tag { background: var(--dm-tag-hot); transform: translateX(calc(-50% + var(--dx, 0px))) translateY(-2px); }
.cg-mp-map .leaflet-marker-icon:hover .cg-mw-tag::after, .cg-mp-map .leaflet-marker-icon:focus-visible .cg-mw-tag::after { border-top-color: var(--dm-tag-hot); }
.cg-mp-map .leaflet-marker-icon.cg-mw-tagicon:focus, .cg-mp-map .leaflet-marker-icon.cg-dm-pinicon:focus { outline: none; }
.cg-mp-map .leaflet-marker-icon.cg-mw-tagicon:focus-visible .cg-mw-tag { outline: 2px solid #fff; outline-offset: 1px; }
.cg-mp-map .cg-mp-tip .cg-mp-tipbox, .cg-dm-tip .cg-mp-tipbox { min-width: 210px; max-width: 260px; }
/* the hover card (desktop): a layer of its own over every map control (breadcrumb, badges, hint, zoom), placed by
   drillmap.js showTip where it fits - above the tag, below, right or left - with its arrow on the tag */
.cg-dm-tip { position: absolute; z-index: 720; left: 0; top: 0; border-radius: 14px; background: var(--surface); color: var(--ink); pointer-events: none;
  box-shadow: 0 14px 34px -12px rgba(61, 15, 36, .45), 0 2px 6px rgba(61, 15, 36, .08); }
.cg-dm-tip[hidden] { display: none; }
.cg-dm-tip::after { content: ""; position: absolute; width: 12px; height: 12px; background: var(--surface); transform: rotate(45deg); border-radius: 2px; }
.cg-dm-tip--above::after { left: calc(var(--ax, 50%) - 6px); bottom: -5px; }
.cg-dm-tip--below::after { left: calc(var(--ax, 50%) - 6px); top: -5px; }
.cg-dm-tip--right::after { top: calc(var(--ay, 50%) - 6px); left: -5px; }
.cg-dm-tip--left::after { top: calc(var(--ay, 50%) - 6px); right: -5px; }
.cg-mp-tipbox .cg-mp-tipbox__sub { margin: -2px 0 6px; }
.cg-mp-map .leaflet-marker-icon.is-in { animation: cg-mw-pop .35s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes cg-mw-pop { from { opacity: 0; } to { opacity: 1; } }

/* ---- City level: every place is the old site's curled teardrop pin in its category colour (no numbers); crowded places
   merge into plum "+N" bubbles that split as the map zooms in; a bubble at the closest zoom fans out ------------------------ */
.cg-mp-map .cg-dm-pinicon { overflow: visible; }
.cg-dm-pin { position: absolute; left: -12px; bottom: 0; width: 24px; height: 41px; transform-origin: 50% 100%; transition: transform .14s ease; cursor: pointer;
  filter: drop-shadow(0 2px 2px rgba(40, 10, 25, .35)); }
.cg-dm-pin svg { position: relative; display: block; width: 24px; height: 41px; overflow: visible; }
.cg-dm-pin__body { fill: var(--c, #5c5560); stroke: #fff; stroke-width: 1.6; }
.cg-dm-pin__curl { fill: none; stroke: var(--c, #5c5560); stroke-width: 3.3; stroke-linecap: round; }
.cg-dm-pin__curl-edge { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; }
.cg-dm-pin__dot { fill: #fff; }
/* lit (its card hovered, its card open): lifted, with a pink ring round the head */
.cg-dm-pin::before { content: ""; position: absolute; left: -7px; top: 5px; width: 38px; height: 38px; box-sizing: border-box; border-radius: 50%;
  border: 3px solid var(--dm-tag-hot); background: rgba(208, 21, 122, .14); opacity: 0; transform: scale(.6); transition: opacity .14s ease, transform .14s ease; pointer-events: none; }
.cg-dm-pin__name { position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(calc(-50% + var(--lx, 0px))); display: none; padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--surface); color: var(--ink); font: var(--w-strong) 13px/1.3 var(--font-sans); white-space: nowrap; box-shadow: var(--shadow-card); pointer-events: none; }
.cg-mp-map .leaflet-marker-icon:hover .cg-dm-pin, .cg-mp-map .leaflet-marker-icon:focus-visible .cg-dm-pin { transform: scale(1.18); }
.cg-mp-map .cg-dm-pinicon.is-hot .cg-dm-pin { transform: translateY(-7px) scale(1.25); }
.cg-mp-map .cg-dm-pinicon.is-hot .cg-dm-pin::before { opacity: 1; transform: none; }
.cg-mp-map .leaflet-marker-icon:hover .cg-dm-pin__name, .cg-mp-map .leaflet-marker-icon:focus-visible .cg-dm-pin__name, .cg-mp-map .cg-dm-pinicon.is-hot .cg-dm-pin__name { display: block; transform: translateX(calc(-50% + var(--lx, 0px))) scale(.82); transform-origin: 50% 100%; }
/* near the controls over the map or its top edge the name goes under the pin tip (drillmap.js placeLabel) */
.cg-mp-map .cg-dm-pin--under .cg-dm-pin__name { bottom: auto; top: calc(100% + 6px); }
.cg-mp-map .leaflet-marker-icon .cg-dm-pin--under .cg-dm-pin__name { transform-origin: 50% 0; }
/* "+N": a plum count bubble (it grows gently with the count); hover = hot pink; it pulses and names the place when that
   place's card is hovered; open (fanned out) it shrinks to a hub for the legs */
.cg-mp-map .cg-dm-bubicon { overflow: visible; }
.cg-dm-bub { position: absolute; left: calc(var(--s, 34px) / -2); top: calc(var(--s, 34px) / -2); width: var(--s, 34px); height: var(--s, 34px); box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 2.5px solid #fff; background: var(--dm-tag); color: #fff; cursor: pointer;
  font: var(--w-strong) 13px/1 var(--font-sans); letter-spacing: -.01em; box-shadow: 0 3px 10px -2px rgba(40, 10, 25, .45); transition: background .12s ease, transform .12s ease; }
.cg-mp-map .cg-dm-bubicon:hover .cg-dm-bub, .cg-mp-map .cg-dm-bubicon:focus-visible .cg-dm-bub { background: var(--dm-tag-hot); transform: scale(1.08); }
.cg-mp-map .cg-dm-bubicon:focus { outline: none; }
.cg-mp-map .cg-dm-bubicon.is-hot .cg-dm-bub { background: var(--dm-tag-hot); animation: cg-dm-pulse 1.1s ease-out infinite; }
@keyframes cg-dm-pulse { 0% { box-shadow: 0 0 0 0 rgba(208, 21, 122, .55); } 100% { box-shadow: 0 0 0 16px rgba(208, 21, 122, 0); } }
.cg-dm-bub__inc { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--surface); color: var(--ink); font: var(--w-strong) 12.5px/1.3 var(--font-sans); white-space: nowrap; box-shadow: var(--shadow-card); pointer-events: none; }
.cg-dm-bub__inc[hidden] { display: none; }
.cg-mp-map .cg-dm-bubicon.is-open .cg-dm-bub { transform: scale(.36); background: var(--dm-tag-hot); animation: none; }
.cg-mp-map .cg-dm-bubicon.is-open .cg-dm-bub__n, .cg-mp-map .cg-dm-bubicon.is-open .cg-dm-bub__inc { visibility: hidden; }
/* while a bubble is fanned out, the rest of the map steps back */
.cg-mp-map .cg-dm-pinicon, .cg-mp-map .cg-dm-bubicon { transition: opacity .15s ease; }
.cg-mp-map.cg-dm-spreading .cg-dm-pinicon:not(.is-spread):not(.is-hot), .cg-mp-map.cg-dm-spreading .cg-dm-bubicon:not(.is-open) { opacity: .3; }
/* spiderfy: the bubble's places on a circle (a spiral for many), each with a leg back to the hub */
.cg-mp-map .cg-dm-leg { stroke: #7b5870; stroke-width: 1.5; stroke-opacity: .7; }
/* a pin's card (desktop click): the place and "Open"; placed like the hover card, but clickable */
.cg-dm-pop { pointer-events: auto; width: 300px; max-width: calc(100% - 16px); padding: 12px; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; }
.cg-dm-pop[hidden] { display: none; }
.cg-body a.cg-dm-pop__main { display: flex; gap: 12px; min-width: 0; color: var(--ink); padding-right: 22px; }
.cg-dm-pop .cg-mw-thumb { width: 72px; height: 72px; border-radius: 12px; }
.cg-dm-pop .cg-catbadge { left: 5px; bottom: 5px; width: 26px; height: 26px; border-radius: 8px; }
.cg-dm-pop .cg-catbadge .cg-icon { width: 16px; height: 16px; }
.cg-dm-pop__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cg-dm-pop__name { font: var(--w-strong) 15px/1.3 var(--font-sans); overflow-wrap: anywhere; }
.cg-dm-pop .cg-mw-card__foot { margin-top: 2px; }
.cg-dm-pop__x { position: absolute; z-index: 1; top: 6px; right: 6px; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--ink-caption); cursor: pointer; }
.cg-dm-pop__x:hover { background: var(--surface-soft); color: var(--ink); }
.cg-body a.cg-dm-pop__open { display: flex; align-items: center; justify-content: center; height: 38px; border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); font-size: 14px; }
.cg-body a.cg-dm-pop__open:hover { background: var(--accent-hover, var(--accent)); color: var(--on-accent); }
/* "Search as I move the map" / "Search this area": bottom centre of the map */
.cg-dm-mapbar { position: absolute; z-index: 650; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; pointer-events: none; white-space: nowrap; }
.cg-dm-mapbar[hidden], .cg-dm-mapbar.is-under { display: none; }
.cg-dm-follow { pointer-events: auto; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 12px; border-radius: var(--radius-pill); background: var(--surface);
  box-shadow: var(--shadow-card); font: var(--w-strong) 13px/1 var(--font-sans); color: var(--ink); cursor: pointer; }
.cg-dm-follow input { width: 16px; height: 16px; margin: 0; accent-color: var(--dm-tag-hot); cursor: pointer; }
.cg-dm-here { pointer-events: auto; height: 38px; padding: 0 18px; border: 0; border-radius: var(--radius-pill); background: var(--dm-tag); color: #fff; font: var(--w-strong) 14px/1 var(--font-sans);
  box-shadow: 0 6px 16px -6px rgba(40, 10, 25, .6); cursor: pointer; }
.cg-dm-here:hover { background: var(--dm-tag-hot); }
.cg-dm-here[hidden] { display: none; }
/* the list: "N places not on the map", "Show all on the map" */
.cg-mw-linkbtn { padding: 0; border: 0; background: none; color: var(--link, var(--accent)); font: inherit; font-weight: var(--w-strong); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.cg-mw-linkbtn:hover { color: var(--ink); }
.cg-mw-note .cg-mw-linkbtn { font-size: 14px; text-align: left; }

/* ---- Breadcrumb level selector over the map ---------------------------------------------------------------------------- */
.cg-mp-mapwrap { position: relative; min-width: 0; }
.cg-mw-over { position: absolute; z-index: 700; left: 16px; right: 16px; top: 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; pointer-events: none; }
.cg-mw-crumbs { pointer-events: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 2px; max-width: 100%; padding: 4px; border-radius: var(--radius-pill); background: var(--surface); box-shadow: var(--shadow-card); }
.cg-mw-crumbs:empty { display: none; }
.cg-mw-crumb { position: relative; display: flex; align-items: center; }
.cg-mw-crumb__go, .cg-mw-crumb__menu { display: inline-flex; align-items: center; gap: 4px; height: 36px; border: 0; background: none; color: var(--ink-caption);
  font: var(--w-strong) 14px/1 var(--font-sans); cursor: pointer; border-radius: var(--radius-pill); white-space: nowrap; }
.cg-mw-crumb__go { padding: 0 6px 0 12px; }
.cg-mw-crumb__go .cg-icon { color: var(--accent); }
.cg-mw-crumb__menu { padding: 0 8px 0 2px; }
.cg-mw-crumb__go:hover, .cg-mw-crumb__menu:hover, .cg-mw-crumb__menu[aria-expanded="true"] { background: var(--surface-soft); color: var(--ink); }
.cg-mw-crumb.is-here .cg-mw-crumb__go { color: var(--ink); }
.cg-mw-crumb + .cg-mw-crumb::before { content: ""; width: 7px; height: 7px; margin: 0 4px 0 2px; border-top: 2px solid var(--border-strong, #e3b9c8); border-right: 2px solid var(--border-strong, #e3b9c8); transform: rotate(45deg); }
.cg-mw-crumb--next .cg-mw-crumb__menu { color: var(--ink-caption); font-weight: var(--w-regular); padding: 0 12px 0 6px; }
.cg-mw-menu { position: absolute; left: 0; top: calc(100% + 8px); z-index: 20; min-width: 230px; max-height: 340px; overflow-y: auto; list-style: none; margin: 0; padding: 6px;
  border-radius: var(--radius-m); background: var(--surface); box-shadow: 0 18px 40px -14px rgba(61, 15, 36, .45), 0 2px 6px rgba(61, 15, 36, .08); }
.cg-mw-menu button { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 40px; padding: 0 12px; border: 0; border-radius: var(--radius-s);
  background: none; color: var(--ink); font: 15px/1.2 var(--font-sans); text-align: left; cursor: pointer; }
.cg-mw-menu button:hover, .cg-mw-menu button:focus-visible, .cg-mw-menu button[aria-current="true"] { background: var(--surface-soft); }
.cg-mw-menu button[aria-current="true"] { font-weight: var(--w-strong); }
.cg-mw-menu small { font-size: 13px; color: var(--ink-caption); font-weight: var(--w-strong); }
.cg-mw-menu__act button { color: var(--link, var(--accent)); font-weight: var(--w-strong); }
.cg-mw-menu li:not(.cg-mw-menu__act) + .cg-mw-menu__act, .cg-mw-menu__act:first-child { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 4px; }
.cg-mw-menu__act:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.cg-mw-menu__act button[aria-current="true"] { color: var(--ink); }

/* ---- The category filter over a city map: "All", then the badges (selected = filled + check; with a choice made, the
   others outlined grey but readable), a status line "Showing Bars, Saunas · 172 places · Clear", the first-visit hint ---- */
.cg-mw-filter { pointer-events: none; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: 100%; }
.cg-mw-filter[hidden] { display: none; }
.cg-mw-cats { pointer-events: auto; display: flex; gap: 4px; max-width: 100%; overflow-x: auto; scrollbar-width: none; padding: 6px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-card); }
.cg-mw-cats::-webkit-scrollbar { display: none; }
.cg-mw-cats[hidden] { display: none; }
.cg-mw-cat { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 64px; padding: 6px 4px 5px; border: 0; border-radius: 12px; background: none; cursor: pointer;
  font: var(--w-strong) 11.5px/1.15 var(--font-sans); color: var(--ink); transition: background .12s ease, box-shadow .12s ease; }
.cg-mw-cat:hover { background: var(--surface-soft); }
.cg-mw-cat:focus-visible { outline: 3px solid var(--accent); outline-offset: -2px; }
.cg-mw-cat .cg-catbadge { position: static; width: 40px; height: 40px; border-radius: 12px; transition: filter .15s, opacity .15s; }
.cg-mw-cat .cg-catbadge .cg-icon { width: 23px; height: 23px; }
.cg-mw-cat > span:last-child { white-space: nowrap; }
.cg-mw-cat small { font-size: 11px; color: var(--ink-caption); }
.cg-mw-cat__allb { display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(150deg, var(--dm-tag), #7b2a50); color: #fff; }
.cg-mw-cat__allb .cg-icon { width: 20px; height: 20px; }
/* selected: filled, with a check */
.cg-mw-cat[data-state="on"] { background: var(--surface-soft); box-shadow: inset 0 0 0 2px var(--dm-tag); }
.cg-mw-cat__ck { position: absolute; z-index: 4; display: none; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #fff;
  background: var(--dm-tag-hot); color: #fff; box-sizing: border-box; left: calc(50% + 9px); top: 0; box-shadow: 0 1px 3px rgba(40, 10, 25, .35); }
.cg-mw-cat__ck::after { content: ""; width: 4px; height: 8px; margin-top: -2px; border: solid #fff; border-width: 0 2.4px 2.4px 0; transform: rotate(45deg); }
.cg-mw-cat[data-state="on"] .cg-mw-cat__ck { display: inline-flex; }
/* a choice is made: the others outlined and grey, still readable with their counts */
.cg-mw-cat[data-state="off"] .cg-catbadge { filter: grayscale(1); opacity: .45; box-shadow: none; }
.cg-mw-cat[data-state="off"] { color: var(--ink-caption); }
.cg-mw-status, .cg-mw-fhint { pointer-events: auto; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin: 0; padding: 7px 14px; border-radius: var(--radius-pill);
  background: var(--surface); box-shadow: var(--shadow-card); font-size: 13px; line-height: 1.3; color: var(--ink-caption); }
.cg-mw-status[hidden], .cg-mw-fhint[hidden] { display: none; }
.cg-mw-status b { color: var(--ink); font-weight: var(--w-strong); }
.cg-mw-status .cg-mw-linkbtn { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.cg-mw-fhint { background: var(--dm-tag); color: #fff; padding-right: 6px; font-weight: var(--w-strong); }
.cg-mw-fhint__x { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; }
.cg-mw-fhint__x:hover { background: rgba(255, 255, 255, .28); }

.cg-mw .cg-mp-hint { position: absolute; z-index: 500; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; max-width: calc(100% - 90px);
  margin: 0; padding: 8px 14px 8px 10px; border-radius: var(--radius-pill); background: var(--surface); box-shadow: var(--shadow-card);
  font-size: 13px; line-height: 1.3; color: var(--ink-caption); pointer-events: none; }
.cg-mw .cg-mp-hint:empty { display: none; }
.cg-mp-hint__dot { flex: none; position: relative; width: 16px; height: 11px; margin-bottom: 4px; border-radius: 3px; background: var(--dm-tag); }
.cg-mp-hint__dot::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -4px; border: 4px solid transparent; border-bottom: 0; border-top-color: var(--dm-tag); }
.cg-mw .cg-mp-hint b { color: var(--ink); font-weight: var(--w-strong); }
body:not(.cg-js) .cg-mp-mapwrap { display: none; }
body:not(.cg-js) .cg-mw-main { grid-template-columns: minmax(0, 1fr); }

/* ---- Phones: the list first (breadcrumb pill, panel / child areas or badge row, cards); the map is a full-screen layer
   behind the floating "Map" button (drillmap.js marks the root cg-mw--phone, and is-mapmode while the map shows) ---------- */
@media (max-width: 900px) {
  .cg-mw { display: block; height: auto; min-height: 0; }
  .cg-mw-explore .cg-wrap { padding-block: 16px 14px; gap: 12px; }
  .cg-mw-h1 { font-size: 32px; }
  .cg-mw-lead { font-size: 14px; }
  .cg-mw-intro { gap: 12px; }
  .cg-mw-intro__t { min-width: 0; }
  .cg-mw-intro .cg-mp-city { width: 100%; }
  .cg-mw-intro .cg-mw-hide { display: none; }
  .cg-mw-tabs { margin: 0 calc(var(--gutter) * -1); padding: 0 calc(var(--gutter) - 14px); }
  .cg-mw-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 8px; }
  .cg-body a.cg-mw-chip { padding: 0 12px; font-size: 14px; }
  .cg-mw-chips:not(.is-all) li:nth-child(n+11) { display: none; }
  .cg-mw-more { display: inline-flex; align-items: center; min-height: 40px; padding: 0; border: 0; background: none; color: var(--link); font: var(--w-strong) 14px/1 var(--font-sans); cursor: pointer; }
  .cg-mw-foot .cg-mw-foot__all { display: none; }
  .cg-mw-main { display: flex; flex-direction: column; height: auto; min-height: 0; }
  .cg-mw-side { overflow: visible; border-right: 0; padding: 18px var(--gutter) 30px; }
  .cg-mw-thumb { width: 76px; height: 76px; }
  .cg-mp-map .leaflet-control-zoom { display: none; }
  .cg-mw .cg-mp-hint { display: none; }
  .cg-mw-show { padding: 6px var(--gutter); }

  /* the breadcrumb: one pill "< Here v" (up a level / the whole path), 36px high for a thumb */
  .cg-mw-crumbs { padding: 0; max-width: 100%; }
  .cg-mw-crumb--pill { height: 36px; min-width: 0; }
  .cg-mw-crumb__up, .cg-mw-crumb__root { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 36px; padding: 0 0 0 2px; border: 0;
    border-radius: var(--radius-pill) 0 0 var(--radius-pill); background: none; color: var(--accent); cursor: pointer; }
  .cg-mw-crumb__up:hover { background: var(--surface-soft); }
  .cg-mw-crumb__go.cg-mw-crumb__path { height: 36px; padding: 0 12px 0 4px; gap: 4px; font-size: 15px; color: var(--ink); max-width: 62vw; }
  .cg-mw-crumb__w2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .cg-mw-crumb--pill .cg-mw-crumb__up + .cg-mw-crumb__path { border-left: 1px solid var(--border); border-radius: 0 var(--radius-pill) var(--radius-pill) 0; padding-left: 10px; }
  .cg-mw-menu { left: 0; top: calc(100% + 6px); width: min(360px, calc(100vw - 16px)); min-width: 0; }
  /* the badges: one thin row that scrolls sideways */
  .cg-mw-cats { width: 100%; padding: 5px 4px 3px; gap: 4px; border-radius: 19px; flex-wrap: nowrap; }
  .cg-mw-cat { flex-direction: row; min-width: 0; height: 32px; padding: 0 10px 0 2px; gap: 6px; border-radius: 16px; font-size: 12.5px; }
  .cg-mw-cat .cg-catbadge { width: 28px; height: 28px; border-radius: 14px; }
  .cg-mw-cat .cg-catbadge .cg-icon { width: 16px; height: 16px; }
  .cg-mw-cat__allb .cg-icon { width: 14px; height: 14px; }
  .cg-mw-cat small { font-size: 11.5px; }
  .cg-mw-cat__ck { left: 17px; top: -3px; width: 17px; height: 17px; }
  .cg-mw-cat__ck::after { width: 3.5px; height: 7px; border-width: 0 2.2px 2.2px 0; }
  .cg-mw-filter { width: 100%; }
  .cg-mw-status, .cg-mw-fhint { font-size: 12.5px; padding: 6px 12px; }
  .cg-mw-fhint { padding-right: 5px; }
  /* the map's "Search as I move the map" sits above the phone's safe area; the bottom card covers it */
  .cg-dm-mapbar { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }

  /* -- the list view -- */
  .cg-mw--phone .cg-mw-main .cg-mp-mapwrap { display: none; }
  .cg-mw-pbar { position: relative; z-index: 30; display: flex; align-items: center; padding: 12px var(--gutter) 0; background: var(--surface-warm); }
  .cg-mw-pbar:has(+ .cg-mw-drop:not(.is-open)) { padding-bottom: 12px; border-bottom: 1px solid var(--border); }
  .cg-mw-pbar .cg-mw-crumbs { box-shadow: 0 1px 2px rgba(61, 15, 36, .08); border: 1px solid var(--border); }
  .cg-mw--phone .cg-mw-side { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
  .cg-mw-pcats { display: block; margin: 8px calc(var(--gutter) * -1) 2px; }
  /* before drillmap.js moves the breadcrumb pill and (city level) the badge row in: their height, so the list does not move */
  .cg-mw-pbar:empty::before { content: ""; display: block; height: 38px; }
  .cg-mw[data-cg-level="city"] .cg-mw-pcats:empty { min-height: 43px; }
  .cg-mw-pcats .cg-mw-cats { padding: 5px var(--gutter) 2px; gap: 6px; border-radius: 0; background: none; box-shadow: none; scroll-padding-inline: var(--gutter); }
  .cg-mw-pcats .cg-mw-cat { border: 1px solid var(--border); background: var(--surface); height: 36px; padding-right: 12px; border-radius: 18px; }
  .cg-mw-pcats .cg-mw-cat .cg-catbadge { width: 30px; height: 30px; border-radius: 15px; }
  .cg-mw-pcats .cg-mw-cat[data-state="off"] { background: var(--surface-soft); border-color: transparent; }
  .cg-mw-pcats .cg-mw-cat[data-state="on"] { border-color: var(--dm-tag); box-shadow: inset 0 0 0 1px var(--dm-tag); }
  .cg-mw-pcats .cg-mw-status, .cg-mw-pcats .cg-mw-fhint { margin: 4px var(--gutter) 0; box-shadow: none; border: 1px solid var(--border); }
  .cg-mw-pcats .cg-mw-fhint { border-color: transparent; }
  .cg-mw--phone .cg-mw-side__h h1, .cg-mw--phone .cg-mw-side__h h2 { font-size: 26px; }
  /* the child areas of an area level */
  .cg-mw-kids { display: flex; flex-direction: column; padding-bottom: 12px; margin-bottom: 8px; border-bottom: 1px solid var(--border); }
  .cg-mw-kids__h { margin: 0 0 2px; font: italic var(--w-regular) 26px/1.1 var(--font-display); color: var(--heading, var(--ink)); }
  .cg-mw-kids__list { list-style: none; margin: 0; padding: 0; }
  .cg-mw-kids__list li + li { border-top: 1px solid var(--border); }
  .cg-mw-kids:not(.is-all) li.is-more { display: none; }
  .cg-body a.cg-mw-kid { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 8px 0; color: var(--ink); }
  .cg-body a.cg-mw-kid:active { background: var(--surface-soft); }
  .cg-mw-kid__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .cg-mw-kid__name { font-size: 16px; font-weight: var(--w-strong); line-height: 1.25; }
  .cg-mw-kid__sub { font-size: 13px; color: var(--ink-caption); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cg-mw-kid__n { flex: none; font-size: 14px; font-weight: var(--w-strong); color: var(--ink-caption); }
  .cg-mw-kid .cg-icon { flex: none; color: var(--accent); }
  .cg-mw-kids .cg-mw-more { align-self: flex-start; }
  /* the floating "Map" button */
  .cg-mw .cg-mw-fab { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 990; display: inline-flex; align-items: center; gap: 8px;
    height: 50px; padding: 0 22px 0 18px; border: 0; border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); font: var(--w-strong) 16px/1 var(--font-sans);
    white-space: nowrap; box-shadow: var(--shadow-primary), 0 8px 20px -8px rgba(40, 10, 25, .5); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .cg-mw-fab:active { transform: translateX(-50%) scale(.96); }
  .cg-mw-fab:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
  .cg-mw-fab__n { font-weight: var(--w-regular); opacity: .9; }
  .cg-mw-fab__n::before { content: "\00B7"; margin-right: 8px; }
  .cg-mw-fab[hidden], body.cg-gate-open .cg-mw-fab { display: none; }

  /* -- the map view: the whole screen, the page under it still -- */
  html.cg-dm-mapopen, html.cg-dm-mapopen body { overflow: hidden; overscroll-behavior: none; }
  .cg-mw--phone.is-mapmode .cg-mw-main .cg-mp-mapwrap { display: block; position: fixed; inset: 0; z-index: 2400; height: 100vh; height: 100dvh; min-height: 0; border: 0;
    background: var(--map, #ece6dd); animation: cg-mw-mapin .22s ease-out both; }
  @keyframes cg-mw-mapin { from { opacity: 0; } to { opacity: 1; } }
  /* beyond the tiles (a tall screen shows more than the world is high): sea, not page */
  .cg-mw--phone.is-mapmode .cg-mp-map.leaflet-container { background: #d5dad6; }
  .cg-mw--phone .cg-mw-over { left: 8px; right: 8px; top: calc(8px + env(safe-area-inset-top, 0px)); gap: 6px; }
  .cg-mw-over__row { pointer-events: auto; display: flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; }
  .cg-mw-over__row .cg-mw-crumbs { min-width: 0; }
  .cg-mw .cg-mw-tolist { flex: none; display: inline-flex; align-items: center; gap: 2px; height: 36px; padding: 0 14px 0 8px; border: 0; border-radius: var(--radius-pill);
    background: #2a0f1c; color: #fff; font: var(--w-strong) 15px/1 var(--font-sans); box-shadow: var(--shadow-card); cursor: pointer; }
  .cg-mw-tolist:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
  .cg-mw--phone .cg-dm-pin__name { display: none !important; }
  .cg-mw--phone .cg-mp-map .leaflet-control-attribution { font-size: 10px; }
  /* the bottom card: the tapped place (swipe / < > for the next one) */
  .cg-mw-sheet { position: absolute; z-index: 760; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 8px;
    padding: 6px 12px 10px; border-radius: 22px; background: var(--surface); color: var(--ink); box-shadow: 0 -4px 30px -8px rgba(40, 10, 25, .38), 0 2px 6px rgba(40, 10, 25, .1);
    transform: translateY(calc(100% + 24px)); visibility: hidden; transition: transform .3s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .3s; touch-action: pan-y; }
  .cg-mw-sheet.is-on { transform: none; visibility: visible; transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
  .cg-mw-sheet.is-drag { transition: none; }
  .cg-mw-sheet.is-from-r .cg-mw-sheet__main { animation: cg-mw-from-r .26s cubic-bezier(.2, .7, .2, 1) both; }
  .cg-mw-sheet.is-from-l .cg-mw-sheet__main { animation: cg-mw-from-l .26s cubic-bezier(.2, .7, .2, 1) both; }
  @keyframes cg-mw-from-r { from { opacity: 0; transform: translateX(36px); } to { opacity: 1; transform: none; } }
  @keyframes cg-mw-from-l { from { opacity: 0; transform: translateX(-36px); } to { opacity: 1; transform: none; } }
  .cg-mw-sheet__grab { align-self: center; flex: none; width: 38px; height: 4px; border-radius: 2px; background: var(--border); }
  .cg-mw-sheet__main { display: flex; gap: 12px; min-width: 0; cursor: pointer; }
  .cg-mw-sheet .cg-mw-thumb { width: 88px; height: 88px; }
  .cg-mw-sheet__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding-top: 2px; }
  .cg-mw-sheet__name { margin: 0; display: flex; align-items: flex-start; gap: 8px; font: var(--w-strong) 17px/1.25 var(--font-sans); color: var(--ink); overflow-wrap: anywhere; }
  .cg-mw-sheet__name > span:last-child { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .cg-mw-sheet .cg-mw-card__meta { margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .cg-mw-sheet .cg-mw-card__foot { margin: 0; }
  .cg-mw-sheet__bar { display: flex; align-items: center; gap: 4px; padding-top: 8px; border-top: 1px solid var(--border); }
  .cg-mw .cg-mw-sheet__step { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1.5px solid var(--border); border-radius: 50%;
    background: var(--surface); color: var(--ink); cursor: pointer; }
  .cg-mw-sheet__step--next .cg-icon { transform: scaleX(-1); }
  .cg-mw-sheet__step[disabled] { opacity: .35; cursor: default; }
  .cg-mw-sheet__pos { min-width: 66px; text-align: center; font-size: 13px; font-weight: var(--w-strong); color: var(--ink-caption); }
  .cg-body a.cg-mw-sheet__open { margin-left: auto; height: 40px; padding: 0 24px; border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); font-size: 15px; }
  .cg-body a.cg-mw-sheet__open:hover { background: var(--accent-hover, var(--accent)); color: var(--on-accent); }
}
@media (prefers-reduced-motion: reduce) {
  .cg-mw-drop, .cg-mw-drop__body, .cg-mw-chipwrap, .cg-dm-pin, .cg-mw-sheet, .cg-mw-sheet.is-on { transition: none; }
  .cg-mw-chips.is-in li, .cg-mp-map .leaflet-marker-icon.is-in, .cg-mw--phone.is-mapmode .cg-mw-main .cg-mp-mapwrap, .cg-mp-map .cg-dm-bubicon.is-hot .cg-dm-bub { animation: none; }
}