/* ================================================================
   LIVE MAP PAGE — Full-viewport Leaflet map with sidebar
   ================================================================ */

/* Override body/content padding on map page for full-viewport layout */
.map-page {
    --site-shell-top: 68px;
    --map-overlay-top-inset: calc(16px + env(safe-area-inset-top, 0px));
    --map-left-secondary-offset: var(--map-overlay-top-inset);
    overflow: hidden !important;
}

.map-page .main-content {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

.map-page .v2-shell-main,
.map-page .v2-mobile-app {
    padding: 0 !important;
}

.map-page .v2-shell-live-strip,
.map-page .v2-mobile-shell-live-strip,
.map-page .v2-giveaway-strip,
.map-page .v2-flash-stack,
.map-page .v2-preview-banner,
.map-page .v2-mobile-preview,
.map-page .v2-mobile-shell-head,
.map-page .v2-mobile-command-shell {
    display: none !important;
}

.map-page footer,
.map-page .footer {
    display: none !important;
}

/* Keep mobile nav above map layers */
.map-page .v2-mobile-nav {
    z-index: 800;
}

/* ── Global site bottom nav: recolor to the T7 fire/gold dark-glass scheme
   ONLY on the map page ─────────────────────────────────────────────────
   The bottom nav markup (#siteBottomNav) lives in base.html and its base
   styling in mobile-bottom-nav.css — both owned elsewhere and NOT edited
   here. These page-scoped overrides only recolor the map page's instance
   (same pattern map.css already uses to hide the footer / live strips).
   Fire tokens come from t7-theme.css :root (globally loaded). */
.map-page .site-bottom-nav-bar {
    background: linear-gradient(180deg, rgba(30, 5, 0, 0.96), rgba(10, 0, 0, 0.95));
    border: 1px solid var(--gold-dark, rgba(255, 215, 0, 0.28));
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.5), 0 0 18px rgba(255, 69, 0, 0.14);
}
.map-page .site-bottom-nav-item.active {
    background: rgba(255, 69, 0, 0.18);
    border-color: var(--fire-red, #ff2d2d);
    color: #fff;
    box-shadow: inset 0 0 8px rgba(255, 69, 0, 0.32);
}
.map-page .site-bottom-nav-item.active i,
.map-page .site-bottom-nav-item.active .site-bottom-nav-overline {
    color: var(--fire-yellow, #ffd54d);
}
.map-page .site-nav-minimize-btn {
    border-color: var(--gold-dark, rgba(255, 215, 0, 0.28));
    background: linear-gradient(180deg, rgba(34, 8, 2, 0.96), rgba(14, 3, 2, 0.94));
    color: var(--fire-yellow, #ffd54d);
}
.map-page .site-bottom-nav-shell.is-minimized .site-nav-minimize-btn {
    background: linear-gradient(180deg, rgba(30, 5, 0, 0.96), rgba(10, 0, 0, 0.95));
    border-color: var(--gold-dark, rgba(255, 215, 0, 0.28));
    color: var(--fire-yellow, #ffd54d);
}

/* ── Wrapper ── */
.map-wrapper {
    position: fixed;
    top: var(--site-shell-top, 52px);
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    overflow: hidden;
    z-index: 1;
}

/* ── Map container ── */
#mapContainer {
    flex: 1;
    min-width: 0;
    height: 100%;
    background: #060e18;
}

#mapContainer.map-pending-teleport {
    cursor: crosshair;
}

/* ── Leaflet dark theme overrides ── */
.map-page .leaflet-container {
    background: #060e18;
    font-family: 'Rajdhani', 'Inter', sans-serif;
}

/* GPU-accelerate tile panes to prevent ghost-layer artifacts during drag */
.map-page .leaflet-tile-pane {
    will-change: transform;
}
.map-page .leaflet-tile-container {
    will-change: transform;
    backface-visibility: hidden;
}

/* GPU-promote marker/overlay panes for smoother panning */
.map-page .leaflet-map-pane {
    will-change: transform;
}
.map-page .leaflet-marker-pane,
.map-page .leaflet-overlay-pane {
    will-change: transform;
    backface-visibility: hidden;
}

/* Reduce paint complexity during drag — disable expensive shadows/effects */
.leaflet-dragging .player-marker-dot {
    box-shadow: none !important;
}
.leaflet-dragging .player-marker-label {
    text-shadow: 0 0 3px rgba(0,0,0,0.9) !important;
}
.leaflet-dragging .boss-marker-icon,
.leaflet-dragging .spawn-marker-icon {
    box-shadow: none !important;
}
.leaflet-dragging .player-marker-anchor::before,
.leaflet-dragging .boss-marker-anchor::before,
.leaflet-dragging .spawn-marker-anchor::before {
    display: none;
}
/* Pause CSS animations during drag to free up compositor */
.leaflet-dragging .leaflet-marker-pane * {
    animation-play-state: paused !important;
}

.map-page .leaflet-top,
.map-page .leaflet-bottom {
    z-index: 620;
}

.map-page .leaflet-top {
    top: var(--map-overlay-top-inset);
}

.map-page .leaflet-control-attribution {
    display: none;
}

/* ── Sidebar ── */
.map-sidebar {
    width: 320px;
    height: 100%;
    background: linear-gradient(180deg, rgba(8, 15, 29, 0.97), rgba(6, 12, 22, 0.98));
    border-left: 1px solid rgba(148, 163, 184, 0.12);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.map-sidebar-inner {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.2) transparent;
}

.map-sidebar-inner::-webkit-scrollbar {
    width: 4px;
}

.map-sidebar-inner::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.25);
    border-radius: 2px;
}

/* ── Sidebar sections ── */
.map-sidebar-section {
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.map-sidebar-section:first-child {
    flex: 1 1 auto;
}

.map-sidebar-section:nth-child(2),
.map-sidebar-section:nth-child(3) {
    flex: 0 0 auto;
}

.map-sidebar-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(226, 232, 240, 0.7);
    background: rgba(255, 255, 255, 0.02);
    position: sticky;
    top: 0;
    z-index: 2;
    backdrop-filter: blur(8px);
}

.map-count-badge {
    margin-left: auto;
    background: rgba(255, 107, 74, 0.2);
    color: #ff6b4a;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.1rem 0.45rem;
    border-radius: 8px;
    min-width: 1.3rem;
    text-align: center;
}

.map-sidebar-empty {
    padding: 1rem;
    text-align: center;
    color: rgba(148, 163, 184, 0.4);
    font-size: 0.82rem;
}

/* ── Player list ── */
.map-player-list,
.map-boss-list,
.map-spawn-list {
    min-height: 0;
    overflow-y: auto;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.15) transparent;
}

.map-player-list {
    flex: 1 1 auto;
    max-height: none;
}

.map-boss-list,
.map-spawn-list {
    flex: 0 0 auto;
    max-height: clamp(160px, 20vh, 280px);
}

.map-player-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: background 0.15s ease;
    border-bottom: 1px solid rgba(148, 163, 184, 0.04);
}

.map-player-item:hover {
    background: rgba(89, 195, 255, 0.08);
}

.map-player-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00ff88;
    flex-shrink: 0;
    box-shadow: 0 0 6px rgba(0, 255, 136, 0.4);
}

.map-player-dot.is-donator {
    background: #43d8d2;
    box-shadow: 0 0 8px rgba(67, 216, 210, 0.46);
}

.map-player-dot.is-admin {
    background: #05070b;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.42);
}

.map-player-info {
    flex: 1;
    min-width: 0;
}

.map-player-lookup-btn {
    flex-shrink: 0;
    border: 1px solid rgba(34, 197, 94, 0.32);
    background: rgba(34, 197, 94, 0.12);
    color: #86efac;
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.1;
}

.map-player-lookup-btn:hover {
    background: rgba(34, 197, 94, 0.2);
    color: #dcfce7;
}

.map-player-name {
    font-size: 0.92rem;
    font-weight: 600;
    color: #e2e8f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.map-player-meta {
    font-size: 0.74rem;
    color: rgba(148, 163, 184, 0.6);
}

.map-player-badges {
    display: flex;
    align-items: center;
    gap: 0.38rem;
    flex-wrap: wrap;
    margin-top: 0.34rem;
}

.map-player-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.25rem;
    padding: 0.12rem 0.48rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.48);
    color: rgba(226, 232, 240, 0.72);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1;
    text-transform: uppercase;
}

.map-player-badge.is-linked {
    border-color: rgba(34, 197, 94, 0.28);
    background: rgba(34, 197, 94, 0.14);
    color: #86efac;
}

.map-player-badge.is-unlinked {
    border-color: rgba(248, 113, 113, 0.26);
    background: rgba(248, 113, 113, 0.12);
    color: #fca5a5;
}

.map-player-badge.is-donator {
    border-color: rgba(45, 212, 191, 0.32);
    background: rgba(45, 212, 191, 0.14);
    color: #7be7df;
}

.map-player-badge.is-admin-role {
    border-color: rgba(251, 191, 36, 0.36);
    background: rgba(251, 191, 36, 0.14);
    color: #fcd34d;
}

.map-player-badge.is-moderator-role {
    border-color: rgba(167, 139, 250, 0.32);
    background: rgba(167, 139, 250, 0.14);
    color: #c4b5fd;
}

.map-player-level {
    font-size: 0.72rem;
    font-weight: 700;
    color: #59c3ff;
    flex-shrink: 0;
}

/* ── Boss list ── */
.map-boss-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1rem;
    cursor: pointer;
    transition: background 0.15s ease;
    border-bottom: 1px solid rgba(148, 163, 184, 0.04);
}

.map-boss-item:hover {
    background: rgba(255, 0, 85, 0.08);
}

.map-boss-icon {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    animation: bossPulse 3s ease-in-out infinite;
}

.map-boss-icon.raid { background: #ff0055; box-shadow: 0 0 8px rgba(255, 0, 85, 0.6); }
.map-boss-icon.story { width: 13px; height: 13px; background: #8d79ff; box-shadow: 0 0 10px rgba(141, 121, 255, 0.75); }

@keyframes bossPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.3); }
}

.map-boss-info {
    flex: 1;
    min-width: 0;
}

.map-boss-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: #ff6b4a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.map-boss-tag {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
    margin-right: 0.3rem;
}

.map-boss-tag.raid { background: rgba(255, 0, 85, 0.2); color: #ff0055; }
.map-boss-tag.story { background: rgba(141, 121, 255, 0.2); color: #8d79ff; }

.map-boss-detail {
    font-size: 0.7rem;
    color: rgba(148, 163, 184, 0.6);
}

.map-boss-level {
    font-size: 0.75rem;
    font-weight: 700;
    color: #ff0055;
    flex-shrink: 0;
}

.map-boss-level.story {
    color: #b89cff;
}

/* ── Spawn list ── */
.map-spawn-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 1rem;
    cursor: pointer;
    transition: background 0.15s ease;
    border-bottom: 1px solid rgba(148, 163, 184, 0.04);
}

.map-spawn-item:hover {
    background: rgba(148, 163, 184, 0.06);
}

.map-spawn-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.88);
    background: rgba(255, 255, 255, 0.18);
    flex-shrink: 0;
}

.map-spawn-dot.killed {
    width: 14px;
    height: 14px;
    border: 0;
    background: transparent;
    color: #ffd166;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.82), 0 0 10px rgba(255, 209, 102, 0.3);
}

.map-spawn-info {
    flex: 1;
    min-width: 0;
}

.map-spawn-name {
    font-size: 0.86rem;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.05;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.map-spawn-live-boss {
    font-size: 0.72rem;
    font-weight: 700;
    color: #ff7a98;
    line-height: 1.05;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.map-spawn-live-time {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #7cff7d;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
    line-height: 1.05;
}

.map-spawn-kill-detail {
    margin-top: 0.08rem;
}

.map-spawn-kill-boss {
    font-size: 0.72rem;
    font-weight: 700;
    color: #ffd166;
    line-height: 1.05;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.map-spawn-kill-meta {
    display: flex;
    align-items: center;
    gap: 0.28rem;
    min-width: 0;
}

.map-spawn-kill-actor {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgba(255, 244, 214, 0.88);
}

.map-spawn-kill-sep {
    flex-shrink: 0;
    color: rgba(255, 209, 102, 0.7);
}

/* ── Map markers — players ── */
.map-div-icon {
    background: transparent !important;
    border: 0 !important;
}

.player-marker-anchor,
.boss-marker-anchor,
.spawn-marker-anchor {
    position: relative;
    width: 0;
    height: 0;
}

.player-marker-anchor::before,
.boss-marker-anchor::before,
.spawn-marker-anchor::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
    border-radius: 999px;
}

.player-marker-anchor::before {
    width: 58px;
    height: 58px;
}

.boss-marker-anchor::before,
.spawn-marker-anchor::before {
    width: 40px;
    height: 40px;
}

/* Touch input: these invisible ::before circles ARE the marker hit areas (the
   Leaflet icon itself is iconSize:[0,0] and the visible dot/icon is
   pointer-events:none). Boss and spawn markers measured 40px across — just
   under the 44px touch floor — so on coarse pointers they grow to 44px.
   Only the transparent circle changes: the visible icon, the label stack and
   the [0,0] iconAnchor are untouched, so every marker stays pinned to exactly
   the same world coordinate.

   Player markers are deliberately NOT enlarged: they already measure 58px, the
   largest of the three. Growing them further would let a player swallow taps
   aimed at a boss or spawn standing on the same ground.

   This does not change how often the "Choose Marker" sheet appears — that is
   driven by OVERLAP_PICK_RADIUS_PX (20px) in map.js, measured from the tapped
   lat/lng, and is completely independent of these CSS hit circles. */
@media (pointer: coarse) {
    .boss-marker-anchor::before,
    .spawn-marker-anchor::before {
        width: 44px;
        height: 44px;
    }
}

.player-marker-anchor.interactive {
    cursor: pointer;
}

.player-marker-label {
    position: absolute;
    left: 0;
    bottom: 12px;
    transform: translateX(-50%);
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.9), 0 1px 2px rgba(0, 0, 0, 0.8),
                 1px 0 2px rgba(0, 0, 0, 0.8), -1px 0 2px rgba(0, 0, 0, 0.8);
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
}

.player-marker-level {
    font-size: 11px;
    color: #59c3ff;
}

.player-marker-dot {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #86ffd0 0%, #1df29a 45%, #00b86d 100%);
    border: 2px solid rgba(3, 22, 14, 0.88);
    box-shadow: 0 0 16px rgba(0, 255, 136, 0.68);
    pointer-events: none;
}

.player-marker-dot.is-donator {
    background: radial-gradient(circle at 35% 35%, #b9fff8 0%, #42d8d2 48%, #139aa0 100%);
    box-shadow: 0 0 18px rgba(67, 216, 210, 0.72);
}

.player-marker-dot.is-admin {
    background: radial-gradient(circle at 35% 35%, #3e434d 0%, #10141b 42%, #020304 100%);
    border: 2px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 0 18px rgba(0, 0, 0, 0.55);
}

.player-marker-glyph {
    font-size: 10px;
    color: rgba(3, 22, 14, 0.92);
    line-height: 1;
}

.player-marker-glyph.is-admin {
    color: rgba(244, 247, 251, 0.96);
}

.player-marker-glyph.is-donator {
    color: #ffd54a;
    text-shadow: 0 0 8px rgba(255, 213, 74, 0.32);
}

/* ── Map markers — bosses ── */
.boss-marker-stack {
    position: absolute;
    left: 0;
    bottom: 22px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    white-space: nowrap;
    pointer-events: none;
}

.boss-marker-live {
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #7CFF7D;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.92), 0 0 10px rgba(124, 255, 125, 0.25);
    line-height: 1.05;
    text-align: center;
}

.boss-marker-live.story {
    color: #d7c2ff;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.92), 0 0 10px rgba(170, 122, 255, 0.28);
}

.boss-marker-label {
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px;
    font-weight: 800;
    color: #ff0055;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.95), 0 1px 3px rgba(0, 0, 0, 0.9),
                 1px 0 3px rgba(0, 0, 0, 0.9), -1px 0 3px rgba(0, 0, 0, 0.9);
    line-height: 1.1;
    text-align: center;
}

.boss-marker-label.story {
    color: #8d79ff;
    font-size: 18px;
}

.boss-marker-sublabel {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.9);
}

.boss-marker-icon {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ff7ca9 0%, #ff2f74 46%, #cc003e 100%);
    border: 3px solid rgba(19, 3, 8, 0.82);
    box-shadow: 0 0 18px rgba(255, 0, 85, 0.82);
    animation: bossPulse 3s ease-in-out infinite;
}

.boss-marker-icon.story {
    width: 44px;
    height: 44px;
    background: radial-gradient(circle at 35% 35%, #cfb7ff 0%, #9a7bff 45%, #6f49ff 100%);
    border-color: rgba(26, 12, 52, 0.88);
    box-shadow: 0 0 18px rgba(141, 121, 255, 0.82);
}

.boss-marker-glyph {
    font-size: 15px;
    color: rgba(255, 245, 248, 0.96);
    line-height: 1;
}

/* ── Map markers — spawn locations (inactive) ── */
.spawn-marker-icon {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.96);
    background: rgba(23, 33, 48, 0.9);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
    pointer-events: none;
}

.spawn-marker-glyph {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.94);
    line-height: 1;
}

.spawn-marker-label-group {
    position: absolute;
    left: 0;
    top: 7px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    white-space: nowrap;
    pointer-events: none;
}

.spawn-marker-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.96);
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.96), 0 1px 3px rgba(0, 0, 0, 0.92);
    line-height: 1;
}

