/* =====================================================================
   mertkisla.com · KELİME YILANI 🐍 (oyunun görünüşü)
   ===================================================================== */

.yl {
  --yl-yesil: #7CFFB2;
  --yl-koyu: #1FAF5A;
  --yl-zemin: #04140A;
  --yl-sari: #FFE27A;
  --yl-piksel: "Press Start 2P", ui-monospace, monospace;
  --yl-terminal: "VT323", ui-monospace, monospace;
  display: grid;
  gap: 14px;
  color: var(--yl-yesil);
  font-family: var(--yl-terminal);
  text-shadow: 0 0 6px rgba(124, 255, 178, .4);
}
.yl p { margin: 0; }
.yl [hidden] { display: none !important; }

/* Üst bilgi: resim, kelime, canlar */
.yl-ust {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 16px;
}
.yl-resim {
  display: block;
  width: 76px;
  height: 76px;
  background: var(--yl-zemin);
  border: 3px solid var(--yl-koyu);
  border-radius: 12px;
  image-rendering: pixelated;
}
.yl-etiket { font-size: 1.25rem; letter-spacing: .05em; opacity: .75; }
.yl-etiket span { opacity: .6; }
.yl-kelime { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; }
.yl-kelime span {
  display: grid;
  place-items: center;
  width: clamp(32px, 7vw, 42px);
  height: clamp(36px, 8vw, 46px);
  background: #062A14;
  border: 3px solid rgba(124, 255, 178, .45);
  border-radius: 8px;
  color: #9FEFC0;
  font: 400 clamp(.85rem, 2.6vw, 1.15rem)/1 var(--yl-piksel);
}
.yl-kelime span.yendi { background: var(--yl-koyu); border-color: var(--yl-yesil); color: #02140A; text-shadow: none; }
.yl-kelime span.siradaki { border-color: var(--yl-sari); color: var(--yl-sari); animation: yl-nabiz .9s ease-in-out infinite; }
.yl-anlam { font-size: 1.45rem; color: var(--yl-sari); }
.yl-durum { text-align: right; }
.yl-canlar { font-size: 1.9rem; line-height: 1; letter-spacing: 3px; color: #FF6B8A; text-shadow: 0 0 8px rgba(255, 107, 138, .6); }
.yl-skor { margin-top: 6px !important; font-size: 1.4rem; white-space: nowrap; }
.yl-skor b { font-weight: 400; color: #fff; }
@keyframes yl-nabiz { 50% { transform: translateY(-3px); box-shadow: 0 0 12px rgba(255, 226, 122, .6); } }

/* Oyun alanı */
.yl-sahne { position: relative; width: 100%; max-width: 660px; margin: 0 auto; }
.yl-tuval {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 15 / 11;
  background: var(--yl-zemin);
  border: 3px solid var(--yl-koyu);
  border-radius: 12px;
  box-shadow: 0 0 26px rgba(46, 255, 130, .2);
  touch-action: none;
  cursor: pointer;
}

.yl-perde {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  background: rgba(2, 12, 6, .84);
  border-radius: 12px;
  text-align: center;
}
.yl-baslik { font: 400 clamp(1.3rem, 5vw, 2.4rem)/1.3 var(--yl-piksel); color: var(--yl-yesil); text-shadow: 3px 0 #FF5D5D, -3px 0 #4CC9F0, 0 0 18px rgba(124, 255, 178, .6); }
.yl-baslik.kirmizi { color: #FF7070; }
.yl-alt-baslik { font-size: clamp(1.3rem, 3.6vw, 1.7rem); color: #fff; }
.yl-anlatim { max-width: 34ch; font-size: clamp(1.15rem, 3vw, 1.45rem); line-height: 1.25; color: #C9FFDD; }
.yl-anlatim b { font-weight: 400; color: var(--yl-sari); }
.yl-buyuk-resim { width: clamp(88px, 22vw, 140px); height: auto; aspect-ratio: 1; image-rendering: pixelated; border: 3px solid var(--yl-koyu); border-radius: 12px; background: var(--yl-zemin); }
.yl-cozum { font: 400 clamp(1.6rem, 6vw, 2.6rem)/1.2 var(--yl-piksel); color: #fff; letter-spacing: .08em; }
.yl-cozum-tr { font-size: clamp(1.7rem, 5vw, 2.3rem); color: var(--yl-sari); }

.yl-buyuk-dugme {
  display: grid;
  gap: 6px;
  margin-top: 6px;
  padding: 14px 26px 12px;
  background: var(--yl-yesil);
  border: 0;
  border-radius: 12px;
  box-shadow: 0 6px 0 var(--yl-koyu), 0 0 24px rgba(124, 255, 178, .45);
  color: #02140A;
  font: 400 clamp(.9rem, 3vw, 1.15rem)/1 var(--yl-piksel);
  cursor: pointer;
  animation: yl-dugme 1.2s ease-in-out infinite;
}
.yl-buyuk-dugme small { font: 400 1.25rem/1 var(--yl-terminal); }
.yl-buyuk-dugme:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--yl-koyu); }
.yl-buyuk-dugme:focus-visible { outline: 3px dashed var(--yl-sari); outline-offset: 5px; }
@keyframes yl-dugme { 50% { transform: scale(1.05); } }

/* Yön tuşları (telefon ve tablette) */
.yl-kontrol {
  display: grid;
  grid-template-columns: repeat(3, 68px);
  grid-template-rows: repeat(3, 58px);
  justify-content: center;
  gap: 6px;
  user-select: none;
}
.yl-kontrol button {
  display: grid;
  place-items: center;
  padding: 0;
  background: #0B2A17;
  border: 3px solid var(--yl-yesil);
  border-radius: 12px;
  box-shadow: 0 4px 0 var(--yl-koyu);
  color: var(--yl-yesil);
  font: 400 1rem/1 var(--yl-piksel);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.yl-kontrol button:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--yl-koyu); background: #134A28; }
.yl-kontrol svg { width: 26px; height: 26px; fill: currentColor; }
.yl-yukari { grid-column: 2; grid-row: 1; }
.yl-sol { grid-column: 1; grid-row: 2; }
.yl-sol svg { transform: rotate(-90deg); }
.yl-orta { grid-column: 2; grid-row: 2; font-size: .8rem !important; }
.yl-sag { grid-column: 3; grid-row: 2; }
.yl-sag svg { transform: rotate(90deg); }
.yl-asagi { grid-column: 2; grid-row: 3; }
.yl-asagi svg { transform: rotate(180deg); }
.yl-ipucu { font-size: 1.2rem; text-align: center; opacity: .7; }

/* Farenin olduğu geniş ekranlarda tuşlara gerek yok: klavyeyle oynanır */
@media (pointer: fine) and (min-width: 900px) {
  .yl-kontrol { display: none; }
}

@media (max-width: 520px) {
  .yl-ust { grid-template-columns: auto minmax(0, 1fr); }
  .yl-durum { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; text-align: left; }
  .yl-skor { margin-top: 0 !important; }
  .yl-resim { width: 64px; height: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .yl-kelime span.siradaki, .yl-buyuk-dugme { animation: none; }
}