/**
 * 主题相关CSS样式
 * 从map.html中提取的主题和颜色相关样式
 */

/* CSS变量定义 */
:root {
    --treasure-brown: #8B4513;
    --treasure-gold: #D4AF37;
    --treasure-blue: #1E90FF;
    --treasure-orange: #FF7F50;
    --treasure-dark: #1A1A1A;
}

/* 备用颜色类 */
.text-treasure-brown { color: var(--treasure-brown) !important; }
.text-treasure-gold { color: var(--treasure-gold) !important; }
.text-treasure-blue { color: var(--treasure-blue) !important; }
.bg-treasure-blue { background-color: var(--treasure-blue) !important; }
.bg-treasure-brown { background-color: var(--treasure-brown) !important; }
.border-treasure-blue { border-color: var(--treasure-blue) !important; }

/* 深色主题 */
.dark {
    background-color: #1a1a1a;
    color: #f3f4f6;
}

.dark header {
    background-color: #1f2937;
    border-bottom: 1px solid #374151;
}

.dark #filter-panel,
.dark #treasure-panel,
.dark #ai-assistant-panel {
    background-color: #1f2937;
    color: #f3f4f6;
}

.dark .bg-gray-50 {
    background-color: #374151 !important;
}

.dark .bg-white {
    background-color: #1f2937 !important;
}

.dark .text-gray-700 {
    color: #d1d5db !important;
}

.dark .border-gray-200 {
    border-color: #4b5563 !important;
}

/* 暗色主题 - 宝藏悬浮卡片 */
.dark .leaflet-popup-content-wrapper {
    background-color: #1f2937 !important;
    color: #f3f4f6 !important;
    border: 1px solid #4b5563 !important;
}

.dark .leaflet-popup-tip {
    background-color: #1f2937 !important;
    border: 1px solid #4b5563 !important;
}

.dark .treasure-hover-popup {
    background: #1f2937 !important;
    color: #f3f4f6 !important;
    border: 1px solid #4b5563 !important;
}

.dark .treasure-hover-popup h3 {
    color: #fbbf24 !important;
}

.dark .treasure-hover-popup .text-gray-500 {
    color: #9ca3af !important;
}

.dark .treasure-hover-popup .text-gray-600 {
    color: #d1d5db !important;
}

.dark .treasure-hover-popup .text-gray-700 {
    color: #f3f4f6 !important;
}

.dark .treasure-hover-popup .bg-gray-100 {
    background-color: #374151 !important;
}

/* 暗色主题 - 右侧详情面板内容 */
.dark #treasure-content {
    background-color: #1f2937 !important;
    color: #f3f4f6 !important;
}

.dark #treasure-name {
    color: #fbbf24 !important;
}

.dark #close-panel {
    color: #9ca3af !important;
}

.dark #close-panel:hover {
    background-color: #374151 !important;
    color: #f3f4f6 !important;
}

.dark #treasure-details {
    background-color: #1f2937 !important;
    color: #f3f4f6 !important;
}

.dark #treasure-details .text-treasure-brown {
    color: #fbbf24 !important;
}

.dark #treasure-details .text-gray-600 {
    color: #d1d5db !important;
}

.dark #treasure-details .text-gray-700 {
    color: #f3f4f6 !important;
}

.dark #treasure-details .bg-gray-50 {
    background-color: #374151 !important;
}

.dark #treasure-details .bg-white {
    background-color: #1f2937 !important;
}

.dark #treasure-details .border-gray-200 {
    border-color: #4b5563 !important;
}

.dark .tab-button {
    color: #d1d5db !important;
}

.dark .tab-button.active {
    color: #fbbf24 !important;
    border-bottom-color: #fbbf24 !important;
}

/* 暗色主题 - 其他UI元素 */
.dark #advanced-search-panel,
.dark #floating-search-panel,
.dark #floating-search-suggestions,
.dark #theme-dropdown,
.dark #legend-details,
.dark #danmaku-input-modal .bg-white,
.dark #danmaku-detail-modal .bg-white,
.dark #danmaku-leaderboard-drawer {
    background-color: #1f2937 !important;
    color: #f3f4f6 !important;
    border-color: #4b5563 !important;
}

