/* Real Car Bmw M4 Drift — arayüz
 *
 * Referans: Drive Zone Online / Asphalt 8 mobil düzeni.
 *   • Lobi = 3B garaj sahnesi + üstünde arayüz (sol üstte oyuncu, sol
 *     ortada dev araç adı, altta sekmeler, sağ altta büyük SÜR düğmesi).
 *   • Sürüşte = sol üstte yuvarlak mini harita, sağda yuvarlak hız
 *     saati, altta dokunmatik direksiyon/pedal düğmeleri.
 *
 * Dışarıdan YAZI TİPİ İNDİRİLMİYOR (oyun çevrimdışı çalışmalı);
 * sistem yazı tipinin en ağır kesimi + italik + harf aralığı aynı
 * işi görüyor. Parıltı yalnızca arayüzde — dünya "neon olmasın"
 * kuralına bağlı. */

:root {
  --gece: #070a10;
  --lacivert: #0d1522;
  --lacivert-2: #142032;
  --cizgi: #24344c;
  --cam: #35d2f5;
  --cam-koyu: #1090b8;
  --sari: #ffd12e;
  --sari-koyu: #d99b0e;
  --kagit: #eef3f8;
  --gri-mavi: #8494ab;
  --kirmizi: #ff4438;
  --yesil: #57d98a;
  --mor: #7b4bd8;

  /* HUD ÖLÇEĞİ — tek kaynak. Değeri js/main.js `hud_olcegi()`
   * yazıyor (CSS'te hesaplanamıyor: calc içinde uzunluğu birimsize
   * bölmek geçersiz). Buradaki yalnız güvenli varsayılan. */
  --hud: 1.15;
}

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

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--gece);
  color: var(--kagit);
  font-family: 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  touch-action: none;
}
canvas#sahne { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.gizli { display: none !important; }

/* ── ikonlar ──
   Boyut `1em`: ikon yaninda durdugu yazinin `font-size`'ini takip
   ediyor, yani emoji'den gecis sirasinda var olan butun `font-size`
   kurallari oldugu gibi calismaya devam ediyor. Renk `currentColor`,
   yani devre disi/hover/secili durumlarda yazi ile birlikte degisiyor
   — emoji hicbirini yapamiyordu.

   `stroke-width` 24 birimlik viewBox'ta yazili oldugu icin kontur da
   ikonla birlikte olcekleniyor: 21 px'te 1.5 px, 40 px'te 2.8 px. */
.ik {
  width: 1em; height: 1em; flex: none;
  display: inline-block; vertical-align: -0.14em;
  overflow: visible;
}
.ik-baslik { margin-right: .5em; vertical-align: -0.16em; }

/* ortak yuvarlak düğme */
.yuvarlak {
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(11,17,27,.78); border: 1px solid rgba(132,148,171,.35);
  color: var(--kagit); font-size: 17px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
  transition: background .14s, transform .12s, border-color .14s;
}
.yuvarlak:hover { background: rgba(28,44,68,.9); border-color: var(--cam); transform: scale(1.06); }
.yuvarlak:active { transform: scale(.96); }

/* ══════════════════════ HUD ══════════════════════ */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#hud button { pointer-events: auto; }

/* ── mini harita kümesi ── */
/* SOL UST KUME TEK BIR SUTUN.
   Once uc kutu da ayri ayri `position:absolute` idi ve alttakilerin
   `top` degeri elle yazilmisti (gorev kutusu 214px, para pilleri
   206px). Duugmelerin ALTINA yazi eklenince serit 9px uzadi ama iki
   sabit sayi guncellenmedi: gorev kutusu 1440x810'da duugme
   yazilarinin uzerine 14px biniyordu, yatay telefonda ayni sey para
   pillerinde oluyordu. Sabit sayilari duzeltmek yetmez - yazi tipi,
   satir yuksekligi ya da yeni bir duugme her seferinde ayni hatayi
   geri getirir. Akis kendisi hesaplasin. */
#sol-ust {
  position: absolute; left: calc(14px * var(--hud)); top: calc(12px * var(--hud));
  display: flex; flex-direction: column; align-items: flex-start;
  gap: calc(8px * var(--hud));
  pointer-events: none;
}
#mini-kume {
  position: relative;
  width: calc(148px * var(--hud)); height: calc(148px * var(--hud));
}
#minimap {
  width: 100%; height: 100%; display: block; border-radius: 50%;
  background: rgba(7,10,16,.66);
  border: 2px solid rgba(132,148,171,.30);
  box-shadow: 0 6px 26px rgba(0,0,0,.55);
}
/* Her dugmenin ALTINDA yazi: dokunmatikte hover yok, `title` hicbir
   sey ifade etmiyordu. Yazi kucuk ama her zaman goruluyor. */
.mini-dugme {
  position: absolute; display: flex; flex-direction: column;
  align-items: center; gap: 2px; pointer-events: none;
}
.mini-dugme .yuvarlak {
  width: calc(42px * var(--hud)); height: calc(42px * var(--hud));
  font-size: calc(17px * var(--hud)); pointer-events: auto;
}
.mini-dugme b {
  font-size: calc(9px * var(--hud)); letter-spacing: 1.4px; font-weight: 800;
  color: var(--kagit); text-shadow: 0 1px 5px rgba(0,0,0,.95);
}
/* Düğmeler mini haritanın SOLUNA değil ALTINA dizildi: solda dururken
   dar ekranda ekran dışına taşıyorlardı (ölçüldü, 375 px'te -30 px). */
#mini-halka {
  align-self: stretch;
  display: flex; gap: calc(10px * var(--hud)); justify-content: center;
  pointer-events: none;
}
.mini-dugme { position: static; }

/* ── görev kutusu ── */
#gorev-kutu {
  width: calc(236px * var(--hud)); pointer-events: auto;
  background: linear-gradient(100deg, rgba(11,17,27,.86), rgba(20,32,50,.55));
  padding: 9px 14px 11px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  border-left: 3px solid var(--mor);
}
#gorev-kutu span { font-size: calc(12px * var(--hud)); letter-spacing: 1px; color: var(--kagit); }
#gorev-kutu b { font-size: calc(12px * var(--hud)); color: var(--gri-mavi); float: right; }
#gorev-cubuk { height: calc(6px * var(--hud)); margin-top: 8px; background: rgba(255,255,255,.10); }
#gorev-dolgu {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #b23fb8, #ff5ecb);
  transition: width .25s;
}

