/* Tower and Defense — fantastik el kitabı teması
   UI parçaları: Kenney "Fantasy UI Borders" + "UI Pack: RPG Expansion" (CC0), altın/bronz tonlu.

   RESPONSIVE İLKELER
   - Sabit px yerine clamp()/min() ile akışkan ölçüler; ekranlar (menü, harita seçimi) taşınca kırpmak
     yerine kaydırır (justify-content:center yerine auto margin hilesi — ilk çocuk margin-top:auto,
     son çocuk margin-bottom:auto → sığarsa ortalar, sığmazsa üstten başlar).
   - Oyun canvas'ı js/ui/layout.js ile mevcut alana sığdırılır; CSS'teki max-* değerleri JS çalışmadan
     önceki yedek sınırlardır.
   - Kırılımlar: ≤1100 px (dar masaüstü), dikey ekran ≤1100 px (tablet/telefon: yan panel alta),
     ≤640 px (telefon), kısa yükseklik ≤800 px (kompakt yan panel). */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: #141017;
  --panel: #1e1723;
  --panel2: #262030;
  --border: #3a2f28;
  --text: #e8dcc0;
  --muted: #9a8f7a;
  --gold: #f0c040;
  --red: #e05545;
  --green: #7ec850;
  --ink: #3a2a18;          /* parşömen üzeri mürekkep */
  --serif: "Palatino Linotype", "Book Antiqua", Georgia, serif;
  /* Yan panel: 1290 px'e kadar 286 px, geniş ekranda 350 px'e çıkar (3 sütun kule kartı) */
  --side-w: clamp(286px, calc(100vw - 1004px), 350px);
  --gap: 8px;
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", system-ui, sans-serif;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;       /* iOS: uzun basışta (Sat) kopyala/paylaş balonu çıkmasın */
  -webkit-text-size-adjust: 100%;
  cursor: url("../assets/ui/cursorSword_gold.png") 6 2, auto;
}
button, .tcard, .mapCard, label {
  cursor: url("../assets/ui/cursorGauntlet_bronze.png") 10 4, pointer;
}

h1, h2, h3, .tipTitle, .pathHead, .ctxHead b {
  font-family: var(--serif);
  letter-spacing: 1px;
}

#bootError {
  display: none;
  position: fixed;
  top: 10px; left: 50%;
  transform: translateX(-50%);
  width: max-content;                /* left:50% shrink-to-fit'i 50vw'ye sınırlardı */
  max-width: calc(100vw - 20px);
  background: #4a1410;
  border: 1px solid var(--red);
  color: #ffd;
  padding: 10px 16px;
  z-index: 99;
  border-radius: 6px;
}

/* ---------- Açılış yükleme ekranı ----------
   Saf CSS: script'ler/atlas inerken de oynar. Karakterler atlas.png'den CSS flipbook'tur:
   3x ölçek → background-size 1536px (atlas 512), kare = background-position (koordinat × 3),
   koşu döngüsü steps(4) ile 4 ardışık kare üzerinde. Kahramanlar önde kaçar, canavarlar kovalar. */
#bootLoader {
  position: fixed; inset: 0; z-index: 95;   /* bootError (99) üstte kalsın */
  background: radial-gradient(ellipse at 50% 38%, #221a2b 0%, var(--bg) 62%, #0c0910 100%);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .6s ease;
  overflow: hidden;
}
#bootLoader.done { opacity: 0; pointer-events: none; }
.blCenter { text-align: center; transform: translateY(-9vh); }
.blTitle {
  font-size: clamp(30px, 6vw, 54px);
  color: var(--gold);
  animation: blGlow 2.2s ease-in-out infinite;
}
@keyframes blGlow {
  0%, 100% { text-shadow: 0 0 12px rgba(240, 192, 64, .25), 0 2px 0 #00000088; }
  50%      { text-shadow: 0 0 26px rgba(240, 192, 64, .60), 0 2px 0 #00000088; }
}
.blBar {
  width: min(420px, 70vw); height: 14px; margin: 22px auto 10px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 7px;
  overflow: hidden; position: relative;
}
.blBarFill {
  position: absolute; top: 0; bottom: 0; width: 45%; border-radius: 7px;
  background: linear-gradient(90deg, transparent, #f0c040cc 30%, #ffe9a0 50%, #f0c040cc 70%, transparent);
  animation: blSweep 1.4s linear infinite;
}
@keyframes blSweep { from { left: -50%; } to { left: 105%; } }
.blHint { color: var(--muted); font-family: var(--serif); letter-spacing: 1px; }
.blHint::after { content: ""; animation: blDots 1.6s infinite; }
@keyframes blDots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
.blGround {
  position: absolute; left: 0; right: 0; bottom: 0; height: max(22vh, 120px);
  background: linear-gradient(#241c2e, #17111d 30%, #0d0a12);
  border-top: 2px solid var(--border);
  box-shadow: 0 -14px 30px rgba(0, 0, 0, .55);
}
.blStage { position: absolute; left: 0; right: 0; bottom: max(22vh, 120px); height: 130px; }
.blSpr {
  position: absolute; bottom: 0; left: -150px;
  background: url("../assets/atlas.png") no-repeat;
  background-size: 1536px 1536px;
  image-rendering: pixelated;
}
@keyframes blCross { from { transform: translateX(0); } to { transform: translateX(calc(100vw + 300px)); } }
/* Kaçanlar (16×28 → 48×84) */
.blKnight  { width: 48px; height: 84px;  animation: blCross 9s linear -5.20s infinite, blFrKnight  .50s steps(4) infinite; }
.blElf     { width: 48px; height: 84px;  animation: blCross 9s linear -4.85s infinite, blFrElf     .50s steps(4) infinite; }
.blWizzard { width: 48px; height: 84px;  animation: blCross 9s linear -4.50s infinite, blFrWizzard .50s steps(4) infinite; }
/* Kovalayanlar */
.blGoblin  { width: 48px; height: 48px;  animation: blCross 9s linear -3.90s infinite, blFrGoblin  .45s steps(4) infinite; }
.blImp     { width: 48px; height: 48px;  animation: blCross 9s linear -3.65s infinite, blFrImp     .45s steps(4) infinite; }
.blChort   { width: 48px; height: 69px;  animation: blCross 9s linear -3.40s infinite, blFrChort   .45s steps(4) infinite; }
.blSkelet  { width: 48px; height: 48px;  animation: blCross 9s linear -3.15s infinite, blFrSkelet  .45s steps(4) infinite; }
.blOgre    { width: 96px; height: 108px; animation: blCross 9s linear -2.60s infinite, blFrOgre    .60s steps(4) infinite; }
@keyframes blFrKnight  { from { background-position: -576px  -300px;  } to { background-position: -768px  -300px;  } }   /* knight_m_run  192..240,100 */
@keyframes blFrElf     { from { background-position: -576px  -12px;   } to { background-position: -768px  -12px;   } }   /* elf_f_run     192..240,4   */
@keyframes blFrWizzard { from { background-position: -576px  -492px;  } to { background-position: -768px  -492px;  } }   /* wizzard_m_run 192..240,164 */
@keyframes blFrGoblin  { from { background-position: -1296px -120px;  } to { background-position: -1488px -120px;  } }   /* goblin_run    432..480,40  */
@keyframes blFrImp     { from { background-position: -1296px -192px;  } to { background-position: -1488px -192px;  } }   /* imp_run       432..480,64  */
@keyframes blFrChort   { from { background-position: -1296px -819px;  } to { background-position: -1488px -819px;  } }   /* chort_run     432..480,273 */
@keyframes blFrSkelet  { from { background-position: -1296px -264px;  } to { background-position: -1488px -264px;  } }   /* skelet_run    432..480,88  */
@keyframes blFrOgre    { from { background-position: -432px  -1140px; } to { background-position: -816px  -1140px; } }   /* ogre_run      144..240,380 (32px kare) */
@media (prefers-reduced-motion: reduce) {
  .blSpr { display: none; }
  .blTitle, .blBarFill { animation: none; }
  .blBarFill { left: 27.5%; }
}

/* 100dvh: mobil tarayıcıda adres çubuğu açılıp kapanınca da doğru yükseklik */
.screen { display: none; height: 100vh; height: 100dvh; flex-direction: column; }

/* ---------- Süslü çerçeve yardımcıları (Kenney fantasy borders, 48x48, dilim 16) ---------- */
.frame-box {
  border: 10px solid transparent;
  border-image: url("../assets/ui/frame-box-bronze.png") 16 stretch;
  background: var(--panel);
  background-clip: padding-box;
}
.frame-panel {
  border: 12px solid transparent;
  border-image: url("../assets/ui/frame-panel-bronze.png") 16 stretch;
  background: var(--panel);
  background-clip: padding-box;
}

/* ---------- Butonlar: parşömen (Kenney RPG pack) ---------- */
.btn {
  border: 10px solid transparent;
  /* em tabanlı: 15 px'te 8/12/12 px (eski değerler), üst bar 13,5 px'te 7/11, .big 22 px'te 12/18 —
     parşömen çerçevesi yazıyla birlikte ölçeklenir, küçük butonların yarısı çerçeve olmaz */
  border-width: .55em .8em .8em .8em;
  border-image: url("../assets/ui/buttonLong_beige.png") 10 14 16 14 fill stretch;
  background: transparent;
  color: #4a3520;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 15px;
  padding: 3px 10px;
  max-width: 100%;
  transition: filter .1s;
}
.btn:hover:not(:disabled) { filter: brightness(1.07); }
.btn:active:not(:disabled) {
  border-image-source: url("../assets/ui/buttonLong_beige_pressed.png");
  transform: translateY(2px);
}
.btn:disabled { filter: grayscale(.7) brightness(.75); cursor: url("../assets/ui/cursorSword_gold.png") 6 2, default; }
.btn.big { font-size: clamp(18px, 2.2vw, 22px); padding: 8px clamp(16px, 3vw, 34px); }
.btn.accent { filter: drop-shadow(0 0 6px rgba(240, 192, 64, .45)); }
.btn.accent:hover:not(:disabled) { filter: drop-shadow(0 0 9px rgba(240, 192, 64, .7)) brightness(1.05); }
.btn.accent:disabled { filter: grayscale(.7) brightness(.75); }   /* .btn.accent, .btn:disabled ile eşit özgüllükte ve sonra geliyordu → sönük görünmüyordu */
.btn.wide { width: 100%; margin-top: 8px; position: relative; overflow: hidden; }
.btn.danger {
  border-image-source: url("../assets/ui/buttonLong_brown.png");
  color: #f0e6d2;
}
.btn.danger:active:not(:disabled) { border-image-source: url("../assets/ui/buttonLong_brown_pressed.png"); }
.btn small { color: inherit; opacity: .75; font-size: 11px; font-family: "Segoe UI", sans-serif; font-weight: 400; }

/* ---------- Başlık süsleri ---------- */
.ornamented {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.4vw, 14px);
  max-width: 100%;
}
.ornamented::before, .ornamented::after {
  content: "";
  width: clamp(36px, 8vw, 96px);
  height: 22px;
  background: url("../assets/ui/divider-gold.png") no-repeat center / contain;
  flex: 0 0 auto;
}
.ornamented::before { transform: scaleX(-1); }

/* ---------- Ana menü ---------- */
#screen-menu {
  align-items: center;
  justify-content: flex-start;       /* dikey ortalama auto margin'lerle (taşınca kaydırılabilir kalır) */
  gap: clamp(6px, 1.2vh, 10px);
  padding: 12px 12px 28px;           /* alt: .credits (sabit) için pay; taşınca kaydırmanın sonu kenara yapışmasın */
  overflow-y: auto;
  overflow-x: hidden;
  background:
    radial-gradient(ellipse at 50% 28%, #2a2036 0%, var(--bg) 68%);
}
.menuInner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.4vh, 12px);
  width: min(952px, 100%);
  flex: 0 0 auto;
  margin-top: auto;
  margin-bottom: auto;   /* tanıtım sahnesi kaldırıldı (2026-09-15): menü kutusu dikeyde ortalanır */
  border: 16px solid transparent;
  border-image: url("../assets/ui/frame-ornate-gold.png") 20 stretch;
  background: rgba(20, 14, 26, .55);
  background-clip: padding-box;
  padding: clamp(12px, 2.6vh, 26px) clamp(12px, 4.5vw, 60px) clamp(14px, 3vh, 30px);
}
#menuTitle {
  font-size: clamp(26px, 5.4vw, 58px);
  letter-spacing: clamp(2px, .6vw, 7px);
  line-height: 1.1;
  text-align: center;
  color: var(--gold);
  text-shadow: 0 4px 0 #5d4a15, 0 8px 28px rgba(0, 0, 0, .85);
}
#menuSubtitle { color: var(--muted); font-size: clamp(13px, 1.6vw, 17px); font-family: var(--serif); font-style: italic; text-align: center; }
#heroRow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(6px, 1.6vw, 18px);
  margin: 6px 0 8px;
  min-height: 48px;
  max-width: 100%;
}
#heroRow canvas { image-rendering: pixelated; }
#screen-menu .btn { min-width: min(260px, 100%); white-space: normal; }
.menuRow { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; max-width: 640px; }
#screen-menu .menuRow .btn { min-width: 0; flex: 1 1 150px; }   /* #screen-menu .btn'yi ezer: 3'lü satır, telefonda sarar */

