/* The Union Gaming Network — per-server page styles.
   These layer on top of /assets/site.css (the shared brochure styles).
   Per-game theming: each game gets an accent palette applied via the
   data-game attribute on the .svHero element. server.js normalises the
   game name to a slug and sets data-game on the hero at render time.
   Unknown games fall through to the default Union green. */

/* Default Union palette — used when no per-game accent is set. */
.svHero {
  --gameAccent:        rgba(64,255,170,0.55);
  --gameAccentSoft:    rgba(64,255,170,0.07);
  --gameAccentEdge:    rgba(64,255,170,0.22);
  --gameAccentText:    var(--green);
  --gameAccentWarm:    rgba(232,176,64,0.40);
}

/* DayZ — bleached khaki/olive, faded warning-yellow accent. */
.svHero[data-game="dayz"] {
  --gameAccent:        rgba(196,180,116,0.55);
  --gameAccentSoft:    rgba(196,180,116,0.08);
  --gameAccentEdge:    rgba(196,180,116,0.28);
  --gameAccentText:    #d4c382;
  --gameAccentWarm:    rgba(232,118,58,0.36);
}

/* Minecraft — grass-green, gold xp accent. */
.svHero[data-game="minecraft"] {
  --gameAccent:        rgba(88,200,90,0.55);
  --gameAccentSoft:    rgba(88,200,90,0.08);
  --gameAccentEdge:    rgba(88,200,90,0.32);
  --gameAccentText:    #7be07e;
  --gameAccentWarm:    rgba(255,210,80,0.42);
}

/* Conan Exiles — bronze/desert, fire-red accent. */
.svHero[data-game="conan-exiles"],
.svHero[data-game="conan-exiles-enhanced"],
.svHero[data-game="conan"] {
  --gameAccent:        rgba(208,142,72,0.55);
  --gameAccentSoft:    rgba(208,142,72,0.08);
  --gameAccentEdge:    rgba(208,142,72,0.32);
  --gameAccentText:    #e7b27e;
  --gameAccentWarm:    rgba(220,72,52,0.42);
}

/* Rust — oxidised orange/red, industrial gray. */
.svHero[data-game="rust"] {
  --gameAccent:        rgba(220,100,52,0.55);
  --gameAccentSoft:    rgba(220,100,52,0.08);
  --gameAccentEdge:    rgba(220,100,52,0.32);
  --gameAccentText:    #ea9070;
  --gameAccentWarm:    rgba(180,180,180,0.32);
}

/* The Isle — jungle green, amber eye accent. */
.svHero[data-game="the-isle"],
.svHero[data-game="the-isle-evrima"] {
  --gameAccent:        rgba(76,176,120,0.55);
  --gameAccentSoft:    rgba(76,176,120,0.08);
  --gameAccentEdge:    rgba(76,176,120,0.32);
  --gameAccentText:    #7fd0a0;
  --gameAccentWarm:    rgba(232,168,56,0.42);
}

/* Project Zomboid — dried-blood red, olive drab accent. */
.svHero[data-game="project-zomboid"] {
  --gameAccent:        rgba(196,64,56,0.55);
  --gameAccentSoft:    rgba(196,64,56,0.08);
  --gameAccentEdge:    rgba(196,64,56,0.32);
  --gameAccentText:    #e08a80;
  --gameAccentWarm:    rgba(150,160,90,0.40);
}

/* Sea of Thieves — ocean teal, pirate gold (placeholder for when added). */
.svHero[data-game="sea-of-thieves"],
.svHero[data-game="sot"] {
  --gameAccent:        rgba(80,200,220,0.55);
  --gameAccentSoft:    rgba(80,200,220,0.08);
  --gameAccentEdge:    rgba(80,200,220,0.32);
  --gameAccentText:    #80d6ea;
  --gameAccentWarm:    rgba(232,176,64,0.42);
}

