/* ============================================================
   ARK PROJECT — RANKINGS UI
   Covers:
     1) themes/ark_project/rankings/  (tabbed Battle Rankings page)
     2) themes/ark_project/ranking/   (default Flux ranking pages:
        character, zeny, guild, mvp, alchemist, blacksmith,
        death, homunculus — via .horizontal-table etc.)
   Palette is derived from the theme: gold #ffb931 / orange #ff9600
   (yellow-ribbon), dark #151515, Montserrat headings.
   ============================================================ */

:root {
	--rk-gold:        #ffb931;
	--rk-gold-deep:   #ff9600;
	--rk-ink:         #14161b;
	--rk-panel:       #1b1e26;
	--rk-panel-2:     #21252f;
	--rk-row:         #1e222b;
	--rk-row-alt:     #191d25;
	--rk-line:        rgba(255, 255, 255, 0.06);
	--rk-text:        #e9eaef;
	--rk-muted:       #9298a8;
	--rk-silver:      #c3cad8;
	--rk-bronze:      #cd8b52;
	--rk-green:       #58d68d;
	--rk-red:         #ff6b6b;
	--rk-radius:      14px;
	--rk-font-head:   'Montserrat', sans-serif;
	--rk-font-body:   'Open Sans', sans-serif;
}

/* ------------------------------------------------------------
   SECTION SHELL
   ------------------------------------------------------------ */
#rankings {
	padding: 60px 0 90px 0;
	font-family: var(--rk-font-body);
}

#rankings .ranking-container {
	width: 100%;
}

#rankings .rankings-header-info {
	margin-bottom: 28px;
}

#rankings .section-pretitle {
	font-family: var(--rk-font-head);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: var(--rk-gold-deep);
	margin: 0 0 6px 0;
}

#rankings .form-heading,
#rankings .ranking-container > h2 {
	font-family: var(--rk-font-head);
	font-size: 34px;
	font-weight: 800;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #1c1c1c;
	margin: 0 0 4px 0;
}

#rankings .ranking-container > h3 {
	font-family: var(--rk-font-head);
	font-size: 14px;
	font-weight: 500;
	color: #7a7f8d;
	margin: 0 0 24px 0;
}

/* ------------------------------------------------------------
   TAB BOX (Battle Rankings page)
   ------------------------------------------------------------ */
#rankings .ranking-grid {
	width: 100%;
}

#rankings .ranking-tab-box {
	background: var(--rk-ink);
	border-radius: var(--rk-radius);
	overflow: hidden;
	box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.55);
	border: 1px solid rgba(255, 185, 49, 0.12);
}

/* Tab strip */
#rankings .tab-box-options {
	display: flex;
	flex-wrap: wrap;
	background: linear-gradient(180deg, #101218 0%, var(--rk-ink) 100%);
	border-bottom: 1px solid var(--rk-line);
	padding: 10px 10px 0 10px;
	gap: 4px;
}

#rankings .tab-box-options .tabs {
	flex: 1 1 auto;
	min-width: 150px;
	text-align: center;
	cursor: pointer;
	padding: 14px 18px 16px 18px;
	border-radius: 10px 10px 0 0;
	position: relative;
	transition: background 0.2s ease, color 0.2s ease;
	user-select: none;
}

#rankings .tab-box-options .tabs p {
	margin: 0;
	font-family: var(--rk-font-head);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--rk-muted);
	transition: color 0.2s ease;
	line-height: 1.4;
}

#rankings .tab-box-options .tabs:hover {
	background: rgba(255, 255, 255, 0.04);
}

#rankings .tab-box-options .tabs:hover p {
	color: var(--rk-text);
}

#rankings .tab-box-options .tabs.active {
	background: var(--rk-panel);
}

#rankings .tab-box-options .tabs.active p {
	color: var(--rk-gold);
}

