@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;700&display=swap');

:root{
  --bg:#161616;
  --ink:#eaeaf1;
  --muted:#a4a4b1;
  --accent:#666698;       
  --glass:rgba(14,14,18,.68);
  --card:rgba(22,22,28,.78);
  --border:rgba(255,255,255,.06);
  --radius:20px;
  --shadow:0 12px 32px rgba(0,0,0,.35);
}


*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink); font-family:Inter, system-ui, Arial, sans-serif;
  background:#000;
  background-image:
    radial-gradient(80vw 40vh at 20% 0%, rgba(0,0,0,.55), transparent),
    linear-gradient(rgba(0,0,0,.78), rgba(0,0,0,.80)),
    url("https://wallpapercave.com/wp/wp9075005.jpg");
  background-size:cover; background-attachment:fixed; background-position:center;
}
img{max-width:100%; display:block}

.container{width:min(1180px, 92vw); margin-inline:auto}
a{color:var(--accent); text-decoration:none}


.card{
  background:var(--card); backdrop-filter:blur(8px);
  border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px; border-radius:14px; font-weight:700;
  background:var(--accent); color:#0f0f16; border:1px solid #7a7aad;
  transition:transform .12s ease, filter .12s ease;
}
.btn:hover{transform:translateY(-1px); filter:brightness(1.06)}
.btn--ghost{background:transparent; color:var(--accent); border:1px solid var(--accent)}
.pill{
  display:inline-block; padding:6px 10px; border-radius:999px;
  background:var(--accent); color:#0e0e16; font-weight:800; font-size:.8rem;
}


.sitebar{position:sticky; top:0; z-index:50; background:rgba(18,18,22,.9); border-bottom:1px solid var(--border); backdrop-filter:blur(8px)}
.sitebar__in{display:flex; align-items:center; gap:24px; padding:14px 0}
.brand{display:flex; align-items:center; gap:12px; color:var(--ink); font-family:"Lexend", system-ui}
.brand img{height:40px; width:auto; filter:drop-shadow(0 8px 22px rgba(0,0,0,.35))}
.nav{display:flex; gap:18px; margin-left:auto}
.nav a{color:var(--ink); opacity:.9}
.nav a:hover{color:var(--accent)}


