/*
  oyun.css — HUD.

  ── OLCU BIRIMI ─────────────────────────────────────────────────────
  `--u` = referans ekran YUKSEKLIGININ %1'i.  Butun olculer referans
  oyunun 1920x969'luk ekran goruntusunden olculup 9.69'a bolunerek
  buraya yazildi, yani her sayi "referansta ekranin yuzde kaci"
  demek:

      ogeler              referans px      --u
      sayac hapi          525 x 52         54  x 5.4
      hediye simgesi      88               9.1
      menu dugmesi        125 x 110        12   x 11
      ray kule seridi     100 x 785        10.3 x 81
      ray avatari         72               7.4
      alt eylem dugmesi   215 x 62         22   x 6.4

  Genislige degil YUKSEKLIGE baglanmasinin sebebi: oyun yatay ve
  telefon yatayda 380 px yuksek, masaustu 1100 px, ama ikisinde de
  ekranda ayni SAYIDA dugme gorunmeli.  Genislige baglayan surumde
  yatay telefonda dugmeler ekranin yarisini yiyordu.

  ── YERLESIM ────────────────────────────────────────────────────────
  Referansta ray SOLDA, menu sutunu SAGDA.  Sahibi ikisini de saga
  istedi: ray en sag kenarda, menu sutunu onun hemen SOLUNDA.  Sol
  taraf carpan rozeti ve duyurulara kaliyor.

  ── VURUS HEDEFI ────────────────────────────────────────────────────
  HUD katmani `pointer-events: none`; yalnizca dugmeler geri aciyor.
  Yoksa saydam kaplayici tum ekranda tiklamayi yutuyor ve oyun
  dokunmatikte olu gorunuyor.  Ayrica fare ile kamera cevirme
  tuvalden basliyor — HUD tiklamayi yutarsa kamera da donmuyor.
*/

:root {
  /*
    Birim hem YUKSEKLIGE hem GENISLIGE bakiyor.

    Yalnizca `1vh` kullanan surumde dikey telefonda (390x844) birim
    8.4 px cikiyor ve sag taraf (ray + menu sutunu, 28.5u) ekranin
    %65'ini yiyordu.  `min()` ile dar ekranda genislik kazaniyor:
    1920x1004'te 10.5 px (degismedi), 390x844'te 6.6 px.
  */
  --u: clamp(5px, min(1vh, 1.7vw), 14px);
  --cizgi: #1e2a44;
  --panel: #16203a;
  --altin: #ffc531;
  --yesil: #46c05a;
  --sari: #ffd23f;
  --kirmizi: #ef4444;
  --mavi: #3b82f6;
  --yazi: #ffffff;
  --golge: 0 calc(var(--u) * 0.42) 0 rgba(0, 0, 0, .30);
  --kontur: calc(var(--u) * 0.42);
}

* { box-sizing: border-box; }

/*
  ── TELEFONDA UZUN BASMA MENUSU ─────────────────────────────────────
  Bir HUD dugmesine ya da yaziya biraz uzun basmak tarayicinin
  "Kopyala / Yapistir / Resmi kaydet" balonunu aciyordu: metin secilip
  maviye donuyor, parmak kalkinca oyun girdiyi kaybediyor ve balon
  ekranin ustunde asili kaliyor.  Uc ayri mekanizma var, ucu de
  kapatilmali:

    user-select      metnin secilmesi (masaustu ve Android)
    touch-callout    iOS Safari'nin uzun basma balonu (AYRI ozellik;
                     `user-select: none` onu KAPATMIYOR)
    contextmenu      Android Chrome'un menusu -> js/girdi.js

  Metin alanlari disarida tutuluyor (asagida): ad kutusuna
  yapistirabilmek gerekiyor.
*/
html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  background: #9dd3f0;
  font-family: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--yazi);
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

/*
  Ikonlar tiklamayi HIC gormesin: resim vurus hedefi olunca Android
  uzun basmada "Resmi kaydet" menusunu aciyor, masaustunde de ikon
  suruklenip hayalet resim olarak birakilabiliyor.  Olay yine altindaki
  dugmeye gidiyor — kayip yok.
*/
img { -webkit-user-drag: none; pointer-events: none; }

/*
  Metin alanlari kuralin DISINDA: secilebilir, uzun basmada kendi
  "Yapistir" balonunu acabilir ve dokunma davranisi normal.  Hepsini
  kapatan surumde oyuncu adini yapistiramiyor, elle yazmak zorunda
  kaliyordu.
*/
input, textarea, [contenteditable] {
  -webkit-user-select: text; user-select: text;
  -webkit-touch-callout: default;
  touch-action: auto;
}

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

.gizli { display: none !important; }

/* Simge kabi — icine js/simge.js'ten SVG konuyor. */
.sim { display: block; line-height: 0; }
/*
  KURAL SINIFA DEGIL `data-resim`E BAGLI.

  Simge kabi her zaman `.sim` ya da `[data-simge]` degil: video rozeti
  bir `<i>`, ray kulesi `<span class="ray-kule">`, panellerdeki buyuk
  simge de JS'te uretilen `<span class="buyuk-sim">`.  Kurali sinifla
  sinirlayan her surumde unutulan kap DOGAL boyunda cizildi — once
  96 px'lik video rozeti ekranin ortasina bindi, sonra 256 px'lik
  tirman ikonu "Ikinci Sans" panelinde yazinin ve dugmelerin uzerine
  tasti.

  `data-resim`i `js/simge.js -> simgeKoy()` her resim koydugunda
  KENDISI yaziyor; yani tek cikis noktasi ve yeni bir cagri yeri
  eklendiginde kural kendiliginden gecerli oluyor.  `[data-simge]`
  satirlari SVG yolu icin duruyor (o dalda `data-resim` silinior).
*/
.sim svg,
.sim img,
[data-simge] > svg,
[data-simge] > img,
[data-resim] > img { width: 100%; height: 100%; display: block; }
/* Cizilmis ikonlar dosyadan geliyor; oranlari korunsun, kutuya sigsin
   — gerdiginde kule ve haplar eziliyordu. */
[data-simge] > img, [data-resim] > img, .sim img { object-fit: contain; }

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

#hud {
  position: fixed; inset: 0; pointer-events: none;
  font-weight: 800;
}
#hud button { pointer-events: auto; }

/* ── ust serit: hediye + sayac hapi ─────────────────────────────── */

#ust {
  position: absolute; top: calc(var(--u) * 1); left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: flex-start;
  /* Referansta hediye kutusunun merkezi ekranin %31.6'sinda, hapin
     merkezi %50'sinde; aradaki bosluk 5u ediyor. */
  gap: calc(var(--u) * 5);
}

/* Hediye ve Gunluk ayni kaliptan.  Kural ID'ye baglandigi surumde
   Gunluk dugmesi olcusuz kaliyor ve SVG dogal boyunda, dev beyaz bir
   kart gibi aciliyordu. */
.hediye {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  background: none; border: 0; cursor: pointer; padding: 0;
  color: var(--yazi); font: inherit;
  filter: drop-shadow(0 calc(var(--u) * .25) 0 rgba(0, 0, 0, .35));
}
.hediye .sim { width: calc(var(--u) * 9.1); height: calc(var(--u) * 9.1); }
.hediye b {
  font-size: calc(var(--u) * 2.7); margin-top: calc(var(--u) * -.4);
  text-shadow: 0 0 4px #000, 0 calc(var(--u) * .18) 0 rgba(0, 0, 0, .6);
}
/* Odulun VIDEO ile acildigini dugmenin uzerinde soyleyen rozet.
   Panele girmeden once ne olacagini bilmek, "yanlislikla reklam
   actim" sikayetinin tek panzehiri. */
/* Cerceve YOK: rozet zaten cizim (bkz. `.eylem .video-rozet`). */
.hediye .video-rozet {
  position: absolute; left: calc(var(--u) * -1.2); top: calc(var(--u) * 4.4);
  width: calc(var(--u) * 4); height: calc(var(--u) * 4);
  display: block; line-height: 0;
}
#hediye .video-rozet svg { width: 100%; height: 100%; }
.hediye .rozet {
  position: absolute; top: calc(var(--u) * -.3); right: calc(var(--u) * -.6);
  width: calc(var(--u) * 2.6); height: calc(var(--u) * 2.6); border-radius: 50%;
  background: var(--kirmizi); color: #fff; font-style: normal;
  font-size: calc(var(--u) * 1.9); line-height: calc(var(--u) * 2.6); text-align: center;
  border: calc(var(--u) * .2) solid #fff; animation: nabiz 1.1s infinite;
}
@keyframes nabiz { 50% { transform: scale(1.18); } }