/* ---------- Toast bildirimleri ---------- */
#toasts {
  position: fixed;
  top: 14px; right: 14px;
  transition: top .2s;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  z-index: 90;
  pointer-events: none;
}
.toast {
  border: 10px solid transparent;
  border-image: url("../assets/ui/frame-box-gold.png") 16 / 10px stretch;
  background: rgba(20, 14, 26, .92);
  background-clip: padding-box;
  color: var(--text);
  padding: 4px 10px;
  font-size: 14px;
  max-width: min(340px, calc(100vw - 28px));
  animation: toastIn .25s ease-out;
  transition: opacity .5s, transform .5s;
}
body.playing #toasts { top: calc(var(--topbar-h, 54px) + 8px); }   /* oyunda üst barın altına in (yükseklik layout.js'ten); butonları örtme */
.toast.kp { color: var(--gold); font-family: var(--serif); }
.toast.ach { border-image-source: url("../assets/ui/frame-ornate-gold.png"); }
.toast.out { opacity: 0; transform: translateX(30px); }
@keyframes toastIn { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }

/* ---------- Başarım / perk listeleri ---------- */
.metaList { display: flex; flex-direction: column; gap: 6px; max-height: 52vh; overflow-y: auto; text-align: left; margin: 8px 0 12px; }
.metaRow {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--border); border-radius: 6px; background: var(--panel2); padding: 6px 10px;
}
.metaRow canvas { image-rendering: pixelated; flex: 0 0 auto; }
.metaRow .metaBody { flex: 1 1 120px; min-width: 0; }
.metaRow.locked { opacity: .55; filter: grayscale(.7); }
.metaRow .metaName { font-family: var(--serif); font-size: 15px; }
.metaRow .metaDesc { color: var(--muted); font-size: 12.5px; }
.metaRow .metaRight { margin-left: auto; text-align: right; white-space: nowrap; font-size: 13px; flex: 0 0 auto; }
/* #modalBox .btn (id özgüllüğü: block, width:100%, margin-top:10px) kuralını ezmek için id'li seçici */
#modalBox .metaRow .btn, .metaRow .btn { display: inline-block; width: auto; margin: 0; padding: 1px 10px; font-size: 13px; }
.kpBalance { color: var(--gold); font-family: var(--serif); font-size: 18px; margin-bottom: 6px; }

