/* Diji Yörünge · oyuna özel stil
   ---------------------------------------------------------------------------
   ortak/oyun.css'e DOKUNULMAZ; burada yalnız yorunge'nin HUD/çubuk/boss/tuş
   katmanı tanımlanır. Tüm konumlanan katmanlar sahne içinde `absolute` +
   `pointer-events:none`; yatay taşma üretmez.
   Palet tema.js'ten gelir (--yr-* değişkenleri oyun.js tarafından yazılır). */

/* ───────── perde logosu: Diji markası ─────────
   Paylaşılan `ortak/oyun.css` parıltı maskesini GMK logosunun siluetiyle çiziyor
   (rider/moto öyle kullanıyor). Yörünge sayfasında parıltı Diji işaretinin siluetiyle
   gezsin, turuncu halka/ışıma lime olsun. Hepsi `.go-yorunge` kapsamında → diğer
   oyunların görünümü değişmez. */
.go-yorunge .go-logo__parilti {
  -webkit-mask-image: url(/oyun/ortak/img/diji.webp);
  mask-image: url(/oyun/ortak/img/diji.webp);
}
.go-yorunge .go-logo__cerceve {
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .55)) drop-shadow(0 0 18px rgba(158, 249, 155, .28));
}
.go-yorunge .go-logo__halka { border-color: rgba(158, 249, 155, .5); }

.go-yorunge {
  --yr-alan-x: 0px;
  --yr-alan-y: 0px;
  --yr-alan-w: 100%;
  --yr-alan-h: 100%;
  --yr-dur-boy: 56px;   /* duraklat tuşu kenarı (HUD sağ boşluğu da bunu kullanır) */
  background: #05070d;
  touch-action: none;
}

