/* Genel stiller ve Tailwind CSS'in üzerine yazmalar */
:root {
    /* Varsayılan Light Tema Renkleri */
    --primary-bg: #f3f4f6; /* body background */
    --secondary-bg: #ffffff; /* app-container background */
    --panel-bg-green: #f0fdf4; /* user-section */
    --panel-bg-blue: #eff6ff; /* activity-section */
    --panel-bg-purple: #f5f3ff; /* store-section */
    --panel-bg-yellow: #fffbeb; /* competitions-section */
    --panel-bg-indigo: #eef2ff; /* theme-settings */
    --panel-bg-teal: #e0f2f7; /* level-features */
    --text-color-primary: #1f2937; /* general text */
    --text-color-green: #065f46; /* green headings */
    --text-color-blue: #1e40af; /* blue headings */
    --text-color-purple: #6b21a8; /* purple headings */
    --text-color-yellow: #b45309; /* yellow headings */
    --text-color-indigo: #4338ca; /* indigo headings */
    --text-color-teal: #0d9488; /* teal headings */
    --border-color: #e5e7eb; /* general borders */
    --button-bg-green: #10b981;
    --button-hover-green: #059669;
    --button-bg-red: #ef4444;
    --button-hover-red: #dc2626;
    --button-bg-red-light: #f87171; /* Objeyi Sil butonu için */
    --button-hover-red-light: #ef4444; /* Objeyi Sil butonu için */
    --button-bg-blue: #3b82f6;
    --button-hover-blue: #2563eb;
    --button-bg-indigo: #6366f1;
    --button-hover-indigo: #4f46e5;
    --button-bg-gray: #d1d5db;
    --button-hover-gray: #9ca3af;
    --button-bg-teal: #14b8a6;
    --button-hover-teal: #0d9488;
    --coin-color: #facc15;
    --level-color: #3b82f6;
    --total-hours-color: #9333ea;
    --canvas-bg-color: #a7f3d0; /* Sabit çim zemini rengi (light green-200) */
    --grid-line-color: #666; /* Izgara çizgisi rengi */
    --grid-line-width: 1px; /* Izgara çizgisi kalınlığı */
}

/* Dark Tema */
body.theme-dark {
    --primary-bg: #1f2937;
    --secondary-bg: #374151;
    --panel-bg-green: #1e3a8a;
    --panel-bg-blue: #1e3a8a;
    --panel-bg-purple: #1e3a8a;
    --panel-bg-yellow: #1e3a8a;
    --panel-bg-indigo: #1e3a8a;
    --panel-bg-teal: #1e3a8a;
    --text-color-primary: #d1d5db;
    --text-color-green: #a7f3d0;
    --text-color-blue: #93c5fd;
    --text-color-purple: #c4b5fd;
    --text-color-yellow: #fcd34d;
    --text-color-indigo: #a5b4fc;
    --text-color-teal: #5eead4;
    --border-color: #4b5563;
    --button-bg-green: #059669;
    --button-hover-green: #047857;
    --button-bg-red: #dc2626;
    --button-hover-red: #b91c1c;
    --button-bg-red-light: #b91c1c;
    --button-hover-red-light: #991b1b;
    --button-bg-blue: #2563eb;
    --button-hover-blue: #1d4ed8;
    --button-bg-indigo: #4f46e5;
    --button-hover-indigo: #3730a3;
    --button-bg-gray: #4b5563;
    --button-hover-gray: #6b7280;
    --button-bg-teal: #0f766e;
    --button-hover-teal: #0d5e56;
    --coin-color: #facc15;
    --level-color: #93c5fd;
    --total-hours-color: #c4b5fd;
}

/* Natural Tema */
body.theme-natural {
    --primary-bg: #d4e7c5;
    --secondary-bg: #e9f2e4;
    --panel-bg-green: #f0fdf4;
    --panel-bg-blue: #e0f2f7;
    --panel-bg-purple: #e6e0f7;
    --panel-bg-yellow: #f7f2e0;
    --panel-bg-indigo: #e0e7f7;
    --panel-bg-teal: #d0f0e0;
    --text-color-primary: #4a5759;
    --text-color-green: #2b5f40;
    --text-color-blue: #3d5a80;
    --text-color-purple: #6f4c9b;
    --text-color-yellow: #a8763e;
    --text-color-indigo: #5f4b8b;
    --text-color-teal: #3d7a6e;
    --border-color: #c5d8b8;
    --button-bg-green: #6a994e;
    --button-hover-green: #5a8040;
    --button-bg-red: #c14953;
    --button-hover-red: #a83a44;
    --button-bg-red-light: #a05252;
    --button-hover-red-light: #8b4545;
    --button-bg-blue: #70a288;
    --button-hover-blue: #5d8b74;
    --button-bg-indigo: #8b79a1;
    --button-hover-indigo: #7a6b8c;
    --button-bg-gray: #a8a8a8;
    --button-hover-gray: #929292;
    --button-bg-teal: #5cb85c;
    --button-hover-teal: #4ca64c;
    --coin-color: #e6b800;
    --level-color: #3d5a80;
    --total-hours-color: #6f4c9b;
}