.dark .bg-white {
    background-color: #1f2937 !important;
}

.dark .hover\\:bg-gray-50:hover {
    background-color: #374151 !important;
}

.dark .text-gray-500 {
    color: #9ca3af !important;
}

.dark .text-gray-600 {
    color: #d1d5db !important;
}

.dark .border-gray-200 {
    border-color: #4b5563 !important;
}

/* 暗色主题 - 精确坐标区域和特殊背景色 */
.dark .bg-blue-50 {
    background-color: #1e3a8a !important;
    color: #e0e7ff !important;
}

.dark .text-blue-700 {
    color: #93c5fd !important;
}

.dark .hover\\:bg-blue-50:hover {
    background-color: #1e3a8a !important;
}

.dark .hover\\:bg-gray-50:hover {
    background-color: #374151 !important;
}

.dark .bg-gray-50 {
    background-color: #374151 !important;
}

.dark .bg-red-50 {
    background-color: #7f1d1d !important;
    color: #fecaca !important;
}

.dark .border-red-200 {
    border-color: #dc2626 !important;
}

/* 暗色主题 - 搜索建议 */
.dark .suggestion-item {
    background-color: #1f2937 !important;
    color: #f3f4f6 !important;
    border-color: #4b5563 !important;
}

.dark .suggestion-item:hover {
    background-color: #374151 !important;
}

