/* =============================================================
   sonfiyat.css — SADECE "SON FİYAT?" OYUNUNA AİT GÖRÜNÜM
   Ortak oyun görünümü (ekranlar, hud, mod kartı, bitiş) css/oyun.css'te.
   Renkler css/tema.css'te: --sf (çini turkuazı), --sf-deep, --sf-tahta, --sf-tahta-koyu, --sf-pirinc.
   Ağır efekt yok (bulanıklık, gölge yayma): yalnızca transform ve opaklık oynar, telefon yorulmaz.
   ============================================================= */

.sf-vurgu{color:var(--sf-pirinc)}

/* ---------- sahne: oyun ekranı ortada dar bir sütun (masaüstünde de telefon gibi) ---------- */
.sf-sahne{max-width:640px;margin:0 auto}

/* ---------- Tüccarın sözü: iki satır, boyu sabit (yazı değişince ekran oynamasın) ---------- */
.sf-tuccar{
  display:flex;align-items:center;gap:10px;margin-top:8px;padding:7px 12px;min-height:54px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);
}
.sf-yuz{
  flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:21px;
  background:var(--sf-deep);
}
.sf-tuccar p{margin:0;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.sf-tuccar b{font-weight:600;font-size:14.5px;overflow-wrap:anywhere}
.sf-tuccar span{font-size:12.5px;color:var(--muted);min-height:1.25em}

/* =============================================================
   TAHTA — solda hurdalar, ortada sandıklar + öndeki sandık, sağda kıymetliler.
   Boyu sabit: 375×553'lük telefonda kaydırmadan sığar; uzun ekranda biraz büyür (aşağıda).
   ============================================================= */
.sf-tahta{display:grid;grid-template-columns:66px minmax(0,1fr) 66px;gap:6px;margin-top:8px;height:412px}

/* ---------- yan listeler: her satır bir eşya (resim + değer) ---------- */
.sf-sutun{display:grid;grid-auto-rows:1fr;gap:3px;min-height:0}
.sf-esya{
  display:flex;align-items:center;justify-content:space-between;gap:2px;min-height:0;
  padding:0 6px 0 4px;border-radius:8px;color:var(--beyaz);
  background:linear-gradient(var(--sf-hurda-a),var(--sf-hurda-b));box-shadow:0 2px 0 var(--kenar-golge);
  transition:opacity .25s,transform .25s;
}
/* sağ liste ayna gibi: değer içte, resim dışta */
.sf-sutun.sag .sf-esya{flex-direction:row-reverse;padding:0 4px 0 6px}
.sf-esya i{font-style:normal;font-size:18px;line-height:1}
.sf-esya em{display:none;font-style:normal}                     /* eşyanın adı: yalnız geniş ekranda (aşağıda) */
.sf-esya b{font:700 13.5px/1 var(--f-mono);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
/* renk skalası: hurda sönük mor-gri (yukarıdaki), kıymetli çini turkuazı, hazine altın sarısı */
.sf-esya.kademe-2{background:linear-gradient(var(--sf-cini-a),var(--sf-cini-b))}
.sf-esya.kademe-3{background:linear-gradient(var(--sf-altin-a),var(--sf-altin-b));color:var(--vurgu-yazi)}
/* sandıktan çıkıp listeden düşen eşya: soluk, üstü çizili */
.sf-esya.yok{opacity:.22;background:var(--bg-2);color:var(--muted);box-shadow:none}
.sf-esya.yok i{filter:grayscale(1)}
.sf-esya.yok b{text-decoration:line-through}
.sf-esya.yeni{animation:sf-dus .6s ease-out}
@keyframes sf-dus{
  0%{opacity:1;transform:scale(1.2)}
  100%{opacity:.2;transform:scale(1)}
}
/* oyuncunun sandığından çıkan eşya */
.sf-esya.sende{outline:2px solid var(--beyaz);outline-offset:1px;transform:scale(1.06)}

/* ---------- orta: üstte sandıklar (ya da teklif kutusu), altta öndeki sandık ---------- */
.sf-orta{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:8px;min-height:0}
.sf-alan{min-height:0;display:grid}
.sf-sandiklar,.sf-teklif{min-height:0}
.sf-sandiklar[hidden],.sf-teklif[hidden]{display:none}
.sf-sandiklar{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:5px}

/* kapalı sandık: tahta gövde, üstte kapak çizgisi, ortada pirinç kilit, altında numara */
.sf-sandik{
  position:relative;padding:0;min-width:0;min-height:0;cursor:pointer;color:var(--sf-pirinc);
  border:1px solid var(--sf-tahta-koyu);border-radius:10px 10px 7px 7px;
  background:linear-gradient(var(--sf-tahta) 0 36%,var(--sf-tahta-koyu) 36% calc(36% + 2px),var(--sf-tahta) calc(36% + 2px));
  box-shadow:0 3px 0 var(--sf-tahta-koyu);
  display:flex;align-items:flex-end;justify-content:center;
  transition:transform .08s,box-shadow .08s;
}
.sf-sandik:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 var(--sf-tahta-koyu)}
@media (hover:hover){ .sf-sandik:hover:not(:disabled){filter:brightness(1.12)} }
.sf-kilit{
  position:absolute;left:50%;top:36%;width:11px;height:12px;margin:-4px 0 0 -5.5px;
  background:var(--sf-pirinc);border:1px solid var(--sf-tahta-koyu);border-radius:2px 2px 4px 4px;
}
.sf-no{font-family:var(--f-display);font-weight:800;font-size:18px;line-height:1;padding-bottom:5px}
/* öne giden sandığın ızgarada kalan boş yeri */
.sf-sandik.bos{visibility:hidden}
/* son turda oyuncunun seçtiği (ızgaradaki) sandık */
.sf-sandik.benim{outline:2px solid var(--vurgu);outline-offset:1px}
/* sandık seçilince "emin misin?" anı: seçilen kalp gibi atar, ötekiler solar */
.sf-sandiklar.secim .sf-sandik{opacity:.3;transition:opacity .2s}
.sf-sandiklar.secim .sf-sandik.aday{opacity:1;z-index:1;outline:2px solid var(--vurgu);outline-offset:2px;animation:sf-nabiz .31s ease-in-out infinite alternate}
@keyframes sf-nabiz{
  from{transform:scale(1)}
  to{transform:scale(1.2)}
}
/* açılmadan önce titreyen sandık */
.sf-sandik.sallan{animation:sf-sallan .11s linear infinite alternate}
@keyframes sf-sallan{
  from{transform:rotate(-3deg) scale(1.04)}
  to{transform:rotate(3deg) scale(1.04)}
}
/* açık sandık: içinden çıkan eşya ve değeri */
.sf-sandik.acik{
  cursor:default;background:var(--bg);border:1px dashed var(--line);box-shadow:none;
  flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--muted);
  animation:sf-acil .22s ease-out;
}
@keyframes sf-acil{
  from{transform:scale(.8)}
  to{transform:scale(1)}
}
.sf-simge{font-size:21px;line-height:1.1}
.sf-deger{font:600 11.5px/1 var(--f-mono);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.sf-sandik.acik.kademe-2 .sf-deger{color:var(--sf)}
.sf-sandik.acik.kademe-3 .sf-deger{color:var(--vurgu)}
.sf-sandik.acik.benim{border-style:solid;border-color:var(--vurgu);background:var(--bg-2)}

/* ---------- öndeki sandık: oyuncunun kendi sandığı, ötekilerden büyük ---------- */
.sf-benim{display:flex;flex-direction:column;align-items:center;gap:3px;padding-top:7px;border-top:1px dashed var(--line)}
.sf-sandik.sf-on{width:104px;height:60px;flex:none}
.sf-sandik.sf-on.bos{visibility:visible;cursor:default;background:transparent;border:2px dashed var(--line);box-shadow:none;color:var(--line)}
.sf-sandik.sf-on .sf-no{font-size:24px;padding-bottom:5px}
.sf-sandik.sf-on.benim{outline:2px solid var(--vurgu);outline-offset:2px}
.sf-sandik.sf-on .sf-simge{font-size:27px}
.sf-sandik.sf-on .sf-deger{font-size:13.5px}
.sf-sandik.sf-on.geldi{animation:sf-geldi .32s cubic-bezier(.2,.8,.3,1.3)}
@keyframes sf-geldi{
  from{transform:translateY(-46px) scale(.55);opacity:.4}
  to{transform:none;opacity:1}
}
.sf-benim-yazi{font:700 10px/1.2 var(--f-body);letter-spacing:.1em;color:var(--vurgu)}
.sf-benim-kulak{font-size:11.5px;line-height:1.2;color:var(--sf);min-height:1.2em}

/* büyük bir eşya gidince sahne kısa bir an sarsılır */
.sf-sahne.sarsil{animation:sf-sarsil .32s linear}
@keyframes sf-sarsil{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-6px)}
  40%{transform:translateX(5px)}
  60%{transform:translateX(-4px)}
  80%{transform:translateX(3px)}
}