/* Gold underline marker on the active tab */
#rankings .tab-box-options .tabs.active::after {
	content: '';
	position: absolute;
	left: 18px;
	right: 18px;
	bottom: 0;
	height: 3px;
	border-radius: 3px 3px 0 0;
	background: linear-gradient(90deg, var(--rk-gold-deep), var(--rk-gold));
	box-shadow: 0 0 14px rgba(255, 185, 49, 0.55);
}

/* Tab panes — hidden by default, shown when .active (matches the
   existing JS in top-ranking.php) */
#rankings .tab-box-content {
	background: var(--rk-panel);
}

#rankings .tab {
	display: none;
	padding: 8px 22px 26px 22px;
	animation: rkFade 0.25s ease;
}

#rankings .tab.active {
	display: block;
}

@keyframes rkFade {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	#rankings .tab { animation: none; }
}

/* ------------------------------------------------------------
   RANKING TABLE (tabbed page)
   ------------------------------------------------------------ */
#rankings .ranking-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0 8px;
}

#rankings .ranking-table .tab-item-header {
	padding: 22px 12px 6px 12px;
	text-align: left;
	border: 0;
	background: transparent;
}

#rankings .ranking-table .tab-item-header h2 {
	font-family: var(--rk-font-head);
	font-size: 20px;
	font-weight: 800;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--rk-text);
	margin: 0;
}

#rankings .ranking-table .tab-item-header h2::after {
	content: '';
	display: block;
	width: 46px;
	height: 3px;
	margin-top: 8px;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--rk-gold-deep), var(--rk-gold));
}

/* Column headers */
#rankings .ranking-table .col-header th {
	font-family: var(--rk-font-head);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--rk-muted);
	text-align: left;
	padding: 12px 14px 6px 14px;
	border: 0;
	background: transparent;
	white-space: nowrap;
}

/* Data rows rendered as "cards" via border-spacing */
#rankings .ranking-table tbody tr:not(.col-header):not(:first-child),
#rankings .ranking-table tr:not(.col-header) {
	background: transparent;
}

#rankings .ranking-table td {
	background: var(--rk-row);
	border-top: 1px solid var(--rk-line);
	border-bottom: 1px solid var(--rk-line);
	padding: 12px 14px;
	font-size: 14px;
	color: var(--rk-text);
	vertical-align: middle;
	transition: background 0.15s ease;
}

#rankings .ranking-table td:first-child {
	border-left: 1px solid var(--rk-line);
	border-radius: 10px 0 0 10px;
}

#rankings .ranking-table td:last-child {
	border-right: 1px solid var(--rk-line);
	border-radius: 0 10px 10px 0;
}

#rankings .ranking-table tr:hover td {
	background: var(--rk-panel-2);
}

/* Player cell */
#rankings .ranking-status {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 200px;
}

#rankings .ranking-status .job-image,
#rankings .ranking-status .emblem-image {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 25%, #2c3140, #171a21);
	border: 2px solid rgba(255, 255, 255, 0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

#rankings .ranking-status .job-image img,
#rankings .ranking-status .emblem-image img {
	max-width: 34px;
	max-height: 38px;
	image-rendering: pixelated;
}

#rankings .ranking-status p {
	margin: 0;
	line-height: 1.35;
}

#rankings .ranking-status p:first-child,
#rankings .ranking-status strong {
	font-family: var(--rk-font-head);
	font-size: 14px;
	font-weight: 700;
	color: var(--rk-text);
}

#rankings .ranking-status a {
	color: inherit;
	text-decoration: none;
}

#rankings .ranking-status a:hover strong {
	color: var(--rk-gold);
}

/* "Top #N" line under the name */
#rankings .ranking-status .rank-label,
#rankings .ranking-status div > p:last-child {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--rk-muted);
}

/* Numeric emphasis cells */
#rankings .ranking-table td.stat-kills   { color: var(--rk-green); font-weight: 700; }
#rankings .ranking-table td.stat-deaths  { color: var(--rk-red);   font-weight: 700; }
#rankings .ranking-table td.stat-main    { color: var(--rk-gold);  font-weight: 800; font-family: var(--rk-font-head); }
#rankings .ranking-table td.stat-muted   { color: var(--rk-muted); font-size: 13px; }

