/*
 * Brookhaven RP -- oyuncu duygu balonlari (js/emoji.js).
 *
 * Hedef kitle 3-13 yas ve cogu OKUMA BILMIYOR. Balonlarin tamami tek
 * bir seyle anlatiliyor: BUYUK EMOJI. Yazi yok, ikon yok, aciklama yok.
 * Her balonun kendi pastel kenar rengi var -- cocuk balonu emojiden
 * degil, cogu zaman RENGINDEN taniyor ve el hafizasiyla ayni yere
 * basiyor.
 *
 * ---------------------------------------------------------------------
 * UC KURAL
 *
 * 1. TIKLAMA GECIRGENLIGI. Kok `pointer-events: none`. Aksi halde tam
 *    ekran kaplayan bu kutu butun fare olaylarini yutar ve oyuncu
 *    kamerayi donduremez. Yalnizca balonlar ve dugme `auto` aliyor.
 *
 * 2. Z-INDEX 28. HUD (20) ve mobil kontrollerin (25) USTUNDE, ogretici
 *    katmanin (30) ve panellerin (40) ALTINDA. Magaza acikken balonlar
 *    panelin ustune cikmasin, ogretici el de balonlari isaret edebilsin.
 *
 * 3. DOKUNMA HEDEFI EN AZ 48px. En kucuk balon 48px; hicbir kirilma
 *    noktasinda bunun altina inmiyor.
 *
 * ---------------------------------------------------------------------
 * YERLESIM -- IKI KIP
 *
 * PC (varsayilan): sutun sol alt kosede, dugme YOK, balonlar surekli
 * gorunur (js kurulusta aciyor).
 *
 * TELEFON (body.dikey / body.mobil): once tek bir yuz dugmesi. Dugme
 * yon cubugunun (#cubuk) TAM USTUNDE duruyor ve konumu cubugun kendi
 * olculerinden turetiliyor:
 *
 *   --em-alt = cubugun alt payi + cubugun boyu + 16px
 *
 * Cubuk oyun.css'te dort ayri kirilmada farkli olcude (154 / 134 / 132 /
 * 118 px). Sayilari buraya elle dagitmak yerine iki degisken
 * (--em-cubuk-alt, --em-cubuk) her kirilmada guncelleniyor; konum
 * kendiliginden dogru yere gidiyor. Cubuk bir gun buyurse YALNIZCA o
 * iki degisken degisiyor.
 */

#emoji-katman {
  position: fixed;
  inset: 0;
  z-index: 28;
  pointer-events: none;

  --em-boy: 56px;        /* balon capi */
  --em-dugme: 62px;      /* derli kipteki tek yuz dugmesi */
  --em-ara: 10px;        /* balonlar arasi bosluk */
  --em-sol: 18px;        /* sol kenar payi */

  /* Cubuk yok (PC): sutun dogrudan alt kenardan basliyor. */
  --em-alt: 18px;
  --em-liste-alt: var(--em-alt);

  /* Sutunun ust tarafta bosta birakmasi gereken serit -- HUD'un yeri. */
  --em-ust-pay: 140px;

  /* Acilis gecikmesi js tarafindan yaziliyor (SIRA_GECIKME). */
  --em-gecikme: 50ms;

  --em-zemin: linear-gradient(180deg, #ffffff, #f3f7ff);
  --em-golge: 0 6px 16px rgba(0, 0, 0, 0.34);
}

/* ------------------------------------------------------------------ */
/* Sutun                                                               */
/* ------------------------------------------------------------------ */

/*
 * `column-reverse`: dizinin ILK elemani en ALTTA duruyor, sonrakiler
 * yukari dogru diziliyor. DOM sirasi diziyle ayni kaliyor -- klavye ile
 * gezerken de sira dogru.
 *
 * `wrap` + `max-height` DAR EKRAN SIGORTASI. Alti balon 410px yer
 * istiyor; kucuk bir telefonda ya da yan cevrilmis ekranda bu sutun
 * HUD'un icine girer, hatta ekranin disina tasar. Sarma acikken sutun
 * kendiliginden ikinci bir sutuna dokuluyor ve balonlar KUCULMUYOR --
 * dokunma hedefini feda etmeden sigiyor. Genis ekranda hicbir sey
 * yapmiyor, cunku max-height hicbir zaman dolmuyor.
 *
 * `100dvh` satiri ikinci kez yaziliyor: destekleyen tarayicida bir
 * ustteki `100vh` satirini eziyor, desteklemeyende gecersiz sayilip
 * dusuyor. iOS'ta adres cubugu 100vh'ye dahil ve olcum sisiyordu.
 *
 * NOT: PC'de bu sutunun alt ucu, ogretici katmanin hayalet W/A/S/D
 * kutusuyla (css/ipucu.css, #ogr-tuslar: sol 24px / alt 24px) ayni
 * koseyi paylasiyor. Cakisma kabul edildi: o kutu yalnizca oyunun ilk
 * saniyelerinde birkac saniyeligine cikiyor ve z-index 30 ile bu
 * katmanin USTUNDE ciziliyor, yani ogretici okunakli kaliyor.
 *
 * DIKEYDE kabul EDILMEDI ve kutu saga alindi (oyun.css
 * `body.dikey #ogr-tuslar`, ipucu.css dokunmatik kapisi): orada ayni
 * kosede surekli duran bir DUGME var ve ogretici katmani gecirgen
 * oldugu icin cocugun hayalet tusa dokunusu dugmeye dusuyordu.
 */
