* { 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 ve Hint yüzleri paket DIŞIDIR ve bu
   bilinçlidir: zh/ja/ko/hi/bn ile Yunanca hiçbir @font-face aralığına
   girmedikleri için sistem fontuna düşerler (PingFang/MS YaHei, Hiragino/Yu
   Gothic, Apple SD Gothic/Malgun, Kohinoor/Nirmala UI, Bangla MN). Subset'i
   bile 300KB–5MB tutan beş yüzü paketlemek, her platformda hazır duran
   sistem yüzü varken pakete ödenecek en pahalı bedeldi. Bkz. i18n.js'teki
   script ↔ font notu — script alanı bu eşlemenin CSS kancasıdır.
   Üretimde paketlenenler 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 futbolun bandında kalır — S %50-70, L %45-58. Bandın
      üstü neona kayar: hem "AI ile üretilmiş" hissi 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 (gridiron) */
  --bg: #0c1016;
  --panel: #161d28;
  --panel2: #202b3c;
  --accent: #396bd0;
  --accent2: #a82f35;
  --dim: #8d99a8;
}
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 (pano çözülmesi, transfer makarası, dilim girişi) 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/ekran giriş-çıkışı, kademeler).
   Oyun geri bildirimi olan kareler (makara, duruş vuruşu, yuva 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ı olur, sınıf düşer ama ekranda hiçbir şey olmaz.
   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 stadyum 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. */
/* Kutu 310 → 290: jant ve ibre kalktığı için disk artık kutuyu dolduruyor
   (wheel.js r = s/2 − 2, eskiden −14). Görünen disk aynı boyutta kalırken
   ~20px dikey bütçe geri kazanılır. Kutuya bağlı DİĞER değerler aynı anda
   senkronlanır: çözülme sahnesinin negatif marjı ve transfer yuvasının
   genişliği (aşağıda) bu sayıyı okur. */
.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 */
}

.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 bölüm
   kapanışının seçim tepsisi 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ır, seçilen epik kart hiçbir onay
   işareti almazdı. */
.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ı olsa da kartlar hiç sönmezdi. */
.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; }

/* 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. Perk yoksa bölüm
   hiç çizilmez (bkz. main.js renderWheelInfo). */
.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ıyor ("Fragile / Genius") ve beş dilin
   çoğunda ad Türkçesinden 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; }

/* ---------- 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); }

/* 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 — aynı satır biçimi, kendi çerçevesi yok:
   özet kutusu zaten bir kart, ikinci bir kenarlık gürültü olurdu. */
.lb-mini { width: 100%; margin: 6px 0 8px; text-align: start; }
.lb-mini:empty { margin: 0; }
/* İlk beş ile "sen buradasın" satırının arası: listenin kesildiğini söyler. */
.lb-sep { height: 0; border-top: 1px dashed rgba(139, 147, 165, .45); margin: 5px 0; }
.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 §4.3). İ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); box-shadow: 0 0 12px rgba(57, 107, 208, .22);
}
.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
   oyunun kendi çıkartma-albümü dilinde kalır. Yuvalar spinsPerSeason
   kadardır — üçe sabitlenmiş bir makara takımı DEĞİLDİR, Ç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 duruşlar belirsizliği azaltır, sonuncusu 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 IŞIK 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 son
   sonucun darbesi, ekranın ana nesnesinin geri gelmesiyle aynı ana denk gelip
   onunla yarışıyordu. Slot makinesi son grid'i kahraman olarak tutar.

   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. Geçişte hiçbir şey yerinden oynamaz.

   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). Kendiliğinden geri gelmez
   — kendiliğinden gelmesi tam olarak düzeltilen sorundu. */
#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öş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ı yeriydi. Metin yerine
   TEK HARF — "Çark Bilgisi" beş 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); }
/* Ç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ı.
   Bulanıklık HIZLA ORANTILI olmalı (gerçek hareket bulanıklığı gibi):
   1.2 px, 30 karelik yoğunlukta ölçüldü. */
.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çilebiliyor 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%);
}

/* Takım dilimi bu pencerede: DURMADAN ÖNCE altına döner. growIn'in yeni evi —
   "bu spin şanslıydı" bilgisi animasyonda yaşamaya devam eder. */