/* ------------------------------------------------------------
   TOP 3 MEDAL ROWS
   .rank-1 / .rank-2 / .rank-3 on the <tr>
   (.top-rank.gold from older markup maps to rank-1)
   ------------------------------------------------------------ */
#rankings .ranking-table tr.rank-1 td,
#rankings .ranking-table tr.top-rank.gold td {
	background: linear-gradient(90deg, rgba(255, 185, 49, 0.16) 0%, var(--rk-row) 45%);
	border-color: rgba(255, 185, 49, 0.35);
}

#rankings .ranking-table tr.rank-1 td:first-child,
#rankings .ranking-table tr.top-rank.gold td:first-child {
	box-shadow: inset 4px 0 0 var(--rk-gold);
}

#rankings .ranking-table tr.rank-2 td {
	background: linear-gradient(90deg, rgba(195, 202, 216, 0.10) 0%, var(--rk-row) 45%);
	border-color: rgba(195, 202, 216, 0.25);
}

#rankings .ranking-table tr.rank-2 td:first-child {
	box-shadow: inset 4px 0 0 var(--rk-silver);
}

#rankings .ranking-table tr.rank-3 td {
	background: linear-gradient(90deg, rgba(205, 139, 82, 0.12) 0%, var(--rk-row) 45%);
	border-color: rgba(205, 139, 82, 0.28);
}

#rankings .ranking-table tr.rank-3 td:first-child {
	box-shadow: inset 4px 0 0 var(--rk-bronze);
}

#rankings .ranking-table tr.rank-1 .ranking-status .job-image,
#rankings .ranking-table tr.top-rank.gold .ranking-status .job-image,
#rankings .ranking-table tr.rank-1 .ranking-status .emblem-image {
	border-color: var(--rk-gold);
	box-shadow: 0 0 12px rgba(255, 185, 49, 0.45);
}

#rankings .ranking-table tr.rank-2 .ranking-status .job-image,
#rankings .ranking-table tr.rank-2 .ranking-status .emblem-image {
	border-color: var(--rk-silver);
}

#rankings .ranking-table tr.rank-3 .ranking-status .job-image,
#rankings .ranking-table tr.rank-3 .ranking-status .emblem-image {
	border-color: var(--rk-bronze);
}

#rankings .ranking-table tr.rank-1 .rank-label,
#rankings .ranking-table tr.top-rank.gold .ranking-status div > p:last-child { color: var(--rk-gold); }
#rankings .ranking-table tr.rank-2 .rank-label { color: var(--rk-silver); }
#rankings .ranking-table tr.rank-3 .rank-label { color: var(--rk-bronze); }

/* Guild pill for "NO GUILD" */
#rankings .no-guild {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1px;
	color: var(--rk-muted);
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--rk-line);
	border-radius: 20px;
	padding: 3px 10px;
	white-space: nowrap;
}

/* Empty state inside a tab */
#rankings .ranking-table .tab-item-header h2.rk-empty,
#rankings .rk-empty-state {
	text-align: center;
	color: var(--rk-muted);
	font-family: var(--rk-font-head);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 1px;
	padding: 40px 0;
}

/* ------------------------------------------------------------
   DEFAULT FLUX RANKING PAGES (themes/ark_project/ranking/*)
   These share .ranking-container + .horizontal-table
   ------------------------------------------------------------ */
#rankings .table-scrollable {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: var(--rk-radius);
	box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.35);
}

#rankings .horizontal-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--rk-ink);
	border-radius: var(--rk-radius);
	overflow: hidden;
	font-size: 14px;
}

