/*
 * Brookhaven RP -- UCAN PARA katmani.
 *
 * Mini oyundan kazanilan paranin kaynaktan (telefon ekrani) sol ustteki
 * cuzdana ucmasi. Yalnizca bu katmanin kurallari burada; genel arayuz
 * oyun.css'te, telefon telefon.css'te.
 *
 * ---------------------------------------------------------------------
 * KATMAN SIRASI
 *
 *   HUD 20 | mobil 25 | ogretici 30 | panel 40 | gorsel ayar 50 |
 *   telefon perdesi 59 | telefon 60 | [UCAN PARA 65] | reklam 70/80
 *
 * 65 secildi: para TELEFONUN USTUNDEN ucmali (kaynagi orasi, arkasindan
 * gecerse hareket hic gorunmez), ama reklam perdesinin ALTINDA kalmali.
 *
 * ---------------------------------------------------------------------
 * HER KATMANDA TEK DONUSUM
 *
 *   .up-para  -> translateX  (yatay eksen, kendi zamanlama egrisi)
 *   .up-y     -> translateY  (dikey eksen, kendi zamanlama egrisi)
 *   .up-jeton -> rotate + scale + opacity
 *
 * Ucu ayri elemanda cunku bir eleman tek keyframe takimi oynatir; ayni
 * `transform` icine konsalardi her ara adimda digerlerinin degeri de
 * elle yazilmak zorunda kalir ve yolun matematigi bozulurdu. X ve Y'nin
 * ayri cubic-bezier'leri sayesinde izlenen yol GERCEK bir kuadratik
 * bezier (kontrol noktalarini js/ucanpara.js uretiyor).
 *
 * Butun degiskenler (--up-dx, --up-sure, --up-egri-x ...) koke yaziliyor
 * ve kalitim yoluyla ic katmanlara iniyor.
 */

#ucan-para {
  position: fixed;
  inset: 0;
  z-index: 65;

  /* Tiklama gecirgenligi SART: tam ekran kaplayan bu kutu olaylari
     yutarsa oyuncu kamerayi donduremez ve hata gorunmez -- ekranda
     hicbir sey yoktur. */
  pointer-events: none;

  /* Bu katmana TRANSFORM EKLEMEYIN. js tarafi getBoundingClientRect'in
     gorunum piksellerini dogrudan left/top olarak yaziyor; buraya bir
     transform girerse butun paralar sessizce kayar. */

  /* Dikey telefonda ~26px. Emoji bundan kucuk olunca altin para
     tanimsiz sari bir lekeye donuyor. */
  --up-boy: 24px;
}

/*
 * Medya esi: `body.dikey` sinifini oyun.js yaziyor ve gec gelebiliyor
 * (her ekran donusunde en az 120ms) ya da hic gelmiyor. Olcu karari
 * tarayicinin olmali; esik oyun.js'teki DIKEY_ESIK ile AYNI.
 * Bkz. oyun.css "DIKEY EKRAN -- MEDYA ESI".
 */
body.dikey #ucan-para { --up-boy: 26px; }
@media (max-aspect-ratio: 88/100) {
  body #ucan-para { --up-boy: 26px; }
}

/* ------------------------------------------------------------------ */
/* Parcacik -- yatay eksen (kok)                                       */
/* ------------------------------------------------------------------ */

.up-para {
  position: absolute;
  left: var(--up-x, 0px);
  top: var(--up-y, 0px);
  width: var(--up-boy);
  height: var(--up-boy);

  /* Baslangic noktasi paranin MERKEZI olsun. */
  margin: calc(var(--up-boy) / -2) 0 0 calc(var(--up-boy) / -2);

  /* `both`: gecikme boyunca ilk kare uygulanir (jeton o an saydam),
     bitince son kare kalir. Olmazsa para once kaynakta gorunur, sonra
     ziplayarak ucmaya baslar. */
  animation: up-yatay var(--up-sure, 800ms) var(--up-egri-x, linear) var(--up-gec, 0ms) both;
}

/* will-change BILEREK YOK: 14 parcacik x 3 katman = 42 zorlanmis GPU
   katmani, hedef kitlenin telefonunda bu tek basina kare dusuruyor.
   Tarayici zaten transform animasyonlarini kendiliginden bilesime
   tasiyor. */

@keyframes up-yatay {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--up-dx, 0px)); }
}

/* ------------------------------------------------------------------ */
/* Parcacik -- dikey eksen                                             */
/* ------------------------------------------------------------------ */

.up-y {
  display: block;
  width: 100%;
  height: 100%;
  animation: up-dikey var(--up-sure, 800ms) var(--up-egri-y, linear) var(--up-gec, 0ms) both;
}

@keyframes up-dikey {
  from { transform: translateY(0); }
  to   { transform: translateY(var(--up-dy, 0px)); }
}