/* Sayac hapi da cizim: 384x150 kaynak, olculen kose 66 px. */
#ust-pano {
  display: flex; gap: calc(var(--u) * .5);
  background: none;
  border: calc(var(--u) * 1.5) solid transparent;
  border-image: url(../gorsel/ikon/hap-koyu.webp) 64 fill / calc(var(--u) * 1.5) / 0 stretch;
  padding: 0 calc(var(--u) * .4);
  height: calc(var(--u) * 6.2);
  align-items: center;
}
#ust-pano .sayac {
  display: flex; align-items: center; gap: calc(var(--u) * .7);
  background: rgba(10, 16, 30, .55);
  border-radius: calc(var(--u) * .9);
  padding: 0 calc(var(--u) * 2) 0 calc(var(--u) * .4);
  min-width: calc(var(--u) * 25);
}
#ust-pano .sim { width: calc(var(--u) * 4.6); height: calc(var(--u) * 4.6); flex: none; }
#ust-pano b { font-size: calc(var(--u) * 3.2); }

/* ── ust sag: cevrimici + ses + ayar ────────────────────────────── */

#ust-sag {
  position: absolute; right: calc(var(--u) * .9); top: calc(var(--u) * .9);
  display: flex; align-items: center; gap: calc(var(--u) * .6);
}
.cevrimici {
  display: flex; align-items: center; gap: calc(var(--u) * .4);
  background: none;
  border: calc(var(--u) * 1.1) solid transparent;
  border-image: url(../gorsel/ikon/hap-koyu.webp) 64 fill / calc(var(--u) * 1.1) / 0 stretch;
  padding: 0 calc(var(--u) * .5);
  font-size: calc(var(--u) * 1.9);
}
.cevrimici i { color: #4ade80; font-style: normal; }
.cevrimici em { font-style: normal; opacity: .8; }

/* Yuvarlak dugmelerin govdesi de cizimde: CSS dairesi ve dolgusu
   kalkti, `padding` sifir — cizim kendi kenar payini tasiyor. */
.yuvarlak {
  width: calc(var(--u) * 4.8); height: calc(var(--u) * 4.8);
  background: none; color: #fff;
  border: 0; cursor: pointer; padding: 0;
  display: grid; place-items: center;
  filter: drop-shadow(0 calc(var(--u) * .22) 0 rgba(0, 0, 0, .35));
}
.yuvarlak:hover { filter: drop-shadow(0 calc(var(--u) * .22) 0 rgba(0, 0, 0, .35)) brightness(1.12); }
.yuvarlak .sim { width: 100%; height: 100%; }
.yuvarlak.kapali { opacity: .55; }

/* Bayrak dugmesi: ic dolgu OTEKILERDEN AZ.  Ayni dolguyla bayrak
   yuvarlak zeminin icinde kucucuk bir pul gibi kaliyor ve hangi
   bayrak oldugu 28 px'te secilemiyordu. */
#btn-dil { padding: calc(var(--u) * .35); }

/*
   Dil menusu #ust-sag'a GORE konumlaniyor (top:100%), sabit bir
   koordinata gore degil: dikey telefonda ust serit asagi kayiyor ve
   sabit konumlu surumde menu dugmelerin uzerine biniyordu.
*/
#dil-menu {
  position: absolute; top: 100%; right: 0; margin-top: calc(var(--u) * .5);
  display: flex; flex-direction: column; gap: calc(var(--u) * .3);
  background: none;
  border: calc(var(--u) * 2.2) solid transparent;
  border-image: url(../gorsel/ikon/panel.webp) 79 fill / calc(var(--u) * 2.2) / 0 stretch;
  padding: 0;
  filter: drop-shadow(0 calc(var(--u) * .5) calc(var(--u) * .9) rgba(0, 0, 0, .45));
  z-index: 21;
}
#dil-menu button {
  display: flex; align-items: center; gap: calc(var(--u) * .8);
  background: transparent; border: 0; cursor: pointer;
  color: #e8eefc; font: inherit; font-weight: 700;
  font-size: calc(var(--u) * 2);
  padding: calc(var(--u) * .5) calc(var(--u) * .9);
  border-radius: calc(var(--u) * .8);
  white-space: nowrap;
}
#dil-menu button:hover { background: rgba(58, 84, 132, .8); }
#dil-menu button.secili { background: rgba(45, 108, 246, .85); }
#dil-menu .sim {
  width: calc(var(--u) * 3.2); height: calc(var(--u) * 3.2);
  flex: 0 0 auto; display: block;
}
#dil-menu .sim svg { width: 100%; height: 100%; display: block; }

/* ── sag kenar: gokdelen krokisi ────────────────────────────────── */

#ray {
  position: absolute; right: calc(var(--u) * 1); top: calc(var(--u) * 7);
  bottom: calc(var(--u) * 3); width: calc(var(--u) * 10.3);
  display: flex; flex-direction: column; align-items: center;
  /* Yukseklik cipi mutlak konumlu ve altta duruyor; serit onun
     uzerine binmesin.  0 m'deki oyuncu avatari da seridin dibinde
     duruyor ve yarisi asagi tasiyor — pay onu da hesaba katiyor. */
  padding-bottom: calc(var(--u) * 5.5);
}
.ray-kupa {
  width: calc(var(--u) * 5.4); height: calc(var(--u) * 5.4);
  line-height: 0; flex: none;
  filter: drop-shadow(0 calc(var(--u) * .2) 0 rgba(0, 0, 0, .4));
}
.ray-kupa svg { width: 100%; height: 100%; }

#ray-cizgi {
  position: relative; flex: 1; width: 100%;
  margin: calc(var(--u) * .5) 0;
}
/*
  Rayin olugu da cizim (kaynak 16x96 dikey kapsul, 9-dilim).

  Oluk `#ray-cizgi`in KENDISINE degil bir ::before'a veriliyor ve
  genisligi kaynagin oranina yakin tutuluyor.  Seridin tamamina
  (10.3u) yayan surumde 8 px'lik orta serit 54 px'e gerilip sag
  kenari bastan basa kaplayan kalin mavi bir levha cikiyordu; kule
  krokisi de onun altinda kayboluyordu.

  Kule (`.ray-kule`) olugun USTUNDE duruyor: oluk ne kadar
  yol oldugunu, kule nerede oldugunu anlatiyor.
*/
#ray-cizgi::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%;
  width: calc(var(--u) * 2.6); transform: translateX(-50%);
  /*
    Dilim YALNIZ ust/alt (6 0): kaynak zaten kapsul genisliginde,
    yanlardan dilmek gerekmiyor.  Kenar payi da yalnizca ust/alt,
    cunku sag/sol payi 0 dilimle birlestirmek icerik kutusunu sifir
    genislige dusuruyor ve hicbir sey cizilmiyor.

    Kaynak 16x96 ve OLCULEN kapak yuksekligi 6 px (tools/ikon-kes.py
    dilim degerini basiyor).  Gozle 46 yazan surumde kapak diye
    govdenin 40 px'i aliniyor ve 7u'ya geriliyordu.  Pay, kapagin
    yuvarlak kalmasi icin cizilen genislikle ayni oranda:
    6 x 2.6u / 16 = 0.98u.
  */
  border: solid transparent;
  border-width: calc(var(--u) * .98) 0;
  border-image: url(../gorsel/ikon/ray-yuva.webp) 6 0 fill / calc(var(--u) * .98) 0 / 0 stretch;
}
/* Kule krokisi rayin KENDISI: cizgi yerine gercek bir siluet, cunku
   "ne kadar tirmandim" sorusunun cevabi bir cubuktan cok kulenin
   neresinde oldugunu gormekle veriliyor. */
/*
  Ray, referanstaki gibi bir EYFEL KULESI silueti (gorsel/ikon/
  gokdelen.webp, 46x128).

  Kule seridin DIBINDE ve KENDI ORANINDA duruyor.  Bir zamanlar
  serit boyunca gerilirdi — o surumde kule bir SVG'ydi ve esneme
  bedava idi.  Cizim rastere donunce ayni esneme 4.4 kat dikey
  buyutme demek: kontur bulaniyor ve "ucuz" gorunuyor, ki bu arayuz
  zaten tam o yuzden reddedilmisti.  Artik yolu OLUK gosteriyor,
  kule de dipte bir yer imi.
*/
.ray-kule {
  position: absolute; left: 0; right: 0; bottom: 0;
  /* 14u: 24u'da spire yukari cikip S/G avatarlarinin arasina
     giriyordu — oyuncu isaretcileri okunaksizlasiyordu. */
  height: calc(var(--u) * 14); display: block; line-height: 0;
  filter: drop-shadow(0 0 calc(var(--u) * .35) rgba(0, 0, 0, .5));
}
.ray-kule svg { width: 100%; height: 100%; display: block; }

