/* Obby Keyboard Escape — oyun arayuzu.
   Mod secme ekrani ve HUD, referans karelerindeki Roblox portal
   duzenine gore kuruldu: buyuk kartlar + sahte cevrimici sayaci,
   oyun icinde kose sayaclari + alt seviye cubugu. */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --panel: rgba(20, 17, 30, 0.88);
  --cizgi: #3a3150;
  --metin: #f2effa;
  --soluk: #a79ec2;
  --sari: #ffcf3c;
  --yesil: #5fe06a;
  --mor: #a95cff;
  --golge: 0 4px 0 rgba(0, 0, 0, 0.35);

  /* Dokunmatik kontrollerin olculeri TEK yerde. Alt HUD kendi
     konumunu bunlardan hesapliyor; sabit sayilar kullanildiginda
     cubuk buyudukce seviye cubugunun uzerine biniyordu. */
  --cubuk-boy: min(132px, 31vmin);
  --zipla-boy: min(96px, 23vmin);
  --kontrol-alt: max(18px, env(safe-area-inset-bottom));
}

html, body {
  height: 100%;
  overflow: hidden;
  background: #0d0a14;
  color: var(--metin);
  font: 15px/1.45 "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* Mobil dokunma temizligi: uzun basinca cikan metin secimi ve
     "kopyala/yapistir" balonu, cift dokunusla yakinlastirma ve mavi
     dokunma parlamasi oyunda tamamen istenmeyen davranislar. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  overscroll-behavior: none;
}

/* Tuvalde hicbir varsayilan dokunma jesti calismamali: kaydirma,
   yakinlastirma, cift dokunus — hepsi kamerayi/oyunu bozuyor. */
#sahne {
  position: fixed;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

/* Menu kaydirilabilir kalmali ama yatay/zoom jesti olmasin. */
#menu { touch-action: pan-y; }
.gizli { display: none !important; }

/* ================================================================= */
/* HUD                                                               */
/* ================================================================= */

#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }

/* Tehlike vinyeti: dev bekci yaklastikca kenarlar kizariyor.
   --tehlike'yi js/oyun.js icindeki tehlikeYaz() yaziyor (0..1).
   Oyuncunun 2.7 birimlik yakalama esigine gelene kadar HICBIR uyarisi
   yoktu; dev sessiz ve gorunmez bir sayacti. */
#hud::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--tehlike, 0);
  /* Iki katman: kirmizi TEK BASINA renk korlugunde neredeyse
     algilanmiyor (luminans farki ~%3), karartma katmani sinyali
     renkten bagimsiz hale getiriyor. */
  background:
    radial-gradient(120% 85% at 50% 50%, transparent 45%, rgb(var(--tehlike-rgb, 190 12 30) / 0.62) 100%),
    radial-gradient(120% 85% at 50% 50%, transparent 40%, rgba(0, 0, 0, 0.5) 100%);
  transition: opacity 0.18s linear;
}

/* --- tsunami: alttan yukselen su bandi --------------------------- */

/* Dalga oyuncunun ARKASINDA ve kamera arkayi 4.5 birimden fazla
   gormuyor (olculdu) — yani tehlike 3B'de okunamiyor. Bu bant
   `--tehlike` ile yukseliyor ve tek basina "su geliyor" diyor.
   Yalniz tsunami haritasinda gorunur. */
/* Yukseklik DEGIL `transform: scaleY` ile buyuyor. Sebep: `height`
   gecisi duzen (layout) animasyonu — pahali, ve sekme/derleyici kare
   uretmedigi anda hic ilerlemiyor (olculdu: gizli pencerede bant
   sonsuza kadar 0'da kaliyordu). scaleY derleyici uzerinde calisiyor
   ve tek bir duzen gecisi bile gerektirmiyor. */
#dalga-bant {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 26vh;
  display: none;
  pointer-events: none;
  overflow: hidden;
  transform: scaleY(var(--tehlike, 0));
  transform-origin: bottom center;
  transition: transform 0.18s linear;
  will-change: transform;
}
body.tsunami #dalga-bant { display: block; }
#dalga-bant i {
  position: absolute;
  left: -10%; right: -10%; bottom: 0; top: 0.9em;
  background: linear-gradient(180deg, rgba(47, 155, 255, 0.55), rgba(16, 69, 126, 0.82));
}
/* Ust kenardaki kopuk cizgisi — dalganin agzi */
#dalga-bant::before {
  content: "";
  position: absolute;
  left: -10%; right: -10%; top: 0;
  height: 1.1em;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  filter: blur(2px);
  animation: dalgaSalin 1.15s ease-in-out infinite;
}
@keyframes dalgaSalin { 50% { transform: translateY(3px) scaleX(1.04); } }

/* --- sol ust: kare sistem dugmeleri ----------------------------- */

#hud-sol {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  /* Etiket dugmenin 17px ALTINDA duruyor; 10px bosluk birakilinca
     bir sonraki dugmenin uzerine biniyordu. */
  gap: 24px;
  pointer-events: auto;
}

/* Ikon grid ile ortalaniyor: line-height'a bagli olsaydi her boy
   degisiminde ikinci bir kural gerekirdi (mobilde dugme kuculuyor). */
