:root{
  --bg:#050113;
  --purple1:#9b63ff;
  --purple2:#ff4fb8;
  --aqua:#6ae6ff;
  --muted:#dcd5ff;
}

/* Reset */
*{box-sizing:border-box;margin:0;padding:0}

/* Page / Scrolling behaviour
   -> allow vertical scrolling on mobile/desktop
   -> enable smooth iOS scrolling
   -> allow vertical pan gestures */
html,body{
  min-height:100%;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg);
  color:#fff;
  overflow-x:hidden;        /* nur horizontal verhindern */
  overflow-y:auto;          /* vertikal scrollen erlauben */
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Starfield canvas (fixed full-viewport) */
/* pointer-events:none damit es Touch/Scroll nicht blockiert */
#starfield{
  position:fixed;
  inset:0;
  z-index:0;
  display:block;
  pointer-events:none;
}

/* Nebulae */
.nebula{position:fixed;inset:-30%;border-radius:50%;filter:blur(90px);mix-blend-mode:screen;opacity:0.9;z-index:1;pointer-events:none}
.n1{background:radial-gradient(circle at 30% 30%, rgba(155,99,255,0.35), transparent 40%);animation:move1 42s linear infinite}
.n2{background:radial-gradient(circle at 70% 70%, rgba(255,79,184,0.28), transparent 40%);animation:move2 58s linear infinite}
.n3{background:radial-gradient(circle at 50% 80%, rgba(106,230,255,0.2), transparent 40%);animation:move3 72s linear infinite}
@keyframes move1{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-6%,-4%) scale(1.12)}100%{transform:translate(0,0) scale(1)}}
@keyframes move2{0%{transform:translate(0,0) scale(1)}50%{transform:translate(5%,-6%) scale(1.08)}100%{transform:translate(0,0) scale(1)}}
@keyframes move3{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-4%,6%) scale(1.15)}100%{transform:translate(0,0) scale(1)}}

/* Content layout — min-height auf 100vh damit erster Viewport gut aussieht,
   aber Seite insgesamt scrollt wenn mehr Inhalt vorhanden ist */
.content{
  position:relative;
  z-index:3;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:3rem 2rem 5.5rem; /* mehr Platz unten für Server-Info / Footer */
}

/* Title & intro */
.title{
  font-family:Orbitron,Inter,sans-serif;
  font-weight:800;
  font-size:clamp(2.4rem,7vw,5rem);
  background:linear-gradient(90deg,var(--aqua),var(--purple1),var(--purple2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  margin-bottom:.9rem;
  text-transform:none;
  letter-spacing:.01em;
  filter:drop-shadow(0 10px 24px rgba(79,0,120,0.18));
}
.info{
  max-width:64ch;
  color:var(--muted);
  line-height:1.6;
  font-size:1.05rem;
  margin-bottom:1.8rem;
}

/* Buttons */
.actions{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;align-items:center}
.btn{
  padding:.9rem 1.6rem;
  border-radius:14px;
  font-weight:700;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:transform .18s ease,box-shadow .18s ease;
}
.btn.main{
  background:linear-gradient(90deg,var(--aqua),var(--purple1));
  color:#070012;
  box-shadow:0 8px 30px rgba(155,99,255,0.18),0 0 30px rgba(106,230,255,0.08);
  animation:glow 2.6s ease-in-out infinite;
}
@keyframes glow{
  0%{box-shadow:0 8px 26px rgba(155,99,255,0.16),0 0 30px rgba(106,230,255,0.06)}
  50%{box-shadow:0 16px 48px rgba(255,79,184,0.22),0 0 40px rgba(168,80,255,0.12)}
  100%{box-shadow:0 8px 26px rgba(155,99,255,0.16),0 0 30px rgba(106,230,255,0.06)}
}
.btn.secondary{
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.08);
  color:#fff;
}
.btn:hover{transform:translateY(-4px)}

/* Footer */
.footer{
  position:relative;
  z-index:3;
  text-align:center;
  font-size:.92rem;
  color:#bdb6d9;
  padding:1rem 0;
}

/* --- Server Info Sektion --- */
.server-info{
  margin-top:2.6rem;
  color:var(--muted);
  font-size:1.05rem;
  line-height:1.6;
  text-align:center;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.06);
  padding:1.25rem 1.4rem;
  border-radius:18px;
  box-shadow:0 8px 30px rgba(155,99,255,0.08), 0 0 20px rgba(106,230,255,0.04);
  max-width:720px;
  width:calc(100% - 48px);
  position:relative;
  z-index:3;
  overflow:visible;
}

