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

/* ---------- Fontlar (bkz. prototype/assets/fonts) ----------
   Merkez font: Nunito — latin + latin-ext + kiril kapsar (tr, en, ru, es, pt, de...).
   Latin dışı alfabeler için aynı aile altında unicode-range'li Noto fallback'leri:
   tarayıcı bu dosyaları YALNIZCA o alfabede metin görünürse indirir —
   TR/EN oturumlarında CJK/Arapça/Tay fontlarının ağ maliyeti sıfırdır. */
/* Nunito'nun aralığı AÇIKÇA sınırlanır (latin + latin-ext + kiril + noktalama):
   aralıksız bırakılırsa tüm kod noktalarını sahiplenir ve tarayıcı CJK
   karakterlerde aşağıdaki fallback yüzlerine hiç düşmez. */
@font-face {
  font-family: 'Game Sans';
  src: url('../assets/fonts/Nunito.ttf') format('truetype');
  font-weight: 400; font-display: swap;
  unicode-range: U+0000-024F, U+0259, U+02BB-02DC, U+0300-036F, U+0400-052F,
    U+1C80-1C88, U+1E00-1EFF, U+2000-206F, U+20A0-20BF, U+2100-214F,
    U+2190-2199, U+2212-2215, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Game Sans';
  src: url('../assets/fonts/Nunito-Bold.ttf') format('truetype');
  font-weight: bold; font-display: swap;
  unicode-range: U+0000-024F, U+0259, U+02BB-02DC, U+0300-036F, U+0400-052F,
    U+1C80-1C88, U+1E00-1EFF, U+2000-206F, U+20A0-20BF, U+2100-214F,
    U+2190-2199, U+2212-2215, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F, U+FEFF, U+FFFD;
}
/* Arapça ve Tayca yüzleri 'Game Sans' ailesine unicode-range ile bağlıdır:
   tarayıcı bunları YALNIZCA sayfada o alfabeden karakter göründüğünde indirir,
   yani tr/en/es/pt/fr/de/it/id/vi oturumlarında ağ maliyeti sıfırdır
   (Arapça 190KB, Tayca 47KB). CJK yüzleri hâlâ paket dışıdır — desteklenen 11
   dilde CJK yok; zh/ja/ko eklenirse assets/fonts-deferred/ altından gelirler.
   Üretimde bunlar WOFF2 subset'e indirilmeli (TTF ~4× daha büyük). */
@font-face {
  font-family: 'Game Sans';
  src: url('../assets/fonts/NotoSansArabic-Regular.ttf') format('truetype');
  font-weight: 400; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1,
    U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'Game Sans';
  src: url('../assets/fonts/NotoSansArabic-Regular.ttf') format('truetype');
  font-weight: bold; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1,
    U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'Game Sans';
  src: url('../assets/fonts/NotoSansThai-Regular.ttf') format('truetype');
  font-weight: 400; font-display: swap;
  unicode-range: U+0E01-0E3A, U+0E40-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'Game Sans';
  src: url('../assets/fonts/NotoSansThai-Regular.ttf') format('truetype');
  font-weight: bold; font-display: swap;
  unicode-range: U+0E01-0E3A, U+0E40-0E5B, U+200C-200D, U+25CC;
}
@font-face { /* rakamlar için ekran fontu */
  font-family: 'Changa';
  src: url('../assets/fonts/changa-bold.ttf') format('truetype');
  font-weight: 700; font-display: swap;
}

/* ---------- Seri renk sözleşmesi ----------
   Serideki oyunlar aynı arayüz iskeletini paylaşır; birbirlerinden yalnız
   "enerji rengi" ve zeminin sıcaklığıyla ayrılırlar. Kanonik tablo, gerekçeler
   ve henüz açılmamış oyunların paletleri: docs/seri-renk-paleti.md

   İki kural:
   1) Vurgu renkleri bu sporun kendi bandında kalır — S %50-70, L %45-58. Bandın
      üstü neona kayar: hem sentetik/şablon bir his verir hem de düz spot
      mürekkep dilindeki çıkartma sanatıyla kavga eder (10-sanat-dili.md).
   2) Spor rengi MARKA taşır, ANLAM taşımaz. Durum rengi (--danger), ödül
      (--ad) ve kulüp seviyesi rampası (engine.js) her oyunda aynıdır —
      yoksa kırmızı "tehlike" anlamını yitirir. */
:root {
  /* Seri sabitleri — her oyunda aynı */
  --text: #f3f5f9;
  --danger: #e3574b;
  --ad: #ffd23d;

  /* Varsayılan: bu oyunun kendi paleti (hockey) — buz mavisi vurgu, gece
     buzu zemini; ikincil renk buz pistinin kırmızı orta çizgisidir. */
  --bg: #080d14;
  --panel: #141c26;
  --panel2: #1d2937;
  /* Buz mavisi: palet sözleşmesinin 'Ice Hockey' satırı (191/50/66).
     Kopyadan gelen #4fc3f7 doygunluğu %91'di, sözleşmenin üst sınırını
     21 puan aşıyordu; sanat brief'i §6.2/1 bu değeri şart koşuyor. */
  --accent: #7dc4d4;
  --accent2: #c63434;
  --dim: #8895a6;
}
body[data-theme="hockey"]     { --bg: #080d14; --panel: #141c26; --panel2: #1d2937; --accent: #7dc4d4; --accent2: #c63434; --dim: #8895a6; }
body[data-theme="football"]   { --bg: #0c0e14; --panel: #171b22; --panel2: #1f2538; --accent: #2bd47a; --accent2: #2f7d57; --dim: #8a93a6; }
body[data-theme="basketball"] { --bg: #0f0d15; --panel: #1a1723; --panel2: #262234; --accent: #d96b33; --accent2: #6e52c4; --dim: #9e95ac; }
body[data-theme="cricket"]    { --bg: #0c1315; --panel: #162124; --panel2: #1f3034; --accent: #29bcae; --accent2: #a93658; --dim: #879e9b; }
body[data-theme="gridiron"]   { --bg: #0c1016; --panel: #161d28; --panel2: #202b3c; --accent: #396bd0; --accent2: #a82f35; --dim: #8d99a8; }

/* --z: masaüstü zoom faktörü (main.js applyUiScale). zoom altında vh/dvh
   birimleri zoom'suz viewport'u ölçtüğünden viewport'a bağlı her kural
   var(--z)'ye bölünerek dengelenir; telefonda --z = 1. */
/* --safe-area-inset-*: çentik / durum çubuğu / gezinme çubuğu payları.
   Tek isim üzerinden okunur çünkü iki platform bunu FARKLI yoldan verir:
     iOS (WKWebView) → env(safe-area-inset-*) (viewport-fit=cover ile)
     Android          → Capacitor 8'in SystemBars eklentisi aynı adlı
                        değişkenleri <html>'e INLINE yazar; inline stil bu
                        bloğu ezer, dolayısıyla eski WebView'larda env() 0
                        dönse bile değer doğru gelir.
   Doğrudan env() yazan her kural Android'de sessizce 0'a düşerdi — çentik
   hatasının kaynağı buydu. */
:root {
  --z: 1;
  --safe-area-inset-top: env(safe-area-inset-top, 0px);
  --safe-area-inset-right: env(safe-area-inset-right, 0px);
  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-inset-left: env(safe-area-inset-left, 0px);
}

/* --mo: GEZİNME hareketinin hız ölçeği (main.js applyMotionMode → <html
   data-motion>). Ayarlardaki animasyon tercihi bugüne kadar yalnız JS
   sürelerini (çark, giriş, çözümleme) kısıyordu; CSS onu hiç görmüyordu, yani
   "anında" seçen oyuncu bile her panelde 0.25 sn fade bekliyordu. Tek bayrak
   iki katmanı da sürer: her geçiş süresi calc(<taban> * var(--mo)).
   KAPSAM: yalnız ARAYÜZ GEÇİŞLERİ (panel/faz giriş-çıkışı). Oyun geri
   bildirimi olan kareler (çark, makara, dilim vuruşu, sonsuz nabızlar) BU
   ÖLÇEĞE BAĞLANMAZ — onlar oyunun hissi, gezinme değil, ve kendi
   kapılarından geçerler. */
:root { --mo: 1; }
html[data-motion="fast"] { --mo: 0.5; }
html[data-motion="instant"] { --mo: 0; }
html { height: 100%; }
body { min-height: calc(100vh / var(--z)); min-height: calc(100dvh / var(--z)); }

body {
  background: radial-gradient(1200px 600px at 50% -10%, #14202e 0%, var(--bg) 60%);
  color: var(--text);
  font-family: 'Game Sans', system-ui, -apple-system, "Segoe UI", sans-serif;
  display: flex;
  justify-content: center;
  /* Çift dokunuşla yakınlaştırma kapalı (oyunun hiçbir yerinde zoom'a ihtiyaç
     yok, ama her dokunuşa 300ms gecikme bindiriyordu). */
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
/* Form elemanları varsayılanda sistem fontu kullanır; merkez fonta bağla. */
button, input, select { font-family: inherit; }

#app {
  width: 100%;
  max-width: 430px;
  min-height: calc(100vh / var(--z));
  min-height: calc(100dvh / var(--z)); /* mobil adres çubuğu hesaba katılır */
  /* Dört yönde de güvenli alan payı: içerik çentiğin, durum çubuğunun ve
     gezinme çubuğunun altına kaçmaz. */
  padding:
    calc(10px + var(--safe-area-inset-top))
    calc(16px + var(--safe-area-inset-right))
    calc(16px + var(--safe-area-inset-bottom))
    calc(16px + var(--safe-area-inset-left));
  display: flex;
  flex-direction: column;
}

.hidden { display: none !important; }
.dim { color: var(--dim); }
.small { font-size: 12px; }
.bad { color: var(--danger); }
.good { color: var(--accent); }
.meh { color: var(--dim); }

h1, h2 { text-align: center; margin: 4px 0 8px; }
h2 { font-size: 16px; font-weight: 700; }

section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex: 1;
}

/* ---------- HUD ---------- */
#hud {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 2px 8px;
  background: var(--panel);
  border: 1px solid #2a3143;
  border-radius: 12px;
  padding: 6px 10px;
  margin-bottom: 8px;
  font-size: 13px;
}
.hud-club { flex-basis: 100%; order: 3; font-weight: 600; }
/* Kritik HUD sayıları (OVR + yaş) bir boy büyük: karar anında en çok bakılan
   iki değer uzaktan okunmalı. OVR vurgu rengini taşır — oyunun ana metriği. */
#hud-ovr { font-size: 17px; color: var(--accent); }
#hud-ovr, .hud-age { font-weight: 800; }
.hud-age { font-size: 16px; }
/* Servet sayacı (madde 4): çıplak toplam yerine sıradaki Premium Draft
   eşiğine ilerleme. Çubuk metnin ALTINDA ince bir şerittir — HUD'un dikey
   bütçesini büyütmeden "ne kadar kaldı"yı tek bakışta verir. */
#hud-wealth { line-height: 1.15; }
.hud-bar {
  display: block;
  height: 3px;
  margin-top: 2px;
  border-radius: 2px;
  background: var(--panel2);
  overflow: hidden;
}
.hud-bar i { display: block; height: 100%; border-radius: 2px; background: var(--accent); transition: width 0.35s ease; }
/* Eşik aşıldı: ödül rengi + tek nefeslik nabız. "Milestone anı" burada duyulur. */
#hud-wealth.wealth-ready { color: var(--ad); font-weight: 700; }
#hud-wealth.wealth-ready .hud-bar i { background: var(--ad); }
#hud-wealth.wealth-ready { animation: wealth-pulse 1.4s ease-out 2; }
@keyframes wealth-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  #hud-wealth.wealth-ready { animation: none; }
  .hud-bar i { transition: none; }
}
/* DELTA KÖPRÜSÜ: sezon sonucu düştüğü an DEĞİŞEN HUD sayısı bir kez parlar.
   Sezon çözümünde OVR ve moral sessizce yerinde değişiyordu — oyuncunun gözü
   sonuç kartındayken HUD'un ne kadar arttığını hiç görmüyor, "bu sezon ne
   kazandım" sorusunun cevabı yalnız rapor panelinde kalıyordu. Parıltı yalnız
   GERÇEKTEN değişen değere düşer (main.js hudFlashChanged eski metni
   karşılaştırır) ve tek seferliktir.
   IŞIK, ÖLÇEK DEĞİL: #hud-ovr bir <b>, yani satır içi kutu — transform orada
   çalışmaz; ayrıca büyüyen bir sayı HUD satırını oynatırdı. wealth-pulse'ın
   opaklıkla yaptığı işin aynısı, başka bir kanalda. */
#hud-ovr.hud-delta, #hud-morale.hud-delta { animation: hud-delta calc(0.6s * var(--mo)) ease-out 1; }
/* Uç kareler `none` DEĞİL, ŞEFFAF gölge: `text-shadow: none` ile bir gölge
   listesi arasında ara değer yoktur, tarayıcı o zaman özelliği hiç
   animasyona sokmaz — kural yazılıydı, sınıf düşüyordu ama ekranda hiçbir şey
   olmuyordu (canlı denetimde yakalandı). Aynı tuzak `filter` için de geçerli,
   o yüzden uçlarda brightness(1). */
@keyframes hud-delta {
  0% { text-shadow: 0 0 0 rgba(255, 210, 61, 0); filter: brightness(1); }
  25% { text-shadow: 0 0 12px rgba(255, 210, 61, 0.95); filter: brightness(1.45); }
  100% { text-shadow: 0 0 0 rgba(255, 210, 61, 0); filter: brightness(1); }
}
@media (prefers-reduced-motion: reduce) {
  #hud-ovr.hud-delta, #hud-morale.hud-delta { animation: none; }
}
.stars { color: var(--ad); font-size: 12px; letter-spacing: 1px; }
.stars .dim { color: #3a4152; }

/* ---------- başlangıç ---------- */
/* Gece buz pisti sahnesi: yalnız açılış ekranında görünür (body.at-start), UI
   okunurluğu için üstüne koyu degrade bindirilir. Görsel sabittir, içerik
   üstünde kayar.
   Kural eskiden `body.at-start::before` idi, yani pseudo-element SINIFLA
   BİRLİKTE doğup ölüyordu: "Kariyere Devam"a basıldığı karede bütün gece
   sahnesi yok oluyordu — oyunun en sert kesmesi buydu. Artık element HEP
   vardır, yalnız opaklığı geçiş yapar. Kazanç sadece yumuşaklık değil:
   geçiş yarıda kesilebilir (ana menü ↔ kariyer arasında hızlı gidiş geliş)
   ve kendi kendine toparlanır — JS'te zamanlayıcı ya da iptal mantığı
   gerekmez, sınıf tek doğruluk kaynağı olarak kalır. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(12,14,20,0.35) 0%, rgba(12,14,20,0.62) 55%, rgba(12,14,20,0.92) 100%),
    url('../assets/gen/bg_stadium_night.png') center top / cover no-repeat;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  /* Sönme BİTİNCE katman tamamen kapanır: tam ekran bir görsel katmanı
     opacity:0'da tutmak zayıf cihazlarda boşuna raster maliyetidir. Görünürlük
     0 sn'de ama GECİKMELİ değişir (sönme süresi kadar), yani solarken hâlâ
     görünür, bittiğinde yok olur; açılışta gecikme yoktur, anında görünür. */
  visibility: hidden;
  /* Fon geçişi bir GEZİNME hareketidir: --mo ile ölçeklenir (bkz. :root --mo).
     Ekran geçişinden (0.22 sn) uzun tutuldu — sahne değişimi arka planda
     sürerken ön plan çoktan yerleşmiş olur, iki hareket üst üste binmez. */
  transition: opacity calc(0.3s * var(--mo)) ease,
              visibility 0s linear calc(0.3s * var(--mo));
}
body.at-start::before {
  opacity: 1;
  visibility: visible;
  transition: opacity calc(0.3s * var(--mo)) ease, visibility 0s;
}
.hero-goat {
  display: block;
  width: 168px;
  width: min(168px, calc(22dvh / var(--z)));
  margin: calc(5vh / var(--z)) auto 0;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,0.45));
}
.logo {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: baseline;
  font-family: 'Changa', 'Game Sans', system-ui, sans-serif;
  font-size: 42px;
  line-height: .95;
  letter-spacing: -1px;
  margin-top: 8px;
  transform: skew(-5deg) rotate(-1deg);
  filter: drop-shadow(0 5px 0 rgba(0,0,0,.28));
}
.logo span {
  display: inline-block;
  padding: 0 2px;
  -webkit-text-stroke: 2px #1a2233;
  paint-order: stroke fill;
}
.logo-goat { color: #f5eeda; }
.logo-inho { color: var(--accent); }
.logo::after {
  content: '';
  position: absolute;
  inset-inline: 13% 10%; bottom: -9px;
  height: 5px;
  border-radius: 999px;
  background: #ffd23d;
  box-shadow: 0 3px 0 #1a2233;
}
.logo-e {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: var(--text);
  color: var(--text);
}
.tagline { text-align: center; color: var(--dim); line-height: 1.5; }

input[type="text"], textarea, select {
  width: 100%;
  background: var(--panel);
  border: 1px solid #2a3143;
  border-radius: 10px;
  color: var(--text);
  padding: 12px 14px;
  font-size: 15px;
  text-align: center;
}
textarea { font-family: ui-monospace, monospace; font-size: 13px; text-align: start; resize: none; }
select { text-align: start; }
/* Ad + ülke alt alta: ülke seçici artık ISO kodu değil ÇEVRİLMİŞ ülke adı
   taşıyor ("İngiltere", "オーストラリア"), 23 dilde sabit bir sütun genişliği
   tutmaz — yan yana dizilişte etiket kırpılıyordu. */
.profile-row { width: 100%; display: grid; grid-template-columns: 1fr; gap: 8px; }
.settings-row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--dim); font-size: 13px; }
.settings-row label { display: flex; align-items: center; gap: 6px; }
.settings-row select { width: auto; padding: 8px 10px; font-size: 13px; }

