/* ======================================================================
   LİNGO (paylaşılan) — ortak/lingo.js ile birlikte kullanılır.
   Tahta TV'deki gibi lacivert zeminlidir; açık/koyu temada aynı görünür.
   Sayfa tokenları (oyun-merkezi.css): --mavi, --sari, --yesil, --color-*.
====================================================================== */
.lingo{
  --lingo-zemin:#14306b; --lingo-hucre:#1f4596; --lingo-cizgi:#3a64c4;
  --lingo-kirmizi:#d62828; --lingo-sari:#f6c026; --lingo-gri:#4b5563;
  max-width:560px; margin:0 auto; text-align:center;
}

/* giriş */
.lingo-giris{ padding:10px 0 4px; }
.lingo-giris-baslik{ font-weight:800; font-size:1.1em; margin:0 0 12px; }
.lingo-modlar{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.lingo-mod{
  min-width:170px; min-height:56px; padding:12px 18px; border:0; border-radius:16px; cursor:pointer;
  font:inherit; font-weight:800; font-size:1.05em; color:#fff; background:var(--lingo-zemin);
  box-shadow:0 4px 0 #0b1d45;
}
.lingo-mod:hover{ background:var(--lingo-hucre); }
.lingo-mod:active{ transform:translateY(2px); box-shadow:0 2px 0 #0b1d45; }
.lingo-adlar{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; align-items:center; margin-top:14px; }
.lingo-adlar[hidden]{ display:none; }
.lingo-ad{
  min-height:44px; padding:8px 12px; border:2px solid var(--color-border,#e2e8f0); border-radius:12px;
  font:inherit; width:170px; background:var(--color-surface,#fff); color:var(--color-text,#22333b);
}
.lingo-adlar .eylem{ margin:0; }

/* üst bilgi + puan */
.lingo-ust{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:10px; }
.lingo-rozet{ padding:5px 12px; border-radius:999px; background:var(--lingo-zemin); color:#fff; font-weight:800; font-size:.88em; }
.lingo-rozet-ikincil{ background:var(--color-surface-alt,#f1f5f9); color:var(--color-text,#22333b); }
.lingo-puanlar{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.lingo-puan{
  display:flex; align-items:center; gap:10px; padding:8px 14px; border-radius:14px;
  background:var(--color-surface-alt,#f1f5f9); border:3px solid transparent; transition:border-color .2s, transform .2s;
}
.lingo-puan-ad{ font-weight:700; }
.lingo-puan-sayi{ font-size:1.35em; font-variant-numeric:tabular-nums; }
.lingo-takim1.lingo-sirada{ border-color:#2563eb; transform:scale(1.04); }
.lingo-takim2.lingo-sirada{ border-color:var(--lingo-kirmizi); transform:scale(1.04); }
.lingo-durum{ min-height:1.4em; margin:10px 0; font-weight:700; }

/* tahta */
.lingo-tahta{
  display:inline-flex; flex-direction:column; gap:6px; padding:10px; border-radius:14px;
  background:var(--lingo-zemin); box-shadow:inset 0 0 0 3px var(--lingo-cizgi), 0 8px 22px rgba(15,23,42,.25);
}
.lingo-satir{ display:grid; grid-template-columns:repeat(var(--lingo-n,5), 1fr); gap:6px; }
.lingo-satir-calma{ padding-top:6px; border-top:2px dashed var(--lingo-sari); }
.lingo-hucre{
  position:relative; width:clamp(40px, 12vw, 56px); aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  background:var(--lingo-hucre); color:#fff; font-weight:900; font-size:clamp(1.2em, 5vw, 1.7em);
  border-radius:6px; text-transform:none; user-select:none; z-index:0;
}
.lingo-aktif{ background:#2a55b0; }
.lingo-ilk{ color:var(--lingo-sari); }
.lingo-ipucu-harf{ color:rgba(255,255,255,.55); }
.lingo-imlec{ box-shadow:inset 0 -4px 0 var(--lingo-sari); }
/* doğru yer: kırmızı kare */
.lingo-hucre.lingo-d{ background:var(--lingo-kirmizi); animation:lingoCevir .45s ease both; }
/* yanlış yer: sarı daire */
.lingo-hucre.lingo-v{ animation:lingoCevir .45s ease both; color:#1f2937; }
.lingo-hucre.lingo-v::before{
  content:""; position:absolute; inset:8%; border-radius:50%; background:var(--lingo-sari); z-index:-1;
}
/* yok */
.lingo-hucre.lingo-y{ background:var(--lingo-gri); animation:lingoCevir .45s ease both; }
@keyframes lingoCevir{ from{ transform:rotateX(90deg); } to{ transform:rotateX(0); } }
.lingo-salla{ animation:lingoSalla .35s; }
@keyframes lingoSalla{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }

.lingo-anlam{
  margin:12px auto 0; max-width:520px; padding:10px 14px; border-radius:12px; text-align:left;
  background:#fff8e1; border-left:5px solid var(--sari,#f4a261); color:#3b2f00;
}

/* klavye */
.lingo-klavye{ margin-top:14px; display:flex; flex-direction:column; gap:6px; }
.lingo-k-satir{ display:flex; gap:4px; justify-content:center; }
.lingo-tus{
  flex:1 1 0; max-width:44px; min-width:0; min-height:46px; padding:0; border:0; border-radius:8px; cursor:pointer;
  font:inherit; font-weight:800; font-size:1em; background:#dbe3ef; color:#0f172a;
}
.lingo-tus:hover{ filter:brightness(.95); }
.lingo-tus:focus-visible, .lingo-mod:focus-visible, .lingo-kucuk-btn:focus-visible{ outline:3px solid var(--lingo-sari); outline-offset:2px; }
.lingo-tus-genis{ flex-grow:1.6; max-width:72px; font-size:.9em; background:#b9c6da; }
.lingo-tus.lingo-d{ background:var(--lingo-kirmizi); color:#fff; }
.lingo-tus.lingo-v{ background:var(--lingo-sari); color:#1f2937; }
.lingo-tus.lingo-y{ background:var(--lingo-gri); color:#fff; }

.lingo-alt{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:12px; }
.lingo-alt .eylem{ margin:0; }
.lingo-kucuk-btn{
  min-height:44px; padding:8px 14px; border-radius:12px; cursor:pointer; font:inherit; font-weight:700;
  border:2px solid var(--lingo-zemin); background:transparent; color:var(--color-text,#22333b);
}
.lingo-kucuk-btn:disabled{ opacity:.45; cursor:default; }
.lingo-kucuk-ikincil{ border-color:var(--color-border,#cbd5e1); }

/* bitiş */
.lingo-bitis-baslik{ font-size:1.2em; font-weight:900; }
.lingo-ozet{ text-align:left; max-width:520px; margin:10px auto 14px; padding-left:20px; line-height:1.55; }

/* kural göstergesi (aciklama içinde) */
.lingo-ornek{ display:inline-flex; align-items:center; justify-content:center; width:1.5em; height:1.5em; margin:0 2px; vertical-align:middle; font-weight:900; color:#fff; border-radius:4px; background:#d62828; }
.lingo-ornek-v{ background:transparent; color:#1f2937; position:relative; z-index:0; }
.lingo-ornek-v::before{ content:""; position:absolute; inset:0; border-radius:50%; background:#f6c026; z-index:-1; }

@media (max-width:420px){
  .lingo-k-satir{ gap:3px; }
  .lingo-tus{ min-height:42px; font-size:.9em; }
}
@media (prefers-reduced-motion: reduce){
  .lingo-hucre.lingo-d, .lingo-hucre.lingo-v, .lingo-hucre.lingo-y, .lingo-salla{ animation:none; }
  .lingo-puan{ transition:none; }
}