/* 弹幕颜色主题 */
.danmaku-colors-1 {
    background: linear-gradient(135deg, #FF6B6B, #FF8E8E);
    color: white;
}

.danmaku-colors-2 {
    background: linear-gradient(135deg, #4ECDC4, #6EE7DE);
    color: white;
}

.danmaku-colors-3 {
    background: linear-gradient(135deg, #45B7D1, #6BC5E8);
    color: white;
}

.danmaku-colors-4 {
    background: linear-gradient(135deg, #96CEB4, #B8E6C1);
    color: white;
}

.danmaku-colors-5 {
    background: linear-gradient(135deg, #FFEAA7, #FDCB6E);
    color: #2d3436;
}

/* ========================================
   🎮 游戏风格主题 (MapGenie Style)
   ======================================== */

/* 游戏主题CSS变量 - MapGenie 风格 */
.game-theme {
    --game-bg-primary: #000000;
    --game-bg-secondary: #1a1a1a;
    --game-bg-panel: rgba(26, 26, 26, 0.95);
    --game-bg-hover: #333333;
    --game-border: #404040;
    --game-border-active: #ffd700;
    --game-text-primary: #ffffff;
    --game-text-secondary: #cccccc;
    --game-text-accent: #ffd700;
    --game-accent: #ffd700;
    --game-accent-hover: #ffed4e;
    --game-success: #4ade80;
    --game-warning: #fbbf24;
    --game-danger: #ef4444;
    --game-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
    --game-glow: 0 0 15px rgba(255, 215, 0, 0.3);
}

/* 游戏主题基础样式 */
.game-theme {
    background-color: var(--game-bg-primary) !important;
    color: var(--game-text-primary) !important;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* 游戏主题 - 头部 */
.game-theme header {
    background: linear-gradient(135deg, var(--game-bg-secondary), var(--game-bg-panel)) !important;
    border-bottom: 2px solid var(--game-border) !important;
    box-shadow: var(--game-shadow) !important;
}

.game-theme .header-title {
    color: var(--game-text-accent) !important;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5) !important;
    font-weight: 600 !important;
}

/* 游戏主题 - 面板 */
.game-theme #filter-panel,
.game-theme #treasure-panel,
.game-theme #ai-assistant-panel {
    background: var(--game-bg-panel) !important;
    border: 1px solid var(--game-border) !important;
    box-shadow: var(--game-shadow) !important;
    color: var(--game-text-primary) !important;
    backdrop-filter: blur(10px) !important;
}

/* 游戏主题 - 按钮 */
.game-theme button {
    background: linear-gradient(135deg, var(--game-bg-panel), var(--game-bg-hover)) !important;
    border: 1px solid var(--game-border) !important;
    color: var(--game-text-primary) !important;
    transition: all 0.3s ease;
}

.game-theme button:hover {
    background: linear-gradient(135deg, var(--game-accent), var(--game-accent-hover)) !important;
    border-color: var(--game-border-active) !important;
    box-shadow: var(--game-glow) !important;
    transform: translateY(-1px);
    color: #000000 !important;
}

/* 游戏主题 - 输入框 */
.game-theme input,
.game-theme select,
.game-theme textarea {
    background: var(--game-bg-secondary) !important;
    border: 1px solid var(--game-border) !important;
    color: var(--game-text-primary) !important;
}

.game-theme input:focus,
.game-theme select:focus,
.game-theme textarea:focus {
    border-color: var(--game-border-active);
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
}

/* 游戏主题 - 筛选器 */
.game-theme .filter-section {
    background: rgba(0, 0, 0, 0.7) !important;
    border: 1px solid var(--game-border) !important;
    border-radius: 4px;
    margin-bottom: 8px;
}

.game-theme .filter-section h3 {
    color: var(--game-text-accent) !important;
    border-bottom: 1px solid var(--game-border) !important;
    padding: 8px 12px !important;
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(255, 215, 0, 0.1) !important;
}

/* 游戏主题 - 宝藏类型标签 */
.game-theme .treasure-type-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px;
}

.game-theme .treasure-type-btn {
    background: rgba(64, 64, 64, 0.8) !important;
    border: 1px solid var(--game-border) !important;
    color: var(--game-text-secondary) !important;
    padding: 4px 8px !important;
    border-radius: 12px !important;
    font-size: 11px !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

.game-theme .treasure-type-btn:hover {
    background: var(--game-accent) !important;
    color: #000000 !important;
    border-color: var(--game-border-active) !important;
}

.game-theme .treasure-type-btn.active {
    background: var(--game-accent) !important;
    color: #000000 !important;
    border-color: var(--game-border-active) !important;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.4) !important;
}

/* 游戏主题 - 地图控件 */
.game-theme .leaflet-control-zoom a {
    background: var(--game-bg-panel) !important;
    border: 1px solid var(--game-border) !important;
    color: var(--game-text-primary) !important;
}

.game-theme .leaflet-control-zoom a:hover {
    background: var(--game-accent) !important;
    border-color: var(--game-border-active) !important;
    color: #000000 !important;
}

/* 游戏主题 - 地图容器 */
.game-theme #map {
    background-color: #000000 !important;
    border: 3px solid var(--game-border) !important;
    box-shadow: 
        0 0 20px rgba(255, 215, 0, 0.4),
        0 0 40px rgba(255, 215, 0, 0.2),
        inset 0 0 30px rgba(255, 215, 0, 0.1) !important;
    position: relative;
    overflow: hidden;
}

.game-theme .leaflet-container {
    background-color: #000000 !important;
}

/* 游戏主题 - 地图瓦片层调整 */
.game-theme .leaflet-tile-pane {
    filter: brightness(0.3) contrast(1.2) !important;
}

/* 游戏主题 - 弹窗 */
.game-theme .leaflet-popup-content-wrapper {
    background: linear-gradient(145deg, var(--game-bg-panel), var(--game-bg-secondary)) !important;
    border: 1px solid var(--game-border) !important;
    box-shadow: var(--game-shadow) !important;
    color: var(--game-text-primary) !important;
}

.game-theme .leaflet-popup-tip {
    background: var(--game-bg-panel) !important;
    border: 1px solid var(--game-border) !important;
}

/* 游戏主题 - 宝藏悬浮卡片 */
.game-theme .treasure-hover-popup {
    background: linear-gradient(145deg, var(--game-bg-panel), var(--game-bg-secondary)) !important;
    color: var(--game-text-primary) !important;
    border: 1px solid var(--game-border) !important;
    box-shadow: var(--game-shadow) !important;
}

.game-theme .treasure-hover-popup h3 {
    color: var(--game-text-accent) !important;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.3) !important;
}

.game-theme .treasure-hover-popup .text-gray-500 {
    color: var(--game-text-secondary) !important;
}

.game-theme .treasure-hover-popup .text-gray-600 {
    color: var(--game-text-secondary) !important;
}

.game-theme .treasure-hover-popup .text-gray-700 {
    color: var(--game-text-primary) !important;
}

.game-theme .treasure-hover-popup .bg-gray-100 {
    background-color: var(--game-bg-hover) !important;
}

.game-theme .treasure-hover-popup .text-green-600 {
    color: var(--game-success) !important;
}

/* 游戏主题 - 右侧详情面板内容 */
.game-theme #treasure-content {
    background: var(--game-bg-panel) !important;
    color: var(--game-text-primary) !important;
}

