/* PitchGavel (eski çalışma adı: Kadro Kur) — istemci stil sistemi v7, "Tasarım Dili" (design.md) uyarlaması.
   [KULLANICI İSTEĞİ] v6'nın yeşil-siyah zemin + elektrik sarısı/altın paleti beğenilmedi
   ("farklı bir renk paleti kullanabilir miyiz") — kullanıcının seçtiği yön: "gece maçı mavisi
   + amber". Zemin artık çok koyu LACİVERT-siyah (gerçek gece maçı floodlight'ının rengi —
   yeşile değil maviye çalıyor). Vurgu sarı/altından doygun AMBER/TURUNCUYA kaydı. Yeni bir
   ikincil ton eklendi: --ice (buz beyazına yakın, soğuk) — stadyum ışığı çizgileri/ambiyansı
   ve geri sayımın "kritikleşiyor ama henüz kırmızı değil" ara adımı için (--urgency ARTIK
   turuncu değil bu buz-beyazı tona işaret ediyor — accent zaten turuncu olduğu için ikisini
   aynı tonda tutmak "para" ile "aciliyet" anlamlarını karıştırırdı). Yeşil hâlâ SADECE "canlı/
   bağlı/olumlu durum" (--success), kırmızı hâlâ SADECE gerçek aciliyet/kart (--danger) —
   ikisi de bu turda değişmedi. --surprise (büyük-fark rozeti, camgöbeği) de değişmedi.
   ÖNEMLİ: minyatür maç sahası (.pitch-*, .mini-pitch) ve dizilim sahası (.lineup-pitch*,
   .pitch-lineup-*) [KULLANICI İSTEĞİ] kasıtlı olarak DOKUNULMADAN bırakıldı — sadece bağlı
   oldukları renk token'ları (--accent, --gold-*, --success vb.) yeni palete otomatik uyum
   sağlıyor, format/mekanik birebir aynı (bkz. design.md "Kısıt" notu). */

:root {
  /* Zemin — çok koyu LACİVERT-siyah (gece maçı floodlight'ı), yeşile değil maviye çalıyor. */
  --bg: #070c14;
  --bg-elevated: #0e1826;
  --card: #0e1826;
  --card-solid: #0e1826;
  --card-hover: #16233a;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --text: #f4f6fa;
  --text-muted: #93a0b8;
  --text-faint: #56617a;

  /* Doygun amber/turuncu — TEK ana vurgu: para/CTA/kazanma anı/"harika performans" katmanı.
     --gold-* isimleri v3-v4'ten kalan, minyatür saha/dizilim bloklarının referans verdiği
     takma adlar (bkz. yukarıdaki not) — bilerek --accent ile birebir aynı tutuluyor. */
  --accent: #ff9500;
  --accent-strong: #e08000;
  --accent-soft: rgba(255, 149, 0, 0.14);
  --accent-glow: rgba(255, 149, 0, 0.45);
  --accent-ink: #2b1400; /* amber zemin üstünde okunur koyu metin */
  --gold: #ff9500;
  --gold-strong: #e08000;
  --gold-soft: rgba(255, 149, 0, 0.15);
  --gold-glow: rgba(255, 149, 0, 0.45);

  /* Yeşil hâlâ vurgu değil — SADECE "canlı/bağlı/olumlu" durum semantiği. Saha dizilim
     ekranındaki "iyi performans" katmanı da bu tona düşüyor. Değişmedi. */
  --success: #22c55e;
  --success-soft: rgba(34, 197, 94, 0.15);
  --success-glow: rgba(34, 197, 94, 0.4);

  /* Kırmızı — SADECE canlı maçta aciliyet/kart anları için ayrılmış. Değişmedi. */
  --danger: #fb4155;
  --danger-soft: rgba(251, 65, 85, 0.15);
  --danger-glow: rgba(251, 65, 85, 0.45);

  /* [DEĞİŞTİ] "İkincil: buz beyazına yakın vurgular (stadyum ışığı çizgileri)" — eskiden
     turuncuydu ama --accent artık turuncu, ikisi aynı anda görününce ("teklif altın/amber
     rengiyle yükseliyor" + "geri sayım da turuncu") para ile aciliyet anlamı karışırdı. Artık
     buz beyazı bir ton: geri sayım kritikleşirken önce bu parlak/soğuk tona geçiyor ("gerilim
     yükseliyor" hissi), sonra --danger'a (kırmızı) kayıyor (bkz. .timer-wrap.urgent/.critical).
     Aynı ton, floodlight ambiyans dokusunda da (html/body arka planı) ikincil ışık olarak var. */
  --urgency: #eaf4ff;
  --urgency-soft: rgba(234, 244, 255, 0.14);
  --urgency-glow: rgba(234, 244, 255, 0.55);

  /* "Büyük fark" pozisyonu gibi özel/sürpriz anlar için ayrılmış üçüncü, çarpıcı renk (elektrik
     camgöbeği) — kırmızı ile paylaşılmıyor. Değişmedi. */
  --surprise: #22d3ee;
  --surprise-soft: rgba(34, 211, 238, 0.14);
  --surprise-glow: rgba(34, 211, 238, 0.45);

  --gk: #eab308;
  --df: #3b82f6;
  --mf: #22c55e;
  --fw: #f97316;
  --icon: #c084fc;

  /* Tipografi: kondanse/skor-tablosu başlıklar için Big Shoulders Display (Bebas/Anton/Oswald
     ailesinden, "her yerde görülen poster fontu" hissi vermeyen bir seçenek — bkz. design.md
     "Tipografi"), gövde + mono ikisi de IBM Plex ailesinden — Inter YOK, "tek bir terminal
     sistemi" hissi için bilinçli eşleştirme. */
  --font-display: 'Big Shoulders Display', 'Archivo Black', 'Arial Narrow', sans-serif;
  --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace;

  --radius-sm: 6px;
  --radius: 9px;
  --radius-lg: 12px;
  --shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 24px 60px -16px rgba(0, 0, 0, 0.65);
  --ease: cubic-bezier(0.22, 0.8, 0.34, 1);

  /* Küçük "fiyat etiketi" kesik köşesi — artık sadece rozet/etiket ölçeğindeki elemanlarda
     (pos-badge, formation-badge, tab, status-pill) kullanılıyor; panel/buton gibi büyük
     yüzeyler bilinçli olarak sade dikdörtgen bırakıldı (bkz. tasarım notu yukarıda). */
  --tag-cut: 6px;
}

* { box-sizing: border-box; }

/* [design.md "İkonografi / Doku"] Soyut gradyan lekesi yerine stadyum floodlight dokusu: çok
   hafif diyagonal çizgi deseni (biçilmiş çim hissi, neredeyse görünmez) + iki ambiyans ışığı
   (üst-sol amber spot, üst-sağ buz beyazı floodlight huzmesi — --urgency ile aynı ton) —
   hepsi düşük kontrast, sabit. */
html, body {
  margin: 0;
  padding: 0;
  /* Lobi dekoratif kartları (bkz. .lobby-decor-card) içerik sütununun dışına taşıyor — orta
     genişliklerde (880-1200px) bu bazen viewport kenarına çok yaklaşabiliyor; sayfa genelinde
     yatay kaydırma çubuğu hiç çıkmasın diye savunmacı bir taban. */
  overflow-x: hidden;
  background:
    repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.014) 0px, rgba(255, 255, 255, 0.014) 2px, transparent 2px, transparent 46px),
    radial-gradient(1000px 560px at 14% -10%, rgba(255, 149, 0, 0.06) 0%, transparent 55%),
    radial-gradient(1000px 620px at 86% -6%, rgba(234, 244, 255, 0.05) 0%, transparent 55%),
    var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

button, input, select { font-family: inherit; }
::selection { background: var(--accent-glow); color: var(--accent-ink); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  /* [DÜZELTİLDİ — BUG, KULLANICI GERİ BİLDİRİMİ] "Çark dönmüyor, direkt sonuç çıkıyor" — kök
     neden burasıydı: bu genel kural .wheel-disk'in JS'in inline verdiği dönüş transition'ını da
     (bkz. views.js WHEEL_SPIN_DURATION_MS) 0.001ms'ye indirip anlık sıçramaya çeviriyordu, ve bu
     tarayıcı/OS ayarı (prefers-reduced-motion) sanıldığından yaygın açık çıkabiliyor. Çarkın
     dönüşü dekoratif değil — sonucun NE ZAMAN açığa çıkacağı da buna göre ayarlı (bkz.
     WHEEL_REVEAL_DELAY_MS), bu yüzden .wheel-disk kuraldan muaf tutuluyor; nabız/sıçrama gibi
     gerçekten dekoratif animasyonlar (.wheel-stage::before, .wheel-pointer.landed) kısıtlı
     kalmaya devam ediyor. */
  *:not(.wheel-disk), *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ---------- Topbar ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 26px;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  background: rgba(9, 10, 15, 0.92);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 20;
}
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: 21px; letter-spacing: 0.4px; text-transform: uppercase; }
/* [KULLANICI İSTEĞİ] Gerçek logo/icon eklendi (bkz. index.html, /assets/icon.png) — eski
   ⚽ emoji rozeti (brand-spin ile sallanan) bir yer tutucuydu, gerçek marka geldiği için
   kaldırıldı; marka artık sabit duran gerçek bir logo, emoji gibi oynatılmıyor. */
.brand-icon { width: 30px; height: 30px; border-radius: 8px; display: block; box-shadow: 0 4px 14px -2px var(--accent-glow); }
.topbar-status {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); font-weight: 500;
  padding: 6px 12px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm);
  white-space: nowrap;
}
.topbar-right { display: flex; align-items: center; gap: 10px; }
/* [KULLANICI İSTEĞİ] "Bir sayfaya oyundaki bütün oyuncuların ratingleri yazabilir" — her
   ekrandan erişilebilen sabit bir üst bar linki (bkz. index.html #playersNavBtn, app.js). */
.topbar-link {
  font-size: 12px; font-weight: 700; color: var(--text-muted); background: none;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 7px 12px;
  cursor: pointer; transition: all 0.15s var(--ease); white-space: nowrap;
}
.topbar-link:hover { border-color: var(--accent); color: var(--accent); }
.topbar-link.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

/* ---------- Layout ---------- */
.app {
  max-width: 1120px;
  margin: 0 auto;
  padding: 26px 20px 40px;
}
.view { display: flex; flex-direction: column; gap: 20px; animation: view-in 0.42s var(--ease); }
.center-col {
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.lobby-card { padding: 18px 22px; }

@keyframes view-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pop-in { from { opacity: 0; transform: scale(0.96) translateY(6px); } to { opacity: 1; transform: scale(1) translateY(0); } }

/* "Kayıt sayfası" — düz dikdörtgen panel, üstte ince bir amber şerit (ledger/kayıt defteri
   hissi) — v3'teki köşe-kesik broadcast etiketinin yerine geçti. */
.panel {
  position: relative;
  background: var(--card-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  box-shadow: var(--shadow);
  animation: pop-in 0.4s var(--ease);
  overflow: hidden;
}
.panel::before {
  content: ''; position: absolute; left: 0; top: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), transparent 75%);
}
.panel h2 { margin: 0 0 12px; font-size: 20px; }
.panel h1, .panel h3 {
  margin: 0 0 12px; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted);
  letter-spacing: 1.6px; font-weight: 600; text-transform: uppercase;
}
.panel h1::before, .panel h3::before { content: '▎'; color: var(--accent); margin-right: 6px; }
/* [KULLANICI İSTEĞİ] "Draft sırasında ekranda çok fazla gösterilen şey oluyor, kalabalık oluyor
   — isteğe bağlı açılıp kapanabilse güzel olur." — bkz. views.js renderDraft "Kadrolar" paneli
   (artık <details>/<summary>) — .panel h3 ile aynı kondanse/uppercase görünümü paylaşıyor. */
.panel > summary { cursor: pointer; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted);
  letter-spacing: 1.6px; font-weight: 600; text-transform: uppercase; list-style: revert; }
.panel > summary::marker { color: var(--accent); }

/* ---------- Lobby hero ---------- */
/* [KULLANICI İSTEĞİ] "Yukarıda kalmış, ortala" — sayfa `.app`in üst dolgusuna yapışıp kalıyordu,
   altında boş yükseklik varken içerik dikey olarak ortalanmıyordu. Topbar + `.app` dolgusu için
   kaba bir pay düşülüp geri kalan yükseklikte dikey ortalanıyor (içerik bundan uzun olursa
   `min-height` sorun çıkarmaz, sadece taşıp normal akışa döner). */
.lobby-shell { display: flex; flex-direction: column; justify-content: center; gap: 20px; min-height: calc(100vh - 130px); }
.lobby-hero { text-align: center; max-width: 640px; margin: 6px auto 0; animation: view-in 0.5s var(--ease); }
.lobby-hero-badge {
  display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 1.4px; color: var(--success); background: var(--success-soft); border: 1px solid var(--success);
  border-radius: 999px; padding: 6px 15px; margin-bottom: 14px;
}
.lobby-hero-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 8px var(--success-glow); animation: dot-pulse 1.6s ease-in-out infinite; }
.lobby-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(32px, 4.6vw, 50px); line-height: 1.04; margin: 0 0 12px; letter-spacing: 0.2px; text-transform: uppercase; }
.lobby-title span { color: var(--accent); }
.lobby-title.compact { font-size: 22px; margin: 0; }
.lobby-sub { color: var(--text-muted); font-size: 14.5px; line-height: 1.55; margin: 0; max-width: 480px; margin-inline: auto; }

/* [KULLANICI İSTEĞİ, KARARLAŞTIRILDI] "Lobi ekranı çok çok çok kötü" — önceki sürüm (solda metin/
   sağda dar kart sütunu) hem "01/02" numaralandırmayı bir SIRA değilmiş gibi kullanıyordu (Oda
   Kur/Odaya Katıl birbirini takip eden adımlar değil, birbirini DIŞLAYAN iki seçenek — sayı
   koymak yanlış bir sıra hissi veriyordu), hem de geniş ekranda dar sağ sütun bittiği yerde
   büyük bir boşluk bırakıyordu. Artık TEK bir ortalanmış, geniş (900px) sütun: başlık → İKİ
   BÜYÜK aksiyon kartı (sayı yerine markanın kendi motifi — 🔨 Oda Kur/🎫 Odaya Katıl, isim
   "PitchGavel"deki çekiçle doğrudan bağlantılı) tam genişlikte yan yana → özellik şeridi tam
   genişlikte 4'lü. Dekoratif kartlar artık metnin ÜSTÜNE binip görünmez bir "hayalet" gibi
   durmuyor, içerik sütununun DIŞINA (sol/sağ kenarlara) taşıp gerçekten görünür bir çerçeve
   oluşturuyor.
*/
.lobby-hero-wide { position: relative; max-width: 900px; margin: 6px auto 0; text-align: center; animation: view-in 0.5s var(--ease); }
.lobby-hero-content { position: relative; z-index: 1; }

/* Hero'nun ne sunduğunu özetleyen kısa özellik şeridi — artık tam genişlikte, 4'e kadar yan yana. */
.lobby-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-top: 28px; }
.lobby-feature {
  display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 11px 13px;
  background: var(--card-solid); border: 1px solid var(--border); border-radius: var(--radius-sm);
  transition: border-color 0.15s var(--ease);
}
.lobby-feature:hover { border-color: var(--border-strong); }
.lobby-feature-code {
  flex-shrink: 0; width: 26px; height: 20px; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 800; color: var(--accent-ink);
  background: var(--accent);
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}
.lobby-feature-title { font-weight: 700; font-size: 12.5px; }
.lobby-feature-desc { font-size: 11px; color: var(--text-faint); line-height: 1.35; margin-top: 1px; }

/* Arka planda gerçek player-card bileşeniyle (aynı helpers.js fonksiyonu) kurulan, döndürülmüş
   iki dekoratif kart — sayfanın "trading card" diliyle atmosfer kuruyor. Artık içerik sütununun
   DIŞINA taşıyor (metnin üstüne binip okunurluğu bozmuyor) ve gerçekten görülebilir bir opaklıkta
   (eskiden 0.14 — neredeyse görünmez bir "hayalet" gibiydi). Tamamen etkileşimsiz.
*/
.lobby-decor { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: visible; }
/* [DÜZELTİLDİ — BUG] `.player-card { position: relative; }` (dosyada daha SONRA tanımlı, bkz.
   aşağıdaki "Oyuncu Kartı" bölümü) AYNI özgüllükte (tek sınıf) olduğu için `.lobby-decor-card`'ın
   `position:absolute`'unu eziyordu — kartlar top/right/left/bottom'a göre değil normal akışta
   konumlanıp beklenenden ~600px farklı bir yere düşüyordu. `.lobby-decor` soyundan gelen seçici
   (iki sınıf) özgüllüğü artırıp kalıcı olarak kazanıyor.
*/
.lobby-decor .lobby-decor-card { position: absolute; width: 172px; opacity: 0.32; filter: saturate(0.9); animation: none; }
.lobby-decor .lobby-decor-card.a { top: 96px; right: -128px; transform: rotate(11deg); }
.lobby-decor .lobby-decor-card.b { bottom: -6px; left: -132px; transform: rotate(-9deg); }

.lobby-mode-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 26px; }
/* Ana sayfadaki iki büyük karar kartı (Oda Kur/Odaya Katıl) — Nasıl Oynanır sayfasındaki daha
   kompakt 3'lü mod listesiyle AYNI temel bileşeni (.lobby-mode-btn) paylaşıyor, sadece burada
   daha iri: bu ekranın TEK gerçek kararı olduğu için görsel ağırlığı hak ediyor. */
.lobby-mode-btn.big .lobby-mode-num { width: 88px; font-size: 34px; }
.lobby-mode-btn.big .lobby-mode-body { padding: 24px 26px; gap: 8px; }
.lobby-mode-btn.big .lobby-mode-label { font-size: 21px; }
.lobby-mode-btn.big .lobby-mode-desc { font-size: 13px; }
/* Bilet-kütüğü kartı: sol tarafta biletin numaralı koçanı (kesik çizgiyle ayrılmış), sağda
   başlık+açıklama — "sol kenarlık vurgu" klişesi yerine oyunun kendi biletleme diline oturan
   bir ayraç kullanıyor. */
.lobby-mode-btn {
  position: relative;
  display: flex; align-items: stretch; gap: 0;
  text-align: left;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--card-solid);
  color: var(--text);
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.16s var(--ease), border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.lobby-mode-num {
  display: flex; align-items: center; justify-content: center;
  width: 56px; flex-shrink: 0;
  font-family: var(--font-display); font-weight: 800; font-size: 24px; color: var(--accent);
  background: repeating-linear-gradient(180deg, var(--accent-soft) 0 9px, transparent 9px 18px);
  border-right: 1px dashed rgba(255, 149, 0, 0.4);
  transition: background 0.16s var(--ease);
}
.lobby-mode-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.lobby-mode-label-row { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 8px; }
.lobby-mode-label { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: 0.3px; text-transform: uppercase; }
.lobby-mode-arrow {
  font-size: 15px; color: var(--text-faint); opacity: 0; transform: translateX(-4px);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), color 0.18s var(--ease);
}
.lobby-mode-desc { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
.lobby-mode-btn:hover {
  border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow-lg);
}
.lobby-mode-btn:hover .lobby-mode-arrow { opacity: 1; transform: translateX(0); color: var(--accent); }
.lobby-mode-btn.selected {
  border-color: var(--accent); background: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--accent) inset;
}

.lobby-form { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); animation: pop-in 0.3s var(--ease); }
.lobby-back {
  display: block; margin: 8px auto 0; background: none; border: none;
  color: var(--text-faint); font-size: 12.5px; cursor: pointer; font-weight: 700;
}
.lobby-back:hover { color: var(--text-muted); }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.field label { font-size: 11.5px; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; }
.field input, .field select {
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  color: var(--text);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  outline: none;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.field input:focus, .field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  box-shadow: 0 6px 16px -6px var(--accent-glow);
  transition: transform 0.12s var(--ease), filter 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.btn:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 10px 20px -6px var(--accent-glow); }
.btn:active { transform: scale(0.97) translateY(0); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; filter: none; box-shadow: none; transform: none; }
.btn.secondary { background: var(--bg-elevated); border-color: var(--border-strong); color: var(--text); box-shadow: none; }
.btn.secondary:hover { border-color: var(--accent); box-shadow: none; }
.btn.danger { background: var(--danger); color: #2a0a0a; box-shadow: 0 6px 16px -6px var(--danger-glow); }
.btn.block { width: 100%; }
.btn.small { padding: 8px 16px; font-size: 11.5px; }

.tabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.tab {
  padding: 9px 18px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--bg-elevated); color: var(--text-muted); cursor: pointer; font-size: 12.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
  transition: all 0.15s var(--ease);
}
.tab:hover { border-color: var(--accent); color: var(--text); }
.tab.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }

/* ---------- Bekleme Odası v2 — "Yayın Kontrol Odası" ---------- */
/* [KULLANICI İSTEĞİ] "Lobi ekranı çok kötü, çok basit ve yapay duruyor" — v1'deki ortalanmış
   LED kod bloğu + tam genişlikte turuncu bant + emoji rozetler kaldırıldı. Yeni kompozisyon
   asimetrik: solda 8 satırlık "kadro kağıdı" (odanın kontenjanı hep görünür, boş satırlar
   sessiz), sağda kapı kodu/davet ve hazırlık paneli. Turuncu artık büyük yüzeylerde değil,
   sadece kod + CTA + kaptan işareti gibi az sayıda noktada. design.md: "simetrik, ortalanmış
   kart düzenlerinden kaçın", "jenerik outline/emoji ikon setlerinden kaçın". */
.wr { display: flex; flex-direction: column; gap: 18px; }

.wr-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  border-bottom: 1px solid var(--border); padding-bottom: 16px;
}
.wr-head-left { display: flex; flex-direction: column; gap: 7px; }
.wr-live {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 2.4px;
  color: var(--success); text-transform: uppercase;
}
.wr-live::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--success);
  box-shadow: 0 0 10px var(--success-glow); animation: dot-pulse 1.6s ease-in-out infinite;
}
.wr-title {
  margin: 0; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(30px, 4.4vw, 44px); line-height: 1; letter-spacing: 0.4px; text-transform: uppercase;
}
.wr-title-sub { font-size: 13px; color: var(--text-muted); }

/* Oda ayarları: emoji rozet yerine yayın grafiklerindeki sessiz veri sütunları. */
.wr-meta { display: flex; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.wr-meta > div { padding: 0 18px; border-left: 1px solid var(--border); }
.wr-meta > div:last-child { padding-right: 0; }
.wr-meta-k { font-size: 9.5px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--text-faint); }
.wr-meta-v { margin-top: 4px; font-size: 12.5px; color: var(--text); font-weight: 600; }

.wr-grid { display: grid; grid-template-columns: 1fr 372px; gap: 18px; align-items: start; }
.wr-aside { display: flex; flex-direction: column; gap: 14px; }
.wr-card {
  background: var(--card-solid); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
.wr-card.pad { padding: 20px; }

/* Kadro kağıdı — dolu/boş ayrımı çerçeve/opaklıkla değil, tipografi ağırlığıyla veriliyor. */
.wr-sheet { overflow: hidden; }
.wr-sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid var(--border);
}
.wr-sheet-title {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 800; font-size: 16px; letter-spacing: 1.4px; text-transform: uppercase;
}
.wr-sheet-title::before { content: ''; width: 3px; height: 15px; background: var(--accent); display: block; }
.wr-sheet-count { display: flex; align-items: baseline; gap: 6px; font-family: var(--font-mono); }
.wr-sheet-count b { font-size: 18px; font-weight: 700; color: var(--text); }
.wr-sheet-count span { font-size: 11px; color: var(--text-faint); }

.wr-row {
  display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 16px;
  padding: 13px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.wr-row:last-child { border-bottom: none; }
.wr-row-num {
  font-family: var(--font-display); font-weight: 800; font-size: 22px; line-height: 1;
  text-align: center; color: #232f45;
}
.wr-row.taken .wr-row-num { color: var(--accent); }
.wr-row-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.wr-avatar {
  width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 15px;
  background: transparent; color: var(--text-faint); border: 1px solid var(--border);
}
.wr-row.taken .wr-avatar { background: #16233a; color: var(--text); border-color: var(--border-strong); }
.wr-row.me .wr-avatar { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.wr-row-name {
  font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--text-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wr-row.taken .wr-row-name { color: var(--text); }
.wr-row-sub { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); margin-top: 2px; }
.wr-row-tag {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--text-faint);
  border: 1px solid rgba(255, 255, 255, 0.07); padding: 4px 10px; border-radius: 4px; white-space: nowrap;
}
.wr-row.taken .wr-row-tag { color: var(--text-muted); border-color: rgba(255, 255, 255, 0.14); }
.wr-row.ready .wr-row-tag { color: var(--success); border-color: rgba(34, 197, 94, 0.5); }
.wr-row.offline .wr-row-tag { color: var(--danger); border-color: rgba(251, 65, 85, 0.5); }

/* Kapı kodu — v1'in nabız atan LED tabelası yerine sabit, okunur bir kod alanı; ekranın
   odağı olmak yerine "davet et" işini yapan bir araç. */
.wr-label { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--text-faint); }
.wr-code-box {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px;
  background: #05070c; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; padding: 14px 16px;
}
.wr-code { font-family: var(--font-mono); font-weight: 700; font-size: clamp(24px, 6vw, 30px); letter-spacing: 7px; color: var(--accent); }
.wr-code-copy {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background: var(--card-solid); color: var(--text-muted);
  font-family: var(--font-mono); font-size: 13px; cursor: pointer; transition: all 0.15s var(--ease);
}
.wr-code-copy:hover { border-color: var(--accent); color: var(--accent); }
.wr-invite-row { display: flex; gap: 8px; margin-top: 12px; }
.wr-invite-row .btn { padding: 10px 14px; font-size: 11.5px; }
.wr-invite-row .btn:first-child { flex: 1; }
.wr-hint { font-size: 11.5px; color: var(--text-faint); line-height: 1.5; margin-top: 12px; }

.wr-ready-row {
  display: flex; align-items: baseline; justify-content: space-between;
  font-family: var(--font-display); text-transform: uppercase;
}
.wr-ready-row span:first-child { font-size: 15px; font-weight: 700; letter-spacing: 1px; color: var(--text-muted); }
.wr-ready-row b { font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: var(--text); }
.wr-ready-row b i { font-style: normal; color: var(--text-faint); }
.wr-bar { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.08); overflow: hidden; margin-top: 10px; }
.wr-bar > div { height: 100%; background: var(--accent); transition: width 0.25s var(--ease); }

/* Hazırım / Draftı Başlat — "bilet koçanı" butonu yerine düz, iri, tek işi olan bir CTA. */
.wr-cta {
  width: 100%; margin-top: 14px; padding: 14px; border-radius: 8px; cursor: pointer;
  font-family: var(--font-display); font-weight: 800; font-size: 19px; letter-spacing: 1.4px; text-transform: uppercase;
  border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent);
  transition: background 0.15s var(--ease), color 0.15s var(--ease), filter 0.15s var(--ease);
}
.wr-cta:hover { background: var(--accent); color: var(--accent-ink); }
.wr-cta.on { background: var(--accent); color: var(--accent-ink); }
.wr-cta.on:hover { filter: brightness(1.06); }
.wr-cta.start { font-size: 21px; padding: 16px; border-color: transparent; background: var(--accent); color: var(--accent-ink); box-shadow: 0 12px 28px -8px var(--accent-glow); }
.wr-cta.start:hover { filter: brightness(1.08); }
.wr-cta.wait { border-color: rgba(255, 255, 255, 0.1); background: transparent; color: var(--text-faint); cursor: not-allowed; }
.wr-cta.wait:hover { background: transparent; color: var(--text-faint); }

/* ---------- Mobil (≤760px) ---------- */
/* [KULLANICI İSTEĞİ] İki kolon tek kolona düşüyor; kapı kodu/davet kartı ÜSTTE kalıyor (odaya
   adam çağırmak mobildeki asıl iş), kadro kağıdı altında. Hazırlık paneli ekranın altına
   sabitlenen bir şeride taşınıyor — dokunma hedefleri 46px'in altına düşmüyor. */
@media (max-width: 760px) {
  .wr-grid { grid-template-columns: 1fr; }
  .wr-aside { display: contents; }
  .wr-aside .wr-invite { order: -1; }
  .wr-head { align-items: flex-start; }
  .wr-meta { flex-wrap: wrap; gap: 8px; }
  .wr-meta > div { padding: 0; border-left: none; border: 1px solid var(--border); border-radius: 4px; padding: 6px 10px; }
  .wr-meta-k { display: none; }
  .wr-row { grid-template-columns: 24px 1fr auto; gap: 11px; padding: 11px 14px; }
  .wr-row-num { font-size: 19px; }
  .wr-avatar { width: 30px; height: 30px; font-size: 13px; }
  .wr-row-name { font-size: 15px; }
  .wr-code-copy { width: 44px; height: 44px; }
  .wr-invite-row { flex-direction: column; }
  .wr-invite-row .btn { min-height: 46px; }

  .wr-ready {
    position: sticky; bottom: 0; z-index: 10;
    margin: 0 -20px -40px; border-radius: 0;
    border-left: none; border-right: none; border-bottom: none;
    background: rgba(7, 12, 20, 0.94); backdrop-filter: blur(8px);
    padding: 14px 16px calc(18px + env(safe-area-inset-bottom));
    box-shadow: 0 -12px 28px -8px rgba(0, 0, 0, 0.6);
  }
  .wr-ready .wr-label { display: none; }
  .wr-cta { min-height: 54px; font-size: 20px; }
}


@keyframes dot-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* ---------- Draft ---------- */
.draft-header {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px;
}
.formation-badge {
  background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent);
  padding: 7px 16px; font-family: var(--font-mono); font-weight: 600; font-size: 12.5px; letter-spacing: 0.3px;
  clip-path: polygon(var(--tag-cut) 0, 100% 0, calc(100% - var(--tag-cut)) 100%, 0 100%);
}

.budget-row { display: flex; gap: 14px; flex-wrap: wrap; }
.budget-card {
  flex: 1; min-width: 220px; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
  transition: border-color 0.2s var(--ease);
}
.budget-card:hover { border-color: var(--border-strong); }
.budget-card .name { font-weight: 700; font-size: 13.5px; }
.budget-card .budget { font-family: var(--font-display); color: var(--accent); font-weight: 700; font-size: 26px; margin-top: 4px; letter-spacing: 0.3px; }
.budget-card .slots { color: var(--text-muted); font-size: 12px; margin-top: 3px; }

.round-area { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.timer-wrap { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.timer-bar { width: 280px; height: 8px; background: var(--bg-elevated); overflow: hidden; border: 1px solid var(--border); border-radius: 999px; }
.timer-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--danger)); transition: width 0.2s linear, background 0.3s var(--ease); box-shadow: 0 0 12px var(--accent-glow); }
.timer-label {
  font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--text-muted);
  font-variant-numeric: tabular-nums; letter-spacing: 0.5px; transition: color 0.3s var(--ease);
}
/* [design.md "Hareket"] "Geri sayım son saniyelerde renk/hız değiştirerek gerçek bir aciliyet
   hissettirsin (pulse efekti)" — views.js tick() bu sınıfları kalan süreye göre ekliyor/
   kaldırıyor: >5sn nötr, 5-2sn turuncu (--urgency), <2sn kırmızı + nabız. */
.timer-wrap.urgent .timer-fill { background: linear-gradient(90deg, var(--urgency), var(--danger)); box-shadow: 0 0 14px var(--urgency-glow); }
.timer-wrap.urgent .timer-label { color: var(--urgency); }
.timer-wrap.critical .timer-fill { background: var(--danger); box-shadow: 0 0 16px var(--danger-glow); }
.timer-wrap.critical .timer-label { color: var(--danger); animation: timer-pulse 0.5s ease-in-out infinite; }
.timer-wrap.critical .timer-bar { animation: timer-pulse 0.5s ease-in-out infinite; }
@keyframes timer-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

.warning-banner {
  text-align: center; padding: 14px; font-weight: 700; font-size: 13.5px; border-radius: var(--radius-sm);
  background: var(--danger-soft); border: 1px solid var(--danger); color: var(--danger);
  animation: pop-in 0.3s var(--ease);
}

/* [design.md "Renk Paleti"] "Büyük fark" pozisyonu artık kırmızıyı (gerçek aciliyet) paylaşmıyor
   — kendine ait üçüncü, çarpıcı renk (--surprise, elektrik camgöbeği). */
.big-gap-badge {
  background: var(--surprise-soft); color: var(--surprise); border: 1px solid var(--surprise);
  padding: 7px 16px; font-weight: 800; font-size: 11.5px; text-align: center; letter-spacing: 0.3px;
  box-shadow: 0 0 18px -4px var(--surprise-glow); animation: badge-shake 2.4s ease-in-out infinite;
  clip-path: polygon(var(--tag-cut) 0, 100% 0, calc(100% - var(--tag-cut)) 100%, 0 100%);
}
@keyframes badge-shake { 0%, 100% { transform: rotate(0); } 3% { transform: rotate(-2deg); } 6% { transform: rotate(2deg); } 9% { transform: rotate(0); } }

.reveal-row { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; }

.round-result { display: flex; flex-direction: column; align-items: center; width: 100%; animation: pop-in 0.35s var(--ease); }
.round-result h3 { margin-bottom: 14px; }

/* [KULLANICI İSTEĞİ] "Oyuncu alan kişi kaça aldığı daha güzel bir ekranda gözükebilir" —
   round çözülünce önce bu "makbuz" şeridi: alıcı + fiyat + oyuncu tek satırda, büyük ve net. */
/* [design.md "Hareket"] Round sonucu da bir "kazanan ilan edilme anı" — sade fade yerine aynı
   yayın-grafiği wipe geçişi (bkz. .winner-banner banner-wipe-in). */
