/* =========================
   RUSTY BANGERS — DARK / MATTE BLACK
   Background image provides the red color.
   Progress bars keep your red gradient.
   Duplicates removed + blue-tinge killers removed.
   ========================= */

:root{
  --bg:#050607;
  --bg2:#0b0c0e;

  --panel: rgba(10,10,11,.72);
  --panel2: rgba(12,12,13,.78);

  --border: rgba(255,255,255,.08);
  --border2: rgba(255,255,255,.12);

  --text:#eef2f7;
  --muted:#9aa4b2;

  /* keep for progress bars + logo only */
  --accent:#a8322a;
  --accent2:#e0473c;

  --ok:#5bd17a;
  --bad:#e5533d;

  --shadow1: rgba(0,0,0,.55);
  --shadow2: rgba(0,0,0,.75);
}

*{ box-sizing:border-box; }


body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    url("img/bg.webp") center top / cover no-repeat fixed,
    linear-gradient(180deg, var(--bg), var(--bg2));
}

/* Dark overlay so bg image never overpowers UI */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: rgba(0,0,0,.62);
  z-index: 0;
}

/* Grain (neutral, no blend-mode tint) */
.bg-grain{
  position:fixed; inset:0;
  pointer-events:none;
  background:
    radial-gradient(1200px 600px at 50% 20%, rgba(255,255,255,.04), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.38), transparent 35%, rgba(0,0,0,.62)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  mix-blend-mode: normal;     /* IMPORTANT: kills blue tint */
  opacity:.08;                /* faint */
  filter: grayscale(1);       /* neutral */
  z-index: 1;
}

/* Ensure content stays above overlays */
.container, .site-header, main, footer{ position: relative; z-index: 2; }

.container{
  max-width:1220px;
  margin:0 auto;
  padding:26px;
}

/* Brand */
.brand{
  display:flex;
  align-items:center;
  gap:14px;
}

.title{
  font-size: clamp(22px, 3.2vw, 32px);
  font-weight: 950;
  letter-spacing:.2px;
}
.subtitle{
  margin-top:3px;
  color:var(--muted);
  font-size:13px;
}

/* Grid */
.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:16px;
}

/* Pulse the JOINING number */
@keyframes rbJoiningNumPulse {
  0%   { transform: scale(1);   filter: brightness(1); }
  35%  { transform: scale(1.18); filter: brightness(1.25); }
  100% { transform: scale(1);   filter: brightness(1); }
}



/* Joining number — make it able to animate */
.joining-num{
  display:inline-block;           /* IMPORTANT: makes transform visible */
  min-width: 22px;
  text-align:right;
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
}

@keyframes rbJoiningPulse {
  0%   { transform: scale(1);   box-shadow:none; }
  50%  { transform: scale(1.12); box-shadow: 0 0 16px rgba(224,71,60,.22); }
  100% { transform: scale(1);   box-shadow:none; }
}

.joining-num.is-joining{
  animation: rbJoiningPulse 1.1s ease-in-out infinite;
}


/* The flash */
@keyframes rbJoiningFlash {
  0%   { transform: scale(1);   box-shadow:none; background: rgba(0,0,0,.22); }
  35%  { transform: scale(1.35); box-shadow: 0 0 0 2px rgba(168,50,42,.22), 0 0 26px rgba(224,71,60,.22); background: rgba(168,50,42,.18); }
  100% { transform: scale(1);   box-shadow:none; background: rgba(0,0,0,.22); }
}

.joining-num.rb-flash{
  animation: rbJoiningFlash .45s ease-out;
}



/* Card (matte black, no blue glow) */
.card{
  grid-column: span 12;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(10,10,11,.82); /* matte black */
  box-shadow:
    0 30px 90px var(--shadow1),
    inset 0 1px 0 rgba(255,255,255,.06);
  overflow:hidden;
  position:relative;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

/* Keep subtle texture, but no “cold” shine */
.card::before{
  content:"";
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 1px, transparent 1px 9px),
    linear-gradient(180deg, transparent, rgba(0,0,0,.45));
  opacity:.22;
  pointer-events:none;
}

.card:hover{
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.14); /* no red outline */
  box-shadow:
    0 38px 120px var(--shadow2),
    inset 0 1px 0 rgba(255,255,255,.07);
}

.card-inner{ padding:18px; }
@media (min-width: 900px){ .card-inner{ padding:20px; } }

.card > *{ position:relative; }

/* Card head */
.card-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:14px;
}

