/* Harf Harmanı */
.oyun[data-oyun="harf-harmani"] { --tas: min(10.6vw, 54px); }

.h-kategori { text-align: center; font-size: 1.1rem; margin-bottom: 14px; }
.h-kategori strong { color: var(--k); }

.h-yuvalar, .h-taslar { display: flex; justify-content: center; gap: 6px; flex-wrap: nowrap; }
.h-yuvalar { margin-bottom: 22px; }
.h-taslar { margin-bottom: 22px; }

.h-yuva, .h-tas {
  font: inherit; font-weight: 800; font-size: calc(var(--tas) * 0.48); line-height: 1;
  width: var(--tas); height: var(--tas); padding: 0;
  display: grid; place-items: center; border-radius: 10px;
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.h-yuva {
  border: 2px dashed var(--cizgi); background: transparent; color: var(--metin);
  cursor: pointer;
}
.h-yuva:not(:empty) { border-style: solid; border-color: var(--k); background: var(--yuzey); }
.h-yuva[disabled] { cursor: default; }
.h-yuva--sabit { background: color-mix(in srgb, var(--k) 16%, var(--yuzey)) !important; }
.h-tas {
  border: 1px solid transparent; background: var(--k); color: #fff; cursor: pointer;
  box-shadow: 0 3px 0 color-mix(in srgb, var(--k) 60%, #000);
  transition: transform 0.1s ease, opacity 0.15s ease;
}
.h-tas:active { transform: translateY(2px); box-shadow: 0 1px 0 color-mix(in srgb, var(--k) 60%, #000); }
.h-tas--kullanildi { opacity: 0.18; box-shadow: none; cursor: default; }
.h-tas[disabled]:not(.h-tas--kullanildi) { opacity: 0.6; }

.h-yuvalar.dogru .h-yuva { border-color: var(--basari); background: color-mix(in srgb, var(--basari) 18%, var(--yuzey)); animation: h-zipla 0.45s ease; }
.h-yuvalar.gecildi .h-yuva { border-color: var(--metin-2); color: var(--metin-2); }
@keyframes h-zipla { 50% { transform: translateY(-6px); } }

.h-eylemler { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.h-ceza { font-size: 0.85em; color: var(--metin-2); font-weight: 600; }

@media (prefers-color-scheme: dark) {
  .h-tas { color: #14162a; }
}