.round-receipt {
  display: flex; align-items: center; gap: 14px; width: 100%; max-width: 460px;
  margin-bottom: 18px; padding: 14px 18px; border-radius: var(--radius);
  background: linear-gradient(120deg, var(--accent-soft), transparent 70%);
  border: 1px solid var(--accent);
  animation: banner-wipe-in 0.45s var(--ease);
}
.round-receipt-emoji { font-size: 26px; line-height: 1; flex-shrink: 0; }
.round-receipt-headline { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: 0.2px; }
.round-receipt-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.sold-wrap { position: relative; }
.sold-wrap::after {
  content: 'SATILDI';
  position: absolute; top: 42%; left: 50%;
  transform: translate(-50%, -50%) rotate(-11deg);
  font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: 2.5px;
  color: var(--danger); border: 3px solid var(--danger); border-radius: 4px;
  padding: 3px 16px; background: rgba(14, 15, 18, 0.55);
  pointer-events: none; z-index: 5; white-space: nowrap;
  opacity: 0; animation: stamp-hit 0.5s var(--ease) 0.2s forwards;
}
@keyframes stamp-hit {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(-11deg) scale(2.3); }
  55% { opacity: 1; transform: translate(-50%, -50%) rotate(-11deg) scale(0.9); }
  100% { opacity: 1; transform: translate(-50%, -50%) rotate(-11deg) scale(1); }
}

.ladder-rank-badge {
  position: absolute; top: -9px; right: -9px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--bg-elevated); border: 1px solid var(--border-strong); color: var(--text-muted);
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.player-card { position: relative; }

.bid-leaderboard { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 360px; }
/* [KULLANICI İSTEĞİ] Her satırın arkasında en yüksek teklife oranla dolan bir çubuk (--pct,
   bkz. views.js renderRoundResultPanel) — "kim kime ne kadar yaklaştı" tek bakışta okunsun. */
.bid-leaderboard-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 12px; background-color: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm);
  background-image: linear-gradient(90deg, var(--border-strong) var(--pct, 0%), transparent var(--pct, 0%));
  font-size: 12.5px;
  transition: background-image 0.3s var(--ease);
}
.bid-leaderboard-row.leading {
  border-color: var(--accent); background-color: var(--accent-soft); color: var(--accent); font-weight: 800;
  background-image: linear-gradient(90deg, rgba(255,149,0,0.28) var(--pct, 0%), transparent var(--pct, 0%));
}

/* "Trading card" — v3'ten değişmeden korunan oyuncu kartı sistemi (kullanıcı bunu eleştirmedi;
   sadece --pc/--accent/--gold-* token'ları üzerinden yeni palete uyum sağlıyor). */
.player-card {
  --pc: var(--mf);
  width: 236px;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--pc) 20%, var(--card-solid)) 0%, var(--card-solid) 55%),
    linear-gradient(180deg, var(--card-hover), var(--card-solid));
  border: 1px solid color-mix(in srgb, var(--pc) 45%, var(--border-strong));
  border-radius: var(--radius);
  padding: 18px;
  position: relative;
  text-align: center;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.06);
  animation: pop-in 0.35s var(--ease);
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
  overflow: hidden;
  isolation: isolate;
}
.player-card::before {
  content: ''; position: absolute; inset: -2px; z-index: -1; opacity: 0.5;
  background: conic-gradient(from 200deg at 50% 0%, var(--pc), transparent 40%);
  filter: blur(2px);
}
.player-card::after {
  content: ''; position: absolute; top: -60%; left: -60%; width: 60%; height: 220%;
  background: linear-gradient(75deg, transparent, rgba(255,255,255,0.32), transparent);
  transform: rotate(20deg); transition: left 0.7s var(--ease); pointer-events: none;
}
.player-card:hover::after { left: 130%; }
.player-card:hover { transform: translateY(-6px) scale(1.015); box-shadow: var(--shadow-lg), 0 0 30px -10px var(--pc); }
.player-card.main { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger), 0 0 40px -8px var(--danger-glow), var(--shadow); }
.player-card.backup { opacity: 0.82; }
.player-card .pos-badge {
  position: absolute; top: 13px; left: 13px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; padding: 4px 10px; color: #12140f;
  box-shadow: 0 2px 8px -2px rgba(0,0,0,0.5);
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
.player-card .rating {
  position: absolute; top: 8px; right: 10px;
  width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 20px; font-weight: 700; color: var(--accent);
  background: radial-gradient(circle at 35% 30%, rgba(255,149,0,0.22), transparent 70%);
  border: 2px solid var(--accent); border-radius: 50%;
  text-shadow: 0 0 14px var(--gold-glow);
  box-shadow: 0 0 16px -4px var(--gold-glow);
}
.player-card .icon-flag {
  position: absolute; bottom: 12px; right: 12px; font-size: 11px; font-weight: 800; letter-spacing: 0.4px;
  color: #2a1a05; background: linear-gradient(145deg, var(--icon), #9a5ce0); padding: 3px 8px 3px 6px;
  border-radius: 999px 4px 4px 999px; box-shadow: 0 2px 8px -2px rgba(209, 153, 255, 0.6);
}
/* [KULLANICI İSTEĞİ, KARARLAŞTIRILDI — HAZIRLIK ÇARKI] "🙈 Kör İlk Tur" perk'i — bkz. views.js
   blindFirstRoundActive. Kendi kendine seçilmiş bir zorluk, rakibe karşı gizli bir bilgi değil. */
.player-card.blurred-rating .rating { filter: blur(7px); user-select: none; }
.player-card .name { margin-top: 34px; font-weight: 800; font-size: 15.5px; }
.player-card .club { color: var(--text-muted); font-size: 12px; margin-top: 4px; }
.player-card .tag { margin-top: 12px; font-size: 10.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; }
.player-card:has(.tag):has(.icon-flag) { padding-bottom: 40px; }

.pos-GK { background: var(--gk); } .pos-DF { background: var(--df); } .pos-MF { background: var(--mf); } .pos-FW { background: var(--fw); }
.player-card:has(.pos-GK) { --pc: var(--gk); }
.player-card:has(.pos-DF) { --pc: var(--df); }
.player-card:has(.pos-MF) { --pc: var(--mf); }
.player-card:has(.pos-FW) { --pc: var(--fw); }

.bid-panel { display: flex; flex-direction: column; align-items: center; gap: 11px; width: 100%; max-width: 380px; }
.bid-current { font-size: 14px; color: var(--text-muted); text-align: center; }
/* [design.md "Tipografi"] Teklif rakamı ekranın odağı olmalı — kondanse skorbord fontuna
   geçti, sayarak yükselen animasyon countUpMoney ile besleniyor (bkz. views.js). */
.bid-current b { font-family: var(--font-display); color: var(--accent); font-size: 28px; font-weight: 800; text-shadow: 0 0 20px var(--gold-glow); }
.bid-form { display: flex; gap: 8px; width: 100%; }
.bid-form input { flex: 1; text-align: center; font-family: var(--font-mono); font-size: 19px; font-weight: 700; }
.bid-cap { font-size: 12px; color: var(--text-faint); text-align: center; }

/* ---------- Çark Modu v2 ---------- */
/* [KULLANICI İSTEĞİ, KARARLAŞTIRILDI] "Takımları çarktan çıkan sonuca göre kurma" — üçüncü
   draft modu. Gerçek bir dönen çark: conic-gradient dilimler (bkz. views.js wheelGeometry) +
   sabit üst pointer + sunucu sonucuna göre hesaplanan bir döndürme animasyonu (bkz.
   wheelRotationFor). Bilerek YUVARLAK — sayfanın geri kalanındaki köşeli/diagonal dile
   KASITLI bir kontrast: "özel an" hissi, gerçek bir çark gibi görünsün istendi.
   [KULLANICI İSTEĞİ] "Döndüğü belli olsun, daha güzel bir çark olsun" — v2'de: dönerken diskin
   etrafında nabız atan bir glow halkası (.wheel-stage.spinning), iniş anında pointer'da kısa bir
   "bounce" (.wheel-pointer.landed), ve daha büyük/gölgeli bir disk. */
.wheel-round { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }

.wheel-turn-banner {
  text-align: center; font-weight: 700; font-size: 14px; padding: 10px 18px;
  border-radius: var(--radius-sm); background: var(--bg-elevated); border: 1px solid var(--border-strong); color: var(--text-muted);
}
.wheel-turn-banner.mine { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

.wheel-stage { position: relative; width: 260px; height: 260px; margin: 6px 0; }
.wheel-stage::before {
  /* Dönerken görünen nabız atan glow halkası — "döndüğü belli olsun" isteğine karşılık gelen
     ana görsel ipucu, sonuç açığa çıkınca (reveal) kayboluyor. */
  content: ''; position: absolute; inset: -10px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 68%);
  transition: opacity 0.3s var(--ease);
  pointer-events: none;
}
.wheel-stage.spinning::before { opacity: 1; animation: wheel-glow-pulse 1.1s ease-in-out infinite; }
@keyframes wheel-glow-pulse {
  0%, 100% { transform: scale(0.94); opacity: 0.55; }
  50% { transform: scale(1.05); opacity: 1; }
}
.wheel-pointer {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%); z-index: 3;
  width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent;
  border-top: 22px solid var(--text); filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
  transform-origin: 50% 100%; /* tepe noktasından (çarkın kenarına değen uç) sallansın */
}
.wheel-pointer.landed { animation: wheel-pointer-bounce 0.5s var(--ease); }
@keyframes wheel-pointer-bounce {
  0% { transform: translateX(-50%) rotate(0deg); }
  30% { transform: translateX(-50%) rotate(-14deg); }
  55% { transform: translateX(-50%) rotate(8deg); }
  75% { transform: translateX(-50%) rotate(-4deg); }
  100% { transform: translateX(-50%) rotate(0deg); }
}
.wheel-disk {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  border: 6px solid var(--bg-elevated); box-shadow: 0 0 0 2px var(--border-strong), var(--shadow-lg);
  will-change: transform;
}
.wheel-slice-label {
  /* Genişlik/font-size artık JS'ten inline geliyor (bkz. renderWheelRound — her dilimin kendi
     yay genişliğine göre hesaplanıyor); buradaki width sadece inline stil gelmezse diye bir
     güvenlik ağı. */
  position: absolute; top: 50%; left: 50%; width: 64px; margin-left: -32px; height: 1px;
  text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 11.5px;
  color: #12140f; text-shadow: 0 1px 3px rgba(255,255,255,0.55), 0 0 1px rgba(255,255,255,0.4);
  transform-origin: center top; line-height: 1.12; overflow-wrap: break-word; hyphens: auto;
}
.wheel-spin-btn {
  max-width: 300px; padding: 0; overflow: hidden; display: flex; align-items: stretch;
  box-shadow: 0 10px 24px -8px var(--accent-glow);
}
.wheel-spin-btn .wheel-spin-btn-icon {
  width: 52px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.18); border-right: 1px dashed rgba(255,255,255,0.35); font-size: 20px;
}
.wheel-spin-btn .wheel-spin-btn-label {
  flex: 1; display: flex; align-items: center; justify-content: center; padding: 14px 16px;
  font-family: var(--font-display); font-weight: 800; font-size: 16px; letter-spacing: 0.6px; text-transform: uppercase;
}
.wheel-reveal-pending {
  padding: 10px 18px; border-radius: var(--radius-sm); background: var(--bg-elevated);
  border: 1px dashed var(--border-strong); animation: wheel-reveal-dots 1.2s ease-in-out infinite;
}
@keyframes wheel-reveal-dots { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

.wheel-pick-wrap { width: 100%; max-width: 440px; }
.wheel-pick-scroll { max-height: 300px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius); }
/* [KULLANICI İSTEĞİ, KARARLAŞTIRILDI] "Kullanıcı karar vermek istemezse bilgisayar atasın" —
   seçim listesinin altındaki çıkış düğmesi (bkz. views.js autoPickButton). */
.wheel-autopick-btn { margin-top: 10px; }
.wheel-pick-list { display: flex; flex-direction: column; }
.wheel-pick-row {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px;
  background: var(--card-solid); border: none; border-bottom: 1px solid var(--border); color: var(--text);
  cursor: pointer; text-align: left; font-size: 12.5px; transition: background 0.12s var(--ease);
}
.wheel-pick-row:last-child { border-bottom: none; }
.wheel-pick-row:hover:not(:disabled) { background: var(--bg-elevated); }
.wheel-pick-row:disabled { opacity: 0.5; cursor: default; }
/* [KULLANICI İSTEĞİ, KARARLAŞTIRILDI — ÇARK MODU v2] "Rakipten istediğin oyuncuyu al" satırları
   normal seçim satırlarından net ayrışsın diye camgöbeği (--surprise) bir sol kenarlık. */
.wheel-pick-row.wheel-steal-row { border-left: 3px solid var(--surprise); }
.wheel-pick-row .pos-badge {
  position: static; font-family: var(--font-mono); font-size: 10px; font-weight: 700; padding: 3px 7px;
  border-radius: var(--radius-sm); color: #12140f; flex-shrink: 0; box-shadow: none;
}
.wheel-pick-rating { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--accent); width: 28px; flex-shrink: 0; }
.wheel-pick-name { font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wheel-pick-club { font-size: 11px; flex-shrink: 0; }

.event-log { display: flex; flex-direction: column; gap: 7px; max-height: 150px; overflow-y: auto; font-size: 13px; color: var(--text-muted); }
.event-log .row {
  padding: 8px 12px; background: var(--bg-elevated); border-radius: var(--radius-sm); border: 1px solid var(--border);
  animation: pop-in 0.3s var(--ease);
}

.squad-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 9px; margin-top: 10px; }
.squad-chip {
  display: flex; align-items: center; gap: 9px; background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 9px 11px; font-size: 12px;
  transition: border-color 0.15s var(--ease);
}
.squad-chip:hover { border-color: var(--border-strong); }
.squad-chip .badge {
  width: 30px; height: 21px; display:flex; align-items:center; justify-content:center;
  font-family: var(--font-mono); font-weight: 700; font-size: 10px; color:#12140f; flex-shrink:0;
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}
.squad-chip .info { display: flex; flex-direction: column; overflow: hidden; }
.squad-chip .info .n { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.squad-chip .info .r { font-family: var(--font-mono); color: var(--text-faint); }

/* ---------- Dizilim: formasyon/taktik seçiciler (saha DEĞİL — bkz. renderSlotAssignment,
   saha görselinin kendisi olan .lineup-pitch* ve .pitch-lineup-* aşağıda birebir korunuyor) ---------- */
.formation-pick { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.formation-option {
  padding: 11px 20px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  cursor: pointer; font-weight: 700; font-size: 13px; background: var(--bg-elevated); color: var(--text-muted);
  transition: all 0.15s var(--ease);
}
.formation-option:hover { border-color: var(--accent); color: var(--text); }
.formation-option.selected { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent) inset; }
.formation-option.disabled { opacity: 0.35; cursor: not-allowed; text-decoration: line-through; }

/* [KULLANICI İSTEĞİ] "Modlara bilgilendiriciler ekleyelim" — seçili hap-düğmenin açıklamasını
   hep görünür tutan tek satırlık ipucu (bkz. views.js pillToggle). SADECE lobi formundaki
   kompakt kullanım için — `.field` içinde olduğu için dizilim ekranındaki formasyon/taktik
   seçicileri etkilemiyor. */
.field .formation-pick { margin-bottom: 6px; }
.pill-hint { font-size: 11.5px; color: var(--text-faint); line-height: 1.4; min-height: 15px; }

/* [KULLANICI İSTEĞİ, KARARLAŞTIRILDI — ÇARK ÖZELLEŞTİRME] Oda kurma formundaki çark segmenti
   checklist'i (bkz. views.js wheelSegmentPicker) — .formation-option'ı ÇOKLU SEÇİM (checkbox
   gibi) olarak yeniden kullanıyor, tek eklenen: havuz başlıkları + biraz daha kompakt chip'ler
   (13 segmentlik bir liste tam-boy formasyon pilleri kadar geniş olamaz). */
.wheel-seg-group { margin-bottom: 8px; }
.wheel-seg-group-label { font-size: 11px; font-weight: 700; color: var(--text-faint); margin-bottom: 6px; }
.wheel-seg-group .formation-pick { margin-bottom: 4px; }
.wheel-seg-group .formation-option { padding: 7px 12px; font-size: 12px; }

.tactic-panel { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; padding: 14px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); }
.tactic-row .tactic-label { font-size: 11px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 8px; }
.tactic-row .formation-pick { margin-bottom: 0; }
.tactic-row .formation-option { padding: 8px 14px; font-size: 12.5px; }

.status-pill { font-size: 11.5px; padding: 5px 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; border-radius: 999px; }
.status-pill.done { background: var(--success-soft); color: var(--success); }
.status-pill.pending { background: var(--gold-soft); color: var(--gold); }

/* ============================================================================================
   AŞAĞIDAKİ İKİ BÖLÜM — dizilim sahası ve maç anlatımı minyatür sahası — [KULLANICI İSTEĞİ]
   gereği v3'ten DEĞİŞTİRİLMEDEN taşındı. Referans verdikleri --accent, --gold-*, --success,
   --danger token'ları yukarıda yeni palete güncellendiği için renkleri otomatik uyum sağlıyor;
   yapı/mekanik/animasyon birebir aynı.
   ============================================================================================ */

/* ---------- Lineup (saha) ---------- */
.lineup-pitch { width: 100%; max-width: 460px; margin: 0 auto; }
.lineup-pitch-field {
  position: relative; width: 100%; aspect-ratio: 2 / 3; border-radius: var(--radius);
  background:
    radial-gradient(120% 55% at 50% 94%, rgba(255,255,255,0.14) 0%, transparent 45%),
    radial-gradient(120% 55% at 50% 6%, rgba(255,255,255,0.10) 0%, transparent 45%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.06) 0 12.5%, rgba(0,0,0,0.07) 12.5% 25%),
    linear-gradient(200deg, #1e6440, #0b291c 75%);
  border: 3px solid rgba(255, 255, 255, 0.28);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.5), var(--shadow-lg);
}
.lineup-pitch-halfline { position: absolute; left: 4%; right: 4%; top: 50%; height: 2px; background: rgba(255,255,255,0.4); }
.lineup-pitch-circle {
  position: absolute; left: 50%; top: 50%; width: 24%; aspect-ratio: 1;
  border: 2px solid rgba(255,255,255,0.4); border-radius: 50%; transform: translate(-50%, -50%);
}
.lineup-pitch-box {
  position: absolute; left: 50%; width: 44%; height: 13%; border: 2px solid rgba(255,255,255,0.4);
  transform: translateX(-50%);
}
.lineup-pitch-box.top { top: 0; border-top: none; }
.lineup-pitch-box.bottom { bottom: 0; border-bottom: none; }

.pitch-lineup-slot {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 3px; z-index: 2;
}
.pitch-lineup-badge {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700; padding: 2px 8px; color: #12140f;
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}
.pitch-lineup-chip {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 84px; padding: 6px 8px; border-radius: 10px;
  background: linear-gradient(160deg, var(--card-hover), var(--card-solid));
  border: 2px solid var(--border-strong); box-shadow: var(--shadow);
  transition: border-color 0.15s var(--ease), transform 0.15s var(--ease);
}
.pitch-lineup-slot:hover .pitch-lineup-chip { border-color: var(--accent); transform: translateY(-2px); }
.pitch-lineup-slot.icon .pitch-lineup-chip { border-color: var(--icon); box-shadow: 0 0 16px -4px rgba(209, 153, 255, 0.6), var(--shadow); }
.pitch-lineup-rating { font-family: var(--font-mono); font-weight: 700; font-size: 13px; color: var(--accent); line-height: 1.3; }
.pitch-lineup-name {
  font-weight: 700; font-size: 10.5px; text-align: center; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 90px;
}
/* [DÜZELTİLDİ — BUG] Görünmez <select> artık chip'in TAMAMINI değil, sadece bu wrapper'ı
   (rating+isim) kaplıyor — swap okları wrapper'ın dışında olduğu için select'in tıklamayı
   yutması fiziksel olarak imkansız (bkz. views.js renderSlotAssignment, "select-wrap" notu). */
.pitch-lineup-select-wrap { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; }
.pitch-lineup-select-native { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }

/* [KULLANICI İSTEĞİ] "3 orta saha oyuncum var... x z y yapabilmeliyim" — aynı pozisyon
   tipindeki komşu slotlar arasında oyuncu takas oku (bkz. views.js renderSlotAssignment).
   Bilerek pozisyon SAHASININ (yukarıdaki .lineup-pitch-* ve .pitch-lineup-* bloğu) formatına
   dokunmuyor — sadece chip'in içine yeni bir satır ekliyor. Artık görünmez <select>'in dışında
   kaldığı için z-index'e bağımlı değil (bkz. yukarıdaki .pitch-lineup-select-wrap notu). */
.pitch-lineup-swap-row { display: flex; justify-content: space-between; gap: 4px; margin-top: 3px; }
.pitch-lineup-swap {
  position: relative; z-index: 5;
  width: 17px; height: 17px; border-radius: 50%; padding: 0; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  background: var(--card-solid); border: 1px solid var(--border-strong); color: var(--text-faint);
  font-size: 9px; cursor: pointer;
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease), transform 0.15s var(--ease);
}
.pitch-lineup-swap:hover { border-color: var(--accent); color: var(--accent); transform: scale(1.12); }
.pitch-lineup-swap.placeholder { visibility: hidden; cursor: default; }

/* ---------- Match ---------- */
/* [KULLANICI İSTEĞİ] "Skorbordda yamukluk var, skor alta kayıyor" — kök neden: maç sonucu
   kartında `.team` iki satırlı (isim + altında xG satırı, bkz. renderMatchResultCard) ama
   `.score` tek satırlı; `align-items:center` bunları KENDİ toplam yüksekliklerine göre
   ortalıyordu, bu da tek satırlık skoru iki satırlık isim bloğunun ortasına (isim satırının
   ALTINA doğru) kaydırıyordu. `flex-start` ile hepsi üstten hizalanıyor — isim ve skor artık
   aynı satırda, xG alttaki ekstra satır olarak sarkıyor (tek satırlı kullanımlarda zaten fark
   etmiyordu, hepsi eşit yükseklikteydi). */
.scoreline {
  display: flex; align-items: flex-start; justify-content: center; gap: 20px; padding: 18px 0;
}
.scoreline .team { font-weight: 700; font-size: 16px; width: 160px; text-align: center; }
/* [design.md "Tipografi"] Skor rakamları "gerçekten bağırmalı" — kondanse skorbord fontuna ve
   daha büyük bir ölçeğe geçti (mono yerine display). */
.scoreline .score { font-family: var(--font-display); font-size: 46px; font-weight: 800; color: var(--accent); min-width: 96px; text-align: center; text-shadow: 0 0 26px var(--gold-glow); letter-spacing: 0.5px; }
.scoreline .score span.flash { animation: score-pop 0.55s var(--ease); }
@keyframes score-pop { 0% { transform: scale(1); } 35% { transform: scale(1.35); color: var(--danger); } 100% { transform: scale(1); } }
.scoreline .xg { font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); text-align: center; margin-top: 4px; }

/* [design.md "Hareket"] Kazananın açıklandığı an sade bir fade-in değil, yayın grafiği
   geçişi gibi (wipe) hissettirilsin — banner bir kenardan diagonal bir maskeyle açılıyor,
   şimmer artık saf altın (yeşil sızıntı yok, para/kazanma anlamı tek renkte tutarlı). */
.winner-banner {
  position: relative; text-align: center; padding: 30px 26px; border-radius: var(--radius-lg);
  background: linear-gradient(120deg, var(--gold-soft), transparent, var(--gold-soft));
  background-size: 200% 100%;
  border: 1px solid var(--accent); color: var(--accent); font-family: var(--font-display); font-weight: 800; font-size: 24px; letter-spacing: 0.3px;
  box-shadow: 0 0 50px -12px var(--gold-glow);
  animation: banner-wipe-in 0.55s var(--ease), banner-shimmer 3.2s linear infinite 0.55s;
  overflow: visible;
}
@keyframes banner-wipe-in {
  0% { clip-path: polygon(0 0, 12% 0, 0% 100%, 0% 100%); opacity: 0; }
  100% { clip-path: polygon(0 0, 112% 0, 100% 100%, -12% 100%); opacity: 1; }
}
@keyframes banner-shimmer { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } }
.winner-banner .trophy-icon { display: inline-block; font-size: 30px; animation: trophy-bounce 1.6s ease-in-out infinite; margin-right: 4px; }
@keyframes trophy-bounce { 0%, 100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-6px) rotate(-6deg); } 50% { transform: translateY(0) rotate(0); } 75% { transform: translateY(-3px) rotate(5deg); } }

.standings-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.standings-table th, .standings-table td { padding: 10px 12px; text-align: center; border-bottom: 1px solid var(--border); }
.standings-table th { color: var(--text-muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: 1px; font-weight: 800; }
.standings-table td { font-family: var(--font-mono); }
.standings-table td:first-child { font-family: var(--font-body); }
.standings-table td:first-child, .standings-table th:first-child { text-align: left; }
.standings-table tr.me td { color: var(--accent); font-weight: 800; }
.standings-table tr.winner td:first-child { color: var(--accent); }
.standings-table .rank-cell { color: var(--text-faint); font-weight: 800; width: 28px; }

/* ---------- Oyuncu Veritabanı ---------- */
/* [KULLANICI İSTEĞİ] "Filtreleme ve sıralama seçenekleri koy." */
.player-db-toolbar { display: flex; gap: 10px; flex-wrap: wrap; }
.player-db-toolbar input, .player-db-toolbar select {
  background: var(--bg-elevated); border: 1px solid var(--border-strong); color: var(--text);
  padding: 9px 12px; border-radius: var(--radius-sm); font-size: 13.5px; outline: none;
}
.player-db-toolbar input { flex: 1; min-width: 160px; }
.player-db-toolbar input:focus, .player-db-toolbar select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.player-db-table-wrap { overflow-x: auto; max-height: 62vh; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.pdb-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 560px; }
.pdb-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--bg-elevated); color: var(--text-muted); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: 1px; font-weight: 800; padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border-strong);
}
.pdb-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); }
.pdb-table tbody tr { transition: background 0.1s var(--ease); }
.pdb-table tbody tr:hover { background: var(--bg-elevated); }
.pdb-rating { font-family: var(--font-mono); font-weight: 700; color: var(--accent); }
.pdb-name { font-weight: 600; }
.pdb-icon-tag { color: var(--icon); }
.pdb-pos {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; color: #12140f;
  padding: 3px 8px; border-radius: var(--radius-sm);
}
.pdb-value { font-family: var(--font-mono); color: var(--text-muted); white-space: nowrap; }
.pdb-season { font-family: var(--font-mono); font-size: 11.5px; white-space: nowrap; }

.fixture-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }

.match-result-card { display: flex; flex-direction: column; gap: 16px; }
.match-result-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.match-result-title { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--text-muted); letter-spacing: 1px; }
.match-result-tag { font-size: 11px; color: var(--text-faint); }

/* [KULLANICI İSTEĞİ, KARARLAŞTIRILDI] "Salt skor yeterli değil, kısa bir anlatı/flavor-text
   üretilebilir" — bkz. views.js STORY_TEMPLATES/renderMatchResultCard. Skorun hemen altında,
   diğer muted metinlerden ayrışsın diye hafif bir vurgu şeridi. */
.match-story { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.match-story-line { margin: 0; font-size: 12.5px; color: var(--text-muted); }

.scorer-columns { display: flex; gap: 16px; }
.scorer-list { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.scorer-list-team { font-size: 12px; font-weight: 800; color: var(--text-muted); margin-bottom: 2px; }
.scorer-row {
  font-size: 12.5px; padding: 6px 10px; border-radius: var(--radius-sm); background: var(--bg-elevated);
  border: 1px solid var(--border); color: var(--text);
}
.scorer-empty { font-size: 12px; color: var(--text-faint); font-style: italic; }

.match-rating-pitches { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.lineup-pitch.small { max-width: 300px; }
.lineup-pitch-title { text-align: center; font-size: 11.5px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 8px; }

/* [DÜZELTİLDİ — BUG, KULLANICI GERİ BİLDİRİMİ] "Simülasyon kısmında saha kısmında isimler
   ekrana sığmıyor" — kök neden: chip/isim boyutları (.pitch-lineup-chip min-width:84px,
   .pitch-lineup-name max-width:90px) TAM boy saha (.lineup-pitch, 460px) için ayarlanmıştı;
   maç sonucu ekranındaki KÜÇÜK saha (.lineup-pitch.small, 300px — bkz. renderMatchLineupPitch)
   bu boyutları hiç küçültmeden miras alıyordu, bu yüzden aynı satırdaki 3-4 oyuncu chip'i
   üst üste biniyor/isimler kesiliyordu. Aşağıdaki blok SADECE .small varyantını (mobil
   @640px breakpoint'inden bağımsız olarak, masaüstünde de) orantılı şekilde küçültüyor —
   tam boy dizilim sahası (.lineup-pitch, seçim ekranı) hiç etkilenmiyor. */
.lineup-pitch.small .pitch-lineup-chip { min-width: 54px; padding: 4px 5px; border-radius: 8px; }
.lineup-pitch.small .pitch-lineup-name { font-size: 8px; max-width: 52px; }
.lineup-pitch.small .pitch-lineup-badge { font-size: 7.5px; padding: 1px 5px; }
.lineup-pitch.small .pitch-lineup-matchrating { font-size: 11px; }

.pitch-lineup-matchrating { font-family: var(--font-mono); font-weight: 700; font-size: 14px; line-height: 1.3; }
.pitch-lineup-chip.rating-great { border-color: var(--accent); box-shadow: 0 0 18px -4px var(--gold-glow), var(--shadow); }
.pitch-lineup-chip.rating-great .pitch-lineup-matchrating { color: var(--accent); text-shadow: 0 0 10px var(--gold-glow); }
.pitch-lineup-chip.rating-good { border-color: var(--success); }
.pitch-lineup-chip.rating-good .pitch-lineup-matchrating { color: var(--success); }
.pitch-lineup-chip.rating-poor { border-color: var(--danger); }
.pitch-lineup-chip.rating-poor .pitch-lineup-matchrating { color: var(--danger); }

/* ---------- Maç anlatımı + minyatür saha (birebir korunuyor) ---------- */
.match-live-layout { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
.match-live-side { flex: 0 0 300px; display: flex; flex-direction: column; align-items: center; gap: 14px; position: relative; }
.match-live-log { flex: 1; min-width: 280px; }
.commentary-log { max-height: 320px; width: 100%; }
.commentary-log .row.goal { background: var(--gold-soft); border-color: var(--accent); color: var(--text); font-weight: 700; }
.commentary-log .row.red-card { background: var(--danger-soft); border-color: var(--danger); color: var(--text); font-weight: 700; }
.commentary-log .row.yellow-card { border-color: rgba(255, 182, 72, 0.5); }
/* [KULLANICI İSTEĞİ] "X futbolcu vuruyo, sonra goool diye çıkabilir" — sonucu açık etmeyen
   gerilim satırı, italik + hafif titreşen bir nokta ile "bekleniyor" hissi veriyor. */
.commentary-log .row.buildup { font-style: italic; color: var(--text-muted); border-style: dashed; }
.commentary-log .row.buildup::after { content: ' ⏳'; animation: dot-pulse 0.9s ease-in-out infinite; }

.mini-pitch { width: 100%; }
.pitch-field {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius);
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(255,255,255,0.16) 0%, transparent 45%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0 12.5%, rgba(0,0,0,0.07) 12.5% 25%),
    linear-gradient(160deg, #1e6440, #0b291c 75%);
  border: 3px solid rgba(255, 255, 255, 0.28);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.55), inset 0 0 0 6px rgba(0,0,0,0.12), var(--shadow-lg);
}
.pitch-field::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    radial-gradient(60px 60px at 4% 4%, rgba(255,255,255,0.25), transparent 70%),
    radial-gradient(60px 60px at 96% 4%, rgba(255,255,255,0.25), transparent 70%);
}
.pitch-halfline { position: absolute; left: 50%; top: 3%; bottom: 3%; width: 2px; background: rgba(255,255,255,0.45); transform: translateX(-50%); z-index: 1; }
.pitch-circle {
  position: absolute; left: 50%; top: 50%; width: 22%; aspect-ratio: 1;
  border: 2px solid rgba(255,255,255,0.45); border-radius: 50%; transform: translate(-50%, -50%); z-index: 1;
}
.pitch-circle::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.55); transform: translate(-50%, -50%);
}
.pitch-box {
  position: absolute; top: 50%; width: 13%; height: 46%; border: 2px solid rgba(255,255,255,0.45);
  transform: translateY(-50%); z-index: 1;
}
.pitch-box.left { left: 0; border-left: none; }
.pitch-box.right { right: 0; border-right: none; }
.pitch-goal {
  position: absolute; top: 50%; width: 4%; height: 22%; transform: translateY(-50%);
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.65) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.65) 0 1px, transparent 1px 5px),
    rgba(255,255,255,0.12);
  border: 2px solid rgba(255,255,255,0.7);
  box-shadow: 0 0 14px rgba(255,255,255,0.25);
  z-index: 1;
}
.pitch-goal.left { left: 0; border-radius: 0 4px 4px 0; border-left: none; }
.pitch-goal.right { right: 0; border-radius: 4px 0 0 4px; border-right: none; }
.pitch-ball {
  position: absolute; width: 14px; height: 14px; border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, #fff 0%, #fff 18%, transparent 20%),
    radial-gradient(circle at 68% 62%, rgba(0,0,0,0.25) 0%, transparent 30%),
    radial-gradient(circle at 35% 35%, #f4f7f5, #c7d0cb 65%, #8f9a93);
  box-shadow: 0 3px 8px rgba(0,0,0,0.55);
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  transition: left 0.6s cubic-bezier(0.3, 0.8, 0.4, 1), top 0.6s cubic-bezier(0.3, 0.8, 0.4, 1);
  animation: ball-idle 2.2s ease-in-out infinite;
  z-index: 3;
}
.pitch-ball::after {
  content: ''; position: absolute; left: 50%; bottom: -9px; width: 16px; height: 5px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,0.45), transparent 70%);
  transform: translateX(-50%);
}
@keyframes ball-idle { 0%, 100% { box-shadow: 0 3px 8px rgba(0,0,0,0.55); } 50% { box-shadow: 0 3px 16px rgba(255,255,255,0.4); } }
.pitch-flash {
  position: absolute; top: 10%; bottom: 10%; width: 20%;
  background: radial-gradient(circle, var(--gold-glow), transparent 70%);
  opacity: 0; pointer-events: none; z-index: 2;
}
.pitch-flash.left { left: 0; }
.pitch-flash.right { right: 0; }
.pitch-flash.flash { animation: pitch-flash-anim 0.9s var(--ease); }
@keyframes pitch-flash-anim { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }

