/* =============================================================
   zaman.css — SADECE "ZAMAN ÇİZELGESİ" OYUNUNA AİT GÖRÜNÜM
   Ortak oyun görünümü (ekranlar, hud, mod kartları, bitiş) css/oyun.css'te.
   Renkler css/tema.css'te: --zaman (açık eflatun: etiketler, çizginin noktaları), --zaman-deep (çizginin kendisi).
   Ağır efekt yok (bulanıklık, gölge yayma): yalnızca transform ve opaklık oynar, telefon yorulmaz.
   ============================================================= */

/* ---------- menü: günlük kart ---------- */
.zc-gunluk{margin-top:14px;border-color:var(--zaman-deep);background:linear-gradient(160deg,var(--bg-2),var(--bg) 140%)}
.zc-mod-ust{display:flex;align-items:center;justify-content:space-between;gap:10px}
.zc-yenilenme{font-size:12.5px !important}
.zc-yenilenme b{color:var(--text);font-family:var(--f-mono);font-weight:600;font-variant-numeric:tabular-nums}
.zc-gunluk-alt{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:4px}
.zc-gunluk-alt .best{border:none;padding:0;margin:0;flex:1;min-width:160px}
.zc-gunluk-alt .best .kare{letter-spacing:1px;white-space:nowrap}
.zc-seri-rozet{
  display:inline-flex;align-items:center;gap:5px;font-family:var(--f-mono);font-size:12px;
  color:var(--kivilcim);border:1px solid var(--line);border-radius:999px;padding:3px 10px 3px 7px;
}
.zc-seri-rozet[hidden]{display:none}
.zc-seri-rozet b{font-weight:600;font-variant-numeric:tabular-nums}
.zc-seri-rozet .alev-svg{width:14px;height:14px;fill:currentColor}