.spawn-marker-label {
    font-family: 'Rajdhani', sans-serif;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.96), 0 0 10px rgba(255, 0, 85, 0.25);
    white-space: nowrap;
    line-height: 1;
}

.spawn-marker-kill-label,
.map-spawn-kill-time,
.map-spawn-kill-actor,
.map-spawn-kill-sep {
    font-family: 'Rajdhani', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #ffd166;
    opacity: 0.95;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.96), 0 0 8px rgba(255, 209, 102, 0.18);
}

.map-spawn-kill-time {
    flex-shrink: 0;
}

#mapContainer.map-zoom-max .boss-marker-live {
    font-size: 16px;
}

#mapContainer.map-zoom-max .boss-marker-label {
    font-size: 18px;
}

#mapContainer.map-zoom-max .boss-marker-sublabel {
    font-size: 14px;
}

#mapContainer.map-zoom-max .spawn-marker-name {
    font-size: 15px;
}

#mapContainer.map-zoom-max .spawn-marker-label {
    font-size: 13px;
}

#mapContainer.map-zoom-max .spawn-marker-kill-label {
    font-size: 11px;
}

#mapContainer.map-zoom-far .spawn-marker-icon {
    width: 12px;
    height: 12px;
    border-width: 1px;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.18);
}

#mapContainer.map-zoom-far .spawn-marker.has-killed-boss .spawn-marker-icon {
    width: 14px;
    height: 14px;
}

#mapContainer.map-zoom-far .spawn-marker-glyph {
    font-size: 7px;
}

#mapContainer.map-zoom-far .spawn-marker-label-group {
    top: 4px;
}

#mapContainer.map-zoom-far .spawn-marker-name,
#mapContainer.map-zoom-far .spawn-marker-label,
#mapContainer.map-zoom-far .spawn-marker-kill-label {
    font-size: 8px;
    opacity: 0.65;
}

/* When a boss is active at this spawn, hide the spawn marker */
.spawn-marker.has-active-boss .spawn-marker-icon {
    display: none;
}

.spawn-marker.has-active-boss .spawn-marker-label-group {
    display: none;
}

.spawn-marker.has-killed-boss .spawn-marker-icon {
    width: 24px;
    height: 24px;
    border-color: rgba(255, 209, 102, 0.92);
    background: rgba(46, 24, 12, 0.92);
    box-shadow: 0 0 12px rgba(255, 209, 102, 0.35);
}

.spawn-marker.has-killed-boss .spawn-marker-glyph {
    font-size: 12px;
    color: #ffd166;
}

/* ── Maze event marker ── */
.maze-event-marker-anchor {
    position: relative;
    pointer-events: none;
}

.maze-event-marker-icon {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid rgba(255, 153, 0, 0.96);
    background: rgba(40, 20, 0, 0.92);
    box-shadow: 0 0 12px rgba(255, 153, 0, 0.45), 0 0 24px rgba(255, 153, 0, 0.18);
    pointer-events: none;
}

.maze-event-marker-glyph {
    font-size: 12px;
    color: #ff9900;
    line-height: 1;
}

.maze-event-marker-label-group {
    position: absolute;
    left: 0;
    top: 10px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    white-space: nowrap;
    pointer-events: none;
}

.maze-event-marker-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    font-weight: 800;
    color: #ff9900;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.96), 0 1px 3px rgba(0, 0, 0, 0.92);
    line-height: 1;
}

.maze-event-marker-label {
    font-family: 'Rajdhani', sans-serif;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #ffd166;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.96), 0 0 10px rgba(255, 153, 0, 0.25);
    white-space: nowrap;
    line-height: 1;
}

/* ── Live scrolling ticker ── */
.maze-event-ticker {
    position: relative;
    width: 120px;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
    pointer-events: none;
}

.maze-event-ticker-track {
    display: inline-block;
    white-space: nowrap;
    animation: maze-ticker-scroll 8s linear infinite;
}

.maze-event-ticker-text {
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #ff2d2d;
    text-shadow: 0 0 6px rgba(255, 30, 30, 0.7), 0 0 12px rgba(255, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.96);
    white-space: nowrap;
    line-height: 1;
    padding-right: 40px;
}

@keyframes maze-ticker-scroll {
    0%   { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
    /* Override the global * { animation-duration: 0.01ms !important } in style.css.
       The ticker is informational content, not decorative motion — keep it
       scrolling at a gentler pace so the text remains readable. */
    .maze-event-ticker-track {
        animation: maze-ticker-scroll 14s linear infinite !important;
    }
}

#mapContainer.map-zoom-max .maze-event-marker-name {
    font-size: 15px;
}

#mapContainer.map-zoom-max .maze-event-marker-label {
    font-size: 13px;
}

#mapContainer.map-zoom-max .maze-event-ticker {
    width: 150px;
}

#mapContainer.map-zoom-max .maze-event-ticker-text {
    font-size: 13px;
}

#mapContainer.map-zoom-far .maze-event-marker-icon {
    width: 16px;
    height: 16px;
    border-width: 1px;
    box-shadow: 0 0 6px rgba(255, 153, 0, 0.3);
}

#mapContainer.map-zoom-far .maze-event-marker-glyph {
    font-size: 8px;
}

#mapContainer.map-zoom-far .maze-event-marker-label-group {
    top: 5px;
}

#mapContainer.map-zoom-far .maze-event-marker-name,
#mapContainer.map-zoom-far .maze-event-marker-label {
    font-size: 8px;
    opacity: 0.65;
}

#mapContainer.map-zoom-far .maze-event-ticker {
    width: 70px;
}

#mapContainer.map-zoom-far .maze-event-ticker-text {
    font-size: 7px;
    opacity: 0.65;
}

/* ── Zone tooltip (hover) ── */
.no-build-zone-tooltip {
    background: rgba(20, 10, 0, 0.94);
    border: 1px solid rgba(255, 153, 0, 0.6);
    color: #ffd166;
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 6px 12px;
    border-radius: 6px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6), 0 0 8px rgba(255, 153, 0, 0.15);
}

.no-build-zone-tooltip .leaflet-tooltip-tip {
    border-top-color: rgba(255, 153, 0, 0.6);
}

/* ── Zone permanent label ── */
.map-zone-label {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}
.map-zone-label::before {
    display: none;
}
.mzl-inner {
    display: inline-block;
    background: rgba(15, 23, 42, 0.82);
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid currentColor;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    font-family: 'Inter', 'Rajdhani', sans-serif;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.3;
}
.map-zone-label-sub {
    display: block;
    font-size: 0.8em;
    opacity: 0.6;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#mapContainer.map-zoom-far .mzl-inner {
    font-size: 9px;
    opacity: 0.55;
    padding: 1px 5px;
}
#mapContainer.map-zoom-max .mzl-inner {
    font-size: 14px;
}

/* ── Back/home button ── */
.map-back-btn {
    position: absolute;
    top: var(--map-overlay-top-inset);
    left: calc(12px + env(safe-area-inset-left, 0px));
    z-index: 500;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0.45rem 0.85rem;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(8, 15, 29, 0.92);
    color: #e2e8f0;
    font-size: 0.78rem;
    font-weight: 600;
    font-family: 'Rajdhani', 'Inter', sans-serif;
    cursor: pointer;
    text-decoration: none;
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    transition: background 0.2s ease, color 0.2s ease;
}

.map-back-btn:hover {
    background: rgba(20, 35, 55, 0.95);
    color: #fff;
    text-decoration: none;
}

/* ── Left legend / filter control ── */
@media (min-width: 769px) {
    /* The desktop site header already exposes Home. Use this first map row for
       filters, immediately below the navigation, instead of a duplicate Home. */
    .map-back-btn {
        display: none;
    }

    /* Keep the filter trigger tight to the navigation/map seam. Mobile keeps
       its separate drawer/FAB anchor in the responsive block below. */
    .map-legend-control {
        top: 4px;
    }
}

.map-legend-control {
    position: absolute;
    top: var(--map-left-secondary-offset);
    left: 12px;
    z-index: 500;
    width: 236px;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.map-legend-toggle,
.map-legend-panel {
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(8, 15, 29, 0.92);
    backdrop-filter: blur(12px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.map-legend-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    align-self: flex-start;
    border-radius: 12px;
    color: #e2e8f0;
    padding: 0.5rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 700;
    font-family: 'Rajdhani', 'Inter', sans-serif;
}

.map-legend-toggle:hover {
    background: rgba(20, 35, 55, 0.95);
}

.map-legend-panel {
    border-radius: 16px;
    padding: 0.85rem 0.85rem 0.7rem;
    color: #e2e8f0;
    max-height: min(72vh, 680px);
    overflow-y: auto;
}

.map-mobile-panel-backdrop {
    position: absolute;
    inset: 0;
    z-index: 609;
    border: 0;
    padding: 0;
    background: rgba(2, 6, 23, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.map-mobile-panel-backdrop.is-active {
    opacity: 1;
    pointer-events: auto;
}

.map-mobile-panel-header {
    display: none;
}

.map-mobile-panel-close {
    border: 0;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.08);
    color: #e2e8f0;
}

.map-legend-control.is-collapsed .map-legend-panel {
    display: none;
}

.map-legend-kicker {
    margin-bottom: 0.55rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.82);
}

.map-legend-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.map-legend-section-title {
    margin-top: 0.2rem;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.74);
}

.map-legend-item {
    display: grid;
    grid-template-columns: 16px 14px minmax(0, 1fr);
    align-items: center;
    gap: 0.55rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(226, 232, 240, 0.92);
    cursor: pointer;
}

.map-legend-item input {
    margin: 0;
    accent-color: #59c3ff;
}

.map-legend-subgroup {
    margin: -0.1rem 0 0.25rem 1.75rem;
    padding-left: 0.6rem;
    border-left: 1px solid rgba(148, 163, 184, 0.16);
    display: grid;
    gap: 0.28rem;
}

.map-legend-subitem {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    align-items: center;
    gap: 0.45rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(191, 219, 254, 0.84);
    cursor: pointer;
}

.map-legend-subitem input {
    margin: 0;
    accent-color: #f59e0b;
}

.map-legend-subgroup[data-subgroup-for="skill_fruit_trees"] .map-legend-subitem input {
    accent-color: #a855f7;
}

.map-legend-swatch {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.24) inset;
}

.map-legend-swatch.players {
    background: #00ff88;
}

.map-legend-swatch.raid-spawns {
    background: rgba(255, 255, 255, 0.42);
}

.map-legend-swatch.active-bosses {
    background: #ff0055;
}

.map-legend-swatch.maze-event {
    background: #ff9900;
}

.map-legend-swatch.no-build-zone {
    background: transparent;
    border: 2px dashed #ff9900;
    box-shadow: none;
}

.map-legend-swatch.pal-habitats {
    background: #ef4444;
}

.map-legend-swatch.alpha-pals {
    border-radius: 5px;
    background: rgba(10, 18, 32, 0.7) url('/static/map_overlay_icons/256d9e6567946f2a.webp') center / cover no-repeat;
}

.map-legend-swatch.tower-bosses {
    border-radius: 5px;
    background: rgba(10, 18, 32, 0.7) url('/static/map_overlay_icons/9b0ed0a6f39d414d.webp') center / cover no-repeat;
}

.map-legend-swatch.rampaging-pals {
    border-radius: 5px;
    background: rgba(10, 18, 32, 0.7) url('/static/map_overlay_icons/22605f1341e45ac1.webp') center / cover no-repeat;
}

.map-legend-swatch.bounty-targets {
    border-radius: 5px;
    background: rgba(10, 18, 32, 0.7) url('/static/map_overlay_icons/405858a31efe418f.webp') center / cover no-repeat;
}

.map-legend-swatch.npc-locations {
    border-radius: 5px;
    background: rgba(10, 18, 32, 0.7) url('/static/map_overlay_icons/npc_merchant.svg') center / cover no-repeat;
}

.map-legend-swatch.dungeon-entrances {
    border-radius: 5px;
    background: rgba(10, 18, 32, 0.7) url('/static/map_overlay_icons/dungeon_entrance.svg') center / cover no-repeat;
}

/* Datamined field/alpha boss spawn points (client-rendered, default off). */
.map-legend-swatch.field-bosses {
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #fca5a5, #ef4444 70%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.map-legend-swatch.pal-eggs {
    border-radius: 5px;
    background: rgba(10, 18, 32, 0.7) url('/static/images/items/thumbnails/PalEgg_Leaf_03.png') center / cover no-repeat;
}

.map-legend-swatch.lifmunk-effigies {
    border-radius: 5px;
    background: rgba(10, 18, 32, 0.7) url('/static/images/items/thumbnails/Relic.png') center / cover no-repeat;
}

.map-legend-swatch.skill-fruit-trees {
    border-radius: 5px;
    background: rgba(10, 18, 32, 0.7) url('/static/images/items/thumbnails/SkillCard_RootLance.png') center / cover no-repeat;
}