.pitch-field::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 5; opacity: 0; border-radius: inherit;
}
.pitch-field.card-flash-yellow::after { background: rgba(255, 182, 72, 0.38); animation: card-flash-pulse 0.6s ease; }
.pitch-field.card-flash-red::after { background: rgba(255, 75, 62, 0.42); animation: card-flash-pulse 0.6s ease; }
@keyframes card-flash-pulse { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
.pitch-caption {
  position: absolute; left: 50%; top: 8%; transform: translate(-50%, -8px) scale(0.85);
  padding: 6px 18px; font-weight: 800; font-size: 13px; letter-spacing: 0.3px;
  background: var(--bg-elevated); border: 1px solid var(--border-strong); color: var(--text);
  opacity: 0; transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
  white-space: nowrap; z-index: 4;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
.pitch-caption.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.pitch-caption.goal {
  background: var(--danger); border-color: var(--danger); color: #fff;
  font-size: 15px; box-shadow: 0 0 24px -4px var(--danger-glow); animation-name: caption-punch;
}
.pitch-caption.show.goal { animation: caption-punch 0.45s var(--ease); }
@keyframes caption-punch { 0% { transform: translate(-50%, 0) scale(0.6); } 55% { transform: translate(-50%, 0) scale(1.18); } 100% { transform: translate(-50%, 0) scale(1); } }
.pitch-caption.save { background: var(--success-soft); border-color: var(--success); color: var(--success); }
.pitch-caption.miss { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }

.pitch-confetti {
  position: absolute; top: 0; left: 50%; width: 6px; height: 10px; z-index: 5; pointer-events: none;
  animation: confetti-burst 0.9s cubic-bezier(0.2, 0.7, 0.4, 1) forwards;
}
@keyframes confetti-burst {
  0% { transform: translate(-50%, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; }
}
@keyframes screen-shake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-6px, 2px); }
  40% { transform: translate(5px, -3px); }
  60% { transform: translate(-4px, 3px); }
  80% { transform: translate(3px, -2px); }
}
.match-live-layout.shake { animation: screen-shake 0.4s ease-in-out; }

.match-clock {
  font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: var(--accent); background: var(--gold-soft);
  border: 1px solid var(--accent); padding: 6px 20px; align-self: center;
  font-variant-numeric: tabular-nums;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
.playback-controls { display: flex; gap: 8px; flex-wrap: wrap; }

/* ============================================================================================
   Korunan bölüm sonu.
   ============================================================================================ */

/* ---------- Toasts ---------- */
.toast-host { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 50; }
.toast {
  background: var(--card-solid); border: 1px solid var(--border-strong); border-left: 3px solid var(--accent); border-radius: var(--radius-sm);
  padding: 11px 18px; font-size: 13px; box-shadow: var(--shadow-lg); animation: toast-in 0.25s var(--ease);
}
@keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }

.muted { color: var(--text-muted); }
.error-text { color: var(--danger); font-size: 13px; margin-top: 6px; min-height: 16px; }

/* [KULLANICI İSTEĞİ, KARARLAŞTIRILDI] Maç anlatımı hız/Sonuca Geç artık oy birliği gerektiriyor
   (bkz. app.js applyPlaybackSync, views.js renderMatchPlayback) — bu, "ben oy verdim, sırada
   diğerlerini bekliyorum" durumunu görsel olarak ayırt eder (agreed/aktif renkten farklı). */
.playback-controls .btn.voted { outline: 2px solid var(--accent); outline-offset: 2px; }
.playback-vote-hint { font-size: 11.5px; color: var(--text-muted); margin-top: 6px; }

/* [KULLANICI İSTEĞİ, KARARLAŞTIRILDI] Hazırlık Çarkı — bkz. views.js renderPrepWheel. */
.prep-wheel-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.prep-wheel-perk-label { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--accent); }
.prep-wheel-turn-label { font-family: var(--font-display); font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.prep-wheel-row {
  display: flex; justify-content: space-between; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid var(--border-strong); font-size: 13px;
}
.prep-wheel-row:last-child { border-bottom: none; }
.prep-wheel-row.current { color: var(--accent); font-weight: 700; }
/* [KULLANICI İSTEĞİ, KARARLAŞTIRILDI — "TAM SÜRÜM"] "Çarktaki şeylerin özelliklerini açıkla,
   oyuncular bilsin" — her zaman görünen (katlanabilir) bir perk kataloğu. */
.prep-wheel-catalog summary { cursor: pointer; font-weight: 700; }
.prep-wheel-catalog-group { margin-top: 12px; }
.prep-wheel-catalog-group-label { font-size: 12px; font-weight: 700; color: var(--text-muted); margin-bottom: 6px; }
.prep-wheel-catalog-item { padding: 6px 0; border-bottom: 1px solid var(--border-strong); }
.prep-wheel-catalog-item:last-child { border-bottom: none; }
.prep-wheel-catalog-item-label { font-weight: 700; font-size: 13px; }
.prep-wheel-catalog-item-desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

@media (max-width: 880px) {
  /* Dekoratif kartlar artık içerik sütununun dışına (-128px/-132px) taştığı için orta/dar
     genişliklerde (tablet dahil) sayfayı yatay taşırabilir — bu genişlikten itibaren gizleniyor. */
  .lobby-decor { display: none; }
}

@media (max-width: 640px) {
  .lobby-mode-picker { grid-template-columns: 1fr; }
  .lobby-features { grid-template-columns: 1fr; }
  .player-db-toolbar { flex-direction: column; }
  .player-db-toolbar input, .player-db-toolbar select { width: 100%; }
  .topbar-link { padding: 6px 9px; font-size: 11px; }
  .reveal-row { flex-direction: column; align-items: center; }
  .match-live-layout { flex-direction: column; }
  .match-live-side { flex-basis: auto; width: 100%; }
  .topbar { padding: 11px 16px; }
  .app { padding: 20px 14px 70px; }
  .pitch-lineup-chip { min-width: 56px; padding: 4px 5px; border-radius: 8px; }
  .pitch-lineup-name { font-size: 8px; max-width: 54px; }
  .pitch-lineup-rating { font-size: 10.5px; }
  .pitch-lineup-badge { font-size: 7.5px; padding: 1px 5px; }
  .scorer-columns { flex-direction: column; }

  /* [KULLANICI İSTEĞİ] "Mobil uyumlu yap" — .scoreline'ın iki sabit-genişlikli takım kutusu
     (160px×2) + skor (min 96px) + boşluklar telefon genişliğinde (~360-430px) panel içine
     sığmıyordu, yatay taşma yaratıyordu. Dar ekranda dikey istifleniyor: takım / skor / takım. */
  .scoreline { flex-direction: column; align-items: center; gap: 6px; padding: 14px 0; }
  .scoreline .team { width: auto; }
  .scoreline .score { font-size: 34px; }

  /* Üst bar durum şeridi (bağlantı · oda · isim · bütçe) tek satırda nowrap olduğu için uzun
     içerikte sayfayı yatay taşırabiliyordu — artık kendi satırına düşüyor ve gerekirse kendi
     içinde yatay kaydırılıyor (sayfa genelini etkilemez). */
  .topbar { flex-wrap: wrap; row-gap: 8px; }
  /* [KULLANICI İSTEĞİ] Üst bara 3. bir nav butonu (❓ Nasıl Oynanır) eklenince dar ekranda
     (320-360px) tek satırda sıkışabiliyordu — bu satır da kendi içinde sarabilsin diye
     flex-wrap eklendi (aynı savunmacı desen, bkz. üstteki .topbar notu). */
  .topbar-right { width: 100%; justify-content: space-between; flex-wrap: wrap; row-gap: 6px; }
  .topbar-status { overflow-x: auto; max-width: 62vw; }

  /* Toast'lar sağda sabit genişlikte taşarak/kırpılarak durabiliyordu — dar ekranda alttan
     kenardan kenara, üstte yeterli boşluk bırakılarak. */
  .toast-host { left: 12px; right: 12px; bottom: 12px; }
  .toast { width: 100%; }
}
/* ========================= Dizilim v2 — .lu-* =========================
   [KULLANICI İSTEĞİ] "Draft sonrası ekranda atak/defansif, agresif/sakin, diziliş değiştirme
   butonları kötü ve basit gözüküyor." — bu bölüm o ekranın yeni kabuğu (bkz. lineup-v2.js).
   Renkler tamamen mevcut token'lardan (--accent/--success/--danger/--text-*) türetiliyor;
   yeni renk tanımlanmıyor. Eski .formation-pick/.tactic-panel/.pitch-lineup-* kuralları
   BAŞKA ekranlarda (çark seçimi vb.) hâlâ kullanıldığı için silinmedi.ekle
   Responsive: tek kolona düşüş 640px'te; kırılma noktası SADECE burada. */

.lu { display: flex; flex-direction: column; gap: 16px; }

.lu-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.lu-top-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lu-live { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--success); }
.lu-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--success);
  box-shadow: 0 0 10px var(--success-glow); animation: lu-pulse 1.6s ease-in-out infinite; }
@keyframes lu-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.lu-code { font-family: var(--font-mono, ui-monospace, monospace); font-size: 10.5px; color: var(--text-muted);
  padding: 5px 9px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 5px; }

.lu-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.lu-title { margin: 0; font-size: clamp(30px, 6.5vw, 44px); line-height: .95; letter-spacing: .6px;
  text-transform: uppercase; }
.lu-sub { margin: 8px 0 0; font-size: 13px; color: var(--text-muted); max-width: 46ch; text-wrap: pretty; }
.lu-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.lu-stat { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 11px 14px; min-width: 132px; }
.lu-stat-k { font-family: var(--font-mono, ui-monospace, monospace); font-size: 9px; font-weight: 700;
  letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-faint); }
.lu-stat-v { font-size: 19px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; margin-top: 4px;
  color: var(--text-muted); }
.lu-stat.done .lu-stat-v { color: var(--success); }

.lu-peers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 9px; }
.lu-peer { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px; }
.lu-peer-name { font-size: 13px; font-weight: 700; }
.lu-peer-tags { display: flex; gap: 7px; margin-top: 8px; }
.lu-pill { font-family: var(--font-mono, ui-monospace, monospace); font-size: 9.5px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); border: 1px solid var(--border-strong);
  padding: 3px 7px; border-radius: 4px; }
.lu-pill.done { color: var(--success); border-color: var(--success-glow); }

.lu-tabs { display: flex; gap: 6px; padding: 5px; background: #0b111c; border: 1px solid var(--border);
  border-radius: 10px; flex-wrap: wrap; }
.lu-tab { flex: 1; min-width: 150px; min-height: 44px; padding: 10px 22px; border: 1px solid transparent;
  border-radius: 7px; background: none; color: var(--text-muted); font: inherit; font-size: 16px; font-weight: 800;
  letter-spacing: 1.2px; text-transform: uppercase; cursor: pointer; }
.lu-tab:hover { color: var(--text); }
.lu-tab.active { background: var(--accent-soft); border-color: var(--accent-glow); color: var(--accent); }

.lu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 18px;
  align-items: start; }
.lu-col { display: flex; flex-direction: column; gap: 14px; }

.lu-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 16px; }
.lu-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lu-card-title { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 800;
  letter-spacing: 1.5px; text-transform: uppercase; }
.lu-card-title::before { content: ''; width: 3px; height: 14px; background: var(--accent); display: block; }
.lu-card-meta { font-family: var(--font-mono, ui-monospace, monospace); font-size: 10px; color: var(--text-faint); }

/* ---------- saha ---------- */
/* [DÜZELTİLDİ — EKSİK SINIF] views.js .lu-card'ın yanına ayrıca .lu-pitch-card da veriyordu
   (bkz. pitchCard()) ama bu sınıf hiç tanımlı değildi — çıplak .lu-card genişliği (grid item)
   .lu-pitch'in aspect-ratio:3/4 portre sahasını gereksiz yere geniş/kısa gösterebiliyordu.
   Sahayı "hero" kart olarak öne çıkarmak + genişliğini sahaya uygun bir üst sınırda tutmak için
   ince bir vurgu + max-width eklendi; .lu-grid'in kendisine dokunulmadı. */
.lu-pitch-card { max-width: 460px; width: 100%; margin: 0 auto; border-color: var(--border-strong); }

.lu-pitch { position: relative; aspect-ratio: 3 / 4; margin-top: 14px; border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, .1); overflow: hidden;
  background: repeating-linear-gradient(180deg, rgba(34, 197, 94, .055) 0px, rgba(34, 197, 94, .055) 34px,
    rgba(34, 197, 94, .02) 34px, rgba(34, 197, 94, .02) 68px), #08121a; }
.lu-pitch-half { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(255, 255, 255, .12); }
.lu-pitch-circle { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px;
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 50%; }
.lu-pitch-box { position: absolute; left: 50%; width: 38%; height: 11%; margin-left: -19%;
  border: 1px solid rgba(255, 255, 255, .12); }
.lu-pitch-box.bottom { bottom: 0; border-bottom: none; border-radius: 3px 3px 0 0; }
.lu-pitch-box.top { top: 0; border-top: none; border-radius: 0 0 3px 3px; }

/* Genişlik lineup-v2.js'te hatta kaç oyuncu olduğuna göre YÜZDE olarak veriliyor (inline);
   burada sadece taban ve alt sınır var — kalabalık hatta çip incelir, sahadan taşmaz. */
.lu-slot { position: absolute; transform: translate(-50%, -50%); min-width: 56px; display: flex;
  flex-direction: column; align-items: center; gap: 4px; }
.lu-pos { font-family: var(--font-mono, ui-monospace, monospace); font-size: 8.5px; font-weight: 700;
  letter-spacing: 1.2px; background: rgba(7, 12, 20, .85); border: 1px solid var(--border-strong);
  padding: 2px 6px; border-radius: 4px; color: var(--text-muted); }
.lu-pos.pos-GK { color: #ffd166; }
.lu-pos.pos-DF { color: #5eead4; }
.lu-pos.pos-MF { color: #93c5fd; }
.lu-pos.pos-FW { color: #fb7185; }
.lu-chip { position: relative; width: 100%; background: rgba(7, 12, 20, .9); border: 1px solid var(--border-strong);
  border-radius: 8px; padding: 6px 5px; text-align: center; backdrop-filter: blur(3px); }
.lu-chip.hot { border-color: var(--accent-glow); }
.lu-chip.icon { box-shadow: 0 0 0 1px var(--accent) inset; }
.lu-select-wrap { position: relative; }
.lu-rating { font-size: 20px; font-weight: 800; line-height: 1; color: var(--text); }
.lu-chip.hot .lu-rating { color: var(--accent); }
.lu-name { font-size: 10px; font-weight: 600; margin-top: 2px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.lu-slot.dense .lu-rating { font-size: 17px; }
.lu-slot.dense .lu-name { font-size: 9px; }
/* Gerçek <select> — görünmez ama tıklanabilir; SADECE rating+isim alanını kaplar. */
.lu-select-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;
  appearance: none; border: none; }
.lu-swap-row { display: flex; gap: 4px; justify-content: center; margin-top: 5px; }
.lu-swap { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, .2); border-radius: 5px; background: none; color: var(--text-muted);
  font-size: 9px; padding: 0; cursor: pointer; }
.lu-swap:hover { border-color: var(--accent); color: var(--accent); }
.lu-swap.off { border-color: rgba(255, 255, 255, .06); color: #232f45; cursor: default; }
.lu-slot.dense .lu-swap { width: 19px; height: 19px; }

/* ---------- formasyon kartları ---------- */
.lu-formations { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 92px), 1fr)); gap: 9px;
  margin-top: 13px; }
.lu-formation { min-height: 104px; display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 11px 8px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px; background: #0b111c;
  cursor: pointer; font: inherit; }
.lu-formation:hover { border-color: var(--accent-glow); }
.lu-formation.on { border-color: var(--accent); background: var(--accent-soft);
  box-shadow: 0 10px 26px -14px var(--accent-glow); }
.lu-mini { display: flex; flex-direction: column; gap: 5px; width: 100%; align-items: center; }
.lu-mini-row { display: flex; gap: 4px; justify-content: center; }
.lu-dot { width: 5px; height: 5px; border-radius: 50%; background: #3a4763; display: block; }
.lu-formation.on .lu-dot { background: var(--accent); }
.lu-formation-label { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; font-weight: 700;
  letter-spacing: 1.4px; color: var(--text-muted); }
.lu-formation.on .lu-formation-label { color: var(--accent); }

/* ---------- oyun tarzı / taktik kartları ---------- */
.lu-styles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 108px), 1fr)); gap: 9px;
  margin-top: 13px; }
.lu-tactics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 9px;
  margin-top: 13px; }
.lu-opt { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 12px;
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px; background: #0b111c; cursor: pointer;
  text-align: left; font: inherit; color: var(--text); }
.lu-opt:hover { border-color: var(--accent-glow); }
.lu-opt.on { border-color: var(--accent); background: var(--accent-soft); }
.lu-opt-label { font-size: 19px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase; }
.lu-opt.on .lu-opt-label { color: var(--accent); }
.lu-opt-desc { font-size: 11px; color: var(--text-muted); line-height: 1.4; text-wrap: pretty; }
.lu-meter { display: flex; gap: 3px; }
.lu-meter-bar { flex: 1; height: 4px; border-radius: 2px; background: var(--border); display: block; }
.lu-meter-bar.fill { background: #3a4763; }
.lu-opt.on .lu-meter-bar.fill { background: var(--accent); }

/* [DÜZELTİLDİ — EKSİK SINIF] views.js taktik butonlarına .lu-opt'un yanında ayrıca .lu-tactic da
   veriyordu (bkz. tacticCard()) ama tanımlı değildi. Grid satırı (.lu-tactics) elemanları zaten
   varsayılan olarak eşit yüksekliğe geriliyor (grid item stretch) — bu modifier, o eşit
   yükseklikte kısa açıklamalı kartların içeriğini üstte/altta yapışık değil DENGELİ dağıtıyor
   (başlık+radyo üstte, açıklama altta hizalı kalsın diye) — .lu-opt (Oyun Tarzı) DEĞİŞMEDİ. */
.lu-opt.lu-tactic { justify-content: space-between; }

.lu-tactic-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lu-radio { width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .24);
  display: block; flex-shrink: 0; }
.lu-opt.on .lu-radio { border-color: var(--accent); background: var(--accent); }
.lu-effects { display: flex; flex-direction: column; gap: 5px; }
.lu-effect { display: grid; grid-template-columns: 62px 1fr auto; align-items: center; gap: 8px; }
.lu-effect-k { font-family: var(--font-mono, ui-monospace, monospace); font-size: 9px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; color: var(--text-faint); }
.lu-effect-track { position: relative; height: 3px; border-radius: 2px; background: var(--border);
  display: block; overflow: hidden; }
.lu-effect-fill { position: absolute; top: 0; bottom: 0; display: block; background: transparent; }
.lu-effect-fill.up { background: var(--success); }
.lu-effect-fill.down { background: var(--danger); }
.lu-effect-v { font-family: var(--font-mono, ui-monospace, monospace); font-size: 10px; font-weight: 700;
  min-width: 26px; text-align: right; }
.lu-effect-v.up { color: var(--success); }
.lu-effect-v.down { color: var(--danger); }
.lu-effect-v.zero { color: var(--text-faint); }

/* ---------- uyarı + kaydet ---------- */
.lu-warn { display: flex; gap: 11px; align-items: flex-start; background: rgba(255, 149, 0, .08);
  border: 1px solid rgba(255, 149, 0, .32); border-left: 3px solid var(--accent); border-radius: 10px;
  padding: 13px 14px; font-size: 12px; line-height: 1.45; text-wrap: pretty; }
.lu-warn-k { font-family: var(--font-mono, ui-monospace, monospace); font-size: 10px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--accent); flex-shrink: 0; padding-top: 1px; }
.lu-save-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.lu-save { flex: 1; min-width: min(100%, 220px); min-height: 54px; padding: 15px 20px; border: 1px solid var(--accent);
  border-radius: 10px; background: var(--accent); color: var(--accent-ink); font: inherit; font-size: 20px;
  font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; cursor: pointer;
  box-shadow: 0 14px 32px -12px var(--accent-glow); }
.lu-save:hover { background: var(--accent-strong); }
.lu-save.saved { background: var(--accent-soft); color: var(--accent); box-shadow: none; }
.lu-save-hint { font-family: var(--font-mono, ui-monospace, monospace); font-size: 10px; color: var(--text-faint);
  line-height: 1.5; max-width: 200px; }

@media (max-width: 640px) {
  .lu-stats { width: 100%; }
  .lu-stat { flex: 1; min-width: 0; }
  .lu-save-hint { max-width: none; }
}

/* ===================== Ekranlar v2 — draft / anlatım / sonuç / veritabanı / çark =====================
   [KULLANICI İSTEĞİ] "Bu ekranları da yeniden tasarla, uygulamak istiyorum."
   Bu blok SADECE GÖRÜNÜM katmanıdır: mevcut sınıf adlarını (views.js'in bugün ürettiği DOM'u)
   yeniden giydirir — HİÇBİR JS değişikliği gerektirmez. styles.css'in EN SONUNA ekle; sıra
   önemli, aynı özgüllükteki eski kurallar bunlarla eziliyor.

   Kapsam:
     · Draft turu      → .draft-header, .budget-*, .round-area, .reveal-row, .bid-*, .timer-*
     · Maç anlatımı    → .match-live-*, .scoreline, .event-log .row, .playback-controls
     · Maç sonucu      → .winner-banner, .fixture-tabs, .match-result-*, .scorer-*, .standings-table
     · Oyuncu veritabanı → .player-db-toolbar, .pdb-*
     · Çark            → .wheel-stage/-pointer/-turn-banner, .prep-wheel-*
   DOKUNULMADI (bilinçli — bkz. styles.css başındaki kısıt notu): .mini-pitch/.pitch-*,
   .lineup-pitch*, .pitch-lineup-*, .lu-* (dizilim v2). Renkler tamamen mevcut token'lardan.
   Responsive: tek kolona düşüşler 760px ve 560px'te. */

/* ---------- ortak: panel ritmi ve bölüm başlıkları ---------- */
.view .panel { border-radius: 14px; }
.view .panel > h1, .view .panel > h3 {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-size: 15px; font-weight: 800;
  letter-spacing: 1.5px; text-transform: uppercase; margin: 0 0 13px;
}
.view .panel > h1::before, .view .panel > h3::before { content: ''; width: 3px; height: 14px; background: var(--accent); flex: 0 0 auto; }

/* ================================ DRAFT TURU ================================ */
.draft-header {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding-bottom: 14px; border-bottom: 1px solid var(--border);
}
.draft-header h3 { margin: 0; font-size: 17px; letter-spacing: .8px; text-transform: uppercase; }
.draft-header .muted { font-family: var(--font-mono, ui-monospace, monospace); font-size: 10.5px;
  color: var(--text-muted); padding: 5px 9px; background: var(--bg-elevated);
  border: 1px solid var(--border); border-radius: 5px; }
.draft-header > .btn { margin-left: auto; }
.draft-header > .btn + .btn { margin-left: 0; }
.formation-badge {
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 10.5px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--accent);
  background: var(--accent-soft); border: 1px solid var(--accent-glow);
  padding: 5px 10px; border-radius: 5px;
}

.budget-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 10px; }
.budget-card { background: var(--card); border: 1px solid var(--border); border-radius: 11px; padding: 12px 13px; }
.budget-card.me, .budget-card.mine { background: var(--accent-soft); border-color: var(--accent-glow); }
.budget-card .name { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.budget-card .budget {
  font-family: var(--font-display); font-weight: 800; font-size: 24px; line-height: 1;
  letter-spacing: .5px; margin-top: 8px; color: var(--accent);
}
.budget-card .slots { font-family: var(--font-mono, ui-monospace, monospace); font-size: 9.5px;
  color: var(--text-faint); margin-top: 7px; }

.warning-banner {
  display: flex; align-items: center; gap: 11px;
  background: var(--danger-soft); border: 1px solid var(--danger-glow);
  border-left: 3px solid var(--danger); border-radius: 10px; padding: 13px 14px;
  font-size: 12.5px; color: var(--text); line-height: 1.45;
}

/* geri sayım — tek satırda büyük rakam + ince bar */
.timer-wrap { display: flex; flex-direction: column-reverse; gap: 9px; margin: 4px 0 14px; }
.timer-label {
  font-family: var(--font-display); font-weight: 800; font-size: 30px; line-height: 1;
  letter-spacing: .6px; color: var(--accent); text-align: right;
}
.timer-bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.timer-fill { height: 100%; background: var(--accent); transition: width .15s linear; }
.timer-wrap.urgent .timer-label, .timer-wrap.urgent .timer-fill { color: var(--urgency); background-color: var(--urgency); }
.timer-wrap.urgent .timer-label { background: none; }
.timer-wrap.critical .timer-label { color: var(--danger); animation: v2-pulse .6s ease-in-out infinite; }
.timer-wrap.critical .timer-fill { background: var(--danger); }
@keyframes v2-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

.big-gap-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surprise-soft); border: 1px solid var(--surprise-glow); border-radius: 7px;
  padding: 7px 11px; font-family: var(--font-mono, ui-monospace, monospace); font-size: 10px;
  font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--surprise);
}

/* ana oyuncu + basamaklar: ana kart geniş, yedekler altında liste ritminde */
.reveal-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 10px; }
.reveal-row .player-card.main {
  grid-column: 1 / -1;
  background: linear-gradient(160deg, #152238 0%, #0c1421 58%);
  border-color: var(--accent-glow);
  box-shadow: 0 18px 44px -26px var(--accent-glow);
}
.reveal-row .player-card.backup { position: relative; background: #0b111c; }
.ladder-rank-badge {
  position: absolute; top: 9px; right: 9px;
  font-family: var(--font-display); font-weight: 800; font-size: 15px; line-height: 1;
  color: var(--text-faint);
}

/* teklif paneli */
.bid-panel { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.bid-current {
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; letter-spacing: .4px;
  text-transform: uppercase; color: var(--text-faint);
}
.bid-current b {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(32px, 5.5vw, 44px); line-height: 1; letter-spacing: .5px;
  color: var(--accent); text-transform: none; margin-top: 4px;
}
.bid-leaderboard { max-width: none; gap: 6px; }
.bid-leaderboard-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 11px; background: #0b111c; border: 1px solid var(--border); border-radius: 8px;
  font-size: 12.5px;
}
.bid-leaderboard-row span:last-child { font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px; font-weight: 700; color: var(--text-muted); }
.bid-leaderboard-row.leading { border-color: var(--accent-glow); background: var(--accent-soft); }
.bid-leaderboard-row.leading span:last-child { color: var(--accent); }

.bid-form { display: flex; gap: 8px; flex-wrap: wrap; }
.bid-form input {
  flex: 1; min-width: min(100%, 140px); background: #05070c;
  border: 1px solid var(--border-strong); border-radius: 8px; padding: 13px 13px;
  color: var(--text); font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 20px; font-weight: 700;
}
.bid-form input:focus { outline: none; border-color: var(--accent); }
.bid-form .btn {
  min-height: 52px; padding: 14px 22px; border-radius: 8px;
  font-family: var(--font-display); font-weight: 800; font-size: 18px;
  letter-spacing: 1.2px; text-transform: uppercase;
  box-shadow: 0 12px 28px -12px var(--accent-glow);
}
.bid-cap { font-size: 11px; color: var(--text-faint); line-height: 1.5; }
.error-text:not(:empty) {
  font-size: 12px; color: var(--danger); background: var(--danger-soft);
  border: 1px solid var(--danger-glow); border-radius: 8px; padding: 9px 11px;
}

details.panel > summary {
  font-family: var(--font-display); font-weight: 800; font-size: 14px;
  letter-spacing: 1.4px; text-transform: uppercase; cursor: pointer;
}

/* ============================== MAÇ ANLATIMI ============================== */
.match-live-layout {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 16px; align-items: start;
}
.panel.match-live-side { display: flex; flex-direction: column; gap: 12px; }
.match-clock {
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; font-weight: 700;
  letter-spacing: 1.4px; color: var(--accent); text-align: center;
}
.scoreline {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: clamp(10px, 2vw, 22px);
  background: linear-gradient(180deg, #101c2e 0%, #0b1320 100%);
  border: 1px solid var(--border); border-radius: 14px; padding: clamp(14px, 2.4vw, 20px);
}
.scoreline .team {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(18px, 3.4vw, 28px);
  letter-spacing: .5px; text-transform: uppercase; line-height: 1.05; min-width: 0;
}
.scoreline .team:first-child { text-align: right; }
.scoreline .xg {
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 10px; font-weight: 500;
  letter-spacing: .4px; text-transform: none; color: var(--text-faint); margin-top: 5px;
}
.scoreline .score {
  font-family: var(--font-display); font-weight: 900; font-size: clamp(40px, 8vw, 62px);
  line-height: .9; color: var(--accent); white-space: nowrap;
}

.playback-controls { display: flex; gap: 7px; flex-wrap: wrap; margin-left: auto; }
.playback-controls .btn {
  min-height: 40px; padding: 10px 16px; border-radius: 7px; font-size: 12px; font-weight: 700;
}
.playback-controls .btn.voted { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.playback-vote-hint {
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 10px;
  letter-spacing: .6px; color: var(--text-faint); margin-top: 8px;
}

.panel.match-live-log { padding-bottom: 8px; }
.event-log.commentary-log {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 460px; overflow-y: auto; padding-right: 4px; background: none; border: none;
}
.event-log.commentary-log .row {
  background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--border-strong);
  border-radius: 10px; padding: 13px 14px; font-size: 13px; line-height: 1.45;
  color: #cbd5e1; text-wrap: pretty; animation: v2-row-in .3s ease-out;
}
@keyframes v2-row-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.event-log.commentary-log .row.buildup { color: var(--text-muted); font-style: italic; border-left-color: var(--border); }
.event-log.commentary-log .row.goal {
  background: var(--accent-soft); border-color: var(--accent-glow); border-left-color: var(--accent);
  padding: 16px; font-size: 15px; font-weight: 600; color: var(--text);
}
.event-log.commentary-log .row.yellow-card { border-left-color: #ffd166; }
.event-log.commentary-log .row.red-card {
  background: var(--danger-soft); border-color: var(--danger-glow); border-left-color: var(--danger);
  font-size: 15px; font-weight: 600; color: var(--text);
}

/* ================================ MAÇ SONUCU ================================ */
.winner-banner {
  position: relative; overflow: hidden; text-align: center;
  background: linear-gradient(160deg, #152238 0%, #0b1320 62%);
  border: 1px solid var(--accent-glow); border-radius: 16px;
  padding: clamp(18px, 3vw, 28px);
  font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 6vw, 44px);
  line-height: 1; letter-spacing: .6px; text-transform: uppercase; color: var(--text);
  box-shadow: 0 22px 50px -30px var(--accent-glow);
}
.trophy-icon { display: block; font-size: .7em; margin-bottom: 8px; }

.fixture-tabs { display: flex; gap: 6px; padding: 5px; background: #0b111c;
  border: 1px solid var(--border); border-radius: 10px; flex-wrap: wrap; }
.fixture-tabs .tab {
  flex: 1; min-width: 150px; min-height: 42px; padding: 10px 18px;
  border: 1px solid transparent; border-radius: 7px; background: none; color: var(--text-muted);
  font: inherit; font-size: 13px; font-weight: 700; letter-spacing: .4px; cursor: pointer;
}
.fixture-tabs .tab:hover { color: var(--text); }
.fixture-tabs .tab.active { background: var(--accent-soft); border-color: var(--accent-glow); color: var(--accent); }

.match-result-card { display: flex; flex-direction: column; gap: 12px; }
.match-result-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.match-result-title {
  font-family: var(--font-display); font-weight: 800; font-size: 15px;
  letter-spacing: 1.5px; text-transform: uppercase;
}
.match-result-tag { font-family: var(--font-mono, ui-monospace, monospace); font-size: 9.5px;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-faint); }
.match-story { display: flex; flex-direction: column; gap: 6px; }
.match-story-line {
  margin: 0; font-size: 12.5px; line-height: 1.5; color: #cbd5e1;
  background: #0b111c; border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 9px; padding: 10px 12px; text-wrap: pretty;
}
.scorer-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.scorer-list { background: #0b111c; border: 1px solid var(--border); border-radius: 10px; padding: 12px 13px; }
.scorer-list-team {
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 9.5px; font-weight: 700;
  letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-faint); margin-bottom: 9px;
}
.scorer-row { font-size: 12.5px; padding: 4px 0; }
.scorer-empty { font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; color: var(--text-faint); }
.match-rating-pitches { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; }

.standings-table { width: 100%; border-collapse: collapse; }
.standings-table th {
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 9px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-faint);
  text-align: right; padding: 10px 8px; border-bottom: 1px solid var(--border); background: #0b111c;
}
.standings-table th:nth-child(2) { text-align: left; }
.standings-table td {
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; text-align: right;
  padding: 11px 8px; border-bottom: 1px solid rgba(255, 255, 255, .05); color: var(--text-muted);
}
.standings-table td:nth-child(2) { text-align: left; font-family: var(--font-body);
  font-size: 13px; font-weight: 600; color: var(--text); }
.standings-table .rank-cell { font-family: var(--font-display); font-size: 17px; font-weight: 800; color: var(--text-faint); }
.standings-table tr.me td { background: rgba(255, 149, 0, .05); }
.standings-table tr.winner .rank-cell { color: var(--accent); }

/* ============================ OYUNCU VERİTABANI ============================ */
.player-db-toolbar { display: flex; gap: 9px; flex-wrap: wrap; }
.player-db-toolbar input {
  flex: 1; min-width: min(100%, 220px); background: #0b111c;
  border: 1px solid var(--border-strong); border-radius: 8px; padding: 12px 13px;
  color: var(--text); font-family: var(--font-body); font-size: 14px;
}
.player-db-toolbar input:focus { outline: none; border-color: var(--accent); }
.player-db-toolbar select {
  min-height: 46px; background: #0b111c; border: 1px solid var(--border-strong);
  border-radius: 8px; padding: 12px 13px; color: var(--text-muted);
  font-family: var(--font-body); font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.player-db-toolbar select:focus { outline: none; border-color: var(--accent); }

.pdb-table { width: 100%; border-collapse: collapse; }
.pdb-table th {
  position: sticky; top: 0; z-index: 1; background: #0b111c;
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 9px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-faint);
  text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--border);
}
.pdb-table td { padding: 11px 12px; border-bottom: 1px solid rgba(255, 255, 255, .05); font-size: 12.5px; }
.pdb-table tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .012); }
.pdb-table tbody tr:hover td { background: var(--card-hover); }
.pdb-rating {
  font-family: var(--font-display); font-weight: 800; font-size: 20px; line-height: 1;
  color: var(--text); white-space: nowrap;
}
.pdb-name { font-size: 13.5px; font-weight: 600; }
.pdb-pos {
  display: inline-block; font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px; font-weight: 700; letter-spacing: .8px;
  border: 1px solid var(--border-strong); border-radius: 4px; padding: 3px 7px;
}
.pdb-season { font-family: var(--font-mono, ui-monospace, monospace); font-size: 10.5px; line-height: 1.5; }
.pdb-value { font-family: var(--font-mono, ui-monospace, monospace); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.pdb-icon-tag { color: var(--icon); }

/* ================================== ÇARK ================================== */
.wheel-round { display: flex; flex-direction: column; gap: 14px; }
.wheel-turn-banner {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(20px, 4vw, 30px);
  line-height: 1.05; letter-spacing: .6px; text-transform: uppercase; text-align: center;
  color: var(--text-muted); padding: 14px 12px;
  background: #0b111c; border: 1px solid var(--border); border-radius: 12px;
}
.wheel-turn-banner.mine { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-glow); }
.wheel-stage { margin: 0 auto; }
.wheel-pointer { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .6)); }
.wheel-pointer.landed { filter: drop-shadow(0 0 10px var(--accent-glow)); }

