* { box-sizing: border-box; }
    html, body { height: 100%; }
    /* Animated starfield background Canvas holder */
    #bg {
      position: fixed; inset: 0; z-index: -1;
      background: linear-gradient(180deg, #0a0b13 0%, #07070b 100%);
    }
a {color:#5894d7;text-decoration:none;}
a:hover {color:#e4ea36;}
.gvme {width:980px;margin:0 auto;}
.box {background:rgba(23,23,23,0.6);border:1px solid #555;padding:1.5rem; border-radius:1rem; max-width:980px; margin:auto; margin-bottom:2rem; }
button { background:#238636; color:white; cursor:pointer; }
button:hover { background:#2ea043; }
.result { margin-top:1rem; background:#0d1117; padding:1rem; border-radius:0.5rem; }
.gmq-server-container { display:flex; flex-wrap:wrap; gap:1rem; margin-top:1rem; }
.gmq-server-info, .gmq-server-map { flex:1; min-width:250px; }
.gmq-server-map {opacity: 0.6; }
.gmq-status-online { color:#2aff00; }
.gmq-status-offline { color:#f85149; }
.gmq-player-table-wrapper {
  width: 100%;
  overflow-x: auto; /* allows horizontal scroll */
}

.gmq-player-table {
  width: 100%; /* or whatever minimum width you want */
  border-collapse: collapse;margin-top:1rem; 
}

.gmq-player-table th, .gmq-player-table td { padding:0.5rem; border-bottom:1px solid #333; }
.gmq-join-link { display:inline-block; margin-top:1rem; padding:0.5rem 1rem; background:#0066d9; color:#fff;font-weight:bold; text-decoration:none; border-radius:0.5rem; }
.gmq-join-link:hover { background:#2c7cd7; }
.dynamic-section { margin-top:1rem; }
.toggle-link { color:#5e8ec3; cursor:pointer; text-decoration:none; }

.topbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.8rem 1.5rem;
  background: linear-gradient(to bottom, rgba(19,43,56,1) 50%, transparent 100%);
  border:1px solid rgba(29,82,104,0.9);
  position:sticky;border-radius:1rem;
  top:0;
  z-index:10;
}

.logo {
  font-size:1.4rem;
  font-weight:700;
  color:#58a6ff;
  letter-spacing:1px;
}

.topbar form {
  display:flex;
  align-items:center;
  gap:.5rem;
  flex:1;
  max-width:700px;
  margin-left:2rem;
}

.topbar input,
.topbar select,
.topbar button {
  padding:.6rem .8rem;
  border:1px solid #4679b3;
  border-radius:.4rem;
  background:#162128;
  color:#fff;
}
input::placeholder {color: #ccc;   }
input::-webkit-input-placeholder { color: #ccc; } 
input::-moz-placeholder { color: #ccc; }        
input:-ms-input-placeholder { color: #ccc; }    
input:-moz-placeholder { color: #ccc; }        

.topbar input { flex:1; }
.topbar select { flex:.5; }
.topbar button {border:1px solid #000;
  background:#238636;
  cursor:pointer;
  flex:.4;
}
.topbar button:hover { background:#2ea043; }
footer {background: rgba(23,23,23, 0.6);color: #9aa; text-align: center; padding: 20px 20px 20px;border-radius:0.5rem;border:1px solid #555; }
.follow {float:right}
.follow img {  filter: grayscale(100%);transition: filter 0.3s ease; }
.follow img:hover {filter: grayscale(0%);}
.form-group {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.form-group label {
  margin-bottom: .3rem;
  font-size: .9rem;
  font-weight: 600;
  color: #e8dc23;
}
.three-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 1rem 0;
}

.three-cols .col {
  background: rgba(20, 20, 20, 0.6);
  padding: 1rem;
  border-radius: .5rem;
  border: 1px solid #333;
}
.three-cols .col h3{
font-size:1rem;
}

.srv-meta {
  display: flex;
  align-items: flex-start; /* keeps image top aligned */
  gap: .6rem;
  margin: .5rem 0;
}

.srv-meta img {
  height: 38px;
  flex-shrink: 0; /* prevent shrinking */
}

.srv-text {
  display: flex;
  flex-direction: column; /* stack status & ip */
  font-size: .95rem;
  line-height: 1.3;
}
.gaming-btn {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(45deg, #2b445f, #0067db);
  border: 2px solid #58a6ff;
  border-radius: 0.5rem;
  cursor: pointer;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  box-shadow: 0 0 8px #6099d9, 0 0 12px #6fb3ff;
}

.gaming-btn:hover {
  background: linear-gradient(45deg, #ff9900, #ff0055);
  border-color: #ff9900;
  box-shadow: 0 0 12px #ff9900, 0 0 24px #ff0055;
  transform: scale(1.10) rotate(-1deg);
}

.gaming-btn:active {
  transform: scale(0.98);
  box-shadow: 0 0 6px #ff0055, 0 0 12px #ff9900;
}
.gameslug {color:#e1b400;font-weight:bold;}
.fade-bar {
  position: relative;
  width: 100%;
  padding: 10px 10px;margin:10px 0 10px;
  background: linear-gradient(to right, rgba(19,43,56,1) 0%, transparent 75%);border-radius:0.8rem;
  color: #e8dc23;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans";
}

.fade-bar h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.tooltip {
  position: relative;
  display: inline-block;
}
.tooltip img {
margin-right:4px;
}
.tooltip img:hover {
cursor:pointer;
}

.tooltip-text {
  visibility: hidden;
  position: absolute;
  bottom: 100%; /* place above the image */
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 8px; /* space between image and tooltip */
  
  background: rgba(0,0,0,0.8);
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 14px;
  white-space: nowrap;
  
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none; /* avoid blocking hover */
}

.tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

/* Mobile adjustments */
@media (max-width: 600px) {
  html { font-size:18px; }
  .gvme, .box { width:100%; margin:0; }
  .topbar {
    flex-direction: column;         /* logo on top, form under */
    align-items: flex-start;
    gap: .8rem;
  }

  .topbar form {
    flex-direction: column;         /* stack input, select, button */
    width: 100%;
    margin-left: 0;
    gap: .6rem;
  }

  .topbar input,
  .topbar select,
  .topbar button {
    width: 100%;                   /* full width on mobile */
    flex: none;
  }
  .form-group {
    width: 100%;
    flex: none;
  }
.box {margin:10px 0;}
.topbar {
  position:relative;
}
  .three-cols {
    grid-template-columns: 1fr;
  }
}