/* ══════════════════════════════════════════════════════════════════
   20-console.css — "KOMUTA KATMANI"

   Tasarım fikri: harita aydınlık bir masa yüzeyi, HUD ise onun üstünde
   duran hassas ölçüm aletleri. Kimlik üç şeyden geliyor:
     1) Piksel ızgarası geometrisi (ikonlar zaten 12x12 piksel-art)
     2) Kılcal (1px) çizgiler + tek yönden gelen ışık — "işlenmiş plaka"
     3) Vurgu rengi = oyuncunun fraksiyon/tema rengi (theme.js --accent'i
        runtime'da ezer, bu yüzden burada ASLA --accent tanımlanmaz)

   Bu dosya EN SON yüklenir ve yalnızca YÜZEY özelliklerine dokunur
   (renk, kenarlık, gölge, yarıçap, tipografi, geçiş). Konum/boyut/akış
   değerleri (position, width, display, flex...) JS ve mobil katmanlarla
   çakışmasın diye bilerek dışarıda bırakıldı.
   Bkz. [[pixelfront-tasarim-test]] — değişiklikten sonra ekran taraması.
══════════════════════════════════════════════════════════════════ */

/* ── 1. ZEMİN PALETİ ───────────────────────────────────────────────
   Daha derin ve daha soğuk bir mürekkep serisi. Basamaklar arası fark
   büyütüldü: eskiden surf/surf2/surf3 birbirine çok yakındı, panel
   içindeki katmanlar ayırt edilemiyordu. --muted de okunabilirlik için
   belirgin şekilde açıldı (haritanın beyazı yanında griler kayboluyordu). */
:root{
  --bg:#050810;      --bg-rgb:5,8,16;
  --surf:#0a1020;    --surf-rgb:10,16,32;
  --surf2:#111a2e;   --surf2-rgb:17,26,46;
  --surf3:#1c2842;   --surf3-rgb:28,40,66;
  --bdr:#1f2b47;     --bdr2:#33415f;
  --txt:#eef2fd;     --muted:#95a3c6;
  --red:#ff4d67;     --green:#22d3a5;     --gold:#f7b32b;

  /* Malzeme */
  --pf-hair:      rgba(255,255,255,.075);
  --pf-hair-2:    rgba(255,255,255,.14);
  --pf-glass:     blur(20px) saturate(150%);
  --pf-plate:     linear-gradient(155deg, rgba(var(--surf2-rgb),.94) 0%, rgba(var(--surf-rgb),.97) 100%);
  --pf-plate-hi:  linear-gradient(155deg, rgba(var(--surf3-rgb),.94) 0%, rgba(var(--surf2-rgb),.97) 100%);

  /* Gölge basamakları — yüzeye yakın sert + uzakta yumuşak, iki katman */
  --pf-sh1: 0 1px 1px rgba(0,0,0,.45), 0 6px 18px rgba(0,0,0,.35);
  --pf-sh2: 0 1px 2px rgba(0,0,0,.5),  0 14px 40px rgba(0,0,0,.48);
  --pf-sh3: 0 2px 4px rgba(0,0,0,.55), 0 36px 96px rgba(0,0,0,.7);

  /* Yarıçaplar — 4px ızgarasına oturur */
  --pf-r1:8px; --pf-r2:12px; --pf-r3:16px; --pf-r4:20px;

  --pf-ease:   cubic-bezier(.2,.8,.2,1);
  --pf-spring: cubic-bezier(.34,1.4,.5,1);
}

