#ai-typing-game-container {
    font-family: 'Arial', sans-serif;
    max-width: 800px;
    margin: 30px auto;
    padding: 20px;
    border: 2px solid #ddd;
    border-radius: 10px;
    background-color: #f9f9f9;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    text-align: center;
    overflow: hidden; /* アニメーション用 */
}

#game-info {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
    font-size: 1.2em;
    color: #555;
    font-weight: bold;
}

#word-display {
    min-height: 80px; /* アニメーション用 */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.5em;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden; /* アニメーション用 */
    line-height: 1.2; /* 単語の高さ調整 */
}

/* 各文字を個別にスタイリングするためにspanで囲む */
#word-display span {
    display: inline-block; /* アニメーションを適用するために必須 */
    transition: color 0.1s ease-out; /* 色の変化だけをスムーズに */
}

#typing-input {
    width: calc(100% - 40px);
    padding: 15px;
    font-size: 1.5em;
    border: 2px solid #ccc;
    border-radius: 8px;
    margin-bottom: 20px;
    outline: none;
    transition: border-color 0.3s;
}

#typing-input:focus {
    border-color: #0073aa; /* WordPressのプライマリカラー */
}

#start-button {
    padding: 12px 30px;
    font-size: 1.3em;
    background-color: #0073aa;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.1s;
}

#start-button:hover {
    background-color: #005177;
}

#start-button:active {
    transform: scale(0.98);
}

#game-message {
    margin-top: 20px;
    font-size: 1.2em;
    color: #e74c3c;
    font-weight: bold;
    min-height: 30px; /* メッセージ表示領域の確保 */
}

/* アニメーション関連 */
.correct-char {
    color: #27ae60; /* 正しい文字は緑色 */
}

.incorrect-char {
    color: #e74c3c; /* 間違った文字は赤色 */
    animation: shake 0.3s cubic-bezier(.36,.07,.19,.97) both; /* 揺れるアニメーション */
    transform: translate3d(0, 0, 0); /* GPUアクセラレーションを有効化 */
    backface-visibility: hidden; /* 裏側を見せない */
    perspective: 1000px; /* 3D変換の視点 */
}

/* 揺れるアニメーションのキーフレーム */
@keyframes shake {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d(4px, 0, 0); }
    50% { transform: translate3d(-4px, 0, 0); }
}

/* 単語の出現アニメーション */
/* .word-appear クラスがword-display自体に付与されるように変更 */
#word-display.word-appear span { /* 各文字にアニメーションを適用 */
    animation: fadeInSlideUp 0.5s ease-out forwards;
}

/* 各文字の出現をずらすための遅延 */
#word-display.word-appear span:nth-child(1) { animation-delay: 0.0s; }
#word-display.word-appear span:nth-child(2) { animation-delay: 0.05s; }
#word-display.word-appear span:nth-child(3) { animation-delay: 0.1s; }
#word-display.word-appear span:nth-child(4) { animation-delay: 0.15s; }
#word-display.word-appear span:nth-child(5) { animation-delay: 0.2s; }
#word-display.word-appear span:nth-child(6) { animation-delay: 0.25s; }
#word-display.word-appear span:nth-child(7) { animation-delay: 0.3s; }
#word-display.word-appear span:nth-child(8) { animation-delay: 0.35s; }
#word-display.word-appear span:nth-child(9) { animation-delay: 0.4s; }
#word-display.word-appear span:nth-child(10) { animation-delay: 0.45s; }
/* 必要に応じてさらに追加 */
#word-display.word-appear span:nth-child(11) { animation-delay: 0.5s; }
#word-display.word-appear span:nth-child(12) { animation-delay: 0.55s; }
#word-display.word-appear span:nth-child(13) { animation-delay: 0.6s; }
#word-display.word-appear span:nth-child(14) { animation-delay: 0.65s; }
#word-display.word-appear span:nth-child(15) { animation-delay: 0.7s; }
#word-display.word-appear span:nth-child(16) { animation-delay: 0.75s; }
#word-display.word-appear span:nth-child(17) { animation-delay: 0.8s; }
#word-display.word-appear span:nth-child(18) { animation-delay: 0.85s; }
#word-display.word-appear span:nth-child(19) { animation-delay: 0.9s; }
#word-display.word-appear span:nth-child(20) { animation-delay: 0.95s; }


/* 出現アニメーションのキーフレーム */
@keyframes fadeInSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 単語の消滅アニメーション */
/* .word-disappear クラスがword-display自体に付与されるように変更 */
#word-display.word-disappear span { /* 各文字にアニメーションを適用 */
    animation: fadeOutSlideDown 0.5s ease-in forwards;
}

/* 各文字の消滅をずらすための遅延 */
#word-display.word-disappear span:nth-child(1) { animation-delay: 0.0s; }
#word-display.word-disappear span:nth-child(2) { animation-delay: 0.05s; }
#word-display.word-disappear span:nth-child(3) { animation-delay: 0.1s; }
#word-display.word-disappear span:nth-child(4) { animation-delay: 0.15s; }
#word-display.word-disappear span:nth-child(5) { animation-delay: 0.2s; }
/* 以下必要に応じて追加 */

/* 消滅アニメーションのキーフレーム */
@keyframes fadeOutSlideDown {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-20px);
    }
}

/* ゲーム終了時のメッセージアニメーション */
.game-over-message {
    font-size: 3em;
    color: #0073aa;
    animation: bounceIn 0.8s ease-out; /* バウンドするアニメーション */
}

/* バウンドアニメーションのキーフレーム */
@keyframes bounceIn {
    from, 20%, 40%, 60%, 80%, to {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }
    20% {
        transform: scale3d(1.1, 1.1, 1.1);
    }
    40% {
        transform: scale3d(0.9, 0.9, 0.9);
    }
    60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
        transform: scale3d(0.97, 0.97, 0.97);
    }
    to {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}

/* 既存のボタンのスタイルに加えて、ギブアップボタン用のスタイルを追加 */
#giveup-button {
    padding: 12px 30px;
    font-size: 1.3em;
    background-color: #e74c3c; /* 赤系 */
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.1s;
    margin-left: 10px; /* スタートボタンとの間隔 */
}

#giveup-button:hover {
    background-color: #c0392b; /* ホバーで少し暗く */
}

#giveup-button:active {
    transform: scale(0.98);
}