/*
 * Brookhaven RP -- ogretici ipucu katmani (js/ipucu.js).
 *
 * Hedef kitle 3-13 yas ve cogu OKUMA BILMIYOR. Bu yuzden buradaki her
 * sey abartili: buyuk formlar, doygun renkler, kalin beyaz kenarlik,
 * belirgin hareket. Ince ve sessiz bir ipucu bu yasta hic fark
 * edilmiyor.
 *
 * ---------------------------------------------------------------------
 * IKI KURAL
 *
 * 1. TIKLAMA GECIRGENLIGI. Kok `pointer-events: none`. Aksi halde tam
 *    ekran kaplayan bu kutu butun fare olaylarini yutar ve oyuncu
 *    kamerayi donduremez. Yalnizca telefon simgesi ve kapat dugmesi
 *    `auto` aliyor.
 *
 * 2. Z-INDEX 30. HUD (20) ve mobil kontrollerin (25) USTUNDE,
 *    panellerin (40) ALTINDA. Magaza acikken isaret eden el panelin
 *    ustune cikmasin.
 *
 * Butun secicilerde `ogr-` oneki var: oyun.css'te ZATEN bir `#ipucu`
 * (etkilesim balonu) bulunuyor, isimler karismamali.
 *
 * Olculer degiskenlerden geliyor; kucuk ekran icin dosyanin sonunda
 * yalnizca degiskenler kuculuyor, kurallar tekrar yazilmiyor.
 */

#ogretici {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;

  --ogr-el: 56px;         /* parmak emojisinin boyu */
  --ogr-tus: 54px;        /* hayalet W/A/S/D tusu */
  --ogr-ok: 92px;         /* dokunmatik yon oku */
  --ogr-tel: 110px;       /* calan telefon simgesi */

  --ogr-sari: #ffd93d;
  --ogr-yesil: #37f26b;
  --ogr-mavi: #2fa8ff;
  --ogr-pembe: #ff7ab8;
  --ogr-koyu: #1b2230;
  --ogr-golge: 0 8px 22px rgba(0, 0, 0, 0.42);
}

.ogr-gizli { display: none !important; }

/* ------------------------------------------------------------------ */
/* Isaret eden parmak                                                  */
/* ------------------------------------------------------------------ */

/*
 * Konum js tarafindan `left/top` ile veriliyor ve eleman kendi
 * merkezinden oturuyor. Ziplama animasyonu BURADA DEGIL, icerdeki
 * `.ogr-el` uzerinde: ikisi ayni transform'u paylassaydi el her
 * yeniden konumlanmada yerinden firlar.
 */
#ogr-parmak {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
}

#ogr-parmak.ogr-canli {
  animation: ogr-parmak-gel 0.26s cubic-bezier(0.2, 1.3, 0.4, 1);
}
@keyframes ogr-parmak-gel {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.45); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Genisleyip sonen halka -- hedefin capina gore buyuyor (js ayarlar). */
.ogr-halka {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--ogr-halka-boy, 56px);
  height: var(--ogr-halka-boy, 56px);
  margin: 0;
  border: 5px solid var(--ogr-sari);
  border-radius: 50%;
  box-shadow: 0 0 16px rgba(255, 217, 61, 0.55);
  animation: ogr-halka-at 1.5s ease-out infinite;
}
.ogr-halka.ogr-gec { animation-delay: 0.75s; }

@keyframes ogr-halka-at {
  0%   { transform: translate(-50%, -50%) scale(0.55); opacity: 0.9; }
  70%  { opacity: 0.28; }
  100% { transform: translate(-50%, -50%) scale(2.1); opacity: 0; }
}

/*
 * El, halkanin uzerinde asagi-yukari ziplyor. Yukari giderken hafifce
 * buyuyor: "bastim" hissini veren sey bu, duz bir kaydirma degil.
 */
.ogr-el {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--ogr-el);
  height: var(--ogr-el);
  margin: calc(var(--ogr-el) / -2) 0 0 calc(var(--ogr-el) / -2);
  font-size: var(--ogr-el);
  line-height: var(--ogr-el);
  text-align: center;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45));
  animation: ogr-zipla 0.85s ease-in-out infinite;
}
@keyframes ogr-zipla {
  0%, 100% { transform: translateY(12px) scale(1); }
  50%      { transform: translateY(-8px) scale(1.1); }
}