/* ── drift şeridi ── */
/* GENİŞLİK ORTA BANTLA SINIRLI. Sabit `330px * --hud` dar ekranda
   yanlardaki iki kümenin üstüne biniyordu: 390 px'lik ekranda şerit
   380 px genişliğe çıkıp hem mini haritayı hem para pillerini
   örtüyordu, 667x375'te mini haritanın 42 px içine giriyordu.
   `--yan-bosluk` iki yan kümenin ÖLÇÜLEN genişliği (js/main.js ->
   hud_yerlesim); şerit ne kadar yer kaldıysa o kadar oluyor. */
#drift-panel {
  position: absolute; left: 50%; top: calc(16px * var(--hud)); transform: translateX(-50%);
  /* TABAN 200 px. Yanlardaki kümeler büyüyünce bu ifade sıfıra doğru
     gidiyordu; ölçüldü, 896x592'de şerit 28 px'e indi ve içindeki dev
     puan kutunun dışına taştı. Dar bir şerit taşan bir şeritten iyi:
     çakışma olursa yerleşim ölçümü zaten bağırıyor. */
  width: max(200px, min(calc(330px * var(--hud)),
             calc(100vw - 2 * var(--yan-bosluk, 0px) - 20px)));
  text-align: center;
  transition: opacity .2s, transform .2s;
}
#drift-panel.sonuk { opacity: 0; transform: translateX(-50%) translateY(-12px); }
#drift-ust { display: flex; justify-content: center; align-items: center; gap: 12px; }
#drift-etiket {
  font-size: calc(13px * var(--hud)); letter-spacing: 6px; color: var(--cam);
  text-shadow: 0 0 14px rgba(53,210,245,.55);
}
#drift-carpan {
  font-size: calc(23px * var(--hud)); font-weight: 900; font-style: italic; color: var(--sari);
  text-shadow: 0 0 16px rgba(255,209,46,.65);
  transition: transform .12s;
}
#drift-carpan.zipla { transform: scale(1.5); }
#drift-puan {
  font-size: calc(56px * var(--hud)); font-weight: 900; font-style: italic; line-height: 1;
  letter-spacing: -2px; text-shadow: 0 4px 24px rgba(0,0,0,.92);
}
#drift-olcer {
  height: calc(7px * var(--hud)); margin: calc(8px * var(--hud)) auto 0; width: calc(280px * var(--hud));
  background: rgba(255,255,255,.10);
  clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
  overflow: hidden;
}
#drift-dolgu {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--cam-koyu), var(--cam));
  box-shadow: 0 0 12px rgba(53,210,245,.8);
  transition: width .1s linear;
}
#drift-aci { margin-top: 5px; font-size: calc(15px * var(--hud)); font-weight: 700; font-style: italic; color: var(--gri-mavi); letter-spacing: 2px; }

/* ── para pilleri ── */
.para-pil {
  display: flex; align-items: center; gap: 7px;
  background: rgba(11,17,27,.8); border: 1px solid rgba(132,148,171,.28);
  border-radius: 22px; padding: 6px 16px 6px 12px;
  backdrop-filter: blur(4px);
}
.para-pil i { font-style: normal; color: var(--sari); font-size: calc(17px * var(--hud)); font-weight: 800; }
.para-pil b { font-size: calc(19px * var(--hud)); font-weight: 800; letter-spacing: .3px; }
.para-pil.buyuk { padding: 8px 20px 8px 14px; }
.para-pil.buyuk b { font-size: 24px; }
.pil-kucuk {
  display: flex; align-items: center; gap: 8px; justify-content: flex-end;
  font-size: calc(11px * var(--hud)); letter-spacing: 2px; color: var(--gri-mavi);
}
.pil-kucuk b { font-size: calc(15px * var(--hud)); font-weight: 700; font-style: italic; color: var(--kagit); letter-spacing: 0; }

#ust-sag { position: absolute; right: calc(14px * var(--hud)); top: calc(12px * var(--hud)); display: flex; flex-direction: column; gap: 7px; align-items: flex-end; }
/* Kovalanan sayi digerlerinden AYRILSIN. Uc kucuk pil yan yana ayni
   agirlikta dururken hangisinin hedef oldugu belli olmuyordu. */
.pil-kucuk.one-cikan { border-left: 3px solid var(--sari); }
.pil-kucuk.one-cikan span { color: var(--sari); }
.pil-kucuk.one-cikan b { color: var(--kagit); }

/* ── bildirimler ── */
#bildirim {
  position: absolute; left: 50%; top: 190px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.bildirim-satir {
  background: linear-gradient(100deg, rgba(11,17,27,.9), rgba(20,32,50,.55));
  border-left: 3px solid var(--cam);
  padding: 7px 20px 7px 13px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  font-size: 14px; font-weight: 700; font-style: italic; letter-spacing: 1px;
  animation: bildir .28s cubic-bezier(.2,1.4,.5,1);
}
.bildirim-satir.kotu { border-left-color: var(--kirmizi); }
.bildirim-satir.iyi { border-left-color: var(--yesil); }
@keyframes bildir { from { opacity: 0; transform: translateX(-24px) skewX(-8deg); } }

/* ── hız saati (sağ) ── */
/* Saatin İÇ yerleşimi piksel cinsinden yazılı (canvas koordinatları).
   O yüzden kutuyu küçültmek yerine transform ile ölçekleniyor: yazılar
   yerinden oynamıyor. */
