/*
  oyun.css — Minecraft arayuz olculeri.

  ── OLCU TABLOSU (Minecraft'in kendi GUI'sinden) ────────────────────
    yuva (hotbar slot)   20 px      secili cerceve  24 px
    envanter cubugu     182 x 22 px
    kalp                  9 px      kalpler arasi adim  8 px
    yazi yuksekligi       8 px      golge kaymasi       1 px

  Hepsi --hs (GUI olcegi, 2..5) ile carpiliyor; arayuz.js pencere
  boyutuna gore --hs'yi ayarliyor.  Boylece oyun 1280'de de 4K'da da
  Minecraft ile ayni oranlarda gorunuyor.

  YAZI TIPI: disaridan font YUKLENMIYOR (oyun cevrimdisi acilabilmeli).
  Piksel his monospace + sert golge ile veriliyor.
*/

:root {
  --hs: 3;                       /* GUI olcegi, JS yaziyor */
  --px: calc(1px * var(--hs));
  --yazi: calc(8px * var(--hs));
  --golge: rgba(0, 0, 0, .62);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: #000; overflow: hidden;
  font-family: Consolas, "Courier New", monospace;
  color: #fff;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

#sahne { display: block; width: 100vw; height: 100vh; }

.gizli { display: none !important; }

/* Minecraft yazi golgesi */
.mc {
  font-size: var(--yazi);
  line-height: 1.25;
  text-shadow: var(--px) var(--px) 0 var(--golge);
}

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

#hud {
  position: fixed; inset: 0;
  pointer-events: none;
  font-size: var(--yazi);
  line-height: 1.25;
  text-shadow: var(--px) var(--px) 0 var(--golge);
}

/* ── nisangah: Minecraft'inki gibi ters-fark karisimi ──────────── */
#nisan {
  position: absolute; left: 50%; top: 50%;
  width: calc(9px * var(--hs)); height: calc(9px * var(--hs));
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
}
#nisan::before, #nisan::after {
  content: ""; position: absolute; background: #fff;
}
#nisan::before {
  left: 50%; top: 0; width: var(--px); height: 100%;
  margin-left: calc(var(--px) / -2);
}
#nisan::after {
  top: 50%; left: 0; height: var(--px); width: 100%;
  margin-top: calc(var(--px) / -2);
}

/* Vurus isareti: nisangah bir an X'e donuyor. */
#nisan.vurdu::before, #nisan.vurdu::after {
  background: #ff5a5a;
  height: 100%; width: var(--px);
  left: 50%; top: 0; margin: 0 0 0 calc(var(--px) / -2);
  transform-origin: 50% 50%;
}
#nisan.vurdu::before { transform: rotate(45deg); }
#nisan.vurdu::after { transform: rotate(-45deg); }

/* ── kilic sarj cubugu (nisangahin altinda) ────────────────────── */
#sarj {
  position: absolute; left: 50%; top: 50%;
  width: calc(17px * var(--hs)); height: calc(3px * var(--hs));
  margin: calc(8px * var(--hs)) 0 0 calc(-8.5px * var(--hs));
  background: rgba(0, 0, 0, .55);
  border: var(--px) solid rgba(0, 0, 0, .7);
  opacity: 0; transition: opacity .12s;
}
#sarj.gor { opacity: 1; }
#sarj i {
  display: block; height: 100%; width: 0%;
  background: #d4d4d4;
}
#sarj.dolu i { background: #f6f6a0; }

/* ── skor tablosu (sag ust) ────────────────────────────────────── */
#skor {
  position: absolute; right: 0; top: calc(6px * var(--hs));
  min-width: calc(70px * var(--hs));
  max-width: 46vw;
  background: rgba(0, 0, 0, .32);
}
#skor .baslik {
  display: block; text-align: center;
  padding: calc(1px * var(--hs)) calc(3px * var(--hs));
  background: rgba(0, 0, 0, .42);
  color: #ffe066;
  letter-spacing: calc(1px * var(--hs));
}
#skor ul { list-style: none; margin: 0; padding: calc(1px * var(--hs)) 0; }
#skor li {
  display: flex; justify-content: space-between; gap: calc(6px * var(--hs));
  padding: 0 calc(3px * var(--hs));
  white-space: nowrap;
}
#skor li .ad { color: #fff; overflow: hidden; text-overflow: ellipsis; }
#skor li .say { color: #ff5555; }
#skor li.ben .ad { color: #55ff55; }
#skor li.olu .ad { color: #9a9a9a; }

