/* Keyfi 101 — eli bitirme: BİT! kutusu ve bitiş efektleri (bkz. js/bitis.js) */

/* ————————————————————————————— BİT! kutusu

   Elde tek taş kalıp taş atma sırası gelince (bitmek zorunda kalınca)
   masanın tam ortasında belirir; son taş buraya bırakılınca el biter. Kutu
   yavaşça nabız gibi parlar; taş üstüne gelince büyür. El bittiğinde son taş
   bu kutuda durur ve bitiş efekti buradan başlar. */
.bit-kutu {
  position: absolute; left: 50%; top: 507px; z-index: 30;
  width: 196px; height: 172px; margin: -86px 0 0 -98px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background:
    radial-gradient(70% 60% at 50% 40%, rgba(242, 208, 137, .16), rgba(242, 208, 137, 0) 75%),
    rgba(9, 11, 16, .8);
  border: 2px dashed rgba(242, 208, 137, .85);
  border-radius: 18px;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, .35), 0 0 28px rgba(242, 208, 137, .32), inset 0 0 24px rgba(242, 208, 137, .14);
  animation: bit-nabiz 1.4s ease-in-out infinite;
  transition: transform .15s, border-color .15s;
}
.bit-kutu[hidden] { display: none; }
.bit-yazi {
  font-size: 42px; font-weight: 900; letter-spacing: 2px; line-height: 1;
  background: linear-gradient(180deg, #fff3c4 0%, #f2d089 45%, #d7a53f 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 rgba(60, 40, 5, .9)) drop-shadow(0 0 10px rgba(242, 208, 137, .35));
}
.bit-yuva {
  width: 54px; height: 76px;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, .32);
  border: 2px dashed rgba(242, 208, 137, .55);
  border-radius: 8px;
}
.bit-yuva .tile { position: static; --ts: 1.12; }
.bit-kutu.is-over {
  transform: scale(1.07);
  border-style: solid; border-color: #ffe08f;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, .35), 0 0 44px rgba(255, 224, 143, .6), inset 0 0 30px rgba(255, 224, 143, .25);
}
.bit-kutu.is-over .bit-yuva { border-color: #ffe08f; background: rgba(255, 224, 143, .12); }
/* El bitti: son taş kutuda; nabız durur. */
.bit-kutu.is-dolu { animation: none; border-style: solid; }
.bit-kutu.is-dolu .bit-yuva { background: none; border-color: transparent; }
@keyframes bit-nabiz {
  0%, 100% { box-shadow: 0 0 0 4px rgba(0, 0, 0, .35), 0 0 22px rgba(242, 208, 137, .25), inset 0 0 20px rgba(242, 208, 137, .1); }
  50% { box-shadow: 0 0 0 4px rgba(0, 0, 0, .35), 0 0 40px rgba(242, 208, 137, .55), inset 0 0 28px rgba(242, 208, 137, .22); }
}

/* ————————————————————————————— efekt katmanı */

.ef-katman { position: absolute; inset: 0; z-index: 900; pointer-events: none; overflow: hidden; transition: opacity .25s; }
.ef-katman.is-bitiyor { opacity: 0; }
.ef-svg { position: absolute; left: 0; top: 0; overflow: visible; }

/* Çarpmada masa hafifçe sarsılır (ölçeği bozmasın diye ayrı `translate`). */
.ef-sarsinti .play-field { animation: ef-sarsinti .34s linear; }
@keyframes ef-sarsinti {
  0%, 100% { translate: 0 0; }
  15% { translate: -7px 4px; }
  30% { translate: 6px -3px; }
  45% { translate: -5px 2px; }
  60% { translate: 4px -2px; }
  80% { translate: -2px 1px; }
}

/* Ekranın bir an ağarması (yıldırım mavimsi, alev turuncu). */
.ef-flas { position: absolute; inset: 0; opacity: 0; animation: ef-flas .5s ease-out forwards; }
.ef-flas.is-yildirim { background: radial-gradient(circle at 50% 45%, rgba(225, 242, 255, .8), rgba(120, 180, 255, .22) 50%, rgba(0, 0, 0, 0) 82%); }
.ef-flas.is-alev { background: radial-gradient(circle at 50% 55%, rgba(255, 214, 130, .75), rgba(255, 110, 30, .22) 50%, rgba(0, 0, 0, 0) 82%); }
@keyframes ef-flas { 0% { opacity: 0; } 8% { opacity: 1; } 100% { opacity: 0; } }

/* Çarpma noktası: ışık patlaması, yayılan halka, kıvılcımlar. */
.ef-patlama {
  position: absolute;
  width: 190px; height: 190px; margin: -95px 0 0 -95px;
  border-radius: 50%;
  opacity: 0;
  animation: ef-patlama .62s ease-out forwards;
}
.ef-patlama.is-yildirim { background: radial-gradient(closest-side, #fff 0%, rgba(170, 220, 255, .9) 24%, rgba(80, 150, 255, .35) 56%, rgba(80, 150, 255, 0) 100%); }
.ef-patlama.is-alev {
  width: 280px; height: 280px; margin: -140px 0 0 -140px;
  background: radial-gradient(closest-side, #fff7d6 0%, rgba(255, 196, 90, .95) 24%, rgba(255, 96, 24, .5) 56%, rgba(255, 96, 24, 0) 100%);
}
@keyframes ef-patlama { 0% { opacity: 0; transform: scale(.3); } 15% { opacity: 1; } 100% { opacity: 0; transform: scale(1.3); } }
.ef-halka {
  position: absolute;
  width: 120px; height: 120px; margin: -60px 0 0 -60px;
  border: 3px solid rgba(170, 220, 255, .9);
  border-radius: 50%;
  opacity: 0;
  animation: ef-halka .7s ease-out forwards;
}
/* Alevin halkası masaya yatık yayılır. */
.ef-halka.is-alev { border-color: rgba(255, 170, 70, .9); border-width: 4px; animation-name: ef-halka-yatik; animation-duration: .8s; }
@keyframes ef-halka { 0% { opacity: 1; transform: scale(.2); } 100% { opacity: 0; transform: scale(2.6); } }
@keyframes ef-halka-yatik { 0% { opacity: 1; transform: scale(.2, .09); } 100% { opacity: 0; transform: scale(4.4, 1.9); } }
.ef-kivilcim {
  position: absolute;
  width: 18px; height: 2px; margin: -1px 0 0 -9px;
  border-radius: 2px;
  opacity: 0;
  animation: ef-kivilcim .56s ease-out forwards;
}
.ef-kivilcim.is-yildirim { background: linear-gradient(90deg, rgba(207, 234, 255, 0), #cfeaff, #fff); box-shadow: 0 0 6px #8fd0ff; }
.ef-kivilcim.is-alev { background: linear-gradient(90deg, rgba(255, 179, 71, 0), #ffb347, #fff3c0); box-shadow: 0 0 6px #ff9a3c; }
@keyframes ef-kivilcim {
  0% { opacity: 1; transform: translate(0, 0) rotate(var(--aci)); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--aci)); }
}

/* Ekranın dibi: kendi ıstakası çarpılan / yanan oyuncuya. */
.ef-kenar { position: absolute; left: 0; right: 0; bottom: 0; height: 48%; opacity: 0; animation: ef-kenar 1.8s ease-out forwards; }
.ef-kenar.is-alev { background: radial-gradient(90% 100% at 50% 100%, rgba(255, 110, 30, .55), rgba(255, 60, 10, .2) 45%, rgba(0, 0, 0, 0) 75%); }
.ef-kenar.is-yildirim { background: radial-gradient(90% 100% at 50% 100%, rgba(120, 190, 255, .42), rgba(0, 0, 0, 0) 70%); animation-duration: 1s; }
@keyframes ef-kenar { 0% { opacity: 0; } 15% { opacity: 1; } 70% { opacity: .8; } 100% { opacity: 0; } }

/* ————————————————————————————— yıldırım */

.ef-simsek { opacity: 0; animation: ef-simsek .66s linear forwards; }
.ef-simsek-hale { fill: none; stroke: #7cc8ff; stroke-linejoin: round; stroke-linecap: round; opacity: .6; filter: blur(3px); }
.ef-simsek-cekirdek { fill: none; stroke: #fff; stroke-linejoin: round; stroke-linecap: round; }
@keyframes ef-simsek {
  0% { opacity: 0; } 4% { opacity: 1; } 16% { opacity: .2; } 24% { opacity: 1; }
  38% { opacity: .45; } 46% { opacity: 1; } 100% { opacity: 0; }
}
/* Istakanın üstünde titreyen arklar. */
.ef-ark { opacity: 0; animation: ef-ark .9s steps(1) forwards; }
@keyframes ef-ark {
  0% { opacity: 1; } 10% { opacity: 0; } 20% { opacity: 1; } 32% { opacity: .2; }
  45% { opacity: 1; } 60% { opacity: 0; } 70% { opacity: .9; } 85%, 100% { opacity: 0; }
}
/* Çarpılan rakip ıstakası mavi mavi yanıp söner. */
.rakip-istaka.is-carpildi .ri-yuz, .rakip-istaka.is-carpildi .ri-ust { animation: ri-carp .95s linear; }
@keyframes ri-carp {
  0%, 100% { filter: none; }
  8% { filter: brightness(2.4) saturate(0) drop-shadow(0 0 10px #8fd0ff); }
  22% { filter: brightness(.7); }
  36% { filter: brightness(2) saturate(.3) drop-shadow(0 0 8px #8fd0ff); }
  55% { filter: none; }
  68% { filter: brightness(1.6) saturate(.5); }
  80% { filter: none; }
}
/* Kendi ıstakası çarpılan oyuncu: ıstaka sarsılır, mavi parlar. */
.rack.is-carpildi { animation: rack-carp .95s ease-out; }
.rack.is-carpildi .tile { animation: tas-carp .95s linear; }
@keyframes rack-carp {
  0%, 100% { translate: 0 0; filter: none; }
  8% { translate: -7px 3px; filter: brightness(1.8) drop-shadow(0 0 18px #8fd0ff); }
  16% { translate: 6px -2px; }
  24% { translate: -4px 1px; filter: brightness(1); }
  34% { translate: 3px 0; filter: brightness(1.5) drop-shadow(0 0 12px #8fd0ff); }
  50% { translate: -2px 0; filter: none; }
  64% { filter: brightness(1.3); }
}
@keyframes tas-carp {
  0%, 100% { filter: none; }
  8% { filter: brightness(1.6) hue-rotate(160deg) saturate(.4); }
  30% { filter: none; }
  40% { filter: brightness(1.4) hue-rotate(160deg) saturate(.4); }
  55% { filter: none; }
}

/* ————————————————————————————— alev topu */

.ef-alev-topu {
  position: absolute;
  width: 100px; height: 100px; margin: -50px 0 0 -50px;
  border-radius: 50%;
  background: radial-gradient(circle at 45% 42%, #fffbe0 0%, #ffd36b 22%, #ff8a2a 48%, #e0380f 66%, rgba(200, 40, 10, 0) 72%);
  box-shadow: 0 0 44px 18px rgba(255, 120, 30, .55);
  animation: ef-top-dus .52s cubic-bezier(.55, 0, .9, .45) forwards;
}
/* Kuyruk: topun geldiği yöne uzanan bulanık alev. */
.ef-alev-topu::before {
  content: "";
  position: absolute; left: 50%; bottom: 50%;
  width: 64px; height: 190px; margin-left: -32px;
  border-radius: 50% 50% 40% 40%;
  background: linear-gradient(0deg, rgba(255, 170, 60, .9), rgba(255, 90, 20, .45) 50%, rgba(255, 90, 20, 0));
  filter: blur(8px);
  transform-origin: 50% 100%;
  transform: rotate(var(--izaci, 0deg));
}
@keyframes ef-top-dus {
  0% { transform: translate(var(--bx), var(--by)) scale(.5); }
  100% { transform: translate(0, 0) scale(1.18); }
}
/* Masada kalan yanık iz (masaya yatık). */
.ef-ates-izi {
  position: absolute;
  width: 380px; height: 150px; margin: -75px 0 0 -190px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(40, 14, 4, .75), rgba(110, 36, 6, .35) 60%, rgba(0, 0, 0, 0));
  opacity: 0;
  animation: ef-iz 2.3s ease-out forwards;
}
@keyframes ef-iz { 0% { opacity: 0; } 10% { opacity: 1; } 80% { opacity: .9; } 100% { opacity: 0; } }
/* Oyunculara akan alev parçaları ve arkalarında kalan yanık çizgi. */
.ef-alev-parca {
  position: absolute;
  width: 36px; height: 48px; margin: -32px 0 0 -18px;
  border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 50% 70%, #fff4c2 0%, #ffc04d 30%, #ff6a1f 60%, rgba(220, 50, 10, 0) 75%);
  mix-blend-mode: screen;
  filter: blur(1px);
  opacity: 0;
  animation-name: ef-parca; animation-timing-function: cubic-bezier(.3, .6, .4, 1); animation-fill-mode: forwards;
}
@keyframes ef-parca {
  0% { opacity: 0; transform: translate(0, 0) scale(.4); }
  12% { opacity: 1; }
  85% { opacity: 1; transform: translate(calc(var(--dx) * .92), calc(var(--dy) * .92)) scale(1.1); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.8); }
}
/* Alevin geçtiği yerde masada kısa süre kalan, bulanık kor izi. */
.ef-yanik-iz {
  stroke: #ff7a2a; stroke-width: 16; stroke-linecap: round;
  stroke-dasharray: var(--boy); stroke-dashoffset: var(--boy);
  filter: blur(7px);
  opacity: 0;
  animation: ef-yanik 1.3s ease-out forwards;
}
@keyframes ef-yanik {
  0% { opacity: .5; stroke-dashoffset: var(--boy); }
  35% { opacity: .45; stroke-dashoffset: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; }
}
/* Istakanın üst kenarından yükselen alevler, dumanlar ve korlar. Alevin
   ömrü `scale` ile (doğar, söner), titremesi `transform` ile. */
.ef-alev {
  position: absolute;
  translate: -50% -100%;
  transform-origin: 50% 100%;
  border-radius: 50% 50% 35% 35% / 65% 65% 35% 35%;
  background: radial-gradient(ellipse at 50% 85%, #fff5c8 0%, #ffd05a 22%, #ff7a22 50%, rgba(214, 46, 10, .85) 68%, rgba(180, 30, 10, 0) 80%);
  mix-blend-mode: screen;
  filter: blur(.6px);
  opacity: 0;
  animation-name: ef-alev-omur, ef-alev-titre;
  animation-timing-function: ease-out, ease-in-out;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: forwards, none;
}
@keyframes ef-alev-omur {
  0% { opacity: 0; scale: 1 .2; }
  12% { opacity: 1; scale: 1 1; }
  78% { opacity: 1; scale: 1 1; }
  100% { opacity: 0; scale: .8 .4; }
}
@keyframes ef-alev-titre {
  0%, 100% { transform: skewX(-4deg) scaleY(1); }
  50% { transform: skewX(5deg) scaleY(1.13); }
}
.ef-duman {
  position: absolute;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(60, 55, 50, .55), rgba(60, 55, 50, 0));
  opacity: 0;
  animation: ef-duman 1.4s ease-out forwards;
}
@keyframes ef-duman {
  0% { opacity: 0; transform: translateY(0) scale(.5); }
  30% { opacity: .8; }
  100% { opacity: 0; transform: translateY(-90px) scale(1.6); }
}
.ef-kor {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #ffcf6a;
  box-shadow: 0 0 6px #ff8a2a;
  opacity: 0;
  animation: ef-kor 1.3s ease-out forwards;
}
@keyframes ef-kor { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)); } }
/* Yanan rakip ıstakası kızarır, sonra kömürleşir. */
.rakip-istaka.is-yaniyor .ri-yuz, .rakip-istaka.is-yaniyor .ri-ust { animation: ri-yan 1.9s ease-out forwards; }
@keyframes ri-yan {
  0% { filter: none; }
  20% { filter: brightness(1.45) sepia(.6) saturate(2) drop-shadow(0 0 8px #ff7a22); }
  100% { filter: brightness(.45) sepia(.8) saturate(1.3); }
}
/* Kendi ıstakası yanan oyuncu: ıstaka turuncu parlar, taşlar isle kararır. */
.rack.is-yaniyor { animation: rack-yan 2s ease-out forwards; }
.rack.is-yaniyor .tile { animation: tas-yan 2s ease-out forwards; }
@keyframes rack-yan {
  0% { filter: none; }
  18% { filter: brightness(1.25) sepia(.35) drop-shadow(0 0 22px rgba(255, 120, 30, .8)); }
  100% { filter: brightness(.62) sepia(.55) saturate(1.2) drop-shadow(0 0 14px rgba(255, 90, 20, .5)); }
}
@keyframes tas-yan { 0% { filter: none; } 30% { filter: sepia(.5) brightness(1.1); } 100% { filter: sepia(.7) brightness(.6) contrast(1.1); } }