/* ===================================================================
 * Cozy RO - halaman Ranking (character / guild / zeny / pvp), 2026-09-30.
 * Dimuat header.php hanya di ?module=ranking. Semua aturan di bawah
 * .cozy-page-ranking, jadi ranking lain (mvp / death / castle) yang masih
 * memakai template bawaan tidak ikut berubah.
 * Komponen dasar (cg-hero, cg-table, cg-scroll, cg-foot) dari cozy-ro.css;
 * di sini hanya hero ringkas, form filter, podium medali, dan tabel 4+.
 * Teks HP memakai px: main.css mengecilkan root font jadi 9.375px.
 * =================================================================== */

/* ---------- hero ringkas: teks kiri, sprite kanan ---------- */
.cozy-page-ranking .rk-hero {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 2rem 2.4rem;
	margin: 0 0 1.4rem;
}
.cozy-page-ranking .rk-hero-text { flex: 1 1 auto; min-width: 0; }
.cozy-page-ranking .rk-hero h2 { margin: 0 0 .4rem; }
.cozy-page-ranking .rk-hero .cg-lead { margin: 0; }
.cozy-page-ranking .rk-hero-art {
	flex: 0 0 auto;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 4px;
	min-width: 96px;
	min-height: 80px;
	padding: 0 6px;
	line-height: 0;
	background: radial-gradient(ellipse at 50% 100%, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 70%);
}
.cozy-page-ranking .rk-hero-art img { max-height: 106px; width: auto; }
.cozy-page-ranking .rk-hero-art .rk-hero-icon { width: 24px; height: 24px; margin: 0 0 2px; }