/* Make Players/Joining block stay in the SAME place (under header)
   but stretch full width like the WIPE COUNTDOWN block */
.card-head{
  align-items: stretch; /* allows children to fill the row width */
}

.card-head > .pop{
  flex: 1 1 100%;     /* force onto its own row AND let it grow */
  width: 100%;
  min-width: 0;       /* prevents weird overflow */
}


.server-name{
  font-size:19px;
  font-weight:950;
  letter-spacing:.2px;
}

.server-sub{
  margin-top:8px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  color:var(--muted);
  font-size:13px;
}

.small{ color:var(--muted); font-size:13px; }

/* Tag */
.tag{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.38);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

/* Dot */
.dot{
  width:10px; height:10px;
  border-radius:50%;
  background: var(--muted);
}
.dot.ok{ background:var(--ok); box-shadow:0 0 0 8px rgba(91,209,122,.14); }
.dot.bad{ background:var(--bad); box-shadow:0 0 0 8px rgba(229,83,61,.14); }

/* Button */
.btn{
  appearance:none;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.35);
  color: var(--text);
  font-weight: 900;
  padding: 10px 14px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 14px 30px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .12s ease, border-color .12s ease, filter .12s ease;
  text-decoration: none;
}
.btn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.18);
  filter: brightness(1.04);
}
.btn:active{
  transform: translateY(0px);
  filter: brightness(.98);
}

/* Population block */
.pop{
  min-width: 280px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.38);
  border-radius: 16px;
  padding: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.pop-top{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom: 10px;
}

/* Progress bar (KEEP RED GRADIENT) */
.bar{
  height: 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.10);
  overflow: hidden;
}
.bar > span{
  display:block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  transition: width .25s ease;
}

/* Stats */
.stats{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:12px;
  margin-top:10px;
}

.stat{
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.32);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.label{
  color:var(--muted);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:900;
}
.value{
  margin-top:7px;
  font-size:20px;
  font-weight:950;
}

/* Wipe grid */
.wipe-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 700px){
  .wipe-grid{ grid-template-columns: 1fr; }
}

/* Players */
.players{
  margin-top:14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.28);
  padding:14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.players-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:12px;
}

.players-title{
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:950;
  color:var(--muted);
}

.players-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap:10px;

  /* LIMIT TO 2 ROWS */
  grid-auto-rows: 58px;              /* must match .player min-height */
  max-height: calc(58px * 2 + 10px); /* 2 rows + gap */

  overflow-y: auto;
}


.player{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.36);
  box-shadow:
    0 10px 24px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.05);
  min-height:58px;
}

.avatar{
  width:38px; height:38px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  flex:0 0 auto;
}
.avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.pmeta{ min-width:0; }
.pname{
  font-weight:950;
  font-size:14px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.pid{
  margin-top:2px;
  color:var(--muted);
  font-size:11px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ===== Site header/footer ===== */

.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  margin-bottom: 18px;
}

/* =========================
   HEADER LOGO — match staff card / matte tile
   ========================= */

/* Wrap the logo image in a “tile” look using the same card language */
.site-logo{
  width: 72px;
  height: 72px;
  display:block;
  object-fit: cover;
  flex: 0 0 auto;

  border-radius: 0px;
  border: 1px solid rgba(255,255,255,.14);

  /* matte black panel */
  background: rgba(10,10,11,.82);

  /* same depth as cards */
  box-shadow:
    0 30px 90px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.08);

  overflow:hidden;
  position: relative;

  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, filter .18s ease;
}

/* subtle texture like .card::before / .update-card::before */
.site-logo::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 1px, transparent 1px 9px),
    linear-gradient(180deg, transparent, rgba(0,0,0,.45));
  opacity:.22;
}

/* premium hover like your cards */
.brand-link:hover .site-logo{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.20);
  box-shadow:
    0 38px 120px rgba(0,0,0,.75),
    inset 0 1px 0 rgba(255,255,255,.10);
  filter: brightness(1.03);
}




.site-header::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);   /* matte */
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
  /* REMOVED backdrop-filter (causes blue tint) */
}

.header-inner{
  position: relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  padding: 18px 0;
}

.brand-link{
  display:flex;
  align-items:center;
  gap:14px;
  text-decoration:none;
  color:inherit;
}

.nav{
  position: relative;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.nav-link{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  
  text-decoration:none;
  color: var(--text);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;

  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.36);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  opacity: .88;
  transition: transform .12s ease, border-color .12s ease, filter .12s ease, opacity .12s ease;
}