.map-legend-swatch.fast-travel {
    border-radius: 5px;
    background: rgba(10, 18, 32, 0.7) url('/static/map_overlay_icons/23247ff2828319c6.webp') center / cover no-repeat;
}

.map-legend-swatch.player-bases {
    border-radius: 5px;
    background: rgba(10, 18, 32, 0.7) url('/static/map_overlay_icons/player_base_icon.png') center / cover no-repeat;
}

.map-legend-swatch.location-names {
    background: rgba(255, 255, 255, 0.58);
}

.map-legend-swatch.crude-oil-nodes,
.map-legend-swatch.ore-nodes,
.map-legend-swatch.coal-nodes,
.map-legend-swatch.sulfur-nodes,
.map-legend-swatch.pure-quartz-nodes,
.map-legend-swatch.hexolite-quartz-nodes,
.map-legend-swatch.chromite-nodes,
.map-legend-swatch.nightstar-sand-nodes,
.map-legend-swatch.beautiful-flower-nodes {
    border-radius: 5px;
    background-color: rgba(10, 18, 32, 0.7);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.map-legend-swatch.crude-oil-nodes {
    background-image: url('/static/images/items/thumbnails/CrudeOil.png');
}

.map-legend-swatch.ore-nodes {
    background-image: url('/static/images/items/thumbnails/CopperOre.png');
}

.map-legend-swatch.coal-nodes {
    background-image: url('/static/images/items/thumbnails/Coal.png');
}

.map-legend-swatch.sulfur-nodes {
    background-image: url('/static/images/items/thumbnails/Sulfur.png');
}

.map-legend-swatch.pure-quartz-nodes {
    background-image: url('/static/images/items/thumbnails/Quartz.png');
}

.map-legend-swatch.hexolite-quartz-nodes {
    background-image: url('/static/images/items/thumbnails/RainbowCrystal.png');
}

.map-legend-swatch.chromite-nodes {
    background-image: url('/static/images/items/thumbnails/Chromium.png');
}

.map-legend-swatch.nightstar-sand-nodes {
    background-image: url('/static/images/items/thumbnails/NightStone.png');
}

.map-legend-swatch.beautiful-flower-nodes {
    background-image: url('/static/images/items/thumbnails/Poppy.png');
}

.map-pal-search {
    display: grid;
    gap: 0.55rem;
    padding: 0.25rem 0 0.45rem;
}

.map-pal-search-label {
    display: block;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #f8fafc;
}

.map-pal-search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 0.45rem;
}

.map-pal-search-input-wrap {
    position: relative;
    min-width: 0;
}

.map-pal-search-input-icon {
    position: absolute;
    left: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(125, 211, 252, 0.9);
    font-size: 0.82rem;
    pointer-events: none;
}

.map-pal-search-input {
    width: 100%;
    min-width: 0;
    padding: 0.72rem 0.85rem 0.72rem 2.35rem;
    border: 1px solid rgba(56, 189, 248, 0.46);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(6, 18, 33, 0.96), rgba(8, 15, 27, 0.82));
    box-shadow: inset 0 0 0 1px rgba(125, 211, 252, 0.08);
    color: #f8fafc;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.2;
}

.map-pal-search-input::placeholder {
    color: rgba(191, 219, 254, 0.72);
}

.map-pal-search-input:focus {
    outline: none;
    border-color: rgba(125, 211, 252, 0.92);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.18), inset 0 0 0 1px rgba(125, 211, 252, 0.08);
}

.map-pal-search-btn {
    padding: 0.72rem 0.9rem;
    border: 1px solid rgba(56, 189, 248, 0.44);
    border-radius: 8px;
    background: rgba(14, 116, 144, 0.32);
    color: #e0f2fe;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.map-pal-search-btn.is-secondary {
    border-color: rgba(148, 163, 184, 0.28);
    background: rgba(15, 23, 42, 0.76);
    color: rgba(226, 232, 240, 0.9);
}

.map-pal-search-status {
    font-size: 0.74rem;
    line-height: 1.4;
    color: rgba(191, 219, 254, 0.88);
}

.map-pal-search-status.is-error {
    color: #fca5a5;
}

.map-pal-search-card {
    display: grid;
    gap: 0.65rem;
    padding: 0.7rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 8px;
    background: rgba(8, 15, 27, 0.56);
}

.map-pal-search-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.7rem;
}

.map-pal-search-copy {
    min-width: 0;
}

.map-pal-search-title {
    font-size: 0.92rem;
    font-weight: 800;
    color: #f8fafc;
    line-height: 1.2;
}

.map-pal-search-subtitle {
    margin-top: 0.15rem;
    font-size: 0.7rem;
    color: rgba(148, 163, 184, 0.88);
    word-break: break-word;
}

.map-pal-search-image {
    width: 54px;
    height: 54px;
    object-fit: contain;
    flex: 0 0 54px;
}

.map-pal-search-description {
    font-size: 0.76rem;
    line-height: 1.45;
    color: rgba(226, 232, 240, 0.88);
}

.map-pal-search-time-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.map-pal-search-time {
    padding: 0.38rem 0.58rem;
    border: 1px solid rgba(148, 163, 184, 0.26);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.84);
    color: rgba(226, 232, 240, 0.88);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}

.map-pal-search-time.is-active {
    border-color: rgba(251, 113, 133, 0.55);
    background: rgba(127, 29, 29, 0.46);
    color: #fff1f2;
}

.map-pal-search-time:disabled {
    opacity: 0.45;
}

.map-pal-search-counts {
    display: grid;
    gap: 0.2rem;
    font-size: 0.72rem;
    line-height: 1.35;
    color: rgba(191, 219, 254, 0.9);
}

.map-pal-search-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
}

.map-pal-search-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.42rem 0.5rem;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.74);
    font-size: 0.7rem;
    color: rgba(191, 219, 254, 0.88);
}

.map-pal-search-stat strong {
    color: #f8fafc;
    font-size: 0.78rem;
    font-weight: 800;
}

.map-pal-search-skills {
    display: grid;
    gap: 0.35rem;
}

.map-pal-search-skill {
    display: grid;
    gap: 0.1rem;
    padding: 0.45rem 0.52rem;
    border-left: 2px solid rgba(168, 85, 247, 0.46);
    background: rgba(15, 23, 42, 0.52);
    border-radius: 6px;
}

.map-pal-search-skill strong {
    font-size: 0.72rem;
    font-weight: 800;
    color: #f8fafc;
}

.map-pal-search-skill span {
    font-size: 0.67rem;
    line-height: 1.35;
    color: rgba(191, 219, 254, 0.82);
}

.map-pal-hotspot-tooltip {
    border: 1px solid rgba(248, 250, 252, 0.12);
    border-radius: 8px;
    background: rgba(8, 15, 27, 0.94);
    color: #f8fafc;
    font-size: 0.72rem;
    font-weight: 700;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.26);
}

.map-static-icon-shell,
.map-habitat-icon-shell {
    background: transparent !important;
    border: 0 !important;
}

.map-static-icon-marker {
    position: relative;
    width: var(--map-icon-size, 32px);
    height: var(--map-icon-size, 32px);
    border-radius: 7px;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.24), rgba(15, 23, 42, 0.1) 38%, rgba(2, 6, 23, 0.02) 100%);
    box-shadow: 0 8px 18px rgba(2, 6, 23, 0.34), 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}

.map-static-icon-marker::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 9px;
    border: 1px solid var(--map-icon-accent, rgba(248, 250, 252, 0.28));
    box-shadow: 0 0 12px rgba(248, 250, 252, 0.18);
}

.map-static-icon-marker img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 3px 8px rgba(2, 6, 23, 0.42));
}

.map-static-icon-marker.is-fallback {
    background:
        radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 42%),
        var(--map-icon-accent);
}

.map-static-icon-marker.is-round,
.map-static-icon-marker.is-round::before {
    border-radius: 999px;
}

.map-static-icon-marker.is-egg {
    transform: rotate(-8deg);
}

.map-static-icon-marker.is-egg img {
    transform: rotate(8deg);
}

.map-habitat-marker {
    position: relative;
    width: var(--heat-size, 30px);
    height: var(--heat-size, 30px);
    border-radius: 999px;
    pointer-events: auto;
}

.map-habitat-marker::before,
.map-habitat-marker::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 999px;
}

.map-habitat-marker::before {
    background: radial-gradient(circle, var(--heat-core, rgba(252, 165, 165, 0.95)) 0%, var(--heat-fill, rgba(239, 68, 68, 0.72)) 28%, rgba(239, 68, 68, 0.38) 56%, rgba(239, 68, 68, 0.08) 78%, transparent 100%);
    filter: blur(calc(var(--heat-blur, 10px) * 0.55));
    opacity: 0.96;
    transform: scale(1.18);
}

.map-habitat-marker::after {
    inset: 18%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.94) 0%, var(--heat-core, rgba(252, 165, 165, 0.95)) 42%, rgba(255, 255, 255, 0) 100%);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.24) inset;
}

.map-habitat-marker.is-night::before {
    background: radial-gradient(circle, var(--heat-core, rgba(216, 180, 254, 0.95)) 0%, var(--heat-fill, rgba(139, 92, 246, 0.72)) 28%, rgba(139, 92, 246, 0.38) 56%, rgba(139, 92, 246, 0.08) 78%, transparent 100%);
}

.map-habitat-marker-badge {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    min-width: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: rgba(2, 6, 23, 0.76);
    color: #f8fafc;
    font-family: 'Rajdhani', sans-serif;
    font-size: 10px;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(2, 6, 23, 0.28);
}

.map-marker-detail-panel {
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(148, 163, 184, 0.14);
}

.map-marker-detail-panel-title {
    margin-bottom: 0.65rem;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(191, 219, 254, 0.92);
}

@media (max-width: 480px) {
    .map-pal-search-row {
        grid-template-columns: 1fr;
    }

    .map-pal-search-stats {
        grid-template-columns: 1fr;
    }
}

.map-alert-overlay {
    position: absolute;
    inset: 0;
    z-index: 760;
    pointer-events: none;
    overflow: hidden;
}

.map-alert-banner {
    position: absolute;
    left: 50%;
    top: 10%;
    transform: translate(-50%, -24px);
    min-width: min(92vw, 760px);
    max-width: min(92vw, 980px);
    padding: 1rem 1.4rem 0.9rem;
    border: 2px solid rgba(255, 176, 176, 0.7);
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(129, 0, 16, 0.9), rgba(45, 0, 8, 0.88)),
        repeating-linear-gradient(180deg, rgba(255,255,255,0.04) 0 2px, rgba(0,0,0,0.02) 2px 4px);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.52), 0 0 24px rgba(255, 32, 32, 0.25);
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.map-alert-banner.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.map-alert-banner-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 226, 226, 0.94);
    text-align: center;
    text-shadow: 0 0 14px rgba(255, 0, 51, 0.4);
}

.map-alert-banner-message {
    margin-top: 0.25rem;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.55rem;
    line-height: 1.06;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #fff6f6;
    text-align: center;
    text-shadow: 0 0 12px rgba(255, 30, 30, 0.28), 0 2px 3px rgba(0, 0, 0, 0.72);
}

.map-restart-overlay {
    position: absolute;
    inset: 0;
    z-index: 750;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.map-restart-banner {
    min-width: min(92vw, 540px);
    max-width: min(92vw, 760px);
    padding: 1.15rem 1.35rem 1rem;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(6, 12, 22, 0.72);
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.44);
    text-align: center;
    color: #e2e8f0;
}

.map-restart-banner.is-restarting {
    border-color: rgba(255, 206, 102, 0.55);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.44), 0 0 0 1px rgba(255, 206, 102, 0.08);
}

.map-restart-banner.is-online {
    border-color: rgba(34, 197, 94, 0.55);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.44), 0 0 0 1px rgba(34, 197, 94, 0.12);
}

.map-restart-spinner {
    width: 48px;
    height: 48px;
    margin: 0 auto 0.85rem;
    border-radius: 999px;
    border: 4px solid rgba(255, 255, 255, 0.12);
    border-top-color: rgba(255, 206, 102, 0.95);
    animation: map-restart-spin 0.9s linear infinite;
}

.map-restart-banner.is-online .map-restart-spinner {
    border-top-color: rgba(34, 197, 94, 0.95);
}

.map-restart-banner-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.15rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.map-restart-banner-message {
    margin-top: 0.35rem;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.45rem;
    line-height: 1.05;
    font-weight: 800;
    text-transform: uppercase;
}

.map-restart-banner-detail {
    margin-top: 0.55rem;
    font-size: 0.92rem;
    color: rgba(226, 232, 240, 0.82);
}

@keyframes map-restart-spin {
    to {
        transform: rotate(360deg);
    }
}

.map-chat-panel {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 520;
    width: min(420px, calc(100vw - 24px));
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 16px;
    background: rgba(8, 15, 29, 0.92);
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

.map-chat-panel.is-public-chat {
    width: min(340px, calc(100vw - 24px));
    border-radius: 12px;
}

.map-chat-peek-stack {
    position: absolute;
    left: 12px;
    /* The bottom-left "In-Game Chat" panel was removed in the 2026-07 overhaul,
       so the floating chat toasts now rise from just above the map floor. Their
       upward travel is capped in the keyframe below so they always fade out
       before reaching the Legend control in the top-left. */
    bottom: 18px;
    z-index: 519;
    width: min(360px, calc(100vw - 24px));
    max-height: calc(100% - 120px);
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 0.4rem;
    pointer-events: none;
    overflow: visible;
}

.map-chat-peek {
    padding: 0.55rem 0.7rem 0.5rem;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(8, 15, 29, 0.78);
    color: rgba(241, 245, 249, 0.96);
    box-shadow: 0 12px 24px rgba(2, 6, 12, 0.28);
    backdrop-filter: blur(10px);
    opacity: 0;
    transform: translateY(10px);
    animation: map-chat-peek-in 180ms ease-out forwards;
}

.map-chat-peek.is-fading {
    animation: map-chat-peek-out 260ms ease-in forwards;
}

.map-chat-peek-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.18rem;
}

.map-chat-peek-author {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.84rem;
    font-weight: 700;
    color: #f8fafc;
}

.map-chat-peek-time {
    font-size: 0.68rem;
    color: rgba(191, 219, 254, 0.82);
}

.map-chat-peek-message {
    font-size: 0.82rem;
    line-height: 1.18;
    word-break: break-word;
}

.map-chat-peek.chat {
    border-left: 3px solid rgba(34, 197, 94, 0.9);
}

.map-chat-peek.system_broadcast {
    border-left: 3px solid rgba(125, 211, 252, 0.92);
}

.map-chat-peek.alert {
    border-left: 3px solid rgba(248, 113, 113, 0.95);
    background: rgba(66, 16, 24, 0.8);
}

/* ── New-style chat/alert peek bubbles ── */
.map-chat-peek-bubble {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(8, 15, 29, 0.82);
    backdrop-filter: blur(10px);
    font-size: 0.78rem;
    color: rgba(226, 232, 240, 0.8);
    opacity: 0;
    transform: translateY(6px);
    animation: map-chat-peek-in 180ms ease-out forwards;
    min-width: 0;
    overflow: hidden;
    pointer-events: none;
}

