/* =============================================================
   kaypak.css — "KAYPAK" OYUNUNA ÖZEL GÖRÜNÜM
   Ortak oyun stilleri css/oyun.css içinde. Renkler css/tema.css'te
   (--kaypak, --kaypak-deep, --kaypak-acik). Burada sabit renk kodu yok.
   ============================================================= */

/* ---------- ortak parçalar ---------- */
.btn.buyuk{font-size:18px;padding:18px 28px;width:100%;max-width:340px}
.kp-etiket{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.kp-ipucu{margin:0;font-size:14px;color:var(--muted);max-width:44ch}
.kp-ipucu b{color:var(--text);font-weight:600}
/* ekranda görünmez ama ekran okuyucu okur */
.kp-gizli{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* renkli baş harf yuvarlağı (rengi ortak.js'teki avatarBoya veriyor) */
.kp-avatar{
  width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:var(--f-display);font-weight:800;font-size:16px;color:var(--bg);letter-spacing:.02em;
}
.kp-isim{flex:1;min-width:0;overflow-wrap:anywhere}

/* ---------- menü ---------- */
.kp-kurulum{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap:14px;margin-top:22px;align-items:start;
}
.kp-kutu{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:22px 20px}
.kp-kutu h2{font-family:var(--f-display);font-weight:800;font-size:24px;margin:0;letter-spacing:.02em}
.kp-kutubas{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:6px}
.kp-sayi{font-family:var(--f-mono);font-size:13px;color:var(--kaypak);font-variant-numeric:tabular-nums}

.kp-ekle{display:flex;gap:8px;margin-top:14px}
.kp-ekle input[type="text"]{
  font:500 18px var(--f-body);text-align:left;letter-spacing:0;padding:12px 14px;min-height:50px;
}
.kp-ekle .btn{flex:none;padding-inline:22px}
.kp-uyari{min-height:1.4em;margin:6px 0 0;font-size:13px;color:var(--bad)}

.kp-liste{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;counter-reset:oyuncu}
.kp-oyuncu{
  display:flex;align-items:center;gap:10px;background:var(--bg);
  border:1px solid var(--line-soft);border-radius:var(--r);padding:4px 4px 4px 8px;
}
.kp-oyuncu::before{
  counter-increment:oyuncu;content:counter(oyuncu);
  font-family:var(--f-mono);font-size:12px;color:var(--muted);min-width:1.5em;text-align:right;
  font-variant-numeric:tabular-nums;
}
.kp-oyuncu .kp-isim{font-weight:600;font-size:17px}
.kp-mini{
  min-width:44px;min-height:44px;border-radius:8px;border:1px solid transparent;
  background:none;color:var(--muted);font-size:17px;cursor:pointer;flex:none;
}
@media (hover:hover){ .kp-mini:hover:not(:disabled){color:var(--text);border-color:var(--line)} }
.kp-mini:disabled{opacity:.2;cursor:default}
.kp-bos{
  margin:4px 0 0;border:1px dashed var(--line);border-radius:var(--r);
  padding:16px;text-align:center;color:var(--muted);font-size:14px;
}
.kp-bos[hidden]{display:none}

.kp-ayar{display:flex;flex-direction:column;gap:9px;padding-block:14px;border-bottom:1px dashed var(--line)}
.kp-ayar .chip{min-height:42px;padding-inline:16px;font-size:14px}
.kp-ayar .chip:disabled{opacity:.35;cursor:default}
.kp-ayar .chip:disabled:hover{color:var(--muted);border-color:var(--line)}
.kp-not{margin:0;font-size:12.5px;color:var(--muted)}
.kp-not b{color:var(--text);font-weight:600}

/* oyun modu kartları: iki büyük seçenek */
.kp-modlar{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:8px}
.kp-mod{
  display:flex;flex-direction:column;gap:4px;text-align:left;cursor:pointer;
  padding:12px 14px;border-radius:var(--r);border:1px solid var(--line);
  background:var(--bg);color:var(--muted);font:400 13px/1.35 var(--f-body);transition:.15s;
}
.kp-mod b{font:600 16px/1.1 var(--f-body);color:var(--text)}
@media (hover:hover){ .kp-mod:hover{border-color:var(--muted)} }
.kp-mod[aria-pressed="true"]{border-color:var(--kaypak);background:color-mix(in srgb, var(--kaypak) 12%, var(--bg))}
.kp-mod[aria-pressed="true"] b{color:var(--kaypak-acik)}
/* modun alt ayarı (ipucu): sola çizgiyle bağlı */
.kp-altayar{display:flex;flex-direction:column;gap:9px;margin-top:4px;padding-left:12px;border-left:2px solid var(--kaypak-deep)}
.kp-altayar[hidden]{display:none}

.kp-basla{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:18px}
.kp-sayac{margin:0;font-family:var(--f-mono);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.kp-sayac b{color:var(--kaypak);font-weight:600}

.kp-kurallar{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:14px;margin-top:14px}
.kp-kurallar h2{margin-bottom:12px}
.kp-kurallar ol,.kp-kurallar ul{margin:0;padding-left:1.3em;color:var(--muted);font-size:15px}
.kp-kurallar li{margin-bottom:9px}
.kp-kurallar li:last-child{margin-bottom:0}
.kp-kurallar li::marker{color:var(--kaypak);font-family:var(--f-mono)}
.kp-kurallar b{color:var(--text);font-weight:600}

/* ---------- oyun sırasında: site başlığı gizlenir, ekran oyuna kalır ---------- */
body.sahnede .sitehead,
body.sahnede .gamehead,
body.sahnede .sitefoot{display:none}
body.sahnede .wrap{padding-block:12px}
body.sahnede .screen{margin-top:0}

.kp-sahne{
  min-height:calc(100svh - 24px);
  display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;
}
.kp-ust{display:flex;align-items:center;gap:8px;width:100%;flex-wrap:wrap}
.kp-ust .kp-etiket{margin-right:auto;text-align:left}
.kp-kucukbtn{
  font:600 14px/1 var(--f-body);color:var(--text);background:var(--bg-2);
  border:1px solid var(--line);border-radius:999px;padding:0 14px;min-height:44px;cursor:pointer;
}
@media (hover:hover){ .kp-kucukbtn:hover{border-color:var(--muted)} }
.kp-kucukbtn:active{border-color:var(--muted)}
.kp-orta{
  flex:1;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding-block:12px;
}
.kp-orta[hidden]{display:none}
.kp-alt{width:100%}
.kp-orta .linkbtn:disabled{visibility:hidden}   /* ilk sözde "bir önceki" düğmesi görünmesin */

/* isimler ve kelimeler: masadan okunabilsin diye kocaman */
.kp-buyukad,
.kp-kelime{
  font-family:var(--f-display);font-weight:800;font-size:clamp(44px,13vw,88px);
  line-height:.94;margin:0;text-transform:uppercase;letter-spacing:.01em;
  text-wrap:balance;overflow-wrap:anywhere;max-width:100%;
}
.kp-buyukad:focus{outline:none}
.kp-baslik{
  font-family:var(--f-display);font-weight:800;font-size:clamp(36px,10vw,60px);
  line-height:.95;margin:0;letter-spacing:.01em;text-wrap:balance;
}
.kp-baslik:focus{outline:none}
.kp-ilerleme{font-family:var(--f-mono);font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}

/* gizli kelimenin durduğu kutu */
.kp-kelimekutu{
  width:100%;max-width:460px;padding:34px 18px;border-radius:var(--r);
  background:var(--bg-2);border:2px solid var(--kaypak-deep);
}
.kp-kelimekutu .kp-kelime{display:block;color:var(--kaypak-acik)}

/* başlık etiketi: "Başlık: Özel gün" */
.kp-grupetiket{
  font-size:14px;color:var(--muted);border:1px solid var(--kaypak-deep);border-radius:999px;padding:5px 14px;
}
.kp-grupetiket b{color:var(--kaypak-acik);font-weight:600}

/* gizli ekranda Kaypak'a özel satır */
.kp-kaypaksin{
  display:block;font-family:var(--f-display);font-weight:800;font-size:clamp(30px,9vw,46px);line-height:1;
  letter-spacing:.04em;text-transform:uppercase;color:var(--kaypak);
}
.kp-kaypaksin[hidden]{display:none}
.kp-kelimekutu{display:flex;flex-direction:column;align-items:center;gap:8px}
.kp-kelime[hidden]{display:none}

/* kelime turu ekranı: kocaman başlık + iki bilgi kutusu */
.kp-grupbuyuk{
  font-family:var(--f-display);font-weight:800;font-size:clamp(42px,12vw,80px);line-height:.94;margin:0;
  text-transform:uppercase;letter-spacing:.01em;color:var(--kaypak-acik);text-wrap:balance;overflow-wrap:anywhere;
}
.kp-grupbuyuk:focus{outline:none}
.kp-turbilgi{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;max-width:420px}
.kp-turbilgi > div{
  display:flex;flex-direction:column;gap:4px;padding:12px 10px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2);
}
.kp-turbilgi strong{font-family:var(--f-display);font-weight:800;font-size:26px;line-height:1;text-transform:uppercase;overflow-wrap:anywhere}

/* oylama: oyuncu düğmeleri */
.kp-adaylar{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,160px),1fr));
  gap:8px;width:100%;max-width:560px;
}
.kp-adaylar[hidden]{display:none}
.kp-aday{
  display:flex;align-items:center;gap:10px;min-height:58px;padding:8px 12px;text-align:left;
  font:600 17px/1.15 var(--f-body);color:var(--text);cursor:pointer;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);transition:.15s;
}
/* telefonda: oylamada dokunulan isim, "Vazgeç" denince renkli kalmasın */
@media (hover:hover){ .kp-aday:hover{border-color:var(--kaypak);background:color-mix(in srgb, var(--kaypak) 8%, var(--bg-2))} }
.kp-aday:active{border-color:var(--kaypak)}

