/* [boards] The join screen's LEADERBOARDS block (client/ladder.js; docs/LEADERBOARDS.md).
   The PROFILE block's card (client/profile.css) in gold: period tabs, board
   chips, a ranked list with medals for the top three, the player's own row
   lit mint, and the UNVERIFIED tag kept honest but quiet. */

.m-ladder { --gold: #ffd25a; --gold-2: #ffb21f; --mint: #5dffc0; --silver: #d9e3f5; --bronze: #ffa86b;
  /* the menu's card (client/style.css .m-rules, .m-practice): flat, a 1 px tinted border, 12 px corners; gold only for accents */
  margin-top: 12px; padding: 14px 16px 12px; border: 1px solid rgba(255, 210, 90, 0.34); border-radius: 12px;
  background: linear-gradient(rgba(255, 210, 90, 0.05), rgba(255, 210, 90, 0.05)), rgba(10, 13, 26, 0.9); } /* opaque enough to read over the 3D backdrop */
/* the content column: tighter than the menu on a desktop, so a name and its value read as one line */
.m-ladder > * { max-width: 560px; margin-left: auto; margin-right: auto; }
.m-lad-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.m-lad-mode { display:flex; align-items:center; gap:10px; margin-top:12px; font-size:12px; color:var(--silver); }
.m-lad-mode select { flex:1; min-width:0; padding:8px; color:var(--silver); background:#151c2b; border:1px solid #647087; border-radius:6px; }
.m-lad-mode select:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.m-lad-title { display: flex; align-items: center; gap: 8px; }
.m-lad-title b { font-family: var(--font-display); font-size: 14px; font-weight: 800; letter-spacing: 0.18em; color: var(--gold); }
.m-lad-tag { font-family: var(--font-display); font-size: 10px; font-weight: 800; letter-spacing: 0.14em; padding: 2px 7px; border-radius: 999px; cursor: help;
  color: #eef2fc; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(238, 242, 252, 0.6); }
/* one selected style for the period tabs and the board chips: solid gold; unselected: light on a lifted chip */
.m-lad-periods { display: inline-flex; gap: 4px; }
#menu .m-lad-periods button, #menu .m-lad-boards button { font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: 0.08em; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  color: #f2f6ff; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.34); white-space: nowrap; }
#menu .m-lad-periods button:hover, #menu .m-lad-boards button:hover { background: rgba(255, 255, 255, 0.24); }
#menu .m-lad-periods button[aria-pressed="true"], #menu .m-lad-boards button[aria-pressed="true"] { color: #3a2600; border-color: transparent;
  background: linear-gradient(180deg, #ffe48f, var(--gold) 55%, var(--gold-2)); box-shadow: 0 2px 0 #c98400; }
.m-lad-boards { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.m-lad-weekly { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-top: 10px; padding: 8px 12px; border-radius: 10px; cursor: pointer;
  background: linear-gradient(90deg, rgba(255, 210, 90, 0.16), rgba(255, 255, 255, 0.05)); border: 1px solid rgba(255, 210, 90, 0.45); }
.m-lad-wk-title { font-family: var(--font-display); font-weight: 800; font-size: 11px; letter-spacing: 0.14em; color: var(--gold); }
.m-lad-wk-who { display: inline-flex; align-items: baseline; gap: 6px; font-size: 13.5px; color: #eef2fc; }
.m-lad-wk-who b { font-family: var(--font-display); font-weight: 700; color: #fff; }
.m-lad-wk-who small { font-family: var(--font-display); font-weight: 700; font-size: 11px; color: #dbe4f7; }
.m-lad-wk-val { font-family: var(--font-display); font-weight: 800; font-size: 14px; color: #ffdc6e; white-space: nowrap; }
.m-ladder { --row: 47px; }
/* the list keeps 10 rows' height across tabs; a short board fills the rest with one friendly line */
.m-lad-list { list-style: none; margin: 12px auto 0; padding: 0; display: flex; flex-direction: column; gap: 5px; min-height: calc(10 * var(--row) + 45px); }
.m-lad-row { box-sizing: border-box; height: var(--row); flex: 0 0 auto; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 0 14px 0 7px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.06); border: 1.5px solid rgba(255, 255, 255, 0.1); }
.m-lad-row:nth-child(even) { background: rgba(255, 255, 255, 0.1); }
.m-lad-rank { display: flex; align-items: center; justify-content: center; width: 40px; height: 30px; border-radius: 9px; font-family: var(--font-display); font-weight: 800; font-size: 15px;
  color: #fff; background: rgba(255, 255, 255, 0.17); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); }
#menu .m-lad-rank.none { color: #b4c2df; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); }
.m-lad-rank.tie { font-size: 14px; letter-spacing: 0.02em; } /* T7: a tie (golf's convention) */
.m-lad-row.top1 .m-lad-rank { color: #3a2600; background: linear-gradient(180deg, #ffe48f, var(--gold) 55%, var(--gold-2)); box-shadow: 0 2px 0 #c98400; }
.m-lad-row.top2 .m-lad-rank { color: #1c2333; background: linear-gradient(180deg, #ffffff, var(--silver)); box-shadow: 0 2px 0 #8d9ab3; }
.m-lad-row.top3 .m-lad-rank { color: #3a1a00; background: linear-gradient(180deg, #ffd0a8, var(--bronze)); box-shadow: 0 2px 0 #b8642a; }
.m-lad-row.top1 { border-color: rgba(255, 210, 90, 0.45); background: linear-gradient(90deg, rgba(255, 210, 90, 0.16), rgba(255, 255, 255, 0.05)); }
.m-lad-who { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; min-width: 0; }
.m-lad-who b { font-family: var(--font-display); font-weight: 700; font-size: 16.5px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; max-width: 100%; }
.m-lad-who small { flex: 0 0 auto; font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.06em; color: #dbe4f7; }
.m-lad-who em { flex: 0 0 auto; align-self: center; font-style: normal; font-family: var(--font-display); font-weight: 800; font-size: 10.5px; letter-spacing: 0.14em; padding: 1px 8px; border-radius: 999px;
  color: #032417; background: var(--mint); }
.m-lad-val { font-family: var(--font-display); font-weight: 800; font-size: 16.5px; color: #ffdc6e; white-space: nowrap; text-align: right; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55); }
.m-lad-val.quiet { font-weight: 600; font-size: 13.5px; color: #c8f5e2; text-shadow: none; }
.m-lad-row.you, .m-lad-row.you:nth-child(even) { border-color: rgba(93, 255, 192, 0.8); background: linear-gradient(90deg, rgba(93, 255, 192, 0.2), rgba(93, 255, 192, 0.06)); }
.m-lad-row.you .m-lad-rank { color: #032417; background: var(--mint); box-shadow: 0 2px 0 #0f9e69; }
.m-lad-fill { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 10px 16px; text-align: center; font-size: 14px; line-height: 1.45; color: #dbe4f7; }
.m-lad-note { display: block; margin-top: 12px; margin-bottom: 2px; color: #e6ecf8; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 520px) {
  .m-ladder { padding: 14px 12px 12px; --row: 54px; }
  .m-lad-head { flex-direction: column; align-items: stretch; }
  /* the filters: two rows of three, the desktop's labels, 13 px, 34 px to tap */
  .m-lad-periods, .m-lad-boards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .m-lad-boards { margin-top: 8px; }
  #menu .m-lad-periods button, #menu .m-lad-boards button { min-height: 34px; padding: 0 2px; font-size: 13px; letter-spacing: 0.02em; text-align: center; }
  /* a row: the name over its LV and YOU, the value right-aligned past a fixed gutter */
  .m-lad-row { grid-template-columns: 38px minmax(0, 1fr) auto; column-gap: 14px; padding-right: 12px; }
  .m-lad-rank { width: 38px; }
  .m-lad-who { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 6px; row-gap: 1px; }
  .m-lad-who b { grid-column: 1 / -1; font-size: 15.5px; }
  .m-lad-who small { font-size: 11.5px; }
  .m-lad-who em { justify-self: start; font-size: 9.5px; padding: 0 7px; }
  .m-lad-val { font-size: 15px; }
  .m-lad-val.quiet { font-size: 12.5px; }
  .m-lad-fill { font-size: 13px; }
}