:root[data-theme="light"]{
  --bg:#e7eaf3;      --bg-rgb:231,234,243;
  --surf:#ffffff;    --surf-rgb:255,255,255;
  --surf2:#f1f4fb;   --surf2-rgb:241,244,251;
  --surf3:#e2e7f4;   --surf3-rgb:226,231,244;
  --bdr:#d5dbec;     --bdr2:#b6c0da;
  --txt:#111726;     --muted:#5a6483;
  --pf-hair:   rgba(20,30,60,.10);
  --pf-hair-2: rgba(20,30,60,.18);
  --pf-sh1: 0 1px 1px rgba(30,40,75,.06), 0 6px 18px rgba(30,40,75,.10);
  --pf-sh2: 0 1px 2px rgba(30,40,75,.08), 0 14px 40px rgba(30,40,75,.16);
  --pf-sh3: 0 2px 4px rgba(30,40,75,.10), 0 36px 96px rgba(30,40,75,.24);
}


/* ── 2. ATMOSFER ───────────────────────────────────────────────────
   Harita bembeyaz; HUD parçaları doğrudan o beyazın üstünde yüzdüğü
   için kenarları "kesik" duruyordu. Üst ve alt kenara ince birer
   gölge şeridi seriyoruz: HUD'un oturduğu bantlar hafifçe koyulaşıyor,
   haritanın ortası hiç dokunulmadan berrak kalıyor.
   DİKKAT: burada radyal/geniş bir vinyet DENENDİ ve geri alındı —
   haritanın mavisini griye çeviriyor, oyunun okunurluğunu bozuyordu.
   body flex konteyner; katman position:fixed olduğu için akışa girmez. */
body::before{
  content:'';
  position:fixed; inset:0; z-index:3; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(var(--bg-rgb),.15) 0px, rgba(var(--bg-rgb),0) 92px),
    linear-gradient(0deg,   rgba(var(--bg-rgb),.13) 0px, rgba(var(--bg-rgb),0) 84px);
}


/* ── 3. TİPOGRAFİ RİTMİ ────────────────────────────────────────────
   Sayılar oyunun dili: hepsi tabular (rakamlar sayaç akarken zıplamaz).
   Bölüm etiketleri ise dekor değil yapı — metin bittiği yerden kılcal
   bir çizgi olarak devam ediyor, böylece panel içindeki gruplar
   gerçekten "bölüm" gibi okunuyor. */
#pnum, #pmax, #pixel-count-row, #cdtimer, #coord-box,
.pb-pix, .pb-lv-badge, .pc-stat-val, .pcs-card-val, .fc-invite-code,
.qcard-prog-txt, .fc-member-px, .pf-num{
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" 1 !important;
}

.fc-sec,
.pca-section-title,
.pc-label,
.pc-frame-group-title,
.scard h3{
  display:flex !important;
  align-items:center !important;
  gap:.6rem !important;
  color:var(--muted) !important;
  font-family:var(--font-ui) !important;
  font-size:.6rem !important;
  font-weight:800 !important;
  letter-spacing:.15em !important;
  text-transform:uppercase !important;
}
.fc-sec::after,
.pca-section-title::after,
.pc-label::after,
.pc-frame-group-title::after,
.scard h3::after{
  content:'';
  flex:1 1 auto;
  height:1px;
  min-width:12px;
  /* Düz kılcal çizgi — gradyan denendi, uzun satırlarda ilk 40px'te
     kayboluyor ve etiketin yanında kırık bir tire gibi duruyordu. */
  background:var(--pf-hair-2);
}

/* Panel başlıkları — Chakra Petch sıkı kesim, üstünde küçük bir künye */
.fc-header h2, .pc-header h2{
  font-family:var(--font-display) !important;
  font-size:1.02rem !important;
  font-weight:700 !important;
  letter-spacing:.01em !important;
  color:var(--txt) !important;
}


/* ── 4. HUD — ölçüm aletleri ───────────────────────────────────────*/

