/* ===========================================================================
   hud.css — Kokpit yerleşimi ve göstergeler
   ---------------------------------------------------------------------------
   YERLEŞİM İLKESİ
   Kokpit MUTLAK konumlandırma değil, gerçek bir dikey akıştır:

       #cockpit  (dikey flex)
         ├── #topbar      (sabit yükseklik)
         ├── #middle      (kalan alan: sol telemetri | göstergeler | sağ)
         └── #bottombar   (sabit yükseklik: kutucuklar + radyo + pedal)

   Böylece hızlı kutucuklar hiçbir en-boy oranında kadranın üstüne binemez;
   orta bölge ne kadar yer kalıyorsa onu alır, kadran da o alana sığacak
   şekilde küçülür. Eskiden her şey `position:absolute` idi ve çakışma
   yalnızca piksel eşikli medya sorgularıyla önlenmeye çalışılıyordu —
   kare ve dikey ekranlarda hiçbir eşik yakalanmadığı için gösterge
   kutucukların altında kalıyordu.
   =========================================================================== */

#cockpit {
  position: fixed;
  inset: 0;
  height: 100dvh;          /* mobil araç çubuğu altında kalmasın */
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding:
    calc(12px + env(safe-area-inset-top))
    calc(12px + env(safe-area-inset-right))
    calc(12px + env(safe-area-inset-bottom))
    calc(12px + env(safe-area-inset-left));
  pointer-events: none;    /* arka plan tıklanabilir kalsın */
}
#cockpit > *,
#middle > * { pointer-events: auto; }
#middle { pointer-events: none; }

/* ------------------------------------------------------------- üst çubuk */

#topbar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
.tb-left, .tb-right { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tb-center { min-width: 0; overflow: hidden; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: var(--panel);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font: 700 12px/1 var(--mono);
  letter-spacing: .12em;
  white-space: nowrap;
}
.badge .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.badge-gps { color: var(--good); border-color: color-mix(in srgb, var(--good) 45%, transparent); }
.badge-gps .dot { background: var(--good); box-shadow: 0 0 10px var(--good); animation: pulse 2s infinite; }
.badge-sim { color: #ffb02e; border-color: rgba(255,176,46,.4); }
.badge-sim .dot { background: #ffb02e; }
@keyframes pulse { 50% { opacity: .35; } }

#pack-name {
  font: 700 13px/1 var(--mono);
  letter-spacing: .2em;
  color: var(--accent);
  text-shadow: 0 0 20px color-mix(in srgb, var(--accent) 60%, transparent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#clock { font: 600 15px/1 var(--mono); color: var(--text-dim); white-space: nowrap; }

/* --------------------------------------------------------------- orta bölge */

#middle {
  flex: 1 1 auto;
  min-height: 0;           /* flex çocuğun taşmasını engeller */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#gauges {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2.5vw, 36px);
}

#tach-wrap {
  position: relative;
  /* Kalan yüksekliğe sığar; asla taşmaz */
  height: min(100%, clamp(170px, 34vmin, 340px));
  aspect-ratio: 1;
  flex: 0 1 auto;
}

/* Parlak yol dokusu üzerinde hız rakamı okunaklı kalsın diye yumuşak karartma */
#tach-wrap::before {
  content: '';
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,0,0,.78) 0%, rgba(0,0,0,.55) 52%, rgba(0,0,0,0) 74%);
  pointer-events: none;
}

#tach { width: 100%; height: 100%; transform: rotate(135deg); overflow: visible; position: relative; }
#tach circle { fill: none; stroke-linecap: round; }
.tach-track { stroke: rgba(255,255,255,.07); stroke-width: 10; }
.tach-value {
  stroke: var(--accent);
  stroke-width: 10;
  filter: drop-shadow(0 0 10px var(--accent));
  transition: stroke-dashoffset .06s linear;
}
.tach-redline { stroke: var(--redline); stroke-width: 3; opacity: .55; }

#tach-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  pointer-events: none;
}

#speed-value {
  font: 200 clamp(44px, 13vmin, 118px)/0.9 var(--font);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  text-shadow: 0 0 42px rgba(255,255,255,.22);
}
#speed-unit {
  font: 600 clamp(9px, 1.4vmin, 12px)/1 var(--mono);
  letter-spacing: .28em;
  color: var(--text-dim);
  margin-top: 4px;
}
#rpm-value {
  margin-top: clamp(4px, 1.4vmin, 12px);
  font: 600 clamp(11px, 1.8vmin, 15px)/1 var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
#rpm-value small { font-size: .62em; letter-spacing: .16em; opacity: .7; }

/* ----------------------------------------------------------- shift ışıkları */