/* ---------- butonlar ---------- */
.btn {
  width: 100%;
  border: none;
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.06s, filter 0.15s;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn:focus-visible, .draftcard:focus-visible, .slice-choice:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid #fff; outline-offset: 3px;
}
.btn-primary { background: var(--accent); color: #051304; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-ghost { background: var(--panel2); color: var(--text); border: 1px solid #2a3143; }
.btn-ad { background: transparent; color: var(--ad); border: 1px dashed var(--ad); font-size: 13px; padding: 10px; margin-top: 8px; }
.btnrow { display: flex; gap: 10px; width: 100%; }
.btnrow .btn { flex: 1; }

/* ---------- çark ----------
   Boyut viewport YÜKSEKLİĞİNE de bağlanır: HUD+stat+başlık+buton (~450px)
   düşüldükten sonra kalan alanı kullanır; 200px tabanın altına inmez.
   dvh bilmeyen eski tarayıcı ilk satırdaki min()'de kalır. */
/* ---------- Dilim ayrıntı paneli (çarka dokunma) ----------
   Çark dönmediği için dokunuş serbest kaldı: bir dilime dokunmak onun
   adını, ailesini ve gelme şansını söyler. Panel çarkın ÜSTÜNDE durur
   (kendi satırını yemez — dikey bütçe kuralı) ve dokunuşla kapanır. */
.slice-pop {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  min-width: 58%; max-width: 88%;
  background: rgba(12, 14, 20, .94); border: 2px solid #39415a; border-radius: 12px;
  padding: 9px 11px; text-align: center; line-height: 1.35;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
  animation: slicePop .18s ease-out;
}
@keyframes slicePop { from { opacity: 0; transform: translate(-50%, -50%) scale(.9); } }
@media (prefers-reduced-motion: reduce) { .slice-pop { animation: none; } }
.sp-title { font-size: 14px; font-weight: 700; }
.sp-sub { font-size: 12px; color: var(--dim); margin-top: 2px; }
.sp-chance { font-size: 12px; margin-top: 4px; }
.sp-fam { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; font-size: 11px; color: var(--dim); }

/* Perk listesi (çark bilgisi panelinin alt bölümü): build'in yarısı
   perklerde yaşıyor, deste dökümünün yanında görünmeli. */
.info-perks { margin-top: 10px; border-top: 1px solid #2a3143; padding-top: 8px; }
/* Ad ve açıklama ALT ALTA: yan yana dizildiğinde uzun perk adları dar
   telefonda kelime ortasından kırılıyordu ("Fragile / Genius") ve 23 dilin
   çoğunda ad footwheel'inkinden uzun. Blok düzen her dilde doğru sarar. */
.info-perk { text-align: start; padding: 4px 0; }
.info-perk b { display: block; font-size: 13px; }
.info-perk span { display: block; font-size: 12px; color: var(--dim); }
.info-sec { font-size: 12px; color: var(--dim); letter-spacing: .04em; text-transform: uppercase; }

/* Kutu 310 → 290 (Ağu 2026): jant ve ibre kalktığı için disk artık kutuyu
   dolduruyor (r = s/2 − 2, eskiden −14). Görünen disk aynı boyutta kalırken
   ~20px dikey bütçe geri kazanılır — "çentikler yanlış beklenti kuruyor,
   halka alan yiyor" geri bildiriminin ikinci yarısı. */
.wheel {
  width: min(72vw, 290px);
  height: min(72vw, 290px);
  width: min(calc(72vw / var(--z)), 290px, max(190px, calc(100dvh / var(--z) - 450px)));
  height: min(calc(72vw / var(--z)), 290px, max(190px, calc(100dvh / var(--z) - 450px)));
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); /* filter yerine: Safari'de her karede yeniden filtre uygulanmaz */
}

/* Çark + köşe düğmesi tek kutu. Sarmalayıcı SIFIR yer kaplar (line-height:0):
   canvas'ın kendi ölçüsü neyse kutu odur, dolayısıyla .wheel'in dvh'ye bağlı
   boyut hesabı bozulmaz. */
.wheel-wrap { position: relative; display: inline-block; line-height: 0; }
/* "i" düğmesi çarkın üst köşesinde durur: eskiden çarkın ALTINDA kendi
   satırını yiyordu ve o satır dikey bütçenin en pahalı yerindeydi. Metin
   yerine tek harf — "Çark Bilgisi" 23 dilde farklı uzunlukta ve hiçbirinde
   köşeye sığmaz; anlam aria-label + title'da tam hâliyle duruyor. */
.wheel-info-btn {
  position: absolute; top: 2%; inset-inline-end: 2%;
  width: 34px; height: 34px; padding: 0;
  border-radius: 50%; border: 2px solid #2a3143;
  background: var(--panel); color: var(--dim);
  font: 700 16px/1 'Changa', 'Game Sans', sans-serif;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 2;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}
.wheel-info-btn:active { transform: scale(.94); }

.resultline { min-height: 22px; text-align: center; font-size: 15px; }

/* ---------- statlar ----------
   2×2 grid: dört tam satır yerine iki satır — dikey bütçenin en ucuz ~45px'i.
   Bar yine oransal okunur; tam değer sağdaki rakamda. */
#statbars { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 3px 12px; margin-bottom: 2px; }
.statrow { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.statlabel { width: 28px; font-weight: 800; }
.stattrack { flex: 1; height: 6px; background: var(--panel2); border-radius: 4px; overflow: hidden; }
.statfill { height: 100%; border-radius: 4px; transition: width 0.4s; }
.statval { width: 20px; text-align: end; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- fazlar ---------- */
.phase { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.note { font-size: 12px; color: var(--danger); text-align: center; }

.draftcard {
  --rarity-color: #8a93a6;
  width: 100%;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-areas:
    "category category"
    "icon title"
    "icon desc"
    "icon preview";
  column-gap: 12px;
  row-gap: 4px;
  text-align: start;
  background: var(--panel);
  border: 1px solid #2a3143;
  border-inline-start: 6px solid var(--rarity-color);
  border-radius: 12px 16px 16px 12px;
  padding: 13px 14px 14px 12px;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s, transform 0.06s;
}
.draftcard::before {
  content: '';
  position: absolute;
  width: 82px; height: 82px;
  inset-inline-end: -35px; bottom: -42px;
  border: 8px dotted color-mix(in srgb, var(--rarity-color) 35%, transparent);
  border-radius: 50%;
  pointer-events: none;
}
.draftcard:hover { border-color: var(--accent); }
.draftcard:active { transform: scale(0.98); }
.dc-icon, .dc-sticker { grid-area: icon; }
.dc-icon { font-size: 24px; align-self: start; }
.dc-sticker {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  align-self: start;
  border-radius: 13px 16px 12px 15px;
  background: #f5eeda;
  box-shadow: 0 0 0 2px #1a2233, 3px 4px 0 rgba(0,0,0,.22);
  transform: rotate(-2deg);
}
.dc-icon-img { width: 43px; height: 43px; object-fit: contain; }
.dc-title { grid-area: title; font-weight: 700; font-size: 15px; }
.dc-desc { grid-area: desc; font-size: 13px; color: var(--dim); line-height: 1.4; }
.dc-preview { grid-area: preview; font-size: 12px; color: var(--accent); line-height: 1.35; margin-top: 3px; }
.dc-category {
  grid-area: category;
  justify-self: start;
  color: #1a2233;
  background: #f5eeda;
  border-radius: 3px 8px 8px 3px;
  padding: 3px 8px;
  margin-bottom: 4px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  transform: rotate(-.5deg);
}
.draft-grid { width: 100%; display: flex; flex-direction: column; gap: 10px; }
/* KART DAĞITIMI: seçenekler tek blok hâlinde belirmez, sırayla iner. Üç kart
   aynı karede doğduğunda göz nereden okumaya başlayacağını bilemiyor ve liste
   "bir duvar" gibi geliyordu; 40 ms'lik kayma okuma sırasını (yukarıdan
   aşağı) hareketin kendisiyle söyler — deste dağıtır gibi.
   EKSEN DİKEY: ızgara zaten dikey bir liste, ayrıca translateY RTL'de
   aynalanmak zorunda değil (bkz. phaseIn/phaseInRtl ikizliği) — tek kare seti
   yeter. Giren fazın phaseIn'iyle ÜST ÜSTE koşar: faz 0.20 sn'de yerleşirken
   kartlar kendi içinde sıralanır, toplam 0.20 + 0.20 = 0.40 sn.
   GECİKME 6. KARTTA DURUR: taban kural zaten 0.2 sn verir, 1-5 arası onu
   aşağı çeker. Dört kartlı premium tur, üç seçenekli olay kartı ve on iki
   maddelik bölüm listesi aynı kuralı paylaşır; uzun listede kuyruğun
   beklemesi ritim değil, gecikme olurdu.
   DOKUNUŞ BEKLEMEZ: yalnız opaklık/kayma ertelenir, pointer-events'e
   dokunulmaz — ilk karede basılan karta olay düşer. */
@keyframes dealIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.draft-grid > * { animation: dealIn calc(0.18s * var(--mo)) ease calc(0.2s * var(--mo)) both; }
.draft-grid > :nth-child(1) { animation-delay: 0s; }
.draft-grid > :nth-child(2) { animation-delay: calc(0.04s * var(--mo)); }
.draft-grid > :nth-child(3) { animation-delay: calc(0.08s * var(--mo)); }
.draft-grid > :nth-child(4) { animation-delay: calc(0.12s * var(--mo)); }
.draft-grid > :nth-child(5) { animation-delay: calc(0.16s * var(--mo)); }
/* Faz ÇIKARKEN dağıtım durur ve kartlar dolu görünür: hızlı el, kartlar daha
   inerken seçim yapabilir — yarım kalmış kareleriyle çıkan bir ızgara "içi
   boşalmış" görünürdü. #phase-result kademesi ve #spot-scene.closing ile aynı
   gerekçe. */
.phase.leaving .draft-grid > * { animation: none; }

/* SEÇİM YANKISI: karta basıldığında karar bir an GÖRÜNÜR olur — seçilen kart
   onay nabzıyla kabarır, elenenler söner. Eskiden dokunuşun tek karşılığı
   ses ve faz değişimiydi: hızlı el, hangi kartın seçildiğini göremeden bir
   sonraki ekrana geçiyordu ("yanlışa mı bastım?" geri bildirimi).
   Nabız 1.03: kart zaten büyük bir yüzey, daha fazlası komşularını itiyor
   gibi görünürdü. Renk dili aday kartından ödünç (.cand-picked) — iki ekran
   aynı şeyi iki türlü söylemesin.
   `.pick-echo` ızgaranın DOĞRUDAN çocuğuna düşer (ipucu rozetli kart bir
   .dc-wrap içindedir), çerçeve/ışık ise kartın kendisine. */
@keyframes pickPulse {
  0% { transform: none; }
  45% { transform: scale(1.03); }
  100% { transform: none; }
}
.draft-grid > .pick-echo, .slice-grid > .pick-echo { animation: pickPulse calc(0.2s * var(--mo)) ease-out both; }
/* ÖZGÜLLÜK BİLEREK YÜKSEK (üç sınıf): nadirlik kuralları (.draftcard.r-epic,
   .draftcard.r-rare) kendi çerçeve rengini ve ışığını taşır ve dosyada DAHA
   SONRA gelir — eşit özgüllükte onlar kazanıyordu, seçilen epik kart hiçbir
   onay işareti almıyordu (canlı denetimde yakalandı). */
.draft-grid > .pick-echo.draftcard,
.draft-grid > .pick-echo .draftcard,
.slice-grid > .pick-echo.slice-choice {
  border-color: var(--accent); box-shadow: 0 0 14px rgba(77, 163, 255, 0.25);
}
/* Elenenler ANINDA sönmez, kısa bir geçişle çekilir: sert bir opaklık düşüşü
   "kart kayboldu" gibi okunurdu.
   `animation: none` ŞART: dağıtım karesi `both` ile bitiş değerini (opacity:1)
   öğenin üstünde TUTAR ve animasyonlar sıradan bildirimleri ezer — kural
   yazılıydı ama kartlar hiç sönmüyordu (canlı denetimde yakalandı). */
.draft-grid > .pick-dim, .slice-grid > .pick-dim {
  animation: none;
  opacity: 0.35;
  transition: opacity calc(0.12s * var(--mo)) ease;
}

/* Başlangıç adayı kartları (1/3 seçimi): draftcard iskeletini kullanır.
   Seçilen kart bir an vurgulu kalır, kariyer onunla açılır; elenenler söner. */
.candcard {
  --rarity-color: #4da3ff;
  /* Milliyet satırı isimle karakter arasında kendi satırında durur. */
  grid-template-areas:
    "category category"
    "icon title"
    "icon nat"
    "icon desc"
    "icon preview";
}
/* Pozisyon, isimle aynı satırda küçük bir rozet olarak durur. */
.cand-pos { color: var(--accent); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; margin-inline-start: 6px; white-space: nowrap; }
.cand-nat { grid-area: nat; font-size: 12px; color: var(--dim); line-height: 1.35; }
.candcard:disabled { opacity: 0.35; cursor: default; }
.candcard.cand-picked { opacity: 1; border-color: var(--accent); box-shadow: 0 0 14px rgba(77, 163, 255, 0.25); }

.wheel-summary {
  width: 100%; color: var(--dim); background: rgba(31, 37, 52, .65);
  border: 1px solid #2a3143; border-radius: 10px; padding: 8px 10px;
  font-size: 12px; text-align: center; line-height: 1.45;
}
.objective { width: 100%; text-align: center; font-size: 12px; color: var(--ad); }

/* ---------- Çark bilgi paneli ---------- */
.btn-small { padding: 6px 14px; font-size: 12px; width: auto; align-self: center; }
.info-panel { width: 100%; text-align: start; font-size: 13px; }
.info-line { padding: 4px 2px; border-bottom: 1px solid rgba(42, 49, 67, .6); line-height: 1.4; }
.info-line:last-child { border-bottom: none; }

/* Günün tablosu. Satır: sıra · kimlik · skor. Sıra ve skor sabit genişlikte
   (tabular-nums) ki üç haneli skorlar sütunu kaydırmasın; ad esner ve taşarsa
   kırpılır — panelin yatay kayması listeyi okunmaz yapardı. */
.lb-identity { width: 100%; text-align: start; margin-bottom: 8px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lb-row { display: flex; align-items: center; gap: 8px; padding: 5px 4px; border-bottom: 1px solid rgba(42, 49, 67, .6); font-size: 13px; }
.lb-row:last-child { border-bottom: none; }
.lb-rank { min-width: 2.2em; text-align: end; font-variant-numeric: tabular-nums; color: var(--dim, #8b93a5); }
.lb-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-score { font-variant-numeric: tabular-nums; font-weight: 700; }
/* Oyuncunun kendi satırı: uzun listede gözle aranmasın. */
.lb-row.lb-me { background: rgba(255, 210, 61, .12); border-radius: 6px; }
/* Özet ekranındaki mini tablo. Satırlar paneldekiyle AYNI (.lb-row); burada
   yalnız kutuya yerleşme kuralı var. :empty ŞART: ağ düşerse yuva boş kalır
   ve boşken hiç yer kaplamamalı — sıra satırı ile düğme yapışık dursun. */
.lb-mini { width: 100%; text-align: start; margin: 8px 0; }
.lb-mini:empty { display: none; margin: 0; }
.lb-mini .lb-sep { padding: 5px 4px; }
.slice-grid { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-height: calc(52vh / var(--z)); overflow-y: auto; padding: 3px; }
.slice-choice {
  border: 1px solid #2a3143; border-inline-start: 8px solid var(--slice-color, #555);
  background: var(--panel); color: var(--text); border-radius: 10px; padding: 11px 9px;
  font-weight: 700; text-align: start; cursor: pointer;
}
/* Çıkarma önerisi (FTUE v2). İlk çıkarma turunda sakatlık satırları yumuşakça
   parlar. ALTIN KULLANILMAZ: altın bu oyunda "kesin/işaretli" demek (bkz.
   .sb-slot.marked, servet eşiği) ve buradaki seçim serbest — vurgu bir emir
   değil, bir aday göstergesi. Hareket de yok; nabız atan bir düğme kararı
   oyuncunun elinden alır.
   Yalnız ÜST/ALT/SON kenar rengi değişir: baştaki 8px'lik şerit dilimin kendi
   rengini taşıyor ve o bilgi hiçbir vurgu için feda edilmez. */
.slice-choice.remove-suggest {
  border-block-color: var(--accent); border-inline-end-color: var(--accent);
  background: var(--panel2);
  /* Parıltı da temanın kendi vurgusundan türer (color-mix, repo emsali):
     sabit bir renk yazmak buz mavisi temada yeşil bir hale bırakırdı. */
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 18%, transparent);
}
.center { text-align: center; }
.event-copy { color: var(--dim); line-height: 1.5; }
.forecast { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; margin-top: 4px; }
.forecast-item { background: var(--panel2); padding: 7px; border-radius: 8px; font-size: 12px; }
.daily-badge { color: var(--ad); font-weight: 800; }

/* ---------- Sezon Panosu ----------
   Çarkın ALTINDA duran N sonuç yuvası. Kasa, kol, payline yok: çerçeveler
   krem/lacivert çıkartma albümü dilinde kalır (bkz. GDD 10). Yuvalar
   spinsPerSeason kadardır — üçe sabitlenmiş bir makara takımı değildir,
   Çalışkan perkinin 4. yuvası aynı satıra doğal olarak girer. */
.season-board {
  width: 100%; display: flex; gap: 14px; align-items: stretch;
  justify-content: center; margin: 2px 0 2px;
}
/* SEZONU KAPATAN NABIZ. Son yuva oturunca panonun TAMAMI bir kez nefes alır:
   ilk iki duruş belirsizliği azaltır, üçüncüsü sezonu bitirir — kapanışın
   kendi işareti olmalı. Tek yuvanın darbesi (sb-punch/sb-slam) "bu sonuç
   geldi" der; bu ise "sezon tamam" der, o yüzden ölçek değil ışık kullanır:
   iki hareket üst üste binmesin. */
.season-board.board-close { animation: sb-close .34s ease-out; }
@keyframes sb-close {
  0%   { filter: brightness(1); }
  35%  { filter: brightness(1.28); }
  100% { filter: brightness(1); }
}
@media (prefers-reduced-motion: reduce) {
  .season-board.board-close { animation: none; }
}
.sb-slot {
  position: relative; flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 8px 4px 7px;
  background: var(--panel); border: 2px solid #2a3143; border-radius: 12px;
  min-height: 74px; text-align: center;
}
/* Çözülmüş yuva dokunulabilir: tam cümlesini altındaki şeritte açar. Afordans
   BİLİNÇLİ OLARAK SESSİZ — yuvanın kendisi sezonun görseli, üstüne düğme
   giydirmek onu araç çubuğuna çevirirdi. İmleç ve küçük bir basma tepkisi
   yeter.

   Açık yuvanın kenarı NÖTR (--dim), altın değil: bu panoda altın (--ad) iki
   şey söylüyor — işaretli gece ve ödeyen kombo. Seçili olmak bir statü değil,
   yalnız "şu an bunu okuyorsun"; altını ödünç almak ikisini de sulandırırdı. */
.sb-slot.sb-tappable { cursor: pointer; }
.sb-slot.sb-tappable:active { transform: scale(.97); }
.sb-slot.sb-open { border-color: var(--dim); }
.sb-ico { width: 30px; height: 30px; display: block; }

/* ---------- Çözülme sahnesi ----------
   "Sezonu Oyna"dan sonra roller yer değiştirir: çark geri çekilip DESTE
   GÖRÜNÜMÜ olur (stratejik nesne, olasılık gerçeği), pencereler öne gelip
   SAHNE olur. Çark artık dönmüyor — üç spin'in aynı dairesel hareketi
   tekrarlaması, uzun kariyerde yorucu olan şeydi. */
/* SONUÇ TUTMA (.holding): sıra bitince çark ESKİDEN HEMEN büyüyordu ve üçüncü
   sonucun darbesi, ekranın ana nesnesinin geri gelmesiyle aynı ana denk gelip
   onunla yarışıyordu. Slot makinesi son grid'i kahraman olarak tutar; çizgiyi,
   ödülü, komboyu o grid üzerinde çözer.

   Bu yüzden .resolving ile .holding AYNI düzeni paylaşır: çark küçük ve soluk
   kalır, pencereler büyük kalır — "Sezon Sonucu"na basılana kadar. Kural tek
   cümlede: spin ÖNCESİ sahnenin kahramanı çark, spin SONRASI sezonun kahramanı
   sonuç panosudur.

   Deste görünümüne dönüş oyuncunun elinde: çarka ya da "i" düğmesine dokunmak
   .holding'i kaldırır (bkz. main.js → releaseHold). */
#phase-spin.resolving .wheel-wrap,
#phase-spin.holding .wheel-wrap {
  transform: scale(.58);
  opacity: .38;
  filter: saturate(.7);
  margin: calc(-0.21 * min(72vw, 290px)) 0;  /* küçülen çarkın boşluğunu topla */
}
#phase-spin .wheel-wrap { transition: transform .28s ease, opacity .28s ease, margin .28s ease; }
/* Çark küçülünce düğme de küçülürdü (34px → 20px): dokunma hedefi olarak çok
   küçük, oysa deste görünümüne dönüşün İKİ kapısından biri. Ölçek geri
   alınır — köşeye sabitli olduğu için dışarı değil, kendi köşesinden büyür. */
#phase-spin.resolving .wheel-info-btn,
#phase-spin.holding .wheel-info-btn {
  transform: scale(1.72); transform-origin: top right;
}
html[dir="rtl"] #phase-spin.resolving .wheel-info-btn,
html[dir="rtl"] #phase-spin.holding .wheel-info-btn { transform-origin: top left; }
#phase-spin.resolving .season-board,
#phase-spin.holding .season-board { gap: 10px; }
#phase-spin.resolving .sb-slot,
#phase-spin.holding .sb-slot { min-height: 104px; }
#phase-spin.resolving #role-line,
#phase-spin.holding #role-line,
#phase-spin.resolving #spin-hint { opacity: .35; }

/* Pencere: makara burada akar, dışı kırpılır. Sabit bir okuma noktası —
   gözün dönen bir şeyi takip etmesi gerekmez.

   Akış DİKEY (yukarıdan aşağı). Yataydan dönüldü: yandan gelen sonuç
   "kayıyor" gibi okunuyor, yukarıdan düşen sonuç "geliyor" gibi okunuyor —
   makaranın ağırlık hissi dikey eksende doğuyor.

   Yüzde çeviri kilit ayrıntı: track'in KENDİ yüksekliği pencere kadardır
   (height:100%), kareler flex-shrink:0 ile taşar. Bu yüzden translateY(-100%)
   tam olarak BİR kare kaydırır — kare sayısından bağımsız. */
.sb-window { position: absolute; inset: 0; overflow: hidden; border-radius: 10px; }
.sb-track {
  display: flex; flex-direction: column; height: 100%;
  will-change: transform, filter;
}
.sb-cell {
  flex: 0 0 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 6px 4px;
}
/* Seyir fazında hareket bulanıklığı: makara hızlıyken tek tek sembol
   okunmamalı, ritim okunmalı. Tek katman üzerinde tek filtre — kareler
   ayrı ayrı bulanıklaştırılsa GPU maliyeti üçe katlanırdı.

   1.5 → 1.2 px: bulanıklık HIZLA ORANTILI olmalı (gerçek hareket bulanıklığı
   gibi). Kare yoğunluğu 38 → 30'a inince (bkz. CELLS_MAX) şerit %21
   yavaşladı; aynı bulanıklık o hızda hareketi değil, bozuk render'ı
   anlatırdı. */
.sb-track.blurred { filter: blur(1.2px); }
/* HAREKET SIRASINDA KELİME OKUTULMAZ. Slotların sembol kullanmasının sebebi
   tam olarak bu: bulanıklığa rağmen bazı karelerde etiketler seçilebiliyordu
   ve çarkın dairesel gürültüsünün yerini hızlı METİN titreşimi alıyordu —
   uzun kariyerde yeni bir görsel yorgunluk kaynağı.

   Hiyerarşi: seyirde yalnız büyük ikon + dilim rengi · fren başlayınca kısa
   etiket · tam metin yalnız durunca (revealStop yuvayı zaten yeniden yazar).
   `visibility` kullanılıyor, `display` değil: etiket yer kaplamaya devam
   ettiği için fren anında ikon zıplamaz. */
.sb-track.blurred .sb-name { visibility: hidden; }
.sb-track.blurred .sb-ico { width: 38px; height: 38px; }
.sb-cell .sb-ico { transition: width .12s ease, height .12s ease; }
/* Akan pencere kendi başına hafif "canlı" durur; ÜST/ALT kenarları karartılır
   ki kareler pencereye girip çıkıyormuş gibi okunsun. */
.sb-slot.spinning { border-color: #39415a; }
.sb-slot.spinning::after {
  content: ''; position: absolute; inset: 0; border-radius: 10px; pointer-events: none;
  background: linear-gradient(180deg, rgba(12,14,20,.65) 0%, transparent 26%, transparent 74%, rgba(12,14,20,.65) 100%);
}

/* Kulüp dilimi bu pencerede: DURMADAN ÖNCE altına döner. growIn'in yeni evi —
   "bu spin şanslıydı" bilgisi animasyonda yaşamaya devam eder (GDD 05). */
.sb-slot.club-inbound { border-color: var(--ad); animation: sb-inbound 1s ease-in-out infinite; }
@keyframes sb-inbound {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 210, 61, 0); }
  50% { box-shadow: 0 0 0 5px rgba(255, 210, 61, .22); }
}

/* Kombo beklentisi: kombo GERÇEKTEN bir sonuç uzaktayken son pencere nabız
   atar, onu kuran pencereler altın bağla işaretlenir (Engine.comboWatch).
   Sahte sembol ya da sahte gecikme üretilmez — beklenti gerçek sonuçlardan
   doğar. */
.sb-slot.watch { border-color: var(--ad); animation: sb-watch .7s ease-in-out infinite; }
@keyframes sb-watch {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 210, 61, .0); transform: scale(1); }
  50% { box-shadow: 0 0 0 6px rgba(255, 210, 61, .20); transform: scale(1.03); }
}
.sb-slot.watch-src { border-color: var(--ad); }
.sb-slot.watch-src + .sb-slot::before,
.sb-slot.watch-src::before {
  content: ''; position: absolute; inset-inline-start: -14px; top: 50%;
  width: 14px; height: 2px; background: var(--ad); opacity: .75;
  transform: translateY(-50%);
}
.sb-slot.watch-src:first-child::before { display: none; }
.sb-name {
  font-size: 11px; font-weight: 800; line-height: 1.2; color: var(--text);
  /* Yuva dar: iki satırdan sonrası kırpılır — tam metin log'da durur. */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; overflow-wrap: anywhere;
}
.sb-num { font-size: 10px; font-weight: 800; color: var(--dim); font-family: 'Changa', 'Game Sans', sans-serif; }

/* Boş yuva: sezonun kaç sonucu kaldığını çevirmeden önce söyler (Beklenti). */
.sb-slot.pending { border-style: dashed; border-color: #2a3143; background: rgba(23, 27, 34, .5); }
.sb-slot.pending .sb-name { color: var(--dim); }

/* Sıradaki yuva: hangi sonucun şu an çözüldüğü tek bakışta belli olmalı. */
.sb-slot.active { border-color: var(--accent); animation: sb-pulse 0.9s ease-in-out infinite; }
@keyframes sb-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(43, 212, 122, 0); }
  50% { box-shadow: 0 0 0 4px rgba(43, 212, 122, .18); }
}

