/*
  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; }

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-tap-highlight-color: transparent;
  touch-action: none;
}

#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; }
.sim svg { width: 100%; height: 100%; display: block; }

/* ══ 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. */
.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);
  background: #111827; border: calc(var(--u) * .2) solid #fff;
  border-radius: calc(var(--u) * .8);
  padding: calc(var(--u) * .35);
  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); } }

#ust-pano {
  display: flex; gap: calc(var(--u) * .5);
  background: rgba(24, 34, 56, .74);
  border-radius: calc(var(--u) * 1.2);
  padding: calc(var(--u) * .4);
  height: calc(var(--u) * 6.2);
}
#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: rgba(24, 34, 56, .74); border-radius: calc(var(--u) * .9);
  padding: calc(var(--u) * .45) calc(var(--u) * .9);
  font-size: calc(var(--u) * 1.9);
}
.cevrimici i { color: #4ade80; font-style: normal; }
.cevrimici em { font-style: normal; opacity: .8; }

.yuvarlak {
  width: calc(var(--u) * 4.4); height: calc(var(--u) * 4.4);
  border-radius: 50%;
  background: rgba(24, 34, 56, .74); color: #fff;
  border: 0; cursor: pointer; padding: calc(var(--u) * .85);
  display: grid; place-items: center;
}
.yuvarlak:hover { background: rgba(40, 56, 90, .92); }
.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: rgba(18, 26, 44, .96);
  border-radius: calc(var(--u) * 1.2);
  padding: calc(var(--u) * .5);
  box-shadow: 0 calc(var(--u) * .5) calc(var(--u) * 1.4) 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;
}
/* 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 (js/simge.js ->
  `gokdelen`, viewBox 32x96).  Seride gerilirken en-boy KORUNMUYOR:
  referansta da kule 1:8'e yakin uzatilmis duruyor, cunku ray ekran
  boyunca uzuyor.  Esneme SVG ozniteligiyle veriliyor (arayuz.js),
  CSS'te `preserveAspectRatio` diye bir ozellik yok.
*/
.ray-kule {
  position: absolute; inset: 0; 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.
*/
#ray-yukseklik {
  position: absolute; right: 0; bottom: 0;
  font-size: calc(var(--u) * 2.4); white-space: nowrap;
  background: rgba(24, 34, 56, .8); border-radius: calc(var(--u) * .8);
  padding: calc(var(--u) * .25) calc(var(--u) * .8);
  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);
}

.menu {
  width: calc(var(--u) * 12); height: calc(var(--u) * 11);
  border-radius: calc(var(--u) * 1.6);
  border: var(--kontur) solid var(--cizgi);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(var(--u) * .2);
  cursor: pointer; color: #fff; font: inherit;
  box-shadow: var(--golge);
  background: linear-gradient(180deg, #6db3f2, #2f7fd4);
  transition: transform .08s;
  padding: calc(var(--u) * .5);
}
.menu.sari { background: linear-gradient(180deg, #ffe066, #f5a623); }
.menu .sim { width: calc(var(--u) * 6); height: calc(var(--u) * 6); flex: none; }
.menu b {
  font-size: calc(var(--u) * 2.1); line-height: 1.02; text-align: center;
  text-shadow: 0 0 3px rgba(0, 0, 0, .6), 0 1px 0 rgba(0, 0, 0, .5);
}
.menu:active { transform: translateY(calc(var(--u) * .22)); }

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

#boost {
  position: absolute; left: calc(var(--u) * 1); bottom: calc(var(--u) * 5.2);
  display: flex; align-items: center; gap: calc(var(--u) * .5);
  background: rgba(24, 34, 56, .74); border-radius: calc(var(--u) * .9);
  padding: calc(var(--u) * .4) calc(var(--u) * 1);
  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) * 2.1);
  text-shadow: 0 0 4px #000, 0 calc(var(--u) * .18) 0 rgba(0, 0, 0, .6);
  display: flex; align-items: center; gap: calc(var(--u) * .4);
}
#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 {
  width: calc(var(--u) * 34); height: calc(var(--u) * 1.4);
  background: rgba(12, 18, 32, .6);
  border: calc(var(--u) * .22) solid var(--cizgi);
  border-radius: calc(var(--u) * .8); 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); }

