/* =========================================================================
   Asona · Alchemy Window — ORİJİNAL DOKULARLA
   Görseller Media.pk2 içinden çıkarıldı (interface\alchemy\*.ddj -> PNG).
   Yerleşim, oyunun kendi resinfo dosyalarındaki koordinatlardır:
     resinfo\ifnewalchemybox.txt · resinfo\ifnewalchemyreinforce.txt

   Pencere ölçüsü 376 x 378 "oyun pikseli". Tüm iç ölçüler bu uzayda;
   .sw-alch üzerindeki --scale ile büyütülür (varsayılan 2x).
   Görsel klasörü: assets/img/  (değiştireceksen buradaki url()'leri değiştir)
   ========================================================================= */

/* Client'ın kendi arayüz fontu: Media.pk2 \ fonts\ ¿µ¹®¼­ã¼.ttf
   (iç adı "Arial Rounded MT Bold" — İngilizce client bütün UI metnini bununla çizer) */
@font-face{
  font-family:'SRO UI';
  src:url("assets/fonts/sro-ui.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:block;
}

.sw-alch{
  --scale:2;
  --w:376;
  --h:378;

  position:relative;
  width:calc(var(--w) * 1px * var(--scale));
  height:calc(var(--h) * 1px * var(--scale));
  /* Oyun tek font kullanır (resinfo: FontIndex=0).
     10 oyun pikseli: "Manufacture" sekmeye tam sığar, "Strengthening" 8px taşar,
     açıklama tam "attribute," sonrasında kırılır — client ile aynı. */
  font:400 10px/1.25 'SRO UI','Arial Rounded MT Bold',Tahoma,Verdana,sans-serif;
  user-select:none;
  -webkit-user-select:none;
}
.sw-alch[hidden]{display:none}

/* Oyun pikseli uzayı: içerideki her şey 1:1 orijinal koordinatlarda durur,
   tek bir transform ile ölçeklenir. */
.sw-alch__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;
}

/* Tam sayı ölçekte keskin kalsın; yumuşak istersen .sw-alch--smooth ekle */
.sw-alch img,
.sw-alch [class*="sw-alch__bg"],
.sw-alch__tab,
.sw-alch__close,
.sw-alch__act{ image-rendering:pixelated; }
.sw-alch--smooth img,
.sw-alch--smooth [class*="sw-alch__bg"],
.sw-alch--smooth .sw-alch__tab,
.sw-alch--smooth .sw-alch__close,
.sw-alch--smooth .sw-alch__act{ image-rendering:auto; }

/* ------------------------------------------------------------ arka planlar */
/* Üst blok: başlık çubuğu + sekme yatağı + parşömen  (alcm_window_1.ddj) */
.sw-alch__bg-top{
  position:absolute;left:0;top:0;width:376px;height:172px;
  background:url("assets/img/alcm_window_1.png") 0 0 / 376px 172px no-repeat;
}
/* Alt blok: sekmeye göre değişen içerik paneli, y=150'den başlar */
.sw-alch__bg-panel{
  position:absolute;left:0;top:150px;width:376px;height:228px;
  background-repeat:no-repeat;
  background-size:376px 228px;
}
.sw-alch[data-tab="strengthening"] .sw-alch__bg-panel{ background-image:url("assets/img/alcm_window_strengthening.png") }
.sw-alch[data-tab="disjoint"]      .sw-alch__bg-panel{ background-image:url("assets/img/alcm_window_disjoint.png") }
.sw-alch[data-tab="dismantle"]     .sw-alch__bg-panel{ background-image:url("assets/img/alcm_window_dismantle.png") }
.sw-alch[data-tab="manufacture"]   .sw-alch__bg-panel{ background-image:url("assets/img/alcm_window_lamp_element.png") }

