/* =========================================================================
   Asona · Magic POP (Gacha) Window — ORİJİNAL DOKULARLA
   Dokular : Media.pk2 \ interface\game\ga_*  +  interface\frame\game_window_*
             + interface\ifcommon\bg_tile\*  + lattice_window\*  + inventory\*
   Yerleşim: resinfo\ifghacha.txt  ·  resinfo\ifghachaselectwnd.txt
   Metinler: silkroad\textdata\textuisystem.txt  (UIIT_*_GACHA_*)

   Pencere 680 x 428 "oyun pikseli". --scale ile büyür.
   ========================================================================= */

.sro-mp{
  --scale:1;
  --w:680;
  --h:428;

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

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

/* ------------------------------------------------------------ zemin döşeme */
/* Oyunda pencerenin içi OPAKtır; 9 parçalı çerçeve yalnızca kenarları çizer.
   Web sürümünde bu taban dolgusu yoktu: sayfa zemini çerçeveyle içerik
   çerçevesi arasından sızıyor, BG_TILE dikdörtgenleri de beyaz üstünde
   çerçevenin dışına taşmış gibi görünüyordu. Taban, çerçevenin opak
   bandının içine (6px) yerleşir; köşe parçaları en dar yerinde 6px opak. */
.sro-mp__body{
  position:absolute;left:6px;top:6px;width:668px;height:416px;
  background:#0b0b0c url("assets/img/com_bg_tile_k.png") repeat;
  z-index:0;
}

.sro-mp__tile{ position:absolute; background-repeat:repeat }
.sro-mp__tile--k  { background-image:url("assets/img/com_bg_tile_k.png") }
.sro-mp__tile--b  { background-image:url("assets/img/com_bg_tile_b.png") }
/* BG_TILE_K 40,65,620,40 · BG_TILE_K2 470,77,40,333 · BG_TILE 34,93,423,301 */
.sro-mp__tile--top  { left:40px;  top:65px;  width:620px; height:40px }
.sro-mp__tile--side { left:470px; top:77px;  width:40px;  height:333px }
.sro-mp__tile--main { left:34px;  top:93px;  width:423px; height:301px }

/* ------------------------------------------------------- 9 parçalı çerçeve
   game_window_: köşe 42x42, üst/alt orta 56x8, yan 8x160
   int_window_ : köşe 16x16, üst orta 16x16, alt orta 24x16, yan 16x16      */
.sro-mp__f{ position:absolute; background-repeat:no-repeat; background-size:100% 100% }

.sro-mp__frame{ position:absolute }
.sro-mp__frame > i{ position:absolute; display:block; background-repeat:no-repeat }

/* --- game_window_ --- */
.sro-mp__frame--gw > .lu{ left:0;top:0;width:42px;height:42px;   background-image:url("assets/img/game_window_left_up.png") }
.sro-mp__frame--gw > .ru{ right:0;top:0;width:42px;height:42px;  background-image:url("assets/img/game_window_right_up.png") }
.sro-mp__frame--gw > .ld{ left:0;bottom:0;width:42px;height:42px; background-image:url("assets/img/game_window_left_down.png") }
.sro-mp__frame--gw > .rd{ right:0;bottom:0;width:42px;height:42px;background-image:url("assets/img/game_window_right_down.png") }
.sro-mp__frame--gw > .mu{ left:42px;right:42px;top:0;height:8px;
  background:url("assets/img/game_window_mid_up.png") repeat-x 0 0 }
.sro-mp__frame--gw > .md{ left:42px;right:42px;bottom:0;height:8px;
  background:url("assets/img/game_window_mid_down.png") repeat-x 0 0 }
.sro-mp__frame--gw > .ls{ left:0;top:42px;bottom:42px;width:8px;
  background:url("assets/img/game_window_left_side.png") repeat-y 0 0 }
.sro-mp__frame--gw > .rs{ right:0;top:42px;bottom:42px;width:8px;
  background:url("assets/img/game_window_right_side.png") repeat-y 0 0 }

/* --- int_window_ (sağdaki envanter çerçevesi) --- */
.sro-mp__frame--iw > .lu{ left:0;top:0;width:16px;height:16px;    background-image:url("assets/img/int_window_left_up.png") }
.sro-mp__frame--iw > .ru{ right:0;top:0;width:16px;height:16px;   background-image:url("assets/img/int_window_right_up.png") }
.sro-mp__frame--iw > .ld{ left:0;bottom:0;width:16px;height:16px; background-image:url("assets/img/int_window_left_down.png") }
.sro-mp__frame--iw > .rd{ right:0;bottom:0;width:16px;height:16px;background-image:url("assets/img/int_window_right_down.png") }
.sro-mp__frame--iw > .mu{ left:16px;right:16px;top:0;height:16px;
  background:url("assets/img/int_window_mid_up.png") repeat-x 0 0 }
.sro-mp__frame--iw > .md{ left:16px;right:16px;bottom:0;height:16px;
  background:url("assets/img/int_window_mid_down.png") repeat-x 0 0 }
.sro-mp__frame--iw > .ls{ left:0;top:16px;bottom:16px;width:16px;
  background:url("assets/img/int_window_left_side.png") repeat-y 0 0 }
.sro-mp__frame--iw > .rs{ right:0;top:16px;bottom:16px;width:16px;
  background:url("assets/img/int_window_right_side.png") repeat-y 0 0 }

/* konumlar (resinfo) */
.sro-mp__frame--window { left:0;   top:0;   width:680px; height:428px }
.sro-mp__frame--content{ left:18px;top:77px;width:455px; height:333px }
.sro-mp__frame--rollL  { left:49px; top:150px;width:128px;height:232px }
.sro-mp__frame--rollR  { left:317px;top:150px;width:128px;height:232px }

/* -------------------------------------------------------------- başlık --- */
.sro-mp__drag{ position:absolute;left:42px;top:0;right:42px;height:28px;cursor:move }
.sro-mp__title{
  position:absolute;left:0;top:8px;width:680px;height:14px;
  line-height:14px;text-align:center;color:#efdaa4;pointer-events:none;
}
.sro-mp__close{
  position:absolute;left:656px;top:10px;width:16px;height:16px;
  padding:0;border:0;cursor:pointer;
  background:url("assets/img/com_windowclose.png") no-repeat 0 0/16px 16px;
}
.sro-mp__close:hover { background-image:url("assets/img/com_windowclose_focus.png") }
.sro-mp__close:active{ background-image:url("assets/img/com_windowclose_press.png") }
.sro-mp__close:focus-visible{ outline:1px solid #ffe9a8;outline-offset:1px }

/* --------------------------------------------- başlık bandı (GRADATION) ---
   ga_deco_gradation 424x24 — iki ucu saydam, ortası siyah yumuşak bir bant.
   ÖNCEDEN 636px'e esnetiliyordu: dokunun yumuşak uçları pencerenin köşelerine
   kadar açılıp iki yanda sert gri blok gibi görünüyordu. Doku doğal ölçüsünde
   ve pencereye ortalı çizilir:  sol = (680-424)/2 = 128.

   Ayrıca DDJ->PNG çıkarımı alfayı 0/255'e yuvarlamış: dokunun gri rampası
   ~%50'de sert kesiliyor, bant yumuşak sönmek yerine basamaklı gri blokla
   bitiyordu. alcm_effect_success_alpha ile aynı yol izlendi — gri değer
   alfaya çevrilip siyah bir kopya üretildi (ga_deco_gradation_alpha.png). */
.sro-mp__gradation{
  position:absolute;left:128px;top:46px;width:424px;height:24px;
  background:url("assets/img/ga_deco_gradation_alpha.png") no-repeat 0 0/424px 24px;
  pointer-events:none;z-index:1;
}
/* Yazı bandın değil PENCERENİN ortasına hizalanır — referansta metin
   x=265..423, merkez 344. Banda ortalarsak 53px sola kayıyordu. */
.sro-mp__banner{
  position:absolute;left:0;top:46px;width:680px;height:24px;
  display:flex;align-items:center;justify-content:center;
  color:#fff;text-shadow:0 1px 2px #000;
  pointer-events:none;
}
.sro-mp__banner.is-ok { color:#7ef2ad }
.sro-mp__banner.is-bad{ color:#ff8b8b }

/* ------------------------------------------------------------ dekorlar --- */
.sro-mp__deco{ position:absolute;background-repeat:no-repeat;pointer-events:none;z-index:6 }
.sro-mp__deco--waveL{ left:0;   top:24px; width:228px;height:308px; background-image:url("assets/img/ga_deco_wave.png") }
.sro-mp__deco--waveR{ left:448px;top:24px;width:228px;height:308px; background-image:url("assets/img/ga_deco_wave.png") }
.sro-mp__deco--edgeL{ left:0;   top:382px;width:40px; height:44px;  background-image:url("assets/img/ga_deco_left_edge.png") }
.sro-mp__deco--edgeR{ left:632px;top:382px;width:40px; height:44px;  background-image:url("assets/img/ga_deco_right_edge.png") }

/* ------------------------------------------------- ödül sırası (LATTICE) --
   LATTICE 32,99,432,36 — 12 hücre x 36 · SLOT_100..111 32..428 adım 36 */
.sro-mp__prizes{
  position:absolute;left:32px;top:99px;width:432px;height:36px;
  display:grid;grid-template-columns:repeat(12,36px);
}
.sro-mp__cell{
  position:relative;width:36px;height:36px;
  background:url("assets/img/com_lattice_left_up.png") no-repeat 0 0/36px 36px;
}
.sro-mp__cell:nth-child(even){ background-image:url("assets/img/com_lattice_right_up.png") }
.sro-mp__cell.is-pick{ box-shadow:inset 0 0 0 2px #ffe9a8, 0 0 8px 2px rgba(255,233,168,.75) }
.sro-mp__cell.is-filled{ cursor:pointer }
/* Boş ödül bölmesi — oyundaki gibi soru işareti (icon\item\etc\gacha_question) */
.sro-mp__cell:not(.is-filled)::after{
  content:"";position:absolute;left:2px;top:2px;width:32px;height:32px;
  background:url("assets/img/icon/gacha_question.png") no-repeat 0 0/32px 32px;
  opacity:.45;
}

.sro-mp__icon{
  position:absolute;left:2px;top:2px;width:32px;height:32px;
  background-repeat:no-repeat;background-size:32px 32px;pointer-events:none;
}

/* ------------------------------------------------------- dönen makaralar --
   ROLL_FRAME_L/R 49,150,128,232 ve 317,150,128,232 — kareler 128x232 */
.sro-mp__reel{
  position:absolute;width:128px;height:232px;
  background-repeat:no-repeat;background-size:128px 232px;
  background-image:url("assets/img/gacha_roll0000.png");
}
.sro-mp__reel--l{ left:49px; top:150px }
.sro-mp__reel--r{ left:317px;top:150px }

/* 11 kare (0000..0020), her biri ayrı dosya — JS sırayla değiştirir */

/* --------------------------------------------------- orta efekt + kart --- */
/* DECO 183,168,128,128 · ga_effect_* 140x196 */
.sro-mp__fx{
  position:absolute;left:183px;top:168px;width:128px;height:128px;
  background-repeat:no-repeat;background-position:center;background-size:contain;
  opacity:0;pointer-events:none;z-index:4;
  mix-blend-mode:screen;              /* efekt dokuları toplamalı harmanlanır */
}
.sro-mp__fx.is-on{ opacity:1 }

/* Orta madalyon — ga_window_composition.ddj 132x132.
   Dosya pakette vardı ama hiç kullanılmıyordu; oyundaki elmas biçimli
   oymalı çerçeve bu yüzden eksikti ve kart yuvası boşlukta duruyordu.
   Merkezi kart yuvasının merkeziyle çakışır: 181+66 = 247, 167+66 = 233. */
.sro-mp__composition{
  position:absolute;left:181px;top:167px;width:132px;height:132px;
  background:url("assets/img/ga_window_composition.png") no-repeat 0 0/132px 132px;
  pointer-events:none;z-index:2;
}

/* CARD_SLOT 231,217,32,32 — madalyonun ortasındaki oyuk kare kart yuvasıdır;
   üzerine ayrıca kafes dokusu çizilmez (oyunda da çizilmiyor). */
.sro-mp__cardslot{
  position:absolute;left:229px;top:215px;width:36px;height:36px;z-index:5;
}
.sro-mp__cardslot.is-over{ box-shadow:inset 0 0 0 1px #ffe9a8, 0 0 8px 2px rgba(255,233,168,.7) }
.sro-mp__cardslot.is-filled{ cursor:pointer }

/* --------------------------------------------------- PLAY (BTN_START) ---
   190,355 · alcm_button 112x28 */
.sro-mp__play{
  position:absolute;left:190px;top:355px;width:112px;height:28px;z-index:5;
  padding:0;border:0;cursor:pointer;
  font:inherit;line-height:28px;color:#1a1710;
  background:url("assets/img/alcm_button.png") no-repeat 0 0/112px 28px;
  overflow:hidden;
}
.sro-mp__play:hover:not(:disabled){ background-image:url("assets/img/alcm_button_focus.png") }
.sro-mp__play:active:not(:disabled){ background-image:url("assets/img/alcm_button_press.png");padding-top:1px }
.sro-mp__play:disabled{ background-image:url("assets/img/alcm_button_disable.png");color:#6b6353;cursor:default }
.sro-mp__play:focus-visible{ outline:1px solid #ffe9a8;outline-offset:1px }

/* ------------------------------------------------- gömülü envanter yeri ---
   INVENTORY_FRAME 475,77,176,306 — SroInventory buraya yerleşir (4x8) */
.sro-mp__inv{ position:absolute;left:475px;top:77px;z-index:3 }
.sro-mp__inv .sro-inv{ --scale:1 }

/* =========================== SEÇİM PENCERESİ (ifghachaselectwnd.txt) ======
   319x257 · BG 16,40,298,204 · INNER 14,43,291,171 · TITLE 69,12 ·
   FRAME_TITLE 79,47 · etiketler 16,81/132/183 · combobox 90,77/128/179 ·
   START 116,222,76,24                                                     */
.sro-mp-sel{
  --scale:1;
  position:relative;width:calc(319px * var(--scale));height:calc(257px * var(--scale));
  font:400 10px/1.25 'SRO UI','Arial Rounded MT Bold',Tahoma,sans-serif;
  color:#efdaa4;user-select:none;
}
.sro-mp-sel[hidden]{ display:none }
.sro-mp-sel__stage{
  position:absolute;left:0;top:0;width:319px;height:257px;
  transform:scale(var(--scale));transform-origin:0 0;
}
.sro-mp-sel [class*="sro-mp-sel__"]{ image-rendering:pixelated }

.sro-mp-sel__bg{
  position:absolute;left:16px;top:40px;width:298px;height:204px;
  background:url("assets/img/com_bg_tile_b.png") repeat;
}
.sro-mp-sel__outer{ position:absolute;left:0;top:0;width:319px;height:257px }
.sro-mp-sel__inner{ position:absolute;left:14px;top:43px;width:291px;height:171px }
.sro-mp-sel__inner > i{ position:absolute;display:block;background-repeat:no-repeat }
.sro-mp-sel__inner > .lu{ left:0;top:0;width:20px;height:24px;    background-image:url("assets/img/opt_inner_box_left_up.png") }
.sro-mp-sel__inner > .ru{ right:0;top:0;width:20px;height:24px;   background-image:url("assets/img/opt_inner_box_right_up.png") }
.sro-mp-sel__inner > .ld{ left:0;bottom:0;width:20px;height:24px; background-image:url("assets/img/opt_inner_box_left_down.png") }
.sro-mp-sel__inner > .rd{ right:0;bottom:0;width:20px;height:24px;background-image:url("assets/img/opt_inner_box_right_down.png") }
.sro-mp-sel__inner > .mu{ left:20px;right:20px;top:0;height:28px;
  background:url("assets/img/opt_inner_box_mid_up.png") repeat-x 0 0 }
.sro-mp-sel__inner > .md{ left:20px;right:20px;bottom:0;height:12px;
  background:url("assets/img/opt_inner_box_mid_down.png") repeat-x 0 0 }
.sro-mp-sel__inner > .ls{ left:0;top:24px;bottom:24px;width:20px;
  background:url("assets/img/opt_inner_box_left_side.png") repeat-y 0 0 }
.sro-mp-sel__inner > .rs{ right:0;top:24px;bottom:24px;width:20px;
  background:url("assets/img/opt_inner_box_right_side.png") repeat-y 0 0 }

.sro-mp-sel__title{ position:absolute;left:69px;top:12px;width:162px;height:14px;
  line-height:14px;text-align:center;color:#efdaa4 }
.sro-mp-sel__subtitle{ position:absolute;left:79px;top:47px;width:162px;height:14px;
  line-height:14px;text-align:center;color:#fff }
.sro-mp-sel__label{ position:absolute;width:66px;height:14px;line-height:14px;color:#e8dcc0 }
.sro-mp-sel__label--big{ left:16px;top:81px }
.sro-mp-sel__label--mid{ left:16px;top:132px }
.sro-mp-sel__label--sml{ left:16px;top:183px }
.sro-mp-sel__combo{
  position:absolute;left:90px;width:166px;height:20px;
  font:inherit;color:#e8dcc0;
  background:#100c08;border:1px solid #5b4a30;border-radius:2px;
  padding:0 4px;
}
.sro-mp-sel__combo--1{ top:77px }
.sro-mp-sel__combo--2{ top:128px }
.sro-mp-sel__combo--3{ top:179px }
.sro-mp-sel__start{
  position:absolute;left:116px;top:222px;width:76px;height:24px;
  padding:0;border:0;cursor:pointer;font:inherit;line-height:24px;color:#1e1a14;
  background:url("assets/img/com_button.png") no-repeat 0 0/76px 24px;
}
.sro-mp-sel__start:hover { background-image:url("assets/img/com_button_focus.png") }
.sro-mp-sel__start:active{ background-image:url("assets/img/com_button_press.png") }

/* seçim penceresi ana pencerenin üstünde açılır */
.sro-mp__select{ position:absolute;left:180px;top:85px;z-index:20 }