/* ═══════════════════════════════════════════════════
   Fluid Glass Design System v1.0
   ═══════════════════════════════════════════════════ */

:root {
    --glass-bg: rgba(255,255,255,0.82);
    --glass-dark: rgba(22,27,34,0.82);
    --glass-border: rgba(255,255,255,0.12);
    --glass-shadow: 0 8px 32px rgba(0,0,0,0.08);
    --glass-shadow-lg: 0 16px 48px rgba(0,0,0,0.12);
    --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --radius-sm: 10px;
    --radius: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
}

.dark {
    --glass-bg: rgba(22,27,34,0.85);
    --glass-shadow: 0 8px 32px rgba(0,0,0,0.3);
    --glass-shadow-lg: 0 16px 48px rgba(0,0,0,0.5);
}

/* ── Glass card ── */
.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--glass-shadow);
}

.glass-sm {
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

.glass-lg {
    background: var(--glass-bg);
    backdrop-filter: blur(32px);
    -webkit-backdrop-filter: blur(32px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--glass-shadow-lg);
}

/* ── Кнопки ── */
.btn-glass {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 10px 20px;
    background: rgba(0,122,255,0.12);
    color: #007aff;
    border: none;
    border-radius: var(--radius);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px; font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s var(--spring), background 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.btn-glass:active { transform: scale(0.95); background: rgba(0,122,255,0.2); }
.btn-glass:hover { background: rgba(0,122,255,0.16); }
.dark .btn-glass { color: #5ea8ff; }

.btn-primary {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 10px 20px;
    background: #007aff;
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px; font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s var(--spring), box-shadow 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.btn-primary:active { transform: scale(0.95); }
.btn-primary:hover { box-shadow: 0 8px 24px rgba(0,122,255,0.3); }

/* ── Shimmer (скелетон) ── */
.shimmer {
    background: linear-gradient(90deg, #e8e8ed 25%, #f5f5f7 50%, #e8e8ed 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius);
}
.dark .shimmer {
    background: linear-gradient(90deg, #21262d 25%, #30363d 50%, #21262d 75%);
    background-size: 200% 100%;
}
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Анимации ── */
@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.anim-slide-up { animation: slideUp 0.4s var(--spring); }
.anim-fade-in { animation: fadeIn 0.3s ease; }

/* ── SPA page transitions ── */
.page-transition {
    animation: pageIn 0.35s var(--ease-out);
}
@keyframes pageIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Scrollbar hide ── */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ── Tap highlight ── */
* { -webkit-tap-highlight-color: transparent; }

/* Меню overlay */
#menu-overlay {
    position: fixed; inset: 0;
    z-index: 49;
    background: rgba(0,0,0,0.3);
    transition: opacity 0.3s;
}

/* ═══════════════════════════════════════════════════
   Crosshair (прицел в центре карты)
   ═══════════════════════════════════════════════════ */

/* ── Адаптивные размеры ── */
:root {
    --ch-size: 56px;
    --ch-dot: 8px;
}

/* Планшет (≤1024px) */
@media (max-width: 1024px) {
    :root {
        --ch-size: 48px;
        --ch-dot: 7px;
    }
}

/* Мобильный (< 768px) */
@media (max-width: 767px) {
    :root {
        --ch-size: 40px;
        --ch-dot: 6px;
    }
}

/* Очень маленький экран (< 375px) */
@media (max-width: 374px) {
    :root {
        --ch-size: 34px;
        --ch-dot: 5px;
    }
}

/* ── Контейнер прицела ── */
.crosshair {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 30;
    pointer-events: none;            /* клики проходят сквозь прицел */
    opacity: 0;
    transition: opacity 0.3s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.crosshair.visible {
    opacity: 1;
}

.crosshair.hidden {
    display: none;                   /* скрыт после завершения fade-out */
}

/* ── Внешнее кольцо ── */
.crosshair-outer {
    width: var(--ch-size);
    height: var(--ch-size);
    border-radius: 50%;
    border: 2.5px solid rgba(220, 38, 38, 0.55);
    background: transparent;                    /* прозрачный — не загораживает карту */
    box-shadow:
        0 0 14px rgba(220, 38, 38, 0.12),
        inset 0 0 10px rgba(220, 38, 38, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.12s ease;
}

/* ── Центральная точка ── */
.crosshair-dot {
    width: var(--ch-dot);
    height: var(--ch-dot);
    border-radius: 50%;
    background: rgba(220, 38, 38, 0.85);
    box-shadow: 0 0 8px rgba(220, 38, 38, 0.35);
}

/* ── Тёмная тема: красный ярче ── */
.dark .crosshair-outer {
    border-color: rgba(220, 38, 38, 0.65);
    background: transparent;
    box-shadow:
        0 0 18px rgba(220, 38, 38, 0.20),
        inset 0 0 12px rgba(220, 38, 38, 0.08);
}

.dark .crosshair-dot {
    background: rgba(220, 38, 38, 0.92);
    box-shadow: 0 0 10px rgba(220, 38, 38, 0.45);
}

/* ═══════════════════════════════════════════════════
   Snap-to-nearest row
   ═══════════════════════════════════════════════════ */

.snap-row {
    position: fixed;
    bottom: 64px; left: 12px; right: 12px;
    z-index: 35;
    padding: 10px 14px;
    cursor: pointer;
    transition: transform 0.25s var(--spring), opacity 0.25s;
    -webkit-tap-highlight-color: transparent;
}
.snap-row.hidden { display: none; }
.snap-row:active { transform: scale(0.98); }

.snap-row-inner {
    display: flex; align-items: center; gap: 10px;
}

.snap-icon {
    font-size: 22px; flex-shrink: 0;
}

.snap-info {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column;
}

.snap-title {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 15px; font-weight: 600;
    color: #111;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dark .snap-title { color: #e6edf3; }

.snap-sub {
    font-size: 12px; font-weight: 500;
    color: #888;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dark .snap-sub { color: #8b949e; }

.snap-rating {
    font-size: 14px; font-weight: 700;
    color: #ff6b00;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .snap-row { left: 50%; right: auto; transform: translateX(-50%); min-width: 360px; max-width: 500px; }
    .snap-row:active { transform: translateX(-50%) scale(0.98); }
}