/*
  oyun.css — arayuz.

  ── OLCEK
  Butun HUD olculeri `calc(Npx * var(--o))`.  `--o` JS'te pencere
  boyutundan hesaplaniyor (oyun.js/olcuAl).  Sebep: ekran goruntuleri
  1920x1080'de alindi ve bire bir ayni gorunmesi isteniyor; sabit px
  kucuk pencerede tasar, saf vw/vh ise buyuk ekranda arayuzu devlestirir.
  Tek carpan ikisini de cozuyor ve tarayici zoom'una dokunmuyor.

  ── Renkler
  Ekran goruntusundeki paletten alindi:
    yesil  #35e05a   kirmizi #ff4b3a   altin #ffc63f
    panel  #171b23   baslik  #0e1117   cerceve rgba(255,255,255,.08)

  ── z sirasi
    1  HUD
    5  paneller
    8  kasa/muayene tam ekran
    9  mac sonu, oylama, duraklatma
   10  giris, yukleme
*/

:root {
  --o: 1;

  /*
    ── YAZI TIPI: "AI gibi duruyor"un bir numarali sebebi
    `system-ui` her sitede ayni gorunuyor ve arayuze hicbir karakter
    katmiyor.  Roblox arayuzu agir, genis bir display sans kullaniyor
    (Builder Sans).  Windows'ta en yakin ve HER MAKINEDE kurulu olan
    karsiligi "Segoe UI Black".  Iki aile var ve ikisi de her yerde
    tutarli kullaniliyor:

      --y-baslik  baslik, sayi, dugme    (agirlik 900)
      --y-govde   etiket, aciklama       (agirlik 600-700)

    Tek aile + tek agirlik kullanmak da sablon hissi veriyor; hiyerarsi
    agirliktan geliyor.
  */
  --y-baslik: "Segoe UI Black", "Arial Black", "Segoe UI", system-ui, sans-serif;
  /*
    Govde ailesi TAM "Segoe UI" olmali, "Segoe UI Semibold" DEGIL:
    Semibold Windows'ta AYRI BIR AILE ve tek agirligi var.  Ona 900
    isteyince tarayici kalinlastirmiyor ve butun arayuz incecik
    kaliyordu.  Tam aileye agirlik verilince 600/700/900 dogru yuzlere
    dusuyor.
  */
  --y-govde: "Segoe UI", system-ui, sans-serif;

  /*
    ── PALET
    Ilk surumde hazir bir arayuz kutuphanesinin varsayilan renkleri
    kullanilmisti (#3b82f6, #22c55e, #a855f7...).  O renkler o kadar
    yaygin ki tek baslarina "sablon" sinyali veriyor.  Buradakiler
    referans goruntudeki piksellerden alindi: altin daha turuncu,
    yesil daha cimen, mor daha derin.
  */
  --yesil: #43d95f;
  --yesil-koyu: #1f9b3c;
  --kirmizi: #ff5040;
  --kirmizi-koyu: #a3160c;
  --altin: #ffc22e;
  --altin-koyu: #b8760a;
  --mor: #9b5cff;
  --mor-koyu: #5b21b6;

  /*
    ── PANELLER SAYDAM
    Referansta magaza paneli opak bir kutu DEGIL: arkasindaki 3B lobi
    bulanik olarak goruluyor.  Opak koyu bir dikdortgen, arayuzu
    oyunun uzerine yapistirilmis bir web sayfasi gibi gosteriyordu.
  */
  --panel: rgba(13, 16, 22, .88);
  --panel-ust: rgba(6, 8, 12, .94);
  --cerceve: rgba(255, 255, 255, .10);
  --metin: #f4f7fa;
  --sonuk: #a7b0bd;

  --sim-para: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='15' fill='%23c98209'/%3E%3Ccircle cx='16' cy='16' r='12.5' fill='%23ffc63f'/%3E%3Cpath d='M16 6.5v19' stroke='%23a8690a' stroke-width='2.4'/%3E%3Cpath d='M20.5 11.4c-1-1.7-2.7-2.4-4.6-2.4-2.6 0-4.6 1.4-4.6 3.5 0 4.7 9.4 2.6 9.4 7.4 0 2.2-2.1 3.7-4.8 3.7-2.2 0-4-.9-5-2.7' fill='none' stroke='%23a8690a' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --sim-cevher: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpolygon points='10,1 22,1 31,10 31,22 22,31 10,31 1,22 1,10' fill='%235b21b6'/%3E%3Cpolygon points='11.2,3.6 20.8,3.6 28.4,11.2 28.4,20.8 20.8,28.4 11.2,28.4 3.6,20.8 3.6,11.2' fill='%23a855f7'/%3E%3Cpath d='M16 7v18' stroke='%234c1d95' stroke-width='2.4'/%3E%3Cpath d='M20 11.6c-.9-1.5-2.4-2.1-4.1-2.1-2.3 0-4.1 1.2-4.1 3.1 0 4.2 8.4 2.3 8.4 6.6 0 2-1.9 3.3-4.3 3.3-2 0-3.6-.8-4.5-2.4' fill='none' stroke='%234c1d95' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --sim-kafatasi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 3C9.4 3 5 7.6 5 13.4c0 3.6 1.7 6 3.8 7.5V25a2 2 0 0 0 2 2h1.4v-3h2.2v3h3.2v-3h2.2v3H21a2 2 0 0 0 2-2v-4.1c2.1-1.5 4-3.9 4-7.5C27 7.6 22.6 3 16 3z' fill='%23e6ebf2'/%3E%3Cellipse cx='11.4' cy='14' rx='2.9' ry='3.3' fill='%23151a22'/%3E%3Cellipse cx='20.6' cy='14' rx='2.9' ry='3.3' fill='%23151a22'/%3E%3Cpath d='M16 17.6l-1.7 3.2h3.4z' fill='%23151a22'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  width: 100%; height: 100%;
  overflow: hidden;
  background: #05070b;
  color: var(--metin);
  font-family: var(--y-govde);
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

#sahne { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

/*
  ── KONTUR
  Referanstaki her HUD metninin arkasinda ince koyu bir kontur var.
  Konturu olmayan beyaz yazi acik zeminde eriyor ve arayuz "tarayici
  varsayilani" gibi duruyor.  `paint-order` SART: onsuz kontur harfin
  ustune binip metni sismanlatiyor.
*/
.kontur {
  -webkit-text-stroke: calc(3px * var(--o)) rgba(0, 0, 0, .78);
  paint-order: stroke fill;
}
.kontur-ince {
  -webkit-text-stroke: calc(2px * var(--o)) rgba(0, 0, 0, .70);
  paint-order: stroke fill;
}

.gizli { display: none !important; }

/* ══ Ortak dugme ═══════════════════════════════════════════════════
   Roblox arayuzundeki "kalin, dolgun, beyaz konturlu" dugme.  Ust
   kenardaki acik serit ve alt kenardaki koyu serit dugmeye kalinlik
   veriyor; duz gradyan yassi duruyordu.                              */

.dugme {
  position: relative;
  border: 0;
  border-radius: calc(6px * var(--o));
  padding: calc(11px * var(--o)) calc(26px * var(--o));
  font: 900 calc(24px * var(--o))/1 var(--y-baslik);
  color: #fff;
  letter-spacing: .3px;
  cursor: pointer;
  text-shadow: 0 calc(2px * var(--o)) 0 rgba(0, 0, 0, .45);
  box-shadow:
    inset 0 calc(2px * var(--o)) 0 rgba(255, 255, 255, .38),
    inset 0 calc(-3px * var(--o)) 0 rgba(0, 0, 0, .30),
    0 calc(3px * var(--o)) calc(10px * var(--o)) rgba(0, 0, 0, .45);
  transition: transform .07s, filter .12s;
}
.dugme:hover { filter: brightness(1.10); }
.dugme:active { transform: translateY(calc(2px * var(--o))); filter: brightness(.94); }
.dugme:disabled { filter: grayscale(.7) brightness(.6); cursor: default; }

.dugme.yesil   { background: linear-gradient(#5ff07c, #23a844); }
.dugme.kirmizi { background: linear-gradient(#e5513f, #a11a10); }
.dugme.mor     { background: linear-gradient(#b57bfb, #6d28d9); }
.dugme.gri     { background: linear-gradient(#4b5361, #262c36); }
.dugme.buyuk   { padding: calc(15px * var(--o)) calc(58px * var(--o)); font-size: calc(34px * var(--o)); }

/*
  OYNA lobinin TEK ana eylemi: belirgin sekilde buyuk ve surekli
  hafif bir nabizla "canli".  Hareket cok kucuk (%3) — daha fazlasi
  bir sure sonra rahatsiz ediyor, azi ise fark edilmiyor.
*/
#btn-oyna {
  padding: calc(20px * var(--o)) calc(96px * var(--o));
  font-size: calc(46px * var(--o));
  letter-spacing: calc(2px * var(--o));
  animation: oynaNabiz 2.2s ease-in-out infinite;
}
#btn-oyna:hover { animation-play-state: paused; transform: scale(1.04); }
@keyframes oynaNabiz {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

/* Yesil dugmelerin uzerindeki ince kare doku (ekran goruntusunde var) */
.dugme.yesil::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background-image:
    linear-gradient(rgba(255, 255, 255, .10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .10) 1px, transparent 1px);
  background-size: calc(11px * var(--o)) calc(11px * var(--o));
  pointer-events: none;
}

/* ══ Para / cevher pulu ════════════════════════════════════════════ */

.sim {
  display: inline-block;
  width: calc(28px * var(--o)); height: calc(28px * var(--o));
  background-size: contain; background-repeat: no-repeat; background-position: center;
  flex: 0 0 auto;
}
.sim-para   { background-image: var(--sim-para); }
.sim-cevher { background-image: var(--sim-cevher); }

/*
  Referansta pulun icindeki SAYI para renginde (altin sari), beyaz
  degil.  Beyaz sayi pulu bir "form alani" gibi gosteriyordu; renkli
  sayi onu oyun parasi yapiyor.
*/
.pul {
  display: flex; align-items: center; gap: calc(8px * var(--o));
  background: rgba(3, 4, 7, .92);
  border: calc(2px * var(--o)) solid var(--altin);
  border-radius: calc(4px * var(--o));
  padding: calc(5px * var(--o)) calc(16px * var(--o));
  min-width: calc(158px * var(--o));
  font: 900 calc(25px * var(--o))/1 var(--y-baslik);
  box-shadow: inset 0 0 calc(18px * var(--o)) rgba(255, 194, 46, .12);
}
.pul.cevher {
  border-color: var(--mor);
  padding-right: calc(4px * var(--o));
  box-shadow: inset 0 0 calc(18px * var(--o)) rgba(155, 92, 255, .14);
}
.pul b { color: var(--altin); letter-spacing: .5px; }
.pul.cevher b { color: #c9a6ff; }
.pul button {
  margin-left: auto;
  background: linear-gradient(#a06bf5, #6d28d9);
  border: 0; color: #fff;
  font: 900 calc(24px * var(--o))/1 var(--y-baslik);
  width: calc(34px * var(--o)); height: calc(34px * var(--o));
  border-radius: calc(4px * var(--o));
  cursor: pointer;
}

/* ══════════════════════════════════════════════════════════════════
   LOBI
══════════════════════════════════════════════════════════════════ */

#lobi-ui { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
#lobi-ui > * { pointer-events: auto; }

#ust-para {
  position: absolute; top: calc(14px * var(--o)); left: 50%;
  transform: translateX(-50%);
  display: flex; gap: calc(14px * var(--o));
}

#seviye-kutu {
  position: absolute;
  /*
    ── UST SERIDIN ALTINDA KALMALI
    Konum saf olcekliydi (74px * --o).  Ust seritteki dugmelerin
    dokunma hedefi 40px'lik bir TABANA sahip ve bu taban --o ile
    KUCULMUYOR: yatay telefonda (--o = 0.52) serit 47px'e kadar
    iniyor, seviye kutusu ise 38px'e cikip icine giriyordu — "Seviye"
    yazisi cark ve hediye dugmelerinin uzerine biniyordu.
    `max()` masaustunde ayni degeri, kisa ekranda seridin gercek
    altini veriyor.
  */
  top: max(calc(74px * var(--o)), calc(14px * var(--o) + 46px));
  left: 50%;
  transform: translateX(-50%);
  width: calc(440px * var(--o));
  text-align: center;
}
#seviye-kutu > b {
  -webkit-text-stroke: calc(3px * var(--o)) rgba(0, 0, 0, .75);
  paint-order: stroke fill;
  display: block;
  font: 900 calc(27px * var(--o))/1.2 var(--y-baslik);
  text-shadow: 0 calc(2px * var(--o)) calc(4px * var(--o)) rgba(0, 0, 0, .8);
}
.xp-cubuk {
  position: relative;
  height: calc(11px * var(--o));
  margin: calc(9px * var(--o)) calc(30px * var(--o)) calc(4px * var(--o)) 0;
  background: #0a0c10;
  border-radius: calc(6px * var(--o));
  box-shadow: 0 0 0 calc(2px * var(--o)) rgba(0, 0, 0, .45);
}
/* `>` SART: odul simgesi de `.xp-cubuk` icinde bir <i> ve bu kural
   onu da mavi gradyanla boyuyordu (madeni para yerine mavi kare). */
.xp-cubuk > i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #7dd3fc, #38bdf8);
  border-radius: inherit;
  transition: width .4s;
}
.xp-odul {
  position: absolute; right: calc(-34px * var(--o)); top: calc(-13px * var(--o));
  display: flex; flex-direction: column; align-items: center;
}
.xp-odul .sim { width: calc(34px * var(--o)); height: calc(34px * var(--o)); }
.xp-odul b {
  font: 900 calc(15px * var(--o))/1 var(--y-baslik);
  color: var(--altin);
  margin-top: calc(-7px * var(--o));
  text-shadow: 0 calc(1px * var(--o)) calc(3px * var(--o)) #000;
}
#seviye-kutu small {
  display: block;
  font: 600 calc(17px * var(--o))/1 var(--y-baslik);
  color: rgba(255, 255, 255, .9);
  text-shadow: 0 calc(2px * var(--o)) calc(3px * var(--o)) rgba(0, 0, 0, .85);
}

/* ── Günlük görevler ─────────────────────────────────────────────── */

#gorevler {
  position: absolute; left: 0; top: 30%;
  width: calc(370px * var(--o));
}
#gorevler h3 {
  -webkit-text-stroke: calc(3px * var(--o)) rgba(0, 0, 0, .75);
  paint-order: stroke fill;
  margin: 0 0 calc(8px * var(--o)) calc(10px * var(--o));
  font: 900 calc(24px * var(--o))/1.2 var(--y-baslik);
  text-shadow: 0 calc(2px * var(--o)) calc(4px * var(--o)) rgba(0, 0, 0, .85);
}
#gorevler h3 em { font-style: normal; color: rgba(255, 255, 255, .82); }
#gorev-liste { list-style: none; margin: 0; padding: 0; }
/*
  Referansta gorev satiri OPAK BIR CUBUK DEGIL: arkasindaki lobi
  goruluyor ve ilerleme, satirin solundan saga dogru SONEN yumusak bir
  yesil parilti.  Ilk surumde ilerleme satiri boyunca dolan mavi bir
  cubuktu — o hali bir web ilerleme cubugu gibi duruyordu.
*/
#gorev-liste li {
  position: relative;
  height: calc(56px * var(--o));
  margin-bottom: calc(9px * var(--o));
  background: linear-gradient(rgba(12, 15, 20, .80), rgba(6, 8, 11, .88));
  backdrop-filter: blur(calc(3px * var(--o)));
  -webkit-backdrop-filter: blur(calc(3px * var(--o)));
  border: 0;
  box-shadow: inset 0 calc(1px * var(--o)) 0 rgba(255, 255, 255, .10);
  display: flex; align-items: center;
  cursor: default;
}
#gorev-liste li .dolgu {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  /* sag kenari SERT degil: renk saga dogru soneyim diye maskeli */
  background: linear-gradient(90deg,
    rgba(67, 217, 95, .62) 0%,
    rgba(67, 217, 95, .34) 55%,
    rgba(67, 217, 95, 0) 100%);
  transition: width .4s;
}
#gorev-liste li.tamam {
  background: linear-gradient(rgba(16, 32, 20, .84), rgba(8, 18, 11, .90));
}
#gorev-liste li.tamam .dolgu {
  background: linear-gradient(90deg,
    rgba(67, 217, 95, .72) 0%,
    rgba(67, 217, 95, .42) 60%,
    rgba(67, 217, 95, 0) 100%);
}
#gorev-liste li b {
  position: relative;
  padding-left: calc(16px * var(--o));
  padding-right: calc(6px * var(--o));
  font: 900 calc(21px * var(--o))/1 var(--y-baslik);
  text-shadow: 0 calc(2px * var(--o)) calc(3px * var(--o)) rgba(0, 0, 0, .8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Odul rozetinin kutusunun DISINA tasmasi ekran goruntusundeki
   gorunum: madeni para satirin sag kenarina biniyor.               */
#gorev-liste li {
  overflow: visible;
}
#gorev-liste li .dolgu { z-index: 0; }
#gorev-liste li b, #gorev-liste li .odul, #gorev-liste li button { z-index: 1; }
#gorev-liste li .odul {
  position: relative;
  margin-left: auto;
  margin-right: calc(-10px * var(--o));
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center;
}
#gorev-liste li .odul i.sim { width: calc(46px * var(--o)); height: calc(46px * var(--o)); }
#gorev-liste li .odul span {
  font: 900 calc(20px * var(--o))/1 var(--y-baslik);
  color: #fff;
  margin-top: calc(-13px * var(--o));
  -webkit-text-stroke: calc(3px * var(--o)) rgba(0, 0, 0, .8);
  paint-order: stroke fill;
  text-shadow: 0 calc(1px * var(--o)) calc(3px * var(--o)) #000,
               0 0 calc(3px * var(--o)) #000;
}
#gorev-liste li button {
  position: relative; margin-left: auto; margin-right: calc(8px * var(--o));
  background: linear-gradient(#5ff07c, #23a844);
  border: 0; border-radius: calc(4px * var(--o));
  color: #fff; cursor: pointer;
  font: 900 calc(16px * var(--o))/1 var(--y-baslik);
  padding: calc(8px * var(--o)) calc(14px * var(--o));
}