/* Neon Tema */
body.theme-neon {
    --primary-bg: #0d0d0d;
    --secondary-bg: #1a1a1a;
    --panel-bg-green: #2c003e;
    --panel-bg-blue: #002b4d;
    --panel-bg-purple: #3e002c;
    --panel-bg-yellow: #3e2c00;
    --panel-bg-indigo: #2c003e;
    --panel-bg-teal: #003e2c;
    --text-color-primary: #e0e0e0;
    --text-color-green: #00ff00;
    --text-color-blue: #00ffff;
    --text-color-purple: #ff00ff;
    --text-color-yellow: #ffff00;
    --text-color-indigo: #00ffcc;
    --text-color-teal: #00ffaa;
    --border-color: #333333;
    --button-bg-green: #00ff00;
    --button-hover-green: #00cc00;
    --button-bg-red: #ff00ff;
    --button-hover-red: #cc00cc;
    --button-bg-red-light: #ff00ff;
    --button-hover-red-light: #cc00cc;
    --button-bg-blue: #00ffff;
    --button-hover-blue: #00cccc;
    --button-bg-indigo: #ff00ff;
    --button-hover-indigo: #cc00cc;
    --button-bg-gray: #333333;
    --button-hover-gray: #555555;
    --button-bg-teal: #00ffaa;
    --button-hover-teal: #00cc88;
    --coin-color: #ffff00;
    --level-color: #00ffff;
    --total-hours-color: #ff00ff;
}

/* Medieval Tema */
body.theme-medieval {
    --primary-bg: #3f2e22;
    --secondary-bg: #5c4033;
    --panel-bg-green: #7d5a4a;
    --panel-bg-blue: #7d5a4a;
    --panel-bg-purple: #7d5a4a;
    --panel-bg-yellow: #7d5a4a;
    --panel-bg-indigo: #7d5a4a;
    --panel-bg-teal: #7d5a4a;
    --text-color-primary: #e0d0b0;
    --text-color-green: #a0c080;
    --text-color-blue: #80a0c0;
    --text-color-purple: #c080a0;
    --text-color-yellow: #d0b060;
    --text-color-indigo: #a080c0;
    --text-color-teal: #80c0a0;
    --border-color: #8b6e5b;
    --button-bg-green: #6a8c4c;
    --button-hover-green: #5a7b3c;
    --button-bg-red: #a04040;
    --button-hover-red: #803030;
    --button-bg-red-light: #803030;
    --button-hover-red-light: #602020;
    --button-bg-blue: #4c6a8c;
    --button-hover-blue: #3c5a7b;
    --button-bg-indigo: #8c4c6a;
    --button-hover-indigo: #7b3c5a;
    --button-bg-gray: #5c4033;
    --button-hover-gray: #7d5a4a;
    --button-bg-teal: #6a8c4c;
    --button-hover-teal: #5a7b3c;
    --coin-color: #d4af37;
    --level-color: #80a0c0;
    --total-hours-color: #c080a0;
}


/* Genel Element Stilleri (CSS Değişkenlerini Kullanarak) */
body {
    background-color: var(--primary-bg);
    transition: background-color 0.5s ease; /* Tema geçişi için */
}

#app-container {
    background-color: var(--secondary-bg);
    border-color: var(--border-color);
    transition: background-color 0.5s ease, border-color 0.5s ease;
}

/* Sol paneldeki bölümler için genel stiller */
#user-section, #activity-section, #store-section, #competitions-section, #theme-settings, #level-features {
    background-color: var(--panel-bg-green); /* Varsayılan olarak yeşil panel rengi */
    border-color: var(--border-color);
    transition: background-color 0.5s ease, border-color 0.5s ease;
}
/* Özel panel renkleri için tema bazlı geçersiz kılmalar */
body.theme-light #activity-section { background-color: var(--panel-bg-blue); }
body.theme-light #store-section { background-color: var(--panel-bg-purple); }
body.theme-light #competitions-section { background-color: var(--panel-bg-yellow); }
body.theme-light #theme-settings { background-color: var(--panel-bg-indigo); }
body.theme-light #level-features { background-color: var(--panel-bg-teal); }


h1, h2, h3, p, label, span {
    color: var(--text-color-primary);
    transition: color 0.5s ease;
}

h1.text-green-700 { color: var(--text-color-green); }
h2.text-green-800 { color: var(--text-color-green); }
h2.text-blue-800 { color: var(--text-color-blue); }
h2.text-purple-800 { color: var(--text-color-purple); }
h2.text-yellow-800 { color: var(--text-color-yellow); }
h2.text-indigo-800 { color: var(--text-color-indigo); }
h2.text-teal-800 { color: var(--text-color-teal); }