#emoji-liste {
  position: fixed;
  left: var(--em-sol);
  bottom: var(--em-liste-alt);
  display: none;
  flex-direction: column-reverse;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: var(--em-ara);
  max-height: calc(100vh - var(--em-liste-alt) - var(--em-ust-pay));
  max-height: calc(100dvh - var(--em-liste-alt) - var(--em-ust-pay));
}

#emoji-katman.emoji-acik #emoji-liste { display: flex; }

/* ------------------------------------------------------------------ */
/* Balon                                                               */
/* ------------------------------------------------------------------ */

.emoji-balon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--em-boy);
  height: var(--em-boy);
  padding: 0;
  background: var(--em-zemin);
  border: 3px solid var(--em-kenar, #ffffff);
  border-radius: 50%;
  box-shadow: var(--em-golge);
  cursor: pointer;
  pointer-events: auto;
  /* Cift dokunusta sayfayi yakinlastirmasin, 300ms gecikme de olmasin. */
  touch-action: manipulation;
}

/* Fare uzerine gelince buyuyor, basinca kuculuyor. Sira ONEMLI: ikisi
   ayni ozelligi yaziyor ve :active sonda oldugu icin basma kazaniyor. */
.emoji-balon:hover { transform: scale(1.08); }
.emoji-balon:active { transform: scale(0.88); }

/*
 * Emoji ayri bir span'da: basma animasyonu burada oynuyor. Dugmenin
 * kendisinde de bir transform var (:active) ve ikisi ayni elemanda
 * birbirini eziyordu.
 *
 * Yazi tipi sirasi ONEMLI: emoji ailesi once gelmezse Windows'ta bazi
 * simgeler siyah-beyaz kontur olarak ciziliyor.
 */
.emoji-simge {
  display: block;
  font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji',
    system-ui, sans-serif;
  font-size: calc(var(--em-boy) * 0.54);   /* 56px balonda ~30px */
  line-height: 1;
}

/*
 * Her balona kendi pastel kenari.
 *
 * Renkler EMOJILER dizisinin sirasina bagli. Diziye yeni bir duygu
 * eklenirse buraya da bir satir eklenmeli; eksik kalan balon beyaz
 * kenarla (yukaridaki --em-kenar varsayilani) cikar, bozulmaz.
 */