/* ── sol ust serit: magaza, kese, odullu video ─────────────────── */
/* Dar ekranda alt satira sariyor; sabit satir tasma yapiyordu. */
#ust-sol {
  position: absolute; left: calc(4px * var(--hs)); top: calc(4px * var(--hs));
  display: flex; align-items: stretch; flex-wrap: wrap;
  gap: calc(3px * var(--hs));
  max-width: calc(100vw - 8px * var(--hs));
}
#ust-sol > * {
  pointer-events: auto;
  display: flex; align-items: center; gap: calc(3px * var(--hs));
  font-family: inherit; font-size: calc(7px * var(--hs)); color: #fff;
  text-shadow: var(--px) var(--px) 0 var(--golge);
  background: rgba(0, 0, 0, .42);
  border: var(--px) solid rgba(255, 255, 255, .28);
  padding: calc(2px * var(--hs)) calc(5px * var(--hs)) calc(2px * var(--hs)) calc(2px * var(--hs));
}
#ust-sol button { cursor: pointer; }
#ust-sol button:hover { border-color: #fff; background: rgba(255, 255, 255, .14); }
#ust-sol .sim {
  width: calc(14px * var(--hs)); height: calc(14px * var(--hs));
  background-size: 100% 100%; image-rendering: pixelated;
}
#ust-sol b { font-weight: normal; }
#kese { pointer-events: none; }
#kese b { color: #7cf0a8; min-width: calc(16px * var(--hs)); }
#kese.artti { animation: kese-vur .4s ease-out; }
@keyframes kese-vur {
  40% { transform: scale(1.18); filter: brightness(1.5); }
}
#btn-reklam-zumrut .video { font-size: calc(8px * var(--hs)); }
#btn-reklam-zumrut b { color: #7cf0a8; }
/* Arena icinde kullanilamiyor: duraklatarak dovusten kacilmasin. */
#btn-dukkan.pasif { opacity: .38; }
#btn-dukkan.pasif:hover { border-color: rgba(255, 255, 255, .28); background: rgba(0, 0, 0, .42); }

/* ── satici ipucu ──────────────────────────────────────────────── */
#etkilesim {
  position: absolute; left: 50%; bottom: calc(46px * var(--hs));
  transform: translateX(-50%);
  background: rgba(0, 0, 0, .48);
  border: none;
  font-family: inherit; font-size: var(--yazi); color: #fff;
  text-shadow: var(--px) var(--px) 0 var(--golge);
  padding: calc(2px * var(--hs)) calc(6px * var(--hs));
  max-width: 92vw; text-align: center;
}
#etkilesim b {
  color: #ffe066;
  border: var(--px) solid rgba(255, 255, 255, .5);
  padding: 0 calc(2px * var(--hs));
  margin-right: calc(2px * var(--hs));
}
/* Mobilde tek erisim yolu bu oldugu icin dokunulabilir ve buyuk. */
body.mobil #etkilesim {
  pointer-events: auto; cursor: pointer;
  font-size: calc(16px * var(--dok));
  padding: calc(10px * var(--dok)) calc(18px * var(--dok));
  bottom: calc(var(--dok-alt) + 120px * var(--dok));
  border: 2px solid rgba(255, 255, 255, .4);
}

#bilgi {
  position: absolute; left: 50%; bottom: calc(58px * var(--hs));
  transform: translateX(-50%);
  background: rgba(120, 20, 20, .62);
  color: #ffdede;
  padding: calc(2px * var(--hs)) calc(6px * var(--hs));
  max-width: 92vw; text-align: center;
}

/* ── olum akisi (sol ust) ──────────────────────────────────────── */
#akis {
  position: absolute; left: calc(4px * var(--hs)); top: calc(24px * var(--hs));
  display: flex; flex-direction: column; gap: calc(2px * var(--hs));
}
#akis div {
  background: rgba(0, 0, 0, .32);
  padding: calc(1px * var(--hs)) calc(3px * var(--hs));
  animation: akis-gir .18s ease-out;
}
#akis .kim { color: #ffe066; }
#akis .kilic { color: #dcdcdc; }
@keyframes akis-gir { from { opacity: 0; transform: translateX(calc(-6px * var(--hs))); } }