/* Elin yanindaki cok kisa etiket -- tek kelimeyi gecmemeli. */
.ogr-parmak-yazi {
  position: absolute;
  left: calc(var(--ogr-el) * 0.66);
  top: 50%;
  transform: translateY(-50%);
  padding: 7px 15px;
  background: linear-gradient(180deg, #ffffff, #ffeeb0);
  border: 3px solid var(--ogr-sari);
  border-radius: 99px;
  box-shadow: var(--ogr-golge);
  color: #3a2a00;
  font-size: 17px;
  font-weight: 800;
  white-space: nowrap;
}
/* Ekranin sag yarisindaki hedefte etiket sola gecmezse disari tasiyor. */
#ogr-parmak.ogr-sola .ogr-parmak-yazi {
  left: auto;
  right: calc(var(--ogr-el) * 0.66);
}

/* ------------------------------------------------------------------ */
/* Hayalet tuslar / dokunmatik yon oku                                 */
/* ------------------------------------------------------------------ */

/*
 * Sol altta duruyor: gercek klavyede WASD zaten sol elin altinda ve
 * ekranin bu kosesi masaustunde bos. Dokunmatikte ayni kutu joystick
 * (#cubuk: sol 26px, alt 26px, 132px) HEMEN USTUNE tasiniyor -- ok
 * "bu cubugu su yone it" demis oluyor.
 *
 * Sol kenar 44 DEGIL 108: cubugun ustundeki serit bos degil, emoji
 * dugmesi de orada duruyor (emoji.css #emoji-dugme, sol 18 / alt
 * --em-alt). Olculdu -- 390x844 dokunmatik dikeyde ok kutusu dikeydeki
 * 1.25 olcekle x 34.5...129.5'e yayiliyor ve dugmenin (x 18...80,
 * y 192...254) %73'unu ortuyordu. Katman `pointer-events: none`, yani
 * cocugun okun biraz soluna denk gelen dokunusu emoji dugmesine
 * dusuyor: sutun aciliyor, karakter yerinde kaliyor. 108 = dugmenin
 * sag kenari (80) + olcekten gelen 9.5 sol tasma + nefes payi; ok hala
 * cubugun (x 18...172) uzerinde duruyor, yani anlami bozulmuyor.
 * Ayni deger dikey kip icin oyun.css'te de yazili.
 */
#ogr-tuslar {
  position: fixed;
  left: 24px;
  bottom: 24px;
}
#ogretici.ogr-dokunmatik #ogr-tuslar {
  left: 108px;
  bottom: 172px;
}

#ogr-tuslar.ogr-canli {
  animation: ogr-alttan-gel 0.24s cubic-bezier(0.2, 1.2, 0.4, 1);
}
@keyframes ogr-alttan-gel {
  from { opacity: 0; transform: translateY(18px) scale(0.9); }
  to   { opacity: 1; transform: none; }
}

/* Klavyeli cihaz W/A/S/D gorur, dokunmatik cihaz oku. */
.ogr-ok { display: none; }
#ogretici.ogr-dokunmatik .ogr-wasd { display: none; }
#ogretici.ogr-dokunmatik .ogr-ok { display: block; }

.ogr-wasd {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.ogr-sira { display: flex; gap: 7px; }

.ogr-tus {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ogr-tus);
  height: var(--ogr-tus);
  background: rgba(255, 255, 255, 0.24);
  border: 3px solid rgba(255, 255, 255, 0.7);
  border-bottom-width: 6px;
  border-radius: 15px;
  box-shadow: var(--ogr-golge);
  color: #ffffff;
  font-size: calc(var(--ogr-tus) * 0.46);
  font-weight: 800;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.3);
}

/* Basilmasi istenen tus: dolu sari + nabiz. Yari saydam kardeslerinin
   yaninda tek bakista ayrisiyor. */
.ogr-tus.ogr-etkin {
  background: linear-gradient(180deg, #fff3b0, var(--ogr-sari));
  border-color: #ffffff;
  color: #4a3200;
  text-shadow: none;
  animation: ogr-tus-nabiz 0.95s ease-in-out infinite;
}
@keyframes ogr-tus-nabiz {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(255, 217, 61, 0.75); }
  50%      { transform: scale(1.16); box-shadow: 0 0 0 16px rgba(255, 217, 61, 0); }
}

.ogr-ok {
  width: var(--ogr-ok);
  height: var(--ogr-ok);
  line-height: var(--ogr-ok);
  text-align: center;
  font-size: calc(var(--ogr-ok) * 0.62);
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.5));
  animation: ogr-ok-nabiz 1s ease-in-out infinite;
}
@keyframes ogr-ok-nabiz {
  0%, 100% { transform: scale(1);    opacity: 0.85; }
  50%      { transform: scale(1.18); opacity: 1; }
}

