*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
   font-family: 'Helvetica Neue', 'Arial', sans-serif;
   margin: 0;
   padding: 0;
   background: #080a0d;
   color: #c8cdd6;
   font-family: 'Barlow Condensed', sans-serif;
   font-size: 14px;
}

.feather {
   width: 18px;
   height: 18px;
   stroke: currentColor;
   stroke-width: 2;
   stroke-linecap: round;
   stroke-linejoin: round;
   fill: none;
   margin: 0 4px;
   margin-bottom: -2px;
}

h1 .feather {
   margin-bottom: 0px;
}

p .feather, button .feather, .infobox .feather {
   width: 12px;
   height: 12px;
   margin: -1px;
}

.name {
   padding-left: 2px;
}

.play-button {
   padding: 0;
}

.play-button:hover .feather {
   fill: #DDD;
   stroke: #AAA;
}

h1 {
   text-align: center;
   color: #c8cdd6;
   text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
   margin: 10px 0;
   cursor: pointer;
}

h1:hover {
   color: #8891a4;
}

h2 {
   color: #c8cdd6;
   margin: 15px 0;
}

main {
   max-width: 800px;
   margin: 20px auto;
   padding: 20px;
   background-color: #0a0c0f;
   border-radius: 8px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.secondary {
   color: #76818f;
}

a {
   color: #007bff;
   text-decoration: none;
}

.serveritem .players {
   text-align: center;
}

.table-wrap {
   height: 92vh;
   overflow-y: auto;
   overflow-x: auto;
}

.table-wrap table th {
   position: sticky;
   top: 0;
   background: inherit;
}

table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

thead tr {
  background: #0d1117;
  border-bottom: 1px solid #1e2530;
}

th {
  padding: 7px 12px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #aaa;
  cursor: pointer;
  white-space: nowrap;
}

th:hover { color: #8891a4; }

tbody tr {
  border-bottom: 1px solid #131920;
  cursor: pointer;
  transition: background 0.1s;
}

tbody tr:hover  { background: #111820; }

td {
  padding: 8px 10px;
  color: #8891a4;
  max-width: 250px;
}

.table-wrap td {
   max-width: 150px;
}

td.map  {
   font-family: monospace;
   font-size: 12px;
   color: #6b7a8d;
   overflow-wrap: break-word;
}

.tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.8px;
  border-radius: 2px;
  text-transform: uppercase;
}

#filter {
   margin: 10px;
   padding: 5px 8px;
   border: 1px solid #1e2530;
   border-radius: 4px;
}

h3 {
   margin: 10px;
}

#filter h3, .infobox h3 {
   border-bottom: 1px solid #333;
   margin-bottom: 4px;
   line-height: 26px;
}

#filter input, #filter select, button {
   background: #222;
   border: 1px solid #000;
   color: #c8cdd6;
   padding: 5px 8px;
   border-radius: 4px;
}

button.close {
   background: #111;
}

button:hover {
   background:#111;
}

button.close:hover {
   background: #000;
}

button.selected {
   background: #555;
}

.select-wrap {
   position: relative;
   display: inline-block;
}

.select-wrap select {
   border: none;
   outline: none;
   background: transparent;
   width: 100%;
   appearance: none;
}

#filter label {
   min-width: 100px;
   display: inline-block;
   margin: 5px;
}

#filter td {
   padding: 3px 12px;
}

.infobox {
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background: #0a0c0f;
   padding: 20px;
   border-radius: 8px;
   border: 1px solid #1e2530;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
   z-index: 1000;
   cursor: default;
   max-height: 80vh;
   overflow: auto;

   background: rgba(10, 12, 15, 0.6);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
   display:none;
}

a {
   color: #FFF;
}

a:hover {
   text-decoration: underline;
   cursor: pointer;
}

button:hover {
   cursor: pointer;
}

#playercount-chart {
   margin: 0 auto;
}

.refresh {
   float: right;
   cursor: pointer;
   opacity: 0.4;
}

.refresh:hover {
   opacity: 0.8;
}

::-webkit-scrollbar {
   width: 8px;
   height: 8px;
}

::-webkit-scrollbar-thumb {
   background: rgba(68, 68, 68, 0.4);
   border-radius: 4px;
   transition: background 0.3s;
}

.status-active {
   color: greenyellow;
}

.status-dead {
   color: red;
}

img {
   border-radius: 100%;
}

.plus .feather, .minus .feather {
   width: 16px;
   height: 16px;
   stroke-width: 3;
}

.plus.active .feather {
   color: #3E3;
}

.minus.active .feather {
   color: #E33;
}

table a {
   color: #EEE;
}

table a:hover {
   color: #FFF;
}