） */
.pop-row {
display: grid;
/* 欄序：選手名稱＋IG 圖示 → 百分比數字 → 長條圖。
數字改放長條左側，長條因此往右挪；DOM 順序在 js/popularity.js 也是同一順序。 */
grid-template-columns: 142px 72px 1fr;
align-items: center;
gap: 14px;
text-decoration: none;
color: inherit;
}
a.pop-row { cursor: pointer; }
.pop-name {
display: flex;
align-items: center;
gap: 6px;
min-width: 0; /* 讓裡面的文字能正常省略 */
font-family: 'Chiron Hei HK', sans-serif;
font-size: 1rem;
font-weight: 500;
letter-spacing: 0.02em;
color: var(--text-main);
}
/* 選手頭像：26×26 圓形。26px 正好等於長條軌道高度，是不會把列撐高的上限
（實測 28px 就會讓每列從 26px 變成 28px），同時看起來像是刻意對齊長條。 */
.pop-av {
flex: 0 0 auto;
width: 26px;
height: 26px;
border-radius: 50%;
object-fit: cover;
background: rgba(255, 255, 255, 0.08); /* 圖片載入前的底色，避免閃白 */
}
.pop-name-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* IG 圖示：平常淡淡的，滑過該列才亮起來，用來提示這列可以點 */
.pop-ig {
width: 13px;
height: 13px;
flex: 0 0 auto;
opacity: 0.38;
transition: opacity .2s ease, color .2s ease;
}
/* 灰底軌道 = 最高人氣值的滿刻度，所有長條共用同一把尺 */
.pop-track {
position: relative;
height: 26px; /* 夠厚才看得出裡面的流光 */
background: rgba(255, 255, 255, 0.06);
border-radius: 6px;
overflow: hidden;
}
.pop-bar {
position: absolute;
top: 0; bottom: 0; left: 0;
width: var(--pop-w, 0%);
/* 人氣值差距很大（最低約為最高的 1%），純比例會讓末段幾條細到幾乎消失，
所以給一個最小寬度。但這個值不能設大 —— 設成 30px 以上時，末三名
（544 / 454 / 254）會被一起撐成同樣長度，反而看不出彼此差距。
12px 剛好保住可見度又保留比例。實際數值一律以左側數字為準。 */
min-width: 12px;
border-radius: 6px;
background: linear-gradient(90deg, var(--primary), var(--title-pink));
overflow: hidden;
}
/* 流光：固定寬度的高光帶沿著長條掃過。
長條本身的寬度是直接給定、不做進場動畫（開頁即為正確長度），
會動的只有這一層高光。 */
.pop-bar::after {
content: '';
position: absolute;
inset: 0;
background-image: linear-gradient(100deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.55) 50%,
rgba(255, 255, 255, 0) 100%);
background-size: 160px 100%;
background-repeat: no-repeat;
animation: popShine var(--pop-dur, 3s) linear var(--pop-delay, 0s) infinite;
}
@keyframes popShine {
from { background-position: -160px 0; }
to { background-position: calc(100% + 160px) 0; }
}
/* 整列滑過時微微提亮：名稱在最左、數值在最右，中間隔著長長的長條，
有一條淡淡的底色比較好對照同一列。 */
.pop-row:hover .pop-track { background: rgba(255, 255, 255, 0.10); }
.pop-row:hover .pop-name,
.pop-row:hover .pop-value { color: #ffffff; }
a.pop-row:hover .pop-ig { opacity: 1; color: var(--title-pink); }
a.pop-row:focus-visible { outline: 2px solid var(--title-pink); outline-offset: 4px; border-radius: 4px; }
.pop-name, .pop-value, .pop-track { transition: color .2s ease, background-color .2s ease; }
.pop-value {
font-family: var(--font-mono);
font-size: 1.075rem; /* 0.95rem(15.2px) + 2px */
color: var(--text-muted);
/* 靠右：數字的右緣會對齊長條起點，長短不一的數值看起來仍是一直線。 */
text-align: right;
font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
.pop-bar::after { animation: none; }
}
@media (max-width: 799px) {
.pop-section { padding: 48px 16px 12px; }
.pop-head { margin-bottom: 28px; }
.pop-chart { gap: 10px; }
/* 名稱欄加寬、數值欄縮窄：加了頭像之後 96px 放不下「頭像＋Checkmate＋IG 圖示」，
名字會被截成「Checkm…」。數值最長只有「51.9%」，58px 用不到，勻 14px 過去。 */
.pop-row { grid-template-columns: 120px 56px 1fr; gap: 7px; }
.pop-av { width: 20px; height: 20px; } /* 20px 是手機不撐高列的上限（列高 21.06px） */
.pop-ig { width: 11px; height: 11px; }
.pop-name { gap: 5px; }
.pop-name { font-size: 0.85rem; }
.pop-value { font-size: 0.905rem; } /* 0.78rem(12.5px) + 2px */
.pop-copy--rules { font-size: 0.75rem; }
.pop-divider { margin: 20px 0 16px; }
.pop-track { height: 20px; }
.pop-bar { min-width: 10px; }
}