/*
  Sag kenardaki serit dar; hem km etiketleri hem oyuncu avatarlari
  onun SOLUNA sigmiyor.  Bolusum: avatarlar seridin USTUNDE (kule
  krokisinin uzerinde birer isaretci gibi), km etiketleri hemen
  solunda, menu sutunu daha da solda.  Ucunu de sola dizen surumde
  avatarlar menu dugmelerinin uzerine biniyordu.
*/
#ray-isaretler .isaret {
  position: absolute; right: calc(var(--u) * 10.8); transform: translateY(50%);
  font-size: calc(var(--u) * 2.2); white-space: nowrap;
  text-shadow: 0 0 3px #000, 0 1px 0 rgba(0, 0, 0, .6);
  opacity: .92;
}
#ray-isaretler .isaret::after {
  content: ''; position: absolute; right: calc(var(--u) * -1.1);
  top: 50%; width: calc(var(--u) * 1); height: 2px;
  background: rgba(255, 255, 255, .85);
}

.ray-oyuncu {
  position: absolute; right: calc(var(--u) * 2.4);
  transform: translateY(50%);
  display: flex; align-items: center;
  transition: bottom .3s linear;
}
/* Ok avatarin SOLUNDA ve kuleyi gosteriyor. */
.ray-oyuncu .ok {
  width: 0; height: 0; font-style: normal;
  border: calc(var(--u) * .8) solid transparent;
  border-left-color: #fff; margin-right: calc(var(--u) * -.3);
  order: -1;
}
/* Ayri sinif adi: ust sagdaki `.yuvarlak` dugmelerle ayni adi tasiyan
   surumde onlarin dolgu/arka planini miras aliyordu. */
.ray-oyuncu .avatar {
  width: calc(var(--u) * 5.4); height: calc(var(--u) * 5.4);
  border-radius: 50%; border: calc(var(--u) * .32) solid #fff;
  display: grid; place-items: center; padding: 0;
  font-size: calc(var(--u) * 2.4); color: #fff; font-weight: 800;
  box-shadow: var(--golge);
}
.ray-oyuncu.ben { z-index: 3; }
.ray-oyuncu.ben .avatar {
  border-color: var(--altin); color: #2b2000;
  width: calc(var(--u) * 7.4); height: calc(var(--u) * 7.4);
  font-size: calc(var(--u) * 3.2);
}
/*
  Yukseklik yazisi seride SIGMIYOR ("2.45KM" 10.3u'luk seritten genis)
  ve akista ortalandiginda tasan yari ekranin disinda kaliyordu.
  Cozum: seridin SAG kenarina cakili, sola dogru buyuyen bir cip.
*/
/* Cipin zemini de cizim — HUD'daki oteki haplarla ayni kalip. */
#ray-yukseklik {
  position: absolute; right: 0; bottom: 0;
  font-size: calc(var(--u) * 2.4); white-space: nowrap;
  background: none;
  border: calc(var(--u) * 1.2) solid transparent;
  border-image: url(../gorsel/ikon/hap-koyu.webp) 64 fill / calc(var(--u) * 1.2) / 0 stretch;
  padding: 0 calc(var(--u) * .4);
  text-shadow: 0 0 4px #000;
}

/* ── menu sutunu (rayin solunda) ────────────────────────────────── */

/* Sutun rayin km etiketlerinin de SOLUNDA duruyor.  16.5u'da duran
   surumde opak dugme "11KM" etiketinin ilk hanesini kesiyordu. */
#menu-sutun {
  position: absolute; right: calc(var(--u) * 21); top: calc(var(--u) * 9);
  display: flex; flex-direction: column; align-items: flex-end;
  gap: calc(var(--u) * 2.2);
}

/*
  DUGME GOVDESI ARTIK CSS DEGIL, CIZIM.

  Gradyan + kontur + golge ile CSS'te cizilen dugmeler "yapay zeka
  arayuzu" gerekcesiyle reddedildi.  Govde de ikon da tek bir cizim
  setinden geliyor (`gorsel/ikon/*.webp`); CSS yalnizca kutuyu ve
  yaziyi yerlestiriyor.

  Yazi dugmenin ICINDE degil ALTINDA: cizimde ikon ortada ve dugme
  yuzunun ~%70'ini kapliyor, yaziyi uzerine bindirmek ikonu okunmaz
  yapiyordu.  Alt basli duzen ayrica dort dilde de tasmiyor (uzun
  Rusca kelimeler icin `nowrap` yok, iki satira iniyor).
*/
.menu {
  width: calc(var(--u) * 12);
  display: flex; flex-direction: column; align-items: center;
  gap: calc(var(--u) * .2);
  background: none; border: 0; padding: 0;
  cursor: pointer; color: #fff; font: inherit;
  transition: transform .08s;
}
.menu .sim {
  width: calc(var(--u) * 10.4); height: calc(var(--u) * 10.4); flex: none;
  filter: drop-shadow(0 calc(var(--u) * .3) 0 rgba(0, 0, 0, .35));
}
.menu b {
  font-size: calc(var(--u) * 1.9); line-height: 1.02; text-align: center;
  text-shadow: 0 0 3px rgba(0, 0, 0, .75), 0 calc(var(--u) * .16) 0 rgba(0, 0, 0, .6);
}
.menu:active { transform: translateY(calc(var(--u) * .22)); }

/* ── sol alt: carpan + arkadas takviyesi ────────────────────────── */

/*
  Sol alt yigin: en altta arkadas satiri (1.4u + 4.6u boy), onun
  uzerinde carpan rozeti, en ustte dokunmatik cubuk.  Cizilmis haplar
  duz `rgba` haplardan ~1.2u daha yuksek (kenar payi cizimin kendisi)
  ve eski 5.2u degeri arkadas satirinin 6 px'ine giriyordu.
*/
#boost {
  position: absolute; left: calc(var(--u) * 1); bottom: calc(var(--u) * 6.6);
  display: flex; align-items: center; gap: calc(var(--u) * .5);
  background: none;
  border: calc(var(--u) * 1.2) solid transparent;
  border-image: url(../gorsel/ikon/hap-koyu.webp) 64 fill / calc(var(--u) * 1.2) / 0 stretch;
  padding: 0 calc(var(--u) * .6);
  font-size: calc(var(--u) * 2.2);
}
#boost .sim { width: calc(var(--u) * 3); height: calc(var(--u) * 3); }
#boost i {
  font-style: normal; background: var(--sari); color: #2b2000;
  border-radius: calc(var(--u) * .5); padding: 0 calc(var(--u) * .5);
  margin-left: calc(var(--u) * .3);
}

#arkadas {
  position: absolute; left: calc(var(--u) * 1); bottom: calc(var(--u) * 1.4);
  font-size: calc(var(--u) * 1.9);
  display: flex; align-items: center; gap: calc(var(--u) * .4);
  background: none;
  border: calc(var(--u) * 1.1) solid transparent;
  border-image: url(../gorsel/ikon/hap-koyu.webp) 64 fill / calc(var(--u) * 1.1) / 0 stretch;
  padding: 0 calc(var(--u) * .5);
}
#arkadas .sim { width: calc(var(--u) * 2.6); height: calc(var(--u) * 2.6); }

/* ── alt orta ───────────────────────────────────────────────────── */

#alt {
  position: absolute; left: 50%; bottom: calc(var(--u) * 1.2);
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  gap: calc(var(--u) * .7);
}

/* Takat cubugunun YUVASI cizim (384x123, olculen kose 52); dolgu
   hala CSS — o bir gosterge, gerilmesi gerekiyor. */
#takat {
  width: calc(var(--u) * 34); height: calc(var(--u) * 2.2);
  background: none;
  border: calc(var(--u) * .7) solid transparent;
  border-image: url(../gorsel/ikon/cubuk-yatay.webp) 45 fill / calc(var(--u) * .7) / 0 stretch;
  overflow: hidden;
}
#takat i {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(180deg, #7bf7a0, #2fa84f);
  transition: width .08s linear;
}
#takat.az i { background: linear-gradient(180deg, #ffd166, #e08b1a); }
#takat.bitti i { background: linear-gradient(180deg, #ff8a8a, #d32020); animation: yanip .35s infinite; }
@keyframes yanip { 50% { opacity: .35; } }

#alt-dugmeler { display: flex; gap: calc(var(--u) * 1); }

/* Alt siradaki uc dugme de ayni cizim setinden — menu sutunuyla ayni
   kalip: govde cizimde, yazi ikonun ALTINDA.  CSS gradyani, konturu
   ve golgesi kalkti; "yapay zeka arayuzu" izlenimini veren tam olarak
   o katmandi. */
