table.hiscores {
	width: 100%;
	border-collapse: collapse;
	font-family: Arial, sans-serif;
	font-size: 15px;
	color: #dbeeff;
	background: transparent;
	margin-bottom: 18px;
}
table.hiscores th, table.hiscores td {
	padding: 8px 10px;
	border-bottom: 1px solid #264769;
	vertical-align: middle;
	white-space: nowrap;
	text-align: left;
	background: rgba(25,35,55,0.10);
}
table.hiscores th {
	background: #1c2941;
	color: #dbeeff;
	font-weight: 700;
	font-size: 16px;
	text-align: left;
}
table.hiscores tr:nth-child(even) td {
	background: rgba(18,34,64,0.10);
}
table.hiscores tr:hover td {
	background: rgba(60, 100, 180, 0.3);
}
table.hiscores td a {
	color: #3b98ff;
	text-decoration: none;
}
table.hiscores td a:hover {
	text-decoration: underline;
}
table.hiscores td.num, 
table.hiscores th.num {
	text-align: right;
	font-variant-numeric: tabular-nums;
}
/* Specific column widths as percentages, total 100% */
table.hiscores th.rank { width: 5%; }
table.hiscores th.crown { width: 5%; }
table.hiscores th.username { width: 30%; }
table.hiscores th.combat, 
table.hiscores th.level, 
table.hiscores th.exp { width: 20%; }

img.crown-icon {
	height: 22px;
	vertical-align: middle;
}
	
.btn-hiscore {
  display: inline-flex; /* inline-flex for side-by-side and centering */
  align-items: center;
  justify-content: center;
  width: auto; /* auto width so buttons size by content */
  min-width: 120px; /* minimum width for consistent sizing */
  height: 42px;
  padding: 0 30px;

  background: url(/bin/img/nav_button.png) repeat-x 0 0;
  background-size: 100% 42px;
  background-position: 0 0;

  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  color: #d2d2d2;
  cursor: pointer;

  border: none;
  outline: none;
  opacity: 1;
  text-align: center;
  user-select: none;
  white-space: nowrap;

  transition: all 0.1s ease-in;
  margin: 0 10px; /* horizontal margin for spacing */
}

.btn-hiscore:hover,
.btn-hiscore.active {
  color: #dfff00;
  opacity: 0.5;
  transition: all 0.1s ease-out;
}

/* Icon style */
.btn-hiscore img {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-right: 8px; /* spacing between icon and text */
}
.btn-hiscore.disabled,
.btn-hiscore.disabled:hover {
  opacity: 0.3;
  pointer-events: none;
  cursor: default;
  color: #888;
}

.alert-danger {
    font-size: 20px;
    text-align: center;
    padding: 20px;
    max-width: 500px;
    margin: 50px auto;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.num {
    text-align: right;
}

.text-left {
    text-align: left !important;
}

.text-right {
    text-align: right !important;
}

.success {
    color: #28a745; /* Bootstrap green for higher rank */
    font-weight: bold;
}

.danger {
    color: #dc3545; /* Bootstrap red for lower rank */
    font-weight: bold;
}

.warning {
    color: #ffc107; /* Yellow for unknown/missing data */
    font-weight: bold;
}