/* ──────────────────────────────────────────
   Dark Gaming Theme – map pages
   Scoped under body.dark-theme
   ────────────────────────────────────────── */

/* ── Base variables override ──────────────── */
body.dark-theme {
    --primary-color: #d4a853;
    --secondary-color: #0e0e1a;
    --bg-color: #0c0c14;
    --text-color: #d8d6d2;
    --border-color: #1e1e30;
    --card-bg: #111119;
    --card-hover: #18182a;
    --muted: #6a6a7c;
    --input-bg: #16162250;
    --input-border: #2a2a40;
    background-color: var(--bg-color);
    color: var(--text-color);
}

.map-container {
        overflow: hidden;
}

/* ── Sidebar ──────────────────────────────── */
.dark-theme .sidebar {
    background: var(--card-bg);
    border-right: 1px solid var(--border-color);
    box-shadow: 2px 0 12px rgba(0, 0, 0, .5);
}

.dark-theme .sidebar-header {
    background: #0a0a16;
    border-bottom: 1px solid var(--border-color);
}

.dark-theme .sidebar-header h1 {
    color: var(--primary-color);
    font-size: 1.3rem;
    letter-spacing: -.3px;
}

.dark-theme .sidebar-header nav a {
    color: #888;
    font-size: .85rem;
    transition: color .2s;
}
.dark-theme .sidebar-header nav a:hover {
    color: #ddd;
}
.dark-theme .sidebar-header nav a.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

/* ── Search / Selectors ───────────────────── */
.dark-theme .search-container {
    border-bottom-color: var(--border-color);
}

.dark-theme .map-selector-btn {
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    color: #aaa;
    font-weight: 500;
}
.dark-theme .map-selector-btn:hover {
    background: var(--card-hover);
    border-color: #3a3a55;
    color: #ddd;
}
.dark-theme .map-selector-btn.active {
    background: var(--primary-color);
    color: #0a0a0f;
    border-color: var(--primary-color);
    font-weight: 700;
}

.dark-theme .region-select,
.dark-theme #search-input {
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--text-color);
    border-radius: 6px;
}
.dark-theme .region-select:focus,
.dark-theme #search-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(212, 168, 83, .15);
}
.dark-theme .region-select option {
    background: #1a1a28;
    color: var(--text-color);
}

.dark-theme .search-clear {
    color: #666;
}
.dark-theme .search-clear:hover {
    color: #ccc;
}

/* ── Filter controls ──────────────────────── */
.dark-theme .filter-btn {
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    color: #aaa;
    border-radius: 6px;
}
.dark-theme .filter-btn:hover {
    background: var(--card-hover);
    border-color: #3a3a55;
    color: #ddd;
}

.dark-theme .toggle-control {
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    color: #aaa;
    border-radius: 6px;
}
.dark-theme .toggle-control:hover {
    background: var(--card-hover);
    border-color: #3a3a55;
    color: #ddd;
}

/* ── Category list checkboxes ─────────────── */
.dark-theme .filters-container {
    border-bottom-color: var(--border-color);
}

.dark-theme .sword-check {
    border-color: #555;
}
.dark-theme .sword-check:hover {
    border-color: var(--primary-color);
}
.dark-theme .sword-check:checked {
    background: var(--primary-color);
    border-color: var(--primary-color);
}
.dark-theme .sword-check:checked::after {
    border-color: #0a0a0f;
}

.dark-theme .category-item {
    border-bottom-color: var(--border-color);
    color: var(--text-color);
}
.dark-theme .category-item:hover {
    background: rgba(212, 168, 83, .04);
}

/* ── Language & footer ────────────────────── */
.dark-theme .language-selector {
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--text-color);
    border-radius: 6px;
}
.dark-theme .language-selector:hover {
    border-color: #3a3a55;
}

.dark-theme .sidebar-footer {
    background: #0d0d18;
    border-top: 1px solid var(--border-color);
}

.dark-theme .copyright {
    color: var(--muted);
}
.dark-theme .copyright a {
    color: #8b6e2f;
}
.dark-theme .copyright a:hover {
    color: var(--primary-color);
}

/* ── Map floating buttons ─────────────────── */
.dark-theme .map-floating-btn {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: #bbb;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
    border-radius: 6px;
}
.dark-theme .map-floating-btn:hover {
    background: var(--card-hover);
    border-color: #3a3a55;
    color: #fff;
}
.dark-theme .map-floating-btn.active {
    background: var(--primary-color);
    color: #0a0a0f;
    border-color: var(--primary-color);
}

.dark-theme .map-home-btn {
    color: var(--primary-color);
}
.dark-theme .map-home-btn:hover {
    color: #fff;
    background: rgba(212, 168, 83, .15);
    border-color: var(--primary-color);
}

/* ── Floating dropdown dark-theme ─────────── */
.dark-theme .dropdown-menu {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .5);
}
.dark-theme .dropdown-menu .dropdown-item {
    color: #bbb;
}
.dark-theme .dropdown-menu .dropdown-item:hover {
    background: var(--card-hover);
    color: #fff;
}
.dark-theme .dropdown-menu .dropdown-item.active {
    background: var(--primary-color);
    color: #0a0a0f;
}

/* ── Selection panel ──────────────────────── */
.dark-theme .selection-panel {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .5);
    border-radius: 8px;
}
.dark-theme .selection-panel .panel-header {
    border-bottom-color: var(--border-color);
}
.dark-theme .selection-panel .action-btn {
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    color: #aaa;
}
.dark-theme .selection-panel .action-btn:hover {
    background: var(--card-hover);
    color: #ddd;
}
.dark-theme .selection-panel .action-btn.save {
    background: rgba(76, 175, 80, .15);
    border-color: #2d6e30;
    color: #6ecc72;
}
.dark-theme .selection-panel .action-btn.delete {
    background: rgba(244, 67, 54, .12);
    border-color: #6e2d2d;
    color: #e06060;
}

