/* ══ TOPBAR — Kompakt, modern, ikon destekli ══ */
#topbar{
  flex-shrink:0;
  height:40px;
  background:rgba(var(--bg-rgb),.97);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(var(--shine-rgb),.06);
  display:none;
  align-items:center;
  padding:0 .75rem;
  gap:.5rem;
  position:relative;
  z-index:100;
}
/* Logo — sadece mobilde görünür */
#topbar h1{
  font-size:.88rem;
  font-weight:900;
  color:var(--txt);
  white-space:nowrap;
  letter-spacing:-.01em;
  flex-shrink:0;
  line-height:1;
  display:none;
}
.sep{flex:1;min-width:0;}

/* Kullanıcı badge kaldırıldı (isim zaten profil butonunda görünüyor) */
#ubadge{
  display:none;
  font-family:var(--font-mono);
  font-size:.62rem;
  color:var(--muted);
  background:var(--surf2);
  border:1px solid rgba(var(--shine-rgb),.06);
  border-radius:6px;
  padding:.2rem .55rem;
  flex-shrink:0;
  max-width:130px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ── Topbar buton grubu (desktop) ── */
.tb-btn-group{
  display:flex;
  align-items:center;
  gap:.3rem;
  flex-shrink:0;
}

/* Küçük ikon+metin topbar butonları */
.tb-btn{
  display:inline-flex;
  align-items:center;
  gap:.32rem;
  padding:.28rem .6rem;
  border:1px solid rgba(var(--shine-rgb),.08);
  border-radius:7px;
  font-family:var(--font-display);
  font-size:.65rem;
  font-weight:700;
  cursor:pointer;
  transition:opacity .15s, transform .1s, box-shadow .15s;
  white-space:nowrap;
  line-height:1;
  color:#fff;
  min-height:28px;
}
.tb-btn:hover{opacity:.85;transform:translateY(-1px);}
.tb-btn .tb-icon{font-size:.78rem;line-height:1;flex-shrink:0;}
.tb-btn .tb-label{letter-spacing:.01em;}

/* Admin ON durumu */
#adminbtn{flex-shrink:0;}
#adminbtn.admin-on{ box-shadow:0 0 0 1px #16a34a, 0 0 8px rgba(22,163,74,.4); }

/* ── Posta Kutusu ── */
#mailbox-btn{
  position:relative;
  background:linear-gradient(135deg,#1e1b6e,#3b1fa8);
  flex-shrink:0;
}
#mailbox-badge{
  display:none;
  position:absolute;
  top:-5px;right:-5px;
  background:#f04a4a;
  color:#fff;
  font-size:.48rem;
  font-weight:800;
  border-radius:50%;
  min-width:15px;
  height:15px;
  align-items:center;
  justify-content:center;
  line-height:1;
  font-family:var(--font-mono);
  padding:0 2px;
}
#mailbox-modal{
  position:fixed;inset:0;background:rgba(0,0,0,.65);-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display:none;align-items:center;justify-content:center;z-index:800;
}
#mailbox-modal.open{display:flex;}
.mailbox-box{
  background:linear-gradient(160deg,var(--surf) 0%,var(--surf2) 100%);
  border:1px solid var(--bdr2);
  border-radius:18px;
  padding:1.4rem;
  width:min(420px,94vw);
  max-height:70vh;
  display:flex;flex-direction:column;gap:.75rem;
  box-shadow:0 0 0 1px rgba(var(--accent-rgb),.12),0 24px 60px rgba(0,0,0,.6);
}
.mailbox-hdr{display:flex;align-items:center;justify-content:space-between;}
.mailbox-title{font-size:.95rem;font-weight:900;color:var(--txt);}
.mailbox-close{background:none;border:none;color:var(--muted);font-size:1.1rem;cursor:pointer;line-height:1;}
.mailbox-list{overflow-y:auto;display:flex;flex-direction:column;gap:.5rem;flex:1;}
.mail-item{
  background:var(--surf2);border:1px solid var(--bdr);border-radius:10px;
  padding:.7rem .85rem;display:flex;flex-direction:column;gap:.35rem;
}
.mail-item.unread{border-color:var(--accent);background:rgba(var(--accent-rgb),.10);}
.mail-item-top{display:flex;align-items:center;gap:.5rem;font-size:.72rem;font-weight:700;color:var(--txt);}
.mail-item-body{font-size:.65rem;color:var(--muted);line-height:1.5;}
.mail-item-actions{display:flex;gap:.4rem;margin-top:.1rem;}
.mail-accept-btn{
  background:rgba(0,212,160,.15);border:1px solid #00d4a0;color:#00d4a0;
  border-radius:6px;padding:.28rem .65rem;font-size:.62rem;font-weight:700;cursor:pointer;
  font-family:var(--font-display);
}
.mail-reject-btn{
  background:rgba(240,74,74,.1);border:1px solid rgba(240,74,74,.4);color:#ff7373;
  border-radius:6px;padding:.28rem .65rem;font-size:.62rem;font-weight:700;cursor:pointer;
  font-family:var(--font-display);
}
.mail-empty{text-align:center;color:var(--muted);font-size:.72rem;padding:1.5rem 0;}

/* ── Hamburger (mobil) ── */
#tb-hamburger{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  width:32px;
  height:32px;
  background:rgba(var(--shine-rgb),.06);
  border:1px solid rgba(var(--shine-rgb),.1);
  border-radius:8px;
  cursor:pointer;
  padding:0;
  flex-shrink:0;
  transition:background .15s;
  -webkit-tap-highlight-color:transparent;
}
#tb-hamburger:hover{ background:rgba(var(--shine-rgb),.1); }
#tb-hamburger span{
  display:block;
  width:14px;
  height:2px;
  background:var(--txt);
  border-radius:2px;
  margin:0 auto;
  transition:transform .2s, opacity .2s;
}
#tb-hamburger.open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
#tb-hamburger.open span:nth-child(2){ opacity:0; }
#tb-hamburger.open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ── Mobil Menü Bottom Sheet ── */
#tb-menu-sheet{
  position:fixed;
  inset:0;
  z-index:500;
  display:none;
  align-items:flex-end;
  justify-content:stretch;
}
#tb-menu-sheet.open{ display:flex; }
#tb-menu-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  -webkit-backdrop-filter:blur(3px);
}
#tb-menu-card{
  position:relative;
  z-index:1;
  width:100%;
  background:rgba(var(--bg-rgb),.98);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(var(--shine-rgb),.07);
  border-bottom:none;
  border-radius:20px 20px 0 0;
  padding:0 0 env(safe-area-inset-bottom,0px);
  overflow:hidden;
  transform:translateY(100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
}
#tb-menu-sheet.open #tb-menu-card{
  transform:translateY(0);
}
/* Tutamaç */
#tb-menu-card::before{
  content:'';
  display:block;
  width:32px;
  height:3px;
  background:rgba(var(--shine-rgb),.15);
  border-radius:2px;
  margin:.6rem auto .4rem;
}
/* Menü başlığı */
.tb-sheet-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.55rem 1rem .6rem;
  border-bottom:1px solid rgba(var(--shine-rgb),.06);
}
.tb-sheet-title{
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.tb-sheet-close{
  background:none;
  border:none;
  color:var(--muted);
  font-size:1rem;
  cursor:pointer;
  line-height:1;
  padding:.1rem .25rem;
  -webkit-tap-highlight-color:transparent;
}

/* Menü öğeleri grid */
.tb-sheet-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.55rem;
  padding:.8rem .85rem;
}
/* Geniş (tam satır) öğe */
.tb-sheet-item-full{
  grid-column:1/-1;
}