/* ---------- Ayarlar ---------- */
.setRow { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 4px; border-bottom: 1px dashed rgba(58,47,40,.6); }
.setRow label { font-family: var(--serif); font-size: 15px; text-align: left; }
.setRow input[type=range] { width: min(170px, 45%); flex: 0 0 auto; accent-color: #f0c040; }
.setRow input[type=checkbox] { width: 18px; height: 18px; flex: 0 0 auto; accent-color: #f0c040; }
.rankDots { color: var(--gold); letter-spacing: 2px; }
.credits { position: fixed; bottom: 8px; right: 12px; color: var(--muted); font-size: 12px; pointer-events: none; }

/* ---------- Harita seçimi ---------- */
#screen-mapselect {
  align-items: center;
  justify-content: flex-start;       /* dikey ortalama: h2 margin-top:auto, #btnMapBack margin-bottom:auto */
  gap: clamp(12px, 2.6vh, 26px);
  padding: 14px clamp(10px, 2vw, 24px);
  overflow-y: auto;
  overflow-x: hidden;
  background: radial-gradient(ellipse at 50% 30%, #241b2e 0%, var(--bg) 70%);
}
#screen-mapselect h2 { font-size: clamp(24px, 3.6vw, 36px); color: var(--gold); letter-spacing: 3px; text-align: center; margin-top: auto; flex: 0 0 auto; }
#btnMapBack { margin-bottom: auto; flex: 0 0 auto; }
#modeBar {
  display: flex;
  gap: clamp(10px, 2vw, 28px);
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 100%;
  flex: 0 0 auto;
  border: 12px solid transparent;
  border-image: url("../assets/ui/frame-panel-bronze.png") 16 stretch;
  background: var(--panel);
  background-clip: padding-box;
  padding: 6px clamp(8px, 1.5vw, 14px);
}
/* Mod çubuğu iki sütun: solda seçiciler (dikey), sağda seçilen/üzerine gelinen sınıfın önizleme paneli */
#modeGroups { display: flex; flex-direction: column; justify-content: center; gap: 10px; flex: 1 1 300px; min-width: 0; }
.modeGroup { display: flex; align-items: center; justify-content: flex-start; gap: 8px; flex-wrap: wrap; }
#pickPreview {
  display: grid;
  grid-template-columns: minmax(150px, 32%) minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  flex: 1 1 580px;
  min-width: 300px;
  max-width: 760px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(20, 14, 26, .55);
  padding: 12px;
  text-align: left;
  font-size: 12.5px;
  line-height: 1.35;
}
.pvHead { display: flex; align-items: center; gap: 12px; border-left: 3px solid var(--gold); padding-left: 10px; }
.pvPortrait { flex: 0 0 auto; display: flex; align-items: flex-end; justify-content: center; min-width: 64px; }
.pvPortrait canvas { image-rendering: pixelated; display: block; }
.pvVisual { min-width: 0; }
.pvPortraitArt {
  width: 100%; aspect-ratio: 2 / 3; min-width: 0; align-items: center;
  overflow: hidden; border: 1px solid var(--portrait-accent, #9c7841); border-radius: 5px;
  background: #17121c; box-shadow: 0 0 0 2px rgba(240, 192, 64, .08), 0 3px 12px rgba(0, 0, 0, .3);
}
.pvHeroArt { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: auto; }
.pvContent { min-width: 0; max-height: min(56vh, 520px); overflow-y: auto; scrollbar-gutter: stable; padding-right: 6px; }
.pvTitle { min-width: 0; }
.pvTitle b { display: block; font-family: var(--serif); font-size: 23px; line-height: 1.15; color: var(--gold); letter-spacing: .5px; }
.pvMeta { color: var(--muted); font-size: 12px; margin-top: 2px; }
.pvMeta .gi { width: 12px; height: 12px; }
.pvBadge { display: inline-block; margin-top: 5px; font-size: .92em; padding: 1px 8px; border-radius: 10px; border: 1px solid var(--border); color: var(--muted); }
.pvBadge.on { color: var(--green); border-color: var(--green); }
.pvBadge.locked { color: #e08070; border-color: #6a3a30; }
.pvBadge .gi { width: 11px; height: 11px; }
.pvDesc { color: var(--text); margin: 7px 0 6px; line-height: 1.4; }
.pvStats { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 2px 12px; }
.pvStat { display: flex; justify-content: space-between; gap: 6px; border-bottom: 1px dotted var(--border); padding: 1px 0; }
.pvStat span { color: var(--muted); }
.pvStat b { color: var(--text); white-space: nowrap; }
.pvSection { font-family: var(--serif); color: var(--gold); font-size: 13.5px; margin: 9px 0 3px; letter-spacing: .5px; }
.pvPaths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pvPath { border: 1px solid var(--border); border-radius: 6px; padding: 4px 6px 5px; background: rgba(0, 0, 0, .18); min-width: 0; overflow-wrap: anywhere; }
.pvPathHead { font-family: var(--serif); font-size: 13px; margin-bottom: 2px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pvPathHead small { color: var(--muted); font-size: .85em; }
.pvPathHead .gi { width: 14px; height: 14px; }
.pvTier { margin-top: 4px; }
.pvTierName { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 4px; font-weight: 600; font-size: .96em; }
.pvK { color: var(--muted); font-size: .84em; font-weight: 400; }
.pvCost { margin-left: auto; color: var(--gold); font-weight: 400; font-size: .88em; white-space: nowrap; }
.pvCost .gi { width: 11px; height: 11px; }
.pvTier.leg .pvTierName { color: #ff9a60; }
.pvTierDesc { color: var(--muted); font-size: .88em; line-height: 1.3; }
.pvAbility { line-height: 1.35; margin-bottom: 3px; }
.pvAbility b { color: var(--text); }
.pvEmpty { color: var(--muted); font-style: italic; padding: 12px 4px; }
/* Etiket çipleri (sınıf rolü / kahraman pasif-yetenek) ve Efsanevi K4 rozeti — açıklamalara "EFSANEVİ" yazmak yerine */
.pvTags, .tipTags { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 6px; }
.tag { display: inline-block; font-size: 10.5px; line-height: 1.4; padding: 0 7px; border-radius: 9px; border: 1px solid var(--border); background: rgba(240, 192, 64, .08); color: var(--muted); white-space: nowrap; }
#tooltip .tag { color: #5a3a2a; border-color: rgba(90, 58, 42, .35); background: rgba(90, 58, 42, .08); }
.legTag { display: inline-block; font-size: 10px; line-height: 1.4; padding: 0 6px; border-radius: 8px; background: linear-gradient(90deg, #ff6a3c, #f0c040); color: #201018; font-weight: 700; letter-spacing: .3px; vertical-align: 1px; }
/* Yan yana iki sütun ~840 px iç genişlik ister: 1000 px altında panel seçicilerin altına iner (900 ile 1000 arası yarım sarma olmasın) */
#modeGroups #diffSel, #modeGroups #loadoutSel, #modeGroups #heroSel { justify-content: flex-start; }   /* iki sütun düzeninde etiket, slotlar ve ipucu aynı hizada */
@media (max-width: 1000px) {
  #pickPreview { flex-basis: 100%; min-width: 0; max-width: none; }
  .pvContent { max-height: 48vh; }
  #modeGroups { flex-basis: 100%; }
  .modeGroup, #modeGroups #diffSel, #modeGroups #loadoutSel, #modeGroups #heroSel { justify-content: center; }
}
@media (max-height: 800px) and (min-width: 641px) { .pvContent { max-height: 46vh; } }
@media (max-height: 520px) { .pvContent { max-height: none; } }
@media (max-width: 640px) {
  .pvPaths { grid-template-columns: 1fr; }
  #pickPreview { font-size: 12px; grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .pvVisual { width: min(100%, 184px); margin: 0 auto; }
  .pvContent { max-height: 420px; }
  .pvTitle b { font-size: 22px; }
}
.loadSlot:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* Seçici kutuları: slotlar yan yana dizilir, dar ekranda sarar (eskiden stil yoktu → dikey yığılıyordu) */
#diffSel, #loadoutSel, #heroSel { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.modeLabel { color: var(--muted); font-family: var(--serif); font-size: 14px; margin-right: 4px; }
.modeHint { color: var(--muted); font-size: 12px; }
.modeBtn {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel2);
  color: var(--text);
  padding: 4px 12px;
  font-family: var(--serif);
  font-size: 14px;
  cursor: url("../assets/ui/cursorGauntlet_bronze.png") 10 4, pointer;
}
.modeBtn.active { border-color: var(--gold); color: var(--gold); background: #3d3050; }
.loadSlot {
  width: 44px; height: 48px;
  display: flex; align-items: flex-end; justify-content: center;
  border: 2px solid var(--border);
  border-radius: 6px;
  background: var(--panel2);
  opacity: .45;
  filter: grayscale(.8);
  cursor: url("../assets/ui/cursorGauntlet_bronze.png") 10 4, pointer;
  transition: opacity .1s, transform .1s;
}
.loadSlot canvas { image-rendering: pixelated; }
.loadSlot.on { opacity: 1; filter: none; border-color: var(--gold); transform: translateY(-2px); }
.loadSlot.peek { box-shadow: 0 0 0 2px rgba(240, 192, 64, .55), 0 0 10px rgba(240, 192, 64, .35); opacity: .85; }   /* yan panelde önizlenen slot */
.loadSlot.on.peek { opacity: 1; }
.loadSlot.locked.peek { opacity: .6; filter: grayscale(1) brightness(.95); }   /* kilitli slot önizlenirken de vurgu görünsün */
/* Yetki katmanı kilidi (misafir/üye): soluk + asma kilit rozeti; tıklanınca neden ipucu yazılır */
.loadSlot { position: relative; }
.loadSlot.locked { opacity: .3; filter: grayscale(1) brightness(.75); border-color: #4a2a24; }
.slotLock { position: absolute; right: 1px; top: 1px; pointer-events: none; }
.slotLock .gi { width: 12px; height: 12px; opacity: .95; }
.medal { font-size: 13px; margin-left: 4px; }

/* On bölümlük sefer geniş ekranda iki sıra; arenalar ayrı bir bölümde kalır. */
#mapCards {
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 100%;
  max-width: 1420px;
  flex: 0 0 auto;
}
.mapSection { min-width: 0; }
.mapSectionHead { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; margin: 0 4px 12px; }
.mapSectionHead h3 { color: var(--gold); font-size: 21px; }
.mapSectionHead p { color: var(--muted); font-size: 12px; }
.mapGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.3vw, 18px); }
@media (min-width: 1240px) { .campaignGrid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.arenaSection { border-top: 1px solid var(--border); padding-top: 22px; }
.arenaSection .mapSectionHead h3 { color: var(--text); }
.arenaGrid { max-width: 850px; }
.mapCard {
  display: flex;
  flex-direction: column;
  border: 12px solid transparent;
  border-image: url("../assets/ui/frame-round-bronze.png") 16 stretch;
  background: var(--panel);
  background-clip: padding-box;
  overflow: hidden;
  min-width: 0;
  transition: transform .12s;
  text-align: left;
}
.mapCard:hover:not(.locked), .mapCard:focus-visible {
  transform: translateY(-4px);
  border-image-source: url("../assets/ui/frame-round-gold.png");
}
.mapCard:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.mapCard.locked { cursor: url("../assets/ui/cursorSword_gold.png") 6 2, default; }
.mapCard.locked .mapThumb { filter: grayscale(1) brightness(.45); }
.mapPicture { position: relative; }
.mapThumb { display: block; width: 100%; height: auto; }
.mapOrder { position: absolute; left: 7px; top: 7px; display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 4px; border: 1px solid #987132; background: #1e1723ed; color: var(--gold); font: bold 18px var(--serif); }
.mapCard.locked .mapOrder { color: var(--muted); border-color: var(--border); }
.mapInfo { display: flex; flex-direction: column; flex: 1; gap: 7px; padding: 9px 8px 4px; }
.mapInfo h4 { font: bold clamp(16px, 1.4vw, 20px) var(--serif); color: var(--gold); line-height: 1.2; }
.mapDiff { color: var(--text); font-size: 11px; font-weight: 600; }
.mapDiff.diff_easy { color: #94c878; }
.mapDiff.diff_med { color: #d7bd7d; }
.mapDiff.diff_hard { color: #eca56d; }
.mapDiff.diff_extreme { color: #e88a82; }
.mapDiff.diff_master { color: #cb9ce4; }
.mapBrief { color: var(--text); font-size: 12px; line-height: 1.45; }
.mapTactic { color: var(--muted); font-size: 11px; line-height: 1.45; padding-top: 7px; border-top: 1px solid var(--border); }
.mapTactic b { color: var(--text); font-weight: 600; }
.mapBest { color: var(--muted); font-size: 11px; margin-top: auto; padding-top: 5px; }
.lockTag, .mapPlay { font-size: 11px; min-height: 20px; }
.lockTag { color: var(--muted); }
.mapPlay { color: var(--gold); display: flex; justify-content: space-between; align-items: center; }
.mapPlay span { font-size: 22px; line-height: 16px; }

/* ---------- Oyun ekranı ---------- */
#screen-game { flex-direction: column; }

#topbar {
  display: flex;
  flex-wrap: wrap;                   /* dar ekranda ikinci satıra iner; canvas kalan alana sığdırılır */
  align-items: center;
  gap: 4px 8px;
  padding: 6px clamp(6px, 1vw, 12px);
  background: linear-gradient(#241c2c, var(--panel));
  border-bottom: 2px solid var(--border);
  flex: 0 0 auto;
}
.statBox {
  border: 8px solid transparent;
  border-image: url("../assets/ui/frame-box-bronze.png") 16 / 8px stretch;
  background: var(--panel2);
  background-clip: padding-box;
  padding: 2px 8px;
  font-size: 15px;
  white-space: nowrap;
}
.statBox b { color: var(--gold); }
.statBox.eliteTag { color: #ff9a40; font-family: var(--serif); border-image-source: url("../assets/ui/frame-box-gold.png"); }

/* Dalga ilerleme çubuğu — Kenney RPG bar (sol/orta/sağ dilim) */
#waveBar {
  position: relative;
  width: clamp(70px, 11vw, 150px);
  height: 18px;
  margin: 0 7px;                     /* ::before/::after kapakları için yer */
  background: url("../assets/ui/barBack_horizontalMid.png") repeat-x center / auto 100%;
  transition: opacity .3s;
}
#waveBar::before, #waveBar::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 7px;
  background: url("../assets/ui/barBack_horizontalLeft.png") no-repeat center / 100% 100%;
  left: -7px;
}
#waveBar::after { left: auto; right: -7px; background-image: url("../assets/ui/barBack_horizontalRight.png"); }
#waveBarFill {
  position: absolute; left: 0; top: 3px; bottom: 3px; width: 0;
  background: url("../assets/ui/barGreen_horizontalMid.png") repeat-x center / auto 100%;
  transition: width .25s;
}
#livesBox b { color: var(--red); }
.tIcon { height: 15px; width: 15px; vertical-align: -2px; margin-right: 3px; }   /* game-icons.net SVG'leri (üst bar) */
.gi { height: 14px; width: 14px; vertical-align: -2px; }   /* game-icons.net SVG'leri (panel/modal/kart metin içi) */
.pathHead .gi, .branchHead .gi { height: 15px; width: 15px; }
.medal .gi { height: 16px; width: 16px; vertical-align: -3px; }
#eliteTag .gi { height: 13px; width: 13px; }
.btn .tIcon { height: 16px; width: 16px; vertical-align: -3px; margin-right: 0; }
#btnNextWave .tIcon { margin-right: 2px; }
#btnAuto.on .tIcon { filter: drop-shadow(0 0 5px rgba(240, 192, 64, .9)); }   /* otomatik dalga açık: altın ikon + parıltı (JS src'yi auto_on.svg yapar) */
.spacer { flex: 1; }
#topbar .btn { font-size: 13.5px; padding: 1px 6px; white-space: nowrap; }
#topbar .iconBtn { min-width: 44px; text-align: center; font-size: 15px; padding: 1px 8px; }   /* ⏸/▶/⚙/1x: eşit genişlik, ikon boyu */
.shake { animation: shakeAnim .4s; }
@keyframes shakeAnim {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

#gameArea {
  display: flex;
  flex: 1;
  min-height: 0;
  justify-content: center;
  align-items: flex-start;
  gap: var(--gap);
  padding: var(--gap);
}
/* Sarmalayıcı canvas'a yapışık kalır (JS boyutunu canvas'a eşitler) → güç çantası canvas'ın köşesinde durur */
#canvasWrap { position: relative; display: flex; flex: 0 1 auto; min-width: 0; max-width: 100%; }

/* ---------- Güç çantası (boss sandıklarından düşen tek kullanımlık güçler) ---------- */
/* --power-scale: canvas 1x'in altına küçülünce (layout.js yazar, 0,65–1) çanta da küçülür → daha az karo örter */
#powerBar {
  position: absolute;
  left: calc(18px * var(--power-scale, 1));
  bottom: calc(18px * var(--power-scale, 1));
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: flex-end;
  max-width: calc(100% - 36px);
  z-index: 5;
}
.powerSlot {
  position: relative;
  width: calc(54px * var(--power-scale, 1));
  height: calc(54px * var(--power-scale, 1));
  display: flex;
  align-items: center;
  justify-content: center;
  border: 8px solid transparent;
  border-image: url("../assets/ui/frame-box-gold.png") 16 / 8px stretch;
  background: rgba(20, 14, 26, .88);
  background-clip: padding-box;
  cursor: url("../assets/ui/cursorGauntlet_bronze.png") 10 4, pointer;
  transition: transform .1s;
}
.powerSlot:hover { transform: translateY(-3px); }
.powerSlot.active { background: #4a3a10; }
.powerSlot canvas { image-rendering: pixelated; max-width: calc(34px * var(--power-scale, 1)); max-height: calc(34px * var(--power-scale, 1)); }
.powerCount {
  position: absolute;
  right: -6px;
  bottom: -7px;
  background: var(--gold);
  color: #3a2a18;
  font-weight: 700;
  font-size: 11px;
  border-radius: 8px;
  padding: 0 5px;
}
.powerChip {
  align-self: center;
  background: rgba(20, 14, 26, .88);
  border: 1px solid var(--gold);
  color: var(--gold);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 12.5px;
  font-family: var(--serif);
  white-space: nowrap;
}

/* Yedek sınırlar: JS (G.layout.fit) çalışınca genişlik/yükseklik satır içi stil olarak verilir */
#gameCanvas {
  display: block;
  image-rendering: pixelated;
  border: 10px solid transparent;
  border-image: url("../assets/ui/frame-panel-bronze.png") 16 stretch;
  background: #000;
  background-clip: padding-box;
  max-width: 100%;
  max-height: calc(100vh - 76px);
  max-height: calc(100dvh - 76px);
  width: auto;
  height: auto;
  /* aspect-ratio KULLANMA: box-sizing:border-box ile oran kenarlık kutusuna uygulanır, içerik 960x633'e
     ezilirdi. Canvas'ın doğal 3:2 oranı zaten içerik kutusunda korunur. */
  touch-action: manipulation;        /* dokunmatikte çift dokunma yakınlaştırmasını engelle */
}

/* ---------- Yan panel ---------- */
#sidePanel {
  width: var(--side-w);
  flex: 0 0 var(--side-w);
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 100%;                  /* #gameArea'nın yüksekliği (üst bar sarsa bile doğru) */
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
#towerCards, #ctxPanel { flex: 0 0 auto; }
#towerCards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));   /* 286 px → 2, 350 px → 3 sütun */
  gap: 6px;
}
.tcard {
  position: relative;
  border: 9px solid transparent;
  border-image: url("../assets/ui/frame-box-bronze.png") 16 / 9px stretch;
  background: var(--panel);
  background-clip: padding-box;
  padding: 4px 4px 2px;
  text-align: center;
  min-width: 0;
  transition: filter .12s;
}
.tcard:hover { filter: brightness(1.15); }
.tcard.active {
  border-image-source: url("../assets/ui/frame-box-gold.png");
  background: #362a48;
}
.tcard.unaffordable { filter: grayscale(1) brightness(.6); }
.tcard.unaffordable:hover { filter: grayscale(1) brightness(.7); }
.tcardIcon { image-rendering: pixelated; height: 44px; }
.passiveLine span { color: var(--muted); }

/* ---------- Kahraman Özellik Ağacı (modal): 3 dal yan yana, telefonda alt alta ---------- */
#modalBox.wide { width: min(900px, 100%); }
.talentHead { display: flex; align-items: center; gap: 10px; text-align: left; margin-bottom: 6px; flex-wrap: wrap; }
.talentHead canvas { image-rendering: pixelated; }
.talentHead b { font-family: var(--serif); font-size: 17px; }
.talentHead small { color: var(--muted); }
.spBalance { margin-left: auto; color: var(--gold); font-family: var(--serif); font-size: 17px; white-space: nowrap; }
.talentHint { color: var(--muted); font-size: 12.5px; line-height: 1.4; margin-bottom: 8px; text-align: left; }
.talentTree {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  text-align: left;
  max-height: 58vh;
  overflow-y: auto;
  scrollbar-width: thin;
  padding: 2px;
}
.talentBranch {
  border: 9px solid transparent;
  border-image: url("../assets/ui/frame-box-bronze.png") 16 / 9px stretch;
  background: var(--panel2);
  background-clip: padding-box;
  padding: 3px 6px 5px;
  min-width: 0;
}
.branchHead { font-family: var(--serif); font-size: 15px; color: var(--gold); margin-bottom: 2px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.talentNode { border: 1px solid var(--border); border-radius: 6px; padding: 5px 7px 6px; margin-top: 5px; background: rgba(20, 14, 26, .5); }
.talentNode.bought { border-color: var(--green); background: rgba(40, 70, 30, .35); }
.talentNode.open { border-color: var(--gold); box-shadow: 0 0 7px rgba(240, 192, 64, .35); }
.talentNode.locked, .talentNode.nosp { opacity: .62; }
.nodeName { font-family: var(--serif); font-size: 14px; display: flex; justify-content: space-between; gap: 6px; align-items: baseline; }
.nodeCost { color: var(--gold); font-size: 11.5px; font-family: "Segoe UI", sans-serif; white-space: nowrap; }
.nodeDesc { color: var(--muted); font-size: 12px; line-height: 1.35; margin: 3px 0 5px; }
.nodeState { color: var(--green); font-size: 12.5px; }
/* #modalBox .btn (display:block, width:100%) daha SONRA geliyor → aynı özgüllük yetmez; .talentNode ile (1,2,0) */
#modalBox .talentNode .talentBuy { display: inline-block; width: auto; margin: 0; padding: 0 10px; font-size: 13px; }
@media (max-width: 700px) {
  .talentTree { grid-template-columns: 1fr; max-height: 62vh; }
  .spBalance { margin-left: 0; flex-basis: 100%; }
}
@media (max-height: 800px) { .talentTree { max-height: 56vh; } .talentNode { padding: 3px 6px 5px; margin-top: 4px; } .nodeDesc { margin: 2px 0 4px; } }
.xpBar { height: 10px; background: #2a2030; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; margin-top: 4px; }
#heroXpFill { height: 100%; background: linear-gradient(90deg, #ffd54f, #ff9a40); transition: width .2s; }
.tcardLabel { font-size: 13px; margin-top: 2px; font-family: var(--serif); overflow-wrap: anywhere; }
.tcardCost { display: block; color: var(--gold); font-size: 12px; font-family: "Segoe UI", sans-serif; }
.tcardKey {
  position: absolute;
  top: 0; left: 1px;
  background: rgba(38, 32, 48, .9);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 11px;
  color: var(--muted);
  padding: 0 5px;
}

#ctxPanel {
  border: 12px solid transparent;
  border-image: url("../assets/ui/frame-panel-bronze.png") 16 stretch;
  background: var(--panel);
  background-clip: padding-box;
  padding: 8px 10px;
  font-size: 14px;
  min-height: 150px;
}
#ctxPanel h3 { color: var(--gold); margin-bottom: 8px; }
.ctxHead {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 2px solid var(--border);
  padding-bottom: 8px;
  margin-bottom: 8px;
}
.ctxHead canvas { image-rendering: pixelated; }
.ctxHead b { font-size: 16px; }
.ctxHead small { color: var(--muted); }
.stars { letter-spacing: 2px; }
.statLine {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  border-bottom: 1px dashed rgba(58, 47, 40, .6);
}
.statLine b { color: var(--text); }
.delta { color: var(--green); font-style: normal; font-size: 12px; }
.previewTitle { color: var(--muted); font-size: 13px; margin: 6px 0 4px; }
#wavePreview { display: flex; flex-wrap: wrap; gap: 8px; }
.pvChip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 7px;
  font-size: 13px;
}
.pvChip canvas { image-rendering: pixelated; }
.pvChip.pvCamo { border-color: #7fb0d0; border-style: dashed; }          /* kamuflajlı: dedektör gerek */
.pvChip.pvFly { border-color: #5fc8b0; }                                  /* uçan: menzilli kule gerek */
.pvChip.pvBossChip { border-color: #ff6040; box-shadow: 0 0 6px rgba(255, 96, 64, 0.45); }
.pvWarns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pvWarn { font-size: 12px; color: #9fd0e8; background: rgba(90, 140, 180, 0.15); border: 1px solid rgba(127, 176, 208, 0.5); border-radius: 5px; padding: 2px 6px; }
.pvWarn.pvBoss { color: #ffb090; background: rgba(255, 96, 64, 0.12); border-color: rgba(255, 96, 64, 0.5); }
.tip { color: var(--muted); font-size: 12.5px; margin-top: 12px; line-height: 1.45; font-style: italic; }

/* ---------- Geliştirme yolları ---------- */
.pathBox {
  border: 9px solid transparent;
  border-image: url("../assets/ui/frame-box-bronze.png") 16 / 9px stretch;
  background: var(--panel2);
  background-clip: padding-box;
  padding: 3px 6px 5px;
  margin-top: 6px;
}
.pathHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  margin-bottom: 2px;
}
/* Yolun oynanış tarzı etiketi (Yıkıcı, Kontrolcü, Ekonomist...) */
.pathStyle {
  font-family: var(--sans, 'Segoe UI', sans-serif);
  font-size: 10.5px;
  letter-spacing: 0.5px;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0 4px;
  margin-left: 4px;
  vertical-align: middle;
  white-space: nowrap;
}
#tooltip .tipPaths { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.btn.wide.pathBtn { margin-top: 4px; padding: 2px 8px; font-size: 13.5px; }   /* .btn.wide'ın margin-top:8px'ini ezmek için aynı özgüllük */
.pathBtn:disabled { pointer-events: none; }
/* Taşı + Hedef yan yana */
.btnRow { display: flex; gap: 6px; }
.btnRow .btn.wide { flex: 1 1 0; min-width: 0; width: auto; padding-left: 4px; padding-right: 4px; font-size: 14px; }
/* Güçlendirme kitapları (kule paneli): üç eşit buton, ikon + sayaç + bedel; kitap rengi --tome ile iç halka, sahip olununca parıltı */
.tomeRow { margin-top: 8px; }
.tomeHead { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); margin-bottom: 2px; cursor: help; }
.tomeBtns { display: flex; gap: 6px; }
.btn.tomeBtn { flex: 1 1 0; min-width: 0; margin: 0; padding: 2px 2px 3px; font-size: 11px; line-height: 1.2; text-align: center; box-shadow: inset 0 0 0 2px var(--tome); }
.btn.tomeBtn.owned { box-shadow: inset 0 0 0 2px var(--tome), 0 0 6px var(--tome); }
.btn.tomeBtn:disabled { box-shadow: inset 0 0 0 2px var(--tome); opacity: .85; }
.btn.tomeBtn > .skillArt { display: block; margin: 3px auto 4px; border-color: var(--tome); }
.btn.tomeBtn small { display: block; font-size: 11px; opacity: .9; }
.btn.tomeBtn small.tomeCost { opacity: .7; font-size: 10.5px; }
.btn.tomeBtn small .gi { width: 10px; height: 10px; vertical-align: -1px; }
.tomeUp { font-style: normal; font-size: 12px; font-weight: 700; margin-left: 2px; }

#btnSell.selling::after, #btnMultiSell.selling::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: rgba(224, 85, 69, .35);
  animation: sellFillAnim .35s linear forwards;
}
@keyframes sellFillAnim { from { width: 0; } to { width: 100%; } }

/* ---------- Tooltip: parşömen sayfası ---------- */
#tooltip {
  display: none;
  position: fixed;
  z-index: 80;
  max-width: min(270px, calc(100vw - 16px));
  border: 10px solid transparent;
  border-image: url("../assets/ui/panel_beige.png") 12 fill stretch;
  padding: 4px 6px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink);
  pointer-events: none;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .6));
}
#tooltip .tipTitle { color: #7a2d1d; font-weight: 700; font-size: 14.5px; margin-bottom: 4px; }
#tooltip .tipDesc { margin-bottom: 6px; }
#tooltip .tipDelta { color: #2e6b2e; font-size: 12.5px; font-weight: 600; }
#tooltip .tipDelta div { display: flex; justify-content: space-between; gap: 12px; }
#tooltip .tipCost { color: #8a6d1a; margin-top: 6px; font-size: 12.5px; font-weight: 700; }
#tooltip .tipLock { color: #a02818; margin-top: 6px; font-size: 12.5px; }

/* ---------- Modal ---------- */
#modalOverlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 7, 13, .78);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  z-index: 50;
}
#modalBox {
  border: 18px solid transparent;
  border-image: url("../assets/ui/frame-ornate-gold.png") 20 stretch;
  background: var(--panel);
  background-clip: padding-box;
  padding: clamp(12px, 2.5vh, 20px) clamp(12px, 3vw, 30px) clamp(14px, 3vh, 24px);
  text-align: center;
  width: min(540px, 100%);
  max-height: min(85vh, 100%);
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 0 12px 48px rgba(0, 0, 0, .7);
}
#modalBox h2 {
  color: var(--gold);
  font-size: clamp(22px, 4vw, 32px);
  margin-bottom: 12px;
  letter-spacing: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1.5vw, 12px);
}
#modalBox h2::before, #modalBox h2::after {
  content: "";
  width: clamp(28px, 6vw, 72px);
  min-width: 12px;
  height: 18px;
  background: url("../assets/ui/divider-gold.png") no-repeat center / contain;
  flex: 0 1 auto;                    /* çok dar ekranda süsler küçülür, başlık metni taşmaz */
}
#modalBox h2::before { transform: scaleX(-1); }
#modalBox h2.defeat { color: var(--red); }
#modalBox h2.victory { color: var(--green); }
#modalBox p { margin-bottom: 10px; }
#modalBox .unlock { color: var(--gold); font-family: var(--serif); }
#modalBox .btn { display: block; width: 100%; margin-top: 10px; }
/* Sol üst köşe kapatma X'i (screens.showModal): sıfır yükseklikli yapışkan çubuk, başlığı itmez; kaydırma kabı
   kutunun kendisi olduğundan uzun modallerde (özellik ağacı, başarımlar) X köşede kalır. Düğme .btn değildir
   (#modalBox .btn tam genişlik yapar); koyu yuvarlak zemin, çünkü cancel.svg açık renklidir. */
