:root{
  /* Base */
  --background: #070b18;
  --secondary: rgba(255,255,255,.07);
  --secondary-strong: rgba(255,255,255,.10);
  --striperow: rgba(255,255,255,.06);
  --stripe-hover: rgba(139,200,255,.16);
  --hover: #8BC8FF;
  --border-col: rgba(255,255,255,.14);
  --fontcolor: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.65);
  --borderradius: 16px;

  /* Accent */
  --good: #3CFFC6;
  --warn: #FFD66B;
  --bad:  #FF6B8B;

  /* Shadow */
  --shadow: 0 18px 60px rgba(0,0,0,.35);
  --shadow-soft: 0 10px 30px rgba(0,0,0,.25);
}

/* Scrollbar */
::-webkit-scrollbar { height: 8px; width: 6px; background: rgba(255,255,255,.06); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(139,200,255,.85), rgba(139,200,255,.35));
  -webkit-border-radius: 999px;
  -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.55);
}
::-webkit-scrollbar-corner { background: rgba(255,255,255,.06); }

*{
  margin:0;
  padding:0;
  transition: all 0.12s cubic-bezier(0.39, 0.575, 0.565, 1);
  scrollbar-width: thin;
  scrollbar-color: rgba(139,200,255,.85) transparent;
  box-sizing: border-box;
}

html { scroll-behavior: smooth; }

body{
  background:
    radial-gradient(1200px 600px at 25% 0%, rgba(139,200,255,.25), transparent 60%),
    radial-gradient(900px 500px at 80% 20%, rgba(255,255,255,.18), transparent 55%),
    linear-gradient(180deg, rgba(5,10,22,.55), rgba(5,10,22,.88)),
    url("/stuff/himmel.png");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;

  font-family: 'Roboto', sans-serif;
  color: var(--fontcolor);
  min-height: 100vh;
  display:flex;
  flex-direction:column;
}

/* Links */
a{ color:var(--fontcolor); text-decoration:none; }
a:hover{ color: var(--hover); cursor:pointer; }

/* ===== HEADER ===== */
header{
  position: relative;
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  flex-flow: column;
  margin-top: 14px;
}

.header-container{
  position: relative;
  display:flex;
  justify-content: space-between;
  align-items:center;
  width: 80%;
  min-height: 76px;
  padding: 14px 16px;

  border-radius: var(--borderradius);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border: 1px solid var(--border-col);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
}

.logo{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 0;
}

.logo img{
  width: 40px;
  height: 40px;
  max-width:none;
  border-radius: 12px;
  filter: none;
  box-shadow: var(--shadow-soft);
}

.logo h1{
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* top nav */
.header-container ul{
  height: 100%;
  display:flex;
  align-items:center;
  gap: 10px;
}
.header-container ul li{ margin:0; }

ul, ol{ list-style-type:none; }
ul li{ margin-right:0; margin-bottom:0; }

/* Search block (works for old .helpme markup + new one) */
.helpme{
  margin-left: 16px;
  display:flex;
  justify-content:right;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}

.helpme i{
  position: absolute;
  display:flex;
  justify-content:center;
  align-items:center;
  width: 30px;
  height: 30px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(139,200,255,.25);
  border-radius: 10px;
  color: rgba(255,255,255,.75);
}

.helpme input{
  display:block;
  visibility: visible;
  padding: 10px 12px 10px 42px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  color: var(--fontcolor);
  border-radius: 14px;
  width: 320px;
  max-width: 70vw;
  height: 42px;
  outline:none;
  box-shadow: 0 12px 26px rgba(0,0,0,.18);
}
.helpme input::placeholder{ color: rgba(255,255,255,.55); }
.helpme input:focus{
  border-color: rgba(139,200,255,.55);
  box-shadow: 0 0 0 3px rgba(139,200,255,.15);
}

/* ===== MAP LIST MENU ===== */
.map-list2{
  display:flex;
  flex-flow: column;
  width: 28%;
  padding-top: 5px;
}

.togglemaps{ display:none !important; }

.modes{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

.modes li{
  display:flex;
  justify-content:center;
  align-items:center;
  padding: 12px 10px;
  font-weight: 900;
  font-size: 12px;

  border-radius: var(--borderradius);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow-soft);
  user-select:none;
}

.tablink{ border:1px solid transparent; }
.tablink:hover{ cursor:pointer; filter: brightness(1.06); }
.tablink.active{
  background: rgba(139,200,255,.14);
  border: 1px solid rgba(139,200,255,.45);
  color: var(--fontcolor);
}

/* map list scroll */
.mappeno{
  overflow-y: auto;
  overflow-x: hidden;
  height: 660px;
  padding-right: 2px;
}
.mappeno.invisible{ display:block !important; }

.mappeno li{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--borderradius);
  display:flex;
  align-items:center;
  padding: 12px 12px;
  width: 100%;
  margin-bottom: 6px;

  /* no line breaks for map names */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.content{
  animation-name: fade;
  animation-duration: .25s;
  animation-fill-mode:forwards;
  display:none;
}
.content.opened{ display:block; }

#sticky{
  position: sticky;
  z-index: 99;
  top:10px;
}