.server-loading {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
  padding: 60px 0;
  text-align: center;
}
.server-error {
  font-family: var(--mono);
  font-size: 13px;
  color: #e85a5a;
  padding: 40px 24px;
  text-align: center;
  background: rgba(232,90,90,0.05);
  border: 1px solid rgba(232,90,90,0.20);
  border-radius: 10px;
  margin: 24px 0;
}
.server-error b { color: #ff8484; }

/* Hero banner with server identity. Border + edge accent + name colour
   all derived from the per-game --gameAccent* variables above so each
   game card has its own visual identity without duplicating layout. */
.svHero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  padding: 28px 30px;
  background: linear-gradient(135deg, rgba(3,18,12,0.85) 0%, rgba(8,28,18,0.70) 100%);
  border: 1px solid var(--gameAccentEdge);
  border-radius: 16px;
  margin-bottom: 22px;
  position: relative;
  overflow: hidden;
}
.svHero::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg, transparent, var(--gameAccent) 35%, var(--gameAccentWarm) 70%, transparent);
}
.svHero[data-game] .svGame { color: var(--gameAccentText); }
.svHeroLeft { display: grid; gap: 8px; align-content: start; }
.svGame {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.svName {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
  line-height: 1.15;
}
.svDesc {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--muted);
  margin-top: 4px;
  max-width: 60ch;
  line-height: 1.55;
}
.svHeroRight {
  display: grid;
  gap: 10px;
  align-content: start;
  justify-items: end;
  min-width: 200px;
}
.svStatus {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 6px;
}
.svStatus.on   { color: var(--green); border: 1px solid rgba(64,255,170,0.28); background: rgba(64,255,170,0.07); }
.svStatus.deg  { color: #e8a83a;       border: 1px solid rgba(232,168,58,0.32); background: rgba(232,168,58,0.07); }
.svStatus.off  { color: #e85a5a;       border: 1px solid rgba(232,90,90,0.30);  background: rgba(232,90,90,0.07); }
.svStatusDot { width: 8px; height: 8px; border-radius: 50%; }
.svStatusDot.on  { background: var(--green); box-shadow: 0 0 8px rgba(64,255,170,0.55); }
.svStatusDot.deg { background: #e8a83a;       box-shadow: 0 0 8px rgba(232,168,58,0.55); }
.svStatusDot.off { background: #e85a5a;       box-shadow: 0 0 8px rgba(232,90,90,0.55); }

.svConnect {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--green);
  background: rgba(64,255,170,0.07);
  border: 1px solid rgba(64,255,170,0.20);
  border-radius: 8px;
  padding: 7px 14px;
  user-select: all;
  cursor: copy;
  letter-spacing: 0.04em;
}
.svConnect:hover { background: rgba(64,255,170,0.12); }
button.svConnect { font: inherit; font-family: var(--mono); font-size: 12px; line-height: normal; }
.svWake {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--gold); background: rgba(200,168,76,0.09); border: 1px solid rgba(200,168,76,0.36);
  border-radius: 8px; padding: 8px 14px; cursor: pointer;
}
.svWake:hover { background: rgba(200,168,76,0.16); }
.svWake:disabled { opacity: 0.65; cursor: wait; }
.svWakeMessage { max-width: 250px; font-family: var(--mono); font-size: 10px; line-height: 1.45; color: var(--muted); text-align: right; }
.svSrOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 720px) {
  .svHero { grid-template-columns: 1fr; }
  .svHeroRight { justify-items: start; }
}

/* Sub-page tabs — glass "pill bar" so the nav reads over the background image */
.svTabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 22px;
  padding: 8px;
  background: rgba(3,18,12,0.72);
  border: 1px solid rgba(64,255,170,0.20);
  border-radius: 12px;
  backdrop-filter: blur(18px) saturate(1.7);
  -webkit-backdrop-filter: blur(18px) saturate(1.7);
  box-shadow:
    0 8px 30px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(64,255,170,0.14);
}
.svTab {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: 8px;
  text-decoration: none;
  transition: color 0.18s, background 0.18s, border-color 0.18s;
}
.svTab:hover { color: var(--green); background: rgba(64,255,170,0.07); }
.svTab.active {
  color: var(--gold);
  background: rgba(200,168,76,0.10);
  border-color: rgba(200,168,76,0.32);
}

