/* 目隠し: 文字をぼかす */
.blind #target-text,
.blind #user-input {
    filter: blur(6px);
    transition: filter 0.5s ease;
}

/* 遅延: 入力エリアの色を変えて状態を示す */
.delayed {
    opacity: 0.7;
    text-shadow: 0 0 8px rgba(0,0,0,0.3);
}

/* シェイク: 画面全体を揺らす */
@keyframes shake-animation {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.shake {
    animation: shake-animation 0.5s;
    animation-iteration-count: infinite;
}

/* ヒント: キーボードのキーをハイライト */
.key.hint {
    background-color: #2ecc71 !important;
    color: white !important;
    transform: scale(1.1);
    box-shadow: 0 0 15px #2ecc71;
    z-index: 100;
    border-color: #27ae60;
}