/* kca.css — Kat ve Çarpan Avı'na özgü görünüm (ortak: /assets/oyun/oyun.css). Renkler tokens.css'ten. Her bölümün
   sınıfı kendine (T9): b1-, b2-, b3- önekleri. */
[hidden] { display: none !important; }
.hedef-satir { margin: .8rem 0 0; text-align: center; font-family: var(--font-baslik); font-weight: 600; font-size: 1.45rem; color: var(--nesne-gece); }

/* Tanıtım sürerken tahta ve karar alanı gizli (L9: tanıtım örneği oynanan tahtayla karışmasın) */
.tanitimda .tahta, .tanitimda .eylem, .tanitimda .bitir-satir, .tanitimda .sonuc, .tanitimda .b2-liste-kutu,
.tanitimda .b3-kart, .tanitimda .b3-dugmeler { display: none; }
.tanitim-sekil:empty { display: none; }
.tanitim-sekil { margin: 0 auto .6rem; max-width: 24rem; }

/* Bölüm 1 tahtası: 4 sütun */
.tahta-dort { grid-template-columns: repeat(4, 1fr); max-width: 22rem; }
.karo-kacan { box-shadow: inset 0 0 0 3px var(--amber); border: 2px dashed var(--amber); }
.bitir-satir { display: flex; justify-content: center; margin: .4rem 0 .2rem; }
.bitir-dugme { font-size: 1.05rem; }

/* Durak şeridi (konunun sayı doğrusu) */
.serit { margin: .4rem auto 0; max-width: 22rem; }
.serit-svg { display: block; width: 100%; height: auto; overflow: visible; }
.serit-cizgi { stroke: var(--nesne-tas); stroke-width: 3; stroke-linecap: round; }
.serit-durak circle { fill: var(--nesne-gece); }
.serit-sayi { font-family: var(--font-baslik); font-weight: 600; font-size: 16px; fill: var(--metin); text-anchor: middle; }
.serit-carpim { font-size: 12px; font-weight: 700; fill: var(--metin-soluk); text-anchor: middle; }
.serit-halka { fill: none; stroke: var(--bal); stroke-width: 3.5; }
.sonuc-dogru .serit-halka { stroke: var(--yesil); }
.serit-kalan { fill: var(--amber); }
.serit-isaret { stroke: var(--amber); stroke-width: 3; stroke-linecap: round; }
.serit-n { font-size: 12px; font-weight: 700; fill: var(--metin); text-anchor: middle; }
.serit-soluk { font-family: var(--font-baslik); font-size: 18px; fill: var(--metin-soluk); text-anchor: middle; opacity: .8; }
.serit-adim { opacity: 0; animation: belir .45s ease forwards; }
@keyframes belir { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .serit-adim { opacity: 1; animation: none; } }
.oyuncu .yigin { min-height: 1.4rem; }
.oyuncu-sen .oyuncu-yazi, .oyuncu-obur .oyuncu-yazi { min-width: 0; }
.skor-satiri .oyuncu { min-height: 4.4rem; }

/* Bölüm 2: üst blok (hedef + Obur + ikili listesi + balon + karar + kanıt) sabit; tahta altında kayar (G5) */
.b2-ust { position: sticky; top: 0; z-index: 5; background: var(--kart); padding-bottom: .3rem; border-bottom: 2px dashed var(--nesne-tas-acik); }
.b2-bas { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .5rem; }
.b2-hedef { margin: 0; text-align: left; font-size: 1.3rem; }
.b2-obur { min-height: 0; padding: .3rem .5rem; max-width: 11rem; }
.b2-obur .obur { width: 2.8rem; height: 2.8rem; }
.b2-liste-kutu { margin: .4rem 0 0; padding: .4rem .7rem; border-radius: 14px; background: var(--bal-acik); border: 2px solid var(--bal); }
.b2-liste-baslik { margin: 0 0 .2rem; font-weight: 700; font-size: var(--punto-kucuk); }
.b2-liste { display: flex; flex-wrap: wrap; gap: .25rem .4rem; }
.b2-satir { padding: .05rem .5rem; border-radius: 999px; background: var(--kart); font-family: var(--font-baslik); font-weight: 600; font-size: 1.02rem; white-space: nowrap; }
.b2-satir-bos { background: transparent; color: var(--metin-soluk); font-family: var(--font-govde); font-weight: 600; }
.b2-satir-kacan { background: var(--amber-acik); border: 2px dashed var(--amber); }
.b2-satir-orta { background: var(--bal); box-shadow: 0 0 0 3px var(--nesne-ates); }
.b2 .balon { margin: .6rem 0 .4rem; }
.b2 .eylem { min-height: var(--dokunma-min); }
.b2 .sonuc { margin-bottom: .3rem; }
.b2-tahta { grid-template-columns: repeat(6, 1fr); max-width: 30rem; gap: .35rem; margin-top: .7rem; }
.b2-tahta .karo { font-size: 1.15rem; border-radius: 10px; }
.b2-tahta .karo-iz { font-size: .72rem; letter-spacing: -.02em; }
@media (min-width: 640px) { .b2-tahta { grid-template-columns: repeat(10, 1fr); max-width: 42rem; } }
.b2-ornek { padding: .4rem .7rem; border-radius: 14px; background: var(--bal-acik); border: 2px solid var(--bal); }