.map-chat-peek-bubble.is-fading {
    animation: map-chat-peek-out 300ms ease-in forwards;
}

.map-chat-peek-bubble.is-alert {
    border-color: rgba(255, 176, 176, 0.35);
    background:
        linear-gradient(180deg, rgba(129, 0, 16, 0.85), rgba(45, 0, 8, 0.8));
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3), 0 0 16px rgba(255, 32, 32, 0.15);
    color: #fff6f6;
}

.map-chat-peek-bubble.is-alert .map-chat-peek-bubble-author {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 226, 226, 0.94);
    text-shadow: 0 0 10px rgba(255, 0, 51, 0.3);
}

.map-chat-peek-bubble.is-alert .map-chat-peek-bubble-text {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 800;
    font-size: 0.88rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-shadow: 0 0 8px rgba(255, 30, 30, 0.2);
}

.map-chat-peek-bubble.is-alert .map-chat-peek-bubble-server {
    color: rgba(255, 180, 180, 0.6);
}

.map-chat-peek-bubble-server {
    flex-shrink: 0;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.5);
    white-space: nowrap;
}

.map-chat-peek-bubble-author {
    flex-shrink: 0;
    font-weight: 700;
    color: rgba(226, 232, 240, 0.9);
    white-space: nowrap;
}

.map-chat-peek-bubble-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Floating live-chat toasts (2026-07 overhaul) ──────────────────────
   Ephemeral messages that rise from the bottom-left and fade out before
   reaching the Legend. On-theme TRANSPARENT-RED fire fill (not the old
   blue), light text, one keyframe handling entrance + rise + fade whose
   duration map.js sets per-bubble. Alerts keep their stronger red skin. */
.map-chat-peek-bubble.is-float {
    max-width: min(360px, calc(100vw - 28px));
    background: linear-gradient(180deg, rgba(255, 42, 12, 0.34), rgba(120, 8, 0, 0.26));
    border: 1px solid rgba(255, 120, 40, 0.5);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.42), 0 0 16px rgba(255, 48, 0, 0.22);
    color: #fff2ea;
    animation-name: map-chat-float-up;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    animation-duration: 5200ms; /* fallback; map.js overrides per-bubble */
}
.map-chat-peek-bubble.is-float .map-chat-peek-bubble-author {
    color: #ffe9b0;
}
.map-chat-peek-bubble.is-float .map-chat-peek-bubble-server {
    color: rgba(255, 200, 150, 0.72);
}
/* is-fading is unused for float toasts (single keyframe drives the fade) but
   guard against it re-triggering a competing animation just in case. */
.map-chat-peek-bubble.is-float.is-fading {
    animation-name: map-chat-float-up;
}

@keyframes map-chat-float-up {
    0%   { opacity: 0; transform: translateY(14px); }
    9%   { opacity: 1; transform: translateY(0); }
    72%  { opacity: 1; transform: translateY(-82px); }
    100% { opacity: 0; transform: translateY(-124px); }
}
@media (prefers-reduced-motion: reduce) {
    @keyframes map-chat-float-up {
        0%   { opacity: 0; }
        9%   { opacity: 1; }
        80%  { opacity: 1; }
        100% { opacity: 0; }
    }
}

/* ================================================================
   PER-SERVER LIVE COUNTDOWN STACK (top-right, under Map Coordinates)
   Raid-boss status + next-restart, one row per server. Fire/gold
   dark-glass to match the T7 theme (tokens from t7-theme.css :root).
   ================================================================ */
/* --map-countdown-top-offset is a FLOOR published by map.js
   (getTopControlsClearance): the measured bottom of .map-top-controls, but only
   when the two actually overlap horizontally. Every `top` on this element takes
   max() of its own baseline and that floor, so the measurement can only push
   the stack down out of the pills — it can never undo a breakpoint's intent.
   Without it the stack sits ON the centred server-pill strip and those pills
   stop responding to taps (they are a sibling at the same z-index, and the
   stack is later in the DOM). Default 0px = no override. */
.map-countdown-stack {
    position: absolute;
    top: max(var(--map-overlay-top-inset), var(--map-countdown-top-offset, 0px));
    right: calc(var(--map-countdown-right-offset, 12px) + env(safe-area-inset-right, 0px));
    z-index: 500;
    width: min(260px, calc(100vw - var(--map-countdown-right-offset, 12px) - 20px));
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: auto;
}
/* Slide below the admin coordinate HUD when it's present so they never
   overlap (mirrors the legacy restart-panel offset rule). */
.map-admin-hud:not(.is-hidden) ~ .map-countdown-stack {
    top: max(calc(var(--map-overlay-top-inset) + 152px), var(--map-countdown-top-offset, 0px));
}
.map-countdown-group {
    border-radius: 14px;
    border: 1px solid var(--gold-dark, rgba(255, 215, 0, 0.28));
    background: linear-gradient(135deg, rgba(30, 5, 0, 0.9), rgba(10, 0, 0, 0.94), rgba(40, 8, 0, 0.9));
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.7), inset 0 0 15px rgba(255, 69, 0, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 0.5rem 0.6rem 0.55rem;
    min-width: 0;
    overflow: hidden;
}
.map-countdown-group-title {
    font-family: 'Rajdhani', 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fire-yellow, #ffd54d);
    text-shadow: 0 0 8px rgba(255, 69, 0, 0.35);
    margin-bottom: 0.4rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.map-countdown-group-title i {
    margin-right: 0.32rem;
    color: var(--fire-orange, #ff6b1a);
}
.map-countdown-group-title-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Compact "most urgent value in this group" headline. Only ever revealed
   while the group is collapsed (mobile) — expanded groups show the real rows,
   so on desktop this stays inert. */
.map-countdown-group-summary {
    display: none;
}
.map-countdown-rows {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    min-width: 0;
}
.map-countdown-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.28rem 0.45rem;
    border-radius: 9px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 69, 0, 0.16);
    min-width: 0;
}
.map-countdown-row-server {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    font-family: 'Rajdhani', 'Inter', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    color: #f4e9d6;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.map-countdown-row-meta {
    font-size: 0.66rem;
    font-weight: 600;
    color: rgba(244, 233, 214, 0.66);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}
.map-countdown-row-time {
    flex-shrink: 0;
    font-family: 'Rajdhani', 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    color: #ffffff;
    text-shadow: 0 0 8px rgba(255, 69, 0, 0.3);
    white-space: nowrap;
    text-align: right;
    min-width: 3.4rem;
}
.map-countdown-row-time.is-soon {
    color: var(--fire-yellow, #ffd54d);
    text-shadow: 0 0 12px var(--fire-orange, #ff6b1a);
    animation: map-restart-pulse 1.6s ease-in-out infinite;
}
.map-countdown-row-time.is-restarting {
    color: var(--fire-red, #ff2d2d);
    text-shadow: 0 0 12px rgba(255, 45, 45, 0.7);
    animation: map-restart-pulse 1.3s ease-in-out infinite;
}
/* Desktop keeps both groups expanded, but the map should remain the dominant
   surface. Tighten the cards and rows without changing the mobile chip/touch
   treatment below. */
@media (min-width: 769px) {
    .map-countdown-stack {
        width: min(216px, calc(100vw - var(--map-countdown-right-offset, 12px) - 20px));
        gap: 0.3rem;
    }
    .map-countdown-group {
        border-radius: 10px;
        padding: 0.34rem 0.4rem 0.38rem;
    }
    .map-countdown-group-title {
        margin-bottom: 0.22rem;
        font-size: 0.62rem;
        letter-spacing: 0.065em;
    }
    .map-countdown-group-title i {
        margin-right: 0.24rem;
    }
    .map-countdown-rows {
        gap: 0.16rem;
    }
    .map-countdown-row {
        gap: 0.34rem;
        padding: 0.16rem 0.3rem;
        border-radius: 7px;
    }
    .map-countdown-row-server {
        flex-direction: row;
        align-items: baseline;
        gap: 0.22rem;
        font-size: 0.72rem;
        line-height: 1.05;
    }
    .map-countdown-row-meta {
        max-width: 108px;
        font-size: 0.56rem;
        line-height: 1.05;
    }
    .map-countdown-row-time {
        min-width: 2.9rem;
        font-size: 0.76rem;
    }
}
/* ── Mobile: collapse each group to a tap-to-expand chip ───────────────────
   This stack is an absolutely-positioned overlay sitting ON TOP of the
   Leaflet container (a sibling element, so Leaflet never sees touches that
   land on it). Left in its desktop layout it renders two always-open groups
   with one row per server — ~450px tall on a 5-server fleet — which covered
   most of a phone screen AND swallowed every pan/zoom touch underneath it.
   On phones each group now collapses to a ~42px title chip carrying a live
   summary of its most urgent value, and expands on tap — the same
   collapsible-title pattern the legend sections use further down this file.
   Nothing is hidden: the headline number stays visible while collapsed and
   the full per-server rows are one tap away. */
@media (max-width: 768px) {
    .map-countdown-stack {
        /* Clear the 52px players FAB (.map-sidebar-toggle), which is anchored
           to this exact corner at the same z-index and otherwise sits on top
           of the first group's title. The measured --map-countdown-top-offset
           floor (see the base rule) raises this further whenever the centred
           server-pill strip reaches into this column. */
        top: max(calc(var(--map-overlay-top-inset) + 60px), var(--map-countdown-top-offset, 0px));
        width: min(230px, calc(100vw - var(--map-countdown-right-offset, 12px) - 16px));
        /* Hard ceiling so expanding a group can never take the screen back:
           the stack scrolls internally instead of growing with server count. */
        max-height: min(42vh, 320px);
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        /* Container itself is inert — only the chips take touches, so the dead
           space beside a narrow collapsed chip still pans the map. */
        pointer-events: none;
    }

    /* The admin coordinate HUD is display:none on phones but keeps its
       :not(.is-hidden) state, so its desktop offset rule would otherwise shove
       the stack 152px down the screen for admin viewers. */
    .map-admin-hud:not(.is-hidden) ~ .map-countdown-stack {
        top: max(calc(var(--map-overlay-top-inset) + 60px), var(--map-countdown-top-offset, 0px));
    }

    .map-countdown-group {
        pointer-events: auto;
        max-width: 100%;
        padding: 0;
        /* Flex children shrink by default: against the max-height above the
           two groups would squash to fit and — because the group is
           overflow:hidden — silently clip the per-server rows to a few px
           instead of letting the stack scroll. Keep them at natural height. */
        flex-shrink: 0;
    }
    /* Collapsed chips shrink to their text instead of stretching the full
       stack width, giving the map back the space to their left. */
    .map-countdown-group.is-collapsed {
        align-self: flex-end;
    }

    /* map.js marks the titles collapsible only while the mobile layout is
       active, so this whole tap-target treatment is self-gating. */
    .map-countdown-group-title[data-collapsible] {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        /* border-box or the 40px floor stacks on top of the padding and the
           "compact" chip comes out 56px tall. */
        box-sizing: border-box;
        min-height: 42px;
        margin-bottom: 0;
        padding: 0.4rem 0.6rem;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .map-countdown-group-title[data-collapsible] i {
        margin-right: 0;
        flex-shrink: 0;
    }
    .map-countdown-group-title[data-collapsible]::after {
        content: "\f078";
        font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
        font-weight: 900;
        font-size: 0.68rem;
        color: rgba(255, 215, 0, 0.7);
        margin-left: auto;
        flex-shrink: 0;
        transition: transform 0.2s ease;
    }
    .map-countdown-group.is-collapsed .map-countdown-group-title[data-collapsible]::after {
        transform: rotate(-90deg);
        /* Collapsed, the summary owns the margin-left:auto spacer, so the
           chevron only needs a small gap after it. */
        margin-left: 0.3rem;
    }
    .map-countdown-group.is-collapsed .map-countdown-group-summary {
        display: inline-block;
        flex-shrink: 0;
        margin-left: auto;
        font-size: 0.74rem;
        font-weight: 800;
        letter-spacing: 0.02em;
        color: #ffffff;
        white-space: nowrap;
    }
    .map-countdown-group-summary.is-soon {
        color: var(--fire-yellow, #ffd54d);
    }
    .map-countdown-group-summary.is-restarting {
        color: var(--fire-red, #ff2d2d);
    }

    /* The whole point of the collapse: the per-server rows are what made this
       overlay screen-sized, so they are what folds away behind the chip. */
    .map-countdown-group.is-collapsed .map-countdown-rows {
        display: none;
    }

    .map-countdown-group:not(.is-collapsed) .map-countdown-rows {
        padding: 0.45rem 0.6rem 0.55rem;
        border-top: 1px solid rgba(255, 69, 0, 0.14);
    }

    .map-countdown-row-server { font-size: 0.78rem; }
    .map-countdown-row-time { font-size: 0.84rem; min-width: 3rem; }
    /* Comfortable tap/read height for the per-server rows once expanded. */
    .map-countdown-row { min-height: 34px; }
}

/* Very small screens: keep the expanded panel from eating the width too. */
@media (max-width: 380px) {
    .map-countdown-stack {
        width: min(206px, calc(100vw - var(--map-countdown-right-offset, 12px) - 16px));
    }
    .map-countdown-group-title[data-collapsible] {
        font-size: 0.68rem;
        padding-inline: 0.5rem;
    }
    .map-countdown-group.is-collapsed .map-countdown-group-summary {
        font-size: 0.7rem;
    }
}

.map-chat-panel.is-collapsed .map-chat-panel-body {
    display: none;
}

/* 2026-07 overhaul: remove the bottom-left "In-Game Chat" bar/button. When
   collapsed the panel is fully hidden (regular users just see the floating
   toasts). Admins re-open the full panel + composer via the headset FAB,
   which un-collapses it, so it re-appears then. */
.map-chat-panel.is-collapsed {
    display: none;
}
@media (max-width: 768px) {
    /* Keep the rising toasts clear of the global bottom nav on phones. */
    .map-chat-peek-stack {
        bottom: 96px;
        max-height: calc(100% - 200px);
        width: min(72vw, 340px);
    }
}

.map-chat-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.8rem 0.95rem 0.75rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
}

.map-chat-panel-header > :first-child {
    min-width: 0;
}

.map-chat-panel.is-public-chat .map-chat-panel-header {
    gap: 0.55rem;
    padding: 0.58rem 0.72rem 0.54rem;
}

.map-chat-panel-kicker {
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(125, 211, 252, 0.82);
}

.map-chat-panel.is-public-chat .map-chat-panel-kicker {
    font-size: 0.58rem;
}

.map-chat-panel-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #f8fafc;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.map-chat-panel.is-public-chat .map-chat-panel-title {
    font-size: 0.88rem;
}

.map-chat-panel-toggle {
    border: 0;
    background: transparent;
    color: rgba(226, 232, 240, 0.88);
    width: 32px;
    height: 32px;
    border-radius: 999px;
}

.map-chat-panel.is-public-chat .map-chat-panel-toggle {
    width: 28px;
    height: 28px;
}

.map-chat-panel-toggle:hover {
    background: rgba(148, 163, 184, 0.1);
}

.map-chat-panel.is-collapsed .map-chat-panel-header {
    border-bottom: 0;
}

.map-chat-panel-body {
    padding: 0.5rem 0;
}

.map-chat-panel.is-public-chat .map-chat-panel-body {
    padding: 0.32rem 0;
}

.map-chat-feed {
    max-height: 280px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0 0.65rem 0.65rem;
}

.map-chat-panel.is-public-chat .map-chat-feed {
    max-height: 220px;
    gap: 0.35rem;
    padding: 0 0.5rem 0.5rem;
}

.map-chat-history-status {
    position: sticky;
    top: 0;
    z-index: 1;
    margin-bottom: 0.15rem;
    padding: 0.2rem 0.3rem 0.35rem;
    font-size: 0.7rem;
    text-align: center;
    color: rgba(148, 163, 184, 0.76);
    background: linear-gradient(180deg, rgba(8, 15, 29, 0.96), rgba(8, 15, 29, 0.72));
}

.map-chat-panel.is-public-chat .map-chat-history-status {
    padding: 0.14rem 0.18rem 0.24rem;
    font-size: 0.64rem;
}

.map-chat-empty {
    padding: 0.9rem 0.5rem;
    color: rgba(148, 163, 184, 0.7);
    font-size: 0.84rem;
    text-align: center;
}

.map-chat-panel.is-public-chat .map-chat-empty {
    padding: 0.68rem 0.4rem;
    font-size: 0.76rem;
}

.map-chat-entry {
    padding: 0.55rem 0.65rem 0.5rem;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.08);
}

.map-chat-panel.is-public-chat .map-chat-entry {
    padding: 0.44rem 0.52rem 0.4rem;
    border-radius: 10px;
}

.map-chat-entry.chat {
    border-left: 3px solid rgba(34, 197, 94, 0.9);
}

.map-chat-entry.system_broadcast {
    border-left: 3px solid rgba(125, 211, 252, 0.92);
    background: rgba(10, 28, 42, 0.76);
}

.map-chat-entry.alert {
    border-left: 3px solid rgba(248, 113, 113, 0.95);
    background: rgba(60, 10, 18, 0.76);
}

.map-chat-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    margin-bottom: 0.18rem;
}

.map-chat-panel.is-public-chat .map-chat-meta {
    gap: 0.45rem;
    margin-bottom: 0.1rem;
}

.map-chat-author {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.84rem;
    font-weight: 700;
    color: #f8fafc;
}

.map-chat-panel.is-public-chat .map-chat-author {
    font-size: 0.78rem;
}

.map-chat-server {
    font-size: 0.7rem;
    color: rgba(148, 163, 184, 0.72);
}

.map-chat-panel.is-public-chat .map-chat-server {
    font-size: 0.62rem;
}

.map-chat-message {
    font-size: 0.88rem;
    line-height: 1.2;
    color: rgba(226, 232, 240, 0.94);
    word-break: break-word;
}

.map-chat-panel.is-public-chat .map-chat-message {
    font-size: 0.8rem;
    line-height: 1.14;
}

.map-chat-admin {
    border-top: 1px solid rgba(148, 163, 184, 0.08);
    padding: 0.7rem 0.65rem 0.65rem;
    background: rgba(4, 10, 20, 0.86);
}

.map-chat-admin.is-hidden {
    display: none;
}

.map-chat-admin-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: #f8fafc;
    margin-bottom: 0.45rem;
}

.map-chat-admin-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.4rem;
}

