/* =========================================================
   NIGHT-V ROLEPLAY
   GLOBAL STYLE
   ========================================================= */

:root {
  --bg: #090611;
  --bg-alt: #100b19;
  --surface: rgba(22,16,34,.92);
  --surface-2: #211533;

  --border: #33224d;
  --border-soft: #241936;

  --accent-1: #a652ff;
  --accent-2: #7317a1;
  --accent-gradient: linear-gradient(135deg,#a652ff,#7317a1);

  --text: #f4edff;
  --text-muted: #b7a7d4;
  --text-faint: #77688f;

  --online:#45e08c;
  --warn:#ffb454;

  --radius:14px;
  --radius-sm:8px;

  --container:1180px;

  --font-title:'Orbitron',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'JetBrains Mono',monospace;

  --shadow:
  0 0 40px rgba(166,82,255,.25);
}


* {
  box-sizing:border-box;
}


html {
  scroll-behavior:smooth;
}


body {

  margin:0;

  min-height:100vh;

  background:
  linear-gradient(
    rgba(9,6,17,.86),
    rgba(9,6,17,.96)
  ),
  url("img/bg.png");

  background-size:cover;

  background-position:center;

  background-attachment:fixed;

  color:var(--text);

  font-family:var(--font-body);

  line-height:1.6;

  overflow-x:hidden;

}



body::before {

  content:"";

  position:fixed;

  inset:0;

  background:
  radial-gradient(
    circle at top,
    rgba(166,82,255,.18),
    transparent 45%
  );

  pointer-events:none;

  z-index:-1;

}



a {

  color:inherit;

  text-decoration:none;

}


img {

  max-width:100%;

}


h1,h2,h3,h4 {

  margin:0;

  font-family:var(--font-title);

  letter-spacing:.02em;

}


p {

  color:var(--text-muted);

}


ul {

  margin:0;

  padding-left:20px;

}


li {

  margin-bottom:8px;

}


code {

  font-family:var(--font-mono);

  background:rgba(166,82,255,.12);

  padding:3px 7px;

  border-radius:5px;

  color:#d9bfff;

}



/* =========================================================
   HEADER
   ========================================================= */


.site-header {

  position:sticky;

  top:0;

  z-index:100;

  background:rgba(9,6,17,.78);

  backdrop-filter:blur(15px);

  border-bottom:1px solid var(--border-soft);

}



.header-inner {

  max-width:var(--container);

  margin:auto;

  padding:16px 24px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:25px;

}



.brand {

  display:flex;

  align-items:center;

  gap:10px;

  font-family:var(--font-title);

  font-weight:700;

  white-space:nowrap;

}



.brand-mark {

  background:var(--surface-2);

  border:1px solid var(--border);

  border-radius:8px;

  padding:4px 10px;

}



.brand-mark-accent {

  background:var(--accent-gradient);

  -webkit-background-clip:text;

  color:transparent;

}



.brand-text {

  font-size:1rem;

}



.brand-text em {

  color:var(--text-muted);

  font-style:normal;

  font-weight:500;

}



/* Navigation */


.main-nav {

  display:flex;

  gap:28px;

}



.main-nav a {

  color:var(--text-muted);

  font-size:.92rem;

  position:relative;

}



.main-nav a:hover {

  color:white;

}



.main-nav a::after {

  content:"";

  position:absolute;

  bottom:-7px;

  left:0;

  width:0;

  height:2px;

  background:var(--accent-gradient);

  transition:.25s;

}



.main-nav a:hover::after {

  width:100%;

}



/* =========================================================
   BUTTONS
   ========================================================= */


.btn {

  display:inline-flex;

  align-items:center;

  justify-content:center;

  gap:8px;

  padding:11px 22px;

  border-radius:999px;

  font-weight:600;

  transition:.25s;

  cursor:pointer;

  border:1px solid transparent;

}



.btn-primary {

  background:var(--accent-gradient);

  color:white;

  box-shadow:
  0 8px 30px rgba(166,82,255,.35);

}



.btn-primary:hover {

  transform:translateY(-3px);

  box-shadow:
  0 12px 40px rgba(166,82,255,.55);

}



.btn-outline {

  border-color:var(--border);

}



.btn-outline:hover {

  border-color:var(--accent-1);

  background:rgba(166,82,255,.1);

}



.btn-ghost {

  background:var(--surface);

  border-color:var(--border);

}

/* =========================================================
   HERO
   ========================================================= */

.hero {

  position:relative;

  padding:120px 24px 100px;

  text-align:center;

}


.hero-inner {

  max-width:800px;

  margin:auto;

}



.hero-glow {

  position:absolute;

  top:-200px;

  left:50%;

  transform:translateX(-50%);

  width:900px;

  height:700px;

  background:
  radial-gradient(
    circle,
    rgba(166,82,255,.25),
    transparent 65%
  );

  filter:blur(20px);

  pointer-events:none;

}



.eyebrow {

  color:var(--accent-1);

  font-family:var(--font-mono);

  text-transform:uppercase;

  letter-spacing:.15em;

  font-size:.75rem;

  font-weight:700;

}



.hero h1 {

  font-size:clamp(2.2rem,5vw,3.6rem);

  line-height:1.2;

  margin:20px 0;

}



.grad-text {

  background:var(--accent-gradient);

  -webkit-background-clip:text;

  color:transparent;

}



.hero-sub {

  max-width:650px;

  margin:0 auto 35px;

  font-size:1.05rem;

}



.hero-actions {

  display:flex;

  justify-content:center;

  gap:15px;

  flex-wrap:wrap;

}



/* =========================================================
   SECTIONS
   ========================================================= */


.section {

  padding:90px 24px;

  position:relative;

}



.section-alt {

  background:rgba(16,11,25,.85);

  border-top:1px solid var(--border-soft);

  border-bottom:1px solid var(--border-soft);

}



.section-inner {

  max-width:var(--container);

  margin:auto;

}



.section h2 {

  font-size:2.2rem;

  margin-top:8px;

}



.section-lead {

  max-width:650px;

  margin:15px 0 45px;

}





/* =========================================================
   STATUS / STATISTIK
   ========================================================= */


.stat-cards {

  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:18px;

  margin-bottom:45px;

}



.stat-card {

  background:var(--surface);

  border:1px solid var(--border);

  border-radius:var(--radius);

  padding:25px;

  transition:.25s;

}



.stat-card:hover {

  transform:translateY(-5px);

  border-color:var(--accent-1);

}



.stat-label {

  color:var(--text-faint);

  font-size:.8rem;

}



.stat-value {

  display:block;

  font-family:var(--font-mono);

  font-size:2.2rem;

  font-weight:700;

  margin:8px 0;

  background:var(--accent-gradient);

  -webkit-background-clip:text;

  color:transparent;

}



.stat-sub {

  color:var(--text-muted);

  font-size:.85rem;

}



/* =========================================================
   PLAYER TABLE
   ========================================================= */


.player-table-wrap {

  background:var(--surface);

  border:1px solid var(--border);

  border-radius:var(--radius);

  padding:25px;

}



.player-table-head {

  display:flex;

  justify-content:space-between;

  align-items:center;

  margin-bottom:20px;

}



.live-badge {

  display:flex;

  align-items:center;

  gap:8px;

  color:var(--online);

  background:rgba(69,224,140,.1);

  border:1px solid rgba(69,224,140,.3);

  padding:6px 14px;

  border-radius:999px;

  font-family:var(--font-mono);

  font-size:.75rem;

}



.pulse-dot {

  width:9px;

  height:9px;

  background:var(--online);

  border-radius:50%;

  animation:pulse 2s infinite;

}



@keyframes pulse {

0% {

box-shadow:0 0 0 0 rgba(69,224,140,.5);

}

70% {

box-shadow:0 0 0 10px transparent;

}

100% {

box-shadow:0 0 0 0 transparent;

}

}



.table-scroll {

  overflow-x:auto;

}



.player-table {

  width:100%;

  border-collapse:collapse;

}



.player-table th {

  text-align:left;

  color:var(--text-faint);

  font-family:var(--font-mono);

  font-size:.75rem;

  padding:12px;

  border-bottom:1px solid var(--border);

}



.player-table td {

  padding:13px;

  border-bottom:1px solid var(--border-soft);

}



.player-table tr:last-child td {

  border:none;

}



.mono {

  font-family:var(--font-mono);

}



.faction-tag {

  background:var(--surface-2);

  border:1px solid var(--border);

  border-radius:999px;

  padding:4px 12px;

  font-size:.8rem;

}



.status-dot {

  width:7px;

  height:7px;

  display:inline-block;

  background:var(--online);

  border-radius:50%;

  margin-right:7px;

}





/* =========================================================
   FRACTIONS
   ========================================================= */


.faction-grid {

  display:grid;

  grid-template-columns:repeat(2,1fr);

  gap:20px;

}



.faction-card {

  background:var(--surface);

  border:1px solid var(--border);

  border-radius:var(--radius);

  padding:28px;

}



.faction-card:hover {

  border-color:var(--accent-1);

}



/* =========================================================
   SOCIAL MEDIA
   ========================================================= */


.social-grid {

  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:20px;

}



.social-card {

  background:var(--surface);

  border:1px solid var(--border);

  border-radius:var(--radius);

  padding:30px;

  transition:.25s;

}



.social-card:hover {

  transform:translateY(-5px);

  border-color:var(--accent-1);

  box-shadow:var(--shadow);

}



.social-icon {

  width:45px;

  height:45px;

  display:flex;

  align-items:center;

  justify-content:center;

  border-radius:12px;

  margin-bottom:15px;

}



.social-discord .social-icon {

background:#5865f2;

}



.social-tiktok .social-icon {

background:#111;

}



.social-youtube .social-icon {

background:#ff0000;

}



.social-name {

font-family:var(--font-title);

font-weight:700;

}



.social-sub {

color:var(--text-muted);

font-size:.9rem;

}

/* =========================================================
   FOOTER
   ========================================================= */


.site-footer {

  position:relative;

  background:rgba(10,7,16,.95);

  border-top:1px solid var(--border-soft);

  padding:60px 24px 20px;

}



.footer-inner {

  max-width:var(--container);

  margin:auto;

  display:grid;

  grid-template-columns:2fr 1fr 1fr 1fr;

  gap:35px;

}



.footer-brand {

  display:flex;

  flex-direction:column;

  gap:12px;

}



.footer-brand p {

  max-width:280px;

  font-size:.9rem;

}



.footer-col {

  display:flex;

  flex-direction:column;

  gap:10px;

}



.footer-col h4 {

  font-size:.8rem;

  color:var(--text-faint);

  text-transform:uppercase;

  letter-spacing:.1em;

  margin-bottom:10px;

}



.footer-col a {

  color:var(--text-muted);

  transition:.2s;

}



.footer-col a:hover {

  color:white;

}



.footer-bottom {

  max-width:var(--container);

  margin:40px auto 0;

  padding-top:20px;

  border-top:1px solid var(--border-soft);

  text-align:center;

}



.footer-bottom p {

  font-size:.8rem;

}




/* =========================================================
   MODAL
   ========================================================= */


.modal-overlay {

  position:fixed;

  inset:0;

  background:rgba(0,0,0,.75);

  backdrop-filter:blur(8px);

  display:flex;

  align-items:center;

  justify-content:center;

  padding:20px;

  z-index:999;

  opacity:0;

  visibility:hidden;

  transition:.25s;

}



.modal-overlay.active {

  opacity:1;

  visibility:visible;

}



.modal {

  background:var(--surface);

  border:1px solid var(--border);

  border-radius:var(--radius);

  max-width:650px;

  width:100%;

  max-height:80vh;

  overflow:auto;

  padding:35px;

  display:none;

}



.modal.active {

  display:block;

}



.modal h3 {

  margin-bottom:20px;

}



.modal-body p {

  color:var(--text-muted);

  font-size:.95rem;

}



.modal-close {

  float:right;

  border:1px solid var(--border);

  background:var(--surface-2);

  color:white;

  border-radius:50%;

  width:32px;

  height:32px;

  cursor:pointer;

}




/* =========================================================
   REGELWERK ACCORDION
   ========================================================= */


.accordion {

  display:flex;

  flex-direction:column;

  gap:15px;

}



.accordion-item {

  background:var(--surface);

  border:1px solid var(--border);

  border-radius:var(--radius);

  overflow:hidden;

}



.accordion-trigger {

  width:100%;

  display:flex;

  align-items:center;

  justify-content:space-between;

  padding:22px;

  background:none;

  border:0;

  color:white;

  cursor:pointer;

  font-size:1rem;

  font-weight:600;

}



.acc-number {

  color:var(--accent-1);

  font-family:var(--font-mono);

}



.acc-icon {

  font-size:1.3rem;

  transition:.25s;

}



.accordion-trigger.active .acc-icon {

  transform:rotate(45deg);

}



.accordion-panel {

  max-height:0;

  overflow:hidden;

  padding:0 22px;

  transition:.35s ease;

}



.accordion-panel.open {

  max-height:900px;

  padding-bottom:25px;

}



.accordion-panel li {

  color:var(--text-muted);

}



/* =========================================================
   MOBILE
   ========================================================= */


@media(max-width:1000px){


.stat-cards {

grid-template-columns:repeat(2,1fr);

}


.footer-inner {

grid-template-columns:repeat(2,1fr);

}


.social-grid {

grid-template-columns:1fr;

}


.faction-grid {

grid-template-columns:1fr;

}


}



@media(max-width:700px){


.header-inner {

padding:15px;

}


.main-nav {

display:none;

}


.header-actions .btn {

display:none;

}


.hero {

padding:80px 20px;

}


.stat-cards {

grid-template-columns:1fr;

}


.footer-inner {

grid-template-columns:1fr;

}


.hero-actions {

flex-direction:column;

}


.hero-actions .btn {

width:100%;

}



}



@media(prefers-reduced-motion:reduce){

* {

animation:none!important;

transition:none!important;

}

}