/* ---------- form filter kelas (GET, field bawaan) ---------- */
.cozy-page-ranking .rk-filter {
	display: block;
	margin: 0 0 1.2rem;
	padding: 10px 14px;
	background: var(--cg-lav);
	border: 1px solid var(--cg-line);
	border-radius: 12px;
}
.cozy-page-ranking .rk-filter p {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	color: inherit;
}
.cozy-page-ranking .rk-filter label {
	display: inline-block;
	margin: 0;
	font-family: "montserrat-semibold", sans-serif;
	font-size: 13px;
	font-style: normal;
	color: var(--cg-purple);
}
.cozy-page-ranking .rk-filter select {
	min-width: 190px;
	margin: 0;
	border-color: #d9cfe6;
	border-radius: 8px;
}
.cozy-page-ranking .rk-filter input[type="submit"],
.cozy-page-ranking .rk-filter input[type="button"] {
	margin: 0;
	padding: 7px 18px;
	border-radius: 999px;
	font-family: "montserrat-semibold", sans-serif;
	font-size: 13px;
	font-weight: normal; /* flux.css: .search-form2 input[type=submit] bold -> tebal palsu */
	line-height: 1.4;
}
.cozy-page-ranking .rk-filter input[type="submit"] {
	background: var(--cg-purple);
	border: 1px solid var(--cg-purple);
	color: #fff;
}
.cozy-page-ranking .rk-filter input[type="submit"]:hover,
.cozy-page-ranking .rk-filter input[type="submit"]:focus { background: #5c3f7c; border-color: #5c3f7c; }
.cozy-page-ranking .rk-filter input[type="button"] {
	background: #fff;
	border: 1px solid #d9cfe6;
	color: var(--cg-purple);
}
.cozy-page-ranking .rk-filter input[type="button"]:hover,
.cozy-page-ranking .rk-filter input[type="button"]:focus { background: var(--cg-gold); border-color: #e6bd55; color: var(--cg-ink); }
.cozy-page-ranking .rk-filter input:focus-visible,
.cozy-page-ranking .rk-filter select:focus-visible { outline: 2px solid var(--cg-purple); outline-offset: 2px; }

/* ===================================================================
 * PODIUM (ranking/_podium.php)
 * Desktop: 2 - 1 - 3 di atas anak tangga; HP: satu kolom 1, 2, 3.
 * Urutan DOM selalu 1, 2, 3 (pembaca layar membaca peringkat berurutan).
 * =================================================================== */
.cozy-page-ranking .rk-podium {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: end;
	gap: 16px;
	margin: 0 0 2rem;
	padding: 70px 0 0;
	list-style: none;
}
.cozy-page-ranking .rk-podium > li { list-style: none; margin: 0; }
.cozy-page-ranking .rk-pod { display: flex; flex-direction: column; min-width: 0; grid-row: 1; }
.cozy-page-ranking .rk-pod-1 { grid-column: 2; }
.cozy-page-ranking .rk-pod-2 { grid-column: 1; }
.cozy-page-ranking .rk-pod-3 { grid-column: 3; }

.cozy-page-ranking .rk-pod-card {
	position: relative;
	flex: 1 1 auto;
	padding: 44px 16px 16px;
	text-align: center;
	background: #fff;
	border: 1px solid var(--cg-line);
	border-radius: 14px;
	box-shadow: 0 4px 14px rgba(43, 33, 64, .08);
}
.cozy-page-ranking .rk-gold .rk-pod-card {
	border-color: #e3c56f;
	background: linear-gradient(180deg, #fff6d9 0%, #fff 58%);
	box-shadow: 0 6px 20px rgba(212, 167, 58, .25);
}
.cozy-page-ranking .rk-silver .rk-pod-card { border-color: #d3d9e2; background: linear-gradient(180deg, #f1f4f8 0%, #fff 58%); }
.cozy-page-ranking .rk-bronze .rk-pod-card { border-color: #e6c3a2; background: linear-gradient(180deg, #fbefe4 0%, #fff 58%); }

/* medali: cakram bergradasi + pita ungu berbentuk V di atasnya */
.cozy-page-ranking .rk-medal {
	position: absolute;
	top: -64px;
	left: 50%;
	width: 68px;
	height: 98px;
	margin-left: -34px;
}
.cozy-page-ranking .rk-medal::before,
.cozy-page-ranking .rk-medal::after {
	content: "";
	position: absolute;
	top: 0;
	width: 20px;
	height: 50px;
	background: linear-gradient(180deg, var(--cg-purple-2) 0%, var(--cg-purple) 100%);
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .18);
}
.cozy-page-ranking .rk-medal::before { left: 12px; transform: skewX(20deg); }
.cozy-page-ranking .rk-medal::after  { right: 12px; transform: skewX(-20deg); }
.cozy-page-ranking .rk-medal-disc {
	position: absolute;
	z-index: 1;
	left: 0;
	bottom: 0;
	width: 68px;
	height: 68px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: "montserrat-extrabold", sans-serif;
	font-size: 28px;
	line-height: 1;
	color: #5a3a00;
	text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
	background: radial-gradient(circle at 34% 28%, #fffbe8 0%, #ffe08a 22%, #e9b949 55%, #b98320 82%, #8a5f16 100%);
	box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .35), 0 0 0 3px #fff, 0 0 0 5px #d4a73a, 0 6px 14px rgba(138, 95, 22, .35);
}
.cozy-page-ranking .rk-silver .rk-medal-disc {
	color: #343b47;
	background: radial-gradient(circle at 34% 28%, #ffffff 0%, #eef1f5 22%, #c9d0da 55%, #9aa4b2 82%, #6b7483 100%);
	box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .4), 0 0 0 3px #fff, 0 0 0 5px #aeb6c2, 0 6px 14px rgba(80, 90, 105, .3);
}
.cozy-page-ranking .rk-bronze .rk-medal-disc {
	color: #4a2508;
	background: radial-gradient(circle at 34% 28%, #fff1e2 0%, #f3c99a 22%, #d99256 55%, #a8612b 82%, #6e3b17 100%);
	box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .3), 0 0 0 3px #fff, 0 0 0 5px #c98a52, 0 6px 14px rgba(110, 59, 23, .3);
}

/* isi kartu */
.cozy-page-ranking .rk-pod-name {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	max-width: none;
	margin: 0 0 4px;
	font-size: 18px;
	line-height: 1.3;
	overflow-wrap: anywhere;
}
.cozy-page-ranking .rk-pod-name strong { font-family: "montserrat-bold", sans-serif; font-weight: normal; }
.cozy-page-ranking .rk-gold .rk-pod-name { font-size: 20px; }
.cozy-page-ranking .rk-pod-meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 4px 12px;
	max-width: none;
	margin: 0 0 10px;
	font-size: 14px;
	line-height: 1.4;
	color: var(--cg-muted);
}
.cozy-page-ranking .rk-pod-class { font-family: "montserrat-semibold", sans-serif; color: var(--cg-purple); }
.cozy-page-ranking .rk-pod-stat {
	max-width: none;
	margin: 0 0 10px;
	padding: 8px 0;
	border-top: 1px dashed #e3d7ee;
	border-bottom: 1px dashed #e3d7ee;
	line-height: 1.2;
}
.cozy-page-ranking .rk-pod-val {
	display: block;
	font-family: "montserrat-extrabold", sans-serif;
	font-size: 28px;
	color: var(--cg-purple);
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}
.cozy-page-ranking .rk-gold .rk-pod-val { font-size: 32px; }
.cozy-page-ranking .rk-pod-lbl {
	display: block;
	margin-top: 4px;
	font-family: "montserrat-semibold", sans-serif;
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--cg-muted);
}
.cozy-page-ranking .rk-pod-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
	gap: 8px 10px;
	margin: 0;
}
/* tepat 4 angka (guild): 2 x 2, bukan 3 + 1 */
.cozy-page-ranking .rk-pod-stats:has(> div:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cozy-page-ranking .rk-pod-stats > div { min-width: 0; }
.cozy-page-ranking .rk-pod-stats dt {
	margin: 0;
	font-family: "montserrat-semibold", sans-serif;
	font-size: 11px;
	font-weight: normal;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--cg-muted);
}
.cozy-page-ranking .rk-pod-stats dd {
	margin: 0;
	font-size: 15px;
	line-height: 1.35;
	color: var(--cg-ink);
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

/* anak tangga podium */
.cozy-page-ranking .rk-step {
	display: block;
	margin: 10px 0 0;
	border-radius: 10px 10px 4px 4px;
	text-align: center;
	font-family: "montserrat-extrabold", sans-serif;
	font-size: 18px;
	letter-spacing: .08em;
	color: #2b2140;
	text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
}
.cozy-page-ranking .rk-gold .rk-step   { height: 84px; line-height: 84px; font-size: 22px; background: linear-gradient(180deg, #f3c95a 0%, #c9962e 100%); }
.cozy-page-ranking .rk-silver .rk-step { height: 54px; line-height: 54px; background: linear-gradient(180deg, #c9d0da 0%, #939dab 100%); }
.cozy-page-ranking .rk-bronze .rk-step { height: 32px; line-height: 32px; font-size: 15px; background: linear-gradient(180deg, #e0a36a 0%, #a8612b 100%); }

/* emblem guild (gambar 24x24; gagal dimuat -> onerror menyembunyikannya) */
.cozy-page-ranking .rk-emblem {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	image-rendering: pixelated;
	vertical-align: middle;
}
.cozy-page-ranking .rk-emblem-lg { width: 48px; height: 48px; }
.cozy-page-ranking .rk-guild { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }

/* ---------- tabel peringkat 4+ ---------- */
.cozy-page-ranking .rk-scroll { margin: 0 0 1.2rem; }
.cozy-page-ranking table.cg-table.rk-table th,
.cozy-page-ranking table.cg-table.rk-table td { vertical-align: middle; }
.cozy-page-ranking table.cg-table.rk-table .rk-num {
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.cozy-page-ranking table.cg-table.rk-table .rk-c-rank { width: 56px; text-align: center; }
.cozy-page-ranking table.cg-table.rk-table td.rk-zeny,
.cozy-page-ranking table.cg-table.rk-table td.rk-kills { font-family: "montserrat-bold", sans-serif; color: var(--cg-purple); }
.cozy-page-ranking .rk-rank {
	display: inline-block;
	min-width: 32px;
	height: 32px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--cg-lav);
	border: 1px solid var(--cg-line);
	font-family: "montserrat-bold", sans-serif;
	font-size: 13px;
	line-height: 30px;
	text-align: center;
	color: var(--cg-purple);
}
.cozy-page-ranking .rk-foot { max-width: none; margin: 0 0 1rem; }

/* ---------- tablet: tiga kartu masih berdampingan, dipadatkan ---------- */
@media only screen and (max-width: 900px) {
	.cozy-page-ranking .rk-podium { gap: 10px; }
	.cozy-page-ranking .rk-pod-card { padding: 42px 10px 12px; }
	.cozy-page-ranking .rk-pod-val { font-size: 24px; }
	.cozy-page-ranking .rk-gold .rk-pod-val { font-size: 26px; }
}

/* ---------- HP ---------- */
@media only screen and (max-width: 768px) {
	.cozy-page-ranking .rk-hero { padding: 1.6rem 1.6rem; gap: 10px; }
	.cozy-page-ranking .rk-hero h2 { font-size: 24px; }
	.cozy-page-ranking .rk-hero .cg-lead { font-size: 14px; line-height: 1.5; }
	.cozy-page-ranking .rk-hero-art { min-width: 64px; min-height: 60px; }
	.cozy-page-ranking .rk-hero-art img { max-height: 72px; }
	.cozy-page-ranking .cg-foot { font-size: 13px; }
}

/* HP: podium jadi daftar kartu mendatar (medali di kiri), tanpa anak tangga. */
@media only screen and (max-width: 640px) {
	.cozy-page-ranking .rk-filter { padding: 10px 12px; }
	.cozy-page-ranking .rk-filter p { gap: 6px 8px; }
	.cozy-page-ranking .rk-filter label { flex: 1 0 100%; }
	.cozy-page-ranking .rk-filter select { flex: 1 1 120px; min-width: 0; }
	.cozy-page-ranking .rk-filter input[type="submit"],
	.cozy-page-ranking .rk-filter input[type="button"] { flex: 0 0 auto; padding: 8px 14px; }

	.cozy-page-ranking .rk-podium { grid-template-columns: 1fr; gap: 10px; padding: 0; }
	.cozy-page-ranking .rk-pod-1,
	.cozy-page-ranking .rk-pod-2,
	.cozy-page-ranking .rk-pod-3 { grid-column: auto; grid-row: auto; }
	.cozy-page-ranking .rk-pod-card { padding: 12px 12px 12px 76px; text-align: left; min-height: 84px; }
	.cozy-page-ranking .rk-medal { top: 12px; left: 10px; width: 54px; height: 54px; margin-left: 0; }
	.cozy-page-ranking .rk-medal::before,
	.cozy-page-ranking .rk-medal::after { display: none; }
	.cozy-page-ranking .rk-medal-disc { width: 54px; height: 54px; font-size: 22px; }
	.cozy-page-ranking .rk-step { display: none; }
	.cozy-page-ranking .rk-pod-name,
	.cozy-page-ranking .rk-pod-meta { justify-content: flex-start; }
	.cozy-page-ranking .rk-pod-name,
	.cozy-page-ranking .rk-gold .rk-pod-name { font-size: 17px; }
	.cozy-page-ranking .rk-emblem-lg { width: 36px; height: 36px; image-rendering: auto; }
	.cozy-page-ranking .rk-pod-meta { font-size: 13.5px; margin-bottom: 8px; }
	.cozy-page-ranking .rk-pod-stat {
		display: flex;
		align-items: baseline;
		flex-wrap: wrap;
		gap: 2px 8px;
		margin: 0 0 8px;
		padding: 6px 0;
	}
	.cozy-page-ranking .rk-pod-val,
	.cozy-page-ranking .rk-gold .rk-pod-val { display: inline; font-size: 22px; }
	.cozy-page-ranking .rk-pod-lbl { display: inline; margin: 0; }
	/* angka tambahan mengalir sebaris: "JOB LEVEL 70  BASE EXP 343,210,000 ..." */
	.cozy-page-ranking .rk-pod-stats { display: flex; flex-wrap: wrap; gap: 2px 14px; }
	.cozy-page-ranking .rk-pod-stats > div { display: flex; align-items: baseline; gap: 5px; }
	.cozy-page-ranking .rk-pod-stats dt { font-size: 10.5px; }
	.cozy-page-ranking .rk-pod-stats dd { font-size: 14px; }
}

/* HP & tablet kecil (<= 768px): tabel 4+ jadi kartu baris supaya tidak perlu
   digeser ke samping (8-11 kolom tidak muat). */
@media only screen and (max-width: 768px) {
	/* tabel -> kartu baris: nomor di kiri, nama, kelas & guild, lalu angka berlabel */
	.cozy-page-ranking .rk-scroll { overflow: visible; }
	.cozy-page-ranking .cg-scroll > table.cg-table.rk-table { min-width: 0; }
	.cozy-page-ranking table.cg-table.rk-table,
	.cozy-page-ranking table.cg-table.rk-table tbody { display: block; width: 100%; }
	.cozy-page-ranking table.cg-table.rk-table thead { display: none; }
	/* Baris = flex: nama (baris 1), kelas + guild (baris 2), lalu ::after
	   selebar penuh memaksa angka (order 2) mulai di baris baru. */
	.cozy-page-ranking table.cg-table.rk-table tr {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 2px 12px;
		position: relative;
		padding: 10px 10px 10px 56px;
		border-bottom: 1px solid #eee8f3;
	}
	.cozy-page-ranking table.cg-table.rk-table tr::after { content: ""; order: 1; flex: 0 0 100%; height: 0; }
	.cozy-page-ranking table.cg-table.rk-table td {
		display: block;
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 14px;
		line-height: 1.45;
		overflow-wrap: normal;
		hyphens: none;
	}
	.cozy-page-ranking table.cg-table.rk-table tr:hover td { background: transparent; }
	.cozy-page-ranking table.cg-table.rk-table td.rk-c-rank { position: absolute; left: 10px; top: 10px; width: auto; }
	.cozy-page-ranking table.cg-table.rk-table td.rk-c-name { flex: 0 0 100%; font-size: 15.5px; overflow-wrap: anywhere; }
	.cozy-page-ranking table.cg-table.rk-table td.rk-c-class { color: var(--cg-purple); font-family: "montserrat-semibold", sans-serif; }
	.cozy-page-ranking table.cg-table.rk-table td.rk-c-guild { min-width: 0; max-width: 100%; }
	.cozy-page-ranking table.cg-table.rk-table td.rk-num { order: 2; text-align: left; }
	.cozy-page-ranking table.cg-table.rk-table td.rk-c-guild::before { margin-right: 6px; }
	.cozy-page-ranking table.cg-table.rk-table td.rk-c-guild::before,
	.cozy-page-ranking table.cg-table.rk-table td.rk-num::before {
		content: attr(data-label) " ";
		font-family: "muli-regular", sans-serif;
		font-size: 12px;
		color: var(--cg-muted);
	}
}