/* ------------------------------------------- başlık  (DRAG 10,0,355,42) */
.sw-alch__drag{
  position:absolute;left:10px;top:0;width:355px;height:42px;
  cursor:move;
}
/* TITLE 10,20,355,12 · HAlign=1 (orta) · FontColor 255,239,218,164 */
.sw-alch__title{
  position:absolute;left:10px;top:20px;width:355px;height:12px;
  line-height:12px;text-align:center;
  color:#efdaa4;
  pointer-events:none;
}
/* CLOSE 350,15,16,16 */
.sw-alch__close{
  position:absolute;left:350px;top:15px;width:16px;height:16px;
  padding:0;border:0;cursor:pointer;
  background:url("assets/img/alcm_windowclose.png") 0 0 / 16px 16px no-repeat;
}
.sw-alch__close:hover{ background-image:url("assets/img/alcm_windowclose_focus.png") }
.sw-alch__close:active{ background-image:url("assets/img/alcm_windowclose_press.png") }
.sw-alch__close:focus-visible{ outline:1px solid #ffe9a8;outline-offset:1px }

/* ------------------------------------------------------------------ sekmeler
   Yatak bölmeleri dokudan ölçüldü: x = 14 | 102 | 189 | 276 | 363, y = 46 */
.sw-alch__tab{
  position:absolute;top:46px;height:24px;
  padding:0 0 0 20px;
  font:inherit;
  line-height:24px;
  color:#14110a;
  text-align:center;
  cursor:pointer;
  border:0;
  background:url("assets/img/alcm_tab_off.png") 0 0 / 100% 100% no-repeat;
  white-space:nowrap;
  /* "Strengthening" 82px — plakadan taşar, oyunda da öyle */
  overflow:visible;
}
.sw-alch__tab[data-tab="disjoint"]     { left:14px;  width:88px }
.sw-alch__tab[data-tab="dismantle"]    { left:102px; width:87px }
.sw-alch__tab[data-tab="manufacture"]  { left:189px; width:87px }
.sw-alch__tab[data-tab="strengthening"]{ left:276px; width:87px }

/* Aktif sekme: parlak plaka + client'ın sentetik kalını */
.sw-alch__tab.is-active{
  background-image:url("assets/img/alcm_tab_on.png");
  font-weight:700;
}
.sw-alch__tab:focus-visible{ outline:1px solid #ffe9a8;outline-offset:-2px }

/* sekme mücevheri — dokudaki yuvanın üstüne renk basar */
.sw-alch__tab::before{
  content:"";position:absolute;left:5px;top:5px;width:14px;height:14px;
  border-radius:50%;
  background:
    radial-gradient(circle at 34% 30%, rgba(255,255,255,.95) 0 14%, transparent 44%),
    radial-gradient(circle at 50% 55%, var(--gem,#7a5fd0) 0 55%, rgba(0,0,0,.6) 100%);
  box-shadow:0 0 0 1px rgba(0,0,0,.55) inset;
}

/* açıklama · PML 39,97,300,48 · HAlign=0 (sol) VAlign=0 (üst) · FontColor 255,0,0,0 */
.sw-alch__desc{
  position:absolute;left:39px;top:97px;width:300px;height:48px;
  line-height:14px;
  color:#000;
  pointer-events:none;
}
.sw-alch__desc.is-ok { color:#0d5024 }
.sw-alch__desc.is-bad{ color:#8a0f0f }

/* ------------------------------------------------------------------- slotlar
   ifnewalchemyreinforce.txt: EQUIP 58,74 · SLOT_01..04 x=164/212/260/308, y=74
   (+150 pencere uzayına taşınır)  ·  hepsi 32x32 */
.sw-alch__slot{
  position:absolute;top:224px;width:32px;height:32px;
  cursor:default;
}
.sw-alch__slot[data-slot="item"]{ left:58px }
.sw-alch__slot[data-slot="mat1"]{ left:164px }
.sw-alch__slot[data-slot="mat2"]{ left:212px }
.sw-alch__slot[data-slot="mat3"]{ left:260px }
.sw-alch__slot[data-slot="mat4"]{ left:308px }

.sw-alch__slot.is-filled{ cursor:pointer }
.sw-alch__slot.is-over{
  box-shadow:0 0 0 1px #ffe9a8, 0 0 6px 2px rgba(255,233,168,.75);
}
.sw-alch__slot.is-reject{
  box-shadow:0 0 0 1px #ff8b8b, 0 0 6px 2px rgba(255,90,90,.75);
}

/* slot içeriği */
.sw-alch__icon{
  position:absolute;inset:0;
  background-size:32px 32px;
  background-repeat:no-repeat;
  image-rendering:pixelated;
}
.sw-alch__icon--tone{
  background-image:linear-gradient(150deg, rgba(255,255,255,.45), transparent 55%);
  background-color:var(--tone,#6ea8ff);
  display:grid;place-items:center;
  font:700 11px/1 Tahoma,sans-serif;color:#0d0b08;
}
.sw-alch__badge{
  position:absolute;right:0;bottom:-1px;
  font:700 11px/1 Tahoma,sans-serif;color:#fff;
  text-shadow:0 0 2px #000,0 1px 0 #000,1px 0 0 #000,-1px 0 0 #000;
  pointer-events:none;
}
.sw-alch__badge--plus{ color:#ffd75e }

/* ================================================== BASMA ALANI (Strengthen)
   ifnewalchemyreinforce.txt: BUTTON_PROCESS 136,178  ·  sprite 112x28 */
.sw-alch__act{
  position:absolute;left:136px;top:328px;width:112px;height:28px;
  padding:0;border:0;cursor:pointer;
  font:inherit;
  line-height:28px;
  color:#1a1710;
  background:url("assets/img/alcm_button.png") 0 0 / 112px 28px no-repeat;
  overflow:hidden;
}
.sw-alch__act:hover:not(:disabled){ background-image:url("assets/img/alcm_button_focus.png") }
.sw-alch__act:active:not(:disabled),
.sw-alch__act.is-pressed{
  background-image:url("assets/img/alcm_button_press.png");
  padding-top:1px;
}
.sw-alch__act:disabled{
  background-image:url("assets/img/alcm_button_disable.png");
  color:#6b6353;cursor:default;
}
.sw-alch__act:focus-visible{ outline:1px solid #ffe9a8;outline-offset:1px }

/* basılı tutma (oto tekrar) göstergesi */
.sw-alch__act::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:var(--hold,0%);
  background:#fff;opacity:.7;
}

/* ------------------------------------------------------------------- efekt
   alcm_effect_success.ddj / alcm_effect_fail_1.ddj — ikisi de 256x256 içinde
   4x4 = 16 kare (her kare 64x64). Kareler 2x büyütülüp mühür merkezine oturur.
   Mühür (DECO 13,27,128,128 + panel y=150) merkezi: 13+64=77, 177+64=241 */
.sw-alch__fx{
  position:absolute;left:77px;top:241px;width:128px;height:128px;
  margin:-64px 0 0 -64px;
  background-repeat:no-repeat;
  background-size:512px 512px;      /* 4x4 kare x 128px */
  background-position:0 0;
  opacity:0;pointer-events:none;
  image-rendering:auto;             /* efektler yumuşak kalsın */
}
/* alcm_effect_success dokusunun alfası her yerde 255 ve zemini saf siyah —
   oyun bunu toplamalı (additive) harmanlar, siyah "yok" demektir. Normal
   çizersen mührün üstüne siyah kare biner. screen tam da bunu yapar:
   siyah hiçbir şeyi değiştirmez, aydınlık kısımlar üste ışır.
   .sw-alch__stage'in transform'u yığın bağlamı kurduğu için harmanlama
   pencerenin içinde kalır, sayfa arka planına taşmaz. */
.sw-alch__fx.is-ok {
  background-image:url("assets/img/alcm_effect_success.png");
  mix-blend-mode:screen;
}
/* alcm_effect_fail_1 gerçek alfa kanalı taşır — normal harmanlanır. */
.sw-alch__fx.is-bad{
  background-image:url("assets/img/alcm_effect_fail_1.png");
  mix-blend-mode:normal;
}

/* sprite sayfası: X 4 kare (satır içi), Y 4 kere (satır atlama) */
.sw-alch__fx.is-play{
  opacity:1;
  animation:sw-alch-fx-x .24s steps(4) 4, sw-alch-fx-y .96s steps(4) 1;
}
@keyframes sw-alch-fx-x{ from{ background-position-x:0 } to{ background-position-x:-512px } }
@keyframes sw-alch-fx-y{ from{ background-position-y:0 } to{ background-position-y:-512px } }

/* pencere sarsıntısı */
.sw-alch.is-shake .sw-alch__stage{ animation:sw-alch-shake .3s }
@keyframes sw-alch-shake{
  0%,100%{ transform:scale(var(--scale)) translateX(0) }
  25%{ transform:scale(var(--scale)) translateX(-3px) }
  50%{ transform:scale(var(--scale)) translateX(3px) }
  75%{ transform:scale(var(--scale)) translateX(-2px) }
}

@media (prefers-reduced-motion:reduce){
  .sw-alch *{ animation:none !important }
}

/* =========================================================================
   OPSİYONEL KONTROL ÇUBUĞU — orijinal pencerede yoktur, penceren dışında durur.
   İstemiyorsan HTML'den .sw-alch-bar bloğunu sil.
   ========================================================================= */
.sw-alch-bar{
  display:flex;align-items:center;gap:14px;
  margin-top:10px;padding:6px 10px;
  font:11px/1.6 Tahoma,Verdana,sans-serif;color:#a8956f;
  background:linear-gradient(180deg,#2a2018,#171009);
  border:1px solid #4a3826;border-radius:3px;
}
.sw-alch-bar label{ display:flex;align-items:center;gap:5px;cursor:pointer }
.sw-alch-bar input[type=checkbox]{ accent-color:#8a6f42;margin:0 }
.sw-alch-bar b{ color:#efe6cd }
.sw-alch-bar input[type=range]{ accent-color:#8a6f42;width:90px }

/* ==================================================== DEMO SAYFASI ONLY == */
.demo-bg{
  min-height:100vh;margin:0;display:flex;gap:34px;align-items:flex-start;
  justify-content:center;flex-wrap:wrap;padding:36px 16px 60px;
  background:#0d0b09 radial-gradient(900px 500px at 50% 0%,#2a1f12,#0d0b09);
  background-attachment:fixed;
  font-family:Tahoma,Verdana,sans-serif;
}
.demo-col{ display:flex;flex-direction:column }