/* ── bolge uyarisi ─────────────────────────────────────────────── */
/* nowrap DEGIL: Rusca "БЕЗОПАСНАЯ ЗОНА" dar ekranda iki yandan tasiyor. */
#bolge {
  position: absolute; left: 50%; top: 26%;
  transform: translateX(-50%);
  text-align: center; max-width: 94vw;
  font-size: calc(14px * var(--hs));
  opacity: 0; transition: opacity .35s;
}
#bolge.gor { opacity: 1; }
#bolge.guvenli { color: #55ff55; }
#bolge.savas { color: #ff5555; }
#bolge small { display: block; font-size: calc(7px * var(--hs)); color: #e0e0e0; }

/* ── alt: kalpler + envanter cubugu ────────────────────────────── */
#alt {
  position: absolute; left: 50%; bottom: calc(4px * var(--hs));
  transform: translateX(-50%);
  width: calc(182px * var(--hs));
  max-width: 100vw;
}

#kalpler {
  height: calc(9px * var(--hs));
  margin-bottom: calc(2px * var(--hs));
  position: relative;
}
#kalpler i {
  position: absolute; bottom: 0;
  width: calc(9px * var(--hs)); height: calc(9px * var(--hs));
  background-size: 100% 100%;
  image-rendering: pixelated;
}
#kalpler.dusuk { animation: kalp-at .35s ease-in-out; }
@keyframes kalp-at { 50% { transform: translateY(calc(-2px * var(--hs))); } }

#cubuk {
  position: relative;
  width: calc(182px * var(--hs)); height: calc(22px * var(--hs));
  background: rgba(0, 0, 0, .45);
  border: var(--px) solid rgba(255, 255, 255, .18);
  display: flex; padding: var(--px);
}
#cubuk .yuva {
  width: calc(20px * var(--hs)); height: calc(20px * var(--hs));
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
#cubuk .yuva.secili {
  outline: calc(2px * var(--hs)) solid #f0f0f0;
  outline-offset: calc(-1px * var(--hs));
}
#cubuk .yuva img {
  width: calc(16px * var(--hs)); height: calc(16px * var(--hs));
  image-rendering: pixelated;
}

/* ── dokunmatik ────────────────────────────────────────────────────
   Olculer `--dok` ile: dokunma hedefi parmak boyuna gore, GUI olcegine
   gore DEGIL.  Telefonda --hs 1 oluyor; dugmeleri ona baglasaydik 30px
   kalirdi (parmak icin en az ~44px gerekiyor).
   Guvenli alan (centik/ana cubuk) env() ile ekleniyor.               */
:root {
  --dok: 1;                               /* arayuz.js yaziyor */
  --dok-alt: calc(10px * var(--dok) + env(safe-area-inset-bottom, 0px));
  --dok-sol: calc(10px * var(--dok) + env(safe-area-inset-left, 0px));
  --dok-sag: calc(10px * var(--dok) + env(safe-area-inset-right, 0px));
}

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

/* Kayan kol: dokunulan yere tasindigi icin konumu JS veriyor. */
#dok-kol {
  position: absolute; left: 0; top: 0;
  width: calc(120px * var(--dok)); height: calc(120px * var(--dok));
  margin: calc(-60px * var(--dok)) 0 0 calc(-60px * var(--dok));
  border-radius: 50%;
  background: rgba(0, 0, 0, .22); border: 2px solid rgba(255, 255, 255, .30);
  pointer-events: none;                   /* dokunmalari belge dinliyor */
  transition: opacity .12s;
}
#dok-kol.pasif { opacity: .35; }
#dok-kol i {
  position: absolute; left: 50%; top: 50%;
  width: calc(48px * var(--dok)); height: calc(48px * var(--dok));
  margin: calc(-24px * var(--dok)) 0 0 calc(-24px * var(--dok));
  border-radius: 50%; background: rgba(255, 255, 255, .45);
  border: 2px solid rgba(255, 255, 255, .5);
}