.map-chat-admin-help {
    margin-top: 0.4rem;
    font-size: 0.72rem;
    color: rgba(148, 163, 184, 0.8);
}

.map-send-status {
    margin-top: 0.55rem;
    padding: 0.7rem 0.8rem;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(15, 23, 42, 0.5);
}

.map-send-status.is-idle {
    border-color: rgba(148, 163, 184, 0.16);
    background: rgba(15, 23, 42, 0.46);
}

.map-send-status.is-info {
    border-color: rgba(96, 165, 250, 0.32);
    background: rgba(30, 64, 175, 0.18);
}

.map-send-status.is-success {
    border-color: rgba(74, 222, 128, 0.34);
    background: rgba(20, 83, 45, 0.26);
}

.map-send-status.is-warning {
    border-color: rgba(251, 191, 36, 0.34);
    background: rgba(120, 53, 15, 0.24);
}

.map-send-status.is-danger {
    border-color: rgba(248, 113, 113, 0.34);
    background: rgba(127, 29, 29, 0.24);
}

.map-send-status-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.map-send-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.18);
    color: #e2e8f0;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.map-send-status.is-info .map-send-status-badge {
    background: rgba(96, 165, 250, 0.2);
    color: #dbeafe;
}

.map-send-status.is-success .map-send-status-badge {
    background: rgba(74, 222, 128, 0.18);
    color: #dcfce7;
}

.map-send-status.is-warning .map-send-status-badge {
    background: rgba(251, 191, 36, 0.22);
    color: #fef3c7;
}

.map-send-status.is-danger .map-send-status-badge {
    background: rgba(248, 113, 113, 0.2);
    color: #fee2e2;
}

.map-send-status-headline {
    font-size: 0.8rem;
    font-weight: 700;
    color: #f8fafc;
}

.map-send-status-meta {
    margin-top: 0.35rem;
    font-size: 0.7rem;
    color: rgba(226, 232, 240, 0.72);
}

.map-send-status-lines {
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
    margin-top: 0.45rem;
}

.map-send-status-line {
    font-size: 0.72rem;
    color: rgba(226, 232, 240, 0.86);
    word-break: break-word;
}

.map-chat-admin-compose {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.45rem;
    margin-top: 0.5rem;
}

.map-chat-admin .form-select,
.map-chat-admin .form-control {
    background: rgba(15, 23, 42, 0.92);
    border-color: rgba(148, 163, 184, 0.18);
    color: #f8fafc;
}

.map-chat-admin .form-select:focus,
.map-chat-admin .form-control:focus {
    border-color: rgba(96, 165, 250, 0.55);
    box-shadow: 0 0 0 0.18rem rgba(59, 130, 246, 0.16);
}

.map-admin-base-hit-area {
    cursor: pointer;
}

/* ── Admin Chat FAB (mobile only) ── */
.map-admin-chat-fab {
    display: none;
}

@keyframes map-chat-peek-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes map-chat-peek-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-8px);
    }
}

.map-boss-reward-modal {
    background: linear-gradient(180deg, rgba(10, 14, 28, 0.98), rgba(14, 23, 42, 0.98));
    color: #f8fafc;
    border: 1px solid rgba(148, 163, 184, 0.16);
}

#mapBossRewardModal.is-story-boss .map-boss-reward-modal {
    border-color: rgba(141, 121, 255, 0.35);
    box-shadow: 0 16px 40px rgba(53, 22, 102, 0.35);
}

#mapBossRewardModal.is-story-boss .map-boss-reward-section-title,
#mapBossRewardModal.is-story-boss .map-boss-reward-summary-value {
    color: #eadfff;
}

.map-boss-reward-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.map-boss-reward-summary-card {
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.76);
    padding: 0.8rem 0.9rem;
}

.map-boss-reward-summary-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(148, 163, 184, 0.8);
}

.map-boss-reward-summary-value {
    margin-top: 0.2rem;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.02rem;
    font-weight: 700;
    color: #f8fafc;
}

.map-boss-reward-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.map-boss-reward-section {
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.68);
    padding: 0.8rem 0.9rem;
}

.map-boss-reward-section-full {
    grid-column: 1 / -1;
}

.map-boss-reward-section-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: #f8fafc;
    margin-bottom: 0.45rem;
}

.map-boss-reward-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.map-boss-reward-row {
    border-radius: 10px;
    background: rgba(2, 8, 23, 0.58);
    padding: 0.55rem 0.65rem;
}

.map-boss-reward-row-name {
    font-size: 0.86rem;
    font-weight: 600;
    color: #f8fafc;
}

.map-boss-reward-row-meta {
    margin-top: 0.15rem;
    font-size: 0.76rem;
    color: rgba(148, 163, 184, 0.84);
}

.map-boss-reward-empty {
    color: rgba(148, 163, 184, 0.78);
    font-size: 0.82rem;
}

.map-boss-reward-footnote {
    margin-top: 0.9rem;
    font-size: 0.78rem;
    color: rgba(148, 163, 184, 0.82);
}

/* ── Sidebar toggle (mobile) ── */
.map-sidebar-toggle {
    display: none;
    position: absolute;
    top: var(--map-overlay-top-inset);
    right: calc(12px + env(safe-area-inset-right, 0px));
    z-index: 500;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(8, 15, 29, 0.92);
    color: #e2e8f0;
    font-size: 1.1rem;
    cursor: pointer;
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    transition: background 0.2s ease;
}

.map-sidebar-toggle:hover {
    background: rgba(20, 35, 55, 0.95);
}

.map-sidebar-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    font-size: 0.6rem;
    font-weight: 700;
    background: #ff6b4a;
    color: #fff;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    border-radius: 8px;
    text-align: center;
    padding: 0 3px;
}

.map-player-admin-id {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.54);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.map-admin-hud {
    position: absolute;
    top: var(--map-overlay-top-inset);
    right: calc(var(--map-admin-hud-right-offset, 12px) + env(safe-area-inset-right, 0px));
    z-index: 500;
    min-width: 240px;
    max-width: min(320px, calc(100vw - var(--map-admin-hud-right-offset, 12px) - 24px));
    padding: 0.7rem 0.85rem;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(8, 15, 29, 0.9);
    color: #e2e8f0;
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42);
}

.map-admin-hud.is-hidden {
    display: none;
}

.map-admin-hud-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.86);
}

.map-admin-hud-coords {
    margin-top: 0.25rem;
    font-size: 0.84rem;
    font-weight: 700;
    color: #ffffff;
}

.map-admin-hud-help {
    margin-top: 0.18rem;
    font-size: 0.72rem;
    color: rgba(148, 163, 184, 0.72);
}

.map-admin-hud-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.32rem;
    margin-top: 0.55rem;
}

.map-admin-hud-mode {
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(15, 23, 42, 0.82);
    color: rgba(226, 232, 240, 0.84);
    border-radius: 999px;
    min-height: 1.72rem;
    padding: 0.18rem 0.55rem;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
}

.map-admin-hud-mode.is-active {
    border-color: rgba(96, 165, 250, 0.34);
    background: rgba(37, 99, 235, 0.22);
    color: #eff6ff;
}

/* Mobile-only chrome injected inside the admin drawer; hidden by default
   and unhidden inside the @media (max-width: 768px) block below. */
.map-admin-section-nav,
.map-admin-drawer-footer-mobile,
.map-admin-quick-actions-toggle,
.map-sidebar-tabs,
.map-legend-section-count,
.map-legend-reset-row {
    display: none;
}

.map-admin-drawer {
    --map-admin-drawer-width: min(640px, calc(100vw - 24px));
    position: absolute;
    top: var(--map-overlay-top-inset);
    right: 12px;
    bottom: max(12px, calc(env(safe-area-inset-bottom, 0px) + 12px));
    width: var(--map-admin-drawer-width);
    max-width: calc(100vw - 24px);
    z-index: 640;
    pointer-events: none;
}

.map-admin-drawer.is-open {
    pointer-events: auto;
}

.map-admin-drawer-panel {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    transform: translateX(calc(100% + 20px));
    opacity: 0;
    transition: transform 0.22s ease, opacity 0.22s ease;
    pointer-events: auto;
    box-shadow: -16px 0 36px rgba(0, 0, 0, 0.42);
    container-type: inline-size;
    container-name: map-admin-drawer;
}

.map-admin-drawer.is-open .map-admin-drawer-panel {
    transform: translateX(0);
    opacity: 1;
}

.map-admin-drawer-resize-handle {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 14px;
    border: 0;
    padding: 0;
    background: linear-gradient(180deg, rgba(89, 195, 255, 0.12), rgba(89, 195, 255, 0.02));
    border-right: 1px solid rgba(148, 163, 184, 0.12);
    cursor: ew-resize;
    touch-action: none;
    opacity: 0.74;
    transition: opacity 0.18s ease, background 0.18s ease;
    z-index: 3;
}

.map-admin-drawer-resize-handle::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 4px;
    height: 72px;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background: repeating-linear-gradient(180deg, rgba(226, 232, 240, 0.58) 0 6px, transparent 6px 12px);
}

.map-admin-drawer-panel:hover .map-admin-drawer-resize-handle,
.map-admin-drawer-resize-handle:focus-visible,
.map-admin-drawer.is-resizing .map-admin-drawer-resize-handle {
    opacity: 1;
    background: linear-gradient(180deg, rgba(89, 195, 255, 0.18), rgba(89, 195, 255, 0.06));
}

.map-admin-drawer-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 1rem 1.05rem 0.9rem 1.4rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(8, 15, 29, 0.99), rgba(8, 15, 29, 0.92));
    backdrop-filter: blur(10px);
}

.map-admin-drawer-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1rem 1.05rem 1.1rem 1.4rem;
}

.map-admin-modal {
    background: linear-gradient(180deg, rgba(8, 15, 29, 0.98), rgba(5, 10, 18, 0.98));
    color: #e2e8f0;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.map-admin-modal-kicker {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #59c3ff;
}

.map-admin-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.map-admin-summary-card,
.map-admin-section {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
    padding: 0.9rem;
}

.map-admin-summary-label,
.map-admin-section-title {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.86);
    margin-bottom: 0.35rem;
}

.map-admin-summary-value {
    font-size: 0.92rem;
    font-weight: 700;
    color: #ffffff;
}

.map-admin-summary-value-tight {
    word-break: break-word;
}

.map-admin-action-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.55rem;
}