.eylem {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: calc(var(--u) * .1);
  background: none; border: 0; padding: 0;
  font: inherit; font-size: calc(var(--u) * 1.9); color: #fff;
  cursor: pointer;
  transition: transform .08s, filter .12s;
}
.eylem .sim {
  width: calc(var(--u) * 9.2); height: calc(var(--u) * 9.2); flex: none;
  filter: drop-shadow(0 calc(var(--u) * .3) 0 rgba(0, 0, 0, .35));
}
.eylem b {
  text-align: center; line-height: 1.02;
  text-shadow: 0 0 3px rgba(0, 0, 0, .75), 0 calc(var(--u) * .16) 0 rgba(0, 0, 0, .6);
}
.eylem:active { transform: translateY(calc(var(--u) * .22)); }
.eylem.acik .sim { filter: drop-shadow(0 0 calc(var(--u) * .8) #fff) brightness(1.12) saturate(1.25); }
.eylem.acik::after {
  content: '●'; font-size: calc(var(--u) * 1.2); color: #fff;
  animation: nabiz .8s infinite;
}
/*
  Odullu video rozeti — dugmenin ust kosesinde, basmadan once
  videonun geldigini soyluyor.

  Rozetin KENDISI cizim (gorsel/ikon/video.webp: cerceveli bir ekran
  ve oynat ucgeni).  Etrafindaki koyu yuvarlak kutu + beyaz kontur
  CSS'ti ve cizilmis rozetin uzerine ikinci bir cerceve biniyordu —
  "yapay zeka arayuzu" izlenimini veren katmanin ta kendisi.

  Konum yaziya degil IKONA gore: dugmenin genisligini alttaki yazi
  belirliyor ("Auto Climb" ikondan genis) ve sag kenara yapisan
  surumde rozet ikondan kopup bosluga kaciyordu.  Yatay eksen
  ortadan olculuyor: ikon yarim genisligi 4.6u, rozet yarim
  genisligi 1.5u.
*/
.eylem .video-rozet {
  position: absolute; left: 50%; margin-left: calc(var(--u) * 3.1);
  top: calc(var(--u) * -.6);
  width: calc(var(--u) * 3); height: calc(var(--u) * 3);
  display: block; line-height: 0;
}
.eylem.acik .video-rozet { display: none; }

#ipucu {
  font-size: calc(var(--u) * 1.8); opacity: .85;
  text-shadow: 0 0 4px #000; min-height: calc(var(--u) * 2.2);
}
/* Kaide menzilindeyken cagri: buyur, sari ve nabizli — oyuncu yerdeki
   ipucu satirini yoksaymayi ogrenmis oluyor. */
#ipucu.cagri {
  opacity: 1; color: var(--sari);
  font-size: calc(var(--u) * 2.3);
  animation: nabiz 1.1s infinite;
}

/* ── bekleyen para (karaktere bagli) ────────────────────────────── */

#bekleyen { position: absolute; left: 0; top: 0; will-change: transform; }
#bekleyen .ic {
  /* Karakterin SAGINDA ve biraz YUKARISINDA.  Daha yakin duran
     surumde bas ustundeki isim etiketiyle ust uste biniyordu. */
  transform: translate(calc(var(--u) * 4.5), calc(-50% - var(--u) * 1.4));
  display: flex; flex-direction: column; align-items: flex-start;
  white-space: nowrap;
  background: none;
  border: calc(var(--u) * 1.3) solid transparent;
  border-image: url(../gorsel/ikon/hap-koyu.webp) 64 fill / calc(var(--u) * 1.3) / 0 stretch;
  padding: 0 calc(var(--u) * .6);
}
/* Sag kenara sigmayinca karakterin SOLUNA geciyor (js/arayuz.js ->
   `_bekleyenYani`).  Dar telefonda etiket ekranin disinda kaliyordu. */
#bekleyen.sol .ic {
  transform: translate(calc(-100% - var(--u) * 4.5), calc(-50% - var(--u) * 1.4));
}
#bekleyen b {
  font-size: calc(var(--u) * 1.9); color: var(--sari);
  text-shadow: 0 0 4px #000, 0 calc(var(--u) * .18) 0 rgba(0, 0, 0, .6);
}
#bekleyen span { display: flex; align-items: center; gap: calc(var(--u) * .4); }
#bekleyen .sim { width: calc(var(--u) * 3); height: calc(var(--u) * 3); }
#bekleyen em {
  font-style: normal; font-size: calc(var(--u) * 2.8);
  text-shadow: 0 0 4px #000, 0 calc(var(--u) * .18) 0 rgba(0, 0, 0, .6);
}

/* ── inis raporu ────────────────────────────────────────────────── */

#inis {
  position: absolute; left: calc(var(--u) * 2); top: 42%;
  display: flex; flex-direction: column; align-items: flex-start;
  opacity: 0; transition: opacity .25s; pointer-events: none;
}
#inis.acik { opacity: 1; }
#inis b {
  font-size: calc(var(--u) * 7.5); color: var(--sari);
  text-shadow: 0 0 6px #000, 0 calc(var(--u) * .4) 0 rgba(0, 0, 0, .6);
  animation: firla .45s cubic-bezier(.2, 1.6, .4, 1);
}
/*
  Kare basinda OPACITY YOK, yalnizca olcek.  Opaklikla baslayan
  surumde: CSS animasyonlari gizli sekmede ILERLEMIYOR, animasyon ilk
  karesinde takili kaliyor ve odeme tutari (oyunun en onemli sayisi)
  hic gorunmuyordu.  Olcekle takilirsa en kotu ihtimalle kucuk kaliyor.
*/
@keyframes firla { from { transform: scale(.4); } }
#inis span {
  font-size: calc(var(--u) * 3.4); color: #67e8f9;
  text-shadow: 0 0 5px #000, 0 calc(var(--u) * .3) 0 rgba(0, 0, 0, .6);
}
#inis em {
  font-style: normal; font-size: calc(var(--u) * 1.9); color: #d1fae5;
  text-shadow: 0 0 4px #000;
}
#inis em.kotu { color: #fca5a5; }

/* ── bant / duyurular ───────────────────────────────────────────── */

#bant {
  position: absolute; left: 50%; top: 22%; transform: translateX(-50%);
  font-size: calc(var(--u) * 4.4); color: var(--altin);
  text-shadow: 0 0 8px #000, 0 calc(var(--u) * .35) 0 rgba(0, 0, 0, .6);
  opacity: 0; pointer-events: none; white-space: nowrap;
}
#bant.acik { animation: bant 2.4s forwards; }
@keyframes bant {
  0% { opacity: 0; transform: translateX(-50%) scale(.6); }
  14% { opacity: 1; transform: translateX(-50%) scale(1); }
  78% { opacity: 1; }
  100% { opacity: 0; }
}

#duyurular {
  position: absolute; left: calc(var(--u) * 1); top: calc(var(--u) * 1);
  display: flex; flex-direction: column; gap: calc(var(--u) * .4);
}
.duyuru {
  background: rgba(18, 26, 44, .68); border-radius: calc(var(--u) * .6);
  padding: calc(var(--u) * .3) calc(var(--u) * .9);
  font-size: calc(var(--u) * 1.7); font-weight: 700;
  animation: kaydir .3s;
}
@keyframes kaydir { from { transform: translateX(calc(var(--u) * -3)); opacity: 0; } }

/* ── dokunmatik ─────────────────────────────────────────────────── */

#dok { display: none; }
/* Secici `body.mobil` DEGIL `.mobil`: kare alma araci HUD'u bir
   <div> icine klonluyor ve `body` etiketine bagli kural orada
   eslesmiyordu — dokunmatik kontroller ekran goruntulerinde hic
   gorunmuyordu (oyunda yerindeyken). */
.mobil #dok { display: block; }
/* 12.6u: 9u'da cubugun alti carpan rozetinin ust 12 px'ine giriyordu
   (dokunmatik + genis ekran; olculdu 1280x800). */
#dok-kol {
  position: absolute; left: calc(var(--u) * 2.5); bottom: calc(var(--u) * 12.6);
  width: calc(var(--u) * 16); height: calc(var(--u) * 16);
  background: url(../gorsel/ikon/joystick-taban.webp) center / contain no-repeat;
  border: 0;
  pointer-events: auto; touch-action: none;
}
#dok-kol i {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--u) * 6.4); height: calc(var(--u) * 6.4);
  margin: calc(var(--u) * -3.2) 0 0 calc(var(--u) * -3.2);
  background: url(../gorsel/ikon/joystick-topuz.webp) center / contain no-repeat;
  filter: drop-shadow(0 calc(var(--u) * .2) calc(var(--u) * .3) rgba(0, 0, 0, .4));
}
#dok-zipla {
  position: absolute; right: calc(var(--u) * 28); bottom: calc(var(--u) * 9);
  width: calc(var(--u) * 11); height: calc(var(--u) * 11);
  background: url(../gorsel/ikon/zipla.webp) center / contain no-repeat;
  border: 0;
  pointer-events: auto;
  filter: drop-shadow(0 calc(var(--u) * .3) 0 rgba(0, 0, 0, .35));
}
/* Zipla okunun kendisi cizimin icinde; HTML'deki yedek SVG gizli. */
#dok-zipla svg { display: none; }

