/* ── Yetenek Ağacı Paneli — quest panelindeki bottom-sheet/modal deseniyle aynı ── */
#skill-panel{
  position:fixed;inset:0;z-index:800;
  background:rgba(0,0,0,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  display:none;align-items:flex-end;justify-content:center;
}
#skill-panel.open{display:flex;}
#skill-card{
  background:linear-gradient(160deg,var(--surf) 0%,var(--surf2) 100%);
  border:1px solid var(--bdr2);
  border-radius:22px 22px 0 0;
  width:100%;max-width:560px;
  max-height:88vh;overflow-y:auto;
  padding:1.2rem 1.1rem 1.6rem;
  display:flex;flex-direction:column;gap:.85rem;
  box-shadow:0 -8px 48px rgba(0,0,0,.55), 0 0 40px rgba(155,127,255,.08);
  transform:translateY(100%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
#skill-panel.open #skill-card{transform:translateY(0);}
#skill-card::-webkit-scrollbar{width:3px;}
#skill-card::-webkit-scrollbar-thumb{background:var(--bdr);border-radius:2px;}
#skill-card::before{
  content:'';display:block;width:36px;height:3px;
  background:rgba(255,255,255,.18);border-radius:2px;
  margin:0 auto .3rem;flex-shrink:0;
}
@media (min-width:700px){
  #skill-panel{align-items:center;}
  #skill-card{border-radius:22px;}
}

/* SP bakiye çubuğu.
   TELEFONDA ÇAKIŞIYORDU: tek satırda "★ 40 Yetenek Puanı ◆ 1200 Bits" +
   sağda ipucu sığmıyor; "Yetenek Puanı" iki satıra taşıp ipucunun üstüne
   biniyordu. Çubuk artık sarabiliyor ve ipucu dar ekranda tam satır alıyor. */
.sk-sp-bar{
  display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;
  background:rgba(155,127,255,.10);border:1px solid rgba(155,127,255,.35);
  border-radius:12px;padding:.6rem .8rem;
  /* #skill-card dikey bir flex kabı: çocukları varsayılan olarak KÜÇÜLÜR.
     İçerik karttan uzun olduğunda (telefon) bu çubuk eziliyor ve
     overflow:hidden yüzünden yazılar kırpılıyordu. */
  flex-shrink:0;
}
.sk-sp-star{font-size:1.1rem;flex-shrink:0;}
#sk-sp-val{font-family:var(--font-mono);font-size:1.15rem;font-weight:800;color:#9b7fff;}
.sk-sp-lbl{font-size:.72rem;font-weight:700;color:var(--txt);white-space:nowrap;}
.sk-sp-hint{margin-left:auto;font-size:.58rem;color:var(--muted);text-align:right;}
@media (max-width:560px){
  .sk-sp-hint{margin-left:0;flex:1 0 100%;text-align:left;opacity:.85;}
}

/* Aktif efekt özeti */
#skill-effects{display:flex;flex-wrap:wrap;gap:.4rem;flex-shrink:0;}
.sk-eff{
  font-family:var(--font-mono);font-size:.62rem;color:var(--muted);
  background:var(--surf2);border:1px solid var(--bdr);border-radius:8px;
  padding:.28rem .55rem;
}

/* ── AĞAÇ GÖRÜNÜMÜ ──
   Dal merkezi (hub) üstte; düğümler önkoşul derinliğine göre
   katmanlarda daireler halinde; SVG bezier "ip"ler düğümleri bağlar. */


