/* AIDEN2 tanitim sitesi
   Duzen: koyu lake sahne uzerinde numarali bolumler; her bolumde solda anlatim, sagda oyundaki pencerenin canli kopyasi.
   Renkler oyunun kendi kahve tonlarindan (giris ekrani v4, Nesne Market v3, ipucu v3). */
:root {
  color-scheme: dark;
  /* zemin ve paneller */
  --ink: #0d0a08;
  --stage: #13100c;
  --panel: #1e1813;
  --panel-hi: #2a2119;
  --slot: #0f0c0a;
  --line: #463829;
  --line-soft: #30271e;
  --line-hi: #725b42;
  /* yazi */
  --cream: #ecdcbc;
  --text: #cdbfa8;
  --muted: #9a8a74;
  --faint: #6f6252;
  /* vurgu */
  --bronze: #c08a4c;
  --bronze-hi: #dcaa6a;
  --ember: #8a2f22;
  --ember-hi: #a73b2b;
  /* oyun ipucu renkleri (uitooltip.py) */
  --tt-title: #f2e7c1;
  --tt-norm: #c2c2c2;
  --tt-pos: #8ab98e;
  --tt-spos: #b0dfb4;
  --tt-spos2: #e1fae1;
  --tt-cond: #beb47d;
  --tt-neg: #e57976;
  --tt-bg: #1f1913;
  --info: #7fa9d6;
  --ok: #8fc48f;
  --warn: #d9a04e;
  --bad: #d8695f;

  --f-display: "Cinzel", "Trajan Pro", Georgia, serif;
  --f-body: "Alegreya Sans", "Segoe UI", system-ui, sans-serif;
  --f-game: Tahoma, Verdana, "DejaVu Sans", sans-serif;

  --step--1: 0.8125rem;
  --step-0: 1rem;
  --step-1: 1.1875rem;
  --step-2: 1.5rem;
  --step-3: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  --step-4: clamp(3rem, 1.6rem + 6vw, 6.25rem);

  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --topbar: 60px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--topbar) + 16px); background: var(--ink); }
body {
  margin: 0; background: var(--ink); color: var(--text);
  font: 400 var(--step-0)/1.6 var(--f-body);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--stage); }
img { max-width: 100%; }
a { color: var(--bronze-hi); text-decoration: none; }
a:hover { color: var(--cream); }
:focus-visible { outline: 2px solid var(--bronze-hi); outline-offset: 2px; }
h1, h2, h3 { text-wrap: balance; color: var(--cream); margin: 0; }
p { margin: 0; }
.wrap { max-width: 1240px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter-r); }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- ust cubuk ---------- */
.topbar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: color-mix(in srgb, var(--stage) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line-soft);
}
.topbar .wrap { height: var(--topbar); display: flex; align-items: center; gap: 18px; }
.brand { font: 700 1.375rem/1 var(--f-display); letter-spacing: .06em; color: var(--cream); white-space: nowrap; }
.brand small { display: block; font: 600 .625rem/1 var(--f-body); letter-spacing: .22em; color: var(--muted); margin-top: 4px; text-transform: uppercase; }
.search { position: relative; flex: 1; max-width: 420px; margin-left: auto; }
.search input {
  width: 100%; height: 36px; padding: 0 12px 0 34px; border-radius: 18px;
  background: var(--slot); border: 1px solid var(--line); color: var(--cream);
  font: 400 .9375rem var(--f-body);
}
.search input::placeholder { color: var(--faint); }
.search svg { position: absolute; left: 11px; top: 10px; width: 16px; height: 16px; color: var(--muted); }
.search .results {
  position: absolute; top: 42px; left: 0; right: 0; max-height: min(60vh, 420px); overflow: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 4px;
  box-shadow: 0 18px 40px rgba(0,0,0,.6);
}
.results button {
  display: flex; width: 100%; gap: 10px; align-items: center; text-align: left;
  background: none; border: 0; color: var(--text); padding: 7px 8px; border-radius: 4px; cursor: pointer; font: inherit;
}
.results button:hover, .results button.on { background: var(--panel-hi); color: var(--cream); }
.results .kind { font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); min-width: 52px; }
.results .none { padding: 10px; color: var(--muted); font-size: .9375rem; }
.results .ic { flex: none; }
.nav-actions { display: flex; gap: 8px; align-items: center; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 0 18px; border-radius: 3px; cursor: pointer;
  font: 700 .875rem/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--line-hi); background: linear-gradient(#3a2e22, #261e17); color: var(--cream);
  transition: filter .15s, border-color .15s, transform .15s;
}
.btn:hover { filter: brightness(1.15); color: var(--cream); border-color: var(--bronze); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: linear-gradient(var(--ember-hi), var(--ember)); border-color: #c5654c; }
.btn.lg { height: 48px; padding: 0 26px; font-size: .9375rem; }
.btn.ghost { background: rgba(13,10,8,.55); }
@media (max-width: 760px) {
  .nav-actions .hide-s { display: none; }
  .brand small { display: none; }
  .topbar .wrap { gap: 10px; }
}

/* ---------- hero ---------- */
.hero { position: relative; min-height: clamp(520px, 80vh, 780px); display: flex; align-items: flex-end; overflow: hidden; background: #0b0908; }
.hero video, .hero .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(10,8,6,.94) 0%, rgba(10,8,6,.78) 32%, rgba(10,8,6,.15) 62%, rgba(10,8,6,0) 80%),
    linear-gradient(0deg, var(--ink) 0%, rgba(13,10,8,0) 34%);
}
.hero .wrap { position: relative; z-index: 2; width: 100%; padding-block: 48px 56px; }
.hero-copy { max-width: 560px; display: grid; gap: 22px; }
.eyebrow { font: 700 .75rem/1 var(--f-body); letter-spacing: .26em; text-transform: uppercase; color: var(--bronze-hi); }
.logo {
  font: 700 var(--step-4)/.9 var(--f-display); letter-spacing: .04em;
  background: linear-gradient(180deg, #f6e9cc 0%, #d8bf93 48%, #9f8158 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 rgba(0,0,0,.6)) drop-shadow(0 12px 30px rgba(0,0,0,.6));
}
.logo-rule { display: flex; align-items: center; gap: 10px; color: var(--bronze); width: min(340px, 80%); }
.logo-rule::before, .logo-rule::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .55; }
.logo-rule i { width: 7px; height: 7px; border: 1px solid currentColor; transform: rotate(45deg); }
.hero-lead { font-size: var(--step-1); color: #e2d5bf; max-width: 46ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.facts { display: grid; grid-template-columns: repeat(4, auto); gap: 4px 26px; justify-content: start; margin-top: 6px; }
.facts div { display: grid; gap: 2px; }
.facts b { font: 700 1.5rem/1 var(--f-display); color: var(--cream); font-variant-numeric: tabular-nums; }
.facts span { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 640px) { .facts { grid-template-columns: repeat(2, auto); } }
.anim-toggle {
  position: absolute; z-index: 3; right: calc(var(--gutter-r) + 4px); bottom: 18px;
  display: inline-flex; gap: 8px; align-items: center; height: 30px; padding: 0 12px;
  background: rgba(20,16,12,.8); border: 1px solid var(--line); color: var(--text); border-radius: 2px;
  font: 400 .8125rem var(--f-game); cursor: pointer;
}
.anim-toggle:hover { border-color: var(--line-hi); color: var(--cream); }

/* ---------- bolum duzeni ---------- */
.layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 40px; padding-top: 28px; }
.rail { position: sticky; top: calc(var(--topbar) + 28px); align-self: start; display: grid; gap: 18px; padding-bottom: 40px; }
.rail h4 { margin: 0 0 6px; font: 700 .6875rem/1 var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: var(--faint); }
.rail a { display: grid; grid-template-columns: 26px 1fr; gap: 6px; padding: 5px 0; color: var(--muted); font-size: .9375rem; line-height: 1.3; }
.rail a b { font: 600 .75rem/1.6 var(--f-display); color: var(--faint); }
.rail a:hover { color: var(--cream); }
.rail a.on { color: var(--cream); }
.rail a.on b { color: var(--bronze-hi); }
.chips { display: none; }
@media (max-width: 1080px) {
  .layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .rail { display: none; }
  .chips {
    display: flex; gap: 6px; overflow-x: auto; padding: 10px 0 2px; scrollbar-width: none;
    position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--topbar)); z-index: 40; background: var(--ink);
  }
  .chips a { flex: none; padding: 5px 12px; border: 1px solid var(--line); border-radius: 14px; font-size: .875rem; color: var(--muted); }
  .chips a.on { color: var(--cream); border-color: var(--bronze); }
}