#shift-lights {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}
#shift-lights i {
  width: 12px; height: 5px;
  border-radius: 3px;
  background: rgba(255,255,255,.10);
  transition: background .06s, box-shadow .06s;
}
#shift-lights i:nth-child(-n+3).on { background: var(--good); box-shadow: 0 0 10px var(--good); }
#shift-lights i:nth-child(n+4):nth-child(-n+5).on { background: #ffb02e; box-shadow: 0 0 10px #ffb02e; }
#shift-lights i:nth-child(n+6).on { background: var(--redline); box-shadow: 0 0 12px var(--redline); }
#shift-lights i.on.blink { animation: shiftBlink .09s steps(2) infinite; }
@keyframes shiftBlink { 50% { opacity: .15; } }

/* ------------------------------------------------------------ vites kutusu */

#gear-box {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(5px, 1.2vmin, 10px);
}

.paddle {
  width: clamp(46px, 6vmin, 66px);
  height: clamp(36px, 4.6vmin, 52px);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  background: var(--panel);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text);
  font: 600 clamp(17px, 2.4vmin, 22px)/1 var(--font);
  cursor: pointer;
}
.paddle:active { background: color-mix(in srgb, var(--accent) 22%, transparent); border-color: var(--accent); }

#gear-display {
  width: clamp(64px, 8.4vmin, 96px);
  padding: clamp(6px, 1.4vmin, 14px) 0;
  text-align: center;
  border: 1px solid var(--stroke);
  border-radius: 16px;
  background: var(--panel);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
#gear-num {
  font: 700 clamp(26px, 4.4vmin, 42px)/1 var(--font);
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  text-shadow: 0 0 24px color-mix(in srgb, var(--accent) 70%, transparent);
}
#gear-mode {
  margin-top: 4px;
  font: 600 clamp(7px, 1.1vmin, 9px)/1 var(--mono);
  letter-spacing: .2em;
  color: var(--text-dim);
}

/* ------------------------------------------------------- telemetri sütunları */

/* DOM sırası göstergeler → sol → sağ; görsel sıra sol | göstergeler | sağ */
#telemetry-left { order: -1; }
#gauges { order: 0; }
#telemetry-right { order: 1; }

#telemetry-left, #telemetry-right {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  width: clamp(140px, 16vw, 200px);
  max-height: 100%;
  overflow: hidden;
}

.tcard {
  padding: clamp(9px, 1.4vmin, 14px);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  background: var(--panel);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: border-color .2s, box-shadow .2s;
}
.tcard-h {
  font: 600 clamp(8px, 1.2vmin, 9.5px)/1 var(--mono);
  letter-spacing: .18em;
  color: var(--text-dim);
  margin-bottom: clamp(5px, 1vmin, 10px);
}
.tcard-v {
  font: 300 clamp(22px, 3.6vmin, 34px)/1 var(--font);
  font-variant-numeric: tabular-nums;
}
.tcard-v.small { font-size: clamp(18px, 2.6vmin, 24px); }
.tcard-v small { font-size: .42em; color: var(--text-dim); margin-left: 4px; }
.tcard-f {
  margin-top: clamp(4px, .9vmin, 8px);
  font: 600 clamp(8.5px, 1.2vmin, 10px)/1.4 var(--mono);
  letter-spacing: .1em;
  color: var(--text-dim);
}
.tcard-f.best { color: var(--accent); opacity: .8; }

#card-drag.ready { border-color: var(--good); box-shadow: 0 0 34px -14px var(--good); }
#card-drag.ready #drag-state { color: var(--good); }
#card-drag.running { border-color: var(--accent); box-shadow: 0 0 34px -12px var(--accent); }
#card-drag.running #drag-state { color: var(--accent); }

/* çubuklar */
.bar {
  height: 8px;
  border-radius: 4px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}
.bar b {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--accent), var(--redline));
  transition: width .06s linear;
}
.bar.boost b { background: linear-gradient(90deg, var(--accent-2), #7a2eff); }

/* G-meter */
#g-pad {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-height: 118px;
  margin: 0 auto;
  border-radius: 50%;
  border: 1px solid var(--stroke);
  background: radial-gradient(circle, rgba(255,255,255,.04), transparent 70%);
}
.g-cross-h, .g-cross-v { position: absolute; background: rgba(255,255,255,.10); }
.g-cross-h { left: 8%; right: 8%; top: 50%; height: 1px; }
.g-cross-v { top: 8%; bottom: 8%; left: 50%; width: 1px; }
.g-ring { position: absolute; inset: 26%; border-radius: 50%; border: 1px dashed rgba(255,255,255,.12); }
#g-ball {
  position: absolute;
  left: 50%; top: 50%;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 18px var(--accent);
  transition: transform .05s linear;
}

/* --------------------------------------------------------------- alt çubuk */

#bottombar {
  flex: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
}

#bottom-left {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#pedal-wrap { flex: none; display: flex; align-items: flex-end; gap: 10px; }