/* ── Alt: mod şeridi + OYNA + menü ───────────────────────────────── */

#lobi-alt {
  position: absolute; left: 50%; bottom: calc(16px * var(--o));
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  gap: calc(12px * var(--o));
}

/* Takim yuvasi — ekran goruntusundeki avatar + "+" ikilisi */
#takim-yuva {
  display: flex; gap: calc(8px * var(--o));
  align-items: flex-end;
}
#takim-yuva .yuva {
  width: calc(58px * var(--o)); height: calc(58px * var(--o));
  background: rgba(10, 12, 16, .9);
  border: 0;
  border-bottom: calc(4px * var(--o)) solid var(--yesil);
  border-radius: calc(3px * var(--o));
  overflow: hidden;
  padding: 0;
}
#takim-yuva .ekle {
  border-bottom-color: rgba(255, 255, 255, .25);
  color: rgba(255, 255, 255, .75);
  font: 900 calc(30px * var(--o))/1 var(--y-baslik);
  cursor: pointer;
}

#mod-serit { display: flex; gap: calc(10px * var(--o)); }

/*
  Mod kutulari BUYUK: dokunmatikte 40x40 dp altindaki hedefler
  isabetsiz oluyor ve bu seritte dort-bes hedef yan yana.
*/
.mod-kutu {
  min-width: calc(96px * var(--o));
  background: rgba(10, 12, 16, .88);
  border: calc(2px * var(--o)) solid rgba(255, 255, 255, .14);
  border-radius: calc(6px * var(--o));
  color: var(--sonuk);
  cursor: pointer;
  padding: calc(12px * var(--o)) calc(18px * var(--o));
  display: flex; flex-direction: column; align-items: center;
  gap: calc(2px * var(--o));
  transition: transform .12s, border-color .12s, background .12s;
}
.mod-kutu b { font: 900 calc(27px * var(--o))/1 var(--y-baslik); }
.mod-kutu:hover { transform: translateY(calc(-2px * var(--o))); }
.mod-kutu.etkin {
  color: #fff;
  border-color: var(--yesil);
  background: rgba(24, 60, 34, .92);
  box-shadow: 0 0 calc(16px * var(--o)) rgba(67, 217, 95, .38);
}
.mod-kutu.zar b { font-size: calc(18px * var(--o)); }
.zar-sim {
  width: calc(32px * var(--o)); height: calc(32px * var(--o));
  fill: currentColor;
  color: #fff;
}
.mod-kutu.zar.etkin .zar-sim { animation: zarDon 1.6s ease-in-out infinite; }
@keyframes zarDon {
  0%, 70%, 100% { transform: rotate(0deg); }
  78% { transform: rotate(-22deg) scale(1.12); }
  86% { transform: rotate(20deg) scale(1.12); }
  93% { transform: rotate(-8deg); }
}

#alt-menu { display: flex; gap: calc(11px * var(--o)); }
#alt-menu button {
  width: calc(126px * var(--o));
  background: rgba(10, 12, 16, .9);
  border: 0;
  border-bottom: calc(4px * var(--o)) solid transparent;
  border-radius: calc(4px * var(--o));
  color: #fff; cursor: pointer;
  padding: calc(11px * var(--o)) calc(4px * var(--o)) calc(8px * var(--o));
  display: flex; flex-direction: column; align-items: center; gap: calc(5px * var(--o));
}
/* Cizgi ikon varsayilani; dolu parcalar `.dolu` ile isaretli.  Tek bir
   `fill: currentColor` kurali oznitelikteki `fill="none"` degerini
   eziyordu ve butun ikonlar dolu lekelere donuyordu. */
#alt-menu button svg {
  width: calc(44px * var(--o)); height: calc(44px * var(--o));
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#alt-menu button svg .dolu { fill: currentColor; stroke: none; }
#alt-menu button b { font: 600 calc(21px * var(--o))/1 var(--y-baslik); }

/*
  DIL DUGMESI: oteki dort dugmede 44px'lik bir SVG var, burada onun
  yerine bayrak duruyor.  Yuva SVG ile ayni olcude, yoksa bes dugmenin
  ikonlari farkli yukseklikte hizalaniyor ve serit egri gorunuyordu.
*/
#dil-bayrak {
  width: calc(44px * var(--o)); height: calc(44px * var(--o));
  display: flex; align-items: center; justify-content: center;
}
#dil-bayrak img {
  width: calc(40px * var(--o)); height: auto;
  border-radius: calc(3px * var(--o));
  box-shadow: 0 0 0 calc(1px * var(--o)) rgba(255, 255, 255, .22);
}
/* Dil adlari uzun ("Русский"); oteki etiketlerle ayni satirda kalsin. */
#dil-etiket { white-space: nowrap; }
#alt-menu button:hover { background: rgba(26, 32, 42, .95); }
#alt-menu button.etkin { border-bottom-color: var(--yesil); }

/* `#lobi-marka` KALDIRILDI: oyun adi artik hicbir yerde YAZI degil
   (sahibinin karari); kimlik yukleme perdesindeki kapak gorseli. */

/* ══════════════════════════════════════════════════════════════════
   PANELLER
══════════════════════════════════════════════════════════════════ */