/* ══ Panel ═══════════════════════════════════════════════════════ */

#panel {
  position: fixed; inset: 0; display: none;
  background: rgba(6, 10, 20, .62);
  align-items: center; justify-content: center;
  padding: calc(var(--u) * 2);
  z-index: 20;
}
#panel.acik { display: flex; }
/*
  PANEL CERCEVESI DE CIZIM — 9-DILIM.

  Govde CSS gradyaniyla ciziliyordu; "yapay zeka arayuzu" gerekcesinin
  ikinci yarisi (HUD) tam olarak bu katmandi.  Cerceve artik
  `gorsel/ikon/panel.webp`, `border-image` ile dokuz parcaya
  bolunuyor: dort kose sabit, kenarlar geriliyor, ortasi (`fill`)
  panelin govdesi.

  DILIM DEGERI OLCULDU, yazilmadi: kaynak 512x305 ve kose yaricapi 92
  px (sol kenar sutununun opak olmaya basladigi satir).  Kenar
  kalinligi 2.6u — kose 92 px'ten ~36 px'e iniyor, orani bozulmuyor.
  `overflow: hidden` KALKTI: yuvarlak kose artik cizimde, ve kirpma
  baslik bandini kesiyordu.
*/
#panel .kutu {
  width: min(96vw, calc(var(--u) * 90));
  max-height: 92vh; display: flex; flex-direction: column;
  background: none;
  border: calc(var(--u) * 4.4) solid transparent;
  border-image: url(../gorsel/ikon/panel.webp) 79 fill / calc(var(--u) * 4.4) / 0 stretch;
  filter: drop-shadow(0 calc(var(--u) * 1) calc(var(--u) * 1.6) rgba(0, 0, 0, .5));
}
/* Baslik seridi cerceve ICINDE duruyor; kendi zemini `hap-mavi`
   cizimi.  Duz `rgba` zemin, cerceve cizime gecince yamali duruyordu
   — koseleri keskin, cercevenin koseleri yuvarlak. */
#panel header {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(var(--u) * .9) calc(var(--u) * 1.4);
  margin-bottom: calc(var(--u) * .6);
  border: calc(var(--u) * 1.6) solid transparent;
  border-image: url(../gorsel/ikon/hap-mavi.webp) 51 fill / calc(var(--u) * 1.6) / 0 stretch;
}
#panel h2 { margin: 0; font-size: calc(var(--u) * 3); letter-spacing: .5px; }
/* Kapat dugmesi de cizim (kirmizi yuvarlak kare + beyaz carpi).  CSS
   dairesi ve `✕` karakteri kalkti: yazi tipine gore carpi kimi
   sistemde ince, kimi sistemde kalin ciziliyordu. */
#panel-kapat {
  width: calc(var(--u) * 4.4); height: calc(var(--u) * 4.4);
  background: none; border: 0; padding: 0; cursor: pointer;
  line-height: 0;
  filter: drop-shadow(0 calc(var(--u) * .2) 0 rgba(0, 0, 0, .35));
}
#panel-kapat:active { transform: translateY(calc(var(--u) * .18)); }
#panel-govde {
  padding: calc(var(--u) * 1.6); overflow-y: auto;
  font-weight: 600; font-size: calc(var(--u) * 1.9);
  /*
    Govde kaydirilabilir tek yer.  `body`de `touch-action: none` var
    (oyun sirasinda sayfa kaymasin diye) ve dokunma davranisi hedefle
    kaydirilacak kap arasindaki butun degerlerin KESISIMI: burada
    acikca izin verilmezse dukkan listesi telefonda parmakla
    kaydirilamiyor.  `overscroll-behavior` de liste dibe gelince
    hareketin arkadaki sayfaya gecmesini engelliyor.
  */
  touch-action: pan-y;
  overscroll-behavior: contain;
  /* Isletim sisteminin gri kaydirma cubugu oyun panelinin icinde
     yabanci duruyor; panelin mavisine boyaniyor. */
  scrollbar-width: thin;
  scrollbar-color: #2f6fd0 rgba(4, 12, 28, .5);
}
#panel-govde::-webkit-scrollbar { width: calc(var(--u) * 1.1); }
#panel-govde::-webkit-scrollbar-track {
  background: rgba(4, 12, 28, .5); border-radius: 999px;
}
#panel-govde::-webkit-scrollbar-thumb {
  background: #2f6fd0; border-radius: 999px;
  border: 2px solid transparent; background-clip: content-box;
}
#panel-govde h3 {
  margin: calc(var(--u) * 1.4) 0 calc(var(--u) * .2);
  font-size: calc(var(--u) * 2.4); color: var(--altin);
}
#panel-govde p.alt { margin: 0 0 calc(var(--u) * .8); opacity: .72; font-size: calc(var(--u) * 1.7); }
#panel-govde p.bos { opacity: .75; text-align: center; padding: calc(var(--u) * 3.5) 0; }
#panel-govde .etiket { display: block; margin: calc(var(--u) * 1.4) 0 calc(var(--u) * .4); opacity: .8; }

/* Panelin para cipi de HUD'daki haplarla ayni cizim. */
.panel-para {
  display: flex; align-items: center; gap: calc(var(--u) * .6);
  background: none;
  border: calc(var(--u) * 1.6) solid transparent;
  border-image: url(../gorsel/ikon/hap-koyu.webp) 64 fill / calc(var(--u) * 1.6) / 0 stretch;
  padding: 0 calc(var(--u) * .6); width: fit-content;
  font-size: calc(var(--u) * 2.3);
}
.panel-para .sim { width: calc(var(--u) * 3); height: calc(var(--u) * 3); }

.izgara {
  display: grid; gap: calc(var(--u) * .9);
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 18), 1fr));
}
.kart {
  --vurgu: #94a3b8;
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: calc(var(--u) * .3);
  background: rgba(255, 255, 255, .07);
  border: calc(var(--u) * .3) solid var(--vurgu);
  border-radius: calc(var(--u) * 1);
  padding: calc(var(--u) * 1) calc(var(--u) * .6);
  color: #fff; font: inherit;
}
button.kart { cursor: pointer; }
.kart.sahip { background: rgba(70, 192, 90, .18); }
/* Kart simgesi hem emoji (kanatlar) hem canvas (pet/yumurta) olabilir. */
.kart .sim {
  font-size: calc(var(--u) * 4); line-height: 1;
  width: calc(var(--u) * 6.5); height: calc(var(--u) * 6.5);
  display: grid; place-items: center;
}
.kart .sim canvas { display: block; }
.kart .ad { font-size: calc(var(--u) * 1.8); text-align: center; }
.kart .guc { font-style: normal; font-size: calc(var(--u) * 1.5); opacity: .8; }
.kart .rozet {
  font-size: calc(var(--u) * 1.3); background: var(--yesil);
  border-radius: calc(var(--u) * .5); padding: 0 calc(var(--u) * .6);
  margin-top: calc(var(--u) * .3);
}
.kart .sans { display: flex; gap: calc(var(--u) * .3); font-style: normal; }
.kart .sans .nokta {
  font-size: calc(var(--u) * 1.2); color: #10203a; font-weight: 800;
  border-radius: calc(var(--u) * .4); padding: 0 calc(var(--u) * .4);
}
/*
  PANEL DUGMELERI DE CIZIM — TEK KAYNAK, RENGI SUZGECLE.

  Cizim setinde tek bir hap govdesi var (`hap-mavi`, olculen ana ton
  209 derece) ama panelde dort renk gerekiyor: yesil "satin al",
  kirmizi "sat/sil", notr ikincil ve pasif gri.  Zemin bir `::before`
  katmaninda duruyor ve YALNIZ o katman `hue-rotate` ile ceviriliyor —
  suzgec dugmenin kendisine verilseydi yazi ve ikon da donerdi.

  `isolation: isolate` sart: `z-index: -1` bir yigin baglami
  olmadan kartin kendi zemininin ARKASINA dusuyor ve dugme tumden
  kayboluyor.
*/
.al, .dugme {
  position: relative; isolation: isolate;
  background: none; border: 0;
  font: inherit; font-weight: 800; cursor: pointer;
}
.al::before, .dugme::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  border: var(--hap-pay) solid transparent;
  border-image: url(../gorsel/ikon/hap-mavi.webp) 51 fill / var(--hap-pay) / 0 stretch;
  filter: var(--hap-ton, none);
}