.modalXBar { position: sticky; top: 0; height: 0; min-height: 0; flex: 0 0 auto; z-index: 3; text-align: left; }
.modalX {
  position: absolute; top: -10px; left: -10px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; margin: 0;
  border: 1px solid #8b7047; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #3a2d44, var(--panel2) 70%);
  box-shadow: 0 0 0 2px rgba(20, 14, 26, .9), 0 2px 6px rgba(0, 0, 0, .6);
  transition: filter .12s, border-color .12s;
}
.modalX .gi { display: block; width: 17px; height: 17px; vertical-align: 0; }
.modalX:hover { border-color: var(--gold); filter: brightness(1.2) drop-shadow(0 0 4px rgba(240, 192, 64, .45)); }
.modalX:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.modalX:active { transform: translateY(1px); filter: brightness(.9); }
/* X'in yanındaki başlık: süsler (flex 0 1 auto) kutu kenarına kadar uzayınca X ucuna biniyordu; iki yandan eşit
   boşluk bırakılır, başlık ortada kalır (lobide h2 başlık sütununun içindedir, bu kural ona değmez). */
#modalBox .modalXBar + h2 { padding: 0 32px; }
/* Ortak arena lobisi: kutu dolgusuz (padding:0) → X çerçevenin içinde kalır, başlık sütunu X kadar sağa kayar */
#modalBox.coopLobbyModal .modalX { top: 10px; left: 10px; }
#modalBox.coopLobbyModal .co2Header > div:first-child { padding-left: 34px; }
/* Dokunma hedefi: telefon, yatay telefon ve dokunmatik işaretçi (kompakt üst bar / dokunma kurallarıyla aynı koşullar) */
@media (max-width: 640px), (max-height: 520px), (pointer: coarse) {
  .modalX { width: 36px; height: 36px; top: -8px; left: -8px; }
  .modalX .gi { width: 19px; height: 19px; }
  #modalBox.coopLobbyModal .co2Header > div:first-child { padding-left: 42px; }   /* 36 px X'in yanında nefes payı */
}
.howtoList { text-align: left; margin: 0 0 14px 18px; line-height: 1.55; font-size: 14px; }
.howtoList li { margin-bottom: 7px; }

