RankingsPanel {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	font-family: PixelFusion;
	color: #4a3b63;
	pointer-events: all;
	background-color: rgba( 234, 244, 252, 0.88 );   // 浅蓝磨砂（像素风）

	.rk-title {
		position: absolute;
		left: 0;
		right: 0;
		top: 80px;
		font-size: 100px;
		font-weight: 800;
		letter-spacing: 10px;
		text-align: center;
		color: #f272a7;
		text-shadow: 0 4px 0 #4a3b63;
	}

	.rk-status {
		position: absolute;
		left: 0;
		right: 0;
		top: 460px;   // 空卡正中：读取中/无数据/失败三种状态都显示在这（行牌之后创建，压在空牌上层）
		font-size: 32px;
		font-weight: 700;
		letter-spacing: 4px;
		text-align: center;
		color: #d98a00;
		text-shadow: 0 3px 0 rgba( 74, 59, 99, 0.25 );
	}

	.rk-head {
		position: absolute;
		left: 50%;
		margin-left: -550px;
		width: 1100px;
		top: 250px;
		font-size: 12px;
		letter-spacing: 2px;
		text-align: left;
		color: rgba( 74, 59, 99, 0.45 );
	}

	// 排行榜滚动容器（原生网页式滚动：滚轮 + 滚动条，溢出才出现）
	// 行牌流内单列；宽 1600 / 起点 188 是用户调校值的迁移
	.rk-list {
		position: absolute;
		left: 50%;
		margin-left: -800px;
		width: 1600px;
		top: 180px;
		height: 770px;   // ★ 列表视口高度（精修改这里；底到 BACK 上方为止）
		flex-direction: column;   // ⚠️ s&box 默认 row，不加就是横排
		overflow-y: scroll;
		scrollbar-width: 10px;   // ★ 滚动条粗细
		scrollbar-color: rgba( 74, 59, 99, 0.45 ) transparent;
		pointer-events: all;   // 面板默认 None：不打开收不到滚轮
	}

	.rk-row {
		flex-shrink: 0;   // 不许压缩：压了就不溢出、滚动条永远出不来
		margin: 0 0 6px 0;   // ★ 行距（原 top 起点式行距作废，改这里）
		font-size: 50px;
		letter-spacing: 10px;
		text-align: left;
		color: #4a3b63;
		border-image: url( ui/skin/note.png ) 50 fill / 5px stretch;
		padding: 20px 100px;   // ★ 行内文字与牌边缘的距离（精修改这里）
	}

	.rk-self {
		position: absolute;
		left: 0;
		right: 0;
		top: 860px;
		font-size: 32px;
		font-weight: 700;
		letter-spacing: 3px;
		text-align: center;
		color: #e5488d;
	}

	// 返回按钮：UiKit 药丸（外观在 Assets/ui/cruikit.scss），这里只管摆放
	.rk-back {
		position: absolute;
		left: 50%;
		margin-left: -110px;   // 自己宽度 220 的一半，任意分辨率水平居中
		top: 980px;
		width: 220px;
		padding-top: 8px;
	}
}