/* 4.1 Kimlik plakası (sol üst) — sol kenarda fraksiyon rengi şeridi */
#profile-btn{
  background:var(--pf-plate) !important;
  border:1px solid var(--pf-hair) !important;
  border-radius:var(--pf-r3) !important;
  box-shadow:var(--pf-sh1), inset 0 1px 0 rgba(255,255,255,.06) !important;
  -webkit-backdrop-filter:var(--pf-glass) !important;
          backdrop-filter:var(--pf-glass) !important;
  position:relative !important;
  overflow:hidden !important;
  transition:transform .22s var(--pf-ease), box-shadow .22s var(--pf-ease),
             border-color .22s var(--pf-ease) !important;
}
#profile-btn::before{
  content:'';
  position:absolute; left:0; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg, var(--accent), var(--accent2));
  opacity:.95;
}
#profile-btn:hover{
  background:var(--pf-plate-hi) !important;
  border-color:rgba(var(--accent-rgb),.42) !important;
  box-shadow:var(--pf-sh2), 0 0 26px rgba(var(--accent-rgb),.16),
             inset 0 1px 0 rgba(255,255,255,.08) !important;
  transform:translateY(-1px) !important;
}
#profile-btn:active{ transform:translateY(0) !important; }

.pb-name{
  font-family:var(--font-display) !important;
  font-size:.76rem !important;
  font-weight:700 !important;
  letter-spacing:.01em !important;
  color:var(--txt) !important;
}
.pb-pix{
  font-size:.62rem !important;
  font-weight:600 !important;
  color:var(--accent-text) !important;
  letter-spacing:.02em !important;
}
.pb-lv-badge{
  border-radius:5px !important;
  letter-spacing:.06em !important;
  box-shadow:0 1px 6px rgba(var(--accent-rgb),.4) !important;
}
.pb-xp-bar-wrap{
  background:rgba(255,255,255,.07) !important;
  border-radius:99px !important;
  overflow:hidden !important;
}
.pb-xp-bar{
  border-radius:99px !important;
  box-shadow:0 0 8px rgba(var(--accent-rgb),.55) !important;
}

/* 4.2 Menü düğmesi — plakanın devamı gibi */
#pb-menu-btn{
  background:var(--pf-plate) !important;
  border:1px solid var(--pf-hair) !important;
  border-radius:var(--pf-r2) !important;
  color:var(--muted) !important;
  font-family:var(--font-ui) !important;
  font-size:.66rem !important;
  font-weight:700 !important;
  letter-spacing:.1em !important;
  text-transform:uppercase !important;
  box-shadow:var(--pf-sh1) !important;
  -webkit-backdrop-filter:var(--pf-glass) !important;
          backdrop-filter:var(--pf-glass) !important;
  transition:color .2s var(--pf-ease), border-color .2s var(--pf-ease),
             background .2s var(--pf-ease), box-shadow .2s var(--pf-ease) !important;
}
#pb-menu-btn:hover{
  color:var(--txt) !important;
  border-color:rgba(var(--accent-rgb),.4) !important;
  box-shadow:var(--pf-sh1), 0 0 20px rgba(var(--accent-rgb),.14) !important;
}
#pb-menu-btn.open{
  color:var(--accent-text) !important;
  border-color:rgba(var(--accent-rgb),.55) !important;
  background:linear-gradient(155deg, rgba(var(--accent-rgb),.20), rgba(var(--accent-rgb),.08)) !important;
}

/* 4.3 Piksel göstergesi (üst orta) — oyunun kalp atışı.
   Sayı kahraman: eskiden halkanın içinde 0.92rem'lik gri bir rakamdı,
   şimdi panelin en büyük tipografik öğesi. */
