* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    background-color: black;
}

body {
    max-width: 640px;
    margin: 20px auto;
    padding: 15px;
    background: rgba(248, 249, 250, 0.8); /* Прозрачность 80% */
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Сегмент дороги — стилизованная полоса */
.road-segment {
    display: inline-block;
    width: 32px;
    height: 6px;
    background: linear-gradient(90deg, #adb5bd, #6c757d, #adb5bd);
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transform: translateY(22px); /* Выравнивание по центру с городами */
    flex-shrink: 0;
}

/* Ваш город — выделение */
#my-city {
    border: 2px solid white !important;
    box-shadow: 0 0 12px rgba(40, 167, 69, 0.8);
    animation: pulse 1.5s infinite;
    position: relative;
}

#my-city::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border: 2px solid #28a745;
    border-radius: 12px;
    animation: blink 1.5s infinite;
    opacity: 0.6;
}

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

@keyframes blink {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 0; }
}

/* Подсветка при наведении */
.clickable-cell:hover {
    transform: scale(1.1);
    transition: transform 0.2s ease;
    z-index: 10;
}

/* Анимация клика */
.clickable-cell:active {
    transform: scale(0.95);
}

/* Визуальный эффект выбора */
.map-cell.selected {
    outline: 3px solid gold;
    border-radius: 8px;
}