/* =========================================================================
   Asona · NPC Store (satın alma) Window — ORİJİNAL DOKULARLA
   Dokular : Media.pk2 \ interface\store\str_*  +  interface\inventory\int_window_*
             + interface\ifcommon\lattice_window\*  + bg_tile\com_bg_tile_a|c
   Yerleşim: resinfo\ifstore.txt  (doğrulanmış Rect değerleri)

     STORAGE_BGTILE   25,250,204,13   com_bg_tile_c
     STORE_FRAME       9, 60,236,219  int_window_
     STORE_STRETCH    18, 68,218,182  com_lattice_outline_
     STORE_LAT        21, 71,216,180  com_lattice_   -> 6 sütun x 5 satır, hücre 36
     SLOT_100..129    x=21,57,93,129,165,201 · y=71,107,143,179,215 · 32x32
     SPIN_PAGE       102,254,50,16

   Boyama sırası resinfo listesinin tersi:
     gövde -> STORAGE_BGTILE -> FRAME -> STRETCH -> LAT -> SPIN

   ------------------------------------------------------------------------
   resinfo'da OLMAYAN, türetilmiş 3 değer — hepsi burada açıkça yazılı:

   1) Pencere gövdesi ve çerçevesi. ifstore.txt yalnızca İÇERİĞİ tanımlar
      (y = 60..279); dış pencereyi istemcinin CIFWnd tabanı çizer. İçerik
      x = 9..245 arasında olduğundan kenar boşluğu 9 px; pencere buradan
      254 x 288 çıkıyor (alt kenar 279 + 9).
   2) Gövde döşemesi com_bg_tile_c. Her SRO penceresinin gövdesi dokuludur
      (düz siyah değil); ifstore.txt'nin adını verdiği tek tile da bu.
   3) Sekme şeridi. Kategoriler sunucudaki refshoptab'dan geldiği için
      istemci çalışma anında yerleştirir. str_*_tab_* dokuları 56x24;
      şerit liste çerçevesine bitişik: y = 60 - 24 = 36, adım 56, x = 9.

   NOT: Jenerik int_window_ çerçevesinin süslü bir başlık çubuğu YOKTUR
   (envanter penceresinde başlık widget'ı hiç bulunmaz). Başlık, gövde
   döşemesinin üzerine düz metin olarak çizilir — üst kenarlık 16 px
   olduğundan metin 18..34 bandına oturur.
   ========================================================================= */

/* İstemcinin arayüz yazı tipi. alchemy.css de aynı bildirimi taşır; ikisi
   birlikte yüklenirse tarayıcı tek indirme yapar. Bu sayede mağaza sayfası
   alchemy.css olmadan da doğru görünür. */
@font-face{
  font-family:'SRO UI';
  src:url("assets/fonts/sro-ui.ttf") format("truetype");
  font-display:swap;
}

.sro-store{
  --scale:2;
  position:relative;
  width:calc(254px * var(--scale));
  height:calc(288px * var(--scale));
  font:400 10px/1.25 'SRO UI','Arial Rounded MT Bold',Tahoma,Verdana,sans-serif;
  color:#efdaa4;
  user-select:none;-webkit-user-select:none;
}
.sro-store[hidden]{ display:none }
.sro-store__stage{
  position:absolute;left:0;top:0;width:254px;height:288px;
  transform:scale(var(--scale));transform-origin:0 0;
}
.sro-store [class*="sro-store__"]{ image-rendering:pixelated }
.sro-store--smooth [class*="sro-store__"]{ image-rendering:auto }

/* pencere gövdesi — dokulu taş, düz siyah DEĞİL (türetilmiş, bkz. başlık notu 2)
   com_bg_tile_a ortalama parlaklığı 21 (neredeyse siyah); _c ise 36 ve üst
   kenarlığın taş dokusuyla aynı tonda. ifstore.txt'nin adını verdiği tek
   tile da bu (GDR_STORAGE_BGTILE).                                          */