#pixel-widget{
  background:linear-gradient(155deg, rgba(var(--surf-rgb),.90) 0%, rgba(var(--bg-rgb),.94) 100%) !important;
  border:1px solid var(--pf-hair) !important;
  border-radius:var(--pf-r3) !important;
  box-shadow:var(--pf-sh2), inset 0 1px 0 rgba(255,255,255,.07) !important;
  -webkit-backdrop-filter:var(--pf-glass) !important;
          backdrop-filter:var(--pf-glass) !important;
  /* DİKKAT: position VERİLMEZ. Bir kez position:relative denendi ve
     widget'ı akışa sokup ekranın altına attı — 03-components.css'teki
     position:absolute + left:50%/translateX(-50%) yerleşimi ::after için
     zaten konumlandırılmış bir atadır. */
  overflow:hidden !important;
}
/* Üst kenarda vurgu rengiyle ince bir ışık — dolum göstergesi hissi */
#pixel-widget::after{
  content:'';
  position:absolute; top:0; left:14%; right:14%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(var(--accent-rgb),.75), transparent);
}
#pnum{
  font-size:1.06rem !important;
  font-weight:700 !important;
  color:#fff !important;
  letter-spacing:-.02em !important;
  text-shadow:0 0 14px rgba(var(--accent-rgb),.5) !important;
}
.pr-track{ stroke:rgba(255,255,255,.08) !important; stroke-width:3.5 !important; }
#pr-fill{ stroke-width:3.5 !important; }
#pixel-count-row{
  font-size:.7rem !important;
  color:var(--muted) !important;
  letter-spacing:.02em !important;
}
.pw-label{
  color:var(--muted) !important;
  font-size:.58rem !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
}
#cdlabel{
  font-size:.6rem !important;
  color:var(--gold) !important;
  letter-spacing:.04em !important;
}
#cd-bar-wrap{ height:3px !important; background:rgba(255,255,255,.07) !important; }
#cd-bar{ box-shadow:0 0 8px rgba(var(--accent-rgb),.6) !important; }

/* 4.4 Zoom kümesi (sol alt) — tek bir alet kümesi gibi */
.zb{
  width:32px !important; height:32px !important;
  background:var(--pf-plate) !important;
  border:1px solid var(--pf-hair) !important;
  border-radius:var(--pf-r1) !important;
  color:var(--muted) !important;
  box-shadow:var(--pf-sh1), inset 0 1px 0 rgba(255,255,255,.06) !important;
  -webkit-backdrop-filter:var(--pf-glass) !important;
          backdrop-filter:var(--pf-glass) !important;
  transition:color .18s var(--pf-ease), border-color .18s var(--pf-ease),
             background .18s var(--pf-ease), box-shadow .18s var(--pf-ease),
             transform .18s var(--pf-spring) !important;
}
.zb:hover{
  color:var(--txt) !important;
  background:var(--pf-plate-hi) !important;
  border-color:rgba(var(--accent-rgb),.45) !important;
  box-shadow:var(--pf-sh1), 0 0 18px rgba(var(--accent-rgb),.18) !important;
  transform:translateY(-1px) !important;
}
.zb:active{ transform:translateY(0) scale(.96) !important; }

/* 4.5 Koordinat künyesi — haritadaki yerin okunduğu tek yer */
#coord-box{
  background:linear-gradient(155deg, rgba(var(--surf-rgb),.92), rgba(var(--bg-rgb),.95)) !important;
  border:1px solid var(--pf-hair) !important;
  border-radius:var(--pf-r1) !important;
  color:var(--muted) !important;
  font-family:var(--font-mono) !important;
  font-size:.6rem !important;
  letter-spacing:.06em !important;
  box-shadow:var(--pf-sh1) !important;
  -webkit-backdrop-filter:var(--pf-glass) !important;
          backdrop-filter:var(--pf-glass) !important;
  transition:color .18s var(--pf-ease), border-color .18s var(--pf-ease) !important;
}
#coord-box:hover{
  color:var(--accent-text) !important;
  border-color:rgba(var(--accent-rgb),.42) !important;
}

