/* ── Tour popover: neon-dark theme matching the game ─────────────────── */
/* Force dark theme on driver.js popover elements */

.driver-popover {
    background: var(--bg-card) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-lg), 0 0 0 1px var(--color-glow-green-12) !important;
    max-width: 340px !important;
    min-width: 240px !important;
    font-family: var(--font-body) !important;
}

.driver-popover-title {
    color: var(--accent) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: .01em !important;
}

.driver-popover-description {
    color: var(--text-dim) !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    font-weight: 400 !important;
}

.driver-popover-close-btn {
    color: var(--text-muted) !important;
    transition: color .15s ease !important;
}

.driver-popover-close-btn:hover {
    color: var(--text) !important;
}

.driver-popover-footer button {
    background: var(--bg-input) !important;
    color: var(--text-dim) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 5px 12px !important;
    transition: background .15s ease, color .15s ease, border-color .15s ease !important;
}

.driver-popover-footer button:hover {
    background: var(--bg-card-alt) !important;
    color: var(--text) !important;
    border-color: var(--accent) !important;
}

.driver-popover-footer .driver-popover-btn-disabled {
    opacity: .35 !important;
    pointer-events: none !important;
}

.driver-popover-progress-text {
    color: var(--text-muted) !important;
    font-size: 12px !important;
}

.driver-popover-footer .tour-skip-btn {
    color: var(--accent) !important;
    border-color: var(--color-glow-green) !important;
}

.driver-popover-footer .tour-skip-btn:hover {
    background: var(--color-glow-green-10) !important;
    color: var(--accent) !important;
}

.driver-overlay {
    opacity: .55 !important;
}

.driver-active-element {
    box-shadow: 0 0 0 2px var(--color-glow-green-4), 0 0 20px var(--color-glow-green-15) !important;
    transition: box-shadow .3s ease !important;
}

.tour-replay-link {
    display: inline-block;
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    letter-spacing: .02em;
    transition: color .15s ease;
    cursor: pointer;
    user-select: none;
}

.tour-replay-link:hover {
    color: var(--accent);
}

/* SVG fills inside data URIs are self-contained assets — CSS vars cannot
   penetrate a url() document, so the encoded %23hex there is by design. */
.tour-replay-link::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 5px;
    vertical-align: middle;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21 12a9 9 0 11-18 0 9 9 0 0118 0z'/%3E%3C/svg%3E") no-repeat center/contain;
    opacity: .6;
    transition: opacity .15s ease;
}

.tour-replay-link:hover::before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2334d399' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21 12a9 9 0 11-18 0 9 9 0 0118 0z'/%3E%3C/svg%3E") no-repeat center/contain;
    opacity: 1;
}