/* community 統計/ヒーロータイル
   extracted from refine.css (was L1709-1768)
   — render_head の cssLate[] 経由で refine.css の「後」に読み込まれる。
   元ファイル内で後方にあるルールに勝つ前提で書かれているため、
   css[] (refine.css の前) に置くとカスケードが逆転する。 */

/* community: 統計数字を静的グラデに（JSカウントアップは不採用の判断） */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .stat-value {
        background: var(--grad-text);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        filter: drop-shadow(0 4px 18px rgba(var(--accent-rgb), 0.28));
    }

    /* ヒーロータイルは紫端まで届くフルグラデ（ページの顔） */
    .stat-card.is-hero .stat-value {
        background: linear-gradient(120deg, var(--text) 10%, var(--accent-strong) 70%, var(--accent-2) 110%);
        -webkit-background-clip: text;
        background-clip: text;
    }
}

/* 数字をディスプレイ級に格上げ（720px分岐も clamp 1本で吸収） */
.stat-value {
    font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem);
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums lining-nums;
}

.stat-card.is-hero .stat-value {
    font-size: clamp(2.4rem, 1.8rem + 1.6vw, 3.1rem);
}

.stat-unit {
    font-size: 0.9rem;
    font-weight: 600;
}

.stat-label {
    font-size: 0.82rem;
    letter-spacing: 0.04em;
}

/* カード面: 数字の背後にだけ淡い天光を差す（Dの上端シーンと重ねる） */
.stat-card {
    background-image:
        radial-gradient(90% 70% at 50% 0%, rgba(var(--accent-rgb), 0.07), transparent 65%),
        var(--grad-glass-top);
}

/* ヒーロータイルの面: アクセント縁 + アイコン側から差す青の光だまり */
.stat-card.is-hero {
    border-color: rgba(var(--accent-rgb), 0.30);
    background-image:
        radial-gradient(360px 200px at 8% -30%, rgba(var(--accent-rgb), 0.16), transparent 70%),
        var(--grad-glass-top);
    box-shadow: var(--glass-hilite), 0 0 0 1px rgba(var(--accent-rgb), 0.10);
}

.stat-icon {
    box-shadow: var(--glass-hilite), 0 0 0 1px rgba(var(--accent-rgb), 0.2);
}