.panel {
  position: fixed; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .28);
}
/*
  Pencere BULANIK CAM.  Referansta panelin arkasindaki 3B lobi
  goruluyor; opak bir dikdortgen arayuzu "oyunun uzerine yapistirilmis
  web sayfasi" gibi gosteriyordu.  `backdrop-filter` desteklenmeyen bir
  ortamda `--panel`in kendi opakligi (.88) yine okunakli birakiyor.
*/
.panel .pencere {
  width: min(calc(1030px * var(--o)), 96vw);
  max-height: 86vh;
  display: flex; flex-direction: column;
  background: var(--panel);
  backdrop-filter: blur(calc(14px * var(--o))) saturate(1.15);
  -webkit-backdrop-filter: blur(calc(14px * var(--o))) saturate(1.15);
  border: calc(1px * var(--o)) solid var(--cerceve);
  border-radius: calc(5px * var(--o));
  box-shadow:
    inset 0 calc(1px * var(--o)) 0 rgba(255, 255, 255, .10),
    0 calc(22px * var(--o)) calc(60px * var(--o)) rgba(0, 0, 0, .70);
  animation: acil .16s ease-out;
  overflow: hidden;
}
.panel .pencere.dar { width: min(calc(560px * var(--o)), 94vw); }
.panel .pencere.genis { width: min(calc(1350px * var(--o)), 97vw); }

@keyframes acil { from { transform: scale(.94); opacity: 0; } }

/*
  ORTALANMIS elemanlarin kendi kare anahtarlari var.

  Iki tuzak birden vardi:
  1. `transform` TEK bir ozellik.  `@keyframes acil` icindeki
     `scale(.94)` elemanin kendi `translate(-50%,-50%)` degerini
     TAMAMEN eziyor; animasyon suresince eleman ekranin yanlis
     yerine sicriyordu (TUR KAZANILDI yazisi saga kayik ciktı).
  2. Kare anahtarindaki `opacity: 0`, animasyon ilerlemezse (arka
     plandaki sekme, dusuk guc modu) elemani KALICI gorunmez
     birakiyor.  Bu yuzden buradaki animasyonlar YALNIZ olcek
     degistiriyor; gorunurluk hicbir animasyona bagli degil.
*/
@keyframes belirX  { from { transform: translateX(-50%) scale(.94); } }
@keyframes belirXY { from { transform: translate(-50%, -50%) scale(.92); } }

.panel header {
  display: flex; align-items: center; gap: calc(12px * var(--o));
  padding: calc(10px * var(--o)) calc(14px * var(--o));
  background:
    linear-gradient(rgba(255, 255, 255, .05), rgba(255, 255, 255, 0)),
    var(--panel-ust);
  border-bottom: calc(1px * var(--o)) solid var(--cerceve);
}
.panel header .baslik-sim {
  width: calc(46px * var(--o)); height: calc(46px * var(--o));
  fill: #fff; flex: 0 0 auto;
}
.panel header h2 {
  margin: 0 auto 0 0;
  font: 900 calc(36px * var(--o))/1 var(--y-baslik);
}
.panel header .pul { min-width: calc(180px * var(--o)); }
.panel .kapat {
  width: calc(52px * var(--o)); height: calc(46px * var(--o));
  background: linear-gradient(#e5513f, #a11a10);
  border: 0; border-radius: calc(4px * var(--o));
  color: #fff; cursor: pointer;
  font: 900 calc(28px * var(--o))/1 var(--y-baslik);
  box-shadow: inset 0 calc(2px * var(--o)) 0 rgba(255, 255, 255, .3);
}
.panel .govde {
  padding: calc(14px * var(--o));
  overflow-y: auto;
  overflow-x: hidden;
}
.panel .orta-govde {
  display: flex; flex-direction: column; align-items: center;
  gap: calc(14px * var(--o));
  padding: calc(28px * var(--o));
}
.panel .govde::-webkit-scrollbar { width: calc(10px * var(--o)); }
.panel .govde::-webkit-scrollbar-thumb { background: #39414f; border-radius: calc(5px * var(--o)); }

/* ── Mağaza: kasa taşıyıcı ───────────────────────────────────────── */

.kasa-satir { display: flex; align-items: center; gap: calc(14px * var(--o)); }
.kasa-ok {
  width: calc(56px * var(--o)); height: calc(62px * var(--o));
  background: linear-gradient(#e5513f, #a11a10);
  border: 0; border-radius: calc(4px * var(--o));
  color: #fff; cursor: pointer;
  font: 900 calc(30px * var(--o))/1 var(--y-baslik);
}
.kasa-orta { flex: 1; text-align: center; }
.kasa-orta h3 {
  margin: 0 0 calc(6px * var(--o));
  font: 900 calc(34px * var(--o))/1 var(--y-baslik);
}
.kasa-gorsel {
  width: calc(210px * var(--o)); height: calc(156px * var(--o));
  margin: 0 auto;
}

.icerik-baslik {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: calc(14px * var(--o)) 0 calc(8px * var(--o));
  font: 600 calc(22px * var(--o))/1 var(--y-baslik);
  color: #cdd5df;
}
/*
  Referansta kartlar arasinda BOSLUK yok: hepsi tek bir seride ve
  aralarinda sac teli kalinliginda bir ayirici var.  Bosluklu izgara
  arayuzu "kart listesi" gibi gosteriyordu; bitisik serit onu vitrin
  yapiyor.
*/
.icerik-izgara {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: calc(1px * var(--o));
  background: rgba(255, 255, 255, .07);
  border-top: calc(1px * var(--o)) solid rgba(255, 255, 255, .10);
}
.esya {
  position: relative;
  background: linear-gradient(rgba(58, 68, 82, .55), rgba(10, 13, 18, .85));
  border-bottom: calc(4px * var(--o)) solid #555;
  cursor: pointer;
  overflow: hidden;
}
.esya:hover { background: linear-gradient(rgba(78, 90, 108, .60), rgba(14, 18, 24, .88)); }
.esya canvas { display: block; width: 100%; height: auto; }
.esya .sans {
  position: absolute; top: calc(5px * var(--o)); right: calc(7px * var(--o));
  font: 900 calc(18px * var(--o))/1 var(--y-baslik);
  -webkit-text-stroke: calc(2.5px * var(--o)) rgba(0, 0, 0, .8);
  paint-order: stroke fill;
}
.esya .fxrozet {
  position: absolute; top: calc(4px * var(--o)); left: calc(6px * var(--o));
  font: 900 calc(14px * var(--o))/1 var(--y-baslik);
  color: #fff; background: linear-gradient(90deg, #f0f, #0ff);
  padding: calc(2px * var(--o)) calc(5px * var(--o));
  border-radius: calc(3px * var(--o));
}
.esya-ad {
  padding: calc(4px * var(--o)) calc(6px * var(--o)) calc(8px * var(--o));
}
.esya-ad b { display: block; font: 900 calc(17px * var(--o))/1.2 var(--y-baslik); }
.esya-ad em { display: block; font: 600 calc(15px * var(--o))/1.2 var(--y-baslik); color: var(--sonuk); font-style: normal; }
.esya.kilitli canvas { filter: brightness(.35) grayscale(.8); }

.esya-alt {
  display: flex; align-items: center; justify-content: center;
  gap: calc(16px * var(--o));
  margin-top: calc(14px * var(--o));
}
.fiyat {
  display: flex; align-items: center; gap: calc(7px * var(--o));
  background: rgba(8, 10, 14, .85);
  border: calc(2px * var(--o)) solid var(--altin);
  border-radius: calc(5px * var(--o));
  padding: calc(7px * var(--o)) calc(18px * var(--o));
  font: 900 calc(25px * var(--o))/1 var(--y-baslik);
  color: #fff; cursor: pointer;
}
.fiyat.cevher { border-color: #7c3aed; }
.fiyat:disabled { opacity: .45; cursor: default; }

.sahip-yazi {
  text-align: center; margin: calc(12px * var(--o)) 0 calc(4px * var(--o));
  font: 900 calc(24px * var(--o))/1 var(--y-baslik);
}

/* ── Mağaza: özel satırlar ───────────────────────────────────────── */

.ozel-baslik {
  text-align: center; margin: calc(20px * var(--o)) 0 calc(10px * var(--o));
  font: 900 calc(30px * var(--o))/1 var(--y-baslik);
}
.ozel {
  position: relative;
  display: flex; align-items: center; gap: calc(14px * var(--o));
  margin-bottom: calc(12px * var(--o));
  padding: calc(12px * var(--o)) calc(16px * var(--o));
  border-bottom: calc(4px * var(--o)) solid var(--altin);
  border-radius: calc(3px * var(--o));
  overflow: hidden;
}
.ozel .rozet {
  position: absolute; top: calc(9px * var(--o)); left: calc(12px * var(--o));
  background: #6d28d9; color: #fff;
  font: 900 calc(15px * var(--o))/1 var(--y-baslik);
  padding: calc(4px * var(--o)) calc(9px * var(--o));
  border-radius: calc(3px * var(--o));
}
.ozel .metin { min-width: calc(250px * var(--o)); padding-top: calc(26px * var(--o)); }
.ozel .metin b { display: block; font: 900 calc(32px * var(--o))/1.1 var(--y-baslik); }
.ozel .metin em { display: block; font: 900 calc(17px * var(--o))/1.4 var(--y-baslik); font-style: normal; color: var(--altin); }
.ozel .sure {
  display: inline-flex; align-items: center; gap: calc(6px * var(--o));
  margin-top: calc(10px * var(--o));
  background: rgba(0, 0, 0, .55);
  padding: calc(4px * var(--o)) calc(12px * var(--o));
  border-radius: calc(3px * var(--o));
  font: 900 calc(17px * var(--o))/1 var(--y-baslik);
}
.ozel canvas { flex: 1; max-width: calc(420px * var(--o)); height: auto; }
.ozel .stok { font: 900 calc(21px * var(--o))/1 var(--y-baslik); }

/* ── Bıçak envanteri ─────────────────────────────────────────────── */

.suzgec { display: flex; gap: calc(6px * var(--o)); }
.suzgec button {
  width: calc(46px * var(--o)); height: calc(44px * var(--o));
  border: 0; border-radius: calc(4px * var(--o));
  color: #fff; cursor: pointer;
  font: 900 calc(24px * var(--o))/1 var(--y-baslik);
}
.suzgec .mor { background: linear-gradient(#a06bf5, #6d28d9); }
.suzgec .yesil2 { background: linear-gradient(#5ff07c, #23a844); }

#bicak-ara {
  flex: 0 0 calc(400px * var(--o));
  background: #0a0d12;
  border: calc(2px * var(--o)) solid var(--cerceve);
  border-radius: calc(4px * var(--o));
  color: #fff;
  padding: calc(10px * var(--o)) calc(14px * var(--o));
  font: 600 calc(22px * var(--o))/1 var(--y-baslik);
  outline: none;
}

.envanter-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(200px * var(--o)), 1fr));
  gap: calc(10px * var(--o));
  align-content: start;
  min-height: calc(300px * var(--o));
}
.envanter-izgara .esya { border-radius: calc(3px * var(--o)); }
.esya .kusanik {
  position: absolute; top: calc(7px * var(--o)); left: calc(7px * var(--o));
  width: calc(16px * var(--o)); height: calc(16px * var(--o));
  border-radius: 50%;
  background: var(--yesil);
  box-shadow: 0 0 calc(10px * var(--o)) var(--yesil);
}
.esya .adet {
  position: absolute; bottom: calc(46px * var(--o)); right: calc(7px * var(--o));
  font: 900 calc(16px * var(--o))/1 var(--y-baslik);
  color: #fff; text-shadow: 0 0 calc(4px * var(--o)) #000;
}

/* ── Sunucular ───────────────────────────────────────────────────── */

.sunucu-satir {
  display: flex; align-items: center; gap: calc(12px * var(--o));
  padding: calc(10px * var(--o)) calc(14px * var(--o));
  margin-bottom: calc(8px * var(--o));
  background: #10141b;
  border: calc(2px * var(--o)) solid var(--cerceve);
  border-radius: calc(4px * var(--o));
}
.sunucu-satir .mod {
  font: 900 calc(26px * var(--o))/1 var(--y-baslik);
  min-width: calc(72px * var(--o));
}
.sunucu-satir .vs {
  display: flex; align-items: center; gap: calc(8px * var(--o));
  font: 900 calc(20px * var(--o))/1 var(--y-baslik);
  color: var(--sonuk);
}
.sunucu-satir .yuz {
  width: calc(38px * var(--o)); height: calc(38px * var(--o));
  border-radius: calc(3px * var(--o));
  border-bottom: calc(3px * var(--o)) solid var(--yesil);
  background: #2b3240;
}
.sunucu-satir .yuz.k { border-bottom-color: var(--kirmizi); }
.sunucu-satir .durum { margin-left: auto; color: var(--sonuk); font: 600 calc(19px * var(--o))/1 var(--y-baslik); }

/* ── Savaş bileti ────────────────────────────────────────────────── */

.bilet-ust {
  display: flex; align-items: center; gap: calc(18px * var(--o));
  padding: calc(14px * var(--o));
  background: linear-gradient(90deg, #1b2333, #2b1f3d);
  border-bottom: calc(2px * var(--o)) solid var(--cerceve);
}
#bilet-seviye { font: 900 calc(38px * var(--o))/1 var(--y-baslik); }
.bilet-gorev {
  background: rgba(0, 0, 0, .55);
  padding: calc(9px * var(--o)) calc(16px * var(--o));
  border-radius: calc(4px * var(--o));
  font: 600 calc(20px * var(--o))/1 var(--y-baslik);
}
.bilet-kilit { margin-left: auto; display: flex; align-items: center; gap: calc(12px * var(--o)); }
.bilet-kilit span { text-align: right; }
.bilet-kilit b { display: block; font: 900 calc(26px * var(--o))/1.2 var(--y-baslik); }
.bilet-kilit em { display: block; font: 900 calc(20px * var(--o))/1.2 var(--y-baslik); font-style: normal; color: var(--altin); }

/* Premium acikken kilit blogunun yerini alan rozet. */
.bilet-etkin {
  margin-left: auto;
  padding: calc(6px * var(--o)) calc(16px * var(--o));
  border-radius: calc(5px * var(--o));
  background: linear-gradient(#7b46d6, #4c2394);
  box-shadow: inset 0 calc(1px * var(--o)) 0 rgba(255, 255, 255, .28);
  font: 900 calc(22px * var(--o))/1 var(--y-baslik);
  color: #fff;
  letter-spacing: calc(.5px * var(--o));
  white-space: nowrap;
}

.bilet-govde { display: flex; gap: calc(4px * var(--o)); overflow-x: auto; }
.bilet-sutun {
  flex: 0 0 calc(150px * var(--o));
  display: flex; flex-direction: column; gap: calc(4px * var(--o));
}
.bilet-sutun .sv {
  text-align: center;
  padding: calc(6px * var(--o)) 0;
  background: #0f1319;
  border-top: calc(3px * var(--o)) solid #2a323d;
  font: 900 calc(22px * var(--o))/1 var(--y-baslik);
}
.bilet-sutun.acik .sv { border-top-color: var(--yesil); color: var(--yesil); }
.bilet-hucre {
  position: relative;
  height: calc(150px * var(--o));
  background: #0c0f14;
  border-bottom: calc(4px * var(--o)) solid #2a323d;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(4px * var(--o));
  cursor: default;
}
.bilet-hucre.premium { border-bottom-color: var(--altin); }
.bilet-hucre.alinabilir { cursor: pointer; box-shadow: inset 0 0 0 calc(2px * var(--o)) var(--yesil); }
.bilet-hucre.alindi::after {
  content: '✓'; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .68);
  color: var(--yesil);
  font: 900 calc(52px * var(--o))/1 var(--y-baslik);
}
.bilet-hucre b { font: 900 calc(26px * var(--o))/1 var(--y-baslik); }
.bilet-hucre em {
  font: 900 calc(14px * var(--o))/1 var(--y-baslik); font-style: normal;
  color: var(--altin); letter-spacing: .5px;
}
.bilet-hucre.premium em { color: var(--mor); }
.bilet-hucre .sim { width: calc(64px * var(--o)); height: calc(64px * var(--o)); }
.bilet-hucre canvas { width: 90%; height: auto; }

/* ── Ayarlar ─────────────────────────────────────────────────────── */

.ayar-satir {
  display: flex; align-items: center; gap: calc(14px * var(--o));
  padding: calc(11px * var(--o)) 0;
  border-bottom: calc(1px * var(--o)) solid var(--cerceve);
  font: 600 calc(22px * var(--o))/1 var(--y-baslik);
}
.ayar-satir span { flex: 1; }
.ayar-satir input[type=range] { flex: 0 0 calc(220px * var(--o)); accent-color: var(--yesil); }
.ayar-satir input[type=checkbox] { width: calc(26px * var(--o)); height: calc(26px * var(--o)); accent-color: var(--yesil); }
.diller { display: flex; gap: calc(8px * var(--o)); }
.diller button {
  display: flex; align-items: center; gap: calc(7px * var(--o));
  background: #10141b;
  border: calc(2px * var(--o)) solid var(--cerceve);
  border-radius: calc(4px * var(--o));
  color: #fff; cursor: pointer;
  padding: calc(7px * var(--o)) calc(13px * var(--o));
  font: 600 calc(19px * var(--o))/1 var(--y-baslik);
}
.diller button.etkin { border-color: var(--yesil); background: #16301f; }

/* ══════════════════════════════════════════════════════════════════
   KASA ACMA + MUAYENE
══════════════════════════════════════════════════════════════════ */

#kasa-ekran {
  position: fixed; inset: 0; z-index: 8;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(18px * var(--o));
  background: rgba(4, 6, 9, .82);
}
#kasa-rulet {
  position: relative;
  width: min(calc(960px * var(--o)), 94vw);
  height: calc(200px * var(--o));
  overflow: hidden;
  background: #10141b;
  border: calc(2px * var(--o)) solid var(--cerceve);
  border-radius: calc(4px * var(--o));
}
#rulet-serit {
  position: absolute; top: 0; left: 0; height: 100%;
  display: flex; gap: calc(6px * var(--o));
  will-change: transform;
}
#rulet-serit .kutu {
  position: relative;
  flex: 0 0 calc(280px * var(--o));
  height: 100%;
  background: linear-gradient(#242c37, #141920);
  border-bottom: calc(6px * var(--o)) solid #555;
  display: flex; align-items: center; justify-content: center;
}
#rulet-serit .kutu canvas { width: 92%; height: auto; }
#rulet-igne {
  position: absolute; left: 50%; top: 0; bottom: 0;
  width: calc(3px * var(--o));
  margin-left: calc(-1.5px * var(--o));
  background: #fff;
  box-shadow: 0 0 calc(14px * var(--o)) rgba(255, 255, 255, .9);
}

#kasa-odul {
  position: fixed; inset: 0; z-index: 8;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(10px * var(--o));
  background:
    linear-gradient(rgba(14, 18, 24, .80), rgba(14, 18, 24, .80)),
    repeating-linear-gradient(0deg, #3a424e 0 calc(58px * var(--o)), #2e3540 calc(58px * var(--o)) calc(116px * var(--o))),
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 calc(58px * var(--o)), transparent calc(58px * var(--o)) calc(116px * var(--o)));
}
#odul-gorsel canvas, #muayene-gorsel canvas {
  width: min(calc(940px * var(--o)), 92vw); height: auto;
  filter: drop-shadow(0 calc(18px * var(--o)) calc(30px * var(--o)) rgba(0, 0, 0, .7));
}
#odul-stok, #muayene-stok {
  margin: 0; font: 900 calc(30px * var(--o))/1 var(--y-baslik);
}
#odul-ad, #muayene-ad {
  position: relative;
  min-width: calc(300px * var(--o));
  background: linear-gradient(90deg, rgba(10, 14, 20, .95), rgba(24, 32, 44, .95));
  padding: calc(9px * var(--o)) calc(20px * var(--o)) calc(11px * var(--o));
  border-radius: calc(3px * var(--o));
}
#odul-ad b, #muayene-ad b { display: block; font: 900 calc(27px * var(--o))/1.2 var(--y-baslik); }
#odul-ad em, #muayene-ad em { display: block; font: 600 calc(23px * var(--o))/1.2 var(--y-baslik); font-style: normal; color: #b7c0cc; }
#odul-ad i, #muayene-ad i {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: calc(6px * var(--o)); background: #555;
}

