/* İçerikte otomatik linklenen brawler isimleri + hover bilgi kartı.
   Sadece Brawl Stars etiketli haber/rehberlerde yüklenir.
   Yüzey tema-uyumlu (gündüz beyaz, gece koyu); nadirlik rengi vurgusu (çerçeve + başlık bandı +
   glow + görsel halkası) [data-rk] attribute'una bağlı (specificity 0,2,0) ki gece-modu
   kuralları (0,1,1) onu ezmesin ve renk iki modda da görünsün. */

.brawler-link {
    color: #5b4bd1; text-decoration: none; font-weight: 600;
    border-bottom: 1px dashed rgba(108, 92, 231, .5);
}
.brawler-link:hover { border-bottom-style: solid; color: #5b4bd1; }
[data-theme="dark"] .brawler-link { color: #b4a7ff; border-bottom-color: rgba(180, 167, 255, .5); }
[data-theme="dark"] .brawler-link:hover { color: #b4a7ff; }

/* Nadirlik renkleri: --rk = çerçeve/glow/halka, --rk-bg = başlık bandı tonu. data-rk JS'ten gelir. */
.brl-pop { --rk: #6c5ce7; --rk-bg: rgba(108, 92, 231, .16); }
.brl-pop[data-rk="common"]         { --rk: #9aa7b4; --rk-bg: rgba(154, 167, 180, .16); }
.brl-pop[data-rk="rare"]           { --rk: #36d13f; --rk-bg: rgba(54, 209, 63, .16); }
.brl-pop[data-rk="superrare"]      { --rk: #2f9bff; --rk-bg: rgba(47, 155, 255, .16); }
.brl-pop[data-rk="epic"]           { --rk: #a55cff; --rk-bg: rgba(165, 92, 255, .18); }
.brl-pop[data-rk="mythic"]         { --rk: #ff4d7d; --rk-bg: rgba(255, 77, 125, .16); }
.brl-pop[data-rk="legendary"]      { --rk: #f0b400; --rk-bg: rgba(240, 180, 0, .18); }
.brl-pop[data-rk="ultralegendary"] { --rk: #ff5326; --rk-bg: rgba(255, 83, 38, .16); }

/* Yüzey: gündüz beyaz (varsayılan), gece koyu. */
.brl-pop {
    position: fixed; z-index: 1080; width: 300px; max-width: calc(100vw - 24px);
    background: #ffffff; color: rgba(18, 24, 38, .95);
    border-radius: 14px; padding: 0; overflow: hidden;
    opacity: 0; visibility: hidden; transform: translateY(4px);
    transition: opacity .12s ease, transform .12s ease; pointer-events: none;
}
[data-theme="dark"] .brl-pop { background: #232a3d; color: rgba(255, 255, 255, .95); }
.brl-pop.on { opacity: 1; visibility: visible; transform: none; }

/* Renkli çerçeve + glow: [data-rk] (0,2,0) iki temada da kazanır. */
.brl-pop[data-rk] {
    border: 1.5px solid var(--rk, #6c5ce7);
    box-shadow: 0 14px 38px rgba(0, 0, 0, .35), 0 0 22px -8px var(--rk, #6c5ce7);
}

.brl-pop-head {
    display: flex; gap: 10px; align-items: center; padding: 12px;
    background: linear-gradient(135deg, var(--rk-bg), transparent 80%);
    border-bottom: 1px solid rgba(128, 128, 128, .2);
}
.brl-pop[data-rk] .brl-pop-img {
    width: 58px; height: 58px; border-radius: 8px; object-fit: cover; flex-shrink: 0;
    background: rgba(0, 0, 0, .1); border: 2px solid var(--rk);
}
.brl-pop-name { font-size: 1.08rem; font-weight: 700; margin-bottom: 6px; color: inherit; }
.brl-pop-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.brl-tag { font-size: .72rem; font-weight: 600; padding: 2px 9px; border-radius: 50px; }
/* Sınıf rozeti: tier list sayfasındaki .tl-char-class ile aynı mor. */
.brl-cls { background: rgba(108, 92, 231, .14); color: #5b4bd1; }
[data-theme="dark"] .brl-cls { background: rgba(108, 92, 231, .22); color: #b4a7ff; }
/* Nadirlik rozeti: opak ve canlı, hem beyaz hem koyu kartta okunur. */
.brl-rar-common { background: #c2ccd6; color: #15171c; }
.brl-rar-rare { background: #43c64a; color: #08240b; }
.brl-rar-superrare { background: #4aa3ff; color: #06203c; }
.brl-rar-epic { background: #b673ff; color: #ffffff; }
.brl-rar-mythic { background: #ff5d86; color: #ffffff; }
.brl-rar-legendary { background: #ffce3a; color: #3a2c00; }
.brl-rar-ultralegendary { background: #ff6a3d; color: #ffffff; }
.brl-pop-role { font-size: .86rem; margin: 0; padding: 10px 12px 0; line-height: 1.45; color: rgba(18, 24, 38, .78); }
.brl-pop-lore { font-size: .83rem; margin: 0; padding: 8px 12px 12px; line-height: 1.5; color: rgba(18, 24, 38, .55); }
[data-theme="dark"] .brl-pop-role { color: rgba(255, 255, 255, .82); }
[data-theme="dark"] .brl-pop-lore { color: rgba(255, 255, 255, .6); }
.brl-pop-role:empty, .brl-pop-lore:empty { display: none; }
.brl-pop-role:empty + .brl-pop-lore { padding-top: 10px; }