.selector:hover{
  cursor:pointer;
  background-color: rgba(139,200,255,.16) !important;
  border-color: rgba(139,200,255,.35) !important;
  color: var(--hover);
}

/* ===== MAIN / LAYOUT ===== */
main{
  display:flex;
  justify-content:center;
  align-items:center;
  position:relative;
  width:100%;
  margin-top: 14px;
}

.wrapper{
  display:flex;
  justify-content: space-between;
  width: 80%;
  height: 100%;
  gap: 14px;
}

/* ===== LEADERBOARD ===== */
.leaderboard{
  position: relative;
  display:flex;
  flex-flow: column;
  border-radius: var(--borderradius);
  width: 70%;
  transition: .2s;

  /* glass card look */
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
  overflow:hidden;
}

.info{
  position: sticky;
  top: 0;
  z-index: 99;
  border-radius: 0;
  padding: 10px 10px 0;
  background: linear-gradient(180deg, rgba(10,18,40,.65), rgba(10,18,40,.20));
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.boxshadows{ box-shadow: var(--shadow-soft); }

/* Warn row */
#strangerdanger{
  background-color: rgba(240,86,86,.10);
  border: 1px solid rgba(255,137,137,.35);
  overflow: hidden;
  position: relative;
  color: rgba(255,170,170,.95);
}
#strangerdanger:hover{
  background-color: rgba(240,86,86,.18) !important;
  border: 1px solid rgba(255,137,137,.55) !important;
}
#strangerdanger:before{
  position: absolute;
  display:block;
  content: "\f071";
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 32px;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
}
#strangerdanger:hover:before{ font-size: 36px; }

/* Rows */
.row{
  display:grid;
  grid-template-columns: 0.6fr 2.2fr 1.1fr 1.2fr;
  align-items:center;
  margin-top: 8px;
  border-radius: 14px;
  padding: 12px 12px;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  animation-name: fade;
  animation-duration: .25s;
  animation-fill-mode:forwards;
}

.info .row{
  margin-top: 0;
  background: rgba(139,200,255,.08);
  border: 1px solid rgba(139,200,255,.18);
  color: rgba(139,200,255,.95);
  font-weight: 900;
}

.row img{
  width: 26px;
  height: 26px;
  border-radius: 999px;
}

.players{
  padding: 6px 10px 12px;
}

.players .row span:nth-child(2){
  display:flex;
  align-items:center;
  gap: 10px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.players .row span:nth-child(2) img{ margin-right: 0; }

.row span:nth-child(1){
  text-align:center;
  font-weight: 900;
  color: rgba(255,255,255,.85);
}

.row span:nth-child(3){
  font-weight: 900;
  white-space: nowrap;
}
.row span:nth-child(4){
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgba(255,255,255,.80);
}

/* old stripped id + modern hover */
#stripped, .stripped, .players .row:nth-child(even){
  background-color: rgba(255,255,255,.045);
}