#dok button {
  position: absolute; pointer-events: auto;
  border: 2px solid rgba(255, 255, 255, .32);
  background: rgba(0, 0, 0, .34); color: #fff;
  font-size: calc(26px * var(--dok)); font-family: inherit; line-height: 1;
  border-radius: 50%;
  -webkit-user-select: none; user-select: none;
}
#dok button:active { background: rgba(255, 255, 255, .22); }
#dok-vur {
  right: var(--dok-sag); bottom: calc(var(--dok-alt) + 44px * var(--dok));
  width: calc(84px * var(--dok)); height: calc(84px * var(--dok));
  font-size: calc(34px * var(--dok));
}
#dok-zipla {
  right: calc(var(--dok-sag) + 92px * var(--dok)); bottom: var(--dok-alt);
  width: calc(66px * var(--dok)); height: calc(66px * var(--dok));
}

/*
  DIKEYDE dugmeler sag kenarda DIKEY sutun.  Yatay dizilim envanter
  cubugunun uzerine biniyordu: cubuk ortada ve dikeyde ekranin yarisini
  kapliyor, sagda yalnizca ~95px bos kaliyor.
*/
body.dikey #dok-vur {
  right: var(--dok-sag);
  bottom: calc(var(--dok-alt) + 96px * var(--dok));
}
body.dikey #dok-zipla {
  right: calc(var(--dok-sag) + 8px * var(--dok));
  bottom: calc(var(--dok-alt) + 26px * var(--dok));
}

/*
  Gorunurluk kurallarinin ozguluk (specificity) degeri, gizledigi
  kuraldan YUKSEK olmali: `#menu .tuslar` ve `#ust-sol > *` birer kimlik
  seciciyle geliyor, duz sinif seciciyle yazilan `display:none` onlari
  yenemiyordu ve iki ipucu listesi birden gorunuyordu.
*/
#menu .tuslar.dokunmatik { display: none; }
body.mobil #menu .tuslar.klavye { display: none; }
body.mobil #menu .tuslar.dokunmatik { display: grid; }

/* Yalniz dokunmatikte gorunen HUD dugmeleri */
body:not(.mobil) #ust-sol .dok-ek { display: none; }
body.mobil #ust-sol .dok-ek {
  display: flex; align-items: center; justify-content: center;
  min-width: calc(30px * var(--dok)); font-size: calc(15px * var(--dok));
}
body.mobil #ust-sol > * { padding: calc(4px * var(--hs)) calc(5px * var(--hs)); }

/*
  iOS Safari, yazi tipi 16px'in altindaki bir alana odaklaninca sayfayi
  ZORLA yakinlastiriyor ve oyun ekrani kayiyor.  Ad alani bu yuzden
  dokunmatikte en az 16px.
*/
@media (pointer: coarse) {
  #menu input { font-size: max(16px, var(--yazi)); }
}

/*
  Kostum kartlari mobilde `--dok` ile buyuyor.  GUI olcegine bagli
  kalsalardi telefonda 30px'lik dokunma hedefi olurlardi; parmak icin
  en az ~44px gerekiyor.
*/
body.mobil #dukkan .izgara {
  grid-template-columns: repeat(auto-fill, minmax(calc(52px * var(--dok)), 1fr));
}
body.mobil .kostum-kart canvas {
  width: calc(26px * var(--dok)); height: calc(52px * var(--dok));
}
body.mobil .kostum-kart b { font-size: calc(9px * var(--dok)); }
body.mobil .kostum-kart .rozet {
  font-size: calc(8px * var(--dok)); bottom: calc(11px * var(--dok));
  padding: 0 calc(3px * var(--dok));
}
body.mobil #kostumler .kostum-kart { width: calc(64px * var(--dok)); }
body.mobil #kostumler .kostum-kart canvas {
  width: calc(32px * var(--dok)); height: calc(64px * var(--dok));
}

/* ══ Tab listesi ══════════════════════════════════════════════════ */
#liste {
  position: fixed; left: 50%; top: calc(10px * var(--hs));
  transform: translateX(-50%);
  max-width: 96vw; max-height: 80vh; overflow: auto;
  background: rgba(0, 0, 0, .55);
  padding: calc(4px * var(--hs));
  font-size: var(--yazi);
  text-shadow: var(--px) var(--px) 0 var(--golge);
  pointer-events: none; z-index: 5;
}
#liste b { display: block; text-align: center; color: #ffe066; margin-bottom: calc(3px * var(--hs)); }
#liste table { border-collapse: collapse; }
#liste td {
  padding: calc(1px * var(--hs)) calc(5px * var(--hs));
  background: rgba(255, 255, 255, .08);
}
#liste td.s { color: #ff5555; text-align: right; }
#liste tr.ben td { background: rgba(85, 255, 85, .16); }