.prep-wheel-turn-label {
  font-family: var(--font-display); font-weight: 800; font-size: 22px;
  letter-spacing: .8px; text-transform: uppercase; margin-bottom: 11px;
}
.prep-wheel-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.prep-wheel-actions .btn {
  flex: 1; min-width: min(100%, 200px); min-height: 52px;
  font-family: var(--font-display); font-weight: 800; font-size: 18px;
  letter-spacing: 1.2px; text-transform: uppercase;
}
.prep-wheel-row {
  display: flex; align-items: center; justify-content: space-between; gap: 11px;
  padding: 10px 12px; background: #0b111c; border: 1px solid var(--border);
  border-radius: 9px; margin-bottom: 7px; font-size: 12.5px;
}
.prep-wheel-row span:last-child { font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; }
.prep-wheel-row.current { background: var(--accent-soft); border-color: var(--accent-glow); }
.prep-wheel-row.current span:last-child { color: var(--accent); font-weight: 700; }

/* ---------- dar ekran ---------- */
@media (max-width: 760px) {
  .draft-header > .btn { margin-left: 0; }
  .event-log.commentary-log { max-height: none; }
}
@media (max-width: 560px) {
  .timer-label { font-size: 24px; }
  .scoreline { padding: 14px 10px; gap: 8px; }
  .fixture-tabs .tab { min-width: 0; }
}


/* ===================== Minyatür saha v2 (.pitch-dot / .pitch-phase / .pitch-team-tag) =====
   [KULLANICI İSTEĞİ] "Maç anlatımındaki minyatür sahaya oyuncuları ve durum göstergesini ekle."
   views.js'teki createMiniPitch v2 ile birlikte gelir (yeni DOM: 11+11 .pitch-dot, alt
   .pitch-phase durum satırı, köşelerde .pitch-team-tag). Mevcut .pitch-field/.pitch-ball/
   .pitch-caption/.pitch-flash kuralları BİREBİR korunur — bu blok sadece EKLER.
   styles.css'in en sonuna (screens-v2.css'ten sonra) ekle. */

.pitch-dot {
  position: absolute; width: 9px; height: 9px; border-radius: 50%;
  transform: translate(-50%, -50%); z-index: 1;
  border: 1px solid rgba(7, 12, 20, .75);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
  transition: left .42s cubic-bezier(.3, .7, .2, 1);
}
.pitch-dot.home { background: var(--accent); }
.pitch-dot.away { background: #93c5fd; }
.pitch-dot.group-GK { background: #ffd166; width: 10px; height: 10px; }
.pitch-dot.home.group-DF { background: #5eead4; }
.pitch-dot.away.group-DF { background: #7dd3fc; }
.pitch-dot.home.group-FW { background: #fb7185; }
.pitch-dot.away.group-FW { background: #c4b5fd; }

.pitch-team-tag {
  position: absolute; top: 8px; z-index: 2;
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 9px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255, 255, 255, .72);
  text-shadow: 0 1px 4px rgba(0, 0, 0, .8);
  max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pitch-team-tag.left { left: 10px; }
.pitch-team-tag.right { right: 10px; }

/* Pozisyonun hangi aşamada olduğunu söyleyen alt satır — .pitch-caption'ın (GOOOL!/KURTARDI!)
   yerine geçmez, onun altında sürekli akan sakin bir durum göstergesidir. */
.pitch-phase {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); z-index: 2;
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 9.5px; font-weight: 700;
  letter-spacing: .8px; white-space: nowrap; max-width: 92%; overflow: hidden;
  text-overflow: ellipsis; color: rgba(255, 255, 255, .8);
  background: rgba(7, 12, 20, .62); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 20px; padding: 4px 11px;
  opacity: 0; transition: opacity .2s ease, color .2s ease, border-color .2s ease;
}
.pitch-phase.show { opacity: 1; }
.pitch-phase.goal { color: var(--accent); border-color: var(--accent-glow); }
.pitch-phase.save { color: var(--success); border-color: var(--success-glow); }
.pitch-phase.miss { color: var(--text-muted); }
.pitch-phase.yellow { color: #ffd166; border-color: rgba(255, 209, 102, .45); }
.pitch-phase.red { color: var(--danger); border-color: var(--danger-glow); }

@media (max-width: 560px) {
  .pitch-dot { width: 7px; height: 7px; }
  .pitch-dot.group-GK { width: 8px; height: 8px; }
  .pitch-phase { font-size: 8.5px; padding: 3px 9px; }
}


/* ============ Ek katman v3: bağlantı şeridi · ses düğmesi · bütçe uyarısı · draft geçmişi
   ============ mobil teklif barı · lobi/bekleme hizalaması

   [KULLANICI İSTEĞİ] "1, 2, 4, 5, 6, 7'yi yap" (3 hariç):
     1 → lobi + bekleme odası dilini yeni ekranlarla hizala (aşağıdaki son bölüm)
     2 → mobilde draft teklif barını alta sabitle (.bid-panel.sticky-mobile)
     4 → draft geçmişi (.draft-history / .dh-*)
     5 → bütçe & boş slot ön uyarısı (.bid-guard)
     6 → yeniden bağlanma durumu (.conn-banner)
     7 → ses/haptik (.sfx-toggle — sesin kendisi sfx.js'te, dosyasız WebAudio)

   styles.css'in EN SONUNA, screens-v2.css ve mini-pitch-v2.css'ten SONRA ekle.
   Saha blokları (.mini-pitch/.pitch-*, .lineup-pitch*, .lu-*) burada da değiştirilmiyor. */

/* ---------------- 6) bağlantı durumu ---------------- */
.conn-banner {
  position: fixed; left: 50%; top: 0; transform: translate(-50%, -100%);
  z-index: 9999; max-width: min(680px, calc(100% - 20px));
  display: flex; align-items: center; gap: 9px;
  padding: 11px 16px; border-radius: 0 0 12px 12px;
  background: var(--danger-soft); border: 1px solid var(--danger-glow); border-top: none;
  backdrop-filter: blur(8px);
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 11.5px; font-weight: 600;
  line-height: 1.45; color: var(--text); text-align: center;
  box-shadow: 0 14px 34px -18px rgba(0, 0, 0, .9);
  transition: transform .25s var(--ease, ease);
}
.conn-banner.show { transform: translate(-50%, 0); }

/* ---------------- 7) ses aç/kapat ---------------- */
.sfx-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: 0 0 auto; margin-left: 8px;
  border: 1px solid var(--border-strong); border-radius: 8px;
  background: var(--card); color: var(--text); font-size: 15px; line-height: 1; cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.sfx-toggle:hover { border-color: var(--accent); }
.sfx-toggle.off { color: var(--text-faint); border-color: var(--border); }

/* ---------------- 5) bütçe & slot ön uyarısı ---------------- */
.bid-guard {
  display: flex; flex-direction: column; gap: 9px;
  padding: 12px 13px; border-radius: 10px;
  background: #0b111c; border: 1px solid var(--border);
  transition: border-color .15s ease, background .15s ease;
}
.bid-guard.warn { border-color: var(--accent-glow); background: var(--accent-soft); }
.bid-guard.danger { border-color: var(--danger-glow); background: var(--danger-soft); }
.bid-guard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(50%, 120px), 1fr)); gap: 8px; }
.bid-guard-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bid-guard-k {
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 9px; font-weight: 700;
  letter-spacing: 1.3px; text-transform: uppercase; color: var(--text-faint);
}
.bid-guard-v {
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 13px; font-weight: 700;
  color: var(--text); white-space: nowrap;
}
.bid-guard.warn .bid-guard-v { color: var(--accent); }
.bid-guard.danger .bid-guard-v { color: var(--danger); }
.bid-guard-note {
  font-size: 11.5px; line-height: 1.5; color: var(--text-muted); text-wrap: pretty;
  padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .07);
}
.bid-guard.warn .bid-guard-note, .bid-guard.danger .bid-guard-note { color: var(--text); }

/* ---------------- 2) mobilde teklif barı altta sabit ----------------
   Dar ekranda teklif alanı ekranın en altında kalıyordu (draft ekranı uzun) — teklif vermek
   için her turda aşağı kaydırmak gerekiyordu. Artık teklif formu ekranın altına yapışır;
   uyarı/tavan bilgisi normal akışta kalır (yapışan alan sadece giriş + buton). */
@media (max-width: 760px) {
  .bid-panel.sticky-mobile { padding-bottom: 4px; }
  .bid-panel.sticky-mobile .bid-form {
    position: sticky; bottom: 0; z-index: 30;
    margin: 0 -14px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, rgba(11, 17, 28, .86) 0%, #0b111c 42%);
    border-top: 1px solid var(--border-strong);
    backdrop-filter: blur(10px);
  }
  .bid-panel.sticky-mobile .bid-form .btn { box-shadow: none; }
  .view { padding-bottom: 12px; }
}

/* ---------------- 4) draft geçmişi ---------------- */
.draft-history .dh-wrap { display: flex; flex-direction: column; gap: 11px; margin-top: 12px; }
.dh-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 8px; }
.dh-total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 9px 11px; background: #0b111c; border: 1px solid var(--border); border-radius: 9px;
}
.dh-total.me { border-color: var(--accent-glow); background: var(--accent-soft); }
.dh-total-name { font-size: 12px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dh-total-v { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12.5px; font-weight: 700; color: var(--text-muted); }
.dh-total.me .dh-total-v { color: var(--accent); }

.dh-list { display: flex; flex-direction: column; gap: 6px; max-height: 340px; overflow-y: auto; padding-right: 4px; }
.dh-row {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(0, 96px) 82px;
  align-items: center; gap: 10px;
  padding: 9px 11px; background: #0b111c; border: 1px solid var(--border); border-radius: 9px;
}
.dh-row.me { border-color: var(--accent-glow); }
.dh-player { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dh-player b { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dh-rating { font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; color: var(--text-faint); flex: 0 0 auto; }
.dh-buyer {
  font-size: 11.5px; color: var(--text-muted); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dh-price {
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; font-weight: 700;
  color: var(--accent); text-align: right;
}
.dh-price.free { color: var(--text-faint); font-weight: 500; }

@media (max-width: 560px) {
  .dh-row { grid-template-columns: 40px minmax(0, 1fr) 74px; row-gap: 4px; }
  .dh-buyer { grid-column: 2 / 4; font-size: 10.5px; }
}

/* ---------------- 1) lobi + bekleme odası hizalaması ----------------
   Yeni ekranlar (draft/dizilim/anlatım) akışkan auto-fit ızgaralar kullanıyor; lobi ve bekleme
   odası ise sabit kolon genişlikleriyle (1fr 1fr / 1fr 372px) kalmıştı — ara genişliklerde
   (tablet, yarım pencere) yeni ekranlarla aynı ritmi tutmuyordu. Aşağısı SADECE ızgara/tipografi
   hizalaması; renkler, bileşen yapısı ve içerik aynı. */
.lobby-mode-picker { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.lobby-features { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.wr-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.wr-title, .lobby-title { text-wrap: balance; }
.lobby-sub, .wr-title-sub { text-wrap: pretty; }

/* Bekleme odasındaki meta şeridi dar ekranda bölünürken kenar çizgileri kırılıyordu. */
.wr-meta { flex-wrap: wrap; row-gap: 10px; }
.wr-meta > div:first-child { padding-left: 0; border-left: none; }

/* Lobi ve bekleme odası etiket/rozet ölçeği, yeni ekranlardaki mono etiketlerle aynı olsun. */
.lobby-hero-badge, .wr-live, .wr-label {
  font-family: var(--font-mono, ui-monospace, monospace); letter-spacing: 2px; text-transform: uppercase;
}
.lobby-feature-code, .wr-row-sub, .wr-row-tag {
  font-family: var(--font-mono, ui-monospace, monospace);
}


/* ===================== Takas Turu (.trade / .trade-*) =====================
   [KULLANICI İSTEĞİ, KARARLAŞTIRILDI — TAKAS TURU] "Kodlarını yaz, 3 mod için geçerli olsun,
   çark gibi isteğe bağlı gelsin, açıklamaları ayarla, responsive olsun."
   Sunucu: server/src/trade/TradeEngine.js + sockets/tradeSockets.js
   İstemci: views.js renderTradeRound + app.js trade:* handler'ları

   Kurallar ekranda görünür: 1↔1 · para yok · kaleci hariç · aynı kişiyle en fazla 2 takas ·
   takastan sonra iki kadro da formasyon kurabilmeli · 5 dk (herkes "bitti" derse erken kapanır).

   styles.css'in sonuna (extras-v2.css'ten sonra) ekle. Kırılma noktaları: 900px ve 560px. */

.view.trade { display: flex; flex-direction: column; gap: 16px; }

/* ---------- üst bar ---------- */
.trade-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding-bottom: 14px; border-bottom: 1px solid var(--border);
}
.trade-head-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.trade-head-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.trade-live {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 10px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase; color: var(--success);
}
.trade-live::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--success);
  box-shadow: 0 0 10px var(--success-glow); animation: dot-pulse 1.6s ease-in-out infinite;
}
.trade-badge {
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 10.5px; color: var(--text-muted);
  padding: 5px 9px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 5px;
  line-height: 1.4;
}
.timer-wrap.trade-timer { min-width: 190px; margin: 0; }
.trade-clock {
  font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1;
  color: var(--accent); text-align: right;
}
.timer-wrap.trade-timer.critical .trade-clock { color: var(--danger); }
.trade-done-btn { min-height: 44px; }

.trade-intro { display: flex; flex-direction: column; gap: 8px; }
.trade-title {
  margin: 0; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(28px, 6vw, 42px); line-height: .95; letter-spacing: .6px; text-transform: uppercase;
}
.trade-sub { margin: 0; font-size: 13px; color: var(--text-muted); line-height: 1.6; max-width: 76ch; text-wrap: pretty; }

/* ---------- ana ızgara ---------- */
.trade-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; align-items: start; }

/* ---------- kadro listeleri ---------- */
.trade-squad-hint {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 9.5px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--text-faint); margin: -6px 0 10px;
}
.trade-pair-limit { color: var(--text-faint); }
.trade-pair-limit.full { color: var(--danger); }

.trade-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 11px; }
.trade-tab {
  min-height: 38px; padding: 9px 14px; border: 1px solid var(--border);
  border-radius: 7px; background: #0b111c; color: var(--text-muted);
  font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.trade-tab:hover { border-color: var(--accent-glow); color: var(--text); }
.trade-tab.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

.trade-list { display: flex; flex-direction: column; gap: 6px; max-height: 420px; overflow-y: auto; padding-right: 4px; }
.trade-row {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 42px;
  align-items: center; gap: 10px; width: 100%;
  padding: 10px 11px; border: 1px solid var(--border); border-radius: 9px;
  background: #0b111c; color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.trade-row:hover { border-color: var(--accent-glow); }
.trade-row.selected { border-color: var(--accent); background: var(--accent-soft); }
.trade-row.disabled { opacity: .45; cursor: not-allowed; }
.trade-row.disabled:hover { border-color: var(--border); }
.trade-row-name {
  font-size: 13px; font-weight: 600; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.trade-row-tag {
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 8.5px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; white-space: nowrap;
}
.trade-row-tag.gk { color: var(--text-faint); }
.trade-row-tag.locked { color: #ffd166; }
.trade-row-rating {
  font-family: var(--font-display); font-weight: 800; font-size: 19px; line-height: 1;
  text-align: right; color: var(--text);
}
.trade-row-rating.hot { color: var(--accent); }

/* ---------- gelen teklifler ---------- */
.panel.trade-incoming { border-color: var(--accent-glow); background: var(--accent-soft); }
.trade-offer-list { display: flex; flex-direction: column; gap: 9px; }
.trade-offer {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px;
  background: #0b111c; border: 1px solid var(--border-strong); border-radius: 11px; padding: 13px 14px;
}
.trade-offer-from {
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 9.5px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-faint);
}
.trade-offer-pair { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.trade-offer-side { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; }
.trade-offer-rating { font-family: var(--font-display); font-weight: 800; font-size: 19px; line-height: 1; color: var(--accent); }
.trade-swap-icon { font-family: var(--font-mono, ui-monospace, monospace); font-size: 13px; color: var(--text-faint); }
.trade-offer-note {
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 10px; line-height: 1.5;
  color: var(--text-muted); margin-top: 8px;
}
.trade-offer-note.bad { color: var(--danger); }
.trade-offer-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn.trade-accept { border-color: var(--success); color: var(--success); background: rgba(34, 197, 94, .14); }
.btn.trade-accept:hover { background: rgba(34, 197, 94, .22); }

/* ---------- teklif kurucu ---------- */
.panel.trade-builder { background: linear-gradient(160deg, #152238 0%, #0c1421 62%); }
.panel.trade-builder.ok { border-color: var(--accent-glow); }
.panel.trade-builder.bad { border-color: var(--danger-glow); }
.trade-builder-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch; gap: clamp(10px, 2vw, 16px);
}
.trade-slot {
  display: flex; flex-direction: column; justify-content: center; gap: 6px; min-height: 96px;
  background: rgba(7, 12, 20, .6); border: 1px dashed var(--border-strong); border-radius: 11px; padding: 14px;
}
.trade-slot.filled { border-style: solid; border-color: var(--accent-glow); }
.trade-slot-k {
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 9px; font-weight: 700;
  letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-faint);
}
.trade-slot-name {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(20px, 3.4vw, 27px);
  line-height: 1; letter-spacing: .5px; text-transform: uppercase; color: var(--text-faint);
}
.trade-slot.filled .trade-slot-name { color: var(--text); }
.trade-slot-meta { font-family: var(--font-mono, ui-monospace, monospace); font-size: 10.5px; color: var(--text-muted); }
.trade-swap-big {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 28px; color: var(--accent);
}

/* ---------- formasyon önizlemesi (takasın asıl amacı) ---------- */
.trade-formations {
  display: flex; flex-direction: column; gap: 11px; margin-top: 14px;
  background: #0b111c; border: 1px solid var(--border); border-radius: 11px; padding: 13px 14px;
}
.trade-formations-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.trade-formations-k {
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 9px; font-weight: 700;
  letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-faint);
}
.trade-valid { font-family: var(--font-mono, ui-monospace, monospace); font-size: 9.5px; color: var(--text-faint); }
.trade-valid.ok { color: var(--success); }
.trade-valid.bad { color: var(--danger); }
.trade-formation-pills { display: flex; gap: 7px; flex-wrap: wrap; }
.trade-formation {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 7px;
  border: 1px solid var(--border); background: #0b111c;
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 11.5px; font-weight: 700; letter-spacing: .8px;
}
.trade-formation.off { color: #3a4763; }
.trade-formation.on { color: var(--accent); border-color: var(--accent-glow); background: var(--accent-soft); }
.trade-formation.new { color: var(--success); border-color: rgba(34, 197, 94, .45); background: rgba(34, 197, 94, .1); }
.trade-formation i {
  font-style: normal; font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: inherit;
}
.trade-formation.lost i { color: var(--danger); }
.trade-formation-note { font-size: 11.5px; color: var(--text-muted); line-height: 1.5; text-wrap: pretty; }

.trade-send-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.btn.trade-send {
  flex: 1; min-width: min(100%, 220px); min-height: 52px; padding: 14px 20px;
  font-family: var(--font-display); font-weight: 800; font-size: 19px;
  letter-spacing: 1.3px; text-transform: uppercase;
}
.btn.trade-send:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.trade-send-hint {
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 10px; color: var(--text-faint);
  line-height: 1.5; max-width: 260px;
}

/* ---------- listeler ---------- */
.trade-mini-list { display: flex; flex-direction: column; gap: 7px; }
.trade-mini-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px;
  background: #0b111c; border: 1px solid var(--border); border-radius: 9px; padding: 10px 11px;
}
.trade-mini-text { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trade-mini-sub { font-family: var(--font-mono, ui-monospace, monospace); font-size: 9.5px; color: var(--text-faint); margin-top: 3px; }
.trade-done-row {
  display: flex; align-items: center; gap: 10px; font-size: 12.5px; line-height: 1.45; text-wrap: pretty;
  background: #0b111c; border: 1px solid var(--border); border-left: 3px solid var(--success);
  border-radius: 9px; padding: 10px 12px;
}
.trade-done-tag {
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 9px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--success); flex: 0 0 auto;
}
.trade-empty { font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; }

/* ---------- tur durumu ---------- */
.trade-status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 9px; }
.trade-status-card {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; background: #0b111c; border: 1px solid var(--border); border-radius: 9px;
}
.trade-status-card.done { border-color: rgba(34, 197, 94, .3); background: rgba(34, 197, 94, .06); }
.trade-status-name { font-size: 12.5px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trade-status-tag {
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 9.5px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; color: var(--accent); white-space: nowrap;
}
.trade-status-card.done .trade-status-tag { color: var(--success); }

/* ---------- dar ekran ---------- */
@media (max-width: 900px) {
  .trade-offer { grid-template-columns: minmax(0, 1fr); }
  .trade-offer-actions .btn { flex: 1; }
  .trade-send-hint { max-width: none; }
}
@media (max-width: 560px) {
  .trade-head-right { width: 100%; }
  .timer-wrap.trade-timer { flex: 1; min-width: 0; }
  .trade-clock { font-size: 22px; }
  .trade-builder-row { grid-template-columns: minmax(0, 1fr); }
  .trade-swap-big { transform: rotate(90deg); font-size: 22px; }
  .trade-row { grid-template-columns: 40px minmax(0, 1fr) 40px; row-gap: 3px; }
  .trade-row-tag { grid-column: 2 / 4; }
  .trade-list { max-height: none; }
}


/* ============ Ses v2 + buton cilası ============
   [KULLANICI İSTEĞİ] "Bütün ekranları iyice incele, butonları dahil hallet. Ses efektleri daha
   iyi olabilir: gol olunca goool sesi, direkten dönünce direkten dönme sesi, maç bitince düdük."

   Ses tarafı tamamen sfx.js + views.js/app.js içinde (dosyasız WebAudio). Burada iki şey var:
     1) DİREK sonucunun görsel karşılığı (.pitch-caption.post / .pitch-phase.post)
     2) Tüm ekranlardaki butonların ortak davranış cilası: basma geri bildirimi, klavye odağı,
        devre dışı hali, dokunma hedefi. Yeni renk/token tanımlanmıyor.

   styles.css'in EN SONUNA (trade-v2.css'ten sonra) ekle. */

/* ---------- 1) direkten dönme (minyatür saha) ---------- */
.pitch-caption.post {
  color: #ffd166;
  text-shadow: 0 2px 12px rgba(255, 209, 102, .5);
}
.pitch-phase.post { color: #ffd166; border-color: rgba(255, 209, 102, .5); }
/* Direk vuruşunda kale ağzı sarı parlar (gol turuncusundan ayrışsın). */
.pitch-flash.post.flash { background: rgba(255, 209, 102, .5); }

/* ---------- 2) buton davranışı: tüm ekranlarda ortak ---------- */
button, .btn, .tab, .pill, summary { -webkit-tap-highlight-color: transparent; }

/* Basma geri bildirimi — sesle birlikte dokunsal bir "oturma" hissi. */
.btn:active:not(:disabled),
.lu-tab:active, .trade-tab:active, .fixture-tabs .tab:active,
.lu-formation:active, .lu-opt:active, .trade-row:not(.disabled):active,
.sfx-toggle:active, .playback-controls .btn:active:not(:disabled) {
  transform: translateY(1px);
}

/* Klavye kullanıcısı için görünür odak — fare tıklamasında çıkmaz (:focus-visible). */
button:focus-visible, .btn:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, details:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Devre dışı butonlar her ekranda AYNI görünsün (bazı ekranlarda sadece opacity vardı). */
button:disabled, .btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* Dokunma hedefi: mobilde 44px altı buton kalmasın (küçük ikon butonları hariç). */
@media (max-width: 760px) {
  .btn, .lu-tab, .trade-tab, .fixture-tabs .tab, .playback-controls .btn {
    min-height: 44px;
  }
}

/* Yükleniyor/bekliyor durumundaki butonlar (ör. "Hazırsın — diğerleri bekleniyor") tıklanabilir
   kalır ama ikincil okunur — kullanıcı yanlışlıkla iki kez basmasın diye imleç değişir. */
.btn.voted, .btn.waiting { cursor: default; }


/* ---------- 3) tipografi cilası: sarma/taşma kusurları ----------
   [KULLANICI İSTEĞİ] "Kötü, basit gözüken hiçbir şey kalmasın." — ekran taramasında bulunan
   tekrar eden iki kusur: (a) küçük mono etiketler iki satıra sarıyor ve hizayı bozuyor,
   (b) isim hücreleri yanında bir rozet varken gereksiz yere kısalıyor. */
.lu-card-meta, .lu-stat-k, .trade-badge, .trade-formations-k, .trade-slot-k, .trade-valid,
.trade-pair-limit, .trade-status-tag, .dh-total-v, .dh-price, .bid-guard-k, .bid-guard-v,
.budget-card .slots, .match-result-tag, .scorer-list-team, .pdb-value, .pdb-pos,
.draft-header .muted, .formation-badge, .lu-formation-label, .conn-banner {
  white-space: nowrap;
}
.lu-card-title, .trade-status-name, .dh-total-name, .match-result-title {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Rozetli isim hücrelerinde isim, rozeti itmek yerine kendi kısalsın. */
.dh-player b, .trade-row-name, .pdb-name { flex: 0 1 auto; min-width: 0; }
/* Uzun açıklama satırları (etiket + metin) hizada kalsın. */
.big-gap-badge, .bid-guard-note, .trade-offer-note, .lu-warn { min-width: 0; }

/* ============ v3: foil icon kartları + ses seviyesi + draft ipuçları ============
   [KULLANICI İSTEĞİ] 1) Icon kartları normal karttan az ayrışıyor → foil çerçeve.
                      2) Ses sadece aç/kapa → seviye kaydırıcısı.
                      3) Draft ekranına ilk kez gelen kavramlarda kayboluyor → ipucu katmanı.
   styles.css'in EN SONUNA eklenir. Yeni renk token'ı yok — mevcut var(--icon) moru kullanılıyor. */

/* ---------- 1) foil icon kartı ---------- */
@keyframes foil-sweep {
  0%   { transform: translateX(-120%) rotate(8deg); }
  100% { transform: translateX(220%) rotate(8deg); }
}

.player-card.icon {
  position: relative;
  overflow: hidden;
  /* Çift çerçeve: içte mor, dışta altın — normal kartın tek gri kenarından net ayrışır. */
  border-color: var(--icon, #a855f7);
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(168, 85, 247, .26), transparent 60%),
    linear-gradient(170deg, #1b1330 0%, #120e20 55%, #0d0a17 100%);
  box-shadow:
    0 0 0 1px rgba(255, 214, 122, .38),
    0 8px 26px rgba(120, 50, 200, .3),
    inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* Taranan parıltı — foil hissi. Çok yavaş ve düşük opaklık: dikkat dağıtmaz. */
.player-card.icon::before {
  content: '';
  position: absolute;
  top: -20%; left: 0;
  width: 42%; height: 140%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .14), transparent);
  animation: foil-sweep 5.5s ease-in-out infinite;
  pointer-events: none;
}
/* Üst köşede altın bir kırpma — "özel seri" işareti. */
.player-card.icon::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 46px; height: 46px;
  background: linear-gradient(225deg, rgba(255, 214, 122, .55), transparent 62%);
  pointer-events: none;
}
.player-card.icon .rating { color: #ffd67a; }
.player-card.icon .name { color: #f3ecff; }
.player-card.icon .club { color: #c4b5fd; }
.player-card.icon .icon-flag {
  background: linear-gradient(135deg, #ffd67a, #a855f7);
  color: #1b1030;
  font-weight: 800;
  border: none;
  box-shadow: 0 2px 10px rgba(168, 85, 247, .45);
}
/* Kadro chip'i ve veritabanı satırı da aynı dili konuşsun (dizilim sahasındaki mor glow ile eşleşir). */
.squad-chip.icon {
  border-color: rgba(168, 85, 247, .45);
  background: linear-gradient(120deg, rgba(168, 85, 247, .12), transparent 70%);
}
.squad-chip.icon .n { color: #e9ddff; }

@media (prefers-reduced-motion: reduce) {
  .player-card.icon::before { animation: none; opacity: .5; }
}

/* ---------- 2) ses seviyesi paneli ---------- */
.sfx-wrap { position: relative; display: inline-flex; align-items: center; gap: 2px; }
.sfx-vol-btn {
  min-width: 18px; height: 26px; padding: 0 3px;
  border: none; background: none; cursor: pointer;
  color: #93a0b8; font-size: 10px; line-height: 1;
}
.sfx-vol-btn:hover { color: var(--accent); }

.sfx-pop {
  display: none;
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  width: 216px; padding: 12px 13px;
  background: #0e1826;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
}
.sfx-pop.open { display: block; }
.sfx-pop-title {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
  color: #56617a; white-space: nowrap; margin-bottom: 9px;
}
.sfx-pop-row { display: flex; align-items: center; gap: 9px; }
.sfx-pop-ico { font-size: 13px; }
.sfx-pop-val {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px; font-weight: 700; color: var(--accent);
  min-width: 34px; text-align: right; white-space: nowrap;
}
.sfx-pop-note {
  margin-top: 9px; font-size: 10.5px; color: #56617a; line-height: 1.45;
}
.sfx-range {
  flex: 1; min-width: 0; height: 22px;
  -webkit-appearance: none; appearance: none; background: none; cursor: pointer;
}
.sfx-range::-webkit-slider-runnable-track {
  height: 4px; border-radius: 3px; background: rgba(255, 255, 255, .14);
}
.sfx-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 15px; height: 15px; margin-top: -5.5px;
  border-radius: 50%; background: var(--accent); border: none;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}
.sfx-range::-moz-range-track { height: 4px; border-radius: 3px; background: rgba(255, 255, 255, .14); }
.sfx-range::-moz-range-thumb {
  width: 15px; height: 15px; border: none; border-radius: 50%; background: var(--accent);
}
@media (max-width: 560px) {
  /* Dar ekranda panel üst bardan taşmasın. */
  .sfx-pop { right: -6px; width: min(216px, calc(100vw - 28px)); }
}

/* ---------- 3) draft ipucu katmanı ---------- */
.coach {
  margin: 12px 0 0;
  background: linear-gradient(135deg, rgba(255, 149, 0, .07), transparent 62%), #0e1826;
  border: 1px solid rgba(255, 149, 0, .26);
  border-radius: 12px;
  overflow: hidden;
}
.coach-summary {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; cursor: pointer; list-style: none;
  min-height: 44px;
}
.coach-summary::-webkit-details-marker { display: none; }
.coach-summary::after {
  content: '▾'; margin-left: auto; color: #56617a; font-size: 11px;
  transition: transform .18s ease;
}
.coach[open] .coach-summary::after { transform: rotate(180deg); }
.coach-badge {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
  color: #2b1400; background: var(--accent);
  padding: 4px 8px; border-radius: 5px; white-space: nowrap;
}
.coach-summary-text { font-size: 13px; font-weight: 600; color: #cbd5e1; }
.coach-body {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 10px; padding: 0 14px 12px;
}
.coach-tip {
  display: flex; gap: 10px; align-items: flex-start;
  background: #0b111c; border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 9px; padding: 11px 12px;
}
.coach-ico { font-size: 15px; line-height: 1.2; flex-shrink: 0; }
.coach-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.coach-text b { font-size: 12.5px; color: #f1f5f9; }
.coach-text span { font-size: 11.5px; line-height: 1.5; color: #93a0b8; text-wrap: pretty; }
.coach-dismiss { margin: 0 14px 14px; }


/* ==========================================================================
   [TASARIM v2] HESAP (Giriş / Kayıt / Hesabın) + GÜNLÜK ÖDÜL
   ========================================================================== */
.auth-view, .dr-view { gap: 28px; }
.auth-view .eyebrow, .dr-view .eyebrow {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 2.4px;
  text-transform: uppercase; color: var(--accent);
}
.auth-hero {
  margin: 0; font-family: var(--font-display); font-weight: 900; font-size: clamp(38px, 5.4vw, 60px);
  line-height: .92; text-transform: uppercase; letter-spacing: .3px; text-wrap: balance;
}
.auth-lead { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-muted); max-width: 460px; text-wrap: pretty; }

.auth-view .ticket-btn, .dr-view .ticket-btn {
  padding: 0; overflow: hidden; display: flex; align-items: stretch; border: none;
  box-shadow: 0 6px 16px -6px var(--accent-glow);
}
.ticket-btn .ticket-btn-icon {
  width: 52px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.18); border-right: 1px dashed rgba(255,255,255,.35); font-size: 18px;
}
.ticket-btn .ticket-btn-label {
  flex: 1; padding: 14px 22px; font-family: var(--font-display); font-weight: 800; font-size: 17px;
  letter-spacing: .8px; text-transform: uppercase; text-align: center;
}
.ticket-btn.is-locked, .ticket-btn:disabled {
  background: var(--bg-elevated); color: var(--text-faint); border: 1px solid var(--border-strong);
  box-shadow: none; cursor: not-allowed;
}
.ticket-btn.is-locked .ticket-btn-icon { border-right-color: var(--border-strong); }

/* --- Giriş / Kayıt --- */
.auth-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 452px); gap: 56px; align-items: start; }
.auth-intro { display: flex; flex-direction: column; gap: 28px; }
.auth-intro-text { display: flex; flex-direction: column; gap: 12px; }
.auth-benefits { list-style: none; margin: 0; padding: 0; max-width: 460px; border-top: 1px solid var(--border); }
.auth-benefits li {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 13px 0;
  border-bottom: 1px solid var(--border); font-size: 13.5px; line-height: 1.45; color: #c7cfdd;
}
.auth-benefit-n { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--accent); }

.auth-panel {
  display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden;
}
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--border); }
.auth-tab {
  padding: 16px 0; min-height: 44px; background: transparent; color: var(--text-faint); border: none;
  border-bottom: 3px solid transparent; font-family: var(--font-display); font-weight: 800; font-size: 17px;
  letter-spacing: .8px; text-transform: uppercase; cursor: pointer; transition: color .15s, background .15s;
}
.auth-tab:hover { color: var(--text-muted); }
.auth-tab.active { color: var(--accent); background: rgba(255,149,0,.08); border-bottom-color: var(--accent); }
.auth-form { display: flex; flex-direction: column; gap: 18px; padding: 28px 28px 26px; }
.auth-field { display: flex; flex-direction: column; gap: 7px; }
.auth-label {
  display: flex; justify-content: space-between; gap: 8px; font-family: var(--font-mono); font-size: 10.5px;
  font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-muted);
}
.auth-hint { color: var(--text-faint); font-weight: 500; letter-spacing: .4px; text-transform: none; }
.auth-input {
  width: 100%; box-sizing: border-box; height: 46px; padding: 0 14px; background: #05070c;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--text);
  font-family: var(--font-body); font-size: 15px; outline: none; transition: border-color .15s, box-shadow .15s;
}
.auth-input::placeholder { color: var(--text-faint); }
.auth-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,149,0,.18); }
.auth-input.has-toggle { padding-right: 76px; }
.pw-wrap { position: relative; display: flex; }
.pw-toggle {
  position: absolute; right: 6px; top: 7px; height: 32px; padding: 0 10px; background: none; border: none;
  color: var(--text-muted); font-family: var(--font-mono); font-size: 11px; font-weight: 700; cursor: pointer;
}
.pw-toggle:hover { color: var(--text); }
.pw-strength { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: -10px; }
.pw-bar { height: 4px; border-radius: 2px; background: rgba(255,255,255,.1); transition: background .2s; }
.pw-bar.weak { background: var(--danger); }
.pw-bar.ok { background: var(--success); }
.auth-form .ticket-btn { margin-top: 4px; }
.auth-switch { display: flex; justify-content: center; gap: 6px; font-size: 13px; color: var(--text-muted); }
.auth-link { background: none; border: none; padding: 0; color: var(--accent); font-weight: 700; font-size: 13px; cursor: pointer; }
.auth-link:hover { color: #ffb347; }
.auth-note {
  display: flex; gap: 10px; align-items: flex-start; padding: 14px 28px 16px; border-top: 1px dashed var(--border-strong);
  background: rgba(0,0,0,.2); font-size: 12.5px; line-height: 1.5; color: var(--text-muted);
}

/* Menajer Lisansı kartı */
.lic-card {
  position: relative; width: 380px; max-width: 100%; height: 228px; border-radius: var(--radius-lg);
  background: #0b1422; border: 1px solid rgba(255,149,0,.55); overflow: hidden;
  box-shadow: 0 22px 44px -18px rgba(0,0,0,.8), 0 0 50px -24px rgba(255,149,0,.6);
}
.lic-card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 2px, transparent 2px 12px);
}
.lic-card.large { width: 420px; height: 252px; }
.lic-card.active { border-color: var(--accent); box-shadow: 0 22px 44px -18px rgba(0,0,0,.8), 0 0 60px -22px rgba(255,149,0,.7); }
.lic-strip {
  position: relative; display: flex; align-items: center; justify-content: space-between; margin-right: 56px;
  background: var(--accent); color: var(--accent-ink); padding: 8px 18px; font-family: var(--font-display);
  font-weight: 800; font-size: 13px; letter-spacing: 1.6px; text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
}
.lic-code { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0; }
.lic-logo { position: absolute; top: 8px; right: 14px; width: 30px; height: 30px; border-radius: 7px; }
.lic-body { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 26px 20px 0; min-width: 0; }
.lic-kicker { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--text-faint); }
.lic-status {
  display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 1.8px; text-transform: uppercase; color: var(--success);
}
.lic-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 8px var(--success-glow); flex-shrink: 0; }
.lic-name {
  font-family: var(--font-display); font-weight: 800; font-size: 34px; line-height: 1; text-transform: uppercase;
  letter-spacing: .4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lic-card.large .lic-name { font-size: 40px; }
.lic-name.empty { color: var(--text-faint); }
.lic-email { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lic-foot {
  position: absolute; left: 20px; right: 20px; bottom: 16px; display: flex; justify-content: space-between; gap: 8px;
  border-top: 1px dashed var(--border-strong); padding-top: 10px; font-family: var(--font-mono); font-size: 10.5px;
  color: var(--text-faint); letter-spacing: 1px; text-transform: uppercase;
}
.lic-foot-accent { color: var(--accent); }

/* Hesabın */
.acct-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 48px; align-items: start; }
.acct-side { display: flex; flex-direction: column; gap: 20px; }
.acct-head { display: flex; flex-direction: column; gap: 8px; }
.acct-head p { margin: 0; font-size: 15px; }
.acct-head strong { color: var(--text); font-weight: 600; }
.acct-title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 34px; text-transform: uppercase; letter-spacing: .4px; }
.acct-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.acct-stat { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: var(--card); border: 1px solid var(--border); border-radius: 8px; }
.acct-stat-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-faint); }
.acct-stat-v { font-family: var(--font-display); font-weight: 800; font-size: 30px; line-height: 1; }
.acct-stat-v.accent { color: var(--accent); }
.acct-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.acct-actions .ticket-btn .ticket-btn-label { font-size: 15px; padding: 12px 20px; }