.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 ayrıntı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(57, 107, 208, 0); }
  50% { box-shadow: 0 0 0 4px rgba(57, 107, 208, .18); }
}

/* İYİ ton --accent (mavi), --accent2 DEĞİL: gridiron paletinde --accent2
   koyu kırmızıdır (#a82f35) ve kötü tonun --danger'ıyla (#e3574b) neredeyse
   aynı okunur — "kazandın" ile "sakatlandın" aynı renge düşerdi. Kardeş
   oyunda accent2 yeşil olduğu için orada sorun yoktu; renk anlamı paletten
   gelir, sabitten değil. */
.sb-slot.good { border-color: var(--accent); }
.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. */

/* Takım 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); }
/* AKARKEN NEFES ALIR. Duyurulmuş gecenin yuvası diğerlerinden uzun sürüyor
   (bkz. SLOT_SPECIAL); bu bekleyişin gerilim olarak okunması için uzadığının
   GÖRÜNMESİ gerekir — sessizce uzun süren bir pencere gerilim değil,
   "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));
}

/* --- Build katmanı: aile okunurluğu + doktrin doruğu ---

   AİLE ŞERİDİ. COMBO_FAMILY bugüne kadar yalnız motorun içinde yaşıyordu;
   yuvanın altındaki 3px çizgi onu ilk kez gözle görülür yapar. Şerit
   BİLİNÇLİ OLARAK SESSİZ: 3px, %85 opaklık, yuvanın ortasında kısa bir
   dilim. Sonucun kendisiyle yarışmaz, ama iki yuvanın aynı renkte olduğu
   bir bakışta okunur — Metronom/Ritim'in "aile" kelimesi ancak böyle
   anlam kazanır.

   RENKLER footwheel'le BİREBİR aynıdır ve bu bir kopya değil, zaten var
   olan mürekkebin adlandırılmasıdır: hurt/slump/noise/guard/decay
   renklerinin beşi gridiron'un kendi SPECIAL_SLICES paletinde de tam
   olarak bu değerlerdir (kirmizi, melankoli, skandal, koruma, paslanma).
   Şerit böylece çarkın dilim renkleriyle aynı dili konuşur. */
.sb-fam {
  position: absolute; bottom: 3px; left: 14%; right: 14%; height: 3px;
  border-radius: 2px; opacity: .85;
}
/* Ayrıntı satırındaki nokta: şeridin rengi ile ADI aynı satırda buluşur —
   renk tek başına bir sözlük değildir, karşılığı bir kez yazılmalı. */
.sb-fam-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-inline-end: 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; }

/* Doruk rozeti: doktrin katmanının ×2 anı yuvada DURUR. Sayının büyümesi
   yetmez — oyuncu "hangi sonuç ikiye katlandı" sorusunu panoya bakarak
   cevaplayabilmeli. Sol üstte durur ki sağ üstteki işaretli gece yıldızıyla
   (.sb-badge) çakışmasın. */
.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;
}

/* 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 sonuçlarının 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 ATH +4"). İki ayrı ATH +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; }

/* ---------- Transfer yuvası (§19 tek animasyon dili) ----------
   Sezon panosunun TEK PENCERELİ kardeşi: aynı .sb-slot / .sb-window /
   .sb-track sınıfları, aynı hareket eğrisi, aynı fren ve duruş vuruşu.
   Genişlik çarkın kutusuyla senkron (min(72vw, 290px)) — ikisi alt alta
   duran tek bir sütun okunmalı. */
.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;
}
/* Çevirmeden önceki bekleyen hâl: kesikli çerçeve + soru işareti. */
.tb-idle { font-size: 26px; color: var(--dim); }

/* 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.
   Yuva da küçülür ama KALIR: kararın kaynağı ekranda görünür durur. */
#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; }
#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; }
  /* Kısa ekran: pano yuvaları alçalır, yazı küçülür — kırpma değil sıkışma
     (kırpılmış içerik kaybolmuş içeriktir). */
  .season-board { gap: 9px; }
  .sb-slot { min-height: 62px; padding: 6px 3px 5px; }
  .sb-ico { width: 26px; height: 26px; }
  .sb-name { font-size: 10px; }
  #phase-spin.resolving .sb-slot,
  #phase-spin.holding .sb-slot { min-height: 88px; }
  .bigstat { font-size: 26px; }
}
@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: kariyer döngüsü (karar → pano → sonuç → offseason) 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ı: pano 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 {
  --club-primary: #2bd47a;
  --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;
}

