/* =============================================================================
 * TEAM FORGE — Build Your XI — SYSTEM transformation engine (Faz 6)
 * Builds on forge-xi.css tokens (--fx-*) and forge-xi-tactic.css accent tokens
 * ([data-accent] -> --acc / --copper). Self-contained + .bx-scoped. No commerce
 * styling. Mobile-first. English names carry lang="en" (dotless-İ).
 * ========================================================================== */

.bx-main { max-width: 1180px; margin: 0 auto; padding: 0 20px 60px; }
.bx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; border: 0; }

/* position accent (micro) */
[data-pos="GK"]  { --pos: #e0a836; }
[data-pos="DF"]  { --pos: #4a90d9; }
[data-pos="MF"]  { --pos: #46c26b; }
[data-pos="WFW"] { --pos: #e0574e; }

/* -------------------------------- header --------------------------------- */
.bx-head { padding: clamp(30px, 5vw, 52px) 0 18px; position: relative; }
.bx-eyebrow { font-family: var(--fx-font-display); text-transform: uppercase; letter-spacing: 0.24em; font-size: 0.74rem; color: var(--acc, var(--fx-gold)); margin: 0 0 12px; }
.bx-h1 { font-family: var(--fx-font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.06; font-size: clamp(1.9rem, 4.4vw, 3rem); color: var(--fx-ink); margin: 0 0 10px; }
.bx-lead { color: var(--fx-muted); font-size: 1rem; line-height: 1.6; max-width: 62ch; margin: 0; }
.bx-identity { color: var(--fx-ink); font-size: 1.04rem; margin: 0 0 12px; }
.bx-progress { font-family: var(--fx-font-display); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.9rem; color: var(--fx-muted); margin: 0; }
.bx-progress-n { color: var(--acc, var(--fx-gold)); font-size: 1.5rem; }
.bx-reset { position: absolute; top: clamp(30px, 5vw, 52px); right: 0; background: transparent; border: 1px solid var(--fx-line-soft); color: var(--fx-muted); border-radius: 8px; padding: 8px 14px; font: inherit; font-size: 0.78rem; cursor: pointer; }
.bx-reset:hover:not([disabled]) { border-color: var(--fx-gold); color: var(--fx-gold); }
.bx-reset[disabled] { opacity: 0.4; cursor: not-allowed; }

/* ---------------------------- system chooser ----------------------------- */
.bx-choose-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 8px; }
.bx-choose-card { position: relative; display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit;
  background: var(--fx-panel); border: 1px solid var(--fx-line-soft); border-radius: var(--fx-radius); padding: 24px 22px; overflow: hidden;
  transition: transform 0.14s ease, border-color 0.14s ease; }
.bx-choose-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--acc, var(--fx-gold)); }
.bx-choose-card:hover { transform: translateY(-2px); border-color: var(--fx-line); }
.bx-choose-card:focus-visible { outline: 2px solid var(--acc, var(--fx-gold)); outline-offset: 3px; }
.bx-choose-id { font-family: var(--fx-font-display); font-weight: 700; letter-spacing: 0.06em; color: var(--acc, var(--fx-gold)); font-size: 1.8rem; line-height: 1; }
.bx-choose-title { font-family: var(--fx-font-display); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.82rem; color: var(--fx-muted); }
.bx-choose-line { color: var(--fx-ink); font-size: 1.02rem; line-height: 1.45; margin: 6px 0 16px; }
.bx-choose-cta { align-self: flex-start; font-family: var(--fx-font-display); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.84rem; color: #10100c; background: var(--acc, var(--fx-gold)); border-radius: 8px; padding: 10px 18px; }

/* -------------------------------- layout --------------------------------- */
.bx-layout2 { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start; }
.bx-panel2 { background: var(--fx-panel); border: 1px solid var(--fx-line-soft); border-radius: var(--fx-radius); padding: 16px; }
.bx-panel2-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.bx-panel2-title { font-family: var(--fx-font-display); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.86rem; color: var(--fx-ink); margin: 0 0 12px; }
.bx-panel2-head .bx-panel2-title { margin: 0; }
.bx-pool-sub { color: var(--fx-muted); font-size: 0.78rem; }
.bx-hint { margin: 12px 0 0; color: var(--fx-muted); font-size: 0.78rem; text-align: center; }
.bx-empty { color: var(--fx-muted); font-size: 0.85rem; padding: 14px 4px; margin: 0; }

/* --------------------------------- pitch --------------------------------- */
.bx-pitch2 { position: relative; width: 100%; max-width: 460px; margin: 0 auto; aspect-ratio: 68 / 104;
  background: linear-gradient(180deg, var(--fx-panel) 0%, var(--fx-panel-2) 100%);
  border: 1px solid var(--fx-line-soft); border-radius: var(--fx-radius); overflow: hidden; }
.bx-pitch-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.bx-pl { fill: none; stroke: var(--acc, var(--fx-gold-dim)); stroke-width: 0.5; opacity: 0.4; }
.bx-syn { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.bx-syn-line { stroke: var(--fx-gold); stroke-width: 0.6; opacity: 0.7; stroke-linecap: round; filter: drop-shadow(0 0 2px rgba(212,175,55,0.5)); }

.bx-slot2 { position: absolute; transform: translate(-50%, -50%); z-index: 2; width: max-content; }
.bx-slot2.is-target .bx-slot2-dot { border-color: var(--acc, var(--fx-gold)); box-shadow: 0 0 0 4px var(--acc-dim, rgba(212,175,55,0.16)); animation: bx-pulse 1.4s ease-in-out infinite; }
.bx-slot2.is-over .bx-slot2-dot { border-color: var(--acc, var(--fx-gold)); }
/* Faz 9: görsel nokta 30px kalır (saha kalabalıklaşmasın) ama DOKUNMA ALANI ≥44px olur.
   ::after görünmez bir hedef serer; pointer-events dot'un kendisinde kaldığı için
   tıklama yine [data-slot-id] üzerinden akar. */
.bx-slot2-dot { position: relative; width: 30px; height: 30px; border-radius: 50%; border: 1.5px dashed var(--fx-line); background: rgba(8,8,10,0.5);
  display: grid; place-items: center; cursor: pointer; padding: 0; }
.bx-slot2-dot::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%; }
.bx-slot2-pos { font-family: var(--fx-font-display); font-size: 0.56rem; letter-spacing: 0.06em; color: var(--fx-muted); }
@keyframes bx-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .bx-slot2.is-target .bx-slot2-dot { animation: none; } }

/* placed role on the pitch */
.bx-slot2.is-filled { z-index: 3; }
.bx-role.is-onpitch { position: relative; width: 96px; padding: 6px 6px 8px; background: rgba(10,12,20,0.92);
  border: 1px solid var(--acc, var(--fx-line)); border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,0.5); }
.bx-role.is-onpitch .bx-role-nm { font-size: 0.66rem; }
.bx-role.is-onpitch .bx-role-eb { font-size: 0.5rem; }
.bx-role-rm { position: absolute; top: -8px; right: -8px; width: 20px; height: 20px; border-radius: 50%; border: none;
  background: #e0574e; color: #fff; font-size: 0.8rem; line-height: 1; cursor: pointer; display: grid; place-items: center; }

/* --------------------------------- pool ---------------------------------- */
.bx-pool2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.bx-role { display: flex; flex-direction: column; gap: 2px; background: var(--fx-panel-2); border: 1px solid var(--fx-line-soft);
  border-radius: 10px; padding: 11px 11px 13px; cursor: pointer; transition: border-color 0.14s ease, transform 0.14s ease; }
.bx-pool2 .bx-role:hover { border-color: var(--fx-line); transform: translateY(-2px); }
.bx-pool2 .bx-role:focus-visible { outline: 2px solid var(--acc, var(--fx-gold)); outline-offset: 2px; }
.bx-role.is-pending { border-color: var(--acc, var(--fx-gold)); box-shadow: 0 0 0 3px var(--acc-dim, rgba(212,175,55,0.16)); }
.bx-role-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.bx-role-mono { font-family: var(--fx-font-display); font-weight: 700; color: var(--fx-gold); font-size: 0.82rem; letter-spacing: 0.06em; }
.bx-role-pos { font-size: 0.54rem; letter-spacing: 0.1em; color: var(--pos, var(--fx-muted)); border: 1px solid currentColor; border-radius: 999px; padding: 1px 6px; }
.bx-role-eb { font-family: var(--fx-font-display); text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.54rem; color: var(--fx-gold); }
.bx-role-nm { font-family: var(--fx-font-display); text-transform: uppercase; letter-spacing: 0.02em; font-size: 0.86rem; color: var(--fx-ink); line-height: 1.05; }

/* -------------------------------- toast ---------------------------------- */
.bx-toast { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 20px); z-index: 60; max-width: 88vw;
  background: rgba(10,12,20,0.95); border: 1px solid var(--fx-gold-dim); color: var(--fx-ink); border-radius: 12px;
  padding: 12px 20px; font-size: 0.95rem; text-align: center; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.bx-toast.is-show { opacity: 1; transform: translate(-50%, 0); }
.bx-toast--zone { border-color: var(--fx-line); color: var(--fx-muted); font-style: italic; }
@media (prefers-reduced-motion: reduce) { .bx-toast { transition: opacity 0.2s ease; } }

/* -------------------------------- finish --------------------------------- */
.bx-finish { margin-top: 18px; background: var(--fx-panel); border: 1px solid var(--fx-line-soft);
  border-left: 4px solid var(--acc, var(--fx-gold)); border-radius: var(--fx-radius); padding: 22px 20px; text-align: center; }
.bx-finish-title { font-family: var(--fx-font-display); text-transform: uppercase; letter-spacing: 0.04em; font-size: clamp(1.3rem, 4vw, 1.8rem); color: var(--acc, var(--fx-gold)); margin: 0 0 16px; }
.bx-team-field { display: flex; flex-direction: column; gap: 6px; max-width: 340px; margin: 0 auto 18px; text-align: left; }
.bx-team-label { font-size: 0.78rem; color: var(--fx-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.bx-team-input { background: var(--fx-panel-2); border: 1px solid var(--fx-line-soft); border-radius: 10px; color: var(--fx-ink); padding: 12px 14px; font: inherit; }
.bx-team-input:focus { outline: none; border-color: var(--acc, var(--fx-gold)); }
.bx-finish-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.bx-share { font-family: var(--fx-font-display); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.9rem; padding: 14px 26px; border-radius: 10px; color: #10100c; background: var(--acc, var(--fx-gold)); border: 1px solid var(--acc, var(--fx-gold)); cursor: pointer; }
.bx-share[disabled] { opacity: 0.6; cursor: default; }
.bx-totable { font-family: var(--fx-font-display); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.9rem; padding: 14px 26px; border-radius: 10px; color: var(--fx-ink); background: transparent; border: 1px solid var(--fx-line); cursor: pointer; }
.bx-totable:hover { border-color: var(--acc, var(--fx-gold)); color: var(--acc, var(--fx-gold)); }

/* -------------------------------- modal ---------------------------------- */
/* Faz 10b düzeltme: Forge XI CSS'inde global box-sizing YOK; bu yüzden
   width:min(460px,94vw) + padding:24px TOPLANIP modalı 375px ekranda 403px yapıyordu
   (sepete-ekle butonları ve not metni sağdan kesiliyordu). Modal alt ağacı border-box. */
.bx-modal, .bx-modal * { box-sizing: border-box; }
.bx-modal-back { position: fixed; inset: 0; z-index: 80; background: rgba(4,6,10,0.72); display: grid; place-items: center; padding: 20px; }
.bx-modal { width: min(460px, 94vw); background: var(--fx-panel); border: 1px solid var(--fx-line); border-radius: 16px; padding: 26px 24px; }
.bx-modal-title { font-family: var(--fx-font-display); text-transform: uppercase; letter-spacing: 0.03em; font-size: 1.2rem; color: var(--fx-ink); margin: 0 0 18px; }
.bx-modal-items { display: grid; gap: 12px; }
.bx-modal-item { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--fx-panel-2); border: 1px solid var(--fx-line-soft); border-left: 3px solid var(--acc, var(--fx-gold)); border-radius: 10px; padding: 14px 16px; }
.bx-modal-item-name { font-family: var(--fx-font-display); text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.9rem; color: var(--fx-ink); }
.bx-modal-buy { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px dashed var(--fx-line-soft); color: var(--fx-muted); border-radius: 8px; padding: 8px 12px; cursor: not-allowed; opacity: 0.8; }
.bx-soon { font-family: var(--fx-font-body); text-transform: none; letter-spacing: 0.02em; font-size: 0.64rem; color: var(--fx-black); background: var(--fx-muted); border-radius: 999px; padding: 2px 8px; }
.bx-modal-note { color: var(--fx-muted); font-size: 0.86rem; line-height: 1.5; margin: 16px 0 18px; }
.bx-modal-close { display: block; width: 100%; font-family: var(--fx-font-display); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.86rem; padding: 12px; border-radius: 10px; background: var(--fx-panel-2); border: 1px solid var(--fx-line-soft); color: var(--fx-ink); cursor: pointer; }
.bx-modal-close:hover { border-color: var(--fx-gold); color: var(--fx-gold); }

/* ------------------------------ responsive ------------------------------- */
@media (min-width: 760px) {
  .bx-choose-grid { grid-template-columns: 1fr 1fr; }
  .bx-layout2 { grid-template-columns: 1fr 320px; }
  .bx-pool2 { grid-template-columns: 1fr 1fr; }
}

/* bundle modal: squad mini preview (Faz 7B) */
.bx-mini-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 4px 0 18px; }
.bx-mini { border: 1px solid var(--fx-line-soft); border-radius: 8px; background: linear-gradient(180deg, var(--fx-panel-2), #0a0a0b); }
.bx-mini-cap { font-family: var(--fx-font-display); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.68rem; color: var(--fx-muted); }
.bx-modal-buy:not([disabled]) { background: var(--acc, var(--fx-gold)); border: 1px solid var(--acc, var(--fx-gold)); color: #10100c; cursor: pointer; opacity: 1; font-family: var(--fx-font-display); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.8rem; }

/* Faz 10c-1: dokunmatik sürükleme hayaleti — parmağı takip eden kopya kart. */
.bx-ghost { position: fixed; z-index: 90; pointer-events: none; margin: 0;
  transform: translate(-50%, -50%) scale(1.04); opacity: 0.92;
  box-shadow: 0 14px 30px -10px rgba(0,0,0,0.8); border-color: var(--acc, var(--fx-gold)); }
/* Faz 10c düzeltme: kart görselli hayalette KUTU gölgesi, saydam köşelerde koyu bir
   dikdörtgen olarak görünüyordu ("çerçevenin dışı silinmemiş" hissi). drop-shadow
   filtresi gölgeyi kartın SİLUETİNE uydurur; kutu arka planı/kenarı tamamen kalkar. */
.bx-ghost.has-card { box-shadow: none; border: 0; background: none; border-radius: 0;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,0.75)); }
.bx-ghost.has-card .bx-card { overflow: visible; border-radius: 0; }
/* Sürükleme sırasında havuzdaki kart yerinde soluk kalır. */
.bx-pool2 .bx-role { touch-action: pan-y; }

/* ============ Faz 10c: gerçek koleksiyon kartları + manyetik yerleştirme ============ */

/* Kart görseli yüklendiyse metin katmanları gizlenir; kart kendisi zaten adı taşıyor. */
.bx-role.has-card .bx-role-top,
.bx-role.has-card .bx-role-eb,
.bx-role.has-card .bx-role-nm { display: none; }
.bx-role.has-card { padding: 0; background: none; border: 0; gap: 0; }
.bx-pool2 .bx-role.has-card:hover { transform: translateY(-3px); }

.bx-card { position: relative; overflow: hidden; border-radius: 8px; line-height: 0; }
.bx-card-img { width: 100%; height: auto; display: block; }

/* SAHADA: kartın yalnız ÜST kısmı (yüz + çerçeve) — alt yazı bloğu kırpılır.
   %62 yükseklik = yüz ve üst çerçeve; saha kalabalıklaşmaz ama kart tanınır. */
.bx-role.is-onpitch.has-card { width: 78px; box-shadow: none; }
.bx-role.is-onpitch.has-card .bx-card { aspect-ratio: 839 / 744; }
.bx-role.is-onpitch.has-card .bx-card-img { position: absolute; inset: 0; width: 100%; height: auto; }
.bx-role.is-onpitch.has-card::after {          /* alt kenara yumuşak geçiş */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 22px; border-radius: 0 0 8px 8px;
  background: linear-gradient(180deg, transparent, rgba(8,10,16,0.92)); pointer-events: none; }

/* HAVUZDA: kartın tamamı */
.bx-pool2 .bx-role.has-card .bx-card { aspect-ratio: 839 / 1200; }

/* MIKNATIS: rolün kendi slotu yaklaşınca büyür + altın hâle. */
.bx-slot2.is-magnet .bx-slot2-dot {
  border-style: solid; border-color: var(--fx-gold);
  box-shadow: 0 0 0 6px rgba(212,175,55,0.22), 0 0 18px 4px rgba(212,175,55,0.35);
  transform: scale(1.35); }
.bx-slot2-dot { transition: transform .16s cubic-bezier(.2,.7,.2,1), box-shadow .16s ease, border-color .16s ease; }
/* Yerleşme anı: kısa "tık" hareketi. */
@keyframes bx-snap { 0% { transform: scale(1.22); } 60% { transform: scale(0.96); } 100% { transform: scale(1); } }
.bx-slot2.is-filled .bx-role { animation: bx-snap .26s cubic-bezier(.2,.7,.2,1); }

@media (prefers-reduced-motion: reduce) {
  .bx-slot2-dot { transition: none; }
  .bx-slot2.is-magnet .bx-slot2-dot { transform: none; }
  .bx-slot2.is-filled .bx-role { animation: none; }
}

/* ======================= FAZ 14D — DENEYİM TURU ==========================
   Kural değişmez; yalnız etkileşim görünür hâle gelir. Bu blok İKİ yüzeyde de
   geçerlidir (tam sayfa + gömülü bölüm); oran/yoğunluk ayarları index.html'de
   .tk-* kapsamında kalır. */

/* --- Yerleşik kart artık tutulabilir bir nesnedir --- */
.bx-slot2.is-filled .bx-role.is-onpitch { cursor: grab; }
.bx-slot2.is-filled .bx-role.is-onpitch:active { cursor: grabbing; }
.bx-slot2.is-filled .bx-role.is-onpitch:focus-visible { outline: 2px solid var(--acc, var(--fx-gold)); outline-offset: 3px; }
/* × KALIR ama küçülür ve yalnız hover/odakta görünür (erişilebilirlik alternatifi:
   odak alabildiği için klavye kullanıcısına kaybolmaz). */
.bx-role-rm { width: 17px; height: 17px; font-size: 0.66rem; top: -6px; right: -6px;
  opacity: 0; transition: opacity 0.15s ease; }
.bx-slot2:hover .bx-role-rm, .bx-slot2:focus-within .bx-role-rm,
.bx-role-rm:focus, .bx-role-rm:focus-visible { opacity: 1; }

/* --- Mini seçenekler (dokunmatik/klavye): Kaldır · (custom'da) Taşı --- */
.bx-cardmenu { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 6px);
  z-index: 12; display: flex; gap: 4px; padding: 4px; border-radius: 10px;
  background: rgba(8,10,16,0.96); border: 1px solid var(--fx-gold-dim);
  box-shadow: 0 10px 24px rgba(0,0,0,0.6); }
.bx-cardmenu-btn { font-family: var(--fx-font-display); text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 0.6rem; line-height: 1; white-space: nowrap; padding: 7px 9px; min-height: 28px; border-radius: 7px;
  background: rgba(255,255,255,0.05); border: 1px solid var(--fx-line-soft); color: var(--fx-ink); cursor: pointer; }
.bx-cardmenu-btn:hover, .bx-cardmenu-btn:focus-visible { border-color: var(--fx-gold); color: var(--fx-gold); }
/* Saha `overflow:hidden`: kenardaki kartın menüsü içeri doğru hizalanır, kırpılmaz. */
.bx-cardmenu--sag { left: 0; right: auto; transform: translate(0, 6px); }
.bx-cardmenu--sol { left: auto; right: 0; transform: translate(0, 6px); }
.bx-slot2.is-moving .bx-role.is-onpitch { opacity: 0.55; border-color: var(--fx-gold); }

/* --- Hedef gösterimi: "bu kart nereye?" --- */
/* 433/352: hedef nokta altın nabız + parıltı; diğer noktalar geri çekilir. */
.bx-pitch2.is-aiming .bx-slot2:not(.is-target) { opacity: 0.42; }
.bx-pitch2.is-aiming .bx-slot2.is-target { opacity: 1; }
.bx-slot2.is-target .bx-slot2-dot { animation: bx-pulse 1.4s ease-in-out infinite; }
.bx-slot2.is-target .bx-slot2-dot::before { content: ''; position: absolute; left: 50%; top: 50%;
  width: 100%; height: 100%; margin: -50% 0 0 -50%; border-radius: 50%;
  box-shadow: 0 0 16px 4px var(--acc-dim, rgba(212,175,55,0.35)); pointer-events: none; }
/* Serbest mod: ızgara belirir ("her yere koyabilirsin"), dolu bölgeler soluklaşır. */
.bx-pitch-custom.is-gridon { background-image:
  linear-gradient(rgba(212,175,55,0.16) 1px, transparent 1px),
  linear-gradient(90deg, rgba(212,175,55,0.16) 1px, transparent 1px); }
.bx-pitch-custom.is-gridon .bx-slot2.is-filled { opacity: 0.55; }
/* Havuz, sahadan gelen kart için "bırak = kaldır" alanıdır. */
.bx-pool2.is-dropzone { outline: 2px dashed var(--acc, var(--fx-gold)); outline-offset: 6px; border-radius: 12px; }

/* --- Havuz kartında mikro ipucu: hover/odakta "→ DF noktası" --- */
.bx-pool2 .bx-role { position: relative; }
.bx-role-hint { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 4px);
  font-family: var(--fx-font-display); text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 0.56rem; white-space: nowrap; color: var(--fx-gold); pointer-events: none;
  background: rgba(8,10,16,0.92); border: 1px solid var(--fx-gold-dim); border-radius: 6px;
  padding: 3px 7px; opacity: 0; transition: opacity 0.15s ease; z-index: 8; }
.bx-pool2 .bx-role:hover .bx-role-hint,
.bx-pool2 .bx-role:focus-visible .bx-role-hint,
.bx-pool2 .bx-role.is-pending .bx-role-hint { opacity: 1; }

/* --- OTOMATİK DİZ: kartın noktasına "uçuşu" --- */
@keyframes bx-flyin {
  0%   { transform: translate(26px, -18px) scale(0.72); opacity: 0; }
  60%  { transform: translate(0, 0) scale(1.1); opacity: 1; }
  100% { transform: translate(0, 0) scale(1); opacity: 1; }
}
.bx-role.is-flyin { animation: bx-flyin 0.34s cubic-bezier(.2,.7,.2,1); }

@media (prefers-reduced-motion: reduce) {
  .bx-role.is-flyin { animation: none; }          /* uçuş yok — anlık yerleşim (ses korunur) */
  .bx-slot2.is-target .bx-slot2-dot { animation: none; }
  .bx-role-rm, .bx-role-hint { transition: none; }
}

/* ================= Faz 11: serbest mod ("kendi sistemin") ================= */
/* Slot şablonu yok; kartlar kendi {x,y} yüzdelerinde durur ve taşınabilir. */
.bx-pitch-custom { background-image:
  linear-gradient(rgba(212,175,55,0.045) 1px, transparent 1px),
  linear-gradient(90deg, rgba(212,175,55,0.045) 1px, transparent 1px);
  background-size: 4% 4%;                 /* görünmez ızgaranın çok hafif izi */
  background-position: center; }
.bx-slot2.bx-free { cursor: grab; }
.bx-slot2.bx-free:active { cursor: grabbing; }
/* Serbest modda boş slot noktası yoktur; yalnız yerleşmiş kartlar bulunur. */
.bx-pitch-custom .bx-slot2-dot { display: none; }