/* =====================================================================
   Ko2Play - ESYA IPUCU BICIMLERI (paylasimli)
   =====================================================================

   NEDEN AYRI DOSYA: bu kurallar hem oyunda (style.css) hem yonetim
   panelinde (admin.css) gerekiyor - panelde "Eşya Oluştur" modulunun
   canli onizlemesi oyunun kendi ipucu HTML'ini basiyor
   (bkz. client/src/ui/item-tip.js). Kurallari iki dosyaya KOPYALASAYDIK
   bir rengi degistirdigimizde panel eski halini gostermeye devam ederdi:
   "panelde gordugun neyse oyunda o" garantisi CSS'te de gecerli olmali.

   Iki sayfa da bu dosyayi <link> ile cekiyor; secicilerin tamami
   `.tooltip` altinda kaldigi icin baska hicbir seye dokunmuyor.

   DEGISKENLER YEDEKLI: oyun `--text-dim`, `--gold`, `--border-2` ve
   `--shadow` tanimliyor, panel bunlari BASKA ADLA tutuyor. Yedek deger
   olmasaydi panelde yazi rengi tarayicinin varsayilanina duserdi.
   ===================================================================== */

.tooltip {
  position: absolute; z-index: 60; pointer-events: none;
  max-width: 250px; padding: 10px 13px; border-radius: 8px;
  background: rgba(8,9,12,.97); border: 1px solid var(--border-2, rgba(255,255,255,.18));
  box-shadow: var(--shadow, 0 12px 32px rgba(0,0,0,.55)); font-size: 12px; line-height: 1.6;
}
.tooltip .tt-name { font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.tooltip .tt-sub { color: var(--text-dim, #9a978f); font-size: 11px; margin-bottom: 6px; }
.tooltip .tt-base { color: #e8e6e2; }
.tooltip .tt-stat { color: #8fd4a0; }
.tooltip .tt-malus { color: #e0864a; }
.tooltip .tt-req { color: #ff9a8a; }
.tooltip .tt-sub + .tt-class { margin-top: -4px; }
.tooltip .tt-class { font-weight: 600; }
.tooltip .tt-class.g0 { color: #9aa0a8; }
.tooltip .tt-class.g1 { color: #6fa8dc; }
.tooltip .tt-class.g2 { color: #b48ad4; }
.tooltip .tt-class.g3 { color: #d8b45a; }
.tooltip .tt-locked { color: #8a8f98; font-style: italic; margin-bottom: 2px; }
.tooltip .tt-locked .dim { color: #6d727a; }
.tooltip .tt-price { color: var(--gold, #d8b45a); margin-top: 5px; }
.tooltip .tt-name.g1 { color: #6ab4ff; }
.tooltip .tt-name.g2 { color: #c07aff; }
.tooltip .tt-name.g3 { color: #ffc93a; }
.tooltip .tt-upg.g1 { color: #6ab4ff; }
.tooltip .tt-upg.g2 { color: #c07aff; }
.tooltip .tt-upg.g3 { color: #ffc93a; }
.tooltip .tt-upg  { margin: 4px 0 2px; color: #8ff07a; font-size: 11px; font-weight: 600; }
.tooltip .tt-rare { margin: 4px 0 2px; color: #c07aff; font-size: 11px; font-weight: 600; }
.tooltip .tt-broken { color: #ff7a6a; }
.tooltip .tt-repair { color: #7ae08a; margin-top: 5px; }
.tooltip .tt-desc { color: var(--text-dim, #9a978f); margin-top: 6px; font-size: 11.5px; line-height: 1.45; }
.tooltip .tt-en { color: #6a6f7a; font-style: italic; margin-top: 3px; font-size: 10.5px; line-height: 1.4; }