.game-theme #treasure-name {
    color: var(--game-text-accent) !important;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.3) !important;
}

.game-theme #close-panel {
    color: var(--game-text-secondary) !important;
}

.game-theme #close-panel:hover {
    background-color: var(--game-bg-hover) !important;
    color: var(--game-text-primary) !important;
}

.game-theme #treasure-details {
    background: var(--game-bg-panel) !important;
    color: var(--game-text-primary) !important;
}

.game-theme #treasure-details .text-treasure-brown {
    color: var(--game-text-accent) !important;
}

.game-theme #treasure-details .text-gray-600 {
    color: var(--game-text-secondary) !important;
}

.game-theme #treasure-details .text-gray-700 {
    color: var(--game-text-primary) !important;
}

.game-theme #treasure-details .bg-gray-50 {
    background-color: var(--game-bg-hover) !important;
}

.game-theme #treasure-details .bg-white {
    background: var(--game-bg-panel) !important;
}

.game-theme #treasure-details .border-gray-200 {
    border-color: var(--game-border) !important;
}

.game-theme .tab-button {
    color: var(--game-text-secondary) !important;
    border-bottom: 2px solid transparent !important;
}

.game-theme .tab-button.active {
    color: var(--game-text-accent) !important;
    border-bottom-color: var(--game-border-active) !important;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.4) !important;
}

.game-theme .tab-button:hover {
    color: var(--game-text-accent) !important;
}

/* 游戏主题 - 其他UI元素 */
.game-theme #advanced-search-panel,
.game-theme #floating-search-panel,
.game-theme #floating-search-suggestions,
.game-theme #theme-dropdown,
.game-theme #legend-details,
.game-theme #danmaku-input-modal .bg-white,
.game-theme #danmaku-detail-modal .bg-white,
.game-theme #danmaku-leaderboard-drawer {
    background: linear-gradient(145deg, var(--game-bg-panel), var(--game-bg-secondary)) !important;
    color: var(--game-text-primary) !important;
    border: 1px solid var(--game-border) !important;
    box-shadow: var(--game-shadow) !important;
}

.game-theme .bg-white {
    background: var(--game-bg-panel) !important;
}

.game-theme .hover\\:bg-gray-50:hover {
    background-color: var(--game-bg-hover) !important;
}

.game-theme .text-gray-500 {
    color: var(--game-text-secondary) !important;
}

.game-theme .text-gray-600 {
    color: var(--game-text-secondary) !important;
}

.game-theme .border-gray-200 {
    border-color: var(--game-border) !important;
}

/* 游戏主题 - 精确坐标区域和特殊背景色 */
.game-theme .bg-blue-50 {
    background: linear-gradient(135deg, var(--game-bg-hover), var(--game-bg-secondary)) !important;
    color: var(--game-text-accent) !important;
    border: 1px solid var(--game-border) !important;
}

.game-theme .text-blue-700 {
    color: var(--game-text-accent) !important;
}

.game-theme .hover\\:bg-blue-50:hover {
    background: linear-gradient(135deg, var(--game-accent), var(--game-accent-hover)) !important;
    color: #000000 !important;
}

.game-theme .hover\\:bg-gray-50:hover {
    background-color: var(--game-bg-hover) !important;
}

.game-theme .bg-gray-50 {
    background: linear-gradient(135deg, var(--game-bg-hover), var(--game-bg-secondary)) !important;
    color: var(--game-text-primary) !important;
}