/* SAAT SAĞ KENARIN BOŞ BANDINA OTURUYOR.
   Üstte para pilleri, altta dokunmatik pedallar var; saat ikisinin
   arasına sığacak kadar büyüyor ve o bandın ortasına yerleşiyor.
   Ölçüldü — 896x592'de sabit ölçekle saat 424 px'e çıkıyor (ekran
   yüksekliğinin %72'si), pillerin ve gaz pedalının çizilen halkanın
   üstüne bindiği yer burası. Ölçek ve konum JS'ten geliyor çünkü
   ikisi de ÖLÇÜLEN kutulara bağlı (js/main.js -> saat_olcegi). */
#gosterge {
  position: absolute; right: 0; width: 340px; height: 340px;
  top: var(--saat-ust, 50%);
  transform: translateY(-50%) scale(var(--saat-olcek, var(--hud)));
  transform-origin: right center;
}

/* ── telefonu çevir ── */
#cevir { display: none; }
@media (orientation: portrait) and (pointer: coarse) {
  #cevir {
    display: flex; position: fixed; inset: 0; z-index: 60;
    align-items: center; justify-content: center; text-align: center;
    background: radial-gradient(120% 90% at 50% 0%, #16203a 0%, #070a10 70%);
  }
  .cevir-telefon {
    display: block; margin-bottom: 18px; color: var(--kagit);
    animation: cevir-don 2.2s ease-in-out infinite;
  }
  .cevir-telefon .ik { font-size: 62px; }
  #cevir h2 { font-size: 20px; letter-spacing: 3px; margin-bottom: 10px; color: var(--kagit); }
  #cevir p { font-size: 13px; color: var(--gri-mavi); }
}
@keyframes cevir-don {
  0%, 30% { transform: rotate(0deg); }
  55%, 85% { transform: rotate(-90deg); }
  100% { transform: rotate(0deg); }
}
#saat { position: absolute; inset: 0; }

/* SADE MOD: halka yok, rakamlar var.
   Kadranın sığmadığı ekranlarda (ölçüldü: 568x320 dokunmatik, sağ
   kenarda saate 36 px kalıyor) halkayı küçültmek 72 px'lik okunmaz
   bir kadran üretiyor. Kadran süs, hız rakamı bilgi — halka gidiyor,
   rakamlar tam boyda sağ üstte kalıyor. */
#gosterge.sade {
  top: var(--saat-sade-ust, 10px); width: auto; height: auto;
  transform: scale(var(--hud)); transform-origin: top right;
  right: calc(12px * var(--hud));
  display: flex; align-items: flex-start; gap: 8px;
}
#gosterge.sade #saat { display: none; }
#gosterge.sade #hiz-blok { position: static; right: auto; top: auto; text-align: right; }
#gosterge.sade #hiz-blok b { font-size: 40px; letter-spacing: -1px; }
#gosterge.sade #hiz-blok span { font-size: 8px; letter-spacing: 2px; }
#gosterge.sade #vites { position: static; }
#hiz-blok { position: absolute; left: 0; right: 78px; top: 118px; text-align: center; line-height: .9; }
#hiz-blok b { font-size: 66px; font-weight: 900; font-style: italic; letter-spacing: -3px; text-shadow: 0 3px 22px rgba(0,0,0,.9); }
#hiz-blok span { display: block; font-size: 11px; letter-spacing: 4px; color: var(--gri-mavi); margin-top: 2px; }
#vites {
  position: absolute; right: 34px; top: 143px;
  width: 52px; height: 58px; border-radius: 10px;
  background: rgba(11,17,27,.72); border: 1px solid rgba(132,148,171,.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 900; font-style: italic; color: var(--kagit);
}

/* ── dokunmatik kumanda ── */
/* Dokunmatik dugmelerin hepsinde IKON + YAZI var. Once yalniz
   '\u2039 \u203a \u25b2 \u25bc \u2298' vardi; hangisinin gaz hangisinin el freni
   oldugu yalnizca tahmin edilebiliyordu. */
.dokun-yon, .dokun-pedal, .dokun-el {
  position: absolute; cursor: pointer;
  background: rgba(11,17,27,.46); border: 2px solid rgba(238,243,248,.30);
  color: rgba(238,243,248,.88);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; line-height: 1;
}
.dokun-yon .ik, .dokun-pedal .ik, .dokun-el .ik { opacity: .92; }
.dokun-yon span, .dokun-pedal span, .dokun-el span {
  font-size: 10px; letter-spacing: 1.6px; font-weight: 800; opacity: .75;
}
/* Yerlesim PIKSEL matematigi ile, yuzde ile degil. Yuzde dar
   ekranda cokuyor: 375 piksel genislikte SOL (%4) ile SAG (%17)
   29 piksel ust uste biniyordu, fren ile el freni de oyle. Boyutlar
   degiskene bagli, bosluk her yerde --bos kadar. */
:root { --dokun-yon-b: 96px; --dokun-ped-g: 108px; --dokun-ped-y: 132px; --dokun-el-b: 78px; --bos: 14px; }
.dokun-yon { bottom: var(--bos); width: var(--dokun-yon-b); height: var(--dokun-yon-b); border-radius: 50%; }
.dokun-yon .ik { font-size: 38px; }
#dokun-sol { left: var(--bos); }
#dokun-sag { left: calc(var(--bos) * 2 + var(--dokun-yon-b)); }
.dokun-pedal { right: var(--bos); width: var(--dokun-ped-g); height: var(--dokun-ped-y); border-radius: 16px; }
.dokun-pedal .ik { font-size: 30px; }
#dokun-fren { bottom: var(--bos); border-color: rgba(255,68,56,.42); }
#dokun-gaz { bottom: calc(var(--bos) * 2 + var(--dokun-ped-y)); border-color: rgba(87,217,138,.45); }
.dokun-el {
  right: calc(var(--bos) * 2 + var(--dokun-ped-g)); bottom: var(--bos);
  width: var(--dokun-el-b); height: var(--dokun-el-b); border-radius: 50%;
  border-color: rgba(255,209,46,.55); color: var(--sari);
}
.dokun-el .ik { font-size: 26px; }
.basili { background: rgba(53,210,245,.35) !important; border-color: var(--cam) !important; }