/* ------------------------------------------------------------------ */
/* Calan telefon                                                       */
/* ------------------------------------------------------------------ */

/*
 * Sagda, dikey ortada.
 *
 * NEDEN sag ALT degil: mobilde orada zaten iki buyuk yuvarlak dugme var
 * (#btn-zipla alt 30px, #btn-etkilesim alt 132px). Dikey orta ikisinin
 * de uzerinde kaliyor ve HUD'daki #btn-telefon'a dogru "bakiyor".
 */
#ogr-telefon {
  position: fixed;
  right: max(18px, 4vw);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
#ogr-telefon.ogr-canli {
  animation: ogr-tel-gel 0.3s cubic-bezier(0.2, 1.3, 0.4, 1);
}
@keyframes ogr-tel-gel {
  from { opacity: 0; transform: translateY(-50%) scale(0.6); }
  to   { opacity: 1; transform: translateY(-50%) scale(1); }
}

.ogr-tel-yuva {
  position: relative;
  width: var(--ogr-tel);
  height: var(--ogr-tel);
}

/* Genisleyen ses dalgalari -- ucu ayni animasyonu gecikmeli oynatiyor. */
.ogr-dalga {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  border: 4px solid var(--ogr-yesil);
  border-radius: 50%;
  animation: ogr-dalga-at 1.5s ease-out infinite;
}
.ogr-dalga.ogr-gec1 { animation-delay: 0.5s; }
.ogr-dalga.ogr-gec2 { animation-delay: 1s; }
@keyframes ogr-dalga-at {
  0%   { transform: translate(-50%, -50%) scale(0.7); opacity: 0.8; }
  100% { transform: translate(-50%, -50%) scale(2);   opacity: 0; }
}

/* Katmanin tamami pointer-events:none; tiklanabilir olan SADECE bu. */
.ogr-tel-simge {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  background: radial-gradient(circle at 34% 28%, #7dffab, #23c95c 62%, #12a247);
  border: 5px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  pointer-events: auto;
}
.ogr-tel-simge:active { transform: scale(0.93); }

/*
 * Sallanma ic spanda: dugmenin kendisi :active'te olcekleniyor ve iki
 * transform ayni elemanda birbirini eziyordu.
 */
.ogr-tel-emoji {
  display: block;
  font-size: calc(var(--ogr-tel) * 0.52);
  line-height: 1;
  animation: ogr-sallan 1.5s ease-in-out infinite;
}
@keyframes ogr-sallan {
  0%, 56%, 100% { transform: rotate(0deg); }
  60% { transform: rotate(-14deg); }
  65% { transform: rotate(12deg); }
  70% { transform: rotate(-11deg); }
  75% { transform: rotate(9deg); }
  80% { transform: rotate(-6deg); }
  86% { transform: rotate(4deg); }
  92% { transform: rotate(-2deg); }
}

/* Cocuk telefonu acmak istemeyebilir; bu dugme geri cagriyi tetiklemez. */
.ogr-tel-kapat {
  position: absolute;
  right: -8px;
  top: -8px;
  width: 38px;
  height: 38px;
  padding: 0;
  background: var(--ogr-koyu);
  border: 3px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  box-shadow: var(--ogr-golge);
  color: #ffffff;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  pointer-events: auto;
}
.ogr-tel-kapat:active { transform: scale(0.9); }

.ogr-tel-yazi {
  padding: 9px 18px;
  background: linear-gradient(180deg, #ffffff, #d8ffe6);
  border: 3px solid var(--ogr-yesil);
  border-radius: 99px;
  box-shadow: var(--ogr-golge);
  color: #08381c;
  font-size: 18px;
  font-weight: 800;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Konusma balonu                                                      */
/* ------------------------------------------------------------------ */

/*
 * Ust ortada ama en tepede DEGIL.
 *
 * 132px OLCULEREK secildi: oyun.css'teki #hud-sol (cuzdan + seviye
 * kutusu) tam 123px'te bitiyor, #bildirimler ise 84px'te basliyor.
 * Balon 124'teyken dar bir pencerede seviye kutusuna bir piksel kala
 * degiyordu. Deger kucuk ekranda da DEGISMIYOR: orada HUD 119px'te
 * bitiyor, yani 132 iki durumda da bosta. HUD'un boyu degisirse
 * burasi da degismeli.
 */
#ogr-balon {
  position: fixed;
  left: 50%;
  top: 132px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(88vw, 560px);
  padding: 14px 24px;
  background: linear-gradient(180deg, #ffffff, #fff0bd);
  border: 4px solid var(--ogr-sari);
  border-radius: 26px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
  color: #2c2000;
}
/* Konusma balonu kuyrugu -- alttan asagi bakan ucgen. */
#ogr-balon::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -17px;
  width: 0;
  height: 0;
  margin-left: -13px;
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-top: 17px solid var(--ogr-sari);
}

#ogr-balon.ogr-canli {
  animation: ogr-balon-gel 0.3s cubic-bezier(0.2, 1.3, 0.4, 1);
}
@keyframes ogr-balon-gel {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-16px) scale(0.82); }
  65%  { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.05); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