/* ---------- Oyun sonu Savaş Raporu (detaylı istatistik) ---------- */
#modalBox .endStats { text-align: left; margin: 2px 0 6px; max-height: 46vh; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; padding-right: 4px; }
.esHead { justify-content: center; }
.esChips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 6px; }
.esChip { display: inline-flex; align-items: center; gap: 5px; background: var(--panel2); border: 1px solid var(--border); border-radius: 6px; padding: 3px 8px; font-size: 13px; white-space: nowrap; }
.esChip small { color: var(--muted); }
.esTitle { color: var(--gold); font-family: var(--serif); font-size: 15px; margin: 10px 0 4px; display: flex; align-items: center; gap: 6px; }
.esRow { display: flex; align-items: center; gap: 6px; padding: 2px 0; font-size: 13px; border-bottom: 1px dashed rgba(58, 47, 40, .5); }
.esIcon { flex: 0 0 20px; display: flex; justify-content: center; }
.esIcon canvas { image-rendering: pixelated; display: block; }
.esName { flex: 0 0 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.esBarWrap { flex: 1 1 auto; height: 9px; background: #2a2030; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
.esBar { display: block; height: 100%; background: linear-gradient(90deg, #ffd54f, #ff9a40); }
.esVal { flex: 0 0 86px; text-align: right; font-family: var(--serif); white-space: nowrap; }
.esVal small { color: var(--muted); }
.esKills { flex: 0 0 56px; text-align: right; color: var(--muted); font-size: 12px; white-space: nowrap; }
.esCols { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; }
.esCols .statLine { font-size: 13px; }
.esCols .statLine b { color: var(--gold); }
.statLine.esSub span:first-child { color: var(--muted); }
.esNone { color: var(--green); font-size: 13.5px; }
.esWaveChips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 4px; }
.esWaveChip { background: rgba(224, 85, 69, .12); border: 1px solid rgba(224, 85, 69, .45); border-radius: 5px; padding: 1px 7px; font-size: 12.5px; white-space: nowrap; }
.esWaveChip b { color: var(--red); }
.esNote { color: var(--muted); font-size: 12px; margin-top: 4px; font-style: italic; }
.coopTable { width: 100%; border-collapse: collapse; font-size: 13px; }
.coopTable th { color: var(--muted); font-weight: normal; text-align: right; padding: 3px 4px; border-bottom: 1px solid var(--border); font-size: 12px; }
.coopTable td { padding: 4px; text-align: right; border-bottom: 1px dashed rgba(58, 47, 40, .5); white-space: nowrap; }
.coopTable th:first-child, .coopTable td:first-child { text-align: left; }
.coopTable td small { color: var(--muted); }
.coopDot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: baseline; }
.coopMvp { color: var(--gold); }
@media (max-width: 700px) {
  .esCols { grid-template-columns: 1fr; }
  .esName { flex-basis: 80px; }
  #modalBox .endStats { max-height: 42vh; }
  .coopTable { font-size: 12px; }
}

/* =====================================================================
   KIRILIM NOKTALARI
   ===================================================================== */

/* Dikey ekran (tablet/telefon): yan panel canvas'ın ALTINA iner, kule kartları sığdığı kadar sütun */
@media (orientation: portrait) and (max-width: 1100px) {
  #gameArea { flex-direction: column; align-items: center; }
  #canvasWrap { flex: 0 0 auto; }
  #sidePanel {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
  }
  #towerCards { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }   /* auto-fit: kart hep 6, boş iz kalmasın */
  #ctxPanel { min-height: 0; }
}
/* Yatay telefon (kısa ve dar): daha dar yan panel, kompakt kartlar */
@media (orientation: landscape) and (max-width: 900px) {
  :root { --side-w: 230px; }
  #towerCards { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); }
  /* #towerCards ile özgüllük artırıldı: aşağıdaki (max-height:800px) bloğu yalın seçicilerle 36px/12.5px yapar */
  #towerCards .tcardIcon { height: 32px; }
  #towerCards .tcardLabel { font-size: 12px; }
  #ctxPanel { font-size: 13px; padding: 6px 8px; }
}

/* Telefon (≤640 px): daha küçük tipografi, 2 sütun harita kartı, sıkı üst bar */
@media (max-width: 640px) {
  .mapGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .mapCard { border-width: 8px; }
  .mapInfo { padding: 7px 5px 3px; gap: 6px; }
  .mapInfo h4 { font-size: 16px; }
  .mapBrief { font-size: 11px; }
  .mapOrder { left: 4px; top: 4px; min-width: 25px; height: 25px; font-size: 15px; }
  .mapBest, .lockTag { font-size: 11px; }
  #modeBar { gap: 8px; }
  .modeLabel { font-size: 13px; }
  .modeBtn { padding: 3px 9px; font-size: 13px; }
  .loadSlot { width: 40px; height: 44px; }
  #gameArea { padding: 6px; gap: 6px; }
  #gameCanvas { border-width: 6px; }
  #screen-menu .menuRow .btn { flex-basis: 120px; }
  #heroRow canvas { width: 36px; height: auto; }   /* 12 kahraman 2 satırda kalsın (oran korunur) */
  .metaRow { gap: 8px; padding: 5px 8px; }
  .metaRow .metaName { font-size: 14px; }
  .metaRow .metaDesc { font-size: 12px; }
  .metaRow .metaRight { font-size: 12px; }
  .howtoList { font-size: 13px; margin-left: 14px; }
  #toasts { top: 8px; right: 8px; }
  .toast { font-size: 13px; }
}
/* Çok dar (≤480 px): başarım/perk satırında sağ sütun (✓ / Al butonu) kendi satırına iner, metin sıkışmaz */
@media (max-width: 480px) {
  .metaRow { flex-wrap: wrap; }
  .metaRow .metaRight { flex-basis: 100%; margin-left: 0; text-align: right; white-space: normal; }
  #waveVal::before { content: "〰 "; color: var(--muted); font-weight: 400; }
}

/* Kısa yükseklik (≤800 px, ör. 1366x768 dizüstü): yan panel kompakt — daha az kaydırma */
@media (max-height: 800px) {
  /* 3 yol kutusu kısa ekranda sığsın: kutular ve geliştirme butonları sıkışır */
  .pathBox { padding: 1px 6px 3px; margin-top: 3px; }
  .pathHead { font-size: 13px; margin-bottom: 1px; }
  .btn.wide.pathBtn { margin-top: 2px; padding: 1px 6px; font-size: 12.5px; line-height: 1.2; }
  .btn.wide.pathBtn small { font-size: 11px; }
  #sidePanel { gap: 6px; }
  .tcardIcon { height: 36px; }
  .tcard { padding: 3px 3px 1px; }
  .tcardLabel { font-size: 12.5px; margin-top: 1px; }
  #ctxPanel { padding: 6px 8px; font-size: 13px; }
  #ctxPanel h3 { margin-bottom: 6px; }
  .ctxHead { padding-bottom: 6px; margin-bottom: 6px; }
  .statLine { padding: 2px 0; }
  .pathBox { padding: 2px 6px 4px; margin-top: 4px; }
  .btn.wide { margin-top: 6px; }
  .tip { margin-top: 8px; }
  #modalBox h2 { margin-bottom: 8px; }
  #modalBox { max-height: min(92vh, 100%); }
  .metaList { max-height: 48vh; }
  .howtoList { font-size: 13px; line-height: 1.45; }
  .howtoList li { margin-bottom: 4px; }
}

/* Çok kısa yükseklik (≤600 px): menüde geçit şeridini kaldır, boşlukları kıs */
@media (max-height: 600px) {
  .menuInner { gap: 6px; margin-bottom: auto; }   /* geçit gizliyken alt boşluğu da menü paylaşsın (ortalama) */
  #heroRow { margin: 2px 0 4px; }
  #screen-mapselect { gap: 10px; padding-top: 10px; }
}

/* Dokunmatik (hover yok): yapışık :hover durumları etkisiz, hedefler daha büyük */
@media (hover: none) {
  .btn:hover:not(:disabled) { filter: none; }
  .btn.accent:hover:not(:disabled) { filter: drop-shadow(0 0 6px rgba(240, 192, 64, .45)); }
  .tcard:hover { filter: none; }
  .tcard.unaffordable:hover { filter: grayscale(1) brightness(.6); }
  .mapCard:hover:not(.locked) { transform: none; border-image-source: url("../assets/ui/frame-round-bronze.png"); }
  .powerSlot:hover { transform: none; }
}
@media (pointer: coarse) {
  .modeBtn { padding: 8px 14px; min-height: 36px; }
  .loadSlot { width: 48px; height: 52px; }
  #topbar .btn { padding: 2px 8px; min-height: 30px; }
  .powerSlot { width: 50px; height: 50px; }
}

/* Kompakt üst bar: telefon (≤640 px) VE yatay telefon (≤520 px yükseklik). (pointer:coarse) bloğundan
   SONRA gelir ki aynı özgüllükteki buton dolguları burada kazansın. */
@media (max-width: 640px), (max-height: 520px) {
  #topbar { gap: 4px 6px; padding: 4px 6px; }
  .statBox { font-size: 13px; padding: 1px 6px; }
  #topbar .btn { font-size: 12.5px; padding: 1px 5px; min-height: 28px; }
  /* Dalga barı: üst barın altında ince, tam genişlik bir şerit (Kenney kapakları kaldırılır); dalga içi
     öldürme ilerlemesi başka yerde gösterilmediği için bar kaldırılmaz */
  #waveBar { order: 99; flex: 1 0 100%; width: auto; height: 6px; margin: 2px 0 0; }
  #waveBar::before, #waveBar::after { display: none; }
  #waveBarFill { top: 1px; bottom: 1px; }
}

/* Hareket azaltma tercihi: sarsıntı ve kayma animasyonları kapalı */
@media (prefers-reduced-motion: reduce) {
  .toast, .shake, .mapCard, .loadSlot, .powerSlot { animation: none; transition: none; }
}

/* Ayarlar > Tuşlar */
.setSub { margin: 14px 0 2px; font-size: 15px; color: #f0c040; }
.setKeysHint { font-size: 11px; opacity: .7; margin: 2px 0 8px; line-height: 1.4; }
#keysGrid .keyRow label { font-size: 12px; }
.keyBtn { min-width: 76px; padding: 4px 10px; }
.keyBtn.listening { outline: 2px solid #f0c040; color: #f0c040; }

/* Çevrimiçi: giriş formu + skor tablosu */
.onlineErr { color: #e05545; font-size: 12px; min-height: 16px; margin: 4px 0; }
#modalBox input[type="password"], #modalBox input[type="email"], #modalBox input:not([type]) {
  background: #1c1712; color: #e8dcc0; border: 1px solid #5a4a30; border-radius: 4px; padding: 6px 8px; width: 160px;
}
.boardTabs { margin-bottom: 10px; }
.boardTable { width: 100%; border-collapse: collapse; margin: 8px 0 12px; font-size: 13px; }
.boardTable th, .boardTable td { padding: 4px 8px; text-align: left; border-bottom: 1px solid rgba(240,192,64,.15); }
.boardTable th { color: #f0c040; font-size: 12px; }
.boardTable td b { color: #f0c040; }
.boardSelf td { background: rgba(240,192,64,.10); }

/* ---------- Site modu (js/net/online.js html'e .site ekler; file:// oyununda bu blok hiç devreye girmez) ---------- */
#siteNav, .adRail, .adStrip, #siteBelow { display: none; }
:root { --nav-h: 48px; --ad-top-h: 0px; }   /* --ad-top-h: üst reklam şeridinin akışta kapladığı yükseklik (site modu 110px, dar ekran 66px, VIP 0) */
html.site, html.site body { overflow-y: auto; overflow-x: hidden; height: auto; min-height: 100%; }
html.site .screen { height: calc(100vh - var(--nav-h) - var(--ad-top-h)); height: calc(100dvh - var(--nav-h) - var(--ad-top-h)); }

html.site #siteNav {
  display: block; position: sticky; top: 0; z-index: 60; height: var(--nav-h);
  background: linear-gradient(#241b2e, #191322);
  border-bottom: 2px solid #5a4a30;
  box-shadow: 0 2px 10px rgba(0,0,0,.5);
}
.navInner { display: flex; align-items: center; gap: 18px; max-width: 1100px; margin: 0 auto; height: 100%; padding: 0 14px; }
.navInner .spacer, #forumFormRow .spacer { flex: 1; }
.navBrand { font-family: var(--serif); font-size: 19px; font-weight: 700; color: #f0c040; text-decoration: none; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.navBrand .gi { width: 20px; height: 20px; }
.navLink { color: var(--text); text-decoration: none; font-size: 14px; opacity: .85; white-space: nowrap; }
.navLink:hover { color: #f0c040; opacity: 1; }
#navUser { font-size: 13px; white-space: nowrap; }
.navLangBtn { background: none; border: 1px solid rgba(240,192,64,.4); border-radius: 4px; padding: 3px 9px; cursor: pointer; font: inherit; font-size: 13px; letter-spacing: .5px; }
.navLangBtn:hover { border-color: #f0c040; }
.langRow { gap: 6px; }

/* Reklam rayları: geniş ekranda sabit sol/sağ (kaydırırken yerinde kalır); oyun alanı padding ile daraltılır */
.adBox {
  width: 160px; height: 600px;
  border: 1px dashed #5a4a30; border-radius: 6px;
  color: #7a6a50; font-size: 12px; text-align: center;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.02);
}
@media (min-width: 1340px) {   /* 960 px oyun + 2 x 184 px ray: 1340 px'ten itibaren yan raylar görünür */
  html.site .adRail { display: flex; position: fixed; top: calc(var(--nav-h) + var(--ad-top-h) + 20px);   /* üst şeridin altından başlar */ width: 160px; justify-content: center; z-index: 40; }
  html.site #adLeft { left: 12px; }
  html.site #adRight { right: 12px; }
  html.site .screen { padding-left: 184px; padding-right: 184px; }
  /* id'li ekran kuralları (#screen-mapselect/#screen-menu padding kısaltması) .screen kuralını ezer → aynı yan boşluk id özgüllüğüyle tekrar */
  html.site #screen-mapselect, html.site #screen-menu { padding-left: 184px; padding-right: 184px; }
  /* VIP: reklamsız — raylar gizlenir, oyun alanı tam genişliğe döner */
  html.site.vip .screen, html.site.vip #screen-mapselect, html.site.vip #screen-menu { padding-left: 0; padding-right: 0; }
}
html.site.vip .adRail { display: none; }

/* Üst reklam şeridi: navbarın altında akış içinde (kaydırınca gider); oyun ekranı yüksekliği --ad-top-h ile daralır */
html.site { --ad-top-h: 110px; }
html.site .adStrip { display: flex; justify-content: center; align-items: center; height: var(--ad-top-h); padding: 10px 12px; box-sizing: border-box; background: linear-gradient(#1c1524, #191322); border-bottom: 1px solid #3a2f22; }
.adBanner {
  width: 728px; max-width: 100%; height: 90px;
  border: 1px dashed #5a4a30; border-radius: 6px;
  color: #7a6a50; font-size: 12px; text-align: center;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.02);
}
@media (max-width: 767px) {
  html.site { --ad-top-h: 66px; }
  html.site .adStrip { padding: 8px 6px; }
  .adBanner { width: 320px; height: 50px; font-size: 11px; }
}
html.site.vip { --ad-top-h: 0px; }
html.site.vip .adStrip { display: none; }

/* ---------- Üyelik rozetleri (skor tablosu, forum, navbar, lobi, hesap penceresi, üyelik tablosu) ----------
   Sınıf adları iç kademe kimliklerini izler: .vipBadge = MASTER (düz mor, simgesiz), .vipBadge.ultraBadge = KING (altın + taç + parıltı).
   Metin sözlükten gelir (BADGE_MASTER / BADGE_KING). Simgeler satır içi SVG (file:// uyumlu, emoji değil). */
.vipBadge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 5px;
  padding: 1px 6px;
  font-size: 9.5px; font-weight: 700; letter-spacing: 1px; line-height: 13px;
  font-family: "Segoe UI", sans-serif;
  color: #f3eaff;
  background: #6c3db4;   /* MASTER: düz mor, parıltısız ve simgesiz (kullanıcı isteği) */
  border: 1px solid #59309a;
  border-radius: 3px;
  vertical-align: middle;
  white-space: nowrap;
}
.vipBadge.ultraBadge {   /* KING: dövme altın levha + taç + ağır parıltı */
  overflow: hidden;
  color: #2b1703;
  padding: 1px 7px 1px 4px;
  letter-spacing: 1.6px;
  background: linear-gradient(180deg, #fff4b8 0%, #ffd45a 38%, #e9a91e 62%, #b97508 100%);
  border: 1px solid #6e4205;
  text-shadow: 0 1px 0 rgba(255, 240, 190, .6);
  box-shadow: inset 0 1px 0 rgba(255, 252, 225, .9), inset 0 -1px 0 rgba(110, 66, 5, .5), 0 0 9px rgba(246, 190, 60, .6);
}
.vipBadge.ultraBadge::before {   /* KING: taç */
  content: "";
  flex: 0 0 auto;
  width: 11px; height: 9px;
  background-position: center; background-size: contain; background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12'%3E%3Cpath d='M1 3.4 4 6.6 7 1.4l3 5.2 3-3.2-1.3 6.2H2.3z' fill='%233a2206'/%3E%3Crect x='2.3' y='10' width='9.4' height='1.6' rx='.4' fill='%233a2206'/%3E%3Ccircle cx='1' cy='3.2' r='1' fill='%233a2206'/%3E%3Ccircle cx='7' cy='1.2' r='1.1' fill='%233a2206'/%3E%3Ccircle cx='13' cy='3.2' r='1' fill='%233a2206'/%3E%3Ccircle cx='7' cy='7.4' r='.9' fill='%23ffe9a0'/%3E%3C/svg%3E");
}
.vipBadge.ultraBadge::after {   /* KING parıltısı: eğik ışık 4 sn'de bir soldan sağa geçer */
  content: "";
  position: absolute; top: -2px; bottom: -2px; left: -40%;
  width: 30%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .75), rgba(255, 255, 255, 0));
  transform: skewX(-18deg);
  animation: kingShine 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes kingShine { 0%, 70% { left: -40%; } 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .vipBadge.ultraBadge::after { animation: none; display: none; } }
/* Üyelik tablosu başlığında büyük rozet */
.vipBadge.tierBadgeLg { margin: 0 auto 3px; padding: 3px 11px; gap: 5px; font-size: 13px; line-height: 16px; letter-spacing: 2px; }
.vipBadge.ultraBadge.tierBadgeLg { padding-left: 8px; }
.vipBadge.ultraBadge.tierBadgeLg::before { width: 16px; height: 13px; }
.vipBadge.ultraBadge.tierBadgeLg { letter-spacing: 2.6px; }
.vipStateRow { font-size: 13px; margin: 8px 0; }
.vipPerkList { list-style: none; margin: 8px 0 12px; padding: 0; font-size: 13.5px; line-height: 1.9; text-align: left; }
.vipNote { font-size: 12px; opacity: .65; margin: 8px 0 2px; }
#vipCodeIn {
  background: #1c1712; color: #e8dcc0; border: 1px solid #5a4a30; border-radius: 4px; padding: 6px 8px; width: 160px;
  font-family: monospace; letter-spacing: 1px; text-transform: uppercase;
}

/* ---------- Site: "Oyunu Keşfet" canlı sahneleri + üyelik kartları ---------- */
.showRow { display: flex; flex-direction: column; gap: 14px; }
.showSection { display: flex; gap: 18px; align-items: center; padding: 12px 14px; flex-wrap: wrap; }
.showSection:nth-child(even) { flex-direction: row-reverse; }   /* zigzag yerleşim */
.scCanvas { width: min(520px, 100%); image-rendering: pixelated; background: #0d0a10; border-radius: 6px; flex: 0 0 auto; }
.showText { flex: 1 1 260px; min-width: 240px; }
.showText h3 { font-family: var(--serif); color: var(--gold); margin: 0 0 6px; }
.showText p { font-size: 13.5px; opacity: .9; line-height: 1.55; margin: 0; }
/* Üyelik karşılaştırma tablosu: sütun = kademe, satır = özellik; karakter ikonları showcase.js'ten */
.tierTableWrap { overflow-x: auto; padding: 10px 12px; }
#tierTable { width: 100%; border-collapse: collapse; min-width: 820px; font-size: 13px; }   /* 4 kademe sütunu (Ultra VIP dahil) */
#tierTable th, #tierTable td { padding: 9px 10px; border-bottom: 1px solid rgba(240, 192, 64, .12); text-align: center; vertical-align: middle; }
#tierTable tr:last-child td { border-bottom: none; }
#tierTable .tierFeat { text-align: left; color: var(--muted); min-width: 150px; font-size: 12.5px; }
.tierHead th { font-family: var(--serif); font-size: 18px; color: var(--text); letter-spacing: 1px; }
.tierHead th.tierVipCol { color: #c9a0ff; }
.tierHead th.tierUltraCol { color: #ffe08a; }   /* King sütunu: açık altın */
.tierHead th.tierVipCol small { color: #c9a0ff; }   /* Master sütunu alt yazısı rozetle aynı mor */
.tierHead th small { display: block; font-family: "Segoe UI", sans-serif; font-size: 11px; font-weight: 400; letter-spacing: 0; color: var(--gold); margin-top: 2px; opacity: .85; }
#tierTable .ok { color: var(--green); font-weight: 700; }
#tierTable .no { color: #b06050; opacity: .75; }
#tierTable .warn { color: var(--muted); }
.tierIcons { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; max-width: 180px; margin: 0 auto 3px; }
.tierIcons canvas { image-rendering: pixelated; }
.tierIcons canvas.off { filter: grayscale(1) brightness(.55); opacity: .4; }
.tierSub { display: block; color: var(--muted); font-size: 11px; }
.tierCta td { padding-top: 14px; }
.unverifiedTag { color: #e05545; font-size: 11.5px; border: 1px solid rgba(224, 85, 69, .5); border-radius: 8px; padding: 0 6px; }
.heroPickBtn.lockedPick { opacity: .45; filter: grayscale(.8); }

/* Sayfa altı: skor tabloları yan yana + forum */
html.site #siteBelow { display: block; }
#siteBelow { background: var(--bg); border-top: 2px solid #5a4a30; user-select: text; -webkit-user-select: text; }
.siteInner { max-width: 1100px; margin: 0 auto; padding: 22px 16px 44px; }
.siteH { font-family: var(--serif); color: #f0c040; margin: 20px 0 12px; scroll-margin-top: calc(var(--nav-h) + 10px); }
#boardsRow { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.boardCol { flex: 1 1 340px; min-width: 0; padding: 12px 14px; }
.boardCol h3 { font-family: var(--serif); margin: 0 0 6px; }
.boardCol .boardTable { margin: 4px 0 2px; }
#weekTag { opacity: .6; font-size: 12px; font-weight: 400; }
#forumBox { padding: 14px; }
#forumText { width: 100%; background: #1c1712; color: var(--text); border: 1px solid #5a4a30; border-radius: 4px; padding: 8px; font: 13px "Segoe UI", sans-serif; resize: vertical; }
#forumFormRow { display: flex; align-items: center; gap: 10px; margin: 6px 0 12px; font-size: 12.5px; flex-wrap: wrap; }
#forumErr { color: #e05545; font-size: 12px; }
.forumMsg { border-top: 1px solid rgba(240, 192, 64, .12); padding: 8px 2px; font-size: 13px; }
.forumHead { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.forumName { color: #f0c040; font-weight: 700; }
.forumTime { opacity: .5; font-size: 11px; }
.forumScore { background: rgba(240, 192, 64, .12); border: 1px solid rgba(240, 192, 64, .35); border-radius: 10px; padding: 1px 8px; font-size: 11.5px; color: #f0c040; white-space: nowrap; }
/* Ultra VIP üyenin forum mesajı: altın çerçeve + hafif altın parıltı (online.js .forumMsg.ultra sınıfını ekler) */
.forumMsg.ultra {
  border: 1px solid rgba(246, 195, 67, .55);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(120, 84, 12, .30), rgba(40, 28, 8, .40));
  padding: 8px 10px;
  margin-top: 6px;
  box-shadow: inset 0 0 14px rgba(246, 195, 67, .14), 0 0 8px rgba(246, 195, 67, .15);
}
.forumMsg.ultra .forumName { color: #ffe08a; text-shadow: 0 0 6px rgba(246, 195, 67, .6); }

/* ---------- Profil avatarı (oyun karakterlerinden; forumda ve navbar'da ismin SOLUNDA animasyonlu) ---------- */
.forumHead { align-items: center; }                          /* avatar canvas'ı satırı bozmasın */
.forumAvatar { display: inline-flex; align-items: flex-end; }
.forumAvatar canvas { height: 26px; width: auto; image-rendering: pixelated; display: block; }
#navUser { display: inline-flex; align-items: center; gap: 7px; }
#navUser canvas { height: 22px; width: auto; image-rendering: pixelated; display: block; }
.avatarNow { display: flex; justify-content: center; margin-bottom: 6px; min-height: 8px; }
.avatarNow canvas { height: 64px; width: auto; image-rendering: pixelated; }
.avatarGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: 6px;
  max-height: 200px;
  overflow-y: auto;
  scrollbar-width: thin;
  padding: 4px 2px;
  margin-bottom: 8px;
  text-align: initial;
}
.avatarCell {
  position: relative;   /* asma kilit örtüsü (Ultra'ya özel avatar) köşeye konumlanır */
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel2);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 56px;
  padding-bottom: 4px;
  cursor: pointer;
  transition: filter .12s, border-color .12s;
}
.avatarCell:hover { filter: brightness(1.25); }
.avatarCell.sel { border-color: var(--gold); box-shadow: 0 0 7px rgba(240, 192, 64, .4); background: #362a48; }
.avatarCell canvas { height: 40px; width: auto; image-rendering: pixelated; }
/* Ultra VIP'e özel avatar (Midas): Ultra olmayanlarda soluk + asma kilit, tıklanamaz */
.avatarCell.locked { opacity: .5; filter: grayscale(.7); cursor: not-allowed; }
.avatarCell.locked:hover { filter: grayscale(.7); }
.avatarCell.locked .avatarLock { position: absolute; right: 2px; bottom: 2px; width: 14px; height: 14px; opacity: .9; }
.avatarCell.locked .avatarLock img { width: 14px; height: 14px; }
.forumBody { margin-top: 3px; white-space: pre-wrap; word-break: break-word; }
.siteFoot { margin-top: 28px; opacity: .5; font-size: 12px; text-align: center; }
@media (max-width: 700px) { .navLink { font-size: 12.5px; } .navInner { gap: 10px; } .navBrand { font-size: 16px; } }

/* Ayarlar modalı: sekmeler (Genel / Tuşlar) — uzun listeyi kaydırma derdi bitsin */
.setTabs { margin-bottom: 10px; }
.setTabs .btn { flex: 1; }

/* Giriş/Kayıt geçiş bağlantısı */
.authSwitch { font-size: 12.5px; margin: 8px 0 2px; text-align: center; opacity: .9; }
.authSwitch a { color: #f0c040; }

/* Birlikte oynama (Arena) lobisi */
.roomCode { color: #f0c040; letter-spacing: 4px; font-family: monospace; }
.lobbyRow { display: flex; align-items: center; gap: 8px; padding: 5px 4px; font-size: 14px; border-bottom: 1px solid rgba(240,192,64,.12); }
.sideDot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; border: 1px solid rgba(0,0,0,.5); }
#modal select, #modalBox select { background: #1c1712; color: #e8dcc0; border: 1px solid #5a4a30; border-radius: 4px; padding: 5px 8px; }

/* Coop lobisi: oyuncu satırları + kahraman seçici */
.lobbyRow .lobbyHeroIcon canvas, .heroPickBtn canvas { image-rendering: pixelated; vertical-align: middle; }
.lobbyInfo { flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.lobbyLoadout { display: flex; gap: 2px; align-items: center; }
.lobbyLoadout canvas { image-rendering: pixelated; opacity: .9; }
.lobbyEmpty { opacity: .55; }
#heroPick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
#heroPick .heroPickBtn { flex: 1 1 40%; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 4px 6px; }

/* ---- Yönetici paneli (admin.html) ---- */
/* Bağımsız sayfa: html.admin kökü oyunun overflow:hidden / user-select:none kilitlerini kaldırır, üst şerit site
   navbar'ıyla aynı görünümde (sticky), içerik 1100 px'e ortalı; tablolar kendi kutusunda yatay kayar (≤640 px dâhil). */
html.admin { overflow-x: hidden; overflow-y: auto; height: auto; min-height: 100%; }
/* body overflow:visible kalır: body de kaydırma kabı olsaydı sticky üst şerit görünüm alanına değil body'ye yapışırdı */
html.admin body { overflow: visible; height: auto; min-height: 100%; user-select: text; -webkit-user-select: text; }
html.admin [hidden] { display: none !important; }
html.admin input, html.admin select, html.admin textarea { cursor: auto; }

#admNav {
  position: sticky; top: 0; z-index: 60; height: var(--nav-h);
  background: linear-gradient(#241b2e, #191322);
  border-bottom: 2px solid #5a4a30;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}
#admNav .navInner { gap: 14px; }
.admTitle {
  font-family: var(--serif); font-size: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: #1c1712; background: linear-gradient(#ffd76a, #f0c040); border-radius: 3px; padding: 1px 8px; white-space: nowrap;
}
.admWho { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }
.admInner { max-width: 1100px; margin: 0 auto; padding: 18px 16px 40px; }
.admLoading { text-align: center; color: var(--muted); font-family: var(--serif); letter-spacing: 1px; padding: 40px 0; }
.admLoading::after { content: ""; animation: blDots 1.6s infinite; }
.admNotice { max-width: 520px; margin: 40px auto; padding: 18px 20px; text-align: center; font-size: 15px; line-height: 1.5; }
.admNotice p { margin-bottom: 12px; }
.admNotice .btn, .admNotice a.btn { display: inline-block; text-decoration: none; }

.admSection { margin-bottom: 26px; }
.admSecHead { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 6px 0 10px; }
.admSecHead .siteH { margin: 0; flex: 1 1 auto; }
.admSub { font-family: var(--serif); color: var(--gold); font-size: 15px; margin: 2px 0 6px; letter-spacing: 1px; }
.admBox { padding: 10px 12px 12px; }
.admEmpty { color: var(--muted); font-style: italic; text-align: center; padding: 10px 4px; font-size: 13px; }
.admMuted { color: var(--muted); }

/* Özet kartları */
.admCards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.admCard { padding: 10px 8px 8px; text-align: center; }
.admCard.hot { border-image-source: url("../assets/ui/frame-box-gold.png"); box-shadow: 0 0 10px rgba(240, 192, 64, .25); }
.admCardVal { font-family: var(--serif); font-size: 28px; font-weight: 700; color: var(--gold); line-height: 1.15; }
.admCardVal.text { font-size: 20px; }
.admCardVal .gi { width: 20px; height: 20px; vertical-align: -3px; opacity: .85; }
.admCardVal.text .gi { width: 16px; height: 16px; }
.admCardLbl { font-size: 12.5px; color: var(--text); margin-top: 4px; }
.admCardSub { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* Tablolar: kendi kutusunda yatay kaydırma, sayfa gövdesi asla yatay kaymaz */
.admTableWrap { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.admTable { min-width: 640px; margin: 2px 0 4px; }
.admTable th { white-space: nowrap; }
.admTable td { vertical-align: middle; }
.admTable tbody tr:hover td { background: rgba(240, 192, 64, .06); }
.admUsersTable { min-width: 860px; }
.admName { font-weight: 600; white-space: nowrap; }
.admDate { white-space: nowrap; font-size: 12px; color: var(--muted); }
.admWon { color: var(--gold); text-align: center; font-size: 15px; }
.admAct { white-space: nowrap; text-align: right; }
.admNoteCell { max-width: 320px; }
.admTable .reqNote { white-space: pre-wrap; word-break: break-word; font-size: 12.5px; }

/* Küçük butonlar (tablo satırı / araç çubuğu) ve form alanları */
.btn.admSmall { font-size: 12.5px; padding: 1px 6px; }
.admField { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.admInput, .admSelect {
  background: #1c1712; color: var(--text); border: 1px solid #5a4a30; border-radius: 4px; padding: 5px 8px;
  font: 13px "Segoe UI", system-ui, sans-serif; min-width: 0;
}
.admInput { width: min(220px, 100%); }
.admInput:focus, .admSelect:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 6px rgba(240, 192, 64, .3); }
.admSelect { max-width: min(360px, 100%); }
.admSearchRow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.admCount { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.admPager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 6px; }
.admPageInfo { font-size: 12.5px; color: var(--muted); min-width: 90px; text-align: center; }

/* Rozetler ve durumlar */
.vipBadge.admBadge { color: #f0e6d2; background: linear-gradient(#c0553f, #8a3a2a); border-color: #6e2c20; box-shadow: 0 0 6px rgba(224, 85, 69, .35); }
.admState { font-size: 12px; color: var(--muted); }
.admState.granted { color: var(--green); font-weight: 600; }
.admState.dismissed { color: var(--red); }

/* VIP talepleri: bekleyen satırlar (setRow görünümü) */
.admReqList { margin-bottom: 8px; }
.reqRow { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 4px; border-bottom: 1px dashed rgba(58, 47, 40, .6); }
.reqRow:last-child { border-bottom: none; }
.reqMain { flex: 1 1 auto; min-width: 0; }
.reqHead { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.reqName { color: var(--gold); font-family: var(--serif); font-size: 15px; }
.reqTime { font-size: 11px; color: var(--muted); }
.reqRow .reqNote { display: block; margin-top: 3px; font-size: 13px; white-space: pre-wrap; word-break: break-word; }
.reqBtns { display: flex; gap: 6px; flex: 0 0 auto; }
.admDetails { margin-top: 6px; border-top: 1px solid rgba(240, 192, 64, .15); padding-top: 6px; }
.admDetails summary { cursor: pointer; font-family: var(--serif); color: var(--gold); font-size: 15px; letter-spacing: 1px; padding: 4px 0; list-style: none; }
.admDetails summary::-webkit-details-marker { display: none; }
.admDetails summary::before { content: "\25B8"; display: inline-block; margin-right: 6px; transition: transform .15s; }
.admDetails[open] summary::before { transform: rotate(90deg); }
.admDetails summary:hover { filter: brightness(1.15); }

/* Toast: hata kırmızı metin, sunucu mesajı düz metin olarak girer */
.toast.admToast.err { color: #ffb4a4; border-image-source: url("../assets/ui/frame-box-bronze.png"); }

@media (max-width: 640px) {
  .admInner { padding: 12px 8px 30px; }
  #admNav .navInner { gap: 8px; padding: 0 8px; }
  .admTitle { font-size: 12px; padding: 1px 6px; }
  .admWho { display: none; }
  .admCards { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
  .admCardVal { font-size: 22px; }
  .admCardVal.text { font-size: 16px; }
  .admTable { font-size: 12px; }
  .admTable th, .admTable td { padding: 3px 6px; }
  .admSecHead { gap: 8px; }
  .admSearchRow { width: 100%; }
  .admInput { flex: 1 1 140px; }
  .reqRow { flex-direction: column; align-items: stretch; }
  .reqBtns { justify-content: flex-end; }
}
/* Character identities: tactical strengths and weaknesses. */
.identityInfo { margin: 8px 0; padding: 8px 10px; border-left: 2px solid #bda36b; background: rgba(189,163,107,.07); font-size: 12px; line-height: 1.5; }
.identityInfo > b { color: #e9cd86; }
.identityInfo p { margin: 4px 0; }
.pathPlaystyle { margin: 5px 0 8px; color: #b5c7bd; font-size: 11px; line-height: 1.45; }
.identityDetails { margin: 8px 0; font-size: 12px; }
.identityDetails summary { color: #e9cd86; cursor: pointer; }
/* Popup actions stay outside the scrollable body, including at the initial scroll position. */
#modalBox.hasPinnedActions {
  display: flex; flex-direction: column; overflow: hidden;
  max-height: min(85vh, calc(100dvh - 24px));
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}
#modalBox.hasPinnedActions > h2 { flex: 0 0 auto; padding-inline: 32px; }
#modalBox.hasPinnedActions .modalXBar { position: relative; flex-shrink: 0; }
#modalBox.hasPinnedActions .modalBody {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain; scrollbar-width: thin; scrollbar-gutter: stable;
  padding: 2px 4px 12px; scroll-padding-block: 10px;
}
#modalBox.hasPinnedActions .modalActions {
  flex: 0 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr));
  gap: 8px; padding-top: 12px; border-top: 1px solid #8d704b;
  background: var(--panel); box-shadow: 0 -9px 15px -12px #000c; z-index: 2;
}
#modalBox.hasPinnedActions .modalActions .btn {
  margin: 0; min-height: 44px; width: 100%; min-width: 0;
  padding: 5px 8px; font-size: 13px; line-height: 1.25; white-space: normal;
}
#modalBox.hasPinnedActions .modalActions .ltOfferActions { display: contents; }
.admPatreonMeta { display: grid; gap: 4px; margin: 8px 0; font-size: 12px; overflow-wrap: anywhere; }
.admPatreonMeta strong { color: #f3ce85; }
.admPatreonReview { margin-top: 10px; padding: 12px; border: 1px solid #a17b49; border-radius: 6px; background: #211927; font-size: 12px; }
.admPatreonReview p { line-height: 1.5; margin-bottom: 10px; color: #cbbc9f; }
.admPatreonReview > label { display: grid; gap: 6px; }
.admPatreonReview .admPatreonOrder { width: 100%; }
.admPatreonReview .admPatreonCheck { display: flex; align-items: flex-start; line-height: 1.5; margin-top: 12px; }
.admPatreonCheck input { flex: 0 0 auto; width: 18px; height: 18px; }
#modalBox.hasPinnedActions .modalBody :is(.metaList, .talentTree, .endStats) { max-height: none; overflow: visible; }
@media (max-height: 520px) {
  #modalBox.hasPinnedActions { max-height: calc(100dvh - 16px); padding-block: 10px; }
  #modalBox.hasPinnedActions > h2 { margin-bottom: 7px; font-size: 22px; }
  #modalBox.hasPinnedActions .modalActions { padding-top: 7px; gap: 5px; }
}