/* ══════════════════════ LOBİ ══════════════════════ */
#menu { position: fixed; inset: 0; z-index: 10; }
#menu::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(4,7,12,.85) 0%, rgba(4,7,12,.25) 32%, rgba(4,7,12,0) 55%),
    linear-gradient(0deg, rgba(4,7,12,.9) 0%, rgba(4,7,12,0) 26%),
    linear-gradient(180deg, rgba(4,7,12,.7) 0%, rgba(4,7,12,0) 20%);
}

#oyuncu-kart { position: absolute; left: 22px; top: 20px; display: flex; align-items: center; gap: 12px; }
/* SURUCU ROZETI. Once sari halkali bir daire icinde damali bayrak
   emojisi vardi — her isletim sisteminde baska bir bayrak. Simdi
   kask ikonu, ve sari tam bir halka degil TEK KENAR: arayuzun geri
   kalani da boyle (kartlarin sol serit vurgusu, arac sinifi etiketi).
   Her seyin etrafinda parildayan bir halka olmasi, bir arayuzu
   "sablondan cikmis" gosteren seylerden biri. */
#oyuncu-resim {
  width: 58px; height: 58px;
  background: linear-gradient(140deg, #22314a, #0e1520);
  border: 1px solid var(--cizgi); border-left: 3px solid var(--sari);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 0);
  display: flex; align-items: center; justify-content: center;
  color: var(--kagit);
}
#oyuncu-resim .ik { font-size: 30px; }
/* Ad artık düğme: tıklanınca değiştirme paneli açılıyor. Görünüş
   aynı kalıyor, yalnız imleç ve hafif bir vurgu ekleniyor. */
#oyuncu-bilgi button {
  display: block; font: inherit; font-size: 17px; font-weight: 800;
  font-style: italic; color: var(--kagit); background: none; border: 0;
  padding: 0; cursor: pointer; text-align: left;
  border-bottom: 1px dashed rgba(132,148,171,.45);
}
#oyuncu-bilgi button:hover { color: var(--sari); border-bottom-color: var(--sari); }
#oyuncu-bilgi span { font-size: 10px; letter-spacing: 3px; color: var(--sari); }

#lobi-sag-ust { position: absolute; right: 22px; top: 20px; display: flex; align-items: center; gap: 12px; }

#arac-tanitim { position: absolute; left: 3vw; top: 50%; transform: translateY(-54%); max-width: 40vw; }
#arac-sinif {
  display: inline-block; padding: 4px 16px; margin-bottom: 8px;
  background: rgba(11,17,27,.75); border-left: 3px solid var(--cam);
  font-size: 11px; letter-spacing: 4px; color: var(--cam);
}
#arac-ad {
  font-size: clamp(34px, 6.4vw, 92px); font-weight: 900; font-style: italic;
  line-height: .92; letter-spacing: -2px;
  background: linear-gradient(100deg, var(--sari) 20%, #fff0b0 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 24px rgba(0,0,0,.75));
}
#arac-ozet { margin-top: 16px; display: flex; flex-direction: column; gap: 7px; width: 240px; }
.oz { display: flex; align-items: center; gap: 10px; font-size: 10px; letter-spacing: 2px; color: var(--gri-mavi); }
.oz span { width: 46px; }
.oz i { flex: 1; height: 6px; background: rgba(255,255,255,.10); display: block; }
.oz u { display: block; height: 100%; background: linear-gradient(90deg, var(--cam-koyu), var(--cam)); }
#arac-durum {
  margin-top: 14px; display: flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 800; font-style: italic; letter-spacing: 2px;
  color: var(--yesil);
}
#arac-durum .ik { font-size: 17px; }
#arac-durum.kilitli { color: var(--sari); }

.ok-buton {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(11,17,27,.55); border: 1px solid rgba(238,243,248,.30);
  color: var(--kagit); font-size: 26px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .14s, transform .12s;
}
.ok-buton:hover { background: rgba(28,44,68,.85); transform: translateY(-50%) scale(1.08); }
#arac-onceki { left: 44vw; }
#arac-sonraki { right: 6vw; }

#lobi-alt {
  position: absolute; left: 0; right: 0; bottom: 0; height: 92px;
  display: flex; align-items: stretch;
  background: linear-gradient(0deg, rgba(4,7,12,.92), rgba(4,7,12,.35));
}
#alt-sekmeler { flex: 1; display: flex; align-items: center; gap: 8px; padding-left: 3vw; }
/* SEKMELER ARTIK DUGME GIBI DURUYOR. Onceden saydam zemin uzerinde
   ciplak yaziydilar ve hepsi ayni sonuklukta (.78) bekliyordu: hangi
   sekmenin tiklanabilir oldugu, hangisinin uzerinde durdugun hicbir
   yerden anlasilmiyordu. Simdi her birinin kendi plakasi, ustune
   gelince acilan bir sol serit vurgusu ve gercek bir basili hali var. */
.sekme {
  position: relative; background: rgba(13,21,34,.55);
  border: 1px solid transparent; color: var(--gri-mavi); cursor: pointer;
  display: flex; align-items: center; gap: 11px; padding: 11px 20px 11px 18px;
  font: inherit; font-size: 12px; font-weight: 800; letter-spacing: 2px;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: color .14s, background .14s, transform .12s;
}
.sekme::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--cam); transform: scaleY(0); transform-origin: bottom;
  transition: transform .16s;
}
.sekme .ik { font-size: 20px; }
.sekme:hover { color: var(--kagit); background: rgba(24,38,58,.85); transform: translateY(-2px); }
.sekme:hover::before { transform: scaleY(1); }
.sekme:active { transform: translateY(0); }
#btn-oyna {
  position: relative; overflow: hidden;
  width: min(300px, 28vw); border: 0; cursor: pointer; color: #2a1c00;
  background: linear-gradient(100deg, var(--sari), var(--sari-koyu));
  clip-path: polygon(38px 0, 100% 0, 100% 100%, 0 100%);
  font-size: 30px; font-weight: 900; font-style: italic; letter-spacing: 4px;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  transition: filter .14s;
}
#btn-oyna .ik { font-size: 24px; }
#btn-oyna:hover { filter: brightness(1.12); }