/* 4.6 Boya tepsisi (sağ alt) */
#ptoolbar{
  background:linear-gradient(155deg, rgba(var(--surf-rgb),.90) 0%, rgba(var(--bg-rgb),.95) 100%) !important;
  border:1px solid var(--pf-hair) !important;
  border-radius:var(--pf-r3) !important;
  box-shadow:var(--pf-sh2), inset 0 1px 0 rgba(255,255,255,.07) !important;
  -webkit-backdrop-filter:var(--pf-glass) !important;
          backdrop-filter:var(--pf-glass) !important;
}
#palette-toggle{
  border-width:2px !important;
  border-color:rgba(255,255,255,.85) !important;
  box-shadow:0 0 0 1px rgba(0,0,0,.5), 0 2px 10px rgba(0,0,0,.45) !important;
  transition:transform .18s var(--pf-spring), box-shadow .18s var(--pf-ease) !important;
}
#palette-toggle:hover{
  transform:scale(1.12) !important;
  box-shadow:0 0 0 1px rgba(0,0,0,.5), 0 4px 16px rgba(0,0,0,.5),
             0 0 18px rgba(var(--accent-rgb),.35) !important;
}
#pen-toggle{
  background:rgba(var(--surf3-rgb),.85) !important;
  border-color:var(--pf-hair-2) !important;
  color:var(--muted) !important;
  transition:transform .18s var(--pf-spring), background .18s var(--pf-ease),
             border-color .18s var(--pf-ease), color .18s var(--pf-ease) !important;
}
#pen-toggle:hover{ color:var(--txt) !important; border-color:rgba(var(--accent-rgb),.5) !important; }
#pen-toggle.active{
  box-shadow:0 0 16px rgba(var(--accent-rgb),.5) !important;
  border-color:var(--accent) !important;
}
.psw{
  border:2px solid rgba(255,255,255,.22) !important;
  box-shadow:0 0 0 1px rgba(0,0,0,.45) !important;
  transition:transform .16s var(--pf-spring), border-color .16s var(--pf-ease),
             box-shadow .16s var(--pf-ease) !important;
}
.psw:hover{ transform:scale(1.16) !important; border-color:rgba(255,255,255,.7) !important; }
.psw.sel{
  border-color:#fff !important;
  box-shadow:0 0 0 1px rgba(0,0,0,.55), 0 0 0 3px rgba(var(--accent-rgb),.55) !important;
  transform:scale(1.18) !important;
}

/* 4.7 Ülke arama kutusu */
#prov-find{
  background:linear-gradient(155deg, rgba(var(--surf2-rgb),.95), rgba(var(--surf-rgb),.97)) !important;
  border:1px solid var(--pf-hair) !important;
  border-radius:var(--pf-r2) !important;
  box-shadow:var(--pf-sh2) !important;
  -webkit-backdrop-filter:var(--pf-glass) !important;
          backdrop-filter:var(--pf-glass) !important;
}


/* ── 5. PANELLER & MODALLAR ────────────────────────────────────────*/

/* 5.1 Perde — düz gri yerine merkeze doğru açılan derin mürekkep */
#profile-modal, #faction-modal, #quest-panel, #skill-panel,
#tb-menu-sheet, #owner-modal, #am-modal, #tplhub-modal,
#report-modal, #history-modal, #timelapse-modal{
  background:
    radial-gradient(120% 90% at 50% 50%, rgba(var(--bg-rgb),.66) 0%, rgba(var(--bg-rgb),.88) 100%) !important;
  -webkit-backdrop-filter:blur(10px) saturate(120%) !important;
          backdrop-filter:blur(10px) saturate(120%) !important;
}

/* 5.2 Kartlar — plaka malzemesi, üstte vurgu hattı */
#faction-card, #profile-card, #quest-card, #skill-card,
.mailbox-box, .tut-card, #tb-menu-card{
  border:1px solid var(--pf-hair) !important;
  border-radius:var(--pf-r4) !important;
  box-shadow:var(--pf-sh3), 0 0 0 1px rgba(0,0,0,.45),
             inset 0 1px 0 rgba(255,255,255,.07) !important;
}
#faction-card::after, #profile-card::after,
#quest-card::after, #skill-card::after{
  content:'';
  position:absolute; top:0; left:12%; right:12%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(var(--accent-rgb),.7), transparent);
  pointer-events:none;
}

