/* ── OCTOPONG · leaderboards ─────────────────────────────────
   Built from References/Leaderboards: a left rail of sections over
   a season card, mode tabs above a ranked table with the local
   player picked out in gold, and a player profile plus career stats
   down the right.

   The rank table is deliberately the same object as FINAL STANDINGS
   in results.css — same tinted per-seat rows, same hex rank chip,
   same gold bar for you. Two screens, one product.

   Structure comes from theme.css (.panel, .panel-head, .btn, .pill,
   .chip, .scr-title, .meter, .xpbar, .lvl). Everything below is
   either new or scoped inside .boards.

   The two traps that cost this codebase review rounds, restated:
     1. never outline a clipped shape with a `z-index:-1` ::before —
        it floods the face; use the chained drop-shadows
     2. clip-path clips `outline`, so focus is drawn with a brighter
        --edge in that chain plus an inset ring
   ─────────────────────────────────────────────────────────── */

.boards{
  --bd-label:#a9c7dd;         /* 7.0:1 on the lightest panel stop */
  --bd-note:#bcd6e8;          /* 8.6:1 — body copy, never --ink-faint */
  --bd-rose:#ff8fbc;          /* 5.8:1 */
  --bd-line:rgba(140,190,230,.20);
  --bd-row:#101f42;
  font-size:calc(16px * var(--op-ui-scale, 1));
  grid-template-rows:auto minmax(0,1fr) auto;
}

/* a leaderboard is a reading screen: the arena behind is atmosphere,
   not information, and 12px body copy has to survive it */
.boards::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(ellipse 86% 80% at 50% 40%, rgba(12,26,60,.84), rgba(4,7,18,.95) 70%),
    linear-gradient(180deg, rgba(4,7,18,.94), rgba(4,7,18,.90) 40%, rgba(4,7,18,.97));
}

/* theme.css's .panel-head is white on #ff3d8b, which measures 3.34:1
   and fails AA. Same shape, darker ramp, 5.4:1. */
