body {
    background: radial-gradient(circle at top, #0f172a 0, #020617 45%, #020617 100%);
    color: #f9fafb;
}

.wordle-container {
    touch-action: manipulation;
    -ms-touch-action: manipulation;
    max-width: 480px;
    margin: 0 auto;
    padding: 20px 10px 40px;
    text-align: center;
}

.wordle-title {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.15em;
    margin-bottom: 8px;
}

.wordle-subtitle {
    font-size: 14px;
    color: #9ca3af;
    margin-bottom: 16px;
}

/* Grid */

.board {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 harf */
    grid-template-rows: repeat(6, 1fr);    /* 6 satır */
    gap: 6px;
    justify-content: center;
    margin: 0 auto 24px;
    max-width: 260px;
}

.tile {
    width: 48px;
    height: 48px;
    border: 2px solid #3a3a3c;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 22px;
    box-sizing: border-box;
    color: #f9fafb;
    user-select: none;
}

/* Renkler */

.tile-correct {
    background-color: #22c55e;
    border-color: #22c55e;
}

.tile-present {
    background-color: #eab308;
    border-color: #eab308;
}

.tile-absent {
    background-color: #4b5563;
    border-color: #4b5563;
}

/* Klavye */

.keyboard {
    max-width: 520px;
    margin: 0 auto;
}

.keyboard-row {
    display: flex;
    justify-content: center;
    margin-bottom: 6px;
    gap: 6px;
}

.key {
    height: 48px;
    min-width: 32px;
    padding: 0 6px;
    border-radius: 4px;
    border: none;
    background-color: #4b5563;
    color: #f9fafb;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
}

.key.wide {
    min-width: 58px;
    font-size: 12px;
}

.key-icon {
    font-size: 18px;
}

/* Klavye renkleri */

.key-correct {
    background-color: #22c55e !important;
}

.key-present {
    background-color: #eab308 !important;
}

.key-absent {
    background-color: #374151 !important;
}

/* Mobile */

@media (max-width: 480px) {
    .tile {
        width: 42px;
        height: 42px;
        font-size: 18px;
    }
}

/* Mobil klavye ayarı */
@media (max-width: 576px) {
    .keyboard {
        max-width: 100%;
        padding: 0 8px;          /* kenarlardan biraz boşluk */
    }

    .keyboard-row {
        gap: 4px;                /* tuşlar arasındaki boşluğu küçült */
    }

    .key {
        flex: 1 1 0;             /* satırdaki tüm tuşlar eşit esnesin */
        min-width: 0;            /* sabit min genişlik yok */
        height: 40px;
        padding: 0;              /* iç boşluk azalt */
        font-size: 12px;
    }

    .key.wide {
        flex: 1.6 1 0;           /* ENTER ve BACK biraz daha geniş olsun */
        font-size: 10px;
    }
}

/* Mini animasyonlar (hafif) */

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
.shake { animation: shake .28s ease-in-out; }

@keyframes pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.pop { animation: pop .10s ease-out; }

@keyframes flip {
  0% { transform: rotateX(0); }
  50% { transform: rotateX(90deg); }
  100% { transform: rotateX(0); }
}
.flip { animation: flip .22s ease-in-out; }

.tile { will-change: transform; }

.game-layout{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:28px;
  margin-top:10px;
}
.game-main{ width:520px; max-width:100%; }
.game-side{
  width:360px;          /* 320 -> 360 (daha geniş) */
  min-width:360px;
  min-height:520px;
}

.side-card{
  position:sticky;
  top:90px;
  background:rgba(2,6,23,.35);
  border:1px solid rgba(148,163,184,.18);
  border-radius:14px;
  padding:20px 20px;    /* biraz artır */
  backdrop-filter: blur(8px);
}
/* Admin formu taşmasın */
.side-card .input-group{
  width:100%;
}
.side-card .form-control{
  min-width:0;
}
.side-card .btn{
  white-space:nowrap;
}
.side-title{ font-size:14px; letter-spacing:.08em; text-transform:uppercase; color:#9ca3af; }
.side-score{ margin-top:10px; font-size:44px; font-weight:800; line-height:1; }
.side-sub{ font-size:14px; color:#9ca3af; margin-left:8px; }
/* Responsive */
@media (max-width: 992px){
  .game-layout{ flex-direction:column; align-items:center; }
  .game-side{
    width:520px;
    min-width:0;
    max-width:100%;
    min-height:auto;
  }
  .side-card{ position:static; }
}