@charset "UTF-8";

/* ==========================================================================
   Movie Review Critic "Cocoon Custom: Lavity Edition"
   Component: Rating Cards (評価カード完全体 ＆ ちびラビティ出現 ＆ 吹き出し)
   ========================================================================== */

/* 1. 評価別グリッドレイアウト */
.rating-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

/* 2. カード本体 */
.rating-card {
    background: #ffffff !important;
    border: 2px solid #eaeaea !important;
    border-radius: 12px !important;
    padding: 20px 10px !important; /* 左右余白を削って文字表示領域を最大化 */
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
    text-decoration: none !important;
    color: var(--ojou-text) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background-color 0.3s ease !important;
}

.rating-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 20px rgba(12, 76, 51, 0.12) !important;
    border-color: var(--ojou-green) !important;
}

/* 以前の簡易擬似要素吹き出し(::before)の干渉防止 */
.rating-card::before {
    display: none !important;
}

/* 3. 評価カード内タイトル ＆ 説明文の改行最適化 */
.rating-card h3 {
    font-size: 1.15rem !important;
    line-height: 1.3 !important;
    margin: 10px 0 !important;
    white-space: nowrap !important; /* PC環境では絶対に改行させず美しく保ちますわ */
    border: none !important;
    background: none !important;
    padding: 0 !important;
    color: var(--ojou-green) !important;
    font-weight: bold !important;
}

.rating-card p {
    word-break: normal !important; /* 自然な文字単位の改行に戻し、不自然な強制ぶつ切りを防止 */
    overflow-wrap: break-word !important;
    line-height: 1.5 !important;
    font-size: 0.86rem !important;
    color: var(--ojou-text) !important;
}

/* 4. 評価バッジ */
.rating-badge {
    display: inline-block;
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 1.1em;
    margin-bottom: 15px;
}

.rating-5 .rating-badge { background: var(--ojou-bg-light); color: var(--ojou-green); }
.rating-4 .rating-badge { background: #f0fbf5; color: #167a54; }
.rating-3 .rating-badge { background: #fffdf0; color: #b8860b; }
.rating-2 .rating-badge { background: #fff9e6; color: #d35400; }
.rating-1 .rating-badge { background: #fff0f0; color: #c0392b; }
.rating-0 .rating-badge { background: #f2f2f2; color: #555555; }

/* 5. ちびラビティ本体共通（擬似要素 ::after） */
.rating-card::after {
    content: "" !important;
    position: absolute !important;
    bottom: -180px !important;
    right: 5px !important;
    width: 180px !important;
    height: 180px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: bottom right !important;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease !important;
    transform: translateY(0) scale(0.8) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: 10 !important;
}

/* 6. セリフ吹き出し */
.rating-bubble {
    position: absolute !important;
    bottom: -180px !important;
    right: 40px !important;
    background-color: #ffffff !important;
    color: var(--ojou-green, #0c4c33) !important;
    border: 2px solid var(--ojou-green, #0c4c33) !important;
    border-radius: 20px !important;
    padding: 4px 14px !important;
    font-size: 11px !important;
    font-weight: bold !important;
    white-space: nowrap !important;
    box-shadow: 0 4px 12px rgba(12, 76, 51, 0.15) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: 11 !important;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease !important;
    transform: translateY(0) scale(0.8) !important;
    transform-origin: bottom center !important;
}

/* 吹き出しの三角部分（内側の白） */
.rating-bubble::after {
    content: '' !important;
    position: absolute !important;
    bottom: -7px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    border-width: 8px 6px 0 !important;
    border-style: solid !important;
    border-color: #ffffff transparent transparent !important;
    display: block !important;
    width: 0 !important;
    z-index: 2 !important;
}

/* 吹き出しの三角部分（外側の緑枠線） */
.rating-bubble::before {
    content: '' !important;
    position: absolute !important;
    bottom: -10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    border-width: 10px 7px 0 !important;
    border-style: solid !important;
    border-color: var(--ojou-green, #0c4c33) transparent transparent !important;
    display: block !important;
    width: 0 !important;
    z-index: 1 !important;
}

/* ★2, ★1, ★0 はゴールド枠 ＆ 薄ゴールド背景 ＆ 濃緑テキストへアジャスト */
.rating-card.rating-2 .rating-bubble,
.rating-card.rating-1 .rating-bubble,
.rating-card.rating-0 .rating-bubble {
    background-color: #fdfaf2 !important;
    color: #2c3e35 !important;
    border-color: var(--ojou-gold, #d4af37) !important;
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.15) !important;
}

.rating-card.rating-2 .rating-bubble::after,
.rating-card.rating-1 .rating-bubble::after,
.rating-card.rating-0 .rating-bubble::after {
    border-color: #fdfaf2 transparent transparent !important;
}

.rating-card.rating-2 .rating-bubble::before,
.rating-card.rating-1 .rating-bubble::before,
.rating-card.rating-0 .rating-bubble::before {
    border-color: var(--ojou-gold, #d4af37) transparent transparent !important;
}

/* 7. ホバー時の挙動（ちびラビティ＆吹き出し飛び出し） */
.rating-card:hover::after {
    transform: translateY(-180px) scale(1) !important;
    opacity: 1 !important;
}
.rating-card:hover .rating-bubble {
    transform: translateY(-315px) scale(1) !important;
    opacity: 1 !important;
}

/* 8. 画像URLの紐付け */
.rating-card.rating-5::after {
    background-image: url("https://movie-review-critic.com/wp/wp-content/uploads/2026/06/ravity_SD_%E3%82%AC%E3%83%83%E3%83%84%E3%83%9d%E3%83%BC%E3%82%ba.png") !important;
}
.rating-card.rating-4::after {
    background-image: url("https://movie-review-critic.com/wp/wp-content/uploads/2026/06/ravity_SD_%E8%85%95%E7%B5%84%E3%81%bf.png") !important;
}
.rating-card.rating-3::after {
    background-image: url("https://movie-review-critic.com/wp/wp-content/uploads/2026/06/ravity_SD_%E6%82%AA%E3%81%8F%E3%81%AA%E3%81%84.png") !important;
}
.rating-card.rating-2::after {
    background-image: url("https://movie-review-critic.com/wp/wp-content/uploads/2026/06/ravity_SD_%E7%89%A9%E8%B6%B3%E3%82%8A%E3%81%AA%E3%81%84.png") !important;
}
.rating-card.rating-1::after {
    background-image: url("https://movie-review-critic.com/wp/wp-content/uploads/2026/06/ravity_SD_%E3%82%84%E3%82%8C%E3%82%84%E3%82%8C.png") !important;
}
.rating-card.rating-0::after {
    background-image: url("https://movie-review-critic.com/wp/wp-content/uploads/2026/06/ravity_SD_%E7%99%BD%E7%9B%AE.png") !important;
}

/* 9. レスポンシブ対応（768px以下） */
@media screen and (max-width: 768px) {
    /* スマホではちびラビティ＆吹き出しを非表示 */
    .rating-card::after,
    .rating-bubble {
        display: none !important;
    }
    
    /* スマホではタイトルの改行を自然に許可 */
    .rating-card h3 {
        white-space: normal !important;
        word-break: keep-all !important;
        overflow-wrap: anywhere !important;
    }
}