/* =============================================================
   boy.css — SADECE "KAÇ BOYUNDA?" OYUNUNA AİT GÖRÜNÜM
   Ortak oyun görünümü (ekranlar, hud, düello, tahmin kutusu)
   css/oyun.css'te. Burada sadece bu oyuna özel eklemeler var.
   ============================================================= */

/* başlığın yanındaki dekoratif cetvel çentikleri */
.strip{display:flex;gap:3px;height:18px;align-items:flex-end;width:100%}
.strip i{flex:1;background:var(--line-soft);border-radius:1px;display:block}
.strip i.on{background:var(--green-deep)}
.strip i.hot{background:var(--green)}
.strip i.top{background:var(--lime)}
.headrow{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.headrow .stripwrap{flex:1;min-width:130px;max-width:250px}

/* menüde iki çip satırı alt alta */
.filtreler{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.filtreler .lbl{min-width:52px}
/* dar ekranda etiket kendi satırında dursun, çipler yan yana sığsın */
@media (max-width:480px){ .filtreler .chips .lbl{flex-basis:100%} .filtreler .chip{padding-inline:12px} }
.chip em{font-style:normal;opacity:.6}

/* kıyas boyu kutusu */
.kiyas{
  margin-top:18px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  border:1px dashed var(--line);border-radius:var(--r);padding:12px 14px;max-width:560px;
}
.kiyas label{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.kiyas input[type="text"]{flex:none;width:96px;font-size:17px;padding:9px 10px}
.kiyas .btn{padding:10px 16px;font-size:14px}
.kiyas .durum{font-family:var(--f-mono);font-size:12px;color:var(--green)}
.kiyas p{flex-basis:100%;margin:0;font-size:12.5px;color:var(--muted)}

/* isim altındaki kısa tanım ("Voleybol · pasör") */
.kim{font-size:13px;color:var(--muted);margin:-4px 0 0;min-height:1.3em;text-wrap:balance}

/* sayıların yanındaki küçük "cm" */
.count small{font-size:.42em;color:var(--muted);margin-left:4px;font-weight:500}

/* oynarken site başlığı ve alt bilgi gizlenir (oyun-boy.js "sahnede" sınıfını ekler) */
body.sahnede .sitehead,
body.sahnede .gamehead,
body.sahnede .sitefoot{display:none}
body.sahnede .wrap{padding-block:12px}
body.sahnede .screen{margin-top:0}

/* dokunmatik ekranda klavye ipucu gereksiz */
@media (hover:none){ .klavye-ipucu{display:none} }

/* ---------- tahmin modu: cevap verilince yer açılsın ---------- */
.solo.cevaplandi .avatar{width:48px;height:48px;font-size:20px}
.solo.cevaplandi .caption,
.solo.cevaplandi .hint{display:none}
.solo.cevaplandi{gap:8px}

/* sonuç: solda siluetler, sağda sayılar */
.boy-sonuc{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end;text-align:left}
.boy-sonuc .rrow{padding:4px 0}
.boy-sonuc .rrow{font-size:13px}
.boy-sonuc .rrow b{font-size:16px;text-align:right}
.boy-sonuc .rrow[hidden]{display:none}
.supheli{font-size:12px;color:var(--gold);margin:6px 0 0;line-height:1.35}
.supheli[hidden]{display:none}

/* ---------- siluet çizimi (oyun-boy.js → siluetCiz) ---------- */
.siluet svg{display:block;width:100%;height:180px;overflow:visible}
.siluet .izgara{stroke:var(--line-soft);stroke-width:1}
.siluet .izgara.kalin{stroke:var(--line)}
.siluet .zemin{stroke:var(--muted);stroke-width:1.5}
.siluet .olcu{font:500 11px var(--f-mono);fill:var(--muted);text-anchor:end}
.siluet .hiza{stroke-width:1;stroke-dasharray:3 3;opacity:.7}
.siluet .hiza.gercek{stroke:var(--green)}
.siluet .hiza.tahmin{stroke:var(--gold)}
.siluet .hiza.sen{stroke:var(--muted)}
.siluet .fig.gercek{fill:var(--green)}
.siluet .fig.tahmin{fill:none;stroke:var(--gold);stroke-width:1.4;stroke-dasharray:3 2;vector-effect:non-scaling-stroke}
.siluet .fig.sen{fill:var(--line);stroke:var(--muted);stroke-width:1;vector-effect:non-scaling-stroke}
.siluet .etiket{font:600 13px var(--f-mono);text-anchor:middle;font-variant-numeric:tabular-nums}
.siluet .etiket.gercek{fill:var(--green)}
.siluet .etiket.tahmin{fill:var(--gold)}
.siluet .etiket.sen{fill:var(--muted)}
.siluet .ad{font:500 11px var(--f-mono);text-anchor:middle}
.siluet .ad.gercek{fill:var(--green)}
.siluet .ad.tahmin{fill:var(--gold)}
.siluet .ad.sen{fill:var(--muted)}

/* siluetler aşağıdan yukarı uzayarak gelsin */
.siluet .fig{animation:boyUza .6s cubic-bezier(.2,.8,.3,1) both}
.siluet .fig.gercek{animation-delay:.15s}
@keyframes boyUza{ from{opacity:0} to{opacity:1} }

/* ---------- bitiş: öne çıkanlar ---------- */
.one{max-width:420px;margin:18px auto 0;text-align:left}
.one:empty{display:none}
.one .rrow b{font-size:15px;text-align:right}
.one .rrow em{font-style:normal;color:var(--muted);font-weight:500;margin-left:6px;white-space:nowrap}
.one .rrow span{white-space:nowrap;margin-right:12px}

/* ---------- telefon: tahmin sonucu kaydırmadan sığsın ----------
   Kural: oyun ekranı 375×553'e (Safari çubukları açıkken) sığmalı.
   Sonuç açılınca siluet + "Sonraki tur" düğmesi ekranın altına taşıyordu
   (yaklaşık 80 piksel). Kaç Yaşında?'daki (tahmin.css) gibi üst çubuk tek
   satıra iner, kutu ve boşluklar daralır, siluet biraz kısalır. */
@media (max-width:720px){
  .hud .stat{margin-right:9px;font-size:11px;letter-spacing:.03em}
  .hud .stat b{font-size:15px;margin-left:4px}
  .hud .linkbtn{font-size:12px;padding:2px}

  #s-guess .solo{padding:16px 14px 14px}
  #s-guess .result{padding-top:10px;margin-top:2px}
  #s-guess .rrow{padding:3px 0}
  #s-guess .track{margin-top:10px}
  #g-next{margin-top:12px !important}
  .siluet svg{height:150px}
  .supheli{font-size:11.5px;margin-top:3px;line-height:1.3}
}