.kart .al {
  --hap-pay: calc(var(--u) * 1.5);
  --hap-ton: hue-rotate(-79deg);         /* 209 -> 130 (--yesil) */
  margin-top: calc(var(--u) * .5);
  color: #06210c; font-size: calc(var(--u) * 1.7);
  padding: 0 calc(var(--u) * .9); min-height: calc(var(--u) * 3.4);
  display: flex; align-items: center; gap: calc(var(--u) * .4);
}
.kart .al.pasif { --hap-ton: saturate(0) brightness(.72); color: #e2e8f0; cursor: not-allowed; }

.dugme {
  --hap-pay: calc(var(--u) * 2.4);
  --hap-ton: hue-rotate(-79deg);
  display: flex; align-items: center; justify-content: center;
  gap: calc(var(--u) * .8);
  width: 100%; margin-top: calc(var(--u) * .9);
  padding: calc(var(--u) * .6) calc(var(--u) * 1.2);
  font-size: calc(var(--u) * 2.1); color: #05230d;
}
.dugme .sim { width: calc(var(--u) * 2.8); height: calc(var(--u) * 2.8); }
.dugme.kirmizi { --hap-ton: hue-rotate(151deg); color: #fff; }
.dugme.ikincil { --hap-ton: saturate(.22) brightness(.85); color: #fff; }
.dugme:disabled { --hap-ton: saturate(0) brightness(.72); color: #e2e8f0; cursor: not-allowed; }
.al:active, .dugme:active { transform: translateY(calc(var(--u) * .18)); }

.metin {
  width: 100%; padding: calc(var(--u) * .9);
  /* 16px'in ALTI iOS Safari'de odaklaninca otomatik yakinlastirma
     tetikliyor; oyuncu oyundan cikmis gibi hissediyor. */
  font-size: max(16px, calc(var(--u) * 2));
  border-radius: calc(var(--u) * .9); border: calc(var(--u) * .25) solid var(--cizgi);
  background: #0e1729; color: #fff; font-family: inherit; font-weight: 700;
}
.diller { display: flex; gap: calc(var(--u) * .7); flex-wrap: wrap; }
.dil {
  padding: calc(var(--u) * .7) calc(var(--u) * 1.4);
  border-radius: calc(var(--u) * .8); border: calc(var(--u) * .25) solid var(--cizgi);
  background: #1e293b; color: #fff; font: inherit; font-weight: 700; cursor: pointer;
}
.dil.secili { background: var(--altin); color: #2b2000; }
.tehlike { margin-top: calc(var(--u) * 2.4); border-top: 1px solid rgba(255, 255, 255, .12); padding-top: calc(var(--u) * 1); }

.hediye-kutu { display: flex; flex-direction: column; align-items: center; }
/* Olcu `.hediye-kutu` icinde degil KABIN KENDISINDE: kap baska bir
   yerde kullanildiginda olcusuz kalip icindeki resmi dogal boyunda
   birakiyordu. */
.buyuk-sim {
  display: block; flex: none; line-height: 0;
  width: calc(var(--u) * 11); height: calc(var(--u) * 11);
}
.buyuk-sim canvas { width: 100%; height: 100%; }

/* ── hediye carki ────────────────────────────────────────────────
   Tekerlek 560 px'lik bir canvas; ekranda `--u` ile olcekleniyor.
   Buyuk cizip kucultmek, dilim kenarlarini ve yaziyi telefonda da
   keskin tutuyor — 200 px cizilen surumde yazi bulanikti.

   Donusu CANVAS'in kendisi yapiyor, sarmalayici degil: ibre ve gobek
   sarmalayicinin cocuklari ve DONMEMELERI gerekiyor.               */
.cark-kutu { display: flex; flex-direction: column; align-items: center; width: 100%; }

/* Olcu UC sinirin en kucugu.  Yalnizca `--u` ile buyuyen surumde kisa
   yatay ekranda (844x390) cark, altindaki CEVIR dugmesini panelin
   disina itiyordu; `46vh` onu kesiyor, `74vw` de dikey telefonda
   yanlardan tasmayi. */
.cark-sahne {
  position: relative;
  width: min(calc(var(--u) * 34), 74vw, 46vh);
  aspect-ratio: 1;
  margin-bottom: calc(var(--u) * 1);
}
.cark-tekerlek {
  width: 100%; height: 100%; display: block;
  /* Baslangic gecisi YOK: acilista transform atanirken carkin
     kendiliginden donmesi gerekmiyor, animasyon cevirme aninda
     ekleniyor. */
  transform: rotate(0deg);
  filter: drop-shadow(0 calc(var(--u) * .5) calc(var(--u) * .9) rgba(0, 0, 0, .45));
}
/* Ibre TEPEDE ve asagi bakiyor; carkin aci hesabi da tepeyi sifir
   kabul ediyor (bkz. arayuz.js carkSinirlari). */
.cark-ibre {
  position: absolute; top: calc(var(--u) * -.4); left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: calc(var(--u) * 1.5) solid transparent;
  border-right: calc(var(--u) * 1.5) solid transparent;
  border-top: calc(var(--u) * 2.8) solid #ffc531;
  filter: drop-shadow(0 calc(var(--u) * .2) 0 #1e2a44);
  z-index: 2;
}
.cark-gobek {
  position: absolute; top: 50%; left: 50%;
  width: calc(var(--u) * 4.4); height: calc(var(--u) * 4.4);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe9a8, #eda017);
  border: calc(var(--u) * .3) solid #1e2a44;
  z-index: 2;
}
.cark-sonuc {
  min-height: calc(var(--u) * 3);
  font-weight: 800; font-size: calc(var(--u) * 2.4);
  text-align: center; opacity: 0;
  transition: opacity .25s ease;
}
.cark-sonuc.acik { opacity: 1; }

/* Iz onizlemesi: gercek renkleri gosteren serit — metinle anlatmak
   yerine gostermek, hangi izin ne oldugunu tek bakista veriyor. */
.iz-onizleme {
  display: flex; width: 100%; height: calc(var(--u) * 2.2);
  border-radius: calc(var(--u) * .5); overflow: hidden;
  border: calc(var(--u) * .16) solid var(--cizgi);
}
.iz-onizleme i { flex: 1; }

.izgara.gunluk { grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 11), 1fr)); }
.izgara.gunluk .kart.bugun {
  border-color: var(--altin);
  box-shadow: 0 0 calc(var(--u) * 1.2) rgba(255, 197, 49, .55);
  animation: nabiz 1.4s infinite;
}
.izgara.gunluk .sim { width: calc(var(--u) * 3.4); height: calc(var(--u) * 3.4); }

/* ══ Yumurta kutlamasi ═══════════════════════════════════════════ */

#yumurta {
  position: fixed; inset: 0; display: none; z-index: 30;
  align-items: center; justify-content: center; pointer-events: none;
  background: radial-gradient(circle at center, rgba(0, 0, 0, .55), transparent 62%);
}
#yumurta.acik { display: flex; animation: firla .4s cubic-bezier(.2, 1.6, .4, 1); }
#yumurta .ic { display: flex; flex-direction: column; align-items: center; }
#yumurta span {
  width: calc(var(--u) * 16); height: calc(var(--u) * 16);
  display: grid; place-items: center;
}
#yumurta span canvas { width: 100%; height: 100%; }
#yumurta b { font-size: calc(var(--u) * 4); text-shadow: 0 0 8px #000; }
#yumurta i { font-style: normal; font-size: calc(var(--u) * 2.6); text-shadow: 0 0 6px #000; }
#yumurta em { font-style: normal; font-size: calc(var(--u) * 2.1); color: var(--sari); }

/* ══ Yukleme ═════════════════════════════════════════════════════ */

#yukleme {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(var(--u) * .8); text-align: center; padding: calc(var(--u) * 3);
  background: linear-gradient(180deg, #2f6ea8, #7fc0e8);
  transition: opacity .5s;
}
#yukleme.bitti { opacity: 0; pointer-events: none; }
/* Amblem 32x96'lik Eyfel; en-boy 1:3 korunuyor. */
#yukleme .amblem {
  width: calc(var(--u) * 7); height: calc(var(--u) * 21);
  filter: drop-shadow(0 calc(var(--u) * .4) 0 rgba(0, 0, 0, .35));
}
#yukleme h1 { margin: 0; font-size: calc(var(--u) * 5); text-shadow: 0 calc(var(--u) * .35) 0 rgba(0, 0, 0, .4); }
#yukleme .alt { margin: 0; opacity: .85; font-size: calc(var(--u) * 2.1); }
#yukleme .bar {
  width: min(70vw, calc(var(--u) * 44)); height: calc(var(--u) * 1.5);
  background: rgba(0, 0, 0, .3); border-radius: calc(var(--u) * .8);
  overflow: hidden; margin-top: calc(var(--u) * 1.6);
}
#yukleme .bar i { display: block; height: 100%; width: 0; background: var(--altin); transition: width .2s; }
#yukleme .yaz { margin: 0; font-size: calc(var(--u) * 1.8); opacity: .9; }
#yukleme .ipucu { margin: calc(var(--u) * 2.4) 0 0; font-size: calc(var(--u) * 1.7); opacity: .75; max-width: 40ch; }

