/* TEST-123 */
#kelimefi-app {
    max-width: 420px;
    margin: 30px auto;
    text-align: center;
    font-family: system-ui, -apple-system, BlinkMacSystemFont;
}

.kelimefi-board {
    display: grid;
    grid-template-rows: repeat(6, 1fr);
    gap: 6px;
    margin: 20px 0;
}

.kelimefi-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}

.kelimefi-cell {
    width: 64px;
    height: 64px;
    border: 2px solid #d3d6da;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: bold;
    text-transform: uppercase;
    background: #fff;
}

.kelimefi-keyboard {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-top: 20px;
}

.kelimefi-key {
    padding: 10px 12px;
    background: #d3d6da;
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
    font-weight: 600;
}

.kelimefi-key.wide {
    padding: 10px 18px;
}

.kelimefi-cell.correct { background:#6aaa64 !important; border-color:#6aaa64 !important; color:#fff !important; }
.kelimefi-cell.present { background:#c9b458 !important; border-color:#c9b458 !important; color:#fff !important; }
.kelimefi-cell.absent  { background:#787c7e !important; border-color:#787c7e !important; color:#fff !important; }

.kelimefi-key.correct { background:#6aaa64 !important; color:#fff; }
.kelimefi-key.present { background:#c9b458 !important; color:#fff; }
.kelimefi-key.absent  { background:#787c7e !important; color:#fff; }

.kelimefi-status { margin-top: 12px; min-height: 20px; font-weight: 600; }

.kelimefi-key-row {
    display: flex;
    gap: 6px;
    justify-content: center;
    width: 100%;
}

.kelimefi-key {
    min-width: 38px;
    height: 46px;
    border: none;
    border-radius: 4px;
    background: #d3d6da;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.kelimefi-key.wide {
    min-width: 64px;
}

.kelimefi-key-row{
  display:flex;
  gap:6px;
  width:100%;
  justify-content:center;
  margin-bottom:6px;
}

.kelimefi-key{
  border:0;
  outline:none;
}

/* klavye tuşları da aynı sınıflarla boyansın */
.kelimefi-key.correct { background:#6aaa64; color:#fff; }
.kelimefi-key.present { background:#c9b458; color:#fff; }
.kelimefi-key.absent  { background:#787c7e; color:#fff; }

/* ===== KelimeFikir OVERRIDE (dosyanin EN ALTINA) ===== */

/* board aralarini toparla */
.kelimefi-app .kelimefi-board { 
  margin: 12px 0 !important;
  gap: 6px !important;
}

.kelimefi-app .kelimefi-row {
  gap: 6px !important;
}

/* EN KRITIK: 64px sabitini ez */
.kelimefi-app .kelimefi-cell{
  width: auto !important;          /* 64px'i iptal */
  height: auto !important;         /* 64px'i iptal */
  aspect-ratio: 1 / 1 !important;  /* kare kalsin */
  border-radius: 6px !important;

  /* ekran boyuna gore otomatik boyut */
  font-size: clamp(18px, 4.5vw, 28px) !important;
}

/* max-width'i biraz buyut (bosluk hissini azaltir) */
.kelimefi-app{
  max-width: 520px !important;
  padding: 0 12px !important;
}

/* KLAVYE: satir satir daha toplu */
.kelimefi-app .kelimefi-keyboard{
  display: block !important;       /* flex-wrap karmaşasını kaldır */
  margin-top: 12px !important;
}

/* key row */
.kelimefi-app .kelimefi-key-row{
  display:flex !important;
  justify-content:center !important;
  gap: 6px !important;
  width: 100% !important;
  margin-bottom: 6px !important;
  flex-wrap: nowrap !important;
}

/* key */
.kelimefi-app .kelimefi-key{
  min-width: 32px !important;      /* 38 yerine daha toplu */
  height: 44px !important;
  padding: 0 10px !important;
  border-radius: 8px !important;
  font-size: clamp(12px, 3.2vw, 14px) !important;
}

/* wide key */
.kelimefi-app .kelimefi-key.wide{
  min-width: 70px !important;
}

/* MOBIL ince ayar */
@media (max-width: 420px){
  .kelimefi-app{ max-width: 100% !important; }
  .kelimefi-app .kelimefi-board,
  .kelimefi-app .kelimefi-row{ gap: 5px !important; }

  .kelimefi-app .kelimefi-key-row{ gap: 5px !important; }
  .kelimefi-app .kelimefi-key{ min-width: 28px !important; height: 42px !important; }
  .kelimefi-app .kelimefi-key.wide{ min-width: 62px !important; }
}
/* ===== KelimeFikir: aralik duzeltme (EN ALTA) ===== */

/* Board: artik grid degil, dikey flex */
.kelimefi-app .kelimefi-board{
  display:flex !important;
  flex-direction:column !important;
  gap:6px !important;
  margin: 12px 0 !important;
  align-items:center !important;
}

/* Row: grid yerine flex -> bosluk sorunu biter */
.kelimefi-app .kelimefi-row{
  display:flex !important;
  gap:6px !important;
  justify-content:center !important;
  width:100% !important;
}

/* Cell: responsive kare kutu */
.kelimefi-app .kelimefi-cell{
  width: clamp(46px, 12vw, 64px) !important;
  height: clamp(46px, 12vw, 64px) !important;
  font-size: clamp(18px, 4.5vw, 28px) !important;
  border-radius: 6px !important;
  box-sizing: border-box !important;
}

/* Keyboard rowlar zaten flex ama garanti olsun */
.kelimefi-app .kelimefi-keyboard{ display:block !important; }
.kelimefi-app .kelimefi-key-row{
  display:flex !important;
  justify-content:center !important;
  gap:6px !important;
  margin-bottom:6px !important;
}

/* Mobil daha sıkı */
@media (max-width: 420px){
  .kelimefi-app .kelimefi-row{ gap:5px !important; }
  .kelimefi-app .kelimefi-board{ gap:5px !important; }
}

.kelimefi-app .kelimefi-topbar,
#kelimefi-app .kelimefi-topbar{
  margin: 6px 0 14px;
  display:flex;
  justify-content:center;
  gap:10px;
}
.kelimefi-app .kelimefi-newgame,
#kelimefi-app .kelimefi-newgame{
  border:0;
  cursor:pointer;
  padding:10px 14px;
  border-radius:10px;
  font-weight:700;
  background:#1e88e5;
  color:#fff;
}
.kelimefi-app .kelimefi-newgame:hover,
#kelimefi-app .kelimefi-newgame:hover{
  filter: brightness(0.95);
}

.kelimefi-actions{
  display:flex;
  justify-content:center;
  margin: 10px 0 14px;
}

.kelimefi-newgame{
  background:#1677ff;
  color:#fff;
  border:0;
  border-radius:10px;
  padding:10px 16px;
  font-weight:700;
  cursor:pointer;
}

.kelimefi-newgame:hover{
  filter: brightness(0.95);
}


/* Winners list */
.kelimefi-winners-wrap{max-width:520px;margin:12px auto 0 auto;}
.kelimefi-winners{border:1px solid #e5e7eb;border-radius:12px;padding:10px 12px;background:#fff;}
.kelimefi-winners-title{margin:0 0 8px 0;font-size:16px;font-weight:700;text-align:center;}
.kelimefi-winners-list{margin:0;padding-left:18px;}
.kelimefi-winner-item{display:flex;justify-content:space-between;gap:12px;padding:4px 0;}
.kelimefi-winner-name{font-weight:600;}
.kelimefi-winner-meta{opacity:.75;font-size:13px;white-space:nowrap;}
.kelimefi-winners-empty{text-align:center;opacity:.75;padding:6px 0;}
.kelimefi-login-required{text-align:center;margin:10px auto;max-width:520px;padding:10px;border:1px dashed #cbd5e1;border-radius:12px;}


.kelimefi-definition{margin-top:12px;padding:12px;border:1px solid #e5e7eb;border-radius:10px;background:#fafafa;font-size:14px;line-height:1.5;white-space:pre-line;}
.kelimefi-definition strong{display:block;margin-bottom:6px;}

@media (max-width: 480px){
  .kelimefi-key-row{ gap:4px; }
  .kelimefi-key{ height:58px; font-size:16px; }
}
/* === KelimeFi Mobile Keyboard – SON İNCE AYAR === */
@media (max-width: 480px){

  /* Klavye satırları: boşluğu biraz daha sık */
  #kelimefi-app .kelimefi-key-row,
  .kelimefi-app .kelimefi-key-row{
    gap: 3px !important;   /* 4px → 3px */
  }

  /* Özellikle 2. satır (11 harf: A…İ) daha kritik */
  #kelimefi-app .kelimefi-key-row:nth-child(2),
  .kelimefi-app .kelimefi-key-row:nth-child(2){
    gap: 2px !important;   /* 🔥 asıl farkı bu yaratır */
  }

  /* Tuş iç padding yok, alan tamamen hit area olsun */
  #kelimefi-app .kelimefi-key,
  .kelimefi-app .kelimefi-key{
    padding: 0 !important;
  }
}