.nav-link:hover{
  opacity: 1;
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.18);
  filter: brightness(1.05);
}

.nav-link.is-active{
  opacity: 1;
  border-color: rgba(255,255,255,.22);
  box-shadow:
    0 14px 30px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.07);
}

.page{ padding-bottom: 22px; }

main.page{
  height: auto;
  overflow: visible;
}


/* Footer */
.site-footer{
  margin-top: 22px;
  padding: 18px 0;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.35);
}

/* Footer text should be subtle, not in-your-face */
.site-footer,
.site-footer *{
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .02em;
}


.footer-links{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.footer-links a{
  color: var(--muted);
  text-decoration:none;
  border-bottom: 1px solid transparent;
}

.footer-links a:hover{
  color: var(--text);
  border-bottom-color: rgba(255,255,255,.20);
}

/* ===== Footer admin nav (only shows for you) ===== */
.footer-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:6px;
  flex-wrap:wrap;
}


/* admin nav sits on the RIGHT, can hold multiple buttons */
.footer-admin-nav{
  margin: 0 auto;              /* centers it */
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
}


/* make admin buttons match nav buttons exactly */
.footer-admin-nav .nav-link{
  /* no changes needed if your .nav-link is already perfect */
}


@media (max-width: 720px){
  .header-inner{ padding: 16px 0; }
  .footer-inner{ flex-direction: column; align-items: flex-start; }
}

/* ===== Countdown blocks (if you are using them) ===== */
.wipe-countdown{
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
/* When wipe countdown is inside the 3-column wipe row */
.wipe-grid .wipe-countdown{
  margin-top: 8px;
  gap: 8px;
}
/* Center titles ONLY in the wipe row */
.wipe-grid .label{
  text-align: center;
}
/* Reorder wipe row: Last | Countdown | Next */
.wipe-grid > .stat:nth-child(1){
  order: 1; /* Last Wipe */
}

.wipe-grid > .stat:nth-child(2){
  order: 3; /* Next Wipe */
}

.wipe-grid > .stat:nth-child(3){
  order: 2; /* Wipe Countdown (middle) */
}

.cd-box{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.36);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  padding: 10px 10px 9px;
  text-align: center;
}
.cd-num{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-weight: 950;
  font-size: 22px;
  letter-spacing: .06em;
  color: var(--accent); /* <-- was var(--text) */
}

.cd-lab{
  margin-top: 6px;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 900;
  color: var(--muted);
}
@media (max-width: 520px){
  .wipe-countdown{
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* 4 in one row */
    gap: 6px; /* tighter so it fits */
  }
  .cd-box{ padding: 8px 6px; }
  .cd-num{ font-size: 18px; }
  .cd-lab{ font-size: 9px; letter-spacing: .14em; }
}

/* Center ONLY the WIPE COUNTDOWN title */
/* Wipe row = Last / Next / Countdown all in one row */
/* Wipe row: 3 equal tiles */
.wipe-grid{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}


/* Mobile: stack */
@media (max-width: 900px){
  .wipe-grid{ grid-template-columns: 1fr; }
}

/* Premium date/time styling for Last/Next wipe */
.stat .value .dt-date{
  display:block;
  font-weight: 950;
  letter-spacing: .01em;
}

.stat .value .dt-time{
  display:block;
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
/* Center Last Wipe / Next Wipe values (date + time) */
.stat .value{
  text-align: center;
}

/* Make date + time stack cleanly */
.stat .value .dt-date{
  display: block;
}

.stat .value .dt-time{
  display: block;
  margin-top: 4px;
  font-size: 14px;
  letter-spacing: .12em;
  color: var(--muted);
}
/* Player name as Steam profile link */
.pname-link{
  color: var(--text);
  text-decoration: none;
}

.pname-link:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}



#infoContent{
  padding: 14px;
  color: var(--text);
  line-height: 1.55;
  white-space: pre-wrap; /* keeps line breaks from server description */
}

/* ===== INFO MODAL (premium, matte black) ===== */
#infoModal{
  display:none;               /* JS toggles this */
  position:fixed;
  inset:0;
  z-index:9999;
  background: rgba(0,0,0,.72);
  padding: 22px;

  /* NEW: center the modal-card */
  align-items: center;
  justify-content: center;
}


#infoModal .modal-card{
    width: min(560px, 92vw);
    margin: 0 auto;


  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(10,10,11,.92);
  box-shadow: 0 40px 140px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.06);
  overflow: hidden;
  position: relative;
}

