/* =============================================================
   dortluk.css — SADECE "DÖRT DÖRTLÜK" 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: --dd-1 … --dd-4 (grupların renkleri: sarı, yeşil, mavi, mor),
   --dd-yazi (renkli şeridin üstündeki koyu yazı), --dd-deep (menü kartının kenarı).
   Ağır efekt yok (bulanıklık, gölge yayma): yalnızca transform ve opaklık oynar, telefon yorulmaz.
   ============================================================= */

/* grup renkleri: g0 sarı (en kolay) · g1 yeşil · g2 mavi · g3 mor (en zor) */
.g0{--g:var(--dd-1)} .g1{--g:var(--dd-2)} .g2{--g:var(--dd-3)} .g3{--g:var(--dd-4)}

/* ---------- menü: günlük kart ---------- */
.dd-gunluk{margin-top:14px;border-color:var(--dd-deep);background:linear-gradient(160deg,var(--bg-2),var(--bg) 140%)}
.dd-mod-ust{display:flex;align-items:center;justify-content:space-between;gap:10px}
.dd-yenilenme{font-size:12.5px !important}
.dd-yenilenme b{color:var(--text);font-family:var(--f-mono);font-weight:600;font-variant-numeric:tabular-nums}
.dd-gunluk-alt{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:4px}
.dd-gunluk-alt .best{border:none;padding:0;margin:0;flex:1;min-width:160px}
.dd-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;
}
.dd-seri-rozet[hidden]{display:none}
.dd-seri-rozet b{font-weight:600;font-variant-numeric:tabular-nums}
.dd-seri-rozet .alev-svg{width:14px;height:14px;fill:currentColor}

/* ---------- menü: önceki bulmacalar (numaralı kutular) ---------- */
.dd-arsiv-kutu{margin-top:14px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-buyuk);padding:20px}
.dd-arsiv-ust{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.dd-arsiv-ust h2{font-family:var(--f-display);font-weight:800;font-size:24px;margin:0;line-height:1;letter-spacing:.01em}
.dd-arsiv-ust span{font-size:12.5px;color:var(--muted)}
.dd-arsiv{list-style:none;margin:14px 0 0;padding:0 0 3px;display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:8px}
.dd-arsiv:empty{display:none}
.dd-no{
  width:100%;height:54px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:0;cursor:pointer;
  background:var(--bg);border:1px solid var(--line);border-radius:10px;box-shadow:0 3px 0 var(--line);color:var(--text);
  transition:transform .08s,box-shadow .08s,border-color .15s;
}
.dd-no b{font-family:var(--f-mono);font-weight:600;font-size:14px;font-variant-numeric:tabular-nums;line-height:1.1}
.dd-no span{font-size:13px;line-height:1;height:13px;color:var(--muted)}
.dd-no:active{transform:translateY(2px);box-shadow:0 1px 0 var(--line)}
@media (hover:hover){ .dd-no:hover{border-color:var(--muted)} }
.dd-no.hatasiz{border-color:var(--vurgu-kenar)} .dd-no.hatasiz span{color:var(--vurgu)}
.dd-no.cozuldu{border-color:var(--green-deep)}  .dd-no.cozuldu span{color:var(--green)}
.dd-no.olmadi span{color:var(--bad)}
.dd-no.yarim{border-style:dashed}
.dd-arsiv-not{margin:12px 0 0;font-size:12.5px;color:var(--muted)}
.dd-arsiv-not[hidden],.dd-inceleme[hidden]{display:none}
.dd-arsiv-kutu .chip{margin-top:12px}
.dd-inceleme{margin:14px 0 0;font-size:12.5px;color:var(--muted)}

/* ---------- menü: kurallar (numaralı kısa liste) ---------- */
.dd-kurallar{margin:26px 0 0;padding:0 0 0 12px;border-left:2px solid var(--dd-deep);max-width:66ch;font-size:13px;color:var(--muted)}
.dd-kurallar b{color:var(--text)}
.dd-kurallar ol{margin:6px 0 0;padding-left:20px}
.dd-kurallar li{margin:4px 0}
.dd-renk{display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--g);margin:0 1px 0 3px}