/* ---------- menü: masada modu oyuncu listesi ---------- */
.zc-oyuncu-kutu{display:flex;flex-direction:column;gap:8px;margin-top:6px;border-top:1px dashed var(--line);padding-top:12px}
.zc-isim-satir{display:flex;gap:8px}
.zc-isim-satir input[type="text"]{font:500 16px var(--f-body);padding:10px 12px;text-align:left;letter-spacing:0}
.zc-isim-satir .btn{padding:10px 16px;font-size:14px}
.zc-uyari{margin:0;font-size:12.5px;color:var(--bad)}
.zc-uyari:empty{display:none}
.zc-bos{margin:0;font-size:12.5px;color:var(--muted)}
.zc-bos[hidden],.zc-isimler[hidden]{display:none}
.zc-isimler{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.zc-isimler li{
  display:flex;align-items:center;gap:4px;background:var(--bg);border:1px solid var(--line);
  border-radius:999px;padding:4px 4px 4px 12px;font-size:14px;
}
.zc-sil{
  width:26px;height:26px;border-radius:50%;border:none;background:transparent;color:var(--muted);
  font:500 17px/1 var(--f-body);cursor:pointer;display:grid;place-items:center;
}
@media (hover:hover){ .zc-sil:hover{color:var(--text);background:var(--line-soft)} }
.zc-sil:active{color:var(--text);background:var(--line-soft)}

/* ---------- menü: kurallar (numaralı kısa liste) ---------- */
.zc-kurallar{margin:26px 0 0;padding:0 0 0 12px;border-left:2px solid var(--zaman-deep);max-width:66ch;font-size:13px;color:var(--muted)}
.zc-kurallar b{color:var(--text)}
.zc-kurallar ol{margin:6px 0 0;padding-left:20px}
.zc-kurallar li{margin:4px 0}
.note a{color:var(--text)}


/* =============================================================
   OYUN EKRANI — yukarıdan aşağı: üst çubuk · (masada: puanlar) · kart · çizgi · alt bilgi · sarı düğme
   Sütunun boyu ekrana göre ayarlanır; artan yer çizgiye kalır. Kartın ve alt bilginin boyu SABİT:
   yazı değişince düğme yerinden oynamaz. Çizgi uzayınca kendi kutusunun içinde kayar, sayfa kaymaz.
   --zc-yil: yıl sütununun eni (çizgi bu sütunun sağından geçer).
   ============================================================= */
.zc-sahne{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:8px;--zc-yil:64px}
@supports (height:100svh){
  body.sahnede .zc-sahne{height:calc(100svh - 24px);min-height:440px;max-height:900px}
}

/* üst çubuk */
.zc-sahne .hud{flex:none;flex-wrap:nowrap}
.zc-sahne .hud > div{display:flex;align-items:center}
.zc-canlar{display:inline-flex;gap:3px;margin-right:0 !important}
.zc-canlar[hidden]{display:none}
.zc-canlar i{font-style:normal;font-size:18px;line-height:1;color:var(--bad)}
.zc-canlar i.bos{color:var(--line)}

/* masada: puan çipleri (tek satır; isimler sığmazsa kısalır) */
.zc-skor{flex:none;display:flex;gap:5px}
.zc-skor[hidden]{display:none}
.zc-skor span{
  flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:4px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:9px;padding:4px 7px;font-size:12.5px;color:var(--muted);
}
.zc-skor em{font-style:normal;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zc-skor b{flex:none;font-family:var(--f-mono);font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.zc-skor span.sirada{border-color:var(--vurgu);color:var(--text)}
/* 5–6 oyuncu: iki sıra (üçer üçer), isimler kısalmasın */
.zc-skor.kalabalik{flex-wrap:wrap}
.zc-skor.kalabalik span{flex-basis:30%;padding-block:3px}

/* ---------- yerleştirilecek kart (boyu sabit) ---------- */
.zc-kart{
  flex:none;height:84px;padding:6px 14px;display:flex;flex-direction:column;justify-content:center;gap:4px;
  background:var(--bg-2);border:1.5px solid var(--zaman-deep);border-radius:var(--r);text-align:center;overflow:hidden;
}
.zc-etiket{font-size:12px;font-weight:600;color:var(--zaman);letter-spacing:.02em;line-height:1.25}
.zc-etiket b{font-family:var(--f-mono);font-weight:600;font-variant-numeric:tabular-nums;color:var(--text)}
.zc-etiket .zc-sira{font-family:var(--f-body);color:var(--vurgu)}
.zc-olay{margin:0;font-weight:600;font-size:18px;line-height:1.22;text-wrap:balance}
.zc-olay.uzun{font-size:16px}
.zc-kart.dogru{border-color:var(--green)}
.zc-kart.yanlis{border-color:var(--bad)}

/* =============================================================
   ZAMAN ÇİZGİSİ — her satır: solda yıl, sağda olay; ikisinin arasından dikey çizgi geçer.
   Satırların arasındaki ince düğmeler (.zc-ara) kartın konabileceği yerler.
   Aynı çizim bitiş ekranındaki "ortaya çıkan çizelge"de de kullanılır (.zc-cizgi.son).
   ============================================================= */
.zc-cizgi{
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:4px 10px 4px 0;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
}
/* eski tarayıcı (svh yok): sütun boyu ayarlanamaz, çizgi en çok yarım ekran olsun */
@supports not (height:100svh){ .zc-cizgi{max-height:50vh} }

.zc-satir{
  display:grid;grid-template-columns:var(--zc-yil) 1fr;align-items:stretch;width:100%;
  background:none;border:0;padding:0;margin:0;color:inherit;font:inherit;text-align:left;
}
.zc-yil{
  align-self:center;padding-right:11px;text-align:right;white-space:nowrap;
  font:600 14.5px/1 var(--f-mono);font-variant-numeric:tabular-nums;color:var(--text);
}
.zc-yil.mo{font-size:12px;letter-spacing:-.02em}
.zc-yazi{
  position:relative;border-left:2px solid var(--zaman-deep);padding:6px 0 6px 13px;
  font-size:14px;line-height:1.22;color:var(--text);
}
/* çizginin üstündeki nokta */
.zc-yazi::before{
  content:"";position:absolute;left:-6px;top:50%;width:10px;height:10px;margin-top:-5px;
  border-radius:50%;background:var(--zaman);
}
.zc-carpi{font-style:normal;color:var(--bad);font-weight:700;margin-left:2px}
.zc-kim{color:var(--muted);font-size:12px;white-space:nowrap}

/* yanlış konmuş kart: yılı ve noktası kırmızı kalır (çizgide o yanlışın izi) */
.zc-satir.yanlis .zc-yil{color:var(--bad)}
.zc-satir.yanlis .zc-yazi::before{background:var(--bad)}
/* yeni oturan kart bir an parlar */
.zc-satir.yeni.dogru{animation:zc-parla-iyi .9s ease-out}
.zc-satir.yeni.dogru .zc-yil{color:var(--green)}
.zc-satir.yeni.dogru .zc-yazi::before{background:var(--green)}
.zc-satir.yeni.yanlis{animation:zc-parla-kotu .9s ease-out}
@keyframes zc-parla-iyi{ 0%,35%{background:var(--kt-dogru-zemin)} 100%{background:transparent} }
@keyframes zc-parla-kotu{ 0%,35%{background:var(--kt-yanlis-zemin)} 100%{background:transparent} }

/* ---------- aralar: kartın konabileceği yerler ---------- */
.zc-ara,.zc-bosluk{
  display:grid;grid-template-columns:var(--zc-yil) 1fr;align-items:stretch;width:100%;height:14px;
  background:none;border:0;padding:0;margin:0;color:var(--muted);font:500 11.5px/1 var(--f-body);
}
.zc-ara{cursor:pointer}
.zc-ara i,.zc-bosluk i{grid-column:2;position:relative;border-left:2px solid var(--zaman-deep)}
/* aranın yeri: çizgiden sağa uzanan kesik çizgi, başında küçük halka */
.zc-ara i::before{
  content:"";position:absolute;left:-6px;top:50%;width:6px;height:6px;margin-top:-5px;
  border-radius:50%;border:2px solid var(--zaman-deep);background:var(--bg-2);
}
.zc-ara i::after{content:"";position:absolute;left:10px;right:0;top:50%;border-top:1px dashed var(--line)}
.zc-ara span{grid-column:1;grid-row:1;align-self:center;text-align:right;padding-right:11px;white-space:nowrap;font-size:10.5px}
@media (hover:hover){
  .zc-ara:hover i::before{border-color:var(--vurgu)}
  .zc-ara:hover i::after{border-top-color:var(--vurgu)}
}
.zc-ara:active i::before{border-color:var(--vurgu)}
.zc-ara:active i::after{border-top-color:var(--vurgu)}
/* çizgi kısayken aralar yüksek (kolay dokunulsun), uzadıkça incelir */
.zc-cizgi.az .zc-ara,.zc-cizgi.az .zc-bosluk{height:34px}
.zc-cizgi.orta .zc-ara,.zc-cizgi.orta .zc-bosluk{height:22px}
.zc-cizgi.az .zc-yazi{padding-block:9px;font-size:15px}
.zc-cizgi.orta .zc-yazi{padding-block:7px}
/* çizgi uzayınca satırlar sıkışır: ekrana daha çok olay sığsın (dokunma alanı satırların kendisi, bkz. oyun-zaman.js) */
.zc-cizgi.cok .zc-ara,.zc-cizgi.cok .zc-bosluk{height:12px}
.zc-cizgi.cok .zc-yazi{padding-block:4px;font-size:13.5px}

/* ---------- seçilen arada bekleyen kart ("?" yılıyla; bir daha dokununca yerleşir) ---------- */
.zc-satir.bekleyen{cursor:pointer;margin-block:2px}
.zc-satir.bekleyen .zc-yil{color:var(--vurgu);font-size:17px}
.zc-satir.bekleyen .zc-yazi{
  border:2px solid var(--vurgu);border-radius:10px;background:var(--bg);padding:8px 11px;font-weight:600;
}
.zc-satir.bekleyen .zc-yazi::before{left:-6px;background:var(--vurgu)}
/* yanlış konan kart: kaymadan önce konduğu yerde kızarır */
.zc-satir.yanlis-yer{margin-block:2px}
.zc-satir.yanlis-yer .zc-yil{color:var(--bad)}
.zc-satir.yanlis-yer .zc-yazi{border:2px solid var(--bad);border-radius:10px;background:var(--kt-yanlis-zemin);padding:8px 11px;font-weight:600}
.zc-satir.yanlis-yer .zc-yazi::before{background:var(--bad)}

/* ---------- alt bilgi (boyu sabit: iki satır) ve sarı düğme ---------- */
.zc-alt{
  flex:none;height:34px;margin:0;display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:13px;line-height:1.3;color:var(--muted);overflow:hidden;
}
.zc-alt b{color:var(--text);font-weight:600}
.zc-alt .zc-iyi{color:var(--green)}
.zc-alt .zc-kotu{color:var(--bad)}
.zc-dugme{flex:none;width:100%;padding:14px 18px;font-size:16px;margin-bottom:4px}
.zc-klavye{flex:none;text-align:center;margin:0}


/* =============================================================
   BİTİŞ
   ============================================================= */
#b-sayi[hidden],#b-track[hidden]{display:none}
#b-sayi.kotu{color:var(--bad)}
#b-rekor:empty,#b-mesaj:empty{display:none}

/* masada: sıralama */
.zc-siralama{list-style:none;margin:18px auto 0;padding:0;max-width:420px;text-align:left;display:flex;flex-direction:column;gap:6px}
.zc-siralama[hidden]{display:none}
.zc-siralama li{display:flex;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:9px 12px}
.zc-siralama li.birinci{border-color:var(--vurgu)}
.zc-sira-no{flex:none;width:22px;font-family:var(--f-mono);font-size:13px;color:var(--muted)}
.zc-sira-ad{flex:1;min-width:0;font-size:15px;font-weight:600}
.zc-sira-ad small{display:block;margin-top:3px;font-size:11px;font-weight:400;letter-spacing:1px}
.zc-sira-puan{flex:none;font-family:var(--f-mono);font-size:20px;font-weight:600;font-variant-numeric:tabular-nums}
.zc-siralama li.birinci .zc-sira-puan{color:var(--vurgu)}

/* ortaya çıkan çizelge: oyundaki çizginin aynısı, kaymaz, dokunulmaz */
.zc-son-baslik{margin:28px 0 8px;font-family:var(--f-display);font-weight:800;font-size:20px;letter-spacing:.01em}
.zc-cizgi.son{
  --zc-yil:64px;overflow:visible;max-height:none;max-width:480px;margin:0 auto;text-align:left;
  background:var(--bg);padding:8px 12px 8px 0;
}
.zc-cizgi.son .zc-bosluk{height:6px}

/* ---------- oynarken site başlığı ve alt bilgi gizlenir (oyun-zaman.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} }

/* ---------- telefon ---------- */
@media (max-width:720px){
  .zc-sahne .hud .stat{margin-right:12px;font-size:11px;letter-spacing:.03em}
  .zc-sahne .hud .stat b{font-size:15px;margin-left:4px}
  .zc-sahne .hud .linkbtn{font-size:12px;padding:2px}
}
/* kısa ekran (Safari çubukları açıkken 375×553): kart ve düğme biraz alçalır, çizgiye yer kalır */
@media (max-height:600px){
  .zc-kart{height:74px}
  .zc-olay{font-size:17px}
  .zc-olay.uzun{font-size:15px}
  .zc-dugme{padding:12px 18px}
  .zc-cizgi.az .zc-ara,.zc-cizgi.az .zc-bosluk{height:28px}
}
@media (max-width:420px){
  #s-bitis .over{padding:20px 14px 18px;margin-top:0}
  #s-bitis .over h2{font-size:26px}
  #s-bitis .over .big{font-size:56px}
  #s-bitis .overbtns{margin-top:16px;gap:8px}
  #s-bitis .overbtns .btn{padding:13px 14px}
  .zc-cizgi.son .zc-yazi{font-size:13.5px}
}