#muayene {
  position: fixed; inset: 0; z-index: 8;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(10px * var(--o));
  background:
    linear-gradient(rgba(14, 18, 24, .80), rgba(14, 18, 24, .80)),
    repeating-linear-gradient(0deg, #3a424e 0 calc(58px * var(--o)), #2e3540 calc(58px * var(--o)) calc(116px * var(--o))),
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 calc(58px * var(--o)), transparent calc(58px * var(--o)) calc(116px * var(--o)));
}
/*
  Kusan dugmesi ALTTA ve BUYUK.  Onceki surumde inceleme ekraninin en
  tepesinde 68x32'lik bir sekmeydi: islev calisiyordu ama kimse
  bulamiyordu ve "bicak secilmiyor" olarak bildirildi.
*/
.muayene-dugmeler {
  display: flex; align-items: center; gap: calc(14px * var(--o));
  margin-top: calc(8px * var(--o));
}
.dugme.yesil.etkin { filter: grayscale(.75) brightness(.72); cursor: default; }

/* Envanter kartindaki buyutec: kusanmadan incelemek icin */
.esya-bak {
  position: absolute; top: calc(6px * var(--o)); right: calc(6px * var(--o));
  width: calc(30px * var(--o)); height: calc(30px * var(--o));
  background: rgba(6, 8, 12, .80);
  border: calc(1px * var(--o)) solid rgba(255, 255, 255, .20);
  border-radius: calc(4px * var(--o));
  color: #fff; cursor: pointer;
  font: 900 calc(15px * var(--o))/1 var(--y-baslik);
  opacity: 0; transition: opacity .12s;
  z-index: 2;
}
.esya:hover .esya-bak { opacity: 1; }

.ayar-ad {
  flex: 0 0 calc(240px * var(--o));
  background: #0a0d12;
  border: calc(2px * var(--o)) solid var(--cerceve);
  border-radius: calc(4px * var(--o));
  color: #fff;
  /* 16px altinda iOS Safari odaklanirken sayfayi yakinlastiriyor */
  padding: calc(9px * var(--o)) calc(12px * var(--o));
  font: 600 max(16px, calc(20px * var(--o)))/1 var(--y-govde);
  outline: none;
}

/* ══════════════════════════════════════════════════════════════════
   MAC HUD
══════════════════════════════════════════════════════════════════ */

#hud { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
#hud button { pointer-events: auto; }

/* ── Skor tablosu ────────────────────────────────────────────────── */

#skor-tablo {
  /*
    Ust kenara YASLI duruyor (referansta da oyle), ama telefonda
    centigin/durum cubugunun altina giriyordu: skor ve sure
    okunmaz oluyordu.  Guvenli alan kadar asagi iniyor; centiksiz
    ekranda `env()` sifir, yani gorunum degismiyor.
  */
  position: absolute; top: env(safe-area-inset-top, 0px); left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: flex-start;
}
#skor-tablo .takim { display: flex; gap: calc(3px * var(--o)); }
/*
  ── TAKIM RENGI DORT YANDAN
  Once yalniz ALT KENAR renkliydi (5px).  Kucuk portrelerde bu ince
  cizgi kayboluyor ve cocuk oyuncu "hangisi benim takimim" sorusunu
  portrelerin kostumunden cozmek zorunda kaliyordu.  Cerceve artik
  dort yani sariyor ve kalin.
*/
#skor-tablo .yuz {
  position: relative;
  width: calc(78px * var(--o)); height: calc(78px * var(--o));
  background: #2c3340;
  border: calc(4px * var(--o)) solid var(--yesil);
  border-radius: calc(8px * var(--o));
  box-shadow: 0 calc(2px * var(--o)) calc(6px * var(--o)) rgba(0, 0, 0, .55);
  overflow: hidden;
}
#skor-tablo .kirmizi .yuz { border-color: var(--kirmizi); }
/* Avatar bir <img> (bkz. avatar.js/avatarImg); `canvas` secicisi
   projenin ilk gunlerinden kalmaydi ve hicbir seye uymuyordu —
   olcu yalnizca satir ici stilden geliyordu. */
