/*
  oyun.css — HUD, menu ve bitis ekrani.

  ── GORSEL DIL: ROBLOX OBBY ─────────────────────────────────────────
  Tur incelenip dort imza ozellik alindi (Roblox tarafinda karsiliklari
  UIStroke / UICorner / UIGradient / UIPadding):

    1. KALIN KOYU KONTUR. Panel, dugme ve YAZI — hepsinin etrafinda
       2-4 px koyu cizgi var. Turu "cizgi film" yapan tek sey bu; ilk
       surumde hicbir yerde kontur yoktu ve arayuz jenerik duruyordu.
    2. AGIR KOSE YARICAPI. Kutular 16-24 px, kucuk dugmeler tam yuvarlak.
    3. DIKEY GRADYAN DOLGU + 3B DUDAK. Her dugmenin ustu acik, alti koyu
       ve altinda daha koyu bir "dudak" var; basilinca dudak eziliyor
       (`translateY` + kisalan golge). Dokunma hissi buradan geliyor.
    4. AYDINLIK PANEL. Koyu cam yerine beyaza yakin govde + renkli
       baslik bandi. Karakter kartlari da beyaz: 3B render'i beyaz
       zeminde gostermek onu "koleksiyon karti" gibi okutuyor.

  Yazi konturu `text-shadow` ile — `-webkit-text-stroke` daha temiz
  ama `paint-order` desteklemeyen tarayicida konturu harfin ICINE
  dogru cizip yaziyi inceltiyor. Sekiz yonlu golge her yerde ayni.

  YAZI TIPI DOSYASI YOK. Cevrimdisi calisma kurali geregi web fontu
  indirilmiyor; bunun yerine sistemdeki en agir grotesk yigini
  kullaniliyor (Arial Black / Segoe UI Black / Roboto 900).

  ── HUD 3B'DE DEGIL, DOM'DA ─────────────────────────────────────────
  3B'de cizmek her yari icin ayri geometri ve iki kat cizim demekti;
  yazi tipi de keskin kalmiyordu. Ayrac da DOM: bedava ve tam piksel.

  Olcuye dair kural: HUD her seyi `.yari` kutusuna GORE konumluyor
  (`position:absolute` + `inset`), ekran genisligine gore degil.
*/

:root {
  --cizgi: #2b1b46;                 /* kalin kontur rengi */
  --panel: #fdfbff;
  --panel-2: #efe9ff;
  --koyu-yazi: #35225a;

  --p1: #ff7a45; --p1-alt: #cf5119;
  --p2: #4aa8ff; --p2-alt: #1b74c9;
  --mor: #7a45f0; --mor-alt: #5322c2;
  --yesil: #4fdc55; --yesil-alt: #2ba337;
  --sari: #ffc93d; --sari-alt: #d68f13;
  --kirmizi: #ff5a5f; --kirmizi-alt: #c62d33;

  --hud: rgba(28, 17, 48, 0.82);
  --hud-kenar: rgba(255, 255, 255, 0.92);
  --gk: linear-gradient(90deg, #ff4d4d, #ff9a3c, #ffe14d, #5fe06a, #4dc7ff, #5a6bff, #a95cff);

  /* Yazi konturu — sekiz yon. Roblox'taki UIStroke'un karsiligi. */
  --kontur: -2px 0 0 var(--cizgi), 2px 0 0 var(--cizgi), 0 -2px 0 var(--cizgi), 0 2px 0 var(--cizgi),
            -1.4px -1.4px 0 var(--cizgi), 1.4px -1.4px 0 var(--cizgi),
            -1.4px 1.4px 0 var(--cizgi), 1.4px 1.4px 0 var(--cizgi);
  --kontur-kalin: -3px 0 0 var(--cizgi), 3px 0 0 var(--cizgi), 0 -3px 0 var(--cizgi), 0 3px 0 var(--cizgi),
            -2.1px -2.1px 0 var(--cizgi), 2.1px -2.1px 0 var(--cizgi),
            -2.1px 2.1px 0 var(--cizgi), 2.1px 2.1px 0 var(--cizgi),
            0 5px 0 rgba(43, 27, 70, 0.35);

  /* DOKUNMATIK OLCULERI TEK YERDE.
     Genislik sorgusuna DEGIL `body.mobil` sinifina bagli — telefon
     YATAY tutuldugunda gorunum genisligi 844-926 px oluyor ve
     `max-width: 760px` gibi bir sorgu hic tetiklenmiyor; masaustu
     olculeri kalinca sanal cubuk HUD'un uzerine biniyor. */
  --kol-boy: min(128px, 30vmin);
  --tus-boy: min(84px, 21vmin);
  --kontrol-alt: max(14px, env(safe-area-inset-bottom));
  --kontrol-yan: max(12px, env(safe-area-inset-left));
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  background: #0d0b18;
  color: var(--koyu-yazi);
  font-family: system-ui, "Segoe UI", Roboto, sans-serif;
  -webkit-user-select: none; user-select: none;
  touch-action: none;
}

/* GOSTERI YAZISI — baslik, dugme, rozet, sayac.
   Yazi tipi DOSYASI indirilmiyor (cevrimdisi calisma kurali), onun
   yerine sistemdeki en agir grotesk yigini kullaniliyor. Windows'ta
   Arial/Segoe UI Black, Android'de Roboto 900, macOS'ta Helvetica
   Black — hepsi turun istedigi kalinligi veriyor. */
h1, h2, .dugme, .kurdele,
.yari .rozet, .yari .bolum b, .yari .metre b, .yari .orta, .yari .ok em,
#sure, #geri-sayim, #son-baslik, #son-rekor, .secim .ad, .mod b, #cevir b {
  font-family: "Arial Black", "Segoe UI Black", "Arial Rounded MT Bold", Roboto, system-ui, sans-serif;
  font-weight: 900;
}

#sahne { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

.gizli { display: none !important; }

/* ── HUD ─────────────────────────────────────────────────────────── */

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

.yari { position: absolute; top: 0; bottom: 0; overflow: hidden; }
.yari[data-no="1"] { left: 0; right: 50%; }
.yari[data-no="2"] { left: 50%; right: 0; }

#ayrac {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 8px; margin-left: -4px;
  background: var(--gk);
  border-left: 2px solid var(--cizgi);
  border-right: 2px solid var(--cizgi);
}