/* DIKKAT: ekrandaki ANA eylem kendini belli etsin. Yavas nefes alan
   parlaklik + uzerinden gecen isik seridi. Hiz kesmesin diye ikisi de
   sadece filter/transform, yerlesim tetiklemiyor. */
.dikkat { animation: nabiz 3.6s ease-in-out infinite; }
/* Isik seridi BILEREK sonuk. %42 opakliktaki genis bir beyaz parlama
   mobil reklam bandi gibi duruyordu; asil isi (dugmenin kendini belli
   etmesi) %14'luk dar bir serit de goruyor. */
.dikkat::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 22%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.14), transparent);
  animation: parla 3.6s ease-in-out infinite;
}
@keyframes nabiz {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.09); }
}
@keyframes parla {
  0% { transform: translateX(-160%); }
  55%, 100% { transform: translateX(360%); }
}
@media (prefers-reduced-motion: reduce) {
  .dikkat, .dikkat::after { animation: none; }
}

#lobi-harita-etiket { position: absolute; right: 22px; bottom: 108px; text-align: right; }
#lobi-harita-etiket span { display: block; font-size: 10px; letter-spacing: 3px; color: var(--gri-mavi); }
#lobi-harita-etiket b { font-size: 20px; font-weight: 800; font-style: italic; }

/* ══════════════════════ PERDELER ══════════════════════ */
.perde {
  position: fixed; inset: 0; z-index: 20;
  background: radial-gradient(90% 90% at 50% 30%, rgba(10,16,26,.93), rgba(4,6,10,.97));
  backdrop-filter: blur(5px);
  display: flex; align-items: center; justify-content: center;
  animation: perde-ac .16s ease-out;
}
@keyframes perde-ac { from { opacity: 0; } }
.perde-ic {
  width: min(1120px, 94vw); max-height: 88vh; overflow-y: auto;
  background: linear-gradient(160deg, rgba(20,32,50,.96), rgba(9,14,22,.98));
  border: 1px solid var(--cizgi);
  clip-path: polygon(26px 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%, 0 26px);
  padding: 28px 32px;
}
.perde-ic.dar { width: min(540px, 94vw); }
.perde-ust { display: flex; align-items: center; gap: 20px; margin-bottom: 22px; }
.perde h2 { font-size: 25px; font-weight: 900; font-style: italic; letter-spacing: 3px; flex: 1; }
.para-goster { font-size: 21px; font-weight: 800; font-style: italic; color: var(--sari); }
.para-goster i { font-style: normal; margin-right: 3px; }
.kapat {
  width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.07);
  border: 1px solid var(--cizgi); color: var(--gri-mavi); font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .14s, border-color .14s, color .14s;
}
.kapat:hover { color: var(--kagit); }
.kapat:hover { background: rgba(255,68,56,.25); border-color: var(--kirmizi); }

button.ana, button.tehlike, .kart-buton {
  position: relative; font: inherit; cursor: pointer; border: 0;
  display: flex; align-items: center;
  background: linear-gradient(100deg, rgba(20,32,50,.95), rgba(13,21,34,.8));
  color: var(--kagit); padding: 0; text-align: left;
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  transition: transform .14s, filter .14s;
}
button.ana > span, button.tehlike > span, .kart-buton > span {
  display: block; flex: 1; padding: 13px 24px; font-size: 14px; font-weight: 800;
  font-style: italic; letter-spacing: 3px; border-left: 3px solid var(--cam);
}
/* Ikon seridin SOLUNDA duruyor, yazinin icinde degil: goz once
   ikonu, sonra yaziyi okuyor ve butun dugmeler ayni hizada basliyor. */
button.ana > .ik, button.tehlike > .ik, #reklam-vazgec > .ik {
  font-size: 19px; margin-left: 18px; margin-right: -4px;
}
button.ana > .ik { color: #241503; }
button.ana { background: linear-gradient(100deg, var(--sari), var(--sari-koyu)); }
button.ana > span { color: #241503; border-left-color: #fff3d6; }
button.tehlike { background: linear-gradient(100deg, rgba(255,68,56,.9), rgba(150,30,24,.8)); margin-top: 18px; }
button.ana:hover, button.tehlike:hover, .kart-buton:hover { filter: brightness(1.2); transform: translateX(4px); }
button:disabled { opacity: .38; cursor: not-allowed; transform: none; filter: grayscale(1); }

.kart-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 16px; }
.kart {
  position: relative; cursor: pointer; padding: 18px 18px 16px;
  background: linear-gradient(150deg, rgba(28,42,64,.9), rgba(13,21,34,.9));
  border: 1px solid var(--cizgi);
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
  transition: transform .14s, border-color .14s;
}
.kart::before { content: ''; position: absolute; left: 0; top: 0; width: 3px; height: 100%; background: var(--cizgi); transition: background .14s; }
.kart:hover { transform: translateY(-3px); border-color: var(--cam-koyu); }
.kart:hover::before { background: var(--cam); }
.kart.secili { border-color: var(--sari); }
.kart.secili::before { background: var(--sari); box-shadow: 0 0 12px rgba(255,209,46,.55); }
.kart.kilitli { opacity: .78; }
.kart h3 { font-size: 18px; font-weight: 900; font-style: italic; margin-bottom: 6px; }
.kart p { font-size: 12px; color: var(--gri-mavi); line-height: 1.55; min-height: 38px; }
.kart .fiyat { margin-top: 12px; font-size: 17px; font-weight: 800; font-style: italic; color: var(--sari); }
.kart .fiyat.sahip { color: var(--yesil); }
.cubuklar { margin-top: 12px; display: flex; flex-direction: column; gap: 5px; }
.cubuk { display: flex; align-items: center; gap: 8px; font-size: 10px; letter-spacing: 2px; color: var(--gri-mavi); }
.cubuk span { width: 52px; }
.cubuk i { flex: 1; height: 5px; background: rgba(255,255,255,.09); display: block; }
.cubuk i u { display: block; height: 100%; background: linear-gradient(90deg, var(--cam-koyu), var(--cam)); }
.kart-buton { margin-top: 14px; width: 100%; }
.kart-buton > span { text-align: center; padding: 11px; letter-spacing: 2px; font-size: 13px; }

.satir { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--cizgi); }
.satir span { flex: 1; font-size: 13px; font-weight: 700; letter-spacing: 2px; }
.satir b { width: 54px; text-align: right; color: var(--cam); font-weight: 800; font-style: italic; }
.satir input[type=range] { width: 200px; accent-color: var(--cam); }
.satir input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--cam); }
.satir select { background: var(--lacivert-2); color: var(--kagit); border: 1px solid var(--cizgi); padding: 8px 12px; font: inherit; font-size: 13px; }
.not { font-size: 11px; color: var(--gri-mavi); margin: 10px 0 4px; line-height: 1.65; }
.yardim p { font-size: 13px; line-height: 1.9; color: var(--gri-mavi); margin-bottom: 6px; }
.yardim b { color: var(--kagit); }
.ik-madde { font-size: 16px; margin-right: .45em; vertical-align: -0.18em; color: var(--cam); }
.yardim hr { border: 0; border-top: 1px solid var(--cizgi); margin: 14px 0; }