/* dezente neon-vertikale Leiste (Decoration) */
.server-info::after{
  content:'';
  position:absolute;
  left:-4px;
  top:10%;
  bottom:10%;
  width:6px;
  border-radius:6px;
  background:linear-gradient(180deg,var(--aqua),var(--purple1));
  opacity:0.55;
  transform:translateX(-8px);
  transition:transform .28s ease,opacity .28s ease;
}
.server-info:hover::after{ transform:translateX(0); opacity:0.9; }

/* Zeilen-Layout */
.server-info .row{
  display:flex;
  gap:1rem;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  width:100%;
}

/* Einzelne Info-Items */
.server-info .item{
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.42rem .7rem;
  border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,0.012), rgba(255,255,255,0.008));
  border:1px solid rgba(255,255,255,0.02);
  min-width:fit-content;
}

/* Label (z. B. "Java IP:") — gradient text im Orbitron */
.server-info .item .label{
  font-family:Orbitron,Inter,sans-serif;
  font-weight:800;
  font-size:0.98rem;
  background:linear-gradient(90deg,var(--aqua),var(--purple1),var(--purple2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  letter-spacing:0.4px;
}

/* Wert (z. B. IP / Port) — monospace, gut lesbar */
.server-info .item .value{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,monospace;
  font-weight:700;
  font-size:1rem;
  color:#fff;
  background:none;
  padding-left:.2rem;
}

/* Port hervorheben als Badge */
.server-info .item.port{
  padding:.38rem .9rem;
  box-shadow:0 6px 18px rgba(168,80,255,0.06);
  border-radius:999px;
}

/* einzelne <p> Fallback Styling falls du die p-Variante nutzt */
.server-info p{
  margin:0;
  padding:.18rem 0;
  display:flex;
  gap:.6rem;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
}
.server-info p span{
  font-family:Orbitron,Inter,sans-serif;
  font-weight:800;
  background:linear-gradient(90deg,var(--aqua),var(--purple1),var(--purple2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  letter-spacing:.35px;
}
.server-info p strong, .server-info p .value{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,monospace;
  font-weight:700;
  color:#fff;
}

/* Responsive Layout: nebeneinander auf breiteren Bildschirmen */
@media (min-width:720px){
  .server-info{ padding:1.4rem 1.8rem; max-width:780px }
  .server-info .row{ justify-content:center }
  /* wenn Platz da ist, erste Zeile: Java + Bedrock nebeneinander, zweite Zeile: Port */
  .server-info .row.top{ margin-bottom:.6rem }
}

/* Mobile specific:
   - Content starts nearer an der Oberkante, damit Nutzer auf kleinen Bildschirmen direkt scrollen können
   - Canvas bleibt fixed but pointer-events:none so touch is still usable */
@media (max-width:720px){
  .content{
    justify-content:flex-start;
    padding-top:5.5rem; /* Abstand von oben, damit Titel noch sichtbar ist */
    padding-bottom:5.5rem;
  }
  .server-info{
    margin-top:1.6rem;
    padding:1rem;
    border-radius:14px;
  }
  .btn{padding:.72rem 1.2rem}
  .title{font-size:2.4rem}
  .info{font-size:1rem}
}

/* reduces motion: deaktiviert Animationen / transitions */
@media (prefers-reduced-motion:reduce){
  .nebula, .btn.main, .server-info::after{ animation:none; transition:none; transform:none }
}