:root {
  --bg: #0b0b0b;
  --bg-soft: #121212;
  --accent: #cb3636;
  --accent-glow: rgba(203, 54, 54, 0.45);
  --text: #e6e6e6;
  --muted: #9a9a9a;
  --danger: #ff3b3b;
  --online: #3bff6a;
  --ip: #f4f4f4;
}

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

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: radial-gradient(circle at top, #151515, var(--bg));
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

header {
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.28));
}

header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('photos/background.png') center/cover no-repeat;
  opacity: 0.18;
  z-index: 0;
}

/* grey circular gradient overlay */
header::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(230,230,230,0.12), rgba(0,0,0,0.35) 60%);
  mix-blend-mode: overlay;
  z-index: 1;
  pointer-events: none;
}

.header-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 0.75rem;
  z-index: 2;
  height: 56px;
}

.logo-wrap { display:flex; align-items:center; gap:1rem }
.logo { font-family: 'Orbitron', monospace; font-weight:800; color:var(--accent); font-size: clamp(1.25rem,3.2vw,2rem); text-shadow: 0 0 20px var(--accent-glow); }
.logo-link { display:flex; align-items:center }
.header-logo { max-width: 220px; height: auto; display:block }

.nav-inline { margin: 0 auto }
.nav-list { list-style:none; display:flex; gap:0.5rem; align-items:center; flex-wrap:wrap; justify-content:center }
.nav-list a { color:var(--text); text-decoration:none; padding:0.75rem 1.5rem; border-radius:12px; background: rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.02); font-weight:800; font-size:1.5rem }
.nav-list a:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(2,6,8,0.6) }
.nav-discord { background:var(--accent); color:#000; padding:0.85rem 1.65rem }

.hero { position:relative; z-index:1; max-width:900px; margin:2rem auto 0; text-align:center; padding:2.25rem 0 0.75rem }
.hero h1 {
  font-family: 'Bungee', 'Orbitron', monospace;
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  letter-spacing: 0.5px;
}
.hero p { margin-top: 0.75rem; font-size: 1.15rem; color: var(--muted) }
.hero-box { position:relative; z-index:1; max-width:800px; margin:2rem auto; text-align:center; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:2.5rem 2rem; border-radius:14px; border:1px solid rgba(255,255,255,0.04); box-shadow:0 18px 36px rgba(2,6,8,0.6) }
.tagline { margin-top:1rem; color:var(--muted); font-size:1.1rem }
.rules { margin-top:0.95rem; font-weight:600; color:var(--danger); letter-spacing:1px }
.serverip { margin-top:0.75rem; font-size:1.15rem; color:var(--ip) }
.status { margin-top:1rem; display:flex; justify-content:center; gap:0.5rem; align-items:center; font-weight:600 }
.dot { width:10px; height:10px; border-radius:50%; background:#777 }

/* Distinct status boxes (used in hero) */
.status-area { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:12px; z-index:2 }
.header-status { max-width:1100px; margin:12px auto 0; padding:0 0.75rem }
.status-box { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:1.25rem 1.4rem; border-radius:14px; min-width:200px; text-align:center; border:1px solid rgba(255,255,255,0.04); box-shadow: 0 18px 36px rgba(2,6,8,0.6); }
.status-box h4 { font-size:0.8rem; color:var(--muted); text-transform:uppercase; margin-bottom:0.35rem }
.status-value { font-size:1.3rem; font-weight:800; color:var(--text) }
.status-value.online { color:var(--online) }
.status-value.offline { color:var(--danger) }

.cta { margin-top:2.5rem; display:flex; gap:1rem; justify-content:center; flex-wrap:wrap }
.btn { padding:0.9rem 1.6rem; border-radius:10px; border:1px solid var(--accent); background:transparent; color:var(--text); font-weight:600; cursor:pointer; text-decoration:none }
.btn.primary { background:var(--accent); color:#000; box-shadow:0 0 25px var(--accent-glow) }
.btn:hover { transform:translateY(-2px); box-shadow:0 0 30px var(--accent-glow) }

section { padding:5rem 2rem; background:var(--bg-soft) }
.section-inner { max-width:1100px; margin:0 auto; display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:2rem }

.card { background:#0f0f0f; border-radius:16px; padding:2rem; border:1px solid #1e1e1e }
.card h3 { font-family:'Orbitron', monospace; margin-bottom:0.75rem; color:var(--accent) }
.ip { font-family:monospace; background:#000; padding:0.4rem 0.6rem; border-radius:6px; border:1px solid #222 }

footer { background:#080808; padding:2rem; text-align:center; color:var(--muted); font-size:0.9rem; margin-top:auto }

/* feature cards */
.features { display:grid; grid-template-columns: repeat(2, minmax(240px, 1fr)); gap:1rem }
.feature-card { background:#0f0f0f; border-radius:12px; padding:1rem; border-left:4px solid var(--accent); box-shadow:0 10px 30px rgba(0,0,0,0.6); text-decoration:none; color:var(--text) }
.feature-card h3 { color:var(--accent); margin-bottom:0.5rem }

@media (max-width:800px) {
  .features { grid-template-columns: 1fr }
}

@media (max-width:800px) {
  .header-inner { flex-direction:column; gap:0.5rem; height:auto }
  .nav-inline { margin:0 }
  .nav-list { row-gap: 1.8rem }
  .nav-list a { font-size:1.15rem; padding:0.78rem 1.1rem }
  .header-logo { max-width: 260px }
  .header-status { margin-top: 8px }
  .status-area { gap:0.75rem }
  .status-box { min-width: 0; width: 100% }
}

/* Guide page styles */
.guide-content { max-width:900px; margin:2rem auto; padding:2rem; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius:12px; border:1px solid rgba(255,255,255,0.04) }
.guide-content h1 { margin-bottom:1rem; color:var(--accent) }
.guide-content h2 { margin-top:1.5rem; margin-bottom:0.75rem; color:var(--accent) }
.guide-content ul { margin-left:1.5rem; margin-bottom:1rem }
.guide-content li { margin-bottom:0.5rem }
.guide-nav { max-width:900px; margin:2rem auto; text-align:center }

/* Slideshow styles */
.slideshow { max-width:1100px; margin:0.75rem auto 1.5rem; padding:0; position:relative; height:520px; border-radius:12px; overflow:hidden; background:linear-gradient(180deg, #0b0b0b, #0a0a0a); display:flex; align-items:center; justify-content:center; z-index:2 }
.slides { width:100%; height:100%; position:relative; z-index:5 }
.slides img { width:100%; height:100%; object-fit:contain; object-position:center; display:block; background:#000; cursor:pointer; z-index:5 }
.slide-btn { position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,0.35); color:#fff; border:none; width:52px; height:64px; border-radius:10px; cursor:pointer; font-size:2rem; display:flex; align-items:center; justify-content:center; z-index:6 }
.slide-btn:hover { background:rgba(0,0,0,0.6) }
.slide-btn.prev { left:12px }
.slide-btn.next { right:12px }

@media (max-width:800px) {
  .slideshow { height:240px }
  .slide-btn { width:44px; height:52px; font-size:1.6rem }
}

/* thumbnail strip */
.thumbs {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display:flex;
  gap:8px;
  padding:10px 14px;
  justify-content:center;
  align-items:center;
  overflow-x:auto;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(4px);
  z-index: 3;
}
.thumbs { pointer-events: none; }
.thumbs .thumb-img { width:96px; height:64px; object-fit:cover; border-radius:8px; cursor:pointer; border:2px solid transparent; box-shadow:0 6px 18px rgba(0,0,0,0.6) }
.thumbs .thumb-img { pointer-events: auto }
.thumbs .thumb-img.active { border-color:var(--accent); transform:translateY(-4px); box-shadow:0 12px 30px rgba(0,0,0,0.7) }

@media (max-width:800px) {
  .thumbs .thumb-img { width:72px; height:48px }
}

/* Modal (enlarged slideshow) */
.slideshow-modal { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(80,80,80,0.35); z-index:9999 }
.slideshow-modal .modal-inner { position:relative; max-width:98%; max-height:98%; display:flex; align-items:center; justify-content:center }
.slideshow-modal img { max-width:96vw; max-height:96vh; width:auto; height:auto; object-fit:contain; border-radius:8px; box-shadow:0 30px 80px rgba(0,0,0,0.8) }
.slideshow-modal .modal-close { position:absolute; top:-18px; right:-18px; background:rgba(0,0,0,0.6); color:#fff; border:none; width:44px; height:44px; border-radius:50%; font-size:1.2rem; cursor:pointer }
.slideshow-modal .modal-nav { position:absolute; top:50%; transform:translateY(-50%); display:flex; gap:10px; width:100%; justify-content:space-between; pointer-events:none }
.slideshow-modal .modal-nav button { pointer-events:auto; background:rgba(0,0,0,0.5); color:#fff; border:none; width:56px; height:68px; border-radius:8px; font-size:1.6rem; cursor:pointer }