/* Warband browser. Card grid + filter rail. */

.wrap--wide { max-width: 1400px; }
.mast--slim { padding-top: 26px; padding-bottom: 18px; position: relative; }
.mast__title--slim { font-size: clamp(30px, 4vw, 52px); }
.backlink {
  position: absolute; left: 0; top: 30px;
  font-family: var(--ea-display); font-size: 10px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--gold); text-decoration: none;
}
.backlink:hover { color: var(--gold-bright); }

/* --- filters --- */
.filters {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end;
  padding: 14px 18px; margin-bottom: 14px;
  border: 1px solid rgba(200,160,74,.3); border-radius: 3px;
  background: linear-gradient(180deg, #171a22, #0e1015);
  box-shadow: inset 0 0 40px rgba(0,0,0,.5);
}
.f { display: flex; flex-direction: column; gap: 5px; }
.f__lbl {
  font-family: var(--ea-display); font-size: 8px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--label-dim, #7c828a);
}
.f select, .direct input {
  background: #0d0f14; color: var(--bone);
  border: 1px solid rgba(200,160,74,.4); border-radius: 2px;
  padding: 7px 10px; font-family: var(--ea-body); font-size: 13px;
  min-width: 150px;
}
.f select:focus, .direct input:focus { outline: none; border-color: var(--gold-bright); }
.f--check { flex-direction: row; align-items: center; gap: 7px; padding-bottom: 7px; }
.f--check span { font-size: 12px; color: #b8ae9a; }
.f__spacer { flex: 1; }
.act--sm { padding: 7px 15px; font-size: 10px; }
.act--wide { display: block; text-align: center; }

.tally {
  font-size: 12px; color: var(--label-dim, #7c828a);
  margin: 0 4px 14px; font-family: var(--ea-data);
}
.tally__n { color: var(--gold-bright); font-weight: 700; font-size: 14px; }

/* --- card grid --- */
.roster {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
}
.wb {
  border: 1px solid rgba(200,160,74,.28); border-radius: 3px;
  background: linear-gradient(180deg, #1a1e26, #0d0f13);
  box-shadow: 0 10px 26px rgba(0,0,0,.5);
  padding: 13px 15px 15px;
  display: flex; flex-direction: column; gap: 9px;
}
/* Joinable games are the point of the page -- make them visually louder. */
.wb--open {
  border-color: rgba(200,160,74,.65);
  box-shadow: 0 10px 26px rgba(0,0,0,.55), 0 0 22px rgba(200,160,74,.1);
}
.wb__head { display: flex; justify-content: space-between; align-items: center; }
.wb__code {
  font-family: var(--ea-data); font-size: 17px; letter-spacing: 3px;
  color: var(--gold-bright);
}
.wb__badges { display: flex; gap: 5px; }
.badge {
  font-family: var(--ea-display); font-size: 7px; letter-spacing: 1.5px;
  text-transform: uppercase; padding: 3px 6px; border-radius: 2px;
  border: 1px solid currentColor;
}
.badge--new { color: #7fc6a8; }
.badge--done { color: #8a8f96; }
.badge--gone { color: #d09a4a; }

.wb__campaign {
  font-family: var(--ea-display); font-size: 13px; letter-spacing: .5px;
  color: var(--bone);
}
.wb__scene { font-size: 12px; color: var(--gold); }
.wb__obj { font-size: 12px; font-style: italic; color: #9aa0a8; margin-top: 2px; }

.wb__bar {
  height: 3px; background: rgba(200,160,74,.14); border-radius: 2px; overflow: hidden;
}
.wb__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--blood), var(--gold)); }
.wb__meta { font-family: var(--ea-data); font-size: 10px; color: var(--label-dim, #7c828a); }

/* --- seat pips: the headline information --- */
.wb__seats { display: flex; flex-wrap: wrap; gap: 6px; }
.pip {
  font-size: 11px; padding: 4px 8px; border-radius: 2px;
  border: 1px solid rgba(200,160,74,.3); background: rgba(0,0,0,.3);
  color: #9aa0a8;
}
.pip b { font-family: var(--ea-data); }
.pip--open { border-color: rgba(127,198,168,.6); color: #9fdcc0; }
.pip--part { border-color: rgba(200,160,74,.6); color: var(--gold-bright); }
.pip--full { opacity: .45; text-decoration: line-through; }

.wb__who { display: flex; flex-direction: column; gap: 3px; font-size: 11px; }
.wb__wholbl {
  font-family: var(--ea-display); font-size: 7px; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--label-dim, #7c828a); margin-right: 4px;
}
.who { color: #b8ae9a; }
.who--dead { color: #6a4a48; text-decoration: line-through; }

.wb__join {
  margin-top: 3px; text-align: center; text-decoration: none;
  font-family: var(--ea-display); font-size: 10px; letter-spacing: 2px;
  text-transform: uppercase; padding: 9px;
  border: 1px solid var(--gold); border-radius: 2px;
  color: var(--gold-bright);
  background: linear-gradient(180deg, rgba(200,160,74,.16), transparent);
  transition: all 130ms ease;
}
.wb__join:hover { background: linear-gradient(180deg, rgba(200,160,74,.3), rgba(200,160,74,.05)); }
.wb__join--full {
  border-color: rgba(140,140,150,.3); color: #7c828a; background: none;
}

.direct {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-top: 22px; padding: 14px 18px;
  border: 1px solid rgba(200,160,74,.22); border-radius: 3px;
  background: rgba(0,0,0,.25);
}
.direct__lbl {
  font-family: var(--ea-display); font-size: 9px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--label-dim, #7c828a);
}
.direct input {
  font-family: var(--ea-data); text-transform: uppercase;
  letter-spacing: 2px; width: 130px; min-width: 0;
}

/* Landing-page additions: seat summary + honest open-count rune. */
.lobby__seats { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 4px; }
.seat {
  font-size: 10px; padding: 2px 6px; border-radius: 2px;
  border: 1px solid rgba(127,198,168,.45); color: #9fdcc0;
}
.seat--full { border-color: rgba(140,140,150,.3); color: #7c828a; }
.lobby--open { border-left: 2px solid var(--gold); }
.rune--open {
  color: #9fdcc0 !important;
  font-family: var(--ea-display); font-size: 9px; letter-spacing: 1.5px;
}

@media (max-width: 700px) {
  .filters { gap: 10px; }
  .f select { min-width: 130px; }
}

/* Cross-page nav, top right of every sub-page. Keeps the four reference/player
   pages one click apart instead of routing everything through the Hall. */
.crosslinks {
  position: absolute; right: 0; top: 30px;
  display: flex; gap: 14px;
}
.crosslinks a {
  font-family: var(--ea-display); font-size: 9px; letter-spacing: 1.8px;
  text-transform: uppercase; color: var(--label-dim, #7c828a); text-decoration: none;
  transition: color 120ms ease;
}
.crosslinks a:hover { color: var(--gold-bright); }

@media (max-width: 700px) {
  .crosslinks { position: static; justify-content: center; margin-top: 10px; gap: 10px; }
  .backlink { position: static; display: block; margin-bottom: 8px; }
  .mast--slim { padding-top: 16px; }
}