.emoji-balon:nth-child(1) { --em-kenar: #ffd93d; }   /* gulucuk  sari  */
.emoji-balon:nth-child(2) { --em-kenar: #ff7ab8; }   /* asik     pembe */
.emoji-balon:nth-child(3) { --em-kenar: #a56bff; }   /* bayilma  mor   */
.emoji-balon:nth-child(4) { --em-kenar: #37d867; }   /* begenme  yesil */
.emoji-balon:nth-child(5) { --em-kenar: #ff5a52; }   /* kizgin   kirmizi */
.emoji-balon:nth-child(6) { --em-kenar: #2fa8ff; }   /* uzgun    mavi  */

/* --- alttan yukari sirayla belirme --- */

/*
 * Gecikme sirayi `--em-sira`dan uretiyor (js her balona yaziyor).
 * `backwards` dolgusu sart: onsuz balon gecikme boyunca son halinde
 * gorunur durur ve "sirayla acildi" etkisi tamamen kaybolur.
 */
#emoji-katman.emoji-acik .emoji-balon {
  animation: emoji-gel 0.26s cubic-bezier(0.2, 1.3, 0.4, 1) backwards;
  animation-delay: calc(var(--em-sira, 0) * var(--em-gecikme));
}
@keyframes emoji-gel {
  from { opacity: 0; transform: translateY(16px) scale(0.4); }
  to   { opacity: 1; transform: none; }
}

/*
 * Basma geri bildirimi. Dokunmatikte `:active` guvenilir degil (parmak
 * birakilmadan sinif dusebiliyor), bu yuzden js kisa sureligine sinif
 * takiyor.
 */
.emoji-simge.emoji-basildi { animation: emoji-bas 0.24s ease-out; }
@keyframes emoji-bas {
  0%   { transform: scale(1); }
  35%  { transform: scale(0.68); }
  70%  { transform: scale(1.14); }
  100% { transform: scale(1); }
}

/* ------------------------------------------------------------------ */
/* Derli kipteki yuz dugmesi                                           */
/* ------------------------------------------------------------------ */

/*
 * GORUNUM burada, GORUNURLUK asagida.
 *
 * Dugmenin butun olculeri kapisiz tanimli ve kapilar yalnizca
 * `display` yaziyor. Boyle olmasinin nedeni: derli kipin iki ayri
 * kapisi var (sinif ve medya sorgusu, bkz. asagisi) ve gorunumu her
 * kapida tekrarlamak iki kopyayi zamanla ayirirdi.
 *
 * PC'de dugme YOK: balonlar zaten surekli acik.
 */
#emoji-dugme {
  display: none;
  position: fixed;
  left: var(--em-sol);
  bottom: var(--em-alt);
  align-items: center;
  justify-content: center;
  width: var(--em-dugme);
  height: var(--em-dugme);
  padding: 0;
  background: linear-gradient(180deg, #ffffff, #ffeeb8);
  border: 3px solid #ffd93d;
  border-radius: 50%;
  box-shadow: var(--em-golge);
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
}
#emoji-dugme .emoji-simge {
  font-size: calc(var(--em-dugme) * 0.52);
}

body.dikey #emoji-dugme,
body.mobil #emoji-dugme { display: flex; }
#emoji-dugme:active { transform: scale(0.9); }

/* Acikken dugme "basili" duruyor: cocuk hangi durumda oldugunu goruyor. */
#emoji-katman.emoji-acik #emoji-dugme {
  background: linear-gradient(180deg, #ffe9a8, #ffd046);
  border-color: #ffffff;
}

/* ------------------------------------------------------------------ */
/* Telefon / dikey -- dugmeli kip                                      */
/* ------------------------------------------------------------------ */

/*
 * DERLI KIP = ekran bicimi. Balon buyuyor, ust pay daraliyor ve sutun
 * dugmenin USTUNDEN basliyor.
 *
 * `body.dikey` sinifini oyun.js yaziyor ve gec gelebiliyor (her ekran
 * donusunde en az 120ms) ya da hic gelmiyor; bu yuzden ayni takim
 * asagida `@media (max-aspect-ratio: 88/100)` altinda tekrarlaniyor.
 * Esik oyun.js ve emoji.js'teki DIKEY_ESIK ile AYNI olmak zorunda.
 */
body.dikey #emoji-katman,
body.mobil #emoji-katman {
  --em-boy: 60px;
  --em-liste-alt: calc(var(--em-alt) + var(--em-dugme) + var(--em-ara));
  --em-ust-pay: 112px;           /* dikeyde HUD ~85px'te bitiyor */
}
@media (max-aspect-ratio: 88/100) {
  body #emoji-katman {
    --em-boy: 60px;
    --em-liste-alt: calc(var(--em-alt) + var(--em-dugme) + var(--em-ara));
    --em-ust-pay: 112px;
  }
  body #emoji-dugme { display: flex; }
}

/*
 * CUBUK OLCULERI = dokunma, ekran bicimi DEGIL.
 *
 * Konum yon cubugundan (#cubuk) turuyor, bkz. dosya basi. Ustteki 16px
 * cubukla dugme arasindaki en az aralik: daha azinda basparmak zipla
 * dugmesine giderken duyguya carpiyor.
 *
 * Kapi `body.mobil`: klavyeli bir dikey pencerede #mobil gizli, ortada
 * cubuk yok ve alttan 174px bosuna ayriliyordu -- orada dogru deger
 * tabandaki `--em-alt: 18px`.
 */
body.mobil #emoji-katman {
  --em-cubuk-alt: 26px;          /* oyun.css: #cubuk bottom */
  --em-cubuk: 132px;             /* oyun.css: #cubuk boyu   */
  --em-alt: calc(var(--em-cubuk-alt) + var(--em-cubuk) + 16px);
}

/* Dikey ekranda cubuk hem daha buyuk hem guvenli alani gozetiyor. */
body.dikey.mobil #emoji-katman {
  --em-cubuk-alt: max(22px, env(safe-area-inset-bottom));
  --em-cubuk: 154px;
}
@media (max-aspect-ratio: 88/100) {
  body.mobil #emoji-katman {
    --em-cubuk-alt: max(22px, env(safe-area-inset-bottom));
    --em-cubuk: 154px;
  }
}

