/* World map modal — opens instantly, countries light up one by one, relative legend, scrobbles/artists toggle. */
.wm-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0,0,0,.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: wm-fade-in .2s ease-out; box-sizing: border-box; }
.wm-modal[hidden] { display: none !important; }
@keyframes wm-fade-in { from { opacity: 0; } }

.wm-box { position: relative; width: min(1100px, 100%); max-height: min(92vh, 940px); background: var(--bg-2); border-radius: 20px; border: 1px solid rgba(201,160,99,.3); overflow: hidden; display: flex; flex-direction: column; animation: wm-slide-in .3s cubic-bezier(.2,.8,.2,1); box-sizing: border-box; }
@keyframes wm-slide-in { from { opacity: 0; transform: translateY(-16px) scale(.97); } }

.wm-head { display: flex; align-items: center; gap: 14px; padding: 18px 18px 14px 24px; border-bottom: 1px solid var(--line); flex: none; }
.wm-head-text { min-width: 0; flex: 1 1 auto; }
.wm-h { font: 500 26px/1.15 var(--serif); margin: 0 0 4px; color: var(--text); }
.wm-sub { font-size: 14px; line-height: 1.35; color: var(--muted); margin: 0; font-variant-numeric: tabular-nums; }
.wm-sub b { color: var(--text); font-weight: 600; }
.wm-sub.is-err { color: #e08f8f; }

/* Scrobbles | Artists segmented toggle */
.wm-seg { flex: none; display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid rgba(201,160,99,.3); background: rgba(201,160,99,.06); }
.wm-seg button { -webkit-appearance: none; appearance: none; border: 0; background: none; padding: 7px 15px; border-radius: 999px; font: 600 12.5px var(--sans); color: var(--muted); cursor: pointer; transition: background .2s, color .2s; }
.wm-seg button:hover { color: var(--text); }
.wm-seg button[aria-checked="true"] { background: var(--amber); color: #15120d; }
.wm-seg button:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

.wm-close { -webkit-appearance: none !important; appearance: none !important; flex: 0 0 38px; width: 38px; height: 38px; margin: 0; padding: 0; border: 0 !important; border-radius: 50%; background: rgba(201,160,99,.12) !important; color: var(--amber) !important; display: grid; place-items: center; cursor: pointer; transition: background .15s; box-shadow: none !important; font: inherit; line-height: 0; }
.wm-close svg { display: block; width: 18px; height: 18px; pointer-events: none; }
.wm-close:hover { background: rgba(201,160,99,.22) !important; }
.wm-close:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

.wm-body { flex: 1 1 auto; overflow-y: auto; padding: 16px 24px 18px; display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.wm-body > * { flex-shrink: 0; }

/* Top row: podium + non-blocking status chip */
.wm-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 38px; }
.wm-podium { display: flex; gap: 10px; flex-wrap: wrap; }
.wm-podium:empty { display: none; }
.wm-pd { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 8px; border-radius: 12px; background: rgba(201,160,99,.07); border: 1px solid rgba(201,160,99,.18); font-size: 13.5px; color: var(--text); animation: wm-pd-in .45s cubic-bezier(.2,.8,.2,1) both; }
.wm-pd:nth-child(2) { animation-delay: .08s; } .wm-pd:nth-child(3) { animation-delay: .16s; }
@keyframes wm-pd-in { from { opacity: 0; transform: translateY(6px); } }
.wm-pd-n { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--amber); color: #15120d; font: 700 12px var(--sans); }
.wm-pd .flag { width: 20px; height: 14px; border-radius: 3px; object-fit: cover; display: block; }
.wm-pd .flag-emoji { font-size: 16px; line-height: 1; }
.wm-pd-name { white-space: nowrap; }
.wm-pd em { font-style: normal; font-weight: 600; color: var(--amber); font-variant-numeric: tabular-nums; }
.wm-chip-wrap { margin-left: auto; display: inline-flex; align-items: center; flex: none; }
.wm-chip-wrap[hidden] { display: none !important; }
.wm-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; border: 1px dashed rgba(201,160,99,.3); font-size: 12px; color: var(--muted); white-space: nowrap; }
.wm-chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px rgba(201,160,99,.18); animation: wm-dot 1.4s ease-in-out infinite; flex: none; }
.wm-chip-copy { display: flex; flex-direction: column; gap: 1px; min-width: 0; line-height: 1.25; }
.wm-chip.is-busy { color: var(--text); border-style: solid; border-color: rgba(201,160,99,.4); background: rgba(201,160,99,.08); }
.wm-chip.is-first { align-items: flex-start; padding: 7px 14px 7px 12px; color: var(--text); font-weight: 600; border-style: solid; border-color: rgba(201,160,99,.8); background: rgba(201,160,99,.16); box-shadow: 0 0 0 1px rgba(201,160,99,.28), 0 0 16px rgba(201,160,99,.22); }
.wm-chip.is-first i { margin-top: 5px; }
.wm-chip-note { font: 500 11px/1.25 var(--sans); color: var(--amber); font-weight: 500; white-space: nowrap; }
.wm-chip-note[hidden] { display: none !important; }
.wm-chip-wrap[hidden] + .wm-view { margin-left: auto; }
@keyframes wm-dot { 0%, 100% { box-shadow: 0 0 0 3px rgba(201,160,99,.12); } 50% { box-shadow: 0 0 0 6px rgba(201,160,99,.28); } }

