/* =========================================================================
   Asona · Inventory Window — ORİJİNAL DOKULARLA
   Dokular : Media.pk2 \ interface\inventory\*  +  interface\ifcommon\lattice_window\*
   Yerleşim: resinfo\ifinventory.txt
       FRAME    0,0,176,308     (9 parçalı, sütun/satır sayısına göre esner)
       LATTICE  18,13,144,288   (hücre 36x36 -> 4 sütun x 8 satır)
       OUTLINE  15,10,146,290
       DOWNBOX  0,305,176,28    MONEY BTN 12,310,20,20   GOLD 143,314,24,12
   Ölçüler --cols / --rows üzerinden hesaplanır, varsayılan 5x9 = 45 slot
   (oyunda oyuncunun gördüğü taban envanter). resinfo tasarım değeri 4x8.
   ========================================================================= */

.sro-inv{
  --scale:2;
  --cols:5;
  --rows:9;
  --cell:36;

  /* türetilmiş ölçüler (oyun pikseli) */
  --pad-l:18;
  --pad-t:13;
  --pad-r:14;
  --pad-b:7;
  --grid-w:calc(var(--cols) * var(--cell));
  --grid-h:calc(var(--rows) * var(--cell));
  --frame-w:calc(var(--pad-l) + var(--grid-w) + var(--pad-r));
  --frame-h:calc(var(--pad-t) + var(--grid-h) + var(--pad-b));
  --total-h:calc(var(--frame-h) + 25);

  position:relative;
  width:calc(var(--frame-w) * 1px * var(--scale));
  height:calc(var(--total-h) * 1px * 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-inv[hidden]{ display:none }

.sro-inv__stage{
  position:absolute;left:0;top:0;
  width:calc(var(--frame-w) * 1px);
  height:calc(var(--total-h) * 1px);
  transform:scale(var(--scale));
  transform-origin:0 0;
}
.sro-inv [class*="sro-inv__"]{ image-rendering:pixelated }
.sro-inv--smooth [class*="sro-inv__"]{ image-rendering:auto }

/* -------------------------------------------------------- iç zemin + 9 parça */
.sro-inv__bg{
  position:absolute;left:8px;top:8px;
  width:calc((var(--frame-w) - 16) * 1px);
  height:calc((var(--frame-h) - 16) * 1px);
  background:#0d0d0d;
}

.sro-inv__f{ position:absolute; background-repeat:no-repeat; background-size:100% 100% }
.sro-inv__f--lu{ left:0;  top:0;  width:16px;height:16px; background-image:url("assets/img/int_window_left_up.png") }
.sro-inv__f--ru{ right:0; top:0;  width:16px;height:16px; background-image:url("assets/img/int_window_right_up.png") }
.sro-inv__f--ld{ left:0;  width:16px;height:16px; background-image:url("assets/img/int_window_left_down.png");
                 top:calc((var(--frame-h) - 16) * 1px) }
.sro-inv__f--rd{ right:0; width:16px;height:16px; background-image:url("assets/img/int_window_right_down.png");
                 top:calc((var(--frame-h) - 16) * 1px) }
.sro-inv__f--mu{ left:16px;right:16px;top:0;height:16px;
                 background:url("assets/img/int_window_mid_up.png") repeat-x 0 0/16px 16px }
.sro-inv__f--md{ left:16px;right:16px;height:16px;
                 top:calc((var(--frame-h) - 16) * 1px);
                 background:url("assets/img/int_window_mid_down.png") repeat-x 0 0/24px 16px }
.sro-inv__f--ls{ left:0;top:16px;width:16px;
                 height:calc((var(--frame-h) - 32) * 1px);
                 background:url("assets/img/int_window_left_side.png") repeat-y 0 0/16px 16px }
.sro-inv__f--rs{ right:0;top:16px;width:16px;
                 height:calc((var(--frame-h) - 32) * 1px);
                 background:url("assets/img/int_window_right_side.png") repeat-y 0 0/16px 16px }

/* ------------------------------------------------------------------ outline */
.sro-inv__outline{
  position:absolute;
  left:calc((var(--pad-l) - 3) * 1px);
  top:calc((var(--pad-t) - 3) * 1px);
  width:calc((var(--grid-w) + 2) * 1px);
  height:calc((var(--grid-h) + 2) * 1px);
  pointer-events:none;
}
.sro-inv__o{ position:absolute;background-repeat:no-repeat;background-size:4px 4px }
.sro-inv__o--lu{ left:0;top:0;width:4px;height:4px;   background-image:url("assets/img/com_lattice_outline_left_up.png") }
.sro-inv__o--ru{ right:0;top:0;width:4px;height:4px;  background-image:url("assets/img/com_lattice_outline_right_up.png") }
.sro-inv__o--ld{ left:0;bottom:0;width:4px;height:4px; background-image:url("assets/img/com_lattice_outline_left_down.png") }
.sro-inv__o--rd{ right:0;bottom:0;width:4px;height:4px;background-image:url("assets/img/com_lattice_outline_right_down.png") }
.sro-inv__o--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-inv__o--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 }

/* --------------------------------------------------------------- ızgara --- */
.sro-inv__grid{
  position:absolute;
  left:calc(var(--pad-l) * 1px);
  top:calc(var(--pad-t) * 1px);
  width:calc(var(--grid-w) * 1px);
  height:calc(var(--grid-h) * 1px);
  display:grid;
  grid-template-columns:repeat(var(--cols), 36px);
  grid-auto-rows:36px;
}

/* Hücre dokusu 2x2 desen halinde dizilir — oyundaki CIFLattice böyle çalışır,
   altın perçinler ancak bu düzende hizalanır. */
.sro-inv__slot{
  position:relative;
  width:36px;height:36px;
  background-repeat:no-repeat;background-size:36px 36px;
  background-image:url("assets/img/com_lattice_left_up.png");
}
.sro-inv__slot[data-cx="1"]              { background-image:url("assets/img/com_lattice_right_up.png") }
.sro-inv__slot[data-cy="1"]              { background-image:url("assets/img/com_lattice_left_down.png") }
.sro-inv__slot[data-cx="1"][data-cy="1"] { background-image:url("assets/img/com_lattice_right_down.png") }

.sro-inv__slot.is-filled{ cursor:grab }
.sro-inv__slot.is-filled:active{ cursor:grabbing }
.sro-inv__slot.is-over{ box-shadow:inset 0 0 0 1px #ffe9a8, 0 0 6px 1px rgba(255,233,168,.7) }
.sro-inv__slot.is-drag{ opacity:.35 }

/* slot içeriği — ikon 32x32, hücrenin ortasında */
.sro-inv__icon{
  position:absolute;left:2px;top:2px;width:32px;height:32px;
  background-repeat:no-repeat;background-size:32px 32px;
  pointer-events:none;
}
.sro-inv__count{
  position:absolute;right:1px;bottom:0;
  font:400 10px/1.2 'SRO UI','Arial Rounded MT Bold',Tahoma,sans-serif;
  color:#fff;
  text-shadow:0 0 2px #000,0 1px 0 #000,1px 0 0 #000,-1px 0 0 #000,0 -1px 0 #000;
  pointer-events:none;
}
.sro-inv__plus{
  position:absolute;left:2px;top:1px;
  font:400 10px/1.2 'SRO UI','Arial Rounded MT Bold',Tahoma,sans-serif;
  color:#ffd75e;
  text-shadow:0 0 2px #000,0 1px 0 #000,1px 0 0 #000,-1px 0 0 #000;
  pointer-events:none;
}

/* ---------------------------------------------------------- para çubuğu --- */
.sro-inv__money{
  position:absolute;left:0;
  top:calc((var(--frame-h) - 3) * 1px);
  width:100%;height:28px;
  background:
    url("assets/img/int_window_downbox.png") no-repeat left top/176px 28px,
    url("assets/img/int_window_downbox.png") no-repeat right top/176px 28px;
}
/* geniş pencerede ortayı doldur */
.sro-inv__money::before{
  content:"";position:absolute;left:60px;right:60px;top:0;height:28px;
  background:url("assets/img/int_window_downbox.png") no-repeat center top/100% 28px;
}
.sro-inv__moneybtn{
  position:absolute;left:12px;
  top:calc((var(--frame-h) + 2) * 1px);
  width:20px;height:20px;padding:0;border:0;cursor:pointer;
  background:url("assets/img/com_moneybutton.png") no-repeat 0 0/20px 20px;
  z-index:2;
}
.sro-inv__moneybtn:hover { background-image:url("assets/img/com_moneybutton_focus.png") }
.sro-inv__moneybtn:active{ background-image:url("assets/img/com_moneybutton_press.png") }
.sro-inv__moneybtn:focus-visible{ outline:1px solid #ffe9a8;outline-offset:1px }

/* GOLD  resinfo: 143,314,24,12 · HAlign=2 (sağa yaslı) · beyaz */
.sro-inv__gold{
  position:absolute;
  right:9px;
  top:calc((var(--frame-h) + 6) * 1px);
  height:12px;line-height:12px;
  text-align:right;color:#fff;
  font-variant-numeric:tabular-nums;
  z-index:2;
  pointer-events:none;
}

/* ------------------------------------------------------------- tooltip ---
   Silkroad item kartı düzeni:
     +N ad (altın +)  ·  tür/derece  ·  beyaz istatistikler  ·  MAVİLER
   Mavi rengi client'ın kendi renk kodundan: 255,0,216,255 -> #00d8ff */
.sro-tip{
  position:fixed;z-index:99999;
  min-width:150px;max-width:280px;
  padding:6px 9px 7px;
  font:400 11px/1.5 'SRO UI','Arial Rounded MT Bold',Tahoma,sans-serif;
  color:#e8dcc0;
  background:rgba(6,6,8,.95);
  border:1px solid #6b5636;
  border-radius:2px;
  box-shadow:inset 0 0 0 1px rgba(226,205,154,.12), 0 5px 18px rgba(0,0,0,.75);
  pointer-events:none;
  opacity:0;transition:opacity .1s;
}
.sro-tip.is-on{ opacity:1 }

.sro-tip__name{
  display:block;color:#fff;font-weight:400;
  margin-bottom:1px;
}
.sro-tip__plus{ font-style:normal;color:#ffd75e }

.sro-tip__sub{
  display:block;font-style:normal;color:#a8956f;
  margin-bottom:4px;
}

.sro-tip__stats{
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:12px;
  padding-top:4px;
  border-top:1px solid rgba(107,86,54,.55);
}
.sro-tip__stats span:nth-child(even){ text-align:right;font-variant-numeric:tabular-nums }

/* MAVİLER — basılı magic option'lar */
.sro-tip__blue{
  display:block;
  margin-top:4px;padding-top:4px;
  border-top:1px solid rgba(107,86,54,.55);
  color:#00d8ff;
}
.sro-tip__blue span{ display:block }
/* malzemenin basacağı mavi — henüz basılmadığı için soluk */
.sro-tip__blue--grant{ color:#00d8ff;opacity:.75 }

.sro-tip__hint{ display:block;font-style:normal;color:#a8956f }