/* ---------- elenen açıklanır ---------- */
.kp-rozet{
  font-family:var(--f-display);font-weight:800;font-size:clamp(30px,9vw,46px);line-height:1;
  letter-spacing:.08em;text-transform:uppercase;padding:10px 22px 8px;border-radius:999px;border:3px solid;
}
.kp-rozet.kaypak{color:var(--kaypak);border-color:var(--kaypak)}
.kp-rozet.masum{color:var(--green);border-color:var(--green-deep)}
#s-elendi.live .kp-rozet{animation:kp-damga .5s .15s cubic-bezier(.2,1.5,.4,1) both}
@keyframes kp-damga{0%{transform:scale(2.2) rotate(-12deg);opacity:0}100%{transform:scale(1) rotate(-4deg);opacity:1}}

.kp-aciklama{margin:0;font-size:18px;max-width:34ch;text-wrap:balance}
.kp-tahmin{
  display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;max-width:420px;
  border:1px dashed var(--kaypak-deep);border-radius:var(--r);padding:18px 16px;
}
.kp-tahmin[hidden]{display:none}
.kp-ikili{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
.btn[hidden]{display:none}

/* ---------- bitiş ---------- */
.kp-bitis{gap:16px}
.kp-kazanan{
  font-family:var(--f-display);font-weight:800;font-size:clamp(42px,12vw,80px);
  line-height:.92;margin:0;text-transform:uppercase;letter-spacing:.01em;text-wrap:balance;
}
.kp-kazanan:focus{outline:none}
#s-bitis[data-kazanan="kaypak"] .kp-kazanan{color:var(--kaypak)}
#s-bitis[data-kazanan="durust"] .kp-kazanan{color:var(--green)}

.kp-acilis{
  display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;max-width:460px;
  background:var(--bg-2);border:1px solid var(--kaypak-deep);border-radius:var(--r);padding:20px 16px 22px;
}
.kp-maske{width:88px;height:auto;display:block}
.maske-govde{fill:var(--kaypak)}
.maske-goz{fill:var(--bg-2)}
.maske-bebek{fill:var(--kaypak-acik)}
.kp-kaypakad{
  font-family:var(--f-display);font-weight:800;font-size:clamp(34px,10vw,58px);line-height:.95;
  text-transform:uppercase;letter-spacing:.01em;overflow-wrap:anywhere;text-wrap:balance;
}
#s-bitis.live .kp-maske{animation:kp-bak 1.6s .3s ease-in-out both}
@keyframes kp-bak{
  0%{transform:scale(.4);opacity:0}
  25%{transform:scale(1);opacity:1}
  45%,60%{transform:translateX(-6px)}
  80%,100%{transform:translateX(0)}
}

.kp-kelimeler{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:8px;width:100%;max-width:460px}
.kp-kelimekart{
  display:flex;flex-direction:column;gap:4px;padding:14px 12px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2);
}
.kp-kelimekart strong{
  font-family:var(--f-display);font-weight:800;font-size:28px;line-height:1;
  text-transform:uppercase;letter-spacing:.01em;overflow-wrap:anywhere;
}
.kp-kelimekart.kaypak strong{color:var(--kaypak-acik)}
.kp-kelimekart[hidden]{display:none}