#skor-tablo .yuz img, #skor-tablo .yuz canvas { width: 100%; height: 100%; display: block; }
#skor-tablo .yuz .sv {
  position: absolute; top: calc(2px * var(--o)); left: calc(4px * var(--o));
  font: 900 calc(17px * var(--o))/1 var(--y-baslik);
  text-shadow: 0 calc(1px * var(--o)) calc(3px * var(--o)) #000;
}
#skor-tablo .yuz.olu::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(6, 8, 12, .82) var(--sim-kafatasi) center/60% no-repeat;
}
#skor-tablo .orta {
  min-width: calc(124px * var(--o));
  background: rgba(6, 9, 13, .88);
  border: calc(3px * var(--o)) solid rgba(255, 255, 255, .16);
  border-radius: calc(10px * var(--o));
  margin: 0 calc(6px * var(--o));
  text-align: center;
  padding: calc(4px * var(--o)) calc(8px * var(--o)) calc(8px * var(--o));
}
#skor-sure {
  display: block;
  font: 900 calc(34px * var(--o))/1.1 var(--y-baslik);
  color: #fff;
}
#skor-sure.az { color: var(--kirmizi); }
#skor-tablo .orta span { display: flex; justify-content: center; gap: calc(20px * var(--o)); }
/* Skorlar buyudu ve KONTURLANDI: acik gokyuzunun onunde ince
   renkli rakamlar okunmuyordu. */
#skor-y, #skor-k {
  font: 900 calc(42px * var(--o))/1 var(--y-baslik);
  font-style: normal;
  -webkit-text-stroke: calc(3px * var(--o)) rgba(0, 0, 0, .8);
  paint-order: stroke fill;
}
#skor-y { color: #4dff86; }
#skor-k { color: #ff5c5c; }

/* ── Öldürme akışı ───────────────────────────────────────────────── */

#killfeed {
  position: absolute; top: calc(84px * var(--o)); right: calc(14px * var(--o));
  display: flex; flex-direction: column; align-items: flex-end;
  gap: calc(6px * var(--o));
}
.akis-satir {
  display: flex; align-items: center; gap: calc(5px * var(--o));
  animation: kaydir .22s ease-out;
  white-space: nowrap;
  max-width: 56vw;
}
@keyframes kaydir { from { transform: translateX(calc(30px * var(--o))); } }
.akis-ad {
  background: rgba(10, 14, 20, .9);
  max-width: calc(240px * var(--o));
  overflow: hidden; text-overflow: ellipsis;
  border-bottom: calc(3px * var(--o)) solid var(--yesil);
  padding: calc(4px * var(--o)) calc(12px * var(--o)) calc(5px * var(--o));
  font: 900 calc(21px * var(--o))/1 var(--y-baslik);
}
.akis-ad.k { border-bottom-color: var(--kirmizi); }
.akis-sim {
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 14, 20, .9);
  padding: calc(3px * var(--o)) calc(8px * var(--o));
  height: calc(34px * var(--o));
}
.akis-sim canvas { height: calc(24px * var(--o)); width: auto; }
.akis-sim.rozet { font: 900 calc(18px * var(--o))/1 var(--y-baslik); color: var(--altin); }

/* ── Tuş ipucu ───────────────────────────────────────────────────── */

#ipucu {
  position: absolute; top: calc(200px * var(--o)); left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: calc(14px * var(--o));
  background: rgba(14, 18, 24, .9);
  padding: calc(11px * var(--o)) calc(28px * var(--o));
  border-radius: calc(5px * var(--o));
  font: 900 calc(32px * var(--o))/1 var(--y-baslik);
  animation: belirX .18s;
}
#ipucu .tus {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: calc(46px * var(--o)); height: calc(38px * var(--o));
  padding: 0 calc(10px * var(--o));
  background: #eef2f6; color: #10141b;
  border-radius: calc(4px * var(--o));
  font: 900 calc(22px * var(--o))/1 var(--y-baslik);
}
#ipucu .kucuk { font-size: calc(26px * var(--o)); font-weight: 700; }

/* ── Görev bildirimi ─────────────────────────────────────────────── */

#toast {
  position: absolute; top: calc(150px * var(--o)); left: 50%;
  transform: translateX(-50%);
  min-width: calc(470px * var(--o));
  background: rgba(6, 8, 12, .94);
  border-bottom: calc(5px * var(--o)) solid var(--altin);
  text-align: center;
  padding: calc(12px * var(--o)) calc(24px * var(--o)) calc(14px * var(--o));
  animation: belirX .2s;
}
#toast b { display: block; font: 900 calc(34px * var(--o))/1.2 var(--y-baslik); }
#toast span {
  display: inline-flex; align-items: center; gap: calc(8px * var(--o));
  margin-top: calc(4px * var(--o));
  font: 900 calc(28px * var(--o))/1 var(--y-baslik);
  color: var(--altin);
}

/* ── Geri sayım ──────────────────────────────────────────────────── */

#sayac {
  -webkit-text-stroke: calc(3px * var(--o)) rgba(0, 0, 0, .75);
  paint-order: stroke fill;
  position: absolute; top: 44%; left: 50%;
  transform: translate(-50%, -50%);
  font: 900 calc(88px * var(--o))/1 var(--y-baslik);
  color: #fff;
  text-shadow: 0 calc(4px * var(--o)) calc(16px * var(--o)) rgba(0, 0, 0, .8);
  animation: nabiz .5s ease-out;
}
@keyframes nabiz { from { transform: translate(-50%, -50%) scale(1.6); } }

/* ── Nişangâh ────────────────────────────────────────────────────── */

/*
  Nisangah 6px'lik soluk bir noktaydi; acik zeminde (kumlar, gokdelen
  catisi) tumden kayboluyordu.  Buyudu ve KOYU BIR HALKA kazandi —
  her arka planda goruluyor.
*/
#nisan {
  position: absolute; left: 50%; top: 50%;
  width: calc(12px * var(--o)); height: calc(12px * var(--o));
  margin: calc(-6px * var(--o)) 0 0 calc(-6px * var(--o));
  border-radius: 50%;
  background: #fff;
  border: calc(2.5px * var(--o)) solid rgba(0, 0, 0, .8);
  box-shadow: 0 0 calc(4px * var(--o)) rgba(0, 0, 0, .7);
  transition: transform .08s;
}
#nisan.isabet {
  transform: scale(2.2);
  background: var(--kirmizi);
}

/* ── Can ─────────────────────────────────────────────────────────── */

/*
  ── CAN: COCUK ICIN OKUNAKLI
  Once ekranin dibinde 10px'lik ince bir cizgi ve "100 HP" yazisiydi.
  Cocuk oyuncu icin iki sorun: cubuk cok ince (goz kacirıyor) ve "HP"
  okuma gerektiriyor.  Simdi kalp ikonu + buyuk sayi + kalin, yuvarlak
  cubuk; renk yesil -> turuncu -> kirmizi gidiyor, yani sayiyi
  OKUMADAN durum anlasiliyor.
*/
#can-kutu {
  position: absolute; bottom: calc(26px * var(--o)); left: 50%;
  transform: translateX(-50%);
  width: calc(430px * var(--o));
  text-align: center;
}
.can-ust {
  display: flex; align-items: center; justify-content: center;
  gap: calc(10px * var(--o));
  margin-bottom: calc(6px * var(--o));
}
#can-kalp {
  font-size: calc(38px * var(--o));
  line-height: 1;
  color: #3ddc6b;
  text-shadow: 0 calc(2px * var(--o)) calc(5px * var(--o)) rgba(0, 0, 0, .95);
  transition: color .18s;
}
/* Can kritikken kalp atiyor. */
#can-kalp.dusuk { animation: kalpAt .7s ease-in-out infinite; }
@keyframes kalpAt {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.22); }
}
#can-yazi {
  -webkit-text-stroke: calc(4px * var(--o)) rgba(0, 0, 0, .8);
  paint-order: stroke fill;
  font: 900 calc(46px * var(--o))/1 var(--y-baslik);
  color: #fff;
  text-shadow: 0 calc(3px * var(--o)) calc(7px * var(--o)) rgba(0, 0, 0, .95);
}
.can-cubuk {
  height: calc(22px * var(--o));
  background: rgba(8, 10, 14, .8);
  border: calc(3px * var(--o)) solid rgba(0, 0, 0, .65);
  border-radius: calc(13px * var(--o));
  box-shadow: 0 calc(2px * var(--o)) calc(6px * var(--o)) rgba(0, 0, 0, .5);
  overflow: hidden;
}
.can-cubuk i {
  display: block; height: 100%; width: 100%;
  background: #3ddc6b;
  border-radius: inherit;
  box-shadow: inset 0 calc(3px * var(--o)) 0 rgba(255, 255, 255, .35);
  transition: width .18s, background .18s;
}

/* ── Öldürme bildirimi ───────────────────────────────────────────── */

#oldurme-bildirim {
  position: absolute; top: 62%; left: 50%;
  transform: translateX(-50%);
  text-align: center;
  animation: belirX .2s;
}
#oldurme-bildirim b {
  -webkit-text-stroke: calc(3px * var(--o)) rgba(0, 0, 0, .75);
  paint-order: stroke fill;
  display: block;
  font: 900 calc(29px * var(--o))/1.2 var(--y-baslik);
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 calc(2px * var(--o)) calc(6px * var(--o)) rgba(0, 0, 0, .9);
}
#oldurme-bildirim span {
  font: 900 calc(20px * var(--o))/1 var(--y-baslik);
  color: rgba(255, 255, 255, .78);
  letter-spacing: calc(1px * var(--o));
}

/* ── Tur sonu ────────────────────────────────────────────────────── */

#tur-sonu {
  position: absolute; top: 34%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
  animation: belirXY .2s;
}
#tur-baslik {
  -webkit-text-stroke: calc(3px * var(--o)) rgba(0, 0, 0, .75);
  paint-order: stroke fill;
  margin: 0;
  font: 900 calc(84px * var(--o))/1 var(--y-baslik);
  letter-spacing: calc(2px * var(--o));
  text-shadow: 0 calc(4px * var(--o)) calc(18px * var(--o)) rgba(0, 0, 0, .8);
}
#tur-baslik.kazandi { color: var(--yesil); }
#tur-baslik.kaybetti { color: #ff6a45; }
#tur-baslik.berabere { color: #ffd166; }
#tur-ozet {
  margin: calc(4px * var(--o)) 0 calc(16px * var(--o));
  font: 900 calc(27px * var(--o))/1 var(--y-baslik);
  text-shadow: 0 calc(2px * var(--o)) calc(8px * var(--o)) rgba(0, 0, 0, .9);
}
#tur-skor { display: flex; justify-content: center; align-items: center; gap: calc(10px * var(--o)); }
#tur-skor .yuz {
  width: calc(84px * var(--o)); height: calc(84px * var(--o));
  background: #2c3340;
  border-bottom: calc(5px * var(--o)) solid var(--yesil);
}
#tur-skor .yuz.k { border-bottom-color: var(--kirmizi); }
#tur-skor .yuz img, #tur-skor .yuz canvas { width: 100%; height: 100%; display: block; }
#tur-skor .say {
  font: 900 calc(58px * var(--o))/1 var(--y-baslik);
  min-width: calc(64px * var(--o));
}
#tur-skor .say.y { color: var(--yesil); }
#tur-skor .say.k { color: var(--kirmizi); }

