body {
    font-family: 'M PLUS Rounded 1c', sans-serif;
}

input, select {
  -webkit-appearance: none;
  appearance: none!important;
}

.feedback-bubble {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    font-weight: bold;
    margin: 0 4px; /* 少しマージンを広げる */
    min-width: 65px; /* 少し幅を広げる */
    padding: 4px 8px; /* パディングを追加 */
    position: relative; /* ポップアップの基準点にする */
}

.feedback-solved {
    background-color: #e5e7eb; /* gray-200 */
    color: #9ca3af; /* gray-400 */
    border: 2px solid #d1d5db; /* gray-300 */
}

.feedback-active {
     background-color: #fff;
     border: 2px solid #60a5fa; /* blue-400 */
}

/* 正解演出用のアニメーション */
@keyframes correctGuessEntry {
    0% { 
        transform: scale(1); 
        background: #ffffff;
        border-color: #e5e7eb;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
    25% { 
        transform: scale(1.02); 
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        border-color: #f093fb;
        box-shadow: 0 8px 25px rgba(240, 147, 251, 0.3);
    }
    50% { 
        transform: scale(1.05); 
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        border-color: #4facfe;
        box-shadow: 0 12px 35px rgba(79, 172, 254, 0.4);
    }
    75% { 
        transform: scale(1.02); 
        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
        border-color: #43e97b;
        box-shadow: 0 8px 25px rgba(67, 233, 123, 0.3);
    }
    100% { 
        transform: scale(1); 
        background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
        border-color: #10b981;
        box-shadow: 0 4px 15px rgba(16, 185, 129, 0.2);
    }
}

.correct-guess-animation {
    animation: correctGuessEntry 0.8s ease-in-out;
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%) !important;
    border-color: #10b981 !important;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.2) !important;
}

.correct-guess-animation p {
    color: #065f46 !important;
    font-weight: 700 !important;
}

/* パーティクル効果 */
@keyframes particle {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        opacity: 1;
    }
    50% {
        opacity: 0.8;
        transform: translate(calc(var(--fly-x) * 0.5), calc(var(--fly-y) * 0.5)) rotate(180deg) scale(1.2);
    }
    100% {
        transform: translate(var(--fly-x), var(--fly-y)) rotate(360deg) scale(0.3);
        opacity: 0;
    }
}

.particle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: linear-gradient(45deg, #fbbf24, #f59e0b);
    border-radius: 50%;
    pointer-events: none;
    animation: particle 1s ease-out forwards;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* カラーパレット用のスタイル */
.color-popup {
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* 三角矢印は実装しないシンプル版 */

.color-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 6px;
    width: 90px;
}

.color-option {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    cursor: pointer;
    border: 2px solid white;
    transition: all 0.2s ease;
}

.color-option:hover {
    transform: scale(1.1);
    border-color: #374151;
}

.color-option.selected {
    border-color: #1f2937;
    box-shadow: 0 0 0 2px #60a5fa;
}

/* 各色の定義 */
.color-red { background-color: #ef4444; }
.color-blue { background-color: #3b82f6; }
.color-green { background-color: #10b981; }
.color-yellow { background-color: #f59e0b; }
.color-purple { background-color: #8b5cf6; }
.color-default { 
    background-color: white; 
    border: 2px solid #d1d5db !important; /* グレーの枠線 */
}

/* フィードバックバブルの色付きスタイル */
.feedback-bubble.colored-red { background-color: #fef2f2 !important; border-color: #ef4444 !important; }
.feedback-bubble.colored-blue { background-color: #eff6ff !important; border-color: #3b82f6 !important; }
.feedback-bubble.colored-green { background-color: #ecfdf5 !important; border-color: #10b981 !important; }
.feedback-bubble.colored-yellow { background-color: #fffbeb !important; border-color: #f59e0b !important; }
.feedback-bubble.colored-purple { background-color: #f3e8ff !important; border-color: #8b5cf6 !important; }

/* クリック可能であることを示すスタイル */
.feedback-bubble.clickable {
    cursor: pointer;
    position: relative;
}

.feedback-bubble.clickable:hover {
    transform: scale(1.05);
    transition: transform 0.2s ease;
}