/* Düğüm */
.sk-st{cursor:pointer;user-select:none;}
.sk-tn-circle{
  position:relative;width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--surf2);border:2px solid var(--bdr2);
  transition:border-color .15s, box-shadow .15s, transform .12s;
}
.sk-st:hover .sk-tn-circle{transform:translateY(-2px);}
/* Açılabilir + parası yeten: vurgulu, hafif nabız */
.sk-st.ready .sk-tn-circle{
  border-color:var(--accent);
  animation:skPulse 1.9s ease-in-out infinite;
}
@keyframes skPulse{
  0%,100%{box-shadow:0 0 0 3px rgba(var(--accent-rgb),.16);}
  50%{box-shadow:0 0 0 7px rgba(var(--accent-rgb),.28);}
}
/* Açılabilir ama SP/Bits yetmiyor */
.sk-st.avail .sk-tn-circle{border-color:var(--bdr2);}
/* Alınmış */
.sk-st.owned .sk-tn-circle{border-color:#00d4a0;background:rgba(0,212,160,.10);}
/* Önkoşulu eksik: soluk + kesikli çerçeve */
.sk-st.gated{cursor:not-allowed;}
.sk-st.gated .sk-tn-circle{opacity:.45;border-style:dashed;}
.sk-st.gated .sk-st-name,.sk-st.gated .sk-st-chip{opacity:.55;}

.sk-tn-ic{color:var(--txt);line-height:1;display:flex;}
.sk-tn-ic svg{width:22px;height:22px;}
.sk-tn-inf{font-size:1.35rem;font-weight:800;color:#f5a623;}
.sk-tn-colors{display:grid;grid-template-columns:repeat(2,15px);gap:3px;}
.sk-tn-colors i{
  width:15px;height:15px;border-radius:4px;display:inline-block;
  border:1px solid rgba(0,0,0,.35);
}
/* Daire üstü rozetler: ✓ / kilit / tekrar sayısı */
.sk-tn-badge{
  position:absolute;right:-5px;bottom:-5px;
  min-width:20px;height:20px;border-radius:999px;padding:0 3px;
  display:flex;align-items:center;justify-content:center;
  font-size:.58rem;font-weight:800;border:2px solid var(--surf);
}
.sk-tn-badge.check{background:#00d4a0;color:#fff;}
.sk-tn-badge.lock{background:var(--surf3);color:var(--muted);}
.sk-tn-badge.lock svg{width:10px;height:10px;}
.sk-tn-badge.reps{background:var(--accent);color:#fff;font-family:var(--font-mono);}

.sk-st-name{font-size:.62rem;font-weight:700;color:var(--txt);line-height:1.25;}
/* Düğümün somut etkisi (ör. "+7 depo", "3 px/tık") — görünür bilgi */
.sk-st-fx{
  font-size:.55rem;font-weight:700;color:#9b7fff;line-height:1.2;
  font-family:var(--font-mono);
}
.sk-st.gated .sk-st-fx{opacity:.55;}
/* Bilgi kartı satın alma butonu */
.sk-info-btn{
  width:100%;border:1px solid var(--bdr2);border-radius:10px;padding:.6rem;
  font-family:var(--font-display);font-weight:800;font-size:.8rem;
  cursor:pointer;background:var(--surf3);color:var(--txt);
}
.sk-info-btn.buy{
  background:linear-gradient(135deg,#5b3a94,#9b7fff);color:#fff;border:none;
}
.sk-info-btn.buy.poor{opacity:.55;}
.sk-st-chip{
  font-family:var(--font-mono);font-size:.6rem;font-weight:800;
  color:var(--accent-text,var(--accent));
  background:rgba(var(--accent-rgb),.12);
  border:1px solid rgba(var(--accent-rgb),.4);
  border-radius:999px;padding:.12rem .5rem;
  display:inline-flex;align-items:center;gap:.2rem;
}
.sk-st-chip.poor{opacity:.5;}
.sk-st-chip.bits{color:var(--gold);background:rgba(201,146,42,.12);border-color:rgba(201,146,42,.4);}
.sk-st-chip.done{color:#00d4a0;background:rgba(0,212,160,.1);border-color:rgba(0,212,160,.4);}
.sk-reps{font-family:var(--font-mono);font-size:.62rem;color:#9b7fff;}


/* ── Kilitli palet renkleri (Sanatçı dalı) ── */
.psw.sk-locked{
  filter:grayscale(.85) brightness(.55);
  cursor:not-allowed;position:relative;
}
.psw.sk-locked::after{
  content:'🔒';position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:.6rem;opacity:.9;
}

/* ── Fırça boyutu butonu (ptoolbar) ── */
#brush-size-btn{
  width:26px;height:26px;border-radius:8px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:.8rem;background:var(--surf2);border:1px solid var(--bdr);
  transition:border-color .15s,background .15s;flex-shrink:0;
}
#brush-size-btn.active{border-color:#9b7fff;background:rgba(155,127,255,.18);}

/* ════════════════════════════════════════════════════════════════
   YETENEK AĞACI v2 — "Takımyıldız" yükseltmesi
   Düz gri daireler → derinlikli, ışıyan yetenek küreleri; kesikli
   griler → parlayan enerji hatları. Boyutlar KORUNUR (SVG çizgi
   ölçümü node konumlarına bağlı); yalnız renk/gölge/gradyan/animasyon.
   Sınıflara özeldir (quest paneli etkilenmez).
════════════════════════════════════════════════════════════════ */

/* ── Efekt çipleri: hafif gradyan + accent ikon ── */
.sk-eff{
  background:linear-gradient(160deg, rgba(var(--surf3-rgb),.9) 0%, rgba(var(--surf2-rgb),.9) 100%);
  box-shadow:inset 0 1px 0 rgba(var(--shine-rgb),.06);
  color:var(--txt);
}
.sk-eff svg{color:var(--accent-text,var(--accent));vertical-align:-.12em;}

/* ── Dal merkezi (hub): küçük bir arma ── */

/* ── Bağlantı hatları: parlayan enerji ── */

/* ── Yetenek küreleri: derinlikli çekirdek + hâle ── */
.sk-tn-circle{
  background:radial-gradient(circle at 50% 36%, var(--surf3) 0%, var(--surf2) 72%);
  border:2px solid var(--bdr2);
  box-shadow:
    inset 0 1px 0 rgba(var(--shine-rgb),.12),
    inset 0 -7px 12px -9px rgba(0,0,0,.7),
    0 4px 12px rgba(0,0,0,.42);
}
.sk-st:hover .sk-tn-circle{transform:translateY(-3px) scale(1.04);}

/* Alınmış: zümrüt çekirdek + yeşil hâle */
.sk-st.owned .sk-tn-circle{
  border-color:#00d4a0;
  background:radial-gradient(circle at 50% 36%, rgba(0,212,160,.4) 0%, rgba(0,120,92,.16) 72%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 0 0 1px rgba(0,212,160,.35),
    0 0 20px rgba(0,212,160,.35),
    0 4px 12px rgba(0,0,0,.4);
}
.sk-st.owned .sk-tn-ic{color:#00d4a0;}

/* Açılabilir + parası yeten: accent çekirdek + nabızlı hâle */
.sk-st.ready .sk-tn-circle{
  border-color:var(--accent);
  background:radial-gradient(circle at 50% 36%, rgba(var(--accent-rgb),.34) 0%, var(--surf2) 74%);
  animation:skPulse 2.1s ease-in-out infinite;
}
.sk-st.ready .sk-tn-ic{color:var(--accent-text,var(--accent));}
@keyframes skPulse{
  0%,100%{box-shadow:inset 0 1px 0 rgba(var(--shine-rgb),.12), 0 0 0 3px rgba(var(--accent-rgb),.16), 0 0 14px rgba(var(--accent-rgb),.30);}
  50%    {box-shadow:inset 0 1px 0 rgba(var(--shine-rgb),.12), 0 0 0 6px rgba(var(--accent-rgb),.10), 0 0 28px rgba(var(--accent-rgb),.52);}
}

/* Açılabilir ama SP/Bits yetmiyor: nötr, hover'da accent ipucu */
.sk-st.avail .sk-tn-circle{border-color:var(--bdr2);}
.sk-st.avail:hover .sk-tn-circle{
  border-color:rgba(var(--accent-rgb),.6);
  box-shadow:
    inset 0 1px 0 rgba(var(--shine-rgb),.12),
    0 0 16px rgba(var(--accent-rgb),.24),
    0 4px 12px rgba(0,0,0,.42);
}

/* Kilitli: soluk, kesik çerçeve (mevcut) — biraz daha okunur */
.sk-st.gated .sk-tn-circle{opacity:.42;border-style:dashed;background:var(--surf2);}

/* ∞ tekrar düğümü ikonu daha canlı */
.sk-tn-inf{text-shadow:0 0 12px rgba(245,166,35,.5);}

/* Rozetler: ✓/kilit/tekrar — hafif gölge */
.sk-tn-badge{box-shadow:0 2px 6px rgba(0,0,0,.45);}
.sk-tn-badge.check{box-shadow:0 0 10px rgba(0,212,160,.5), 0 2px 6px rgba(0,0,0,.45);}

/* Maliyet çipleri: hafif gradyan derinlik */
.sk-st-chip{box-shadow:inset 0 1px 0 rgba(var(--shine-rgb),.08);}

/* Purple sabitleri accent'e getir (tema rengine uysun) */
#sk-sp-val{color:var(--accent-text,var(--accent));}
.sk-reps{color:var(--accent-text,var(--accent));}

@media (prefers-reduced-motion: reduce){
  .sk-st.ready .sk-tn-circle{animation:none;box-shadow:inset 0 1px 0 rgba(var(--shine-rgb),.12), 0 0 0 4px rgba(var(--accent-rgb),.18), 0 0 16px rgba(var(--accent-rgb),.38);}
}

/* ════════════════════════════════════════════════════════════════
   YETENEK AĞACI v3 — "RNG / GACHA" YÜKSELTMESİ
   Her düğüm maliyetine göre bir NADİRLİĞE (rarity) sahip: renkli
   glow küre + dönen konik halka + shine sweep; en üstte MYTHIC için
   holografik gökkuşağı çekirdek. Açılışta tüm ekranı saran dramatik
   "reveal" (flash + parçacık + büyüyen nadirlik yazısı). Düğüm kutu
   boyutu korunur (SVG bağlantı ipleri konumdan ölçülür); zenginlik
   halka/halo/pseudo katmanlarında — layout'a dokunmaz.
   Görenler "oha" desin. 🎰
════════════════════════════════════════════════════════════════ */

/* ── Nadirlik renkleri (--rc: ana renk, hem düğüm hem reveal kullanır) ── */
.sk-r-common   { --rc:#c2cade; --rc-rgb:194,202,222; }
.sk-r-uncommon { --rc:#38d67f; --rc-rgb:56,214,127; }
.sk-r-rare     { --rc:#3f8cff; --rc-rgb:63,140,255; }
.sk-r-epic     { --rc:#b061ff; --rc-rgb:176,97,255; }
.sk-r-legendary{ --rc:#ffb020; --rc-rgb:255,176,32; }
.sk-r-mythic   { --rc:#ff5fe0; --rc-rgb:255,95,224; }

/* ── Küre sarmalayıcı: halo + halka + çekirdek üst üste ── */
.sk-tn-orb{
  position:relative;width:64px;height:64px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
/* Yumuşak dış hâle (nadirlik renginde ışıma) */
.sk-tn-halo{
  position:absolute;z-index:0;width:56px;height:56px;border-radius:50%;
  pointer-events:none;box-shadow:0 0 18px 2px rgba(var(--rc-rgb),.45);opacity:.85;
  transition:box-shadow .2s, opacity .2s;
}
.sk-r-legendary .sk-tn-halo,.sk-r-mythic .sk-tn-halo{box-shadow:0 0 28px 5px rgba(var(--rc-rgb),.62);}
/* Dönen konik enerji halkası (rare ve üstü) */
.sk-tn-ring{
  position:absolute;z-index:1;width:64px;height:64px;border-radius:50%;
  pointer-events:none;opacity:0;
  background:conic-gradient(from 0deg,
    transparent 0deg, rgba(var(--rc-rgb),.95) 40deg, transparent 110deg,
    transparent 200deg, rgba(var(--rc-rgb),.55) 240deg, transparent 300deg);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
          mask:radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  animation:skSpin 3.4s linear infinite;
}
.sk-r-rare .sk-tn-ring,.sk-r-epic .sk-tn-ring,
.sk-r-legendary .sk-tn-ring,.sk-r-mythic .sk-tn-ring{opacity:.92;}

/* ── Çekirdek küre — nadirlik gradyanı (SVG ipleri bunu ölçer) ── */
.sk-st .sk-tn-circle{
  position:relative;z-index:2;width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:2px solid rgba(var(--rc-rgb),.85);
  background:radial-gradient(circle at 50% 32%,
    rgba(var(--rc-rgb),.42) 0%, rgba(var(--rc-rgb),.10) 55%, var(--surf2) 100%);
  box-shadow:
    inset 0 2px 5px rgba(255,255,255,.22),
    inset 0 -8px 14px -8px rgba(0,0,0,.7),
    0 0 0 1px rgba(var(--rc-rgb),.35),
    0 4px 14px rgba(0,0,0,.45);
  transition:transform .15s var(--ease-spring), box-shadow .2s, border-color .2s;
}
/* İçerik (ikon/renkler/∞) katman üstte */
.sk-tn-circle > .sk-tn-ic,
.sk-tn-circle > .sk-tn-colors,
.sk-tn-circle > .sk-tn-inf{position:relative;z-index:3;}
.sk-tn-ic{color:#fff;}
.sk-tn-ic svg{filter:drop-shadow(0 1px 2px rgba(0,0,0,.55));}
.sk-tn-inf{color:#fff;text-shadow:0 0 12px rgba(255,255,255,.7),0 0 4px rgba(var(--rc-rgb),.9);}

/* Shine sweep — küre üstünden geçen ışık (hover'da herkes, efsanede sürekli) */
.sk-tn-shine{position:absolute;z-index:1;inset:0;border-radius:50%;overflow:hidden;pointer-events:none;}
.sk-tn-shine::before{
  content:'';position:absolute;top:-40%;left:-130%;width:70%;height:180%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);
  transform:rotate(22deg);
}
.sk-st:not(.gated):hover .sk-tn-shine::before{animation:skSweep .8s ease;}
.sk-r-legendary .sk-tn-shine::before,
.sk-r-mythic .sk-tn-shine::before{animation:skSweep 3.4s ease-in-out infinite;}

/* ── MYTHIC — holografik gökkuşağı çekirdek ── */
.sk-r-mythic .sk-tn-circle{border-color:rgba(255,255,255,.65);}
.sk-r-mythic .sk-tn-circle::before{
  content:'';position:absolute;z-index:0;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,#ff4fd8,#ffd24f,#4fff9f,#4fd2ff,#b061ff,#ff4fd8);
  animation:skSpin 3s linear infinite;opacity:.9;
}
.sk-r-mythic .sk-tn-circle::after{
  content:'';position:absolute;z-index:1;inset:0;border-radius:50%;
  background:radial-gradient(circle at 50% 30%, rgba(255,255,255,.6) 0%, transparent 55%);
}

/* ── Durumlar (rarity renkli) ── */
/* Alınabilir + para yeten: nadirlik renginde nabız */
.sk-st.ready .sk-tn-circle{animation:skPulseR 1.8s ease-in-out infinite;}
@keyframes skPulseR{
  0%,100%{box-shadow:inset 0 2px 5px rgba(255,255,255,.22), inset 0 -8px 14px -8px rgba(0,0,0,.7), 0 0 0 3px rgba(var(--rc-rgb),.22), 0 0 16px rgba(var(--rc-rgb),.42);}
  50%    {box-shadow:inset 0 2px 5px rgba(255,255,255,.22), inset 0 -8px 14px -8px rgba(0,0,0,.7), 0 0 0 7px rgba(var(--rc-rgb),.10), 0 0 30px rgba(var(--rc-rgb),.68);}
}
/* Para yetmiyor: çekirdek soluk ama nadirlik ipucu görünür */
.sk-st.avail .sk-tn-circle{
  background:radial-gradient(circle at 50% 32%, rgba(var(--rc-rgb),.20) 0%, rgba(var(--rc-rgb),.05) 55%, var(--surf2) 100%);
  border-color:rgba(var(--rc-rgb),.5);
}
/* Alınmış: nadirlik + zümrüt onay hâlesi */
.sk-st.owned .sk-tn-circle{
  border-color:#00d4a0;
  box-shadow:
    inset 0 2px 5px rgba(255,255,255,.20),
    0 0 0 2px rgba(0,212,160,.45),
    0 0 20px rgba(var(--rc-rgb),.35),
    0 0 14px rgba(0,212,160,.35),
    0 4px 12px rgba(0,0,0,.4);
}
.sk-st.owned .sk-tn-halo{box-shadow:0 0 22px 3px rgba(0,212,160,.45);}
/* Önkoşul kilitli: soluk, gri, kesik */
.sk-st.gated .sk-tn-circle{opacity:.4;border-style:dashed;filter:grayscale(.55);animation:none;}
.sk-st.gated .sk-tn-halo,.sk-st.gated .sk-tn-ring{opacity:.18;animation:none;}

/* Hover — kaldır + parlat (kilitli hariç) */
.sk-st:not(.gated):hover .sk-tn-circle{
  transform:translateY(-3px) scale(1.06);
  box-shadow:
    inset 0 2px 5px rgba(255,255,255,.24),
    0 0 0 1px rgba(var(--rc-rgb),.5),
    0 0 26px rgba(var(--rc-rgb),.6),
    0 8px 18px rgba(0,0,0,.5);
}
.sk-st:not(.gated):hover .sk-tn-halo{box-shadow:0 0 32px 6px rgba(var(--rc-rgb),.6);}

/* ── Nadirlik etiketi ── */
.sk-st-rar{
  font-family:var(--font-display);font-size:.5rem;font-weight:900;
  letter-spacing:.14em;text-transform:uppercase;line-height:1;
  color:var(--rc);text-shadow:0 0 8px rgba(var(--rc-rgb),.55);
}
.sk-r-mythic .sk-st-rar{
  color:transparent;
  background:linear-gradient(90deg,#ff5fe0,#ffd24f,#4fff9f,#4fd2ff,#b061ff,#ff5fe0);
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;
  animation:skHue 3s linear infinite;
}
.sk-st.gated .sk-st-rar{color:var(--muted);text-shadow:none;}

/* ── Küçük atmosfer: SP çubuğunda para parıltısı ── */
.sk-sp-bar{position:relative;overflow:hidden;}
.sk-sp-bar::after{
  content:'';position:absolute;top:0;left:-60%;width:45%;height:100%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(var(--shine-rgb),.14),transparent);
  animation:skSweep 5s ease-in-out infinite;
}

/* ── DRAMATİK AÇILIŞ "REVEAL" (tüm ekran) ── */
.sk-reveal{
  position:fixed;inset:0;z-index:900;pointer-events:none;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.sk-reveal-glow{
  position:absolute;inset:0;
  background:radial-gradient(circle at 50% 44%, rgba(var(--rc-rgb),.5) 0%, rgba(var(--rc-rgb),.12) 30%, transparent 62%);
  animation:skRevealGlow 1.4s ease-out forwards;
}
.sk-reveal-rays{
  position:absolute;left:50%;top:44%;width:150vmax;height:150vmax;
  background:repeating-conic-gradient(from 0deg, rgba(var(--rc-rgb),.13) 0deg 6deg, transparent 6deg 12deg);
  animation:skSpinC 9s linear infinite, skRevealGlow 1.4s ease-out forwards;
}
.sk-reveal-word{
  position:relative;font-family:var(--font-display);font-weight:900;
  font-size:clamp(2rem,9vw,3.6rem);letter-spacing:.16em;color:var(--rc);
  text-shadow:0 0 30px rgba(var(--rc-rgb),.9),0 2px 12px rgba(0,0,0,.6);
  animation:skRevealWord 1.4s cubic-bezier(.18,1.5,.3,1) forwards;
}
.sk-reveal.sk-r-mythic .sk-reveal-word{
  color:transparent;
  background:linear-gradient(90deg,#ff5fe0,#ffd24f,#4fff9f,#4fd2ff,#b061ff,#ff5fe0);
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;
  animation:skRevealWord 1.4s cubic-bezier(.18,1.5,.3,1) forwards, skHue 1.6s linear infinite;
}
.sk-spark{
  position:absolute;left:50%;top:44%;width:8px;height:8px;border-radius:50%;
  background:var(--rc);color:var(--rc);box-shadow:0 0 10px 1px currentColor;
  animation:skSpark var(--dur,1s) ease-out forwards;
}

/* ── Keyframes ── */
@keyframes skSpin{to{transform:rotate(360deg);}}
@keyframes skSpinC{from{transform:translate(-50%,-50%) rotate(0);}to{transform:translate(-50%,-50%) rotate(360deg);}}
@keyframes skSweep{0%{left:-130%;}60%,100%{left:130%;}}
@keyframes skHue{to{background-position:200% center;}}
@keyframes skRevealGlow{0%{opacity:0;}22%{opacity:1;}100%{opacity:0;}}
@keyframes skRevealWord{
  0%{opacity:0;transform:scale(.35);}
  22%{opacity:1;transform:scale(1.08);}
  68%{opacity:1;transform:scale(1);}
  100%{opacity:0;transform:scale(1.18);}
}
@keyframes skSpark{
  0%{transform:translate(-50%,-50%) scale(1);opacity:1;}
  100%{transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) scale(.2);opacity:0;}
}

/* ── Mobil: küre boyutlarını küçült ── */
@media (max-width:520px){
  .sk-tn-orb{width:56px;height:56px;}
  .sk-tn-ring{width:56px;height:56px;}
  .sk-tn-halo{width:48px;height:48px;}
  .sk-st .sk-tn-circle{width:48px;height:48px;}
}

/* ── Hareket azaltma: tüm döngüsel animasyonları durdur ── */
@media (prefers-reduced-motion: reduce){
  .sk-tn-ring,.sk-tn-shine::before,.sk-r-mythic .sk-tn-circle::before,
  .sk-reveal-rays,.sk-sp-bar::after,.sk-r-mythic .sk-st-rar{animation:none !important;}
  .sk-st.ready .sk-tn-circle{animation:none;box-shadow:inset 0 2px 5px rgba(255,255,255,.2), 0 0 0 4px rgba(var(--rc-rgb),.2), 0 0 16px rgba(var(--rc-rgb),.4);}
}

/* ════════════════════════════════════════════════════════════════
   YETENEK AĞACI v4 — "İKİ HAT" + "PERDE"

   NEDEN YENİ DÜZEN: eski ağaç dalları ALT ALTA, her dalı da tek ince
   dikey şerit olarak çiziyordu. Sonuç: geniş kartın iki yanı boş,
   ağacın tamamı hiç görünmüyor (Şans dalına ulaşmak için epey kaydırmak
   gerekiyor) ve 96px'lik dikey kutularda ad/etki/maliyet ÜST ÜSTE
   biniyordu. İki dal da 5 adımlık DÜZ zincir olduğu için doğru biçim
   iki paralel HAT: masaüstünde yan yana, telefonda alt alta. Her düğüm
   bir SATIR — metne yatay yer var, çakışma imkânsız.

   İMZA: PERDE. Uzak duraklar piksel kareleriyle kaplı; yalnız nadirlik
   görünür. Hattın sonunda efsanevi bir şey olduğunu bilirsin, ne
   olduğunu bilmezsin. Perde oyunun kendi malzemesinden — piksel.
   Kademeli açılma mantığı skill.js _skVeilLevel'da anlatılıyor.

   Küre görselleri (halo/ring/circle/shine, nadirlik renkleri, mythic
   holografik) v3'ten AYNEN korunuyor — buraya efekt EKLENMEDİ; eksik
   olan efekt değil YAPIYDI.
════════════════════════════════════════════════════════════════ */

/* Kart masaüstünde iki hattı yan yana alacak kadar genişler */
@media (min-width:700px){
  #skill-card{max-width:820px;}
}

.sk-rails{ display:grid; grid-template-columns:1fr; gap:.55rem; }
@media (min-width:700px){
  .sk-rails{ grid-template-columns:1fr 1fr; gap:.9rem; }
}

.sk-rail{
  position:relative; min-width:0;
  border:1px solid var(--pf-hair, rgba(255,255,255,.075));
  border-radius:14px;
  background:rgba(var(--surf-rgb, 10,16,32), .5);
  padding:.6rem .7rem .7rem;
}

/* ── Hat başlığı: ikon · ad · ilerleme ── */
.sk-rail-head{
  display:flex; align-items:center; gap:.45rem;
  padding-bottom:.5rem; margin-bottom:.35rem;
  border-bottom:1px solid var(--pf-hair, rgba(255,255,255,.075));
}
.sk-rail-ic{ display:flex; color:var(--accent-text, var(--accent)); }
.sk-rail-ic svg{ width:16px; height:16px; }
.sk-rail-name{
  flex:1; min-width:0; margin:0;
  font-family:var(--font-display);
  font-size:.82rem; font-weight:800; letter-spacing:.04em;
  color:var(--txt); text-transform:uppercase;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sk-rail-prog{
  flex:0 0 auto;
  font-family:var(--font-mono); font-size:.72rem; font-weight:800;
  color:var(--txt); font-variant-numeric:tabular-nums;
}
.sk-rail-prog i{ color:var(--muted); font-style:normal; margin:0 1px; }

/* ── Omurga: tek dikey hat. Eski SVG bezier ipleri kaldırıldı —
   düğüm konumlarını ölçtükleri için panel kaydırılınca kayabiliyordu. ── */
.sk-stations{
  position:relative; list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:.1rem;
}
/* Omurganın x'i küre MERKEZİYLE aynı olmalı:
   satır dolgusu .15rem (2.4px) + numara kolonu 14px + boşluk .4rem (6.4px)
   = 22.8px kürenin sol kenarı; + 52/2 = 48.8; eksi çizgi kalınlığının
   yarısı → 48px. (Önce 33px yazılmıştı: hat kürelerin ~16px SOLUNDAN
   geçiyor, hiçbir küreye değmiyordu.) */
.sk-spine{
  position:absolute; left:48px; top:26px; bottom:26px; width:2px;
  background:repeating-linear-gradient(180deg,
    var(--bdr2, #33415f) 0 3px, transparent 3px 7px);
  border-radius:2px; pointer-events:none; z-index:0;
}
/* Geçilen kısım dolu ve canlı: ilerlemeni omurga anlatıyor */
.sk-spine-fill{
  position:absolute; left:0; top:0; width:100%;
  background:linear-gradient(180deg, #22d3a5, #00b98c);
  box-shadow:0 0 8px rgba(34,211,165,.55);
  border-radius:2px;
  transition:height .85s var(--ease-out, cubic-bezier(.22,1,.36,1));
}

/* ── Durak satırı ── */
.sk-st{
  position:relative; z-index:1;
  display:grid; grid-template-columns:14px 52px 1fr auto;
  align-items:center; gap:.4rem;
  padding:.3rem .15rem; border-radius:10px;
  transition:background .16s ease;
}
.sk-st:hover{ background:rgba(var(--surf3-rgb, 28,40,66), .55); }
.sk-st.gated{ cursor:pointer; }        /* perdeli de tıklanabilir (kart açar) */

.sk-st-n{
  font-family:var(--font-mono); font-size:.62rem; font-weight:800;
  color:var(--muted); text-align:right; font-variant-numeric:tabular-nums;
}
.sk-st.owned .sk-st-n{ color:#22d3a5; }

/* Küre: v3 görselleri aynen; sadece satır düzenine oturuyor */
.sk-st-orb{
  position:relative; width:52px; height:52px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.sk-st .sk-tn-circle{ width:44px; height:44px; }
.sk-st .sk-tn-halo{ width:40px; height:40px; }
.sk-st .sk-tn-ring{ width:52px; height:52px; }
.sk-st .sk-tn-ic svg{ width:18px; height:18px; }
.sk-st .sk-tn-colors{ grid-template-columns:repeat(2,11px); gap:2px; }
.sk-st .sk-tn-inf{ font-size:1.05rem; }

/* Metin bloğu — yatay yer var, artık hiçbir şey üst üste binmiyor */
.sk-st-body{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.sk-st-rar{
  font-family:var(--font-mono); font-size:.46rem; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; line-height:1.1;
  color:var(--rc); text-shadow:0 0 8px rgba(var(--rc-rgb),.5);
}
.sk-st-name{
  font-family:var(--font-display);
  font-size:.76rem; font-weight:800; line-height:1.2; color:var(--txt);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sk-st-fx{
  font-size:.6rem; line-height:1.35; color:var(--muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* Maliyet çipi — satırın sağ ucunda sabit */
.sk-st-chip{
  flex-shrink:0; display:inline-flex; align-items:center; gap:.2rem;
  font-family:var(--font-mono); font-size:.66rem; font-weight:800;
  padding:.2rem .42rem; border-radius:7px;
  border:1px solid var(--bdr2); background:var(--surf2); color:var(--txt);
}
.sk-st-chip svg{ width:11px; height:11px; }
.sk-st-chip.veiled{ color:var(--muted); opacity:.7; }

/* ── SIRADAKİ: hat başına TEK odak noktası ── */
.sk-st.frontier{
  background:rgba(var(--accent-rgb), .10);
  box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb), .35);
}
.sk-st.frontier::after{
  content:attr(data-next);
  position:absolute; right:.4rem; top:-.42rem;
  font-family:var(--font-mono); font-size:.44rem; font-weight:900;
  letter-spacing:.12em; text-transform:uppercase;
  color:#fff; background:var(--accent);
  padding:.08rem .3rem; border-radius:4px;
  box-shadow:0 1px 4px rgba(0,0,0,.4);
  opacity:0; transform:translateY(3px);
  transition:opacity .3s ease .7s, transform .3s ease .7s;
}
.sk-rail.armed .sk-st.frontier::after{ opacity:1; transform:translateY(0); }

/* ── PERDE — imza öge ──
   4x4 piksel ızgarası küreyi kapatır. Kareler ayrı elementler: bir düğüm
   açığa çıktığında kademeli gecikmeyle dağılabiliyorlar (skVeilOut). */
.sk-veil{
  position:absolute; z-index:4; inset:0; border-radius:50%;
  display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(4,1fr);
  overflow:hidden; pointer-events:none;
}
.sk-veil i{
  background:var(--surf3, #1c2842);
  box-shadow:inset 0 0 0 .5px rgba(0,0,0,.35);
}
/* Perdenin altındaki nadirlik rengi hafifçe sızsın: "orada bir şey var" */
.sk-veil i:nth-child(3n){ background:color-mix(in srgb, var(--rc) 14%, var(--surf3, #1c2842)); }
/* Açık temada --surf3 neredeyse beyaz: perde "örtü" gibi durmuyor, boş
   daire gibi görünüyordu. Orada bir kademe koyulaştırılıyor. */
:root[data-theme="light"] .sk-veil i{
  background:#c6cee0;
  box-shadow:inset 0 0 0 .5px rgba(20,30,60,.18);
}
:root[data-theme="light"] .sk-veil i:nth-child(3n){
  background:color-mix(in srgb, var(--rc) 22%, #c6cee0);
}
.sk-st.veiled .sk-st-name{ font-family:var(--font-mono); letter-spacing:.1em; color:var(--muted); }
.sk-st.veiled .sk-st-fx{ opacity:.75; }
.sk-st.veiled .sk-tn-ring{ opacity:0 !important; animation:none; }
.sk-st.veiled .sk-tn-halo{ box-shadow:0 0 10px 1px rgba(var(--rc-rgb),.22); }
/* Fısıltı (bir sonraki durak): adı görünür, sayıları değil */
.sk-st.whisper .sk-st-fx{ color:var(--gold, #f7b32b); opacity:.9; }

/* Perde dağılması — satın alma sonrası açığa çıkan düğümde bir kez */
.sk-veil.out i{ animation:skVeilOut .5s ease forwards; animation-delay:var(--d,0ms); }
@keyframes skVeilOut{ to{ opacity:0; transform:scale(.4); } }

/* Bilgi kartı: perdeli düğüm — bilinçli olarak AZ şey söyler */
#sk-info-modal.sk-info-veiled{
  position:fixed; inset:0; z-index:99000; padding:16px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.65);
}
.sk-info-veiled .sk-info-card{
  width:300px; max-width:92vw;
  background:linear-gradient(160deg,var(--surf),var(--surf2));
  border:1px solid var(--bdr2); border-radius:18px;
  padding:1.1rem 1.2rem; display:flex; flex-direction:column; gap:.6rem;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
}
.sk-info-top{ display:flex; justify-content:space-between; align-items:flex-start; }
.sk-info-title{
  font-family:var(--font-mono); font-size:1.3rem; font-weight:900;
  letter-spacing:.16em; color:var(--muted);
}
.sk-info-x{ background:none; border:none; color:var(--muted); cursor:pointer; font-size:1rem; line-height:1; }
.sk-info-rar{
  font-family:var(--font-mono); font-size:.56rem; font-weight:800;
  letter-spacing:.12em; color:var(--rc); text-shadow:0 0 8px rgba(var(--rc-rgb),.5);
}
.sk-info-veilart{
  position:relative; width:88px; height:88px; margin:.2rem auto;
  border-radius:50%; overflow:hidden;
  box-shadow:0 0 0 2px rgba(var(--rc-rgb),.4), 0 0 22px rgba(var(--rc-rgb),.3);
}
.sk-info-veilart .sk-veil{ position:absolute; inset:0; }
.sk-info-desc{ font-size:.74rem; line-height:1.55; color:var(--muted); text-align:center; }

@media (max-width:420px){
  .sk-st{ grid-template-columns:12px 46px 1fr auto; gap:.3rem; }
  .sk-st-orb{ width:46px; height:46px; }
  .sk-st .sk-tn-circle{ width:40px; height:40px; }
  .sk-st .sk-tn-ring{ width:46px; height:46px; }
  /* Küre merkezi: .15rem(2.4) + 12 + .3rem(4.8) = 19.2 sol kenar; +23 = 42.2
     → 41px. (29px yazılmıştı, hat kürelerin solundan geçiyordu.) */
  .sk-spine{ left:41px; }
  .sk-st-name{ font-size:.72rem; }
}

@media (prefers-reduced-motion: reduce){
  .sk-spine-fill{ transition:none; }
  .sk-st.frontier::after{ transition:none; opacity:1; transform:none; }
  .sk-veil.out i{ animation:none; opacity:0; }
}