/* ── Ölüm kartı ──────────────────────────────────────────────────── */

#olum-karti {
  position: absolute; top: 72%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: calc(10px * var(--o));
}
#olum-karti .ok {
  background: none; border: 0; color: rgba(255, 255, 255, .75);
  font-size: calc(30px * var(--o)); cursor: pointer;
}
#olum-karti .kart {
  display: flex; align-items: center; gap: calc(12px * var(--o));
  background: rgba(10, 13, 18, .92);
  border-bottom: calc(5px * var(--o)) solid var(--kirmizi);
  padding: calc(10px * var(--o)) calc(16px * var(--o));
  min-width: calc(560px * var(--o));
}
#olum-karti .avatar {
  width: calc(58px * var(--o)); height: calc(58px * var(--o));
  background: #2c3340;
}
#olum-karti .avatar img, #olum-karti .avatar canvas { width: 100%; height: 100%; display: block; }
#olum-karti .bilgi b { display: block; font: 900 calc(26px * var(--o))/1.2 var(--y-baslik); }
#olum-karti .bilgi em { display: block; font: 600 calc(18px * var(--o))/1.2 var(--y-baslik); font-style: normal; color: var(--sonuk); }
#olum-karti .bilgi span { display: block; font: 900 calc(19px * var(--o))/1.4 var(--y-baslik); }
#olum-karti .bicak { margin-left: auto; }
#olum-karti .bicak canvas { width: calc(210px * var(--o)); height: auto; display: block; }

/* ── Hasar kenarı ────────────────────────────────────────────────── */

/*
  ── HASAR GERI BILDIRIMI
  Iki katman:
   * `#hasar-kenar`  DUSUK CANDA surekli duran sabit kirmizilik
   * `#hasar-darbe`  HER VURUSTA bir kez parlayan, hizla sonen katman
  Ikisi ayri, cunku birincisi durumu ("can azaldi"), ikincisi OLAYI
  ("simdi vuruldum") anlatiyor.  Tek katmanla, tam canla yenen ilk
  vurus hic fark edilmiyordu.
*/
#hasar-kenar {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(190, 20, 10, .75) 100%);
  transition: opacity .25s;
}
#hasar-darbe {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(ellipse at center, transparent 30%, rgba(255, 40, 24, .92) 100%);
  transition: opacity .42s ease-out;
}
#hasar-darbe.vur { opacity: 1; transition: opacity .04s; }

/* ══════════════════════════════════════════════════════════════════
   HARITA OYLAMA
══════════════════════════════════════════════════════════════════ */

#oylama {
  position: fixed; inset: 0; z-index: 9;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(24px * var(--o));
  background: rgba(6, 8, 12, .88);
}
#oylama-sayac {
  font: 900 calc(66px * var(--o))/1 var(--y-baslik);
  color: #fff;
}
#oylama-kartlar { display: flex; gap: calc(18px * var(--o)); }
.harita-kart {
  position: relative;
  width: calc(288px * var(--o));
  border: 0; padding: 0;
  background: #0d1015;
  cursor: pointer;
  overflow: hidden;
  border-bottom: calc(5px * var(--o)) solid transparent;
  transition: transform .12s;
}
.harita-kart:hover { transform: translateY(calc(-4px * var(--o))); }
.harita-kart.secili { border-bottom-color: var(--yesil); }
.harita-kart img { display: block; width: 100%; height: auto; }
.harita-kart b {
  position: absolute; left: 0; right: 0; bottom: calc(10px * var(--o));
  font: 900 calc(29px * var(--o))/1 var(--y-baslik);
  color: #fff;
  text-shadow: 0 calc(2px * var(--o)) calc(6px * var(--o)) #000;
}
.harita-kart .oylar {
  position: absolute; left: 50%; top: 46%;
  transform: translateX(-50%);
  display: flex; gap: calc(3px * var(--o));
}
.harita-kart .oylar i {
  width: calc(38px * var(--o)); height: calc(38px * var(--o));
  background: #2c3340;
  border-bottom: calc(3px * var(--o)) solid var(--yesil);
  font-style: normal;
}
.harita-kart .oylar i.k { border-bottom-color: var(--kirmizi); }
.harita-kart .oylar i img, .harita-kart .oylar i canvas { width: 100%; height: 100%; display: block; }

/* ══════════════════════════════════════════════════════════════════
   MAC SONU
══════════════════════════════════════════════════════════════════ */

#mac-sonu { position: fixed; inset: 0; z-index: 9; pointer-events: none; }
/*
  Perde: sahne gorunur kaliyor (zafer pozu orada) ama kenarlar
  koyulasiyor.  Perdesiz halde baslik ve skor haritanin acik
  yuzeylerinde kayboluyordu.
*/
#mac-sonu::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 55%, rgba(0, 0, 0, .12) 0%, rgba(0, 0, 0, .68) 78%),
    linear-gradient(rgba(4, 7, 11, .55), rgba(4, 7, 11, 0) 28%,
                    rgba(4, 7, 11, 0) 58%, rgba(4, 7, 11, .72));
}
#mac-sonu button, #mac-sonu #mac-kart { pointer-events: auto; }
#mac-baslik {
  -webkit-text-stroke: calc(3px * var(--o)) rgba(0, 0, 0, .75);
  paint-order: stroke fill;
  position: absolute; top: calc(18px * var(--o)); left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font: 900 calc(66px * var(--o))/1 var(--y-baslik);
  letter-spacing: calc(2px * var(--o));
  text-shadow: 0 calc(3px * var(--o)) calc(14px * var(--o)) rgba(0, 0, 0, .8);
}
#mac-baslik.kazandi { color: var(--yesil); }
#mac-baslik.kaybetti { color: #ff6a45; }
#mac-skor {
  position: absolute; top: calc(96px * var(--o)); left: 50%;
  transform: translateX(-50%);
  display: flex; gap: calc(28px * var(--o));
  background: rgba(6, 9, 13, .6);
  padding: calc(4px * var(--o)) calc(26px * var(--o)) calc(8px * var(--o));
}
#mac-skor i { font: 900 calc(52px * var(--o))/1 var(--y-baslik); font-style: normal; }
#mac-skor .y { color: var(--yesil); }
#mac-skor .k { color: var(--kirmizi); }

#mac-kart {
  position: absolute; bottom: calc(20px * var(--o)); left: 50%;
  transform: translateX(-50%);
  width: calc(400px * var(--o));
  background: rgba(10, 13, 18, .92);
  border-bottom: calc(5px * var(--o)) solid var(--altin);
  text-align: center;
  padding: calc(10px * var(--o)) calc(16px * var(--o)) calc(12px * var(--o));
}
#mac-kart b { display: block; font: 900 calc(30px * var(--o))/1.2 var(--y-baslik); }
#mac-kart em { display: block; font: 600 calc(20px * var(--o))/1.2 var(--y-baslik); font-style: normal; color: var(--sonuk); }
#mac-kart ul {
  list-style: none; margin: calc(10px * var(--o)) 0 0; padding: 0;
  display: flex; justify-content: space-around;
}
#mac-kart li { display: flex; flex-direction: column; gap: calc(2px * var(--o)); }
#mac-kart li span { font: 600 calc(17px * var(--o))/1 var(--y-baslik); color: var(--sonuk); }
#mac-kart li b { font: 900 calc(30px * var(--o))/1 var(--y-baslik); }
#mac-odul {
  margin: calc(8px * var(--o)) 0 0;
  font: 900 calc(20px * var(--o))/1 var(--y-baslik);
  color: var(--altin);
}
#btn-ayril {
  position: absolute; right: calc(24px * var(--o)); bottom: calc(24px * var(--o));
}

/* ══════════════════════════════════════════════════════════════════
   GIRIS + YUKLEME
══════════════════════════════════════════════════════════════════ */

#giris {
  position: fixed; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse at 50% 30%, #1b2836 0%, #080b10 70%);
}
#giris .ic {
  width: min(calc(560px * var(--o)), 92vw);
  background: rgba(12, 15, 20, .9);
  border: calc(2px * var(--o)) solid var(--cerceve);
  border-radius: calc(8px * var(--o));
  padding: calc(26px * var(--o));
  text-align: center;
}
/* Ad dizgesi normal yazimda saklaniyor; BUYUK HARF bir bicim
   meselesi (bkz. js/dil.js/OYUN_ADI). */
#giris h1 {
  text-transform: uppercase;
  margin: 0;
  font: 900 calc(46px * var(--o))/1.1 var(--y-baslik);
  letter-spacing: calc(1px * var(--o));
}
#giris .alt {
  margin: calc(4px * var(--o)) 0 calc(16px * var(--o));
  color: var(--sonuk);
  font: 600 calc(20px * var(--o))/1 var(--y-baslik);
}
#giris .diller { justify-content: center; margin-bottom: calc(18px * var(--o)); }
.ad-satir {
  display: flex; align-items: center; gap: calc(12px * var(--o));
  margin-bottom: calc(18px * var(--o));
  font: 600 calc(21px * var(--o))/1 var(--y-baslik);
}
.ad-satir input {
  flex: 1;
  background: #0a0d12;
  border: calc(2px * var(--o)) solid var(--cerceve);
  border-radius: calc(4px * var(--o));
  color: #fff;
  /* 16px altinda iOS Safari odaklanirken sayfayi yakinlastiriyor */
  padding: calc(11px * var(--o)) calc(14px * var(--o));
  font: 700 max(16px, calc(21px * var(--o)))/1 var(--y-baslik);
  outline: none;
}
.tuslar {
  list-style: none; margin: calc(20px * var(--o)) 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: calc(6px * var(--o)) calc(14px * var(--o));
  text-align: left;
}
.tuslar li { display: flex; gap: calc(8px * var(--o)); align-items: baseline; }
.tuslar b {
  min-width: calc(88px * var(--o));
  background: #171d26;
  border-radius: calc(3px * var(--o));
  padding: calc(3px * var(--o)) calc(7px * var(--o));
  font: 900 calc(15px * var(--o))/1.3 var(--y-baslik);
  text-align: center;
}
.tuslar span { color: var(--sonuk); font: 600 calc(16px * var(--o))/1.3 var(--y-govde); }
.tuslar.dokunmatik { display: none; }
body.mobil .tuslar.klavye { display: none; }
body.mobil .tuslar.dokunmatik { display: grid; }

