/* Evil Villager: ÇEVİR butonu koylu kafasi.
   Bundle'a dokunmadan uzerine yazar; kaldirmak icin index.html'deki
   ev-spin.css / ev-spin.js satirlarini silmek yeter. */
/* Evil Villager simgesi: kafatasi yerine cizgisel koylu kafasi (kare kafa,
   tek kalin kas, yanlarda gozler, kafanin altina tasan uzun burun). Bundle'daki lucide-skull yalnizca
   Evil Villager icin kullaniliyor. Orijinal cizgiler gizlenir, koylu maske ile
   yazi renginde boyanir; boylece menude secili olunca mor olur. */
svg.lucide-skull > * { visibility: hidden; }
svg.lucide-skull {
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='17' rx='2.5'/%3E%3Cpath d='M7 7h10'/%3E%3Ccircle cx='7.8' cy='10.6' r='1.25' fill='%23000' stroke='none'/%3E%3Ccircle cx='16.2' cy='10.6' r='1.25' fill='%23000' stroke='none'/%3E%3Cpath d='M11 9.5h2v11a1 1 0 0 1-2 0z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='17' rx='2.5'/%3E%3Cpath d='M7 7h10'/%3E%3Ccircle cx='7.8' cy='10.6' r='1.25' fill='%23000' stroke='none'/%3E%3Ccircle cx='16.2' cy='10.6' r='1.25' fill='%23000' stroke='none'/%3E%3Cpath d='M11 9.5h2v11a1 1 0 0 1-2 0z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* Minecraft tarzi piksel font: Monocraft (OFL, github.com/IdreesInc/Monocraft),
   sadece CEVIR/DEMO harflerine kirpildi */
@font-face {
  font-family: "EV Monocraft";
  src: url(/slots/evil-villager/monocraft-spin.woff2?v=7) format("woff2");
  font-display: swap;
}

.sl-spin.sl-spin {
  position: relative;
  width: 112px;
  height: 112px;
  border-radius: 10px;
  background: #7a4f3a url(/slots/evil-villager/spin-head.png?v=4) center / 100% 100% no-repeat;
  image-rendering: pixelated;
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-shadow: 2px 2px 0 #3b2418, -1px -1px 0 #3b2418, 1px -1px 0 #3b2418, -1px 1px 0 #3b2418;
  /* 3D: alttaki koyu kenar kafanin "kalinligi" */
  box-shadow:
    0 7px 0 #4a2c1f,
    0 7px 0 2px #2a1810,
    0 14px 22px rgba(0, 0, 0, .55),
    inset 0 0 0 2px rgba(0, 0, 0, .35),
    inset 0 3px 0 rgba(255, 255, 255, .18);
  transform: translateY(0);
  transition: transform .08s ease-out, box-shadow .08s ease-out, filter .15s;
}
.sl-spin.sl-spin > span:only-child {
  /* Koylunun alninin tam ortasi: alin, yuzun ust ~%36si (kaslara kadar) */
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 19%;
  transform: translate(-50%, -50%);
  font-family: "EV Monocraft", monospace;
  font-size: 17px;
  font-weight: 400;
  font-synthesis: none;
  line-height: 1;
  letter-spacing: 1px;
  /* letter-spacing son harften sonra da bosluk birakir; esitlemek icin */
  padding-left: 1px;
  white-space: nowrap;
  /* Duz beyaz, kenar cizgisi yok */
  color: #fff;
  -webkit-text-fill-color: #fff;
  -webkit-text-stroke: 0;
  text-shadow: none;
}
.sl-spin.sl-spin:hover:not(:disabled) { filter: brightness(1.1); }

/* Basma: kafa asagi iner, kalinlik kaybolur */
.sl-spin.sl-spin:active:not(:disabled),
.sl-spin.sl-spin.ev-press {
  transform: translateY(6px);
  box-shadow:
    0 1px 0 #4a2c1f,
    0 1px 0 2px #2a1810,
    0 4px 8px rgba(0, 0, 0, .5),
    inset 0 0 0 2px rgba(0, 0, 0, .45),
    inset 0 4px 10px rgba(0, 0, 0, .35);
  filter: brightness(.92);
}

.sl-spin.sl-spin.demo {
  background-color: #5d5760;
  filter: grayscale(.75) brightness(.9);
  box-shadow:
    0 7px 0 #3a363d,
    0 7px 0 2px #1f1c21,
    0 14px 22px rgba(0, 0, 0, .5),
    inset 0 0 0 2px rgba(0, 0, 0, .35);
}
.sl-spin.sl-spin.demo:active:not(:disabled),
.sl-spin.sl-spin.demo.ev-press {
  transform: translateY(6px);
  box-shadow: 0 1px 0 #3a363d, 0 1px 0 2px #1f1c21, 0 4px 8px rgba(0, 0, 0, .5), inset 0 4px 10px rgba(0, 0, 0, .35);
}
.sl-spin.sl-spin:disabled { filter: saturate(.55) brightness(.75); }
.sl-spin.sl-spin svg { position: relative; z-index: 1; }

/* Oyun kutusunun arkasinda soluk Minecraft koyu (Vibrant Visuals, minecraft.wiki).
   Ustteki koyu katman gorseli ~%25 gorunur birakir; makaralar yari seffaf
   oldugu icin arkadan hafifce sezilir. */
.sl-machine {
  background:
    linear-gradient(rgba(14, 14, 15, .74), rgba(14, 14, 15, .8)),
    #0e0e0f url(/slots/evil-villager/village-bg.webp?v=12) center / cover no-repeat;
}

/* Ayni koy, butun oyun panelinin arkasinda; ic kutu gibi koyu ve cok silik (~%5).
   Panelin kendi renkleri ustte katman olarak kaliyor. */
.game-frame.sl-frame {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, color-mix(in srgb, var(--panel-hi) 80%, black) 94%, transparent),
      color-mix(in srgb, color-mix(in srgb, var(--panel) 80%, black) 95%, transparent)),
    var(--panel) url(/slots/evil-villager/village-bg.webp?v=12) center / cover no-repeat;
}