/* subtle texture like your cards */
#infoModal .modal-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 10px),
    linear-gradient(180deg, transparent, rgba(0,0,0,.55));
  opacity:.22;
}

#infoModal .modal-head{
  position: relative;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

#infoModal .modal-title{
  font-weight: 950;
  letter-spacing: .02em;
  font-size: 16px;
  margin: 0;
}

#infoModal .modal-sub{
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}

#infoModal #infoClose{
  appearance:none;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.35);
  color: var(--text);
  font-weight: 950;
  border-radius: 999px;
  padding: 8px 12px;
  cursor:pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .12s ease, filter .12s ease, border-color .12s ease;
}
#infoModal #infoClose:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.18);
  filter: brightness(1.05);
}

#infoModal .modal-body{
  position: relative;
  padding: 14px 16px 16px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  max-height: 32vh;
  overflow: auto;
}

/* mobile spacing */
@media (max-width: 520px){
  #infoModal .modal-card{ margin-top: 10vh; }
  #infoModal .modal-body{ max-height: 52vh; }
}
/* --- FIX: allow content after serversRoot to be visible/scrollable --- */
html, body { height: auto; min-height: 100%; }
body { overflow-y: auto; }

/* =========================
   GLOBAL SCROLLBARS — match matte theme everywhere
   (page scroll + any overflow:auto elements)
   ========================= */

/* Firefox */
*{
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.14) rgba(0,0,0,.35);
}

/* Chromium / Edge */
*::-webkit-scrollbar{
  width: 10px;
  height: 10px; /* horizontal scroll */
}

*::-webkit-scrollbar-track{
  background: rgba(0,0,0,.35);
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.12);
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,.55);
}

*::-webkit-scrollbar-thumb:hover{
  background: rgba(255,255,255,.18);
}


main.page { 
  height: auto;
  min-height: 0;
  overflow: visible;
}
/* =========================
   RUST UPDATES (matches your matte theme)
   ========================= */

.section-title{
  margin: 26px 0 14px;
  font-size: 18px;
  font-weight: 950;
  letter-spacing: .02em;
  color: var(--text);
}

/* DROPS GRID — fixed like the old “perfect” layout */
.updates-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* ALWAYS 3 on desktop */
  gap:16px;
}

/* 2 columns on smaller screens */
@media (max-width: 1100px){
  .updates-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 1 column on mobile */
@media (max-width: 720px){
  .updates-grid{ grid-template-columns: 1fr; }
}


.update-card{
  display:block;
  text-decoration:none;
  color:inherit;

  border-radius:20px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(10,10,11,.82);
  box-shadow:
    0 30px 90px var(--shadow1),
    inset 0 1px 0 rgba(255,255,255,.06);
  overflow:hidden;
  position:relative;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.update-card::before{
  content:"";
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 1px, transparent 1px 9px),
    linear-gradient(180deg, transparent, rgba(0,0,0,.45));
  opacity:.20;
  pointer-events:none;
}

.update-card:hover{
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.14);
  box-shadow:
    0 38px 120px var(--shadow2),
    inset 0 1px 0 rgba(255,255,255,.07);
}

.update-img{
  height: 180px;
  background: rgba(0,0,0,.45);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 14px;
  position: relative;
  overflow: hidden;
}


.update-img img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit: cover;
  display:block;

  /* EDGE FADE */
  -webkit-mask-image: radial-gradient(
    ellipse at center,
    black 60%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse at center,
    black 60%,
    transparent 100%
  );
}



.update-body{
  padding: 16px;
  position:relative;
}

.update-title{
  font-size: 15px;
  font-weight: 950;
  color: var(--text);
  margin-bottom: 6px;
}

.update-date{
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 10px;
}

.update-text{
  font-size: 13px;
  line-height: 1.5;
  color: rgba(238,242,247,.78);
  min-height: 60px;
}

.update-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top: 12px;
  padding: 9px 12px;
  border-radius: 999px;

  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.35);
  color: var(--text);
  font-weight: 950;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;

  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .12s ease, border-color .12s ease, filter .12s ease;
}

.update-card:hover .update-btn{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.18);
  filter: brightness(1.05);
}
/* =========================
   Facepunch badge — PREMIUM
   Uses your real fp.png
   ========================= */

.fp-badge{
  display:inline-flex;
  align-items:center;

  margin-bottom:12px;
  padding:8px 14px;

  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.25)),
    rgba(0,0,0,.45);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 8px 24px rgba(0,0,0,.35);

  opacity:.96;
}