/*
  ── YUKLEME PERDESI: KAPAK GORSELI
  Once duz koyu bir zemin ve tek satir yaziydi.  Artik oyunun kapagi
  tam ekran duruyor; oyun adi YAZI olarak gecmiyor.

  `cover` + ortalama: kapak 16:9, ekran her orandan olabilir; `cover`
  kirpiyor ama BOSLUK BIRAKMIYOR.  Ustune koyu bir katman biniyor,
  yoksa beyaz zeminli gorselin uzerinde beyaz yazi kayboluyor.
*/
#yukleme {
  position: fixed; inset: 0; z-index: 11;
  display: flex; align-items: flex-end; justify-content: center;
  background: #080b10;
  overflow: hidden;
}
/*
  Karartma KATMANLI ARKA PLAN olarak veriliyor, `::after` ile degil:
  sozde eleman bazi olcum/gomulme yollarinda uygulanmiyor ve kapak
  tam parlaklikta kalip ustundeki beyaz yaziyi yutuyordu.  Tek
  bildirimde gradyan + gorsel her yerde birlikte cizilir.
*/
#yukleme .kapak, #cevir .kapak {
  position: absolute; inset: 0;
  background:
    linear-gradient(rgba(4, 6, 10, .30) 30%, rgba(4, 6, 10, .86)) center/cover no-repeat,
    url('../img/kapak.jpg') center/cover no-repeat;
}
/*
  Gosterge ORTADA DEGIL, ALTTA.  Ortada kapagin odak noktasinin
  (karakterin yuzu) tam ustune biniyor ve hem yaziyi hem gorseli
  bozuyordu.
*/
#yukleme .ic {
  position: relative;
  margin-top: auto;
  padding-bottom: calc(52px * var(--o));
  display: flex; flex-direction: column; align-items: center;
  gap: calc(14px * var(--o));
}
#yukleme b {
  font: 900 calc(24px * var(--o))/1 var(--y-baslik);
  color: #fff;
  -webkit-text-stroke: calc(3px * var(--o)) rgba(0, 0, 0, .7);
  paint-order: stroke fill;
  text-shadow: 0 calc(2px * var(--o)) calc(6px * var(--o)) rgba(0, 0, 0, .9);
}
/* Donen halka: yazi okumadan "calisiyor" demek icin. */
#yukleme .halka {
  width: calc(54px * var(--o)); height: calc(54px * var(--o));
  border: calc(6px * var(--o)) solid rgba(255, 255, 255, .22);
  border-top-color: var(--yesil);
  border-radius: 50%;
  animation: halkaDon .9s linear infinite;
}
@keyframes halkaDon { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════════════════════════════
   DOKUNMATIK
══════════════════════════════════════════════════════════════════ */

#dok { display: none; }
body.mobil #dok { display: block; }

#dok-kol {
  --kol: max(112px, calc(160px * var(--o)));
  position: absolute;
  width: var(--kol); height: var(--kol);
  margin: calc(var(--kol) / -2) 0 0 calc(var(--kol) / -2);
  border-radius: 50%;
  border: max(2px, calc(3px * var(--o))) solid rgba(255, 255, 255, .30);
  background: rgba(0, 0, 0, .22);
  pointer-events: none;
  transition: opacity .18s;
}
/*
  Bosta TAMAMEN gorunmezdi.  Oyuncu ilk acilista sol yarida bir kol
  oldugunu bilmiyor ve yurumeyi denemiyordu; hafif gorunur birakmak
  o sorunun tamamini cozuyor.
*/
#dok-kol.pasif { opacity: .34; }
#dok-kol i {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--kol) * .40); height: calc(var(--kol) * .40);
  margin: calc(var(--kol) * -.20) 0 0 calc(var(--kol) * -.20);
  border-radius: 50%;
  background: rgba(255, 255, 255, .48);
}
/*
  ── DOKUNMATIK YERLESIMI
  Onceki olculer tumuyle `--o`ya baglilydi.  Yatay tutulan bir
  telefonda `--o` 0.52'ye dusuyor ve dugmeler 37-41 px'e iniyordu —
  hem dokunma hedefi asgari 44 px'in altinda, hem de `kay` ile `vur`
  DIS DAIRELERI UST USTE biniyordu, yani kayarken vuruluyordu.

  Simdi her dugmenin bir TABANI var (`max(...)`): ekran ne kadar
  kucuk olursa olsun hedef 54 px'in altina inmiyor.  Konumlar da tek
  bir kok degiskenden turuyor, boylece cakisma matematiksel olarak
  imkansiz: her dugme bir oncekinin capi + bosluk kadar oteleniyor.

  `env(safe-area-inset-*)`: centikli telefon yatay tutulunca sistem
  cubugu sag/alt kenari yiyor; dugmeler oraya denk gelirse basilamiyor.
*/
#dok {
  --gv: max(72px, calc(104px * var(--o)));      /* vurus dugmesi */
  --gd: max(54px, calc(80px * var(--o)));       /* digerleri */
  --bosl: max(10px, calc(14px * var(--o)));
  --sagKenar: calc(max(14px, calc(22px * var(--o))) + env(safe-area-inset-right, 0px));
  --altKenar: calc(max(14px, calc(20px * var(--o))) + env(safe-area-inset-bottom, 0px));
  --solKenar: calc(max(14px, calc(22px * var(--o))) + env(safe-area-inset-left, 0px));
}
#dok button {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  border: max(2px, calc(3px * var(--o))) solid rgba(255, 255, 255, .30);
  background: rgba(0, 0, 0, .34);
  color: #fff;
  border-radius: 50%;
  line-height: 1;
  pointer-events: auto;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
#dok button:active { background: rgba(255, 255, 255, .26); }

#dok-vur {
  right: var(--sagKenar);
  bottom: calc(var(--altKenar) + var(--gd) + var(--bosl));
  width: var(--gv); height: var(--gv);
  font-size: calc(var(--gv) * .46);
  background: rgba(196, 48, 44, .34);
  border-color: rgba(255, 150, 140, .40);
}
#dok-zipla {
  right: var(--sagKenar); bottom: var(--altKenar);
  width: var(--gd); height: var(--gd);
  font-size: calc(var(--gd) * .40);
}
#dok-kos {
  right: calc(var(--sagKenar) + var(--gd) + var(--bosl));
  bottom: var(--altKenar);
  width: var(--gd); height: var(--gd);
  font-size: calc(var(--gd) * .44);
}
#dok-kay {
  right: calc(var(--sagKenar) + var(--gv) + var(--bosl));
  bottom: calc(var(--altKenar) + var(--gd) + var(--bosl) + var(--gd) * .55);
  width: var(--gd); height: var(--gd);
  font-size: calc(var(--gd) * .40);
}

/*
  ══ ALCAK EKRAN (yatay telefon) ══════════════════════════════════
  `max-width` sorgusu yatay tutulan telefonda ATESLENMIYOR: 844x390
  bir ekran "genis" sayiliyor ama dikeyde 390 px var.  Panellerin
  ve HUD'in asil sikistigi eksen bu.
*/
@media (max-height: 560px) {
  .panel .pencere, .panel .pencere.dar, .panel .pencere.genis {
    max-height: 100vh; height: 100vh; border-radius: 0;
    display: flex; flex-direction: column;
  }
  .panel .govde { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

  /* Seviye seridi lobide 3B tabelalarin uzerine biniyordu */
  #seviye-kutu {
    /* Ayni taban korumasi burada da sart: bu blok kutuyu YUKARI
       aliyor ve korumasiz haliyle ust seridin tam icine sokuyordu. */
    top: max(calc(46px * var(--o)), calc(14px * var(--o) + 44px));
    width: min(52vw, calc(440px * var(--o)));
    background: rgba(6, 9, 13, .42);
    border-radius: calc(6px * var(--o));
    padding: calc(4px * var(--o)) calc(10px * var(--o)) calc(6px * var(--o));
  }
  #seviye-kutu > b { font-size: calc(22px * var(--o)); }
  #seviye-kutu small { font-size: calc(14px * var(--o)); }

  /* Gorev paneli ekranin soluna yapisikti */
  #gorevler {
    left: calc(env(safe-area-inset-left, 0px) + 8px);
    top: 26%;
    width: min(30vw, calc(370px * var(--o)));
  }
  #gorevler h3 { font-size: calc(19px * var(--o)); }

  #mac-kart { width: min(62vw, calc(400px * var(--o))); }
  #mac-baslik { font-size: calc(50px * var(--o)); top: calc(8px * var(--o)); }
  #mac-skor { top: calc(62px * var(--o)); }
  #mac-skor i { font-size: calc(38px * var(--o)); }
}

/* Dar ekran: paneller tam ekran, ızgaralar daralıyor */
@media (max-width: 780px) {
  .panel .pencere, .panel .pencere.dar, .panel .pencere.genis {
    width: 100vw; max-height: 100vh; height: 100vh; border-radius: 0;
  }
  .icerik-izgara { grid-template-columns: repeat(3, 1fr); }
  #bicak-ara { flex: 1 1 auto; }
  #gorevler { width: calc(300px * var(--o)); top: 24%; }
  #olum-karti .kart { min-width: auto; }
  #olum-karti .bicak { display: none; }
  .ozel canvas { max-width: calc(240px * var(--o)); }
}

/* ══════════════════════════════════════════════════════════════════
   FARE KILIDI PERDESI
══════════════════════════════════════════════════════════════════ */

#kilit-perde {
  position: fixed; inset: 0; z-index: 7;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4, 6, 10, .55);
  cursor: pointer;
}
#kilit-perde .ic {
  text-align: center;
  background: rgba(10, 13, 18, .92);
  border-bottom: calc(5px * var(--o)) solid var(--yesil);
  border-radius: calc(5px * var(--o));
  padding: calc(20px * var(--o)) calc(46px * var(--o)) calc(22px * var(--o));
}
#kilit-perde b {
  display: block;
  font: 900 calc(40px * var(--o))/1.2 var(--y-baslik);
  text-shadow: 0 calc(2px * var(--o)) calc(8px * var(--o)) rgba(0, 0, 0, .9);
}
#kilit-perde span {
  display: block; margin-top: calc(6px * var(--o));
  font: 600 calc(21px * var(--o))/1.3 var(--y-govde);
  color: var(--sonuk);
}
body.mobil #kilit-perde { display: none !important; }

/* ══════════════════════════════════════════════════════════════════
   ODUL / SATIN ALMA ONAYI
   Hicbir reklam kazara baslamiyor: kilitli bir kostume tiklamak
   yalnizca bu paneli aciyor ve odul ne oldugu goruluyor.
══════════════════════════════════════════════════════════════════ */

#odul-onay {
  position: fixed; inset: 0; z-index: 8;
  display: flex; align-items: center; justify-content: center;
  background: rgba(3, 5, 8, .70);
}
#odul-onay .kutu {
  width: min(calc(560px * var(--o)), 94vw);
  text-align: center;
  background: var(--panel);
  backdrop-filter: blur(calc(14px * var(--o)));
  -webkit-backdrop-filter: blur(calc(14px * var(--o)));
  border: calc(1px * var(--o)) solid var(--cerceve);
  border-radius: calc(6px * var(--o));
  padding: calc(22px * var(--o));
  box-shadow: 0 calc(22px * var(--o)) calc(60px * var(--o)) rgba(0, 0, 0, .7);
}
#odul-onay h2 {
  margin: 0 0 calc(14px * var(--o));
  font: 900 calc(34px * var(--o))/1.1 var(--y-baslik);
}
#onay-onizleme {
  width: calc(180px * var(--o)); height: calc(180px * var(--o));
  margin: 0 auto calc(10px * var(--o));
  border-radius: calc(5px * var(--o));
  overflow: hidden;
  border-bottom: calc(5px * var(--o)) solid var(--yesil);
}
#onay-onizleme img, #onay-onizleme canvas { width: 100%; height: 100%; display: block; }
#onay-ad { margin: 0; font: 900 calc(28px * var(--o))/1.2 var(--y-baslik); }
#odul-onay .ip {
  margin: calc(6px * var(--o)) 0 0;
  font: 600 calc(19px * var(--o))/1.35 var(--y-govde);
  color: var(--sonuk);
}
#odul-onay .dugmeler {
  display: flex; justify-content: center; gap: calc(12px * var(--o));
  margin-top: calc(18px * var(--o));
}