/* Map */
.wm-map-wrap { position: relative; width: 100%; margin: 0 auto; background: rgba(201,160,99,.04); border-radius: 16px; overflow: hidden; min-height: 220px; }
.wm-map { width: 100%; height: auto; display: block; vertical-align: top; }
.wm-map path { fill: rgba(201,160,99,.06); stroke: rgba(201,160,99,.2); stroke-width: .4; transition: fill .35s ease, stroke .2s; vector-effect: non-scaling-stroke; }
.wm-map path.wm-has { cursor: pointer; }
.wm-map path.wm-has:hover { stroke: rgba(245,223,160,.85); stroke-width: .9; }
.wm-map path.wm-c0, .wm-leg-box.wm-c0 { fill: rgba(201,160,99,.22); background: rgba(201,160,99,.22); }
.wm-map path.wm-c1, .wm-leg-box.wm-c1 { fill: rgba(201,160,99,.38); background: rgba(201,160,99,.38); }
.wm-map path.wm-c2, .wm-leg-box.wm-c2 { fill: rgba(201,160,99,.56); background: rgba(201,160,99,.56); }
.wm-map path.wm-c3, .wm-leg-box.wm-c3 { fill: rgba(214,172,108,.8); background: rgba(214,172,108,.8); }
.wm-map path.wm-c4, .wm-leg-box.wm-c4 { fill: #e8c37f; background: #e8c37f; }
.wm-map path.wm-c4 { stroke: rgba(245,223,160,.7); }
.wm-map path.wm-sel { fill: #f5dfa0 !important; stroke: #fff8e6 !important; stroke-width: 1.2; }
/* Reveal: each country flashes bright then settles on its colour (delay set per path in JS). */
.wm-map path.wm-in { animation: wm-in .7s cubic-bezier(.2,.8,.2,1) backwards; }
@keyframes wm-in { 0% { fill: rgba(201,160,99,.06); } 45% { fill: #fff1cf; stroke: #fff8e6; } }

/* Loading skeleton (only when nothing is known yet) */
.wm-map-wrap.wm-skel path { fill: rgba(201,160,99,.1); stroke: rgba(201,160,99,.22); }
.wm-map-wrap.wm-skel { animation: wm-skel 1.6s ease-in-out infinite; }
@keyframes wm-skel { 0%, 100% { opacity: .55; } 50% { opacity: .95; } }
.wm-load-eq { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; gap: 5px; pointer-events: none; z-index: 2; }
.wm-map-wrap.wm-skel .wm-load-eq { display: flex; }
.wm-load-eq i { width: 6px; height: 34px; border-radius: 3px; background: #f5dfa0; box-shadow: 0 0 10px rgba(245,223,160,.35); transform-origin: center; animation: wm-eq .9s ease-in-out infinite; }
.wm-load-eq i:nth-child(2) { animation-delay: -.6s; } .wm-load-eq i:nth-child(3) { animation-delay: -.3s; }
.wm-load-eq i:nth-child(4) { animation-delay: -.75s; } .wm-load-eq i:nth-child(5) { animation-delay: -.15s; }
@keyframes wm-eq { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }

.wm-status { display: none; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; text-align: center; }
.wm-status:not([hidden]) { display: flex; }
.wm-status-msg { font-size: 13px; color: var(--muted); }
.wm-retry { -webkit-appearance: none; appearance: none; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(201,160,99,.45); background: rgba(201,160,99,.12); color: var(--amber); font: 600 13px var(--sans); cursor: pointer; }
.wm-retry:hover, .wm-retry:focus-visible { background: rgba(201,160,99,.22); outline: none; }

.wm-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: center; align-items: center; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.wm-legend[hidden] { display: none !important; }
.wm-leg-item { display: inline-flex; align-items: center; gap: 6px; }
.wm-leg-box { width: 26px; height: 14px; border-radius: 4px; }
.wm-leg-label { color: var(--muted); }

.wm-tooltip { position: fixed; z-index: 10000; display: flex; flex-direction: column; gap: 3px; padding: 9px 12px; background: rgba(21,19,17,.96); border: 1px solid rgba(201,160,99,.4); border-radius: 12px; color: var(--text); font: 500 12.5px var(--sans); pointer-events: none; white-space: nowrap; box-shadow: 0 10px 30px rgba(0,0,0,.5); transform: translate(-50%, calc(-100% - 14px)); }
.wm-tooltip[hidden] { display: none !important; }
.wm-tooltip b { display: inline-flex; align-items: center; gap: 7px; font: 500 15px/1.2 var(--serif); }
.wm-tooltip b .flag { width: 18px; height: 12px; border-radius: 2px; }
.wm-tooltip span { color: var(--muted); }
.wm-attr { margin: 0; font-size: 11px; color: var(--faint); text-align: center; }

@media (max-width: 719px) {
  .wm-modal { padding: 0; align-items: flex-end; }
  .wm-box { width: 100%; max-height: 94vh; border-radius: 18px 18px 0 0; }
  .wm-head { flex-wrap: wrap; padding: 16px 14px 12px 16px; gap: 12px; }
  .wm-h { font-size: 21px; }
  .wm-sub { font-size: 12.5px; }
  .wm-seg { order: 3; width: 100%; }
  .wm-seg button { flex: 1; padding: 9px 10px; font-size: 13px; }
  .wm-close { width: 34px; height: 34px; flex-basis: 34px; }
  .wm-body { padding: 12px 14px 16px; gap: 12px; }
  .wm-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
  .wm-pd { position: relative; flex-direction: column; align-items: flex-start; gap: 4px; padding: 9px; min-width: 0; font-size: 12px; }
  .wm-pd-n { position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; font-size: 10.5px; }
  .wm-pd-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
  .wm-pd em { font-size: 15px; }
  .wm-chip-wrap { margin-left: 0; width: 100%; justify-content: center; }
  .wm-chip { margin-left: 0; width: auto; max-width: 100%; justify-content: center; }
  .wm-chip-note { white-space: normal; }
  .wm-map-wrap { min-height: 170px; border-radius: 14px; }
  .wm-legend { gap: 6px 10px; font-size: 11.5px; }
  .wm-leg-box { width: 18px; height: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .wm-modal, .wm-box, .wm-pd { animation: none; }
  .wm-map path { transition: none; }
  .wm-map path.wm-in { animation: none; }
  .wm-map-wrap.wm-skel { animation: none; opacity: .75; }
  .wm-load-eq i, .wm-chip i { animation: none; }
}

html[data-theme="light"] .wm-box { background: #fffaf2; }
html[data-theme="light"] .wm-map path:not(.wm-has) { fill: rgba(201,160,99,.1); stroke: #d4cfc7; }
html[data-theme="light"] .wm-map path.wm-has { stroke: rgba(139,101,45,.45); }
html[data-theme="light"] .wm-map path.wm-c4 { stroke: #b08440; }
html[data-theme="light"] .wm-chip.is-first { background: rgba(201,160,99,.2); border-color: rgba(139,101,45,.55); }
html[data-theme="light"] .wm-pd { background: rgba(201,160,99,.1); }
html[data-theme="light"] .wm-pd em { color: #8b652d; }
html[data-theme="light"] .wm-seg button[aria-checked="true"] { background: #8b652d; color: #fffaf2; }
html[data-theme="light"] .wm-tooltip { background: rgba(255,250,242,.98); color: #201c16; border-color: rgba(139,101,45,.35); box-shadow: 0 10px 30px rgba(60,45,20,.18); }
html[data-theme="light"] .wm-close { background: rgba(201,160,99,.18) !important; }

/* ── Phase 2: "Count by" label, map | ranking view, country panel, highlights ── */
.wm-count { flex: none; display: flex; align-items: center; gap: 8px; }
.wm-count-l { font: 500 12px var(--sans); color: var(--muted); white-space: nowrap; }
.wm-pd { -webkit-appearance: none; appearance: none; font-family: inherit; cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.wm-pd:hover, .wm-pd:focus-visible { border-color: rgba(201,160,99,.55); background: rgba(201,160,99,.12); transform: translateY(-1px); outline: none; }
.wm-view { flex: none; display: inline-flex; padding: 3px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.wm-chip-wrap + .wm-view { margin-left: 0; }
.wm-podium + .wm-chip-wrap[hidden] + .wm-view { margin-left: auto; }
.wm-view button { -webkit-appearance: none; appearance: none; border: 0; background: none; padding: 6px 12px; border-radius: 7px; font: 600 12px var(--sans); color: var(--muted); cursor: pointer; }
.wm-view button[aria-selected="true"] { background: rgba(201,160,99,.18); color: var(--text); }
.wm-view button:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }

.wm-stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.wm-stage.has-panel { grid-template-columns: minmax(0, 1fr) 320px; }
.wm-main { min-width: 0; }
.wm-map-wrap[hidden], .wm-rank[hidden], .wm-panel[hidden], .wm-hi[hidden], .wm-hint[hidden] { display: none !important; }
.wm-legend.is-off { visibility: hidden; }
.wm-hint { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 2; padding: 6px 12px; border-radius: 999px; background: rgba(13,12,11,.75); border: 1px solid rgba(201,160,99,.25); color: rgba(236,228,214,.85); font: 500 12px var(--sans); white-space: nowrap; pointer-events: none; animation: wm-hint 2.4s ease-in-out .8s 2 both; }
@keyframes wm-hint { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }

/* Ranking view */
.wm-rank { list-style: none; margin: 0; padding: 4px; max-height: 470px; overflow-y: auto; border-radius: 16px; background: rgba(201,160,99,.04); }
.wm-rank li { display: grid; grid-template-columns: 26px 22px minmax(90px, 1.2fr) minmax(60px, 2fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; cursor: pointer; font-size: 13.5px; transition: background .15s; }
.wm-rank li:hover, .wm-rank li.is-sel { background: rgba(201,160,99,.1); }
.wm-rank li.is-sel { box-shadow: inset 0 0 0 1px rgba(201,160,99,.45); }
.wm-rk-n { color: var(--muted); font: 600 12px var(--sans); text-align: right; font-variant-numeric: tabular-nums; }
.wm-rank .flag { width: 22px; height: 15px; border-radius: 3px; object-fit: cover; display: block; }
.wm-rank .flag-emoji { font-size: 16px; line-height: 1; }
.wm-rk-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.wm-rk-bar, .wm-a-bar { height: 8px; border-radius: 4px; background: rgba(201,160,99,.1); overflow: hidden; }
.wm-rk-bar i, .wm-a-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, rgba(201,160,99,.55), #e8c37f); }
.wm-rk-v { font-weight: 600; color: var(--amber); white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.wm-rk-v small { font-weight: 500; color: var(--muted); font-size: 11px; }

/* Country panel */
.wm-panel { position: relative; display: flex; flex-direction: column; min-height: 0; max-height: min(560px, calc(92vh - 180px)); border-radius: 16px; border: 1px solid rgba(201,160,99,.3); background: rgba(201,160,99,.06); padding: 14px; animation: wm-panel-in .3s cubic-bezier(.2,.8,.2,1); }
@keyframes wm-panel-in { from { opacity: 0; transform: translateX(10px); } }
.wm-panel-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex: none; }
.wm-panel-flag .flag { width: 30px; height: 20px; border-radius: 4px; display: block; object-fit: cover; }
.wm-panel-flag .flag-emoji { font-size: 24px; line-height: 1; }
.wm-panel-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wm-panel-t b { font: 500 20px/1.15 var(--serif); color: var(--text); }
.wm-panel-t small { font-size: 12px; color: var(--muted); }
.wm-panel-x { -webkit-appearance: none; appearance: none; flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(201,160,99,.14); color: var(--amber); display: grid; place-items: center; cursor: pointer; }
.wm-panel-x svg { width: 15px; height: 15px; }
.wm-panel-x:hover { background: rgba(201,160,99,.26); }
.wm-panel-search { display: flex; align-items: center; gap: 8px; flex: none; margin: 0 0 10px; padding: 0 10px; height: 36px; border-radius: 10px; background: rgba(201,160,99,.08); border: 1px solid rgba(201,160,99,.18); color: var(--muted); }
.wm-panel-search svg { flex: none; opacity: .75; }
.wm-panel-search:focus-within { border-color: rgba(201,160,99,.5); box-shadow: 0 0 0 1px rgba(201,160,99,.22); color: var(--amber); }
.wm-panel-q { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font: 400 16px/1 var(--sans); }
.wm-panel-q::placeholder { color: var(--muted); opacity: .85; }
.wm-panel-q::-webkit-search-cancel-button { filter: invert(.55); }
@media (min-width: 720px) { .wm-panel-q { font-size: 13px; } }
.wm-artists { list-style: none; margin: 0; padding: 0 6px 0 0; display: flex; flex-direction: column; gap: 2px; flex: 0 1 auto; max-height: min(380px, calc(92vh - 320px)); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; overflow-anchor: none; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: rgba(201,160,99,.55) rgba(201,160,99,.1); }
.wm-artists::-webkit-scrollbar { width: 6px; }
.wm-artists::-webkit-scrollbar-track { background: rgba(201,160,99,.08); border-radius: 99px; margin: 4px 0; }
.wm-artists::-webkit-scrollbar-thumb { background: rgba(201,160,99,.48); border-radius: 99px; }
.wm-artists::-webkit-scrollbar-thumb:hover { background: rgba(201,160,99,.75); }
.wm-artists li { display: grid; grid-template-columns: 18px minmax(0, 1fr) 54px auto; align-items: center; gap: 8px; padding: 6px 4px; border-radius: 8px; font-size: 13px; animation: wm-pd-in .35s cubic-bezier(.2,.8,.2,1) both; }
.wm-artists li:has(.wm-a-name[aria-expanded="true"]) { background: rgba(201,160,99,.1); }
.wm-artists li:nth-child(2) { animation-delay: .03s; } .wm-artists li:nth-child(3) { animation-delay: .06s; } .wm-artists li:nth-child(4) { animation-delay: .09s; }
.wm-artists li:nth-child(5) { animation-delay: .12s; } .wm-artists li:nth-child(n+6) { animation-delay: .15s; }
.wm-artists.is-more li { animation: none; }
.wm-artists li:hover { background: rgba(201,160,99,.08); }
.wm-a-n { color: var(--muted); font: 600 11px var(--sans); text-align: right; }
.wm-a-name { -webkit-appearance: none; appearance: none; min-width: 0; margin: 0; padding: 0; border: 0; background: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font: inherit; font-weight: 500; text-align: left; cursor: pointer; }
.wm-a-name:hover, .wm-a-name:focus-visible, .wm-a-name[aria-expanded="true"] { color: var(--amber); outline: none; }
.wm-lfm-pop { grid-column: 1 / -1; position: relative; z-index: 2; display: flex; flex-direction: column; gap: 4px; min-width: 0; margin: 2px 0 2px 26px; padding: 8px; border-radius: 12px; border: 1px solid rgba(201,160,99,.45); background: rgba(21,19,17,.97); box-shadow: 0 8px 24px rgba(0,0,0,.4); animation: wm-lfm-in .14s ease-out; }
.wm-lfm-pop[hidden] { display: none !important; }
@keyframes wm-lfm-in { from { opacity: 0; transform: translateY(-4px); } }
.wm-lfm-who { margin: 0; padding: 2px 8px 0; font: 500 12px/1.3 var(--sans); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-lfm-go { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--text); text-decoration: none; font: 600 13px/1.2 var(--sans); }
.wm-lfm-go svg { flex: none; width: 14px; height: 14px; color: var(--amber); }
.wm-lfm-go:hover, .wm-lfm-go:focus-visible { background: rgba(201,160,99,.16); color: var(--amber); outline: none; }
.wm-a-v { font-size: 11.5px; color: var(--muted); white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.wm-panel-empty { margin: 14px 4px; font-size: 13px; color: var(--muted); text-align: center; }
.wm-panel-empty[hidden] { display: none; }
.wm-panel-more { -webkit-appearance: none; appearance: none; display: block; width: 100%; flex: none; margin: 8px 0 0; padding: 8px 4px; border: 0; border-radius: 8px; background: none; font: 500 12px var(--sans); color: var(--muted); cursor: pointer; text-align: left; }
.wm-panel-more:hover, .wm-panel-more:focus-visible { color: var(--amber); outline: none; }
.wm-panel-more.is-busy { cursor: wait; color: var(--muted); }
.wm-panel-more[hidden] { display: none; }

/* Highlights */
.wm-hi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.wm-hi-i { -webkit-appearance: none; appearance: none; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.02); color: var(--muted); font: 400 13px/1.35 var(--sans); text-align: left; }
button.wm-hi-i { cursor: pointer; transition: border-color .2s, background .2s; }
button.wm-hi-i:hover, button.wm-hi-i:focus-visible { border-color: rgba(201,160,99,.45); background: rgba(201,160,99,.07); outline: none; }
.wm-hi-i b { color: var(--text); font-weight: 600; }
.wm-hi-i .flag { flex: none; width: 22px; height: 15px; border-radius: 3px; object-fit: cover; }
.wm-hi-globe { flex: none; width: 22px; text-align: center; color: var(--amber); font-size: 18px; line-height: 1; }

@media (max-width: 899px) {
  .wm-stage.has-panel { grid-template-columns: minmax(0, 1fr); }
  .wm-hi { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}
@media (max-width: 719px) {
  .wm-count { order: 3; width: 100%; }
  .wm-count-l { font-size: 11.5px; }
  .wm-count .wm-seg { flex: 1; }
  .wm-view { width: 100%; }
  .wm-view button { flex: 1; padding: 8px; }
  .wm-hint { font-size: 11px; bottom: 8px; }
  .wm-rank { max-height: none; overflow: visible; }
  .wm-rank li { grid-template-columns: 20px 20px minmax(70px, 1fr) minmax(40px, 1fr) auto; gap: 8px; padding: 8px 6px; font-size: 13px; }
  .wm-rk-v small { display: none; }
  .wm-panel { padding: 12px; max-height: min(62vh, 520px); }
  .wm-artists { max-height: min(38vh, 280px); }
  .wm-hi-i { padding: 9px 10px; font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .wm-panel, .wm-artists li, .wm-hint, .wm-lfm-pop { animation: none; }
}
html[data-theme="light"] .wm-hint { background: rgba(255,250,242,.9); color: #423d35; }
html[data-theme="light"] .wm-panel, html[data-theme="light"] .wm-rank { background: rgba(201,160,99,.08); }
html[data-theme="light"] .wm-rk-v, html[data-theme="light"] .wm-panel-x { color: #8b652d; }
html[data-theme="light"] .wm-lfm-pop { background: rgba(255,250,242,.98); border-color: rgba(139,101,45,.35); box-shadow: 0 12px 28px rgba(60,45,20,.18); }
html[data-theme="light"] .wm-panel-search { background: rgba(201,160,99,.1); border-color: rgba(139,101,45,.22); }
html[data-theme="light"] .wm-artists { scrollbar-color: rgba(139,101,45,.45) transparent; }
html[data-theme="light"] .wm-artists::-webkit-scrollbar-thumb { background: rgba(139,101,45,.4); }
html[data-theme="light"] .wm-view { background: rgba(15,15,15,.03); }
html[data-theme="light"] .wm-hi-i { background: rgba(255,255,255,.6); }

/* ── Zoom & pan: controls pinned top-right of the map; drag to move, pinch/wheel to zoom ── */
.wm-map { touch-action: none; -webkit-user-select: none; user-select: none; }
.wm-map-wrap.is-zoomed .wm-map { cursor: grab; }
.wm-map-wrap.is-dragging .wm-map, .wm-map-wrap.is-dragging .wm-map path { cursor: grabbing !important; }
.wm-zoom { position: absolute; top: 10px; right: 10px; z-index: 3; display: flex; flex-direction: column; gap: 0; border-radius: 12px; overflow: hidden; border: 1px solid rgba(201,160,99,.4); background: rgba(21,19,17,.88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 8px 24px -10px rgba(0,0,0,.7); }
.wm-zoom button { -webkit-appearance: none; appearance: none; width: 38px; height: 38px; border: 0; border-bottom: 1px solid rgba(201,160,99,.18); background: none; color: var(--amber); display: grid; place-items: center; cursor: pointer; transition: background .15s, color .15s; }
.wm-zoom button:last-child { border-bottom: 0; }
.wm-zoom button svg { width: 18px; height: 18px; }
.wm-zoom button:hover:not(:disabled), .wm-zoom button:focus-visible { background: rgba(201,160,99,.18); color: #f5dfa0; outline: none; }
.wm-zoom button:disabled { color: rgba(201,160,99,.3); cursor: default; }
/* Reset glows while zoomed so it's always easy to get back to the whole map. */
.wm-map-wrap.is-zoomed .wm-zoom [data-z="reset"] { background: rgba(201,160,99,.16); color: #f5dfa0; }
.wm-map-wrap.wm-skel .wm-zoom { display: none; }
@media (max-width: 719px) {
  .wm-zoom { top: 8px; right: 8px; border-radius: 10px; }
  .wm-zoom button { width: 36px; height: 36px; }
}
html[data-theme="light"] .wm-zoom { background: rgba(255,250,242,.94); border-color: rgba(139,101,45,.35); }
html[data-theme="light"] .wm-zoom button { color: #8b652d; }
html[data-theme="light"] .wm-map-wrap.is-zoomed .wm-zoom [data-z="reset"] { background: rgba(201,160,99,.2); color: #5c4320; }