/* BMF (silver) */
.rank-bmf,
.name-bmf{
  color:#c0c0c0;           /* silver */
  font-weight:700;
  text-shadow:0 0 6px rgba(192,192,192,.25);
}

/* (optional) give BMF a subtle silver border/glow on the table cell */
td .rank-bmf, td .name-bmf{
  /* uncomment if you want a faint underline look */
  /* border-bottom:1px solid rgba(192,192,192,.35); padding-bottom:1px; */
}

/* Cards / panels */
.card, .panel, .soft{
  background:#1f2937;
  border:1px solid rgba(255,255,255,.06);
}

.theme-ps .soft { border-top: 2px solid rgba(23, 92, 140, 0.55); }
.theme-xb .soft { border-top: 2px solid rgba(18, 108, 51, 0.55); }

/* Per-cell */
.rank-champ, .name-champ{ color:#f5c542; font-weight:700; text-shadow:0 0 6px rgba(245,197,66,.25); }
.plat-ps{ color:#2aa8ff; font-weight:600; }
.plat-xb{ color:#22c55e; font-weight:600; }

/* =========================
   ROSTER TABLE
   ========================= */
#rostersCard{ width:100%; max-width:100vw; box-sizing:border-box; }
#rosterTableWrap{ width:100%; overflow-x:auto; }
#rosterTableWrap table{ width:100%; table-layout:fixed; border-collapse:separate; border-spacing:0; }
#rosterTableWrap thead th{
  font-weight:700; letter-spacing:.02em; color:#e5e7eb;
  border-bottom:1px solid rgba(255,255,255,.08);
}
#rosterTableWrap th, #rosterTableWrap td{
  padding:.6rem .7rem; color:#e5e7eb;
  white-space:normal; word-break:break-word;
}
#rosterTableWrap tbody tr{ transition: background .12s ease; }
#rosterTableWrap tbody tr:hover{ background:rgba(255,255,255,.04); }

/* Export button */
#btnRosterPNG{ background:#10b981; color:#0b1222; font-weight:700; }
#btnRosterPNG:hover{ background:#059669; }

/* =========================
   FIGHT CARDS (scoped to #cards)
   ========================= */
#cards{ padding:8px 12px; }
#cards .fightcards{ display:grid; grid-template-columns: 1fr; gap:12px; }
@media (min-width:640px){ #cards .fightcards{ grid-template-columns: repeat(2,1fr); } }
@media (min-width:1024px){ #cards .fightcards{ grid-template-columns: repeat(3,1fr); } }
#cards .fight-card, #cards .card{
  background:#111827; border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:12px;
  color:#e5e7eb;
}
#cards .fight-card h3, #cards h3{ margin:0 0 .4rem; color:#fff; font-weight:700; }
#cards .fight-card .meta{ color:#94a3b8; font-size:.9rem; }
#cards .fight-card img{ max-width:100%; height:auto; display:block; border-radius:8px; }
#cards .fight-card table{ width:100%; border-collapse:collapse; font-size:.95rem; }
#cards .fight-card th, #cards .fight-card td{ padding:.4rem .5rem; border-bottom:1px solid rgba(255,255,255,.06); }

/* Safety */
#cards, #cards *{ visibility:visible; opacity:1; }

/* Mobile tightening */
@media (max-width: 430px){
  html, body{ font-size:15px; }
  #rostersCard .flex{ gap:.45rem !important; }
  #rostersCard label span, #rostersCard .text-sm{ font-size:.85rem !important; }
  #rostersCard select, #rostersCard input[type="text"], #rostersCard textarea{
    font-size:.9rem !important; padding:.42rem .6rem !important; line-height:1.15 !important; min-width:0;
  }
  #btnRosterPNG{ padding:.5rem .7rem !important; font-size:.9rem !important; }
  #rosterMeta, .text-xs{ font-size:.75rem !important; }
  #rosterTableWrap table{ font-size:.82rem !important; }
  #rosterTableWrap th, #rosterTableWrap td{
    padding:.40rem .50rem !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
  }
  #rosterTableWrap td span{ font:inherit !important; }
  #rosterTableWrap th:nth-child(1), #rosterTableWrap td:nth-child(1){ width:74px; }
  #rosterTableWrap th:nth-child(2), #rosterTableWrap td:nth-child(2){ width:88px; }
  #rosterTableWrap th:nth-child(3), #rosterTableWrap td:nth-child(3){ width:54px; text-align:center; }
  #rosterTableWrap th:nth-child(5), #rosterTableWrap td:nth-child(5){ width:78px; text-align:right; }
}
@media (max-width: 380px){
  html, body{ font-size:14px; }
  .navbtn{ font-size:.82rem !important; padding:.4rem .55rem !important; }
  #rosterTableWrap table{ font-size:.78rem !important; }
}

/* Records: two-column layout (list left | history right) */
  .records-desktop-grid{
    display: grid;
    grid-template-columns: 420px minmax(0,1fr);
    gap: 20px;
    align-items: start;
  }
  .records-pane-left{
    position: sticky;
    top: 96px;                /* keeps the list visible while scrolling */
    align-self: start;
    max-height: calc(100vh - 120px);
    overflow: auto;
  }
  .records-pane-right{ min-height: 60vh; }

  /* Rosters: sticky table header + scroll container */
  .table-wrap{
    max-height: 70vh;
    overflow: auto;
    border-radius: 12px;
  }
  #rosters table thead th,
  [data-section="rosters"] table thead th{
    position: sticky;
    top: 0;
    background: rgba(15,23,42,.9); /* matches dark theme */
    backdrop-filter: blur(2px);
    z-index: 1;
  }