/* canvas'ta piksel-net çizim: tarayıcı yumuşatması kapalı */
.go-yorunge .go-canvas {
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

/* ───────── HUD: sol kenar oyun alanı sütununa hizalanır ─────────
   Sağ tarafta boşluk sahnenin sağ kenarına göre ölçülür: duraklat tuşu sütunun
   değil sahnenin sağ üstünde durur (geniş ekranda sütun ortada kalıyor). */
.go-yorunge .go-hud {
  padding: 12px calc(var(--yr-dur-boy, 56px) + 18px) 0 calc(var(--yr-alan-x) + 12px);
  gap: 8px;
}
.yr-hud__sag {
  display: flex;
  align-items: center;
  gap: 8px;
}
.yr-hud .go-kutu {
  min-width: 62px;
  padding: 5px 9px 6px;
  background: rgba(6, 10, 18, .55);
  border-color: rgba(150, 190, 255, .16);
}
.yr-hud .go-kutu span { font-size: 8.5px; letter-spacing: .16em; color: rgba(238, 242, 246, .62); }
.yr-hud .go-kutu b { font-size: 16px; color: #eef2f6; }
.yr-hud .go-kutu b[data-hud-carpan] { color: var(--yr-altin, #ffcf6e); }
.yr-hud .go-kutu b[data-hud-can] { color: #ff8095; letter-spacing: .04em; }
.yr-logo {
  width: 34px; height: 34px; object-fit: contain; opacity: .9;
  filter: drop-shadow(0 0 8px rgba(158, 249, 155, .30));
}
@media (max-width: 720px) {
  .yr-hud .go-kutu { min-width: 0; padding: 4px 7px 5px; }
  .yr-hud .go-kutu b { font-size: 13px; }
  .yr-kutu--gizli { display: none; }
  .yr-logo { width: 26px; height: 26px; }
}
@media (max-height: 420px) {
  .yr-hud .go-kutu b { font-size: 12px; }
  .yr-logo { display: none; }
}

/* ───────── geniş ekran / tam ekran: HUD sütun DIŞINA, yanlara ─────────
   `yr-kenar` sınıfı oyun.js'te ölçümle eklenir (yan boşluk ≥ 150 px). Oyun alanı
   genişlemez; yalnız HUD okunurluğu artar, sütun sınırı çerçeveyle belli kalır. */
.go-yorunge.yr-kenar .go-hud {
  padding: 14px 0 0;
  align-items: flex-start;
}
.go-yorunge.yr-kenar .go-hud__sol {
  position: absolute;
  top: 14px;
  left: 10px;
  width: calc(var(--yr-alan-x) - 20px);
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  max-width: none;
}
.go-yorunge.yr-kenar .yr-hud__sag {
  position: absolute;
  top: 14px;
  right: 10px;
  width: calc(100% - var(--yr-alan-x) - var(--yr-alan-w) - 20px);
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.go-yorunge.yr-kenar .yr-hud .go-kutu { width: 100%; }
.go-yorunge.yr-kenar .yr-hud__sag .go-kutu { width: auto; min-width: 74px; }
.go-yorunge.yr-kenar .yr-cubuklar { left: calc(var(--yr-alan-x) + 10px); }

/* ───────── ısı + kalkan çubukları (sol alt) ───────── */
.yr-cubuklar {
  position: absolute;
  z-index: 6;
  left: calc(var(--yr-alan-x) + 12px);
  bottom: calc(var(--yr-alan-y) + 12px);
  width: min(230px, calc(var(--yr-alan-w) - 24px));
  display: grid;
  gap: 6px;
  pointer-events: none;
}
.yr-isi, .yr-kalkan {
  position: relative;
  height: 12px;
  border-radius: 999px;
  background: rgba(8, 12, 20, .68);
  border: 1px solid rgba(150, 190, 255, .18);
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
.yr-cubuk__etiket {
  position: absolute; inset: 0 auto 0 8px;
  display: flex; align-items: center;
  font: 800 7.5px/1 system-ui, sans-serif; letter-spacing: .18em;
  color: rgba(238, 242, 246, .52); z-index: 2;
}
.yr-cubuk__dolgu {
  position: absolute; inset: 0 auto 0 0; width: 0%;
  border-radius: inherit;
  transition: width .1s linear;
}
.yr-isi .yr-cubuk__dolgu { background: linear-gradient(90deg, #ffe9a8, var(--yr-isi, #ffc857)); }
.yr-kalkan .yr-cubuk__dolgu { background: linear-gradient(90deg, #2c7fd6, var(--yr-kalkan, #4dabf7)); }
.yr-isi.is-kilit { border-color: rgba(255, 90, 122, .8); }
.yr-isi.is-kilit .yr-cubuk__dolgu { background: linear-gradient(90deg, #ff5a7a, #ffc857); }
.yr-isi.is-kilit { animation: yr-kilit-nabiz .5s ease-in-out infinite alternate; }
.yr-isi__uyari {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font: 800 8px/1 system-ui, sans-serif; letter-spacing: .12em;
  color: #fff; background: rgba(196, 40, 92, .92);
  padding: 1px 5px; border-radius: 999px;
}
.yr-isi__uyari[hidden] { display: none; }
@keyframes yr-kilit-nabiz {
  from { box-shadow: 0 0 0 rgba(255, 90, 122, 0); }
  to { box-shadow: 0 0 12px rgba(255, 90, 122, .55); }
}

/* ───────── boss can barı (üst orta) ───────── */
.yr-boss {
  position: absolute;
  z-index: 7;
  top: calc(var(--yr-alan-y) + 58px);
  left: calc(var(--yr-alan-x) + var(--yr-alan-w) / 2);
  transform: translateX(-50%);
  width: min(420px, calc(var(--yr-alan-w) - 40px));
  display: grid;
  gap: 3px;
  justify-items: center;
  pointer-events: none;
  text-align: center;
}
.yr-boss[hidden] { display: none; }
.yr-boss__ad {
  font: 800 9.5px/1 system-ui, sans-serif; letter-spacing: .22em;
  color: #ffd0dc; text-shadow: 0 0 14px rgba(255, 80, 120, .6);
}
.yr-boss__bar {
  position: relative; display: block; width: 100%; height: 9px;
  border-radius: 999px; background: rgba(10, 6, 12, .75);
  border: 1px solid rgba(255, 107, 138, .45); overflow: hidden;
}
.yr-boss__bar b {
  position: absolute; inset: 0 auto 0 0; width: 100%;
  background: linear-gradient(90deg, #ff4d6d, #ff9db1);
  transition: width .15s linear;
}
.yr-boss__faz {
  font: 800 8.5px/1 system-ui, sans-serif; letter-spacing: .18em;
  color: rgba(255, 220, 230, .8);
}

/* ───────── duraklat (sağ üst) ───────── */
.yr-duraklat {
  position: absolute;
  z-index: 12;
  top: calc(var(--yr-alan-y) + 10px);
  right: 10px;
  width: var(--yr-dur-boy); height: var(--yr-dur-boy);
  display: grid; place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 14px;
  background: rgba(8, 12, 20, .55);
  color: #eef2f6;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.yr-duraklat svg { width: 20px; height: 20px; fill: currentColor; }
.yr-duraklat:hover { background: rgba(158, 249, 155, .30); }
.yr-duraklat[aria-pressed="true"] { background: rgba(158, 249, 155, .45); border-color: var(--yr-marka-acik, #c2ffb6); }
.yr-duraklat:focus-visible { outline: 3px solid var(--yr-marka-acik, #c2ffb6); outline-offset: 2px; }
/* tam ekranda "Çık" düğmesiyle çakışmasın */
.go-sahne.is-tam-acik .yr-duraklat { top: calc(max(12px, env(safe-area-inset-top)) + 44px); right: auto; left: calc(max(12px, env(safe-area-inset-left))); }

.yr-duraklat-not {
  position: absolute;
  z-index: 11;
  top: 45%; left: calc(var(--yr-alan-x) + var(--yr-alan-w) / 2);
  transform: translate(-50%, -50%);
  max-width: min(340px, calc(var(--yr-alan-w) - 32px));
  padding: 12px 16px;
  border: 1px solid rgba(150, 190, 255, .3);
  border-radius: 14px;
  background: rgba(8, 12, 20, .84);
  color: #eef2f6;
  text-align: center;
  font: 650 12.5px/1.5 system-ui, sans-serif;
  pointer-events: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.yr-duraklat-not[hidden] { display: none; }

/* ───────── dokunmatik: yalnız SERİ ATEŞ tuşu (SOL alt) ─────────
   Şablonun dokunma katmanı `.go-dokunma`'dır (space-between: sol D-pad + sağ aksiyon).
   Diji Yörünge'de tek tuş var ve kullanıcı kararıyla SOL alta yaslanır (başparmak
   hakimiyeti; ısı/kalkan çubukları da sol altta olduğu için çubuklar tuşun üstüne alınır).
   Sınıf adı şablonla aynı olmalı (`.yr-dokunma` yazımı hiçbir öğeye denk gelmiyordu). */
.go-yorunge .go-dokunma {
  justify-content: flex-start;
  align-items: flex-end;
  padding: 0 calc(var(--yr-alan-x) + 14px) calc(var(--yr-alan-y) + max(16px, env(safe-area-inset-bottom))) calc(var(--yr-alan-x) + 14px);
}
/* çubuklar tuşun üstünde kalsın: SOL alt tuş 84 px + 12 px pay + 16 px yer payı (yalnız tuş görünürken) */
/* dokunmatik olmayan dar ekranlarda da tuş görünsün (Rider/Moto ile aynı eşik) */
@media (pointer: coarse), (max-width: 720px) {
  .go-yorunge .go-dokunma { display: flex; }
  .go-yorunge .yr-cubuklar { bottom: calc(var(--yr-alan-y) + 112px); }
}
.yr-tus-seri {
  pointer-events: auto;
  width: 88px; height: 84px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  gap: 0;
  border: 2px solid rgba(158, 249, 155, .55);
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .18), rgba(10, 12, 15, .55) 72%);
  color: #e8ffe2;
  font: 800 9.5px/1.15 system-ui, sans-serif;
  letter-spacing: .06em;
  text-align: center;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.yr-tus-seri svg { width: 26px; height: 26px; fill: currentColor; }
.yr-tus-seri span { display: block; margin-top: 1px; }
.yr-tus-seri.is-basili {
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .26), rgba(94, 176, 96, .92) 72%);
  border-color: #c2ffb6;
  transform: translateY(3px);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .26);
}
.yr-tus-seri:focus-visible { outline: 3px solid #c2ffb6; outline-offset: 3px; }
@media (max-height: 480px) and (orientation: landscape) {
  .go-yorunge { --yr-dur-boy: 48px; }   /* alt sınır 48px (dokunma hedefi) */
  .yr-tus-seri { width: 72px; height: 68px; font-size: 8.5px; }
  .yr-tus-seri svg { width: 20px; height: 20px; }
  .yr-cubuklar { width: min(180px, calc(var(--yr-alan-w) - 20px)); bottom: calc(var(--yr-alan-y) + 94px); }
  .yr-boss { top: calc(var(--yr-alan-y) + 46px); }
}
/* yatay telefon / kısa ekran: 16:9 sahne görünür alandan uzun kalıyordu (844×390'da 448 px),
   SERİ ATEŞ tuşu ekran dışına düşüyordu. Sahneyi görünür yüksekliğe sığdır; sayfa kaydırması
   `sahneyiSigdir()` ile yapılır. */
@media (max-height: 560px) and (min-width: 721px) {
  .go-sahne.go-yorunge { aspect-ratio: auto; height: max(220px, calc(var(--go-vh, 100vh) - 84px)); }
}
/* dar telefon: ısı/kalkan çubukları (solda) SERİ ATEŞ tuşunun üstüne taşınır */
@media (max-width: 520px) {
  .yr-cubuklar { width: min(170px, calc(var(--yr-alan-w) - 24px)); }
}
/* 320-380 px: HUD'a iki küme sığmıyor (sağdaki duraklat tuşu yer ayırıyor).
   Dekoratif logo ve ikincil HURDA sayacı gizlenir; çekirdek sayaçlar kalır. */
@media (max-width: 380px) {
  .yr-logo { display: none; }
  .yr-hud__sag .go-kutu:last-of-type { display: none; }
  .yr-hud .go-kutu b { font-size: 12px; }
  .yr-hud .go-kutu span { font-size: 7.5px; letter-spacing: .1em; }
}
@media (prefers-reduced-motion: reduce) {
  .yr-isi.is-kilit { animation: none; }
  .yr-cubuk__dolgu, .yr-boss__bar b { transition: none; }
}

/* sahnede sahne dışına taşan hiçbir katman yok: güvenlik ağı.
   `overflow: clip` bilinçli: `hidden` sahneyi KAYDIRILABİLİR bir kap yapıyor,
   içeride bir öğe (perde kartı) sahne kısaldığında taşınca scrollTop kayıyor ve
   HUD/duraklat/ODAK katmanları sahneyle birlikte yukarı kayıp ekran dışına çıkıyordu.
   clip kaydırma kabı yaratmaz; eski tarayıcılar için hidden yedeği duruyor. */
.go-yorunge { overflow: hidden; overflow: clip; }
/* perde kartı sahneye sığmazsa perdenin kendisi kaydırılır (sahne değil) */
.go-yorunge .go-perde { overflow-y: auto; overscroll-behavior: contain; }