/* --- Günlük Ödül --- */
.dr-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.dr-head-text { display: flex; flex-direction: column; gap: 10px; }
.dr-title { margin: 0; font-family: var(--font-display); font-weight: 900; font-size: clamp(38px, 5vw, 52px); line-height: .92; text-transform: uppercase; }
.dr-lead { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text-muted); max-width: 620px; text-wrap: pretty; }
.dr-kicker { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-faint); }
.dr-reset { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.dr-reset-v { font-family: var(--font-mono); font-size: 15px; font-weight: 700; }
.dr-grid { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 48px; align-items: center; }

/* Çark: mevcut .wheel-stage (260px) büyütülüp etrafına göbek + halka eklendi */
.dr-wheel { position: relative; width: 400px; height: 400px; display: flex; align-items: center; justify-content: center; }
.dr-wheel .wheel-stage { margin: 0; transform: scale(1.42); }
.dr-wheel .wheel-disk { box-shadow: 0 0 0 2px var(--border-strong), 0 0 70px -10px var(--accent-glow); }
.dr-wheel.landed .wheel-disk { box-shadow: 0 0 0 2px var(--success), 0 0 80px -8px var(--success-glow); }
.dr-wheel.landed .wheel-pointer { border-top-color: var(--success); }
.dr-wheel.locked .wheel-disk { filter: grayscale(1) brightness(.45); }
.dr-wheel.locked .wheel-slice-label, .dr-wheel.locked .wheel-pointer { opacity: 0; }
.dr-hub {
  position: absolute; left: 50%; top: 50%; width: 88px; height: 88px; margin: -44px 0 0 -44px; z-index: 4;
  border-radius: 50%; background: var(--bg); border: 2px solid var(--accent); display: flex; align-items: center;
  justify-content: center; font-size: 34px; box-shadow: 0 0 24px rgba(0,0,0,.6);
}
.dr-hub img { width: 44px; height: 44px; border-radius: 9px; }
.dr-wheel.landed .dr-hub { border-color: var(--success); }
.dr-wheel.locked .dr-hub { border-color: rgba(255,255,255,.3); }

.dr-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dr-guest { display: flex; flex-direction: column; gap: 20px; max-width: 540px; }
.dr-guest-perks { display: flex; flex-direction: column; gap: 8px; }
.dr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dr-chip { padding: 6px 12px; border: 1px solid var(--border-strong); border-radius: 4px; font-size: 12.5px; font-weight: 600; color: #c7cfdd; }

.dr-win { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: var(--success-soft); border: 1px solid var(--success); border-radius: 8px; }
.dr-win.big { flex-direction: column; align-items: flex-start; gap: 12px; padding: 22px 24px; }
.dr-win-emoji { font-size: 30px; }
.dr-win-text { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.dr-win-kicker {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 2.4px; text-transform: uppercase; color: var(--success);
}
.dr-win-title { font-family: var(--font-display); font-weight: 900; font-size: clamp(36px, 4.4vw, 56px); line-height: .92; text-transform: uppercase; }
.dr-win-title.small { font-size: 22px; font-weight: 800; color: var(--success); }
.dr-win-desc { margin: 0; font-size: 13.5px; line-height: 1.55; color: #c7cfdd; }
.dr-spinning { display: flex; flex-direction: column; gap: 10px; }

.dr-progress { position: relative; display: flex; flex-direction: column; gap: 16px; overflow: hidden; }
.dr-progress::before { content: ''; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--accent), transparent 75%); }
.dr-progress-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.dr-progress-title { font-family: var(--font-display); font-weight: 800; font-size: 19px; letter-spacing: .4px; text-transform: uppercase; }
.dr-progress-count { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--accent); }
.dr-progress-text { font-size: 13px; }

.dr-inv { display: flex; flex-direction: column; gap: 14px; }
.dr-inv-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dr-inv-head h3 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: .4px; text-transform: uppercase; }
.dr-inv-sub { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.dr-inv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.dr-perk {
  display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 18px; background: var(--card);
  border: 1px solid var(--border); border-radius: 10px; transition: box-shadow .4s, border-color .4s;
}
.dr-perk.has { border-color: rgba(255,149,0,.45); }
.dr-perk.empty { opacity: .45; }
.dr-perk.fresh { border-color: var(--success); box-shadow: 0 0 0 1px var(--success) inset, 0 0 28px -8px var(--success-glow); }
.dr-perk-top { display: flex; align-items: center; justify-content: space-between; }
.dr-perk-emoji { font-size: 26px; line-height: 1; }
.dr-perk-count { font-family: var(--font-mono); font-size: 13px; font-weight: 700; padding: 3px 8px; border-radius: 4px; background: rgba(255,255,255,.08); color: var(--text-faint); }
.dr-perk.has .dr-perk-count { background: var(--accent); color: var(--accent-ink); }
.dr-perk.fresh .dr-perk-count { background: var(--success); color: #04210e; }
.dr-perk-name { font-family: var(--font-display); font-weight: 800; font-size: 17px; line-height: 1.05; text-transform: uppercase; }
.dr-perk-desc { font-size: 11.5px; line-height: 1.45; color: var(--text-muted); }

@media (max-width: 900px) {
  .auth-grid, .acct-grid, .dr-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .auth-panel { order: -1; }
  .dr-grid .dr-wheel { justify-self: center; }
  .dr-head { flex-direction: column; align-items: flex-start; }
  .dr-reset { align-items: flex-start; }
  .acct-stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .dr-wheel { width: 300px; height: 300px; }
  .dr-wheel .wheel-stage { transform: scale(1.06); }
  .dr-hub { width: 64px; height: 64px; margin: -32px 0 0 -32px; font-size: 24px; }
  .dr-hub img { width: 32px; height: 32px; }
  .auth-form { padding: 22px 18px; }
  .auth-note { padding: 12px 18px 14px; }
  .lic-card, .lic-card.large { width: 100%; }
}


/* ==========================================================================
   [TASARIM v3] E-posta doğrulama duvarı + hesap hatırlatması + çark dönüş durumu
   ========================================================================== */
.lic-status.pending { color: var(--accent); }
.lic-status.pending .lic-dot { background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); animation: vg-pulse 1.6s ease-in-out infinite; }
.lic-card.pending { border-color: rgba(255,149,0,.55); border-style: dashed; }
@keyframes vg-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.vg-view { padding-top: 12px; }
.vg-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 56px; align-items: center; max-width: 1060px; }
.vg-card { position: relative; }
.vg-card::after {
  content: ''; position: absolute; inset: -40px; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,149,0,.12), transparent);
}
.vg-main { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.vg-email { color: var(--text); font-weight: 600; word-break: break-all; }
.vg-step { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vg-step-t { color: var(--text); font-weight: 600; }
.vg-step-s { color: var(--text-muted); font-size: 12.5px; overflow-wrap: anywhere; }
.vg-note { border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); padding: 12px 16px; max-width: 520px; }
.vg-view .acct-actions .ticket-btn:disabled .ticket-btn-label { font-variant-numeric: tabular-nums; }

.acct-verify {
  display: flex; align-items: center; gap: 12px; margin-top: 6px; padding: 12px 14px;
  background: var(--accent-soft); border: 1px solid rgba(255,149,0,.45); border-radius: var(--radius-sm);
}
.acct-verify-icon { font-size: 20px; line-height: 1; }
.acct-verify-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; font-size: 12.5px; color: var(--text-muted); }
.acct-verify-text strong { color: var(--text); font-size: 13.5px; }

.dr-spinning { display: flex; flex-direction: column; gap: 12px; }
.dr-win-kicker.accent { color: var(--accent); }
.dr-win-kicker.accent .lic-dot { background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); animation: vg-pulse 1s ease-in-out infinite; }
.dr-spin-bar { height: 4px; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; }
.dr-spin-bar span { display: block; height: 100%; width: 0; background: var(--accent); animation: dr-fill linear forwards; }
@keyframes dr-fill { to { width: 100%; } }
.dr-win-badge {
  align-self: flex-start; font-family: var(--font-mono); font-size: 12px; font-weight: 700; padding: 3px 8px;
  border-radius: 4px; background: var(--success); color: #04210e;
}

@media (max-width: 900px) {
  .vg-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .vg-card { justify-self: center; }
}
@media (max-width: 480px) {
  .acct-verify { flex-wrap: wrap; }
  .acct-verify .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .lic-status.pending .lic-dot, .dr-win-kicker.accent .lic-dot { animation: none; }
}

/* ========================= Üst bar v2 — .tb-* =========================
   [KULLANICI İSTEĞİ] "Header'daki butonlar çok kötü ve basit duruyor, güzelleştir." Emoji'li
   çerçeveli düğmeler yerine: segmentli nav tepsisi (SVG ikon + etiket), durum çipleri (canlı
   nabız, kopyalanabilir oda kodu, bütçe), birleşik ses kontrolü, misafire amber "Giriş Yap",
   girişliye avatar + hesap menüsü. Renkler mevcut token'lardan. */
.topbar {
  justify-content: flex-start; gap: 14px; padding: 10px 22px;
  background: linear-gradient(180deg, rgba(14, 24, 38, .94), rgba(7, 12, 20, .92));
}
.topbar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, var(--accent-glow) 16%, transparent 52%);
}
.brand { flex: 0 0 auto; font-size: 22px; letter-spacing: .6px; }
.brand-icon { width: 32px; height: 32px; }

.tb-nav {
  display: flex; align-items: center; gap: 2px; padding: 3px; margin-left: 8px; min-width: 0;
  background: rgba(255, 255, 255, .025); border: 1px solid var(--border); border-radius: 10px;
}
.tb-link {
  position: relative; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px;
  border: 0; border-radius: 7px; background: none; color: var(--text-muted);
  font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease);
}
.tb-link:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
.tb-link.active { color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px rgba(255, 149, 0, .28); }
.tb-link.leave:hover { color: var(--danger); background: var(--danger-soft); }
.tb-link svg, .tb-auth-btn svg, .tb-ico svg { flex: 0 0 auto; display: block; }
.tb-ico { display: inline-flex; flex: 0 0 auto; }
.tb-link.has-dot::after {
  content: ''; position: absolute; top: 6px; left: 23px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 2px #0c1522, 0 0 8px var(--accent-glow);
}

.topbar-right { margin-left: auto; gap: 8px; }
.topbar-status { display: flex; align-items: center; gap: 6px; padding: 0; background: none; border: 0; border-radius: 0; }
.topbar-status:empty { display: none; }
.tb-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 999px;
  border: 1px solid var(--border); background: rgba(255, 255, 255, .03); color: var(--text-muted);
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; white-space: nowrap; flex: 0 0 auto;
}
.tb-chip b { color: var(--text); font-weight: 700; letter-spacing: .8px; }
.tb-chip-k { font-size: 9.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-faint); }
.tb-chip.conn { font-weight: 700; letter-spacing: .4px; }
.tb-chip.conn.on { color: var(--success); border-color: rgba(34, 197, 94, .26); background: var(--success-soft); }
.tb-chip.conn.off { color: var(--danger); border-color: rgba(251, 65, 85, .32); background: var(--danger-soft); }
.tb-pulse { position: relative; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.tb-chip.conn.on .tb-pulse::after {
  content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid currentColor;
  animation: tb-ping 1.8s var(--ease) infinite;
}
@keyframes tb-ping { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
.tb-chip.code { cursor: pointer; transition: border-color .15s var(--ease); }
.tb-chip.code .tb-ico { color: var(--text-faint); transition: color .15s var(--ease); }
.tb-chip.code:hover { border-color: var(--accent); }
.tb-chip.code:hover .tb-ico { color: var(--accent); }
.tb-chip.who span { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.tb-chip.money { border-color: rgba(255, 149, 0, .3); background: var(--accent-soft); }
.tb-chip.money b { color: var(--accent); }
.tb-chip.perk { color: var(--surprise); border-color: rgba(34, 211, 238, .3); background: var(--surprise-soft); font-family: var(--font-body); font-weight: 600; }

.sfx-wrap { height: 32px; padding: 0 2px; gap: 0; border: 1px solid var(--border); border-radius: 9px; background: rgba(255, 255, 255, .03); transition: border-color .15s var(--ease); }
.sfx-wrap:hover { border-color: var(--border-strong); }
.sfx-toggle { width: 30px; height: 28px; margin: 0; border: 0; border-radius: 7px; background: none; color: var(--text); }
.sfx-toggle:hover { border: 0; color: var(--accent); }
.sfx-toggle.off { color: var(--text-faint); border: 0; }
.sfx-vol-btn { display: inline-flex; align-items: center; justify-content: center; height: 28px; min-width: 18px; padding: 0 4px 0 0; color: var(--text-faint); }

.tb-auth { position: relative; display: flex; }
.tb-auth-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; border-radius: 9px; cursor: pointer;
  font-size: 12.5px; font-weight: 700; white-space: nowrap; transition: all .15s var(--ease);
}
.tb-auth-btn.tb-cta { padding: 0 14px; border: 0; background: var(--accent); color: var(--accent-ink); box-shadow: 0 6px 18px -8px var(--accent-glow); }
.tb-auth-btn.tb-cta:hover { background: #ffa726; transform: translateY(-1px); }
.tb-auth-btn.tb-cta.active { box-shadow: 0 0 0 3px rgba(255, 149, 0, .3); }
.tb-auth-btn.tb-acct { padding: 0 8px 0 3px; border: 1px solid var(--border-strong); background: rgba(255, 255, 255, .03); color: var(--text); }
.tb-auth-btn.tb-acct:hover, .tb-auth-btn.tb-acct[aria-expanded="true"], .tb-auth-btn.tb-acct.active { border-color: var(--accent); }
.tb-auth-btn.tb-acct .tb-ico { color: var(--text-faint); transition: transform .18s var(--ease); }
.tb-auth-btn.tb-acct[aria-expanded="true"] .tb-ico { transform: rotate(180deg); }
.tb-acct-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.tb-avatar {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; flex: 0 0 auto;
  background: var(--accent); color: var(--accent-ink); font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: .4px;
}
.tb-avatar.lg { width: 38px; height: 38px; border-radius: 9px; font-size: 17px; }

.tb-menu {
  display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; width: 250px; padding: 6px;
  background: #0e1826; border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; box-shadow: var(--shadow-lg);
}
.tb-menu.open { display: block; animation: pop-in .18s var(--ease); }
.tb-menu-head { display: flex; align-items: center; gap: 10px; padding: 8px 8px 10px; }
.tb-menu-id { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tb-menu-name { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-menu-mail { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-menu-state {
  display: inline-flex; margin: 0 8px 6px; padding: 3px 8px; border-radius: 4px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
}
.tb-menu-state.ok { color: var(--success); background: var(--success-soft); }
.tb-menu-state.wait { color: var(--accent); background: var(--accent-soft); }
.tb-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 10px; border: 0; border-radius: 8px;
  background: none; color: var(--text); font-size: 13px; font-weight: 600; text-align: left; cursor: pointer;
}
.tb-menu-item .tb-ico { color: var(--text-muted); }
.tb-menu-item:hover { background: rgba(255, 255, 255, .06); }
.tb-menu-item.danger, .tb-menu-item.danger .tb-ico { color: var(--danger); }
.tb-menu-item.danger:hover { background: var(--danger-soft); }
.tb-menu-sep { height: 1px; margin: 5px 4px; background: var(--border); }

@media (max-width: 1180px) {
  .tb-link .tb-label { display: none; }
  .tb-link { padding: 0 10px; }
  .tb-link.has-dot::after { left: auto; right: 5px; }
}
/* Üst bar sığmıyorsa (oda kodu/isim çipleri, uzun hesap adı, yeni düğmeler) sadece ikon — genişlik
   eşiği yerine gerçek taşma ölçülür (bkz. app.js fitTopbar, body.tb-compact). */
body.tb-compact .tb-link .tb-label { display: none; }
body.tb-compact .tb-link { padding: 0 10px; }
body.tb-compact .tb-link.has-dot::after { left: auto; right: 5px; }
@media (max-width: 900px) {
  .tb-chip.who, .tb-acct-name { display: none; }
}
@media (max-width: 640px) {
  .topbar { flex-wrap: wrap; row-gap: 8px; padding: 9px 12px; }
  .topbar-right { display: contents; }
  .brand { order: 0; }
  .sfx-wrap { order: 1; margin-left: auto; }
  .tb-auth { order: 2; }
  .tb-nav { order: 3; width: 100%; margin-left: 0; }
  .tb-link { flex: 1; justify-content: center; }
  .topbar-status { order: 4; width: 100%; max-width: none; overflow-x: auto; scrollbar-width: none; }
  .tb-menu { right: -2px; width: min(250px, calc(100vw - 24px)); }
}

/* ========== Ortak çark çerçevesi (Çark Modu + Hazırlık Çarkı) — .wheel-frame ==========
   Günlük Ödül'ün .dr-wheel kabuğu yeniden kullanılıyor (bkz. views.js wheelFrameEl); burada
   sadece yerleşim ve havuza göre iniş renkleri (iyi = .dr-wheel.landed'in yeşili, varsayılan). */
.wheel-frame { margin: 6px auto 2px; flex-shrink: 0; }
.wheel-frame.landed.tone-accent .wheel-disk { box-shadow: 0 0 0 2px var(--accent), 0 0 80px -8px var(--accent-glow); }
.wheel-frame.landed.tone-accent .wheel-pointer { border-top-color: var(--accent); }
.wheel-frame.landed.tone-accent .dr-hub { border-color: var(--accent); }
.wheel-frame.landed.tone-danger .wheel-disk { box-shadow: 0 0 0 2px var(--danger), 0 0 80px -8px var(--danger-glow); }
.wheel-frame.landed.tone-danger .wheel-pointer { border-top-color: var(--danger); }
.wheel-frame.landed.tone-danger .dr-hub { border-color: var(--danger); }
.panel > .wheel-turn-banner + .wheel-frame { margin-top: 18px; }

/* ============ UI v3 — çark bandı, çevir düğmesi, geri sayım, seçim listesi, hazırlık sırası,
   perk kataloğu, teklif paneli, toast. [KULLANICI İSTEĞİ] "Başka ne değiştirilebilir — düzen de
   değişebilir." Renkler mevcut token'lardan; havuz tonları çark çerçevesiyle aynı. ============ */

/* durum bandı */
.wheel-turn-banner.v3 {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 16px 16px;
  background: #0b111c; border: 1px solid var(--border); border-radius: 12px; text-transform: none; letter-spacing: 0;
}
.wtb-kicker {
  display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 1.8px; text-transform: uppercase; color: var(--text-faint);
}
.wtb-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.wtb-title {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(22px, 3.6vw, 30px); line-height: 1.02;
  letter-spacing: .5px; text-transform: uppercase; color: var(--text); text-align: center; text-wrap: balance;
}
.wheel-turn-banner.v3.mine { background: var(--accent-soft); border-color: rgba(255, 149, 0, .32); }
.wheel-turn-banner.v3.mine .wtb-kicker, .wheel-turn-banner.v3.mine .wtb-title { color: var(--accent); }
.wheel-turn-banner.v3.mine .wtb-dot { animation: tb-ping-dot 1.2s ease-in-out infinite; }
@keyframes tb-ping-dot { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.wheel-turn-banner.v3.tone-good { background: var(--success-soft); border-color: rgba(34, 197, 94, .3); }
.wheel-turn-banner.v3.tone-good .wtb-kicker, .wheel-turn-banner.v3.tone-good .wtb-title { color: var(--success); }
.wheel-turn-banner.v3.tone-accent { background: var(--accent-soft); border-color: rgba(255, 149, 0, .32); }
.wheel-turn-banner.v3.tone-accent .wtb-kicker, .wheel-turn-banner.v3.tone-accent .wtb-title { color: var(--accent); }
.wheel-turn-banner.v3.tone-danger { background: var(--danger-soft); border-color: rgba(251, 65, 85, .32); }
.wheel-turn-banner.v3.tone-danger .wtb-kicker, .wheel-turn-banner.v3.tone-danger .wtb-title { color: var(--danger); }

/* çevir düğmesi */
.wheel-spin-btn.v3 {
  position: relative; max-width: 380px; margin: 0 auto; padding: 8px 22px 8px 8px; gap: 14px; align-items: center;
  border-radius: 999px; overflow: hidden; box-shadow: 0 14px 34px -12px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.wheel-spin-btn.v3::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -50%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
  animation: spin-sheen 2.6s ease-in-out infinite;
}
@keyframes spin-sheen { 0%, 55% { left: -50%; } 100% { left: 120%; } }
.wheel-spin-btn.v3 .wheel-spin-btn-icon {
  width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--accent-ink); color: var(--accent);
  display: grid; place-items: center; flex-shrink: 0; transition: transform .5s var(--ease);
}
.wheel-spin-btn.v3:hover .wheel-spin-btn-icon { transform: rotate(200deg); }
.wheel-spin-btn.v3 .wheel-spin-btn-label { flex-direction: column; align-items: flex-start; gap: 2px; padding: 0; text-align: left; }
.wheel-spin-btn.v3 .wheel-spin-btn-label b { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: 1px; text-transform: uppercase; line-height: 1; }
.wheel-spin-btn.v3 .wheel-spin-btn-label small { font-family: var(--font-body); font-size: 11.5px; font-weight: 600; text-transform: none; letter-spacing: 0; opacity: .72; }
.prep-wheel-actions.v3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px; align-items: stretch; margin: 14px 0; }
.prep-wheel-actions.v3 .wheel-spin-btn.v3 { max-width: none; margin: 0; }
.prep-wheel-actions.v3 .btn { min-height: 64px; }
.prep-skip-btn { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; padding: 10px 18px; border-radius: 999px; text-align: left; }
.prep-skip-btn b { font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: 1px; text-transform: uppercase; line-height: 1; }
.prep-skip-btn small { font-size: 11.5px; font-weight: 600; color: var(--text-muted); text-transform: none; letter-spacing: 0; }
.prep-skip-btn.banked { border-color: rgba(34, 211, 238, .35); }
.prep-skip-btn.banked b { color: var(--surprise); }

/* geri sayım: rakam solda, saniye dilimli çubuk sağda (takas turu saati hariç) */
.timer-wrap:not(.trade-timer) { flex-direction: row; align-items: center; gap: 14px; margin: 6px 0 4px; }
.timer-wrap:not(.trade-timer) .timer-label {
  order: -1; min-width: 86px; text-align: left; font-size: 28px; font-variant-numeric: tabular-nums;
}
.timer-wrap:not(.trade-timer) .timer-bar {
  position: relative; flex: 1; width: auto; height: 12px; border-radius: 4px; border: 0; background: rgba(255, 255, 255, .06);
}
.timer-wrap:not(.trade-timer) .timer-bar::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 calc(5% - 2px), #0e1826 calc(5% - 2px) 5%);
}
.timer-wrap:not(.trade-timer) .timer-fill { border-radius: 4px; box-shadow: 0 0 14px var(--accent-glow); }
.timer-wrap.critical:not(.trade-timer) .timer-fill { box-shadow: 0 0 16px var(--danger-glow); }
.timer-note { font-size: 11.5px; color: var(--text-faint); margin-top: 2px; }

/* çark modu seçim listesi: iki sütunlu kart ızgarası */
.wheel-pick-wrap { max-width: 620px; margin: 0 auto; }
.wheel-pick-scroll { max-height: 360px; border: 0; padding: 2px; }
.wheel-pick-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 8px; }
.wheel-pick-row {
  display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; grid-template-areas: "r n p" "r c p";
  column-gap: 12px; row-gap: 2px; align-items: center; padding: 10px 12px 10px 10px;
  background: #0b111c; border: 1px solid var(--border); border-radius: 10px;
  transition: border-color .15s var(--ease), background .15s var(--ease), transform .15s var(--ease);
}
.wheel-pick-row:last-child { border-bottom: 1px solid var(--border); }
.wheel-pick-row:hover:not(:disabled) { background: #101a2a; border-color: var(--accent); transform: translateY(-1px); }
.wheel-pick-row .pos-badge { grid-area: p; align-self: center; }
.wheel-pick-rating {
  grid-area: r; width: 50px; height: 50px; border-radius: 8px; display: grid; place-items: center;
  background: var(--accent-soft); font-size: 24px; font-weight: 800; line-height: 1;
}
.wheel-pick-name { grid-area: n; font-size: 14px; align-self: end; }
.wheel-pick-club { grid-area: c; align-self: start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wheel-pick-row.wheel-steal-row { border-left: 1px solid rgba(34, 211, 238, .35); }
.wheel-pick-row.wheel-steal-row .wheel-pick-rating { background: var(--surprise-soft); color: var(--surprise); }
.wheel-pick-row.wheel-steal-row .wheel-pick-club { color: var(--surprise); }
.wheel-autopick-btn { display: block; margin: 12px auto 0; }

/* hazırlık çarkı sırası: numaralı adım çizgisi */
.pw-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.pw-head h3 { margin: 0; }
.pw-count { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--text-faint); letter-spacing: .6px; }
.pw-steps { position: relative; display: flex; flex-direction: column; gap: 6px; }
.pw-steps::before { content: ''; position: absolute; left: 25px; top: 18px; bottom: 18px; width: 2px; background: var(--border-strong); }
.prep-wheel-row.v3 {
  position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  margin: 0; padding: 9px 12px 9px 11px; background: transparent; border: 1px solid transparent; border-radius: 10px;
}
.pw-step {
  position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: #0b111c; border: 2px solid var(--border-strong); font-family: var(--font-display); font-weight: 800; font-size: 14px; color: var(--text-faint);
}
.pw-name { font-weight: 700; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw-res { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); white-space: nowrap; }
.pw-res.perk { font-family: var(--font-body); font-weight: 700; font-size: 12px; padding: 4px 9px; border-radius: 999px; white-space: normal; text-align: right; }
.pw-res.pool-good { color: var(--success); background: var(--success-soft); }
.pw-res.pool-accent { color: var(--accent); background: var(--accent-soft); }
.pw-res.pool-danger { color: var(--danger); background: var(--danger-soft); }
.pw-res.skip { color: var(--text-muted); }
.prep-wheel-row.v3.done .pw-step { background: var(--card-hover); border-color: var(--text-muted); color: var(--text); font-size: 13px; }
.prep-wheel-row.v3.waiting .pw-name { color: var(--text-muted); }
.prep-wheel-row.v3.current { background: var(--accent-soft); border-color: rgba(255, 149, 0, .3); }
.prep-wheel-row.v3.current .pw-step { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 5px rgba(255, 149, 0, .18); }
.prep-wheel-row.v3.current .pw-res { color: var(--accent); font-weight: 700; }

/* perk kataloğu */
.prep-wheel-catalog.v3 summary {
  display: flex; align-items: center; gap: 12px; list-style: none; cursor: pointer; font-weight: 700;
}
.prep-wheel-catalog.v3 summary::-webkit-details-marker { display: none; }
.pwc-sum-title { font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: .5px; text-transform: uppercase; }
.pwc-sum-pools { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.pwc-pill { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; }
.pwc-pill.pool-good { color: var(--success); background: var(--success-soft); }
.pwc-pill.pool-accent { color: var(--accent); background: var(--accent-soft); }
.pwc-pill.pool-danger { color: var(--danger); background: var(--danger-soft); }
.pwc-chev { display: inline-flex; color: var(--text-muted); transition: transform .2s var(--ease); }
.prep-wheel-catalog.v3[open] .pwc-chev { transform: rotate(180deg); }
.pwc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 14px; margin-top: 16px; }
.pwc-col { display: flex; flex-direction: column; gap: 8px; }
.pwc-col-head {
  display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 7px; border-bottom: 2px solid currentColor;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
}
.pwc-col.pool-good .pwc-col-head { color: var(--success); }
.pwc-col.pool-accent .pwc-col-head { color: var(--accent); }
.pwc-col.pool-danger .pwc-col-head { color: var(--danger); }
.pwc-card { display: flex; gap: 10px; padding: 10px; background: #0b111c; border: 1px solid var(--border); border-radius: 10px; }
.pwc-emoji { width: 34px; height: 34px; flex-shrink: 0; border-radius: 8px; display: grid; place-items: center; font-size: 17px; background: rgba(255, 255, 255, .05); }
.pwc-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pwc-name { display: flex; justify-content: space-between; gap: 8px; font-weight: 700; font-size: 13px; }
.pwc-pct { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); flex-shrink: 0; }
.pwc-desc { font-size: 12px; line-height: 1.45; color: var(--text-muted); text-wrap: pretty; }

/* teklif paneli */
.bid-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 14px 16px; background: #0b111c; border: 1px solid var(--border); border-radius: 12px; }
.bid-current.v3 { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bid-k { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-faint); }
.bid-current.v3 b { margin: 0; }
.bid-current.v3 b.none { font-size: 26px; color: var(--text-faint); text-shadow: none; }
.bid-who { align-self: flex-start; font-family: var(--font-body); font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .06); color: var(--text); text-transform: none; letter-spacing: 0; }
.bid-who.me { background: var(--success-soft); color: var(--success); }
.bid-cap-box { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.bid-cap-box b { font-family: var(--font-mono); font-size: 18px; font-weight: 700; color: var(--text); }
.bid-leaderboard.v3 { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.bid-leaderboard.v3 .bid-leaderboard-row { position: relative; overflow: hidden; padding: 9px 12px; }
.bl-bar { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(255, 255, 255, .05); transition: width .4s var(--ease); }
.bid-leaderboard-row.leading .bl-bar { background: rgba(255, 149, 0, .2); }
.bl-name, .bl-amt { position: relative; }
.bid-leaderboard-row.me .bl-name { color: var(--text); font-weight: 700; }
.bid-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.bid-chip {
  height: 34px; border-radius: 8px; border: 1px solid var(--border-strong); background: rgba(255, 255, 255, .03);
  color: var(--text-muted); font-family: var(--font-mono); font-size: 12px; font-weight: 700; cursor: pointer;
  transition: border-color .15s var(--ease), color .15s var(--ease);
}
.bid-chip:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.bid-chip:disabled { opacity: .4; cursor: not-allowed; }
.bid-locks { display: flex; flex-wrap: wrap; gap: 6px; }
.bid-lock { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--border); background: #0b111c; font-size: 12.5px; font-weight: 700; }
.bid-lock i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint); animation: tb-ping-dot 1.2s ease-in-out infinite; }
.bid-lock small { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; color: var(--text-faint); }
.bid-lock.on { border-color: rgba(34, 197, 94, .3); background: var(--success-soft); }
.bid-lock.on i { background: var(--success); animation: none; }
.bid-lock.on small { color: var(--success); }

/* toast */
.toast.v3 {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 11px; min-width: 260px; max-width: 380px;
  padding: 11px 16px 13px 11px; border: 1px solid var(--border-strong); border-radius: 12px;
  background: rgba(14, 24, 38, .96); backdrop-filter: blur(8px); cursor: pointer;
  animation: toast-slide .28s var(--ease);
}
.toast.v3.out { opacity: 0; transform: translateX(16px); transition: opacity .2s, transform .2s; }
@keyframes toast-slide { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.toast-ico { width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.toast-msg { font-size: 13px; line-height: 1.4; font-weight: 600; text-wrap: pretty; }
.toast-life { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--accent); transform-origin: left; animation: toast-life linear forwards; }
@keyframes toast-life { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.toast.v3.success .toast-ico { background: var(--success-soft); color: var(--success); }
.toast.v3.success .toast-life { background: var(--success); }
.toast.v3.danger .toast-ico { background: var(--danger-soft); color: var(--danger); }
.toast.v3.danger .toast-life { background: var(--danger); }
@media (max-width: 640px) {
  .toast.v3 { min-width: 0; max-width: none; }
  .bid-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============ Genel v3 — tur sonucu makbuzu, şampiyon bandı, puan tablosu, maç sonu
   aksiyonları, Kadrolar paneli, draft mini saha, yükleniyor durumları.
   [KULLANICI İSTEĞİ] "Başka neler yapılabilir — genel olarak." ============ */

/* tur sonucu makbuzu */
.round-receipt.v3 {
  --rr: var(--accent); --rr-soft: var(--accent-soft);
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px;
  max-width: 520px; padding: 12px 16px 12px 12px; background: #0b111c; border: 1px solid var(--border); border-radius: 12px;
}
.round-receipt.v3.tone-good { --rr: var(--success); --rr-soft: var(--success-soft); }
.round-receipt.v3.tone-danger { --rr: var(--danger); --rr-soft: var(--danger-soft); }
.round-receipt.v3.tone-surprise { --rr: var(--surprise); --rr-soft: var(--surprise-soft); }
.round-receipt.v3.tone-muted { --rr: var(--text-muted); --rr-soft: rgba(255, 255, 255, .06); }
.round-receipt-stamp {
  padding: 8px 10px; border: 2px solid var(--rr); border-radius: 6px; background: var(--rr-soft); color: var(--rr);
  font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: 1.6px; text-transform: uppercase;
  transform: rotate(-4deg); white-space: nowrap;
}
.round-receipt.v3 .round-receipt-headline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 19px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; }
.rr-who { color: var(--text-muted); }
.rr-arrow { display: inline-flex; color: var(--rr); }
.rr-what { color: var(--text); }
.round-receipt.v3 .round-receipt-sub { font-size: 12.5px; line-height: 1.45; margin-top: 4px; text-wrap: pretty; }
.rr-section-k { margin-top: 18px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-faint); text-align: center; }

/* bekleme satırı + yükleniyor paneli */
.waiting-line { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; font-size: 13px; color: var(--text-muted); }
.wl-dots { display: inline-flex; gap: 4px; }
.wl-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: wl-bounce 1.1s ease-in-out infinite; }
.wl-dots i:nth-child(2) { animation-delay: .15s; }
.wl-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes wl-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: .35; } 40% { transform: translateY(-5px); opacity: 1; } }
.loading-panel { display: flex; flex-direction: column; gap: 16px; }
.lp-head { display: flex; align-items: center; gap: 12px; }
.lp-spin { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .1); border-top-color: var(--accent); animation: lp-rot .8s linear infinite; }
@keyframes lp-rot { to { transform: rotate(360deg); } }
.lp-text { font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: .5px; text-transform: uppercase; }
.lp-skel { display: flex; flex-direction: column; gap: 9px; }
.lp-skel i { display: block; height: 12px; border-radius: 4px; background: linear-gradient(90deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .09), rgba(255, 255, 255, .04)); background-size: 200% 100%; animation: lp-shine 1.4s linear infinite; }
.lp-skel i:nth-child(1) { width: 72%; }
.lp-skel i:nth-child(2) { width: 90%; }
.lp-skel i:nth-child(3) { width: 48%; }
@keyframes lp-shine { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* şampiyon bandı */
.winner-banner.v3 {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 30px 24px 26px;
  background: radial-gradient(120% 90% at 50% 0%, rgba(255, 149, 0, .16), transparent 60%), #0b111c;
  border: 1px solid rgba(255, 149, 0, .4); border-radius: 16px; color: var(--text); text-align: center;
  font-size: inherit; letter-spacing: 0;
}
.wb-trophy { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 8px rgba(255, 149, 0, .12), 0 12px 30px -8px var(--accent-glow); margin-bottom: 6px; }
.wb-kicker { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); }
.wb-name { font-family: var(--font-display); font-weight: 900; font-size: clamp(38px, 7vw, 60px); line-height: .92; text-transform: uppercase; letter-spacing: .5px; }
.wb-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 6px; }
.wb-stats > span { font-family: var(--font-mono); font-size: 12px; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid var(--border); color: var(--text-muted); }
.wb-stats b { color: var(--accent); font-weight: 700; }