/* =============================================================
   OYUN EKRANI — yukarıdan aşağı: üst çubuk · tahta (4 satır) · yazı + haklar · düğmeler
   Sütunun boyu ekrana göre ayarlanır; artan yer tahtaya kalır. Tahta hep 4 satırdır:
   bulunan grup bir satırlık şerit olur, kalan kelimeler altında dörder dizilir.
   Düğmelerin yeri hiç değişmez.
   ============================================================= */
.dd-sahne{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:8px}
@supports (height:100svh){
  body.sahnede .dd-sahne{height:calc(100svh - 24px);min-height:440px;max-height:700px}
}
.dd-sahne .hud{flex:none;flex-wrap:nowrap}

.dd-tahta{
  flex:1 1 auto;min-height:288px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:6px;
  padding-bottom:3px;   /* kutuların alt gölgesi için yer */
  -webkit-user-select:none;user-select:none;
}

/* ---------- kelime kutusu ---------- */
.dd-kare{
  min-width:0;min-height:0;padding:2px 3px;display:grid;place-items:center;cursor:pointer;overflow:hidden;
  background:var(--bg-2);border:1px solid var(--line);border-radius:10px;box-shadow:0 3px 0 var(--line);
  color:var(--text);font-family:var(--f-display);font-weight:800;font-size:21px;line-height:1.05;letter-spacing:.02em;
  text-align:center;overflow-wrap:anywhere;
  transition:transform .08s,box-shadow .08s,background-color .12s,color .12s,border-color .12s;
}
/* uzun kelimede yazı küçülür (oyun-dortluk.js en uzun parçanın harf sayısını yazar) */
.dd-kare.u-7{font-size:19px}
.dd-kare.u-8{font-size:17px}
.dd-kare.u-9{font-size:15.5px;letter-spacing:.01em}
.dd-kare.u-10{font-size:14px;letter-spacing:0}
.dd-kare.u-11{font-size:13px;letter-spacing:0}
.dd-kare.u-12{font-size:12px;letter-spacing:0}
.dd-kare:active{transform:translateY(2px);box-shadow:0 1px 0 var(--line)}
@media (hover:hover){ .dd-kare:hover{border-color:var(--muted)} }
/* seçili kelime: açık zemin, koyu yazı (sarı değil: sarı yalnız asıl düğmenin rengi) */
.dd-kare.secili{background:var(--text);border-color:var(--text);color:var(--bg);box-shadow:0 3px 0 var(--muted)}

/* yanlış deneme: seçili kelimeler iki yana sallanır */
.dd-kare.salla{animation:dd-salla .32s}
@keyframes dd-salla{ 25%{transform:translateX(-5px)} 50%{transform:translateX(5px)} 75%{transform:translateX(-3px)} }
/* doğru grup: kelimeler sırayla zıplar, sonra şeride dönüşür */
.dd-kare.bildi{animation:dd-zipla .34s ease-out both}
@keyframes dd-zipla{ 40%{transform:translateY(-9px)} 100%{transform:translateY(0)} }

/* ---------- bulunan grup: bir satır boyunca renkli şerit ---------- */
.dd-grup{
  grid-column:1 / -1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:4px 10px;border-radius:10px;background:var(--g);color:var(--dd-yazi);text-align:center;overflow:hidden;
}
.dd-grup b{font-family:var(--f-display);font-weight:800;font-size:20px;line-height:1.05;letter-spacing:.02em;text-transform:uppercase;text-wrap:balance}
.dd-grup span{font-size:13.5px;font-weight:600;line-height:1.2}
.dd-grup.yeni{animation:dd-otur .26s ease-out}
@keyframes dd-otur{ from{transform:scale(.94);opacity:.4} }
/* oyuncunun bulamadığı, sonradan açılan grup: içi boş, yalnız çerçevesi renkli */
.dd-grup.acildi{background:none;box-shadow:inset 0 0 0 2px var(--g);color:var(--g)}

/* ---------- tahtanın altı: tek satır yazı + kalan haklar (boyu sabit) ---------- */
.dd-alt{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;padding:2px 0}
.dd-mesaj{margin:0;height:20px;font-size:14.5px;line-height:20px;color:var(--muted);text-align:center;white-space:nowrap}
.dd-mesaj.iyi{color:var(--green);font-weight:600}
.dd-mesaj.kotu{color:var(--bad)}
.dd-mesaj.uyari{color:var(--vurgu);font-weight:600}
.dd-hak{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--muted);line-height:1}
.dd-haklar{display:flex;gap:6px}
.dd-haklar i{display:block;width:11px;height:11px;border-radius:50%;background:var(--text)}
.dd-haklar i.gitti{background:none;box-shadow:inset 0 0 0 1.5px var(--line)}