.eylem {
  display: flex; align-items: center; gap: calc(var(--u) * .7);
  height: calc(var(--u) * 6.4);
  padding: 0 calc(var(--u) * 1.6);
  border-radius: calc(var(--u) * 1.2);
  border: var(--kontur) solid var(--cizgi);
  font: inherit; font-size: calc(var(--u) * 2.4); color: #fff;
  cursor: pointer; box-shadow: var(--golge);
  transition: transform .08s, filter .12s;
}
.eylem .sim { width: calc(var(--u) * 3.4); height: calc(var(--u) * 3.4); flex: none; }
.eylem b { text-shadow: 0 0 3px rgba(0, 0, 0, .55), 0 2px 0 rgba(0, 0, 0, .4); }
.eylem.yesil { background: linear-gradient(180deg, #6ee07f, #2f9d45); }
.eylem.sari { background: linear-gradient(180deg, #ffe066, #f0a91b); }
.eylem.kirmizi { background: linear-gradient(180deg, #ff8080, #d02b2b); }
.eylem:active { transform: translateY(calc(var(--u) * .22)); }
.eylem.acik { filter: brightness(1.15) saturate(1.3); box-shadow: 0 0 calc(var(--u) * 1.2) #fff8, var(--golge); }
.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. */
.eylem { position: relative; }
.eylem .video-rozet {
  position: absolute; right: calc(var(--u) * -.6); top: calc(var(--u) * -1);
  width: calc(var(--u) * 3); height: calc(var(--u) * 3);
  background: #111827; border: calc(var(--u) * .18) solid #fff;
  border-radius: calc(var(--u) * .6); padding: calc(var(--u) * .28);
  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;
}
#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; }
#dok-kol {
  position: absolute; left: calc(var(--u) * 2.5); bottom: calc(var(--u) * 9);
  width: calc(var(--u) * 16); height: calc(var(--u) * 16);
  border-radius: 50%; background: rgba(255, 255, 255, .13);
  border: calc(var(--u) * .3) solid rgba(255, 255, 255, .35);
  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);
  border-radius: 50%; background: rgba(255, 255, 255, .55);
}
#dok-zipla {
  position: absolute; right: calc(var(--u) * 28); bottom: calc(var(--u) * 9);
  width: calc(var(--u) * 10); height: calc(var(--u) * 10);
  border-radius: 50%; background: rgba(255, 255, 255, .22);
  border: calc(var(--u) * .3) solid rgba(255, 255, 255, .5);
  pointer-events: auto;
}
#dok-zipla svg { width: 60%; height: 60%; fill: #fff; }

/* ══ 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 .kutu {
  width: min(96vw, calc(var(--u) * 90));
  max-height: 92vh; display: flex; flex-direction: column;
  background: linear-gradient(180deg, #223256, var(--panel));
  border: var(--kontur) solid var(--cizgi);
  border-radius: calc(var(--u) * 1.8);
  box-shadow: 0 calc(var(--u) * 1.5) calc(var(--u) * 3) rgba(0, 0, 0, .5);
  overflow: hidden;
}
#panel header {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(var(--u) * 1.2) calc(var(--u) * 1.8);
  background: rgba(0, 0, 0, .25);
}
#panel h2 { margin: 0; font-size: calc(var(--u) * 3); letter-spacing: .5px; }
#panel-kapat {
  width: calc(var(--u) * 4); height: calc(var(--u) * 4);
  border-radius: 50%; border: 0; cursor: pointer;
  background: var(--kirmizi); color: #fff; font-size: calc(var(--u) * 2);
}
#panel-govde {
  padding: calc(var(--u) * 1.6); overflow-y: auto;
  font-weight: 600; font-size: calc(var(--u) * 1.9);
}
#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; }

.panel-para {
  display: flex; align-items: center; gap: calc(var(--u) * .6);
  background: rgba(0, 0, 0, .28); border-radius: calc(var(--u) * .9);
  padding: calc(var(--u) * .6) calc(var(--u) * 1.4); 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);
}
.kart .al {
  margin-top: calc(var(--u) * .5);
  background: var(--yesil); border: 0; border-radius: calc(var(--u) * .7);
  color: #06210c; font: inherit; font-size: calc(var(--u) * 1.7); font-weight: 800;
  padding: calc(var(--u) * .45) calc(var(--u) * 1.2); cursor: pointer;
}
.kart .al.pasif { background: #64748b; color: #cbd5e1; cursor: not-allowed; }

.dugme {
  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) * 1); border: 0; border-radius: calc(var(--u) * 1);
  font: inherit; font-size: calc(var(--u) * 2.1); font-weight: 800; cursor: pointer;
  background: var(--yesil); color: #05230d;
}
.dugme .sim { width: calc(var(--u) * 2.8); height: calc(var(--u) * 2.8); }
.dugme.kirmizi { background: var(--kirmizi); color: #fff; }
.dugme.ikincil { background: #475569; color: #fff; }
.dugme:disabled { background: #64748b; color: #cbd5e1; cursor: not-allowed; }

.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; }
.hediye-kutu .buyuk-sim { width: calc(var(--u) * 11); height: calc(var(--u) * 11); }
.hediye-kutu .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.
*/
@media (min-aspect-ratio: 1/1) and (max-aspect-ratio: 13/10) {
  #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); }
}

@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); }
  #ust-sag { top: calc(var(--u) * 8.5); }
  .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); }
  #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. */
  #alt { bottom: calc(var(--u) * 16); width: 98vw; }
  #alt-dugmeler { gap: calc(var(--u) * .45); }
  .eylem {
    padding: 0 calc(var(--u) * .6); height: calc(var(--u) * 5);
    gap: calc(var(--u) * .3); font-size: calc(var(--u) * 1.55);
  }
  .eylem b { white-space: nowrap; }
  .eylem .sim { width: calc(var(--u) * 2.3); height: calc(var(--u) * 2.3); }
  .eylem .video-rozet { width: calc(var(--u) * 2.2); height: calc(var(--u) * 2.2); top: calc(var(--u) * -.8); }
  #takat { width: calc(var(--u) * 24); }
  #ipucu { font-size: calc(var(--u) * 1.4); max-width: 92vw; }

  /* Arkadas takviyesi dikeyde gizli: bilgi kritik degil, yer kritik. */
  #arkadas { display: none; }
  #boost { bottom: calc(var(--u) * 27); }
  #inis { top: 28%; }

  /* Cubuk ve zipla dikeyde biraz daha belirgin: alt seritte cimin
     uzerinde solgun kaliyorlardi. */
  #dok-kol { background: rgba(255, 255, 255, .2); }
  #dok-zipla { background: rgba(255, 255, 255, .3); }

  /* Dokunmatik: cubuk solda, zipla sagda, ikisi de alt seritte. */
  #dok-kol { left: calc(var(--u) * 2); bottom: calc(var(--u) * 2.5); }
  #dok-zipla { right: calc(var(--u) * 3); bottom: calc(var(--u) * 3.5); }

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

/* 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); }

  #ray { top: calc(var(--u) * 5); }
  #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; }
}