/* 5.3 Kapatma düğmeleri — köşede kaybolmuş bir ✕ yerine gerçek hedef */
.fc-close, .pc-close, .qp-close, .sk-close, .tb-sheet-close,
#faction-card .fc-header button, #profile-card .pc-header button{
  border-radius:var(--pf-r1) !important;
  border:1px solid var(--pf-hair) !important;
  background:rgba(var(--surf2-rgb),.7) !important;
  color:var(--muted) !important;
  transition:color .18s var(--pf-ease), border-color .18s var(--pf-ease),
             background .18s var(--pf-ease), transform .18s var(--pf-spring) !important;
}
.fc-close:hover, .pc-close:hover, .qp-close:hover, .sk-close:hover,
.tb-sheet-close:hover{
  color:var(--txt) !important;
  background:rgba(var(--red),.14) !important;
  border-color:rgba(255,77,103,.45) !important;
  transform:rotate(90deg) !important;
}

/* 5.4 Sekmeler — dolgulu hap, aktifken fraksiyon rengi */
.fc-tab, .pc-tab, .ch-tab, .quest-tab, .auth-tab{
  border-radius:var(--pf-r1) !important;
  letter-spacing:.04em !important;
  transition:color .18s var(--pf-ease), background .18s var(--pf-ease),
             box-shadow .18s var(--pf-ease) !important;
}
/* .quest-tab BİLEREK DIŞARIDA: görev panelinin kendi yeşil kimliği var,
   vurgu rengiyle boyayınca panelin geri kalanıyla çakışıyor. */
.fc-tab.active, .pc-tab.active, .auth-tab.active{
  background:linear-gradient(155deg, var(--accent), var(--accent-mid)) !important;
  box-shadow:0 2px 14px rgba(var(--accent-rgb),.45),
             inset 0 1px 0 rgba(255,255,255,.18) !important;
}

/* 5.5 Liste satırları — tıklanabilir olduklarını göstersinler */
.fc-rank-row, .fc-member, .mail-item, .pca-row, .am-card-item, .fc-diplo-row{
  border-radius:var(--pf-r2) !important;
  border:1px solid var(--pf-hair) !important;
  transition:border-color .18s var(--pf-ease), background .18s var(--pf-ease),
             transform .18s var(--pf-ease) !important;
}
.fc-rank-row:hover, .fc-member:hover, .mail-item:hover,
.pca-row:hover, .am-card-item:hover{
  border-color:rgba(var(--accent-rgb),.32) !important;
  background:rgba(var(--surf3-rgb),.55) !important;
  transform:translateX(2px) !important;
}


/* ── 6. KONTROLLER ─────────────────────────────────────────────────*/

.btn, .fc-btn, .pc-hero-btn, .qcard-claim, #chat-send{
  border-radius:var(--pf-r2) !important;
  letter-spacing:.02em !important;
  transition:transform .18s var(--pf-spring), box-shadow .2s var(--pf-ease),
             filter .2s var(--pf-ease) !important;
}
.btn{
  font-family:var(--font-display) !important;
  font-weight:700 !important;
  font-size:.85rem !important;
  letter-spacing:.03em !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:0 2px 10px rgba(var(--accent-rgb),.35),
             inset 0 1px 0 rgba(255,255,255,.20) !important;
}
.btn:hover{
  transform:translateY(-1px) !important;
  filter:brightness(1.06) !important;
  box-shadow:0 8px 26px rgba(var(--accent-rgb),.5),
             inset 0 1px 0 rgba(255,255,255,.22) !important;
}
.btn:active{ transform:translateY(0) scale(.99) !important; filter:brightness(.97) !important; }