.chapter { padding-block: 56px 72px; border-bottom: 1px solid var(--line-soft); display: grid; gap: 30px; }
.chapter:last-of-type { border-bottom: 0; }
.ch-head { display: grid; gap: 12px; max-width: 760px; }
.ch-num { display: flex; align-items: center; gap: 12px; font: 600 .8125rem/1 var(--f-display); letter-spacing: .2em; color: var(--bronze-hi); text-transform: uppercase; }
.ch-num::after { content: ""; height: 1px; width: 64px; background: var(--line-hi); }
.ch-head h2 { font: 700 var(--step-3)/1.1 var(--f-display); letter-spacing: .01em; }
.ch-head p { font-size: var(--step-1); color: var(--text); max-width: 62ch; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 36px; align-items: start; }
@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  #b67 > .demo:last-child, #evo > .tt-stage { order: -1; }
}
.points { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.points li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; }
.points li::before { content: ""; width: 8px; height: 8px; margin: 9px 0 0 6px; border: 1px solid var(--bronze); transform: rotate(45deg); }
.points b { color: var(--cream); font-weight: 700; }
.hint { font: 400 .8125rem/1.4 var(--f-game); color: var(--muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.kbd { display: inline-block; padding: 1px 6px; border: 1px solid var(--line-hi); border-bottom-width: 2px; border-radius: 3px; font: 700 .75rem var(--f-game); color: var(--cream); background: var(--panel-hi); }

/* sinif secici */
.classes { display: flex; flex-wrap: wrap; gap: 8px; }
.classes button {
  height: 40px; padding: 0 16px; cursor: pointer; border-radius: 3px;
  font: 600 1rem/1 var(--f-body); color: var(--muted);
  background: var(--panel); border: 1px solid var(--line);
}
.classes button:hover { color: var(--cream); border-color: var(--line-hi); }
.classes button[aria-pressed="true"] { color: var(--cream); background: var(--panel-hi); border-color: var(--bronze); box-shadow: inset 0 -2px 0 var(--bronze); }

/* baslangic kartlari */
.kit { display: grid; gap: 18px; }
.kit-group { display: grid; gap: 10px; }
.kit-group h3 { font: 700 .75rem/1 var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.kit-row { display: flex; flex-wrap: wrap; gap: 6px; }
.gold-line { display: flex; align-items: center; gap: 10px; font: 400 .9375rem var(--f-game); color: var(--cream); }
.coin { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f1d48d, #a7782f 70%); box-shadow: 0 0 0 1px #5c4320; }

/* ---------- oyun penceresi ---------- */
.gwin {
  position: relative; font: 400 12px/1.35 var(--f-game); color: var(--tt-norm);
  background: #191410; border: 1px solid #5a4733; border-radius: 3px;
  box-shadow: 0 0 0 1px #0a0806, inset 0 0 0 1px #2a2119, 0 24px 60px rgba(0,0,0,.55);
  padding: 0 8px 8px;
}
.gwin::before, .gwin::after { content: ""; position: absolute; width: 7px; height: 7px; border: 1px solid #8a6c4a; transform: rotate(45deg); background: #191410; top: -4px; }
.gwin::before { left: -4px; } .gwin::after { right: -4px; }
.gtitle {
  display: flex; align-items: center; gap: 6px; height: 26px; margin: 0 -8px 8px; padding: 0 6px;
  background: linear-gradient(#2e251c, #201912); border-bottom: 1px solid #4a3a2a;
}
.gtitle .t { flex: 1; text-align: center; color: var(--cream); font: 700 12px var(--f-game); letter-spacing: .02em; }
.gbtn {
  width: 20px; height: 20px; display: grid; place-items: center; cursor: pointer; padding: 0;
  background: linear-gradient(#3a2f24, #261e17); border: 1px solid #5d4a35; border-radius: 2px; color: #d9c9a8;
}
.gbtn:hover { border-color: #a07c52; color: #fff3da; }
.gbtn svg { width: 12px; height: 12px; }

/* yuva */
.slot {
  --sz: 32px;
  position: relative; width: calc(var(--sz) + 4px); height: calc(var(--sz) + 4px);
  background: var(--slot);
  border: 1px solid #3c3024; border-radius: 3px;
  box-shadow: inset 0 0 0 1px #070605, inset 0 2px 6px rgba(0,0,0,.8);
  display: grid; place-items: center;
}
.slot.tall2 { height: calc(var(--sz) * 2 + 4px); }
.slot.tall3 { height: calc(var(--sz) * 3 + 4px); }
.slot.oct { clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px); border-color: #6b5236; }
.slot .ghost { font: 400 9px/1.1 var(--f-game); color: #4b3e30; text-align: center; padding: 2px; pointer-events: none; }
.slot.drop-ok { border-color: var(--bronze-hi); box-shadow: inset 0 0 0 1px var(--bronze), inset 0 0 12px rgba(220,170,106,.35); }
.slot.flash { animation: flash 1.2s ease-out 2; }
@keyframes flash { 0% { box-shadow: inset 0 0 0 2px var(--bronze-hi), 0 0 14px rgba(220,170,106,.8); } 100% { box-shadow: inset 0 0 0 1px #070605; } }

.ic { display: block; width: 32px; height: 32px; background-image: url("../icons/atlas.webp"); background-repeat: no-repeat; flex: none; }
.ic.noicon { background: radial-gradient(circle, #3a2e22 0 40%, transparent 41%); border: 1px dashed #4a3a2a; border-radius: 4px; }
.item { cursor: pointer; touch-action: none; }
.item:hover { filter: brightness(1.18) drop-shadow(0 0 4px rgba(236,220,188,.25)); }
.slot .count { position: absolute; right: 3px; bottom: 1px; font: 700 10px var(--f-game); color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000; pointer-events: none; }
.item.dragging { opacity: .25; }
.drag-ghost { position: fixed; z-index: 90; pointer-events: none; transform: translate(-50%, -50%); filter: drop-shadow(0 6px 10px rgba(0,0,0,.8)); }

/* ---------- ipucu (uitooltip v3) ---------- */
.tt {
  position: fixed; z-index: 100; left: 0; top: 0; min-width: 190px; max-width: 300px; pointer-events: none;
  background: rgba(31,25,19,.97); border: 1px solid #4f3f2e; outline: 1px solid #0a0806;
  padding: 9px 12px 10px; font: 400 12px/17px var(--f-game); color: var(--tt-norm); text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.6);
  text-shadow: 0 1px 0 rgba(0,0,0,.9);
}
.tt.pinned { position: relative; pointer-events: auto; z-index: auto; margin: 0 auto; }
.tt .tt-name { color: var(--tt-title); font-weight: 700; }
.tt .tt-desc { color: #e0d7c6; margin: 2px 0 4px; }
.tt .tt-cond { color: var(--tt-norm); margin-top: 4px; }
.tt .pos { color: var(--tt-pos); }
.tt .spos { color: var(--tt-spos); }
.tt .spos2 { color: var(--tt-spos2); }
.tt .neg { color: var(--tt-neg); }
.tt .gold { color: #ffc23c; }
.tt .gap { height: 6px; }
.tt .jobs { display: flex; justify-content: center; gap: 10px; color: var(--tt-norm); }
.tt .rar { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 6px 0 2px; color: var(--rc, #d9953a); }
.tt .rar::before, .tt .rar::after { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .7; }
.tt .rar i { width: 5px; height: 5px; background: currentColor; transform: rotate(45deg); }
.tt .tt-hint { margin-top: 6px; text-align: left; color: #fff; font-size: 11px; }
.tt .tt-hint::before { content: "\2022  "; color: var(--muted); }

/* ---------- envanter ---------- */
.inv-stage { display: flex; justify-content: center; }
.inv { display: flex; align-items: flex-start; gap: 0; -webkit-user-select: none; user-select: none; }
.inv-tabs { display: grid; gap: 4px; margin-top: 40px; margin-right: -1px; }
.inv-tab { width: 33px; height: 31px; padding: 0; border: 0; cursor: pointer; background: url("../ui/iv_tab1_n.png") 0 0 / 33px 31px no-repeat; }
.inv-win { width: 186px; padding: 0 7px 8px; }
.inv-tools { display: flex; gap: 3px; }
.inv-tool { width: 17px; height: 16px; padding: 0; border: 1px solid #4a3a2a; border-radius: 2px; background: #15110d center / 15px 14px no-repeat; cursor: pointer; }
.inv-tool:hover { border-color: #a07c52; filter: brightness(1.25); }
.inv-search { display: none; margin-bottom: 6px; }
.inv-search.open { display: block; }
.inv-search input { width: 100%; height: 22px; background: var(--slot); border: 1px solid #4a3a2a; color: var(--cream); font: 12px var(--f-game); padding: 0 6px; border-radius: 2px; }
.inv-equip { display: flex; justify-content: center; margin-bottom: 2px; }
.eq-panel { position: relative; background: no-repeat 0 0; flex: none; }
.slot.eqs { position: absolute; width: 32px; background: transparent; border: 1px solid transparent; border-radius: 3px; box-shadow: none; }
.slot.eqs:not(.empty):hover { box-shadow: 0 0 0 1px #c9a46e, 0 0 8px rgba(220,170,106,.45); }
.slot.eqs.drop-ok { border-color: var(--bronze-hi); box-shadow: 0 0 10px rgba(220,170,106,.7); background: rgba(220,170,106,.12); }
.inv-pages { display: flex; gap: 3px; margin: 6px 0 5px; }
.inv-pages button {
  flex: 1; height: 18px; cursor: pointer; padding: 0;
  background: linear-gradient(#2b221a, #1b1510); border: 1px solid #4a3a2a; color: #a9977d; font: 700 10px var(--f-game);
}
.inv-pages button:hover { color: var(--cream); }
.inv-pages button[aria-pressed="true"] { background: linear-gradient(#4a3a28, #2e2419); color: var(--cream); border-color: #8a6c4a; }
.bag { display: grid; grid-template-columns: repeat(5, 36px); grid-auto-rows: 32px; gap: 4px 2px; justify-content: center; }
.bag .slot { width: 36px; height: 32px; }
.bag .slot.tall2 { height: 68px; }
.bag .slot.tall3 { height: 104px; }
.bag .slot.dim { opacity: .3; }
.bag .slot.hit { border-color: var(--bronze-hi); }
.yang { display: flex; align-items: center; gap: 8px; margin-top: 8px; height: 24px; padding: 0 8px; background: #0e0b09; border: 1px solid #3b2f23; color: var(--cream); font: 12px var(--f-game); }
.inv-side { display: grid; gap: 14px; align-content: start; }

/* ---------- wiki ---------- */
.wiki { display: grid; grid-template-columns: 210px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 0; height: 640px; padding: 0; }
.wiki .gtitle { grid-column: 1 / -1; margin: 0; }
.wiki-menu { border-right: 1px solid #3b2f23; display: flex; flex-direction: column; min-height: 0; background: #15110d; }
.wiki-menu .wsearch { padding: 8px; border-bottom: 1px solid #2c231a; }
.wiki-menu .wsearch input { width: 100%; height: 24px; background: var(--slot); border: 1px solid #4a3a2a; color: var(--cream); font: 12px var(--f-game); padding: 0 8px; border-radius: 2px; }
.wiki-tree { overflow: auto; padding: 6px; display: grid; gap: 2px; align-content: start; scrollbar-color: #5a4733 #120e0b; }
.wcat { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: linear-gradient(#2e251c, #221a13); border: 1px solid #4a3a2a; color: var(--cream); font: 700 12px var(--f-game); cursor: pointer; text-align: left; }
.wcat { width: 100%; }
.wcat:hover { border-color: #6b5236; }
.wcat i { width: 6px; height: 6px; border-right: 1px solid #c9a46e; border-bottom: 1px solid #c9a46e; transform: rotate(-45deg); transition: transform .15s; margin: 0 2px; }
.wcat[aria-expanded="true"] i { transform: rotate(45deg); }
.wcat[aria-expanded="true"] { background: linear-gradient(#3a2e22, #2a2119); border-color: #8a6c4a; }
.wcat .ci { width: 19px; height: 19px; flex: none; image-rendering: pixelated; }
.wcat i { display: none; }
.wcat.locked { position: relative; cursor: default; color: #9c8a70; }
.wcat.locked .ci { opacity: .75; }
.wcat.locked:hover, .wcat.locked:focus-visible { border-color: #4a3a2a; color: #b8a88f; }
.wtip { position: absolute; left: 8px; right: 8px; top: calc(100% + 4px); z-index: 5; display: grid; gap: 3px; padding: 7px 9px; background: rgba(12,9,6,.97); border: 1px solid #6b5236; box-shadow: 0 6px 18px rgba(0,0,0,.6); font: 400 11px var(--f-game); color: var(--muted); opacity: 0; visibility: hidden; transform: translateY(-3px); transition: opacity .12s, transform .12s, visibility .12s; pointer-events: none; }
.wtip b { color: #e8c99a; font-size: 12px; }
.wcat.locked:hover .wtip, .wcat.locked:focus-visible .wtip, .wcat.locked.tip .wtip { opacity: 1; visibility: visible; transform: none; }
.wcat .cnt { margin-left: auto; font-weight: 400; color: var(--muted); font-size: 11px; }
.wcat-list { display: grid; gap: 1px; padding: 2px 0 6px; }
.wl-cards { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.wl-card { display: grid; gap: 4px; justify-items: start; text-align: left; padding: 12px; cursor: pointer; background: #17120e; border: 1px solid #3b2f23; color: #a99a84; font: 12px var(--f-game); }
.wl-card:hover { border-color: #8a6c4a; background: #1e1813; }
.wl-card b { color: var(--cream); font-size: 14px; }
.wl-card i { font-style: normal; color: var(--bronze-hi); font-size: 11px; }
.wl-ics { display: flex; gap: 4px; margin-bottom: 4px; }
.dg-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: #2c231a; }
.dg-info div { display: grid; gap: 2px; padding: 8px 10px; background: #17120e; }
.dg-info span { font: 11px var(--f-game); color: var(--muted); }
.dg-info b { font: 700 12px var(--f-game); color: var(--cream); }
.dg-info .wide { grid-column: 1 / -1; }
.dg-row { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; }
@media (max-width: 760px) { .wl-cards { grid-template-columns: minmax(0,1fr); } }
.wlink { display: block; width: 100%; text-align: left; padding: 4px 8px 4px 20px; background: none; border: 1px solid transparent; color: #b8a88f; font: 12px var(--f-game); cursor: pointer; position: relative; }
.wlink::before { content: ""; position: absolute; left: 9px; top: 10px; width: 3px; height: 3px; background: #6f5a41; transform: rotate(45deg); }
.wlink:hover { color: var(--cream); background: #1e1813; }
.wlink.on { color: #fff1d2; background: #2a2119; border-color: #6b5236; }
.wiki-page { overflow: auto; min-height: 0; padding: 0 12px 14px; scrollbar-color: #5a4733 #120e0b; }
.wp-head { position: sticky; top: 0; z-index: 2; margin: 0 -12px 10px; padding: 8px 12px; background: #1d1712; border-bottom: 1px solid #3b2f23; }
.wp-head h3 { font: 700 15px var(--f-game); color: var(--cream); }
.wp-head span { font: 11px var(--f-game); color: var(--muted); }
.wbox { border: 1px solid #3b2f23; background: #17120e; margin-bottom: 10px; }
.wbox > header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 5px 10px; background: linear-gradient(#2a2119, #1f1914); border-bottom: 1px solid #3b2f23; color: #e3d2b1; font: 700 12px var(--f-game); }
.wbox > header span { font-weight: 400; font-size: 11px; color: var(--muted); }
.wbox .in { padding: 10px; }
.intro { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 12px; color: #dccfb8; }
.intro .ics { display: flex; gap: 4px; flex: none; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; padding: 10px; position: relative; }
.step { background: #120e0b; border: 1px solid #33291f; padding: 8px 10px; position: relative; }
.step:not(:last-child)::after { content: "\203A"; position: absolute; right: -14px; top: 50%; transform: translateY(-50%); color: #a07c52; font: 700 18px var(--f-game); }
.step h5 { margin: 0 0 4px; font: 700 12px var(--f-game); color: var(--cream); display: flex; gap: 6px; align-items: center; }
.step h5 b { width: 16px; height: 16px; border-radius: 50%; border: 1px solid #a07c52; display: grid; place-items: center; font-size: 10px; color: #e2c894; }
.step p { color: #a99a84; font-size: 11.5px; }
.wtable { width: 100%; border-collapse: collapse; font: 12px var(--f-game); }
.wtable th { color: #9a8a74; font-weight: 400; padding: 4px 4px; border-bottom: 1px solid #2c231a; }
.wtable td { padding: 4px; text-align: center; border-bottom: 1px solid #221b14; color: #d6c8b0; }
.wtable td:first-child { color: var(--cream); }
.wtable tr:nth-child(even) td { background: #1a150f; }
.wtable .cell-ic { display: inline-grid; place-items: center; }
.witems { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px; padding: 10px; }
.witems.wide { grid-template-columns: minmax(0,1fr); }
.witem { display: flex; gap: 8px; align-items: center; background: #120e0b; border: 1px solid #2c231a; padding: 4px; min-width: 0; }
.witem .nm { color: var(--cream); font-weight: 700; display: block; }
.witem .ef { color: #a99a84; font-size: 11.5px; display: block; }
.wcards { display: grid; gap: 6px; padding: 10px; }
.wcard { background: #120e0b; border: 1px solid #2c231a; padding: 8px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px 12px; }
.wcard .hd { color: var(--cream); font-weight: 700; }
.wcard .tg { color: var(--muted); font-size: 11px; text-align: right; }
.wcard .its { display: flex; gap: 8px; flex-wrap: wrap; }
.wcard .its span { display: flex; align-items: center; gap: 4px; color: #a99a84; font-size: 11px; }
.wcard .ln { color: var(--tt-pos); font-size: 11.5px; text-align: right; }
.wcard .ln .q { color: #a99a84; }
.wnotes { display: grid; gap: 6px; padding: 10px; margin: 0; list-style: none; }
.wnotes li { display: grid; grid-template-columns: 16px 1fr; gap: 8px; color: #cbbda6; }
.wnotes li::before { content: "i"; width: 14px; height: 14px; border-radius: 50%; display: grid; place-items: center; font: 700 9px var(--f-game); color: #10161f; background: var(--info); margin-top: 1px; }
.wnotes li.ok::before { content: "\2713"; background: var(--ok); }
.wnotes li.warn::before { content: "!"; background: var(--warn); }
.wnotes li.x::before { content: "\00D7"; background: var(--bad); }
@media (max-width: 760px) {
  .wiki { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; height: auto; }
  .wiki-menu { border-right: 0; border-bottom: 1px solid #3b2f23; }
  .wiki-tree { max-height: 190px; }
  .wiki-page { max-height: 560px; }
  .steps { grid-template-columns: minmax(0,1fr); gap: 8px; }
  .step:not(:last-child)::after { display: none; }
  .witems { grid-template-columns: minmax(0,1fr); }
}

/* ---------- sistem demolari ---------- */
.demo { display: grid; gap: 16px; }
.seg { display: inline-flex; justify-self: start; width: max-content; max-width: 100%; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; flex-wrap: wrap; }
.seg button { height: 34px; min-width: 40px; padding: 0 12px; cursor: pointer; background: var(--panel); color: var(--muted); border: 0; border-right: 1px solid var(--line); font: 700 .875rem var(--f-display); }
.seg button:last-child { border-right: 0; }
.seg button:hover { color: var(--cream); }
.seg button[aria-pressed="true"] { background: var(--panel-hi); color: var(--cream); box-shadow: inset 0 -2px 0 var(--bronze); }
.uses { display: flex; flex-wrap: wrap; gap: 8px; }
.use {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); border-radius: 3px; color: var(--text); font: 600 .9375rem var(--f-body);
}
.use:hover { border-color: var(--bronze); color: var(--cream); }
.use:disabled { opacity: .45; cursor: not-allowed; }
.tt-stage { display: grid; place-items: center; padding: 28px 16px; background: radial-gradient(70% 70% at 50% 40%, #241c15, #110d0a 70%); border: 1px solid var(--line-soft); border-radius: 4px; min-height: 280px; }
.tt-stage .tt { min-width: 230px; }
@media (min-width: 1100px) { .tt-stage .tt { zoom: 1.15; } }
.bump { animation: bump .45s ease-out; }
@keyframes bump { 0% { background: rgba(176,223,180,.35); } 100% { background: transparent; } }
.line-new { display: inline-block; padding: 0 4px; border-radius: 2px; }
.note { font-size: .875rem; color: var(--muted); }

/* biyolog */
.bio { display: grid; gap: 18px; }
.lv-row { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; }
.lv-row label { font: 600 .875rem var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.lv-row output { font: 700 1.75rem/1 var(--f-display); color: var(--cream); min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums; }
input[type="range"] { width: 100%; accent-color: var(--bronze); }
.track { display: grid; grid-template-columns: repeat(17, minmax(0,1fr)); gap: 3px; }
.track button { height: 34px; padding: 0; cursor: pointer; border: 1px solid var(--line); background: var(--panel); color: var(--faint); font: 700 .75rem var(--f-game); border-radius: 2px; }
.track button.done { background: linear-gradient(#4a3a28, #2e2419); color: var(--cream); border-color: #8a6c4a; }
.track button.sel { outline: 2px solid var(--bronze-hi); outline-offset: 1px; }
.bio-body { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 18px; }
@media (max-width: 760px) { .bio-body { grid-template-columns: minmax(0,1fr); } .track { grid-template-columns: repeat(9, minmax(0,1fr)); } }
.sum { display: grid; gap: 6px; }
.sum div { display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px; background: var(--slot); border: 1px solid var(--line-soft); font: 12px var(--f-game); color: var(--tt-pos); }
.sum div b { color: var(--cream); font-variant-numeric: tabular-nums; }
.sum .empty { color: var(--muted); }

/* evrim */
.evo-tiers { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 6px; }
.evo-tiers button { padding: 10px 6px; cursor: pointer; background: var(--panel); border: 1px solid var(--line); color: var(--muted); display: grid; gap: 3px; border-radius: 3px; }
.evo-tiers button b { font: 700 1.125rem/1 var(--f-display); color: inherit; }
.evo-tiers button span { font: 12px var(--f-game); }
.evo-tiers button[aria-pressed="true"] { color: var(--cream); border-color: var(--rc); box-shadow: inset 0 -2px 0 var(--rc); background: var(--panel-hi); }
.mats { display: flex; flex-wrap: wrap; gap: 6px; }
.mats .m { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; background: var(--slot); border: 1px solid var(--line-soft); font: 12px var(--f-game); color: var(--text); }

/* son cagri ve alt bilgi */
.cta-band { position: relative; overflow: hidden; border-top: 1px solid var(--line-soft); background: linear-gradient(90deg, var(--ink) 20%, rgba(13,10,8,.6)), url("../media/hero-poster.jpg") 70% 30% / cover; }
.cta-band .wrap { padding-block: 72px; display: grid; gap: 18px; justify-items: start; }
.cta-band h2 { font: 700 var(--step-3)/1.1 var(--f-display); }
footer { border-top: 1px solid var(--line-soft); background: var(--stage); }
footer .wrap { padding-block: 26px; display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: space-between; color: var(--faint); font-size: .875rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- 01 performans ---------- */
.perf { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 900px) { .perf { grid-template-columns: minmax(0, 1fr); } }
.fps-card { background: radial-gradient(90% 120% at 20% 0%, #2a2018 0%, #120e0b 70%); border: 1px solid var(--line); border-radius: 4px; padding: 20px; display: grid; gap: 12px; min-width: 0; }
.fps-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.fps-num { display: flex; align-items: baseline; gap: 10px; }
.fps-num b { font: 700 clamp(4rem, 2rem + 7vw, 7rem)/.85 var(--f-display); font-variant-numeric: tabular-nums; background: linear-gradient(180deg, #fff1d2, #dcaa6a 60%, #9f7444); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 22px rgba(220,170,106,.25)); }
.fps-num span { font: 700 1.5rem var(--f-display); color: var(--bronze-hi); letter-spacing: .1em; }
.fps-api { display: grid; justify-items: end; gap: 2px; }
.fps-api b { font: 700 1.25rem var(--f-display); color: var(--cream); padding: 4px 10px; border: 1px solid var(--line-hi); border-radius: 3px; background: rgba(0,0,0,.25); }
.fps-api span { font-size: .8125rem; color: var(--muted); letter-spacing: .12em; text-transform: uppercase; }
#fpsCanvas { width: 100%; height: auto; aspect-ratio: 640 / 190; display: block; }
.fps-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font: 12px var(--f-game); color: var(--muted); }
.fps-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; }
.lg-a { background: var(--bronze-hi); } .lg-b { background: #8a8174; }
.tech { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 520px) { .tech { grid-template-columns: minmax(0, 1fr); } }
.tech-tile { display: grid; gap: 4px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line-soft); border-radius: 3px; }
.tech-tile b { color: var(--cream); font-size: 1rem; }
.tech-tile span { color: var(--muted); font-size: .9375rem; line-height: 1.45; }

/* ---------- 02 oynanis ---------- */
.qol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 860px) { .qol { grid-template-columns: minmax(0, 1fr); } }
.qcard { display: grid; grid-template-columns: 170px minmax(0, 1fr); background: var(--panel); border: 1px solid var(--line-soft); border-radius: 4px; overflow: hidden; }
@media (max-width: 520px) { .qcard { grid-template-columns: minmax(0, 1fr); } }
.qbody { padding: 14px 16px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.qbody h3 { font: 700 1.125rem/1.25 var(--f-body); color: var(--cream); }
.qbody p { font-size: .9375rem; line-height: 1.5; }
.qkeys { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 6px; }
.qkeys li { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: .875rem; color: var(--text); }
.qtry { font-size: .875rem; }
.combo { display: inline-flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.combo > i { font-style: normal; color: var(--faint); font-size: .75rem; }
.kbd-m { display: inline-flex; align-items: center; gap: 4px; }
.ms { display: inline-flex; color: var(--muted); }
.art { position: relative; min-height: 150px; background: linear-gradient(160deg, #1a140f, #0e0b09); border-right: 1px solid var(--line-soft); display: grid; place-items: center; padding: 12px; overflow: hidden; }
@media (max-width: 520px) { .art { border-right: 0; border-bottom: 1px solid var(--line-soft); } }
.art-cap { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.art-cap .combo { flex-wrap: nowrap; }
.art-cap .kbd { font-size: .6875rem; padding: 0 4px; }
.art-cap .ms svg { width: 11px; height: 15px; }
.art-note { position: absolute; bottom: 6px; right: 8px; font: 10px var(--f-game); color: var(--faint); }
.art-cell { width: 34px; height: 34px; display: grid; place-items: center; background: var(--slot); border: 1px solid #3c3024; border-radius: 3px; }
.art-cell .ic { transform: scale(.9); }
.art-grid { display: grid; grid-template-columns: repeat(4, 34px); gap: 3px; margin-bottom: 26px; }
.art-grid.g6 { grid-template-columns: repeat(4, 30px); }
.art-grid.g6 .art-cell { width: 30px; height: 30px; }
.art-shop .art-cell .ic, .art-trade .art-cell:not(.off) .ic { animation: pop 2.8s ease-out infinite both; animation-delay: inherit; }
@keyframes pop { 0%, 8% { opacity: 0; transform: scale(.4); } 18%, 85% { opacity: 1; transform: scale(.9); } 100% { opacity: 0; transform: scale(.9); } }
.art-wheel { align-content: center; gap: 22px; }
.art-mouse { transform: scale(2.2); color: var(--muted); }
.art-mouse .ms-w svg rect { animation: wheelroll 1.6s ease-in-out infinite; }
@keyframes wheelroll { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(2px); } }
.art-pages { display: flex; gap: 3px; }
.art-pages span { width: 26px; height: 18px; display: grid; place-items: center; font: 700 10px var(--f-game); color: #a9977d; background: linear-gradient(#2b221a, #1b1510); border: 1px solid #4a3a2a; animation: pagehi 4s steps(1) infinite; }
@keyframes pagehi { 0% { background: linear-gradient(#5a4630, #35291d); color: #fff1d2; border-color: #a07c52; } 20%, 100% { background: linear-gradient(#2b221a, #1b1510); color: #a9977d; border-color: #4a3a2a; } }
.art-notify { align-content: center; gap: 8px; }
.toast { display: flex; gap: 8px; align-items: center; max-width: 150px; padding: 6px 8px; background: rgba(31,25,19,.97); border: 1px solid #6b5236; font: 10.5px/1.3 var(--f-game); color: #cfc2ad; animation: toastin 5s ease-out infinite; }
.toast.t2 { animation-delay: 1.2s; }
.toast b { color: var(--cream); } .toast b.y { color: #ffc23c; }
@keyframes toastin { 0% { opacity: 0; transform: translateX(30px); } 10%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.art-search { align-content: center; justify-items: center; gap: 4px; }
.sbox { width: 140px; height: 22px; display: flex; align-items: center; padding: 0 6px; background: var(--slot); border: 1px solid #6b5236; font: 11px var(--f-game); color: var(--cream); }
.typed { overflow: hidden; white-space: nowrap; width: 0; animation: typing 4s steps(9) infinite; }
@keyframes typing { 0% { width: 0; } 40%, 100% { width: 9ch; } }
.caret { width: 1px; height: 12px; background: var(--cream); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.sdrop { width: 140px; display: grid; background: #1d1712; border: 1px solid #4a3a2a; animation: drop 4s ease-out infinite; }
.sdrop span { display: flex; align-items: center; gap: 6px; padding: 2px 6px; font: 10.5px var(--f-game); color: #cfc2ad; }
.sdrop .ic { transform: scale(.6); margin: -6px; }
@keyframes drop { 0%, 40% { opacity: 0; transform: translateY(-4px); } 50%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.sbasket { font: 700 10px var(--f-game); color: var(--bronze-hi); }
.art-move { grid-auto-flow: column; gap: 14px; }
.art-move .pane { display: grid; gap: 4px; justify-items: center; }
.art-move small { font: 10px var(--f-game); color: var(--muted); }
.art-move .pane:first-child .art-cell .ic { animation: fade1 3s infinite; }
.art-move .fly { position: absolute; left: 50%; top: 50%; animation: flyx 3s ease-in-out infinite; }
@keyframes flyx { 0%, 15% { transform: translate(-58px, -6px); opacity: 0; } 25% { opacity: 1; } 70% { transform: translate(24px, -6px); opacity: 1; } 80%, 100% { transform: translate(24px, -6px); opacity: 1; } }
@keyframes fade1 { 0%, 15% { opacity: 1; } 25%, 100% { opacity: .15; } }
.art-pm { align-content: center; justify-items: start; gap: 4px; padding-bottom: 34px; }
.pmb { display: flex; align-items: center; gap: 6px; padding: 3px 8px; font: 10.5px var(--f-game); color: var(--cream); background: linear-gradient(#3a2e22, #261e17); border: 1px solid #5d4a35; animation: pmout 3.6s ease-in infinite; }
.pmb i { width: 8px; height: 8px; border-radius: 50%; background: #8fc48f; }
@keyframes pmout { 0%, 55% { opacity: 1; transform: none; } 65%, 100% { opacity: 0; transform: translateX(-16px); } }
.art-link p { font: 11px/1.4 var(--f-game); color: #e0d7c6; text-align: center; margin-bottom: 26px; }
.art-link .nm { color: #8fc48f; }
.ilink { color: #ffc23c; cursor: pointer; }
.kb-wrap { display: grid; gap: 12px; padding: 18px; background: var(--panel); border: 1px solid var(--line-soft); border-radius: 4px; }
.kb-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.kb-head h3 { font: 700 1.25rem var(--f-display); color: var(--cream); }
.kb-head span { color: var(--muted); font-size: .875rem; }
.kb { display: grid; gap: 5px; overflow-x: auto; padding-bottom: 4px; }
.kb-row { display: flex; gap: 5px; }
.kb-row.r2 { padding-left: 16px; } .kb-row.r3 { padding-left: 0; }
.kk { flex: none; min-width: 38px; height: 36px; padding: 0 8px; border-radius: 4px; font: 700 12px var(--f-game); color: #6f6252; background: linear-gradient(#1f1913, #15110d); border: 1px solid #2c231a; border-bottom-width: 3px; }
.kk.wide { min-width: 62px; } .kk.space { min-width: 220px; }
.kk.hot { color: var(--cream); cursor: pointer; background: linear-gradient(#3e3024, #2a2119); border-color: #8a6c4a; }
.kk.hot:hover, .kk.hot.on { background: linear-gradient(#5a4630, #3a2e22); border-color: var(--bronze-hi); color: #fff1d2; box-shadow: 0 0 12px rgba(220,170,106,.35); }
.kb-info { display: grid; gap: 6px; min-height: 2.6em; }
.kb-line { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; color: var(--text); }

/* ---------- wiki tanitim ---------- */
.wiki-hero { position: relative; display: grid; gap: 14px; padding: 26px 26px 22px; border: 1px solid #6b5236; border-radius: 4px; background:
  radial-gradient(80% 140% at 0% 0%, rgba(167,59,43,.28), transparent 60%), radial-gradient(70% 120% at 100% 100%, rgba(192,138,76,.18), transparent 60%), #15100c; }
.wh-big { font: 700 clamp(1.5rem, 1rem + 2.2vw, 2.4rem)/1.15 var(--f-display); color: var(--cream); text-wrap: balance; max-width: 26ch; }
.wh-big em { font-style: normal; color: #ff9a6a; background: linear-gradient(180deg, #ffcf8a, #e0703c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wh-sub { font-size: var(--step-1); max-width: 66ch; color: #e2d5bf; }
.wh-sub b { color: #ffd9a0; }
.wh-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 700px) { .wh-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wh-stats div { display: grid; gap: 2px; padding: 10px 12px; background: rgba(0,0,0,.3); border: 1px solid var(--line); border-radius: 3px; }
.wh-stats b { font: 700 1.6rem/1 var(--f-display); color: var(--bronze-hi); font-variant-numeric: tabular-nums; }
.wh-stats span { font-size: .8125rem; color: var(--muted); }

/* ---------- Temel Sistemler tanitim bolumleri ---------- */
.rail { max-height: calc(100vh - var(--topbar) - 40px); overflow-y: auto; gap: 12px; padding-right: 6px; scrollbar-width: thin; scrollbar-color: #4a3a2a transparent; }
.rail a { padding: 3px 0; font-size: .875rem; }
.sys-tag { justify-self: start; padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; font: 600 .75rem/1.4 var(--f-body); letter-spacing: .06em; color: var(--muted); }
.sys-left { display: grid; gap: 22px; align-content: start; }
.sys-h { margin: 0 0 10px; font: 700 .75rem/1 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--faint); }
.flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: none; }
.flow li { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 12px; align-items: start; }
.flow li > b { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid #6b5236; background: linear-gradient(#2e251c, #1a140f); color: var(--bronze-hi); border-radius: 50%; }
.flow li > b::after { content: attr(data-n); font: 700 .8125rem var(--f-display); }
.flow li span { color: var(--text); line-height: 1.5; }
.flow li strong { display: block; color: var(--cream); font-weight: 700; }
.sys-notes { padding: 0; }
.sys-wiki { justify-self: start; }
.sys-vis { display: grid; gap: 14px; min-width: 0; }
.sys-win { min-width: 0; }
.sys-sub { margin: 0; padding: 6px 10px 0; font: 11.5px var(--f-game); color: #8f7f68; }
.sys-icons { display: flex; flex-wrap: wrap; gap: 10px; }
.sys-big { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 3px; font: 12px var(--f-game); color: var(--cream); }
.note { margin: 0; font-size: .8125rem; color: var(--faint); }
/* efsun botu */
.sb-body { display: grid; gap: 10px; padding: 12px; justify-items: center; }
.sb-slots { display: flex; gap: 6px; }
.sb-slot.on { box-shadow: 0 0 0 1px #c9a46e; }
.sb-target { width: 100%; display: grid; gap: 2px; padding: 6px 10px; background: #120e0b; border: 1px solid #2c231a; font: 12px var(--f-game); color: #d6c8b0; }
.sb-target small { color: #8f7f68; }
.sb-tt { position: relative; pointer-events: auto; width: 100%; max-width: 280px; }
.sb-lines div { color: var(--tt-pos, #8ab98e); font: 12px var(--f-game); text-align: center; }
.sb-lines div.hit { color: #e1fae1; text-shadow: 0 0 6px rgba(140,220,140,.45); }
.sb-stats { display: flex; gap: 18px; font: 12px var(--f-game); color: var(--muted); }
.sb-stats b { color: var(--cream); }
.sb-msg { min-height: 1.4em; justify-content: center; text-align: center; }
/* otomatik av */
.ah-body { display: grid; gap: 10px; padding: 12px; font: 12px var(--f-game); color: #cbbda6; }
.ah-body small, .ah-body label { color: #8f7f68; }
.ah-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ah-tog { height: 28px; padding: 0 12px; background: #1a140f; border: 1px solid #4a3a2a; color: #9c8a70; font: 700 12px var(--f-game); cursor: pointer; }
.ah-tog.on { background: linear-gradient(#3a2e22, #2a2119); border-color: #8a6c4a; color: var(--cream); }
.ah-skills { display: flex; gap: 6px; }
.ah-sk { cursor: pointer; color: #6f5a41; font: 700 12px var(--f-game); }
.ah-sk.on { color: var(--cream); box-shadow: inset 0 0 0 1px #8a6c4a, inset 0 0 12px rgba(201,164,110,.25); }
#ahRange { width: 100%; accent-color: #a8743f; }
.ah-ring { --r: 6; height: 120px; position: relative; display: grid; place-items: center; background: radial-gradient(circle, #1d1711 0, #120e0b 70%); border: 1px solid #2c231a; overflow: hidden; }
.ah-ring::before { content: ""; width: calc(var(--r) * 11px); height: calc(var(--r) * 11px); border-radius: 50%; border: 1px dashed #8a6c4a; background: rgba(168,116,63,.08); transition: width .2s, height .2s; }
.ah-ring::after { content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--cream); box-shadow: 0 0 8px var(--bronze-hi); }
.ah-ring.run::before { animation: ahPulse 1.6s ease-in-out infinite; }
@keyframes ahPulse { 50% { background: rgba(168,116,63,.2); border-color: #c9a46e; } }
.ah-state { color: var(--muted); }
.ah-state.on { color: #8ab98e; }
/* ronark, zar */
.rk { display: grid; gap: 6px; padding: 12px; }
.rk-row { display: grid; grid-template-columns: 130px minmax(0,1fr) 44px; gap: 8px; align-items: center; font: 12px var(--f-game); color: #d6c8b0; }
.rk-row i { height: 10px; background: linear-gradient(90deg, #6b4a2a, #c08a52); border: 1px solid #2c231a; transition: width .5s; }
.rk-row b { text-align: right; color: var(--cream); }
.dice { display: flex; justify-content: center; align-items: center; gap: 22px; padding: 14px; text-align: center; font: 12px var(--f-game); color: #8f7f68; }
.dice > div { display: grid; gap: 8px; justify-items: center; }
.die { width: 64px; height: 64px; display: grid; place-items: center; background: linear-gradient(#2e251c, #1a140f); border: 1px solid #8a6c4a; color: var(--cream); font: 700 1.5rem var(--f-display); }
.vs { font: 700 1rem var(--f-display); color: var(--bronze-hi); }
.rar-seg { width: auto; }
.rar-seg button { font-family: var(--f-game); font-size: .8125rem; }
@media (max-width: 900px) { .sys-split > .sys-vis { order: -1; } }
@media (max-width: 520px) { .rk-row { grid-template-columns: 96px minmax(0,1fr) 38px; } }

/* ---------- Oyun Pencereleri ---------- */
.win-body { display: grid; gap: 28px; }
.win-left { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.win-left:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.win-feats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.win-left:has(> .sys-notes) .win-feats { grid-template-columns: minmax(0, 1fr); }
.win-stage { display: grid; gap: 10px; justify-items: center; min-width: 0; }
.win-stage > .fitbox { width: 100%; }
.win-note { text-align: center; }
.hw-ex { display: inline-block; margin-left: 6px; padding: 1px 8px; border: 1px solid var(--line); border-radius: 999px; font-size: .75rem; letter-spacing: .04em; color: var(--muted); }
@media (max-width: 900px) { .win-left, .win-feats { grid-template-columns: minmax(0, 1fr) !important; } }
.fitbox { position: relative; overflow: hidden; margin: 0 auto; max-width: 100%; }
.fitstage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.hw-board, .hw-hub { position: relative; font: 12px/1.25 var(--f-game); color: #ddba94; }
.hw-hub { width: 898px; height: 582px; }
.hw-board { position: absolute; left: 0; top: 0; background: linear-gradient(#1b1611, #120e0b); border: 1px solid #5a4733; box-shadow: inset 0 0 0 1px #0a0806, 0 18px 50px rgba(0,0,0,.55); border-radius: 3px; }
.ch-stage .hw-board { position: relative; }
.hw-title { position: absolute; left: 6px; right: 6px; top: 6px; height: 22px; display: flex; align-items: center; justify-content: center; background: linear-gradient(#3a2e22, #241c15); border: 1px solid #4a3a2a; color: #f2e7c1; font-weight: 700; }
.hw-x { position: absolute; right: 6px; top: 3px; width: 15px; height: 15px; display: grid; place-items: center; font-style: normal; font-size: 13px; line-height: 1; color: #c9a46e; border: 1px solid #6b5236; background: #1a140f; }
.hw-a { position: absolute; }
.hw-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
img.hw-a { pointer-events: none; user-select: none; }
.hw-rail { position: absolute; left: 0; top: 0; width: 40px; height: 582px; }
.hw-tab { border: 0; padding: 0; background: no-repeat 0 0; cursor: pointer; }
.hw-tab:hover:not(.on) { filter: brightness(1.25); }
.hw-a:focus-visible, .hw-tab:focus-visible { outline: 2px solid var(--bronze-hi); outline-offset: 1px; }
/* hizli menu */
.qm-tile { border: 0; padding: 0; background: url(../ui/hub/qm_tile_n.png) no-repeat; cursor: pointer; color: #ddba94; font: 12px var(--f-game); }
.qm-tile:hover { background-image: url(../ui/hub/qm_tile_h.png); }
.qm-tile:active { background-image: url(../ui/hub/qm_tile_d.png); }
.qm-l { position: absolute; left: 4px; right: 4px; top: 49px; text-align: center; line-height: 1.15; font-size: 12px; }
.qm-k { position: absolute; top: 72px; left: 50%; height: 18px; transform: translateX(-50%); display: grid; place-items: center; font: 11px var(--f-game); color: #bda180; background: no-repeat center / 100% 100%; }
.qm-k.k-s { width: 24px; background-image: url(../ui/hub/qm_key_s.png); } .qm-k.k-m { width: 32px; background-image: url(../ui/hub/qm_key_m.png); }
.qm-k.k-l { width: 44px; background-image: url(../ui/hub/qm_key_l.png); } .qm-k.k-x { width: 60px; background-image: url(../ui/hub/qm_key_x.png); }
.qm-hint { height: 24px; line-height: 24px; text-align: center; color: #bda180; }
/* isinlanma */
.tp-map { overflow: hidden; }
.tp-chk { display: flex; gap: 6px; align-items: center; padding: 3px 8px; background: rgba(12,9,6,.75); border: 1px solid #4a3a2a; color: #ddba94; cursor: pointer; }
.tp-chk input { accent-color: #a8743f; margin: 0; }
.tp-n { color: #f2e7c1; font-weight: 700; font-size: 13px; } .tp-s { color: #bda180; } .tp-r { text-align: right; color: #8ab98e; }
.tp-pop { background: rgba(14,11,8,.97); border: 1px solid #8a6c4a; box-shadow: 0 10px 30px rgba(0,0,0,.7); padding: 0 0 6px; z-index: 3; }
.tp-pt { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; background: linear-gradient(#3a2e22, #241c15); border-bottom: 1px solid #4a3a2a; color: #f2e7c1; }
.tp-close { background: none; border: 0; color: #c9a46e; font-size: 15px; cursor: pointer; }
.tp-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 10px; border-bottom: 1px solid #221b14; }
.tp-go { padding: 3px 12px; background: linear-gradient(#3a2e22, #2a2119); border: 1px solid #8a6c4a; color: #f2e7c1; font: 700 11px var(--f-game); cursor: pointer; }
.tp-go:hover { filter: brightness(1.2); }
.tp-q { padding: 10px; display: grid; gap: 10px; text-align: center; } .tp-q p { margin: 0; } .tp-q div { display: flex; gap: 8px; justify-content: center; }
.tp-ok { padding: 12px; text-align: center; color: #8ab98e; }
/* zindan */
.dg-row { border: 0; padding: 0; background: url(../ui/hub/dg_row_n.png) no-repeat; cursor: pointer; text-align: left; color: inherit; font: inherit; overflow: hidden; }
.dg-row:hover { background-image: url(../ui/hub/dg_row_h.png); }
.dg-row.on { background-image: url(../ui/hub/dg_row_s.png); }
.dg-rn { color: #f2e7c1; font-weight: 700; font-size: 13px; max-width: 120px; } .dg-rs { color: #8ab98e; }
.dg-pv { opacity: .95; }
.dg-h { color: #f2e7c1; font-weight: 700; font-size: 14px; } .dg-hs { text-align: right; color: #8ab98e; }
.dg-bigpv { transform: scale(1); }
.dg-bn { text-align: center; color: #f2e7c1; font-weight: 700; }
.dg-l { color: #bda180; } .dg-v { text-align: right; color: #f2e7c1; }
.dg-req { --sz: 32px; }
.dg-stat { display: grid; justify-items: center; align-content: center; gap: 4px; text-align: center; }
.dg-stat small { color: #bda180; font-size: 12px; } .dg-stat b { color: #f2e7c1; font-size: 15px; }
.dg-rk, .dg-btn, .ig-btn { padding: 3px 12px; background: linear-gradient(#3a2e22, #2a2119); border: 1px solid #6b5236; color: #ddba94; font: 700 11px var(--f-game); cursor: pointer; }
.dg-rk:hover, .dg-btn:hover, .ig-btn:hover { filter: brightness(1.2); }
.dg-actions { display: flex; gap: 8px; align-items: center; }
.dg-btn { height: 30px; padding: 0 16px; }
.dg-btn.test { margin-left: auto; width: 96px; }
.dg-btn.big { width: 200px; background: linear-gradient(#5a3a22, #3a2416); border-color: #a8743f; color: #f2e7c1; letter-spacing: .04em; }
/* siralama */
.rk-cat { border: 0; padding: 0 0 0 44px; display: flex; align-items: center; background: url(../ui/hub/rk_cat_n.png) no-repeat; color: #ddba94; font: 12px var(--f-game); text-align: left; cursor: pointer; }
.rk-cat:hover { background-image: url(../ui/hub/rk_cat_h.png); }
.rk-cat.on { background-image: url(../ui/hub/rk_cat_s.png); color: #f2e7c1; font-weight: 700; }
.rk-tt { color: #f2e7c1; font-weight: 700; font-size: 13px; } .rk-top { text-align: right; color: #fff; }
.rk-face { height: 60px; line-height: 60px; text-align: center; font: 700 22px var(--f-display); color: rgba(242,231,193,.55); }
.rk-pn { text-align: center; font-weight: 700; font-size: 14px; } .rk-ps { text-align: center; color: #fff; }
.rk-rn { color: #bda180; } .rk-name { color: #fff; } .rk-sc { text-align: right; color: #fff; } .rk-me { color: #ddba94; font-weight: 700; }
/* takvim */
.cal-m { text-align: center; color: #f2e7c1; font-weight: 700; font-size: 13px; }
.cal-arw { border: 0; padding: 0; background: no-repeat; cursor: pointer; }
.cal-arw:hover { filter: brightness(1.3); }
.cal-wk div { text-align: center; color: #bda180; } .cal-wk .we { color: #c9a46e; }
.cal-cell { border: 0; padding: 0; background: no-repeat; cursor: pointer; }
.cal-cell:hover { filter: brightness(1.2); }
.cal-cell.sel { box-shadow: inset 0 0 0 2px #c9a46e; }
.cal-d { position: absolute; left: 4px; top: 2px; font-size: 11px; color: #f2e7c1; z-index: 1; text-shadow: 0 1px 2px #000; }
.cal-ic { width: 45px; height: 45px; }
.cal-b { position: absolute; right: 2px; bottom: 2px; min-width: 16px; height: 16px; padding: 0 3px; display: grid; place-items: center; background: url(../ui/hub/cal_badge.png) center / 100% 100%; font-size: 10px; color: #fff; }
.cal-dm { color: #f2e7c1; font-weight: 700; } .cal-ds { color: #bda180; }
.cal-empty { text-align: center; color: #8f7f68; }
.cal-cn { color: #f2e7c1; font-weight: 700; white-space: normal; line-height: 1.2; max-height: 32px; } .cal-cs { color: #bda180; font-size: 11px; }
/* battlepass */
.bp-tot { text-align: right; color: #f2e7c1; font-weight: 700; }
.bp-totfill, .bp-fill, .bp-bigfill { background: url(../ui/hub/bp_total_fill.png) no-repeat 0 0 / 100% 100%; }
.bp-fill { background-image: url(../ui/hub/bp_bar_fill.png); } .bp-fill.full { background-image: url(../ui/hub/bp_bar_full.png); }
.bp-bigfill { background-image: url(../ui/hub/bp_big_fill.png); } .bp-bigfill.full { background-image: url(../ui/hub/bp_big_full.png); }
.bp-row { border: 0; padding: 0; background: no-repeat; cursor: pointer; color: inherit; font: inherit; text-align: left; }
.bp-row:hover { filter: brightness(1.15); }
.bp-rn { color: #f2e7c1; font-weight: 700; } .bp-rc { text-align: right; color: #bda180; }
.bp-dh { color: #f2e7c1; font-weight: 700; } .bp-ds { text-align: right; color: #c9a46e; } .bp-ds.ok { color: #8ab98e; }
.bp-dt { color: #f2e7c1; font-weight: 700; font-size: 14px; } .bp-dg { color: #bda180; }
.bp-bt { text-align: center; color: #fff; text-shadow: 0 1px 2px #000; }
.bp-bo { text-align: center; color: #ddba94; font-weight: 700; } .bp-bl { text-align: center; color: #8ab98e; white-space: normal; }
.bp-end { border: 0; padding: 0; background: url(../ui/hub/bp_end_n.png) no-repeat; color: #f2e7c1; font: 700 13px var(--f-game); cursor: pointer; }
.bp-end:hover { background-image: url(../ui/hub/bp_end_h.png); }
.bp-end.x, .bp-end:disabled { background-image: url(../ui/hub/bp_end_x.png); color: #8f7f68; cursor: default; }
/* pazar arama */
.ss-cat { display: flex; align-items: center; gap: 6px; padding: 0 0 0 6px; border: 0; background: url(../ui/hub/ss_cat_n.png) no-repeat; color: #ddba94; font: 12px var(--f-game); cursor: pointer; text-align: left; }
.ss-cat:hover { background-image: url(../ui/hub/ss_cat_h.png); } .ss-cat.on { background-image: url(../ui/hub/ss_cat_s.png); color: #f2e7c1; }
.ss-head div { color: #bda180; }
.ss-slot { width: 36px; height: 36px; --sz: 32px; } .ss-slot.tall2, .ss-slot.tall3, .ig-slot.tall2, .ig-slot.tall3 { height: 36px; overflow: hidden; }
.ss-n { color: #f2e7c1; font-weight: 700; } .ss-p { color: #f2e7c1; font-weight: 700; text-align: right; }
.ss-empty { text-align: center; color: #8f7f68; }
.ss-cnt { color: #bda180; }
/* uzaktan market */
.rs-card { border: 1px solid #4a3a2a; padding: 0; background: radial-gradient(circle at 50% 40%, #2e2419, #120e0b 75%); cursor: pointer; overflow: hidden; }
.rs-card:hover, .rs-card.on { border-color: #8a6c4a; }
.rs-glow { position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, rgba(201,164,110,.18), transparent 60%); }
.rs-ic { position: absolute; left: 50%; top: 52px; transform: translateX(-50%) scale(1.4); }
.rs-init { position: absolute; left: 0; right: 0; top: 46px; text-align: center; font: 700 34px var(--f-display); color: rgba(221,186,148,.55); }
.rs-tag { position: absolute; left: 0; right: 0; top: 10px; text-align: center; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #8f7f68; }
.rs-name { display: grid; place-items: center; background: url(../ui/hub/rs_name_n.png) no-repeat; color: #f2e7c1; font: 700 11px var(--f-game); white-space: nowrap; }
.rs-card:hover .rs-name, .rs-card.on .rs-name { background-image: url(../ui/hub/rs_name_h.png); }
/* log */
.ig-tab { border: 0; background: url(../ui/hub/ig_tab_n.png) no-repeat; color: #bda180; font: 700 12px var(--f-game); cursor: pointer; }
.ig-tab:hover { background-image: url(../ui/hub/ig_tab_h.png); } .ig-tab.on { background-image: url(../ui/hub/ig_tab_s.png); color: #f2e7c1; }
.ig-h { color: #bda180; } .ig-n { color: #f2e7c1; } .ig-p { color: #f2e7c1; font-weight: 700; } .ig-c { color: #ddba94; }
.ig-slot { width: 36px; height: 36px; --sz: 32px; }
.ig-close { text-align: center; color: #bda180; }
/* kanal */
.ch-wrap { display: grid; gap: 10px; justify-items: center; }
.ch-stage { width: 190px; height: 182px; position: relative; }
.ch-b { display: flex; align-items: center; justify-content: space-between; padding: 0 10px; background: linear-gradient(#2e251c, #221a13); border: 1px solid #4a3a2a; color: #ddba94; font: 700 12px var(--f-game); cursor: pointer; }
.ch-b:hover:not(:disabled) { border-color: #8a6c4a; color: #f2e7c1; }
.ch-b:disabled { cursor: default; background: linear-gradient(#3a2e22, #2a2119); border-color: #8a6c4a; color: #f2e7c1; }
.ch-b small { color: #8ab98e; font-size: 11px; font-weight: 400; }
.qm-l.two { top: 43px; font-size: 11px; line-height: 12px; }
.rs-ic.tall { top: 30px; transform: translateX(-50%); }
.cal-live { display: grid; place-items: center; background: url(../ui/hub/cal_live.png) no-repeat; font: 700 10px var(--f-game); color: #e1fae1; letter-spacing: .06em; }
.rar-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.rar-it { cursor: pointer; padding: 0; }
.rar-it.on { box-shadow: 0 0 0 1px #c9a46e, inset 0 0 12px rgba(201,164,110,.25); }
.backbtn { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 3px; border: 1px solid #8a6c4a; background: linear-gradient(#3a2e22, #241c15); color: var(--cream); font: 700 .875rem var(--f-body); letter-spacing: .04em; box-shadow: 0 10px 30px rgba(0,0,0,.6); cursor: pointer; }
.backbtn:hover { filter: brightness(1.15); }
/* pazar arama v2 */
.ss-q { background: transparent; border: 0; color: #f2e7c1; font: 12px var(--f-game); padding: 0; outline: none; }
.ss-q::placeholder { color: #7d6a52; }
.ss-find { border: 0; padding: 0; background: url(../ui/hub/ss_find_n.png) no-repeat; cursor: pointer; }
.ss-find:hover { filter: brightness(1.25); }
.ss-mode { border: 0; padding: 0; background: none; cursor: pointer; }
.ss-mt { color: #ddba94; pointer-events: none; }
.ss-fbtn { border: 0; padding: 0 0 0 18px; background: url(../ui/hub/ss_filter_n.png) no-repeat; color: #ddba94; font: 12px var(--f-game); text-align: center; cursor: pointer; }
.ss-fbtn:hover { background-image: url(../ui/hub/ss_filter_h.png); } .ss-fbtn.on { background-image: url(../ui/hub/ss_filter_a.png); color: #f2e7c1; }
.ss-freset { border: 0; padding: 0; background: url(../ui/hub/ss_reset_n.png) no-repeat; cursor: pointer; } .ss-freset.on { background-image: url(../ui/hub/ss_reset_on_n.png); }
.ss-fp { z-index: 4; box-shadow: 0 10px 30px rgba(0,0,0,.6); }
.ss-fi { border: 0; padding: 0 6px; background: url(../ui/hub/ss_field_s.png) no-repeat; color: #f2e7c1; font: 11px var(--f-game); outline: none; }
.ss-fi.w { background-image: url(../ui/hub/ss_combo.png); }
.ss-fi::placeholder { color: #8f7f68; }
.ss-fi:focus { box-shadow: 0 0 0 1px #8a6c4a; }
.ss-job { border: 0; padding: 0; background: no-repeat; cursor: pointer; }
.ss-fl { color: #bda180; }
.ss-per { background: #120e0b; border: 1px solid #4a3a2a; color: #ddba94; font: 11px var(--f-game); }
.ss-seller { border: 0; padding: 0; background: none; color: #8f7f68; font: 11px var(--f-game); cursor: pointer; text-decoration: underline dotted; }
.ss-seller:hover { color: #ddba94; }
.ss-cnt1 { text-align: right; color: #fff; font-size: 11px; text-shadow: 0 1px 1px #000; }
.ss-pg { border: 0; padding: 0; background: url(../ui/hub/ss_page_n.png) no-repeat; color: #bda180; font: 11px var(--f-game); cursor: pointer; }
.ss-pg.on { background-image: url(../ui/hub/ss_page_s.png); color: #f2e7c1; }
.win-callout { margin: 0; padding: 16px 20px; border: 1px solid #6b5236; border-left: 3px solid var(--bronze-hi); background: linear-gradient(90deg, rgba(58,46,34,.75), rgba(26,20,15,.4)); border-radius: 3px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: var(--step-1); color: var(--cream); }
.win-callout .combo { flex: none; }

/* ---------- Otomatik Av penceresi ---------- */
/* Otomatik Av penceresi (uiautohunt.py). Renkler oyundaki sabitler: COLOR_GOLD #deba94, COLOR_WHITE #ede6d9, COLOR_TAN #ada191 */
.ahw { user-select: none; -webkit-user-select: none; }
.ahw img { max-width: none; }
.ahw .ahw-knob, .ahw .ahw-track { pointer-events: auto; }
.ahw .hw-t { font: 12px/14px var(--f-game); color: #fff; overflow: visible; }
.ahw-c { text-align: center; }
.ahw-r { text-align: right; }
.ahw .ahw-big { font-size: 14px; line-height: 16px; }
.ahw .ahw-gold { color: #deba94; }
.ahw .ahw-white { color: #ede6d9; }
.ahw .ahw-tan { color: #ada191; }
.ahw .ahw-w { color: #fff; }
.ahw-ol { text-shadow: -1px 0 #000, 1px 0 #000, 0 -1px #000, 0 1px #000, -1px -1px #000, 1px 1px #000, -1px 1px #000, 1px -1px #000; }

.ahw-banner, .ahw-panel, .ahw-status, .ahw-slider, .ahw-list { overflow: visible; }
.ahw-status .hw-t, .ahw-panel > .hw-t { pointer-events: none; }

.ahw-btn { margin: 0; padding: 0; border: 0; background: none; cursor: pointer; display: block; color: inherit; font: inherit; }
.ahw-btn .hw-t { pointer-events: none; }
.ahw-btn:focus { outline: none; }
.ahw-btn:focus-visible { outline: 1px dotted #ddba94; outline-offset: 1px; }
.ahw-opt .hw-a { pointer-events: none; }

.ahw-slider { cursor: pointer; }
.ahw-slider:focus { outline: none; }
.ahw-slider:focus-visible { outline: 1px dotted #ddba94; outline-offset: 2px; }
.ahw-fill { height: 6px; pointer-events: none !important; }
.ahw-knob { cursor: grab; touch-action: none; }
.ahw-knob:active { cursor: grabbing; }

.ahw-tip { display: none; z-index: 3; }
.ahw-btn:hover .ahw-tip { display: block; }

.ahw-list { overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #5a4733 #0d0a08; }
.ahw .ahw-row { --sz: 32px; display: block; width: 268px; height: 36px; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; filter: none; cursor: default; }
.ahw .ahw-row:hover { filter: none; }
.ahw .ahw-row .ic { position: absolute; left: 2px; top: 2px; transform-origin: 0 0; }
.ahw .ahw-row .hw-t { pointer-events: none; }
.ahw .ahw-row .ahw-name { text-overflow: clip; }

.ahw .ahw-chat { color: #ffc8c8; opacity: 0; transition: opacity .25s; pointer-events: none; z-index: 4;
  text-shadow: -1px 0 #000, 1px 0 #000, 0 -1px #000, 0 1px #000; }
.ahw .ahw-chat.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ahw .ahw-chat { transition: none; } }

/* ---------- Efsun Botu penceresi ---------- */
/* Efsun Botu penceresi (uiswitchbot.py v2) - 400x372, yerel piksel */
.sbw { font: 12px/1.25 var(--f-game); color: #ddba94; -webkit-user-select: none; user-select: none; }
.sbw .sbw-hide { display: none !important; }

/* ThinBoardCircle: hub gorselleriyle ortulmeyen yerlerde gorunen ince koyu zemin */
.sbw .sbw-thin { background: rgba(0, 0, 0, .55); box-shadow: inset 0 0 0 1px #2d241b; }

/* yazilar (TextLine): dikey ortali, 12px Tahoma */
.sbw .sbw-tl { white-space: nowrap; overflow: hidden; line-height: 27px; color: #ddba94; pointer-events: none; }
.sbw .sbw-tl.sbw-left { text-align: left; }
.sbw .sbw-tl.sbw-mid { text-align: center; }

/* oyun dugmeleri: _n / _h / basili / devre disi gorselleri inline degiskenlerden */
.sbw .sbw-btn {
  margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent var(--n) no-repeat 0 0;
  font: 12px var(--f-game); color: #fff; cursor: pointer; display: grid; place-items: center; line-height: 1;
}
.sbw .sbw-btn > span { display: block; margin-top: -1px; pointer-events: none; }
.sbw .sbw-btn:hover:not(.down):not(:disabled) { background-image: var(--h); }
.sbw .sbw-btn:active:not(:disabled), .sbw .sbw-btn.down { background-image: var(--d); }
.sbw .sbw-btn:disabled { background-image: var(--x); cursor: default; }
.sbw .sbw-btn.sbw-num { color: #ddba94; }
.sbw .sbw-btn:focus-visible { outline: 1px solid #ddba94; outline-offset: 1px; }

/* buton ipucu (SetToolTipText): dugmenin 19px ustunde, dis hatli yazi */
.sbw .sbw-tip:hover::after {
  content: attr(data-tip); position: absolute; left: 50%; top: -19px; transform: translateX(-50%);
  white-space: nowrap; font: 12px var(--f-game); color: #fff; pointer-events: none; z-index: 3;
  text-shadow: -1px 0 #000, 1px 0 #000, 0 -1px #000, 0 1px #000;
}

/* esya karti */
.sbw .sbw-tab { overflow: hidden; }
.sbw .sbw-cell { background: #0c0a08; box-shadow: inset 0 0 0 1px #261d15, inset 1px 1px 0 1px #050403; pointer-events: none; }
.sbw .sbw-slot { background: transparent; border-color: transparent; box-shadow: none; }
.sbw .sbw-busy .sbw-slot { cursor: default; }
.sbw .sbw-sback { background: #000; pointer-events: none; }
.sbw .sbw-sbar { pointer-events: none; }
.sbw .sbw-sbar.off { background: rgba(158, 51, 41, .95); }   /* 0.62,0.20,0.16 bekliyor */
.sbw .sbw-sbar.on  { background: rgba(222, 158, 66, .95); }  /* 0.87,0.62,0.26 calisiyor */
.sbw .sbw-sbar.fin { background: rgba(102, 179, 87, .95); }  /* 0.40,0.70,0.34 tamamlandi */
.sbw .sbw-selbox { border: 1px solid #ddba94; pointer-events: none; animation: sbw-pulse 1.42s linear infinite alternate; }
.sbw .sbw-selbox.still { animation: none; }
@keyframes sbw-pulse { from { opacity: 1; } to { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .sbw .sbw-selbox { animation: none; } }

/* deger kutusu (EditLine, en fazla 4 rakam) */
.sbw .sbw-edit {
  margin: 0; padding: 0; border: 0; outline: 0; background: transparent; box-shadow: none;
  font: 12px/18px var(--f-game); color: #fff; caret-color: #fff; -webkit-user-select: text; user-select: text;
}
.sbw .sbw-edit::selection { background: #6b4a29; }

/* SearchListWindow */
.sbw .sbw-search { z-index: 4; }
.sbw .sbw-q { line-height: 12px; height: 12px; }
.sbw .sbw-list { position: absolute; left: 2px; top: 2px; right: 2px; bottom: 2px; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #5a4733 #0c0a08; }
.sbw .sbw-li { height: 12px; line-height: 12px; padding-left: 10px; white-space: nowrap; color: #fff; cursor: pointer; }
.sbw .sbw-li:hover, .sbw .sbw-li.on { background: rgba(107, 74, 41, .75); }
.sbw .sbw-ok, .sbw .sbw-no {
  margin: 0; padding: 0; cursor: pointer; border: 1px solid #5a4733; border-radius: 3px;
  background: linear-gradient(#3a2e22, #1f1812); box-shadow: inset 0 0 0 1px #0a0806;
}
.sbw .sbw-ok:hover, .sbw .sbw-no:hover { background: linear-gradient(#4a3b2c, #2a2018); }
.sbw .sbw-ok:active, .sbw .sbw-no:active { background: linear-gradient(#1f1812, #3a2e22); }
.sbw .sbw-ok::before { content: ""; position: absolute; left: 17px; top: 4px; width: 6px; height: 10px; border: solid #ddba94; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.sbw .sbw-no::before, .sbw .sbw-no::after { content: ""; position: absolute; left: 21px; top: 4px; width: 2px; height: 13px; background: #ddba94; transform: rotate(45deg); }
.sbw .sbw-no::after { transform: rotate(-45deg); }

/* istege bagli: pencere disinda canli esya ipucu */
.sbw-live { min-width: 220px; }

.sb-side { display: grid; gap: 8px; justify-items: center; }
.sb-side .tt { position: relative; min-width: 240px; }

/* ---------- Uretim penceresi ---------- */
/* Yeni Nesil Uretim Penceresi (uicuberenewal.py) */
.cbw { user-select: none; -webkit-user-select: none; }
.cbw img.hw-a { max-width: none; max-height: none; }
.cbw .cbw-tl { font: 12px/14px var(--f-game); color: #ddba94; text-align: left; pointer-events: none; }
.cbw .cbw-c { text-align: center; }
.cbw .cbw-r { text-align: right; }
.cbw .cbw-o { text-shadow: -1px 0 #000, 1px 0 #000, 0 -1px #000, 0 1px #000, -1px -1px #000, 1px 1px #000, -1px 1px #000, 1px -1px #000; }
.cbw .cbw-light { color: #f2debf; }
.cbw .cbw-cream { color: #ddba94; }
.cbw .cbw-dim { color: #9e876b; }
.cbw .cbw-ok { color: #8ab98e; }
.cbw .cbw-no { color: #e67976; }
.cbw .cbw-money { color: #c2c2c2; }
.cbw .cbw-money.cbw-no { color: #e67976; }
.cbw .cbw-big { font-size: 14px; line-height: 16px; font-weight: 700; }
.cbw .cbw-fxok { color: #abe396; }
.cbw .cbw-num { font-size: 12px; }

/* liste */
.cbw-list { overflow: hidden; }
.cbw-cat, .cbw-rec, .cbw-btn { padding: 0; margin: 0; border: 0; background: none; cursor: pointer; display: block; }
.cbw-cat .cbw-h, .cbw-cat .cbw-s, .cbw-rec .cbw-h, .cbw-rec .cbw-s { visibility: hidden; }
.cbw-cat.open .cbw-n { visibility: hidden; }
.cbw-cat.open .cbw-s { visibility: visible; }
.cbw-cat:hover .cbw-h, .cbw-rec:hover .cbw-h { visibility: visible; }
.cbw-cat:active .cbw-s { visibility: visible; }
.cbw-rec.sel { cursor: default; }
.cbw-rec.sel .cbw-s, .cbw-rec:active .cbw-s { visibility: visible; }
.cbw-rec.sel .cbw-h, .cbw-rec.sel .cbw-n { visibility: hidden; }
.cbw-cat:focus-visible, .cbw-rec:focus-visible, .cbw-btn:focus-visible, .cbw-in:focus-visible { outline: 1px solid #a8743f; outline-offset: 0; }

/* SlimScrollBar */
.cbw-sb { cursor: pointer; background-repeat: no-repeat, no-repeat, repeat-y; background-position: 2px 0, 2px 100%, 2px 0; background-size: 6px 1px, 6px 1px, 6px 4px; }
.cbw-thumb { pointer-events: none; background-repeat: no-repeat, no-repeat, repeat-y; background-position: 2px 0, 2px 100%, 2px 0; background-size: 6px 1px, 6px 1px, 6px 4px; }
.cbw-sb:hover .cbw-thumb { filter: brightness(1.22); }

/* odul ve malzeme yuvalari: yuva zemini oyunun gorseli, ikon ustunde */
.cbw .slot.cbw-ic { position: absolute; left: 0; top: 0; width: 36px; height: 100%; background: none; border: 0; border-radius: 0; box-shadow: none; }
.cbw .slot.cbw-ic:hover { filter: none; }
.cbw-rw .slot.cbw-ic { height: 100%; }
.cbw-sock .cbw-hl { visibility: hidden; }
.cbw-sock:hover .cbw-hl { visibility: visible; }
.cbw-sock .cbw-st, .cbw-sock .cbw-hl { z-index: 1; }
.cbw-sock .cbw-tl { z-index: 2; }
.cbw-chip { cursor: default; }

/* uretim efekti */
.cbw .cbw-fx { transform-origin: 0 0; will-change: transform, opacity; z-index: 3; }

/* butonlar: oyunun n / h / d gorselleri */
.cbw-lay { position: absolute; inset: 0; }
.cbw-btn .cbw-h, .cbw-btn .cbw-d { visibility: hidden; }
.cbw-btn:hover .cbw-h { visibility: visible; }
.cbw-btn:active .cbw-d { visibility: visible; }
.cbw-cap { position: absolute; left: 0; top: 0; width: 22px; height: 21px; overflow: hidden; }
.cbw-capr { left: 22px; width: 21px; }
.cbw-lbl { position: absolute; left: 0; right: 0; top: 0; height: 21px; font: 12px/21px var(--f-game); color: #f2e7c1; text-align: center; pointer-events: none; white-space: nowrap; }
.cbw-btn:active .cbw-lbl { top: 1px; }

/* adet kutusu */
.cbw-in { padding: 0; margin: 0; border: 0; outline: 0; background: transparent; font: 12px/16px var(--f-game); color: #f2e7c1; text-align: left; caret-color: #ddba94; }
.cbw-in.ro { cursor: default; color: #f2e7c1; }

/* bildirim (NoticePill) */
.cbw-note { z-index: 6; opacity: 0; transition: opacity .3s; pointer-events: none; }
.cbw-note.on { opacity: 1; }
.cbw-nt { left: 0; top: 0; height: 30px; font: 14px/29px var(--f-game); color: #f2e7c1; text-align: center; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .cbw-note { transition: none; } }

.fitbox { width: 100%; }
.rk-ci { position: absolute; left: 4px; top: 4px; width: 32px; height: 32px; }
.rk-fimg { width: 48px; height: 48px; }
.rk-rface { width: 26px; height: 26px; }
.rk-flag { width: 19px; height: 12px; }
.ss-chk { border: 0; padding: 0; background: no-repeat; cursor: pointer; }
.ss-chk:hover { filter: brightness(1.3); }
.ss-row.picked > img:first-child { filter: brightness(1.35) sepia(.2); }
.ss-mb { z-index: 3; box-shadow: 0 -6px 18px rgba(0,0,0,.5); }
.ss-mbn { color: #f2e7c1; font-size: 11px; } .ss-mbt { text-align: center; color: #bda180; } .ss-mbv { text-align: center; color: #f2e7c1; font-weight: 700; }
.ss-mbx { border: 0; padding: 0; background: url(../ui/hub/ss_mb_x_0.png) no-repeat; cursor: pointer; } .ss-mbx:hover { background-image: url(../ui/hub/ss_mb_x_1.png); }
.ss-mbbuy { border: 0; padding: 0 0 0 16px; background: url(../ui/hub/ss_mb_buy_0.png) no-repeat; color: #f2e7c1; font: 700 11px var(--f-game); cursor: pointer; }
.ss-mbbuy:hover { background-image: url(../ui/hub/ss_mb_buy_1.png); } .ss-mbbuy.demo { background-image: url(../ui/hub/ss_mb_buy_2.png); color: #bda180; }
.ss-bt { color: #ddba94; font-weight: 700; }
.ss-bsel { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 0 6px; border: 0; background: url(../ui/hub/ss_combo.png) no-repeat 0 0 / 112px 22px; color: #8f7f68; font: 11px var(--f-game); cursor: pointer; overflow: hidden; }
.ss-bsel span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ss-bsel.on { color: #f2e7c1; } .ss-bsel i { font-style: normal; color: #bda180; }
.ss-bval { background-size: 44px 22px; }
.ss-blist { z-index: 6; display: grid; overflow-y: auto; background: #0d0a08; border: 1px solid #6b5236; box-shadow: 0 8px 22px rgba(0,0,0,.8); scrollbar-width: thin; scrollbar-color: #5a4733 #0d0a08; }
.ss-bopt { text-align: left; padding: 3px 8px; border: 0; background: none; color: #ddba94; font: 11px var(--f-game); cursor: pointer; }
.ss-bopt:hover { background: #2a2119; color: #f2e7c1; }
.ss-per { display: grid; align-items: center; padding: 0 8px; }
.ss-fnote { color: #7d6a52; font-size: 11px; }
.win-callout.warn { border-color: #8a5a3a; border-left-color: #d0864a; background: linear-gradient(90deg, rgba(80,44,24,.6), rgba(26,20,15,.4)); }
.win-callout.warn b { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #d0864a; color: #1a120c; font: 700 14px var(--f-body); }
.ss-row.pick { cursor: pointer; }
.ss-row.pick:hover > img:first-child { filter: brightness(1.2); }
.rc-row { display: flex; gap: 18px; align-items: flex-start; justify-content: center; flex-wrap: wrap; }
.rc-slot { display: grid; gap: 6px; justify-items: center; font: 11px var(--f-game); color: var(--muted); }
.rc-tt { position: relative; width: 260px; pointer-events: auto; }
.tt-pos { color: #ddba94; margin-top: 5px; text-align: center; }
.rc-map { position: relative; margin: 4px auto 2px; cursor: crosshair; border: 1px solid #3c3024; }
.rc-map img { display: block; }
.rc-wp { position: absolute; width: 30px; height: 30px; background: url(../ui/recall/waypoint.png) 0 0 / 360px 30px no-repeat; animation: rcwp .8s steps(12) infinite; pointer-events: none; }
@keyframes rcwp { to { background-position: -360px 0; } }
@media (prefers-reduced-motion: reduce) { .rc-wp { animation: none; } }

/* ---------- Boss Takip penceresi ---------- */
/* Boss Takip penceresi (uibosstime.py). Renkler oyundaki sabitler (uiteleportwizard.py):
   COLOR_GOLD #deba94, COLOR_WHITE #ede6d9, COLOR_TAN #ada191, COLOR_GREY #80786e, COLOR_PAST #9e6b61 */
.btw { user-select: none; -webkit-user-select: none; }
.btw img { max-width: none; }
.btw .hw-t { font: 12px/14px var(--f-game); color: #ede6d9; text-align: left; pointer-events: none; }
.btw .btw-c { text-align: center; }
.btw .btw-big { font-size: 14px; line-height: 16px; }
.btw .btw-gold { color: #deba94; }
.btw .btw-white { color: #ede6d9; }
.btw .btw-tan { color: #ada191; }
.btw .btw-grey { color: #80786e; }
.btw .btw-pre { white-space: pre; }
.btw-ol { text-shadow: -1px 0 #000, 1px 0 #000, 0 -1px #000, 0 1px #000, -1px -1px #000, 1px 1px #000, -1px 1px #000, 1px -1px #000; }

.btw-in, .btw-panel, .btw-rows { overflow: visible; }

/* boss satirlari (ui.RadioButton: bt_row_n / h / s) */
.btw .btw-row { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; display: block; cursor: pointer; color: inherit; font: inherit; }
.btw .btw-row:focus { outline: none; }
.btw .btw-row:focus-visible { outline: 1px dotted #deba94; outline-offset: 1px; }
.btw .btw-rowtext { text-overflow: ellipsis; overflow: hidden; }

/* saat kutucuklari */
.btw-clip { overflow: hidden; }
.btw-clip:focus { outline: none; }
.btw-clip:focus-visible { outline: 1px dotted #deba94; outline-offset: 2px; }
.btw-hours { overflow: visible; }
.btw .btw-h-n { color: #ede6d9; }
.btw .btw-h-next { color: #deba94; }
.btw .btw-h-past { color: #9e6b61; }

/* ince kaydirma cubugu (hs_*.png) */
.btw-sb { cursor: pointer; overflow: visible; }
.btw-tile { background-repeat: repeat-y; background-position: 0 0; pointer-events: none; }
.btw-sb > img { pointer-events: none; }
.btw-thumb { cursor: grab; touch-action: none; }
.btw-thumb > * { pointer-events: none; }
.btw-thumb.on { cursor: grabbing; }
.btw-over { display: none; }
.btw-thumb:hover .btw-over, .btw-thumb.on .btw-over { display: block; }

/* 3B onizleme yerine: model_view_bg benzeri koyu sahne */
.btw-render { overflow: hidden; background:
  radial-gradient(ellipse 85% 60% at 50% 44%, #2a2119 0%, #17120d 55%, #0a0806 100%); }
.btw-glow, .btw-floor { position: absolute; display: block; pointer-events: none; }
.btw-glow { left: 25px; right: 25px; top: 46px; height: 190px; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 55%, rgba(222,186,148,.10), rgba(222,186,148,0) 70%); }
.btw-floor { left: 30px; right: 30px; bottom: 34px; height: 26px; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.75), rgba(0,0,0,0) 72%);
  box-shadow: 0 -1px 0 rgba(173,161,145,.08); }
.btw .btw-rname { left: 0 !important; top: auto !important; bottom: 12px; text-align: center; color: rgba(173,161,145,.55); font-size: 11px; }

.sys-split.sys-wide { grid-template-columns: minmax(0, 1fr); }
.sys-split.sys-wide > .sys-vis { order: 2; }
.rs-card { background: linear-gradient(#241c15, #17120d); }
.rs-npc { border: 1px solid #1a140f; box-shadow: inset 0 0 0 1px #3c3024; transition: filter .15s; }
.rs-card:hover .rs-npc, .rs-card.on .rs-npc { filter: brightness(1.18); }
.ss-foot { pointer-events: none; } .ss-foot > * { pointer-events: auto; }
.ss-nav { border: 0; padding: 0; background: no-repeat; cursor: pointer; } .ss-nav:disabled { cursor: default; }
.ss-nav:not(:disabled):hover { filter: brightness(1.25); }
.ss-pg:not(.on):hover { background-image: url(../ui/hub/ss_page_h.png); }
.dg-rs.blue, .dg-hs.blue { color: #8fb4dc; }
.dg-blue { display: grid; align-content: center; gap: 8px; text-align: center; padding: 12px; background: radial-gradient(circle at 50% 40%, rgba(70,110,160,.28), rgba(10,14,20,.6) 70%); border: 1px solid #3a4a5e; font: 12px var(--f-game); color: #d6dde6; white-space: normal; }
.dg-blue b { font-size: 15px; color: #a9c8ee; } .dg-blue p { margin: 0; color: #f2e7c1; font-weight: 700; line-height: 1.35; } .dg-blue small { color: #9fb0c2; line-height: 1.35; }
.st-hero { display: flex; align-items: center; gap: 14px; padding: 10px 14px; background: linear-gradient(90deg, #2a1712, #120e0b 70%); border: 1px solid #5a3a2a; border-radius: 3px; }
.st-hero img { flex: none; border: 1px solid #3c3024; }
.st-hero div { display: grid; gap: 2px; } .st-hero b { font: 700 1.125rem var(--f-display); color: var(--cream); } .st-hero span { color: var(--muted); font-size: .875rem; }
.witem .ef .combo { display: inline-flex; vertical-align: middle; transform: scale(.85); transform-origin: left center; }
.st-chest { display: flex; gap: 12px; align-items: center; padding: 12px; font: 12px var(--f-game); }
.st-chest > div { display: grid; gap: 3px; } .st-chest b { color: #f2e7c1; } .st-chest span { color: #cbbda6; } .st-chest .st-mk { color: #8ab98e; }

/* ---------- Nesne Market'te satilmayanlar ---------- */
.nm-never { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: stretch; }
.nm-card { display: grid; align-content: start; gap: 4px; overflow: hidden; }
.nm-stamp { position: absolute; right: 14px; top: 40px; padding: 4px 10px; border: 2px solid #8a3a2a; border-radius: 3px; color: #c7705c; font: 700 11px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; transform: rotate(-6deg); background: rgba(40,14,10,.55); box-shadow: inset 0 0 0 1px rgba(138,58,42,.45); pointer-events: none; }
.nm-sets { display: grid; gap: 6px; padding: 8px 10px 0; }
.nm-set { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 8px; padding: 4px 6px; background: #120e0b; border: 1px solid #2c231a; }
.nm-set > b { font: 700 12px var(--f-game); color: var(--cream); }
.nm-row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.nm-more { font: 700 11px var(--f-game); font-style: normal; color: #8f7f68; padding-left: 4px; }
.nm-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 8px 10px 0; }
.nm-tile { display: grid; justify-items: center; align-content: start; gap: 6px; padding: 8px 4px; background: #120e0b; border: 1px solid #2c231a; text-align: center; min-width: 0; }
.nm-tile > span { font: 11.5px/1.25 var(--f-game); color: #d6c8b0; }
.nm-plus { margin: 8px 10px 2px; font: 12px var(--f-game); color: #c7a27a; }
.nm-gain { display: grid; gap: 4px; }
.nm-gcols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 8px 10px 0; }
.nm-gcol { display: grid; gap: 8px; align-content: start; padding: 8px; background: #120e0b; border: 1px solid #2c231a; }
.nm-gcol > b { font: 700 12px var(--f-game); color: var(--cream); }
.nm-foot { margin: 10px 10px 2px; padding: 8px 10px; border-left: 2px solid #8a6c4a; background: rgba(42,33,25,.6); font: 12.5px/1.45 var(--f-game); color: #cdbfa8; }
.nm-foot b { color: #8ab98e; }
@media (max-width: 1000px) { .nm-never { grid-template-columns: minmax(0, 1fr); } .nm-gcols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .nm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nm-set { grid-template-columns: minmax(0, 1fr); } .nm-stamp { position: static; justify-self: start; margin: 6px 10px 0; font-size: 10px; transform: rotate(-3deg); } }

/* ---------- Sesli Sohbet penceresi ---------- */
.vc-wrap { display: grid; gap: 12px; width: min(100%, 420px); margin-inline: auto; }
.vc-panel .hw-t { font: 12px/14px var(--f-game); }
.vc-head { color: #deba94; text-align: center; }
.vc-dim { color: #9a8a76; }
.vc-dim.c { text-align: center; } .vc-dim.r { text-align: right; }
.vc-row { padding: 0; border: 0; background: transparent; cursor: pointer; }
.vc-row:hover { background: url(../ui/voice/vc_row_h.png); }
.vc-row.on { background: url(../ui/voice/vc_row_on.png); }
.vc-act { color: #deba94; text-align: right; }
.vc-btn, .vc-sbtn { padding: 0; border: 0; cursor: pointer; font: 12px var(--f-game); color: #deba94; background: url(../ui/voice/vc_btn_n.png); }
.vc-btn:hover { background-image: url(../ui/voice/vc_btn_h.png); }
.vc-btn.on { background-image: url(../ui/voice/vc_btn_s.png); color: #f2e7c1; }
.vc-sbtn { background-image: url(../ui/voice/vc_sbtn_n.png); }
.vc-sbtn:hover { background-image: url(../ui/voice/vc_sbtn_h.png); }
.vc-sbtn:active { background-image: url(../ui/voice/vc_sbtn_d.png); }
.vc-slider { cursor: pointer; touch-action: none; }
.vc-fill { height: 6px; }
.vc-dot { color: #deba94; } .vc-mn { color: #e3d5c2; }
.vc-spk-box { display: grid; gap: 6px; max-width: 420px; }
.vc-spk-box small { font: 11.5px var(--f-game); color: #8f7f68; }
.vc-spk { display: grid; gap: 3px; min-height: 81px; align-content: end; }
.vc-sp { display: flex; align-items: center; gap: 10px; height: 24px; padding-left: 7px; background: rgba(18,14,9,.6); font: 12px var(--f-game); text-shadow: 0 0 2px #000, 0 0 2px #000; width: max-content; padding-right: 14px; animation: vcIn .25s ease-out; }
@keyframes vcIn { from { opacity: 0; transform: translateX(-8px); } }
.vc-row .vc-ch { text-align: left; }
.vc-btn, .vc-sbtn { white-space: nowrap; font-size: 11.5px; letter-spacing: -.15px; line-height: 1; }
.vc-panel .vc-tip { font-size: 11px; overflow: visible; }
.nm-limit { margin: -6px 0 0; font-size: 13px; }
.nm-limit b { color: #c7705c; }

/* ---------- ve daha fazlasi ---------- */
.more-band { position: relative; overflow: hidden; padding: 120px 0 110px; text-align: center; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg, var(--ink), rgba(13,10,8,.72) 40%, rgba(13,10,8,.72) 60%, var(--ink)), url("../media/hero-poster.jpg") 50% 40% / cover; }
.mb-glow { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(168,116,63,.28), transparent 70%); pointer-events: none; }
.more-band .wrap { position: relative; display: grid; justify-items: center; }
.mb-frame { position: relative; display: grid; justify-items: center; gap: 18px; width: min(100%, 820px); padding: 56px clamp(18px, 5vw, 64px) 46px;
  background: linear-gradient(#1f1812f2, #120e0bf2); border: 1px solid #6b5236; border-radius: 4px;
  box-shadow: 0 0 0 1px #0a0806, inset 0 0 0 1px #2e2419, inset 0 0 0 6px #17120d, inset 0 0 0 7px #4a3a2a, 0 30px 90px rgba(0,0,0,.65), 0 0 80px rgba(168,116,63,.18); }
.mb-frame::before, .mb-frame::after { content: ""; position: absolute; top: -7px; width: 12px; height: 12px; background: #1f1812; border: 1px solid #a07c52; transform: rotate(45deg); }
.mb-frame::before { left: -7px; } .mb-frame::after { right: -7px; }
.mb-eyebrow { display: flex; align-items: center; gap: 14px; font: 700 .8125rem/1 var(--f-display); letter-spacing: .32em; text-transform: uppercase; color: var(--bronze-hi); }
.mb-eyebrow i { width: clamp(28px, 8vw, 72px); height: 1px; background: linear-gradient(90deg, transparent, #a07c52); position: relative; }
.mb-eyebrow i:last-child { transform: scaleX(-1); }
.mb-eyebrow i::after { content: ""; position: absolute; right: -4px; top: -3px; width: 6px; height: 6px; border: 1px solid #a07c52; transform: rotate(45deg); }
.more-band h2 { margin: 0; font: 700 clamp(2.2rem, 6vw, 4.2rem)/1.05 var(--f-display); letter-spacing: .01em;
  background: linear-gradient(180deg, #f3e6c9 30%, #c9a06e); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 2px 30px rgba(168,116,63,.25); }
.mb-lead { max-width: 52ch; margin: 0; font-size: var(--step-1); line-height: 1.5; color: var(--text); }
.mb-slots { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
.mb-slots span { position: relative; width: 44px; height: 44px; background: var(--slot); border: 1px solid #3c3024; border-radius: 3px; box-shadow: inset 0 0 0 1px #070605, inset 0 2px 6px rgba(0,0,0,.8);
  animation: mbSlot 4.2s ease-in-out infinite; }
.mb-slots span::after { content: "?"; position: absolute; inset: 0; display: grid; place-items: center; font: 700 20px var(--f-display); color: #5a4733; }
.mb-slots span:nth-child(2) { animation-delay: .35s; } .mb-slots span:nth-child(3) { animation-delay: .7s; } .mb-slots span:nth-child(4) { animation-delay: 1.05s; }
.mb-slots span:nth-child(5) { animation-delay: 1.4s; } .mb-slots span:nth-child(6) { animation-delay: 1.75s; } .mb-slots span:nth-child(7) { animation-delay: 2.1s; }
@keyframes mbSlot { 0%, 30%, 100% { border-color: #3c3024; } 12% { border-color: #c08a52; box-shadow: inset 0 0 0 1px #070605, inset 0 0 14px rgba(192,138,82,.45), 0 0 16px rgba(192,138,82,.35); } }
.mb-slots span { --c: #5a4733; }
.mb-sub { margin: 0; font: 600 .9375rem var(--f-body); letter-spacing: .08em; color: var(--muted); }
.mb-embers { position: absolute; inset: 0; pointer-events: none; }
.mb-embers i { position: absolute; bottom: -10px; width: 4px; height: 4px; border-radius: 50%; background: #d39a5a; box-shadow: 0 0 8px 2px rgba(211,154,90,.55); opacity: 0; animation: mbEmber 9s linear infinite; }
.mb-embers i:nth-child(1) { left: 6%; animation-delay: 0s; } .mb-embers i:nth-child(2) { left: 14%; animation-delay: 3.1s; animation-duration: 11s; }
.mb-embers i:nth-child(3) { left: 22%; animation-delay: 6.2s; } .mb-embers i:nth-child(4) { left: 31%; animation-delay: 1.4s; animation-duration: 12s; }
.mb-embers i:nth-child(5) { left: 40%; animation-delay: 4.6s; } .mb-embers i:nth-child(6) { left: 52%; animation-delay: 7.5s; animation-duration: 10s; }
.mb-embers i:nth-child(7) { left: 61%; animation-delay: 2.2s; } .mb-embers i:nth-child(8) { left: 70%; animation-delay: 5.3s; animation-duration: 12s; }
.mb-embers i:nth-child(9) { left: 78%; animation-delay: .8s; } .mb-embers i:nth-child(10) { left: 86%; animation-delay: 3.9s; animation-duration: 10s; }
.mb-embers i:nth-child(11) { left: 93%; animation-delay: 6.8s; } .mb-embers i:nth-child(12) { left: 47%; animation-delay: 8.4s; animation-duration: 13s; }
@keyframes mbEmber { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: .9; } 70% { opacity: .5; } 100% { transform: translate(30px, -560px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mb-embers { display: none; } .mb-slots span { animation: none; } }
@media (max-width: 520px) { .more-band { padding: 80px 0 70px; } .mb-slots span { width: 36px; height: 36px; } }
.farm-tip { flex-wrap: nowrap; align-items: flex-start; max-width: 860px; }
.farm-tip span { line-height: 1.5; }
.farm-tip strong { color: #f0c79a; font-weight: 700; margin-right: 4px; }

/* ---------- on kayit hediyesi penceresi ---------- */
html.pm-lock, html.pm-lock body { overflow: hidden; }
.pre-modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 12px; overflow: hidden; }
.pre-modal[hidden] { display: none; }
.pm-backdrop { position: absolute; inset: 0; background: rgba(6,4,3,.8); backdrop-filter: blur(3px); animation: pmFade .25s ease-out; }
.pm-box { position: relative; width: min(100%, 720px); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-x: hidden; overflow-y: auto; scrollbar-width: none; padding: 0 10px 10px; animation: pmIn .3s ease-out;
  box-shadow: 0 0 0 1px #0a0806, inset 0 0 0 1px #2a2119, 0 30px 90px rgba(0,0,0,.75), 0 0 70px rgba(168,116,63,.2); }
.pm-box::-webkit-scrollbar { display: none; }
.pm-box::before, .pm-box::after { display: none; }
.pm-x { font: 700 15px/1 var(--f-game); }
.pm-body { display: grid; gap: 16px; padding: 12px 10px 6px; }
.pm-head { display: grid; gap: 6px; text-align: center; justify-items: center; }
.pm-head h2 { margin: 0; font: 700 clamp(1.3rem, 3.2vw, 1.85rem)/1.15 var(--f-display); color: var(--cream); }
.pm-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 14px; align-items: stretch; }
.pm-mount { margin: 0; position: relative; min-height: 220px; border: 1px solid #6b5236; border-radius: 3px; overflow: hidden; background: #0e0b08;
  box-shadow: inset 0 0 0 1px #0a0806, 0 0 24px rgba(168,116,63,.18); }
.pm-mount img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.pm-mount figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 10px; background: linear-gradient(transparent, rgba(10,8,6,.95)); font: 700 13px var(--f-game); letter-spacing: .04em; color: var(--cream); text-align: center; }
.pm-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; align-content: start; }
.pm-it { display: flex; align-items: center; gap: 10px; padding: 5px 8px; background: #120e0b; border: 1px solid #2c231a; border-radius: 2px; }
.pm-it b { display: block; font: 700 12.5px var(--f-game); color: var(--cream); }
.pm-it small { display: block; font: 11.5px var(--f-game); color: #8f7f68; }
.pm-mic { width: 36px; height: 36px; flex: none; border: 1px solid #3c3024; border-radius: 3px; overflow: hidden; background: var(--slot); }
.pm-mic img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 30%; }
.pm-cta { display: grid; justify-items: center; gap: 8px; padding-top: 2px; }
.pm-claim { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-width: min(100%, 320px); height: 54px; padding: 0 34px;
  font: 700 1.0625rem/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: #fff1dc; text-decoration: none;
  background: linear-gradient(#9a4a2c, #6e2c19 55%, #5a2214); border: 1px solid #c07a52; border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255,214,170,.35), inset 0 0 0 3px rgba(40,14,8,.35), inset 0 0 0 4px rgba(214,150,108,.35), 0 8px 24px rgba(0,0,0,.5), 0 0 22px rgba(167,59,43,.25);
  text-shadow: 0 1px 2px rgba(0,0,0,.6); transition: filter .15s, box-shadow .15s, transform .15s; }
.pm-claim::before, .pm-claim::after { content: ""; position: absolute; top: 50%; width: 9px; height: 9px; margin-top: -5px; background: #5a2214; border: 1px solid #d49470; transform: rotate(45deg); }
.pm-claim::before { left: -5px; } .pm-claim::after { right: -5px; }
.pm-claim:hover { filter: brightness(1.12); box-shadow: inset 0 1px 0 rgba(255,214,170,.45), inset 0 0 0 3px rgba(40,14,8,.35), inset 0 0 0 4px rgba(214,150,108,.5), 0 10px 28px rgba(0,0,0,.55), 0 0 32px rgba(190,80,50,.4); transform: translateY(-1px); }
.pm-claim:active { transform: translateY(1px); filter: brightness(.95); }
.pm-claim svg { flex: none; color: #ffd9b8; }
.pm-later { padding: 6px 14px; border: 0; background: none; cursor: pointer; font: 600 .875rem var(--f-body); letter-spacing: .08em; color: var(--muted); }
.pm-later:hover { color: var(--cream); text-decoration: underline; text-underline-offset: 3px; }
@keyframes pmFade { from { opacity: 0; } }
@keyframes pmIn { from { opacity: 0; transform: translateY(14px) scale(.98); } }
@media (max-width: 620px) { .pm-grid { grid-template-columns: minmax(0, 1fr); } .pm-mount { min-height: 0; height: min(34vh, 230px); } .pm-claim { width: 100%; padding: 0 16px; } }
@media (max-height: 700px) and (min-width: 621px) { .pm-body { gap: 10px; } .pm-head h2 { font-size: 1.25rem; } .pm-it { padding: 3px 8px; } }
@media (prefers-reduced-motion: reduce) { .pm-backdrop, .pm-box { animation: none; } }
@media (max-width: 620px) { .pm-mount { height: clamp(120px, 26vh, 230px); } }
@media (max-width: 620px) and (max-height: 760px) { .pm-body { gap: 10px; padding-top: 8px; } .pm-head h2 { font-size: 1.2rem; } .pm-it { padding: 3px 8px; } .pm-it small { display: none; } .pm-claim { height: 48px; } }
@media (max-width: 620px) and (max-height: 760px) { .pm-mount { height: clamp(100px, 19vh, 200px); } .pm-head .eyebrow { font-size: .6875rem; } }
.pm-cta { padding-inline: 6px; }
/* baslangic mamutu donen onizleme */
.pm-mount { cursor: grab; user-select: none; touch-action: pan-y; }
.pm-mount.drag { cursor: grabbing; }
.pm-frames { position: absolute; inset: 0; }
.pm-frames img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; opacity: 0; transition: opacity .45s ease; pointer-events: none; }
.pm-frames img.on { opacity: 1; }
.pm-360 { position: absolute; left: 8px; top: 8px; padding: 3px 8px; border: 1px solid #5a4733; border-radius: 999px; background: rgba(14,10,7,.75); font: 700 10.5px var(--f-game); letter-spacing: .06em; color: #c9a46e; pointer-events: none; }
.pm-rot { position: absolute; top: 50%; width: 30px; height: 40px; margin-top: -28px; padding: 0; display: grid; place-items: center; cursor: pointer;
  font: 700 22px/1 var(--f-display); color: #e8d3b0; background: rgba(20,15,11,.72); border: 1px solid #5a4733; border-radius: 3px; opacity: .75; transition: opacity .15s, border-color .15s; }
.pm-rot.l { left: 6px; } .pm-rot.r { right: 6px; }
.pm-rot:hover, .pm-rot:focus-visible { opacity: 1; border-color: #a07c52; }
.pm-mount figcaption { display: grid; justify-items: center; gap: 6px; }
.pm-mount figcaption b { font: 700 14px var(--f-game); color: var(--cream); letter-spacing: .04em; }
.pm-dots { display: flex; gap: 6px; }
.pm-dots i { width: 6px; height: 6px; border: 1px solid #a07c52; transform: rotate(45deg); background: transparent; transition: background .2s; }
.pm-dots i.on { background: #c9a46e; }
.pm-mic img { object-position: 50% 50%; }
@media (max-width: 620px) { .pm-mount figcaption { padding: 14px 8px 6px; gap: 4px; } .pm-360 { top: 6px; left: 6px; font-size: 10px; } .pm-frames img { object-position: 50% 62%; } }

/* ---------- Mucadele (Ilk Basaran) penceresi ---------- */
.fa-tab { padding: 0; border: 0; cursor: pointer; background: url(../ui/fa/fa_tab_n.png); display: flex; align-items: center; gap: 6px; padding-left: 8px; font: 12px var(--f-game); color: #ddba94; }
.fa-tab:hover { background-image: url(../ui/fa/fa_tab_h.png); }
.fa-tab.on { background-image: url(../ui/fa/fa_tab_s.png); color: #f2d6a8; }
.fa-gl { width: 18px; height: 18px; }
.fa-total { text-align: right; font: 12px/14px var(--f-game); color: #ddba94; }
.fa-view { overflow: hidden; }
.fa-thumb { transition: top .15s; }
.fa-row .hw-t { font: 12px/14px var(--f-game); }
.fa-prev { display: grid; place-items: center; overflow: hidden; }
.fa-boss { width: 100%; height: 100%; object-fit: cover; object-position: 78% 50%; filter: saturate(1.05); }
.fa-prev::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 12px rgba(0,0,0,.7); pointer-events: none; }
.fa-ic { position: relative; z-index: 1; }
.fa-arr { z-index: 2; padding: 0; border: 0; cursor: pointer; background: url(../ui/fa/fa_arr_l_n.png); }
.fa-arr-l:hover { background-image: url(../ui/fa/fa_arr_l_h.png); } .fa-arr-l:active { background-image: url(../ui/fa/fa_arr_l_d.png); }
.fa-arr-r { background-image: url(../ui/fa/fa_arr_r_n.png); }
.fa-arr-r:hover { background-image: url(../ui/fa/fa_arr_r_h.png); } .fa-arr-r:active { background-image: url(../ui/fa/fa_arr_r_d.png); }
.fa-title { color: #ede0cc; }
.fa-row .fa-item, .fa-row .fa-page { font-size: 11px; }
.fa-item { color: #c7b091; }
.fa-page { color: #8a8174; text-align: right; }
.fa-name { color: #dbad70; } .fa-name.mine { color: #f2d6a8; }
.fa-row .fa-date { color: #948a7d; font-size: 11px; }
.fa-none { color: #8a8174; }
.fa-lbl { color: #998771; text-align: center; font-size: 11px !important; }
.fa-slot { display: grid; place-items: center; }
.fa-slot > img.hw-a { left: 0; top: 0; }
.fa-ric { position: relative; z-index: 1; }
.fa-cnt { z-index: 2; text-align: right; color: #fff; font-size: 11px !important; text-shadow: 0 0 2px #000, 0 0 2px #000; pointer-events: none; }
.fa-claim { padding: 0; border: 0; cursor: pointer; background: url(../ui/fa/fa_btn_n.png); font: 11px var(--f-game); color: #f2d6a8; }
.fa-claim:hover { background-image: url(../ui/fa/fa_btn_h.png); } .fa-claim:active { background-image: url(../ui/fa/fa_btn_d.png); }

/* ---------- 01: 1000 pazar + FPS buyuteci ---------- */
.fps-shot { margin: 0; display: grid; gap: 14px; min-width: 0; }
.fs-frame { position: relative; overflow: hidden; border: 1px solid #6b5236; border-radius: 4px; background: #0e0b08; touch-action: pan-y;
  box-shadow: 0 0 0 1px #0a0806, 0 24px 60px rgba(0,0,0,.55); cursor: zoom-in; user-select: none; }
.fs-frame > img { display: block; width: 100%; height: auto; }
.fs-line { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.fs-line line { stroke: #e3b77c; stroke-width: 2; stroke-dasharray: 5 4; filter: drop-shadow(0 0 3px rgba(0,0,0,.9)); }
.fs-focus { position: absolute; width: 74px; height: 30px; margin: -15px 0 0 -37px; border: 2px solid #e3b77c; border-radius: 6px; pointer-events: none;
  box-shadow: 0 0 0 2px rgba(0,0,0,.6), 0 0 18px rgba(227,183,124,.55); animation: fsPulse 1.8s ease-in-out infinite; }
@keyframes fsPulse { 50% { box-shadow: 0 0 0 2px rgba(0,0,0,.6), 0 0 30px rgba(227,183,124,.9); } }
.fs-lens { position: absolute; left: 0; top: 0; width: clamp(140px, 24vw, 250px); aspect-ratio: 1; border-radius: 50%; pointer-events: none; overflow: hidden;
  border: 3px solid #c99a5e; box-shadow: 0 0 0 2px #1a120b, 0 0 0 6px rgba(201,154,94,.35), 0 18px 40px rgba(0,0,0,.75), inset 0 0 24px rgba(0,0,0,.55); background: #0e0b08; }
.fs-lens::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 32% 26%, rgba(255,255,255,.22), transparent 38%); pointer-events: none; }
.fs-lens-img { position: absolute; inset: 0; background-repeat: no-repeat; image-rendering: auto; }
.fs-frame.free .fs-line, .fs-frame.free .fs-focus { opacity: 0; }
.fs-line, .fs-focus { transition: opacity .2s; }
.fs-tag { position: absolute; left: 10px; bottom: 10px; padding: 4px 10px; border: 1px solid #5a4733; border-radius: 999px; background: rgba(14,10,7,.8); font: 700 11px var(--f-game); letter-spacing: .05em; color: #d9c4a2; pointer-events: none; }
.fs-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.fs-stats > div { display: grid; gap: 2px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line-soft); border-radius: 3px; }
.fs-stats b { font: 700 clamp(1.4rem, 1rem + 1.6vw, 2.2rem)/1 var(--f-display); color: var(--cream); font-variant-numeric: tabular-nums; }
.fs-stats span { font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fs-stats .hot { border-color: #8a6c4a; background: linear-gradient(#2a2119, #1a140f); }
.fs-stats .hot b { color: #9fd49a; }
.fs-hint { margin: 0; }
@media (max-width: 700px) { .fs-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fs-focus { width: 40px; height: 18px; margin: -9px 0 0 -20px; } }
@media (prefers-reduced-motion: reduce) { .fs-focus { animation: none; } }
@media (hover: none) { .fs-hint { display: none; } }
@media (max-width: 700px) { .fs-tag { display: none; } }

.perf-main { display: grid; gap: 14px; min-width: 0; }
.fps-shot { gap: 8px; }
.fs-lens { width: clamp(84px, 9vw, 116px); border-width: 2px; box-shadow: 0 0 0 2px #1a120b, 0 0 0 4px rgba(201,154,94,.3), 0 10px 24px rgba(0,0,0,.7), inset 0 0 16px rgba(0,0,0,.55); }
.fs-focus { width: 30px; height: 14px; margin: -7px 0 0 -15px; border-width: 1.5px; border-radius: 4px; }
.fs-line line { stroke-width: 1.5; stroke-dasharray: 4 3; }
.fs-cap { display: grid; gap: 2px; }
.fs-cap b { font: 700 .9375rem var(--f-body); color: var(--cream); }
.fs-cap span { font-size: .8125rem; color: var(--muted); }
.fs-frame { cursor: default; }

/* ---------- Cevrimdisi Pazar ---------- */
.os-pair { position: relative; }
.os-pair > .hw-board { top: 0; }
.os-b { padding: 0; border: 0; cursor: pointer; background: var(--n) no-repeat; font: 12px var(--f-game); color: #e6dccb; }
.os-b:hover { background-image: var(--h); }
.os-b:active, .os-b.on { background-image: var(--d); }
.os-tab { color: #b8a184; } .os-tab.on { color: #e6dccb; }
.os-b.done { color: #8ccf7e; }
.os-in { border: 0; outline: 0; background: transparent; font: 12px var(--f-game); color: #e6dccb; padding: 0; }
.os-in::placeholder { color: #8c7a64; }
.os-st { font: 12px/14px var(--f-game); } .os-st.on { color: #8ccf7e; } .os-st.off { color: #e0675c; }
.os-it { display: grid; place-items: center; }
.os-cnt { position: absolute; right: 2px; bottom: 0; font: 700 10px var(--f-game); color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000; pointer-events: none; }
.os-lock { padding: 0; border: 0; cursor: pointer; background: url(../ui/os/os_slot_lock.png); }
.os-lock:hover { filter: brightness(1.25); }
.os-open.flash { animation: flash 1s ease-out 1; border-radius: 2px; }
.os-badge .os-bn { font: 700 9px/14px var(--f-game); color: #fff; text-align: center; }
.os-price { font: 12px/14px var(--f-game); color: #d9b98a; }
.os-time { font: 12px/14px var(--f-game); color: #b8a184; }
.os-fill { background: url(../ui/os/os_time_fill.png) no-repeat left; }
.os-noti { background: rgba(16,12,10,.95); border: 1px solid #6b5638; z-index: 3; }
.os-noti .hw-t { font: 12px/14px var(--f-game); }
.os-nt { color: #e6dccb; } .os-nn { color: #e6dccb; } .os-np { color: #d9b98a; } .os-nc { color: #8c7a64; text-align: right; } .os-ne { color: #8c7a64; text-align: center; }
.os-sep { background: rgba(74,63,51,.4); }
.os-ni { display: grid; place-items: center; overflow: hidden; }
.os-ni .ic { transform: scale(var(--sc, 1)); }
.os-noti .os-np { font-size: 11px; }
/* cevrimdisi pazar demo */
.os-demo { display: grid; gap: 10px; width: min(100%, 412px); margin-inline: auto; }
.os-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.os-modes { display: flex; flex-wrap: wrap; gap: 6px; }
.os-mode { padding: 4px 8px; border: 1px solid var(--line); border-radius: 3px; background: var(--panel); cursor: pointer; opacity: .7; }
.os-mode.on { opacity: 1; border-color: var(--bronze); background: var(--panel-hi); box-shadow: inset 0 -2px 0 var(--bronze); }
.os-sell { padding: 6px 12px; font-size: .8125rem; }
.os-minfo { margin: 0; min-height: 2.6em; }
.os-act { padding: 0; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }
.os-act:hover { box-shadow: inset 0 0 0 1px #c9a46e; }
.os-chat { background: rgba(10,8,6,.72); border: 1px solid #3c3024; border-radius: 3px; padding: 6px 8px; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; overflow: hidden; font: 11.5px/1.35 var(--f-game); }
.os-cl { color: #d6c8b0; text-shadow: 0 0 2px #000; animation: vcIn .25s ease-out; }
.os-cl.sys { color: #b8a184; } .os-cl.ok { color: #8ccf7e; } .os-cl.sale { color: #f0c79a; }
.os-dlgw { z-index: 6; filter: drop-shadow(0 18px 40px rgba(0,0,0,.7)); }
.os-dlgw .hw-board { position: absolute; }
.os-dlg .hw-t { font: 12px/14px var(--f-game); }
.os-pn { color: #e6dccb; } .os-pc { color: #b8a184; }
.os-pa { color: #b8a184; } .os-pv { color: #e6dccb; } .c { text-align: center; }
.os-pt { color: #d9b98a; }
.os-opt { padding: 0; border: 0; background: transparent; cursor: pointer; display: flex; align-items: center; gap: 6px; font: 12px var(--f-game); color: #b8a184; text-align: left; }
.os-opt img { width: 16px; height: 16px; } .os-opt.on { color: #e6dccb; }
.os-pin { font-size: 12px; }
.os-b.ring { animation: osRing .6s ease-in-out 2; }
@keyframes osRing { 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }

/* ---------- Zindan Rehberi (uidungeonguide.py birebir) ---------- */
.dgr-wrap { padding-top: 10px; }
.dgr-page { position: relative; width: 556px; font: 12px/16px Tahoma, Verdana, var(--f-game); }
.dgr-a { position: absolute; }
.dgr-t { white-space: nowrap; overflow: hidden; line-height: 16px; height: 16px; pointer-events: none; text-shadow: 0 1px 0 rgba(0,0,0,.6); }
.dgr-t.s { font-size: 11px; line-height: 14px; height: 14px; }
.dgr-t.fit { text-overflow: ellipsis; }
.dgr-t.title { font: 700 15px/16px Tahoma, Verdana, sans-serif; }
.dgr-content { overflow: visible; }
.dgr-hit { cursor: pointer; border-radius: 3px; }
.dgr-hit:hover, .dgr-hit:focus-visible { box-shadow: 0 0 0 1px #96704a, inset 0 0 0 999px rgba(150,112,70,.16); outline: 0; }
.dgr-boss { object-fit: cover; object-position: 72% 40%; }
.dgr-btn { width: 250px; height: 26px; padding: 0; border: 0; cursor: pointer; background: url(../ui/dg/dg_btn_n.png); font: 12px Tahoma, var(--f-game); color: #ddba94; }
.dgr-btn:hover { background-image: url(../ui/dg/dg_btn_h.png); } .dgr-btn:active { background-image: url(../ui/dg/dg_btn_d.png); }
.dgr-a.ic { pointer-events: none; }
.dgr-spr { background: url(../ui/dg/dg_sprite.png) no-repeat; pointer-events: none; }
.dgr-row { cursor: default; z-index: 2; }
.dgr-row:hover, .dgr-row:focus-visible { background: rgba(66,53,41,.55); outline: 0; }
.dgr-ready:hover { background: transparent; box-shadow: inset 0 0 0 1px #96704a; }
.dgr-tip { position: fixed; z-index: 120; pointer-events: none; filter: drop-shadow(0 12px 30px rgba(0,0,0,.7)); }
.dgr-tip[hidden] { display: none; }
.dgr-tip .dgr-page { position: relative; }
.dgr-t.fit { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }