.status-extra {
  margin-top: 0.4rem;
  font-size: 0.85rem;
  opacity: 0.8;
}

.status-sub {
  line-height: 1.3;
}

:root{
    --bg:#0b0d0f;
    --panel:#0f1316;
    --muted:#9aa6b2;
    --text:#e6eef3;
    --accent:#ffb86b; /* orange accent */
    --glass: rgba(255,255,255,0.04);
    --radius:12px;
    --max-width:1100px;
    --container-padding:20px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    background:linear-gradient(180deg,#060607 0%, #0b0d0f 100%);
    color:var(--text);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    line-height:1.45;
}
.container{max-width:var(--max-width);margin:0 auto;padding:var(--container-padding)}
.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:12px;top:12px;width:auto;height:auto;background:#111;padding:8px;border-radius:6px;color:#fff}

.topbar{backdrop-filter: blur(6px);position:sticky;top:0;z-index:60;background:linear-gradient(180deg, rgba(5,6,7,0.6), rgba(5,6,7,0.35));border-bottom:1px solid rgba(255,255,255,0.02)}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{font-weight:700;color:var(--text);text-decoration:none;font-size:1.1rem}
#nav-toggle{background:transparent;border:0;color:var(--text);font-size:20px;cursor:pointer;display:none}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:14px}
.nav a{color:var(--muted);text-decoration:none;padding:8px;border-radius:8px}
.nav a:hover, .nav a[aria-current="page"]{color:var(--text);background:var(--glass)}

.hero{position:relative;height:60vh;min-height:320px;display:flex;align-items:center}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(2px) brightness(.45);z-index:0}
.hero-overlay{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.hero-content{padding:40px;background:linear-gradient(180deg, rgba(8,8,9,0.45), rgba(8,8,9,0.25));border-radius:16px;backdrop-filter: blur(6px);box-shadow:0 8px 30px rgba(2,4,6,0.6);text-align:center}
h1{font-size:2.2rem;margin:.1rem 0}
.tagline{color:var(--muted);margin-top:6px;margin-bottom:18px}
.status{margin-top:12px;text-align:center}
.status-line{margin:6px 0;color:var(--muted)}
.status .motd{font-style:italic}
.status-actions{display:flex;gap:10px;justify-content:center;margin-top:12px}
.btn{display:inline-block;padding:10px 16px;border-radius:10px;background:linear-gradient(180deg,var(--accent),#ff9a3b);color:#0b0d0f;text-decoration:none;font-weight:600}
.btn.outline{background:transparent;color:var(--text);border:1px solid rgba(255,255,255,0.06)}

.intro{padding:40px 0}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
.card{background:var(--panel);padding:16px;border-radius:12px;box-shadow:0 3px 14px rgba(2,4,6,0.5);border:1px solid rgba(255,255,255,0.02)}
.card h3{margin:0 0 8px 0}
.lead{color:var(--muted)}

.rules-nav{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}
.tab{background:transparent;border:1px solid rgba(255,255,255,0.04);padding:8px 12px;border-radius:8px;color:var(--text);cursor:pointer}
.tab:hover{background:var(--glass)}

.rules-panel{background:var(--panel);padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.02);margin-bottom:16px}
.rules-panel h2{margin-top:0}
.ad-box{background:rgba(0,0,0,0.2);padding:12px;border-radius:8px;overflow:auto}

.site-footer{padding:18px 0;color:var(--muted);font-size:.9rem;margin-top:30px}
.connect-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}

@media (max-width:900px){
    .cards{grid-template-columns:1fr; }
    .nav ul{display:none}
    #nav-toggle{display:block}
    .hero{height:48vh}
    h1{font-size:1.6rem}
}