/* ══ Olum ekrani ══════════════════════════════════════════════════ */
#olum {
  position: fixed; inset: 0; z-index: 8;
  background: rgba(150, 0, 0, .45);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(6px * var(--hs));
  font-size: var(--yazi); text-shadow: var(--px) var(--px) 0 var(--golge);
}
#olum h2 { margin: 0; font-size: calc(24px * var(--hs)); font-weight: normal; }
#olum p { margin: 0; color: #ffdddd; }

/* ══ Duraklatma ═══════════════════════════════════════════════════ */
#duraklat {
  position: fixed; inset: 0; z-index: 8;
  background: rgba(0, 0, 0, .55);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--yazi); text-shadow: var(--px) var(--px) 0 var(--golge);
}
#duraklat .kutu { text-align: center; display: grid; gap: calc(6px * var(--hs)); justify-items: center; }
#duraklat .diller { margin: 0; }
#duraklat h2 { margin: 0; font-size: calc(16px * var(--hs)); font-weight: normal; }
#duraklat .ip { color: #b8b8b8; margin: 0; }

/* ══ Kostum dukkani ═══════════════════════════════════════════════ */
#dukkan {
  position: fixed; inset: 0; z-index: 11;
  background: rgba(0, 0, 0, .62);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--yazi); text-shadow: var(--px) var(--px) 0 var(--golge);
  padding: calc(6px * var(--hs));
}
/*
  Genislik: olcek 1'de `230px * hs` yalniz 230px oluyor ve dip yazisi
  bes satira sariyor — panel metinden ibaret kaliyordu.  `max(360px, …)`
  tabani koyuyor, `96vw` de kucuk ekranda tasmayi engelliyor.
*/
#dukkan .pencere {
  background: rgba(22, 22, 26, .95);
  border: var(--px) solid rgba(255, 255, 255, .22);
  box-shadow: inset calc(2px * var(--hs)) calc(2px * var(--hs)) 0 rgba(255, 255, 255, .08);
  width: min(96vw, max(360px, calc(230px * var(--hs))));
  max-height: 92vh;
  display: flex; flex-direction: column;
}
#dukkan header {
  display: flex; align-items: center; justify-content: space-between;
  gap: calc(6px * var(--hs));
  padding: calc(4px * var(--hs)) calc(5px * var(--hs));
  background: rgba(0, 0, 0, .45);
}
#dukkan h2 { margin: 0; font-size: calc(10px * var(--hs)); font-weight: normal; color: #ffe066; }
#dukkan-kapat {
  font-family: inherit; font-size: calc(9px * var(--hs)); line-height: 1;
  color: #fff; background: transparent; border: none; cursor: pointer;
  padding: 0 calc(2px * var(--hs));
}
#dukkan-kapat:hover { color: #ff6b6b; }
/* Kalan yuksekligi kartlar aliyor; dip yazisi degil. */
#dukkan-govde { flex: 1 1 auto; min-height: 0; overflow: auto; padding: calc(5px * var(--hs)); }
#dukkan h3 {
  margin: 0 0 calc(3px * var(--hs));
  font-size: calc(7px * var(--hs)); font-weight: normal; color: #9fd8ff;
  letter-spacing: calc(1px * var(--hs));
}
#dukkan section + section { margin-top: calc(6px * var(--hs)); }
#dukkan .izgara {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(28px * var(--hs)), 1fr));
  gap: calc(2px * var(--hs));
}
#dukkan footer {
  padding: calc(3px * var(--hs)) calc(5px * var(--hs));
  background: rgba(0, 0, 0, .35); color: #b8b8b8;
}