/* ── Popup dark override ──────────────────── */
.dark-theme .maplibregl-popup-content,
.dark-theme .gflatmap-popup-content {
    background: #1a1a28 !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color);
}
.dark-theme .maplibregl-popup-close-button {
    color: #888;
}
.dark-theme .maplibregl-popup-close-button:hover {
    color: #eee;
}
.dark-theme .gflatmap-tip-top {
    border-top-color: #1a1a28;
    border-bottom-color: transparent;
}
.dark-theme .gflatmap-tip-bottom {
    border-bottom-color: #1a1a28;
    border-top-color: transparent;
}
.dark-theme .marker-popup-category strong {
    color: var(--primary-color);
}

/* ── GFlatMap controls (nav/fullscreen) ───── */
.dark-theme .gflatmap-ctrl-nav {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color);
    border-radius: 6px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .4) !important;
}
.dark-theme .gflatmap-ctrl-nav button {
    background: var(--card-bg) !important;
    color: #bbb !important;
    border-color: var(--border-color) !important;
}
.dark-theme .gflatmap-ctrl-nav button:hover {
    background: var(--card-hover) !important;
    color: #fff !important;
}

.dark-theme .gflatmap-ctrl-fullscreen {
    background: var(--card-bg) !important;
    color: #bbb !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .4) !important;
}
.dark-theme .gflatmap-ctrl-fullscreen:hover {
    background: var(--card-hover) !important;
    color: #fff !important;
}

/* ── Loading overlay ──────────────────────── */
.dark-theme .loading-overlay {
    background: rgba(8, 8, 13, .92);
    color: var(--text-color);
}

/* ── Toast ─────────────────────────────────── */
.dark-theme .toast-message {
    background-color: rgba(30, 30, 50, .95);
    border: 1px solid var(--border-color);
}

/* ── Image overlay ────────────────────────── */
.dark-theme .image-overlay {
    background: rgba(8, 8, 13, .9);
}

/* ── Floating show/hide btn ───────────────── */
.dark-theme .floating-showhide-btn {
    background: var(--card-bg);
    color: #bbb;
    border-color: var(--border-color);
}

/* ── Scrollbar ────────────────────────────── */
.dark-theme ::-webkit-scrollbar {
    width: 6px;
}
.dark-theme ::-webkit-scrollbar-track {
    background: var(--card-bg);
}
.dark-theme ::-webkit-scrollbar-thumb {
    background: #2a2a40;
    border-radius: 3px;
}
.dark-theme ::-webkit-scrollbar-thumb:hover {
    background: #3a3a55;
}

/* ── Sync game data button dark ───────────── */
.dark-theme #btn-load-game-data {
    background: var(--card-bg);
    border-color: var(--border-color);
    color: #bbb;
}
.dark-theme #btn-load-game-data.active {
    background: var(--card-bg) !important;
    color: var(--primary-color) !important;
    border-color: var(--border-color) !important;
}
.category-group h3 {
    font-size: 0.9rem;
    color: #dddddd;
    margin-bottom: 10px;
    text-transform: uppercase;
    border-bottom: 1px solid #000000;   
    padding-bottom: 0px;
}

.marker-popup h3 {
    margin-bottom: 5px;
    color: white;
    max-width: calc(100% - 25px);
}

.marker-popup p {
    font-size: 0.9rem;
    margin-bottom: 10px;
    color: #dddddd;
}

.map-floating-btn {
    top: 10px;
}
.map-home-btn {
    left: 10px;
}

/* ── Jump marker (auto-jump from quest page) ── */
.jump-marker {
    position: relative;
    width: 20px;
    height: 20px;
}
.jump-marker-dot {
    position: absolute;
    top: 50%; left: 50%;
    width: 12px; height: 12px;
    margin: -6px 0 0 -6px;
    background: #d4a853;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(212, 168, 83, .6);
    z-index: 2;
}
.jump-marker-ping {
    position: absolute;
    top: 50%; left: 50%;
    width: 40px; height: 40px;
    margin: -20px 0 0 -20px;
    border: 2px solid rgba(212, 168, 83, .7);
    border-radius: 50%;
    animation: jumpPing 1.5s ease-out infinite;
    z-index: 1;
}
@keyframes jumpPing {
    0%   { transform: scale(.5); opacity: 1; }
    100% { transform: scale(2.5); opacity: 0; }
}

canvas {
  -webkit-tap-highlight-color: transparent;
  outline: none;
  touch-action: none;
}

.marker-popup a {
    color: #d4a853;
    font-weight: 500;   
}

.vst-steps {
    background-color: #00a514;
    display: inline-block;
    border-radius: 8px;
    padding: 3px;
}
.floor-selector {
    transition: opacity 0.2s;
}

#app.focus-mode .map-floating-btn, #app.focus-mode .floor-selector {
    opacity: 0;
}

#app.focus-mode:hover .map-floating-btn, #app.focus-mode:hover .floor-selector {
    opacity: 1;
}

#app.focus-mode:active .map-floating-btn, #app.focus-mode:active .floor-selector {
    opacity: 1;
}

.discord-round-button {
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    height: 2.25rem;
    padding: 0 1rem;
    background-color: #5865F2;
    color: #f8fafc;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
    white-space: nowrap;
}
.discord-round-button:hover {
    background-color: #4752C4;
}