/* Menü kart öğesi */
.tb-sheet-item{
  display:flex;
  align-items:center;
  gap:.65rem;
  padding:.7rem .85rem;
  background:rgba(var(--shine-rgb),.04);
  border:1px solid rgba(var(--shine-rgb),.07);
  border-radius:14px;
  cursor:pointer;
  transition:background .15s, border-color .15s;
  -webkit-tap-highlight-color:transparent;
  color:var(--txt);
  text-decoration:none;
}
.tb-sheet-item:hover,
.tb-sheet-item:active{ background:rgba(var(--shine-rgb),.08); border-color:rgba(var(--shine-rgb),.14); }
.tb-sheet-item-icon{
  width:36px;
  height:36px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
  flex-shrink:0;
}
.tb-sheet-item-body{
  display:flex;
  flex-direction:column;
  gap:.1rem;
  min-width:0;
}
.tb-sheet-item-name{
  font-size:.78rem;
  font-weight:700;
  color:var(--txt);
  white-space:nowrap;
}
.tb-sheet-item-desc{
  font-size:.6rem;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
/* Admin aktif durumu */
#ts-adminbtn.active .tb-sheet-item-icon{ box-shadow:0 0 0 2px #16a34a, 0 0 10px rgba(22,163,74,.3); }
#ts-adminbtn.active .tb-sheet-item-name{ color:#4ade80; }

/* Admin butonu flex-shrink override (eskiden vardı) */
#adminbtn{flex-shrink:0;}
/* #main artık GERÇEK 2 kolonlu bir grid: [harita][sidebar]. Önceden tek
   kolon (1fr) tanımlıydı ve sidebar "position:fixed" ile bunun ÜSTÜNE
   biniyordu — yani harita aslında tam genişlikte render ediliyor ama
   sağdaki --sidebar-w kadarlık kısmı sidebar tarafından görsel olarak
   kapatılıyor ve o bölgede týklanamıyordu. İkinci kolonu --sidebar-w
   genişliğinde ayırarak haritanın gerçek görünür/tıklanabilir alanı
   sidebar'ı asla içermeyecek şekilde küçülüyor; sidebar gizliyken de
   ikinci kolon 0'a inip haritaya tam genişlik geri veriliyor. */
#main{flex:1;display:none;grid-template-columns:1fr;overflow:hidden;}
#cwrap{position:relative;overflow:hidden;background:var(--bg);touch-action:none;grid-column:1;}
#c{display:block;cursor:crosshair;image-rendering:pixelated;image-rendering:crisp-edges;}
#label-overlay{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
/* Pan sırasında etiketler tek tek değil, bu katman tek transform ile kayar
   (game.js positionLabels) — will-change katmanı GPU'da kompozit tutar. */
#label-mover{position:absolute;left:0;top:0;will-change:transform;}
#label-overlay span{
  position:absolute;
  left:0;top:0;
  font-family:var(--font-display);
  font-weight:800;
  color:#ffffff;
  text-shadow:0 0 3px #000,0 0 6px #000,1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000;
  white-space:nowrap;
  transform:translate(-50%,-50%);
  pointer-events:none;
  line-height:1;
  letter-spacing:0.02em;
  transition:opacity 0.2s;
}
#zbtn{position:absolute;bottom:90px;left:12px;display:flex;flex-direction:column;gap:4px;z-index:10;}
/* ── İL ARAMA PANELİ (büyüteç butonundan açılır) ── */
#prov-find{
  position:absolute;left:calc(100% + 8px);bottom:0;display:none;
  flex-direction:column;gap:6px;background:var(--surf);
  border:1px solid var(--bdr);border-radius:12px;padding:.55rem;
  z-index:60;width:min(72vw,270px);box-shadow:0 8px 30px rgba(0,0,0,.45);
}
#prov-find.open{display:flex;}
#prov-find-input{
  background:var(--surf2);border:1px solid var(--bdr);border-radius:8px;
  color:var(--txt);font:inherit;font-size:.8rem;padding:.45rem .6rem;
  outline:none;width:100%;
}
#prov-find-input:focus{border-color:var(--accent);}
#prov-find-results{max-height:min(300px,42vh);overflow-y:auto;display:flex;flex-direction:column;gap:2px;}
.pf-row{display:flex;align-items:center;gap:.5rem;padding:.35rem .5rem;border-radius:7px;cursor:pointer;font-size:.78rem;color:var(--txt);}
.pf-row:hover{background:var(--surf2);}
.pf-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.pf-empty{padding:.5rem;font-size:.75rem;color:var(--muted);}
/* Aramadan sonra ilin üzerinde ~2.6sn nabız atan vurgu halkası */
.find-pulse{
  position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;
  border-radius:50%;pointer-events:none;z-index:30;
  background:rgba(255,255,255,.92);
  animation:findPulse 1.25s ease-out 2;
}
@keyframes findPulse{
  0%{box-shadow:0 0 0 4px rgba(255,255,255,.55),0 0 0 4px rgba(255,255,255,.4);}
  100%{box-shadow:0 0 0 4px rgba(255,255,255,.12),0 0 0 52px rgba(255,255,255,0);}
}
#profile-btn{
  position:relative;top:auto;left:auto;z-index:10;
  background:var(--surf);border:1px solid var(--bdr);border-radius:12px;
  padding:.4rem .7rem;display:flex;align-items:center;gap:.6rem;
  cursor:pointer;transition:background .15s, border-color .2s;width:100%;
}
#faction-btn{
  position:absolute;top:12px;left:12px;z-index:10;
  display:flex;flex-direction:column;gap:4px;
}
#profile-btn:hover{background:var(--surf2);border-color:var(--accent);}
.pb-avatar{
  width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.8rem;font-weight:800;color:#fff;flex-shrink:0;
  overflow:hidden;border:2px solid transparent;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  transition:border-color .2s;
}
.pb-avatar img{width:100%;height:100%;object-fit:cover;}
#profile-btn .pb-name{font-family:var(--font-mono);font-size:.68rem;color:var(--txt);max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#profile-btn .pb-pix{font-family:var(--font-mono);font-size:.58rem;color:var(--accent);}
#profile-btn .pb-faction{font-family:var(--font-mono);font-size:.58rem;display:flex;align-items:center;gap:.3rem;margin-top:1px;}
.pb-faction-dot{width:7px;height:7px;border-radius:2px;flex-shrink:0;}
.pb-faction-name{font-size:.58rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:80px;}

/* ── MENÜ BUTONU (profile altında, eski faction-sub-btn'in yerinde) ── */
#faction-btn{
  position:absolute;top:12px;left:12px;z-index:10;
  margin-top:0;
}
#pb-menu-btn{
  width:100%;
  background:var(--surf2);border:1px solid var(--bdr);border-radius:8px;
  padding:.32rem .6rem;display:flex;align-items:center;justify-content:center;gap:.4rem;
  cursor:pointer;transition:background .15s,border-color .2s,color .15s;
  font-family:var(--font-display);font-size:.65rem;font-weight:700;color:var(--muted);
  -webkit-tap-highlight-color:transparent;
}
#pb-menu-btn:hover{background:var(--surf);border-color:var(--accent);color:var(--txt);}
#pb-menu-btn.open{background:rgba(var(--accent-rgb),.16);border-color:rgba(var(--accent-rgb),.5);color:var(--accent-text);}
#pb-menu-btn svg{flex-shrink:0;}

/* Dropdown: pb-menu-btn'e basınca aşağı açılır (profile widget'ı altında) */
#tb-desktop-dropdown{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  width:max-content;
  min-width:100%;
  z-index:200;
  background:rgba(var(--bg-rgb),.98);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(var(--shine-rgb),.08);
  border-radius:14px;
  padding:.6rem;
  box-shadow:0 16px 40px rgba(0,0,0,.55);
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px) scale(.97);
  transform-origin:top left;
  transition:opacity .16s ease, transform .16s cubic-bezier(.4,0,.2,1), visibility .16s;
}
#tb-desktop-dropdown.open{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
}
#tb-desktop-dropdown .tb-btn-group{
  flex-direction:column;
  align-items:stretch;
  gap:.3rem;
}
#tb-desktop-dropdown .tb-btn{
  justify-content:flex-start;
  width:100%;
  white-space:nowrap;
}
#tb-desktop-dropdown #faction-sub-btn{
  background:var(--surf2);color:var(--txt);
}
#tb-desktop-dropdown #faction-sub-btn:hover{background:var(--surf);border-color:var(--accent);}
.fsb-dot{width:7px;height:7px;border-radius:2px;flex-shrink:0;}

/* ── FACTION MODAL ── */
#faction-modal{
  position:fixed;inset:0;z-index:700;
  background:rgba(0,0,0,.75);-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display:none;align-items:center;justify-content:center;
}
#faction-modal.open{display:flex;}
#faction-card{
  background:linear-gradient(160deg,var(--surf) 0%,var(--surf2) 100%);
  border:1px solid var(--bdr2);border-radius:24px;
  width:420px;max-width:calc(100vw - 2rem);max-height:90vh;overflow-y:auto;
  padding:1.5rem;display:flex;flex-direction:column;gap:1.1rem;
  box-shadow:0 32px 80px rgba(0,0,0,.7),0 0 60px rgba(var(--accent-rgb),.08);
  animation:pcard-in .2s ease;
}
#faction-card::-webkit-scrollbar{width:3px;}
#faction-card::-webkit-scrollbar-thumb{background:var(--bdr);border-radius:2px;}
.fc-header{display:flex;justify-content:space-between;align-items:center;}
.fc-header h2{font-size:.95rem;font-weight:800;color:var(--txt);}
.fc-close{background:none;border:none;color:var(--muted);cursor:pointer;font-size:1.1rem;line-height:1;transition:color .15s;}
.fc-close:hover{color:var(--txt);}

/* Faction bilgisi banner */
/* v76: fraksiyon banner'ı — kart hissi (gradyan + derinlik) */
.fc-banner{
  position:relative;border-radius:16px;padding:1.05rem 1.1rem;
  display:flex;align-items:center;gap:1rem;
  border:1px solid var(--bdr);
  background-image:linear-gradient(160deg,rgba(var(--shine-rgb),.05),transparent 60%);
  box-shadow:0 8px 26px rgba(0,0,0,.28),0 0 0 1px rgba(var(--shine-rgb),.02) inset;
  overflow:hidden;
}
.fc-banner-icon{
  width:46px;height:46px;border-radius:10px;display:flex;align-items:center;
  justify-content:center;font-size:1.5rem;flex-shrink:0;
}
.fc-banner-info{display:flex;flex-direction:column;gap:.2rem;flex:1;min-width:0;}
.fc-banner-name{
  font-size:1.08rem;font-weight:900;color:var(--txt);font-family:var(--font-display);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-shadow:0 2px 8px rgba(0,0,0,.3);
}
.fc-banner-tag{font-family:var(--font-mono);font-size:.64rem;color:var(--muted);font-weight:700;}
.fc-banner-role{font-size:.6rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:.18rem .55rem;border-radius:999px;width:fit-content;}

/* Tab sistemi */
.fc-tabs{display:flex;gap:.4rem;border-bottom:1px solid var(--bdr);padding-bottom:.6rem;}
.fc-tab{background:none;border:none;font-family:var(--font-display);font-size:.72rem;font-weight:700;
  color:var(--muted);cursor:pointer;padding:.3rem .6rem;border-radius:6px;transition:all .15s;}
