/* =====================================================================
   SENARYOLAR — MASAÜSTÜ DÜZENİ (29 Eyl 2026)
   =====================================================================
   Ölçüldü (canlı, 1440): 3 dar sütunda (362px) ortam/cümle bilgisi
   satırların çoğunda "…" ile KESİLİYORDU; süzgeç kartının başlığı sayfa
   başlığını tekrarlıyordu; seviye grubu yalnızca "A1 · 20 senaryo".
   Oynarken senaryo adı kartta, sayfa başlığında "Senaryolar" yazıyordu.
   Liste KURAL GEREĞİ satır listesi kalır (OZELLIKLER.md "100 senaryoda da
   okunur") — değişen: iki satırlı satır, grup ilerlemesi, tek satır süzgeç.
   İşaretleme telefonla ortak; yeni parçalar telefonda gizli.
   ===================================================================== */
.sn-lvl-ad, .sn-grup-ilerleme, .sn-bulunan { display: none; }

@media (min-width: 941px) {
  /* ---------- süzgeç: tek satır araç çubuğu ---------- */
  #view > .sn-suzgec { padding: var(--sp-4); margin: 0 0 var(--sp-5); }
  #view > .sn-suzgec > h2, #view > .sn-suzgec > .sub { display: none; }
  #view > .sn-suzgec > .filters { margin: 0; flex-wrap: nowrap; }
  #view > .sn-suzgec > .filters > input { flex: 1 1 auto; min-width: 0; }
  #view > .sn-suzgec .sn-bulunan {
    /* satır kuralı çocuklara 44px veriyor — yazı kutunun ortasında dursun */
    display: inline-flex; align-items: center; flex: none; margin-left: var(--sp-2);
    font-size: var(--fs-base); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap;
  }

  /* ---------- seviye grubu başlığı ---------- */
  .sn-liste { gap: var(--sp-8); }
  .sn-grup { gap: var(--sp-3); }
  .sn-grup-bas { gap: var(--sp-3); }
  .sn-lvl-ad { display: inline; font-size: var(--fs-md); font-weight: 600; color: var(--text); }
  .sn-adet { font-size: var(--fs-base); color: var(--muted); }
  /* inline (flex DEĞİL): flex aralığı "6" ile "/ 20" arasına da giriyordu */
  .sn-grup-ilerleme {
    display: inline; flex: none; white-space: nowrap;
    font-size: var(--fs-base); color: var(--muted); font-variant-numeric: tabular-nums;
  }
  .sn-grup-ilerleme b { color: var(--text); font-weight: 600; }
  /* ray --line: --card2 açık temada sayfa zeminiyle aynı, 0'da çubuk görünmüyordu */
  .sn-grup-bar { display: inline-block; vertical-align: middle; margin-left: var(--sp-2); width: 96px; height: 6px; border-radius: var(--r-full); background: var(--line); overflow: hidden; }
  .sn-grup-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }

  /* ---------- satır: iki satır, hiçbir şey kesilmez ---------- */
  .sn-satirlar { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--sp-4); }
  .sn-satir { height: auto; min-height: 56px; padding: var(--sp-2); gap: var(--sp-3); }
  .sn-ic { width: 32px; height: 32px; }
  .sn-ic .ic { width: 16px; height: 16px; }
  .sn-orta { flex-direction: column; align-items: flex-start; gap: 2px; overflow: visible; }
  .sn-ad { font-size: var(--fs-kontrol); white-space: normal; line-height: 1.3; }
  .sn-meta { font-size: var(--fs-sm); color: var(--muted); white-space: normal; overflow: visible; }
  .sn-skor { font-size: var(--fs-sm); }
  .sn-skor .ic { width: 12px; height: 12px; }
  .sn-skor-bos { width: 44px; }

  /* ---------- oynama: geri düğmesi başlık satırında, ad sayfa başlığında ---------- */
  .sn-oyun .sn-bas > .sn-geri .tb-ok-sol { display: inline-flex; transform: rotate(90deg); }
  .sn-oyun .sn-bas > .sn-geri { order: -1; min-height: var(--ctrl-h); }
  .sn-oyun .sn-bas-yazi > b { display: none; }
  .sn-oyun .sn-bas-yazi > span { font-size: var(--fs-base); color: var(--muted); }
  .sn-oyun .sn-bas > #cvRestart { min-height: var(--ctrl-h); }
  .sn-oyun .sn-sayac-sol { display: none; }
  .sn-oyun .sn-sayac:not(:has(.sn-sayac-sag)) { display: none; }
}
@media (min-width: 941px) and (max-width: 1279px) {
  .sn-satirlar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =====================================================================
   SENARYOLAR — TELEFON VE TABLET (30 Eyl 2026)
   =====================================================================
   Olculdu (390): satir TEK satirdi, "Tanisma & Sohbet · 5 cumle" sag
   kenardan tasiyor ve puan (%100) hic gorunmuyordu; seviye grubunda
   ilerleme yoktu. Tablet dikeyde (768) tek sutun, genislik bos.
   Masaustunun iki satirli satiri ve grup ilerlemesi buraya da gelir;
   telefonda tek, tablette iki sutun. Suzgec kartinin basligi ekran
   basligini tekrarliyordu (`#mBaslik` zaten "Senaryolar 6 / 60"). */
@media (max-width: 940px) {
  #view > .sn-suzgec > h2 { display: none; }
  #view > .sn-suzgec > .sub { margin-bottom: var(--sp-3); }

  .sn-liste { gap: var(--sp-6); }
  .sn-grup { gap: var(--sp-2); }
  .sn-grup-bas { gap: var(--sp-2); }
  .sn-lvl-ad { display: inline; font-size: var(--fs-md); font-weight: 600; color: var(--text); }
  .sn-grup-ilerleme {
    display: inline-flex; align-items: center; flex: none; white-space: nowrap;
    font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums;
  }
  .sn-grup-ilerleme b { color: var(--text); font-weight: 600; margin-right: 3px; }
  .sn-grup-bar { display: inline-block; margin-left: var(--sp-2); width: 48px; height: 6px; border-radius: var(--r-full); background: var(--line); overflow: hidden; }
  .sn-grup-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }

  .sn-satirlar { grid-template-columns: minmax(0, 1fr); }
  .sn-satir { height: auto; min-height: 56px; padding: var(--sp-2); gap: var(--sp-3); }
  .sn-ic { width: 32px; height: 32px; }
  .sn-ic .ic { width: 16px; height: 16px; }
  .sn-orta { flex-direction: column; align-items: flex-start; gap: 2px; overflow: visible; }
  .sn-ad { font-size: var(--fs-kontrol); white-space: normal; line-height: 1.3; }
  .sn-meta { font-size: var(--fs-sm); color: var(--muted); white-space: normal; overflow: visible; }
  .sn-skor { font-size: var(--fs-sm); }
  .sn-skor .ic { width: 12px; height: 12px; }
  .sn-skor-bos { width: 44px; }
}
/* telefon: grup basligi sigsin diye adet yazisi duser (ilerleme zaten sayiyor) */
@media (max-width: 600px) {
  .sn-adet { display: none; }
}
@media (max-width: 374px) {
  .sn-grup-bar { display: none; }
}
/* tablet dikey: iki sutun */
@media (min-width: 601px) and (max-width: 940px) {
  .sn-satirlar { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-4); }
  .sn-adet { font-size: var(--fs-sm); color: var(--muted); }
}

