/* =====================================================
   MAP MENU — Classic (default) + Liquid Glass
   ===================================================== */

:root {
    --accent: rgb(27, 148, 47);
    --accent-glow: rgba(27, 148, 47, 0.45);
    --radius-xl: 24px;
    --radius-lg: 18px;
    --radius-md: 12px;
    --transition: 0.38s cubic-bezier(0.34, 1.3, 0.64, 1);
    --transition-fast: 0.2s ease;
}

/* ---------- Кнопка открытия ---------- */
.menuButton {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 1100;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.hamburgerButton {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(20, 25, 35, 0.85);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    transition: all var(--transition);
    position: relative;
    overflow: hidden;
}

.hamburgerButton:hover {
    transform: scale(1.07);
    background: rgba(30, 35, 50, 0.95);
}

.hamburgerButton:active {
    transform: scale(0.94);
}

/* Когда меню открыто — кнопка исчезает */
body.menu-open .menuButton {
    opacity: 0;
    transform: scale(0.7);
    pointer-events: none;
}

/* ---------- Боковое меню ---------- */
.mapMenu {
    position: fixed;
    top: 16px;
    left: 16px;
    bottom: 16px;
    width: 370px;
    max-width: calc(100vw - 32px);
    border-radius: var(--radius-xl);
    display: flex;
    flex-direction: column;
    padding: 18px;
    gap: 14px;
    z-index: 1050;
    transform-origin: top left;
    opacity: 0;
    transform: scale(0.88) translateY(-16px);
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.34, 1.2, 0.64, 1),
                transform 0.4s cubic-bezier(0.34, 1.2, 0.64, 1);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;

    /* Classic по умолчанию */
    background: rgba(18, 22, 32, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.55);
    color: #f0f2f5;
}

.mapMenu::-webkit-scrollbar {
    width: 4px;
}

.mapMenu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 10px;
}

.mapMenu.open {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}

/* ===================== LIQUID GLASS ===================== */
body.theme-liquid .mapMenu {
    background: linear-gradient(
        165deg,
        rgba(255, 255, 255, 0.18) 0%,
        rgba(255, 255, 255, 0.08) 45%,
        rgba(255, 255, 255, 0.05) 100%
    );
    backdrop-filter: blur(32px) saturate(180%);
    -webkit-backdrop-filter: blur(32px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -1px 0 rgba(255, 255, 255, 0.1);
    color: #1a1a1a;
}

/* Живой блик только в liquid */
body.theme-liquid .mapMenu::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.25) 0%, transparent 70%);
    pointer-events: none;
    top: var(--mouse-y, 40%);
    left: var(--mouse-x, 50%);
    transform: translate(-50%, -50%);
    opacity: 0.6;
    z-index: 0;
    transition: opacity 0.25s;
}

/* ---------- Header ---------- */
.menuHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}

.userBlock {
    display: flex;
    align-items: center;
    gap: 12px;
}

.userAvatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5b6cfa, #8b5cf6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #fff;
    flex-shrink: 0;
    overflow: hidden;
}

.userAvatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.userName {
    font-size: 15px;
    font-weight: 600;
}

.userRole {
    font-size: 12px;
    opacity: 0.65;
    margin-top: 1px;
}

.logoutButton {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.logoutButton:hover {
    background: rgba(255, 255, 255, 0.14);
    transform: scale(1.08);
}

/* Liquid overrides */
body.theme-liquid .logoutButton {
    color: #1a1a1a;
    border-color: rgba(0, 0, 0, 0.12);
    background: rgba(255, 255, 255, 0.35);
}

/* ---------- Admin ---------- */
.adminPanel {
    position: relative;
    z-index: 1;
}

.adminButton {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.adminButton:hover {
    background: rgba(255, 255, 255, 0.13);
}

.adminButton i:last-child {
    margin-left: auto;
    opacity: 0.5;
    font-size: 12px;
}

body.theme-liquid .adminButton {
    color: #1a1a1a;
    border-color: rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.4);
}


.guestLogo{
    height:64px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    flex-shrink:0;
}

.guestLogo img{
    width:auto;
    height:64px;
    max-width:210px;
    object-fit:contain;
    display:block;
}

.loginButton{
    width:36px;
    height:36px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.15);
    background:rgba(255,255,255,.06);
    color:#fff;
    text-decoration:none;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all var(--transition-fast);
}