.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/Best XI 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;
  max-height: calc(82vh / var(--z));
  /* Güvenli alan + dolgu düşülür: çentikli cihazda uzun panel taşmaz. */
  max-height: min(
    calc(82dvh / var(--z)),
    calc((100dvh - 40px - 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ı: sıralı beliriş adımları
   (ikon → bağlam → cümle → düğme) `both` dolgusuyla taban durumda opacity:0
   taşır, yani sahne solarken içi boşalmış gibi görünürdü. Son kare
   dondurulur — sahne dolu hâliyle solar. */
#spot-scene.closing .spot-scene-ico,
#spot-scene.closing .spot-scene-ctx,
#spot-scene.closing .spot-scene-line,
#spot-scene.closing #btn-spot-scene { 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 pickEcho → 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; }
}
#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; }

/* ---------- Best XI paneli: geçmiş kariyerlerden rüya takım ---------- */
.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; }
.bestxi-pitch {
  background: linear-gradient(#1d5e34, #133f26);
  border: 2px solid #2e7d49; border-radius: 12px;
  padding: 12px 6px; display: flex; flex-direction: column; gap: 10px;
  /* Orta yuvarlak + orta çizgi: ekstra elemansız, salt fon detayı. */
  background-image:
    radial-gradient(circle at 50% 50%, transparent 46px, rgba(255,255,255,0.12) 47px, rgba(255,255,255,0.12) 48px, transparent 49px),
    linear-gradient(rgba(255,255,255,0) calc(50% - 1px), rgba(255,255,255,0.12) 50%, rgba(255,255,255,0) calc(50% + 1px)),
    linear-gradient(#1d5e34, #133f26);
}
.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(255, 255, 255, 0.4); }

/* ---------- 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); }
/* Doktrin çipi: sezonun geçici bilgilerinden AYRI okunmalı (kariyer boyu
   taşınan tek kural). Dolu zemin ve kalın ad onu şeridin sabiti yapar. */
.sb-doc {
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, var(--panel2));
  font-weight: 600;
  cursor: help;
}
.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); }
}

/* ---------- Büyük gecenin sahnesi (B1) ----------
   Şerit güncellemesi doruk noktasını GÖSTERMİYORDU; sahne ona bakılacak yeri
   verir. Bloklar sırayla fade ile gelir — typewriter YOK (çok dilli üründe
   harf harf akış okunaksızdır ve okuma hızları çok farklıdır).

   .spot-scene-fast: dokunuş animasyonu TAMAMLAR (gecikmeleri sıfırlar),
   kapatmaz — sabırsız oyuncu sahneyi atlamaz, hızlandırır. */
.spot-scene { background: rgba(6, 8, 12, .88); }
.spot-scene .spot-scene-card {
  text-align: center;
  max-width: 340px;
  padding: 22px 18px 18px;
  border: 1px solid rgba(255, 210, 61, .35);
  background: linear-gradient(180deg, color-mix(in srgb, var(--ad) 7%, var(--panel)), var(--panel));
}
.spot-scene.spot-scene-bad .spot-scene-card {
  border-color: rgba(227, 87, 75, .45);
  background: linear-gradient(180deg, color-mix(in srgb, var(--danger) 8%, var(--panel)), var(--panel));
}
.spot-scene-ico { font-size: 46px; line-height: 1; }
.spot-scene-ctx {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ad);
}
.spot-scene.spot-scene-bad .spot-scene-ctx { color: var(--danger); }
.spot-scene-line {
  margin: 12px 0 18px;
  font-size: 17px;
  line-height: 1.45;
  color: var(--text);
}
/* Sıralı giriş: ikon → bağlam → cümle → düğme. */
.spot-scene .spot-scene-ico,
.spot-scene .spot-scene-ctx,
.spot-scene .spot-scene-line,
.spot-scene #btn-spot-scene { animation: spotSceneIn .42s ease-out both; }
.spot-scene .spot-scene-ico { animation-delay: .05s; }
.spot-scene .spot-scene-ctx { animation-delay: .40s; }
.spot-scene .spot-scene-line { animation-delay: .75s; }
.spot-scene #btn-spot-scene { animation-delay: 1.25s; }
.spot-scene.spot-scene-fast .spot-scene-ico,
.spot-scene.spot-scene-fast .spot-scene-ctx,
.spot-scene.spot-scene-fast .spot-scene-line,
.spot-scene.spot-scene-fast #btn-spot-scene { animation-delay: 0s; animation-duration: .12s; }
@keyframes spotSceneIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
/* Hareket azaltma: sıra korunur ama bekleme yok — düğme hemen erişilebilir. */
@media (prefers-reduced-motion: reduce) {
  .spot-scene .spot-scene-ico,
  .spot-scene .spot-scene-ctx,
  .spot-scene .spot-scene-line,
  .spot-scene #btn-spot-scene { animation: none; }
}
@media (prefers-reduced-motion: reduce) { .spot-banner { animation: none; } }