.fc-tab:hover{color:var(--txt);background:var(--surf2);}
.fc-tab.active{color:#fff;background:var(--accent);}
.fc-panel{display:none;flex-direction:column;gap:.7rem;}
.fc-panel.active{display:flex;}

/* Üye listesi (v76: kart satırları) */
.fc-member{
  display:flex;align-items:center;gap:.6rem;padding:.5rem .6rem;border-radius:10px;
  border:1px solid transparent;transition:background .15s,border-color .15s;
}
.fc-member:hover{background:var(--surf2);border-color:var(--bdr2);}
.fc-member-av{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:800;color:#fff;flex-shrink:0;}
.fc-member-name{font-size:.78rem;font-weight:700;color:var(--txt);flex:1;}
.fc-member-role{font-size:.58rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.12rem .4rem;border-radius:3px;}
.fc-member-pix{font-family:var(--font-mono);font-size:.6rem;color:var(--muted);}
.fc-member-kick{background:none;border:none;color:#f04a4a;cursor:pointer;font-size:.7rem;opacity:0;transition:opacity .15s;}
.fc-member:hover .fc-member-kick{opacity:1;}

/* Diplomasi */
.fc-diplo-item{display:flex;align-items:center;gap:.6rem;padding:.45rem .5rem;border-radius:8px;border:1px solid var(--bdr);background:var(--surf2);}
.fc-diplo-icon{font-size:1rem;flex-shrink:0;}
.fc-diplo-name{font-size:.78rem;font-weight:700;color:var(--txt);flex:1;}
.fc-diplo-status{font-size:.6rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:.15rem .5rem;border-radius:4px;}
.fc-diplo-status.ally{background:#00d4a022;color:#00d4a0;border:1px solid #00d4a044;}
.fc-diplo-status.war{background:#f04a4a22;color:#f04a4a;border:1px solid #f04a4a44;}
.fc-diplo-status.nap{background:#38bdf822;color:#38bdf8;border:1px solid #38bdf844;}
.fc-diplo-status.neutral{background:#ffffff11;color:var(--muted);border:1px solid var(--bdr);}
.fc-diplo-actions{display:flex;gap:.3rem;}
.fc-diplo-btn{background:none;border:1px solid var(--bdr);border-radius:5px;color:var(--muted);font-size:.6rem;font-family:var(--font-mono);cursor:pointer;padding:.18rem .45rem;transition:all .15s;}
.fc-diplo-btn:hover{border-color:var(--accent);color:var(--txt);}
.fc-diplo-btn.ally-btn:hover{border-color:#00d4a0;color:#00d4a0;}
.fc-diplo-btn.war-btn:hover{border-color:#f04a4a;color:#f04a4a;}

/* Davet kodu kutusu (v76: kesikli vurgu çerçevesi) */
.fc-invite-box{
  background:rgba(var(--accent-rgb),.06);border:1px dashed rgba(var(--accent-rgb),.45);
  border-radius:12px;padding:.75rem .85rem;display:flex;align-items:center;gap:.6rem;
}
.fc-invite-code{font-family:var(--font-mono);font-size:.92rem;font-weight:700;color:var(--accent2);flex:1;letter-spacing:.14em;}
.fc-copy-btn{background:var(--accent);border:none;border-radius:7px;color:#fff;font-size:.7rem;font-family:var(--font-display);font-weight:700;cursor:pointer;padding:.3rem .7rem;transition:opacity .2s;}
.fc-copy-btn:hover{opacity:.85;}

/* Renk seçici */
.fc-color-grid{display:flex;flex-wrap:wrap;gap:.4rem;}
.fc-color-swatch{width:28px;height:28px;border-radius:6px;cursor:pointer;border:2px solid transparent;transition:transform .15s,border-color .15s;}
.fc-color-swatch:hover{transform:scale(1.15);}
.fc-color-swatch.sel{border-color:#fff;transform:scale(1.18);}

/* Boş durum */
.fc-empty{text-align:center;padding:1.5rem;color:var(--muted);font-size:.78rem;line-height:1.8;}
.fc-empty strong{display:block;font-size:1.4rem;margin-bottom:.3rem;}

/* Faction browse list */
.fc-browse-list::-webkit-scrollbar{width:3px;}
.fc-browse-list::-webkit-scrollbar-thumb{background:var(--bdr);border-radius:2px;}
.fc-browse-row{
  display:flex;align-items:center;gap:.6rem;
  padding:.55rem .65rem;border-radius:12px;
  border:1px solid var(--bdr);background:var(--surf2);
  cursor:pointer;transition:background .15s,border-color .15s,transform .15s,box-shadow .15s;
}
.fc-browse-row:hover{
  background:rgba(var(--surf2-rgb),.9);border-color:var(--accent);
  transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.3);
}

/* Faction logo upload */
.fc-logo-wrap{position:relative;width:54px;height:54px;flex-shrink:0;cursor:pointer;}
.fc-logo-wrap img,.fc-logo-inner{width:54px;height:54px;border-radius:12px;object-fit:cover;}
.fc-logo-inner{display:flex;align-items:center;justify-content:center;font-size:1.6rem;}
.fc-logo-overlay{position:absolute;inset:0;background:rgba(0,0,0,.55);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:.9rem;opacity:0;transition:opacity .2s;}
.fc-logo-wrap:hover .fc-logo-overlay{opacity:1;}

/* Member avatar with photo */
.fc-member-av{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:800;color:#fff;flex-shrink:0;overflow:hidden;border:2px solid transparent;}
.fc-member-av img{width:100%;height:100%;object-fit:cover;}

/* Faction chat */
.fc-chat-msgs{display:flex;flex-direction:column;gap:.5rem;max-height:200px;overflow-y:auto;padding:.4rem 0;}
.fc-chat-msgs::-webkit-scrollbar{width:3px;}
.fc-chat-msgs::-webkit-scrollbar-thumb{background:var(--bdr);border-radius:2px;}
.fc-cmsg{display:flex;align-items:flex-start;gap:.5rem;}
.fc-cmsg.me{flex-direction:row-reverse;}
.fc-cav{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.55rem;font-weight:800;color:#fff;flex-shrink:0;overflow:hidden;border:2px solid transparent;}
.fc-cav img{width:100%;height:100%;object-fit:cover;}
.fc-cbubble{display:flex;flex-direction:column;gap:2px;max-width:72%;}
.fc-cname{font-size:.55rem;color:var(--muted);font-family:var(--font-mono);padding:0 .3rem;}
.fc-me .fc-cname{text-align:right;}
.fc-ctext{background:var(--surf2);border:1px solid var(--bdr);border-radius:8px;padding:.35rem .6rem;font-size:.73rem;line-height:1.4;word-break:break-word;}
.fc-cmsg.me .fc-ctext{background:var(--accent);border-color:var(--accent);color:#fff;}
.fc-chat-footer{display:flex;gap:.4rem;margin-top:.4rem;}
.fc-chat-input{flex:1;background:var(--surf2);border:1px solid var(--bdr);border-radius:8px;padding:.45rem .7rem;color:var(--txt);font-family:var(--font-mono);font-size:.75rem;outline:none;transition:border-color .2s;}
.fc-chat-input:focus{border-color:var(--accent);}
.fc-chat-send{background:var(--accent);border:none;border-radius:8px;color:#fff;font-size:.85rem;cursor:pointer;padding:.4rem .7rem;transition:opacity .2s;}
.fc-chat-send:hover{opacity:.85;}

/* Buton stilleri */
.fc-btn{background:var(--accent);color:#fff;border:none;border-radius:9px;padding:.6rem 1rem;font-family:var(--font-display);font-weight:700;font-size:.8rem;cursor:pointer;transition:opacity .2s;width:100%;}
.fc-btn:hover{opacity:.85;}
.fc-btn.danger{background:#f04a4a;}
.fc-btn.secondary{background:var(--surf2);color:var(--txt);border:1px solid var(--bdr);}
.fc-btn.secondary:hover{border-color:var(--accent);}
.fc-small-btn{background:var(--surf2);border:1px solid var(--bdr);border-radius:7px;color:var(--txt);font-size:.7rem;font-family:var(--font-mono);cursor:pointer;padding:.35rem .7rem;transition:all .15s;}
.fc-small-btn:hover{border-color:var(--accent);color:var(--accent);}

/* ── PROFILE MODAL ── */
#profile-modal{
  position:fixed;inset:0;z-index:600;
  background:rgba(0,0,0,.7);-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display:none;align-items:center;justify-content:center;
}
#profile-modal.open{display:flex;}
#profile-card{
  background:var(--surf);
  border:1px solid var(--bdr2);border-radius:6px;
  width:640px;max-width:calc(100vw - 2rem);max-height:82vh;overflow-y:auto;padding:1.25rem 1.5rem;display:flex;flex-direction:column;gap:1rem;
  box-shadow:0 8px 30px rgba(0,0,0,.5);
  animation:pcard-in .2s ease;
}
#profile-card::-webkit-scrollbar{width:3px;}
#profile-card::-webkit-scrollbar-thumb{background:var(--bdr);border-radius:2px;}
@keyframes pcard-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.pc-header{display:flex;justify-content:space-between;align-items:center;}
.pc-header h2{font-size:.95rem;font-weight:700;color:var(--txt);}
.pc-close{background:none;border:none;color:var(--muted);cursor:pointer;font-size:1.1rem;line-height:1;transition:color .15s;}
.pc-close:hover{color:var(--txt);}

/* Profile tabs */
.pc-tabs{display:flex;gap:.35rem;border-bottom:1px solid var(--bdr);padding-bottom:.6rem;}
.pc-tab{background:none;border:none;font-family:var(--font-display);font-size:.72rem;font-weight:700;
  color:var(--muted);cursor:pointer;padding:.3rem .65rem;border-radius:6px;transition:all .15s;}
.pc-tab:hover{color:var(--txt);background:var(--surf2);}
.pc-tab.active{color:#fff;background:var(--accent);}
.pc-panel{display:none;flex-direction:column;gap:.85rem;}
.pc-panel.active{display:flex;}

/* ── HERO: çerçeve renkli banner + XP halkalı avatar ── */
.pc-hero{display:flex;flex-direction:column;}
.pc-hero-banner{
  height:84px;border-radius:16px;position:relative;overflow:hidden;
  filter:saturate(1.1);
}
.pc-hero-banner::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,6,14,0) 30%,rgba(5,6,14,.55) 100%);
}
.pc-hero-row{
  display:flex;align-items:flex-end;gap:1rem;
  margin-top:-44px;padding:0 .9rem;position:relative;z-index:2;
  flex-wrap:wrap;
}
.pc-av-ringwrap{position:relative;width:104px;height:104px;flex-shrink:0;cursor:pointer;}
.pc-xp-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);z-index:2;pointer-events:none;}
.pc-xp-ring-bg{fill:none;stroke:rgba(var(--shine-rgb),.14);stroke-width:5;}
.pc-xp-ring-fill{
  fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round;
  transition:stroke-dashoffset .9s var(--ease-out),stroke .3s ease;
}
.pc-avatar-ring{
  position:absolute;inset:8px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.8rem;font-weight:800;color:#fff;
  overflow:hidden;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  border:3px solid var(--accent);
  box-shadow:0 6px 20px rgba(0,0,0,.45);
}
.pc-avatar-ring img{width:100%;height:100%;object-fit:cover;}
.pc-av-ringwrap:hover .pc-av-overlay{opacity:1;}
.pc-av-overlay{
  position:absolute;inset:0;background:rgba(0,0,0,.55);
  display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;opacity:0;transition:opacity .2s;border-radius:50%;
}
.pc-level-chip{
  position:absolute;bottom:-2px;right:-4px;z-index:3;
  height:22px;padding:0 .45rem;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:.6rem;font-weight:800;color:#fff;
  background:var(--accent);border:2px solid var(--surf);
  box-shadow:0 2px 8px rgba(0,0,0,.4);white-space:nowrap;
}
.pc-head-col{display:flex;flex-direction:column;gap:.3rem;padding-bottom:.35rem;min-width:0;flex:1;}
#pc-username-display{
  font-family:var(--font-display);font-size:1.05rem;font-weight:800;color:var(--txt);
  letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pc-hero-title{font-size:.64rem;font-weight:800;color:var(--accent-text);text-transform:uppercase;letter-spacing:.09em;}
.pc-hero-actions{display:flex;gap:.4rem;padding-bottom:.4rem;align-items:flex-end;}
.pc-hero-btn{
  display:inline-flex;align-items:center;gap:.35rem;
  background:var(--surf2);border:1px solid var(--bdr);border-radius:9px;
  color:var(--txt);font-family:var(--font-display);font-weight:700;font-size:.66rem;
  padding:.4rem .65rem;cursor:pointer;
  transition:border-color .15s,color .15s,transform .18s var(--ease-spring);
}
.pc-hero-btn:hover{border-color:var(--accent);color:var(--accent-text);transform:translateY(-1px);}
.pc-hero-btn.danger:hover{border-color:var(--red);color:var(--red);}
#pc-photo-input{display:none;}
.pc-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem;}
.pc-stat{
  display:flex;flex-direction:column;align-items:center;gap:.15rem;
  background:var(--surf2);border:1px solid var(--bdr);border-radius:12px;
  padding:.55rem .3rem;transition:border-color .2s,transform .18s var(--ease-spring);
}
.pc-stat:hover{border-color:rgba(var(--accent-rgb),.35);transform:translateY(-1px);}
.pc-stat-val{font-family:var(--font-mono);font-size:1rem;font-weight:700;color:var(--txt);}
.pc-stat-lbl{font-size:.58rem;color:var(--muted);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.06em;}

/* Name edit */
.pc-section{display:flex;flex-direction:column;gap:.4rem;}
.pc-label{font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.pc-input{
  background:var(--surf2);border:1px solid var(--bdr);border-radius:8px;
  padding:.55rem .8rem;color:var(--txt);font-family:var(--font-mono);
  font-size:.82rem;outline:none;width:100%;transition:border-color .2s;
}
.pc-input:focus{border-color:var(--accent);}
.pc-save-name{
  align-self:flex-end;background:var(--accent);color:#fff;border:none;
  border-radius:7px;padding:.35rem .9rem;font-family:var(--font-display);
  font-weight:700;font-size:.78rem;cursor:pointer;transition:opacity .2s;
}
.pc-save-name:hover{opacity:.85;}

/* Frame picker — nadirlik gruplu, her çerçeve isimli */
.pc-frames{display:flex;flex-direction:column;gap:.55rem;margin-bottom:.3rem;}
.pc-frame-group-title{font-size:.56rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:.15rem;}
.pc-frame-row{display:flex;gap:.55rem;flex-wrap:wrap;}
.pc-frame-item{display:flex;flex-direction:column;align-items:center;gap:.25rem;width:54px;cursor:pointer;}
.pc-frame-item.locked{cursor:not-allowed;}
.pc-frame{
  width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.7rem;font-weight:800;color:#fff;
  border:2px solid transparent;transition:transform .15s,border-color .15s;
  flex-shrink:0;position:relative;
}
.pc-frame-item:hover:not(.locked) .pc-frame{transform:scale(1.12);}
.pc-frame.active{border-color:#fff;transform:scale(1.1);}
.pc-frame.locked{filter:grayscale(.85) brightness(.55);}
/* Ortadaki delik: gradyan sadece kenarda halka (çerçeve) olarak görünür */
.pc-frame-hole{
  position:absolute;inset:6px;border-radius:inherit;
  background:var(--surf,#14152a);
  display:flex;align-items:center;justify-content:center;
  font-size:.55rem;font-weight:800;color:var(--muted);
  overflow:hidden;pointer-events:none;
}
.pc-frame-hole img{width:100%;height:100%;object-fit:cover;border-radius:inherit;}
.pc-frame-lock-icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.85rem;background:rgba(0,0,0,.35);border-radius:inherit;z-index:1;}
.pc-frame-name{
  font-size:.52rem;font-weight:700;color:var(--muted);text-align:center;line-height:1.15;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;transition:color .15s;
}
.pc-frame-item:hover .pc-frame-name{color:var(--txt);}
.pc-frame-item.active .pc-frame-name{color:var(--accent-text);}

/* Profil sekmesi: salt okunur biyografi kutusu */
.pc-bio-display{
  font-size:.78rem;color:var(--txt);line-height:1.5;
  background:var(--surf2);border:1px solid var(--bdr);border-radius:10px;
  padding:.6rem .8rem;min-height:2.1rem;
  white-space:pre-wrap;word-break:break-word;
}
.pc-bio-display.empty{color:var(--muted);font-style:italic;}

/* İstatistik kartları */
.pcs-grid{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;}
.pcs-card{
  background:var(--surf2);border:1px solid var(--bdr);border-radius:12px;
  padding:.75rem .85rem;display:flex;flex-direction:column;gap:.2rem;
}
.pcs-card-icon{font-size:1.2rem;margin-bottom:.1rem;}
.pcs-card-val{font-family:var(--font-mono);font-size:1.1rem;font-weight:800;color:var(--txt);}
.pcs-card-lbl{font-size:.6rem;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;}
.pcs-bar-wrap{display:flex;flex-direction:column;gap:.3rem;}
.pcs-bar-row{display:flex;align-items:center;gap:.5rem;}
.pcs-bar-label{font-size:.65rem;color:var(--txt);min-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pcs-bar-track{flex:1;height:6px;background:var(--bdr);border-radius:3px;overflow:hidden;}
.pcs-bar-fill{height:100%;border-radius:3px;transition:width .4s ease;}
.pcs-bar-num{font-family:var(--font-mono);font-size:.6rem;color:var(--muted);min-width:28px;text-align:right;}
.pcs-activity{display:flex;gap:2px;flex-wrap:wrap;}
.pcs-activity-cell{width:10px;height:10px;border-radius:2px;background:var(--surf2);border:1px solid var(--bdr);}
.pcs-activity-cell.active{background:var(--accent);border-color:var(--accent);}
.pcs-activity-cell.mid{background:#4a3e99;border-color:#4a3e99;}

/* Ayarlar */
.pca-row{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--surf2);border:1px solid var(--bdr);border-radius:10px;
  padding:.65rem .85rem;gap:.5rem;
}
.pca-row-info{display:flex;flex-direction:column;gap:.1rem;flex:1;}
.pca-row-title{font-size:.8rem;font-weight:700;color:var(--txt);}
.pca-row-desc{font-size:.62rem;color:var(--muted);}
/* Tema rengi seçici */
.pca-row-theme{flex-direction:column;align-items:stretch;gap:.65rem;}
.pca-theme-swatches{display:flex;flex-wrap:wrap;gap:.55rem;}
.pca-theme-swatch{
  width:32px;height:32px;border-radius:50%;cursor:pointer;flex-shrink:0;padding:0;
  border:2px solid transparent;box-shadow:inset 0 0 0 1px rgba(var(--shine-rgb),.15);
  display:flex;align-items:center;justify-content:center;
  transition:transform .15s,border-color .15s;
}
.pca-theme-swatch:hover{transform:scale(1.12);}
.pca-theme-swatch.active{border-color:#fff;transform:scale(1.15);}
.pca-theme-swatch.active::after{
  content:'✓';color:#fff;font-size:.8rem;font-weight:900;
  text-shadow:0 1px 3px rgba(0,0,0,.7);
}
.pca-theme-custom-wrap{position:relative;width:32px;height:32px;flex-shrink:0;}
.pca-theme-custom-swatch{
  width:100%;height:100%;
  background:conic-gradient(from 0deg,#ff0000,#ffea00,#2bff00,#00fff2,#0033ff,#c800ff,#ff0000);
}
#pca-theme-custom-input{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;cursor:pointer;border:none;padding:0;background:none;
}
/* Toggle switch */
.pca-toggle{position:relative;width:36px;height:20px;flex-shrink:0;}
.pca-toggle input{opacity:0;width:0;height:0;}
.pca-toggle-slider{
  position:absolute;cursor:pointer;inset:0;
  background:#333350;border-radius:20px;transition:.2s;border:1px solid var(--bdr);
}
.pca-toggle-slider:before{
  content:'';position:absolute;width:14px;height:14px;left:2px;bottom:2px;
  background:#fff;border-radius:50%;transition:.2s;
}
.pca-toggle input:checked + .pca-toggle-slider{background:var(--accent);border-color:var(--accent);}
.pca-toggle input:checked + .pca-toggle-slider:before{transform:translateX(16px);}
/* Select dropdown */
.pca-select{
  background:var(--surf2);border:1px solid var(--bdr);border-radius:7px;
  color:var(--txt);font-family:var(--font-mono);font-size:.72rem;
  padding:.3rem .5rem;outline:none;cursor:pointer;transition:border-color .2s;
}
.pca-select:focus{border-color:var(--accent);}
.pca-danger-btn{
  background:#f04a4a22;border:1px solid #f04a4a55;border-radius:8px;
  color:#f04a4a;font-family:var(--font-display);font-weight:700;font-size:.75rem;
  padding:.5rem .9rem;cursor:pointer;transition:all .15s;
}
.pca-danger-btn:hover{background:#f04a4a33;border-color:#f04a4a;}
.pca-section-title{font-size:.65rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-top:.3rem;}
/* Dil seçici (TR/EN toggle) */
.pca-lang-switch{display:flex;background:var(--surf2);border:1px solid var(--bdr);border-radius:8px;padding:2px;gap:2px;flex-shrink:0;}
.pca-lang-btn{
  background:none;border:none;color:var(--muted);font-family:var(--font-mono);
  font-size:.68rem;font-weight:700;padding:.3rem .65rem;border-radius:6px;cursor:pointer;
  transition:all .15s;
}
.pca-lang-btn:hover{color:var(--txt);}
.pca-lang-btn.active{background:var(--accent);color:#fff;}

.zb{width:30px;height:30px;background:var(--surf);border:1px solid var(--bdr);border-radius:6px;color:var(--txt);font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.zb:hover{background:var(--surf2);}
#ptoolbar{
  position:fixed;bottom:16px;
  right:calc(var(--sidebar-w) + 12px);
  background:var(--surf);border:1px solid var(--bdr);border-radius:14px;
  padding:.5rem .7rem;display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;
  z-index:45;max-width:52px;justify-content:center;overflow:hidden;
  transition:right .35s cubic-bezier(.4,0,.2,1), max-width .3s ease, padding .3s ease;
}
#ptoolbar.expanded{max-width:380px;padding:.5rem 1rem;}
#ptoolbar.sidebar-gone{right:12px;}
.tlabel{display:none;}
#palette-toggle{
  width:26px;height:26px;border-radius:50%;cursor:pointer;
  border:2.5px solid #fff;flex-shrink:0;transition:transform .15s;
}
#palette-toggle:hover{transform:scale(1.15);}
#pen-toggle{
  width:26px;height:26px;border-radius:50%;cursor:pointer;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--surf2);border:2px solid var(--bdr);color:var(--txt);
  transition:transform .15s,background .15s,border-color .15s,color .15s;
}
#pen-toggle:hover{transform:scale(1.1);}
#pen-toggle.active{background:var(--accent);border-color:var(--accent);color:#fff;transform:scale(1.05);}
/* Kenarlık + koyu halka: Siyah/Lacivert gibi koyu renkler koyu panelde,
   Beyaz da açık modda kayboluyordu — iki modda da seçilebilir kalsınlar */
.psw{width:24px;height:24px;border-radius:50%;cursor:pointer;border:2px solid rgba(255,255,255,.3);box-shadow:0 0 0 1px rgba(0,0,0,.35);transition:transform .15s,border-color .15s;display:none;}
#ptoolbar.expanded .psw{display:block;}
/* sw0 = Beyaz: v74'ten beri SEÇİLEBİLİR (silgi gibi — yalnız boyalı
   piksellerin üzerine basılabilir, boş zemine atılamaz; game.js korur). */
.psw:hover{transform:scale(1.15);border-color:rgba(255,255,255,.65);}
.psw.sel{border-color:#fff;transform:scale(1.2);}
#tip{position:absolute;background:var(--surf);border:1px solid var(--bdr);border-radius:8px;padding:.45rem .85rem;font-size:.75rem;font-family:var(--font-mono);pointer-events:none;opacity:0;transition:opacity .1s;z-index:20;white-space:nowrap;}
#sidebar{
  position:fixed;top:var(--topbar-h);right:0;bottom:0;width:var(--sidebar-w);
  background:rgba(8,9,22,.97);-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-left:1px solid var(--bdr2);
  overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.85rem;
  z-index:40;
  transform:translateX(0);
  transition:transform .35s cubic-bezier(.4,0,.2,1), width .25s ease;
}
#sidebar.hidden{transform:translateX(100%);}
#sidebar::-webkit-scrollbar{width:3px;}
#sidebar::-webkit-scrollbar-thumb{background:var(--bdr);border-radius:2px;}
.scard{background:var(--surf2);border:1px solid var(--bdr2);border-radius:14px;padding:.9rem;}
.scard h3{font-size:.58rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:.75rem;}
.prow{display:flex;flex-direction:column;gap:.22rem;margin-bottom:.6rem;}
.prow:last-child{margin-bottom:0;}
.prtop{display:flex;justify-content:space-between;align-items:center;font-size:.78rem;}
.prname{display:flex;align-items:center;gap:.4rem;font-weight:600;}
.prd{width:9px;height:9px;border-radius:2px;flex-shrink:0;}
.prpct{font-family:var(--font-mono);font-size:.72rem;color:var(--muted);}
.prbg{height:5px;background:var(--bdr);border-radius:3px;overflow:hidden;}
.prfill{height:100%;border-radius:3px;transition:width .5s ease;}
.rblock{margin-bottom:.55rem;}
.rblock:last-child{margin-bottom:0;}
.rhdr{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;padding:.28rem .5rem;border-radius:4px;margin-bottom:.28rem;display:flex;justify-content:space-between;}
.pi{display:flex;justify-content:space-between;align-items:center;padding:.28rem .4rem;border-bottom:1px solid var(--bdr);font-size:.7rem;}
.pi:last-child{border-bottom:none;}
.pbadge{font-size:.6rem;font-family:var(--font-mono);padding:.1rem .4rem;border-radius:3px;font-weight:700;color:#fff;}
.af{font-size:.68rem;font-family:var(--font-mono);color:var(--muted);padding:.22rem 0;border-bottom:1px solid var(--bdr);line-height:1.5;}
.af:last-child{border-bottom:none;}
.af span{color:var(--txt);}
#pixel-widget{
  position:absolute;
  top:10px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:.6rem;
  background:rgba(8,9,22,.92);-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border:1px solid var(--bdr2);border-radius:14px;
  padding:.35rem .85rem .35rem .45rem;z-index:10;pointer-events:none;
  min-width:0;
}
/* Dairesel doluluk halkası */
#pixel-ring{position:relative;width:46px;height:46px;flex-shrink:0;}
#pixel-ring svg{width:100%;height:100%;transform:rotate(-90deg);display:block;}
.pr-track{fill:none;stroke:rgba(255,255,255,.09);stroke-width:4;}
#pr-fill{fill:none;stroke:url(#pr-grad);stroke-width:4;stroke-linecap:round;transition:stroke-dashoffset .45s ease;filter:drop-shadow(0 0 3px rgba(var(--accent-rgb),.55));}
#pr-fill.low{stroke:#f5a623;filter:drop-shadow(0 0 3px rgba(245,166,35,.55));}
#pr-fill.empty{stroke:#f04a4a;filter:drop-shadow(0 0 3px rgba(240,74,74,.6));}
#pnum{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:.92rem;font-weight:800;color:#e8eaf8;}
#pnum.pop{animation:pnum-pop .35s ease;}
@keyframes pnum-pop{0%{transform:scale(1)}45%{transform:scale(1.3)}100%{transform:scale(1)}}
#pixel-widget-info{display:flex;flex-direction:column;gap:3px;min-width:96px;}
#pixel-count-row{font-family:var(--font-mono);font-size:.72rem;font-weight:700;color:#e8eaf8;}
.pw-label{font-size:.65rem;color:#9a9ab0;font-family:var(--font-mono);}
#cdlabel{font-size:.62rem;color:#f5a623;font-family:var(--font-mono);}
/* Bir sonraki piksel grubuna kalan sürenin ilerleme çubuğu */
#cd-bar-wrap{height:3px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden;}
/* Geçiş süresi JS'ten gelir (--cd-bar-tick) ve tik aralığıyla AYNI olmalı ki
   çubuk gerçek zamanla birebir aksın. SABİT 1sn İDİ; 30 sn'lik dolum için
   yazılmıştı. Dolum 2 sn'ye inince geçiş sürenin YARISI oldu: çubuk hedefe
   varamadan sıfırlanıyor, 2 saniye olduğundan çok hızlı görünüyordu. */
#cd-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:2px;transition:width var(--cd-bar-tick,1s) linear;}
#hover-preview{
  position:absolute;
  border:1px solid rgba(var(--shine-rgb),0.9);
  border-radius:1px;
  pointer-events:none;
  display:none;
  transform:translate(-50%,-50%);
  z-index:15;
  animation:sway 0.8s ease-in-out infinite;
  box-shadow:0 0 4px rgba(0,0,0,0.6);
  min-width:2px;min-height:2px;
}
@keyframes sway{
  0%  { transform:translate(-50%,-50%) rotate(-10deg) scale(0.9); }
  25% { transform:translate(-50%,-60%) rotate(5deg)   scale(1.1); }
  50% { transform:translate(-50%,-50%) rotate(10deg)  scale(0.9); }
  75% { transform:translate(-50%,-40%) rotate(-5deg)  scale(1.1); }
  100%{ transform:translate(-50%,-50%) rotate(-10deg) scale(0.9); }
}

/* ── PIXEL EVENT ── */
#pixel-event-banner{
  position:absolute;top:10px;left:50%;transform:translateX(-50%);
  background:linear-gradient(135deg,#6b2ef5,#e8186a);
  border:1px solid rgba(var(--shine-rgb),0.25);
  border-radius:20px;padding:.28rem 1rem;
  font-family:var(--font-mono);font-size:.68rem;font-weight:700;
  color:#fff;white-space:nowrap;pointer-events:none;z-index:30;
  display:none;align-items:center;gap:.45rem;
  box-shadow:0 0 20px rgba(232,24,106,.4);
  animation:event-pulse 2s ease-in-out infinite;
}
@keyframes event-pulse{
  0%,100%{box-shadow:0 0 12px rgba(232,24,106,.35);}
  50%{box-shadow:0 0 28px rgba(232,24,106,.7);}
}
#pixel-event-banner .ev-dot{
  width:7px;height:7px;border-radius:50%;background:#fff;
  animation:blink-dot 1.2s ease-in-out infinite;
}
#pixel-event-banner.active{display:flex;}

/* ── DUYURU (ANNOUNCEMENT) ŞERİDİ ── */
#announce-banner{
  position:absolute;top:10px;left:50%;
  transform:translateX(-50%) translateY(-140%);
  max-width:min(620px,86vw);
  background:linear-gradient(135deg,#131630 0%,#1c1245 50%,#160d3a 100%);
  border:1px solid rgba(var(--accent2-rgb),0.45);
  border-radius:16px;padding:.55rem 1.1rem;
  font-family:var(--font-display);font-size:.82rem;font-weight:700;
  color:#fff;z-index:60;pointer-events:none;
  display:flex;align-items:center;gap:.6rem;
  box-shadow:0 10px 36px rgba(0,0,0,.5),0 0 24px rgba(var(--accent-rgb),.42);
  opacity:0;transition:transform .45s cubic-bezier(.34,1.4,.64,1),opacity .35s ease;
}
#announce-banner.show{
  transform:translateX(-50%) translateY(0);
  opacity:1;
}
#announce-banner .ab-icon{
  flex-shrink:0;font-size:1rem;
  filter:drop-shadow(0 0 6px rgba(162,155,254,.8));
  animation:ab-ring 1.6s ease-in-out infinite;
}
@keyframes ab-ring{
  0%,100%{transform:rotate(0deg);}
  10%{transform:rotate(-14deg);}
  20%{transform:rotate(12deg);}
  30%{transform:rotate(-8deg);}
  40%{transform:rotate(0deg);}
}
#announce-banner .ab-label{
  font-size:.6rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:#a29bfe;flex-shrink:0;
  border-right:1px solid rgba(var(--shine-rgb),.18);
  padding-right:.6rem;margin-right:.1rem;
}
#announce-banner .ab-text{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  max-width:440px;
}
@media (max-width:640px){
  #announce-banner{ font-size:.74rem;padding:.5rem .85rem;max-width:92vw; }
  #announce-banner .ab-text{ max-width:62vw; }
}

/* Ripple canvas overlay */
#ripple-canvas{
  position:absolute;inset:0;pointer-events:none;z-index:16;
  display:none;
}
#ripple-canvas.active{display:block;}

/* Rollback selection overlay */
#rollback-select-canvas{
  position:absolute;inset:0;pointer-events:none;z-index:17;
  display:none;
}
#rollback-select-canvas.active{display:block;}

/* Şablon overlay canvas (art.js aoRender) — kural yokken sayfa akışında
   ana canvas'ın ALTINA düşüyordu ve overlay haritada hiç görünmüyordu */
#template-canvas{
  position:absolute;inset:0;pointer-events:none;z-index:18;
}

/* Admin event button */
.ptbtn.event-on{border-color:#e8186a;color:#e8186a;background:rgba(232,24,106,.08);}
.ptbtn.event-on:hover{background:rgba(232,24,106,.18);}
#popup{position:fixed;bottom:75px;left:50%;transform:translateX(-50%) translateY(16px);background:var(--surf);border:1px solid var(--accent);border-radius:10px;padding:.55rem 1.1rem;font-size:.8rem;font-family:var(--font-mono);opacity:0;transition:opacity .3s,transform .3s;z-index:300;pointer-events:none;white-space:nowrap;}
#popup.show{opacity:1;transform:translateX(-50%) translateY(0);}
#paint-toolbar{position:absolute;top:12px;right:12px;display:none;flex-direction:column;gap:6px;z-index:10;}
.ptbtn{background:var(--surf);border:1px solid var(--bdr);border-radius:8px;color:var(--txt);font-size:.72rem;font-family:var(--font-mono);cursor:pointer;padding:.4rem .7rem;white-space:nowrap;transition:background .15s;}
.ptbtn:hover{background:var(--surf2);}
.ptbtn.active{border-color:var(--accent);color:var(--accent);}
.ptbtn.danger{border-color:#f04a4a;color:#f04a4a;}
.ptbtn.success{border-color:#00d4a0;color:#00d4a0;}

/* ── SIDEBAR TOGGLE ── */
#sidebar-toggle{
  position:fixed;top:50%;right:0;
  width:22px;height:52px;
  transform:translateY(-50%);
  background:var(--surf);border:1px solid var(--bdr);border-right:none;
  border-radius:8px 0 0 8px;color:var(--muted);font-size:.75rem;
  cursor:pointer;display:none;align-items:center;justify-content:center;
  z-index:50;
  transition:color .2s,background .2s,right .35s cubic-bezier(.4,0,.2,1);
}
#sidebar-toggle:hover{color:var(--txt);background:var(--surf2);}
#main.sidebar-hidden{grid-template-columns:1fr 0px;}
#main.sidebar-hidden #sidebar{
  transform:translateX(100%);
  opacity:0;
  pointer-events:none;
}
#sidebar-old{
  transition:transform .35s cubic-bezier(.4,0,.2,1), opacity .3s ease;
  transform:translateX(0);
  opacity:1;
}

/* ── CHAT ── */
#chat-btn{
  position:fixed;bottom:20px;left:20px;
  width:44px;height:44px;border-radius:50%;
  background:var(--accent);border:none;color:#fff;font-size:1.1rem;
  cursor:pointer;z-index:200;display:none;
  box-shadow:0 0 0 0 rgba(var(--accent-rgb),.55);
  animation:pulse-chat 2.5s infinite;
  align-items:center;justify-content:center;
  transition:transform .15s;
}
#chat-btn:hover{transform:scale(1.1);}
@keyframes pulse-chat{
  0%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.55);}
  70%{box-shadow:0 0 0 10px rgba(var(--accent-rgb),0);}
  100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),0);}
}
#chat-panel{
  position:fixed;bottom:74px;left:16px;
  width:320px;height:400px;
  background:var(--surf);border:1px solid var(--bdr);
  border-radius:14px;display:none;flex-direction:column;
  z-index:200;overflow:hidden;
  box-shadow:0 8px 32px rgba(0,0,0,.5);
}
#chat-panel.open{display:flex;}
#chat-header{
  flex-shrink:0;padding:.65rem 1rem;
  background:var(--surf2);border-bottom:1px solid var(--bdr);
  display:flex;align-items:center;gap:.55rem;
}
#chat-header .ch-dot{
  width:8px;height:8px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 6px var(--accent);
  animation:blink-dot 1.8s ease-in-out infinite;
}
@keyframes blink-dot{0%,100%{opacity:1}50%{opacity:.3}}
#chat-header span{font-size:.78rem;font-weight:700;color:var(--txt);flex:1;}
#chat-header .ch-close{
  background:none;border:none;color:var(--muted);cursor:pointer;
  font-size:.9rem;padding:0;line-height:1;
}
#chat-header .ch-close:hover{color:var(--txt);}
#chat-messages{
  flex:1;overflow-y:auto;padding:.75rem;display:flex;flex-direction:column;gap:.5rem;
}
#chat-messages::-webkit-scrollbar{width:3px;}
#chat-messages::-webkit-scrollbar-thumb{background:var(--bdr);border-radius:2px;}
.cm{max-width:88%;font-size:.72rem;line-height:1.55;font-family:var(--font-mono);display:flex;gap:.5rem;align-items:flex-end;}
.cm.user{flex-direction:row-reverse;align-self:flex-end;}
.cm.other{flex-direction:row;align-self:flex-start;}
.cm-av{width:24px;height:24px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:800;color:#fff;overflow:hidden;border:2px solid transparent;}
.cm-av img{width:100%;height:100%;object-fit:cover;}
/* ── SÜSLEMELİ ÇERÇEVELER (balkabağı, peluş ayı...) ──
   Avatar overflow:hidden kırpmasın diye .pf-decor-wrap sarmalayıcısına
   alınır; emoji süsler (.pfdec) sarmalayıcıdan taşarak çerçeve hissi verir
   (bkz. profile.js pfFrameApplyDecor). */
.pf-decor-wrap{position:relative;display:inline-flex;flex-shrink:0;line-height:0;}
/* KONUM ARTIK CSS'TE DEĞİL: süsün yeri (t/hs/ha/fc/tl/br) profile.js
   _PF_DECOR_POS'ta AVATARIN kutusuna göre piksel olarak hesaplanıp inline
   yazılır. Eskiden top/left sarmalayıcıya göreydi; avatarın sarmalayıcıyla
   aynı kutuda olmadığı yerlerde (hero'da inset:8px, oyuncu kartında
   margin-top:-52px) taç/kulaklık/halka kayıyordu — aynı çerçeve sohbette
   başka, profilde başka görünüyordu. */
.pfdec{
  position:absolute;pointer-events:none;line-height:1;z-index:3;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.55));
}
/* Piksel-art süsler (v70, pixel-art.js): keskin pikselli SVG sprite'lar */
.pfdec-px{image-rendering:pixelated;height:auto;user-select:none;}
/* ── ÖZEL ONAY PENCERESİ (v71, confirm.js) — tarayıcı confirm() yerine ── */
.pfc-overlay{
  position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;
  background:rgba(3,4,10,.62);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;transition:opacity .13s ease;padding:1rem;
}
.pfc-overlay.open{opacity:1;}
.pfc-overlay.closing{opacity:0;}
.pfc-card{
  background:linear-gradient(180deg,var(--surf2),var(--surf));
  border:1px solid var(--bdr2);border-radius:16px;
  padding:1.15rem 1.25rem 1.05rem;max-width:340px;width:100%;
  box-shadow:0 18px 50px rgba(0,0,0,.55),0 0 0 1px rgba(var(--shine-rgb),.03) inset;
  transform:translateY(10px) scale(.97);transition:transform .16s var(--ease-spring);
}
.pfc-overlay.open .pfc-card{transform:translateY(0) scale(1);}
.pfc-title{
  font-family:var(--font-display);font-weight:800;font-size:.95rem;color:var(--txt);
  margin-bottom:.5rem;display:flex;align-items:center;gap:.45rem;
}
.pfc-title::before{content:'';width:8px;height:8px;border-radius:2px;background:var(--accent);flex-shrink:0;}
.pfc-card.danger .pfc-title::before{background:#f04a4a;}
.pfc-msg{font-size:.82rem;line-height:1.5;color:var(--txt);opacity:.85;margin-bottom:1rem;word-break:break-word;}
/* Görsel önizleme (v4.4): profil fotoğrafı / banner görseli onaydan önce
   ne olduğu görünsün diye kartın içinde gösterilir. */
.pfc-preview{display:flex;justify-content:center;margin:.2rem 0 .85rem;}
.pfc-preview img{display:block;background:var(--surf2);}
.pfc-preview.round img{
  width:104px;height:104px;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 3px var(--surf),0 0 0 5px var(--accent),0 8px 22px rgba(0,0,0,.45);
}
.pfc-preview.wide img{
  width:100%;height:104px;border-radius:var(--pf-r2,12px);object-fit:cover;
  border:1px solid var(--bdr2);box-shadow:0 8px 22px rgba(0,0,0,.4);
}
.pfc-btns{display:flex;gap:.55rem;justify-content:flex-end;}
.pfc-btn{
  border-radius:10px;padding:.55rem 1.05rem;font-family:var(--font-display);
  font-weight:800;font-size:.8rem;cursor:pointer;transition:all .14s ease;border:1px solid var(--bdr2);
}
.pfc-no{background:var(--surf2);color:var(--muted);}
.pfc-no:hover{color:var(--txt);border-color:var(--accent);}
.pfc-yes{
  background:linear-gradient(135deg,var(--accent),var(--accent-mid));color:#fff;border-color:transparent;
  box-shadow:0 4px 14px rgba(var(--accent-rgb),.35);
}
.pfc-yes:hover{filter:brightness(1.12);transform:translateY(-1px);}
.pfc-yes.danger{background:linear-gradient(135deg,#c22929,#f04a4a);box-shadow:0 4px 14px rgba(240,74,74,.3);}
/* Tam halka süsleme: avatarın çevresini saran (istenirse dönen) emoji
   dizisi — alev halkası, defne yaprağı, kar tanesi gibi "gerçek çerçeve" */
/* Kutu ölçüleri JS'te inline verilir (avatarın kutusu) — inset:0 DEĞİL */
.pfdec-ringwrap{position:absolute;pointer-events:none;z-index:3;}
.pfdec-ringwrap.spin{animation:pfdecSpin 16s linear infinite;}
@keyframes pfdecSpin{to{transform:rotate(360deg)}}
.pfdec-ri{position:absolute;transform:translate(-50%,-50%);line-height:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));}
@media (prefers-reduced-motion: reduce){.pfdec-ringwrap.spin{animation:none;}}
.cm-bubble{display:flex;flex-direction:column;gap:.15rem;max-width:100%;}
.cm-name{font-size:.58rem;color:var(--muted);font-weight:700;padding:0 .3rem;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cm.user .cm-name{text-align:right;}
.cm-text{word-break:break-word;padding:.4rem .7rem;border-radius:10px;}
.cm.user .cm-text{background:var(--accent);color:#fff;border-radius:10px 10px 2px 10px;}
.cm.other .cm-text{background:var(--surf2);border:1px solid var(--bdr);color:var(--txt);border-radius:10px 10px 10px 2px;}
.cm-time{font-size:.55rem;color:var(--muted);opacity:.65;padding:0 .3rem;}
.cm.user .cm-time{text-align:right;}
#chat-footer{
  flex-shrink:0;padding:.6rem;border-top:1px solid var(--bdr);
  display:flex;gap:.5rem;background:var(--surf2);
}
#chat-input{
  flex:1;background:var(--surf);border:1px solid var(--bdr);
  border-radius:8px;padding:.45rem .7rem;
  color:var(--txt);font-family:var(--font-mono);font-size:.72rem;
  outline:none;transition:border-color .2s;
}
#chat-input:focus{border-color:var(--accent);}
#chat-send{
  background:var(--accent);border:none;border-radius:8px;
  color:#fff;padding:.4rem .75rem;cursor:pointer;
  font-size:.8rem;transition:opacity .2s;
}
#chat-send:hover{opacity:.85;}
#chat-send:disabled{opacity:.4;cursor:default;}
/* ── SOHBET GÖRSELİ (v76, chat-img.js) ── */
#chat-img-btn{
  background:var(--surf);border:1px solid var(--bdr);border-radius:8px;
  color:var(--muted);padding:.4rem .55rem;cursor:pointer;
  display:flex;align-items:center;transition:all .15s;
}
#chat-img-btn:hover{color:var(--accent2);border-color:var(--accent);}
#chat-img-btn svg{width:.95rem;height:.95rem;}
.cm-img{
  max-width:180px;max-height:180px;border-radius:10px;display:block;
  cursor:zoom-in;border:1px solid var(--bdr2);
}
.ci-viewer{
  position:fixed;inset:0;z-index:100001;background:rgba(3,4,10,.85);
  display:flex;align-items:center;justify-content:center;cursor:zoom-out;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.ci-viewer img{
  max-width:92vw;max-height:88vh;border-radius:12px;
  box-shadow:0 24px 80px rgba(0,0,0,.7);image-rendering:auto;
}

/* Chat channel tabs */
#chat-tabs{display:flex;gap:.3rem;flex:1;}
.ch-tab{
  position:relative;
  background:none;border:1px solid transparent;border-radius:6px;
  color:var(--muted);font-family:var(--font-display);font-size:.68rem;font-weight:700;
  cursor:pointer;padding:.2rem .55rem;transition:all .15s;white-space:nowrap;
}
.ch-tab:hover{color:var(--txt);background:var(--surf);}
.ch-tab.active{color:#fff;background:var(--accent);border-color:var(--accent);}
.ch-tab.faction-active{color:#f5a623;background:#f5a62322;border-color:#f5a62355;}
/* Unread message dots */
.ch-badge{
  display:none;position:absolute;top:-3px;right:-3px;
  background:var(--accent);border-radius:50%;width:8px;height:8px;
  box-shadow:0 0 0 2px var(--surf);
}
#chat-faction-badge{background:#f5a623;}
#chat-btn-badge{top:0;right:0;width:10px;height:10px;background:#ff4757;}

/* ── XP / LEVEL SİSTEMİ ── */
/* Level-up notification */
@keyframes levelup-slide{
  0%{opacity:0;transform:translateX(-50%) translateY(-40px) scale(.85);}
  12%{opacity:1;transform:translateX(-50%) translateY(0) scale(1.06);}
  18%{transform:translateX(-50%) translateY(0) scale(1);}
  75%{opacity:1;transform:translateX(-50%) translateY(0) scale(1);}
  100%{opacity:0;transform:translateX(-50%) translateY(-20px) scale(.9);}
}
#levelup-notif{
  position:fixed;top:72px;left:50%;transform:translateX(-50%);
  z-index:9999;pointer-events:none;
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent2) 50%,#f5a623 100%);
  border-radius:18px;padding:1px;
  display:none;
  box-shadow:0 0 40px rgba(var(--accent-rgb),.75);
}
#levelup-notif.show{
  display:block;
  animation:levelup-slide 4s ease forwards;
}
#levelup-inner{
  background:#080918;border-radius:17px;
  padding:.9rem 1.5rem;display:flex;flex-direction:column;align-items:center;gap:.35rem;
}
#levelup-label{font-size:.65rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text);}
#levelup-lv{font-size:2rem;font-weight:800;color:var(--gold);line-height:1.1;}
#levelup-title{font-size:.78rem;color:var(--txt);font-weight:600;}
#levelup-reward{font-size:.68rem;color:#f5a623;font-weight:700;}