/* ══ Dar ekran ve DIKEY telefon ══════════════════════════════════
   Oyun yatayda tasarlandi ama dikey tutulan telefonda da oynanabilir
   olmali.  Dikeyde sorun olcek degil YERLESIM: sag taraftaki iki
   serit (ray + menu) ile alt ortadaki uc genis dugme ayni anda
   sigmiyor.  Cozum: menu dugmeleri kucultulup raya yaklastiriliyor,
   alt dugmeler daraltiliyor, ust serit sikistiriliyor.            */

@media (max-width: 760px) {
  #duyurular { display: none; }
  #inis { top: 34%; }
}

/*
  KAREYE YAKIN PENCERE (yatay ama dar).  961x910 gibi bir pencerede
  birim YUKSEKLIKTEN geliyor (min(1vh,1.7vw) -> 1vh) ve ust serit
  genislige sigmiyordu: sag kume sayac hapinin 132 px uzerine
  biniyordu.  Olculdu.

  Dikey duzenin tamamini uygulamak fazla olurdu (birim de degisir);
  yalnizca serit iki satira ayriliyor ve cevrimici sayaci gizleniyor —
  dikey duzende de aynen boyle yapiliyor.
*/
/*
  UST SINIR 13/10 DEGIL 71/50 (1.42).

  Serit yan yana ancak ekran ~140u genisse siginiyor: ortalanmis
  serit 82.4u, iki yaninda 29.1u'luk sag kume.  Yatayda birim
  yukseklikten geldigi icin ekranin kac birim genis oldugunu EN-BOY
  belirliyor (Wu = 100 x en-boy), yani sinir 1.406.  13/10'da kalan
  surumde 4:3 tablet yatay (1024x768, 1.333) aralik disinda kaliyor
  ve sayac panosu cevrimici cipinin 35x36 px'ine giriyordu.
*/
@media (min-aspect-ratio: 1/1) and (max-aspect-ratio: 71/50) {
  #ust-sag { top: calc(var(--u) * 8.5); }
  .cevrimici { display: none; }
  /* Sag kume ikinci satira inince kule rayinin tepesine oturuyor;
     ray da asagi kayiyor (dikey duzende de ayni sey yapiliyor). */
  #ray { top: calc(var(--u) * 14); }
  /* Pencere dar oldugu icin alt dugme siras saga dogru uzuyor ve
     28u'daki zipla dugmesinin 21x82 px'ini ortuyordu (olculdu,
     961x910).  Dugme sag kenara dogru kaydiriliyor; ray 11.3u'da,
     yani hala 12u'luk bosluk var. */
  #dok-zipla { right: calc(var(--u) * 23); }
}

@media (orientation: portrait) {
  /* Dikeyde birim tamamen GENISLIKTEN: yukseklik bol, genislik dar. */
  :root { --u: clamp(5px, 2.35vw, 12px); }

  /* Ust serit: bosluklar daraliyor, sayaclar kisaliyor.
     Olculdu — 375 px genislikte eski degerlerle serit 417 px'e
     ciktigi icin iki yandan tasiyordu. */
  #ust {
    gap: calc(var(--u) * 1); top: calc(var(--u) * .3);
    max-width: 100vw; padding: 0 calc(var(--u) * .4);
  }
  #ust-pano { padding: calc(var(--u) * .25); gap: calc(var(--u) * .3); }
  #ust-pano .sayac {
    min-width: calc(var(--u) * 10);
    padding: 0 calc(var(--u) * .8) 0 calc(var(--u) * .25);
    gap: calc(var(--u) * .35);
  }
  #ust-pano .sim { width: calc(var(--u) * 3.4); height: calc(var(--u) * 3.4); }
  #ust-pano b { font-size: calc(var(--u) * 2.2); }
  .hediye .sim { width: calc(var(--u) * 5.4); height: calc(var(--u) * 5.4); }
  .hediye b { font-size: calc(var(--u) * 1.7); }
  .hediye .video-rozet { width: calc(var(--u) * 2.6); height: calc(var(--u) * 2.6); left: calc(var(--u) * -.8); top: calc(var(--u) * 2.6); }
  /*
    8.1u: kume 4.8u yuksek, yani 8.5u'da alt kenari 13.3u'ya
    duyuyordu — menu sutunu ve ray tam 13u'da basliyor ve ses/dil
    dugmeleri "BAG" dugmesinin, ayar dugmesi de ray kupasinin 3 px
    icine giriyordu (olculdu, her dikey olcude).  Ust serit 7.7u'da
    bittigi icin yukari almak bedava.
  */
  #ust-sag { top: calc(var(--u) * 8.1); }
  .cevrimici { display: none; }        /* yer yok; sayi kritik degil */

  /* Ray inceliyor, km etiketleri seridin USTUNE biniyor. */
  #ray { width: calc(var(--u) * 6.5); top: calc(var(--u) * 13); }
  /* En ustteki km etiketi olugun tepesine ortalaniyor ve dikeyde
     kupanin alt 6 px'ine giriyordu — oluk biraz asagi aliniyor. */
  #ray-cizgi { margin-top: calc(var(--u) * 1.6); }
  #ray-isaretler .isaret { right: calc(var(--u) * 0); font-size: calc(var(--u) * 1.7); }
  #ray-isaretler .isaret::after { display: none; }
  .ray-oyuncu { right: calc(var(--u) * 1.2); }
  .ray-oyuncu .avatar { width: calc(var(--u) * 4); height: calc(var(--u) * 4); font-size: calc(var(--u) * 1.9); }
  .ray-oyuncu.ben .avatar { width: calc(var(--u) * 5.4); height: calc(var(--u) * 5.4); }
  .ray-oyuncu .ok { display: none; }

  /* Menu sutunu: dar dugmeler, rayin hemen solunda. */
  #menu-sutun { right: calc(var(--u) * 8); top: calc(var(--u) * 13); gap: calc(var(--u) * 1.2); }
  .menu { width: calc(var(--u) * 8.6); height: calc(var(--u) * 8.2); }
  .menu .sim { width: calc(var(--u) * 4.4); height: calc(var(--u) * 4.4); }
  .menu b { font-size: calc(var(--u) * 1.5); }

  /* Alt dugmeler daraliyor ve dokunmatik cubugun USTUNE cikiyor. */
  /* Alt dugmeler: yazi SATIRA BOLUNMEMELI.  Sarilan surumde
     "Auto Climb" iki satira dusup dugmeyi buyutuyor ve alttaki
     Friend Boost yazisiyla ust uste biniyordu. */
  /* 20u: 16u'da ipucu satirinin alti dokunmatik cubugun ust 23 px'ine
     giriyordu (olculdu, 390x844).  Cizilmis joystick opak oldugu icin
     eski yari saydam daireyle gorulmeyen bindirme artik goze batiyor. */
  #alt { bottom: calc(var(--u) * 20); width: 98vw; }
  #alt-dugmeler { gap: calc(var(--u) * .45); }
  /*
    Olculer eylem dugmesi YATAY bir hapken (ikon yazinin solunda)
    ayarlanmisti: sabit 5u yukseklik, 2.3u ikon.  Dugme cizime
    gecince duzen DIKEY oldu (govde ustte, yazi altta) ve o degerler
    21 px'lik bir dugmenin altina 14 px yazi koyuyordu — yazi
    dugmeden genisti.  Yukseklik artik icerikten.
  */
  .eylem {
    padding: 0 calc(var(--u) * .6); height: auto;
    gap: calc(var(--u) * .1); font-size: calc(var(--u) * 1.55);
  }
  .eylem b { white-space: nowrap; }
  .eylem .sim { width: calc(var(--u) * 4.4); height: calc(var(--u) * 4.4); }
  /* Ikon 4.4u: yarim genisligi 2.2u, rozetinki 1.1u -> 1.1u kayma. */
  .eylem .video-rozet {
    width: calc(var(--u) * 2.2); height: calc(var(--u) * 2.2);
    top: calc(var(--u) * -.5); margin-left: calc(var(--u) * 1.1);
  }
  #takat { width: calc(var(--u) * 24); }
  /*
    Ipucu satiri KULE RAYINA GIRMEMELI.  92vw'de satir ekranin sagina
    kadar uzanip olugun ve oradaki oyuncu isaretcilerinin uzerinden
    geciyordu.  Ray + kenar payi 7.5u; en dar telefonda (u = 2.35vw)
    bu ~%18 demek, yani ortalanmis bir satir en fazla 64vw olabilir.
    62vw pay birakiyor; uzun cumle iki satira dusuyor, sorun degil.
  */
  #ipucu { font-size: calc(var(--u) * 1.4); max-width: 62vw; }

  /* Arkadas takviyesi dikeyde gizli: bilgi kritik degil, yer kritik. */
  #arkadas { display: none; }
  /* Alt yigin 20u'ya cikinca carpan rozeti de yukari aliniyor:
     27u'da ilk eylem dugmesinin 31x22 px'ine giriyordu.  35u: 32u'da
     rozetin alti, TIRMANIRKEN acilan takat cubugunun 9x15 px'ine
     giriyordu — cubuk yalnizca tirmanista gorundugu icin meydanda
     olculen surumlerde bu cakisma hic cikmamisti. */
  #boost { bottom: calc(var(--u) * 35); }
  #inis { top: 28%; }

  /* Dokunmatik: cubuk solda, zipla sagda, ikisi de alt seritte.
     NOT: burada bir zamanlar `background: rgba(255,255,255,.2)`
     duruyordu ("cimin uzerinde solgun kaliyor" diye).  Cizilmis
     joystick geldikten sonra o kural cizimi EZIYOR ve dikeyde duz
     beyaz daireyi geri getiriyordu — silindi. */
  #dok-kol { left: calc(var(--u) * 2); bottom: calc(var(--u) * 2.5); }
  /*
    Zipla dugmesi YUKSEKLIK CIPI ile ALT YIGIN ARASINA sikisiyor.

    Sag alt kose dikeyde iki isi birden goruyor: rayin yukseklik cipi
    (sagda, sola dogru buyuyor) ve zipla dugmesi.  3.5u'da duran surum
    "0M" ile temizdi ama oyuncu yukseldikce cip genisliyor ve 725M'de
    dugmenin 15x45 px'ini ortuyordu — meydanda olcen hicbir tarama
    bunu goremez.

    Cip dipten 8.5u yukari cikiyor, alt yigin 20u'da basliyor; arada
    11.5u var.  Dugme 11u'yken bosluk sifira iniyordu, 9.5u'ya
    kuculdu: altta 0.7u, ustte 1.3u pay kaldi.  87 px dokunma hedefi
    hala rahat.

    Yatay konum 9u: rayin (6.5u + 1u kenar) soluna dusuyor.
  */
  #dok-zipla {
    right: calc(var(--u) * 9); bottom: calc(var(--u) * 9.2);
    width: calc(var(--u) * 9.5); height: calc(var(--u) * 9.5);
  }

  #panel .kutu { width: 96vw; }
  .izgara { grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 14), 1fr)); }
}