/* puan tablosu */
.rank-badge { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: rgba(255, 255, 255, .05); font-family: var(--font-display); font-weight: 800; font-size: 15px; color: var(--text-muted); }
.standings-table tr.winner .rank-badge { background: var(--accent); color: var(--accent-ink); }
.standings-table tr.winner td { background: rgba(255, 149, 0, .06); }
.standings-table tr.me td:nth-child(2) { color: var(--text); }
.st-me { margin-left: 8px; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; background: var(--accent-soft); color: var(--accent); }
.standings-table td.pts-cell { font-family: var(--font-display); font-size: 20px; font-weight: 800; color: var(--text); }
.standings-table tr.winner td.pts-cell { color: var(--accent); }

/* maç sonu aksiyonları */
.end-actions { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.end-act {
  display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 10px 16px 10px 10px; border-radius: 12px; cursor: pointer; text-align: left;
  border: 1px solid var(--border-strong); background: #0b111c; color: var(--text); transition: border-color .15s var(--ease), transform .15s var(--ease);
}
.end-act:hover { border-color: var(--accent); transform: translateY(-1px); }
.end-act-ico { width: 44px; height: 44px; flex-shrink: 0; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 255, 255, .05); color: var(--text-muted); }
.end-act-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.end-act-text b { font-family: var(--font-display); font-weight: 800; font-size: 19px; letter-spacing: .8px; text-transform: uppercase; line-height: 1; }
.end-act-text small { font-size: 11.5px; color: var(--text-muted); }
.end-act.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 14px 30px -14px var(--accent-glow); }
.end-act.primary .end-act-ico { background: var(--accent-ink); color: var(--accent); }
.end-act.primary .end-act-text small { color: var(--accent-ink); opacity: .72; }
@media (max-width: 760px) { .end-actions { grid-template-columns: minmax(0, 1fr); } }

/* Kadrolar paneli */
.squads-panel summary { display: flex; align-items: center; gap: 12px; list-style: none; cursor: pointer; }
.squads-panel summary::-webkit-details-marker { display: none; }
.sq-sum-title { font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: .5px; text-transform: uppercase; }
.sq-sum-list { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.sq-sum-pill { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .04); border: 1px solid var(--border); font-size: 12px; font-weight: 600; color: var(--text-muted); }
.sq-sum-pill b { font-family: var(--font-mono); font-size: 11px; color: var(--text); }
.sq-sum-pill.me { border-color: rgba(255, 149, 0, .35); color: var(--accent); }
.squads-panel[open] .pwc-chev { transform: rotate(180deg); }
.sq-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; margin-top: 16px; }
.sq-col { padding: 12px; border-radius: 12px; background: #0b111c; border: 1px solid var(--border); }
.sq-col.me { border-color: rgba(255, 149, 0, .3); }
.sq-col-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.sq-col-name { font-weight: 700; font-size: 14px; }
.sq-col-meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }
.sq-col .squad-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; }
.sq-empty { margin-top: 10px; font-size: 12px; color: var(--text-faint); }

/* draft mini saha */
.draft-mini { display: flex; flex-direction: column; gap: 12px; }
.dm-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dm-head h3 { margin: 0; }
.dm-meta { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint); }
.dm-meta b { color: var(--accent); }
.dm-field {
  position: relative; width: 100%; max-width: 460px; margin: 0 auto; aspect-ratio: 4 / 3.4; border-radius: 12px; overflow: hidden;
  background: repeating-linear-gradient(180deg, #0f2a1c 0 10%, #11301f 10% 20%); border: 1px solid rgba(255, 255, 255, .1);
}
.dm-half { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(255, 255, 255, .14); }
.dm-circle { position: absolute; left: 50%; top: 50%; width: 22%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid rgba(255, 255, 255, .14); }
.dm-box { position: absolute; left: 30%; right: 30%; height: 12%; border: 1px solid rgba(255, 255, 255, .14); }
.dm-box.top { top: -1px; border-top: 0; }
.dm-box.bottom { bottom: -1px; border-bottom: 0; }
.dm-slot { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 3px; z-index: 1; }
.dm-dot {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 15px; color: #12140f; box-shadow: 0 4px 10px rgba(0, 0, 0, .45);
}
.dm-slot.empty .dm-dot { background: rgba(7, 12, 20, .55) !important; border: 1.5px dashed rgba(255, 255, 255, .35); color: rgba(255, 255, 255, .6); font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; box-shadow: none; }
.dm-slot.focus .dm-dot { border: 2px solid var(--accent); color: var(--accent); background: rgba(43, 20, 0, .7) !important; animation: dm-pulse 1.4s ease-in-out infinite; }
@keyframes dm-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 149, 0, .45); } 50% { box-shadow: 0 0 0 8px rgba(255, 149, 0, 0); } }
.dm-slot.icon .dm-dot { box-shadow: 0 0 0 2px var(--icon), 0 4px 10px rgba(0, 0, 0, .45); }
.dm-name { max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 4px; background: rgba(7, 12, 20, .7); }
.dm-note { display: inline-flex; align-items: center; gap: 8px; align-self: center; font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--accent); letter-spacing: .6px; }
.dm-note i { width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--accent); }

/* ============ v4 — draft üst bilgisi, bütçe kartları, duraklatma bandı, maç anlatımı, maç
   hikâyesi, zaman çizelgesi, rakip aranıyor, onay penceresi, bağlantı bandı.
   [KULLANICI İSTEĞİ] "Başka ne yapılabilir." ============ */
.btn-ico { display: inline-flex; flex-shrink: 0; }
.btn .btn-ico { margin-right: 6px; vertical-align: -2px; }

/* draft üst bilgisi */
.draft-header.v3 { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; padding: 0 0 14px; }
.dh-block { display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 10px 14px; border-radius: 12px; background: #0b111c; border: 1px solid var(--border); }
.dh-k { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-faint); }
.dh-formation b { font-family: var(--font-display); font-weight: 900; font-size: 30px; line-height: .95; color: var(--accent); letter-spacing: .5px; }
.dh-mode { min-width: 0; }
.dh-mode b { font-family: var(--font-display); font-weight: 800; font-size: 19px; line-height: 1; text-transform: uppercase; letter-spacing: .6px; }
.dh-mode small { font-size: 11.5px; color: var(--text-muted); }
.dh-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.dh-pause {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--border-strong); background: rgba(255, 255, 255, .03); color: var(--text); font-size: 12.5px; font-weight: 700;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.dh-pause:hover { border-color: var(--accent); }
.dh-pause.voted { border-color: rgba(255, 149, 0, .45); background: var(--accent-soft); color: var(--accent); }
.dh-pause.paused { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.dh-votes { display: inline-flex; gap: 3px; margin-left: 2px; }
.dh-votes i { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--text-faint); }
.dh-votes i.on { background: var(--accent); border-color: var(--accent); }
.draft-header.v3 .btn.small { height: 38px; display: inline-flex; align-items: center; margin: 0; }

/* bütçe kartları */
.budget-row.v3 { gap: 8px; }
.budget-card.v3 { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; background: #0b111c; border-radius: 12px; }
.budget-card.v3.me { background: var(--accent-soft); border-color: rgba(255, 149, 0, .35); }
.bc-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bc-me { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; background: var(--accent); color: var(--accent-ink); }
.budget-card.v3 .budget { margin: 0; font-size: 28px; }
.bc-slots { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 3px; }
.bc-slots i { height: 6px; border-radius: 2px; background: rgba(255, 255, 255, .08); }
.bc-slots i.on { background: var(--text-muted); }
.budget-card.v3.me .bc-slots i.on { background: var(--accent); }
.budget-card.v3 .slots { margin: 0; }

/* duraklatma bandı */
.pause-banner { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 12px; background: rgba(234, 244, 255, .06); border: 1px solid rgba(234, 244, 255, .22); }
.pb-ico { width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: var(--urgency); color: #070c14; animation: tb-ping-dot 1.6s ease-in-out infinite; }
.pb-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pb-text b { font-family: var(--font-display); font-weight: 800; font-size: 20px; text-transform: uppercase; letter-spacing: .6px; line-height: 1; }
.pb-text span { font-size: 12.5px; color: var(--text-muted); }

/* maç anlatımı */
.event-log.commentary-log .row.v3 {
  display: grid; grid-template-columns: 36px 26px minmax(0, 1fr); align-items: start; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--border); border-left: 1px solid var(--border); border-radius: 10px; background: #0b111c;
}
.cr-min { font-family: var(--font-display); font-weight: 800; font-size: 17px; line-height: 1.3; color: var(--text-faint); text-align: right; font-variant-numeric: tabular-nums; }
.cr-ico { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: rgba(255, 255, 255, .05); color: var(--text-muted); }
.cr-svg { display: inline-flex; }
.cr-card { width: 11px; height: 15px; border-radius: 2px; transform: rotate(8deg); }
.cr-card.yellow { background: #ffd166; }
.cr-card.red { background: var(--danger); }
.cr-text { line-height: 1.45; padding-top: 3px; }
.event-log.commentary-log .row.v3.buildup { background: transparent; border-style: dashed; }
.event-log.commentary-log .row.v3.goal { background: var(--accent-soft); border-color: rgba(255, 149, 0, .4); padding: 13px 12px; }
.event-log.commentary-log .row.v3.goal .cr-min { color: var(--accent); }
.event-log.commentary-log .row.v3.goal .cr-ico { background: var(--accent); color: var(--accent-ink); }
.event-log.commentary-log .row.v3.red-card { background: var(--danger-soft); border-color: rgba(251, 65, 85, .35); }
.event-log.commentary-log .row.v3.red-card .cr-min { color: var(--danger); }
.event-log.commentary-log .row.v3.yellow-card .cr-min { color: #ffd166; }
.event-log.commentary-log .row.v3.phase { background: transparent; border-color: transparent; color: var(--text-muted); font-family: var(--font-mono); font-size: 11.5px; }

/* zaman çizelgesi */
.match-timeline { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin: 4px 0 2px; }
.mt-team { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-track { position: relative; height: 26px; }
.mt-track::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: rgba(255, 255, 255, .08); }
.mt-fill { position: absolute; left: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: var(--accent); transition: width .3s linear; }
.mt-half { position: absolute; left: 50%; top: 4px; bottom: 4px; width: 1px; background: rgba(255, 255, 255, .2); }
.mt-mark { position: absolute; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; animation: pop-in .3s var(--ease); }
.mt-mark.home { top: 0; }
.mt-mark.away { bottom: 0; }
.mt-mark.goal { background: var(--text); box-shadow: 0 0 0 2px #0e1826, 0 0 10px var(--accent-glow); }
.mt-mark.yellow { width: 7px; height: 10px; margin-left: -3.5px; border-radius: 1.5px; background: #ffd166; }
.mt-mark.red { width: 7px; height: 10px; margin-left: -3.5px; border-radius: 1.5px; background: var(--danger); }
.mt-scale { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 9.5px; color: var(--text-faint); }

/* maç hikâyesi */
.match-story.v3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 8px; }
.ms-fact { display: flex; flex-direction: column; gap: 6px; padding: 11px 12px; border-radius: 10px; background: #0b111c; border: 1px solid var(--border); }
.ms-fact p { margin: 0; font-size: 12.5px; line-height: 1.45; color: #cbd5e1; text-wrap: pretty; }
.ms-topic { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-faint); }
.ms-topic i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ms-fact.tone-good .ms-topic { color: var(--success); }
.ms-fact.tone-good { border-color: rgba(34, 197, 94, .25); }
.ms-fact.tone-bad .ms-topic { color: var(--danger); }
.ms-fact.tone-bad { border-color: rgba(251, 65, 85, .25); }

/* rakip aranıyor */
.qm-panel { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 36px 24px 28px; text-align: center; }
.qm-radar { position: relative; width: 120px; height: 120px; display: grid; place-items: center; margin-bottom: 10px; }
.qm-radar i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--accent); opacity: 0; animation: qm-wave 2.4s ease-out infinite; }
.qm-radar i:nth-child(2) { animation-delay: .8s; }
.qm-radar i:nth-child(3) { animation-delay: 1.6s; }
@keyframes qm-wave { 0% { transform: scale(.45); opacity: .8; } 100% { transform: scale(1.2); opacity: 0; } }
.qm-radar img { position: relative; width: 56px; height: 56px; border-radius: 14px; box-shadow: 0 0 0 6px rgba(255, 149, 0, .15), 0 10px 30px -8px var(--accent-glow); }
.qm-kicker { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); }
.qm-title { margin: 0; font-family: var(--font-display); font-weight: 900; font-size: clamp(34px, 6vw, 48px); line-height: .95; text-transform: uppercase; }
.qm-chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.qm-chip { font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid var(--border); }
.qm-note { margin: 4px 0 0; max-width: 380px; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); text-wrap: pretty; }
.qm-cancel { margin-top: 8px; }

/* onay penceresi */
.cd-overlay { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 20px; background: rgba(3, 6, 12, .72); backdrop-filter: blur(4px); animation: cd-fade .16s ease-out; }
.cd-overlay.out { opacity: 0; transition: opacity .16s; }
@keyframes cd-fade { from { opacity: 0; } to { opacity: 1; } }
.cd-card { width: min(420px, 100%); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 22px; border-radius: 16px; background: #0e1826; border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); animation: pop-in .2s var(--ease); }
.cd-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.cd-card.danger .cd-ico { background: var(--danger-soft); color: var(--danger); }
.cd-title { margin: 4px 0 0; font-family: var(--font-display); font-weight: 800; font-size: 24px; line-height: 1; text-transform: uppercase; letter-spacing: .5px; }
.cd-body { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-muted); text-wrap: pretty; }
.cd-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; margin-top: 8px; }
.cd-actions .btn { width: 100%; }

/* bağlantı bandı */
.conn-banner { gap: 12px; padding: 10px 16px 11px 12px; border-radius: 0 0 14px 14px; background: rgba(14, 24, 38, .96); border-color: rgba(251, 65, 85, .45); font-family: var(--font-body); text-align: left; }
.cb-spin { width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%; border: 2.5px solid rgba(251, 65, 85, .25); border-top-color: var(--danger); animation: lp-rot .8s linear infinite; }
.cb-text { display: flex; flex-direction: column; gap: 1px; }
.cb-text b { font-size: 13px; font-weight: 700; color: var(--danger); }
.cb-text span { font-size: 12px; font-weight: 500; color: var(--text-muted); }
@media (max-width: 640px) {
  .dh-actions { margin-left: 0; width: 100%; }
  .pause-banner { flex-wrap: wrap; }
}

/* ============ v5 — oyuncu kartı, ipuçları, izleme kontrolleri, gol atanlar, sürpriz rozeti +
   Gözcü, hesap düğme ikonları, tek taraflı atama, draft geçmişi çizelgesi. ============ */

/* oyuncu kartı: ana kart yatay, büyük reyting kutusu; yedekler kompakt satır kartları */
.reveal-row .player-card {
  display: grid; grid-template-columns: 88px minmax(0, 1fr); column-gap: 18px; row-gap: 6px; align-items: center;
  width: auto; padding: 16px 18px; text-align: left;
}
.reveal-row .player-card::before, .reveal-row .player-card:not(.icon)::after { display: none; }
.reveal-row .player-card .rating {
  position: static; grid-column: 1; grid-row: 1 / span 2; width: 88px; height: 88px; border: 0; border-radius: 14px;
  background: color-mix(in srgb, var(--pc) 16%, #0b111c); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pc) 40%, transparent);
  font-family: var(--font-display); font-weight: 900; font-size: 50px; color: var(--text); text-shadow: none;
}
.reveal-row .player-card .pos-badge { position: static; grid-column: 1; grid-row: 3; justify-self: stretch; text-align: center; box-shadow: none; }
.reveal-row .player-card .name { grid-column: 2; grid-row: 1; align-self: end; margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 30px; line-height: 1; text-transform: uppercase; letter-spacing: .4px; }
.reveal-row .player-card .club { grid-column: 2; grid-row: 2; align-self: start; margin: 0; font-size: 13px; }
.reveal-row .player-card .tag {
  grid-column: 2; grid-row: 3; justify-self: start; margin: 0; padding: 4px 9px; border-radius: 999px;
  background: rgba(255, 255, 255, .05); font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; color: var(--text-muted);
}
.reveal-row .player-card .icon-flag { top: 12px; bottom: auto; right: 12px; }
.reveal-row .player-card.main {
  border-color: rgba(255, 149, 0, .55);
  box-shadow: 0 0 0 1px rgba(255, 149, 0, .25), 0 20px 50px -26px var(--accent-glow);
}
.reveal-row .player-card.main .tag { background: var(--accent-soft); color: var(--accent); }
.reveal-row .player-card.main:hover { transform: none; }
.reveal-row .player-card.backup {
  grid-template-columns: 50px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; padding: 11px 12px 11px 14px; opacity: 1;
  background: #0b111c; border-color: var(--border); box-shadow: none; overflow: visible;
}
.reveal-row .player-card.backup .rating { grid-row: 1 / span 2; width: 50px; height: 50px; border-radius: 10px; font-size: 26px; }
.reveal-row .player-card.backup .name { grid-row: 1; font-family: var(--font-body); font-size: 14px; font-weight: 700; text-transform: none; letter-spacing: 0; }
.reveal-row .player-card.backup .club { grid-row: 2; font-size: 11.5px; }
.reveal-row .player-card.backup .pos-badge { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
.reveal-row .player-card.backup .tag { grid-column: 1 / -1; grid-row: 3; margin-top: 6px; padding: 0; background: none; font-size: 9.5px; color: var(--text-faint); }
.reveal-row .player-card.backup:hover { transform: translateY(-2px); }
.reveal-row .player-card.backup .ladder-rank-badge {
  top: -8px; left: -8px; right: auto; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: #0e1826; border: 1px solid var(--border-strong); font-size: 13px; color: var(--text-muted); z-index: 2;
}
@media (max-width: 520px) {
  .reveal-row .player-card { grid-template-columns: 64px minmax(0, 1fr); }
  .reveal-row .player-card .rating { width: 64px; height: 64px; font-size: 36px; }
  .reveal-row .player-card .name { font-size: 22px; }
}

/* ipuçları */
.coach-ico.num {
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0;
  background: var(--accent-soft); color: var(--accent); font-family: var(--font-display); font-weight: 800; font-size: 14px; line-height: 1;
}
.coach-count { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); }
.coach-summary::after { margin-left: 10px; }
.coach-tip { align-items: flex-start; gap: 12px; }
.coach-dismiss { background: none; border: 0; box-shadow: none; padding: 0; color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; font-size: 12px; min-height: 0; }
.coach-dismiss:hover { color: var(--accent); transform: none; box-shadow: none; }

/* izleme kontrolleri */
.playback-controls.v5 { display: flex; align-items: center; gap: 8px; }
.pc-speed { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: #0b111c; border: 1px solid var(--border); }
.pc-seg, .pc-skip {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border: 0; border-radius: 7px;
  background: none; color: var(--text-muted); font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.pc-seg:hover { color: var(--text); }
.pc-seg.on { background: var(--accent); color: var(--accent-ink); }
.pc-seg.voted:not(.on) { box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent); }
.pc-skip { height: 40px; border: 1px solid var(--border-strong); border-radius: 10px; background: rgba(255, 255, 255, .03); color: var(--text); }
.pc-skip:hover { border-color: var(--danger); color: var(--danger); }
.pc-skip.voted { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }
.pc-dots { display: inline-flex; gap: 3px; }
.pc-dots i { width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid currentColor; opacity: .55; }
.pc-dots i.on { background: currentColor; opacity: 1; }

/* gol atanlar */
.scorer-list.v5 { display: flex; flex-direction: column; gap: 8px; }
.scorer-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.scorer-list.v5 .scorer-list-team { margin: 0; }
.scorer-count { font-family: var(--font-display); font-weight: 900; font-size: 26px; line-height: 1; color: var(--accent); }
.scorer-rows { display: flex; flex-direction: column; gap: 4px; }
.scorer-list.v5 .scorer-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 5px 0; font-size: 13px; }
.sr-ball { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; background: rgba(255, 255, 255, .05); color: var(--text-muted); }
.sr-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-mins { display: inline-flex; gap: 4px; }
.sr-mins i { font-style: normal; font-family: var(--font-mono); font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 4px; background: rgba(255, 255, 255, .06); color: var(--text-muted); }

/* sürpriz rozeti + Gözcü */
.big-gap-badge.v5 {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; text-transform: none; letter-spacing: 0;
  font-family: var(--font-body); background: var(--surprise-soft); border: 1px solid rgba(34, 211, 238, .35); color: var(--text);
}
.bg-ico { width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; display: grid; place-items: center; background: var(--surprise); color: #062a33; }
.bg-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bg-text b { font-family: var(--font-display); font-weight: 800; font-size: 18px; line-height: 1; text-transform: uppercase; letter-spacing: .6px; color: var(--surprise); }
.bg-text span { font-size: 12.5px; line-height: 1.45; color: var(--text-muted); }
.spy-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 10px; }
.spy-btn {
  display: inline-flex; align-items: center; gap: 11px; padding: 8px 16px 8px 8px; border-radius: 999px; cursor: pointer; text-align: left;
  border: 1px dashed rgba(34, 211, 238, .55); background: rgba(34, 211, 238, .06); color: var(--text);
}
.spy-btn:hover { border-style: solid; background: var(--surprise-soft); }
.spy-ico { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--surprise); color: #062a33; }
.spy-label { display: flex; flex-direction: column; gap: 1px; }
.spy-label b { font-size: 13px; }
.spy-label small { font-size: 11px; color: var(--text-muted); }
.spy-result:not(:empty) { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 5px; padding: 11px 12px; border-radius: 10px; background: #0b111c; border: 1px solid rgba(34, 211, 238, .35); animation: pop-in .25s var(--ease); }
.spy-k { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--surprise); }
.spy-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.spy-row b { font-family: var(--font-mono); color: var(--text); }
.spy-row b.none { color: var(--text-faint); font-weight: 500; }

/* hesap düğmeleri: ikon koyu yuvarlak kutuda, kesikli ayraç yok */
.ticket-btn .ticket-btn-icon {
  width: 40px; height: 40px; margin: 6px 0 6px 6px; align-self: center; border-right: 0; border-radius: 50%;
  background: var(--accent-ink); color: var(--accent);
}
.ticket-btn .ticket-btn-label { text-align: left; padding: 14px 20px 14px 14px; }
.ticket-btn.secondary .ticket-btn-icon, .ticket-btn.is-locked .ticket-btn-icon, .ticket-btn:disabled .ticket-btn-icon { background: rgba(255, 255, 255, .06); color: var(--text-muted); }
.acct-verify-icon { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); }

/* tek taraflı atama */
.one-sided-note { margin: 10px auto 14px; max-width: 460px; text-align: center; font-size: 13px; color: var(--text-muted); text-wrap: pretty; }