.game-theme .bg-red-50 {
    background: linear-gradient(135deg, #7f1d1d, #991b1b) !important;
    color: var(--game-danger) !important;
    border: 1px solid var(--game-border) !important;
}

.game-theme .border-red-200 {
    border-color: var(--game-danger) !important;
}

/* 游戏主题 - 搜索建议 */
.game-theme .suggestion-item {
    background: linear-gradient(135deg, var(--game-bg-panel), var(--game-bg-secondary)) !important;
    color: var(--game-text-primary) !important;
    border: 1px solid var(--game-border) !important;
}

.game-theme .suggestion-item:hover {
    background: linear-gradient(135deg, var(--game-accent), var(--game-accent-hover)) !important;
    color: #000000 !important;
    border-color: var(--game-border-active) !important;
    box-shadow: var(--game-glow) !important;
}

/* 游戏主题 - AI助手 */
.game-theme .ai-bot-button {
    background: linear-gradient(45deg, var(--game-accent), var(--game-accent-hover)) !important;
    box-shadow: var(--game-glow) !important;
}

.game-theme .ai-panel {
    background: linear-gradient(145deg, var(--game-bg-panel), var(--game-bg-secondary)) !important;
    border: 1px solid var(--game-border) !important;
}

/* 游戏主题 - 搜索框 */
.game-theme #search-input {
    background: var(--game-bg-secondary);
    border: 2px solid var(--game-border);
    color: var(--game-text-primary);
    border-radius: 8px;
}

.game-theme #search-input:focus {
    border-color: var(--game-border-active);
    box-shadow: var(--game-glow);
}

/* 游戏主题 - 滚动条 */
.game-theme ::-webkit-scrollbar {
    width: 8px;
}

.game-theme ::-webkit-scrollbar-track {
    background: var(--game-bg-secondary);
}

.game-theme ::-webkit-scrollbar-thumb {
    background: var(--game-accent);
    border-radius: 4px;
}

.game-theme ::-webkit-scrollbar-thumb:hover {
    background: var(--game-accent-hover);
}

/* 游戏主题 - 特殊效果 */
.game-theme .glow-effect {
    animation: gameGlow 2s ease-in-out infinite alternate;
}

@keyframes gameGlow {
    from {
        box-shadow: 0 0 5px rgba(139, 92, 246, 0.3);
    }
    to {
        box-shadow: 0 0 20px rgba(139, 92, 246, 0.6);
    }
}

/* 游戏主题 - 主题切换器 */
.game-theme #theme-toggle {
    background: linear-gradient(135deg, var(--game-bg-panel), var(--game-bg-hover)) !important;
    border: 1px solid var(--game-border) !important;
    color: var(--game-text-primary) !important;
}

.game-theme #theme-toggle:hover {
    background: linear-gradient(135deg, var(--game-accent), var(--game-accent-hover)) !important;
    border-color: var(--game-border-active) !important;
    box-shadow: var(--game-glow) !important;
}

.game-theme #theme-text {
    color: var(--game-text-primary) !important;
}

.game-theme #theme-dropdown {
    background: linear-gradient(145deg, var(--game-bg-panel), var(--game-bg-secondary)) !important;
    border: 1px solid var(--game-border) !important;
    box-shadow: var(--game-shadow) !important;
}

.game-theme .theme-option {
    color: var(--game-text-primary) !important;
}

.game-theme .theme-option:hover {
    background: var(--game-bg-hover) !important;
    color: var(--game-text-accent) !important;
}

/* 游戏主题 - 响应式调整 */
@media (max-width: 768px) {
    .game-theme #filter-panel,
    .game-theme #treasure-panel {
        background: rgba(31, 31, 31, 0.95);
        backdrop-filter: blur(10px);
    }
}

/* ========================================
   🎨 主题切换器通用样式
   ======================================== */

/* 主题下拉菜单动画 */
#theme-dropdown {
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.2s ease;
}

#theme-dropdown:not(.hidden) {
    opacity: 1;
    transform: translateY(0);
}

/* 主题选项悬停效果 */
.theme-option {
    transition: all 0.2s ease;
}

.theme-option i {
    transition: transform 0.2s ease;
}

.theme-option:hover i {
    transform: scale(1.1);
}