/* real Facepunch logo */
.fp-logo{
  height: 24px;          /* 👈 premium size */
  width: auto;
  display:block;
  object-fit:contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.6));
}

/* subtle hover (matches your cards/buttons) */
.update-card:hover .fp-badge{
  border-color: rgba(255,255,255,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 12px 34px rgba(0,0,0,.45);
}
.update-body{
  text-align: center;
}

.fp-badge{
  margin: 0 auto 12px;
}
/* ===== Header polish (premium) ===== */
.site-header::before{
  background: rgba(0,0,0,.68);
  border-bottom: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 70px rgba(0,0,0,.38);
}

.header-inner{
  padding: 14px 0;
}

.title{
  letter-spacing: .04em;
}

.subtitle{
  opacity: .9;
}

.nav-link{
  padding: 10px 14px;
}

.nav-link.is-active{
  border-color: rgba(255,255,255,.26);
  background: rgba(0,0,0,.48);
}
/* =========================
   Single server: full-width card
   ========================= */

/* Desktop: force server card to span full grid */
@media (min-width: 980px){
  #serversRoot .card{
    grid-column: 1 / -1;   /* span all 12 columns */
  }
}

/* =========================
   STAFF TILES — BIG + TIGHT
   ========================= */

.staff-wrap{ margin-top: 28px; }

/* Center tiles and keep them tight */
.staff-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

/* BIG tile but NOT full width */
.staff-tile{
  width: 260px;              /* tile size */
  padding: 22px 18px;        /* tight around content */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;

  /* kill any inherited full-grid stretch */
  grid-column: auto;
}

/* Bigger avatar */
.staff-avatar{
  width: 150px;
  height: 150px;
  
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.35);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
}

.staff-avatar img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

.staff-name{
  font-weight: 950;
  font-size: 16px;
  letter-spacing: .02em;
  margin-top: 4px;
}

.staff-name-link{
  color: var(--text);
  text-decoration: none;
}
.staff-name-link:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

.staff-role{
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 950;
  color: var(--muted);
}

.staff-status-pill{
  margin-top: 10px;
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.38);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  font-weight: 950;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* =========================
   LIVE ACTIVITY — SERVER CARD (SAFE ADD)
   ========================= */

.activity-mini{
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* each side */
.activity-mini-row{
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);

  min-width: 0;
  white-space: nowrap;
}

/* label */
.activity-kicker{
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 900;
  color: var(--muted);
  margin-right: 6px;
}

/* avatar + name */
.activity-player{
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}

.activity-avatar{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  flex: 0 0 auto;
}

.activity-avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.activity-name{
  font-weight: 950;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* time */
.activity-time{
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 900;
  color: var(--muted);
  flex: 0 0 auto;
}

/* mobile */
@media (max-width: 700px){
  .activity-mini{
    grid-template-columns: 1fr;
  }
}
/* === FIX: Center LIVE ACTIVITY inside card === */

.activity-mini{
  width: 100%;
  justify-content: center;
}

/* ensure it behaves like stats blocks */
.card .activity-mini{
  margin-left: 0;
  margin-right: 0;
}

/* force rows to sit side-by-side, not float right */
.activity-mini-row{
  justify-content: center;
}

/* visually align with stat cards */
.activity-mini{
  padding-top: 6px;
}
/* =========================
   LIVE ACTIVITY — put labels back (LAST JOINED / LAST LEFT)
   ========================= */

.activity-mini{
  margin-top: 12px;
  margin-bottom: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}


/* Each row = one “tile” */
.activity-mini .activity-mini-row{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.32);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  padding: 14px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
}

/* Label text (generated) */
.activity-mini .activity-mini-row::before{
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 900;
  color: var(--muted);
  flex: 0 0 auto;
}

.activity-mini .activity-mini-row.is-join::before{ content:"LAST JOINED"; }
.activity-mini .activity-mini-row.is-leave::before{ content:"LAST LEFT"; }

/* Player chunk */
.activity-mini .activity-player{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex: 1 1 auto;
}

/* Avatar */
.activity-mini .activity-avatar{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  flex:0 0 auto;
}
.activity-mini .activity-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Name */
.activity-mini .activity-name{
  font-weight:950;
  font-size:14px;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Time */
.activity-mini .activity-time{
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 900;
  color: var(--muted);
  flex: 0 0 auto;
}

/* Mobile: stack */
@media (max-width: 700px){
  .activity-mini{ grid-template-columns: 1fr; }
}

/* =========================
   SERVER SWITCH — MINI STAFF CARDS (click to show 1 server)
   ========================= */

.server-switch{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  justify-content:center;
  margin: 0 0 22px;
}

#serverSwitch{ display: contents; }

@supports not (display: contents){
  #serverSwitch{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    justify-content:center;
    width:100%;
  }
}