/*
  DIKEY AMA KISA — 16:9 telefonlar (360x640, 375x667).

  Dikeyde birim GENISLIKTEN geliyor (2.35vw), yani ekranin kac birim
  yuksek oldugunu en-boy orani belirliyor: 19.5:9 bir telefonda 92u,
  16:9'da yalnizca 75.7u.  Ayni yigin ikisine de sigmiyor — 360x640'ta
  menu sutununun son dugmesi alt dugme sirasinin 73x36 px'ini
  ortuyordu, ust sag kume de menu sutunu ile rayin tepesine 3 px
  giriyordu.  Olculdu.

  Esik: yigin, ekran 80u'dan alcaldiginda tasiyor; 2.35vw'de bu
  H/W <= 1.88, yani en-boy >= 8/15.

  Sutun buyudugu icin degil, ekran kisaldigi icin kuculuyor: 4x7.2u +
  3x0.9u = 31.5u, 13u'dan basliyor, 44.5u'da bitiyor; alt yigin
  45.1u'da basliyor.  Dugme 61 px kaliyor, dokunma hedefi icin yeterli.
*/
@media (orientation: portrait) and (min-aspect-ratio: 8/15) {
  /*
    Olcu TIRMANIRKENKI alt yigina gore: takat cubugu yalnizca
    tirmanista aciliyor ve `#alt`i 3.6u uzatiyor, yani meydanda
    olculen bosluk yaniltici.  Cubuk acikken yigin 40.5u'da basliyor;
    sutun 13u'dan 4x6.2u + 3x0.8u = 27.2u ile 40.2u'da bitiyor.
    Dugme 52 px kaliyor.
  */
  #menu-sutun { gap: calc(var(--u) * .8); }
  .menu { width: calc(var(--u) * 8); height: calc(var(--u) * 6.2); }
  .menu .sim { width: calc(var(--u) * 3.4); height: calc(var(--u) * 3.4); }
  .menu b { font-size: calc(var(--u) * 1.3); }
  /* Rozetin alti da takat cubuguna 1.7 px kalmisti. */
  #boost { bottom: calc(var(--u) * 36); }
}

/* Yatay telefon: yukseklik cok dusuk, dikey yigilma sorun.  Alt
   dugmeler ve ray kuculuyor ama duzen yatayda kaliyor. */
@media (orientation: landscape) and (max-height: 500px) {
  :root { --u: clamp(5px, 1.55vh, 11px); }

  /*
    Menu sutunu bir zamanlar BES dugmeydi ve yukseklige sigmiyordu
    (5x11u + 4x2.2u = 63.8u, ekranda 64.5u var ve ustte 9u bosluk
    gerekiyor); dugmeler 8u'ya kuculmustu.  "Ziplama Arkadasi"
    kaldirilinca DORT kaldi: 4x9.6u + 3x1.6u = 43.2u.  Kazanilan yer
    dokunma hedefine geri verildi — telefonda 8u'luk dugme (48 px)
    parmagin altinda kucuktu.
  */
  #menu-sutun { top: calc(var(--u) * 8); gap: calc(var(--u) * 1.6); }
  .menu { width: calc(var(--u) * 10.6); height: calc(var(--u) * 9.6); }
  .menu .sim { width: calc(var(--u) * 5); height: calc(var(--u) * 5); }
  .menu b { font-size: calc(var(--u) * 1.7); }

  /*
    Ust serit daraliyor.  Cizilmis hap kenar payini kendi tasidigi
    icin sayac panosu duz `rgba` surumunden ~15 px genis; en dar
    yatay telefonda (568x320, birim 5 px tabanina dayaniyor) panonun
    sag ucu ses dugmesinin 4x24 px'ine giriyordu.
  */
  #ust-pano .sayac {
    min-width: calc(var(--u) * 21);
    padding: 0 calc(var(--u) * 1.4) 0 calc(var(--u) * .4);
  }

  /* 6u: 5u'da rayin kupasi ust sag kumenin (0.9u + 4.8u = 5.7u) alt
     4 px'inin altinda kaliyordu. */
  #ray { top: calc(var(--u) * 6); }

  /*
    Alt yigin EKRANIN ORTASINA degil, iki dokunmatik kontrolun
    ARASINA hizalaniyor.  Ortalayan surumde ucuncu eylem dugmesi
    zipla dugmesinin 15x47 px'ine giriyordu (olculdu, 640x360):
    yatay telefonda ekran 114u genis ve orta, ziplanin bulundugu
    yere denk geliyor.  Sol sinir carpan rozetinin sagi (28.8u),
    sag sinir zipla dugmesinin solu (33u + 11u = 44u).
  */
  #alt {
    left: calc(var(--u) * 29); right: calc(var(--u) * 45);
    transform: none; width: auto;
  }

  #dok-kol { bottom: calc(var(--u) * 4); left: calc(var(--u) * 1.5); }
  /* Zipla dugmesi menu sutununun SOLUNA: sag kenarda birakan surumde
     dugme ile "İZLER" ust uste biniyordu.  30u'da kalan surumde,
     dugmeler buyutulunce kose kosede 10x5 px yeniden degiyordu —
     olculdu, 33u'da 8 px acikli. */
  #dok-zipla { bottom: calc(var(--u) * 4); right: calc(var(--u) * 33); }
  #ipucu { display: none; }
  #arkadas { display: none; }
  /* Yatay telefonda ust serit tam dolu: sayac panosunun sag ucu
     cevrimici cipinin 8 px'ine giriyordu.  Dikeyde ve kareye yakin
     pencerede de ayni sey yapiliyor — sayi kritik degil. */
  .cevrimici { display: none; }
  /*
    Carpan rozeti cubugun SAGINA.  Arkadas satiri burada gizli
    oldugu icin rozet dibe iniyordu ve dokunmatik cubugun 54x32
    px'inin altinda kaliyordu; yukari almak da ekranin ortasinda
    havada birakiyor (yukseklik zaten 390 px).
  */
  #boost { left: calc(var(--u) * 19.5); bottom: calc(var(--u) * 1.4); }
}