.sb-slot.good { border-color: var(--accent2); }
.sb-slot.meh  { border-color: #39415a; }
.sb-slot.bad  { border-color: var(--danger); }

/* OTURMA VURUŞU. Yalnız o an oturan yuvada oynar (.just). Ödül anının
   SABİT bir noktada yaşanması kasıtlı: dönen çarkı gözle takip etmek
   yorucu — çark sonucu gösterir, yuva teslim eder.
   Aşma + geri oturma çarkın kendi hareket profilinin (bkz. wheel.js
   spinTo → SPIN_OVERSHOOT) görsel yankısıdır. */
.sb-slot.just { animation: sb-punch .34s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes sb-punch {
  0%   { transform: scale(.88); opacity: .35; }
  55%  { transform: scale(1.09); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
/* Renk halkası tonu söyler: kazanç yeşil, kötü gece kırmızı, boş sessiz.
   Kutunun kendisi yerine dışına doğru genişler — düzeni kaydırmaz. */
.sb-slot.just::after {
  content: ''; position: absolute; inset: -2px; border-radius: 12px;
  border: 2px solid currentColor; pointer-events: none;
  animation: sb-ring .42s ease-out forwards;
}
.sb-slot.just.good { color: var(--accent); }
.sb-slot.just.bad  { color: var(--danger); }
.sb-slot.just.meh  { color: var(--dim); }
.sb-slot.just.burnt { color: var(--danger); }
@keyframes sb-ring {
  from { transform: scale(1); opacity: .85; }
  to   { transform: scale(1.35); opacity: 0; }
}
.sb-slot.just .sb-ico { animation: sb-ico-pop .34s ease-out; }
@keyframes sb-ico-pop {
  0% { transform: scale(.6) rotate(-8deg); }
  60% { transform: scale(1.12) rotate(3deg); }
  100% { transform: none; }
}

/* ---------- Duruş karakterleri ----------
   Her stop aynı hissetmemeli: slotun gücü üç makarasının olması değil, her
   duruşun bir öncekinden farklı anlam taşımasıdır. Karakter sonuç TİPİNDEN
   gelir (bkz. main.js stopFlavour). */

/* Kazanç: yukarı sıçrar. Varsayılan sb-punch zaten bu. */

/* Kulüp dilimi: daha AĞIR oturur, altın halka, forma ikonu büyür. */
.sb-slot.just.stop-club { animation: sb-punch-heavy .46s cubic-bezier(.15, 1.2, .35, 1); }
.sb-slot.just.stop-club { color: var(--ad); }
@keyframes sb-punch-heavy {
  0%   { transform: scale(.82) translateY(-8px); opacity: .3; }
  50%  { transform: scale(1.12) translateY(2px); opacity: 1; }
  75%  { transform: scale(.99) translateY(0); }
  100% { transform: scale(1); }
}
.sb-slot.just.stop-club .sb-ico { animation: sb-ico-pop .5s ease-out; }

/* Sakatlık ve diğer kötü geceler: yumuşak oturmaz, AŞAĞI ÇÖKER ve sarsılır.
   Diğer iki kutudan görsel olarak ayrışması kasıtlı. */
.sb-slot.just.stop-hit { animation: sb-slam .40s cubic-bezier(.3, .9, .2, 1); }
@keyframes sb-slam {
  0%   { transform: translateY(-10px) scale(1.04); opacity: .4; }
  45%  { transform: translateY(5px) scale(.95); opacity: 1; }
  65%  { transform: translateX(-3px) translateY(2px); }
  80%  { transform: translateX(3px); }
  100% { transform: none; }
}

/* Boş: beklenen tatminin GELMEMESİ hissedilmeli. Sönük oturur, halka yok. */
.sb-slot.just.stop-dud { animation: sb-dud .3s ease-out; }
.sb-slot.just.stop-dud::after { display: none; }
@keyframes sb-dud {
  from { opacity: .3; transform: scale(.97); }
  to { opacity: 1; transform: none; }
}
.sb-slot.stop-dud .sb-name, .sb-slot.stop-dud .sb-ico { opacity: .62; }

/* Yanan hak: Devamsızlık'ın bedeli metin log'unda görünmezdi; burada
   yuvanın kendisi kilitli durur — kayıp bir kere gözle görülür. */
.sb-slot.burnt {
  border-style: dashed; border-color: var(--danger);
  background: repeating-linear-gradient(135deg, rgba(227, 87, 75, .10) 0 6px, transparent 6px 12px);
}
.sb-slot.burnt .sb-name { color: var(--danger); }

/* İşaretli gece: hangi yuvanın büyük geceyi taşıdığı ÖNCEDEN bellidir. */
.sb-slot.marked { border-color: var(--ad); box-shadow: 0 0 0 3px rgba(255, 210, 61, .16); }
/* Ön-vurgu (canlı gb 9): makara başlamadan pano bir nefes tutulur — diğer
   yuvalar söner, işaretli yuva sahne ışığını alır. Sınıf yalnız spotHold
   süresince durur; hareket azaltmada zaten bu yola girilmez (total=0). */
#season-board.spot-hold .sb-slot:not(.marked) { opacity: .3; transition: opacity .3s ease; }
#season-board.spot-hold .sb-slot.marked {
  box-shadow: 0 0 0 3px rgba(255, 210, 61, .45), 0 0 26px rgba(255, 210, 61, .30);
  transition: box-shadow .3s ease;
}
.spot-ribbon {
  margin: 0 0 8px; padding: 7px 12px; border-radius: 10px; font-size: 13px;
  background: linear-gradient(90deg, rgba(255, 210, 61, .16), rgba(255, 210, 61, .05));
  border: 1px solid rgba(255, 210, 61, .35); color: var(--ad);
  animation: spotStep .3s ease;
}
.spot-ribbon-fade { opacity: 0; transition: opacity .5s ease; }
/* Draft ekranının çark dökümü düğmesi: karar yüzeyinin yanında küçük durur. */
.btn-draft-wheel { align-self: center; width: auto; font-size: 12px; padding: 4px 14px; }

/* ---------- Sahneli kapanış (canlı gb 14b) ----------
   data-stage hangi grubun göründüğünü seçer: '0' kariyer kartı · 'tl'
   sezonlar · 'tp' ödüller · 'itv' röportajlar (+ Son Söz) · 'final'
   kompakt kart + sıradaki hikâye + eylemler. Elemanların KENDİ .hidden
   durumları (içerik yoksa) aynen üstün gelir. */
.sum-stage-title { text-align: center; font-weight: 800; font-size: 15px; }
#screen-summary:not([data-stage="0"]) #summary-content { display: none; }
#screen-summary[data-stage="0"] #sum-stage-title,
#screen-summary[data-stage="0"] #sum-stage-body,
#screen-summary[data-stage="final"] #sum-stage-title,
#screen-summary[data-stage="final"] #sum-stage-body { display: none; }
#screen-summary:not([data-stage="final"]) #sum-compact,
#screen-summary:not([data-stage="final"]) #lb-summary,
#screen-summary:not([data-stage="final"]) #duel-result,
#screen-summary:not([data-stage="final"]) #next-goals,
#screen-summary:not([data-stage="final"]) .sum-actions { display: none; }
/* Son Söz kupürü sahneli akışta EMEKLİ (canlı gb 14c): tek-alıntı çözümü,
   röportajların bir düğme arkasında görünmez kaldığı eski düzenin telafisiydi;
   röportaj sahnesi artık TÜM kupürleri gösteriyor — aynı alıntıyı bir kez
   daha basmak tekrar. Eleman ve üreticisi müze/eski kayıt uyumu için duruyor. */
#screen-summary #last-word { display: none; }
#screen-summary[data-stage="final"] #btn-sum-next { display: none; }

/* Sabit ana eylem (canlı gb 14): içerik taşsa bile akış düğmesi hep görünür —
   "içerik sığmıyor, scroll'a takılıyorum" şikâyetinin akış tarafı çözümü.
   Sticky, kaydıran atada (body) çalışır; gölge, altından akan içeriği ayırır. */
.cta-sticky {
  position: sticky;
  bottom: calc(6px + var(--safe-area-inset-bottom));
  z-index: 41;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
}

/* Taşma karartması (canlı gb 13): okla aynı görünürlüğü paylaşan alt fade —
   "aşağıda devam var" hissini ok tek başına taşımıyordu. Dokunuşu yutmaz. */
.scroll-fade {
  position: fixed; bottom: 0; left: 0; right: 0; height: 56px; z-index: 39;
  background: linear-gradient(to bottom, rgba(12, 14, 20, 0), rgba(12, 14, 20, .85));
  pointer-events: none;
}

/* Sticky CTA'lı fazda ok düğmenin ÜSTÜNE çıkar — ikisi de dip-merkezdeydi
   ve üst üste biniyordu (canlı gb 14 doğrulama görüntüsü). Sahneli kapanışın
   Devam düğmesi de aynı kuralı alır (final'de düğme zaten gizli). */
/* `.leaving` de dışarıda: ÇIKMAKTA olan sonuç fazı okun yerini artık
   belirlememeli — sticky düğmesiyle birlikte ekrandan gidiyor. */
body:has(#phase-result:not(.hidden):not(.leaving)) .scroll-hint,
body:has(#screen-summary:not(.hidden):not(.leaving):not([data-stage="final"])) .scroll-hint {
  bottom: calc(64px + var(--safe-area-inset-bottom));
}

/* Taşma göstergesi: sabit dip ok, yumuşak sekme; dibe inince gizlenir. */
.scroll-hint {
  position: fixed; bottom: calc(8px + var(--safe-area-inset-bottom)); left: 50%;
  transform: translateX(-50%); z-index: 40;
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(23, 27, 34, .85); border: 1px solid #2a3143;
  color: var(--accent); font-size: 20px; line-height: 1; cursor: pointer;
  animation: scrollHintBob 1.6s ease-in-out infinite;
}
@keyframes scrollHintBob { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .scroll-hint { animation: none; } }
/* Ağır çekim sürerken şart öne çıkar: yumuşak nabız — akış durmadığı için
   vurguyu hareket değil ışık taşır. */
.spot-ribbon-live { animation: spotRibbonPulse 1.1s ease-in-out infinite; }
@keyframes spotRibbonPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 210, 61, 0); }
  50% { box-shadow: 0 0 14px 2px rgba(255, 210, 61, .35); }
}
@media (prefers-reduced-motion: reduce) {
  .spot-ribbon, .spot-ribbon-live { animation: none; }
}
/* AKARKEN NEFES ALIR. Duyurulmuş gecenin yuvası diğerlerinden uzun sürüyor
   (bkz. SLOT_WEIGHT_SPOTLIGHT); bu bekleyişin gerilim olarak okunması için
   uzadığının GÖRÜNMESİ gerekir — sessizce uzun süren bir pencere "takıldı mı?"
   diye okunur. Nabız sonuçtan bağımsız, her işaretli gecede aynı. */
.sb-slot.marked.spinning { animation: sb-marked-breathe 1.05s ease-in-out infinite; }
@keyframes sb-marked-breathe {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255, 210, 61, .16); }
  50%      { box-shadow: 0 0 0 7px rgba(255, 210, 61, .32); }
}
@media (prefers-reduced-motion: reduce) {
  .sb-slot.marked.spinning { animation: none; }
}
.sb-badge {
  position: absolute; top: -8px; inset-inline-end: -6px;
  font-size: 13px; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6));
}