/* Prose content (info / rules) */
.svProse {
  background: rgba(3,18,12,0.55);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 28px 32px;
  font-family: var(--sans);
  font-size: 14.5px;
  color: var(--text);
  line-height: 1.7;
}
.svProse h1, .svProse h2, .svProse h3 {
  font-family: var(--serif);
  color: #fff;
  margin-top: 1.4em;
  margin-bottom: 0.5em;
}
.svProse h1, .svProse h2.mdTitle { font-size: 22px; margin-top: 0; }
.svProse h2 { font-size: 18px; }
.svProse h3 { font-size: 15px; color: var(--gold); }
.svProse p { margin-bottom: 1.1em; }
.svProse ul, .svProse ol { margin: 0.5em 0 1.3em 1.4em; }
.svProse li { margin-bottom: 0.4em; }
.svProse code {
  font-family: var(--mono);
  font-size: 12.5px;
  background: rgba(64,255,170,0.06);
  border: 1px solid rgba(64,255,170,0.16);
  border-radius: 4px;
  padding: 1px 6px;
  color: var(--green);
}
.svProse strong { color: var(--gold); }
.svProse hr { border: none; border-top: 1px solid var(--line); margin: 1.8em 0; }

/* Tables in page bodies (protection-stone sizes, mini-game modes). Wrapped
   in a horizontal scroll at narrow widths rather than squeezing the cells,
   because these tables are mostly short code spans that must not wrap. */
.svProse .fTable {
  width: 100%;
  border-collapse: collapse;
  margin: 0.4em 0 1.5em;
  font-size: 13px;
  display: block;
  overflow-x: auto;
}
.svProse .fTable th,
.svProse .fTable td {
  text-align: left;
  padding: 8px 12px 8px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  line-height: 1.5;
  white-space: nowrap;
}
.svProse .fTable th {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 500;
}
.svProse .fTable td { color: var(--muted); }
.svProse .fTable td:first-child { color: var(--text); }
.svProse .fTable tbody tr:last-child td { border-bottom: none; }

