/* Beşlik */
/* Renkler :root'ta, çünkü "Nasıl oynanır" bölümündeki örnekler de kullanıyor. */
:root {
  --b-yerinde: #17784a;
  --b-var: #f2b630;
  --b-yok: #646a7d;
}
.oyun[data-oyun="beslik"] { --kare: min(15vw, 60px); }

.ipucu { display: inline-block; padding: 0 7px; border-radius: 5px; font-weight: 700; position: relative; }
.ipucu--yerinde { background: var(--b-yerinde); color: #fff; text-decoration: underline 2px; text-underline-offset: 3px; }
.ipucu--var { background: var(--b-var); color: #1d2036; }
.ipucu--var::after { content: "•"; margin-left: 4px; }
.ipucu--yok { background: var(--b-yok); color: #fff; }

.b-tahta { display: grid; gap: 6px; justify-content: center; margin: 4px auto 18px; }
.b-satir { display: grid; grid-template-columns: repeat(5, var(--kare)); gap: 6px; }
.b-kare {
  width: var(--kare); height: var(--kare); position: relative;
  display: grid; place-items: center;
  border: 2px solid var(--cizgi); border-radius: 10px; background: var(--yuzey);
  font-size: calc(var(--kare) * 0.5); font-weight: 800; line-height: 1; color: var(--metin);
}
.b-kare.dolu { border-color: var(--metin-2); animation: b-bas 0.12s ease; }
.b-kare.cevir { animation: b-cevir 0.36s ease; }
.b-kare.yerinde { background: var(--b-yerinde); border-color: var(--b-yerinde); color: #fff; }
.b-kare.var { background: var(--b-var); border-color: var(--b-var); color: #1d2036; }
.b-kare.yok { background: var(--b-yok); border-color: var(--b-yok); color: #fff; }
/* Renge ek olarak işaret: yerinde = alt çizgi, var = nokta (renk körlüğü için). */
.b-kare.yerinde::after {
  content: ""; position: absolute; left: 24%; right: 24%; bottom: 9%;
  height: 3px; border-radius: 2px; background: currentColor;
}
.b-kare.var::after {
  content: ""; position: absolute; top: 10%; right: 10%;
  width: 7px; height: 7px; border-radius: 50%; background: currentColor;
}
.b-satir--kazandi .b-kare { animation: b-zipla 0.5s ease both; }
.b-satir--kazandi .b-kare:nth-child(2) { animation-delay: 0.08s; }
.b-satir--kazandi .b-kare:nth-child(3) { animation-delay: 0.16s; }
.b-satir--kazandi .b-kare:nth-child(4) { animation-delay: 0.24s; }
.b-satir--kazandi .b-kare:nth-child(5) { animation-delay: 0.32s; }

@keyframes b-bas { 50% { transform: scale(1.08); } }
@keyframes b-cevir { 0% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }
@keyframes b-zipla { 40% { transform: translateY(-10px); } 70% { transform: translateY(2px); } }

.b-klavye { display: grid; gap: 6px; max-width: 520px; margin: 0 auto; }
.b-klavye-satir { display: flex; justify-content: center; gap: 5px; }
.b-tus {
  font: inherit; font-weight: 700; font-size: clamp(0.9rem, 3.6vw, 1.1rem);
  flex: 1 1 0; min-width: 0; max-width: 46px; min-height: 52px; padding: 0;
  border: 1px solid var(--cizgi); border-radius: 8px;
  background: var(--yuzey-2); color: var(--metin);
  cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.b-tus:hover { filter: brightness(0.96); }
.b-tus--genis { flex: 1.6 1 0; max-width: 72px; font-size: 0.95rem; }
.b-tus.yerinde { background: var(--b-yerinde); border-color: var(--b-yerinde); color: #fff; }
.b-tus.var { background: var(--b-var); border-color: var(--b-var); color: #1d2036; }
.b-tus.yok { background: var(--b-yok); border-color: var(--b-yok); color: #fff; opacity: 0.85; }

@media (prefers-color-scheme: dark) {
  :root { --b-yok: #50566e; }
}