/* ------------------------------------------------------------------ */
/* Kirilmalar -- oyun.css'teki cubuk olculeriyle birebir               */
/* ------------------------------------------------------------------ */

/* Cok kucuk telefonlar: oyun.css'te #cubuk 134px'e iniyor. */
@media (max-width: 380px) {
  body.dikey #emoji-katman {
    --em-boy: 54px;
    --em-dugme: 58px;
    --em-sol: 14px;
  }
  body.dikey.mobil #emoji-katman { --em-cubuk: 134px; }
}
@media (max-width: 380px) and (max-aspect-ratio: 88/100) {
  body #emoji-katman {
    --em-boy: 54px;
    --em-dugme: 58px;
    --em-sol: 14px;
  }
  body.mobil #emoji-katman { --em-cubuk: 134px; }
}

/*
 * Alcak yatay ekran (telefon yan cevrilmis): oyun.css'te #cubuk 118px
 * ve alt payi 14px.
 *
 * BURADA SUTUN YOK, TEK SIRA VAR -- bilerek.
 *
 * Olculdu: 740x360'ta dugmenin ustunde HUD'a kadar 40px kaliyor, yani
 * tek balon bile sigmiyor. Balonu kucultmek dokunma hedefini 48px'in
 * altina indirirdi. Ekranin BOL olan tek yonu yatay, o yuzden sira
 * dugmenin SAGINA aciliyor; sag alttaki zipla/etkilesim dugmelerine de
 * (right: 28px) uzaktan uzaga degmiyor.
 *
 * `--em-sira` gecikmesi aynen calisiyor: balonlar bu kez soldan saga
 * teker teker beliriyor.
 */
@media (orientation: landscape) and (max-height: 480px) {
  /*
   * Olculer EKRAN BICIMI: 844x390 dokunmatik olmayan bir pencerede de
   * sutun sigmiyor, o yuzden kapisiz bir seciciyle de yaziliyor.
   * Uclu liste OZGULLUK icin: derli kip takimi (body.mobil #emoji-katman)
   * ayni olcude ozgul ve --em-boy'u 60px yaziyor; kapisiz tek secici
   * onu ezemezdi.
   */
  #emoji-katman,
  body.dikey #emoji-katman,
  body.mobil #emoji-katman {
    --em-boy: 50px;
    --em-dugme: 52px;
    --em-ara: 8px;
  }
  /* Cubuk olculeri yalnizca dokunmatikte anlamli (oyun.css: 118 / 14). */
  body.mobil #emoji-katman {
    --em-cubuk-alt: 14px;
    --em-cubuk: 118px;
  }
  #emoji-liste {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    max-height: none;
  }
  /* Dugme yalnizca derli kipte var; sira o zaman onun SAGINDAN
     basliyor ve dugmeyle ayni hizada duruyor. */
  body.dikey #emoji-liste,
  body.mobil #emoji-liste {
    left: calc(var(--em-sol) + var(--em-dugme) + var(--em-ara));
    bottom: var(--em-alt);
  }
}

/*
 * Alcak masaustu penceresi. Balon 48px'in altina INMIYOR; kazanc
 * aradan ve ust paydan cikiyor, gerisini sutun sarmasi hallediyor.
 */
@media (min-aspect-ratio: 88/100) and (max-height: 620px) {
  #emoji-katman {
    --em-boy: 50px;
    --em-ara: 8px;
    --em-ust-pay: 118px;
  }
}

/* ------------------------------------------------------------------ */
/* Hareket duyarliligi                                                 */
/* ------------------------------------------------------------------ */

/*
 * Bu yasta nadir ama isletim sistemi ayarina uymak bedava. Sirayla
 * belirme KALIYOR (bilgi tasiyor: "bunlar ayri ayri seyler"), yalnizca
 * ziplama-buyume kaldiriliyor ve sure kisaliyor.
 */
@media (prefers-reduced-motion: reduce) {
  #emoji-katman.emoji-acik .emoji-balon {
    animation-duration: 0.12s;
    animation-timing-function: ease-out;
  }
  @keyframes emoji-gel {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  .emoji-simge.emoji-basildi { animation-duration: 0.12s; }
  .emoji-balon:active, #emoji-dugme:active { transform: none; }
}