/* ---------- teklif kutusu (sandıkların yerinde; yan listeler ve öndeki sandık görünür kalır) ---------- */
.sf-teklif{
  display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:5px;text-align:center;
  background:linear-gradient(var(--sf-deep),var(--bg-2) 46%);border:2px solid var(--sf-cini-b);border-radius:var(--r);padding:7px 9px 9px;
}
.sf-teklif-bas{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;color:var(--sf)}
.sf-teklif-sayi{
  font-family:var(--f-mono);font-weight:600;font-size:30px;line-height:1.05;letter-spacing:-.03em;
  color:var(--vurgu);font-variant-numeric:tabular-nums;
}
.sf-teklif-sayi.yandi{color:var(--muted);text-decoration:line-through}
.sf-teklif-alt{margin:0;font-size:12px;line-height:1.25;color:var(--muted)}
.sf-teklif-alt.artti{color:var(--green)}
.sf-teklif-alt.dustu{color:var(--bad)}
.sf-teklif-kac{margin:0 0 2px;font-size:12px;line-height:1.25;color:var(--text);min-height:2.5em;text-wrap:balance}
/* Düğmeler alt alta, yerleri hiç değişmez; her birinin kendi rengi var (bakmadan bulunsun):
   Sat sarı (sitenin asıl düğmesi), Sakla çini turkuazı, Pazarlık kiremit, Kulak misafiri erguvan. */