/* Kostum karti — bicak kartiyla ayni vitrin dili */
.kostum-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(150px * var(--o)), 1fr));
  gap: calc(1px * var(--o));
  background: rgba(255, 255, 255, .07);
  border-top: calc(1px * var(--o)) solid rgba(255, 255, 255, .10);
}
.kostum {
  position: relative;
  background: linear-gradient(rgba(58, 68, 82, .55), rgba(10, 13, 18, .85));
  border-bottom: calc(4px * var(--o)) solid #555;
  cursor: pointer;
  padding-bottom: calc(6px * var(--o));
}
.kostum:hover { background: linear-gradient(rgba(78, 90, 108, .60), rgba(14, 18, 24, .88)); }
.kostum img { width: 100%; height: auto; display: block; }
.kostum b {
  display: block; text-align: center;
  padding: calc(4px * var(--o)) calc(4px * var(--o)) 0;
  font: 900 calc(17px * var(--o))/1.2 var(--y-baslik);
}
.kostum .bedel {
  display: flex; align-items: center; justify-content: center;
  gap: calc(5px * var(--o));
  margin-top: calc(3px * var(--o));
  font: 900 calc(16px * var(--o))/1 var(--y-baslik);
}
.kostum .bedel .sim { width: calc(22px * var(--o)); height: calc(22px * var(--o)); }
.kostum .rozet-video {
  position: absolute; top: calc(6px * var(--o)); left: calc(6px * var(--o));
  background: #b91c1c; color: #fff;
  padding: calc(3px * var(--o)) calc(7px * var(--o));
  border-radius: calc(3px * var(--o));
  font: 900 calc(13px * var(--o))/1 var(--y-baslik);
}
.kostum .kusanik {
  position: absolute; top: calc(7px * var(--o)); right: calc(7px * var(--o));
  width: calc(16px * var(--o)); height: calc(16px * var(--o));
  border-radius: 50%;
  background: var(--yesil);
  box-shadow: 0 0 calc(10px * var(--o)) var(--yesil);
}
.kostum.kilitli img { filter: brightness(.42) grayscale(.65); }

/* ══════════════════════════════════════════════════════════════════
   ODUL BARI (video izle, altin kazan) + CARK
   Bekleme sayaci YOK: her tiklama denenebilir.  "Bar" gorunumu
   bekleme degil, dugmeye agirlik veren dolgu seridi.
══════════════════════════════════════════════════════════════════ */

.odul-bar {
  position: relative;
  display: flex; align-items: center; gap: calc(9px * var(--o));
  background: rgba(3, 4, 7, .92);
  border: calc(2px * var(--o)) solid #c0392b;
  border-radius: calc(4px * var(--o));
  padding: calc(4px * var(--o)) calc(14px * var(--o)) calc(4px * var(--o)) calc(8px * var(--o));
  color: #fff; cursor: pointer;
  overflow: hidden;
  transition: transform .1s, filter .12s;
}
.odul-bar:hover { filter: brightness(1.12); }
.odul-bar:active { transform: translateY(calc(2px * var(--o))); }
.odul-bar.cark { border-color: var(--mor); }
.odul-bar .ikon {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: calc(30px * var(--o)); height: calc(30px * var(--o));
  border-radius: calc(3px * var(--o));
  background: linear-gradient(#e5513f, #a11a10);
  font: 900 calc(15px * var(--o))/1 var(--y-baslik);
}
.odul-bar.cark .ikon { background: linear-gradient(#a06bf5, #5b21b6); font-size: calc(19px * var(--o)); }

/* Cevher odulu: kenar ve ikon MOR, altin olandan ayirt edilsin. */
.odul-bar.mor { border-color: var(--mor); }
.odul-bar.mor .ikon { background: linear-gradient(#a06bf5, #5b21b6); }

/*
  HAKKI TUKENMIS odul dugmesi.  Gizlemek yerine SONUKLESTIRILIYOR:
  yok olan bir dugme "bir sey bozuldu" gibi okunuyor, sonuk olan
  "simdilik yok" diyor.  Tiklanabilir kaliyor cunku dokunma bir
  aciklama (toast) gosteriyor.
*/
.odul-bar.tukendi { filter: grayscale(.85) brightness(.62); }
.odul-bar.tukendi:hover { filter: grayscale(.85) brightness(.72); }
.odul-bar .metin { position: relative; text-align: left; }
.odul-bar .metin b {
  display: block;
  font: 900 calc(15px * var(--o))/1.1 var(--y-baslik);
}
.odul-bar .metin em {
  display: flex; align-items: center; gap: calc(4px * var(--o));
  font: 900 calc(17px * var(--o))/1 var(--y-baslik);
  font-style: normal; color: var(--altin);
}
.odul-bar.cark .metin em { color: #c9a6ff; }
/* Miktarin rengi PARANIN rengi olmali: mor odulde altin sarisi bir
   "250" hangi paranin kazanildigini yanlis anlatiyordu. */
.odul-bar.mor .metin em { color: #c9a6ff; }
.odul-bar .metin em .sim { width: calc(18px * var(--o)); height: calc(18px * var(--o)); }
.odul-bar .dolgu {
  position: absolute; left: 0; bottom: 0; height: calc(3px * var(--o));
  width: 100%;
  background: linear-gradient(90deg, #e5513f, #ffb03a);
}
.odul-bar.cark .dolgu { background: linear-gradient(90deg, #7c3aed, #c9a6ff); }

/* ── Cark ekrani ─────────────────────────────────────────────────── */

#cark-ekran {
  position: fixed; inset: 0; z-index: 8;
  display: flex; align-items: center; justify-content: center;
  background: rgba(3, 5, 8, .74);
}
#cark-ekran .kutu {
  text-align: center;
  background: var(--panel);
  backdrop-filter: blur(calc(14px * var(--o)));
  -webkit-backdrop-filter: blur(calc(14px * var(--o)));
  border: calc(1px * var(--o)) solid var(--cerceve);
  border-radius: calc(6px * var(--o));
  padding: calc(20px * var(--o)) calc(26px * var(--o));
}
#cark-ekran h2 { margin: 0 0 calc(10px * var(--o)); font: 900 calc(36px * var(--o))/1 var(--y-baslik); }
.cark-sarmal { position: relative; width: calc(340px * var(--o)); height: calc(340px * var(--o)); margin: 0 auto; }
#cark-tuval { width: 100%; height: 100%; display: block; }
/* Igne carkin USTUNDE ve asagi bakiyor: kazanan dilim tam tepede */
.cark-igne {
  position: absolute; top: calc(-6px * var(--o)); left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: calc(15px * var(--o)) solid transparent;
  border-right: calc(15px * var(--o)) solid transparent;
  border-top: calc(26px * var(--o)) solid #fff;
  filter: drop-shadow(0 calc(2px * var(--o)) calc(4px * var(--o)) rgba(0, 0, 0, .8));
}
#cark-sonuc { min-height: calc(26px * var(--o)); font: 900 calc(22px * var(--o))/1.3 var(--y-baslik); color: var(--altin); }
#cark-ekran .dugmeler { display: flex; justify-content: center; gap: calc(10px * var(--o)); margin-top: calc(10px * var(--o)); }

/* ── Mac sonu alt seridi ─────────────────────────────────────────── */

#mac-alt {
  position: absolute; right: calc(24px * var(--o)); bottom: calc(24px * var(--o));
  display: flex; align-items: center; gap: calc(12px * var(--o));
}
#mac-alt .ikon { font-size: calc(18px * var(--o)); }
#btn-ayril { position: static; display: flex; align-items: center; gap: calc(10px * var(--o)); }
#mac-sayac {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: calc(38px * var(--o)); height: calc(38px * var(--o));
  border-radius: calc(4px * var(--o));
  background: rgba(0, 0, 0, .34);
  font: 900 calc(24px * var(--o))/1 var(--y-baslik);
  font-style: normal;
}
#mac-odul {
  display: flex; align-items: center; justify-content: center;
  gap: calc(8px * var(--o));
}
#mac-odul .sim { width: calc(26px * var(--o)); height: calc(26px * var(--o)); }

/* ══════════════════════════════════════════════════════════════════
   TELEFONU CEVIR
   Oyun 16:9 yatay icin tasarlandi: dikey tutuldugunda nisan alani
   avuc genisligi kadar kaliyor ve dokunmatik dugmeler HUD'in uzerine
   biniyor.  Uyarmak, kotu bir dikey duzen sunmaktan iyi.
══════════════════════════════════════════════════════════════════ */
#cevir { display: none; }
body.mobil #cevir { display: none; }
@media (orientation: portrait) and (max-width: 900px) {
  body.mobil #cevir {
    display: flex; align-items: center; justify-content: center;
    position: fixed; inset: 0; z-index: 40;
    background: #080b10;
    text-align: center;
    color: #fff;
  }
  body.mobil #cevir .ic { position: relative; padding: 24px; }
  body.mobil #cevir svg { color: var(--yesil); animation: cevirDon 2.4s ease-in-out infinite; }
  /* Perde artik KAPAK GORSELININ ustunde: yazilar konturlanmazsa
     acik gokyuzu ve beyaz zirh uzerinde kayboluyor. */
  body.mobil #cevir b {
    display: block; margin-top: 14px;
    font: 900 26px/1.2 var(--y-baslik);
    -webkit-text-stroke: 3px rgba(0, 0, 0, .7);
    paint-order: stroke fill;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .95);
  }
  body.mobil #cevir span {
    display: block; margin-top: 8px;
    font: 700 16px/1.35 var(--y-govde);
    color: #e8eef6;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .95), 0 0 8px rgba(0, 0, 0, .8);
  }
  body.mobil #cevir svg {
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .9));
  }
}
@keyframes cevirDon {
  0%, 42% { transform: rotate(0deg); }
  62%, 100% { transform: rotate(-90deg); }
}

/* ══════════════════════════════════════════════════════════════════
   DOKUNMA HEDEFI TABANI

   Oyun ici dugmelerin olcusu duzeltilmisti ama LOBI KROMU
   duzeltilmemisti.  Yatay telefonda (844x390, --o = 0.52) olculdu:

     cevher "+"      18 x 18
     gorev "AL"      25 x 17
     magaza suzgeci  22 x 22
     panel kapat X   25 x 22
     buyutec         15 x 15
     odul bari/cark  ... x 25

   Hepsi parmakla isabet edilemeyecek kadar kucuk.  Gorunumu
   buyutmek duzeni bozuyor, bu yuzden hedef ::after ile GORUNMEZ
   olarak genisletiliyor — kare 44 px'e cikiyor, piksel degismiyor.

   `.esya-bak` istisna: ebeveyni `overflow: hidden`, tasan hedef
   kirpilirdi; o yalnizca gorsel olarak buyutuluyor.
══════════════════════════════════════════════════════════════════ */

body.mobil #btn-cevher,
body.mobil #suz-nadir,
body.mobil #suz-tur,
body.mobil .kapat,
body.mobil .tamam button { position: relative; }

body.mobil #btn-cevher::after,
body.mobil #suz-nadir::after,
body.mobil #suz-tur::after,
body.mobil .kapat::after,
body.mobil .tamam button::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: max(100%, 44px);
  height: max(100%, 44px);
}

body.mobil #btn-odul-para,
body.mobil #btn-cark { min-height: 40px; }

/*
  Panel icindeki dugmeler.  Bunlar KAYDIRILABILIR panellerde duruyor,
  yani dikey yer ucuz — gorunmez hedef genisletmek yerine gercekten
  buyutuluyorlar.  (Gorunmez genisletme burada yanlis olurdu: dil
  dugmeleri gibi alt alta dizili 20 px'lik ogelerde 44 px'lik alanlar
  birbirinin uzerine binip yanlis secime yol acar.)
*/
body.mobil .panel button,
body.mobil .panel .dugme {
  min-height: 40px;
  padding-block: max(6px, calc(4px * var(--o)));
}
body.mobil .panel .fiyat { min-height: 36px; }
body.mobil .kasa-ok { min-width: 40px; min-height: 40px; }

/*
  `.esya-bak` (buyutec) masaustunde `opacity: 0` ile duruyor ve
  `.esya:hover` ile aciliyor.  DOKUNMATIKTE HOVER YOK: telefonda bu
  dugme hic gorunmuyordu, yani esya onizlemesi ulasilamazdi.
  Mobilde her zaman gorunur ve parmakla basilabilir olcude.
*/
body.mobil .esya-bak {
  opacity: 1;
  width: max(40px, calc(30px * var(--o)));
  height: max(40px, calc(30px * var(--o)));
  font-size: max(17px, calc(15px * var(--o)));
}

#cark-hak {
  margin: calc(6px * var(--o)) 0 0;
  font: 600 calc(17px * var(--o))/1.2 var(--y-govde);
  color: var(--sonuk);
  text-align: center;
}