/* ============================================================
   BijoMAG リアクションボタン - bijo-reaction.css v3
   ============================================================ */

/* 2カラムグリッド */
.bijo-reaction-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding-bottom: 24px;
    margin: 16px 0 32px;
}

/* 個別吹き出しラッパー */
.bijo-bubble {
    position: relative;
}

/* ============================================================
   吹き出し本体（Apple Liquid Glass ベース）
   ============================================================ */
.bijo-btn {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 12px;
    border-radius: 18px;
    cursor: pointer;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.05em;
    font-family: inherit;
    -webkit-appearance: none;
    outline: none;
    border: none;
    overflow: visible;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

    backdrop-filter: blur(40px) saturate(180%) brightness(1.12);
    -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(1.12);
}

.bijo-btn:hover {
    transform: translateY(-2px) scale(1.02);
}

.bijo-btn:active {
    transform: scale(0.95);
    transition: all 0.1s ease;
}

/* アイコン */
.bijo-icon {
    font-size: 15px;
    line-height: 1;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bijo-btn:hover .bijo-icon { transform: scale(1.2); }

.bijo-btn.is-active .bijo-icon {
    animation: bijo-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bijo-label {
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
}

/* ============================================================
   しっぽ（下向き・各ボタン中央）
   ============================================================ */
.bijo-tail {
    position: absolute;
    bottom: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 0; height: 0;
    z-index: 1;
}

/* ============================================================
   バッジ（完全な丸・min-widthで崩れ防止）
   ============================================================ */
.bijo-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 900;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border: 2.5px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    z-index: 3;
    font-style: normal;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    padding: 0;
}

.bijo-badge.bijo-bounce {
    animation: badge-bounce 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================================
   スキ！（ピンク / Apple Liquid Glass）
   ============================================================ */
.bijo-suki {
    background: linear-gradient(
        170deg,
        rgba(255, 255, 255, 0.55) 0%,
        rgba(255, 200, 215, 0.18) 40%,
        rgba(255, 100, 150, 0.08) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.70) !important;
    color: #c0365a;
    box-shadow:
        0 4px 20px rgba(255, 100, 150, 0.12),
        0 1px 4px rgba(0, 0, 0, 0.05),
        inset 0 2px 0 rgba(255, 255, 255, 0.90),
        inset 0 -1px 0 rgba(200, 80, 120, 0.08),
        inset 1.5px 0 0 rgba(255, 255, 255, 0.45),
        inset -1px 0 0 rgba(200, 80, 120, 0.05);
}

.bijo-suki .bijo-tail {
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 14px solid rgba(255, 255, 255, 0.70);
    filter: drop-shadow(0 3px 2px rgba(255, 100, 150, 0.10));
}

.bijo-suki .bijo-badge {
    background: radial-gradient(circle at 35% 35%, #ff85ad, #e8204a);
}

.bijo-suki.is-active {
    background: linear-gradient(
        170deg,
        rgba(255, 230, 238, 0.65) 0%,
        rgba(255, 150, 185, 0.32) 40%,
        rgba(240, 60, 110, 0.18) 100%
    );
    border-color: rgba(255, 160, 190, 0.75) !important;
    color: #8a1030;
    box-shadow:
        0 5px 24px rgba(255, 100, 150, 0.24),
        0 1px 4px rgba(0, 0, 0, 0.06),
        inset 0 2px 0 rgba(255, 255, 255, 0.80),
        inset 0 -1px 0 rgba(200, 60, 100, 0.12);
}

/* ============================================================
   アイタイ！（ティファニーブルー / Apple Liquid Glass）
   ============================================================ */
.bijo-aitai {
    background: linear-gradient(
        170deg,
        rgba(255, 255, 255, 0.55) 0%,
        rgba(175, 235, 230, 0.18) 40%,
        rgba(0, 185, 175, 0.08) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.70) !important;
    color: #0d706a;
    box-shadow:
        0 4px 20px rgba(0, 185, 175, 0.12),
        0 1px 4px rgba(0, 0, 0, 0.05),
        inset 0 2px 0 rgba(255, 255, 255, 0.90),
        inset 0 -1px 0 rgba(0, 160, 152, 0.08),
        inset 1.5px 0 0 rgba(255, 255, 255, 0.45),
        inset -1px 0 0 rgba(0, 160, 152, 0.05);
}

.bijo-aitai .bijo-tail {
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 14px solid rgba(255, 255, 255, 0.70);
    filter: drop-shadow(0 3px 2px rgba(0, 185, 175, 0.10));
}

.bijo-aitai .bijo-badge {
    background: radial-gradient(circle at 35% 35%, #81d8d0, #0a9991);
}

.bijo-aitai.is-active {
    background: linear-gradient(
        170deg,
        rgba(220, 248, 246, 0.65) 0%,
        rgba(129, 216, 208, 0.32) 40%,
        rgba(0, 165, 158, 0.18) 100%
    );
    border-color: rgba(129, 216, 208, 0.75) !important;
    color: #054540;
    box-shadow:
        0 5px 24px rgba(0, 185, 175, 0.24),
        0 1px 4px rgba(0, 0, 0, 0.06),
        inset 0 2px 0 rgba(255, 255, 255, 0.80),
        inset 0 -1px 0 rgba(0, 150, 144, 0.12);
}

/* ============================================================
   アニメーション
   ============================================================ */
@keyframes bijo-pop {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.5) rotate(-8deg); }
    70%  { transform: scale(1.2) rotate(4deg); }
    100% { transform: scale(1) rotate(0deg); }
}

@keyframes badge-bounce {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.5); }
    100% { transform: scale(1); }
}

/* ============================================================
   スマホ対応
   ============================================================ */
@media (max-width: 400px) {
    .bijo-reaction-row { gap: 10px; }
    .bijo-btn { padding: 11px 8px; font-size: 12px; }
    .bijo-icon { font-size: 14px; }
    .bijo-label { font-size: 12px; }
}