#text{
  background:#1e293b;
  padding:20px;
  margin:20px auto;
  max-width:600px;
  border-radius:10px;
}

textarea{
  width:80%;
  height:120px;
  font-size:18px;
  padding:10px;
  margin-top:20px;
}

button{
  background:#22c55e;
  color:white;
  border:none;
  padding:12px 20px;
  border-radius:8px;
  font-size:16px;
  cursor:pointer;
  margin-top:15px;
}

button:hover{
  background:#16a34a;
}

#difficulty{
  margin-top:20px;
}

#difficulty button{
  margin:5px;
  padding:10px 18px;
  font-size:16px;
  border:none;
  border-radius:8px;
  background:#22c55e;
  color:white;
  cursor:pointer;
}

#difficulty button:hover{
  background:#16a34a;
}

#summary{
  margin-top:15px;
  font-size:20px;
}

#restartBtn{
  margin-top:20px;
  padding:12px 22px;
  font-size:18px;
  background:#22c55e;
  color:white;
  border:none;
  border-radius:8px;
  cursor:pointer;
}
.purple{background:#a855f7;}

/* ===== SMOOTH GAME LOOK ===== */

.pad{
  transition: 
    transform 0.12s ease,
    box-shadow 0.18s ease,
    opacity 0.18s ease,
    filter 0.18s ease;
}

/* Glow lè limen */
.pad.active{
  opacity:1 !important;
  transform:scale(1.08);
  filter:brightness(1.25);
  box-shadow:0 0 25px rgba(255,255,255,0.6);
}

/* Efè klike */
.pad:active{
  transform:scale(0.95);
  box-shadow:0 0 8px rgba(0,0,0,0.6) inset;
}

/* Game Over shake */
@keyframes shake{
  0%{transform:translateX(0)}
  20%{transform:translateX(-6px)}
  40%{transform:translateX(6px)}
  60%{transform:translateX(-4px)}
  80%{transform:translateX(4px)}
  100%{transform:translateX(0)}
}

.game-over{
  animation:shake 0.35s ease;
  position:relative;
}

/* Page shake */
@keyframes bigShake{
  0%{transform:translateX(0)}
  15%{transform:translateX(-12px)}
  30%{transform:translateX(12px)}
  45%{transform:translateX(-10px)}
  60%{transform:translateX(10px)}
  75%{transform:translateX(-6px)}
  90%{transform:translateX(6px)}
  100%{transform:translateX(0)}
}

.shake-screen{
  animation:bigShake 0.45s ease;
}

#app{
  position:relative;
}

/* REAL screen shake */
:root{
  --shake-x:0px;
  --shake-y:0px;
}

#app{
  transform:translate(var(--shake-x),var(--shake-y));
}

.site-logo{
  width: 70px;
  height: auto;
  display: block;
  margin: 0 auto 12px auto;
}

.site-logo{
  width:60px;
  display:block;
  margin:10px auto;
}