/* draft geçmişi çizelgesi */
.draft-history summary { display: flex; align-items: center; gap: 12px; list-style: none; cursor: pointer; }
.draft-history summary::-webkit-details-marker { display: none; }
.draft-history[open] .pwc-chev { transform: rotate(180deg); }
.dht-sum { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }
.dht { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.dht-legend { display: flex; flex-wrap: wrap; gap: 6px; }
.dht-key { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; background: #0b111c; border: 1px solid var(--border); font-size: 12px; font-weight: 600; }
.dht-key i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.dht-key b { font-family: var(--font-mono); font-size: 11.5px; color: var(--c); }
.dht-key.me { border-color: color-mix(in srgb, var(--c) 45%, transparent); }
.dht-list { position: relative; display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow-y: auto; padding: 2px 4px 2px 0; }
.dht-list::before { content: ''; position: absolute; left: 15px; top: 14px; bottom: 14px; width: 2px; background: var(--border-strong); }
.dht-row { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: center; }
.dht-node {
  position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: #0e1826; border: 2px solid var(--c); color: var(--c); font-family: var(--font-display); font-weight: 800; font-size: 14px;
}
.dht-row.me .dht-node { background: var(--c); color: #0b111c; }
.dht-card { display: flex; flex-direction: column; gap: 6px; padding: 9px 12px; border-radius: 10px; background: #0b111c; border: 1px solid var(--border); min-width: 0; }
.dht-row.me .dht-card { border-color: color-mix(in srgb, var(--c) 40%, transparent); }
.dht-main { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dht-main .pos-badge { position: static; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; color: #12140f; flex-shrink: 0; }
.dht-player { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.dht-rating { margin-left: auto; font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--text-muted); }
.dht-sub { display: grid; grid-template-columns: minmax(0, 120px) minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.dht-buyer { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dht-buyer i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex-shrink: 0; }
.dht-bar { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.dht-bar i { display: block; height: 100%; border-radius: 3px; background: var(--c); }
.dht-price { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--text); text-align: right; }
.dht-price.free { color: var(--text-faint); font-weight: 500; }

/* ============ Mobil tarama düzeltmeleri (375px) ============ */
.bid-panel { align-items: stretch; max-width: none; }
.big-gap-badge.v5 { text-align: left; transform: none; clip-path: none; align-self: stretch; }
.timer-wrap:not(.trade-timer) .timer-bar { min-width: 80px; }
@media (max-width: 640px) {
  .draft-header.v3 { gap: 8px; }
  .dh-block { flex: 1 1 auto; }
  .dh-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .dh-pause { justify-content: center; }
  .budget-row.v3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .budget-card.v3 { padding: 9px 10px; gap: 5px; }
  .budget-card.v3 .name { font-size: 12px; }
  .budget-card.v3 .budget { font-size: 22px; }
  .bc-me { display: none; }
  .coach-count { display: none; }
  .bid-head { padding: 12px; }
  .bid-quick { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bid-chip, .pc-seg { min-height: 44px; }
  .pc-speed { flex: 1; }
  .pc-seg { flex: 1; justify-content: center; }
  .playback-controls.v5 { width: 100%; flex-wrap: wrap; }
  .pc-skip { min-height: 44px; }
  details > summary { min-height: 44px; }
  .coach-dismiss, .auth-link, .lobby-back { min-height: 44px; display: inline-flex; align-items: center; }
  .formation-option { min-height: 44px; }
  .lu-swap { min-width: 32px; min-height: 32px; }
  .trade-badge { max-width: 100%; white-space: normal; }
  .timer-wrap.trade-timer { min-width: 0; width: 100%; }
  .wr-card.wr-ready { margin-left: 0; margin-right: 0; }
}


/* ===================== [KULLANICI İSTEĞİ, KARARLAŞTIRILDI — TAKIM TEMASI] =====================
   Tuttuğun takıma göre lisans kartı, takım seçici, sahadaki formalar. Renkler teams.js'ten
   inline CSS değişkeni olarak gelir (--t-bg/--t-accent/--t-ink/--t-kit). */
.lic-card.themed {
  background: var(--t-bg);
  border-color: color-mix(in srgb, var(--t-accent) 55%, transparent);
  box-shadow: 0 22px 44px -18px rgba(0,0,0,.8), 0 0 50px -24px color-mix(in srgb, var(--t-accent) 60%, transparent);
}
.lic-card.themed::before { left: auto; width: 42%; background: var(--t-kit); opacity: .14; }
.lic-card.themed .lic-strip { background: var(--t-accent); color: var(--t-ink); }
.lic-card.themed .lic-foot-accent { color: var(--t-accent); }
.lic-card.themed.active { border-color: var(--t-accent); }
.lic-crest {
  position: absolute; top: 5px; right: 12px; width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid var(--t-accent); background: var(--t-bg); color: var(--t-accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 900; font-size: 15px; letter-spacing: .3px;
}
.lic-crest[hidden], .lic-team[hidden], .lic-logo[hidden] { display: none; }
.lic-team {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--t-accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.team-picker {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px;
  max-height: 248px; overflow-y: auto; padding-right: 2px;
}
.team-opt {
  display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 12px; border-radius: 6px;
  background: var(--card); border: 1px solid var(--border); color: var(--text);
  font: inherit; font-weight: 600; font-size: 13.5px; text-align: left; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.team-opt:hover { border-color: var(--border-strong); background: var(--card-hover); }
.team-opt.on { border: 2px solid var(--accent); padding: 0 11px; }
.team-opt.none { grid-column: 1 / -1; color: var(--text-muted); border-style: dashed; }
.team-opt.none.on { color: var(--text); border-style: solid; }
.team-opt-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-swatch { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(255,255,255,.35); }
.acct-team { display: flex; flex-direction: column; gap: 8px; }

.pitch-dot.kit { width: 11px; height: 11px; border-width: 1.5px; }
.kit-swatch {
  display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: -1px;
  margin: 0 6px; border: 1px solid rgba(255,255,255,.4);
}
@media (max-width: 600px) {
  .team-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pitch-dot.kit { width: 9px; height: 9px; }
}


/* [KULLANICI İSTEĞİ, KARARLAŞTIRILDI — FORMA ÇEŞİTLERİ] Hesap ekranındaki forma dolabı. */
.kit-locker { display: flex; flex-direction: column; gap: 8px; }
.kit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.kit-opt {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px 10px;
  border-radius: 8px; background: var(--card); border: 1px solid var(--border); color: var(--text);
  font: inherit; cursor: pointer; transition: border-color .15s, background .15s;
}
.kit-opt:hover { border-color: var(--border-strong); background: var(--card-hover); }
.kit-opt.on { border: 2px solid var(--accent); padding: 13px 7px 9px; }
.kit-shirt-wrap {
  display: block; width: 76px; height: 76px;
  filter: drop-shadow(0 0 1px rgba(255,255,255,.6)) drop-shadow(0 6px 10px rgba(0,0,0,.5));
}
.kit-shirt {
  display: block; width: 100%; height: 100%;
  clip-path: polygon(32% 10%, 42% 6%, 50% 12%, 58% 6%, 68% 10%, 90% 24%, 81% 39%, 72% 33%, 72% 92%, 28% 92%, 28% 33%, 19% 39%, 10% 24%);
}
.kit-opt-name { font-family: var(--font-display); font-weight: 800; font-size: 15px; text-transform: uppercase; letter-spacing: .4px; text-align: center; }
.kit-tier { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); }
.kit-tier.premium { color: var(--accent); }
.kit-tier.on { color: var(--success); }
.kit-note { margin: 0; font-size: 12.5px; color: var(--text-muted); }
@media (max-width: 600px) {
  .kit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kit-shirt-wrap { width: 60px; height: 60px; }
}


/* [KULLANICI İSTEĞİ, KARARLAŞTIRILDI — OYUN İÇİ PARA (COIN)] Coin çipi, mağaza, forma dolabı
   kilidi ve maç sonu ödül paneli. Coin rengi takım temasından bağımsız sabit bir altın — vurgu
   rengi (accent) tuttuğun takıma göre değiştiği için para her takımda aynı görünsün diye. */
:root { --coin: #f5c542; --coin-soft: rgba(245, 197, 66, .13); --coin-line: rgba(245, 197, 66, .34); }
.coin-ico { display: inline-flex; color: var(--coin); flex: 0 0 auto; }

.tb-chip.coins { cursor: pointer; color: var(--coin); border-color: var(--coin-line); background: var(--coin-soft); transition: border-color .15s var(--ease); }
.tb-chip.coins b { color: var(--coin); }
.tb-chip.coins:hover { border-color: var(--coin); }
.tb-chip.coins .tb-ico { color: var(--coin); }

.linklike { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* forma dolabı: kilitli premium */
.kit-opt.locked .kit-shirt-wrap { opacity: .55; }
.kit-opt.locked:hover .kit-shirt-wrap { opacity: .8; }
.kit-tier { display: inline-flex; align-items: center; gap: 4px; }
.kit-tier.premium { color: var(--coin); font-weight: 700; }
.kit-tier.owned { color: var(--text); }

/* mağaza */
.store-view { gap: 18px; }
.store-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.store-head-text { display: flex; flex-direction: column; gap: 10px; }
.store-balance { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; border-radius: 12px; border: 1px solid var(--coin-line); background: var(--coin-soft); min-width: 210px; }
.store-balance-v { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 900; font-size: 38px; line-height: 1; color: var(--coin); }
.store-balance-sub { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.store-notice { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: 10px; border: 1px dashed var(--border-strong); font-size: 13.5px; color: var(--text-muted); }
.store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.store-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 14px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--card); }
.store-card.owned { border-color: var(--border-strong); }
.kit-shirt-wrap.big { width: 110px; height: 110px; margin-bottom: 4px; }
.store-card-name { font-family: var(--font-display); font-weight: 800; font-size: 19px; text-transform: uppercase; letter-spacing: .4px; text-align: center; }
.store-card-sub { font-size: 12px; color: var(--text-muted); text-align: center; min-height: 16px; }
.store-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; margin-top: 8px; }
.store-price { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--coin); }
.store-price.owned { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); }
.store-state { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); }
.store-state.on { color: var(--success); }
.store-rules { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.store-rule { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 9px; background: rgba(255, 255, 255, .03); border: 1px solid var(--border); font-size: 13.5px; }
.store-rule b { color: var(--coin); font-family: var(--font-mono); }
.store-fine { margin: 12px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; font-size: 13px; line-height: 1.5; color: var(--text-muted); }

/* maç sonu coin paneli */
.coin-award { display: flex; flex-direction: column; gap: 10px; }
.coin-award.got { border-color: var(--coin-line); background: linear-gradient(180deg, var(--coin-soft), transparent 70%), var(--card); }
.coin-award-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.coin-award-amt { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 900; font-size: 40px; line-height: 1; color: var(--coin); }
.coin-award.none .coin-award-amt { color: var(--text-faint); font-size: 30px; }
.coin-award.none .coin-award-amt .coin-ico { color: var(--text-faint); }
.coin-award-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 200px; font-size: 13px; color: var(--text-muted); }
.coin-award-text b { font-size: 15px; color: var(--text); }
.coin-award-lines { display: flex; flex-direction: column; gap: 4px; }
.coin-award-line { display: flex; justify-content: space-between; gap: 10px; padding: 7px 10px; border-radius: 8px; background: rgba(255, 255, 255, .03); font-size: 13px; }
.coin-award-line b { color: var(--coin); font-family: var(--font-mono); }
.coin-award-notes { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }

@media (max-width: 640px) {
  .store-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kit-shirt-wrap.big { width: 84px; height: 84px; }
  .store-card-foot { flex-direction: column; align-items: stretch; text-align: center; }
  .store-card-foot .store-price { justify-content: center; }
  .coin-award-amt { font-size: 32px; }
}


/* =====================================================================================
   [KULLANICI İSTEĞİ, KARARLAŞTIRILDI — MAĞAZA v2] Kozmetikler: mağaza sekmeleri, kart
   çerçeveleri + unvan, saha zeminleri, gol efektleri, satıldı damgaları, çark kaplamaları,
   tepkiler. Hepsi sınıf tabanlı (frame-*, skin-*, stamp-*, wheel-skin-*) — veri cosmetics.js'te.
   ===================================================================================== */

/* --- Mağaza sekmeleri --- */
.store-tabs { display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--border); scrollbar-width: none; }
.store-tabs::-webkit-scrollbar { display: none; }
.store-tab {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; padding: 11px 14px;
  background: none; border: none; border-bottom: 3px solid transparent; cursor: pointer;
  font-family: var(--font-display); font-weight: 800; font-size: 16px; letter-spacing: .5px; text-transform: uppercase;
  color: var(--text-muted);
}
.store-tab:hover { color: var(--text); }
.store-tab.on { color: var(--text); border-bottom-color: var(--accent); }
.store-tab-n { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); }
.store-tab.on .store-tab-n { color: var(--accent); }
.store-cat-who { margin: -4px 0 14px; font-size: 13px; }
.cos-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.cos-card { align-items: stretch; text-align: left; }
.cos-card.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.cos-card .store-card-sub { min-height: 32px; }
.cos-prev { display: flex; align-items: center; justify-content: center; min-height: 128px; margin-bottom: 6px; }
.cos-prev > * { width: 100%; }
.cos-play-wrap { position: relative; display: block; padding: 0; border: none; background: none; cursor: pointer; }
.cos-play-hint {
  position: absolute; right: 6px; bottom: 6px; z-index: 6; padding: 3px 7px; border-radius: 4px;
  background: rgba(7,12,20,.75); color: var(--text); font-family: var(--font-mono); font-size: 10px; font-weight: 700;
}

/* --- Unvan etiketi --- */
.lic-title {
  display: inline-block; align-self: flex-start; margin: 2px 0 4px; padding: 3px 10px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
  background: var(--t-accent, var(--accent)); color: var(--t-ink, var(--accent-ink));
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
.lic-title.small { font-size: 9px; padding: 2px 8px; margin: 3px 0 1px; letter-spacing: 1px; }

/* --- Mini lisans kartı (mağaza önizlemesi) --- */
.mini-lic { position: relative; border-radius: 10px; border: 1px solid rgba(255,255,255,.2); background: #0a0a0a; }
.mini-lic-inner { position: relative; height: 118px; border-radius: 9px; overflow: hidden; display: flex; flex-direction: column;
  background: #0a0a0a linear-gradient(90deg, transparent 62%, rgba(255,255,255,.06) 62% 68%, transparent 68% 76%, rgba(255,255,255,.06) 76% 82%, transparent 82% 90%, rgba(255,255,255,.06) 90%); }
.mini-lic-strip { width: 64%; padding: 4px 10px; background: var(--accent); color: var(--accent-ink);
  font-family: var(--font-display); font-weight: 800; font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%); }
.mini-lic-name { padding: 16px 12px 2px; font-family: var(--font-display); font-weight: 800; font-size: 22px; line-height: 1; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-lic .lic-title { margin-left: 12px; }

/* --- Kart çerçeveleri (.lic-card ve .mini-lic ortak) --- */
.lic-frame { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 4; }
.frame-gold, .frame-carbon { border-color: transparent !important; }
.frame-gold .lic-frame, .frame-carbon .lic-frame {
  padding: 5px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
.frame-gold .lic-frame { background: linear-gradient(135deg, #7a5a18 0%, #f3d27a 28%, #9c7524 52%, #f0cc6a 76%, #7a5a18 100%); }
.lic-card.frame-gold, .mini-lic.frame-gold { box-shadow: 0 22px 44px -18px rgba(0,0,0,.8), 0 0 36px -12px rgba(243,210,122,.55); }
.frame-carbon .lic-frame { background: repeating-linear-gradient(45deg, #1a1a1a 0 3px, #3a3a3a 3px 6px); }
.frame-carbon { box-shadow: 0 0 0 1px #4a4a4a; }
.frame-neon { border-color: #22d3ee !important; box-shadow: 0 0 18px rgba(34,211,238,.55), inset 0 0 12px rgba(34,211,238,.3) !important; }
.frame-claw { border-color: rgba(255,255,255,.55) !important; }
.frame-claw .lic-frame {
  inset: -2px 14% auto auto; width: 60px; height: 76px;
  background: repeating-linear-gradient(66deg, transparent 0 10px, rgba(255,255,255,.9) 10px 13px);
  -webkit-mask: linear-gradient(#000, transparent 90%); mask: linear-gradient(#000, transparent 90%);
}
.frame-chalk { border-color: #1f3a2c !important; box-shadow: 0 0 0 5px #1f3a2c, 0 22px 44px -18px rgba(0,0,0,.8) !important; }
.frame-chalk .lic-frame { inset: 4px; border: 2px dashed rgba(255,255,255,.55); border-radius: 8px; }
.frame-lights { border-color: rgba(255,250,220,.3) !important; }
.frame-lights .lic-frame {
  background: radial-gradient(ellipse 28% 60% at 16% 0%, rgba(255,250,220,.42), transparent 70%),
              radial-gradient(ellipse 28% 60% at 84% 0%, rgba(255,250,220,.42), transparent 70%);
}
/* Bekleme odası avatarında çerçevenin küçük hâli */
.wr-avatar.frame-gold { box-shadow: 0 0 0 2px #f3d27a, 0 0 12px -2px rgba(243,210,122,.7); }
.wr-avatar.frame-neon { box-shadow: 0 0 0 2px #22d3ee, 0 0 12px rgba(34,211,238,.6); }
.wr-avatar.frame-claw { box-shadow: 0 0 0 2px #fff; }
.wr-avatar.frame-chalk { box-shadow: 0 0 0 2px #1f3a2c, 0 0 0 3px rgba(255,255,255,.6); }
.wr-avatar.frame-lights { box-shadow: 0 0 0 2px rgba(255,250,220,.7), 0 -4px 12px rgba(255,250,220,.4); }
.wr-avatar.frame-carbon { box-shadow: 0 0 0 3px #2c2c2c, 0 0 0 4px #555; }

/* --- Saha zeminleri --- */
.pitch-field.skin-night {
  border-color: rgba(255,250,220,.35);
  background:
    radial-gradient(40% 55% at 0% 0%, rgba(255,250,220,.38), transparent 70%),
    radial-gradient(40% 55% at 100% 0%, rgba(255,250,220,.38), transparent 70%),
    radial-gradient(40% 55% at 0% 100%, rgba(255,250,220,.24), transparent 70%),
    radial-gradient(40% 55% at 100% 100%, rgba(255,250,220,.24), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 12.5%, rgba(0,0,0,.1) 12.5% 25%),
    linear-gradient(160deg, #10402a, #03100a 80%);
}
.pitch-field.skin-night::before { display: none; }
.pitch-field.skin-night .pitch-halfline { background: rgba(255,255,255,.62); }
.pitch-field.skin-night .pitch-circle, .pitch-field.skin-night .pitch-box { border-color: rgba(255,255,255,.62); }
.pitch-field.skin-night .pitch-dot { box-shadow: 3px 4px 4px rgba(0,0,0,.6); }
.pitch-field.skin-snow {
  border-color: rgba(255,255,255,.6);
  background:
    radial-gradient(circle, rgba(255,255,255,.95) 1px, transparent 1.6px) 0 0 / 9px 11px,
    radial-gradient(circle, rgba(255,255,255,.7) 1px, transparent 1.6px) 4px 6px / 13px 9px,
    linear-gradient(160deg, #dbe8ec, #a9c0c8);
  box-shadow: inset 0 0 30px rgba(40,70,90,.35), var(--shadow-lg);
}
.pitch-field.skin-snow .pitch-halfline, .pitch-field.skin-snow .pitch-circle::after { background: #2563c9; }
.pitch-field.skin-snow .pitch-circle, .pitch-field.skin-snow .pitch-box { border-color: #2563c9; }
.pitch-field.skin-snow .pitch-ball, .pitch-field.skin-snow .cos-ball { background: radial-gradient(circle at 35% 35%, #ffb066, #ff6a00 65%, #b44600); }
.pitch-field.skin-snow .pitch-caption, .pitch-field.skin-snow .pitch-phase { color: #0b1422; }
.pitch-field.skin-retro {
  border: 6px solid #2a2622; border-radius: 18px;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.2) 0 2px, transparent 2px 4px),
    radial-gradient(110% 100% at 50% 50%, transparent 55%, rgba(0,0,0,.55)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 12.5%, rgba(0,0,0,.06) 12.5% 25%),
    linear-gradient(160deg, #6d8a45, #43592a);
  filter: saturate(.8) sepia(.18);
}
.pitch-field.skin-retro::before { display: none; }
.pitch-field.skin-retro .pitch-halfline { background: rgba(240,235,210,.55); }
.pitch-field.skin-retro .pitch-circle, .pitch-field.skin-retro .pitch-box { border-color: rgba(240,235,210,.55); }

/* Mağaza önizlemesindeki mini saha */
.cos-pitch { box-shadow: inset 0 0 30px rgba(0,0,0,.5); }
.cos-dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%, -50%); z-index: 2; }
.cos-dot.home { background: repeating-linear-gradient(90deg, #111 0 2px, #fff 2px 4px); border: 1.5px solid #fff; }
.cos-dot.away { background: #fdb912; border: 1.5px solid #a90d1c; }
.cos-ball { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; border-radius: 50%; transform: translate(-50%, -50%); z-index: 3;
  background: radial-gradient(circle at 35% 35%, #f4f7f5, #c7d0cb 65%, #8f9a93); box-shadow: 0 2px 5px rgba(0,0,0,.55); }

/* --- Gol efektleri --- */
.fx-flash { position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: inherit; opacity: 0;
  animation: fx-flash 1s var(--ease) forwards; }
.fx-flash.right { background: radial-gradient(70% 90% at 94% 50%, rgba(255,255,255,.95), rgba(255,255,255,.35) 45%, transparent 75%); }
.fx-flash.left { background: radial-gradient(70% 90% at 6% 50%, rgba(255,255,255,.95), rgba(255,255,255,.35) 45%, transparent 75%); }
@keyframes fx-flash { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }
.pitch-field:has(.fx-flash) { box-shadow: 0 0 34px rgba(255,255,255,.5), var(--shadow-lg); }
.fx-dim { position: absolute; inset: 0; z-index: 5; pointer-events: none; background: rgba(6,10,24,.6); opacity: 0;
  animation: fx-dim 1.8s ease forwards; }
@keyframes fx-dim { 0% { opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
.fx-star { position: absolute; top: -8%; z-index: 6; pointer-events: none; color: #f3d27a; line-height: 1;
  text-shadow: 0 0 10px rgba(243,210,122,.9); opacity: 0; animation: fx-star 1.3s ease-in forwards; }
@keyframes fx-star { 0% { opacity: 0; transform: translateY(0) rotate(0); } 15% { opacity: 1; } 100% { opacity: 0; top: var(--fall, 80%); transform: rotate(160deg); } }

/* --- Tribün sesi önizlemesi --- */
.cos-sound { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px; border-radius: 10px; cursor: pointer;
  background: var(--bg); border: 1px solid var(--border); }
.cos-sound:hover { border-color: var(--border-strong); }
.cos-sound-play { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: var(--accent); position: relative; }
.cos-sound-play::after { content: ''; position: absolute; left: 15px; top: 12px; border-left: 13px solid var(--accent-ink);
  border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.cos-wave { flex: 1; height: 30px; background: repeating-linear-gradient(90deg, var(--accent) 0 3px, transparent 3px 6px); }

/* --- Satıldı damgaları --- */
.cos-stamp { width: 100%; }
.cos-stamp-card { display: flex; flex-direction: column; gap: 4px; height: 118px; padding: 12px; border-radius: 9px; text-align: left;
  background: var(--card-hover); border: 1px solid var(--border); }
.cos-stamp-pos { align-self: flex-start; padding: 2px 6px; background: var(--fw); color: #12140f; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; }
.cos-stamp-name { font-family: var(--font-display); font-weight: 800; font-size: 20px; text-transform: uppercase; color: var(--text); }
.cos-stamp-meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.sold-wrap.stamp-gold::after {
  content: 'TOKMAK VURULDU'; top: 70%; font-size: 17px; letter-spacing: 1.6px; padding: 5px 14px;
  color: #2b1400; border: none; background: linear-gradient(135deg, #7a5a18, #f3d27a 45%, #9c7524);
  box-shadow: 0 6px 18px -6px rgba(0,0,0,.7); animation-name: stamp-slide;
}
@keyframes stamp-slide {
  0% { opacity: 0; transform: translate(-50%, 30%) rotate(0deg) scale(.9); }
  60% { opacity: 1; transform: translate(-50%, -58%) rotate(0deg) scale(1.04); }
  100% { opacity: 1; transform: translate(-50%, -50%) rotate(0deg) scale(1); }
}
.sold-wrap.stamp-seal::after {
  content: 'PG'; top: 64%; left: 72%; width: 64px; height: 64px; padding: 0; border: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 24px; letter-spacing: 1px; color: #f7d9c4;
  background: radial-gradient(circle at 35% 30%, #d8424f, #8f1420 70%);
  box-shadow: 0 3px 8px rgba(0,0,0,.4), inset 0 0 0 5px rgba(0,0,0,.14);
}

/* --- Çark kaplamaları (dilim renkleri/yazıları DEĞİŞMEZ; kenar, gösterge, parıltı) --- */
.wheel-skin-casino .wheel-disk { border-color: #111; box-shadow: 0 0 0 4px #d4a94a, 0 0 0 6px #5a4210, var(--shadow-lg); }
.wheel-skin-casino .wheel-pointer { border-top-color: #f3d27a; }
.wheel-skin-neon .wheel-disk { border-color: #07131c; box-shadow: 0 0 0 3px #22d3ee, 0 0 26px rgba(34,211,238,.65), inset 0 0 18px rgba(34,211,238,.35); }
.wheel-skin-neon .wheel-pointer { border-top-color: #22d3ee; filter: drop-shadow(0 0 8px rgba(34,211,238,.9)); }
.dr-wheel .wheel-skin-casino .wheel-disk { box-shadow: 0 0 0 4px #d4a94a, 0 0 0 6px #5a4210, 0 0 70px -10px rgba(243,210,122,.5); }
.dr-wheel .wheel-skin-neon .wheel-disk { box-shadow: 0 0 0 3px #22d3ee, 0 0 40px rgba(34,211,238,.6); }
.cos-wheel.wheel-stage { width: 120px; height: 120px; margin: 10px auto 0; }
.cos-wheel .wheel-disk { border-width: 4px; }
.cos-wheel .wheel-pointer { top: -6px; border-left-width: 9px; border-right-width: 9px; border-top-width: 15px; }

/* --- Tepkiler --- */
.react-chip {
  display: inline-flex; align-items: center; justify-content: center; padding: 7px 11px; border-radius: 5px; border: none; cursor: pointer;
  font-family: var(--font-display); font-weight: 900; font-size: 15px; letter-spacing: .6px; text-transform: uppercase; line-height: 1;
}
.react-chip.emoji { width: 42px; height: 42px; padding: 0; border-radius: 9px; font-size: 21px; background: var(--card-hover); border: 1px solid var(--border-strong); }
.react-chip.tone-danger { background: var(--danger); color: #fff; }
.react-chip.tone-good { background: var(--success); color: #06210f; }
.react-chip.tone-accent { background: var(--accent); color: var(--accent-ink); }
.react-chip.tone-light { background: var(--urgency); color: #0b1422; }
.cos-reacts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.cos-reacts .react-chip { cursor: default; }
.react-dock { position: fixed; left: 16px; bottom: 16px; z-index: 60; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.react-dock-btn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--bg-elevated);
  color: var(--text); font-size: 22px; cursor: pointer; box-shadow: var(--shadow); }
.react-dock.open .react-dock-btn { font-family: var(--font-mono); font-size: 20px; }
.react-dock-panel { display: flex; flex-direction: column; gap: 8px; max-width: min(320px, calc(100vw - 32px)); padding: 10px;
  border-radius: 12px; background: var(--bg-elevated); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); }
.react-dock-list { display: flex; flex-wrap: wrap; gap: 6px; }
.react-dock-hide { align-self: flex-start; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); }
.react-stack { position: fixed; right: 16px; bottom: 16px; z-index: 61; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; }
.react-bubble { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 10px;
  background: var(--bg-elevated); border: 1px solid var(--border-strong); box-shadow: var(--shadow);
  animation: react-in .25s var(--ease), react-out .4s ease 2.4s forwards; }
.react-bubble.mine { border-color: var(--accent-glow); }
.react-bubble-who { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--text-muted); }
.react-bubble .react-chip.emoji { width: 34px; height: 34px; font-size: 18px; }
@keyframes react-in { from { opacity: 0; transform: translateY(10px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes react-out { to { opacity: 0; transform: translateY(-6px); } }
@media (max-width: 640px) {
  .react-dock { left: 10px; bottom: 10px; }
  .react-stack { right: 10px; bottom: 70px; }
}

/* [YASAL — KVKK / ÇEREZ ONAYI] Onay şeridi, alt bilgi ve politika sayfası (bkz. legal.js). */
.consent-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1000;
  max-width: 720px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
  padding: 14px 16px; border-radius: 12px;
  background: var(--bg-elevated); color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.6);
}
.consent-text { flex: 1 1 320px; margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-muted); }
.consent-text a, .site-footer a, .legal-section a { color: var(--accent); }
.consent-actions { display: flex; gap: 8px; margin-left: auto; }
.site-footer { padding: 24px 16px 32px; text-align: center; font-size: 12.5px; }
.site-footer a { color: var(--text-faint); text-decoration: none; }
.site-footer a:hover { color: var(--text-muted); text-decoration: underline; }
.legal-view { max-width: 820px; }
.legal-section p, .legal-list { color: var(--text-muted); line-height: 1.6; font-size: 14px; }
.legal-list { padding-left: 20px; margin: 8px 0; }
.legal-list li + li { margin-top: 6px; }

/* [KULLANICI İSTEĞİ] Zaman çizelgesi v2 — eskiden tek sütunlu grid'di; ebeveyn ortaladığı için
   çizgi ~50px'e büzülüp takım adları üst üste biniyordu. Artık tam genişlik, tek satır:
   ev sahibi adı | çizgi | deplasman adı, dakika ölçeği çizginin altında. */
.match-timeline {
  display: grid; width: 100%; align-self: stretch; box-sizing: border-box;
  grid-template-columns: minmax(0, 96px) minmax(0, 1fr) minmax(0, 96px);
  grid-template-areas: "home track away" ". scale .";
  align-items: center; column-gap: 12px; row-gap: 0;
  margin: 8px 0 10px; padding: 8px 14px 6px;
  background: rgba(255, 255, 255, .025); border: 1px solid rgba(255, 255, 255, .06); border-radius: 10px;
}
.match-timeline .mt-team { font-size: 10.5px; color: var(--text-muted); white-space: nowrap; }
.match-timeline .mt-team.home { grid-area: home; text-align: right; }
.match-timeline .mt-team.away { grid-area: away; text-align: left; }
.match-timeline .mt-track { grid-area: track; }
.match-timeline .mt-scale { grid-area: scale; }
@media (max-width: 560px) {
  .match-timeline { grid-template-columns: minmax(0, 64px) minmax(0, 1fr) minmax(0, 64px); column-gap: 8px; padding: 6px 10px 4px; }
}

/* [KULLANICI İSTEĞİ] Maç anlatımının altındaki "Ana Sayfaya Dön". */
.playback-home { display: flex; justify-content: center; margin-top: 18px; }
.playback-home .btn { display: inline-flex; align-items: center; gap: 8px; }

/* [PAYLAŞILAN SONUÇ] /sonuc/:id */
.shared-result-kicker { text-align: center; margin: 0 0 10px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; }
.shared-result-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.shared-result-cta h3 { margin: 0 0 4px; }
.shared-result-cta p { margin: 0; text-wrap: pretty; }

/* ===================== [MAĞAZA v3] Forma serileri + yeni saha zeminleri ===================== */
.store-series-h { margin: 18px 0 10px; font-size: 12px; font-family: var(--font-mono); letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
.store-panel > h3 + .store-series-h { margin-top: 6px; }

.pitch-field.skin-mowed {
  background:
    repeating-conic-gradient(rgba(255,255,255,.07) 0 25%, rgba(0,0,0,.09) 0 50%) 0 0 / 25% 33.34%,
    linear-gradient(160deg, #2f8a3e, #1d6a2b);
}
.pitch-field.skin-mowed::before { display: none; }

.pitch-field.skin-sunset {
  background:
    radial-gradient(70% 60% at 85% -10%, rgba(255,170,80,.55), transparent 70%),
    linear-gradient(180deg, rgba(255,120,50,.28), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 12.5%, rgba(0,0,0,.08) 12.5% 25%),
    linear-gradient(160deg, #3d6a2a, #1c3518);
}
.pitch-field.skin-sunset::before { display: none; }
.pitch-field.skin-sunset .pitch-halfline { background: rgba(255,236,210,.7); }
.pitch-field.skin-sunset .pitch-circle, .pitch-field.skin-sunset .pitch-box { border-color: rgba(255,236,210,.7); }
.pitch-field.skin-sunset .pitch-dot { box-shadow: -5px 4px 5px rgba(40,10,0,.55); }

.pitch-field.skin-rain {
  background:
    repeating-linear-gradient(105deg, rgba(210,225,255,.13) 0 1px, transparent 1px 8px),
    radial-gradient(14% 10% at 30% 70%, rgba(170,200,230,.28), transparent 70%),
    radial-gradient(10% 8% at 72% 28%, rgba(170,200,230,.22), transparent 70%),
    linear-gradient(160deg, #22462e, #0f2318);
  filter: saturate(.75);
}
.pitch-field.skin-rain .pitch-halfline { background: rgba(255,255,255,.5); }
.pitch-field.skin-rain .pitch-circle, .pitch-field.skin-rain .pitch-box { border-color: rgba(255,255,255,.5); }

.pitch-field.skin-beach {
  border-color: #b48a45;
  background:
    radial-gradient(circle, rgba(120,85,35,.28) 1px, transparent 1.5px) 0 0 / 6px 6px,
    radial-gradient(circle, rgba(255,255,255,.35) .8px, transparent 1.3px) 3px 2px / 7px 5px,
    linear-gradient(160deg, #ecd49c, #c9a663);
}
.pitch-field.skin-beach::before { display: none; }
.pitch-field.skin-beach .pitch-halfline, .pitch-field.skin-beach .pitch-circle::after { background: #1d4ed8; }
.pitch-field.skin-beach .pitch-circle, .pitch-field.skin-beach .pitch-box { border-color: #1d4ed8; }
.pitch-field.skin-beach .pitch-caption, .pitch-field.skin-beach .pitch-phase { color: #2a1d08; }

.pitch-field.skin-film70 {
  border: 5px solid #1b140c; border-radius: 22px;
  background:
    radial-gradient(circle, rgba(0,0,0,.2) .6px, transparent 1px) 0 0 / 3px 3px,
    radial-gradient(120% 100% at 50% 50%, transparent 48%, rgba(40,20,0,.6)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 12.5%, rgba(0,0,0,.06) 12.5% 25%),
    linear-gradient(160deg, #8b8a4c, #57552a);
  filter: sepia(.45) contrast(1.05);
}
.pitch-field.skin-film70::before { display: none; }
.pitch-field.skin-film70 .pitch-halfline { background: rgba(250,240,215,.6); }
.pitch-field.skin-film70 .pitch-circle, .pitch-field.skin-film70 .pitch-box { border-color: rgba(250,240,215,.6); }

.pitch-field.skin-arcade {
  border: 4px solid #b6ff6a; border-radius: 0;
  background:
    linear-gradient(rgba(0,0,0,.3) 1px, transparent 1px) 0 0 / 8px 8px,
    linear-gradient(90deg, rgba(0,0,0,.3) 1px, transparent 1px) 0 0 / 8px 8px,
    #1f7a2e;
  image-rendering: pixelated;
}
.pitch-field.skin-arcade::before { display: none; }
.pitch-field.skin-arcade .pitch-halfline, .pitch-field.skin-arcade .pitch-circle::after { background: #b6ff6a; }
.pitch-field.skin-arcade .pitch-circle { border-radius: 0; border-color: #b6ff6a; }
.pitch-field.skin-arcade .pitch-box, .pitch-field.skin-arcade .pitch-goal { border-color: #b6ff6a; border-radius: 0; }
.pitch-field.skin-arcade .pitch-dot { border-radius: 2px; }
.pitch-field.skin-arcade .pitch-ball, .pitch-field.skin-arcade .cos-ball { border-radius: 1px; background: #fff; box-shadow: 2px 2px 0 #0b3d14; }
.pitch-field.skin-arcade .pitch-caption, .pitch-field.skin-arcade .pitch-phase { font-family: var(--font-mono); color: #b6ff6a; }

.pitch-field.skin-neon {
  border-color: #22d3ee;
  background:
    radial-gradient(60% 50% at 50% 50%, rgba(34,211,238,.10), transparent 70%),
    linear-gradient(160deg, #0b1028, #04050e);
  box-shadow: 0 0 22px -6px rgba(34,211,238,.6), inset 0 0 30px rgba(0,0,0,.6);
}
.pitch-field.skin-neon::before { display: none; }
.pitch-field.skin-neon .pitch-halfline, .pitch-field.skin-neon .pitch-circle::after { background: #22d3ee; box-shadow: 0 0 6px #22d3ee; }
.pitch-field.skin-neon .pitch-circle { border-color: #22d3ee; box-shadow: 0 0 6px #22d3ee, inset 0 0 6px #22d3ee; }
.pitch-field.skin-neon .pitch-box, .pitch-field.skin-neon .pitch-goal { border-color: #f472d0; box-shadow: 0 0 6px #f472d0; }
.pitch-field.skin-neon .pitch-dot { box-shadow: 0 0 8px rgba(255,255,255,.35); }

/* [KULLANICI İSTEĞİ] Odaya Katıl — "maç bileti" ekranı (bkz. views.js renderJoinTicket). */
.jt-wrap { width: 100%; max-width: 620px; margin: 28px auto 0; animation: pop-in 0.3s var(--ease); }
.jt-ticket {
  position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr);
  background: linear-gradient(180deg, #111d2e 0%, var(--card-solid) 100%);
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,149,0,0.06) inset;
}
.jt-ticket::before, .jt-ticket::after {
  content: ''; position: absolute; left: 52px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--border-strong);
}
.jt-ticket::before { top: -13px; } .jt-ticket::after { bottom: -13px; }
.jt-stub {
  display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 22px 0;
  background: repeating-linear-gradient(135deg, rgba(255,149,0,0.10) 0 8px, rgba(255,149,0,0.04) 8px 16px);
  border-right: 2px dashed var(--border-strong);
}
.jt-stub-icon { font-size: 22px; }
.jt-stub-text {
  writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 700; letter-spacing: 3px; color: var(--accent);
}
.jt-main { padding: 26px 30px 22px; min-width: 0; }
.jt-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10.5px;
  font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted);
}
.jt-live { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 0 var(--success-glow); animation: jt-ping 1.6s infinite; }
@keyframes jt-ping { 0% { box-shadow: 0 0 0 0 var(--success-glow); } 80%,100% { box-shadow: 0 0 0 8px transparent; } }
.jt-title {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 5vw, 42px); line-height: 1;
  text-transform: uppercase; letter-spacing: 0.3px; margin: 10px 0 8px;
}
.jt-title span { color: var(--accent); }
.jt-sub { margin: 0 0 22px; color: var(--text-muted); font-size: 14px; line-height: 1.5; text-wrap: pretty; }
.jt-label-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.jt-label { display: block; font-size: 11.5px; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 8px; }
.jt-paste {
  margin-bottom: 8px; background: none; border: 1px solid var(--border-strong); color: var(--text-muted);
  font-size: 11.5px; font-weight: 700; padding: 5px 10px; border-radius: var(--radius-sm); cursor: pointer;
  transition: all 0.15s var(--ease);
}
.jt-paste:hover { border-color: var(--accent); color: var(--accent); }
.jt-code { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; cursor: text; }
.jt-cell {
  aspect-ratio: 4 / 5; max-height: 84px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 6vw, 44px); color: var(--text);
  background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: var(--radius);
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease), transform 0.15s var(--ease);
}
.jt-cell.filled { border-color: rgba(255,149,0,0.55); background: linear-gradient(180deg, rgba(255,149,0,0.12), rgba(255,149,0,0.03)); animation: jt-pop 0.18s var(--ease); }
.jt-cell.caret { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.jt-cell.caret:not(.filled)::after { content: ''; width: 2px; height: 42%; background: var(--accent); animation: jt-blink 1s steps(1) infinite; }
@keyframes jt-blink { 50% { opacity: 0; } }
@keyframes jt-pop { from { transform: scale(0.92); } to { transform: scale(1); } }
.jt-code-input {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; padding: 0;
  font-size: 16px; color: transparent; background: transparent; caret-color: transparent; cursor: text;
}
.jt-name {
  display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 6px;
  background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: var(--radius);
  transition: border-color 0.15s var(--ease);
}
.jt-name:focus-within { border-color: var(--accent); }
.jt-avatar {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--accent-ink); font-family: var(--font-display); font-weight: 800; font-size: 20px;
}
.jt-name input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--text); font-size: 15px; font-family: inherit; padding: 8px 4px; }
.jt-cta {
  width: 100%; margin-top: 18px; padding: 16px 20px; display: flex; align-items: center; justify-content: center; gap: 12px;
  border-radius: var(--radius); cursor: pointer; border: 1px solid var(--border-strong);
  background: var(--bg-elevated); color: var(--text-faint);
  font-family: var(--font-display); font-weight: 800; font-size: 21px; letter-spacing: 1.6px; text-transform: uppercase;
  transition: all 0.2s var(--ease);
}
.jt-cta.ready { background: var(--accent); border-color: transparent; color: var(--accent-ink); box-shadow: 0 14px 30px -10px var(--accent-glow); }
.jt-cta.ready:hover { filter: brightness(1.08); transform: translateY(-1px); }
.jt-cta-arrow { transition: transform 0.2s var(--ease); }
.jt-cta.ready:hover .jt-cta-arrow { transform: translateX(4px); }
.jt-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--border-strong); }
.jt-step { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); }
.jt-step b {
  width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11px; color: var(--accent); border: 1px solid rgba(255,149,0,0.45);
}
@media (max-width: 560px) {
  .jt-ticket { grid-template-columns: minmax(0, 1fr); }
  .jt-stub, .jt-ticket::before, .jt-ticket::after { display: none; }
  .jt-main { padding: 22px 18px 18px; }
  .jt-code { gap: 7px; }
  .jt-steps { grid-template-columns: minmax(0, 1fr); }
}

/* [KULLANICI İSTEĞİ] Dizilim sonrası "Hazırım — Maçı Başlat" CTA'sı (bkz. views.js renderLineup). */
.mr-cta {
  position: relative; overflow: hidden; width: 100%; margin-top: 4px; padding: 16px 18px;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; text-align: left;
  border-radius: var(--radius-lg); cursor: pointer; border: 1px solid var(--border-strong);
  background: var(--bg-elevated); color: var(--text); transition: all 0.2s var(--ease);
}
.mr-icon {
  width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 800; border: 1px solid var(--border-strong); color: var(--text-muted); flex-shrink: 0;
}
.mr-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mr-title { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: 1.2px; text-transform: uppercase; line-height: 1.05; }
.mr-sub { font-size: 12px; color: var(--text-muted); line-height: 1.35; }
.mr-pips { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; max-width: 80px; }
.mr-pip { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--border-strong); background: transparent; transition: all 0.2s var(--ease); }
.mr-pip.on { background: var(--success); border-color: var(--success); box-shadow: 0 0 8px var(--success-glow); }
.mr-cta.idle { opacity: 0.75; }
.mr-cta.idle:hover { opacity: 1; border-color: var(--accent); }
.mr-cta.armed {
  border-color: transparent; color: var(--accent-ink);
  background: linear-gradient(135deg, #ffad33 0%, var(--accent) 45%, var(--accent-strong) 100%);
  box-shadow: 0 16px 34px -12px var(--accent-glow); animation: mr-breathe 2.2s ease-in-out infinite;
}
.mr-cta.armed .mr-sub { color: rgba(43, 20, 0, 0.75); }
.mr-cta.armed .mr-icon { background: var(--accent-ink); color: var(--accent); border-color: transparent; padding-left: 3px; }
.mr-cta.armed .mr-pip { border-color: rgba(43, 20, 0, 0.4); }
.mr-cta.armed .mr-pip.on { background: var(--accent-ink); border-color: var(--accent-ink); box-shadow: none; }
.mr-cta.armed::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent); animation: mr-shine 2.8s ease-in-out infinite;
}
.mr-cta.armed:hover { filter: brightness(1.06); transform: translateY(-2px); }
.mr-cta.armed:active { transform: scale(0.985); }
@keyframes mr-breathe { 0%,100% { box-shadow: 0 16px 34px -12px var(--accent-glow); } 50% { box-shadow: 0 16px 44px -8px var(--accent-glow), 0 0 0 4px var(--accent-soft); } }
@keyframes mr-shine { 0% { left: -60%; } 55%,100% { left: 130%; } }
.mr-cta.waiting { border-color: rgba(34,197,94,0.5); background: linear-gradient(180deg, rgba(34,197,94,0.12), rgba(34,197,94,0.04)); }
.mr-cta.waiting .mr-icon { background: var(--success); color: #04230f; border-color: transparent; }
.mr-cta.waiting .mr-title { color: var(--success); }
.mr-cta.waiting::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: repeating-linear-gradient(90deg, var(--success) 0 18px, transparent 18px 30px);
  background-size: 30px 3px; animation: mr-march 0.8s linear infinite; opacity: 0.7;
}
.mr-cta.waiting:hover { border-color: var(--success); }
@keyframes mr-march { to { background-position: 30px 0; } }
@media (prefers-reduced-motion: reduce) { .mr-cta, .mr-cta::after, .jt-live, .jt-cell { animation: none !important; } }


/* [DÜZELTİLDİ — MOBİL] Bütçe kartları üst üste biniyordu: eski .budget-card kuralındaki
   min-width:220px, mobildeki 3 sütunlu (minmax(0,1fr)) ızgarada hücreden taşıp yan karta
   biniyor ve sayfayı yatay kaydırıyordu (soldaki içerik kesik görünüyordu). Aynı kökenli diğer
   sabit genişlikler de dar ekranda serbest bırakıldı. */
.budget-card, .budget-card.v3 { min-width: 0; }
.budget-card .budget { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.view, .panel, .lu-col, .lu-grid > *, .round-area { min-width: 0; }
.timer-bar { max-width: 100%; }
.player-card { max-width: 100%; }
.lic-card, .lic-card.large { max-width: 100%; }
@media (max-width: 640px) {
  .budget-row.v3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .budget-card.v3 .budget { font-size: 20px; }
  .budget-card .slots { white-space: normal; }
  .lu-tab, .trade-tab { min-width: 0; padding-inline: 10px; }
  .match-live-log { min-width: 0; }
  .scoreline .team { width: auto; min-width: 0; flex: 1; font-size: 14px; overflow-wrap: anywhere; }
  .dh-block { min-width: 0; }
  .dh-block small { white-space: normal; }
  .lic-card.large { height: auto; aspect-ratio: 420 / 252; }
  .mr-cta { padding: 14px; gap: 12px; }
  .mr-title { font-size: 19px; }
  .mr-pips { max-width: 46px; }
}
@media (max-width: 420px) {
  .dr-wheel { width: min(300px, calc(100vw - 40px)); height: min(300px, calc(100vw - 40px)); }
  .wheel-stage { width: min(260px, calc(100vw - 48px)); height: min(260px, calc(100vw - 48px)); }
  .jt-cell { font-size: 28px; }
  .mr-icon { width: 38px; height: 38px; }
}

/* Odaya Katıl bileti — giriş yapmış kullanıcının sabit adı (ad sorulmaz). */
.jt-name-fixed { align-self: center; font-weight: 600; color: var(--text); }

/* [KULLANICI İSTEĞİ] Draft başı geri sayımı (bkz. views.js draftStartCountdown). */
.start-cd { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 36px 16px 40px; text-align: center; animation: pop-in 0.3s var(--ease); }
.start-cd-kicker { font-family: var(--font-mono); font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: var(--accent); }
.start-cd-num { font-family: var(--font-display); font-size: clamp(88px, 22vw, 150px); line-height: 1; color: var(--text); text-shadow: 0 0 40px var(--accent-glow, rgba(255, 149, 0, .45)); animation: start-cd-pulse 1s ease-in-out infinite; }
.start-cd-sub { color: var(--text-muted); font-size: 14px; }
@keyframes start-cd-pulse { 0% { transform: scale(1.12); opacity: .6; } 30% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .start-cd-num { animation: none; } }

/* [KULLANICI İSTEĞİ] Dizilim ve maç sonucu sahalarında oyuncu kartının sol üst köşesinde küçük
   forma (desen .kit-shirt ile aynı siluet). Mutlak konumlu — kartın düzenini değiştirmez,
   tıklamayı (dizilimdeki gizli select) engellemez. Kaleci kendi sarı formasıyla. */
.chip-kit {
  position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; pointer-events: none;
  /* İnce açık kenar: koyu formalar koyu kartın üstünde de seçilsin (filter clip-path'li iç
     öğeye değil sarmalayıcıya uygulanır, yoksa gölge kırpılır). */
  filter: drop-shadow(0 0 .6px rgba(255,255,255,.9)) drop-shadow(0 0 .6px rgba(255,255,255,.6));
}
.chip-kit-shirt {
  display: block; width: 100%; height: 100%;
  clip-path: polygon(32% 10%, 42% 6%, 50% 12%, 58% 6%, 68% 10%, 90% 24%, 81% 39%, 72% 33%, 72% 92%, 28% 92%, 28% 33%, 19% 39%, 10% 24%);
}
.lineup-pitch.small .chip-kit { top: 2px; left: 2px; width: 11px; height: 11px; }
.lu-slot.dense .chip-kit { width: 12px; height: 12px; }
.lu-card-meta .kit-swatch { margin: 0 6px 0 0; }
@media (max-width: 640px) {
  .chip-kit { width: 11px; height: 11px; top: 2px; left: 2px; }
}

/* ============================== ARKADAŞLAR ============================== */
/* [KULLANICI İSTEĞİ, KARARLAŞTIRILDI — ARKADAŞLAR] bkz. views.js renderFriends, friendsStrip. */
.friends-view { gap: 18px; max-width: 880px; width: 100%; margin: 0 auto; }
.fr-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.fr-head-text { display: flex; flex-direction: column; gap: 10px; min-width: 0; flex: 1 1 320px; }
.fr-code-card {
  display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: 1px solid var(--border-strong);
  border-left: 3px solid var(--accent); border-radius: var(--radius); background: var(--bg-elevated);
}
.fr-code { font-family: var(--font-mono); font-size: 26px; font-weight: 600; letter-spacing: 3px; color: var(--text); }
.fr-code-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.fr-add-row { display: flex; gap: 10px; flex-wrap: wrap; }
.fr-add-row input {
  flex: 1 1 200px; min-width: 0; padding: 11px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--text); font-family: var(--font-mono); font-size: 16px; letter-spacing: 2px; text-transform: uppercase;
}
.fr-add-row input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.fr-hint { margin: 10px 0 0; font-size: 13px; }
.fr-section { display: flex; flex-direction: column; gap: 4px; }
.fr-list { display: flex; flex-direction: column; }
.fr-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.fr-section h3 + .fr-row, .fr-list > .fr-row:first-child, .fr-blocked summary + .fr-row { border-top: 0; }
.fr-row.joinable .fr-avatar { border-color: var(--success); color: var(--success); }
.fr-avatar {
  flex: 0 0 auto; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background: var(--bg); font-family: var(--font-display); font-weight: 800; font-size: 15px;
}
.fr-row-id { flex: 1 1 auto; min-width: 0; }
.fr-row-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-row-status { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); }
.fr-row-status.join { color: var(--success); }
.fr-row-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.fr-block { font-size: 12px; color: var(--text-faint); }
.fr-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); }
.fr-dot.on, .fr-dot.join { background: var(--success); box-shadow: 0 0 6px var(--success-glow); }
.fr-dot.busy { background: var(--accent); }
.fr-more { position: relative; }
.fr-more summary {
  list-style: none; cursor: pointer; display: inline-grid; place-items: center; width: 32px; height: 32px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); font-weight: 700;
}
.fr-more summary::-webkit-details-marker { display: none; }
.fr-more[open] summary { border-color: var(--accent); color: var(--text); }
.fr-more-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; display: flex; flex-direction: column; min-width: 180px;
  padding: 4px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--card-hover); box-shadow: var(--shadow);
}
.fr-more-menu button { padding: 9px 12px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--text); text-align: left; font: inherit; font-size: 13px; cursor: pointer; }
.fr-more-menu button:hover { background: rgba(255, 255, 255, .06); }
.fr-more-menu button.danger { color: var(--danger); }
.fr-toggle { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--text-muted); cursor: pointer; }
.fr-toggle input { margin-top: 3px; accent-color: var(--accent); }
.fr-blocked { margin-top: 12px; }
.fr-blocked summary { cursor: pointer; color: var(--text-muted); font-size: 13px; padding: 6px 0; }

/* Ana sayfa şeridi */
.fr-strip {
  display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 12px 14px; margin-top: 4px; text-align: left;
  border: 1px solid var(--border); border-left: 3px solid var(--success); border-radius: var(--radius); background: rgba(14, 24, 38, .82);
}
.fr-strip-head { display: flex; align-items: center; gap: 10px; }
.fr-strip-all { margin-left: auto; font-size: 13px; }
.fr-badge { padding: 3px 8px; border: 0; border-radius: var(--radius-sm); background: var(--accent); color: var(--accent-ink); font-size: 11.5px; font-weight: 700; cursor: pointer; }
.fr-strip-list { display: flex; flex-direction: column; gap: 6px; }
.fr-strip-row { display: flex; align-items: center; gap: 10px; min-height: 34px; }
.fr-strip-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%; }
.fr-strip-status { flex: 1 1 auto; min-width: 0; font-size: 12.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-strip-none { font-size: 13px; color: var(--text-faint); }
.fr-strip-empty {
  align-self: flex-start; margin-top: 4px; padding: 8px 12px; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm);
  background: none; color: var(--text-muted); font: inherit; font-size: 13px; cursor: pointer;
}
.fr-strip-empty:hover { border-color: var(--accent); color: var(--text); }
@media (max-width: 640px) {
  .fr-code { font-size: 22px; }
  .fr-code-card { flex: 1 1 100%; }
  .fr-row.incoming { flex-wrap: wrap; }
  .fr-row.incoming .fr-row-actions { width: 100%; padding-left: 48px; }
  .fr-strip-name { max-width: 45%; }
}

/* ============================== GÖREVLER ============================== */
/* [KULLANICI İSTEĞİ, KARARLAŞTIRILDI — GÖREVLER] Üst bar düğmesi + açılır panel (app.js toggleQuestsPop,
   views.js renderQuestsPanel). */
.tb-link .tb-count {
  display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; margin-left: -2px;
  border-radius: 9px; background: var(--accent); color: var(--accent-ink); font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
}
.tb-link .tb-count[hidden] { display: none; }
.tb-link.has-claim { color: var(--text); }
.tb-link.has-claim .tb-ico, .tb-link.has-claim svg { color: var(--accent); }
@media (max-width: 1180px) {
  .tb-link .tb-count { position: absolute; top: 1px; right: 0; margin: 0; min-width: 15px; height: 15px; font-size: 9.5px; box-shadow: 0 0 0 2px #0c1522; }
}
body.tb-compact .tb-link .tb-count { position: absolute; top: 1px; right: 0; margin: 0; min-width: 15px; height: 15px; font-size: 9.5px; box-shadow: 0 0 0 2px #0c1522; }

.quests-pop {
  display: none; position: fixed; z-index: 70; max-height: min(620px, calc(100vh - 90px)); overflow-y: auto;
  background: #0e1826; border: 1px solid rgba(255, 255, 255, .12); border-top: 3px solid var(--accent); border-radius: 12px; box-shadow: var(--shadow-lg);
}
.quests-pop.open { display: block; animation: pop-in .18s var(--ease); }
.qp-body { display: flex; flex-direction: column; }
.qp-head { padding: 14px 16px 10px; border-bottom: 1px solid var(--border); }
.qp-title { font-family: var(--font-display); font-weight: 900; font-size: 24px; line-height: 1; text-transform: uppercase; letter-spacing: .3px; }
.qp-sub { margin-top: 6px; font-size: 12px; line-height: 1.45; color: var(--text-muted); }
.qp-empty { padding: 18px 16px; font-size: 13px; color: var(--text-muted); }
.qp-sec { padding: 10px 16px 6px; border-bottom: 1px solid var(--border); }
.qp-sec:last-child { border-bottom: 0; padding-bottom: 12px; }
.qp-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.qp-sec-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-faint); }
.qp-sec-hint { font-size: 11px; color: var(--text-faint); white-space: nowrap; }
.qp-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.qp-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.qp-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.qp-row-title { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qp-reward { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--coin); }
.qp-bar { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.qp-bar i { display: block; height: 100%; background: var(--text-faint); border-radius: 3px; transition: width .3s var(--ease); }
.qp-row.ready .qp-bar i { background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }
.qp-row.claimed .qp-bar i { background: var(--success); }
.qp-row.claimed .qp-row-title, .qp-row.claimed .qp-reward { color: var(--text-faint); }
.qp-row-act { flex: 0 0 74px; display: flex; justify-content: flex-end; }
.qp-count { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.qp-done { font-size: 11.5px; font-weight: 600; color: var(--success); white-space: nowrap; }
.qp-claim { padding: 7px 12px; }
.qp-row-desc { margin-top: -3px; font-size: 11.5px; line-height: 1.4; color: var(--text-muted); }
.qp-row.claimed .qp-row-desc { color: var(--text-faint); }

/* [v8.5] Seçilen forma sahada giyilir (draft mini saha, maç sahası, maç performansı) + skorbord isim hizası */
.pitch-dot.kit.shirt { width: 15px; height: 15px; border: 0; border-radius: 0; clip-path: polygon(32% 10%, 42% 6%, 50% 12%, 58% 6%, 68% 10%, 90% 24%, 81% 39%, 72% 33%, 72% 92%, 28% 92%, 28% 33%, 19% 39%, 10% 24%); transform: translate(-50%, -50%) scale(1.25); }
.pitch-field.skin-arcade .pitch-dot.kit.shirt { border-radius: 0; }
.dm-slot.kit .dm-dot { position: relative; width: 40px; height: 40px; background: transparent !important; box-shadow: none; filter: drop-shadow(0 0 1px rgba(255,255,255,.55)) drop-shadow(0 3px 5px rgba(0,0,0,.5)); }
.dm-slot.kit.icon .dm-dot { filter: drop-shadow(0 0 2px var(--icon)) drop-shadow(0 3px 5px rgba(0,0,0,.5)); }
.dm-shirt, .mlp-shirt-bg { position: absolute; inset: 0; clip-path: polygon(32% 10%, 42% 6%, 50% 12%, 58% 6%, 68% 10%, 90% 24%, 81% 39%, 72% 33%, 72% 92%, 28% 92%, 28% 33%, 19% 39%, 10% 24%); }
.dm-slot.kit .dm-dot b { position: relative; z-index: 1; font-size: 13px; color: #fff; margin-top: 3px; text-shadow: 0 0 2px #000, 0 0 3px #000, 0 1px 2px #000; }
.pitch-lineup-chip.worn { min-width: 0; padding: 0; gap: 2px; background: none; border: 0; box-shadow: none; }
.pitch-lineup-slot:hover .pitch-lineup-chip.worn { transform: translateY(-2px); }
.mlp-shirt { position: relative; width: 38px; height: 38px; display: grid; place-items: center; filter: drop-shadow(0 0 1px rgba(255,255,255,.55)) drop-shadow(0 3px 5px rgba(0,0,0,.5)); }
.mlp-shirt .pitch-lineup-matchrating { position: relative; z-index: 1; margin-top: 4px; font-size: 11.5px; color: #fff !important; text-shadow: 0 0 2px #000, 0 0 3px #000, 0 1px 2px #000 !important; }
.pitch-lineup-chip.worn .pitch-lineup-name { max-width: 64px; padding: 1px 5px; border-radius: 4px; background: rgba(7,12,20,.78); border-bottom: 2px solid var(--border-strong); }
.pitch-lineup-chip.worn.rating-great .pitch-lineup-name { border-bottom-color: var(--accent); }
.pitch-lineup-chip.worn.rating-good .pitch-lineup-name { border-bottom-color: var(--success); }
.pitch-lineup-chip.worn.rating-poor .pitch-lineup-name { border-bottom-color: var(--danger); }
.pitch-lineup-chip.worn.rating-great .mlp-shirt { filter: drop-shadow(0 0 1px rgba(255,255,255,.55)) drop-shadow(0 0 6px var(--gold-glow)); }
.pitch-lineup-slot.icon .pitch-lineup-chip.worn { box-shadow: none; }
.pitch-lineup-slot.icon .pitch-lineup-chip.worn .mlp-shirt { filter: drop-shadow(0 0 2px var(--icon)) drop-shadow(0 3px 5px rgba(0,0,0,.5)); }
.lineup-pitch.small .mlp-shirt { width: 32px; height: 32px; }
.lineup-pitch.small .pitch-lineup-chip.worn .pitch-lineup-name { max-width: 54px; font-size: 8.5px; }
.scoreline .team { display: flex; align-items: center; gap: 8px; min-width: 0; width: auto; }
.scoreline .team.home { justify-content: flex-end; text-align: right; }
.scoreline .team.away { justify-content: flex-start; text-align: left; }
.scoreline .team-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scoreline .kit-swatch { flex-shrink: 0; width: 14px; height: 14px; }
@media (max-width: 560px) {
  .scoreline .team { flex: 1; font-size: 15px; gap: 5px; }
  .scoreline .team-name { white-space: normal; overflow-wrap: anywhere; }
  .pitch-dot.kit.shirt { width: 12px; height: 12px; }
  .lineup-pitch.small .mlp-shirt { width: 28px; height: 28px; }
  .mlp-shirt .pitch-lineup-matchrating { font-size: 10px; }
}

/* [v8.6] Lobi özellik şeridi — dikey kutular; geniş ekranda 4'lü, altında 2×2 (3+1 yetim satır yok) */
.lobby-features { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.lobby-feature { flex-direction: column; gap: 9px; padding: 13px; min-width: 0; }
.lobby-feature-code { margin: 0; }
.lobby-feature-title { font-size: 13px; line-height: 1.2; }
.lobby-feature-desc { font-size: 11.5px; margin-top: 3px; }
@media (max-width: 900px) { .lobby-features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }
@media (max-width: 330px) { .lobby-features { grid-template-columns: 1fr; } }

/* [v8.6] Görevler paneli v2 */
.qp-head-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.qp-close { display: none; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--border); background: rgba(255,255,255,.04); color: var(--text-muted); font-size: 14px; cursor: pointer; }
.qp-summary { display: flex; align-items: center; gap: 12px; margin: 12px 16px 0; padding: 12px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid var(--border); }
.qp-summary.has-ready { background: var(--coin-soft); border-color: var(--coin-line); }
.qp-ring { --p: 0; flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--accent) calc(var(--p) * 1%), rgba(255,255,255,.09) 0); }
.qp-ring span { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #0e1826; font-family: var(--font-mono); font-size: 11px; font-weight: 700; }
.qp-summary-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.qp-summary-txt b { font-size: 14px; }
.qp-summary-txt > span { font-size: 12px; color: var(--text-muted); }
.qp-summary-coin { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-weight: 700; color: var(--coin) !important; }
.qp-claim-all { flex: 0 0 auto; padding: 9px 12px; white-space: nowrap; }
.qp-tabs { display: flex; gap: 6px; padding: 12px 16px 0; overflow-x: auto; scrollbar-width: none; }
.qp-tabs::-webkit-scrollbar { display: none; }
.qp-tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: border-color .15s var(--ease), color .15s var(--ease); }
.qp-tab:hover { color: var(--text); border-color: var(--border-strong); }
.qp-tab.on { color: var(--accent); border-color: var(--accent-glow); background: var(--accent-soft); }
.qp-tab-dot { min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; display: inline-grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-family: var(--font-mono); font-size: 10px; font-style: normal; font-weight: 700; }
.qp-sec { border-bottom: 0; padding: 12px 16px 14px; }
.qp-sec-head { margin-bottom: 8px; }
.qp-list { display: flex; flex-direction: column; gap: 8px; }
.qp-card { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px; background: rgba(255,255,255,.025); border: 1px solid var(--border); transition: border-color .15s var(--ease); }
.qp-card.ready { border-color: var(--accent-glow); background: var(--accent-soft); box-shadow: 0 10px 24px -18px var(--accent-glow); }
.qp-card.claimed { opacity: .55; }
.qp-medal { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: var(--coin-soft); border: 1px solid var(--coin-line); color: var(--coin); }
.qp-medal b { font-family: var(--font-mono); font-size: 11px; line-height: 1; }
.qp-card.claimed .qp-medal { filter: grayscale(1); }
.qp-card-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.qp-card .qp-row-title { white-space: normal; line-height: 1.25; font-size: 13.5px; font-weight: 700; }
.qp-card .qp-row-desc { margin: 0; }
.qp-prog { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.qp-prog .qp-bar { flex: 1; height: 6px; }
.qp-card.ready .qp-bar i { background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }
.qp-card.claimed .qp-bar i { background: var(--success); }
.qp-prog .qp-count { flex: 0 0 auto; font-size: 11px; }
.qp-card .qp-claim { flex: 0 0 auto; padding: 9px 14px; }
.qp-card .qp-done { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(34,197,94,.14); font-size: 13px; }
@media (max-width: 560px) {
  .quests-pop { left: 0 !important; right: 0; width: auto !important; top: auto !important; bottom: 0; max-height: 84vh; border-radius: 18px 18px 0 0; border-width: 1px 0 0; border-top: 3px solid var(--accent); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -20px 60px rgba(0,0,0,.6); }
  .quests-pop.open { animation: qp-sheet .24s var(--ease); }
  .quests-pop::before { content: ''; display: block; width: 40px; height: 4px; margin: 8px auto 0; border-radius: 2px; background: rgba(255,255,255,.18); }
  .qp-head { padding-top: 8px; }
  .qp-close { display: grid; place-items: center; }
  .qp-tab { padding: 9px 14px; }
  .qp-card .qp-claim { padding: 11px 14px; }
}
@keyframes qp-sheet { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .quests-pop.open { animation: none; } }

/* [v8.6] Oda Kur formu v2 */
.lobby-card .lobby-form.lf-v2 { margin-top: 0; padding-top: 0; border-top: 0; display: flex; flex-direction: column; gap: 18px; }
.lf-v2 .field { margin: 0; }
.lf-field > label { display: block; margin-bottom: 8px; }
.lf-host { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid var(--border); }
.lf-avatar { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-family: var(--font-display); font-weight: 900; font-size: 20px; }
.lf-host-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lf-host-txt b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lf-host-txt span { font-size: 12px; color: var(--text-faint); }
.lf-host-tag { flex: 0 0 auto; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--accent-glow); color: var(--accent); font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; }

.lf-cards { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.lf-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; padding: 12px; text-align: left; border-radius: 12px; border: 1px solid var(--border); background: rgba(255,255,255,.025); color: var(--text); font: inherit; cursor: pointer; transition: border-color .15s var(--ease), background .15s var(--ease), transform .15s var(--ease); }
.lf-card:hover { border-color: var(--border-strong); }
.lf-card.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 10px 26px -18px var(--accent-glow); }
.lf-card-ico { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: rgba(255,255,255,.06); font-size: 18px; line-height: 1; }
.lf-card.on .lf-card-ico { background: rgba(255,149,0,.16); }
.lf-card-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-right: 18px; }
.lf-card-txt b { font-size: 14px; line-height: 1.2; }
.lf-card-txt span { font-size: 11.5px; line-height: 1.4; color: var(--text-muted); text-wrap: pretty; }
.lf-card-check { position: absolute; top: 12px; right: 12px; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--border-strong); }
.lf-card.on .lf-card-check { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 3px #0e1826; }

.lf-switches { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.lf-switch { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; text-align: left; border: 0; border-bottom: 1px solid var(--border); background: rgba(255,255,255,.02); color: var(--text); font: inherit; cursor: pointer; }
.lf-switch:last-child { border-bottom: 0; }
.lf-switch:hover { background: rgba(255,255,255,.04); }
.lf-switch-ico { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: rgba(255,255,255,.05); font-size: 16px; filter: grayscale(1); opacity: .6; transition: filter .15s, opacity .15s; }
.lf-switch.on .lf-switch-ico { filter: none; opacity: 1; background: var(--accent-soft); }
.lf-switch-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lf-switch-txt b { font-size: 13.5px; }
.lf-switch-txt span { font-size: 11.5px; line-height: 1.4; color: var(--text-muted); text-wrap: pretty; }
.lf-toggle { flex: 0 0 auto; position: relative; width: 40px; height: 24px; border-radius: 12px; background: rgba(255,255,255,.12); transition: background .18s var(--ease); }
.lf-toggle i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.4); transition: transform .18s var(--ease); }
.lf-switch.on .lf-toggle { background: var(--accent); }
.lf-switch.on .lf-toggle i { transform: translateX(16px); }

.lf-foot { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.lf-summary { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.lf-summary span { padding: 4px 9px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--border); font-size: 11.5px; color: var(--text-muted); }
.lf-cta { background: var(--accent); color: var(--accent-ink); border-color: transparent; font-size: 16px; padding: 15px; box-shadow: 0 14px 30px -12px var(--accent-glow); }
.lf-v2 + .lobby-back, .lf-v2 .lobby-back { margin-top: -6px; }
@media (max-width: 560px) {
  .lf-cards.n3 { grid-template-columns: 1fr; }
  .lf-cards.n3 .lf-card { flex-direction: row; align-items: center; }
}
@media (prefers-reduced-motion: reduce) { .lf-toggle, .lf-toggle i { transition: none; } }