/* ---------- Bölüm kapanışı ----------
   Büyük gece sahnesiyle aynı iskelet, farklı ton: o bir AN'dır (altın, tekil,
   sıralı giriş), bu bir DÖNEM özetidir (sakin, çok satırlı, animasyonsuz).
   Kariyer başına 3 kez. Animasyon bilinçli olarak YOK: dört satırlık bir
   özeti sırayla belirtmek okuma ritmini bölerdi ve sahne zaten akışı
   durduruyor. */
#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;
}

/* 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; }

/* MANŞET: sezonun tek ana anı. Kalan an satırlarından TİPOGRAFİ ile ayrılır
   (13px → 15px, ağırlık ve kontrast) — ek ekran, ek dokunuş, ek metin yok.
   Yan çizgi kupa satırlarıyla karışmasını önler: kupa bir ödül, bu bir an. */
#result-card .moment-headline {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 8px 0 4px;
  padding: 7px 10px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  text-align: start;
  color: var(--text);
  border-inline-start: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-radius: 0 8px 8px 0;
}
#result-card .moment-headline .moment-ico { font-size: 19px; margin-top: 1px; }

/* Koçun duruşu rol satırının ALTINDA, kendi satırında. Yalnız kanaati olan
   koç yazılır (nötr sessizdir) — bu yüzden satır göründüğünde bir şey
   söylüyordur ve renk onu taşır. */
.coach-note {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  line-height: 1.35;
}
.coach-believer { color: var(--accent); }
.coach-doubter { color: var(--danger); }

/* 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);
}
/* AÇILIM İLANI (kapanış ekranı, yalnız ilk kariyer). Düğme DEĞİL: kenarlığı
   yok, dokunma hedefi yok — okunacak tek satır. Vurgu rengi "yeni içerik"
   sinyalidir ve draft'taki ✨ rozetiyle aynı dili konuşur. */
.unlock-note { margin: 4px 0 10px; }
.ng-unlock {
  font-size: 13px; line-height: 1.5; color: var(--accent);
  text-align: center; padding: 6px 10px;
  background: var(--panel); border-radius: 10px;
}
.ng-unlock + .ng-unlock { margin-top: 4px; }

/* Son Söz: panelin içindeki kupürle AYNI kutu (itv-cut) ama kapanış
   ekranında tek başına durur — bu yüzden biraz daha nefes alır ve alıntı
   punto olarak bir tık büyüktür. Tam set 🎙️ düğmesinde kalır. */
.closing-cut { margin: 4px 0 12px; }
.closing-cut .itv-quote { font-size: 14px; }
/* Kupür bir KAPI olduğunda: sessiz bir afordans. Düğme değil — kapanış
   ekranının tonu bir alıntıdır, araç çubuğu değil; tek satır + chevron yeter. */
.closing-cut-open { cursor: pointer; }
.closing-cut-open:active { transform: scale(.99); }
.closing-cut .itv-more {
  margin-top: 6px; font-size: 12px; color: var(--dim);
  display: flex; align-items: center; gap: 4px;
}
.closing-cut .itv-more::after { content: '›'; font-weight: 800; }
[dir="rtl"] .closing-cut .itv-more::after { content: '‹'; }

.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; }