/* OYUN KARTI "EYLEM USTE" SIRALAMASINDAN MUAF (style.css `.card > .act
   { order: 2 }`): "Devam / Tekrar Dinle / Cik" diyalogun ONUNE cikiyordu —
   kullanici once dugmeyi, sonra okuyacagi repligi goruyordu. Ozet karti
   (`.sn-ozet`) ayni gerekceyle zaten muaf. Senaryo adi ekran basliginda
   (`#mBaslik` h1) — kart icindeki tekrar gizli (masaustu gibi). */
@media (max-width: 940px) {
  /* (0,2,0) — style.css `.card > .act` (0,2,0) ile esit, dosya sonra yuklenir */
  .card.sn-oyun > * { order: 0; }
  /* telefon alistirma deseni ikincil dugmeyi 52px IKONA ceviriyor (metin
     gizli); senaryodaki "Temizle"nin ikonu yok, bos kare kaliyordu */
  .sn-cevap .ex-actions > .btn-ghost:not(#cvQuit) { width: auto; min-width: 0; padding: 0 var(--sp-4); font-size: var(--fs-kontrol); }
  /* aradaki bosluk ogesi "Kontrol Et"i kirpiyordu — telefonda birincil kalan genisligi alir */
  .sn-cevap .ex-actions > .sn-eylem-ara { display: none; }
  .sn-cevap .ex-actions > .btn-primary { flex: 1 1 auto; min-width: max-content; }
  .sn-oyun .sn-bas-yazi > b { display: none; }
  .sn-oyun .sn-bas-yazi > span { font-size: var(--fs-sm); color: var(--muted); }
}
/* 320: uc dugme tek satira sigmiyordu — birincil tam satir, digerleri altta */
@media (max-width: 374px) {
  .sn-cevap .ex-actions { flex-wrap: wrap; }
  .sn-cevap .ex-actions > .btn-primary { flex: 1 1 100%; }
}