/* Slot makinesinin arkasindan sagdan capraz bakan gozluklu koylu.
   .sl-body kendi katman baglamini kuruyor (z-index: 0); boylece z-index:-1
   verilen koylu makinenin arkasina ama panel zemininin onune dusuyor. */
.sl-body {
  position: relative;
  z-index: 0;
}
.sl-machine::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 118px;
  aspect-ratio: 202 / 337;
  background: url(/slots/evil-villager/peek-villager.png?v=17) center / contain no-repeat;
  pointer-events: none;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .55));
}
/* Sag orta: aynalanmis, saga yatik */
.sl-machine::before {
  right: -74px;
  top: 34%;
  transform: scaleX(-1) rotate(-20deg);
}
@media (width <= 720px) {
  /* Telefonda yan bosluk yok; sadece kenardan kafasi gorunsun */
  .sl-machine::before { width: 70px; right: -40px; }
}

/* Makara hucreleri esit yukseklikte kalsin. Seridin konumu "her hucre
   serit/n boyunda" varsayimiyla hesaplaniyor; ama flex ogesinin varsayilan
   min-height:auto'su buyuk sembol gorsellerinin hucreyi uzatmasina izin
   veriyordu (169px yerine 218px). Makara bu yuzden hedefin 0.3-1.7 sembol
   gerisinde durup, serit kisaltilinca "pat" diye yerine atliyordu. */
.sl-strip > .sl-cell {
  min-height: 0;
  overflow: hidden;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
}
.sl-strip > .sl-cell > * {
  min-width: 0;
  min-height: 0;
  max-height: 100%;
}

/* Makara hedefe olu durusla degil, biraz hizla varsin; kalan yumusak asim ve
   geri oturma ev-spin.js'te. Bundle gecisi satir ici veriyor, !important sart. */
.sl-strip {
  transition-timing-function: cubic-bezier(.15, .7, .4, .95) !important;
}

@media (width <= 720px) {
  .sl-spin.sl-spin { width: 96px; height: 96px; }
  .sl-spin.sl-spin > span:only-child { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .sl-spin.sl-spin { transition: none; }
}