/* ------------------------------------------------------------------ */
/* Parcacik -- jetonun kendisi                                         */
/* ------------------------------------------------------------------ */

.up-jeton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;

  font-size: var(--up-boy);
  line-height: 1;

  /* drop-shadow degil text-shadow: filtre her karede yeniden
     hesaplaniyor, golge ise metnin bir parcasi -- zayif telefonda
     olculebilir fark. */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.45);

  /* Bu katman zamani DOGRUSAL yuruyor: donme hizi sabit kalsin,
     buyume/kuculme ritmi asagidaki yuzdelerden gelsin. */
  animation: up-jeton var(--up-sure, 800ms) linear var(--up-gec, 0ms) both;
}

@keyframes up-jeton {
  0% {
    opacity: 0;
    transform: rotate(0deg) scale(0.35);
  }
  14% {
    opacity: 1;
    transform: rotate(calc(var(--up-don, 720deg) * 0.14)) scale(1.18);
  }
  70% {
    opacity: 1;
    transform: rotate(calc(var(--up-don, 720deg) * 0.7)) scale(1);
  }
  88% {
    opacity: 1;
    transform: rotate(calc(var(--up-don, 720deg) * 0.88)) scale(0.88);
  }
  /* Sonda kuculerek sonuyor: cuzdanin "icine girdi" hissi bundan
     geliyor, aniden kaybolmak yerine. */
  100% {
    opacity: 0;
    transform: rotate(var(--up-don, 720deg)) scale(0.5);
  }
}

/* ------------------------------------------------------------------ */
/* Varis: cuzdanin altindaki "+N" yazisi                               */
/* ------------------------------------------------------------------ */

.up-etiket {
  position: absolute;
  left: var(--up-x, 0px);
  top: var(--up-y, 0px);

  padding: 5px 12px;
  border-radius: 99px;

  background: rgba(20, 27, 40, 0.94);
  border: 2px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);

  /* Dikey telefonda okunacak: kucuk yazi bu yasta hic okunmuyor. */
  color: #ffcc33;
  font-family: 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  font-size: 17px;
  font-weight: 800;
  white-space: nowrap;

  animation: up-etiket 1100ms cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

body.dikey .up-etiket { font-size: 18px; }
@media (max-aspect-ratio: 88/100) {
  body .up-etiket { font-size: 18px; }
}

@keyframes up-etiket {
  0%   { opacity: 0; transform: translate(-50%, -10px) scale(0.6); }
  18%  { opacity: 1; transform: translate(-50%, 2px) scale(1.08); }
  32%  { opacity: 1; transform: translate(-50%, 4px) scale(1); }
  72%  { opacity: 1; transform: translate(-50%, 7px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, 22px) scale(0.94); }
}

/* Hareket kisitliyken yazi yer degistirmiyor, yalnizca beliriyor. */
@keyframes up-etiket-durgun {
  0%   { opacity: 0; transform: translateX(-50%); }
  15%  { opacity: 1; transform: translateX(-50%); }
  75%  { opacity: 1; transform: translateX(-50%); }
  100% { opacity: 0; transform: translateX(-50%); }
}

/* ------------------------------------------------------------------ */
/* Varis: cuzdan pulsu                                                 */
/* ------------------------------------------------------------------ */

/*
 * Kural #cuzdan'a ait gorunuyor ama bu OZELLIGIN kendi sinifi -- bu
 * yuzden burada duruyor.
 *
 * oyun.css'teki `#cuzdan.artis` KULLANILMIYOR: o sinif oyun.js'in mali
 * ve para degeri degisir degismez, yani para daha yola cikmadan
 * takiliyor. Varista ikinci bir puls gerekiyor.
 *
 * Ozgulluk ikisinde de esit (id + sinif); bu dosya oyun.css'ten SONRA
 * yuklendigi icin `up-puls` varken o kazaniyor. Zaten `artis`
 * (0.45 sn) ucus baslamadan bitmis oluyor.
 */
#cuzdan.up-puls {
  animation: up-cuzdan-puls 560ms cubic-bezier(0.2, 1.5, 0.4, 1);
}

@keyframes up-cuzdan-puls {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.22); }
  58%  { transform: scale(0.98); }
  100% { transform: scale(1); }
}

/* ------------------------------------------------------------------ */
/* Hareket kisitli kip                                                 */
/* ------------------------------------------------------------------ */

/*
 * js/ucanpara.js bu kipte zaten parcacik URETMIYOR, dogrudan pulsa
 * geciyor. Buradakiler ikinci emniyet: baska bir yol bir gun jeton
 * uretirse ucus yine de kapali kalsin.
 *
 * Puls KORUNUYOR -- kisitlanan sey ekrani kat eden hareket, cocugun
 * "param cuzdana girdi" geri bildirimi degil.
 */
@media (prefers-reduced-motion: reduce) {
  .up-para { display: none; }
  .up-etiket { animation-name: up-etiket-durgun; }
}