/* Cennettesin - mobil kabuk.
   index.html'in <style>'ini EZER, degistirmez: mobil.html icinde ondan sonra
   yuklenir. Masaustu surumu bu dosyayi hic gormez. */

:root {
  --mb: clamp(9px, 3.4vh, 19px);                 /* mobil temel olcu birimi */
  --mb: clamp(9px, 3.4dvh, 19px);                /* dvh: tarayici cubugu dusulmus gercek yukseklik */
  --btn: max(44px, calc(var(--mb) * 2.6));       /* normal dokunma hedefi (44 px alt sinir) */
  --btn-buyuk: max(64px, calc(var(--mb) * 4));   /* ates / E */
  --ust: max(8px, env(safe-area-inset-top));
  --sol: max(10px, env(safe-area-inset-left));
  --sag: max(10px, env(safe-area-inset-right));
  --alt: max(10px, env(safe-area-inset-bottom));
}

html, body {
  overscroll-behavior: none;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

/* ------------------------------------------------------ HUD'u kucult
   Masaustu degerleri (20px yazi, 160px mini harita) yatay bir telefonda
   ekranin yarisini yiyordu; hepsi ekran yuksekligine baglandi. */
#stats { top: var(--ust); left: var(--sol); font-size: calc(var(--mb) * 1.05); line-height: 1.4; }
#inv { font-size: calc(var(--mb) * .8); }
.bar { width: calc(var(--mb) * 8.6); height: calc(var(--mb) * .68); border-width: 1px; margin-top: calc(var(--mb) * .2); }
.bar-label { font-size: calc(var(--mb) * .68); margin-top: calc(var(--mb) * .45); }

#minimap { width: calc(var(--mb) * 6.6); height: calc(var(--mb) * 6.6); top: var(--ust); right: var(--sag); border-width: 2px; }
/* Zipla butonu haritanin hemen altinda duruyor; sayac onun da altina iner. */
#timer { top: calc(var(--ust) + var(--mb) * 7.2 + var(--btn) + var(--mb) * .5);
         right: var(--sag); font-size: calc(var(--mb) * .8); }

#crosshair { font-size: calc(var(--mb) * 1.1); opacity: .8; }
#prompt { bottom: 26%; font-size: calc(var(--mb) * 1.05); padding: 0 18vw; box-sizing: border-box; }
#toast { top: 20%; font-size: calc(var(--mb) * 1.1); padding: 0 12vw; box-sizing: border-box; }

/* El, sag alt kumanda kumesinin altinda kalmasin diye ice kayar */
#hand { right: 15vw; }
#ammo { right: var(--sag); bottom: calc(var(--alt) + var(--btn-buyuk) * 2 + var(--mb) * 1.4);
        font-size: calc(var(--mb) * 1.5); }
#ammo .rl { font-size: calc(var(--mb) * .85); }

/* Acilis ekrani: yatay telefonda 9 satirlik metin sigmiyordu */
/* Icerik sigmazsa: 'safe center' tasma halinde ustten hizalar (duz 'center'
   basligi ekranin disina itip erisilemez birakiyordu), touch-action da
   html/body'deki 'none'u delip parmakla kaydirmaya izin verir. */
#overlay, #pause, .screen { justify-content: safe center; touch-action: pan-y;
                            overflow-y: auto; overscroll-behavior: contain; }
#overlay { padding: calc(var(--ust) + 4px) var(--sag) var(--alt) var(--sol); box-sizing: border-box; }
#overlay h1 { font-size: calc(var(--mb) * 1.85); margin-bottom: 2px; }
#overlay p { font-size: calc(var(--mb) * .8); line-height: 1.42; max-width: 62em; margin: .5em 0; }
#overlay .go { margin-top: calc(var(--mb) * .5); font-size: calc(var(--mb) * 1.05); }
.name-row { margin-top: calc(var(--mb) * .4); font-size: calc(var(--mb) * .9); }
/* 16px alti girdi alanlarinda iOS Safari sayfayi zorla yakinlastirir */
.name-row input { font-size: 16px; padding: 5px 9px; width: 150px; }

#pause h1 { font-size: calc(var(--mb) * 2); }
#pause .sub { font-size: calc(var(--mb) * .85); margin-bottom: calc(var(--mb) * .8); }
#pause .mbtn { font-size: calc(var(--mb) * 1); padding: calc(var(--mb) * .62) calc(var(--mb) * 1); margin-top: calc(var(--mb) * .5); width: min(320px, 62vw); }
#pause .ayar-row { font-size: calc(var(--mb) * .85); width: min(320px, 62vw); }
#pause .ayar-row label { width: 40%; }
.screen h1 { font-size: calc(var(--mb) * 2); }
.screen p { font-size: calc(var(--mb) * .9); line-height: 1.6; max-width: 74vw; }
.screen .btn { font-size: calc(var(--mb) * 1.05); padding: calc(var(--mb) * .55) calc(var(--mb) * 1.2); margin-top: calc(var(--mb) * 1); }
.screen .opt { font-size: calc(var(--mb) * .92); padding: calc(var(--mb) * .55) calc(var(--mb) * .9); width: min(520px, 76vw); }

