@charset "UTF-8";
/**
* Creative Net Door.
* Basic Css Reset Formatter
**/

/* ▼ ランクバッジ用CSS ▼ */
.rank-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 2.0rem;
    font-weight: bold;
    padding: 6px 12px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    background: #888; /* デフォルトの背景（順位指定がなければ） */
    transition: transform 0.2s ease, filter 0.2s ease;
    z-index: 1;
}

.rank-badge i {
    font-size: 1.8rem; /* ← 今より少し大きめ */
    text-shadow: 0 1px 2px rgba(0,0,0,0.3); /* 立体感 */
}

/* ランク色分け */
.rank-1 .rank-badge {
    background: linear-gradient(135deg, #ffd700, #ffec8b);
    color: #000;
}
.rank-2 .rank-badge {
    background: linear-gradient(135deg, #c0c0c0, #eeeeee);
    color: #000;
}
.rank-3 .rank-badge {
    background: linear-gradient(135deg, #cd7f32, #deb887);
    color: #fff;
}

.rank-1:hover .rank-badge i {
    transform: rotate(-10deg);
    transition: transform 0.3s ease;
}

.rank-2:hover .rank-badge i {
    transform: rotate(-10deg);
    transition: transform 0.3s ease;
}

.rank-3:hover .rank-badge i {
    transform: rotate(-10deg);
    transition: transform 0.3s ease;
}

.rank-badge {
    font-family: 'Bebas Neue', 'Arial Black', sans-serif;
    letter-spacing: 0.5px;
}

/* モバイル対応 */
@media (max-width: 767px) {
    .rank-badge {
        font-size: 2.0rem;
        padding: 4px 10px;
    }

    .rank-badge i {
        font-size: 2.0rem;
    }
}