#rankings .horizontal-table th {
	font-family: var(--rk-font-head);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--rk-gold);
	text-align: left;
	background: linear-gradient(180deg, #101218 0%, var(--rk-ink) 100%);
	border-bottom: 2px solid rgba(255, 185, 49, 0.35);
	padding: 14px 16px;
	white-space: nowrap;
}

#rankings .horizontal-table td {
	padding: 11px 16px;
	color: var(--rk-text);
	border-bottom: 1px solid var(--rk-line);
	vertical-align: middle;
}

#rankings .horizontal-table tr:nth-child(even) td {
	background: var(--rk-row-alt);
}

#rankings .horizontal-table tr:nth-child(odd) td {
	background: var(--rk-row);
}

#rankings .horizontal-table tr:hover td {
	background: var(--rk-panel-2);
}

#rankings .horizontal-table a {
	color: var(--rk-text);
	font-weight: 600;
	text-decoration: none;
}

#rankings .horizontal-table a:hover {
	color: var(--rk-gold);
}

#rankings .horizontal-table .top-ranked td {
	background: linear-gradient(90deg, rgba(255, 185, 49, 0.16) 0%, var(--rk-row) 55%);
	box-shadow: inset 4px 0 0 var(--rk-gold);
}

#rankings .horizontal-table .empty-row td {
	background: transparent;
	height: 38px;
	border-bottom: 1px dashed var(--rk-line);
}

#rankings .horizontal-table img {
	vertical-align: middle;
	image-rendering: pixelated;
}

#rankings .not-applicable {
	color: var(--rk-muted);
	font-style: italic;
	font-size: 12px;
}

/* Filter form (job class / monster filter) */
#rankings .search-form2 {
	margin: 0 0 18px 0;
}

#rankings .search-form2 p {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
}

#rankings .search-form2 label {
	font-family: var(--rk-font-head);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #5a5f6e;
	margin: 0;
}

#rankings .search-form2 select {
	font-family: var(--rk-font-body);
	font-size: 13px;
	color: var(--rk-text);
	background: var(--rk-ink);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 8px;
	padding: 8px 12px;
	min-width: 220px;
	max-width: 100%;
	outline: none;
}

#rankings .search-form2 select:focus {
	border-color: var(--rk-gold);
	box-shadow: 0 0 0 3px rgba(255, 185, 49, 0.2);
}

#rankings .search-form2 input[type="submit"],
#rankings .search-form2 input[type="button"] {
	font-family: var(--rk-font-head);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	border: 0;
	border-radius: 8px;
	padding: 9px 20px;
	cursor: pointer;
	transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

#rankings .search-form2 input[type="submit"] {
	color: #1c1204;
	background: linear-gradient(180deg, var(--rk-gold), var(--rk-gold-deep));
	box-shadow: 0 6px 16px -6px rgba(255, 150, 0, 0.6);
}

#rankings .search-form2 input[type="submit"]:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 20px -8px rgba(255, 150, 0, 0.7);
}

#rankings .search-form2 input[type="button"] {
	color: var(--rk-text);
	background: var(--rk-panel-2);
	border: 1px solid rgba(255, 255, 255, 0.14);
}

#rankings .search-form2 input[type="button"]:hover {
	background: #2a2f3b;
}

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 991px) {
	#rankings .tab-box-options .tabs {
		min-width: calc(50% - 4px);
	}
}

@media (max-width: 767px) {
	#rankings {
		padding: 36px 0 60px 0;
	}

	#rankings .form-heading,
	#rankings .ranking-container > h2 {
		font-size: 26px;
	}

	#rankings .tab-box-options .tabs {
		min-width: 100%;
		border-radius: 8px;
		padding: 12px;
	}

	#rankings .tab-box-options .tabs.active::after {
		left: 12px;
		right: 12px;
		bottom: -1px;
	}

	#rankings .tab {
		padding: 4px 10px 18px 10px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	#rankings .ranking-table {
		min-width: 640px;
	}

	#rankings .ranking-status {
		min-width: 170px;
	}

	#rankings .search-form2 select {
		min-width: 100%;
	}
}