/* ---------- düğmeler: Karıştır · Temizle · Gönder (sarı, hep aynı yerde) ---------- */
.dd-dugmeler{flex:none;display:grid;grid-template-columns:1fr 1fr 1.5fr;gap:8px;margin-bottom:4px}
.dd-dugmeler .btn{padding:14px 6px;min-width:0}
.dd-sahne.bitti .dd-dugmeler{grid-template-columns:1fr}
.dd-sahne.bitti #o-karistir,.dd-sahne.bitti #o-temizle{display:none}
.dd-sahne.bitti .dd-tahta{pointer-events:none}
.dd-klavye{flex:none;text-align:center;margin:0}

/* ---------- bitiş ---------- */
.dd-sonuc{font-family:var(--f-display);font-weight:800;font-size:clamp(34px,9vw,48px);line-height:1;letter-spacing:.01em;color:var(--green);margin:6px 0 0}
.dd-sonuc.hatasiz{color:var(--vurgu)}
.dd-sonuc.kotu{color:var(--bad)}
/* deneme deneme kareler (paylaşım metnindeki 🟨🟩🟦🟪 ile aynı) */
.dd-kareler{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:16px}
.dd-kareler div{display:flex;gap:4px}
.dd-kareler i{display:block;width:22px;height:22px;border-radius:5px;background:var(--g)}
.dd-gruplar{list-style:none;margin:18px auto 0;padding:0;max-width:480px;display:flex;flex-direction:column;gap:6px}
.dd-gruplar .dd-grup{padding:9px 12px}
.dd-gruplar .dd-grup b{font-size:19px}
.dd-gruplar .dd-grup em{font:600 11.5px var(--f-body);font-style:normal;text-transform:none;letter-spacing:0;opacity:.85;margin-left:4px;white-space:nowrap}
.dd-gruplar .dd-grup small{font-size:12px;line-height:1.25;opacity:.8}
#b-menu[hidden],#b-bastan[hidden]{display:none}

/* ---------- oynarken site başlığı ve alt bilgi gizlenir (oyun-dortluk.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){
  .dd-sahne .hud .stat{margin-right:10px;font-size:11px;letter-spacing:.03em}
  .dd-sahne .hud .stat b{font-size:15px;margin-left:4px}
  .dd-sahne .hud .linkbtn{font-size:12px;padding:2px}
}
/* dar telefonda (≤360px) kutular daralır: yazılar bir kademe küçülür */
@media (max-width:360px){
  .dd-kare{font-size:17.5px;letter-spacing:.01em}   /* M'li kelimeler (MÜRDÜM, MERMER) geniştir: 19px'te iki satıra bölünüyordu */
  .dd-kare.u-7{font-size:16px}
  .dd-kare.u-8{font-size:14px}
  .dd-kare.u-9{font-size:13px}
  .dd-kare.u-10{font-size:12px}
  .dd-kare.u-11,.dd-kare.u-12{font-size:11px}
  .dd-grup b{font-size:18px}
  .dd-grup span{font-size:12.5px}
}
/* geniş ekranda (tablet, bilgisayar) kutular büyür: yazılar da büyüsün */
@media (min-width:520px){
  .dd-kare{font-size:26px}
  .dd-kare.u-7{font-size:25px}
  .dd-kare.u-8{font-size:23px}
  .dd-kare.u-9{font-size:21px}
  .dd-kare.u-10{font-size:19px}
  .dd-kare.u-11{font-size:17.5px}
  .dd-kare.u-12{font-size:16px}
  .dd-grup b{font-size:23px}
  .dd-grup span{font-size:15px}
}
@media (max-width:420px){
  #s-bitis .over{padding:22px 14px 18px;margin-top:0}
  #s-bitis .over h2{font-size:24px}
  #s-bitis .overbtns{margin-top:18px;gap:8px}
  #s-bitis .overbtns .btn{padding:13px 14px}
  .dd-arsiv-kutu{padding:16px}
}