.kare-dugme {
  position: relative;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 3px solid #2a2436;
  border-radius: 14px;
  background: linear-gradient(180deg, #fff3c4, #ffd94f);
  color: #2a2436;
  cursor: pointer;
  box-shadow: 0 4px 0 #b8912a, 0 8px 16px rgba(0, 0, 0, 0.35);
  transition: transform 0.08s, box-shadow 0.08s;
}
.kare-dugme.mor { background: linear-gradient(180deg, #ffd7f2, #ff8ad4); box-shadow: 0 4px 0 #b04590, 0 8px 16px rgba(0, 0, 0, 0.35); }
.kare-dugme:active { transform: translateY(3px); box-shadow: 0 1px 0 #b8912a, 0 4px 10px rgba(0, 0, 0, 0.35); }
.kare-dugme i { font-style: normal; font-size: 26px; line-height: 1; }
.kare-dugme small {
  position: absolute;
  left: 0; right: 0; bottom: -17px;
  /* Etiket BUYUK HARF burada olusuyor: 'hud.ses' anahtarinin degeri
     cumle duzeninde (Sound/Ses/Звук) cunku ayni anahtar ipucu
     balonunu da besliyor. ESC ve R zaten buyuk, etkilenmiyorlar. */
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 0 3px #000, 0 2px 4px rgba(0, 0, 0, 0.9);
}

.kare-dugme.mavi { background: linear-gradient(180deg, #d6f2ff, #6cc8ff); box-shadow: 0 4px 0 #2f7fb0, 0 8px 16px rgba(0, 0, 0, 0.35); }

/* --- ust orta: ilerleme seridi ----------------------------------- */

#ilerleme {
  position: absolute;
  left: 50%;
  top: max(10px, env(safe-area-inset-top));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(420px, calc(100% - 190px));
}
#ilerleme .uc { font-style: normal; font-size: 24px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6)); }
#ilerleme .serit {
  position: relative;
  flex: 1;
  height: 26px;
  border: 3px solid #2a2436;
  border-radius: 13px;
  background: linear-gradient(90deg, #3ad04a, #ffe14d 48%, #ff8a1e 72%, #ff2b2b);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3);
  overflow: visible;
}
#ilerleme .serit span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 3px #000, 0 2px 3px rgba(0, 0, 0, 0.8);
}
#ilerleme-isaret {
  position: absolute;
  bottom: -13px;
  left: 0;
  width: 0; height: 0;
  margin-left: -9px;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 12px solid #fff;
  filter: drop-shadow(0 -2px 2px rgba(0, 0, 0, 0.5));
  transition: left 0.2s ease-out;
}

/* --- kaide ipucu -------------------------------------------------- */

#kaide-ipucu {
  position: absolute;
  left: 50%;
  bottom: 33%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 22px;
  border: 3px solid #2a2436;
  border-radius: 14px;
  background: linear-gradient(180deg, #fff3c4, #ffd94f);
  color: #2a2436;
  text-align: center;
  pointer-events: auto;
  cursor: pointer;
  box-shadow: 0 5px 0 #b8912a, 0 12px 26px rgba(0, 0, 0, 0.45);
  animation: uyariGir 0.2s ease-out;
}
#kaide-ipucu b { font-size: 18px; font-weight: 900; }
#kaide-ipucu span { font-size: 12.5px; font-weight: 700; }
#kaide-ipucu em { font-style: normal; padding: 1px 6px; border-radius: 5px; background: #2a2436; color: #ffd94f; }

/* --- reklam perdesi ----------------------------------------------- */

#reklam-perde {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(6, 5, 10, 0.9);
  z-index: 40;
}
.reklam-kutu {
  width: min(340px, calc(100% - 40px));
  padding: 24px;
  border: 4px solid #fff;
  border-radius: 18px;
  background: #241f36;
  text-align: center;
}
.reklam-kutu h3 { font-size: 20px; font-weight: 900; margin-bottom: 6px; }
.reklam-kutu p { font-size: 13px; color: var(--soluk); margin-bottom: 16px; }
.reklam-bar { height: 12px; border-radius: 6px; background: #16122a; overflow: hidden; }
.reklam-bar i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #6fd0ff, #5fe06a); }
.reklam-sure { margin: 10px 0 14px; font-size: 26px; font-weight: 900; }
.reklam-atla {
  width: 100%;
  padding: 10px;
  border: 3px solid #2a2436;
  border-radius: 12px;
  background: #4b4466;
  color: var(--metin);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

/* --- sag ust: sayaclar ------------------------------------------- */

#hud-sag {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.sayac {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 19px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.9), 0 3px 6px rgba(0, 0, 0, 0.8);
}
.sayac .etiket { font-size: 13px; font-weight: 700; opacity: 0.9; }
.sayac .sim {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  font-size: 17px;
  font-style: normal;
  border-radius: 9px;
  background: rgba(20, 17, 30, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  text-shadow: none;
}

/* --- alt orta: hiz + seviye -------------------------------------- */

#hud-alt {
  position: absolute;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(560px, calc(100% - 200px));
  text-align: center;
}

#hiz-buyuk {
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -0.5px;
  color: #fff;
  text-shadow: 0 0 4px #000, 0 4px 0 rgba(0, 0, 0, 0.45), 0 6px 14px rgba(0, 0, 0, 0.7);
}
#hiz-buyuk small { font-size: 22px; }

#carpan {
  margin: 0 0 8px;
  font-size: 12.5px;
  font-weight: 800;
  color: #d4a8ff;
  text-shadow: 0 0 3px #000, 0 2px 5px rgba(0, 0, 0, 0.9);
}
#carpan span { opacity: 0.75; }

#seviye-kutu {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 6px 12px;
  border: 3px solid #2a2436;
  border-radius: 14px;
  background: linear-gradient(180deg, #fff3c4, #ffd94f);
  box-shadow: 0 4px 0 #b8912a, 0 10px 22px rgba(0, 0, 0, 0.45);
}
#seviye { font-size: 14px; font-weight: 900; color: #2a2436; white-space: nowrap; }
#seviye-sayi {
  position: absolute;
  right: 22px;
  font-size: 12.5px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
  pointer-events: none;
}
#seviye-bar {
  position: relative;
  flex: 1;
  height: 22px;
  border-radius: 8px;
  background: #1d64c8;
  border: 2px solid #17408a;
  overflow: hidden;
}
#seviye-dolgu {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 6px 0 0 6px;
  background: linear-gradient(180deg, #6fd0ff, #2f9bff);
  transition: width 0.18s ease-out;
}

/* --- sag alt: cevrimici ------------------------------------------- */

#cevrimici {
  position: absolute;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px 6px 8px;
  border-radius: 12px;
  background: rgba(20, 17, 30, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 17px;
  font-weight: 900;
  color: #fff;
}
#cevrimici i { font-style: normal; font-size: 17px; }

/* --- uyari + ucan yazilar ---------------------------------------- */

#uyari {
  position: absolute;
  left: 50%;
  top: 20%;
  transform: translateX(-50%);
  padding: 12px 26px;
  border-radius: 14px;
  background: rgba(220, 40, 60, 0.92);
  font-size: 19px;
  font-weight: 900;
  letter-spacing: 0.4px;
  white-space: nowrap;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  animation: uyariGir 0.25s ease-out;
}
@keyframes uyariGir { from { opacity: 0; transform: translate(-50%, -10px) scale(0.9); } }

#ucanlar { position: absolute; inset: 0; overflow: hidden; }
.ucan {
  position: absolute;
  font-size: 22px;
  font-weight: 900;
  color: var(--sari);
  text-shadow: 0 0 3px #000, 0 3px 10px rgba(0, 0, 0, 0.9);
  animation: ucanCik 0.85s ease-out forwards;
  will-change: transform, opacity;
}
@keyframes ucanCik {
  from { transform: translate(-50%, 0) scale(0.7); opacity: 0; }
  25% { transform: translate(-50%, -14px) scale(1.1); opacity: 1; }
  to { transform: translate(-50%, -58px) scale(1); opacity: 0; }
}

/* ================================================================= */
/* Mobil kontroller — mobilde HEP gorunur                            */
/* ================================================================= */

#mobil { position: fixed; inset: 0; pointer-events: none; z-index: 12; }

/* Cubuk sabit konumda duruyor (referans oyunlardaki gibi). Parmak
   basinca sadece topu kayiyor; dokununca beliren cubuk, oyuncunun
   nereye basacagini bilememesine yol aciyordu. */
#cubuk {
  position: absolute;
  left: max(16px, env(safe-area-inset-left));
  bottom: var(--kontrol-alt);
  /* vmin: telefonu yatay cevirince de ayni fiziksel buyuklukte kaliyor.
     Sabit 138px, 390px genisligindeki ekranin ucte birini yiyordu. */
  width: var(--cubuk-boy);
  height: var(--cubuk-boy);
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.45);
  background: rgba(20, 17, 30, 0.34);
  backdrop-filter: blur(6px);
  pointer-events: auto;
  touch-action: none;
}
#cubuk::after {
  content: "";
  position: absolute;
  inset: 19%;
  border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, 0.22);
}
/* Top ORANLI: cubugun capi ekrana gore degisiyor, sabit 62px kalirsa
   kucuk telefonda halkayi tasiyor. JS sadece left/top'i yuzde olarak
   yaziyor (bkz. cubukGuncelle), merkezleme burada. */
