:root { --bg:#0d1117; --card:#161b22; --text:#e6edf3; --muted:#8b949e; --accent:#58a6ff; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif; }
a { color: var(--accent); text-decoration: none; }
.container { max-width: 900px; margin: 2rem auto; padding: 0 1rem; }
.topnav { display:flex; justify-content:space-between; align-items:center; background:var(--card); padding:.75rem 1rem; border-bottom:1px solid #21262d; position:sticky; top:0; }
.brand a { font-weight:700; color:var(--text); }
.nav-right a, .nav-right span { margin-left: 1rem; }
.flashes { margin: 1rem 0; }
.flash { padding: .75rem 1rem; border-radius: .5rem; margin-bottom:.5rem; background:#11161d; border:1px solid #263043; }
.flash.success { border-color:#1f6feb; }
.btn { background:var(--accent); color:#0d1117; border:0; padding:.5rem .9rem; border-radius:.5rem; cursor:pointer; font-weight:600; }
.room-list { list-style:none; padding:0; margin:0; }
.room-list li { padding:.5rem .75rem; background:var(--card); border:1px solid #21262d; border-radius:.5rem; margin-bottom:.5rem; }
.room-create { display:flex; gap:.5rem; margin-bottom:1rem; }
.room-create input { flex:1; padding:.5rem; border-radius:.5rem; border:1px solid #21262d; background:#0f141a; color:var(--text); }
.messages { height: 55vh; overflow:auto; padding: .75rem; background:var(--card); border:1px solid #21262d; border-radius:.5rem; margin-bottom:.5rem; }
.line { margin:.25rem 0; }
.line.sys { color:var(--muted); font-style:italic; }
.chat-form { display:flex; gap:.5rem; }
.chat-form input { flex:1; padding:.6rem .7rem; border:1px solid #21262d; border-radius:.5rem; background:#0f141a; color:var(--text); }
.footer { text-align:center; color:var(--muted); padding:2rem 0; }
/* =========================
   Admin Badge
   ========================= */

.badge {
    display: inline-block;
    padding: 2px 8px;
    margin-left: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    border-radius: 12px;
    vertical-align: middle;
    line-height: 1.4;
}

.badge-admin {
    background-color: #b00020; /* deep red */
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    text-transform: uppercase;
}
/* Badges */
.badge {
  display: inline-block;
  padding: 2px 8px;
  margin-left: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  border-radius: 12px;
  vertical-align: middle;
  line-height: 1.4;
  text-transform: uppercase;
}

.badge-admin {
  background-color: #b00020;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
}

.badge-mod {
  background-color: #1b6ca8;   /* blue */
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
}
.room-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:16px;
  margin-top:12px;
}

.room-card{
  display:block;
  padding:14px 14px;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:14px;
  text-decoration:none;
  background:rgba(255,255,255,0.04);
  box-shadow:0 6px 20px rgba(0,0,0,0.25);
  transition:transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}

.room-card:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,0.06);
  border-color:rgba(255,255,255,0.18);
}

.room-card-title{
  font-size:1.1rem;
  font-weight:700;
  margin-bottom:6px;
  color:#fff;
}

.room-card-meta{
  font-size:0.85rem;
  opacity:0.8;
}

.room-card-badge{
  display:inline-block;
  margin-top:10px;
  font-size:0.75rem;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.18);
  opacity:0.85;
}
.badge-rank {
  border: 1px solid rgba(255,255,255,0.18);
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 8px;
  font-size: 0.8rem;
}

.badge-credits {
  border: 1px solid rgba(255,255,255,0.18);
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 6px;
  font-size: 0.8rem;
  opacity: 0.95;
}
.topnav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.topnav .brand,
.topnav .nav-right{
  display:flex;
  align-items:center;
  gap:10px;              /* <-- spacing so they don't stick together */
  flex-wrap:wrap;
}

/* make links look like separate buttons */
.topnav a.nav-btn,
.topnav .brand a.nav-btn,
.topnav .nav-right a.nav-btn{
  display:inline-block;
  padding:8px 12px;
  border-radius:10px;
  text-decoration:none;
  border:1px solid rgba(255,255,255,0.20);
  background: rgba(255,255,255,0.08);
}

.topnav a.nav-btn:hover{
  background: rgba(255,255,255,0.14);
}

/* credits pill */
.credits-pill{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.20);
  background: rgba(255,255,255,0.06);
  font-weight:600;
}
.comms{
  position: fixed;
  right: 14px;
  top: 70px;
  width: 260px;
  max-height: calc(100vh - 110px);
  overflow: auto;
  border-radius: 14px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.25);
  backdrop-filter: blur(6px);
  z-index: 999;
}

.comms-header{ font-weight: 700; margin-bottom: 6px; }
.comms-sub{ opacity: 0.8; font-size: 0.9rem; margin-bottom: 8px; }

.online-list{ display:flex; flex-direction:column; gap:6px; }

.online-user{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  text-decoration:none;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
}

.online-user:hover{ background: rgba(255,255,255,0.10); }

.online-user.is-disabled{ pointer-events:none; opacity:0.55; }

.online-name{ font-weight: 600; }
.online-room{ opacity: 0.75; }