/* olum karartmasi — yariya ozel */
.yari .perde {
  position: absolute; inset: 0;
  background: radial-gradient(120% 100% at 50% 45%, rgba(120, 20, 40, 0.35), #0a0614 75%);
  opacity: 0; transition: opacity 0.18s ease;
}
.yari .perde.kapali { opacity: 0.92; }

/* ORTADA YER AYRILIYOR. Sure hapi (#ust-orta) ekranin tam ortasinda
   ve iki yarinin ustune biniyor; pay birakilmayan surumde P2'nin
   rozetini ve P1'in metre hapini tamamen ortuyordu. */
.yari .ust {
  position: absolute; top: 10px;
  display: flex; align-items: stretch; gap: 6px;
  font-size: 14px;
}
.yari[data-no="1"] .ust { left: 10px; right: 66px; }
.yari[data-no="2"] .ust { left: 66px; right: 10px; }

/* Oyuncu rozeti: dolu renk + koyu kontur — Roblox'ta oyuncu etiketi
   hep boyle. Hafif egik durmasi "elle yerlestirilmis" hissi veriyor. */
.yari .rozet {
  display: grid; place-items: center;
  min-width: 42px; padding: 2px 9px;
  border: 3px solid var(--cizgi); border-radius: 12px;
  color: #fff; font-size: 15px; letter-spacing: 0.02em;
  text-shadow: var(--kontur);
  box-shadow: 0 3px 0 var(--cizgi);
  transform: rotate(-2deg);
}
.yari[data-no="1"] .rozet { background: linear-gradient(#ff9d70, var(--p1) 55%, var(--p1-alt)); }
.yari[data-no="2"] .rozet { background: linear-gradient(#8ccbff, var(--p2) 55%, var(--p2-alt)); }

/* Bolum hapi: buyuk sayi + kucuk etiket (obby'nin "STAGE 3/7"si). */
.yari .bolum {
  flex: 0 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 7px;
  background: var(--hud); border: 3px solid var(--hud-kenar);
  border-radius: 14px; padding: 2px 10px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
  color: #fff;
}
.yari .bolum b { font-size: 16px; text-shadow: var(--kontur); flex: 0 0 auto; }
.yari .bolum i {
  font-style: normal; font-size: 11.5px; font-weight: 700;
  opacity: 0.86; letter-spacing: 0.02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.yari .metre {
  flex: 0 0 auto; margin-left: auto;
  display: flex; align-items: baseline; gap: 2px;
  background: var(--hud); border: 3px solid var(--hud-kenar);
  border-radius: 14px; padding: 2px 10px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
  color: #fff; font-variant-numeric: tabular-nums;
}
.yari .metre b { font-size: 16px; text-shadow: var(--kontur); }
.yari .metre small { opacity: 0.7; font-size: 11px; font-weight: 800; }

/* orta yazi: KONTROL NOKTASI / DUSTUN — dev, konturlu, zipliyor */
.yari .orta {
  position: absolute; left: 6px; right: 6px; top: 34%;
  text-align: center;
  font-size: clamp(21px, 4.2vw, 38px);
  letter-spacing: 0.04em; line-height: 1.05;
  color: var(--sari); text-shadow: var(--kontur-kalin);
  opacity: 0; transform: scale(0.7) rotate(-3deg);
  transition: opacity 0.14s ease, transform 0.22s cubic-bezier(0.2, 1.7, 0.5, 1);
}
.yari .orta.acik { opacity: 1; transform: scale(1) rotate(-2deg); }

/* ilerleme cubugu — dikey, tirmanis oyunu dikey okunur */
/* Cubuk her iki yaride de DIS kenarda. Ikisini de sag kenara koyan
   surumde P1'in cubugu ayracin dibinde kaliyor, P2'ninki ekran
   kenarinda: kazara olusmus bir asimetri gibi duruyordu. */
.yari .cubuk {
  position: absolute; top: 22%; bottom: 22%;
  width: 16px; border-radius: 10px;
  background: rgba(20, 12, 36, 0.7);
  border: 3px solid var(--hud-kenar);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
/* Dolgu rengi BOLUM RENGI (JS yaziyor): oyuncu hangi renk bolumde
   oldugunu cubuktan da okuyor. Gokkusagi gradyani denendi ve
   birakildi — dolgu kisayken gradyan sikisiyor, cubuk her yukseklikte
   baska renk gosteriyordu. */
.yari .cubuk i {
  position: absolute; left: 0; right: 0; bottom: 0; height: 0%;
  background: #5fe06a;
  transition: height 0.15s linear, background-color 0.4s ease;
}
/* icteki parlaklik: dolgunun sol yarisinda ince beyaz seritler */
.yari .cubuk::after {
  content: ""; position: absolute; left: 2px; top: 2px; bottom: 2px; width: 3px;
  border-radius: 3px; background: rgba(255, 255, 255, 0.45);
}
/* rakibin isareti — kim onde belli olsun */
.yari .cubuk u {
  position: absolute; left: -3px; right: -3px; bottom: 0; height: 5px;
  border: 2px solid var(--cizgi); border-radius: 3px; z-index: 2;
}
.yari[data-no="1"] .cubuk u { background: var(--p2); }
.yari[data-no="2"] .cubuk u { background: var(--p1); }

/* rakip ekran disindaysa kenar oku */
.yari .ok {
  position: absolute; width: 38px; height: 38px; margin: -19px 0 0 0;
  display: none; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 17px;
  border: 3px solid var(--cizgi);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
}
.yari .ok.acik { display: flex; }
.yari[data-no="1"] .ok { background: linear-gradient(#8ccbff, var(--p2)); color: #10131c; }
.yari[data-no="2"] .ok { background: linear-gradient(#ff9d70, var(--p1)); color: #201009; }
/* DONUS YALNIZCA GLIFTE. Donusu .ok kutusuna uygulayan surumde
   icindeki mesafe etiketi de doniyordu ve rakip asagidayken yazi
   bas asagi okunuyordu. */
.yari .ok::before { content: "▲"; display: block; transform: rotate(var(--aci, 0deg)); }
/* Mesafe etiketi okun USTUNDE. Altina konuldugunda rakip asagidayken
   ok ekranin dibine iniyor ve etiket goruntunun disinda kaliyordu. */
.yari .ok em {
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  font-size: 11px; font-style: normal; font-weight: 900;
  color: #fff; text-shadow: var(--kontur); white-space: nowrap; margin-bottom: 3px;
}

/* ── Tus ogreticisi ──────────────────────────────────────────────
   Ilk surumde bu bir metin seridiydi ("W A S D Move · Space Jump").
   Iki oyuncunun ziplama tusu FARKLI (Space / L) ve kanepede oturan
   ikinci oyuncu duz metinde kendi satirini bulamiyordu. Simdi her
   tus bir KAPAK: beyaz govde, koyu kontur, altinda dudak — ekranda
   klavyenin kendisi gibi okunuyor. Ziplama sari, cunku oyuncunun
   ilk aramasi gereken ve iki tarafta degisen tek tus o.

   Serit KONTROL NOKTASINDA kapaniyor, sabit sanidede degil: hizli
   oyuncu ilk kapiya 6 sn'de variyor, ilk kez oynayan 40 sn'de. Sabit
   9 sn'lik surumde acemi oyuncu tam ihtiyaci varken ipucunu
   kaybediyordu. Ust sinir yine de var (bkz. arayuz.js). */
.yari .tuslar {
  position: absolute; bottom: 12px; left: 12px; right: 12px;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 4px 9px;
  background: var(--hud); border: 3px solid var(--hud-kenar);
  border-radius: 14px; padding: 6px 8px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
  opacity: 1; transition: opacity 0.5s ease, transform 0.5s ease;
}
.yari .tuslar.sil { opacity: 0; transform: translateY(8px); }
.yari .tuslar .ip { display: inline-flex; align-items: center; gap: 3px; }
.yari .tuslar kbd {
  font-family: inherit; font-size: 11px; font-weight: 900; line-height: 1;
  min-width: 20px; padding: 4px 5px; text-align: center;
  color: var(--koyu-yazi); background: linear-gradient(#fff, #ded6f2);
  border: 2px solid var(--cizgi); border-radius: 6px;
  box-shadow: 0 2px 0 var(--cizgi);
}
.yari .tuslar kbd.genis { padding-left: 9px; padding-right: 9px; }
/* YON TUSLARI UCGEN, OK DEGIL. Once `← ↑ ↓ →` yaziyordu:
   14 px'te tuvale cizilip olculdu, `→` glifinin murekkebi 10x3 px
   — ekranda kisa bir tireden farksiz. Ucgenler ayni boyda 12x10 ve
   dolu (`W` harfi 15x10). Klavyelerin cogunda ok tuslarinin uzerinde
   zaten ucgen basili. */
.yari .tuslar kbd.yon { font-size: 13px; padding: 3px 4px; min-width: 18px; }
kbd.yon { font-size: 0.92em; }
.yari .tuslar .zip kbd { background: linear-gradient(#ffe9a8, var(--sari) 70%, var(--sari-alt)); }
.yari .tuslar i {
  font-style: normal; font-size: 11px; font-weight: 800; color: #fff;
  margin-left: 3px; opacity: 0.9; text-shadow: 0 2px 0 rgba(43, 27, 70, 0.8);
}

/* ── Olum paneli ─────────────────────────────────────────────────── */

/* Yariya OZEL: bir oyuncu olurken digeri oynamaya devam ediyor. */
.yari .olum {
  position: absolute; left: 8px; right: 8px; top: 50%;
  transform: translateY(-50%) scale(0.86);
  display: none; flex-direction: column; align-items: center; gap: 10px;
  pointer-events: auto; opacity: 0;
  transition: opacity 0.16s ease, transform 0.24s cubic-bezier(0.2, 1.7, 0.5, 1);
}
.yari .olum.acik { display: flex; opacity: 1; transform: translateY(-50%) scale(1); }
.yari .olum-yazi {
  font-family: "Arial Black", "Segoe UI Black", Roboto, system-ui, sans-serif;
  font-weight: 900; letter-spacing: 0.04em;
  font-size: clamp(24px, 4.6vw, 44px);
  color: var(--kirmizi); text-shadow: var(--kontur-kalin);
  transform: rotate(-2deg);
}
.yari .olum .dogma {
  width: auto; min-width: min(240px, 68%); margin-top: 2px;
  padding: clamp(9px, 1.8vmin, 14px) clamp(18px, 3vmin, 30px);
}
.yari .olum-tus {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 800; color: #fff;
  text-shadow: 0 2px 0 rgba(43, 27, 70, 0.7);
}
/* Ayni kapak dili tus ogreticisiyle ortak. */
.yari .olum-tus kbd {
  font-family: inherit; font-size: 12px; font-weight: 900; line-height: 1;
  padding: 4px 8px; color: var(--koyu-yazi);
  background: linear-gradient(#ffe9a8, var(--sari) 70%, var(--sari-alt));
  border: 2px solid var(--cizgi); border-radius: 6px;
  box-shadow: 0 2px 0 var(--cizgi); text-shadow: none;
}
body.mobil .yari .olum-tus { display: none; }

/* ── Dokunmatik kontroller ───────────────────────────────────────── */

.dokunma { display: none; }

body.mobil .dokunma { display: block; position: absolute; inset: 0; }
/* Klavye kapaklari telefonda anlamsiz: mobilde ogretici kontrolun
   KENDI uzerinde duruyor (.etiket) ve kontroller nabiz atiyor. */
body.mobil .yari .tuslar { display: none; }

.dokunma .etiket {
  position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%);
  margin-bottom: 6px; white-space: nowrap; pointer-events: none;
  font-size: 12px; font-weight: 900; color: #fff; text-shadow: var(--kontur);
  opacity: 0; transition: opacity 0.5s ease;
}
body.ogret .dokunma .etiket { opacity: 1; }
/* Nabiz `filter` ile, `transform` ya da `box-shadow` ile degil: ikisi
   de dugmenin basma animasyonuna (translateY + kisalan dudak) ait,
   ustune yazan bir animasyon dokunma hissini bozuyordu. */
body.ogret .yari .kol,
body.ogret .yari .tus-zipla { animation: nabiz 1.5s ease-in-out infinite; }
@keyframes nabiz {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0)); }
  50% { filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.85)); }
}
@media (prefers-reduced-motion: reduce) {
  body.ogret .yari .kol, body.ogret .yari .tus-zipla { animation: none; }
}

/* Cubuk DIS kenarda, dugmeler IC kenarda: iki kisi tek tableti
   tutunca dis basparmak cubukta, ic basparmak ziplamada oluyor. */
.yari .kol {
  position: absolute; bottom: var(--kontrol-alt);
  width: var(--kol-boy); height: var(--kol-boy);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.22), rgba(16, 10, 32, 0.5));
  border: 4px solid var(--hud-kenar);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.4);
  pointer-events: auto; touch-action: none;
}
.yari[data-no="1"] .kol { left: var(--kontrol-yan); }
.yari[data-no="2"] .kol { right: var(--kontrol-yan); }
.yari .kol i {
  position: absolute; left: 50%; top: 50%;
  width: 48%; height: 48%; margin: -24% 0 0 -24%;
  border-radius: 50%;
  border: 3px solid var(--cizgi);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.4);
}
.yari[data-no="1"] .kol i { background: linear-gradient(#ffbd9c, var(--p1) 60%, var(--p1-alt)); }
.yari[data-no="2"] .kol i { background: linear-gradient(#a9d9ff, var(--p2) 60%, var(--p2-alt)); }

.yari .dugmeler {
  position: absolute; bottom: var(--kontrol-alt);
  display: flex; gap: 10px; align-items: flex-end;
}
.yari[data-no="1"] .dugmeler { right: 12px; }
.yari[data-no="2"] .dugmeler { left: 12px; }

.dok-tus {
  position: relative;
  width: var(--tus-boy); height: var(--tus-boy); padding: 0;
  border-radius: 50%; border: 4px solid var(--cizgi);
  color: #fff; pointer-events: auto; touch-action: none;
  display: grid; place-items: center;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.45);
}
.yari[data-no="1"] .tus-zipla { background: linear-gradient(#ffbd9c, var(--p1) 55%, var(--p1-alt)); }
.yari[data-no="2"] .tus-zipla { background: linear-gradient(#a9d9ff, var(--p2) 55%, var(--p2-alt)); }
.tus-it { background: linear-gradient(#8f7fb5, #4a3670 55%, #33235a); }
.dok-tus svg { width: 46%; height: 46%; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 0 rgba(43, 27, 70, 0.55)); }
.dok-tus svg .dolu { fill: currentColor; stroke: none; }
.dok-tus:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.45); }
/* Itme ikincil: daha kucuk ve daha soluk, yanlislikla basilmasin */
.tus-it { width: calc(var(--tus-boy) * 0.68); height: calc(var(--tus-boy) * 0.68); opacity: 0.88; }

/* Ilerleme cubugu mobilde DIS kenara ve cubugun ustune tasiniyor;
   masaustundeki yerinde birakilirsa ziplama dugmesiyle cakisiyor. */
.yari[data-no="1"] .cubuk { left: 12px; }
.yari[data-no="2"] .cubuk { right: 12px; }

body.mobil .yari .cubuk {
  top: 16%;
  bottom: calc(var(--kol-boy) + var(--kontrol-alt) + 14px);
}

body.mobil .kare { width: 46px; height: 46px; font-size: 20px; }

/* ── Dikey uyarisi ───────────────────────────────────────────────── */

#cevir { display: none; }
body.mobil.oyunda #cevir {
  position: fixed; inset: 0; z-index: 40;
  flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: linear-gradient(#3a1f6e, #150c28);
  text-align: center; padding: 24px;
}
@media (orientation: portrait) { body.mobil.oyunda #cevir { display: flex; } }
#cevir i { font-size: 56px; font-style: normal; animation: cevrilme 1.8s ease-in-out infinite; }
#cevir b { font-size: 16px; color: #fff; text-shadow: var(--kontur); }
@keyframes cevrilme {
  0%, 40% { transform: rotate(0deg); }
  60%, 100% { transform: rotate(90deg); }
}

/* ── ust orta: sure + dugmeler ───────────────────────────────────── */

#ust-orta {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  pointer-events: auto;
}
#sure {
  background: var(--hud); border: 3px solid var(--hud-kenar);
  border-radius: 14px; padding: 3px 16px;
  font-size: 21px; color: #fff; text-shadow: var(--kontur);
  font-variant-numeric: tabular-nums;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
}
#hud-tuslar { display: flex; gap: 8px; }
.kare {
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  background: linear-gradient(#8f7fb5, #4a3670 55%, #33235a);
  border: 3px solid var(--cizgi);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.4);
  color: #fff; font-size: 17px; line-height: 1;
}
.kare:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); }
.kare.kapali { opacity: 0.5; }

#geri-sayim {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(70px, 15vw, 200px);
  color: var(--sari); text-shadow: var(--kontur-kalin);
  opacity: 0; pointer-events: none;
}
#geri-sayim.vur { animation: vur 0.85s ease-out; }
@keyframes vur {
  0% { opacity: 0; transform: scale(1.9) rotate(-8deg); }
  22% { opacity: 1; transform: scale(1) rotate(-3deg); }
  75% { opacity: 1; transform: scale(1) rotate(-3deg); }
  100% { opacity: 0; transform: scale(0.8) rotate(2deg); }
}

/* ── Yukleme ─────────────────────────────────────────────────────── */

#yukleme {
  position: fixed; inset: 0; z-index: 30;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; background: linear-gradient(#3a1f6e, #150c28);
}
#yukleme .yaz { font-size: 15px; color: #fff; text-shadow: var(--kontur); }
#yukleme .bar {
  width: min(340px, 64vw); height: 20px; border-radius: 12px;
  background: rgba(10, 6, 22, 0.6); border: 3px solid var(--hud-kenar);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.4); overflow: hidden;
}
#yukleme .bar i { display: block; height: 100%; width: 0%; background: var(--gk); transition: width 0.2s ease; }

/* ── Ortak perde (menu / duraklat / son) ─────────────────────────── */

/* TEK DUZEN, HER EKRAN. Mobil ve masaustu icin ayri yerlesim YOK:
   olculer `clamp(min, Nvmin, max)` ile akiyor.

   `vmin` bilerek — ekranin KUCUK kenarina bagli, yani yatay telefonda
   (844x390) da dikey telefonda (390x660) da menu kendiliginden
   kuculuyor. `vw` kullanan surumde yatay telefonda baslik 40 px'e
   cikip menu ekrana sigmiyordu. */

#menu, #duraklat, #son, #odul {
  position: fixed; inset: 0; z-index: 20;
  display: flex; align-items: flex-start; justify-content: center;
  overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(10px, 2vmin, 22px);
  padding-bottom: max(clamp(10px, 2vmin, 22px), env(safe-area-inset-bottom));
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(255, 214, 120, 0.28), transparent 70%),
    linear-gradient(#3d2280 0%, #241247 60%, #140a26 100%);
}

/* `margin:auto` + `align-items:flex-start`: icerik siginca ortaliyor,
   sigmayinca UST kenardan kaydiriyor. `place-items:center` ile
   ortalanan bir kutu tastiginda ust kismi erisilemez oluyor. */
.kutu {
  position: relative;
  width: min(760px, 100%);
  margin: auto;
  background: var(--panel);
  border: 4px solid var(--cizgi);
  border-radius: clamp(18px, 3vmin, 28px);
  box-shadow: 0 9px 0 rgba(43, 27, 70, 0.55), 0 22px 44px rgba(0, 0, 0, 0.55);
  text-align: center;
  overflow: hidden;
}

/* -- baslik bandi ---------------------------------------------------
   Bantta YAZI YOK. Once oyun adi vardi, sonra bir alt baslik; ikisi de
   kaldirilinca bant ince bir renk seridine dondu. Yuksekligi 2P
   rozetinin YARISI kadar: rozet bandin altina tasarak panelin ustune
   yapistirilmis bir cikartma gibi duruyor, bos bir bant gibi degil. */
.tepe {
  position: relative;
  padding: clamp(11px, 1.8vmin, 16px) clamp(12px, 2.6vmin, 24px);
  background: linear-gradient(#9a6bff 0%, var(--mor) 55%, var(--mor-alt) 100%);
  border-bottom: 4px solid var(--cizgi);
}
/* ust yariya parlaklik — Roblox dugmelerindeki cam etkisi */
/* Odul / duraklatma / bitis panellerinin bandinda BASLIK VAR; onlar
   kendi ic bosluklarini geri aliyor. Secici `:has(h2)` DEGIL, acikca
   panel kimlikleri: `:has()` eski bir tarayicida dusunce butun panel
   basliklari banda yapisik kalirdi ve portalda hangi tarayicinin
   geldigi bilinmiyor. */
#odul .tepe, #duraklat .tepe, #son .tepe {
  padding: clamp(9px, 2vmin, 18px) clamp(12px, 2.6vmin, 24px);
}
.tepe::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 46%;
  background: linear-gradient(rgba(255, 255, 255, 0.28), transparent);
  pointer-events: none;
}
/* egik kurdele rozeti: elle yerlestirilmis hissi */
.kurdele {
  position: absolute; z-index: 2;
  right: clamp(8px, 1.8vmin, 16px); top: clamp(6px, 1.4vmin, 12px);
  padding: 3px 10px; border-radius: 10px;
  background: linear-gradient(#ffe08a, var(--sari) 55%, var(--sari-alt));
  border: 3px solid var(--cizgi);
  box-shadow: 0 3px 0 var(--cizgi);
  color: #fff; font-size: clamp(10px, 1.6vmin, 13px);
  text-shadow: var(--kontur);
  transform: rotate(7deg);
}

.pano { padding: clamp(10px, 2.2vmin, 20px); }

h2 {
  margin: clamp(8px, 1.8vmin, 16px) 0 clamp(5px, 1vmin, 9px);
  font-size: clamp(9px, 1.5vmin, 12px); font-weight: 900;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: #8d7bb5;
}
section:first-child h2 { margin-top: 0; }

/* -- mod kartlari -------------------------------------------------
   auto-fit + minmax: yer varsa iki sutun, yoksa tek. Kirilma noktasi
   piksel sayisina degil GERCEK yere bagli. */
.modlar {
  display: grid; gap: clamp(7px, 1.3vmin, 11px);
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
}
.mod {
  position: relative; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: clamp(7px, 1.3vmin, 12px);
  padding: clamp(8px, 1.6vmin, 14px);
  border-radius: clamp(12px, 2vmin, 18px);
  background: linear-gradient(#ffffff, var(--panel-2));
  border: 3px solid var(--cizgi);
  box-shadow: 0 4px 0 var(--cizgi);
  color: var(--koyu-yazi);
  transition: transform 0.09s ease, box-shadow 0.09s ease;
}
.mod .sim { font-size: clamp(19px, 3.4vmin, 30px); line-height: 1; filter: drop-shadow(0 2px 0 rgba(43, 27, 70, 0.25)); }
.mod .yazi { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mod b { font-size: clamp(12px, 1.9vmin, 15px); font-weight: 900; letter-spacing: 0.03em; }
.mod i { font-size: clamp(9.5px, 1.5vmin, 12px); opacity: 0.7; font-style: normal; line-height: 1.25; font-weight: 600; }
.mod .rekor {
  position: absolute; right: 8px; top: 6px;
  font-size: clamp(9px, 1.4vmin, 11px); font-style: normal; font-weight: 800;
  opacity: 0.7; font-variant-numeric: tabular-nums;
}
.mod:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--cizgi); }
.mod:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--cizgi); }
/* SECILI: dolu yesil + tik rozeti. Roblox'ta secim hep renkle
   bildirilir, ince bir cerceveyle degil. */
.mod.secili {
  background: linear-gradient(#7bea80, var(--yesil) 55%, var(--yesil-alt));
  color: #fff;
}
.mod.secili b { text-shadow: var(--kontur); }
.mod.secili i, .mod.secili .rekor { opacity: 0.95; text-shadow: 0 1px 0 rgba(43, 27, 70, 0.5); }
.mod.secili::after {
  content: "✓"; position: absolute; right: -7px; bottom: -7px;
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(#ffe08a, var(--sari));
  border: 3px solid var(--cizgi);
  color: var(--cizgi); font-size: 13px; font-weight: 900;
}

/* -- karakter secimi: koleksiyon karti ------------------------------
   Onceki surum 9 tane 52x66 kucuk resmi YATAY KAYDIRILAN bir seride
   diziyordu: masaustunde kirpik, telefonda hem kirpik hem kaydirmasi
   zor, ustelik secili olani gormek icin seridi kaydirmak gerekiyordu. */
.secimler { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(7px, 1.3vmin, 12px); }
.secim {
  background: #fff;
  border-radius: clamp(12px, 2vmin, 18px);
  border: 3px solid var(--cizgi);
  box-shadow: 0 4px 0 var(--cizgi);
  overflow: hidden; min-width: 0;
  padding: 0 0 clamp(5px, 1vmin, 9px);
}
.secim .ad {
  display: block; padding: clamp(3px, 0.8vmin, 6px) 6px;
  border-bottom: 3px solid var(--cizgi);
  font-size: clamp(9.5px, 1.5vmin, 12px); letter-spacing: 0.08em; font-weight: 900;
  color: #fff; text-shadow: var(--kontur);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.secim[data-no="1"] .ad { background: linear-gradient(#ffa878, var(--p1) 60%, var(--p1-alt)); }
.secim[data-no="2"] .ad { background: linear-gradient(#93cdff, var(--p2) 60%, var(--p2-alt)); }

/* SAHNE. Isik havuzu KARTIN TAMAMINA yayiliyor, kucuk resmin arkasina
   degil: onceki surumde 350 px genisligindeki kartin ortasinda 103 px
   bir kutu duruyor, iki yani bos beyaz kaliyordu. Simdi kart bir
   vitrin gibi okunuyor, oklar da kenarlara itiliyor. */
.vitrin {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(2px, 0.8vmin, 8px);
  margin: clamp(4px, 0.8vmin, 7px) clamp(4px, 0.8vmin, 7px) 0;
  padding: clamp(4px, 0.8vmin, 8px);
  border-radius: clamp(9px, 1.5vmin, 14px);
  background: radial-gradient(ellipse 62% 58% at 50% 74%, #ffffff 0%, #f1ecff 45%, #dcd2ff 100%);
  border: 2px solid rgba(43, 27, 70, 0.18);
}
/* karakterin ayagindaki yumusak golge */
.vitrin::after {
  content: ""; position: absolute; left: 50%; bottom: 11%;
  width: 34%; height: 7%; transform: translateX(-50%);
  border-radius: 50%; background: rgba(43, 27, 70, 0.16);
  filter: blur(2px); pointer-events: none;
}
.vitrin .resim {
  position: relative; z-index: 1;
  flex: 0 1 auto;
  height: clamp(88px, 17.5vmin, 150px);
  aspect-ratio: 3 / 4;
  background: none; border: 0;
  cursor: pointer; padding: 0;
  display: grid; place-items: center;
}
.vitrin img { width: 100%; height: 100%; object-fit: contain; display: block; }
.vitrin .ok {
  flex: 0 0 auto; cursor: pointer; padding: 0;
  /* 34x44 taban: parmakla isabet edilebilecek en kucuk olcu. */
  width: clamp(34px, 5.4vmin, 42px);
  height: clamp(44px, 8vmin, 62px);
  border-radius: clamp(9px, 1.5vmin, 13px);
  background: linear-gradient(#ffffff, var(--panel-2) 60%, #ddd2ff);
  border: 3px solid var(--cizgi);
  box-shadow: 0 4px 0 var(--cizgi);
  color: var(--cizgi); font-size: clamp(19px, 3vmin, 26px); font-weight: 900; line-height: 1;
}
.vitrin .ok:hover { background: linear-gradient(#fff, #e2d8ff); }
.vitrin .ok:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--cizgi); }

.noktalar { display: flex; justify-content: center; gap: 2px; margin-top: 5px; flex-wrap: nowrap; }
.noktalar b {
  width: 15px; height: 15px; padding: 4px; box-sizing: border-box;
  border-radius: 50%; cursor: pointer; flex: 0 0 auto;
  background: rgba(43, 27, 70, 0.24);
  background-clip: content-box;      /* gorunen nokta 7px, dokunma hedefi 15px */
}
.secim[data-no="1"] .noktalar b.secili { background: var(--p1); background-clip: content-box; }
.secim[data-no="2"] .noktalar b.secili { background: var(--p2); background-clip: content-box; }

.secim .tus { display: block; margin-top: 3px; opacity: 0.5; font-size: 10px; }
body.mobil .secim .tus { display: none; }

/* -- para ---------------------------------------------------------- */

/* Ikon 1.2em ve INCE konturlu: 11 px'lik cuzdan hapinda 2.2'lik
   kontur dairenin ic dolgusunu yiyip parayi siyah bir nokta
   gosteriyordu. */
.para-ikon { width: 1.2em; height: 1.2em; flex: 0 0 auto; }
.para-ikon circle { fill: #ffd23c; stroke: var(--cizgi); stroke-width: 1.7; }
.para-ikon circle.ic { fill: none; stroke: rgba(43, 27, 70, 0.45); stroke-width: 1.8; }

/* HUD para hapi */
.yari .para {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 5px;
  background: var(--hud); border: 3px solid var(--hud-kenar);
  border-radius: 14px; padding: 2px 10px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
  color: #fff; font-size: 15px;
  font-family: "Arial Black", "Segoe UI Black", Roboto, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}
.yari .para b { text-shadow: var(--kontur); }
.yari .para.vur { animation: paraVur 0.32s ease-out; }
@keyframes paraVur {
  0% { transform: scale(1); }
  35% { transform: scale(1.22); }
  100% { transform: scale(1); }
}

/* menu kartindaki cuzdan — oyuncu basina ayri */
.secim .ad {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: clamp(3px, 0.8vmin, 6px) 8px;
  border-bottom: 3px solid var(--cizgi);
}
.secim .ad-yazi {
  flex: 1 1 auto; min-width: 0;
  font-size: clamp(9.5px, 1.5vmin, 12px); letter-spacing: 0.08em; font-weight: 900;
  color: #fff; text-shadow: var(--kontur);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: "Arial Black", "Segoe UI Black", Roboto, system-ui, sans-serif;
}
.secim .cuzdan {
  flex: 0 0 auto; white-space: nowrap;
  display: flex; align-items: center; gap: 4px;
  padding: 1px 7px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.92); border: 2px solid var(--cizgi);
  font-size: clamp(9px, 1.4vmin, 11.5px); font-weight: 900;
  color: var(--koyu-yazi); font-variant-numeric: tabular-nums;
}

/* odul panelindeki fiyat rozeti */
#odul-fiyat {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 12px; border-radius: 999px;
  background: linear-gradient(#ffe08a, var(--sari) 55%, var(--sari-alt));
  border: 3px solid var(--cizgi); box-shadow: 0 3px 0 var(--cizgi);
  color: #fff; font-size: clamp(12px, 1.9vmin, 15px);
  font-family: "Arial Black", "Segoe UI Black", Roboto, system-ui, sans-serif;
  text-shadow: var(--kontur); font-variant-numeric: tabular-nums;
}

/* Parasi yetmeyen dugme SOLUK ama gorunur: gizlemek oyuncuya hedef
   vermiyor, panel kac para eksik oldugunu yaziyor. */
.dugme.sonuk { filter: grayscale(0.75) brightness(0.85); }
.dugme.sonuk:hover { transform: none; }
.secim.parali .ac-dugme {
  background: linear-gradient(#ffe08a, var(--sari) 55%, var(--sari-alt));
}


/* -- kilit ve odul ------------------------------------------------- */

.bolum-basi { display: flex; align-items: baseline; justify-content: center; gap: 8px; }
#kostum-sayac {
  font-size: clamp(9px, 1.4vmin, 11px); font-weight: 800; font-style: normal;
  color: #fff; background: linear-gradient(#a97dff, var(--mor));
  border: 2px solid var(--cizgi); border-radius: 999px; padding: 1px 8px;
  text-shadow: 0 1px 0 rgba(43, 27, 70, 0.6);
}

/* Kilitli kostum: karakter siyah siluete dusuyor + kilit rozeti.
   Silueti gostermek SART — oyuncu ne kazanacagini gormeden reklam
   izlemeyi kabul etmemeli, ama tam rengini de gostermek odulun
   cazibesini bitiriyor. */
.secim .resim .kilit {
  position: absolute; inset: 0; display: none;
  align-items: center; justify-content: center;
  font-size: clamp(22px, 4vmin, 34px); font-style: normal;
  background: rgba(43, 27, 70, 0.32);
  text-shadow: 0 3px 0 rgba(43, 27, 70, 0.5);
}
.secim.kilitli .resim { position: relative; }
.secim.kilitli .resim .kilit { display: flex; }
.secim.kilitli img { filter: brightness(0.28) saturate(0.2); }

/* `visibility` — `display:none` DEGIL. Dugme gizlendiginde de yeri
   duruyor, yani kilitli/acik kostumler arasinda gezerken kart boyu
   ve dolayisiyla butun menu ziplamiyor.

   Iki sinifli secici SART: asagidaki `.dugme { display:flex }` ile
   ayni ozgullukte olsaydi (tek sinif) sonra gelen kural kazanirdi. */
.secim .ac-dugme {
  visibility: hidden;
  display: flex; width: calc(100% - 16px); margin: 5px 8px 0;
  padding: clamp(5px, 1vmin, 8px) 10px;
  font-size: clamp(10px, 1.4vmin, 12px);
}
.secim.kilitli .ac-dugme { visibility: visible; }
.dugme.sari {
  background: linear-gradient(#ffe08a, var(--sari) 55%, var(--sari-alt));
  box-shadow: 0 5px 0 var(--cizgi);
}

.noktalar b.kapali { background: rgba(43, 27, 70, 0.12); background-clip: content-box; }
.noktalar b.kapali.secili { background: var(--sari); background-clip: content-box; }

/* odul onay paneli: odul BUYUK gosteriliyor */
.odul-vitrin {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: clamp(8px, 1.6vmin, 14px);
  border-radius: clamp(10px, 1.8vmin, 16px);
  background: radial-gradient(ellipse 60% 55% at 50% 72%, #fff 0%, #f1ecff 45%, #dcd2ff 100%);
  border: 3px solid var(--cizgi);
}
.odul-vitrin .resim { display: block; height: clamp(110px, 24vmin, 180px); aspect-ratio: 3 / 4; }
.odul-vitrin img { width: 100%; height: 100%; object-fit: contain; }
.odul-vitrin b {
  font-family: "Arial Black", "Segoe UI Black", Roboto, system-ui, sans-serif;
  font-size: clamp(13px, 2.1vmin, 17px); letter-spacing: 0.04em;
  color: var(--mor-alt);
}
#odul-aciklama {
  margin: 10px 2px 0; font-size: clamp(11px, 1.7vmin, 13.5px);
  font-weight: 600; opacity: 0.78; line-height: 1.35;
}

/* menude kisa bilgi seridi */
#bildirim {
  position: absolute; left: 50%; bottom: 14px; transform: translate(-50%, 14px);
  padding: 8px 18px; border-radius: 999px;
  background: var(--hud); border: 3px solid var(--hud-kenar);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35);
  color: #fff; font-weight: 800; font-size: clamp(11px, 1.7vmin, 14px);
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}
#bildirim.acik { opacity: 1; transform: translate(-50%, 0); }
#bildirim.kutlama {
  background: linear-gradient(#7bea80, var(--yesil) 55%, var(--yesil-alt));
  border-color: var(--cizgi); text-shadow: var(--kontur);
  font-family: "Arial Black", "Segoe UI Black", Roboto, system-ui, sans-serif;
}

/* -- sahte reklam (yalnizca gelistirme) ---------------------------- */
#sahte-reklam {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center; background: rgba(6, 4, 14, 0.94);
}
#sahte-reklam .kutu {
  width: min(420px, 82vw); text-align: center; padding: 26px;
  background: #1b1230; border: 4px solid var(--cizgi); border-radius: 20px;
}
#sahte-reklam b {
  display: block; color: #fff; letter-spacing: 0.3em; font-size: 13px; opacity: 0.6;
}
#sahte-reklam .sayac {
  height: 14px; margin: 16px 0 10px; border-radius: 8px; overflow: hidden;
  background: rgba(255, 255, 255, 0.12); border: 2px solid rgba(255, 255, 255, 0.3);
}
#sahte-reklam .sayac i { display: block; height: 100%; width: 0%; background: var(--gk); }
#sahte-reklam .sn {
  display: block; color: #fff; font-size: 34px;
  font-family: "Arial Black", "Segoe UI Black", Roboto, system-ui, sans-serif;
}
#sahte-reklam .atla {
  margin-top: 14px; padding: 9px 20px; border-radius: 12px; cursor: pointer;
  background: rgba(255, 255, 255, 0.12); border: 3px solid rgba(255, 255, 255, 0.35);
  color: #fff; font-weight: 800;
}
#sahte-reklam .atla:disabled { opacity: 0.35; cursor: default; }

/* -- dugmeler: dikey gradyan + 3B dudak ---------------------------- */
.dugme {
  position: relative; overflow: hidden;
  /* Ikon + etiket. Ikonlar SVG: emoji her isletim sisteminde baska
     turlu ciziliyor ve bazilarinda renkli, dugmenin uzerinde
     yamalik duruyor. */
  display: flex; align-items: center; justify-content: center;
  gap: clamp(6px, 1.1vmin, 10px);
  margin-top: clamp(10px, 2vmin, 18px); width: 100%; cursor: pointer;
  padding: clamp(11px, 2.1vmin, 16px) 18px;
  border: 4px solid var(--cizgi);
  border-radius: clamp(12px, 2vmin, 18px);
  font-size: clamp(15px, 2.3vmin, 20px); letter-spacing: 0.06em;
  color: #fff; text-shadow: var(--kontur);
  transition: transform 0.09s ease, box-shadow 0.09s ease;
}
.dugme svg {
  width: 1.15em; height: 1.15em; flex: 0 0 auto;
  fill: currentColor;
  filter: drop-shadow(0 2px 0 rgba(43, 27, 70, 0.55));
}
.dugme.ikincil svg { filter: none; opacity: 0.75; }

/* ust yariya cam parlakligi */
.dugme::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 46%;
  background: linear-gradient(rgba(255, 255, 255, 0.35), transparent);
  pointer-events: none;
}
.dugme.yesil {
  background: linear-gradient(#7bea80, var(--yesil) 55%, var(--yesil-alt));
  box-shadow: 0 7px 0 var(--cizgi);
}
.dugme:hover { transform: translateY(-2px); box-shadow: 0 9px 0 var(--cizgi); }
.dugme:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--cizgi); }
.dugme.ikincil {
  margin-top: 9px;
  background: linear-gradient(#ffffff, var(--panel-2) 60%, #ddd2ff);
  color: var(--koyu-yazi); text-shadow: none;
  font-size: clamp(12px, 1.8vmin, 15px);
  padding: clamp(8px, 1.5vmin, 12px) 18px;
  box-shadow: 0 5px 0 var(--cizgi);
}

/* -- dip: yardim + dil --------------------------------------------- */
.dip { margin-top: clamp(8px, 1.6vmin, 14px); }
#yardim { text-align: left; font-size: clamp(11px, 1.7vmin, 13px); }
#yardim summary { cursor: pointer; text-align: center; padding: 5px; font-weight: 800; color: #8d7bb5; }
#yardim table { width: 100%; margin-top: 8px; border-collapse: collapse; }
#yardim th, #yardim td { padding: 4px 6px; text-align: left; font-weight: 700; }
#yardim th.p1 { color: var(--p1-alt); }
#yardim th.p2 { color: var(--p2-alt); }
#yardim td:first-child { opacity: 0.65; font-weight: 600; }
#yardim p { font-size: clamp(10px, 1.5vmin, 11.5px); opacity: 0.6; }
kbd {
  display: inline-block; margin-right: 3px; padding: 2px 7px;
  border-radius: 6px; font-family: inherit; font-size: clamp(9px, 1.4vmin, 11px);
  font-weight: 800; color: var(--koyu-yazi);
  background: var(--panel-2);
  border: 2px solid rgba(43, 27, 70, 0.35);
  border-bottom-width: 3px;
}

#diller { margin-top: clamp(6px, 1.2vmin, 12px); display: flex; gap: 7px; justify-content: center; flex-wrap: wrap; }
#diller button {
  cursor: pointer; padding: 6px 13px; border-radius: 10px;
  font-size: clamp(11px, 1.6vmin, 12px); font-weight: 800;
  background: linear-gradient(#fff, var(--panel-2));
  border: 3px solid rgba(43, 27, 70, 0.3);
  box-shadow: 0 3px 0 rgba(43, 27, 70, 0.28);
  color: var(--koyu-yazi);
}
#diller button.secili {
  background: linear-gradient(#a97dff, var(--mor) 60%, var(--mor-alt));
  border-color: var(--cizgi); box-shadow: 0 3px 0 var(--cizgi);
  color: #fff; text-shadow: var(--kontur);
}

/* Cok basik ekranda (yatay telefon) alt baslik ve yardim gizleniyor:
   tek satiri bile dort platformluk dikey yer demek. */
@media (max-height: 430px) {
  #yardim { display: none; }
  .secim .tus { display: none; }
  .tepe { padding-top: 8px; padding-bottom: 8px; }
  .pano { padding: 9px 10px 10px; }
  .noktalar { margin-top: 4px; }
  .dugme { margin-top: 9px; padding: 8px 16px; }
  .dugme.ikincil { margin-top: 6px; padding: 6px 16px; }
}

/* BASIK VE GENIS EKRAN = yatay telefon. Mod ve karakter bolumleri yan
   yana geciyor. Tek sutunda menu 844x390'da 362 px tutuyordu (390'in
   neredeyse tamami) ve karakter onizlemesi 78 px'e sikisiyordu;
   yatayda bol bos yer varken dikeyde bogulmak anlamsiz. */
@media (max-height: 470px) and (min-width: 660px) {
  .ikili-alan {
    display: grid; align-items: start; gap: clamp(8px, 1.6vmin, 14px);
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }
  .ikili-alan > section:first-child h2 { margin-top: 0; }
  .modlar { grid-template-columns: 1fr; }
  /* 390 px yukseklikte panel 391 px tutuyordu (21 px tasma). Onizleme
     30vh yerine 25vh: kart 20 px kisaliyor, tus ipuclari ve dolgular
     da kirpilinca panel 332 px'e iniyor. */
  .vitrin .resim { height: clamp(84px, 25vh, 150px); }
}

/* ── Bitis ekrani ────────────────────────────────────────────────── */

#son h2, #duraklat h2, #odul h2 {
  font-size: clamp(22px, 4.4vmin, 36px);
  letter-spacing: 0.02em; text-transform: none; margin: 0;
  color: #fff; text-shadow: var(--kontur-kalin);
}
#son-rekor {
  display: inline-block; margin: 10px 0 0; padding: 5px 16px;
  border-radius: 999px; font-size: clamp(10px, 1.6vmin, 13px); letter-spacing: 0.1em;
  background: linear-gradient(#ffe08a, var(--sari) 55%, var(--sari-alt));
  border: 3px solid var(--cizgi); box-shadow: 0 3px 0 var(--cizgi);
  color: #fff; text-shadow: var(--kontur);
  transform: rotate(-2deg);
}
/* Kucuk ve odakli panel. Menuyle ayni 760 px'i kullanan surumde iki
   satirlik bir tablo dev bir beyaz alanin ortasinda yuzuyordu. */