/* Bölüm 3: kart + dört eşit düğme (sıra sabit, ilk kelime kalın; renk ipucu yok — G3) + iki ok */
.b3-bas { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .6rem; }
.b3-sayac { margin: 0; font-weight: 700; }
.b3-yiginlar { display: flex; justify-content: flex-end; gap: .5rem; }
.b3-deste { display: flex; align-items: center; gap: .35rem; padding: .3rem .6rem; border-radius: 14px; min-height: 3rem; }
.b3-sen { background: var(--bal-acik); border: 2px solid var(--bal); }
.b3-obur { background: var(--yardimci-acik); border: 2px solid var(--yardimci-mor); }
.b3-obur .obur { width: 2.4rem; height: 2.4rem; }
.b3-deste-ad { font-size: .8rem; font-weight: 700; line-height: 1.1; max-width: 4.6rem; }
.b3-deste-kartlar { display: flex; flex-wrap: wrap; gap: 2px; max-width: 4.5rem; }
.b3-mini { width: .55rem; height: .8rem; border-radius: 2px; background: var(--bal); }
.b3-obur .b3-mini { background: var(--yardimci-mor); }
.b3-kart { margin: .5rem auto .7rem; max-width: 26rem; padding: .9rem 1rem; border-radius: 18px; background: var(--zemin);
  box-shadow: 0 5px 0 var(--nesne-tas-acik), inset 0 0 0 2px var(--nesne-tas-acik); text-align: center; min-height: 5.2rem; }
.b3-kart-durum { min-height: 10.5rem; }
.b3-durum { margin: 0 0 .5rem; text-align: left; font-size: var(--punto-kucuk); font-weight: 600; }
.b3-cumle { margin: 0; font-family: var(--font-baslik); font-weight: 600; font-size: 1.6rem; color: var(--nesne-gece); }
.b3-dugmeler { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: .5rem; max-width: 26rem; margin: 0 auto .7rem; }
.b3-dugme { min-height: 3.6rem; padding: .3rem .5rem; border-radius: 14px; border: 2px solid var(--nesne-tas-acik); background: var(--kart);
  color: var(--metin); font: inherit; line-height: 1.25; cursor: pointer; box-shadow: 0 4px 0 var(--nesne-tas-acik); }
.b3-dugme strong { font-weight: 800; }
.b3-dugme:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--nesne-tas-acik); }
.b3-dugme:disabled { opacity: .55; cursor: default; transform: none; }
.b3-sekil { margin: .5rem 0 0; text-align: center; }
.b3-carpim { margin: .15rem 0; font-family: var(--font-baslik); font-weight: 600; font-size: 1.4rem; }
.b3-ok { margin: 0 auto; max-width: 20rem; padding: .15rem .6rem; font-size: var(--punto-kucuk); font-weight: 700; border: 2px solid var(--nesne-tas); }
.b3-ok-ust { border-bottom: 0; border-radius: 999px 999px 0 0; }
.b3-ok-alt { border-top: 0; border-radius: 0 0 999px 999px; }
.sonuc-dogru .b3-ok-secilen { border-color: var(--yesil); background: color-mix(in srgb, var(--yesil) 14%, transparent); }
.b3-cumle-yanlis { margin: 0 0 .3rem; text-decoration: line-through; color: color-mix(in srgb, var(--amber) 70%, var(--metin)); font-weight: 700; }
.b3-bolme { margin: .2rem 0; font-family: var(--font-baslik); font-weight: 600; font-size: 1.3rem; }
.b3-kalan { padding: 0 .4rem; border-radius: 8px; background: var(--amber); }
.b3-adim { opacity: 0; animation: belir .45s ease forwards; }
@media (prefers-reduced-motion: reduce) { .b3-adim { opacity: 1; animation: none; } }
.tanitim-sekil .b3-sekil { padding: .4rem; border-radius: 14px; background: var(--zemin); }
.b3-sayac { white-space: nowrap; }

/* Mercek turu 1 */
.kural-satir { margin: .15rem auto 0; max-width: 28rem; text-align: center; font-size: var(--punto-kucuk); font-weight: 700; color: var(--yardimci-mor); }
.serit-durak-bos circle { fill: var(--nesne-tas); r: 4; }
.karo-iz { font-size: .72rem; }
.oyuncu .cip { border-radius: 6px; min-width: 1.6rem; text-align: center; }
/* B2: üst blok ekranın yarısını geçmesin (küçük telefonda tahta görünsün); içi kayar */
.b2-ust { max-height: 58vh; overflow-y: auto; }
.b2 .balon::before { display: none; }
.b2-satir-orta { background: var(--yardimci-acik); box-shadow: 0 0 0 3px var(--yardimci-mor); }
@media (max-width: 420px) { .b2-satir { font-size: .92rem; } .b2 .kural-satir { font-size: .85rem; } }
/* B3: yanlış kutusunda doğru oklar da sonucun renginde (G2); doğru kutusunda kalan açık amber; 360 px'te desteler taşmasın */
.sonuc-yanlis .b3-ok { border-color: var(--amber); }
.sonuc-dogru .b3-kalan { background: var(--amber-acik); border: 2px solid var(--amber); }
.b3-bas { grid-template-columns: auto minmax(0, 1fr); }
.b3-yiginlar { min-width: 0; flex-wrap: wrap; }
.b3-deste { flex: 1 1 0; min-width: 0; max-width: 11rem; }
.b3-deste-ad { max-width: none; }
.b3 .kural-satir { margin-top: .4rem; }
/* B2 yapı (mercek turu 1): üst blok akışta; yalnız karar çubuğu yapışık */
.b2-ust { position: static; max-height: none; overflow: visible; border-bottom: 0; padding-bottom: 0; }
.b2-eylem-bar { position: sticky; top: 0; z-index: 5; background: var(--kart); padding: .35rem 0; border-bottom: 2px dashed var(--nesne-tas-acik); margin-bottom: .4rem; }
.b2-eylem-bar .eylem { min-height: var(--dokunma-min); }
.b2 .tanitimda .b2-eylem-bar, .tanitimda .b2-eylem-bar { display: none; }