/* ============================================================
   DICE.CSS - Zar Sistemleri ve Geçmiş Paneli
   ============================================================ */

/* --- Tıklanabilir Alanlar --- */
.clickable-stat {
    cursor: pointer;
    position: relative;
    transition: background 0.2s, color 0.2s;
}
.clickable-stat:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #b52b2b;
    border-radius: 4px;
}
.clickable-stat:active {
    transform: scale(0.98);
}

/* --- ZAR SONUÇ KARTI (Overlay) --- */
.dice-overlay {
    position: fixed;
    bottom: 90px; /* History butonu üstü */
    right: 20px;
    z-index: 10000;
    pointer-events: none;
}

.dice-result-card {
    background: rgba(20, 20, 20, 0.95);
    border: 2px solid #444;
    border-radius: 12px;
    padding: 20px;
    width: 230px;
    height: auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
    display: flex; flex-direction: column; align-items: center;
    pointer-events: auto; position: relative; overflow: hidden;
    transform: translateY(100px); opacity: 0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* DÜZELTME BURADA: Varsayılan olarak tıklanamaz yapıyoruz */
    pointer-events: none; 
    position: relative;
    min-width: 230px;
    min-height: 180px;
    max-height: max-content;
}

.dice-result-card.active { transform: translateY(0); opacity: 1; /* Sadece aktif olduğunda tıklanabilir olsun */ pointer-events: auto; }

.dice-close { position: absolute; top: 5px; right: 10px; cursor: pointer; color: #666; font-size: 1em; }
.dice-close:hover { color: #fff; }

.dice-source {
    color: #aaa; text-transform: uppercase; font-size: 0.85em;
    letter-spacing: 1px; margin-bottom: 10px; border-bottom: 1px solid #333;
    padding-bottom: 5px; width: 100%; text-align: center;
}

.dice-breakdown {
    display: flex; align-items: center; gap: 10px;
    font-family: 'Courier New', monospace; font-size: 1.1em;
    color: #ccc; margin-bottom: 5px;
}

.d20-icon { font-weight: bold; color: #fff; }
.nat-20 { color: #4caf50; text-shadow: 0 0 10px rgba(76, 175, 80, 0.6); }
.nat-1  { color: #d32f2f; text-shadow: 0 0 10px rgba(211, 47, 47, 0.6); }

.dice-total {
    font-size: 3.3em; font-weight: 800; color: #fff;
    line-height: 1; margin: 5px 0;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}

.dice-total.crit-success { color: #4caf50; text-shadow: 0 0 30px rgba(76, 175, 80, 0.5); animation: pulse-green 1s infinite; }
.dice-total.crit-fail { color: #d32f2f; text-shadow: 0 0 30px rgba(211, 47, 47, 0.5); animation: shake 0.5s; }

@keyframes pulse-green { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }
@keyframes shake { 0% { transform: translateX(0); } 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-5px); } 100% { transform: translateX(0); } }

/* --- GEÇMİŞ PANELİ (History Drawer) --- */
.history-toggle-btn {
    position: fixed; bottom: 30px; right: 30px;
    width: 50px; height: 50px;
    background: #222; border: 2px solid #444; border-radius: 50%;
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 1.5em; cursor: pointer; z-index: 10001;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5); transition: all 0.2s;
}
.history-toggle-btn:hover { background: #333; border-color: #b52b2b; transform: scale(1.1); }

.history-panel {
    position: fixed; top: 0;
    width: 220px; right: -240px; height: 100vh;
    background: #1a1a1a; border-left: 2px solid #b52b2b;
    z-index: 10002; box-shadow: -5px 0 20px rgba(0,0,0,0.8);
    display: flex; flex-direction: column;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.history-panel.open { right: 0; }

.history-header {
    padding: 12px; background: #222; border-bottom: 1px solid #333;
    display: flex; justify-content: space-between; align-items: center;
    font-weight: bold; color: #eee; font-size: 0.9em; letter-spacing: 1px;
}
.close-history { cursor: pointer; color: #666; font-size: 1.2em; }
.close-history:hover { color: #fff; }

.history-list { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.history-list::-webkit-scrollbar { width: 4px; }
.history-list::-webkit-scrollbar-track { background: #111; }
.history-list::-webkit-scrollbar-thumb { background: #444; border-radius: 2px; }

.history-item {
    background: #252525; border: 1px solid #333; border-radius: 4px;
    padding: 8px; animation: slideInRight 0.3s ease;
}
@keyframes slideInRight { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

.h-row-top { display: flex; justify-content: space-between; font-size: 0.75em; margin-bottom: 4px; border-bottom: 1px dashed #333; padding-bottom: 2px; }
.h-source { color: #aaa; font-weight: bold; max-width: 130px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h-time { color: #555; font-family: monospace; }
.h-row-result { display: flex; justify-content: space-between; align-items: center; }
.h-calc { color: #888; font-size: 0.85em; }
.h-total { color: #fff; font-weight: bold; font-size: 1.1em; }

.history-footer { padding: 10px; background: #151515; border-top: 1px solid #333; display: flex; gap: 8px; }
.btn-clear-history, .btn-close-bottom {
    flex: 1; background: #252525; border: 1px solid #444; color: #888;
    padding: 6px 0; border-radius: 4px; cursor: pointer;
    font-size: 0.75em; transition: all 0.2s;
    display: flex; justify-content: center; align-items: center; gap: 4px;
}
.btn-clear-history:hover { border-color: #d32f2f; color: #d32f2f; background: rgba(211, 47, 47, 0.1); }
.btn-close-bottom:hover { border-color: #eee; color: #fff; background: rgba(255, 255, 255, 0.1); }

@media (max-width: 600px) {
    .history-panel { width: 260px; right: -280px; }
    .history-panel.open { right: 0; }
    .h-source { font-size: 0.9em; } 
    .btn-clear-history, .btn-close-bottom { padding: 10px 0; font-size: 0.85em; }
}