.loginButton:hover{
    background:rgba(255,255,255,.14);
    transform:scale(1.08);
}

body.theme-liquid .loginButton{
    color:#1a1a1a;
    border-color:rgba(0,0,0,.12);
    background:rgba(255,255,255,.35);
}


/* ---------- Search ---------- */
.searchBlock{
position:relative;
z-index:10;
}
.searchInput{
position:relative;
display:flex;
align-items:center;
gap:10px;
height:44px;
padding:0 48px 0 14px;
border-radius:999px;
background:rgba(0,0,0,.25);
border:1px solid rgba(255,255,255,.1);
transition:all var(--transition-fast);
}
.searchInput:focus-within{
border-color:rgba(255,255,255,.25);
background:rgba(0,0,0,.35);
box-shadow:0 0 0 3px rgba(27,148,47,.08);
}
.searchInput>i{
flex:0 0 auto;
color:rgba(255,255,255,.5);
font-size:14px;
transition:color var(--transition-fast);
}
.searchField{
width:100%;
min-width:0;
flex:1;
background:transparent;
border:none;
outline:none;
color:#fff;
font-size:14px;
font-family:inherit;
}
.searchField::placeholder{
color:rgba(255,255,255,.4);
}
body.theme-liquid .searchInput{
background:rgba(255,255,255,.35);
border-color:rgba(0,0,0,.1);
}
body.theme-liquid .searchInput:focus-within{
background:rgba(255,255,255,.48);
border-color:rgba(0,0,0,.16);
box-shadow:0 0 0 3px rgba(27,148,47,.08);
}
body.theme-liquid .searchInput>i,
body.theme-liquid .searchField{
color:#1a1a1a;
}
body.theme-liquid .searchField::placeholder{
color:rgba(0,0,0,.4);
}

/* ---------- Clear search ---------- */
.clearSearch{
position:absolute;
top:50%;
right:8px;
width:30px;
height:30px;
padding:0;
margin:0;
border:0;
border-radius:50%;
background:rgba(255,255,255,.08);
color:rgba(255,255,255,.65);
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
opacity:0;
visibility:hidden;
pointer-events:none;
transform:translateY(-50%) scale(.75);
transition:all .2s ease;
}
.clearSearch.active{
opacity:1;
visibility:visible;
pointer-events:auto;
transform:translateY(-50%) scale(1);
}
.clearSearch i{
font-size:13px;
line-height:1;
}
.clearSearch:hover{
background:rgba(239,68,68,.15);
color:#ef4444;
transform:translateY(-50%) scale(1.08);
}
.clearSearch:active{
transform:translateY(-50%) scale(.94);
}
body.theme-liquid .clearSearch{
background:rgba(0,0,0,.06);
color:rgba(0,0,0,.55);
}
body.theme-liquid .clearSearch:hover{
background:rgba(239,68,68,.12);
color:#dc2626;
}