/* Telefon ve harita panelleri kaydirilabilir kalmali */
#phone { bottom: var(--alt); height: min(78vh, 420px); width: min(39vh, 210px); }
.p-body, .gal-grid { touch-action: pan-y; }
#bigmap { max-height: 74vh; max-width: 76vw; touch-action: none; }
#wheel-cv { touch-action: none; }

/* ---------------------------------------------------- dokunmatik kumanda
   z 27: cark (26) ve haritanin (25) ustunde, ESC menusu (32) ve gun sonu
   ekranlarinin (40) altinda - o katmanlar kendi butonlariyla calisir. */
#mobil { position: fixed; inset: 0; z-index: 27; pointer-events: none;
         font-family: "Courier New", monospace; }
#mobil .yok { display: none !important; }

#m-bak { position: absolute; inset: 0; pointer-events: auto; touch-action: none; }

#m-yon { position: absolute; left: 0; bottom: 0; width: 36%; height: 66%;
         pointer-events: auto; touch-action: none; }
#m-yon-halka { position: fixed; transform: translate(-50%, -50%); opacity: 0;
               border: 2px solid rgba(255,255,255,.28); border-radius: 50%;
               background: rgba(10,14,20,.24); transition: opacity .12s; }
#m-yon-tas { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
             width: 38%; height: 38%; border-radius: 50%;
             background: rgba(255,215,106,.62); border: 2px solid #000; }

#m-ust { position: absolute; top: var(--ust); left: 50%; transform: translateX(-50%);
         display: flex; gap: calc(var(--mb) * .5); pointer-events: none; }
#m-alt { position: absolute; right: var(--sag); bottom: var(--alt);
         display: flex; flex-direction: column; align-items: flex-end;
         gap: calc(var(--mb) * .55); pointer-events: none; }
/* Zipla: mini haritanin sag alt kosesinin biraz altinda */
#m-zipla { position: absolute; right: var(--sag); top: calc(var(--ust) + var(--mb) * 7.2); }
#m-iptal { position: absolute; top: var(--ust); right: var(--sag); }

.m-btn {
  pointer-events: auto; touch-action: none;
  width: var(--btn); height: var(--btn);
  border-radius: 50%; border: 2px solid #000;
  background: rgba(23,29,36,.62); color: #e8e8e8;
  font-family: inherit; font-size: calc(var(--mb) * 1.05); line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 0 rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.12);
  padding: 0;
}
.m-btn.m-buyuk { width: var(--btn-buyuk); height: var(--btn-buyuk);
                 font-size: calc(var(--mb) * 1.5); background: rgba(46,106,79,.6); }
/* E gorunur olmasi zaten "simdi ise yariyor" demek: belirirken kucuk bir
   hareketle goz cekmesi, kaciran oyuncuyu kurtariyor. */
#m-e { animation: m-belir .18s ease-out; }
@keyframes m-belir { from { opacity: 0; transform: translateY(35%) scale(.8); } }
@media (prefers-reduced-motion: reduce) { #m-e { animation: none; } }
/* Ates E'nin yaninda duruyor; renk ayrimi olmadan yanlis butona basiliyor */
.m-btn.m-ates { background: rgba(150,40,40,.6); }
.m-btn.m-ates.basik { background: rgba(255,120,90,.5); }
.m-btn.m-kucuk { width: calc(var(--mb) * 2.1); height: calc(var(--mb) * 2.1);
                 min-width: 40px; min-height: 40px; font-size: calc(var(--mb) * .85); }
.m-btn.basik { transform: translateY(2px); background: rgba(255,215,106,.32); }
/* E yakinda satilacak/alinacak bir sey oldugunda parlar (#prompt'tan okunur) */
.m-btn.vurgu { background: rgba(255,215,106,.75); color: #14181e;
               box-shadow: 0 0 calc(var(--mb) * .9) #ffd76a, 0 2px 0 rgba(0,0,0,.5); }

/* ------------------------------------------------------------ dikey uyarisi */
#m-dikey { position: fixed; inset: 0; z-index: 90; display: none;
           background: #0a0d12; color: #ffd76a; font-family: "Courier New", monospace;
           align-items: center; justify-content: center; text-align: center;
           font-size: 20px; line-height: 2; }
#m-dikey b { font-size: 46px; display: inline-block; animation: m-cevir 1.6s ease-in-out infinite; }
@keyframes m-cevir { 0%,100% { transform: rotate(0); } 50% { transform: rotate(90deg); } }
@media (orientation: portrait) { #m-dikey { display: flex; } }

/* --------------------------------------------------- tam ekran ipucu (iOS) */
#m-ipucu { margin-top: calc(var(--mb) * .5); font-size: calc(var(--mb) * .78);
           color: #ffd76a; line-height: 1.4; border: 1px solid #4a4030;
           background: rgba(255,215,106,.07); border-radius: .5em;
           padding: calc(var(--mb) * .35) calc(var(--mb) * .8); max-width: 80vw; flex: none; }
#m-ipucu span { display: block; margin-top: .15em; color: #9fb0a5;
                font-size: calc(var(--mb) * .68); }