.server-switch-item{
  width: 260px;               /* matches staff tile vibe */
  padding: 18px 16px;

  border-radius:20px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(10,10,11,.82);
  box-shadow:
    0 30px 90px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.06);

  position:relative;
  overflow:hidden;

  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:10px;

  cursor:pointer;
  user-select:none;

  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, filter .18s ease;
}

.server-switch-item::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 1px, transparent 1px 9px),
    linear-gradient(180deg, transparent, rgba(0,0,0,.45));
  opacity:.22;
}

.server-switch-item:hover{
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.18);
  box-shadow:
    0 38px 120px rgba(0,0,0,.75),
    inset 0 1px 0 rgba(255,255,255,.07);
  filter: brightness(1.03);
}

.server-switch-item.is-active{
  border-color: rgba(255,255,255,.26);
  box-shadow:
    0 40px 130px rgba(0,0,0,.78),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.server-switch-name{
  font-weight:950;
  font-size:15px;
  letter-spacing:.04em;
}

.server-switch-meta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color: var(--muted);
  font-size:13px;
}

.server-switch-meta .dot{
  width:10px; height:10px;
  border-radius:50%;
}
/* Server switch image (badge) */
.server-switch-img{
  width: 260px;          /* change this to taste */
  max-width: 100%;
  margin: 0 auto 12px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.35);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
}

.server-switch-img img{
  width: 100%;
  height: auto;
  display: block;
}

.card-head{
  position: relative;
}

.card-close-btn{
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: 0;
  color: var(--muted);
  font-size: 20px;
  font-weight: 900;
  cursor: pointer;
  line-height: 1;
}

.card-close-btn:hover{
  color: var(--text);
}

/* =========================
   LIVE FEED — name-only colours (matches Discord)
   ========================= */

/* Keep the row neutral */
.feed-row{
  line-height: 1.35;
  color: var(--muted);
}

/* Time + action stay neutral */
.feed-time,
.feed-what{
  color: var(--muted);
}

/* ONLY the player name is coloured */
.feed-name.is-join{
  color: var(--ok);
  font-weight: 800;
}

.feed-name.is-leave{
  color: var(--bad);
  font-weight: 800;
}

/* =========================
   FEEDS ROW — Join / Kill / Events (3 panels)
   ========================= */

.rb-feeds-row{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
}



/* Mobile: stack panels */
@media (max-width: 900px){
  .rb-feeds-row{
    grid-template-columns: 1fr;
  }
}


/* =========================
   Header Steam user — MATCH NAV BUTTONS
   ========================= */

/* the wrapper that holds HOME + steam pill */
.header-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

/* keep steam stuff aligned */
.nav-user{
  display:flex;
  align-items:center;
  gap:10px;
}

/* MAKE the steam pill identical to .nav-link */
.nav-user-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;

  padding: 10px 14px;                 /* EXACT same as your nav-link */
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.36);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  opacity: .88;

  line-height: 1;                     /* stops pill getting fat */
}

/* match hover feel too */
.nav-user-pill:hover{
  opacity: 1;
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.18);
  filter: brightness(1.05);
}

/* avatar must NOT add height */
.nav-avatar{
  width:22px;
  height:22px;
  display:block;                       /* kills baseline spacing */
  border-radius:50%;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.18);
}

.nav-name{
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* =========================
   SUPPORT / TICKETS PAGE
   Fix ugly empty-page look + keep footer at bottom
   ========================= */

/* Make footer sit at bottom on short pages */
body{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main.page{ flex: 1; }

/* Override footer margin so it doesn't float up mid-page */
.site-footer{ margin-top: auto; }

/* Tickets page wrapper: make it a proper centered card area */
.support-wrap{
  max-width: 620px;          /* narrow, premium */
  padding-top: 56px;
  padding-bottom: 56px;
}

/* Tickets card: match your matte style */
.support-card{
  padding: 22px;
  border-radius: 20px;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 30px 90px var(--shadow1),
    inset 0 1px 0 rgba(255,255,255,.06);
}

/* Make the “login” state look intentional */
.support-card h1{
  margin: 0 0 10px;
  font-size: 28px;
  font-weight: 950;
}
.support-card .muted{
  margin: 0 0 14px;
}

/* Button spacing */
.support-card .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn.is-active{
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(168,50,42,.35), rgba(0,0,0,.55));
  box-shadow:
    0 0 0 2px rgba(168,50,42,.25),
    0 14px 30px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.08);
}