/* XP bar in profile button */
.pb-xp-bar-wrap{width:100%;height:3px;background:var(--bdr);border-radius:2px;margin-top:2px;}
.pb-xp-bar{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:2px;transition:width .4s ease;}
.pb-lv-badge{
  font-family:var(--font-mono);font-size:.55rem;font-weight:800;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff;padding:.1rem .35rem;border-radius:4px;
  display:inline-block;
}

/* ── GÜNLÜK SERİ (STREAK) BİLDİRİMİ ── */
@keyframes streak-slide{
  0%{opacity:0;transform:translateX(-50%) translateY(-40px) scale(.85);}
  12%{opacity:1;transform:translateX(-50%) translateY(0) scale(1.06);}
  18%{transform:translateX(-50%) translateY(0) scale(1);}
  75%{opacity:1;transform:translateX(-50%) translateY(0) scale(1);}
  100%{opacity:0;transform:translateX(-50%) translateY(-20px) scale(.9);}
}
#streak-notif{
  position:fixed;top:72px;left:50%;transform:translateX(-50%);
  z-index:9999;pointer-events:none;
  background:linear-gradient(135deg,#ffc53d 0%,#f5a623 30%,#f04a4a 70%,#e8186a 100%);
  border-radius:18px;padding:1px;
  display:none;
  box-shadow:0 0 40px rgba(240,74,74,.6);
}
#streak-notif.show{
  display:block;
  animation:streak-slide 4s ease forwards;
}
#streak-inner{
  background:#080918;border-radius:17px;
  padding:.9rem 1.5rem;display:flex;flex-direction:column;align-items:center;gap:.35rem;
}
#streak-label{font-size:.65rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#ffc53d;}
#streak-days{font-size:2rem;font-weight:800;color:var(--gold);line-height:1.1;}
#streak-sub{font-size:.78rem;color:var(--txt);font-weight:600;}
#streak-reward{font-size:.68rem;color:#ffc53d;font-weight:700;}