#pedal {
  position: relative;
  width: clamp(66px, 7vw, 92px);
  height: clamp(96px, 20vmin, 168px);
  border-radius: 20px;
  border: 1px solid var(--stroke);
  background: var(--panel);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
  cursor: pointer;
  touch-action: none;
  transition: border-color .15s, opacity .2s;
  opacity: .55;
}
#pedal.live { opacity: 1; }
#pedal.pressed { border-color: var(--accent); }
#pedal.auto { border-color: var(--good); box-shadow: 0 0 26px -10px var(--good); }
#pedal.auto #pedal-label::after { content: ' ⟲'; }

#pedal-fill {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 0%;
  background: linear-gradient(0deg, var(--accent), color-mix(in srgb, var(--accent) 20%, transparent));
  transition: height .05s linear;
}
#pedal-label {
  position: absolute;
  inset: auto 0 10px;
  text-align: center;
  font: 700 clamp(9px, 1.3vmin, 11px)/1 var(--mono);
  letter-spacing: .2em;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,.9);
}

.brake-btn {
  width: clamp(54px, 5.6vw, 74px);
  height: clamp(96px, 20vmin, 168px);
  border-radius: 20px;
  border: 1px solid rgba(255,34,68,.35);
  background: rgba(30,6,10,.6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #ff5a72;
  font: 700 clamp(9px, 1.3vmin, 11px)/1 var(--mono);
  letter-spacing: .16em;
  cursor: pointer;
  touch-action: none;
}
.brake-btn.pressed { background: rgba(255,34,68,.28); color: #fff; }

/* ===========================================================================
   Uyarlamalar — artık yalnızca ÖNCELİK kararları, çakışma önleme değil
   =========================================================================== */

/* Dar veya alçak: sağ sütun ilk feda edilen */
@media (max-width: 1150px), (max-height: 720px) {
  #telemetry-right { display: none; }
}

/* Daha dar: G-meter kartı da gider, drag sayacı kalır */
@media (max-width: 900px), (max-height: 600px) {
  #card-g { display: none; }
  #telemetry-left { width: clamp(120px, 22vw, 160px); }
}

/* Çok dar: sol sütun da gizlenir, gösterge tam ortada kalır */
@media (max-width: 620px) {
  #telemetry-left { display: none; }
  #bottombar { flex-direction: column; align-items: stretch; gap: 10px; }
  #pedal-wrap { justify-content: center; }
  #pedal { width: 100%; max-width: 220px; height: clamp(84px, 14vh, 120px); }
  .brake-btn { height: clamp(84px, 14vh, 120px); }
  #clock { display: none; }
  #pack-name { max-width: 26vw; font-size: 11px; letter-spacing: .1em; }

  /* Üst çubuk dar ekranda taşıyordu: test çipi ikona iner,
     sürücü/seviye çipi kırpılır. */
  #topbar { gap: 6px; }
  #test-chip-label { display: none; }
  #test-chip { padding: 0 10px; }
  #level-chip { max-width: 36vw; padding: 0 10px; min-width: 0; }
  #level-text {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Alçak yatay ekran (yatay telefon / küçük araç ekranı) — kompakt mod.
   `body` öneki sonradan yüklenen game.css kurallarını yenmek için. */
@media (max-height: 520px) {
  body #cockpit { gap: 6px; padding: 8px; }
  body #topbar { gap: 8px; }
  body .icon-btn { min-width: 44px; min-height: 44px; font-size: 16px; border-radius: 11px; }
  body .badge { height: 34px; padding: 0 11px; font-size: 10px; }
  body #level-chip { max-width: 34vw; overflow: hidden; }

  body #quick-bar { flex-wrap: nowrap; gap: 6px; }
  body .quick {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    min-height: 46px;
    padding: 5px 8px;
    border-radius: 12px;
    gap: 1px;
  }
  body .quick b { display: none; }          /* etiket yerine ikon + değer */
  body .quick i { font-size: 15px; }
  body .quick small { font-size: 10.5px; }

  body #radio-bar { padding: 5px 8px; gap: 6px; border-radius: 12px; }
  body #radio-bar .icon-btn { min-width: 38px; min-height: 38px; font-size: 13px; border-radius: 9px; }
  body #radio-station { font-size: 11px; }
  body #radio-status,
  body #radio-vol,
  body #duck-indicator { display: none; }

  body #copilot { top: 50px; padding: 8px 16px; font-size: 12px; }
  body .sheet-body { max-height: 58dvh; padding: 4px 14px 16px; }
  body .sheet-head { padding: 10px 14px; }
  body .sheet-head h2 { font-size: 15px; }
  body .bigtile { min-height: 84px; padding: 10px 10px 10px 14px; }
  body .bigtile i { font-size: 20px; }
  body .bigtile b { font-size: 13px; }
  body .bigtile small { font-size: 10px; }
  body .bigtile-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
}

/* Dikey (portre) ekran: kutucuklar iki sıraya taşabilir, orta bölge esner */
@media (orientation: portrait) and (max-width: 900px) {
  body #quick-bar { gap: 8px; }
  body .quick { flex: 1 1 calc(50% - 4px); max-width: none; min-height: 62px; }
  body .quick small { font-size: 11.5px; }
}