/* ===================================
   THEMES
   Темы приложения, модалы выбора, backgrounds
   =================================== */

/* ===================================
   BODY THEME STYLES
   =================================== */

/* Default Theme (current starry night theme) */
body.theme-default,
body:not([class*="theme-"]) {
    /* Default theme uses existing styles */
}

/* Dark Theme */
body.theme-dark {
    background: linear-gradient(45deg, #1a1a1a, #2d2d2d);
}

body.theme-dark .overlay {
    background: rgba(0, 0, 0, 0.8);
}

body.theme-dark .compact-panel,
body.theme-dark .inventory-compact-panel,
body.theme-dark .shop-compact-panel,
body.theme-dark .fishing-compact-panel,
body.theme-dark .settings-compact-panel,
body.theme-dark .exchange-compact-panel {
    background: rgba(20, 20, 20, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.theme-dark .item-card,
body.theme-dark .gear-item {
    background: rgba(40, 40, 40, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

body.theme-dark .currency-bar {
    background: rgba(20, 20, 20, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Light Theme */
body.theme-light {
    background: linear-gradient(45deg, #f5f7fa, #c3cfe2);
}

body.theme-light .overlay {
    background: rgba(255, 255, 255, 0.8);
}

body.theme-light .compact-panel,
body.theme-light .inventory-compact-panel,
body.theme-light .shop-compact-panel,
body.theme-light .fishing-compact-panel,
body.theme-light .settings-compact-panel,
body.theme-light .exchange-compact-panel {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #333;
}

body.theme-light .item-card,
body.theme-light .gear-item {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #333;
}

body.theme-light .currency-bar {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #333;
}

body.theme-light .pet-stats-dropdown .stat-item {
    background: rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #333;
}

body.theme-light .panel-header h3,
body.theme-light .panel-header h2 {
    color: #333;
}

/* ===================================
   THEME SELECTION MODAL
   =================================== */

.theme-selection-modal {
    background: transparent !important;
    backdrop-filter: none;
    z-index: 100002;
}

/* Стандартные размеры для всех модалов тем/верх/низ */
.theme-modal {
    position: fixed !important;
    left: 50% !important;
    top: calc(var(--safe-top, 20px) + 120px) !important;
    bottom: 84px !important;
    transform: translateX(-50%) !important;
    width: 90% !important;
    max-width: 600px !important;
    height: auto !important;
    max-height: none !important;
    background: rgba(20, 20, 30, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(20px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    overflow-y: auto;
    overflow-x: hidden;

    /* Видимый стилизованный скроллбар */
    scrollbar-width: thin; /* Firefox - тонкий скроллбар */
    scrollbar-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.1); /* Firefox - цвет */
}

/* Стилизация скроллбара для WebKit браузеров */
.theme-modal::-webkit-scrollbar {
    width: 8px;
}

.theme-modal::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.theme-modal::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    border: 2px solid rgba(255, 255, 255, 0.05);
}

.theme-modal::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* Модальный header с центрированным заголовком */
.theme-modal .modal-header {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px 50px 16px 16px; /* Отступ справа для кнопки */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 0;
}

/* Центрированный заголовок */
.theme-modal .modal-title {
    text-align: center;
    flex: 1;
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: white;
}

/* Кнопка закрытия в правом верхнем углу */
.theme-modal .close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    font-size: 24px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
}

.theme-modal .close-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.theme-modal .close-btn:active {
    transform: scale(0.95);
}

/* Модальное тело */
.theme-modal .modal-body {
    padding: 0;
}

.theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    padding: 20px;
}

.theme-card {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.theme-card:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.theme-card.selected {
    border-color: #4CAF50 !important;
    background: rgba(76, 175, 80, 0.1) !important;
    box-shadow: 0 0 20px rgba(76, 175, 80, 0.3);
}

.theme-preview {
    width: 100%;
    height: 120px;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    margin-bottom: 12px;
    background: linear-gradient(135deg, #667eea, #764ba2);
}

.theme-preview.default-theme {
    background: linear-gradient(135deg, #667eea, #764ba2);
}

.theme-preview.dark-theme {
    background: linear-gradient(135deg, #2c3e50, #34495e);
}

.theme-preview.light-theme {
    background: linear-gradient(135deg, #74b9ff, #a29bfe);
}

.preview-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: inherit;
}

.preview-pet {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 28px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.preview-ui {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.preview-currency {
    background: rgba(0, 0, 0, 0.3);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    backdrop-filter: blur(5px);
}

.preview-button {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    backdrop-filter: blur(5px);
}

.theme-info {
    text-align: center;
}

.theme-name {
    font-size: 16px;
    font-weight: 600;
    color: white;
    margin-bottom: 4px;
}

.theme-description {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

/* ===================================
   PET BACKGROUND SELECTION
   =================================== */

.pet-bg-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.pet-bg-preview {
    width: 100%;
    height: 100px;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preview-pet-area {
    position: relative;
    width: 80%;
    height: 80%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.preview-pet-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
}

.preview-pet-char {
    font-size: 32px;
    z-index: 1;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* ===================================
   GROUND BACKGROUND SELECTION
   =================================== */

.ground-bg-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.ground-bg-preview {
    width: 100%;
    height: 100px;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preview-ground-area {
    position: relative;
    width: 80%;
    height: 80%;
}

.preview-ground-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 12px;
}

.preview-ground-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 32px;
    z-index: 1;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* ===================================
   GAME AREA BACKGROUNDS
   =================================== */

.game-area.bg-basic {
    background: linear-gradient(45deg, #4CAF50, #81C784);
}

.game-area.bg-rainbow {
    background: linear-gradient(45deg, #ff9a9e 0%, #fecfef 20%, #fecfef 40%, #feca57 60%, #48dbfb 80%, #0abde3 100%);
}

.game-area.bg-galaxy {
    background: linear-gradient(45deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
}

.game-area.bg-golden {
    background: linear-gradient(45deg, #f7971e 0%, #ffd200 50%, #ffb347 100%);
}

.game-area.bg-forest_day {
    background: linear-gradient(45deg, #2E7D32, #66BB6A);
}

.game-area.bg-beach_sunset {
    background: linear-gradient(45deg, #ff6b6b, #ffa726, #ffcc02);
}

.game-area.bg-midnight_ocean {
    background: linear-gradient(45deg, #1a237e, #3949ab, #5e35b1);
}

.game-area.bg-spring_garden {
    background: linear-gradient(45deg, #8bc34a, #4caf50, #009688);
}

.game-area.bg-winter_snow {
    background: linear-gradient(45deg, #e3f2fd, #bbdefb, #90caf9);
}

.game-area.bg-default_grass {
    background: linear-gradient(45deg, #4CAF50, #81C784);
}

.game-area.bg-library_cozy {
    background: linear-gradient(45deg, #5D4037, #8D6E63);
}

.game-area.bg-city_night {
    background: linear-gradient(45deg, #263238, #37474F);
}

.game-area.bg-mountain_peak {
    background: linear-gradient(45deg, #455A64, #CFD8DC);
}

.game-area.bg-space_nebula {
    background: linear-gradient(45deg, #1A237E, #7B1FA2);
}

/* ===================================
   PET BACKGROUND ELEMENT BACKGROUNDS
   =================================== */

.pet-background.bg-basic {
    background: linear-gradient(180deg, #87CEEB, #E0F6FF);
}

.pet-background.bg-rainbow {
    background: linear-gradient(45deg, #ff9a9e 0%, #fecfef 20%, #fecfef 40%, #feca57 60%, #48dbfb 80%, #0abde3 100%);
}

.pet-background.bg-galaxy {
    background: linear-gradient(45deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
}

.pet-background.bg-golden {
    background: linear-gradient(45deg, #f7971e 0%, #ffd200 50%, #ffb347 100%);
}

.pet-background.bg-forest_day {
    background: linear-gradient(45deg, #2E7D32, #66BB6A);
}

.pet-background.bg-beach_sunset {
    background: linear-gradient(45deg, #ff6b6b, #ffa726, #ffcc02);
}

.pet-background.bg-midnight_ocean {
    background: linear-gradient(45deg, #1a237e, #3949ab, #5e35b1);
}

.pet-background.bg-spring_garden {
    background: linear-gradient(45deg, #8bc34a, #4caf50, #009688);
}

.pet-background.bg-winter_snow {
    background: linear-gradient(45deg, #e3f2fd, #bbdefb, #90caf9);
}

.pet-background.bg-default_grass {
    background: linear-gradient(180deg, #87CEEB, #E0F6FF);
}

.pet-background.bg-library_cozy {
    background: linear-gradient(45deg, #5D4037, #8D6E63);
}

.pet-background.bg-city_night {
    background: linear-gradient(45deg, #263238, #37474F);
}

.pet-background.bg-mountain_peak {
    background: linear-gradient(45deg, #455A64, #CFD8DC);
}

.pet-background.bg-space_nebula {
    background: linear-gradient(45deg, #1A237E, #7B1FA2);
}

/* ===================================
   GROUND BACKGROUNDS
   =================================== */

.ground.ground-default_grass {
    background: linear-gradient(180deg, rgba(76, 175, 80, 0.8) 0%, rgba(46, 125, 50, 0.9) 100%);
}

.ground.ground-desert_sand {
    background: linear-gradient(180deg, rgba(255, 213, 79, 0.8) 0%, rgba(255, 160, 0, 0.9) 100%);
}

.ground.ground-snow_ground {
    background: linear-gradient(180deg, rgba(232, 245, 233, 0.8) 0%, rgba(200, 230, 201, 0.9) 100%);
}

.ground.ground-rocky_terrain {
    background: linear-gradient(180deg, rgba(141, 110, 99, 0.8) 0%, rgba(93, 64, 55, 0.9) 100%);
}

.ground.ground-autumn_leaves {
    background: linear-gradient(180deg, rgba(255, 138, 101, 0.8) 0%, rgba(191, 54, 12, 0.9) 100%);
}

.ground.ground-crystal_floor {
    background: linear-gradient(180deg, rgba(225, 245, 254, 0.8) 0%, rgba(129, 212, 250, 0.9) 100%);
}

/* ===================================
   RESPONSIVE THEME MODALS
   =================================== */

@media (max-width: 768px) {
    .theme-modal {
        width: 95vw !important;
        max-height: 80vh !important;
        margin: 10px;
    }

    .theme-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        padding: 16px;
    }

    .pet-bg-grid, .ground-bg-grid {
        grid-template-columns: 1fr 1fr;
    }

    .theme-card {
        padding: 12px;
    }

    .theme-preview, .pet-bg-preview, .ground-bg-preview {
        height: 100px;
    }

    .preview-pet {
        font-size: 24px;
    }

    .preview-pet-char {
        font-size: 28px;
    }
}

@media (max-width: 480px) {
    .theme-grid, .pet-bg-grid, .ground-bg-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 12px;
    }

    .theme-preview, .pet-bg-preview, .ground-bg-preview {
        height: 80px;
    }

    .preview-pet {
        font-size: 20px;
    }

    .preview-pet-char, .preview-ground-icon {
        font-size: 24px;
    }
}