.sonuc { text-align: center; }
#duraklat-kazanc { margin-bottom: 14px; }
#duraklat-kazanc span { display: block; font-size: 11px; letter-spacing: 4px; color: var(--gri-mavi); }
#duraklat-kazanc b { font-size: 44px; font-weight: 900; font-style: italic; color: var(--sari); text-shadow: 0 0 30px rgba(255,209,46,.35); }
#duraklat-ozet { color: var(--gri-mavi); font-size: 13px; line-height: 2; margin-bottom: 16px; }
#duraklat-ozet b { color: var(--kagit); font-style: italic; }
/* DURAKLAT DÜĞMELERİ
 * Önceden RESUME dışındakilerin hiçbir sınıfı yoktu: tarayıcının
 * varsayılan gri düğmesi olarak çiziliyorlardı ve oyunun içinde
 * "eksik/bozuk" duruyorlardı. Artık hepsi aynı köşeli dile bağlı;
 * birincil olan altın, ikincil olanlar koyu, çıkış olan kırmızıya
 * çalıyor. */
.duraklat-dugmeler { display: flex; flex-direction: column; gap: 9px; }
#duraklat button {
  position: relative; width: 100%; border: 0; cursor: pointer; font: inherit;
  display: flex; align-items: center; gap: 12px;
  padding: 13px 18px;
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  transition: filter .14s, transform .12s;
}
#duraklat button > .ik { font-size: 19px; margin-left: 16px; margin-right: -6px; }
#duraklat button > span {
  flex: 1; text-align: left; font-size: 14px; font-weight: 800;
  font-style: italic; letter-spacing: 3px; padding: 0; border: 0;
}
#duraklat button.ana {
  background: linear-gradient(100deg, var(--sari), var(--sari-koyu));
  color: #241503;
}
#duraklat button.ikincil {
  background: linear-gradient(100deg, rgba(28,42,64,.95), rgba(13,21,34,.9));
  color: var(--kagit); border-left: 3px solid var(--cam);
}
#duraklat button.ikincil.cikis { border-left-color: var(--kirmizi); }
#duraklat button:hover { filter: brightness(1.18); transform: translateX(4px); }