.players .row:hover, .stripped:hover{
  cursor:pointer;
  background-color: rgba(139,200,255,.16) !important;
  border-color: rgba(139,200,255,.30) !important;
}

/* ===== SERVERLIST (old .server + new .serverbubble supported) ===== */
.server-container{
  top:10px;
  position: relative;
  width: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.serverlist{
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 14px;
  justify-content: space-between;
  align-items: stretch;
  width: 80%;
}

/* Old layout .server (fallback) */
.server{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height: 82px;
  border-radius: var(--borderradius);
  padding: 12px;

  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(14px);
}
.server div{
  display:flex;
  flex-flow: column;
  justify-content: space-around;
  height: 100%;
}
#online{ border-left: 3px solid rgba(60,255,198,.55); }
#offline{ border-left: 3px solid rgba(255,107,139,.55); }

/* New modern bubble layout (matches my updated HTML) */
.serverbubble{
  border-radius: var(--borderradius);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(14px);
  padding: 12px;
  overflow:hidden;
}
.serverbubble.is-online{ border-color: rgba(60,255,198,.22); }
.serverbubble.is-offline{ border-color: rgba(255,107,139,.22); opacity:.92; }

.sb-top{display:flex; align-items:flex-start; justify-content:space-between; gap:10px;}
.sb-title h4{
  margin:0;
  font-size:14px;
  font-weight:900;
  letter-spacing:.2px;
  line-height:1.15;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  max-width: 44ch;
}
.sb-status{
  margin-top:6px;
  font-size:12px;
  color: var(--muted);
  display:flex;
  align-items:center;
  gap:8px;
}
.dot{
  width:9px;height:9px;border-radius:999px;
  background: var(--good);
  box-shadow: 0 0 0 3px rgba(60,255,198,.15);
}
.dot.off{
  background: var(--bad);
  box-shadow: 0 0 0 3px rgba(255,107,139,.15);
}

.sb-mid{
  margin-top:10px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.sb-kv .k{ font-size:11px; color: var(--muted); letter-spacing:.2px; }
.sb-kv .v{ font-size:13px; font-weight:900; margin-top:2px; }

.sb-bottom{
  margin-top:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.10);
}
.joinbtn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius: 14px;
  background: rgba(139,200,255,.16);
  border:1px solid rgba(139,200,255,.30);
  font-weight:900;
}
.joinbtn:hover{ filter: brightness(1.08); }
.ip{ color: var(--muted); font-size:12px; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; max-width: 24ch; }

/* ===== FOOTER ===== */
footer{
  position: relative;
  display:flex;
  justify-content:center;
  bottom:0;
  color:var(--fontcolor);
  width:100%;
  min-height: 100px;
  margin-top: 40px;
}

footer .wrapper{
  display:flex;
  justify-content: space-between;
  align-items:center;
  width: 80%;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);

  border-radius: 26px 26px 0px 0px;
  padding: 26px;
}
footer .wrapper div:nth-child(1){ width: 50%; }
.authors{ width: 30%; text-align:right; color: var(--muted); }
footer a{ color: var(--hover); font-weight: 900; }

/* top button */
#topbutton{
  position:absolute;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size: 20px;
  top:-24px;
  height: 44px;
  width: 44px;

  background: rgba(10,18,40,.65);
  color: var(--hover);
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(12px);
}
#topbutton:hover{
  top:-30px;
  background: rgba(139,200,255,.16);
  color: var(--fontcolor);
  border-color: rgba(139,200,255,.45);
}

/* ===== RWD NAVBAR ===== */
.togglemaps:hover{
  cursor: pointer;
  color:var(--hover);
  background: rgba(139,200,255,.16);
}
.mobiletoggler{
  display:none;
  align-items:center;
  box-sizing:border-box;
  z-index:9999;
  position: relative;
  width: 100%;
  background: rgba(10,18,40,.65);
  border-bottom: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(14px);
}
.mobiletoggler i:hover{ transform:scale(1.08); cursor:pointer; }

/* ===== Animations ===== */
.fadein{ animation-name: fade; animation-duration: .2s; animation-fill-mode:forwards; }
.fadeout{ animation-name: fadeout; animation-duration: .2s; animation-fill-mode:forwards; }