/* dukkan ve menu kartlari ayni gorunumu paylasiyor */
.kostum-kart {
  position: relative;
  font-family: inherit; font-size: calc(6px * var(--hs)); color: #dcdcdc;
  text-shadow: var(--px) var(--px) 0 var(--golge);
  background: rgba(0, 0, 0, .42);
  border: var(--px) solid rgba(255, 255, 255, .22);
  padding: calc(2px * var(--hs)) calc(1px * var(--hs)) calc(1px * var(--hs));
  cursor: pointer;
  display: grid; justify-items: center; gap: calc(1px * var(--hs));
}
.kostum-kart:hover { border-color: #fff; background: rgba(255, 255, 255, .12); }
.kostum-kart.secili { border-color: #55ff55; background: rgba(85, 255, 85, .14); color: #fff; }
.kostum-kart canvas {
  width: calc(13px * var(--hs)); height: calc(26px * var(--hs));
  image-rendering: pixelated;
}
.kostum-kart.kilitli canvas { filter: brightness(.45) grayscale(.7); }
.kostum-kart b {
  font-weight: normal; font-size: calc(5px * var(--hs));
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kostum-kart .rozet {
  position: absolute; left: 50%; bottom: calc(6.5px * var(--hs));
  transform: translateX(-50%);
  font-size: calc(5px * var(--hs)); font-style: normal;
  background: #b8362f; color: #fff;
  padding: 0 calc(2px * var(--hs));
  border: var(--px) solid rgba(0, 0, 0, .5);
  white-space: nowrap;
}

/* ══ Odul paneli ══════════════════════════════════════════════════ */
#odul {
  position: fixed; inset: 0; z-index: 12;
  background: rgba(0, 0, 0, .68);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--yazi); text-shadow: var(--px) var(--px) 0 var(--golge);
}
#odul .kutu {
  text-align: center;
  background: rgba(20, 20, 24, .92);
  border: var(--px) solid rgba(255, 255, 255, .22);
  padding: calc(8px * var(--hs));
  display: grid; gap: calc(4px * var(--hs)); justify-items: center;
  /* Uzun aciklama (Rusca) dar ekranda kutuyu tasiriyordu.  Alt taban
     360px: olcek 1'de panel metin sutunu genisliginde kaliyordu. */
  width: min(94vw, max(340px, calc(210px * var(--hs))));
  max-height: 94vh; overflow: auto;
}
#odul p { overflow-wrap: anywhere; }
#odul .dugmeler { flex-wrap: wrap; justify-content: center; }
#odul h2 { margin: 0; font-size: calc(11px * var(--hs)); font-weight: normal; color: #ffe066; }
#odul p { margin: 0; }
#odul .ip { color: #b8b8b8; }
#odul #odul-ad { color: #55ff55; font-size: calc(10px * var(--hs)); }
#odul-onizleme canvas {
  width: calc(28px * var(--hs)); height: calc(56px * var(--hs));
  image-rendering: pixelated;
}
#odul .dugmeler { display: flex; gap: calc(4px * var(--hs)); }
#odul-durum:empty { display: none; }