/* =========================
   SUPPORT / TICKETS — RUSTY BANGERS NATIVE
   Uses EXISTING card + grid language
   ========================= */

/* Layout: matches site width + card rhythm */
.tickets-grid{
  display:grid;
  grid-template-columns: 8fr 4fr; /* create | tickets */
  gap:16px;
  align-items:start;
}

@media (max-width: 900px){
  .tickets-grid{
    grid-template-columns: 1fr;
  }
}

/* Cards already styled globally — just spacing control */
.tickets-grid .card{
  grid-column: auto;
}

/* Inner spacing stays consistent with site */
.tickets-grid .card-inner{
  padding: 20px;
}

/* Headline inside ticket cards */
.tickets-grid strong{
  display:block;
  font-size:16px;
  font-weight:950;
  letter-spacing:.02em;
  margin-bottom:10px;
}

/* Wizard sections spacing */
#ticketWizard > div{
  margin-top:16px;
}

/* Button rows — identical feel to server controls */
.btn-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:8px;
}

/* Active state — uses accent ONLY when selected */
.btn.is-active{
  border-color: var(--accent);
  background:
    linear-gradient(
      180deg,
      rgba(168,50,42,.22),
      rgba(0,0,0,.55)
    );
  box-shadow:
    0 0 0 2px rgba(168,50,42,.22),
    0 14px 30px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.08);
}

/* Textareas = stat blocks (not form fields) */
#ticketWizard textarea{
  width:100%;
  min-height:140px;
  resize:vertical;
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.32);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  font-family: inherit;
  font-size:14px;
}

/* File input — keep quiet */
#ticketWizard input[type="file"]{
  margin-top:8px;
  color: var(--muted);
}

/* Ticket list — uses existing stat tiles */
.ticket-list{
  display:grid;
  gap:10px;
}

/* Ticket entries behave like stats */
.ticket-list .stat{
  background: rgba(0,0,0,.32);
  transition: transform .12s ease, border-color .12s ease, filter .12s ease;
}

.ticket-list .stat:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.18);
  filter: brightness(1.04);
}

/* Improve readability over heavy background */
.tickets-grid .card{
  background: rgba(10,10,11,.82); /* SAME as cards */
  border-color: rgba(255,255,255,.10);
}

/* Small text should never wash out */
.tickets-grid .small,
.tickets-grid .muted{
  color: var(--muted);
}

/* =========================
   SUPPORT CENTER — CALM / CENTERED
   ========================= */