/* Zincir oku: yalnız bir yuva SONRAKİNİ gerçekten değiştirdiğinde çizilir
   (Engine.seasonBoard → SPIN_CHAIN). Dekoratif ok okunmaz hale gelirdi. */
.sb-slot[data-chain]::before {
  content: '➜'; position: absolute; inset-inline-start: -15px; top: 50%;
  transform: translateY(-50%); font-size: 13px; color: var(--dim);
}
[dir="rtl"] .sb-slot[data-chain]::before { transform: translateY(-50%) scaleX(-1); }
.sb-slot[data-chain="force"]::before,
.sb-slot[data-chain="shield"]::before { color: var(--accent); }
.sb-slot[data-chain="block"]::before,
.sb-slot[data-chain="halve"]::before,
.sb-slot[data-chain="burn"]::before { color: var(--danger); }

/* Kombo şeridi: panonun altında, sezonun üç sonucunun BİRLİKTE ne ettiğini
   söyler. Boşsa hiç yer kaplamaz — sessiz sezon sessiz kalmalı. */
.sb-combo {
  width: 100%; margin-top: 2px; display: flex; flex-direction: column; gap: 4px;
}
.sb-combo-item {
  display: flex; align-items: flex-start; gap: 7px;
  background: var(--panel2); border: 1px solid #39415a; border-radius: 9px;
  padding: 6px 10px; font-size: 12px; line-height: 1.35; animation: pop .3s ease-out;
}
.sb-combo-item .sbc-ico { font-size: 14px; line-height: 1.2; flex: none; }
/* Ad + cümle tek akış: ayrı flex kutuları dar telefonda adı kelime
   ortasından kırıyordu. */
.sb-combo-item .sbc-body { flex: 1 1 auto; min-width: 0; }
.sb-combo-item .sbc-name { font-weight: 800; }
.sb-combo-item .sbc-text { color: var(--dim); }
/* Ödeyen kombo altın çerçeveli: "ad veren" ile "puan veren" katman
   birbirine karışmamalı. */
.sb-combo-item.gold { border-color: var(--ad); background: rgba(255, 210, 61, .10); }
.sb-combo-item .sbc-pay {
  margin-inline-start: auto; flex: none;
  color: var(--ad); font-weight: 800;
  font-family: 'Changa', 'Game Sans', sans-serif;
}

@media (prefers-reduced-motion: reduce) {
  .sb-slot.active, .sb-combo-item { animation: none; }
  .sb-slot.just, .sb-slot.just .sb-ico { animation: none; }
  .sb-slot.just::after { display: none; }
  .sb-slot.club-inbound, .sb-slot.watch { animation: none; }
  #phase-spin.resolving .wheel-wrap, #phase-spin .wheel-wrap { transition: none; }
}

/* Özet şeridi + (dokunulduysa) tek bir yuva cümlesi. Eskiden burası sezonun
   bütün spin satırlarını taşıyan, kendi içinde kaydırılan bir log kutusuydu;
   sonuçlar panoda görünür olunca aynı şeyi ikinci kez söylüyordu. En fazla iki
   blok kaldığı için kaydırma da gerekmiyor: yükseklik içeriğe göre. */
#spin-detail {
  width: 100%; display: flex; flex-direction: column; gap: 4px;
}
/* Sezon özeti: panonun söyleyemediği tek şey — yuva yuva değil, TOPLAM etki
   ("bu sezon FIN +4"). İki ayrı FIN +2 yuvasını toplayan yer burası. */
