.tslg-wrap{
  max-width: 720px;
  margin: 18px auto;
  padding: 16px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 16px;
  background: #fff;
}

.tslg-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.tslg-title{
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .2px;
}

.tslg-btn{
  border: 1px solid rgba(0,0,0,.18);
  background:#f7f7f7;
  padding: 9px 14px;
  border-radius: 12px;
  cursor:pointer;
  font-weight: 700;
}

.tslg-btn:hover{ background:#efefef; }

.tslg-status{
  font-size: 15px;
  margin: 8px 0 14px;
  font-weight: 700;
  opacity: .9;
}

.tslg-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.tslg-tile{
  border: 3px solid rgba(0,0,0,.14);
  background: #fbfbfb;
  border-radius: 18px;
  padding: 18px 10px;
  cursor:pointer;
  min-height: 88px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: transform .12s ease, border-color .18s ease, box-shadow .18s ease;
  transform: rotate(var(--tilt, 0deg));
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
}

.tslg-tile:hover{
  transform: translateY(-2px) rotate(var(--tilt, 0deg)) scale(1.02);
  border-color: rgba(0,0,0,.28);
}

.tslg-tile:active{
  transform: translateY(0) rotate(var(--tilt, 0deg)) scale(.98);
}

.tslg-letter{
  font-size: 44px; /* bigger */
  font-weight: 900;
  line-height: 1;
  letter-spacing: .5px;
  user-select: none;
}

@media (max-width: 420px){
  .tslg-letter{ font-size: 38px; }
  .tslg-tile{ min-height: 80px; }
}

.tslg-tile.is-matched{
  background: #fff;
  border-color: rgba(0,0,0,.85);
  position: relative;
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
}

.tslg-tile.is-matched::after{
  content:"";
  position:absolute;
  inset: 10px;
  border: 4px solid rgba(0,0,0,.85);
  border-radius: 999px;
  pointer-events:none;
}

.tslg-tile.is-wrong{
  border-color: rgba(0,0,0,.55);
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
  transform: translateX(-2px) rotate(var(--tilt, 0deg));
}

.tslg-result{
  margin-top: 14px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fbfbfb;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

.tslg-result-text{
  font-weight: 800;
}
/* Correct = green */
.tslg-tile.is-correct{
  background: #eaffea;
  border-color: #1f9d3a;
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  position: relative;
}

.tslg-tile.is-correct::after{
  content:"";
  position:absolute;
  inset: 10px;
  border: 4px solid #1f9d3a;
  border-radius: 16px;
  pointer-events:none;
}

/* Wrong = red border + little shake */
.tslg-tile.is-wrong{
  border-color: #d62b2b !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
  animation: tslg-shake .22s linear 1;
}

@keyframes tslg-shake{
  0%{ transform: translateX(0) rotate(var(--tilt, 0deg)); }
  25%{ transform: translateX(-3px) rotate(var(--tilt, 0deg)); }
  50%{ transform: translateX(3px) rotate(var(--tilt, 0deg)); }
  75%{ transform: translateX(-2px) rotate(var(--tilt, 0deg)); }
  100%{ transform: translateX(0) rotate(var(--tilt, 0deg)); }
}


/* Tick icon (hidden by default) */
.tslg-tick{
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 22px;
  font-weight: 900;
  color: #1f9d3a;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity .15s ease, transform .15s ease;
  pointer-events: none;
}

/* Show tick only when correct */
.tslg-tile.is-correct .tslg-tick{
  opacity: 1;
  transform: scale(1);
}



.tslg-tile.is-correct{
  background: #eaffea;
  border-color: #1f9d3a;
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
  position: relative;
}