/* ══════════════════════════════════════════════════════════════
   İLK ADIMLAR (onboarding.js) — yeni oyuncu başlangıç görevi
   Kart sağ altta durur; boya çubuğunu ve sohbet butonunu (sol alt)
   engellemez. Mobilde alta tam genişlik yakın oturur.
══════════════════════════════════════════════════════════════ */

#onb-card{
  position:fixed;
  right:14px; bottom:96px;
  width:250px;
  z-index:180;                      /* modalların (999+) altında, HUD üstünde */
  background:var(--surf2, #171a24);
  border:1px solid var(--bdr2, #2b3040);
  border-radius:14px;
  padding:.7rem .75rem .75rem;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  font-size:.75rem;
  animation:onbIn .35s cubic-bezier(.2,.9,.3,1.3);
}
@keyframes onbIn{
  from{ opacity:0; transform:translateY(14px) scale(.96); }
  to  { opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){
  #onb-card{ animation:none; }
}

#onb-card .onb-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:.4rem; margin-bottom:.5rem;
}
#onb-card .onb-title{
  font-weight:900; font-size:.82rem; letter-spacing:.01em;
  color:var(--accent, #7B61FF);
}
#onb-card .onb-x{
  border:none; background:transparent; cursor:pointer;
  color:var(--muted, #8b8db8); font-size:.8rem; line-height:1;
  padding:.15rem .25rem; border-radius:6px;
}
#onb-card .onb-x:hover{ color:var(--txt, #fff); background:var(--surf, #11131b); }

#onb-card .onb-sub{
  color:var(--muted, #8b8db8); line-height:1.5;
  font-size:.7rem; margin-bottom:.6rem;
}

/* ── Adım satırı ── */
#onb-card .onb-step{
  display:flex; align-items:center; gap:.5rem;
  padding:.34rem .3rem; border-radius:8px;
  color:var(--muted, #8b8db8);
}
#onb-card .onb-step.now{
  background:rgba(var(--accent-rgb, 123,97,255), .12);
  color:var(--txt, #e9e9f2);
}
#onb-card .onb-step.ok{ color:var(--txt, #e9e9f2); opacity:.62; }
#onb-card .onb-step.ok .onb-label{ text-decoration:line-through; }

#onb-card .onb-mark{
  flex-shrink:0;
  width:18px; height:18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:.62rem; font-weight:900;
  border:1.5px solid var(--bdr2, #2b3040);
  color:var(--muted, #8b8db8);
}
#onb-card .onb-step.now .onb-mark{
  border-color:var(--accent, #7B61FF); color:var(--accent, #7B61FF);
}
#onb-card .onb-step.ok .onb-mark{
  background:var(--accent, #7B61FF); border-color:var(--accent, #7B61FF); color:#fff;
}
#onb-card .onb-label{ flex:1; line-height:1.35; }
#onb-card .onb-prog{
  font-family:var(--font-mono, monospace);
  font-size:.62rem; color:var(--accent, #7B61FF); font-weight:700;
}

/* ── Eylem düğmesi ── */
#onb-card .onb-cta{
  width:100%; margin-top:.55rem;
  border:none; border-radius:9px; cursor:pointer;
  padding:.5rem .6rem;
  background:var(--accent, #7B61FF); color:#fff;
  font-weight:800; font-size:.74rem;
}
#onb-card .onb-cta:hover{ filter:brightness(1.08); }
#onb-card .onb-cta.ghost{
  background:transparent; color:var(--muted, #8b8db8);
  border:1px solid var(--bdr2, #2b3040); font-weight:700;
}
#onb-card .onb-cta.ghost:hover{ color:var(--txt, #fff); }

/* ── Bitti hâli ── */
#onb-card.onb-done{
  border-color:rgba(var(--accent-rgb, 123,97,255), .5);
  box-shadow:0 10px 34px rgba(var(--accent-rgb, 123,97,255), .22);
}

/* ══ ÜLKE SEÇİCİ ══ */
#onb-pick{
  position:fixed; inset:0; z-index:10060;
  background:rgba(6,7,12,.72);
  backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  padding:1rem;
}
#onb-pick .onb-pick-card{
  width:min(94vw, 380px);
  max-height:min(80vh, 560px);
  display:flex; flex-direction:column;
  background:var(--surf2, #171a24);
  border:1px solid var(--bdr2, #2b3040);
  border-radius:16px;
  padding:.9rem;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
}
#onb-pick .onb-pick-head{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
}
#onb-pick .onb-pick-title{
  font-weight:900; font-size:.95rem; color:var(--txt, #e9e9f2);
}
#onb-pick .onb-pick-x{
  border:none; background:transparent; cursor:pointer;
  color:var(--muted, #8b8db8); font-size:.85rem; padding:.2rem .3rem; border-radius:6px;
}
#onb-pick .onb-pick-x:hover{ color:var(--txt, #fff); background:var(--surf, #11131b); }
#onb-pick .onb-pick-sub{
  color:var(--muted, #8b8db8); font-size:.7rem; line-height:1.5;
  margin:.3rem 0 .6rem;
}
#onb-pick #onb-pick-search{
  width:100%;
  background:rgba(0,0,0,.28);
  border:1px solid var(--bdr2, #2b3040);
  border-radius:9px;
  color:var(--txt, #e9e9f2);
  /* 16px: iOS Safari daha küçük yazı tipinde alanı otomatik yakınlaştırıyor */
  padding:.5rem .7rem; font-size:16px; outline:none;
  margin-bottom:.55rem;
}
#onb-pick #onb-pick-search:focus{ border-color:var(--accent, #7B61FF); }

#onb-pick .onb-pick-list{
  overflow-y:auto; flex:1; min-height:0;
  display:flex; flex-direction:column; gap:2px;
}
#onb-pick .onb-pick-row{
  text-align:left; width:100%;
  border:none; background:transparent; cursor:pointer;
  color:var(--txt, #e9e9f2);
  padding:.45rem .55rem; border-radius:8px;
  font-size:.78rem;
}
#onb-pick .onb-pick-row:hover{ background:rgba(var(--accent-rgb, 123,97,255), .16); }
#onb-pick .onb-pick-empty{
  color:var(--muted, #8b8db8); font-size:.72rem;
  text-align:center; padding:1rem;
}

/* ══ MOBİL ══ */
@media (max-width: 768px){
  #onb-card{
    right:8px; left:8px; width:auto;
    bottom:calc(74px + env(safe-area-inset-bottom, 0px));
    font-size:.78rem;
  }
  #onb-card .onb-step{ padding:.4rem .3rem; }
}