/* Build yap (build.html): solda oyunun dükkanı, sağda oyundaki plan tahtası */
.bd-yerlesim { display: grid; grid-template-columns: minmax(0, 470px) minmax(0, 1fr); gap: 14px; align-items: start; }

/* ---------------------------------------------------------------- dükkan: üste yapışık, kendi içinde kayar.
   Tahta en az aynı boyda: iki sütun aynı yerde biter (yapışkan sütun ızgara satırının sonunda durur). */
.bd-katalog { position: sticky; top: 152px; display: grid; grid-template-rows: auto minmax(0, 1fr); height: calc(100vh - 168px); min-height: 520px;
  border-radius: 14px; overflow: hidden; border: 1px solid var(--cizgi-2); background: #100d0a; box-shadow: 0 30px 60px rgba(0, 0, 0, .45); isolation: isolate; transition: box-shadow .2s, border-color .2s; }
.bd-katalog.sil-hedef { border-color: var(--kirmizi); box-shadow: 0 0 0 2px var(--kirmizi), 0 0 30px rgba(255, 90, 78, .35); }
.bd-katalog.sil-hedef::after { content: "Bırak: plandan çıkar"; position: absolute; inset: auto 12px 12px; z-index: 5; padding: 10px; border-radius: 8px; background: rgba(120, 20, 18, .9); color: #fff; text-align: center; font: 700 14px/1 var(--f-arayuz); }
.bd-kt-ust { display: grid; gap: 10px; padding: 10px 12px 12px; border-bottom: 1px solid rgba(214, 190, 150, .16); background: rgba(10, 8, 6, .9); }
.bd-sekmeler { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.bd-sekmeler button { display: flex; align-items: center; justify-content: center; gap: 6px; height: 46px; padding: 0 6px; border: 0; border-radius: 8px; background: none; color: var(--krem-3);
  font: 700 13.5px/1 var(--f-baslik); text-transform: uppercase; transition: color .2s, background .2s; }
.bd-sekmeler button img { width: 32px; height: 32px; filter: grayscale(.6) brightness(.75); transition: filter .2s, transform .25s cubic-bezier(.2, .9, .3, 1.4); }
.bd-sekmeler button em { min-width: 22px; height: 18px; padding: 0 5px; display: grid; place-items: center; border-radius: 9px; background: rgba(247, 233, 213, .08); font: 700 10.5px/1 var(--f-arayuz); font-style: normal; }
.bd-sekmeler button:hover { color: var(--krem); }
.bd-sekmeler button:hover img { filter: none; transform: rotate(-6deg); }
.bd-sekmeler button[aria-selected="true"] { color: var(--sr); background: color-mix(in srgb, var(--sr) 14%, transparent); box-shadow: inset 0 -3px 0 var(--sr); }
.bd-sekmeler button[aria-selected="true"] img { filter: none; }
.bd-sekmeler button[aria-selected="true"] em { background: var(--sr); color: var(--murekkep); }
.bd-ara { display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--cizgi-2); background: rgba(247, 233, 213, .04); }
.bd-ara svg { width: 17px; height: 17px; color: var(--krem-3); flex: none; }
.bd-ara .girdi { border: 0; background: none; height: 40px; padding: 0; }
.bd-kt-not { display: flex; align-items: center; gap: 8px; margin: 0; font: 500 12.5px/1.3 var(--f-arayuz); color: var(--krem-3); }
.bd-kt-not svg { width: 15px; height: 15px; flex: none; color: var(--ana-2); }
.bd-kt-not b { color: var(--krem); }
.bd-raf { position: relative; overflow-y: auto; overscroll-behavior: contain; padding: 10px 10px 16px; scrollbar-width: thin; }
.bd-raf::before { content: ""; position: absolute; inset: 0; z-index: -1; min-height: 100%; background: linear-gradient(rgba(16, 13, 10, .84), rgba(16, 13, 10, .92)), var(--raf-arka, none) center top / cover; }
.bd-raf[data-yuva="silah"] { --raf-arka: url("oyun/dukkan/arka-silah.webp"); }
.bd-raf[data-yuva="dayaniklilik"] { --raf-arka: url("oyun/dukkan/arka-dayaniklilik.webp"); }
.bd-raf[data-yuva="ruh"] { --raf-arka: url("oyun/dukkan/arka-ruh.webp"); }
.bd-kademe { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 8px; align-items: start; padding: 8px 0; border-bottom: 1px dashed rgba(214, 190, 150, .14); }
.bd-kademe:last-child { border-bottom: 0; }
.bd-etiket { width: 66px; margin-top: 6px; transform: rotate(-6deg); filter: drop-shadow(2px 3px 0 rgba(0, 0, 0, .35)); user-select: none; }
.bd-kademe:nth-child(even) .bd-etiket { transform: rotate(4deg); }
.bd-kt-kartlar { display: flex; flex-wrap: wrap; gap: 6px 5px; }
.bd-k-oge, .bd-oge { position: relative; padding: 0; border: 0; background: none; color: inherit; border-radius: 4px; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.bd-k-oge .oyun-kart { --ok-g: 60px; transition: transform .18s cubic-bezier(.2, .9, .3, 1.4), box-shadow .18s; }
.bd-k-oge:hover .oyun-kart, .bd-k-oge:focus-visible .oyun-kart { transform: translateY(-3px) scale(1.06); box-shadow: 0 10px 20px rgba(0, 0, 0, .55), 0 0 0 2px var(--ok-renk); }
.bd-k-oge.var .oyun-kart { filter: brightness(.82) saturate(.8); }
.bd-var { position: absolute; z-index: 3; left: -4px; top: -4px; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: var(--yesil); color: var(--murekkep); box-shadow: 0 2px 6px rgba(0, 0, 0, .5); }
.bd-var svg { width: 12px; height: 12px; stroke-width: 3; }
html.hareket .bd-k-oge { animation: pat .35s cubic-bezier(.2, .8, .2, 1.3) backwards; animation-delay: calc(var(--i, 0) * 7ms); }

/* ---------------------------------------------------------------- tahta: oyundaki plan paneli */
.bd-pano { display: grid; grid-template-rows: auto auto 1fr auto; gap: 14px; min-width: 0; min-height: calc(100vh - 168px); padding: 18px; border-radius: 14px;
  background: linear-gradient(rgba(54, 45, 33, .9), rgba(40, 33, 24, .95)), url("oyun/dukkan/arka-genel.webp") center / cover;
  box-shadow: inset 0 0 0 1px rgba(214, 190, 150, .18), 0 20px 50px rgba(0, 0, 0, .4); }
.bd-pano-ust { position: relative; }
/* Tahtadaki ikinci kahraman seçici: düğmesi gizli, kart ya da ad tıklanınca açılır */
.bd-pano-secici { position: absolute; left: 0; top: 100%; width: 0; height: 0; }
.bd-pano-secici .k-secici-dug { display: none; }
.bd-pano-secici .k-secici-pop { top: 8px; }
button.bd-kart-resim { padding: 0; border: 0; color: inherit; cursor: pointer; transition: transform .2s, box-shadow .2s; }
button.bd-kart-resim:hover { transform: rotate(-1deg) scale(1.04); box-shadow: 0 0 0 2px var(--krem-3), 0 12px 24px rgba(0, 0, 0, .5); }
.bd-kahraman-ad { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.bd-kahraman-ad svg { width: 18px; height: 18px; color: var(--krem-3); transition: color .15s; }
.bd-kahraman-ad:hover svg { color: var(--krem); }
.bd-pano-bas { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 16px; align-items: center; }
.bd-kart-resim { width: 74px; aspect-ratio: 280 / 380; border-radius: 9px; overflow: hidden; background: rgba(0, 0, 0, .35); box-shadow: 0 0 0 2px rgba(214, 190, 150, .3), 0 12px 24px rgba(0, 0, 0, .5); transform: rotate(-3deg); display: grid; place-items: center; }
.bd-kart-resim img { width: 100%; height: 100%; object-fit: cover; }
.bd-kart-resim.bos svg { width: 28px; height: 28px; color: var(--krem-3); }
html.hareket .bd-kart-resim img { animation: hafifBelir .4s ease-out; }
.bd-kimlik { display: grid; gap: 6px; min-width: 0; }
.bd-kimlik small { font: 600 11px/1 var(--f-arayuz); letter-spacing: .12em; text-transform: uppercase; color: rgba(241, 227, 204, .6); }
.bd-kimlik h2 { font-size: clamp(24px, 2.6vw, 34px); }
.bd-ad { max-width: 460px; height: 38px; background: rgba(0, 0, 0, .25); border-color: rgba(214, 190, 150, .2); font: 600 14px/1 var(--f-arayuz); }
.bd-ozet { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }
.bd-ozet-kutu { display: grid; gap: 5px; padding: 9px 12px; border-radius: 8px; background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 1px rgba(214, 190, 150, .14); }
.bd-ozet-kutu small, .bd-ozet-yuva > span { font: 600 10.5px/1 var(--f-arayuz); letter-spacing: .1em; text-transform: uppercase; color: rgba(241, 227, 204, .6); }
.bd-ozet-kutu b { display: inline-flex; align-items: center; gap: 5px; font: 700 20px/1 var(--f-baslik); }
.bd-ozet-kutu .ruh-ikon { width: 15px; height: 15px; color: #a6f5da; }
.bd-ozet-yuva { flex: 1 1 260px; display: grid; gap: 8px; align-content: center; padding: 9px 12px; border-radius: 8px; background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 1px rgba(214, 190, 150, .14); }
.bd-cubuk { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: rgba(0, 0, 0, .3); gap: 2px; }
.bd-cubuk i { background: var(--c); transition: flex .4s cubic-bezier(.2, .8, .2, 1); }
.bd-ozet-yuva > span { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.bd-ozet-yuva em { font-style: normal; display: inline-flex; align-items: center; gap: 5px; }
.bd-ozet-yuva em::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
.bd-uyari { flex-basis: 100%; display: flex; align-items: center; gap: 8px; margin: 0; padding: 9px 12px; border-radius: 8px; background: rgba(255, 225, 77, .1); color: var(--sari); font: 500 13px/1.35 var(--f-arayuz); }
.bd-uyari svg { width: 16px; height: 16px; flex: none; }

.bd-kategoriler { display: flex; flex-wrap: wrap; gap: 10px; align-content: start; }
.bd-kat { --kart-g: 62px; position: relative; flex: 1 1 calc(var(--w) * (var(--kart-g) + 6px) + 22px); max-width: 100%; min-width: 0; display: grid; grid-template-rows: auto auto 1fr; align-content: start; gap: 8px;
  padding: 9px 10px 22px; border-radius: 4px; background: rgba(20, 16, 11, .55); box-shadow: inset 0 0 0 1px rgba(214, 190, 150, .14); cursor: pointer; transition: box-shadow .2s, background .2s; }
.bd-kat.istege { background: rgba(28, 34, 52, .58); box-shadow: inset 0 0 0 1px rgba(120, 150, 220, .26); }
.bd-kat.hedef { box-shadow: inset 0 0 0 2px var(--ana-2), 0 0 18px rgba(227, 10, 23, .18); }
.bd-kat.uzerinde { background: rgba(60, 46, 30, .7); box-shadow: inset 0 0 0 2px #f1e3cc; }
.bd-kat-bas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.bd-kat-ad { flex: 1 1 110px; min-width: 0; height: 28px; padding: 0 6px; margin-left: -6px; border: 1px solid transparent; border-radius: 5px; background: none; color: #f1e3cc; font: 700 14px/1 var(--f-arayuz); cursor: text; }
.bd-kat-ad:hover { border-color: rgba(214, 190, 150, .2); }
.bd-kat-ad:focus { outline: 0; border-color: rgba(241, 227, 204, .5); background: rgba(0, 0, 0, .25); }
.bd-istege { padding: 2px 6px; border-radius: 3px; background: rgba(110, 150, 230, .25); color: #b9cdf7; font: 700 10px/1.3 var(--f-arayuz); letter-spacing: .06em; text-transform: uppercase; }
.bd-kat-ruh { display: inline-flex; align-items: center; gap: 4px; font: 700 12.5px/1 var(--f-arayuz); color: #a6f5da; }
.bd-kat-ruh .ruh-ikon { width: 12px; height: 12px; }
.bd-kat-arac { display: inline-flex; gap: 2px; }
.bd-kat-arac button { width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; background: rgba(0, 0, 0, .2); color: rgba(241, 227, 204, .55); transition: color .15s, background .15s; }
.bd-kat-arac button svg { width: 14px; height: 14px; }
.bd-kat-arac button:hover { color: #f1e3cc; background: rgba(0, 0, 0, .4); }
.bd-kat-arac button[aria-pressed="true"] { color: var(--murekkep); background: #f1e3cc; }
.bd-kat-arac button[data-is="hedef"][aria-pressed="true"] { background: var(--ana); color: #fff; }
.bd-kat-arac button.onay { background: var(--kirmizi); color: #fff; }
.bd-kat-ac { width: 100%; height: 30px; padding: 0 8px; border: 1px solid rgba(214, 190, 150, .2); border-radius: 5px; background: rgba(0, 0, 0, .22); color: rgba(241, 227, 204, .8); font: 500 12.5px/1 var(--f-arayuz); }
.bd-kat-ac:focus { outline: 0; border-color: rgba(241, 227, 204, .5); }
.bd-kartlar { display: flex; flex-wrap: wrap; gap: 6px; align-content: start; min-height: calc(var(--kart-g) * 1.48); }
.bd-oge .oyun-kart { --ok-g: var(--kart-g); transition: transform .18s cubic-bezier(.2, .9, .3, 1.4), box-shadow .18s, opacity .2s; }
.bd-oge:hover .oyun-kart, .bd-oge:focus-visible .oyun-kart { transform: translateY(-3px) scale(1.06); box-shadow: 0 10px 20px rgba(0, 0, 0, .55), 0 0 0 2px var(--ok-renk); }
.bd-oge.bd-kaynak .oyun-kart { opacity: .3; transform: scale(.94); }
html.hareket .bd-oge.yeni .oyun-kart { animation: pat .45s cubic-bezier(.2, .8, .2, 1.4); }
html.hareket .bd-oge.titre .oyun-kart { animation: titre .4s ease; }
@keyframes titre { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.bd-bos { margin: 0; align-self: center; padding: 14px 8px; width: 100%; border: 1px dashed rgba(214, 190, 150, .25); border-radius: 6px; text-align: center; font: 500 12.5px/1.35 var(--f-arayuz); color: rgba(241, 227, 204, .5); }
.bd-kat-say { position: absolute; right: 8px; bottom: 5px; font: 600 10.5px/1 var(--f-arayuz); color: rgba(241, 227, 204, .4); }
.bd-kat-ekle { flex: 1 1 160px; min-height: 110px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px dashed rgba(214, 190, 150, .35); border-radius: 4px; background: rgba(0, 0, 0, .12);
  color: rgba(241, 227, 204, .7); font: 700 14px/1 var(--f-arayuz); transition: background .15s, color .15s, border-color .15s; }
.bd-kat-ekle svg { width: 18px; height: 18px; }
.bd-kat-ekle:hover { background: rgba(0, 0, 0, .25); color: #f1e3cc; border-color: rgba(241, 227, 204, .6); }
/* sürükleme */
.bd-yer { width: var(--kart-g); height: calc(var(--kart-g) * 1.48); border-radius: 4px; border: 2px dashed #f1e3cc; background: rgba(241, 227, 204, .08); }
.bd-hayalet { position: fixed !important; left: 0; top: 0; z-index: 400; --ok-g: 66px; pointer-events: none; box-shadow: 0 20px 40px rgba(0, 0, 0, .6), 0 0 0 2px #fff !important; opacity: .95; }
html.bd-surukleniyor, html.bd-surukleniyor * { cursor: grabbing !important; }
html.bd-surukleniyor body { user-select: none; }

.bd-dip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding-top: 12px; border-top: 1px solid rgba(214, 190, 150, .14); }
.bd-gercek { display: flex; align-items: flex-start; gap: 8px; margin: 0; max-width: 680px; font: 500 12.5px/1.45 var(--f-arayuz); color: rgba(241, 227, 204, .65); }
.bd-gercek svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.bd-gercek b { color: #f1e3cc; }
.ipucu-plan-not { margin: 0 0 8px; padding: 8px 10px; border-radius: 6px; background: rgba(247, 233, 213, .06); font-size: 12.5px; line-height: 1.4; color: var(--krem-2); }
.ipucu-plan-not b { display: block; margin-bottom: 3px; font: 600 10.5px/1 var(--f-arayuz); letter-spacing: .12em; text-transform: uppercase; color: var(--krem-3); }

/* kart menüsü */
.bd-menu { position: absolute; z-index: 300; display: grid; gap: 10px; padding: 12px; border-radius: 10px; background: #15110d; border: 1px solid var(--cizgi-2); box-shadow: 0 24px 50px rgba(0, 0, 0, .65); }
html.hareket .bd-menu { animation: buyuAc .18s cubic-bezier(.2, .8, .2, 1); }
.bd-menu-bas { display: grid; grid-template-columns: 34px minmax(0, 1fr) 28px; gap: 10px; align-items: center; }
.bd-menu-resim { width: 34px; height: 34px; border-radius: 6px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--sr); }
.bd-menu-resim img { width: 100%; height: 100%; object-fit: cover; }
.bd-menu-bas b { font: 700 14px/1.2 var(--f-arayuz); }
.bd-menu-kapat { width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; background: rgba(247, 233, 213, .06); color: var(--krem-3); }
.bd-menu-kapat svg { width: 15px; height: 15px; }
.bd-menu small { display: block; margin-bottom: 5px; font: 600 10.5px/1 var(--f-arayuz); letter-spacing: .1em; text-transform: uppercase; color: var(--krem-3); }
.bd-menu textarea { width: 100%; resize: vertical; min-height: 56px; padding: 8px; border-radius: 6px; border: 1px solid var(--cizgi-2); background: rgba(0, 0, 0, .25); color: var(--krem); font: 500 13px/1.4 var(--f-metin); }
.bd-menu textarea:focus { outline: 0; border-color: var(--krem-3); }
.bd-menu-tas > div { display: flex; flex-wrap: wrap; gap: 4px; }
.bd-menu-tas button { padding: 5px 9px; border-radius: 999px; border: 1px solid var(--cizgi-2); background: none; color: var(--krem-2); font: 600 12px/1 var(--f-arayuz); }
.bd-menu-tas button:hover { border-color: var(--krem-3); color: var(--krem); }
.bd-menu-alt { display: flex; align-items: center; gap: 6px; }
.bd-menu-alt .bosluk { flex: 1; }
.bd-menu-alt .dug.kucuk { min-height: 32px; }

/* dar ekran: alt şerit (eklenecek kutu, toplam ruh) */
.bd-mobil { display: none; }
@media (max-width: 1100px) {
  .bd-yerlesim { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); }
  .bd-k-oge .oyun-kart { --ok-g: 56px; }
  .bd-kademe { grid-template-columns: 58px minmax(0, 1fr); }
  .bd-etiket { width: 56px; }
}
@media (max-width: 900px) {
  .bd-yerlesim { grid-template-columns: 1fr; }
  .bd-katalog { position: relative; top: 0; height: 66vh; min-height: 420px; order: 2; }
  .bd-pano { order: 1; min-height: 0; }
  .bd-mobil { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    background: rgba(12, 10, 8, .96); backdrop-filter: blur(10px); border-top: 1px solid var(--cizgi-2); }
  .bd-mobil label { flex: 1; display: grid; gap: 3px; min-width: 0; }
  .bd-mobil small { font: 600 10px/1 var(--f-arayuz); letter-spacing: .1em; text-transform: uppercase; color: var(--krem-3); }
  .bd-mobil select { width: 100%; height: 34px; padding: 0 8px; border-radius: 7px; border: 1px solid var(--cizgi-2); background: #1d1915; color: var(--krem); font: 600 13px/1 var(--f-arayuz); }
  .bd-mobil-ruh { display: inline-flex; align-items: center; gap: 4px; font: 700 15px/1 var(--f-baslik); color: #a6f5da; white-space: nowrap; }
  .bd-mobil-ruh .ruh-ikon { width: 13px; height: 13px; }
  body { padding-bottom: 64px; }
  /* bu sayfada araç çubuğu dar ekranda yapışmasın: dükkanı kapatıyordu */
  .arac-cubugu { position: static; }
}
@media (max-width: 640px) {
  .bd-pano { padding: 12px; }
  .bd-pano-bas { grid-template-columns: 60px minmax(0, 1fr); gap: 12px; }
  .bd-kart-resim { width: 60px; }
  .bd-kat { --kart-g: 56px; flex-basis: 100%; }
  .bd-k-oge .oyun-kart { --ok-g: 58px; }
  .bd-kademe { grid-template-columns: 1fr; }
  .bd-etiket { width: 70px; margin: 0; }
  .bd-sekmeler button { flex-direction: column; gap: 3px; height: 52px; font-size: 11.5px; }
  .bd-sekmeler button img { width: 24px; height: 24px; }
  .bd-sekmeler button em { display: none; }
  .bd-kat-arac button { width: 30px; height: 30px; }
  .arac-cubugu-ic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .arac-cubugu-ic > #bd-kahraman, .arac-cubugu-ic > .dug.ana { grid-column: 1 / -1; }
  .arac-cubugu-ic .bosluk { display: none; }
  .arac-cubugu-ic .dug { min-height: 40px; padding: 0 10px; font-size: 13px; white-space: normal; text-align: center; line-height: 1.15; }
  .arac-cubugu-ic .dug.ana { font-size: 16px; }
  #bd-kahraman .k-secici-dug { width: 100%; }
}