#Ranking {
    padding: 1rem 0;

    .ranking-header {
        text-align: center;
        margin-bottom: 2rem;
        h1 { font-size: 2rem; font-weight: 900; letter-spacing: -0.02em; }
        p { color: var(--text-dim); font-size: 0.85rem; }
    }

    .ranking-container {
        display: grid;
        gap: 0.75rem;
        position: relative;

        .rank-card {
            display: grid;
            grid-template-columns: 2.5rem 1fr auto;
            align-items: center;
            padding: 1rem 1.25rem;
            border: 1px solid rgba(128, 128, 128, 0.15);
            border-radius: 0.85rem;
            background: rgba(128, 128, 128, 0.03);

            &.top-tier {
                border-color: rgba(0, 255, 65, 0.3);
                background: rgba(0, 255, 65, 0.05);
                .rank-pos { color: #00ff41; font-weight: 900; }
                .name { color: #fff; }
            }

            .rank-pos {
                font-family: monospace;
                font-size: 1.1rem;
                opacity: 0.6;
            }

            .device-info {
                .name { font-weight: 700; font-size: 0.95rem; color: var(--text-dim); }
                .meta { font-size: 0.7rem; color: var(--text-dim); opacity: 0.6; }
            }

            .score-group {
                text-align: right;
                .main-val { font-size: 1.25rem; font-weight: 800; color: #fff; line-height: 1; }
                .sub-vals { font-size: 0.65rem; color: var(--text-dim); margin-top: 0.25rem; }
            }
        }
    }

    /* 快適ボーダーラインの演出 */
    .comfort-boundary {
        margin: 2rem 0;
        text-align: center;
        position: relative;
        padding: 1.5rem 0;
        border-top: 1px dashed rgba(0, 255, 65, 0.4);
        border-bottom: 1px dashed rgba(0, 255, 65, 0.4);
        background: rgba(0, 255, 65, 0.02);

        .boundary-label {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            color: #00ff41;
            font-weight: 900;
            font-size: 0.85rem;
            letter-spacing: 0.15em;
            margin-bottom: 0.4rem;

            .icon { font-size: 1.1rem; }
        }

        .boundary-desc {
            font-size: 0.75rem;
            color: var(--text-dim);
            opacity: 0.8;
        }

        &.minimal {
            border: none;
            background: none;
            opacity: 0.5;
            margin: 1rem 0;
        }
    }

    /* ラインより下のカード（注意エリア）を少しトーンダウン */
    .rank-card.is-laggy {
        opacity: 0.7;
        border-style: dashed;
        background: rgba(255, 65, 0, 0.02);

        &:hover { opacity: 1; }
        
        .main-val { color: var(--text-dim); }
    }

    /* ラインより上のカード（快適エリア） */
    .rank-card.is-comfort {
        border-color: rgba(128, 128, 128, 0.3);
        
        /* トップ3以外でも、快適圏内ならチェックマーク等を背景に出してもいいですね */
        &::after {
            content: '✓';
            position: absolute;
            right: 1rem;
            top: 50%;
            transform: translateY(-50%);
            font-size: 1.5rem;
            color: #00ff41;
            opacity: 0.05;
            pointer-events: none;
        }
    }    
}