/* ---------- Search suggestions ---------- */
.searchSuggestions{
position:absolute;
top:calc(100% + 8px);
left:0;
right:0;
z-index:1000;
display:none;
flex-direction:column;
gap:4px;
padding:6px;
background:rgba(255,255,255,.97);
border:1px solid #e5ebe7;
border-radius:14px;
box-shadow:0 12px 32px rgba(0,0,0,.16);
backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);
overflow:hidden;
}
.searchSuggestions.active{
display:flex;
}
.searchSuggestion{
width:100%;
min-width:0;
min-height:50px;
padding:7px 9px;
border:0;
border-radius:10px;
background:transparent;
display:flex;
align-items:center;
gap:10px;
text-align:left;
font-family:inherit;
cursor:pointer;
transition:background .2s ease,transform .2s ease;
}
.searchSuggestion:hover{
background:#f1f5f2;
}
.searchSuggestion:active{
transform:scale(.985);
}
.searchSuggestionIcon{
flex:0 0 34px;
width:34px;
height:34px;
border-radius:10px;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
font-size:14px;
box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
}
.searchSuggestionContent{
min-width:0;
flex:1;
display:flex;
flex-direction:column;
overflow:hidden;
}
.searchSuggestionTitle{
width:100%;
min-width:0;
font-size:13.5px;
font-weight:600;
color:#26332c;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
line-height:19px;
}
.searchSuggestionCategory{
display:flex;
align-items:center;
gap:5px;
width:100%;
min-width:0;
margin-top:2px;
font-size:10.5px;
font-weight:500;
color:#7b8781;
white-space:nowrap;
overflow:hidden;
line-height:15px;
}
.searchSuggestionCategoryDot{
flex:0 0 6px;
width:6px;
height:6px;
border-radius:50%;
}
.searchSuggestionCategory span:last-child{
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}