/* ══ Minecraft dugmesi ════════════════════════════════════════════ */
.mc-dugme {
  font-family: inherit; font-size: var(--yazi); color: #fff;
  text-shadow: var(--px) var(--px) 0 var(--golge);
  background: #6f6f6f;
  border: var(--px) solid #000;
  box-shadow:
    inset calc(2px * var(--hs)) calc(2px * var(--hs)) 0 rgba(255, 255, 255, .28),
    inset calc(-2px * var(--hs)) calc(-2px * var(--hs)) 0 rgba(0, 0, 0, .38);
  padding: calc(5px * var(--hs)) calc(12px * var(--hs));
  cursor: pointer;
}
.mc-dugme:hover { background: #7e8fa0; }
.mc-dugme:active { box-shadow: inset calc(2px * var(--hs)) calc(2px * var(--hs)) 0 rgba(0, 0, 0, .38); }
.mc-dugme.buyuk { font-size: calc(11px * var(--hs)); padding: calc(7px * var(--hs)) calc(26px * var(--hs)); }

/* ══ Acilis menusu ════════════════════════════════════════════════ */
/* Menunun arkasinda 3B sahne donuyor (oyun.js menu kamerasi):
   arka plan SAYDAM, uzerine yalniz karartma katmani biniyor. */
/*
  Dikey ortalama `margin:auto` ile, `align-items:center` ile DEGIL:
  icerik ekrandan uzun oldugunda flex ortalamasi tasan ustu kirpiyor ve
  o kisma kaydirilamiyor (basligi bir daha goremiyorsun).
*/
#menu {
  position: fixed; inset: 0; z-index: 10;
  display: flex; justify-content: center;
  background: transparent;
  overflow: auto;
}
#menu::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(rgba(0, 0, 0, .30), rgba(0, 0, 0, .62));
  pointer-events: none;
}
#menu .ic {
  position: relative; z-index: 1;
  margin: auto;
  max-width: 100vw; box-sizing: border-box;
  text-align: center;
  font-size: var(--yazi);
  text-shadow: var(--px) var(--px) 0 var(--golge);
  padding: calc(7px * var(--hs));
  background: rgba(0, 0, 0, .42);
  border: var(--px) solid rgba(255, 255, 255, .16);
}
/* ── dil secici (bayraklar) ────────────────────────────────────── */
.diller {
  display: flex; justify-content: center; gap: calc(3px * var(--hs));
  margin-bottom: calc(5px * var(--hs));
}
.diller button {
  background: rgba(0, 0, 0, .38);
  border: var(--px) solid rgba(255, 255, 255, .22);
  padding: calc(1px * var(--hs));
  cursor: pointer; line-height: 0;
}
.diller button:hover { border-color: #fff; }
.diller button.secili { border-color: #55ff55; background: rgba(85, 255, 85, .16); }
.bayrak {
  display: block;
  width: calc(16px * var(--hs)); height: calc(10px * var(--hs));
  image-rendering: pixelated;
}

/* Menude marka yok; yerine mod rozeti var. */
#menu .mod-rozet {
  display: inline-flex; align-items: center; gap: calc(4px * var(--hs));
  margin: 0 0 calc(5px * var(--hs));
  padding: calc(3px * var(--hs)) calc(9px * var(--hs));
  background: rgba(0, 0, 0, .45);
  border: var(--px) solid rgba(255, 255, 255, .22);
  font-size: calc(11px * var(--hs));
}
#menu .mod-rozet span { color: #ffe066; }
#menu .mod-rozet b { color: #55ff55; font-weight: normal; letter-spacing: calc(1px * var(--hs)); }
#menu .mod-rozet em {
  font-style: normal; color: #dcdcdc; font-size: calc(7px * var(--hs));
}
#menu .alt { margin: 0 0 calc(6px * var(--hs)); color: #dcdcdc; }
#menu .ad-satir { display: flex; gap: calc(4px * var(--hs)); align-items: center; justify-content: center; margin-bottom: calc(6px * var(--hs)); }
#menu input {
  font-family: inherit; font-size: var(--yazi); color: #fff;
  background: #000; border: var(--px) solid #a0a0a0;
  padding: calc(4px * var(--hs)) calc(6px * var(--hs));
  width: calc(90px * var(--hs)); text-align: center;
}
#menu input:focus { outline: none; border-color: #fff; }
/* ── kostum secimi ─────────────────────────────────────────────── */
#menu .bolum {
  margin: 0 0 calc(4px * var(--hs));
  color: #ffe066;
}
/* Ana menude yalniz iki temel karakter var (gerisi oyun ici dukkanda). */
#kostumler {
  display: flex; justify-content: center;
  gap: calc(4px * var(--hs));
  margin: 0 auto calc(7px * var(--hs));
}
#kostumler .kostum-kart { width: calc(34px * var(--hs)); }
#kostumler .kostum-kart canvas {
  width: calc(16px * var(--hs)); height: calc(32px * var(--hs));
}
#kostumler .kostum-kart b { font-size: calc(6px * var(--hs)); }

#menu .not-kucuk {
  margin: calc(-3px * var(--hs)) 0 calc(7px * var(--hs));
  color: #9fd8ff; font-size: calc(6px * var(--hs));
}
#menu .tuslar {
  list-style: none; margin: calc(7px * var(--hs)) auto 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(1px * var(--hs)) calc(10px * var(--hs));
  /* Genis: Rusca etiketler ("движение") dar sutunda alt satira tasiyor.
     Ama pencereden de tasmasin — min() ikisini birden tutuyor. */
  max-width: min(100%, calc(240px * var(--hs)));
  text-align: left; color: #dcdcdc;
}
#menu .tuslar b { color: #ffe066; }
#menu .not { color: #55ff55; margin: calc(8px * var(--hs)) 0 0; }

/* ══ Yukleme ══════════════════════════════════════════════════════ */
#yukleme {
  position: fixed; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  background: #1a1a1a; color: #fff;
  font-size: var(--yazi); text-shadow: var(--px) var(--px) 0 var(--golge);
}
#yukleme.bitti { display: none; }

/* Dar ekran: menudeki tus listesi tek sutun */
@media (max-width: 640px) {
  #menu .tuslar { grid-template-columns: 1fr; }
}