.ogr-balon-simge {
  font-size: 40px;
  line-height: 1;
  animation: ogr-simge-sek 1.4s ease-in-out infinite;
}
@keyframes ogr-simge-sek {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-5px) rotate(4deg); }
}

.ogr-balon-metin {
  font-size: clamp(19px, 4.2vw, 27px);
  font-weight: 800;
  line-height: 1.25;
}

/* ------------------------------------------------------------------ */
/* Kucuk ekran -- yalnizca olculer kuculuyor                           */
/* ------------------------------------------------------------------ */

@media (max-width: 720px) {
  #ogretici {
    --ogr-el: 46px;
    --ogr-tus: 44px;
    --ogr-ok: 76px;
    --ogr-tel: 86px;
  }
  .ogr-parmak-yazi { padding: 5px 12px; font-size: 14px; }
  .ogr-tel-kapat { width: 32px; height: 32px; font-size: 14px; }
  .ogr-tel-yazi { padding: 7px 14px; font-size: 15px; }
  /* `top` BILEREK devralaniyor -- HUD kucuk ekranda da 119px'te bitiyor. */
  #ogr-balon { padding: 11px 18px; border-radius: 22px; gap: 9px; }
  .ogr-balon-simge { font-size: 32px; }
}

/*
 * Yatik telefon: yukseklik cok az.
 *
 * Balon burada da yukari CIKARILMIYOR. Yatik ekranda HUD'un sol sutunu
 * hala 123px'e kadar iniyor, sag sutun ise ortaya dogru uzuyor: balonu
 * yukari almanin tek sonucu ust uste binmek olurdu. Bunun yerine balon
 * kuculuyor, yeri duruyor.
 */
@media (max-height: 520px) {
  #ogretici { --ogr-tel: 76px; --ogr-ok: 66px; --ogr-tus: 40px; }
  #ogr-balon { padding: 8px 16px; gap: 8px; }
  .ogr-balon-simge { font-size: 28px; }
  .ogr-balon-metin { font-size: clamp(17px, 2.4vw, 21px); }
  #ogretici.ogr-dokunmatik #ogr-tuslar { bottom: 150px; }
  .ogr-tel-yazi { font-size: 14px; }
}

/* ------------------------------------------------------------------ */
/* Dokunma hedefleri                                                   */
/* ------------------------------------------------------------------ */

/*
 * Calan telefonu KAPATAN dugme, cocugun ogreticiden cikabildigi tek
 * yer: 38px (kucuk ekranda 32px) parmak ucuyla vurulamiyordu.
 *
 * Kapi `pointer: coarse`: buyume yalnizca parmakla kullanilan
 * cihazlarda oluyor, fareyle acilan masaustu gorunumu degismiyor.
 * Kisa/dar ekranda 44px -- 76px'e inen telefon simgesinin uzerinde
 * 48px'lik bir rozet simgeyi yutuyordu.
 */
@media (pointer: coarse) {
  .ogr-tel-kapat { width: 48px; height: 48px; font-size: 20px; }
}
@media (pointer: coarse) and (max-width: 720px),
       (pointer: coarse) and (max-height: 520px) {
  .ogr-tel-kapat { width: 44px; height: 44px; font-size: 18px; }
}

/*
 * Hareket duyarliligi. Bu yasta nadir ama isletim sistemi ayarina
 * uymak bedava: isaretler duruyor, yalnizca zipla-donme kaliyor.
 */
@media (prefers-reduced-motion: reduce) {
  .ogr-halka,
  .ogr-el,
  .ogr-tus.ogr-etkin,
  .ogr-ok,
  .ogr-dalga,
  .ogr-tel-emoji,
  .ogr-balon-simge {
    animation-duration: 2.4s;
    animation-timing-function: ease-in-out;
  }
  .ogr-el, .ogr-tel-emoji, .ogr-balon-simge { animation-name: ogr-sonuk; }
  #ogr-parmak.ogr-canli,
  #ogr-tuslar.ogr-canli,
  #ogr-telefon.ogr-canli,
  #ogr-balon.ogr-canli { animation: none; }
}
@keyframes ogr-sonuk {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}