.sro-store__bg{
  position:absolute;left:8px;top:8px;width:238px;height:272px;
  background:url("assets/img/com_bg_tile_c.png") repeat 0 0;
}

/* --------------------------------------------------------- 9 parça çerçeve
   int_window_: köşe 16, üst orta 16x16, alt orta 24x16, yan 16              */
.sro-store__frame{ position:absolute }
.sro-store__frame > i{ position:absolute;display:block;background-repeat:no-repeat }
.sro-store__frame > .lu{ left:0;top:0;width:16px;height:16px;    background-image:url("assets/img/int_window_left_up.png") }
.sro-store__frame > .ru{ right:0;top:0;width:16px;height:16px;   background-image:url("assets/img/int_window_right_up.png") }
.sro-store__frame > .ld{ left:0;bottom:0;width:16px;height:16px; background-image:url("assets/img/int_window_left_down.png") }
.sro-store__frame > .rd{ right:0;bottom:0;width:16px;height:16px;background-image:url("assets/img/int_window_right_down.png") }
.sro-store__frame > .mu{ left:16px;right:16px;top:0;height:16px;
  background:url("assets/img/int_window_mid_up.png") repeat-x 0 0 }
.sro-store__frame > .md{ left:16px;right:16px;bottom:0;height:16px;
  background:url("assets/img/int_window_mid_down.png") repeat-x 0 0 }
.sro-store__frame > .ls{ left:0;top:16px;bottom:16px;width:16px;
  background:url("assets/img/int_window_left_side.png") repeat-y 0 0 }
.sro-store__frame > .rs{ right:0;top:16px;bottom:16px;width:16px;
  background:url("assets/img/int_window_right_side.png") repeat-y 0 0 }
.sro-store__frame--window{ left:0;top:0;width:254px;height:288px }
.sro-store__frame--list  { left:9px;top:60px;width:236px;height:219px }

/* --------------------------------------------- GDR_STORAGE_BGTILE döşemesi */
.sro-store__tile--page{
  position:absolute;left:25px;top:250px;width:204px;height:13px;
  background:url("assets/img/com_bg_tile_c.png") repeat 0 0;
}

/* --------------------------------------------- ızgara çerçevesi (4px kenar)
   com_lattice_outline_ · STRETCH 18,68,218,182
   İstemci bu çerçeve için yalnızca 6 parça gönderir (4 köşe + 2 yan).       */
.sro-store__outline{ position:absolute;left:18px;top:68px;width:218px;height:182px;pointer-events:none }
.sro-store__outline > i{ position:absolute;display:block;background-repeat:no-repeat;background-size:4px 4px }
.sro-store__outline > .lu{ left:0;top:0;width:4px;height:4px;     background-image:url("assets/img/com_lattice_outline_left_up.png") }
.sro-store__outline > .ru{ right:0;top:0;width:4px;height:4px;    background-image:url("assets/img/com_lattice_outline_right_up.png") }
.sro-store__outline > .ld{ left:0;bottom:0;width:4px;height:4px;  background-image:url("assets/img/com_lattice_outline_left_down.png") }
.sro-store__outline > .rd{ right:0;bottom:0;width:4px;height:4px; background-image:url("assets/img/com_lattice_outline_right_down.png") }
.sro-store__outline > .ls{ left:0;top:4px;bottom:4px;width:4px;
  background:url("assets/img/com_lattice_outline_left_side.png") repeat-y 0 0/4px 4px }
.sro-store__outline > .rs{ right:0;top:4px;bottom:4px;width:4px;
  background:url("assets/img/com_lattice_outline_right_side.png") repeat-y 0 0/4px 4px }

/* --------------------------------------------------------- başlık bandı --
   üst kenarlık 0..16, sekmeler 36..60  ->  metin aradaki 16..36 bandında   */
