body {
    font-family: 'Nunito', 'Kosugi Maru', sans-serif;
    background: radial-gradient(circle, #fefefe 0%, #e0f2fe 100%);
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}

/* Responsive Text size adjustments */
.game-title {
    font-family: 'Fredoka One', cursive;
}

/* --- STICKY HOVER 対策用の手動ボタンCSS --- */
.btn-interactive {
    position: relative;
    transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

/* PC等、本物のホバー（マウス等）がサポートされているデバイスのみ適用 */
@media (hover: hover) {
    .btn-interactive:hover:not(:disabled) {
        transform: translateY(-4px);
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }
    .category-card:hover {
        transform: translateY(-6px) scale(1.02);
        border-color: #60a5fa;
    }
}

/* タップ中（アクティブ）の表現：スマホでも即座にへこむ視覚フィードバックを提供 */
.btn-interactive:active:not(:disabled) {
    transform: translateY(2px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 選択肢ボタンのカスタム立体デザイン（3D風で押し心地が良い） */
.choice-btn {
    background-color: #ffffff;
    border: 3px solid #cbd5e1;
    border-bottom-width: 8px;
    border-radius: 1.25rem;
    transition: transform 0.1s ease, border-color 0.1s ease, background-color 0.1s ease, box-shadow 0.1s ease;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
    .choice-btn:hover:not(.disabled):not(.locked-hold) {
        background-color: #f8fafc;
        border-color: #94a3b8;
        transform: translateY(-2px);
    }
}

.choice-btn:active:not(.disabled):not(.locked-hold) {
    transform: translateY(4px);
    border-bottom-width: 2px;
}

/* お手つきロック中の選択肢ビジュアル（少し暗くして、沈み込むアニメーションを無効化） */
.choice-btn.locked-hold {
    opacity: 0.35;
    cursor: not-allowed;
    transform: none !important;
    border-bottom-width: 8px !important; /* 立体感を維持したまま凹まないように固定 */
}

/* 正解・不正解時のアニメーション & クラス */
.choice-correct {
    background-color: #bbf7d0 !important; /* light green */
    border-color: #22c55e !important;
    color: #15803d !important;
    transform: translateY(4px) !important;
    border-bottom-width: 2px !important;
}

.choice-incorrect {
    background-color: #fecaca !important; /* light red */
    border-color: #ef4444 !important;
    color: #b91c1c !important;
    transform: translateY(4px) !important;
    border-bottom-width: 2px !important;
    animation: shake 0.4s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0) translateY(4px); }
    20%, 60% { transform: translateX(-8px) translateY(4px); }
    40%, 80% { transform: translateX(8px) translateY(4px); }
}

/* キラキラ・紙吹雪用Canvas */
#confetti-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 50;
}

/* スムーズなフェードイン */
.fade-in {
    animation: fadeIn 0.3s ease-out forwards;
}
@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* タイムバーのトランジションをリニアに */
.time-bar-fill {
    transition: width 0.1s linear;
}