#game {
    width: 600px;
    height: 600px;
    background-color: #FDE6EF;
    border: 1px solid #ccc;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* デバイス強度に応じた画面振動アニメーション */
@keyframes vibrate-weak {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-1px, 1px); }
    50% { transform: translate(1px, -1px); }
    75% { transform: translate(-1px, -1px); }
}

@keyframes vibrate-medium {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-2px, 2px); }
    50% { transform: translate(2px, -2px); }
    75% { transform: translate(-2px, -2px); }
}

@keyframes vibrate-strong {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-4px, 4px); }
    50% { transform: translate(4px, -4px); }
    75% { transform: translate(-4px, -4px); }
}

.vibrate-weak {
    animation: vibrate-weak 0.1s infinite;
}

.vibrate-medium {
    animation: vibrate-medium 0.1s infinite;
}

.vibrate-strong {
    animation: vibrate-strong 0.1s infinite;
}

/* 障害物のフェードアウトアニメーション */
@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.obstacle-collided {
    animation: fadeOut 0.5s ease-out forwards;
}

/* 衝突時のフラッシュ効果 */
@keyframes flash {
    0% {
        background-color: #F64A8A;
        opacity: 1;
    }
    100% {
        background-color: #F64A8A;
        opacity: 0;
    }
}

.game-flash {
    animation: flash 0.1s ease-out;
}

/* 接続中の回転アニメーション */
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.connecting-rotate {
    animation: rotate 1s linear infinite;
    transform-origin: center center;
}

/* 接続ボタンのホバー効果 */
.connection-button-hoverable {
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

.connection-button-hoverable:hover {
    background-color: rgba(255, 255, 255, 0.3) !important;
}