@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* Evrensel sıfırlama ve temel ayarlar */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body için tam şeffaflık ve görünürlük */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    overflow: hidden;
    background: transparent !important; /* Arka planı tamamen şeffaf yapar ve önemlidir */
    user-select: none; /* Metin seçmeyi engeller */
    -webkit-user-select: none;
    pointer-events: none; /* Vücudun fare olaylarını yakalamasını engeller */
    width: 100vw; /* Tam genişlik */
    height: 100vh; /* Tam yükseklik */
    display: block !important; /* Body'nin her zaman görünür olmasını sağlar */
    visibility: visible !important; /* Body'nin her zaman görünür olmasını sağlar */
    opacity: 1 !important; /* Tamamen opak olmasını sağlar */
}

/* Oyuncu bilgi kutularını barındıran ana div */
#playerContainer {
    position: fixed; /* Ekranın belirli bir konumunda sabit kalır */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1000; /* Diğer öğelerin üzerinde görünmesini sağlar */
    pointer-events: none; /* Konteynerin fare olaylarını geçirmesini sağlar */
    background: transparent !important; /* Tamamen şeffaf yapar ve önemlidir */
    display: block !important; /* Konteynerin her zaman görünür olmasını sağlar */
    visibility: visible !important; /* Konteynerin her zaman görünür olmasını sağlar */
    opacity: 1 !important; /* Tamamen opak olmasını sağlar */

    /* NUI ayarları için CSS değişkenleri - Varsayılan değerler */
    --main-font-size: 11px;
    --main-font-weight: 400;
    --main-text-color: rgba(255, 255, 255, 0.9);
    --main-border-color: rgba(255, 255, 255, 0.2); /* Daha belirgin kenarlık */

    --self-text-color: rgba(255, 193, 7, 0.95);
    --self-border-color: rgba(255, 193, 7, 0.6); /* Kendi için daha belirgin kenarlık */

    /* Farklı bilgiler için özel renk değişkenleri */
    --name-color: #87CEEB; /* Gökyüzü Mavisi */
    --id-color: #90EE90; /* Açık Yeşil */
    --job-color: #FFD700; /* Altın Sarı */
    --grade-color: #FFA07A; /* Açık Somon */
    --distance-color: #D3D3D3; /* Açık Gri */

    --box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); /* Hafif gölge */
    --padding: 6px 10px; /* İç boşluk */
    --border-radius: 6px; /* Köşe yuvarlaklığı */
    --border-width: 1px; /* Kenarlık kalınlığı */
}

/* Her bir oyuncunun bilgi kutusu */
.player-info {
    position: absolute;
    background: transparent; /* Arka planı tamamen şeffaf */
    border-radius: var(--border-radius);
    padding: var(--padding);
    border: var(--border-width) solid var(--main-border-color); /* Kenarlık */
    box-shadow: var(--box-shadow);
    transform: translate(-50%, -50%); /* Kutuyu tam ortalar */
    white-space: nowrap; /* Metnin tek satırda kalmasını sağlar */
    transition: transform 0.1s ease-out, opacity 0.1s ease-out; /* Daha hızlı ve akıcı geçişler */
    min-width: 90px;
    color: var(--main-text-color);
    font-size: var(--main-font-size);
    font-weight: var(--main-font-weight);
    line-height: 1.4;
    will-change: transform, opacity; /* Animasyon performansı için */

    display: flex; /* İçerik için esnek kutu düzeni */
    flex-direction: row; /* Yatay düzen */
    align-items: center; /* Dikeyde ortala */
    gap: 6px; /* Öğeler arasında daha küçük boşluk */
    flex-wrap: wrap; /* Gerekirse alt satıra geç */
    justify-content: center; /* Yatayda ortala */

    pointer-events: none;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Kendi oyuncumuzun bilgi kutusu için özel stil */
.player-info.self {
    border: var(--border-width) solid var(--self-border-color);
    color: var(--self-text-color);
    box-shadow: 0 2px 10px rgba(255, 193, 7, 0.3);
}

/* Bilgi satırları için düzen */
.player-info-line {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

.player-info-line.main-info {
    font-weight: 600;
    margin-bottom: 0px;
}

.player-info-line.sub-info {
    font-size: calc(var(--main-font-size) - 1px);
    opacity: 0.8;
}

/* Farklı bilgi türleri için özel stiller */
.player-id {
    font-size: calc(var(--main-font-size) - 1px);
    font-weight: 500;
    letter-spacing: 0.5px;
    opacity: 0.85;
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 5px; /* Daha küçük padding */
    border-radius: 3px; /* Daha küçük yuvarlaklık */
    color: var(--id-color);
}

.player-name {
    font-size: calc(var(--main-font-size) + 1px);
    font-weight: 600;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.6); /* Daha belirgin gölge */
    color: var(--name-color);
}

.player-job {
    font-size: calc(var(--main-font-size) - 1px);
    font-weight: 400;
    opacity: 0.9;
    color: var(--job-color);
}

.player-grade {
    font-size: calc(var(--main-font-size) - 1px);
    font-weight: 300;
    opacity: 0.75;
    color: var(--grade-color);
}

.player-distance {
    font-size: calc(var(--main-font-size) - 1px);
    font-weight: 300;
    opacity: 0.7;
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 5px;
    border-radius: 3px;
    color: var(--distance-color);
}

/* Bilgi öğeleri arasındaki ayırıcı */
.separator {
    color: rgba(255, 255, 255, 0.5); /* Biraz daha belirgin ayırıcı */
    font-weight: 300;
    margin: 0 2px;
}

/* Mesafeye göre ölçeklendirme sınıfları */
.player-info.scale-small {
    transform: translate(-50%, -50%) scale(0.7); /* Biraz daha küçük ölçek */
    opacity: 0.7; /* Daha soluk */
}

.player-info.scale-medium {
    transform: translate(-50%, -50%) scale(0.85); /* Biraz daha küçük ölçek */
    opacity: 0.85;
}

.player-info.scale-large {
    transform: translate(-50%, -50%) scale(1.0);
    opacity: 1.0;
}

/* Mesafeye göre soluklaşma efekti */
.player-info.fade-out {
    opacity: 0.4; /* Daha fazla soluklaşma */
    transform: translate(-50%, -50%) scale(0.8); /* Biraz küçülme */
}

/* Yeni eklenen bilgi kutuları için giriş animasyonu */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.6);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.0);
    }
}

.player-info.new {
    animation: fadeIn 0.2s ease-out; /* Daha hızlı animasyon */
}

/* Duyarlı tasarım için medya sorguları */
@media (max-width: 1920px) {
    .player-info {
        --main-font-size: 10px;
        --padding: 5px 8px;
    }
}

@media (max-width: 1366px) {
    .player-info {
        --main-font-size: 9px;
        --padding: 4px 7px;
    }
}

/* Donanım hızlandırma için ek özellikler */
.player-info {
    transform: translate(-50%, -50%) translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* İçerik öğeleri için akıcı geçişler */
.player-info * {
    transition: none; /* İçerik geçişlerini kaldır, sadece kutu hareket etsin */
}

/* Menü açıkken NUI'nin gizlenmesi */
#playerContainer.hidden-by-menu {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}