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

/* ---------- ortak parçalar ---------- */
.btn.buyuk{font-size:18px;padding:18px 28px;width:100%;max-width:340px}
.tnt-etiket{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.tnt-ipucu{margin:0;font-size:14px;color:var(--muted);max-width:40ch}

/* kategori yazısı: masadan okunabilsin diye kocaman */
.tnt-kategori{
  font-family:var(--f-display);font-weight:800;font-size:clamp(36px,11vw,72px);
  line-height:.95;margin:0;text-transform:uppercase;letter-spacing:.01em;
  text-wrap:balance;overflow-wrap:anywhere;
}

/* ---------- menü ---------- */
.tnt-giris{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:18px;
  align-items:center;margin-top:22px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:24px 20px;
}
.tnt-vitrin .bomba{width:min(42vw,170px);margin:0 auto}
.tnt-basla{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.tnt-etiketler{display:flex;gap:6px;flex-wrap:wrap}
.tnt-sayac{margin:0;font-family:var(--f-mono);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.tnt-sayac b{color:var(--kivilcim);font-weight:600}

.tnt-kurallar{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px;margin-top:14px}
.tnt-kutu{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:22px 20px}
.tnt-kutu h2{font-family:var(--f-display);font-weight:800;font-size:24px;margin:0 0 12px;letter-spacing:.02em}
.tnt-kutu ol,.tnt-kutu ul{margin:0;padding-left:1.3em;color:var(--muted);font-size:15px}
.tnt-kutu li{margin-bottom:9px}
.tnt-kutu li:last-child{margin-bottom:0}
.tnt-kutu li::marker{color:var(--kivilcim);font-family:var(--f-mono)}
.tnt-kutu b{color:var(--text);font-weight:600}

/* ---------- kategori hazır ekranı ---------- */
.tnt-kart{
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);
  padding:34px 20px 26px;margin-top:14px;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;
}
.tnt-kart .tnt-kategori{margin-bottom:6px}
.tnt-grup{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--kivilcim);border:1px solid var(--tnt-deep);border-radius:999px;padding:4px 10px;
}
.tnt-ikincil{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:2px}

/* ---------- oyun sırasında: site başlığı gizlenir, ekran bombaya 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}

.tnt-sahne{
  min-height:calc(100svh - 24px);
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  gap:12px;text-align:center;
}
.tnt-ust{display:flex;align-items:center;gap:8px;width:100%}
.tnt-ust .tnt-etiket{margin-right:auto}
.tnt-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 16px;min-height:44px;cursor:pointer;
}
@media (hover:hover){ .tnt-kucukbtn:hover{border-color:var(--muted)} }
.tnt-kucukbtn:active{border-color:var(--muted)}
.tnt-kucukbtn[aria-pressed="false"]{color:var(--muted)}
.tnt-bombayeri{flex:1;display:grid;place-items:center;width:100%;min-height:0}
/* çizim uzun (fitil yüzünden): genişliği ekran yüksekliğine göre sınırla */
.tnt-bombayeri .bomba{width:min(64vw,36svh,300px)}
.tnt-komut{
  font-family:var(--f-display);font-weight:800;font-size:clamp(22px,6.4vw,34px);
  line-height:1.05;margin:0 0 6px;color:var(--kivilcim);letter-spacing:.02em;
}

/* duraklatma perdesi */
.tnt-perde{
  position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:16px;
  background:var(--bg);   /* color-mix'i tanımayan eski telefonlarda perde saydam kalmasın */
  background:color-mix(in srgb, var(--bg) 94%, transparent);
}
.tnt-perde[hidden]{display:none}
.tnt-perde-ic{
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);
  padding:28px 22px;width:100%;max-width:380px;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;
}
.tnt-perde-ic h2{font-family:var(--f-display);font-weight:800;font-size:36px;margin:0;letter-spacing:.02em}
.tnt-perde-ic p{margin:0 0 4px;color:var(--muted);font-size:15px}
.tnt-perde-ic .btn{width:100%;max-width:340px}

/* ---------- TNT çizimi ---------- */
.bomba{display:block;width:100%;height:auto;overflow:visible;transition:transform .09s ease-out}
.bomba .parilti{fill:var(--tnt);opacity:.06}   /* 3 halka üst üste: ortası koyu, kenarı silik */
.bomba .cubuk-govde{fill:var(--tnt);stroke:var(--tnt-deep);stroke-width:2}
.bomba .cubuk-isik{fill:var(--tnt-acik);opacity:.55}
.bomba .cubuk-kapak{fill:var(--tnt-acik)}
.bomba .bant{fill:var(--tnt-deep);stroke:var(--kivilcim);stroke-width:3}
.bomba .bant-yazi{font-family:var(--f-display);font-weight:800;font-size:31px;letter-spacing:.1em;fill:var(--text)}

/* fitil: kalın halat, yanan ucunda turuncu köz, arkasında kül izi */
.bomba .fitil{fill:none;stroke:var(--fitil);stroke-width:7;stroke-linecap:round}
.bomba .fitil-iz{fill:none;stroke:var(--muted);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:1 9;opacity:.7}
.bomba .fitil-kor{fill:none;stroke:var(--kivilcim);stroke-width:8;stroke-linecap:round;stroke-dasharray:0 1000;stroke-dashoffset:0}