/* ══════════════════════ YÜKLENİYOR ══════════════════════ */
#yukleniyor {
  position: fixed; inset: 0; z-index: 40;
  background: radial-gradient(80% 70% at 50% 45%, #101a29, #05070c 75%);
  display: flex; align-items: center; justify-content: center;
}
.yukleme-ic { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.halka { width: 50px; height: 50px; border: 2px solid rgba(53,210,245,.18); border-top-color: var(--cam); border-radius: 50%; animation: don .85s linear infinite; }
@keyframes don { to { transform: rotate(360deg); } }
#yukleniyor span { font-size: 12px; color: var(--gri-mavi); letter-spacing: 5px; font-weight: 700; }
.yukleme-cubuk { width: 260px; height: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.yukleme-cubuk i { display: block; width: 40%; height: 100%; background: linear-gradient(90deg, transparent, var(--cam), transparent); animation: kay 1.1s ease-in-out infinite; }
@keyframes kay { from { transform: translateX(-110%); } to { transform: translateX(360%); } }

/* ══════════════════════ küçük ekran ══════════════════════ */
@media (max-width: 980px) {
  #arac-onceki { left: 42vw; }
  #arac-sonraki { right: 4vw; }
  /* HUD boyutlari artik --hud degiskeninden geliyor; burada tek tek
     ezmek gerekmiyor. Yalniz lobinin alt seridi kaliyor. */
  #lobi-alt { height: 74px; }
  .sekme { padding: 10px 14px; font-size: 11px; }
  .sekme .ik { font-size: 18px; }
}

/* Sekme seridi ile DRIVE dugmesi arasinda GERCEK bir pay olsun.
   Olculdu: 568x320'de sekmeler 375'te bitiyor, DRIVE 375'te
   basliyordu — tam degiyorlar. Bir harf daha uzun bir etiket ya da
   baska bir yazi tipi tasirirdi. Dar ekranda ic bosluklar
   sikistiriliyor; 568'de pay 0'dan ~58 px'e cikiyor. */
@media (max-width: 660px) {
  #alt-sekmeler { gap: 5px; padding-left: 16px; }
  .sekme { padding: 8px 10px; gap: 7px; font-size: 10px; letter-spacing: 1.4px; }
  .sekme .ik { font-size: 16px; }
  #btn-oyna { font-size: 22px; width: min(200px, 34vw); }
}

@media (max-height: 520px) {
  /* Yatay telefonda (ornek 844x390) hiz saati dikeyde ortalanınca
     pedallarin uzerine biniyordu. Saat KUCULTULMUYOR, olceklenip sag
     uste yapisiyor: ic yerlesimi piksel cinsinden yazili oldugu icin
     kutuyu kucultmek yazilari yerinden ediyor, transform etmiyor. */
  /* Yatay telefonda saat dikeyde ortalanınca pedalların üstüne
     biniyordu; sağ üste yapıştırılıyor. Ölçek yine --hud'dan. */
  /* SAAT ICIN AYRI KURAL YOK. Onceden burada `top: 0` ve sabit
     `--hud * 0.42` vardi cunku dikey ortalanan saat pedallarin
     ustune biniyordu. Artik saat sag kenarin OLCULEN bos bandina
     oturuyor (js/main.js -> saat_olcegi) ve ayni is tek yerden
     yapiliyor; iki kural birden olunca yatay telefonda saat gaz
     pedalina 2 px giriyordu. */
  /* Yatay telefonda ekranın dört köşesi de dolu: sol üstte mini harita
     ve altındaki üç düğme, ortada drift şeridi, sağ üstte saat, altta
     dokunmatik kumanda. Para pilleri sağ üstte kalırsa saatin altına,
     sola alınırsa mini haritanın düğmelerine giriyor (ölçüldü).
     Çözüm: bu modda yalnız PARA gösteriliyor, mini harita kümesinin
     hemen altında. Rekor/oturum zaten duraklat panelinde var. */
  /* `top` ARTIK OLCULUYOR: `--solust-alt` sol ust sutunun gercek alt
     kenari (js/main.js -> hud_yerlesim). Elle yazilan 206px, duugme
     yazilari eklendikten sonra seridin 17px icine giriyordu. */
  #ust-sag {
    right: auto; left: calc(14px * var(--hud));
    top: calc(var(--solust-alt, calc(224px * var(--hud))) + 6px);
    align-items: flex-start; gap: 4px;
  }
  /* MİNİ HARİTA EKRAN YÜKSEKLİĞİNE BAĞLI. 148 px'lik kutu --hud 1.15
     ile 170 px ediyor; 375 px yüksekliğindeki bir ekranın %45'i. Sol
     sütun (harita + düğmeler + para pili) direksiyon pedinin içine
     giriyordu — ölçüldü, 667x375'te 3 px, 568x320'de 8 px.
     Sabit bir küçültme yetmiyor: 320 px'lik ekranda 104*--hud hâlâ
     fazla. `30vh` üstünde tavan olunca her yükseklikte kendiliğinden
     oturuyor — 320'de 96 px, 390'da 117 px. */
  #mini-kume {
    width: min(calc(104px * var(--hud)), 30vh);
    height: min(calc(104px * var(--hud)), 30vh);
  }
  #ust-sag .pil-kucuk { display: none; }
  #ust-sag .para-pil { padding: 3px 11px 3px 8px; }
  #ust-sag .para-pil b { font-size: calc(14px * var(--hud)); }
  #ust-sag .para-pil i { font-size: calc(13px * var(--hud)); }
  /* DURAKLAT PANELİ yatay telefonda taşıyordu: ölçüldü, 414 px'lik
     ekranda düğmeler 591 px'e kadar iniyordu ve RESUME dışındaki dördü
     görünmüyordu — "butonlar eksik" şikâyeti buydu. Bu modda başlık ve
     özet küçülüyor, düğmeler iki sütuna diziliyor. */
  #duraklat .perde-ic { padding: 12px 16px; max-height: 96vh; }
  #duraklat h2 { font-size: 17px; letter-spacing: 2px; margin-bottom: 4px; }
  #duraklat-kazanc { margin-bottom: 6px; }
  #duraklat-kazanc span { font-size: 9px; letter-spacing: 2px; }
  #duraklat-kazanc b { font-size: 26px; }
  #duraklat-ozet { font-size: 10px; line-height: 1.45; margin-bottom: 8px; }
  .duraklat-dugmeler { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .duraklat-dugmeler .ana { grid-column: 1 / -1; }
  #duraklat button { padding: 9px 12px; gap: 8px; }
  #duraklat button > .ik { font-size: 16px; margin-left: 11px; }
  #duraklat button > span { font-size: 11px; letter-spacing: 1.6px; }

  #drift-panel { top: 14px; }
  #drift-puan { font-size: 34px; }
  #bildirim { top: 140px; }
  #gorev-kutu { display: none; }
  #arac-ozet { display: none; }
  #lobi-alt { height: 64px; }
}

/* ödüllü video paneli */
#reklam-odul-kutu { margin-bottom: 18px; }
#reklam-odul {
  font-size: 30px; font-weight: 900; font-style: italic; color: var(--sari);
  text-shadow: 0 0 26px rgba(255,209,46,.4); margin-bottom: 8px;
}
#reklam-aciklama { font-size: 13px; color: var(--gri-mavi); line-height: 1.7; }
#reklam button { width: 100%; margin-top: 10px; }
#reklam button > span { text-align: center; }


/* ══════════════════════ IPUCU (yol gosterme) ══════════════════════
 * Sikayet: "bazi kisimlar anlasilmiyor, butonun burada oldugunu
 * soylememiz gerekiyor". Iki yerde cozuluyor:
 *   1. Lobide ilk acilista balonlar gercek dugmelerin yaninda duruyor
 *      ve oklarla onlari gosteriyor.
 *   2. Ilk suruste klavye karti cikip kendiliginden soluyor.
 * Ikisi de kayitta isaretleniyor, bir daha cikmiyor; ayarlardan geri
 * acilabiliyor. */