/* Input ve textarea stilleri */
input[type="text"], textarea {
    background-color: var(--secondary-bg);
    color: var(--text-color-primary);
    border-color: var(--border-color);
    transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease;
}
input[type="text"]:focus, textarea:focus {
    border-color: var(--button-bg-blue); /* Örnek odak rengi */
    box-shadow: 0 0 0 2px rgba(var(--button-bg-blue-rgb, 59, 130, 246), 0.5); /* Örnek odak gölgesi */
}


/* Buton stilleri */
.bg-green-600 { background-color: var(--button-bg-green); }
.hover\:bg-green-700:hover { background-color: var(--button-hover-green); }
.bg-red-600 { background-color: var(--button-bg-red); }
.hover\:bg-red-700:hover { background-color: var(--button-hover-red); }
.bg-red-400 { background-color: var(--button-bg-red-light); } /* Objeyi Sil butonu */
.hover\:bg-red-500:hover { background-color: var(--button-hover-red-light); } /* Objeyi Sil butonu */
.bg-blue-600 { background-color: var(--button-bg-blue); }
.hover\:bg-blue-700:hover { background-color: var(--button-hover-blue); }
.bg-indigo-500 { background-color: var(--button-bg-indigo); }
.hover\:bg-indigo-600:hover { background-color: var(--button-hover-indigo); }
.bg-gray-300 { background-color: var(--button-bg-gray); }
.hover\:bg-gray-400:hover { background-color: var(--button-hover-gray); }
.bg-teal-600 { background-color: var(--button-bg-teal); }
.hover\:bg-teal-700:hover { background-color: var(--button-hover-teal); }


/* Coin, Level, Total Hours renkleri */
.text-yellow-600 { color: var(--coin-color); }
.text-yellow-500 { color: var(--coin-color); } /* Font Awesome ikonu için */
.text-blue-600 { color: var(--level-color); }
.text-purple-600 { color: var(--total-hours-color); }
.text-green-600 { color: var(--button-bg-green); } /* Refund rate için */


/* Canvas konteynerı */
#canvas-container {
    /* Tailwind'deki w-full h-96 yerine sabit yükseklik ve overflow */
    /* border-2 border-green-600 rounded-lg shadow-md */
    background-color: var(--canvas-bg-color); /* Canvas arka plan rengi */
    transition: background-color 0.5s ease;
}

/* Canvas boyutlandırması */
#forestCanvas {
    /* Konteyner içinde tam genişlik ve yükseklik */
    display: block;
    /* Kaydırma ve yakınlaştırma JS ile yönetileceği için burada transform kullanmıyoruz */
    /* transform-origin: top left; */ /* Yakınlaştırma için başlangıç noktası */
}

/* Mesaj kutusu ve modal stilleri */
#message-box, #share-modal {
    background-color: rgba(0, 0, 0, 0.5); /* Yarı saydam arka plan */
    display: flex; /* Flexbox ile içeriği ortala */
    align-items: center;
    justify-content: center;
    z-index: 1000; /* Diğer elementlerin üzerinde olması için */
}

#message-box > div, #share-modal > div {
    /* Tailwind sınıfları (bg-white p-6 rounded-lg shadow-xl) zaten çoğu stili sağlıyor */
    background-color: var(--secondary-bg); /* Tema rengini kullan */
    color: var(--text-color-primary);
    max-width: 400px; /* Mesaj kutusu ve modal için maksimum genişlik */
    width: 90%; /* Küçük ekranlarda uyumluluk */
    transition: background-color 0.5s ease, color 0.5s ease;
}

/* Mağaza varlık listesi öğeleri için temel stil */
.asset-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.75rem; /* p-3 */
    border-radius: 0.5rem; /* rounded-md */
    background-color: var(--panel-bg-green); /* Tema rengini kullan */
    border: 1px solid var(--border-color); /* Tema rengini kullan */
    cursor: pointer;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.5s ease, border-color 0.5s ease;
}

.asset-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.asset-item img {
    width: 64px; /* Örnek boyut, piksel sanat görsellerine göre ayarlanabilir */
    height: 64px;
    object-fit: contain;
    margin-bottom: 0.5rem;
}

.asset-item .asset-name {
    font-weight: 600; /* font-semibold */
    color: var(--text-color-green); /* Tema rengini kullan */
    text-align: center;
}

.asset-item .asset-price {
    font-weight: 700; /* font-bold */
    color: var(--coin-color); /* Tema rengini kullan */
    display: flex;
    align-items: center;
    margin-top: 0.25rem;
}

.asset-item .asset-price i {
    margin-right: 0.25rem;
    color: var(--coin-color); /* Tema rengini kullan */
}

/* Mağaza öğeleri için kilitli durum (seviye yetersiz) */
.asset-item.locked {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(100%);
}

.asset-item.locked .asset-price {
    color: var(--text-color-primary); /* Kilitliyken fiyat rengini değiştir */
}

/* Aktivite mesajı için stil */
#activity-message.success {
    color: var(--button-bg-green); /* Tema rengini kullan */
}

#activity-message.error {
    color: var(--button-bg-red); /* Tema rengini kullan */
}

/* .hidden sınıfının her zaman display: none; olmasını sağla */
.hidden {
    display: none !important;
}