.spin-digest {
  background: var(--panel); border: 1px solid #2a3143; border-radius: 8px;
  padding: 5px 10px; font-size: 12px;
  display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center;
}
.spin-digest .sd-gain { color: var(--accent); font-weight: 700; }
.spin-digest .sd-bad { color: var(--danger); font-weight: 700; }
.logline {
  background: var(--panel);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  animation: pop 0.25s ease-out;
}
@keyframes pop {
  from { transform: translateY(-6px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.card {
  width: 100%;
  position: relative;
  background: var(--panel);
  border: 1px solid #2a3143;
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
}
.lock-tag {
  display: inline-block;
  padding: 2px 5px;
  border-radius: 4px;
  background: #f5eeda;
  color: #1a2233;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
}
.bigstat { font-size: 30px; font-weight: 800; }
.trophy { color: var(--ad); font-weight: 700; }

#offer-text { font-size: 15px; line-height: 1.5; }

/* ---------- özet ---------- */
/* Başlık bloğu: maskot solda, unvan + kimlik rozetleri sağında alt alta
   (bkz. careerBodyHtml). Ortalanmış üç ayrı satır yerine tek yatay blok. */
.sum-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  text-align: start;
}
.sum-head .result-mascot { margin: 0; flex: 0 0 auto; }
.sum-head-facts {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
/* rv-stamp ölçekli açılış yaptığı için dönüşüm kaynağı sola sabitlenir:
   ortadan büyüyen unvan maskotun üstüne taşardı. */
.sum-head .sum-title { transform-origin: left center; }
.sum-tag { display: flex; }
.sum-title { font-size: 26px; font-weight: 800; }
.sum-sub { color: var(--dim); }
/* İmza: unvan satırının altındaki somut hatıra. Bilinçli olarak chip DEĞİL —
   kariyer kartında zaten unvan, kimlik ve hikâye rozetleri var; dördüncüsü
   yığın olurdu (bkz. docs/imza-hareketi-plan.md). */
.sum-signature { font-size: 14px; font-style: italic; color: var(--dim); margin-top: 2px; }
.sum-score { font-size: 18px; }
.sum-stats { font-size: 14px; line-height: 1.5; }
.chip {
  background: var(--panel2);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
}
/* ---------- Kariyer Müzesi ---------- */
h3 { font-size: 14px; font-weight: 700; text-align: center; margin: 6px 0 0; }
.badge-grid { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 420px; }
.badge-locked { opacity: 0.45; }

/* Rozet duvarı paneli: satır satır rozetler; satır dokunulabilir (detay popup). */
.badge-row {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 8px 10px; margin: 3px 0;
  background: var(--panel2); border: 1px solid #2a3143; border-radius: 10px;
  color: var(--text); font: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer; text-align: start;
}
.badge-row:hover { border-color: var(--accent); }
.badge-row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge-row-prog { flex: 0 0 auto; }
/* Millet rozetinde ikon yerine bayrak: 20 ülke aynı yıldızla ayırt edilemezdi.
   Genişlik chip-icon ile aynı tutulur ki satır adları hizada kalsın. */
.badge-row-flag { flex: 0 0 auto; width: 19px; text-align: center; font-size: 14px; }

/* Albüm sayfası sekmeleri (madde 3). Liste kendi kaydırma bölgesinde durur —
   sekme satırı ve Kapat butonu hep görünür kalsın. */
.badge-chips { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.badge-chip {
  background: var(--panel2); border: 1px solid #2a3143; border-radius: 999px;
  padding: 4px 10px; font: inherit; font-size: 12px; font-weight: 700;
  color: var(--dim); cursor: pointer;
}
.badge-chip-on { color: var(--text); border-color: var(--accent); }
#museum-badges { max-height: calc(42vh / var(--z)); overflow-y: auto; overscroll-behavior: contain; }

/* Albüm bölüm başlığı: "Sıradaki hedefler" / "Açılanlar" / "Bölgelere göre".
   Sayfayı üç okunabilir bloğa ayıran tek işaret — büyük olmasına gerek yok. */
.album-head {
  margin: 10px 2px 2px; font-size: 11px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim);
}
.album-head:first-child { margin-top: 2px; }
/* Katlanmış grup düğmesi: kalan kilitliler ve Dünya Turu bölgeleri.
   Bölge satırında sağda ince ilerleme çubuğu durur (60 kilit yerine 4 oran). */
.album-fold {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  width: 100%; padding: 8px 10px; margin: 3px 0;
  background: transparent; border: 1px dashed #2a3143; border-radius: 10px;
  color: var(--dim); font: inherit; font-size: 12px; font-weight: 700;
  cursor: pointer; text-align: start;
}
.album-fold:hover { border-color: var(--accent); color: var(--text); }
.album-fold-open { border-style: solid; color: var(--text); }
.album-fold-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.album-fold-prog { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.album-fold-caret { flex: 0 0 auto; }
/* Bölge çubuğu satırın ALTINA geçer (flex-basis:100%) ve sol boşluğu okla
   hizalar: metin bloğu ile aynı sütunda başlar. */
.album-bar {
  flex-basis: 100%; height: 3px; margin-inline-start: 18px; border-radius: 2px;
  background: var(--panel2); overflow: hidden;
}
.album-bar i { display: block; height: 100%; border-radius: 2px; background: var(--accent); }
.badge-detail { text-align: center; }
.badge-detail-emoji { font-size: 44px; line-height: 1.2; }
.badge-detail-desc { font-size: 13px; margin: 6px 0 0; }
.badge-status-open { color: var(--accent); font-weight: 800; }
#museum-history { max-height: calc(32vh / var(--z)); overflow-y: auto; }
#museum-history .tl-row .tl-age { width: auto; }

.tl { text-align: start; max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
/* Kariyer özeti bir arşiv ekranıdır (sayfa zaten kayar): zaman çizelgesi
   kutuya sıkışmaz, tamamı görünür. */
/* Panel kendi scroll'unu yönetir; içteki liste sınırsız uzar. */
#timeline-panel .tl { max-height: none; overflow-y: visible; }

/* ---------- Kariyer kapanışı reveal'i ----------
   Bilgi ekranlara bölünmez: tek kahraman ekranda kademeli gelir (skor sayarak
   dolar, unvan damgalanır, jenerasyon satırı düşer). Dokunuş animasyonu atlar;
   hızlı mod hiç oynatmaz. */
.sum-reveal .rv { opacity: 0; transform: translateY(8px); transition: opacity 0.45s ease, transform 0.45s ease; }
.sum-reveal .rv.rv-in { opacity: 1; transform: none; }
.sum-reveal .rv-stamp { transform: scale(1.7); }
.sum-reveal .rv-stamp.rv-in { transform: scale(1); transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.2, 1.6, 0.4, 1); }
.tl-row {
  display: flex;
  gap: 8px;
  font-size: 12px;
  padding: 3px 6px;
  border-radius: 6px;
  align-items: baseline;
}
.tl-row:nth-child(odd) { background: var(--panel2); }
/* Veda sezonu (rewarded "+2 yıl") satırı: oynandı ve anlatıldı ama SİCİLE
   girmedi. Soluk + kesik kenar, "bu satır saymıyor"u sözsüz söyler. */
/* Tıklanabilir tarihçe satırı: dokununca o kariyerin kapanış panosu açılır. */
.tl-row-open { cursor: pointer; transition: background 0.15s; }
.tl-row-open:hover, .tl-row-open:focus-visible { background: var(--panel); outline: 1px solid var(--accent); }
.tl-row.tl-epilog { opacity: 0.62; border-inline-start: 2px dashed var(--dim); }
.tl-row.tl-epilog .tl-age { width: auto; color: var(--dim); }
.tl-age { width: 20px; font-weight: 800; color: var(--accent); }
.tl-club { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-perf { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tl-extra { min-width: 20px; text-align: end; }

/* Teklif açıkken çarkın işi bitmiştir: küçük bir hatıra boyutuna iner,
   başlık gizlenir; karar kartı ve butonları tek ekranda kalır. */
/* ---------- Transfer yuvası (sezon panosunun tek pencereli kardeşi) ----------
   Çark dönmez; teklif buradaki şeritte belirir. Yuva/pencere/şerit/kare
   sınıfları panonunkilerle AYNI (.sb-*) — iki sahne aynı fiziği ve aynı
   fren hissini paylaşmalı, ikinci bir animasyon dili öğretilmemeli. */
/* ---------- Draft Gecesi töreni ----------
   Transfer fazının aynı iskeletini kullanır; sahneyi ayıran tek şey raund
   anonsu bloğu ve fazın üstündeki soğuk ışıktır. Ayrı bir faz kutusu
   YOKTUR (bkz. main.js transferMode notu). */
.draft-night {
  border: 1px solid var(--accent); border-radius: 12px;
  background: linear-gradient(180deg, rgba(79, 195, 247, 0.16), rgba(79, 195, 247, 0.04));
  padding: 10px 12px; margin-bottom: 10px; text-align: center;
}
.dn-round { font-weight: 800; font-size: 20px; color: var(--accent); display: flex; align-items: center; justify-content: center; gap: 6px; }
.dn-sub { font-size: 13px; color: var(--dim); margin-top: 2px; }
.dn-pick { font-weight: 700; margin-bottom: 4px; color: var(--accent); }
.phase.draft-night-on h2 { color: var(--accent); }

.transfer-board { display: flex; width: min(72vw, 290px); }
.transfer-board .sb-slot { min-height: 86px; }
.tb-cell { gap: 2px; }
.tb-stars { font-size: 20px; line-height: 1.1; letter-spacing: 1px; }
.tb-club { font-size: 12px; color: var(--dim); max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Bekleyen yuva: çevrilmeden önce soru işareti — panonun "n/N sırada"
   satırının transfer karşılığı (tek pencere olduğu için sayı yok). */
.tb-idle { font-size: 26px; color: var(--dim); }
/* Teklif açıldığında yuva küçülür ama KALIR: kararın kaynağı görünür kalsın
   (çarkın küçülmesiyle aynı gerekçe). */
#phase-transfer.offer-open .transfer-board .sb-slot { min-height: 58px; }
#phase-transfer.offer-open .tb-stars { font-size: 15px; }
#phase-transfer.offer-open .tb-club { font-size: 11px; }

#phase-transfer.offer-open .wheel {
  width: min(calc(28vw / var(--z)), 110px);
  height: min(calc(28vw / var(--z)), 110px);
}
#phase-transfer.offer-open h2 { display: none; }
#phase-transfer.offer-open #offer-text { font-size: 14px; }
#phase-transfer.offer-open .forecast { gap: 4px; grid-template-columns: repeat(3, 1fr); }
#phase-transfer.offer-open .forecast-item { padding: 5px 6px; font-size: 11px; }
#phase-transfer.offer-open .btn-ad { padding: 7px; margin-top: 4px; font-size: 12px; }
#phase-transfer.offer-open { gap: 6px; }
#phase-transfer.offer-open .card { gap: 5px; padding: 12px; }
#phase-transfer.offer-open .forecast-hint { font-size: 12px; line-height: 1.35; }

/* ---------- Kısa ekran kademeleri ----------
   Hedef: etkileşimli fazlar (spin/draft/transfer/sonuç) kaydırmasız tek
   ekrana sığar. 760px: sıkılaştır; 640px: küçült. */
@media (max-height: 760px) {
  #app {
    padding-top: calc(6px + var(--safe-area-inset-top));
    padding-bottom: calc(10px + var(--safe-area-inset-bottom));
  }
  #hud { margin-bottom: 4px; }
  section, .phase { gap: 8px; }
  h1, h2 { margin: 2px 0 2px; font-size: 15px; }
  .btn:not(.btn-small) { padding: 12px 14px; font-size: 15px; }
  .card { padding: 12px; gap: 4px; }
  #result-card { font-size: 13.5px; line-height: 1.35; }
  .press-headline { font-size: 15px; margin-bottom: 4px; padding: 10px 12px; }
  .draftcard { padding: 10px 12px 11px 10px; row-gap: 3px; }
  .dc-desc { font-size: 12px; }
  .forecast-item { padding: 6px; font-size: 11px; }
  .bigstat { font-size: 26px; }
  /* Taşma diyeti (canlı gb 14): kısa ekranda sonuç/veda satırları sıkışır. */
  #result-card .ui-line, #result-card .moment-sub { font-size: 12px; }
  .result-headline { font-size: 13.5px; }
  .press-headline { font-size: 13.5px; padding: 8px 10px; }
  .event-copy { font-size: 13px; }
  .result-mascot { height: min(92px, 10dvh); }
}
@media (max-height: 640px) {
  #hud { font-size: 11px; padding: 4px 8px; margin-bottom: 6px; }
  #hud-ovr { font-size: 15px; }
  .hud-age { font-size: 14px; }
  section, .phase { gap: 6px; }
  .btn:not(.btn-small) { padding: 10px 12px; font-size: 14px; }
  .wheel {
    width: min(58vw, 235px);
    height: min(58vw, 235px);
    width: min(58vw, 235px, max(180px, calc(100dvh - 400px)));
    height: min(58vw, 235px, max(180px, calc(100dvh - 400px)));
  }
  .result-mascot { height: min(72px, 10dvh); }
  .hero-goat { width: min(120px, 18dvh); }
  .logo { font-size: 34px; }
  .objective { font-size: 11px; }
  .dc-icon-img { width: 34px; height: 34px; }
  .draftcard { grid-template-columns: 38px minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Sezon değerlendirmesi (basın kartı) ve karakter rozetleri */
.press-card { text-align: start; }
.press-headline { font-size: 17px; font-weight: 800; line-height: 1.35; margin-bottom: 8px; }
.press-body p { margin: 6px 0; font-size: 13.5px; line-height: 1.5; }
.press-potential { color: var(--ad); }
.press-quote { color: var(--dim); font-style: italic; font-size: 12.5px; }
.forecast-3 { grid-template-columns: 1fr 1fr 1fr; }
.delta-up { color: var(--accent); font-size: 11px; font-weight: 700; }
.delta-down { color: var(--danger); font-size: 11px; font-weight: 700; }
.trait-row { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 8px; }
.trait-desc { margin-top: 6px; line-height: 1.5; }
.slice-choice:disabled { opacity: .45; cursor: not-allowed; }

/* Draft kartı rarity görselleri */
.draftcard.r-common { --rarity-color: #8a93a6; }
.draftcard.r-rare { --rarity-color: #4da3ff; border-color: #4da3ff; }
.draftcard.r-epic { --rarity-color: #ffd23d; border-color: #ffd23d; box-shadow: 0 0 14px rgba(255, 210, 61, .18); }
.dc-rarity { font-weight: 800; letter-spacing: .06em; }
.dc-rarity-common { color: var(--dim); }
.dc-rarity-rare { color: #4da3ff; }
.dc-rarity-epic { color: #ffd23d; }
.forecast-hint { grid-column: 1 / -1; text-align: start; line-height: 1.45; padding: 2px 2px 0; }

/* ---------- Cila katmanı: font, derinlik, hareket ---------- */

.logo, h1, h2, .bigstat, .sum-title, .press-headline {
  font-weight: 700;
  letter-spacing: 0.02em;
}
.btn-primary, .btn-danger { font-weight: 700; letter-spacing: 0.03em; }
#hud-ovr, .hud-age, .statval, .sum-score b, .bigstat, .tl-age { font-family: 'Changa', system-ui, sans-serif; font-variant-numeric: tabular-nums; }

/* Derinlik: kartlar ve birincil butonlar hafif gölge taşır. */
.card, .draftcard { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28); }
.btn-primary {
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25), 0 6px 16px color-mix(in srgb, var(--accent) 22%, transparent);
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.15s ease;
}
.btn-primary:hover { filter: brightness(1.06); }
.btn-primary:active { transform: translateY(2px) scale(0.98); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25); }
.btn-ghost { transition: transform 0.08s ease, border-color 0.15s ease; }
.btn-ghost:hover { border-color: var(--accent); }

/* Hareket: fazlar yumuşak girer, log satırları kayarak gelir, kupalar zıplar. */
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* Kapanış kartı hâlâ DİKEY girer: ekran geçişinin parçası değil, ekranın
   İÇİNDEKİ bir bölümdür — yatay eksen "ileri gidiyorum" demek olurdu. */
#summary-content { animation: fadeUp calc(0.28s * var(--mo)) ease both; }

/* ---------- Ekran ve faz geçişleri: iki taraflı hareket ----------
   Eski içerik başlangıç kenarına doğru kayıp solar, yeni içerik karşı
   kenardan gelir; ikisi ÜST ÜSTE BİNER (main.js showPhase/show ikisini de
   aynı karede başlatır). Sıralı yapılsaydı geçiş iki kat uzun sürer, arada
   boş bir kare kalırdı.
   ÇIKIŞ GİRİŞTEN KISA (0.14 / 0.20 sn): geri kalan şeyi beklemek gelen şeyi
   beklemekten daha çabuk sıkar — panel giriş/çıkış oranıyla aynı kural.
   Yol da kısa (10-18 px): bu bir SAYFA KAYDIRMA değil, bir yön işareti;
   uzun yol küçük ekranda içeriği "fırlatılmış" gösterir.
   YÖN: sezon döngüsü (karar → çark → sonuç → transfer) yalnız ileri akar,
   bu yüzden yön grafiği yoktur — her değişim ileri oynanır. RTL'de eksen
   aynalanır; ayrı kare seti gerekir (transform fiziksel eksende çalışır,
   `translateX` mantıksal değildir — bkz. slideInRtl öncülü). */
@keyframes phaseIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes phaseOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-10px); } }
@keyframes phaseInRtl { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes phaseOutRtl { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(10px); } }
@keyframes screenIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes screenOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-12px); } }
@keyframes screenInRtl { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
@keyframes screenOutRtl { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(12px); } }
/* Giriş: gizli DE olmayan, çıkmakta DA olmayan tek öğe. Süreler --mo ile
   ölçeklenir (bkz. :root --mo). Ekran geçişi fazınkinden bir tık uzun:
   değişen şey daha büyük, hareket de o kadar okunur olmalı. */
.phase:not(.hidden):not(.leaving) { animation: phaseIn calc(0.2s * var(--mo)) ease both; }
section:not(.hidden):not(.leaving) { animation: screenIn calc(0.22s * var(--mo)) ease both; }
/* Çıkan öğe AKIŞTAN ÇIKAR: üst/sol/en/boy main.js startExit'te ölçülüp inline
   yazılır (sınıf eklenmeden ÖNCE), böylece bulunduğu yerde donar ve giren
   içeriğin boyunu hiç etkilemez — yoksa sayfa iki içerik boyuna şişer ve
   giren faz aşağı zıplardı (fazların boyları çok farklı: çark ekranı ile
   sonuç kartı bir değil). Çıkan öğe dokunuş da YUTMAZ: 140 ms hâlâ
   ekrandadır ama girenin üstünde tıklanabilir bir hayalet değildir. */
.phase.leaving, section.leaving { position: absolute; pointer-events: none; }
.phase.leaving { animation: phaseOut calc(0.14s * var(--mo)) ease both; }
section.leaving { animation: screenOut calc(0.16s * var(--mo)) ease both; }
[dir="rtl"] .phase:not(.hidden):not(.leaving) { animation-name: phaseInRtl; }
[dir="rtl"] .phase.leaving { animation-name: phaseOutRtl; }
[dir="rtl"] section:not(.hidden):not(.leaving) { animation-name: screenInRtl; }
[dir="rtl"] section.leaving { animation-name: screenOutRtl; }

/* ---------- Sonuç ekranının kademeli girişi ----------
   Sezon sonucu bugüne kadar TEK BLOK hâlinde beliriyordu: reyting kartı,
   manşet, rakip satırı, metrikler ve iki düğme aynı karede. Sezonun kapanışı
   oyunun en yoğun bilgi ekranı; hepsi bir anda gelince göz nereye bakacağını
   seçemiyor ve "önce ne oldu, sonra basın ne dedi" sıralaması kayboluyordu.
   Kademe o sıralamayı hareketle anlatır: önce sonuç, sonra yorum, en sonda
   ileri götüren düğme.
   ADIM 60 ms, TOPLAM 340 ms: kuyruk buradan uzarsa kademe "yükleniyor" gibi
   okunmaya başlar. Süreler --mo ile ölçeklenir, "anında"da tümü ölü.
   EKSEN DİKEY (translateY): faz geçişi yatay ekseni zaten kullanıyor, ikisi
   çakışmasın; ayrıca RTL'de aynalanacak bir yön yok.
   GİZLİ ÇOCUK BOŞLUK BIRAKMAZ: `.hidden` display:none olduğu için (rakip
   satırı yoksa, veda teklifi kapalıysa) gecikmeler sabit kalır — o adım
   sessizce boş geçer, sıra bozulmaz.
   DOKUNUŞ BEKLEMEZ: gecikme yalnız opaklık/kayma taşır; CTA ilk kareden
   itibaren basılabilir (pointer-events'e dokunulmaz).
   ÇIKARKEN KAPANIR (`:not(.leaving)`): oyuncu kademe biterken düğmeye
   basarsa faz yarım kalmış kareleriyle çıkardı — çıkışta kural düşer,
   çocuklar doğal (dolu) hâllerine döner. Aynı gerekçe #spot-scene.closing. */
@keyframes resultStep { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
#phase-result:not(.leaving) > * { animation: resultStep calc(0.22s * var(--mo)) ease both; }
#phase-result > #result-card { animation-delay: calc(0.06s * var(--mo)); }
#phase-result > #review-headline { animation-delay: calc(0.12s * var(--mo)); }
#phase-result > #review-rival { animation-delay: calc(0.18s * var(--mo)); }
#phase-result > #review-metrics { animation-delay: calc(0.24s * var(--mo)); }
/* Üç düğme/not AYNI basamakta: veda teklifi kariyerde bir kez görünür, ona
   ayrı bir basamak vermek her normal sezonda kuyruğu boşuna uzatırdı. */
#phase-result > #btn-result-detail,
#phase-result > #btn-extend-career,
#phase-result > #extend-note { animation-delay: calc(0.3s * var(--mo)); }
#phase-result > #btn-to-transfer { animation-delay: calc(0.34s * var(--mo)); }
@keyframes slideIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
.logline:first-child { animation: slideIn 0.25s ease both; }
@keyframes trophyPop { 0% { transform: scale(0.6); opacity: 0; } 70% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
.trophy { animation: trophyPop 0.4s ease both; }
@keyframes epicPulse {
  0%, 100% { box-shadow: 0 0 14px rgba(255, 210, 61, 0.18); }
  50% { box-shadow: 0 0 22px rgba(255, 210, 61, 0.4); }
}
.draftcard.r-epic { position: relative; }
.draftcard.r-epic::after {
  content: ''; position: absolute; inset: -1px; border-radius: 14px; pointer-events: none;
  box-shadow: 0 0 22px rgba(255, 210, 61, 0.4);
  animation: epicGlow 1.8s ease-in-out infinite; /* opacity animasyonu: Safari'de paint tetiklemez */
}
@keyframes epicGlow { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } }
.daily-badge { animation: trophyPop 0.4s ease both; }
.delta-up { color: var(--accent); }
.delta-down { color: var(--danger); }

/* ---------- Tıklamalı açıklama balonu + kupa ikonları ---------- */
#tip-bubble {
  position: fixed; z-index: 1000; max-width: 260px;
  background: #0c0e14f2; border: 1px solid var(--accent);
  color: var(--text); font-size: 12px; line-height: 1.45;
  padding: 8px 11px; border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  pointer-events: none; animation: fadeUp 0.15s ease both;
}
[data-tip] { cursor: help; }
.chip-icon { height: 15px; vertical-align: -3px; margin-inline-end: 4px; }
/* Yeni asset seti yardımcıları (assets/gen, bkz. js/icons.js) */
.hud-ico { height: 16px; vertical-align: -3px; }
.bigstat-ico { height: 26px; vertical-align: -3px; margin-inline-end: 2px; }
.offer-badge { height: 22px; vertical-align: -5px; margin-inline-end: 2px; }
.club-mark, .club-mark-sm, .club-mark-offer {
  /* Arma yedeği (JS palet vermezse). icons.js CLUB_PALETTES[0] ile aynı
     değeri taşımalı: ikisi ayrışırsa aynı kulüp DOM'da ve canvas'ta başka
     renkte çizilir. */
  --club-primary: #2fa8a0;
  --club-secondary: #f5eeda;
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  vertical-align: -6px;
  border-radius: 50%;
  background: var(--club-secondary);
  border: 3px solid var(--club-primary);
  box-shadow: 0 0 0 1px #1a2233;
}
.club-mark-sm { width: 18px; height: 18px; border-width: 2px; vertical-align: -5px; }
.club-mark-offer { width: 34px; height: 34px; border-width: 4px; vertical-align: -11px; margin-inline-end: 5px; }
.club-mark img, .club-mark-sm img, .club-mark-offer img { width: 94%; height: 94%; object-fit: contain; }
.ui-line { display: flex; align-items: center; justify-content: center; gap: 7px; }
.ui-line .ui-ico { width: 21px; height: 21px; object-fit: contain; flex: 0 0 auto; }
/* Buton ikonları: emoji yerine ::before ile asset seti (metin i18n'de temiz kalır). */
#btn-continue::before, #btn-customize::before, #btn-daily::before,
#btn-museum::before, #btn-trophy-panel::before, #btn-result-detail::before,
#btn-timeline-panel::before,
#btn-accept::before, #btn-reject::before,
#btn-reroll::before, #btn-copy::before,
#btn-again-seed::before, #btn-new-career::before {
  content: '';
  display: inline-block;
  width: 17px; height: 17px;
  background: center / contain no-repeat;
  vertical-align: -3px;
  margin-inline-end: 7px;
}
#btn-continue::before { background-image: url('../assets/gen/icon_spin.png'); }
#btn-customize::before { background-image: url('../assets/gen/icon_settings.png'); }
#btn-daily::before { background-image: url('../assets/gen/icon_calendar.png'); }
#btn-museum::before { background-image: url('../assets/gen/icon_museum.png'); }
#btn-trophy-panel::before { background-image: url('../assets/gen/trophy_league.png'); }
#btn-timeline-panel::before { background-image: url('../assets/gen/icon_calendar.png'); }
#btn-result-detail::before { background-image: url('../assets/gen/icon_report.png'); }
#btn-accept::before { background-image: url('../assets/gen/icon_trust.png'); }
#btn-reject::before { background-image: url('../assets/gen/icon_redcard.png'); }
#btn-reroll::before, #btn-again-seed::before { background-image: url('../assets/gen/icon_spin.png'); }
#btn-copy::before { background-image: url('../assets/gen/icon_report.png'); }
#btn-new-career::before { background-image: url('../assets/gen/icon_star.png'); }

/* ---------- Custom Run + Zirve popup'ları ---------- */
.custom-section {
  width: 100%; margin: 6px 0 0; font-size: 12px; color: var(--dim);
  text-transform: uppercase; letter-spacing: 0.08em; text-align: start;
}
.summit-levels { display: flex; flex-direction: column; gap: 6px; }
/* Seviye satırı iki katlı buton: üstte ad, altta etki dökümü (sarabilir). */
.summit-row {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  text-align: start; white-space: normal; line-height: 1.35;
}
.summit-row-title { font-weight: 800; }
.summit-row[disabled] { opacity: 0.5; }

/* ---------- Spin keşif ipuçları ---------- */
#spin-hint { text-align: center; }
#fast-suggest { width: 100%; gap: 8px; }
#fast-suggest .btnrow { margin: 0; }
.result-mascot {
  display: block;
  height: 116px;
  height: min(116px, calc(12dvh / var(--z)));
  margin: 2px auto 6px;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.4));
}
/* Sonuç kartı başlığı: maskot solda, kısa istatistikler sağında —
   kart kısalır, alttaki butonlar kısa ekranlarda taşmaz. */