.ptbtn{
  border-radius:var(--pf-r1) !important;
  border-color:var(--pf-hair-2) !important;
  transition:background .18s var(--pf-ease), border-color .18s var(--pf-ease),
             color .18s var(--pf-ease) !important;
}
.ptbtn:hover{ border-color:rgba(var(--accent-rgb),.4) !important; }

/* Girdiler — odak halkası vurgu renginde, alan hafifçe yükselir */
.lbox input, #chat-input, .fc-chat-input, .pc-input, .rp-input,
#prov-find-input, .pca-select, .fc-input, input[type="text"], input[type="email"],
input[type="password"], input[type="search"], textarea{
  border-radius:var(--pf-r2) !important;
  border:1px solid var(--pf-hair-2) !important;
  background:rgba(var(--surf2-rgb),.75) !important;
  color:var(--txt) !important;
  transition:border-color .18s var(--pf-ease), box-shadow .18s var(--pf-ease),
             background .18s var(--pf-ease) !important;
}
.lbox input:focus, #chat-input:focus, .fc-chat-input:focus, .pc-input:focus,
.rp-input:focus, #prov-find-input:focus, .fc-input:focus,
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus,
input[type="search"]:focus, textarea:focus{
  outline:none !important;
  border-color:rgba(var(--accent-rgb),.7) !important;
  background:rgba(var(--surf3-rgb),.7) !important;
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.22) !important;
}
::placeholder{ color:var(--muted) !important; opacity:.65 !important; }

/* Klavye odağı her yerde görünür olsun (fare tıklamasında görünmez) */
button:focus-visible, a:focus-visible, [role="button"]:focus-visible,
.zb:focus-visible, .psw:focus-visible, .ptbtn:focus-visible{
  outline:2px solid rgba(var(--accent-rgb),.85) !important;
  outline-offset:2px !important;
  border-radius:var(--pf-r1);
}


/* ── 7. SOHBET ─────────────────────────────────────────────────────*/
#chat-panel{
  border:1px solid var(--pf-hair) !important;
  border-radius:var(--pf-r3) !important;
  box-shadow:var(--pf-sh2), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
#chat-header{ border-bottom:1px solid var(--pf-hair) !important; }
#chat-footer{ border-top:1px solid var(--pf-hair) !important; }
.ch-tab.active{
  color:var(--accent-text) !important;
  background:rgba(var(--accent-rgb),.14) !important;
}
.cm.user .cm-text{
  border-radius:var(--pf-r2) var(--pf-r2) 4px var(--pf-r2) !important;
  box-shadow:0 2px 12px rgba(var(--accent-rgb),.3) !important;
}


/* ── 8. BİLDİRİM PİLİ ──────────────────────────────────────────────*/
#popup{
  background:linear-gradient(155deg, rgba(var(--surf2-rgb),.95), rgba(var(--bg-rgb),.97)) !important;
  border:1px solid rgba(var(--accent-rgb),.45) !important;
  border-radius:99px !important;
  padding:.5rem 1.15rem !important;
  font-size:.74rem !important;
  letter-spacing:.02em !important;
  color:var(--txt) !important;
  box-shadow:var(--pf-sh2), 0 0 26px rgba(var(--accent-rgb),.22) !important;
  -webkit-backdrop-filter:var(--pf-glass) !important;
          backdrop-filter:var(--pf-glass) !important;
}


/* ── 9. GİRİŞ EKRANI — ilk izlenim ─────────────────────────────────*/
#login{
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(var(--accent-rgb),.13) 0%, rgba(var(--bg-rgb),0) 60%),
    radial-gradient(120% 90% at 50% 50%, rgba(var(--bg-rgb),.90) 0%, rgba(var(--bg-rgb),.97) 100%) !important;
}
/* Kart 1045px; dizüstü ekranında (≈810px) üstü kesiliyor ve #login
   align-items:center olduğu için KAYDIRILAMIYORDU — marka satırı, dil
   seçici ve alttaki misafir bağlantısı erişilemez oluyordu. Flex'te
   bilinen çözüm: konteyner kaydırılabilir + öğeye margin:auto (yer
   varken ortalar, yokken kırpmadan kaydırır). */