.kp-gecmis{margin:0;padding:0;list-style:none;font-family:var(--f-mono);font-size:12.5px;color:var(--muted);display:flex;flex-direction:column;gap:3px}
.kp-dugmeler{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;margin-top:4px}
.kp-dugmeler .btn{width:100%;max-width:340px}

/* ---------- perde (soru kutusu) ---------- */
.kp-perde{
  position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:16px;overflow-y:auto;
  grid-template-columns:minmax(0,1fr);   /* kutu ekrandan geniş olmasın */
  background:var(--bg);   /* color-mix'i tanımayan eski telefonlarda perde saydam kalmasın */
  background:color-mix(in srgb, var(--bg) 94%, transparent);
}
.kp-perde[hidden]{display:none}
.kp-perde-ic{
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);
  padding:26px 20px;width:100%;max-width:420px;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;
}
.kp-perde-ic:focus{outline:none}
.kp-perde-ic h2{font-family:var(--f-display);font-weight:800;font-size:32px;line-height:1;margin:0;letter-spacing:.02em;overflow-wrap:anywhere}
.kp-perde-ic p{margin:0;color:var(--muted);font-size:15px}
.kp-perde-ic [hidden]{display:none}
.kp-perde-ic .kp-kelime{color:var(--kaypak-acik);padding-block:12px}
.kp-perde-ic .kp-adaylar{grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr))}
.kp-perde-dugmeler{display:flex;flex-direction:column;gap:8px;width:100%;align-items:center}
.kp-perde-dugmeler .btn{width:100%;max-width:340px}

/* ---------- hareket azaltma tercihi ---------- */
@media (prefers-reduced-motion:reduce){
  #s-elendi.live .kp-rozet,
  #s-bitis.live .kp-maske{animation:none !important}
}