.result-head {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: start;
}
.result-head .result-mascot { margin: 0; flex: 0 0 auto; }
.result-facts {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.result-facts .ui-line { justify-content: flex-start; text-align: start; }
#result-card {
  overflow: hidden;
  border-top: 5px solid #f5eeda;
  border-bottom: 5px solid var(--accent);
}
#result-card::after {
  content: '';
  position: absolute;
  inset-inline-end: -34px; top: 30%;
  width: 88px; height: 88px;
  border: 9px dotted rgba(245,238,218,.13);
  border-radius: 50%;
  pointer-events: none;
}
#review-headline {
  background: #f5eeda;
  color: #1a2233;
  border: 3px solid #1a2233;
  border-radius: 8px 14px 9px 13px;
  box-shadow: 4px 5px 0 rgba(0,0,0,.32);
  transform: rotate(-.35deg);
}
.chip-trophy { display: inline-flex; align-items: center; gap: 2px; }
/* Yükselen Kulüp anı: altın çerçeveli manşet satırı (bkz. engine clubRise). */
.club-rise {
  width: 100%;
  justify-content: center;
  background: rgba(255, 210, 61, 0.10);
  border: 1px solid var(--ad);
  border-radius: 10px;
  padding: 8px 10px;
  color: var(--ad);
  font-weight: 800;
}

/* Rakip satırı: basın kartının hemen altında yaşayan tek satırlık şerit. */
.press-rival {
  font-size: 13px;
  line-height: 1.4;
  background: var(--panel2);
  border: 1px solid var(--accent2);
  border-radius: 10px;
  padding: 6px 10px;
}

/* ---------- Ayar dişlisi ----------
   #app'e göre konumlanır (sayfaya değil): masaüstünde gövde zoom'landığı için
   position:fixed dişliyi kolonun dışına atardı. Panellerin z-index'i 500,
   dişli onların altında kalır — panel açıkken üstte durmasın. */
#app { position: relative; }
.settings-gear {
  position: absolute;
  /* Konum #app'in PADDING kutusuna göredir (padding'in dışı): güvenli alan
     payını dişli de kendisi eklemek zorunda. */
  /* max(): inset-inline-end RTL'de sol kenara bakar, güvenli alan değişkenleri
     ise fizikseldir — ikisinin büyüğü her iki yönde de doğru pay verir. */
  inset-inline-end: calc(10px + max(var(--safe-area-inset-left), var(--safe-area-inset-right)));
  top: calc(10px + var(--safe-area-inset-top));
  z-index: 400;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel2); color: var(--dim);
  border: 1px solid #2a3143; border-radius: 50%;
  font-size: 16px; line-height: 1; cursor: pointer;
  transition: color 0.15s, border-color 0.15s, transform 0.2s;
}
.settings-gear:hover { color: var(--text); border-color: var(--accent); transform: rotate(45deg); }
/* Dişli HUD'ın üstünde durur; HUD sonuncu öğesini (servet) dişlinin altına
   akıtmasın diye şeridin sonunda yer ayrılır. */
#hud { padding-inline-end: 44px; }

/* "Ana menü" ayar panelinin en üstünde durmaz: yanlışlıkla basılıp kariyerden
   çıkmak, sesi kısmaktan çok daha pahalı bir hatadır. Ayırıcı çizgi onu
   ses/dil satırlarından görsel olarak da koparır. */
#btn-go-home { border-top: 1px solid #2a3143; border-radius: 12px; margin-top: 2px; }

/* ---------- Pro Paket bilgi paneli ----------
   Satın alma butonu artık doğrudan mağazayı açmaz: önce ne satın alındığı
   anlatılır. Mağaza akışı yalnız bu panelin onay butonundan başlar. */
.pro-card { text-align: start; }
.pro-lead { font-size: 14px; line-height: 1.4; margin: 0; }
.pro-perks { list-style: none; margin: 2px 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.pro-perks li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 13.5px; line-height: 1.35;
  background: var(--panel2); border: 1px solid #2a3143; border-radius: 10px;
  padding: 9px 11px;
}
/* İşaret CSS'ten gelir: 23 çeviri dosyasının hepsine ✓ kopyalamak yerine. */
.pro-perks li::before { content: '✓'; color: var(--accent); font-weight: 800; flex: 0 0 auto; }
#pro-panel-status:empty { display: none; }
#pro-panel-status { text-align: center; }
#pro-panel-status.bad { color: var(--danger); }

/* ---------- Native kabuk (Capacitor) ----------
   Uygulama içinde belge KAYDIRMAZ: kaydırma yalnız #app'in içinde olur.
   Böylece lastik bant (rubber-band) esnemesi, adres çubuğu boşluğu ve
   iki parmakla yakınlaştırma ortadan kalkar — tarayıcı sekmesi değil,
   uygulama gibi davranır. Web sürümü (goatinho.app) bu sınıfı hiç almaz. */
html.app-shell, html.app-shell body { height: 100%; overflow: hidden; overscroll-behavior: none; }
html.app-shell body {
  position: fixed; inset: 0; min-height: 0;
  /* pan-y: dikey kaydırma serbest, pinch-zoom ve çift dokunuş kapalı.
     touch-action atalarda da birleşir, tek satır bütün ağacı kapsar. */
  touch-action: pan-y;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;   /* uzun basınca çıkan kopyala/paylaş menüsü */
}
html.app-shell #app {
  height: 100%; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
/* Reddit inline kapağı (bkz. main.js setupRedditCover): inline webview'da
   kaydırma YASAK (inceleme reddi "In-line Scroll Trap") — kapak çerçeveyi
   tamamen örter, oyun Play ile Devvit'in expanded modalında açılır.
   Kapak aynı zamanda feed'deki VİTRİN: stadyum art'ı + büyük maskot +
   kanca metni + nabız atan CTA. */
#reddit-cover {
  position: fixed; inset: 0; z-index: 700;
  background: var(--bg); text-align: center; overflow: hidden;
}
#reddit-cover .rc-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.45;
}
/* Boyutlar vmin (kısa kenar) tabanlı: masaüstünün geniş çerçevesinde de
   büyür, telefonda taşmaz (canlı gb: "masaüstünde küçük görünüyor"). */
#reddit-cover .rc-body {
  position: relative; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(8px, 2.2vmin, 20px); padding: 16px;
  /* Metin bandı okunur kalsın: ortada hafif karartma */
  background: radial-gradient(ellipse at 50% 55%, rgba(5, 7, 12, 0.62) 30%, rgba(5, 7, 12, 0.15) 75%);
}
#reddit-cover .hero-goat {
  width: clamp(120px, 34vmin, 260px);
  animation: rc-bob 2.8s ease-in-out infinite;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.5));
}
#reddit-cover .logo { font-size: clamp(42px, 15vmin, 112px); }
#reddit-cover .rc-tag { font-size: clamp(14px, 4.6vmin, 27px); line-height: 1.45; color: #cfd6e2; margin: 0; }
#reddit-cover #reddit-play {
  font-size: clamp(19px, 6.6vmin, 40px); font-weight: 800;
  padding: 0.68em 1.9em; width: auto;   /* em: yazıyla birlikte büyür */
  animation: rc-pulse 1.9s ease-in-out infinite;
  box-shadow: 0 0 0 0 var(--accent);
}
#reddit-cover .rc-live { font-size: clamp(13px, 3.8vmin, 22px); color: var(--accent); font-weight: 700; margin: 0; }
#reddit-cover .rc-col {
  display: flex; flex-direction: column; align-items: center;
  gap: inherit; min-width: 0;
}
/* GENİŞ çerçeve (masaüstü inline): dikey istif genişliği kullanamıyordu —
   maskot sola, metin+CTA sağa; her öğe belirgin büyür (canlı gb 4). */
@media (min-aspect-ratio: 6/5) and (min-width: 560px) {
  #reddit-cover .rc-body { flex-direction: row; gap: clamp(20px, 6vmin, 52px); }
  #reddit-cover .rc-col { gap: clamp(10px, 2.6vmin, 24px); }
  #reddit-cover .hero-goat { width: clamp(150px, 48vmin, 330px); }
  #reddit-cover .logo { font-size: clamp(48px, 16vmin, 118px); }
  #reddit-cover .rc-tag { font-size: clamp(15px, 4.8vmin, 28px); }
  #reddit-cover #reddit-play { font-size: clamp(20px, 7vmin, 42px); }
  #reddit-cover .rc-live { font-size: clamp(14px, 4vmin, 23px); }
}
/* Çok basık çerçeve (yatay telefon / mini embed): dikey bütçe daralınca
   maskot küçülür, kanca metni gizlenir — CTA her zaman görünür kalır. */
@media (max-height: 420px) {
  #reddit-cover .hero-goat { width: clamp(72px, 22vmin, 120px); }
  #reddit-cover .rc-tag { display: none; }
}
@keyframes rc-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
@keyframes rc-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.055); }
}
@media (prefers-reduced-motion: reduce) {
  #reddit-cover .hero-goat, #reddit-cover #reddit-play { animation: none; }
}
/* Inline kilidi: belge de #app de kaymaz; app-shell'in iç kaydırma kuralını
   expanded moda bırakır (sınıfı setupRedditCover yönetir). */
html.reddit-inline, html.reddit-inline body { height: 100%; overflow: hidden; }
html.reddit-inline #app { overflow: hidden; }

/* Metin alanları istisna: seed girişi ve paylaşım metni seçilebilir kalmalı. */
html.app-shell input, html.app-shell textarea {
  -webkit-user-select: text; user-select: text;
  -webkit-touch-callout: default;
}

/* DÜĞME METNİ HER KANALDA SEÇİLMEZ. Yukarıdaki kural yalnız native kabuğa
   (html.app-shell) bakar; web kanallarında (goatinho.app, itch, CrazyGames)
   düğmeye basıp azıcık kaydırmak metni seçiyordu — canlıda çevirme düğmesinin
   "Making" kelimesi mavi mavi kaldı. Sürükleme dokunuşun doğal payıdır,
   cezası metin seçmek olmamalı.
   Kural bilinçli DAR: gövdeye genel bir user-select:none KONMAZ, çünkü webde
   paylaşım metni, seed ve sayı satırları kopyalanabilir kalmalı. */
button, .btn { -webkit-user-select: none; user-select: none; }

.settings-links { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.settings-link {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 12px; border-radius: 12px;
  background: var(--panel2); border: 1px solid #2a3143;
  color: var(--text); text-decoration: none;
  font-size: 14px; font-weight: 700;
}
.settings-link:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Sezonluk dilim toast'ları (main.js showSeasonSliceToasts) ----------
   Panellerin (500) üstünde ama tooltip'in (1000) altında yaşar; dokunuşları
   yutmasın diye stack pointer-events almaz, tek tek toast'lar alır (tıkla-kapat). */
#toast-stack {
  position: fixed;
  top: calc(10px + var(--safe-area-inset-top));
  left: 50%; transform: translateX(-50%);
  z-index: 600;
  width: min(92vw, 370px);
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.season-toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: 10px;
  background: var(--panel2);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  padding: 9px 12px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5);
  animation: fadeUp 0.3s ease both;
}
.season-toast.toast-out { opacity: 0; transform: translateY(-10px); transition: opacity 0.45s, transform 0.45s; }
.toast-icon { width: 32px; height: 32px; flex: none; }
.toast-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.toast-title { font-size: 13px; font-weight: 700; line-height: 1.25; }
.toast-desc { font-size: 11px; color: var(--dim); line-height: 1.3; }
/* Reklam sonucu toast'ı (monetize.js): tek satır metin, ikon yok — sezon
   dilimi toast'ının sade varyantı, aynı animasyon ve ömrü paylaşır. */
.ad-toast { font-size: 12px; line-height: 1.4; color: var(--text); }

/* ---------- Reklam kilidi (monetize.js request → mode 'ad') ----------
   z-index 1100: dosyadaki EN YÜKSEK katman tıklamalı açıklama balonuydu
   (#tip-bubble, 1000); kilidin işi tam olarak "hiçbir şeye dokunulamasın"
   olduğu için onun da üstünde durur. Kendi arka planı bütün dokunuşları
   yutar — panel-overlay'in aksine kapatma yolu yoktur. */
#ad-gate {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(6, 8, 12, 0.86);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.ad-gate-box {
  display: flex; align-items: center; gap: 12px;
  background: var(--panel2);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 13px; color: var(--text);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5);
}
/* Belirsiz süreli bekleme → yüzde değil, dönen halka. Renk reklam yolunun
   kendi rengi (--ad), böylece kilit "reklam bekleniyor" diye okunur. */
.ad-gate-spin {
  width: 18px; height: 18px; flex: none;
  border: 2px solid rgba(255, 255, 255, 0.16);
  border-top-color: var(--ad);
  border-radius: 50%;
  animation: adGateSpin 0.8s linear infinite;
}
@keyframes adGateSpin { to { transform: rotate(360deg); } }

/* ---------- Popup panelleri (kupa vitrini / çark bilgisi / rapor) ---------- */
.panel-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(6, 8, 12, 0.88);
  display: flex; align-items: center; justify-content: center;
  /* Karartma çentiğin altını da kaplar (inset: 0), kart ise güvenli alanın
     içinde kalır — uzun panellerde üst satır çentiğe girmesin. */
  padding:
    calc(20px + var(--safe-area-inset-top))
    calc(20px + var(--safe-area-inset-right))
    calc(20px + var(--safe-area-inset-bottom))
    calc(20px + var(--safe-area-inset-left));
}
/* Kariyer detayı tarihçe/Rüya Hattı panellerinin ÜSTÜNDE açılır; onun içinden
   açılan çizelge/kupa/röportaj panelleri de detayın üstünde durmalı. */
#career-detail-panel { z-index: 510; }
#timeline-panel, #trophy-panel, #interview-panel { z-index: 520; }
/* Detay gövdesi kapanış ekranının kartıyla aynı dili konuşur, ama panel
   içinde durduğu için kendi kenarlığını taşımaz. */
