/* ⚽ Kelime Kafa Topu — yatay oyun alanı (dikey telefonda 90° döner), butonlar, kelime topu sorusu, karakter seçimi. kafa.js */
body.kft-acik { overflow: hidden; }
.kft-kok { position: fixed; inset: 0; z-index: 9000; background: #1b0f33; color: #fff; overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: none;
  font-family: "Baloo 2", ui-rounded, "SF Pro Rounded", system-ui, sans-serif; }
.kft-kok * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
.kft-kok [hidden] { display: none !important; }
.kft-kok button { font: inherit; color: inherit; cursor: pointer; }
.kft-sahne { position: absolute; left: 0; top: 0; transform-origin: 0 0;
  --tus: 74px; --ara: 15px; --yan-l: 22px; --yan-r: 22px; --alt: 16px; --ust: 8px; --kl: 0px; --kr: 0px; }   /* gerçek değerleri kafa.js boyut() yazar (güvenli alan) */
/* env(safe-area-inset-*) ölçüm kutusu: kafa.js guvenli() padding'i px okur, sahne eksenine eşler (Riven 2 Eki: 16 Pro Max'te tuşlar dipte kalıyordu) */
.kft-sa { position: fixed; left: 0; top: 0; width: 0; height: 0; visibility: hidden; pointer-events: none;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
.kft-tuval { display: block; width: 100%; height: 100%; }
.kft-ust { position: absolute; top: var(--ust); left: 0; right: 0; display: flex; justify-content: center; align-items: center; gap: 8px; pointer-events: none; }
.kft-ad { background: #2b1d4acc; border-radius: 12px; padding: 3px 12px; font-weight: 800; font-size: 15px; max-width: 26%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kft-skor { background: linear-gradient(180deg, #ffe066, #fab005); color: #3b2a00; border-radius: 12px; min-width: 44px; padding: 2px 10px; text-align: center; font-weight: 900; font-size: 24px; box-shadow: 0 3px 0 #b07800; }
.kft-sure { background: #f1f3f5; color: #343a40; border-radius: 12px; padding: 3px 12px; font-weight: 900; font-size: 18px; box-shadow: 0 3px 0 #adb5bd; font-variant-numeric: tabular-nums; }
.kft-cik { position: absolute; top: var(--ust); left: calc(var(--kl) + 10px); width: 42px; height: 42px; border: 0; border-radius: 12px; background: #4c3a7acc; font-size: 20px; font-weight: 900; box-shadow: 0 3px 0 #0005; pointer-events: auto; }
/* İkonik 3B tuşlar (Riven 2 Eki): yuvarlak kare, üstte parlama, altta kalınlık gölgesi; basınca aşağı iner. Renk --u (üst) --a (alt) --k (kalınlık) */
.kft-tus { --u: #7b3ff2; --a: #5a22d6; --k: #3b1499;
  position: absolute; bottom: var(--alt); width: var(--tus); height: var(--tus); padding: 0; border: 0; border-radius: 28%;
  display: grid; place-items: center; touch-action: none; -webkit-touch-callout: none;
  background: linear-gradient(180deg, var(--u), var(--a));
  box-shadow: inset 0 2px 0 #ffffff59, inset 0 -5px 0 #00000026, 0 7px 0 var(--k), 0 12px 14px #0006; transition: transform .06s, box-shadow .06s; }
.kft-tus::before { content: ""; position: absolute; left: 9%; right: 9%; top: 5%; height: 44%; border-radius: 40% 40% 50% 50% / 60% 60% 40% 40%;
  background: linear-gradient(180deg, #ffffff6b, #ffffff00); pointer-events: none; }
.kft-tus svg { position: relative; width: 62%; height: 62%; overflow: visible; pointer-events: none;
  fill: #fff; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2.5px 0 #00000052); }
.kft-tus.on { transform: translateY(6px); box-shadow: inset 0 2px 0 #ffffff40, inset 0 -3px 0 #00000026, 0 1px 0 var(--k), 0 3px 6px #0005; filter: brightness(.94); }
.kft-tus.sol { left: var(--yan-l); } .kft-tus.sag { left: calc(var(--yan-l) + var(--tus) + var(--ara)); }
.kft-tus.zip { --u: #ff4d4d; --a: #d62828; --k: #8e1212; right: calc(var(--yan-r) + var(--tus) + var(--ara)); }
.kft-tus.sut { --u: #ffb21e; --a: #f07300; --k: #a34a00; right: var(--yan-r); }
.kft-guc { position: absolute; top: calc(var(--ust) + 48px); padding: 3px 10px; border-radius: 10px; font-weight: 800; font-size: 14px; background: #ffffffe6; color: #3b1d4a; }
.kft-guc.sol { left: calc(var(--kl) + 14px); } .kft-guc.sag { right: calc(var(--kr) + 14px); }
.kft-perde { position: absolute; inset: 0; display: grid; place-items: center; background: #160a2bb3; padding: 12px; }
.kft-kart { width: min(92%, 460px); max-height: 94%; overflow-y: auto; background: #fff; color: #2b1d4a; border-radius: 22px; padding: 16px 18px; text-align: center; box-shadow: 0 8px 0 #0003, 0 20px 40px #0006; }
.kft-kart h2 { margin: 0 0 6px; font-size: 26px; color: #6741d9; }
.kft-kart p { margin: 0 0 10px; font-size: 16px; line-height: 1.3; color: #4a3d63; }
.kft-btn { display: block; width: 100%; margin-top: 8px; border: 0; border-radius: 14px; padding: 11px; font-size: 19px; font-weight: 800; color: #fff !important; background: linear-gradient(180deg, #845ef7, #6741d9); box-shadow: 0 4px 0 #4524a3; }
.kft-btn.ikincil { background: #f1effa; color: #4a3d63 !important; box-shadow: 0 4px 0 #d5cdee; }
.kft-sec { display: flex; gap: 6px; justify-content: center; margin: 6px 0 10px; flex-wrap: wrap; }
.kft-sec button { border: 0; border-radius: 12px; padding: 7px 12px; font-weight: 800; background: #f1effa; color: #4a3d63 !important; box-shadow: 0 3px 0 #d5cdee; }
.kft-sec button.on { background: #6741d9; color: #fff !important; box-shadow: 0 3px 0 #4524a3; }
.kft-raf { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px; margin-bottom: 4px; scroll-snap-type: x mandatory; }
.kft-raf button { flex: 0 0 auto; width: 74px; height: 74px; border: 3px solid transparent; border-radius: 16px; background: #f3f0ff; padding: 4px; position: relative; scroll-snap-align: center; }
.kft-raf button.on { border-color: #6741d9; background: #e5dbff; }
.kft-raf button img { width: 100%; height: 100%; object-fit: contain; }
.kft-raf button small { position: absolute; inset: auto 0 2px; font-size: 11px; font-weight: 800; color: #6741d9; }
.kft-raf button.kilit img { filter: grayscale(1) brightness(.7); }
.kft-raf-bas { text-align: left; font-weight: 800; color: #4a3d63; font-size: 14px; }
.kft-soru-metin { font-size: 30px; font-weight: 900; color: #2b1d4a; margin: 2px 0; }
.kft-secenek { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.kft-secenek button { border: 0; border-radius: 14px; padding: 12px 8px; font-size: 21px; font-weight: 800; background: #f1effa; color: #2b1d4a !important; box-shadow: 0 4px 0 #d5cdee; }
.kft-secenek button.dogru { background: #d3f9d8; box-shadow: 0 4px 0 #8ce99a; } .kft-secenek button.yanlis { background: #ffe3e3; box-shadow: 0 4px 0 #ffa8a8; }
.kft-sayac { height: 8px; border-radius: 5px; background: #eee; overflow: hidden; margin-top: 10px; } .kft-sayac i { display: block; height: 100%; background: linear-gradient(90deg, #ffd43b, #f76707); width: 100%; transition: width linear; }
.kft-sonuc-bas { font-size: 38px; font-weight: 900; } .kft-kazan .kft-sonuc-bas { color: #2f9e44; } .kft-kayip .kft-sonuc-bas { color: #e03131; } .kft-esit .kft-sonuc-bas { color: #f59f00; }
.kft-kelime { display: flex; justify-content: space-between; gap: 8px; width: 100%; border: 0; border-radius: 10px; background: #f8f6ff; padding: 7px 12px; margin-bottom: 5px; font-size: 16px; }
.kft-kelime b { color: #2b1d4a; } .kft-kelime span { color: #7c6b98; }
.kft-dondur { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
/* Tavandaki top skor şeridinin arkasındayken şerit yarı saydam (kafa.js hudOlc) */
.kft-ust { transition: opacity .15s; } .kft-ust.saydam { opacity: .28; }
/* 🧑‍🎨 Kendi karakterin (Riven 2 Eki): tarif → kendi yapay zekân → yükle; yalnız telefonda */
.kft-raf .kft-ozel-yap { background: linear-gradient(160deg, #fff3bf, #ffd8a8); border: 3px dashed #f08c00; display: grid; place-items: center; }
.kft-raf .kft-ozel-yap b { font-size: 26px; line-height: 1; margin-top: -10px; }
.kft-raf .kft-ozel-yap small { color: #c2410c; line-height: 1.05; }