/* Profil butonunda mini streak rozeti */
.pb-streak-badge{
  font-family:var(--font-mono);font-size:.55rem;font-weight:800;
  background:linear-gradient(135deg,#f5a623,#f04a4a);
  color:#fff;padding:.1rem .35rem;border-radius:4px;
  display:inline-flex;align-items:center;gap:.15rem;
}

/* Profil seviye kartı */
#pc-level-card{
  background:linear-gradient(135deg,rgba(var(--accent-rgb),.14),rgba(var(--accent2-rgb),.08));
  border:1px solid rgba(var(--accent-rgb),.40);border-radius:14px;
  padding:.9rem 1rem;display:flex;flex-direction:column;gap:.6rem;
}
.pc-lv-header{display:flex;align-items:center;justify-content:space-between;}
.pc-lv-num{
  font-size:1.8rem;font-weight:800;
  color:var(--accent-text);line-height:1;
}
.pc-lv-title{font-size:.68rem;color:var(--muted);font-weight:700;}
.pc-lv-xp{font-family:var(--font-mono);font-size:.72rem;color:var(--txt);}
.pc-lv-bar-wrap{width:100%;height:8px;background:var(--bdr);border-radius:4px;overflow:hidden;}
.pc-lv-bar{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:4px;transition:width .5s ease;}
.pc-lv-legend{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:.6rem;color:var(--muted);}
.pc-lv-rewards{display:flex;flex-direction:column;gap:.35rem;}
.pc-reward-item{
  display:flex;align-items:center;gap:.55rem;
  background:var(--surf2);border:1px solid var(--bdr);border-radius:8px;
  padding:.4rem .6rem;
}
.pc-reward-item.earned{border-color:rgba(var(--accent-rgb),.45);background:rgba(var(--accent-rgb),.10);}
.pc-reward-lv{font-family:var(--font-mono);font-size:.6rem;font-weight:800;color:var(--accent);min-width:30px;}
.pc-reward-icon{font-size:.9rem;}
.pc-reward-name{font-size:.7rem;color:var(--txt);flex:1;}
.pc-reward-check{font-size:.75rem;color:#00d4a0;}

/* ── Profil modali: Günlük Seri kartı ── */
#pc-streak-card{
  background:linear-gradient(135deg,rgba(245,166,35,.12),rgba(240,74,74,.08));
  border:1px solid rgba(245,166,35,.35);border-radius:14px;
  padding:.9rem 1rem;display:flex;flex-direction:column;gap:.6rem;
}
.pc-streak-header{display:flex;align-items:center;justify-content:space-between;}
.pc-streak-num{
  font-size:1.8rem;font-weight:800;
  color:var(--gold);line-height:1;
}
.pc-streak-title{font-size:.68rem;color:var(--muted);font-weight:700;}
.pc-streak-best{font-family:var(--font-mono);font-size:.7rem;color:var(--txt);}
.pc-streak-week{display:flex;gap:.3rem;justify-content:space-between;}
.pc-streak-day{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:.25rem;
  background:var(--surf2);border:1px solid var(--bdr);border-radius:8px;
  padding:.4rem .2rem;font-size:.62rem;
}
.pc-streak-day.done{border-color:rgba(245,166,35,.5);background:rgba(245,166,35,.1);}
.pc-streak-day.today{border-color:#f5a623;box-shadow:0 0 0 2px rgba(245,166,35,.25);}
.pc-streak-day-icon{font-size:.85rem;}
.pc-streak-day-label{color:var(--muted);font-weight:700;}
.pc-streak-day.done .pc-streak-day-label{color:#ffc53d;}
.pc-streak-note{font-size:.64rem;color:var(--muted);line-height:1.5;}

/* 30 günlük streak takvimi (genişletilmiş geçmiş görünümü) */
.pc-streak-cal-head{display:flex;align-items:center;justify-content:space-between;margin-top:1rem;margin-bottom:.5rem;}
.pc-streak-cal-title{font-size:.62rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.pc-streak-cal-range{font-size:.6rem;color:var(--muted);font-family:var(--font-mono);}
.pc-streak-cal-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:.3rem;}
.pc-streak-cal-cell{
  aspect-ratio:1;border-radius:5px;background:var(--surf2);border:1px solid var(--bdr);
  display:flex;align-items:center;justify-content:center;font-size:.55rem;color:var(--muted);
  position:relative;cursor:default;
}
.pc-streak-cal-cell.hit{background:rgba(245,166,35,.18);border-color:rgba(245,166,35,.55);color:#ffc53d;font-weight:700;}
.pc-streak-cal-cell.today{box-shadow:0 0 0 2px #f5a623;}
.pc-streak-cal-cell.future{opacity:.35;}
.pc-streak-cal-legend{display:flex;align-items:center;gap:.5rem;margin-top:.5rem;font-size:.58rem;color:var(--muted);}
.pc-streak-cal-swatch{width:9px;height:9px;border-radius:3px;display:inline-block;vertical-align:middle;margin-right:.25rem;}

/* En Yüksek Seviyeler sıralama */
.lvl-rank-row{
  display:flex;align-items:center;gap:.55rem;
  padding:.4rem .45rem;border-radius:8px;
  transition:background .15s;border-bottom:1px solid var(--bdr);
}
.lvl-rank-row:last-child{border-bottom:none;}
.lvl-rank-row:hover{background:var(--surf);}
.lvl-rank-pos{
  font-family:var(--font-mono);font-size:.65rem;font-weight:700;
  color:var(--muted);min-width:20px;text-align:right;
}
.lvl-rank-av{
  width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.6rem;font-weight:800;color:#fff;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
}
.lvl-rank-name{font-size:.72rem;font-weight:700;color:var(--txt);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lvl-rank-lv{
  font-family:var(--font-mono);font-size:.62rem;font-weight:800;
  color:var(--accent-text);
}
.lvl-rank-xp{font-family:var(--font-mono);font-size:.58rem;color:var(--muted);}