/* ---------- Statistics ---------- */
.statisticsBlock{
display:flex;
align-items:stretch;
gap:10px;
position:relative;
z-index:1;
}
.selectedCounter,
.objectsCounter{
min-width:0;
flex:1;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:9px 8px;
border-radius:var(--radius-md);
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.08);
text-align:center;
overflow:hidden;
}
.counterValue,
.objectsValue{
display:block;
width:100%;
font-size:20px;
font-weight:700;
line-height:1.15;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.selectedCounter .counterValue{
color:var(--accent);
}
.objectsCounter .objectsValue{
color:#fff;
}
.counterLabel,
.objectsLabel{
display:block;
width:100%;
font-size:10.5px;
font-weight:500;
opacity:.6;
margin-top:3px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.layerButton{
width:44px;
height:44px;
margin:auto 0;
border-radius:50%;
border:1px solid rgba(255,255,255,.12);
background:rgba(255,255,255,.07);
color:#fff;
font-size:16px;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
transition:all var(--transition);
flex-shrink:0;
}
.layerButton:hover{
background:rgba(255,255,255,.14);
transform:scale(1.07);
}
.layerButton:active{
transform:scale(.94);
}
body.theme-liquid .selectedCounter,
body.theme-liquid .objectsCounter{
background:rgba(255,255,255,.35);
border-color:rgba(0,0,0,.08);
color:#1a1a1a;
}
body.theme-liquid .selectedCounter .counterValue{
color:var(--accent);
}
body.theme-liquid .objectsCounter .objectsValue{
color:#1a1a1a;
}
body.theme-liquid .layerButton{
color:#1a1a1a;
background:rgba(255,255,255,.4);
border-color:rgba(0,0,0,.1);
}

/* ---------- Sections ---------- */
.sectionHeader{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:8px;
position:relative;
z-index:1;
flex-shrink:0;
}
.sectionHeader h2{
margin:0;
font-size:12px;
font-weight:600;
text-transform:uppercase;
letter-spacing:.05em;
opacity:.55;
}
.collapse-btn{
display:flex;
align-items:center;
justify-content:center;
gap:6px;
padding:5px 7px;
border:1px solid transparent;
border-radius:8px;
background:transparent;
color:rgba(255,255,255,.5);
font-size:11px;
font-weight:500;
line-height:1;
cursor:pointer;
transition:color var(--transition-fast),background var(--transition-fast),border-color var(--transition-fast);
}
.collapse-btn:hover{
color:rgba(255,255,255,.9);
background:rgba(255,255,255,.06);
}
.collapse-btn i{
font-size:10px;
transition:transform .25s ease;
}

/* ---------- Categories & Districts ---------- */
.categorySection,
.districtSection,
.toolSection{
position:relative;
z-index:1;
flex-shrink:0;
}
.categoryList,
.districtList{
display:flex;
flex-direction:column;
gap:5px;
overflow:hidden;
max-height:2000px;
opacity:1;
transition:max-height .35s ease,opacity .25s ease;
}
.categoryList.collapsed,
.districtList.collapsed{
max-height:0;
opacity:0;
pointer-events:none;
}
/* ---------- Common Item ---------- */
.categoryItem{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
width:100%;
min-height:48px;
box-sizing:border-box;
padding:8px 11px;
border-radius:var(--radius-md);
background:rgba(255,255,255,.05);
border:1px solid transparent;
transition:background var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast);
cursor:pointer;
flex-shrink:0;
}
.categoryItem:hover{
background:rgba(255,255,255,.09);
}
.categoryItem:active{
transform:scale(.99);
}
.categoryItem.active{
background:rgba(27,148,47,.15);
border-color:rgba(27,148,47,.3);
}
.categoryInfo{
display:flex;
align-items:center;
gap:11px;
min-width:0;
flex:1;
}
.categoryIcon{
width:30px;
height:30px;
min-width:30px;
border-radius:9px;
display:flex;
align-items:center;
justify-content:center;
font-size:13px;
color:#fff;
flex-shrink:0;
box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
}
.categoryName{
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
font-size:13.5px;
font-weight:500;
}
/* ---------- Category Icons ---------- */
.categoryIcon.nature{
background:linear-gradient(135deg,#34c759,#30d158);
}
.categoryIcon.architecture{
background:linear-gradient(135deg,#af52de,#bf5af2);
}
.categoryIcon.museum{
background:linear-gradient(135deg,#ff9f0a,#ffb340);
}
.categoryIcon.park{
background:linear-gradient(135deg,#30d158,#34c759);
}
.categoryIcon.water{
background:linear-gradient(135deg,#0a84ff,#5ac8fa);
}
.categoryIcon.route{
background:linear-gradient(135deg,#ffd60a,#ffcc00);
}
.categoryIcon.history{
background:linear-gradient(135deg,#ff453a,#ff6961);
}
/* ---------- Municipal Districts ---------- */
.districtSection{
margin-top:18px;
}
.districtList{
gap:5px;
}
.districtItem{
background:rgba(255,255,255,.05);
}
.districtItem:hover{
background:rgba(255,255,255,.09);
}
.districtItem.active{
background:rgba(220,20,60,.12);
border-color:rgba(220,20,60,.3);
}
.districtIcon{
background:rgba(220,20,60,.15);
color:#dc143c;
}
.districtItem.active .districtIcon{
background:rgba(220,20,60,.2);
color:#ff4d6d;
}
/* ---------- Liquid Glass ---------- */
body.theme-liquid .sectionHeader h2{
color:#1a1a1a;
}
body.theme-liquid .categoryItem{
background:rgba(255,255,255,.3);
border-color:rgba(255,255,255,.08);
}
body.theme-liquid .categoryItem:hover{
background:rgba(255,255,255,.45);
}
body.theme-liquid .categoryItem.active{
background:rgba(27,148,47,.2);
border-color:rgba(27,148,47,.35);
}
body.theme-liquid .districtItem{
background:rgba(255,255,255,.3);
}
body.theme-liquid .districtItem:hover{
background:rgba(255,255,255,.45);
}
body.theme-liquid .districtItem.active{
background:rgba(220,20,60,.15);
border-color:rgba(220,20,60,.3);
}
body.theme-liquid .districtIcon{
background:rgba(220,20,60,.15);
color:#dc143c;
}
body.theme-liquid .districtItem.active .districtIcon{
background:rgba(220,20,60,.2);
color:#dc143c;
}
body.theme-liquid .collapse-btn{
color:rgba(0,0,0,.55);
}
body.theme-liquid .collapse-btn:hover{
color:rgba(0,0,0,.85);
background:rgba(255,255,255,.2);
}
body.theme-liquid .categoryName{
color:#1a1a1a;
}
/* ---------- Switch ---------- */
.switch{
position:relative;
display:inline-block;
width:42px;
height:24px;
flex-shrink:0;
}
.switch input{
opacity:0;
width:0;
height:0;
}
.slider{
position:absolute;
inset:0;
cursor:pointer;
background:rgba(255,255,255,.15);
border-radius:999px;
transition:.28s cubic-bezier(.4,0,.2,1);
}
.slider::before{
content:"";
position:absolute;
height:18px;
width:18px;
left:3px;
bottom:3px;
background:#fff;
border-radius:50%;
transition:.28s cubic-bezier(.4,0,.2,1);
box-shadow:0 2px 5px rgba(0,0,0,.3);
}
input:checked+.slider{
background:var(--accent);
box-shadow:0 0 10px var(--accent-glow);
}
input:checked+.slider::before{
transform:translateX(18px);
}
body.theme-liquid .slider{
background:rgba(0,0,0,.12);
box-shadow:0 0 1px 0 rgba(0,0,0,.4);
}
body.theme-liquid input:checked+.slider{
background:var(--accent);
box-shadow:0 0 8px rgba(27,148,47,.25);
}
body.theme-liquid .slider::before{
background:#fff;
box-shadow:0 2px 5px rgba(0,0,0,.18);
}




/* Switch */
.switch {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 24px;
    flex-shrink: 0;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    transition: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.slider::before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

input:checked + .slider {
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent-glow);
}

input:checked + .slider::before {
    transform: translateX(18px);
}

/* ---------- Tools ---------- */
.toolSection {
    position: relative;
    z-index: 1;
}

.toolGrid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 9px;
}

.toolButton {
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all var(--transition);
    overflow: hidden;
}

.toolButton:hover {
    background: rgba(255, 255, 255, 0.14);
    transform: scale(1.09);
    border-color: rgba(255, 255, 255, 0.25);
}

.toolButton:active {
    transform: scale(0.93);
}

body.theme-liquid .toolButton {
    color: #1a1a1a;
    background: rgba(255, 255, 255, 0.4);
    border-color: rgba(0, 0, 0, 0.1);
}

body.theme-liquid .toolButton:hover {
    background: rgba(255, 255, 255, 0.6);
}

body.theme-liquid .slider {
    box-shadow: 0 0 1px 0 black;
}

/* Tooltip */
.toolButton[data-title]::after {
    content: attr(data-title);
    position: absolute;
    bottom: calc(100% + 7px);
    left: 50%;
    transform: translateX(-50%) scale(0.9);
    background: rgba(20, 22, 30, 0.95);
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    padding: 4px 9px;
    border-radius: 7px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all 0.18s ease;
    z-index: 30;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.toolButton:hover[data-title]::after {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

/* ---------- Footer ---------- */
.menuFooter {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 12px;
    opacity: 0.75;
    position: relative;
    z-index: 1;
}

.statusDot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 7px var(--accent-glow);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

.statusText {
    flex: 1;
}

.accuracyText {
    opacity: 0.7;
}

.themeToggle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: all var(--transition-fast);
    margin-left: 4px;
}

.themeToggle:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.08);
}

body.theme-liquid .themeToggle {
    color: #1a1a1a;
    background: rgba(255, 255, 255, 0.4);
    border-color: rgba(0, 0, 0, 0.1);
}

/* ---------- Ripple ---------- */
.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: scale(0);
    animation: ripple-anim 0.55s linear;
    pointer-events: none;
}

@keyframes ripple-anim {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* ---------- Responsive ---------- */
@media (max-width: 480px) {
    .mapMenu {
        width: calc(100vw - 24px);
        left: 12px;
        top: 12px;
        bottom: 12px;
        padding: 14px;
    }

    .toolGrid {
        gap: 7px;
    }
}