#ipucu-lobi {
  position: absolute; inset: 0; z-index: 12;
  background: rgba(4,7,12,.62); backdrop-filter: blur(1.5px);
  animation: perde-ac .2s ease-out;
}
.ipucu-balon {
  position: absolute; width: 250px; padding: 13px 16px 14px;
  background: linear-gradient(150deg, rgba(28,42,64,.98), rgba(13,21,34,.98));
  border: 1px solid var(--cam-koyu); border-left: 3px solid var(--cam);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  box-shadow: 0 10px 40px rgba(0,0,0,.6);
}
.ipucu-balon b { display: block; font-size: 10px; letter-spacing: 3px; color: var(--cam); margin-bottom: 6px; }
.ipucu-balon p { font-size: 13px; line-height: 1.6; color: var(--kagit); }
.ipucu-balon p b { display: inline; font-size: inherit; letter-spacing: 1px; color: var(--sari); }
.ipucu-balon i { position: absolute; width: 0; height: 0; }
.ok-asagi {
  left: 34px; bottom: -13px;
  border-left: 11px solid transparent; border-right: 11px solid transparent;
  border-top: 13px solid var(--cam);
  filter: drop-shadow(0 3px 8px rgba(53,210,245,.5));
  animation: ok-in 1.3s ease-in-out infinite;
}
.ok-sag {
  right: -13px; top: 26px;
  border-top: 11px solid transparent; border-bottom: 11px solid transparent;
  border-left: 13px solid var(--cam);
  filter: drop-shadow(3px 0 8px rgba(53,210,245,.5));
  animation: ok-sag-in 1.3s ease-in-out infinite;
}
@keyframes ok-in { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@keyframes ok-sag-in { 0%,100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
/* Balon SUR dugmesinin tam ustunde dursun, ok da dugmeye baksin:
   olculdu, once dugmenin soluna dusuyordu ve ok bosluga bakiyordu. */
#ipucu-sur { right: 26px; bottom: 106px; }
#ipucu-sur .ok-asagi { left: auto; right: 46px; }
#ipucu-sekme { left: 3vw; bottom: 120px; }
#ipucu-ok { left: calc(44vw - 268px); top: calc(50% - 40px); }
#ipucu-tamam { position: absolute; left: 50%; top: 24px; transform: translateX(-50%); min-width: 190px; }
#ipucu-tamam > span { text-align: center; }

/* ilk suruste cikan klavye karti */
#surus-ipucu {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  width: min(430px, 88vw); padding: 14px 20px 15px; pointer-events: none;
  background: linear-gradient(150deg, rgba(20,32,50,.94), rgba(9,14,22,.94));
  border: 1px solid var(--cizgi); border-left: 3px solid var(--cam);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  transition: opacity .6s;
}
#surus-ipucu.soluyor { opacity: 0; }
.ipucu-baslik { font-size: 10px; letter-spacing: 4px; color: var(--cam); margin-bottom: 8px; font-weight: 800; }
#surus-ipucu p { font-size: 13px; line-height: 1.95; color: var(--gri-mavi); }
#surus-ipucu p.vurgu { color: var(--kagit); }
#surus-ipucu p.kisik { font-size: 11px; opacity: .7; margin-top: 4px; }

/* klavye tusu rozeti — yardim metinlerinde de kullaniliyor */
.tus {
  display: inline-block; min-width: 22px; padding: 1px 7px; margin: 0 2px;
  background: rgba(255,255,255,.09); border: 1px solid var(--cizgi);
  border-bottom-width: 2px; border-radius: 4px;
  font-size: 11px; font-weight: 800; font-style: normal; letter-spacing: 1px;
  color: var(--kagit); text-align: center;
}

/* odullu arac karti: kilit yerine VIDEO rozeti */
.kart .rozet {
  position: absolute; right: 12px; top: 12px;
  display: flex; align-items: center; gap: 5px;
  background: linear-gradient(100deg, var(--sari), var(--sari-koyu));
  color: #241503; font-size: 10px; font-weight: 900; letter-spacing: 1.5px;
  padding: 4px 9px 4px 7px; border-radius: 3px;
}
.kart .rozet .ik { font-size: 13px; }
/* Kart dugmesi: ikon solda, yazi ortada — hepsi ayni hizada. */
.kart-buton { display: flex; align-items: center; }
.kart-buton > .ik { font-size: 16px; margin-left: 14px; margin-right: -8px; }

@media (max-width: 980px) {
  .ipucu-balon { width: 200px; padding: 10px 12px 11px; }
  .ipucu-balon p { font-size: 11px; }
  #ipucu-sur { right: 14px; bottom: 84px; }
  #ipucu-sekme { bottom: 96px; }
  #ipucu-ok { left: calc(42vw - 214px); }
  #surus-ipucu { bottom: 14px; padding: 10px 14px 11px; }
  #surus-ipucu p { font-size: 11px; line-height: 1.75; }
  :root { --dokun-yon-b: 76px; --dokun-ped-g: 86px; --dokun-ped-y: 104px; --dokun-el-b: 62px; --bos: 10px; }
  .dokun-yon i { font-size: 32px; }
  .dokun-pedal i { font-size: 23px; }
}


/* ── HASAR ŞERİDİ ──
 * Görev kutusunun hemen altında, yalnız hasar varken görünüyor.
 * Kaporta deformasyonu istenmiyor; hasar duman + güç kaybı + bu
 * şerit olarak okunuyor. */
#hasar {
  position: absolute; left: calc(14px * var(--hud));
  top: calc(300px * var(--hud)); width: calc(236px * var(--hud));
  background: linear-gradient(100deg, rgba(11,17,27,.86), rgba(20,32,50,.55));
  padding: calc(7px * var(--hud)) calc(13px * var(--hud)) calc(9px * var(--hud));
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  border-left: 3px solid var(--sari);
}
#hasar.agir { border-left-color: var(--kirmizi); }
#hasar span { font-size: calc(10px * var(--hud)); letter-spacing: 2px; color: var(--kagit); }
#hasar b {
  float: right; font-size: calc(9px * var(--hud));
  letter-spacing: 1px; color: var(--gri-mavi); font-weight: 700;
}
#hasar-cubuk { height: calc(5px * var(--hud)); margin-top: calc(6px * var(--hud)); background: rgba(255,255,255,.10); }
#hasar-dolgu {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--sari), var(--kirmizi));
  transition: width .3s;
}
@media (max-height: 520px) { #hasar { display: none; } }


/* oyuncu adı girişi */
#ad-girdi {
  width: 100%; font: inherit; font-size: 20px; font-weight: 800; font-style: italic;
  background: var(--lacivert-2); color: var(--kagit);
  border: 1px solid var(--cizgi); border-left: 3px solid var(--cam);
  padding: 12px 16px; letter-spacing: 1px;
}
#ad-girdi:focus { outline: none; border-color: var(--cam); }
#ad-kaydet { width: 100%; margin-top: 14px; }
#ad-kaydet > span { text-align: center; }