.map-admin-action-grid-tight {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Quick Actions: subgroup subheaders span the full grid row and tag each
   group with a colored accent so admins can scan by category. */
.map-quick-action-grid {
    row-gap: 0.5rem;
}

.map-quick-action-subhead {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.4rem 0 0.05rem;
    padding: 0.05rem 0.05rem 0.3rem;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-bottom: 1px dashed rgba(148, 163, 184, 0.2);
}

.map-quick-action-grid > .map-quick-action-subhead:first-child {
    margin-top: 0;
}

.map-quick-action-subhead i {
    font-size: 0.78rem;
}

.map-quick-action-subhead--info {
    color: #93c5fd;
    border-bottom-color: rgba(96, 165, 250, 0.32);
}
.map-quick-action-subhead--info i { color: #60a5fa; }
.map-quick-action-subhead--base {
    color: #fcd34d;
    border-bottom-color: rgba(251, 191, 36, 0.32);
}
.map-quick-action-subhead--base i { color: #fbbf24; }
.map-quick-action-subhead--privilege {
    color: #c4b5fd;
    border-bottom-color: rgba(167, 139, 250, 0.32);
}
.map-quick-action-subhead--privilege i { color: #a78bfa; }

/* Square-outlined action buttons. 4px radius reads as "square" while
   keeping a hairline of corner softness; per-group color is driven by
   --map-action-color so all four variants share the same outline shape. */
.btn.map-action-btn {
    --map-action-color: 226, 232, 240;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border-radius: 4px;
    border: 1.5px solid rgba(var(--map-action-color), 0.55);
    background: rgba(var(--map-action-color), 0.04);
    color: rgba(var(--map-action-color), 0.95);
    font-weight: 600;
    font-size: 0.74rem;
    letter-spacing: 0.02em;
    padding: 0.42rem 0.5rem;
    min-height: 36px;
    min-width: 0;
    overflow: hidden;
    box-shadow: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn.map-action-btn > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.btn.map-action-btn > i {
    flex: 0 0 auto;
    width: 14px;
    text-align: center;
    opacity: 0.85;
}

.btn.map-action-btn:hover:not(.disabled):not([aria-disabled="true"]),
.btn.map-action-btn:focus-visible:not(.disabled):not([aria-disabled="true"]) {
    background: rgba(var(--map-action-color), 0.18);
    border-color: rgba(var(--map-action-color), 0.9);
    color: rgba(var(--map-action-color), 1);
    outline: none;
    box-shadow: 0 0 0 2px rgba(var(--map-action-color), 0.45);
}

.btn.map-action-btn:active:not(.disabled):not([aria-disabled="true"]) {
    background: rgba(var(--map-action-color), 0.26);
}

.btn.map-action-btn.disabled,
.btn.map-action-btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn.map-action-btn--info { --map-action-color: 96, 165, 250; }      /* sky-400  */
.btn.map-action-btn--base { --map-action-color: 251, 191, 36; }      /* amber-400 */
.btn.map-action-btn--danger { --map-action-color: 248, 113, 113; }   /* red-400  */
.btn.map-action-btn--privilege { --map-action-color: 167, 139, 250; }/* violet-400 */

.map-admin-copy-history {
    margin-top: 0.75rem;
    padding-top: 0.7rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.map-admin-copy-history-label {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.86);
    margin-bottom: 0.35rem;
}

.map-admin-copy-history-list {
    display: grid;
    gap: 0.35rem;
    color: rgba(226, 232, 240, 0.78);
    font-size: 0.76rem;
}

.map-admin-copy-history-item {
    padding: 0.45rem 0.55rem;
    border-radius: 10px;
    background: rgba(2, 6, 12, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.06);
    word-break: break-word;
}

.map-admin-qty-input {
    max-width: 88px;
}

.map-admin-command-output {
    min-height: 120px;
    margin: 0;
    padding: 0.8rem;
    border-radius: 12px;
    background: rgba(2, 6, 12, 0.82);
    color: #dbeafe;
    font-size: 0.78rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.map-admin-bulk-list {
    min-height: 56px;
    max-height: 150px;
    overflow-y: auto;
    padding: 0.55rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: rgba(2, 6, 12, 0.5);
}

.map-admin-bulk-empty {
    font-size: 0.78rem;
    color: rgba(148, 163, 184, 0.78);
}

.map-admin-bulk-entry {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    padding: 0.45rem 0.5rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
}

.map-admin-bulk-entry + .map-admin-bulk-entry {
    margin-top: 0.45rem;
}

.map-admin-bulk-entry-name {
    display: block;
    font-size: 0.83rem;
    font-weight: 700;
    color: #ffffff;
}

.map-admin-bulk-entry-meta {
    display: block;
    font-size: 0.72rem;
    color: rgba(148, 163, 184, 0.78);
}

.map-admin-modal .btn-close {
    flex: 0 0 auto;
    width: 2.35rem;
    height: 2.35rem;
    padding: 0;
    border-radius: 999px;
    background-color: rgba(148, 163, 184, 0.1);
    background-size: 0.8rem;
    opacity: 0.92;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.map-admin-modal .btn-close:hover {
    background-color: rgba(96, 165, 250, 0.18);
    opacity: 1;
}

@container map-admin-drawer (max-width: 620px) {
    .map-admin-summary-grid,
    .map-admin-action-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .map-desktop-copy-only {
        display: none !important;
    }

    .map-admin-drawer-body > .row > [class*="col-"] {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }

    .map-admin-drawer-header,
    .map-admin-drawer-body {
        padding-left: 1.12rem;
    }

    .map-admin-drawer-resize-handle {
        width: 10px;
    }
}

@container map-admin-drawer (max-width: 460px) {
    .map-admin-summary-grid,
    .map-admin-action-grid,
    .map-admin-action-grid-tight {
        grid-template-columns: minmax(0, 1fr);
    }

    .map-admin-summary-card,
    .map-admin-section {
        padding: 0.78rem;
    }
}

.map-admin-mobile-modal-dialog {
    margin-inline: auto;
}

.map-admin-mobile-modal-dialog .modal-content {
    max-height: calc(100dvh - 1rem);
    overflow: hidden;
}

.map-admin-mobile-modal-dialog .modal-body {
    overflow-y: auto;
}

.map-player-chooser-modal,
.map-player-preview-modal {
    background: linear-gradient(180deg, rgba(8, 15, 29, 0.98), rgba(5, 10, 18, 0.98));
    color: #e2e8f0;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.map-player-chooser-copy {
    margin-bottom: 0.8rem;
    font-size: 0.82rem;
    color: rgba(226, 232, 240, 0.78);
}

.map-player-chooser-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.map-player-chooser-item {
    width: 100%;
    border: 1px solid rgba(89, 195, 255, 0.2);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    color: #e2e8f0;
    text-align: left;
    padding: 0.75rem 0.85rem;
}

.map-player-chooser-item:hover {
    background: rgba(89, 195, 255, 0.12);
}

.map-player-chooser-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.map-player-chooser-name {
    display: block;
    font-size: 0.92rem;
    font-weight: 700;
}

.map-player-chooser-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 5.25rem;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    background: rgba(14, 165, 233, 0.16);
    color: #8bdcff;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.map-player-chooser-meta {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.74rem;
    color: rgba(148, 163, 184, 0.82);
}

.map-player-preview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.map-player-preview-card {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    padding: 0.75rem;
}

.map-player-preview-label {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.82);
    margin-bottom: 0.2rem;
}

.map-player-preview-value {
    font-size: 0.88rem;
    font-weight: 700;
    color: #ffffff;
    word-break: break-word;
}

/* ── Ultra-wide screens ── */
@media (min-width: 1920px) {
    .map-sidebar { width: 380px; }
}

@media (min-width: 2560px) {
    .map-sidebar { width: 420px; }
}

/* ── Mobile responsive ── */
@media (max-width: 768px) {
    .map-page {
        --map-left-secondary-offset: calc(var(--map-overlay-top-inset) + 60px);
    }

    .map-mobile-panel-backdrop {
        position: fixed;
    }

    /* Drawer dismiss buttons were 38px — and on the legend/sidebar sheets they
       are the primary way back to the map. */
    .map-mobile-panel-close {
        width: 44px;
        height: 44px;
    }


    .map-back-btn {
        top: var(--map-overlay-top-inset);
        left: calc(12px + env(safe-area-inset-left, 0px));
        min-height: 44px;
        padding: 0.55rem 0.95rem;
        font-size: 0.88rem;
    }

    .map-legend-control {
        top: var(--map-left-secondary-offset);
        left: calc(12px + env(safe-area-inset-left, 0px));
        width: auto;
        z-index: 640;
    }

    .map-legend-toggle,
    .map-sidebar-toggle {
        min-height: 52px;
    }

    .map-legend-panel {
        position: fixed;
        top: 0;
        left: 0;
        /* End ABOVE the global fixed bottom nav. With bottom:0 the drawer ran
           the full viewport height, so the tail of its scroll content — the
           last resource-node toggles and the "Reset filters" button — sat
           under the nav and could not be scrolled into reach on shorter
           phones. Same --site-shell-bottom token the chat sheet already uses. */
        bottom: calc(var(--site-shell-bottom, 110px) + var(--site-safe-area-bottom, 0px));
        width: min(340px, calc(100vw - 28px));
        max-height: none;
        padding: calc(env(safe-area-inset-top, 0px) + 0.85rem) 0.85rem 1rem;
        border-radius: 0 18px 18px 0;
        transform: translateX(-104%);
        transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 16px 0 36px rgba(0, 0, 0, 0.42);
    }

    .map-mobile-panel-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.85rem;
        margin-bottom: 0.7rem;
        font-family: 'Rajdhani', 'Inter', sans-serif;
        font-size: 1rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: #f8fafc;
    }

    .map-mobile-panel-header-legend {
        padding-bottom: 0.55rem;
        border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    }

    .map-mobile-panel-header-sidebar {
        padding: 0.9rem 1rem 0.55rem;
        border-bottom: 1px solid rgba(148, 163, 184, 0.08);
    }

    .map-legend-control.is-collapsed .map-legend-panel {
        display: block;
    }

    .map-legend-control.is-mobile-open .map-legend-panel {
        transform: translateX(0);
    }

    /* Bigger tap targets on legend rows + chunky checkbox affordance */
    .map-legend-item,
    .map-legend-subitem {
        min-height: 44px;
        padding: 0.5rem 0.45rem;
        border-radius: 10px;
    }
    .map-legend-item:active,
    .map-legend-subitem:active {
        background: rgba(89, 195, 255, 0.08);
    }
    .map-legend-item input[type="checkbox"],
    .map-legend-subitem input[type="checkbox"] {
        width: 20px;
        height: 20px;
    }

    /* Section title becomes a tap-toggle: the JS adds [data-collapsible]
       to each title and groups its trailing legend items until the next
       title. Default-collapsed groups stay folded until tapped. */
    .map-legend-section-title[data-collapsible] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 0.5rem;
        padding: 0.7rem 0.55rem;
        min-height: 44px;
        border-radius: 10px;
        cursor: pointer;
        background: rgba(255, 255, 255, 0.02);
        border: 1px solid rgba(148, 163, 184, 0.08);
        font-size: 0.78rem;
    }
    .map-legend-section-title[data-collapsible]::after {
        content: "\f078";
        font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
        font-weight: 900;
        font-size: 0.78rem;
        color: rgba(148, 163, 184, 0.7);
        margin-left: auto;
        transition: transform 0.2s ease;
    }
    .map-legend-section-title[data-collapsible].is-collapsed::after {
        transform: rotate(-90deg);
    }
    .map-legend-section-title[data-collapsible] .map-legend-section-count {
        display: inline-block;
        font-size: 0.7rem;
        font-weight: 700;
        color: rgba(89, 195, 255, 0.85);
        background: rgba(89, 195, 255, 0.12);
        border-radius: 999px;
        padding: 0.15rem 0.55rem;
        margin-left: 0.5rem;
    }
    .map-legend-item.is-section-hidden,
    .map-legend-subgroup.is-section-hidden {
        display: none;
    }

    /* Reset-filters affordance under the legend list */
    .map-legend-reset-row {
        display: flex;
        gap: 0.5rem;
        margin-top: 0.85rem;
        padding-top: 0.75rem;
        border-top: 1px solid rgba(148, 163, 184, 0.12);
    }
    .map-legend-reset-row .btn {
        flex: 1 1 auto;
        min-height: 44px;
        font-size: 0.85rem;
    }

    /* ── Sidebar: tab nav for Players / Bosses / Spawns on mobile ──
       Without this the three sections stack into a long scroll. JS injects
       the .map-sidebar-tabs row when the sidebar opens; if absent, layout
       falls back to the original stacked list. */
    .map-sidebar-tabs {
        display: flex;
        gap: 0.4rem;
        padding: 0.5rem 0.85rem 0.7rem;
        border-bottom: 1px solid rgba(148, 163, 184, 0.1);
        position: sticky;
        top: 0;
        z-index: 3;
        background: linear-gradient(180deg, rgba(8, 15, 29, 0.97), rgba(8, 15, 29, 0.85));
        backdrop-filter: blur(8px);
    }
    .map-sidebar-tab {
        flex: 1 1 0;
        min-height: 40px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(148, 163, 184, 0.16);
        border-radius: 10px;
        color: rgba(226, 232, 240, 0.85);
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        cursor: pointer;
    }
    .map-sidebar-tab:active,
    .map-sidebar-tab.is-active {
        background: rgba(89, 195, 255, 0.18);
        color: #59c3ff;
        border-color: rgba(89, 195, 255, 0.5);
    }
    .map-sidebar-tab .map-sidebar-tab-count {
        background: rgba(15, 23, 42, 0.6);
        padding: 0.05rem 0.45rem;
        border-radius: 999px;
        font-size: 0.7rem;
    }
    /* Hide non-active sections when tabs mode is active */
    .map-sidebar.is-tabs-mode .map-sidebar-section[data-tab-id]:not(.is-active) {
        display: none;
    }

    /* Sidebar item rows: 48px tap targets, comfortable on phones */
    .map-player-item,
    .map-boss-item,
    .map-spawn-item {
        min-height: 48px;
    }

    /* Boss control panel: drag-handle indicator at the top of the bottom sheet */
    .map-boss-control-panel::before {
        content: "";
        position: absolute;
        top: 6px;
        left: 50%;
        transform: translateX(-50%);
        width: 38px;
        height: 4px;
        border-radius: 999px;
        background: rgba(148, 163, 184, 0.4);
    }
    .map-boss-control-header {
        padding-top: 1.05rem;
    }

    .map-sidebar {
        position: absolute;
        top: 0;
        right: 0;
        /* Same bottom-nav clearance as the legend drawer. .map-wrapper runs to
           bottom:0 (under the nav), so an unadjusted bottom:0 put the last
           110px of the players list behind it. */
        bottom: calc(var(--site-shell-bottom, 110px) + var(--site-safe-area-bottom, 0px));
        /* The base rule sets height:100%; with top+bottom+height all non-auto
           CSS drops `bottom` entirely and the clearance above would be a
           no-op. Let top/bottom size the drawer instead. */
        height: auto;
        width: min(360px, 92vw);
        transform: translateX(100%);
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 640;
        box-shadow: -8px 0 32px rgba(0, 0, 0, 0.5);
        border-left-color: rgba(255, 255, 255, 0.08);
        border-bottom-left-radius: 16px;
    }

    .map-sidebar-inner {
        padding-top: calc(env(safe-area-inset-top, 0px) + 0.35rem);
        padding-bottom: 0.9rem;
    }

    .map-sidebar.open {
        transform: translateX(0);
    }

    .map-sidebar-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 52px;
        height: 52px;
        font-size: 1.2rem;
    }

    .map-sidebar-header {
        padding: 0.9rem 1rem;
        font-size: 0.82rem;
    }

    .map-player-item,
    .map-boss-item,
    .map-spawn-item {
        padding: 0.72rem 1rem;
    }

    .map-player-name,
    .map-boss-name,
    .map-spawn-name {
        font-size: 0.95rem;
    }

    .map-player-meta,
    .map-boss-detail,
    .map-player-admin-id {
        font-size: 0.76rem;
    }

    .player-marker-label {
        font-size: 12px;
        bottom: 13px;
    }

    .spawn-marker-label {
        font-size: 10px;
    }

    .map-wrapper {
        position: fixed;
    }

    .map-admin-hud {
        display: none;
    }

    .map-chat-panel {
        position: fixed;
        left: 10px;
        right: 10px;
        width: auto;
        bottom: calc(var(--site-shell-bottom, 110px) + 6px);
        max-height: min(62vh, 560px);
        transition: left 0.24s ease, right 0.24s ease, bottom 0.24s ease, border-radius 0.24s ease;
    }

    .map-chat-panel.is-public-chat {
        max-height: min(42vh, 320px);
    }

    .map-chat-panel:not(.is-collapsed) {
        left: 0;
        right: 0;
        bottom: var(--site-shell-bottom, 110px);
        border-radius: 22px 22px 0 0;
    }

    .map-chat-panel.is-public-chat:not(.is-collapsed) {
        left: 10px;
        right: 10px;
        bottom: calc(var(--site-shell-bottom, 110px) + 6px);
        border-radius: 14px;
    }

    .map-chat-panel-header {
        min-height: 62px;
    }

    .map-chat-panel.is-public-chat .map-chat-panel-header {
        min-height: 0;
    }

    .map-chat-peek-stack {
        left: 10px;
        right: 10px;
        width: auto;
        bottom: calc(var(--site-shell-bottom, 110px) + 74px);
        z-index: 651;
    }

    .map-chat-feed {
        max-height: min(42vh, 320px);
    }

    .map-chat-panel.is-public-chat .map-chat-feed {
        max-height: min(24vh, 188px);
    }

    .map-chat-admin-grid {
        grid-template-columns: 1fr;
    }

    /* Two-row composer: input gets full width, big Send button below.
       Critical for thumb reach when the keyboard takes the bottom half. */
    .map-chat-admin-compose {
        grid-template-columns: 1fr;
        gap: 0.55rem;
    }

    .map-chat-admin-compose .form-control,
    .map-chat-admin .form-control,
    .map-chat-admin .form-select {
        min-height: 44px;
        font-size: 16px;  /* prevent iOS zoom-on-focus */
    }

    .map-chat-admin-compose .btn {
        min-height: 48px;
        font-weight: 700;
        font-size: 0.92rem;
    }

    /* Extra bottom padding inside expanded panel so admin composer clears browser chrome */
    .map-chat-panel:not(.is-collapsed) .map-chat-admin {
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
    }

    /* When the chat panel is open at the bottom and the user focuses an input,
       the on-screen keyboard pushes the panel out of the viewport. Lift the
       composer into view on focus by giving it a higher position than usual. */
    .map-chat-panel:not(.is-collapsed):focus-within {
        bottom: 0 !important;
        max-height: 100dvh;
    }

    /* ── Admin Chat FAB ── */
    .map-admin-chat-fab {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        right: 14px;
        bottom: calc(var(--site-shell-bottom, 110px) + 126px);
        z-index: 530;
        width: 52px;
        height: 52px;
        border: 1px solid rgba(148, 163, 184, 0.22);
        border-radius: 50%;
        background: rgba(8, 15, 29, 0.94);
        backdrop-filter: blur(12px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
        color: #94a3b8;
        font-size: 1.25rem;
        cursor: pointer;
        transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
    }

    .map-admin-chat-fab:active {
        transform: scale(0.92);
    }

    .map-admin-chat-fab.has-unread {
        color: #60a5fa;
        border-color: rgba(96, 165, 250, 0.4);
        box-shadow: 0 6px 20px rgba(59, 130, 246, 0.25);
    }

    .map-admin-chat-fab-badge {
        position: absolute;
        top: -2px;
        right: -2px;
        min-width: 20px;
        height: 20px;
        padding: 0 5px;
        border-radius: 10px;
        background: #ef4444;
        color: #fff;
        font-size: 0.68rem;
        font-weight: 700;
        line-height: 20px;
        text-align: center;
    }

    /* Hide FAB when chat panel is open */
    .map-admin-chat-fab.is-hidden {
        display: none;
    }

    .map-boss-reward-summary,
    .map-boss-reward-grid {
        grid-template-columns: 1fr;
    }

    .map-alert-banner-message {
        font-size: 1.2rem;
    }

    /* The 200px cap dates from when this drawer stacked three sections
       (Players / Bosses / Spawns). The 2026-07 overhaul removed the Bosses and
       Spawns sections, so the cap left the one remaining list scrolling inside
       a 200px window while 400-600px of the open drawer sat empty. Let the
       players list fill the drawer and scroll there; the vestigial boss/spawn
       lists keep a cap in case they are ever re-mounted. */
    .map-player-list {
        max-height: none;
    }

    .map-boss-list,
    .map-spawn-list {
        max-height: 200px;
    }
}

/* Very small screens */
@media (max-width: 380px) {
    .map-sidebar {
        width: 100vw;
    }

    .map-back-btn {
        padding-inline: 0.75rem;
        font-size: 0.82rem;
    }

    .map-legend-toggle {
        font-size: 0.72rem;
        padding: 0.45rem 0.65rem;
    }
}

@media (max-width: 991px) {
    .map-admin-drawer {
        top: var(--map-overlay-top-inset);
        right: 10px;
        bottom: 10px;
        width: min(var(--map-admin-drawer-width), calc(100vw - 20px));
        max-width: calc(100vw - 20px);
    }

    .map-admin-hud {
        right: calc(12px + env(safe-area-inset-right, 0px));
    }
}

@media (max-width: 768px) {
    .map-admin-drawer {
        top: var(--map-overlay-top-inset);
        right: 0;
        bottom: 0;
        left: 0;
        width: 100vw;
        max-width: 100vw;
        z-index: 702;
    }

    .map-admin-drawer-panel {
        border-radius: 0;
        transform: translateX(100%);
    }

    .map-admin-drawer-header {
        padding: calc(env(safe-area-inset-top, 0px) + 0.9rem) 0.9rem 0.8rem;
        gap: 0.6rem;
    }

    .map-admin-drawer-body {
        padding: 0.9rem 0.9rem calc(env(safe-area-inset-bottom, 0px) + 5rem);
        scroll-padding-top: 5.5rem;  /* so quick-jump anchors clear sticky header */
    }

    .map-admin-drawer-resize-handle {
        display: none;
    }

    /* Two-column action grid on small phones — single-col made the panel feel
       like an endless vertical list. 2-col preserves rhythm and tap targets. */
    .map-admin-summary-grid,
    .map-admin-action-grid,
    .map-admin-action-grid-tight {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Bigger tap targets across all admin drawer controls */
    .map-admin-drawer .btn,
    .map-admin-drawer .btn-sm {
        min-height: 44px;
        padding-top: 0.55rem;
        padding-bottom: 0.55rem;
    }

    .map-admin-drawer .form-control,
    .map-admin-drawer .form-select,
    .map-admin-drawer .form-control-sm,
    .map-admin-drawer .form-select-sm {
        min-height: 44px;
        font-size: 16px;  /* prevents iOS auto-zoom on focus */
    }

    /* Section title row → sticky chip nav for in-drawer navigation. JS injects
       .map-admin-section-nav into the drawer; if absent, layout is unchanged. */
    .map-admin-section-nav {
        display: flex;
        position: sticky;
        top: 0;
        z-index: 4;
        margin: -0.9rem -0.9rem 0.9rem;
        padding: 0.55rem 0.9rem;
        background: linear-gradient(180deg, rgba(8, 15, 29, 0.97), rgba(8, 15, 29, 0.88));
        backdrop-filter: blur(10px);
        border-bottom: 1px solid rgba(148, 163, 184, 0.12);
        gap: 0.4rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .map-admin-section-nav::-webkit-scrollbar { display: none; }
    .map-admin-section-nav-chip {
        flex: 0 0 auto;
        background: rgba(255, 255, 255, 0.04);
        color: rgba(226, 232, 240, 0.78);
        border: 1px solid rgba(148, 163, 184, 0.18);
        padding: 0.45rem 0.85rem;
        border-radius: 999px;
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        white-space: nowrap;
        cursor: pointer;
    }
    .map-admin-section-nav-chip:active,
    .map-admin-section-nav-chip.is-active {
        background: rgba(89, 195, 255, 0.18);
        color: #59c3ff;
        border-color: rgba(89, 195, 255, 0.5);
    }

    /* Persistent action bar pinned to bottom of drawer — Close + jump-to-top
       reachable without scrolling back through every section. */
    .map-admin-drawer-footer-mobile {
        display: flex;
        position: sticky;
        bottom: 0;
        z-index: 4;
        margin: 0.5rem -0.9rem -0.9rem;
        padding: 0.65rem 0.9rem calc(env(safe-area-inset-bottom, 0px) + 0.7rem);
        background: linear-gradient(0deg, rgba(8, 15, 29, 0.99), rgba(8, 15, 29, 0.85));
        backdrop-filter: blur(10px);
        border-top: 1px solid rgba(148, 163, 184, 0.14);
        gap: 0.5rem;
    }
    .map-admin-drawer-footer-mobile .btn {
        flex: 1 1 auto;
        min-height: 48px;
        font-weight: 700;
    }

    /* Bulk items list: more room before scroll, larger entries */
    .map-admin-bulk-list {
        max-height: 220px;
    }
    .map-admin-bulk-entry {
        padding: 0.6rem 0.7rem;
        min-height: 48px;
    }

    /* Quick Actions: collapsible "More" row so the most-used 4 are always
       on-screen; rest are revealed by tapping More. JS adds the toggle. */
    .map-admin-quick-actions[data-collapsible="1"] .map-admin-action-grid > .is-secondary-action {
        display: none;
    }
    .map-admin-quick-actions[data-collapsible="1"].is-expanded .map-admin-action-grid > .is-secondary-action {
        display: inline-flex;
    }
    /* Subgroup subheaders are full-row flex containers; keep them flex (not
       inline-flex) when expanded so the full-width row layout is preserved. */
    .map-admin-quick-actions[data-collapsible="1"].is-expanded .map-admin-action-grid > .map-quick-action-subhead.is-secondary-action {
        display: flex;
    }
    .map-admin-quick-actions-toggle {
        display: block;
        margin-top: 0.55rem;
        width: 100%;
        background: rgba(89, 195, 255, 0.08);
        border: 1px dashed rgba(89, 195, 255, 0.4);
        color: #93c5fd;
        font-weight: 700;
        min-height: 44px;
        border-radius: 12px;
    }

    /* Bigger close button on the map admin modals */
    .map-admin-modal .btn-close {
        width: 2.6rem;
        height: 2.6rem;
    }

    .map-admin-mobile-modal-dialog {
        margin: 0;
        max-width: none;
    }

    .map-admin-mobile-modal-dialog .modal-content {
        min-height: auto;
        max-height: 100dvh;
        border-radius: 0;
    }

    .map-admin-mobile-modal-dialog .modal-header {
        padding-top: calc(env(safe-area-inset-top, 0px) + 1rem);
    }

    .map-admin-mobile-modal-dialog .modal-footer {
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 0.9rem);
        flex-wrap: nowrap;
        gap: 0.5rem;
    }

    .map-admin-mobile-modal-dialog .modal-footer .btn {
        flex: 1 1 auto;
        min-width: 0;
        min-height: 48px;
    }
}

/* Tighter 2-col only at very small widths — preserves readable button labels
   instead of forcing single-column scrolling. */
@media (max-width: 360px) {
    .map-admin-summary-grid,
    .map-admin-action-grid,
    .map-admin-action-grid-tight {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── Admin Boss Control Panel ── */
.map-boss-control-toggle {
    display: none;
    position: absolute;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
    right: calc(12px + env(safe-area-inset-right, 0px));
    z-index: 500;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 85, 0, 0.35);
    border-radius: 14px;
    background: rgba(8, 15, 29, 0.88);
    color: #ff6b2b;
    font-size: 1.15rem;
    cursor: pointer;
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    transition: background 0.2s ease, transform 0.15s ease;
    align-items: center;
    justify-content: center;
}

.map-boss-control-toggle:hover {
    background: rgba(20, 35, 55, 0.95);
    transform: scale(1.06);
}

.map-boss-control-toggle.is-active {
    background: rgba(255, 85, 0, 0.18);
    border-color: rgba(255, 85, 0, 0.5);
}

.map-boss-control-panel {
    position: absolute;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 74px);
    right: calc(12px + env(safe-area-inset-right, 0px));
    z-index: 640;
    width: 320px;
    max-height: min(65vh, 480px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(8, 15, 29, 0.94);
    color: #e2e8f0;
    backdrop-filter: blur(16px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
    overflow: hidden;
    transform: scale(0.92) translateY(12px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.18s ease;
}

.map-boss-control-panel.is-open {
    transform: scale(1) translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.map-boss-control-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-family: 'Rajdhani', 'Inter', sans-serif;
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #ff6b2b;
}

.map-boss-control-body {
    padding: 0.65rem 0.85rem 0.85rem;
    overflow-y: auto;
    max-height: min(55vh, 400px);
    min-width: 0;
}

.map-boss-control-empty {
    text-align: center;
    color: rgba(148, 163, 184, 0.6);
    font-size: 0.82rem;
    padding: 1.2rem 0;
}

/* Server section within control panel */
.map-boss-control-server {
    margin-bottom: 0.75rem;
    min-width: 0;
}

.map-boss-control-server:last-child {
    margin-bottom: 0;
}

.map-boss-control-server-name {
    font-family: 'Rajdhani', 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.7);
    margin-bottom: 0.45rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Active boss card */
.map-boss-control-card {
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.03);
    padding: 0.6rem 0.7rem;
    margin-bottom: 0.5rem;
    min-width: 0;
    overflow: hidden;
}

.map-boss-control-card-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: #f8fafc;
    margin-bottom: 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.map-boss-control-card-meta {
    font-size: 0.7rem;
    color: rgba(148, 163, 184, 0.8);
    margin-bottom: 0.1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Difficulty badge */
.map-boss-control-difficulty {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.12rem 0.45rem;
    border-radius: 4px;
    line-height: 1;
}

.map-boss-control-difficulty.tier-easy { background: rgba(0, 255, 0, 0.15); color: #00ff00; }
.map-boss-control-difficulty.tier-medium { background: rgba(255, 255, 0, 0.15); color: #ffff00; }
.map-boss-control-difficulty.tier-hard { background: rgba(255, 0, 0, 0.15); color: #ff4444; }
.map-boss-control-difficulty.tier-ultra { background: rgba(157, 78, 221, 0.18); color: #c997ff; }

/* Countdown */
.map-boss-control-countdown {
    font-family: 'Rajdhani', 'Inter', monospace;
    font-size: 1.1rem;
    font-weight: 800;
    color: #ff6b2b;
    text-align: center;
    padding: 0.3rem 0;
    letter-spacing: 0.04em;
}

.map-boss-control-countdown.is-ready {
    color: #00ff88;
}

/* Action buttons */
.map-boss-control-actions {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

.map-boss-control-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.5rem 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    color: #e2e8f0;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.map-boss-control-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

.map-boss-control-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.map-boss-control-btn.btn-expire {
    border-color: rgba(255, 85, 0, 0.3);
    color: #ff6b2b;
}

.map-boss-control-btn.btn-expire:hover:not(:disabled) {
    background: rgba(255, 85, 0, 0.12);
    border-color: rgba(255, 85, 0, 0.5);
}

.map-boss-control-btn.btn-force {
    border-color: rgba(0, 255, 136, 0.3);
    color: #00ff88;
}

.map-boss-control-btn.btn-force:hover:not(:disabled) {
    background: rgba(0, 255, 136, 0.12);
    border-color: rgba(0, 255, 136, 0.5);
}

/* ── Mobile: boss control panel becomes bottom sheet ── */
@media (max-width: 768px) {
    .map-boss-control-toggle {
        bottom: calc(var(--site-shell-bottom, 110px) + 64px);
        right: calc(10px + env(safe-area-inset-right, 0px));
        width: 52px;
        height: 52px;
        font-size: 1.25rem;
    }

    .map-boss-control-panel {
        position: fixed;
        bottom: var(--site-shell-bottom, 110px);
        left: 0;
        right: 0;
        width: 100%;
        max-height: min(55vh, 420px);
        border-radius: 20px 20px 0 0;
        transform: translateY(100%);
        opacity: 1;
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .map-boss-control-panel.is-open {
        transform: translateY(0);
    }

    .map-boss-control-header {
        padding: 0.85rem 1rem;
        font-size: 0.92rem;
    }

    .map-boss-control-body {
        padding: 0.75rem 1rem 1rem;
    }

    .map-boss-control-btn {
        min-height: 44px;
        font-size: 0.78rem;
    }
}

@media (pointer: coarse) {
    .map-admin-hud {
        display: none;
    }
}

/* ── Next Boss Countdown Panel ──────────────────────── */
.map-next-boss-panel {
    position: absolute;
    top: 58px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 900;
    background: linear-gradient(135deg, rgba(10,14,28,0.92), rgba(30,20,60,0.92));
    border: 1px solid rgba(148,163,184,0.18);
    border-radius: 14px;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    backdrop-filter: blur(12px);
    pointer-events: auto;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.map-next-boss-label {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: rgba(148,163,184,0.8);
    white-space: nowrap;
}
.map-next-boss-label i {
    margin-right: 0.3rem;
    color: #fbbf24;
}
.map-next-boss-countdown {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #f8fafc;
    letter-spacing: 0.04em;
    min-width: 4.5rem;
    text-align: center;
}
.map-next-boss-countdown.is-soon {
    color: #fbbf24;
    animation: map-next-boss-pulse 3s ease-in-out infinite;
}
@keyframes map-next-boss-pulse {
    0%,100% { opacity: 1; }
    50% { opacity: 0.6; }
}
.map-next-boss-meta {
    font-size: 0.72rem;
    color: rgba(148,163,184,0.7);
    white-space: nowrap;
}
@media (max-width: 600px) {
    .map-next-boss-panel {
        top: auto;
        bottom: 14px;
        left: 50%;
        padding: 0.4rem 0.8rem;
        gap: 0.5rem;
        border-radius: 12px;
    }
    .map-next-boss-countdown { font-size: 1rem; }
}

/* ── Next Restart Countdown Panel ───────────────────── */
.map-restart-countdown-panel {
    position: absolute;
    top: var(--map-overlay-top-inset);
    right: calc(12px + env(safe-area-inset-right, 0px));
    z-index: 500;
    background: linear-gradient(135deg, rgba(10,14,28,0.92), rgba(28,18,48,0.92));
    border: 1px solid rgba(148,163,184,0.18);
    border-radius: 12px;
    padding: 0.45rem 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    backdrop-filter: blur(12px);
    pointer-events: auto;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    min-width: 0;
    overflow: hidden;
    max-width: calc(100vw - 24px);
}
/* Slide below the admin coordinate HUD when present so they don't overlap. */
.map-admin-hud:not(.is-hidden) ~ .map-restart-countdown-panel {
    top: calc(var(--map-overlay-top-inset) + 152px);
}
.map-restart-countdown-label {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: rgba(148,163,184,0.8);
    white-space: nowrap;
}
.map-restart-countdown-label i {
    margin-right: 0.3rem;
    color: #60a5fa;
}
.map-restart-countdown-time {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #f8fafc;
    letter-spacing: 0.04em;
    min-width: 4.2rem;
    text-align: center;
    white-space: nowrap;
}
.map-restart-countdown-time.is-soon {
    color: #fbbf24;
}
.map-restart-countdown-time.is-restarting {
    color: #f87171;
    animation: map-restart-pulse 1.4s ease-in-out infinite;
}
@keyframes map-restart-pulse {
    0%,100% { opacity: 1; }
    50% { opacity: 0.55; }
}
@media (max-width: 600px) {
    .map-restart-countdown-panel {
        top: auto;
        bottom: 14px;
        right: 12px;
        padding: 0.35rem 0.7rem;
        gap: 0.45rem;
        border-radius: 10px;
    }
    .map-restart-countdown-time { font-size: 0.95rem; min-width: 3.5rem; }
}

/* ── Server filter pills ───────────────────────────── */
/* Autofit strip: wraps to a second row instead of overflowing, and pills
   themselves can shrink (flex: 0 1 auto below) so the strip NEVER needs a
   horizontal scrollbar on any viewport (2026-07-25 fix — the live-count
   badge added enough width to each pill that the old nowrap+overflow-x:auto
   container started showing a scrollbar). */
/* Top-center control stack: the server strip sits ABOVE the base-map selector in
   a single wrapping flex COLUMN. This is the single absolute anchor for both
   controls, so the selector always follows the server strip's real rendered
   height (even when it wraps to 2-3 rows on mobile) instead of a fixed +44px
   offset that overlapped the toggle (D2). pointer-events pass through the empty
   column gaps to the map; only the controls themselves capture clicks. */
.map-top-controls {
    position: absolute;
    top: var(--map-overlay-top-inset);
    left: 50%;
    transform: translateX(-50%);
    z-index: 500;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: min(70vw, 640px);
    pointer-events: none;
}
.map-top-controls > * {
    pointer-events: auto;
}
.map-server-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    max-width: 100%;
    min-width: 0;
    overflow: visible;
}
.map-server-picker {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: auto auto minmax(104px, 1fr) auto;
    align-items: center;
    gap: 0.45rem;
    width: min(248px, 70vw);
    min-height: 38px;
    padding: 0.25rem 0.65rem;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 12px;
    background: rgba(8, 15, 29, 0.94);
    color: #e2e8f0;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(12px);
    cursor: pointer;
}
.map-server-picker[hidden] {
    display: none !important;
}
.map-server-picker-icon {
    color: #7dd3fc;
    font-size: 0.75rem;
}
.map-server-picker-label {
    color: rgba(203, 213, 225, 0.68);
    font: 800 0.62rem 'Rajdhani', 'Inter', sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.map-server-select {
    min-width: 0;
    width: 100%;
    border: 0;
    outline: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    color: #f8fafc;
    font: 700 0.82rem 'Rajdhani', 'Inter', sans-serif;
    letter-spacing: 0.03em;
    cursor: pointer;
}
.map-server-select option {
    background: #100302;
    color: #f8fafc;
}
.map-server-picker-chevron {
    color: rgba(125, 211, 252, 0.82);
    font-size: 0.65rem;
    pointer-events: none;
}
.map-server-picker:focus-within {
    border-color: rgba(125, 211, 252, 0.78);
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2), 0 4px 14px rgba(0, 0, 0, 0.35);
}
.map-server-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    flex: 0 1 auto;
    min-height: 34px;
    min-width: 44px;
    max-width: 150px;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: rgba(8, 15, 29, 0.92);
    color: #cbd5e1;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: 'Rajdhani', 'Inter', sans-serif;
    letter-spacing: 0.04em;
    cursor: pointer;
    overflow: hidden;
}
.map-server-pill:hover {
    background: rgba(20, 35, 55, 0.95);
    color: #fff;
}
.map-server-pill.is-active {
    background: rgba(56, 189, 248, 0.18);
    border-color: rgba(56, 189, 248, 0.6);
    color: #7dd3fc;
}
/* Server label truncates on its own so the live-count badge never gets
   squeezed out of a narrow pill (min-width:0 lets the flex item shrink). */
.map-server-pill-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Live online-player-count badge — updated every map poll cycle from
   data.players (see map.js computeServerPlayerCounts/updateServerTabCounts).
   Always renders a number (0 for empty/offline/unreachable servers), never
   blank. */
.map-server-pill-count {
    flex: 0 0 auto;
    min-width: 1.5em;
    padding: 0.05rem 0.4em;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.22);
    color: inherit;
    font-size: 0.85em;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
}
.map-server-pill.is-active .map-server-pill-count {
    background: rgba(56, 189, 248, 0.3);
}
.map-server-pill-count.is-zero {
    opacity: 0.55;
}
@media (max-width: 768px) {
    .map-top-controls {
        max-width: calc(100vw - 130px);
    }
    .map-server-picker {
        width: 100%;
        min-height: 44px;
    }
    .map-server-pill {
        min-height: 38px;
        min-width: 40px;
        font-size: 0.72rem;
        padding: 0.3rem 0.7rem;
    }
}

/* Very small screens: tighten further so more pills fit per row before
   wrapping (still never scrolls — see .map-server-filter above). */
@media (max-width: 380px) {
    .map-top-controls {
        max-width: calc(100vw - 90px);
    }
    .map-server-filter {
        gap: 4px;
    }
    .map-server-pill {
        min-width: 36px;
        padding: 0.28rem 0.55rem;
    }
}

/* ── Base-map selector (Overworld / World Tree sub-map) ──────────────
   In-flow child of .map-top-controls (no longer absolutely positioned): it
   naturally follows the server strip's real height, however many rows it wraps
   to, so it can never overlap the strip (D2). */
.map-base-selector {
    display: flex;
    flex-wrap: nowrap;
    min-width: 0;
    max-width: min(70vw, 360px);
    padding: 3px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: rgba(8, 15, 29, 0.92);
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.map-base-btn {
    flex: 0 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-width: 0;
    min-height: 30px;
    padding: 0.28rem 0.9rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: #cbd5e1;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: 'Rajdhani', 'Inter', sans-serif;
    letter-spacing: 0.04em;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.map-base-btn i {
    flex: 0 0 auto;
    font-size: 0.8rem;
}
.map-base-btn span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.map-base-btn:hover {
    color: #fff;
}
.map-base-btn.is-active {
    background: rgba(56, 189, 248, 0.18);
    color: #7dd3fc;
    box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.5);
}
@media (max-width: 768px) {
    .map-base-selector {
        max-width: 100%;
    }
    /* Base-map switcher is a primary control (Overworld <-> World Tree) and
       was only 34px tall — under the 44px touch-target floor. */
    .map-base-btn {
        min-height: 44px;
        font-size: 0.72rem;
        padding: 0.28rem 0.7rem;
    }
}
@media (max-width: 480px) {
    .map-base-btn span {
        font-size: 0.68rem;
    }
}

/* ================================================================
   THUMB-ZONE REACHABILITY (touch phones only)
   ================================================================
   Every control on this page was anchored to the top strip, which is the
   hardest place to reach one-handed on a 6"+ phone. This moves ONLY the two
   controls a user actually reaches for mid-session — Map Filters and Players
   Online — down into the thumb zone. Everything else (back button, base-map
   switcher, server pills, zoom, countdown chips) stays exactly where it is:
   those are either navigation-away or set-and-forget, and relocating them
   would be a chrome redesign rather than a reachability fix.

   Only the TOGGLES move. Both panels still open from their own edges (the
   legend drawer is position:fixed from the left, the sidebar from the right),
   so no drawer geometry, JS, or aria wiring changes.

   Gated on max-width AND pointer:coarse so a narrow desktop window with a
   mouse never picks this up — desktop keeps its top-anchored layout.
   Positioned with the same --site-shell-bottom + safe-area idiom the chat
   sheet and admin FAB already use, so they sit above the 110px bottom nav
   rather than under it. ================================================ */
@media (max-width: 768px) and (pointer: coarse) {
    .map-page {
        /* Shared floor for the thumb-zone row. */
        --map-thumb-zone-bottom: calc(
            var(--site-shell-bottom, 110px) + var(--site-safe-area-bottom, 0px) + 16px
        );
        /* Native +/- controls are intentionally disabled. Pinch, double-click
           and keyboard zoom preserve access without claiming this narrow
           top-left control lane. */
    }

    .map-legend-control {
        top: auto;
        bottom: var(--map-thumb-zone-bottom);
        left: calc(12px + env(safe-area-inset-left, 0px));
    }

    .map-sidebar-toggle {
        top: auto;
        bottom: var(--map-thumb-zone-bottom);
        right: calc(12px + env(safe-area-inset-right, 0px));
    }

    /* The countdown chips were pushed down 60px purely to clear the players
       FAB that used to sit in this corner. With the FAB gone the corner is
       free — but the CENTRED server-pill strip still reaches into this column
       (it is up to `100vw - 130px` wide and wraps to 2-3 rows), so reclaiming
       the bare top inset put the chips straight on top of the pills and made
       PVE2/PVE4 untappable (measured live: elementFromPoint at those pill
       centres returned .map-countdown-group-title-text). Hence the measured
       --map-countdown-top-offset floor from map.js — see the base rule. */
    .map-countdown-stack,
    .map-admin-hud:not(.is-hidden) ~ .map-countdown-stack {
        top: max(var(--map-overlay-top-inset), var(--map-countdown-top-offset, 0px));
    }

    /* Admin-only. Two reasons this moves: it would now collide with the
       relocated players FAB, and its existing bottom:16px was measured sitting
       UNDER the 110px bottom nav (unreachable on a phone) — a pre-existing bug.
       Stacks cleanly above the players FAB and below the admin chat FAB
       (which is already at --site-shell-bottom + 126px). */
    .map-boss-control-toggle {
        bottom: calc(
            var(--site-shell-bottom, 110px) + var(--site-safe-area-bottom, 0px) + 76px
        );
    }
}

/* ── Boss Modal: Compact Item Grid ──────────────────── */
.map-boss-reward-items-section {
    border: 1px solid rgba(148,163,184,0.12);
    border-radius: 14px;
    background: rgba(15,23,42,0.68);
    padding: 0.7rem 0.8rem;
    margin-top: 0.75rem;
}
.map-boss-reward-item-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 0.5rem;
}
.map-boss-reward-item-card {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 10px;
    background: rgba(2,8,23,0.58);
    padding: 0.4rem 0.55rem;
    min-width: 0;
}
.map-boss-reward-item-thumb {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 8px;
    background: rgba(15,23,42,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.map-boss-reward-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 2px;
}
.map-boss-reward-item-thumb i {
    font-size: 0.9rem;
    color: rgba(148,163,184,0.5);
}
.map-boss-reward-item-info {
    min-width: 0;
    overflow: hidden;
}
.map-boss-reward-item-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: #f8fafc;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.map-boss-reward-item-meta {
    display: flex;
    gap: 0.3rem;
    margin-top: 0.1rem;
}
.map-boss-reward-item-chip {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.1rem 0.35rem;
    border-radius: 5px;
    background: rgba(148,163,184,0.12);
    color: rgba(148,163,184,0.85);
}
@media (max-width: 576px) {
    .map-boss-reward-item-grid {
        grid-template-columns: 1fr 1fr;
    }
    .map-boss-reward-summary {
        grid-template-columns: 1fr !important;
        gap: 0.4rem;
    }
    .map-boss-reward-summary-card {
        padding: 0.5rem 0.65rem;
    }
    .map-boss-reward-grid {
        grid-template-columns: 1fr !important;
        gap: 0.5rem;
    }
    .map-boss-reward-section {
        padding: 0.6rem 0.7rem;
    }
}