.support-center{
  max-width: 640px;
  margin: 0 auto;
  padding: 40px 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Main support card */
.support-center .card{
  grid-column: auto;
}

/* Soften headings */
.support-center strong{
  font-size: 18px;
  font-weight: 950;
  letter-spacing: .02em;
}

/* Reduce visual noise */
.support-center .small{
  margin-bottom: 6px;
}
/* =========================
   TICKETS WIZARD — lock width (prevents step jump)
   ========================= */
.card.ticket-embed{
  width: 600px;                 /* matches Step 2 */
  max-width: calc(100vw - 32px);
  margin: 0 auto;
}
/* kill default blue/underline inside the ticket tiles */
.ticket-list a.stat{
  color: var(--text);
  text-decoration: none;
  display: block;
}

.ticket-list a.stat:hover{
  text-decoration: none;
}

.ticket-list a.stat:visited{
  color: var(--text);
}

/* Center ticket ID / status and date */
.ticket-list .stat .label,
.ticket-list .stat .small{
  text-align: center;
  display: block;
}
.ticket-list .stat .small{
  margin-top: 6px;
}

/* =========================
   ADMIN TICKETS — layout (3 columns)
   ========================= */

.admin-ticket{
  display: grid;
  grid-template-columns: 1.4fr .9fr .7fr; /* left | center | right */
  align-items: center;
  gap: 14px;
  padding: 14px;
}

/* LEFT: avatar + name */
.admin-ticket-left{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

/* reuse your existing .avatar size nicely */
.admin-ticket-left .avatar{
  width:42px;
  height:42px;
  border-radius:14px;
}

.admin-ticket-left .pname{
  font-weight:950;
  font-size:14px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* CENTER: ticket + status */
.admin-ticket-center{
  text-align:center;
}

.admin-ticket-center .label{
  text-align:center;
}

.admin-ticket-center .value{
  margin-top:6px;
  font-size:14px;
  font-weight:950;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: var(--text);
}

/* RIGHT: date/time */
.admin-ticket-right{
  text-align:center;
  display:grid;
  gap:4px;
}

/* Mobile: stack cleanly */
@media (max-width: 720px){
  .admin-ticket{
    grid-template-columns: 1fr;
    text-align:center;
  }
  .admin-ticket-left{
    justify-content:center;
  }
}

/* ADMIN tickets: stop default <a> blue + underline */
a.stat.admin-ticket{
  color: var(--text);
  text-decoration: none;
}

a.stat.admin-ticket:visited{
  color: var(--text);
}

a.stat.admin-ticket:hover{
  text-decoration: none;
}

/* =========================
   Ticket reply badge (header)
   ========================= */
.nav-user-pill{
  position: relative;
}

.nav-badge{
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  color: #fff;
  font-size: 11px;
  font-weight: 950;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px rgba(0,0,0,.65);
}

.steam-login-img{ display:inline-block; }
.steam-login-img img{
  display:block;
  max-width:240px;
  height:auto;
  border-radius:14px;
  transition: transform .15s ease, filter .15s ease;
}
.steam-login-img:hover img{
  transform: translateY(-1px);
  filter: brightness(1.08);
}

/* Kill Feed – match Join Feed typography */
[id$="-killfeed"] .feed-row {
  font-size: 12px;
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text);
}

[id$="-killfeed"] .feed-time {
  color: var(--muted);
  font-weight: 600;
  margin-right: 4px;
}

[id$="-killfeed"] .feed-what {
  font-weight: 500;
  color: var(--accent2);
}

/* =========================
   LINK BENEFITS — MATCH SERVER-SWITCH CARDS
   ========================= */

.link-benefits{
  width: 100%;
  max-width: 820px;
  margin: 18px auto 0;
  display: grid;
  gap: 16px;
}

/* Make each perk use the exact same “matte card” language */
.link-benefit{
  border-radius:20px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(10,10,11,.82);
  box-shadow:
    0 30px 90px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.06);

  position:relative;
  overflow:hidden;

  display:flex;
  align-items:center;
  gap:16px;
  padding:18px 16px;

  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, filter .18s ease;
}

/* Same subtle texture overlay as your cards */
.link-benefit::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 1px, transparent 1px 9px),
    linear-gradient(180deg, transparent, rgba(0,0,0,.45));
  opacity:.22;
}

.link-benefit:hover{
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.18);
  box-shadow:
    0 38px 120px rgba(0,0,0,.75),
    inset 0 1px 0 rgba(255,255,255,.07);
  filter: brightness(1.03);
}

/* Image “badge” matches your server-switch-img but smaller */
.link-benefit-img{
  width: 110px;
  flex: 0 0 110px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.35);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
}

.link-benefit-img img{
  width: 100%;
  height: auto;
  display: block;
}

/* Text matches your typography rhythm */
.link-benefit-title{
  font-weight: 950;
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.link-benefit-desc{
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

/* Mobile: stack nicely */
@media (max-width: 640px){
  .link-benefit{
    flex-direction: column;
    text-align: center;
  }
  .link-benefit-img{
    width: 240px;
    flex-basis: auto;
  }
}

/* Link benefits title — match site section titles */
.link-benefits-title{
  max-width: 820px;
  margin: 26px auto 14px;
  font-size: 18px;
  font-weight: 950;
  letter-spacing: .02em;
  color: var(--text);
  text-align: center;
}

/* =========================
   LINK BENEFITS — 2x2 GRID
   ========================= */

.link-benefits{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: 820px;
  margin: 18px auto 0;
}

/* Mobile: stack */
@media (max-width: 700px){
  .link-benefits{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px){
  body{
    background-attachment: scroll, scroll;
  }
  body::before{
    position: absolute;
  }
}

/* =========================
   DROPS — TWITCH ONLY
   Make thumbs fill the frame like Steam cards
   ========================= */

/* DROPS — TWITCH: make images match Steam card sizing (no skinny portraits) */
#twitchPanel .update-img{
  padding: 14px;               /* SAME as Steam */
}

#twitchPanel .update-img img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display:block;
}


/* DROPS — TWITCH: stop “tall” cards */
#twitchPanel .update-text{
  min-height: 0;                 /* kills the forced tall block */
  margin-top: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;         /* keep it to 1 line */
  overflow: hidden;
}

#dropsPage .section-title{
  text-align: center;
}