.sf-teklif .btn{min-height:44px;padding:8px 6px;font-size:15.5px}
#t-devam{margin-top:3px}
#t-devam{background:var(--sf-cini-a);border-color:var(--sf-cini-a);color:var(--beyaz);font-weight:700;box-shadow:0 4px 0 var(--sf-cini-kenar)}
#t-devam:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 var(--sf-cini-kenar)}
@media (hover:hover){ #t-devam:hover:not(:disabled){filter:brightness(1.1)} }
.sf-ekdugme{
  font:600 12.5px/1.2 var(--f-body);color:var(--beyaz);cursor:pointer;
  border:0;border-radius:999px;padding:6px 4px;min-height:31px;margin-top:1px;
  background:var(--sf-pazarlik);box-shadow:0 3px 0 var(--sf-pazarlik-kenar);
  transition:transform .08s,box-shadow .08s;
}
#t-kulakver{background:var(--sf-kulak);box-shadow:0 3px 0 var(--sf-kulak-kenar)}
.sf-ekdugme em{font-style:normal;font-family:var(--f-mono);font-size:10.5px;opacity:.85}
.sf-ekdugme:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 var(--sf-pazarlik-kenar)}
#t-kulakver:active:not(:disabled){box-shadow:0 1px 0 var(--sf-kulak-kenar)}
@media (hover:hover){ .sf-ekdugme:hover:not(:disabled){filter:brightness(1.1)} }
.sf-ekdugme:disabled{opacity:.3;cursor:default}
.sf-ekdugme.bitti{text-decoration:line-through}

/* ---------- bitiş ---------- */
.over .big.kotu{color:var(--bad)}
.sf-ozet{max-width:420px;margin:18px auto 0;border-top:1px solid var(--line);padding-top:10px;text-align:left}
.sf-ozet .rrow b{font-size:15px;text-align:right}
.sf-ozet .sf-teklifler b{font-size:12.5px;font-weight:500;color:var(--muted);overflow-wrap:anywhere}
.sf-ozet .sf-secili{color:var(--vurgu);font-size:14px;font-weight:600}
.sf-ozet .sf-eksi{color:var(--bad)}
.sf-terfi,.sf-sonraki{margin:8px 0 0;font-size:13.5px;text-align:center}
.sf-terfi{color:var(--vurgu);font-weight:600}
.sf-sonraki{color:var(--muted)}

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

/* ---------- uzun telefon: tahta büyür (sandıklar ve satırlar irileşir) ---------- */
@media (min-height:660px){ .sf-tahta{height:500px} .sf-sandik.sf-on{height:68px} }
@media (min-height:780px){ .sf-tahta{height:580px} .sf-esya i{font-size:22px} .sf-esya b{font-size:15px} }

/* ---------- geniş ekran: yan listelerde eşyanın adı da yazar ---------- */
@media (min-width:600px){
  .sf-tahta{grid-template-columns:172px minmax(0,1fr) 172px;gap:10px}
  .sf-esya{justify-content:flex-start;gap:7px;padding:0 9px}
  .sf-sutun.sag .sf-esya{padding:0 9px}
  .sf-esya em{display:block;flex:1;min-width:0;font-size:12.5px;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sf-sutun.sag .sf-esya em{text-align:right}
  .sf-sandiklar{gap:7px}
  .sf-no{font-size:22px}
  .sf-simge{font-size:25px}
  .sf-deger{font-size:13px}
  .sf-teklif{padding:12px 16px;gap:7px}
  .sf-teklif-sayi{font-size:40px}
}

/* ---------- telefon: bitiş ekranı 375×553'e kaydırmadan sığsın ---------- */
@media (max-width:420px){
  #s-bitis .over{padding:18px 14px 16px;margin-top:0}
  #s-bitis .over h2{font-size:26px}
  #s-bitis .over .big{font-size:50px}
  #s-bitis .over .sub{margin-top:6px;font-size:13px}
  #s-bitis .over .msg{margin-top:10px;font-size:14.5px}
  #s-bitis .overbtns{margin-top:14px;gap:8px}
  #s-bitis .overbtns .btn{padding:13px 14px}
  .sf-ozet{margin-top:12px;padding-top:6px}
  .sf-ozet .rrow{font-size:13px;padding:3px 0}
  .sf-ozet .rrow b{font-size:14px}
  .sf-terfi,.sf-sonraki{margin-top:6px;font-size:13px}
}
/* çok kısa ekran (yan çevrilmiş telefon vb.): tahta alçalır, sayfa kaydırılır */
@media (max-height:500px){ .sf-tahta{height:360px} }