#career-detail-body { border: 0; padding: 0; background: none; }
.panel-overlay .panel-card {
  width: 100%; max-width: 420px;
  /* 82dvh → 94dvh (canlı gb 14c): "panel küçük kalıyor, ekranda alan varken
     içinde kaydırıyorum" — uzun paneller (sezonlar, müze detayı) artık ekranı
     kullanır; güvenli alan + küçük kenar payı yine düşülür. */
  max-height: calc(94vh / var(--z));
  max-height: min(
    calc(94dvh / var(--z)),
    calc((100dvh - 24px - var(--safe-area-inset-top) - var(--safe-area-inset-bottom)) / var(--z))
  );
  overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 8px; animation: fadeUp calc(0.25s * var(--mo)) ease both;
}

/* ---------- Panel giriş / çıkış ----------
   Kart eskiden yumuşak GİRİYOR ama sert KESİLİYORDU: kapanış anında
   display:none'du, yani panel "yok oluyordu" — dokunuşun bir sonucu değil bir
   sıçraması gibi. Simetriyi kurmak yetmez, çıkış girişten KISA olmalı (180 →
   140 ms): geri dönüş beklemek ileri gitmek beklemekten daha çabuk sıkar.
   Sınıflar tek yerden yönetilir (main.js openPanel/closePanel); .closing
   YALNIZCA görsel katmandır, paneli gerçekten gizleyen `hidden` sınıfını yine
   closePanel animasyonun sonunda ekler.
   Zemin ve kart AYRI animasyonlar taşır: yığılmış panellerde (rozet + rozet
   detayı, tarihçe + kariyer detayı) üstteki kapanırken alttaki kımıldamamalı,
   bu yüzden hiçbir kural ata/kardeş overlay'e sızmaz. */
@keyframes panelBackdropIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes panelBackdropOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes panelCardOut {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(6px) scale(0.98); }
}
.panel-overlay:not(.hidden):not(.closing) { animation: panelBackdropIn calc(0.18s * var(--mo)) ease both; }
/* Kapanan panel dokunuş YUTMAZ: 140 ms hâlâ ekrandadır ama tıklanabilir
   değildir — altındaki panele/ekrana yapılan dokunuş beklemeye girmez. */
.panel-overlay.closing { pointer-events: none; animation: panelBackdropOut calc(0.14s * var(--mo)) ease both; }
.panel-overlay.closing .panel-card { animation: panelCardOut calc(0.14s * var(--mo)) ease both; }
/* Büyük gece sahnesi kapanırken DOLU kalmalı: kademeli beliriş adımları
   (.spot-scene-step) taban durumda opacity:0'dır, sahne solarken içi boşalmış
   gibi görünmesin diye son kare dondurulur. */
#spot-scene.closing .spot-scene-step { opacity: 1; transform: none; animation: none; }
/* "Anında" tercihi ve sistem "hareketi azalt": geçiş katmanı komple kapanır.
   Süre calc ile 0s'ye düşse de animasyon ADI kaldırılır — `both` dolgusunun
   sıfır süreli animasyondaki uç davranışına güvenmeyiz, aksi hâlde bir
   tarayıcıda panel açıkken opacity:0'da donabilirdi. */
html[data-motion="instant"] .phase,
html[data-motion="instant"] section,
html[data-motion="instant"] #summary-content,
html[data-motion="instant"] .panel-overlay,
html[data-motion="instant"] .panel-card,
/* Kademeler ve seçim yankısı da aynı kapıdan kapanır: "anında" tercihinde
   sonuç ekranı tek blok, kartlar tek karede, seçim işareti anında düşer —
   yani bu fazdan önceki davranışın BİREBİR aynısı. JS tarafı da bekleme
   koymaz (main.js pickHoldMs → 0). */
html[data-motion="instant"] #phase-result > *,
html[data-motion="instant"] .draft-grid > *,
html[data-motion="instant"] .pick-echo { animation: none !important; }
html[data-motion="instant"] .pick-dim { transition: none !important; }
/* Gece fonu da anında değişir: opaklık geçişi süresi zaten 0'a düşer ama
   sıfır süreli geçişin uç davranışına güvenmeyiz. */
html[data-motion="instant"] body::before { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .phase, section, #summary-content, .panel-overlay, .panel-card { animation: none !important; }
  #phase-result > *, .draft-grid > *, .pick-echo { animation: none !important; }
  .pick-dim { transition: none !important; }
  body::before { transition: none !important; }
}
/* İlk açılış cinsiyet seçimi: her şeyin ÜSTÜNDE ve zeminden kapanmaz — bu
   ekran bir bilgi paneli değil, cevaplanması gereken tek soru. İki seçenek
   eşit ağırlıkta durur (ikisi de btn-primary): biri "varsayılan", diğeri
   "alternatif" gibi okunmamalı. */
#gender-pick { z-index: 900; }
.gender-pick-card { text-align: center; }
.gender-pick-card .btnrow { flex-direction: column; gap: 8px; margin-top: 4px; }
.gender-pick-card .btnrow .btn { width: 100%; }
#trophy-panel h3 { margin-top: 8px; color: var(--ad); }
#trophy-panel .tl-row { font-size: 13px; padding: 5px 6px; }
/* Vitrin satırı iki katlı: üstte ödül adı (kırpılmaz), altta kulüp + yıldızlar. */
#trophy-panel .tp-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: start;
}
#trophy-panel .tp-label { white-space: normal; line-height: 1.3; }
#trophy-panel .tp-club { font-size: 11px; }

/* ---------- Buz Altılısı paneli: geçmiş kariyerlerden rüya hat ---------- */
.bestxi-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* Genel select %100 genişliktir; toolbar'da OVR metnine yer bırakması gerekir. */
.bestxi-toolbar select { width: auto; flex: 1 1 auto; min-width: 0; }
/* Takım OVR panelin kahraman sayısıdır: büyük ve vurgulu. */
.bestxi-ovr { font-weight: 800; font-size: 20px; color: var(--accent); white-space: nowrap; flex: 0 0 auto; }
/* Buz: çim değil pist. Kırmızı orta çizgi + iki mavi çizgi + orta daire,
   ekstra elemansız salt fon detayı (paylaşım kartındaki çizimin ikizi). */