.bomba .hale{fill:var(--kivilcim);opacity:.28}
.bomba .yildiz{fill:var(--kivilcim)}
.bomba .cekirdek{fill:var(--text)}
.bomba .parca{fill:var(--kivilcim);opacity:0}
.bomba .p2,.bomba .p5,.bomba .p8{fill:var(--text)}
.bomba .p3,.bomba .p6{fill:var(--tnt-acik)}
.bomba .duman{fill:var(--muted);opacity:0}
.bomba .govde,
.bomba .parilti,
.bomba .hale,
.bomba .yildiz,
.bomba .parca,
.bomba .duman{transform-box:fill-box;transform-origin:center}

/* her tıkta bir an büyür (JavaScript "tik" sınıfını ekleyip kaldırıyor) */
.bomba.tik{transform:scale(1.05)}
.bomba.tik .parilti{opacity:.11}

/* bomba canlıyken: sallanır, köz ve kıvılcım titrer, parçacıklar saçılır, duman çıkar */
.bomba.canli .govde{animation:tnt-sallan .5s ease-in-out infinite}
.bomba.canli .fitil-kor{animation:tnt-kor .18s steps(2) infinite}
.bomba.canli .hale{animation:tnt-hale .35s ease-in-out infinite alternate}
.bomba.canli .yildiz{animation:tnt-titre .12s steps(2) infinite}
.bomba.canli .parca{animation:tnt-sac .9s ease-out infinite}
.bomba.canli .duman{animation:tnt-duman 1.8s ease-out infinite}
.bomba .p1{--dx:38px;--dy:-26px}
.bomba .p2{--dx:-30px;--dy:-38px;animation-delay:-.12s !important}
.bomba .p3{--dx:42px;--dy:14px;animation-delay:-.25s !important}
.bomba .p4{--dx:-8px;--dy:-48px;animation-delay:-.37s !important}
.bomba .p5{--dx:-40px;--dy:6px;animation-delay:-.5s !important}
.bomba .p6{--dx:18px;--dy:40px;animation-delay:-.6s !important}
.bomba .p7{--dx:-22px;--dy:34px;animation-delay:-.7s !important}
.bomba .p8{--dx:28px;--dy:-44px;animation-delay:-.8s !important}
.bomba .d1{--dx:-10px;animation-delay:0s}
.bomba .d2{--dx:12px;animation-delay:-.6s !important}
.bomba .d3{--dx:-2px;animation-delay:-1.2s !important}

@keyframes tnt-sallan{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes tnt-kor{0%{opacity:1}100%{opacity:.55}}
@keyframes tnt-hale{0%{transform:scale(.7)}100%{transform:scale(1.35)}}
@keyframes tnt-titre{0%{transform:scale(.8) rotate(0deg)}100%{transform:scale(1.3) rotate(22deg)}}
@keyframes tnt-sac{0%{transform:translate(0,0) scale(1.2);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(.4);opacity:0}}
@keyframes tnt-duman{0%{transform:translate(0,0) scale(.6);opacity:.45}100%{transform:translate(var(--dx),-60px) scale(2.4);opacity:0}}

/* ---------- patladı ekranı ---------- */
.tnt-patladi{
  min-height:calc(100svh - 24px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;
}
.bum{width:min(66vw,300px);height:auto;overflow:visible;transform-origin:center}
.bum-dis{fill:var(--kivilcim)}
.bum-ic{fill:var(--tnt)}
.bum text{font-family:var(--f-display);font-weight:800;font-size:56px;letter-spacing:.02em;fill:var(--text)}
#s-patladi.live .bum{animation:tnt-patla .55s cubic-bezier(.2,1.5,.4,1) both}
.tnt-patladi h2{
  font-family:var(--f-display);font-weight:800;font-size:clamp(46px,14vw,84px);
  line-height:.9;margin:6px 0 0;text-transform:uppercase;letter-spacing:.01em;
}
.tnt-kaybeden{font-size:19px;margin:0;max-width:30ch}
.tnt-kaybeden b{color:var(--kivilcim)}
.tnt-ozet{font-family:var(--f-mono);font-size:12.5px;color:var(--muted);margin:0;font-variant-numeric:tabular-nums}
.tnt-dugmeler{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;margin-top:10px}
.tnt-dugmeler .btn{width:100%;max-width:340px}

@keyframes tnt-patla{0%{transform:scale(.2) rotate(-25deg);opacity:0}100%{transform:scale(1) rotate(0deg);opacity:1}}

/* patlama anında ekran bir kez parlar ve sarsılır */
.tnt-flas{position:fixed;inset:0;z-index:50;background:var(--kivilcim);opacity:0;pointer-events:none}
.tnt-flas.ates{animation:tnt-flas .7s ease-out forwards}
.sars{animation:tnt-sars .45s linear}
@keyframes tnt-flas{0%{opacity:.9}100%{opacity:0}}
@keyframes tnt-sars{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(-10px,6px)} 40%{transform:translate(9px,-8px)}
  60%{transform:translate(-6px,-4px)} 80%{transform:translate(5px,5px)}
}

/* ---------- hareket azaltma tercihi: sallanma, parlama, sarsıntı yok ---------- */
@media (prefers-reduced-motion:reduce){
  .bomba.canli .govde,
  .bomba.canli .fitil-kor,
  .bomba.canli .hale,
  .bomba.canli .yildiz,
  .bomba.canli .parca,
  .bomba.canli .duman,
  #s-patladi.live .bum,
  .tnt-flas.ates,
  .sars{animation:none !important}
  .bomba.tik{transform:none}
}