@keyframes fade{ 0%{opacity:0} 100%{opacity:1} }
@keyframes fadeout{ 0%{opacity:1} 100%{opacity:0} }
@keyframes sizeup{ 0%{transform:scale(0)} 100%{transform:scale(1)} }
@keyframes siuup{ 0%{transform: translateX(-100px);opacity:0} 100%{transform: translateX(0);opacity:1} }

/* ===== RWD ===== */
@media (max-width: 1280px){
  .modes { grid-template-columns: 1fr 1fr; gap:10px; }
}

@media (max-width: 1024px){
  header{ align-items:center; padding-left:0; }
  .logo h1{ font-size: 16px !important; }
  .logo{ justify-content:center; width:100%; }
  .logo img{ width: 28px; height: 28px; }
  .header-container{ width: 90%; }
  .header-container ul{ display:none; }
  .mobiletoggler{ display:flex; }

  .serverlist{ grid-template-columns: 1fr; width: 90%; }
  .server{ flex-flow: column; text-align:center; height:auto; font-size:12px; }

  .togglemaps{
    display:flex !important;
    padding: 10px;
    background: rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    border-radius: var(--borderradius);
    width:100%;
    margin-bottom: 10px;
    color: var(--hover);
    justify-content:center;
    align-items:center;
    font-size: 34px;
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(14px);
  }
  .togglemaps:hover, .togglemaps:active{
    background: rgba(139,200,255,.16);
    color: var(--fontcolor);
    border-color: rgba(139,200,255,.35);
  }

  .map-list2{ width:100%; }
  .modes{ gap: 12px; }
  .modes li{ width:100%; padding: 10px; }
  .mappeno{ display:block; height: 100%; margin-bottom: 15px; }
  .mappeno.invisible{ display:none !important; }

  .content{
    overflow-y:auto;
    height: 180px;
    position: relative;
  }

  .wrapper{
    width: 90%;
    flex-flow: column;
    align-items:center;
  }

  .leaderboard{
    width: 100%;
    font-size: 11px !important;
  }

  footer{ font-size: 12px; }
  footer .wrapper{ width: 90%; }
  footer .wrapper div:nth-child(1){ width: 100%; }
  .authors{ margin-top: 10px; width: 100%; text-align:left; }

  body .mobile-nav{
    display:none;
    animation-name: siuup;
    animation-duration: .2s;
    animation-fill-mode: backwards;
  }
  body.active .mobile-nav{
    display:flex;
    position:absolute;
    height: 100vh;
    width: 100%;
    background-color: rgba(0,0,0,.65);
    z-index: 999;
    animation-name: siuup;
    animation-duration: .2s;
    animation-fill-mode: forwards;
    padding-top: 10%;
    overflow:auto;
    backdrop-filter: blur(10px);
  }
  .mobile-nav ul{ width:100%; }
  .mobile-nav ul li{
    background: transparent;
    padding: 12px 16px;
    width: 100%;
    border-bottom: 1px solid rgba(255,255,255,.10);
  }
  body.active{ overflow:hidden; }
}

@media (max-width: 768px){
  body.active .mobile-nav{ padding-top: 20%; }
  .header-container{ height:auto; }
  .logo{ flex-flow: column; }
  .helpme{ margin-left:0 !important; margin-top:10px; justify-content:center; }
  .row{ grid-template-columns: 0.7fr 2.1fr 1.1fr 1.6fr; }
}

/* keep */
.mobile-nav{ display:none; }
input:focus{ outline:none; }



/* Search icon fix */
.helpme{ position: relative; }
.helpme i{
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  margin-right: 0;
}
.helpme input{ padding-left: 44px; }


/* Server bubble layout: Map links, Players rechts */
.serverbubble .sb-mid{
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.serverbubble .sb-mid .sb-kv{
  flex: 1;
  min-width: 0;
}

.serverbubble .sb-mid .sb-kv .v{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Players rechtsbündig */
.serverbubble .sb-mid .sb-kv-players{
  align-items: flex-end;
  text-align: right;
}