/* Staff page */
.svStaffGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 30px;
}
.svStaffCard {
  background: rgba(3,18,12,0.55);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 16px;
  display: grid;
  gap: 6px;
}
.svStaffCard .nm { font-family: var(--serif); font-size: 15px; color: #fff; }
.svStaffCard .rl { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.svStaffCard .bio { font-family: var(--sans); font-size: 12.5px; color: var(--muted); line-height: 1.55; margin-top: 4px; }
.svStaffAvatar {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--line); background: rgba(0,0,0,0.32);
}

.svUpdates { display: grid; gap: 12px; }
.svUpdate {
  background: rgba(3,18,12,0.55);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 20px;
}
.svUpdate .uHd {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px; gap: 12px; flex-wrap: wrap;
}
.svUpdate .uTitle { font-family: var(--serif); font-size: 15px; color: #fff; }
.svUpdate .uMeta { font-family: var(--mono); font-size: 10.5px; color: var(--dim); letter-spacing: 0.06em; }
.svUpdate .uBody { font-family: var(--sans); font-size: 13.5px; color: var(--muted); line-height: 1.6; white-space: pre-wrap; }

/* Vote page */
.svVoteList {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.svVoteCard {
  background: rgba(3,18,12,0.55);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
  display: grid;
  gap: 8px;
}
.svVoteSite { font-family: var(--serif); font-size: 14px; color: #fff; }
.svVoteHint { font-family: var(--mono); font-size: 10.5px; color: var(--dim); letter-spacing: 0.04em; }

/* Store page */
.svStoreSection { margin-bottom: 28px; }
.svStoreSection:last-child { margin-bottom: 0; }
.svStoreSectionHead { margin-bottom: 12px; }
.svStoreSectionHead h3 {
  margin: 0 0 4px;
  font-family: var(--serif);
  font-size: 18px;
  color: #fff;
}
.svStoreSectionHead p {
  margin: 0;
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
}
.svStoreList {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.svStoreItem {
  background: rgba(3,18,12,0.55);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px;
  display: grid;
  gap: 8px;
}
.svStoreItem .nm { font-family: var(--serif); font-size: 16px; color: #fff; }
.svStoreItem .pr {
  font-family: var(--mono); font-size: 12px; color: var(--green);
  background: rgba(64,255,170,0.07); border: 1px solid rgba(64,255,170,0.20);
  border-radius: 6px; padding: 3px 10px; justify-self: start;
  letter-spacing: 0.04em;
}
.svStoreItem .ds { font-family: var(--sans); font-size: 13px; color: var(--muted); line-height: 1.55; }
.svStoreItem .img { width: 100%; max-height: 140px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.svStoreItem.owned { border-color: rgba(64,255,170,0.38); box-shadow: inset 0 0 0 1px rgba(64,255,170,0.06); }
.svStoreTags { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.svKind, .svBadge, .svOwned {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: 999px; padding: 3px 8px; border: 1px solid var(--line); color: var(--muted);
}
.svBadge { color: var(--gold); border-color: rgba(224,185,92,0.32); }
.svOwned { color: var(--green); border-color: rgba(64,255,170,0.30); justify-self:start; }
.svProductDetails, .svDuration, .svUnavailable {
  font-family: var(--mono); font-size: 10.5px; color: var(--dim); line-height: 1.5;
}
.svStoreAction { margin-top: 4px; min-height: 30px; display:flex; align-items:center; }
.svStoreAction .btn { padding: 7px 14px; font-size: 11px; }
.svStoreAccount { margin-bottom: 14px; }
.svStoreNotice {
  font-family: var(--mono); font-size: 11px; color: var(--muted);
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: rgba(3,18,12,0.45);
}
.svStoreNotice a { color: var(--green); }
.svStoreNotice.error { color: #ff9f9f; border-color: rgba(255,100,100,0.25); }

.svEmpty {
  text-align: center;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--dim);
  padding: 40px 20px;
  background: rgba(3,18,12,0.4);
  border: 1px dashed var(--line);
  border-radius: 12px;
}

/* ── Forum ──────────────────────────────────────────────────────── */
.svForumHead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.svForumTitle { font-family: var(--serif); font-size: 18px; color: #fff; margin: 0; }

.fList { display: grid; gap: 8px; }
.fRow {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; text-decoration: none;
  background: rgba(3,18,12,0.55); border: 1px solid var(--line); border-radius: 10px;
  transition: border-color 0.18s, transform 0.18s;
}
.fRow:hover { border-color: rgba(64,255,170,0.34); transform: translateY(-1px); }
.fRowMain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fRowTop { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.fRowTitle { font-family: var(--serif); font-size: 14.5px; color: #fff; }
.fRowMeta { font-family: var(--mono); font-size: 10.5px; color: var(--dim); letter-spacing: 0.03em; }
.fRowCount { font-family: var(--mono); font-size: 10.5px; color: var(--muted); white-space: nowrap; }

/* Letter / image avatar */
.fAv {
  position: relative; width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 12px; font-weight: 600; color: #07130d;
  overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}
.fAv img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fPostAv { width: 42px; height: 42px; font-size: 13px; }
.fAv .fOnline {
  position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%;
  background: #40ffaa; box-shadow: 0 0 0 2px rgba(3,18,12,0.92), 0 0 6px rgba(64,255,170,0.7);
}
.fSeen { font-family: var(--mono); font-size: 10px; color: var(--dim); font-weight: 400; }
.fSeen.on { color: var(--green); }

.fBadge { font-family: var(--mono); font-size: 9px; letter-spacing: 0.10em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 4px; vertical-align: middle; }
.fBadge.pin  { color: var(--gold);  background: rgba(200,168,76,0.10); border: 1px solid rgba(200,168,76,0.32); }
.fBadge.lock { color: #e8a83a;       background: rgba(232,168,58,0.08); border: 1px solid rgba(232,168,58,0.30); }

.fBack { display: inline-block; font-family: var(--mono); font-size: 11px; color: var(--green);
  text-decoration: none; margin-bottom: 14px; }
.fBack:hover { text-decoration: underline; }

.fThreadHead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.fThreadHead h3 { font-family: var(--serif); font-size: 17px; color: #fff; margin: 0; }
.fMod { display: flex; gap: 12px; }
.fMod a { font-family: var(--mono); font-size: 11px; color: var(--gold); text-decoration: none; }
.fMod a:hover { text-decoration: underline; }

.fPost {
  display: flex; gap: 12px;
  background: rgba(3,18,12,0.55); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 16px; margin-bottom: 10px;
}
.fPostMain { flex: 1; min-width: 0; }
.fPostHd { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.fPostAuthor { font-family: var(--serif); font-size: 13.5px; color: var(--green); }
.fPostMeta { font-family: var(--mono); font-size: 10px; color: var(--dim); }
.fPostBody { font-family: var(--sans); font-size: 13.5px; color: var(--text); line-height: 1.65; word-break: break-word; }
.fPostBody p { margin: 0 0 10px; }
.fPostBody p:last-child { margin-bottom: 0; }
.fImg { max-width: 100%; max-height: 480px; border-radius: 10px; border: 1px solid var(--line); margin: 6px 0; display: block; }
.fDel { color: #e85a5a; text-decoration: none; }
.fDel:hover { text-decoration: underline; }

.fForm, .fReply { display: grid; gap: 10px; margin-top: 14px;
  background: rgba(3,18,12,0.55); border: 1px solid var(--line); border-radius: 10px; padding: 16px; }
.fForm input, .fForm textarea, .fReply textarea {
  width: 100%; padding: 10px 12px; font-family: var(--sans); font-size: 13.5px;
  background: rgba(0,0,0,0.32); border: 1px solid var(--line); border-radius: 8px; color: var(--text);
}
.fForm input:focus, .fForm textarea:focus, .fReply textarea:focus { outline: none; border-color: rgba(64,255,170,0.40); }
.fForm textarea, .fReply textarea { min-height: 110px; resize: vertical; line-height: 1.6; }
.fErr { color: #e85a5a; font-family: var(--mono); font-size: 11px; min-height: 1px; }

.fToolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fAttach {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--green);
  border: 1px solid rgba(64,255,170,0.28); border-radius: 7px; padding: 6px 12px; cursor: pointer;
  transition: background 0.18s;
}
.fAttach:hover { background: rgba(64,255,170,0.07); }
.fHint { font-family: var(--mono); font-size: 10px; color: var(--dim); }

/* Post footer: reactions + actions */
.fPostFoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.fReacts { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; position: relative; }
.fReact {
  font-family: var(--mono); font-size: 12px; padding: 3px 10px; border-radius: 20px;
  background: rgba(255,255,255,0.05); border: 1px solid var(--line); color: var(--text); cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.fReact b { color: var(--muted); font-weight: 600; font-size: 11px; }
.fReact:hover { border-color: rgba(64,255,170,0.34); }
.fReact.mine { background: rgba(64,255,170,0.12); border-color: rgba(64,255,170,0.42); }
.fReact.mine b { color: var(--green); }
.fReactAdd {
  width: 26px; height: 26px; border-radius: 50%; border: 1px dashed var(--line);
  background: transparent; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; transition: color 0.15s, border-color 0.15s;
}
.fReactAdd:hover { color: var(--green); border-color: rgba(64,255,170,0.42); }
.fPalette {
  position: absolute; bottom: 34px; left: 0; z-index: 5; display: flex; gap: 2px;
  background: rgba(3,18,12,0.97); border: 1px solid var(--line); border-radius: 10px; padding: 6px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.55);
}
.fPalPick { font-size: 18px; background: transparent; border: none; cursor: pointer; padding: 4px 6px; border-radius: 8px; line-height: 1; }
.fPalPick:hover { background: rgba(64,255,170,0.10); }

.fPostActions { display: inline-flex; gap: 12px; font-family: var(--mono); font-size: 10.5px; }
.fPostActions a { color: var(--muted); text-decoration: none; }
.fPostActions .fEdit:hover { color: var(--green); }
.fPostActions .fDel { color: #e85a5a; }
.fPostActions .fDel:hover { text-decoration: underline; }
.fEdited { color: var(--dim); font-style: italic; }

/* Inline editor */
.fEditBox { display: grid; gap: 8px; margin: 4px 0 2px; }
.fEditTitle, .fEditTa {
  width: 100%; padding: 9px 11px; font-family: var(--sans); font-size: 13.5px;
  background: rgba(0,0,0,0.32); border: 1px solid var(--line); border-radius: 8px; color: var(--text);
}
.fEditTa { min-height: 100px; resize: vertical; line-height: 1.6; }
.fEditTitle:focus, .fEditTa:focus { outline: none; border-color: rgba(64,255,170,0.40); }
.fEditBtns { display: flex; align-items: center; gap: 12px; }
.fEditCancel { font-family: var(--mono); font-size: 11px; color: var(--muted); text-decoration: none; }
.fEditCancel:hover { color: var(--green); }

/* Signed-out visitors: where the connect address would be. */
.svConnectGated {
  display: inline-block; margin-top: 10px; font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.06em; color: var(--gold); text-decoration: none;
  border: 1px dashed rgba(200,168,76,0.45); border-radius: 6px; padding: 7px 11px;
  background: rgba(0,0,0,0.35);
}
.svConnectGated:hover { background: rgba(200,168,76,0.10); }

/* Staff and Forum are members-only: a small lock until signed in. */
body:not(.svSignedIn) .svTabMembers::after { content: '\1F512'; font-size: 10px; margin-left: 6px; opacity: 0.75; }

/* Supply Key contents and odds. */
.svOdds { margin: 4px 0 26px; background: rgba(4,12,9,0.86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid var(--line); border-radius: 10px; padding: 14px 18px; text-align: left; font-family: var(--sans); }
.svOdds summary { cursor: pointer; font-family: var(--serif); font-size: 16px; color: #fff; }
.svOdds p { font-size: 13.5px; color: rgba(255,255,255,0.86); line-height: 1.6; margin: 10px 0 12px; }
.svOddsTable { width: 100%; border-collapse: collapse; font-size: 14px; font-family: var(--sans); }
.svOddsTable thead th:last-child { text-align: right; }
.svOddsTable th, .svOddsTable td { text-align: left; padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,0.06); color: rgba(255,255,255,0.9); }
.svOddsTable thead th { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.75); }
.svOddsTable .svOddsP { text-align: right; font-family: var(--mono); white-space: nowrap; width: 1%; }
.svOddsGroup th { padding-top: 14px; color: var(--gold) !important; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.svOddsGroup th span { float: right; color: rgba(255,255,255,0.75); letter-spacing: 0; text-transform: none; }

/* ── Mini-Games leaderboards ─────────────────────────────────────── */
.svStats { background: rgba(4,14,10,0.84); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; }
.svStatsIntro, .svStatsNote { font-family: var(--sans); font-size: 14px; color: var(--muted); margin: 0 0 12px; }
.svStatsGames { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.svStatsGame { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 6px 10px;
  border-radius: 6px; border: 1px solid var(--line); background: rgba(0,0,0,.3); color: var(--muted); cursor: pointer; }
.svStatsGame.on { background: rgba(64,255,170,.14); border-color: rgba(64,255,170,.45); color: #fff; }
.svStatsBoards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.svBoard h4, .svBoard h2.svBoardTitle { font-family: var(--serif); color: var(--gold); letter-spacing: .06em; margin: 0 0 8px; font-size: 15px; }
.svBoard ol { list-style: none; margin: 0; padding: 0; }
.svBoard li { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: baseline; padding: 7px 10px;
  border-bottom: 1px solid rgba(255,255,255,.06); font-family: var(--sans); font-size: 14px; color: #fff; }
.svBoard li .pos { font-family: var(--mono); color: var(--dim); }
.svBoard li .val { font-family: var(--mono); font-size: 12.5px; color: var(--green); }
.svBoard li.me { background: rgba(64,255,170,.08); border-radius: 6px; }
.svStatsMine { display: flex; flex-wrap: wrap; gap: 14px; align-items: baseline; padding: 10px 12px; margin-bottom: 12px;
  border: 1px solid rgba(64,255,170,.3); border-radius: 8px; font-family: var(--sans); font-size: 14px; color: var(--muted); }
.svStatsMine b { color: #fff; }
.svStatsMine .rk { color: var(--gold); font-family: var(--mono); font-size: 12.5px; }

/* The line under each buy button: what you're buying, in plain words. */
.svBuyNote { margin-top: 10px; font-size: 12px; line-height: 1.5; color: var(--muted, #9fb3aa); }
.svBuyNote b { color: #fff; font-weight: 600; }