.hero-banner{
  position:relative; padding:64px 0 48px;
  background:linear-gradient(180deg, rgba(10,10,14,.4), rgba(10,10,14,.0));
}
.hero-banner__in{position:relative}
.hero-banner__content{max-width:760px}
.hero-banner h1{margin:10px 0 8px; font-family:"Lexend"; font-size:56px; letter-spacing:.6px}
.hero-banner p{margin:0 0 16px; color:#d8d8e3; opacity:.95}
.actions{display:flex; gap:12px; margin-top:6px}


.features{margin:12px 0 8px}
.features__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.feature{padding:18px}
.feature h3{margin:0 0 6px; font-family:"Lexend"}
.feature p{margin:0; color:var(--muted)}
.feature:hover{transform:translateY(-2px)}


.section{margin:26px 0}
.section__head{display:flex; align-items:center; gap:10px; margin-bottom:12px}
.section__title{margin:0; font-family:"Lexend"; letter-spacing:.4px}
.dot{width:10px; height:10px; border-radius:50%; display:inline-block; border:1px solid rgba(255,255,255,.25)}
.dot--online{background:#55d96a}
.dot--offline{background:#b94a4a}


.status{display:flex; align-items:center; gap:18px; padding:16px}
.status__left{display:flex; align-items:center; gap:14px; min-width:260px}
.serverlogo{width:48px; height:48px; object-fit:contain}
.servername{font-family:"Lexend"; font-size:1.15rem}
.serverip{color:var(--muted); display:flex; gap:10px; align-items:center}
.copy{background:transparent; color:var(--accent); border:1px solid var(--accent); border-radius:10px; padding:4px 8px; font-weight:700; cursor:pointer}
.copy:hover{filter:brightness(1.1)}
.status-note{margin-top:6px; color:var(--muted); font-size:.9rem}

.status__mid{flex:1; min-width:280px}
.progress{height:12px; background:#0d0d13; border-radius:999px; border:1px solid var(--border); overflow:hidden}
.progress__bar{height:100%; width:0; background:linear-gradient(90deg, var(--accent), #8a8ab6)}
.progress__info{display:flex; gap:8px; align-items:center; margin-top:8px; color:var(--muted)}

.status__right{min-width:160px; text-align:right}


.content-grid{display:grid; grid-template-columns: 2fr 1fr; gap:18px}
.content-grid__main{display:flex; flex-direction:column; gap:18px}
.content-grid__side .sticky { position: static; top: auto; }
.sticky{position:sticky; top:92px}

.post__img{width:100%; height:280px; object-fit:cover}
.post__body{padding:18px}
.post__body h3{margin:6px 0 8px; font-family:"Lexend"}
.post__body p{margin:0 0 12px; color:#dad9e6}

.side{padding:18px}
.side h4{margin:0 0 8px; font-family:"Lexend"}

.foot{margin-top:40px; border-top:1px solid var(--border); background:rgba(10,10,12,.7)}
.foot__grid{display:grid; grid-template-columns: 2fr 1fr 1fr; gap:28px; padding:24px 0}
.foot h5{margin:0 0 8px; color:var(--accent); font-family:"Lexend"}
.links{list-style:none; margin:0; padding:0}
.links li{margin:4px 0}
.links a{color:var(--ink); opacity:.9}
.links a:hover{color:var(--accent)}
.foot__bottom{text-align:center; padding:14px 0; color:var(--muted); border-top:1px solid var(--border)}

@media (max-width: 1020px){
  .features__grid{grid-template-columns:1fr}
  .content-grid{grid-template-columns:1fr}
  .status{flex-direction:column; align-items:stretch; text-align:left}
  .status__right{text-align:left}
}

.teamv3{padding:18px 0 32px}
.teamv3 .teamv3__head h1{margin:0 0 6px; font-family:"Lexend"; letter-spacing:.4px}
.teamv3 .teamv3__head p{margin:0; color:var(--muted)}

.teamv3__wrap{display:grid; grid-template-columns:260px 1fr; gap:18px}

.role-nav{position:sticky; top:96px; align-self:start; padding:10px; z-index:3}
.role-nav__item{
  display:block; padding:10px 12px; border-radius:12px; margin:4px 0;
  color:var(--ink); text-decoration:none; border:1px solid var(--border);
  background:rgba(10,10,14,.35); font-weight:700;
}
.role-nav__item:hover{border-color:var(--accent); color:var(--accent)}
.role-nav__item.is-active{background:var(--accent); color:#0f0f16; border-color:var(--accent)}

.role-sections{display:flex; flex-direction:column; gap:18px}
.role-section{padding:14px}
.role-section__head h2{margin:0 0 10px; font-family:"Lexend"}

.members-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px,1fr));
  gap:14px;
}
.members-grid--all{grid-template-columns:repeat(auto-fill, minmax(160px,1fr))}
.member{display:flex; flex-direction:column; align-items:center; text-align:center; padding:12px; border-radius:14px; background:rgba(10,10,14,.35); border:1px solid var(--border)}
.member:hover{transform:translateY(-2px); transition:transform .12s ease}

.avatar-ring{
  --ring: conic-gradient(from 180deg, var(--accent), #8a8ab6, var(--accent));
  padding:2px; border-radius:999px; background:var(--ring); display:inline-block;
}
.avatar{width:90px; height:90px; border-radius:999px; overflow:hidden; background:rgba(20,20,28,.6); display:grid; place-items:center}
.avatar img{width:100%; height:100%; object-fit:cover}
.avatar.fallback{color:#0f0f16; font-weight:900; font-size:26px; background:var(--accent)}

.member__name{margin-top:10px; font-weight:800}
.member__role{margin-top:2px; font-size:.85rem; color:var(--muted)}

@media (max-width: 1000px){
  .teamv3__wrap{grid-template-columns:1fr}
  .role-nav{position:relative; top:auto; display:flex; flex-wrap:wrap; gap:8px; padding:12px}
  .role-nav__item{display:inline-block; margin:0}
}

.partner { text-align:center }
.partner__logo{
  display:grid; place-items:center;
  padding:12px; margin:6px 0 0;
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(10,10,14,.35);
  transition:border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.partner__logo:hover{
  border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(102,102,152,.12) inset;
  transform:translateY(-1px);
}
.partner__logo img{
  max-width:100%; max-height:90px;
  object-fit:contain; display:block;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.4));
}
.partner__note{ margin:8px 0 0; color:var(--muted); font-size:.9rem }


.rules{padding:20px 0 36px}
.rules .rules__head h1{margin:0 0 6px; font-family:"Lexend"; letter-spacing:.4px}
.rules .rules__head p{margin:0; color:var(--muted)}
.rules .rules__wrap{display:grid; grid-template-columns:280px 1fr; gap:18px}

.rules .rules-nav{position:sticky; top:96px; align-self:start; padding:12px}
.rules .rules-nav a{
  display:block; padding:10px 12px; border-radius:12px; margin:4px 0;
  color:var(--ink); text-decoration:none; border:1px solid var(--border);
  background:rgba(10,10,14,.35); font-weight:700; line-height:1.1;
}
.rules .rules-nav a:hover{border-color:var(--accent); color:var(--accent)}
.rules .rules-nav a.is-active{background:var(--accent); color:#0f0f16; border-color:var(--accent)}

.rules .rules-content{display:flex; flex-direction:column; gap:18px}
.rules .chapter{padding:16px}
.rules .chapter__head{
  display:flex; align-items:center; gap:12px; margin-bottom:10px
}
.rules .chapter__index{
  font-weight:900; color:#0f0f16; background:var(--accent);
  border:1px solid #7a7aad; border-radius:999px; padding:4px 10px; font-size:.85rem;
}
.rules .chapter__title{margin:0; font-family:"Lexend"}

.rules .block{border:1px solid var(--border); border-radius:16px; background:rgba(10,10,14,.35); padding:14px}
.rules .block + .block{margin-top:10px}
.rules .block h4{margin:0 0 8px}
.rules .block p{margin:0 0 8px}
.rules .block ul{margin:0 0 8px 18px}
.rules .badge{
  display:inline-block; margin:0 6px 0 0; padding:3px 8px; border-radius:999px;
  font-weight:800; font-size:.78rem; color:#0f0f16; background:var(--accent); border:1px solid #7a7aad;
}

.rules .callout{
  border-radius:12px; padding:12px 14px; margin:10px 0;
  background:rgba(20,20,28,.55); border:1px solid var(--border);
}
.rules .callout--good{border-left:4px solid #58d26a}
.rules .callout--bad {border-left:4px solid #d85a5a}


@media (max-width: 1020px){
  .rules .rules__wrap{grid-template-columns:1fr}
  .rules .rules-nav{position:relative; top:auto; display:flex; flex-wrap:wrap; gap:8px}
  .rules .rules-nav a{display:inline-block; margin:0}
}


.post { overflow: visible; }
.post__body p { overflow: visible; }
.devlog { margin-top: 10px; }
.devlog > summary { 
  cursor: pointer; user-select: none;
  list-style: none; display: inline-block;
  margin: 6px 0 10px;
}
.devlog > summary::-webkit-details-marker { display: none; }
.devlog[open] > summary { opacity: .9; }
.devlog__content h4 { margin: 8px 0 6px; }
.devlog__content ul { margin: 0 0 10px 18px; }
.devlog__content li { margin: 2px 0; }

.partner__logo { padding: 8px; }
.partner__logo img{
  width: 100%;
  height: auto;
  max-height: 180px;
  object-fit: contain;
}

.content-grid__side{
  display: flex;
  flex-direction: column;
  gap: 5px;   
}

.content-grid__side .side + .side { margin-top: 5px; }

.clip-embed{ position:relative; width:100%; border-radius:14px; overflow:hidden; background:#000; }
.clip-embed::before{ content:""; display:block; padding-top:56.25%; } /* 16:9 */
.clip-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }