@font-face {
  font-family: bloody;
  src: url(DarkDistance-EawOr.ttf);
}
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
    color: #f4f4f4;
    font-family: Arial, sans-serif;
}

.fixed-bg {
  position: fixed;
	filter: brightness(0.3);
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;                      /* sit behind all content */
  background-image: url('../images/20250505_1439_Desert Warriors Assemble_remix_01jtgvtqhafzj8b8gb3675y035.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;           /* or “100% 100%” for exact fit */
}

.logo {
    display: block;
    margin: 0px auto 10px;
    max-width: 300px;
		text-align: center;
		width: 100%;
}
.logo a img { max-height: 150px }
.logo h1, h1, h2, h3, h4, h5, h6 {
	font-family: bloody, sans-serif !important;
	text-shadow: 1px 1px 3px #333;
}


.playername, .clanname {
    color: #9b0606;
    text-shadow: 0 0 5px #a10000;
}


.char-name {
    font-family: bloody, sans-serif;
    color: #6b0f0f;
    text-shadow: 0 0 5px #a10000;
}

.dishonorable{color:#b31313}

/* TABLES */

/* General container responsiveness */
.table-container {
  overflow-x: auto;
  margin: 20px auto;
  max-width: 95%;
}

@keyframes shimmer {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: 200px 0;
  }
}

/* Core table styling */
table {
  width: 100%;
  border-collapse: collapse;
  background-color: rgba(25, 25, 35, 0.82); /* Obsidian-dark glass feel */
  border: 1px solid rgba(150, 200, 255, 0.15); /* Subtle stormglass shimmer */
  box-shadow: 0 0 12px rgba(0, 255, 255, 0.08); /* faint ethereal glow */
  border-radius: 8px;
  overflow: hidden;
  backdrop-filter: blur(4px); /* <- This is the key */
  -webkit-backdrop-filter: blur(4px); /* For Safari */
}

/* Table headers */
th {
  background: linear-gradient(to bottom, rgba(60, 80, 100, 0.6), rgba(20, 30, 40, 0.6));
  color: #AEE6FF;
  padding: 10px;
  font-weight: 600;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  text-shadow: 0 0 3px rgba(0, 255, 255, 0.2);
  background: linear-gradient(
    90deg,
    rgba(60, 80, 100, 0.6),
    rgba(100, 150, 200, 0.15),
    rgba(60, 80, 100, 0.6)
  );
  background-size: 400% 100%;
}

/* Table rows */
td {
  padding: 12px 0px 12px 0px !important;
  color: #e6e6e6;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
td a { margin-left: 10px; }
/* Zebra striping */
tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.02);
}

.map-container {
  position: relative;
  width: 256px;
  height: 256px;
}

.map-container img {
  display: block;
  width: 100%;
  height: 100%;
}

.map-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 32px;
  color: red;
  font-weight: bold;
  pointer-events: none;
  line-height: 1;
}




/* Responsive: stack columns on small screens */
@media (max-width: 768px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }

  thead {
    display: none;
  }

  tr {
    margin-bottom: 15px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.08);
  }

  td {
    padding-left: 50%;
    position: relative;
	text-align: right !important;
	padding-right: 15px !important;
  }

  td::before {
    content: attr(data-label);
    position: absolute;
    left: 10px;
    top: 10px;
    font-weight: bold;
    color: #fff;
    text-transform: uppercase;
  }
  
}

#refresh-bar {
  position: relative;
  height: 4px;
  background: #eee;
  margin: 1em 0;
}
#bar-fill {
  width: 0%;
  height: 100%;
  background: var(--primary-color, #007acc);
  transition: width 0.2s linear;
}

/* Cards,shimmer is for the gradient background on performance metrics. */

.card-shimmer {
  position: relative;
  overflow: hidden;
  border-radius: 0.25rem; /* match your card corners */
}

/* the moving “light” gradient */
.card-shimmer::before {
  content: "";
  position: absolute;
  top: 0; left: -150%;
  width: 150%; height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0)   0%,
    rgba(255,255,255,0.4) 50%,
    rgba(255,255,255,0)  100%
  );
  animation: shimmer 1.5s infinite;
  z-index: 1;
}

/* keep the card’s content above the shimmer */
.card-shimmer > .card-body {
  position: relative;
  z-index: 2;
}

@keyframes shimmer {
  0%   { transform: translateX(0); }
  100% { transform: translateX(200%); }
}

/* ——— CPU-load colour classes ——— */
/* < 50%: green */
.card-shimmer.load-low {
  background-color: #74f894;
}

/* 50–75%: yellow */
.card-shimmer.load-medium {
  background-color: #ebff00;
}

/* 75–90%: orange */
.card-shimmer.load-high {
  background-color: #e6af50;
}

/* > 90%: red */
.card-shimmer.load-critical {
  background-color: #f93636;
}

.metrics-grid .card {
	/*float: left;*/
}

.serverstat p {
    margin: 0 auto;
    display: inline-block;
    background: #333;
    border-radius: 5px;
    color: #fff;
    padding: 5px 10px;
}

h5.card-title {
    font-family: bloody, sans-serif !important;
}

.serverdatalabel {
	  margin-bottom: 10px !important;
    border-radius: 5px 0 0 5px !important;
    margin-right: -5px !important;
    background-color: #333 !important;
}

.serverdata {
	  margin-bottom: 10px !important;
    background-color: #aeaeae !important;
    color: #333 !important;
    border-radius: 0 5px 5px 0 !important;
}
.serverdata.bg-success {
    background-color: #74f894 !important;
    color: #333 !important;
    border-radius: 0 5px 5px 0 !important;
}
.serverdata.bg-danger {
    background-color: #f87474 !important;
    color: #fff !important;
    border-radius: 0 5px 5px 0 !important;
}
.serverdata.bg-warning {
    background-color: #ffdc3e !important;
    color: #333 !important;
    border-radius: 0 5px 5px 0 !important;
}

#pvp-times .tz-block ul {
	list-style: none;
}

.rank-gold td, .rank-gold td a {
  color: gold !important;
  font-weight: bold;
  animation: lbshimmer 2s infinite linear;
}

.rank-silver td, .rank-silver td a{
  color: silver !important;
  font-weight: bold;
  animation: lbshimmer 2s infinite linear;
}

.rank-bronze td, .rank-bronze td a {
  color: #cd7f32 !important; /* bronze tone */
  font-weight: bold;
  animation: lbshimmer 2s infinite linear;
}

@keyframes lbshimmer {
  0% {
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
  }
  50% {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
  }
  100% {
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
  }
}

.player-card {
  @apply bg-gray-900 rounded-2xl p-6 shadow-xl border border-gray-700 text-white max-w-3xl mx-auto mt-10;
}

.player-card h2 {
  @apply text-3xl font-bold mb-2 text-yellow-400;
}

.player-card .meta {
  @apply text-sm text-gray-400 mb-4;
}

.player-card .stat-grid {
  @apply grid grid-cols-3 gap-6 text-center mb-8;
}

.player-card .stat-box {
  @apply bg-gray-800 p-4 rounded-xl shadow-md;
}

.player-card .stat-box h4 {
  @apply text-lg text-gray-300 mb-1;
}

.player-card .stat-box .value {
  @apply text-2xl font-semibold;
}

.kill-log h3 {
  @apply text-xl font-semibold mb-2 border-b border-gray-700 pb-1;
}

.kill-log ul {
  @apply space-y-3;
}

.kill-log li {
  @apply flex justify-between items-center bg-gray-800 p-3 rounded-lg shadow-sm;
}

.kill-log .timestamp {
  @apply text-xs text-gray-400;
}

.kill-log .shameful {
  @apply text-red-500 font-semibold;
}

.navbar-nav li.nav-item {
    margin: 0 5px;
		text-align: center;
}

.navbar-nav li.nav-item .nav-link {
	background: rgba(0, 0, 0, 0.5);
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(0, 0, 0, 0.7);
	color: rgb(220, 53, 69);
	font-family: bloody, sans-serif !important;
}

.navbar-nav li.nav-item .nav-link:hover,
.navbar-nav li.nav-item .nav-link.sg-active {
		background: rgb(152 71 0 / 50%);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 119, 0, 0.7);
    color: #000;
    font-family: bloody, sans-serif !important;
}
.cpu-wrapper {
  overflow: hidden;
}

/* 2) Float each .cpu-div so that exactly 48 fit per row */
.cpu-div {
  float: left;
  width: calc(100% / 48);
  box-sizing: border-box;
  padding: 2px;         /* adjust as you wish */
  text-align: center;   /* center the “#label” beneath each bar */
  margin: 0;            /* no extra margin squishing them */
}

/* 3) Bar container (fixed 10×100) stays centered */
.cpu-container {
  width: 10px;
  height: 100px;
  background: #eee;
  position: relative;
  margin: 0 auto;
}

/* 4) The animated “fill” inside each container */
.cpu-bar {
  position: absolute;
  bottom: 0;
  width: 10px;
  height: 0;
  background: #28a745;
  transition: height 0.8s ease;
}

/* 5) Label under each bar */
.cpu-label {
  font-size: 0.6rem;
  white-space: nowrap;
  margin-top: 2px;
}