.bestxi-ice {
  background: linear-gradient(#e6eff8, #c2d6e6);
  border: 2px solid #8fb0cc; border-radius: 12px;
  padding: 12px 6px; display: flex; flex-direction: column; gap: 10px;
  background-image:
    radial-gradient(circle at 50% 50%, transparent 46px, rgba(198,52,52,0.35) 47px, rgba(198,52,52,0.35) 48px, transparent 49px),
    linear-gradient(rgba(0,0,0,0) calc(50% - 2px), rgba(198,52,52,0.5) 50%, rgba(0,0,0,0) calc(50% + 2px)),
    linear-gradient(rgba(0,0,0,0) calc(33% - 2px), rgba(58,110,180,0.45) 33%, rgba(0,0,0,0) calc(33% + 2px)),
    linear-gradient(rgba(0,0,0,0) calc(67% - 2px), rgba(58,110,180,0.45) 67%, rgba(0,0,0,0) calc(67% + 2px)),
    linear-gradient(#e6eff8, #c2d6e6);
}
/* Buz açık zeminlidir: yuva metni koyu okunur (panelin geri kalanı koyu tema). */
.bestxi-ice .bestxi-slot { color: #16222f; }
.bestxi-ice .bestxi-slot .bx-ovr { color: #14486f; }
.bestxi-row { display: flex; justify-content: space-evenly; gap: 4px; }
/* Mevki, paylaşım kartındaki dille aynı: kutu değil, yuvarlak avatar + ad + OVR. */
.bestxi-slot {
  flex: 0 1 84px; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 11px; text-align: center;
}
.bx-avatar {
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(8, 10, 15, 0.72); border: 2px solid var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.bx-avatar-img { width: 24px; height: 24px; }
.bestxi-slot .bx-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.bestxi-slot .bx-ovr { font-weight: 800; color: var(--accent); }
/* Dolu mevki tıklanabilir: o oyuncu bir geçmiş kariyerdir. */
.bestxi-slot.bx-open { cursor: pointer; }
.bestxi-slot.bx-open:hover .bx-name, .bestxi-slot.bx-open:focus-visible .bx-name { color: var(--accent); }
.bestxi-slot.bx-empty { opacity: 0.5; }
.bestxi-slot.bx-empty .bx-avatar { border: 2px dashed rgba(22, 34, 47, 0.45); }
/* Vekil yuva (kaleci — B3): boş değil "henüz yok". Kesikli değil sönük dolgu. */
.bestxi-slot.bx-proxy { opacity: 0.45; }
.bestxi-slot.bx-proxy .bx-avatar { border: 2px solid rgba(22, 34, 47, 0.3); background: rgba(22, 34, 47, 0.25); }
.bestxi-slot.bx-proxy .bx-ovr { font-size: 10px; font-weight: 700; }

/* ---------- RTL (Arapça, Farsça) ----------
   Yön html[dir] üzerinden gelir (I18N.apply). Yerleşimin çoğu mantıksal
   özelliklerle (inset-inline, margin-inline, text-align: start/end) yazıldığı
   için burada yalnızca yönü kendiliğinden dönmeyen üç şey kalır: kaydırma
   animasyonu, LTR kalması gereken teknik alanlar ve çark. */

/* Log satırı LTR'de soldan girer; RTL'de sağdan girmeli. */
[dir="rtl"] .logline:first-child { animation-name: slideInRtl; }
@keyframes slideInRtl { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }

/* Seed, paylaşım metni ve sayısal rozetler teknik içeriktir: RTL'de bile
   soldan sağa okunur (aksi hâlde "#abc-12" → "12-abc#" gibi görünür). */
[dir="rtl"] #seed-input,
[dir="rtl"] #share-text,
[dir="rtl"] .stars,
[dir="rtl"] .tl-age,
[dir="rtl"] .sum-score b { direction: ltr; text-align: start; unicode-bidi: isolate; }

/* Logo bir marka adıdır, cümle değil: iki span (GOAT + INHO) yan yana akar,
   dolayısıyla RTL'de sırası dönüp "INHOGOAT" oluyordu. Yön sabitlenir. */
.logo { direction: ltr; }

/* Çark ve ibresi tümüyle <canvas> içinde çizilir; CSS yönünden etkilenmez ve
   RTL'de AYNALANMAZ — bir saat kadranı gibi her dilde aynı döner. Dilim
   etiketlerinin Arapça/Tayca yüzü wheel.js'in font yığınından gelir. */

/* Arapça yüz Latin'den daha kısa görünür; okunurluk için bir tık büyütülür. */
html[data-script="arabic"] body { font-size: 105%; }
/* Tayca'da üst/alt işaretler satır yüksekliğine sığmıyor. */
html[data-script="thai"] { --line-boost: 1.75; }
html[data-script="thai"] .logline,
html[data-script="thai"] .dc-desc,
html[data-script="thai"] .press-card,
html[data-script="thai"] .forecast-hint { line-height: var(--line-boost); }

/* Hint (Devanagari) ve Bengalce'de matra/işaretler Tayca gibi satırdan taşar. */
html[data-script="devanagari"],
html[data-script="bengali"] { --line-boost: 1.7; }
html[data-script="devanagari"] .logline,
html[data-script="devanagari"] .dc-desc,
html[data-script="devanagari"] .press-card,
html[data-script="devanagari"] .forecast-hint,
html[data-script="bengali"] .logline,
html[data-script="bengali"] .dc-desc,
html[data-script="bengali"] .press-card,
html[data-script="bengali"] .forecast-hint { line-height: var(--line-boost); }

/* Paketli yüzü olmayan alfabeler için sistem yığınları (bkz. i18n.js LANGS
   yorumu). 'Game Sans' başta kalır: Latin rakamlar/kısaltmalar ve emoji hâlâ
   Nunito'dan gelsin, yalnızca kapsanmayan kod noktaları sistem yüzüne düşsün. */
html[data-script="devanagari"] body {
  font-family: 'Game Sans', 'Kohinoor Devanagari', 'Nirmala UI', 'Noto Sans Devanagari', system-ui, sans-serif;
}
html[data-script="bengali"] body {
  font-family: 'Game Sans', 'Bangla MN', 'Nirmala UI', 'Noto Sans Bengali', system-ui, sans-serif;
}
html[data-script="japanese"] body {
  font-family: 'Game Sans', 'Hiragino Sans', 'Yu Gothic', 'Noto Sans JP', 'Meiryo', system-ui, sans-serif;
}
html[data-script="korean"] body {
  font-family: 'Game Sans', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', system-ui, sans-serif;
}
html[data-script="chinese"] body {
  font-family: 'Game Sans', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', system-ui, sans-serif;
}

/* Uzun bileşik sözcükler (de) ve uzun cümleler (fr, es) dar butonları taşırır:
   kartlarda kırılmaya izin verilir, kesilmez. */
.dc-title, .dc-desc, .dc-preview, .btn, .chip, .slice-choice {
  overflow-wrap: anywhere;
  hyphens: auto;
}
/* CJK'da sözcük arası boşluk yoktur; satır sonu zaten her karakterde
   olabilir. 'anywhere' zararsız ama hyphens tire uydurmaya çalışır —
   Devanagari/Bengalce'de de sözlük yok, yanlış yerden bölüyor. */
html[data-script="japanese"] .dc-title, html[data-script="japanese"] .dc-desc,
html[data-script="japanese"] .dc-preview, html[data-script="japanese"] .btn,
html[data-script="japanese"] .chip, html[data-script="japanese"] .slice-choice,
html[data-script="korean"] .dc-title, html[data-script="korean"] .dc-desc,
html[data-script="korean"] .dc-preview, html[data-script="korean"] .btn,
html[data-script="korean"] .chip, html[data-script="korean"] .slice-choice,
html[data-script="chinese"] .dc-title, html[data-script="chinese"] .dc-desc,
html[data-script="chinese"] .dc-preview, html[data-script="chinese"] .btn,
html[data-script="chinese"] .chip, html[data-script="chinese"] .slice-choice,
html[data-script="devanagari"] .dc-title, html[data-script="devanagari"] .dc-desc,
html[data-script="devanagari"] .dc-preview, html[data-script="devanagari"] .btn,
html[data-script="devanagari"] .chip, html[data-script="devanagari"] .slice-choice,
html[data-script="bengali"] .dc-title, html[data-script="bengali"] .dc-desc,
html[data-script="bengali"] .dc-preview, html[data-script="bengali"] .btn,
html[data-script="bengali"] .chip, html[data-script="bengali"] .slice-choice {
  hyphens: none;
}
/* Korece'de sözcük arası boşluk VARDIR: kelime ortasından bölmek yerine
   boşluktan bölünsün. */
html[data-script="korean"] { word-break: keep-all; }

/* ---- Monetizasyon arayüzü ----
   Rewarded 4. draft kartı: gerçek kartlarla aynı ızgarada ama "teklif" olduğu
   belli olsun diye kesikli çerçeve ve sönük zemin (btn-ad diliyle aynı). */
.draftcard-ad {
  background: transparent;
  border: 1px dashed var(--ad);
  color: var(--ad);
  align-items: center;
  justify-content: center;
  font-family: inherit;
  cursor: pointer;
}
.draftcard-ad .dc-title { color: var(--ad); }
.draftcard-ad:hover { border-color: var(--ad); box-shadow: 0 0 10px rgba(255, 210, 61, .2); }

/* Ayarlardaki Pro bloğu: ayraç çizgisiyle ses/dilden ayrılır. */
.pro-block { border-top: 1px solid #2a3143; padding-top: 10px; margin-top: 4px; display: flex; flex-direction: column; gap: 6px; }
.pro-block .good { color: var(--good, #2bd47a); }

/* ---- Anlatı katmanı (Sahne Işıkları, zincirler, veda, anlar) ----
   Ortak dil: hikâye içeriği panel zemininde, SOL kenarında renkli bir şerit
   taşır. Şerit rengi anlamı verir — sarı beklenti, yeşil kazanılmış an,
   kırmızı kırılma. İkonlar emoji: bu satırlar oyun ikon setinin değil
   basının/anlatının dilidir. */
.season-banner {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin: 2px 0 4px;
}
.sb-item {
  font-size: 12px;
  line-height: 1.35;
  background: var(--panel2);
  border: 1px solid #2a3143;
  border-radius: 999px;
  padding: 4px 10px;
}
.sb-arc { border-color: rgba(255, 210, 61, .5); }
.sb-tour { border-color: rgba(77, 163, 255, .5); }
.sb-chase { border-color: color-mix(in srgb, var(--accent) 50%, transparent); color: var(--accent); }

/* Sahne Işıkları şeridi: spin ÖNCESİ beklenti (nabız atar), sonrasında o
   gecenin hikâyesi (sabit). Animasyon prefers-reduced-motion'da durur. */
.spot-banner {
  width: 100%;
  text-align: center;
  font-size: 13px;
  line-height: 1.4;
  border-radius: 10px;
  padding: 7px 10px;
  background: linear-gradient(180deg, rgba(255, 210, 61, .16), rgba(255, 210, 61, .06));
  border: 1px solid rgba(255, 210, 61, .55);
  color: var(--ad);
  animation: spotPulse 2.4s ease-in-out infinite;
}
.spot-banner .spot-when { display: block; font-size: 11px; opacity: .8; }
/* İYİ/KÖTÜ çifti: .spot-bad kırmızısının karşılığı. Bilerek SABİT yeşil —
   spor rengine bağlanmaz (bkz. seri renk sözleşmesi, kural 2). */
.spot-banner.spot-done {
  animation: none;
  background: linear-gradient(180deg, rgba(43, 212, 122, .16), rgba(43, 212, 122, .05));
  border-color: rgba(43, 212, 122, .55);
  color: var(--text);
}
.spot-banner.spot-bad {
  background: linear-gradient(180deg, rgba(227, 87, 75, .16), rgba(227, 87, 75, .05));
  border-color: rgba(227, 87, 75, .55);
}
@keyframes spotPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 210, 61, 0); }
  50% { box-shadow: 0 0 14px rgba(255, 210, 61, .28); }
}
@media (prefers-reduced-motion: reduce) { .spot-banner { animation: none; } }

/* Sıradaki hikâye: kapanışın "neden bir kez daha?" cevabı. Her satır bir
   düğmedir ve doğrudan yapılandırılmış bir koşu başlatır. */
.next-goals { text-align: start; display: flex; flex-direction: column; gap: 7px; }
.next-goals .ng-title {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim);
}
.next-goals .ng-item { text-align: start; justify-content: flex-start; font-size: 13px; }

/* ---------- Bölüm kapanışı ----------
   Büyük gece sahnesiyle aynı iskelet, farklı ton: o bir AN'dır (altın, tekil),
   bu bir DÖNEM özetidir (sakin, çok satırlı). Kariyer başına 3 kez. */
#chapter-scene { z-index: 528; }
.chapter-card { text-align: center; gap: 9px; padding-top: 18px; padding-bottom: 18px; }
.chapter-kicker {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--dim);
}
.chapter-title { margin: 0; font-size: 22px; line-height: 1.2; color: var(--accent); }
.chapter-headline {
  font-size: 14px; line-height: 1.45; font-weight: 700;
  padding: 9px 11px; border-radius: 10px;
  background: var(--panel2); border: 1px solid #2a3143;
  text-align: start;
}
.chapter-status { font-size: 13px; color: var(--dim); }
.chapter-next {
  font-size: 13px; line-height: 1.45; color: var(--text);
  padding-top: 6px; border-top: 1px solid #2a3143;
}

/* ---------- Büyük gece sahnesi ----------
   Şeritten farkı ölçek değil NİYET: şerit spin fazının içinde akıp giden bir
   satır, sahne ise durup bakılan yer. Kariyer başına ~4.8 kez açılır.
   Bloklar sırayla belirir (typewriter DEĞİL — 23 dilde, özellikle Tayca/
   Bengalce/Arapça'da harf harf akış okunaksızlaşır ve okuma hızları çok
   farklıdır; kısa blokların fade'i her dilde aynı çalışır). */
#spot-scene { z-index: 530; }
.spot-scene-card { text-align: center; gap: 10px; padding-top: 18px; padding-bottom: 18px; }
.spot-scene-icon { font-size: 44px; line-height: 1; }
.spot-scene-ctx {
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ad); opacity: .85;
}

.spot-scene-text { font-size: 15px; line-height: 1.5; color: var(--text); }
/* Bağlam öneki ("final: ") kırpıldığı için cümle küçük harfle başlar. Büyütme
   CSS'te yapılır; koddaki toUpperCase Türkçe'de i→I hatası üretirdi (aynı
   çözüm .cap-first'te de var, ama o inline-block — burada blok kutu gerekiyor). */
.spot-scene-text::first-letter { text-transform: uppercase; }
/* Trajik gece aynı sahneyi kullanır, rengi değişir — "büyük an" kutlama
   demek değildir. */
#spot-scene.spot-scene-bad .spot-scene-ctx { color: var(--bad); }
/* Kademeli beliriş: sahne açılınca bloklar sırayla gelir. .spot-scene-shown
   sınıfı hepsini anında görünür yapar — ilk dokunuş bunu tetikler, yani
   dokunuş animasyonu TAMAMLAR, sahneyi kapatmaz. */
.spot-scene-step { opacity: 0; transform: translateY(6px); }
#spot-scene.spot-scene-play .spot-scene-step { animation: spotStep .32s ease forwards; }
#spot-scene.spot-scene-play .spot-scene-ctx { animation-delay: .22s; }
#spot-scene.spot-scene-play .spot-scene-icon { animation-delay: .05s; }
#spot-scene.spot-scene-play .spot-scene-text { animation-delay: .44s; }
/* Hüküm satırı sahnenin SON vuruşudur: hikâye cümlesi okunur, sonra gerçek
   düşer ("TEK geldi / gelmedi"). Gecikme bilinçli uzun (bkz. showSpotScene
   revealTimer 1400 ms) — dokunuş yine anında tamamlar. */
#spot-scene.spot-scene-play .spot-verdict { animation-delay: .95s; }
.spot-verdict {
  margin-top: 6px; padding: 6px 12px; border-radius: 10px;
  font-size: 13px; font-weight: 700; letter-spacing: .01em;
}
.spot-verdict-hit { background: rgba(90, 200, 120, .14); color: var(--good, #5ac878); }
.spot-verdict-miss { background: rgba(255, 120, 100, .12); color: var(--bad, #ff7864); }
#spot-scene.spot-scene-shown .spot-scene-step { opacity: 1; transform: none; animation: none; }
@keyframes spotStep { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  #spot-scene .spot-scene-step { opacity: 1; transform: none; animation: none !important; }
}

/* Sezon kartındaki an satırları: kupa satırlarıyla aynı hizada ama emoji
   ikonlu — "bu bir ödül değil, bir an" ayrımı görsel olarak da korunur. */
.moment-ico { font-size: 16px; line-height: 1; flex: 0 0 auto; }
#result-card .moment { justify-content: flex-start; text-align: start; font-size: 13px; }
/* Sezonun MANŞETİ: kartın en üstünde, istatistiklerden önce ve belirgin.
   Kart eskiden düz bir listeydi ve "final kaybedildi" ile "3 sakatlık" aynı
   ağırlıktaydı — hikâye istatistiklerin arasında kayboluyordu. Ekran ya da
   dokunuş eklemeden yalnızca sıralama verir. */
.result-headline {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 11px 12px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 210, 61, .10), rgba(255, 210, 61, .03));
  border: 1px solid rgba(255, 210, 61, .32);
  text-align: start;
}
.result-headline .rh-ico { font-size: 22px; line-height: 1.15; flex: 0 0 auto; }
.result-headline .rh-text {
  font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--text);
  /* ::first-letter blok/inline-block kutu ister; ama inline-block flex içinde
     içeriği kadar yer kaplayıp KÜÇÜLMEZ — uzun manşet kartı taşırıyordu
     (tarayıcı doğrulamasında görüldü). flex + min-width:0 sarmayı geri verir. */
  display: inline-block;
  flex: 1 1 auto; min-width: 0;
  overflow-wrap: anywhere;
}
.result-headline .rh-text::first-letter { text-transform: uppercase; }
/* Destek katmanı: manşetin altında kalan anlar okunur ama yarışmaz. */
#result-card .moment-sub { font-size: 12px; opacity: .74; }

/* Transfer hikâye etiketi: teklifin üstünde, kararın çerçevesi. */
.offer-tag {
  display: block;
  font-size: 12px;
  line-height: 1.35;
  margin-bottom: 6px;
  padding: 4px 8px;
  border-inline-start: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-radius: 4px;
}
.offer-tag-warn { border-inline-start-color: var(--danger); background: rgba(227, 87, 75, .1); }

/* Kapanış: veda cümlesi + kariyerin dönüm noktaları. */
.sum-farewell {
  margin: 8px auto 4px;
  max-width: 340px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--panel2);
  border: 1px solid #2a3143;
}
.fw-title { font-size: 14px; font-weight: 700; }
.fw-text { font-size: 12px; line-height: 1.45; color: var(--dim); margin-top: 3px; }
.sum-moments { margin: 6px auto 0; max-width: 340px; text-align: start; }
.sum-moment {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 12px;
  line-height: 1.45;
  padding: 3px 0;
  border-bottom: 1px solid rgba(42, 49, 67, .6);
}
.sum-moment:last-child { border-bottom: none; }
.moment-age { color: var(--dim); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.chip-story { border: 1px solid rgba(255, 210, 61, .45); }

/* Röportaj kupürleri: gazete kesiği dili — sol kenarda ton şeridi, alıntı
   italik, altında imza satırı (ad · sıfat). Ton rengi setin duygusal
   dengesini gözle okutur: bir kariyerde hem alkış hem sitem vardır. */
#interview-note { margin-bottom: 8px; text-align: start; }
.itv-cut {
  text-align: start;
  margin-bottom: 10px;
  padding: 9px 11px;
  border-radius: 10px;
  background: var(--panel2);
  border: 1px solid #2a3143;
  border-inline-start: 3px solid var(--dim);
}
/* Son Söz kartı: kapanış ekranında dokunuşsuz görünen tek kupür. Röportaj
   kutusunun aynı dilini konuşur (aynı ton renkleri) ama kart olarak durur,
   panel içinde değil — oyuncu bir düğmeye basmadan önce görür. */
.last-word {
  text-align: start;
  border-inline-start: 3px solid var(--dim);
}
.last-word .itv-quote { font-size: 14px; }
/* Kupür panelin kapısıysa dokunulabilir görünür. Afordans SESSİZ: kart
   düğmeye dönüşmemeli — kapanış ekranının tonu bir alıntıdır, araç çubuğu
   değil. İşaret tek satırlık "+N tane daha" ve hafif bir basma tepkisi. */
.last-word-open { cursor: pointer; }
.last-word-open:active { transform: scale(.995); }
.last-word-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.itv-more {
  margin-top: 6px; font-size: 12px; font-weight: 700;
  color: var(--accent); display: flex; align-items: center; gap: 4px;
}
.itv-more::after { content: '›'; font-size: 15px; line-height: 1; }
.itv-warm { border-inline-start-color: var(--accent); }
.itv-mixed { border-inline-start-color: var(--ad); }
.itv-cold { border-inline-start-color: var(--danger); }
.itv-quote { font-size: 13px; line-height: 1.55; font-style: italic; }
.itv-sign {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px;
  margin-top: 7px;
  font-size: 11px;
  color: var(--dim);
}
.itv-sign b { color: var(--text); font-size: 12px; }
.itv-ico { font-size: 13px; }
.itv-role::before { content: "· "; }
.itv-tone { margin-inline-start: auto; }

/* {ctx} ile başlayan anlatı cümleleri ("final: ...") cümle başında büyük
   harfle okunmalı. Dönüşüm CSS'te yapılır ki tarayıcı html[lang] eşlemesini
   kullansın: JS'te toUpperCase, Türkçe'de "i"yi "I"ya çevirip hata üretirdi. */
.cap-first { display: inline-block; }   /* ::first-letter yalnız blok kutularda işler */
.cap-first::first-letter { text-transform: uppercase; }

/* Zincir çipindeki hedef: "bu yazı nasıl kapanır?" sorusunun görünür cevabı. */
.sb-goal { color: var(--accent); font-weight: 700; white-space: nowrap; }
.tl-heart { font-size: 14px; }

/* ---- v3: ödül yarışı, tribün statüsü, lig hasreti ---- */
.sb-race { border-color: rgba(255, 210, 61, .5); }
.sb-derby { border-color: rgba(227, 87, 75, .5); }
.offer-fan {
  display: block;
  font-size: 12px;
  line-height: 1.35;
  margin-bottom: 6px;
  padding: 4px 8px;
  border-inline-start: 3px solid #4da3ff;
  background: rgba(77, 163, 255, .08);
  border-radius: 4px;
}
.offer-fan-high { border-inline-start-color: var(--ad); background: rgba(255, 210, 61, .1); }
.fw-fan { font-size: 12px; color: var(--dim); margin-top: 5px; }

/* ---------- Tutorial katmanı: açılış paneli, coach mark, pasif ipucu rozeti ----------
   Bkz. docs/ftue-tutorial-plan.md. Tasarım sözleşmesi: akışı kesen ipucu
   (coach mark) koşu başına birkaç taneyle sınırlıdır; geri kalan her bilgi
   pasif "?" rozetiyle verilir ve oyuncu isterse dokunur. */

/* Açılış/açılım paneli: kararın değil, anlatının paneli — bu yüzden kartı
   ortalanmış ve nefesli, arkası normal panellerden daha koyu. */
.story-overlay { background: rgba(4, 6, 10, 0.94); z-index: 900; }
.story-card { text-align: center; gap: 14px; padding: 26px 22px; }
.story-card h2 { font-size: 26px; letter-spacing: 0.5px; color: var(--accent); }
.story-card p { font-size: 15px; line-height: 1.55; white-space: pre-line; }
.story-card .story-quote { font-style: italic; }
/* Kariyer açılışındaki kimlik satırı slogan değildir: düz yazılır ve
   uzun adlarda sarar (mevki · bayrak ülke · köken · yıldız). */
.story-card #story-sub { line-height: 1.5; }
.story-card .btn { margin-top: 6px; }

/* Coach mark: hedefi delip kalanı karartan tek kutu. Karartma dev bir
   box-shadow ile yapılır (ayrı bir maske katmanı yok) — böylece delik
   hedefin gerçek kutusuna piksel piksel oturur. */
.coach-overlay { position: fixed; inset: 0; z-index: 950; }
.coach-spot {
  position: fixed; border-radius: 14px;
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 9999px rgba(4, 6, 10, 0.86);
  transition: all 0.18s ease;
  pointer-events: none;
}
/* Hedefsiz coach mark (ekranın tamamı bağlam): delik ekran dışına itilir. */
.coach-spot.coach-nospot { inset: auto; width: 0; height: 0; border: 0; top: -50px; left: -50px; }
.coach-balloon {
  position: fixed; max-width: 300px;
  background: var(--panel); border: 1px solid var(--accent);
  border-radius: 12px; padding: 12px 14px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
  animation: fadeUp 0.2s ease both;
  display: flex; flex-direction: column; gap: 9px;
}
.coach-balloon p { font-size: 13px; line-height: 1.5; }
.coach-balloon .btn { align-self: flex-end; }

/* Pasif ipucu rozeti: akışı kesmez, nabız atarak varlığını duyurur ve
   dokununca mevcut #tip-bubble balonunu açar (data-tip). */
.hint-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-inline-start: 5px;
  border-radius: 50%; border: 1px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent); font-size: 11px; font-weight: 700; line-height: 1;
  vertical-align: middle; cursor: help; flex: none;
  animation: hintPulse 2.4s ease-in-out infinite;
}
@keyframes hintPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent); }
  50% { box-shadow: 0 0 0 5px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .hint-badge { animation: none; }
  .coach-spot { transition: none; }
}

/* Draft kartının altındaki pasif ipucu satırı: karta değil, kartın DIŞINA
   konur — kart bir düğmedir, içine tıklanabilir rozet koymak seçimi
   yanlışlıkla yaptırırdı. */
.dc-wrap { display: flex; flex-direction: column; }
.dc-hints { display: flex; justify-content: flex-end; gap: 6px; margin-top: 3px; padding-inline-end: 4px; }

/* Düello sonucu: davetle gelinen seed oynandığında ikili karşılaştırma.
   Kazanmak da kaybetmek de gösterilir — "tekrar dene" dürtüsünü asıl kayıp
   üretir, o yüzden kaybı gizlemek yanlış olurdu. */
.duel-result { text-align: center; border-inline-start: 3px solid var(--dim); }
.duel-result .duel-line { font-size: 14px; font-weight: 700; line-height: 1.4; }
.duel-result.duel-won { border-inline-start-color: var(--accent); }
.duel-result.duel-lost { border-inline-start-color: var(--ad); }

/* --- Build katmanı: doktrin doruğu + aile okunurluğu --- */
.sb-badge-doc { inset-inline-start: 4px; inset-inline-end: auto; font-size: 10px; letter-spacing: -.5px;
  background: rgba(232,185,60,.18); border-radius: 8px; padding: 0 4px; }
/* Sinerji imi (canlı geri bildirim 5): tetiklenen pasif bonusun ikonu yuvada
   durur ve oturduğu anda kısa bir vuruşla parlar — an görünmeli. */
.sb-badge-syn { top: auto; bottom: -7px; inset-inline-start: 4px; inset-inline-end: auto;
  font-size: 11px; background: rgba(78,205,196,.16); border-radius: 8px; padding: 0 3px;
  animation: synPop .55s ease; }
@keyframes synPop {
  0% { transform: scale(.4); opacity: 0; }
  55% { transform: scale(1.35); opacity: 1; }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .sb-badge-syn { animation: none; } }
.sb-fam { position: absolute; bottom: 3px; left: 14%; right: 14%; height: 3px;
  border-radius: 2px; opacity: .85; }
.sb-fam-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 6px; vertical-align: baseline; }
.sd-fam { font-size: 12px; color: var(--dim); margin-top: 4px; }
.fam-gain  { background: #58c470; }
.fam-team  { background: #e8b93c; }
.fam-hurt  { background: #d0342c; }
.fam-slump { background: #4a6fa5; }
.fam-noise { background: #b05aa0; }
.fam-guard { background: #7d97c9; }
.fam-decay { background: #5a7a8a; }
.fam-void  { background: #6a6f7a; }