#login{
  overflow-y:auto !important;
  align-items:flex-start !important;
  padding:18px 12px !important;
}
.lbox{
  margin:auto !important;
  border:1px solid var(--pf-hair) !important;
  border-radius:var(--pf-r4) !important;
  box-shadow:var(--pf-sh3), 0 0 0 1px rgba(0,0,0,.5),
             0 0 90px rgba(var(--accent-rgb),.14),
             inset 0 1px 0 rgba(255,255,255,.08) !important;
  position:relative !important;
}
.lbox::before{
  content:'';
  position:absolute; top:0; left:10%; right:10%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(var(--accent-rgb),.8), transparent);
}
.lbox-wordmark{
  letter-spacing:.02em !important;
  text-shadow:0 2px 20px rgba(var(--accent-rgb),.35) !important;
}
.lbox-brand{
  padding-bottom:.7rem !important;
  border-bottom:1px solid var(--pf-hair) !important;
}
/* Kahraman başlık — üstteki wordmark satırı "künye", asıl başlık bu.
   İkisi de aynı boydayken kart iki kez kendini tanıtıyor gibi duruyordu. */
#login-title{
  font-family:var(--font-display) !important;
  font-size:1.85rem !important;
  letter-spacing:-.02em !important;
  line-height:1.1 !important;
}
#login-desc{ color:var(--muted) !important; line-height:1.65 !important; }
.auth-tab{ font-weight:700 !important; }
#google-signin-btn, #discord-signin-btn{
  border-radius:var(--pf-r2) !important;
  transition:transform .18s var(--pf-spring), box-shadow .2s var(--pf-ease) !important;
}
#google-signin-btn:hover, #discord-signin-btn:hover{
  transform:translateY(-1px) !important;
  box-shadow:0 8px 24px rgba(0,0,0,.45) !important;
}


/* ── 10. KAYDIRMA ÇUBUKLARI ────────────────────────────────────────*/
*::-webkit-scrollbar{ width:8px; height:8px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{
  background:rgba(var(--surf3-rgb),.9);
  border-radius:99px;
  border:2px solid transparent;
  background-clip:padding-box;
}
*::-webkit-scrollbar-thumb:hover{ background:rgba(var(--accent-rgb),.55); background-clip:padding-box; }


/* ── 11. HAREKET ───────────────────────────────────────────────────
   Modal açılışı: hafif ölçek + yukarı süzülme. Tek bir giriş jesti,
   her panelde aynı — arayüz tutarlı bir "mekanizma" gibi hissettiriyor. */
@keyframes pf-card-in{
  from{ opacity:0; transform:translateY(10px) scale(.985); }
  to  { opacity:1; transform:translateY(0)    scale(1);    }
}
#faction-card, #profile-card, #quest-card, #skill-card, .lbox{
  animation:pf-card-in .32s var(--pf-ease) both;
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  #profile-btn:hover, .zb:hover, .btn:hover,
  .fc-rank-row:hover, .fc-member:hover, .mail-item:hover, .pca-row:hover{
    transform:none !important;
  }
}


/* ── 12. MOBİL ─────────────────────────────────────────────────────
   Küçük ekranda kenar şeritleri daralan haritadan daha çok yer yer;
   yumuşatıyoruz. Blur da mobil GPU'da pahalı, seviyesi düşürüldü. */
@media (max-width: 700px){
  body::before{ opacity:.65; }
  #profile-btn, #pixel-widget, #ptoolbar, .zb, #coord-box, #pb-menu-btn{
    -webkit-backdrop-filter:blur(10px) !important;
            backdrop-filter:blur(10px) !important;
  }
  #pnum{ font-size:.98rem !important; }
}