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;
}

/* === バトルモード用スタイル === */

/* バトル情報バー */
#battle-info-bar {
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* 接続状態インジケーター */
.connection-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
}

.connection-status.connected {
    background-color: #d1fae5;
    color: #065f46;
}

.connection-status.connecting {
    background-color: #fef3c7;
    color: #92400e;
}

.connection-status.disconnected {
    background-color: #fef2f2;
    color: #991b1b;
}

/* ドット点滅アニメーション */
.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: pulse 1.5s ease-in-out infinite;
}

.status-dot.connected {
    background-color: #10b981;
}

.status-dot.connecting {
    background-color: #f59e0b;
}

.status-dot.disconnected {
    background-color: #ef4444;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(0.8);
    }
}

/* QRコードコンテナ */
#qr-code-container img {
    border-radius: 8px;
}

/* ルームコード入力 */
#room-code-input {
    letter-spacing: 0.5em;
}

#room-code-input::placeholder {
    letter-spacing: 0.3em;
}

/* バトル履歴エリア */
#battle-history {
    padding-top: 60px;
}

/* 相手の予想スタイル */
.opponent-guess {
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
    border-color: #c4b5fd;
}

/* 自分の予想スタイル */
.my-guess {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-color: #86efac;
}

/* ターン表示アニメーション */
.my-turn {
    animation: glowPink 1.5s ease-in-out infinite alternate;
}

@keyframes glowPink {
    from {
        box-shadow: 0 0 5px rgba(236, 72, 153, 0.3);
    }

    to {
        box-shadow: 0 0 15px rgba(236, 72, 153, 0.6);
    }
}

/* フェードインアニメーション */
.animate-fade-in {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* バトル設定のラジオボタン選択状態 */
#battle-settings-modal label:has(input[type="radio"]:checked) {
    border-color: #ec4899;
    background-color: #fdf2f8;
}

#battle-settings-modal label:has(input[type="radio"]:checked) .font-medium {
    color: #db2777;
}