#cubuk-topu {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 45%;
  height: 45%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff, #cfc7e6);
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.55);
  transition: left 0.05s linear, top 0.05s linear;
}

#zipla-btn {
  position: absolute;
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(var(--kontrol-alt) + 4px);
  width: var(--zipla-boy);
  height: var(--zipla-boy);
  border: 4px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #8bff96, #3fbb52);
  box-shadow: 0 6px 0 #2b8a3a, 0 10px 22px rgba(0, 0, 0, 0.5);
  color: #0f2d13;
  pointer-events: auto;
  touch-action: none;
  cursor: pointer;
}
#zipla-btn i { font-style: normal; font-size: min(40px, 10vmin); line-height: 1; }
#zipla-btn.basili { transform: translateY(4px); box-shadow: 0 2px 0 #2b8a3a, 0 5px 12px rgba(0, 0, 0, 0.5); }

/* ================================================================= */
/* Mod secme ekrani                                                  */
/* ================================================================= */

#menu {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  overflow-y: auto;
  background: linear-gradient(180deg, #6fd2ff 0%, #a5e6ff 55%, #d8f3ff 100%);
  z-index: 20;
}

/* arka plan gokkusagi yayi */
#menu-gok { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
#menu-gok .yay {
  position: absolute;
  left: 50%;
  top: -34vmin;
  width: 128vmin;
  height: 128vmin;
  margin-left: -64vmin;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, transparent 0 60%,
      #ff3b3b 60% 65%, #ff8a1e 65% 70%, #ffd21e 70% 75%,
      #4ad04a 75% 80%, #2fb7ff 80% 85%, #7a5cff 85% 90%, #e14bd6 90% 95%,
      transparent 95%);
  opacity: 0.85;
}
#menu-gok::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(38px 22px at 12% 22%, #fff 60%, transparent 62%),
    radial-gradient(52px 28px at 17% 26%, #fff 60%, transparent 62%),
    radial-gradient(44px 24px at 85% 18%, #fff 60%, transparent 62%),
    radial-gradient(60px 32px at 90% 24%, #fff 60%, transparent 62%);
  opacity: 0.9;
}

/* Bes kart: 5x228 + 4x16 = 1204 <= 1240. 1080'de dorduncu kart bile
   alt satira dusuyordu. */
#menu-ic { position: relative; width: min(1240px, 100%); text-align: center; }

/* #baslik kurallari KALDIRILDI — oyun adi arayuzde gosterilmiyor
   (bkz. index.html #menu-ic). Basligin bosalttigi dikey yeri alt yazi
   ve kartlar aliyor; alcak ekranda bu fazladan yer ise yariyor. */

#menu .alt {
  margin-bottom: 18px;
  font-size: clamp(15px, 2.4vw, 22px);
  font-weight: 900;
  color: #fff;
  -webkit-text-stroke: 4px #2a2436;
  paint-order: stroke fill;
}

/* --- kartlar ------------------------------------------------------ */

#kartlar {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 16px;
  flex-wrap: wrap;
}

.kart {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(228px, 26vw);
  padding: 0;
  border: 5px solid #fff;
  border-radius: 16px;
  background: var(--tema);
  font: inherit;
  color: #fff;
  overflow: visible;
  cursor: pointer;
  box-shadow: 0 10px 0 rgba(0, 0, 0, 0.22), 0 20px 36px rgba(0, 0, 0, 0.3);
  transform: rotate(-1.5deg);
  transition: transform 0.16s, box-shadow 0.16s;
}
.kart:nth-child(even) { transform: rotate(1.5deg); }
.kart:hover { transform: rotate(0deg) translateY(-8px) scale(1.03); box-shadow: 0 16px 0 rgba(0, 0, 0, 0.2), 0 26px 46px rgba(0, 0, 0, 0.36); }
.kart:active { transform: rotate(0deg) translateY(-2px) scale(1.0); }

.kart .yeni {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%) rotate(-8deg);
  font-size: 26px;
  font-weight: 900;
  color: #ff2b2b;
  -webkit-text-stroke: 5px #fff;
  paint-order: stroke fill;
  z-index: 3;
  pointer-events: none;
  animation: yeniZipla 1.1s ease-in-out infinite;
}
@keyframes yeniZipla { 50% { transform: translateX(-50%) rotate(-8deg) scale(1.12); } }

/* Gorsel kutusunun ICI tamamen `em` ile olculu ve font-size kutunun
   yuksekligine bagli: kart kucuklunce sahne de kuculuyor. Sabit px'ken
   250px'e gore cizilmis dekor 137px'lik telefon kartinda kirpiliyordu -
   dev de karakter de kutunun ustunde kaliyordu. */
.kart-gorsel {
  --kg: min(250px, 34vw);
  position: relative;
  height: var(--kg);
  font-size: calc(var(--kg) / 15.625);
  border-radius: 11px 11px 0 0;
  overflow: hidden;
}
.kart-ad {
  padding: 9px 8px 10px;
  background: #2f2b3a;
  font-size: clamp(14px, 1.9vw, 19px);
  font-weight: 900;
  letter-spacing: 0.3px;
}

