:root{
  --font-title:"Trebuchet MS", Tahoma, Verdana, sans-serif;
  --font-ui:Tahoma, Verdana, Arial, sans-serif;
  --font-data:Verdana, Tahoma, Arial, sans-serif;
  --lime:#a1d951;
  --lime-soft:#c5f079;
  --blood:#8f0018;
  --blood-bright:#bd172c;
  --gold:#f0c85a;
  --blue:#5ab7ff;
  --text:#f4f1e8;
  --muted:#aeb8a5;
}
*{box-sizing:border-box}
html{min-height:100%}
body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  font-family:var(--font-ui);
  background:
    radial-gradient(circle at 24% -20%, rgba(161,217,81,.22), transparent 38%),
    radial-gradient(circle at 78% 18%, rgba(65,7,10,.22), transparent 38%),
    linear-gradient(145deg,#061006,#091508 54%,#050706);
  transition:background 420ms ease;
}
body:has(.server-card.nmrih:hover){
  background:
    radial-gradient(circle at 28% -20%, rgba(161,217,81,.10), transparent 34%),
    radial-gradient(circle at 72% 22%, rgba(143,0,24,.34), transparent 42%),
    linear-gradient(145deg,#060606,#170607 54%,#050303);
}
body:has(.future-server.tf2:hover){
  background:
    radial-gradient(circle at 30% -20%, rgba(161,217,81,.08), transparent 34%),
    radial-gradient(circle at 76% 22%, rgba(230,188,65,.22), transparent 42%),
    linear-gradient(145deg,#070706,#151206 54%,#040403);
}
body:has(.future-server.blue-slot:hover){
  background:
    radial-gradient(circle at 30% -20%, rgba(161,217,81,.08), transparent 34%),
    radial-gradient(circle at 76% 22%, rgba(80,160,255,.22), transparent 42%),
    linear-gradient(145deg,#050708,#06101b 54%,#020303);
}
a{color:inherit}
.page{max-width:1110px;margin:0 auto;padding:32px 34px 74px}
.topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:28px;margin-bottom:42px}
.brand h1{
  margin:0 0 8px;
  font-family:var(--font-title);
  font-size:clamp(52px,7.2vw,86px);
  letter-spacing:-.07em;
  line-height:.84;
  color:#92db4d;
  text-shadow:0 3px 0 rgba(0,0,0,.58),0 0 30px rgba(161,217,81,.30);
}
.brand p{margin:0;color:#d0dcc6;text-transform:uppercase;letter-spacing:.18em;font:900 12px var(--font-ui)}
.top-actions{display:flex;gap:10px;align-items:center;justify-content:flex-end;flex-wrap:wrap;margin-top:16px}
.top-action{display:inline-flex;align-items:center;justify-content:center;min-height:30px;padding:7px 13px;border-radius:4px;border:1px solid rgba(161,217,81,.28);background:rgba(5,12,6,.44);color:var(--lime);font:900 11px var(--font-ui);text-transform:uppercase;letter-spacing:.08em;text-decoration:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 24px rgba(0,0,0,.22)}
.top-action:hover{border-color:rgba(161,217,81,.70);background:rgba(24,44,18,.70)}
.top-action.muted{color:#c9d3bf;border-color:rgba(201,211,191,.22)}
.section-label{margin:0 0 9px 3px;color:#a9b99f;font:900 11px var(--font-ui);text-transform:uppercase;letter-spacing:.18em}
.server-list{display:grid;gap:12px}
.server-card{
  position:relative;
  overflow:hidden;
  min-height:94px;
  border:1px solid rgba(143,0,24,.84);
  border-left:6px solid rgba(143,0,24,.98);
  border-radius:7px;
  background:
    linear-gradient(90deg,rgba(8,9,8,.94),rgba(16,7,7,.92)),
    repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 5px);
  box-shadow:0 12px 38px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.045);
  transition:min-height .25s ease,transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.server-card:hover{min-height:242px;transform:translateY(-1px);border-color:rgba(189,23,44,.94);box-shadow:0 18px 70px rgba(122,0,20,.27),inset 0 1px 0 rgba(255,255,255,.06)}
.card-main{
  position:relative;
  z-index:4;
  min-height:92px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:20px;
  padding:18px 28px 17px 34px;
}
.title{
  font-family:var(--font-title);
  font-size:clamp(31px,4.3vw,52px);
  line-height:.93;
  font-weight:900;
  letter-spacing:-.055em;
  color:#fff5e7;
  text-shadow:0 2px 0 rgba(143,0,24,.72),0 0 18px rgba(255,255,255,.10);
  white-space:nowrap;
}
.hub-link{display:inline-flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;border-radius:4px;padding:10px 15px;min-width:148px;font:900 11px var(--font-ui);text-transform:uppercase;letter-spacing:.07em;color:#081006;background:var(--lime);box-shadow:0 0 18px rgba(161,217,81,.14);white-space:nowrap}.hub-link:hover{filter:brightness(1.08)}
.server-drop{position:absolute;z-index:5;left:34px;right:28px;bottom:19px;opacity:0;transform:translateY(9px);transition:opacity .22s ease,transform .22s ease;pointer-events:none}.server-card:hover .server-drop{opacity:1;transform:translateY(0);pointer-events:auto}
.server-divider{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;margin-bottom:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.13);color:#c5d0ba;font:900 10px var(--font-ui);text-transform:uppercase;letter-spacing:.15em}.strip-players{color:#d8e0d0;white-space:nowrap}.strip-players b{color:var(--blood-bright)}
.dashboard{display:grid;grid-template-columns:1.24fr 1fr 1fr 1fr auto;gap:10px}
.stat{min-height:62px;padding:10px 12px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.30);border-radius:6px;box-shadow:inset 0 0 24px rgba(0,0,0,.28)}.stat .label{display:block;margin-bottom:6px;color:#9eba94;font:900 10px var(--font-ui);text-transform:uppercase;letter-spacing:.13em}.stat strong{font-family:var(--font-data);font-size:14px;color:#f5f1e7;line-height:1.22}.stat .red{color:#ff5966}.stat .blue{color:#7dccff}.stat .orange{color:#ffae45}.actions{display:flex;flex-direction:column;gap:7px;min-width:112px}.btn{display:block;text-align:center;text-decoration:none;border-radius:5px;padding:9px 11px;font:900 11px var(--font-ui);text-transform:uppercase;letter-spacing:.06em;color:#081006;background:var(--lime);box-shadow:0 0 18px rgba(161,217,81,.14)}.btn.red{background:#b31322;color:#fff;box-shadow:0 0 18px rgba(179,19,34,.16)}
.future-server{margin-top:14px;min-height:78px;border-color:rgba(255,255,255,.16);border-left-color:currentColor;background:linear-gradient(90deg,rgba(8,9,8,.92),rgba(10,8,8,.88)),repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0 1px,transparent 1px 5px)}.future-server:hover{min-height:78px}.future-server .card-main{min-height:76px}.future-server .title{font-size:clamp(28px,3.6vw,42px)}.future-server.tf2{color:var(--gold)}.future-server.blue-slot{color:var(--blue)}.coming-label{justify-self:end;color:currentColor;font:900 13px var(--font-ui);text-transform:uppercase;letter-spacing:.09em;opacity:.9;white-space:nowrap}
.footer{margin-top:30px;color:#87947f;font:800 11px var(--font-ui);text-transform:uppercase;letter-spacing:.11em}.footer a{color:var(--lime);text-decoration:none}
@media(max-width:940px){.topbar{display:block}.top-actions{justify-content:flex-start;margin-top:16px}.card-main{grid-template-columns:1fr;gap:12px}.hub-link{justify-self:start}.title{white-space:normal}.server-drop{position:relative;left:auto;right:auto;bottom:auto;margin:0 26px 22px;opacity:1;transform:none;pointer-events:auto}.dashboard{grid-template-columns:1fr 1fr}.server-card,.server-card:hover{min-height:auto}.actions{flex-direction:row}.future-server .card-main{grid-template-columns:1fr auto}.coming-label{justify-self:end}}
@media(max-width:560px){.page{padding:28px 16px 58px}.brand h1{font-size:46px}.card-main{padding:18px 20px 17px 24px}.server-drop{margin:0 18px 20px}.dashboard{grid-template-columns:1fr}.actions{flex-direction:column}.future-server .card-main{grid-template-columns:1fr}.coming-label{justify-self:start}.top-action{padding:7px 10px}}

/* v2 feedback pass: logo space, slimmer expanded row, less neon buttons */
.topbar{
  align-items:flex-start;
}
.brand{
  position:relative;
  padding-left:76px;
  min-height:92px;
}
.logo-slot{
  position:absolute;
  left:0;
  top:8px;
  width:58px;
  height:58px;
  border-radius:12px;
  border:1px solid rgba(161,217,81,.22);
  background:
    radial-gradient(circle at 35% 30%, rgba(161,217,81,.20), transparent 34%),
    linear-gradient(145deg, rgba(11,24,10,.80), rgba(3,5,3,.75));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 12px 28px rgba(0,0,0,.30);
  opacity:.55;
}
.logo-slot::after{
  content:"logo";
  position:absolute;
  left:0; right:0; top:50%;
  transform:translateY(-50%);
  text-align:center;
  color:rgba(200,230,180,.38);
  font:900 9px var(--font-ui);
  letter-spacing:.16em;
  text-transform:uppercase;
}

.top-action,
.hub-link,
.btn{
  border:1px solid rgba(161,217,81,.34);
  background:linear-gradient(180deg, rgba(43,71,28,.92), rgba(18,31,13,.92));
  color:#d9f3b2;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 10px 24px rgba(0,0,0,.26);
  text-shadow:0 1px 0 rgba(0,0,0,.55);
}
.top-action:hover,
.hub-link:hover,
.btn:hover{
  border-color:rgba(161,217,81,.70);
  background:linear-gradient(180deg, rgba(58,89,36,.96), rgba(22,39,15,.96));
  filter:none;
}
.btn.red{
  border-color:rgba(189,23,44,.46);
  background:linear-gradient(180deg, rgba(105,16,25,.96), rgba(54,7,13,.96));
  color:#ffdfe2;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 10px 24px rgba(0,0,0,.28);
}
.btn.red:hover{
  border-color:rgba(220,51,68,.78);
  background:linear-gradient(180deg, rgba(130,20,32,.98), rgba(65,8,15,.98));
}

.server-card:hover{min-height:188px;}
.server-drop{bottom:17px;}
.server-divider{
  padding-top:9px;
  margin-bottom:12px;
}
.slim-dashboard{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:18px;
}
.map-line{
  min-height:auto;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  display:flex;
  align-items:baseline;
  gap:12px;
  min-width:0;
}
.map-line .label{
  color:#9eba94;
  font:900 10px var(--font-ui);
  text-transform:uppercase;
  letter-spacing:.15em;
  white-space:nowrap;
}
.map-line strong{
  color:#f5f1e7;
  font-family:var(--font-data);
  font-size:15px;
  line-height:1.2;
  overflow:hidden;
  text-overflow:ellipsis;
}
.slim-dashboard .actions{
  flex-direction:row;
  min-width:0;
}
.slim-dashboard .btn{
  min-width:86px;
  padding:8px 12px;
}

@media(max-width:940px){
  .brand{padding-left:0; padding-top:72px;}
  .logo-slot{top:0;}
  .slim-dashboard{grid-template-columns:1fr; align-items:start;}
  .server-card:hover{min-height:auto;}
}


/* v3 player dropdown */
.slim-dashboard{
  position:relative;
}
button.btn{
  appearance:none;
  -webkit-appearance:none;
  border-radius:5px;
  cursor:pointer;
}
.players-popover{
  position:absolute;
  right:0;
  top:44px;
  width:min(320px, 88vw);
  z-index:20;
  border:1px solid rgba(161,217,81,.28);
  border-left:4px solid rgba(161,217,81,.58);
  border-radius:6px;
  background:
    linear-gradient(180deg, rgba(10,17,9,.97), rgba(5,8,5,.98)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 5px);
  box-shadow:0 18px 46px rgba(0,0,0,.50), inset 0 1px 0 rgba(255,255,255,.06);
  overflow:hidden;
}
.players-popover[hidden]{display:none;}
.players-popover-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:9px 11px;
  border-bottom:1px solid rgba(255,255,255,.10);
  color:#dcebcf;
  font:900 10px var(--font-ui);
  text-transform:uppercase;
  letter-spacing:.14em;
}
.players-popover-head button{
  width:24px;
  height:24px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:4px;
  background:rgba(0,0,0,.28);
  color:#dcebcf;
  cursor:pointer;
  font:900 17px/18px var(--font-ui);
}
.players-popover-head button:hover{
  border-color:rgba(161,217,81,.55);
  color:var(--lime-soft);
}
.players-list{
  max-height:238px;
  overflow:auto;
  padding:7px;
}
.player-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:9px 9px;
  border-radius:4px;
  color:#f1f5e9;
  text-decoration:none;
  font:900 12px var(--font-ui);
}
.player-row:hover{
  background:rgba(161,217,81,.10);
}
.player-row em{
  flex:0 0 auto;
  color:rgba(161,217,81,.76);
  font-style:normal;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.09em;
}
.player-empty{
  padding:15px 13px;
  color:#aeb8a5;
  font:800 12px/1.45 var(--font-ui);
}
@media(max-width:940px){
  .players-popover{position:static;width:100%;margin-top:10px;}
}


/* v4: let the server row grow when the Players dropdown is open */
body:has(.server-card.nmrih.players-open){
  background:
    radial-gradient(circle at 28% -20%, rgba(161,217,81,.10), transparent 34%),
    radial-gradient(circle at 72% 22%, rgba(143,0,24,.34), transparent 42%),
    linear-gradient(145deg,#060606,#170607 54%,#050303);
}
.server-card.nmrih.players-open{
  transform:translateY(-1px);
  border-color:rgba(189,23,44,.94);
  box-shadow:0 18px 70px rgba(122,0,20,.27),inset 0 1px 0 rgba(255,255,255,.06);
}
.server-card.nmrih.players-open .server-drop{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.players-popover{
  max-height:none;
}
@media(max-width:940px){
  .server-card.nmrih.players-open{min-height:auto !important;}
}

/* v5: keep server details directly below the title, and let the card grow downward */
.server-card.nmrih{
  overflow:hidden;
}
.server-card.nmrih:hover,
.server-card.nmrih.players-open{
  min-height:0;
}
.server-card.nmrih .card-main{
  min-height:112px;
  align-items:center;
  padding-bottom:14px;
}
.server-drop{
  position:relative;
  left:auto;
  right:auto;
  bottom:auto;
  z-index:5;
  margin:0 28px 0 34px;
  max-height:0;
  opacity:0;
  overflow:hidden;
  transform:none;
  transition:max-height .24s ease, opacity .18s ease, margin-bottom .24s ease;
  pointer-events:none;
}
.server-card.nmrih:hover .server-drop,
.server-card.nmrih.players-open .server-drop{
  max-height:520px;
  opacity:1;
  margin-bottom:22px;
  pointer-events:auto;
}
.server-divider{
  margin-top:0;
  padding-top:10px;
}
.slim-dashboard{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
  gap:12px 18px;
}
.players-popover{
  position:static;
  grid-column:1 / -1;
  justify-self:end;
  width:min(360px, 100%);
  margin-top:2px;
}
.players-popover-head{
  display:block;
}
.players-popover-head button{
  display:none;
}
#players-button[aria-expanded="true"]{
  border-color:rgba(161,217,81,.82);
  background:linear-gradient(180deg, rgba(64,97,39,.98), rgba(25,45,17,.98));
  color:#effbdc;
}
@media(max-width:940px){
  .server-drop{margin:0 22px 0 24px; max-height:520px; opacity:1; pointer-events:auto;}
  .server-card.nmrih:hover .server-drop,
  .server-card.nmrih.players-open .server-drop{margin-bottom:22px;}
  .players-popover{justify-self:stretch; width:100%;}
}

/* v7 cleanup: future cards only say Coming Soon, no footer/extra labels */
.future-server{
  min-height:86px;
  overflow:hidden;
  border-left-width:6px;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.future-server:hover{
  min-height:86px;
  transform:translateY(-1px);
}
.future-server .card-main{
  min-height:84px;
  grid-template-columns:1fr;
  padding:19px 28px 18px 34px;
}
.future-server .title{
  font-size:clamp(29px,3.6vw,42px);
}
.future-server.tf2:hover{
  border-color:rgba(240,200,90,.78);
  box-shadow:0 16px 58px rgba(240,200,90,.13), inset 0 1px 0 rgba(255,255,255,.055);
  background:
    linear-gradient(90deg,rgba(11,10,6,.94),rgba(20,14,3,.90)),
    repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 5px);
}
.future-server.blue-slot:hover{
  border-color:rgba(90,183,255,.78);
  box-shadow:0 16px 58px rgba(90,183,255,.12), inset 0 1px 0 rgba(255,255,255,.055);
  background:
    linear-gradient(90deg,rgba(6,9,11,.94),rgba(3,12,20,.90)),
    repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 5px);
}


/* v7 hard cleanup from feedback image */
.footer,
.server-strip,
.coming-label{
  display:none !important;
}
.future-server{
  min-height:86px !important;
  overflow:hidden;
}
.future-server:hover{
  min-height:86px !important;
}
.future-server .card-main{
  min-height:84px !important;
  grid-template-columns:1fr !important;
  padding:19px 28px 18px 34px !important;
}
.future-server .title{
  font-size:clamp(31px,3.7vw,44px) !important;
  color:#fff6e8;
}
.future-server.tf2{
  border-left-color:var(--gold);
}
.future-server.blue-slot{
  border-left-color:var(--blue);
}
.future-server.tf2:hover{
  border-color:rgba(240,200,90,.78) !important;
  border-left-color:var(--gold) !important;
  box-shadow:0 16px 58px rgba(240,200,90,.14), inset 0 1px 0 rgba(255,255,255,.055) !important;
  background:
    linear-gradient(90deg,rgba(11,10,6,.95),rgba(23,16,4,.91)),
    repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 5px) !important;
}
.future-server.blue-slot:hover{
  border-color:rgba(90,183,255,.78) !important;
  border-left-color:var(--blue) !important;
  box-shadow:0 16px 58px rgba(90,183,255,.13), inset 0 1px 0 rgba(255,255,255,.055) !important;
  background:
    linear-gradient(90deg,rgba(6,9,11,.95),rgba(3,13,22,.91)),
    repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 5px) !important;
}


/* v8 configurable server slots */
.server-card{border-color:color-mix(in srgb, var(--server-accent, #bd172c) 72%, transparent);}
.server-card:hover,
.server-card.nmrih.players-open{
  border-color:color-mix(in srgb, var(--server-accent, #bd172c) 92%, white 0%);
}
.future-server{
  border-left-color:var(--server-accent, #a1d951) !important;
}
.future-server:hover{
  border-color:color-mix(in srgb, var(--server-accent, #a1d951) 78%, transparent) !important;
  border-left-color:var(--server-accent, #a1d951) !important;
  box-shadow:0 16px 58px color-mix(in srgb, var(--server-accent, #a1d951) 18%, transparent), inset 0 1px 0 rgba(255,255,255,.055) !important;
  background:
    linear-gradient(90deg,rgba(7,7,7,.95),color-mix(in srgb, var(--server-accent, #a1d951) 12%, rgba(3,3,3,.94))),
    repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 5px) !important;
}
.future-server.gold{--server-accent:#f0c85a;}
.future-server.blue{--server-accent:#5ab7ff;}
.future-server.red{--server-accent:#bd172c;}
.future-server.green{--server-accent:#a1d951;}

/* Shared left-side quick access drawer. Keep this file as the locked CitriLime header/style base. */

.drawer-toggle{
  position:fixed;
  top:24px;
  left:22px;
  z-index:40;
  width:42px;
  height:42px;
  border:1px solid rgba(161,217,81,.35);
  border-radius:10px;
  background:rgba(7,16,8,.78);
  color:var(--lime);
  font-family:var(--font-title);
  font-weight:900;
  letter-spacing:.06em;
  box-shadow:0 0 22px rgba(108,169,58,.12);
  cursor:pointer;
}
.drawer-toggle:hover{border-color:rgba(161,217,81,.8);color:#fff5df;}
.side-drawer{
  position:fixed;
  inset:0 auto 0 0;
  width:min(360px, 88vw);
  z-index:50;
  transform:translateX(-104%);
  transition:transform .22s ease;
  background:linear-gradient(180deg, rgba(5,12,6,.98), rgba(13,2,4,.98));
  border-right:1px solid rgba(161,217,81,.22);
  box-shadow:28px 0 70px rgba(0,0,0,.55);
  padding:18px;
  overflow:auto;
}
.side-drawer.open{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid rgba(161,217,81,.2)}
.drawer-head strong{font-family:var(--font-title);color:var(--cream);text-transform:uppercase;letter-spacing:.08em}
.drawer-close{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04);color:var(--cream);border-radius:8px;width:34px;height:34px;cursor:pointer;font-size:22px}
.drawer-nav{display:flex;flex-direction:column;gap:14px}
.drawer-group{position:relative;display:flex;flex-direction:column;gap:7px;padding:12px;border:1px solid rgba(255,255,255,.08);border-left-width:4px;background:linear-gradient(90deg, rgba(255,255,255,.045), rgba(255,255,255,.015));box-shadow:inset 0 0 28px rgba(0,0,0,.25)}
.drawer-group::before{content:"";position:absolute;top:-15px;left:-4px;right:-1px;height:15px;pointer-events:none;background:linear-gradient(180deg, transparent, rgba(255,255,255,.045));opacity:.65}
.drawer-group:first-child::before{display:none}
.drawer-home{border-left-color:var(--lime);background:linear-gradient(90deg, rgba(108,169,58,.16), rgba(255,255,255,.015))}
.drawer-nmrih{border-left-color:var(--red);background:linear-gradient(90deg, rgba(177,11,38,.18), rgba(255,255,255,.012))}
.drawer-tf2{border-left-color:#f2cf54;background:linear-gradient(90deg, rgba(242,207,84,.13), rgba(255,255,255,.012))}
.drawer-future{border-left-color:#45aee8;background:linear-gradient(90deg, rgba(69,174,232,.13), rgba(255,255,255,.012))}
.drawer-nav a,.drawer-nav span.disabled{display:flex;align-items:center;min-height:30px;padding:7px 9px;border-radius:7px;color:var(--cream);text-decoration:none;font-family:var(--font-title);font-size:14px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.drawer-nav a:not(.drawer-main):hover{background:rgba(255,255,255,.07);color:var(--lime)}
.drawer-main{margin-bottom:2px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.09)}
.drawer-home .drawer-main{color:var(--lime)}
.drawer-nmrih .drawer-main{color:#ffccd2}
.drawer-tf2 .drawer-main{color:#ffe071}
.drawer-future .drawer-main{color:#75caff}
.drawer-soon{opacity:.75;position:relative}
.drawer-soon:hover::after{content:"Coming soon";margin-left:auto;color:#ffe071;font-size:11px;letter-spacing:.08em}
.drawer-community{margin-top:8px;padding-top:10px;border-top:1px solid rgba(255,255,255,.08)}
.drawer-community > span{display:block;padding:0 0 8px 2px;color:var(--muted);font-family:var(--font-title);font-size:12px;text-transform:uppercase;letter-spacing:.12em}
.drawer-icon-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.drawer-icon-row .drawer-icon{justify-content:center;min-height:42px;border:1px solid rgba(161,217,81,.24);background:rgba(108,169,58,.08)}
.drawer-scrim{position:fixed;inset:0;z-index:45;background:rgba(0,0,0,.44)}
@media(max-width:760px){.drawer-toggle{top:auto;bottom:18px;transform:none;left:12px}}

/* v11: softer Source-style drawer. Less boxed, hover gets the category strip. */
.side-drawer{
  width:min(292px, calc(100vw - 28px));
  padding:18px 18px 22px;
  border-right:1px solid rgba(161,217,81,.16);
  background:
    radial-gradient(circle at 10% 0%, rgba(161,217,81,.13), transparent 28%),
    radial-gradient(circle at 92% 50%, rgba(143,0,24,.25), transparent 44%),
    linear-gradient(155deg, rgba(7,15,7,.985) 0%, rgba(9,11,8,.985) 42%, rgba(24,5,7,.985) 100%);
  box-shadow:18px 0 60px rgba(0,0,0,.48), inset -1px 0 0 rgba(255,255,255,.035);
}
.drawer-head{
  margin-bottom:18px;
  padding:0 0 13px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.drawer-head strong{
  color:#d9e6cd;
  font-family:var(--font-ui);
  font-size:11px;
  letter-spacing:.18em;
}
.drawer-close{
  width:30px;
  height:30px;
  border-radius:4px;
  border-color:rgba(255,255,255,.13);
  background:rgba(0,0,0,.22);
  color:#aeb8a5;
  line-height:24px;
}
.drawer-close:hover{
  color:#fff5df;
  border-color:rgba(161,217,81,.42);
}
.drawer-nav{
  gap:8px;
}
.drawer-group{
  position:relative;
  gap:1px;
  padding:0 0 11px 0;
  margin:0;
  border:0;
  border-left:0;
  background:transparent;
  box-shadow:none;
}
.drawer-group + .drawer-group{
  margin-top:11px;
  padding-top:14px;
}
.drawer-group + .drawer-group::before{
  content:"";
  position:absolute;
  top:0;
  left:8px;
  right:8px;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
}
.drawer-home,
.drawer-nmrih,
.drawer-tf2,
.drawer-future{
  background:transparent;
  border-left:0;
}
.drawer-nav a,
.drawer-nav span.disabled{
  position:relative;
  min-height:36px;
  padding:9px 10px 9px 18px;
  border-radius:0 4px 4px 0;
  color:#b8b8b4;
  font-family:var(--font-ui);
  font-size:13px;
  letter-spacing:.055em;
  text-transform:none;
  overflow:hidden;
}
.drawer-nav a::before,
.drawer-nav span.disabled::before{
  content:"";
  position:absolute;
  left:0;
  top:7px;
  bottom:7px;
  width:4px;
  border-radius:4px;
  background:transparent;
  transition:background .15s ease, box-shadow .15s ease;
}
.drawer-nav a::after,
.drawer-nav span.disabled::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:0;
  background: linear-gradient(90deg, rgba(161,217,81,.24) 0%, rgba(161,217,81,.12) 42%, rgba(161,217,81,.035) 72%, rgba(161,217,81,0) 100%);
  transition:opacity .15s ease;
}
.drawer-nav a:not(.drawer-main):hover,
.drawer-nav .drawer-main:hover{
  background:transparent;
  color:#f2f6ea;
}
.drawer-nav a:hover::after{
  opacity:1;
}
.drawer-home a:hover::before,
.drawer-home .drawer-main::before{
  background:var(--lime);
  box-shadow:0 0 14px rgba(161,217,81,.36);
}
.drawer-nmrih a::after{
  background: linear-gradient(90deg, rgba(189,23,44,.30) 0%, rgba(189,23,44,.15) 42%, rgba(189,23,44,.045) 72%, rgba(189,23,44,0) 100%);
}
.drawer-nmrih a:hover::before,
.drawer-nmrih .drawer-main::before{
  background:var(--blood-bright);
  box-shadow:0 0 14px rgba(189,23,44,.34);
}
.drawer-tf2 span::after,
.drawer-tf2 a::after{
  background: linear-gradient(90deg, rgba(240,200,90,.24) 0%, rgba(240,200,90,.11) 42%, rgba(240,200,90,.035) 72%, rgba(240,200,90,0) 100%);
}
.drawer-tf2 span::before,
.drawer-tf2 a:hover::before{
  background:var(--gold);
  box-shadow:0 0 14px rgba(240,200,90,.30);
}
.drawer-future span::after,
.drawer-future a::after{
  background: linear-gradient(90deg, rgba(90,183,255,.24) 0%, rgba(90,183,255,.11) 42%, rgba(90,183,255,.035) 72%, rgba(90,183,255,0) 100%);
}
.drawer-future span::before,
.drawer-future a:hover::before{
  background:var(--blue);
  box-shadow:0 0 14px rgba(90,183,255,.28);
}
.drawer-main{
  margin-bottom:5px;
  border:0;
  background:transparent;
  color:#f0f4e9;
  text-transform:uppercase !important;
  letter-spacing:.11em !important;
  font-size:12px !important;
}
.drawer-home .drawer-main{color:#d7f8a0;}
.drawer-nmrih .drawer-main{color:#ffd8dc;}
.drawer-tf2 .drawer-main{color:#ffe28a;}
.drawer-future .drawer-main{color:#a8dcff;}
.drawer-soon:hover::after{
  content:"Coming soon";
  position:static;
  margin-left:auto;
  color:#e7d889;
  font-size:10px;
}
.drawer-community{
  margin:8px 0 0;
  padding:10px 0 0;
  border-top:1px dashed rgba(255,255,255,.08);
}
.drawer-community > span{
  color:#8f9b88;
  font-family:var(--font-ui);
  font-size:10px;
  letter-spacing:.16em;
}
.drawer-icon-row{
  grid-template-columns:1fr 1fr;
  gap:7px;
}
.drawer-icon-row .drawer-icon{
  justify-content:center;
  min-height:34px;
  padding:8px 9px;
  border-radius:4px;
  border:1px solid rgba(161,217,81,.18);
  background:rgba(0,0,0,.18);
  font-size:11px;
  color:#c7d5bd;
}
.drawer-icon-row .drawer-icon:hover{
  color:#f2f6ea;
  border-color:rgba(161,217,81,.42);
}
.drawer-icon-row .drawer-icon:hover::after{
  opacity:1;
}


/* v13: keep drawer button centered on the left edge */
.drawer-toggle{
  top:50%;
  left:18px;
  transform:translateY(-50%);
}
.drawer-open .drawer-toggle{
  transform:translateY(-50%);
}

/* v16: Bans is normal by default; the red warning/slash treatment appears only on hover. */
.drawer-nav a[href="bans.html"]{
  color:#b8b8b4;
  font-weight:800;
}
.drawer-nav a[href="bans.html"]::before{
  background:transparent;
  box-shadow:none;
}
.drawer-nav a[href="bans.html"]::after{
  opacity:0;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255,42,42,.30) 0px,
      rgba(255,42,42,.30) 8px,
      rgba(255,42,42,.08) 8px,
      rgba(255,42,42,.08) 17px
    ),
    linear-gradient(90deg, rgba(255,42,42,.30) 0%, rgba(255,42,42,.14) 48%, rgba(255,42,42,0) 100%);
}
.drawer-nav a[href="bans.html"]:hover{
  color:#fff3f3;
}
.drawer-nav a[href="bans.html"]:hover::before{
  background:#ff2a2a;
  box-shadow:0 0 16px rgba(255,42,42,.45);
}
.drawer-nav a[href="bans.html"]:hover::after{
  opacity:1;
}


/* v17 shell header refinement: square social icon slots + login status popover. */
.top-actions{
  align-items:flex-start;
  gap:10px;
}

.top-icon{
  width:36px;
  height:36px;
  display:inline-grid;
  place-items:center;
  border:1px solid rgba(163,220,82,.34);
  border-radius:6px;
  background:linear-gradient(180deg, rgba(29,58,19,.70), rgba(10,18,10,.62));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035), 0 8px 20px rgba(0,0,0,.22);
  color:var(--lime);
  text-decoration:none;
  font-family:var(--font-ui);
  font-size:13px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  transition:transform .14s ease, border-color .14s ease, background .14s ease, color .14s ease, box-shadow .14s ease;
}

.top-icon:hover,
.top-icon:focus-visible{
  transform:translateY(-1px);
  border-color:rgba(163,220,82,.78);
  background:linear-gradient(180deg, rgba(47,88,27,.92), rgba(15,28,14,.86));
  color:#f2ffe7;
  box-shadow:0 0 20px rgba(142,219,69,.16), inset 0 0 0 1px rgba(255,255,255,.07);
}

.top-icon-discord{
  color:#cdeec4;
}

.login-box{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
}

.login-button{
  min-width:72px;
  text-align:center;
}

.login-popover{
  position:absolute;
  top:calc(100% + 9px);
  right:0;
  width:190px;
  padding:11px 12px;
  border:1px solid rgba(163,220,82,.34);
  border-radius:8px;
  background:linear-gradient(180deg, rgba(9,20,10,.96), rgba(7,12,8,.96));
  box-shadow:0 16px 34px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.035);
  color:var(--text);
  font-family:var(--font-ui);
  font-size:12px;
  letter-spacing:.02em;
  line-height:1.35;
  opacity:0;
  transform:translateY(-4px);
  pointer-events:none;
  transition:opacity .14s ease, transform .14s ease;
  z-index:20;
}

.login-popover strong{
  display:block;
  margin-bottom:4px;
  color:#f2ffe7;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:11px;
}

.login-popover span{
  color:var(--muted);
}

.login-box:hover .login-popover,
.login-box:focus-within .login-popover{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

@media (max-width:760px){
  .top-actions{
    align-items:center;
  }
  .top-icon{
    width:34px;
    height:34px;
  }
  .login-popover{
    right:50%;
    transform:translate(50%, -4px);
  }
  .login-box:hover .login-popover,
  .login-box:focus-within .login-popover{
    transform:translate(50%, 0);
  }
}