.boards .panel-head{
  display:flex; align-items:center; gap:10px;
  background:linear-gradient(180deg,#c8206a,#8f0f4a);
  font-size:13px; letter-spacing:.13em; padding:9px 16px;
}
.boards .panel-head .hd-r{
  margin-left:auto; font:800 11px/1 var(--ui); letter-spacing:.12em;
  color:#fff;                                  /* 5.4:1 on the head */
}
/* theme.css's .aqua / .gold heads are a background AND a dark text
   colour. Overriding .panel-head above wins the background back to
   magenta but leaves the dark text on it at 3.1:1, so both variants
   have to be restated whole. Measured: 4.9:1 and 5.7:1 at the darker
   stop of each gradient. */
.boards .panel-head.aqua{
  background:linear-gradient(180deg,var(--aqua),var(--aqua-lo)); color:#05221f; }
.boards .panel-head.gold{
  background:linear-gradient(180deg,var(--gold),var(--gold-lo)); color:#2a1600; }
.boards .panel-head.aqua .hd-r{ color:#05221f; }
.boards .panel-head.gold .hd-r{ color:#2a1600; }
.boards .panel{ padding:14px 16px; }
/* …and the head has to be re-bled to that padding. theme.css bleeds it
   to the shared panel's 16/18, so against this tighter 14/16 it hung
   2px past the panel on every edge — measured at 1194x834, where the
   SEASON side column scrolls and the three heads sat 2px above its
   scrollport. lobby.css already carries the identical fix and the
   identical note; the two screens run the same tighter panel. */
.boards .panel-head{ margin:-14px -16px 12px; }

.sr-only{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* ── header ──────────────────────────────────────────────── */
.boards .bd-head{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:12px 20px 4px; zoom:var(--op-ui-scale,1);
}
.boards .bd-head .scr-title{
  margin:0; text-align:left; font-size:clamp(24px,2.7vw,38px);
  -webkit-text-stroke:5px var(--outline);
}
.boards .chip{ font-size:11px; letter-spacing:.1em; }
.boards .chip.warn{
  background:linear-gradient(180deg,rgba(94,62,10,.96),rgba(56,34,4,.96));
  color:#ffdf9a; box-shadow:0 0 0 2px var(--outline),0 3px 0 rgba(0,0,0,.5);
}
.boards .chip.warn b{ color:var(--gold-hi); }
.boards .chip b{ color:var(--aqua); }
.boards .chip .ci{ width:14px; height:14px; color:var(--gold); }

.boards .btn.back{ padding:9px 16px; font-size:13px; flex:none;
  clip-path:polygon(16px 0,100% 0,100% 100%,16px 100%,0 50%); }
.boards .btn.back svg{ transform:rotate(180deg); }
.boards .ci{ display:inline-block; width:1em; height:1em; flex:none; vertical-align:-.15em; }
.boards .ci svg{ width:100%; height:100%; display:block; }

/* ── body ────────────────────────────────────────────────── */
.boards .bd-body{
  display:grid; gap:16px; padding:8px 20px; min-height:0; align-items:start;
  grid-template-columns:minmax(224px,17vw) minmax(0,1fr) minmax(272px,23vw);
}
.boards .bd-rail,
.boards .bd-main,
.boards .bd-side{
  display:flex; flex-direction:column; gap:12px; min-width:0;
  zoom:var(--op-ui-scale,1);
  max-height:calc(100% / var(--op-ui-scale,1));
  overflow:auto; padding-bottom:4px;
  scrollbar-width:thin; scrollbar-color:#2c4a86 transparent;
}
.boards .bd-rail::-webkit-scrollbar,
.boards .bd-main::-webkit-scrollbar,
.boards .bd-side::-webkit-scrollbar{ width:9px; }
.boards .bd-rail::-webkit-scrollbar-thumb,
.boards .bd-main::-webkit-scrollbar-thumb,
.boards .bd-side::-webkit-scrollbar-thumb{ background:#2c4a86; border-radius:99px; }

/* ── the section rail ────────────────────────────────────── */
.boards .bd-tab{
  position:relative; width:100%; border:0; cursor:pointer; text-align:left;
  display:flex; align-items:center; gap:11px; padding:11px 14px;
  background:linear-gradient(180deg,#1f3c72,#132549); color:var(--ink);
  font:800 13px/1 var(--display); letter-spacing:.08em; text-transform:uppercase;
  text-shadow:0 2px 0 rgba(0,0,0,.45);
  clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
  --edge:var(--outline); --lift:0 4px 0 rgba(3,6,16,.55);
  filter:
    drop-shadow(2px 0 0 var(--edge))  drop-shadow(-2px 0 0 var(--edge))
    drop-shadow(0 2px 0 var(--edge))  drop-shadow(0 -2px 0 var(--edge))
    drop-shadow(var(--lift));
  transition:transform .12s cubic-bezier(.3,1.6,.5,1), background .12s;
}
.boards .bd-tab:hover{ transform:translateX(5px); }
.boards .bd-tab.on{
  background:linear-gradient(180deg,var(--gold-hi),var(--gold),var(--gold-lo));
  color:#2a1500; text-shadow:0 1px 0 rgba(255,255,255,.35); --edge:#fff3c4;
}
.boards .bt-ico{ width:24px; height:24px; flex:none; display:block; color:var(--gold); }
.boards .bd-tab.on .bt-ico{ color:#4a2a00; }
.boards .bt-ico svg{ width:100%; height:100%; display:block; }

/* ── season card ─────────────────────────────────────────── */
/* the season card takes whatever height the rail has left over, with
   the artwork growing into it — the alternative is a third of the
   left column reading as an unfinished hole */
.boards .bd-season{ position:relative; flex:1 1 auto; display:flex; flex-direction:column; }
.boards .bs-art{
  flex:1 1 auto; display:grid; place-items:center; min-height:56px; max-height:210px;
  margin:6px 0 2px; pointer-events:none;
  filter:drop-shadow(0 0 18px rgba(139,92,246,.5));
}
.boards .bs-art svg{ width:auto; height:100%; max-width:100%; max-height:200px;
  min-height:56px; display:block; }
.boards .bd-season h3{
  margin:8px 0 6px; font:900 clamp(18px,1.7vw,23px)/1.05 var(--display); color:var(--hot);
  -webkit-text-stroke:3px var(--outline); paint-order:stroke fill; letter-spacing:-.01em;
}
.boards .bd-season p{ margin:0 0 10px; font:600 11.5px/1.5 var(--ui); color:var(--bd-note); }
.boards .bs-clock{
  display:flex; align-items:center; gap:7px; margin-bottom:10px;
  font:800 11px/1 var(--ui); letter-spacing:.1em; color:var(--gold);
}
.boards .bs-clock .ci{ width:14px; height:14px; color:var(--gold); }
.boards .btn.wide{ width:100%; }
.boards .btn.wide.small{ padding:9px 16px 9px 12px; font-size:11.5px; letter-spacing:.1em; }
.boards .btn.wide.small.on{ background:linear-gradient(180deg,#27498a,#172c58); --edge:var(--aqua); }
.boards .btn .chev{ width:14px; height:14px; display:block; flex:none; }
.boards .btn .chev svg{ width:100%; height:100%; display:block; }
.boards .btn .ico{ padding:0; display:grid; place-items:center; width:26px; height:26px;
  background:linear-gradient(180deg,#3a63ad,#16305f); color:#dff6ff; border-radius:0;
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.45); }
.boards .btn.danger .ico{ background:linear-gradient(180deg,#ffa8cd,#d42a6c); color:#48001f; }
.boards .btn .ico svg{ display:block; }

/* ── mode tabs ───────────────────────────────────────────── */
.boards .bd-tabs{ display:flex; gap:9px; flex-wrap:wrap; }
.boards .modetab{
  position:relative; border:0; cursor:pointer; min-width:88px;
  padding:9px 10px 7px; display:flex; flex-direction:column; align-items:center; gap:5px;
  background:linear-gradient(180deg,#1c3667,#101f42); color:var(--ink);
  font:800 10px/1 var(--ui); letter-spacing:.1em; text-transform:uppercase;
  text-shadow:0 2px 0 rgba(0,0,0,.6);
  clip-path:polygon(9px 0,calc(100% - 9px) 0,100% 9px,100% calc(100% - 9px),
                    calc(100% - 9px) 100%,9px 100%,0 calc(100% - 9px),0 9px);
  --edge:var(--outline); --lift:0 4px 0 rgba(3,6,16,.55);
  filter:
    drop-shadow(2px 0 0 var(--edge))  drop-shadow(-2px 0 0 var(--edge))
    drop-shadow(0 2px 0 var(--edge))  drop-shadow(0 -2px 0 var(--edge))
    drop-shadow(var(--lift));
  transition:transform .12s cubic-bezier(.3,1.5,.5,1);
}
.boards .modetab:hover{ transform:translateY(-4px); }
/* the face stays dark so the 10px label keeps contrast; the ACCENT is
   the outline, not the fill — a light fill at 10px measured 1.49:1 */
.boards .modetab.on{ background:linear-gradient(180deg,#27509b,#152c5c); }
.boards .modetab.m-all.on{ --edge:var(--gold); }
.boards .modetab.m-cla.on{ --edge:#dff7ff; }
.boards .modetab.m-sab.on{ --edge:var(--aqua); }
.boards .modetab.m-cha.on{ --edge:var(--violet); }
.boards .modetab.m-ars.on{ --edge:var(--gold); }
.boards .modetab.m-mae.on{ --edge:var(--hot); }
.boards .mt-ico{ width:24px; height:24px; display:block; color:#8fc0ff; }
.boards .mt-ico svg{ width:100%; height:100%; display:block; }
.boards .m-all .mt-ico{ color:var(--gold); }
.boards .m-cla .mt-ico{ color:#dff7ff; }
.boards .m-sab .mt-ico{ color:var(--aqua); }
.boards .m-cha .mt-ico{ color:var(--violet); }
.boards .m-ars .mt-ico{ color:var(--gold); }
.boards .m-mae .mt-ico{ color:var(--hot); }

/* ── filters + notes ─────────────────────────────────────── */
.boards .bd-filter{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:4px; }
.boards .bd-filter .pills{ justify-content:flex-start; }
.boards .bd-formula{
  font:800 9.5px/1.4 var(--ui); letter-spacing:.1em; color:var(--bd-label);
  text-align:right;
}
.boards .bd-note{
  display:flex; align-items:flex-start; gap:9px; margin:10px 0;
  font:600 12px/1.55 var(--ui); color:var(--bd-note);
}
.boards .bd-note .ci{ width:15px; height:15px; margin-top:1px; color:var(--aqua); }
.boards .bd-note.warn{ color:#ffdf9a; }
.boards .bd-note.warn .ci{ color:var(--gold); }
.boards .bd-note b{ color:var(--gold-hi); }
.boards code{ font:700 11.5px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  padding:1px 5px; background:rgba(4,10,26,.75); color:var(--aqua-hi); }

/* ── the ranked table ────────────────────────────────────── */
.boards .bd-table-wrap{
  /* nine rows plus the sticky head fit without scrolling at 1080p —
     the board's whole job is showing rank 1 and YOU in one glance,
     and a 36px scroll was enough to hide one of them */
  overflow:auto; max-height:min(64vh,584px); margin:0 -3px; padding:0 3px;
  scrollbar-width:thin; scrollbar-color:#2c4a86 transparent;
}
.boards .bd-table-wrap.tall{ max-height:min(56vh,520px); }
.boards .bd-table-wrap::-webkit-scrollbar{ width:9px; }
.boards .bd-table-wrap::-webkit-scrollbar-thumb{ background:#2c4a86; border-radius:99px; }
.boards .bd-table-wrap:focus{ outline:3px solid #8ff9ee; outline-offset:2px; }

table.bd-rank{ width:100%; border-collapse:separate; border-spacing:0 6px;
  font:800 14px/1 var(--ui); }
table.bd-rank thead th{
  position:sticky; top:0; z-index:2; padding:6px 10px 8px; text-align:right; white-space:nowrap;
  background:linear-gradient(180deg,#16295a,#12234d);
  font:800 10px/1.2 var(--ui); letter-spacing:.14em; text-transform:uppercase;
  color:var(--bd-label);
}
table.bd-rank thead th:nth-child(1){ text-align:center; width:56px; }
table.bd-rank thead th:nth-child(2){ text-align:left; }
table.bd-rank tbody td{
  padding:7px 10px; background:var(--bd-row); text-align:right; white-space:nowrap;
  color:var(--ink); text-shadow:0 1px 0 rgba(0,0,0,.55);
  border-top:2px solid var(--outline); border-bottom:2px solid var(--outline);
}
table.bd-rank tbody td:first-child{ border-left:2px solid var(--outline);
  width:56px; text-align:center; }
table.bd-rank tbody td:last-child{ border-right:2px solid var(--outline); }
table.bd-rank tbody td.name{ text-align:left; width:99%; }
table.bd-rank tbody td.pts{ color:var(--gold); font-size:15px; }
/* a FLAT tint, not a gradient: `background` paints per-cell, so a
   left-to-right wash restarts in every column and the row stripes */
table.bd-rank tbody tr.seat td{
  background:linear-gradient(0deg, var(--seat-wash), var(--seat-wash)), var(--bd-row); }
table.bd-rank tbody tr.seat td:first-child{ box-shadow:inset 5px 0 0 var(--seat); }

.boards .rank-chip{
  display:inline-grid; place-items:center; width:32px; height:32px;
  background:linear-gradient(180deg,#2a4780,#16294f); color:var(--ink);
  font:900 15px/1 var(--display);
  clip-path:polygon(50% 0,100% 27%,100% 73%,50% 100%,0 73%,0 27%);
  box-shadow:0 0 0 2px var(--outline);
}
tr.m1 .rank-chip{ background:linear-gradient(180deg,#ffe08a,#d1811a); color:#2a1500; }
tr.m2 .rank-chip{ background:linear-gradient(180deg,#eaf4ff,#8ba3bd); color:#141c2b; }
tr.m3 .rank-chip{ background:linear-gradient(180deg,#f7b479,#a75f22); color:#2a1200; }

.boards .who-cell{ display:flex; align-items:center; gap:10px; min-width:0; }
.boards .who-cell .face{
  width:30px; height:30px; flex:none; display:block; border-radius:50%; padding:2px;
  background:radial-gradient(circle at 38% 30%, #16294f, #060c1c);
  box-shadow:0 0 0 2px var(--outline);
}
.boards .who-cell .face svg{ width:100%; height:100%; display:block; }
.boards .who-cell .nm{ font:900 15px/1.15 var(--display); letter-spacing:.03em;
  text-transform:uppercase; overflow:hidden; text-overflow:ellipsis; }
.boards .who-cell .pn{ flex:none; font:700 9.5px/1.2 var(--ui); letter-spacing:.14em;
  color:var(--bd-label); text-transform:uppercase; }
.boards .you-tag{
  flex:none; padding:3px 8px; background:linear-gradient(180deg,var(--gold),var(--gold-lo));
  color:#2a1500; font:900 10px/1 var(--ui); letter-spacing:.14em;
  clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%);
  box-shadow:0 0 0 2px var(--outline);
}

/* your row — the one gold bar on the table, same as results.css */
table.bd-rank tbody tr.me td{
  background:linear-gradient(180deg,#ffd766,#e9a72c); color:#2a1500;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
  border-top-color:#7a4a00; border-bottom-color:#7a4a00;
}
table.bd-rank tbody tr.me td:first-child{ border-left-color:#7a4a00;
  box-shadow:inset 5px 0 0 var(--seat); }
table.bd-rank tbody tr.me td:last-child{ border-right-color:#7a4a00; }
table.bd-rank tbody tr.me td.pts{ color:#3d2200; }
tr.me .rank-chip{ background:linear-gradient(180deg,#2a1500,#150a00); color:var(--gold-hi);
  box-shadow:0 0 0 2px #7a4a00; }
tr.me .you-tag{ background:linear-gradient(180deg,#3b1e00,#1f0f00); color:var(--gold-hi);
  box-shadow:0 0 0 2px #7a4a00; }
tr.me .who-cell .pn{ color:#5c3300; }
tr.me .who-cell .face{ box-shadow:0 0 0 2px #7a4a00; }

.boards .bd-foot{
  display:flex; align-items:center; gap:10px; margin-top:12px; padding-top:11px;
  border-top:2px solid var(--bd-line);
  font:800 11px/1 var(--ui); letter-spacing:.14em; text-transform:uppercase;
  color:var(--bd-label);
}
.boards .bd-foot .bf-l{ display:inline-flex; align-items:center; gap:7px; }
.boards .bd-foot .ci{ width:15px; height:15px; color:var(--gold); }
.boards .bd-foot b{ font:900 18px/1 var(--display); color:var(--gold); letter-spacing:.02em; }
.boards .bd-foot .bf-r{ color:var(--aqua-hi); }

/* ── season hero ─────────────────────────────────────────── */
.boards .bh-row{ display:flex; align-items:flex-start; gap:14px; }
.boards .bh-art{ width:78px; height:78px; flex:none; display:block;
  filter:drop-shadow(0 0 16px rgba(180,230,255,.5)); }
.boards .bh-art svg{ width:100%; height:100%; display:block; }
.boards .bh-row h3{ margin:0 0 7px; font:900 clamp(21px,2.1vw,30px)/1 var(--display);
  color:var(--gold); -webkit-text-stroke:3px var(--outline); paint-order:stroke fill; }
.boards .bh-row p{ margin:0 0 11px; font:600 12px/1.55 var(--ui); color:var(--bd-note); }
.boards .bh-chips{ display:flex; gap:8px; flex-wrap:wrap; }

/* ── match log ───────────────────────────────────────────── */
.boards table.bd-rank.log tbody td:first-child{ width:auto; text-align:left; }
.boards table.bd-rank.log thead th:nth-child(1){ text-align:left; width:auto; }
.boards .ml-when{ font:800 12px/1.25 var(--ui); color:var(--bd-label); }
.boards .ml-when i{ display:block; font-style:normal; font-size:10.5px; color:var(--bd-label);
  opacity:.85; }
.boards .mode-chip{
  display:inline-flex; align-items:center; gap:6px; padding:4px 9px;
  background:linear-gradient(180deg,rgba(28,54,103,.94),rgba(13,26,58,.94));
  font:800 10px/1 var(--ui); letter-spacing:.1em; color:currentColor;
  clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);
  box-shadow:0 0 0 2px var(--outline);
}
.boards .mode-chip .ci{ width:13px; height:13px; }
/* Scoped to the CHIP, never to a bare .m-* class: `.boards .m-cha`
   also matches `.modetab.m-cha`, and it repainted a 10px tab label
   violet on blue at 2.8:1. Tab labels stay --ink; the family colour
   lives in the icon and the outline. */
.boards .mode-chip.m-cla{ color:#dff7ff; }
.boards .mode-chip.m-sab{ color:var(--aqua); }
.boards .mode-chip.m-cha{ color:#c9a8ff; }      /* 5.9:1 — --violet is 2.8 */
.boards .mode-chip.m-ars{ color:var(--gold); }
.boards .mode-chip.m-mae{ color:var(--bd-rose); }
.boards .mode-chip.m-all{ color:var(--gold); }
.boards b.w{ color:var(--lime); font:900 14px/1 var(--display); letter-spacing:.06em; }
.boards b.l{ color:var(--bd-label); font:900 14px/1 var(--display); }
.boards i.of{ font-style:normal; font-size:11px; color:var(--bd-label); }

/* ── empty state ─────────────────────────────────────────── */
.boards .bd-empty{ text-align:center; padding:14px 8px 6px; }
.boards .be-art{ display:block; width:64px; height:64px; margin:4px auto 10px;
  filter:drop-shadow(0 0 16px rgba(47,230,214,.4)); }
.boards .be-art svg{ width:100%; height:100%; display:block; }
.boards .bd-empty h3{ margin:0 0 9px; font:900 clamp(18px,1.8vw,24px)/1 var(--display);
  letter-spacing:.06em; color:var(--aqua);
  -webkit-text-stroke:3px var(--outline); paint-order:stroke fill; }
.boards .bd-empty p{ margin:0 auto 10px; max-width:56ch; font:600 12.5px/1.6 var(--ui);
  color:var(--bd-note); }
.boards .bd-code{
  margin:12px auto 2px; max-width:52ch; padding:12px 14px; text-align:left; overflow-x:auto;
  background:linear-gradient(180deg,#08122b,#0c1a38); color:var(--aqua-hi);
  font:700 12px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;
  box-shadow:inset 0 0 0 2px var(--outline);
}
.boards .bd-code span{ color:#9fbdd4; }   /* 6.9:1 on the code plate */

/* ── achievements ────────────────────────────────────────── */
.boards .bd-awards{ list-style:none; margin:0; padding:0; display:flex;
  flex-direction:column; gap:9px; }
.boards .bd-awards li{
  display:flex; align-items:center; gap:12px; padding:10px 12px;
  background:linear-gradient(180deg,#1c3667,#101f42);
  clip-path:polygon(9px 0,calc(100% - 9px) 0,100% 9px,100% calc(100% - 9px),
                    calc(100% - 9px) 100%,9px 100%,0 calc(100% - 9px),0 9px);
  --edge:var(--outline);
  filter:
    drop-shadow(2px 0 0 var(--edge))  drop-shadow(-2px 0 0 var(--edge))
    drop-shadow(0 2px 0 var(--edge))  drop-shadow(0 -2px 0 var(--edge))
    drop-shadow(0 3px 0 rgba(3,6,16,.55));
}
.boards .bd-awards li.done{ --edge:var(--lime); }
.boards .ba-ico{ width:32px; height:32px; flex:none; display:block; color:var(--violet); }
.boards .bd-awards li.done .ba-ico{ color:var(--lime); }
.boards .ba-ico svg{ width:100%; height:100%; display:block; }
.boards .ba-txt{ display:flex; flex-direction:column; gap:4px; min-width:0; flex:1; }
.boards .ba-txt b{ font:900 13px/1 var(--display); letter-spacing:.06em; color:var(--gold); }
.boards .ba-txt em{ font:600 11.5px/1.35 var(--ui); font-style:normal; color:var(--bd-note); }
.boards .ba-txt .meter{ height:9px; margin-top:2px; }
.boards .bd-awards li.done .meter i{ background:linear-gradient(90deg,#5ecb1f,var(--lime)); }
.boards .ba-n{ flex:none; font:900 15px/1 var(--display); color:var(--ink); }
.boards .ba-n i{ font:800 11px/1 var(--ui); font-style:normal; color:var(--bd-label); }
.boards .ba-tick{ width:18px; height:18px; flex:none; display:block; }
.boards .ba-tick svg{ width:100%; height:100%; display:block; }
/* the right-rail preview: same object, less of it */
.boards .bd-awards.tight{ gap:7px; margin-bottom:11px; }
.boards .bd-awards.tight li{ padding:8px 10px; gap:9px; }
.boards .bd-awards.tight .ba-ico{ width:24px; height:24px; }
.boards .bd-awards.tight .ba-txt b{ font-size:12px; }
.boards .bd-awards.tight .ba-n{ font-size:13px; }

/* ── profile ─────────────────────────────────────────────── */
.boards .bp-top{ display:flex; align-items:flex-start; gap:12px; }
.boards .bp-face{
  width:58px; height:58px; flex:none; display:block; border-radius:50%; overflow:hidden;
  background:radial-gradient(circle at 35% 30%,#ff7ab8,#c0246e);
  box-shadow:0 0 0 3px var(--outline), 0 0 0 6px var(--aqua), 0 4px 0 rgba(0,0,0,.5);
}
.boards .bp-face svg{ width:100%; height:100%; display:block; }
.boards .bp-who{ display:flex; flex-direction:column; gap:5px; min-width:0; flex:1; }
.boards .bp-who b{ font:900 18px/1 var(--display); letter-spacing:.04em; color:var(--ink);
  -webkit-text-stroke:3px var(--outline); paint-order:stroke fill; }
.boards .bp-who em{ font:800 9.5px/1.2 var(--ui); font-style:normal; letter-spacing:.14em;
  color:var(--gold); text-transform:uppercase; }
.boards .bp-who .xpbar{ width:100%; }
.boards .bp-src{ font:700 8.5px/1.3 var(--ui); letter-spacing:.12em; color:var(--bd-label); }
.boards .bp-rank{
  flex:none; display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:7px 10px; background:linear-gradient(180deg,#2a1f4f,#160f2e);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  box-shadow:0 0 0 2px var(--outline), 0 3px 0 rgba(0,0,0,.5);
}
.boards .bp-rank i{ width:22px; height:22px; display:block; }
.boards .bp-rank i svg{ width:100%; height:100%; display:block; }
.boards .bp-rank b{ font:900 17px/1 var(--display); color:var(--gold); }
.boards .bp-rank em{ font:800 8.5px/1 var(--ui); font-style:normal; letter-spacing:.14em;
  color:var(--bd-label); }
.boards .bp-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:13px;
  padding-top:12px; border-top:2px solid var(--bd-line); text-align:center;
}
.boards .bp-grid b{ display:block; font:900 20px/1 var(--display); color:var(--gold);
  text-shadow:0 2px 0 rgba(0,0,0,.6); }
.boards .bp-grid span{ display:block; margin-top:4px; font:800 9px/1.2 var(--ui);
  letter-spacing:.12em; color:var(--bd-label); }

/* ── career stats ────────────────────────────────────────── */
.boards .bd-career{ margin:0; display:grid; grid-template-columns:1fr auto;
  gap:9px 14px; align-items:center; }
.boards .bd-career dt{ margin:0; display:flex; align-items:center; gap:9px;
  font:800 11px/1.25 var(--ui); letter-spacing:.11em; text-transform:uppercase;
  color:var(--bd-label); }
.boards .bd-career dt .ci{ width:15px; height:15px; color:var(--aqua); }
.boards .bd-career dd{ margin:0; text-align:right; font:900 15px/1.15 var(--display);
  letter-spacing:.02em; color:var(--ink); text-shadow:0 2px 0 rgba(0,0,0,.5); }
.boards .bd-career dd.gold{ color:var(--gold); }
.boards .bd-career dd.lime{ color:var(--lime); }
.boards .bd-career dd.aqua{ color:var(--aqua-hi); }

/* ── status strip ────────────────────────────────────────── */
.boards .bd-status{
  zoom:var(--op-ui-scale,1); flex-wrap:wrap; gap:14px 18px;
  /* theme.css paints this with --ink-faint, which measures 3.1:1 on
     the ground behind it — this screen carries real sentences here */
  color:var(--bd-label);
}
.boards .bd-status .st{ display:inline-flex; align-items:center; gap:7px; }
.boards .bd-status .st i{ width:15px; height:15px; display:block; color:var(--aqua); flex:none; }
.boards .bd-status .st i svg{ width:100%; height:100%; display:block; }
.boards .bd-status .st.warn{ color:var(--gold); }
.boards .bd-status .st.warn i{ color:var(--gold); }
.boards .bd-status b{ color:var(--ink); font-weight:800; }
.boards .bd-say{
  margin:0; text-align:right; min-height:14px; max-width:46ch;
  font:800 11px/1.4 var(--ui); letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold-hi);
}

/* ── focus. clip-path eats `outline`, so light up the edge. ──
   :focus, not :focus-visible — Chrome leaves focus-visible false when
   focus moves by keyboard after a click, which hides the current item. */
.boards :is(.btn,.pill,.bd-tab,.modetab):focus{
  outline:none; --edge:#8ff9ee;
  box-shadow:inset 0 0 0 3px #8ff9ee, inset 0 0 0 7px rgba(2,8,18,.92);
  filter:
    drop-shadow(3px 0 0 var(--edge))  drop-shadow(-3px 0 0 var(--edge))
    drop-shadow(0 3px 0 var(--edge))  drop-shadow(0 -3px 0 var(--edge))
    drop-shadow(0 0 16px rgba(143,249,238,.95))
    drop-shadow(var(--lift));
}

/* ── accessibility flags, driven by the pause screen ─────── */
html.op-a11y-contrast .boards::before{ background:rgba(3,5,14,.97); }
html.op-a11y-contrast .boards .panel{ background:linear-gradient(180deg,#0f1f42,#060d22); }
html.op-a11y-contrast .boards .btn::after{ display:none; }
html.op-a11y-contrast .boards{ --bd-label:#dff7ff; --bd-note:#eaf8ff; --bd-row:#08132c; }

html.op-a11y-still .boards *,
html.op-a11y-still .boards *::before,
html.op-a11y-still .boards *::after{ transition:none !important; animation:none !important; }
html.op-a11y-still .boards .btn:hover,
html.op-a11y-still .boards .bd-tab:hover,
html.op-a11y-still .boards .modetab:hover{ transform:none; }

@media (prefers-reduced-motion:reduce){
  .boards *,.boards *::before,.boards *::after{ transition:none !important; animation:none !important; }
  .boards .btn:hover,.boards .bd-tab:hover,.boards .modetab:hover{ transform:none; }
}

/* ── narrow ──────────────────────────────────────────────── */
@media (max-width:1240px){
  .boards .bd-body{ grid-template-columns:minmax(200px,20vw) minmax(0,1fr); }
  .boards .bd-side{ grid-column:1 / -1; flex-direction:row; flex-wrap:wrap; }
  .boards .bd-side > .panel{ flex:1 1 300px; }
}
@media (max-width:860px){
  .boards .bd-body{ grid-template-columns:minmax(0,1fr); overflow:auto; }
  .boards .bd-rail{ flex-direction:row; flex-wrap:wrap; }
  .boards .bd-rail .bd-tab{ width:auto; flex:1 1 140px; }
  /* the rail is a wrapped row here, so the season card no longer has a
     tall column to fill — without this its artwork grows to 210px and
     pushes the actual board a screen down */
  .boards .bd-rail .bd-season{ flex:1 1 100%; }
  .boards .bs-art{ flex:0 0 auto; max-height:84px; margin:4px 0 0; }
  .boards .bs-art svg{ max-height:84px; }
  .boards .bd-rail,.boards .bd-main,.boards .bd-side{ max-height:none; overflow:visible; }
  .boards .bd-head{ padding:10px 14px 2px; }
  .boards .bd-body{ padding:6px 14px; }
}
@media (max-width:700px){
  table.bd-rank thead th:nth-child(n+4),
  table.bd-rank tbody td:nth-child(n+4){ display:none; }
  table.bd-rank tbody td:nth-child(3){ border-right:2px solid var(--outline); }
}

/* ── medal numerals: light emboss, not a black smear ─────────
   Same fix and same reason as results.css — the two tables are
   deliberate siblings and must not drift. See the note there. */
.boards table.bd-rank tbody tr:is(.m1,.m2,.m3) .rank-chip{
  text-shadow:0 1px 0 rgba(255,255,255,.45);
}