.kart-alt {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px 12px;
  background: #221e2e;
  border-radius: 0 0 11px 11px;
  text-align: left;
}
.kart-alt p { font-size: 12px; line-height: 1.5; color: #b7aecd; }
.zorluk {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  font-size: 11.5px;
  font-weight: 700;
  color: #b7aecd;
}
.zorluk i { font-style: normal; color: var(--sari); font-weight: 900; }
.zorluk.kapali i { color: #8b7fa8; }

/* --- kilitli kart -------------------------------------------------- */

.kart.kilitli { cursor: not-allowed; filter: saturate(0.55); }
.kart.kilitli:hover { transform: rotate(-1.5deg); box-shadow: 0 10px 0 rgba(0, 0, 0, 0.22), 0 20px 36px rgba(0, 0, 0, 0.3); }

.kart .yakinda {
  position: absolute;
  top: 44%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-9deg);
  z-index: 4;
  padding: 6px 14px;
  border: 3px solid #fff;
  border-radius: 10px;
  background: #ff2b5e;
  font-size: clamp(13px, 1.7vw, 17px);
  font-weight: 900;
  letter-spacing: 0.6px;
  white-space: nowrap;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

/* --- seker / slime / tsunami kart gorselleri ---------------------- */

.kart-gorsel.seker {
  background: linear-gradient(180deg, #ffd9f2 0%, #ffb0dd 46%, #7a4a2e 100%);
}
/* cikolata golu */
.kart-gorsel.seker .gol {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.9em;
  background: linear-gradient(180deg, #8a5533, #4d2c17);
  box-shadow: inset 0 0.2em 0.4em rgba(0, 0, 0, 0.35);
}
.kart-gorsel.seker .lolipop {
  position: absolute;
  width: 1.5em; height: 1.5em;
  border-radius: 50%;
  background: conic-gradient(#ff4d9e 0 25%, #fff 0 50%, #ff4d9e 0 75%, #fff 0);
  box-shadow: 0 0 0 0.14em #fff, 0 0.25em 0.4em rgba(0, 0, 0, 0.3);
}
.kart-gorsel.seker .lolipop::after {
  content: "";
  position: absolute;
  left: 50%; top: 100%;
  width: 0.18em; height: 1.5em;
  margin-left: -0.09em;
  background: #fff6e0;
}
.kart-gorsel.seker .l1 { left: 8%; top: 16%; }
.kart-gorsel.seker .l2 { right: 9%; top: 8%; transform: scale(0.78); }

.kart-gorsel.slime {
  background: linear-gradient(180deg, #16241a 0%, #24402a 52%, #12200f 100%);
}
/* tuslarin uzerindeki seffaf film */
.kart-gorsel.slime .film {
  position: absolute;
  left: -6%; right: -6%; bottom: 0.4em;
  height: 2.6em;
  border-radius: 50% 50% 0 0 / 0.8em 0.8em 0 0;
  background: linear-gradient(180deg, rgba(140, 232, 90, 0.62), rgba(90, 190, 50, 0.28));
  box-shadow: inset 0 0.14em 0 rgba(220, 255, 190, 0.55);
  z-index: 3;
  pointer-events: none;
}
.kart-gorsel.slime .damla {
  position: absolute;
  width: 0.55em;
  border-radius: 0 0 50% 50%;
  background: linear-gradient(180deg, #6fd23c, #a8e86a);
  animation: damlaSark 2.8s ease-in-out infinite;
}
@keyframes damlaSark { 50% { transform: translateY(0.5em) scaleY(1.18); } }
.kart-gorsel.slime .d1 { left: 22%; top: 2.1em; height: 1.5em; animation-delay: 0s; }
.kart-gorsel.slime .d2 { left: 55%; top: 2.1em; height: 2.2em; animation-delay: .6s; }
.kart-gorsel.slime .d3 { left: 78%; top: 2.1em; height: 1.1em; animation-delay: 1.2s; }

.kart-gorsel.tsunami {
  background: linear-gradient(180deg, #9fd8ff 0%, #4aa8f0 44%, #10457e 100%);
}
/* arkadan gelen su duvari */
.kart-gorsel.tsunami .dalga {
  position: absolute;
  left: -12%; right: -12%; bottom: 1.1em;
  height: 6.2em;
  border-radius: 46% 46% 8% 8% / 34% 34% 6% 6%;
  background: linear-gradient(180deg, #2f9bff 0%, #1c6fc4 60%, #10457e 100%);
  box-shadow: inset 0 0.3em 0 rgba(255, 255, 255, 0.42);
  z-index: 1;
}
.kart-gorsel.tsunami .kopuk {
  position: absolute;
  left: -12%; right: -12%; bottom: 6.6em;
  height: 0.8em;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.82);
  filter: blur(0.1em);
  z-index: 1;
}
/* Karakter ve tuslar dalganin ONUNDE kalmali */
.kart-gorsel.tsunami .kart-karakter,
.kart-gorsel.tsunami .tuslar { z-index: 4; }

/* --- kartta gercek karakter ---------------------------------------- */

/* Kart gorseli 3B modelden uretiliyor (bkz. oyun.js kartKarakterleriCiz):
   CSS ile cizilen blok figur artik oyundaki karakteri temsil etmiyor. */
.kart-karakter {
  position: absolute;
  left: 50%;
  bottom: 2.13em;
  width: 6.88em;
  height: 9.38em;
  margin-left: -3.44em;
  z-index: 2;
  animation: figurZipla 1.8s ease-in-out infinite;
  pointer-events: none;
}

/* oyuncu sayisi rozeti */
.oyuncu-rozet {
  position: absolute;
  left: 0.5em;
  bottom: 0.5em;
  display: flex;
  align-items: center;
  gap: 0.31em;
  padding: 0.25em 0.63em 0.25em 0.38em;
  border-radius: 999px;
  background: rgba(24, 20, 34, 0.72);
  font-size: 0.94em;
  font-weight: 900;
  /* Rozet kart gorselinin EN USTU olmali. 2'de kalinca temaya gore
     ortuluyordu: tsunamide `.tuslar` dalganin onunde kalsin diye 4
     aldigi icin sayinin %63'unu kapatiyor (Tsunami kartinda oyuncu
     sayisi HIC gorunmuyordu), slime'da `.film` z:3 ile rozetin
     tamamini yesile boyuyordu. Karttaki en yuksek suslemeli deger 4;
     5 hepsinin ustunde. Yeni bir tema eklenirse suslemeler 5'in
     ALTINDA kalmali. */
  z-index: 5;
}
.oyuncu-rozet i { font-style: normal; font-size: 0.93em; }

/* --- kart görselleri: CSS ile sahne ------------------------------- */

.kart-gorsel.zindan { background: linear-gradient(180deg, #4a3f66 0%, #6b5a8c 42%, #2b2338 100%); }
.kart-gorsel.kule { background: linear-gradient(180deg, #6fd2ff 0%, #b7e8ff 48%, #ffd9ef 100%); }

.kart-gorsel .tavan {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2.13em;
  background: repeating-linear-gradient(90deg, #3a3346 0 1.63em, #2a2436 1.63em 2.13em);
  box-shadow: 0 0.38em 0.75em rgba(0, 0, 0, 0.45);
}
.kart-gorsel .lav {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.13em;
  background: linear-gradient(180deg, #ff9c2b, #e5391a);
}

/* zemin tuşları
   DIKKAT: burada 3B donusum (perspective/rotateX) KULLANILMIYOR.
   overflow:hidden + border-radius tasiyan bu kutunun icinde 3B
   donusumlu bir cocuk olunca iOS Safari katmani hic boyamiyor ve
   kartin ici bombos gorunuyordu (kullanicinin menu ekran goruntusu:
   duz kirmizi/mor bloklar). Duz 2B scaleY ayni yassilma hissini
   veriyor ve her tarayicida boyaniyor. */
.kart-gorsel .tuslar {
  position: absolute;
  left: -6%;
  right: -6%;
  bottom: 0.75em;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.32em;
  padding: 0 0.38em;
  transform: scaleY(0.7);
  transform-origin: bottom center;
}
.kart-gorsel .tuslar i {
  display: grid;
  place-items: center;
  height: 1.88em;
  border-radius: 0.32em 0.32em 0.44em 0.44em;
  font-style: normal;
  font-size: 0.88em;
  font-weight: 900;
  color: rgba(0, 0, 0, 0.62);
  background: #7b8fc4;
  box-shadow: 0 0.34em 0 rgba(0, 0, 0, 0.3), inset 0 0.14em 0 rgba(255, 255, 255, 0.4);
}
.kart-gorsel .tuslar i:nth-child(3n) { background: #9aabd8; }
.kart-gorsel .tuslar i:nth-child(5n) { background: #ffc25e; }
.kart-gorsel .tuslar.renkli i:nth-child(1) { background: #ff6b6b; }
.kart-gorsel .tuslar.renkli i:nth-child(2) { background: #ffb03c; }
.kart-gorsel .tuslar.renkli i:nth-child(3) { background: #ffe14d; }
.kart-gorsel .tuslar.renkli i:nth-child(4) { background: #5fe06a; }
.kart-gorsel .tuslar.renkli i:nth-child(5) { background: #4dc7ff; }
.kart-gorsel .tuslar.renkli i:nth-child(6) { background: #b07bff; }

/* kule kartı: çekirdek sütun + basamaklar */
.kart-gorsel .cekirdek {
  position: absolute;
  left: 50%;
  top: -6%;
  width: 3.88em;
  margin-left: -1.94em;
  height: 78%;
  border-radius: 0.5em;
  background: linear-gradient(180deg, #ff5b5b, #ffb03c, #ffe14d, #5fe06a, #4dc7ff, #b07bff);
  box-shadow: 0 0 0 0.19em rgba(255, 255, 255, 0.5), 0 0.63em 1.5em rgba(0, 0, 0, 0.3);
}
.kart-gorsel .basamaklar {
  position: absolute;
  right: 0.38em;
  bottom: 3.38em;
  display: flex;
  align-items: flex-end;
  gap: 0.19em;
}
.kart-gorsel .basamaklar i {
  display: block;
  width: 1.25em;
  border-radius: 0.25em;
  background: #ffd94f;
  box-shadow: 0 0.25em 0 rgba(0, 0, 0, 0.25);
}
.kart-gorsel .basamaklar i:nth-child(1) { height: 0.75em; }
.kart-gorsel .basamaklar i:nth-child(2) { height: 1.38em; }
.kart-gorsel .basamaklar i:nth-child(3) { height: 2em; }
.kart-gorsel .basamaklar i:nth-child(4) { height: 2.63em; }
.kart-gorsel .basamaklar i:nth-child(5) { height: 3.25em; }

/* dev düşman silueti */
.kart-gorsel .dev {
  position: absolute;
  left: 0.75em;
  bottom: 4.63em;
  width: 4.63em;
  height: 5.75em;
  border-radius: 0.63em 0.63em 0.38em 0.38em;
  background: linear-gradient(180deg, #9c94ad, #5d5768);
  box-shadow: 0 0.5em 0 rgba(0, 0, 0, 0.3);
}
.kart-gorsel .dev .goz {
  position: absolute;
  top: 1.38em; left: 0.88em;
  width: 0.81em; height: 0.94em;
  border-radius: 0.19em;
  background: #ffcf3c;
  box-shadow: 0 0 0.63em #ffcf3c;
}
.kart-gorsel .dev .goz.sag { left: auto; right: 0.88em; }
.kart-gorsel .dev .agiz {
  position: absolute;
  left: 50%; top: 3.13em;
  width: 2.5em; height: 1em;
  margin-left: -1.25em;
  border-radius: 0.19em;
  background: #2a0f16;
  box-shadow: inset 0 0 0 0.19em #fdf6e8;
}

/* blok karakter */
.kart-gorsel .figur {
  position: absolute;
  left: 50%;
  bottom: 62px;
  width: 62px;
  height: 92px;
  margin-left: -31px;
  z-index: 2;
  animation: figurZipla 1.6s ease-in-out infinite;
}
@keyframes figurZipla { 50% { transform: translateY(-0.56em); } }
.kart-gorsel .figur i { position: absolute; display: block; }
.kart-gorsel .figur .kafa {
  left: 15px; top: 0; width: 32px; height: 30px;
  border-radius: 5px;
  background: #f2c48a;
}
.kart-gorsel .figur .yz {
  position: absolute;
  left: 6px; top: 11px;
  width: 20px; height: 8px;
  background:
    radial-gradient(circle at 3px 3px, #241a12 2.4px, transparent 2.6px),
    radial-gradient(circle at 17px 3px, #241a12 2.4px, transparent 2.6px);
}
.kart-gorsel .figur .yz::after {
  content: "";
  position: absolute;
  left: 5px; top: 6px;
  width: 10px; height: 5px;
  border-bottom: 2px solid #241a12;
  border-radius: 0 0 8px 8px;
}
.kart-gorsel .figur .govde {
  left: 12px; top: 32px; width: 38px; height: 32px;
  border-radius: 4px;
  background: #e0453f;
}
.kart-gorsel .figur .kol { top: 33px; width: 11px; height: 30px; border-radius: 4px; background: #e0453f; }
.kart-gorsel .figur .kol.sol { left: 1px; transform: rotate(-14deg); }
.kart-gorsel .figur .kol.sag { right: 1px; transform: rotate(14deg); }
.kart-gorsel .figur .bacak { top: 64px; width: 15px; height: 28px; border-radius: 4px; background: #2f74d0; }
.kart-gorsel .figur .bacak.sol { left: 14px; }
.kart-gorsel .figur .bacak.sag { right: 14px; }

/* --- menu alti ---------------------------------------------------- */

/* --- nasil oynanir -------------------------------------------------- */

#nasil {
  margin: 18px auto 0;
  max-width: 860px;
  padding: 14px 18px 16px;
  border: 3px solid rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  background: rgba(20, 17, 30, 0.5);
  text-align: left;
}
#nasil h2 {
  margin-bottom: 6px;
  font-size: 16px;
  font-weight: 900;
  color: var(--sari);
  letter-spacing: 0.4px;
}
#nasil p { font-size: 13px; line-height: 1.65; color: #efeaff; }
#nasil p b { color: var(--sari); }

.tus-listesi {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.tus-listesi li { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #cfc6e4; }
.tus-listesi kbd {
  display: grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border: 2px solid #2a2436;
  border-radius: 6px;
  background: linear-gradient(180deg, #fff, #d6d2e4);
  color: #2a2436;
  font: 900 12px/1 "Segoe UI", system-ui, sans-serif;
  box-shadow: 0 3px 0 #9d97b5;
}
.tus-listesi kbd.genis { min-width: 62px; }
.tus-listesi kbd.fare { font-size: 14px; }
/* Dokunma ikonlari emoji: klavye tusundan ayrilsin diye yuvarlak. */
.tus-listesi kbd.dokun { border-radius: 999px; font-size: 13px; }

#onizleme-bag {
  display: inline-block;
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
#onizleme-bag:hover { color: #fff; text-decoration: underline; }

/* --- dil secici ------------------------------------------------------ */

#dil-secici { position: absolute; top: 16px; left: 16px; z-index: 5; }
#dil-dugme {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border: 3px solid #2a2436;
  border-radius: 12px;
  background: linear-gradient(180deg, #fff, #e2ddf0);
  color: #2a2436;
  font: 800 13px/1 "Segoe UI", system-ui, sans-serif;
  cursor: pointer;
  box-shadow: 0 4px 0 #9d97b5;
}
#dil-dugme:active { transform: translateY(3px); box-shadow: none; }
#dil-dugme i { font-style: normal; font-size: 11px; opacity: 0.7; }
#dil-bayrak { font-size: 17px; }

/* Bayrak emojisi cizilemeyen sistemlerde (Windows) yerine dil kodu
   geciyor — bkz. js/oyun.js bayrakCizilebiliyorMu. Ham "EN" metni
   yariya kesilmis bir emoji gibi durmasin diye kucuk bir rozete
   aliniyor. Yalnizca kod gosterildiginde uygulaniyor. */
#dil-secici.bayraksiz #dil-bayrak,
#dil-secici.bayraksiz #dil-liste button > span:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  padding: 3px 5px;
  border-radius: 5px;
  background: #2a2436;
  color: #fff;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.5px;
}
#dil-secici.bayraksiz #dil-liste button.aktif > span:first-child { background: #6b4bd6; }

#dil-liste {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 160px;
  padding: 6px;
  border: 3px solid #2a2436;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}
#dil-liste button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #2a2436;
  font: 800 13px/1 "Segoe UI", system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
}
#dil-liste button:hover { background: #eee9f8; }
#dil-liste button.aktif { background: #ffd94f; }

/* ================================================================= */
/* Perde (duraklatma / sonuc)                                        */
/* ================================================================= */

/* `margin: auto` ile ortalaniyor, `place-items: center` ile DEGIL:
   panel gorunumden uzunsa (yatay telefon) merkezleme ust kismi
   erisilemez kiliyor, boylece dugmeler ekran disinda kaliyordu. */
#perde {
  position: fixed;
  inset: 0;
  display: grid;
  overflow-y: auto;
  padding: 12px;
  background: rgba(9, 7, 15, 0.82);
  backdrop-filter: blur(8px);
  z-index: 25;
}
#perde-ic {
  margin: auto;
  width: min(400px, 100%);
  padding: 26px;
  border: 4px solid #fff;
  border-radius: 18px;
  background: #241f36;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}
#perde-baslik { font-size: 24px; font-weight: 900; margin-bottom: 14px; }
#perde-tablo { font-size: 14px; line-height: 2; color: var(--soluk); margin-bottom: 18px; }
#perde-tablo b { color: var(--metin); float: right; font-weight: 800; }
#perde-tablo div { display: flow-root; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }

/* Sonuc dugmeleri: buyuk, renkli, IKONLU. Cocuk oyuncu ikonla
   okuyor; duz metin dugmeler test edilirken atlaniyordu. */
/* Buyuk ikonlu dugmeler hem duraklatma hem olum ekraninda kullaniliyor;
   secici bilerek sinif tabanli (once #perde'ye bagliydi, olum ekrani
   eklenince stiller tutmuyordu). */
button.buyuk {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 13px;
  margin-top: 10px;
  border: 3px solid #2a2436;
  border-radius: 14px;
  font: inherit;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
}
button.buyuk i {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.42);
  font-style: normal;
  font-size: 17px;
}
button.yesil {
  background: linear-gradient(180deg, #7bf07a, #45b447);
  color: #0d2a0c;
  box-shadow: 0 5px 0 #2b8a3a;
}
button.mavi {
  background: linear-gradient(180deg, #7cd6ff, #2f9bff);
  color: #06243f;
  box-shadow: 0 5px 0 #1f6bb5;
}
/* Zincirdeki sonraki dunya — bitis ekraninin birincil eylemi */
button.mor {
  background: linear-gradient(180deg, #d0a8ff, #a95cff);
  color: #260c45;
  box-shadow: 0 5px 0 #6d33b8;
}
button.buyuk:active { transform: translateY(4px); box-shadow: none; }

/* ================================================================= */
/* Olum ekrani                                                       */
/* ================================================================= */

#olum-perde {
  position: fixed;
  inset: 0;
  display: grid;
  overflow-y: auto;
  padding: 12px;
  background: radial-gradient(60% 60% at 50% 45%, rgba(120, 12, 30, 0.55), rgba(9, 7, 15, 0.92));
  backdrop-filter: blur(7px);
  z-index: 26;
  animation: olumGir 0.22s ease-out;
}
@keyframes olumGir { from { opacity: 0; } }

#olum-ic {
  margin: auto;
  width: min(380px, 100%);
  padding: 22px 24px 24px;
  border: 4px solid #fff;
  border-radius: 20px;
  background: linear-gradient(180deg, #2c1f33, #201829);
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65);
}

#olum-simge {
  font-size: 52px;
  line-height: 1;
  margin-bottom: 6px;
  animation: olumSimge 1.4s ease-in-out infinite;
}
@keyframes olumSimge { 50% { transform: scale(1.12) rotate(-6deg); } }

#olum-ic h2 {
  font-size: 26px;
  font-weight: 900;
  color: #ff5f72;
  -webkit-text-stroke: 4px #2a2436;
  paint-order: stroke fill;
}
#olum-sebep { margin-top: 6px; font-size: 14px; font-weight: 700; color: #ffd0d6; }

#olum-bilgi {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 14px 0 4px;
  flex-wrap: wrap;
}
#olum-bilgi span {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border: 1px solid var(--cizgi);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 13px;
  font-weight: 800;
  color: #efeaff;
}
#olum-bilgi i { font-style: normal; }

/* Reklam ileride bu butona baglanacak; goze carpmasi icin hafif nabiz. */
#olum-tekrar { animation: olumNabiz 1.6s ease-in-out infinite; }
@keyframes olumNabiz {
  50% { transform: translateY(-2px); box-shadow: 0 7px 0 #2b8a3a, 0 0 22px rgba(110, 224, 106, 0.45); }
}

#yukleniyor {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: #0d0a14;
  color: var(--soluk);
  font-size: 13px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  z-index: 30;
}

/* ================================================================= */
/* Duyarli duzen                                                     */
/*                                                                   */
/* TEMEL KURAL: oyun ici HUD olculeri `body.mobil` sinifina bagli,    */
/* ekran GENISLIGINE degil. Telefon yatay tutuldugunda genislik       */
/* 844-926 px oluyor ve eski `@media (max-width: 760px)` sorgusu hic  */
/* tetiklenmiyordu: masaustu olculeri kaliyor, sanal cubuk seviye     */
/* cubugunun uzerine biniyordu (kullanicinin yatay ekran goruntusu).  */
/* Sinifi js/oyun.js icindeki mobilKipiUygula() ekliyor.              */
/* ================================================================= */

/* --- dokunmatik: sol ust dugmeler -------------------------------- */

body.mobil #hud-sol {
  top: max(8px, env(safe-area-inset-top));
  left: max(8px, env(safe-area-inset-left));
  gap: 7px;
}
body.mobil .kare-dugme {
  width: min(46px, 11.5vmin);
  height: min(46px, 11.5vmin);
  border-width: 2px;
  border-radius: 11px;
  box-shadow: 0 3px 0 #b8912a, 0 5px 10px rgba(0, 0, 0, 0.35);
}
body.mobil .kare-dugme.mor { box-shadow: 0 3px 0 #b04590, 0 5px 10px rgba(0, 0, 0, 0.35); }
body.mobil .kare-dugme.mavi { box-shadow: 0 3px 0 #2f7fb0, 0 5px 10px rgba(0, 0, 0, 0.35); }
body.mobil .kare-dugme i { font-size: min(21px, 5.4vmin); }
/* ESC / R / SES etiketleri klavye tusunu anlatiyor - telefonda
   karsiligi yok, sadece yer kapliyor ve dugmeler arasina bosluk
   zorluyordu. */
body.mobil .kare-dugme small { display: none; }

/* --- dokunmatik: ust serit + sayaclar ---------------------------- */

/* Genislik sol dugme sutunu (8+46) ve sag sayac yigini (8+~85) icin
   yer birakiyor; 168px'te serit sayaclarin 6px altina giriyordu. */
body.mobil #ilerleme {
  top: max(9px, env(safe-area-inset-top));
  gap: 6px;
  width: min(420px, calc(100% - 200px));
}
body.mobil #ilerleme .uc { font-size: 19px; }
body.mobil #ilerleme .serit { height: 21px; border-width: 2px; border-radius: 11px; }
body.mobil #ilerleme .serit span { font-size: 12px; }
body.mobil #ilerleme-isaret { bottom: -10px; border-width: 0 7px 9px; margin-left: -7px; }

body.mobil #hud-sag {
  top: max(8px, env(safe-area-inset-top));
  right: max(8px, env(safe-area-inset-right));
  gap: 5px;
}
body.mobil .sayac { font-size: 15px; gap: 5px; }
body.mobil .sayac .sim { width: 24px; height: 24px; font-size: 13px; border-radius: 7px; }

/* Cevrimici rozeti mobilde #hud-sag icine TASINIYOR (js/oyun.js).
   Sag altta birakildiginda seviye cubuguyla birebir cakisiyordu. */
body.mobil #cevrimici {
  position: static;
  margin-top: 1px;
  padding: 3px 8px 3px 5px;
  border-radius: 9px;
  font-size: 14px;
}
body.mobil #cevrimici i { font-size: 13px; }

/* --- dokunmatik: alt HUD ----------------------------------------- */

/* Dikey telefon: cubuk ve zipla dugmesi alt kenari bastan basa
   kapliyor, alt HUD ONLARIN USTUNDE duruyor. Yukseklik kontrol
   degiskenlerinden hesaplaniyor; sabit sayi yazilirsa cubuk boyu
   degistiginde cakisma geri geliyor. */
body.mobil #hud-alt {
  width: calc(100% - 24px);
  bottom: calc(var(--kontrol-alt) + var(--cubuk-boy) + 10px);
}
body.mobil #hiz-buyuk { font-size: 24px; }
body.mobil #hiz-buyuk small { font-size: 16px; }
body.mobil #carpan { margin-bottom: 5px; font-size: 11.5px; }
body.mobil #seviye-kutu { padding: 4px 6px 4px 9px; gap: 7px; border-width: 2px; border-radius: 11px; }
body.mobil #seviye { font-size: 12.5px; }
body.mobil #seviye-bar { height: 17px; }
body.mobil #seviye-sayi { right: 16px; font-size: 11px; }

body.mobil #uyari { font-size: 15px; padding: 9px 18px; }
body.mobil #kaide-ipucu { bottom: 42%; padding: 8px 16px; }
body.mobil #kaide-ipucu b { font-size: 15px; }
body.mobil #kaide-ipucu span { font-size: 11px; }

/* Yatay telefon: alt kenarda cubukla zipla dugmesi ARASINDA genis bir
   bosluk var, alt HUD oraya oturuyor - dikeydeki gibi yukari itmek
   360 px'lik ekranin yarisini yiyordu. */
@media (max-height: 560px) {
  body.mobil #hud-alt {
    width: min(520px, calc(100% - 2 * var(--cubuk-boy) - 72px));
    bottom: max(10px, env(safe-area-inset-bottom));
  }
  body.mobil #hiz-buyuk { font-size: 21px; }
  body.mobil #carpan { margin-bottom: 3px; }

  /* Duraklatma/sonuc ve olum panelleri 390 px yukseklige sigmali;
     tam boyda dugmeler ekranin altinda kaliyordu. */
  /* Bitis ekraninda UC dugme oluyor ("sonraki dunya" dahil); olculer
     buna gore sikilastirildi, yoksa son dugme ekranin altinda kaliyor. */
  #perde-ic { padding: 14px 18px 16px; }
  #perde-baslik { font-size: 18px; margin-bottom: 6px; }
  /* Alti satir uc satira iniyor: uc dugmeli bitis ekrani 344 px'lik
     yatay telefonda da sigiyor. */
  #perde-tablo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 14px;
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 8px;
  }
  button.buyuk { padding: 8px; margin-top: 5px; font-size: 13.5px; }
  button.buyuk i { width: 22px; height: 22px; font-size: 13px; }

  #olum-ic { padding: 14px 18px 16px; }
  #olum-simge { font-size: 34px; margin-bottom: 2px; }
  #olum-ic h2 { font-size: 20px; -webkit-text-stroke-width: 3px; }
  #olum-sebep { font-size: 12.5px; }
  #olum-bilgi { margin: 9px 0 2px; gap: 7px; }
  #olum-bilgi span { padding: 4px 9px; font-size: 11.5px; }
}

/* --- menu: dar masaustu / tablet --------------------------------- */

@media (max-width: 900px) {
  #kartlar { gap: 12px; }
  .kart { width: min(300px, 46vw); border-width: 4px; }
  #nasil { font-size: 12px; }
  #dil-secici { top: 10px; left: 10px; }
}

/* --- menu: telefon ------------------------------------------------ */

/* Dikey telefonda kartlar YATAY SATIR oluyor: gorsel solda, ad ve
   zorluk sagda. Dik duzende tek kart 290 px yer kapliyor ve 660 px
   ekranda ucunun ikisi bile gorunmuyordu. */
@media (max-width: 560px) {
  /* place-items:center + tasan icerik = ust kisim erisilemez oluyor */
  #menu { align-items: start; padding: 12px 12px 18px; }
  #menu-ic { padding-top: 44px; }

  #menu .alt { margin-bottom: 12px; font-size: 14px; -webkit-text-stroke-width: 3px; }

  #kartlar { flex-direction: column; gap: 10px; }

  .kart {
    display: grid;
    grid-template-columns: 38% 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "gorsel ad" "gorsel alt";
    width: 100%;
    min-height: 104px;
    border-width: 4px;
    border-radius: 14px;
    box-shadow: 0 6px 0 rgba(0, 0, 0, 0.22), 0 12px 22px rgba(0, 0, 0, 0.3);
  }
  /* Egik kart dar ekranda kenardan tasiyor ve dokunma alanini kaydiriyor */
  .kart,
  .kart:nth-child(2),
  .kart:hover,
  .kart:active,
  .kart.kilitli:hover { transform: none; }

  .kart-gorsel {
    grid-area: gorsel;
    --kg: 104px;
    height: 100%;
    border-radius: 9px 0 0 9px;
  }
  /* Kucuk kutuda karakter one cikmali; dekor zaten minik kaliyor. */
  .kart-karakter { width: 8.4em; height: 11.4em; margin-left: -4.2em; bottom: 1.5em; animation: none; }
  /* Rozet yazisi --kg ile kuculunce okunmuyor - sabit boy. */
  .oyuncu-rozet { left: 5px; bottom: 5px; gap: 3px; padding: 2px 7px 2px 5px; font-size: 10px; }
  .oyuncu-rozet i { font-size: 9px; }

  .kart-ad {
    grid-area: ad;
    padding: 8px 10px 3px;
    border-radius: 0 9px 0 0;
    font-size: 16px;
    text-align: left;
  }
  .kart-alt {
    grid-area: alt;
    gap: 5px;
    padding: 0 10px 8px;
    border-radius: 0 0 9px 0;
  }
  .kart-alt p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 11.5px;
    line-height: 1.38;
  }
  .zorluk { padding: 3px 9px; font-size: 11px; }

  .kart .yakinda { top: 50%; left: 19%; font-size: 12px; padding: 4px 9px; border-width: 2px; }

  #nasil { margin-top: 12px; padding: 11px 13px 13px; border-width: 2px; border-radius: 13px; }
  #nasil h2 { font-size: 14px; }
  #nasil p { font-size: 11.5px; line-height: 1.5; }
  .tus-listesi { margin-top: 9px; padding-top: 9px; gap: 7px 13px; }
  .tus-listesi li { font-size: 11px; }
  .tus-listesi kbd { min-width: 22px; height: 22px; font-size: 11px; border-width: 1px; }
  .tus-listesi kbd.genis { min-width: 48px; }

  #dil-secici { top: 8px; left: 8px; }
  #dil-dugme { padding: 6px 10px; font-size: 12px; border-width: 2px; }
}

/* --- menu: yatay telefon (alcak ekran) --------------------------- */

/* Uc kart TEK SIRADA kalmali: 300px'lik kartla ikisi sigiyor, ucuncusu
   alta duşuyor ve 390px yuksekligindeki ekranda iki tam sayfa scroll
   gerekiyordu. */
@media (max-height: 560px) and (min-width: 561px) {
  #menu { align-items: start; padding: 12px 14px 16px; }
  /* `#menu` bir grid; grid ogesinin OTOMATIK en kucuk genisligi
     icerigin max-content'idir. Serit `nowrap` oldugu icin bu deger
     5 kartin toplami (1120 px) cikiyordu ve #menu-ic 844 px'lik yatay
     telefonda 1120 px'e kilitleniyordu: baslik, "Nasil oynanir" kutusu
     ve 5. kart ekranin disina tasiyor, oyuncu SERIDI degil butun
     SAYFAYI yana kaydirmak zorunda kaliyordu.
     min-width:0 seridi kendi icinde kaydirilabilir birakiyor
     (olculdu 844x390'da: menu-ic 1120 -> 801 px, serit ici kaydirma
     0 -> 162 px, sayfanin yatay kaydirmasi 319 -> 0). */
  #menu-ic { min-width: 0; }

  /* HER SEY TEK EKRANDA — kaydirma YOK.
     Onceki surumde bes kart yatay kaydirmali bir seritteydi; oyuncu
     bes modun ancak dordunu goruyor, besinciyi parmakla aramak
     zorunda kaliyordu. Artik kart olcusu EKRANDAN hesaplaniyor.

     --kartg iki siniri birden dinliyor:
       genislik -> (ekran - kenar bosluklari - 4 bosluk) / 5
       yukseklik -> (ekran - alt yazi/nasil oynanir/paylar) / 1.55
     Kart yuksekligi ~1.55 x genislik (kare gorsel + ad + zorluk seridi),
     yani ikinci terim kartin DIKEY olarak sigmasini garanti ediyor.
     min() hangisi darsa onu seciyor; 216px de ust sinir. */
  #menu {
    --bosluk: clamp(5px, 1vw, 12px);
    /* 100vw kaydirma cubugunu DA sayiyor: cubuk cikinca kart hesaplanandan
       ~16px genis oluyor, tasma buyuyor, cubuk kaliyor — kendini besleyen
       bir dongu. Genislik teriminden pesin 16px dusuluyor.

       YUKSEKLIK terimi ORANLA hesaplanmiyor. Kart = kare gorsel + ad
       seridi + zorluk seridi; alttaki iki serit en kucuk punto ve
       dolgularina takildigi icin kart daraldikca KUCULMUYOR (olculdu:
       128px genislikte kart 224px, yani oran 1.55 degil 1.75 ve
       daraldikca buyuyor). O yuzden --kartg dogrudan GORSELIN kenari
       olarak veriliyor ve sabit ~96px'lik serit payi dusuluyor. */
    --kartg: min(
      216px,
      calc((100vw - 44px - 4 * var(--bosluk)) / 5 - 10px),
      calc(100vh - 96px - 116px)
    );
  }
  #menu .alt { margin-bottom: 8px; font-size: clamp(12px, 1.9vw, 16px); }
  #kartlar {
    gap: var(--bosluk);
    flex-wrap: nowrap;
    overflow: visible;
  }
  .kart { width: var(--kartg); flex: 0 0 auto; }
  /* Kart ici olculer gorsel boyutundan tureyor (font-size: --kg/15.625,
     bkz. .kart-gorsel), yani tuslar/dev/damla hepsi birlikte kuculuyor. */
  .kart-gorsel { --kg: var(--kartg); }
  .kart-ad { padding: 5px 6px 6px; font-size: clamp(10px, 1.35vw, 14px); }
  .kart-alt { padding: 6px 8px 8px; gap: 4px; }
  .kart-alt p { display: none; }
  .zorluk { padding: 2px 7px; font-size: clamp(9px, 1.15vw, 11px); }
  .oyuncu-rozet { font-size: 0.86em; }
  /* Yatayda dikey yer kartlarin: aciklama paragrafi ve model onizleme
     bagi kalkiyor, tus listesi kaliyor (oyuncunun gercekten ihtiyaci
     olan tek kisim). Onizleme bagi portal paketlerinde build tarafindan
     zaten siliniyor; burada kaynak surumde de gizleniyor. */
  #nasil { margin-top: 8px; padding: 7px 11px 9px; }
  #nasil h2 { display: none; }
  #nasil p { display: none; }
  #onizleme-bag { display: none; }
  .tus-listesi { margin-top: 6px; padding-top: 6px; gap: 5px 10px; }
  .tus-listesi li { font-size: clamp(9px, 1.15vw, 11px); }
  .tus-listesi kbd { min-width: 20px; height: 20px; font-size: 10px; }
  .tus-listesi kbd.genis { min-width: 44px; }
  .tus-listesi { border-top: 0; margin-top: 0; padding-top: 0; }
}

/* ================================================================= */
/* Azaltilmis hareket                                                */
/*                                                                   */
/* Hareket duyarliligi olan oyuncu icin: sonsuz donen/zipla yan       */
/* animasyonlar duruyor ve tehlike vinyeti aninda geciyor. Kamera     */
/* FOV kicki de kapaniyor (js/oyun.js azHareket).                     */
/* ================================================================= */

@media (prefers-reduced-motion: reduce) {
  #olum-simge,
  #olum-tekrar,
  .kart-karakter,
  .kart-gorsel .figur,
  .kart-gorsel.slime .damla,
  #dalga-bant::before,
  .kart .yeni {
    animation: none !important;
  }
  #hud::after { transition: none; }
  .kart { transition: none; }
}

/* ================================================================= */
/* Harita temalari                                                   */
/* ================================================================= */

/* Tehlike vinyetinin rengi haritaya gore degisiyor: tsunamide su
   mavisi, slime'da yesil. Karartma katmani her temada ayni kaliyor —
   renk korlugunde sinyali tasiyan tek sey o. Sinifi js/oyun.js
   haritaYukle icinde yaziyor (govdeSinifi). */
body.tsunami #hud { --tehlike-rgb: 77 199 255; }
body.slime   #hud { --tehlike-rgb: 120 214 60; }
body.seker   #hud { --tehlike-rgb: 255 126 200; }

/* Klavye listesi dokunmatikte gizli, dokunma listesi masaustunde. */
#dokunma-listesi { display: none; }
body.mobil #tus-listesi { display: none; }
body.mobil #dokunma-listesi { display: flex; }