.sro-store__drag{ position:absolute;left:16px;top:0;right:16px;height:36px;cursor:move }
.sro-store__title{
  position:absolute;left:24px;top:18px;right:24px;height:16px;
  line-height:16px;text-align:center;color:#efdaa4;pointer-events:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sro-store__close{
  position:absolute;left:229px;top:18px;width:16px;height:16px;   /* 254-9-16 */
  padding:0;border:0;cursor:pointer;
  background:url("assets/img/com_windowclose.png") no-repeat 0 0/16px 16px;
}
.sro-store__close:hover { background-image:url("assets/img/com_windowclose_focus.png") }
.sro-store__close:active{ background-image:url("assets/img/com_windowclose_press.png") }
.sro-store__close:focus-visible{ outline:1px solid #ffe9a8;outline-offset:1px }

/* ----------------------------------------------------------- kategoriler
   str_*_tab_* 56x24 — çerçevenin üstüne bitişik (y=36, 36+24=60)          */
.sro-store__tabs{
  position:absolute;left:9px;top:36px;height:24px;
  display:flex;gap:0;
}
.sro-store__tab{
  width:56px;height:24px;flex:none;padding:0;border:0;cursor:pointer;
  background:no-repeat 0 0/56px 24px;
}
.sro-store__tab[disabled]{ cursor:default }
.sro-store__tab:focus-visible{ outline:1px solid #ffe9a8;outline-offset:-2px }

/* ------------------------------------------------------------ ürün ızgarası
   LAT 21,71 — 6x5, hücre 36x36, 2x2 doku deseni                            */
.sro-store__grid{
  position:absolute;left:21px;top:71px;width:216px;height:180px;
  display:grid;grid-template-columns:repeat(6,36px);grid-auto-rows:36px;
}
.sro-store__slot{
  position:relative;width:36px;height:36px;
  background:url("assets/img/com_lattice_left_up.png") no-repeat 0 0/36px 36px;
}
.sro-store__slot[data-cx="1"]              { background-image:url("assets/img/com_lattice_right_up.png") }
.sro-store__slot[data-cy="1"]              { background-image:url("assets/img/com_lattice_left_down.png") }
.sro-store__slot[data-cx="1"][data-cy="1"] { background-image:url("assets/img/com_lattice_right_down.png") }
.sro-store__slot.is-filled{ cursor:pointer }
.sro-store__slot.is-filled:hover{ box-shadow:inset 0 0 0 1px #ffe9a8, 0 0 6px 1px rgba(255,233,168,.6) }
.sro-store__slot.is-poor:hover { box-shadow:inset 0 0 0 1px #e05c5c, 0 0 6px 1px rgba(224,92,92,.6) }

/* ikon hücrenin ortasında: (36-32)/2 = 2 */
.sro-store__icon{
  position:absolute;left:2px;top:2px;width:32px;height:32px;
  background-repeat:no-repeat;background-size:32px 32px;pointer-events:none;
}

/* ------------------------------------------------------------ sayfa seçici
   SPIN_PAGE 102,254,50,16 — oklar bu 50px'in İÇİNDE: 16 + 18 + 16 = 50     */
.sro-store__pagebtn{
  position:absolute;top:254px;width:16px;height:16px;padding:0;border:0;cursor:pointer;
  background:url("assets/img/com_scroll_button.png") no-repeat 0 0/16px 16px;
}
.sro-store__pagebtn--prev{ left:102px;transform:rotate(-90deg) }
.sro-store__pagebtn--next{ left:136px;transform:rotate(90deg) }
.sro-store__pagebtn:hover { background-image:url("assets/img/com_scroll_button_focus.png") }
.sro-store__pagebtn:active{ background-image:url("assets/img/com_scroll_button_press.png") }
.sro-store__pagebtn[disabled]{ opacity:.35;cursor:default }
.sro-store__page{
  position:absolute;left:102px;top:254px;width:50px;height:16px;
  line-height:16px;text-align:center;color:#fff;white-space:nowrap;
  font-variant-numeric:tabular-nums;pointer-events:none;
}

/* fiyat satırı — tooltip içinde */
.sro-tip__price{ display:block;color:#ffd75e }
.sro-tip__price--poor{ color:#e05c5c }