#son .kutu, #duraklat .kutu, #odul .kutu { width: min(470px, 100%); }

/* `table-layout: fixed` + hizalama: baslik ve veri ayni eksende.
   Serbest duzende "Sure" basligi sayilardan 60 px sagda kaliyordu. */
#son-tablo {
  width: 100%; border-collapse: collapse; table-layout: fixed;
  font-size: clamp(12px, 1.9vmin, 15px); margin-top: 2px;
}
#son-tablo th, #son-tablo td { padding: 8px 8px; border-top: 2px solid rgba(43, 27, 70, 0.14); text-align: center; }
#son-tablo th {
  font-size: clamp(9px, 1.4vmin, 11px); letter-spacing: 0.12em; color: #8d7bb5;
  border-top: 0; font-weight: 900;
}
#son-tablo td { font-variant-numeric: tabular-nums; font-weight: 800; }
#son-tablo th:first-child, #son-tablo td:first-child { text-align: left; width: 32%; font-weight: 900; }
#son-tablo tr.o1 td:first-child { color: var(--p1-alt); }
#son-tablo tr.o2 td:first-child { color: var(--p2-alt); }

/* ── Dar ekran ───────────────────────────────────────────────────── */

/* `.modlar` ve `.secimler` BURADA DEGIL: mod kartlari zaten auto-fit
   ile kendiliginden tek sutuna dusuyor, karakter kartlari ise dar
   ekranda da YAN YANA kalmali — iki oyuncunun secimini ayni anda
   gormek menunun butun anlami. Eski surumde bu sorgu ikisini birden
   alt alta diziyordu ve dikey telefonda menu iki ekran boyu oluyordu. */
@media (max-width: 720px) {
  .yari .tuslar { padding: 4px 6px; gap: 3px 6px; }
  .yari .tuslar kbd { font-size: 10px; min-width: 17px; padding: 3px 4px; }
  .yari .tuslar i { font-size: 10px; }
  .yari .ust { font-size: 13px; gap: 5px; }
  .yari .bolum i { display: none; }
}